- Katılım
- 30 Nisan 2025
- Mesajlar
- 46
- Tepkime puanı
- 26
- Puanları
- 18
Dersin Amacı
Bu derste HTML ve CSS kullanarak basit bir ana sayfa tasarlayacağız ve kodların ne işe yaradığını öğreneceğiz.
HTML Yapısı ve Açıklamaları
HTML:
<!DOCTYPE html> <!-- HTML5 doküman tipi -->
<html lang="tr"> <!-- Sayfa dili Türkçe -->
<head>
<meta charset="UTF-8"> <!-- Türkçe karakter desteği -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Mobil uyum için -->
<title>Benim Web Sitem</title> <!-- Tarayıcı sekmesinde görünen başlık -->
<link rel="stylesheet" href="style.css"> <!-- CSS dosyasını bağlar -->
</head>
<body>
<header> <!-- Sayfanın üst bölümü -->
<h1>Benim Web Sitem</h1> <!-- Ana başlık -->
<nav> <!-- Menü alanı -->
<ul> <!-- Liste başlangıcı -->
<li><a href="#">Ana Sayfa</a></li> <!-- Menü linki -->
<li><a href="#">Hakkında</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
</header>
<main> <!-- Ana içerik bölümü -->
<section class="hero"> <!-- Giriş veya kahraman bölümü -->
<h2>Hoş Geldiniz!</h2> <!-- Alt başlık -->
<p>Bu benim ilk web sayfam. HTML ve CSS ile tasarlandı.</p> <!-- Açıklama metni -->
<button>Başla</button> <!-- Buton -->
</section>
<section class="features"> <!-- Özellikler bölümü -->
<div class="feature"> <!-- Tek özellik kutusu -->
<h3>Özellik 1</h3> <!-- Küçük başlık -->
<p>Buraya bir açıklama yazabilirsiniz.</p>
</div>
<div class="feature">
<h3>Özellik 2</h3>
<p>Buraya bir açıklama yazabilirsiniz.</p>
</div>
<div class="feature">
<h3>Özellik 3</h3>
<p>Buraya bir açıklama yazabilirsiniz.</p>
</div>
</section>
</main>
<footer> <!-- Alt bilgi bölümü -->
<p>© 2025 Benim Web Sitem</p>
</footer>
</body>
</html>---
CSS Tasarımı ve Açıklamaları
CSS:
body {
font-family: Arial, sans-serif; /* Yazı tipi */
margin: 0; /* Sayfa kenar boşluklarını sıfırla */
padding: 0; /* Sayfa iç boşluklarını sıfırla */
background-color: #f4f4f4; /* Arka plan rengi */
color: #333; /* Yazı rengi */
}
/* Header ve Menü */
header {
background-color: #ff6600; /* Arka plan turuncu */
color: #fff; /* Yazı rengi beyaz */
padding: 20px; /* İç boşluk */
text-align: center; /* Yazıları ortala */
}
header nav ul {
list-style: none; /* Madde işaretlerini kaldır */
padding: 0;
margin: 10px 0 0 0;
display: flex; /* Menü elemanlarını yatay yap */
justify-content: center; /* Ortala */
gap: 20px; /* Menü elemanları arası boşluk */
}
header nav ul li a {
color: #fff; /* Link rengi beyaz */
text-decoration: none; /* Alt çizgi yok */
}
/* Ana içerik */
.hero {
text-align: center; /* Metinleri ortala */
padding: 50px 20px; /* Üst-alt ve sağ-sol boşluk */
background-color: #fff3e0; /* Arka plan rengi */
}
.hero button {
padding: 10px 20px; /* Buton iç boşluğu */
background-color: #ff6600; /* Buton rengi */
color: #fff; /* Buton yazı rengi */
border: none; /* Kenarlık yok */
cursor: pointer; /* Fare ile üzerine gelince işaretçi değişir */
}
/* Özellikler */
.features {
display: flex; /* Yatay kutular için flex */
justify-content: space-around; /* Eşit boşluk bırak */
padding: 40px 20px;
flex-wrap: wrap; /* Küçük ekranlarda alt satıra geçsin */
gap: 20px; /* Kutular arası boşluk */
}
.feature {
background-color: #fff; /* Beyaz arka plan */
padding: 20px; /* İç boşluk */
flex: 1 1 200px; /* Esnek kutu genişliği */
border: 1px solid #ddd; /* Hafif kenarlık */
text-align: center; /* Metinleri ortala */
}
/* Footer */
footer {
background-color: #333; /* Koyu arka plan */
color: #fff; /* Beyaz yazı */
text-align: center; /* Ortala */
padding: 20px; /* İç boşluk */
}---
Ödev
- HTML ve CSS dosyalarını oluştur (index.html ve style.css)
- Header, menü, hero ve özellik bölümlerini ekle
- Kodların yanındaki açıklamaları okuyup anlamaya çalış
- Renkleri ve yazı tiplerini değiştirebilirsin
- Sayfayı tarayıcıda aç ve ekran görüntüsünü paylaş
