HTML Bağlantıları
Bağlantılar hemen hemen tüm web sayfalarında bulunur. Bağlantılar, kullanıcıların sayfadan sayfaya kendi yollarını tıklamalarına izin verir.
HTML Bağlantıları - Köprüler
HTML bağlantıları köprülerdir.
Bir bağlantıya tıklayıp başka bir belgeye atlayabilirsiniz.
Fareyi bir bağlantının üzerine getirdiğinizde, fare oku küçük bir ele dönüşecektir.
Not: Bir bağlantının metin olması gerekmez. Bir bağlantı, bir resim veya başka bir HTML öğesi olabilir!
HTML Bağlantıları - Sözdizimi
HTML <a>etiketi bir köprüyü tanımlar. Aşağıdaki sözdizimine sahiptir:
<a href="url">link text</a>
Öğenin en önemli özelliği , bağlantının hedefini belirten niteliktir.<a>
href
Bağlantı metni , okuyucunun görebileceği kısımdır.
Bağlantı metnine tıklamak, okuyucuyu belirtilen URL adresine gönderecektir.
Örnek
Bu örnek, W3Schools.com'a nasıl bağlantı oluşturulacağını gösterir:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
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ı
İpucu: Bağlantılar, başka bir görünüm elde etmek için elbette CSS ile biçimlendirilebilir!
HTML Bağlantıları - Hedef Nitelik
Varsayılan olarak, bağlantılı sayfa mevcut tarayıcı penceresinde görüntülenecektir. Bunu değiştirmek için bağlantı için başka bir hedef belirtmelisiniz.
Nitelik target, bağlantılı belgenin nerede açılacağını belirtir.
Nitelik targetaşağıdaki değerlerden birine sahip olabilir:
_self- Varsayılan. Belgeyi, tıklandığı pencerede/sekmede açar_blank- Belgeyi yeni bir pencerede veya sekmede açar_parent- Belgeyi ana çerçevede açar_top- Belgeyi pencerenin tam gövdesinde açar
Örnek
Bağlantılı belgeyi yeni bir tarayıcı penceresinde veya sekmesinde açmak için target="_blank" kullanın:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
Mutlak URL'ler ve Göreli URL'ler
Yukarıdaki her iki örnek de öznitelikte mutlak bir URL (tam web adresi) kullanıyor.href
Yerel bir bağlantı (aynı web sitesindeki bir sayfaya bağlantı), göreli bir URL ile belirtilir ("https://www" bölümü olmadan):
Örnek
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
HTML Bağlantıları - Bir Resmi Bağlantı Olarak Kullan
Bir görseli bağlantı olarak kullanmak için <img>
etiketi etiketin içine koymanız <a>yeterlidir:
Örnek
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Bir E-posta Adresine Bağlantı
mailto:Kullanıcının e-posta programını açan bir bağlantı oluşturmak için özelliğin içinde kullanın
href(yeni bir e-posta göndermelerine izin vermek için):
Örnek
<a href="mailto:[email protected]">Send email</a>
Bağlantı Olarak Düğme
Bir HTML düğmesini bağlantı olarak kullanmak için biraz JavaScript kodu eklemeniz gerekir.
JavaScript, bir düğme tıklaması gibi belirli olaylarda ne olacağını belirtmenize olanak tanır:
Örnek
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
İpucu: JavaScript Eğitimimizde JavaScript hakkında daha fazla bilgi edinin .
Bağlantı Başlıkları
Öznitelik , titlebir öğe hakkında ek bilgi belirtir. Bilgi, çoğunlukla fare öğenin üzerine geldiğinde bir araç ipucu metni olarak gösterilir.
Örnek
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Mutlak URL'ler ve Göreli URL'ler hakkında daha fazlası
Örnek
Bir web sayfasına bağlanmak için tam URL kullanın:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Örnek
Geçerli web sitesindeki html klasöründe bulunan bir sayfaya bağlantı:
<a href="/html/default.asp">HTML tutorial</a>
Örnek
Geçerli sayfayla aynı klasörde bulunan bir sayfaya bağlantı:
<a href="default.asp">HTML tutorial</a>
Dosya yolları hakkında daha fazla bilgiyi HTML Dosya Yolları bölümünde okuyabilirsiniz .
Bölüm özeti
<a>Bir bağlantıyı tanımlamak için öğeyi kullanınhrefBağlantı adresini tanımlamak için özniteliği kullanıntargetBağlantılı belgenin nerede açılacağını tanımlamak için özniteliği kullanın- Bir görüntüyü bağlantı olarak kullanmak için
<img>(inside) öğesini kullanın<a> - Kullanıcının e-posta programını açan bir bağlantı oluşturmak
mailto:için öznitelik içindeki şemayı kullanın.href
HTML Bağlantı Etiketleri
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Mevcut tüm HTML etiketlerinin tam listesi için HTML Etiket Referansımızı ziyaret edin .