HTML5 ile oluşturacağımız internet sitemizde bazı kısımlara bazı yazılara hatta ve hatta bazı resimlere link vermek isteyebilirsiniz. HTML5 yazıya link verme işlemleri gibi vereceğiniz linkin çeşidini, şeklini ve hatta hatta rengini gibi farklı özellikler belirleyebilirsiniz.
Sadece yazıya link vermekle kalmaz ekleyeceğiniz linke birden farklı özellikler sağlayabilirsiniz. Bu videolu ve yazılı içeriğimiz de ise işleyeceğimiz konular :
- HTML5 Yazıya Link Verme
- HTML5 Link Stilleri
- HTML5 Target Etiketleri
- HTML5 Resme Link Verme
- HTML5 Başlıklara Link Verme
Sırası ile gitmektedir. Aşağıda yer alan akordiyon menüler sayesinde istediğiniz başlığı takip edebilir, istediğiniz üzerinde bilgi sahibi olabilirsiniz.
HTML5 Link Bağlantıları Nelerdir ?
Aslına bakılığında normal olarak her hangi bir yazıya link ekleme işlemi çok basit olmakla beraberinde en önemli olan kısım bu vereceğimiz linkin yerine göre yeni sekmede açılması göze güzel gelmesi internet sitenize gelen ziyaretçileri daha çok tutmanızı bu dolayısıyla da hemen çıkma oranını düşürerek arama motorları robotları gözünde iyi bir yerlere gelmenize olanak sağlamaktadır.
[accordion] [accordion_content title=”HTML5 Yazıya Link Verme” icon=”” active=”active”]Bir yazıya link vermek istiyor iseniz aslında en basit ve hep kullanılan hatta ve hatta isminiz soyadı gibi aklınızda olacak olan bu kod sayesinde en ufak bir yazıya aşağıda yer alan kod sayesinde her hangi bir yazıya link, köprü işlemini gerçekleştirebilirsiniz.
<a href="https://webdunya.com">WebDünya</a>
Yukarıda yer alan kısımda WebDünya adlı yazıya tıklanıldığında etiketin içinde yer alan bağlantıya gidilecektir. Eğer şuanda internet üzerinde yayınlanmayan direkt olarak göstereceğiniz sayfalar var ise bunları link ile çağırmak istiyor iseniz kayıt etmiş olduğunuz ismi olarak link kısmına yazabilirsiniz.[/accordion_content][accordion_content title=”HTML5 Link Stilleri” icon=”” active=”active”]HTML5 için ekleyeceğimiz yazı stillerine geldiğimizde ise burada durum biraz farklılık göstermektedir. Aslına baktığınızda karmaşıklıktan çok sadece dikkat etmeniz gereken bir kaç kısım vardır. Sadece size uzun ve kalabalık görünen bu kod gibi görmek yerine anlayabilmek için üzerinde biraz düşünün. Gerekli açıklamaları aşağıda yapacağım zaten.
<style> a:link { text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: blue; text-decoration: underline; } </style>Yukarıda a etiketine tanımladığımız link sayesine eğer bir şey tanımlamamış olsaydık yazımız mavi ve altı çizili şekilde gözükecektir. Sizler bu sayede otomatik rengi mavi olan renk etiketinin rengini visited etiketi ile değiştirebilirsiniz. Link etiketi sayesinde de text-decoration etiketi ile altının çizili olmadığını belli etmiş olursunuz. Hover etiketinin çalışma mantığı ise mouse ile üzerine geldiğinizde linkin rengini altının yada üstünün çizili olmasını, arkaplan rengini ayarlayabilir, active komutu içinde linke tıkladığınız anda değişen değerlerdir. Text-decoration etiketinin içine kullanabileceğiniz komutlar ise underline, overline, line-througt etiketlerini kullanabilirsiniz. Sırası ile bunların anlamları altı çizili, üstünden çizgili ve ortasından çizgili bir şekilde ekranda karşımıza çıkacaktır.[/accordion_content][accordion_content title=”HTML5 Target Etiketleri” icon=”” active=”active”]HTML5’te bir nevi link için belirlediğimiz renk, arkaplan rengi, yazı dekorasyonu gibi özellikler yerine linkin nasıl bir sekmede açılacağını, nasıl açılacağını da belirlememiz mümkündür. Bunun için ise target komutunu kullanırız. Target komutunun kullanılması ise aşağıda yer alan şekildedir :
<a href="https://webdunya.com/" target="_blank">WebDünya</a>
Sadece target blank etiketi kullanılmamasına karşın _blank : Bağlı dokümanı yeni bir pencerede veya sekmede açar, _self : Bağlı dokümanı tıklandığı gibi aynı pencerede / sekmede açar (varsayılan değerdir), _parent : Bağlı belgeyi üst çerçevede açar, _top : Bağlı belgeyi pencerenin tüm gövdesinde açar komutları içermektedir.[/accordion_content][accordion_content title=”HTML5 Resme Link Verme” icon=”” active=”active”]Resme link vermek isteyen kullanıcılardan gelen istek üzerine en çok merak edilen bir sorun ise budur. Bir bakıma baktığınızda <a> etiketinin içine <img> etiketi kullanılabilir. Kullanımı ise :
<a href="https://webdunya.com"><img src="logo.jpg"></a>
kullanılır. Artık bu sayede seçeceğiniz resim sunucuda yada bilgisayarınızda bulunuyor ise ismi ile çağırabilir. Dışarıdan bir resim bağlantısı çağıracak iseniz bir link girebilirsiniz.[/accordion_content][accordion_content title=”HTML5 Başlıklara Link Verme” icon=”” active=”active”]Wikipedia ‘da yada diğer internet sitelerinden gördüğünüz kadarı ile içeriklerin üst tarafında yer alan bir kutuda içerikte ki başlıklar yazarak tıklanıldığında direkt olarak o başlığa gidebilirsiniz. Bizde böyle bir şey yapmak istiyor isek :
<h1 id="1">Başlık</h1> <a href="#1">Başlığa direkt gitmek için tıklayın.</a>
Başlık etiketinin için id kısmı açarak bir id vermekteyiz. Ardından Başlığa gitmek için olan kısma ise <a> etiketinin href komutu ile yolunu o id kısmını belirtmemiz yeterli olacaktır. Eğer başka bir sayfadan başka bir başlığa gitmesini sağlamak istiyor seniz o sayfa adını yazdıktan sonrasında id’yi yazmanız yeterli olacaktır. Bu sayede Başlığa direkt gitmek için tıklayın adlı yazıya tıklanıldığında sayfada başlık bir nerede ise oraya gidilecektir. Bu iki komutları da istediğiniz yerde biçimde ve başlık etiketinde kullanabilirsiniz.[/accordion_content] [/accordion]
Yukarıda yer alan kodları kendiniz denemediğiniz sürece bir şey öğrenemezsiniz. Yukarıda yer alan kodları kendiniz bir not belgesi açıp yada internet sitenizde deneyerek pekiştirmediğiniz sürece bir şey kazanamayacaksınız demektir. HTML5 link verme işlemi aslında çok basit gibi görünse de içinde ne kadar farklı şey barındırdığını sizlerde görmüş oldunuz.