Ertuğrul Mert

HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan işaretleme dilidir. Bir web sayfasındaki başlıklar, paragraflar, bağlantılar, görseller ve daha fazlası HTML etiketleriyle tanımlanır. Bu yazıda HTML'in temellerini örneklerle ele alacağız.

HTML Nedir?

HTML, tarayıcıların anlayabileceği şekilde içerik yapısını tanımlayan bir işaretleme dilidir (markup language) — bir programlama dili değildir. Etiketler (tags) kullanılarak içerik; başlık, paragraf, liste, bağlantı gibi anlamlı parçalara bölünür.

Temel Doküman Yapısı

Her HTML dokümanı belirli bir iskelete sahiptir:

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Ertuğrul Mert</title>
  </head>
  <body>
    <h1>Merhaba, Ben Ertuğrul Mert</h1>
    <p>Self-taught bir geliştiriciyim.</p>
  </body>
</html>

<!DOCTYPE html>: Tarayıcıya belgenin HTML5 olduğunu bildirir.
<html>: Tüm sayfa içeriğini saran kök etikettir.
<head>: Sayfa hakkında meta bilgileri, başlığı ve bağlantılı dosyaları içerir.
<body>: Kullanıcının tarayıcıda gördüğü tüm görünür içeriği barındırır.

Başlık ve Metin Etiketleri

<h1>En büyük başlık</h1>
<h2>Alt başlık</h2>
<p>Bu bir paragraftır.</p>
<strong>Kalın metin</strong>
<em>İtalik metin</em>

<h1> ile <h6> arasında altı farklı başlık seviyesi bulunur; sayı büyüdükçe başlık önemi azalır.

Bağlantılar ve Medya

<a href="https://github.com/ertucuk">GitHub Profilim</a>

<img src="/ertu.png" alt="Ertuğrul Mert" width="200" />

<video src="/tanitim.mp4" controls></video>

href bağlantının hedefini, src ise görsel veya medya dosyasının kaynağını belirtir. alt niteliği ise görsel yüklenemediğinde gösterilecek alternatif metni ve erişilebilirliği sağlar.

Listeler ve Tablolar

<ul>
  <li>Node.js</li>
  <li>MongoDB</li>
  <li>Next.js</li>
</ul>

<ol>
  <li>Kurulum</li>
  <li>Geliştirme</li>
  <li>Yayınlama</li>
</ol>

<table>
  <tr>
    <th>İsim</th>
    <th>Rol</th>
  </tr>
  <tr>
    <td>Ertuğrul Mert</td>
    <td>Developer</td>
  </tr>
</table>

Formlar

Kullanıcıdan veri almak için <form> etiketi ve giriş elemanları kullanılır:

<form action="/submit" method="POST">
  <label for="name">İsim:</label>
  <input type="text" id="name" name="name" placeholder="Ertuğrul Mert" />

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

  <button type="submit">Gönder</button>
</form>

Semantic HTML

Semantic (anlamsal) etiketler, içeriğin ne anlama geldiğini hem tarayıcıya hem de geliştiricilere açıkça belirtir; bu da erişilebilirlik ve SEO açısından önemlidir.

<header>Site başlığı ve navigasyon</header>
<nav>Menü bağlantıları</nav>
<main>
  <article>Ana içerik</article>
  <aside>Yan bilgi</aside>
</main>
<footer>Alt bilgi</footer>

Bunun yerine her şeyi <div> ile yazmak da mümkündür, ancak semantic etiketler kodu daha okunabilir kılar ve ekran okuyucuların sayfa yapısını doğru yorumlamasına yardımcı olur.

Nitelikler (Attributes)

Etiketlere ek bilgi vermek için nitelikler kullanılır:

<a href="https://ertucuk.com" target="_blank" rel="noopener">
  Portfolyom
</a>

<input type="checkbox" checked disabled />

id: Elemente benzersiz bir kimlik verir.
class: CSS ile stillendirme için grup tanımlar.
href / src: Bağlantı veya kaynak adresini belirtir.

Sonuç

HTML, her web sayfasının temelini oluşturur. Doğru etiketleri ve semantic yapıyı kullanmak; hem tarayıcı uyumluluğunu hem de erişilebilirliği artırır. Bu temel bilgilerle artık kendi HTML sayfalarınızı yapılandırmaya başlayabilirsiniz.

HTML'e Giriş: Web'in Temel Yapı Taşı