Merhaba,

Bu yazımızda web sayfalarımızı birleştirip bir web sitesi haline getiren, sayfa içerisinde gezinmeyi kolaylaştıran ve farklı içeriklere yönlendirme yapılmasını sağlayan bağlantılardan bahsediyoruz.

Web, birbirleri ile bağlantılı belgelerden oluşan bir bilgi ağı olarak tasarlandığı için, linkler (bağlantılar) HTML’de gereklidir. HTML’de linkleri anchor (çapa) anlamına gelen <a> etiketi ile kullanıyoruz.  Bu etiket içerisinde kullandığımız href özelliği ile de nereye bağlantı kuracağımızı belirtiyoruz.

Kullanımı:

<p>İnternette bir arama yapmak için <a href="https://www.google.com">Google</a> kullanırız.</p>

Görünümü:

İnternette bir arama yapmak için Google kullanırız.

Linkler web sitesinin birincil etkileşim aracıdır. Bir sayfadan başka bir sayfaya oluşturulan linklere tıklanarak ulaşılır. Linklerin 3 farklı tipte yönlendirmesi olabilir:

anchor hedefleri – ekranı aynı sayfanın belirli farklı bir bölümüne kaydırmak için

relative URL – aynı web sitesi içerisindeki farklı bir sayfaya ulaşmak için

absolute URL – genellikle farklı bir web sitesine yönlendirme yapmak için kullanılır

Anchor Hedefleri

Bu kullanım tipinde tarayıcıda görüntülenen web sayfası değişmez. Aynı sayfa içerisinde tanımladığımız farklı bir bölüme gider. Bu yönlendirmeyi yapmak için öncelikle sayfa içerisindeki bir html etiketine id tanımlamamız lazım. Daha sonra sayfanın farklı bir bölümüne de <a> etiketi oluşturup href özelliğine # kullanarak o id’ye yönlendirme yapmamız gerekiyor.

Örnek olarak, <a href="#footer">Sayfanın Altına Git</a> şeklinde bir yönlendirme kullanıp, tıklandığında sayfanın en alt kısmına gitmesine istiyoruz. O halde sayfanın en alt kısmında kullandığımız bir alana <div id="footer"> gibi bir tanımlama yapmamız gerekir. Tıklandığı zaman bu div etiketinin bulunduğu bölüme sayfamız kayacaktır.

Relative URL

Web sitesinin farklı web sayfalarının birleşiminden oluştuğunu biliyoruz. Eğer aynı web sitesi içerisindeki farklı bir sayfaya yönlendirme yapmak istiyorsak Relative URL tipini kullanabiliriz.

Örneklemek gerekirse: Anasayfa, Hakkımızda ve İletişim olmak üzere 3 sayfadan oluşan web sitemiz olsun. Bu 3 sayfa için hazırladığımız dosyaları anasayfa.html , hakkimizda.html ve iletisim.html şeklinde adlandırdık. Bu 3 dosyamızı da aynı klasör içinde tutuyoruz. Hepsi aynı klasörün içinde oluğu için, anasayfadan hakkımızda sayfasına yönlendirme yapmak için yalnızca dosya adını yani hakkimizda.html yazmamız yeterlidir. href özelliği içerisinde yazdığımız bu dosya adını otomatik olarak hangi sayfada tıkladıysak kendi bulunduğu dizinde arayacaktır. Aynı dizinde bulunan hakkımızda dosyamızı ulaşıp bize onu açacaktır.

Kullanımı:

<p>Hakkımızda sayfasına gitmek için <a href="#hakkimizda.html">buraya tıklayabilirsiniz</a>. </p>

Görünümü:

Hakkımızda sayfasına gitmek için buraya tıklayabilirsiniz.

 Bilgi: Web site dosyalarınız aynı şu anda sizin kullandığınız gibi bilgisayarlarda tutulur, web siteleri bu bilgisayarlar üzerinden yayına verilir. Bu bilgisayarlara sunucu (server) denir çünkü bu bilgisayarların görevi web sitelerini barındırmaktır. Fakat kullandığınız bilgisayarlar gibi içerilerinde dosyalar ve klasörler bulundururlar.

Absolute URL

Web sitenizin hakkımızda sayfasını bir arkadaşınıza göndermek istediğinizde ona hakkimizda.html adresine gir demeyiz. Bu relative URL tipi yalnızca aynı klasörde, aynı bilgisayarda veya aynı alan adında (domain) kullanıldığında çalışır. Dolayısı ile arkadaşınıza göndermek istediğiniz zaman aşağıdaki gibi alan adı ile birlikte dosya adını yazarsınız:

https://oktetik.com/hakkimizda.html

(Bu şu anda çalışır bir adres değil sadece bir kullanım örneği)

URL (Uniform Resource Loader) 3 parçadan oluşur:

Protokol: https://

Domain (Alan Adı): oktetik.com

Dosya Yolu: hakkimizda.html

Bu örnekte yazdığımız absolute URL kendi kendine yeterlidir: link olarak nerede kullandığınız fark etmez, doğru protokol ile doğru alan adındaki doğru dosyaya ulaşılması için gerekli tüm bilgileri içerir.

Kendi web sayfanızda başka bir web sitesine yönlendirme yapmak için absolute URL kullanırsınız.

<p>Paylaşımlarımı kaçırmamak için beni<a href="https://instagram.com/oktetikk">Instagram Hesabımdan</a> takip edebilirsiniz!</p>

Görünümü:

Paylaşımlarımı kaçırmamak için beni Instagram Hesabımdan takip edebilirsiniz!

Linklerimi Oluştururken Hangisini Kullanmalıyım?

Doğru yazıldıktan sonra ve dosyaların yerlerinde hata yapılmadığı sürece iki kullanım tipi de uygundur. Eğer Relative URL kullanıyorsanız web site adresinizi değiştirdiğinizde (örnek olarak bilgisayarınızdan sunucuya yükledikten sonra) URLleri tek tek değiştirmek zorunda kalmazsınız. Bu kullanımda yalnızca html dosyalarının aynı klasörde bulunması yeterlidir.