Geldik HTML’in en güçlü, web tasarımının ise kelimenin tam anlamıyla "kilit taşı" olan dersine. 5. Ders ile birlikte artık düz metinler yazmanın ötesine geçip, şablonların ve widget'ların mimarisini oluşturan bloklarla tanışıyoruz.
Merhaba Blogger dostları! Önceki derslerimizde yazı içi elementleri tek tek öğrendik. Şimdi ise bu elementleri bir araya getirip paketleyeceğimiz, onlara korunaklı kutular oluşturacağimiz o sihirli etiketlere bakacağız: <div> ve <span>.Eğer blogunuzda özel bir not alanı, şık bir uyarı kutusu veya yan yana duran bento ızgaraları (Bento Grid) oluşturmak istiyorsanız, bu iki etiketin mantığını çok iyi kavramalısınız.
1. Blok Element ve Satır İçi Element Nedir?
HTML dünyasında etiketler ekrandaki davranışlarına göre iki ana gruba ayrılır:
A) Blok Seviyeli Elementler (Örnek: <div>)
Girdiği yerde diktatör gibidir! Bulunduğu satırı tamamen kaplar ve kendisinden sonra gelen her şeyi bir alt satıra fırlatır. Genişlik (width) ve yükseklik (height) değerlerini söz dinleyerek kabul eder.
Açılımı: Division (Bölüm/Bölme)
Kullanım Amacı: Sayfayı bölümlere ayırmak, büyük kod bloklarını tek bir kutu içine almak.
<div>Bu bir div bloğudur. Satırın sonuna kadar olan tüm boşluğu sahiplenir.</div><div>Bu ikinci div ise mecburen alt satırdan başlar.</div>
B) Satır İçi (Inline) Elementler (Örnek: <span>)
Çok uyumludur. Sadece içindeki metnin boyutu kadar yer kaplar. Yanına başka bir element gelirse ona yer açar, alt satıra geçmeye zorlamaz. Genişlik ve yükseklik kurallarını doğrudan kabul etmez.
Kullanım Amacı: Bir paragrafın veya cümlenin içindeki sadece tek bir kelimenin rengini, yazı tipini veya stilini değiştirmek.
<p>Bu bir paragraftır ve içindeki <span>sadece bu kelimeyi</span> span içine aldım.</p>
2. Tasarımın Gizli Silahları: class ve id Niteliği
Blogger temalarında (Tema > HTML'yi Düzenle alanında) binlerce kez karşılaştığınız o iki gizemli kelime: class ve id. Bunlar HTML etiketlerine verdiğimiz isim etiketleridir.
class(Sınıf): Bir okulun "10-A Sınıfı" gibidir. Birden fazla etikete aynı sınıf ismini verebilirsiniz. Ortak özellik taşırlar. (Örneğin blogdaki tüm "Not Kutuları" aynı class'a sahip olabilir).id(Kimlik): T.C. Kimlik Numarası gibidir. Bir sayfada sadece bir tek etikete özel olmalıdır. Benzersizdir. (Örneğin blogun ana menüsüid="main-nav"şeklinde tek bir tane olur).
<div class="not-kutusu">İlk notum burada.</div><div class="not-kutusu">İkinci notum burada.</div><div id="ozel-istatistik-alani">Benzersiz İçerik</div>
Beşinci Pratik: Yazı İçi "Uyarı Kutusu" İskeleti Kuralım
Şimdi Blogger panelinizde yeni bir yazı açın, HTML Görünümü'ne geçin ve aşağıdaki yapıyı yapıştırın.
Burada hem <div> ile bir kutu oluşturacağız, hem de <span> ile cümlenin içindeki tek bir kelimeyi vurgulayacağız:
<div class="blog-uyari-kutusu">
<h3>⚠️ ÖNEMLİ DUYURU</h3>
<p>Blog şablonunuzda kod değişikliği yapmadan önce mutlaka <span>temanızın yedeğini</span> almalısınız. Aksi takdirde veri kaybı yaşayabilirsiniz.</p>
</div>
Blogger Arşivim Notu: Boş Div'lerin Kaybolması ve CSS Hazırlığı
Yukarıdaki kodu kopyalayıp Oluşturma Görünümü'ne geçtiğinizde muhtemelen etrafında hiçbir kutu çizgisi veya arka plan rengi görmeyeceksiniz; sadece düz yazılar alt alta listelenecek. Çünkü HTML sadece binanın tuğlalarını örer.
O oluşturduğumuz blog-uyari-kutusu sınıfına cam göbeği bir arka plan rengi vermek, kenarlarını yuvarlatmak (glassmorphic veya bento tasarımı yapmak) ve <span> içine aldığımız kelimeyi kırmızı yapmak tamamen CSS'in görevidir.
HTML ile bu iskeleti class vererek doğru kurduğumuz için, CSS derslerimize geçtiğimizde temamızın kodlarına sadece birkaç satır ekleyerek bu kutuyu göz alıcı bir hale getirebileceğiz. html,bolmeleri,dersleri
Hiç yorum yok:
Yorum Gönder