10. Sınıf · 3. hafta
Bugün öğreneceklerimiz
Anlamlı HTML elemanlarıyla yerel bir kulüp sayfası oluştur.
- HTML belgesinin temel iskeletini kurarım.
- Başlık, paragraf ve listeyi anlamlarına uygun kullanırım.
Derse hazırlık · araçlar ve ön bilgiler
Araçlar: Düz metin/kod editörü ve tarayıcı; okul cihazında yerel klasör. Yayın veya hesap gerekmez.
Ön bilgi: Dosya adı/uzantısı ve klasör; HTML ön bilgisi gerekmiyor.
Öğretmen, gerekli dosya ve uygulamaları ders başlamadan hazırlar. Anlatım, örnek inceleme, çoktan seçmeli sorular ve açıklamaları 40 dakikalık akışın içindedir. Küçük yaşlarda metinler öğretmen tarafından sesli okunur.
Önce bilgiyi oku, sonra yanındaki çoktan seçmeli soruyu çöz. Kaydırarak altı bölümde ilerle; “Kesintisiz oku” ile bütün dersi birlikte görebilirsin.
0–4. dakika · 4 dk
Konuyu tanı
Ders anlatımı
HTML web içeriğinin yapısını tanımlayan işaretleme dilidir. Başlık, paragraf ve liste gibi elemanlar içeriğin görevini belirtir; yalnızca görünüm ayarı değildir.
Ayrıntısıyla öğren
HTML, web içeriğinin yapısını tanımlayan işaretleme dilidir. Elemanlar başlık, paragraf veya liste gibi anlamları belirtir. Çoğu elemanda açılış ve kapanış etiketi vardır; kapanışta eğik çizgi bulunur.
4–12. dakika · 8 dk
Temel bilgiler
Ders anlatımı
Çoğu HTML elemanında açılış ve kapanış etiketi bulunur. Paragraf <p> ile başlar ve </p> ile kapanır; kapanışta eğik çizgi vardır.
Ayrıntısıyla öğren
Belgenin head bölümünde sayfaya ilişkin bilgiler, body bölümünde görünür içerik yer alır. title tarayıcı sekmesindeki adı, h1 sayfanın ana başlığını verir. Türkçe metin için UTF-8 ve dil bilgisi eklemek temel bir hazırlıktır.
12–20. dakika · 8 dk
Yakından incele
Ders anlatımı
head sayfaya ilişkin bilgileri, body görünür içeriği taşır. Bir paragraf görünür sayfa içeriği olduğundan body içinde bulunur.
Ayrıntısıyla öğren
Anlamlı eleman kullanmak, içeriğin farklı araçlarla anlaşılmasını kolaylaştırır. h1 büyük görünsün diye değil, ana başlık olduğu için seçilir. Bu derste kişisel bilgi, dış görsel ve form eklemeden yerel bir sayfa oluşturacağız.
20–32. dakika · 12 dk
Örnek üzerinden öğren
Ders anlatımı
title tarayıcı sekmesindeki adı, h1 sayfanın ana başlığını belirtir. Bu iki eleman farklı konumlarda farklı görevler yapar.
<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Robot Kulübü</title>
</head>
<body>
<main>
<h1>Robot Kulübü</h1>
<p>Birlikte tasarlar, dener ve geliştiririz.</p>
<h2>Bu hafta</h2>
<ul>
<li>Problemi tanımla</li>
<li>İlk taslağı çiz</li>
</ul>
</main>
</body>
</html>Sekme adı: Robot Kulübü. Sayfada ana başlık, bir paragraf, Bu hafta alt başlığı ve iki maddelik liste görünür.
32–37. dakika · 5 dk
Bilgini geliştir
Ders anlatımı
Anlamlı eleman seçimi içeriğin yapısını anlaşılır kılar. h1 yalnızca büyük görünsün diye değil, metin ana başlık olduğu için seçilir.
37–40. dakika · 3 dk
Konuyu pekiştir
Ders anlatımı
UTF-8 Türkçe karakterlerin doğru yorumlanmasına yardım eder; dil bilgisi belgenin dilini belirtir. Anlamlı yapı farklı okuma araçlarına da yardımcı olur.
Bu dersin özeti
- HTML web içeriğinin yapısını tanımlayan işaretleme dilidir. Başlık, paragraf ve liste gibi elemanlar içeriğin görevini belirtir; yalnızca görünüm ayarı değildir.
- head sayfaya ilişkin bilgileri, body görünür içeriği taşır. Bir paragraf görünür sayfa içeriği olduğundan body içinde bulunur.
- Anlamlı eleman seçimi içeriğin yapısını anlaşılır kılar. h1 yalnızca büyük görünsün diye değil, metin ana başlık olduğu için seçilir.