Web nasıl çalışır?

Şimdiye kadar yazdığın bütün programlar terminalde çalıştı. Bu blokla sahne değişiyor: tarayıcıda açılan sayfalar yapacaksın. Önce adres çubuğuna bir adres yazıp Enter'a basınca perde arkasında olanları öğreneceksin. Dersin sonunda ilk web sayfanı (C:\kod\web-ilk) yazmış, kendi bilgisayarındaki bir sunucudan açmış ve geliştirici araçlarıyla içine bakmış olacaksın.

#İstemci ve sunucu

Bir web sayfası senin bilgisayarında değil, başka bir bilgisayarda durur: çoğu zaman bir veri merkezinde gece gündüz açık bekleyen bir makinede. Adresi yazınca tarayıcın o makineye "bu sayfayı bana ver" der, makine de sayfayı gönderir. Konuşmanın iki tarafı var: isteyen ve veren.

"Sunucu" kulağa özel bir donanım gibi gelse de sıradan bir programdır: bu derste kendi bilgisayarında birini çalıştıracak, Ders 27'de de kendin yazacaksın.

#Adres yazınca neler olur?

Adres çubuğuna xdd.baby/ders18 yazıp Enter'a bastığında, sayfa ekrana gelmeden önce beş şey sırayla olur. Hepsi çoğu zaman bir saniyeden kısa sürer.

1. Adı numaraya çevir. Bilgisayarlar birbirini adla değil numarayla bulur; tarayıcı önce xdd.baby'nin numarasını, yani IP adresini öğrenir. Bu işin adı DNS.
2. Bağlan. Tarayıcı o numaraya bir bağlantı açar. Adres https ile başlıyorsa bağlantı şifrelenir: aradaki kimse ne istediğini ve ne geldiğini okuyamaz. Şifresiz http sitelerde tarayıcı adres çubuğuna Güvenli değil (Not secure) yazar.
3. İstek gönder. Tarayıcı ne istediğini yazar: "/ders18 sayfasını ver."
4. Yanıtı al. Sunucu bir durum kodu (her şey yolundaysa 200) ve sayfanın HTML'ini gönderir.
5. Çiz. Tarayıcı HTML'i okur; içinde bir stil dosyasının, JavaScript dosyasının ya da resmin adı geçtikçe her biri için yeni bir istek gönderir ve parçalar geldikçe sayfayı ekrana çizer.

Beşinci adım önemli: bir sayfa tek istek değildir. Bu sayfayı açarken tarayıcın stil dosyası, yazı tipleri ve küçük resimler için de istek gönderdi; hepsini geliştirici araçlarında göreceksin.

#URL'nin parçaları

Adres çubuğuna yazdığın şeyin adı URL. Bir URL tek satırda hangi dille konuşulacağını, hangi bilgisayara gidileceğini ve orada hangi sayfanın istendiğini söyler. Parçalarını tanırsan adresleri de hata mesajlarını da rahat okursun.

Son satıra dikkat: # ile başlayan parça sunucuya hiç gönderilmez, tarayıcıda kalır. Bu sayfada dene: "Bu sayfada" listesinden bir başlığa tıkla; adresin sonuna #url-nin-parcalari gibi bir parça eklenir, sayfa kayar ama yeniden yüklenmez.

#JavaScript de adresleri parçalar

Ders 16'da kendi sınıflarını yazdın. JavaScript'in hazır sınıflarından biri URL: ona new ile bir adres verirsen adresi parçalarına ayırır. C:\kod\ogren klasöründe ders18.js dosyasını oluştur ve yaz:

1const adres = new URL("https://example.com/sampiyonlar/ahri?dil=tr#yetenekler")2console.log(adres.protocol)3console.log(adres.hostname)4console.log(adres.pathname)5console.log(adres.search)6console.log(adres.hash)

https:example.com/sampiyonlar/ahri?dil=tr#yetenekler

Her parça objenin bir alanı: protocol protokol (sonundaki iki nokta dahil), hostname alan adı, pathname yol, search sorgu, hash parça. Bütün alanları birden görmek için objenin kendisini yazdır:

1const adres = new URL("https://example.com/sampiyonlar/ahri?dil=tr#yetenekler")2console.log(adres)

URL {  href: 'https://example.com/sampiyonlar/ahri?dil=tr#yetenekler',  origin: 'https://example.com',  protocol: 'https:',  username: '',  password: '',  host: 'example.com',  hostname: 'example.com',  port: '',  pathname: '/sampiyonlar/ahri',  search: '?dil=tr',  searchParams: URLSearchParams { 'dil' => 'tr' },  hash: '#yetenekler'}

port: '' satırına bak: adreste port yazılmadığı için boş. Tanımadığın alanlara (origin, searchParams) şimdilik takılma. example.com tam da böyle örnekler için ayrılmış gerçek bir alan adıdır.

1const adres = new URL("xdd.baby/ders18")

node:internal/url:840      href = bindingUrl.parse(input, base, true);                        ^ TypeError: Invalid URL    at new URL (node:internal/url:840:25)    at Object.<anonymous> (C:\kod\ogren\ders18.js:1:15)    ...    at node:internal/main/run_main_module:33:47 {  code: 'ERR_INVALID_URL',  input: 'xdd.baby/ders18'} Node.js v24.20.0

#DNS: alan adından IP adresine

İnternete bağlı her cihazın bir numarası var: IP adresi, yani 76.76.21.21 gibi noktalarla ayrılmış dört sayı. Bilgisayarlar birbirini bu numarayla bulur, insanlar ise ad hatırlar: xdd.baby. Ad ile numara arasındaki çeviriyi DNS yapar.

#nslookup: rehbere kendin sor

DNS'e terminalden de sorabilirsin. VS Code'un terminaline (ya da bir PowerShell penceresine) yaz:

PS C:\kod> nslookup xdd.babyServer:  dns.googleAddress:  2001:4860:4860::8888 Non-authoritative answer:Name:    xdd.babyAddress:  76.76.21.21

• Server ve altındaki Address: soruyu cevaplayan DNS sunucusu. Bu ders yazılırken Google'ın DNS'iydi; sende büyük ihtimalle modemin görünür (çoğu evde UnKnown ve 192.168.1.1).
• Non-authoritative answer: "yetkili olmayan cevap", yani cevabı alan adının sahibi değil, hafızasında tutan aracı bir sunucu verdi. Normaldir.
• Name ve en alttaki Address: aradığın cevap. xdd.baby'nin numarası 76.76.21.21.

Bu çıktı, Windows görüntüleme dili Türkçe olan bir bilgisayarda alındı; nslookup yine İngilizce yazdı. Windows'u baştan Türkçe kurulmuş bazı bilgisayarlarda satır adları Türkçe çıkabilir; ad ve numaralar aynı yerde durur. Birden çok numara varsa Addresses altında sıralanır.

Sık hataBu siteye ulaşılamıyor / This site can’t be reached

Ne zaman çıkar? Olmayan bir alan adına gidince, örneğin adı yanlış yazınca: DNS bir numara bulamaz, tarayıcının bağlanacağı bir yer kalmaz. Denemek için adres çubuğuna başıyla birlikte https://xdd.bbay yaz. Yalnız xdd.bbay yazarsan tarayıcı sonunu tanımadığı bu adı arama sanıp arama sonuçlarını açabilir.

xdd.bbay

İngilizce tarayıcıda başlık This site can’t be reached, altındaki satır xdd.bbay’s server IP address could not be found. olur. ERR_NAME_NOT_RESOLVED "ad çözülemedi" demek; Chrome bazen yerine DNS_PROBE_FINISHED_NXDOMAIN yazar, anlamı aynı. nslookup da aynısını söyler:

PS C:\kod> nslookup xdd.bbayServer:  dns.googleAddress:  2001:4860:4860::8888 *** dns.google can't find xdd.bbay: Non-existent domain

Nasıl düzelir? Adres çubuğundaki adı harf harf oku. Ad doğruysa ve başka siteler de açılmıyorsa sorun internet bağlantında ya da DNS ayarlarındadır.

#HTTP: istek ve yanıta ilk bakış

Bağlantı açıldıktan sonra tarayıcı ile sunucunun konuştuğu dilin adı HTTP. Ders 15'te fetch ile Data Dragon'a istek gönderdiğinde de bu dili kullandın. Tarayıcı her sayfa için aynı konuşmayı yapar; konuşma metindir ve okunabilir:

İsteğin ilk satırı en önemlisi: GET /ders18. GET isteğin metodudur, yani türü: "bana ver" demektir; sayfa açmak da resim indirmek de GET'tir. (Sözcük aynı ama Ders 5'teki obje metotlarıyla ilgisi yok.)

Sondaki HTTP/1.1 konuşulan dilin sürümü. Altındaki satırlar başlıklardır (headers): Host hangi site (aynı IP adresinde birçok site durabilir), User-Agent hangi tarayıcı.

Yanıtın ilk satırında sürümden sonra durum kodu gelir; Ders 15'teki yanit.status buydu. En sık göreceklerin:

Yanıt başlıklarından biri bu derste işine yarayacak: Content-Type. Sunucu gönderdiği şeyin türünü burada söyler: text/html sayfa, text/css stil dosyası, application/json JSON. Sondaki charset=utf-8 metnin harf kodlamasıdır; Türkçe harflerin doğru görünmesi buna bağlı.

Boş satırdan sonra gövde gelir: sayfanın HTML'inin kendisi. Metotların, başlıkların ve durum kodlarının hepsini Ders 26'da göreceksin.

#Sayfanın üç dili: HTML, CSS, JavaScript

Sunucudan gelen sayfa üç dilde yazılır, her birinin ayrı işi var:

• HTML sayfada ne olduğunu söyler: bu bir başlık, bu bir paragraf, bu bir düğme.
• CSS bunların nasıl görüneceğini söyler: başlık altın sarısı, zemin koyu, düğmenin köşeleri yuvarlak.
• JavaScript sayfanın ne yapacağını söyler: düğmeye basınca altın artsın, liste süzülsün.

JavaScript'i zaten tanıyorsun: tarayıcının içinde de bir JavaScript motoru var, dil aynı. Değişen ortam: tarayıcıdaki JavaScript sayfaya dokunur ama diskindeki dosyaları okuyamaz; Node dosya okur ama ortada sayfa yoktur. Sayfayla konuşmayı Ders 22'de öğreneceksin.

#İlk HTML dosyan

Kendi sayfanı yazma sırası. Önce klasörünü hazırla:

Neden index.html? Bir sunucuya klasörün kendisi sorulunca (/), sunucu o klasördeki index.html'i gönderir. Sitelerin ana sayfasının dosya adı neredeyse her zaman budur.

Dosyaya şunu yaz. Kopyalama; parmakların etiketlerin yazımına alışsın:

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <title>İlk sayfam</title>6</head>7<body>8    <h1>Sihirdar Vadisi'ne hoş geldin</h1>9    <p>Bu sayfayı kendi elimle yazdım.</p>10    <p>Görünüm için CSS, davranış için JavaScript ekleyeceğim.</p>11</body>12</html>

< ile > arasındaki sözcüklere etiket (tag) denir. Çoğu etiket çift gelir: <h1> açar, eğik çizgili </h1> kapatır, arası içeriktir. Etiketleri Ders 19'da tek tek göreceksin; şimdilik iskeleti kalıp olarak yaz ve satırların işini bil:

VS Code dosyalarını zaten UTF-8 olarak kaydeder; sağ alttaki durum çubuğunda UTF-8 yazar. meta satırı bunu tarayıcıya da söyler. Yoksa ne olduğunu sık hatalarda göreceksin.

#Tarayıcıda açmak

Dosyayı kaydet (Ctrl+S). Sonra Dosya Gezgini'nde (File Explorer) C:\kod\web-ilk klasörüne git ve index.html'e çift tıkla. Varsayılan tarayıcın açılır:

Adres çubuğuna bak: file:///C:/kod/web-ilk/index.html. Tarayıcın baştaki file:/// yerine yalnız Dosya (File) yazısı gösteriyorsa adres çubuğuna tıkla, tamamı görünür.

Protokol bu sefer file: tarayıcı sayfayı bir sunucudan istemedi, doğrudan diskinden okudu. DNS yok, istek yok, yanıt yok. Sekmede de <title>'a yazdığın "İlk sayfam" görünür.

Şimdi <h1> içindeki yazıyı değiştir, kaydet ve tarayıcıda F5 ile yenile; yeni yazı gelir. Yaz, kaydet, yenile: web geliştirmenin nabzı bu döngüdür.

#Görünüm ve davranış ekle

Sayfan çalışıyor ama bembeyaz. Şimdi ona görünüm (CSS) ve davranış (JavaScript) ekleyeceksin; ikisi ayrı dosyalarda duracak, HTML onları adlarıyla çağıracak. web-ilk klasöründe stil.css adlı bir dosya oluştur:

1body {2    font-family: sans-serif;3    background-color: #0f1923;4    color: #f0e6d2;5}6 7h1 {8    color: #c8aa6e;9}

Her kural "hangi parça { özellik: değer; }" biçimindedir: body (sayfanın gövdesi) için yazı tipi ve renkler, h1 için başlık rengi; #0f1923 gibi değerler renk kodudur. CSS'i Ders 20'de öğreneceksin. Sonra uygulama.js:

1const takim = ["Ahri", "Garen", "Jinx", "Lux", "Teemo"]2console.log("Sayfa yüklendi")3console.log("Takımda " + takim.length + " şampiyon var")

PS C:\kod\web-ilk> node uygulama.jsSayfa yüklendiTakımda 5 şampiyon var

Şimdi index.html'i iki satırla bu dosyalara bağla ve son paragrafı da güncelle:

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <title>İlk sayfam</title>6    <link rel="stylesheet" href="stil.css">7</head>8<body>9    <h1>Sihirdar Vadisi'ne hoş geldin</h1>10    <p>Bu sayfayı kendi elimle yazdım.</p>11    <p>Görünüm için CSS, davranış için JavaScript ekledim.</p>12    <script src="uygulama.js"></script>13</body>14</html>

• <link rel="stylesheet" href="stil.css"> "bu sayfanın stil dosyası şu" der. href dosyanın adresidir; yalnız adını yazdığın için tarayıcı onu sayfanın yanında, aynı klasörde arar.
• <script src="uygulama.js"></script> "şu JavaScript dosyasını çalıştır" der. Sayfanın sonuna koyduk ki tarayıcı önce sayfayı çizsin, sonra kodu çalıştırsın; ayrıntısı Ders 22'de.

Kaydet ve tarayıcıda yenile:

JavaScript nerede? console.log sayfaya değil, tarayıcının Console bölümüne yazar. F12'ye bas ve açılan geliştirici araçlarında Console sekmesine tıkla (Türkçe tarayıcıda Konsol): Sayfa yüklendi ve Takımda 5 şampiyon var orada. Aynı dosya, aynı çıktı; bu sefer onu terminal değil tarayıcı çalıştırdı.

#Neden yerel sunucu?

Çift tıklayıp açmak şimdiye kadar işini gördü. Ama gerçek siteler sunucudan gelir ve file:// ile açılan sayfa bazı şeyleri yapamaz; şimdi birine çarpacaksın.

Takımı kodun içine yazmak yerine ayrı bir JSON dosyasından okumak istiyorsun. web-ilk klasöründe takim.json oluştur:

1["Ahri", "Garen", "Jinx", "Lux", "Teemo"]

uygulama.js'in içini sil ve dosyayı Ders 15'teki gibi fetch ile isteyen hâlini yaz:

1async function takimiYukle() {2    const yanit = await fetch("takim.json")3    const takim = await yanit.json()4    console.log("Takımda " + takim.length + " şampiyon var, ilki " + takim[0])5}6 7console.log("Sayfa yüklendi")8takimiYukle()

fetch'e yalnız dosyanın adını verdin; tarayıcı onu sayfanın adresine göre tamamlar (Node bunu yapamaz, bu kodu terminalde çalıştırma). Kaydet, file:// ile açtığın sayfayı yenile ve Console'a bak.

Sayfa yüklendiAccess to fetch at 'file:///C:/kod/web-ilk/takim.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.GET file:///C:/kod/web-ilk/takim.json net::ERR_FAILEDUncaught (in promise) TypeError: Failed to fetch    takimiYukle @ uygulama.js:2    (anonymous) @ uygulama.js:8

İki yol var: VS Code'un Live Server eklentisi ve terminalden npx serve. Birini seçmen yeter; çoğu kişi Live Server'ı kullanır.

#Live Server ile aç

Live Server bir VS Code eklentisi (extension). İki işi var: klasörünü küçük bir sunucuyla yayınlar ve sen kaydedince tarayıcıdaki sayfayı yeniler.

Arayüz değişmiş olabilir; düğmeler biraz farklıysa şu sözcükleri ara: Live Server, Ritwick Dey, Install, Go Live.

Sayfa aynı, adres farklı. Console'da bu sefer Takımda 5 şampiyon var, ilki Ahri satırı da var, çünkü takim.json artık HTTP ile istendi. Şimdi index.html'de başlığı değiştir ve kaydet: sayfa kendiliğinden yenilenir.

Bu, Şekil 18.3'ün alt satırındaki adres. 127.0.0.1 her bilgisayarda "bu bilgisayarın kendisi" demektir ve adı localhost'tur. Tarayıcı bu adres için DNS'e sormaz, istek bilgisayarından hiç çıkmaz; bu yüzden şifresiz http burada sorun değildir.

:5500 kısmı port. Bir bilgisayarda aynı anda birçok sunucu çalışabilir; port, isteğin hangisine gideceğini söyler. Gerçek sitelerde portu yazmazsın, çünkü https için 443, http için 80 varsayılır: Şekil 18.2'deki 76.76.21.21:443 buydu.

İşin bitince durum çubuğundaki Port : 5500 yazısına tıkla; sunucu kapanır ve sağ altta Server is now offline. yazar. 5500'ü başka bir program kullanıyorsa Live Server 5501'i dener ve bu yeni portu ayar olarak saklar; klasöründe .vscode\settings.json diye bir dosya belirirse sebebi budur. Hangi durumda olursa olsun adres çubuğundaki portu oku.

#Alternatif: npx serve

Live Server'ı kuramıyorsan ya da VS Code dışında çalışıyorsan tek komutla da sunucu açabilirsin. npx, npm'le gelen bir araçtır: bir paketi projene kurmadan indirip çalıştırır; buradaki paket serve. VS Code terminalinde, C:\kod\web-ilk klasöründeyken:

PS C:\kod\web-ilk> npx serveNeed to install the following packages:serve@14.2.6Ok to proceed? (y)    ┌──────────────────────────────────────────┐   │                                          │   │   Serving!                               │   │                                          │   │   - Local:    http://localhost:3000      │   │   - Network:  http://192.168.1.50:3000   │   │                                          │   │   Copied local address to clipboard!     │   │                                          │   └──────────────────────────────────────────┘  HTTP  11.10.2026 21:04:49 ::1 GET / HTTP  11.10.2026 21:04:49 ::1 Returned 200 in 21 ms HTTP  11.10.2026 21:04:49 ::1 GET /stil.css HTTP  11.10.2026 21:04:49 ::1 GET /uygulama.js HTTP  11.10.2026 21:04:49 ::1 Returned 200 in 3 ms HTTP  11.10.2026 21:04:49 ::1 Returned 200 in 2 ms HTTP  11.10.2026 21:04:49 ::1 GET /takim.json HTTP  11.10.2026 21:04:49 ::1 Returned 200 in 2 ms HTTP  11.10.2026 21:04:49 ::1 GET /favicon.ico HTTP  11.10.2026 21:04:49 ::1 Returned 404 in 6 ms

• İlk seferde npx paketi indirmek için izin ister; Enter'a basman yeter (parantezdeki y "evet" ve varsayılan cevap). Sürüm numarası sende daha yeni olabilir.
• Local: http://localhost:3000: sayfanın adresi, port bu sefer 3000. Adres panoya da kopyalandı. 3000'i başka bir program kullanıyorsa serve rastgele boş bir port seçer ve kutuya This port was picked because 3000 is in use. yazar; adresi hep kutudan oku. Network satırı aynı ağdaki başka bir cihazdan (telefonun gibi) açmak içindir ve sende farklıdır.
• Kutunun altındaki satırlar mutfağın sipariş fişleri: sunucu her isteği yazar. GET / klasörün kendisi (sunucu index.html'i gönderdi), ardından stil dosyası, JavaScript ve fetch'in istediği takim.json; hepsi 200. ::1, 127.0.0.1'in yeni (IPv6) yazımı. Tarih biçimi Windows'unun bölge ayarına göre değişir.
• favicon.ico için 404: Console'da da göreceğin sekme simgesi isteği. Zararsızdır.

Durdurmak için terminalde Ctrl+C'ye bas; INFO Gracefully shutting down. Please wait... yazar ve komut satırı geri gelir. İki fark daha: serve kendiliğinden yenilemez (F5 senden) ve adreslerden .html'i siler. /index.html yazarsan iki kez 301 ile önce /index'e, sonra /'ye yönlendirir.

#Geliştirici araçları: sayfanın içine bak

Ders 0'da F12 ile açılan bir bölme gördün; şimdi onu kullanacaksın. Sayfanı Live Server ile aç ve F12'ye bas (ya da sayfada sağ tıklayıp İncele / Inspect). Chrome, Edge ve Brave'de bu bölme hemen hemen aynıdır; aşağıdaki gerçek görüntüler Chrome'un temeli Chromium'dan.

Bölme pencerenin sağına ya da altına yerleşir; yerini sağ üstteki ⋮ menüsünde Dock side (Yerleşim tarafı) satırından değiştirirsin. Tarayıcın Türkçeyse sekmelerin adları da Türkçedir:

#Elements: canlı HTML

127.0.0.1:5500/index.html

Elements sayfanın HTML'ini ağaç olarak gösterir. Ağaçta bir satırın üstüne gelince sayfada o parça boyanır: görüntüde <h1> seçili, başlık mavi, çevresindeki boşluk turuncu. Tersi için sol üstteki ok simgesine, sonra sayfada bir parçaya tıkla. Sağdaki Styles seçili parçanın CSS kurallarını, geldikleri yerle (stil.css:7) gösterir.

Şunu dene: <h1> satırındaki yazıya çift tıkla, başka bir şey yaz ve Enter'a bas; sayfa anında değişir. F5'e basınca eski yazı geri gelir. Elements'teki değişiklik yalnız tarayıcının bellekteki kopyasındadır; dosyana da sunucuya da bir şey gitmez.

Ağacın sonundaki <!-- Code injected by live-server --> yorumunu ve <script>'i sen yazmadın: Live Server sayfayı gönderirken ekliyor, kaydettiğinde sayfayı yenileyen kod bu. Sayfayı npx serve ile açarsan görünmez.

#Console: mesajlar ve hatalar

Console'da üç tür satır görürsün:

• Senin mesajların: sağlarında geldikleri dosya ve satır yazar (uygulama.js:7); tıklarsan o satıra gidersin.
• Araçların mesajları: Live reload enabled. Live Server'ın "otomatik yenileme açık" demesi. Sayfayı yenileyince bir daha görünmeyebilir.
• Hatalar: kırmızı satırlar. Buradaki zararsız: tarayıcı sekmedeki küçük simgeyi (favicon) kendiliğinden istedi, sende favicon.ico yok, 404 geldi. Sağ üstteki kırmızı 1 hata sayısı.

En alttaki > işaretinin yanına JavaScript yazıp Enter'a basabilirsin: 2 + 3 yaz, 5 döner. Sayfan "çalışmıyor" gibi görünüyorsa ilk bakacağın yer burası.

#Network: bütün istekler

Network yalnız geliştirici araçları açıkken olan istekleri kaydeder; liste boşsa sayfayı yenile (F5). Her satır bir istek. Sütunlar (Türkçesi parantezde):

• Name (Ad) istenen dosya, Status (Durum) durum kodu, Type (Tür) dosyanın türü: document sayfanın kendisi.
• Initiator (Başlatan) isteği kimin gönderdiğini söyler: index.html:6 <link> satırı, index.html:12 <script> satırı, uygulama.js:2 de fetch. Tarayıcının HTML'de adı geçen her dosyayı ayrıca istediği burada görünür.
• Size (Boyut) ve Time (Zaman): gelen veri ve geçen süre.

ws satırı Live Server'ın tarayıcıyla açık tuttuğu bağlantı (101: "protokol değiştiriliyor"); kaydettiğinde "yenile" haberi buradan gelir.

Bir satıra tıklayınca ayrıntısı açılır: Headers (Başlıklar) HTTP bölümünde gördüğün parçaları, Response (Yanıt) sunucunun gönderdiği metni gösterir. Bunu bu sitede de dene: F12, Network, F5, en üstteki satır, Headers.

General (Genel) bölümünde Request URL (İstek URL'si), Request Method (İstek yöntemi) ve Status Code (Durum kodu) var. Remote Address (Uzak adres) 76.76.21.21:443: nslookup'ta bulduğun numara ve https'nin kapısı. Aşağıda :method, :path gibi iki noktalı başlık adları görürsen şaşırma; tarayıcın bu siteyle HTTP'nin yeni sürümü HTTP/2'yi konuşuyor.

1const takim = ["Ahri", "Garen", "Jinx", "Lux", "Teemo"]2console.log("Sayfa yüklendi")3console.log("Takımda " + takm.length + " şampiyon var")

Sayfa yüklendiC:\kod\web-ilk\uygulama.js:3console.log("Takımda " + takm.length + " şampiyon var")                         ^ ReferenceError: takm is not defined    at Object.<anonymous> (C:\kod\web-ilk\uygulama.js:3:26)    ... Node.js v24.20.0

Sayfa yüklendiUncaught ReferenceError: takm is not defined    at uygulama.js:3:26

6    <link rel="stylesheet" href="stil.ccs">

Refused to apply style from 'http://127.0.0.1:5500/stil.ccs' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

#Sık hatalar

Bu derste karşılaşabileceğin öteki hatalar; hepsi hata rehberinde de var.

Sık hataTürkçe harfler bozuk: hoÅŸ geldin

Ne zaman çıkar? <meta charset="utf-8"> satırı yoksa ve sunucu da kodlamayı söylemiyorsa. Tarayıcı tahmin eder ve eski bir Batı ya da Türkçe kodlama seçer: UTF-8'de iki bayt tutan her Türkçe harf iki garip işarete dönüşür, sekmedeki başlık da Ä°lk sayfam olur.

Bu hatayı her zaman göremezsin: çift tıklayınca Chrome UTF-8 olduğunu kendisi anlar; Live Server charset=UTF-8, serve de charset=utf-8 der (büyük ya da küçük harf fark etmez). Ama kodlamayı söylemeyen bir sunucuda harfler böyle bozulur; Ders 27'de kendi sunucunu yazarken bunu yaşayacaksın.

Nasıl düzelir? <head>'in ilk satırı <meta charset="utf-8"> olsun; tahmine bırakma. Dosyanın kendisi de UTF-8 kaydedilmiş olmalı: VS Code'un durum çubuğunda UTF-8 yazdığına bak.

8<body>9    <h1>Sihirdar Vadisi'ne tekrar hoş geldin</h1>

Sık hataDeğiştirdiğin dosya başka, açtığın dosya başka

Ne zaman çıkar? Bilgisayarında aynı adlı iki dosya varsa (indirilenler klasöründe bir index.html, C:\kod\web-ilk'te bir tane) ya da sunucuyu yanlış klasörde başlatınca. Örneğin npx serve'ü C:\kod'da çalıştırırsan sayfan yerine klasörlerin listesi gelir:

localhost:3000

Nasıl düzelir? Adres çubuğunu oku: file:/// ile açtıysan tam yol orada yazar, gerçekten C:/kod/web-ilk/index.html mi? Sunucu kullanıyorsan terminalin istemine bak; PS C:\kod> değil PS C:\kod\web-ilk> olmalı. Ctrl+C ile durdur, cd web-ilk ile klasöre gir, sunucuyu yeniden başlat.

Sık hataSayfa yerine dosya listesi açılıyor: index.html.txt

Ne zaman çıkar? Dosyayı Dosya Gezgini'nde Yeni → Metin Belgesi (New → Text Document) ile oluşturup adını index.html yapınca. Uzantılar gizliyse gerçek adı index.html.txt olur: Ders 0'daki uzantı tuzağı. Çift tıklayınca tarayıcı yerine Not Defteri açılır. Go Live'a basarsan Live Server açık dosyayı sayfa saymaz; tarayıcıyı http://127.0.0.1:5500/ adresiyle açar ve sayfan yerine klasördeki dosyaları listeler:

127.0.0.1:5500

Listede dosyanın gerçek adı görünüyor. Ona tıklarsan sayfa değil, kodun kendisi düz yazı olarak gelir. http://127.0.0.1:5500/index.html adresini elle açarsan Cannot GET /index.html yazan bir sayfa gelir: sunucuda o adda dosya yok. Terminalde ls de gerçeği söyler:

PS C:\kod\web-ilk> ls      Directory: C:\kod\web-ilk  Mode                 LastWriteTime         Length Name----                 -------------         ------ -----a----        11.10.2026     21:11            384 index.html.txt-a----        11.10.2026     21:11            124 stil.css-a----        11.10.2026     21:11            147 uygulama.js

Nasıl düzelir? VS Code'un dosya listesi adın tamamını gösterir: dosyaya sağ tıkla, Rename ile adını index.html yap. Dosya Gezgini'nde uzantıların görünür olduğundan emin ol.

#Görevler

Görevleri C:\kod\web-ilk ve C:\kod\ogren\ders18.js üzerinde yap. Önce kendin dene, takılırsan ipuçlarını sırayla aç. Çözüme en son bak.

https://magaza.example.com:8443/esyalar/kilic?renk=kirmizi&sayfa=2#yorumlar

1const adres = new URL("https://magaza.example.com:8443/esyalar/kilic?renk=kirmizi&sayfa=2#yorumlar")2console.log(adres.protocol)3console.log(adres.hostname)4console.log(adres.port)5console.log(adres.pathname)6console.log(adres.search)7console.log(adres.hash)

https:magaza.example.com8443/esyalar/kilic?renk=kirmizi&sayfa=2#yorumlar

1const kisa = new URL("https://xdd.baby")2console.log(kisa.pathname)3console.log(kisa.port === "")4const yerel = new URL("http://127.0.0.1:5500/index.html")5console.log(yerel.pathname, yerel.port)

/true/index.html 5500

PS C:\kod> nslookup github.comServer:  dns.googleAddress:  2001:4860:4860::8888 Non-authoritative answer:Name:    github.comAddress:  140.82.121.4 PS C:\kod> nslookup www.github.comServer:  dns.googleAddress:  2001:4860:4860::8888 Non-authoritative answer:Name:    github.comAddress:  140.82.121.3Aliases:  www.github.com PS C:\kod> nslookup githb.cmoServer:  dns.googleAddress:  2001:4860:4860::8888 *** dns.google can't find githb.cmo: Non-existent domain

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <title>Oyuncu profili</title>6    <link rel="stylesheet" href="stil.css">7</head>8<body>9    <h1>Deniz</h1>10    <p>Ana rolüm: orta koridor.</p>11    <p>En sevdiğim şampiyon: Ahri.</p>12</body>13</html>

6    <link rel="stylesheet" href="css/stil.css">

2    const yanit = await fetch("takimlar.json")

Refused to apply style from 'http://127.0.0.1:5500/css/stil.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Sayfa yüklendiGET http://127.0.0.1:5500/takimlar.json 404 (Not Found)Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

 HTTP  11.10.2026 21:04:49 ::1 GET / HTTP  11.10.2026 21:04:49 ::1 Returned 200 in 21 ms HTTP  11.10.2026 21:04:49 ::1 GET /stil.css HTTP  11.10.2026 21:04:49 ::1 GET /uygulama.js HTTP  11.10.2026 21:04:49 ::1 Returned 200 in 3 ms HTTP  11.10.2026 21:04:49 ::1 Returned 200 in 2 ms HTTP  11.10.2026 21:04:49 ::1 GET /takim.json HTTP  11.10.2026 21:04:49 ::1 Returned 200 in 2 ms HTTP  11.10.2026 21:04:49 ::1 GET /favicon.ico HTTP  11.10.2026 21:04:49 ::1 Returned 404 in 6 ms HTTP  11.10.2026 21:04:51 ::1 GET /takim.json HTTP  11.10.2026 21:04:51 ::1 Returned 304 in 2 ms HTTP  11.10.2026 21:04:53 ::1 GET /yok.html HTTP  11.10.2026 21:04:53 ::1 Returned 301 in 1 ms HTTP  11.10.2026 21:04:53 ::1 GET /yok HTTP  11.10.2026 21:04:53 ::1 Returned 404 in 2 ms HTTP  11.10.2026 21:04:55 ::1 GET /?sekme=ozet HTTP  11.10.2026 21:04:55 ::1 Returned 200 in 8 ms HTTP  11.10.2026 21:04:55 ::1 GET /stil.css HTTP  11.10.2026 21:04:55 ::1 Returned 304 in 1 ms HTTP  11.10.2026 21:04:55 ::1 GET /uygulama.js HTTP  11.10.2026 21:04:55 ::1 Returned 304 in 1 ms HTTP  11.10.2026 21:04:55 ::1 GET /takim.json HTTP  11.10.2026 21:04:55 ::1 Returned 304 in 2 ms

#Kendini sına

GET https://ddragon.leagueoflegends.cmo/api/versions.json net::ERR_NAME_NOT_RESOLVEDUncaught (in promise) TypeError: Failed to fetch    at surumleriYukle (uygulama.js:2:25)    at uygulama.js:7:1

#Kayıt noktası

web-ilk yeni bir proje klasörü; Git'in onu tanıması için orada bir kez git init gerekiyor.

Bir sonraki derste HTML'i derinlemesine öğreneceksin: başlıklar, bağlantılar, resimler, listeler, tablolar ve form elemanlarıyla anlamlı bir sayfa iskeleti kuracaksın.