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

Sıradaki ders: Proje sonu - Kartvizit

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler