Merhaba sevgili Webkolog okurları,
Bugün sizlere web'in temel taşlarından biri olan bağlantılar (linkler) ve sayfalarımıza başka sayfaları yerleştirmemizi sağlayan iframe'ler hakkında konuşacağım. Özellikle bu ikisinin nasıl bir araya gelerek web sayfalarımızı daha işlevsel hale getirdiğini keşfedeceğiz. Unutmayın, web tarayıcılarımızın yetenekleri de bu doğrultuda gelişmeye devam ediyor!
<a> Etiketi: Web'in Kalbi, Köprülerin Mimarı
Web sayfaları arasında veya aynı sayfa içinde gezinmek için kullandığımız temel etiket <a> (anchor - çapa) etiketidir. Bu etiket sayesinde, kullanıcılar bir bağlantıya tıklayarak farklı bir sayfaya gidebilir, bir dosya indirebilir veya aynı sayfanın farklı bir bölümüne atlayabilirler.
<a href="http://www.webkolog.net">Webkolog'u Ziyaret Edin!</a>href(Hypertext Reference): Bağlantının hedefini belirler. Bu bir URL, bir dosya yolu veya aynı sayfa içindeki bir bölümün adı olabilir.
Sayfa İçi Gezinme (Yer İşaretleri)
Uzun sayfalarda belirli bir bölüme doğrudan atlamak istediğimizde <a> etiketini bir yer işareti olarak kullanabiliriz. Bunun için iki yöntem vardır:
Yöntem 1: name özelliği ile
<a href="#bolum_adi">Bu Bölüme Git</a>
<!-- Sayfanın başka bir yerinde -->
<a name="bolum_adi"></a>
<p>İşte o bölüm!</p>Burada, href="#bolum_adi" bağlantısı, name="bolum_adi" olan <a> etiketinin bulunduğu yere zıplamamızı sağlar.
Yöntem 2: id özelliği ile
Daha modern bir yaklaşım olsa da HTML 4.01'de de kullanabileceğimiz bir diğer yöntem, hedef elementi bir id ile işaretlemektir. Bu, günümüzde daha sık tercih edilen yoldur.
<a href="#icerik_alani">İçerik Alanına Zıpla</a>
<!-- Sayfanın başka bir yerinde -->
<div id="icerik_alani">
<p>Burada önemli bilgiler yer alıyor.</p>
</div>Burada da href="#icerik_alani" bağlantısı, id="icerik_alani" olan <div> elementine atlamamızı sağlar.
<iframe> Etiketi: Sayfa İçinde Sayfa
<iframe> (Inline Frame) etiketi, bir HTML belgesinin içine başka bir HTML belgesini gömmemizi sağlar. Yani, web sayfanızın içinde, sanki ayrı bir pencereymiş gibi başka bir web sayfası gösterebilirsiniz. Bu, özellikle sabit bir navigasyon menüsü tutarken içeriği dinamik olarak değiştirmek istediğiniz durumlarda çok kullanışlıdır.
<iframe src="anasayfa.html" name="ana_cerceve" width="600" height="400" frameborder="0" scrolling="auto"></iframe>src: İçine yüklenecek HTML belgesinin yolunu veya URL'sini belirtir.name: Iframe'e benzersiz bir isim verir. Bu isim, bağlantıların hedeflerini belirtirken kullanılacaktır.widthveheight: Iframe'in genişliğini ve yüksekliğini piksel cinsinden belirler.frameborder: Iframe'in etrafında bir çerçeve olup olmayacağını belirler.0(çerçevesiz) veya1(çerçeveli) değerlerini alabilir.scrolling: Iframe içinde kaydırma çubuklarının ne zaman görüneceğini belirler.auto(gerektiğinde),yes(her zaman) veyano(asla) değerlerini alabilir.align,longdesc,marginheight,marginwidthgibi diğer özellikler de mevcuttur ancak temel kullanım için yukarıdakiler yeterlidir.
Bağlantılar ve Iframe'ler Arasındaki Büyülü Bağlantı: target Özelliği
İşte şimdi işin ilginç kısmına geliyoruz! Bir <a> etiketinin target özelliğini kullanarak, tıklanan bağlantının hangi çerçevede açılacağını belirleyebiliriz. Bu, ana sayfanızı sabit tutarken sadece bir iframe'in içeriğini değiştirmek istediğinizde harikadır.
Diyelim ki sayfanızda bir menü ve bu menüye tıklandığında içeriğin yükleneceği bir iframe var:
<a href="sayfa1.html" target="icerik_iframe">Sayfa 1</a> |
<a href="sayfa2.html" target="icerik_iframe">Sayfa 2</a>
<br><br>
<iframe src="varsayilan_icerik.html" name="icerik_iframe" width="700" height="500" frameborder="1"></iframe>Bu örnekte:
<iframe>etiketimizename="icerik_iframe"adını verdik.- Her iki
<a>etiketinin detarget="icerik_iframe"özelliğini kullanarak, bu bağlantılara tıklandığında "sayfa1.html" veya "sayfa2.html" dosyalarının ana pencerede değil, "icerik_iframe" adlı iframe içinde açılmasını sağlıyoruz.
target Özelliğinin Diğer Değerleri
target özelliğinin sadece iframe adıyla sınırlı olmadığını da belirtelim:
_blank: Bağlantıyı yeni bir pencerede veya sekmede açar._self: Bağlantıyı aynı çerçevede (varsayılan) açar._parent: Bağlantıyı mevcut çerçevenin doğrudan üstündeki çerçevede açar. (İç içe çerçevelerde kullanılır.)_top: Bağlantıyı tüm çerçeveleri kaldırarak en üstteki pencerede açar.
Gördüğünüz gibi, HTML 4.01'in bize sunduğu bu güçlü etiketler sayesinde web sayfalarımızda gezinmeyi ve içerik sunmayı çok daha esnek hale getirebiliyoruz. Bağlantılar ve iframe'ler, web sitenizin kullanıcı dostu olmasında kilit rol oynar.
Webkolog'u takipte kalın!
Hepinize bol kodlu ve keyifli öğrenme süreçleri dilerim!
0 yorum:
Yorum Gönder