🚀 HTML Links: Web'in Bağlantı Köprüleri

<a> etiketi ile sayfalar arası navigasyon, dış bağlantı yönetimi ve sayfa içi çapa (anchor) linklerinin kullanımı.

Web'i 'Ağ' Yapan Etiket: <a>

Selamlar. Bugün web dünyasının en temel taşına, sayfaları birbirine bağlayan <a> (Anchor) etiketine bakıyoruz. HTML'in ismindeki 'Hypertext' ifadesi, bu etiket sayesinde var olur. Linkler olmasaydı, web sadece birbirinden kopuk dijital dökümanlar yığını olurdu.

Temel Kullanım ve href

Bir link oluşturmak için en kritik nitelik href (hypertext reference) niteliğidir. Bu, tarayıcıya "kullanıcı buraya tıkladığında nereye gitsin?" sorusunun cevabını verir.

  • Harici Linkler: href="https://google.com" gibi tam URL ile başka sitelere yönlendirme yapar.
  • Dahili Linkler: href="about.html" gibi dosya yolu ile kendi sitenizin diğer sayfalarına gider.
  • Target Nitelikleri: target="_blank" kullanarak linkin yeni bir sekmede açılmasını sağlayabilirsiniz. Özellikle kullanıcıyı kendi sitenizden tamamen koparmamak istediğiniz dış bağlantılarda bu altın kuraldır.

Biz Ovid Game Günlüğü'nü hazırlarken, onlarca teknik yazı arasında hızlıca zıplayabilmek için Anchor (Çapa) linklerini çok sık kullanıyoruz. Sayfanın en üstündeki bir linke tıklandığında, sayfa yenilenmeden ilgili teknik başlığa (örneğin ID'si #webgl olan bölüme) 'pürüzsüzce' kayması, kullanıcı deneyimini inanılmaz artırıyor. Bu aslında tarayıcının kendi içinde yönettiği basit bir 'scroll to position' işlemidir.

🚀 Sanal Kodlama Alanı Yükleniyor...

Unutulmaması Gerekenler

  1. Güvenlik (rel="noopener"): Eğer target="_blank" kullanıyorsanız, güvenlik gereği modern tarayıcılar otomatik yapsa da rel="noopener" eklemek iyi bir alışkanlıktır. Bu, açılan sayfanın sizin sayfanıza erişmesini engeller.
  2. ID Çakışması: Sayfa içi linklerde href="#bolum1" dediğinizde, sayfada id="bolum1" olan bir element olmalıdır. ID'ler benzersizdir, bir sayfada aynı ID'den iki tane olamaz.
  3. Mail ve Telefon: Linkleri sadece sayfalar için kullanmazsınız. href="mailto:[email protected]" yazarak kullanıcının mail uygulamasını, href="tel:+905..." yazarak telefon arama menüsünü tetikleyebilirsiniz.

Bir sonraki derste, sayfamızı görsellerle canlandıracağımız Images konusuna geçeceğiz. Piksel dünyasına hoş geldiniz.

İletişim & Linkler: ovidgame.com