HTML Linkler

ASP, PHP, PERL, CGI, HTML gibi web programcılık dilleri hakkında yardım, tartışma ve paylaşımlar.
Cevapla
Kullanıcı avatarı
UnreaL
Fast Friend
Fast Friend
Mesajlar: 207
Kayıt: 24-12-2005 17:26

HTML Linkler

Mesaj gönderen UnreaL »

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

Kod: Tümünü seç

<html>
<head>
  <title>RIDE ACROSS THE RIVER</title> 
</head>
<body>
  <font face="Comic Sans MS" size="4"><b>RIDE ACROSS THE RIVER</b></font><br><br>
  <font face="Comic Sans MS">I'm a soldier of freedom in the army of man</font><br>
  <font face="Comic Sans MS">We are the chosen we're the partisan</font><br>
  <font face="Comic Sans MS">The cause it is noble and the cause it is just</font><br>
  <font face="Comic Sans MS">We are ready to pay with our lives if we must</font><br></br>
  <font face="ARIAL"><b>DIRE STRAITS</b></font><br>
  <font face="ARIAL"><a href="turkce.html">Türkçesini görmek ister misiniz???</a></font><br>
</body>   
</html>
Dosya Adı: turkce.html

Kod: Tümünü seç

<html>
<head>
  <title>Nehrin Karşı Kıyısında</title> 
</head>
<body>
  <font face="Comic Sans MS" size="4"><b>NEHRİN KARŞI KIYISINDA</b></font><br><br>
  <font face="Comic Sans MS">İnsanoğlu ordusunda özgürlük neferiyim</font><br>
  <font face="Comic Sans MS">Biz seçilmiş olanlarıyız, partizanlarız</font><br>
  <font face="Comic Sans MS">Amacımız soylu ve haklı</font><br>
  <font face="Comic Sans MS">Ve eğer gerekirse hayatımızla ödemeye razıyız</font><br></br>
  <font face="ARIAL"><b>DIRE STRAITS</b></a></font><br>
  <font face="ARIAL"><a href="english.html">Do wish to see in English???</font><br>
</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.

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

Kod: Tümünü seç

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

<a name="sayı21"><font size=6 color="green">21</font></a><br><br>

   22<br><br>23<br><br>24<br><br>25<br><br>26<br><br>27<br><br>28<br><br>29<br><br>30<br><br>
   31<br><br>32<br><br>33<br><br>34<br><br>35<br><br>36<br><br>37<br><br>38<br><br>39<br><br>40<br><br>
</body>   
</html>
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

Kod: Tümünü seç

<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:

Kod: Tümünü seç

<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.


Volkan Derinbay'a tşkler.
Cevapla
  • Benzer Konular
    Cevaplar
    Görüntüleme
    Son mesaj

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 1 misafir