Koszalin 08.06.2002 Tomasz Kuszczak III Informatyka Grupa 1.4

Koszalin 08.06.2002
Tomasz Kuszczak
III Informatyka
Grupa 1.4
[email protected]
XHTML
Politechnika Koszalińska
Wstęp
XHTML (Extensible HyperText Markup Language) jest kolejną wersją języka
HTML zalecaną do opisu stron przez World Wide Web Consortium (W3C).
Zastosowane nowe rozwiązania i możliwości tego języka sprawiły, że nie
zdecydowano się na nazwanie go HTML 5. Rozwój języka HTML zakończono
na HTML 4.
Wymagania rynku sprawiły, że pojawiła się potrzeba rozbudowy możliwości
języka opisu stron zamieszczanych w Internecie i dostosowania do XML.
W XHTML podobnie jak w XML wykorzystano surowe reguły składni, co
sprawia że kod zachowuje się w bardziej przewidywalny sposób. Ułatwia to
rozwój bardziej stabilnych i szybszych przeglądarek stron internetowych.
XHTML został podzielony na moduły, co umożliwia programistom wybór
grupy znaczników (tags), którą konkretnie ich aplikacja ma używać
zachowując zgodność. Przykładowo przeglądarka internetowa wykorzystana
w palmtopie może śmiało ignorować ramki (frames) i formularze (forms)
ciągle mogąc być uważaną na za zgodną ze standardową. Cecha ta znacznie
ułatwia zarządzanie zawartością stron internetowych i ich dostosowanie dla
różnych urządzeń.
Ponadto zostały rozbudowane możliwości HTML umożliwiając łatwe tworzenie
stabilnych interfejsów (robust interfaces). Przykładowo rozszerzono
formularze HTML poprzez zastosowanie XForms o czym więcej w dalszej
części pracy.
Dlaczego używać XHTML
Mimo iż HTML odniósł niebywały
sukces, język ten nie przystaje do
dzisiejszych aplikacji zorientowanych
na wykorzystanie sieciowe w handlu i
przedsiębiorstwach. XHTLM zmienia
sposób w jaki HTML jest zbudowany.
W odróżnieniu do HTML, XHTML jest
stworzony do używania go
ze
znacznikami z innych aplikacji XML
jak np. MathML (Rys.1).
Nowe standardy budowy stron internetowych mają sprawić, aby HTML był
bardziej dostępny i łatwiejszy w użyciu. W tym celu znaczniki HTML zostały
usunięte ze specyfikacji i zastąpione przez XForms.
Modułowa budowa XHTML
pozwala na zdefiniowanie i
dodawanie
nowych
znaczników i atrybutów do
już istniejących. Tworzy to
mechanizm do rozszerzania
i
rozbudowy
XHMTL
wychodząc
naprzeciw
przyszłym
potrzebom
użytkowników
na
pojawiających się nowych
platformach
sprzętowych
(Rys.2).
Przykładowo
XHTML zawiera moduł o
nazwie TextModule, który
zawiera znaczniki zaczerpnięte z HTML odpowiadające za formatowanie
tekstu i akapitów np. H1-H6, P, PRE, BLOCKQUOTE, EM i inne. Następnym
jest ListModule zawierający znaczniki skorelowane z tworzeniem list. Dalej
są moduły Basic Forms, Basic Tables, Scripting, Style i inne.
Modułowość XHTML będzie powodowała, iż przeglądarki internetowe w
przyszłości będą dostarczały obszar roboczy, w którym twórcy stron
internetowych będą mogli podłączyć (plug in) każdy rodzaj modułu
przeznaczonego do wyświetlania konkretnej zawartości i konkretnego typu
danych.
Umożliwi się w ten sposób
grupom specjalistów z danej
dziedziny
np.
chemikom,
lekarzom czy matematykom
pracę nad rozwojem różnych
profili
używających
standardowych
elementów
HTML
rozszerzonych
o
elementy
spełniające
oczekiwania specjalistów. Tak
będzie się rozwijał XHTML.
W XHTML pola formularzy
(form fields) są związane ze
zdefiniowanym typem danych i
mniej z konkretną prezentacją
(presentation),
co
ułatwia
wykorzystanie i przetwarzanie
danych przez inne oprogramowanie np. generowanie raportów, statystyk itd.
(Rys.3).
Nowa specyfikacja XForms uczyni łatwiejszym dostosowanie do regionalnych
różnic w walucie, numerach telefonów, określaniu daty, adresów pocztowych
i umożliwi współdziałanie z wielką różnorodnością urządzeń zewnętrznych jak
mikrofony, kamery, skanery.
Dwa główne powody dlaczego powinno się używać XHTML to:
• Możliwości rozszerzania. Dokumenty XML muszą być poprawnie
sformułowane (be well formed), czyli elementy muszą być poprawnie
zagnieżdżone. W HTML dodanie nowej grupy elementów wymagało
zmiany całego DTD. W przypadku dokumentów XHTML wymagane jest
tylko aby nowe elementy były wewnętrznie zgodne i poprawnie
sformułowane, aby zostać dodane do istniejącego DTD. Cecha ta w
ogromny sposób ułatwia rozwój i integrację nowych zbiorów
elementów.
•
Możliwość szerokiego zastosowania. Przewiduje się, iż będzie
ciągle wzrastała popularność urządzeń nie będących komputerami
(non-desktop devices) oferujących dostęp do Internetu, a co za tym
idzie będzie wzrastała różnorodność platform sprzętowych. W
większości przypadków urządzenie te nie są przystosowane do obsługi
źle sformułowanych (ill-formed) dokumentów HTML, które są
obsługiwane przez przeglądarki na tradycyjnych komputerach.
Właściwie przeglądarki niedesktopowe jeżeli nie otrzymają dobrze
sformułowanych znaczników to nie będą w stanie wyświetlić
zawartości dokumentu.
Przykładowe użycie XHTML
Dokument XHTML nie różni się znacząco od dokumentu HTML, poza
różnicami które wytłuściłem poniżej:
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE html PUBLIC ”-//w3c//DTD XHTML
”DTD/xhtml1-transional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
1.0
Transitional//EN”
<title>Szybki przykład Kruszona</title>
</head>
<h1> Szybki przykład Kruszona <h1>
<a href=”http://www.kruszon.w.pl”>
<img src=”Kruszon wita.jpg” height=”600” width=”800” border=”0”
align=”center” alt=”Portret Kruszona” /></a>
<p>
Kruszon wita na swojej stronie wszystkich zagubionych w sieci.
</p>
</body>
</html>
1- Deklaracja XML;
2- Wyszczególnia definicję typu dokumentu (DOCTYPE) na XHTML
Transitional;
3- Deklaracja jako dokumentu HTML i deklaracja XHTML namespaces;
10- Znacznik obrazka jest zamknięty, cudzysłów przy wartości;
11- Zamknięcie akapitu;
Zasady efektywnego wykorzystania XHTML
Nazwa elementu i atrybutu musi być napisana małymi literami. Zasada ta
musi być przestrzegana w celu zachowanie zgodności z XML. Przykład:
<IMG SRC=”abc.gif” WIDTH=”123” HEIGHT=”10”>
<Img src=”abc.gif” Width=”123” hEIght=”10”>
<img src=”abc.gif” width=”123” height=”10” />
niepoprawnie
niepoprawnie
poprawnie
Zawartość atrybutu musi być zawarta w cudzysłowie.
Przykład:
<body background=abc.gif>
<body background=”abc.gif”>
Wszystkie elementy wymagają znacznika końcowego
(termination) w przypadku elementów pustych.
Przykład:
<p>This is not XHTML complaint code
<p>This is XHTML complaint code</p>
<option>More Options
<option>More Options</option>
<base />
<meta />
<dt>first list</dt>
niepoprawnie
poprawnie
lub
zakończenia
niepoprawnie
poprawnie
niepoprawnie
poprawnie
poprawnie
poprawnie
poprawnie
W przypadku użycia zakotwiczeń (anchor) należy użyć zarówno id i name w
znaczniku.
Przykładowo:
<a name="cyberplex">...</a>
<a id="cyberplex" name="cyberplex">...</a>
niepoprawnie
poprawnie
Elementy mogą być zagnieżdżone, ale nie mogą na siebie zachodzić.
Przeglądarki w komputerach dopuszczają takie błędy, ale XHTML w trosce o
elastyczność zastosowań, którą ma zapewniać nie może na to pozwolić.
Wszystkie dokumenty XHTML muszą być napisane symetrycznie, czyli
poprawnie sformułowane (well formed).
Przykład:
<b>this code is not <u>symmetrical</b></u>
<b>this code is <u>symmetrical</u></b>
niepoprawnie
poprawnie
Nie jest dopuszczalne minimalizowanie i skracanie wpisów par wartości w
atrybutach. Zminimalizowany wpis zawiera jedynie jedną wartość.
Przykładowo:
HTML
XHTML
<td nowrap>text</td>
<td nowrap="nowrap">text</td>
HTML
XHTML
<dl compact>
<dl compact=”compact”>
HTML
XHTML
<ul compact>
<ul compact=”compact”>
HTML
XHTML
HTML
XHTML
<option .. selected>
<option .. selected=”selected”>
<td nowrap>text</td>
<td nowrap=”nowrap”>text</td>
HTML
XHTML
<input type=”radio” .. checked>
<input type=”radio” .. checked=checked” />
HTML
XHTML
<input type=”checkbox” . checked>
<input type=”checkbox” .. checked=”checked” />
Unikać należy niepotrzebnych pustych odstępów. Na przykład:
<a href= “abc.gif”>
<a href=”abc.gif”>
niepoprwnie
poprawnie
Tabela podsumowująca prezentująca podstawowe zasady pisania kodu w
XHTML.
#
1
2
3
4
5
6
7
8
9
Reguła
Niepoprawnie
Poprawna forma XHTML
Nazwy elementów I
atrybutów muszą być
małymi literami
Wartości atrybutów
muszą być w
cudzysłowie
Niepuste elementy
wymagają kończącego
znacznika
Puste elementy
wymagają zakończena
lub terminacji
Należy używać “id” i
“name” w znacznikach
zakotwiczeń
Elementy mogą być
zagnieżdzone, ale nie
zachdzić na siebie
Pary wartości
atrybutów nie mogą
być skracane
Unikać pustych miejsc
Unikać używania
atrybutów border,
hspace, vspace i
align używając
znacznika <img>,
szczególnie przy
Style Sheets
<IMG SRC=”abc.gif”
WIDTH=”123” HEIGHT=”10”>
<img src=”abc.gif”
width=”123” height=”10” />
<body
background=abc.gif>
<body
background=”abc.gif”>
<option>Dalsze opcje
Kruszona
<option>Dalsze opcje
Kruszona</option>
<img src=”abc.gif”
width=”40” height=”40”>
<img src=”abc.gif”
width=”40” height=”40” />
<a
name="Kruszon">...</a>
<a id="Kruszon"
name="Kruszon">...</a>
<b>ten kod nie jest
<u>symetryczny</b></u>
<b>ten kod jest
<u>symetryczny</u></b>
<option .. selected>
<option ..
selected=”selected”>
<a href= “abc.gif”>
<img src=”abc.gif”
vspace=”10” hspace=”10”
border=”2” align=”left”>
<a href=”abc.gif”>
<img src=”abc.gif”>
szczególnie przy Style
Sheets
Co czyni dokument HTML dokumentem XHTML
Wszystkie dokumenty XHTML muszą:
• zawierać deklarację DOCTYPE pojawiającą się przed główną częścią
dokumentu (root element) tzn. przed znacznikiem <html>;
• określać jedną z trzech dostępnych DTD dla XHTML (strict,
transitional, frameset);
• posiadać część główną dokumentu określającą XHTML namespace tzn.
należy dodać znacznik XML namespace xmlns i wartości definiujące
stronę jako dokument XHTML.
DTD XHTML
Przykładowe DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
Podczas tworzenia dokumentu XHTML DTD do której się ma on odnosić jest
zadeklarowana na jego początku. Unikalna etykieta Formal Public Identifer
(FPI) jest w stanie rozpoznać każde DTD. Znaki umieszczone w cudzysłowie
pojawiające się po słowie PUBLIC są odniesieniem FPI do W3C XHTML 1.0
DTD.
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
Używamy XHTML 1.0 Strict DTD kiedy do formatowania dokumentu używamy
Kaskadowych Arkuszy Stylów (Cascading Style Sheets - CSS). Innymi słowy,
używając tego DTD nie możemy użyć znaczników <font> i <table> do
kontroli sposobu wyświetlania naszego dokumentu przez przeglądarkę
internetową. Należy używać tego DTD kiedy zależy nam na przejrzystym
dokumencie pozbawionym niepotrzebnych znaczników przeznaczonych do
prezentacji dokumentu w przeglądarce. Przykładowo w przypadku użycia
znacznika <img> nie możemy używać atrybutów border, hspace, vspace,
align.
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
Używamy XHTML 1.0 Transitional DTD kiedy znaczniki przeznaczone do
prezentacji i formatowania dokumentu w przeglądarce internetowej mają być
użyte w samym dokumencie. Zaletą tego DTD jest fakt, iż wykorzystujemy w
sferze prezentacje mechanizmy istniejące w HTML, co czyni nasz dokument
dostępny nawet dla tych internautów posiadających starsze wersje
przeglądarek internetowych nie obsługujących CSS.
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">
Tego DTD używamy kiedy chcemy użyć ramek HTML (HTML Frames) w celu
podziału okna przeglądarki na dwie lub więcej części.
XML Namespaces
XML Namespaces jest odniesieniem do listy obowiązujących znaczników,
które mogą być użyte w XHTML. W3C definiuje XML Namespaces jako: „zbiór
nazw możliwych do zidentyfikowania dzięki odniesieniu do unikalnego URI
(Uniform Resource Identifer), który jest używany w dokumentach XML jako
typ elementu lub nazwa atrybutu”.
XHTML używa trzech różnych typów DTD dla różnych sposobów jego
wykorzystania, ale Namespaces są w każdym przypadku te same.
XML pozwala również na wykorzystanie wielu namespaces (multiple
namespaces) w jednym dokumencie. W standardowym dokumencie HTML
możemy wykorzystać zalety prezentacji XHTML i użyć MATH Namespace do
wyświetlania znaczników związanych z zagadnieniami matematycznymi.
Przykład użycia:
00
0
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
1
2
<html xmlns="http://www.w3.org/HTML/1998/html4"
xmlns:xdc="http://www.Kruszon.w.pl/books">
3
4
5
6
7
8
<head>
<title>Przeglad ksiazek</title>
</head>
<:body>
<xdc:bookreview>
<xdc:title>XML: A Primer</xdc:title>
<table>
<tr
align="center">
<td>Autor</td><td>Cena</td>
<td>Strony</td><td>Data</td></tr>
<tr align="left">
<td><xdc:author> Adam Mickieiwcz
</xdc:author></td>
<td><xdc:price> 70
</xdc:price></td>
<td><xdc:pages> 300
</xdc:pages></td>
<td><xdc:date>
2001/02
</xdc:date></td>
</tr>
</table>
</xdc:bookreview>
9
10
Poniżej
zamieszczam
opis
przykładowego dokumentu.
poszczególnych
ustępów
powyższego
00 <?xml version="1.0" encoding="UTF-8"?>
Taka deklaracja jest wymagana jedynie w przypadku, gdy dekodowanie
znaków (character encoding) zawartych w dokumencie różni się od
standardowego UTF-8 lub UTF-16, które są domyślne.
0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1transitional.dtd" >
Deklaracja !DOCTYPE w górnej części dokumentu jest to Public Text Identifier
(PTI), natomiast część zawarta w cudzysłowie jest to Formal Public Identifier
(FPI). Powinien pojawić się na samym początku dokumentu, aby
przyporządkować go do określonego DTD.
1 <html xmlns="http://www.w3.org/HTML/1998/html4"
2
xmlns:xdc="http://www.kruszon.w.pl/books">
W celu zamieszczenia jednego lub wielu namespace należy dodać jeden lub
więcej atrybutów namespace xmlns w znaczniku <html>. W tym przykładzie
pierwsza część namespace nie posiada prefiksu podczas gdy druga część ma
prefiks xdc. Wszystkie części nie posiadające prefiksu są uważane za
namespace http://www.w3.org/HTML/1998/htm14. Elementy z prefiksem
xdc są skojarzone z http://www.kruszon.w.pl/books.
Prefiks nie oznacza nic ponadto, iż jest tylko skrótem do pełnej nazwy
namespace. Nieco mylące jest to, że są to adresy URL i mogłoby się
wydawać, że muszą na coś wskazywać. Otóż nie. Są to tylko nazwy i nie jest
ważne na co wskazują ich adresy sieciowe. Powodem dla którego W3C
zdecydowało się użyć URL jako nazw dla namespaces jest fakt, iż zawierają
one nazwy domenowe np. www.xml.com, które obowiązują w całym
Internecie i są unikalne na skalę światową.
Oczywistym pytaniem jest: na cholerę jest nam to potrzebne? Po prostu
namespace jest stworzone aby usprawnić pracę ludziom tworzącym strony
internetowe. Przykładowo wyobraźmy sobie, że jesteśmy programistami
pracującymi dla kruszon.w.pl i mamy za zadanie napisać program
przeznaczony do przeglądania książek oferowanych przez DobraKsiazka.pl i
mający przekazywać odpowiednie ich ceny. Problem w tym, iż zawartość
dokumentów z DobraKsiazka.pl jest przemieszana ze znacznikami HTML i
musimy być pewni czy mamy do czynienia z tytułem książki czy np. z
tytułem strony HTML. Najlepszym wyjściem z tej sytuacji jest użycie
namespace http://www.dobraksiazka.pl/books.
7 <xdc:bookreview>
Prefiks xdr jest skojarzony z http://www.kruszon.w.pl/books natomiast
bookreview jest znacznikiem wewnątrz namespace.
8 <xdc:title>XML: A Primer</xdc:title>
Namespace xdr ma swój własny znacznik <title> poza standardowym
<title> HTML. Znacznik <xdr:title> oznacza początek tytułu książki, a
</xdr:title> jej koniec.
9 <td><xdc:author>
Simon St. Laurent
</xdc:author></td>
Namespace xdr ma więcej swoich własnych znaczników takich jak np.
<xdr:author>,
<xdr:price>,
<xdr:page>, <xdr:date> razem z
odpowiadającymi im znacznikami zamykającymi.
10
</xdc:bookreview>
Ten znacznik oznacza zamknięcie bookreview.
Zakończenie.
Wydaje mi się, że wystarczającym stopniu przybliżyłem czytelnikowi XHTML
aby uzyskać pozytywną ocenę z przedmiotu „Witryny i portale internetowe”.
Wszystkie materiały pozyskałem z Internetu i specyfikacji XHTML. Szerokie
fragmenty dokumentu pochodzą z anglojęzycznego dokumentu autorstwa
Riwan Dar z firmy Cyberplex (CX). Obok polskich pojęć zamieściłem także
oryginały zdając sobie sprawę z niedoskonałości własnego angielskiego, a
ponadto uważam że angielskie słowa czasami lepiej opisują przekazywaną
treść niż ich polskie odpowiedniki.