HTML'ye giriş

👉 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>HTML'ye Giriş</title>
</head>
<body>
    <header>
        <h1>Hoş Geldiniz!</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#hakkinda">Hakkında</a></li>
            <li><a href="#iletisim">İletişim</a></li>
        </ul>
    </nav>
    <main>
        <section id="hakkinda">
            <h2>Hakkında</h2>
            <p>Bu, HTML'ye giriş yapmak isteyenler için bir rehberdir.</p>
        </section>
        <section id="iletisim">
            <h2>İletişim</h2>
            <p>Bize ulaşmak için <a href="mailto:ornek@ornek.com">ornek@ornek.com</a> adresine e-posta gönderin.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Tüm hakları saklıdır.</p>
    </footer>
</body>
</html>

⛔⛔⛔⛔⛔⛔

👉Temel Etiketler ve Anlamları:

  1. <!DOCTYPE html>: Bu satır, belge türünü belirtir ve tarayıcıya bu belgenin HTML5 olduğunu bildirir.

  2. <html lang="tr">: HTML belgesinin başlangıcını belirtir ve dilini Türkçe olarak ayarlar.

  3. <head>: Belge hakkında meta bilgileri içerir. Bu bölümde başlık, karakter seti ve diğer meta veriler bulunur.

  4. <meta charset="UTF-8">: Belgenin karakter setini UTF-8 olarak ayarlar, bu da Türkçe karakterlerin doğru görüntülenmesini sağlar.

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sayfanın farklı cihazlarda (özellikle mobil) düzgün görüntülenmesini sağlar.

  6. <title>: Tarayıcı sekmesinde görünen sayfa başlığını belirtir.

  7. <body>: Sayfanın görünen içeriğini içerir. Burada başlık, paragraflar, listeler vb. bulunur.

  8. <header>: Genellikle sayfanın başlık bölümünü içerir. Burada bir site başlığı veya navigasyon menüsü olabilir.

  9. <nav>: Sayfa içinde gezinme bağlantılarını içerir. Genellikle bir menü şeklindedir.

  10. <main>: Sayfanın ana içeriğini içerir. Anahtar bölümler burada yer alır.

  11. <section>: İçeriğin bölümlerini belirtir. Her bölüm belirli bir konuyu içerir.

  12. <footer>: Sayfanın alt bilgisini içerir. Genellikle telif hakkı bilgileri veya iletişim bilgileri bulunur.

⛔⛔⛔⛔⛔⛔

👉Ek HTML Etiketleri ve Açıklamaları:

Metin ve Biçimlendirme Etiketleri:

<h1> - <h6>: Başlık etiketleri
<h1> en önemli başlık,
<h6> ise en az önemli başlık anlamına gelir.
👇
<h1>Birinci Başlık</h1>
<h2>İkinci Başlık</h2>

⛔⛔⛔⛔⛔⛔

<p>: Paragraf etiketi, metin bloklarını belirtir.

👇

<p>Bu bir paragraftır.</p>


⛔⛔⛔⛔⛔⛔

<br>: Satır sonu etiketi, metni yeni bir satıra geçirir.

👇

Birinci satır.<br>İkinci satır.


⛔⛔⛔⛔⛔⛔

<strong> ve <b>: Kalın metin için kullanılır. <strong> önemli metin vurgusu yaparken, <b> sadece kalın yapar.

👇

<strong>Önemli metin</strong> <b>Kalın metin</b>


⛔⛔⛔⛔⛔⛔

<em> ve <i>: İtalik metin için kullanılır. <em> vurgulamak için, <i> stilistik amaçlar için kullanılır.

👇

<em>Vurgulanmış metin</em> <i>İtalik metin</i>


⛔⛔⛔⛔⛔⛔

Liste Etiketleri:

<ul> ve <ol>: Sırasız (unordered) ve sıralı (ordered) liste etiketleri.

👇

<ul> 

<li>Birinci madde</li> 

  <li>İkinci madde</li>

</ul>


<ol>

<li>Birinci madde</li>

<li>İkinci madde</li>

</ol>

<li>: Liste öğesi etiketi, <ul> veya <ol> içinde kullanılır.

⛔⛔⛔⛔⛔⛔


Görsel ve Medya Etiketleri:

<img>: Görüntü etiketi, bir resim eklemek için kullanılır.

👇

<img src="ornek.jpg" alt="Örnek Resim" width="500" height="600">


⛔⛔⛔⛔⛔⛔

<audio> ve <video>: Ses ve video dosyalarını eklemek için kullanılır.

👇

<audio controls>

<source src="ses.mp3" type="audio/mpeg">

Tarayıcınız ses etiketini desteklemiyor. 

</audio>

<video width="320" height="240" controls> 

<source src="video.mp4" type="video/mp4"> 

 Tarayıcınız video etiketini desteklemiyor. 

</video>


⛔⛔⛔⛔⛔⛔

Bağlantı ve Form Etiketleri:

<a>: Bağlantı etiketi, başka bir sayfaya veya aynı sayfa içindeki bir yere yönlendirmek için kullanılır.

👇

<a href="https://www.ornek.com">Ornek Sitesi</a>


⛔⛔⛔⛔⛔⛔

<form>: Form etiketi, kullanıcı girdilerini toplamak için kullanılır.

👇

<form action="/submit" method="post"> 

  <label for="isim">İsim:</label>

<input type="text" id="isim" name="isim"><br><br> 

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

</form>


⛔⛔⛔⛔⛔⛔

<input>: Kullanıcıdan veri almak için çeşitli türlerdeki girdi elemanlarını belirtir.

👇

<input type="text" name="isim">

<input type="password" name="sifre">

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


⛔⛔⛔⛔⛔⛔

<label>: Form elemanları için etiket sağlar.

👇

<label for="isim">İsim:</label>

<input type="text" id="isim" name="isim">

⛔⛔⛔⛔⛔⛔

👉Temel Bir HTML Sayfasının Gelişmiş Şablonu


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML'ye Giriş</title>
</head>
<body>
    <header>
        <h1>Hoş Geldiniz!</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#hakkinda">Hakkında</a></li>
            <li><a href="#iletisim">İletişim</a></li>
        </ul>
    </nav>
    <main>
        <section id="hakkinda">
            <h2>Hakkında</h2>
            <p>Bu, HTML'ye giriş yapmak isteyenler için bir rehberdir.</p>
            <img src="ornek.jpg" alt="Örnek Resim" width="500" height="300">
            <p>İşinizi kolaylaştırmak için bazı <strong>önemli</strong> ve <em>vurgulanmış</em> metin örnekleri.</p>
            <p>Bir liste örneği:</p>
            <ul>
                <li>Madde 1</li>
                <li>Madde 2</li>
            </ul>
            <p>Bir sıralı liste örneği:</p>
            <ol>
                <li>Madde 1</li>
                <li>Madde 2</li>
            </ol>
        </section>
        <section id="iletisim">
            <h2>İletişim</h2>
            <p>Bize ulaşmak için <a href="mailto:ornek@ornek.com">ornek@ornek.com</a> adresine e-posta gönderin.</p>
            <form action="/submit" method="post">
                <label for="isim">İsim:</label>
                <input type="text" id="isim" name="isim"><br><br>
                <input type="submit" value="Gönder">
            </form>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Tüm hakları saklıdır.</p>
    </footer>
</body>
</html>


Bu şablon, HTML'nin temel yapı taşlarını ve nasıl kullanılacağını anlamak için iyi bir başlangıçtır. Web siteni geliştirmek için CSS (Cascading Style Sheets) ve JavaScript gibi teknolojileri de öğrenmek yararlı olacaktır. Eğer daha fazla detay veya belirli bir konu hakkında bilgi istersen, takip etmeyi ihmal etme.


Bu temel şablon ve etiketlerle HTML'ye sağlam bir giriş yapabilirsin. Daha ileri seviye HTML, CSS ve JavaScript kullanarak siteni daha da geliştirebilirsin. Başarılar!

Yorumlar

Yorum Gönder

Yorum yaptığınız için Teşekkür ederiz

Popüler Yayınlar