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:

  1. Satır İçi (Inline) CSS: Doğrudan HTML etiketinin içine style="..." yazarak (Önerilmez, yönetimi zordur).
  2. İçsel (Internal) CSS: HTML dosyasının <head> bölümüne <style> etiketleri açarak.
  3. Dışsal (External) CSS: Bağımsız bir .css dosyası oluşturup (örn: style.css), bunu HTML'e <link> etiketiyle bağlayarak (Profesyonel standart budur).

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>&copy; 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">&copy; 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>&copy; 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:

  1. HTML5: Web'in iskeletini kurmayı, metinleri, medyaları, tabloları ve listeleri semantik olarak yapılandırmayı öğrendik.
  2. CSS3 & Kutu Modeli: Renkleri, arka planları, çerçeveleri, iç-dış boşlukları (margin/padding) ve elemanları konumlandırmayı (position: absolute/fixed) keşfettik.
  3. Modern Düzen & Responsive: Flexbox mimarisiyle öğeleri yan yana kusursuzca dizmeyi ve @media sorgularıyla siteleri mobil uyumlu hale getirmeyi başardık.
  4. Bootstrap 5: Sektör standartlarında hazır bir kütüphane kullanarak 12'li Grid sistemiyle çok daha hızlı web projeleri (Haber Sitesi) inşa ettik.
  5. JavaScript & Yayınlama: Statik sayfaları JavaScript algoritmalarıyla interaktif bir uygulamaya (Dinamik Menü) dönüştürdük ve projemizi GitHub Pages ile tüm dünyaya açtık.

 

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);