Bir web sitesini oluşturan iki temel teknoloji var: HTML ve CSS. HTML sayfanın yapısını ve içeriğini tanımlar, CSS ise bu içeriğin nasıl göründüğünü belirler. Bir web sayfasının arkasında hep bu ikili çalışır; biri iskeleti kurar, diğeri görünümü şekillendirir. Bu iki teknoloji, web tasarımının ve geliştirmenin temelini oluşturur; bir site kurmak isteyen herkesin önce öğrenmesi gereken konular bunlardır. Bu rehberde HTML ve CSS'in temellerini, gerçek örneklerle ve sıradan bir düzende anlatıyoruz.
Web geliştirmeye başlamak isteyen herkes önce bu iki dille tanışır; ikisi de öğrenmesi görece kolay, ama doğru kullanıldığında güçlü sonuçlar verir. HTML ve CSS'i anlamak, hem kendi sayfanızı sıfırdan kurabilmenizi hem de tarayıcıda gördüğünüz her şeyin nasıl oluştuğunu kavramanızı sağlar. Bu rehber, konuyu hiç bilmeyen birinin bile takip edebileceği bir sırayla ilerliyor.
HTML Nedir
HTML, "HyperText Markup Language" yani Hiper Metin İşaretleme Dili ifadesinin kısaltmasıdır. Bir sayfadaki başlıkları, paragrafları, bağlantıları ve görselleri HTML etiketleriyle tanımlarsınız; sayfanın yapısını bu etiketler oluşturur. İçerik olmadan bir sayfa boş kalır, HTML olmadan da o içerik tarayıcıya anlatılamaz.
Her etiket belirli bir içerik türünü işaretler. <h1> bir başlığı, <p> bir paragrafı, <a> bir bağlantıyı temsil eder. Web tarayıcıları bu etiketleri okur ve içeriği buna göre ekrana çizer. Etiket sayısı sınırlı ve mantığı basit olduğu için HTML, programlamaya yeni başlayanlar için de rahat bir giriş noktasıdır.
HTML'in tüm etiketlerini ve kullanım örneklerini Mozilla'nın geliştirici dokümantasyonundan öğrenebilirsiniz; bu kaynak web geliştirmenin temellerini öğrenmek isteyenler için güvenilir bir başvuru noktasıdır. Yeni bir etiketle karşılaştığınızda önce buradan bakmak, yanlış kullanım alışkanlığı edinmenizi engeller.
HTML5 ile gelen semantik etiketler, sayfanın bölümlerine anlam katar. <header> sayfa başlığını, <nav> gezinme menüsünü, <main> ana içeriği, <article> bağımsız bir içerik parçasını, <footer> ise alt bilgiyi işaretler. Bu etiketleri kullanmak hem kodun okunmasını kolaylaştırır hem de ekran okuyucular ve arama motorları için sayfanın yapısını netleştirir.
CSS Nedir
CSS, "Cascading Style Sheets" yani Basamaklı Stil Sayfaları ifadesinin kısaltmasıdır. HTML sayfanın yapısını kurarken, CSS bu yapının nasıl göründüğünü belirler: renkler, yazı tipleri, boşluklar ve düzen CSS ile kontrol edilir.
CSS bir seçici ile başlar; hangi öğenin stillendirileceğini belirtir, ardından o öğeye uygulanacak kuralları sıralar. Örneğin p { color: #333; } yazdığınızda, sayfadaki tüm paragrafların rengini gri tona çevirmiş olursunuz. Aynı kural, aynı anda sayfadaki yüzlerce öğeye birden uygulanabilir.
CSS'in en pratik yanı, içeriği görünümden ayırmasıdır. Aynı HTML sayfasını farklı bir CSS dosyasıyla eşleştirdiğinizde görünüm baştan aşağı değişir, ama içerik aynı kalır. Tek bir stil dosyası, sitedeki tüm sayfaların görünümünü tek noktadan yönetmenizi sağlar; bir rengi bir kez değiştirdiğinizde, o renk kullanılan her yerde güncellenir.
Her HTML öğesi, CSS'te bir kutu olarak ele alınır. Bu kutu içerik, iç boşluk (padding), kenarlık (border) ve dış boşluktan (margin) oluşur; buna kutu modeli denir. Bir öğenin sayfada gerçekte ne kadar yer kapladığını anlamak için bu dört katmanı ayırt etmek gerekir.
HTML Yapısı ve Öğeler
Bir HTML belgesi iki ana bölümden oluşur: <head> ve <body>. Baş bölümü sayfa başlığı, karakter kodlaması ve arama motorlarına yönelik meta bilgileri barındırır; kullanıcıya doğrudan görünmez. Gövde bölümü ise ekranda gördüğünüz her şeyi, yani tüm metin, görsel ve diğer öğeleri içerir.
Gövdenin içinde en sık kullanılan öğe türleri şunlardır:
Başlık öğeleri (
<h1>–<h6>): içeriğe hiyerarşi kazandırırParagraf öğesi (
<p>): metin bloklarını tanımlarListe öğeleri (
<ul>,<ol>,<li>): sıralı veya sırasız listeler oluştururBağlantı öğesi (
<a>): sayfaları birbirine bağlar
Görsel, video ve ses öğeleri sayfayı zenginleştirir; form öğeleri ise kullanıcıdan veri toplamak için kullanılır. Bu temel öğe setini öğrenmek, HTML ile rahat çalışabilmenin ilk adımıdır.
Etiketler ayrıca öznitelik (attribute) taşıyabilir; bir bağlantı etiketindeki href hedef adresi, bir görseldeki src dosya yolunu, alt ise görselin metin karşılığını belirtir. Öznitelikler, etikete ek bilgi ekleyerek onu işlevsel hâle getirir; bunlar olmadan bir bağlantı nereye gideceğini, bir görsel neyi göstereceğini bilmez.
CSS ile Stillendirme
CSS özellikleri, bir öğenin görünümünü ayrıntılı biçimde belirler. Renk ve arka plan özellikleri metnin ve zeminin tonunu ayarlar. Yazı tipi özellikleri (font-family, font-size, font-weight) ise metnin nasıl göründüğünü kontrol eder; bu özellikler bir arada sayfanın tipografisini şekillendirir.
Boyut belirtirken kullanılan birimler de önemlidir. px sabit bir piksel değeri verirken, % üst öğeye göre oranlı bir boyut, em ve rem ise yazı tipi boyutuna göre ölçeklenen esnek birimlerdir. Renkler de #ffffff gibi onaltılık kodlarla, rgb(255, 255, 255) gibi sayısal değerlerle ya da doğrudan renk adıyla yazılabilir.
Düzen (layout), CSS'in en önemli yeteneklerinden biridir; öğelerin sayfada nereye yerleşeceğini ve nasıl boşluklanacağını belirler. Modern CSS bu işi flexbox ve grid gibi sistemlerle çözer; bu iki teknik aşağıda ayrı bir başlıkta ele alınıyor.
Duyarlı tasarım (responsive design), sayfanın masaüstü, tablet ve telefon ekranlarında düzgün görünmesini sağlar. Arama trafiğinin büyük bölümü mobil cihazlardan geldiği için, CSS'de bu uyarlamayı yapmak artık bir seçenek değil, bir zorunluluk.
Web Tasarımının Temelleri
İyi bir web tasarımı yalnızca güzel görünmez, aynı zamanda işlevseldir. HTML yapıyı kurar, CSS görünümü ve düzeni belirler; ikisi birlikte hem çekici hem kullanılabilir bir sayfa ortaya çıkarır.
Tutarlılık bunun temel şartlarından biridir. Aynı renk paleti, aynı yazı tipi ve aynı boşluk kuralları, siteye profesyonel bir görünüm kazandırır. CSS bu tutarlılığı tek bir stil dosyasıyla korumayı kolaylaştırır.
Kullanıcı deneyimi de tasarımın merkezindedir: sayfanın hızlı açılması, gezinmenin kolay olması ve içeriğin erişilebilir kalması gerekir. İyi yapılandırılmış HTML ile iyi tasarlanmış CSS bir araya geldiğinde, hem kullanıcıyı hem de arama motorunu memnun eden bir sayfa oluşur.
Görsel hiyerarşi de aynı derecede önemlidir. Büyük ve kalın bir başlık önce dikkat çeker; boşluk bırakmak ise öğeleri birbirinden ayırarak sayfanın okunmasını kolaylaştırır. Bir sayfadaki her şeyi aynı boyutta ve aynı ağırlıkta göstermek, okuyucunun neye önce bakması gerektiğini anlamasını zorlaştırır.
CSS Düzen Teknikleri
Flexbox ve grid'e geçmeden önce display özelliğini anlamak gerekir. Varsayılan olarak bir <div> blok, bir <span> ise satır içi elemandır; display: flex ya da display: grid yazdığınızda o öğe, içindeki elemanları bu düzen sistemlerine göre yerleştirmeye başlar.
Esnek kutu düzeni (flexbox), öğeleri tek bir yönde (satır ya da sütun) düzenlemenizi sağlar. Navigasyon menüleri, kart dizileri ve basit sayfa bölümleri için idealdir; öğelerin hizalanmasını, aralarındaki boşluğu ve sıralanma yönünü birkaç satır kodla kontrol edebilirsiniz.
Izgara düzeni (grid) ise iki boyutlu çalışır: satırları ve sütunları aynı anda yönetir. Karmaşık sayfa düzenlerinde, örneğin bir haber sitesinin ana sayfasında, öğeleri tam istediğiniz hücreye yerleştirmenizi sağlar.
Flexbox ve grid birlikte kullanıldığında, eskiden onlarca satır kod isteyen düzenler birkaç kuralla kurulabilir. İkisi de duyarlı tasarımı kolaylaştırır; ekran boyutu değiştiğinde öğeler otomatik olarak yeniden yerleşir.
CSS Seçicileri ve Özellikler
CSS bir öğeyi seçiciler (selectors) aracılığıyla hedefler. Öğe türüne göre (p, h1), sınıfa göre (.baslik) ya da kimliğe göre (#header) seçim yapabilirsiniz. Sınıflar birden fazla öğeye uygulanabilirken, kimlikler yalnızca tek bir öğeyi işaret eder.
Bu seçim sistemi, stilleri istediğiniz kadar dar ya da geniş bir alana uygulamanızı sağlar. Sınıfları anlamlı ve tekrar kullanılabilir biçimde adlandırmak, CSS dosyasını zaman içinde okunur ve sürdürülebilir tutar. Renk, boyut, kenarlık ve gölge gibi özellikler, bu seçicilerle hedeflenen öğelere uygulanır.
Aynı öğeye birden fazla kural çakışırsa, CSS özgüllük (specificity) kurallarına göre karar verir; bir kimlik seçici bir sınıf seçicisinden, bir sınıf seçici de bir etiket seçicisinden daha güçlüdür. Sözde sınıflar (pseudo-classes) ise bir öğenin belirli bir durumunu hedefler; örneğin :hover, fare öğenin üzerine geldiğinde uygulanacak stili tanımlar.
Web Geliştirmeye Devam Etmek
HTML ve CSS, web geliştirmenin başlangıç noktasıdır. Bu iki dili öğrendikten sonra sırada JavaScript var; sayfaya etkileşim ekler ve HTML ile CSS'le birlikte modern web'in üç temel yapı taşını oluşturur.
JavaScript öğrenmek, sabit bir sayfayı tıklamalara, form gönderimlerine ve kullanıcı hareketlerine tepki veren bir uygulamaya dönüştürmenin yoludur. Bu geçiş, HTML ve CSS bilgisi sağlam olduğunda çok daha kolay olur.
Web geliştirme çerçeveleri ve kütüphaneleri, bu üç dili daha büyük uygulamalar kurmak için bir araya getirir. Temel bilgi ne kadar sağlamsa, yeni bir araç ya da çerçeve öğrenmek de o kadar hızlı olur.
Yazdığınız sayfayı birden fazla tarayıcıda test etmek de bu sürecin bir parçasıdır. Chrome, Firefox, Safari gibi tarayıcılar bazı CSS özelliklerini küçük farklarla yorumlayabilir; bu yüzden bir sayfayı yalnızca tek bir tarayıcıda kontrol etmek, canlıya çıktıktan sonra beklenmedik görünüm sorunlarına yol açabilir.
HTML ve CSS'i Birlikte Kullanmak
HTML ve CSS ayrı dosyalarda yaşasa da, tarayıcıda birlikte çalışır. HTML içeriği ve yapıyı taşır, CSS bu yapıya stil ekler; ikisi bir araya geldiğinde sayfa ekranda oluşur.
CSS'i bir sayfaya bağlamanın üç yolu var. Ayrı bir dosya olarak <link> etiketiyle <head> içine eklemek en yaygın ve sürdürülebilir yöntemdir. <style> etiketiyle sayfanın içine gömmek ya da style özniteliğiyle tek bir öğeye doğrudan yazmak da mümkündür, ama bu iki yöntem büyük projelerde stilleri dağınık hale getirir.
İçeriği sunumdan ayırma ilkesi bu ilişkinin temelidir. Aynı HTML'i değiştirmeden, yalnızca CSS dosyasını güncelleyerek görünümü baştan yenileyebilirsiniz; ya da tam tersi, aynı stil dosyasını farklı sayfalara uygulayarak tutarlı bir görünüm kurabilirsiniz.
Bu ikisinde ustalaşmak pratikle gelir. Küçük bir sayfa kurmak, kod yazıp sonucu tarayıcıda görmek ve hatalardan geri dönüp düzeltmek, öğrenmenin en hızlı yoludur. Tarayıcının geliştirici araçları, yazdığınız HTML ve CSS'i anlık olarak incelemenizi ve test etmenizi sağlar.
Web Tasarımında En İyi Uygulamalar
Erişilebilirlik, gözden kaçırılmaması gereken bir ilkedir. Anlamlı HTML etiketleri kullanmak, görsellere açıklayıcı alt metin eklemek ve yeterli renk kontrastı sağlamak, sitenizi engelli kullanıcılar dahil herkes için kullanılabilir kılar.
Performans da tasarımın bir parçasıdır. Sıkıştırılmış görseller, gereksiz kod eklemeden yazılmış temiz HTML ve verimli CSS kuralları, sayfanın hızlı açılmasını sağlar; hızlı açılan sayfa hem kullanıcıyı hem arama motorunu memnun eder. Modern görsel formatları, örneğin WebP, aynı görsel kaliteyi daha küçük bir dosya boyutunda sunar.
Sadelik de aynı listeye girer. Az sayıda, tutarlı tasarım öğesi kullanmak kullanıcının sayfada kaybolmasını önler; aşırı kalabalık bir düzen ise en iyi içeriği bile fark edilmez hâle getirir.
Web Geliştirme Yolculuğu
HTML ve CSS öğrenmek bir başlangıç, bir final değil. Bu temelleri öğrendikten sonra sırasıyla JavaScript, ardından bir çerçeve ya da arka uç geliştirme gibi konular gelir.
Her yeni beceri öncekinin üzerine kurulur. HTML'de öğrendiğiniz etiket mantığı, CSS'te öğrendiğiniz seçici mantığına benzer bir düzenle karşınıza çıkar; bu tanıdıklık, yeni bir aracı öğrenmeyi hızlandırır.
Gerçek bir fikri çalışan bir sayfaya dönüştürmek, bu yolun en tatmin edici kısmıdır. HTML ve CSS, bu sürecin ilk ve en gerekli adımını oluşturur.
Sonuç
HTML bir sayfanın yapısını ve içeriğini kurar, CSS bu içeriğin nasıl göründüğünü belirler. İkisi birlikte, hem işlevsel hem görsel olarak tutarlı web sayfaları oluşturmanın temelini oluşturur.
Bu iki dili öğrenmek karmaşık bir hedef değildir; temel etiketlerle ve birkaç seçiciyle başlayıp zamanla flexbox, grid ve daha ileri tekniklere doğru ilerleyen kademeli bir süreçtir. Bu temeli kurduktan sonra kendi sayfanızı sıfırdan yazabilir ve web geliştirmenin sonraki adımlarına sağlam bir zeminde geçebilirsiniz.
Kaynaklar ve doğrulama
Bilgileri uygulamadan önce güncel ayrıntıları aşağıdaki birincil veya alan otoritesi kaynaklardan kontrol edin.
Yazan Celil Uyanikoglu
25 yıldır bilgi işlem piyasasında farklı dallarda uzmanlaşan bir Bilgisayar Mühendisi
Henüz yorum yok.
Sohbete katıl. Yorumlar yayınlanmadan önce moderasyondan geçer.