docXHTML - matrix.umcs.lublin.pl
download 
Reklamacja Transkrypt
XHTML - matrix.umcs.lublin.pl
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).
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
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.
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>
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" />
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.
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)
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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.
język dokumentu
●
HTML
text/html
●
XHTML 1.0
text/html, application/xhtml+xml
●
XHTML 1.1
application/xhtml+xml
●
XHTML 2.0
application/xhtml+xml
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)
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
stopka
<div id=”stopka”>
<p>akapit1</p>
<p>akapit2</p>
</div>
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>
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>
bibliografia
<ol>
<li>
<cite>pozycja 1</cite>
</li>
<li>
<cite>pozycja 2</cite>
</li>
</ol>
ilustracja
<div class="compaundImg">
<img src="img.jpg" alt="rysunek" />
<hn>Rys. 1.</hn>
<p>Podpis rysunku</p>
</div>
Przygotowane głównie na podstawie materiałów
Włodzimierza Gajdy dostępnych na stronie
www.gajdaw.pl
