XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania."

Piotr Murawski
9 lat temu
Przeglądów:

1 XHTML - Extensible Hypertext Markup Language, czyli 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).

Reformuje on znane zasady języka HTML 4 w taki

2 Kilka 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

3 Kilka 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.

Dodatkowo, aby zapewnić zgodność z przeglądarkami HTML, znaki /> należy poprzedzić spacją. Przykład: <img src= obrazek.

4 Kilka 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>

apostrofami: <td colspan= 3 rowspan= 2 id= pozycja5 > W HTML

5 Kilka 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" />

mieć nadaną wartość: <option value= 7 selected= selected >niedziela</option> <input

6 Kilka różnic pomiędzy HTML a XHTML W języku HTML istniały dwa atrybuty służące do identyfikacji elementu: id oraz name. W XHTML poprawny jest tylkoatrybut id.

7 Kilka różnic pomiędzy HTML a XHTML 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)

8 Kilka różnic pomiędzy HTML a XHTML Nagłówek dla XHTML 1.0 w wersji strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

9 Kilka różnic pomiędzy HTML a XHTML 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.

10 język dokumentu HTML XHTML 1.0 XHTML 1.1 XHTML 2.0 text/html text/html, application/xhtml+xml application/xhtml+xml application/xhtml+xml

11 Semantyczność 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)

logiczna) nauka o stosunkach między wyrażeniami, o stosunku wyrażeń do

12 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. (

13 <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>

14 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>

15 Panel nawigacyjny <p> Jesteś w <a href="link1.html">link1</a> > <a href="link2.html">link2</a> </p>

16 listing <div class="listing"> <pre> for ($x=0; $x<=$y; $x+=2) { print ( $x<br /> ); } </pre> <p>listing 1. pętla for</p> </div>

17 - wstawki kodu można objąć znacznikami pre - logo możemy umieścić w tle elementu div

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

19 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>

opcji, skróty klawiszowe czy tytuły książek możemy objąć znacznikami

20 dialog <ol> <li> <cite>watson</cite> <blockquote><p>to on!</p></blockquote> </li> <li> <cite>holmes</cite> <blockquote><p>halo! Stop!</p></blockquote> </li> </ol>

21 bibliografia <ol> <li> <cite>pozycja 1</cite> </li> <li> <cite>pozycja 2</cite> </li> </ol>

22 ilustracja <div class="compaundimg"> <img src="img.jpg" alt="rysunek" /> <hn>rys. 1.</hn> <p>podpis rysunku</p> </div>

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

Podobne dokumenty

Podstawy (X)HTML i CSS

Podstawy (X)HTML i CSS Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z