İlk HTML sayfan

Başlamadan önce

Ön bilgi gerekmiyor. Kodu yazacağın alan ile sonucu okuyacağın alanı ayırt ederek başlayacağız.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

HTML bir metni süslemekten önce onun görevini belirtir. h1 bir ana başlıktır; p bir paragraftır. Tarayıcı bu işaretleri okur, belge ağacını oluşturur ve kendi varsayılan görünümünü uygular. Başlığın büyük olması bu varsayılan görünümün sonucudur. Yalnızca büyük yazı istediğin için başlık etiketi seçme; görünümü daha sonra CSS ile ayarlayacağız.

Bir öğeyi açılış etiketi, içerik ve kapanış etiketi olarak düşün. <p> ifadesi paragrafı açar; </p> paragrafı bitirir. İç içe öğelerde en son açtığını önce kapatırsın. Kodun girintili yazılması çalışmayı sihirli biçimde değiştirmez ama yanlış kapanışları görmeyi kolaylaştırır.

Bir sayfayı önce taslak olarak kâğıda yaz: konu başlığı, kısa tanıtım ve bir alt başlık. Sonra her parçanın anlamına uygun etiketi seç. Bu alışkanlık görsel tasarımdan önce içerik düzenini düşünmeni sağlar; aynı belge küçük ekranda veya ekran okuyucuda da anlaşılır kalır.

İlk örneği oku ve dene

<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk web sayfam.</p>

Büyük, kalın bir "Merhaba Dünya!" başlığı ve altında normal boyutta "Bu benim ilk web sayfam." yazısı görünür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. h1 sayfanın ana konusunu adlandırır; belge başlığı olan title ile aynı görevde değildir.
2. p içindeki metin bir paragraftır; yeni bir düşünce için yeni p açılır.
3. strong önemli bir ifadeyi vurgular. Sadece kalın yazı görünümü için seçilmez.
4. h2 ana konunun altındaki bölümü başlatır; sırayı yazı boyutuna göre atlama.

<h1>Benim öğrenme günlüğüm</h1>
<p>Bugün <strong>ilk HTML sayfamı</strong> yazdım.</p>
<h2>Yarın ne yapacağım?</h2>
<p>Bir bağlantı ekleyeceğim.</p>

Bir ana başlık, önemli kısmı vurgulanmış paragraf, bir alt başlık ve ikinci paragraf.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Ana başlığı kendi seçtiğin bir konuya dönüştür.
2. İki ayrı düşünce için iki paragraf yaz; her paragrafta yalnızca bir güçlü vurgu kullan.
3. Bir h2 ekle; taslağını CSS kullanmadan yalnızca içerik düzeni açısından değerlendir.

<h1>Kitap günlüğüm</h1>
<p>Bu hafta <strong>bir roman</strong> bitirdim.</p>
<h2>Sıradaki hedefim</h2>
<p>Bir öykü kitabı okuyacağım.</p>

Kitap günlüğü başlığı ve iki bölümlü okunabilir bir içerik.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. Bir etiketi kapatmayı unutmak sonraki içeriğin de o öğenin içinde kalmasına yol açabilir; açılan ve kapanan etiketleri eşleştir.
2. Boşluk vermek için art arda boş paragraflar ekleme; görsel boşluğu CSS ile düzenle.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

h2 neden kullanılır?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.