Yazıma başlamadan önce 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 öğrenebilmek için temel HTML bilgisine sahip olmanız gerekmektedir.
Öncelikle XHTMLin yararlarından söz edelim. En büyük artısı , yapmış olduğunuz tasarımın bütün tarayıcılar tarafından desteklenmesi ve hepsinde aynı görüntüyü vermesidir.
İyi güzel hoş da nedir bu XHTML diye bir soru sormamız lazım kendimize. XHTML ( Extensible Hyper Text Markup Langugage ) Genişletilebilir Büyütülmüş 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 üzerinden düşünecek olursak HTMLde açtığımız her etiketi kapatıyorduk bazı özel etiketlerde ise kapatma olmuyordu. Örneğin <br> <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.
<br>, <br />
<hr> , <hr />
<img src=>, <img src= />
<input type=text>, <input type=text />
<b></b>, <strong></strong>
Açtığımız etiketleri mutlaka sırasına göre kapatmalıyız. Buda XHTMLin bizden istedikleri arasında yer alıyor. Örneğin iç içe yaptığımız bir kodlamayı varsayalım. Öncelikle yanlış olan şekliyle kodlarımızı verelim. Genellikle HTML kullananların etiket kapatma konusunda pek duyarlı olduğunu söyleyemeyiz.
İlk önce yanlış kullanımı görelim.
:
<div><b>Deneme</div></b>
Yukarıdaki kullanımda ilk olarak <div> etiketi daha sonra <b> etiketi açılmış. Kodlamaya göre en dışta <div> etiketinin kapatılması lazım ama etiket daha önceden kapatılmış buda XHTMLin uygun görmediği bir durumdur. Şimdi ise doğru kullanımını görelim.
<div><strong>Deneme</strong></div>
Burada etiketler sırasıyla kapatılmış. Yukarıdaki kodlamadan farklı olarak <b> etiketi yerine <strong> kullandığımıza dikkat etmişsinizdir. HTMLde kullanılan <b> etiketinin XHTML karşılığı <strong> etiketidir.
Etiketlerimiz küçük harflerden oluşmalı. Tamamı büyük etiketler yazmamalıyız.
<P></P><HTML></HTML><BODY><BODY><SPAN></SPAN>
Etiketleri yerine,
<p></p><html></html><body></body><span></span>
Etiketlerini kullanmalıyız.
[h3>Resim ve Form işlemlerinde XHTML kullanımı[/h3>
Web sitemizde kullandığımız her resim için mutlaka bir Id kimlik belirtmeliyiz. Bu kimlik her sayfada her resim için farklı olmalıdır. Resmi tanımlamada kullanabiliriz.
<img src=resim.jpg id=resim1 />
Yukarıdaki gibi bir kullanım tam anlamıyla doğru bir kodlama değildir en azından XHTML için. Kademe kademe ilerleyelim. Resimlerimizde title özelliği ile resmin üzerine gelindiğinde bir açıklama çıkmasını sağlıyorduk. XHTML için title özelliğinin yanı sıra alt özelliğinde de aynı tanımlamayı yapmamız gerekmektedir. Bu tanımlama sayesinde diğer tarayıcılarda da aynı sonucu elde edebiliriz.
<img src=resim.jpg title=Resim açıklaması alt=Resim açıklaması id=resim1 />
Resim kodumuz şimdi kurallara uygun bir hale geldi. Aslında yaptığımız HTML kodlamasına göre sadece 1-2 dakika fazladan zaman ayırmamız yetiyor.
Form alanları içinde aynı işlemler söz konusudur. Kurallara uygun bir input etiketinde de bir id ve title etiketlerini kullanmalıyız.
<input type=text name=alan title=ad soyad id=ad />
Örnek uygulamamızda gördüğünüz gibi input etiketimizi en sonda kapatıyoruz. İd ve title özellikleri ile de tanımlamalarımızı yapıyoruz. Form alanlarında yer alan input etiketlerinin kapatması olmadığından kod içersinde sonda kapatıyoruz. Kapatması zorunlu etiketlerde bu özelliği kullanmıyoruz. Örneğin;
<textarea name=metin id=metin cols=5 rows=5 title=metin></textarea>
Görüldüğü üzere textarea etiketi kapatılması zorunlu etiketlerdendir. Bu etiket üzerinde aynı zamanda kod içi 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 özelliklerde kod kapatması olmadığından dolayı kodlarımızı yine satır sonunda kod içi kapatma uygulayarak bitiriyoruz.
<link href=stil.CSS rel=stylesheet type=text/css />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Kod kullanımlarımızı bu şekilde uyguluyoruz.
[h3>Link kullanımlarında XHTML[/h3>
Sayfa içerisinde verdiğimiz linklerde de XHTML kurallarına uygun bazı değişiklikler yapmamız gerekmektedir. Örneğin resim uygulamalarında olduğu gibi title özelliğini kullanarak açıklama belirtmeliyiz. Uygulamalarımızın daha erişilebilir olması açı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. Özellikle görme özürlü arkadaşlarımız için bu kullanım son derece önemlidir.
Oluşturacağımız link sayfa içerisinde herhangi bir kelimeye vereceğimiz link olabileceği gibi sıralı liste şeklinde de linklerimiz olabilir. Örneğin sitemizin menüsünü oluştururuken link<br />link<br />link şeklinde değilde sıralı listeleri kullanarak oluşturmalıyız <ul><li>. Yaptığımız açıklamalar doğrultusunda XHTML kurallarına uygun birkaç link hazırlayalım.
<a href=sayfa.asp title=örnek sayfamız tabIndex=1>anasayfa</a>
Örnek uygulamamızda gördüğünüz gibi <ul> ve <li> ile sıralı liste oluşturup linklerimizi belirttik. Açtığımız bütün etiketleri sırasıyla kapattık. tabIndex ile link sıralamalarımızı belirttik. Sayfamız açıkken tab tuşuna bastığımızda ilk olarak anasayfa ikinci sefer bastığımızda forum üçüncü sefer bastığımızda ise iletişim linkleri aktif hale gelecektir.
XHTMLe giriş kısmında verebileceğim örnekler ve açı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 dönecektir.
Öncelikle XHTMLin yararlarından söz edelim. En büyük artısı , yapmış olduğunuz tasarımın bütün tarayıcılar tarafından desteklenmesi ve hepsinde aynı görüntüyü vermesidir.
İyi güzel hoş da nedir bu XHTML diye bir soru sormamız lazım kendimize. XHTML ( Extensible Hyper Text Markup Langugage ) Genişletilebilir Büyütülmüş 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 üzerinden düşünecek olursak HTMLde açtığımız her etiketi kapatıyorduk bazı özel etiketlerde ise kapatma olmuyordu. Örneğin <br> <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.
<br>, <br />
<hr> , <hr />
<img src=>, <img src= />
<input type=text>, <input type=text />
<b></b>, <strong></strong>
Açtığımız etiketleri mutlaka sırasına göre kapatmalıyız. Buda XHTMLin bizden istedikleri arasında yer alıyor. Örneğin iç içe yaptığımız bir kodlamayı varsayalım. Öncelikle yanlış olan şekliyle kodlarımızı verelim. Genellikle HTML kullananların etiket kapatma konusunda pek duyarlı olduğunu söyleyemeyiz.
İlk önce yanlış kullanımı görelim.
:
<div><b>Deneme</div></b>
Yukarıdaki kullanımda ilk olarak <div> etiketi daha sonra <b> etiketi açılmış. Kodlamaya göre en dışta <div> etiketinin kapatılması lazım ama etiket daha önceden kapatılmış buda XHTMLin uygun görmediği bir durumdur. Şimdi ise doğru kullanımını görelim.
<div><strong>Deneme</strong></div>
Burada etiketler sırasıyla kapatılmış. Yukarıdaki kodlamadan farklı olarak <b> etiketi yerine <strong> kullandığımıza dikkat etmişsinizdir. HTMLde kullanılan <b> etiketinin XHTML karşılığı <strong> etiketidir.
Etiketlerimiz küçük harflerden oluşmalı. Tamamı büyük etiketler yazmamalıyız.
<P></P><HTML></HTML><BODY><BODY><SPAN></SPAN>
Etiketleri yerine,
<p></p><html></html><body></body><span></span>
Etiketlerini kullanmalıyız.
[h3>Resim ve Form işlemlerinde XHTML kullanımı[/h3>
Web sitemizde kullandığımız her resim için mutlaka bir Id kimlik belirtmeliyiz. Bu kimlik her sayfada her resim için farklı olmalıdır. Resmi tanımlamada kullanabiliriz.
<img src=resim.jpg id=resim1 />
Yukarıdaki gibi bir kullanım tam anlamıyla doğru bir kodlama değildir en azından XHTML için. Kademe kademe ilerleyelim. Resimlerimizde title özelliği ile resmin üzerine gelindiğinde bir açıklama çıkmasını sağlıyorduk. XHTML için title özelliğinin yanı sıra alt özelliğinde de aynı tanımlamayı yapmamız gerekmektedir. Bu tanımlama sayesinde diğer tarayıcılarda da aynı sonucu elde edebiliriz.
<img src=resim.jpg title=Resim açıklaması alt=Resim açıklaması id=resim1 />
Resim kodumuz şimdi kurallara uygun bir hale geldi. Aslında yaptığımız HTML kodlamasına göre sadece 1-2 dakika fazladan zaman ayırmamız yetiyor.
Form alanları içinde aynı işlemler söz konusudur. Kurallara uygun bir input etiketinde de bir id ve title etiketlerini kullanmalıyız.
<input type=text name=alan title=ad soyad id=ad />
Örnek uygulamamızda gördüğünüz gibi input etiketimizi en sonda kapatıyoruz. İd ve title özellikleri ile de tanımlamalarımızı yapıyoruz. Form alanlarında yer alan input etiketlerinin kapatması olmadığından kod içersinde sonda kapatıyoruz. Kapatması zorunlu etiketlerde bu özelliği kullanmıyoruz. Örneğin;
<textarea name=metin id=metin cols=5 rows=5 title=metin></textarea>
Görüldüğü üzere textarea etiketi kapatılması zorunlu etiketlerdendir. Bu etiket üzerinde aynı zamanda kod içi 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 özelliklerde kod kapatması olmadığından dolayı kodlarımızı yine satır sonunda kod içi kapatma uygulayarak bitiriyoruz.
<link href=stil.CSS rel=stylesheet type=text/css />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Kod kullanımlarımızı bu şekilde uyguluyoruz.
[h3>Link kullanımlarında XHTML[/h3>
Sayfa içerisinde verdiğimiz linklerde de XHTML kurallarına uygun bazı değişiklikler yapmamız gerekmektedir. Örneğin resim uygulamalarında olduğu gibi title özelliğini kullanarak açıklama belirtmeliyiz. Uygulamalarımızın daha erişilebilir olması açı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. Özellikle görme özürlü arkadaşlarımız için bu kullanım son derece önemlidir.
Oluşturacağımız link sayfa içerisinde herhangi bir kelimeye vereceğimiz link olabileceği gibi sıralı liste şeklinde de linklerimiz olabilir. Örneğin sitemizin menüsünü oluştururuken link<br />link<br />link şeklinde değilde sıralı listeleri kullanarak oluşturmalıyız <ul><li>. Yaptığımız açıklamalar doğrultusunda XHTML kurallarına uygun birkaç link hazırlayalım.
<a href=sayfa.asp title=örnek sayfamız tabIndex=1>anasayfa</a>
PHP:
<ul>
<li><a href=sayfa.asp title=anasayfa tabIndex=1>anasayfa</a></li>
<li><a href=forum.asp title=forum tabIndex=2>forum</a></li>
<li><a href=iletisim.asp title=iletisim tabIndex=3>iletisim</a></li>
</ul>Örnek uygulamamızda gördüğünüz gibi <ul> ve <li> ile sıralı liste oluşturup linklerimizi belirttik. Açtığımız bütün etiketleri sırasıyla kapattık. tabIndex ile link sıralamalarımızı belirttik. Sayfamız açıkken tab tuşuna bastığımızda ilk olarak anasayfa ikinci sefer bastığımızda forum üçüncü sefer bastığımızda ise iletişim linkleri aktif hale gelecektir.
XHTMLe giriş kısmında verebileceğim örnekler ve açı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 dönecektir.