Web Nasıl Çalışır ve Geliştirme Ortamını Kurma

Hoş geldiniz! Web geliştirmeye yeni başlıyorsunuz ve bu kurs size sıfırdan bir web sitesi oluşturmayı öğretecek. Heyecan verici bir yolculuğa başlamak üzeresiniz!

Ders süresi: yaklaşık 10 dakika

Bu derste ne yapacağız?

Hedef: Web tarayıcılarının ve sunucuların nasıl çalıştığını öğrenmek, bir kod editörü yüklemek ve ilk HTML dosyamızı hazırlayarak başlamak.

Ön koşul: Windows, Mac veya Linux bilgisayarı, internet bağlantısı. Programlama deneyimi gerekmez.

Kavram

Web nasıl çalışır? Bir web sitesini ziyaret ettiğinizde arkasında basit fakat güzel bir işleyiş vardır:

Tarayıcı (Browser): Chrome, Firefox, Safari, Edge gibi programlar. İnternet sitelerini görmenizi sağlar.
Sunucu (Server): Bir bilgisayar, web sitesi dosyalarını depolar ve talep geldiğinde gönderir.
HTML: Web sayfalarının iskeletini oluşturan dildir. Metin, başlık, resim, bağlantı gibi öğeleri tanımlar.
İnternet: Tarayıcı ile sunucu arasındaki bağlantı yoludur.

Günlük benzetme: Bir lokanta düşünün. Müşteri (tarayıcı) siparişini verir, garson (İnternet) siparişi mutfağa (sunucu) iletir, mutfak yemeği hazırlar, garson yemeği müşteriye getirir. Müşteri yemeği (web sayfasını) görüp tüketir. İşte web de böyle çalışır!

Adım adım uygulama

Adım 1: Kod Editörü Yükleme (VS Code)

İnternet tarayıcınızda code.visualstudio.com adresine gidin.
Download düğmesine tıklayın ve bilgisayarınız için uygun sürümü seçin (Windows, Mac veya Linux).
İndirilen dosyayı (örneğin VSCodeUserSetup-x64-*.exe) çift tıklayarak açın.
Kurulum sihirbazında I accept the agreement kutusunu işaretleyin.
Next (İleri) düğmesine tıklayarak ilerleyin.
Kurulum bitince Finish (Bitir) düğmesine tıklayın. VS Code açılacak.

Adım 2: Proje Klasörü Oluşturma

Masaüstüne sağ tıklayın, New (Yeni) menüsüne gidin, Folder (Klasör) seçin.
Klasörü ilk-web-sitem adıyla adlandırın.
Bu klasörü açın (çift tıklayarak) ve içinde boş bir alan sağ tıklayın.
Open with Code seçeneğini arayın ve tıklayın (VS Code yüklüyse bu seçenek çıkacak).
VS Code açılır ve sol tarafta klasör dosyaları görülür.

Adım 3: İlk HTML Dosyası Oluşturma

VS Code'da sol taraftaki dosya simgesine tıklayın (ilk simge).
Klasör adının yanında New File (Yeni Dosya) simgesine tıklayın.
Dosyayı index.html adıyla adlandırın (bu, web sunucularının açacağı varsayılan dosya adıdır).
Editörün ortasında boş alana, temel HTML yapısını yazacaksınız. Yazacağınız HTML şu öğeleri içermeli: DOCTYPE bilgileri, html etiketi, head bölümü (dil, karakter kodlaması, sayfa başlığı), body bölümü (h1 etiketi ile Merhaba Dünya başlığı, p etiketi ile Bu benim ilk web sayfam yazısı).
Ctrl + S (veya Mac'te Command + S) tuşlarıyla dosyayı kaydedin.
Windows Explorer'da klasöre gidip index.html dosyasına sağ tıklayın, Open with seçin, Chrome veya Firefox tarayıcısını seçin.
Tarayıcı açılır ve Merhaba Dünya! başlığını ekranda göreceksiniz. Tebrikler, ilk web siteniz hazır!

Sık karşılaşılan sorunlar

Sorun	Nedeni	Çözüm
VS Code kurulamıyor veya açılmıyor	Kurulum dosyası hatalı veya uyumsuz	İndirme işlemini yeniden başlatın. İnternet bağlantınızı kontrol edin. Bilgisayarı yeniden başlatmayı deneyin.
HTML dosyası açılmıyor	Dosya uzantısı yanlış (.txt olmuş olabilir)	Dosya adının tam olarak index.html olduğunu doğrulayın. Sağ tıklayıp Rename seçin, adını düzeltin.
Tarayıcıda sayfa boş görülüyor veya hata alıyorum	Dosya kaydedilmemiş veya yanlış kodlama	VS Code'de Ctrl + S ile dosyayı kaydedin. Tarayıcıda F5 tuşu ile sayfayı yenileyin.
Yazılar Türkçe karakterleri göstermemiyor	Karakter kodlaması UTF-8 değil	VS Code sağ alt köşesinde kodlamayı gösteren yazıya tıklayın, UTF-8 seçin.

Mini görev

Sizin göreviniz: Oluşturduğunuz index.html dosyasında, Bu benim ilk web sayfam yazısını silip yerine kendi cümlenizi yazın. Örneğin: Benim adım Ayşe ve bu benim ilk web sitelerim! veya Web geliştirme öğreniyorum.

Kontrol listesi:

VS Code'da index.html dosyasını açtınız mı?
Yazı kısmını bulup sildiniz mi?
Kendi cümlenizi yazdınız mı?
Dosyayı Ctrl + S ile kaydetdiniz mi?
Tarayıcıda F5 ile sayfayı yeniledininiz mi?
Yeni yazınız ekranda görülüyor mu?

Kendini sına

Soru 1: Web sitelerini görüntülemek için hangi yazılımı kullanırız?

Soru 2: HTML dosyasının doğru dosya uzantısı nedir?

Soru 3: Tarayıcı sekmesinde görünen sayfa adını belirleyen HTML etiketi hangisidir?

Soru 4: Web sitesi dosyalarını depolayan ve talep geldiğinde gönderen bilgisayara ne denir?

Soru 5: VS Code'da dosyayı kaydetmek için hangi tuş kombinasyonunu kullanırız?

Cevaplar

1. Cevap: Tarayıcı (Browser): Chrome, Firefox, Safari, Edge gibi programlar.

2. Cevap: .html uzantısı (tam dosya adı örneği: index.html, anasayfa.html, hakkimda.html vb.)

3. Cevap: title etiketi (HTML'in head bölümünde yer alır).

4. Cevap: Sunucu (Server). İnternet üzerinde çalışan bir bilgisayardır.

5. Cevap: Windows ve Linux'ta: Ctrl + S. Mac'te: Command + S.

Bu dersi kayıt olmadan izleyebilirsin. İlerlemeni kaydetmek, sertifika almak ve puan tablosuna girmek için ücretsiz üye ol: Kayıt Ol