Temel HTML Sayfa Yapısı
Aşağıda, standart bir HTML belgesinin temel yapısı gösterilmiştir.
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Sayfa Başlığı</title>
</head>
<body>
<!-- Sayfa içeriği buraya gelecek -->
</body>
</html>Açıklamalar
- <!DOCTYPE html>: Bu bildirim, belgenin HTML5 standardına uygun olduğunu belirtir ve tarayıcının belgeyi doğru şekilde işlemesine yardımcı olur.
- <html lang="tr">: HTML belgesinin başlangıcını belirtir ve lang özelliği ile belgenin dilini Türkçe olarak ayarlar.
- <head>: Belge hakkında meta bilgileri içerir. Bu bölümde sayfanın başlığı, karakter seti tanımı ve stil veya script dosyalarına bağlantılar bulunur.
- <meta charset="UTF-8">: Belgenin karakter setini UTF-8 olarak ayarlar, böylece Türkçe karakterler doğru görüntülenir.
- <title>Sayfa Başlığı</title>: Tarayıcı sekmesinde görüntülenecek sayfa başlığını belirler.
- <body>: Kullanıcıya gösterilecek asıl içeriğin bulunduğu bölümdür. Metinler, resimler, bağlantılar ve diğer tüm içerik bu bölümde yer alır.
Temel HTML Etiketleri
HTML, çeşitli etiketler kullanarak sayfa içeriğini yapılandırır. İşte en yaygın kullanılan bazı HTML etiketleri:- <h1> ile <h6>: Başlık etiketleridir. <h1> en önemli başlığı, <h6> ise en az önemli başlığı temsil eder.
Kod:
<h1>Bu bir H1 başlığıdır</h1>
<h2>Bu bir H2 başlığıdır</h2><p>: Paragraf etiketidir. Metin bloklarını tanımlamak için kullanılır.
Kod:
<p>Bu bir paragraf metnidir.</p><a>: Bağlantı (anchor) etiketidir. href özelliği ile bir URL'ye bağlantı verir.
Kod:
<a href="https://www.example.com">Example Sitesi</a><img>: Görüntü etiketidir. src özelliği ile görüntü dosyasının yolunu, alt özelliği ile alternatif metni belirtir.
Kod:
<img src="resim.jpg" alt="Açıklayıcı alternatif metin"><ul> ve <ol>: Sırasız (<ul>) ve sıralı (<ol>) liste etiketleridir. Liste öğeleri <li> etiketi ile tanımlanır.
Kod:
<ul>
<li>İlk öğe</li>
<li>İkinci öğe</li>
</ul>
<ol>
<li>İlk öğe</li>
<li>İkinci öğe</li>
</ol><div> ve <span>: Sayfa içeriğini gruplamak ve stil vermek için kullanılan etiketlerdir. <div> blok düzeyinde, <span> ise satır içi öğeler için kullanılır.
Kod:
<div>
<p>Bu bir div içinde paragraf.</p>
</div>
<p>Bu bir <span>span etiketi</span> içinde metin.</p>HTML Etiketlerinin Genel Özellikleri
- HTML etiketleri <etiket> şeklinde açılır ve </etiket> şeklinde kapanır. Ancak bazı etiketler, örneğin <img>, kendi kendine kapanır ve kapanış etiketi gerektirmez.
- Etiketler büyük/küçük harf duyarlı değildir; ancak okunabilirlik ve standartlara uyum için küçük harf kullanımı tercih edilir.
- HTML etiketleri içinde özellikler (attributes) kullanılabilir. Örneğin, <a> etiketi içinde href özelliği bağlantı adresini belirtir.
Kod:
<a href="https://www.example.com" target="_blank">Example Sitesi</a>Yukarıdaki örnekte, target="_blank" özelliği bağlantının yeni bir sekmede açılmasını sağlar.
