HTML Linkler

HTML Linkler

HTML'de linkler tıklanıldığında istenilen web sayfasına gitmeyi sağlayan elemanlardır. Ayrıca istenilen dosyanın(resim, pdf, video vb.) açılması için de linkler kullanılır.
Link oluşturmak için a etiketi kullanılır. a etiketi kapatılan etikettir.href parametresi ile hangi sayfanın açılacağı yazılır.
Böylece a etiketleri arasındaki nesnelere tıklanıdığında href parametresinde yazan sayfa açılır.
Örnek:

<a href="http://www.frontendokulu.com">Web Tasarım Öğren</a> Yukarıdak örnek incelendiğinde Web Tasarım Öğren yazısına tıklandığında www.frontendokulu.com sayfasına gidilecektir.

Link'i kullandığınız sayfa ile gideceğiniz sayfa aynı konumda ise sadece sayfa ismini yazmak yeterlidir.
Örneğin sayfa1.html dosyasının içindesiniz ve sayfa2.html sayfasına link vermeniz gerekiyor. Bu iki dosya aynı konumda bulunuyorsa sayfa1.html dosyasına aşağıdaki kodu yazmanız yeterlidir.

<a href="sayfa2.html">Sayfa 2 ye git</a> Yukarıdaki kod için basitçe açıklama şudur : Ulaşmak istediğiniz dosyanın konumunu ve sayfa adını href parametresine yazmalısınız.

Linkler için bir de target parametresi kullanılır. Bu parametre açılacak olan sayfanın konumunu belirler. Boş bırakıldığında aynı sayfadan açılacak olan sayfaya gidilir. target parametresine _blank değeri verilirse link yeni sekmede açılır. target parametresine iframe_ismi değeri verilirse link ismi verilen iframe'de açılır.(Böylelikle sayfa içine başka bir sayfa çağırılabilir.)
Not:iframe konusundan ilerde bahsedilecektir.
Örnek:

<a href="http://www.frontendokulu.com" target="_blank">Web Tasarım Öğren</a>

Link ile aynı sayfa içerisinde de link verilebilir. Bunun en sık kullanılan örneği tek sayfalık web siteleridir.
Aynı sayfa içinde link vermek için href parametresine #konum şeklinde değer verilmelidir.
Linke tıklandığında sayfada gideceği bölüm de id parametresine değer verilerek belirlenir.
Örneğin sayfamızda iletişim linkine tıklandığında iletişim ile ilgili bilgi bulunan bir paragraf var. Bu paragraf

<p id="iletisim">İletişim ile ilgili bilgiler</p> şeklinde belirtilir.
Bu paragrafa ulaşmak için gerekli link ise aşağıdaki gibidir. <a href="#iletisim">İletişim</a>

Uygulama örneklerini çözdükçe konu çok daha iyi anlaşılacaktır.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

İletişim

  • info@frontendokulu.com