You are on page 1of 17

IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE

HTML i XHTML.
wiczenia praktyczne
Autor: Bartosz Danowski
ISBN: 83-246-0568-1
Format: A5, stron: okoo 170

ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Posiadanie wasnej strony WWW przestao by czym niezwykym. Mechanizmy


oferowane przez wikszych dostawcw usug internetowych pozwalaj na jej
stworzenie bez znajomoci jzyka HTML. Wystarczy wybra odpowiedni szablon,
doda do niego tre oraz grafik i gotowe. Jednak takie rozwizanie zdecydowanie
ogranicza moliwoci twrcze i nie gwarantuje, e strona bdzie zapada w pami
odwiedzajcym j osobom. Poznanie jzyka HTML i moliwoci oferowanych przez
technologi CSS sprawi, e Twoja strona bdzie si wyrnia na tle innych nadasz jej
indywidualny styl, a dodatkowo samodzielne stworzenie wasnej witryny WWW da Ci
ogromn satysfakcj.
Dziki ksice HTML i XHTML. wiczenie praktyczne poznasz podstawowy budulec
stron WWW jzyk HTML i jego wersj rozwojow, nazywan XHTML. Dowiesz si,
z jakich elementw skada si kod strony WWW, oraz nauczysz si korzysta ze
znacznikw w celu rozmieszczenia elementw tekstowych i graficznych na stronie.
Przeczytasz te o kaskadowych arkuszach stylw poznasz sposoby ich definiowania
i przypisywania elementom strony.
Niezbdne narzdzia webmastera
Definiowanie strony kodowej, sw kluczowych i opisu strony
Formatowanie tekstu, list, tabel i czy
Tworzenie formularzy
Wstawianie na stron elementw graficznych
Definiowanie stylw dla tekstu
Testowanie witryny w rnych przegldarkach
Przesta by biernym uytkownikiem sieci. Stwrz wasn stron WWW

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Wstp
Rozdzia 1. Wprowadzenie
Podstawowe rnice pomidzy HTML a XHTML
Potrzebne narzdzia edytory, programy graficzne
i przegldarki

Rozdzia 2. Podstawy
Elementy podstawowe
Nagwek dokumentu
Ciao dokumentu
Uwagi kocowe

5
7
9
11

19
19
24
32
33

Rozdzia 3. Elementy jzykw XHTML i HTML

35

Komentarze
Tekst
Listy
Hipercza
Elementy graficzne
Tabele
Formularze
Ramki
Uwagi kocowe

35
36
44
47
54
59
68
77
82

HTML i XHTML. wiczenia praktyczne

Rozdzia 4. Kaskadowe arkusze stylw


Instalacja
Wprowadzenie
Style w praktyce
Wybrane waciwoci tekstu
Wybrane waciwoci czcionki
Wybrane waciwoci list
Wybrane waciwoci koloru i ta
Wybrane waciwoci marginesw
Wybrane waciwoci obramowania
Wymiarowanie elementw
Wybrane waciwoci pozycjonowania elementw

Rozdzia 5. Praktyczne projekty


Strona ksiki

Rozdzia 6. Testowanie

83
83
84
95
96
101
106
108
111
113
116
118

123
123

137

Poprawno wywietlania
Zgodno ze specyfikacj

137
138

Podsumowanie

143

Dodatek

145

W trakcie pracy nad duymi dokumentami stosuj komentarze.


S bardzo przydatne, zwaszcza gdy nad jedn stron pracuje
kilku projektantw. Pozwoli to unikn zbdnego zamieszania.
Komentarze bardzo uatwiaj poruszanie si po samym kodzie. Do
umieszczenia komentarza suy:
<!--Tu znajduje si komentarz do naszej strony-->

Komentarz nie ma wpywu na wywietlany dokument, a jego zawarto jest zwyczajnie ignorowana przez kad przegldark.
Unikaj stosowania zbyt rozbudowanych komentarzy, gdy niepotrzebnie
zwiksza to rozmiar dokumentu, ktry musi zosta pobrany przez
przegldark. Poza tym zbyt dua liczba komentarzy oraz rozbudowana
tre mog zosta uznane przez wyszukiwarki internetowe za spam
prb oszustwa co zazwyczaj owocuje usuniciem witryny z indeksu.

36

HTML i XHTML. wiczenia praktyczne

Do elementw odpowiedzialnych za prezentacj tekstu w jzykach


XHTML i HTML moemy zaliczy nagwki, akapity, cytaty, indeksy
grne i dolne, znaczniki amania wiersza, poziomie linie oraz znacznik
<div></div>. Dalej przyjrzymy si konstrukcji kadego z tych elementw. Pamitaj, e wszystkie elementy musz si znajdowa wewntrz
znacznika <body></body>.
Zgodnie ze specyfikacj XHTML oraz HTML 4.01 znaczniki opisane
poniej su jedynie do nadania poszczeglnym elementom okrelonej
formy. Natomiast dokadne okrelenie struktury takiego elementu,
np. koloru, wyrwnania czy czcionki, zostao oddzielone od jzyka
XHTML/HTML i weszo w skad kaskadowych arkuszy stylw.

Nagwki
Specyfikacja jzykw XHTML i HTML przewiduje moliwo utworzenia nagwkw o szeciu zrnicowanych rozmiarach. Oto oglny
przepis na nagwek:
<hx>Nagwek stopnia X</hx>

Za pomoc litery X oznaczyem stopie nagwka. W praktyce w to


miejsce wstawiamy cyfry z przedziau od 1 do 6. Wbrew pozorom
znacznik <h1></h1> jest najwikszym nagwkiem, a <h<></h<> najmniejszym. Przykad nagwka znajduje si poniej.
<h1>Nagwek
<h2>Nagwek
<h3>Nagwek
<h4>Nagwek
<h5>Nagwek
<h<>Nagwek

stopnia
stopnia
stopnia
stopnia
stopnia
stopnia

pierwszego</h1>
drugiego</h2>
trzeciego</h3>
czwartego</h4>
pitego</h5>
szstego</h<>

Natomiast na rysunku 3.1 wida wszystkie sze stopni nagwkw.

Rozdzia 3. Elementy jzykw XHTML i HTML

37

Rysunek 3.1.
Porwnanie
rozmiarw
wszystkich
szeciu stopni
nagwkw
od H1 do H6

W I C Z E N I E

3.1

Tworzenie wasnych nagwkw

Otwrz uprzednio przygotowany plik o nazwie szablon.html i w treci


dokumentu umie nagwki od H1 do H6. Nastpnie cao zapisz
do pliku pod nazw naglowki.html. Otwrz plik naglowki.html w swojej przegldarce i sprawd, czy wszystko dziaa poprawnie.
Jeeli masz problem z samodzielnym wykonaniem tego wiczenia,
przepisz przykad zawarty w tekcie powyej.

Akapit
Jzyk XHTML i HTML umoliwia grupowanie tekstu w akapity. Tekst
znajdujcy si w akapicie automatycznie dopasowuje si do szerokoci okna przegldarki lub jak kto woli rozdzielczoci. Dlatego na
jednym komputerze akapit moe mie trzy wiersze tekstu, a na innym
mog to by zaledwie dwa wiersze.
Za tworzenie akapitu odpowiada znacznik <p></p>, ktry zawsze wystpuje z elementem zamykajcym.
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc in quam.
In quam lorem, convallis convallis, fermentum et, scelerisque interdum,
diam. Proin lobortis mi porta libero. Aliquam erat volutpat. Vivamus
aliquam, sem in mollis feugiat, nisi ligula mollis erat, sed lobortis
ligula lectus sagittis pede. Phasellus id nibh eget magna egestas lobortis.
In interdum, turpis eget sagittis eleifend, erat nisl varius quam, ut
ultricies nunc sem id lacus. Fusce ultricies, ligula sit amet pharetra

38

HTML i XHTML. wiczenia praktyczne


egestas, quam ligula nonummy pede, ac viverra libero ligula sit amet
urna. Praesent sed turpis non massa imperdiet placerat. Etiam tincidunt,
sapien non aliquet pellentesque, odio leo volutpat erat, sed facilisis
nisl lorem id libero. nonec ac nunc. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Proin dictum.
Curabitur sem. Sed at felis. Ut eu lacus. Maecenas nisl mauris, tempus
iaculis, posuere quis, tristique eget, erat.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Morbi blandit. Etiam mattis pede at lacus. Aliquam
tincidunt. Nullam facilisis. Etiam quis nulla. nonec sollicitudin. Fusce
nisi nulla, vestibulum non, pellentesque eget, ullamcorper vel, odio.
Aliquam egestas rutrum libero. nonec placerat, nisl eget egestas tincidunt,
elit augue rhoncus elit, sed feugiat elit enim at libero. Proin egestas
sapien sed nulla. Sed a erat sit amet arcu semper aliquam.
</p>

Strona moe zawiera dowoln liczb akapitw, a kady z nich jest


oddzielony od pozostaych pustym wierszem (rysunek 3.2). Przerwa ta
jest domylnie wstawiana przez przegldarki, a do jej kontroli musisz
uy kaskadowych arkuszy stylw.

Rysunek 3.2. Przykad kilku akapitw na jednej stronie

Akapit w jzyku XHTML i HTML domylnie nie ma wcicia pierwszego wiersza, charakterystycznego dla niektrych dokumentw drukowanych, co nie oznacza, e takiego efektu nie da si wprowadzi na
stronie WWW. Wymaga to uycia kaskadowych arkuszy stylw, ktre
opisaem w dalszej czci niniejszych wicze.

Rozdzia 3. Elementy jzykw XHTML i HTML

39

W I C Z E N I E

3.2

Tworzenie akapitw

Otwrz uprzednio przygotowany plik o nazwie szablon.html i w treci


dokumentu umie trzy akapity tekstu. Nastpnie cao zapisz do
pliku pod nazw akapity.html. Otwrz plik akapity.html w swojej
przegldarce i sprawd, czy wszystko dziaa poprawnie.
Jeeli masz problem z samodzielnym wykonaniem tego wiczenia,
przepisz przykad zawarty w tekcie powyej.

Cytaty
Jeeli chcesz zacytowa wikszy fragment tekstu w kodzie strony,
musisz skorzysta ze znacznika <blockquote></blockquote>. Konstrukcja
tego elementu jest nastpujca:
<blockquote>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Morbi blandit. Etiam mattis pede at lacus. Aliquam
tincidunt. Nullam facilisis. Etiam quis nulla. nonec sollicitudin.
Fusce nisi nulla, vestibulum non, pellentesque eget, ullamcorper vel,
odio. Aliquam egestas rutrum libero. nonec placerat, nisl eget egestas
tincidunt, elit augue rhoncus elit, sed feugiat elit enim at libero.
Proin egestas sapien sed nulla. Sed a erat sit amet arcu semper aliquam.
</blockquote>

Jak zapewne wiesz, cytowa moemy rwnie wewntrz bloku tekstu.


Aby skorzysta z tej moliwoci na stronie WWW, musimy sign
po znacznik <q></q>.
<p>
Autor ksiki napisa: <q>Specyfikacja HTML q>Sp cyyiieca fcTMa c.a1ie
eceMe1 u cy s Tuk uTy jiyka, cyyajc gc . Tce kaskayc.ych aTkusiy
s yc.</q>, ale nie mia do koca racji, gdy uwaam, e
</p>

Na rysunku 3.3 przedstawiem efekt dziaania znacznikw odpowiedzialnych za cytowanie. Aby dodatkowo wyrni cytowany tekst,
zastosowaem pochylon i pogrubion czcionk. Formatowanie to zostao nadane przeze mnie rcznie i domylnie nie wystpuje w przypadku zastosowania samych znacznikw.

40

HTML i XHTML. wiczenia praktyczne

Rysunek 3.3. Przykad dziaania cytatw

Tekst cytowany za pomoc znacznika <blockquote></blockquote> jest


nieznacznie wcity wzgldem pozostaych akapitw na stronie. Natomiast element cytowany wewntrz bloku tekstu za pomoc znacznikw <q></q> zosta zamknity w cudzysw.
W I C Z E N I E

3.3

Cytowanie tekstu

Otwrz uprzednio przygotowany plik o nazwie szablon.html i w treci


dokumentu umie trzy akapity tekstu. Pierwszy akapit pozostaw bez
zmian. Drugi przekszta na cytat. Natomiast wewntrz trzeciego akapitu wydziel fragment tekstu jako krtki cytat. Cao zapisz na dysku
w pliku o nazwie cytaty.html. Otwrz gotowy plik w swojej przegldarce i sprawd, czy wszystko dziaa poprawnie.
Jeeli masz problem z samodzielnym wykonaniem tego wiczenia,
przepisz przykad zawarty w tekcie powyej.

Indeks grny i dolny


Korzystajc z kolejnych znacznikw jzyka XHTML i HTML, moemy
wymusi prezentacj fragmentu tekstu jako indeksu grnego lub dolnego. Niezbdne znaczniki to <sub></sub> oraz <sup></sup>.
Indeks grny
<p>E=mc<sup>2</sup></p>

Rozdzia 3. Elementy jzykw XHTML i HTML

41

Indeks dolny
<p>E=mc<sub>2</sub></p>

Rysunek 3.4 przedstawia efekt dziaania powyszego przykadu.


Rysunek 3.4.
Przykad dziaania
indeksu grnego
i dolnego
W I C Z E N I E

3.4

Indeksy grne i dolne

Otwrz uprzednio przygotowany plik o nazwie szablon.html i w treci dokumentu umie fragment tekstu wykorzystujcy indeks grny
i dolny. Cao zapisz na dysku w pliku o nazwie indeksy.html. Otwrz
gotowy plik w swojej przegldarce i sprawd, czy wszystko dziaa poprawnie.
Jeeli masz problem z samodzielnym wykonaniem tego wiczenia,
przepisz przykad zawarty w tekcie powyej.

amanie wierszy
Przy okazji prezentacji znacznika odpowiedzialnego za definiowanie
akapitw wspomniaem, e ich zawarto jest automatycznie dopasowywana do rozdzielczoci ekranu. Innymi sowy, przegldarka sama
decyduje, kiedy zama dan lini. Dziaanie takie jest przydatne, ale
czasami moe utrudni prac twrcy witryny zawierajcej wiksz
ilo tekstu. Na szczcie w specyfikacji jzykw XHTML i HTML
znajdziemy przydatny znacznik, ktrego celem jest bezwzgldne wymuszenie zamania linii. Mam tutaj na myli znacznik <br />.
Znacznik <br> domylnie nie ma elementu zamykajcego. W przypadku
strony zgodnej z jzykiem HTML nie stanowi to najmniejszego problemu.
Natomiast w przypadku gdy korzystasz z jzyka XHTML, musisz omawiany
znacznik domkn, wstawiajc na kocu /: <br />.
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc in quam.
In quam lorem, convallis convallis, fermentum et, scelerisque interdum,
diam. Proin lobortis mi porta libero. Aliquam erat volutpat. Vivamus

42

HTML i XHTML. wiczenia praktyczne


aliquam, sem in mollis feugiat, nisi ligula mollis erat, sed lobortis
ligula lectus sagittis pede.<bT />Phasellus id nibh eget magna egestas
lobortis. In interdum, turpis eget sagittis eleifend, erat nisl varius
quam, ut ultricies nunc sem id lacus. Fusce ultricies, ligula sit amet
pharetra egestas, quam ligula nonummy pede, ac viverra libero ligula sit
amet urna. Praesent sed turpis non massa imperdiet placerat.<bT />Etiam
tincidunt, sapien non aliquet pellentesque, odio leo volutpat erat, sed
facilisis nisl lorem id libero. nonec ac nunc. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Proin
dictum. Curabitur sem. Sed at felis. Ut eu lacus. Maecenas nisl mauris,
tempus iaculis, posuere quis, tristique eget, erat.
</p>

Na rysunku 3.5 wida przykad akapitu, w ktrym w dwch miejscach


wymusiem przeamanie wiersza. Ikony symbolizujce palec wskazujcy wyrniaj miejsca wstawienia znacznika <br />.
Rysunek 3.5.
Przykad akapitu,
w ktrym
wymuszono
zamanie wiersza
W I C Z E N I E

3.5

amanie tekstu

Otwrz uprzednio przygotowany plik o nazwie szablon.html i w treci


dokumentu umie jeden akapit. Nastpnie we wntrzu tekstu dodaj
jeden lub dwa znaczniki wymuszajce zamanie linii. Cao zapisz
na dysku w pliku o nazwie lamaniewiersza.html. Otwrz gotowy plik
w swojej przegldarce i sprawd, czy wszystko dziaa poprawnie.
Jeeli masz problem z samodzielnym wykonaniem tego wiczenia,
przepisz przykad zawarty w tekcie powyej.

Wyrnianie tekstu
Specyfikacja jzykw XHTML i HTML przewiduje kilka znacznikw,
za pomoc ktrych moemy wyrni fragment tekstu lub pojedyncze
sowo czy liter.
Aby pogrubi tekst, musisz skorzysta ze znacznika <strong></strong>.
<p>Wydawnictwo <s Tc1g>Helic1</s Tc1g></p>

Rozdzia 3. Elementy jzykw XHTML i HTML

43

Aby skorzysta z tekstu pochyego (kursywy), musisz uy znacznika


<em></em>.
<p>Wydawnictwo <eM>Helic1</eM></p>

Aby przedstawi fragment tekstu np. listing kodu programu za


pomoc czcionki o staej szerokoci, uyj znacznika <code></code>.
<p>Wydawnictwo <ccye>Helic1</ccye></p>

Na rysunku 3.6 przedstawiem przykad wyrnienia fragmentu tekstu.


Za kadym razem obiektem dziaania byo sowo Helion.
Rysunek 3.6.
Przykad
wyrnionego
sowa

W I C Z E N I E

3.6

Wyrnianie tekstu

Otwrz uprzednio przygotowany plik o nazwie szablon.html i w treci


dokumentu umie jeden akapit. Nastpnie we wntrzu tekstu dodaj
znaczniki wymuszajce formatowanie fragmentw tekstu (pogrubienie, pochylenie i uycie czcionki o staej szerokoci). Cao zapisz na
dysku w pliku o nazwie wyroznianietekstu.html. Otwrz gotowy plik
w swojej przegldarce i sprawd, czy wszystko dziaa poprawnie.
Jeeli masz problem z samodzielnym wykonaniem tego wiczenia,
przepisz przykad zawarty w tekcie powyej.

Twarda spacja
Jeeli w bloku tekstu lub nagwku umiecisz dodatkowe znaki spacji
za pomoc klawiatury i klawisza spacji, to przegldarka automatycznie
je zignoruje i wywietli tylko jeden znak przerwy.
<h1>Nagwek stopnia

pierwszego</h1>

44

HTML i XHTML. wiczenia praktyczne

Zgodnie z tym, co napisaem, podany przykad, pomimo e zawiera


kilka dodatkowych spacji, bdzie wyglda dokadnie tak samo jak nagwek widoczny dalej.
<h1>Nagwek stopnia pierwszego</h1>

Jeeli chcesz wymusi kilka dodatkowych spacji w tekcie, musisz do


kodu wstawi znak twardej spacji. W praktyce oznacza to skorzystanie z cigu znakw &nbsp;, popularnie zwanego encj.
<h1>Nagwek stopnia &1bsp;&1bsp;&1bsp;&1bsp;&1bsp; pierwszego</h1>

Pamitaj jednak o tym, e jedna spacja widoczna na ekranie to kilka


literek wpisanych w kod strony, co przy naduywaniu tego elementu
moe znacznie zwikszy rozmiar pliku strony. Dlatego znacznie lepszym rozwizaniem jest skorzystanie z moliwoci, jakie oferuj kaskadowe arkusze stylw.

Nastpnym elementem, z jakim moesz spotka si przy tworzeniu


stron WWW, s listy. Specyfikacja jzyka okrela trzy rodzaje list. S
to listy wypunktowane, numerowane oraz listy definicji. Oczywicie
mona si jeszcze spotka z podziaem na listy uporzdkowane (numerowane) oraz nieuporzdkowane (wypunktowane).

Lista wypunktowana
Do utworzenia listy wypunktowanej bdziemy potrzebowali kombinacji dwch znacznikw: <ul></ul> oraz <li></li>. Znacznik <ul></ul>
okrela ramy listy, natomiast <li></li> to kady podpunkt listy. W praktyce wyglda to mniej wicej tak:
<ul>
<li>Pierwsza pozycja listy wypunktowanej</li>
<li>nruga pozycja listy wypunktowanej</li>
<li>Trzecia pozycja listy wypunktowanej</li>
</ul>

W przypadku gdy tworzysz stron WWW zgodn z jzykiem HTML,


nie musisz zamyka znacznika <li>.

Rozdzia 3. Elementy jzykw XHTML i HTML

45

Przykad listy wypunktowanej jest widoczny na rysunku 3.7.


Rysunek 3.7.
Przykad list:
wypunktowanej,
numerowanej
i definicji

Lista numerowana
Drugi typ listy to lista numerowana, ktrej konstrukcja skada si ze
znacznikw <ol></ol> oraz <li></li>. Zasada jest dokadnie taka sama
jak w przypadku list wypunktowanych.
<ol>
<li>Pierwsza pozycja listy numerowanej</li>
<li>nruga pozycja listy numerowanej</li>
<li>Trzecia pozycja listy numerowanej</li>
</ol>

Przykad listy numerowanej jest widoczny na rysunku 3.7.

Lista definicji
Trzeci i ostatni typ listy to lista definicji. Ma bardzo podobn budow
do dwch wczeniej omawianych typw. Na list definicji skada si
grupa znacznikw: <dl></dl><dt></dt><dd></dd>.
<dl>
<dt>
<dd>
<dt>
<dd>

Sowo definiowane</dt>
opis sowa definiowanego</dd>
Kolejne sowo definiowane </dt>
opis kolejnego sowa definiowanego</dd>

46

HTML i XHTML. wiczenia praktyczne


<dt>
<dd>
<dt>
<dd>
</dl>

Jeszcze jedno sowo definiowane</dt>


opis nowego sowa definiowanego</dd>
Ostatnie sowo definiowane</dt>
opis ostatniego sowa definiowanego</dd>

Przykad listy definicji jest widoczny na rysunku 3.7.


W I C Z E N I E

3.7

Tworzenie prostych list

Otwrz uprzednio przygotowany plik o nazwie szablon.html. W treci


dokumentu umie trzy listy: wypunktowan, numerowan i definicji.
Poszczeglne listy rozdziel za pomoc nagwkw stopnia pierwszego z informacj na temat rodzaju listy. Cao zapisz na dysku w pliku o nazwie listy.html. Otwrz gotowy plik w swojej przegldarce
i sprawd, czy wszystko dziaa poprawnie.
Jeeli masz problem z samodzielnym wykonaniem tego wiczenia,
przepisz przykad zawarty w tekcie powyej.

Zagniedanie list
Na koniec zosta do omwienia jeszcze jeden ciekawy przypadek. Mam
tutaj na myli list, ktra zawiera podpunkty. Takie rozwizanie bardzo czsto spotykamy na co dzie i na pewno ju zastanawiae si,
czy nie da si w jaki sposb przenie go na stron WWW. Ot
odpowied jest bardzo prosta: jest to moliwe, a taka konstrukcja
wymaga zastosowania list zagniedonych. Zagniedanie polega na
umieszczeniu wewntrz jednego elementu innego znacznika, np. w licie umieszczamy jeszcze jedn list. Podczas zagniedania moemy
czy rne typy list, np. numerowan z wypunktowan. Odpowiedni przykad zamieszczam dalej, a efekt jego dziaania przedstawia rysunek 3.8.
<ol>
<li>Produkty mleczne
<ul>
<li>mleko 3,2</li>
<li>jogurt malinowy</li>
<li>mietanka do kawy</li>
</ul>
</li>

Rozdzia 3. Elementy jzykw XHTML i HTML

47

<li>Owoce
<ul>

</li>
</ul>
</li>
<li>Pieczywo
<ul>

</li>
</ol>

</ul>

<li>jabka</li>
<li>cytrusy
<ul>
<li>pomaracze</li>
<li>mandarynki</li>
</ul>
<li>brzoskwinie</li>

<li>chleb</li>
<li>buki</li>
<li>rogaliki</li>

Rysunek 3.8.
Przykad listy
zagniedonej

W I C Z E N I E

3.8

Tworzenie zagniedonych list

Otwrz uprzednio przygotowany plik o nazwie listy.html. W treci


dokumentu, bezporednio pod ju istniejcymi listami, dodaj kolejn
pozycj list zagniedon. Struktura i zawarto listy powinna by
taka jak na rysunku 3.8. Cao zapisz na dysku w tym samym pliku.
Otwrz gotowy plik w swojej przegldarce i sprawd, czy wszystko
dziaa poprawnie.

48

HTML i XHTML. wiczenia praktyczne

Jeeli masz problem z samodzielnym wykonaniem tego wiczenia,


przepisz przykad zawarty w tekcie powyej.

Hipercza s podstaw funkcjonowania stron WWW i caej sieci. Bez


hiperczy przegldanie stron byoby bardzo utrudnione i wymagaoby od odwiedzajcego znajomoci budowy danego serwisu WWW oraz
rcznego wpisywania odpowiednich adresw. Na szczcie mamy hipercza i w do prosty sposb moemy z nich korzysta. Jak na pewno zauwaye, hipercza odnosz si nie tylko do danego serwisu.
Bardzo czsto prowadz do innych serwisw, oddalonych od przegldanej witryny o tysice kilometrw, czsto umieszczonych na serwerach na innym kontynencie. Uycie hiperczy daje wrcz nieograniczone moliwoci, ktre poznamy w dalszej czci.

Proste hipercza
Budowa hipercza jest stosunkowo prosta i wyglda tak:
<a href="strona.html">Kliknij tu, by dowiedze si czego wicej
o mnie.</a>

Jak atwo wywnioskowa, znacznikiem odpowiedzialnym za odsyacze jest <a></a>, wzbogacony o pewne atrybuty. I tak dla odsyacza
takim obowizkowym atrybutem jest href="adres lub nazwa pliku",
okrelajcy, do jakiego dokumentu bd miejsca ma prowadzi nasz
odnonik. Ma on wic posta:
<a href="nazwa_pliku.html">
<a href="http://danowski.pl">
<a href="http://danowski.pl/nazwa_pliku.html">

To tylko pierwsza cz odsyacza, informujca, dokd mamy si przenie. Teraz musimy opisa nasz odsyacz tak, by by widoczny i dostpny ze strony:
<a href="http://www.helion.pl">Strona Wydawnictwa HELION</a>

Oczywicie musimy pamita o znaczniku zamykajcym </a>, gdy


bez niego opis naszego odsyacza bdzie nieskoczenie dugi.

You might also like