Link verme; ekrandaki sayfada bir yazı yada bir resme tıkladığımızda başka bir içeri açmaktan başka bir şey değildir. Link verme tek bir yöntemle yapılmasına rağmen açılacak içerik bir web sitesi, resim, pdf, word belgesi, video ve ses dosyası gibi unsurlar olabilir.
Bu yazıda yazıya link verme, resme link verme ve farklı bir içerik olmasına rağmen ofis(word, powerpoint) belgesinde link verme işlemlerinin yapılışını öğreneceksiniz. Başlıklar halinde sıralayacak olursak yazı içeriği şu başlıkları içerir.
HTML Link Verme Kodu
Bildiğiniz gibi bir web siteleri birkaç sayfadan oluşuyor. Bir sayfadan diğerine nasıl geçersiniz? Elbette linkleri kullanarak! Öyleyse sayfalarımız arasında nasıl bağlantı oluşturacağımız bu bölümü yapmayı öğreneceğimiz şeydir.
Sanırım hepiniz bir bağlantının ne olduğunu aşağı yukarı biliyorsunuz: başka bir sayfaya gitmek için tıklayabileceğiniz bir metin olarak da düşünmek mümküdür. Başka bir sayfa olduğu gibi, başka bir site yada sayfa içinde de link vermek mümkündür.
HTML ile bağlantı oluşturmak için kullanılan etiketler <a> ... </a>
dir.
<a>
, bağlantının başlaması gerektiğini ve </a>
bağlantının nerede biteceğini gösterir. Bu ikisi arasındaki her şey bir bağlantı olarak çalışacaktır.
Linkin hangi bağlantıya gideceğini belirtmek için href=""
niteliğine gideceği bağlantı yazılır. Bağlantı bir web sitesi olabileceği gibi web sayfası, resim, pdf, video vb. dosyalar da olabilir.
1 2 3 | Bize destek olmak için <a href="https://youtu.be/GuZRA5Tz-P4">YouTube</a> sayfamızı ziyaret edin. |
Çıktı:
Yazıya Link Verme
Yukarıdaki örnekte belirtilmiş olmasına rağmen hızlı bir şekilde tekrar edecek olursak <a> ile </a> etiketleri arasında yazılan her şey link olarak gösterilmektedir.
Bu yüzden <a>Ekranda görünmesini istediğiniz içerik</a>
şeklinde yazdığımızda ekranda görünmesini istediğiniz içerik link olacaktır.
Aşağıdaki örnekte yazılım kodlama yazısına link verilmiştir.
1 2 3 | <a href="https://www.yazilimkodlama.com">Yazılım Kodlama</a> |
Resim Link Verme
Yazıya link verme yöntemi için ekranda gösterilen bir resmi içinde bağlantı yapmak mümkündür. Ekranda resim göstermek için kullanılan <img src="">
etiketini bir <a>...</a>
etiketi içine yerleştirdiğimizde mevcut resim link olacaktır.
Örnek: İçinde link verilecek sayfa ile aynı dizinde logo.png adında bir dosyamız olduğunu düşünecek olursak. logo.png resmine tıkladığımızda yazılım kodlama sayfasını açmak için şöyle bir kod yazmalıyız.
1 2 3 4 5 6 | Siteye gitmek için resme tıklayın: <a href="https://www.yazilimkodlama.com"> <img src="logo.png" alt="logo"> </a> |
Sayfayı yeni bir sekmede açmak isterseniz de target niteliğini eklemelisiniz. Onu da eklersek kodumuz şu şekilde değişecektir.
1 2 3 4 5 6 | Siteye gitmek için resme tıklayın: <a target="_blank" href="https://www.yazilimkodlama.com"> <img src="logo.png" alt="logo"> </a> |
Çıktı:
Başka Bir Sayfaya / Siteye Link Verme
Link verme için kullandığımız <a> </a>
etiketinin href=""
niteliğine bir web sitesi yada web sitesinin bir sayfasını link verirsek de ilgili sayfa yada site açılacaktır.
Örnek: Aşağıdaki örnekler sırasyıla google sitesine, iletisim.html adında bir sayfaya ve resim.jpg adında bir resme link verilmiştir.
1 2 3 4 5 6 7 | <a target="_blank" href="https://www.google.com.tr">GOOGLE</a> ARAMA MOTORU<br> <a href="iletisim.html">İletişim</a> Sayfası<br> İstanbul Kış <a href="resim.jpg">Resmi</a> |
Çıktı:
PDF Dosyasına Link Verme
Yine mevcut link verme etiketi ile bir PDF dosyasını açabilir yada indirebilirsiniz. Bunu yapmak için href=”pdfyolu” şeklinde PDF dosyasının tam adını ve yolu yazmalısınız. Mevcut PDF dosyasını tarayıcıda açmak yerine indirmek için ise download niteliğini kullanmalısınız. Aşağıdaki ikinci örnek PDF dosyasını açmak yerine indirme işemi yapar.
1 2 3 4 | JavaScript Dersleri <a href="javascript-dersleri.pdf">AÇ</a> <br> JavaScript Dersleri <a download href="javascript-dersleri.pdf">İNDİR</a> |
Sayfa içi Div’e Link Verme
Mevcut sayfada bir div yada başka bir etikete link vermek için link verilecek sayfanın isimlendirilmesi gerekir. İsimlendirmek için div
yada etikete bir tane ID
değeri verilmelidir. Link içinde o id değerine #
ile link verilebilir.
Aşağıdaki örnekte #kutu1 divine gitmesi için <a></a> etiketinde link verilmiştir.
1 2 3 4 5 | <a href="#kutu1">Kutu1 Div'ine Git</a> <div id="kutu1"></div> |
Daha gelişmiş bir örnek için aşağıdaki kodları kopyalayıp bir metin editörüne yapıştırın ve test edin.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Yazılım Kodlama</title> <style> .kutu{ height: 500px; } </style> </head> <body> <a href="#kutu1">KUTU 1 GİT</a><br> <a href="#kutu2">KUTU 2 GİT</a><br> <a href="#kutu3">KUTU 3 GİT</a><br> <a href="#kutu4">KUTU 4 GİT</a><br> <a href="#kutu5">KUTU 5 GİT</a><br> <a href="#kutu6">KUTU 6 GİT</a> <div id="kutu1" class="kutu" style="background: #e66767"></div> <div id="kutu2" class="kutu" style="background: #f5cd79"></div> <div id="kutu3" class="kutu" style="background: #786fa6"></div> <div id="kutu4" class="kutu" style="background: #3dc1d3"></div> <div id="kutu5" class="kutu" style="background: #c44569"></div> <div id="kutu6" class="kutu" style="background: #f19066"></div> </body> </html> |
Ofis Programında Link Verme
Link verme konusu genellikle HTML ile ilişkili bir konu olmasına rağmen Word, PowerPoint gibi ofis programlarında link vermek mümkündür. Aşağıdaki görsellerde Word programında bir yazıya nasıl link vereceğimizi göstereceğim.
Word Programını açıktan sonra link olmasını istediğiniz yazı yada resmi seçtikten sonra Ekle sekmesinden bağlantı linkine tıklayın. Ekle / Bağlantı
Ardından açılan panelden link vermek istediğiniz sayfanın adresini aşağıdaki gibi yazıp tamam butonuna tıklayın. Sadece web sayfalarına değil aynı zamanda başka bir dosya, resim yada video dosyasına link vermek mümkündür.
Ayrıca başka bir dosyaya link vermek için dosyaya göz at seçeneğine tıklayıp, bilgisayarınızdan dosyayı seçip işaretleyebilirsiniz.
Sonuç
Link verme konusu HTML ile ilişkili olmasına rağmen bu yazıda HTML dosyasında çeşitli link verme senaryolarının yanı sıra ofis programında nasıl link vereceğimizi inceledik. Link verme ile ilgili olası tüm senaryolar işlenmesine rağmen gözden kaçan bir nokta varsa aşağıda yorum olarak belirtebilirsiniz.
şu kodtaki resime nasıl link verebillirim
merhaba web tasarımı yapıyormusunuz özel projeler yoksa sadece eğitimmi veriyorsunuz ?
Site üzerinde belli programlama konuları hakkında örnekler yapıyorum. Daha çok eğitim konuları diyebiliriz.