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

Sıradaki ders: Özellik listesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler