HTML <a> Etiketi
Örnek
W3Schools.com'a bir bağlantı oluşturun:
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
<a>etiketi, bir sayfadan diğerine bağlantı vermek için kullanılan bir köprüyü tanımlar .
<a>Öğenin en önemli özelliği
href, bağlantının hedefini belirten niteliktir.
Varsayılan olarak, bağlantılar tüm tarayıcılarda aşağıdaki gibi görünecektir:
- Ziyaret edilmemiş bir bağlantının altı çizili ve mavidir
- Ziyaret edilen bir bağlantının altı çizili ve mor
- Aktif bir bağlantının altı çizili ve kırmızı
İpuçları ve Notlar
İpucu:<a> Etiketin özniteliği yoksa ,
hrefyalnızca bir köprü için yer tutucudur.
İpucu: Başka bir hedef belirtmediğiniz sürece, normalde geçerli tarayıcı penceresinde bağlantılı bir sayfa görüntülenir.
İpucu: Bağlantılara stil vermek için CSS kullanın: CSS Bağlantıları ve CSS Düğmeleri .
Tarayıcı Desteği
| Element | |||||
|---|---|---|---|---|---|
| <a> | Yes | Yes | Yes | Yes | Yes |
Öznitellikler
| Attribute | Value | Description |
|---|---|---|
| download | filename | Specifies that the target will be downloaded when a user clicks on the hyperlink |
| href | URL | Specifies the URL of the page the link goes to |
| hreflang | language_code | Specifies the language of the linked document |
| media | media_query | Specifies what media/device the linked document is optimized for |
| ping | list_of_URLs | Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Specifies which referrer information to send with the link |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Specifies the relationship between the current document and the linked document |
| target | _blank _parent _self _top |
Specifies where to open the linked document |
| type | media_type | Specifies the media type of the linked document |
Genel Özellikler
Etiket ayrıca HTML'deki Global Nitelikleri<a> de destekler .
Etkinlik Özellikleri
Etiket ayrıca HTML'deki Etkinlik Niteliklerini<a> de destekler .
Daha fazla örnek
Örnek
Bir resim bağlantı olarak nasıl kullanılır:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools"
src="logo_w3s.gif" width="100" height="100">
</a>
Örnek
Yeni bir tarayıcı penceresinde bir bağlantı nasıl açılır:
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>
Örnek
Bir e-posta adresine nasıl bağlantı verilir:
<a href="mailto:[email protected]">Send email</a>
Örnek
Bir telefon numarasına nasıl bağlantı verilir:
<a href="tel:+4733378901">+47 333 78 901</a>
Örnek
Aynı sayfadaki başka bir bölüme nasıl bağlantı verilir:
<a href="#section2">Go to Section 2</a>
Örnek
Bir JavaScript'e nasıl bağlantı verilir:
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
İlgili Sayfalar
HTML öğreticisi: HTML Bağlantıları
HTML DOM referansı: Bağlantı Nesnesi
CSS Eğitimi: Bağlantıları Şekillendirme
Varsayılan CSS Ayarları
Çoğu tarayıcı, <a>öğeyi aşağıdaki varsayılan değerlerle görüntüler:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}