HTML 1. Ders: İlk Web Sayfasını Oluştur — Video Rehber

İlk HTML sayfan

Başlık ve paragraf kullanarak anlamlı bir içerik bölümü oluşturmak.

Kavramı kur

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.

Neden böyle çalışıyor?

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.

Çalışma sırası

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.

İkinci örnek · 1

h1 sayfanın ana konusunu adlandırır; belge başlığı olan title ile aynı görevde değildir. Kodun tamamı yazılı derste bulunur.

<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>

Beklenen sonucu oku

h2 ana konunun altındaki bölümü başlatır; sırayı yazı boyutuna göre atlama.

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

Bir değeri sen değiştir

Ana başlığı kendi seçtiğin bir konuya dönüştür. İki ayrı düşünce için iki paragraf yaz; her paragrafta yalnızca bir güçlü vurgu kullan.

Hata nereden gelir?

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.

Kendi çözümünü kur

Bir h2 ekle; taslağını CSS kullanmadan yalnızca içerik düzeni açısından değerlendir. Önce düz metni yaz. Sonra başlıkların çevresine h1/h2, cümlelerin çevresine p ekle.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<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>

Kendini kontrol et

h2 neden kullanılır? Yanıt: Ana konunun altındaki bir bölümü anlamlandırmak için; yalnızca yazıyı küçük yapmak için değil.

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