FrontEnd Developer RoadMap – HTML 5 Tutorial 21 Link Vermek Etiketi


Merhabalar, bu yazımda önemli konularımızdan biri olan a etiketini ele alacağız.

Html sayfalarında başka sayfalara yönlendirmek için linkler veririz.

Bunu yaparken a etiketini ve etiketin attribute’u href kullanılır.

A etiketi yardımıyla kendi web projemizin farklı sayfalarına linklendirme yapabileceğimiz gibi farklı internet sayfalarına linklendirme yapabiliriz. Bulunduğumuz sayfalar içinde belirlediğimiz bölümlere linkler yardımıyla ulaşmak için kullanabiliriz.

Temel kullanımı aşağıdaki gibidir.

<a href="link">Görünecek İsim</a>

a  Anchor çapa atma çapalama isminden gelir. Bu bir sayfaya çapa atmak bağlantı kurmak anlamındadır.

href attribute’u değer olarak bir adres alır. Ya da bulunulan sayfa içinde bir yol gösterilir. Href’e indirilebilecek bir dosya adresi verirseniz linke tıklandığında indirme işlemi başlar.

a etiketi yardımıyla oluşturulmuş bir linke tıkladığımızda ilgili sayfa bulunan sayfa içinde açılır. Yeni bir sayfada açılmaz. Yeni sayfada açılsın istersek ilgili link için target attribute’unu kullanmak gerekir. Alabildiği değerler ve anlamları aşağıdaki gibidir.

DeğerTanım
_blankBelgeyi yeni bir pencerede veya sekmede açar.
_selfBelgeyi aynı çerçeve içerisinde açar. (Varsayılan)
_parentBelgeyi ana frame’de açar.
_topBelgeyi pencerenin gövdesinde açar.
frameismiİsmi belirten frame üzerinde açar.

Kullanım örneği

<a href="" target="_blank"></a>

1 Farklı Bir İnternet Sayfasına Link Verme

Google sayfasına ismi Google’a Git olacak şekilde bir link verelim.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <a href="https://www.google.com.tr" target="_blank">Google'a Git</a> <br><br>


</body>
</html>

Sayfayı çalıştıralım.

Linke tıklarsak Google’a gider. Ve bunu bulunduğu sayfa içinde yapar. Google’ı yeni sekmede açalım.

<a href="https://www.google.com.tr" target="_blank">Google'a Git</a>

2 Proje İçindeki Sayfalara Gitmek

Şimdi bu sayfa içinde Metin Biçimlendirme index.html sayfasına bir link verelim.

Şimdi önemli olan buradaki klasör yapısını iyi anlayabilmektir. Biz 15 A Etiketi içindeki index.html sayfasını çalıştırdığımızda artık orası bizim için kök dizindir. Kök dizinin içindeki diğer dosyalara doğrudan erişimi vardır.

Ancak açmaya çalışacağımız diğer index.html sayfası kök dizinimizin dışında bir klasör içindedir. Eğer yapıya bakarsak olayı şöyle anlamaya çalışalım.

14 Metin Biçimlendirme Etiketleri ile 15 A Etiketi Aynı seviye hiyerarşiye sahipler. Demek ki 15 A Etiketi içindeki bir dosyadan bir geri çıksak 14 Metin Biçimlendirme Etiketleri Klasörü artık bizim için görünür olacaktır. Ona ulaşabildikten sonra içindeki dosyalara da ulaşabiliriz.

Html’de bulunduğumuz yeri kök dizin olarak kabul ettiğimiz bir klasör dışarı çıkmayı ../ notasyonu ile sağlarız.

Örneğin ilgili dosyamız 15 A Etiketi klasörünün içinde de Test diye bir klasörün içinde olsaydı bizim 15 Metin Biçimlendirme Klasörüne ulaşabilmek için 2 seviye dışarı çıkmamız gerekecekti.

Bunun için ../../ şeklinde yazmamız gerekecekti. Birincisi Test klasöründen dışarı çıkmış olacak 16 A Etiketi içine ulaşmış olacaktı. 2.si de buradan dışarı çıkıp ilgili klasörü görebilir olacaktı.

<a href="../14 Metin Biçimlendirme Etiketleri/index.html">Metin Biçimlendirme Sayfasına Git</a>

Şu şekilde yazmak gerekecekti.

Neden bunu yapıyoruz da doğrudan bütün dosya yolunu yazmıyoruz?

Şimdi şöyle bakalım. İlgili index.html sayfasının tam yolunu alalım.

C:\Users\merye\OneDrive\Masaüstü\Desktop\Html Tutorial\14 Metin Biçimlendirme Etiketleri\index.html

C:\ dizini benim bilgisayarımdaki bir adrestir. Eğer ben bu projeyi bilgisayarımda farklı bir klasöre taşırsam ya da bir sunucuya yüklersem bu adres tamamen anlamsız hale gelecektir. O yüzden tam adres yazmak yerine kök dizinden hesap yaparak klasör yapısında ../ yardımıyla üst seviyelere çıkılır ve ilgili dosyanın adresi verilir.

3 Mail Uygulamasına Yönlendirme

A etiketi ile tıklandığı anda kullanıcıyı bir eposta gönderme uygulamasına ya da sayfasına yönlendirip belirtilen mail adresine mail yazması sağlanabilir.

Bunun için mailto: kullanılır. mailto: dedikten sonra mail adresi yazılır. İsteğe bağlı olarak subject belirtilebilir. Belirtilmese de sorun olmayacaktır. target’ın _top değeri ile sayfa üzerinde çalışması sağlanır.

<a href="mailto:mbilginer@brainytech.net?subject=Konu" target="_top">E-posta Gönder</a>

Tıklayalım…

Biraz daha detaylandırarak aşağıdaki alanlar da eklenebilir.

<a href="mailto:mbilginer@brainytech.net?subject=Konu&body=İçerik&cc=helpdesk@brainytech.net&bcc=sirius@brainytech.net" target="_top">
 E-posta Gönder
 </a><br><br>

4 Telefon Bağlantısı Oluşturma

<a href="tel:+905013454523">0501 345 45 23</a>

Mobilde açıp tıkladığımızda bizi doğrudan rehberde arama ekranına götürür.

5 İndirme Linki Oluşturma

A etiketinin href özelliğine link olarak bir dosyanın yolu verilirse buna tıklandığında bu dosyayı bilgisayarınıza indirir.

Bulunduğumuz dizine bir pdf dosyayı attım.

Şimdi bunun yolunu link olarak vereceğim.

 <a href="Test.pdf">Dosyayı İndir</a>

Aynı dizinde olduğumuz için doğrudan dosyanın adını yazmam yeterli olacaktır.

Tıkladığımda indirme işlemi başlayacaktır.

Sayfa içi yönlendirmeye bir sonraki bölümde bakalım.

A etiketine ait attribute ve değerlerine aşağıdaki tablodan bakabilirsiniz.

NitelikDeğeriAçıklama
downloadDosya adıBağlantıya tıklandığında eğer indirilebilecek bir dosya var ise indirme işlemini başlatır
hrefURLBağlantıya tıklandığında gidilecek adres
hreflangdil_koduBağlantının dilini belirtir
mediamedia_sorgusuBağlantının hangi cihaz/ortam için optimize olduğunu belirtir
pingURLBağlantıya tıklandığında belirlenen bir adrese HTTP POST isteği gönderir
relalternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag
Geçerli bağlantı ile belirtilen bağlantı arasındaki ilişkiyi belirtir
target_blank
_parent
_self
_top
frame_adı
Bağlantının nerede nasıl açılacağını belirtir
typemedya_tipiBağlantının ortam türünü belirtir.

Bir sonraki yazımda görüşmek üzere.

Exit mobile version