Sağladığınız
müfredat dosyasını belirttiğiniz kurallar doğrultusunda (dakika/saniye, önizleme ve ders sayılarını temizleyerek, anlamsız
satırları eleyerek, özet yapmadan ve tamamen detay odaklı) adım adım
işleyeceğim.
Dosyanın
kapsamı oldukça geniş olduğu için, yönergeniz doğrultusunda eğitimi parça
parça ele alıyoruz. İlk olarak kursun "Öğrenecekleriniz"
bölümünün detaylı açıklaması ile HTML ve Temel Etiketler modülünü pratik
uygulamalar ve kod örnekleriyle tasarlayarak başlıyoruz.
🎯 BÖLÜM 1:
"ÖĞRENECEKLERİNİZ" PARAGRAFININ DETAYLI AÇIKLAMASI
Müfredatın
başında yer alan bu bölüm, bir web tasarımcısının sıfırdan profesyonelliğe
uzanan yolculuğunun yapı taşlarını içerir. Maddelerin teknik karşılıkları ve
size kazandıracağı yetkinlikler şunlardır:
🗺️ MODÜL 1:
KAVRAMSAL ANLAYIŞ VE MÜFREDAT TASARIMI
Bu
parça, web geliştirmenin temel altyapısını oluşturan HTML mimarisine
odaklanmaktadır. Süreç şu mantıksal sıra ile işlenecektir:
[HTML
Nedir? Teorik Altyapı]
│
▼
[Temel
İskelet Etiketleri (DOCTYPE, Head, Title, Body)]
│
▼
[Metin
ve Blok Elemanları (H1-H6, P, Br, Hr)]
│
▼
[Medya
ve Etkileşim (Linkler, Görseller, Video/Ses)]
│
▼
[Veri
Yapıları (Tablolar ve Listeler)]
💻 MODÜL 1:
DETAYLI KONU ANLATIMI VE UYGULAMALAR
1. HTML Nedir? Ne İşe Yarar?
HTML
(HyperText Markup
Language -
Hiper Metin İşaretleme Dili), bir programlama dili değil, bir işaretleme
dilidir. Web sayfalarının iskeletini oluşturur.
2. Temel Etiketlerin Anlamı ve İlk Proje ("Merhaba
Dünya")
Bir
HTML dosyası her zaman tarayıcıya dosya türünü bildiren bir bildirimle başlar
ve belirli hiyerarşik etiketlerle sarılır.
🛠️ Kod Yapısı
ve İskelet:
<!DOCTYPE
html> <!-- Tarayıcıya bunun modern HTML5 standardında olduğunu belirtir
-->
<html lang="tr"> <!-- Sayfa dilinin
Türkçe olduğunu belirtir (SEO için kritik) -->
<head>
<meta charset="UTF-8"> <!--
Türkçe karakterlerin (ş, ğ, ı, ç) düzgün görünmesini sağlar -->
<title>Benim İlk Web Sitem</title> <!-- Tarayıcı sekmesinde görünecek başlık -->
</head>
<body>
<!--
Kullanıcının web sitesinde göreceği tüm içerikler buraya yazılır -->
<h1>Merhaba Dünya!</h1>
</body>
</html>
3. Metin Biçimlendirme: <H1>'den <H6>'ya
Başlıklar, <P>, <Br> ve <Hr> Etiketleri
Web
sayfasındaki metinlerin hiyerarşisini ve düzenini belirlemek için bu etiketler
kullanılır.
📝 Uygulama
Örneği:
<h1>Yazılım Dünyasına Giriş</h1>
<p>Web geliştirme öğrenmek sabır ve pratik
gerektirir.<br>Her gün yeni bir kod yazarak
kendinizi geliştirebilirsiniz.</p>
<hr>
<h2>Alt Başlık: Neden HTML?</h2>
<p>Çünkü HTML webin
temelidir.</p>
4. Stiller ve Metin Formatlama (Yazı Biçimlendirme)
Metinlerin
belirli bölümlerini kalın, eğik, altı çizili veya vurgulu yapmak için özel
etiketler kullanılır.
📝 Uygulama
Örneği:
<p>Bu kurs ile <strong>profesyonel</strong> bir tasarımcı olacaksınız.</p>
<p>Unutmayın, <em>kod
yazmak</em> pratik işidir.</p>
<p>Bugün marketten <del>eski
fiyat: 50 TL</del>
yerine <mark>yeni fiyat: 30
TL</mark> ye ürün aldım.</p>
5. Link Oluşturma ve Yönlendirme (<a> Etiketi)
Kullanıcıları
başka bir web sayfasına veya sayfa içi bir bölüme yönlendirmek için <a> (Anchor)
etiketi kullanılır. href niteliği (attribute) hedef adresi belirtir.
📝 Uygulama
Örneği:
<!-- Yeni sekmede açılması için target="_blank" kullanılır -->
<a href="https://google.com" target="_blank">Google'a Gitmek İçin Tıklayın</a>
<!-- Sayfa içi yönlendirme (ID kullanarak yazı içinde gezinme)
-->
<a href="#iletisim-bolumu">İletişime Geç</a>
<div style="margin-top: 1000px;" id="iletisim-bolumu">
<h3>İletişim Bilgileri</h3>
<p>E-posta: test@tasarim.com</p>
</div>
6. Görsel Ekleme (<img> Etiketi)
Web
sayfasına resim dahil etmek için <img> etiketi kullanılır. Kapatma
etiketi yoktur. İki önemli niteliği vardır:
📝 Uygulama
Örneği:
<img src="https://picsum.photos" alt="Rastgele
Manzara Fotoğrafı">
7. Video ve Ses Etiketleri (<video> ve <audio>)
HTML5
ile birlikte harici bir oynatıcıya ihtiyaç duymadan sitenize doğrudan video ve
ses yükleyebilirsiniz. controls niteliği kullanıcıya
oynat/durdur butonlarını gösterir.
📝 Uygulama
Örneği:
<!-- Video Ekleme -->
<video width="400" controls>
<source src="ornek-video.mp4" type="video/mp4">
Tarayıcınız video etiketini desteklemiyor.
</video>
<!-- Ses Ekleme -->
<audio controls>
<source src="ornek-ses.mp3" type="audio/mpeg">
Tarayıcınız ses etiketini desteklemiyor.
</audio>
8. Veri Yapıları: Listeler (<ul>, <ol>, <li>)
Verileri
maddeler halinde sıralamak için iki tür liste kullanılır:
📝 Uygulama
Örneği (İç İçe ve Romen Rakamlı Gelişmiş Liste):
<h3>Öğrenilecek Teknolojiler
(Sırasız)</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>Bootstrap</li>
</ul>
<h3>Kurs Adımları (Romen Rakamlı ve 3.
Numaradan Başlayan Sıralı)</h3>
<!-- type="I" Romen rakamı
yapar, start="3" listeyi III'ten başlatır
-->
<ol type="I" start="3">
<li>
Temel Etiketler
<ul>
<li>Metin Etiketleri</li>
<li>Link Etiketleri</li>
</ul>
</li>
<li>Gelişmiş Yapılar</li>
</ol>
9. Veri Düzenleme: Tablolar (<table>, <tr>, <td>, <th>)
Verileri
satır ve sütunlar halinde düzenli göstermek için kullanılır.
📝 Uygulama
Örneği:
<table border="1"> <!-- Kenarlık
belirgin olsun diye geçici border verilmiştir -->
<tr>
<th>Kurs Adı</th>
<th>Süre</th>
</tr>
<tr>
<td>HTML Dünyası</td>
<td>1 Saat</td>
</tr>
<tr>
<td>CSS Temelleri</td>
<td>2 Saat</td>
</tr>
</table>
🛠️ BÖLÜMÜN
KAPSAMLI UYGULAMASI: İLK WEB SAYFAMIZ
Şimdiye
kadar öğrendiğimiz tüm HTML kavramlarını (Başlıklar, Listeler, Görseller,
Linkler ve Tablolar) içeren eksiksiz ve anlamlı bir "Kurs Tanıtım
Sayfası" kodu oluşturalım.
Görev Kod Bloğu:
<!DOCTYPE
html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Web Tasarım Kursu - Kayıt
Sayfası</title>
</head>
<body>
<!--
Başlık ve Tanıtım -->
<h1>Web Tasarım Uzmanı Olma
Yolculuğu</h1>
<p>Bu
sayfada, sıfırdan ileri seviyeye <strong>HTML, CSS ve Bootstrap</strong> öğrenirken göreceğiniz müfredatın
ilk özeti yer almaktadır.</p>
<hr>
<!--
Görsel ve Detaylar -->
<h2>Kurs Detayları</h2>
<img src="https://picsum.photos" alt="Web
Tasarım Kod Ekranı">
<p>Kurs
hakkında daha detaylı bilgi almak için <a href="https://google.com" target="_blank">resmi sitemizi</a>
ziyaret edebilirsiniz.</p>
<!--
Program Akışı (Listeler) -->
<h3>İlk Modülde Öğreneceğiniz Temel
Başlıklar:</h3>
<ul>
<li>HTML Nedir ve İskelet Yapısı</li>
<li>Metin Formatlama Teknikleri</li>
<li>
Gelişmiş Listeleme Mantığı
<ol
type="a">
<li>Sıralı Listeler</li>
<li>Sırasız Listeler</li>
</ol>
</li>
</ul>
<hr>
<!--
Ders Programı Tablosu -->
<h3>Haftalık Ders Takvimi</h3>
<table border="1" cellpadding="8">
<tr>
<th>Gün</th>
<th>Konu</th>
<th>Durum</th>
</tr>
<tr>
<td>Pazartesi</td>
<td>HTML Temel Etiketleri</td>
<td><strong>Tamamlandı</strong></td>
</tr>
<tr>
<td>Çarşamba</td>
<td>Listeler ve Tablo Yapıları</td>
<td><em>Devam
Ediyor</em></td>
</tr>
</table>
</body>
</html>
Harika!
Kaldığımız yerden, müfredatın bir sonraki mantıksal aşaması olan HTML Ara
Değerlendirme konuları (Block/Inline
Elementler, ID/Class ve Formlar) ile CSS Giriş ve Seçiciler
dünyasına adım atıyoruz.
Yine
dakikaları, önizlemeleri ve gereksiz satırları
tamamen temizleyerek; bol örnek, detaylı konu anlatımı ve pratik uygulamalarla
ilerliyoruz.
🗺️ MODÜL 2:
KAVRAMSAL ANLAYIŞ VE MÜFREDAT TASARIMI
Bu
parça, web sayfalarındaki elemanların yerleşim mantığını kavramayı,
kullanıcıdan veri almayı (Formlar) ve bu yapılara görsel stil kazandırmanın
(CSS) temelini atmayı amaçlar. Süreç şu sıra ile işlenecektir:
[Block ve Inline Element Farkı]
──► [ID ve Class (Kimliklendirme)]
│
▼
[CSS
Dünyasına Giriş] ◄── [Gelişmiş Formlar & İnputlar]
│
▼
[CSS
Seçicileri (Selectors)]
💻 MODÜL 2:
DETAYLI KONU ANLATIMI VE UYGULAMALAR
1. Kaplama Alanları: Block ve Inline Elementler
HTML'deki tüm etiketler ekrandaki davranışlarına göre iki ana gruba
ayrılır. Tasarım yaparken "Bu etiket neden yanına öğe kabul etmiyor?"
veya "Buna neden genişlik veremiyorum?" sorularının cevabı buradadır.
📝 Uygulama
Örneği (Farkı Görme):
<!-- div blok elemandır, arka planı boyarsak tüm satırı kapladığını
görürüz -->
<div style="background-color: lightblue;">Ben bir DIV elementiyim, tüm satır benim!</div>
<div style="background-color: lightgreen;">Ben de yeni bir satıra geçmek zorundayım.</div>
<!-- span inline elemandır, sadece yazısı kadar yer kaplar -->
<span style="background-color: yellow;">Ben SPAN elementiyim,</span>
<span style="background-color: pink;"> yan yana durabiliriz!</span>
2. ID ve Class Kavramları (Yazı İçinde Gezinme)
Yazdığımız
etiketleri CSS ile boyayabilmek veya JavaScript ile kontrol edebilmek için
onlara isim/kimlik vermemiz gerekir.
📝 Uygulama
Örneği:
<!-- Ortak sınıfa sahip paragraflar -->
<p class="metin-stili">Bu birinci paragraf.</p>
<p class="metin-stili">Bu ikinci paragraf. İkisi de aynı sınıftan.</p>
<!-- Tekil bir kimliğe sahip alan -->
<div id="ana-konteyner">Bu alan sayfada benzersizdir.</div>
3. Formlar ve İnputlar (<form>, <input>)
Kullanıcıdan
bilgi (kullanıcı adı, şifre, e-posta, dosya, cinsiyet vb.) toplamak için form
yapıları kullanılır. Web sitelerinin en interaktif bölümüdür.
📝 Yaygın İnput Tipleri:
📝 Uygulama
Örneği (Detaylı Kayıt Formu):
<h2>Kullanıcı Kayıt Formu</h2>
<form action="/kaydet" method="POST">
<!--
Kullanıcı Adı -->
<label for="username">Kullanıcı Adı:</label><br>
<input type="text" id="username" name="username" placeholder="Örn: ahmet123" required><br><br>
<!--
Şifre -->
<label for="sifre">Şifre:</label><br>
<input type="password" id="sifre" name="sifre" required><br><br>
<!--
Cinsiyet (Radio - Sadece biri seçilebilir) -->
<label>Cinsiyet:</label><br>
<input type="radio" id="erkek" name="cinsiyet" value="E">
<label for="erkek">Erkek</label>
<input type="radio" id="kadin" name="cinsiyet" value="K">
<label for="kadin">Kadın</label><br><br>
<!--
İlgi Alanları (Checkbox - Birden fazla seçilebilir)
-->
<label>Bildiğiniz Diller:</label><br>
<input type="checkbox" id="html" name="diller" value="HTML">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="diller" value="CSS">
<label for="css">CSS</label><br><br>
<!--
Şehir Seçimi (Dropdown) -->
<label for="sehir">Yaşadığınız Şehir:</label><br>
<select id="sehir" name="sehir">
<option value="34">İstanbul</option>
<option value="06">Ankara</option>
<option value="32">Isparta</option>
</select><br><br>
<!--
Mesaj Alanı -->
<label for="mesaj">Hakkınızda Kısa Bilgi:</label><br>
<textarea id="mesaj" name="mesaj" rows="4" cols="30" placeholder="Kendinizden bahsedin..."></textarea><br><br>
<!--
Gönder Butonu -->
<button type="submit">Kayıt Ol</button>
</form>
4. CSS Nedir? Ne İçin Kullanılır?
CSS
(Cascading Style Sheets - Basamaklı Stil
Şablonları), HTML ile yazdığımız kuru iskelete biçim, renk, düzen, yazı tipi ve
canlılık vermemizi sağlayan dildir.
📝 Projeye CSS
Kodlarını Ekleme Yöntemleri:
5. Selectors (Seçiciler) Kavramı
CSS
kodlarımızın sayfadaki hangi HTML elemanına etki edeceğini seçme yöntemleridir.
Müfredatta yer alan en kritik seçici türleri şunlardır:
📝 Uygulama
Örneği:
/* 1. Evrensel Seçici
ile tüm sayfayı sıfırlama */
*
{
margin:
0;
padding:
0;
box-sizing:
border-box;
}
/* 2. Element Seçici
ile tüm h1 başlıklarını kırmızı yapma */
h1
{
color:
red;
}
/* 3. Class Seçici ile
ortak butonları biçimlendirme */
.standart-buton {
background-color: blue;
color:
white;
}
/* 4. ID Seçici ile
özel logoyu biçimlendirme */
#site-logosu
{
width:
150px;
}
/* 5. Gelişmiş Seçici:
Virgülle Birleştirme */
h2,
h3, p {
font-family: Arial, sans-serif; /*
Üçünün de yazı tipini ortak yapar */
}
/* 6. Gelişmiş Seçici:
Parent-Child İlişkisi */
.menu-kutusu li a {
color:
green; /*
Sadece .menu-kutusu sınıfına ait liste elemanlarının
içindeki linkleri yeşil yapar */
text-decoration:
none; /*
Linklerin altındaki çizgiyi kaldırır */
}
🛠️ BÖLÜMÜN
KAPSAMLI UYGULAMASI: İLETİŞİM VE ARAYÜZ TASARIMI
Öğrendiğimiz
Block/Inline mantığını,
detaylı Form elementlerini ve CSS Seçicilerini bir araya getiren temiz bir
"Giriş Paneli ve İletişim Arayüzü" şablonu oluşturalım.
HTML Dosyamız (index.html):
<!DOCTYPE
html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Gelişmiş Arayüz Uygulaması</title>
<!--
Harici CSS dosyamızı bağlıyoruz -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div
id="ana-kart">
<h1>Destek & İletişim Formu</h1>
<p
class="aciklama-metni">Lütfen aşağıdaki alanları eksiksiz doldurunuz.
Sizinle en kısa sürede iletişime geçeceğiz.</p>
<form action="#">
<div
class="form-grup">
<label for="adsoyad">Adınız Soyadınız:</label>
<input type="text" id="adsoyad" class="form-kontrol" placeholder="Adınızı giriniz">
</div>
<div
class="form-grup">
<label for="eposta">E-Posta Adresiniz:</label>
<input type="email" id="eposta" class="form-kontrol" placeholder="ornek@mail.com">
</div>
<div
class="form-grup">
<label for="oncelik">Konu Önceliği:</label>
<select id="oncelik" class="form-kontrol">
<option value="dusuk">Düşük</option>
<option value="orta">Orta</option>
<option value="yuksek">Yüksek (Acil)</option>
</select>
</div>
<div
class="form-grup">
<label for="mesaj">Mesajınız:</label>
<textarea id="mesaj" class="form-kontrol" rows="4" placeholder="Sorunuzu detaylıca yazın..."></textarea>
</div>
<button type="submit" class="gonder-butonu">Formu Gönder</button>
</form>
</div>
</body>
</html>
CSS Dosyamız (style.css):
/* Tüm sayfa için yazı
tipini ayarlayalım */
body
{
font-family: 'Segoe
UI', Tahoma,
Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
}
/* ID Seçici ile ana
paneli konumlandırıp şekillendiriyoruz */
#ana-kart
{
background-color: white;
width:
450px;
margin:
50px auto; /* Sayfada ortalamak için */
padding:
30px;
border:
1px solid #e0e0e0;
}
/* Element Seçici */
h1
{
color:
#333333;
font-size: 24px;
margin-bottom:
10px;
}
/* Class Seçici */
.aciklama-metni {
color:
#666666;
font-size: 14px;
margin-bottom:
20px;
}
/* Form gruplarını alt
alta düzgün dizmek için (Block özelliği kullanılıyor)
*/
.form-grup
{
margin-bottom:
15px;
}
.form-grup
label {
display:
block; /*
Label elemanını inline'dan block'a çevirerek inputun üstüne
çıkmasını sağladık */
font-size: 14px;
font-weight: bold;
margin-bottom:
5px;
color:
#444444;
}
/* Parent
kutu içindeki input ve textareaları
ortak seçme */
.form-grup
input, .form-grup select,
.form-grup textarea {
width:
100%;
padding:
10px;
border:
1px solid #ccc;
font-size: 14px;
}
/* Gönder butonunun
tasarımı */
.gonder-butonu {
background-color: #2ecc71;
color:
white;
border:
none;
padding:
12px 20px;
width:
100%;
font-size: 16px;
cursor:
pointer;
}
Müfredatımızın
bir sonraki aşaması olan CSS Görsel Tasarım ve Kutu Modeli (Box Model)
dünyasına giriş yapıyoruz. Bu bölüm, sitenizin renklerini, arka planlarını,
çerçevelerini ve elemanların birbirine olan iç-dış mesafelerini milimetrik
olarak nasıl yöneteceğinizi belirler.
Yine
tüm gereksiz kelimeleri, süreleri ve karmaşık yapıları temizleyerek; tamamen
uygulamalı, bol kod örnekli ve detaylı anlatımla ilerliyoruz.
🗺️ MODÜL 3:
KAVRAMSAL ANLAYIŞ VE MÜFREDAT TASARIMI
Bu
parça, web tasarımında elemanların fiziksel boyutlarını, boşluklarını ve sınır
çizgilerini yöneten Kutu Modeli (Box Model) mimarisine odaklanmaktadır.
Süreç şu mantıksal sıra ile işlenecektir:
[CSS
Renkleri & Arka Planlar] ──► [Borders & Border-Radius]
│
▼
[Box-Sizing: Border-Box] ◄── [Margin & Padding Boşlukları]
│
▼
[Genişlik
& Yükseklik (Responsive Ölçüler)]
💻 MODÜL 3:
DETAYLI KONU ANLATIMI VE UYGULAMALAR
1. Colors (Renkler) ve Arka Plan
Yönetimi
CSS'te renkleri tanımlamanın üç popüler yolu vardır:
Arka
planlara sadece renk değil, background-image ile görsel de atanabilir.
Görselin ekranda tekrar etmemesi (no-repeat) ve ekranı tam kaplaması (cover) için ek komutlar eklenir.
📝 Uygulama
Örneği:
.renkli-kutu {
color:
#ffffff; /* Yazı rengi saf
beyaz */
background-color: rgba(46,
204, 113, 0.8); /*
%80 şeffaflıkta yeşil arka plan */
}
.arka-plan-gorseli {
background-image: url('manzara.jpg');
background-repeat: no-repeat; /* Resmin kiremit gibi tekrarlanmasını engeller */
background-position: center; /*
Resmi ortalar */
background-size: cover; /* Resmi kutunun boyutuna göre esnetip kaplar */
}
2. Borders ve Border-Radius
(Çerçeveler ve Yumuşatma)
Her
HTML elemanının etrafına çizgiler çekebilir ve bu çizgilerin köşelerini
yuvarlatabiliriz.
📝 Uygulama
Örneği:
.profil-resmi {
width:
100px;
height:
100px;
border:
3px solid #3498db; /* 3 piksel kalınlığında, düz mavi çerçeve */
border-radius:
50%; /*
Kare resmi tam yuvarlak (avatar) yapar */
}
.uyari-kutusu {
border-left:
5px solid red;
/* Sadece sol tarafa kalın kırmızı bir şerit
çeker */
border-radius:
4px; /* Köşeleri çok hafif yumuşatır */
}
3. Margin ve Padding
(Dış ve İç Boşluklar)
CSS
kutu modelinin en çok karıştırılan ama en önemli iki kavramıdır:
Saat
yönü kuralı (Top, Right, Bottom, Left)
ile tek satırda dört köşe de yönetilebilir.
📝 Ölçü
Tanımlama Mantığı:
padding: 10px; /*
Dört köşeden de 10px iç boşluk */
padding: 10px 20px; /*
Üst-Alt: 10px , Sağ-Sol: 20px */
padding: 5px 10px 15px 20px; /*
Sırasıyla: Üst, Sağ, Alt, Sol (Saat yönü) */
margin: 0 auto; /* Blok elemanları yatayda tam ortalamak için kullanılan altın
kuraldır! */
4. Kutu Modelinin Kurtarıcısı: box-sizing: border-box
Varsayılan
olarak tarayıcılarda bir kutuya genişlik verdiğinizde, eklediğiniz padding ve border değerleri bu genişliğin üzerine eklenir ve kutu
planladığınızdan daha büyük görünerek tasarımları patlatır.
Bu
sorunu çözmek için box-sizing: border-box; komutu kullanılır. Bu komut,
iç boşlukları ve çerçeveleri genişliğin içine dahil eder.
📝 Görsel
Analiz ve Kod:
/* Bu kuralı evrensel
seçici (*) ile tüm sayfaya uygulamak profesyonel standarttır */
*
{
box-sizing:
border-box;
}
/* Artık aşağıdaki
kutunun toplam genişliği kesinlikle 300px kalacaktır.
Padding ve border içeri doğru daralır, dışarı taşma yapmaz. */
.garanti-kutu {
width:
300px;
padding:
20px;
border:
5px solid black;
}
5. Width, Height
ve Responsive Ölçü Birimleri (Rem,
Em, %)
Ekran
boyutlarının değişmesine uyum sağlamak için sabit pikseller (px)
yerine esnek ölçü birimleri tercih edilir.
📝 Uygulama
Örneği:
<div class="kapsayici" style="width: 800px;">
<!--
Genişliği 800px'in %50'si yani 400px olur -->
<div
class="alt-kutu" style="width: 50%;">
<!--
html fontu 16px ise, 2rem = 32px büyüklüğünde bir başlık olur -->
<h2 style="font-size: 2rem;">Esnek Başlık</h2>
</div>
</div>
🛠️ BÖLÜMÜN
KAPSAMLI UYGULAMASI: MİKRO NAVBAR VE KART TASARIMI
Öğrendiğimiz
tüm Kutu Modeli (Box Model) kurallarını, çerçeve yumuşatmalarını ve dolgu
mantıklarını pekiştirmek için şık bir "Ürün Kartı ve Basit Menü"
arayüzü tasarlayalım.
HTML Yapısı (index.html):
<!DOCTYPE
html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Kutu Modeli ve Tasarım
Uygulaması</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
Basit Navbar Yapımı (Display
Inline Mantığı) -->
<nav class="ust-menu">
<a
href="#" class="menu-link">Anasayfa</a>
<a
href="#" class="menu-link">Ürünler</a>
<a
href="#" class="menu-link">Hakkımızda</a>
</nav>
<!--
Ürün Kartı Tasarımı -->
<div
class="urun-kart">
<div
class="kart-gorsel-alani">
<!--
Kartın üst görseli arka plan olarak CSS'ten verilecek
-->
</div>
<div
class="kart-icerik">
<span class="etiket">Yeni Sezon</span>
<h2 class="urun-baslik">Minimalist Kulaklık</h2>
<p
class="urun-aciklama">Yüksek ses kalitesi ve konforlu kulak yastıkları
ile gün boyu müzik keyfi yaşayın.</p>
<button class="incele-butonu">Hemen İncele</button>
</div>
</div>
</body>
</html>
CSS Yapısı (style.css):
/* 1. Reset ve Box-Sizing Kurulumu */
*
{
margin:
0;
padding:
0;
box-sizing:
border-box;
font-family: 'Arial', sans-serif;
}
body
{
background-color: #f5f6fa;
padding:
20px;
}
/* 2. Basit Navbar Tasarımı (Display Inline ve Padding Mantığı) */
.ust-menu {
background-color: #2c3e50;
padding:
15px;
border-radius:
8px;
margin-bottom:
40px;
text-align:
center;
}
.menu-link {
color:
white;
text-decoration:
none;
padding:
8px 16px; /*
Linklerin etrafında tıklanabilir alanı genişletmek için iç boşluk */
margin:
0 5px;
/* Linklerin birbirine
yapışmaması için dış boşluk */
display:
inline-block; /*
Inline elemana padding-top/bottom düzgün etki etsin diye */
border-radius:
4px;
}
/* 3. Ürün Kartı
Tasarımı (Kutu Modeli Kombinasyonu) */
.urun-kart
{
width:
320px;
background-color: white;
margin:
0 auto; /* Kartı sayfada yatayda ortalar */
border:
1px solid #e1e8ed;
border-radius:
12px;
overflow:
hidden; /*
İçerideki keskin köşeli resmin dışarı taşmasını ve yuvarlağı bozmasını engeller
*/
}
/* Kartın Görsel
Bölümü */
.kart-gorsel-alani {
height:
180px;
background-image: url('https://picsum.photos'); /*
Test amaçlı rastgele görsel */
background-size: cover;
background-position: center;
}
/* Kartın Yazı İçerik
Alanı */
.kart-icerik {
padding:
20px; /*
İçerideki tüm yazıların kenarlardan uzak kalmasını sağlar */
}
/* Kampanya Etiketi */
.etiket {
background-color: #e74c3c;
color:
white;
font-size: 11px;
font-weight: bold;
text-transform:
uppercase;
padding:
4px 8px;
border-radius:
20px;
}
.urun-baslik {
font-size: 1.25rem;
/* rem kullanımı */
color:
#2c3e50;
margin-top:
10px;
margin-bottom:
8px;
}
.urun-aciklama {
font-size: 14px;
color:
#7f8c8d;
line-height:
1.5; /*
Satırlar arası boşluk rahat okunma sağlar */
margin-bottom:
20px;
}
/* Buton Tasarımı */
.incele-butonu {
width:
100%;
padding:
12px;
background-color: #3498db;
color:
white;
border:
none;
border-radius:
6px;
font-size: 15px;
font-weight: bold;
cursor:
pointer;
}
Müfredatımızın
en heyecan verici ve gelişmiş CSS konularını barındıran Etkileşim, Sözde
Sınıflar ve Konumlandırma (Positioning) dünyasına
giriş yapıyoruz. Bu bölüm, butonlara hareket kazandırmanın, listeler içinden
nokta atışı eleman seçmenin ve nesneleri ekranda bağımsızca yüzdürmenin
sırlarını içerir.
Gereksiz
detay ve sürelerden tamamen arındırılmış, bol kod örnekli ve detaylı anlatımla
ilerliyoruz.
🗺️ MODÜL 4:
KAVRAMSAL ANLAYIŞ VE MÜFREDAT TASARIMI
Bu
parça, web elemanlarının kullanıcı hareketlerine verdiği tepkileri (hover), gelişmiş seçicileri (nth-child) ve nesnelerin sayfa
koordinatları üzerinde milimetrik olarak taşınmasını (position) yönetir. Süreç şu sıra ile işlenecektir:
[Hover & Buton Efektleri] ──► [Pseudo
Elements & Nth-Child]
│
▼
[Position: Absolute (İç Kutu)] ◄──
[Position: Fixed
(Sabitleme)]
💻 MODÜL 4:
DETAYLI KONU ANLATIMI VE UYGULAMALAR
1. Hover Özelliği ve Buton Yapımı
:hover bir sözde sınıftır (pseudo-class). Kullanıcının faresi, belirlenen bir HTML
elemanının üzerine geldiği an devreye girer. Buton tasarımlarında; arka plan
rengini değiştirmek, alt çizgileri kaldırmak (text-decoration: none) ve yumuşak geçiş efektleri
(transition) uygulamak için sıkça kullanılır.
📝 Uygulama
Örneği:
.modern-buton {
background-color: #34495e;
color:
white;
padding:
12px 24px;
border:
none;
border-radius:
4px;
cursor:
pointer;
/*
Renk değişiminin göze batmadan, 0.3 saniyede yumuşakça
gerçekleşmesini sağlar */
transition:
background-color 0.3s ease;
}
/* Fare butonun
üzerine geldiğinde tetiklenecek kodlar */
.modern-buton:hover {
background-color: #2c3e50;
text-decoration:
underline; /*
Yazının altını çizer */
}
2. Pseudo Elements
(Sözde Elemanlar) ve Nth-Child Mantığı
📝 Uygulama
Örneği:
/* Nth-Child
Kullanımı: Listenin sadece 2. elemanını kalın ve mavi yapar */
ul li:nth-child(2)
{
color:
#2980b9;
font-weight: bold;
}
/* Nth-Child
Kullanımı: Tablolarda tek ve çift satırları farklı boyayarak (zebra stili)
okunabilirliği artırır */
table tr:nth-child(even) {
background-color: #f2f2f2; /*
Çift numaralı satırlar gri olur */
}
/* Pseudo
Element Kullanımı: Linklerin önüne otomatik ok işareti koyma */
.bilgi-linki::before {
content:
"👉 ";
font-size: 12px;
}
3. Position-Fixed (Konum
Sabitleme)
position: fixed; uygulanan bir eleman, normal
HTML akışından tamamen kopar. Sayfa ne kadar aşağı kaydırılırsa kaydırılsın, o
eleman tarayıcı ekranının belirlenen bir köşesinde çakılı kalır. Canlı
destek butonları veya yukarı kaydırıldığında ekranda sabit duran menüler (Sticky/Fixed Navbar)
bu yöntemle yapılır.
📝 Uygulama
Örneği:
.yukari-cik-butonu {
position:
fixed;
bottom:
20px; /* Ekranın en altından 20px yukarıda */
right:
20px; /* Ekranın en sağından 20px solda */
background-color: #e74c3c;
color:
white;
padding:
15px;
border-radius:
50%;
z-index: 9999; /*
Sayfadaki diğer tüm elemanların her zaman en üstünde kalmasını garanti eder */
}
4. Position-Absolute (İç Kutu
Konumlandırma) ve Relative İlişkisi
position: absolute; (Mutlak Konumlandırma) bir
elemanı, projedeki normal yerleşim kurallarından özgürleştirerek koordinat
bazlı (X ve Y ekseninde) taşımamızı sağlar.
📝 Uygulama
Örneği:
/* Ana kart kutusu */
.urun-kart
{
position:
relative; /*
İçindeki absolute elemana sınır çizer, abilik yapar
*/
width:
300px;
height:
400px;
background-color: white;
}
/* Kartın köşesine
iliştireceğimiz indirim rozeti */
.indirim-rozeti {
position:
absolute;
top: 10px; /*
Üst kenara sıfırla ve 10px boşluk bırak */
left:
10px; /* Sol kenara sıfırla ve 10px boşluk bırak */
background-color: #2ecc71;
color:
white;
padding:
5px 10px;
font-size: 12px;
}
🛠️ BÖLÜMÜN
KAPSAMLI UYGULAMASI: ETKİLEŞİMLİ TABLO VE ROZETLİ KART ARAYÜZÜ
Öğrendiğimiz
tüm efekt, gelişmiş seçici ve konumlandırma tekniklerini bünyesinde barındıran
profesyonel bir arayüz çalışması yapalım. Sayfamız kaydırıldığında sabit kalan
bir menü, zebra desenli bir tablo ve üzerinde indirim rozeti uçan bir kart
içerecek.
HTML Dosyamız (index.html):
<!DOCTYPE
html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Gelişmiş CSS Arayüzü</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
1. Position Fixed Örneği:
Sabit Navbar -->
<nav class="sabit-navbar">
<h2>Tasarım Akademisi</h2>
</nav>
<!--
İçerik Alanı (Navbar altından taşmasın diye
kapsayıcı) -->
<main class="icerik-alani">
<!--
2. Position Absolute
Örneği: Rozetli Kurs Kartı -->
<div
class="kurs-kart">
<span class="indirim-rozeti">%50 İndirim</span>
<div
class="kart-gorsel"></div>
<div
class="kart-detay">
<h3>Sıfırdan İleri Seviye Web
Tasarım</h3>
<button class="kayit-buton">Hemen Kaydol</button>
</div>
</div>
<!--
3. Nth-Child ve Hover
Örneği: Zebra Desenli Etkileşimli Tablo -->
<h3>Öğrenci Dereceleri</h3>
<table class="etkilesimli-tablo">
<tr>
<th>Öğrenci Adı</th>
<th>Puan</th>
</tr>
<tr>
<td>Ahmet Yılmaz</td>
<td>95</td>
</tr>
<tr>
<td>Mehmet Kaya</td>
<td>88</td>
</tr>
<tr>
<td>Ayşe Demir</td>
<td>100</td>
</tr>
<tr>
<td>Fatma Çelik</td>
<td>91</td>
</tr>
</table>
</main>
</body>
</html>
CSS Dosyamız (style.css):
*
{
margin:
0;
padding:
0;
box-sizing:
border-box;
font-family: Arial, sans-serif;
}
body
{
background-color: #f9f9f9;
padding-top:
80px; /* Sabit
navbarın içeriği kapatmasını engellemek için üst
boşluk */
}
/* 1. Sabit Navbar Tasarımı */
.sabit-navbar {
position:
fixed;
top: 0;
left:
0;
width:
100%;
height:
60px;
background-color: #2c3e50;
color:
white;
display:
flex;
align-items:
center;
padding-left:
20px;
z-index: 1000;
box-shadow:
0 2px 5px rgba(0,0,0,0.1);
}
/* Kapsayıcı Alan */
.icerik-alani {
max-width:
800px;
margin:
0 auto;
padding:
20px;
}
/* 2. Rozetli Kart
Tasarımı (Relative - Absolute İlişkisi) */
.kurs-kart
{
position:
relative; /*
Absolute rozetin sınır çizgisi */
width:
300px;
background-color: white;
border-radius:
8px;
overflow:
hidden;
box-shadow:
0 4px 6px rgba(0,0,0,0.05);
margin-bottom:
40px;
}
.kart-gorsel {
height:
150px;
background-image: url('https://picsum.photos');
background-size: cover;
}
/* Mutlak
Konumlandırılan Rozet */
.indirim-rozeti {
position:
absolute;
top: 15px;
right:
15px;
background-color: #e74c3c;
color:
white;
font-size: 12px;
font-weight: bold;
padding:
6px 12px;
border-radius:
20px;
}
.kart-detay
{
padding:
15px;
}
.kart-detay
h3 {
font-size: 16px;
margin-bottom:
15px;
color:
#333;
}
/* Buton ve Hover Efekti */
.kayit-buton {
width:
100%;
padding:
10px;
background-color: #3498db;
color:
white;
border:
none;
border-radius:
4px;
cursor:
pointer;
transition:
background-color 0.2s ease;
}
.kayit-buton:hover {
background-color: #2980b9;
}
/* 3. Etkileşimli
Tablo Tasarımı (Nth-Child Uygulaması) */
.etkilesimli-tablo {
width:
100%;
border-collapse:
collapse;
margin-top:
15px;
background-color: white;
}
.etkilesimli-tablo th, .etkilesimli-tablo td {
padding:
12px;
text-align:
left;
border-bottom:
1px solid #ddd;
}
.etkilesimli-tablo th {
background-color: #ecf0f1;
color:
#2c3e50;
}
/* Nth-Child:
Çift satırları hafif gri boyayarak ayırır */
.etkilesimli-tablo tr:nth-child(even) {
background-color: #fcfcfc;
}
/* Hover
Efekti: Fare ile tablonun üzerine gelinen satırı vurgular */
.etkilesimli-tablo tr:hover
{
background-color: #f1f2f6;
}
Müfredatımızın
en devrimsel ve modern web tasarımının temelini oluşturan Flexbox
(Esnek Kutu Modeli) ve Responsive
(Mobil Uyumlu) Tasarım dünyasına giriş yapıyoruz. Bu bölüm, eskiden web
sitelerini yan yana dizmek için kullanılan tüm çileli yöntemleri çöpe atan ve
sitelerin telefon ekranlarında kusursuz görünmesini sağlayan sihirli formülleri
içerir.
Gereksiz
detay ve sürelerden arındırılmış, bol kod örnekli ve detaylı anlatımla
ilerliyoruz.
🗺️ MODÜL 5:
KAVRAMSAL ANLAYIŞ VE MÜFREDAT TASARIMI
Bu
parça, elemanların tek bir satır veya sütun üzerinde esnekçe hizalanmasını (flexbox) ve ekran genişliğine göre sitenin şekil değiştirmesini (@media) yönetir. Süreç şu sıra ile
işlenecektir:
[Flexbox Nedir? (display:
flex)] ──► [Yatay & Dikey Hizalama]
│
▼
[Mobil
Şablon Tasarımı] ◄── [@Media Sorguları (Breakpoints)]
💻 MODÜL 5:
DETAYLI KONU ANLATIMI VE UYGULAMALAR
1. Flexbox Nedir? Ne İçin
Kullanılır?
Flexbox, bir kapsayıcı (parent) kutu
içerisindeki alt elemanları (children) satır veya
sütun bazında esnek, dinamik ve oranlı bir şekilde dizmek için
kullanılan tek boyutlu bir düzen modelidir.
Bir
kutuya display: flex; dendiği an, o kutunun
içindeki tüm alt elemanlar otomatik olarak blok olma özelliğini yitirir ve
yan yana dizilirler.
📝 En Kritik Flexbox Özellikleri:
2. Responsive Tasarım ve @Media
Sorguları
Responsive tasarım, bir web sitesinin masaüstü bilgisayar, tablet ve akıllı
telefon gibi farklı ekran genişliklerine sahip cihazlarda bozulmadan, ekrana
tam uyum sağlayarak görüntülenmesidir.
Bu
uyumu sağlamak için CSS'te @media sorguları (Media Queries) kullanılır. Tarayıcıya "Eğer ekran genişliği
şu pikselden küçükse, aşağıdaki kodları devreye sok" emri verilir. Bu
kırılma noktalarına breakpoint denir.
📝 Uygulama
Örneği:
/* Masaüstü
bilgisayarlar için varsayılan stil */
.ana-kutu
{
width:
50%;
background-color: lightblue;
}
/* Ekran genişliği
768px veya daha küçük olduğunda (Tablet ve Telefonlar)
yukarıdaki stil
ezilir ve aşağıdaki kodlar çalışır: */
@media (max-width: 768px)
{
.ana-kutu {
width:
100%; /*
Ekranı tam kaplasın */
background-color: lightgreen; /* Rengi değişsin */
}
}
🛠️ BÖLÜMÜN
KAPSAMLI UYGULAMASI: MOBİL UYUMLU E-TİCARET NAV-BAR VE KART DÜZENİ
Öğrendiğimiz
Flexbox hizalama güçlerini ve @media esnekliğini birleştirerek,
masaüstünde yan yana, mobilde ise alt alta kusursuzca dizilen modern bir "E-Ticaret
Navbar ve Ürün Vitrini" şablonu
tasarlayalım.
HTML Dosyamız (index.html):
<!DOCTYPE
html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> <!-- Mobil uyum için bu satır zorunludur -->
<title>Flexbox ve Responsive Uygulaması</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
Flexbox Navbar -->
<nav class="esnek-navbar">
<div
class="logo">ModaSepeti</div>
<div
class="menu-linkleri">
<a
href="#">Anasayfa</a>
<a
href="#">Koleksiyon</a>
<a
href="#">İndirimler</a>
</div>
<button class="sepet-buton">Sepetim (0)</button>
</nav>
<!--
Flexbox Ürün Vitrini -->
<main class="urun-vitrini">
<div
class="vitrin-kart">
<div
class="urun-resim
kirmizi"></div>
<h3>Kırmızı Mont</h3>
<p>1.250
TL</p>
</div>
<div
class="vitrin-kart">
<div
class="urun-resim
mavi"></div>
<h3>Mavi Ceket</h3>
<p>950
TL</p>
</div>
<div
class="vitrin-kart">
<div
class="urun-resim
siyah"></div>
<h3>Siyah Deri Ceket</h3>
<p>2.100
TL</p>
</div>
</main>
</body>
</html>
CSS Dosyamız (style.css):
/* Temel Sıfırlama */
*
{
margin:
0;
padding:
0;
box-sizing:
border-box;
font-family: 'Segoe
UI', sans-serif;
}
body
{
background-color: #f8f9fa;
}
/*
========================================================
MASAÜSTÜ GÖRÜNÜMÜ (Varsayılan Stiller)
======================================================== */
/* Navbar'ı
Flexbox ile 3 parçaya bölüp köşelere dağıtıyoruz */
.esnek-navbar {
display:
flex;
justify-content:
space-between; /*
Sol, orta ve sağ elemanı köşelere iter */
align-items:
center;
/* Hepsini dikeyde
aynı hizaya getirir */
padding:
20px 40px;
background-color: #ffffff;
box-shadow:
0 2px 4px rgba(0,0,0,0.05);
}
.logo
{
font-size: 24px;
font-weight: bold;
color:
#2c3e50;
}
/* Linkleri kendi
içinde yan yana dizmek için yine flex kullanıyoruz */
.menu-linkleri {
display:
flex;
}
.menu-linkleri a {
text-decoration:
none;
color:
#555;
margin:
0 15px;
font-weight: 500;
}
.sepet-buton
{
padding:
10px 20px;
background-color: #e74c3c;
color:
white;
border:
none;
border-radius:
20px;
cursor:
pointer;
}
/* Ürün Vitrini
Kapsayıcısı */
.urun-vitrini
{
display:
flex;
justify-content:
space-around; /*
Kartları aralarında eşit boşluklarla yan yana dizer */
max-width:
1200px;
margin:
50px auto;
padding:
0 20px;
}
/* Tekil Kart Tasarımı
*/
.vitrin-kart {
background-color: white;
width:
30%; /*
Masaüstünde 3 kart yan yana sığsın diye */
padding:
15px;
border-radius:
8px;
text-align:
center;
box-shadow:
0 4px 6px rgba(0,0,0,0.02);
}
.urun-resim
{
height:
200px;
border-radius:
6px;
margin-bottom:
15px;
}
.kirmizi { background-color:
#ff7675; }
.mavi { background-color:
#74b9ff; }
.siyah { background-color:
#2d3436; }
/*
========================================================
RESPONSIVE DÜZENLEME (Mobil Ekranlar İçin)
======================================================== */
/* Ekran boyutu 768px
altına düştüğünde (Tablet ve Telefonlar) */
@media (max-width: 768px)
{
/*
Navbar'ı yan yana düzen yerine alt alta sütun
düzenine çeviriyoruz */
.esnek-navbar {
flex-direction:
column;
gap:
15px; /*
Elemanların arasına dikey boşluk ekler */
text-align:
center;
padding:
15px;
}
.menu-linkleri
{
margin-bottom:
5px;
}
/*
Vitrin içindeki kartların yan yana dizilimini iptal edip alt alta döküyoruz */
.urun-vitrini {
flex-direction:
column;
gap:
25px; /*
Kartların alt alta yapışmasını engeller */
}
/*
Kartlar masaüstünde %30 yer kaplarken, mobilde ekranı
tam kaplasın */
.vitrin-kart {
width:
100%;
}
}
Müfredatımızın
ilk büyük dönüm noktası olan CSS İleri Uygulamaları ve #PROJE:
Sıfırdan Web Sitesi Tasarımı modülüne giriş yapıyoruz. Bu bölüm, internet
sitelerinde sıklıkla karşılaşılan yapısal tasarım hatalarının çözümlerini,
harici kütüphaneleri (Animate.css, Font Awesome) projeye dahil etmeyi ve çok
sayfalı bir web sitesinin iskeletini inşa etmeyi içerir.
Gereksiz
detay ve sürelerden arındırılmış, tamamen pratik kodlama odaklı ve detaylı
anlatımla ilerliyoruz.
🗺️ MODÜL 6:
KAVRAMSAL ANLAYIŞ VE MÜFREDAT TASARIMI
Bu
parça, CSS ile yapılan yaygın hizalama hatalarının giderilmesini ve zengin
medya içerikleri (videolar, harici ikonlar, hazır animasyon kütüphaneleri)
kullanarak eksiksiz bir web sitesi ana sayfası tasarlamayı amaçlar. Süreç şu
sıra ile işlenecektir:
[Div Ortalamama Hatası ve Çözümü] ──► [Harici Kaynak Bağlama
(Font Awesome/Animate.css)]
│
▼
[Alt
Navbar & Footer Alanı]
◄── [Esnek Video & Arka Plan Yönetimi]
💻 MODÜL 6:
DETAYLI KONU ANLATIMI VE UYGULAMALAR
1. Sıkça Rastlanan Hatalar: "Div'im
Neden Ortalanmıyor?"
Web
tasarımına yeni başlayanların en çok vakit kaybettiği konu, bir blok elemanı (<div>) sayfa içinde yatay olarak
ortalayamamaktır. Bir elemana sadece margin: 0 auto; vermek her zaman yeterli
olmaz.
📝 Hatalı ve
Doğru Kullanım Örneği:
/* ❌ HATALI: Div ortalanmaz, çünkü genişliği
belli değil */
.hatali-div {
margin:
0 auto;
}
/* DOĞRU: Genişliği belli olan blok
eleman sayfayı kusursuz ortalar */
.dogru-div {
width:
400px;
margin:
0 auto;
}
2. Harici Kütüphaneleri Projeye Dahil Etme
Modern
web tasarımında sıfırdan ikon çizmek veya karmaşık animasyon kodları yazmak
yerine dünya standartlarında kabul görmüş harici CSS dosyaları projenin <head> kısmına çağrılır:
📝 Kütüphane
Bağlantı Standardı:
<head>
<!--
Harici CSS dosyaları kendi yazdığımız style.css'ten
ÖNCE eklenmelidir -->
<link rel="stylesheet" href="https://cloudflare.com">
<link rel="stylesheet" href="https://cloudflare.com">
<link rel="stylesheet" href="style.css">
</head>
3. Anasayfaya Çoklu Video Ekleme ve Esnek Düzen
Web
sitelerinin ana sayfalarında arka plan görsellerinin üzerine veya yan yana
dikey/yatay videolar yerleştirmek popüler bir trenddir. Bu videoların esnek
kalabilmesi ve üst üste binmemesi için yine display: flex ve katman önceliğini
belirleyen z-index imdadımıza yetişir.
📝 Uygulama
Örneği:
.video-kapsayici {
display:
flex;
gap:
20px;
justify-content:
center;
}
.video-kapsayici video {
width:
45%; /* Yan
yana iki video sığması için */
border-radius:
8px;
box-shadow:
0 4px 10px rgba(0,0,0,0.15);
}
🛠️ PROJE
UYGULAMASI: MULTİMEDYA VE ANİMASYONLU KURUMSAL ANA SAYFA
Müfredatta
yer alan ilk büyük projenin şablonunu hayata geçiriyoruz. Projemiz; sabit bir
üst ve alt menü (Navbar ve Alt Navbar),
animasyonlu giriş kartları, yan yana esnek videolar, Font Awesome
ikonlu bir Footer (alt bilgi) alanı ve z-index ile katmanlandırılmış
modern bir düzen içerecek.
HTML Dosyamız (index.html):
<!DOCTYPE
html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Profesyonel Web Projesi - Ana
Sayfa</title>
<!--
Harici CDN Kütüphaneleri -->
<link rel="stylesheet" href="https://cloudflare.com">
<link rel="stylesheet" href="https://cloudflare.com">
<!--
Kendi Tasarım Dosyamız -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
1. Üst Navbar Alanı -->
<header class="ana-header">
<div
class="logo">KreatifMedya</div>
<nav class="ana-nav">
<a
href="#">Anasayfa</a>
<a
href="#">Hizmetlerimiz</a>
<a
href="#">Projelerimiz</a>
<a
href="#">İletişim</a>
</nav>
</header>
<!--
2. Alt Bilgilendirme Navbarı -->
<div
class="alt-navbar">
<span><i class="fa-solid fa-bullhorn"></i>
Duyuru: Yeni kayıt dönemimiz başladı!</span>
</div>
<!--
Ana İçerik Alanı -->
<main class="ana-icerik">
<!--
Animate.css kütüphanesi ile canlandırılan başlık -->
<h1 class="animate__animated
animate__fadeInDown ana-baslik">Geleceğin Web Teknolojileri</h1>
<!--
3. Esnek Kart Düzeni -->
<section class="kartlar-alani">
<div
class="proje-kart
animate__animated animate__zoomIn">
<i
class="fa-solid fa-code kart-ikon"></i>
<h3>Temiz Kodlama</h3>
<p>Standartlara
uygun, modern web mimarisi.</p>
</div>
<div
class="proje-kart
animate__animated animate__zoomIn
animate__delay-1s">
<i
class="fa-solid fa-layer-group kart-ikon"></i>
<h3>Esnek Tasarım</h3>
<p>Tüm
mobil ve masaüstü ekranlarla tam uyum.</p>
</div>
</section>
<!--
4. Çoklu Video Bölümü -->
<section class="medya-bolumu">
<h2>Tanıtım Videolarımız</h2>
<div
class="video-grid">
<video controls>
<source src="https://w3schools.com" type="video/mp4">
</video>
<video controls>
<source src="https://w3schools.com" type="video/mp4">
</video>
</div>
</section>
</main>
<!--
5. İkonlu Footer Alanı -->
<footer class="site-footer">
<p>© 2026 KreatifMedya.
Tüm Hakları Saklıdır.</p>
<div
class="sosyal-medya">
<a
href="#" class="sosyal-link"><i class="fa-brands fa-instagram"></i></a>
<a
href="#" class="sosyal-link"><i class="fa-brands fa-youtube"></i></a>
<a
href="#" class="sosyal-link"><i class="fa-brands fa-github"></i></a>
</div>
</footer>
</body>
</html>
CSS Dosyamız (style.css):
/* Temel Tasarım Reset
Ayarları */
*
{
margin:
0;
padding:
0;
box-sizing:
border-box;
font-family: 'Segoe
UI', Tahoma,
Geneva, Verdana, sans-serif;
}
body
{
background-color: #fafafa;
color:
#2c3e50;
}
/* 1. Üst Navbar (Z-index öncelikli) */
.ana-header {
display:
flex;
justify-content:
space-between;
align-items:
center;
padding:
15px 50px;
background-color: #1a252f;
color:
white;
position:
sticky;
top: 0;
z-index: 100; /*
Videoların veya kartların üstünde kalması için */
}
.logo
{
font-size: 22px;
font-weight: bold;
color:
#3498db;
}
.ana-nav a {
color:
#bdc3c7;
text-decoration:
none;
margin-left:
20px;
transition:
color 0.3s;
}
.ana-nav a:hover {
color:
white;
}
/* 2. Alt Navbar Şeridi */
.alt-navbar {
background-color: #34495e;
color:
#f1c40f;
text-align:
center;
padding:
8px;
font-size: 14px;
font-weight: 500;
}
/* Ana İçerik
Kapsayıcısı */
.ana-icerik {
max-width:
1100px;
margin:
0 auto; /* Div Ortalaması */
padding:
40px 20px;
}
.ana-baslik {
text-align:
center;
margin-bottom:
40px;
font-size: 32px;
}
/* 3. Kart Alanı
Düzeni */
.kartlar-alani {
display:
flex;
justify-content:
space-between;
gap:
30px;
margin-bottom:
50px;
}
.proje-kart
{
background-color: white;
flex:
1; /*
Kartların eşit genişlikte dağılmasını sağlar */
padding:
30px;
border-radius:
8px;
text-align:
center;
box-shadow:
0 4px 6px rgba(0,0,0,0.02);
border-bottom:
4px solid #3498db;
}
.kart-ikon
{
font-size: 40px;
color:
#3498db;
margin-bottom:
15px;
}
.proje-kart
h3 {
margin-bottom:
10px;
}
/* 4. Medya / Video
Düzeni */
.medya-bolumu
{
margin-top:
40px;
text-align:
center;
}
.medya-bolumu
h2 {
margin-bottom:
20px;
}
.video-grid
{
display:
flex;
justify-content:
space-between;
gap:
20px;
}
.video-grid
video {
width:
50%;
border-radius:
8px;
outline:
none;
}
/* 5. Footer Alanı (Flexbox ile
Elemanları Hizalama) */
.site-footer {
background-color: #1a252f;
color:
#95a5a6;
padding:
30px 50px;
display:
flex;
justify-content:
space-between;
align-items:
center;
margin-top:
60px;
}
.sosyal-medya {
display:
flex;
gap:
15px;
}
.sosyal-link {
color:
#95a5a6;
font-size: 20px;
transition:
transform 0.2s, color 0.2s;
}
/* Hover
durumunda ikonların yukarı doğru esnemesi */
.sosyal-link:hover {
color:
#3498db;
transform:
translateY(-3px);
}
Müfredatımızın
en kritik dönüm noktalarından biri olan ve modern arayüz geliştirmeyi inanılmaz
derecede hızlandıran BOOTSTRAP dünyasına giriş yapıyoruz. Bu bölümde,
sıfırdan yüzlerce satır CSS yazmak yerine, tüm dünyanın standart olarak kabul
ettiği hazır bir CSS çerçevesini (Framework) projemize nasıl entegre
edeceğimizi ve sitemizi milimetrik bir ızgara (Grid) sistemine nasıl
oturtacağımızı öğreneceğiz.
Gereksiz
detay ve sürelerden arındırılmış, tamamen pratik kodlama odaklı ve detaylı
anlatımla ilerliyoruz.
🗺️ MODÜL 7:
KAVRAMSAL ANLAYIŞ VE MÜFREDAT TASARIMI
Bu
parça, Bootstrap'in iskelet sistemini oluşturan esnek
konteyner yapılarını (container) ve ekranı 12 eşit parçaya
bölen gelişmiş sütun düzenini (grid system) kavramayı amaçlar. Süreç şu
sıra ile işlenecektir:
[Bootstrap Nedir & Projeye Dahil Etme] ──► [Container Yapıları]
│
▼
[Hazır
Componentler (Cards & Alert)] ◄── [12'lik Grid (Satır/Sütun)]
💻 MODÜL 7:
DETAYLI KONU ANLATIMI VE UYGULAMALAR
1. Bootstrap Nedir? Projeye Nasıl
Eklenir?
Bootstrap; Twitter mühendisleri tarafından geliştirilen, açık
kaynaklı, kullanıma hazır bir HTML, CSS ve JavaScript kütüphanesidir.
📝 Projeye Bootstrap Dahil Etme (CDN Yöntemi):
Bootstrap'i kullanabilmek için projenizin <head> kısmına hazır CSS
bağlantısını eklemeniz yeterlidir.
<head>
<!--
Bootstrap 5 CSS CDN bağlantısı -->
<link href="https://jsdelivr.net" rel="stylesheet">
</head>
2. Konteyner (container) Kavramı
Bootstrap'te her tasarım mutlaka bir konteyner kutusunun içinde başlar. Konteynerlar içeriği sarmalar, sağdan soldan otomatik
boşluklar bırakır ve sayfanın ekran boyutuna göre esnemesini kontrol eder. Two
ana tipi vardır:
3. Grid (Izgara) Sistemi: Satır ve Sütun Mantığı (.row
ve .col)
Bootstrap'in en güçlü ve en çok kullanılan mekanizmasıdır. Bootstrap, her bir satırı (.row) hayali olarak 12 eşit
parçaya (sütuna) böler. Siz yan yana koyacağınız kutuların bu 12 parçadan
kaçını kaplayacağını sınıflarla belirtirsiniz.
📝 Grid Bölme
Örnekleri (Toplamları her zaman 12 olmalıdır):
📝 Responsive Grid Sınıfları (Mobil Uyum Kırılmaları):
Ekran
boyutlarına göre farklı sütun genişlikleri atayabilirsiniz:
🛠️ BÖLÜMÜN
KAPSAMLI UYGULAMASI: BOOTSTRAP İLE RESPONSIVE ÜRÜN VİTRİNİ
Öğrendiğimiz
Konteyner, Satır-Sütun (Grid) mantığını ve Bootstrap'in
hazır Kart (card) ve Uyarı (alert) bileşenlerini harmanlayan
modern bir e-ticaret vitrin tasarımı yapalım.
Bu
kodlar sayesinde; masaüstünde yan yana 3 ürün kartı görünürken, tabletlerde 2
ürün kartı, cep telefonlarında ise kartlar otomatik olarak ekranı kaplayıp alt
alta sıralanacaktır.
HTML Dosyamız (index.html):
<!DOCTYPE
html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Bootstrap
Grid ve Tasarım Uygulaması</title>
<!--
Bootstrap 5 CSS CDN -->
<link href="https://jsdelivr.net" rel="stylesheet">
</head>
<body class="bg-light"> <!-- bg-light: Bootstrap'in
hazır hafif gri arka plan sınıfı -->
<!--
Sabit Genişlikli Konteyner Başlatıyoruz -->
<div
class="container my-5"> <!--
my-5: Üstten ve alttan margin (boşluk) ekler -->
<!--
Hazır Bootstrap Alert
(Uyarı) Bileşeni -->
<div
class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Fırsat Haftası!</strong> Tüm teknoloji ürünlerinde sepette %20
indirim sizi bekliyor.
</div>
<h1 class="text-center mb-4 text-dark fw-bold">Öne Çıkan Ürünler</h1>
<!--
Grid Satırını Başlatıyoruz -->
<div
class="row g-4"> <!--
g-4: Sütunların arasına Bootstrap standardında boşluk
(gutter) ekler -->
<!--
1. ÜRÜN KART SÜTUNU -->
<!--
col-12: Mobilde tam ekran kapla -->
<!--
col-md-6: Tablette 2'li dizil (12/6 = 2) -->
<!--
col-lg-4: Masaüstünde 3'lü dizil (12/4 = 3) -->
<div
class="col-12
col-md-6 col-lg-4">
<div
class="card h-100 shadow-sm"> <!-- card: Hazır kart bileşeni,
h-100: Eşit yükseklik, shadow-sm: Hafif gölge -->
<img src="https://picsum.photos" class="card-img-top" alt="Ürün
Görseli">
<div class="card-body">
<h5 class="card-title fw-bold">Akıllı Saat Pro</h5>
<p class="card-text text-muted">Arayıp sorma, adım sayma ve nabız
ölçme özellikleriyle sporun en iyi eşlikçisi.</p>
<h6 class="text-primary fw-bold
mb-3">3.499
TL</h6>
<a href="#" class="btn btn-primary
w-100">Sepete
Ekle</a> <!-- btn btn-primary:
Hazır mavi buton sınıfı -->
</div>
</div>
</div>
<!--
2. ÜRÜN KART SÜTUNU -->
<div
class="col-12
col-md-6 col-lg-4">
<div
class="card h-100 shadow-sm">
<img src="https://picsum.photos" class="card-img-top" alt="Ürün
Görseli">
<div class="card-body">
<h5 class="card-title fw-bold">Kablosuz Kulaklık</h5>
<p class="card-text text-muted">Aktif gürültü engelleme (ANC)
teknolojisi ve 30 saate varan yüksek batarya ömrü.</p>
<h6 class="text-primary fw-bold
mb-3">1.999
TL</h6>
<a href="#" class="btn btn-primary
w-100">Sepete
Ekle</a>
</div>
</div>
</div>
<!--
3. ÜRÜN KART SÜTUNU -->
<div
class="col-12
col-md-6 col-lg-4">
<div
class="card h-100 shadow-sm">
<img src="https://picsum.photos" class="card-img-top" alt="Ürün
Görseli">
<div class="card-body">
<h5 class="card-title fw-bold">Oyuncu Faresi (Mouse)</h5>
<p class="card-text text-muted">16.000 DPI hassasiyet, ultra hafif ergonomik
tasarım ve RGB ışıklandırma sistemi.</p>
<h6 class="text-primary fw-bold
mb-3">850
TL</h6>
<a href="#" class="btn btn-primary
w-100">Sepete
Ekle</a>
</div>
</div>
</div>
</div>
<!-- Satır Sonu -->
</div> <!--
Konteyner Sonu -->
<!--
Bootstrap JS (İnteraktif bileşenlerin çalışması için
opsiyonel ama önerilir) -->
<script src="https://jsdelivr.net"></script>
</body>
</html>
Müfredatımızın
en kapsamlı uygulama alanlarından biri olan #PROJE: Bootstrap
ile Sıfırdan Haber Sitesi Tasarımı modülüne geçiş yapıyoruz. Bu bölümde,
bir önceki modülde öğrendiğimiz Bootstrap
yeteneklerini (Grid sistemi, Konteynerlar) kullanarak
gerçek dünya senaryosuna uygun, dinamik görünümlü, modern bir haber portalı
arayüzü inşa edeceğiz.
Müfredat
listesindeki dakika, saniye, ders sayısı ve önizleme
ifadeleri temizlenmiş; tamamen kodlama pratikleri ve detaylı konu anlatımı
odaklı tasarımla ilerliyoruz.
🗺️ MODÜL 8:
KAVRAMSAL ANLAYIŞ VE MÜFREDAT TASARIMI
Bu
parça, Bootstrap bileşenlerini hiyerarşik bir
bütünlük içinde bir araya getirerek tam ölçekli bir web portalı iskeleti
oluşturmayı amaçlar. Süreç şu sıra ile işlenecektir:
[Bootstrap Navbar Tasarımı] ──►
[Son Dakika Kayan Yazı Bölümü]
│
▼
[Bootstrap İletişim Formu] ◄── [Haber Kartları Grid Düzeni]
💻 MODÜL 8:
DETAYLI KONU ANLATIMI VE UYGULAMALAR
1. Bootstrap ile Gelişmiş Navbar Yapımı
Bootstrap, mobil cihazlarda otomatik olarak açılır-kapanır (hamburger
menü) özelliğine kavuşan harika bir .navbar bileşeni
sunar.
2. Son Dakika Haberleri Bölümü (Kayan Yazı Mantığı)
Haber
sitelerinin vazgeçilmezi olan akıcı "Son Dakika" şeridi için HTML'in geleneksel <marquee> etiketi veya Bootstrap'in flex yetenekleri
birleştirilir. CSS yardımıyla sol tarafa sabit bir "SON DAKİKA"
etiketi yerleştirilip, sağ taraftaki metinlerin akması veya dikkat çekici
renklerle vurgulanması sağlanır.
3. Haber Kartları Grid Düzeni (.row-cols-)
Bootstrap 5 ile birlikte gelen .row-cols- sınıfı, sütunlara tek tek genişlik vermek yerine doğrudan
satır (.row) etiketine yazılarak
altındaki tüm kartların otomatik hizalanmasını sağlar.
4. Bootstrap Form ve Giriş Öğeleri
(.form-control)
Bootstrap'te form elemanlarına şık, odaklanıldığında (focus) parlayan modern bir görünüm kazandırmak için .form-control sınıfı kullanılır.
🛠️ PROJE
UYGULAMASI: TAM TEŞEKKÜLLÜ RESPONSIVE HABER PORTALI
Şimdiye
kadar öğrendiğimiz tüm Bootstrap bileşenlerini (Navbar, Grid, Cards, Form, Alert) tek bir çatı altında birleştirerek eksiksiz bir Haber
Sitesi Ana Sayfası kodluyoruz.
HTML Dosyamız (index.html):
<!DOCTYPE
html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HaberTürkçe
- Güncel Haber Portalı</title>
<!--
Bootstrap 5 CSS CDN -->
<link href="https://jsdelivr.net" rel="stylesheet">
<!--
Font Awesome İkonları -->
<link rel="stylesheet" href="https://cloudflare.com">
<style>
/* Kayan yazı alanı için özel stil */
.son-dakika-serit {
background-color: #c0392b;
color: white;
overflow: hidden;
white-space: nowrap;
}
.kayan-yazi {
display: inline-block;
padding-left: 100%;
animation: marquee 15s
linear infinite;
}
@keyframes marquee
{
0% { transform:
translate(0, 0); }
100% { transform:
translate(-100%, 0); }
}
</style>
</head>
<body class="bg-light">
<!--
1. BOOTSTRAP NAVBAR (MENÜ) -->
<nav class="navbar navbar-expand-lg
navbar-dark bg-dark sticky-top">
<div
class="container">
<a
class="navbar-brand fw-bold text-danger" href="#"><i class="fa-solid fa-newspaper"></i>
HABERTÜRKÇE</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-content="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a
class="nav-link active" href="#">Gündem</a></li>
<li class="nav-item"><a
class="nav-link" href="#">Teknoloji</a></li>
<li class="nav-item"><a
class="nav-link" href="#">Ekonomi</a></li>
<li class="nav-item"><a
class="nav-link" href="#">Spor</a></li>
</ul>
<form class="d-flex" role="search">
<div class="input-group">
<input class="form-control" type="search" placeholder="Haber ara...">
<button class="btn btn-danger" type="submit"><i
class="fa-solid fa-magnifying-glass"></i></button>
</div>
</form>
</div>
</div>
</nav>
<!--
2. SON DAKİKA KAYAN YAZI BÖLÜMÜ -->
<div
class="container-fluid py-2 son-dakika-serit
d-flex align-items-center">
<span class="badge bg-dark
ms-3 me-2 px-3 py-2 fw-bold position-relative" style="z-index: 10;">SON DAKİKA</span>
<div
class="w-100
overflow-hidden">
<div
class="kayan-yazi fw-semibold">
• Merkez Bankası faiz kararını
açıkladı! Ekonomi dünyasında hareketlilik. • Teknoloji devinden yeni yapay zeka hamlesi geldi. • Milli takım kritik maçtan galibiyetle
ayrıldı!
</div>
</div>
</div>
<!--
ANA İÇERİK ALANI -->
<main class="container my-5">
<!--
BAŞLIK -->
<h2 class="mb-4 border-start border-danger border-4 ps-2 fw-bold">Günün Öne Çıkan Haberleri</h2>
<!--
3. HABER KARTLARI (GRID SİSTEMİ) -->
<div
class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5">
<!--
1. Haber -->
<div
class="col">
<div
class="card h-100 shadow-sm
border-0">
<span class="position-absolute top-0 start-0
m-3 badge bg-danger">Gündem</span>
<img src="https://picsum.photos" class="card-img-top" alt="Haber">
<div class="card-body">
<h5 class="card-title fw-bold">Şehirlerde Yeşil Alan
Seferberliği</h5>
<p class="card-text text-muted">Büyükşehirlerde hava kalitesini
artırmak amacıyla yeni dikey orman projeleri hayata geçiriliyor.</p>
<a href="#" class="btn btn-outline-dark
btn-sm">Devamını Oku...</a>
</div>
</div>
</div>
<!--
2. Haber -->
<div
class="col">
<div
class="card h-100 shadow-sm
border-0">
<span class="position-absolute top-0 start-0
m-3 badge bg-primary">Teknoloji</span>
<img src="https://picsum.photos" class="card-img-top" alt="Haber">
<div class="card-body">
<h5 class="card-title fw-bold">Kuantum Bilgisayarlarda Yeni Çağ</h5>
<p class="card-text text-muted">Bilim insanları, veri işleme hızını
katlayacak yeni bir kuantum çip mimarisi geliştirdiklerini duyurdu.</p>
<a href="#" class="btn btn-outline-dark
btn-sm">Devamını Oku...</a>
</div>
</div>
</div>
<!--
3. Haber -->
<div
class="col">
<div
class="card h-100 shadow-sm
border-0">
<span class="position-absolute top-0 start-0
m-3 badge bg-success">Ekonomi</span>
<img src="https://picsum.photos" class="card-img-top" alt="Haber">
<div class="card-body">
<h5 class="card-title fw-bold">Küresel Pazar Raporu Açıklandı</h5>
<p class="card-text text-muted">Yılın üçüncü çeyreğinde ihracat
rakamları beklentilerin üzerine çıkarak rekor kırdı.</p>
<a href="#" class="btn btn-outline-dark
btn-sm">Devamını Oku...</a>
</div>
</div>
</div>
</div>
<!--
4. BOOTSTRAP İLETİŞİM / BÜLTEN FORMU -->
<div
class="row justify-content-center">
<div
class="col-12
col-md-8 col-lg-6">
<div
class="bg-white p-4 rounded shadow-sm">
<h4 class="fw-bold mb-3 text-center"><i
class="fa-solid fa-envelope-open-text text-danger"></i>
Haber Bültenimize Abone Olun</h4>
<p class="text-muted text-center
small mb-4">En sıcak gelişmelerden anında haberdar olmak için
e-posta adresinizi bırakın.</p>
<form>
<div class="mb-3">
<label for="aboneEmail" class="form-label fw-semibold">E-Posta Adresiniz</label>
<input type="email" class="form-control" id="aboneEmail" placeholder="isim@ornek.com" required>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="onayKutusu" required>
<label class="form-check-label
text-muted small" for="onayKutusu">
Kullanım
şartlarını ve gizlilik sözleşmesini kabul ediyorum.
</label>
</div>
<button type="submit" class="btn btn-dark
w-100">Kayıt
Ol</button>
</form>
</div>
</div>
</div>
</main>
<!--
BOOTSTRAP FOOTER -->
<footer class="bg-dark text-secondary
text-center py-4 mt-5 border-top
border-danger border-3">
<div
class="container">
<p
class="mb-1
text-white">© 2026
HABERTÜRKÇE. Tüm Hakları Saklıdır.</p>
<p
class="small text-muted">Bootstrap 5
kütüphanesi ile tamamen mobil uyumlu olarak tasarlanmıştır.</p>
</div>
</footer>
<!--
Bootstrap JS CDN -->
<script src="https://jsdelivr.net"></script>
</body>
</html>
Müfredatımızın
en kritik aşamalarından biri olan İleri Düzey Arayüz Tasarımı ve JavaScript
ile Dinamik İçerik Yönetimi dünyasına giriş yapıyoruz. Bu bölüm; büyük
teknoloji şirketlerinin tasarım dilini kopyalamayı (Apple TV Tasarımı),
kendi markanızı tüm dünyaya sunacağınız Portfolyo (Özgeçmiş) Sitesi
mimarisini ve statik tasarımları canlı, işlevsel uygulamalara dönüştüren JavaScript
Temelli Restoran Menü Projesi'ni kapsar.
Müfredattaki
süre, ders sayısı ve önizleme ifadeleri tamamen
temizlenmiş; detaylı konu anlatımı, tam ölçekli HTML, CSS ve JavaScript
entegrasyonu ve bol örneklerle parça parça ilerliyoruz.
🗺️ MODÜL 9:
KAVRAMSAL ANLAYIŞ VE MÜFREDAT TASARIMI
Bu
parça, modern bir web arayüzünün tasarım sınırlarını zorlamayı ve statik
elemanları JavaScript algoritmalarıyla interaktif hale getirmeyi amaçlar. Süreç
şu sıra ile işlenecektir:
[Apple
TV Tasarım Dili (Karanlık Tema & Cam Efekti)]
│
▼
[Portfolyo
Sitesi Yapımı (Sidebar + Dinamik Content Düzeni)]
│
▼
[JavaScript
ile Veri Yönetimi & Restoran Menü Uygulaması]
💻 MODÜL 9:
DETAYLI KONU ANLATIMI VE UYGULAMALAR
1. Apple TV Tasarım Dili ve Modern CSS Teknikleri
Premium
markaların (Apple, Netflix vb.) arayüzlerini taklit ederken kullanılan bazı üst
düzey CSS özellikleri vardır:
2. Portfolyo Sitesi Mimarisi (Sidebar
ve İçerik Yönetimi)
Profesyonel
bir özgeçmiş sitesinde ekran genelde ikiye bölünür:
3. JavaScript ile Dinamik İçerik ve Restoran Menü Mantığı
HTML
ve CSS sadece görseli sunar. Kullanıcı bir butona bastığında (örneğin restoran
menüsünde "Sadece Tatlıları Göster" dediğinde) sayfanın
yenilenmeden içeriğin değişmesini JavaScript sağlar.
🛠️ PROJE
UYGULAMASI: JAVASCRIPT DESTEKLİ DİNAMİK RESTORAN MENÜSÜ & PORTFOLYO ARAYÜZÜ
Müfredattaki
en gelişmiş iki projenin (Portfolyo ve Restoran Menüsü) teknik mantığını tek
bir "Dinamik Gurme Menü ve Şef Portfolyosu" uygulamasında
birleştiriyoruz. Kullanıcı üstteki butonlara bastığında JavaScript devreye
girecek ve menü listesini anında filtreleyecektir.
1. HTML Dosyamız (index.html):
<!DOCTYPE
html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Şefin Portfolyosu & Dinamik
Restoran Menüsü</title>
<!--
Font Awesome İkonları -->
<link rel="stylesheet" href="https://cloudflare.com">
<!--
Kendi Stil Dosyamız -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
PORTFOLYO SIDEBAR (SOL MENÜ) -->
<aside class="sidebar">
<div
class="profil-alani">
<img src="https://picsum.photos" alt="Şef
Profil">
<h2>Şef Ahmet Yılmaz</h2>
<p>Gastronomi
Uzmanı & Tasarımcı</p>
</div>
<nav class="sidebar-nav">
<a
href="#" class="active"><i
class="fa-solid fa-utensils"></i>
Menümüz</a>
<a
href="#"><i
class="fa-solid fa-graduation-cap"></i> Eğitim & Deneyim</a>
<a
href="#"><i
class="fa-solid fa-envelope"></i>
İletişim</a>
</nav>
<div
class="sidebar-footer">
<p>© 2026 Tüm Hakları Saklıdır.</p>
</div>
</aside>
<!--
DİNAMİK İÇERİK ALANI (SAĞ BÖLÜM) -->
<main class="icerik-alani">
<!--
Apple Tasarım Dilinde Premium Başlık Alani -->
<header class="premium-baslik">
<h1>Özel Gurme Lezzetler</h1>
<p>Her
biri özenle seçilmiş malzemelerle hazırlanan dinamik menümüzü keşfedin.</p>
</header>
<!--
Kategori Filtreleme Butonları -->
<section class="filtre-butonlari">
<button class="filtre-btn active" data-id="hepsi">Hepsi</button>
<button class="filtre-btn" data-id="kahvalti">Kahvaltı</button>
<button class="filtre-btn" data-id="ana-yemek">Ana Yemekler</button>
<button class="filtre-btn" data-id="tatli">Tatlılar</button>
</section>
<!--
Dinamik Menü Kartlarının Listeleneceği Yer (JavaScript Burayı Dolduracak)
-->
<section class="menu-grid" id="menuKapsayici">
<!--
Kartlar JavaScript tarafından otomatik üretilecektir -->
</section>
</main>
<!--
Kendi JavaScript Dosyamız -->
<script src="script.js"></script>
</body>
</html>
2. CSS Dosyamız (style.css):
/* Temel Reset ve
Değişkenler */
*
{
margin:
0;
padding:
0;
box-sizing:
border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe
UI",
Roboto, Helvetica, Arial, sans-serif;
}
body
{
background-color: #0f0f10; /*
Apple TV koyu arka plan tonu */
color:
#ffffff;
display:
flex; /*
Sol menü ve sağ içerik yan yana dursun diye */
}
/* 1. SOL MENÜ
(SIDEBAR) TASARIMI */
.sidebar {
width:
300px;
height:
100vh;
background-color: #161617; /*
Koyu gri kontrast */
position:
fixed;
top: 0;
left:
0;
padding:
40px 20px;
display:
flex;
flex-direction:
column;
justify-content:
space-between;
border-right:
1px solid #2d2d2f;
}
.profil-alani {
text-align:
center;
}
.profil-alani img {
width:
110px;
height:
110px;
border-radius:
50%;
border: 3px
solid #ff9f43;
margin-bottom:
15px;
}
.profil-alani h2 {
font-size: 20px;
font-weight: 600;
}
.profil-alani p {
font-size: 13px;
color:
#a1a1a6;
margin-top:
5px;
}
.sidebar-nav {
display:
flex;
flex-direction:
column;
gap:
10px;
}
.sidebar-nav a {
color:
#a1a1a6;
text-decoration:
none;
padding:
12px 20px;
border-radius:
8px;
font-weight: 500;
transition:
all 0.3s;
}
.sidebar-nav a:hover, .sidebar-nav
a.active {
background-color: #2c2c2e;
color:
#ff9f43;
}
.sidebar-footer {
text-align:
center;
font-size: 11px;
color:
#646466;
}
/* 2. SAĞ İÇERİK ALANI
VE APPLE TV ESİNTİLİ KARTLAR */
.icerik-alani {
margin-left:
300px; /* Sidebar'ın altında kalmamak için sola boşluk */
flex:
1;
padding:
50px;
}
.premium-baslik {
margin-bottom:
40px;
}
.premium-baslik h1 {
font-size: 36px;
font-weight: 700;
background: linear-gradient(135deg, #ffffff 0%,
#a1a1a6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color:
transparent;
}
.premium-baslik p {
color:
#a1a1a6;
margin-top:
8px;
}
/* Filtreleme
Butonları */
.filtre-butonlari {
display:
flex;
gap:
15px;
margin-bottom:
40px;
}
.filtre-btn {
background-color: #2c2c2e;
color:
white;
border:
none;
padding:
10px 20px;
border-radius:
20px;
cursor:
pointer;
font-weight: 600;
transition:
all 0.2s;
}
.filtre-btn:hover, .filtre-btn.active
{
background-color: #ff9f43;
color:
#000;
}
/* Menü Izgarası
(Grid) */
.menu-grid {
display:
grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Esnek responsive grid */
gap:
30px;
}
/* Cam Efektli (Glassmorphism) Menü Kartı */
.menu-item-kart {
background: rgba(34, 34, 36, 0.6);
border:
1px solid rgba(255,
255, 255, 0.05);
backdrop-filter:
blur(10px); /*
Cam arkası bulanıklık */
border-radius:
16px;
overflow:
hidden;
transition:
transform 0.3s, box-shadow 0.3s;
}
.menu-item-kart:hover {
transform:
translateY(-5px);
box-shadow:
0 10px 20px rgba(0,0,0,0.3);
}
.kart-resim
{
height:
180px;
background-size: cover;
background-position: center;
}
.kart-govde {
padding:
20px;
}
.kart-baslik-satir {
display:
flex;
justify-content:
space-between;
align-items:
center;
margin-bottom:
10px;
}
.kart-baslik-satir h3 {
font-size: 18px;
font-weight: 600;
}
.fiyat
{
color:
#ff9f43;
font-weight: 700;
}
.kart-govde p {
font-size: 14px;
color:
#a1a1a6;
line-height:
1.5;
}
3. Dinamik JavaScript Dosyamız (script.js):
// 1. Menü Verilerinin
(Array Of Objects) Tanımlanması
const menuVerileri = [
{
id:
1,
baslik: "Gurme
Serpme Kahvaltı",
kategori: "kahvalti",
fiyat: "450 TL",
resim: "https://picsum.photos",
aciklama: "Doğal
köy ürünleri, organik reçeller, taze pişmiş sıcak ekmek ve sınırsız çay
seçeneğiyle."
},
{
id:
2,
baslik: "Lokum
Bonfile",
kategori: "ana-yemek",
fiyat: "680 TL",
resim: "https://picsum.photos",
aciklama: "28
gün dinlendirilmiş dana bonfile, taze biberiye ve fırınlanmış patates püresi
eşliğinde."
},
{
id:
3,
baslik: "Çikolatalı
Sufle",
kategori: "tatli",
fiyat: "180 TL",
resim: "https://picsum.photos",
aciklama: "Belçika
çikolatası ile hazırlanan, içi akışkan, yanında vanilyalı dondurma ile servis
edilen efsane."
},
{
id:
4,
baslik: "Trüflü Özel Makarna",
kategori: "ana-yemek",
fiyat: "390 TL",
resim: "https://picsum.photos",
aciklama: "El
yapımı taze makarna, hakiki trüf mantarı yağı ve parmesan tekerinde
harmanlanmış sos."
}
];
// HTML elemanlarını
seçiyoruz
const menuKapsayici = document.getElementById("menuKapsayici");
const filtreButonlari = document.querySelectorAll(".filtre-btn");
// Sayfa ilk
yüklendiğinde tüm menüyü ekrana bas
window.addEventListener("DOMContentLoaded", () => {
menuyuEkranaBas(menuVerileri);
});
// 2. Menü Öğelerini HTML'e Döken Fonksiyon
function menuyuEkranaBas(menuElemanlari) {
let ekranHtml = menuElemanlari.map((item) => {
return `<article class="menu-item-kart">
<div
class="kart-resim" style="background-image: url('${item.resim}');"></div>
<div
class="kart-govde">
<div
class="kart-baslik-satir">
<h3>${item.baslik}</h3>
<span class="fiyat">${item.fiyat}</span>
</div>
<p>${item.aciklama}</p>
</div>
</article>`;
}).join(""); // array'i
düz metne çevirir
menuKapsayici.innerHTML
= ekranHtml;
}
// 3. Filtreleme
Algoritması
filtreButonlari.forEach((buton) => {
buton.addEventListener("click", (e) => {
//
Aktif buton rengini değiştirme
filtreButonlari.forEach((btn) => btn.classList.remove("active"));
e.currentTarget.classList.add("active");
const secilenKategori = e.currentTarget.dataset.id;
//
Eğer 'hepsi' seçildiyse tüm listeyi gönder, yoksa filtrele
if (secilenKategori
=== "hepsi") {
menuyuEkranaBas(menuVerileri);
} else {
const filtrelenmişUrunler = menuVerileri.filter((item) => {
return item.kategori
=== secilenKategori;
});
menuyuEkranaBas(filtrelenmişUrunler);
}
});
});
Müfredatımızın
final aşaması olan #PROJE: Web Sitemizi Ücretsiz Yayınlayalım modülüne
geçiş yapıyoruz. Bu bölümde, bilgisayarımızda (local)
yazdığımız HTML, CSS ve JavaScript dosyalarını tüm dünyanın erişebileceği
şekilde internet ortamına (canlıya) aktarmayı ve karşılaşabileceğimiz olası
hataların çözümlerini öğreneceğiz.
Müfredat
listesindeki dakika, saniye ve önizleme gibi gereksiz
ifadeler tamamen temizlenmiş; adım adım bir uygulama rehberi ve detaylı konu
anlatımıyla projemizi tamamlıyoruz.
🗺️ MODÜL 10:
KAVRAMSAL ANLAYIŞ VE MÜFREDAT TASARIMI
Bu
parça, yerel ortamda geliştirilen projelerin global sunuculara yüklenerek canlı
bir web sitesine dönüştürülme sürecini yönetir. Süreç şu sıra ile işlenecektir:
[GitHub ve Repository Mantığı] ──►
[GitHub Pages ile Ücretsiz
Yayınlama]
│
▼
[Canlı
Site Hataları ve Çözümleri] ◄── [Dosya Adlandırma Standartları]
💻 MODÜL 10:
DETAYLI KONU ANLATIMI VE UYGULAMALAR
1. Dosya Adlandırma Standartları ve index.html Kuralı
Bir
web sitesini sunucuya yüklemeden önce dikkat edilmesi gereken en kritik kural,
ana sayfanın adıdır.
2. GitHub ve Repository
(Depo) Kavramı
GitHub, yazdığımız kodları internet üzerinde saklamamızı, versiyonlamamızı ve diğer yazılımcılarla ortak çalışmamızı
sağlayan bulut tabanlı bir platformdur.
3. GitHub Pages
ile Ücretsiz Yayınlama Adımları
GitHub, bünyesindeki projeleri doğrudan ve ücretsiz olarak web
sitesi şeklinde yayınlamamızı sağlayan GitHub
Pages hizmetini sunar. Projenizi canlıya almak
için şu adımları sırasıyla uygulayabilirsiniz:
Yaklaşık
1-2 dakika içinde sayfanın üst kısmında https://github.io şeklinde tüm dünyayla
paylaşabileceğiniz canlı web sitesi linkiniz belirecektir!
4. Siteyi Yayınlama Aşamasında Karşılaşılan Hatalar ve
Çözümleri
Sitenizi
canlıya aldıktan sonra bazı şeyler yolunda gitmeyebilir. En sık
karşılaşacağınız 3 hata ve çözümleri şunlardır:
⚠️ A. Site Açılmıyor,
"404 Site Not Found" Hatası Geliyor
⚠️ B. Site Açılıyor
Ama CSS Tasarımları / Resimler Görünmüyor
⚠️ C. Güncelleme
Yaptım Ama Sitede Görünmüyor
📊 MÜFREDAT
DEĞERLENDİRMESİ VE FİNAL ÖZETİ
Tebrikler!
Bu son modülle birlikte sağladığınız tüm müfredatı en ince ayrıntısına kadar
pratik uygulamalarla ele alıp tasarlamış olduk. Kurs boyunca katettiğimiz
yolculuğun özeti şu şekildedir:
Harika
bir karar! HTML, CSS ve Bootstrap ile arayüz
tasarlama ve temel JavaScript ile DOM manipülasyonu (filtreleme) konularını
başarıyla tamamladık. Şimdi, modern web uygulamalarının (web apps) arkasındaki asıl motoru oluşturan İleri Düzey
JavaScript (ES6+ ve Asenkron Mimari) dünyasına adım atıyoruz.
Bu
bölümde, karmaşık verileri yönetmeyi, web sitenizin dış dünyayla (API'ler aracılığıyla canlı veri çekme) iletişim kurmasını
ve modern JavaScript standartlarını (ES6+) kullanmayı sıfırdan, bol örnek ve
uygulamalarla ele alacağız.
🗺️ İLERİ
DÜZEY JAVASCRIPT: KAVRAMSAL ANLAYIŞ VE MÜFREDAT TASARIMI
Bu
ileri düzey modülde, veriyi akıllıca işlemeyi ve sunuculardan anlık veri çekip
ekrana basmayı öğreneceğiz. Süreç şu mantıksal sıra ile işlenecektir:
[ES6+
Modern Modern Sözdizimi] ──► [Dizi Metotları (Map, Filter, Reduce)]
│
▼
[Asenkron
JS (Fetch API & Async/Await)] ◄── [Promises ve Callback Mantığı]
💻 İLERİ DÜZEY
JAVASCRIPT: DETAYLI KONU ANLATIMI
1. ES6+ Modern Sözdizimi ve Hayatı Kolaylaştıran Özellikler
2015
yılında çıkan ES6 (ECMAScript 6) standardı,
JavaScript yazım dilini kökten değiştirdi ve modern hale getirdi.
·
//
Geleneksel Yöntem
·
function selamla(isim) {
·
return "Merhaba
"
+ isim;
·
}
·
//
Modern Arrow Function
·
const modernSelamla = isim => `Merhaba
\${isim}`;
·
const kullanici = { ad: "Can", yas: 28, meslek: "Geliştirici" };
·
// Tek
tek tanımlamak yerine:
·
const { ad, yas } = kullanici;
// Artık 'ad' ve 'yas' bağımsız birer
değişkendir.
2. Gelişmiş Dizi Metotları (map, filter, reduce)
Geleneksel
for
döngüleri yerine modern JavaScript'te verileri işlemek için bu üç altın metot
kullanılır. Bu metotlar orijinal diziyi bozmaz, yeni bir dizi döner.
📝 Uygulama
Örneği:
const urunler = [
{ isim: "Telefon", fiyat: 30000 },
{ isim: "Kılıf", fiyat: 500 },
{ isim: "Kulaklık", fiyat: 4000 }
];
// Fiyatı 1000 TL'den
pahalı olanları filtrele
const pahaliUrunler = urunler.filter(urun
=> urun.fiyat > 1000);
// Ürünlerin sadece
fiyatlarından oluşan yeni bir sayı dizisi yap
const fiyatlar = urunler.map(urun
=> urun.fiyat); // [30000, 500, 4000]
// Tüm ürünlerin fiyat
toplamını hesapla (reduce)
const toplamSepet = urunler.reduce((toplam,
urun) => toplam + urun.fiyat,
0); //
34500
3. Asenkron JavaScript, Promises
ve Fetch API
JavaScript
varsayılan olarak senkrondur; yani yukarıdan aşağıya doğru sırayla
çalışır. Bir satırdaki işlem bitmeden alt satıra geçmez. Ancak internetten veri
çekerken (örneğin hava durumu verisi) sunucudan cevap gelmesi 1-2 saniye
sürebilir. Bu esnada sitenin donmaması için asenkron (eşzamansız)
mimari kullanılır.
🛠️ İLERİ
DÜZEY PROJE: CANLI API BAĞLANTILI RESPONSIVE DÖVİZ ÇEVİRİCİ (CURRENCY
CONVERTER)
Öğrendiğimiz
tüm modern ES6+ özelliklerini, dizi metotlarını ve Async/Await
Fetch API mimarisini birleştiren tam ölçekli bir "Canlı Döviz
Çevirici" uygulaması yapıyoruz. Uygulamamız internetteki gerçek bir
finans API'sine bağlanıp anlık döviz kurlarını
çekecektir.
1. HTML Yapısı (index.html):
<!DOCTYPE
html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Dinamik Döviz Çevirici - İleri
JS</title>
<!--
Bootstrap 5 CSS -->
<link href="https://jsdelivr.net" rel="stylesheet">
<!--
Font Awesome -->
<link rel="stylesheet" href="https://cloudflare.com">
</head>
<body class="bg-dark text-white
d-flex align-items-center" style="height: 100vh;">
<div
class="container">
<div
class="row justify-content-center">
<div
class="col-12
col-md-6 col-lg-5">
<!--
Premium Cam Efektli Kart (Bootstrap Sınıfları ile)
-->
<div
class="card bg-secondary text-white p-4 shadow-lg border-0
rounded-4">
<h3 class="text-center mb-4 fw-bold text-warning">
<i class="fa-solid fa-money-bill-transfer"></i> Canlı Döviz Çevirici
</h3>
<!--
Miktar Girişi -->
<div class="mb-3">
<label for="miktar" class="form-label fw-semibold">Çevrilecek Miktar</label>
<input type="number" id="miktar" class="form-control form-control-lg bg-dark
text-white border-0" value="1" min="1">
</div>
<!--
Döviz Seçim Alanları -->
<div class="row g-3 mb-4">
<div class="col">
<label class="form-label small
text-light">Kaynak Cins</label>
<select id="kaynakDoviz" class="form-select bg-dark
text-white border-0">
<option value="USD" selected>USD - Amerikan Doları</option>
<option value="EUR">EUR - Euro</option>
<option value="TRY">TRY - Türk Lirası</option>
</select>
</div>
<div class="col-auto d-flex
align-items-end mb-2">
<button class="btn btn-warning
rounded-circle" id="yonDegistirBtn">
<i class="fa-solid fa-arrows-rotate"></i>
</button>
</div>
<div class="col">
<label class="form-label small
text-light">Hedef Cins</label>
<select id="hedefDoviz" class="form-select bg-dark
text-white border-0">
<option value="TRY" selected>TRY - Türk Lirası</option>
<option value="USD">USD - Amerikan Doları</option>
<option value="EUR">EUR - Euro</option>
</select>
</div>
</div>
<!--
Çevirme Butonu -->
<button class="btn btn-warning
btn-lg w-100 fw-bold text-dark mb-4" id="cevirBtn">
Hesapla
</button>
<!--
Canlı Sonuç Paneli -->
<div class="p-3 bg-dark rounded-3 text-center">
<h5 class="text-muted small
mb-1">Hesaplama
Sonucu</h5>
<h2 class="fw-bold text-warning
m-0"
id="sonucAlani">0.00 TRY</h2>
</div>
</div>
<!-- Kart Sonu -->
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. İleri Düzey JavaScript Yapısı (script.js):
// Ücretsiz canlı
döviz kuru API'si (Eşzamanlı kur verileri sağlar)
const API_URL = "https://er-api.com";
// HTML Elemanlarını
Yakalayalım (Modern Seçiciler)
const miktarInput = document.getElementById("miktar");
const kaynakDovizSelect = document.getElementById("kaynakDoviz");
const hedefDovizSelect = document.getElementById("hedefDoviz");
const cevirBtn = document.getElementById("cevirBtn");
const sonucAlani = document.getElementById("sonucAlani");
const yonDegistirBtn = document.getElementById("yonDegistirBtn");
// 1. ASENKRON FETCH
API FONKSİYONU (Async/Await)
async function dovizKurlariniGetir(anaParaBirimi) {
try {
//
Belirtilen para birimine göre (Örn: USD) canlı
kurları internetten talep et
const cevap = await fetch(`${API_URL}${anaParaBirimi}`);
//
Gelen veriyi tarayıcının okuyabileceği JSON nesnesine dönüştür
const veri = await cevap.json();
return veri.rates; // Tüm para birimlerinin kurlarını içeren nesneyi dön (Nesne Destructuring)
} catch (hata) {
console.error("Veri çekilirken hata oluştu:", hata);
sonucAlani.innerText
= "Bağlantı Hatası!";
}
}
// 2. HESAPLAMA VE
EKRANA BASMA FONKSİYONU
async function kuruHesapla() {
const miktar = parseFloat(miktarInput.value);
const kaynak = kaynakDovizSelect.value;
const hedef = hedefDovizSelect.value;
if (isNaN(miktar)
|| miktar <= 0) {
sonucAlani.innerText
= "Geçersiz Miktar!";
return;
}
sonucAlani.innerText
= "Yükleniyor...";
//
Canlı kurları asenkron fonksiyondan bekle (await)
const kurlar = await dovizKurlariniGetir(kaynak);
if (kurlar) {
//
İlgili hedef kur değerini çek (Örn:
kurlar["TRY"])
const hedefKur Orani = kurlar[hedef];
//
Çarpım işlemini yap
const toplamSonuc = miktar * hedefKurOrani;
//
Sonucu virgülden sonra 2 basamak olacak şekilde ekrana yazdır (Template Literals)
sonucAlani.innerText
= `${toplamSonuc.toFixed(2)}
${hedef}`;
}
}
// 3. EVENT LISTENERS
(OLAY TETİKLEYİCİLERİ)
cevirBtn.addEventListener("click", kuruHesapla);
// Gelişmiş Özellik:
Kaynak ve Hedef para birimlerinin yerini değiştirme algoritması
yonDegistirBtn.addEventListener("click", () => {
const geciciDepo = kaynakDovizSelect.value;
kaynakDovizSelect.value
= hedefDovizSelect.value;
hedefDovizSelect.value
= geciciDepo;
kuruHesapla(); //
Değişim sonrası otomatik yeniden hesapla
});
// Sayfa ilk
açıldığında otomatik bir kere hesaplama yap
window.addEventListener("load", kuruHesapla);