Web’ de link konusu, web tasarımının en önemli konularından biridir. Herhangi bir web belgesinde bir sözcüğü ya da grafiği tıkladığınızda bir olay meydana gelmekte, karşınıza yeni bir sayfa ya da grafik çıkmaktadır. HyperText teriminin tam olarak karşılığı olan bu özellik sözcük ya da grafiklere <a> etiketini kullanarak HiperMetin özelliği kazandırmakla başarılıyor.
Web belgelerinizde bulunan linkler, aynı klasörde başka bir web sayfasını, başka bir web sitesini, bir grafiği, ya da bulunduğu sayfada başka bir bölümü işaret edebilir. Bir e-posta bağlantısı olabilir. Bunu sağlamak için kullanılan sadece <a> etiketi ve onun birkaç yüklemidir. Bağlantı türlerini üç ana başlık altında inceleyeceğiz. Biraz da web klasörleri hakkında, bağlantılarımızda nasıl kullanacağımıza dair bilgi vereceğiz.
Link konusunu ayrıntılarıyla işlemeye başlamadan önce, web’ de klasör yapısını ve bunlarla ilgili işlemleri gözden geçirelim. Öncelikle, sayfanızla aynı düzeydeki bir klasörde bulunan bir sayfaya bağlantı sağlamak için, sadece sayfanın adını kullanırsınız. Peki bağlantı sağlayacağınız sayfa başka bir klasördeyse…
Bu durumda, sayfanın bulunduğu klasörün adını da belirtmeniz gerekir. PC kullanıcıları kendi makinelerinde alt klasör adı yazarken ters bölü ( \ ) işaretini kullanırlar. C:\Belgelerim\Biyografi.doc gibi. Web klasörlerini ayırırken ise düz bölü ( / ) işareti kullanılır. Sizin web sayfalarınızın bulunduğu ana klasörün adı root‘ dur ve / işareti ile sembolize edilir. Alt klasörleri -örneğin grafiğimizde kullanılan “konular” klasörü- “/konular” şeklinde bildirilir. root’ ta yer alan bir web sayfasının içinde, “konular” klasöründeki “k_giris.html” adındaki dosyanın yolu (path) “/konular/k_giris.html” olur.
Konular klasöründeki “k_giris.html” sayfasında da, root klasördeki “index.html” sayfasına “Ana Sayfaya Dönüş” gibi bir bağlantı sağlayacaksınız. Üst klasörler .. (yan yana iki nokta) ile sembolize edilir. Bu durumda, “konular” klasöründe yer alan bir dosyaya göre, “root” klasöründeki “index.html” sayfasının yolu “../index.html” olacaktır. Doğal olarak, konular klasörünün alt klasörlerindeki (html, css) herhangi bir dosyaya göre “root” klasöründeki “index.html” dosyasının yolu “../../index.html” ; “konular” klasöründeki “k_giris.html” dosyasının yolu da “../k_giris.html” olur.
Biliyorum biraz karıştı, ama “konular” klasörünün altındaki “css” klasöründe bulunan bir sayfada, “root” klasörün başka bir alt klasöründeki (örneğin downloads klasörü) bir sayfanın yolu nasıl belirtilir, bunu da öğrenmek istemez misiniz?
“css” klasörünün bir üstü
“..“, onun bir üstü (root)
“../..” olduğuna göre, “../../downloads” diye bir yol kullanmamız
gerekir. Yani, “css”
klasörümüzdeki bir sayfaya göre, “downloads”
klasöründeki “d_giris.html”
dosyasının yolu;
“../../downloads/d_giris.html”
olacaktır.
Başka Sayfalara ve Sitelere Link Verme
Üzerinde çalıştığınız sayfanızla aynı klasörde yer alan “page2.html” adlı bir sayfaya link vermek istiyorsunuz, bu durumda <a> etiketini aşağıdaki gibi kullanacaksınız.
<a href=”page2.html”>Sayfa 2′ ye gitmek için tıklayın</a>
Yukarıdaki klasör bilgilerine göre birkaç link yazalım;
<a href=”konular/k_giris.html”>Konular Sayfası</a>
<a href=”konular/css/css_giris.html”>CSS Hakkında Bilgiler</a>
<a href=”../k_giris.html”>Konular Sayfasına Dönüş</a>
<a href=”../../index.html”>Ana Sayfaya Dönüş</a>
Başka bir siteye link vermek için yapmanız gereken, “href” yüklemine adresi vermektir.
<a href=”http://www.mev.org.tr”>Milli Eğitim Vakfı Web Sitesi</a>
Yukarıdaki gibi bir link, sizi o sitenin giriş sayfasına götürür. Aynı sitede, belirli bir sayfaya link vermek için;
<a href=”http://www.mev.org.tr/vakfin_amaci.html”>Milli Eğitim Vakfı’ nın Amacı</a>
gibi bir dizi kullanabilirsiniz. Adresin devamına sayfanın adını da ekleyince, bu link Milli Eğitim Vakfı’ nı sitesinde bizi giriş sayfası yerine bildirdiğimiz sayfaya götürür.
Aynı Sayfanın Başka Bölümlerine Bağlantı
İçerik olarak uzun bir sayfanız olabilir. Bu içerikte, çeşitli başlıklar haline çeşitli bölümler olabilir ve siz, ziyaretçilerinize bir bağlantıyı tıklayarak istedikleri başlık altındaki bölümlere gitme imkanı sağlayabilirsiniz.
Örneğin, “linkler” konusunun ele alındığı bu sayfanın başlangıç kısmında, maddeler halinde ele laınacak konular yer alıyor ve konu başlığını tıkladığınızda sayfada o konunun ele alındığı bölüm karşınıza çıkıyor.
Bu işlemi gerçekleştirmek için, <a> etiketinin “name” yüklemi kullanılıyor. Bir grafiği, başlığı ya da sözcüğü <a name=”……..”>Sözcük</a> şeklinde işaretliyorsunuz ve bağlantı vereceğiniz yerde “href” yüklemine bu adı veriyorsunuz. Örnek;
<a name="linkler">Linkler</a>
şeklinde işaretlediğiniz “Linkler” sözcüğü bir bookmark oluyor. Belgenizin başka bir bölümünde;
<a href="#linkler">Linkler Bölümüne Gitmek İçin Tıklayın</a>
şeklinde bir bağlantı sağladığınızda, bu bağlanı tıklanınca, belgenizde “linkler” adıyla işaretlenmiş olan bölüme gidiliyor.
Bu belgenin baş tarafındaki maddeler halindeki başlıkların ilki olan “Web Klasörleri” başlığının HTML kodları şu şekilde;
<li><a href="#Web Klasörleri">Web Klasörleri</a>
ve bu bağlantı tıklanınca karşımıza gelen “Web Klasörleri” konu başlığının HTML kodları da şöyle;
<h6><a name="Web Klasörleri">Web Klasörleri</a></h6>