HTML: örneklerle ilk adımlar

HTML ile ilk programın

Web sayfalarının iskeleti. Sayfada hangi başlıkların, yazıların, resimlerin ve butonların olacağını söyler. Bir programlama dili değil, bir işaretleme dilidir; web geliştirmeye sayfanın yapısını öğrenerek başlayabilirsin. Kodu anlamak için videoyu duraklat, bir değeri değiştir ve sonucu tahmin et.

01 · İlk HTML sayfan

HTML, etiketlerden oluşur: büyük başlık, paragraf demek. Çoğu etiket açılır ve sonunda gibi bir eğik çizgiyle kapanır.

<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk web sayfam.</p>

Beklenen: Büyük, kalın bir "Merhaba Dünya!" başlığı ve altında normal boyutta "Bu benim ilk web sayfam." yazısı görünür.

02 · Sayfanın iskeleti

Her HTML dosyası bu yapıyla başlar. sayfa hakkındaki bilgileri tutar ve ekranda görünmez; ise ekranda görünen her şeyi içerir. charset="UTF-8" Türkçe karakterlerin düzgün görünmesini sağlar.

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8">
    <title>Sekmede görünen başlık</title>
  </head>
  <body>
    <h1>Görünen her şey body içine yazılır</h1>
  </body>
</html>

Beklenen: Ekranda "Görünen her şey body içine yazılır" başlığı görünür. "Sekmede görünen başlık" ise tarayıcı sekmesinde yazar.

03 · Bağlantılar ve resimler

bağlantı oluşturur; href nereye gideceğini söyler. resim ekler; src resmin adresi, alt ise resim yüklenemezse ya da görme engelli biri ekran okuyucu kullanıyorsa okunacak açıklamadır. kapanış etiketi istemez.

<a href="https://www.wikipedia.org">Vikipedi'ye git</a>

<img src="https://picsum.photos/300/150" alt="Dış kaynaktan yüklenen örnek fotoğraf">

Beklenen: Tıklanabilir mavi "Vikipedi'ye git" yazısı ve yanında bir fotoğraf görünür.

04 · Listeler

madde işaretli, numaralı liste oluşturur. Listedeki her eleman etiketiyle yazılır.

<h3>Alışveriş listesi</h3>
<ul>
  <li>Ekmek</li>
  <li>Süt</li>
</ul>

<h3>Tarif adımları</h3>
<ol>
  <li>Suyu kaynat</li>
  <li>Makarnayı ekle</li>
</ol>

Beklenen: Noktalarla işaretlenmiş bir alışveriş listesi ve 1, 2 diye numaralanmış tarif adımları görünür.

05 · Tablolar

tablo, satır, başlık hücresi, normal hücre demek. Çizgileri ve boşlukları CSS ile ayarlıyoruz; tablo görsel yerleşim için değil, ilişkili verileri sunmak içindir.

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #64748b; padding: 8px; }
</style>
<table>
  <tr>
    <th>Dil</th>
    <th>Örnek kullanım</th>
  </tr>
  <tr>
    <td>Python</td>
    <td>Otomasyon</td>
  </tr>
  <tr>
    <td>Java</td>
    <td>Sunucu uygulamaları</td>
  </tr>
</table>

Beklenen: İki sütunlu, çizgili bir tablo: üstte kalın "Dil" ve "Örnek kullanım" başlıkları, altında iki satır.

06 · Anlamlı etiketler (semantik HTML)

(üst kısım), (menü), (ana içerik), (yazı) ve (alt bilgi) etiketleri ekranda özel bir görünüm oluşturmaz ama sayfanın yapısını anlatır. Böylece Google sayfanı daha iyi anlar, ekran okuyucular da sayfayı görme engelli ziyaretçilere doğru okur.

<header>
  <h1>Webino App</h1>
  <nav>Ana Sayfa | Diller | Araçlar</nav>
</header>
<main>
  <article>
    <h2>Python Öğren</h2>
    <p>Python ile okunabilir örnekler yazabilirsin.</p>
  </article>
</main>
<footer>© 2026 Webino App</footer>

Beklenen: Başlık, menü yazısı, bir yazı ve en altta telif satırı alt alta görünür.

07 · Sıra sende

Örneklerden birini seç. Bir girdiyi veya koşulu değiştir. Önce beklediğin sonucu yaz, sonra çalıştır. Hata varsa mesajı ve satırı incele. Yazılı rehberdeki “Kendin dene” alanıyla devam edebilir, ardından ayrı testte eksiklerini görebilirsin.