Linkler neredeyse tüm web sayfalarında bulunur. Linkler yani bağlantılar, kullanıcıların sayfadan sayfaya tıklamalarına ve web sitesini gezmelerine olanak tanır.
HTML Links – Hyperlinks (Bağlantılar – Köprüler)
HTML Bağlantıları köprülerdir. Bir bağlantıya tıklayıp başka bir belgeye geçebilirsiniz. Fareyi bir bağlantının üstüne getirdiğinizde fare oku küçük bir el simgesine dönüşecektir. (CSS üzerinden düzenlenmediği sürece)
NOT: Bir bağlantının metin olması şart değildir. Bir resim veya başka bir HTML ögesi de link olabilir.
HTML Link Sözdizimi
HTML <a> etiketi bir linki tanımlamak için kullanılır. Sözdizimi aşağıdaki gibidir;
<a href="url">Link yazısı veya link içeriği</a><a> etiketinin en önemli özelliği bağlantının hedefini belirten href özelliğidir. Bağlantı metni okuyucunun görebileceği kısımdır. Bağlantı metnine tıklamak okuyucuyu belirten URL adresine gönderecektir.
Aşağıdaki örnek turkyazilimci.com’a nasıl bağlantı oluşturulacağını göstermektedir.
<a href="https://www.turkyazilimci.com/">TurkYazilimci Sitesi</a>Herhangi bir CSS koduyla düzeltilmeyen varsayılan linkler tarayıcılarda aşağıdaki şekilde görünecektir;
- Ziyaret edilmemiş bir bağlantının altı çizili ve mavi renktedir
- Ziyaret edilen bir bağlantının altı çizili ve mor renktedir
- Etkin bir bağlantının altı çizili ve kırmızıdır
HTML Linkler Target Özelliği
Varsayılan olarak bağlantılı sayfalar geçerli tarayıcı sayfasında görüntülenir. Bunu değiştirmek istersek bağlantıya bir target (hedef) belirtmemiz gerekir. Target niteliği belgenin nerede açılacağını gösterir.
Target özelliği aşağıdaki değerlerden birini alabilir;
- _self – Varsayılan. Belgeyi tıklandığı pencerede/sekmede açar
- _blank – Belgeyi yeni bir pencere veya sekmede açar
- _parent – Belgeyi ana çerçevede açar
- _top – Belgeyi pencerenin tam gövdesinde açar
Aşağıdaki örneği HTML sayfasında deneyerek sonucu görebilirsiniz.
<a href="https://www.turkyazilimci.com/" target="_blank">Siteye Git</a>Dahili ve Harici Linkler (Absolute ve Relative)
Yukarıdaki örneklerin her ikisi href özelliğinde tam bir web sitesini kullanıyor. Bunlar harici bağlantılardır.
Bir web sitesinin içindeki bir sayfa ziyaret edileceğinde http://www kısmı olmadan dosya adı yazılır.
<h2>Harici URL</h2>
<p><a href="https://www.turkyazilimci.com/">Türk Yazılımcı</a></p>
<p><a href="https://www.erensarigul.info/">Eren Sarıgül Kişisel Web Sitesi</a></p>
<h2>Dahili URL</h2>
<p><a href="anasayfa.html">HTML Images</a></p>
<p><a href="/dersler/html-dersleri.html">HTML Dersleri</a></p>
HTML Resmi Link Olarak Kullanma
Bir görseli linke dönüştürmek için <img> etiketini <a> etiketinin içine yerleştirmek yeterlidir.
<a href="https://www.turkyazilimci.com">
<img src="sitelogo.png" alt="TurkYazilimci Sitesi" style="width:150px;height:20px;">
</a>Bir E-Posta Adresini Bağlantı Olarak Kullanma
Kullanıcının e-posta programını açan bir bağlantı oluşturmak için href özelliği içine mailto: kullanılır. Bu sayede ilgili eposta adresine mail atabilecektir.
<a href="mailto:info@turkyazilimci.com">İletişime Geçin</a>Butonu Link Olarak Kullanma
Bir butonu link olarak kullanmak için bazı javascript kodlarının eklenmesi gereklidir. Javascript ile ilgili eğitimi ilerleyen zamanlarda paylaşacağız. Sadece örnek olması için aşağıdaki kodu inceleyebilirsiniz.
<button onclick="document.location='index.html'">Anasayfa</button>Linklere Başlık Ekleme
Daha önceki yazılarda da açıkladığımız title özelliği öge hakkında ek bilgi belirtir. Linklerin açıklamasını da title ile verebilirsiniz. Fare ile linkin üzerine geldiğinizde açıklamayı görebilirsiniz.
<a href="https://www.turkyazilimci.com/" title="TurkYazilimci Sitesi">Siteye Git</a>
Bölüm Özeti
- Bağlantı tanımlamak için <a> etiketi kullanılır.
- Bağlantı adresini tanımlamak için href özelliği kullanılır.
- Bağlantının nasıl görüntüleneceğini belirtmek için target kullanılır.
- Bir resme bağlantı vermek için <img> ögesi <a> içinde yazılır.
- E-posta linki vermek için href özelliği içine mailto: eklenir.
