HTML Ders 12 · Final Proje

1. Bu Projede Olması Gerekenler

Başlık (h1)
Hakkımda bölümü
Profil fotoğrafı
Hobi listesi
Bilgi tablosu
Harici link
İletişim formu
Flexbox ile bilgi kartları

2. Dosyayı Oluştur

Yeni bir dosya aç: final-proje.html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Benim Web Sitem</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!-- içerik buraya gelecek -->

</body>
</html>

3. Aşağıdaki HTML İskeletini Body İçine Ekleyin

<header class="header">
  <h1>Benim Web Sitem</h1>

  <div id="navDiv" class="mobileLinkDisplay">
    <div class="headerlinks">
      <a href="#">Anasayfa</a>
      <a href="#">Hakkımda</a>
      <a href="#">Fotoğraflarım</a>
      <a href="#">Hobilerim</a>
      <a href="#">Bilgilerim</a>
      <a href="#">Bilgi Kartları</a>
    </div>
  </div>
</header>

<main class="ana">
  <h2>Hakkımda</h2>
  <p>
    Buraya kendini tanıtan birkaç cümle yaz.
  </p>
</main>

<h2>Fotoğrafım</h2>
<img src="ben.jpg" alt="Profil Fotoğrafım" width="200">

<h2>Hobilerim</h2>
<ul>
  <li>Futbol</li>
  <li>Müzik</li>
  <li>Kodlama</li>
</ul>

<h2>Bilgilerim</h2>
<table>
  <tr><th>Bilgi</th><th>Değer</th></tr>
  <tr><td>Ad</td><td>Senin Adın</td></tr>
  <tr><td>Sınıf</td><td>9. Sınıf</td></tr>
  <tr><td>Şehir</td><td>...</td></tr>
</table>

<h2>Linkler</h2>
<p>
  Sık kullandığım site:
  <a href="https://www.google.com" target="_blank">Google</a>
</p>

<h2>Bana Ulaşın</h2>
<form>
  <label>Ad:</label>
  <input type="text">

  <label>Mesaj:</label>
  <textarea></textarea>

  <button>Gönder</button>
</form>

<h2>Mini Bilgi Kartlarım</h2>
<div class="kart-alani">
  <div class="kart">En sevdiğim ders</div>
  <div class="kart">En sevdiğim hobi</div>
  <div class="kart">Hedefim</div>
</div>

<footer>
  © 2024 Yeşil Bilişim
</footer>

4. Stil (CSS) Kodunu Ekleyin

body {
  font-family: Inter, sans-serif;
  color: #e5e7eb;
  background-color: blueviolet;
  line-height: 1.7;
}

.header {
  display: flex;
  justify-content: center;
  height: 80px;
  align-items: center;
  padding: 0 20px;
}

.headerlinks a {
  margin-right: 10px;
  margin-left: 10px;
  text-decoration: none;
  color: white;
}

img {
  border-radius: 12px;
  margin-bottom: 20px;
}

table {
  border-collapse: collapse;
  margin-top: 10px;
}

table, th, td {
  border: 1px solid #22f2a2;
  padding: 8px 12px;
}

.kart-alani {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.kart {
  background: #0f172a;
  padding: 16px;
  border-radius: 12px;
  border: 2px solid #22f2a2;
  width: 180px;
}

.ana {
  display: flex;
  justify-content: center;
  align-items: center;
}

5. Adım: Kişiselleştir ve Teslim Et

Aşağıdaki maddeleri yaptıysan final projeni tamamlamış sayılırsın:

Tüm başlıklar (Hakkımda, Hobiler, Bilgiler, Linkler, Form, Kartlar) var.
Tablonda en az 3 satır bilgi var.
Formunda en az bir giriş alanı ve bir mesaj alanı var.
Kart alanında 3 kutu yan yana veya alt alta düzgün görünüyor.
Renkler ve yazılar okunabilir ve gözü yormuyor.

Final projeni kaydet, tarayıcıda son kez kontrol et. Öğretmenin isterse ekran görüntüsü olarak veya dosya olarak teslim edebilirsin.

Final Proje Teslim / Daha sonra aktif edilecektir