Post on 15-Jul-2020
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" />
Kilka różnic pomiędzy HTML a XHTMLKilka 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.
Kilka różnic pomiędzy HTML a XHTMLKilka 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)
Kilka różnic pomiędzy HTML a XHTMLKilka 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Kilka różnic pomiędzy HTML a XHTMLKilka 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.
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