Bu derste, ilk HTML5 sayfamızı sıfırdan oluşturacak ve temel yapıyı adım adım inceleyeceğiz.

1. Temel HTML5 Belge Yapısı

Her HTML5 belgesi, aşağıdaki temel iskeletle başlar. Bu yapıyı bir şablon gibi düşünebilirsiniz; tüm HTML dosyalarınızın temelini oluşturacak. 

<!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>
   <!-- Sayfa içeriği buraya gelecek -->
</body>
</html>

Şimdi bu etiketleri tek tek inceleyelim:

  • <!DOCTYPE html>: Bu belgenin bir HTML5 belgesi olduğunu tarayıcıya bildirir. Her HTML belgesinin ilk satırı olmalıdır.
  • <html lang="tr">: Tüm HTML içeriğimizi saran kök etikettir. lang="tr" parametresi, sayfanın dilinin Türkçe olduğunu belirtir (SEO ve erişilebilirlik için önemli).
  • <head>: Sayfanın makineye anlattığı kısımdır. Burada sayfanın teknik bilgileri, başlığı, stilleri (CSS) ve betikleri (JavaScript) için referanslar tanımlanır. Kullanıcı tarafından doğrudan görülmez.
  • <meta charset="UTF-8">: Karakter kodlamasını belirler. UTF-8 sayesinde Türkçe karakterleri (ğ, ü, ş, ı, ö, ç) sorunsuz kullanabiliriz. Olmazsa karakterler bozuk gözükür!
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sayfanın mobil cihazlarda doğru ölçekte görüntülenmesini sağlar. Responsive tasarımın olmazsa olmazıdır.
  • <title>İlk Sayfam</title>: Sekmede ve arama motoru sonuçlarında çıkan sayfa başlığını belirler.
  • <body>: Sayfanın kullanıcıya gösterilen, görsel içeriğinin olduğu kısımdır. Tüm metinler, resimler, bağlantılar buraya yazılır.

2. Body İçinde Kullanacağımız Temel İçerik Etiketleri

Şimdi <body> etiketi içine bazı temel içerikler ekleyelim: 

<body>
   <h1>Bu Bir Başlıktır (H1)</h1>
   <h2>Bu Bir Alt Başlıktır (H2)</h2>
   <p>Bu bir paragraf örneğidir. HTML ile metinlerimizi bu şekilde paragraf etiketleri içine yazarız.</p>
   <p>Burada <strong>kalın</strong> ve <em>eğik</em> yazı örneklerini görüyorsunuz.</p>
   <a href="https://www.erkankeser.com">Bu bir bağlantıdır (link)</a>
   <br>
   <img src="resimler/logo.png" alt="Erkan Keser Logo" width="200">
   <ul>
       <li>Bu bir sırasız liste</li>
       <li>Liste öğesi 2</li>
   </ul>
   <ol>
       <li>Bu bir sıralı liste</li>
       <li>Liste öğesi 2</li>
   </ol>
</body>
  • Başlık Etiketleri (<h1> - <h6>): Başlıkları tanımlar. H1 en büyük ve en önemli, H6 en küçük başlıktır. SEO için çok önemlidirler.
  • Paragraf Etiketi (<p>): Metin paragraflarını oluşturmak için kullanılır.

Biçimlendirme Etiketleri:

  • <strong>: Metni kalın yapar ve önem vurgular.
  • <em>: Metni eğik (italik) yapar ve vurgu yapar.
  • Bağlantı Etiketi (<a>): Sayfalar arası geçişi sağlar. href parametresi ile linkin adresi belirtilir.
  • Resim Etiketi (<img>): Sayfaya resim ekler. src kaynak dosya yolunu, alt ise resim gözükmezse yazacak açıklama metnini belirtir.

Listeler:

  • <ul>: Sırasız liste (madde işaretli).
  • <ol>: Sıralı liste (numaralı).
  • <li>: Her iki liste türünde de liste öğelerini tanımlar.

3. İlk Dosyamızı Kaydetme ve Çalıştırma

  1. VS Code veya başka bir editörü açın.
  2. Yeni bir dosya oluşturun ve yukarıdaki örnek kodu yapıştırın.
  3. Dosyayı index.html olarak kaydedin (.html uzantısı çok önemli!).
  4. Dosyayı kaydettiğiniz yere gidin ve üzerine çift tıklayarak herhangi bir web tarayıcısında (Chrome, Firefox) açın.

Tebrikler! İlk web sayfanızı oluşturdunuz.