Web tasarım dillerinde en çok kullanılan etiketlerden ikisine kısaca değineceğim. Bunlar anchor ve image etiketleri. Anchor dediğimiz etiket, web sayfamızda iç-dış bağlantılar oluşturmamıza yarayan, link ve name özellikli etikettir. Image etiketi ise adından da anlaşıldığı üzere sayfamızda resimleri göstermemize ve gösterim ayarlarını belirtmemize yarar. Bu yazıda kısaca yer vereceğimiz anchor ve image etiketlerine ayrı ayrı daha detaylı şekilde ayrıca değineceğim.
Anchor, Türkçe karşılığı ile çapa kelimesi HTML sayfalarımızda bağlantılarımızı düzenliyor. a ile etiketlenen anchor ile iç ve dış bağlantıları oluşturduğumuz gibi sayfa içinde bir bölgeyi de işaret edebiliyoruz. Öncelikle temel şekliyle link özelliğine bakalım.
Bu etiket başlama etiketinde niteleyicileri tanımlanarak görevlendirilir, işaret konan metinden sonra ise kapama etiketi ile kapatılır. Örnek ile gösterelim. Bir iç bağlantı oluşturarak sitemizin iletisim.html sayfasına işaret edelim. HTML dokümanımızda kullanmamız gereken yöntem şu olacak:
Gördüğünüz gibi öncelikle etiketimizi a ile açtık, href ile dosya yolunu gösterdik. Başlatma etiketimiz ile kapama etiketimiz arasında ise bu dosya bağlantısının atanacağı kelimeyi belirttik. Böylelikle İletişim kelimesi artık iletisim.html sayfasına giden tıklanabilir bir bağlantı oldu. Burada kullandığımız yöntem bir iç adresi belirtmek olduğundan, kendi web dizinimizde açmak istediğimiz sayfanın dosya adresini yazmamız yeterli oldu. Yine anchor etiketinin link özelliğinde bir dış sayfaya bağlantı vermek istersek kullanacağımız yöntem değişmeyecek, ancak dış adresin tamamını href kısmında belirtmemiz gerekecektir. Örneğe bakarsak:
Bununla birlikte anchor etiketinin güzel bir özelliği ise sayfa içi işaretlenmiş alana yönlendirme yapabilmek. Özellikle tek sayfadan oluşan kullanım kılavuzları ya da sıkça sorulan sorular gibi dokümanlarda karşılaştığınız, soruya tıklayınca sayfanın ilgili cevap bölümüne inmesi veya sayfa başına çıkma gibi uygulamalar bunlardır. Anchor etiketinin name özelliği ile yapılabilen bu uygulamada name işareti koyacağımız yere, özel bir sayfa içi bağlantı kurabileceğiz. Kullanımı şu şekilde:
–
Burada yaptığımız şey, işaretlediğimiz Türkçe kelimesine sayfanın dilediğimiz bir yerinde ziyaretçiyi gönderebilmek. Uygulama buradan deneyebilirsiniz: Türkçe’ye Bak .Yazıya tıkladığınızda daha evvel yukarıda işaretlediğimiz Türkçe kelimesi sayfa başına hizalanacak şekilde yukarı çıktığımızı farkedeceksiniz.
Ne yaptığımızı tekrar incelersek, önce gidilmesini istediğimiz yerde name özelliği ile bir anchor etiketi kullandık. Daha sonra buraya ziyaretçimizi kendi seçimi doğrultusunda göndermek için, talebi aldığımız yerde href ile name adresini verdik. Dikkat ederseniz bunun içir name adresi olduğunu belirtmek için # işaretini kullandık. Eğer bunu yapmasaydık sunucumuz kodu yorumlamak için web dizinimizde uzantısı olmayan Turkce isimli dosyayı arayacak ve bulamadığı için hata verecekti.
Name özelliğini, açıklama sayfalarınızda her bir paragrama gönderme için kullanabilirsiniz. Başlıkları sayfa başında vereceğiniz bir detay sayfasında tıklanan başlığın açıklama kısmına gönderme yapmak hem ziyaretçiniz hem de sayfa dolaşımı için büyük kolaylık olacaktır.
Resim <img> Etiketi
Image etiketi, sayfamızda bir resmi yayınlamayı sağlar. Bu etiket ile sunucumuzda olan ya da dışarıda barınan bir resmi gösterebiliriz. Image etiketi çeşitli niteleyiciler ile kullanılabilir. Basit çe img etiketi kullanımına bakarsak;
| Image etiketi kullanımı | |
<img src="resim.jpg"> | |
Gördüğünüz gibi image etiketi sonlanmayan bir etikettir. Dolayısıyla xhtml uyumluluğu için aynı zmanda kendi kapamasını da içermelidir. Bu durumda xhtml uyumlu image etiketi kullanımımız şu şekilde olmalı:
| XHTML uyumuna göre img | |
<img src="resim.jpg" /> | |
Dikkat ederseniz etiketimiz içinde doğrudan tanımlama yaptık. Kapama etiketi ayrı olmadığı için etiketimizi açarken src ile dosya yolunu gösterdik ve bitirdik. Resim etiketi içinde kullanabileceğimiz niteleyicilere de yine aynı etiket içerisinde; dışarı çıkmadan yer vereceğiz. Buna etiketin detaylı anlatımında değineceğim.
Bir resim etiketini bağlantı içine almak, dolayısıyla bir resme bağlantı vermek isterseniz yapmanız gereken şey, resim etiketini anchor etiketleri arasınd almaktır. Aynen bir metne bağlantı verirmişçesine resim etiketine bağlantı vermelisiniz. Örneğe bakarsak sanırım daha net ortaya çıkacaktır:
Böylece resimler dizinimizde bulunan e-posta.png resmine iletisim.html dosyamızın yani İletişim sayfamızı bağlantısını vererek resimli bir yönlendirme oluşturduk.
Sonraki yazıda, web sayfamızın görünmeyen head etiketlerine değineceğim. Ondan sonra da inşeallah buraya kadar anlatıığımız etiketlere detaylı olarak değinmeye başlayacağım.
Şimdilik sizlere kolay gelsin.
