HTML nedir, acilimi ne demek? HyperText Markup Language temel kavramlari, etiketleri ve web sitelerindeki onemi.
HTML, web sitelerinin temel yapi tasidir. Internette gordugunuz her web sayfasi HTML kullanilarak olusturulmustur.
HTML = HyperText Markup Language
Turkce karsiligi: Hiper Metin Isaretleme Dili
HTML, web sayfalarinin yapisini olusturmak icin kullanilan standart isaretleme dilidir. Bir programlama dili degildir; sayfa iceriklerinin nasil duzenlenecegini tarayiciya bildiren bir isaretleme dilidir.
HTML sunlari tanimlar:
- Basliklar (h1, h2, h3...)
- Paragraflar
- Listeler
- Baglantilar (linkler)
- Gorseller
- Tablolar
- Formlar
- Bolumler ve alanlar
1991 - HTML 1.0
- Ilk versiyon, Tim Berners-Lee
- Sadece 18 etiket
- Cok basit yapilar
1995 - HTML 2.0
- Standartlasma baslangici
- Formlar eklendi
- Tablolar eklendi
1997 - HTML 3.2
- W3C standardi
- Scriptler destegi
- Daha fazla bicimlendirme
1999 - HTML 4.01
- CSS destegi guclendirildi
- Erisilebilirlik ozellikleri
- Uzun sure standart olarak kaldi
2014 - HTML5
- Modern web standardi
- Video ve audio yerel destek
- Semantik etiketler
- Canvas ve WebGL
- Yerel depolama
Her HTML belgesi su temel yapiya sahiptir:
DOCTYPE Bildirimi:
Belgenin HTML5 oldugunu belirtir.
HTML Etiketi:
Tum icerigi sarar, dil bilgisi icerir.
Head Bolumu:
Meta bilgiler, baslik, CSS ve script baglantilari. Kullaniciya gorunmez.
Body Bolumu:
Sayfanin gorunen icerigi. Tum yazilar, gorseller, butonlar burada.
Basliklar (Headings):
h1 en buyuk, h6 en kucuk baslik. Her sayfada tek h1 olmali.
Paragraf:
p etiketi ile paragraflar olusturulur.
Baglanti (Link):
a etiketi ile baska sayfalara veya sitelere link verilir. href ozelligi hedef adresi belirtir.
Gorsel:
img etiketi ile resimler eklenir. src kaynak dosyayi, alt aciklamayi belirtir.
Listeler:
- ul: Sirasiz liste (madde isaretli)
- ol: Sirali liste (numarali)
- li: Liste ogesi
Bolumler:
- div: Genel bolum sarmalayici
- span: Satir ici sarmalayici
Etiketlere ek bilgi eklemek icin ozellikler kullanilir:
id: Benzersiz kimlik. Sayfada tek olmali.
class: CSS sinifi. Birden fazla elemente uygulanabilir.
href: Baglanti adresi (a etiketi icin).
src: Kaynak dosya yolu (img, script icin).
alt: Alternatif metin (gorseller icin, SEO ve erisilebilirlik icin onemli).
style: Satir ici CSS stili.
title: Fare uzerinde bekletince gosterilen metin.
HTML5, modern web icin bircok yenilik getirdi:
Semantik Etiketler:
- header: Sayfa veya bolum ust kismi
- nav: Navigasyon linkleri
- main: Ana icerik
- article: Bagimsiz icerik (blog yazisi gibi)
- section: Tematik bolum
- aside: Yan icerik (sidebar)
- footer: Sayfa veya bolum alt kismi
Multimedya:
- video: Video oynatici (Flash'a gerek kalmadi)
- audio: Ses oynatici
- canvas: 2D grafik cizimi
- svg: Vektorel grafikler
Form Yenilikleri:
- input type="email": E-posta dogrulamasi
- input type="date": Tarih secici
- input type="range": Aralik kaydirici
- input type="color": Renk secici
- input type="search": Arama kutusu
Yeni API'ler:
- Geolocation: Konum bilgisi
- Web Storage: Yerel depolama
- Web Workers: Arka plan isleme
- Drag and Drop: Surukle birak
Web sitelerinin uc temel bileseni vardir:
HTML - Yapi/Iskelet:
Icerigin ne oldugunu tanimlar. Evin duvarlari gibi.
CSS - Gorunum/Stil:
Icerigin nasil gorunecegini belirler. Evin boyasi, dekorasyonu gibi.
JavaScript - Davranis/Etkilesim:
Sayfalara etkilesim ekler. Evin elektrigi, kapilari gibi.
Birlikte calisirlar:
- HTML icerigi olusturur
- CSS onu guzellestirir
- JavaScript etkilesim ekler
HTML, arama motoru optimizasyonu (SEO) icin kritik oneme sahiptir:
1. Title Etiketi
Arama sonuclarinda gorunen baslik. 50-60 karakter ideal.
2. Meta Description
Arama sonuclarindaki aciklama. 150-160 karakter ideal.
3. Heading Hiyerarsisi
- H1: Sayfa ana basligi (1 adet)
- H2: Bolum basliklari
- H3: Alt bolum basliklari
Mantikli siralama onemli.
4. Alt Text
Gorsellerin aciklamalari. Arama motorlari ve gorme engelliler icin.
5. Semantik Etiketler
article, nav, header gibi etiketler icerigin ne oldugunu belirtir.
6. Sayfa Hizi
Optimize HTML daha hizli yuklenir.
Ucretsiz Kaynaklar:
- W3Schools (w3schools.com) - Interaktif dersler
- MDN Web Docs (developer.mozilla.org) - Detayli dokumantasyon
- freeCodeCamp - Sertifikali egitim
- Codecademy - Interaktif dersler
Pratik Yapma:
- CodePen - Tarayicida kod yazma
- JSFiddle - Hizli denemeler
- Kendi bilgisayarinizda Not Defteri ile basla
Turkce Kaynaklar:
- Turkce W3Schools cevirisi
- YouTube Turkce HTML dersleri
1. Etiketleri kapatmamak
Her acilan etiket kapatilmali. img, br gibi self-closing etiketler haric.
2. Hatali ic ice gecirme
Etiketler dogru sirada acilip kapatilmali.
3. Alt text kullanmamak
Her gorsel icin aciklayici alt text olmali.
4. Tek H1 kullanmamak
Her sayfada sadece 1 adet H1 olmali.
5. Inline style asiri kullanimi
CSS ayri dosyada olmali.
6. Deprecated etiketler
font, center gibi eski etiketler kullanilmamali.
HTML, web gelistirmenin temelidir. Her ne kadar basit gorunse de:
Web sitenizin HTML yapisinin profesyonelce olusturulmasi icin RapitekGO yaninizda. Iletisime gecin ve SEO uyumlu web sitenizi olusturalim.
Get the latest website and SEO tips delivered to your inbox