Merhaba Blogger yazarları! Önceki derslerimizde metinleri, başlıkları, görselleri ve linkleri öğrendik. Bu (4.) dersimizde ise karmaşık bilgileri okuyucunun gözünü yormayacak şekilde gruplamayı öğreneceğiz.
Konumuz: Sıralı/Sırasız Listeler ve Temel Tablo Yapısı.
1. HTML ile Liste Oluşturma
Blog yazılarınızda maddeler halinde bilgi vermek, okuma süresini artırır ve kullanıcı deneyimini iyileştirir. HTML'de iki çeşit temel liste vardır:
A) Sırasız (Maddeli) Listeler: <ul> ve <li>
Kelimelerin veya cümlelerin başında nokta, kare gibi semboller olmasını istiyorsak, yani bir sıra önceliği yoksa kullanılır.
<ul>(Unordered List): Listenin başladığını ve bittiğini belirtir.<li>(List Item): Listenin her bir maddesini temsil eder.
<ul><li>Blogger Temaları</li><li>Eklentiler ve Widget'lar</li><li>SEO İpuçları</li></ul>
B) Sıralı (Numaralı) Listeler: <ol> ve <li>
Aşama aşama anlatılan kılavuzlarda veya bir sıralama (1, 2, 3...) belirtirken kullanılır.
<ol>(Ordered List): Listenin sayısal olarak sıralanacağını belirtir.
<ol><li>Blogger paneline giriş yapın.</li><li>Tema sekmesine tıklayın.</li><li>HTML'i Düzenle seçeneğini seçin.</li></ol>
2. HTML ile Tablo (<table>) Oluşturma
Tablolar, verileri satır ve sütunlar halinde organize etmemizi sağlar. İlk başta kodları biraz karmaşık gelebilir ama mantığı çok basittir. Lego parçalarını birleştirmek gibidir.
Kullanacağımız 4 temel etiket şunlardır:
<table>: Tablonun ana çerçevesidir.<tr>(Table Row): Tablodaki satırları oluşturur.<th>(Table Header): Tablonun en üstündeki başlık hücrelerini oluşturur (Metni kalın ve ortalı yapar).<td>(Table Data): Satırların içindeki normal hücreleri/verileri oluşturur.
Temel Bir Tablo İskeleti:
<table border="1"><tr><th>Özellik</th><th>Blogger (Blogspot)</th><th>WordPress (Kendi Kendine Barındırılan)</th></tr><tr><td>Barındırma (Hosting)</td><td>Ücretsiz (Google)</td><td>Ücretli (Yıllık Ödeme)</td></tr><tr><td>Güvenlik</td><td>Yüksek (Google Korur)</td><td>Kullanıcı Sorumluluğunda</td></tr></table>
💡 Kodun Mantığı: Önce
<tr>ile bir satır açıyoruz, içine yan yana gelecek hücreleri (<th>veya<td>) diziyoruz, sonra</tr>ile satırı kapatıp yeni satıra geçiyoruz.
Dördüncü Pratik: Kodları Blogumuzda Deneyelim
Blogger panelinizde yeni bir taslak yazı açın, HTML Görünümü'ne geçin ve aşağıdaki hazır yapıyı yapıştırarak Oluşturma Görünümü'nde nasıl durduğuna bakın:
<h2>Blog Açarken Dikkat Edilmesi Gereken 3 Şey</h2>
<ol>
<li>Doğru ve akılda kalıcı bir alan adı (domain) seçmek.</li>
<li>Hızlı ve mobil uyumlu bir tema kullanmak.</li>
<li>Düzenli ve özgün içerik üretmek.</li>
</ol>
<br>
<h2>Platform Karşılaştırması</h2>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>Platform</th>
<th>Maliyet</th>
<th>Zorluk Seviyesi</th>
</tr>
<tr>
<td>Blogger</td>
<td>%100 Ücretsiz</td>
<td>Çok Kolay</td>
</tr>
<tr>
<td>WordPress</td>
<td>Maliyetli</td>
<td>Orta / İleri</td>
</tr>
</table>
Blogger Arşivim Notu: Tablo Çizgilerini Modernleştirmek
Yukarıdaki örnekte tablonun kenarlıklarının görünmesi için eski bir HTML yöntemi olan border="1" niteliğini kullandık. Ancak bu yöntem tablonuzu 90'lardan kalma, demode bir görünüme sokabilir.
Günümüz modern web tasarımında tabloların çizgilerini, arka plan renklerini ve hücre boşluklarını tamamen CSS ile şekillendiriyoruz. Örneğin, kenarlıkları kaldırmak veya satırlara şık geçişler eklemek için temamızın CSS kodlarına küçük dokunuşlar yapacağız. HTML ile sadece bu verilerin iskeletini kurduğumuzu bilmeniz şu an için yeterlidir. ders,html,tablo
Hiç yorum yok:
Yorum Gönder