[ Ana Sayfa ]

[ Web Dersleri ] --> [ HTML Dersleri ]

HTML Dersleri

HTML de Link Kullanımı

HTML'de LİNK VERME VE KULLANIMI

İşte geldik en önemli HTML konularımızdan birisine. Link Verme. Bu dersimizde, bir imaja bir texte, hatta bir harfe link vermeyi ve uygulamasını göreceğiz. Hatta size dünyada fazla kimsenin bilmediği ve kullanmadığı öyle bir kod vereceğim ki şaşıracaksınız.

Ne mi? Hemen açıklayayayım. Hani bir linke tıkladığınızda, linki tutan imaj veya textte beyaz bir çizgi kalır ve görünümü gerçekten iğrençleştirir. Hatta eğer bir de Frame'de kullanıyorsanız yandınız.

Çünkü o zaman, ziyaretçi bir linke tıkladığı zaman, o iz çıkacaktır ve başka bir yere tıklamadan da sayfa değişse bile o iz kalacaktır. Eğer başka bir linke tıklarsa bu sefer öbürü kaybolacak ama yeni tıklanan linkte bu sorun yaşanacaktır. Vesaire vesaire. İşte bu çizgiyi ortadan kaldıran kodu da alacaksınız..

Hadi bakalım başlayalım...Gördüğünüz gibi linke tıkladığım zaman bir çizgi beliriyor. İşte bu çizgiyi ortadan kaldıracağız. Ve linke tıklandığı zaman artık böyle bir çizgi hiç çıkamıyacak...Önce bir texte nasıl link vereceğimizi görerek başlayalım.

Hadi buyurun bakalım Meşhur Editörümüz, Sadık arkadaşımız Notepad'e...

<a href="Dersler.asp">Ders Sayfasına Gitmek İçin Tıklayınız..."</a>

İşte gördüğünüz gibi bir texte link vermek bu kadar kolay. Şimdi isterseniz bir de imaja nasıl link vereceğimizi inceleyelim.

<a href="Dersler.asp"><IMG SRC="Ders.jpg" WIDTH="125" HEIGHT="65" BORDER="0"></a>

İşte imajımıza da link vermek oldukça kolay. Yalnız siz siz olun Border="0" kullanmayı unutmayın. Yoksa dediğim gibi,imajlarınızın etrafında mavi bir çerçeve çıkacaktır. Ve eğer böyle bir şey istemiyorsanız sizi deliye çevirecektir...

Şimdi de A yani Anchor Etiketimizin Sayfa içinde ilişkilendirilmesini inceleyeceğiz... Belki diyeceksiniz ki bu da ne demek oluyor şimdi. Hemen hatırlayacaksınız. Belki çoğunuz web sayfalarında görmüşsünüzdür.

Sayfanın Başına Git, Sayfanın En Altına İn, Ya da Belli bir isimdir işte. Mesela X Ürününü görmek için tıklayın der ve tıkladığınız zaman hooop sizi sayfanın o isimle ilişkilendirilmiş kısmına indiriverir bir anda. İşte bu özelliğimiz Anchor etiketinin Name özelliğidir...

Şimdi hemen örnek yaparak kullanımını inceleyelim...

Bu özelliği kullanmak için önce istediğimiz bir yere, daha doğrusu linke tıkladığımız zaman, ziyaretçiyi yönlendireceğimiz yere bir Name özelliği ekliyoruz. Mesela şöyle bir sayfa düşünün. Bir kitap tanıtıyorsunuz. Sayfanızın en başında bir link var ve bu linkte de kitabınızın tanıtımı olduğu yazıyor. Kitap ta sayfanın en altında.

O zaman önce kitabın olduğu yere yani sayfanın en altına inip (artık kitabın tanıtımı neredeyse) orada bir Name etiketi tanımlamamız gerekir. Çünkü üstteki linke tıklandığı zaman, bu Name'e gelinecek...

<a name="KitapTanitimi">Kitabımız</a>

Bu ismi tanımladıktan sonra artık sayfanın başına çıkıp bu isme link verebiliriz. Hadi bakalım, linkimizi de verelim ve bu dersi de tamamlayalım.

<a href="#KitapTanitimi">Kitabın Tanıtımına Git</a>

İşte bu kadar. Artık Bu linke tıkladığımız zaman, sayfanın en altında tanımladığımız satıra, ziyaretçimiz yönlendirilecek.

Ve bu o kadar hızlı olacak ki, Ziyaretçiniz, sayfanın ne zaman yüklendiğini bile anlayamayacak. Halbuki sadece Scroll kaymış olacağından çok hızlı gerçekleşecek...

BİR DOSYAYA DOWNLOAD İÇİN LİNK VERMEK:

Anchor Etiketimizle bir dosyaya download için de link verebiliriz. Mesela bir MP3 dosyasını, ziyaretçinizin bilgisayarına indirebilmesine izin vermek istiyorsunuz. O zaman alttaki kodu kullanmalıyız.

<a href="Sarki.MP3">Şarkıyı Download Etmke İçin Tıklayınız...</a>

Ya da

<a href="Dosya.zip">Programı Download Etmek İçin Tıklayınız...</a>

Ya da bazen bir doc uzantılı yani Word dokümanına link vermek isteyebilirsiniz.. O zaman da;

<a href="Belge.doc">Belgenin Tamamını Okumak İçin Tıklayın...</a>

Belki bilmiyorsunuzdur ama artık Adobe Acrobat dosyalarına da link verilebiliyor. Tabii ziyaretçinizin bilgisayarında Acrobat Reader yüklüyse görebiliyor. O zaman da;

<a href="Dosya.pdf">Dosyayı Okumak İçin Tıklayın...</a>

Bu gördüğünüz şekillerde linkler verebilirsiniz. Ayrıca dilerseniz bir imaja bir Flash dosyasına bile link verebilirsiniz. Bu örnekleri çoğaltmak mümkündür...

ANCHOR ETİKETİNİN ACCESSKEY ÖZELLİĞİ:

Bu özelliğimiz ile bir anahtara ya da başka bir deyişle bir klavye tuşuna link verebiliriz. Ama pat diye çalışmaz bu özellik Alt+"anahtar tuş" la birlikte çalışır. Önce ALT tuşuna ve beraberinde anahtar olarak belirlenen yuşa basıldığında verilen link Status Bar'da yani Browser'ınızın altındaki durum çubuğunda görüntülenir ve Enter'a bastığınız zaman lin'e tıklandı demektir. Ve link çalışır...

Ama bu pek kullanışlı bir özellik değildir... Zaten TAB tuşuyla Linkler arasında gezebilir ve herhangi bir linke geldiğimiz zaman, Status Bar'da bu linkin nereye gittiğini görebilir ve Enter tuşuna basarsak zaten o linke gider. Ama yine de bilin ama dediğim gibi kullanmanızın bir manası da yoktur.

ANCHOR ETİKETİNİN CHARSET ÖZELLİĞİ:

Hatırlarsanız Charset özelliğini dersimizin ilk başlarında görmüştük. Şimdi link verdiğimiz bir text veya imaja CHARSET özelliğini ekleyeceğiz... Mesela bir RUS sitesine link verdik. Bu linke RUS Charset'ini ekliyoruz ki, bu sayfaya gidildiği zaman bu karakter desteği bilgisayarda yüklü değilse ziyaretçiye yükleyip yüklemek istemediği sorulur...

Kullanılışı:

<a CHARSET="ISO-5247" href="www.dd.ru">Rusya Sitesi</a>

ANCHOR ETİKETİNİN TITLE ÖZELLİĞİ:

Anchor etiketimizin birlikte kullandığımız bir de TİTLE Parametresi vardır. Bu parametremiz, aynı ALT TEXT'de kullandığımız gibidir. Yani bir linkin üzerine geldiğimiz zaman, yine sarı bir box açılır ve girdiğimiz TITLE bu box'ta görüntülenir...

Size bir Sır vereyimmi?

Bir ara altavista'da uygulamıştı. TITLE Bölümüne sadece bir "_" altçizgi girerek linke gelindiği zaman bir adam kolu çıktığını göreceksiniz. Harika oluyor inanın bana...

ANCHOR ETİKETİNİN TARGET (HEDEF ÇERÇEVE) ÖZELLİĞİ:

Bazen Linklerimizi, ayrı bir pencerede veya bir Frameset içerisinde bir Frame'de açmak isteyebiliriz... İşte o zaman TARGET yani hedef çerçeve özelliğini kullanabiliriz. Hemen bir örnek kullanımla uygulamaya geçelim...

<a href="http://www.egitimcenter.com" TARGET="_blank">Hepimizin Sitesi</a>

Bu örnek uygulamada, şunu yaptık. Eğitim Center alı siteye link verdik ama, bu sayfayı aynı sayfada değil başka bir sayfada açacağız. Kullanacağımız TARGET'ları görelim şimdi...

_blank = Bu özellik hedef linkimizi yeni boş bir sayfada açar.

_self = Bu özellik hedef linkimizi aynı pencerede veya Frame'de açmamızı sağlar.

_parent = Bu özellik, hedef linkimizi eğer bi Frameset kullanmışsak o frameset içerisinde açar. Eğer frame kullanmamışsak _self'le aynı sonucu verir. Yani kendisinde açar...

_top = Bu özelliğimiz ise, Self ve Parent'a benzer. Eğer bir Frameset içeren sayfada kullanılırsa, bu Frameset'i yok sayar ve aynı sayfada açar. Eğer Frameset kullanılmamışsa, Self'le aynı neticeyi verir. Yani kendisinde açar.

Birde kullandığımız bağımsız değişken isimler vardır. Mesela ben FrameSet'lerde üstteki Frame'e TopFrame, Göbekteki Frame'e MainFrame, alttaki Frame'e BottomFrame adını veriyorum.

O zaman bu cümlelerden şu sonuç çıkıyor. Eğer ben tıklanan linkin, göbekteki Frame'de açmasını istiyorsam, TARGET olarak MainFrrame yazacağım. O zaman "_" işaretini kullanmanız gerekmez. Tabii sizi Frame'inize ne isim verdiyseniz onu kullanmanız gerekir.

Artık Anchor etiketini öğrendiğimize göre, şu bahsettiğim kodu uygulayabiliriz. İnanın bana çok basit... Hemen öğreneceksiniz. Tek yaomanız gereken <a href'ten sonra bu kodu aşağıda görüldüğü şekilde yazmaktır...

Kodumuz şudur: onFocus="this.blur()" işte bu kadar. Şimdi nasıl kullanıldığını inceleyelim...

<a href="#" Title="_" onFocus="this.blur()"><IMG SRC="Kaydet.jpg"WIDTH="150" HEIGHT="100" BORDER="0"></a>
<a href="http://www.egitimcenter.com" onFocus="this.blur()">Hepimizin Sitesi</a>

İşte bu kadar. Kodumuzun nasıl eklendiğini gördünüz... Artık o nefret ettiğimiz çizgi linke tıklandığı zaman çıkmayacak... Hadi derslere devam...