HTML – LINK ETİKETİ (TAGI)

Link etiketi; HTML dokümanımıza dış verilerin bağlantısını, yani Stil dosyaları veya diğer adıyla CSS dosyalarını ve tarayıcımızın sekme kısımlarında görünen “favicon” dediğimiz ufak simgeyi, sayfamıza dâhil etmemiz için kullandığımız etiket türüdür.

Link etiketi genellikle dış dosyaların bağlantılarını yani CSS dosyalarını, oluşturduğumuz HTML sayfalarımıza dâhil etmemize yarar. Buda HTML sayfamızın daha temiz ve daha düzgün kod yapısında olmasını sağlar. 

Çünkü link etiketi; HTML kodlarıyla oluşturduğumuz herhangi bir objenin boyutlarını, stillerini ve bunun gibi işlemleri CSS dosyalarında belirlediğimiz için, HTML sayfamızı daha kullanışlı hâle getirir.

İlk örneğimize, “favicon” oluşturmakla başlayalım. Faviconda dikkat etmemiz gereken bazı kurallar vardır. Bu kurallardan ilki, faviconun boyutlarıdır. Favicon boyutlarının 16×16, 32×32, 64×64 ve 128×128 pixel boyutlarında olduklarından emin olun. 

Bir diğer kuralı ise dosya uzantılarıdır. Favicon dosya uzantısı genelde, resim.ico uzantısını taşır. Fakat favicon, uzantılarında jpg, png ve gif gibi dosya uzantılarını da destekler. 

Şimdi HTML editör programımızı açalım ve link etiketimizi nasıl oluşturacağımızı öğrenelim?

Link etiketi <head> </head> etiketleri arasına yazılır.

KOD ÖRNEĞİ;

<html> 

       <head> 
             <title>
HTML DERSLERİ </title>

             <link type="image/png" href="favicon.png" rel="icon" >
       </head>

       <body> 
              
       </body> 

</html>

Favicon oluştururken link etiketi bu biçimde kullanılır. Etiket içerisine yazdığımız alt özelliklerin yani type, href, rel gibi özelliklerin, sıralamasını değiştirebilir ve dilediğiniz gibi sıralamaya koyabilirsiniz.

Link etiketin alt özelliklerinin neden kullanıldığı ve ne manaya geldiklerini açıklayalım;

Type özelliği; Verinin türünü belirlemek maksadıyla kullandığımız yerdir. MIME tipleri dediğimiz (image/jpg, image/png , text/css ve text/javascript) gibi veri tiplerini, etiketlerin type kısmına yazarız.
 
Href; Dokümanımıza dış veriyi çağıracağımız zaman, o dış dosyanın bağlantı yolunu belirlediğimiz yerdir. Eklemek istediğimiz dizin yolunu buraya yazarız.

Rel; Geçerli belge ve bağlantı kurulan belge arasındaki ilişkiyi belirler. Diğer değişle veriyi ne tür yapı için kullanılacağını belirtir.

Şimdi dosyamızı kaydedip tarayıcımızı açalım.

GÖRÜNTÜ;

Gördüğümüz gibi faviconumuzu oluşturmuş olduk. Dış dosyaları dokümanımıza bağlamak için bir örnek daha oluşturalım. Bu örneği vermek için önce css dosyası oluşturmamız gerekiyor.

Oluşturduğumuz CSS dosyasını HTML sayfamıza nasıl dâhil ederiz onu görelim?

KOD ÖRNEĞİ;

<html> 

       <head> 
             <title>
HTML DERSLERİ </title>


             <link type="text/css" href="stil.css" rel="stylesheet" media="all" >

       </head>

       <body> 

             <p> Web Site İçeriğim </p>
              
       </body> 

</html>

Media alt özelliği; Bu özelliği favicon oluştururken yazmanıza gerek yoktur. Bu özelliğin taşıdığı mana; bağlantılı belgenin hangi cihazlarla gösterileceğini belirtir. Bunun karşılığına genellikle ya “screen” ya da tüm media türlerini belirlemek için “all” yazılması yeterli olacaktır.

Şimdi çağırdığımız stil dosyasının, çalışıp çalışmadığına bakmak için, body etiketleri arasına bir nesne oluşturup ve o nesneye stil kodları uygulayalım.

İçeriğimize stil kodları uygulamak için oluşturduğumuz stil dosyasını, editör programında açarak paragrafımıza stil verelim. CSS hakkında bilgi sahibi değilseniz o zaman web gelişim akademisi.com’ da ki CSS derslerini takip edebilirsiniz. 

KOD ÖRNEĞİ;

 Stil Dosyası  stil.css
   p
      {
           background : grey ;
           text-align : center ;
           font-weight : bold ;
           font-size : 50px ;
           color : maroon ;
       }

Buraya yazdığımız “p” harfi HTML sayfasındaki “<p> … </p>” etiketine erişmek içindir. Süslü parantezler "{ }" ise “p” etiketinin içindeki elemente, stil kodlarını uygulayacağımız yerdir. 

Dosyayı kaydetmeden önce, tarayıcımızı açalım ve içeriğimiz arasındaki farkları görmek için CSS kodlarının yazılmadan önceki halini görüntüleyelim.

GÖRÜNTÜ;

Web Site İçeriğim

 

Sonra CSS dosyamızı kaydedip tekrar sayfamıza baktığımızda, CSS kodlarında belirlediğimiz özellikleri görmüş olacağız.

GÖRÜNTÜ;

Böylece stil dosyası, bizi karışık kod yapısından kurtarmış oldu. Çünkü stil dosyasını oluşturmasaydık CSS kodlarını, içeriğini oluşturduğumuz etiketler arasında barındıracaktık. Buda hem kod kalabalığı hem de kod yoğunluğundan dolayı web sayfa açılma hızına da etki etmiş olacaktı.

BU ETİKETE ATANAN ALT ÖZELLİKLER;

Özellik Değer   Tanım
charset charset Bağlı belgenin karakter kodlamasını tanımlar.
href URL Dokümanımıza dış veriyi çağıracağımız zaman, o dış dosyanın bağlantı yolunu belirlediğimiz yerdir. Eklemek istediğimiz dizin yolunu buraya yazarız.
hreflang language Hedef URL dil kodu yazılır.
media screen
tty
tv
projection
handheld
print
braille
aural
all
Belgenin görüntüleyineceği cihaz belirtilir.
rel alternate
appendix
bookmark
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
Geçerli belge ve hedef URL arasındaki ilişkiyi belirler /açıklar.
rev alternate
appendix
bookmark
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
Bağlantılı belge ve geçerli belge arasındaki ilişkiyi belirler.
sizes  HeightxWidth Bağlantılı kaynağın boyutunu belirler.
target _blank
_self
_top
_parent
frame_name
Sayfayı yüklemek için hedef bağlantıyı belirler.
type media_type Verinin MIME Türünü belirler.

 

Tarayıcı Desteği;

 Chrome Firefox IE Opera Safari
EVET EVET EVET EVET EVET