En son web geliştirme öğreticiler

HTML Bağlantılar

❮ Önceki Sonraki Bölüm ❯

Bağlantılar neredeyse tüm web sayfalarında bulunur. Bağlantılar kullanıcıların sayfadan sayfaya tıklayın yola izin verir.

HTML Bağlantıları - Köprüler

HTML bağlantıları köprüler bulunmaktadır.

Bir köprü başka belgeye metin veya tıklayabilir bir görüntü ve atlama olduğunu.

HTML Bağlantıları - Sözdizimi

HTML'de, bağlantılar ile tanımlanır <a> etiketi:

<a href=" Örnek
<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a>
Kendin dene "

href niteliği hedef adresini belirtir (http://www.w3ii.com/html/default.html)

Bağlantı metni görünür kısmıdır (Visit our HTML tutorial) .

bağlantı metni tıklandığında, belirtilen adrese gönderecektir.

bağlantı metni metin olmak zorunda değildir. Bu bir HTML resim veya başka herhangi bir HTML öğesi olabilir.

Alt klasör adresleri bir sondaki eğik çizgi olmadan, sunucuya iki istek oluşturabilir. Birçok sunucu otomatik olarak adrese bir eğik çizgi ekleyin ve sonra yeni bir istek oluşturur.

Yerel Bağlantılar

Yukarıdaki örnekte, mutlak bir URL kullanılan (A full web address) .

Yerel bir bağlantı (link to the same web site) göreceli bir URL ile belirtilir (without http://www.... ) .

Örnek

<a href="html_images.asp">HTML Images</a>
Kendin dene "

HTML Bağlantıları - Renkler

Bir bağlantının üzerine fareyi hareket ettirdiğinizde, iki şey normal olur:

  • Fare ok biraz kontrolden dönüşecek
  • bağlantı elemanının rengi değişecek

Varsayılan olarak, bir bağlantı şöyle görünecektir (in all browsers) :

  • Bir ziyaret edilmemiş bağlantı Altı çizili ve mavi
  • Bir ziyaret edilmiş bağlantı Altı çizili ve mor
  • Aktif bir bağlantı Altı çizili ve kırmızı

Sen stilleri kullanarak, varsayılan renklerini değiştirebilirsiniz:

Örnek

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>
Kendin dene "

HTML Bağlantıları - target Özellik

target niteliği bağlantılı belgeyi açmak için nereye belirtir.

Bu örnek, yeni bir tarayıcı penceresinde veya yeni bir sekmede bağlantılı belge açılır:

Örnek

<a href="http://www.w3ii.com/" target="_blank">Visit w3ii!</a>
Kendin dene "
Hedef değer Açıklama
_blank yeni bir pencerede veya sekmede bağlantılı belge açar
_self Tıklandığı aynı çerçeveye bağlı belgeyi açar (this is default)
_parent ana çerçeve içinde bağlı belgeyi açar
_top pencerenin tam gövdesinde bağlı belgeyi açar
framename adlandırılmış çerçeveye bağlı belgeyi açar

Web sayfanız bir çerçeve içinde kilitliyse, kullanabileceğiniz target="_top" çerçevenin dışına kırmaya:

Örnek

<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a>
Kendin dene "

HTML Bağlantıları - Link gibi Görüntü

Bağlantılar olarak görüntüleri kullanımı yaygındır:

Örnek

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Kendin dene "

border: 0 IE9 önlemek için ilave edilir (and earlier) resmin etrafına çerçeve görüntülemesini.

HTML Bağlantıları - Bir Yer İşareti Oluşturma

HTML imleri okuyucular, bir Web sayfasının belirli bölgelerine atlamasını sağlamak için kullanılır.

Web siteniz uzun sayfa varsa imleri pratiktir.

Bir yer imi yapmak için öncelikle işareti oluşturmak ve sonra buna bir bağlantı eklemek gerekir.

bağlantı tıklandığında, sayfa imi ile yere kayar.

Örnek

İlk olarak, bir yer imi oluşturmak id özniteliği:

<h2 id="tips">Useful Tips Section</h2>

Sonra, yer imine bir bağlantı eklemek ("Useful Tips Section") aynı sayfa içinde,:

<a href="#tips">Visit the Useful Tips Section</a>

Veya, yer imine bir bağlantı eklemek ("Useful Tips Section") başka bir sayfadan,:

Örnek

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Kendin dene "

Bölüm özeti

  • HTML kullanın <a> bir bağlantı tanımlamak için eleman
  • HTML kullanın href bağlantı adresini tanımlamak için öznitelik
  • HTML kullanın target bağlantılı belgeyi açmak için nereye tanımlamak için öznitelik
  • HTML kullan <img> elemanı (inside <a> ) bir bağlantı olarak bir resim kullanmak
  • HTML kullanın id niteliği ( id=" value ") bir sayfa yer işaretlerini tanımlamak için
  • HTML kullanın href niteliğini ( href="# value ") imine bağlamak için

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »

HTML Link Etiketler

Etiket Açıklama
<a> Bir köprüyü tanımlar

❮ Önceki Sonraki Bölüm ❯