XHTML (ang. Extensible HyperText Markup Language) to rozszerzalny hipertekstowy język znaczników. Jest to zmodyfikowany HTML (ang. HyperText Markup Language), czyli język znakowania przeznaczony do kodowania dokumentów tekstowych przy pomocy specjalnych elementów – znaczników. Jest specjalnie zaprojektowany do zastosowań internetowych. W wersji HTML 4.01 zostały dodane kaskadowe arkusze stylów (CSS) pozwalające projektować stronę wizualną serwisów.
1. PODSTAWY XHTML
Elementy w XHTML składają się z trzech części: znacznika otwierającego, zawartości i znacznika zamykającego. Znacznik otwierający jest nazwą elementu ograniczoną znakami mniejszości i większości: <head>, <body>, <p>, <ul>. Znacznik zamykający jest nazwą elementu, poprzedzoną znakiem ukośnika (/) i oznaczoną znakami mniejszości i większości: </head>, </body>, </p>, </ul>. Niektóre elementy nie posiadają zawartości np.: dzielenie wiersza <br />, wstawienie linii poziomej <hr />. W XHTML atrybuty i znaczniki pisze się zawsze małymi literami a encje kończy za pomocą spacji i />. Brak spacji np.: <br/> jest błędnym zapisem. W zwykłym HTML ukośnik nie był potrzebny, prawidłowym zapisem było <br>, można także było używać dużych liter <BR>. Stosowanie małych czy dużych liter zależało od upodobań.
Przykład 1. Prosty dokument XHTML
<!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/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Reply-to" content="Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript."/>
<meta http-equiv="Content-Language" content="pl" />
<meta name="Description" content="To co się wyświetla w opisie na google.pl" />
<meta name="Author" content="Klimek Piotr" />
<meta name="keywords" content="Slowa kluczowe przy wyszukiwaniu" />
<meta name="Robots" content="ALL" />
<title>Projekt na obronę pracy Inżynierskiej.</title>
<link rel="stylesheet" href="/../css/user.css" type="text/css" />
<script type="text/javascript" src="/../js/validate.js"></script>
</head>
<body>
</body>
</html>
Na początku dokumentu umieszczono informację o wersji XHTML 1.0 TRANSITIONAL:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Element główny musi zawierać deklarację xmlns:
<html xmlns="http://www.w3.org/1999/xhtml">
Między znacznikami <head> umieszczono informacje o tytule strony, autorze przeglądarki oraz dołączono pliki JavaScript czy CSS.
Poniższy znacznik <meta> Odpowiada za kodowanie na stronie:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
E-mail zwrotny zawiera znacznik:
<meta http-equiv="Reply-to" content="Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript."/>
Za określenie języka w dokumencie odpowiada znacznik:
<meta http-equiv="Content-Language" content="pl" />
Poniższa wartość <meta> zawiera opis, który wyświetla się w wyszukiwarce:
<meta name="Description" content="Informacja wyświetlana np.: w google.pl" />
Znacznik <meta name="Author" content="Klimek Piotr" /> umożliwia podanie imienia i nazwiska autora
strony, natomiast słowa brane pod uwagę przez wyszukiwarkę umieszczono w:
<meta name="keywords" content="Słowa kluczowe przy wyszukiwaniu" />
Pliki widoczne dla robotów internetowych na potrzeby wyszukiwarek definiuje znacznik:
<meta name="Robots" content="ALL" />
Tytuł dokumentu definiuje znacznik:
<title>Projekt na obronę pracy inżynierskiej.</title>
Zewnętrzny plik css jest dodawany za pomocą:
<link rel="stylesheet" href="/../css/user.css" type="text/css" />
a JavaScript poprzez:
<script type="text/javascript" src="/../js/validate.js"></script>
Między znacznikami <body> umieszcza się zawartość strony.
2. ŁĄCZA
Łącza są jedną z najważniejszych elementów XHTML, nie ma stron które mogły by się bez nich obyć, dzięki nim tworzy się nawigację na stronie. Etykietą łącza widoczną na stronie może być zwykły tekst jak i obrazek. Dzięki atrybutowi href można przypisywać plik jaki ma się wyświetlić po kliknięciu na link lub adres internetowy z zewnątrz. Można również podać nazwy plików znajdujące się w innych katalogach zarówno podrzędnych jak i nadrzędnych. Ścieszka może mieć maksymalnie do 255 znaków i przeglądarki akceptują tylko ukośnik prawy (/), lewy ukośnik (\) jest niedozwolony. XHTML obowiązkowo musi zawierać w atrybutach apostrofy lub cudzysłowy, bez nich zapis jest błędny.
Obrazek jako łącze definiuje:
<a href='nazwa pliku, który ma się uruchomić'><img src='ścieżka do obrazka' /></a>
a łącze wewnątrz strony internetowej:
<a href='index.php'>Strona główna</a>
Łącza wewnętrzne, dzięki którym można na stronie umieszczać linki do oddzielonych miejsc na tej samej stronie definiuje się za pomocą:
<a name='projekt'>Po kliknięciu pojawimy się w innej części strony.</a>
<a href='#projekt'>Ta część pojawi się po kliknięciu powyższego linku.</a>
Łącze zewnętrzne realizujące połączenia może być postaci:
<a href='http://www.internetowegry.eu'>Zapraszamy na stronę</a>
3. TABELE
Dzięki XHTML można tworzyć tabele z danymi. Niektórzy błędnie używają ich do układania elementów strony, do tego jednak stworzone są kaskadowe arkusze stylów z elementem div. Tabele często stosuje się do wyświetlania informacji z bazy danych np.: MySQL. Table powinno się łączyć z CSS, nie należy używać np.: atrybutu align. Do ułożenia tekstu w tabelach i wyglądu samej tabeli służą arkusze stylów, które zmniejszają pojemność plików i ułatwiają modyfikację układu.
Przykład 2. Prosta tabela
<table border='1' cellpadding='0' cellspacing='0'>
<tr>
<th>Numer</th>
<th>Tytuł</th>
<th>Opis</th>
</tr>
<tr>
<td>1</td>
<td>XHTML</td>
<td>Przykładowy opis dla książki o XHTML</td>
</tr>
<tr>
<td>2</td>
<td>PHP</td>
<td>Podstawy PHP.</td>
</tr>
</table>
Widok w przeglądarce przedstawia rys. 1.
Rys. 1. Widok tabeli z przykładu 2
Wiersz tabeli tworzy się za pomocą elementu <tr> a komórki w wierszach jako <td>. Znaczniki zamykające są obowiązkowe. Poza elementami jakie zastosowano w przykładowej tabeli można grupować wiersze za pomocą thead, tfoot i tbody, definiować i grupować kolumny, łączyć wiersze (rowspan), kolumny (colspan). Więcej na temat tabel HTML można przeczytać w książkach wydawnictwa Helion.
3. FORMULARZE
Formularze służą do pobierana danych od użytkownika. Dzięki nim można się dowiedzieć kto odwiedza stronę i jakie są wymagania klientów odwiedzających serwis. W sklepach internetowych stosuje się je do podania danych odbioru zamówienia, na forum dyskusyjnym, dane są zapisywane w pliku lub bazie danych. Obecnie często łączy się formularze z JavaScript, w celu walidacji danych po stronie klienta, dzięki czemu zmniejsza się obciążenie serwera. Formularze umożliwiają wysyłanie zarówno tekstu jak i plików, nie stanowi to żadnego problemu pod warunkiem, że w php.ini ustawiono prawidłowo maksymalną pojemność pliku wysyłanego na serwer (inaczej plik nie może zostać wysłany). Można to ustawić również w samym formularzu. W przypadku wysyłania plików na serwer w elemencie form należy zaznaczyć, że plik jest wysyłany za pomocą metody post, atrybut enctype musi zawierać multipart/form-data (w przypadku samego tekstu enctype nie jest potrzebny).
Przykład 3. Formularz do wysłania pliku.
<!-- Wyświetla formularz do dodania zdjęcia do galerii. -->
<form method="post" action="addphoto1.php?id_gal={$id}" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
<table border="1" cellspacing="0" cellpadding="2" align="center">
<tr>
<td align="center" colspan="2">Obrazek</td>
</tr>
<tr>
<td colspan="2" align="right"><input type="file" name="obrazek" size="52" /></td>
</tr>
<tr><td colspan="2" align="right">
<input type="reset" value="Wyczyść" />
<input type="submit" value="Wyślij" />
</td>
</tr>
</table>
</form>
Rysunek 2. Przedstawia widok formularza w przeglądarce
Na początku przykładu zastosowano komentarz do formularza. Cały formularz musi być zawarty w elemencie <form>. Atrybut method pokazuje w jaki sposób dane będą wysyłane, action URL przetwarzający dane formularza a enctype informuje o przesyłaniu plików.
Element <input type="hidden" name="MAX_FILE_SIZE" value="100000" /> jest niewidoczny na stronie i zawiera informacje o maksymalnej pojemności pliku, (np.: 100 KB), Przy publikowaniu innego pliku, skrypt php uzna, że formularz nie został wypełniony. Dzięki temu nie trzeba w php pisać algorytmu blokującego wysyłanie pliku powyżej ustalonej wartości, gdyż tą częścią zajmuje się sam formularz.
Następny element <input type="file" name="obrazek" size="52" /> pozwala pobrać plik z dysku do formularza. Przyciski typu 'reset' i 'submit' odpowiednio odpowiadają za wyczyszczenie i wysłanie formularza (z plikiem).
Rys. 2. Przykład formularza wysyłającego plik
4. PODSUMOWANIE
Sam XHTML ma o wiele więcej zastosowań niż przedstawiono to w dziale poświęconemu tej technologi. Więcej można znaleźć na stronie księgarni helion oraz na stronie http://www.w3.org/, organizacji odpowiedzialnej za ustanawianie standardów obowiązujących w internecie.
Wybrane książki:
- Laura Lemay, Rafe Colburn, Jennifer Kyrnin: HTML, CSS i JavaScript dla każdego. Wydanie VII, Wydawnictwo Helion, 2016.
- Jon Duckett: HTML i CSS. Zaprojektuj i zbuduj witrynę WWW, Wydawnictwo Helion, 2014.