HTML'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.
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 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?nlamadaki 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.
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'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 bildi?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, ?ngilizce'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, ?ngilizce'de "geçi?, geçi?me" 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. (?pucu: 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.
?nternette 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.
Web Tasar?m alan?nda standartlar? ve geli?ebilirli?i yakalamak üzere bir daha ki makalede görü?mek üzere.
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.
Kaynak 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/
