Altın Konu Basit Şekilde HTML Öğren

lHezarfeNl · 29 Kas 2023

HTML (Hypertext Markup Language), web sayfalarını oluşturmak için kullanılan temel bir işaretleme dilidir. HTML, metin, resim, bağlantılar ve diğer öğeleri kullanarak sayfaların yapısını tanımlar. İşte basit bir HTML örneği:

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>

    <header>
        <h1>Merhaba Dünya!</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">Anasayfa</a></li>
            <li><a href="#">Hakkında</a></li>
            <li><a href="#">İletişim</a></li>
        </ul>
    </nav>

    <section>
        <h2>Hoş Geldiniz</h2>
        <p>Bu benim ilk web sayfam. Sizleri burada görmekten mutluluk duyuyorum!</p>
    </section>

    <footer>
        <p>&copy; 2023 İlk Web Sayfam. Tüm hakları saklıdır.</p>
    </footer>

</body>
</html>

Yukarıdaki örnek, temel HTML yapısını göstermektedir. Şimdi, temel etiketleri açıklamak istiyorum:

<!DOCTYPE html>: HTML5 standardına göre belgenin türünü belirten bir deklarasyon.
<html lang="tr">: HTML belgesini başlatan etiket. lang özelliği ile dil belirtilir.
<head>: Sayfanın başlık, karakter seti ve stil gibi meta bilgilerini içeren bölüm.
<meta charset="UTF-8">: Belgenin karakter setini belirten meta etiketi.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Mobil cihazlarda düzgün görüntülenme için viewport tanımı.
<title>: Sayfanın başlığını belirten etiket.
<body>: Sayfanın içeriğini içeren bölüm.
<header>, <nav>, <section>, <footer>: Sayfa içeriğini daha iyi organize etmek için kullanılan bölüm etiketleri.
<h1>, <h2>: Başlık etiketleri. <h1> en önemli başlığı temsil eder.

Bu örneği bir HTML dosyasına yapıştırıp bir tarayıcıda açarak sonucu görebilirsiniz. HTML, öğrenmesi kolay bir dil olduğu için bu temel yapıyı anladıktan sonra farklı etiketleri ve özellikleri eklemek daha da kolaylaşacaktır.

Resim Eklemek

HTML:

<section>
    <h2>Harika Bir Manzara</h2>
    <img src="manzara.jpg" alt="Harika bir manzara resmi">
</section>

Bağlantı Eklemek

HTML:

<nav>
    <ul>
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Hakkında</a></li>
        <li><a href="#">Galeri</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</nav>

Liste Oluşturmak

HTML:

<section>
    <h2>Favori Meyvelerim</h2>
    <ul>
        <li>Elma</li>
        <li>Armut</li>
        <li>Çilek</li>
    </ul>
</section>

Form Eklemek

HTML:

<section>
    <h2>İletişim Formu</h2>
    <form>
        <label for="ad">Adınız:</label>
        <input type="text" id="ad" name="ad" required>

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

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

Bu örneklerde, resim eklemek için <img>, bağlantı eklemek için <a>, liste oluşturmak için <ul> ve <li>, form eklemek için <form>, metin girişi için <input> gibi farklı HTML etiketlerini kullanabilirsiniz. Her örnek, sayfanın farklı bir bölümünü temsil eder ve sayfa içeriğini zenginleştirmek için kullanılan temel yapıları gösterir. Beğenirseniz bu içeriklerin devamı gelir