İlk HTML sayfası nasıl yapılır ve tarayıcıda açılır?

Web sayfası yapmak için pahalı programlara ya da yıllarca eğitime gerek yok. Bilgisayarındaki not defteri ve bir tarayıcı yeterli. Bu yazının sonunda adının, kısa bir tanıtımın ve sevdiğin şeylerin olduğu bir sayfan olacak.

1. Dosyayı oluştur

1. 1 Bir klasör aç. Masaüstünde "ilk-sitem" adında bir klasör oluştur.
2. 2 Metin dosyası oluştur. Windows'ta Not Defteri'ni, Mac'te TextEdit'i aç. (TextEdit'te Biçim menüsünden "Düz Metin Yap"ı seç.)
3. 3 index.html olarak kaydet. Dosyayı klasörüne index.html adıyla kaydet. Uzantının .txt değil .html olduğundan emin ol.

2. İskeleti yaz

Aşağıdaki kodu kopyala ve dosyana yapıştır. Her web sayfası bu iskeletle başlar:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Benim İlk Sayfam</title>
</head>
<body>
  <h1>Merhaba, ben Ayşe!</h1>
  <p>Bu benim ilk web sayfam.</p>
</body>
</html>

Dosyayı kaydet ve çift tıkla. Tarayıcında açılacak. Tebrikler, ilk web sayfan hazır! 🎉

3. İçerik ekle

<body> etiketinin içine yeni satırlar ekleyerek sayfanı büyüt:

<h2>Sevdiğim şeyler</h2>
<ul>
  <li>Kitap okumak</li>
  <li>Bisiklet sürmek</li>
  <li>Yeni şeyler öğrenmek</li>
</ul>

<a href="https://tr.wikipedia.org">En sevdiğim site</a>

• <h2> alt başlık oluşturur
• <ul> bir liste başlatır, <li> her maddeyi gösterir
• <a href="#ornek-baglanti"> bir bağlantı (link) oluşturur

4. Biraz renk kat

Sayfanın görünüşünü CSS ile değiştirirsin. <head> etiketinin içine şunu ekle:

<style>
  body {
    font-family: sans-serif;
    max-width: 600px;
    margin: 40px auto;
    background: #f8fafc;
  }
  h1 { color: #2563eb; }
</style>

Sırada ne var?

Sayfanı başkaları da görsün istersen GitHub Pages ya da Netlify ile ücretsiz yayınlayabilirsin. Daha fazla etiket ve stil öğrenmek için HTML ve CSS derslerimize göz at.

Sık Karşılaşılan Hatalar, Nedenleri ve Hızlı Çözüm Tablosu

İlk HTML sayfası nasıl yapılır ve tarayıcıda açılır? konusunu kendi projende uygularken en sık karşılaşılan durumları ve çözüm adımlarını aşağıdaki tabloda bulabilirsin:

Adım Adım Hata Ayıklama (Debugging) ve Temiz Kod Kontrol Listesi

• 1. Sorunu En Küçük Örnekte İzole Et: 200 satırlık kodda hata aramak yerine, yalnızca takıldığın satırı 5-10 satırlık küçük bir deneme alanında (Tarayıcıda Kod Dene sayfasında) tek başına çalıştır.
• 2. Varsayma, Konsola Yazdır: "Bu değişkenin içinde kesin 10 vardır" diye düşünmek yerine, işlemden hemen önce değişkenin değerini ve tipini ekrana yazdırarak gözünle doğrula.
• 3. Tek Seferde Tek Değişiklik Yap: Aynı anda hem HTML yapısını, hem CSS sınıfını hem de JavaScript fonksiyonunu değiştirirsen sorunun hangisinden kaynaklandığını bulamazsın.
• 4. Sınır Değerleri Test Et: Kodun normal bir girdide çalıştığında hemen bırakma; boş girdi (`""`), sıfır (`0`) veya beklenmeyen bir değer girildiğinde nasıl davrandığını da kontrol et.

Sıkça Sorulan Sorular (SSS)

Kaynaklar ve devamı

• HTML yapısı — MDN ↗