html css ve javascript

web programlamaya yeni başlayan herkesin ilk karşılaştığı üç kavram vardır. html, css ve javascript. Bu yazımda sizlere bu üçünün ne olduğunu ve birbirleri ile nasıl bir ilişki içinde olduklarını anlatmaya çalışacağım. Uzun uzun tanımlar yapmak yerine konuya doğrudan bir örnek ile girelim.

Konuya doğrudan bir örnek vermek gerekirse sade HTML kullanarak bir çöp adam çizseydik karşımıza alttaki gibi bir şey çıkardı.

sadece html ile çizilmiş çöp adam

Gördüğünüz gibi adamımız var, başı kolu bacağı yerli yerinde ama o kadar. Rengi yok, şekli yok, kıpırdamıyor da. İşte html tam olarak budur. Sayfadaki başlığın, paragrafın, resmin, linkin ne olduğunu ve nerede duracağını belirler. Yani sayfanın iskeletini kurar.

Buna CSS eklersek alttaki gibi bir görüntü elde ederiz.

html ve css ile çizilmiş çöp adam

Aynı adam ama bu sefer giyinmiş, kuşanmış. css de html ile oluşturduğumuz etiketlere renk, boyut, yazı tipi, kenar boşluğu gibi özellikler vererek sayfayı göze hoş görünen bir hale getirir. Burada şunu unutmayın, css tek başına bir işe yaramaz. Mutlaka biçimlendireceği bir html olmalıdır.

son olarak html + css yanına javascript kodlarını da dahil ettiğimizde alttaki gibi (mecazi bir görüntü) bir görüntü karşımıza çıkar.

html css ve javascript ile hareket eden çöp adam

Adamımız artık hareket ediyor. javascript sayfaya hareket ve etkileşim katan kısımdır. Bir butona tıklandığında açılan pencere, form gönderilmeden önce yapılan kontroller, sayfa yenilenmeden değişen içerikler hep javascript ile yapılır.

Peki bu üçü birbirine nasıl bağlanıyor? kısaca özetleyecek olursak,

  • html : sayfada ne olacağını söyler. (iskelet)
  • css : bunların nasıl görüneceğini söyler. (kıyafet)
  • javascript : kullanıcı bir şey yaptığında ne olacağını söyler. (hareket)

Burada sıralama önemli. html olmadan css ve javascriptin üzerinde çalışacağı bir şey olmaz. css ve javascript olmadan da sayfa açılır ama sade ve hareketsiz bir sayfa olur.

Üçünün bir arada nasıl göründüğüne küçük bir örnek ile bakalım.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>html css javascript</title>
<style>
/* css: başlığı biçimlendiriyoruz */
h1 { color: #ff5c26; font-family: Arial; }
</style>
</head>
<body>

<!-- html: sayfada bir başlık ve bir buton var -->
<h1 id="baslik">Merhaba</h1>
<button onclick="degistir()">Tıkla</button>

<script>
// javascript: butona tıklanınca başlığın yazısını değiştiriyoruz
function degistir() {
    document.getElementById("baslik").innerHTML = "Merhaba Dünya";
}
</script>

</body>
</html>

kodların açıklamasını yapacak olursak,

h1 ve button etiketlerini html ile oluşturduk. style etiketi içinde yazdığımız css kodu ile başlığa renk ve yazı tipi verdik. script etiketi içindeki javascript kodu ise butona tıklandığında başlığın yazısını "Merhaba Dünya" olarak değiştiriyor. dosyayı .html uzantısı ile kaydedip tarayıcıda açarak deneyebilirsiniz.

html5 css ve javascript

Bu üç konunun her birini ayrı yazılarda daha detaylı anlattım. html için Html ve Html5 Nedir?, css için CSS Nedir?, javascript için de Javascript Nedir? yazılarıma göz atabilirsiniz.