Web geliştirme serüveninizde HTML’in temel yapı taşlarını, metinleri biçimlendirmeyi ve görseller eklemeyi öğrendiniz. Ancak bir web sitesini, sıradan ve birbirinden kopuk metin belgeleri olmaktan çıkarıp gerçek bir “Web” (Ağ) haline getiren en önemli teknoloji sayfalar arası bağlantılardır. Sitenizin ana sayfasından iletişim sayfasına, oradan da ürünler veya blog sayfasına geçiş yapılabilmesi, HTML bağlantıları (linkleri) sayesinde mümkün olur.
Bu kapsamlı rehberde, ilk defa web sitesi yapacak biri olarak sayfalarınızı birbirine nasıl bağlayacağınızı, klasör (dizin) yapıları arasında nasıl gezineceğinizi ve SEO (Arama Motoru Optimizasyonu) ile Erişilebilirlik kurallarına uygun navigasyon menülerini nasıl kurgulayacağınızı bol örneklerle, adım adım öğreneceksiniz.
1. Sayfalar Arası Bağlantının Temeli: <a> ve href
HTML’de tıklanabilir bir bağlantı (köprü) oluşturmak için İngilizce “anchor” (çapa) kelimesinin kısaltması olan <a> etiketi kullanılır. Ancak bu etiket tek başına kullanıldığında hiçbir işe yaramaz. Kullanıcının nereye yönlendirileceğini tarayıcıya bildirmek için zorunlu olan href (Hypertext Reference – Hipermetin Referansı) niteliğini kullanmanız gerekir.
En Basit Kullanım: Sitenizde index.html (Ana Sayfa) ve hakkimizda.html (Hakkımızda) adında iki dosya olduğunu varsayalım. Ana sayfadan Hakkımızda sayfasına gitmek için yazmanız gereken kod şudur:
<p>Şirketimiz hakkında daha fazla bilgi almak için <a href="hakkimizda.html">Hakkımızda Sayfamızı</a> ziyaret edin.</p>
Bu örnekte “Hakkımızda Sayfamızı” metni, tarayıcı tarafından varsayılan olarak mavi renkli ve altı çizili tıklanabilir bir metin olarak gösterilecektir.
2. URL Türlerini Anlamak: Mutlak (Absolute) ve Göreli (Relative) Yollar
Sayfalar arası bağlantı kurarken, web geliştirmeye yeni başlayanların en çok zorlandığı konu doğru dosya yolunu (URL) belirlemektir. İki temel bağlantı türü vardır:
Mutlak (Absolute) URL’ler: Bu bağlantı türü, hedef sayfanın tam internet adresini (protokol dâhil) içerir. Genellikle kendi sitenizden, dışarıdaki başka bir web sitesine bağlantı verirken kullanılır. Örnek: <a href="https://www.google.com">Google'a Git</a>
Göreli (Relative) URL’ler: Kendi web sitenizin içindeki sayfalar arasında gezinirken kullanmanız gereken ve en önemli olan bağlantı türüdür. Göreli yollarda https://www.siteniz.com gibi ana alan adını yazmanıza gerek yoktur. Sadece, bulunduğunuz sayfanın konumuna “göre” hedef dosyanın nerede olduğunu belirtirsiniz.
Bunun harika bir avantajı vardır: Sitenizi kendi bilgisayarınızda (localhost) tasarlarken kullandığınız göreli bağlantılar, sitenizi internete yüklediğinizde (canlı sunucuya taşıdığınızda) hiçbir kod değişikliği gerektirmeden çalışmaya devam eder.
Klasörler Arasında Göreli Bağlantı Örnekleri
Bilgisayarınızda aşağıdaki gibi bir dosya yapısı (klasör hiyerarşisi) kurduğunuzu düşünelim:
index.html(Ana Sayfa)iletisim.html(İletişim)- urunler (Bir klasör)
telefon.html(Ürün Sayfası)
Senaryo 1: Aynı Klasördeki Sayfaya Bağlantı index.html içinden iletisim.html sayfasına gitmek çok basittir, sadece dosya adını yazarsınız: <a href="iletisim.html">İletişim Bilgilerimiz</a>.
Senaryo 2: Alt Klasördeki Bir Sayfaya Bağlantı index.html içinden, “urunler” klasörünün içindeki telefon.html sayfasına gitmek için önce klasörün adını, sonra eğik çizgi (/), sonra da dosya adını yazarsınız: <a href="urunler/telefon.html">Telefonları İncele</a>.
Senaryo 3: Üst Klasöre Çıkıp Başka Sayfaya Bağlantı (En Çok Karıştırılan) Diyelim ki “urunler” klasörünün içindeki telefon.html sayfasını kodluyorsunuz ve kullanıcının Ana Sayfaya (index.html) dönmesini istiyorsunuz. Bulunduğunuz klasörden bir üst (ana) klasöre çıkmak için ../ (iki nokta ve eğik çizgi) kullanmalısınız. <a href="../index.html">Ana Sayfaya Dön</a>.
Eğer iki üst klasöre çıkmanız gerekseydi ../../ kullanırdınız. (Not: Web tasarımına yeni başlayanların en büyük hatası, href="C:/Kullanicilar/Masaustu/site/index.html" gibi bilgisayardaki fiziksel yolları yazmaktır. Bu yöntem internette kesinlikle çalışmaz, her zaman göreli yollar kullanılmalıdır.)
3. Başka Bir Sayfanın Belirli Bir Bölümüne Gitmek (Fragment Identifiers)
Kullanıcıyı hakkimizda.html sayfasına yönlendirirken, sayfanın en tepesine değil de doğrudan en alt kısımdaki “Vizyonumuz” bölümüne (id=”vizyon”) zıplatmak isteyebilirsiniz.
Bunu yapmak için HTML’deki “çapa (anchor)” mantığını ve diyez/kare (#) işaretini kullanırız. Hedeflenen URL’nin sonuna, gitmek istediğiniz elementin id değerini # ile eklersiniz.
Örnek Kullanım:
<a href="hakkimizda.html#vizyon">Vizyonumuzu Okuyun</a>
Bu linke tıklandığında, tarayıcı önce hakkimizda.html sayfasını yükler, ardından doğrudan <h2 id="vizyon">Vizyonumuz</h2> etiketinin olduğu konuma ekranı otomatik olarak kaydırır (scroll).
4. <base> Etiketi ile Varsayılan URL Belirleme
Sitenizdeki tüm göreli bağlantıların hangi “ana URL” üzerinden çalışacağını tek bir merkezden belirlemek isterseniz, sayfanızın <head> bölümüne <base> etiketi ekleyebilirsiniz.
Örneğin, sayfanızın <head> kısmına <base href="http://www.ornek.com/"> yazarsanız, sitenizdeki tüm göreli bağlantılar (örneğin href="iletisim.html") otomatik olarak bu temel adrese eklenerek http://www.ornek.com/iletisim.html olarak çalıştırılır. <base> etiketi boş bir elementtir (void element) ve <head> içerisinde yalnızca bir kez kullanılabilir.
5. Semantik Navigasyon (Menü) Kurgusu
Web sitenizin ana sayfalar arası bağlantılarını (Ana Sayfa, Hakkımızda, Ürünler, İletişim vb.) genellikle sayfanın en üstünde veya solunda bir menü olarak listelersiniz. Modern HTML5 standartlarında bu bağlantı grubunu anlamsız <div> etiketleri içine koymak yerine, <nav> (Navigation) etiketi ile sarmalamalısınız.
Arama motorları ve ekran okuyucu cihazlar <nav> etiketini gördüklerinde, bunun sitenin sayfalar arası ana gezinme menüsü olduğunu anlarlar. Doğru, semantik ve SEO uyumlu bir menü yapısı şu şekilde olmalıdır:
<nav>
<ul>
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="urunler/index.html">Ürünlerimiz</a></li>
<li><a href="iletisim.html">Bize Ulaşın</a></li>
</ul>
</nav>
6. Sayfalar Arası Bağlantılarda SEO ve Erişilebilirlik (A11y) Kuralları
Bağlantılarınızı oluştururken sadece teknik olarak çalışmalarını değil, aynı zamanda Google botları (SEO) ve görme engelli bireyler (Erişilebilirlik) için de optimize edilmelerini sağlamalısınız:
1. “Buraya Tıklayın” Hatasını Yapmayın: Link verdiğiniz metin (anchor text), kullanıcının nereye gideceğini net bir şekilde açıklamalıdır. Görme engellilerin kullandığı ekran okuyucular, sayfadaki tüm linkleri listeleyip okuyabilir. Eğer sitenizde art arda 5 tane “Buraya Tıklayın” veya “Devamı” linki varsa, bu kullanıcılar hangi linkin nereye gittiğini bilemez.
- Yanlış Kullanım: Hakkımızda sayfamıza gitmek için buraya tıklayın.
- Doğru Kullanım: Lütfen Hakkımızda Sayfamızı inceleyin.
2. Title (Başlık) Niteliği Kullanın: Kullanıcılar farenin imlecini bir bağlantının üzerinde beklettiğinde küçük bir açıklama kutucuğu (tooltip) çıkmasını istiyorsanız title niteliğini kullanabilirsiniz. Bu, bağlantının nereye gideceğine dair ekstra bir tavsiye veya ipucu sunar. Örnek: <a href="referanslar.html" title="Geçmiş müşteri projelerimizi inceleyin">Referanslarımız</a>
3. Site İçi Linklemenin SEO Gücü (Link Juice): Sayfalar arası bağlantı (Internal Linking) sadece kullanıcıların gezinmesi için değildir. Arama motoru botları, sitenizi tıpkı bir örümcek ağı gibi bu bağlantıları takip ederek tarar. Ana sayfanızdan, çok önemli bir blog yazınıza verdiğiniz doğrudan bir bağlantı, Google’a “Bu sayfa benim sitem için çok önemli” mesajını verir ve o sayfanın arama motorlarındaki değerini (sıralamasını) artırır.
Özetle
Bir web geliştiricisi olarak HTML dosyalarınızı birbirine ustaca bağlamayı öğrenmek, bağımsız sayfaları bütünsel bir uygulamaya dönüştürmenin kilit noktasıdır. Göreli yolların (relative paths) hiyerarşisini (aynı klasör, alt klasör, üst klasör ../) iyi kavramak, projelerinizi bilgisayarınızdan canlı sunuculara taşırken kırık bağlantılar (404 Not Found) yaşamanızı önleyecektir. Navigasyonlarınızı daima <nav> ve <ul> ile semantik olarak yapılandırıp, açıklayıcı bağlantı metinleri kullandığınızda, hem ziyaretçilerinize hem de arama motorlarına kusursuz bir deneyim sunmuş olursunuz. Mükemmel bir site mimarisi, sağlam sayfalar arası bağlantılarla inşa edilir!
