HTML'e Giriş

HTML (HyperText Markup Language), web sayfalarının yapısını oluşturan işaretleme dilidir. Tüm web sitelerinin temelini HTML oluşturur. CSS ile görünüm, JavaScript ile etkileşim eklenir.

HTML Neden Öğrenmelisiniz?

ilk_sayfa.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İlk Web Sayfam</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu benim ilk web sayfam.</p>
</body>
</html>

HTML Belge Yapısı

Etiket Açıklama
<!DOCTYPE html> HTML5 belge tipi bildirimi
<html> Kök eleman, tüm içeriği sarar
<head> Meta bilgileri (başlık, CSS, vb.)
<title> Tarayıcı sekmesinde görünen başlık
<body> Görünen içerik
🔹 İpucu: VS Code editörünü kullanarak HTML yazabilirsiniz. Yeni bir .html dosyası oluşturun ve ! yazıp Tab'a basın - temel şablon oluşur!

Temel HTML Etiketleri

HTML etiketleri, içeriğin türünü ve yapısını belirler. Her etiketin bir açılış ve kapanış kısmı vardır.

Başlık Etiketleri (h1-h6)

basliklar.html

<h1>En Büyük Başlık (h1)</h1>
<h2>İkinci Seviye Başlık (h2)</h2>
<h3>Üçüncü Seviye Başlık (h3)</h3>
<h4>Dördüncü Seviye Başlık (h4)</h4>
<h5>Beşinci Seviye Başlık (h5)</h5>
<h6>En Küçük Başlık (h6)</h6>

Canlı Önizleme

En Büyük Başlık (h1)

İkinci Seviye Başlık (h2)

Üçüncü Seviye Başlık (h3)

Paragraf ve Satır Etiketleri

paragraflar.html

<!-- Paragraf -->
<p>Bu bir paragraftır. Paragraflar metin blokları oluşturur.</p>

<p>Bu başka bir paragraftır. Paragraflar arasında otomatik boşluk bırakılır.</p>

<!-- Satır kırma -->
<p>İlk satır<br>İkinci satır<br>Üçüncü satır</p>

<!-- Yatay çizgi -->
<hr>

<!-- Önceden biçimlendirilmiş metin -->
<pre>
    Bu metin
        olduğu gibi
            görüntülenir.
</pre>

Div ve Span

div_span.html

<!-- Div: Blok seviye konteyner -->
<div class="kart">
    <h2>Kart Başlığı</h2>
    <p>Kart içeriği burada.</p>
</div>

<!-- Span: Satır içi konteyner -->
<p>Bu cümledeki <span style="color: red;">kırmızı kelime</span> özel.</p>

Metin Biçimlendirme

HTML, metni farklı şekillerde biçimlendirmenizi sağlayan etiketler sunar.

Metin Stil Etiketleri

Etiket Açıklama Görünüm
<strong> Kalın (önemli) Kalın metin
<b> Kalın (görsel) Kalın metin
<em> İtalik (vurgu) İtalik metin
<i> İtalik (görsel) İtalik metin
<u> Altı çizili Altı çizili
<s> Üstü çizili Üstü çizili
<mark> Vurgulanmış Vurgulanmış
<small> Küçük metin Küçük metin
<sub> Alt simge H2O
<sup> Üst simge x2
metin_bicim.html

<p>Bu <strong>çok önemli</strong> bir mesajdır.</p>
<p>Bu <em>vurgulanan</em> bir kelimedir.</p>
<p>Su formülü: H<sub>2</sub>O</p>
<p>Einstein denklemi: E = mc<sup>2</sup></p>
<p><mark>Sarı vurgulama</mark> ile dikkat çekin.</p>
<p><s>Eski fiyat: 100 TL</s> Yeni fiyat: 75 TL</p>

<!-- Alıntı -->
<blockquote>
    "Başarı, hazırlık ile fırsatın buluşmasıdır."
    <cite>- Seneca</cite>
</blockquote>

<!-- Kod -->
<p>JavaScript'te <code>console.log()</code> kullanın.</p>

Listeler

HTML'de üç tür liste vardır: sıralı, sırasız ve tanım listeleri.

Sırasız Liste (ul)

sirasiz_liste.html

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- İç içe liste -->
<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>Python</li>
            <li>Node.js</li>
        </ul>
    </li>
</ul>

Sıralı Liste (ol)

sirali_liste.html

<ol>
    <li>Birinci adım</li>
    <li>İkinci adım</li>
    <li>Üçüncü adım</li>
</ol>

<!-- Farklı numaralandırma -->
<ol type="A">  <!-- A, B, C -->
    <li>Madde A</li>
    <li>Madde B</li>
</ol>

<ol type="I">  <!-- I, II, III -->
    <li>Madde I</li>
    <li>Madde II</li>
</ol>

<ol start="5">  <!-- 5'ten başla -->
    <li>Beşinci</li>
    <li>Altıncı</li>
</ol>

Tanım Listesi (dl)

tanim_listesi.html

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - Web sayfalarının yapısı</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - Web sayfalarının görünümü</dd>
    
    <dt>JavaScript</dt>
    <dd>Web sayfalarına etkileşim katan programlama dili</dd>
</dl>

Bağlantılar (Links)

Linkler, web sayfaları arasında gezinmeyi sağlar. <a> etiketi kullanılır.

linkler.html

<!-- Dış sayfa linki -->
<a href="https://fediatech.com">FediaTech'e Git</a>

<!-- Yeni sekmede aç -->
<a href="https://fediatech.com" target="_blank">Yeni Sekmede Aç</a>

<!-- Aynı sitedeki sayfa -->
<a href="hakkimizda.html">Hakkımızda</a>

<!-- Sayfa içi link (Anchor) -->
<a href="#bolum1">Bölüm 1'e Git</a>
...
<h2 id="bolum1">Bölüm 1</h2>

<!-- E-posta linki -->
<a href="mailto:info@fediatech.com">Bize E-posta Gönderin</a>

<!-- Telefon linki -->
<a href="tel:+905001234567">Bizi Arayın</a>

<!-- Dosya indirme -->
<a href="dosya.pdf" download>PDF İndir</a>

<!-- Görsel link -->
<a href="anasayfa.html">
    <img src="banner.jpeg" alt="Ana Sayfa">
</a>

Link Özellikleri

Özellik Değer Açıklama
href URL Bağlantı adresi
target _blank Yeni sekmede aç
target _self Aynı sekmede aç (varsayılan)
title Metin Fare üstüne gelince görünür
download - Dosyayı indir

Görseller ve Medya

HTML ile resim, video ve ses dosyalarını sayfanıza ekleyebilirsiniz.

Resimler (img)

gorseller.html

<!-- Temel resim -->
<img src="resim.jpg" alt="Resim açıklaması">

<!-- Boyut belirtme -->
<img src="banner.jpeg" alt="Logo" width="200" height="100">

<!-- Dış kaynak resim -->
<img src="https://example.com/resim.jpg" alt="Dış resim">

<!-- Figure ile başlık ekleme -->
<figure>
    <img src="manzara.jpg" alt="Güzel manzara">
    <figcaption>Kapadokya'dan bir görünüm</figcaption>
</figure>

Video ve Ses

medya.html

<!-- Video -->
<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Tarayıcınız video etiketini desteklemiyor.
</video>

<!-- Otomatik oynat, döngü, sessiz -->
<video autoplay loop muted>
    <source src="arkaplan.mp4" type="video/mp4">
</video>

<!-- Ses -->
<audio controls>
    <source src="muzik.mp3" type="audio/mpeg">
    Tarayıcınız audio etiketini desteklemiyor.
</audio>

<!-- YouTube embed -->
<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0" allowfullscreen>
</iframe>
🔹 Dikkat: Her zaman alt özelliği kullanın! Erişilebilirlik ve SEO için çok önemlidir.

Tablolar

Tablolar, verileri satır ve sütunlar halinde düzenlemek için kullanılır.

tablolar.html

<table border="1">
    <!-- Tablo başlığı -->
    <thead>
        <tr>
            <th>Ad</th>
            <th>Soyad</th>
            <th>Not</th>
        </tr>
    </thead>
    
    <!-- Tablo gövdesi -->
    <tbody>
        <tr>
            <td>Ali</td>
            <td>Yılmaz</td>
            <td>85</td>
        </tr>
        <tr>
            <td>Ayşe</td>
            <td>Demir</td>
            <td>92</td>
        </tr>
    </tbody>
    
    <!-- Tablo altbilgisi -->
    <tfoot>
        <tr>
            <td colspan="2">Ortalama</td>
            <td>88.5</td>
        </tr>
    </tfoot>
</table>

Hücre Birleştirme

hucre_birlestirme.html

<table border="1">
    <tr>
        <th colspan="3">Öğrenci Bilgileri</th> <!-- 3 sütun birleştir -->
    </tr>
    <tr>
        <td rowspan="2">Ali</td> <!-- 2 satır birleştir -->
    </tr>
    <tr>
        <td>Matematik</td>
        <td>85</td>
    </tr>
    <tr>
        <td>Fizik</td>
        <td>90</td>
    </tr>
</table>

Formlar

Formlar, kullanıcıdan veri almak için kullanılır. Giriş yapma, kayıt olma, arama gibi işlemler için gereklidir.

form_temel.html

<form action="/kayit" method="POST">
    <!-- Metin girişi -->
    <label for="isim">İsim:</label>
    <input type="text" id="isim" name="isim" placeholder="Adınızı girin" required>
    
    <!-- E-posta -->
    <label for="email">E-posta:</label>
    <input type="email" id="email" name="email" required>
    
    <!-- Şifre -->
    <label for="sifre">Şifre:</label>
    <input type="password" id="sifre" name="sifre" minlength="6" required>
    
    <!-- Sayı -->
    <label for="yas">Yaş:</label>
    <input type="number" id="yas" name="yas" min="1" max="100">
    
    <!-- Tarih -->
    <label for="dogum">Doğum Tarihi:</label>
    <input type="date" id="dogum" name="dogum">
    
    <!-- Gönder butonu -->
    <button type="submit">Kayıt Ol</button>
</form>

Input Türleri

type Açıklama Örnek
text Metin girişi İsim, adres
email E-posta user@example.com
password Şifre (gizli) •••••
number Sayı 1, 100
date Tarih seçici 2026-01-15
checkbox Onay kutusu 🔹 Kabul ediyorum
radio Tek seçim 🔹 Erkek 0 Kadın
file Dosya yükleme Dosya seç
range Kaydırıcı ¦¦¦?¦¦¦
color Renk seçici 🔹

Gelişmiş Form Elemanları

form_gelismis.html

<!-- Seçim kutusu -->
<label for="sehir">Şehir:</label>
<select id="sehir" name="sehir">
    <option value="">Seçiniz...</option>
    <option value="istanbul">İstanbul</option>
    <option value="ankara">Ankara</option>
    <option value="izmir">İzmir</option>
</select>

<!-- Çoklu satır metin -->
<label for="mesaj">Mesajınız:</label>
<textarea id="mesaj" name="mesaj" rows="5" cols="40"></textarea>

<!-- Onay kutusu -->
<input type="checkbox" id="sozlesme" name="sozlesme" required>
<label for="sozlesme">Sözleşmeyi kabul ediyorum</label>

<!-- Radio butonlar -->
<p>Cinsiyet:</p>
<input type="radio" id="erkek" name="cinsiyet" value="erkek">
<label for="erkek">Erkek</label>

<input type="radio" id="kadin" name="cinsiyet" value="kadin">
<label for="kadin">Kadın</label>

<!-- Fieldset ile gruplama -->
<fieldset>
    <legend>İletişim Bilgileri</legend>
    <input type="text" placeholder="Telefon">
    <input type="email" placeholder="E-posta">
</fieldset>

Semantik HTML

Semantik etiketler, içeriğin anlamını belirtir. SEO ve erişilebilirlik için önemlidir.

semantik.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Semantik HTML</title>
</head>
<body>
    <!-- Sayfa başlığı -->
    <header>
        <nav>
            <a href="/">Ana Sayfa</a>
            <a href="/hakkimizda">Hakkımızda</a>
            <a href="/iletisim">İletişim</a>
        </nav>
    </header>
    
    <!-- Ana içerik -->
    <main>
        <article>
            <h1>Makale Başlığı</h1>
            <p>Makale içeriği...</p>
            
            <section>
                <h2>Alt Bölüm</h2>
                <p>Bölüm içeriği...</p>
            </section>
        </article>
        
        <aside>
            <h3>İlgili Yazılar</h3>
            <ul>
                <li><a href="#">Yazı 1</a></li>
                <li><a href="#">Yazı 2</a></li>
            </ul>
        </aside>
    </main>
    
    <!-- Sayfa altbilgisi -->
    <footer>
        <p>© 2026 FediaTech</p>
    </footer>
</body>
</html>

Semantik Etiketler

Etiket Açıklama
<header> Sayfa veya bölüm başlığı
<nav> Navigasyon bağlantıları
<main> Ana içerik (sayfada tek olmalı)
<article> Bağımsız içerik (blog yazısı, haber)
<section> Tematik içerik grubu
<aside> Yan içerik (kenar çubuğu)
<footer> Alt bilgi (telif hakkı, iletişim)

CSS'e Giriş

CSS (Cascading Style Sheets), HTML elementlerini biçimlendirmek ve sayfa düzenini oluşturmak için kullanılır.

style.css

/* Element seçici */
p {
    color: #333;
    font-size: 16px;
    line-height: 1.5;
}

/* Class seçici */
.kart {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ID seçici */
#baslik {
    color: blue;
    text-align: center;
}
🔹 Bilgi: CSS öğrenmeye devam etmek için sonraki dersleri takip edin.