background image

..:: Kurs języka XHTML ::.. 

 

Wstęp 
 
Co to jest XHTML? 
 
XHTML (eXtensible HyperText Markup Language) to język hipertekstowy 
używany do tworzenia dokumentów czyli stron internetowych. Polecenia 
tekstowe (znaczniki i atrybuty) pozwalają na realizację tzw. linków (odsyłaczy), 
wyświetlanie różnych czcionek, grafiki i innych elementów. 
Definicja ta pasuje nie tylko do XHTML ale także do HTML. To nie przypadek, że 
definicje są podobne (a właściwie takie same). Obydwa języki pełnią taką samą 
funkcję. 
Po co mi XHTML? 
 
Te pytanie nasuwa się wszystkim webmasterom, którzy stykają się z XHTML 
Odpowiedź jest prosta. XHTML jest aktualnie obowiązującym standardem 
opisu stron WWW zalecanym przez W3C. XHTML należy traktować jako 
stanadard "HTML 5" (co oczywiście nie jest prawdą, ponieważ prace nad 
rozwijaniem języka HTML zostały zakończone na wersji 4.01). Wcześniej czy 
później wszystkie strony będą zgodne z tym standardem. 
XHTML jest  także zgodny z XML, który staje się uniwersalnym standardem 
przetwarzania opisu środowiska WWW i dokumentów strukturalnie 
uporządkowanych informacji. 
XHTML jest ściśle związany z kaskadowymi stylami - CSS1 i CSS2, w 
przyszłości także - CSS3. 
Przeglądarki XHTML 
 
Większość przeglądarek dokumentów HTML dobrze interpretuje XHTML. Są to 
przeglądarki: Netscape Communicator/Sylaba Komunikator/Mozilla, Microsoft 
Internet Explorer, Opera, Konqueror i inne. Należy pamiętać, że im nowsza 
przeglądarka tym lepiej będzie interpretować XHTML. Nawiasem mówiąc (czytaj 
pisząc:-) najlepiej widać strony XHTML pod IE w wersji 4, 5, 6 i Netscape 6, 7, 
Mozilla 0.9.x i 1.0. NC 4.xx (NN, Sylaba) gorzej obsługuje style. Ciekawą 
alternatywą jest Opera (szczególnie Opera 5 i 6), która działa szybko i sprawnie. 
Jak widać problemy sprawiają style, które są nieodłącznym elementem XHTML. 
 
Informacje ogólne 
Podobieństwa z HTML 
Dane są w formie tekstowej 
Dane opisywane są znacznikami (tagami) np: <img> 
Znaczniki mogą posiadać atrybuty np: src="przyk.gif" 
Atrybuty posiadają wartości (przykład jak wyżej) 
Tagi rozpoczynają się znakiem '<'a kończą '>' np: <html> 
Przykład zamknięcia znacznika (jeśli jest wymagany) </html>  
Wartości zawarte są w symbolach "" np: "przyk.gif" 
 
A oto przykładowy dokument HTML (także w pewnym sensie XHTML): 

background image

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" 
   "http://www.w3.org/TR/REC-html40/strict.dtd"> 
<html> 
<head> 
<title>Przypładowa strona</title> 
</head> 
<body> 
<p>To tylko przykład</p> 
<img src="przyk.gif"> 
<body> 
</html> 
 
Bardzo początkujących (nie znających HTML i nie rozumiejących składni 
języka) zapraszam na świetny kurs Pawła Wimmera: http://www-
mag.com.pl/kurs/ 
Nowości w stosunku do HTML 
Znaczniki niepuste mają zawsze znacznik końcowy np: <p>Coś tam</p> 
Znaczniki puste muszą być zawsze zakończone '/>' np: <br /> 
Wszystkie atrybuty i tagi muszą być pisane małymi literami np: <img 
src="przyk.gif"> 
Atrybuty typu boolean (logiczne) muszą być uzupełniane o wartość np: 
noshade="noshade" 
Wartości atrybutów muszą być zawarte w symbolach (nawet te jedno 
wyrazowe) "" np: "przyk.gif" 
Zlikwidowano znaczniki (dotyczy też HTML 4, patrz: 'Znaczniki'):  
<font> - należy używać stylów 
<basefont> - należy używać stylów 
<strike> - należy używać stylów 
<s> - należy używać stylów 
<u> - należy używać stylów 
<center> - należy używać stylów i znacznika <div> 
<menu> - należy używać znacznika <ul> 
<dir> - należy używać znacznika <ul> 
<isindex> - należy używać znacznika <input> 
<xmp> - należy używać znacznika <pre> 
<plaintext> - należy używać znacznika <pre> 
<listing> - należy używać znacznika <pre> 
<applet> - należy używać znacznika <object> (dotyczy tylko XHTML 1.0) 
Zlikwidowano atrubuty (dotyczy też HTML 4, patrz: 'Atrybuty'):  
accesskey 
align (uwaga: można używać w <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, 
<thead>, <tr>) 
alink 
background 
bgcolor 
border (uwaga: można używać w <table>) 
clear 
color 
compact 

background image

face 
height (uwaga: można używać w <iframe>, <img>, <object> ale się nie zaleca) 
hspace 
lang 
language (należy używać type="text/javascript" w znaczniku <script>) 
link 
name (zlikwidowano w <a> i <map>) 
size (uwaga: można używać w <input>, <select> 
start 
tabindex 
target (zlikwidowano w <a>, <area> i <link>) 
text 
type 
value 
version 
vlink 
vspace 
width (uwaga: można używać w <colgroup>, <col>, <table>, <img>, <object>, 
<iframe> ale się nie zaleca) 
Wszystkie atrybuty wymienione wyżej należy zastąpić stylami chyba, że jest to 
zaznaczone w nawiasie 
Między znacznikami <table> musi znajdować się tag <tbody> np: 
<table><tbody><tr><td></td></tr></tbody></table>, jeśli tabela jest długa 
należy stosować znaczniki <thead> i/lub <tfoot> 
Pomimo, że tagi takie jak <b>, <i> znajdują się w specyfikacji to zaleca się 
stosowanie stylów. W przyszłości wszystkie atrybuty i znaczniki opisujące pod 
względem wizualnym stronę zostaną zlikwidowane. Atrybuty wymienione 
wyżej, które teraz można używać z niektórymi tagami w przyszłości zostaną 
zlikwidowane (np: size, width, height, border, align). 
Przy znaczniku <img> należy używać atrybutu 'alt'. 
Więcej nowych cech znajduje się w dalszych częściach kursu (patrz: 'Inne 
ważne zasady'). 
 
Większość cech wymienionych wyżej nie związanych z HTML pochodzi z XML. 
Więcej informacji o XML znajduje się na stronie Pawła Stroińskiego. 
 
A oto przykład dokumentu XHTML: 
 
<?xml version="1.0" encoding="iso-8859-2"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" 
  content="text/html; charset=iso-8859-2" /> 
<title>Przypładowa strona</title> 
</head> 
<body> 
<p>Oto przykład</p> 
<hr /> 

background image

<img src="przyk.gif" alt="tekst" /> 
</body> 
</html> 
 
Specyfikacja XHTML 
Co to jest specyfikacja? 
 
Specyfikacja to pełny zbiór zasad i reguł dotyczących danego języka np. 
XHTML, HTML, SVG itp. Specyfikacja jest ustalana przez specjalistów z danej 
dziedziny (w tym przypadku ludzi z W3C), wytycza ona drogi rozwoju dla 
języków. Specyfikacja XHTML jest napisana w języku angielskim (występuje w 
niej wiele specjalistycznych wyrażeń) a co za tym idzie jest trudna do 
zrozumienia. Ten kurs w poszczególnych rozdziałach przedstawia zasady 
zawarte w specyfikacji napisane prostym językiem (i jak widać po polsku:-). 
Część informacji zawartych w tym kursie nie występuje w specyfikacji XHTML 
ale jest równie ważna (czasami są one zawarte w innych specyfikacjach 
zgodnych z XHTML np. w XML, inne zaś są rodzajami reguł ogólnie przyjętych 
zgodnych oczywiście ze specyfikacjami). 
Specyfikacja HTML 
 
XHTML jest bardzo podobny do HTML i XML. Specyfikacja XHTML nie zawiera 
opisu znaczników i atrybutów, ponieważ jest to zawarte w specyfikacji HTML 
4.01 (patrz: 'Informacje ogólne', 'Znaczniki' i 'Atrybuty'). Specyfikacja HTML 
4.01 jest poprawioną i uzupełnioną wersją specyfikacji HTML 4.0. HTML jest 
uproszczoną wersją metajęzyka SGML. 
 
Specyfikacja HTML 4.01: http://www.w3.org/TR/html401 
Specyfikacja XHTML i XML 
 
Specyfikacja XHTML zawiera reguły, które są związane z XML. Inaczej mówiąc 
(właściwie pisząc:-) XHTML jest odmianą języka HTML przeformatowanego do 
metajęzyka XML. XHTML jest więc zgodny XML, który w przyszłości stanie się 
standardem przechowywania informacji nie tylko stron internetowych. Od 
niedawna pojawiła się uproszczona wersja XHTML - Basic XHTML (patrz: 'Basic 
XHTML'). 
 
Scecyfikacja XML: http://www.w3.org/TR/REC-xml/ 
Specyfikacja XHTML 1.0: http://www.w3.org/TR/xhtml1/ 
Specyfikacja XHTML 1.1: http://www.w3.org/TR/xhtml11/ 
Specyfikacja Basic XHTML: http://www.w3.org/TR/xhtml-basic/ 
 
Większość informacji ze specyfikacji dotyczących XHTML jest zawarte w tym 
kursie (a niektórych informacji nawet nie znajdziesz w specyfikacji). 
Specyfikacja CSS 
 
Osoby znające HTML i XML nie będą mieli żadnych problemów z opanowaniem 
języka XHTML (pozostali będą się musieli trochę pomęczyć, ale zapewniam, że 
XHTML to prosty język:-). Niestety sam XHTML nie wystarczy, trzeba znać style 
kaskadowe, które zajmują się formatowaniem i upiększaniem stron (tzw. Strona 
napisana w czystym XHTML wygląda niezbyt ładnie). Jeśli ktoś miał wcześniej 

background image

styczność z CSS1 nie będzie miał problemu z opanowaniem CSS2, ponieważ 
obydwie specyfikacje są do siebie bliźniaczo podobne. Większość 
dokumentów zgodnych z CSS1 jest zarówno zgodne z CSS2. Specyfikacja 
CSS2 nie jest nowa, była już zalecana do HTML (patrz: 'Style w XHTML'). Do 
mniej skomplikowanych dokumentów wystarczy nawet CSS1. Ostatnio 
prowadzone są prace nad CSS3. Warto pamiętać, że CSS2 nie jest jeszcze w 
pełni interpretowany przez przeglądarki a CSS3 to zupełna nowość. 
 
Specyfikacja CSS2: http://www.w3.org/TR/REC-CSS2/ 
Specyfikacja CSS1: http://www.w3.org/TR/REC-CSS1/ 
 
Wszystkie ważne zagadnienia dotyczące XHTML, HTML, XML, CSS1, CSS2 
znajdziecie na tej stronie. Bardziej szczegółowe informacje o HTML, XML i CSS 
znajdziecie w EduWebie (więc nie martwcie się jeśli nie znacie języka 
angielskiego:-). 
 
Wersje DTD 
 
W XHTML 1.0 istnieją trzy wersje DTD czyli definicje typu dokumentu: 
'transitional', 'strict', 'frameset'. Wersje te pozwalają na poprawną walidację 
tzw. sprawdzenie poprawności dokumentu XHTML. 
Transitional 
 
Transitional to najczęściej stosowana wersja DTD. Jest swego rodzaju formą 
przejściową pomiędzy HTML a XHTML, ponieważ zezwala na korzystanie ze 
znaczników i atrybutów w statusie deprecated (takich jak <applet>, <font>, <s>, 
align, width i innych wymienionych na stronie: 'Informacje ogólne'). W tej 
wersji nie można stosować ramek. 
 
Przykład: 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Należy unikać 'Transitional', zaleca się stosowanie 'Strict'. 
Strict 
 
Strict jest to wersja DTD, do której wszyscy dążą. Jest bardzo trudna do 
zrealizowania, ponieważ zabrania stosowania tagów i atrybutów w statusie 
deprecated (patrz: 'Znaczniki' i 'Atrybuty') . Nie można w niej korzystać z ramek. 
 
Przykład: 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
Frameset 
 
Frameset to wersja DTD, która dopuszcza wszystkie elementy (czyli z 
atrybutów i znaczników deprecated i ramek). Jak widać ta wersja podobna jest 
do 'transitional'. 
 

background image

Przykład: 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
Należy unikać 'Frameset', zaleca się korzystanie z 'div' i CSS. 
Wersja DTD XHTML 1.1 
 
Do XHTML 1.1 zalecana jest następująca wersja DTD: 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 
Wersja DTD XHTML 1.1 jest podobna do wersji XHTML 1.0 Strict. Nie wszystkie 
jednak dokumenty XHTML 1.0 Scrict mogą być dokumentami XHTML 1.1. Po 
wykonaniu strony WWW należy ją poddać walidacji i na podstawie wyników 
zadeklarować wersję DTD (patrz: 'Linki i parsery'). 
 
Prolog i składnia 
Prolog 
 
W XHTML istnieją elementy, których nie można pominąć (jak np: HTML). Do 
nich zalicza się deklaracja XML, wersja DTD i znacznik <html> z odpowiednimi 
atrybutami. Pomaga to w klasyfikacji dokumentu i w jego walidacji. Prologu 
należy używać zawsze na początku dokumentu. Prolog to zadeklarowanie 
zgodności z XML. A wygląda tak: 
 
<?xml version="1.0" encoding="iso-8859-2"?> 
 
Pierwsza część prologu (czyli: <?xml version="1.0") nie zmienia się. Dalsza 
część dotyczy kodowania znaków (w naszym przypadku polskich znaków). 
Standard dla polskich "ogonków" to 'iso-8859-2' (ISO Latin 2). Należy zwrócić 
uwagę na to, że version w prologu nie jest traktowane jako zwykły atrybut a 
więc nie posiada statusu Deprecated (jako to ma miejsce w znaczniku <html>, 
patrz: 'Atrybuty'). Do prologu można też dodać standalone z wartością "no". 
Oznacza to, że definiujemy dokument z zewnętrzną definicją w innych plikach. 
 
Przykład: 
 
<?xml version="1.0" encoding="iso-8859-2" standalone="no"?> 
 
Dalej należy wpisać wersje DTD dokumentu (patrz: 'Wersje DTD'). Deklaracja 
XML i wersja DTD to prolog. 
 
Przykład: 
 
<?xml version="1.0" encoding="iso-8859-2"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 

background image

Dokumenty zgodne z XHTML mogą nie posiadać deklaracji z XML ale jest to 
bardzo odradzane. 
Znacznik 'html' 
 
W standardzie XHTML dokument jest zaczynany specyficznym tagiem <html>, 
który w całości wygląda tak: 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
Znacznik ten także ma podobne funkcje jak prolog. 
Znacznik 'body' 
 
Dobrym zwyczajem jest zadeklarowanie języka. Robi się to w znaczniku 
<body>. 
 
Przykład: 
 
<body xml:lang="pl"> 
 
Podsumowując prawidłowy dokument powinien wyglądać tak: 
 
<?xml version="1.0" encoding="iso-8859-2"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">     
<head> 
<meta http-equiv="Content-Type" 
 content="text/html; charset=iso-8859-2" /> 
<title></title> 
</head> 
<body xml:lang="pl"> 
</body> 
</html> 
 
Atrybut xml:lang="pl" można też wstawiać do znacznika <html>. W XHTML 1.0 
można używać także atrybutu lang. 
 
Oczywiście sekcje <head> i <body> można (nawet trzeba!) uzupełniać nowymi 
znacznikami. 
Dołączanie arkusza stylów 
 
Dołączanie arkusza stylów w XML jest związane z prologiem (dotyczy to także 
XHTML) i odbywa się w inny sposób niż w HTML. A oto przykład: 
 
<?xml-stylesheet type="text/css" href="style.css"?> 
 
W celu zachowania zgodności z HTML w dokumentach XHTML zaleca się 
stosowanie górnego zapisu i równocześnie stosowanie znacznika <link>. 
 
Przykład: 

background image

 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<?xml-stylesheet type="text/css" href="style.css" ?> 
</head> 
 
Dopuszcza się deklarowanie arkusza na samym początku dokumentu. 
 
Przykład 
 
<?xml version="1.0" encoding="iso-8859-2"?> 
<?xml-stylesheet type="text/css" href="style.css" ?> 
 

Znaczniki 

Spis znaczników XHTML 

Wybierz literę, na którą zaczyna się znacznik: 

a

 | 

b

 | 

c

 | 

d

 | 

e

 | 

f

 | g | 

h

 | 

i

 | j | 

k

 | 

l

 | 

m

 | 

n

 | 

o

 | 

p

 | 

q

 | r | 

s

 | 

t

 | 

u

 | 

v

 | w | x | y | z 

Spis znaczników 

Nazwa 

znacznika 

Opis znacznika 

XHTML 

1.0 

XHTML 1.1 

Zamknięcie 

zanacznika 

a odnośniki zgodny 

zgodny 

jest 

abbr forma 

skrócona  zgodny 

zgodny 

jest 

acronym akronim 

zgodny 

zgodny 

jest 

address dane 

kontaktowe 

zgodny 

zgodny 

jest 

applet aplet 

Javy 

Deprecated

zgodny jest 

area mapa 

odnośników zgodny 

zgodny 

brak

b pogrubiony 

tekst 

zgodny 

zgodny 

jest 

base adres 

bazowy 

zgodny 

Unsupported brak

basefont czcionka 

bazowa 

Deprecated Unsupported brak

bdo 

wyłączenie 
dwustronnego 
wypisywania 

zgodny zgodny  jest 

big tekst 

większy o 1 

zgodny 

zgodny 

jest 

blockquote 

cytat do długich tekstów  zgodny 

zgodny 

jest 

body ciało dokumentu 

zgodny 

zgodny 

jest 

br nowa 

linia 

zgodny 

zgodny 

brak

button przyciski 

zgodny 

zgodny 

jest 

caption opis 

tabeli 

zgodny 

zgodny 

jest 

center wyśrodkowanie 

Deprecated Unsupported

jest 

background image

Spis znaczników 

Nazwa 

znacznika 

Opis znacznika 

XHTML 

1.0 

XHTML 1.1 

Zamknięcie 

zanacznika 

cite cytat, 

źródło zgodny 

zgodny 

jest 

code kod 

programu 

zgodny 

zgodny 

jest 

col 

atrybuty kilku kolumn 

zgodny 

zgodny 

brak

colgroup grupowanie 

kolumn  zgodny 

zgodny jest 

dd 

termin w liście 
definicyjnej 

zgodny zgodny  jest 

del tekst 

usunięty zgodny 

zgodny 

jest 

dfn definicja 

zgodny 

zgodny 

jest 

dir zawartość katalogu 

Deprecated

zgodny jest 

div 

wygląd długiego 
fragmentu dokumentu 

zgodny zgodny  jest 

dl 

tworzenie listy 
definicyjnej 

zgodny zgodny  jest 

dt 

termin w liście 
definicyjnej 

zgodny zgodny  jest 

em wyróżnienie tekstu 

zgodny 

zgodny 

jest 

fieldset 

grupowanie elementów 
formularza 

zgodny zgodny  jest 

font czcionka 

Deprecated Unsupported

jest 

form tworzenie 

formularzy 

zgodny 

zgodny 

jest 

frame zawartość ramki 

Frameset

Unsupported brak

frameset wyglad 

ramek 

Frameset

Unsupported

jest 

h1 nagłówek 1 

zgodny 

zgodny 

jest 

h2 nagłówek 2 

zgodny 

zgodny 

jest 

h3 nagłówek 3 

zgodny 

zgodny 

jest 

h4 nagłówek 4 

zgodny 

zgodny 

jest 

h5 nagłówek 5 

zgodny 

zgodny 

jest 

h6 nagłówek 6 

zgodny 

zgodny 

jest 

head nagłówek dokumentu 

zgodny 

zgodny 

jest 

hr linia 

pozioma  zgodny 

zgodny 

brak

html rozpoczyna 

dokument 

zgodny 

zgodny 

jest 

i pochylony 

tekst 

zgodny 

zgodny 

jest 

iframe ramki 

wewnętrzne zgodny 

Unsupported

jest 

img obrazek 

zgodny 

zgodny 

brak

input elementy 

formularza 

zgodny 

zgodny 

brak

ins wstawiony 

tekst zgodny 

zgodny 

jest 

background image

Spis znaczników 

Nazwa 

znacznika 

Opis znacznika 

XHTML 

1.0 

XHTML 1.1 

Zamknięcie 

zanacznika 

isindex 

element wprowadzania 
tekstu 

Deprecated Unsupported brak

kbd tekst 

do 

wypisania 

zgodny 

zgodny 

jest 

label 

etykieta opisu elementu  zgodny 

zgodny 

jest 

legend przypisanie 

opisu zgodny 

zgodny 

jest 

li 

element listy 
wyliczeniowej 

zgodny zgodny  jest 

link odnośnik np. do stylów 

zgodny 

zgodny 

brak

map definicja 

mapy 

odsyłaczy zgodny zgodny  jest 

menu lista 

menu 

Deprecated Unsupported

jest 

meta 

określanie własności 
dokumentu 

zgodny zgodny 

brak

noframes 

tekst dla przeglądarek 
bez ramek 

Frameset

Unsupported

jest 

noscript 

tekst dla przeglądarek 
bez skryptów 

zgodny zgodny  jest 

object obiekt 

dokumencie 

zgodny 

Unsupported

jest 

ol 

tworzenie 
uporządkowanej listy 

zgodny zgodny  jest 

optgroup 

logiczne grupowanie 
opcji wyboru 

zgodny zgodny  jest 

option opcja 

listy 

wyboru zgodny 

zgodny 

jest 

p akapit 

zgodny 

zgodny 

jest 

param 

parametr apletu lub 
obiektu 

zgodny zgodny  jest 

pre tekst 

preformatowany 

zgodny 

zgodny 

jest 

cytat do krótkich tekstów zgodny 

zgodny 

jest 

s przekreślony tekst 

Deprecated Unsupported

jest 

samp przykład zgodny 

zgodny 

jest 

script skrypty 

zgodny 

zgodny 

jest 

select 

tworzenie listy wyboru w 
formularzach 

zgodny zgodny  jest 

small 

tekst mniejszy o 1 

zgodny 

zgodny 

jest 

span wygląd fragmentu tekstu  zgodny 

zgodny 

jest 

strike przekreślony tekst 

Deprecated Unsupported

jest 

strong wyróżnienie tekstu 

zgodny 

zgodny 

jest 

style definiowanie 

stylów 

zgodny 

zgodny 

jest 

background image

Spis znaczników 

Nazwa 

znacznika 

Opis znacznika 

XHTML 

1.0 

XHTML 1.1 

Zamknięcie 

zanacznika 

sub indeks 

dolny 

zgodny 

zgodny 

jest 

sup indeks 

górny 

zgodny 

zgodny 

jest 

table tabela 

zgodny 

zgodny 

jest 

tbody 

obszar głównej treści 
tabeli 

zgodny zgodny  jest 

td komórka 

tabeli zgodny 

zgodny 

jest 

textarea 

wieloliniowy obszar 
tekstu 

zgodny zgodny  jest 

tfoot 

obszar stopki tabeli 

zgodny 

zgodny 

jest 

th komórka 

nagłówka tabeli zgodny 

zgodny 

jest 

thead obszar 

główka tabeli 

zgodny 

zgodny 

jest 

title tytuł dokumentu 

zgodny 

zgodny 

jest 

tr wiersz 

tabeli  zgodny 

zgodny 

jest 

tt 

tekst o tych samych 
odstępach 

zgodny zgodny  jest 

u podkreślony tekst 

Deprecated Unsupported

jest 

ul 

tworzenie listy 
wyliczeniowej 

zgodny zgodny  jest 

var przykład zmiennej 

zgodny 

zgodny 

jest 

Deprecated

 

znaczniki w tym statusie nie mogą być używane w Strict (patrz: '

Wersje 

DTD

') 

Frameset

 

znaczniki w tym statusie mogą być używane tylko w Frameset (patrz: 
'

Wersje DTD

') 

Unsupported

 

znaczniki w tym statusie nie mogą być używane w XHTML 1.1 (patrz: 
'

Wersje DTD

') 

Jak widać statusy deprecated i unsupported w większości znacznikach się 
pokrywają, a co za tym idzie dokumenty zgodne ze strict w większości 
(czasami z drobnymi zmianami) mogą być zgodne z XHTML 1.1. 

Zasady dotyczące znaczników 

<a>

w tym znaczniku nie może być zawarty inny znacznik <a> 

<button>

w tym znaczniku nie może być zawarty <button><fieldset><form>
<iframe>

<input><isindex><label><select> i <textarea> 

<form>

w tym znaczniku nie może być zawarty inny znacznik <form> 

background image

<label>

w tym znaczniku nie może być zawarty inny znacznik <label> 

<pre>

w tym znaczniku nie może być zawarty <big><img><object><small>
<sub>

 i <sup> 

Należy więc unikać zapisu takiego jak ten: 
<pre><big>bvfbg</big></pre> 

lub 

<a href="xyz">xyz<a>abc</a></a> 

 

Atrybuty 

Spis atrybutów XHTML 

Wybierz literę, na którą zaczyna się atrybut: 

a

 | 

b

 | 

c

 | 

d

 | 

e

 | 

f

 | g | 

h

 | 

i

 | j | k | 

l

 | 

m

 | 

n

 | 

o

 | 

p

 | 

q

 | 

r

 | 

s

 | 

t

 | 

u

 | 

v

 | 

w

 | x | y | z 

Spis atrybutów 

Nazwa Występowanie w znacznikach 

XHTML 1.0 

abbr td, 

th 

zgodny 

accept-charset form 

zgodny 

accept form, 

input 

zgodny 

accesskey 

a, area, button, input, label, legend, textarea 

+ zgodny 

action form 

zgodny 

align 

col, colgroup, tbody, td, tfoot, th, thead, tr 

+ zgodny 

align 

caption, applet, iframe, img, input, object, legend, 
table, hr, div, h1, h2, h3, h4, h5, h6, p 

Deprecated

alink body 

Deprecated

alt applet 

Deprecated

alt area, 

img, 

input 

zgodny 

archive object 

zgodny 

archive applet 

Deprecated

axis td, 

th 

zgodny 

background body 

Deprecated

bgcolor 

table, tr, td, th, body 

Deprecated

border table 

zgodny 

border img, 

object 

+ zgodny 

Deprecated

background image

Spis atrybutów 

Nazwa Występowanie w znacznikach 

XHTML 1.0 

cellpadding table 

zgodny 

cellspacing table 

zgodny 

char 

col, colgroup, tbody, td, tfoot, th, thead, tr 

zgodny 

charoff 

col, colgroup, tbody, td, tfoot, th, thead, tr 

zgodny 

charset 

a, link, script 

zgodny 

checked input 

zgodny 

cite blockquote, 

q, del, ins 

zgodny 

class 

wszystkie oprócz: base, basefont, head, html, 
meta, param, script, style, title 

zgodny 

classid object 

zgodny 

clear br 

Deprecated

code applet 

Deprecated

codebase object 

zgodny 

codebase applet 

Deprecated

codetype object 

zgodny 

color basefont, 

font 

Deprecated

cols textarea 

zgodny 

cols frameset 

Frameset

colspan td, 

th 

zgodny 

compact 

dir, dl, menu, ol, ul 

Deprecated

content meta 

zgodny 

coords area, 

zgodny 

data object 

zgodny 

datetime del, 

ins 

zgodny 

declare object 

zgodny 

defer script 

zgodny 

dir 

wszystkie oprócz: applet, base, basefont, bdo, br, 
frame, frameset, iframe, param, script 

zgodny 

dir bdo 

zgodny 

disabled 

button, input, optgroup, option, select, textarea 

zgodny 

enctype form 

zgodny 

face basefont, 

font 

Deprecated

for label 

zgodny 

frame table 

zgodny 

frameborder frame, 

iframe 

Frameset 

headers td, 

th 

zgodny 

background image

Spis atrybutów 

Nazwa Występowanie w znacznikach 

XHTML 1.0 

height 

img, object 

+ zgodny 

height 

iframe, td, th, applet 

Deprecated

href 

a, area, link, base 

zgodny 

hreflang a, 

link 

zgodny 

hspace 

applet, img, object 

Deprecated

http-equiv meta 

zgodny 

id 

wszystkie oprócz: base, head, html, meta, script, 
style, title 

zgodny 

ismap img, 

input 

zgodny 

label option, 

optgroup 

zgodny 

lang 

wszystkie oprócz: applet, base, basefont, br, 
frame, frameset, iframe, param, script 

+ zgodny 

language script 

Deprecated

link body 

Deprecated

longdesc img 

zgodny 

longdesc frame, 

iframe 

Frameset

marginheight frame, 

iframe 

Frameset

marginwidth frame, 

iframe 

Frameset

maxlength input 

zgodny 

media style, 

link 

zgodny 

method form 

zgodny 

multiple select 

zgodny 

name 

button, textarea, select, form, img, a, input, 
object, map, param, meta 

zgodny 

name frame, 

iframe 

Frameset

name applet 

Deprecated

nohref area 

zgodny 

noresize frame 

Frameset

noshade hr 

Deprecated

nowrap td, 

th 

Deprecated

object applet 

Deprecated

onblur

*

a, area, button, input, label, select, textarea 

zgodny 

onchange

*

input, select, textarea 

zgodny 

onclick

*

wszystkie oprócz: applet, base, basefont, bdo, br, 
font, frame, frameset, head, html, iframe, isindex, 
meta, param, script, style, title 

zgodny 

ondblclick

*

wszystkie oprócz: applet, base, basefont, bdo, br,  zgodny 

background image

Spis atrybutów 

Nazwa Występowanie w znacznikach 

XHTML 1.0 

font, frame, frameset, head, html, iframe, isindex, 
meta, param, script, style, title 

onfocus

*

a, area, button, input, label, select, textarea 

zgodny 

onkeydown

*

wszystkie oprócz: applet, base, basefont, bdo, br, 
font, frame, frameset, head, html, iframe, isindex, 
meta, param, script, style, title 

zgodny 

onkeypress

*

wszystkie oprócz: applet, base, basefont, bdo, br, 
font, frame, frameset, head, html, iframe, isindex, 
meta, param, script, style, title 

zgodny 

onkeyup

*

wszystkie oprócz: applet, base, basefont, bdo, br, 
font, frame, frameset, head, html, iframe, isindex, 
meta, param, script, style, title 

zgodny 

onload

*

body zgodny 

onload

*

frameset 

Frameset

onmousedown

*

wszystkie oprócz: applet, base, basefont, bdo, br, 
font, frame, frameset, head, html, iframe, isindex, 
meta, param, script, style, title 

zgodny 

onmousemove

*

wszystkie oprócz: applet, base, basefont, bdo, br, 
font, frame, frameset, head, html, iframe, isindex, 
meta, param, script, style, title 

zgodny 

onmouseout

*

wszystkie oprócz: applet, base, basefont, bdo, br, 
font, frame, frameset, head, html, iframe, isindex, 
meta, param, script, style, title 

zgodny 

onmouseover

*

wszystkie oprócz: applet, base, basefont, bdo, br, 
font, frame, frameset, head, html, iframe, isindex, 
meta, param, script, style, title 

zgodny 

onmouseup

*

wszystkie oprócz: applet, base, basefont, bdo, br, 
font, frame, frameset, head, html, iframe, isindex, 
meta, param, script, style, title 

zgodny 

onreset

*

form zgodny 

onselect

*

input, textarea 

zgodny 

onsubmit

*

form zgodny 

onunload

*

body zgodny 

onunload

*

frameset 

Frameset

profile head 

zgodny 

prompt isindex 

Deprecated

readonly textarea, 

input 

zgodny 

rel a, 

link 

zgodny 

rev a, 

link 

zgodny 

rows textarea 

zgodny 

background image

Spis atrybutów 

Nazwa Występowanie w znacznikach 

XHTML 1.0 

rows frameset 

Frameset

rowspan td, 

th 

zgodny 

rules table 

zgodny 

scheme meta 

zgodny 

scope td, 

th 

zgodny 

scrolling frame, 

iframe 

Frameset

selected option 

zgodny 

shape area 

zgodny 

shape a 

zgodny 

size 

input, select 

+ zgodny 

size 

hr, font, basefont 

Deprecated

span col 

zgodny 

span colgroup 

zgodny 

src 

script, input, img 

zgodny 

src frame, 

iframe 

Frameset

standby object 

zgodny 

start ol 

Deprecated

style 

wszystkie oprócz: base, basefont, head, html, 
meta, param, script, style, title 

zgodny 

summary table 

zgodny 

tabindex 

a, area, button, input, object, select, textarea 

+ zgodny 

target 

a, area, base, form, link 

Deprecated

text body 

Deprecated

title 

wszystkie oprócz: base, basefont, head, html, 
meta, param, script, title 

zgodny 

type 

a, link, object, param, script, style, input, button 

+ zgodny 

type 

li, ol, ul 

Deprecated

usemap img, 

input, 

object 

zgodny 

valign 

col, colgroup, tbody, td, tfoot, th, thead, tr 

zgodny 

value 

input, option, param, button 

zgodny 

value li 

Deprecated

valuetype param 

zgodny 

version html 

Deprecated

vlink body 

Deprecated

vspace 

applet, img, object 

Deprecated

width img, 

object, 

table, col, colgroup 

+ zgodny 

background image

Spis atrybutów 

Nazwa Występowanie w znacznikach 

XHTML 1.0 

width 

hr, td, th, applet, pre, iframe 

Deprecated

*

Zdarzenia  

+

 patrz niżej

Wyjaśnienia terminów deprecated i frameset występują w dziale '

Znaczniki

'. 

+

Zmiany XHTML 1.1 w stosunku do 1.0 

accesskey

 

nie można go używać w 

<a>

align

 

nie można go używać w 

<capiton>

<div>

<h1>

 - 

<h6>

<hr>

<img>

<input>

<legend>

<p>

 i 

<table>

border

 

nie można go używać w 

<img>

height

 
nie można go używać w 

<td>

 i 

<th>

lang

 

nie można go używać we wszystkich znacznikach! 

name

 

nie można go używać w 

<a>

 i 

<map>

size

 

nie można go używać w 

<hr>

tabindex

 

nie można go używać w 

<a>

target

 

nie można używać go używać 

<a>

<area>

<link>

 i 

<base>

type

 

nie można go używać w 

<ol>

<li>

 i 

<ul>

value

 

nie można go używać w 

<li>

width

 

nie można go używać w 

<hr>

<td>

<th>

 i 

<pre>

W dalszych wersjach XHTML stopniowo będzie się likwidowało atrybuty - 
zastąpi się je stylami lub w inny sposób (oczywiście atrybuty np: alt lub 
summary nie znikną całkowicie nigdy). 

 

Style w XHTML 

Podstawowe informacje 

Style są nieodłączną częścią XHTML. Odpowiadają one na wizualną, 
interaktywną słyszalną i dotykową część strony. Style zastępują wiele 

background image

atrybutów. Niestety CSS2 nie jest w pełni interpretowany przez aktualne wersje 
przeglądarek. 

Budowa stylu: 

selektor { element: wartość } 

Selektor to znacznik XHTML (HTML) np.: p, h1, li itp. Element (cecha) to 
właściwość danego znacznika odpowiadająca w pewnym sensie atrybutowi w 
XHTML (HTML). Elementy są wymienione poniżej. Wartość może być liczbą lub 
ciągiem znaków. 

Elementy zastępujące atrybuty 

Elementy zastępujące niektóre atrybuty: 

Atrybut Element 

align text-align 
face (w <font>) 

font-family 

size (w <font>) 

font-size 

cellpadding padding 
cellspacing paddnig 
color color 
bgcolor background-color 
background background-image 
valign vertical-align 
width width 
height height 
clear clear 
border border 

Zamiast: 
 

należy używać: 

<h1 style="text-align: center">XYZ</h1> 

Oczywiście jest to tylko przykład. 

Spis elementów 

Elementy: 

azimuth

#

cue-after

#

marker-offset

+

richness

#

background

+

cue-before

#

marks

+

right

+

background-

cursor

+

max-height

+

size

+

background image

attachment

+

background-color

+

direction

+

max-width

+

speak

#

background-image

+

display

+#@

min-height

+

speak-header

#

background-position

+

elevation

#

min-width

+

speak-numeral

#

background-repeat

+

empty-cells

+

orphans

+

speak-
punctuation

#

border

+

float

+

outline

+

speech-rate

#

border-collapse

+

font

+

outline-color

+

stress

#

border-color

+

font-family

+

outline-style

+

table-layout

+

border-spacing

+

font-size

+

outline-width

+

text-align

+

border-style

+

font-size-adjust

+

overflow

+

text-decoration

+

border-top

*+

font-stretch

+

padding

+

text-indent

+

border-top-color

*+

font-style

+

padding-top

*+

text-shadow

+

border-top-style

*+

font-variant

+

page

+

text-transform

+

border-top-width

*+

font-weight

+

page-break-after

+

top

+

border-width

+

height

+

page-break-
before

+

unicode-bidi

+

bottom

+

left

+

page-break-
inside

+

vertical-align

+

caption-side

+

letter-spacing

+

pause

#

visibility

+

clear

+

line-height

+

pause-after

#

voice-family

#

clip

+

list-style

+

pause-before

#

volume

#

color

+

list-style-image

+

pitch

#

white-space

+

content

+#@

list-style-
position

+

pitch-range

#

widows

+

counter-increment

+#@

list-style-type

+

play-during

#

width

+

counter-reset

+#@

margin

+

position

+

word-spacing

+

cue

#

margin-top

*+

quotes

+

z-index

+

*

right

left lub bottom 

+

wzrokowy 

#

słuchowy 

@

dotykowy 

Wstawianie stylów 

1. Zagnieżdżanie stylów wewnątrz dokumentu 

Przykład: 

<!-- prolog na początku --> 
<head> 
 <!-- to są właściwe style, w sekcji head --> 
   <style type="text/css"> 
    p { font-size: 10px; font-family: monospace } 
    h1,h2 { text-align: center; color: blue } 
   </style> 

background image

 <!-- koniec stylów --> 
</head> 
<!-- dalsza część jest dokumentu --> 

2. Style lokalne w dokumencie 

Jest to metoda nie zalecana, ponieważ jest niewydajna. Zadaniem styli przecież 
jest ułatwianie pracy i maksymalne jej skracanie. Jedną z ważnych funkcji CSS 
jest możliwość wykorzystywania ich w kilku dokumentach, czego nie oferuje ta 
metoda. Radzę korzystać z innych rodzajów wstawiania styli. Jeśli ktoś chce 
dla jednego znacznika przypisywać różne właściwości (i używać go kilka razy 
w dokumencie XHTML) polecam 

class

 lub 

id

.  

Przykład: 

<!-- wsześniej prolog i sekcja head --> 
<body> 
<p style="color: red; font-size: 10pt">XYZ</p> 
<p style="color: green">ABC</p> 
</body> 
<!-- dalej koniec dokumentu --> 

3. Dołączanie zewnętrznego arkusza stylów 

Jest to metoda najczęściej spotykana. Daje ona najwięcej możliwości i w pełni 
wykorzystuje funkcje stylów. Po stworzeniu zewnętrznego pliku CSS można go 
wykorzystać w kilku stronach (zyskacie naprawdę dużo czasu:-). 

Przykład pliku zewnętrznego: 

/* jest to przykład zewnętrznego pliku z rozszerzeniem CSS */ 
p { font-size: 10px; font-family: monospace } 
h1,h2 { text-align: center; color: blue } 

Przykład pliku XHTML: 

<!-- prolog na początku --> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<!-- dalsza część jest dokumentu --> 

Można też arkusz stylu zewnętrznego dołączyć w znaczniku 

<? ?>

 (patrz: 

'

Prolog i składnia

'). Ta metoda nie jest obowiązkowa ale zalecana ze względu 

za zgodność z XML. 

4. Importowanie arkusza stylów 

Przykład: 

<!-- prolog na początku --> 
<head> 
 <!-- to są właściwe style, w sekcji head --> 

background image

   <style type="text/css"> 
   @import url(http://www.xyz.pl/style.css) 
   </style> 
</head> 
<!-- dalsza część jest dokumentu --> 

5. Inne metody  

Rozciąganie stylu przez znaczniki <span> i <div>. 

Oba sposoby są podobne. Różnią się tylko tym, że <div> jest bardziej 
elastyczny. Nie są to popularne metody. 

Przykład z <span>: 

<!-- prolog i sekcja head --> 
<body> 
<!-- 1 możliwość --> 
<span class="klasa"> 
<dl> 
<dt>to jest lista</dt> 
<dd>jeden</dd> 
<dd>dwa</dd> 
<dd>trzy</dd> 
</dl> 
</span> 
<!-- 2 możliwość --> 
<span style="font-size: 10pt; color: green"> 
<dl> 
<dt>to jest lista</dt> 
<dd>jeden</dd> 
<dd>dwa</dd> 
<dd>trzy</dd> 
</dl> 
</span> 
</body> 
<!-- dalej koniec dokumentu --> 

Przykład z <div>: 

<!-- prolog i sekcja head --> 
<body> 
<!-- 1 możliwość --> 
<div class="klasa"> 
<table summary="przykład" border="1"> 
<tbody> 
<tr> 
<td>zz</td> 
<td>zz</td> 
</tr> 
</tbody> 
</table> 
</div> 
<div style="font-size: 10pt; text-align: right"> 
<table summary="przykład" border="1"> 
<tbody> 
<tr> 
<td>vv</td> 

background image

<td>vv</td> 
</tr> 
</tbody> 
</table> 
</div> 
</body> 
<!-- dalej koniec dokumentu --> 

Zobasz też 

'Inne ważne zasady'

 i 

'Prolog'

 

Inne ważne zasady 

Są tu wymienione zasady XHTML, które zmieniły się w stosunku do HTML. Są 
to zasady, które dotyczą bardziej skomplikowanych rzeczy niż wymienione w 
temacie '

Informacje ogólne

'. 

Symbol '&' 

Jeśli w adresie będzie symbol '&' (szczególnie w skryptach CGI) należy go 
zastąpić zamiennikiem 

&amp;

Przykład nie poprawnego zapisu: 

 

Poprawny przykład: 

http://my.site.dom/cgi-bin/myscript.pl?class=guest&amp;name=user. 

Atrybuty 'id' i 'name' 

W znacznikach <a> i <map> atrybuty name są zakazane. Teraz należy używać 
atrybutu id
. W specyfikacji XHTML identyfikator # nie odnosi się do name tylko 
do id
.  

Przykład nie poprawnego zapisu: 
 

Poprawny przykład: 

<a id="poczatek"></a> 

Przykład wywołania: 

<a href="#poczatek>xyz</a> 

Atrybuty 'id' i 'class' 

background image

Atrybuty id i class są ściśle związane ze stylami (patrz: '

Style w XHTML

'). W 

XHTML odwołanie się do '#' możliwe jest tylko przez atrybut id (identyfikator ID) 
a odwołanie się do '.'  możliwe jest tylko przez class
 (klasa). 

<!-- prolog --> 
<head> 
<style type="text/css"> 
.klasa { color: blue } 
#id { color: green } 
</style> 
</head> 
<body> 
<p class="klasa">To jest tekst niebieski</p> 
<p id="id">To jest tekst zielony</p> 
</body> 
<!-- dalej koniec dokumentu --> 

Komentarze 

Komentarze w XHTML wyglądają tak samo jak w HTML: zaczynają się <!-- a 
kończą się -->. 

Przykład: 

<!-- treść komentarza --> 

Skrypty i style 

XHTML zaleca się stosowanie innego zapisu stylów i skryptów niż w HTML. 
Związane jest to z sekcją CDATA. 

Przykład: 

<script type="text/javascript"> 
 <![CDATA[ 
 treść skryptu 
 ]]> 
 </script> 

lub 

<style type="text/css"> 
 <![CDATA[ 
 treść stylów 
 ]]> 
 </style> 

Zapis ten ma ujednolicić zapis elementów nie związanych z językami opartymi 
na znacznikach (np. XHTML). Zapis ten ma także "czuwać" nad poprawnym 
rozwijaniem się stylów, skryptów itp. Oczywiście ten zapis został zaczerpnięty 
z XML. Wszystko co znajduje się w sekcji CDATA jest ignorowane przez paser. 

background image

Niestety dzisiejsze przeglądarki nie interpretują tak zapisanych stylów i 
skryptów wewnątrz dokumentu XHTML, można więc przejściowo zasadę tą 
pominąć. 

Rozszerzenie dokumentu XHTML 

W XHTML zezwala się na korzystanie z rozszerzenia *.html, jednak poprawnym 
rozszerzeniem jest *.xhtml. W przyszłości planuje się korzystanie tylko z 
rozszerzenia *.xhtml. Należy zaznaczyć, że dokumenty z takim roszerzeniem 
mają typ MINE: 

application/xhtml+xml

 a nie 

text/html

.  

Niektóre przeglądarki mają problem poprawnym wyświetlaniem plików *.xhtml. 

Skrypty PHP 

W specyfikacji XHTML nie ma mowy o skryptach takich jak PHP ale jeśli 
nadejdzie potrzeba ich użycia to należy posłużyć się instrukcjami 
przetwarzania (są one zaczerpnięte bezpośrednio ze specyfikacji XML). Proszę 
zwrócić uwagę na to, że po <? występuje nazwa (<?php). Jest to bardzo ważne, 
ponieważ nazwa pozwala zidentyfikować dalszy ciąg znaków. W HTML można 
spotkać treść skryptów w środku znaczników takich jak <? ?>, <% %>. 
Wszystkie te oznaczenia w XHTML są nie prawidłowe! Nie zaleca się też 
stosowania

 <script language="php"></script>

Poprawny przykład: 

<?php 
// treść skryptu 
?> 

Na dzień dzisiejszy we wstawianiu skryptów zaleca się stosowanie sekcji 
CDATA jednak zapis powyżej jednak jest bardziej powszechny. Łatwo 
zauważyć, że deklaracja zgodności z XML jest także instrukcją przetwarzania 
(patrz: '

Prolog i składnia

'). 

Animacje Flash a XHTML 

Na większości stronach animacje Flash są wstawiane niepoprawnie. Nawet 
programy generujące kod HTML robią to często niepoprawnie. Prawidłowe 
wstawienie Flasha do dokumentu XHTML powinno wiązać się tylko z 
znacznikiem <object>. Używanie znacznika <embed> jest nieprawidłowe, 
ponieważ taki znacznik nie figuruje w specyfikacji XHTML (nawet nie występuje 
w specyfikacji HTML). W XHTML 1.1 nie ma możliwości wstawienia 
jakiegokolwiek obiektu (czyli także Flasha). Warto zwrócić uwagę na SVG, które 
w najbliższym czasie wyprze Flasha lub przynajmniej będzie stanowić dla 
niego alternatywę. SVG jest to język oparty na XML, który służy do opisywania 
figur za pomocą wektorów (czyli obrazek SVG można będzie zmieniać, 
poprawiać lub nawet tworzyć za pomocą zwykłego edytora tekstowego tak jak 
XHTML). SVG ma typ MINE: 

image/svg+xml

.  

background image

Przykład SVG:  

<?xml version="1.0"?> 
<svg xmlns="http://www.w3.org/2000/svg"> 
<rect stroke="black" y="80px" x="50px" width="160px" height="70px" /> 
<circle stroke="black" cy="80px" cx="50px" r="50px" /> 
</svg> 

Matematyka w XHTML 

XHTML (podobnie jak HTML) nie jest przystosowany do zapisu wzorów 
matematycznych. Matematycy, fizycy i inni ludzie nauk ścisłych powinni więc 
korzystać z języka MathML. Język ten jest bardzo podobny do XHTML 
ponieważ jest oparty na XML. Już teraz niektóre przeglądarki interpretują 
dostatecznie ten język. MathML i znaki specjalne (patrz: '

Symbole i znaki 

specjalne

') umożliwiają zapisanie niemal każdego działania matematycznego. 

Przykład MathML: 

<?xml version="1.0"?> 
<math xmlns="http://www.w3.org/1998/Math/MathML"> 
<mroot> 
<mfrac> 
<mn>2</mn> 
<mn>3</mn> 
</mfrac> 
<mn>3</mn> 
</mroot> 
</math> 

 

Symbole i znaki specjalne 

Spis niektórych symboli 

Spis wielkich liter greckich 

Symbol I 

II 

Α &Alpha;  &#913; 
Β &Beta; 

&#914; 

Γ &Gamma; &#915; 
∆ &Delta;  &#916; 
Ε &Epsilon; &#917; 
Ζ &Zeta; 

&#918; 

Η &Eta; 

&#919; 

Θ &Theta;  &#920; 
Ι &Iota; 

&#921; 

Κ &Kappa;  &#922; 
Λ &Lambda; &#923; 

background image

Spis wielkich liter greckich 

Symbol I 

II 

Μ &Mu; 

&#924; 

Ν &Nu; 

&#925; 

Ξ &Xi; 

&#926; 

Ο &Omicron; &#927; 
Π &Pi; 

&#928; 

Ρ &Rho; 

&#929; 

Σ &Sigma;  &#931; 
Τ &Tau; 

&#932; 

Υ &Upsilon; &#933; 
Φ &Phi; 

&#934; 

Χ &Chi; 

&#935; 

Ψ &Psi; 

&#936; 

Ω &Omega;  &#937; 

 
 

Spis małych liter greckich 

Symbol I 

II 

α &alpha; 

&#945; 

β &beta; 

&#946; 

γ &gamma;  &#947; 
δ &delta; 

&#948; 

ε &epsilon;  &#949; 
ζ &zeta; 

&#950; 

η &eta; 

&#951; 

θ &theta; 

&#952; 

ι &iota; 

&#953; 

κ &kappa;  &#954; 
λ &lambda;  &#955; 
µ &mu; 

&#956; 

ν &nu; 

&#957; 

ξ &xi; 

&#958; 

ο &omicron; &#959; 
π &pi; 

&#960; 

ρ &rho; 

&#961; 

ς &sigmaf;  &#962; 
σ &sigma; 

&#963; 

τ &tau; 

&#964; 

υ &upsilon;  &#965; 

background image

Spis małych liter greckich 

Symbol I 

II 

φ &phi; 

&#966; 

χ &chi; 

&#967; 

ψ &psi; 

&#968; 

ω &omega;  &#969; 
ϑ 

&thetasym; &#977; 

ϒ 

&upsih; &#978; 

ϖ 

&piv; &#982; 

 
 

Spis symboli listowych 

Symbol I 

II 

 

&weierp; &#8472; 

 

&image; &#8465; 

 

&real; &#8476; 

™ &trade;  &#8482; 
 

&alefsym; &#8501; 

 
 

Strzałki 

Symbol I 

II 

← &larr; 

&#8592; 

↑ &uarr; 

&#8593; 

→ &rarr; 

&#8594; 

↓ &darr; 

&#8595; 

↔ &harr; 

&#8596; 

 

&crarr; &#8629; 

 

&uArr; &#8656; 

 

&dArr; &#8657; 

 &hArr; 

&#8658; 

 
 

Spis symboli matematycznych 

background image

Symbol I 

II 

∏ prod 

&#8719; 

∑ sum 

&#8721; 

√ radic 

&#8730; 

∞ infin 

&#8734; 

 and 

&#8743; 

 

or &#8744; 

∫ int 

&#8747; 

 sim 

&#8764; 

 

cong &#8773; 

≈ asymp 

&#8776; 

≠ ne 

&#8800; 

≡ equiv 

&#8801; 

≤ le 

&#8804; 

≥ ge 

&#8805; 

Spis niektórych znaków specjalnych 

Podstawowe znaki 

Symbol I 

II 

" &quot; 

&#34; 

& &amp; 

&#38;#38; 

< &lt; 

&#38;#60; 

> &gt; 

&#62; 

' &apos; 

&#39; 

 
 

Różne znaki 

Symbol I 

II 

Œ &OElig; &#338; 
œ &oelig; &#339; 
Š &Scaron; 

&#352; 

š &scaron; 

&#353; 

Ÿ &Yuml; &#376; 
› &rsaquo; 

&#8250; 

€ &euro; &#8364; 
£ &pound; 

&#163; 

¥ &yen;  &#165; 
¢ &cent; &#162; 
§ &sect; &#167; 

background image

Różne znaki 

Symbol I 

II 

© &copy; &#169; 
º &ordm; 

&#186; 

® &reg;  &#174; 
² &sup2; 

&#178; 

³ &sup3; 

&#179; 

‰ &permil; 

&#8240; 

¼ &frac14; 

&#188; 

½ &frac12; 

&#189; 

¾ &frac34; 

&#190; 

° &deg; &#176; 
± &plusmn; 

&#177; 

÷ &divide; 

&#247; 

ø &oslash; 

&#248; 

· &middot; 

&#183; 

Niestety nie wszystkie znaki powyżej można zobaczyć w przeglądarkach. Np. w 
Netscape Communicator 4 nie widać żadnych znaków. 

 

Basic XHTML 

Opis języka 

Basic XHTML jest następcą Compact HTML. Jest to młodszy brat XHTML, za 
pomocą którego tworzy się mniej skomplikowane strony, podobny jest do 
WML. Jest jego konkurentem. Basic XHTML przeznaczony jest do takich 
urządzeń jak:  

• 

telefony komórkowe 

• 

telewizory 

• 

pejdżery 

• 

systemy nawigacyjne samochodu 

• 

przenośne gry telewizyjne 

• 

organizery 

• 

zegarki 

• 

notatniki managerskie 

• 

i wiele innych 

Basic XHTML jest standardem zalecanym przez W3C. Strony napisane w Basic 
XHTML są zgodne z XHTML. 

Znaczniki Basic XHTML 

1. Ogólne:  

background image

o

 

body 

o

 

head 

o

 

html 

o

 

title 

o

 

meta 

o

 

base 

o

 

link 

2. Tekstu:  

o

 

abbr 

o

 

acronym 

o

 

address 

o

 

blockquote 

o

 

br 

o

 

cite 

o

 

code 

o

 

dfn 

o

 

div 

o

 

em 

o

 

h1, h2, h3, h4, h5, h6 

o

 

kbd 

o

 

o

 

pre 

o

 

o

 

samp 

o

 

span 

o

 

strong 

o

 

var 

3. Linku:  

o

 

4. Listy:  

o

 

dl 

o

 

dt 

o

 

dd 

o

 

ol 

o

 

ul 

o

 

li 

5. Formularzy:  

o

 

from 

o

 

input 

o

 

label 

o

 

select 

o

 

option 

o

 

textarea 

6. Tabel:  

o

 

caption 

o

 

table 

o

 

td 

o

 

th 

o

 

tr 

7. Obrazu:  

background image

o

 

img 

8. Obiektu:  

o

 

object 

o

 

param 

Prolog 

Tak powinien wyglądać prolog: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 
  "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> 

Dokumenty Basic XHTML wyglądają tak samo jak dokumenty XHTML. A oto 
przykład: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" 
  content="text/html; charset=iso-8859-2" /> 
<title>Przypładowa strona</title> 
</head> 
<body> 
<h1>Oto przykład</h1> 
</body> 
</html> 

Style 

W specyfikacji Basic XHTML nie ma znacznika <style>. Można tylko używać 
znacznika <link> do arkusza zewnętrznego. W Bacic XHTML style mogą być 
przedstawiane znacznikami <div> i <span>. Atrybut stylów jest dozwolony 
tylko 'class'. Zaleca się deklarowanie atrybutu 'media' by rozpoznać typ 
urządzenia, do którego dokument jest przeznaczony. 

Inne ważne zasady 

Znaczniki <script> i <noscript> są zabronione w specyfikacji tego języka (ze 
względu na swoje przeznaczenie).  

Reszta zasad jest tak sam jak w XHTML i jest przedstawiona w całym kursie. 

 

Linki i parsery 

Linki 

Strony polskie: 

http://webmaster.helion.pl/kurshtml/

background image

Strony kursu języka HTML Pawła Wimmera. 

http://www.pajaczek.pl/

 Strony najlepszego edytora stron internetowych. Wersja 5.0 Pajączka 
obsługuje XHTML. 

Strony zagraniczne: 

http://www.w3.org/

Strony World Wide Web Consortium. Tu znajdziesz wszelkie informacje o 
nowych i starych standardach internetowych. 

http://www.w3schools.com/xhtml/

W3 Schools, ciekawy strony o XHTML i nie tylko. 

http://www.w3.org/TR/xhtml11/

Specyfikacja XHTML 1.1, najnowsze zalecenia i zmiany dotyczące 
XHTML 1.1 - niepełna specyfikacja. 

http://www.w3.org/TR/xhtml1/

Specyfikacja XHTML 1.0, komplet informacji i wprowadzenie w "świat" 
XHTML - pełna specyfikacja. 

http://www.w3.org/TR/xhtml-basic/

Specyfikacja Basic XHTML. 

http://www.w3.org/TR/SVG11/

  

Specyfikacja SVG 1.1. 

http://www.w3.org/TR/SVG/

Specyfikacja SVG 1.0. 

http://www.w3.org/TR/MathML2/

Specyfikacja MathML. 

http://www.xhtml.org/

Strony przeznaczone wyłącznie dla XHTML. 

Parsery 

Parsery służą do sprawdzania błędów (czasami też do ich poprawiania). 
Zachęcam do korzystania z nich, ponieważ nawet najlepszym zdarzają się 
pomyłki. Parserem do XHTML godnym polecenia jest W3C Validator, który 
znajduje się pod adresem: 

http://validator.w3.org/

. Możemy także sprawdzić 

poprawność stylów pod adresem: 

http://jigsaw.w3.org/css-validator/

. Dobrym 

programem sprawdzającym poprawność dokumentu jest Tidy. Wszystkie 
informacje dotyczące tego programy znajdują się na 

http://www.w3.org/People/Raggett/tidy/

Gdy strona zostanie sprawdzona i zostaną poprawione błędy dobrym 
zwyczajem jest umieścić button wskazujący na zgodność z XHTML i CSS (patrz 
na dół). 

Copyright © 2002 

Dominik Tomaszuk

Wszystkie prawa zastrzeżone.  

    

     

 

 


Document Outline