HTML'e Giriş: Etiketler ve Sayfa İskeleti

Bu derste ne yapacağız?

Bir önceki derste web geliştirmenin genel mantığını ve gerekli araçları (bir tarayıcı ile bir kod editörü) tanımıştık. Bu derste artık kolları sıvayıp gerçek bir HTML dosyası yazacağız. Amacımız, her web sayfasının temelinde bulunan standart HTML iskeletini öğrenmek ve bu iskelet içine başlık, paragraf ve liste gibi en sık kullanılan etiketleri yerleştirerek kendi ilk sayfamızı oluşturmaktır. Dersin sonunda tarayıcınızda açabileceğiniz, kendi yazdığınız gerçek bir web sayfanız olacak. Bir sonraki derste bu iskelete bağlantılar, resimler ve tablolar gibi yeni etiketler ekleyerek HTML bilginizi genişleteceğiz.

Ön koşul olarak bilgisayarınızda bir kod editörünün (örneğin Visual Studio Code, Notepad++ ya da benzeri bir program) kurulu olması ve bir internet tarayıcısının (Chrome, Edge, Firefox gibi) bulunması yeterlidir. Arayüz görselleri kullandığınız programın sürümüne göre küçük farklılıklar gösterebilir; bu normaldir, önemli olan aşağıdaki adımların mantığını takip etmektir.

Kavram

HTML, HyperText Markup Language kelimelerinin kısaltmasıdır ve Türkçeye "Köprü Metni İşaretleme Dili" olarak çevrilebilir. Ancak isminden korkmayın; HTML aslında bir programlama dili değil, bir işaretleme dilidir. Yani bilgisayara "şunu hesapla" demez, tarayıcıya "bu metin bir başlıktır", "bu bir paragraftır", "bu bir listedir" gibi bilgiler verir.

Bunu bir ev inşaatına benzetebiliriz. Bir evin önce temeli atılır, sonra duvarları örülür, ardından odalar bölünür ve en son mobilyalar yerleştirilir. HTML de tam olarak bunu yapar: sayfanın "temelini ve duvarlarını" oluşturan sabit bir iskelet vardır, bu iskeletin içine de "odalar" gibi başlıklar, paragraflar, listeler yerleştirilir. Nasıl ki bir evin temeli olmadan duvar örülemezse, HTML'de de belgenin başında bulunması gereken sabit bir yapı vardır; her sayfa bu yapıyla başlar.

HTML'de her şey etiket (tag) adı verilen küçük komutlarla yazılır. Bir etiket genellikle açılış ve kapanış olmak üzere ikili çalışır: açılış etiketi <p> gibi görünürken, kapanış etiketi aynı ismin başına eğik çizgi eklenerek </p> şeklinde yazılır. Aradaki kısım ise tarayıcıda gösterilecek asıl içeriktir. Bunu bir hediye paketine benzetebilirsiniz: açılış etiketi paketin kapağını açmak, kapanış etiketi ise paketi tekrar kapatmaktır; ikisinin arasında kalan şey ise hediyenin kendisidir, yani gösterilecek içerik.

Adım adım uygulama

1. Adım: Proje klasörü ve dosya oluşturma

Öncelikle çalışmalarınızı düzenli tutmak için bilgisayarınızda bir klasör açın; örneğin masaüstünde ilk-web-sitem adında bir klasör oluşturabilirsiniz. Kod editörünüzü açın ve File (Dosya) menüsünden Open Folder (Klasör Aç) seçeneğine tıklayarak bu klasörü editörde açın. Ardından sol taraftaki dosya listesi alanına sağ tıklayıp New File (Yeni Dosya) seçeneğini seçin ve dosyaya index.html adını verin. Web dünyasında ana sayfa dosyasına geleneksel olarak "index.html" adı verilir, bu yüzden bu ismi kullanmanız iyi bir alışkanlıktır.

2. Adım: Standart HTML iskeletini yazma

Boş dosyaya aşağıdaki satırları sırasıyla yazın. Her satırın ne işe yaradığını hemen altında açıklıyoruz.

<!DOCTYPE html> — Bu satır, tarayıcıya belgenin güncel bir HTML5 belgesi olduğunu bildirir. Her HTML dosyasının ilk satırı budur ve kapanış etiketi yoktur.
<html lang="tr"> — Sayfanın tüm içeriğini içine alacak ana kutudur. lang="tr" ifadesi, sayfanın dilinin Türkçe olduğunu belirtir ve tarayıcıların içeriği doğru yorumlamasına yardımcı olur.
<head> — Sayfanın "görünmeyen" bilgilerinin bulunduğu bölümdür; sekme başlığı, karakter kodlaması gibi ayarlar burada yer alır ve bu bölümdeki hiçbir şey sayfanın içinde doğrudan görünmez.
<meta charset="UTF-8"> — Türkçe karakterlerin (ç, ğ, ı, ö, ş, ü) doğru görüntülenmesini sağlayan karakter kodlaması ayarıdır. Bu satır olmadan Türkçe harfler bozuk çıkabilir.
<title>İlk Sayfam</title> — Tarayıcı sekmesinde görünecek başlıktır.
</head> — head bölümünün kapanış etiketidir.
<body> — Kullanıcının tarayıcıda göreceği asıl içeriğin başladığı yerdir; başlıklar, paragraflar, listeler gibi her şey bu etiketin içine yazılır.
</body> — body bölümünün kapanış etiketidir.
</html> — Belgenin en son satırıdır ve html etiketini kapatır.

3. Adım: Başlık ve paragraf ekleme

Şimdi <body> ile </body> arasına gerçek içeriğimizi ekleyeceğiz. Başlıklar için <h1> ile <h6> arasında altı farklı seviye bulunur; <h1> en büyük ve en önemli başlıktır, <h6> ise en küçüğüdür. Paragraflar için ise <p> etiketi kullanılır. Aşağıdaki satırları body bölümünün içine ekleyin.

<h1>Merhaba, Dünya!</h1> — Sayfanın ana başlığıdır, genellikle sayfa başına bir tane <h1> kullanılır.
<p>Bu benim HTML ile yazdığım ilk web sayfam.</p> — Sıradan bir paragraf metnidir.
<h2>Hakkımda</h2> — Ana başlıktan bir seviye küçük olan alt başlıktır.
<p>Web geliştirmeyi yeni öğreniyorum ve bu satırları kendim yazdım.</p> — İkinci bir paragraf.

4. Adım: Liste ekleme

HTML'de iki temel liste türü vardır: sırasız liste (madde işaretli, <ul>) ve sıralı liste (numaralı, <ol>). Her iki listede de her bir madde <li> etiketiyle yazılır. Aşağıdaki örneği h2 başlığından sonra ekleyin.

<h2>Bugün Öğrendiklerim</h2> — Yeni bir alt başlık.
<ul> — Sırasız listenin açılışı.
<li>HTML sayfa iskeleti</li> — Listenin ilk maddesi.
<li>Başlık ve paragraf etiketleri</li> — Listenin ikinci maddesi.
<li>Sırasız liste oluşturma</li> — Listenin üçüncü maddesi.
</ul> — Sırasız listenin kapanışı.

5. Adım: Dosyayı kaydetme ve tarayıcıda açma

Tüm satırları ekledikten sonra kod editöründe Ctrl+S tuşlarına basarak (Mac kullanıyorsanız Cmd+S) dosyayı kaydedin. Ardından bilgisayarınızdaki dosya gezgininde index.html dosyasını bulup üzerine çift tıklayın; dosya varsayılan tarayıcınızda otomatik olarak açılacaktır. Sekme başlığında "İlk Sayfam" yazdığını, sayfada büyük bir başlık, altında paragraflar ve bir madde işaretli liste göreceksiniz. Eğer sayfa boş açılıyorsa ya da beklediğiniz gibi görünmüyorsa, bir sonraki bölümdeki hata tablosuna göz atın.

Sık karşılaşılan sorunlar

Karşılaşılan durum	Olası neden ve çözüm
Türkçe karakterler (ç, ş, ğ vb.) bozuk görünüyor	<meta charset="UTF-8"> satırı eksik olabilir ya da dosya farklı bir kodlamayla kaydedilmiş olabilir; head bölümüne bu satırı ekleyip dosyayı UTF-8 formatında yeniden kaydedin.
Sayfa tamamen boş açılıyor	Dosya uzantısının .html olduğundan emin olun; .txt uzantısıyla kaydedilmiş bir dosya tarayıcı tarafından düz metin olarak açılabilir.
Yazdığım metinler yan yana birleşik görünüyor	Metinler <p> veya <h1> gibi etiketlerin içine değil, doğrudan <body> içine serbest şekilde yazılmış olabilir; her metin parçasını uygun bir etikete sarmalayın.
Kapanış etiketi unutulduğunda sayfa garip görünüyor	Her açılış etiketinin (<p> gibi) mutlaka bir kapanış etiketi (</p> gibi) olmalıdır; kapanışı unutulan etiket, kendinden sonraki tüm içeriği etkileyebilir.
Değişiklikler tarayıcıda görünmüyor	Dosyayı kaydettikten sonra tarayıcıda sayfayı yenilemeniz gerekir; klavyeden F5 tuşuna veya tarayıcıdaki yenileme simgesine tıklayın.

Mini görev

Şimdi öğrendiklerinizi kendi başınıza pekiştirme zamanı. Aynı klasörde hakkimda.html adında yeni bir dosya oluşturun ve aşağıdaki özellikleri taşıyan bir sayfa yazın:

Standart HTML iskeleti (DOCTYPE, html, head, body) eksiksiz bulunmalı.
Sekme başlığı (title) "Hakkımda" olmalı.
Bir <h1> ana başlık; kendi adınızı veya hayali bir isim yazabilirsiniz.
En az iki <p> paragrafı; kendinizi kısaca tanıtan cümleler yazın.
Bir <h2> alt başlık; örneğin "Hobilerim".
Alt başlığın altında en az üç maddeli bir <ul> sırasız liste.

Bitirdiğinizde dosyayı kaydedip tarayıcıda açın ve aşağıdaki kontrol listesiyle karşılaştırın:

Sekme başlığında doğru metin görünüyor mu?
Ana başlık büyük ve kalın şekilde görünüyor mu?
Paragraflar ayrı satırlarda görünüyor mu?
Liste maddelerinin önünde madde işaretleri var mı?
Türkçe karakterler doğru görünüyor mu?

Kendini sına

1) HTML'in açılımı nedir ve bir programlama dili midir?

2) Bir HTML belgesinin ilk satırında hangi ifade bulunmalıdır?

3) <head> ile <body> bölümleri arasındaki temel fark nedir?

4) Türkçe karakterlerin doğru görünmesi için head içine hangi satır eklenmelidir?

5) <ul> ve <li> etiketleri birlikte ne oluşturmak için kullanılır?

Cevaplar

1) HTML, "HyperText Markup Language" yani "Köprü Metni İşaretleme Dili" anlamına gelir; bir programlama dili değil, işaretleme dilidir, hesaplama yapmaz, içeriğin yapısını tanımlar.

2) Belgenin ilk satırında <!DOCTYPE html> ifadesi bulunmalıdır; bu, tarayıcıya belgenin güncel bir HTML5 belgesi olduğunu bildirir.

3) <head> bölümü, sekme başlığı ve karakter kodlaması gibi kullanıcıya doğrudan görünmeyen ayar bilgilerini içerir; <body> bölümü ise tarayıcıda gerçekten görüntülenecek başlık, paragraf, liste gibi içerikleri barındırır.

4) <meta charset="UTF-8"> satırı eklenmelidir; bu satır Türkçe karakterlerin doğru gösterilmesini sağlar.

5) <ul> etiketi bir sırasız (madde işaretli) liste oluşturur, içindeki her <li> etiketi ise bu listenin tek tek maddelerini temsil eder.

Bir sonraki derste HTML öğrenmeye devam edeceğiz: sayfalar arasında geçiş yapmamızı sağlayan bağlantı etiketini, sayfaya resim eklemeyi ve düzenli veri göstermek için tablo etiketlerini öğreneceksiniz. Bugün oluşturduğunuz index.html dosyasını saklayın, çünkü bir sonraki derste üzerine yeni etiketler ekleyerek geliştirmeye devam edeceğiz.

Bu dersi kayıt olmadan izleyebilirsin. İlerlemeni kaydetmek, sertifika almak ve puan tablosuna girmek için ücretsiz üye ol: Kayıt Ol