Web Teknolojilerine Giriş

İnternet ve Web Nedir?

İnternet, dünya genelinde bilgisayarları birbirine bağlayan devasa bir ağdır. Web (World Wide Web) ise internet üzerinde çalışan, birbirine bağlantılarla (hyperlink) bağlı belgeler sistemidir.

💡 Fark: İnternet altyapıdır (kablolar, sunucular, protokoller). Web ise internet üzerinde çalışan bir servistir — tıpkı e-posta veya FTP gibi.

İstemci-Sunucu Mimarisi

Web, istemci-sunucu (client-server) modeliyle çalışır:

İstemci (Client): Web tarayıcısı (Chrome, Firefox, Edge). Kullanıcının isteğini sunucuya gönderir.
Sunucu (Server): Web sitesinin dosyalarını barındıran bilgisayar. İsteğe karşılık HTML, CSS, JS dosyalarını gönderir.

Web Sayfası Nasıl Çalışır?

Kullanıcı tarayıcıya bir URL yazar (ör: www.kadirdondar.com)
Tarayıcı, DNS sunucusundan IP adresini öğrenir
Sunucuya HTTP isteği gönderilir
Sunucu HTML, CSS, JS dosyalarını gönderir
Tarayıcı bu dosyaları yorumlayıp sayfayı görüntüler

Web Teknolojileri

Teknoloji	Görevi	Benzetme
HTML	Sayfa yapısı ve içerik	Evin iskeleti / duvarları
CSS	Görünüm ve tasarım	Evin boyası / dekorasyonu
JavaScript	Etkileşim ve dinamiklik	Evin elektrik tesisatı

Geliştirici Araçları

Modern tarayıcılarda F12 tuşuyla açılan geliştirici araçları, web geliştirme için vazgeçilmezdir:

Elements: HTML yapısını inceleme ve düzenleme
Console: JavaScript kodlarını çalıştırma ve hata görme
Network: Sayfa yüklenirken yapılan istekleri izleme
Sources: Kaynak dosyaları görüntüleme

✅ Uygulama: Herhangi bir web sayfasında F12 tuşuna basın, Elements sekmesinde HTML yapısını inceleyin. Bir elemana sağ tıklayıp "İncele" seçeneğini deneyin.

Kod Editörü Kurulumu

Derslerimizde Visual Studio Code kullanacağız:

code.visualstudio.com adresinden indirin
"Live Server" eklentisini kurun (otomatik sayfa yenileme için)
"Prettier" eklentisini kurun (kod formatlama için)

🎯 Uygulama Soruları

İstemci ve sunucu arasındaki farkı kendi cümlelerinizle açıklayın
Bir web sayfasının görüntülenmesi için hangi adımlar izlenir?
HTML, CSS ve JavaScript'in görevlerini birer cümleyle açıklayın
F12 geliştirici araçlarını açıp herhangi bir web sitesinin HTML yapısını inceleyin

Web Geliştirme