Yüklediğiniz müfredat dosyası oldukça geniş kapsamlı ve uzun bir web geliştirme eğitimine ait olduğundan, talimatlarınız doğrultusunda parça parça ele alınarak tasarlanmıştır. Gereksiz veya anlamsız ifadeler (süre bilgileri, "Önizleme" ibareleri, ders sayıları) tamamen temizlenmiştir.

Öncelikle talep ettiğiniz "Öğrenecekleriniz" paragrafının detaylı açıklaması yapılmış, ardından müfredatın ilk ana bölümleri derinlemesine, örnekler ve pratik uygulamalarla açıklanmıştır.

🌟 "Öğrenecekleriniz" Bölümünün Detaylı Açıklaması

Bu kurs, modern web geliştirme dünyasına adım atmak isteyen bir öğrencinin ihtiyaç duyacağı tüm temel ve ileri düzey yetkinlikleri kazandırmayı hedefler. Kursun vadettiği kazanımların analizi şu şekildedir:

• Günümüzün En İyi Pratikleriyle Harika Web Sayfaları İnşa Etmek: Sadece kod yazmayı değil, kodun dünya standartlarında, okunabilir ve sürdürülebilir olmasını öğrenirsiniz. Sektörün kabul ettiği modern yazım kuralları (clean code) temel alınır.
• Web Performansının Önemini Anlamak ve Hızlı Siteler Yapmak: Bir web sitesinin harika görünmesi yetmez, aynı zamanda hızlı yüklenmesi gerekir. Gereksiz kod kalabalığından kaçınmayı, görsel optimizasyonunu ve tarayıcı dostu kodlamayı öğrenerek kullanıcı kaçırmayan performanslı siteler üretirsiniz.
• Web Programlama Temellerinde Kusursuz Bir Altyapı Edinmek: İnternetin mimarisini, istemci-sunucu ilişkisini ve tarayıcıların kodları nasıl yorumladığını öğrenerek mantıksal bir temel oluşturursunuz.
• 20 Yıllık Deneyimli Bir Profesörden Eğitim Almak: Her seviyeden insana öğretme tecrübesine sahip bir akademisyenden, karmaşık konuların en sade ve anlaşılır biçimde anlatıldığı bir metodoloji ile öğrenirsiniz.
• HTML ve CSS Konularında Tam Uzmanlık (Mastery) Sağlamak: Web sayfalarının iskeleti olan HTML ile onları görsel bir şölene dönüştüren CSS mülklerine en ince detayına kadar hakim olursunuz.
• Flexbox ve SVG Gibi Yenilikçi Teknolojileri Uygulamak: Sayfa düzeni (layout) yönetiminde devrim yaratan Flexbox sistemini ve çözünürlükten bağımsız, modern vektörel grafikler olan SVG'leri projelerinize entegre edersiniz.

➡️ BÖLÜM 1: Başlangıç (Getting Started)

Bu bölüm, web geliştirme dünyasındaki ilk eğlenceli pratikleri ve tarayıcıların arkasında dönen bazı temel oyunları keşfetmenizi sağlar.

💡 HTTP Durum Kodları (HTTP Status Codes)

Bir web tarayıcısı, bir sunucudan web sayfası talep ettiğinde sunucu bu talebe üç haneli bir sayısal kodla yanıt verir. Bu kodlar iletişimin durumunu gösterir (Örn: 200 OK başarıyı, 404 Not Found sayfanın bulunamadığını belirtir).

• Teapot Trap (418): 1998 yılında bir 1 Nisan şakası olarak protokol standartlarına eklenen 418 I'm a teapot (Ben bir çaydanlığım) kodu, bir kahve makinesinden çay demlenmesi istendiğinde dönmesi için tasarlanmıştır. Günümüzde Google bu şakayı yaşatır.
• 🛠 Uygulama: Tarayıcınızın adres çubuğuna ://google.com yazıp girdiğinizde karşınıza bir çaydanlık görseli çıkar. Sayfaya tıkladığınızda çaydanlık bardağa çay doldurur ve arka planda sunucu tarayıcıya 418 durum kodunu gönderir.

💡 Haberi Değiştirmek / İncele Aracı (Making The News)

Modern tarayıcılar (Google Chrome, Microsoft Edge vb.) web geliştiricileri için yerleşik araçlar sunar. Bir web sayfasına sağ tıklayıp "İncele" (Inspect) dediğinizde Elements (Ögeler) sekmesi açılır. Burada o sayfanın o anki canlı HTML kodlarını görürsünüz. Bu kodlar üzerinde yapacağınız değişiklikler sadece sizin tarayıcınızda geçici olarak görüntüye yansır.

• 🛠 Uygulama: Bir haber sitesine girin. Manşet başlığına sağ tıklayıp "İncele" deyin. HTML ağacında başlık yazısını bulun, çift tıklayarak kendi adınızı yazın ve Enter'a basın. Haber başlığının anında sizin yazdığınız metinle değiştiğini göreceksiniz (Sayfa yenilendiğinde orijinal haline döner).

💡 Dinozor Oyunu (The Dinosaur Video Game)

Google Chrome, internet bağlantınız kesildiğinde sizi tamamen çaresiz bırakmamak için yerleşik bir çevrimdışı oyunu gizli tutar. ekrandaki pikselli T-Rex dinozoru aslında bir sonsuz koşu oyunudur.

• 🛠 Uygulama: İnternetinizi kapatıp bir sayfaya gitmeye çalışın veya tarayıcıya chrome://dino yazın. Karşınıza çıkan dinozor ekranında Boşluk (Spacebar) tuşuna basın. Dinozor koşmaya başlayacaktır; gelen kaktüslerin üzerinden atlamak için yine boşluk tuşunu kullanmalısınız.

➡️ BÖLÜM 2: İnternet ve Web Teknolojilerini Anlamak (Understanding The Internet & WWW)

Web tasarımı yapabilmek için kodların üzerinde çalıştığı küresel ağ altyapısını ve mantığını bilmek gerekir.

💡 İnternetin Tarihi (History of the Internet)

İnternet, 1960'larda ABD Savunma Bakanlığı bünyesindeki DARPA tarafından olası bir nükleer savaş durumunda iletişimin kesintiye uğramamasını sağlamak amacıyla ARPANET adıyla geliştirildi. Eski sistem olan "hat anahtarlamalı" (switched) ağlar yerine "paket anahtarlamalı" (packet switching) ağ yapısına geçildi. Bu yapıda mesajlar küçük paketlere bölünür, ağdaki yönlendiriciler (routers) yardımıyla en güvenli ve açık yollardan hedefe ulaştırılır. İlk başarılı mesaj 1969 yılında iletilmiştir.

💡 World Wide Web (WWW) Tarihi

İnternet ile Web aynı şey değildir. İnternet fiziksel altyapıyı (kablolar, uydular, yönlendiriciler, bilgisayarlar) temsil ederken; World Wide Web (WWW) bu altyapı üzerinde çalışan bir servistir. WWW, 1980 yılında CERN'de mühendis olan Tim Berners-Lee tarafından fikir olarak ortaya atılmış ve 1990'da hayata geçirilmiştir. Temel amacı, internet üzerindeki metinleri biçimlendirmek ve köprü metinleri (hypertext) yani tıklanabilir bağlantıları (hyperlinks) kullanmaktır.

💡 Standartlar ve Dokümantasyon (Who Controls the Web?)

Web, tek bir kişinin veya şirketin tekelinde değildir. Gelişimini ve standartlarını belirleyen bağımsız organizasyonlar vardır:

• W3C & WHATWG: HTML ve CSS standartlarını belirleyen ana topluluklar.
• IETF: İnternet protokollerinin standartlarını düzenler.
• MDN (Mozilla Developer Network): Bir web geliştiricinin anayasası kabul edilen, en doğru ve güncel web dokümantasyon kaynağıdır.

💡 Tarayıcı Eklentileri ve Çalışma Mimarisi (How The Web Works)

Web, İstemci / Sunucu (Client / Server) mimarisine dayanır. Tarayıcınız (istemci) sunucuya bir istek (request) gönderir, sunucu da buna yanıt (response) verir. Bu işlem bittiği an bağlantı kopar. Bu yüzden web "Stateless" (durumsuz) bir yapıya sahiptir; yani sonraki her istek sıfırdan başlar. Hem isteğin hem de yanıtın bir Header (Üst bilgi - teknik veriler) ve bir Body (Gövde - sitenin asıl verisi, HTML kodları) kısmı bulunur.

➡️ BÖLÜM 3: HTML'e Giriş (An Introduction to HTML)

HTML (HyperText Markup Language), bir web sayfasının temel iskeletini ve içeriğini oluşturan işaretleme dilidir.

💡 HTML Sayfasının Anatomisi ve Terimler

Bir HTML belgesi en tepede DTD yani Doküman Tipi Tanımı (<!DOCTYPE html>) ile başlar. Bu satır tarayıcıya "Bu bir HTML5 belgesidir" mesajını verir. Standart bir HTML sayfasında bulunması zorunlu etiketler şunlardır:

• <html>: Tüm sayfa içeriğini saran kök (root) etiket.
• <head>: Sayfa hakkında tarayıcıya yönelik teknik bilgileri, karakter setini ve CSS linklerini barındıran görünmeyen kısım.
• <meta>: Sayfa açıklaması, karakter kodlaması (utf-8) gibi meta verileri tutan kendi kendini kapatan etiket.
• <title>: Tarayıcı sekmesinde görünecek olan site başlığı.
• <body>: Sitede son kullanıcının gördüğü tüm metin, görsel ve tasarımların yer aldığı ana gövde.

Etiketler (tags) genellikle bir açılış (<p>) ve bir kapanış (</p>) etiketinden oluşur. İçerisinde başka etiket barındırmayan, doğrudan işlev gören etiketlere ise kendi kendini kapatan (self-closing) etiketler denir (Örn: <img src="..." /> veya <br />).

Etiketlerin birbiri içindeki hiyerarşisini tanımlamak için aile terimleri kullanılır:

<div> <!-- Parent (Ebeveyn) -->

    <p>Birinci paragraf</p> <!-- Child (Çocuk) -->

    <p>İkinci paragraf</p> <!-- Child ve bir üsttekinin Sibling'i (Kardeşi) -->

</div>

🛠 Uygulama: İlk HTML Sayfası Kodlaması

Bir metin editöründe aşağıdaki kod yapısını oluşturup index.html olarak kaydederek tarayıcıda açabilirsiniz:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>Benim İlk Web Sitem</title>

</head>

<body>

    <h1>Yazılım Dünyasına Merhaba</h1>

    <p>Bu benim HTML ile yazdığım ilk web sayfasıdır.</p>

</body>

</html>

➡️ BÖLÜM 4: CSS'e Giriş (An Introduction to CSS)

CSS (Cascading Style Sheets), HTML ile kurulan iskeletin boyanmasını, konumlandırılmasını ve görsel olarak şekillenmesini sağlayan stil dilidir.

💡 İlgi Alanlarının Ayrılması (A Separation of Concerns)

Yazılım mühendisliğinde kodun kararlı ve sürdürülebilir olması için yapısal işler ile görsel işlerin birbirinden ayrılması gerekir. Web geliştirmede bu kural katı bir şekilde uygulanır:

• HTML: Sadece yapıyı ve içeriği belirler (Burada bir başlık olacak, şurada bir paragraf olacak).
• CSS: Sadece biçimlendirme ve görsellikten sorumludur (Başlık kırmızı renkli ve 24px boyutunda olacak).

💡 CSS Kural Setleri (Rule-sets)

CSS kodları belirli bir düzene göre yazılır. Bir HTML etiketini seçen Selector (Seçici), ardından süslü ortak parantez açan bir Declaration Block (Bildirim Bloğu) ve içerisindeki özellik-değer çiftlerinden oluşan Declarations (Bildirimler) bulunur.

/* Örnek Kural Seti */

p {

    color: blue;

    font-size: 16px;

}

• p $\rightarrow$ Seçici (Sayfadaki tüm <p> etiketlerini hedef alır).
• color $\rightarrow$ Property (Değiştirilmek istenen özellik).
• blue $\rightarrow$ Value (Özelliğe atanan değer).

💡 CSS'i HTML'e Bağlamanın Üç Yolu

1. Harici Stil Sayfası (External - En Çok Önerilen): CSS kodları ayrı bir .css dosyasında tutulur ve HTML sayfasına <link rel="stylesheet" href="style.css"> etiketiyle çağrılır. Modüler ve yönetimi en kolay yöntemdir.
2. Dahili Stil (Internal): HTML sayfasının <head> etiketleri arasına <style> ... </style> etiketleri açılarak CSS kodları buraya yazılır. Sadece o sayfaya özgü stiller için uygundur.
3. Satır İçi Stil (Inline - Kesinlikle Önerilmez): Doğrudan HTML etiketinin içine yazılır: <p style="color: red;">. Kod karmaşasına sebep olur ve bakımı imkansız hale getirir.

➡️ BÖLÜM 5: Geliştirme Ortamını Yapılandırmak (Configuring Your Environment)

Kod yazarken hız kazanmak ve hataları en aza indirmek için gelişmiş metin editörleri ve IDE (Bütünleşik Geliştirme Ortamı) yazılımları kullanılır. Müfredatta öne çıkan araçlar şunlardır:

• WebStorm: JetBrains firması tarafından geliştirilen, web teknolojileri için en güçlü ve profesyonel IDE'lerden biridir. Kod tamamlama, hata yakalama ve Git entegrasyonu mükemmeldir. Android Studio ile aynı altyapıyı (IntelliJ) kullandığından, ileride mobil uygulama geliştirmek isteyenler için harika bir geçiş köprüsüdür.
• Atom.io: GitHub tarafından geliştirilmiş, topluluk destekli ve modüler bir metin editörüdür. (Not: Günümüz web standartlarında yerini daha çok VS Code yazılımına bırakmıştır).
• Dreamweaver Uyarısı: Görsel olarak sürükle-bırak mantığıyla kod üreten bu tarz araçlar, geliştiriciyi tembelliğe iter, arkada kirli ve standart dışı kodlar üretir. Gerçek bir kodlayıcı olmak isteyenlerin bu tür sistemlerin "zararlı tuzaklarına" düşmemesi ve kodu doğrudan klavyeden yazması gerekir.

➡️ BÖLÜM 6: GitHub Kullanımında Uzmanlaşmak (Becoming Skilled with Github)

GitHub, yazdığınız kodları bulutta saklamanızı, versiyonlamanızı ve dünya genelindeki diğer yazılımcılarla ortak projeler yürütmenizi sağlayan, yazılımcıların sosyal medyasıdır.

💡 Sürüm Kontrol Sistemi (Git)

Git, projenizin zaman içindeki tüm değişikliklerini kaydeden bir yazılımdır. Linus Torvalds tarafından 2005 yılında Linux çekirdeğinin geliştirilmesinde kullanılmak üzere açık kaynaklı olarak üretilmiştir.

💡 Temel Terminal Komutları (CLI)

GitHub ve Git sistemini arayüz programları yerine Terminal (Komut Satırı) üzerinden kullanmak profesyonelliğin ilk şartıdır. Bilmeniz gereken en temel komutlar şunlardır:

• pwd: Şu an hangi klasörün içinde olduğunuzu gösterir (Print Working Directory).
• ls: Bulunduğunuz klasörün içindeki dosyaları listeler (ls -la gizli dosyaları da gösterir).
• cd klasor_adi: Belirtilen klasörün içine girer (cd ../ bir üst klasöre çıkar).
• mkdir klasor_adi: Yeni bir klasör oluşturur (Make Directory).
• clear: Terminal ekranındaki yazı kalabalığını temizler.

💡 Temel Git İş Akışı ve Komutları

Yerel bilgisayarınızda bir proje klasörünü Git deposu haline getirmek ve GitHub'a yüklemek için şu sıra takip edilir:

1. git init $\rightarrow$ Klasör içinde boş bir git deposu oluşturur.
2. git status $\rightarrow$ Değişen, eklenen veya silinen dosyaların durumunu gösterir.
3. git add --all $\rightarrow$ Tüm değişiklikleri kaydedilmek üzere kuyruğa ekler.
4. git commit -m "İlk Değişiklik Mesajı" $\rightarrow$ Kuyruktaki dosyaları bir versiyon notuyla yerel hafızaya mühürler.
5. git remote add origin <github-linki> $\rightarrow$ Yerel depoyu GitHub'daki uzak sunucuya bağlar.

 

Müfredatın sonraki kritik aşamaları olan HTML Essentials (HTML'in Esasları) ve CSS Essentials (CSS'in Esasları) bölümleriyle derinlemesine devam ediyoruz. Bu bölümlerde projelerinizin internet ortamında hatasız çalışmasını sağlayacak temel kuralları, en sık kullanılan etiketleri ve sayfa düzeninin temel taşı olan Box Model (Kutu Modeli) yapısını uygulamalarıyla öğreneceksiniz.

➡️ BÖLÜM 7: HTML'in Esasları (HTML Essentials)

Bir web sitesi inşa ederken klasör yapısından başlayarak tarayıcıların seveceği kuralları uygulamak gerekir.

💡 Dosya ve Klasör Adlandırma Kuralları (Naming Conventions)

Web sunucuları ve tarayıcılar harf duyarlılığına (case-sensitivity) ve özel karakterlere karşı çok hassastır. Yanlış adlandırma sitenizin internette kırık linklerle dolmasına neden olur.

·        Küçük Harf Kuralı: Tüm dosya ve klasör isimleri tamamen küçük harflerden (a-z) ve rakamlardan (0-9) oluşmalıdır. Sunucularda büyük harfler senkronizasyon hatası yaratabilir.

·        Boşluk Bırakmama Kuralı: Dosya isimlerinde kesinlikle boşluk karakteri kullanılmaz. Boşluk bırakılan dosyalar sunucu tarafından %20 şeklinde çirkin ve uzun URL'lere dönüştürülür. Boşluk yerine her zaman tire (-) veya alt çizgi (_) kullanılmalıdır.

·        index.html Önemi: Bir web sitesinin ana sayfası her zaman index.html olarak adlandırılmalıdır. Tarayıcılar bir klasöre girdiğinde varsayılan belge olarak doğrudan bu dosyayı arar ve açar.

💡 Temel HTML Etiketleri

·        <h1> - <h6> (Başlık Etiketleri): İçeriğin hiyerarşisini ve önem sırasını belirler. <h1> en önemli ana başlıktır ve her sayfada arama motoru optimizasyonu (SEO) için sadece bir kez kullanılmalıdır. <h6> ise en küçük alt başlıktır.

·        <p> (Paragraf Etiket): Blok düzeyinde metin blokları oluşturmak için kullanılır. Her paragraf otomatik olarak yeni bir satırdan başlar.

·        <ul> ve <ol> (Listeler): Sırasız (unordered - maddeli) listeler için <ul>, sıralı (ordered - numaralı) listeler için <ol> kullanılır. Listenin her bir ögesi ise <li> (list item) etiketi içine yazılır.

💡 Etiket Nitelikleri (Tag Attributes)

Etiketlerin işlevlerini genişleten veya onlara veri sağlayan ek parametrelerdir. Her zaman açılış etiketinin içine isim="değer" şeklinde yazılırlar.

·        Link (Bağlantı) Elemanı: <link rel="stylesheet" href="main.css"> $\rightarrow$ CSS dosyasını sayfaya bağlar.

·        Görsel Elemanı: <img src="resim.jpg" alt="Açıklama metni"> $\rightarrow$ Sayfaya resim ekler. alt niteliği, resim yüklenemediğinde veya görme engelli bir kullanıcı ekran okuyucu kullandığında resmin ne olduğunu açıklar (Eğitimde vurgulanan en iyi pratiklerden biridir).

·        Çapa/Bağlantı Elemanı: <a href="https://google.com" target="_blank"> $\rightarrow$ Tıklandığında başka bir sayfaya yönlendirir. target="_blank" değeri linkin yeni sekmede açılmasını sağlar.

💡 Göreli (Relative) ve Mutlak (Absolute) URL'ler

·        Mutlak (Absolute) URL: Dosyanın internetteki tam adresini belirtir. Protokol (https://) ile başlar. Başka sitelere link verirken zorunludur. (Örn: https://mozilla.org)

·        Göreli (Relative) URL: Dosyanın, o an bulunulan mevcut dosyaya göre konumunu belirtir. Kendi sitenizin içindeki sayfaları veya resimleri bağlarken performansı artırmak için kullanılır.

o   resimler/logo.png $\rightarrow$ Bulunduğum klasördeki "resimler" klasörünün içine bak.

o   ../index.html $\rightarrow$ Bir üst klasöre çık ve oradaki index.html dosyasını bul.

🛠 Uygulama: Temel Etiketler ve Resim Ekleme

Aşağıdaki kodu yazarak göreli URL mantığını ve temel etiketlerin tarayıcıda nasıl listelendiğini test edebilirsiniz:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>HTML Esasları Uygulaması</title>

</head>

<body>

    <h1>En Sevilen Evcil Hayvanlar</h1>

    <p>Aşağıda dünyada en çok beslenen hayvanların listesi yer almaktadır:</p>

   

    <ul>

        <li>Köpekler</li>

        <li>Kediler</li>

        <li>Kuşlar</li>

    </ul>

 

    <!-- Göreli URL ile resim ekleme ve ALT etiketi kullanımı -->

    <img src="pup.jpeg" alt="Çubuğu ağzında tutan sevimli bir köpek yavrusu">

   

    <p>Daha fazla bilgi için <a href="https://wikipedia.org" target="_blank">Vikipedi'yi</a> ziyaret edebilirsiniz.</p>

</body>

</html>

➡️ BÖLÜM 8: CSS'in Esasları (CSS Essentials)

Bu bölüm, web sayfasındaki her bir ögenin aslında geometrik bir kutudan ibaret olduğunu anlamanızı sağlayan en kritik aşamadır.

💡 Kutu Modeli (Box Model) Nedir?

Tarayıcılar, HTML'deki her bir elemanı (ister bir paragraf, ister bir resim olsun) dikdörtgen bir kutu olarak görür ve işler. Bu kutu dıştan içe doğru 4 katmandan oluşur:

1.     Margin (Dış Boşluk): Kutunun dış sınırları ile diğer kutular arasındaki boşluktur. Kutuları birbirinden uzaklaştırmak için kullanılır.

2.     Border (Kenarlık): Kutunun etrafını saran çizgidir. Kalınlığı, rengi ve stili (düz, kesikli vb.) değiştirilebilir.

3.     Padding (İç Boşluk): Kutunun kenarlığı (border) ile içindeki asıl içerik arasındaki boşluktur. İçeriğin kenarlara yapışmasını engeller.

4.     Content (İçerik): Metnin, resmin veya logonun yer aldığı en içteki alandır (width ve height mülkleri doğrudan burayı etkiler).

💡 Düzen Kıran Tuzak ve Çözüm: box-sizing: border-box

Varsayılan olarak tarayıcılar bir kutunun toplam genişliğini hesaplarken Genişlik (Width) + Padding + Border formülünü kullanır.

·        Tuzak: Eğer bir kutuya width: 400px verir, ardından padding: 20px ve border: 10px eklerseniz, o kutunun tarayıcıdaki gerçek kapladığı alan 460px olur (400 + 20+20 + 10+10). Bu durum, yan yana koymak istediğiniz kutuların sığmayarak aşağı kaymasına ve sayfa düzeninizin (layout) tamamen kırılmasına neden olur.

·        Çözüm: CSS kodunun en tepesine evrensel seçiciyi (*) kullanarak box-sizing: border-box; kuralı eklenir. Bu kural tarayıcıya şunu söyler: "Ben genişliği 400px verdiysem, padding ve border'ı bu 400px'in içinden kıs, kutunun dış boyutunu asla büyütme."

💡 Display (Görünüm) Mülkü

HTML elemanlarının sayfada nasıl davranacağını belirler:

·        display: block: Eleman bulunduğu satırı tamamen kaplar. Kendisinden sonra gelen elemanı bir alt satıra zorlar. Genişlik ve yükseklik değerlerine saygı duyar. (Örn: <div>, <h1>, <p>)

·        display: inline: Eleman sadece içindeki içerik kadar yer kaplar. Yan yana dizilmeye izin verir. En kritik kural: inline elemanlara yukarı-aşağı margin/padding verilemez, width ve height (genişlik/yükseklik) değerleri tanımlanamaz. (Örn: <a>, <span>)

·        display: inline-block: Hem inline gibi yan yana dizilir hem de block gibi genişlik, yükseklik ve tüm yönlerden boşluk değerlerini başarıyla uygular. Menü yapımlarında sıkça tercih edilir.

·        display: none: Elemanı sayfadan tamamen gizler. Eleman sayfada hiç yokmuş gibi davranır ve kapladığı alan boşa çıkar.

🛠 Uygulama: Kutu Modeli ve Düzen Koruma Simülasyonu

Aşağıdaki CSS ve HTML yapısı, border-box kuralının sitenizin düzenini nasıl koruduğunu canlı olarak gösterir:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>Kutu Modeli Deneyimi</title>

    <style>

        /* Tüm elemanlar için düzen koruma kuralını aktif ediyoruz */

        * {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }

 

        .kutu-kapsayıcı {

            background-color: #f0f0f0;

            padding: 20px;

        }

 

        .ornek-kutu {

            width: 300px;

            height: 150px;

            background-color: deepskyblue;

            color: white;

           

            /* Kutu Modeli Katmanları */

            border: 10px solid royalblue; /* Kenarlık */

            padding: 20px;               /* İç boşluk */

            margin: 30px auto;           /* Dış boşluk: Üst-alt 30px, sağ-sol otomatik (ortalar) */

           

            /* Görsel Şekillendirme */

            border-radius: 15px;         /* Kenarları yuvarlama */

        }

    </style>

</head>

<body>

 

    <div class="kutu-kapsayıcı">

        <!-- box-sizing: border-box sayesinde bu kutunun dış genişliği

             ekstra padding ve border'a rağmen tam olarak 300px kalacaktır. -->

        <div class="ornek-kutu">

            Kutu Modeli Katmanlarını İnceliyorsunuz.

        </div>

    </div>

 

</body>

</html>

 

Web sayfalarının hiyerarşik gücünü belirleyen CSS Specificity (Özgünlük/Ağırlık Hesaplama), modern arama motorlarının sitenizi anlamasını sağlayan Structuring Documents (Anlamsal HTML5) ve yazı tiplerini canlandıran Formatting Text (Metin Biçimlendirme) bölümleriyle derinlemesine devam ediyoruz.

➡️ BÖLÜM 9: CSS Seçici Ağırlıkları ve Öncelik Sırası (CSS Order & Specificity)

Büyük projelerde, birden fazla CSS kuralı aynı HTML etiketini hedef aldığında tarayıcılar hangisini uygulayacağını şaşırmaz. Özgünlük puanı (Specificity) en yüksek olan kural kazanır. Eğer puanlar tamamen eşitse, en son yazılan (en alttaki) kural geçerli olur.

💡 Özgünlük Hesaplama Formülü

Tarayıcılar kuralları karşılaştırırken soldan sağa doğru işleyen 4 basamaklı bir puanlama matrisi (0, 0, 0, 0) kullanır:

1.     Satır İçi Stiller (Inline Styles) → [1, 0, 0, 0] : HTML etiketinin içine yazılan stillerdir (style="..."). Neredeyse tüm kuralları ezer.

2.     ID Seçiciler → [0, 1, 0, 0] : Sayfada tek bir benzersiz ögeyi seçen yapılardır (#logo, #nav).

3.     Class (Sınıf), Nitelik (Attribute) ve Sözde Sınıf (Pseudo-class) Seçiciler → [0, 0, 1, 0] : Yeniden kullanılabilir yapılardır (.menu, [href], :hover).

4.     Element (Etiket) Seçiciler → [0, 0, 0, 1] : Doğrudan etiket adlarıdır (h1, p, div).

·        Evrensel Seçici (*) → [0, 0, 0, 0] : Hiçbir ağırlığı yoktur, en zayıf seçicidir.

·        ⚠️ !important Kuralı: Bir CSS değerinin sonuna eklendiğinde (color: red !important;), özgünlük kurallarını tamamen devre dışı bırakır ve o kodu kesin olarak kazandırır. Ancak kod yönetimini imkansız hale getirdiği için acil durumlar dışında kesinlikle kullanılmamalıdır.

🛠 Uygulama: Kim Kazanacak? (Ağırlık Deneyi)

Aşağıdaki kod yapısında aynı <p> etiketine 4 farklı kural uygulanmıştır. Puan hesaplamasını inceleyin:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>CSS Öncelik Deneyi</title>

    <style>

        /* Kural 1: Sadece etiket seçici -> Puan: [0, 0, 0, 1] */

        p { color: orange; }

 

        /* Kural 2: Class seçici -> Puan: [0, 0, 1, 0] */

        .metin { color: blue; }

 

        /* Kural 3: ID seçici -> Puan: [0, 1, 0, 0] */

        #ozel-paragraf { color: green; }

 

        /* Kural 4: Etiket + Class birleşimi -> Puan: [0, 0, 1, 1] */

        p.metin { color: purple; }

       

        /* Puan Karşılaştırması:

           [0, 1, 0, 0] (ID) > [0, 0, 1, 1] (Etiket+Class) > [0, 0, 1, 0] (Class) > [0, 0, 0, 1] (Etiket)

           Bu durumda paragrafın rengi YEŞİL olacaktır. */

    </style>

</head>

<body>

 

    <!-- Eğer buraya style="color: red;" yazsaydık satır içi stil [1,0,0,0] puanla yeşili de ezecekti -->

    <p id="ozel-paragraf" class="metin">Bu yazının rengi ne olacak?</p>

 

</body>

</html>

➡️ BÖLÜM 10: Metin Biçimlendirme (Formatting Text)

Yazıların boyutu, aralıkları ve font aileleri bir web sitesinin okunabilirliğini doğrudan belirler. Modern web tasarımında font yapılandırması oldukça hassas bir konudur.

💡 Kritik Font Mülkleri ve Birimleri

·        font-family: Yazı tipini belirler. Tarayıcıya alternatifli bir liste sunulmalıdır. Listenin en sonuna her zaman yedek genel aile ismi (serif, sans-serif veya monospace) yazılmalıdır. Eğer kullanıcının bilgisayarında özel font yüklü değilse tarayıcı bu yedeği açar.

·        font-size Birimleri: Kesinlikle sabit piksel (px) yerine esnek birimler kullanılmalıdır.

o   rem (Root EM): Kullanıcının tarayıcı varsayılan yazı boyutuna (genelde 16px) oranlanır. 1rem = 16px, 2rem = 32px yapar. Görme engelli bir kullanıcı tarayıcı fontunu büyüttüğünde siteniz de onunla birlikte büyür.

o   vw (Viewport Width): Ekran genişliğinin yüzde 1'ini temsil eder. Akıllı telefon ekranlarında metinlerin otomatik küçülmesini sağlar.

·        line-height (Satır Yüksekliği): Okunabilirliği artırmak için metin satırları arasındaki dikey boşluğu ayarlar. Birimsiz sayısal değer olarak verilmesi (Örn: 1.5) en iyi pratiktir.

·        letter-spacing (Kerning): Karakterlerin (harflerin) kendi arasındaki yatay mesafeyi belirler.

💡 Performans ve Google Fonts

Sitenize harici yazı tipleri yüklemek (Google Fonts vb.) performansa bir maliyet getirir. Kullanıcı sitenizi açtığında o font dosyasını indirmek zorunda kalır. Kural: Sadece ihtiyacınız olan font-weight (kalınlık) değerlerini (Örn: Sadece 400 ve 700) seçip projeye eklemelisiniz. Tüm kalınlıkları yüklemek site hızını ciddi ölçüde düşürür.

➡️ BÖLÜM 11: Doküman Yapısı ve Anlamsal HTML (Structuring Documents)

Sadece <div> etiketlerini üst üste yığarak web sitesi yapma hastalığına sektörde "Div Çorbası" (Div Soup / Divitis) denir. Tarayıcılar ve ekran okuyucular düz bir <div> etiketinin ne amaçla koyulduğunu anlayamaz. Bu yüzden HTML5 ile gelen Semantic (Anlamsal) etiketler kullanılmalıdır.

💡 Anlamsal Yapı Taşları ve Kuralları

·        <header>: Sitenin veya bir bölümün en üstündeki giriş, logo ve ana navigasyon alanını temsil eder.

·        <nav>: Sitenin ana menüsünü, bağlantı listelerini sarmalamak için zorunludur. Ekran okuyucular kör kullanıcılara menünün yerini bu etiket sayesinde söyler.

·        <main>: Sayfanın asıl ve benzersiz ana içeriğini barındırır. Bir HTML belgesinde sadece bir adet kullanılmalıdır. Diğer sayfalarda tekrarlanan yan menü veya logoları içermez.

·        <article>: Kendi başına bağımsız olarak paylaşılabilen, gazete haberi, forum mesajı veya blog yazısı gibi içerikleri ifade eder.

·        <section>: Sayfa içindeki tematik bölümleri (Örn: "Hizmetlerimiz", "Hakkımızda" alanları) gruplar. Genellikle içinde bir başlık barındırır.

·        <aside>: Ana içerikle dolaylı olarak ilişkili, reklam alanları, yazar biyografisi gibi yan menü (sidebar) bileşenleridir.

·        <footer>: Sayfanın veya bir bölümün en altındaki telif hakkı, iletişim bilgileri ve sosyal medya linklerini tutan kısımdır.

🛠 Uygulama: Kusursuz Bir HTML5 Sayfa İskeleti

Aşağıdaki kod yapısı, modern standartlara tam uyumlu, arama motorlarının (SEO) en sevdiği sayfa mimarisini gösterir:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>Anlamsal HTML5 Yapısı</title>

    <style>

        body {

            font-family: 'Segoe UI', sans-serif;

            line-height: 1.6; /* Rahat okunabilir satır aralığı */

            font-size: 1rem;   /* Esnek rem birimi */

        }

    </style>

</head>

<body>

 

    <!-- Sitenin Üst Alanı -->

    <header>

        <div class="logo">Yazılım Akademisi</div>

        <nav>

            <a href="#anasayfa">Ana Sayfa</a> |

            <a href="#kurslar">Kurslar</a> |

            <a href="#iletisim">İletişim</a>

        </nav>

    </header>

 

    <!-- Sitenin Benzersiz Ana İçeriği -->

    <main>

        <!-- Bağımsız Blog Yazısı -->

        <article>

            <h1>Neden HTML5 Kullanmalıyız?</h1>

            <p>HTML5, web sayfalarımızın arama motorları tarafından daha kolay taranmasını sağlar.</p>

           

            <!-- Yazı İçindeki Tematik Bölüm -->

            <section>

                <h2>Erişilebilirlik Avantajları</h2>

                <p>Ekran okuyucular anlamsal etiketleri doğrudan algılayabilir.</p>

            </section>

        </article>

    </main>

 

    <!-- Yan İçerik Alanı -->

    <aside>

        <h3>Popüler Yazılar</h3>

        <p>CSS Seçici Ağırlıkları Nasıl Hesaplanır?</p>

    </aside>

 

    <!-- Sitenin En Alt Alanı -->

    <footer>

        <p>&copy; 2026 Yazılım Akademisi. Tüm hakları saklıdır.</p>

    </footer>

 

</body>

</html>

 

Web tasarımının en heyecan verici ve modern dönüm noktası olan Layout Fundamentals (Düzen Temelleri), sayfa düzenlemede devrim yaratan Layout with Flexbox (Esnek Kutu Düzeni) ve sitelerin tüm cihazlara uyum sağlamasını sağlayan Media Queries (Mobil Uyumlu Tasarım) bölümleriyle derinlemesine devam ediyoruz.

➡️ BÖLÜM 12: Düzen Esasları (Layout Fundamentals)

Web tasarımında nesnelerin ekranda nasıl konumlanacağını anlamak için elemanların varsayılan akış davranışlarını değiştirmeyi bilmek gerekir.

💡 Elemanların Blok ve Satır İçi Davranışları

·        Block (Blok) Elemanlar: Varsayılan olarak bulundukları satırı tamamen kaplarlar (width: 100%). Kendilerinden sonra gelen elemanları alt satıra kaymaya zorlarlar. (Örn: <div>, <p>, <h1>)

·        Inline (Satır İçi) Elemanlar: Sadece içlerindeki metin veya içerik kadar yer kaplarlar. Yan yana dizilebilirler. En önemli kural: Üst ve alt yönlerden boşluk (margin/padding) uygulayamazlar, genişlik ve yükseklik alamazlar. (Örn: <a>, <span>)

·        Inline-Block Elemanlar: Hem inline gibi yan yana dizilirler hem de block gibi genişlik, yükseklik ve dikey boşlukları başarıyla uygularlar. (Örn: Yatay menü linkleri)

🛠 Uygulama: Elemanları Yan Yana Dizme Tekniği

Eski web tasarımında elemanları yan yana getirmek büyük bir dertti. Aşağıdaki uygulama, varsayılan olarak alt alta dizilen blok düzeyindeki <div> etiketlerini inline-block kullanarak nasıl yan yana dizebileceğimizi gösterir:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>Düzen Temelleri Uygulaması</title>

    <style>

        * {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }

 

        .menu-listesi li {

            /* li etiketleri varsayılan olarak block'tur ve alt alta dizilir.

               inline-block yaparak onları yan yana dizilebilir birer kutuya çeviriyoruz. */

            display: inline-block;

            width: 120px;

            padding: 10px;

            background-color: #333;

            color: white;

            text-align: center;

            margin-right: 5px;

        }

       

        .menu-listesi li:hover {

            background-color: deepskyblue;

            cursor: pointer; /* Fare imlecini el işaretine çevirir */

        }

    </style>

</head>

<body>

 

    <ul class="menu-listesi">

        <li>Ana Sayfa</li>

        <li>Hizmetler</li>

        <li>Hakkımızda</li>

        <li>İletişim</li>

    </ul>

 

</body>

</html>

➡️ BÖLÜM 13: Flexbox ile Düzen Tasarımı (Layout with Flexbox)

Müfredatta en çok üzerinde durulan konulardan biri olan Flexbox, tek boyutlu sayfa düzenlerini (satır veya sütun) yönetmek için geliştirilmiş muazzam güçlü bir CSS modelidir. Bir elemana display: flex; uyguladığınız an, o eleman bir Flex Container (Esnek Kapsayıcı) olur, onun içindeki tüm birinci derece çocuk etiketler ise otomatik olarak Flex Item (Esnek Öge) haline gelir.

💡 Ana Eksen ve Çapraz Eksen Mantığı

Flexbox'ı çözmenin sırrı eksenleri anlamaktır:

·        flex-direction: row (Varsayılan): Ana eksen yatay (soldan sağa), çapraz eksen dikey (yukarıdan aşağıya) olur.

·        flex-direction: column: Ana eksen dikey (yukarıdan aşağıya), çapraz eksen yatay (soldan sağa) olur.

💡 Kapsayıcı (Container) Mülkleri

·        flex-wrap: Kutuların satıra sığmadığında alt satıra geçip geçmeyeceğini belirler. wrap değeri verildiğinde taşan kutular alta kayar, düzen kırılmaz.

·        justify-content: Ögeleri Ana Eksen (Main Axis) üzerinde hizalar.

o   center: Tam ortalar.

o   space-between: İlk kutuyu en sola, son kutuyu en sağa yaslar, diğerlerini araya eşit dağıtır.

o   space-around: Kutuların sağ ve sol taraflarına eşit boşluklar dağıtır.

·        align-items: Ögeleri Çapraz Eksen (Cross Axis) üzerinde dikey olarak hizalar. (flex-start, flex-end, center, stretch)

💡 Öge (Item) Mülkleri

·        flex-grow: Boş kalan alanın kutular tarafından hangi oranda paylaşılıp büyütüleceğini belirler. Sayısal değer alır.

·        order: HTML kod sırasını bozmadan, kutuların ekrandaki görünüm sırasını değiştirmeyi sağlar (Örn: order: -1 olan kutu en başa geçer).

🛠 Uygulama: Flexbox ile Kusursuz Hizalama ve Ortallama

Geçmişte web tasarımdaki en büyük kabus, bir kutunun içindeki metni veya logoyu hem yatayda hem dikeyde tam ortalamaktı. Flexbox ile bu işlem sadece 3 satır sürer:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>Flexbox Mucizesi</title>

    <style>

        .dis-kapsayici {

            width: 100%;

            height: 300px;

            background-color: #f4f4f4;

           

            /* Flexbox'ı aktif ediyoruz */

            display: flex;

            /* Yatay eksende tam ortala */

            justify-content: center;

            /* Dikey eksende tam ortala */

            align-items: center;

        }

 

        .ic-kutu {

            width: 150px;

            height: 100px;

            background-color: crimson;

            color: white;

            text-align: center;

            line-height: 100px; /* Metni dikeyde ortalamak için kutu yüksekliği kadar verdik */

            font-weight: bold;

        }

    </style>

</head>

<body>

 

    <div class="dis-kapsayici">

        <div class="ic-kutu">TAM ORTADAYIM!</div>

    </div>

 

</body>

</html>

➡️ BÖLÜM 14: Medya Sorguları ve Mobil Uyum (Media Queries)

Masaüstü bilgisayarlar, tabletler ve akıllı telefonlar... Web sitenizin tüm bu farklı ekran boyutlarında kusursuz görünmesini sağlayan teknoloji Media Queries (Medya Sorguları) sistemidir. Sitenizin görünümünün değiştiği ekran genişliği sınırlarına Breakpoint (Kırılma Noktası) denir.

💡 Mobil Öncelikli Tasarım (Mobile-First Design)

Eğitimde şiddetle tavsiye edilen modern yaklaşım budur. CSS yazmaya başlarken önce sitenin en küçük ekranlı akıllı telefonlardaki halini kodlarsınız. Ardından medya sorguları ile ekran büyüdükçe (min-width kullanarak) tablet ve masaüstü görünümlerini katman katman eklersiniz. Bu yaklaşım kod karmaşasını azaltır ve mobil performansı uçurur.

·        min-width: 768px → "Ekran genişliği en az 768px ve daha yukarısı olduğunda bu kodları devreye al." (Genelde tablet sınırı)

·        min-width: 1024px → "Ekran genişliği en az 1024px ve yukarısı olduğunda bu kodları devreye al." (Masaüstü sınırı)

⚠️ Meta Viewport Etiketinin Hayati Önemi

HTML sayfanızın <head> kısmına <meta name="viewport" content="width=device-width, initial-scale=1.0"> kodunu eklemezseniz, yazdığınız hiçbir medya sorgusu mobil cihazlarda çalışmaz. Çünkü akıllı telefonlar sitenizi devasa bir masaüstü ekranı gibi simüle edip küçülterek (font-boosting yaparak) açmaya çalışır. Bu etiket tarayıcıya şunu emreder: "Sitenin viewport (görünüm penceresi) genişliğini, cihazın kendi fiziksel ekran genişliğine eşitle!"

🛠 Uygulama: Ekrana Göre Renk Değiştiren Duyarlı Sayfa

Aşağıdaki kodları tarayıcınızda açıp, tarayıcı penceresini sağ kenarından tutup daraltıp genişleterek arka plan renginin kırılma noktalarında nasıl tepki verdiğini canlı olarak izleyebilirsiniz:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <!-- Mobil uyum için bu etiket ZORUNLUDUR -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Tasarım Testi</title>

    <style>

        /* Varsayılan Kodlar: Mobil Öncelikli (Küçük Ekranlar İçin) */

        body {

            background-color: lightcoral;

            font-size: 14px;

            padding: 20px;

            color: white;

            font-family: sans-serif;

        }

 

        body::after {

            content: " Şu an: Mobil Ekran (Dar)";

            font-weight: bold;

        }

 

        /* Kırılma Noktası 1: Ekran Genişliği 768px ve Üzeri Olduğunda (Tablet) */

        @media (min-width: 768px) {

            body {

                background-color: seagreen;

                font-size: 18px;

            }

            body::after {

                content: " Şu an: Tablet Ekranı (Orta)";

            }

        }

 

        /* Kırılma Noktası 2: Ekran Genişliği 1024px ve Üzeri Olduğunda (Masaüstü Bilgisayar) */

        @media (min-width: 1024px) {

            body {

                background-color: royalblue;

                font-size: 22px;

            }

            body::after {

                content: " Şu an: Masaüstü Ekranı (Geniş)";

            }

        }

    </style>

</head>

<body>

 

    <h1>Duyarlı (Responsive) Sayfa Deneyimi</h1>

 

</body>

</html>

 

Web geliştirmede sizi sıradan bir kodlayıcıdan profesyonel bir zanaatkara dönüştürecek olan Graphics & SVGs (Vektörel Grafikler), sitelerin tarayıcı sekmelerindeki kimliği olan Favicon Yapılandırması ve yazılmış eski kodları modern standartlara kavuşturma sanatı olan Refactor Challenge (Kod İyileştirme) bölümleriyle derinlemesine devam ediyoruz.

➡️ BÖLÜM 15: Grafik Yönetimi ve Çözünürlükten Bağımsız SVGs (Graphics)

Web sitelerinde kullanılan görseller temel olarak ikiye ayrılır: Raster/Bitmap (Piksel Tabanlı) ve Vector (Vektörel) grafikler. Müfredatta, modern webin vazgeçilmezi olan SVG teknolojisi üzerinde detayla durulmaktadır.

💡 Piksel Tabanlı Görseller ile Vektörel Görsellerin Farkı

·        Bitmap/Raster (JPG, PNG, GIF): Renkli piksellerden oluşan bir matristir. Görseli büyüttüğünüzde pikseller sayılır, kenarlar bulanıklaşır ve görüntü kalitesi bozulur (degrade olur). Dosya boyutları genellikle büyüktür.

·        Vector (SVG - Scalable Vector Graphics): Matematiksel formüller, koordinatlar, çizgiler ve eğrilerden oluşan XML tabanlı bir işaretleme dilidir. Bir SVG görselini ne kadar büyütürseniz büyütün, kalitesi asla bozulmaz, piksellenme yapmaz. Dosya boyutları birkaç kilobayt (KB) düzeyindedir ve inanılmaz derecede hafiftir.

💡 Font Awesome ve Performans Sırrı

Font Awesome, web sitelerine hızlıca ikon eklemek için kullanılan popüler bir kütüphanedir. Ancak tüm Font Awesome kütüphanesini (yaklaşık 92.7 KB veri) siteye dahil etmek büyük bir performans israfıdır. Sitede sadece 3-5 tane ikon kullanılıyorsa, tüm yazı tipi scriptini yüklemek yerine ihtiyacımız olan ikonların SVG kodlarını kütüphaneden ayıklayarak (extract ederek) doğrudan HTML'e gömmek en iyi performans pratiğidir.

💡 SVG <path> Elemanı ve Çizim Komutları

SVG içindeki en güçlü eleman <path> (yol) etiketidir. Bu etiket, sanal bir kalemin ekran üzerinde nasıl hareket edeceğini belirleyen d="..." (draw/çiz) niteliğini alır:

·        M (X Y): Kalemi kaldırmadan belirtilen X ve Y koordinatına git (Move to).

·        L (X Y): Mevcut konumdan belirtilen X ve Y noktasına düz bir çizgi çek (Line to).

·        Z: Çizimi bitir ve kalemi başladığın ilk noktaya geri götürerek yolu kapat (Close Path).

·        ⚠️ Büyük/Küçük Harf Farkı: Komutların BÜYÜK harfle yazılması Mutlak (Absolute) koordinatları, küçük harfle yazılması ise o an bulunulan noktaya göre Göreli (Relative) mesafeleri ifade eder.

💡 Modüler SVG Tasarımı: <symbol> ve <use>

Bir ikon veya logoyu sayfa içinde birden fazla yerde kullanacaksanız, SVG kodunu defalarca kopyalamamalısınız. HTML'in en tepesinde <symbol> etiketi ile ikonun kimliğini (id) tanımlayıp gizleyebilir, sayfa içinde ihtiyaç duyulan yerlerde <use href="#id"> diyerek çağırabilirsiniz. Bu yöntem kod tekrarını önler ve tarayıcı tarafından önbelleğe (cache) alınabilir. Ayrıca Microsoft tarayıcılarıyla JavaScript eklentisine ihtiyaç duymadan tam uyumlu çalışır.

🛠 Uygulama: Temel SVG Çizimi ve CSS ile Renklendirme

Aşağıda, harici hiçbir görsel dosyasına ihtiyaç duymadan, tamamen kodla tarayıcıda kusursuz bir mavi üçgen çizen ve üzerine gelindiğinde renk değiştiren SVG uygulamasını inceleyebilirsiniz:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>SVG ve CSS Uygulaması</title>

    <style>

        .vektorel-ikon {

            width: 100px;

            height: 100px;

            transition: all 300ms ease; /* Yumuşak geçiş efekti */

        }

 

        /* SVG elemanlarında geleneksel 'background-color' yerine 'fill' (iç dolgu),

           'border' yerine 'stroke' (çizgi rengi) mülkleri kullanılır. */

        .vektorel-ikon path {

            fill: deepskyblue;

            stroke: royalblue;

            stroke-width: 5; /* Çizgi kalınlığı */

        }

 

        /* Fare üzerine geldiğinde ikonu tamamen CSS ile manipüle edebiliyoruz */

        .vektorel-ikon:hover path {

            fill: crimson;

            stroke: darkred;

        }

    </style>

</head>

<body>

 

    <!-- 100x100 piksellik bir koordinat düzlemi (viewBox) oluşturuyoruz -->

    <svg class="vektorel-ikon" viewBox="0 0 100 100">

        <!-- Çizim Başlıyor:

             M 50 10  -> Kalemi X:50, Y:10 noktasına götür

             L 90 90  -> Sağa ve aşağıya doğru çizgi çek

             L 10 90  -> Sola doğru düz çizgi çek

             Z        -> Çizimi başlangıç noktasına bağlayarak kapat -->

        <path d="M 50 10 L 90 90 L 10 90 Z" />

    </svg>

 

</body>

</html>

➡️ BÖLÜM 16: Sekme İmzası Yapılandırması (Favicon)

Favicon (Favorite Icon), web sitenizin tarayıcı sekmelerinde, yer imlerinde (bookmarks) ve mobil cihazların ana ekranlarında sitenizi temsil eden küçük logodur.

💡 Profesyonel Favicon Üretim Aşamaları

1.     Görsel Hazırlığı: Adobe Illustrator veya benzeri bir grafik programında, en az 600 x 600 piksel çözünürlükte kare bir PNG görseli oluşturulur.

2.     Çoklu Çözünürlük Çıktısı: Sadece tek bir favicon.ico dosyası modern cihazlar için yeterli değildir. Sitenizin hem iPhone (Apple Touch Icon), hem Android (Manifest JSON), hem de yüksek çözünürlüklü masaüstü ekranlarda kusursuz görünmesi için görsellerin farklı boyutlara (16x16, 32x32, 180x180 vb.) bölünmesi gerekir. Eğitimde bu işlem için realfavicongenerator.net aracı önerilmektedir.

3.     Önbellek (Cache) Kırma Tuzağı: Tarayıcılar favicon dosyalarını çok agresif bir şekilde önbelleğe alır. Sitenizin logosunu değiştirdiğinizde eski logoda ısrar edebilirler.

o   Çözüm: HTML bağlantısının sonuna bir versiyon parametresi (Query String) eklenerek tarayıcının yeni dosyayı indirmesi zorlanır. (Örn: <link rel="icon" href="favicon.ico?v=2">)

➡️ BÖLÜM 17: Kod İyileştirme Sanatı (Refactor Challenge)

Refactoring (Kodun Yeniden Yapılandırılması), mevcut bir kodun dışsal/görsel davranışını ve işlevini değiştirmeden, arka plandaki yazım kalitesini, performansını ve okunabilirliğini artırma sürecidir.

💡 Bir Web Sayfasında Neler Refaktör Edilir? (İyileştirme Kontrol Listesi)

Müfredatta yer alan pratik senaryoda, eski standartlarla yazılmış bir sitenin modern yapıya kavuşturulması için şu adımlar uygulanır:

·        DRY (Don't Repeat Yourself) Prensibi: CSS dosyasında kendisini tekrar eden kurallar tespit edilir. Aynı mülkleri alan farklı seçiciler virgülle birleştirilerek tek bir kural setine indirgenir.

·        Div Soup (Div Çorbası) Temizliği: Sayfayı sadece tasarımsal olarak bölmek için kullanılan anlamsız <div> etiketleri ayıklanır. Yerlerine bir önceki bölümlerde öğrendiğimiz <header>, <nav>, <main>, <article> ve <footer> gibi anlamsız olmayan, anlamsal (semantic) HTML5 etiketleri yerleştirilir.

·        Sayfa Düzeni Dönüşümü: Eski yöntem olan satır içi bloklar (inline-block) veya kaydırma mülkleri (float) temizlenir. Menü ve sayfa yerleşimleri modern, esnek ve hatasız çalışan Flexbox mimarisine geçirilir.

·        Görsel ve Renk Optimizasyonu: Opaklığı ayarlanamayan düz renk kodları yerine, şeffaflık desteği sunan modern rgba() veya hsla() renk formatlarına geçilir. background shorthand (kısa yazım) kullanımı, tarayıcılar arası uyumsuzluk riskini önlemek için background-image, background-size: cover ve background-repeat: no-repeat şeklinde uzun ve net mülklere dönüştürülür.

 

Web geliştirmenin en güçlü etkileşim alanı olan ve ön uç (front-end) ile arka uç (back-end) dünyasını birbirine bağlayan Forms (Formlar) ile yazdığınız siteleri internet ortamında tüm dünyaya açma sanatı olan Publishing Your Site (Sitenizi Yayınlamak) bölümleriyle derinlemesine devam ediyoruz.

➡️ BÖLÜM 18: Formlar ve Veri Giriş Alanları (Forms)

Formlar, bir web sayfasında kullanıcılardan bilgi (metin, dosya, seçimler vb.) almak ve bu bilgileri işlenmek üzere sunucuya (server) göndermek için kullanılan en kritik etkileşim araçlarıdır.

💡 Ön Uç ve Arka Uç Köprüsü (Front-End & Back-End İlişkisi)

Bir form doldurulup gönderildiğinde, front-end geliştiricinin görevi biter ve veriler back-end yazılımcısının kurduğu sisteme aktarılır. Müfredatta popüler back-end dilleri şu şekilde sıralanmaktadır:

1.     Go (Golang): Google tarafından geliştirilen, yüksek performanslı ve modern sunucu dili.

2.     Node.js: JavaScript'i sunucu tarafında çalıştırmaya yarayan popüler çalışma ortamı.

3.     Python: Temiz yazımı ve zengin kütüphaneleriyle güçlü sunucu dili.

4.     Ruby / PHP: Geleneksel ve yaygın kullanılan dinamik web dilleri.

💡 İletişim Metotları: GET ve POST Farkı

Form verileri sunucuya aktarılırken iki ana HTTP yönteminden (method) biri seçilir:

·        GET Yöntemi: Verileri URL adresinin sonuna ekleyerek gönderir (Örn: arama.php?sorgu=html). Veriler tarayıcı geçmişinde ve adres çubuğunda açıkça görünür. Bu yüzden şifre, kredi kartı gibi hassas veriler için kesinlikle kullanılmaz. Sadece arama kutuları veya filtrelemeler için uygundur.

·        POST Yöntemi: Verileri HTTP isteğinin gövdesinde (Body katmanında) gizli bir paket olarak gönderir. Adres çubuğunda hiçbir veri görünmez. Güvenlidir, dosya yüklemelerine izin verir ve üyelik/giriş formlarında kullanılması zorunludur.

💡 En Sık Kullanılan Form Elemanları ve Nitelikleri

·        <form>: Tüm form elemanlarını sarmalayan ana etikettir. action="..." niteliği verilerin hangi sunucu dosyasına gideceğini, method="..." ise GET veya POST yöntemini belirler.

·        <input>: En temel veri giriş elemanıdır. type="..." niteliğine göre şekil değiştirir (text, password, email, checkbox, radio, file, submit).

·        ⚠️ name Niteliğinin Hayati Önemi: Bir <input> etiketine name="..." niteliği vermezseniz, o alana yazılan veri sunucuya asla ulaşmaz. Arka uç yazılımcısı veriyi bu isimle (değişken olarak) yakalar.

·        <label>: Form elemanlarının ne işe yaradığını belirten etiketlerdir. for="..." niteliği ile ilgili input elemanının id değerine bağlanır. Böylece etikete tıklandığında bile input alanı otomatik olarak seçilir (Erişilebilirlik için zorunludur).

·        <textarea>: Kullanıcının uzun metinler (Örn: yorum, mesaj) girebileceği çok satırlı alanlar oluşturur.

·        <select>, <optgroup>, <option>: Kullanıcıya açılır bir açılır menü (drop-down) sunar. Seçenekleri gruplamak için <optgroup>, her bir seçeneği oluşturmak için <option> kullanılır.

·        <fieldset> ve <legend>: Form içindeki ilişkili elemanları görsel ve anlamsal bir çerçeve içine almak için <fieldset>, bu çerçevenin başlığını yazmak için <legend> kullanılır.

🛠 Uygulama: Standartlara Uygun Kusursuz Bir Form Tasarımı

Aşağıdaki kod yapısı, hem kullanıcı dostu (placeholder, autofocus özellikleri içeren) hem de anlamsal olarak tam uyumlu bir kayıt formunu gösterir:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>Gelişmiş Form Uygulaması</title>

    <style>

        body { font-family: sans-serif; padding: 20px; background-color: #f9f9f9; }

        form { max-width: 500px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

        fieldset { border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin-bottom: 15px; }

        legend { font-weight: bold; padding: 0 10px; color: #333; }

        .form-grup { margin-bottom: 15px; }

        label { display: block; margin-bottom: 5px; font-weight: bold; }

        input[type="text"], input[type="email"], select, textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }

        button { background-color: deepskyblue; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 16px; }

        button:hover { background-color: royalblue; }

    </style>

</head>

<body>

 

    <!-- Verileri güvenli POST yöntemiyle gonderiyoruz -->

    <form action="/kaydet" method="POST">

        <fieldset>

            <legend>Kullanıcı Bilgileri</legend>

           

            <div class="form-grup">

                <!-- 'for' ve 'id' eşleşmesi erişilebilirlik sağlar -->

                <label Aksiyonu="ad">Tam Adınız:</label>

                <!-- autofocus: Sayfa açıldığında imleç otomatik buraya odaklanır -->

                <input type="text" id="ad" name="kullanici_adi" placeholder="Ahmet Yılmaz" required autofocus>

            </div>

 

            <div class="form-grup">

                <label Aksiyonu="eposta">E-posta Adresiniz:</label>

                <input type="email" id="eposta" name="kullanici_email" placeholder="ahmet@ornek.com" required>

            </div>

        </fieldset>

 

        <fieldset>

            <legend>Eğitim Tercihleri</legend>

           

            <div class="form-grup">

                <label Aksiyonu="kurs">Katılmak İstediğiniz Kurs:</label>

                <select id="kurs" name="secilen_kurs">

                    <optgroup label="Ön Yüz (Front-End)">

                        <option value="html-css">HTML5 & CSS3 Uzmanlık</option>

                        <option value="flexbox">İleri Düzey Flexbox Tasarımı</option>

                    </optgroup>

                    <optgroup label="Arka Yüz (Back-End)">

                        <option value="go-lang">Go Web Programlama</option>

                    </optgroup>

                </select>

            </div>

        </fieldset>

 

        <button type="submit">Kayıt Ol</button>

    </form>

 

</body>

</html>

➡️ BÖLÜM 19: Sitenizi Yayınlamak (Publishing Your Site)

Bilgisayarınızda hazırladığınız web kodlarının (.html, .css dosyaları) internete bağlı diğer tüm insanlar tarafından görünür hale gelmesi işlemine yayınlama (deploy/publishing) denir. Müfredatta, projenizi kurumsal standartlarda yayına almanın adımları anlatılmaktadır.

💡 Alan Adı Satın Almak (Domain)

İnternet kullanıcılarının sitenize ulaşmak için tarayıcıya yazacağı adrestir (Örn: sitenizinadi.com). Bilgisayarlar aslında birbirleriyle IP adresleri (Örn: 192.0.2.1) üzerinden konuşurlar. Alan adı, bu karmaşık sayıları insanların aklında tutabileceği kelimelere dönüştürür. Eğitim sürecinde satın alımlar için domains.google altyapısı örnek gösterilmiştir.

💡 Bulut Altyapısında Canlıya Almak (Google Cloud & App Engine)

Kodlarınızı 7/24 internete açık, hızlı ve güvenli bir bilgisayarda (sunucuda) barındırmanız gerekir. Kurs kapsamında projeyi Google Cloud App Engine üzerinde canlıya almanın teknik adımları şu şekildedir:

1.     Gerekli Araçların Kurulması: Bilgisayarınıza sunucu yönetim altyapısı için Google Cloud SDK (App Engine SDK) kurulumu gerçekleştirilir.

2.     Arka Plan Altyapısı: SDK sisteminin düzgün çalışması ve komutları yorumlaması için bilgisayarda Python (Eğitimin hazırlandığı dönem standardı olan 2.7.x sürümü) kurulu olmalı ve sistem ortam değişkenleri (PATH) yapılandırılmalıdır.

3.     Proje Yapılandırması (app.yaml): Projenizin ana dizinine sunucuya kuralları bildiren bir app.yaml dosyası eklenir. Bu dosyanın içine Google Cloud Console üzerinden aldığınız benzersiz Project ID (Proje Kimliği) yazılır.

4.     Yayınlama Komutu: Terminal açılır, proje dizinine gidilir ve sunucuya yükleme komutu çalıştırılır:
appcfg.py -A <PROJE_KİMLİĞİNİZ> -V v1 update .

5.     DNS Yönlendirmesi: Kodlar başarıyla yüklendikten sonra siteye <proje-id>.appspot.com adresinden erişilebilir hale gelir. Son adımda, satın aldığınız alan adının (Domain) DNS ayarlarını Google Cloud sunucularına yönlendirerek kendi adınızla yayını tamamlamış olursunuz.

 

📌 "Öğrenecekleriniz" Bölümünün Detaylı Açıklaması

Bu kurs, katılımcılara sıfırdan profesyonel seviyeye kadar modern web geliştirmenin kalbi olan HTML5 dünyasını öğretmeyi hedefler. Belgede listelenen maddelerin işlevsel karşılıkları şunlardır:

• Mimari ve İskelet Oluşturma: Web siteleri ile mobil uygulamaların HTML5 altyapılarının birbirinden nasıl ayrıştığı ve doğru doküman iskeletinin nasıl kurulacağı öğretilir.
• Duyarlı (Responsive) Tipografi ve Medya: Metinlerin ve görsellerin tüm ekran boyutlarında (mobil, tablet, masaüstü) bozulmadan, doğru yoğunlukta ve optimize edilmiş olarak nasıl sunulacağı aktarılır. SEO odaklı görsel kullanımı ve boyutlandırma stratejileri işlenir.
• Entegrasyon ve Sunucu Yönetimi: HTML5 kodunun CSS ve PHP ile dahili/harici olarak nasıl bağlanacağı, lokalde (XAMPP vb.) test sunucusu kurulumu ve gerçek bir uzak sunucuya dosyaların nasıl yükleneceği (FTP/Panel) gösterilir.
• İleri Düzey Semantik ve Kodlama Dünyası: Arama motorlarının (Google vb.) sayfayı en iyi şekilde anlamasını sağlayan Meta etiketleri, profesyonel yorum satırı yazma algoritmaları ve bu yorum satırlarıyla hata ayıklama (debugging) teknikleri sunulur.
• Veri ve Etkileşim Yönetimi: Tablolar, gelişmiş veri formları, form güvenliği önlemleri, dış dünyadan içerik çekme (iFrame) ve multimedya (Ses, Video, Animasyon) entegrasyonu derinlemesine ele alınır.
• Profesyonel Pratik ve Tasarım Dönüşümü: Bir Photoshop (PSD) tasarımının birebir HTML5 koduna nasıl dönüştürüleceği (slicing/coding) ve sektörel hız kazanmak için en popüler HTML5 framework'lerinin kullanımı öğretilir.

➡️ BÖLÜM 1: Giriş ve Temel Doküman Yapısı

Bu bölümde HTML5 dünyasına adım atarak bir web sayfasının temel anatomisini, etiket, nitelik ve değer kavramlarını öğreniyoruz.

📖 Konu Anlatımı

HTML5 dokümanları, tarayıcıya dosyanın türünü belirten bir bildirimle başlar. Her şey etiketlerden (tags) oluşur.

• Element (Öğe): Açılış etiketi, içerik ve kapanış etiketinin tamamıdır (Örn: <p>Merhaba</p>).
• Attribute (Nitelik): Etikete ek özellik veya bilgi sağlayan yapılardır (Örn: href, src).
• Value (Değer): Niteliğe atanan parametredir (Örn: href="index.html" ifadesindeki "index.html" değerdir).

💻 Kod Örneği

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>İlk Web Sayfam</title>

</head>

<body>

    <!-- Bu bir yorum satırıdır. Kullanıcılar görmez. -->

    <h1>HTML5 Dünyasına Hoş Geldiniz!</h1>

    <p id="ana-paragraf" class="metin">Bu benim ilk gerçek HTML5 sayfamdır.</p>

</body>

</html>

🛠️ Pratik Uygulama

Bilgisayarınızda boş bir not defteri veya VS Code editörü açın. Yukarıdaki kod bloğunu yapıştırın ve dosya adını index.html olarak kaydederek tarayıcınızda çift tıklayıp açın. Sayfa başlığının ve başlığın nasıl göründüğünü inceleyin.

➡️ BÖLÜM 2: Metin Biçimlendirme ve İçerik Düzenleme

Web sayfasındaki metinsel içeriklerin hiyerarşik ve semantik olarak yapılandırılması bu bölümün temelini oluşturur.

📖 Konu Anlatımı

• <h1> - <h6>: Başlık etiketleridir. <h1> en önemli ve en büyük başlığı, <h6> ise en alt kırılımdaki başlığı temsil eder. Arama motorları için kritik öneme sahiptir.
• <p>, <br>, <pre>: <p> yeni bir paragraf açar. <br> satır başı yaptırır (kapanış etiketi yoktur). <pre> ise kod yazıldığı gibi (boşluklar ve satır atlamaları korunarak) tarayıcıya basılmasını sağlar.
• <ul>, <ol>: Sırasız (noktalı) ve sıralı (numaralı) listeler oluşturur. İçlerindeki her öge <li> etiketi ile yazılır.
• <div> ve Konteynerlar: Sayfayı mantıksal bölümlere ayırmak için kullanılan kapsayıcılardır.

💻 Kod Örneği

<h2>Eğitim Müfredatı İçeriği</h2>

<p>HTML5 öğrenmek çok keyiflidir.<br>Disiplinli çalışmak gerekir.</p>

 

<pre>

    Sevgili Günlük,

    Bugün HTML5 etiketlerini

    detaylıca öğrendim.

</pre>

 

<h3>Alışveriş Listesi (Sırasız)</h3>

<ul>

    <li>HTML5 Kitabı</li>

    <li>Kodlama Defteri</li>

</ul>

 

<h3>Günlük Rutin (Sıralı)</h3>

<ol>

    <li>Dersi izle</li>

    <li>Uygulama yap</li>

</ol>

🛠️ Pratik Uygulama

Bir makale sayfası tasarlayın. En üste ana başlık (<h1>), altına yazar ismi ve tarih, ardından kalın (<strong>) ve eğik (<em>) kelimelerin yer aldığı 3 paragraflık bir metin ekleyin. Makalenin sonuna maddeler halinde kaynakça listesi oluşturun.

➡️ BÖLÜM 3: Hiperlinkler (Bağlantılar) ile Sayfaları Birleştirme

Web sitelerinin birbirine bağlanmasını ve sayfa içi navigasyonu sağlayan köprülerin kurulması anlatılmaktadır.

📖 Konu Anlatımı

Bağlantılar <a> (Anchor) etiketi ile oluşturulur. href niteliği bağlantının nereye gideceğini belirtir.

• Dış Bağlantı: Başka sitelere verilen linklerdir (Örn: https://google.com).
• İç Bağlantı: Sitenin kendi içindeki diğer sayfalara geçiştir (Örn: iletisim.html).
• Sayfa İçi Çapa (Anchor): Çok uzun sayfalarda belirli bir bölüme (id parametresine) yönlendirme yapmak için kullanılır.
• Target Niteliği: target="_blank" değeri verilirse link yeni bir sekmede açılır.

💻 Kod Örneği

<!-- Dış Bağlantı -->

<a href="https://google.com" target="_blank">Google'ı Yeni Sekmede Aç</a>

 

<!-- İç Bağlantı -->

<a href="hakkimizda.html">Hakkımızda Sayfasına Git</a>

 

<!-- Sayfa İçi Navigasyon -->

<a href="#iletisim-bolumu">Sayfa Altındaki İletişime Git</a>

 

<div style="margin-top: 1000px;" id="iletisim-bolumu">

    <h2>İletişim Bilgileri</h2>

    <p>E-posta: test@example.com</p>

</div>

🛠️ Pratik Uygulama

Bir web sitesi menüsü (Navigation Bar) yapın. Ana Sayfa, Ürünler ve İletişim linkleri olsun. Sayfanın en altına da "Yukarı Çık" bağlantısı ekleyerek sayfa içi çapa (href="#ust-bolum") uygulamasını test edin.

➡️ BÖLÜM 4: Dijital Medya (Görsel, Ses ve Video Yönetimi)

Modern web sitelerinde zengin medya içeriklerinin performanslı ve duyarlı biçimde sunulması işlenmektedir.

📖 Konu Anlatımı

• <img>: Sayfaya resim ekler. Kapanış etiketi yoktur. alt niteliği, resim yüklenemediğinde çıkacak metindir ve SEO için hayati önem taşır. Görselleri responsive yapmak için CSS'te veya genişlik ayarlarında %100 gibi esnek değerler kullanılır.
• <audio> ve <video>: HTML5 ile gelen yerleşik oynatıcılardır. controls niteliği eklenmezse kullanıcı oynatma, durdurma ve ses butonlarını göremez.

💻 Kod Örneği

<!-- SEO Uyumlu ve Duyarlı Görsel -->

<img src="logo.png" alt="Şirket Logosu" style="max-width: 100%; height: auto;">

 

<!-- Resme Link Verme -->

<a href="https://google.com">

    <img src="buton-resmi.png" alt="Google Git Butonu">

</a>

 

<!-- Ses Entegrasyonu -->

<audio controls>

    <source src="sarki.mp3" type="audio/mpeg">

    Tarayıcınız ses ögesini desteklemiyor.

</audio>

 

<!-- Video Entegrasyonu -->

<video width="400" controls>

    <source src="tanitim.mp4" type="video/mp4">

</video>

🛠️ Pratik Uygulama

Yerel klasörünüze bir adet kısa video ve bir adet manzara resmi koyun. HTML sayfanızda resmi, üzerine tıklanınca videonun kaynağına gidecek şekilde bir köprü (<a>) içine alın.

➡️ BÖLÜM 5: Tablolar ve iFrame ile Veri Gösterimi

Yapılandırılmış verilerin grid mimarisinde sunulması ve dış kaynaklı web içeriklerinin sayfaya gömülmesi anlatılır.

📖 Konu Anlatımı

• <table>: Tabloyu başlatır.
• <tr> (Table Row): Satırları oluşturur.
• <th> (Table Header): Kalın ve ortalanmış başlık hücrelerini tanımlar.
• <td> (Table Data): Standart veri hücreleridir.
• colspan ve rowspan: Bir hücrenin sırasıyla birden fazla sütun veya birden fazla satır kaplamasını sağlar.
• <iframe>: Başka bir web sitesini veya haritayı (Örn: Google Maps) kendi sayfanızın içinde bir pencerede göstermeye yarar.

💻 Kod Örneği

<table border="1" width="100%">

    <caption>Haftalık Ders Programı</caption>

    <tr>

        <th>Günler</th>

        <th>09:00 - 12:00</th>

        <th>13:00 - 16:00</th>

    </tr>

    <tr>

        <td>Pazartesi</td>

        <td colspan="2">HTML5 Uzmanlık Eğitimi (Blok Ders)</td>

    </tr>

    <tr>

        <td>Salı</td>

        <td>CSS3 Giriş</td>

        <td>PHP Temelleri</td>

    </tr>

</table>

 

<!-- iFrame ile harici içerik -->

<iframe src="https://example.com" width="600" height="400" title="Harici Sayfa"></iframe>

🛠️ Pratik Uygulama

3 sütun ve 4 satırdan oluşan bir "Fiyat Tablosu" hazırlayın. İlk satırda "Paket Adı", "Özellikler", "Fiyat" başlıkları olsun. Son satırda ise tüm sütunları birleştiren (colspan="3") tek bir "Satın Almak İçin Bizimle İletişime Geçin" hücresi tasarlayın.

➡️ BÖLÜM 6: Formlar ve Kullanıcı Etkileşimi

Kullanıcılardan bilgi toplamak, üye kayıt sistemleri, anketler ve mesaj kutuları oluşturmak için form yapıları inşa edilir.

📖 Konu Anlatımı

Kullanıcı girdileri <form> etiketi içine yazılır. action verinin nereye gönderileceğini, method ise gönderim türünü (GET/POST) belirler. Form güvenliği için verilerin backend tarafında temizlenmesi ve HTML tarafında sınırlandırmalar yapılması kritiktir.

• <input type="text">: Standart metin girişidir. maxlength ve required gibi niteliklerle sınırlandırılabilir.
• <input type="radio">: Çoktan seçmeli sorularda sadece tek bir seçeneğin seçilmesini sağlar (Aynı name özniteliğine sahip olmalıdırlar).
• <input type="number"> & <input type="date">: Sayı ve tarih seçimi için tarayıcıya özel arayüzler sunar.
• <fieldset>: Form elemanlarını mantıksal bir çerçeve içine alarak gruplar.

💻 Kod Örneği

<form action="kaydet.php" method="POST">

    <fieldset>

        <legend>Kişisel Bilgiler</legend>

       

        <label for="isim">Adınız:</label>

        <input type="text" id="isim" name="kullanici_adi" required maxlength="20"><br><br>

       

        <label href="dogum">Doğum Tarihi:</label>

        <input type="date" id="dogum" name="dogum_tarihi"><br><br>

       

        <label>Cinsiyetiniz:</label>

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

       

        <input type="submit" value="Formu Gönder">

        <input type="reset" value="Temizle">

    </fieldset>

</form>

🛠️ Pratik Uygulama

Bir "Müşteri Geri Bildirim Formu" oluşturun. Formda ad-soyad (zorunlu field), e-posta, 1'den 10'a kadar puan verebileceği bir sayı alanı (type="number" min="1" max="10") ve uzun mesaj yazabileceği bir <textarea> alanı yer alsın.

➡️ BÖLÜM 7: Profesyonel HTML5 Pratikleri ve API'ler

Arama motoru optimizasyonu (SEO), harici Javascript entegrasyonu, renk sistemleri ve grafik çizim (Canvas) temelleri bu bölümde ele alınır.

📖 Konu Anlatımı

• Gelişmiş Yorum Satırları: Kod bloklarını açıp kapatırken <!-- #HEADER START --> ve <!-- #HEADER END --> gibi mimariler kullanarak hata ayıklama (debugging) kolaylaştırılır.
• Meta Etiketleri: <head> bölümünde yer alır. Sayfanın açıklaması (description), anahtar kelimeleri ve arama motoru botlarının davranışlarını belirler.
• Hexadecimal Renk Sistemi: Webde renkler 16'lık sayı sisteminde #RRGGBB (Red, Green, Blue) formatında tanımlanır (Örn: Beyaz #FFFFFF, Siyah #000000, Kırmızı #FF0000).
• Canvas API: JavaScript kullanarak web sayfasında pikseller üzerinde dinamik çizimler, grafikler veya animasyonlar üretilmesini sağlar.

💻 Kod Örneği

<!-- Meta Etiketleri Örneği -->

<meta name="description" content="Profesyonel ve kapsamlı HTML5 Uzmanlık Kursu.">

<meta name="keywords" content="HTML5, Web Tasarım, Yazılım">

 

<!-- Renk ve Script Uygulaması -->

<div style="background-color: #FF5733; color: #FFFFFF; padding: 10px;">

    Hexadecimal Renk Uygulanmış Alan

</div>

 

<!-- Canvas Yapısı -->

<canvas id="grafikAlani" width="200" height="100" style="border:1px solid #000000;"></canvas>

 

<!-- Harici JavaScript Bağlantısı -->

<script src="script.js"></script>

🛠️ Pratik Uygulama

HTML sayfanızın <head> kısmına Google arama sonuçlarında çıkmasını istediğiniz 150 karakterlik özgün bir sayfa açıklaması (description) meta etiketi yazın. Gövdede ise arka plan rengi #34495E (Gece Mavisi) olan bir kutu oluşturun.

➡️ BÖLÜM 8: CSS ile Stil Yönetimi ve Kutu Modeli (Box Model)

Sayfaya görsellik, renk, düzen ve tipografik estetik kazandıran CSS kuralları öğrenilir.

📖 Konu Anlatımı

• Stil Türleri: Satır içi (inline), dahili (internal - <style> etiketi içi) ve harici (external - .css uzantılı dosya) olmak üzere üç şekilde CSS uygulanabilir.
• Seçiciler (Selectors): HTML etiketlerine ulaşma yoludur. Sınıflar (Class) için . işareti (Örn: .kirmizi-metin), benzersiz kimlikler (ID) için # işareti (Örn: #ana-header) kullanılır.
• CSS Box Model (Kutu Modeli): Her HTML elementi bir kutudur. İçerik (content), iç boşluk (padding), çerçeve (border) ve dış boşluktan (margin) meydana gelir. Sayfa düzenini kavramanın anahtarıdır.

💻 Kod Örneği

<!-- Dahili CSS Örneği -->

<style>

    .ozel-kutu {

        width: 300px;

        padding: 20px;       /* İç boşluk */

        border: 5px solid #333; /* Çerçeve */

        margin: 15px;        /* Dış boşluk */

        background-color: #F1C40F;

        font-family: Arial, sans-serif;

    }

    #tekil-baslik {

        color: #2C3E50;

    }

</style>

 

<h1 id="tekil-baslik">CSS Dünyası</h1>

<div class="ozel-kutu">Kutu modelini öğreniyorum!</div>

🛠️ Pratik Uygulama

Harici bir stil.css dosyası oluşturun. İçine bir sınıf (.kart) yazarak bu sınıfa genişlik, gri arka plan rengi, köşeleri yuvarlatılmış kenarlık (border-radius) ve her yönden 20px iç boşluk (padding) verin. HTML sayfanızda bu sınıfı bir <div> üzerinde çağırın.

➡️ BÖLÜM 9: Responsive (Duyarlı) Tasarım Esasları

Web sayfasının bilgisayar, tablet ve akıllı telefon gibi farklı ekran genişliklerine otomatik uyum sağlaması yeteneğidir.

📖 Konu Anlatımı

Duyarlı tasarımlarda sabit piksel değerleri (px) yerine esnek yüzdesel (%) veya viewport (vw, vh) birimleri tercih edilir. Mobil öncelikli düşünülerek tasarlanan esnek grid yapıları veya responsive stylesheet kuralları sayesinde, cihaz ekranı küçüldüğünde elemanlar alt alta kayar ve okunabilirlik korunur.

💻 Kod Örneği

<!-- Responsive tasarımın ilk şartı olan Viewport Meta Etiketi -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

<style>

    /* Responsive Düzen Örneği */

    .kolon {

        width: 100%; /* Mobilde tam ekran genişlik kaplar */

        float: left;

        box-sizing: border-box;

        padding: 10px;

    }

   

    /* Büyük ekranlar için basit bir responsive kural simülasyonu */

    @media (min-width: 768px) {

        .kolon {

            width: 50%; /* Tablet ve masaüstünde yan yana 2 kolon olur */

        }

    }

</style>

 

<div class="kolon" style="background-color:#E74C3C;">Sol / Üst İçerik</div>

<div class="kolon" style="background-color:#3498DB;">Sağ / Alt İçerik</div>

🛠️ Pratik Uygulama

Sayfanıza <meta name="viewport"...> etiketini ekledikten sonra yan yana duran iki geniş kutu tasarlayın. Tarayıcınızı sağ köşesinden tutup daralttığınızda kutuların alt alta esnek biçimde geçip geçmediğini gözlemleyin.

 

💡 "Öğrenecekleriniz" Bölümünün Detaylı Açıklaması

Bu kurs, modern web geliştirmenin iki temel taşı olan HTML5 ve CSS3 dillerini, popüler arayüz kütüphanesi Bootstrap ve standartlara uygun XHTML ile harmanlayarak eksiksiz bir müfredat sunmaktadır. Kursu tamamladığınızda kazanacağınız yetkinliklerin analizi şöyledir:

• Temel ve İleri Seviye Yapı Taşları: Web sayfalarının iskeletini (HTML5) ve görsel tasarımını (CSS3) en ince ayrıntısına kadar öğreneceksiniz. Sadece statik sayfalar değil; gradyanlar, gölgeler, özel efektler ve renk karışım modları (blend modes) gibi ileri seviye tasarım yeteneklerine sahip olacaksınız.
• Etkileşim ve Multimedya Kontrolü: Sayfalarınıza video, ses ve görselleri profesyonelce yerleştirmeyi, HTML5 Canvas elementini kullanarak tarayıcı üzerinde dinamik grafikler çizmeyi ve fare/klavye/sürükle-bırak gibi kullanıcı etkileşimli (HTML Events) yapıları yönetmeyi kavrayacaksınız.
• Modern ve Duyarlı (Responsive) Tasarım: Günümüz web dünyasının standardı olan, mobil ve tabletlerle tam uyumlu web sitelerini hızlıca üretebilmek için Bootstrap framework'ünün tüm mekanizmalarına hakim olacaksınız. CSS3 ile web sitenize hayat veren 2D ve 3D animasyonlar tasarlayabileceksiniz.
• Hata Ayıklama ve Standartlara Uyumluluk (Debugging & Validation): Kod yazmak kadar önemli olan kod temizliği sürecini öğreneceksiniz. HTML ve CSS kodlarındaki hataları tarayıcı araçlarıyla bulmayı (debugging) ve kodunuzun dünya standartlarına (W3C) uygunluğunu denetleyen doğrulayıcıları (validator) kullanmayı öğreneceksiniz. Ayrıca HTML'in daha katı ve kuralcı bir türevi olan XHTML mimarisini de hazmederek profesyonel kod kalitesine ulaşacaksiniz.

➡️ BÖLÜM 2: IDE Kurulumu ve Geliştirme Ortamı

Web geliştirme sürecine başlamadan önce kodlarımızı rahatça yazabileceğimiz, hata denetimi yapabilen ve bizi hızlandıracak bir Entegre Geliştirme Ortamı (IDE) kurulması gerekir. Bu kursta sektör standardı olan Visual Studio Code (VS Code) tercih edilmiştir.

1. Visual Studio Code İndirilmesi ve Kurulması

VS Code; Microsoft tarafından geliştirilen ücretsiz, açık kaynaklı ve cross-platform (Windows, macOS, Linux uyumlu) bir kod editörüdür. Resmi web sitesinden sisteminize uygun sürüm indirilerek standart adımlarla kurulur.

2. IDE'yi Özelleştirme

Üretkenliği artırmak için editörün kişiselleştirilmesi şarttır. VS Code üzerinde şu özelleştirmeler yapılır:

• Renk Teması (Color Theme): Göz sağlığını korumak adına koyu temalar (örneğin Dark+ veya One Dark Pro) seçilebilir.
• Klavye Kısayolları (Keyboard Shortcuts): Kodları hızlıca satır satır kopyalamak, silmek veya hizalamak için kısayollar ayarlanır.
• Otomatik Kaydetme (File Auto-Saving): Kod yazarken sürekli CTRL + S yapma zorunluluğunu ortadan kaldırmak için Files: Auto Save özelliği active edilir.

3. Kodları Web Tarayıcısında Çalıştırma

Yazdığımız HTML ve CSS kodlarının çıktısını görebilmek için bir web tarayıcısına (Google Chrome, Microsoft Edge veya Mozilla Firefox) ihtiyaç duyarız. Tarayıcılar, yazdığımız kod satırlarını yukarıdan aşağıya doğru okuyarak bunları görsel birer web sayfasına dönüştürür.

🛠 UYGULAMA: VS Code üzerinde kod yazımını kolaylaştırmak için sol menüdeki "Extensions" (Eklentiler) simgesine tıklayın ve "Live Server" eklentisini kurun. Bu eklenti, kodunuzu her kaydettiğinizde tarayıcının otomatik olarak yenilenmesini sağlayarak geliştirme sürecinizi inanılmaz hızlandıracaktır.

➡️ BÖLÜM 3: HTML Temelleri (HTML Fundamentals)

HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan bir işaretleme dilidir; bir programlama dili değildir. Sayfadaki yazının, resmin veya butonun nerede duracağını belirler.

1. HTML Etiketleri (Tags) ve Kod Yapısı

HTML kodları küçüktür < ve büyüktür > işaretleri arasına yazılan etiketlerden oluşur. Genellikle bir açılış etiketi, bir de kapanış etiketi (önünde eğik çizgi / olan) bulunur.

• Element: Açılış etiketi, içerik ve kapanış etiketinin tamamına verilen addır.
• Attribute (Öznitelik): Etiketlere ek özellikler kazandıran, etiket içine yazılan isim="değer" biçimindeki yapılardır.

2. Standart Bir HTML Belgesinin Formatı

Her HTML dosyası tarayıcıya onun bir HTML5 belgesi olduğunu bildiren özel bir şablonla başlamalıdır.

📝 ÖRNEK KOD (Standart Şablon):

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>Benim İlk Web Sayfam</title>

</head>

<body>

    <!-- Kullanıcının göreceği tüm içerikler buraya yazılır -->

    <h1>Web Geliştirmeye Giriş</h1>

    <p>Bu benim HTML ile yazdığım ilk paragraftır.</p>

</body>

</html>

3. Başlıklar, Paragraflar ve Metin Biçimlendirme

• Başlıklar (<h1> - <h6>): Sayfadaki başlık hiyerarşisini belirler. <h1> en büyük ve en önemli başlıktır (Arama motorları/SEO için kritiktir). <h6> ise en küçük başlıktır.
• Paragraf (<p>): Metin bloklarını oluşturmak için kullanılır.
• Biçimlendirme Etiketleri:
• <b> veya <strong>: Metni kalın yapar.
• <i> veya <em>: Metni italik (eğik) yapar.
• <sup>: Üst simge ekler (Örn: x²).
• <sub>: Alt simge ekler (Örn: H₂O).
• <u>: Metnin altını çizer.
• <del>: Metnin üstünü çizer (silinmiş efekti).

4. Stil Özniteliği ve Stil Etiketi (Style Attribute & Tag)

CSS öğrenmeden önce HTML içinde temel renklendirmeler ve tasarımlar yapmak için style yapısı kullanılır.

• Style Attribute (Satır İçi): Doğrudan etiketin içine yazılır: <p style="color: blue;">Mavi Yazı</p>.
• Style Tag (Sayfa İçi): <head> bölümü içine <style> etiketleri açılarak yazılır.

5. Bağlantılar (Hyperlinks), Görseller ve Butonlar

• Köprüler (<a>): Başka bir sayfaya veya siteye link vermek için kullanılır. href özniteliği hedef adresi belirtir.
• <a href="https://google.com" target="_blank">Google'a Git</a> (Buradaki target="_blank" linkin yeni sekmede açılmasını sağlar).
• Görseller (<img>): Sayfaya resim ekler. Kapanış etiketi yoktur. src resmin yolunu, alt ise resim yüklenemezse görünecek alternatif metni belirtir.
• <img src="manzara.jpg" alt="Doğa Manzarası" width="300">
• Butonlar (<button>): Tıklanabilir alanlar yaratır. JavaScript ile birleştirilerek tıklama olayları (onclick) atanabilir.

6. HTML Yorum Satırları (Comments)

Kod arasına kendimiz veya ekip arkadaşlarımız için notlar bırakmamızı sağlar. Tarayıcı tarafından çalıştırılmaz ve kullanıcıya gösterilmez.

• <!-- Bu bir yorum satırıdır ve tarayıcıda görünmez -->

🛠 UYGULAMA (Hello World ve Temeller):
Aşağıdaki kodu VS Code editörünüze yapıştırın ve tarayıcıda açarak elementlerin nasıl göründüğünü inceleyin:

<!DOCTYPE html>

<html>

<head>

    <title>HTML Temelleri Uygulaması</title>

</head>

<body>

    <h1>Bilgisayar Bilimleri</h1>

    <p>HTML öğrenmek <strong>çok eğlenceli</strong> ve <i>kolaydır</i>.</p>

   

    <!-- Buton ve tıklama aksiyonu -->

    <button onclick="alert('Merhaba Dünya!')">Bana Tıkla</button>

   

    <br><br>

    <a href="https://wikipedia.org">Vikipedi'yi Ziyaret Et</a>

</body>

</html>

➡️ BÖLÜM 4: HTML'de Verileri Görüntüleme (Displaying Data in HTML)

Web sayfalarında verilerin düzenli bir yapıda sunulması, listelenmesi ve kullanıcıdan veri toplanması için gelişmiş HTML yapıları kullanılır.

1. Listeler (Lists)

HTML'de verileri maddeler halinde listelemek için 3 ana yapı vardır:

• Sıralı Liste (<ol>): Maddeleri sayısal veya harfsel olarak sıralar. Her madde <li> içine yazılır.
• Sırasız Liste (<ul>): Maddelerin başına nokta veya benzeri işaretler koyar (sırasızdır).
• Açıklama Listesi (<dl>): Terimler ve onların açıklamalarını listeler. <dt> terimi, <dd> ise açıklamayı temsil eder.

📝 ÖRNEK KOD (Liste Türleri):

<!-- Sıralı Liste -->

<ol type="A">

    <li>Yazılım Kurulumu</li>

    <li>Kodlama Aşaması</li>

</ol>

 

<!-- Sırasız Liste -->

<ul>

    <li>HTML5</li>

    <li>CSS3</li>

</ul>

2. Tablolar (Tables)

Verileri satır ve sütun formunda göstermek için kullanılır.

• <table>: Tabloyu başlatır.
• <tr>: Tablo satırını (Row) ifade eder.
• <th>: Başlık sütun hücresini (Header) ifade eder, kalın ve ortalı yazılır.
• <td>: Standart veri hücresini (Data) ifade eder.
• <caption>: Tablonun adını/başlığını belirtir.

📝 ÖRNEK KOD (Tablo):

<table border="1">

    <caption>Öğrenci Not Listesi</caption>

    <tr>

        <th>Adı</th>

        <th>Notu</th>

    </tr>

    <tr>

        <td>Ahmet</td>

        <td>95</td>

    </tr>

</table>

3. Düzenler (Layouts), Divs ve Spans

Web sayfasını mantıksal bölümlere ayırmak için kullanılan elemanlardır.

• Anlamsal (Semantic) Etiketler: Arama motorlarının sitenizi anlamasını sağlayan modern HTML5 düzen etiketleridir: <header> (üst bilgi), <nav> (menüler), <section> (bölümler), <article> (makale/içerik), <footer> (en alt kısım).
• <div> (Division): Blok düzeyinde (block-level) genel bir kapsayıcıdır. Eklendiği yerde satırı tamamen kaplar. Sayfa düzeni tasarlarken yoğun şekilde başvurulur.
• <span>: Satır içi (inline) bir kapsayıcıdır. Sadece içindeki metin kadar yer kaplar. Bir paragraf içindeki tek bir kelimeyi renklendirmek için idealdir.

4. Formlar (Forms)

Kullanıcıdan ad, şifre, mesaj gibi verileri alıp sunucuya göndermek için kullanılır. <form> etiketi içine <input> (giriş alanları), <label> (alan adları) ve butonlar eklenir.

🛠 UYGULAMA (Kapsamlı Form ve Veri Düzeni):

<!DOCTYPE html>

<html>

<head>

    <title>Kullanıcı Kayıt Formu</title>

</head>

<body>

    <section>

        <h2>Kayıt Formu</h2>

        <form action="/kaydet" method="POST">

            <label for="username">Kullanıcı Adı:</label><br>

            <input type="text" id="username" name="username" placeholder="Kullanıcı adınızı giriniz"><br><br>

           

            <label for="email">E-posta Adresi:</label><br>

            <input type="email" id="email" name="email"><br><br>

           

            <label for="city">Şehir Seçiniz:</label><br>

            <select id="city" name="city">

                <option value="ist">İstanbul</option>

                <option value="ank">Ankara</option>

            </select><br><br>

           

            <input type="submit" value="Bilgileri Gönder">

        </form>

    </section>

</body>

</html>

➡️ BÖLÜM 5: HTML'de Renkler (Colors in HTML)

HTML elemanlarının arka planlarını veya yazılarını renklendirmek için tarayıcıların tanıdığı farklı renk formatları mevcuttur.

1. Renk Belirtme Türleri

• RGB / RGBA: Kırmızı (Red), Yeşil (Green) ve Mavi (Blue) ışıkların 0-255 arasındaki değerlerinin karışımıyla elde edilir. rgba() fonksiyonundaki "a" harfi (Alpha) opaklığı/şeffaflığı temsil eder ve 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında değer alır.
• Hexadecimal (Onaltılık Sistem): Harf ve rakamlardan oluşan #RRGGBB formatıdır. Örn: #FF0000 (Kırmızı), #000000 (Siyah), #FFFFFF (Beyaz).
• HSL / HSLA: Renk Özü (Hue - 0-360 derece arası renk çemberi), Doygunluk (Saturation - yüzde değer) ve Parlaklık (Lightness - yüzde değer) temeline dayanır. hsla() yine şeffaflık barındırır.

📝 ÖRNEK KOD (Renk Kullanımları):

<!-- RGB ile Kırmızı Arka Plan -->

<div style="background-color: rgb(255, 0, 0);">RGB Kırmızı</div>

 

<!-- RGBA ile %50 Şeffaf Yeşil Arka Plan -->

<div style="background-color: rgba(0, 255, 0, 0.5);">Yarı Şeffaf Yeşil</div>

 

<!-- Hexadecimal ile Mavi Yazı -->

<p style="color: #0000FF;">Hex Mavi</p>

 

<!-- HSL ile Parlak Sarı Yazı -->

<h3 style="color: hsl(60, 100%, 50%);">HSL Sarı</h3>

➡️ BÖLÜM 6: HTML'e Medya ve Grafik Ekleme (Embedding Media and Graphics)

Modern web tasarımında sayfaları multimedya ögeleriyle (resim, video, ses, harita ve çizimler) zenginleştirmek kullanıcı deneyimini doğrudan artırır.

1. Gelişmiş Görsel Yönetimi ve İmaj Haritaları

Temel <img> etiketinin ötesinde, bir görselin farklı yerlerine tıklandığında farklı linklere gidilmesini sağlayan İmaj Haritaları (<map> ve <area>) kurulabilir.

• Ayrıca HTML5 ile gelen <picture> etiketi sayesinde, kullanıcının ekran genişliğine göre (mobil veya masaüstü) farklı boyutlarda resimlerin otomatik yüklenmesi sağlanarak optimizasyon yapılır.

2. Video ve Ses Ekleme (<video> & <audio>)

Eski web dünyasındaki gibi harici eklentilere (Flash vb.) ihtiyaç duymadan, doğrudan HTML5 etiketleriyle video ve ses oynatılabilir.

• Öznitelikler: controls (oynatma butonlarını gösterir), autoplay (sayfa açılınca otomatik oynatır), loop (bittiğinde başa sarar).

📝 ÖRNEK KOD (Video ve Ses):

<!-- Video Ekleme -->

<video width="400" controls autoplay loop>

    <source src="tanitim.mp4" type="video/mp4">

    Tarayıcınız video etiketini desteklemiyor.

</video>

 

<!-- Ses Ekleme -->

<audio controls>

    <source src="muzik.mp3" type="audio/mpeg">

</audio>

3. Sayfa İçi Sayfa Ekleme (<iframe>)

Mevcut web sayfanızın içerisine başka bir web sitesini (örneğin bir YouTube videosunu veya Google Haritalar konumunu) gömmek için kullanılır.

• <iframe src="https://example.com" width="600" height="400"></iframe>

4. HTML Canvas ve SVG Grafik Yapıları

• HTML Canvas (<canvas>): Üzerinde JavaScript kodları yardımıyla dinamik olarak 2D/3D grafikler, çizgiler, animasyonlar ve oyunlar çizilebilen pikselsel bir alandır.
• SVG (Scalable Vector Graphics): <svg> etiketiyle doğrudan HTML içine yazılan vektörel grafiklerdir. Kod tabanlı olduğu için ekran büyütülse dahi hiçbir kalite kaybı/pikselleşme yaşanmaz; logolar ve ikonlar için mükemmel çözümdür.

🛠 UYGULAMA (SVG ile Temel Şekil Çizimi):
Aşağıdaki kodu kullanarak web sayfanızda kırılma yaşamayan kusursuz bir vektörel daire ve dikdörtgen oluşturun:

<!DOCTYPE html>

<html>

<head>

    <title>Grafik Örnekleri</title>

</head>

<body>

    <h2>Kusursuz Vektörel SVG Çizimi</h2>

   

    <svg width="300" height="150">

        <!-- Mavi bir dikdörtgen -->

        <rect width="200" height="100" fill="blue" />

       

        <!-- Kırmızı bir daire -->

        <circle cx="250" cy="50" r="40" fill="red" />

    </svg>

</body>

</html>

 

Harika! Müfredat kılavuzumuza kaldığımız yerden, yine hiçbir özet yapmadan, süre/ders/önizleme gibi gereksiz satırları temizleyerek ve bolca pratik kod örneği ile ileri düzey tasarımlar ekleyerek devam ediyoruz.

Bu parçada Bölüm 7'den Bölüm 13'e kadar olan (Modern HTML5 Etiketleri, Event Mekanizmaları, Bootstrap Framework ve Baştan Sona XHTML Proje/Debugging) tüm aşamaları derinlemesine ele alıyoruz.

➡️ BÖLÜM 7: İleri Seviye HTML Etiketleri ve HTML5 Yenilikleri

HTML5 ile birlikte web dünyasına sadece görsel değil, tarayıcıların ve arama motorlarının sayfayı anlamlandırmasını sağlayan birçok gelişmiş etiket eklenmiştir.

1. Gelişmiş Metin ve Biçimlendirme Etiketleri

Müfredatta yer alan ve metne özel anlamlar katan diğer biçimlendirme yapıları şunlardır:

• <code>: Bilgisayar kod dizilimlerini (kod bloklarını) yazı içinde orijinal fontuyla (monospaced) göstermek için kullanılır.
• <pre>: Kod içerisindeki tüm boşlukları, satır atlamalarını ve tab düzenini tarayıcıda aynen koruyarak basar.
• <mark>: Metnin arkasını sarı renkle çizerek (fosforlu kalem efekti) vurgulamayı sağlar.
• <progress>: Devam eden bir işlemin (örneğin dosya yükleme) ilerleme durumunu gösteren bir çubuk (progress bar) oluşturur.

2. Metadata (Meta) Etiketleri

Web sayfasının gövdesinde (<body>) görünmeyen ancak <head> alanına eklenerek tarayıcıya, sunucuya ve arama motorlarına (SEO) sayfa hakkında bilgi veren etiketlerdir.

• <meta name="description" content="...">: Sitenizin Google arama sonuçlarında altta görünen açıklama metnini belirler.
• <meta name="keywords" content="...">: Sitenin anahtar kelimelerini tanımlar (Modern arama motorları için etkisi azalsa da hiyerarşik olarak müfredatta yer alır).
• <meta name="author" content="...">: Sitenin kod yazarını/geliştiricisini belirtir.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sitenin mobil cihazlarda ekran genişliğine göre doğru ölçeklenmesini (Responsive) sağlayan hayati bir etikettir.

📝 ÖRNEK KOD (HTML5 Özel Etiketleri Uygulaması):

<p>Dosya indirme durumu:</p>

<!-- İlerleme çubuğu uygulaması -->

<progress value="75" max="100"></progress> 75%

 

<br><br>

<pre>

    İçeride yazılan   boşluklar

    ve alt satıra geçişler

    aynen korunur.

</pre>

➡️ BÖLÜM 8: HTML Global Öznitelikleri (Global Attributes)

Global öznitelikler, ayırt etmeksizin tüm HTML etiketlerine uygulanabilen ortak özelliklerdir. HTML5 ile birlikte bu listeye çok güçlü yetenekler eklenmiştir.

1. Klasik Global Öznitelikler

• id: Sayfadaki sadece tek bir elemana verilebilecek benzersiz bir kimlik adıdır. CSS ve JavaScript ile o elemanı hedeflemek için kullanılır.
• class: Birden fazla elemana verilebilen ortak sınıf adıdır. Aynı tasarıma sahip elemanları gruplamak için kullanılır.
• style: Elemana doğrudan satır içi CSS kodu yazmayı sağlar.
• title: Kullanıcı fareyi o elemanın üzerine getirdiğinde küçük bir bilgi kutucuğu (tooltip) çıkmasını sağlar.

2. HTML5 ile Gelen Yeni Global Öznitelikler

• contenteditable: Verildiği elemanı doğrudan tarayıcı üzerinde kullanıcının düzenleyebileceği (yazı yazabileceği) dinamik bir alana dönüştürür.
• draggable: Elemanın ekranda sürüklenip sürüklenemeyeceğini (true/false) belirler. Sürükle-bırak uygulamalarının temelidir.
• hidden: Elemanı tarayıcıda tamamen gizler. JavaScript ile görünür kılınana kadar saklı tutmak için idealdir.
• data-*: Geliştiricinin HTML elemanı üzerine gizli ve özel veriler (data) tanımlamasını sağlar (Örn: data-id="1234"). JavaScript bu veriyi okuyarak işlem yapar.

📝 ÖRNEK KOD (contenteditable ve title Kullanımı):

<!-- Kullanıcı bu paragraftaki metne tarayıcıda tıklayıp kendi değiştirebilir -->

<p contenteditable="true" title="Bu yazıyı değiştirmek için tıklayın!">

    Bu metin düzenlenebilir bir alandır. Silip kendiniz yazın!

</p>

➡️ BÖLÜM 9: HTML Olayları (Events)

HTML olayları (Events), kullanıcının web sayfasında yaptığı hareketlere (tıklama, yazma, sürükleme vb.) web sayfasının tepki vermesini sağlayan tetikleyicilerdir. Genellikle JavaScript fonksiyonları ile birlikte çalışırlar.

1. Klavye Olayları (Keyboard Events)

Kullanıcı klavyeden bir tuşa bastığında tetiklenir:

• onkeydown: Kullanıcı klavyede bir tuşa bastığı (aşağı doğru ittiği) an çalışır.
• onkeypress: Tuşa basılı tutulduğu sürece tetiklenir.
• onkeyup: Kullanıcı parmağını basılı tuştan kaldırdığı an tetiklenir (Arama çubuklarında anlık sonuç getirmek için sık kullanılır).

2. Fare Olayları (Mouse Events)

Fare hareketleri ve tıklamaları ile tetiklenir:

• onclick: Elemana tek tıklandığında çalışır.
• ondblclick: Elemana çift tıklandığında çalışır.
• onmouseover: Fare imleci elemanın üzerine geldiği an tetiklenir.
• onmouseout: Fare imleci elemanın üzerinden ayrıldığı an tetiklenir.
• onmousedown / onmouseup: Farenin tıkına basıldığı ve bırakıldığı anları ayrı ayrı yakalar.

3. Sürükleme Olayları (Drag Events)

Sürükle-bırak mekanizmasını kurmak için kullanılır:

• ondragstart: Eleman sürüklenmeye başlandığı an tetiklenir.
• ondragover: Sürüklenen eleman, bırakılabilecek bir alanın üzerindeyken sürekli çalışır.
• ondrop: Sürüklenen eleman hedef alana bırakıldığı (bırakma anında) tetiklenir.

4. Pano Olayları (Clipboard Events)

Kullanıcının metin kopyalama/yapıştırma hareketlerini denetler:

• oncopy: Bir metin kopyalandığında çalışır.
• oncut: Bir metin kesildiğinde çalışır.
• onpaste: Alana bir veri yapıştırıldığında çalışır (Şifre onaylama alanlarında yapıştırmayı engellemek için kullanılır).

🛠 UYGULAMA (Kopyalama ve Çift Tıklama Engelleme Denetimi):

<!DOCTYPE html>

<html>

<head>

    <title>HTML Olayları Test Alanı</title>

</head>

<body>

    <h3>Güvenlikli Metin Alanı</h3>

    <!-- Kullanıcı bu alandan kopyalama yaparsa uyarı tetiklenir -->

    <p oncopy="alert('Bu siteden içerik kopyalamak yasaktır!')">

        Bu yazıyı kopyalamayı deneyiniz.

    </p>

 

    <!-- Çift tıklama olayı uygulaması -->

    <div ondblclick="this.style.color='red'" style="cursor:pointer; user-select:none;">

        Rengimi kırmızı yapmak için bana ÇİFT tıklayın!

    </div>

</body>

</html>

➡️ BÖLÜM 10: Bootstrap ile Esnek (Responsive) Düzen ve UI Tasarımı

Bootstrap, HTML, CSS ve JavaScript ile hızlıca mobil uyumlu (responsive) web siteleri geliştirmek için kullanılan dünyanın en popüler açık kaynaklı CSS framework'üdür. Hazır sınıfları (classes) sayesinde sıfırdan CSS yazma yükünü azaltır.

1. Grid (Izgara) Sistemi ve Konumlandırma

Bootstrap, sayfayı yatayda 12 eşit sütuna böler. .container (kapsayıcı) ve .row (satır) yapılarının içine yerleştirilen .col-* sınıfları ile ekran boyutuna göre esnek yerleşimler yapılır.

• col-md-6: Orta boy ekranlarda (tablet/laptop) sayfanın yarısını (12/6 = 2) kaplar.
• col-sm-12: Küçük ekranlarda (mobil) ekranın tamamını kaplar.

2. Hazır UI Bileşenleri ve Menüler

• Navbars (Navigasyon Barları): Responsive açılır-kapanır (hamburger menülü) üst menü yapılarını saniyeler içinde oluşturmanızı sağlar.
• Carousel (Resim Kaydırıcı): Sayfalarda dönen reklam veya görsel şeritleri kurar.
• Cards (Kartlar): Resim, başlık, metin ve butondan oluşan blok içerikleri düzenli göstermeyi sağlar (Örn: E-ticaret ürün kartları).
• Jumbotron: Sayfa girişinde büyük, dikkat çekici başlık ve arkası gri dolgulu karşılama alanları yaratır.

🛠 UYGULAMA (Bootstrap CDN ve Kart Tasarımı):
Sıfırdan harici kütüphane bağlayarak şık bir ürün kartı oluşturma uygulaması:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <!-- Bootstrap CSS Kütüphanesini İnternet Üzerinden Bağlama (CDN) -->

    <link rel="stylesheet" href="https://jsdelivr.net">

    <title>Bootstrap Tasarım Uygulaması</title>

</head>

<body class="bg-light p-5">

 

    <div class="container">

        <div class="row">

            <!-- Ekran boyutuna göre kendini ayarlayan esnek kart yapısı -->

            <div class="col-md-4 col-sm-12">

                <div class="card shadow-sm">

                    <div class="card-body">

                        <h5 class="card-title">Bootstrap Kursu</h5>

                        <p class="card-text">Modern grid yapısını ve hazır bileşenleri derinlemesine öğrenin.</p>

                        <a href="#" class="btn btn-primary">Hemen Başla</a>

                    </div>

                </div>

            </div>

        </div>

    </div>

 

</body>

</html>

➡️ BÖLÜM 11: HTML Hands-On Practice (Uygulamalı Web Sitesi Projesi)

Bu aşamada öğrenilen tüm HTML ve Bootstrap teorik bilgileri birleştirilerek tam donanımlı, çok sayfalı statik bir web sitesinin iskeleti inşa edilir. Kurulan iskelet yapı şu sayfaları kapsar:

• Ana Sayfa (Home Page): Kullanıcıyı karşılayan bir Carousel (görsel kaydırıcı) ve şirketin/sitenin ana hatlarını veren Bootstrap Jumbotron alanı içerir.
• Hakkımızda Sayfası (About Page): Şirket vizyonunu anlatan paragraflar, listeler ve yan yana dizilmiş takım üyeleri kartlarından (Cards) oluşur.
• Menü/Ürünler Sayfası (Menu Page): Fiyatların ve detayların net gösterilmesi için HTML <table class="table table-striped"> sınıfı ile zenginleştirilmiş modern tablolar barındırır.
• İletişim Sayfası (Contact Page): Kullanıcının ad, e-posta, mesaj bırakabileceği Bootstrap form elemanları (.form-group, .form-control) ve şirketin harita konumunu içeren bir <iframe> barındırır.

➡️ BÖLÜM 12: XHTML (Extensible HyperText Markup Language)

XHTML, HTML'in XML (Extensible Markup Language) kurallarına göre yeniden formüle edilmiş halidir. HTML'e göre çok daha katı, kuralcı ve disiplinlidir. Tarayıcıların kodu daha hatasız okumasını amaçlar.

1. XHTML ve HTML Arasındaki Kritik Sözdizimi (Syntax) Farkları

HTML kod yazarken yapılan bazı küçük esneklikleri veya hataları tolere ederken, XHTML bu durumlarda sayfa kırılması yaratır. Temel kuralları şunlardır:

1. Tüm etiketler kapatılmalıdır: HTML'de tek başına kullanılan <br> veya <img> etiketleri, XHTML'de mutlaka sonuna eğik çizgi eklenerek kapatılmalıdır: <br />, <img src="..." />.
2. Etiket isimleri küçük harfle yazılmalıdır: <H1>Başlık</H1> yazımı HTML'de çalışsa da XHTML'de kesinlikle hatadır; mutlaka <h1>başlık</h1> olmalıdır.
3. Öznitelikler (Attributes) tırnak içine alınmalıdır: <input type=text> hatadır, doğrusu <input type="text" /> şeklindedir.
4. Öznitelik küçültmesi (Attribute Minimization) yasaktır: HTML'deki <input checked> kullanımı yerine XHTML'de checked="checked" veya disabled="disabled" yazılmalıdır.

📝 ÖRNEK KOD (HTML'den XHTML'e Dönüşüm Tasarımı):

<!-- HTML Formatı (Hatalı/Gevşek Yapı) -->

<INPUT type=checkbox checked> <br>

 

<!-- Standartlara Uygun XHTML Formatı (Doğru Yapı) -->

<input type="checkbox" checked="checked" /> <br />

➡️ BÖLÜM 13: HTML Kodlarında Hata Ayıklama (Debugging)

Yazılan web kodlarının hatalardan arındırılması, tüm dünya tarayıcılarında aynı kalitede çalışması için "Debugging" süreçleri uygulanır.

1. Hata Türleri ve Çözümleri

• Sözdizimi Hataları (Syntax Errors): Etiketleri kapatmayı unutmak, büyüktür/küçüktür işaretlerini kaçırmak veya yanlış harf yazmak. Bu hatalar sayfa düzeninin tamamen kaymasına yol açar.
• Mantıksal Hatalar: Yanlış başlık hiyerarşisi kullanmak, SEO kurallarına uymayan meta yapıları oluşturmak.

2. HTML Doğrulayıcı (Validator) Kullanımı

Yazdığımız kodların kalitesini test etmek için W3C (World Wide Web Consortium) tarafından sağlanan resmi HTML Validator araçları kullanılır.

• Kodlar bu validator sistemine yapıştırılır; sistem satır satır tarama yaparak standart dışı, kapatılmamış veya güncelliğini yitirmiş tüm kodları tespit eder, geliştiriciye çözüm yollarını raporlar.

 

Müfredat kılavuzumuza, belirlemiş olduğunuz kurallar doğrultusunda (süre/ders/önizleme satırlarını temizleyerek, özet yapmadan ve bolca pratik kod/uygulama senaryoları ekleyerek) devam ediyoruz.

Bu parçada Bölüm 14'ten Bölüm 19'a kadar olan (CSS Temelleri, Box Model, Gelişmiş Metin Efektleri, Renk Teorileri/Filtreler, CSS Özellikleri ve Liste/Tablo Stilleme) tüm konuları en ince ayrıntısıyla ele alıyoruz.

➡️ BÖLÜM 14: CSS Temelleri (CSS Basics)

CSS (Cascading Style Sheets), HTML ile oluşturulan web sayfalarının görsel tasarımını (renk, font, düzen, yerleşim, animasyon) kontrol eden stil dilidir. HTML sayfanın iskeletiyse, CSS onun elbisesi ve dış görünüşüdür.

1. CSS Ekleme Yöntemleri ve Seçim Önceliği

Bir web sayfasına CSS kodları 3 farklı yöntemle entegre edilebilir:

• Inline CSS (Satır İçi): Doğrudan HTML etiketinin içine style özniteliği ile yazılır. <h1 style="color:red;">
• Internal CSS (Sayfa İçi): HTML dosyasının <head> bölümünde <style> etiketleri arasına yazılır.
• External CSS (Harici Stil Dosyası): .css uzantılı ayrı bir dosya oluşturulur ve HTML sayfasına <link rel="stylesheet" href="style.css"> koduyla bağlanır. Profesyonel web geliştirmede kod tekrarını önlemek için bu yöntem zorunludur.

2. Cascading Order (Basamaklama/Öncelik Sırası)

Tarayıcılar, aynı HTML elemanına birden fazla farklı yerden stil uygulandığında hangisinin geçerli olacağını belirli bir hiyerarşiye göre seçer. Öncelik sırası en yüksekten en düşüğe şöyledir:

1. Satır içi stil (Inline CSS) — En yüksek öncelik
2. Sayfa içi (Internal) ve Harici (External) stiller (Kodun yukarıdan aşağı okunma sırasında en altta yazılan her zaman üsttekini ezer)
3. Tarayıcının kendi varsayılan stilleri — En düşük öncelik

3. CSS Kutu Modeli (Box Model)

CSS'te yer alan her bir HTML elemanı tarayıcı tarafından dört katmandan oluşan bir kutu olarak kabul edilir. Sayfa düzenini hatasız yapabilmek için bu modeli anlamak şarttır:

• Content (İçerik): Kutunun içindeki asıl metin, resim veya öğedir. width ve height ile boyutlandırılır.
• Padding (İç Boşluk): İçerik ile kutunun kendi kenarlığı (border) arasındaki boşluktur.
• Border (Kenarlık): İç boşluğu ve içeriği saran, kalınlığı ve rengi ayarlanabilen çizgidir.
• Margin (Dış Boşluk): Kutunun dışındaki diğer elemanlarla/kutularla arasındaki mesafedir. Kutular arası boşluğu ayarlar.

📝 ÖRNEK KOD (Box Model Yapısı):

.kutu-tasarimi {

    width: 300px;

    height: 100px;

    padding: 20px;       /* İçerik kenarlardan 20px uzaklaşır */

    border: 5px solid black; /* 5px kalınlığında siyah düz çizgi */

    margin: 40px;        /* Diğer elemanlardan dışarıya doğru 40px boşluk */

}

➡️ BÖLÜM 15: CSS ile Metin Modifikasyonu (Modifying Text Using CSS)

Web sitesindeki metinlerin okunabilirliğini artırmak ve sanatsal tasarımlar sunmak için CSS gelişmiş metin özellikleri sunar.

1. Metin Biçimlendirme ve Efektleri

• text-transform: Metnin harflerini tamamen büyük (uppercase), tamamen küçük (lowercase) veya kelimelerin ilk harflerini büyük (capitalize) yapmayı sağlar.
• text-decoration: Metnin altını çizmek (underline), üstünü çizmek (line-through) veya üzerindeki çizgileri tamamen kaldırmak (none) için kullanılır. (Özellikle linklerin altındaki çizgileri kaldırmak için text-decoration: none; sıklıkla tercih edilir).
• text-shadow: Metinlerin arkasına derinlik katan gölgeler ekler. Değerleri sırasıyla: Yatay-Gölge Dikey-Gölge Bulanıklık-Çapı Renk şeklindedir. Multiple (birden fazla) gölge eklenerek 3D yazı efekti üretilebilir.

2. Tipografi ve Gelişmiş Font Özellikleri

• font-family: Yazı tipini (Arial, Times New Roman vb.) belirler.
• letter-spacing & word-spacing: Harfler arası ve kelimeler arası mesafeyi mikron düzeyinde ayarlar.
• line-height: Satırlar arasındaki dikey mesafeyi (satır yüksekliğini) belirler, uzun paragrafların okunmasını kolaylaştırır.

🛠 UYGULAMA (Katmanlı 3D Yazı Efekti):
Metne birden fazla gölge vererek gerçekçi bir 3D görünüm kazandırma uygulaması:

<!DOCTYPE html>

<html>

<head>

    <style>

        .uc-boyutlu-yazi {

            font-family: 'Arial Black', sans-serif;

            font-size: 50px;

            color: #FFFFFF;

            /* Virgülle ayırarak birden fazla gölge katmanı ekleme tekniği */

            text-shadow: 1px 1px 0px #ccc,

                         2px 2px 0px #999,

                         3px 3px 0px #666,

                         4px 4px 5px rgba(0,0,0,0.5);

        }

    </style>

</head>

<body>

    <h1 class="uc-boyutlu-yazi">CSS 3D TEXT</h1>

</body>

</html>

➡️ BÖLÜM 16: CSS'te Renk Teorisi ve Görsel Filtreler (Colors in CSS)

CSS, web elemanlarının hangi bölgelerinin (arka plan, yazı, kenarlık vb.) nasıl renklendirileceğini esnek fonksiyonlarla kontrol eder.

1. Renk Belirtme Detayları ve Anahtar Kelimeler

• transparent: Elemanın rengini tamamen görünmez (şeffaf) yapar.
• currentColor: Elemanın o anki yazı rengi (color) ne ise, kenarlık veya gölge renginin de otomatik olarak o rengi miras almasını sağlar.

2. Doygunluk, Opaklık ve CSS Filtreleri (Filters)

• opacity: Bir elemanın (içindeki yazılar dahil) genel şeffaflık oranını 0.0 ile 1.0 arasında ayarlar.
• filter: Görseller üzerinde Photoshop kalitesinde oynamalar yapmayı sağlayan fonksiyondur.
• saturate(): Görselin renk doygunluğunu artırır veya azaltır.
• grayscale(): Görseli siyah-beyaz hale getirir.
• blur(): Görsele buzlu cam efekti (bulanıklık) verir.

🛠 UYGULAMA (Siyah-Beyaz Resmin Üzerine Gelince Renklenmesi):
Modern portfolyo sitelerinde sıklıkla kullanılan filtre efekti uygulaması:

<!DOCTYPE html>

<html>

<head>

    <style>

        .efektli-resim {

            width: 300px;

            filter: grayscale(100%); /* Resim başlangıçta tamamen siyah beyaz */

            transition: filter 0.5s;  /* Değişimin yumuşak olması için geçiş efekti */

        }

        .efektli-resim:hover {

            filter: grayscale(0%);    /* Fareyle üzerine gelindiğinde orijinal renklerine döner */

        }

    </style>

</head>

<body>

    <img src="https://picsum.photos" class="efektli-resim" alt="Efekt Testi">

</body>

</html>

➡️ BÖLÜM 17: Detaylı CSS Özellikleri (CSS Properties)

Bu bölüm, web elemanlarının sınırlarını, arka planlarını, konumlarını ve görünürlük alanlarını manipüle eden temel özellikleri barındırır.

1. Arka Plan (Background) ve Kenarlık (Border) Özellikleri

• background-image: Arka plana resim yerleştirir. background-repeat: no-repeat; ile resmin tekrarlanması önlenir. background-position: center; ile resim ortalanır.
• border-image: Düz bir çizgi yerine, belirlenen bir görseli elemanın etrafına kenarlık olarak sarmaya yarar.

2. Kutu ve Taslak Özellikleri (Box & Outline)

• box-sizing: border-box;: Çok kritik bir özelliktir. Elemana eklenen padding ve border değerlerinin, elemanın toplam genişliğini (width) büyütmesini engeller; boyutları kutunun içine hapseder. Tasarım taşmalarını önlemek için modern CSS'te tüm elemanlara başlangıçta uygulanır.
• outline: Border'ın hemen dışına çizilen taslak çizgidir. Border'dan farkı, kutu modeline dahil olmaması ve sayfa düzeninde yer kaplamamasıdır. outline-offset ile kenarlıktan dışarıya doğru mesafesi ayarlanabilir.

3. Konumlandırma (Positioning) ve Hizalama

• float & clear: Elemanları sola veya sağa yaslayarak metinlerin onun etrafından akmasını sağlar.
• z-index: Elemanların üst üste bindiği durumlarda hangi elemanın en üstte, hangisinin en altta kalacağını katman katman (sayısal değerlerle) belirler. Yüksek değer alan eleman her zaman önde görünür.
• Clipping (Kırpma) ve Masking (Maskeleme): clip-path veya mask-image özellikleri kullanılarak dikdörtgen veya kare bir resim, özel bir şekil kalıbına sokularak kırpılabilir veya belirli bir şablona göre maskelenebilir.

➡️ BÖLÜM 18: CSS ile Tablo Tasarımı (CSS Tables)

HTML ile oluşturulan yalın tabloları modern, şık ve okunabilir hale getirmek tamamen CSS stilleriyle mümkündür.

1. Tablo Görüntüsü ve Çizgi Kontrolleri

• border-collapse: collapse;: Tablo hücrelerinin arasındaki çift çizgili rüküş görüntüyü kaldırarak çizgileri tek bir düz çizgi haline birleştirir.
• vertical-align: Hücre içerisindeki metinlerin dikeyde üstte mi (top), ortada mı (middle) yoksa altta mı (bottom) duracağını belirler.

📝 ÖRNEK KOD (Zebra Desenli Modern Tablo Tasarımı):

<!DOCTYPE html>

<html>

<head>

    <style>

        table {

            width: 100%;

            border-collapse: collapse; /* Çift çizgileri engeller */

        }

        th, td {

            padding: 12px;

            text-align: left;

            border-bottom: 1px solid #ddd;

        }

        th {

            background-color: #4CAF50;

            color: white;

        }

        /* Zebra deseni: Her çift satırın arka planını hafif gri yapar */

        tr:nth-child(even) {

            background-color: #f2f2f2;

        }

        /* Fareyle satırın üzerine gelince satırı vurgular */

        tr:hover {

            background-color: #ddd;

        }

    </style>

</head>

<body>

    <table>

        <tr><th>Kurs Adı</th><th>Dil</th></tr>

        <tr><td>HTML5</td><td>HTML</td></tr>

        <tr><td>CSS3</td><td>CSS</td></tr>

        <tr><td>Bootstrap</td><td>CSS Framework</td></tr>

    </table>

</body>

</html>

➡️ BÖLÜM 19: CSS ile Liste Tasarımı (CSS Lists)

HTML listelerinin (<ul>, <ol>) başındaki klasik nokta veya sayı sembolleri CSS ile tamamen özelleştirilebilir veya tamamen kaldırılabilir.

1. Liste Özellikleri ve Renklendirme

• list-style-type: Maddelerin başındaki ikonu kare (square), çember (circle) veya roma rakamı (upper-roman) gibi farklı yapılara dönüştürür.
• list-style-image: Maddelerin başına nokta yerine özel küçük bir .png veya .svg ikon yerleştirmeyi sağlar.
• list-style-position: inside;: Madde işaretlerinin listenin kendi hizasının içine mi yoksa dışına mı (outside) konumlanacağını belirler.

📝 ÖRNEK KOD (Navigasyon Menüsüne Hazırlık Liste Temizliği):

ul.ozel-liste {

    list-style-type: none; /* Listenin başındaki tüm noktaları siler */

    padding: 0;            /* Tarayıcının varsayılan iç boşluğunu sıfırlar */

    margin: 0;             /* Dış boşluğu sıfırlar */

}

ul.ozel-liste li {

    display: inline-block; /* Maddeleri alt alta değil, yan yana dizer */

    padding: 10px;

    background-color: #eee;

}

 

Müfredat rehberimizin son aşamasına geçiyoruz. Bu bölümde, yönergeleriniz doğrultusunda süre/ders/önizleme satırlarını tamamen ayıklayarak Bölüm 20'den son bölüm olan Bölüm 28'e kadar olan (CSS Animasyonları, Gelişmiş Seçiciler, At-Rules Kuralları, Blend Modları, CSS Grid ve Hata Ayıklama) tüm ileri seviye konuları derinlemesine inceliyor ve bolca pratik uygulama senaryosu ile tamamlıyoruz.

➡️ BÖLÜM 20 & 21: CSS3 Animasyonları ve Canlandırılabilir Özellikler

CSS3, web sayfalarındaki elemanları JavaScript kullanmadan, sadece tarayıcı gücüyle hareket ettirmemizi, renk değiştirmemizi ve canlandırmamızı sağlar.

1. Geçiş Özellikleri (Transition Properties)

Bir elemanın durum değiştirdiğinde (örneğin fareyle üzerine gelindiğinde) değişimin aniden değil, zamana yayılarak yumuşakça gerçekleşmesini sağlar.

• transition-property: Hangi özelliğin (Örn: background-color, width) yumuşatılacağını seçer.
• transition-duration: Geçişin ne kadar süreceğini belirtir (Örn: 0.5s, 2s).
• transition-timing-function: Geçişin hız eğrisini belirler (ease, linear, ease-in, ease-out).

2. Anahtar Kareler (@keyframes) ve Animasyon Özellikleri

Daha karmaşık, kendi kendine dönen veya sürekli tekrar eden hareketler için @keyframes şablonu ve animation özellikleri kullanılır.

• animation-name: Tanımlanan @keyframes animasyonunun adını bağlar.
• animation-iteration-count: Animasyonun kaç kez döneceğini belirler. infinite değeri verilirse durmaksızın sonsuza kadar döner.
• 2D ve 3D Transformasyonlar (transform): Elemanları iki boyutlu veya üç boyutlu düzlemde döndürmeyi (rotate), ölçeklemeyi (scale), kaydırmayı (translate) veya eğmeyi (skew) sağlar. transform: rotateY(180deg) gibi komutlarla 3 boyutlu kart çevirme efektleri yapılabilir.

3. Animasyon Yapılabilen Özellikler

Müfredatta listelenen; arka plan (background), kenarlık (border), kolon genişlikleri (column), yazı boyutu (font), dış boşluk (margin), iç boşluk (padding), yükseklik-genişlik (height/width), metin özellikleri (text) ve harf/kelime boşlukları (word/letter-spacing) zaman döngüsü içerisinde @keyframes ile pürüzsüzce canlandırılabilir.

🛠 UYGULAMA (Sonsuz Döngülü Kalp Atışı Animasyonu):

<!DOCTYPE html>

<html>

<head>

    <style>

        .canli-kutu {

            width: 100px;

            height: 100px;

            background-color: text;

            background: radial-gradient(circle, #ff4d4d, #cc0000);

            border-radius: 50%;

            margin: 50px auto;

            /* Animasyon bağlama: adı "nabiz", süresi 1 saniye, doğrusal hız, sonsuz döngü */

            animation: nabiz 1s linear infinite;

        }

 

        /* Animasyon adımlarının tanımlanması */

        @keyframes nabiz {

            0% { transform: scale(1); }

            50% { transform: scale(1.2); }

            100% { transform: scale(1); }

        }

    </style>

</head>

<body>

    <div class="canli-kutu"></div>

</body>

</html>

➡️ BÖLÜM 22: CSS ile Buton Tasarımı ve Durum Yönetimi

Kullanıcı etkileşiminin en yüksek olduğu buton elemanları, CSS durum seçicileriyle dinamik hale getirilir.

• :hover Durumu: Fare imleci butonun üzerine geldiğinde tetiklenir. Arka plan rengini açmak veya hafifçe büyütmek için kullanılır.
• :active Durumu: Kullanıcı butona tıkladığı (farenin sol tuşuna basılı tuttuğu) an tetiklenir. Butona gerçekten "basılıyormuş" hissi vermek için gölgesini küçültme efekti uygulanır.
• Gelişmiş Stilleme: border-radius ile oval köşeler, box-shadow ile derinlik hissi veren modern gölgeler ve buton içine yerleştirilen özel arka plan görselleri tasarlanır.

➡️ BÖLÜM 23: CSS Pseudo-Sınıfları ve Seçiciler (Pseudo-Classes & Selectors)

Seçiciler, HTML elementlerini tam on ikiden vurarak hedeflememizi sağlar. Yalancı sınıflar (Pseudo-classes) ise elemanların özel durumlarına stil vermemizi sağlar.

• Genel Seçiciler: Etiket seçici (p), Id seçici (#id), Sınıf seçici (.class) ve evrensel seçici (*).
• Giriş (Input) Pseudo-Sınıfları: Form elemanlarının durumlarını yakalar. Odaklanıldığında :focus, veri girilmesi zorunluysa :required, pasif bırakıldıysa :disabled.
• Çocuk (Child) ve Tip Seçicileri: Bir kapsayıcının içindeki elemanları sırasına göre seçer.
• li:first-child: Listenin ilk elemanını seçer.
• li:last-child: Listenin son elemanını seçer.
• tr:nth-child(odd): Tablonun tek sayıdaki satırlarını seçer.
• Bağlantı (Link) Seçicileri: Linklerin tıklanma durumlarını yönetir. Henüz gidilmemişse :link, ziyaret edilmişse :visited.
• Yalancı Elemanlar (Pseudo-Elements): Doğrudan bir HTML etiketi olmayan ama varmış gibi davranan yapılardır. Metnin ilk harfini hedefleyen ::first-letter veya elemanın hemen önüne/arkasına sanal içerik ekleyen ::before ve ::after yapıları bu gruptadır.

📝 ÖRNEK KOD (Input Focus ve Yalancı Eleman Kullanımı):

/* Input alanına tıklanıp yazı yazılmaya başlandığında kenarlığı mavi yapar */

input:focus {

    border: 2px solid #3498db;

    outline: none;

}

 

/* Linklerin başına otomatik olarak bir sağ ok ikonu ekleme */

a::before {

    content: "👉 ";

}

➡️ BÖLÜM 24: CSS At-Rules Kuralları

At-Rules, CSS'in nasıl davranması gerektiğini veya harici kaynakları nasıl işleyeceğini belirten, önünde @ işareti bulunan özel komutlardır.

• @import: Bir CSS dosyasının içerisine başka bir CSS dosyasını veya Google Fonts gibi harici yazı tiplerini dahil etmek için kullanılır.
• @media: Responsive (Duyarlı) tasarımın kalbidir. Ekran genişliğine göre (Mobil, Tablet, Masaüstü) farklı CSS kodlarının devreye girmesini sağlar.
• @keyframes: Yukarıda işlediğimiz animasyon adımlarını tanımlar.

➡️ BÖLÜM 25: İleri Seviye CSS (Advanced CSS)

Web sitelerine görsel zenginlik ve modern yerleşim düzenleri katan en profesyonel CSS yetenekleri bu alanda toplanmıştır.

• Gradients (Renk Geçişleri): Tek bir düz renk yerine bir renkten diğerine pürüzsüzce geçen arka planlar üretir. linear-gradient() (doğrusal) ve radial-gradient() (dairesel) olmak üzere ikiye ayrılır.
• Blend Modes (Karışım Modları): Tıpkı Photoshop'taki gibi arka plan resmi ile arka plan rengini veya iki resmi birbirinin üzerine bindirerek harmanlamayı (mix-blend-mode, background-blend-mode: multiply / overlay) sağlar.
• Responsive CSS Grid (Esnek Izgara Sistemi): Bootstrap'e ihtiyaç duymadan, saf CSS ile sayfayı satır ve sütunlara bölerek mükemmel esneklikte web düzenleri (Layout) oluşturmayı sağlayan iki boyutlu modern yerleşim modülüdür.

🛠 UYGULAMA (Saf CSS Grid ile 3 Kolonlu Sayfa Düzeni):

<!DOCTYPE html>

<html>

<head>

    <style>

        .grid-kapsayici {

            display: grid;

            /* Sayfayı otomatik genişleyen, aralarında 10px boşluk olan 3 eşit sütuna böler */

            grid-template-columns: repeat(3, 1fr);

            gap: 10px;

        }

        .grid-eleman {

            background-color: #34495e;

            color: white;

            padding: 20px;

            text-align: center;

            font-family: sans-serif;

        }

       

        /* Mobil Cihazlar İçin @media At-Rule Ayarı */

        @media (max-width: 600px) {

            .grid-kapsayici {

                /* Ekran 600px'den küçükse sütunları teke düşür (alt alta diz) */

                grid-template-columns: 1fr;

            }

        }

    </style>

</head>

<body>

    <div class="grid-kapsayici">

        <div class="grid-eleman">Sol Menü</div>

        <div class="grid-eleman">Ana İçerik Alanı</div>

        <div class="grid-eleman">Sağ Panel</div>

    </div>

</body>

</html>

➡️ BÖLÜM 26: CSS Hands-On Practice (Uygulamalı CSS Projesi)

Bu pratik bölümünde, Bölüm 11'de iskeletini HTML ve Bootstrap ile kurduğumuz web sitesinin (Ana Sayfa, Hakkımızda, Ürün Menüsü ve İletişim sayfaları) tüm özelleştirilmiş görsel tasarımları saf CSS kodları yazılarak tamamlanır.

• Final Cleanup (Temizlik Aşaması): Sürecin sonunda HTML sayfalarının içerisine yazılmış olan tüm dağınık CSS ve JavaScript kodları ayıklanır. CSS kodları style.css adında harici bir dosyaya taşınarak temiz, optimize ve dünya standartlarına uygun bir proje mimarisi elde edilir.

➡️ BÖLÜM 27: CSS Kodlarında Hata Ayıklama ve Validator

• Sık Yapılan Hatalar: Satır sonuna noktalı virgül (;) koymayı unutmak, süslü parantezleri kapatmamak veya seçici isimlerini yanlış yazmak. Bu hatalar tarayıcının sonraki gelen hiçbir CSS kodunu okumamasına neden olur.
• CSS Validator Kullanımı: W3C tarafından sunulan resmi CSS doğrulayıcı araçları vasıtasıyla yazılan tüm harici stil dosyaları taranır. Standart dışı kodlar ve tarayıcı uyumsuzlukları saptanarak kodlar hatasız hale getirilir.

➡️ BÖLÜM 28: Yararlı CSS Detayları (Specifics)

• CSS Entities (Varlıklar): Web sayfasında doğrudan klavyeyle yazılamayan özel sembollerin, telif hakkı işaretlerinin (\00A9 - ©) veya ikonların CSS content özniteliği içerisinden kodla çağrılmasıdır.
• CSS Birimleri (Units): Boyutlandırma yaparken kullanılan ölçü birimleridir.
• Mutlak Birimler: Sabittir, ekrana göre değişmez (px).
• Göreceli (Relative) Birimler: Ekran boyutuna veya font büyüklüğüne göre esner (em, rem, %, vw, vh). Mobil uyumlu responsive tasarımlar için göreceli birimlerin kullanılması elzemdir.