Web Geliştirme Eğitimi – 5. Ders: HTML + CSS ile Kayıt Sayfası

Wiston · 18 Ağustos 2025

Merhaba Çaylak Forum ailesi

Bu derste artık gerçek bir web sayfası yapmaya başlayacağız. Önce HTML ile yapıyı oluşturacağız, ardından CSS ile görsel düzenlemeler yapacağız. Hadi başlayalım!

HTML Nedir?
HTML (HyperText Markup Language), web sitelerinin temel iskeletidir. Sayfa içindeki yazıları, başlıkları, görselleri ve bağlantıları tanımlar.

HTML tek başına tasarım yapmaz, sadece iskeleti oluşturur. Tasarımı CSS üstlenir.

CSS Nedir?
CSS (Cascading Style Sheets), HTML ile oluşturduğumuz iskelete stil ekler. Renk, yazı tipi, boyut, arka plan, kenarlık, düzen gibi görsel ayarları yapmamızı sağlar.

Kısaca:

HTML = İskelet
CSS = Tasarım

İlk HTML Sayfamız

HTML:

<!DOCTYPE html> <!-- Bu satır tarayıcıya bunun bir HTML5 belgesi olduğunu söyler --> <html lang="tr"> <!-- Sayfa dilini Türkçe olarak ayarlıyoruz --> <head> <meta charset="UTF-8"> <!-- Türkçe karakterlerin doğru çıkmasını sağlar --> <title>İlk Web Sayfam</title> <!-- Tarayıcı sekmesinde gözüken başlık --> </head> <body> <!-- Sayfanın görünen kısmı burada başlar -->

<h1>Merhaba Dünya!</h1> <!-- Büyük başlık -->
<p>Bu benim ilk web sayfam.</p> <!-- Paragraf -->

</body> </html>

✔ Yukarıdaki kodu kopyalayıp masaüstünde index.html dosyası oluşturup içine yapıştırırsan tarayıcıda açabilirsin.

CSS ile Sayfamıza Stil Ekleyelim

HTML dosyamızda <head> etiketinin içine CSS ekleyeceğiz.

HTML:

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>İlk Web Sayfam</title> <style> body { background-color: #f2f2f2; /* Sayfa arka plan rengini ayarladık */ font-family: Arial, sans-serif; /* Yazı tipini belirledik */ } h1 { color: darkblue; /* Başlık rengi */ text-align: center; /* Ortaya hizalama */ } p { color: #333; /* Yazı rengi */ font-size: 18px; /* Yazı boyutu */ } </style> </head> <body>

<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk web sayfam.</p>

</body> </html>

✔ Şimdi sayfanın rengi değişti, yazılar güzelleşti. İşte HTML + CSS iş birliği bu şekilde çalışır.

Daha Gelişmiş Bir Ana Sayfa

Şimdi biraz daha geliştirelim: Başlık, menü ve içerik bölümü ekleyelim.

HTML:

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Ana Sayfa</title> <style> body { margin: 0; /* Kenar boşluklarını sıfırladık */ font-family: Verdana, sans-serif; background-color: #fafafa; } header { background: #333; /* Koyu gri arka plan */ color: white; /* Yazı rengi */ padding: 20px; text-align: center; } nav { background: #444; padding: 10px; text-align: center; } nav a { color: white; /* Menü yazıları beyaz */ margin: 0 15px; text-decoration: none; /* Alt çizgi yok */ } nav a:hover { color: yellow; /* Üzerine gelince sarı */ } main { padding: 20px; } footer { background: #333; color: white; text-align: center; padding: 15px; margin-top: 20px; } </style> </head> <body>

<header>
<h1>Benim İlk Web Sitem</h1>
</header>

<nav>
<a href="#">Ana Sayfa</a>
<a href="#">Hakkında</a>
<a href="#">İletişim</a>
</nav>

<main>
<h2>Hoşgeldiniz!</h2>
<p>Bu sayfa HTML ve CSS öğrenme yolculuğumuzun bir parçasıdır.</p>
</main>

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

</body> </html>

✔ Artık elimizde basit bir ana sayfa tasarımı var:

Üstte başlık
Ortada menü
İçerik alanı
Altta footer

Özet

HTML sayfanın iskeletini oluşturur.
CSS sayfayı görsel olarak güzelleştirir.
Artık bir web sayfasını baştan sona yazmayı öğrendin!

6. derste CSS ile kutu yapıları, arka plan görselleri ve basit düzenlemeler yapacağız.

Ara

Web Geliştirme Eğitimi – 5. Ders: HTML + CSS ile Kayıt Sayfası

Wiston

Member

Similar threads

YASAL UYARI !!!!