İçindekiler

HTML Nedir?
HTML'nin Kısa Tarihçesi
Bir HTML Sayfasının Temel Yapısı
Sık Kullanılan HTML Etiketleri
Listeler
Tablolar
Bağlantılar ve Görseller
Formlar
HTML5 ve Semantik Etiketler
Özet

1. HTML Nedir?

HTML, İngilizce HyperText Markup Language ifadesinin kısaltmasıdır. Türkçesi "Hiper Metin İşaretleme Dili" anlamına gelir. Web sayfalarının iskeletini ve içeriğini oluşturmak için kullanılan standart işaretleme dilidir.

HTML bir programlama dili değildir. Çünkü mantık kurmaz, hesaplama yapmaz; sadece içeriğin (başlık, paragraf, resim, bağlantı vb.) ne olduğunu tarayıcıya söyler.

Hiper metin: Sayfaları birbirine bağlayan tıklanabilir bağlantılara (link) verilen addır.
İşaretleme (Markup): İçeriği etiketlerle (tag) tanımlama yöntemidir.
Dil: Tarayıcıların anladığı belirli kurallar ve sözdizimidir.

Bir web sayfası üç temel teknolojiden oluşur:

Teknoloji	Görevi
HTML	Sayfanın yapısını ve içeriğini oluşturur (iskelet).
CSS	Sayfanın görünümünü, renk ve düzenini belirler (giysi).
JavaScript	Sayfaya etkileşim ve hareket kazandırır (davranış).

Bu ödevdeki sayfalar yalnızca HTML ile hazırlanmıştır.

2. HTML'nin Kısa Tarihçesi

HTML, 1989-1991 yılları arasında İsviçre'deki CERN araştırma merkezinde çalışan Tim Berners-Lee tarafından geliştirilmiştir. Amaç, bilim insanlarının belgeleri birbirine bağlayarak paylaşabilmesiydi.

Sürüm	Yıl	Açıklama
HTML (ilk hali)	1991	Yaklaşık 18 basit etiketle ilk tanım yapıldı.
HTML 2.0	1995	İlk resmi standart olarak yayımlandı.
HTML 3.2	1997	W3C önerisi oldu; tablolar ve yeni özellikler geldi.
HTML 4.01	1999	Uzun yıllar kullanılan çok yaygın sürüm.
XHTML 1.0	2000	HTML'nin daha katı, XML tabanlı biçimi.
HTML5	2014	Video, ses, semantik etiketler ve modern web özellikleri geldi.

Günümüzde HTML, WHATWG topluluğu tarafından "HTML Living Standard" (yaşayan standart) olarak sürekli güncellenmektedir.

3. Bir HTML Sayfasının Temel Yapısı

Her HTML belgesi aşağıdaki gibi temel bir iskelete sahiptir:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Sayfa Başlığı</title>
</head>
<body>
  <h1>Merhaba Dünya</h1>
  <p>Bu bir paragraftır.</p>
</body>
</html>

Etiket	Anlamı
`<!DOCTYPE html>`	Belgenin HTML5 olduğunu tarayıcıya bildirir.
`<html>`	Tüm sayfayı kapsayan kök etiketidir. `lang="tr"` sayfa dilini belirtir.
`<head>`	Sayfa hakkındaki bilgileri (başlık, karakter kodlaması, açıklama) içerir. Ekranda görünmez.
`<meta>`	Sayfa hakkında ek bilgi (üst veri) verir.
`<title>`	Tarayıcı sekmesinde görünen başlıktır.
`<body>`	Ekranda görünen tüm içeriği barındırır.

Etiket (Tag) Kuralları

Çoğu etiket açılış (<p>) ve kapanış (</p>) olarak çiftler halindedir.
Bazı etiketler kapanışsızdır: <br>, <hr>, <img>, <meta>.
Etiketlere öznitelik (attribute) eklenebilir. Örnek: <a href="https://www.ornek.com"> içindeki href bir özniteliktir.
Etiketler iç içe kullanılabilir, ancak doğru sırayla kapatılmalıdır.

4. Sık Kullanılan HTML Etiketleri

Başlıklar

HTML'de altı seviye başlık vardır: <h1> en büyük ve en önemli, <h6> en küçük başlıktır.

Başlık 1 (h1)

Başlık 2 (h2)

Başlık 3 (h3)

Başlık 4 (h4)

Başlık 5 (h5)

Başlık 6 (h6)

Metin Biçimlendirme Etiketleri

Etiket	Açıklama	Örnek
`<p>`	Paragraf	Bu bir paragraftır.
`<strong>`	Önemli (kalın) metin	Kalın yazı
`<em>`	Vurgulu (italik) metin	Eğik yazı
`<u>`	Altı çizili metin	Altı çizili
`<mark>`	İşaretlenmiş (vurgulanmış) metin	İşaretli yazı
`<del>`	Üstü çizili (silinmiş) metin	~~Silinmiş yazı~~
`<sub>`	Alt simge	H₂O
`<sup>`	Üst simge	x²
`<br>`	Satır sonu (alt satıra geçirir)	Birinci satır İkinci satır
`<hr>`	Yatay çizgi	(aşağıdaki çizgi)
`<blockquote>`	Alıntı bloğu	Bu bir alıntı örneğidir.
`<code>`	Kod parçası	`print("Merhaba")`

5. Listeler

HTML'de üç tür liste vardır.

Sırasız Liste (`<ul>`)

Elma
Armut
Kiraz

Sıralı Liste (`<ol>`)

Ev ödevini oku
Kodu yaz
Tarayıcıda test et

Tanım Listesi (`<dl>`)

HTML: Web sayfalarının yapısını oluşturan işaretleme dili.
Etiket: Açılış ve kapanış işaretleri arasında içeriği tanımlayan yapı.

6. Tablolar

Tablolar verileri satır ve sütunlar halinde göstermek için kullanılır.

Tablo Etiketleri
Etiket	Görevi
`<table>`	Tabloyu oluşturur.
`<tr>`	Tablo satırı (table row).
`<th>`	Tablo başlık hücresi (table header).
`<td>`	Tablo veri hücresi (table data).
`<caption>`	Tablo başlığı.

7. Bağlantılar ve Görseller

Bağlantı (`<a>`)

<a> (anchor) etiketi başka sayfalara, dosyalara veya aynı sayfadaki bölümlere bağlantı verir. Hedef adres href özniteliğiyle belirtilir.

<a href="https://www.w3.org">W3C Sitesi</a>

Örnek: W3C Sitesi (yeni sekmede açılır)

Diğer sayfamıza gitmek için: URL Uzantıları Sayfası

Görsel (`<img>`)

Sayfaya resim eklemek için kullanılır. Kapanış etiketi yoktur.

<img src="resim.jpg" alt="Resmin açıklaması" width="300">

src: Resim dosyasının yolu.
alt: Resim yüklenemezse veya ekran okuyucu kullanılırsa okunan alternatif metin.
width / height: Genişlik ve yükseklik.

8. Formlar

Formlar, kullanıcıdan bilgi almak için kullanılır. Aşağıda örnek bir form vardır (bilgiler herhangi bir yere gönderilmez).

9. HTML5 ve Semantik Etiketler

HTML5 ile birlikte sayfanın bölümlerini anlamlı biçimde tanımlayan semantik etiketler geldi. Bunlar hem okunabilirliği hem de arama motorlarının ve ekran okuyucuların sayfayı anlamasını kolaylaştırır.

Etiket	Anlamı
`<header>`	Sayfanın veya bölümün üst kısmı (başlık alanı).
`<nav>`	Gezinme (menü) bağlantıları.
`<main>`	Sayfanın ana içeriği.
`<section>`	Konuya göre ayrılmış bölüm.
`<article>`	Kendi başına anlamlı içerik (haber, blog yazısı vb.).
`<aside>`	Yan içerik, ek bilgi.
`<footer>`	Sayfanın veya bölümün alt kısmı.

HTML5 ayrıca <audio> ve <video> etiketleriyle ek eklenti gerektirmeden ses ve video oynatmayı mümkün kılmıştır.

Ayrıca birçok etiket ve öznitelik zamanla kullanımdan kaldırılmıştır. Örneğin <font>, <center> ve <marquee> artık önerilmez; görünüm işleri CSS'e bırakılmıştır.

10. Özet

HTML, web sayfalarının yapısını tanımlayan işaretleme dilidir.
İlk olarak Tim Berners-Lee tarafından CERN'de geliştirilmiştir; güncel sürümü HTML5'tir.
Etiketler, öznitelikler ve iç içe yapı HTML'nin temelini oluşturur.
Başlık, paragraf, liste, tablo, bağlantı, görsel ve form en sık kullanılan öğelerdir.
Semantik etiketler sayfayı daha anlaşılır hale getirir.

Devam etmek için: URL Uzantıları (com, edu, tr, net...) sayfasına git →