Yazıma başlamadan once bir konuya değinmek istiyorum. XHTML, yazdığımız HTML kodların kurallara uygun ve erişilebilirliği daha da kolaylaştıran bir halidir. XHTML oğrenebilmek icin temel HTML bilgisine sahip olmanız gerekmektedir.
Oncelikle XHTML’in yararlarından soz edelim. En buyuk artısı , yapmış olduğunuz tasarımın butun tarayıcılar tarafından desteklenmesi ve hepsinde aynı goruntuyu vermesidir.
İyi guzel hoş da nedir bu XHTML diye bir soru sormamız lazım kendimize. XHTML ( Extensible Hyper Text Markup Langugage ) Genişletilebilir Buyutulmuş Metin İşaretleme Dili anlamına karşılık gelir. XHTML kurallarına uygun kodlama yapmamız sitemizin performansını, ulaşılabilirliğini, arama motorlarında indexlenme hızını doğrudan etkilemektedir. Tasarımlarımız da daha esnek olmaktadır. Kod uzerinden duşunecek olursak HTML’de actığımız her etiketi kapatıyorduk bazı ozel etiketlerde ise kapatma olmuyordu. Orneğin
[HR][/HR] .. gibi. XHTML bu etiketleride kapatmamızı istiyor. Aşağıdaki tabloda HTML ve XHTML arasındaki bazı kod karşılaştırmalarına bakalım.
,
[HR][/HR] , [HR][/HR]
,
,
,
Actığımız etiketleri mutlaka sırasına gore kapatmalıyız. Buda XHTML’in bizden istedikleri arasında yer alıyor. Orneğin ic ice yaptığımız bir kodlamayı varsayalım. Oncelikle yanlış olan şekliyle kodlarımızı verelim. Genellikle HTML kullananların etiket kapatma konusunda pek duyarlı olduğunu soyleyemeyiz.
İlk once yanlış kullanımı gorelim.
:
Deneme
Yukarıdaki kullanımda ilk olarak etiketi daha sonra etiketi acılmış. Kodlamaya gore en dışta etiketinin kapatılması lazım ama etiket daha onceden kapatılmış buda XHTML’in uygun gormediği bir durumdur. Şimdi ise doğru kullanımını gorelim.
Deneme
Burada etiketler sırasıyla kapatılmış. Yukarıdaki kodlamadan farklı olarak etiketi yerine kullandığımıza dikkat etmişsinizdir. HTML’de kullanılan etiketinin XHTML karşılığı etiketidir.
Etiketlerimiz kucuk harflerden oluşmalı. Tamamı buyuk etiketler yazmamalıyız.
Etiketleri yerine,
Etiketlerini kullanmalıyız.
[h3>Resim ve Form işlemlerinde XHTML kullanımı[/h3>
Web sitemizde kullandığımız her resim icin mutlaka bir Id kimlik belirtmeliyiz. Bu kimlik her sayfada her resim icin farklı olmalıdır. Resmi tanımlamada kullanabiliriz.
Yukarıdaki gibi bir kullanım tam anlamıyla doğru bir kodlama değildir en azından XHTML icin. Kademe kademe ilerleyelim. Resimlerimizde title ozelliği ile resmin uzerine gelindiğinde bir acıklama cıkmasını sağlıyorduk. XHTML icin title ozelliğinin yanı sıra alt ozelliğinde de aynı tanımlamayı yapmamız gerekmektedir. Bu tanımlama sayesinde diğer tarayıcılarda da aynı sonucu elde edebiliriz.
Resim kodumuz şimdi kurallara uygun bir hale geldi. Aslında yaptığımız HTML kodlamasına gore sadece 1-2 dakika fazladan zaman ayırmamız yetiyor.
Form alanları icinde aynı işlemler soz konusudur. Kurallara uygun bir input etiketinde de bir id ve title etiketlerini kullanmalıyız.
Ornek uygulamamızda gorduğunuz gibi input etiketimizi en sonda kapatıyoruz. İd ve title ozellikleri ile de tanımlamalarımızı yapıyoruz. Form alanlarında yer alan input etiketlerinin kapatması olmadığından kod icersinde sonda kapatıyoruz. Kapatması zorunlu etiketlerde bu ozelliği kullanmıyoruz. Orneğin;
Gorulduğu uzere textarea etiketi kapatılması zorunlu etiketlerdendir. Bu etiket uzerinde aynı zamanda kod ici kapatma da uygularsak kodlamamızda sorun meydana gelebilir.
[h3>Sayfa yapılandırmada XHTML kullanımı[/h3>
Sayfalarımızda dil tanımlamaları, harici CSS belgeleri gibi kullanımlarımızda da XHTML kurallarına uygun kod yazmalıyız. Bu belirttiğimiz ozelliklerde kod kapatması olmadığından dolayı kodlarımızı yine satır sonunda kod ici kapatma uygulayarak bitiriyoruz.
Kod kullanımlarımızı bu şekilde uyguluyoruz.
[h3>Link kullanımlarında XHTML[/h3>
Sayfa icerisinde verdiğimiz linklerde de XHTML kurallarına uygun bazı değişiklikler yapmamız gerekmektedir. Orneğin resim uygulamalarında olduğu gibi title ozelliğini kullanarak acıklama belirtmeliyiz. Uygulamalarımızın daha erişilebilir olması acısından verdiğimiz linklerde tabindex ile o linkin sırasını belirtmeliyiz. Bu uygulama tab sistemiyle link kullanımına da kolaylık sağlar. Ozellikle gorme ozurlu arkadaşlarımız icin bu kullanım son derece onemlidir.
Oluşturacağımız link sayfa icerisinde herhangi bir kelimeye vereceğimiz link olabileceği gibi sıralı liste şeklinde de linklerimiz olabilir. Orneğin sitemizin menusunu oluştururuken link
link
link şeklinde değilde sıralı listeleri kullanarak oluşturmalıyız “”. Yaptığımız acıklamalar doğrultusunda XHTML kurallarına uygun birkac link hazırlayalım.
anasayfa
PHP:
Ornek uygulamamızda gorduğunuz gibi ve ile sıralı liste oluşturup linklerimizi belirttik. Actığımız butun etiketleri sırasıyla kapattık. tabIndex ile link sıralamalarımızı belirttik. Sayfamız acıkken tab tuşuna bastığımızda ilk olarak anasayfa ikinci sefer bastığımızda forum ucuncu sefer bastığımızda ise iletişim linkleri aktif hale gelecektir.
XHTML’e giriş kısmında verebileceğim ornekler ve acıklamalar bu şekildedir. Sonraki makalelerimizde XHTML ve CSS ile hem erişilebilirlik konusunu daha derinlemesine işleyip hem de CSS ile tasarım zenginliğimizi oluşturacağız. Unutmayın tasarımlarınızda kullanacağınız CSS ve XHTML size kod performansı ve erişilebilirlik olarak geri donecektir.