Not Defteri ile İlk Web Sayfanı Yap

Not Defteri ve tarayıcı ile adım adım ilk HTML sayfanı yazıyorsun. Program kurmana gerek yok, 10 dakikada sonucu ekranda görürsün. Yazının sonunda kendi yazdığın sayfa tarayıcıda açılmış olacak.

İhtiyacın olan tek şey Windows'taki Not Defteri ve bir tarayıcı. İnternet bağlantısı da gerekmez.

1. Dosyayı oluştur

Masaüstünde ilk-site adında bir klasör aç. Not Defteri'ni aç ve Dosya > Farklı Kaydet de. Şunlara dikkat et:

• Kaydedeceğin yer: ilk-site klasörü
• Dosya adı: index.html
• Kayıt türü: Tüm dosyalar
• Kodlama: UTF-8

2. Kodu yaz

Aşağıdaki kodu aynen yaz. Kopyalamak yerine yazman öğrenmeni hızlandırır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>İlk Web Sayfam</title>
</head>
<body>
  <h1>Merhaba Dünya!</h1>
  <p>Bu benim ilk web sayfam.</p>
</body>
</html>

Kaydet (Ctrl+S).

3. Tarayıcıda aç

ilk-site klasöründeki index.html dosyasına çift tıkla. Sayfan açıldı. Kodda değişiklik yaptığında önce Not Defteri'nde kaydet, sonra tarayıcıda F5 ile yenile.

4. Kod ne diyor?

HTML'de çoğu etiket çift gelir: açılış <p>, kapanış </p>. İçerik ikisinin arasına yazılır.

• <!DOCTYPE html>: tarayıcıya "bu bir HTML5 sayfasıdır" der.
• <html lang="tr">: sayfanın tamamı bunun içindedir, dili Türkçedir.
• <head>: sayfanın ayarları. Ekranda görünmez.
• <meta charset="UTF-8">: Türkçe harflerin (ğ, ş, ı) doğru görünmesini sağlar.
• <title>: tarayıcı sekmesindeki yazı.
• <body>: ekranda görünen her şey buraya yazılır.
• <h1>: en büyük başlık. <h2>'den <h6>'ya kadar küçülür.
• <p>: paragraf.

5. Biraz geliştir

<body> içine, <p> satırının altına şunları ekle, kaydet ve F5'e bas:

<h2>Sevdiğim üç şey</h2>
<ul>
  <li>Birinci şey</li>
  <li>İkinci şey</li>
  <li>Üçüncü şey</li>
</ul>
<p><a href="https://www.midonya.com">Midonya</a> sitesine git.</p>

<ul> madde listesi, <li> listenin her satırı, <a> ise bağlantıdır. Adresi href içine yazarsın. Sayfana kişisel bilgilerini (okul, adres, telefon) yazmak zorunda değilsin.

Sık yapılan hatalar

• Dosya açılmıyor ya da adı index.html.txt olmuş. Kayıt türünü "Tüm dosyalar" yapmayı unuttun.
• Türkçe harfler bozuk görünüyor. Kodlamayı UTF-8 yap ve <meta charset="UTF-8"> satırını kontrol et.
• Değişiklik görünmüyor. Önce kaydet, sonra F5'e bas.
• Sayfa bozuk görünüyor. Muhtemelen bir kapanış etiketini (</p>, </li>) unuttun. Satırları tek tek kontrol et.

Kendin dene

1. Sayfa başlığını (<title>) kendi adınla değiştir.
2. <h1> yerine <h3> yaz, farkı gör.
3. Sıralı liste yapmak için <ul> yerine <ol> kullan.