Html Link Verme

Merhaba Arkadaşlar,
Bu makalede Html’de link vermeyi öğreneceğiz.Bildiğiniz gibi web siteleri onlarca sayfadan oluşabiliyor.Sitelerde bu sayfalar arasında gezinmemizi linkler sağlıyor.Linkleri birçok amaç için kullanabiliyoruz.Örneğin sitemizde sayfalar arasında gezinme, başka bir siteye yönlendirme, resim video vb.. bir kaynağa yönlendirme gibi işlemlerimizi linkler ile yapıyoruz.Burda vermiş olduğumuz kaynak görüntülenebiliyorsa görüntülenir, diğer durumda ise kullanıcının cihazına indirilir.Mesela kaynak olarak indir.zip dosyasını vermişsek, bu dosya görüntülenemeyeceği için linke tıklandığında cihaza indirilecektir.

Link oluşturmak için <a> etiketini kullanıyoruz.En basit haliyle link vermek için 2 tanımlama yapmamız gerekiyor.Bunlar linkin görünürdeki yazısı yani kullanıcının görmüş olduğu yazı ve bu yazıya tıklandığında yönlendireceğimiz hedef adres.

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

Örneğin linkin yazısını Google yapalım ve buna tıklandığında kullanıcıyı Google sayfasına yönlendirelim.Yazmamız gereken kodlar şu şekilde olacaktır;

Veya sitemizde sayfalar arasında gezinmeyi sağlamak için de linkleri kullanabiliriz.Örneğin 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.

► 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 sayfanız açılır.Eğer hedef sayfanın yeni bir sekmede açılmasını istiyorsanız target attribute’unu kullanabilirsiniz.Dört farklı değer alabilir.Bunlar;

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

     ♦ _blank : Tıklanan link yeni bir pencerede açılır.

     ♦ _parent : Tıklanan link 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;

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

Resimlere Link Verme

Linkler sadece düz metinlerden oluşmaz.Herhangi bir html etiketine de link verebiliriz.Örneğin resim, video vb.. nesnelere linkler verebiliriz.Bunun için link vermek istediğimiz nesneyi <a> etiketi içerisinde yazmamız gerekiyor.Örneğin bir resme link vermek istiyorsak şöyle yazabiliriz;

Burdaki resme (resim.jpg) tıkladığımızda Google sayfasına yönlendiriyoruz.

Bu şekilde ister resimlere isterseniz de başka nesnelere link verebilirsiniz.

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

İndir 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 cihaza indirilecektir.Download linkleri bu şekilde oluşturulur.Örneğimizde kullanıcı İndir linkine tıkladığında arşiv.zip dosyası cihazına indirilecektir.

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

Yeni bir makalede görüşmek üzere.

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +