HTML Belgesinin Temel Yapısı: İlk Web Sayfası Nasıl Oluşturulur?

HTML öğrenmeye başlarken bir web sayfasının başlıklardan, paragraflardan ve bağlantılardan oluştuğunu görmek kolaydır. Ancak bu içeriklerin hangi düzen içerisinde yazılacağı, sayfa hakkındaki bilgilerin nerede tutulacağı ve tarayıcının bu yapıyı nasıl yorumlayacağı da anlaşılmalıdır. Çünkü tek bir paragraf yazmak ile bütünlüklü bir HTML belgesi oluşturmak aynı çalışma değildir.

Bir önceki makalede HTML’in ne olduğunu ve web geliştirmeye neden HTML ile başlandığını ele aldık. HTML’in ortaya çıkışını ve web içerisindeki görevini anlamak, şimdi yazacağımız kodların hangi amaca hizmet ettiğini kavramamızı sağlayacak. Bu makalede ise ilk HTML dosyamızı oluşturacak, belgenin temel bölümlerini inceleyecek ve yazdığımız sayfayı tarayıcıda açacağız.

HTML Yazmaya Başlamak İçin Neler Gerekir?

İlk örneğimiz için bilgisayarda düz metin düzenleyebilen bir editör ve bir web tarayıcısı bulunması yeterlidir. Bir alan adı satın almak, hosting hizmeti kullanmak veya WordPress kurmak gerekmez. Hazırlayacağımız dosyayı bilgisayarımızda saklayabilir, sonucunu yine kendi bilgisayarımızdaki tarayıcıda inceleyebiliriz.

Bu aşamada kullanacağımız editörün görevi, yazdığımız metni bir dosyaya kaydetmektir. Tarayıcı ise bu dosyadaki HTML işaretlemesini yorumlayarak sayfayı görüntüler. Kod yazdığımız yer ile sonucu gördüğümüz yer arasındaki bu ayrımı baştan bilmek, uygulama sırasında hangi işlemi nerede yapacağımızı netleştirir.

HTML Belgesinin Temel Yapısı Nasıl Kurulur?

Bir HTML belgesinde, belge hakkındaki bilgiler ile kullanıcıya sunulan içerik ayrı bölümlerde yer alır. Aşağıdaki örnek bu düzeni gösterir. Kodun tamamına ilk kez bakıyorsanız her satırı hemen ezberlemeye çalışmayın. Önce örneği oluşturacak, ardından bölümleri tek tek açıklayacağız.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İlk HTML Sayfam</title>
</head>
<body>
    <h1>Web Geliştirmeye İlk Adım</h1>
    <p>İlk HTML sayfamı oluşturuyorum.</p>
    <p>Bu sayfada HTML belgesinin temel yapısını öğreniyorum.</p>
</body>
</html>

Örnekte sayfanın dili, karakter kodlaması ve başlığı tanımlanmıştır. Kullanıcının okuyacağı içerik ise bir başlık ve iki paragraftan oluşur. Bu küçük belge üzerinden yapacağımız değişiklikler, her bölümün görevini doğrudan gözlemlememizi sağlayacak.

İlk HTML Dosyası Nasıl Oluşturulur?

Bilgisayarınızda bu çalışma için html-dersleri adında bir klasör oluşturun. Ardından kullandığınız metin veya kod editöründe yeni bir dosya açarak yukarıdaki örneği yapıştırın. Dosyayı bu klasörün içerisine index.html adıyla ve UTF-8 kodlamasıyla kaydedin.

Burada dosya uzantısına dikkat edilmelidir. Dosyanın gerçek adı index.html.txt olmamalıdır. Editörünüz kayıt sırasında dosya türü seçtiriyorsa düz metin uzantısını otomatik eklemeyen seçeneği kullanın; bu seçenek bazı editörlerde “Tüm dosyalar” olarak adlandırılır. Dosya özelliklerinden adını ve uzantısını kontrol edebilirsiniz.

index, ana sayfa dosyalarında yaygın olarak kullanılan bir addır. Bununla birlikte bu alıştırmada dosyayı ilk-sayfam.html olarak adlandırmanız da mümkündür. Biz örneklerimizi aynı dosya üzerinden sürdürebilmek için index.html adını kullanacağız.

Kaydettiğiniz dosyayı tarayıcıyla açın. Dosya başka bir programda açılıyorsa “Birlikte aç” seçeneğiyle tarayıcınızı seçebilirsiniz. Sayfada “Web Geliştirmeye İlk Adım” başlığı ve altında iki paragraf görünmelidir. Tarayıcı sekmesindeki başlık ise “İlk HTML Sayfam” olacaktır.

Belgedeki Satırlar Ne İşe Yarar?

DOCTYPE: Belge Türü Bildirimi

İlk satırdaki <!DOCTYPE html>, modern HTML belgelerinde kullanılan belge türü bildirimidir. Tarayıcının sayfayı standartlar modunda işlemesi için yazılır. Başlık veya paragraf gibi bir içerik öğesi değildir; kapanış etiketi de bulunmaz.

html: Belgenin Kök Öğesi

<html> öğesi, belgenin diğer öğelerini kapsayan kök yapıdır. Örneğimizde head ve body bölümleri onun içerisinde bulunur. Açılıştaki lang="tr" ise belgenin ana dilinin Türkçe olduğunu belirtir.

Dil bilgisi özellikle ekran okuyucuların uygun telaffuzu belirlemesine yardımcı olur. Ancak bu tanım metni Türkçeye çevirmez; mevcut içeriğin dilini bildirir. Ayrıntıları MDN’nin HTML lang niteliği açıklamasında inceleyebilirsiniz.

head: Belge Hakkındaki Bilgiler

<head> bölümü, belgeye ilişkin bilgileri içerir. Örneğimizde karakter kodlaması, görüntüleme alanı ayarı ve belge başlığı bu bölümde yer alır. Kullanıcının okuyacağı paragrafları burada yazmayız.

head adını sayfanın üst kısmındaki logo veya menü alanıyla karıştırmamak gerekir. Bu bölümün görevi sayfanın üstüne içerik yerleştirmek değildir. Belge yapısındaki konumu ve kapsamı, HTML Living Standard’ın head öğesi bölümünde tanımlanır.

meta charset: Karakter Kodlaması

<meta charset="UTF-8"> satırı, belgenin karakter kodlamasını bildirir. Dosyayı da UTF-8 olarak kaydetmek gerekir. Bildirim ile dosyanın gerçek kodlaması uyuşmadığında Türkçe karakterler yanlış görüntülenebilir.

Viewport: Görüntüleme Alanı Ayarı

name="viewport" içeren satır, özellikle mobil tarayıcılarda sayfanın görüntüleme alanının nasıl ele alınacağını belirtir. width=device-width genişliği cihazın görüntüleme alanına göre ayarlar; initial-scale=1.0 başlangıç ölçeğini tanımlar.

Bu satırı eklemek, bütün bir siteyi kendiliğinden mobil uyumlu hâle getirmez. İçerik genişlikleri, görseller ve sayfa düzeni de farklı ekranlara uygun hazırlanmalıdır. Bu ilişkiyi MDN’nin viewport açıklamasında daha ayrıntılı inceleyebilirsiniz.

title: Belgenin Başlığı

<title>, belgenin başlığını tanımlar. Tarayıcı sekmesinde gördüğünüz “İlk HTML Sayfam” metni buradan gelir. Sayfanın içerisinde görünen ana başlık ise örneğimizde <h1> ile yazılmıştır. Bu iki başlığın aynı metni taşıması zorunlu değildir.

body: Sayfanın İçeriği

<body> bölümü, sayfa içeriğinin yer aldığı alandır. Örneğimizdeki <h1> ana başlığı, <p> öğeleri ise paragrafları tanımlar. İlerleyen çalışmalarda bağlantı, liste ve görsel gibi içerikleri de bu bölümde kullanacağız.

Etiket, Öğe ve Nitelik Arasındaki Fark Nedir?

Kodları açıklarken kullandığımız bu üç kavram, HTML öğrenirken sık karşılaşacağımız terimlerdir. Örneğimizdeki tek bir satır üzerinden aralarındaki ilişkiyi görebiliriz:

<html lang="tr">

Burada <html lang="tr"> açılış etiketidir. lang bir nitelik, tr ise onun değeridir. Nitelikler, açılış etiketinde ilgili öğeye ek bilgi kazandırır. html öğesinin tamamı ise açılışından kapanışına kadar içerdiği yapıyla birlikte değerlendirilir.

Her öğe aynı biçimde yazılmaz. Örneğin p bir açılış ve kapanış etiketiyle kullanılırken meta içerik alamayan bir öğedir; </meta> şeklinde kapatılmaz. Temel sözdizimi için MDN’nin HTML sözdizimi rehberine başvurabilirsiniz.

Yazdığımız Sayfada Değişiklik Yapalım

Şimdi editöre dönerek iki küçük değişiklik yapın. Önce title içerisindeki “İlk HTML Sayfam” metnini “HTML Öğreniyorum” olarak değiştirin. Ardından body içerisindeki ilk paragrafı şu şekilde düzenleyin:

<p>Bugün bir HTML dosyası oluşturmayı ve tarayıcıda açmayı öğrendim.</p>

Dosyayı kaydedin ve tarayıcıdaki sayfayı yenileyin. Sekme başlığında “HTML Öğreniyorum”, sayfa içerisinde ise yeni paragraf görünmelidir. Ana başlık değişmeden kalacaktır; çünkü h1 içerisindeki metne dokunmadık.

Bu deneme, belge başlığı ile içerik arasındaki ayrımı görmenizi sağlar. Aynı zamanda çalışma sırasını da pekiştirir: Kod editöründe değişiklik yapılır, dosya kaydedilir ve tarayıcıdaki sonuç kontrol edilir. Değişiklik görünmüyorsa önce dosyayı kaydedip kaydetmediğinize, ardından tarayıcıda aynı dosyayı açtığınıza bakın.

İlk Çalışmada Nelere Dikkat Edilmeli?

İlk sayfayı hazırladıktan sonra kodu tekrar okuyun. head bölümünün body başlamadan önce kapandığını, paragrafların body içerisinde kaldığını ve belgenin sonunda html öğesinin kapatıldığını kontrol edin. Girintiler bu ilişkileri takip etmeyi kolaylaştırır.

Ardından sayfadaki Türkçe karakterleri, sekme başlığını ve paragraf değişikliğini inceleyin. Bunlar küçük kontrollerdir; ancak yazdığınız satır ile tarayıcıdaki sonuç arasında bağlantı kurmanızı sağlar. Bir sorun olduğunda bütün kodu silip yeniden başlamak yerine, hangi değişiklikten sonra ortaya çıktığını belirlemek daha öğretici olacaktır.

Bu çalışmanın sonunda elinizde kendi bilgisayarınızda açabildiğiniz, başlığını ve içeriğini değiştirebildiğiniz bir HTML dosyası bulunmalıdır. Bundan sonraki adım, bu belge içerisindeki içeriği başlıklar ve paragraflarla daha ayrıntılı düzenlemektir. Böylece bugün kurduğumuz temel yapı, yalnızca örnek bir dosya olmaktan çıkıp üzerinde geliştirme yapabildiğimiz bir sayfaya dönüşecektir.