- Katılım
- 30 Nisan 2025
- Mesajlar
- 46
- Tepkime puanı
- 26
- Puanları
- 18
Bu derste öğreneceklerimiz:- Basit bir navigasyon menüsü oluşturmak
- İçerik alanı (ana bölüm) tasarlamak
- Footer (alt bilgi) eklemek
- CSS ile renk, yazı tipi ve düzen ayarlamak
Adım 1 – HTML Yapısını Kurma
HTML:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>6. Ders Web Sayfası</title> <link rel="stylesheet" href="style.css"> <!-- CSS dosyasını bağlama --> </head> <body>
<!-- Navigasyon Menüsü -->
<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">Eğitimler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
<!-- Ana İçerik -->
<main>
<h1>Hoş Geldiniz</h1>
<p>Bu 6. dersimizde basit bir web sayfası tasarımı yapıyoruz. HTML yapısını kurduk ve CSS ile görselleştireceğiz.</p>
</main>
<!-- Footer -->
<footer>
<p>© 2025 ÇaylakForum Web Geliştirme Eğitimleri</p>
</footer>
</body> </html>
Kod Açıklamaları:- [nav] etiketi → Menü alanı oluşturur.
- [ul] → Liste açar, [li] → liste elemanıdır. Menü linklerini buraya koyarız.
- [main] → Asıl içerik bölümü.
- [footer] → Sayfanın en alt kısmı.
Adım 2 – CSS ile Sayfayı Şekillendirme
CSS:
/* Genel ayarlar [I]/
body {
font-family: Arial, sans-serif; /[/I] Yazı tipi [I]/
margin: 0;
padding: 0;
background-color: #f4f4f4; /[/I] Sayfa arka plan rengi */
}
/* Navigasyon menüsü [I]/
nav {
background-color: #333; /[/I] Menü arka planı [I]/
padding: 10px;
}
nav ul {
list-style: none; /[/I] Noktaları kaldır [I]/
margin: 0;
padding: 0;
display: flex; /[/I] Yatay menü [I]/
}
nav ul li {
margin-right: 20px; /[/I] Menü elemanları arası boşluk [I]/
}
nav ul li a {
color: white; /[/I] Yazı rengi [I]/
text-decoration: none; /[/I] Alt çizgi yok [I]/
font-weight: bold;
}
nav ul li a:hover {
color: #ff9800; /[/I] Üzerine gelince turuncu olur */
}
/* İçerik */
main {
padding: 20px;
}
main h1 {
color: #333;
}
main p {
font-size: 18px;
}
/* Footer */
footer {
background-color: #222;
color: white;
text-align: center;
padding: 15px;
margin-top: 20px;
}- background-color → Arka plan rengi verir.
- display: flex; → Menü elemanlarını yan yana dizer.
- :hover → Fare üzerine gelince efekt uygular.
- margin-top: 20px; → Footer’ı yukarıdan biraz boşlukla ayırır.
Çıktı (Ne elde edeceğiz?)- Üstte siyah bir menü olacak.
- Ortada "Hoş Geldiniz" başlığı ve yazısı.
- Altta siyah bir footer olacak.
- Menüye fare ile gelince linkler turuncuya dönecek.
