Web sitesi yapmak istiyorsanız, işe HTML öğrenerek başlamanız şart. HTML, internette gördüğünüz tüm sayfaların temel yapı taşıdır. Üstelik öğrenmesi düşündüğünüzden çok daha kolay! Bu yazıda size sadece 5 derste HTML öğrenin istiyoruz.
Bu içerikte neler var?
📘 Ders 1: HTML Nedir? Ne İşe Yarar?
HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan işaretleme dilidir. Görsellerin, metinlerin, bağlantıların ve diğer içeriklerin nerede ve nasıl görüneceğini belirler. Tarayıcılar bu kodları okuyarak kullanıcıya sayfayı gösterir.
Basit bir HTML örneği:
<!DOCTYPE html>
<html>
<head>
<title>Merhaba Dünya</title>
</head>
<body>
<h1>İlk Sayfam</h1>
<p>Bu benim ilk HTML denemem.</p>
</body>
</html>
Yukarıdaki kod, tarayıcıda basit bir başlık ve paragraf görüntüler.
📄 Ders 2: Temel Etiketler ve Yapı
HTML sayfaları, <html>, <head> ve <body> bölümlerinden oluşur. İşte bilmeniz gereken bazı temel etiketler:
<h1>–<h6>: Başlık etiketleri<p>: Paragraf<a href="">: Bağlantı<img src="">: Görsel<ul>,<ol>,<li>: Listeler
Bu etiketleri bir araya getirerek içerik yapınızı oluşturabilirsiniz.
🖼️ Ders 3: Görseller, Linkler ve Medya
Web sitenizi zenginleştirmek için görsel ve bağlantı kullanmanız gerekir. İşte örnekler:
Bağlantı örneği:
<a href="https://www.kolayteknik.com">Sitemizi ziyaret edin</a>
Görsel ekleme:
<img src="resim.jpg" alt="Açıklama">
Bu sayede ziyaretçilere bilgi verdiğinizde sayfanızın tasarımını da geliştirirsiniz.
📐 Ders 4: Formlar ve Kullanıcı Girdisi
Kullanıcılardan bilgi almak için formlar kullanılır. Basit bir iletişim formu şu şekilde olabilir:
<form action="gonder.php" method="post">
Adınız: <input type="text" name="ad"><br>
Mesajınız: <textarea name="mesaj"></textarea><br>
<input type="submit" value="Gönder">
</form>
Bu yapı, gelen veriyi sunucuya gönderir. Daha ileri düzeyde JavaScript ve PHP ile işlenebilir.
🎨 Ders 5: HTML + CSS ile Sayfa Tasarımı
HTML yalnızca iskelet yapıyı oluşturur. Tasarım ve görsel düzen için CSS (Cascading Style Sheets) kullanılır.
Basit CSS örneği:
<style>
body {
background-color: #f4f4f4;
font-family: Arial;
}
h1 {
color: #3498db;
}
</style>
CSS’i ya <style> etiketiyle sayfaya dahil edersiniz ya da harici dosya olarak eklersiniz.
Artık HTML’ye Hazırsınız!
Bu 5 temel derste HTML’nin nasıl çalıştığını, ne işe yaradığını ve nasıl kullanıldığını öğrendiniz. Artık kendi sayfalarınızı tasarlamak için ilk adımı attınız. Bir sonraki aşamada CSS ve JavaScript öğrenerek sitenizi daha dinamik hale getirebilirsiniz.
İpucu: HTML dosyalarınızı not defteriyle hazırlayıp .html uzantısıyla kaydedebilir ve tarayıcıda test edebilirsiniz.
