HTML LİNK VERME ( BAĞLANTI VERME ) İŞLEMİ

Bu yazımızda Html link verme hakkında bilgilerimizi paylaşacağız. Link (Bağlantı) verme işlemi web sitelerinde çok fazla kullandığımız yöntemlerdendir.

Nerelerde kullanıyoruz sorusu aklımıza gelebilir. Site de menulerde anasayfa, hakkımızda, iletişim vb. menulerine tıkladığımızda farklı sayfalara geçişler link sayesinde olmaktadır. Blog sitelerinde her yazının başlığına veya resim görseline tıkladığımızda o yazıya gitmesini sağlayan link verme olayıdır.

Html Link Verme Nasıl Yapılır?

Html de link verme <a> etiketi ile yapıyoruz. Link vermek istediğimiz metin, resim vb… şeyleri <a> etiketi içine alıyoruz. Örnek olarak aşağıdaki gibi…

 <a href="Link(url)"> Link vermek istediğimiz metin </a> 

Burada href attribute ile tıklanan linkin nereye gideceğini belirliyoruz. Örneğin “Link(url)” yerine www.tasarimveyazilim.com yazdığımızda bu siteye gidecektir. Örnek olarak

 <a href="www.tasarimveyazilim.com"> Tasarım ve Yazılım </a> 

Bu link sitede görünüşü Tasarım ve Yazılım şeklinde olacak ve tıklandığında siteye gidecektir. Link verdiğiniz metinler varsayılan olarak rengi mavi ve altı çizili şeklinde olur. Bunları CSS kodları ile değiştirebilirsiniz.

Resimlere Nasıl Link Verildiğini Öğrenelim.

<a href="www.tasarimveyazilim.com"> 
     <img src="resim url" alt="alternatif yazı"> 
</a> 

Burada görüldüğü gibi resimlere link verirken <img> etiketini (resim etiketini) <a> etiketi içine yazarak yapıyoruz. Resim tıkladığınızda nereye yönlendirmiş iseniz oraya gidecektir. Örnek olarak kod kısmını ve nasıl gözüktüğüne bakalım..

<a target="_blank" href="https://www.google.com.tr/">
   <img src="http://www.tasarimveyazilim.com/wp-content/uploads/google.jpg" alt="goole logo">    
</a> 
html link verme

Yukarıdaki görüldüğü gibi google logosuna tıkladığınızda onun sitesine gidiyor. Sitemizde resimlere de bu şekilde link verme işlemi yaparak istediğimiz şekilde yönlendirme yapabiliriz. Bu örnek de target attribute nü kullandık. target attribute ile açılmasını istediğimiz sayfanın nasıl açılmasını istediğimizi belirliyoruz.

“target” özelliği bağlantının açılacağı yeri belirtir. Bu özellikler aşağıdaki gibidir.

_blankBağlantıyı yeni sekmede veya pencere açar.
_selfBağlantıyı aynı sekmede veya pencere açar. Varsayılan değerdir
_parentBağlantıyı bir üst çerçevede açar.
_top Bağlantıyı pencerenin tüm gövdesinde açar.

Yer İşareti Oluşturma

Bu özellik web sitelerinde belirli bölümlere atlanmasına olanak sağlar. Genelde tek sayfalık sitelerde menu de bulunan hizmetlerimiz, hakkımızda, iletişim gibi menulere tıklanarak sayfadaki başlığa direk atlanması sağlanır.

Bu işlemi yaparken gitmek isteğimiz başlık veya herhangi bir yere yer imi oluşturmamız ve sonrasında da linki oluşturmamız gerekiyor. Örnek yer imi ve linki oluşturalım.

<h2 id="work">Works</h2>
<a href="#work">Works</a>

Burada html linki olarak oluşturduğumuz Works menu olduğunu varsayalım ve Works başlığını sayfanın herhangi bir yerinde olduğunu varsayalım. Works linkine tıkladığınızda h2 etiketine work id si ile ulaştığımızdan o başlığa gidecek.. Örnek tek sayfalık bir site nasıl olduğunu gif ile görelim. Gif tıklayın ve menunun nasıl çalıştığını görünüz…

Gif görüldüğü gibi hangi menuye tıklanır ise o menü için oluşturulan yer imi başlığına gidiyor.

Başka bir yazımızda görüşmek üzere…

2 Comments

  1. Boyaci boran 11 Şubat 2021 Reply
    • admin 13 Şubat 2021 Reply

Leave a Reply