Bağlantılar (Linkler) neredeyse tüm web sayfalarında bulunur. Bağlantılar, kullanıcıların sayfadan sayfaya kendi yollarını tıklamalarına izin verir.

HTML Link Köprü Oluşturma

Bir bağlantıya tıklayabilir ve başka bir belgeye geçebilirsiniz.

Fareyi bir bağlantının üzerine getirdiğinizde, fare oku küçük bir ele dönüşür.

Not: Bağlantının metin olması gerekmez. Bir bağlantı, bir görüntü veya başka herhangi bir HTML öğesi olabilir!

 

HTML Link Nasıl Eklenir?

HTML <a> etiketi bir köprüyü tanımlar. Aşağıdaki sözdizimine sahiptir:

<a> öğesinin en önemli özelliği, bağlantının hedefini belirten href niteliğidir.

Bağlantı metni, okuyucu tarafından görülebilecek kısımdır.

Bağlantı metnine tıklamak, okuyucuyu belirtilen URL adresine gönderecektir.

Aşağıdaki örnekte algoritmaornekleri.com sitesine nasıl link verildiğini göreceksiniz.

Çıktı:

Sitemizi ziyaret edin. 

(Yukarıdaki link tıklandığında aynı pencerede anasayfa açılacaktır.)

 

Varsayılan olarak, bağlantılar tüm tarayıcılarda aşağıdaki gibi görünecektir:

• Ziyaret edilmemiş bir bağlantının altı çizilidir ve mavidir.
• Ziyaret edilen bir bağlantının altı çizili ve mor.
• Etkin bir bağlantının altı çizilidir ve kırmızıdır.

HTML Linkler – Target Niteliği

 

Varsayılan olarak, bağlantılı sayfa mevcut tarayıcı penceresinde görüntülenecektir. Bunu değiştirmek için bağlantı için başka bir hedef belirlemelisiniz.

Hedef özniteliği, bağlantılı belgenin nerede açılacağını belirtir.

Hedef özellik aşağıdaki değerlerden birine sahip olabilir:

• _self – Varsayılan. Belgeyi tıklandığı pencerede / sekmede açar.
• _blank – Belgeyi yeni bir pencere veya sekmede açar.
• _parent – Belgeyi üst çerçevede açar.
• _top – Belgeyi pencerenin tam gövdesinde açar.

 

Örnek: Bağlı belgeyi yeni bir tarayıcı penceresinde veya sekmede açmak için target = “_ blank” kullanın:

 

Sayfa İçi Bağlantı Oluşturma

Mevcut sayfa içinde sayfanın bir noktasından başka bir noktasına gitmek için kullanılır. İki kavramı birleştirerek sayfa için bağlantı oluşturulur. Hedeflenen nokta (bu kavrama çapa ismini veriyoruz.) ve hedeflenen noktaya gidecek bağlantı(buna link adını veriyoruz). Bağlantıya çapa adına # koyarak ulaşıyoruz.

Çapa: HTMLnin eski sürümlerinde çapalar için <a name=”çapaadı”>…</a> şekilinde kullanılar yapılırdı. Günümüzde name ve id değerine sahip bütün etiketler potansiyel bir çapadır.

Örn:

buradaki makale1 ve yorumlar çapanın adını vermektedir.

 

Gelelim bu çapalara nasıl ulaşacağımıza bağlantı için <a> etiketini kullandığımızı ve sayfa içindeki bir noktaya(id ve name değeri olan) ulaşmak için # ve çapa adını birlikte kullandığımızı söylemiştik.

Örn:

Şimdi gelelim iki kavramı birleştirmeye. Örneğimizde iki tane link ve iki tane çapa olacak. Sayfanın üstüne ve sayfanın altına isimleri ust ve alt olan iki tane çapa atacağız. Bu çapalara yönlenen iki tane bağlantı ( a ) oluşturacağız. Kaydırma çubuğu olması için br etiketlerini sıklıkla kullanacağız.

Örn1:

Örn 2:

 

Sayfalar arası bağlantı oluşturma

Sayalar arası bağlantı yada site içinde her hangi bir dosyaya(resim, video, belge, müzik vs.) bağlantı vermek için dosyanın konumuna göre dört farklı durum söz konusudur.

• Bağlantı verilecek sayfa aynı dizindeyse dosyanın tam adı href kısmına yazılır.
• Bağlantı alt klasörlerdeyse klasor1/klasor2/dosyadi şekilinde alt klasörlere geçip yine dosya adı yazılır. Bu diğer dosyalar içinde geçerlidir.
• Bağlantı üst klasördeyse her çıkılacak üst klasör için ../ sembolü kullanılır. Kaç tane üst klasöre çıkılacaksa çıkılacak klasör kadar ../ sembolü kullanılır. (Örn: ../../../ üç üst klasör)
• Bağlantı üst klasörlerden birinin içindeki bir dosyada ise üst klasöre çıkıp ilgili klasöre girilerek dosya adı bulunur. (Örn: ../../resim/resim1.jpg)

Şimdi gelelim yukarıdaki kavramları aşağıdaki resim ile açıklamaya;

iletisim.html sayfasından hakkimizda.html sayfasına bağlantı veriyorsak bu bağlantı aynı dizindeki başka bir dosyaya bağlantı vermektir.

iletisim.html

 

index.html sayfasından sayfalar içindeki iletisim.html sayfasına bağlantı veriyorsak bu durumda alt klasördeki bir sayfaya bağlantı veriyoruz demektir.

index.html

 

hakkimizda.html sayfasından index.html sayfasına link veriyorsa üst klasörde bir sayfaya link veriyoruzdur.

hakkimizda.html

 

galeri.html sayfasından resimler içindeki res1.png dosyasına bağlantı veriyorsak üst klasör içindeki başka bir dosyaya link veriyoruz demektir.

galeri.html

Dış sayfaya bağlantı oluşturma

Dış sayfaya bağlantı oluşturmak için bağlantı verilecek sayfanın protokol adından sonra :// sembolü ve web adresi yazılır. Protokol isimleri sıklıkla http olmasına rağmen https ve bir kaç tane daha farklı protokol bulunmaktadır.

Kısaca açıklayacak olursak http://webadresi şekilinde sıklıkla tanımlama yapılır. Eğer prokotol kullanılması unutulursa sayfa içinde yazdığımız isimde klasör arayacaktır.(muhtemelen olmadığı için sayfa bulunamadı hatası verecektir)

Kullanım:

 

mailto ve tel bağlantısı oluşturma

mailto günümüzde kullanımı pek olmamasına rağmen tel bağlantısı da bir o kadar hızlı kullanılmaya başlanmıştır.

mailto: link verilecek kişinin mailadresi yazılır. Bu özellik çalışması için bilgisayarda mail programının olması gerekir. Outlook gibi.

tel:telefon numarası verilecek kişinin numarası yazılır. Unutmayın bu özellik mobil cihazlarda çalışacaktır. Telefon numarasını çevirebileceğimiz bir cihaza ihtiyaç var sonuçta.

 

Bağlantılarda en çok kullanılan nitelikler

target: niteliğinin _blank değeri sıklıkla kullanılır. Sayfayı yeni bir sekmede açmak için target=”_blank” olarak kullanılmaktadır.

download niteliği ise dosya bağlantılarında kullanılır. dosyayı açmayıp kullanıcının bilgisayarına kaydeder.