Yükleniyor...

HTML ve İçerik Yönetim Sistemleri

HTML (HyperText Markup Language), bir web sitesinin temel iskeletini oluşturan dildir ve İçerik Yönetim Sistemleri (İYS) içerisinde hayati bir rol oynar. WordPress, Joomla, Drupal veya özel olarak geliştirilmiş bir İYS fark etmeksizin, eklenen içeriklerin son kullanıcıya doğru bir şekilde sunulmasını HTML sağlar.
HTML’yi, bir ev inşa etmeye benzetebiliriz: HTML evin duvarlarını ve iskeletini oluşturur; CSS duvarların boyası ve odaların dekorasyonu gibidir; JavaScript ise evin elektrik ve otomasyon sistemleri gibi işlevsel özellikler ekler. Bir kişisel web sitesinde HTML, biyografinizi ve portföyünüzü düzenler. Bir blogda, her yazı ve yorum HTML yapısında sunulur. Bir e-ticaret sitesinde ürün sayfaları ve alışveriş sepeti HTML ile iskeletlenir. Bir haber sitesinde manşetler, kategoriler ve makaleler HTML sayesinde düzgün yapılandırılır.
Bu içerikte şunları öğreneceksiniz:

  • HTML’nin bir İYS’deki rolü ve önemi.
  • Semantik ve temiz HTML kullanımı ile erişilebilir ve SEO uyumlu sayfalar oluşturma.
  • İçerik bloklarını mantıklı bir yapıda organize etmenin pratik yolları.
    Tıpkı düzgün yazılmış bir mektubun kolay okunması gibi, düzenli ve semantik HTML de sitenizi kullanıcılar ve arama motorları için anlaşılır hâle getirir.

Temel Örnek

html
HTML Code 
<!DOCTYPE html>

<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Haber Başlığı</title>
</head>
<body>
<article> <!-- Single news block -->
<h1>Yeni Teknoloji Fuarı Başladı</h1>
<p>Bu yılki fuarda 200'den fazla teknoloji firması yer aldı.</p>
</article>
</body>
</html>

Bu örnek, bir İçerik Yönetim Sistemi tarafından oluşturulabilecek temel bir haber yapısını göstermektedir. Parça parça inceleyelim:

  1. <!<a href="/tr/html/html-doctype/" class="smart-link">DOCTYPE</a> html> HTML5 standardını belirtir. Bu, tarayıcıların sayfayı modern standartlara göre yorumlamasını sağlar.
  2. <html lang="tr"> sayfanın dilini Türkçe olarak belirtir. Bu, hem arama motorları hem de ekran okuyucu yazılımlar için önemlidir.
  3. <meta charset="UTF-8"> Türkçe karakterlerin (ç, ğ, ü gibi) doğru görüntülenmesini sağlar.
  4. <title> tarayıcı sekmesinde görünen başlığı tanımlar ve SEO açısından önemlidir.
  5. <body> kullanıcıya gösterilecek tüm içerikleri içerir.
  6. <article> bağımsız bir içerik bloğunu temsil eder. Bir haber ya da blog yazısı genellikle bu etikette gösterilir.
  7. <h1> en üst seviye başlıktır. Sayfa hiyerarşisinde birincil öneme sahiptir.
  8. <p> paragraf etiketidir ve haberin metnini içerir.
    Yeni başlayanlar genellikle neden <div> yerine <article> kullanmamız gerektiğini sorar. Cevap semantiktedir: <article> arama motorlarına ve ekran okuyuculara “bu bağımsız bir içerik” mesajını verir. Bu, hem erişilebilirliği hem de SEO performansını artırır.

Pratik Örnek

html
HTML Code 
<!DOCTYPE html>

<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Online Mağaza</title>
</head>
<body>
<section id="urunler"> <!-- Product list section -->
<article>
<h2>El Yapımı Seramik Vazo</h2>
<img src="vazo.jpg" alt="Mavi desenli el yapımı seramik vazo">
<p>Fiyat: 250₺</p>
<a href="/sepet">Sepete Ekle</a>
</article>
</section>
</body>
</html>

En iyi uygulamalar:

  1. Semantik HTML kullanın: <article>, <section>, <header>, <footer> gibi etiketler içerik anlamını yansıtır.
  2. Erişilebilirlik sağlayın: Görseller için alt ekleyin, başlık hiyerarşisini koruyun, dil etiketini kullanın.
  3. Temiz yapı oluşturun: Kodunuzu girintileyin, gereksiz etiketlerden kaçının.

  4. İçeriği modüler tasarlayın: CMS, blokları kolayca yeniden kullanabilir.
    Yaygın hatalar:

  5. Sadece <div> kullanmak ve semantik yapıyı ihmal etmek.

  6. Resimlerde alt özelliğini unutarak erişilebilirliği engellemek.
  7. Etiketleri yanlış iç içe geçirmek (örn: <p> içinde <h1>).
  8. CMS’in görsel editörüne tamamen güvenmek, çünkü bazen “kirli” HTML üretir.
    Hata ayıklama önerileri:
  • Tarayıcı geliştirici araçları ile DOM yapısını inceleyin.
  • W3C Validator ile HTML’nizi doğrulayın.
  • Ekran okuyucu ve mobil cihazlarda testi ihmal etmeyin.
    Bu yaklaşımlar, İYS içerisinde temiz, erişilebilir ve sürdürülebilir HTML oluşturmanıza yardımcı olur.

📊 Hızlı Referans

Property/Method Description Example
<article> Bağımsız içerik bloğu <article>Blog Yazısı</article>
<section> İlişkili içerik grubu <section>Ürünler</section>
<img alt=""> Erişilebilir görsel ekler <img src="resim.jpg" alt="Açıklama">
<a href=""> Tıklanabilir bağlantı <a href="/iletisim">İletişim</a>
<header> Sayfa veya bölüm başlığı <header>Menü</header>
<footer> Sayfa veya bölüm alt bilgisi <footer>© 2025</footer>

Özetle, HTML bir İYS’nin görünmez ama en kritik temelidir. Tüm içerik blokları HTML sayesinde düzenlenir ve kullanıcıya sunulur. Semantik ve temiz HTML kullanmak hem kullanıcı deneyimini hem de SEO performansını doğrudan etkiler.
Ana çıkarımlar:

  • HTML yapısı, içerik yönetiminin temelini oluşturur.
  • Temiz ve semantik kod, erişilebilirlik ve SEO için kritiktir.

  • İYS’de doğru HTML kullanımı, içerik güncellemelerini kolaylaştırır.
    Sonraki adımlar:

  • CSS ile sitenizi görsel olarak zenginleştirin ve responsive tasarımlar oluşturun.

  • JavaScript ile interaktif öğeler ekleyin.
  • Şablon yapıları ve blok tabanlı içerik yönetimini öğrenin.
    Pratikte kişisel siteler, bloglar, e-ticaret veya haber projeleri üzerinde çalışarak profesyonel seviyeye adım atabilirsiniz.

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu konudaki anlayışınızı pratik sorularla test edin.

❓
3
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 30 / 51
Html Ders