0 gün Seviye 1 Avar Teknolojileri

Bağlantılar

Ders 12/45 · 5 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda sayfanıza başka sitelere, e-posta adreslerine ve telefon numaralarına giden bağlantılar ekleyebileceksiniz.

a etiketi

Bağlantılar a etiketiyle oluşturulur. Gidilecek adres href niteliğine yazılır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bağlantılar</title>
</head>
<body>
  <p><a href="https://developer.mozilla.org/tr/">MDN Web Belgelerini</a> ziyaret edin.</p>
</body>
</html>
Önizleme kutuları hakkında

Güvenlik nedeniyle bu sayfadaki önizleme kutuları dış siteleri her zaman açamaz. Bağlantıların çalışmasını görmek için kodu kopyalayıp kendi index.html dosyanızda deneyin.

Yeni sekmede açmak

target="_blank" niteliği bağlantıyı yeni sekmede açar. Yanına rel="noopener" eklemek, açılan sayfanın sizin sayfanıza erişmesini engeller.

<a href="https://ornek.com" target="_blank" rel="noopener">Yeni sekmede aç</a>

Her bağlantıyı yeni sekmede açmayın. Kullanıcı bağlantının aynı sekmede açılmasını bekler ve Geri düğmesi yeni sekmede çalışmaz.

E-posta ve telefon bağlantıları

  • mailto: ile başlayan bağlantı, e-posta uygulamasını açar.
  • tel: ile başlayan bağlantı, telefonda arama ekranını açar.
<a href="mailto:iletisim@ornek.com">Bize e-posta gönderin</a>
<a href="tel:+905551234567">Bizi arayın</a>

İyi bağlantı metni yazmak

Bağlantı metni, tıklayınca nereye gidileceğini anlatmalıdır.

  • Kötü: Python dersleri için <a href="python.html">buraya tıklayın</a>.
  • İyi: <a href="python.html">Python derslerine göz atın</a>.

Ekran okuyucu kullananlar sayfadaki bağlantıları liste halinde dinleyebilir. On tane “buraya tıklayın” bağlantısı onlara hiçbir şey anlatmaz.

Sık yapılan hatalar

https:// yazmamak. href="ornek.com" yazarsanız tarayıcı bunu sitenizdeki bir dosya sanır. Dış siteler için adresin tamamını yazın.

Kapanış etiketini unutmak. </a> unutulursa sonraki metin de bağlantıya dönüşebilir.

Soru 1

Hangi bağlantı metni daha iyidir?

  • Buraya tıkla :: Nereye gittiğini anlatmıyor.
  • Link :: Nereye gittiğini anlatmıyor.
  • HTML derslerine git :: Doğru. Metin tek başına okunduğunda bile anlamlıdır.
Soru 2

Bağlantının adresi hangi niteliğe yazılır?

  • href :: Doğru.
  • src :: src resim gibi dosyalarda kullanılır.
  • target :: target bağlantının nerede açılacağını belirtir.
Sık kullandıklarım

Hedefteki sonucu elde edin. Yalnızca body içine yazılacak kodu yazın. Birinci paragrafta https://www.wikipedia.org adresine giden Vikipedi bağlantısı, ikinci paragrafta mailto:ali@ornek.com adresine giden Bana yazın bağlantısı olsun.

<p><a href="https://www.wikipedia.org">Vikipedi</a></p>
<p><a href="mailto:ali@ornek.com">Bana yazın</a></p>

Bu derste öğrendikleriniz

  • Bağlantılar <a href="..."> ile yazılır.
  • mailto: e-posta, tel: telefon bağlantısı oluşturur.
  • Bağlantı metni, gidilecek yeri anlatmalıdır.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.