HTML5 Konu Anlatımlı Sınav Çalışma ve Hazırlık Föyü

1. Proje Klasör Mimarisi ve Dosya Yolları (Relative Path)

Web geliştirmede en kritik kural, dosyalar arasındaki göreceli dosya yollarının doğru kurulmasıdır. Projelerinizi teslim ederken veya başka bilgisayara taşırken dosyaların bozulmaması için aşağıdaki hiyerarşiye uyulmalıdır:

// Standart Klasör Hiyerarşisi:

📁 Ad_Soyad_OkulNo/

├── 📄 index.html (Ana Sayfa)

├── 📄 tablo.html (Tablo & Çizelge)

├── 📄 medya.html (Görsel & Video)

├── 📄 hakkimizda.html (İletişim)

└── 📁 medya/

├── 🖼️ resim.jpg

├── 🎬 video.mp4

└── 🎵 ses.mp3

❌ Yanlış (Mutlak / Absolute Path): <img src="C:/Users/Ayse/Desktop/resim.jpg">

Bu yol başka bir bilgisayarda asla çalışmaz, resim kırık görünür.

✅ Doğru (Göreceli / Relative Path): <img src="medya/resim.jpg" alt="Açıklama">

Klasör nereye taşınırsa taşınsın her cihazda ve web sunucusunda sorunsuz çalışır.

2. HTML5 Standart Sayfa İskeleti ve Semantik Etiketler

Modern HTML5 belgeleri, içeriğin türünü arama motorlarına ve tarayıcılara net bir şekilde aktaran semantik etiketlerle inşa edilir:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfa Başlığı - Sema Cengiz Büberci Kız MTAL</title>
</head>
<body id="top">
    <header>  <!-- Sitenin üst başlık alanı -->
        <h1>Okul Adı</h1>
        <h2>Proje Konusu ve Kulüp Adı</h2>
        <hr>
    </header>

    <nav>     <!-- Sayfalar arası dolaşım menüsü -->
        <p>
            <strong>Menü:</strong>
            <a href="index.html">Ana Sayfa</a> |
            <a href="tablo.html">Veri Tablosu</a> |
            <a href="medya.html">Medya Galerisi</a> |
            <a href="hakkimizda.html">Hakkımızda & İletişim</a>
        </p>
        <hr>
    </nav>

    <main>    <!-- Sayfanın ana özgün içerikleri -->
        <section>
            <h3>Bölüm Başlığı</h3>
            <p>Paragraf metni buraya yazılır...</p>
        </section>
    </main>

    <footer>  <!-- Telif hakkı ve sayfa başı bağlantısı -->
        <hr>
        <p><a href="#top">Sayfa Başına Dön (↑)</a></p>
        <p>&copy; 2026-2027 Sema Cengiz Büberci Kız MTAL</p>
    </footer>
</body>
</html>

3. Metin Biçimlendirme, Tipografi ve Formül Etiketleri

HTML5'te metinlerin görünümü kadar, taşıdıkları anlamsal önem de belirleyicidir:

Etiket	Kullanım Amacı & Semantik Anlamı	Örnek Kod Sözdizimi	Tarayıcıdaki Çıktısı
<strong>	Yüksek önem taşıyan, kalın vurgulanması gereken metinler.	<strong>Önemli Bilgi</strong>	Önemli Bilgi
<em>	Vurgulanmak istenen, italik (eğik) olarak gösterilen metinler.	<em>Dikkat ediniz</em>	Dikkat ediniz
<del> ve <ins>	Eski/silinen metnin üstünü çizmek (<del>) ve yeni eklenen metnin altını çizmek (<ins>).	Sınav: <del>10 Kasım</del> <ins>20 Kasım</ins>	Sınav: ~~10 Kasım~~ 20 Kasım
<mark>	Fosforlu kalem etkisi gibi sarı arka planla işaretleme.	<mark>Okul Numarası</mark>	Okul Numarası
<sub>	Alt simge (Subscript). Kimyasal formüller ve taban değerleri için.	H<sub>2</sub>O veya D<sub>1</sub>	H₂O veya D₁
<sup>	Üst simge (Superscript). Üslü sayılar ve sıralama ekleri için.	E<sup>2</sup> veya 1<sup>inci</sup>	E² veya 1^inci
<blockquote>	Başka bir kaynaktan veya kişiden yapılan blok alıntı (otomatik girintilenir).	<blockquote><q>Söz...</q></blockquote>	"Söz..."

4. HTML5 Liste Çeşitleri ve Kullanım Parametreleri

İçeriğin niteliğine göre HTML5 üç temel liste yapısı sunar:

1. Sıralı Liste (<ol>)

Adımların veya önceliklerin önemli olduğu durumlar için kullanılır.

<ol type="A">
  <li>Birinci Madde</li>
  <li>İkinci Madde</li>
</ol>

Parametreler:
type="1" (1, 2, 3...)
type="A" (A, B, C...)
type="I" (I, II, III... Roma)
start="5" (5'ten başlat)

2. Sırasız Liste (<ul>)

Sıranın veya önceliğin fark etmediği madde imli listeler için kullanılır.

<ul>
  <li>Atölye Kuralı 1</li>
  <li>Atölye Kuralı 2</li>
</ul>

Görünüm:
Varsayılan olarak siyah dolu yuvarlak (•) madde imi ile listeler.

3. Tanım Listesi (<dl>)

Sözlük, terim ve kavram açıklamaları için en uygun semantik yapıdır.

<dl>
  <dt>HTML5:</dt>
  <dd>Web işaretleme dili.</dd>
  <dt>CSS:</dt>
  <dd>Stil şablonu dili.</dd>
</dl>

<dt>: Terim (koyu)
<dd>: Açıklama (içeriden girintili)

5. HTML5 Tablo Yapısı ve Hücre Birleştirme (Rowspan & Colspan) Kritik Konu

Tablolarda rowspan dikeyde (satırları), colspan ise yatayda (sütunları) birleştirir:

Dikey Satır Birleştirme: rowspan="2"

Bir hücreye rowspan="2" verdiğinizde, o hücre dikeyde 2 satırı kaplar. Altındaki satırda o sütuna karşılık gelen <td> hücresi yazılmaz / silinir.

Yatay Sütun Birleştirme: colspan="3"

Bir hücreye colspan="3" verdiğinizde, o hücre yatayda 3 sütunu kaplar. Aynı satır içerisindeki sonraki 2 adet <td> hücresi yazılmaz / silinir.

<table border="1">
  <caption>Turnuva Puan Durumu</caption>
  <thead>
    <tr><th>Grup</th><th>Takım</th><th>Puan</th></tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">A Grubu</td> <!-- Dikey 2 satır kaplar -->
      <td>Takım 1</td><td>9</td>
    </tr>
    <tr>
      <!-- Grup hücresi yazılmaz, yukarıdan birleşti -->
      <td>Takım 2</td><td>6</td>
    </tr>
    <tr>
      <td colspan="2">BÜYÜK FİNAL MAÇI</td> <!-- 2 sütun kaplar -->
      <td>Canlı</td>
    </tr>
  </tbody>
</table>

6. Multimedya Entegrasyonu (Görsel, Video ve Ses)

1. Resimler (<figure> ve <img>):

<figure>
  <img src="medya/resim.jpg" alt="Robotik Atölyesi Çalışması" title="Sensör Testi" width="400">
  <figcaption><strong>Görsel 1:</strong> Öğrencilerin atölye telemetri testi.</figcaption>
</figure>

alt: Resim yüklenemezse veya görme engelli ekran okuyucular için zorunludur.
title: Fare resmin üzerine geldiğinde çıkan bilgi baloncuğudur.

2. Video Oynatıcı (<video>):

<video width="420" controls poster="medya/poster.svg">
  <source src="medya/ornek_video.mp4" type="video/mp4">
  Tarayıcınız video etiketini desteklemiyor.
</video>

controls: Oynat, durdur, ses gibi kontrol düğmelerini ekler. Yazılmazsa kullanıcı videoyu oynatamaz!
poster: Video oynatılmadan önce ekranda duran kapak resmidir.

3. Ses Oynatıcı (<audio>):

<audio controls>
  <source src="medya/ornek_ses.mp3" type="audio/mpeg">
  Tarayıcınız ses etiketini desteklemiyor.
</audio>

7. Bağlantılar (Köprüler), Çapa Linkler ve İletişim Standartları

Yeni Sekmede Açılan Dış Link:


                                <a href="https://meb.gov.tr" target="_blank">MEB Portalı</a>

target="_blank" sitenizden ayrılmadan yeni sekme açtırır.

Sayfa Başına Dönüş Linki:


                                <a href="#top">Sayfa Başına Dön (↑)</a>

Sayfanın en altına konur, <body id="top"> alanına zıplatır.

Sayfa İçi Hızlı Çapa (Anchor) Link Mekanizması:

Sayfanın bir yerinden başka bir bölümüne anında kaymak için iki parça kullanılır:

<!-- 1. Tıklanacak Link (Başına # işareti konur) -->
<a href="#iletisim">İletişim Bilgilerine Git (↓)</a>

<!-- 2. Hedef Bölüm (id özniteliği ile adlandırılır) -->
<section id="iletisim">
    <h3>İletişim Bilgileri</h3>
    <address>
        <strong>Sema Cengiz Büberci Kız MTAL</strong><br>
        Bilişim Teknolojileri Alanı<br>
        E-Posta: <a href="mailto:iletisim@okul.k12.tr">iletisim@okul.k12.tr</a>
    </address>
</section>

8. Sık Yapılan Hatalar ve Altın Tavsiyeler

1. Kapanış Etiketlerini Unutmayınız:

Açtığınız her <table>, <tr>, <section> veya <ol> etiketinin mutlaka kapanışını yapınız (</table>).

2. Sıfır CSS Kuralı:

Müfredatta CSS henüz işlenmediği için <style> veya style="..." yazılması yasaktır. Saf HTML5 etiketleri kullanılmalıdır.

3. Türkçe Karakter İçermeyen Dosya Adları:

Dosya adlarında Türkçe harf ve boşluk kullanmayınız (hakkımızda.html yerine hakkimizda.html).

4. Araştırma Yapmaktan Çekinmeyiniz:

W3Schools, MDN ve MEB ders kitabından etiket araştırması yapmak serbesttir. Ezberlemek yerine etiketlerin mantığını kavramak esastır.

Sema Cengiz Büberci Kız Mesleki ve Teknik Anadolu Lisesi

Web Tabanlı Uygulama Geliştirme Dersi • HTML5 Konu Anlatımlı Çalışma ve Tekrar Föyü