HTML Nedir?

HTML (HyperText Markup Language) Nedir?

HTML (HyperText Markup Language), web sayfalarının temel yapısını oluşturan bir işaretleme dilidir. Web tarayıcılarının bir belgeyi görüntüleyebilmesi için HTML kullanılır. HTML, bir web sayfasındaki metinleri, resimleri, bağlantıları, tablolaları, formları ve diğer içerik türlerini tanımlar. Ayrıca, diğer teknolojilerle (CSS, JavaScript vb.) birleştirilerek web sayfalarına estetik ve dinamik özellikler kazandırır.


HTML’in Amacı ve Kullanımı

  1. Web Sayfasının Yapısını Oluşturmak:
    HTML, bir web sayfasının başlık, paragraf, bağlantı, resim gibi temel bileşenlerini tanımlar.
  2. İçerik Organizasyonu:
    HTML, içeriklerin hiyerarşik ve anlamlı bir yapıya sahip olmasını sağlar.
  3. Bağlantılar ve Navigasyon:
    HTML, farklı sayfalar arasında bağlantılar kurarak gezinme (navigasyon) sağlar.
  4. Diğer Teknolojilere Zemin Hazırlamak:
    HTML, CSS ve JavaScript gibi teknolojilerin uygulanabileceği bir temel oluşturur.

HTML’in Temel Yapısı

Bir HTML belgesi, belirli bir yapı üzerine kuruludur. Bu yapı genellikle şu şekilde başlar:

Basit Bir HTML Örneği:

<!DOCTYPE html>
<html>
<head>
<title>Web Sayfası Başlığı</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu bir HTML belgesidir.</p>
</body>
</html>

Bölüm Açıklamaları:

  1. <!DOCTYPE html>
    • Belgenin HTML5 ile yazıldığını belirtir.
  2. <html>
    • HTML belgesinin kök (root) elemanıdır.
  3. <head>
    • Belge hakkında meta bilgiler içerir (ör. başlık, karakter seti, stil dosyaları).
  4. <title>
    • Tarayıcı sekmesinde görüntülenen sayfa başlığını belirtir.
  5. <body>
    • Sayfanın görünen ana içeriğini içerir.

HTML Etiketleri ve Yapısı

HTML, etiketler (tags) ile çalışır. Etiketler, açılış (<etiket>) ve kapanış (</etiket>) şeklinde çift olarak kullanılır. Bazı etiketler ise kendi kendini kapatır (<br> gibi).

Temel HTML Etiketleri:

  1. Başlık Etiketleri:
    • <h1>‘den <h6>‘ya kadar başlıkları tanımlar.
    • <h1> en büyük başlık, <h6> en küçük başlık içindir.
    <h1>Bu bir başlıktır</h1>
  2. Paragraf Etiketi:
    • Metinleri paragraflar halinde düzenler.
    <p>Bu bir paragraftır.</p>
  3. Bağlantı Etiketi:
    • Bir sayfaya bağlantı ekler.
    <a href="https://www.example.com">Example</a>
  4. Resim Etiketi:
    • Sayfaya resim ekler.
    <img src="resim.jpg" alt="Açıklama">
  5. Liste Etiketleri:
    • Sırasız Liste:
      <ul>
      <li>Madde 1</li>
      <li>Madde 2</li>
      </ul>
    • Sıralı Liste:
      <ol>
      <li>Madde 1</li>
      <li>Madde 2</li>
      </ol>
  6. Tablo Etiketleri:
    • Tablolar oluşturur.
    <table>
    <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>
  7. Form Etiketleri:
    • Kullanıcı girişlerini almak için formlar oluşturur.
    <form action="/submit" method="post">
    <input type="text" name="isim" placeholder="Adınız">
    <input type="submit" value="Gönder">
    </form>
  8. Yorumlar:
    • HTML koduna açıklamalar ekler. Tarayıcı tarafından görüntülenmez.
    <!-- Bu bir yorumdur -->

HTML’in Özellikleri

  1. Basit ve Anlaşılır:
    • HTML öğrenmesi ve yazması kolay bir dildir.
  2. Tarayıcı Desteği:
    • Tüm modern tarayıcılar tarafından desteklenir.
  3. Bağımsızlık:
    • HTML, cihazlardan bağımsızdır ve farklı platformlarda çalışabilir.
  4. Zengin Medya Desteği:
    • HTML, resim, video, ses gibi çoklu ortam içeriklerini destekler.
  5. Arama Motoru Optimizasyonu (SEO):
    • HTML, doğru kullanıldığında arama motorlarında daha iyi sıralamalar elde etmeye yardımcı olur.

HTML’in Avantajları

  1. Basitlik:
    • Karmaşık bir sözdizimi yerine, anlaşılır bir yapıya sahiptir.
  2. Geniş Uygulama Alanı:
    • HTML, basit web sitelerinden karmaşık uygulamalara kadar her yerde kullanılabilir.
  3. Düşük Maliyet:
    • HTML kullanımı için özel bir yazılım veya lisans gerekmez.
  4. Standartlara Uygunluk:
    • W3C standartlarına dayalıdır ve bu da uyumluluğu artırır.

HTML5 ile Gelen Yenilikler

  1. Yeni Yapısal Etiketler:
    • <header>, <footer>, <article>, <section> gibi semantik etiketler.
  2. Multimedya Desteği:
    • <audio> ve <video> etiketleri ile ses ve video oynatma.
  3. Form İyileştirmeleri:
    • Yeni giriş türleri (email, date, color gibi).
  4. Canvas ve SVG:
    • 2D grafik çizimi ve vektör grafik desteği.
  5. Depolama API’leri:
    • Kullanıcı verilerini tarayıcıda depolamak için localStorage ve sessionStorage.

HTML ve Diğer Teknolojiler

HTML, genellikle aşağıdaki teknolojilerle birleştirilerek kullanılır:

  1. CSS (Cascading Style Sheets):
    • HTML ile oluşturulan yapıyı estetik hale getirmek için kullanılır.
  2. JavaScript:
    • HTML sayfalarına dinamik ve etkileşimli özellikler kazandırır.
  3. Back-end Teknolojileri:
    • HTML, veritabanı ve sunucu taraflı dillerle (PHP, Node.js, Python vb.) entegre çalışabilir.

HTML’in Dezavantajları

  1. Statik Yapı:
    • HTML, kendi başına dinamik özellikler sunmaz. JavaScript veya back-end dillerle desteklenmelidir.
  2. Hata Yönetimi:
    • HTML, yazım hatalarını algılamak için yerleşik bir mekanizmaya sahip değildir.
  3. Kapsamlı Tasarım Zorluğu:
    • Büyük projelerde HTML ile düzenli çalışmak zor olabilir.

Sonuç

HTML, web geliştirme için temel yapı taşıdır. Diğer teknolojilerle birleştirildiğinde, kullanıcı dostu ve etkileyici web uygulamaları oluşturmayı mümkün kılar. HTML öğrenmek, web tasarımına ve geliştirmeye giriş yapmak isteyenler için vazgeçilmez bir ilk adımdır.

YAZARIN EKLEMİŞ OLDUĞU YAZILAR
YORUMLAR

Henüz yorum yapılmamış. İlk yorumu yukarıdaki form aracılığıyla siz yapabilirsiniz.

Your Mastodon Instance
Share to...