Neler yeni

Yeni mesajlar Yeni konular En çok mesaj En çok tepki En çok görüntülenen

Ders - XHTML ve HTML Arasındaki Farklar

Ali Emre

👑Efsanevi Grafiker👑
Katılım
30 Tem 2007
Mesajlar
2,141
Tepkime puanı
85
Web sitesi
gncart.com
1. Küçük harf kullanımı : Normal HTML ‘de büyük yada küçük harf hiç farketmiyordu, bu konuda hiçbir kural yoktu fakat XHTML özellikle küçük harf konusunda çok titiz.

HTML
<BODY>
<div WIDTH=”100%”>Merhaba Dünya</div>
</BODY>

XHTML
<body>
<div width=”100%”>Merhaba Dünya</div>
</body>

2. Parametrelerde küçük harf ile yazılmalıdır :
Yukarıda bahsettiğim şıkka ek olarak parametrelerde bir standarta baglanmıştır.

HTML
<BODY>
<div>Merhaba Dünya</div>
</BODY>

XHTML
<body>
<div>Merhaba Dünya</div>
</body>

3. Düzgün hiyerarşi : Açılan taglar sırası ile kapatılmalıdır.

HTML
<strong><div>Merhaba Dünya</strong></div>

XHTML
<div><strong>Merhaba Dünya</strong><div>

4. Kapalı taglar : Tüm taglar kapatılmalıdır. Örneğin bazı taglar tek başına kullanılır (br , hr, img) bu taglarda XHTML ‘de kapatılmalıdır.

HTML
<br>
<hr>
<image href=”resim.gif”>

XHTML
<br />
<hr />
<image href=”resim.gif” title=”Flashcentury” />

5. Kapatılan taglara / işaretinden önce boşluk bırakmak : Yukarıdaki şıkla bahsettiğim tagları kapatırken / işaretinden önce bir boşluk bırakmanız gerekmektedir. Bu tarayıcılar ve arama motorları tarafından kabul edilmiş bir standarttır.

Yanlış Kullanım
<br/>
<hr/>
<image href=”resim.gif” title=”Flashcentury”/>

Doğru kullanım
<br />
<hr />
<image href=”resim.gif” title=”Flashcentury” />

6. Link ve Resim eklerken bir başlık girilmelidir : Özellikle arama motorları için ve standartlar uymak için bunu yapmanız gerekmektedir. title parametresi ile resim veya link hakkında tarayıcıya bilgi vermemiz gerekmektedir.

HTML
<image href=”resim.gif”>
<a href=”https://www.grafikerler.net“>

XHTML
<image href=”resim.gif”>
<image href=”resim.gif” title=”Grafikerler” />
<a href=”https://www.grafikerler.net” title=”Grafikerler” />

7. Parametreler tırnak içinde olmalıdır : HTML ‘ de bu konuda bir şart yoktu tırnak için ve tırnak içinde kullanmadan parametre değerleri verilebiliyordu.

HTML
<BODY>
<div width=100%>Merhaba Dünya</div>
</BODY>

XHTML
<body>
<div width=”100%”>Merhaba Dünya</div>
</body>

8. Parametrelerde sadeleştirme : Özellikle Form parametrlerinde bazı kolaylıklar vardı, örneğin checked parametresini kullanarak bir radio buttonu seçili hale getirebiliyorduk ama malesef XHTML ‘de bu olay kaldırıldı.

HTML
<input type=”radio” checked>
<option selected>

XHTML
<input type=”radio” checked=”checked” />
<option selected=”selected” />

9. Name parametresi yerine id Parametresi kullanimi : HTML döneminde taglara isim verirken Name parametresi kullaniliyordu, Id parametresi ise ikinci bir olasilik veya javascript ağırlıklıydı fakat XHTML genel tanımlamada Id parametresini kullanmamızı istiyor.

HTML
<div name=”mesaj”>Merhaba Dünya</div>
<image name=”resim” href=”resim.gif”>

XHTML
<div id=”mesaj”>Merhaba Dünya</div>
<image id=”resim” href=”resim.gif” />

10. DOCTYPE bildirimi : HTML kodlarından önce daha doğrusu kodlamanın ilk başına DOCTYPE (DTD ) bir başka değişle HTML dokumanımızın çeşitini bildirmemiz gerekiyor. Bu konuyla daha ayrıntılı bilgiye buradan ulaşabilirsiniz.

HTML
<html>
<head>
<title> HTML Dökümanı</title>
<body>
<div>Merhaba Dünya</div>
</body>
</html>

XHTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title> HTML Dökümanı</title>
<body>
<div>Merhaba Dünya</div>
</body>
</html>

Eğer standart bir XHTML kodlaması yapacaksanız genel kullanımı yukarıdaki gibidir ve tüm XHTML sayfalarınızın ilk satırına bu kodu ekleyebilirsiniz fakat bazen sayfanızı frameler ile veya farklı türlerde yapmanız gerekebilir, DTD bildimi ile kodlamanızın çeşidini tanımlarsınız ve tarayıcılara yardımcı olursunuz. DOCTYPE ile ilgili yazıma buradan ulaşabilirsiniz.

HTML ‘den XHTML ‘ye geçen veya bu işe yeni başlamış arkadaşlar için dikkat etmesi gereken en önemli gördüğüm 10 maddeyi ekledim.Kolay gelsin.
 

BlackShadow

🏅Acemi Tasarımcı🏅
Katılım
11 Ara 2007
Mesajlar
35
Tepkime puanı
0
Teşekkürler, çok yardımcı olacak. Sağol.
 

blueden

Kreatif Stratejist
👑Efsanevi Grafiker👑
Katılım
26 Şub 2008
Mesajlar
7,264
Tepkime puanı
176
"Merhaba dünya":p

Ali Emre herhangi bir kaynak kullanarak mı hazırladın, yoksa tamamen kendi hazırladıgın bir ders mi? :)
Emeğine sağlık.
 

Ali Emre

👑Efsanevi Grafiker👑
Katılım
30 Tem 2007
Mesajlar
2,141
Tepkime puanı
85
Web sitesi
gncart.com
Bir arkadaşımla ortak hazırladık.:::::::::::::)
 
E

energy_explode

Guest
gerçekten güzel anlatılmış kardeşim anlaşılmaması imkansız ellerinize sağlık ;)
 

d3niz

UI Pilot
♾️Grafik Gurusu♾️
Katılım
30 Tem 2008
Mesajlar
1,495
Tepkime puanı
32
Web sitesi
www.d3niz.com
"Merhaba Dünya" programlama eğitim derslerinde efsanevi 2 kelime oldu artık. Bir yerden yardım almaya gerek yok. İnsanın aklına direk onlar geliyor. :D

Ali Emre arkadaşım çok güzel bir yazı olmuş. XHtml hakkındaki bu gerçekleri bilmiyordum.
Teşekkür ederim bilgilendirmen için. :)
 

xcoder

xxx
🏅Acemi Tasarımcı🏅
Katılım
28 Nis 2009
Mesajlar
32
Tepkime puanı
4
Web sitesi
john.w3ic.org
ayrıca ekleme yapmak isterim ...

input tagları
HTML kullanımı:
<input name="x" value="xxx" type="submit">

XHTML kullanımı:
<input name="x" id="x" value="xxx" type="submit" />

XHTML ile birliikte id attributes'i eklemek ve tag bitişinde / kullanma getirildi.
 
Üst