HTML Öğrenme Kitabı (The HTML Learning Book)
İçindekiler (Table of Contents)
● Bölüm 1: HTML Nedir ve Nasıl Çalışır? (What is HTML?)
● Bölüm 2: İlk Web Sayfanız (Your First Web Page)
● Bölüm 3: Metinleri Biçimlendirme (Formatting Text)
● Bölüm 4: Bağlantılar ve Görseller (Links and Images)
● Bölüm 5: Listeler ve Tablolar (Lists and Tables)
Bölüm 1: HTML Nedir ve Nasıl Çalışır?
HTML, HyperText Markup Language (Hiper Metin İşaretleme Dili) anlamına gelir. Bir
programlama dili değil, web sayfalarının iskeletini oluşturmak için kullanılan bir işaretleme
dilidir.
Web tarayıcınız (Chrome, Safari, Edge), HTML kodlarını okur ve bunları görsel bir web sayfasına
dönüştürür.
Etiket (Tag) Mantığı
HTML, etiketler yardımıyla çalışır. Etiketler genellikle bir açılış ve bir kapanış etiketinden oluşur:
HTML
<etiket_adı>Buraya içerik gelir</etiket_adı>
Not: Kapanış etiketinin başında her zaman bir eğik çizgi (/) bulunur.
Bölüm 2: İlk Web Sayfanız
Her standart HTML5 belgesi belirli bir temel yapı ile başlamak zorundadır. İşte en temel HTML
şablonu:
HTML
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>İlk Web Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk web sayfamdır.</p>
</body>
</html>
Temel Etiketlerin Anlamları:
● <!DOCTYPE html>: Tarayıcıya bu belgenin modern HTML5 standartlarında yazıldığını
söyler.
● <html>: Tüm HTML içeriğini kapsayan ana kök etikettir.
● <head>: Sayfa hakkında arama motorlarının ve tarayıcının bilmesi gereken (fakat sayfada
doğrudan görünmeyen) bilgileri içerir.
● <title>: Tarayıcı sekmesinde görünen sayfa başlığıdır.
● <body>: Web sitesini ziyaret eden kullanıcıların ekranda gördüğü tüm içerik buraya yazılır.
Bölüm 3: Metinleri Biçimlendirme
Web sayfanızdaki metinleri yapılandırmak için şu temel etiketleri kullanırız:
Başlıklar (Headings)
HTML'de büyükten küçüğe doğru sıralanan 6 çeşit başlık etiketi vardır:
HTML
<h1>En Büyük Başlık (Genelde sayfa başlığı olur)</h1>
<h2>Alt Başlık</h2>
<h3>Daha Küçük Başlık</h3>
<!-- h4, h5, h6 şeklinde küçülerek devam eder -->
Paragraflar ve Vurgular
● <p>: Yeni bir paragraf oluşturur.
● <strong>: Metni kalın yapar ve önemli olduğunu belirtir.
● <em>: Metni italik (eğik) yapar ve vurgular.
Bölüm 4: Bağlantılar ve Görseller
Bir web sayfasını interaktif kılan en önemli iki unsur linkler ve resimlerdir.
Bağlantı (Link) Ekleme: <a>
Bir yazıya tıklandığında başka bir siteye gidilmesini sağlamak için href özniteliği (attribute)
kullanılır:
HTML
<a href="[Link] Gitmek İçin Tıklayın</a>
Görsel (Resim) Ekleme: <img>
Resim eklemek için kapanış etiketi olmayan tekil bir etiket kullanılır. src resmin yolunu, alt ise
resim yüklenmediğinde görünecek açıklamayı belirtir:
HTML
<img src="[Link]" alt="Açıklayıcı Alternatif Metin">
Bölüm 5: Listeler ve Tablolar
Verileri düzenli bir şekilde göstermek için listelerden ve tablolardan yararlanırız.
Sıralı ve Sırasız Listeler
Maddeli (Sırasız) liste için <ul>, numaralı (Sıralı) liste için <ol> kullanılır. Her liste elemanı <li> içine
yazılır:
HTML
<!-- Sırasız Liste -->
<ul>
<li>Elma</li>
<li>Armut</li>
</ul>
<!-- Sıralı Liste -->
<ol>
<li>Birinci Adım</li>
<li>İkinci Adım</li>
</ol>
Temel Tablo Yapısı
Tablolar satırlardan (<tr>) ve hücrelerden (<td> veya başlık için <th>) oluşur:
HTML
<table>
<tr>
<th>İsim</th>
<th>Yaş</th>
</tr>
<tr>
<td>Ahmet</td>
<td>25</td>
</tr>
</table>
Kendi web sayfanızı oluşturmak için bu kodları bilgisayarınızda boş bir not defterine yapıştırıp,
dosyayı [Link] adıyla kaydetmeniz ve tarayıcınızda çift tıklayarak açmanız yeterlidir!
Bu HTML temel yapısını CSS kullanarak renklendirmek ister misiniz, yoksa formlar ve butonlar
gibi kullanıcı etkileşim elemanlarına mı geçelim?