* Въведение в XHTML 1.1
Публикувано на 18 август 2009 в раздел ХHTML.
XHTML е език за дефиниране на страници в интернет. Името е същращение от eXtensible HyperText Markup Language. Това е стандарт, който е наследник на популярния HTML целящ да направи езика по-стриктен. На практика почти всички примери за HTML и XHTML се припокриват.
Страниците в интернет, които разглеждате ежедневно съдържат както текст, така и графики, картинки, мултимедия и динамични елементи. Дизайна на всяка една страница се дефинира именно чрез езика XHTML. Освен това можете да разглеждате едни и същи страници на различни по големина монитори, различни операционни системи и браузъри, като те ще изглеждат еднакво навсякъде. Целта на XHTML е да предостави унифициран стандарт за еднозначно визуализиране на информация, като това да отнеме възможно най-малко мрежови трафик.
На първо време трябва да се отбележи, че XHTML НЕ е език за програмиране. Той е език за дефиниране на данни и НЕ се компилира до изпълним код. Всяка XHTML страница е съставена от съвсем стандартен текст. Данните в XHTML страниците се разделят от т.нар. "тагове". Таговете представляват ключови думи, които са оградени в скоби: <keyword>информация</keyword>.
Всеки таг, чието име НЕ започва с "/" се нарича "отварящ таг". Всеки таг, който започва с "/" се нарича "затварящ таг". Важно правило за интегритет на данните в XHTML е, че всеки отварящ таг трябва да има съответстващ на него затварящ таг. Изключение правят само няколко специални тага, които могат да се поставят самостоятелно като затварящи - коментарите, DOCTYPE, нов ред, meta-информация и т.н. Тях ще разгледаме подробно поотделно. С изключение на няколко специални, имената на всички тагове се пишат с малки букви!
Всеки XHTML документ трябва да започва с таг DOCTYPE. Този таг указва на браузъра кой стандарт на езика HTML ще бъде използван. Това е важно, защото между различните версии на HTML (последната от които е XHTML) има разлики и една и съща информация може да бъде визуализирана по различен начин в зависимост от езика. Типа документ на XHTML се дефинира по следният начин:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
По-нататък информацията в XHTML документа се огражда с таг <html>...</html>. Обикновено информацията е разделена на две части - заглавна част и тяло. Заглавната част се огражда с таг <head>...</head> и в нея се записва обща информация за документа, позната още нато meta-информация. Тъй като самата дума "meta" се превежда като "информация за", то meta-информация се превежда като "информация за информацията". С други думи в <head>...</head> ние описваме данните, която ще дефинираме в тялото.
Тялото на документа се огражда с таг <body>...</body>. В него се записват реалните данни, които ще бъдат визуализирани на екрана на компютъра, с който се отваря страницата. Ето как би изглеждала нашата първа XHTML страница:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Моята първа XHTML страница</title>
</head>
<body>
<p>Моят първи параграф!</p>
<p>Втори параграф</p>
</body>
</html>
Горният код представя абсолютен минимум за започване на конструиране на XHTML страница. На първите два реда сме записали какъв е типа документ (DOCTYPE). На трети ред сме поставили отварящ таг <html>. В него сме добавили допълнителни елементи, наречени "атрибути". Всеки атрибут започва с име, знак за присвояване (=) и стойност оградена в кавички. В случая сме поставили стандартни атрибути, в които указваме, че ще използваме XHTML namespace (xmlns="http://www.w3.org/1999/xhtml") и ще пишем в документа на български език (xml:lang="bg"). Тези атрибути не са задължителни (браузърите могат да ги отгатнат сами по подразбиране), но въпреки това е силно препоръчително да бъдат поставяни винаги!
На четвърти ред сме отворили заглавен таг <head>. Както виждате той е "вложен" на тага <html>, защото двойката <head>...</head> се намира вътре в двойката <html>...</html>. Както виждате по-долу от своя страна други тагове са вложени от своя страна на <head>. По този начин можем да кажем, че всеки XHTML документ е една йерархична структура от тагове.
За да имаме коректна йерархична структура не трябва да застъпваме таговете. Следното например е грешно: <tag1>...<tag2>...</tag1>...</tag2>. Виждаме, че отваряме последователно два тага. В случая tag2 е дефиниран между отварящия и затварящия tag1, т.е. се казва, че tag2 е вложен на tag1. Да, но ние затваряме tag1 преди да сме затворили неговия вложен. Това често води до объркване на дизайна на страниците. Истината е, че страницата пак ще се отваря и визуализира (браузърите не са стриктни по отношение на грешки), но може да не се постигне очаквания резултат. Затова правилната последователност е <tag1>...<tag2>...</tag2>...</tag1>
Първият таг в <head> е meta-таг, в който указваме каква е кодировката на XHTML документа. В случая в него използваме символи на кирилица и затова е удачно да използваме UTF-8. Този таг също не е задължителен, но все пак препоръчителен. Тагът <title> указва заглавието на страницата. Това е текстът, който се появява в "синята лента" най-горе на вашия браузър.
В тага <body> сме вложили текст в два параграфа. Виждате, че параграфите се указват с таг <p>. Ако запишем този текст във файл test.html (задължително трябва да използваме UTF-8 кодировка, защото в противен случай българският език ще излезне на познатата на всички "маймуница") и ако го отворим с браузър ще видим следния резултат:
Както виждате заглавието в синята лента най-горе е точно това, което указахме в тага <title>. В тялото на браузъра излиза точно текста, който въведохме в <body>, като е разделен на два параграфа точно както указахме. Използвайте този файл като шаблон за по-следващи примери. Ако желаете изтеглете го от тук, като "цъкнете" с десния бутон на мишката върху следната връзка и изберете "save target as..." (за IE) или "save link as..." (за Firefox): Базов XHTML документ
Добави коментар