Ders 8 – Mini HTML Projesi: Profil Sayfası

Bu derste şimdiye kadar öğrendiğin tüm HTML etiketlerini kullanarak küçük ama anlamlı bir “Profil Sayfası” oluşturacaksın. Bu sayfa daha sonra CSS derslerinde güzelleştireceğin temel projen olacak.

1. Bu Projede Neler Yapacaksın?

Basit bir sayfa iskeleti kuracaksın.
Hakkında metni ve başlıklar ekleyeceksin.
Profil fotoğrafını sayfaya yerleştireceksin.
Hobilerini listeleyeceksin.
Linkler ve iletişim bilgisi ekleyeceksin.

Bu sayfayı HTML derslerinin “özet projesi” gibi düşünebilirsin. CSS kısmında bu sayfayı renkler, yazı tipleri ve düzen ile çok daha şık hâle getireceğiz.

2. Adım: Yeni Bir HTML Dosyası Oluştur

Proje klasöründe yeni bir dosya oluştur:

Dosya adı: profil.html (veya istediğin bir isim)
Temel HTML iskeletini ekle (Ders 1’deki şablon).

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Benim Profil Sayfam</title>
</head>
<body>

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

</body>
</html>

3. Başlık ve Hakkında Bölümü

Şimdi sayfanın üst kısmına bir başlık ve kendini kısaca tanıtan metin ekleyelim:

<h1>Merhaba, ben <em>[Adın]</em></h1>

<h2>Hakkımda</h2>
<p>
  9. sınıf öğrencisiyim ve web geliştirmeye yeni başladım.
  Kod yazarak kendi projelerimi oluşturmayı öğreniyorum.
</p>

Merhaba, ben [Adın]

Hakkımda

9. sınıf öğrencisiyim ve web geliştirmeye yeni başladım. Kod yazarak kendi projelerimi oluşturmayı öğreniyorum.

4. Profil Fotoğrafı Ekle

Proje klasörüne bir görsel ekle (örneğin images/profil.jpg). Sonra sayfana şu şekilde yerleştir:

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

💡 Genişliği width ile ayarladık. Yükseklik otomatik orantılanır.

5. Hobiler Listesi

Şimdi hobilerini liste şeklinde yaz:

<h2>Hobilerim</h2>
<ul>
  <li>Kitap okumak</li>
  <li>Bisiklete binmek</li>
  <li>Kod yazmak</li>
</ul>

Hobilerim

Kitap okumak
Bisiklete binmek
Kod yazmak

6. Linkler ve İletişim

Son olarak, bir bağlantı ve e-posta adresini ekleyelim:

<h2>Linkler</h2>

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

<p>
  Bana e-posta göndermek istersen:
  <a href="mailto:ornek@mail.com">ornek@mail.com</a>
</p>

7. Mini Proje – Tam Profil Sayfasını Tamamla

Şimdi adım adım yazdığın tüm kısımları birleştir ve tam bir profil sayfası oluştur:

profil.html dosyanı aç.
Başlık: <h1> ile adını yaz.
Hakkında bölümü: <h2> + <p> ile kendini tanıt.
Profil fotoğrafını <img> ile ekle.
Hobilerini <ul> ve <li> ile listele.
En alta sık kullandığın bir siteye link ve e-posta adresini ekle.
Dosyayı kaydedip tarayıcıda görüntüle.

Bu sayfa, CSS derslerinde üzerine stil vereceğin ana projen olacak. Dilersen fazladan başlıklar, paragraflar ve listeler ekleyebilirsin.

Ders 8 Görev / Quiz Linki