Beceriler ve bağlantılar
Becerilerini sıralı liste, sosyal bağlantıları dış linklerle eklersin.
Beceri listesi ve harici bağlantı
İletişim listesi hazır. Şimdi sıra becerilerde ve harici bağlantıda. Becerileri sıralı bir liste (<ol>) ile yazacaksın; sıralama önemli çünkü en güçlü olduğun beceriden başlarsın.
Sonra bir portföy bağlantısı ekleyeceksin. Bu bağlantı harici bir siteye gider ve target="_blank" ile yeni sekmede açılır. rel="noopener" ise güvenlik için eklenir.
Mutlak URL ve rel=noopener
Harici bağlantıda href değeri tam bir URL ile başlar: https://www.behance.net/. Bu, mutlak URL'dir; sunucu adına kadar tam yol içerir.
target="_blank" bağlantıyı yeni sekmede açar. Ancak yeni sekme, eski sayfaya window.opener ile erişebilir; bu güvenlik açığıdır. rel="noopener" bu erişimi keser. Modern tarayıcılar otomatik korur ama yine de yazmak iyi alışkanlıktır.
Uygulama Beceri listesi ve harici bağlantı ekle
Önceki adımın iletişim listesi içeren body'sini al. <ul>'den sonra bir <ol> ekle; içine en az 2 <li> (becerilerin) koy. <ol>'den sonra bir <a> etiketi ekle: href'i https:// ile başlayan mutlak bir URL, target="_blank" ve rel="noopener noreferrer" öznitelikleriyle.
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ayşe Yılmaz - Kartvizit</title>
</head>
<body>
<h1>Ayşe Yılmaz</h1>
<h2>Grafik tasarımcı</h2>
<ul>
<li><a href="mailto:ayse.yilmaz@yilmazstudyo.com">E-posta</a></li>
<li><a href="tel:+905551234567">Telefon</a></li>
</ul>
<ol>
<li>Logo tasarımı</li>
<li>Tipografi</li>
<li>Renk teorisi</li>
</ol>
<a href="https://www.behance.net/" target="_blank" rel="noopener noreferrer">Portföyüm</a>
</body>
</html>Kendini test et
-
Bir bağlantının yeni sekmede açılması için target değerine ne yazılır?
- target="_self"
- target="_parent"
- target="_top"
- target="_blank"
Cevabı göster
target="_blank" — Doğru. target="_blank" bağlantıyı yeni sekmede açar.
-
Güvenlik için rel değerini tamamla
<a href="https://www.behance.net/" target="_blank" rel="____">Portföyüm</a>Cevabı göster
<a href="https://www.behance.net/" target="_blank" rel="noopener noreferrer">Portföyüm</a> -
Özniteliği anlamıyla eşleştir
- href
- Bağlantı adresi
- target
- Nerede açılacağı
- rel
- İlişki ve güvenlik
- id
- Sayfa içi çapa hedefi