HTML Linkler

Admin Mesaj Sayısı : 91 Kayıt tarihi : 12/07/08

Linkler

Web sayfalarının göze ilk çarpan özelliklerinden bir tanesi de linklerdir. (link: bağlantı yani.) Bu linkler sayesinde okuyucu sayfa içinde veya sayfalar arasında yönlendirilir. Linkler yapmak çok zevklidir, çünkü her link bir sayfa demektir.

Sayfalara Link Kurmak

Link yaratmak için <a> (anchor = dayanak) kodunu ve linkin yönlendirdiği dosyanın kaynağını belirleyen href (hyperlink reference) parametresini kullanırız. Daha iyi anlamak için bir örnek yapalım, aşağıdaki uygulama iki sayfadan oluşmaktadır.

Dosya Adı: english.html

codeDivStart() <html>
<head>
<title>RIDE ACROSS THE RIVER</title>
</head>
<body>
RIDE ACROSS THE RIVER 
I'm a soldier of freedom in the army of man 
We are the chosen we're the partisan 
The cause it is noble and the cause it is just 
We are ready to pay with our lives if we must 
DIRE STRAITS 
<a href="turkce.html">Türkçesini görmek ister misiniz???</a> 
</body>
</html>

Dosya Adı: turkce.html

codeDivStart() <html>
<head>
<title>Nehrin Karşı Kıyısında</title>
</head>
<body>
NEHRİN KARŞI KIYISINDA 
İnsanoğlu ordusunda özgürlük neferiyim 
Biz seçilmiş olanlarıyız, partizanlarız 
Amacımız soylu ve haklı 
Ve eğer gerekirse hayatımızla ödemeye razıyız 
DIRE STRAITS</a> 
<a href="english.html">Do wish to see in English??? 
</body>
</html>

Yukarıdaki ilk sayfayı english.html, ikinci sayfayı ise turkce.html isimleriyle kaydettim. Siz başka isimler tercih edebilirsiniz elbette, ama o takdirde href="..." parametrelerine koyacağınız isimlere dikkat edin. Adres tam olarak yazılmalı, aynı klasördeyse sadece dosya ismi yazmak yeterli olur ama dosya kökünü (.html) yazmayı unutmayınız. Yazılan adres doğru değilse, vermiş olduğunuz link görünmeyecektir.

Admin Mesaj Sayısı : 91 Kayıt tarihi : 12/07/08

Adres Belirtme

Bilgisayar konusunda deneyimsiz olan arkadaşlar için adres konusunu biraz açayım. Sayfanızdan vereceğiniz link, yürürlükteki sayfayla aynı klasördeyse (aynı yere kayıtlıysa), sadece dosya ismini ve kökünü yazmanız yeterli olacaktır. (volkan.html gibi) Ama linki verilen sayfa çok farklı bir yerde kayıtlıysa tam adresini yazmalısınız. ("D:\Programs\Arsiv\Volkan\volkan.html" veya "http://www.cumhuriyet.com" gibi.) Bazen linkini verdiğiniz adres, sayfayla aynı yere kaydedilmiş bir klasörün içinde de olabilir. O zaman adresi o klasörün isminden de başlatabilirsiniz. (Mesela klasörün ismi "volkan" ise, linki verilen sayfanın ismi de "cdiaz.html" ise: "volkan/cdiaz.html" yazılabilir.) Umarım anlatabilmişimdir, bilgisayarın dosyalama sistemini az çok bilenler için anlaması çok zor değil sanırım.

Sayfanızdan vereceğiniz linkin başka sayfaya ait olması şart değildir. Çok uzun metinlerin yer aldığı tek sayfalık web siteleri görmüşsünüzdür. Bu tür sayfaların başında, sayfanın bazı başlıkları link halinde yazılır. Bu sayede kullanıcı sayfanın içinde rahatça dolaşabilir. Siz de böyle uzun sayfalar yapacaksanız, kullanıcıları yönlendirmek için sayfa içi linkler koyabilirsiniz.

Sayfa İçi Linkler

Sayfa içi link yapabilmek için yine <a href="..."> kodunu kullanırız. Sayfalar arasında link kurmak için sayfa isimlerini belirtiyorduk. Peki aynı sayfa içinde dolaşabilmek için nasıl adres yazacağız? Bunun için <a name="..."> kodundan yararlanırız. Mantık şu. Sayfa içinde bir yere name (isim) parametresiyle bir isim veririz. Ve isim verdiğimiz bu yere link vermek için href="..." parametresinin adres yerine "#" işaretinin hemen yanına bu ismi yazarız. Basit değil mi? Daha iyi anlamak için örneğe bakalım.

Dosya Adı: sayfaici.html

codeDivStart() </head>
<body>
<a href="#sayı21">21. Sayıya gitmek için buraya tıklayınız.</a> 
1 2 3 4 5 6 7 8 9 10 
11 12 13 14 15 16 17 18 19 20 

<a name="sayı21">21</a> 

22 23 24 25 26 27 28 29 30 
31 32 33 34 35 36 37 38 39 40 
</body>
</html>

Admin Mesaj Sayısı : 91 Kayıt tarihi : 12/07/08

Yukarıdaki uygulamada blackjack yapmak için (21'e gitmek için) 21 sayısına bir isim veriyoruz. ("sayı21") Böylece bu sayıya link vermek için adres olarak bu isimi kullanabiliyoruz. Başka bir sayfadan da doğrudan 21 sayısına ulaşmak isteyebiliriz. Peki bu durumda nasıl link vereceğiz? Çok basit. Adres yerine önce sayfanın ismini ve kökünü yazarız, sonra hemen yanına "#" işaretini ve yanına link ismini yazarız. Bir önceki örnekte dosyanın ismi denhtm43.html ve link ismi sayı21 idi. O zaman link adresimiz denhtm43.html#sayı21 olacaktır. Aşağıdaki uygulama ile bunu deneyelim

codeDivStart() <html>
<head>
<title>Başka sayfadan 21. sayıya link</title>
</head>
<body>
<a href="sayfaici.html#sayı21">21. sayfaya gitmek için buraya basınız.</a>
</body>
</html>

Yukarıdaki uygulamayla hem başka sayfaya, hem de o sayfanın içinde belirlediğimiz yere link vermiş olduk. Gittikçe birşeyler öğreniyoruz değil mi? Bir iki sayfa sonra kendi ayaklarınız üzerinde durabileceksiniz. Linkler hakkında birşey daha göstereyim.

Link Verilen Sayfanın Yeni Pencerede Açılması

İnternette veri akışı yavaş olduğu için sayfaların yüklenmesi internet kullanıcıları için bir derttir. Şu ana kadar öğrendiğimiz link verme metoduyla, linkin yer aldığı sayfanın yerine başka bir sayfanın yüklenmesini sağlıyoruz. Oysa bazen yüklenmiş sayfanın kaybolmasını arzu etmeyiz ve linkin yeni bir pencerede yer almasını isteriz. Mesela bu sayfada "gör" linklerine tıkladığınızda bu sayfayı kaybetmiyor, yeni bir pencereyle yazılı kodların sonucunu görebiliyoruz. Böylece ana sayfayı tekrar yüklemek zorunda kalmıyoruz. Peki ben bunu nasıl yapıyorum? Öğrenmenin iki yolu. Birinci yol benim sayfanın yer aldığı Internet Explorer sayfasının araç kutusundan görünüm/kaynak (view/source) seçeneğine tıklarsanız benim sayfanın kodunu görürsünüz. Bu tüm web sayfaları için geçerlidir. Kodunu merak ettiğiniz web sayfalarını bu yöntemle inceleyebilirsiniz. Ben web tasarımı yapmayı öyle öğrendim. İkinci yol ise aşağıdaki örneğe bakmak:

codeDivStart() <html>
<head>
<title>Yeni pencereden link yapmak</title>
</head>
<body>
<a href="sayfaici.html#sayı21" target="_blank">21. sayfaya gitmek için buraya basınız.</a>
</body>
</html>

Yukarıdaki örneğin bir önceki örnekten tek farkı target="_blank" parametresidir. Bu sayede link yeni bir pencere açılarak kuruluyor.

» HTML Bloklama
» HTML Multimedya