HTML, CSS ve JavaScript: Web Geliştirmenin Temel Taşları
Web geliştirme, modern dünyada büyük bir önem kazanmış durumda ve bu alanda HTML, CSS ve JavaScript, web sitelerinin temel yapı taşlarını oluşturuyor. Bu üç teknoloji, web sayfalarının yapısını, stilini ve işlevselliğini kontrol etmek için birlikte kullanılır. İşte bu üç önemli teknolojiyi anlamak için bir rehber:
1. HTML (HyperText Markup Language)
HTML, web sayfalarının iskeletini oluşturan işaretleme dilidir. Bir web sayfasında gördüğünüz metinler, resimler, bağlantılar ve formlar gibi tüm içerikler HTML ile tanımlanır. HTML, tarayıcıya içeriğin nasıl yapılandırılacağını ve sunulacağını söyler.
HTML’nin Temel Yapısı:
- Etiketler: HTML, içerik öğelerini tanımlamak için etiketler kullanır. Örneğin,
<h1>
etiketi başlıkları tanımlar,<p>
etiketi paragrafları tanımlar. - HTML Dosyası: Her HTML dosyası,
<html>
etiketiyle başlar ve</html>
etiketiyle biter. Sayfanın başlık, meta bilgiler gibi unsurları<head>
, içeriği ise<body>
etiketleri arasında yer alır.
Örnek HTML Kodu:
<!DOCTYPE html>
<html>
<head>
<title>Basit Bir Web Sayfası</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk HTML sayfam.</p>
</body>
</html>
2. CSS (Cascading Style Sheets)
CSS, web sayfalarının stilini belirlemek için kullanılan bir stil dilidir. HTML, bir web sayfasının yapısını tanımlarken, CSS o sayfanın nasıl görüneceğini belirler. CSS ile renkler, yazı tipleri, hizalama, boşluklar ve hatta animasyonlar gibi birçok stil özelliği tanımlanabilir.
CSS’nin Kullanım Yöntemleri:
- Inline CSS: HTML etiketleri içinde stil özellikleri yazılır.
- Internal CSS: HTML dosyasının
<head>
bölümüne yazılır. - External CSS: Ayrı bir
.css
dosyasına yazılır ve HTML dosyasına bağlanır.
Örnek CSS Kodu:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}h1 {
color: #333;
text-align: center;
}p {
font-size: 16px;
color: #666;
}
3. JavaScript (JS)
JavaScript, web sayfalarına etkileşim ve dinamiklik kazandıran bir programlama dilidir. JavaScript, kullanıcıların bir düğmeye tıklaması, form doldurması ya da fareyi bir öğe üzerine getirmesi gibi olaylara yanıt verebilir. Ayrıca, veri işleme ve API ile iletişim kurma gibi ileri düzey işlevler sağlar.
JavaScript’in Kullanım Alanları:
- Dinamik İçerik: Sayfa yüklendiğinde içerik değiştirme.
- Form Doğrulama: Formlar gönderilmeden önce girişlerin doğrulanması.
- Animasyonlar: Öğelerin hareketli bir şekilde görünmesi.
- Veri İşleme: Web API’leri ile veri alışverişi yaparak dinamik veri yükleme.
Örnek JavaScript Kodu:
document.getElementById(“btn”).addEventListener(“click”, function() {
alert(“Butona tıkladınız!”);
});
4. HTML, CSS ve JavaScript Nasıl Birlikte Çalışır?
HTML, CSS ve JavaScript genellikle aynı sayfada birbirini tamamlar. HTML sayfanın içeriğini sunarken, CSS bu içeriğin görünümünü ayarlar ve JavaScript, sayfayı interaktif hale getirir.
Örnek Birleştirilmiş Yapı:
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS ve JS Birlikte</title>
<style>
body { background-color: #e0f7fa; }
h1 { color: #00796b; text-align: center; }
</style>
</head>
<body>
<h1>Merhaba, JavaScript Dünyası!</h1>
<button id=”btn”>Tıkla</button><script>
document.getElementById(“btn”).addEventListener(“click”, function() {
alert(“JavaScript ile etkileşim sağlandı!”);
});
</script>
</body>
</html>
5. Sonuç
HTML, CSS ve JavaScript, modern web geliştirme için olmazsa olmaz teknolojilerdir. HTML, yapı sağlar, CSS görsellik katar ve JavaScript, web sitelerini interaktif ve dinamik hale getirir. Bu üç teknoloji, birlikte kullanıldığında, kullanıcı deneyimini zenginleştiren güçlü ve işlevsel web siteleri oluşturmanıza olanak tanır.
Özet:
- HTML: Web sayfalarının yapısını ve içeriğini oluşturur.
- CSS: Sayfanın görünümünü ve stilini ayarlar.
- JavaScript: Web sayfasını interaktif hale getirir.
Web geliştirmeye başlarken bu üç teknolojiye hakim olmak, modern, çekici ve işlevsel web siteleri oluşturmanın ilk adımıdır.