Html Bağlantılar

Tüm web sitelerde bağlantılar yani linkler bulunmaktadır. Bağlantılar web sitelerinin olmazsa olmazı'dır. Herhangi bir sayfadan diğer sayfaya geçmek için link (url-bağlantı) kullanmamız ve nasıl kullanıldığını bilmemiz gerekmektedir. 

Html dilinde link oluşturma işlemi <a href=" "> ile </a> etiketi arasına metin veya görsel eklenerek kullanılmaktadır. 

Bilgi: href bölümünün içine linkin (bağlantının) gideceği adres yazılmaktadır.

Bağlantılar kendi sayfalarımızada bağlantı vererek sitemiz içinde gezinti yapabildiğimiz gibi başka web sitelerinede bağlantı verebilmekteyiz.

a Etiketi Kullanımı:

<a href="sayfa_adresi"> Bağlantı oluşturulacak metin </a>

Örnek:

<a href="https://www.azkod.com/html"> Html Dersleri </a>

Kodu Çalıştır

Bilgi: Linklerin üzerine gelindiğinde fare imleci küçük el haline gelmektedir. 

Bilgi: Linkler sadece yazı üzerine değil, resimler üzerinede link(bağlantı) verilebilmektedir. 

a etiketinin iki tür kullanımı vardır:

  • Sayfa Dışı Bağlantılar (Linkler)
  • Sayfa İçi Bağlantılar (Linkler)
  • Mail Adresine Bağlantı Oluşturma

Sayfa Dışı Bağlantılar (Linkler)

Başka bir sayfaya veya başka bir siteye giden bağlantılara sayfa dışı bağlantılar denmektedir. Sayfa dışı bağlantılar web sitemizin içindeki sayfalara gidebildiği gibi başka sitelerin sayfalarına erişim sağlamak için kullanılmaktadır.

Kendi web sitemizin herhangi bir sayfasına bağlantı oluşturalım.

<a href="https://www.azkod.com/css"> Css Dersleri </a>

Kodu Çalıştır

Kendi web sitemizin dışında da bağlantı verebiliyorduk şimdi ise başka bir siteye bağlantı verelim.

<a href="https://www.google.com"> Google </a>

Kodu Çalıştır

Resim Dosyasına Bağlantı Verme

Bağlantıya tıklandığında resmi açmaktadır.

<a href="resim_adresi.jpg"> Azkod Resim </a>

<!-- .jpg yerine
                .png
                .bmp
                .gif vb yazılabilir -->
  

Kodu Çalıştır

Pdf Belgesine Bağlantı Verme

<a href="pdf_adresi.pdf"> Azkod Pdf </a>

Kodu Çalıştır

Rar (Sıkıştırılmış) Dosyaya Bağlantı Verme

<a href="rar_adresi.rar"> Azkod Rar Dosyası</a>

Kodu Çalıştır

Word Belgesine Bağlantı Verme

<a href="word_belgesi_adresi.docx"> Azkod Word Belgesi</a>

Kodu Çalıştır

Resme Bağlantı Verme

Resmin üzerine tıklandığında bir web sitesine gitme işlemi yapacaktır.

<a href="baglanti_adresi">

<img src="resim_adresi" width="50" height="50"> 

</a>

Kodu Çalıştır

Target Parametresi

Target kelimesinin anlamı hedef demektir. Target parametresi a etiketi ile birlikte kullanılmaktadır. Target parametresi ile gidilecek olan bağlantının nasıl açılacağını belirlemek için kullanılmaktadır. Target parametresi ile sayfaların nasıl açılacağını belirlemek için bazı alt parametreler bulunmaktadır.

Target Parametresi içinde Kullanılan Alt Parametreler:

  • _blank : Bağlantının yeni pencerede açılmasını sağlar. En çok kullanacağımız parametredir.
  • _self : Varsayılan özelliktir. Aynı pencere içerisinde açılmasını sağlar.
  • _top : Aynı pencere içerisinde üstten açılmasını sağlar.
  • _parent : Ana çerçevede açma işlemi yapar.

Target Parametresi Kullanımı

<a href="sayfa_adresi" target="acilma_turu"> Bağlantı metni </a>

 

Target Parametresinin _blank ile Kullanımı

<a href="http://www.azkod.com/html" target="_blank"> Html Dersleri </a>

Kodu Çalıştır

Target Parametresinin _self ile Kullanımı

<a href="http://www.azkod.com/html" target="_self"> Html Dersleri </a>

Kodu Çalıştır

Target Parametresinin _top ile Kullanımı

<a href="http://www.azkod.com/html" target="_top"> Html Dersleri </a>

Kodu Çalıştır

Target Parametresinin _parent ile Kullanımı

<a href="http://www.azkod.com/html" target="_parent"> Html Dersleri </a>

Kodu Çalıştır

Sayfa İçi Bağlantılar (Linkler) (Çapa)

Sayfa içi bağlantılaın diğer bir adı çapa'dır. Bu bağlantılar uzun metinlerin bulunduğu sayfalarda konu ile alakalı bir bağlantıya tıklandığında aynı sayfanın belirlenen bölümüne gitmek için kullanılmaktadır. 

Çapa oluşturma işlemi için a etiketini iki farklı yöntemde kullanmamız gerekmektedir.

<a href="#isim"> Metin Adı </a>

.
.
.

<a name="isim"> Tıklandığında Karşımıza Gelecek Metin </a>

veya 

<a href="#isim"> Metin Adı </a>

.
.
.

<a id="isim"> Tıklandığında Karşımıza Gelecek Metin </a>

Bilgi: Tıklandığında karşımıza gelecek metinde a etiketine name veya id verdiğimizde iki kod aynı işlemi yapacaktır.

Çapa işlemi uzun metinlerde sayfa içinde geçişler yapmak için kullanılmaktadır.

Aşağıda Örnek1 ve Örnek 2 olarak iki sayfa içi bağlantı örneği yapacağız. Bu örneklerimizde name ile id değerlerinin aynı sonucu karşımıza getirdiğini göreceksiniz.

Örnek1:

<p> <a href="#ders1"> Html Ders 1 </a> </p>
<p> <a href="#ders2"> Html Ders 2 </a> </p>
<p> <a href="#ders3"> Html Ders 3 </a> </p>
<p> <a href="#ders4"> Html Ders 3 </a> </p>

<p> 
<a name="ders1"> Html Ders 1 </a>
Azkod ile Html Dersleri ve Html Kodları 1 

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

</p>

<p> 
<a name="ders2"> Html Ders 2 </a>
Azkod ile Html Dersleri ve Html Kodları 2 

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

</p>

<p> 
<a name="ders3"> Html Ders 3 </a>
Azkod ile Html Dersleri ve Html Kodları 3 

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

</p>

<p> 
<a name="ders4"> Html Ders 4 </a>
Azkod ile Html Dersleri ve Html Kodları 4 

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

</p>

Kodu Çalıştır

Örnek2 :

<p> <a href="#ders1"> Html Ders 1 </a> </p>
<p> <a href="#ders2"> Html Ders 2 </a> </p>
<p> <a href="#ders3"> Html Ders 3 </a> </p>
<p> <a href="#ders4"> Html Ders 3 </a> </p>

<p> 
<a id="ders1"> Html Ders 1 </a>
Azkod ile Html Dersleri ve Html Kodları 1 

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

</p>

<p> 
<a id="ders2"> Html Ders 2 </a>
Azkod ile Html Dersleri ve Html Kodları 2 

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

</p>

<p> 
<a id="ders3"> Html Ders 3 </a>
Azkod ile Html Dersleri ve Html Kodları 3 

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

</p>

<p> 
<a id="ders4"> Html Ders 4 </a>
Azkod ile Html Dersleri ve Html Kodları 4 

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

</p>

Kodu Çalıştır

 

Mail Adresine Bağlantı Oluşturma

Mail göndermek için kullanılmaktadır. Belirlenen bir bağlantıya tıklandığında Outlook veya bilgisayarımızda bulunan mail programı tarafından mail gönderme sayfası açılmaktadır. 

Mail gönderme işleminde a etiketi yanında mailto parametresi kullanılmaktadır.

Mailto Kullanımı:

<a href="mailto:mail_adresi"> Azkod a mail gönder </a>

Örnek:

<a href="mailto:bilgi@azkod.com"> Mail Gönder </a>

Kodu Çalıştır

Önceki Ders: Html Resimler Sonraki Ders: Html Listeleme