1. Ünite: İnternet ve Web Programlamaya Giriş
İnternet, dünya genelindeki ağların birleşimidir; Web ise bu ağ üzerinde çalışan bir servistir. İstemci-sunucu mimarisi, webin temelidir; tarayıcı (istemci) bir talep gönderir, sunucu ise uygun içeriği (HTML, CSS, JS) yanıt olarak döner. Statik web sayfaları sadece bilgi sunarken, dinamik sayfalar kullanıcıyla etkileşime girerek veritabanı kullanır. Protokoller (HTTP/HTTPS), verinin güvenli ve standart bir şekilde taşınmasını sağlar. Web tasarımı için HTML içerik yapısını, CSS tasarımı, JavaScript ise işlevselliği temsil eder.
[Image: A global network map connecting computers and servers]
Örnek: Bir tarayıcıya “www.google.com” yazdığınızda, bilgisayarınız bir sunucuya istek gönderir ve sunucu size arama motoru sayfasını geri gönderir; bu süreç bir istemci-sunucu etkileşimidir.
2. Ünite: HTML Temelleri ve Metin Düzenleme
HTML, web sayfalarının iskeletini oluşturan bir işaretleme dilidir. Etiketler (tags) yardımıyla sayfa bölümleri tanımlanır. Temel yapı <html>, <head> ve <body> etiketlerinden oluşur. Metin düzenlemede başlıklar (h1-h6), paragraflar (p), kalın (b/strong) ve italik (i/em) gibi etiketler kullanılır. HTML5 ile birlikte gelen semantik etiketler (header, footer, section), sayfanın arama motorları tarafından daha iyi anlaşılmasını sağlar. Bu etiketler sayfanın tasarımını değil, sadece içeriğin anlamını ve hiyerarşisini belirler.
[Image: A code editor screen displaying basic HTML tags like h1 and p]
Örnek: Bir haber sitesinde ana başlık için <h1> etiketi kullanılırken, haberin içeriği <p> etiketleri arasına yazılarak metnin paragraf yapısı oluşturulur.
3. Ünite: Bağlantılar, Görseller ve Listeler
Webin en güçlü özelliği sayfalar arası geçiş sağlayan bağlantılardır (link). <a> etiketi ve “href” özniteliği ile başka sitelere veya sayfa içi bölümlere yönlendirme yapılır. Görseller <img> etiketiyle eklenir ve “alt” özniteliği ile görselin açıklaması girilir. Listeler ise verileri düzenli sunmak için kullanılır; <ul> sırasız (maddeli), <ol> ise sıralı (numaralı) listeleri temsil eder. Her liste öğesi <li> etiketiyle tanımlanır. Bu öğeler, web sayfalarında navigasyon menülerinin ve içerik gruplarının temelini oluşturur.
[Image: A web page layout showing a bulleted list and an embedded photograph]
Örnek: Bir e-ticaret sitesinde “Kategoriler” kısmının maddeler halinde (ul/li) listelenmesi ve ürün resimlerinin img etiketiyle ekrana getirilmesi bu ünitenin konusudur.
4. Ünite: Tablolar ve Form Yapıları
Tablolar, verileri satır (tr) ve sütun (td) bazlı düzenlemek için kullanılır; <th> etiketi başlık hücrelerini tanımlar. Formlar ise kullanıcıdan bilgi almak için web sayfalarının en önemli etkileşim araçlarıdır. <form> etiketi içinde <input> (metin, şifre, radyo butonu), <textarea> (uzun metin) ve <select> (açılır liste) gibi elemanlar yer alır. “action” özniteliği verinin nereye gönderileceğini, “method” (GET/POST) ise gönderim yöntemini belirler. Formlar; üyelik kayıtları, giriş ekranları ve anketler için vazgeçilmezdir.
[Image: A clean user registration form with name, email, and password fields]
Örnek: Bir iletişim sayfasında adınızı, e-postanızı yazdığınız kutucuklar ve mesajınızı yazdığınız geniş alan bir HTML form yapısıdır.
5. Ünite: CSS (Stil Sayfaları) Temelleri
CSS, HTML ile oluşturulan iskeletin görsel olarak şekillendirilmesini sağlar. Renkler, yazı tipleri, boyutlar ve hizalamalar CSS ile yönetilir. CSS kuralları; seçici, özellik ve değerden oluşur. Stil tanımları; HTML etiketi içine (satır içi), sayfa başına (<style>) veya harici bir .css dosyasına yazılabilir. Id (#) seçiciler tek bir öğeyi, sınıf (.) seçiciler ise birden fazla benzer öğeyi hedeflemek için kullanılır. CSS, kod tekrarını önleyerek tüm web sitesinin tasarımını tek bir dosyadan değiştirme imkanı sunar.
[Image: A split screen showing raw text on one side and styled colorful text on the other]
Örnek: Sayfadaki tüm paragrafların yazı rengini mavi yapmak için CSS dosyasında “p { color: blue; }” kuralının tanımlanması bu işleme örnektir.
6. Ünite: CSS Kutu Modeli ve Yerleşim
Her HTML öğesi CSS tarafından bir “kutu” olarak görülür. Kutu modeli; içerik (content), iç boşluk (padding), çerçeve (border) ve dış boşluk (margin) katmanlarından oluşur. Bu model, öğelerin sayfa üzerindeki genişliğini ve birbirine olan uzaklığını belirler. “Float” ve “position” özellikleri, öğelerin yan yana gelmesini veya sayfanın belirli bir noktasında sabitlenmesini sağlar. Blok seviyesindeki öğeler tüm satırı kaplarken, satır içi (inline) öğeler sadece içeriği kadar yer kaplar. Doğru yerleşim, profesyonel bir sayfa düzeni için temeldir.
[Image: A technical diagram illustrating content, padding, border, and margin layers]
Örnek: Bir düğme (button) etiketinin kenarlarını yuvarlatmak ve metnin düğmenin kenarlarına değmemesi için iç boşluk (padding) eklemek kutu modeli kullanımıdır.
7. Ünite: CSS ile İleri Seviye Düzenleme ve Menüler
Modern web tasarımlarında karmaşık yerleşimler için Flexbox ve Grid sistemleri kullanılır. Flexbox, öğelerin tek bir boyutta (satır veya sütun) kolayca hizalanmasını ve esnemesini sağlar. Navigasyon menüleri genellikle <ul> ve <li> etiketlerinin CSS ile maddediz hale getirilmesi ve yan yana dizilmesiyle oluşturulur. “Hover” gibi yalancı sınıflar (pseudo-classes) sayesinde, kullanıcının faresi bir öğenin üzerine geldiğinde renk değiştirmesi gibi etkileşimli efektler eklenir. Bu teknikler, kullanıcı deneyimini artıran modern arayüzlerin temelini oluşturur.
[Image: A modern website header with a horizontal navigation menu and dropdowns]
Örnek: Bir web sitesinin üst kısmındaki menü öğelerinin üzerine gelince renginin değişmesi veya açılır menülerin açılması CSS efektleri ve yerleşim kuralları ile yapılır.
8. Ünite: JavaScript Temelleri ve Değişkenler
JavaScript, web sayfalarına dinamizm ve etkileşim katan bir programlama dilidir. Tarayıcı tarafında çalışır. Temel yapı taşları değişkenler (var, let, const) ve veri türleridir (sayı, metin, mantıksal). Matematiksel operatörler ile hesaplamalar yapılabilir. “Alert”, “prompt” ve “console.log” komutları kullanıcıyla iletişim kurmak veya geliştiriciye bilgi vermek için kullanılır. JavaScript sayesinde sayfa yenilenmeden içerik değişebilir, formlar kontrol edilebilir ve animasyonlar yönetilebilir. Web uygulamalarının zekası JavaScript ile oluşturulur.
[Image: A laptop screen showing a JavaScript script calculating values]
Örnek: Bir web sitesine girdiğinizde karşınıza çıkan “Hoş geldin” mesajı içeren bir uyarı kutusu (alert), basit bir JavaScript kodunun sonucudur.
9. Ünite: JavaScript Karar Yapıları ve Döngüler
Programlama mantığında kararlar ve tekrarlar çok önemlidir. “If-else” yapısı, belirli bir koşul doğruysa bir işlemi, yanlışsa başka bir işlemi yapar. “Switch-case” yapısı ise birden çok seçenek arasından seçim yapmak için kullanılır. Döngüler (for, while), bir işlem bloğunun belirli bir sayıda veya bir koşul sağlandığı sürece tekrar edilmesini sağlar. Örneğin, bir veri listesini ekrana basmak veya bir işlemi 100 kere yapmak için döngüler kullanılır. Bu yapılar, kodun akışını ve mantıksal kararlarını kontrol eder.
Örnek: Kullanıcı giriş yaparken şifresi doğruysa ana sayfaya, yanlışsa “Hatalı Şifre” uyarısına yönlendirilmesi JavaScript “if-else” karar yapısıyla sağlanır.
10. Ünite: JavaScript Fonksiyonlar ve Diziler
Fonksiyonlar, bir işlemi gerçekleştiren ve tekrar tekrar kullanılabilen kod bloklarıdır. Bir kez tanımlanır ve ihtiyaç duyulduğunda çağrılır. Parametre alabilir ve bir değer döndürebilirler. Diziler (arrays) ise birden fazla veriyi tek bir değişken altında saklamaya yarar. Örneğin, bir sınıftaki öğrencilerin isimleri bir dizi içinde tutulabilir. Diziler üzerindeki döngüler sayesinde, binlerce veri saniyeler içinde işlenebilir. Fonksiyonlar ve diziler, kodun daha düzenli, modüler ve yönetilebilir olmasını sağlar.
[Image: A list of items grouped together representing a data array in code]
Örnek: Bir e-ticaret sitesinde sepetteki ürünlerin fiyatlarını toplayan bir fonksiyon yazılabilir ve ürünlerin listesi bir dizi (array) içerisinde tutulabilir.
11. Ünite: DOM (Belge Nesne Modeli) ve Olaylar
DOM, tarayıcının HTML sayfasını bir ağaç yapısı olarak görmesidir. JavaScript, DOM sayesinde sayfadaki herhangi bir etiketi seçebilir, silebilir veya değiştirebilir. “getElementById” veya “querySelector” gibi komutlarla öğelere ulaşılır. Olaylar (events) ise kullanıcının yaptığı tıklama (click), tuşa basma (keypress) veya farenin hareketi (mouseover) gibi eylemlerdir. “addEventListener” ile bu olaylar dinlenir ve gerçekleştiğinde belirli bir fonksiyonun çalışması sağlanır. DOM manipülasyonu, modern web sitelerindeki tüm interaktifliğin kalbidir.
[Image: A diagram of an HTML tree structure and a cursor clicking a button]
Örnek: Bir butona tıklandığında sayfanın arka plan renginin değişmesi, JavaScript’in bir “click” olayını yakalayıp DOM üzerinden stil değişikliği yapmasıyla gerçekleşir.
12. Ünite: JavaScript ile Form Kontrolü ve Doğrulama
Web formları aracılığıyla alınan verilerin sunucuya gönderilmeden önce tarayıcıda kontrol edilmesi, hem sunucu yükünü azaltır hem de kullanıcıya anlık geri bildirim verir. JavaScript ile bir alanın boş bırakılıp bırakılmadığı, e-posta adresinin doğru formatta olup olmadığı veya şifrelerin eşleşip eşleşmediği kontrol edilebilir. “Submit” olayı gerçekleşmeden önce yapılan bu doğrulamalar, hatalı veri girişini önler. Düzenli ifadeler (Regex) kullanılarak çok karmaşık veri desenleri (telefon numarası, IBAN vb.) bile kolayca taranabilir.
[Image: A red warning message appearing next to an empty input field on a form]
Örnek: Bir kayıt formunda “Gönder” butonuna bastığınızda, e-posta alanında “@” işareti yoksa sayfanın hata vermesi ve formun gönderilmemesi JavaScript doğrulamasıdır.
13. Ünite: HTML5 Multimedya ve Yeni Etiketler
HTML5, web sayfalarına ek yazılım (Flash vb.) gerekmeden video ve ses ekleme imkanı getirmiştir. <video> ve <audio> etiketleri, “controls” özniteliği ile oynatıcı arayüzünü otomatik sunar. <canvas> etiketi ise JavaScript ile 2D çizimler, grafikler ve oyunlar yapmak için kullanılan güçlü bir alandır. Ayrıca <figure> ve <figcaption> gibi yeni etiketler, görselleri ve açıklamalarını semantik olarak gruplandırır. HTML5 ile web, sadece metin tabanlı bir ortamdan tam donanımlı bir multimedya platformuna dönüşmüştür.
[Image: A web-based video player interface with play and volume icons]
Örnek: Bir web sitesine doğrudan MP4 formatında bir video yüklemek ve altına başlık eklemek için HTML5’in video ve figcaption etiketleri kullanılır.
14. Ünite: Responsive (Duyarlı) Tasarım Temelleri
Responsive tasarım, bir web sitesinin bilgisayar, tablet ve akıllı telefon gibi farklı ekran boyutlarında sorunsuz çalışmasını sağlar. Bunun temel aracı CSS “Media Queries” (Medya Sorguları) teknolojisidir. Ekran genişliğine göre farklı CSS kuralları uygulanır; örneğin geniş ekranda yan yana duran kutular, mobil ekranda alt alta dizilir. “Viewport” meta etiketi, sayfanın mobil cihazlara uyumlu ölçeklenmesini sağlar. Esnek ızgara yapıları ve yüzdesel genişlikler kullanılarak, tek bir web sitesiyle tüm cihazlarda mükemmel bir görünüm elde edilir.
[Image: A website layout displayed differently across a laptop, tablet, and smartphone]
Örnek: Bir haber sitesinin bilgisayarda 3 sütun halinde görünürken, telefondan açıldığında yazıların okunabilir olması için tek sütuna düşmesi duyarlı tasarım örneğidir.