HTML ve CSS Temelleri: Web Dünyasının İnşaat Malzemeleri ile Tanışın! 🧱🎨

Eğer bilişim teknolojileri alanında web geliştirme (web tasarım) yolculuğuna çıkıyorsanız, öğrenmeniz gereken iki ayrılmaz dost vardır: HTML ve CSS. Gelin, derslerimizin bu en temel konusunu bir ev inşaatı benzetmesiyle, en anlaşılır şekilde masaya yatıralım.

🧱 HTML Nedir? (Evin Tuğlaları ve İskeleti)

HTML'in açılımı HyperText Markup Language (Zengin Metin İşaretleme Dili) şeklindedir. Burada bilmeniz gereken en önemli kural şudur: HTML bir programlama dili değildir. HTML, tarayıcıya (Chrome, Edge vb.) sayfada hangi içeriğin nerede duracağını söyleyen bir işaretleme dilidir.

İnşaat Benzetmesi: HTML, bir evin kolonları, kirişleri ve tuğlaları gibidir. Evin odalarını, kapılarını ve pencerelerini HTML ile yerleştirirsiniz.

Nasıl Çalışır? HTML, etiketler (tag) kullanılarak yazılır. Kodlar < > işaretleri arasına yerleştirilir.

Örneğin bir başlık eklemek için <h1>Başlık</h1>, bir paragraf yazmak için <p>Metin</p> etiketi kullanılır.

HTML olmasaydı, web sitelerinde ne bir yazı, ne bir görsel ne de tıklanabilir bir buton olurdu. Her şey boş bir beyaz sayfadan ibaret kalırdı.

🎨 CSS Nedir? (Evin Boyası ve Dekoru)

HTML ile web sitemizin iskeletini kurduk, ancak her şey siyah-beyaz ve oldukça düzensiz görünüyor. İşte tam bu noktada sahneye CSS çıkıyor! CSS'in açılımı Cascading Style Sheets (Basamaklı Stil Şablonları) şeklindedir.

İnşaat Benzetmesi: CSS, o tuğladan evin boyası, duvar kağıdı, mobilyaları ve ışıklandırmasıdır.

Ne İşe Yarar? HTML ile eklediğimiz bir butonun rengini mavi yapmak, yazı tipini değiştirmek, görselleri yan yana dizmek veya sitenin arka planına güzel bir gradyan renk vermek tamamen CSS'in görevidir.

CSS sayesinde web siteleri sadece "çalışan" yapılar olmaktan çıkıp, göze hitap eden, modern ve kullanıcı dostu arayüzlere dönüşürler.

🏡 Bir Web Sitesi Nasıl Oluşur? (HTML + CSS + JavaScript)

Derslerimizde sıkça göreceğimiz bu üçlü yapıyı tam olarak kavramak için formülümüzü tamamlayalım:

HTML: Sitenin içeriğini ve yapısını kurar (Yazılar, butonlar, resimler).

CSS: Sitenin güzel görünmesini, renklenmesini ve düzenli durmasını sağlar.

JavaScript: Web sitesine hareket ve işlevsellik katar (Butona tıklayınca açılan menüler, animasyonlar, form kontrolleri).

💡 Bilişim Öğrencilerine Ders ve Sınav İpuçları

Etiketleri Kapatmayı Unutmayın: HTML yazarken en sık yapılan hata açılan bir etiketi (<div>) kapatmayı (</div>) unutmaktır. Bu küçük hata tüm sayfa düzeninizi bozabilir!

ID ve Class Farkına Dikkat Edin: CSS ile elementleri seçerken sınavlarda çokça karşınıza çıkar; tek bir elemente özel stil vermek için ID (#), birden fazla elemente aynı stili uygulamak için Class (.) seçicilerini kullanırız.

Ezberlemeyin, Mantığını Anlayın: Yüzlerce HTML etiketi ve CSS özelliği vardır. Bunların hepsini ezberlemenize gerek yok. Önemli olan hangi etiketin ne amaçla kullanıldığını bilmek ve bol bol pratik yapmaktır. Zamanla ellerinizin klavyede kendiliğinden kod yazdığını göreceksiniz.

Web dünyası, sınırları sizin hayal gücünüzle çizilmiş devasa bir oyun alanıdır. İlk kodlarınızı yazıp tarayıcıda çalıştırmanın verdiği o mutluluk, bilişimci olmanın en güzel yanlarından biridir!

Bir sonraki ders notumuzda, ilk web sayfamızı oluşturmak için temel bir HTML şablonunun nasıl yazıldığını kod örnekleriyle inceleyeceğiz. Takipte kalın!