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="https://www.tasarimveyazilim.com/wp-content/uploads/google.jpg" alt="goole logo">
</a>
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.
_blank | Bağlantıyı yeni sekmede veya pencere açar. |
_self | Bağlantıyı aynı sekmede veya pencere açar. Varsayılan değerdir |
_parent | Bağ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… …
Yaralı oldu bu bilgiler tavsiye ederim bu sayfayi.
Hocam merhaba bilgiler için teşekkür ederim,yararlı bilgiler olmuş ben bir yerde takıldım yardımcı olurmusunuz?
1 ana sayfa yaptım bu ana sayfadan hariç bir sayfa daha oluşturdum ve 1. sayfadaki menü butonundan 2. sayfaya link veriyorum link sayfaya gidiyor + ben bu link bu sayfaya gittiğinde sayfanın ortasındaki “bilgisayar bilgileri” yazan yazıya gitsin istiyorum ama o sayfayı direkt açıyor.Ne yaptıysam beceremedim cevabınızı bekliyorum
merhaba. Yararlı olmasına sevindim. kusura bakmayın yoğunluktan dolayı mesajınızı geç gördüm. Sorunuzu ile ilgili daha önce benzer bir menu yapmadım. sizin için bakayım…
öncelikle yeniden kusura bakmayın sorunuza gec cevap yazdığım için.
Cevap:
href=”index2.html#urunler”
sayfa 2 olarak index2.html yaptım. link verirken a etiketi oluşturup href attribute kısmında “index2.html#urunler” şeklinde yazdığınızda sayfa 2 daki urunler kısmına gidecektir. Burada urunler kısmına id:”urunler” eklemeyi unutmayın
Hocam aynısını yaptım. No aplication open this link diye yazı çıkıyor. Android den yapıyorum. Ondan mı oluyor ki
telefonda da olsa neticede tarayıcı mantığı aynı. farklı bir hata olabilir. yaptığını atabilirseniz kontrol edebilirim. hata varsa düzeltip cevap yazarım
android derken kotlin mi yazıyorsunuz. yoksa html css ile yazıp android telefonda mı deniyorsunuz.
Harika paylasım sizi can gözle takip etmekdeyim
yorumunuz için teşekkürler
Harika paylasım Sohbet chat Sitelerine Html Kodları mukemel sizi Sohbetdekal Sitesi Olarak Hem Öneriyorum Hem Paylasımlarınızı dikkatli Olarak bakmakdayim
Güzel yorumunuz için teşekkürler…