Hero bölümü
Ana başlık, alt başlık ve CTA butonunu içeren hero bölümünü yazarsın.
Hero bölümü
Hero, sayfanın en üstündeki büyük bölümdür. Ziyaretçi burada ürünün ne yaptığını saniyeler içinde anlamalıdır. Üç öğe yeter:
- bir
<h1>ile güçlü bir slogan - bir
<p>ile kısa açıklama - bir
<a>veya<button>ile eylem çağrısı
Hepsi <main> içine alınır; ana içerik orada yaşar.
head ayarları
<head> bölümü sayfanın kimliğini ve temel ayarlarını taşır. Ziyaretçi bu ayarları görmese de olmadan sayfa düzgün çalışmaz. Şunları eklersin:
langözniteliği<html>etiketine dil verir<meta charset>karakter kodlamayı belirler<meta name="viewport">mobil ölçeği ayarlar<title>sekmedeki başlığı yazar
Bunlar olmadan mobilde sayfa küçük görünür, Türkçe karakterler bozulur.
Uygulama head ayarlarını ve hero'yu ekle
Önceki dersin boş iskeletini al. <html>'e lang özniteliği, <head> içine meta charset, viewport ve dolu bir title ekle. <body> içine bir <main> koy; içine h1 (slogan), p (açıklama), a (kayıt bağlantısı, href ile) ve button (tur iste) yaz.
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TaskFlow - Görev yönetimi</title>
</head>
<body>
<main>
<h1>Görevlerini akılda değil, akışta tut</h1>
<p>TaskFlow ile ekibinin görevlerini, son tarihlerini ve ilerlemesini tek panelden yönet.</p>
<a href="/kayit">Ücretsiz başla</a>
<button>Tur iste</button>
</main>
</body>
</html>Kendini test et
-
Mobil uyum için meta etiketinin name değerini yaz
<meta name="____" content="width=device-width, initial-scale=1">Cevabı göster
<meta name="viewport" content="width=device-width, initial-scale=1"> -
viewport meta etiketi ne işe yarar?
- Sayfa başlığını belirler
- Karakter kodlamayı ayarlar
- Mobil cihazda ölçeği ayarlar
- Dil bilgisini tanımlar
Cevabı göster
Mobil cihazda ölçeği ayarlar — Doğru. viewport, sayfanın mobil cihazda doğru ölçekle gösterilmesini sağlar.
-
head öğesini rolüyle eşleştir
- lang
- Sayfa dili
- charset
- Karakter kodlama
- viewport
- Mobil ölçek
- title
- Sekme başlığı