Xhtml Dersleri (Bölüm 1)
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” 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” 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.
Bir sonraki ders dizisinde biraz daha teknik konulara değineceğiz. Umarım faydalı olabilmişimdir.
Rastgele Yazılar
Xhtml Dersleri (Bölüm 1) yazısı için 36 yorum yapılmış...
Yorumunuzu Yazın
Paylaşım için teşekkürler!
sence ben takip etsem öğrenebilir miyim bunu?
bi de fotoşop dersi olsa bea…
Photoshopla ilgili elimden geldiğince makale yazmaya çalışıyorum, bunun dışında Xhtml öğrenebilmen için öncelikle temel HTML bilgisine sahip olman gerekir sevgili kardeşim. Bunun için sana ne kadar dil döktüğümü söylesem anlarsın değil mi?
:)
Mükemmel bir makale olmuş. Oldukça faydalı. Her ne kadar standartlara uymak yerine uygulamalarımı zaman kısıtından dolayı hemen bitirmek için uğraşsam da standartlara uymak lazım :)
evet bazen bende aynı yola başvuruyorum ama sonradan pişman oluyorum iki dakika daha sabırlı kod yazsam standart olacak ama yok illaki acele acele bitcek iş. aynı dertten muzdaribiz sanırım. :)
[...] html’den farkları gibi konulara değinmiş ve doyurucu bir bilgiyi bizlere sunmuş.
hiç meme nun değllim resimli yapsaydınız daha i olurdu be nce
@Büşra, keşke yeterince vaktim olsa da bu konu hakkında uygulamalı bir sayfa hazırlayabilsem. Ancak inan bunu yapacak kadar bile vaktim yok. Bu yüzden “keşke resimli yapsaydınız” serzenişini çok iyi anlıyorum. En kısa zamanda bu konuya eğileceğim. İlgin için teşekkür ederim.
teşekkürler
çok işime yarayacak:)
bencede gayet iyi..
yarın ki sınavımda işime yarayacağını umuyorum :)
ve teşekkürlerimi bildiririm,
vakit ayırıp uğraştığınız için..
iyi günler!
Bu ülkede bişeyleri pohpohlama ihtiyacı almış başını gidiyor. Ya arkadaşlar yukarıda birşey açıklamamışki, ilkokul ingilizcesi olan herkes bu yukarıda yazılanları netten okuyabilir. Ne işinize yarıyor anlamıyorum… Bu kafada olduğunuz sürece tr nette biyere gelemez. Büyük ihtimalle bu yazıda silinecek, problem değil yazar görsün bişeyler çıkarsın diye yazdım.
@Ahmet kardeşim gördüğün gibi yazını silmedim bilakis onayladım. Onayladım ki kendisiyle bu kadar çelişen bir insanı herkes görsün ve bilsin.
Yahu yukarıda yaptığım şey çok matah birşey değil. Bunun farkındayım. İngilizce bir dokümanı okudum ve Türkçe’ye çevirdim. Kendi anlatımımla insanlara sundum. Şimdi sayın arkadaşım, Türk neti bu tarz paylaşımlar olmadan nasıl gelişecek bunu bana bi anlat! Ufak dağları ben yarattım havasında olmadım hiçbir zaman. Kendi blogumda kendi bildiğim şeyleri insanlara aktardım. Bu yüzden blog camiasında bu kadar sevilen ve sayılan bir site oldu burası.
Şu saatten sonra sizin gibi alelade yorumlar yapan kişileri bu görüşlerinden döndürmek için birşey yapmayacağım. Sadece ziyaretçilerime sorun onlar size Volkan Karakuş’un nasıl bir insan olduğunu söylerler.
xhtml’nin ne olduğunu duydum ama ne işe yaradığını ilk defa bu siteden öğreniyorum.Anlatımınız gayet açık ve net teşekkürler.
$u satirda minik bir hata var.
HTML Format: Bu yazı kalın ve italik olarak yazılmıştır
XHTML Format: Bu yazı kalın ve italik olarak yazılmıştır
html’de de xhtml’de de verilen ornekler italik olarak yazilmami$.italik olabilmesi icin oncelikle tagi ile acilmi$ olmasi gerekirdi.
Yukarida yazdigim mesajin bir anlami kalmadi zira html taglari sitede gorunmez haldeymi$.Gorunmez halde olmasinin yanisira i$levselmi$.Yani ben $imdi yazsam(tabi parantezleri bilerek bo$lukla biraktim yazinin boyutu delirecek.ukalalik olarak algilanmasin ancak guvenlik acisindan buyuk risk sanirim.
iyi cali$malar.
@indipendence uyarın için teşekkürler, orada ben etiketi yazdım ancak karakter sorunu nedeniyle etiket görünmemiş sanırım. Html etiketlerinin izinlerini de yeniden gözden geçireceğim bu vesileyle. Tekrar teşekkür ederim.
Rica ederim.Ko$eli parantezleri < ve > $eklinde replace ettiginiz zaman sorun kalmayacaktir sanirim.Hatta tum ozel karakterlerin html kar$iliklari $u linkte mevcut replace edebilmek icin.
http://www.ilovejackdaniels.com/characters_cheat_sheet.png
link verdim ama gozukeceginden emin degilim.iyi cali$malar.
Ben w3 school dan çalıştım,gayet güzel bir derleme olmuş,tebrik ve teşekkür ederim.Ayrıca laf olsun diye eleştiri yazanları kafana takma derim..
Çok iyi bir derleme olmuş. Kaynakları belirtmeniz de çok yerinde. Emeğinize teşekkür ederim.
kesinlikle faydalı bi yazı olmuş teşekkürler
Hocam, beyninize ve yüreğinize sağlık. Kafamdaki sorulara yanıt buldum. Teşekkür ediyorum.
Makale çok güzel ve açıklayıcı olmuş teşekkürler
konu hakkında hiç birşey bilmeyen biri olarak gerçekten faydalı olduğunu söyleyebilirim. Teşekkürler.
mükemmel bi yazı olmuş yaa.daha yeni başladım ama diğer yazılarınıda mutlaka okuyacağım.çok faydalı oldu.emeğine sağlık
Arkadaşım çok iyi bir çalışma olmuş bende web tasarım ile ilgili standartları ve güzel sade kaliteli bir site yapmak için araştırmlar yapıyordum seni buldum yazı için sağol.
Sevgili Volkan enfes bir yazı olmuş… Yanlız sanırım bir yer de ufak bir hata var. “Xhtml Etiketleri Gereği Gibi Dizilmelidir!” başlığının altındaki örneklerde italik başlangıç etiketi eklenmemiş.. etiketi yani. Kör de olabilirim :)
çok etkileyici ve önmli bi ders teşekkür ediyorumm…
Gerçekten Güzel Bir Makale Tebrikler.
güzel bir çalışma başarılarınızın devamını dilerim
güzel bir makale teşekkürler
tşk faydalı bi döküman olmus
Teşekkürler başlangıç için güzel bir makale olmuş.Kullanım öncesi bilgilere yer verilmiş elleriniz dert görmesin.Tabiki bundan önce bütün arkadaşlara tavsiyem html kod yapısı kullanımı ve mantığını tamamen anlayarak bu makale ile başlayınız.
çok güzel bir makele olmuş. Elinize sağlık.
Üstadım emeğinize sağlık başlangıç için çok güzel bir makale.
bilgiler için teşekkürler.