XHTML kısaltmasının açılımı İngilizce’de eXtensible Hyper Text Markup Language yani dilimizde ki karşılığı ise “Geliştirilebilir Büyütülmüş Metin İşaretleme Dili”dir
www.dijitalders.comXHTML’i aslında şu başlıklar altında toplamak daha doğru olur:
* XHTML aslında HTML içinde kullanılabilen bir XML uygulamasıdır.
* XHTML’in çıkış amacı HTML’in “kirli” yapısını yenilemektir.
* XHTML 1.0 aslında HTML 4.0.1 ile hemen hemen aynıdır. (Bütün elemanları barındırır.)
* XHTML’in kuralları sabittir, XHTML daha temiz ve düzenlidir.
* XHTML standartlara sâdık kodlama, CSS temelli tasarım ve XML’e geçişte bir basamaktır.
* XHTML’i çoğu tarayıcılar tanır.
XHTML Nedir?
XHTML Nedir?
www.dijitalders.com
Neden XHTML?
XHTML, çünkü kullanıcıların istekleri içerik ve görsellikten evvel hızdır ve siz “kirli” html’den uzaklaşıp xhtml’in düzenli ve temiz kodlamasını kullanırsınız, kullanmak zorundasınız.
XHTML 26 Haziran 2000’den beri bir web standartıdır ve W3C (World Wide Web Consortium – WWW Birliği) tarafından tavsiye edilmiştir.
XHTML web standartlarını kulak arkası etmeyen, css temelli tasarımla uğraşan/uğraşacak, xml’e başlayacak veya xml kullanacak herkesin öğrenmesi gereken bir standarttır.
Eğer işi biraz espirili bir dille anlatmak gerekirse kısaca biz html kodlarına “Kendine çeki düzen ver, adama benze.” demişiz ve ortaya XHTML çıkmıştır.
Gel gelelim işin en can alıcı noktasına; düzen düzen diye bas-bas bağırıyoruz ama ne gereği var? Niye standartlara uyalım diye tatlı canımızı sıkalım? Günümüzde bir çok web tarayıcısı mevcuttur. Gerek bilgisayarlarda, gerek mobil cihazlarda olsun web tarayıcılarının görevi kullanıcıya görsellik ve içeriği en doğru biçimde vermektir. Ve tabii ki bir çok tarayıcı ve bir çok firmanın oluşu çok büyük bir dezavantaj doğurdu. Bunlardan en önemlisi tabii ki standartlara uyulmaması ve tarayıcıların yayınlamada farklılıklar barındırması.
İşte bu noktada standartlara uygun, düzenli, doğru ve temiz kodlanmış sayfalar değer kazanıyor ve gerek müşteriler, gerek sektördeki firmalar “temiz kodlamaya” önem vermektedirler.www.dijitalders.com
Hiçbir web tasarımcı “html işimi görüyor” diye xhtml’den uzaklaşmamalı. En azından web tasarımcı olduğunu öne süren ve bu işte ilerlemek isteyen kişiler xhtml (ve tabi devamında css) öğrenmek zorundadır. Bunun sebebi standartlardır.
Dipnot: HTML 4.0.1’in de standartları vardır ve bunlarda doğrulanabilir fakat XHTML kadar düzenli kurallar değildir. Bunlar genel olarak CSS ile ilgili kurallardır.
XHTML Nedir?
XHTML’in Ana Hatları ve Önemli Kurallar
XHTML aslında HTML bilen herkes için çok rahat öğrenilebilecek bir dil. Hatta HTML biliyorsanız aslında biraz daha sıkı kuralların bulunduğu yeni bir html olduğunu anlarsınız.
Aşağıda bir liste halinde önemli kuralları ve dikkat etmeniz gereken bazı hususları sıraladım.
* XHTML’de bütün elemanlar kesinlikle kapalı olmak zorundadır.
-HTML’de bildğiniz gibi elemanların kapatma işareti / (slash) idi, xhtml’de bu işaret sadece <p></p> gibi elemanların kapanmasında değil içeriksiz elemanların kapanmasında da rol oynuyor.
-Doğru; <li>…</li> ve <img src=”…” … style=”…” />
-Yanlış; <li>… ve <img src=”…” … style=”…”>
* XHTML dökümanları kesinlikle doğru kodlanmış olmalı ve XHTML dökümanları kesinlikle DTD* bildirimi, <html>, <head>, <title> ve <body> elemanlarını barındırmalıdır. Ayrıca <html> elemanı xmlns parametresini almak zorundadır. (DTD= Document Type Definition – Döküman Tipi Tanımı)
Not: DTD bildirimi bir XHTML elemanı değildir ve bu nedenle küçük harflerden oluşma zorunluluğu yoktur, ayrıca kapatma işaretine de ihtiyaç duymaz.
-Örnek; <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
* XHTML dökümanlarında elemanlar kesinlikle iç-içe bulunmalıdır.
-Doğru; <b><i>Ömer Balyalı</i></b>
-Yanlış; <b><i>Ömer Balyalı</b></i>
* XHTML dökümanlarında bütün elemanlar kesinlikle küçük harflerle yazılmak zorundadır.
-Doğru; <a href=”index.html” target=”_blank”>Anasayfa</a>
-Yanlış; <a HREF=”index.html” TARGET=”_blank”>Anasayfa</a>
* XHTML dökümanlarında bütün elemanların parametre değerleri kesinlikle çift tırnak içerisinde olmak zorundadır.
-Doğru; <a href=”index.html” target=”_blank”>Anasayfa</a>
-Yanlış; <a href=index.html target=_blank>Anasayfa</a>
* XHTML dökümanlarında elemanların bütün parametreleri kesinlikle değer almak zorundadır. (Değerler true-false alabileceği gibi bir diğer genel kullanım ise parametrenin değer olarak yine kendisini almasıdır, örnek olarak disabled=”disabled”)
-Doğru; <input type=”button” disabled=”true” />
-Yanlış; <input type=”button” disabled />
* XHTML dökümanlarında içeriksiz elemanlarda kapatma işareti’nden (slash) önce bir karakterlik boşluk bulunmak zorundadır.
-Doğru; <input type=”button” disabled=”true” />
-Yanlış; <input type=”button” disabled=”true”/>
* XHTML dökümanlarında <img> elemanında kesinlikle alt=”” parametresi bulunmak zorundadır.
-Doğru; <img … alt=”” />
-Yanlış; <img … />
* XHTML’de lang=”” parametresini kullanan elemana ayrıca xml:lang=”” parametreside eklenmek zorunluluşu vardır.
-Doğru; <div lang=”en” xml:lang=”en”>GNU’s not Unix!</div>
-Yanlış; <div lang=”en”>GNU’s not Unix!</div>
* XHTML dökümanlarında name=”” parametresi yerine id=”” parametresi kullanılmaktadır.
-Zorunlu değildir ve name kullanmanız hataya yol açmaz, aynı zamanda hem name hem de id parametresini kullanabilirsiniz.
DTD – Döküman Tipi Tanımı Belirtme Zorunluluğu
XHTML dökümanlarında DOCTYPE, <html>, <head>, <title>, <body> elemanlarının zorunlu olduğunu daha evvel söylemiştim. Bu bölümde Döküman tipi tanımı belirtme zorunluluğundan bahsedeceğim.
Şimdiye kadar öğrendiklerimizle çok basit bir XHTML sayfası oluşturalım.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>XHTML’e Giriş – Ömer Balyalı</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
<style type=”text/css”>@import “stil.css”;</style>
</head>
<body>
<h3>Neden XHTML ve XHTML’e Giriş</h3>
<br />
<p>Merhabalar,
Öncelikle bu makaleyi okuyan kişilerin temel HTML bilgisine sahip olduğu varsayılır. Fakat HTML’e yeni başlıyorsanız (yani daha html bilginiz yok ise) yine de bu makaleyi okumanızı şiddetle tavsiye ediyorum. </p>
</body>
</html>
Evet, burada DTD belirtimi her XHTML dökümanında olduğu gibi sayfanın en başında
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
şeklinde ekleniyor.
XHTML’de Bulunan DTD’ler
XHTML’de üç adet DTD bulunmaktadır;
1.Strict
2.Transitional
3. Frameset
Hepsinden kısaca bahsetmeden geçmeyeceğim.
Strict
Strict, ingilizce’de “katı kurallar, düzenli, kusursuz” gibi anlamlara gelir. XHTML’de “strict” bütün kurallara kesin olarak uyulacağı biçiminde adına yakışır biçimde kelimenin anlamını olduğu gibi aktarmaktadır.
XHTML Strict DTD’si XHTML 1.0’ın bütün kurallarını katı bir biçimde ele alır ve XHTML tam mânâsıyla “Strict DTD” ile yazılır. “Strict DTD” de eskitilmiş HTML 4.0.1 elemanları bulunmaz ve eskitilmiş HTML elemanlarıyla birlikte Strict DTD’yi kullanmanız hata verecektir.
-DTD Belirtimi;
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Transitional
Transitional, ingilizce’de “geçiş, geçilme” anlamındadır ve Strict’te olduğu gibi XHTML’de de aynı anlamdadır.
XHTML Transitional DTD’si XHTML 1.0’ın tüm özelliklerini barındırır fakat bazı hususlar vardır, adından da anlaşılabileceği gibi Transitional DTD demek XHTML Strict(yani gerçek XHTML) ile HTML 4.0.1 arasındaki geçişi sağlar. Bu ne demek oluyor? Bu HTML 4.0.1’de ki eskitilmiş elemanlarında XHTML’de kullanılabileceği anlamına geliyor. Ayrıca CSS desteklemeyen tarayıcılar içinde kod yazmak için Transitional DTD kullanılmaktadır.
-DTD Belirtimi;
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Frameset
Frameset, Çerçevelerin bulunduğu sayfalarda kullanılan bir DTD’dir. Frameset’in farkı çerçevelere izin vermesidir. (ipucu: Aslında günümüz web tasarımında çerçeveler pek tercih edilmeyen elemanlardır.Fakat unutmamalıyız ki özellikle web betiklerinin yönetim panelleri, barındırma hizmeti aldığımız sunucudaki kontrol panellerde çok sık görebileceğimiz bir elemandır çerçeveler. Ve eğer bizde kontrol panel tasarımı ve kodlaması yapıyorsak çerçeveleri göz ardı edemeyiz ve XHTML’i de kullanabiliyoruz.)
-DTD Belirtimi;
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
DTD’ler Hakkında Önemli Not: DTD’ler XHTML sayfanızı doğrulatma 1.ci önceliğe sahip elemanlardır. Ve DTD’si bulunmayan XHTML dökümanlarına doğrulayıcılar XHTML muamelesi yapmazlar.
XHTML Modülerliği Hakkında
XHTML basit fakat çok güçlü bir dildir. XHTML bazen basit bazende büyük ve karmaşık bir dil olarak kullanılabilir.
W3C, XHTML modüllerini parçalayarak gerekli yerlerde, gerekli modüllerin kullanılmasını sağlayarak bir çok cihazda uyumluluğu kontrol altına almıştır. Ayrıca XHTML ve XML’in standartları ve kurallarına uyarak bir çok uygulama ve modül geliştirmekte mümkündür.
Bu nedenle XHTML’in modülerliği çok önemlidir. Ve XHTML’in bir XML uygulaması olması burada çok büyük önem kazanmaktadır. Bu sayede XHTML ile birlikte kendi modüllerinizide kullanarak cep telefonu, el bilgisayarı, ev sinema sistemleri gibi aygıtlara çok değişik uygulamalar oluşturabilirsiniz.
XHTML Modülleri ile geliştiriciler aşağıdaki listedeki imkanlardan yararlanmaktadırlar;
* Hazır XHTML modül ve uygulamalarını ilgili cihazlar için kullanabilirsiniz.
* XHTML uygulamalarını bilgisayar harici cihazlara taşıyabilir veya sadece o cihazlar için uygun uygulamalar yazabilirsiniz.
* XHTML’in sınırları çerçevesinde XML kullanarak kendi uygulamalarınızı yazabilir ve ekstra özellikler ekleyebilirsiniz.
* Karışık uygulamalar için XHTML’i genişletebilirsiniz.
XHTML Modülleri
Applet Module – Eskitilmiş applet elemanını tanımlar.
Base Module – Base elemanını tanımlar.
Basic Forms Module – Temel form elemanlarını tanımlar.
Basic Tables Module – Temel tablo elemanlarını tanımlar.
Bi-directional Text Module – BDO elemanını tanımlar.
Client Image Map Module – Tarayıcı taraflı imaj haritası elemanlarını tanımlar.
Edit Module – del ve ins gibi düzenleme elemanlarını tanımlar.
Forms Module – Formlarda kullanılan bütün elemanları tanımlar.
Frames Module – Çerçeve elemanlarını tanımlar.
Hypertext Module – a elemanını tanımlar.
Iframe Module – iframe elemanını tanımlar.
Image Module – img elemanını tanımlar.
Intrinsic Events Module – Durum niteliklerini tanımlar. (onclick, onmouseover gibi)
Legacy Module – eskitilmiş eleman ve parametreleri tanımlar.
Link Module – Link elemanını tanımlar.
List Module – ol,li,ul,dd,dt ve dt elemanını tanımlar.
Metainformation Module – Meta elemanlarını tanımlar.
Name Identification Module – Eskitilmiş name elemanını tanımlar.
Object Module – Object ve param elemanlarını tanımlar.
Presentation Module – b,i ve strong gibi gösterim elemanlarını tanımlar.
Scripting Module – script ve noscript elemanlarını tanımlar.
Server Image Map Module – Sunucu taraflı imaj haritası elemanlarını tanımlar.
Structure Module – Ana elemanları tanımlar. (html, head, title ve body)
Style Attribute Module – style parametrelerini tanımlar.
Style Sheet Module – style elemanını tanımlar.
Tables Module – Tablolarda kullanılan elemanları tanımlar.
Target Module – target parametresini tanımlar.
Text Module – Metin gösterim özellikleri ile ilgili elemanları tanımlar. (p, h1, h2)
-Eskitilmiş elemanlar XHTML’de kullanılmamaktadır.
Sonsöz
XHTML’e temel bir giriş yapmak, XHTML’in kurallarını öğrenmek için bu makale ne kadar yeterli olsa bile yine de XHTML her dilde olduğu gibi kullanılarak alışacağınız bir dildir. Bu makale ile HTML bilen herkes bu makaleyi okuyarak ve 1-2 saat pratik yaparak XHTML’i kullanacak duruma gelebilir.
Konumuzun dışında gibi gözüksede XML, XHTML, DTD, XML Şemaları, XSLT, XPath, XLink ve XPointer hakkında kapsamlı bilgi için Sistem Yayıncılık tarafından çıkartılmış olan Elizabeth Castro’nun XML kitabını tavsiye ediyorum.
internette fazla araştırma yapmanıza gerek olmasada yine kısa bir araştırma ile XHTML bilgilerinizi genişletebilirsiniz. Fakat en önemlisi pratik yapmak ve bundan sonraki bütün dökümanlarınızı XHTML ile kodlamaktır.
Xhtml, günümüzde W3C tarafından standart kabul edilen ve tavsiye edilen web biçimleme dilidir. 2 bölüm halinde yayınlamayı düşündüğüm bu xhtml derslerini hazırlamamdaki amaç, vakti zamanında bu tarz Türkçe içerikli Xhtml derslerini nette aramam ve çok az kaynağa ulaşabilmem. Bununla birlikte elimden geldiğince size bol örnekli ve anlatımlı bir xhtml dersi hazırlamayı düşünüyorum.
(aşağıda yer alan konular ve anlatımlar (yazar eklentileri ile birlikte) w3.org ve w3schools.com sitelerinden alınmıştır. lütfen doğru referans için bu siteleri sıklıkla ziyaret ediniz.)
BÖLÜM 1 Xhtml’ye Giriş
Maddeler halinde sıralayacak olursak Xhtml;
•Açılımı EXtensible HyperText Markup Language (Genişleyebilir Hiper Metin Anlamlandırma Dili) olan web biçimleme dilidir.
•Xhtml, Html dili üzerine kurulmuştur ve onun yerini almaktadır.
•Html 4.01′i ve bünyesindeki etiket ve parametreleri kendine referans alır.
•Temiz ve düzenli Html yazımını sağlar.
•Xhtml, W3C standardı ve tavsiyesidir.
Xhtml öğrenirken neleri bilmemiz gerekiyor?
Herşeyden önce temel Html bilgisine sahip olmalı ve düşük düzeyde de olsa bu dili kullanabilmelisiniz. eğer Html bilginiz yeterli değilse lütfen daha önce Html dilinin yazımını ve kurallarını öğrenin!
Xhtml W3C Tavsiyesidir!
Sizde Xhtml öğrenerek ve bu dili yaptığınız web sitelerinde kullanarak tüm modern browserlarda aynı görüntüyü elde edebilir, W3C standartlarına uygun, daha hızlı erişilebilir web siteleri yapabilirsiniz.
Xhtml ile geleceğin web teknolojilerine bir adım daha yakın olursunuz!
BÖLÜM 2 Neden Xhtml?
World Wide Web üzerinde gördüğümüz birçok web sitesi kötü Html yazımına sahiptir. Bu kodu taşıyan web siteleri bir browser üzerinde düzgün çalışabiliyor olsa bile bir başka browserda aynı doğrulukla görüntülenmeyecektir.
Lütfen aşağıdaki örneği inceleyiniz.
<html>
<head>
<TITLE>Kötü bir HTML sayfası</TITLE>
<body>
<h1>Kötü HTML kodu hiçbir zaman W3 standartlarında geçerli değildir!
</body>
Yukarıda yer alan kodda şayet Html bilginiz yerindeyse bazı etiketlerin kapanmadığını ve eğer Xhtml aşina bir kişiyseniz de Xhtml doküman tipinin tanımlanmadığını bununla birlikte kod yazımının standartlara uygun olmadığını göreceksiniz. Bu tür yazım ile yapılmış bir web sitesi internet üzerinde W3C standartlarına uymadığı gibi, browserlar üzerinde de görüntü bozukluğuna yol açmaktadır.
XML dili her zaman geçerli ve “tam uygun” (well-formed) kod bütünlüğü sağlayarak en doğru sonucu almanızı sağlar. XML Html dosyalarınızda oluşturduğunuz yada elde ettiğiniz dataları en iyi ve doğru şekilde webe aktarabilmeniz için kurulmuştur. Ayrıca esnek yapısı ile kullanıcılarına birçok avantaj sağlar.
Günümüzde webe bağlı iş istasyonları, ev kullanıcı bilgisayarları, mobil cihazlar internete browserlar aracılığı ile bağlanmakta ve yukarıda sözünü ettiğimiz “Kötü Html” yazımına sahip siteler bu cihazlar ve platformlar üzerinde doğru sonuç vermemektedir.
Bu nedenle XML ve HTML kombinasyonu ile oluşturulan ve geleceğe yön verecek dil ortaya çıkarılmıştır: XHTML!
Xhtml ve Xhtml ile oluşturulan sayfalar XML standardını destekleyen tüm cihazlarda ve modern tarayıcılarda (IE, FF, Safari, Opera) “Tam ve standartlara uygun” kod yazımı ile web sayfanızın tüm dünya üzerinde doğru olarak görüntülenebilmesini sağlayan bir fırsattır. Eğer hala Xhtml kullanımını bilmiyor yada web siteleriniz üzerinde Xhtml yazımını kullanmıyorsanız bu yazı dizisini takip edin.
BÖLÜM 3 XHTML ile HTML arasındaki farklar
Xhtml dili, Html’den çokta farklı değildir. Xhtml geçerli parametre ve etiketleri Html 4.01 üzerinden alınmış ve dile entegre edilmiştir. Bununla birlikte, şimdiden HTML kodlarınızı küçük harflerle yazmaya başlayın. Zira Xhtml yazım biçemi, bunun dışında olan (HTML’nin kabul ettiği ancak Xhtml’nin kabul etmediği) yazım biçimlerini ve etiket sonlandırılmalarını standartlara uygun bulmamaktadır.
İki Dil Arasındaki Bazı Önemli Farklar
Maddeler halinde sıralayacak olursak iki dil arasında temel olarak şu farklar vardır:
•Xhtml etiketleri gereği gibi dizilmelidir.
•Xhtml dokümanları “tam ve uygun kod” yazımı ile yazılmalıdır.
•Etiket ve parametre isimleri “küçük harflerle” yazılmalıdır.
•Tüm Xhtml etiketleri mutlaka “kapatılmalıdır”
Xhtml Etiketleri Gereği Gibi Dizilmelidir!
Aşağıdaki örneği inceleyecek olursanız bu yazım tarzının Xhtml’ye uygun olmadığını göreceksiniz. Çünkü bu yazımda etiketler sırasız olarak kapatılmışlardır. Bu tarz bir yazım Xhtml’de yine aşağıdaki gibi olmalıdır.
HTML Format: <b>Bu yazı kalın ve italik olarak yazılmıştır</b></i>
XHTML Format: <b>Bu yazı kalın ve italik olarak yazılmıştır</i></b>
Yukarıda görüldüğü üzere Html formatta etiketlerin kapanma sırası önemli değil. Bu tarz bir yazımı browser bir hata vermeden görüntüleyecektir. Ancak ikinci yazımda Xhtml’ye uygun olan kod daha temiz ve daha iyi bir kullanımdır.
Xhtml dokümanları “tam ve uygun kod” yazımı ile yazılmalıdır!
Xhtml üzerinde kodlar, özellikle html, body, head gibileri çift olmalı yani açılan head etiketi komutlar icra edildikten sonra bitirilmeli bu etiket içine standarda uygun olmayan başka eklenti veya kod yazılmamalıdır. Aşağıdaki örnek Xhtml yazımına uygun bir Html kabuğunu bizlere veriyor.
<html>
<head> … </head>
<body> sayfamızda yer alan görsel öğelerin tümü </body>
</html>
Etiket ve parametre isimleri “küçük harflerle” yazılmalıdır!
Xhtml yazımı kesinlikle etiket ve parametrelerin büyük harfle yazımını kabul etmez. Yazılan etiketler mutlaka küçük harflerle yazılmalıdır. Aşağıda html ve xhtml formatında örnekler bulabilirsiniz.
HTML Format: <BODY><FONT color=”red”>bu yazı kırmızı</FONT></body>
XHTML Format: <body><font color=”red”>bu yazı hem kırmızı hem de Xhtml ile yazıldı!</font></body>
Yukarıdaki örnekte gördüğünüz gibi Html format yazılan kodu aynen browserda icra edecektir, burada herhangi bir sorun olmamaktadır. Ancak Xhtml yazımında etiketleri ve parametreleri küçük yazmalıyız. Ancak bu şekilde bir yazım standart uyumu için geçerli olabilir.
Tüm Xhtml etiketleri mutlaka “kapatılmalıdır”!
Xhtml dilinde kodlama yaparken kesinlikte tüm açılan etiketler kapatılmalıdır. Açılan etiketlerin sırayla kapatılması Xhtml için doğru bir yazımdır. Yine örneğimizi inceleyelim:
HTML Format: <p>bu bir paragraf…
XHTML Format: <p>bu bir paragraf </p>
Boş etiketler kesinlikle kapatılmalıdır!
Html üzerinde bazı etiketlerin kapatılmasına ihtiyaç duyulmaz. Örneğin <br>, <img>, <hr> gibi. Xhtml dilinde bu etiketlerinde bir kapatılma biçimleri vardır. Etiketler sonuna /> işareti atılarak bu etiketler kapatılmalıdır. Lütfen aşağıdaki örnekleri dikkatlice inceleyiniz.
HTML Format:
Satır atlayalım<br>
Sayfamıza yatay çizgi atalım :<hr>
ve sayfamıza bir resim yerleştirelim <img xsrc=”xhtml.gif” mce_src=”xhtml.gif” alt=”xhtml dersleri”>
Xhtml Format:
Satır atlayalım<br />
Sayfamıza yatay çizgi atalım:<hr />
ve sayfamıza bir resim yerleştirelim <img xsrc=”xhtml.gif” mce_src=”xhtml.gif” alt=”xhtml dersleri” />
gördüğünüz gibi Html üzerinde kapatmaya ihtiyaç olmayan bu etiketler Xhtml dilinde etiket sonuna /> atılarak kapatılıyor. Günümüz browserlarına tam uyumlu olabilmesi için siz de bu tarz etiketlerin sonuna bir boşluk ve /> işaretleri atarak sonlandırınız. Tıpkı örnekte olduğu gibi.
BÖLÜM 4 XHTML ve Syntax (Sözdizimi, Sentaks)
Her dilde olduğu gibi Xhtml dilinde de bu dile has olan bir yazım stili vardır. Aşağıya bunları madde olarak yazmaya çalışalım.
– etiket ve parametreler küçük harfle yazılmalı
– parametre değerleri kesinlikle alıntılanmalı yani tırnak işareti içinde yazılmalı
– parametre değerlerinde kısaltılma yapılmamalı
– name parametresi yerine “id” parametresi kullanılmalı
– Xhtml dokümanlara zorunlu olarak DTD (Doküman Tipi) tanımlanmalı Etiket ve Parametreler küçük harfle yazılmalı!
Daha önceki konularımızda gördüğünüz gibi Xhtml üzerinde etiket ve parametre isimleri sürekli küçük harflerle yazılmalıdır. Bunun dışında kalan bir yazım uygulaması Xhtml’ye aykırıdır. Yine örneklem yoluyla devam edelim:
HTML Format: <table WIDTH=”100%”>
XHTML Format: <table width=”100%”>
Parametre değerleri kesinlikle alıntılanmalı yani tırnak işareti içinde yazılmalı!
Xhtml üzerinde yukarıdaki maddelerde belirttiğimiz gibi parametrelerin karşılığı olan değerler kesinlikle tırnak işaretleri içine yazılmalıdır.
HTML Format: <table width=100%>
XHTML Format: <table width=”100%”>
Parametre kısaltılma yapılamaz!
Html dokümanlar üzerinde bazı zamanlar (örneğin formlar) üzerinde tanımlanan bazı seçili değerler vardır. input etiketinde checkbox değeri kullanırken seçili öğeyi “checked” yazarak seçeriz. Xhtml de bu tarz bir yazım veya kısaltma yapılamaz. Bununla birlikte değerler tam ve doğru bir şekilde yazılıp tanımlanmalıdır. Örneklerimizi incelerseniz konuyu daha iyi kavrayabileceksiniz.
HTML Format: <frame noresize>, <input checked>
XHTML Format: <frame noresize=”noresize” />, <input checked=”checked” />
(yine boş etiketlerin yani kapatılması Html üzerinde gerekli olmayan etiketlerin Xhtml’de nasıl kapatıldığını görüyorsunuz, lütfen bu ayrıntıyı atlamayınız)
Aşağıdaki tabloda Html üzerinde tanımlanmayan ve kısa parametre değeri olarak yazılan bazı değerlerin Xhtml’deki yazım biçimini göreceksiniz. Lütfen tabloyu inceleyin.
HTML
XHTML
compact
compact=”compact”
checked
checked=”checked”
declare
declare=”declare”
readonly
readonly=”readonly”
disabled
disabled=”disabled”
selected
selected=”selected”
defer
defer=”defer”
ismap
ismap=”ismap”
nohref
nohref=”nohref” mce_href=”nohref”
noshade
noshade=”noshade”
nowrap
nowrap=”nowrap”
multiple
multiple=”multiple”
noresize
noresize=”noresize”
“name” parametresi yerine “id” parametresi kullanılmalı!
Html üzerinde a, applet, frame, iframe, img, map gibi etiketlerin tanımı olarak kullanılan “name” parametresi Xhtml üzerinde geçerliliğini yitirmiştir. “name” yerine “id” parametresi kullanılmalıdır.
HTML Format: <map name=”map_1” />
XHTML Format: <map id=”map_1″ />
(Not: bazı eski browserlar üzerinde id parametresi çalışmayabilir, bu gibi durumlarda hem name hem de id parametresini aynı etiket üzerinde tanımlayabilirsiniz. )
Xhtml dokümanlara zorunlu olarak DTD (Doküman Tipi) tanımlanmalı!
Xhtml dili ile kodlanan sayfalarda mutlaka DTD yani Doküman tipi tanımlanmalıdır. Doküman tipi tanımlama kodu kodlama itibariyle sayfanın en üstüne yapılır ve yapısal XML dosyalarının çağırılması ile geçerli olur. Doküman tanımlarına yazımızın ilerleyen bölümlerinde değineceğiz.
Dil Özelliği!
Xhtml üzerinde hemen hemen her sayfanın dil tanımlaması yapılmaktadır. Dil tanımlamasını aşağıdaki XML atıf kodu ile yapabilirsiniz.
<div lang=”tr” xml:lang=”tr”>Merhaba Dünya, Merhaba Xhtml!</div>
BÖLÜM 5 XHTML DTD (Doküman Tipi Tanımı)
Xhtml belgeler içinde doküman tipi tanımlamanın zorunlu olduğunu daha önceki bölümlerde dile getirmiştik. Bu bölümde ise kısaca Xhtml üzerinde kullanılan doküman tip tanımlarına değineceğiz.
Xhtml üzerinde doküman tipi tanımları sürekli olarak kodlamanın birinci satırında yer alır. Bu satırda yer alan doküman tipi tanımı ile sayfanın geri kalan kodları o tipe göre icra edilir. Bununla birlikte bir Xhtml dokümanı 3 öğeden oluşmaktadır. DOCTYPE, Body ve Head. Yaptığımız bu açıklamaya göre bir basit Xhtml kabuğu sunalım.
<!DOCTYPE …>
<html>
<head>
<title>… </title>
</head>
<body> … </body>
</html>
Yukarıda görmüş olduğunuz örnek Xhtml için geçerli bir doküman tipi tanımı ile başlamış, kodlar küçük harfle yazılmış, icra edilen kodlar sırasıyla kapatılmıştır. Bu tarz bir yazım Xhtml yazımına uygun ve geçerli bir yazım şeklidir.
DTD 3 Ana Türden Oluşur!
Xhtml üzerinde 3 tür doküman tanımlama tipi vardır. Bunlar STRICT, TRANSITIONAL ve FRAMESET olarak adlandırılmaktadır. Şimdi bu doküman tiplerinin nasıl kullanılacağından ziyade neler olduğuna bir göz atalım.
Strict, doküman tipi Türkçe’ye “Tam” manasında çevrilebilir. Bu doküman tipinin tanımlandığı dosyalarda hem Xhtml hem de Css bileşenleri rahatlıkla kullanılabilir.
Transitional, doküman tipi ise “Geçişli” olarak dilimize çevrilebilir. Bu tip dokümanlar Html etiketlerini tam kullanabilmek için tanımlanabilirler, modern tarayıcılar bu tarz doküman tipi tanımlanmış olan sayfalarda Css eklentilerini ve kodlarını icra etmezler. Adından da anlaşılacağı gibi bu tip Html geçiş tipidir.
Frameset, tip ise sayfalarında “Çerçeve” kullanan tasarımcılar için oluşturulmuştur. Bu doküman tipi iki yada daha fazla frame yani çerçeveye sahip sayfalar için kullanılabilir.
DTD Tanımlarını Kullanalım!
DTD kullanımının sitemizin birinci kod satırında yer aldığını söylemiştik. Şimdi aşağıdaki kodları inceleyerek her bölüm için tanımlanan doküman tipinin sitelerimizde nasıl uygulanacağını görebilirsiniz.
STRICT
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
TRANSITIONAL
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
FRAMESET
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
BÖLÜM 6 XHTML’de Parametre ve Olaylar
Xhtml dili üzerinde tasarımcıların kullanabilmesi ve işlerini kolaylaştırabilmesi için özel parametreler ve olaylar tanımlanmıştır. Herhangi bir etikete özel parametreler yardımı ile bir sınıf veya id tanımlayarak çok daha iyi bir kodlama ve tasarım yapılabilir. Bu parametreler bir etiketin değerlerini ve niteliklerini düzenlemek ve tanımlamak için de kullanılırlar. Aşağıdaki listede bu tür parametrelerin neler olduğu, değerleri ve geçerli olduğu temel etiketler verilmiştir.
Temel Parametreler
Bu parametreler head, html, meta, param, script, style, ve title etiketlerinde geçerli değildir.
Parametre
Değer
Tanım
class
Sınıf durumu
Etiketin ait olduğu sınıfı belirtir
id
id ismi
element için tanımlanan unique id
style
stil tanımı
dahili stil tanımları için kullanılır
title
ipucu textler
elementlerin ipucu yazıları için kullanılır
Dil Parametreleri
Bu parametreler base, br, frame, frameset, hr, iframe, param, ve script etiketlerinde geçerli değildir.
Parametre
Değer
Tanım
dir
ltr | rtl
metin yönünü ayarlar
lang
dil kodu
dil kodunu ayarlar
Klavye Parametreleri
Parametre
Değer
Tanım
accesskey
karakter
elementin klavye kısayolunu ayarlar
tabindex
numara
elementin tab sekme sayısını ayarlar
Olaylar
Xhtml üzerinde tıpkı html sayfalarda kullandığımız gibi bazı olay süreçleri (event action) kullanırız. Örneğin Mouse ile tıklama, mouse ile elementin üzerine gelme, klavyede bir tuşa basma gibi. Bu tarz olaylar temelde Javascript ve Dhtml fonksiyonları ile sağlanmaktadır. Bizler sadece bu işi yapan fonksiyonu Xhtml belgemizde kullanarak çalışmasını sağlarız. Aşağıda yer alan listede bu tarz olayların neler olduğu, kullanım şekilleri ve verilen değerleri görebilirsiniz.
Pencere Olayları
Sadece body ve frameset etiketleri içinde geçerlidir.
Parametre
Değer
Tanım
onload
script
Doküman yüklendiğinde çalışacak
onunload
script
Doküman yüklenmediğinde çalışacak
Form Element Olayları
Sadece form elemanları içinde geçerli olan olaylardır.
Parametre
Değer
Tanım
onchange
script
Elementlerin değişimi sırasında çalışacak
onsubmit
script
Form gönderimi sırasında çalışacak
onreset
script
Form temizlenmesi sırasında çalışacak
onselect
script
Element seçimlerinde çalışacak
onblur
script
Form aktivasyonunda çalışacak
onfocus
script
Formlarda yer alan focus özelliğinde çalışacak
Klavye Olayları
Bu parametreler base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, ve title etiketlerinde geçerli değildir.
Parametre
Değer
Tanım
onkeydown
script
Karakter değerine tıklandığında çalışacak
onkeypress
script
Klavye tuşuna basıldığında çalışacak
onkeyup
script
What to do when key is released
Fare Olayları
Bu parametreler base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, ve title etiketlerinde geçerli değildir.
Parametre
Değer
Tanım
onclick
script
Mouse tıklamasında çalışacak
ondblclick
script
Mouse çift tıklamasında çalışacak
onmousedown
script
Mouse aktive tıklamasında çalışacak
onmousemove
script
Mouse hareketinde çalışacak
onmouseover
Script
Mouse ile element üzerine gelindiğinde çalışacak
onmouseout
script
Mouse ile element üzerinden uzaklaşılınca çalışacak
onmouseup
script
Mouse aktivesi yenilendiğinde çalışacak
BÖLÜM 7 Xhtml’ye Hazırsınız!
Artık sayfalarınızda Xhtml kodlar kullanabilmek için neredeyse hazırsınız. Yukarıda anlattığımız konuları ve bölümleri biraz özetleyelim ve neler olduğuna bakalım.
Öncelikle Xhtml üzerinde nelerin geçerli olduğun ve nelerin (hangi tür yazım şeklinin ve kod, parametre kullanımının) geçerli olmadığını öğrendik. Xhtml belgelerimizde küçük harflerle kodlarımızı yazacak ve etiketlerimizi açtığımız sıraya göre kapatacaktık.
Bununla birlikte Html üzerinde kapatılmayan etiketlerin (<br>, <img>, <hr> gibi) de kapatılması gerektiğini öğrendik. Çünkü artık biliyoruz ki “Xhtml üzerinde her etiket sonlandırılmalıdır!” Bu sonlandırmayı da Xhtml’ye uygun biçim olan <br />, <img />, <hr /> şeklinde yaptık.
Xhtml dokümanlarımızın başında DTD tanımlayarak hangi biçim tarafından değerlendirileceğini ayarladık. Tam, Geçişli ve Çerçeveli doküman tipi tanımları ile sayfamıza uygun olan tipi seçtik.
Daha sonra kodlamamızı Xhtml’ye uygun biçimde “Tam ve Standart” kod yazımı ile devam ettirdik. Yine Xhtml’de tanımlanan olay ve parametreler ile sayfamıza daha iyi özellikler kattık.
Standartları unutmayın!
Xhtml dokümanları hazırlamayı ve yazım kurallarını öğrenmiş bulunuyoruz. Ancak bu saatten sonra unutmamanız gereken bir şey daha var. O da standartlar!
W3C (World Wide Web Consortium) bize sıklıkta tavsiye ve öğüt ettiği standartları ve standart yazım biçemini lütfen sayfalarınızda uygulayın. Ancak bu şekilde hem hızlı erişilebilir hem de sadece pc değil tüm platformlar üzerinde doğru görüntülenir sayfalar yapabiliriz.
Yapmış olduğunuz sayfaların http://validator.w3.org sitesinden Xhtml standartlarına uygun olup olmadığını kontrol edin.
Artık Xhtml’ye aşina bir kişi olarak bundan sonra yapmanız gereken temel CSS dersleri alarak kendinizi daha da geliştirmek.
Kararlı ve standartlara uygun bir sayfa hazırlamak ihtiyacınız olan bileşim Xhtml ve Css yolundan geçiyor. Bunu kesinlikle unutmayınız.
Kaynaklar
•forum.zoque.net/arsiv-bolumu/18542-makale-neden-xhtml-ve-xhtmle-giris/
•t-infection.com/xhtml-dersleri-bolum-1/
•t-infection.com/xhtml-dersleri-bolum-2/