HTML Eğitimi - Ders 2: HTML Temel Kullanımı

HTML'de Temel Başlık Kullanımı

HTML'de başlıklar, sayfa içeriğini bölümlere ayırmak ve okuyucular için düzenli bir yapı oluşturmak için kullanılır. Başlıklar <h1> ile <h6> arasında değişir.

Adım Adım: Başlıklar Nasıl Kullanılır?

1. Adım 1: Bir başlık tanımlamak için uygun etiketi seçin (<h1>, <h2>, vb.).
2. Adım 2: Başlık etiketinin içine metni yerleştirin.
3. Adım 3: Yapıyı düzenli tutmak için başlık seviyelerini mantıklı bir şekilde kullanın.

Örnek bir başlık kullanımı:

<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
<h3>Daha Alt Başlık</h3>

HTML'de Paragraflar ile Çalışmak

Paragraflar, metinleri düzenlemek için kullanılan temel HTML elementleridir. Paragraflar <p> etiketi ile tanımlanır.

Adım Adım: Paragraflar Nasıl Kullanılır?

1. Adım 1: <p> etiketini kullanarak paragrafınızı başlatın.
2. Adım 2: Paragrafın içine metninizi yazın.
3. Adım 3: Paragrafı </p> etiketiyle kapatın.

Örnek:

<p>Bu bir paragraf örneğidir.</p>

HTML'de Listeler

HTML'de listeler, bilgileri sıralı veya sırasız bir şekilde düzenlemek için kullanılır. İki temel liste türü vardır:

• <ul>: Sırasız liste (madde işaretli).
• <ol>: Sıralı liste (numaralı).

Adım Adım: Liste Nasıl Oluşturulur?

1. Adım 1: Listeyi başlatmak için uygun etiketi kullanın (<ul> veya <ol>).
2. Adım 2: Liste elemanlarını <li> etiketi ile sıralayın.
3. Adım 3: Listeyi tamamlamak için ilgili kapanış etiketini kullanın (</ul> veya </ol>).

Örnek: Sırasız liste:

<ul>
    <li>Madde 1</li>
    <li>Madde 2</li>
    <li>Madde 3</li>
</ul>

Örnek: Sıralı liste:

<ol>
    <li>Birinci madde</li>
    <li>İkinci madde</li>
    <li>Üçüncü madde</li>
</ol>

HTML'de Bağlantılar

HTML'deki <a> etiketi, web sayfaları arasında bağlantı kurmak için kullanılır. Bağlantılar, genellikle başka bir sayfaya veya dış bir kaynağa yönlendiren etkileşimli öğelerdir.

Adım Adım: Bağlantı Nasıl Eklenir?

1. Adım 1: <a> etiketini kullanarak bağlantıyı başlatın.
2. Adım 2: Bağlantının yönlendireceği URL'yi href özelliği ile belirtin.
3. Adım 3: Bağlantı metnini <a> etiketi arasına yazın.
4. Adım 4: Bağlantıyı tamamlamak için </a> etiketini ekleyin.

Örnek:

<a href="https://www.example.com">Example Web Sitesi</a>

Bağlantılar ayrıca başka bir sekmede açılacak şekilde ayarlanabilir:

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

HTML'de Görseller

Görseller web sayfalarına <img> etiketi ile eklenir. Bu etiket, görüntüyü belirtilen bir dosyadan alır ve sayfada gösterir.

Adım Adım: Görsel Nasıl Eklenir?

1. Adım 1: <img> etiketini kullanarak görseli eklemeye başlayın.
2. Adım 2: Görsel dosyasının yolunu src özelliği ile belirtin.
3. Adım 3: Görselin alternatif metnini alt özelliği ile ekleyin (görsel yüklenemezse bu metin görüntülenir).

Örnek:

<img src="resim.jpg" alt="Bir manzara resmi">

Görselin boyutunu değiştirmek için width ve height özelliklerini de kullanabilirsiniz:

<img src="resim.jpg" alt="Bir manzara resmi" width="500" height="300">

HTML'de Formlar

Formlar, kullanıcıdan veri toplamak için HTML'de kullanılan önemli öğelerdir. Formlar, <form> etiketi ile başlatılır ve içindeki alanlar ile kullanıcıdan bilgi alınır.

Adım Adım: Form Nasıl Oluşturulur?

1. Adım 1: Formu başlatmak için <form> etiketini kullanın.
2. Adım 2: Form elemanlarını (input, select, textarea vb.) ekleyin.
3. Adım 3: Formu göndermek için bir <button> veya <input type="submit"> kullanın.

Örnek:

<form action="submit_form.php" method="post">
    <label for="name">Adınız:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Gönder">
</form>

HTML'de Tablo Kullanımı

Tablolar, verileri düzenlemek ve görsel olarak sunmak için HTML'de yaygın olarak kullanılan elemanlardır. <table> etiketi ile tablo oluşturulabilir ve içindeki satırlar ve hücreler <tr> ve <td> etiketleriyle tanımlanır.

Adım Adım: Tablo Nasıl Oluşturulur?

1. Adım 1: <table> etiketini kullanarak tabloyu başlatın.
2. Adım 2: Tablo başlıkları için <th> etiketini kullanın (isteğe bağlı).
3. Adım 3: Satırları oluşturmak için <tr> etiketini kullanın.
4. Adım 4: Her hücreyi <td> etiketi ile ekleyin.
5. Adım 5: Tabloyu </table> etiketi ile kapatın.

Örnek:

<table border="1">
    <tr>
        <th>Ad</th>
        <th>Yaş</th>
    </tr>
    <tr>
        <td>Ali</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Ayşe</td>
        <td>30</td>
    </tr>
</table>

Bu örnekte, iki sütun (Ad ve Yaş) ve iki satır (Ali ve Ayşe) olan bir tablo oluşturulmuştur.

HTML'de Yorumlar

HTML yorumları, kodun içine eklenen açıklamalardır. Yorumlar, tarayıcı tarafından görsel olarak gösterilmez, ancak kodu yazan kişi veya diğer geliştiriciler tarafından referans olarak kullanılabilir.

Adım Adım: Yorum Nasıl Eklenir?

1. Adım 1: Yorum eklemek için <!-- ile başlayın.
2. Adım 2: Yorumunuzu yazın.
3. Adım 3: Yorumunuzu --> ile bitirin.

Örnek:

<!-- Bu bir yorumdur ve tarayıcıda görünmez -->

Yorumlar, HTML kodunda açıklama eklemek için son derece faydalıdır ve kodu daha okunabilir kılar.

HTML'de Meta Etiketleri

HTML'deki <meta> etiketi, belgenin başlık kısmında yer alan önemli bilgiler sunar. Meta etiketleri, karakter seti, sayfa açıklaması, anahtar kelimeler ve yazar bilgileri gibi verileri içerir.

Adım Adım: Meta Etiketi Nasıl Kullanılır?

1. Adım 1: <meta> etiketini kullanarak gerekli meta bilgilerini belirtin.
2. Adım 2: name veya http-equiv gibi özellikleri kullanarak bilgi türünü belirtin.
3. Adım 3: content özelliği ile meta bilginin değerini girin.

Örnek:

<meta charset="UTF-8">
<meta name="description" content="Bu sayfa HTML eğitimi içermektedir">
<meta name="keywords" content="HTML, eğitim, başlangıç">
<meta name="author" content="Ahmet Yılmaz">

Bu etiketler, sayfanın başlık kısmında yer alır ve SEO (arama motoru optimizasyonu) açısından önemlidir.

HTML'de iframe Kullanımı

HTML'deki <iframe> etiketi, başka bir web sayfasını, video veya harita gibi içerikleri, mevcut sayfanın içine gömmek için kullanılır.

Adım Adım: iframe Nasıl Kullanılır?

1. Adım 1: <iframe> etiketini kullanarak iframe eklemeye başlayın.
2. Adım 2: src özelliği ile iframe içeriğinin URL'sini belirtin.
3. Adım 3: width ve height özellikleriyle iframe boyutlarını ayarlayın.

Örnek:

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>

Bu örnekte, YouTube'dan bir video iframe içinde sayfaya gömülmüştür.

Bu dersimizde HTML tabloları, yorumlar, meta etiketleri ve iframe kullanımı hakkında bilgi aldık. Bir sonraki dersimizde, HTML form öğelerini ve formlar ile kullanıcı etkileşimlerini derinlemesine inceleyeceğiz. Takipte kalın!