Html Link Verme (Yazıya, Resme, Dosyaya, İndirme Linki)

Bu yazımızda Html link verme konusunu öğreneceğiz. Tasarımlarımızda veya projelerimizde farklı durumlar için link verme ihtiyacımız oluşabiliyor.

Örneğin bir yazıya link verme, bir resme link verme, bir dosyayı link yapma, bir video link oluşturma, indirme linki oluşturma, sayfalar arası veya sayfa içi bağlantı oluşturma vb.. bir çok durumda link verme ihtiyacı ortaya çıkıyor.

Html Link Verme

Link vermek için a etiketini kullanıyoruz. En basit haliyle 2 tanımlama yapmamız gerekiyor. Bunlardan birincisi, linkin görünürdeki yazısı yani kullanıcının görmüş olduğu yazı. İkincisi ise bu yazıya tıklandığında yönlendireceğimiz hedef adres.

► href attribute : Hedef adresi yani Url’i href attribute’u ile veriyoruz.

Genel olarak link verme kodu

Örneğin linkin yazısını Google yapalım ve buna tıklandığında kullanıcıyı Google sayfasına yönlendirelim.

Yazıya link verme kodu

Şİmdi de web sitemizde sayfalar arasında bağlantı sağlamak için link ekleme yapalım.

Örneğin web sitemizde iletisim.html ve hakkimda.html sayfalarımız olsun. Yapmış olduğumuz menüde İletişim linkine tıklandığında iletisim.html sayfasına, Hakkımda linkine tıklandığında hakkimda.html sayfasına gitmesini sağlayalım.

Sayfalar arası link verme kodu 

► target attribute : Normalde bir linke tıkladığınızda hedef sayfa varsayılan olarak aynı pencere içerisinde açılır. Yani o an ki bulunduğunuz sayfanın yerine yeni hedef sayfa açılır. Eğer hedef sayfanın yeni bir sekmede açılmasını istiyorsanız target attribute‘unu kullanabilirsiniz. 4 farklı değer alabilir. Bunlar;

     ♦ _self : Varsayılan değerdir. Tıklanan linkin hedef adresi aynı pencerede açılır.

     ♦ _blank : Tıklanan linkin hedef adresi yeni bir pencerede açılır.

     ♦ _parent : Tıklanan linkin hedef adresi iframe içerisinde açılır.

     ♦ _top : iframe içerisinde bulunan bir link tıklandığında, hedef adres iframe dışında açılır.

Örneğin linkin yeni bir pencerede açılması için şu şekilde yazabiliriz.

► title attribute : Bu attribute ile link hakkında ek bilgiler tanımlayabiliriz. Linkin üzerine fare ile gelindiğinde bu bilgiler bir tooltip ile kullanıcıya gösterilir.

Örneğin;

Burada linkin üzerine fare ile geldiğimizde title değerini bize tooltip ile gösterecektir.

Html Resme Link Verme

Linkler sadece düz metinlerden oluşmaz. Herhangi bir Html etiketine de link verebiliriz. Buradaki konumuz resme link verme olduğu için resimler üzerinde link vermenin nasıl yapıldığına bakacağız.

 ⇒  Bunun için link vermek istediğimiz resmi a etiketi içerisinde yazmamız gerekiyor. Bunu yazdıktan sonra resme tıklandığında hangi hedef adrese gitmesini istiyorsak, a etiketinin href attribute’una bu adresi yazmamız gerekiyor. 

Resme link verme kodu 

Bu örnekte resme tıklandığı zaman bizi Google‘ın sayfasına yönlendirecektir. Çünkü a etiketinin href attribute’una hedef adres olarak http://www.google.com/ yazdık.

Html sayfalarına resim ekleme ile ilgili daha fazla bilgi almak isterseniz Html Resim Ekleme yazımı okuyabilirsiniz.

Html mailto Kullanımı ile Link Verme

Şimdi de email adreslerine nasıl link veriyoruz ona bakalım.

a etiketinin href attribute’una mailto: yazdıktan sonra istediğimiz mail adresini yazıyoruz. Bu şekilde kullanıcı linke tıkladığında bilgisayarındaki mail programı açılacak ve gönderilecek kişi kısmına vermiş olduğumuz mail adresi otomatik olarak yazılacaktır.

Mailto ile link verme kodu 

Mail Gönder yazısına tıklandığında, mail programı açılacak ve gönderilecek kişi kısmına xxx@xxx.com adresi otomatik olarak yazılacaktır.

İndirme Linki Oluşturma

Bir linke tıklandığında hedef olarak verdiğimiz dosyanın indirilmesini istiyorsak yapmamız gereken 2 işlem var.

► Birincisi dosyayı sıkıştırmak (.zip).

► İkincisi dosya yolunu a etiketinin href attribute’una vermek.

Böylece kullanıcı linke tıkladığında hedef dosyanın uzantısı .zip olduğu için açılamayacak ve dosya cihaza indirilecektir. İndirme linkleri bu şekilde oluşturulur.

İndirme linki oluşturma kodu

Örneğimizde kullanıcı İndir linkine tıkladığında arşiv.zip dosyası cihazına indirilecektir.

 ⇒  Bir linkin üzerine fare ile geldiğiniz zaman fare imleci el işaretine dönüşür.

Html link verme yöntemleri bu şekilde yapılıyor.

Umarım sizin için faydalı bir yazı olmuştur. 

Yeni bir yazımda görüşmek üzere.