Web Siten İçin Faydalı HTML Kodları

Yorum yapılmamış


HTML (HyperText Markup Language), web sayfalarını oluşturmak için kullanılan bir işaretleme dilidir. HTML, metin, resimler, bağlantılar ve diğer medya öğelerini düzenlemenizi ve web tarayıcıları tarafından anlaşılabilir hale getirmenizi sağlar. HTML kodları etiketler (tags) kullanılarak oluşturulur ve tarayıcılara sayfanın nasıl görüntülenmesi gerektiğini belirtir.

Başlık ve Paragraf

Başlık ve paragraf oluşturmak için HTML kodlarını kullanabilirsiniz. İşte basit bir başlık ve paragraf örneği:

<!DOCTYPE html>
<html>
<head>
    <title>Başlık ve Paragraf Örneği</title>
</head>
<body>
    <h1>Başlık 1</h1>
    <p>Bu bir paragraf metnidir. HTML kullanarak metinleri web sayfalarında düzenlemek çok kolaydır.</p>
</body>
</html>

Yukarıdaki HTML kodu, bir başlık ve bir paragraf içerir. <h1> etiketi başlığı temsil eder ve tarayıcıda genellikle büyük ve kalın bir şekilde görüntülenir. <p> etiketi ise bir paragrafı temsil eder ve metin paragraf içinde düzenlenir.

Tarayıcıda görünen sonuç şu şekilde olacaktır:

Başlık 1

Bu bir paragraf metnidir. HTML kullanarak metinleri web sayfalarında düzenlemek çok kolaydır.

Bu örnek, başlık ve paragraf etiketlerini kullanarak metinlerinizi web sayfalarında düzenlemenizi gösterir.

Bağlantılar

Bağlantılar (linkler) oluşturmak için HTML’de <a> (anchor) etiketini kullanabilirsiniz. İşte bir bağlantı oluşturmanın temel yapısı:

<a href="hedef_url">Bağlantı Metni</a>

Bağlantı oluştururken iki önemli öğe vardır:

  1. href: Bu özellik, bağlantının nereye gideceğini belirtir. Burada “hedef_url” kısmına, bağlantının yönlendirilmesini istediğiniz web sayfasının URL’sini eklersiniz. Örneğin:
<a href="https://www.example.com">Example.com'a Git</a>
  1. Bağlantı Metni: Bu, kullanıcıların tıkladığında gördükleri metni temsil eder. Kullanıcılar bu metni tıklayarak bağlantıya erişebilirler.

İşte basit bir bağlantı örneği:

<!DOCTYPE html>
<html>
<head>
    <title>Bağlantı Örneği</title>
</head>
<body>
    <p>Web sayfalarını öğrenmek için <a href="https://www.w3schools.com">W3Schools</a>'a göz atın.</p>
</body>
</html>

Bu kod, “Web sayfalarını öğrenmek için W3Schools’a göz atın.” metnini içeren bir paragraf oluşturur ve bu metni “W3Schools” adlı bir web sitesine bağlantıya dönüştürür. Kullanıcılar bu bağlantıyı tıklayarak ilgili web sitesine yönlendirilecektir.

Resim Ekleme

HTML ile bir resim eklemek için <img> etiketini kullanabilirsiniz. İşte temel bir resim eklemek için HTML kodu:

<img src="resim_url" alt="Resim açıklaması">

Bu kodun temel parçaları şunlardır:

  • src: Bu özellik, görüntü dosyasının URL’sini belirtir. “resim_url” kısmına, eklemek istediğiniz resmin çevrimiçi konumunu eklersiniz.
  • alt: Bu özellik, resmin açıklamasını içerir. Kullanıcılar görseli göremediğinde veya ekran okuyucu kullandıklarında açıklama metni görüntülenir. Resmin açıklaması, resmin içeriği hakkında bilgi vermelidir.

İşte bir örnek:

<!DOCTYPE html>
<html>
<head>
    <title>Resim Ekleme Örneği</title>
</head>
<body>
    <h1>Web Geliştirme</h1>
    <p>Web geliştirmeyi öğrenmek için aşağıdaki resmi inceleyin:</p>
    <img src="https://www.example.com/resim.jpg" alt="Web geliştirme resmi">
</body>
</html>

Bu kod, bir başlık (<h1>), bir paragraf (<p>) ve bir resim (<img>) içerir. Kullanıcılar resim açıklaması ile belirtilen “Web geliştirme resmi”ne tıklayarak resme ulaşabilirler.

Listeler

HTML ile sırasız (unordered) ve sıralı (ordered) listeler oluşturabilirsiniz. İşte her iki tür liste için temel kullanım:

  1. Sırasız Liste (unordered list – <ul>): Sırasız listeler, maddelerin sırasının önemli olmadığı durumlarda kullanılır. Her madde genellikle bir nokta işareti veya simge ile başlar.
   <ul>
       <li>Madde 1</li>
       <li>Madde 2</li>
       <li>Madde 3</li>
   </ul>

Yukarıdaki kod, tarayıcıda sırasız bir liste olarak görünecektir:

  • Madde 1
  • Madde 2
  • Madde 3
  1. Sıralı Liste (ordered list – <ol>): Sıralı listeler, maddelerin belirli bir sıraya sahip olduğu durumlarda kullanılır. Her madde genellikle bir numara ile başlar.
   <ol>
       <li>Madde 1</li>
       <li>Madde 2</li>
       <li>Madde 3</li>
   </ol>

Yukarıdaki kod, tarayıcıda sıralı bir liste olarak görünecektir:

  1. Madde 1
  2. Madde 2
  3. Madde 3

Her iki liste türü de iç içe yerleştirilebilir veya karmaşık yapılar oluşturmak için kullanılabilir. li etiketleri, her liste maddesini temsil eder.

Formlar

HTML ile web sayfalarında formlar oluşturabilirsiniz. Formlar, kullanıcıların veri girmesine veya seçmesine olanak tanır ve bu verileri sunucuya iletmek için kullanılır. İşte temel bir form örneği ve bazı önemli form elemanları:

<!DOCTYPE html>
<html>
<head>
    <title>Form Örneği</title>
</head>
<body>
    <h1>İletişim Formu</h1>
    <form action="form_isleme.php" method="POST">
        <label for="ad">Adınız:</label>
        <input type="text" id="ad" name="ad" required><br><br>

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

        <label for="mesaj">Mesajınız:</label><br>
        <textarea id="mesaj" name="mesaj" rows="4" cols="50" required></textarea><br><br>

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

Bu kod örneğinde:

  • <form> etiketi, bir formu tanımlar. action özelliği, formun gönderildiğinde verilerin nereye gönderileceğini belirtir. method özelliği, verilerin gönderilme yöntemini belirtir (genellikle “POST” veya “GET” kullanılır).
  • <label> etiketleri, form alanlarının yanında metin etiketlerini temsil eder. for özelliği, bu metin etiketini ilgili form alanına bağlar.
  • <input> etiketleri, metin girişi, e-posta girişi gibi form alanlarını oluşturur. type özelliği, hangi türde veri girişi yapılacağını belirtir. id ve name özellikleri, bu form alanlarını tanımlar. required özelliği, bu alanların boş bırakılamayacağını belirtir.
  • <textarea> etiketi, çok satırlı metin girişi için kullanılır.
  • <input type="submit">, formun gönderme düğmesini oluşturur.

Kullanıcı bu formu doldurup “Gönder” düğmesine tıkladığında, form verileri belirtilen action URL’sine gönderilecektir. Bu verileri işlemek için bir sunucu tarafı betiği gereklidir (örneğin, PHP, Python, veya başka bir programlama dili).

Tablolar

HTML ile tablolar oluşturmak için <table>, <tr>, <th>, ve <td> gibi etiketleri kullanabilirsiniz. İşte temel bir tablo oluşturma örneği ve bu örnekte kullanılan temel etiketlerin açıklamaları:

<!DOCTYPE html>
<html>
<head>
    <title>Tablo Örneği</title>
</head>
<body>
    <h1>Ürün Listesi</h1>
    <table border="1">
        <tr>
            <th>Ürün Adı</th>
            <th>Fiyatı</th>
        </tr>
        <tr>
            <td>Ürün 1</td>
            <td>100 TL</td>
        </tr>
        <tr>
            <td>Ürün 2</td>
            <td>75 TL</td>
        </tr>
        <tr>
            <td>Ürün 3</td>
            <td>50 TL</td>
        </tr>
    </table>
</body>
</html>

Bu örnekte:

  • <table> etiketi, bir tabloyu başlatır.
  • border="1" özelliği, tablonun sınırlarının görüntülenmesini sağlar. Daha fazla sınırlama eklemek için bu değeri değiştirebilirsiniz.
  • <tr> etiketleri, tablo satırlarını temsil eder.
  • <th> etiketleri, tablo başlıklarını temsil eder ve genellikle kalın ve ortalanmış metin içerir.
  • <td> etiketleri, tablo hücrelerini temsil eder ve verileri içerir.

Bu örnek, “Ürün Adı” ve “Fiyatı” başlıklarıyla üç ürünün olduğu bir tabloyu oluşturur. Tarayıcıda görünen sonuç şu şekildedir:

Ürün AdıFiyatı
Ürün 1100 TL
Ürün 275 TL
Ürün 350 TL

Tablolar, verileri düzenlemeniz ve tablo biçiminde göstermeniz için kullanışlıdır. İhtiyacınıza göre daha fazla satır ve sütun ekleyebilirsiniz.

Metin Biçimlendirme

HTML ile metin biçimlendirme, metni renklendirmek, kalın veya italik yapmak gibi görsel özelliklerle zenginleştirmek için kullanılır. Bu işlem için bazı temel etiketler kullanılır. İşte temel metin biçimlendirme örnekleri:

  1. Kalın Metin (Bold): Metni kalın yapmak için <strong> veya <b> etiketini kullanabilirsiniz. Bu etiketler metni daha belirgin hale getirir.
<p>Bu bir <strong>kalın</strong> metin örneğidir.</p>
  1. İtalik Metin (Italic): Metni italik yapmak için <em> veya <i> etiketini kullanabilirsiniz. Bu etiketler metni eğik veya vurgulanmış hale getirir.
<p>Bu bir <em>italik</em> metin örneğidir.</p>
  1. Altı Çizili Metin (Underline): Metni altı çizili yapmak için <u> etiketini kullanabilirsiniz.
<p>Bu bir <u>altı çizili</u> metin örneğidir.</p>
  1. Üst İkinci Metin (Superscript): Metin içinde üst ikinci karakterleri için <sup> etiketini kullanabilirsiniz. Özellikle kimyasal formüllerde veya üst simgelerde kullanışlıdır.
<p>Su formülü: H<sub>2</sub>O</p>
  1. Alt İkinci Metin (Subscript): Metin içinde alt ikinci karakterleri için <sub> etiketini kullanabilirsiniz. Özellikle kimyasal formüllerde veya alt simgelerde kullanışlıdır.
<p>Karbon dioksit formülü: CO<sub>2</sub></p>
  1. Renkli Metin: Metni renklendirmek için style özelliğini kullanabilirsiniz. Örneğin, metni kırmızı yapmak için:
<p style="color: red;">Bu metin kırmızıdır.</p>

Bu temel metin biçimlendirme etiketleri ve özelliklerini kullanarak, web sayfalarınızdaki metinleri istediğiniz şekilde biçimlendirebilirsiniz.

Yorumlar

HTML dosyalarında yorum eklemek için <!-- ile başlayan ve --> ile biten bir yapı kullanılır. Yorumlar, HTML kodunun belirli bölümlerini açıklamak veya belirli kod parçalarını geçici olarak devre dışı bırakmak için kullanışlıdır. Tarayıcılar yorumları görüntülemez, bu nedenle yorumlar sayfa görünümünü etkilemez.

İşte HTML’de yorum eklemek için kullanılan yapı:

<!-- Bu bir HTML yorumudur. Buraya herhangi bir metin veya kod ekleyebilirsiniz. -->

Yorumlar bir satırda veya çoklu satırlarda olabilir. İşte örnekler:

<!-- Bu bir tek satırlık bir yorumdur -->

<!--
    Bu
    çok
    satırlı
    bir
    yorumdur
-->

Yorumlar, kodunuzun anlaşılmasını kolaylaştırabilir veya ilerideki düzenlemeler için notlar eklemenize yardımcı olabilir. Ayrıca, belirli bir bölümü geçici olarak devre dışı bırakmak istediğinizde yorumları kullanabilirsiniz.

Sayfa Yapısı

HTML sayfalarının yapısını tanımlamak için yapısal etiketler kullanılır. Bu etiketler sayfanın başlığını, menüsünü, içeriğini, yan panellerini ve alt bilgisini tanımlamak için kullanılır. İşte temel sayfa yapısı için kullanılan yapısal etiketler:

  1. <html>: Bir HTML belgesini başlatır ve sonlandırır. Tüm HTML etiketleri bu etiketin içinde yer alır.
  2. <head>: Sayfanın başlık, karakter seti ve diğer meta bilgilerini içerir. Tarayıcıda görünmez.
  3. <title>: Sayfanın başlığını belirler. Tarayıcı sekmesinde görünür.
  4. <meta>: Sayfanın karakter seti, açıklama gibi meta bilgilerini tanımlar.
  5. <link>: Sayfa ile ilişkilendirilmiş stil sayfalarını veya dış kaynakları içe aktarır.
  6. <script>: JavaScript veya diğer betiklerin eklenmesi için kullanılır.
  7. <style>: Sayfanın iç stil tanımlamalarını içerir.
  8. <body>: Sayfanın görsel içeriğini içerir. Metinler, resimler, bağlantılar ve diğer görsel öğeler burada bulunur.
  9. <header>: Sayfanın üst kısmındaki başlık, logo veya ana menü gibi öğeleri tanımlar.
  10. <nav>: Sayfanın gezinme menüsünü tanımlar.
  11. <main>: Sayfanın ana içeriğini içerir. Genellikle bir sayfanın tek bir ana içeriği vardır.
  12. <section>: Sayfanın bölümlerini tanımlar. Örneğin, bir makalenin giriş bölümü, ana içeriği ve sonuç bölümü gibi.
  13. <article>: Bağımsız ve tek başına anlamlı içeriği temsil eder. Örneğin, bir blog gönderisi veya bir haber makalesi.
  14. <aside>: Sayfa içeriğiyle ilgili, ancak ana içerikten bağımsız olan yan paneller veya ilgili içerikleri içerir.
  15. <footer>: Sayfanın alt kısmındaki alt bilgi bilgilerini içerir.

İşte bu yapısal etiketler, bir HTML sayfasının temel yapısını oluşturmak için kullanılır. Sayfa yapısını düzenlerken bu etiketleri kullanarak içeriği ve öğeleri düzenleyebilirsiniz.

Video ve Ses Ekleme

HTML ile video ve ses dosyalarını web sayfalarına eklemek için <video> ve <audio> etiketlerini kullanabilirsiniz. İşte her iki medya türünü de eklemek için temel kullanım:

  1. Video Ekleme (<video>):
<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Tarayıcınız video etiketini desteklemiyor.
</video>

Yukarıdaki örnekte:

  • width ve height özellikleri, video çerçevesinin genişliği ve yüksekliğini ayarlar.
  • controls özelliği, videoyu oynatma, duraklatma ve ses kontrol düğmelerini gösterir.
  • <source> etiketleri, farklı video formatlarını destekler. Tarayıcı, desteklediği ilk formatı kullanacaktır.
  1. Ses Ekleme (<audio>):
<audio controls>
    <source src="ses.mp3" type="audio/mpeg">
    Tarayıcınız ses etiketini desteklemiyor.
</audio>

Yukarıdaki örnekte:

  • controls özelliği, sesi oynatma, duraklatma ve ses kontrol düğmelerini gösterir.
  • <source> etiketi, farklı ses formatlarını destekler.

Video ve ses etiketleri, web sitenizin zengin medya içeriği eklemesi için kullanışlıdır. Tarayıcıların farklı formatları desteklediğini unutmamak önemlidir, bu nedenle farklı formatlarda medya dosyaları sunmanız iyi bir uygulamadır.

Seninde bize katılmanı isteriz. Sende BU FORMU eksiksiz doldurarak bize katılıp, yazarlar kadromuzda kadromuzda yer alabilirsin.

Kültür, Sanat ve Araştırma Bloku.

Döküntü Net.
Şununla etiketlenmiş:

Bir Cevap Yazın