HTML ve CSS: Web Tasarımın Temel Taşları Hakkında Bilmeniz Gerekenler

Web tasarımına başlarken karşılaşacağınız ilk iki dil HTML ve CSS‘tir. Bu iki dil, modern web’in temelini oluşturur. Bir web sitesini bir binaya benzetirsek, HTML binanın iskeletidir, CSS ise binanın dış görünüşü, renkleri ve mimari stilidir. İkisi birbirinden ayrı düşünülemez.

HTML (HyperText Markup Language) Nedir?

HTML, bir web sayfasının içeriğini ve yapısını tanımlayan bir işaretleme dilidir. HTML, bir sayfanın temel iskeletini oluşturur; başlıklar, paragraflar, görseller, bağlantılar ve tablolar gibi tüm içerik öğeleri HTML etiketleriyle tanımlanır.

• HTML’in Amacı: Bir sayfanın ne olduğunu anlatmak. Örneğin, <h1> etiketi “Bu bir başlıktır”, <p> etiketi ise “Bu bir paragraftır” der.
• Temel Kavramlar:
  • Etiketler (Tags): <p>, <h1>, <a> gibi öğeleri tanımlayan işaretlerdir.
  • Öznitelikler (Attributes): Etiketlere ek bilgi verir. Örneğin, <img src="resim.jpg" alt="Açıklama"> etiketindeki src ve alt öznitelikleri, görselin kaynağını ve alternatif metnini belirtir.
  • Semantik HTML: İçeriğin anlamını vurgulayan etiketlerdir. <header>, <nav>, <article>, <footer> gibi etiketler, arama motorlarının ve erişilebilirlik araçlarının sitenizin yapısını daha iyi anlamasını sağlar.

CSS (Cascading Style Sheets) Nedir?

CSS, HTML ile oluşturulmuş bir web sayfasının görsel stilini tanımlayan bir stil şablonu dilidir. CSS olmadan bir HTML sayfası, sadece düz, siyah beyaz bir metin yığını gibi görünürdü. CSS, renkler, yazı tipleri, boyutlar, boşluklar, konumlandırma ve animasyonlar gibi estetik ve düzenle ilgili her şeyi kontrol etmenizi sağlar.

• CSS’in Amacı: HTML öğelerinin nasıl görüneceğini belirlemek.
• Temel Kavramlar:
  • Seçiciler (Selectors): Stil vermek istediğiniz HTML öğelerini seçmek için kullanılır. Örneğin, h1 { ... } tüm <h1> etiketlerini, .baslik { ... } ise class="baslik" özniteliğine sahip öğeleri seçer.
  • Kural Setleri (Rule Sets): Bir seçicinin ardından süslü parantez içine yazılan stil kurallarıdır. color: blue; font-size: 20px; gibi.
  • Kutu Modeli (Box Model): Her HTML öğesinin bir kutu olarak düşünüldüğü temel bir konsepttir. Bu kutunun içeriği, dolgusu (padding), kenarlığı (border) ve kenar boşluğu (margin) vardır.
  • Duyarlı Tasarım: Medya sorguları (media queries) ile farklı ekran boyutlarına göre sitenin görünümünü değiştirmek için kullanılır. Bu, sitenizin mobil uyumlu olmasını sağlar.

HTML ve CSS Neden Birlikte Kullanılmalı?

Bir web sitesinin etkili olması için HTML ve CSS’in birlikte ve uyum içinde çalışması gerekir.

• HTML içeriği yapılandırır, CSS bu içeriğe stil katar.
• HTML bir <button> etiketi oluşturur, CSS bu butonu renklendirir, boyutlandırır ve üzerine gelindiğinde animasyon ekler.
• HTML bir <nav> etiketiyle menüyü tanımlar, CSS bu menünün yatay mı dikey mi olacağını belirler ve bağlantılar arasına boşluklar ekler.

Bu iki dil, web tasarımının ayrılmaz bir parçasıdır. HTML’i bilmeden CSS’i veya tam tersini öğrenmek, eksik kalmanıza neden olur. Web tasarım yolculuğunuza başlarken bu iki temel taşı birlikte öğrenmeye odaklanmak, sizi daha sağlam bir kariyere hazırlar.