Semantik HTML

 

🎯 Semantik HTML Nedir?

Semantik HTML, bir etiketin ne işe yaradığını ve anlamını açıkça belirtmesidir.
Bu sayede:

• 🔍 Arama motorları sayfayı daha iyi anlar (SEO)

• ♿ Ekran okuyucular içeriği doğru okur (Accessibility)

• 🧠 Kod okunabilirliği ve bakım kolaylığı artar

---

1️⃣ Bölümleme (Yapısal) Etiketleri

<header>

• Bir sayfanın veya bölümün üst kısmıdır

• Logo, başlık, giriş yazısı içerebilir

• ❌ Tüm sayfa için birden fazla olabilir

ARIA:
Genellikle gerekmez (role="banner" otomatik gelir)

---

<nav>

• Gezinme menüsünü tanımlar

• Menü, link listeleri

ARIA:

<nav aria-label="Ana Menü">

Birden fazla <nav> varsa zorunlu

---

<main>

• Sayfanın tek ve ana içeriği

• Sayfada yalnızca 1 tane olmalı

ARIA:
Gerekmez (role="main" otomatik)

---

<section>

• Anlamsal bir konu bölümü

• Genelde bir başlık (h2-h6) içerir

İpucu:
Sadece CSS için kullanma ❌
Anlamı varsa kullan ✔️

---

<article>

• Bağımsız içerik

• Blog yazısı, haber, ürün kartı

Test:

“Bu içeriği tek başına paylaşabilir miyim?”
Evet → <article>

---

<aside>

• Ana içerikle dolaylı ilişkili

• Reklam, önerilen içerik, sidebar

ARIA:

<aside aria-label="İlgili İçerikler">

---

<footer>

• Sayfanın veya bölümün alt kısmı

• Telif hakkı, yasal linkler, ikincil menüler

---

<details> & <summary>

• Açılıp kapanan içerik

<details>
  <summary>Daha fazla bilgi</summary>
  İçerik burada
</details>

ARIA:
Otomatik desteklidir ✔️

---

<h1> – <h6>

• Başlık hiyerarşisi

• <h1> en önemli, <h6> en az önemli

Altın Kural:
❌ Atlama yapma (h1 → h3)
✔️ Sıralı kullan

---

2️⃣ İçerik Etiketleri

<p>

• Paragraf

---

<blockquote>

• Uzun alıntı

<blockquote cite="kaynak">

---

<q>

• Kısa alıntı (tırnaklı)

---

<dl>, <dt>, <dd>

• Terim – açıklama listesi

<dl>
  <dt>HTML</dt>
  <dd>İşaretleme dili</dd>
</dl>

---

<figure> & <figcaption>

• Görsel + açıklama

---

<pre>

• Önceden biçimlendirilmiş metin

• Kod, ASCII çizimler

---

<hr>

• Konu değişimini gösterir
  ❌ Sadece çizgi diye kullanma

---

3️⃣ Satır İçi (Inline) Etiketler

<strong>

• Önem vurgusu (kalın)

<em>

• Anlam vurgusu (italik)

---

<b> & <i>

• Sadece görsel stil

• Anlam yok

---

<abbr>

• Kısaltma

<abbr title="HyperText Markup Language">HTML</abbr>

---

<code>

• Kod parçaları

---

<mark>

• Vurgulu metin (fosforlu)

---

<time>

• Tarih / saat

<time datetime="2026-01-23">23 Ocak 2026</time>

---

<span>

• Anlamsız, sadece stil veya JS için
  ❌ Gereksiz kullanma

---

<sub> & <sup>

• Alt / üst simge
  H₂O, m² gibi

---

4️⃣ Medya ve Gömülü İçerik

<img>

• Görsel

ARIA / Accessibility (ÇOK ÖNEMLİ):

<img src="logo.png" alt="Şirket logosu">

---

<audio> & <video>

• Ses / video

İpucu:
Her zaman <controls> ekle

---

<picture> & <source>

• Responsive görseller

---

<iframe>

• Harici sayfa gömme

ARIA:

<iframe title="Harita"></iframe>

---

<canvas>

• JS ile çizim

• Erişilebilirlik zayıf, dikkatli kullan

---

<svg>

• Vektörel grafik

• Erişilebilirlik için <title> eklenmeli

---

5️⃣ Tablo Etiketleri

<table>

• Tablo kapsayıcısı

---

<caption>

• Tablo başlığı (ÇOK ÖNEMLİ)

---

<thead>, <tbody>, <tfoot>

• Tablo bölümleri

---

<tr>

• Satır

---

<td>

• Veri hücresi

---

<th>

• Başlık hücresi

ARIA / Accessibility:

<th scope="col">Fiyat</th>
<th scope="row">Ürün A</th>

---

<colgroup> & <col>

• Sütun bazlı biçimlendirme

---

📌 ARIA Ne Zaman Gerekli?

✔️ Semantik etiket yoksa
✔️ Aynı etiket birden fazlaysa
✔️ Özel bileşen (custom UI) varsa

❌ Semantik HTML varsa gereksiz

---

🧠 Altın Kurallar (Sınav & Gerçek Hayat)

• Önce HTML anlamı, sonra CSS

• <div> son çare

• <span> = stil / JS

• Her görselin alt metni olmalı

• Başlık hiyerarşisi bozulmaz

Visual Code Kodları düzenli sıraya almak

 Shift + Alt + F

tuşarına aynı anda basılırsa düzenli olarak sıralanır

Semantik HTML

 1️⃣ Semantik Nedir?

• HTML, bir web sayfasının içeriğini tanımlar.

• Semantik HTML, içeriğin anlamını tanımlar.

• Gerçek hayat örneği:

  • Asansördeki düğmeler sadece dizili olsaydı ne işe yaradıkları anlaşılmazdı.

  • Numaralar, düğmelerin anlamını (hangi kata gittiğini) açıklar.

• HTML’de de etiketler, içeriğin ne anlama geldiğini belirtir.

---

2️⃣ Semantik HTML Neden Önemlidir?

• 🔍 Arama motorları sayfayı daha iyi anlar.

• ♿ Erişilebilirlik yazılımları (screen reader) içeriği doğru okur.

• 📐 Sayfa yapısı daha anlaşılır ve düzenli olur.

• 🧠 Kodun okunabilirliği artar (sen ve ekip arkadaşların için).

---

3️⃣ Temel Semantik HTML Etiketleri

• <h1> - <h6> → Başlıklar

• <ul> / <ol> → Listeler

• Ama bununla sınırlı değil, çok daha fazla semantik etiket vardır.

---

4️⃣ HTML Sayfasının Temel Yapısı

<html>
  <head></head>
  <body></body>
</html>

• Asıl semantik yapı body içinde kurulur.

---

5️⃣ Sayfa Genel Semantik Yapısı

Tipik bir HTML sayfası şu şekilde düzenlenir:

<header></header>
<nav></nav>
<main></main>
<footer></footer>

🔹 <header>

• Logo

• Site başlığı

• Üst alan bilgileri

🔹 <nav>

• Ana menü linkleri

• Genellikle <ul> içinde <a> etiketleri kullanılır

• Çoğu zaman <header>’dan sonra gelir

🔹 <main>

• Sayfanın asıl içeriği

• Sayfada yalnızca 1 tane olmalıdır

🔹 <footer>

• İletişim bilgileri

• Sosyal medya linkleri

• Telif hakkı bilgisi

---

6️⃣ <article> Etiketi

Tanım (W3C):

• Kendi başına anlamlı,

• Bağımsız olarak paylaşılabilir içerik.

📰 Gazete örneği:

• Bir sayfada birçok haber vardır

• Makasla kesip çıkarabildiğin her haber → article

📌 Örnek Article İçerikleri:

• Blog yazısı

• Forum gönderisi

• Gazete / dergi makalesi

• Kullanıcı yorumu

• Widget / küçük uygulama

Blog Örneği:

• Blog yazısı mutlaka <article> içinde olmalı

• <article>, <main> içinde yer alır

---

7️⃣ Article İçinde Semantik Yapı

<article>
  <header>
    <h1>Blog Başlığı</h1>
    <p>Tarih - Yazar</p>
  </header>

  <p>Blog içeriği...</p>
</article>

• Semantik etiketler iç içe kullanılabilir

• Amaç: içeriği en doğru şekilde tanımlamak

---

8️⃣ <section> Etiketi

• İçeriği bölümlere ayırmak için kullanılır

• Her section başlık içermelidir

📌 Kullanım Alanları:

• Makale içindeki alt bölümler

• Sayfa içindeki farklı alanlar

⚠️ Önemli:

• <section> article olmak zorunda değildir

• Sayfanın yapısına göre bağımsız da kullanılabilir

---

9️⃣ Article mi Section mı?

Durum	Kullan
Bağımsız içerik	<article>
Konu bölümü	<section>
Blog yazısı	<article>
Blog içindeki başlıklar	<section>

---

🔟 Sonuç

• Semantik HTML:

  • Sayfaya anlam kazandırır

  • Erişilebilirliği artırır

  • Arama motorlarının sayfayı daha iyi anlamasını sağlar

• Doğru semantik yapı = iyi yazılmış web sayfası

HTML, DOM, CSS

 

🔹 HTML (Hypertext Markup Language)

• Web sayfalarının yapısını oluşturur

• Etiketler (tags) ve öğeler (elements) kullanılır

• Açılış ve kapanış etiketleri vardır

• Tarayıcıya ne gösterileceğini söyler

HTML ile yapılabilecekler:

• Görsel ekleme

• Tablo oluşturma

• Form ve input alanları oluşturma

HTML’in Önemi:

• Doğru yapı → erişilebilir web

• Engelli kullanıcılar için destek sağlar

---

🔹 DOM (Document Object Model)

• HTML belgesinin nesne tabanlı modeli

• JavaScript’in HTML ile etkileşimini sağlar

• JS ile:

  • İçerik değiştirilir

  • Event’ler eklenir

  • Animasyon yapılır

---

🔹 CSS (Cascading Style Sheets)

• HTML’in görsel tasarımını belirler

• Tarayıcıya nasıl görüneceğini söyler

• Sayfa düzeni ve stil için kullanılır

CSS ile:

• Renk, yazı tipi, boşluk ayarlanır

• Box Model kullanılır

• Sayfa elemanları konumlandırılır

HTML ve CSS

 1. HTML ve CSS’in Tanımı ve Önemi

• HTML: Web sayfaları oluşturmak için temel işaretleme dili. İçeriğin yapısını tanımlar.

• CSS: HTML belgelerinin görünümünü ve düzenini kontrol eden stil sayfası dili.

• HTML + CSS = Web sayfalarını hem içerik hem de stil açısından kontrol etme.

2. HTML’in Tarihi ve Gelişimi

• 1990’dan beri var, başlangıçta yalnızca metin ve basit görseller gösteriyordu.

• Modern HTML: Multimedya desteği, responsive tasarım, yeni form türleri ve doğrulama özellikleri sunar.

3. CSS’in Özellikleri ve Avantajları

• Programlama dili değil, ama değişkenler ve iç içe kurallar gibi özellikler sunar.

• İçerik ve stilin ayrılması: HTML’i değiştirmeden stil değişikliği yapılabilir.

• Temel özellikler: Renk, boyut, boşluk, yazı tipi, konumlandırma, gölgeler, animasyonlar.

4. CSS’in 2011 ve Sonrası Yenilikleri

• Medya sorguları: Cihaza göre farklı stil uygulama

• Box-sizing: İçerik boyutu ve padding kontrolü

• Birden fazla arka plan ve border images

• Text shadows: Metne gölge ekleme

• Transformations ve transitions: Web öğelerini animasyonla hareket ettirme

5. HTML + CSS’in Uyumluluğu ve Geniş Kullanımı

• Web sayfaları artık masaüstü bilgisayar, telefon, tablet, oyun konsolu ve akıllı TV’de görüntülenebilir.

• Tasarım ve düzen cihaz türüne göre otomatik olarak uyum sağlayabilir.

6. Standartlar ve Organizasyon

• W3C, HTML ve CSS standartlarını yönetir ve sürekli günceller.

Modern Veri Ekosistemi - Modern Data Ecosystem

 Modern Veri Ekosistemi (Modern Data Ecosystem)

Kurumsal verinin toplanması, saklanması, işlenmesi, analiz edilmesi ve güvenli biçimde paylaşılması için kullanılan, bulut-odaklı ve ölçeklenebilir mimari yaklaşımı ifade eder.

Aşağıda net ve pratik bir çerçeve bulacaksın 👇

1️⃣ Temel Amaç

Veriyi gerçek zamanlı veya yakın gerçek zamanlı kullanmak

Büyük hacimli, farklı formatlardaki verileri tek çatı altında yönetmek

İş kararlarını analitik ve AI destekli hale getirmek

2️⃣ Klasik Sistemlerden Farkı

3️⃣ Modern Veri Ekosisteminin Ana Bileşenleri

🔹 1. Veri Kaynakları (Data Sources)

🔹 2. Veri Toplama (Ingestion)

🔹 3. Veri Saklama (Storage)

📦 Data Lake

Ham veri

Yapılandırılmış / yapılandırılmamış

Örn:

1. Amazon S3
2. Azure Data Lake
3. Google Cloud Storage

🧊 Data Warehouse

Analiz için optimize

Örn:

1. Snowflake
2. BigQuery
3. Amazon Redshift

⚡ Yeni nesil: Lakehouse (Delta Lake, Iceberg, Hudi)

🔹 4. Veri İşleme (Processing)

• Apache Spark
• Flink
• Databricks
• dbt (transformasyon)

🔹 5. Analitik & BI

• Power BI
• Tableau
• Looker
• Metabase
• Superset

🔹 6. Yapay Zeka & ML

• TensorFlow / PyTorch
• MLflow
• SageMaker
• Vertex AI

Tahminleme, anomali tespiti, öneri sistemleri burada devreye girer

🔹 7. Veri Yönetişimi & Güvenlik

• Data Catalog (Glue, DataHub)
• Veri kalitesi
• Yetkilendirme (IAM)
• KVKK / GDPR uyumu
• Lineage & Audit

4️⃣ Modern Data Stack Örneği (Gerçekçi)

IoT / App / API

      ↓

Kafka / Kinesis

      ↓

S3 Data Lake

      ↓

Spark / Databricks

      ↓

Snowflake

      ↓

Power BI / AI Model

5️⃣ Neden Önemli?

✅ Daha hızlı karar

✅ Daha doğru analiz

✅ AI entegrasyonu

✅ Ölçeklenebilir maliyet

✅ Gerçek zamanlı içgörü

6️⃣ Kimler Kullanıyor?

1. FinTech (fraud detection)
2. E-ticaret (öneri motoru)
3. Enerji & IoT
4. Telekom
5. Savunma & Akıllı şehirler