HTML ve CSS ile İlk Web Sayfanı Yap: Adım Adım Rehber

İnternette gezdiğin her sayfa, iki temel dilin birlikte çalışmasıyla ortaya çıkar: HTML sayfanın içeriğini ve iskeletini kurar, CSS ise o iskelete renk, boşluk ve düzen verir. İyi haber şu: ikisi de programlama dili kadar karmaşık değildir ve ilk sonucu birkaç dakika içinde ekranda görebilirsin.

Bu rehberin sonunda şunları yapabileceksin:

• Bir HTML sayfasının iskeletini sıfırdan yazmak,
• Başlık, paragraf, liste, bağlantı ve resim eklemek,
• CSS ile renkleri ve yazı tipini değiştirmek,
• Kutu modelini (margin, border, padding) anlayıp içeriği kartlara yerleştirmek,
• Sayfanın telefonda da düzgün görünmesini sağlamak.

Rehber boyunca "Deniz" adında hayali bir öğrencinin kişisel sayfasını adım adım kuracağız. Sen kendi adını, kendi sevdiklerini yazarak ilerle. Kodları tarayıcıdaki editörde deneyebilir ya da bilgisayarındaki herhangi bir metin düzenleyiciyle index.html adında bir dosya oluşturup tarayıcıda açabilirsin.

1. HTML nedir, nasıl çalışır?

HTML, metnin her parçasına "bu bir başlık", "bu bir liste", "bu bir resim" diye etiket yapıştırır. Etiketler köşeli parantezlerle yazılır ve çoğu çift olarak gelir: bir açılış etiketi <p>, bir de içinde eğik çizgi olan kapanış etiketi </p>. Aradaki her şey o etiketin içeriğidir.

Tarayıcı bu etiketleri okur ama ekrana yazmaz; onun yerine içeriği etikete uygun şekilde gösterir. Bir başlık büyük ve kalın, bir liste maddeli görünür.

Her sayfanın iskeleti

Her HTML sayfası aynı temel yapıyla başlar. Bunu bir kez öğrendiğinde her yeni sayfada kopyalayıp kullanabilirsin:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Benim Sayfam</title>
</head>
<body>
  <h1>Merhaba, ben Deniz!</h1>
  <p>Bu benim ilk web sayfam.</p>
</body>
</html>

Satır satır ne anlama geldiğine bakalım:

• <!DOCTYPE html>: Tarayıcıya "bu modern bir HTML sayfası" der. Her zaman en üstte durur.
• <html lang="tr">: Sayfanın tamamını sarar. lang="tr" sayfanın Türkçe olduğunu belirtir; ekran okuyucular ve arama motorları bu bilgiyi kullanır.
• <head>: Sayfada görünmeyen ama tarayıcının bilmesi gereken bilgiler buradadır.
• <meta charset="UTF-8">: ç, ğ, ı, ö, ş, ü gibi harflerin doğru görünmesini sağlar. Bunu unutursan Türkçe karakterler bozuk çıkabilir.
• <title>: Tarayıcı sekmesinde görünen başlıktır.
• <body>: Ekranda gördüğün her şey bunun içine yazılır.

2. İçerik ekleme: başlık, paragraf, liste, resim, bağlantı

Şimdi iskeletin içini dolduralım. Aşağıdaki sayfa, kişisel bir sayfada olabilecek temel parçaların hepsini içeriyor:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Deniz'in Sayfası</title>
</head>
<body>
  <h1>Merhaba, ben Deniz!</h1>
  <p>11 yaşındayım. <strong>Uzay</strong> ve <em>kediler</em> en sevdiğim konular.</p>

  <h2>Sevdiğim şeyler</h2>
  <ul>
    <li>Yıldızlara bakmak</li>
    <li>Lego ile robot yapmak</li>
    <li>Kod yazarak oyun tasarlamak</li>
  </ul>

  <h2>Bu yılki hedeflerim</h2>
  <ol>
    <li>Python ile bir oyun yazmak</li>
    <li>Kendi web sayfamı yayınlamak</li>
  </ol>

  <h2>Kedim Pamuk</h2>
  <img src="pamuk.jpg" alt="Koltukta uyuyan beyaz kedi Pamuk" width="300">

  <p>Kod öğrenmek için <a href="https://kuzeykutbu.com/Learn">Kuzey Kutbu derslerine</a> bakıyorum.</p>
</body>
</html>

Başlıklar ve paragraflar

HTML'de altı başlık seviyesi vardır: <h1> en büyük ve en önemli, <h6> en küçüğüdür. Bir sayfada genellikle tek bir <h1> olur (sayfanın ana başlığı); bölümler için <h2>, alt bölümler için <h3> kullanılır. Başlıkları yazıyı büyütmek için değil, içeriği düzenlemek için seç. Görünüşü daha sonra CSS ile istediğin gibi değiştirebilirsin.

Paragraflar <p> içine yazılır. Bir kelimeyi vurgulamak için <strong> (güçlü vurgu, genelde kalın görünür) ve <em> (hafif vurgu, genelde eğik görünür) kullanılır.

Listeler

İki tür liste vardır. Sıranın önemli olmadığı maddeler için sırasız liste <ul>, adımlar veya sıralamalar için sıralı liste <ol> kullanılır. İki durumda da her madde <li> etiketiyle yazılır. Sıralı listede numaraları sen yazmazsın, tarayıcı kendisi ekler.

Resim

<img> etiketinin kapanışı yoktur; bütün bilgiyi özelliklerle (attribute) alır:

• src: Resim dosyasının yolu. pamuk.jpg yazdıysan, resim HTML dosyanla aynı klasörde olmalı.
• alt: Resim yüklenemezse veya sayfayı ekran okuyucuyla dinleyen biri varsa okunacak açıklama. "resim" gibi boş bir şey değil, resimde ne olduğunu anlatan bir cümle yaz.
• width: Genişlik (piksel). Vermezsen resim kendi boyutunda görünür ve çok büyük olabilir.

Bağlantı

Bağlantılar <a> etiketiyle yapılır. href özelliğine gidilecek adresi, etiketin içine de tıklanacak metni yazarsın. Bağlantı metni "buraya tıkla" yerine nereye gidileceğini anlatırsa hem okuyanlar hem arama motorları için daha anlaşılır olur.

3. CSS ile renk ve yazı tipi

Sayfan şu an çalışıyor ama biraz sade. CSS, "şu etiketlerin görünüşü şöyle olsun" diye kurallar yazmanı sağlar. Bir CSS kuralı üç parçadan oluşur:

• Seçici: Hangi elemanlar etkilenecek? (h1, body, a…)
• Özellik: Neyi değiştireceksin? (color, background-color…)
• Değer: Ne olacak? (#1e6fd9, center…)

Başlangıç için CSS'i <head> içine, bir <style> etiketi arasına yazmak en kolayıdır. Aşağıdaki bloğu <title> satırının hemen altına ekle:

<style>
  body {
    background-color: #f0f7ff;
    color: #223344;
    font-family: Arial, sans-serif;
    line-height: 1.6;
  }
  h1 {
    color: #1e6fd9;
    text-align: center;
  }
  h2 {
    color: #e8730c;
    border-bottom: 2px solid #e8730c;
  }
  a {
    color: #1e6fd9;
  }
</style>

Bu kuralları satır satır okuyalım:

• background-color arka plan rengini, color yazı rengini belirler.
• font-family: Arial, sans-serif; yazı tipini Arial yapar; Arial bulunamazsa tarayıcı herhangi bir düz (sans-serif) yazı tipi kullanır.
• line-height: 1.6; satır aralığını açar, uzun metinleri okumak kolaylaşır.
• text-align: center; başlığı ortalar.
• border-bottom, h2 başlıklarının altına 2 piksel kalınlığında düz turuncu bir çizgi çeker.

Renkleri nasıl yazarım?

Renkleri üç yaygın şekilde yazabilirsin:

Yukarıdaki tablodaki #1e6fd9 ile rgb(30, 111, 217) aynı mavidir. Çoğu kod editöründe ve tarayıcının geliştirici araçlarında renk seçici bulunur; beğendiğin rengi seçip kodunu kopyalayabilirsin.

4. Kutu modeli: her şey bir kutudur

CSS'te en önemli fikirlerden biri şudur: tarayıcı sayfadaki her elemanı dikdörtgen bir kutu olarak görür. Bir başlık da, bir paragraf da, bir resim de kutudur. Her kutunun dört katmanı vardır, içten dışa doğru:

1. İçerik (content): Yazının veya resmin kendisi.
2. İç boşluk (padding): İçerik ile kenarlık arasındaki boşluk. Kutunun arka plan rengi bu alanı da boyar.
3. Kenarlık (border): Kutunun çerçevesi.
4. Dış boşluk (margin): Kutunun diğer kutularla arasındaki mesafe. Her zaman şeffaftır.

Bunu bir fotoğraf çerçevesine benzetebilirsin: fotoğraf içerik, fotoğrafın etrafındaki beyaz karton padding, tahta çerçeve border, çerçeveyi duvardaki diğer çerçevelerden ayıran boşluk da margin'dir.

Şimdi bu bilgiyi kullanıp içeriği bir kart içine koyalım. Bunun için <div> etiketini kullanacağız. <div> kendi başına hiçbir görünüşü olmayan, sadece içindekileri gruplayan bir kutudur. Ona bir class (sınıf) adı verip CSS'te .kart şeklinde, başına nokta koyarak seçiyoruz:

<style>
  * {
    box-sizing: border-box;
  }
  .kart {
    background-color: white;
    padding: 20px;
    border: 3px solid #1e6fd9;
    border-radius: 12px;
    margin: 20px auto;
    max-width: 600px;
  }
</style>

<div class="kart">
  <h2>Sevdiğim şeyler</h2>
  <ul>
    <li>Yıldızlara bakmak</li>
    <li>Lego ile robot yapmak</li>
  </ul>
</div>

Bu örnekteki yeni özellikler:

• padding: 20px; içerikle kenarlık arasına her yönden 20 piksel boşluk koyar.
• border: 3px solid #1e6fd9; 3 piksel kalınlığında, düz, mavi bir çerçeve çizer.
• border-radius: 12px; köşeleri yuvarlatır.
• margin: 20px auto; üstten ve alttan 20 piksel boşluk bırakır; sağ ve soldaki auto ise kartı yatayda ortalar.
• max-width: 600px; kartın 600 pikselden geniş olmasını engeller. Geniş ekranlarda satırlar çok uzamaz.
• * { box-sizing: border-box; } bütün elemanlar için genişlik hesabını kolaylaştırır. Bu satır olmadan, genişliği 600 piksel olan bir kutuya padding ve border eklediğinde kutu 600 pikselden büyük çıkar. border-box ile padding ve border verilen genişliğin içinde kalır.

5. Mobil uyum: telefonda da düzgün görünsün

Sayfanı telefonda açanlar da olacak. Mobil uyumlu bir sayfa için üç şey yeterli bir başlangıçtır:

1. viewport etiketi: <head> içine eklenen <meta name="viewport" content="width=device-width, initial-scale=1"> satırı, telefona "sayfayı ekran genişliğinde göster" der. Bu satır olmazsa telefon, sayfayı geniş bir masaüstü ekranı gibi çizip küçültür ve yazılar okunamayacak kadar ufalır.
2. Esnek resimler: max-width: 100%; resmin, içinde bulunduğu kutudan taşmasını engeller. height: auto; da en-boy oranını korur.
3. Medya sorgusu (media query): @media (max-width: 600px) { ... } içindeki kurallar yalnızca ekran 600 piksel veya daha darsa çalışır. Böylece geniş ekranda yan yana duran kartları telefonda alt alta dizebilirsin.

Aşağıda her şeyin birleştiği tam sayfa var. Kartları yan yana dizmek için display: flex; kullanıyoruz; gap kartların arasına boşluk koyar, flex: 1; ise kartların eşit genişlikte olmasını sağlar. Medya sorgusundaki flex-direction: column; dar ekranda kartları alt alta getirir:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Deniz'in Sayfası</title>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 16px;
      background-color: #f0f7ff;
      color: #223344;
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }
    h1 {
      color: #1e6fd9;
      text-align: center;
    }
    img {
      max-width: 100%;
      height: auto;
      border-radius: 12px;
    }
    .kartlar {
      display: flex;
      gap: 16px;
    }
    .kart {
      flex: 1;
      background-color: white;
      padding: 20px;
      border: 3px solid #1e6fd9;
      border-radius: 12px;
    }
    @media (max-width: 600px) {
      .kartlar {
        flex-direction: column;
      }
      h1 {
        font-size: 24px;
      }
    }
  </style>
</head>
<body>
  <h1>Merhaba, ben Deniz!</h1>
  <div class="kartlar">
    <div class="kart">
      <h2>Sevdiğim şeyler</h2>
      <ul>
        <li>Yıldızlara bakmak</li>
        <li>Lego ile robot yapmak</li>
      </ul>
    </div>
    <div class="kart">
      <h2>Kedim Pamuk</h2>
      <img src="pamuk.jpg" alt="Koltukta uyuyan beyaz kedi Pamuk">
    </div>
  </div>
</body>
</html>

Bu sayfayı tarayıcıda açtıktan sonra pencereyi daralt: belli bir genişliğin altında kartların alt alta geçtiğini, başlığın küçüldüğünü göreceksin. Telefon görünümünü bilgisayarda denemek için geliştirici araçlarındaki cihaz görünümü düğmesini de kullanabilirsin.

Sık yapılan hatalar

1. Kapanış etiketini unutmak. <h2> açıp kapatmayı unutursan, altındaki bütün metin başlık gibi görünebilir. Tarayıcı hata mesajı göstermez, sadece garip bir görünüm çıkar. Garip bir şey gördüğünde ilk iş, etiketlerin doğru kapandığını kontrol et.
2. Etiketleri çapraz kapatmak. <p><strong>Merhaba</p></strong> yanlıştır. İlk açılan en son kapanır: <p><strong>Merhaba</strong></p>.
3. Resim görünmüyor. En sık sebep dosya yolu: resim HTML dosyasıyla aynı klasörde değil ya da adı farklı yazılmış. Pamuk.JPG ile pamuk.jpg birçok sunucuda farklı dosyalardır; dosya adlarında küçük harf ve Türkçe karakter içermeyen isimler kullan.
4. CSS'te noktalı virgülü veya süslü parantezi unutmak. Bir satırın sonundaki ; eksikse, ondan sonraki özellik çoğu zaman yok sayılır. Kapanmamış bir } ise alttaki kuralların hepsini bozabilir.
5. Sınıf seçicisinde noktayı unutmak. HTML'de class="kart" yazılır ama CSS'te .kart diye seçilir. Nokta olmadan kart yazarsan CSS, <kart> adında bir etiket arar ve hiçbir şey değişmez.
6. charset veya viewport satırını atlamak. Birincisi olmadan Türkçe harfler bozulabilir, ikincisi olmadan sayfa telefonda minicik görünür.

Kendin dene

Aşağıdaki görevleri sırayla yap. Her biri bir öncekinin üzerine kurulu.

1. Kendi iskeletin: İskelet kodunu yaz, başlığa kendi adını, paragrafa kendini anlatan iki cümle koy ve tarayıcı sekmesindeki başlığı değiştir.
2. Listeler: En sevdiğin üç oyun için bir sırasız liste, bir yemeğin yapılış adımları için bir sıralı liste ekle.
3. Renk teması: Sayfan için bir arka plan rengi, bir yazı rengi ve bir vurgu rengi seç. Başlıklar ve bağlantılar vurgu rengini kullansın.
4. Kartlar: İçeriğini en az üç karta böl. Kartlara farklı kenarlık renkleri ver, padding değerini 5px, 20px ve 40px yaparak farkı gözlemle.
5. Mobil test: viewport satırını ve medya sorgusunu ekle. Pencereyi daralttığında kartlar alt alta geçsin, ayrıca dar ekranda arka plan rengi de değişsin.

Sırada ne var?

• Etiketleri ve CSS özelliklerini alıştırmalarla pekiştirmek için HTML derslerine geç.
• Sayfana etkileşim (düğmeye basınca değişen yazılar, küçük oyunlar) eklemek istiyorsan sıradaki dil JavaScript: JavaScript dersleri ve değişken, koşul, döngü rehberi iyi bir başlangıç.
• Tarayıcıda bir oyun yapmayı merak ediyorsan JavaScript ile Pong oyunu rehberine geç; orada HTML'deki canvas alanını JavaScript ile canlandıracaksın.
• Diğer konular için tüm derslere göz at.

Sık sorulan sorular

HTML ve CSS öğrenmek için bir program kurmam gerekir mi?

Hayır. Bilgisayarındaki herhangi bir metin düzenleyiciyle index.html adında bir dosya oluşturup tarayıcıda açman yeterli. Hiçbir şey kurmadan denemek istersen Kuzey Kutbu'ndaki tarayıcı tabanlı kod editörünü de kullanabilirsin.

HTML bir programlama dili mi?

HTML bir işaretleme dilidir: içeriğin ne olduğunu (başlık, liste, resim) tarif eder ama karar veremez veya tekrar yapamaz. CSS de görünüşü tarif eden bir stil dilidir. Koşul ve döngü gibi programlama yapıları için sayfaya JavaScript eklenir.

CSS'i ayrı bir dosyaya yazmak daha mı iyi?

Tek sayfalık bir başlangıç projesinde style etiketi içinde yazmak en kolayıdır. Sayfa sayısı arttığında CSS'i style.css gibi ayrı bir dosyaya taşıyıp her sayfaya link etiketiyle bağlamak daha düzenlidir, çünkü bir değişikliği tek yerden yaparsın.

Resmim sayfada neden görünmüyor?

En sık sebep dosya yoludur. Resmin HTML dosyasıyla aynı klasörde olduğundan ve src içindeki adın, büyük-küçük harf ve uzantı dahil, dosya adıyla birebir aynı olduğundan emin ol. Dosya adlarında boşluk ve Türkçe karakter kullanmamak da sorunları azaltır.

margin ile padding arasındaki fark nedir?

padding, içerik ile kenarlık arasındaki iç boşluktur ve kutunun arka plan rengiyle boyanır. margin ise kenarlığın dışında kalan, kutuyu diğer kutulardan ayıran şeffaf dış boşluktur.

Sayfamın telefonda düzgün görünmesi için en önemli adım nedir?

head içine viewport meta etiketini eklemek. Bu satır olmadan telefon sayfayı masaüstü genişliğinde çizip küçültür. Ardından resimlere max-width: 100% vermek ve dar ekranlar için bir medya sorgusu yazmak iyi bir başlangıçtır.