HTML Nedir ve Ne İşe Yarar?

HTML Nedir?

Web dünyasına adım attığın an karşılacağın ilk kavram HTML olur. Açılımı HyperText Markup Language, yani Hiç Metin İşaretleme Dili'dir. İsmi gözünü korkutmasın; HTML bir programlama dili değildir. Aslında bir işaretleme dilidir ve temel görevi, bir web sayfasının iskeletini oluşturmaktır.

Bir binayı inşa ederken tuğlaları, demirleri ve duvarları düşünebilirsin. HTML, web sitesinin işte o kaba inşaatıdır. Tarayıcına hangi kısmın başlık, hangi kısmın paragraf, hangisinin görsel veya bağlantı olduğunu söyler.

Web Geliştirmedeki Yeri

Web siteleri üç temel katmandan oluşur:

• HTML: Sayfanın iskeletini ve içeriğini belirler.
• CSS: Sayfanın tasarımını, renklerini ve düzenini sağlar.
• JavaScript: Sayfaya hareket, dinamik özellikler ve işlevsellik kazandırır.

Bu üçlü arasında HTML olmadan diğer ikisini inşa etmek neredeyse imkansızdır. Bir tarayıcı açtığında gördüğün her yazı, resim ve buton arkasında HTML kodları barındırır.

Temel Sayfa İskeleti

Her HTML belgesinin belirli bir düzeni vardır. Tarayıcının kodu doğru okuyabilmesi için bu iskelete uyman gerekir. Şimdi bu yapıyı yakından inceleyelim.

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8">
    <title>İlk Sayfam</title>
  </head>
  <body>
    <h1>Merhaba Dünya</h1>
  </body>
</html>

Bu iskeletin her parçası ayrı bir anlama sahiptir:

• <!DOCTYPE html>: Tarayıcıya bu belgenin güncel HTML sürümüyle yazıldığını bildirir.
• <html>: Bütün HTML kodlarını kapsayan ana kök etiketidir.
• <head>: Sayfanın görünmeyen, tarayıcıya ve arama motorlarına bilgi veren kısmıdır.
• <body>: Kullanıcının ekranda gördüğü tüm içeriğin yer aldığı ana gövde alanıdır.

Temel HTML Etiketleri

HTML, etiketler (tags) mantığıyla çalışır. Etiketler genellikle açılış ve kapanış şeklinde ikiye ayrılır. Örneğin bir başlık oluşturmak için <p> etiketi açılır ve içerik yazıldıktan sonra </p> ile kapatılır.

Başlık Etiketleri

Metin içerisindeki başlıkları önem derecesine göre sıralamak için h1 ile h6 arasındaki etiketler kullanılır. H1 en büyük ve en önemli başlığı temsil ederken h6 en küçüğünü ifade eder.

<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>

Paragraf Etiketleri

Metin bloklarını yazmak için p etiketi kullanılır. Tarayıcılar paragraflar arasında otomatik olarak bir boşluk bırakır.

<p>Bu bir paragraf metnidir.</p>

Bağlantı Etiketleri

Başka bir web sayfasına veya site içi bir konuma geçiş yapmak için a etiketi kullanılır. href özniteliği ile gidilecek adres belirtilir.

<a href="https://example.com">Beesu Academy</a>

Görsel Etiketleri

Sayfaya resim eklemek için img etiketi kullanılır. Bu etiketin kapanışı yoktur ve src özniteliği ile görselin yolu verilir.

<img src="ornek.jpg" alt="Örnek Görsel">

Liste Etiketleri

Maddeler halinde içerikler sunmak için sıralı ol ve sırasız ul listeleri kullanılır. Her listenin elemanı ise li etiketi ile tanımlanır.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

İlk Web Sayfanı Yap

Şimdiye kadar öğrendiğimiz tüm bu yapıları bir araya getirerek çalışan eksiksiz bir örnek oluşturalım. Bilgisayarında boş bir metin belgesi açıp bu kodları yapıştırabilir ve uzantısını html yaparak tarayıcında çalıştırabilirsin.

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8">
    <title>Benim Web Sitem</title>
  </head>
  <body>
    <h1>Web Dünyasına Hoş Geldin</h1>
    <p>Bu benim yazdığım ilk web sayfası ve oldukça heyecanlıyım.</p>
    
    <h2>Öğreneceklerim</h2>
    <ul>
      <li>HTML ile iskelet kurmak</li>
      <li>CSS ile tasarım yapmak</li>
    </ul>

    <h2>Faydalı Bağlantı</h2>
    <p>Daha fazla bilgi için <a href="https://example.com">buraya tıkla</a>.</p>

    <img src="logo.png" alt="Logo Görseli">
  </body>
</html>

Görüşmek üzere.