XHTML krok po kroku - część 1 / Po stronie przeglądarki / Artykuły / Wortal / Home

Choć już wiele czasu minęło od momentu wprowadzenia standardu XHTML, to nadal wielu webmasterów nie zapoznało się z nim. W tej serii artykułów postaram się rozwiać wszelkie wątpliwości związane z XHTML i zademonstrować sposób jego użycia na stronach internetowych.

XHTML - Z czym to się je?

XHTML (z ang. eXtensible HyperText Markup Language) to język hipertekstowy używany do tworzenia stron internetowych - następca HTML 4. Głównym celem wprowadzenia tego standardu była chęć oddzielenia zawartości strony od jej struktury. I tak na przykład zrezygnowano z wszelkich znaczników które bezpośrednio wpływały na styl tekstu (<b>, <i>, <u>, <s>, <font>, <center>, <basefont> etc.) - nie oznacza to oczywiście, że np. <b> i <i> zostały usunięte - poprostu nie zaleca się ich używania. Nie dozwolone stało się także określanie niektórych atrybutów dla znaczników bezpośrednio na stronie. W tym celu należy korzystać z arkusza stylów kaskadowych (css).

Poniżej znajdują się niektóre zmiany w stosunku do HTML 4:

Wszystkie znaczniki które nie są puste muszą zostać zamknięte (przykład: <p>Jakiś tekst</p>)
Puste znaczniki należy zakończyć znakami " />", a nie jak dawniej " >" (przykład: <br />, <hr />)
Wszystkie znaczniki i ich atrybuty muszą być pisane małymi literami. Ponadto wymagane jest używanie znaków " " przy określaniu atrybutów (przykład: <div class="maindiv">Jakiś tekst</div>)
Przy tworzeniu tabel główna sekcję należy otoczyć znacznikami <tbody> </tbody> (przykład: <table><tbody><tr><td>Jakiś tekst</td></tr></tbody></table>). Oprócz tego można stosować znaczniki <thead> i <tfoot> do określenia nagłówka i stopki tabeli.
Przy pisaniu strony zaleca się używać warstw (<div></div>), a nie popularnych tabel (<table></table>)

Resztę nowości postaram się przybliżyć w kolejnych częściach artykułu.

Struktura dokumentu

Jak można się łatwo domyślić XHTML posiada inny DOCTYPE niż dokument HTML. Na tym się jednak nowości nie kończą.

Pierwszy dokument XHTML

Witaj Świecie!

Pora na analizę powyższego kodu:

<?xml version="1.0" encoding="iso-8859-2"?> - definiujemy wersję dokumentu i jego kodowanie (w tym przypadku iso-8859-2) - jest to wymagany znacznik, szczególnie gdy kodowanie jest ustawione na inne niż UTF-8 lub UTF-16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> - tego chyba nie trzeba tłumaczyć - jest to DOCTYPE dzięki któremu przeglądarka wie jakiego typu dokument wyświetla
<html xmlns="http://www.w3.org/1999/xhtml"" xml:lang="pl" > - w dokumentach XHTML wymagane jest dodanie atrybutu xmlns o wartości "http://www.w3.org/1999/xhtml" do znacznika html. Atrybut "xml:lang" jest opcjonalny - podajemy w nim skróconą nazwę języka (w tym przypadku pl)

Pierwsza strona

Teraz gdy już znamy strukturę dokumentu XHTML możemy przystąpić do budowy prostej strony, na której znajdzie się słynna kwestia Gajusza Juliusza Cezara. Oczywiście cały cytat ładnie sformatujemy:?"Alea Iacta Est" - Gajusz Juliusz Cezar?

Potrzebne znaczniki

Przy formatowaniu tekstu niezbędne będzie użycie znacznika '<span style="">' w którym umieścimy odpowiednie wartości z arkusza stylów kaskadowych (css). Poniżej znajduje się listing tych wartości wraz z ich atrybutami:

Font-weight
- wartość liczbowa od 100-900 (100, 200, 300 etc.) - określa poziom wytłuszczenia czcionki (przykład: <span style="font-weight: 900;">Ten tekst jest bardzo wytłuszczony</span>)
- bold - wytłuszcza tekst, działa tak samo jak wartość '700'. (przykład: <span style="font-weight: bold;">Ten tekst jest wytłuszczony</span>)
- bolder - sprawia, że czcionka staje się grubsza od poprzedniczki. (przykład: <span style="font-weight: bold;">Ten tekst jest wytłuszczony, <span style="font-weight: bolder;">ale ten jeszcze bardziej</span></span>)
- lighter - powoduje, że czcionka staje się chudsza od poprzedniczki. (przykład: <span style="font-weight: bold;">Ten tekst jest wytłuszczony, <span style="font-weight: lighter;">a ten chudszy</span></span>)
Font-style:
- oblique - powoduje, że czcionka staje się pochylona. (przykład: <span style="font-style: oblique;">Tekst został pochylony</span>)
- italic - aplikuje dla tekstu kursywe. W przypadku gdy dana czcionka nie posiada kursywy zostanie zaaplikowany styl oblique. (przykład: <span style="text-style: italic;">Tekst pisany kursywą</span>)
Text-decoration:
- underline - podkreślenie. (przykład: <span style="text-decoration: underline;">To jest podkreślony tekst</span>)
- overline - nadkreślenie. (przykład: <span style="text-decoration: overline;">To jest nadkreślony tekst</span>)
- line-through - przereślenie. (przykład: <span style="text-decoration: line-through;">To jest przekreślony tekst</span>)
- blink - migotanie tekstu. Nie dziala w IE. (przykład: <span style="text-decoration: blink;">To jest migający tekst</span>)
- none - brak dekoracji (przykład: <span style="text-decoration: none;">Na ten tekst nie działa żadna dekoracja</span>)

Do powyższych wartości można jeszcze przyporządkować atrybuty 'normal' - oznaczający normalny tekst (bez aplikowania jakiegokolwiek stylu) i 'inherit', który oznacza przejęcie stylu od poprzedniego elementu.

Rozpoczęcie prac

Stwórz nowy dokument z rozszerzeniem '.htm' i uzupełnij go tym kodem:

Cytat

"Alea Iacta Est"
- Gajusz Juliusz Cezar

Rezultat powyższego kodu nie jest imponujący - biała strona z dwoma liniami niesformatowanego tekstu. Do cytatu dodamy więc kursywę...:

Cytat

"Alea Iacta Est"
- Gajusz Juliusz Cezar

...a następnie wytłuszczenie:

Cytat

"Alea Iacta Est"
- Gajusz Juliusz Cezar

Udało nam się osiągnąć zamierzony cel. Zapisz dokument i sprawdź wynik swojej pracy :)

Zadanie domowe

?eby lepiej zrozumieć zawartą w tym artykule wiedzę proponuję wykonać prostą stronę XHTML na której znajdzie się prognoza pogody zapisana w następujący sposób:

Dzień, data Ilość stopni (°C) Prędkość wiatru (km/h)

Kategorie

Spis treści

O autorze

Reklama

Podobne Artykuły

Nowe artykuły