Merhaba THT Ailesi!
Bu eğitim serimizde, modern web sitelerinin temel yapı taşı olan HTML5'i en baştan, sıfırdan öğreneceğiz. İster bir web sitesi geliştirmek, ister bir güvenlik testi yaparken web mantığını daha iyi anlamak isteyin, HTML bilmek şart!
Hazırsanız, web dünyasına ilk adımımızı atıyoruz!
Bu eğitim serimizde, modern web sitelerinin temel yapı taşı olan HTML5'i en baştan, sıfırdan öğreneceğiz. İster bir web sitesi geliştirmek, ister bir güvenlik testi yaparken web mantığını daha iyi anlamak isteyin, HTML bilmek şart!
Hazırsanız, web dünyasına ilk adımımızı atıyoruz!
1. HTML Nedir?
HTML (HyperText Markup Language), Türkçe karşılığıyla "Köprü Metin İşaretleme Dili", bir programlama dili DEĞİLDİR.
- Bir İşaretleme Dilidir (Markup Language).
- Görevi, web sayfamızın iskeletini oluşturmaktır.
- Tarayıcılara (Chrome, Firefox vb.) bir metnin başlık mı, paragraf mı, resim mi yoksa bağlantı mı olduğunu söyler.
Özetle: Bir binanın tuğlaları ve kolonları neyse, HTML de bir web sayfasının temel yapısı odur.
2. Neden HTML5?
HTML5, HTML'in en son ve güncel sürümüdür. Önceki sürümlere göre bize birçok yenilik sunar:
- Daha Semantik Yapı: <header>, <nav>, <article>, <footer> gibi anlamlı yeni etiketler geldi. Bu, arama motorlarının ve geliştiricilerin kodu daha iyi anlamasını sağlar.
- Multimedia Desteği: Artık eklentilere ihtiyaç duymadan direkt HTML içinde <video> ve <audio> etiketleriyle medya oynatabiliriz.
- Mobil Uyumluluk: Mobil cihazlarla daha uyumlu ve hızlı çalışır.
3. İlk HTML5 Belgesinin Yapısı
Her modern HTML5 belgesi, aşağıdaki temel şablon üzerine kuruludur. Bu şablonu bir metin editörüne (Notepad++, VS Code vb.) yazıp .html uzantısıyla kaydettiğinizde ilk web sayfanızı oluşturmuş olursunuz.
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İlk Web Sayfam | THT Ders 1</title>
</head>
<body>
<h1>Merhaba THT!</h1>
<p>HTML5 derslerine başladık. Herkese iyi çalışmalar dilerim.</p>
</body>
</html>ŞİMDİ DİLERSENİZ BU KODLARIN NE İŞE YARADIĞINI ÖĞRENELİM...
<!DOCTYPE html>
<!-- Bu satır, sayfanın HTML5 standardında yazıldığını belirtir. Tarayıcı bunu bilirse sayfayı doğru şekilde işler. -->
<html lang="tr">
<!-- HTML belgesinin kök etiketi. Tüm içerik bunun içinde olmalıdır.
lang="tr" sayfanın dilinin Türkçe olduğunu belirtir. -->
<head>
<!-- Bu bölüm, sayfanın görünmeyen ayarlarını içerir.
Başlık, meta bilgiler, stil bağlantıları vs. burada olur. -->
<meta charset="UTF-8">
<!-- Sayfanın karakter kodlaması. Türkçe karakterlerin (ç, ğ, ü, ö) doğru görünmesini sağlar. -->
<title>İlk Web Sayfam</title>
<!-- Tarayıcı sekmesinde görünen sayfa başlığıdır. -->
</head>
<body>
<!-- Kullanıcının gördüğü tüm içerik bu bölümde yer alır. -->
<h1>Merhaba Dünya!</h1>
<!-- En büyük başlık etiketi. Başlıkları hiyerarşik olarak belirtmek için h1-h6 arası kullanılır. -->
<p>Bu benim ilk HTML sayfam.</p>
<!-- Paragraf etiketi. Normal metinleri göstermek için kullanılır. -->
</body>
</html>
<!-- HTML belgesi burada biter. -->
Pratik: En Sık Kullanılan Başlık ve Paragraf Etiketleri
Web sitelerinde en temel ihtiyacımız başlıklar ve metin bloklarıdır.
Başlık Etiketleri <h1>-<h6>
Başlıklar, sayfa içeriğinin hiyerarşisini belirtir.
- <h1>: En büyük ve en önemli başlıktır (Sayfada sadece bir tane kullanılması önerilir).
- <h2>, <h3>vb.: Daha alt seviye başlıklar.
- <h6>: En küçük başlıktır.
Paragraf Etiketi <p>
Metin blokları oluşturmak için kullanılır. Metin bloklarını <p> etiketiyle oluştururuz.
Kullanım Örneği:
Kod:
<p>
Bu, bir paragraf metnidir.
Web sitelerinde ana içeriği genellikle <p> etiketiyle yazarız.
</p>
Satır Atlatma <br>
Metin içinde zorunlu olarak bir alt satıra geçmek için kullanılır. Tekil bir etikettir, kapanışı yoktur. Kodu sadece <br> şeklinde yazarız.
Kapanış ve Bir Sonraki Ders Bu ilk dersimizde, modern web sayfalarının temel iskeletini oluşturan HTML5'e güçlü bir giriş yaptık.
Artık bir web belgesinin yapısını, <head> ve <body> bölümlerinin ne işe yaradığını ve temel etiketleri (<h1>, <p>) biliyorsunuz.
Unutmayın: HTML öğrenmek, web geliştirmenin kapısını açan ilk ve en önemli adımdır. Kod yazmaya ve denemeye devam edin! Sırada Ne Var?
İkinci dersimizde, web sayfalarımıza hareket ve anlam katmaya başlayacağız: Bağlantılar (<a>): Sayfalar arası ve dış sitelere nasıl geçiş yapılır?
Görseller (<img>): Sayfamıza nasıl resim ekleriz? Listeler (<ul>, <ol>): Maddeler halinde listeler nasıl oluşturulur? Aklınıza takılan herhangi bir soru varsa, yorumlarda belirtmekten çekinmeyin.
Bir sonraki derste görüşmek üzere, iyi çalışmalar!
SÖZLER:
Hürmet sana, ey şan dolu sancağım
Hürmet sana, ey şan dolu sancağım
Baştan başa arza hâkim ol şahım
Baştan başa arza hâkim ol şahım
Türk ordusu, Türk ordusu sayende
Türk ordusu, Türk ordusu sayende
Sakarya'da kurtuldu şan otağım
Sakarya'da kurtuldu şan otağım
Dünyalara bedeldir mah cemâlin
Allah'ıma emanettir Kemâl'im
Dünyalara bedeldir mah cemâlin
Allah'ıma emanettir Kemâl'im
O sevimli yüzün asla solmasın
O sevimli yüzün asla solmasın
Hiçbir vakit kâlbin yasla dolmasın
Hiçbir vakit kâlbin yasla dolmasın
Ey mert asker durma yürü ileri
Ey mert asker durma yürü ileri
Vatanımda tek bir düşman kalmasın
Vatanımda tek bir düşman kalmasın
Dünyalara bedeldir mah cemâlin
Allah'ıma emanettir Kemâl'im
Dünyalara bedeldir mah cemâlin
Allah'ıma emanettir Kemâl'im
Eline emeğine sağlık 
