HTML - Bağlantılar(Link Verme)
Bağlantılar sayesinde hazırladığınız birçok sayfayı birbirleriyle ilişkili hale getirebilirsiniz. Bir tıklama sizi istediğiniz yere götürecektir.Bu sayede tasarlamış olduğunuz sayfalar arasında ve sayfa içinde istediğiniz gibi dolaşabilirsiniz.
Bağlantı yapmak için kullanılan etiket:
<a href=".........">.....</a>
<a href="Bağlantı yapılacak nesne ">Bağlantı için kullanılacak yazı veya nesne</a>
Bu etiket ile oluşturduğunuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz.Yani bu etiket ile bildiğiniz tüm bağlantıları oluşturmanız mümkündür.
<a>.....</a> etiketi arasına yazdığınız yazılar veya koyduğunuz nesneler(resim gibi) bağlantı özelliğine sahip olacaktır.Eğer aksi belirtilmemişse bağlantılar, browser tarafından altı çizili ve mavi renkli gösterilir.
Şimdi bağlantı etiketi ile yapılabileceklere teker teker bakalım.
- <a href="resimler/paulog.jpg"> Bu yazıya tıkladığınızda, resim açılacak </a>
Örnekte "Bu yazıya tıkladığınızda, resim açılacak" yazısına bağlantı özelliği kazandırdığımızdan browser tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı fare imlecini yazının üzerine getirdiğinde imleç el şekline dönüşecektir.Kullanıcı bu bağlantıya tıkladığında, browser o anda açık bulunan sayfa ile aynı dizinde bulunan resimler klasörü içindeki paulog.jpg resmini açacaktır.
- <a href="dersler.html"> Derslere gitmek için tıklayınız </a>
Bu örneğimizde, linke tıklandığında tasarımını yaptığımız html dökümanı ile aynı dizinde bulunan dersler isimli html dökümanı açılacaktır.
- <a href="kitap.pdf"> Hazırlağımız dökümanı indirmek için tıklayınız </a>
"Hazırlağımız dökümanı indirmek için tıklayınız" yazısına bağlantı özelliği kazandırılmıştır; fakat önceki örneklerden farklı olarak dosya tipinden kaynaklanan bir durum vardır. İlk örnekte "Bu yazıya tıkladığınızda, resim açılacak" yazısına tıklandığında browser resmi açacaktır, fakat bu örnekte browser kullanıcıya kitap.pdf dosyasını açmak mı yoksa kaydetmek mi istediğini soran bir pencere açacaktır.Bunun sebebi, browserların html, txt, jpg, gif...vb. uzantılı dosyaları görüntüleyebilirken zip, doc, pdf, mp3 gibi dosyaları görüntüleyememesidir.
- <a href="http://www.pau.edu.tr">Pamukkale Üniversitesi</a>
İkinci örneğimizde dersler.html isimli dökümana link vermeyi görmüştük.İkinci örnekteki bu bağlantı, tasarım aşamasında bizim bilgisayarımızda hazırladığımız döküman içinden, daha önceden hazırlanmış bir dökümana verilen link örneğidir.Yani bilgisayarımızdaki bir html dökümanına, dökümanların birbiri ile olan konumlarına dikkat edilerek verilmiş bir bağlantı örneğidir.Şimdiki örneğimizde ise "Pamukkale Üniversitesi" yazısı ile bir internet adresine link vermiş olduk.Burada dikkat edilmesi gereken konu, link verilecek internet adresinin başına http:// nin yazılmasıdır.Bu yazılmadığı taktirde bağlantınızın yapılmadığın göreceksiniz.
- <a href="mailto: xxxx@xxxx">Bana buradan mail atabilirsiniz</a>
Buradaki linke tıklandığında kullanıcının ilgili mail programı açılır ve send to (kime) kısmına verdiğiniz mail adresi otomatik olarak yazılır.Sizde bu şekilde yapmış olduğunuz sayfalarda kullanıcıların size mail atmasını sağlayabilirsiniz.
Resimlere link verme:
Dersimizin başında metinlere ve resimlere bağlantı (link) verilebileceğini söylemiştik.Metinlere link verme örneklerinden yukarıda bahsettik, şimdi ise resimlere link vermenin nasıl yapıldığına bakalım.
Resme link vermek için, <img src="..." width="x" height="y"> etiketini <a href>...</a> etiketinin arasına alırız.Örnek;
<a href="http://www.pau.edu.tr"><img src="paulog.jpg"></a>
Bu örnekte paulog.jpg isimli resmin etrafında mavi renkli bir çerçeve oluşur.Bu resme link verilmiş olduğunu gösterir.Resmin üzerine gelindiğinde fare imleci el simgesine dönüşür ve tıklandığında belirtilen hedefteki nesne ile bağlantı kurulur.Bu örnekte www.pau.edu.tr adresine link verildiği için resme tıklandığında bu adres açılır.
Sayfa içine link verme(Çapa atma):
Kimi zaman aynı sayfa içinde istenilen noktalara link vermek gerekebilir.Bu işleme sayfa içine(dahili) link verme veya çapa atma denir.Derslerimizi anlatmak için hazırlanan bu sayfalarda da sayfa içine link verme özelliğinden faydalanılmıştır.Sayfa sonlarında bulunan "Başa Dön" yazısına tıkladığınızda aynı sayfa içindeki ders başlığına gidildiğini görebilirsiniz.Şimdi gelelim bu işin nasıl yapıldığına;
Sayfa içine link vermede iki işlem vardır.Bunlardan biri link verme işlemidir.Diğeri ise, sayfa içinde link verilecek yere bir isim vermektir.Sayfa içinde link verilecek yere isim verme, hedef belirtme aşamasında kullanılır.
Sayfa içindeki bir yere noktaya isim verme:
<a name="verilecek isim"> .....</a>
Sayfa içine link verme:
<a href="#verilen isim">....</a>
Sayfa içine link vermede diğerlerine göre bir fark vardır.Yukarıda da görüldüğü gibi hedef belirtilirken, hedefin önüne "#" işareti konulur.
Örnek:
Ders anlatım sayfalarında kullandığımız, sayfa başına dönmeye yarayan link verme işlemini yapalım.
Ders anlatım sayfalarında kullandığımız, sayfa başına dönmeye yarayan link verme işlemini yapalım.
- İlk olarak linke tıklandığında gidilecek yeri belirleyelim.Biz linke tıkladığımızda, "Ders:" yazısının başına gitmek istiyoruz.Öyleyse, yamamız gereken etiket
<a name="#basadon>Dersler:</a> dir.
Yukarıda yazdığımız etiket ile "Dersler:" yazısının olduğu yere "basadon" ismini veriyoruz.Burada "Dersler:" yazısını yazmadan da <a name="#basadon"></a> şeklinde, bu noktaya isim verebilirsiniz.Önemli olan gitmek istenilen noktaya ileride kullanmak için bir isim vermektir.
- Şimdi ise sayfa içinde belirlediğimiz yere link verelim.<a href="#basadon">Başa Dönmek için tıklayınız...></a>
Bu etiketi yazdığımızda sayfamızda altı çizili mavi renkte "Başa dönmek için tıklayınız..." yazısının çıktığını göreceksiniz.Buraya tıklandığında ise "basadon" isminin verildiği yere gidildiğini rhatlıkla gözlemleyebilirsiniz.
Sayfa içinde link verme işlemini başka bir sayfanın içinde, istenilen bir yere link vermek içinde kullanmak mümkündür.Bunun için yapılması gereken link verilecek yerdeki etiketi aşağıdaki gibi yazmaktır.
<a href="dersler2.htm#ilgiliyer">Diğer sayfada ilgili yere git</a>
Gördüğünüz gibi, tek yapılması gereken gidilecek yerden sonra "#"işareti ile birlikte bitişik şekilde ilgili yere ait ismin yazılmasıdır.
Target Parametresi:
Target parametresi, yapılan bağlantının açılacağı pencereyi belirtmek için kullanılır.
Kullanım şekli:
<a href="........." target=".......">.........</a>
target="_blank" : Bağlantı yeni bir sayfada açılır.
target="_self" : Bağlantı aynı pencere içerisinde açılır.Hiçbir şey belirtilmediği zaman, varsayılan ayar budur.
target="_top" : Bağlantı aynı pencere içerisinde en üstten itibaren açılır.Tüm çerçeveler kapatılıp, yeni bağlantı açılır.
target="_parent" : Çerçevelerde(Frame) kullanılır.Bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
target="çerçeve adı": Bağlantının adı belirtilen çerçevede açılmasını sağlar.
