web-touristXHTML – Правила
Какво е XHTML и как да го използваме
Всеки документ започва с DOCTYPE декларация. Тя служи за това, да оказва на браузъра езика и версията на езика, на който е написан документа. В XHTML 1.0 има три вида такива декларации:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(Това е най-стриктната форма на XHTML - при нея би трябвало да разчитате изцяло на CSS за оформлението на страницата, като например не можете да използвате атрибута bgcolor в тага body и т.н. )<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(Това е най-използваната форма на XHTML, която не е толкова претенциозна към разделянето на оформлението от съдържанието и структурата.)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
(Използвайте тази декларация, ако на страницата ви има т.нар. фреймове - вложени един в друг отделни документи.Понеже XHTML всъщност е XML базиран език, в първия таг на документа (а това трябва задължително да е тагът) трябва да има namespace декларация, плюс указания за езика на документа. Следват примери за български и английски език:
<html lang="bg" xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">Всички елементи трябва да са „затворени“, като това важи дори и за елементите, които по принцип нямат затварящ таг. Често се случва да забравяме да затворим някой елемент както в този случай:
<HTML>
<HEAD><TITLE>Forms and Elements</TITLE></HEAD>
<BODY>
<CENTER>
<FORM NAME="frmForm"
<Input Type = "Text"><p>
<Input Type = "Text"><p>
<Input Type = "Text"><p>
<Input Type = "Text"><p>
<Input Type = "Button" NAME="cmdChange" VALUE="Click Here"><p>
</FORM>
</CENTER>
</BODY>
</HTML>Забелязвате ли как таговете
не са затворени – по този начин браузърът няма да знае къде свършва първият параграф и ще отваря всеки път нов параграф, а това нарушава структурата на документа. Още по-фрапиращо изглежда факта, че отварящият таг на елемента FORM дори не е завършен с необходимия знак „>“ (бел. авт.- на това парче код попаднах в един урок (!) за VBScript, като съм премахнал излишния скрипт към примера за да изпъкнат грешките). Правилният синтаксис според правилата на XHTML изглежда така:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Forms and Elements</title>
</head>
<body>
<center>
<form name="frmFrom">
<p><input type="text" /></p>
<p><input type="text" /></p>
<p><input type="text" /></p>
<p><input type="text" /></p>
<p><input type = "button" name="cmdChange" value="Click Here" /></p>
</form>
</center>
</body>
</html>Може би ви е направил впечатление input елемента и начина, по кайто той е затворен. Няма грешка, така се затварят в XHTML всички елементи, които по принцип нямат затварящ таг. Ето няколко примера:
<img src="images/mypicture.gif" alt="This is my picture" />
This is made with XHTML! <br />
<input type="button" value="Click me!" />Важна особеност на XHTML e, че всички елементи трябва да се изписват с малки букви. Това е така поради факта, че XML разпознава малки и главни букви – <B> не е същото като <b>. Същото важи и за имената на атрибутите. Така че сега е момента да започнете да пишете всички елементи само и единствено с малки букви.
Друг важен аспект на XHTML е, че документите подобно на XML трябва да са „добре оформени“(използвам термина на W3C). Това означава, че елементите не трябва да се припокриват, а трябва да има строга зависимост къде са техните отварящи и затварящи тагове. С други думи, това:
<center> A piece of formatted text in <b> HTML. </center></b>е грешно, а това:
<center> A piece of formatted text in <b>XHTML</b>. </center>е вече коректно. С това се цели да се заздрави структурата на XHTML документите и те да станат по-логични.
Стойностите на всички атрибути трябва да са оградени от кавички. Това е неправилно:
<table width=100% border=0>
</blockquote>
<p>А това е правилно:</p>
<blockquote>
<table width="100%" border="0">Така нареченото „минимизиране“ на атрибутите е абсолютно забранено. Този похват се използва сравнително рядко, но все пак трябва да му бъде обърнато внимание:
<input type="checkbox" name="cb1" checked /> (неправилно)<br />
<input type="checkbox" name="cb1" checked="checked" /> (правилно)<br />
<dl compact > (неправилно)<br />
<dl compact="compact" > (правилно)<br />Освен по-горните правила, в XHTML важат също така всички правила на HTML 4.01, които не противоречат на вече споменатите.
Ами това е – въобще не е трудно, нали? Така, помнейки и спазвайки всичките осем изброени правила, вие си осигурявате по-добър и по-чист код и заздравявате структурата на вашата уеб страница. Това е вече една голяма крачка напред, но за да сте сигурни в коректността на кода си, ви препоръчвам винаги да проверявате своите документи за грешки чрез валидатора на World Wide Web Consortium, който можете да откриете на адрес http://validator.w3.org/.Може да се изненадате колко много грешки може да има в един наглед „чист“ документ. А ако се окаже, че вашата страница е напълно чиста от грешки, ще получите правото до сложите на нея банер с надпис „Valid XHTML 1.0“ (помните ли началото на статията….). Опитайте! Нищо не губите, а печелите много. Със знанията си сега можете съвсем лесно да „преведете“ коя да е от старите си HTML страници в XHTML, а защо не и да модернизирате цели големи сайтове. Изборът е ваш, а аз се надявам, че с тази статия съм ви бил поне малко полезен и съм допринесъл за популяризирането на XHTML.
