kurs xhtml QBVI72E5NQPJ4D7DADPZ Nieznany

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

w

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

q

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,

a

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

p

o

pre

o

q

o

samp

o

span

o

strong

o

var

3. Linku:

o

a

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


Wyszukiwarka

Podobne podstrony:
kurs 3 id 254149 Nieznany
praktyczny kurs delphi(1) IQL54 Nieznany
kreativ kurs foto IQ6HDOSQLZ3Z4 Nieznany
Kurs 1 id 254144 Nieznany
Praktyczny kurs leczenia glodow Nieznany
excel 2007 kurs ebook promocy Nieznany
kurs id 254096 Nieznany
Jak sie poruszac po naszym kurs Nieznany
kurs samokontroli umyslu metoda Nieznany
2 Kurs Cubase Cz 2id 20482 Nieznany (2)
ein kurs im flirten NMV3LDZUQDM Nieznany

więcej podobnych podstron