XHTML - szybki przewodnik
XHTML oznacza EXrozciągliwy HyperTwew Markup Ludręka. To kolejny krok w ewolucji internetu. XHTML 1.0 jest pierwszym typem dokumentu z rodziny XHTML.
XHTML jest prawie identyczny z HTML 4.01 z kilkoma różnicami. To jest bardziej przejrzysta i bardziej rygorystyczna wersja HTML 4.01. Jeśli znasz już HTML, musisz poświęcić niewiele uwagi, aby poznać najnowszą wersję HTML.
XHTML został opracowany przez World Wide Web Consortium (W3C), aby pomóc twórcom stron internetowych w przejściu z HTML na XML. Migrując dziś na XHTML, twórcy stron internetowych mogą wejść do świata XML ze wszystkimi jego zaletami, zachowując jednocześnie pewność co do wstecznej i przyszłej kompatybilności treści.
Dlaczego warto używać XHTML?
Programiści, którzy migrują swoje treści do XHTML 1.0, uzyskują następujące korzyści -
Dokumenty XHTML są zgodne z XML, ponieważ są łatwo przeglądane, edytowane i weryfikowane za pomocą standardowych narzędzi XML.
Dokumenty XHTML można pisać tak, aby działały lepiej niż wcześniej w istniejących przeglądarkach, a także w nowych przeglądarkach.
Dokumenty XHTML mogą wykorzystywać aplikacje, takie jak skrypty i aplety, które opierają się na modelu obiektu dokumentu HTML lub modelu obiektu dokumentu XML.
XHTML zapewnia bardziej spójny, dobrze zorganizowany format, dzięki czemu strony internetowe mogą być łatwo analizowane i przetwarzane przez obecne i przyszłe przeglądarki internetowe.
Możesz łatwo konserwować, edytować, konwertować i formatować swój dokument na dłuższą metę.
Ponieważ XHTML jest oficjalnym standardem W3C, Twoja witryna staje się bardziej kompatybilna z wieloma przeglądarkami i jest renderowana dokładniej.
XHTML łączy siłę HTML i XML. Ponadto strony XHTML mogą być renderowane przez wszystkie przeglądarki obsługujące XML.
XHTML określa standardy jakości dla Twoich stron internetowych i jeśli będziesz go przestrzegać, Twoje strony internetowe są liczone jako wysokiej jakości strony internetowe. W3C nadaje tym stronom certyfikat jakości.
Programiści i projektanci przeglądarek internetowych nieustannie odkrywają nowe sposoby wyrażania swoich pomysłów za pomocą nowych języków znaczników. W XML stosunkowo łatwo jest wprowadzić nowe elementy lub dodatkowe atrybuty elementów. Rodzina XHTML została zaprojektowana w celu dostosowania tych rozszerzeń poprzez moduły XHTML i techniki tworzenia nowych modułów zgodnych z XHTML. Moduły te umożliwiają łączenie istniejących i nowych funkcji w czasie opracowywania treści i projektowania nowych agentów użytkownika.
Podstawowa znajomość
Zanim przejdziemy dalej, zobaczmy, czym są HTML, XML i SGML.
Co to jest SGML?
To jest Sstandardowe Generalizowany Markup Laplikacja anguage (SGML) zgodna z międzynarodową normą ISO 8879. HTML jest powszechnie uważany za standardowy język publikacji w sieci WWW.
Jest to język służący do opisu języków znaczników, zwłaszcza używanych w elektronicznej wymianie dokumentów, zarządzaniu dokumentami i ich publikowaniu. HTML jest przykładem języka zdefiniowanego w SGML.
Co to jest XML?
XML oznacza EXrozciągliwy Markup Ludręka. XML to język znaczników podobny do HTML i został zaprojektowany do opisywania danych. Tagi XML nie są predefiniowane. Musisz zdefiniować własne tagi zgodnie ze swoimi potrzebami.
Składnia XHTML jest bardzo podobna do składni HTML i prawie wszystkie prawidłowe elementy HTML są również poprawne w XHTML. Ale kiedy piszesz dokument XHTML, musisz poświęcić nieco więcej uwagi, aby dokument HTML był zgodny z XHTML.
Oto ważne punkty, o których należy pamiętać podczas pisania nowego dokumentu XHTML lub konwersji istniejącego dokumentu HTML do dokumentu XHTML -
Napisz deklarację DOCTYPE na początku dokumentu XHTML.
Zapisuj wszystkie znaczniki i atrybuty XHTML tylko małymi literami.
Zamknij poprawnie wszystkie tagi XHTML.
Zagnieźdź poprawnie wszystkie tagi.
Cytuj wszystkie wartości atrybutów.
Zabroń minimalizacji atrybutów.
Zastąp name atrybut z id atrybut.
Wycofaj language atrybut tagu script.
Oto szczegółowe wyjaśnienie powyższych reguł XHTML -
Deklaracja DOCTYPE
Wszystkie dokumenty XHTML muszą mieć deklarację DOCTYPE na początku. Istnieją trzy typy deklaracji DOCTYPE, które są szczegółowo omówione w rozdziale XHTML Doctypes. Oto przykład użycia DOCTYPE -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Rozróżnianie wielkości liter
XHTML jest językiem znaczników uwzględniającym wielkość liter. Wszystkie znaczniki i atrybuty XHTML muszą być zapisane tylko małymi literami.
<!-- This is invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>W przykładzie Href i tag kotwicy A nie są pisane małymi literami, więc jest to nieprawidłowe.
Zamykanie tagów
Każdy znacznik XHTML powinien mieć równoważny znacznik zamykający, nawet puste elementy powinny mieć również znaczniki zamykające. Oto przykład pokazujący prawidłowe i nieprawidłowe sposoby używania tagów -
<!-- This is invalid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.
<!-- This is also invalid in XHTML -->
<img src="/images/xhtml.gif" >Poniższa składnia przedstawia poprawny sposób pisania powyższych znaczników w XHTML. Różnica polega na tym, że tutaj poprawnie zamknęliśmy oba tagi.
<!-- This is valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>
<!-- This is also valid now -->
<img src="/images/xhtml.gif" />Cytaty atrybutów
Wszystkie wartości atrybutów XHTML muszą być cytowane. W przeciwnym razie twój dokument XHTML jest uznawany za nieprawidłowy. Oto przykład przedstawiający składnię -
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" width=250 height=50 />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" width="250" height="50" />Minimalizacja atrybutów
XHTML nie pozwala na minimalizację atrybutów. Oznacza to, że musisz jawnie określić atrybut i jego wartość. Poniższy przykład pokazuje różnicę -
<!-- This is invalid in XHTML -->
<option selected>
<!-- Correct XHTML way of writing this is as follows -->
<option selected="selected">Oto lista zminimalizowanych atrybutów w HTML i sposób, w jaki należy je zapisać w XHTML -
| Styl HTML | Styl XHTML |
|---|---|
| kompaktowy | compact = "compact" |
| sprawdzone | zaznaczone = "zaznaczone" |
| ogłosić | deklaruj = "deklaruj" |
| tylko czytać | readonly = "readonly" |
| wyłączone | disabled = "disabled" |
| wybrany | selected = „wybrane” |
| odraczać | defer = "odrocz" |
| ismap | ismap = "ismap" |
| nohref | nohref = "nohref" |
| noshade | noshade = "noshade" |
| nowrap | nowrap = "nowrap" |
| wielokrotność | multiple = "wiele" |
| noresize | noresize = "noresize" |
ID Atrybut
Atrybut id zastępuje atrybut nazwy. Zamiast używać name = "name", XHTML woli używać id = "id". Poniższy przykład pokazuje, jak -
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo" />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" id="xhtml_logo" />Język Atrybut
Atrybut języka znacznika script jest przestarzały. Poniższy przykład pokazuje tę różnicę -
<!-- This is invalid in XHTML -->
<script language="JavaScript" type="text/JavaScript">
document.write("Hello XHTML!");
</script>
<!-- Correct XHTML way of writing this is as follows -->
<script type="text/JavaScript">
document.write("Hello XHTML!");
</script>Zagnieżdżone znaczniki
Musisz poprawnie zagnieżdżać wszystkie znaczniki XHTML. W przeciwnym razie twój dokument zostanie uznany za niepoprawny dokument XHTML. Poniższy przykład przedstawia składnię -
<!-- This is invalid in XHTML -->
<b><i> This text is bold and italic</b></i>
<!-- Correct XHTML way of writing this is as follows -->
<b><i> This text is bold and italic</i></b>Zakazy dotyczące elementów
Następujące elementy nie mogą mieć w sobie żadnego innego elementu. Zakaz ten dotyczy wszystkich głębokości gniazdowania. Znaczy, zawiera wszystkie zstępujące elementy.
| Element | Zakaz |
|---|---|
| <a> | Nie może zawierać innych elementów <a>. |
| <pre> | Nie może zawierać elementów <img>, <object>, <big>, <small>, <sub> ani <sup>. |
| <button> | Nie może zawierać elementów <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> ani <isindex>. |
| <label> | Nie może zawierać innych elementów <label>. |
| <form> | Nie może zawierać innych elementów <form>. |
Minimalny dokument XHTML
Poniższy przykład przedstawia minimalną zawartość dokumentu XHTML 1.0 -
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
<head>
<title>Every document must have a title</title>
</head>
<body>
...your content goes here...
</body>
</html>Ze względu na fakt, że XHTML jest aplikacją XML, niektóre praktyki, które były całkowicie legalne w opartym na SGML HTML 4, muszą zostać zmienione. W poprzednim rozdziale widzieliście już składnię XHTML, więc różnice między XHTML i HTML są bardzo oczywiste. Poniżej znajduje się porównanie XHTML i HTML.
Dokumenty XHTML muszą być dobrze sformułowane
Poprawność to nowa koncepcja wprowadzona przez XML. Zasadniczo oznacza to, że wszystkie elementy muszą mieć znaczniki zamykające i należy je odpowiednio zagnieździć.
CORRECT: Nested Elements
<p>Here is an emphasized <em>paragraph</em>.</p>INCORRECT: Overlapping Elements
<p>Here is an emphasized <em>paragraph.</p></em>Elementy i atrybuty muszą być pisane małymi literami
Dokumenty XHTML muszą używać małych liter dla wszystkich elementów HTML i nazw atrybutów. Ta różnica jest konieczna, ponieważ zakłada się, że dokument XHTML jest dokumentem XML, a XML rozróżnia wielkość liter. Na przykład <li> i <LI> to różne tagi.
Tagi końcowe są wymagane dla wszystkich elementów
W HTML niektóre elementy mogą pomijać znacznik końcowy. Ale XML nie pozwala na pominięcie znaczników końcowych.
CORRECT: Terminated Elements
<p>Here is a paragraph.</p><p>here is another paragraph.</p>
<br><hr/>INCORRECT: Unterminated Elements
<p>Here is a paragraph.<p>here is another paragraph.
<br><hr>Wartości atrybutów muszą być zawsze cytowane
Wszystkie wartości atrybutów, w tym wartości liczbowe, muszą być cytowane.
CORRECT: Quoted Attribute Values
<td rowspan="3">INCORRECT: Unquoted Attribute Values
<td rowspan=3>Minimalizacja atrybutów
XML nie obsługuje minimalizacji atrybutów. Pary atrybut-wartość muszą być zapisane w całości. Nazwy atrybutów, takie jak compact i check, nie mogą występować w elementach bez określenia ich wartości.
CORRECT: Non Minimized Attributes
<dl compact="compact">INCORRECT: Minimized Attributes
<dl compact>Obsługa białych znaków w wartościach atrybutów
Kiedy przeglądarka przetwarza atrybuty, wykonuje następujące czynności -
Usuwa początkowe i końcowe spacje.
Odwzorowuje sekwencje jednego lub więcej białych znaków (łącznie z podziałami wierszy) na pojedynczą przestrzeń między wyrazami.
Elementy skryptu i stylu
W XHTML skrypt i elementy stylu nie powinny zawierać bezpośrednio znaków „<” i „&”, jeśli istnieją; wtedy są traktowane jako początek znacznika. Jednostki takie jak „<” i „&” są rozpoznawane przez procesor XML jako odniesienia do jednostek w celu wyświetlania odpowiednio znaków „<” i „&”.
Umieszczenie zawartości skryptu lub elementu stylu w sekcji oznaczonej CDATA pozwala uniknąć rozszerzania tych jednostek.
<script type="text/JavaScript">
<![CDATA[
... unescaped VB or Java Script here... ...
]]>
</script>Alternatywą jest użycie zewnętrznych skryptów i dokumentów stylów.
Elementy o identyfikatorze i nazwie Attributes
XHTML zaleca zastąpienie atrybutu nazwy atrybutem id . Zauważ, że w XHTML 1.0 atrybut name tych elementów jest formalnie przestarzały i zostanie usunięty w kolejnych wersjach XHTML.
Atrybuty ze wstępnie zdefiniowanymi zestawami wartości
HTML i XHTML mają pewne atrybuty, które mają wstępnie zdefiniowane i ograniczone zestawy wartości. Na przykład,type atrybut klasy inputelement. W HTML i XML są one nazywaneenumerated attributes. W HTML 4 interpretacja tych wartości nie uwzględniała wielkości liter, więc wartośćTEXT była równa wartości text.
W XHTML, w interpretacji tych wartości jest rozróżniana wielkość liter, więc wszystkie te wartości są zdefiniowane małymi literami.
Odniesienia do jednostek jako wartości szesnastkowe
HTML i XML zezwalają na odwołania do znaków przy użyciu wartości szesnastkowej. W HTML te odniesienia można by tworzyć używając obu&#Xnn; lub &#xnn; i są one prawidłowe, ale w dokumentach XHTML należy używać tylko wersji pisanych małymi literami, takich jak &#xnn;.
Element <html> jest koniecznością
Wszystkie elementy XHTML muszą być zagnieżdżone w elemencie głównym <html>. Wszystkie inne elementy mogą mieć elementy podrzędne, które muszą być parami i poprawnie zagnieżdżone w swoim elemencie nadrzędnym. Podstawowa struktura dokumentu to -
<!DOCTYPE html....>
<html>
<head> ... </head>
<body> ... </body>
</html>Standard XHTML definiuje trzy definicje typów dokumentów (DTD). Najpopularniejszym i najłatwiejszym jest dokument XHTML Transitional.
Definicje typów dokumentów XHTML 1.0 odpowiadają trzem DTD -
- Strict
- Transitional
- Frameset
Istnieje kilka elementów i atrybutów XHTML, które są dostępne w jednym DTD, ale nie są dostępne w innym DTD. Dlatego pisząc dokument XHTML, musisz uważnie wybierać elementy lub atrybuty XHTML. Jednak walidator XHTML pomaga w identyfikacji ważnych i niepoprawnych elementów i atrybutów.
Proszę sprawdzić Walidacje XHTML, aby uzyskać więcej informacji na ten temat.
XHTML 1.0 Strict
Jeśli planujesz używać wyłącznie kaskadowego arkusza stylów (CSS) i unikasz pisania większości atrybutów XHTML, to zaleca się użycie tego DTD. Dokument zgodny z tą DTD jest najlepszej jakości.
Jeśli chcesz używać XHTML 1.0 Strict DTD, musisz umieścić następujący wiersz na górze dokumentu XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional
Jeśli planujesz używać wielu atrybutów XHTML, a także kilku właściwości kaskadowego arkusza stylów, powinieneś zastosować ten DTD i odpowiednio napisać dokument XHTML.
Jeśli chcesz używać XHTML 1.0 Transitional DTD, musisz umieścić następujący wiersz na górze dokumentu XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Zestaw ramek XHTML 1.0
Możesz tego użyć, jeśli chcesz użyć ramek HTML do podzielenia okna przeglądarki na dwie lub więcej ramek.
Jeśli chcesz używać DTD XHTML 1.0 Frameset, musisz umieścić następujący wiersz na górze dokumentu XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Note- Bez względu na to, jakiego DTD używasz do pisania swojego dokumentu XHTML; jeśli jest to poprawny dokument XHTML, to twój dokument jest uważany za dokument dobrej jakości.
Istnieje kilka atrybutów XHTML / HTML, które są standardowe i powiązane ze wszystkimi znacznikami XHTML / HTML. Te atrybuty są wymienione tutaj z krótkim opisem -
Podstawowe atrybuty
Nie dotyczy elementów base, head, html, meta, param, script, style i title.
| Atrybut | Wartość | Opis |
|---|---|---|
| klasa | class_rule lub style_rule | Klasa elementu. |
| ID | id_name | Unikalny identyfikator elementu. |
| styl | style_definition | Definicja stylu wbudowanego. |
| Tytuł | tooltip_text | Tekst wyświetlany w końcówce myszy. |
Atrybuty językowe
Plik langatrybut wskazuje język używany dla załączonej treści. Język jest identyfikowany za pomocą skrótów języka standardowego ISO, takich jakfr dla francuskiego, endla języka angielskiego i tak dalej. Więcej kodów i ich formatów opisano na www.ietf.org .
Nieprawidłowe w elementach base, br, frame, frameset, hr, iframe, param i script.
| Atrybut | Wartość | Opis |
|---|---|---|
| reż | ltr | rtl | Ustawia kierunek tekstu. |
| lang | kod_języka | Ustawia kod języka. |
Zastrzeżone atrybuty firmy Microsoft
Microsoft wprowadził szereg nowych zastrzeżonych atrybutów w Internet Explorerze 4 i nowszych wersjach.
| Atrybut | Wartość | Opis |
|---|---|---|
| klucz dostępu | postać | Ustawia skrót klawiaturowy, aby uzyskać dostęp do elementu. |
| język | strunowy | Ten atrybut określa język skryptowy, który ma być używany ze skojarzonym skryptem powiązanym z elementem, zwykle za pośrednictwem atrybutu obsługi zdarzeń. Możliwe wartości mogą obejmować JavaScript, jScript, VBS i VBScript. |
| tabindex | numer | Ustawia kolejność tabulacji elementu. |
| Zadowolony | boolean | Umożliwia użytkownikom edycję treści renderowanej w przeglądarce Internet Explorer 5.5 lub nowszej. Możliwe wartości to prawda lub fałsz. |
| wyłączone | boolean | Elementy z ustawionym atrybutem disabled mogą być wyblakłe i nie będą reagować na dane wejściowe użytkownika. Możliwe wartości to prawda lub fałsz. |
| hidefocus | włączone lub wyłączone | Ten zastrzeżony atrybut, wprowadzony w Internet Explorerze 5.5, ukrywa fokus na zawartości elementu. Fokus należy zastosować do elementu za pomocą atrybutu tabindex. |
| niewybieralne | włączone lub wyłączone | Służy do blokowania wyboru zawartości wyświetlanej w programie Internet Explorer 5.5. |
Kiedy użytkownicy odwiedzają witrynę internetową, robią takie rzeczy, jak klikanie tekstu, obrazów i hiperłączy, najeżdżanie kursorem myszy itp. Są to przykłady tego, co JavaScript wywołuje zdarzenia.
Możemy napisać nasze programy obsługi zdarzeń w JavaScript lub VBScript i możemy określić te programy obsługi zdarzeń jako wartość atrybutu tagu zdarzenia. XHTML 1.0 ma podobny zestaw zdarzeń, który jest dostępny w specyfikacji HTML 4.01.
Zdarzenia poziomu <body> i <frameset>
Istnieją tylko dwa atrybuty, których można użyć do wyzwolenia dowolnego kodu JavaScript lub VBScript, gdy jakiekolwiek zdarzenie wystąpi na poziomie dokumentu.
| Atrybut | Wartość | Opis |
|---|---|---|
| onload | Scenariusz | Skrypt jest uruchamiany podczas ładowania dokumentu XHTML. |
| onunload | Scenariusz | Skrypt jest uruchamiany po wyładowaniu dokumentu XHTML. |
Note - Tutaj skrypt odnosi się do dowolnej funkcji lub fragmentu kodu VBScript lub JavaScript.
Zdarzenia na poziomie <form>
Istnieje sześć atrybutów, których można użyć do wyzwolenia dowolnego kodu JavaScript lub VBScript w przypadku wystąpienia dowolnego zdarzenia na poziomie formularza.
| Atrybut | Wartość | Opis |
|---|---|---|
| onchange | Scenariusz | Skrypt jest wykonywany, gdy element się zmienia. |
| onsubmit | Scenariusz | Skrypt jest wykonywany po przesłaniu formularza. |
| onreset | Scenariusz | Skrypt jest wykonywany po zresetowaniu formularza. |
| onselect | Scenariusz | Skrypt jest wykonywany po wybraniu elementu. |
| onblur | Scenariusz | Skrypt jest wykonywany, gdy element traci fokus. |
| skupienie | Scenariusz | Skrypt jest uruchamiany, gdy element staje się aktywny. |
Wydarzenia na klawiaturze
Następujące trzy zdarzenia są generowane przez klawiaturę. Te zdarzenia nie są prawidłowe w elementach base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style i title.
| Atrybut | Wartość | Opis |
|---|---|---|
| onkeydown | Scenariusz | Skrypt jest wykonywany po naciśnięciu klawisza. |
| onkeypress | Scenariusz | Skrypt jest wykonywany po naciśnięciu i zwolnieniu klawisza. |
| onkeyup | Scenariusz | Skrypt wykonuje zwolnienie klucza. |
Inne wydarzenia
Następujące siedem zdarzeń jest generowanych za pomocą myszy, gdy dochodzi do kontaktu z dowolnym tagiem HTML. Te zdarzenia nie są prawidłowe w elementach base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style i title.
| Atrybut | Wartość | Opis |
|---|---|---|
| na kliknięcie | Scenariusz | Skrypt jest wykonywany po kliknięciu myszą. |
| ondblclick | Scenariusz | Skrypt jest wykonywany po dwukrotnym kliknięciu myszą. |
| onmousedown | Scenariusz | Skrypt jest wykonywany po naciśnięciu przycisku myszy. |
| onmousemove | Scenariusz | Skrypt jest wykonywany, gdy porusza się wskaźnik myszy. |
| onmouseout | Scenariusz | Skrypt jest wykonywany, gdy wskaźnik myszy wychodzi poza element. |
| onmouseover | Scenariusz | Skrypt jest wykonywany, gdy wskaźnik myszy przesuwa się nad elementem. |
| onmouseup | Scenariusz | Skrypt jest wykonywany po zwolnieniu przycisku myszy. |
Organizacja W3C pomogła przenieść społeczność zajmującą się tworzeniem treści internetowych z czasów zniekształconych, niestandardowych znaczników do dobrze uformowanego, prawidłowego świata XML. W XHTML 1.0 to posunięcie było moderowane celem zapewnienia łatwej migracji istniejącej zawartości HTML 4 (lub wcześniejszej) do XHTML i XML.
W3C usunęło obsługę przestarzałych elementów i atrybutów z rodziny XHTML. Te elementy i atrybuty miały w dużej mierze funkcjonalność zorientowaną na prezentację, którą można lepiej obsługiwać za pomocą arkuszy stylów lub domyślnego zachowania specyficznego dla klienta.
Teraz Grupa Robocza HTML W3C zdefiniowała początkowy typ dokumentu oparty wyłącznie na modułach, które są XHTML 1.1. Ten typ dokumentu jest przeznaczony do przenoszenia na szeroką gamę urządzeń klienckich i ma zastosowanie do większości treści internetowych.
Zgodność dokumentów
XHTML 1.1 zawiera definicję dokumentów XHTML ściśle zgodnych z wymaganiami, które MUSZĄ spełniać wszystkie poniższe kryteria -
Dokument MUSI być zgodny z ograniczeniami wyrażonymi w definicji typu dokumentu XHTML 1.1.
Elementem głównym dokumentu MUSI być <html>.
Główny element dokumentu MUSI wyznaczyć przestrzeń nazw XHTML za pomocą atrybutu xmlns .
Element główny MOŻE również zawierać atrybut położenia schematu, zgodnie z definicją w schemacie XML.
W dokumencie MUSI znajdować się deklaracja DOCTYPE przed elementem głównym. Jeśli jest obecny, publiczny identyfikator zawarty w deklaracji DOCTYPE MUSI odnosić się do DTD znajdującego się w definicji typu dokumentu XHTML 1.1.
Oto przykład dokumentu XHTML 1.1 -
<?xml version="1.0" encoding="UTF-8"?>
<!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" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
<head>
<title>This is the document title</title>
</head>
<body>
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>Note- W tym przykładzie uwzględniono deklarację XML. Deklaracja XML, taka jak powyższa, nie jest wymagana we wszystkich dokumentach XML. Zdecydowanie zachęca się autorów dokumentów XHTML do używania deklaracji XML we wszystkich swoich dokumentach. Taka deklaracja jest wymagana, gdy kodowanie znaków dokumentu jest inne niż domyślne UTF-8 lub UTF-16.
Moduły XHTML 1.1
Typ dokumentu XHTML 1.1 składa się z następujących modułów XHTML.
Structure Module- Moduł Struktury definiuje główne elementy strukturalne XHTML. Elementy te skutecznie działają jako podstawa modelu zawartości wielu typów dokumentów rodziny XHTML. Elementy i atrybuty zawarte w tym module to - body, head, html i title.
Text Module - Ten moduł definiuje wszystkie podstawowe elementy kontenera tekstu, atrybuty i ich model zawartości - skrót, akronim, adres, cytat blokowy, br, cytowanie, kod, dfn, div, em, h1, h2, h3, h4, h5, h6 , kbd, p, pre, q, samp, span, strong i var.
Hypertext Module- Moduł Hypertext udostępnia element używany do definiowania łączy hipertekstowych do innych zasobów. Ten moduł obsługuje element a.
List Module- Jak sama nazwa wskazuje, moduł List zawiera elementy zorientowane na listę. W szczególności moduł List obsługuje następujące elementy i atrybuty - dl, dt, dd, ol, ul i li.
Object Module- Moduł Object zapewnia elementy do włączania obiektów ogólnego przeznaczenia. W szczególności moduł Object obsługuje - object i param.
Presentation Module - Ten moduł definiuje elementy, atrybuty i minimalny model treści dla prostych znaczników związanych z prezentacją - b, big, hr, i, small, sub, sup i tt.
Edit Module - Ten moduł definiuje elementy i atrybuty do użycia w znacznikach związanych z edycją - del i ins.
Bidirectional Text Module - Moduł Dwukierunkowy tekst definiuje element, który może być użyty do deklarowania dwukierunkowych reguł dla zawartości elementu - bdo.
Forms Module- Zawiera wszystkie funkcje formularzy, które można znaleźć w HTML 4.0. W szczególności obsługuje - przycisk, zestaw pól, formularz, dane wejściowe, etykietę, legendę, wybór, grupę optyczną, opcję i obszar tekstowy.
Table Module - Obsługuje następujące elementy, atrybuty i model zawartości - caption, col, colgroup, table, tbody, td, tfoot, th, thead i tr.
Image Module- Zapewnia podstawowe osadzanie obrazu i może być używany niezależnie w niektórych implementacjach map obrazu po stronie klienta. Obsługuje element - img.
Client-side Image Map Module - Zawiera elementy map obrazu po stronie klienta - obszar i mapa.
Server-side Image Map Module- Zapewnia obsługę wyboru obrazu i transmisji współrzędnych wyboru. Moduł mapy obrazu po stronie serwera obsługuje - atrybut ismap na img.
Intrinsic Events Module - Obsługuje wszystkie wydarzenia omówione w wydarzeniach XHTML.
Meta information Module- Moduł metainformacji definiuje element opisujący informacje w deklaratywnej części dokumentu. Zawiera element meta.
Scripting Module- Definiuje elementy używane do zawierania informacji dotyczących wykonywalnych skryptów lub braku obsługi skryptów wykonywalnych. Elementy i atrybuty zawarte w tym module to - noscript i script.
Style Sheet Module- Definiuje element, który ma być używany podczas deklarowania wewnętrznych arkuszy stylów. Element i atrybut zdefiniowane w tym module to - style.
Style Attribute Module (Deprecated) - Określa atrybut stylu.
Link Module- Definiuje element, za pomocą którego można zdefiniować linki do zasobów zewnętrznych. Obsługuje element link .
Base Module- Definiuje element, który może być użyty do zdefiniowania podstawowego URI, względem którego są rozwiązywane względne URI w dokumencie. Element i atrybut zawarty w tym module to - base .
Ruby Annotation Module - XHTML wykorzystuje również moduł Ruby Annotation zdefiniowany w RUBY i obsługuje - ruby, rbc, rtc, rb, rt i rp.
Zmiany w stosunku do XHTML 1.0 Strict
Ta sekcja opisuje różnice między XHTML 1.1 i XHTML 1.0 Strict. XHTML 1.1 stanowi odejście od HTML 4 i XHTML 1.0.
Najważniejsze jest usunięcie funkcji, które były przestarzałe.
Zmiany można podsumować w następujący sposób -
W każdym elemencie atrybut lang został usunięty na rzecz atrybutu xml: lang .
W elementach <a> i <map> atrybut name został usunięty na rzecz atrybutu id.
Rubin zbiór elementów został dodany.
W tym rozdziale wymieniono różne wskazówki i triki, o których powinieneś wiedzieć podczas pisania dokumentu XHTML. Te porady i wskazówki mogą pomóc w tworzeniu skutecznych dokumentów.
Wskazówki dotyczące projektowania dokumentów XHTML
Oto kilka podstawowych wskazówek dotyczących projektowania dokumentów XHTML -
Zaprojektuj z myślą o służbie i angażowaniu odbiorców
Kiedy myślisz o zaspokojeniu tego, czego chcą Twoi odbiorcy, musisz zaprojektować skuteczne i chwytliwe dokumenty, które będą służyć temu celowi. Twój dokument powinien być łatwy do znalezienia wymaganych informacji i zapewniać znajome środowisko.
Na przykład akademicy lub lekarze czują się komfortowo z dokumentem przypominającym czasopismo z długimi zdaniami, złożonymi diagramami, określoną terminologią itp., Podczas gdy dokument, do którego mają dostęp dzieci w wieku szkolnym, musi być prosty i pouczający.
Ponownie wykorzystaj swój dokument
Użyj ponownie utworzonych wcześniej udanych dokumentów zamiast zaczynać od zera za każdym razem, gdy pakujesz nowy projekt.
Wewnątrz dokumentu XHTML
Oto kilka wskazówek dotyczących elementów wewnątrz dokumentu XHTML -
Deklaracja XML
Deklaracja XML nie jest wymagana we wszystkich dokumentach XHTML, ale autorzy dokumentów XHTML są zdecydowanie zachęcani do używania deklaracji XML we wszystkich swoich dokumentach. Taka deklaracja jest wymagana, gdy kodowanie znaków dokumentu jest inne niż domyślne UTF-8 lub UTF-16.
Puste elementy
Zawierają spację przed końcowymi / i> pustych elementów. Na przykład <br />, <hr /> i <img src = "/ html / xhtml.gif" alt = "xhtml" />.
Osadzone arkusze stylów i skrypty
Użyj zewnętrznych arkuszy stylów, jeśli Twój arkusz stylów używa „<”, „&”, „]]>” lub „-”.
Użyj zewnętrznych skryptów, jeśli Twój skrypt używa „<”, „&” lub „]]>” lub „-”.
Podziały wierszy w wartościach atrybutów
Unikaj podziałów wierszy i wielu białych znaków w wartościach atrybutów. Są one obsługiwane niespójnie przez różne przeglądarki.
Element Isindex
Nie umieszczaj więcej niż jednego elementu isindex w nagłówku dokumentu. Element isindex jest przestarzały na rzecz elementu wejściowego.
Lang i xml: lang Atrybuty
Określając język elementu, użyj atrybutów lang i xml: lang . Wartość atrybutu xml: lang ma pierwszeństwo.
Identyfikatory elementów
XHTML 1.0 wycofał atrybuty nazw elementów a, applet, form, frame, iframe, img i map . W kolejnych wersjach zostaną usunięte z XHTML. Dlatego zacznij używać elementu id do identyfikacji elementu.
Using Ampersands in Attribute Values
The ampersand character ("&") should be presented as an entity reference &.
Example
<!-- This is invalid in XHTML -->
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user.
<!-- Correct XHTML way of writing this is as follows -->
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=userWhitespace Characters in HTML and XML
Some characters that are legal in HTML documents are illegal in XML document. For example, in HTML, the form-feed character (U+000C) is treated as white space, in XHTML, due to XML's definition of characters, it is illegal.
Named Character Reference &Apos;
The named character reference ' (the apostrophe, U+0027) was introduced in XML 1.0 but does not appear in HTML. Web developers should therefore use ' instead of ' to work as expected in HTML 4 Web Browsers.
Every XHTML document is validated against a Document Type Definition. Before validating an XHTML file properly, a correct DTD must be added as the first or second line of the file.
Once you are ready to validate your XHTML document, you can use W3C Validator to validate your document. This tool is very handy and helps you to fix the problems with your document. This tool does not require any expertise to perform validation.
The following statement in the text box shows you details. You need to give complete URL of the page, which you want to validate and then click Validate Page button.
Input your page address in the box below −
This validator checks the markup validity of web documents with various formats especially in HTML, XHTML, SMIL, MathML, etc.
There are other tools to perform different other validations.
RSS/Atom feeds Validator
CSS stylesheets Validator
Find Broken Links
Other validators and tools
We assume you have understood all the concepts related to XHTML. Therefore, you should be able to write your HTML document into a well-formed XHTML document and get a cleaner version of your website.
Converting HTML to XHTML
You can convert your existing HTML website into XHTML website.
Let us go through some important steps. To convert your existing document, you must first decide which DTD you are going to adhere to, and include document type definition at the top of the document.
Make sure you have all other required elements. These include a root element <html> that indicates an XML namespace, a <head> element, a <title> element contained within the <head> element, and a <body> element.
Convert all element keywords and attribute names to lowercase.
Ensure that all attributes are in a name="value" format.
Make sure that all container elements have closing tags.
Place a forward slash inside all standalone elements. For example, rewrite all <br> elements as <br />.
Designate client-side script code and style sheet code as CDATA sections.
XHTML Upcoming Versions
Still XHTML is being improved and its next version XHTML 1.1 has been drafted. We have discussed this in detail in XHTML Version 1.1 chapter.
XHTML Tags, Characters, and Entities
XHTML tags, characters, and entities are same as HTML, so if you already know HTML then you do not need to put extra effort to learn these subjects, especially for XHTML. We have listed out all HTML stuff along with XHTML tutorial also, because they are applicable to XHTML as well.
What is Next?
We have listed out various resources for XHTML and HTML so if you are interested and you have time in hand, then we recommend you to go through these resources to enhance your understanding on XHTML. Otherwise this tutorial must have given you enough knowledge to write your web pages using XHTML.
Your feedback on this tutorial is welcome at [email protected].