Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu eğitim videosunda Uğur Kılcı, izleyicilere on dakika içinde web tasarım ödevini nasıl yapabileceklerini adım adım gösteriyor.
- Video, web tasarım ödevinin temel yapısını oluşturma sürecini kapsamaktadır. Öncelikle klasör ve dosya oluşturma, HTML ve CSS kullanarak temel sayfa yapısı (header, footer, içerik ve menü) oluşturma, menü oluşturma, sayfa yönlendirmeleri yapma ve tasarım ekleme (arka plan rengi, padding, padding) gibi temel adımlar gösterilmektedir. Ayrıca, anasayfa, hakkımda, galeri ve iletişim gibi beş sayfa oluşturma ve resim ekleme işlemleri de anlatılmaktadır.
- Web Tasarım Ödevi Hazırlığı
- Uğur Kılcı, on dakikada web tasarım ödevi yapma yöntemini anlatıyor.
- İlk adım olarak adınız soyadınız ile ilgili bir klasör açıp, "anasayfa.html" isimli bir dosya oluşturmanız gerekiyor.
- Tasarım için üst tarafta header, alt tarafta footer, içerik ve menü olacak şekilde üç satırlı bir tablo oluşturmanız gerekiyor.
- 00:52HTML Yapısı Oluşturma
- HTML dosyası açıp, başlığa adınızı soyadınızı ekleyip, body kısmına bir tablo oluşturuyorsunuz.
- Tablo için tr tag'i satır, td tag'i sütun oluşturmak için kullanılıyor.
- İçerik ve menü için iki sütun oluşturmak için colspan tag'i kullanılıyor.
- 02:14Menü ve İçerik Tasarımı
- Sayfanın genişliğini 500 piksel olarak ayarlayıp, menü sütununu 250 piksel olarak küçültüyorsunuz.
- Header'ı ortalamak için table'ın başına center kodu ekliyorsunuz.
- Header'a adınızı soyadınızı ve sloganınızı ekleyip, telif hakkı işareti koyabiliyorsunuz.
- 03:26Menü Bağlantıları ve İçerik
- Menü bağlantıları için a tag'i kullanarak "anasayfa.html" gibi yönlendirmeler oluşturuyorsunuz.
- Menü bağlantılarını alt alta indirmek için br tag'i kullanıyorsunuz.
- İçerik kısmına h2 alt başlık ekleyip, paragraf ile içerik oluşturuyorsunuz.
- 04:10Stil Uygulama
- Arka planı değiştirmek için style kısmına body süslü parantez içinde background-color özelliği ekliyorsunuz.
- Header kısmına class ekleyerek stil uygulayabiliyorsunuz.
- Footer kısmına padding ekleyerek bitişik olan yerlerin arasına boşluk ekleyebilirsiniz.
- 05:36Menü ve Diğer Sayfalar
- Menü linklerine class ekleyerek stil uygulayabiliyorsunuz.
- Diğer sayfaları oluşturmak için aynı menü yapısını kopyalayıp, başlık ve içerik ekleyebilirsiniz.
- Galeriye resim eklemek için img etiketini kullanıp, src kısmına resmin adresini ekleyebilirsiniz.