HTML Notları ve İpuçları

İçindekiler

Belge Yapısı
Metin Biçimlendirme
Bağlantılar
Resimler
Listeler
Tablolar
Formlar
Anlamsal Öğeler
Multimedya
Meta Etiketleri

Belge Yapısı

Temel HTML Şablonu

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belge Başlığı</title>
</head>
<body>
    <!-- İçerik buraya gelecek -->
</body>
</html>

Metin Biçimlendirme

Başlıklar

<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>

Paragraflar ve Satır Sonları

<p>Bu bir paragraftır.</p>
<p>Bu başka bir paragraftır.<br>Satır sonu ile.</p>

Metin Stilleri

<strong>Kalın metin</strong>
<em>İtalik metin</em>
<u>Altı çizili metin</u>
<mark>Vurgulanmış metin</mark>
<small>Daha küçük metin</small>
<del>Silinmiş metin</del>
<ins>Eklenmiş metin</ins>
<sub>Alt simge</sub>
<sup>Üst simge</sup>

Bağlantılar

Temel Bağlantı

<a href="https://www.ornek.com">Ornek.com'u Ziyaret Et</a>

Hedefli Bağlantı

<a href="https://www.ornek.com" target="_blank">Yeni Sekmede Aç</a>

E-posta Bağlantısı

<a href="mailto:ornek@ornek.com">E-posta Gönder</a>

Resimler

Temel Resim

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

Genişlik ve Yükseklik Belirtilmiş Resim

<img src="resim.jpg" alt="Açıklama" width="300" height="200">

Tıklanabilir Resim

<a href="https://www.ornek.com">
    <img src="resim.jpg" alt="Bana tıkla">
</a>

Listeler

Sırasız Liste

<ul>
    <li>Öğe 1</li>
    <li>Öğe 2</li>
    <li>Öğe 3</li>
</ul>

Sıralı Liste

<ol>
    <li>Birinci öğe</li>
    <li>İkinci öğe</li>
    <li>Üçüncü öğe</li>
</ol>

Tanım Listesi

<dl>
    <dt>Terim 1</dt>
    <dd>Tanım 1</dd>
    <dt>Terim 2</dt>
    <dd>Tanım 2</dd>
</dl>

Tablolar

Temel Tablo

<table>
    <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
    </tr>
    <tr>
        <td>Satır 1, Hücre 1</td>
        <td>Satır 1, Hücre 2</td>
    </tr>
    <tr>
        <td>Satır 2, Hücre 1</td>
        <td>Satır 2, Hücre 2</td>
    </tr>
</table>

Başlıklı ve Bölümlü Tablo

<table>
    <caption>Tablo Başlığı</caption>
    <thead>
        <tr>
            <th>Başlık 1</th>
            <th>Başlık 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Gövde Satır 1, Hücre 1</td>
            <td>Gövde Satır 1, Hücre 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Alt Bilgi Satır 1, Hücre 1</td>
            <td>Alt Bilgi Satır 1, Hücre 2</td>
        </tr>
    </tfoot>
</table>

Formlar

Temel Form

<form action="/gonder" method="post">
    <label for="ad">Ad:</label>
    <input type="text" id="ad" name="ad" required>

    <label for="eposta">E-posta:</label>
    <input type="email" id="eposta" name="eposta" required>

    <input type="submit" value="Gönder">
</form>

Form Öğeleri

<form>
    <input type="text" name="metin">
    <input type="password" name="sifre">
    <input type="radio" name="radyo" value="secenek1">
    <input type="checkbox" name="onay_kutusu">
    <input type="file" name="dosya">
    <input type="number" name="sayi">
    <input type="date" name="tarih">
    <input type="color" name="renk">
    <input type="range" name="aralik" min="0" max="100">

    <select name="secim">
        <option value="secenek1">Seçenek 1</option>
        <option value="secenek2">Seçenek 2</option>
    </select>

    <textarea name="metin_alani" rows="4" cols="50"></textarea>

    <button type="submit">Gönder</button>
    <button type="reset">Sıfırla</button>
</form>

Anlamsal Öğeler

Yapısal Anlamsal Öğeler

<header>Üst bilgi içeriği</header>
<nav>Gezinme içeriği</nav>
<main>
    <article>Makale içeriği</article>
    <section>Bölüm içeriği</section>
    <aside>Yan içerik</aside>
</main>
<footer>Alt bilgi içeriği</footer>

Metin Anlamsal Öğeler

<figure>
    <img src="resim.jpg" alt="Açıklama">
    <figcaption>Şekil başlığı</figcaption>
</figure>

<time datetime="2023-06-19">19 Haziran 2023</time>

<address>
    İletişim bilgileri
</address>

Multimedya

Video

<video width="320" height="240" controls>
    <source src="film.mp4" type="video/mp4">
    <source src="film.ogg" type="video/ogg">
    Tarayıcınız video etiketini desteklemiyor.
</video>

Ses

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

Iframe

<iframe src="https://www.ornek.com" width="500" height="300"></iframe>

Meta Etiketleri

Temel Meta Etiketleri

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Sayfa açıklaması">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="Ahmet Mehmet">
</head>

Open Graph Meta Etiketleri

<head>
    <meta property="og:title" content="Başlık Buraya">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://www.ornek.com/">
    <meta property="og:image" content="http://ornek.com/resim.jpg">
    <meta property="og:description" content="Açıklama Buraya">
</head>