html-giris-temel-yapi

HTML Nedir?

HTML (HyperText Markup Language), web sayfalarının temel yapısını oluşturan işaretleme dilidir. HTML, web tarayıcılarına içeriğin nasıl görüntüleneceğini söyleyen etiketlerden oluşur.

HTML’in Özellikleri

İşaretleme Dili: HTML bir programlama dili değil, işaretleme dilidir
Platform Bağımsız: Tüm işletim sistemlerinde çalışır
Tarayıcı Desteği: Tüm modern web tarayıcıları tarafından desteklenir
Metin Tabanlı: Basit metin editörleri ile yazılabilir

HTML Nasıl Çalışır?

HTML, etiketler (tags) kullanarak içeriği yapılandırır. Bu etiketler web tarayıcısı tarafından yorumlanır ve kullanıcıya görsel olarak sunulur.

<h1>Bu bir başlıktır</h1>
<p>Bu bir paragraftır.</p>

Yukarıdaki kod tarayıcıda şu şekilde görünür:

Bu bir başlıktır

Bu bir paragraftır.

Temel HTML Belgesi Yapısı

Her HTML belgesi belirli bir yapıya sahiptir. İşte standart HTML5 belgesi yapısı:

<!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ığı</title>
</head>
<body>
    <!-- Sayfa içeriği buraya gelir -->
    <h1>Merhaba Dünya!</h1>
    <p>Bu benim ilk HTML sayfam.</p>
</body>
</html>

Yapı Elemanlarının Açıklaması

`<!DOCTYPE html>`

HTML5 belge türünü belirtir
Tarayıcıya bu belgenin HTML5 standardında yazıldığını söyler
Daima belgenin en üstünde yer alır

`<html lang="tr">`

HTML belgesinin kök (root) elemanıdır
lang özelliği sayfa dilini belirtir (SEO ve erişilebilirlik için önemli)
Tüm diğer elemanları içerir

`<head>` Bölümü

Sayfanın meta bilgilerini içerir
Kullanıcıya doğrudan görünmeyen bilgiler
Tarayıcı ve arama motorları için bilgiler

Head içindeki önemli elemanlar:

<meta charset="UTF-8">
<!-- Karakter kodlamasını belirtir (Türkçe karakter desteği için) -->
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Mobil cihazlarda doğru görünüm için gerekli -->
 
<title>Sayfa Başlığı</title>
<!-- Tarayıcı sekmesinde ve arama sonuçlarında görünen başlık -->

`<body>` Bölümü

Kullanıcıya görünen tüm içerik burada yer alır
Metin, resim, video, linkler vb. tüm elemanlar

Ipucu

İpucu: lang="tr" özelliğini kullanarak Türkçe içerik için uygun dil desteği sağlayın. Bu, arama motorları ve ekran okuyucular için önemlidir.

İlk HTML Sayfanızı Oluşturun

Hadi birlikte ilk HTML sayfanızı oluşturalım:

Adım 1: Dosya Oluşturun

Bilgisayarınızda yeni bir klasör oluşturun (örn: html-dersleri)
Bu klasörde index.html adında bir dosya oluşturun

Adım 2: Kodu Yazın

Aşağıdaki kodu index.html dosyasına yazın:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Benim İlk HTML Sayfam</title>
</head>
<body>
    <h1>Merhaba, Ben [Adınız]!</h1>
    <p>Bu benim ilk HTML sayfam ve web geliştirme yolculuğuma başlıyorum.</p>
    <h2>Hedeflerim</h2>
    <p>Bu eğitim serisiyle:</p>
    <ul>
        <li>HTML'i öğreneceğim</li>
        <li>Modern web sayfaları yapacağım</li>
        <li>Web geliştirici olacağım</li>
    </ul>
</body>
</html>

Adım 3: Tarayıcıda Açın

Dosyayı kaydedin
Dosyaya çift tıklayarak web tarayıcısında açın
Tebrikler! İlk HTML sayfanızı oluşturdunuz! 🎉

HTML Etiketlerinin Temel Kuralları

1. Açılış ve Kapanış Etiketleri

<h1>Bu bir başlık</h1>
<p>Bu bir paragraf</p>

2. Kendini Kapatan Etiketler

<br>   <!-- Satır atlama -->
<img>  <!-- Resim -->
<hr>   <!-- Yatay çizgi -->

3. İç İçe Etiketler

<div>
    <h1>Ana Başlık</h1>
    <p>Bu paragrafın içinde <strong>kalın</strong> ve <em>italik</em> metin var.</p>
</div>

4. Özellikler (Attributes)

<img src="resim.jpg" alt="Açıklama">
<a href="https://example.com">Link</a>
<p class="ozel-stil">Stillendirilmiş paragraf</p>

Uyarı

Dikkat: HTML etiketlerini doğru sırayla kapatmayı unutmayın. Açılan son etiket, kapanan ilk etiket olmalıdır.

Yaygın Başlangıç Hataları

1. DOCTYPE Eksikliği

<!-- Yanlış -->
<html>
<head>...
 
<!-- Doğru -->
<!DOCTYPE html>
<html>
<head>...

2. Karakter Kodlama Eksikliği

<!-- Türkçe karakterler için gerekli -->
<meta charset="UTF-8">

3. Etiket Kapama Hatası

<!-- Yanlış -->
<p>Paragraf <strong>kalın metin</p></strong>
 
<!-- Doğru -->
<p>Paragraf <strong>kalın metin</strong></p>

Özet ve Sonraki Adım

Bu bölümde öğrendikleriniz:

✅ HTML’in ne olduğu ve nasıl çalıştığı
✅ Temel HTML belge yapısı
✅ HTML etiketlerinin nasıl kullanıldığı
✅ İlk HTML sayfasının nasıl oluşturulacağı

Pratik Ödev

Kendinizi tanıtan bir HTML sayfası oluşturun
En az 3 farklı başlık seviyesi kullanın (h1, h2, h3)
Paragraflar, listeler ve kalın/italik metinler ekleyin
Dosyayı kaydedin ve tarayıcıda görüntüleyin

Sonraki bölümde HTML’in en temel yapı taşları olan etiketleri detaylı olarak inceleyeceğiz. Başlıklar, paragraflar, listeler ve daha fazlasını öğreneceksiniz!

Bölüm 1: HTML'e Giriş ve Temel Yapı