
- HTML Nedir?
- HTML Başlıkları
- HTML Paragraf
- HTML Yorumları 175 175 175
YouTube'ta Takip Et →
Linkler, kullanıcıyı bulundukları sayfadan başka bir sayfaya ulaşmalarını sağlayan aracı metinlerdir. Fare imleciniz linklerin üzerine geldiğinde el işaretine döner. Tüm sayfalarda tıklayabildiğiniz her şey birer linktir. Linkler, metinlere, başlıklara, imajlara verilebilir. Bu makalede HTML ile sayfa içinde link vermeyi ve özelliklerini öğreniyoruz.
HTML’de Link Yapısı
HTML’de linkler a etiketi ile başlar ve href ile yönlendirilecek sayfanın adresi belirtilir. HTML’de linkler a etiketi ile başlar ve href ile yönlendirilecek sayfanın adresi belirtilir.
Online Dersler
Örnekte gördüğünüz gibi Online Dersler yazısına tıklayan bir kullanıcı sanagrafi web sitesine yönlendirilecektir. Online Dersler metni sayfa içerisinde, kullanıcılara görünen kısım.
Tıklandığında başka bir sayfaya geçmek için de linkler kullanılır. Tıklanabilir her şey bir linktir ve logoda, menülerde, sayfa içinde başka bir sayfaya geçerken ya da footer dediğimiz sayfanın en alt bölümünde bu linklerden bolca görünür. Bir metne ya da bir imaja link vermek için a etiketi ve linke tıklandığında yönleneceği adres olan href kullanılır. Aşağıdaki örnekte Tıkla kelimesine tıkladığınızda sayfa.html sayfasına yönlendirilirsiniz.
Tıkla
Linkleme konusunda bilmemiz gereken iki ek özellik var. Tıklandığında arayan telefon numarası oluşturmak ve tıklandığında varsayılan mail adresi programını açan mail linki oluşturmak.
Telefon Numarası Linki Oluşturma
Siteye tıklanabilir telefon numarası eklemek için a etiketinin tel özelliğini kullanıyoruz. Böylece onun bir telefon numarası olduğu anlaşılıyor telefonlar ya da iletişim programları tarafından.
0(888) 111 00 11
Mail Linki Oluşturma
Tıklandığında mail programının açılmasını sağlayan mail linki için de mailto özelliğini kullanıyoruz.
name@domain.com
HTML Link Renkleri
Varsayılan olarak tarayıcılar ziyaret edilmemiş linklere, ziyaret edilmiş linklere ve aktif linklere renk tanımlar. Örneğin, varsayılan link rengi mavidir. Biz, bu renkleri sayfanın ihtiyacına ve görünüşe göre değiştirebiliyoruz. Örneğin; bir linkin kırmızı renge sahip olmasını istersek CSS’i kullanıyoruz.
<style>
a:link {color:red;}
a:visited {color:orange;}
a:hover {color:green;}
</style>
Bu kodları açıklayacak olursak varsayılan link rengi red (kırmızı), önceden ziyaret edilmiş link rengi orange (turuncu) ve fare imleci linkin üzerine geldiğinde green (yeşil) renk olacaktır.
HTML Link Özellikleri
Sayfalardaki linklere tıkladığınızda yönlendirilen sayfa aynı sayfada mı açılacağını, yoksa yeni bir sayfaya mı yönlendirileceğini belirleyebiliyoruz. Linkte tıklandığında nerede açılacağını target komutu ile belirliyoruz.
_blank: Link, yeni bir sekmede açılır.
_self: Link, aynı sayfada açılır.
_parent: iFrame kullanılan bir sayfada, iframe’deki linkte tıklandığında yine iframe içinde açılması sağlanır.
_top: Link bir iframe içerisindeyse ve linkte tıkladığınızda iframe içinde değil, sayfanın genelinde açılır.
Sanagrafi
Sanagrafi linkine tıkladığınızda sanagrafi.com adresi, target=”_blank” değeri sayesinde yeni bir sekmede açılacak.
HTML’de Resimlere Link Vermek
Resimlere link vermek için de tamamen aynı mantık uygulanıyor. Metin yerine resmin kodunu ekliyoruz sadece. a etiketleri arasında img etiketini ekliyoruz. Aşağıdaki örneğe göre img etiketi ile görünen logoya tıkladığınızda sanagrafi.com adresine yönlendiriliyorsunuz.
HTML Link Başlıkları
Link başlıkları, fare imleci ile link üzerine geldiğinizde tooltip şeklinde tabir ettiğimiz küçük mesaj olarak görünür. Bu mesajın çıkmasını title özelliği ile sağlıyoruz.
Sanagrafi