HTML DERSLERİ

Link Verme

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.

Çıktı:

html link verme

html link verme

 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.

yazıya link verme

yazıya link verme

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.

Sayfayı yeni bir sekmede açmak isterseniz de target niteliğini eklemelisiniz. Onu da eklersek kodumuz şu şekilde değişecektir.

Çıktı:

resme link verme

resme link verme

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.

Çıktı:

link verme

link verme

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.

pdf link verme - pdf indirme

pdf link verme – pdf indirme

 

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.

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.

 

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.

 

3 Yorum

eyüp için bir yanıt yazın X

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin

Okumaya devam etmek ve tüm arşive erişim kazanmak için hemen abone olun.

Okumaya devam et