Ek bilgiler
Linklerle Çalışmak: Anchor Etiketi, Sayfa İçi Gezinme ve Bağlantı Türleri
HTML'de <a> (anchor) etiketi sandığımızdan çok daha yetenekli ve esnek bir yapıya sahip. Yalnızca harici web sitelerine bağlantı vermekle kalmıyor; sayfa içi belirli ID'lere atlama, proje içi bağıl dosyaları açma (./), doğrudan e-posta istemcisini tetikleme (mailto:) veya telefon aramasını başlatma (tel:) gibi birçok farklı senaryoyu tek bir etiketle yönetebiliyoruz. Hatta dosya indirme zorunluluğu getirmek istediğimizde download özniteliği gibi pratik çözümler de elinizin altında bulunuyor.
Derste özellikle Emmet kısayollarını zorlayarak sayfa içi gezinmeyi (#id) derinlemesine ele aldık. Bir sayfada ID tanımlayıp linkin href kısmına #hedef-id verdiğinizde tarayıcı anında o konuma odaklanıyor. İster sayfa başına veya sonuna dönün, ister ardışık makaleler arasında tek tek gezinin, ID mantığı sayfa içi navigasyonun omurgasını oluşturuyor. React gibi modern kütüphanelerde bu işleri çok daha dinamik yönetecek olsak da temel HTML mantığını ve Emmet ile hızlı iskelet kurma kas hafızasını kavramak kritik önem taşıyor.
Harici bağlantılar verirken kullanıcının mevcut siteden kopmasını istemiyorsak target="_blank" özniteliğini devreye sokuyoruz; böylece link yeni bir sekmede açılıyor. Yerel dosyalara bağlantı verirken kullandığımız ./ gösterimi ise "bulunduğum mevcut dizin" anlamına geliyor ve dosya yollarını bağlarken zihnimizde netleşmesi gereken temel bir refleks. Kod yazarken tarayıcının yerleşik davranışlarını ve bağlantı protokollerini iyi tanımak, ileride karmaşık projelerde kullanıcı deneyimini doğru kurgulamanızı sağlayacaktır.
📌 Hatırlanması Gereken Temel Noktalar (Takeaways)
- Çok Yönlü Bağlantı Türleri:
<a> etiketi yalnızca dış linkler için değil; mailto: ile e-posta gönderme, tel: ile arama başlatma ve download ile dosya indirme işlevlerinde de kullanılır.
- Sayfa İçi Gezinme (
#id): Bir elemanın id değerini href="#id-adi" şeklinde bağlantıya bağlayarak sayfa içinde istenilen bölüme (örneğin sayfa başına veya sonuna) anında atlama yapılabilir.
- Dizin Yapısı (
./): Kendi projeniz içindeki başka bir HTML sayfasına veya dosyaya bağlantı verirken kullanılan ./, mevcut çalışma klasörünü temsil eder.
- Yeni Sekmede Açma (
target="_blank"): Harici bir web sitesine yönlendirme yaparken kullanıcının mevcut sayfadan ayrılmaması için target="_blank" özniteliği tanımlanmalıdır.
- Emmet ve Kas Hafızası: Karmaşık liste ve bağlantı yapılarını Emmet şablonlarıyla (
article$, $@2) hızlıca kurgulayabilmek HTML prototipleme hızını ciddi oranda artırır.
📚 Ek Kaynaklar ve Derinlemesine Okuma Önerileri (Ek Bilgi)