HTML İleri Düzey Özellikler ve Uygulamalar

HTML ve CSS temel taşlarını öğrendikçe, web sayfalarını çok daha zengin ve etkileşimli hale getirme yolunda ilerliyoruz. Bu yazıda, form etiketleri, medya öğeleri ve daha ileri düzey HTML özelliklerinden bahsedeceğiz. Bu konular, dinamik web sayfaları ve kullanıcı etkileşimini daha iyi yönetebilmeniz için oldukça önemli.

Form Etiketleri (Forms)

Web sayfalarında kullanıcıdan veri almak için form etiketleri kullanılır. HTML’de form oluşturmak için <form> etiketi kullanılır ve bu etiketin içinde birçok alt etiket bulunur. Örneğin, metin kutuları, onay kutuları ve radyo butonları.

Form Etiketinin Yapısı

<form action="gonder.php" method="post">
  <label for="ad">Ad Soyad</label>
  <input type="text" id="ad" name="ad">
  
  <label for="email">E-posta</label>
  <input type="email" id="email" name="email">
  
  <input type="submit" value="Gönder">
</form>

Bu örnekte, kullanıcı adını ve e-posta adresini girebileceği iki metin kutusuna sahip bir form var. Form gönderildiğinde veriler, gonder.php dosyasına gönderilecek.

Medya Öğeleri (Media Elements)

Web sayfalarına ses, video ve diğer medya öğeleri eklemek için HTML’in sunduğu <audio>, <video> ve <embed> etiketleri kullanılır. Bu etiketler sayesinde sayfada video oynatabilir veya ses dosyalarını dinletebilirsiniz.

Ses ve Video Eklemek

<audio controls>
  <source src="song.mp3" type="audio/mp3">
  Tarayıcınız ses öğesini desteklemiyor.
</audio>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Tarayıcınız video öğesini desteklemiyor.
</video>

Bu kodlarla, bir ses dosyası ve video dosyasını sayfanıza ekleyebilirsiniz. Kullanıcılar, bu medya öğelerini sayfada doğrudan kontrol edebilir.

HTML5 Yeni Etiketleri

HTML5 ile gelen yeni etiketler, web sayfalarınızı daha semantik ve erişilebilir hale getirmeye yardımcı olur. Bu etiketler, içerik bölümlerini daha anlamlı bir şekilde yapılandırmanıza olanak tanır.

Semantik Etiketler

<header> Başlık bölümü</header>
<nav> Menü bölümü</nav>
<section> Bir bölüm</section>
<article> Makale içeriği</article>
<footer> Alt bilgi</footer>

Bu etiketler, sayfanın yapısını daha düzenli hale getirir ve arama motorlarıyla uyumlu çalışmasına yardımcı olur.

Iframe Etiketleri

Sayfa içinde başka bir web sayfasını göstermek için <iframe> etiketi kullanılır. Bu etiket, web sayfanızın içine başka bir sayfa veya medya öğesi yerleştirmenize olanak tanır.

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Bu örnekte, başka bir web sayfası, mevcut sayfanızda bir pencere içinde görüntülenir.

Tablolar (Tables)

Veri düzenlemekte tablo etiketleri oldukça kullanışlıdır. HTML'de tablo oluşturmak için <table>, <tr>, <td> ve <th> etiketlerini kullanırız.

<table border="1">
  <tr>
    <th>Başlık 1</th>
    <th>Başlık 2</th>
  </tr>
  <tr>
    <td>Veri 1</td>
    <td>Veri 2</td>
  </tr>
</table>

Yukarıdaki kodda, basit bir tablo yer almaktadır. Başlıklar ve veri hücreleri ile düzenli bir yapı elde edebilirsiniz.

Özet

Bu bölümde HTML form etiketlerinden medya öğelerine kadar birçok farklı özellik üzerinde durduk. HTML, web sayfalarınızı daha etkileşimli ve kullanıcı dostu hale getirmek için çok güçlü bir araçtır. Formlar, medya öğeleri ve semantik etiketlerle sayfalarınıza zenginlik katabilir ve kullanıcı etkileşimini iyileştirebilirsiniz. Şimdi, bu yeni etiketleri sayfalarınızda denemeye başlayarak web tasarım becerilerinizi geliştirebilirsiniz.

Bir sonraki bölümde CSS kullanarak HTML sayfalarınızı nasıl stilize edebileceğinizi öğrenmeye başlayacağız. CSS ile renkler, fontlar, düzenler ve animasyonlar ekleyerek sayfanızı tamamen özelleştirebilirsiniz.