HTML Bağlantıları

URL kodlama, özel karakterlerin bir adresin içinde nasıl taşındığını açıkladı. Bu oturum, bu adresleri kullanan günlük HTML aracını kurar: href ile anchor öğesi a. Bağlantılar, ziyaretçilerin sayfalarınız arasında ve geniş ağa nasıl geçtiğidir. Net hedefler ve net tıklanabilir metin, doğru işaretleme kadar önemlidir.

Bağlantı nedir

Köprü, etkinleştirildiğinde bir yere giden bir kontroldür. HTML’de tıklanabilir içeriği — genelde metin, bazen bir görsel — <a>...</a> içine sarar ve href’i hedefe ayarlarsınız. href olmadan normal bir gezinme bağlantınız yoktur. Tarayıcı bağlantıları varsayılan olarak stillendirir (sıkça altı çizili ve renkli), ama önemli olan hedef ve sözcük seçimidir.

Doğrudan yanıt

<a href="URL">tıklanabilir metin</a> yazın. href https://www.example.com gibi tam bir web adresi (mutlak) veya sitenizdeki başka bir dosyaya about.html gibi bir yol (göreli) olabilir. Ziyaretçiler etiketler arasındaki içeriğe tıklar. Hedefi tanımlayan ifadeleri tercih edin — “Bu site hakkında” — “buraya tıklayın” gibi boş kalıplar yerine.

Mutlak bağlantılar

Mutlak URL’ler bir şema (https:// veya http://) ve genellikle bir host içerir. Bunları dış siteler için veya gerçekten geçerli klasöre bağlı olmayan tam bir adrese ihtiyaç duyduğunuzda kullanın.

Mutlak örneği okumak

• href https:// ile başlayan tam hedefi tutar
• Visit Example sözcükleri kullanıcının görüp etkinleştirdiği metindir
• Host veya şemadaki yazım hataları, HTML etiketleri geçerli olsa bile geziyi bozar
• Mutlak bağlantılar yine dürüst, betimleyici metinden yararlanır

Kendi sitenizde göreli bağlantılar

Göreli URL’ler, geçerli sayfanın konumuna göre dosyalara işaret eder. Alan adınızı tekrarlamadan index.html’i about.html’e bağlamanın günlük yoludur. File Paths becerileri geçerlidir: yanlış klasörler sessiz 404 hataları üretir.

İşe yarayan göreli alışkanlıklar

• İlgili sayfaları net bir klasör yapısında tutun
• Boşluksuz, tireli dosya adlarını tercih edin
• Her iki yönü de test edin: ana → about ve about → ana
• Göreli bağlantıları güncellemeden bir HTML dosyasını taşımanın gezinmeyi bozduğunu unutmayın

Bağlantı metni süs değil, içeriktir

Ekran okuyucu kullanıcıları çoğu zaman çevreleyen paragrafı duymadan bağlantı listesinde atlar. On kez tekrarlanan “buraya tıklayın” ve “daha fazla oku” anlamsızlaşır. Hedefi adlandırın. Dostça kalabilirsiniz — sadece spesifik olun.

Mutlak mı göreli mi — işe göre seçin

• Kontrol etmediğiniz dış site → mutlak https://…
• Projenizdeki başka bir sayfa → mümkünse göreli yol
• Aynı site bağlantıları mutlak yazılsa da çalışır, ama göreli bağlantılar alan adını değiştirdiğinizde veya dosyaları yerel açtığınızda taşınabilir kalır
  Sonraki oturumlar bağlantılarda title, yer imleri (#) ve e-posta bağlantılarını işler; önce a + href’i ustalaştırın.

Kırık bağlantılar ve 404’ler

href eksik bir dosyaya veya yanlış yazılmış bir hosta işaret ederse tarayıcı bir hata sayfasına gider (sıkça HTTP 404). Bağlantının etrafındaki HTML yine mükemmel görünebilir. Favicon ve stil sayfası yollarını doğruladığınız gibi yolları da doğrulayın: yazım, klasörler ve hedef dosyanın kaydedilip kaydedilmediği.

Editörünüzde pratik

1. Aynı klasörde index.html ve about.html oluşturun.
2. Ana sayfada betimleyici metinle about.html’e göreli bir bağlantı ekleyin.
3. About sayfasında index.html’e geri göreli bir bağlantı ekleyin.
4. Güvendiğiniz bir dış siteye bir mutlak bağlantı ekleyin.
5. Tarayıcıda her bağlantıyı izleyin; sonra bilerek bir göreli yolu bozun, hatayı gözlemleyin ve düzeltin.
6. Herhangi bir “buraya tıklayın” metnini hedef adıyla yeniden yazın.

Kolay hatalar

• href’i unutmak — metin gerçek bir köprü olmaz
• Her hedef için “buraya tıklayın” veya “bağlantı” kullanmak
• Dosyaları klasörler arasında taşıdıktan sonra kırık göreli yollar
• Dış URL’lerde https:// veya alan adı yazım hataları
• Dosya adlarına boşluk koyup göreli bağlantıların neden başarısız olduğunu merak etmek
• Etkileşimli içeriği dikkatsizce iç içe koymak (başlangıç bağlantılarını basit tutun: a içinde metin)

Özet

• Bağlantılar href hedefiyle a öğesini kullanır
• Mutlak URL’ler https:// gibi bir şema içerir
• Göreli URL’ler sitenizdeki diğer dosyalara işaret eder
• Herkes için — yardımcı teknolojiler dahil — net, betimleyici bağlantı metni yazın
• Kırık yollar, etiketler geçerli görünse bile gezinme anında başarısız olur