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

Ders 20: Final Proje — Tanıtım Web Sitesi

Fri, 30 Oct 2026 22:33:19 +0000

Ders 20: Final Proje — Tanıtım Web Sitesi

Neden?
Final proje, bilgiyi bağımsız bir ürün planına ve çalışan siteye dönüştürme aşamasıdır.

Ne öğreneceğiz?
Bu derste proje kapsamını, kontrol listesini ve teslim sürecini öğ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

HTML bilgini bağımsız bir proje planına dönüştürebilecek ve tamamlanmış bir web sitesi hazırlayabileceksiniz.

Final projesi olarak bir kurs, ürün, işletme, etkinlik veya kişisel marka tanıtım sitesi oluşturun. Site en az dört HTML sayfasından oluşmalıdır:

Ana Sayfa: [/b]Siteyi tanıtan başlık, açıklama, görsel ve çağrı bağlantısı.
Hakkında: Projenin veya işletmenin geçmişi, amacı ve değerleri.
Hizmetler / Ürünler: Liste veya kart düzeninde içerik ve fiyat tablosu.
İletişim: Ad, e-posta, konu, mesaj ve onay alanlarından oluşan form.

Zorunlu HTML özellikleri
Projede en az bir semantik

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

Fri, 30 Oct 2026 22:25:58 +0000

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öytitle>
   <link rel="stylesheet" href="css/style.css">
head>
<body>
   <header>
       <nav aria-label="Ana menü">
           <a href="index.html">Ana Sayfaa>
           <a href="hakkimda.html">Hakkımdaa>
           <a href="projeler.html">Projelera>
           <a href="iletisim.html">İletişima>
       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 incelea>
       section>
 
       <section aria-labelledby="yetenek-baslik">
           <h2 id="yetenek-baslik">Yeteneklerimh2>
           <ul>
               <li>HTMLli>
               <li>CSSli>
               <li>JavaScriptli>
           ul>
       section>
   main>
 
   <footer>
       <p>© 2026 Yola | Gidenler.me maskotup>
   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.

Ders 18: Hataları Bulma ve Temiz Kod

Fri, 30 Oct 2026 22:21:03 +0000

Ders 18: Hataları Bulma ve Temiz Kod

Neden?
Hata ayıklama, kod yazmanın ayrılmaz parçasıdır; rastgele değişiklik yapmak yerine sistem gerekir.

Ne öğreneceğiz?
Bu derste yaygın hataları ve tarayıcı geliştirici araçları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

HTML hatalarını, tarayıcı geliştirici araçları ve doğrulama mantığıyla inceleyebileceksiniz.

Temiz HTML kodu, okunabilir, tutarlı ve sürdürülebilir olur. Elementleri uygun girintile, öznitelik değerlerinde tırnak kullanın ve gereksiz kodları silin. Yaygın hatalar ise şunlardır:

Yanlış/Eksik Kullanımlar Doğru Kullanımlar

fieldset>

Bir String Aslında Nedir? (Python 7.Ders)

Thu, 15 Oct 2026 18:13:03 +0000

BÖLÜM 7 — Metnin Derinliği: Bir String Aslında Nedir?

Bu bölümün temel sorusu
Birinci derste string'i "tırnak içindeki yazı" olarak tanımladık ve geçtik. Ama bir string, aslında bir liste gibi davranabiliyorsa (indekslenebiliyorsa) ne demek bu? Metin, Python için tam olarak nedir?

🎯 Bölümün Öğrenme Hedefleri
Bu bölümün sonunda öğrenci;

bir string'in aslında karakterlerden oluşan sıralı bir dizi olduğunu ve bunun listeyle neden bu kadar benzer davrandığını,
dilimlemenin (slicing) hangi problemi çözdüğünü,
yaygın string metotlarının (".split()", ".join()", ".replace()", ".strip()") hangi ihtiyaçtan doğduğunu,
string'lerin neden değiştirilemez (immutable) olduğunu ve bunun demetlerle olan bağlantısını,
f-string'in eski biçimlendirme yöntemlerine göre hangi sorunu çözdüğünü

açıklayabilecek duruma gelecektir.

📌 Geçen Bölümde Neler Öğrendik?
6.derste demet, sözlük ve kümelerle listenin yetersiz kaldığı durumları çözmeyi öğrendik. Bu bölümde ilginç bir bağlantı kuracağız: string'ler, aslında Bölüm 5-6'da öğrendiğimiz "sıralı, indekslenebilir ama değiştirilemez" bir veri yapısına çok benziyor — tıpkı bir demet gibi.

7.1. Her Şey Bir Sorunla Başladı

Birinci derste 'print("Merhaba")' yazdığımızda, "Merhaba" ifadesini tek bir bütün gibi düşündük. Ama gerçek hayatta metinle çalışırken ihtiyaçlarımız çok daha karmaşıktır:

Bir kullanıcı adının sadece ilk 3 harfini almak istersen?
Bir cümleyi kelimelere ayırıp tek tek işlemek istersen?
Bir metindeki fazladan boşlukları temizlemek istersen?
Birden fazla değişkeni tek bir cümle içine güzelce yerleştirmek istersen?

Birinci dersteki bilgimiz ("print()", tırnak işaretleri) bunların hiçbirine cevap vermiyor. Bu bölümde string'i "bütün bir blok" olmaktan çıkarıp, üzerinde ustalıkla çalışabileceğimiz bir yapıya dönüştürüyoruz.

7.2. Büyük Fikir: Bir String Aslında Bir Karakter Dizisidir

kelime = "Python"
print(kelime[0]) # P
print(kelime[1]) # y
print(kelime[5]) # n[/code]
Bu, beşinci dersteki liste indekslemesine çok tanıdık geliyor değil mi? Bu tesadüf değil Python'da bir string, aslında karakterlerden oluşan sıralı bir dizidir . "Python" kelimesi, Python'un gözünde şuna benzer:

Kod:
Index:    0    1    2    3    4    5

Karakter: P    y    t    h    o    n

BİLGİ

💡 Büyük Fikir: Beşinci derste öğrendiğimiz index mantığı (0'dan başlama, negatif index ile sondan sayma) string'ler için de birebir geçerlidir:

Kod:
print(kelime[-1])   # n  (son karakter)

print(len(kelime))  # 6  (6 karakter)

7.3. Dilimleme (Slicing): Bir Parçayı Almak

Peki tek bir karakter değil de bir aralık almak istersek?

Kod:
kelime = "Python"

print(kelime[0:3])    # Pyt

print(kelime[2:5])    # tho

print(kelime[:4])     # Pyth   -- başlangıç belirtilmezse baştan başlar

print(kelime[3:])     # hon    -- bitiş belirtilmezse sona kadar gider

DERSTE

🤔 Neden "kelime[0:3]" "Pyt" Veriyor, "Pyth" Değil?
Bunu dördüncü dersteki "range()" mantığıyla birleştirelim, hatırlarsanız "range(1, 6)" de 6'yı hariç tutuyordu. Dilimleme de aynı kurala uyar: başlangıç dahil, bitiş hariç. "kelime[0:3]" demek "0. index'ten başla, 3. index'e gelmeden dur" demektir yani 0, 1, 2. index'leri alır (P, y, t).
Bu tutarlılık tesadüf değil, Python'da "range()", liste dilimleme ve string dilimleme aynı "başlangıç dahil, bitiş hariç" kuralını paylaşır. Bir yerde öğrendiğinde, her yerde işine yarar.
Adım (step) ile dilimleme:

Kod:
print(kelime[::2])    # Pto   -- ikişer ikişer atla

print(kelime[::-1])   # nohtyP  -- string'i ters çevirir!

"[::-1]" özellikle çok kullanılan bir kalıptır, adımı -1 yaparak baştan sona değil, sondan başa gitmesini sağlar, bu da string'i tersine çevirir.

7.4. String'ler Neden Değiştirilemez (Immutable)?

Kod:
kelime = "Python"

kelime[0] = "J"   # HATA! 'str' object does not support item assignment

Altıncı derste demetlerin neden değiştirilemez olduğunu konuşmuştuk "bu veri asla değişmemeli" garantisi vermek için. String'ler de aynı felsefeyle tasarlanmıştır: bir kez oluşturulan bir metin, yerinde değiştirilemez.

DERSTE

🤔 Peki Bir String'i Nasıl "Değiştiririz"?
Aslında değiştirmeyiz yeni bir string oluştururuz :

PHP Kod:
kelime = "Python"
yeni_kelime = "J" + kelime[1:]
print(yeni_kelime)   # Jython 

Burada "kelime" hiç değişmedi, sadece "yeni_kelime" adında tamamen yeni bir string oluşturduk. Bu, string metotlarını anlamanın anahtarıdır: hiçbir string metodu orijinal string'i değiştirmez, hepsi yeni bir string döndürür.

7.5. String Metotları: Yaygın İhtiyaçlara Hazır Çözümler

".upper()" ".lower()" büyük/küçük harfe çevirme:

PHP Kod:
isim = "ahmet"
print(isim.upper())   # AHMET
print(isim.lower())   # ahmet  (zaten küçüktü) 

🤔 Ne Zaman İşe Yarar?Kullanıcı girdilerini karşılaştırırken. "Ahmet" == "ahmet" sonucu False verir (üçüncü dersten hatırla Python büyük/küçük harfe duyarlıdır). Ama isim1.lower() == isim2.lower() yaparsan, harf büyüklüğünden bağımsız bir karşılaştırma yapabilirsin.

.strip() baştaki ve sondaki boşlukları temizleme:

PHP Kod:
girdi = "   Ahmet   "
print(girdi.strip())   # "Ahmet"  (baş ve son boşluklar gitti) 

🤔 Neden Bu Kadar Önemli?input() ile kullanıcıdan veri aldığında (birinci derste görmüştük), kullanıcı yanlışlıkla fazladan boşluk bırakabilir. .strip() olmadan "Ahmet" ile "Ahmet " Python için farklı string'lerdir, bu, form doğrulama gibi durumlarda ciddi hatalara yol açabilir.

.replace() bir parçayı başka bir şeyle değiştirme:

PHP Kod:
cumle = "Python zor bir dildir"
yeni_cumle = cumle.replace("zor", "kolay")
print(yeni_cumle)   # Python kolay bir dildir 

```

.split() bir string'i parçalayıp liste yapma:

PHP Kod:
cumle = "elma armut muz"
kelimeler = cumle.split()
print(kelimeler)   # ['elma', 'armut', 'muz'] 

🤔 Neden Bu Kadar Kritik Bir Fonksiyon?Çünkü altıncı derse kadar öğrendiğimiz tüm veri yapıları (liste, demet, sözlük, küme) genelde önceden hazır veriyle çalışıyordu. Ama gerçek dünyada veri genelde bir metin olarak gelir (bir dosyadan, bir kullanıcıdan, bir web sayfasından). .split(), ham metni işlenebilir bir listeye çevirerek, beşinci derste öğrendiğimiz tüm liste araçlarını (döngü, indeksleme) kullanmamızı sağlar.

Virgülle ayrılmış bir metni de parçalayabilirsin:

PHP Kod:
veri = "Ahmet,25,İstanbul"
parcalar = veri.split(",")
print(parcalar)   # ['Ahmet', '25', 'İstanbul'][php]
 
[kirmizi].join()[/kirmizi] — [kirmizi].split()[/kirmizi]'in tersi, bir listeyi tek bir string'de birleştirme:
[php]kelimeler = ["Python", "öğreniyorum"]
cumle = " ".join(kelimeler)
print(cumle)   # Python öğreniyorum[php]
 
[bilgicik][b]🤔 [kirmizi].join()[/kirmizi]'i Neden [kirmizi]" "[/kirmizi] Üzerinden Çağırıyoruz, [kirmizi]kelimeler[/kirmizi] Üzerinden Değil?[/b]
Bu, yeni başlayanların garipsediği bir sözdizimidir. Mantığı şöyle: [kirmizi].join()[/kirmizi], listedeki elemanları [kirmizi]hangi karakterle[/kirmizi] birleştireceğini bilmek zorunda, bu yüzden metot, [kirmizi]"birleştirici"[/kirmizi] olan string'e [kirmizi](" ")[/kirmizi] ait, birleştirilecek listeye değil. [kirmizi]" ".join(kelimeler)[/kirmizi] cümlesini [sari]"boşluk karakteriyle, şu listeyi birleştir"[/sari] diye okuyabilirsiniz.[/sari][/bilgicik]
 
[baslik]7.6. f-string: Metin İçine Değer Yerleştirmenin Modern Yolu[/baslik]
Birinci derste f-string'e kısaca değinmiştik, şimdi neden var olduğunu tam anlayalım.
 
[php]isim = "Ahmet"
yas = 25[php]
 
İkinci derste öğrendiğimiz gibi, string ile sayıyı [sari]+[/sari] ile birleştiremiyoruz bunun için tip dönüşümü gerekiyordu:
[php]print("Adım " + isim + ", yaşım " + str(yas)) 

Bu çalışır ama okunması zor ve yazması yorucudur ayrıca her değişken için + ve str() eklemen gerekir. f-string bu sorunu çözer:

PHP Kod:
print(f"Adım {isim}, yaşım {yas}")
# Çıktı: Adım Ahmet, yaşım 25 

💡 Büyük Fikir Başına f konan bir string içinde, süslü parantez { } içine yazdığın her şey Python tarafından değerlendirilip string'e otomatik olarak dönüştürülür yani str() çağırmanıza bile gerek kalmaz. Hatta içine işlem de yazabilirsiniz:

PHP Kod:
print(f"3 yıl sonra yaşım {yas + 3} olacak")
# Çıktı: 3 yıl sonra yaşım 28 olacak 

BİLGİ

🤔 Neden f Harfi?
f, format 'ın kısaltmasıdır Python'a "bu string'i biçimlendireceğim, içindeki süslü parantezlere dikkat et" demenin yoludur. f-string olmadan Python, {isim} ifadesini olduğu gibi (düz metin olarak) yazdırırdı.

7.7. Hepsini Birleştirelim ve Küçük Bir Örnek

PHP Kod:
girdi = "  Ahmet,25,İstanbul  "
 
temiz_girdi = girdi.strip()               # baş/son boşlukları temizle
parcalar = temiz_girdi.split(",")          # virgülden parçala
 
isim = parcalar[0]
yas = int(parcalar[1])                     # Bölüm 2'deki tip dönüşümü
sehir = parcalar[2]
 
print(f"{isim}, {yas} yaşında ve {sehir}'de yaşıyor.")
# Çıktı: Ahmet, 25 yaşında ve İstanbul'de yaşıyor. 

Bu küçük örnekte, ham (ve biraz "kirli") bir metin girdisini alıp, temizleyip, parçalayıp, anlamlı parçalara ayırıp, sonunda okunabilir bir cümleye dönüştürdük. Bu, gerçek dünyadaki veri işlemenin neredeyse tamamının özünü oluşturur.

⚠️ Kavram Yanılgıları

❌ Yanlış düşünce: " 'kelime[0] = 'J' yazarak bir string'in ilk harfini değiştirebilirim, tıpkı listede olduğu gibi."
✅ Daha doğru düşünce: String'ler değiştirilemezdir (immutable) bir önceki dersteki demetler gibi. Bir string'i "değiştirmek" istediğinde aslında yeni bir string oluşturursun.

❌ Yanlış düşünce: " 'kelime[0:3]' ifadesi 0, 1, 2, 3. index'leri (4 karakter) verir."
✅ Daha doğru düşünce: Dilimleme başlangıç dahil, bitiş hariç çalışır. 'kelime[0:3]' sadece 0, 1, 2. index'leri (3 karakter) verir. Bu, 'range()' ile aynı kuralı paylaşır.

❌ Yanlış düşünce: " '.split()' ve '.join()' birbirinden bağımsız, ilgisiz iki fonksiyondur."
✅ Daha doğru düşünce: Birbirinin tam tersidir '.split()' bir string'i parçalayıp liste yapar, '.join()' bir listeyi birleştirip string yapar. Bu ikisini bir çift olarak düşünmek hatırlamayı kolaylaştırır.

👨‍🏫 Öğretmen Notu

String'ler anlatılırken en büyük fırsat, bunu tamamen izole bir konu gibi değil, daha önce öğrenilen liste ve demet bilgisiyle bağlantılı olarak sunmaktır. Önerilen sıra:

String'in aslında bir karakter dizisi olduğu, beşinci dersteki liste indekslemesiyle birebir karşılaştırılarak gösterilir.
Dilimleme, dördüncü dersteki "range()" mantığıyla ("başlangıç dahil, bitiş hariç") açıkça ilişkilendirilir, bu tekrar, kuralın tesadüfi değil tutarlı bir tasarım olduğunu gösterir.
String'in neden değiştirilemez olduğu, altıncı dersteki demet mantığıyla bağlanır.
String metotları, her biri için "bu hangi gerçek sorunu çözüyor" sorusuyla (kullanıcı girdisi temizleme, veri parçalama) somutlaştırılır.
f-string, ikinci dersteki tip uyumsuzluğu sorununa ('+' ile string/sayı birleştirememe) doğrudan bir çözüm olarak sunulur.

✍️ Uygulama Soruları ve Cevapları

Soru 1: "Merhaba Dünya" string'inin son 5 karakterini dilimleme kullanarak al.

PHP Kod:
metin = "Merhaba Dünya"
print(metin[-5:])
# Çıktı: Dünya 

Soru 2: Bir kullanıcı adının başındaki/sonundaki boşlukları temizleyip, tamamını küçük harfe çeviren kodu yaz.

PHP Kod:
kullanici_adi = "   Ahmet123   "
temiz = kullanici_adi.strip().lower()
print(temiz)
# Çıktı: ahmet123 

Soru 3: "kedi,köpek,kuş" string'ini virgülden parçalayıp bir listeye çevir.

PHP Kod:
hayvanlar = "kedi,köpek,kuş"
liste = hayvanlar.split(",")
print(liste)
# Çıktı: ['kedi', 'köpek', 'kuş'] 

Soru 4: Aşağıdaki kod neden hata verir?

PHP Kod:
kelime = "Merhaba"
kelime[0] = "M"[php]
 
[kirmizi]Cevap:[/kirmizi] String'ler değiştirilemezdir (immutable). Var olan bir string'in belirli bir index'ine yeni bir karakter atanamaz; bunun yerine yeni bir string oluşturulması gerekir.
 
[yesil]Soru 5:[/yesil]  [mavi]isim = "Zeynep"[/mavi] ve [mavi]puan = 92[/mavi] değişkenlerini kullanarak f-string ile "Zeynep 92 puan aldı" cümlesini oluştur.
[php]isim = "Zeynep"
puan = 92
print(f"{isim} {puan} puan aldı")
# Çıktı: Zeynep 92 puan aldı 

📌 Şu Ana Kadar Neler Öğrendik?

Bir string'in aslında karakterlerden oluşan sıralı bir dizi olduğu ve listeyle aynı index mantığını paylaştığı
Dilimlemenin ("[başlangıç:bitiş]") başlangıç dahil, bitiş hariç çalıştığı "range()" ile aynı kural
String'lerin neden değiştirilemez olduğu ve string metotlarının aslında hep yeni bir string döndürdüğü
".upper()", ".lower()", ".strip()", ".replace()" metotlarının hangi gerçek sorunları çözdüğü
".split()" ile ham metni listeye, ".join()" ile listeyi tekrar metne çevirebildiğimiz
f-string'in, ikinci dersteki string/sayı birleştirme sorununu nasıl daha okunabilir çözdüğü

📌 Bu Derste Çıkarılacak En Önemli Sonuç

String bir formülle başlamadı, İlk derste "tırnak içindeki yazı" olarak tanıdığımız bu veri tipi, aslında 5-6.derste öğrendiğimiz liste ve demet mantığının bir karışımıdır: listeler gibi indekslenebilir ve dilimlenebilir, demetler gibi değiştirilemez. Python'da yeni bir konu genelde tamamen yeni bir kural getirmez daha önce öğrendiğin kuralları yeni bir bağlamda tekrar kullanır. Bu yüzden önceki bölümleri iyi anlamak, sonraki bölümleri çok daha kolay hâle getirir.

📝 Bölümün Kısa Özeti

String'ler, karakterlerden oluşan sıralı ve değiştirilemez (immutable) veri dizileridir, bu yüzden hem liste gibi indekslenebilir/dilimlenebilir hem de demet gibi değiştirilemezler. Dilimleme ("[a:b]") başlangıç dahil, bitiş hariç çalışır. String metotları (".upper()", ".strip()", ".replace()", ".split()", ".join()") orijinal string'i değiştirmez, her zaman yeni bir string ya da liste döndürür. f-string ('f"{degisken}"'), değişkenleri metin içine okunabilir ve otomatik tip dönüşümlü bir şekilde yerleştirmenin modern yoludur.

Ders 9: Formlara Giriş

Thu, 08 Oct 2026 17:50:47 +0000

Ders 9: Formlara Giriş

Neden?
Formlar web sayfasını kullanıcıdan veri alan bir arayüze dönüştürür.

Ne öğreneceğiz?
Bu derste form, action, method, label, input ve button ilişkisini öğreneceğiz.

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

Öğ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
Kullanıcıdan bilgi almak için temel HTML formu oluşturabileceksin.

Formlar kullanıcıdan veri almak için kullanılır. Formun temel yapısı şöyledir:

PHP Kod:
<form action="/kayit" method="post">
    <label for="ad">Adınız:label>
    <input type="text" id="ad" name="ad">
    <button type="submit">Gönderbutton>
form> 

action verinin gönderileceği adresi, method ise gönderim yöntemini belirtir. GET veriyi URL üzerinde taşır. Arama formları için kullanılabilir. POST veriyi istek gövdesinde gönderir ve kayıt işlemlerinde daha uygundur. Gerçek bir güvenlik mekanizması için sunucu tarafı doğrulama yine gerekir.

etiketi form alanını açıklar. for değeri, ilgili alanın id değeriyle aynı olmalıdır. Bu bağlantı hem kullanılabilirlik hem de erişilebilirlik için önemlidir.

PHP Kod:
<label for="eposta">E-posta:label>
<input type="email" id="eposta" name="eposta"> 

Form alanlarında name özniteliği bulunmalıdır. Sunucuya gönderilen veri genellikle bu ad üzerinden okunur.

Ders 8: Tablolar

Thu, 08 Oct 2026 11:30:02 +0000

Ders 8: Tablolar

Neden?
Tablolar, satır ve sütun ilişkisi olan verileri karşılaştırmak için kullanılır.

Ne öğreneceğiz?
Bu derste table, tr, th, td ve tablo bölümlerini öğreneceğiz.

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

Öğ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
Veri tabloları oluşturabilecek, başlık ve gövde bölümlerini ayırabileceksiniz.

Tablo oluşturmak için kullanılır. Satırlar , başlık hücreleri , ve gerekirse kullanın:

PHP Kod:
<table>
    <caption>Kurs Katılımcılarıcaption>
    <thead>
        <tr>
            <th scope="col">Adth>
            <th scope="col">Dersth>
            <th scope="col">Durumth>
        tr>
    thead>
    <tbody>
        <tr>
            <td>Ayşetd>
            <td>HTMLtd>
            <td>Tamamlandıtd>
        tr>
        <tr>
            <td>Mehmettd>
            <td>HTMLtd>
            <td>Devam ediyortd>
        tr>
    tbody>
table> 

Tabloları sayfa düzeni oluşturmak için kullanmayın. Tablo, satır ve sütun ilişkisi olan veriler için kullanılmalıdır. Görsel düzenleme CSS ile yapılır.

Ders 7: Dosya ve Klasör Düzeni

Thu, 08 Oct 2026 09:23:34 +0000

Ders 7: Dosya ve Klasör Düzeni

Neden?
Dosya düzeni büyüyen projelerde hataları azaltır ve çalışmayı kolaylaştırır.

Ne öğreneceğiz?
Bu derste Klasör yapısını ve göreli dosya yollarını öğreneceğiz.

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

Öğ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
Bir HTML projesini düzenli klasör yapısıyla oluşturabilecek ve göreli dosya yollarını kullanabileceksiniz.

Küçük bir projenin klasör yapısı şöyle olabilir:

Kod:
html-projesi/

├── index.html

├── hakkimda.html

├── iletisim.html

├── images/

│   ├── logo.png

│   └── profil.jpg

├── css/

│   └── style.css

└── js/

    └── script.js

index.html dosyası kök klasördeyse görsel yolu şu şekilde yazılır:

PHP Kod:
<img src="images/logo.png" alt="Site logosu"> 

images klasörünün içindeki bir HTML dosyasından kök klasöre çıkmak için `..` kullanılır:

PHP Kod:
<img src="../images/logo.png" alt="Site logosu"> 

Dosya ve klasör adlarında boşluk, Türkçe karakter ve gereksiz büyük harf kullanmamak iyi bir alışkanlıktır. hakkimda.html gibi küçük harfli ve açıklayıcı adlar tercih etmeliyiz.

Bir sayfanın ana adresini belirtmek için mutlak URL kullanılabilir. Kendi projeniz içindeki dosyalar için göreli yollar daha taşınabilirdir:

PHP Kod:
<a href="hakkimda.html">Hakkımdaa>
<a href="https://example.com/hakkimda.html">Harici sayfaa> 

,
, veri hücreleri	ile oluşturulur: PHP Kod: `<table> <tr> <th>Ürünth> <th>Fiyatth> tr> <tr> <td>Klavyetd> <td>750 TLtd> tr> table>` Daha anlamlı bir tablo için