HTML ve CSS Kullanarak Basit Web Sitesi Nasıl Yapılır? (Detaylı Kod Rehberi)

 

📘 HTML ve CSS ile Basit Web Sayfası Kod Örneği – Adım Adım Rehber (2025)

🔎 Giriş: HTML ve CSS Nedir?

HTML Nedir?

HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan işaretleme dilidir. Web tarayıcıları tarafından yorumlanır ve sayfanın içerik yapısını belirler.

Örnek: Başlık, paragraf, görsel, bağlantı, liste vb. tüm öğeler HTML ile tanımlanır.

CSS Nedir?

CSS (Cascading Style Sheets) ise HTML ile oluşturulan yapıya stil kazandırmak için kullanılır. Renkler, yazı tipleri, konumlandırmalar, arka planlar gibi görsel özellikler CSS ile sağlanır.

CSS, HTML'nin görünümünü güzelleştirir ve kullanıcı deneyimini iyileştirir.

🛠️ Gerekli Araçlar

Bu örneği uygulamak için sadece bir kod editörü ve web tarayıcısı yeterli:

🧱 HTML Sayfa Yapısı

Aşağıdaki örnek, basit bir HTML sayfa yapısını göstermektedir:

html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Benim İlk Web Sayfam</title>
</head>
<body>
  <h1>Merhaba Dünya!</h1>
  <p>Bu, HTML ve CSS kullanarak oluşturduğum ilk sayfa.</p>
</body>
</html>

Açıklamalar:

  • <!DOCTYPE html>: HTML5 standardında bir belge olduğunu belirtir.

  • <html>: Tüm HTML içeriğini kapsayan kök etikettir.

  • <head>: Sayfa hakkında meta bilgileri içerir.

  • <body>: Kullanıcının göreceği içerik burada yer alır.

🎨 CSS ile Stil Ekleme

Şimdi bu sayfaya CSS ile stil kazandıralım.

Yöntem 1: Dahili (Internal) CSS

html

<head>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
      text-align: center;
    }
    h1 {
      color: navy;
    }
    p {
      color: darkgray;
    }
  </style>
</head>

🧩 HTML + CSS Birleşik Örnek

Aşağıda tam bir örnek verilmiştir:

html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Benim İlk Sayfam</title>
  <style>
    body {
      background-color: #fff8f0;
      font-family: Verdana, sans-serif;
      margin: 40px;
    }
    h1 {
      color: #ff6600;
      font-size: 36px;
    }
    p {
      font-size: 18px;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Merhaba HTML ve CSS!</h1>
  <p>Bu, ilk web sayfamız. Kodlamaya hoş geldin!</p>
</body>
</html>

Bu sayfayı .html uzantısıyla kaydedip tarayıcıda açtığında basit ama şık bir sonuç göreceksin.

📐 Sayfaya Görsel Eklemek

html

<img src="https://via.placeholder.com/300" alt="Örnek Görsel" />

Açıklama:

  • src: Görselin URL adresini belirtir.

  • alt: Görsel yüklenemezse gösterilecek alternatif metin.

🔗 Bağlantı Eklemek

html

<a href="https://www.google.com" target="_blank">Google'a Git</a>

  • target="_blank": Bağlantıyı yeni sekmede açar.


📋 Liste Yapısı

Sırasız Liste (ul)

html

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Sıralı Liste (ol)

html

<ol>
  <li>Başlık ekle</li>
  <li>Paragraf yaz</li>
  <li>CSS ile stil ver</li>
</ol>


🧩 HTML Sayfasında Yaygın Kullanılan Bölümler

Bir web sayfasını daha profesyonel yapmak için şu yapısal HTML etiketlerini kullanabiliriz:

1. header – Üst Kısım

Web sitesinin en üst kısmı, genellikle logo ve başlığı içerir.

html

<header>
  <h1>Benim Blog Sayfam</h1>
</header>

2. nav – Navigasyon Menüsü

Site içi bağlantıları içerir.

html

<nav>
  <ul>
    <li><a href="#anasayfa">Anasayfa</a></li>
    <li><a href="#hakkimda">Hakkımda</a></li>
    <li><a href="#iletisim">İletişim</a></li>
  </ul>
</nav>

3. section – İçerik Bölümü

Farklı içerikleri bölümlere ayırmak için kullanılır.

html

<section id="hakkimda">
  <h2>Hakkımda</h2>
  <p>Ben bir web geliştiricisiyim.</p>
</section>

4. footer – Alt Bilgi Alanı

Sayfanın alt kısmı, genellikle iletişim, telif hakkı bilgilerini içerir.

html

<footer>
  <p>© 2025 Tüm Hakları Saklıdır.</p>
</footer>

🎨 Dış CSS Dosyası Kullanımı

Kodları daha düzenli hale getirmek için CSS stillerini harici bir dosyada tutabiliriz.

Adım 1: HTML Dosyasında CSS Bağlantısı

html

<head>
  <link rel="stylesheet" href="style.css">
</head>

Adım 2: style.css Dosyası Oluşturun

css

body {
  font-family: Arial, sans-serif;
  background-color: #fdf6e3;
  color: #333;
}

h1 {
  color: #ff6600;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #0055ff;
}

📱 Responsive Tasarım (Mobil Uyumlu Sayfa)

Responsive tasarım sayesinde siteniz farklı ekran boyutlarında da düzgün görünebilir. Bunu yapmanın yollarından biri media query kullanmaktır.

Örnek:

css

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  nav ul {
    flex-direction: column;
  }
}

Bu CSS kodu, ekran genişliği 768 pikselden küçükse yazı boyutunu küçültür ve menüyü dikey hale getirir.

✅ Tam Sayfa Örneği – Kişisel Web Sayfası

Aşağıda HTML ve CSS’yi entegre kullanarak oluşturulan temel bir kişisel web sayfası örneği yer almaktadır.

📄 index.html:

html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ahmet'in Sayfası</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Ahmet Kaya</h1>
    <p>Web Geliştirici</p>
  </header>

  <nav>
    <ul>
      <li><a href="#hakkimda">Hakkımda</a></li>
      <li><a href="#projeler">Projeler</a></li>
      <li><a href="#iletisim">İletişim</a></li>
    </ul>
  </nav>

  <section id="hakkimda">
    <h2>Hakkımda</h2>
    <p>Merhaba! Ben Ahmet. HTML, CSS ve JavaScript ile web geliştiriyorum.</p>
  </section>

  <section id="projeler">
    <h2>Projeler</h2>
    <ul>
      <li>Kişisel Blog</li>
      <li>Responsive Portfolyo</li>
    </ul>
  </section>

  <section id="iletisim">
    <h2>İletişim</h2>
    <p>E-posta: ahmet@example.com</p>
  </section>

  <footer>
    <p>© 2025 Ahmet Kaya</p>
  </footer>
</body>
</html>

📄 style.css:

css

body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f4f8;
}

header {
  background-color: #1e90ff;
  color: white;
  text-align: center;
  padding: 20px;
}

nav ul {
  display: flex;
  justify-content: center;
  background-color: #333;
  padding: 10px;
  list-style: none;
  margin: 0;
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

section {
  padding: 20px;
  margin: 20px;
  background-color: white;
  border-radius: 8px;
}

footer {
  text-align: center;
  padding: 15px;
  background-color: #333;
  color: white;
}

📘 Yeni Başlayanlar İçin Kaynak Önerileri

HTML ve CSS öğrenmek isteyenler için ücretsiz ve kaliteli kaynaklar:

  1. W3Schools – https://www.w3schools.com

  2. MDN Web Docs – https://developer.mozilla.org

  3. freeCodeCamp – https://www.freecodecamp.org

  4. CSS Tricks – https://css-tricks.com

📌 Sık Sorulan Sorular (FAQ)

❓ HTML öğrenmek ne kadar sürer?

Temel HTML yapısını öğrenmek birkaç gün içinde mümkündür. Ancak iyi bir seviyeye gelmek için pratik şarttır.

❓ CSS ile mobil uyumlu site yapmak zor mu?

Hayır. media query ve flexbox gibi teknikleri öğrenerek kolayca responsive tasarım yapılabilir.

❓ Bootstrap kullanmalı mıyım?

Başlangıçta evet. Bootstrap, hızlı prototip geliştirme için oldukça kullanışlıdır. Ancak zamanla kendi CSS stilinizi yazmak daha iyidir.




















Yorumlar