Sayfa İskeleti

Ders 5/45 · 6 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda her HTML sayfasının başında bulunması gereken iskeleti ezbere yazabileceksiniz.

Tam bir HTML sayfası

Önceki derslerde tek satırlık kodlar yazdık. Tarayıcılar bunları da gösterir ama düzgün bir sayfanın şöyle bir iskeleti olmalıdır:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>İlk Sayfam</title>
</head>
<body>
  <h1>Merhaba Dünya</h1>
</body>
</html>

Bundan sonraki derslerde örneklerin çoğu bu iskeletle başlayacak.

Satır satır inceleyelim

<!DOCTYPE html> Tarayıcıya bunun modern bir HTML belgesi olduğunu söyler. Etiket değil, bir bildirimdir ve kapanışı yoktur.
<html lang="tr"> Sayfanın tamamını kapsar. lang niteliği sayfanın dilini belirtir.
<head> Sayfa hakkındaki bilgileri tutar. Buradakiler sayfanın içeriğinde görünmez.
<meta charset="UTF-8"> Karakterlerin nasıl okunacağını söyler.
<meta name="viewport" ...> Sayfanın telefonlarda doğru genişlikte görünmesini sağlar.
<title> Tarayıcı sekmesinde yazan başlıktır.
<body> Ziyaretçinin gördüğü her şey burada yer alır.

`charset` neden önemli?

Bilgisayarlar harfleri sayı olarak saklar. UTF-8, hangi sayının hangi harf olduğunu belirleyen bir kodlamadır ve Türkçe karakterlerin hepsini içerir.

Bu satır olmazsa tarayıcı kodlamayı tahmin etmeye çalışır. Yanlış tahmin ederse ş, ğ, ı gibi harfler bozuk görünebilir. Bu yüzden bu satırı her sayfaya yazın.

`lang` neden önemli?

Ekran okuyucular metni doğru telaffuzla okumak için bu bilgiyi kullanır. Tarayıcılar da çeviri önerirken buna bakar. Türkçe bir sayfada lang="tr" yazın.

VS Code ile hızlıca yazmak

VS Code’da boş bir .html dosyasına ! yazıp Tab tuşuna basarsanız iskelet kendiliğinden gelir. Bu şekilde gelen kodda lang="en" yazar, tr olarak değiştirmeyi unutmayın.

Sık yapılan hatalar

Görünür içeriği head içine yazmak. Başlıklar, paragraflar ve resimler her zaman body içine yazılır.

lang="en" olarak bırakmak. Türkçe bir sayfanın dili tr olmalıdır.

charset satırını silmek. Sayfa sizin bilgisayarınızda düzgün görünse bile başka yerde harfler bozulabilir.

Soru 1

Tarayıcı sekmesinde görünen yazı hangi etiketle belirlenir?

h1 :: h1 sayfanın içindeki ana başlıktır.
title :: Doğru.
head :: title etiketi head içinde yer alır ama sekmedeki yazıyı belirleyen title etiketidir.

Soru 2

Sayfada Türkçe karakterler bozuk görünüyor. Büyük ihtimalle hangi satır eksiktir?

<title> :: Başlığın karakterlerle ilgisi yoktur.
<meta name="viewport"> :: Bu satır telefon görünümüyle ilgilidir.
<meta charset="UTF-8"> :: Doğru.

İskeleti ezberden yazın

Tam bir HTML sayfası yazın. Sayfanın dili Türkçe, sekme başlığı İlk Sayfam olsun. Sayfada Merhaba Dünya yazan bir h1 bulunsun. Yukarıya bakmadan yazmayı deneyin.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>İlk Sayfam</title>
</head>
<body>
  <h1>Merhaba Dünya</h1>
</body>
</html>

Bu derste öğrendikleriniz

head tarayıcı için bilgileri, body ziyaretçinin göreceklerini tutar.
meta charset="UTF-8" Türkçe karakterlerin doğru görünmesini sağlar.
lang="tr" sayfanın dilini belirtir.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.