czyli rozszerzalny hipertekstowy język oznaczania...

XHTMLXHTML - Extensible Hypertext Markup Language,czyli

Rozszerzalny Hipertekstowy Język Oznaczania.Rozszerzalny Hipertekstowy Język Oznaczania.

Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).

Kilka różnic pomiędzy HTML a XHTML 1.0Kilka różnic pomiędzy HTML a XHTML 1.0

nazwy znaczników i atrybutów, oraz wartości atrybutów wyliczeniowych w XHTML piszemy tylko

małymi literami

Kilka różnic pomiędzy HTML a XHTMLKilka różnic pomiędzy HTML a XHTML wszystkie znaczniki w języku XHTML muszą zostać zamknięte.

Dlatego znaczniki elementów takich jak img, br, hr, meta, które w HTML nie posiadały znacznika zamykającego, należy zakończyć znakami />.

Dodatkowo, aby zapewnić zgodność z przeglądarkami HTML, znaki /> należy poprzedzić spacją.

Przykład:<img src=”obrazek.png” />

Pozostałe elementy muszą posiadać znacznik zamykający, nazwet jeśli ich zawartość jest pusta:

<strong></strong><div></div>

Zasada ta dotyczy również elementów, dla których znacznik zamykający w HTML był opcjonalny, czyli p oraz li.

Kilka różnic pomiędzy HTML a XHTMLKilka różnic pomiędzy HTML a XHTML

Wartości atrybutów znaczników w XHTML należy zawsze otoczyć cudzysłowami lub apostrofami:

<td colspan=”3” rowspan=”2” id=”pozycja5”>

W HTML dopuszczalne było opuszczenie cudzysłowów:

<td colspan=3 rowspan=2 id=pozycja5>

Kilka różnic pomiędzy HTML a XHTMLKilka różnic pomiędzy HTML a XHTML W HTML atrybuty logiczne nie musiały mieć nadanej wartości:

<option value=”7” selected>niedziela</option>

W XHTML wszystkie atrybuty muszą mieć nadaną wartość:

<option value=”7” selected=”selected”>niedziela</option>

<input checked="checked" /><input readonly="readonly" /><input disabled="disabled" /><frame noresize="noresize" />


W języku HTML istniały dwa atrybuty służące do identyfikacji elementu: id oraz name.

W XHTML poprawny jest tylkoatrybut id.


Jeśli zawarte wewnątrz dokumentu arkusze stylów lub skrypty zawierają znaki & lub <, zawartość elementów style i script

należy umieścić w sekcji CDATA

<style type="text/css"><![CDATA[ arkusz stylów ]]></style>

alternatywnie można użyć zewnętrznego arkusza stylów / skryptu

(jest to rozwiązanie bezpieczne, gdyż przeglądarki mogą nie obsługiwać takiego kodu jak powyższy)


Nagłówek dla XHTML 1.0 w wersji strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd


Dokumenty w języku XHTML muszą być składniowo poprawne, żeby mogły być wyświetlone.

Jeśli w pliku XHTML znajdzie się choć jeden błąd składni, przeglądarka wyświetli informację o błędzie.

język dokumentujęzyk dokumentu

● HTML● XHTML 1.0● XHTML 1.1● XHTML 2.0

text/htmltext/html, application/xhtml+xmlapplication/xhtml+xmlapplication/xhtml+xml

Semantyczność kodu XHTMLSemantyczność kodu XHTML

semantyka, semazjologia nauka o znaczeniu i zmianach znaczeń wyrazów; (s. logiczna) nauka o stosunkach między

wyrażeniami, o stosunku wyrażeń do oznaczanych przedmiotów i stosunku wyrażeń do mówiącego podmiotu.

(słownik wyrazów obcych i zwrotów obcojęzycznych Władysława Kopalińskiego)

Idealnie semantyczny kod XHTML powinien spełniać poniższe trzy warunki (Gajda):

1) dostarczenie wszystkich danych dokumentu XHTML w postaci tekstowej

2) rezygnacja z umieszczenia w dokumencie elementów i znaczników pełniących funkcję wyłącznie reprezentacyjną.

3) Identyfikatory i nazwy klas odnoszą się do spełnianych przez nie funkcji w dokumencie, a nie do wyglądu strony

Semantyczność kodu możemy też krótko określić jako wykorzystanie elementów HTML zgodnie z ich przeznaczeniem. (www.browsehappy.pl)

<div id=”header”>nagłówek</div>

<ul id=”menu”><li><a href=”dokument1.php”>dokument1</a></li><li><a href=”dokument2.php”>dokument2</a></li><li><a href=”dokument3.php”>dokument3</a></li>

</ul>

<div id=”content”>treść dokumentu</div>

<div id=”footer”>stopka</div>

menu

<ul><li> <a href=”link1.php”> link1</a> </li><li> <a href=”link1.php”> link1</a> </li><li> <a href=”link1.php”> link1</a> </li>

</ul>

Panel nawigacyjny

<p>Jesteś w <a href="link1.html">link1</a> >

<a href="link2.html">link2</a></p>

listing

<div class="listing"><pre>

for ($x=0; $x<=$y; $x+=2) {print (”$x<br />”);

}</pre>

<p>Listing 1. pętla for</p> </div>

- wstawki kodu można objąć znacznikami pre

- logo możemy umieścić w tle elementu div

<div id=”stopka”><p>akapit1</p><p>akapit2</p>

</div>

stopka

elementy tekstowe umieszczone wewnątrz akapitu takie jak nazwy plików, zmiennych, wyrażenia matematyczne,

nazwy programów, nazwy opcji, skróty klawiszowe czy tytuły książek

możemy objąć znacznikami span:

<span class=”math”>∫(2x+7)dx</span>

<span class=”file”>plik.pas</span>

<ol> <li>

<cite>Watson</cite> <blockquote><p>To on!</p></blockquote>

</li> <li>

<cite>Holmes</cite> <blockquote><p>Halo! Stop!</p></blockquote>

</li></ol>

dialog

<ol> <li>

<cite>pozycja 1</cite> </li> <li>

<cite>pozycja 2</cite> </li></ol>

bibliografia

<div class="compaundImg"> <img src="img.jpg" alt="rysunek" />

<hn>Rys. 1.</hn> <p>Podpis rysunku</p>

</div>

ilustracja

Przygotowane głównie na podstawie materiałów Włodzimierza Gajdy dostępnych na stronie

www.gajdaw.pl

http://www.gajdaw.pl/

czyli rozszerzalny hipertekstowy język oznaczania...

Documents