Mutlak ve Göreli URL'ler
Mutlak ve göreli yollar arasındaki farkı öğrenin.
Mutlak ve Göreli URL'ler, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
URL Nedir?
Bir URL (Tekdüzen Kaynak Bulucu), web üzerindeki bir kaynağın tam adresidir.
Bir URL şu bölümlerden oluşur:
https://example.com:443/products/widget?color=red#reviews
│ │ │ │ │ │
│ │ │ │ │ └─ Fragment
│ │ │ │ └─ Query string
│ │ │ └─ Path
│ │ └─ Port
│ └─ Domain
└─ ProtocolMutlak URL'ler
Mutlak URL; protokolü, alan adını ve yolu içeren tam adrestir:
<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">
<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->Göreli URL'ler
Göreli URL, geçerli sayfanın konumuna göre belirlenir; protokol veya alan adı gerekmez:
<!-- Current page: https://example.com/blog/post.html -->
<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->
<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->
<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->Göreli URL'lerin Üç Türü
Göreli URL'lerin üç biçimi vardır:
<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>
<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>
<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">../ ile Gezinme --
Bir üst dizin düzeyine çıkmak için ../ kullanın:
<!-- File structure:
/
├── index.html
├── about.html
└── blog/
├── post1.html
└── post2.html
-->
<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a> <!-- same folder -->
<a href="../">Home</a> <!-- up one level -->
<a href="../about.html">About</a> <!-- up then file -->Mutlak ve Göreli URL'ler Ne Zaman Kullanılır?
Genel kural:
- Dış kaynaklar — her zaman mutlak URL kullanın:
https://... - CDN kaynakları — mutlak veya protokole göreli olabilir
- Dahili gezinme — köke göreli URL (
/page) en güvenli seçenektir - Aynı dizin — göreli URL (
page.html) kullanışlıdır
Köke Göreli URL Taşınabilirdir
Köke göreli URL'ler (/path), sayfa taşındığında da çalışmaya devam eder:
<!-- If this page moves from /blog/post.html to /articles/post.html -->
<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a> <!-- always → example.com/contact -->
<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a> <!-- different result in new location -->base Öğesi
<head> içindeki <base> öğesi, tüm göreli bağlantıların temel URL'sini belirler:
<head>
<base href="https://example.com/docs/">
</head>
<body>
<!-- This resolves to: https://example.com/docs/guide.html -->
<a href="guide.html">Guide</a>
</body>URL Kodlaması
URL'lerdeki özel karakterler yüzde kodlamasıyla kodlanmalıdır:
<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>
<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>
<!-- Common encodings:
space → %20
& → %26
= → %3D
# → %23
-->Kanonik URL'ler
Bir sayfaya birden fazla URL üzerinden ulaşılabiliyorsa, tercih edileni belirtmek için kanonik bir etiket kullanın:
<head>
<!-- Prevents duplicate content SEO penalty -->
<link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->URL İçin En İyi Uygulamalar
Şu URL kurallarına uyun:
- Yalnızca küçük harf kullanın
- Sözcükleri ayırmak için alt çizgi yerine kısa çizgi kullanın
- URL'leri kısa ve açıklayıcı tutun
- Özel karakterlerden kaçının — bunları kodlayın
- Dahili bağlantılar için köke göreli URL kullanın
Hızlı Kontrol
/blog/post.html konumunda bir dosyanız var ve /about.html konumuna bağlantı vermek istiyorsunuz. En güvenli göreli URL hangisidir?
Özet: Mutlak ve Göreli URL'ler
URL türlerinin özeti:
- Mutlak — protokolü ve alan adını içeren tam URL
- Köke göreli —
/ile başlar, alan adının köküne görelidir - Göreli — geçerli dosyanın konumuna görelidir
../— bir üst dizin düzeyine çıkar<base href>— tüm göreli URL'ler için temel URL'yi belirler
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 40
- Dersler
- 159
Sıkça Sorulan Sorular
“Mutlak ve Göreli URL'ler” dersi ücretsiz mi?
Evet — “Mutlak ve Göreli URL'ler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“Mutlak ve Göreli URL'ler” dersinde ne öğreneceğim?
Mutlak ve göreli yollar arasındaki farkı öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Mutlak ve Göreli URL'ler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- anchor Öğesi ve href Özniteliği
- Mutlak ve Göreli URL'ler
- Bağlantıları Yeni Sekmelerde Açma ve download Özniteliği
- Bölümlere Bağlantı ve Parça Tanımlayıcıları