Ders 19: Uygulama — Kişisel Portföy Sitesi

? Okuma Hesaplanıyor... Okuma: %0

Gidenler.Me | Her yol bir hikaye... » Programlama Dersleri

Yazar Hasan | 43 Okuma | 10-30-2026, 10:25 PM

Ders 19: Uygulama — Kişisel Portföy Sitesi

Neden?
Birden fazla sayfalı portföy, öğrendiğin parçaları gerçek bir yapıda birleştirir.

Ne öğreneceğiz?
Bu derste portföy sitesinin sayfa ve klasör planını öğreneceğiz.

Nasıl ilerleyeceğiz?
Önce kavramın amacını düşünün. Ardından aşağıda verilen örneği kendiniz yazın. Kodu kaydedin, tarayıcıda açın ve küçük bir değişiklik yaparak sonucu gözlemleyin.

Öğrenme kuralı: Kodu yalnızca kopyalama. Her satır için “Bu satır neden burada?” ve “Bu satırı silersem ne değişir?” sorularını sor.

Derse başlamadan önce kendini yokla

Bu konuyu gerçek bir web sayfasında hangi ihtiyacı çözmek için kullanırım?
Örnekteki hangi HTML elementi içeriğin anlamını taşıyor?
Uygulamayı kendi fikrimle nasıl değiştirebilirim?

Ders sonunda kontrol

Kodu kendim, bakmadan tekrar yazabildim mi?
Tarayıcıda sonucu test ettim mi?
Karşılaştığım bir hatayı neden oluştuğunu açıklayarak düzelttim mi?

Ders hedefi

Yola

Öğrendiğin HTML konularını birden fazla sayfalı kişisel portföy sitesinde birleştirebileceksiniz.

Bu derste aşağıdaki dosya yapısını oluşturun:

Kod:
portfoy/

├── index.html

├── hakkimda.html

├── projeler.html

├── iletisim.html

├── images/

│   └── profil.jpg

├── css/

│   └── style.css

└── js/

   └── script.js

Ana sayfa için temel iskelet:

PHP Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Yola’nın kişisel portföy web sitesi.">
   <title>Yola | Portföy</title>
   <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <header>
       <nav aria-label="Ana menü">
           <a href="index.html">Ana Sayfa</a>
           <a href="hakkimda.html">Hakkımda</a>
           <a href="projeler.html">Projeler</a>
           <a href="iletisim.html">İletişim</a>
       </nav>
   </header>
 
   <main>
       <section aria-labelledby="tanitim-baslik">
           <img src="images/profil.jpg" alt="Yola’nın portre fotoğrafı">
           <h1 id="tanitim-baslik">Merhaba, ben Yola.</h1>
           <p>Frontend geliştirme öğrenen bir web tasarım meraklısıyım.</p>
           <a href="projeler.html">Projelerimi incele</a>
       </section>
 
       <section aria-labelledby="yetenek-baslik">
           <h2 id="yetenek-baslik">Yeteneklerim</h2>
           <ul>
               <li>HTML</li>
               <li>CSS</li>
               <li>JavaScript</li>
           </ul>
       </section>
   </main>
 
   <footer>
       <p>© 2026 Yola | Gidenler.me maskotu</p>
   </footer>
</body>
</html> 

hakkimda.html sayfasında eğitim ve deneyim bilgilerini, projeler.html sayfasında en az üç proje kartını, iletisim.html sayfasında ise iletişim formunu gösterin. Her sayfada ortak bir menü ve alt bilgi kullanın.

Konuyu Dinle

Okuma hızı:

Hazır. Konuyu dinlemek için Oynat'a basın.

Programlama Dersleri

Yazarımız Hasan hakkında: Adım Hasan, ama bir dönem MyBB kullananlar beni Yondaime nicki ile tanırdı. 2009 da başladı web maceram, MyBB, Wordpress, Matematik, Adalet, Bilgisayar Programcılığı, derken şimdide burada bir şeyler yapmaya çalışıyorum :)

Yazıya herhangi bir yorum yapılmadı

Hızlı Cevap

Güvenlik Kodu:
Lütfen, resmin üzerindeki harf ve rakamlardan oluşan Güvenlik Kodunu, aşağıdaki metin kutusuna giriniz.

(Büyük/Küçük harf duyarsız)

Konuyu Yazdır

Hoşgeldiniz...

Hoşgeldin, Ziyaretçi:
Sitemize üye iseniz buradan oturum açabilirsiniz :)
Hala üye değil misiniz? Ücretsiz Kayıt Ol

Reklam

Kategoriler

Yazı Arşivi

Kasım 20264 yazı Ekim 202627 yazı Eylül 202627 yazı Ağustos 202610 yazı Temmuz 20261 yazı Haziran 20262 yazı Ocak 20262 yazı Aralık 20252 yazı Kasım 20253 yazı Mayıs 20252 yazı Nisan 20257 yazı Mart 20253 yazı Tüm arşiv →

Yasal Uyarı

Bu internet sitesi içeriğinde yer alan tüm yazılar Gidenler.Me’ye ait olup, 5846 sayılı Fikir ve Sanat Eserleri Kanunu ve 5237 sayılı Türk Ceza Kanunu kapsamında korunmaktadır. Bu hakları ihlal eden kişiler, 5846 sayılı Fikir ve Sanat eserleri Kanunu ve 5237 sayılı Türk Ceza Kanununda yer alan hukuki ve cezai yaptırımlara tabi olurlar. Gidenler.Me, ilgili yasal işlem başlatma hakkına sahiptir. Gidenler.Me Blog'da yer alan tüm yazılar/makaleler bilgi edinme amacı ile sınırlı olup Gidenler.Me'den izin alınmaksızın değiştirilemez, çoğaltılamaz, yayımlanamaz, dağıtılamaz, umuma iletilemez, başka bir lisana çevrilemez.