Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan HTML ve CSS kullanarak web sayfası tasarımı eğitimidir. Eğitmen, Tasarım Kodlama.com sitesinden alınan bir şablonu adım adım oluşturmayı göstermektedir.
- Video, üç bloklu bir web sayfasının HTML ve CSS kodlarının nasıl yazılacağını detaylı şekilde anlatmaktadır. Eğitim, sayfanın üst kısmından başlayarak menü düzenlemesi, orta kısmın dört bölüm (kapak resmi, üç kutu ve bir çizgi) oluşturulması, alt kısmın bağlantılarının eklenmesi ve Google Font kullanımı gibi konuları kapsamaktadır.
- Eğitimde flexbox kullanımı, font boyutları, renk ayarları, padding, margin değerleri, boşluklar (margin, gap), altı çizili görünüm, çerçeve ekleme, resim düzenleme ve logo üzerinde ilk harfin üzerine gelme efekti gibi CSS özellikleri detaylı olarak gösterilmektedir. Ayrıca Pixum Photos sitesinden resimlerin nasıl alınacağı ve tasarımın tasarımla uyumlu hale getirilmesi için gerekli düzenlemeler de anlatılmaktadır.
- HTML ve CSS ile Şablon Oluşturma
- Video, HTML ve CSS kullanarak tasarım kodlama.com sitesindeki şablonu adım adım ölçülere uyarak oluşturmayı gösterecek.
- Şablonda üç blok bulunuyor: üst kısım, orta kısım ve alt kısım.
- Her bloğa ayrı bir class verilecek ve ortak bir ortalama işlemi yapan kapsayıcı div oluşturulacak.
- 01:08HTML Şablon Kodlarının Yazılması
- İlk olarak HTML şablonu kodları yazılacak: üst kısım için "sayfa üstü" ve "sayfa ortası" class'lı div'ler, alt kısım için "sayfa alt" class'lı div oluşturulacak.
- CSS kodları dahili olarak yazılacak, böylece sayfa içerisinde daha rahat görülebilecek.
- Tüm elementlerin box-sizing değerleri border-box olarak ayarlanacak, böylece width değeri padding ve margin dahil olacak.
- 03:10Resetleme ve Arka Plan Ayarları
- HTML'ye font-size 62,5% (10 piksel) olarak ayarlanacak, böylece her 10 piksel için 1 ram kullanılabilir.
- Body, h1 ve h2 gibi etiketlerin margin ve padding değerleri sıfırlanacak.
- Arka plan class'ına flot color sitesinden alınan arka plan rengi verilecek.
- 04:09Kapsayıcı ve Üst Kısım Ayarları
- Kapsayıcı div'in width değeri 96 ram (960 piksel) olarak ayarlanacak ve margin değerleri auto auto olacak ki sayfanın ortasına gelsin.
- Üst div'in minimum height değeri 200 piksel (20 ram) olarak ayarlanacak.
- Üst kısımda solda logo, sağ tarafta menü bulunuyor.
- 05:20Logo ve Menü Oluşturma
- Logo ve menü birer div içerisine alınacak, logo içinde h1 ve h2 etiketleri kullanılacak.
- Menü için ul ve li etiketleri kullanılacak, li'lerin içinde a etiketleri olacak.
- Üst div'in display özelliği flex olarak ayarlanarak nesneler yan yana gelecek.
- 07:39Flexbox Özellikleri
- Flexbox'ta sağ tarafında bırakılan boşluk, justify-content: space-between ile nesnelerin ortasına eşit şekilde dağıtılabilir.
- Yatayda ortaya gelmesi için align-items: center kullanılacak.
- Logo içindeki h1'in font-size değeri 5 ram (25 piksel) olarak ayarlanacak.
- 10:29Yazı Biçimlendirme
- Karakterler arasındaki boşluk letter-spacing özelliği ile ayarlanabilir.
- Logo içindeki yazı text-align: center ile ortalanmış şekilde görünür.
- Yazı rengi color: #fff (beyaz) olarak ayarlanabilir.
- 11:56Menü Düzenleme
- Ul'nin içindeki boşluklar padding ve margin değerleri sıfırlanarak kaldırılabilir.
- Ul'nin marker'ı list-style: none ile kaldırılabilir.
- Ul'nin içindeki li'ler flex olarak ayarlanarak yan yana gelecek.
- 13:31Menü Tasarımı
- Menüdeki yazıların font size değeri 1.60 gram 16 piksel olarak ayarlanıyor, gerekirse 1.80 gram 16 piksel olarak büyütülebilir.
- Yazılara sağdan soldan 2 gram 20 piksel padding verilerek ve lee'ler arasında 1 gram 10 piksel margin eklenerek menü daha düzenli görünüyor.
- Menü rengi FFFF olarak ve text dekorasyonu none olarak ayarlanıyor, hover özelliği kullanılarak üzerine geldiğimizde sarı renk değişimi sağlanıyor.
- 15:59Orta Kısım Tasarımı
- Orta kısımda toplam dört div oluşturuluyor: bölüm bir, bölüm iki, bölüm üç ve arada bir çizgi.
- Bölüm bir'e kapak resmi ekleniyor ve resmin üstüne 2 gram 20 piksel margin verilerek yukarıda boşluk oluşturuluyor.
- Bölüm iki'ye üç kutu ekleniyor, her kutunun içinde başlık bilgileri ve lorem ipsum yazısı bulunuyor.
- 21:30Kutuların Düzenlenmesi
- Kutuların yan yana gelmesi için orta bölüm iki'ye display flex özelliği veriliyor.
- Kutuların genişliği 290 piksel olarak ayarlanıyor ve justify content space between özelliği ile boşluklar ortaya dağıtılıyor.
- Kutuların içindeki yazıların font size değeri 2 gram 20 gram ve 1.60 gram 16 gram olarak ayarlanıyor.
- 26:39Bölüm Üç Tasarımı
- Bölüm üç'te solda içerik, sağ tarafta görsel olarak iki yapı bulunuyor.
- Görsel kısmına 450x250 piksel boyutunda bir resim ekleniyor.
- İçerik kısmına h1 ve p etiketleri ile lorem ipsum yazısı ekleniyor ve bölüm üç de display flex özelliği ile düzenleniyor.
- 28:27CSS ile Boşluk Ayarları
- Bölüm üç içindeki h1 etiketinin sağından boşluk vermek için margin right özelliği kullanılıyor.
- Nesneler arasında boşluk vermek için gap özelliği kullanılıyor, justify content: space between ile içerik ortaya ayrılmış durumda.
- Gaps seçeneği artırılarak iki nesne arasına belirtilen miktarda boşluk bırakılabilir, örneğin 20 piksel veya 40 piksel.
- 30:29Yazı Boyutu ve Çizgi Ekleme
- H1 etiketinin font size'ı 2,5rem, p etiketinin font size'ı 1,60 rem olarak ayarlanıyor.
- Çizgi eklemek için "genel bir çizgi" klasörü oluşturuluyor ve border özelliği kullanılıyor.
- Sadece bir taraftan çizgi vermek için border top veya border bottom gibi özellikler kullanılabilir.
- 31:32Çizgi Özellikleri ve Sayfa Alt Kısmı
- Çizgi için border-dotted (noktalı kesikli), 1 piksel kalınlığında ve sarı renkli bir çizgi oluşturuluyor.
- Çizgi için margin değerleri verilerek yukarıdan ve aşağıdan boşluk bırakılıyor.
- Sayfanın alt kısmında bağlantılar için "bağlantılar" klasörü oluşturuluyor ve içinde 4 adet li etiketi ile her birinin içinde 5 adet bağlantı oluşturuluyor.
- 34:18Kapsayıcı Kullanımı
- Bağlantıları bir kapsayıcı içerisine almak gerekiyor.
- Kapsayıcı class'ı sayfanın ortasına gelmesini sağlıyor.
- 34:37CSS ile Bağlantıların Düzenlenmesi
- Bağlantı div'leri yan yana gelmesi için alt display flex özelliği kullanılıyor.
- Bağlantıların eşit miktarda genişlemesi için flex grow 1 özelliği ekleniyor.
- Bağlantıların altındaki text dekorasyon none ve renk ayarları yapılıyor.
- 36:29Bağlantıların Alt Çizgisi ve Boşlukları
- Bağlantıların altındaki altı çizgi için ul içindeki li'lere border bottom 1 piksel solid özelliği ekleniyor.
- Aralarda boşluklar için gap 20 piksel ve padding 20 piksel değerleri kullanılıyor.
- Bağlantılar arasında boşluk için margin top 20 piksel ekleniyor.
- 38:17Tasarım Detayları
- Bağlantıların font size'ları ayarlanıyor ve aralarında 5 piksellik boşluk veriliyor.
- Li nesnelerinin kendi arasında boşluk vermek için margin bottom 5 piksel ekleniyor.
- Bölüm bir'e çerçeve eklemek için border 10 piksel solid özelliği kullanılıyor.
- 40:32Resim ve Alt Çizgi Düzenlemeleri
- Resmin içinden boşluk olması için padding 20 piksel veriliyor.
- Resmin genişliğinin otomatik olarak ayarlanması için width %100 değeri kullanılıyor.
- Alt çizgi eklemek için üst border bottom 10 piksel solid özelliği kullanılıyor.
- 44:32W Harfi ve Font Ekleme
- W harfi için h1 etiketinin ilk karakteri seçiliyor ve üzerine geldiğinde renk değişimi yapılıyor.
- Google Fonts kullanılarak Nutino Sans fontu ekleniyor.
- Font kodu body etiketinin içerisine yerleştiriliyor ve sistemdeki tasarımlar bu fonta dönüyor.