Bir cümlelik özet
HTML, bir web sayfasının başlıklarını, paragraflarını, listelerini, bağlantılarını ve görsellerini etiketlerle tanımlayan işaretleme dilidir.
Neden önemli?
Bir önceki derste tarayıcının bir sunucudan dosya istediğini görmüştük. Tarayıcının ekrana çizdiği o dosya çoğu zaman bir HTML dosyasıdır.
HTML olmadan bir web sayfası, başlıkları ve paragrafları olmayan boş bir kağıt gibidir. HTML, tarayıcıya "bu bir başlıktır", "bu bir paragraftır", "bu bir bağlantıdır" diye söyler. Yani içeriğin ne olduğunu anlatır.
HTML öğrenmek, kendi web sayfanı yapmanın ilk adımıdır. Daha önce Scratch ve Python ile komutları sırayla yazdın. HTML de benzer bir mantıkla çalışır: sayfayı parça parça, düzenli bir biçimde kurarsın.
HTML nedir? Etiket ve element
HTML (HyperText Markup Language) bir programlama dili değil, bir işaretleme dilidir. Yani metni işaretleyerek "bu parça neyi ifade ediyor?" sorusunu yanıtlar.
Etiket (tag)
Etiket, köşeli parantezler içinde yazılan komuttur. Çoğu etiketin bir açılış ve bir kapanış hali vardır. Kapanış etiketinde eğik çizgi (/) bulunur.
<p>Merhaba, ben bir paragrafım.</p>Burada <p> açılış etiketi, </p> kapanış etiketidir. p kelimesi İngilizce *paragraph* (paragraf) sözcüğünden gelir.
Element (öğe)
Açılış etiketi, içerik ve kapanış etiketinin tamamına element denir. Yukarıdaki örneğin tamamı bir paragraf elementidir.
Bazı elementlerin içi boştur ve kapanış etiketi yoktur. Örneğin satır sonu için kullanılan <br> böyledir.
Öznitelik (attribute)
Bir etikete ek bilgi vermek için öznitelik kullanırız. Öznitelik, açılış etiketinin içine yazılır.
<a href="https://tr.wikipedia.org">Vikipedi'yi aç</a>Burada href özniteliği, bağlantının hangi adrese gideceğini söyler.
Temel sayfa iskeleti
Her HTML sayfası aynı temel çatıyla başlar. Bu çatı, tarayıcıya belgenin nasıl okunacağını anlatır.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>İlk Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya</h1>
</body>
</html>Bu iskeletin parçalarını tek tek inceleyelim.
<!DOCTYPE html>
En üstteki bu satır, tarayıcıya "bu belge modern HTML ile yazıldı" der. Her sayfanın ilk satırıdır.
<html>
Tüm sayfayı saran ana elementtir. lang="tr" özniteliği, sayfanın dilinin Türkçe olduğunu belirtir. Bu, ekran okuyucular ve arama motorları için faydalıdır.
<head>
Sayfanın görünmeyen bilgilerini tutar. Buradaki içerik doğrudan ekranda gösterilmez; tarayıcıya talimat verir.
<meta charset="utf-8">— Türkçe karakterlerin (ç, ş, ğ, ı) doğru görünmesini sağlar.<meta name="viewport" ...>— Sayfanın telefonlarda düzgün görünmesini sağlar.<title>— Tarayıcı sekmesinde görünen başlıktır.
<body>
Ekranda gördüğümüz her şey burada yer alır: başlıklar, paragraflar, görseller, bağlantılar.
İçerik etiketleri
Şimdi <body> içine koyacağımız temel etiketleri öğrenelim.
Başlıklar: <h1>–<h6>
Başlıklar için <h1>'den <h6>'ya kadar altı seviye vardır. <h1> en büyük ve en önemli başlıktır; <h6> en küçüğüdür.
<h1>Robotik Kulübü</h1>
<h2>Bu Hafta Ne Yaptık?</h2>
<h3>Çizgi İzleyen Robot</h3>Bir sayfada genellikle tek bir <h1> bulunur. Başlıkları boyut için değil, önem sırası için kullanırız.
Paragraf: <p>
Metin bloklarını paragraflarla yazarız.
<p>Bugün ilk web sayfamı yaptım.</p>
<p>İlk denemede başlık çok büyüktü, sonra düzelttim.</p>Listeler: <ul> ve <ol>
Sırasız (madde işaretli) liste için <ul>, sıralı (numaralı) liste için <ol> kullanılır. Her madde bir <li> elementidir.
<ul>
<li>Kalem</li>
<li>Defter</li>
<li>Cetvel</li>
</ul>Bağlantı: <a>
Başka bir sayfaya gitmek için bağlantı (link) kullanırız. Adres href özniteliğinde yazılır.
<a href="https://tr.wikipedia.org">Vikipedi'yi ziyaret et</a>Görsel: <img>
Görsel eklemek için <img> kullanılır. src görselin adresini, alt ise görseli göremeyen biri için açıklama metnini tutar.
<img src="robot.png" alt="Kırmızı tekerlekli küçük bir robot">alt metni çok önemlidir: Görsel yüklenmezse veya bir ekran okuyucu sayfayı sesli okuyorsa bu açıklama kullanılır. Bu yüzden alt yazmak, herkesin sayfayı kullanabilmesi anlamına gelir. Buna erişilebilirlik denir.
Mini uygulama
Kendini tanıtan küçük bir sayfa yapalım. Aşağıdaki iskeleti bir metin düzenleyiciye yaz ve tanitim.html adıyla kaydet. Sonra dosyayı çift tıklayarak tarayıcıda aç.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Beni Tanı</title>
</head>
<body>
<h1>Merhaba, ben bir öğrenciyim</h1>
<p>Robotik ve kodlama öğreniyorum.</p>
<h2>Sevdiğim üç şey</h2>
<ul>
<li>Robotlar</li>
<li>Bulmacalar</li>
<li>Bisiklet</li>
</ul>
<p>Daha fazlasını öğrenmek için:
<a href="https://tr.wikipedia.org/wiki/HTML">HTML sayfası</a>
</p>
</body>
</html>Sayfayı açtıktan sonra dene:
<h1>başlığını kendi cümlenle değiştir.- Listeye dördüncü bir madde ekle.
- Yeni bir
<p>paragrafı ekle.
Değişikliği kaydedip tarayıcıyı yenilediğinde sonucu hemen görürsün.
Uygulama laboratuvarı: HTML ile Sayfa İskeleti
HTML ile Sayfa İskeleti konusunu kalıcı hâle getirmenin en iyi yolu, kavramı küçük ve ölçülebilir bir göreve dönüştürmektir. Bu çalışmada HTML nedir? Etiket ve element ile Element (öğe) arasındaki ilişkiyi kullanarak anlamlı HTML, düzenli CSS, gerektiğinde küçük JavaScript ve erişilebilirlik kontrolü hazırlayacaksın. Amaç yalnız sonucun çalışması değil; hangi kararı neden verdiğini, neyi test ettiğini ve hangi durumda tasarımı değiştireceğini açıklayabilmektir.
Görev senaryosu
Şu senaryoyu ele al: bir robotik projesinin amaç ve test sonuçlarını anlatan sayfa. Dersin ana hedefi “HTML etiketleriyle bir sayfanın iskeletini; başlık, paragraf, liste, bağlantı ve görsel eklemeyi öğren” olduğuna göre önce problemi tek cümleyle tanımla. Ardından sistemin alacağı girdiyi, uygulayacağı işlemi ve üreteceği çıktıyı ayrı ayrı yaz. Bilmediğin bir ayrıntı varsa onu varsayım olarak işaretle; varsayımı gerçek bilgi gibi kullanma.
- Planla: Başlangıç durumunu, beklenen sonucu ve kullanacağın kavramları yaz.
- En küçük sürümü kur: Yalnız temel davranışı çalıştır; süsleme ve ek özellikleri sonraya bırak.
- Üç test hazırla: Normal bir durum, sınırda bir durum ve hatalı ya da beklenmeyen bir durum seç.
- Sonucu kaydet: Beklenen ile gerçekleşeni yan yana yaz; fark varsa olası nedeni belirt.
- Tek değişiklik yap: Aynı anda birçok şeyi değiştirmek yerine bir kararı düzeltip testi yeniden çalıştır.
Başarı ölçütleri
- Başlık hiyerarşisi mantıklı mı?
- Bağlantılar klavye ve dokunmayla çalışıyor mu?
- Mobil ekranda yatay taşma var mı?
- Görsellerin alternatif metni ve boyutları tanımlı mı?
- HTML, CSS ve JavaScript sorumlulukları birbirine karışıyor mu?
“HTML ile Sayfa İskeleti” çalışmasını bitirdiğinde ürünü bir arkadaşına yalnız bölüm başlıklarıyla anlat. Arkadaşın bir robotik projesinin amaç ve test sonuçlarını anlatan sayfa senaryosundaki adımları ve karar nedenlerini takip edebiliyorsa anlatım yeterince açıktır. Anlaşılmayan noktayı daha fazla terim ekleyerek değil, HTML nedir? Etiket ve element ve Element (öğe) ilişkisini daha küçük adımlara bölerek düzelt.
Sık yapılan hatalar
Kapanış etiketini unutmak
<p> yazıp </p> yazmayı unutursan, sonraki içerik de paragrafın içinde kalabilir. Her açılan etiketi kapatmayı alışkanlık hâline getir.
alt metnini boş bırakmak
<img> eklerken alt yazmamak sık yapılan bir hatadır. Görseli anlamlı biçimde açıklayan kısa bir metin yaz.
Başlıkları boyut için kullanmak
<h3> etiketini "yazı biraz küçük olsun" diye seçmek yanlıştır. Başlık seviyesi, içeriğin önem sırasını gösterir. Boyut ayarı CSS ile yapılır (bir sonraki modülde göreceğiz).
<head> ile <body> içeriğini karıştırmak
<title> her zaman <head> içinde olmalıdır. Ekranda görünecek başlıkları (<h1> gibi) ise <body> içine yazarız.
Güvenlik notu
- Kendi tanıtım sayfanı yaparken kişisel bilgi paylaşma: tam adın, ev adresin, telefon numaran, okul adın veya birebir konumun sayfada yer almamalı. Yalnızca kendi bilgisayarında denesen bile bu alışkanlığı baştan edin.
- Bir sayfayı internette yayımlamadan önce mutlaka bir yetişkine danış.
- Ders içindeki örnek adresler ve görsel adları hayalidir; bu akademinin veri toplayan gerçek bir formu veya kayıt sistemi yoktur.
- Bir bağlantıya (
<a>) tıklamadan önce nereye gittiğinihrefdeğerinden kontrol et. Tanımadığın adreslere güvenme.
Ders özeti
- HTML, içeriğin ne olduğunu etiketlerle tanımlayan bir işaretleme dilidir.
- Çoğu element bir açılış ve bir kapanış etiketinden oluşur; öznitelikler etikete ek bilgi verir.
- Her sayfa
<!DOCTYPE html>,<html>,<head>ve<body>ile aynı iskeleti paylaşır. - Başlıklar (
<h1>–<h6>), paragraf (<p>), listeler (<ul>/<ol>), bağlantı (<a>) ve görsel (<img>) temel içerik etiketleridir. <img>içinaltyazmak erişilebilirlik ve güvenlik açısından önemlidir.
Kontrol soruları
- Etiket ile element arasındaki fark nedir?
<head>ve<body>bölümleri hangi tür içerikleri tutar?<h1>'den<h6>'ya kadar olan başlıkları hangi ölçüte göre seçmeliyiz?<img>etiketindekialtözniteliği ne işe yarar?- Bir bağlantının (
<a>) hangi adrese gideceğini hangi öznitelik belirler?
Cevaplar
- Etiket, köşeli parantez içindeki tek komuttur (
<p>gibi). Element ise açılış etiketi, içerik ve kapanış etiketinin tamamıdır (<p>Merhaba</p>gibi). <head>görünmeyen bilgileri tutar (karakter seti, viewport, sekme başlığı).<body>ise ekranda görünen tüm içeriği tutar (başlık, paragraf, görsel).- Boyuta göre değil, içeriğin önem sırasına göre.
<h1>en önemli başlıktır; alt başlıklar için sırayla<h2>,<h3>kullanılır. - Görsel yüklenmezse ya da bir ekran okuyucu sayfayı sesli okursa gösterilecek/okunacak açıklama metnidir. Erişilebilirlik için gereklidir.
hrefözniteliği belirler.
Kaynak ve doğrulama notu
“HTML ile Sayfa İskeleti” dersi için doğrulama odağı HTML nedir? Etiket ve element ile Element (öğe) arasındaki ilişkinin örnekler üzerinde tutarlı çalışmasıdır. Örnekler standart HTML, CSS ve tarayıcı JavaScript’i yaklaşımıyla hazırlanmıştır. Sayfa yalnız görsel olarak değil; klavye kullanımı, odak sırası, mobil görünüm ve anlamlı başlık yapısı açısından da kontrol edilmelidir.
Sonraki ders
Semantik HTML: <header>, <nav>, <main> ve <footer> gibi anlam taşıyan etiketlerle sayfayı daha düzenli ve erişilebilir hâle getirmek.