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>
<a href="https://www.azkod.com/html"> Html Dersleri </a>
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:
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>
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>
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 -->
<a href="pdf_adresi.pdf"> Azkod Pdf </a>
<a href="rar_adresi.rar"> Azkod Rar Dosyası</a>
<a href="word_belgesi_adresi.docx"> Azkod Word Belgesi</a>
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>
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:
<a href="sayfa_adresi" target="acilma_turu"> Bağlantı metni </a>
<a href="http://www.azkod.com/html" target="_blank"> Html Dersleri </a>
<a href="http://www.azkod.com/html" target="_self"> Html Dersleri </a>
<a href="http://www.azkod.com/html" target="_top"> Html Dersleri </a>
<a href="http://www.azkod.com/html" target="_parent"> Html Dersleri </a>
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.
<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>
<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>
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.
<a href="mailto:mail_adresi"> Azkod a mail gönder </a>
<a href="mailto:bilgi@azkod.com"> Mail Gönder </a>
| Önceki Ders: Html Resimler | Sonraki Ders: Html Listeleme |