IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Head First HTML with CSS

& XHTML. Edycja polska
Autorzy: Eric Freeman, Elisabeth Freeman
Tumaczenie: Piotr Rajca
ISBN: 83-246-0427-8
Tytu oryginau: Head First HTML with CSS & XHTML
Format: 200234, stron: 684

Poznaj w niekonwencjonalny sposb zasady tworzenia stron WWW

Wykorzystaj najnowsze standardy jzyka HTML
Zastosuj style do zdefiniowania wygldu strony
Opracuj formularze i mechanizmy nawigacyjne
Jzyk HTML stale ewoluuje. Od momentu swojego powstania przeszed dug drog.
Pocztkowo by to zestaw kilku znacznikw sucych do formatowania tekstw
naukowych, publikowanych w sieci bdcej zalkiem internetu. Obecnie technologia ta
pozwala na niemal dowolne ukadanie elementw tekstowych i graficznych na stronach
WWW wywietlanych w przegldarkach internetowych. Wspczesny HTML to nie tylko
znaczniki, ale take style uniwersalne rozwizanie umoliwiajce kontrolowanie
wygldu strony. Zbudowanie nowoczesnej i szybko adujcej si witryny WWW
wymaga opanowania tych elementw. Przeraa Ci to? Widzisz ju w mylach setki linii
przykadowego kodu, dziesitki definicji i diagramw? Niepotrzebnie.
Dziki ksice Head First HTML with CSS & XHTML. Edycja polska poznasz
najnowsze standardy tworzenia witryn WWW w sposb gwarantujcy szybkie
i bezstresowe przyswojenie wiedzy. Jej autorzy, wykorzystujc najnowsze osignicia
teorii uczenia, przedstawiaj wszystkie zagadnienia niezbdne do rozpoczcia
projektowania i tworzenia serwisw WWW z wykorzystaniem jzyka HTML oraz
kaskadowych arkuszy stylw CSS. Poznasz znaczniki HTML, zasady umieszczania
na stronach WWW elementw graficznych oraz sposoby formatowania tekstw za
pomoc stylw. Jednak, co najwaniejsze, nauczysz si stosowa t wiedz w praktyce.
Struktura dokumentu HTML
Znaczniki formatujce
cza do innych stron WWW
Wstawianie elementw graficznych
Zgodno ze standardami
Formatowanie za pomoc stylw CSS
Tworzenie formularzy
Przekonaj si, e nawet przy poznawaniu skomplikowanych technologii mona si
wietnie bawi.

Spis treci (skrcony)

Wprowadzenie

21

Jzyk Sieci. Poznajemy HTML

33

Poznajemy HT z nazwy jzyka HTML. Dokadniejsze poznanie hipertekstu

73

Konstrukcja stron WWW. Elementy konstrukcyjne

107

Wycieczka do Webowic. Nawizujemy poczenie

153

Poznajemy media. Umieszczanie obrazw na stronach WWW

193

Powany HTML. Standardy, zgodno z nimi i cay ten kram

249

Dodanie X do HTML. Zaczynamy stosowa XHTML

291

Delikatna stylizacja. Poznajemy CSS

311

Poszerzamy swoje sownictwo. Style czcionek i kolorw

365

10

Bliskie kontakty z elementami. Model blokowy

407

11

Zaawansowane sposoby konstruowania stron WWW. Elementy div i span

449

12

Rozmieszczanie elementw. Ukad i pozycjonowanie

507

13

Mania tabel. Tabele i listy

567

14

W stron interaktywnoci. Formularze XHTML

607

Dodatek. Dziesi najwaniejszych zagadnie (ktrych nie opisalimy)

655

Spis treci (na serio)

Wprowadzenie
Twj mzg koncentruje si na kodzie HTML i CSS. Podczas gdy Ty starasz si czego nauczy,
Twj mzg robi Ci przysug i dba o to, aby przez przypadek nie zapamita zdobywanych informacji. Twj
mzg myli sobie: Lepiej zostawi troch miejsca na bardziej istotne informacje, na przykad: jakich zwierzt
unika albo czy jedenie na snowboardzie nago jest dobrym pomysem. A zatem, w jaki sposb moesz
oszuka swj mzg i przekona go, e Twoje ycie zaley od znajomoci HTML-a i CSS?
Dla kogo jest ta ksika?

22

Wiemy, co sobie myli Twj mzg

23

Metapoznanie

25

Zmu swj mzg do posuszestwa

27

Zesp recenzentw

30

Podzikowania

31

Spis treci

Poznajemy HTML

Jedyn przeszkod na drodze do zaznaczenia Twojej obecnoci w Sieci jest

konieczno poznania nowego argonu: HTML-a (to skrt od sw: HyperText Markup
Language jzyk znacznikw hipertekstu). A zatem przygotuj si na kilka lekcji nowego jzyka.
Po przeczytaniu tego rozdziau nie tylko bdziesz rozrnia niektre proste elementy HTML,
lecz take nabdziesz odpowiedniego stylu. W kocu, po przeczytaniu caej ksiki, bdziesz
posugiwa si tym jzykiem w taki sposb, jakby cae ycie spdzi w Webowicach.

Bez stresu, ale kiedy

skoczysz, nasz stron
bd odwiedza tysice osb.
Dlatego nie tylko musi ona
by poprawna, lecz take
koniecznie musi wietnie
wyglda!

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite: nice
downbeat tune.
</p>
<p>
...

WWW zabia radio

34

Co robi serwer?

35

Oto co piszesz (kod HTML)

36

Co tworzy przegldarka

37

Twoja duga przerwa w kafeterii wiat Kaw

41

Tworzenie strony kafeterii

43

Tworzenie plikw HTML (Widnows)

44

W midzyczasie w kafeterii wiat Kaw

47

Otwieranie strony w przegldarce

49

Testowanie strony WWW

50

Znaczniki bez tajemnic

55

Poznajemy element style

59

Nadawanie stylu stronie kafeterii

60

Kto co robi?

62

Pogawdki przy kominku

64

Kluczowe zagadnienia

66

Rozwizania wicze

69

otr

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite: nice
downbeat tune.
</p>
<p>
...

ze bu

j plik

salon.html

Jzyk Sieci

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite: nice
downbeat tune.
</p>
<p>
...

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite: nice downbeat tune.
</p>
<p>
...

Znalazem go, trzymaj

Serwer WWW

Dokadniejsze poznanie hipertekstu

Poznajemy HT z nazwy jzyka HTML

Czy kto powiedzia hipertekst? A co to takiego? Ech to jedynie podstawa caej
WWW. W rozdziale 1. przyjrzelimy si nieco jzykowi HTML i przekonalimy si, e jest to jzyk
wykorzystujcy znaczniki (ML z nazwy HTML) do opisywania struktury stron WWW.
Teraz zajmiemy si moliwociami zwizanymi z pierwsz czci nazwy HTML HT,
czyli hipertekstem, ktry pozwoli nam uwolni si od ogranicze jednej strony i tworzy
poczenia z innymi stronami WWW. Jednoczenie poznamy nowy, bardzo potny element
<a> i dowiemy si, e bycie wzgldnym jest cakiem fajne. A zatem zapnij pasy
wanie zaczynamy poznawa hipertekst.
Salon Head First nowy i poprawiony

74

Tworzenie nowej strony salonu

76

Co zrobilimy?

78

Co robi przegldarka?

79

Atrybuty

83

Problemy techniczne

88

Planowanie cieek

90

Poprawianie bdnych adresw obrazw

96

Rozwizania wicze

102

Spis treci

Elementy konstrukcyjne

3
h1
p
h2

img

h2

h2

img

Konstrukcja stron WWW

Czy powiedziano mi, e ta ksika dotyczy tworzenia stron WWW?
Bez wtpienia nauczye si ju cakiem sporo; poznae: znaczniki, elementy, cza, cieki.
Niemniej jednak caa ta wiedza bdzie cakowicie nieprzydatna, jeli nie wykorzystasz jej do
tworzenia jakich oszaamiajcych stron WWW. W tym rozdziale mamy zamiar przedstawi Ci
proces tworzenia stron WWW: od pomysu, poprzez projekt, stworzenie podstaw, wpisanie
zawartoci strony, a do ostatecznych, drobnych modyfikacji zwizanych z dopracowywaniem
jej wygldu. Bdzie Ci przy tym potrzebny jedynie kask oraz pas na narzdzia, gdy pokaemy
Ci nowe narzdzia, ktre bez wtpienia stayby si chlub kadego majsterkowicza.

Z dziennika na stron WWW z prdkoci 20 km na godzin

109

Orientacyjny szkic projektu

110

Od szkicu do ukadu

111

Od ukadu do strony WWW

112

Testowanie strony WWW Antka

114

Poznajemy element <q>

116

Duuuuugie cytaty

120

Dodawanie elementu <blockquote>

121

Prawdziwe znaczenie zagadki zwizanej z elementami

<blockquote> i <q>

124

Oczywicie mona utworzy list, posugujc si elementami <p>

133

Tworzenie list HTML w dwch prostych krokach

134

Umieszczanie jednego elementu wewntrz innego nazywamy

zagniedaniem

139

Aby zrozumie zwizki wynikajce z zagniedania elementw,

narysuj odpowiedni szkic

140

Wykorzystanie zagniedania dla zapewnienia poprawnoci

znacznikw elementu

141

Wewntrzwierszowy czy blokowy?

143

Rozwizania wicze

149

Nawizujemy poczenie

Wycieczka do Webowic
Do serwowania stron WWW zdecydowanie najlepiej nadaje si Internet.
Do tej pory tworzye strony WWW, ktre byy przechowywane na Twoim lokalnym
komputerze. Podobnie tworzone cza take wskazyway na strony znajdujce si na Twoim
komputerze. Jednak teraz zmienimy t sytuacj. W tym rozdziale sprbujemy Ci zachci,
aby umieci swoje strony w Internecie, tak by Twoi przyjaciele, fani i klienci mogli je zobaczy.
Ujawnimy take tajemnice tworzenia czy do innych stron, amic kod: h, t, t, p, :, /, /, w, w,
w. A zatem spakuj swoje rzeczy nastpnym przystankiem s Webowice.

Umieszczanie stron kafeterii wiat Kaw (lub Twoich wasnych)

na WWW

154

Znajdowanie firmy hostingowej

155

W jaki sposb moesz zdoby wasn nazw domeny?

156

Wprowadzamy si

158

Umieszczanie plikw w katalogu gwnym

159

Wszystkie informacje o FTP, jakie mona zmieci

na dwch stronach

160

Wracamy do pracy

163

Ulica Gwna, URL

164

Czym jest protok HTTP?

165

Czym s cieki bezwzgldne?

166

Sposb dziaania stron domylnych

169

W jaki sposb tworzymy cza do innych witryn WWW?

172

cze do strony o kofeinie

173

Dopracowanie i wykoczenie strony

177

cza do konkretnych miejsc strony

179

Uycie elementu <a> do tworzenia punktw docelowych

180

Tworzenie czy do odnonikw

181

Wywietlanie cza w nowym oknie

185

Otwieranie nowych okien przy wykorzystaniu atrybutu target

186

Rozwizania wicze

191

Spis treci

Umieszczanie obrazw na stronach WWW

Tu wida wiele
pikseli, ktre
razem tworz
grn cz
prawego skrzyda
motyla.

Poznajemy media
Teraz prosimy o umiech. A w zasadzie umiechnij si i powiedz: gif,
jpg lub png bo to wanie bd Twoje ulubione formaty graficzne, przynajmniej
jeli chodzi o robienie obrazw na potrzeby stron WWW. W tym rozdziale dowiesz si
wszystkiego na temat umieszczania na stronach najczciej spotykanego typu plikw
multimedialnych obrazw. Czy masz jakie zdjcia cyfrowe, ktre musisz umieci na
swojej stronie? Nie ma problemu. Masz swoje logo, ktre te chciaby umieci na stronie?
Skonwertowae je do odpowiedniego formatu. Jednak zanim poznasz te wszystkie
informacje, powinnimy Ci chyba oficjalnie przedstawi element <img>, nieprawda? Zatem
przepraszamy, zachowalimy si niegrzecznie, ale nigdy nie pokazano nam, jak naley si
waciwie zachowa w takiej sytuacji. Aby naprawi nasz bd, zamiecimy w niniejszej
ksice cay rozdzia powicony wycznie elementowi <img>. Gdy skoczysz go czyta,
bdziesz zna wszelkie tajniki stosowania zarwno tego elementu, jak i wszystkich jego
atrybutw. Dodatkowo zobaczysz, jak ten niewielki element potrafi zmusi przegldark do
wykonania dodatkowej pracy i wywietlania obrazw.

A to jest
pojedynczy piksel.

Obraz wywietlany na
ekranie komputera skada
si z tysicy pikseli.

10

Jak przegldarki obsuguj obrazy

194

Sposb dziaania obrazw

197

A teraz oficjalna prezentacja: Panie i Panowie, oto element <img>

201

Zawsze podawaj tekst alternatywny

204

Tworzenie wietnej rozrywkowej witryny: mj iPod

206

O rany! Obraz jest o wiele za duy

209

Poprawa kodu HTML stron mj iPod

219

Przystosowanie strony do wykorzystania miniatur

223

Zmiana obrazw w cza

227

A zatem w jaki sposb mog stworzy cza bdce obrazami?

229

Jakiego formatu powinnimy uy?

234

By przezroczystym czy nie by przezroczystym? Oto jest pytanie

235

Chwila, ale jaki jest kolor ta strony?

237

Sprawdzenie logo po utworzeniu otoczki

238

Umieszczenie logo na stronie gwnej witryny

239

Rozwizania wicze

243

Standardy, zgodno z nimi i cay ten kram

Powany HTML
Co jeszcze naley wiedzie o jzyku HTML? Przebye ju cakiem spory odcinek
drogi wiodcej do biegego poznania jzyka HTML. Czy nie nadszed ju czas, by zaj si CSS
i dowiedzie si, jak sprawi, by cay ten mdy kod zmieni si w bajeczn stron? Zanim to
jednak zrobimy, musimy si upewni, e Twj kod HTML jest dobry (no wiesz, wymuskany,
dopracowany, perfekcyjny); a zrobimy to, podchodzc bardzo powanie do jego postaci
i sposobu, w jaki go piszesz. Nie zrozum nas le cay czas pisae doskonay kod HTML,
niemniej jednak istnieje jeszcze kilka rzeczy, ktre moesz zrobi, aby pomc przegldarce
w wywietlaniu stron oraz aby zabezpieczy si przed drobnymi bdami, ktre mog wkra
si do Twego kodu. A po co to wszystko? Ot chodzi o strony, ktre w bardziej jednolity
sposb bd wywietlane w wielu rnych przegldarkach (a nawet bd poprawnie
wywietlane na urzdzeniach przenonych i odczytywane przez przegldarki gosowe uywane
przez osoby majce problemy ze wzrokiem), strony, ktre bd szybciej wczytywane i ktre
zapewniaj poprawn wspprac ze stylami CSS. Przygotuj si, gdy w tym rozdziale zmienisz
si z HTML-owego majsterkowicza w prawdziwego profesjonalist.

1
1
L 4.0 HTML 4.0
er o
HTM
c
e
i
to
o
ic
a
w
w
r
o
o
to oerbm
rma InfW
to Web
Info Miasto Mias

atny

Bezp

Krtka historia jzyka HTML

252

Nie moemy pozwoli, by przegldarka pracowaa w trybie quirks!

255

Dodawanie definicji typu dokumentu

257

Poznajemy analizator poprawnoci W3C

260

Weryfikacja stron salonu Head First

261

Houston, mamy problem

262

Dodanie znacznika <meta> do okrelenia typu zawartoci strony

264

Uszczliwienie analizatora W3C dziki uyciu znacznika <meta>

265

Houston, mamy kolejny problem

267

Do trzech razy sztuka?

269

Zmiana definicji na cis

273

Czy weryfikacja strony zakoczya si pomylnie?

274

Rozwizanie problemu z zagniedaniem

276

Jeszcze jedna prba: czy jestemy dostatecznie cili

277

cisa wersja HTML-a 4.01 signij po informator

279

Pogawdki przy kominku

283

Archeologia HTML

286

Rozwizania wicze

289

11

Spis treci

Zaczynamy stosowa XHTML

Dodanie X do HTML
Mamy jeden straszny sekret, ktrego jeszcze Ci nie wyjawilimy. Wiemy,
e mylae, i kupujesz ksik dotyczc jzyka HTML, jednak tak naprawd jest to ksika
o zamaskowanym jzyku XHTML. W rzeczywistoci prawie cay czas uczylimy Ci wanie
XHTML-a. Zapewne zastanawiasz si, czym waciwie jest ten XHTML. C, przedstawiamy
zatem rozszerzalny HTML (ang. eXtensible HTML), ktry znany jest take jako XHTML
kolejne wcielenie jzyka HTML. Jest lepszy, fajniejszy, a nawet lepiej dostosowany
do zachowania zgodnoci z przegldarkami dziaajcymi na bardzo rnych urzdzeniach.
W tym krtkim rozdziale mamy zamiar przeprowadzi Ci od HTML-a do XHTML-a w trzech
prostych etapach. A zatem obr stron i ju znaczco zbliysz si do celu (a tym samym
take do CSS).

Lubi by na
bieco z najnowszymi
trendami i technologiami.
XHTML to przyszo, a poniewa
jest niezwykle podobny do
HTML-a, to dlaczego nie
miaabym skorzysta z tej
nowszej i lepszej
technologii?

Prowadzi
wasny blog.

12

Czym jest XML?

293

Co to wszystko ma wsplnego z HTML-em?

294

Dlaczego wic mgby chcie uywa XHTML-a?

296

Stosowanie XHTML-a 1.0 w wersji Strict

298

Trzy etapy przejcia ze cisej wersji jzyka HTML 4.01

do XHTML-a 1.0

300

Stara szkoa cisej wersji jzyka HTML 4.01

301

Nowy, poprawiony zapis stosowany w XHTML 1.0

301

Weryfikacja nie tylko dla HTML-a

303

Pogawdki przy kominku

306

HTML czy XHTML? Oto jest pytanie

308

Rozwizania wicze

309

Poznajemy CSS

Delikatna stylizacja
Mwiono mi, e to bdzie ksika o CSS. Jak do tej pory koncentrowae si na
poznawaniu jzyka XHTML uywanego do tworzenia struktury stron WWW. Jednak, jak
sam si moge przekona, pojcie stylu i gustu, jaki maj przegldarki, pozostawia wiele do
yczenia. Oczywicie moglibymy wezwa policj do spraw mody, ale nie musimy tego robi.
Dziki zastosowaniu CSS bdziemy mieli cakowit kontrol nad sposobem prezentacji strony,
a niejednokrotnie nie bdziemy nawet musieli wprowadza w tym celu jakichkolwiek zmian
w naszym kodzie XHTML. Czy to naprawd moe by a tak proste? C, bdziesz musia nauczy
si zupenie nowego jzyka; w kocu Webowice to miasto, w ktrym obowizuj dwa jzyki
urzdowe. Po przeczytaniu zamieszczonego w tym rozdziale samouczka do nauki jzyka CSS
bdziesz mg stan po dowolnej stronie ulicy Gwnej i swobodnie prowadzi konwersacj.

Zagadka
na pi
minut

Ju nie jeste w Kansas

312

Zasyszane na targu w Webowicach

314

Stosowanie CSS z jzykiem XHTML

315

Dodatkowo wywietlmy lini pod nagwkiem strony

321

Okrelanie drugiej reguy, dotyczcej wycznie elementu <h1>

322

Dodanie salonowego stylu do strony o drinkach oraz

sposobie dojazdu

329

czenie pliku salon.html z zewntrznym arkuszem stylw

331

Czas porozmawia o dziedziczeniu

337

Co si stanie, jeli przeniesiemy okrelenie czcionki do jakiego

elementu na wyszym poziomie hierarchii?

338

Przesanianie dziedziczenia

340

Tworzenie selektora klasy

344

Wicej informacji o selektorach klas

346

Najmniejszy i najszybszy przewodnik dotyczcy stosowania

stylw dostpny na wiecie

348

Kto dziedziczy?

352

Zapewnienie poprawnoci kodu CSS salonu Head First

355

Rozwizania wicze

362

html

body

head

meta

title

style

h1

h2

img

em

13

Spis treci

Style czcionek i kolorw

1
0

14

Twoje lekcje CSS przebiegaj sprawnie i mio. Opanowae ju podstawy CSS,

wiesz, jak tworzy reguy i okrela style elementw. Nadszed czas, aby rozszerzy swoje
sownictwo, a to oznacza poznanie nowych waciwoci i dowiedzenie si, do czego mona
ich uy. W tym rozdziale poznasz niektre spord najczciej uywanych waciwoci
okrelajcych sposb prezentacji tekstu. Do tego jednak bdzie Ci potrzebna znajomo
kilku zagadnie zwizanych z czcionkami i kolorami. Dowiesz si, e Twoje moliwoci nie
ograniczaj si do czcionek, ktre wszyscy powszechnie wykorzystuj, ani domylnych
wielkoci i kolorw znakw, jakie przegldarki uywaj do prezentowania tekstu akapitw
i nagwkw. Oprcz tego przekonasz si, e o kolorach mona si dowiedzie znacznie
wicej, ni mogoby si zdawa na pierwszy rzut oka.

A
B
10 11
9

3
2

Poszerzamy swoje sownictwo

78

C
12
D
13
E
14
15 F

Tekst i czcionki z wysokoci 10 km

366

Ale czym tak w zasadzie s rodziny czcionek?

368

Okrelanie rodziny czcionek w CSS

371

Odkurzamy dziennik Antka

372

W jaki sposb radzi sobie z faktem, e kady moe mie

inne czcionki?

375

Czyli w jaki sposb powinienem okrela wielkoci czcionek?

378

Wprowadmy zatem zmiany wielkoci czcionek na stronie

dziennika Antka

380

Modyfikacja gruboci czcionki

383

Nadawanie czcionkom odrobiny stylu

385

Zmiana postaci cytatw poprzez zastosowanie kursywy

386

W jaki sposb tworzone s kolory na stronach WWW?

388

W jaki sposb mona okrela kolory na stronach WWW?

Ile jest tych sposobw

391

Dwuminutowy przewodnik po kodach szesnastkowych

394

W jaki sposb mona okrela wartoci kolorw?

396

Wrmy do strony Antka

399

Wszystko, co chciaby wiedzie o waciwoci text-decoration

401

Usuwamy podkrelenie

402

Rozwizania wicze

404

Model blokowy

10

Bliskie kontakty z elementami

Aby konstruowa strony WWW na zaawansowanym poziomie, musisz
bardzo dobrze pozna materiay konstrukcyjne, jakimi dysponujesz. W tym
rozdziale dokadnie przyjrzymy si naszym materiaom konstrukcyjnym, czyli elementom
XHTML. Dokadnie zbadamy elementy blokowe oraz wewntrzwierszowe pod mikroskopem
i sprawdzimy, z czego si one skadaj. Przekonasz si take, w jaki sposb przy wykorzystaniu
CSS mona kontrolowa niemal wszystkie aspekty wygldu elementw. Ale to jeszcze
nie wszystko dowiesz si take, w jaki sposb mona przydziela elementom unikaln
tosamo. A jeli i to Ci nie wystarczy, to dowiesz si, w jakich sytuacjach i dlaczego mgby
uywa kilku rnych arkuszy stylw. Obr wic stron i zacznij poznawa najskrytsze
tajemnice elementw.

Aktualizacja strony salonu Head First

408

Zacznijmy od kilku prostych zmian

410

Sprawdzanie nowej wysokoci wierszy

412

Przygotowania do gruntownych modyfikacji

413

Dokadniejsza analiza modelu blokowego

414

Jak mona konfigurowa bloki elementw?

416

Tworzenie stylu okrelajcego posta akapitu gwarancji

421

Wypenienie, obramowanie oraz marginesy akapitu gwarancji

423

Dodanie wypenienia

423

A teraz dodajmy marginesy

424

Dodawanie obrazu ta

426

Poprawa obrazu ta

429

Jak doda wypenienie z lewej strony elementu?

430

Jak powikszy margines z prawej strony elementu?

431

Dwuminutowy przewodnik po obramowaniach

432

Okrelenie postaci obramowania i zakoczenie prac

434

Wywiad z klas HTML

436

Atrybut id

438

Zastosowanie identyfikatora na stronie salonu

440

Miksowanie arkuszy stylw

442

Stosowanie wielu rnych arkuszy stylw

443

Rozwizania wicze

448

15

Spis treci

Elementy div i span

11

16

Zaawansowane sposoby konstruowania stron WWW

Czas przygotowa si do tworzenia powanych konstrukcji. W tym rozdziale
przedstawimy dwa nowe elementy jzyka XHTML <div> oraz <span>. Jednak nie s
to zwyke ktowniki, to stalowe dwigary z prawdziwego zdarzenia. Posugujc si tymi
dwoma elementami, bdziesz tworzy powane konstrukcje wspomagajce, a kiedy ju
je umiecisz na stronie, to bdziesz mg okrela ich posta przy uyciu stylw na wiele
sposobw dajcych bardzo due moliwoci. Wczeniej nie moglimy raczej nic wymyli,
jednak zauwa, e Twj pas na narzdzia CSS powoli zaczyna si wypenia, a zatem nadszed
czas, by pokaza nowe rozwizania, ktre znacznie uproszcz okrelanie tych wszystkich
waciwoci. Oprcz tego zaprosilimy do niniejszego rozdziau kilkoro ciekawych goci, tak
zwane pseudoklasy, ktre pozwol Ci na tworzenie bardzo interesujcych selektorw.
(Jeli uwaasz, e sowo pseudoklasa mogoby by doskona nazw dla Twojej nastpnej
kapeli, to wiedz, e si spnie wyprzedzilimy Ci).

Dokadniejsza analiza kodu XHTML listy napojw

451

Zobaczmy, jak mona podzieli stron na logiczne sekcje

453

Dodawanie obramowania

460

Sprawdzenie obramowania

460

Dodawanie faktycznych stylw do sekcji napojw tygodnia

461

Plan gry

462

Okrelanie szerokoci sekcji napojw

462

Dodawanie podstawowych stylw do sekcji napojw

467

Potrzebujemy sposobu wybierania elementw podrzdnych

473

Zmiana kolorw nagwkw w sekcji napojw

475

Zmiana wysokoci wierszy

476

Czas, by pj na skrty

478

Trzy proste kroki dodawania elementw <span>

484

Element <a> oraz wszystkie jego osobowoci

488

W jaki sposb mona okrela styl elementw na podstawie ich stanu?

489

Stosowanie pseudoklas

491

Czy wzmianka o kaskadzie nie byaby na czasie?

493

Kaskada

495

Zapraszamy do gry: Jaki jest mj poziom precyzji?

496

Skadanie wszystkich elementw w jedn cao

497

Rozwizania wicze

504

Ukad i pozycjonowanie

12
h1
tekst

h2

tekst
tekst

Rozmieszczanie elementw
Czas nauczy Twoje elementy XHTML nowych sztuczek. Ju ani chwili duej
nie pozwolimy elementom XHTML siedzie na miejscu i leni si nadszed czas, by
w kocu si ruszyy i pomogy nam w tworzeniu stron, ktre maj jaki prawdziwy ukad.
Ale jak? No c ju dosy dobrze poznae strukturalne elementy <div> oraz <span>
i wiesz ju wszystko na temat modelu blokowego, nieprawda? Nadszed zatem czas, by
wykorzysta t ca wiedz do tworzenia ukadw stron. Nie obawiaj si nie bdziemy ju
wicej pisa o tach i kolorach czcionek, skoncentrujemy si na tworzeniu profesjonalnych,
wielokolumnowych ukadw stron. W tym rozdziale caa wiedza, jak do tej pory zdobye,
zacznie si ukada w jedn logiczn cao.

tekst

h2

span
em

p id=zdumiewajce
tekst
tekst

em
span

tekst

tekst
tekst
tekst
tekst

p
img

img

Odwieajce,
stae ukady CSS

img

img

Czy wykonae wiczenie Supermoc umysu?

508

Uyj rozkadu, Luke

509

A co z elementami wewntrzwierszowymi?

511

Jak to wszystko dziaa?

512

Jak stworzy pywajcy element?

515

Za kulisami na stronie salonu

517

Nowa wersja strony kafeterii wiat Kaw

519

Przenie pasek boczny tu poniej nagwka strony

524

Okrel szeroko paska i zmie go na element pywajcy

524

Rozwizanie problemu dwch kolumn

527

Okrelanie szerokoci marginesu gwnej sekcji strony

528

Wracamy do rozwizania problemu przesaniajcych si elementw

531

Z prawej mocno, z lewej swobodnie

534

Ukady elastyczne i stae

537

Jak dziaa pozycjonowanie bezwzgldne

540

Stosowanie pozycjonowania bezwzgldnego

543

Dobry kompromis pozwala na rozwizanie problemu stopki

547

Pozycjonowanie obrazu pucharu

549

Jak dziaa pozycjonowanie ustalone?

555

Zastosowanie ujemnej wartoci waciwoci left

557

Pozycjonowanie wzgldne

559

Dymy w kierunku trzech kolumn, a moe nawet dalej

561

Rozwizania wicze

564

17

Spis treci

Tabele i listy

13

18

Mania tabel
Jeli to wyglda jak tabela i mwi jak tabela Wczeniej czy pniej nadejdzie
ten moment, kiedy czowiek musi si zmierzy z przeraajcymi danymi tabelarycznymi.
Niezalenie od tego, czy bdzie to strona przedstawiajca zapasy magazynowe firmy, czy te
najnowszy katalog chiskich podrbek lalki Barbie (nie obawiaj si, nie zadenuncjujemy Ci),
to musisz by wiadom, i trzeba j sporzdzi w XHTML-u. Ale jak to zrobi? C, mamy dla
Ciebie propozycj: z zamwienie ju teraz, a my w jednym rozdziale ujawnimy wszystkie
sekrety, ktre pozwol Ci umieci Twoje dane bezporednio w licznej tabeli XHTML. Ale to
jeszcze nie wszystko: do kadego zamwienia dodajemy unikalny, a co waniejsze, darmowy
poradnik dotyczcy okrelania postaci tabel XHTML przy wykorzystaniu kaskadowych
arkuszy stylw. A jeli zamwienie zoysz natychmiast, to w ramach specjalnej nagrody
otrzymasz podobny poradnik dotyczcy okrelania postaci list XHTML. A zatem nie wahaj si
ani chwili! Zadzwo ju teraz!

Jak tworzy si tabele w jzyku XHTML?

569

Tworzenie tabeli przy uyciu jzyka XHTML

570

Jak to wywietla przegldarka

571

Analiza tabel

572

Dodawanie tytuu i podsumowania

575

Zanim zaczniemy okrela style, umiemy kod tabeli na stronie Antka

577

czenie podwjnych obramowa komrek

582

A moe by tak doda troch koloru?

584

Antek dokona bardzo interesujcego odkrycia

585

Kolejny rzut oka na tabel Antka

586

Jak stworzy komrk rozcigajc si na kilka wierszy?

587

Nowa, poprawiona tabela

589

Kopoty w raju?

590

Przesanianie stylw dla nagwkw zagniedonej tabeli

594

Ostatnie poprawki strony Antka

595

Rozwizania wicze

600

Formularze XHTML

14

W stron interaktywnoci
Jak do tej pory caa komunikacja pomidzy tworzonymi witrynami
a osobami, ktre je odwiedzay, odbywaa si w jednym kierunku: z serwera
do uytkownika. Jejku, czy nie byoby fajnie, gdyby uytkownik te mg nam co
powiedzie? Wanie tak moliwo daj nam formularze XHTML: kiedy ju umiecisz je na
stronach WWW (dodatkowo bdzie potrzebna take pomoc ze strony serwera),
to zapewni one moliwo zbierania opinii od uytkownikw ogldajcych witryn
rejestrowania zamwie przez Internet, wykonania kolejnego ruchu w internetowej grze czy
te gromadzenia gosw w ankiecie czaderski czy lamerski?. W tym rozdziale poznasz ca
druyn elementw XHTML, ktre su do tworzenia formularzy. Oprcz tego dowiesz si
nieco o tym, co w niewidoczny dla uytkownika sposb musi robi serwer, by obsugiwa
formularze. W kocu powicimy take nieco uwagi okrelaniu postaci formularzy przy uyciu
stylw (cho jest to nieco kontrowersyjne zagadnienie; przeczytaj, a dowiesz si dlaczego).

Jak dziaaj formularze?

608

Sposb dziaania formularzy w przegldarce

609

Jaki jest kod XHTML formularza?

610

Co tworzy przegldarka

611

Jak dziaa element <form>?

612

Przygotowania do stworzenia formularza Ziarnotronu

620

Dodawanie elementu <form>

621

Jak dziaaj nazwy elementw formularzy?

622

Wrmy do dodawania elementw <input> do kodu XHTML strony

624

Dodawanie kolejnych pl do formularza

625

Dodawanie elementu <select>

626

Dajemy klientom moliwo wyboru postaci dostarczonej kawy

628

Naciskanie przyciskw opcji

629

Dokaczanie formularza

630

Dodawanie pl wyboru oraz obszaru tekstowego

631

Przedstawienie dziaania metody GET

637

Z tabelami czy bez tabel? Oto jest pytanie

642

Umieszczanie elementw formularza w tabeli

643

Dopracowanie wygldu formularza i tabel przy uyciu stylw

646

Rozwizania wicze

652

19

Spis treci

Dodatek. Pozostaoci

15

Dziesi najwaniejszych zagadnie

(ktrych nie opisalimy)
Opisalimy bardzo wiele zagadnie i ju
niemal dotarlimy do koca niniejszej
ksiki. Bdziemy za Tob tskni, jednak zanim
pozwolimy Ci odej, chcielibymy mie poczucie, e
nie wypuszczamy Ci na szerokie wody WWW bez
dodatkowego przygotowania. Bez wtpienia nie moemy
umieci w tym, stosunkowo niewielkim, rozdziale
wszystkiego, co mogoby Ci si przyda. Tak naprawd
to pocztkowo umiecilimy tu wszystko, co powiniene
wiedzie o jzykach XHTML i CSS (i o czym nie pisalimy
w poprzednich rozdziaach), jednak musielimy zmniejszy
czcionk do wielkoci 0,00004 punktu. Wszystko si
zmiecio, ale nikt nie byby tego w stanie przeczyta.
Dlatego odrzucilimy wikszo z tych zagadnie
i pozostawilimy tu jedynie dziesi najwaniejszych.

Wicej informacji o selektorach

656

Ramki

658

Multimedia i Flash

659

Narzdzia do tworzenia stron WWW

660

Skrypty wykonywane w przegldarce

661

Skrypty wykonywane na serwerze

662

Modyfikacje pod ktem mechanizmw wyszukiwawczych

663

Wicej informacji na temat arkuszy stylw uywanych

do drukowania stron

665

Strony przeznaczone dla urzdze przenonych

665

Blogi

666

Skorowidz

20

667

Rozdzia 2. Dokadniejsze poznanie hipertekstu

Poznajemy HT z nazwy
jzyka HTML
Tak, to wanie ja.
Nazywaj mnie
Hiper Tadek.

Nie suchasz mnie.

Przyszam tu spotka si
z HiperTEXTem.

Czy kto powiedzia hipertekst? A co to takiego? Echto jedynie podstawa caej

WWW. W rozdziale 1. przyjrzelimy si nieco jzykowi HTML i przekonalimy si, e jest to jzyk
wykorzystujcy znaczniki (ML z nazwy HTML) do opisywania struktury stron WWW. Teraz
zajmiemy si moliwociami zwizanymi z pozosta czci nazwy HTML-a HT czyli
hipertekstem, ktry pozwoli nam uwolni si z ogranicze jednej strony i tworzy poczenia
z innymi stronami WWW. Jednoczenie poznamy nowy, bardzo potny element <a>
i dowiemy si, e bycie wzgldnym jest cakiem fajne. A zatem zapnij pasy wanie
zaczynamy poznawa hipertekst.

to jest nowy rozdzia

73

Poprawa strony salonu Head First

Salon Head First nowy i poprawiony

Czy pamitasz jeszcze stron salonu Head First? wietna strona, ale czy nie byoby
jeszcze lepiej, gdyby uytkownicy mogli przejrze list serwowanych napojw?
Co wicej, powinnimy zamieci informacje o sposobie dojazdu, tak by klienci mogli
do nas trafi.

Oto nowa
i poprawiona
strona.

na stron
przejcia pojw.
o
liw
o
m
ych na
i daje
cze drink pen list oferowan
prezentujc
Dodalimy
cza do dwch
nowych stron
jednej
z informacjami
o napojach,
a drugiej
z opisem
dojazdu.

cze z opisem dojazdu

prowadzi na stron
zawierajc szczegowy
opis dojazdu.

jakdojechac.html

74

Rozdzia 2

Dokadniejsze poznanie hipertekstu

Strona zawiera list

orzewiajcych i zdrow
napojw. Moe si skuych
jednego przed dalsz sisz na
lektur?

Tworzenie nowej, poprawionej

strony salonu Head First skada
si z trzech etapw
Sprbujmy przerobi oryginaln stron salonu
Head First i umieci na niej cza do dwch
nowych stron.

drinki.html

Pierwszy etap jest atwy, gdy sami

stworzylimy dla Ciebie
Gotowe
pliki jakdojechac.
CSS
html oraz drinki.
html. Znajdziesz je
w przykadach do ksiki,
w witrynie ftp.helion.pl/przyklady/hfhtcs.zip.

W ramach drugiego etapu zmodyfikujesz plik

salon.html, dodajc do niego cza do plikw
jakdojechac.html oraz drinki.html.

W kocu sprawdzisz strony, aby

przekona si, czy cza dziaaj zgodnie
z oczekiwaniami. Kiedy skoczysz,
przyjrzymy si dokadniej, jak to wszystko
dziaa.
A teraz przewr stron i zaczynamy

jeste tutaj!

75

Jak wygldaj pliki rdowe

Tworzenie nowej strony salonu

1

Pobierz pliki rdowe

Pobierz pliki rdowe przykadw z witryny ftp://ftp.helion.pl/przyklady/hfhtcs.zip.
Kiedy ju je pobierzesz i rozpakujesz, zajrzyj do katalogu rozdzial2\salon;
znajdziesz w nim pliki salon.html, drinki.html oraz jakdojechac.html
(oraz kilka plikw z obrazami).
ad First w swojej
Oto strona salonu He czy.
bez

i
tac
pos
obecnej

<html>
.
.
.
</html>

katalog
Tutaj znajdziesz dowymi.
r
mi
ka
pli
z
salon

salon.html

rozdzial2

<html>
.
.
.
</html>

drinki.html

salon
j
W tym katalogu znajdu
si wszystkie pliki
zwizane ze stronami
salonu Head First.

<html>
.
.
.
</html>

Dwa nowe pliki, ktre ju

za Ciebie utworzylimy.
Nie zwlekaj zajrzyj do
nich; wiesz ju wszystko,
co bdzie Ci potrzebne
do zrozumienia ich
zawartoci.

jakdojechac.html

zielony. jpg
niebieski. jpg

Dodatkowo w katalogu
znajduj si wszystkie
obrazy, jakie bd nam
potrzebne na nowej,
poprawionej stronie
salonu Head First.

drinki.gif
jasnoniebieski. jpg
czerwony. jpg

Wyt
umys
Strona salonu Head First powoli si rozrasta. Czy uwaasz, e przechowywanie wszystkich plikw w jednym
katalogu jest dobrym pomysem na zapewnienie waciwej organizacji witryny? Co by zmodyfikowa?

76

Rozdzia 2

Dokadniejsze poznanie hipertekstu

2

Wprowad modyfikacje w pliku salon.html

Otwrz plik salon.html w swoim ulubionym edytorze. Dodaj do niego tekst oraz kod HTML,
ktry na poniszym przykadzie zosta wyrniony szarym tem. Dalej wpisz wyrnione fragmenty;
na nastpnej stronie sprawdzimy, jak to wszystko dziaa.

<html>
<head>
Do nagwka dodajmy tekst
nowym i poprawionym.
<title>Salon Head First</title>
</head>
<body>
<h1>Witamy w nowym i poprawionym salonie Head First</h1>
<img src=drinki.gif>
W tych miejscach dodalimy kod HTML
<p>
tworzcy cze ze stron o naszych napojach.
Zagldaj do nas kadego wieczoru,
by rozkoszowa si
orzewiajcymi <a href=drinki.html>drinkami</a>,
Do tworzenia czy
mi rozmow lub jedn bd dwoma
uywany jest
partyjkami gry <em>Dance Dance Revolution</em>.
element <a>; ju
zaraz szczegowo
Zawsze zapewniamy
opiszemy, jak on
bezprzewodowy dostp do Internetu - ale pamitaj!
dziaa
obowizuje zasada
PSWSW (przynie swj wasny serwer WWW).

Tu musimy doda
</p>
fragment tekstu,
<h2>Jak do nas trafi</h2>
ktry skieruje
ron
czytelnika na st .
<p>
z opisem dojazdu
Znajdziesz nas w samym centrum Webowic. Zapraszamy!
Jeli potrzebujesz pomocy, aby nas znale, to zajrzyj na
stron ze szczegowym <a href=jakdojechac.html>opisem dojazdu</a>.
</p>
</body>
</html>
A tu umiecilimy cze do strony z opisem dojazdu;
take w tym przypadku uylimy elementu <a>.

Zapisz plik salon.html i sprawd, jak dziaa.

Kiedy skoczysz wprowadzanie modyfikacji zapisz plik salon.html i otwrz go w przegldarce.
Poniej wymienilimy, co powiniene sprawdzi
1

Kliknij cze drinkami powinna si pojawi strona powicona naszym drinkom.

Kliknij przycisk Wstecz w oknie przegldarki, a ponownie zostanie wywietlona gwna

strona salonu Head First.

Kliknij cze opisem dojazdu powinna zosta wywietlona strona z informacjami,

jak nas znale.

jeste tutaj!

77

Jak tworzy cza

No dobrze.
Zajrzaem na now
stron salonu Head First,
sprawdziem cza i wszystko
wietnie dziaa. Niemniej
jednak chciabym mie
pewno, e rozumiem, jak
dziaa ten nowy kod HTML.

Co zrobilimy?
1

Przeanalizujmy dokadnie proces tworzenia czy w jzyku HTML. W pierwszej kolejnoci tekst,
ktry ma by czem, naley umieci w elemencie <a> w nastpujcy sposb:

<a>drinkami</a>

Do tworzenia cza do
potrzebny jest element innej strony
<a>.

<a>opisem dojazdu</a>

etykieta cza.
Zawarto elementu <a> suy jako niana podkreleniem,
wyr
jest
ta
ieta
etyk
arce
W przegld
i mona j klikn.
co informuje uytkownika o tym,

Po utworzeniu etykiet dla obu czy musimy doda do strony kod HTML,
ktry poinformuje przegldark o ich stronach docelowych:

<a href=drinki.html>drinkami</a>

arka
W przypadku tego cza przegld ej
wywietli etykiet drinkami, ktr
kliknicie spowoduje wywietlenie
strony drinki.html.

To wanie przy uyciu

atrybutu href okrelana jest
strona docelowa.

<a href=jakdojechac.html>opisem dojazdu</a>

78

Rozdzia 2

Z kolei w przypadku tego

cza przegldarka wywietli
etykiet opisem dojazdu,
ktrej kliknicie spowoduje
wywietlenie strony
jakdojechac.html.

Dokadniejsze poznanie hipertekstu

Co robi przegldarka?
1

Przede wszystkim jeli podczas wywietlania strony przegldarka napotka element

<a>, wywietli jego zawarto jako etykiet, ktr uytkownik bdzie mg klikn.

<a href=drinki.html>drinkami</a>

Sowa drinkami
i opisem dojazdu s
umieszczone pomidzy
znacznikami elementu
<a>, a zatem zostan
przez przegldark
wywietlone jako
etykiety, ktre
uytkownik moe klikn.

<a href=jakdojechac.html>opisem dojazdu</a>

Uyj elementu <a>, aby utworzy hipertekstowe cze do innej

strony WWW. Zawarto elementu zostanie wywietlona na stronie,
a uytkownik bdzie mg j klikn i przej do strony docelowej.
Strona docelowa cza jest okrelana przy uyciu atrybutu href.
jeste tutaj!

79

Jak dziaaj cza

Pniej, kiedy uytkownik kliknie cze, przegldarka okreli jego stron docelow na
podstawie wartoci atrybutu href.

Uytkownik klika cze

drinkami lub

cze opisem dojazdu.

Kiedy uytkownik
kliknie cze opisem
dojazdu, przegldarka
pobiera warto jego
atrybutu href, ktr
w tym przypadku jest
jakdojechac.html

<a href=drinki.html>drinkami</a>

i aduje stron
drinki.html.

<a href=jakdojechac.html>opisem dojazdu</a>

i aduje stron jakdojechac.html.

80

Rozdzia 2

Jeli uytkownik klikn

cze drinkami, to
przegldarka pobierze
warto jego atrybutu href,
ktr jest drinki.html

Dokadniejsze poznanie hipertekstu

Atrybuty
Atrybuty pozwalaj na podawanie dodatkowych informacji o elementach. Cho jeszcze
nie opisalimy ich dokadnie, to jednak miae ju okazj pozna kilka z nich:

<style type=text/css>
<a href=irule.html>
<img src=sweetphoto.gif>

k arkuszy
Atrybut type okrela uywany jzy
CSS.
stylw, w tym przypadku jest to
low cza.
Atrybut href wskazuje stron doce
Atrybut src okrela nazw pliku, ktry ma zosta wywietlony
przez znacznik img.

Przeanalizujmy hipotetyczny przykad, ktry jeszcze lepiej uzmysowi Ci,

jak dziaaj atrybuty:

A co by byo, gdyby istnia element <samochd>:

Ot, gdyby istnia element <samochd>, to na pewno chciaby napisa
nastpujcy fragment kodu:

<samochd>Mj may mini</samochd>

W przypadku braku atrybutw jedyn informacj,

jak moemy poda, jest opisowa nazwa samochodu.

Jednak znacznik <samochd> w takiej postaci daje nam jedynie moliwo okrelenia
opisowej nazwy samochodu nie zawiera natomiast adnych informacji na temat marki,
modelu, take tego, czy auto jest kabrioletem, ani setek innych szczegowych informacji,
ktre mog nas interesowa. Gdyby wic faktycznie istnia element <samochd>,
to moglibymy zastosowa nastpujce przykadowe atrybuty:

Jednak dziki zastosowaniu

atrybutw moemy
dostosowa element
i umieci w nim wiele
rnych informacji.

<samochd marka=BMW model=Mini Cooper kabriolet=Nie>Mj may mini</samochd>

To wyglda znacznie lepiej, nieprawda? Powyszy kod przekazuje nam
znacznie wicej informacji zapisanych w wygodnej i przejrzystej postaci.

Pisz tak (posta poprawna)

<a href=top10.html>Najlepsze filmy</a>
Atrybuty s zawsze zapisywane w taki sam sposb:
cudzysw
w pierwszej kolejnoci podaje si nazw atrybutu, nastpnie
znak rwnoci
znak rwnoci, a nastpnie warto atrybutu zapisan
warto atrybutu
nazwa atrybutu
cudzysw
pomidzy znakami cudzysowu.
Czasami mona si spotka z dokumentami HTML, w ktrych
A nie tak (posta bdna)
cudzysowy wok wartoci atrybutw s pomijane, jednak
warto zdoby si na t odrobin wysiku i je zapisywa.
<a href=top10.html>Najlepsze filmy</a>
Okazuje si bowiem, e takie niemdre lenistwo moe Ci
BD warto atrybutu nie zostaa
potem przysporzy wielu problemw (o czym przekonasz si
zapisana pomidzy znakami cudzysowu.
w dalszej czci ksiki).

jeste tutaj!

81

Atrybuty i elementy
Nie ma

niemdrych pyta

P. Czy mog sam tworzy nowe atrybuty

dla istniejcych elementw HTML?

O. Nie, gdy przegldarki WWW rozpoznaj jedynie

predefiniowany zbir atrybutw dla poszczeglnych
elementw HTML. Gdyby sam wymyli jaki atrybut,
to przegldarka i tak nie wiedziaaby, co naley z nim zrobi;
co wicej, jak si wkrtce przekonasz, takie postpowanie
bardzo atwo moe wpdzi Ci w tarapaty. Kiedy
przegldarka jest w stanie rozpozna element lub atrybut,
to mwimy, i jest on obsugiwany bd te, e
przegldarka go obsuguje. Powiniene uywa wycznie
obsugiwanych elementw i atrybutw.

P. A kto decyduje, jakie atrybuty s obsugiwane?

O. Istniej komisje zajmujce si standardami i to one
okrelaj elementy i atrybuty HTML. Komisje te skadaj
si z osb, ktre nie maj nic lepszego do roboty ktre
wspaniaomylnie ofiarowuj swj czas i wysiek, by
zadba o istnienie jednej mapy drogowej jzyka HTML,
implementowanej pniej we wszystkich przegldarkach.

Atrybut href wymawiany

jako ha-ref

P. Skd mog dowiedzie si, jakie elementy

i atrybuty s obsugiwane? Ewentualnie,
czy wszystkie atrybuty mona stosowa
we wszystkich elementach?

rymuje si
z marchew.

O. W kadym elemencie mona uywa jedynie

okrelonego zbioru atrybutw. Wyobra to sobie
w nastpujcy sposb: czy uyby atrybutu kabriolet
w elemencie <toster>? Zapewne nie! A zatem bdziesz
chcia uywa jedynie atrybutw, ktre maj sens
w kontekcie konkretnego elementu i ktre s obsugiwane.
Podczas dalszej lektury niniejszej ksiki oraz omawiania
kolejnych zagadnie bdziesz si uczy, jakie atrybuty s
obsugiwane przez poszczeglne elementy. Natomiast kiedy
ju zakoczysz lektur, bdziesz mg sobie odwiey
pami, korzystajc z wielu doskonaych publikacji, takich
jak ksika HTML i XHTML. Przewodnik encyklopedyczny
(wydana przez Wydawnictwo Helion).

82

Rozdzia 2

Dokadniejsze poznanie hipertekstu

W tym tygodniu:
Wyznania atrybutu href

HeadFirst: Witamy, href. Bez wtpienia to wielka przyjemno prowadzi wywiad z tak
znaczcym atrybutem jak ty.
href: Dzikuj. Dobrze by tu i cho na chwil oderwa si od tego caego czenia.
Ono naprawd moe doprowadzi atrybut na skraj wyczerpania. Zgadnij, kto mwi
przegldarce, co ma zrobi za kadym razem, gdy kto kliknie cze. To wanie ja.
HeadFirst: Jestemy wdziczni, e znalaze dla nas troch czasu w swoim niezwykle
napitym terminarzu. Ale dlaczego nie zaczniesz opowiada od samego pocztku?
Jak to jest by atrybutem?
href: No tak. Jasne. Ot atrybuty su do dostosowywania dziaania elementw.
Nie ma nic trudnego w umieszczeniu fragmentu zawartoci strony, na przykad Zapisz
si natychmiast!, pomidzy znacznikami elementu, choby takiego jak <a>. Wystarczy
zapisa co takiego <a>Zapisz si natychmiast!</a>. Jednak beze mnie, atrybutu href,
nie masz adnej moliwoci przekazania elementowi <a> informacji o stronie docelowej.

HeadFirst: Jak na razie wszystko jasne

href: jednak dziki atrybutom mona okrela dodatkowe informacje dotyczce
elementw. W moim przypadku informacja ta dotyczy adresu strony docelowej:
<a href=rejestracja.html>Zapisz si natychmiast!</a>. Ten kod oznacza,
e element <a> o etykiecie Zapisz si natychmiast! jest poczony ze stron rejestracja.
html. Oczywicie istnieje bardzo wiele innych atrybutw, jednak ja jestem uywany
w elementach <a> w celu okrelenia strony docelowej cza.

HeadFirst: wietnie. Teraz musz zada to pytanie i mam tylko nadziej, e nie
poczujesz si uraony; ale co w zasadzie oznacza twoja nazwa? href? Co to w ogle jest?
href: To jedna z najstarszych nazw w Internecie. Oznacza ona odwoanie hipertekstowe
(ang. hypertext reference). Jednak znajomi uywaj skrconej nazwy href.

HeadFirst: Czyli?
href: Odwoanie hipertekstowe to po prostu inne okrelenie zasobu znajdujcego si na
lokalnym komputerze lub gdzie w Internecie. Zazwyczaj zasobem tym jest strona WWW,
jednak nic nie stoi na przeszkodzie by by to klip dwikowy, wideo lub cokolwiek innego.

HeadFirst: To bardzo ciekawe. Nasi czytelnicy widzieli do tej pory jedynie cza
wskazujce na inne stworzone przez nich strony; w jaki sposb tworzy si cza do innych
stron lub plikw znajdujcych si na WWW?
href: Ech chyba musz ju wraca do roboty Sie jest taka bezsensowna beze mnie.
Poza tym uczenie czytelnikw HTML-a to chyba wasze zadanie, nieprawda?

HeadFirst: Ju dobrze, dobrze. Tak, zajmiemy si tym zaraz. Dzikujemy, e nas

odwiedzie, href.
jeste tutaj!

83

Tworzenie cza do strony gwnej

Wczeniej utworzye cza ze strony salon.html do stron drinki.html oraz jakdojechac.html.
Teraz stworzysz cza prowadzce w odwrotnym kierunku. Poniej przedstawiony zosta kod HTML
strony drinki.html. Na dole tej strony dodaj cze o etykiecie
Powrt na stron salonu, ktre bdzie prowadzi na stron salon.html.

wiczenia
<html>

<head>
<title>Firmowe napoje salonu Head First</title>
</head>
<body>
<h1>Nasze napoje firmowe</h1>
<h2>Zielona herbata orzewiajca</h2>
<p>
<img src=zielony.jpg>
Szklanica pena witamin i mineraw. Ten napj to rdo
zdrowia, jakie zapewnia zielona herbata oraz mieszanka patkw
rumianku i korzenia imbiru.
</p>
<h2>Koncentracja malinowej ochody</h2>
<p>
<img src=jasnoniebieski.jpg>
Ten orzewiajcy napj, stanowicy poczenie soku malinowego
z traw cytrynow, skrk cytrynow oraz owocami gogu, sprawi,
e Twj umys stanie si bystry i chonny.
</p>
<h2>Niebiaska borwka</h2>
<p>
<img src=niebieski.jpg>
Wstrznita esencja jagd i wini, zmieszana z herbat
z czarnego bzu byskawicznie, sprawi, e poczujesz bog rozkosz.
</p>
<h2>Eksplozja urawinowego antyutleniacza</h2>
<p>
<img src=czerwony.jpg>
Otrzewiej, wdychajc aromaty urawin i hibiskusa zawarte
Tutaj powiniene
umieci nowy
fragment kodu.

w lekkim napoju penym witaminy C.

</p>

</body>
</html>

Kiedy skoczysz, podobnie zmodyfikuj plik jakdojechac.html.

84

Rozdzia 2

Dokadniejsze poznanie hipertekstu

PLAC
BUDOWY
POCZTEK

Potrzebujemy pomocy przy tworzeniu i analizie elementw <a>. Zwaywszy na Twoj now wiedz
dotyczc tego elementu, mamy nadziej, e bdziesz nam w stanie pomc. W kadym wierszu
przedstawionej poniej tabeli znajdziesz pewn kombinacj etykiety, strony docelowej oraz elementu
<a>. Uzupenij je o wszelkie brakujce informacje. Pierwszy wiersz uzupenilimy sami.

Etykieta

Strona docelowa

Gorcy czy nie?

goracy.html

yciorys

Kod HTML
<a href=goracy.html>Gorcy czy nie?</a>

cv.html

<a href=

cukiereczek.html

Oto ja w moim mini

>Cukiereczek</a>

mini-cooper.html

<a href=szczesciarz.html>

Zagrajmy

</a>

Nie ma

niemdrych pyta

P.

Widziaem wiele stron, na ktrych cza miay

posta graficzn, a nie tekstow. Czy take w takich
przypadkach mona zastosowa element <a>?

O.

Owszem, jeli umiecisz element <img> pomidzy

znacznikami elementu <a>, to obraz stanie si czem i bdzie go
mona klikn, analogicznie jak dzieje si to w przypadku tekstu.
O obrazkach bdziemy pisali dopiero w dalszej czci ksiki,
jednak powiniene wiedzie, e z powodzeniem mona ich uywa
jako czy.

P. Czy to oznacza, e wewntrz elementu <a> mona

umieszcza dowoln zawarto, ktra w ten sposb stanie
si czem? Czy w elemencie <a> mona umieci na
przykad akapit tekstu?

O. Poczekaj. Nie tak szybko. Wewntrz elementu <a> nie mona

umieszcza dowolnych innych elementw. Oglnie rzecz biorc,
umieszcza si w nim wycznie tekst oraz obrazy (jak rwnie
dowolne ich kombinacje). Problem moliwoci wzajemnego
zagniedania znacznikw, czyli umieszczania jednych elementw
wewntrz innych, jest cakowicie odrbnym zagadnieniem.
Ale nie przejmuj si, ju wkrtce si nim zajmiemy.

jeste tutaj!

85

Zastosowanie katalogw do organizacji witryny

Twoja praca nad witryn salonu

Head First naprawd si opacia.
Dziki tym kuszcym napojom i dokadnemu
opisowi dojazdu do lokalu wiele osb zaczo
regularnie nas odwiedza i zaglda na nasz
witryn WWW. Teraz pojawiy si plany
znacznego rozszerzenia zawartoci
naszej witryny.

Organizowanie zawartoci witryny

Zanim zaczniesz tworzy kolejne strony WWW, zadbaj o ich
odpowiednie zorganizowanie. Do tej pory umieszczalimy
wszystkie nasze pliki, zarwno strony, jak i obrazy,
w jednym katalogu. Bardzo szybko sam dojdziesz do
wniosku, i nawet w przypadku witryny WWW redniej
wielkoci, rozmieszczenie plikw HTML, obrazw oraz
wszelkich innych zasobw w kilku odrbnych katalogach
znacznie uatwia zarzdzanie nimi. Oto, jak obecnie
wyglda zawarto naszej witryny.

<html>
.
.
.
</html>

Stworzylimy gwny katalog

o nazwie salon, w ktrym
umieszczalimy wszystkie pliki
wchodzce w skad witryny.

salon.html

Dysponujemy ju
trzema plikami HTML,
odpowiadajcymi
odpowiednio: gwnej
stronie salonu, stronie
z napojami oraz stronie
z opisem dojazdu.

<html>
.
.
.
</html>

drinki.html

salon
Bardzo czsto taki katalog jest
okrelany jak gwny katalog
witryny, co oznacza, e jest to
najwyszy katalog w hierarchii,
zawierajcy wszystkie zasoby
wchodzce w skad witryny.

<html>
.
.
.
</html>

jakdojechac.html

zielony. jpg
niebieski. jpg

A to s wszystkie obrazy uywane w naszych

stronach. Jak wida, w naszym katalogu powoli
zaczyna si robi baagan, a mamy jedynie trzy
dokumenty HTML i kilka obrazkw. Zrbmy co
z tym problemem.

86

Rozdzia 2

drinki.gif
jasnoniebieski. jpg
czerwony. jpg

Dokadniejsze poznanie hipertekstu

Organizacja salonu
Sprbujmy zatem stworzy jaki sensowny sposb organizacji salonu Head First. Powiniene przy tym pamita,
e kad witryn mona zorganizowa na wiele rnych sposobw. Zaczniemy od prostego rozwizania
i stworzymy kilka katalogw dla stron WWW. Oprcz tego wszystkie obrazy umiecimy w jednym miejscu.
W katalogu salon
pozostawimy jedynie plik
salon.html.

Nasz katalog gwny

wci bdzie nosi
nazw salon.
<html>
.
.
.
</html>

salon

salon.html

zielony. jpg

onas

<html>
.
.
.
</html>

napoje

obrazy

niebieski. jpg
drinki.gif

drinki.html

jakdojechac.html

Stwrzmy nowy katalog, w ktrym

bd przechowywane strony
dotyczce salonu, takie jak plan
dojazdu. W przyszoci bdziemy
mogli umieci w nim inne stro
ny,
dotyczce na przykad kierownic
twa
salonu, planowanych imprez itp.

<html>
.
.
.
</html>

czerwony. jpg

Stworzymy take odrbny katalog

przeznaczony do przechowywania stron
o napojach serwowanych w salonie.
Jak na razie umiecimy w nim tylko
stron zawierajc list dostpnych
napojw, jednak ju wkrtce pojawi
si kolejne.

jasnoniebieski. jpg

Oprcz tego
w odrbnym
katalogu
umiecimy
wszystkie
obrazy.

Nie ma

niemdrych pyta

P.

Skoro tworzylimy jeden katalog

przeznaczony do przechowywania
obrazw, to dlaczego nie mona by
stworzy katalogu o nazwie html,
w ktrym byyby umieszczane
dokumenty HTML?

A moe by tak umieci katalog

sucy do przechowywania
obrazw we wszystkich pozostaych
katalogach, takich jak napoje lub onas?

O.

O. Take w tym przypadku mona by tak

Oczywicie mona by. Nie ma adnych

jedynie susznych sposobw okrelania
organizacji witryn WWW. Zazwyczaj
bdziesz si stara stosowa taki sposb
organizacji, ktry najbardziej odpowiada
Tobie oraz Twoim uytkownikom. Podobnie
jak w przypadku wszelkich innych decyzji
projektowych bdziesz si zapewne stara
zastosowa schemat organizacji, ktry jest
prosty, a jednoczenie na tyle elastyczny,
by pozwoli na rozbudow witryny.

P.

zrobi. Mona si jednak spodziewa, e

niektre spord obrazw bd uywane
na kilku stronach i dlatego umiecilimy
je wszystkie w jednym katalogu. Jeli
jednak tworzysz witryn, w ktrej do
poszczeglnych czci przypisanych jest
wiele obrazw, to moesz zdecydowa si
na stworzenie katalogu na obrazy w kadej
z gazi.

P. W kadej z gazi?
O. Sposb organizacji katalogw mona
najprociej zrozumie, wyobraajc je sobie
jako drzewo odwrcone korzeniem do
gry. Na samej grze znajduje si katalog
gwny, a kada cieka
prowadzca w d, do
pliku lub katalogu,
stanowi ga.

jeste tutaj!

87

Reorganizacja i zerwane cza

wiczenia

Twoim aktualnym zadaniem jest stworzenie struktury plikw i katalogw przedstawionej

na poprzedniej stronie. Poniej dokadnie opisalimy, co musisz zrobi:
1

Odszukaj katalog salon i utwrz w nim nowe podkatalogi o nazwach

onas, napoje oraz obrazy.

Przenie plik jakdojechac.html do katalogu onas.

Przenie plik drinki.html do katalogu napoje.

Przenie wszystkie pliki obrazw do katalogu obrazy.

W kocu wywietl w przegldarce stron salon.html i sprawd,

czy dziaaj umieszczone na niej cza. Porwnaj biece wyniki z tymi
uzyskanymi wczeniej.

Problemy techniczne
Wyglda na to, e po przeniesieniu stron
do podkatalogw pojawiy si nowe
problemy techniczne.

Jak si okazuje, obecnie na stronie nie

wywietla si jeden z umieszczonych na
niej obrazw. Jest to przykad tak zwanego
zerwanego cza.

Co wicej, okazuje si, e znacznie gorsze

rzeczy dziej si, gdy klikniesz cze do
strony napojw firmowych (lub opisu dojazdu)
na ekranie pokazuje si okno dialogowe
informujce, e nie mona znale strony.

Niektre przegldarki wywietlaj ten komunikat

w postaci strony WWW, a nie okna dialogowego.

88

Rozdzia 2

Dokadniejsze poznanie hipertekstu

Jak sdz problem polega na tym, i

przegldarka uwaa, e wszystkie pliki
wci znajduj si w tym samym katalogu
co strona salon.html. Musimy zatem zmieni
cza, by wskazyway na pliki przeniesione
do nowych katalogw.

Bardzo susznie.
Musimy poinformowa przegldark
o nowym pooeniu plikw.
Do tej pory wartoci podane w atrybutach href
wskazyway na strony znajdujce si w tym samym
katalogu. Jednak zazwyczaj witryny s nieco bardziej
zoone, wic musi istnie moliwo odwoywania si
do stron umieszczonych w innych katalogach.
W tym celu naley okreli ciek prowadzc
z danej strony do strony docelowej. Moe to oznacza
konieczno przejcia jeden lub dwa poziomy niej
w hierarchii katalogw bd wyjcia na ktry
z wyszych poziomw. W obu tych przypadkach
moemy si posuy ciek wzgldn, ktr podamy
jako warto atrybutu href.

jeste tutaj!

89

Stosowanie cieek

Planowanie cieek
Zastanw si, co robisz, gdy planujesz wakacje w rodzinnym wozie
kempingowym? Bierzesz map, znajdujesz swoje biece pooenie,
a nastpnie zaznaczasz tras do miejsca docelowego. Opis trasy oraz
instrukcje, jak naley jecha, s zatem okrelane wzgldem biecego
pooenia. Czyli gdyby przebywa w innym miecie, instrukcje te
wygldayby zupenie inaczej, nieprawda?
Okrelajc wzgldn ciek na potrzeby tworzonych czy,
powiniene postpowa dokadnie w taki sam sposb: zacz od
strony, na jakiej chcesz umieci cze, a nastpnie przej przez
wszystkie katalogi znajdujce si na drodze do strony docelowej.

No dobra, tak naprawd to pewnie zajrzaby

do serwisu Google Maps, ale tym razem
moesz nam chyba pj na rk.

Istniej take inne rodzaje cieek.

Przedstawimy je w nastpnych rozdziaach.

Przeanalizujemy teraz kilka cieek wzgldnych (a jednoczenie

poprawimy cza umieszczone na stronie salonu Head First):

cza do zasobw znajdujcych si

w katalogach podrzdnych
1

Okrelanie cza ze strony salon.html do drinki.html.

Musimy poprawi cze prowadzce ze strony salon.html na stron drinki.html.

Oto, jak aktualnie wyglda element <a> umieszczony w kodzie strony:
Aktualnie uywamy jedynie nazwy
pliku drinki.html, co informuje
przegldark, i strony docelowej
naley szuka w tym samym
katalogu, w ktrym znajduje si
bieca strona salon.html.

<a href=drinki.html>drinkami</a>
2

Okrelenie strony pocztkowej oraz docelowej.

Podczas reorganizacji stron salonu Head First stron salon.html

pozostawilimy w katalogu gwnym salon natomiast stron drinki.html
przenielimy do podkatalogu o nazwie napoje.
Zacznij std
<html>
.
.
.
</html>

salon

salon.html
zielony. jpg

onas

<html>
.
.
.
</html>

napoje

<html>
.
.
.
</html>

obrazy

niebieski. jpg

drinki.gif
jakdojechac.html

drinki.html

i okrel ciek
do tego pliku.

90

Rozdzia 2

czerwony. jpg

jasnoniebieski. jpg

Dokadniejsze poznanie hipertekstu

3

Wyznacz ciek ze strony pocztkowej do strony docelowej.

A teraz wyznaczmy ciek. Aby dotrze ze strony salon.html do strony

drinki.html, musimy w pierwszej kolejnoci wej do katalogu napoje,
a nastpnie odszuka w nim plik drinki.html.
W pierwszej kolejnoci
musimy wej do katalogu
podrzdnego napoje.
<html>
.
.
.
</html>

salon

salon.html
zielony. jpg
<html>
.
.
.
</html>

onas

napoje

<html>
.
.
.
</html>

obrazy

niebieski. jpg

drinki.gif
drinki.html

jakdojechac.html

To wanie w tym
katalogu znajduje si
plik drinki.html.

czerwony. jpg

jasnoniebieski. jpg

Utwrz atrybut href, w ktrym podasz wyznaczon ciek.

Kiedy ju okrelilimy ciek, musimy j zapisa w postaci zrozumiaej dla

przegldarki. Sposb zapisu tej cieki przedstawia si nastpujco:

W pierwszej kolejnoci
przechodzimy do
katalogu napoje.

napoje

Wszystkie fragmenty cieki

oddzielamy od siebie znakiem
ukonika (/).

I w kocu podajemy nazw

pliku docelowego.

drinki.html

czc to wszystko w jedn cao

, otrzymujemy

<a href=napoje/drinki.html>drinkami</a>
Wyznaczon ciek wzgldn zapisalimy jako warto atrybutu
href. Gdy klikniemy teraz cze, przegldarka sprbuje znale
plik
drinki.html, ktry powinien si znajdowa w katalogu napoje.

jeste tutaj!

91

Troch praktyki w okrelaniu cieek

Zaostrz owek
Teraz Twoja kolej: okrel wzgldn ciek od pliku salon.html do pliku jakdojechac.html.
Kiedy ju to zrobisz, uzupenij podany poniej element <a>. Sprawd poprawno swoich
odpowiedzi, porwnujc je z odpowiedziami podanymi na kocu rozdziau, a nastpnie
zmodyfikuj oba elementy <a> umieszczone w pliku salon.html.

<html>
.
.
.
</html>

salon

salon.html

zielony. jpg
<html>
.
.
.
</html>

onas

napoje

jakdojechac.html

<html>
.
.
.
</html>

obrazy

niebieski. jpg
drinki.gif

drinki.html

czerwony. jpg

<a href=
TU WPISZ SWOJ ODPOWIED

92

Rozdzia 2

>opisem dojazdu</a>

jasnoniebieski. jpg

Dokadniejsze poznanie hipertekstu

Podr w przeciwnym kierunku cze do katalogu nadrzdnego

1

Tworzenie cza ze strony jakdojechac.html do strony salon.html.

Pozostaje nam poprawi cza Powrt na stron salonu.

Oto aktualna posta elementu <a> znajdujcego si w kodzie strony jakdojechac.html:

<a href=salon.html>Powrt na stron salonu</a>

Okrel stron pocztkow oraz docelow.

Przyjrzyj si pooeniu
strony pocztkowej
i docelowej.
W tym przypadku
stron pocztkow
jest plik jakdojechac.html
umieszczony w katalogu
onas. Z kolei stron
docelow jest plik
onas
salon.html umieszczony
w katalogu salon, czyli
nadrzdnym wzgldem
katalogu, w jakim
jest przechowywany
plik jakdojechac.html.

i znajd
ciek do
tej strony.

<html>
.
.
.
</html>

salon

Aktualnie uywamy
jedynie nazwy strony
salon.html, co sprawia,
e przegldarka
poszukuje strony
docelowej w tym samym
katalogu, w ktrym
znajduje si plik
jakdojechac.html. Takie
cze nie moe zatem
dziaa poprawnie.

salon.html
zielony. jpg
<html>
.
.
.
</html>

<html>
.
.
.
</html>

napoje

obrazy

niebieski. jpg

drinki.gif
drinki.html

jakdojechac.html

czerwony. jpg

jasnoniebieski. jpg

Zacznij tutaj

Wyznacz ciek od strony pocztkowej do docelowej.

A teraz wyznacz ciek.

Aby dosta si do
strony salon.html,
zaczynajc od
strony jakdojechac.
html, musimy przej
do katalogu nadrzdnego
i w nim znajdziemy
nasz plik docelowy.

i w nim znajdziemy
plik salon.html.
<html>
.
.
.
</html>

salon

salon.html
zielony. jpg

onas

<html>
.
.
.
</html>

napoje

<html>
.
.
.
</html>

obrazy

niebieski. jpg

drinki.gif
jakdojechac.html

W pierwszej kolejnoci musimy

przej do GRY, do katalogu
nadrzdnego o nazwie salon

drinki.html
czerwony. jpg

jasnoniebieski. jpg

jeste tutaj!

93

Tworzenie wartoci atrybutu href

4

Podaj wartoci atrybutu href reprezentujc wyznaczon ciek.

To ju prawie wszystko. Po okreleniu cieki pozostao Ci

jedynie zapisa j w postaci zrozumiaej dla przegldarki. Zajmijmy si tym:
W pierwszej kolejnoci musisz

przej o jeden poziom do gry

to
Jak
ego.
zdn
nadr
logu
do kata
.
zrobi? Przy uyciu symbolu ..
Tak wanie dwch kropek.
Przyjmij to do wiadomoci,
a znaczenie tego symbolu
wyjanimy nieco pniej.

.. wymawiaj jako:
kropka, kropka.

Poszczeglne czci
cieki oddziel do siebie
znakami ukonika (/).

..

Na samym kocu podaj

nazw pliku docelowego.

salon.html
czc te wszystkie elementy
w jedn cao, uzyskujemy

<a href=../salon.html>Powrt na stron salonu</a>

Kiedy klikniesz to cze, przegldarka poszuka

w katalogu nadrzdnym pliku salon.html.

pka
Kropka, kro

Do gry, w d, artykuy
gospodarstwa domowego,
bielizna damska?

94

Rozdzia 2

Dokadniejsze poznanie hipertekstu

Nie ma

niemdrych pyta

P.

Co to jest katalog nadrzdny? Jeli

mam katalog owoce, a w nim katalog
jabka, to czy katalog owoce
jest katalogiem nadrzdnym katalogu
jabka?

O.

Dokadnie. Katalogi (ktre czasami s

take nazywane folderami) s bardzo czsto
opisywane na podstawie ich wzajemnego
pooenia. Posugujc si przykadem
z pytania, mona powiedzie, e katalog
owoce jest katalogiem nadrzdnym
katalogu jabka, natomiast katalog jabka
jest katalogiem podrzdnym katalogu
owoce. Gdyby istnia jeszcze jeden katalog,
na przykad gruszki, umieszczony w
katalogu owoce, to byby on katalogiem
ssiednim wzgldem katalogu jabka.

P. No dobrze, katalogi nadrzdne

i podrzdne maj jeszcze jaki sens,
ale te dwie kropki?

O.

Kiedy musisz poinformowa

przegldark, e poszukiwany plik znajduje
si w katalogu nadrzdnym, uywasz wanie
symbolu .., ktry oznacza: Przejd DO
GRY, do katalogu nadrzdnego. Innymi
sowy, te dwie kropki to w jzyku przegldarek
okrelenie katalogu nadrzdnego.

P. A co naley zrobi, gdy musimy przej O. C, to zaley tylko od iloci katalogw, jaka
nie o jeden, lecz o dwa poziomy wyej?

O. Dla kadego katalogu nadrzdnego do

jakiego chcesz przej, moesz uy symbolu ...

Kade uycie tego symbolu oznacza przejcie
o jeden poziom ku grze w hierarchii katalogw.
Jeli wobec tego chcesz przej o dwa poziomy
do gry, musisz uy cieki o postaci: ../...
Poszczeglne elementy cieki zawsze naley
oddziela znakiem ukonika (/); nie zapominaj
o tym (bo przegldarka nie wie, co oznacza
symbol skadajcy si z czterech kropek)!

P. Kiedy ju znajd si w katalogu o dwa

poziomy wyej, to jak mam poinstruowa
przegldark, gdzie ma szuka pliku
docelowego?

O. Wystarczy poczy ciek ../.. z nazw

pliku. Jeli zatem szukasz pliku owoc.html
pooonego dwa katalogi wyej, caa cieka
musi mie posta: ../../owoc.html. By
moe przypuszczasz, e katalog okrelany
ciek ../.. nazywamy dwukrotnie
nadrzdnym, jednak tak nie jest; uywa si
raczej okrelenia katalog nadrzdny katalogu
nadrzdnego lub po prostu: ../...

zostaa utworzona. Jeli stworzye struktur

katalogw skadajc si z 10 poziomw, to nic nie
stoi na przeszkodzie, by uy cieki schodzcej
do katalogu znajdujcego si na ostatnim
dziesitym poziomie. Jednak nie zalecamy
stosowania takich rozwiza pojawienie si tak
ogromnej iloci poziomw w hierarchii katalogw
bdzie zapewne oznacza, e przyjty sposb
organizacji witryny bdzie zbyt skomplikowany.
Co wicej, istnieje ograniczenie iloci znakw,
z jakich moe si skada cieka jej
maksymalna dugo wynosi 255 znakw. To
bardzo duo, wic jest mao prawdopodobne,
by kiedykolwiek potrzebowa a tylu znakw
do zapisania swojej cieki, jednak jeli tworzysz
due witryny, to jest to czynnik, o jakim naley
pamita.

P. W moim systemie operacyjnym

separatorem cieek jest znak lewego
ukonika (\) czy to nie jego powinienem
zatem uywa?

O. Nie, przy zapisywaniu cieek w stronach

WWW zawsze uywamy znaku ukonika (/).

Nie wolno uywa znaku lewego ukonika (\).
Wiele systemw operacyjnych uywa innych
znakw separatora (na przykad w systemie
Czy jest jakie ograniczenie co do
tego, jak wysoko mona przej, uywajc Windows uywany jest znak lewego ukonika
W naszym przykadzie chcielimy utworzy
symbolu ..?
\, a nie ukonika /), jeli jednak chodzi
cze prowadzce ze strony jakdojechac.html
o cieki tworzone na potrzeby Sieci, to zosta
znajdujcej si w katalogu onas i wskazujce
Mona w ten sposb przej co najwyej wybrany jeden separator i jest on wszdzie
na stron salon.html znajdujc si w katalogu
do poziomu katalogu gwnego witryny
konsekwentnie uywany. A zatem niezalenie
salon nadrzdnym wzgldem katalogu
WWW. W naszym przypadku katalogiem
od tego, czy uywasz systemu MacOS,
onas. A zatem musielimy poinstruowa
gwnym jest salon. A zatem mona przej
Windows, Linux czy te jakiego innego,
przegldark, by szukaa strony docelowej
co najwyej do niego.
zapisujc cieki w czach umieszczanych na
w katalogu, ktry w hierarchii jest pooony
stronach WWW, zawsze powiniene uywa
o jeden poziom WYEJ. Dwie kropki s
A co z poruszaniem si w przeciwnym
znakw ukonika (/).
symbolem nakazujcym przegldarce przejcie
kierunku czy istnieje jakie ograniczenie
wanie o jeden poziom WYEJ.

P.
O.

P.

limitujce, ile katalogw w d mona zej?

Teraz Twoja kolej: okrel wzgldn ciek pomidzy stronami drinki.html oraz salon.html,
jak naley umieci w czu Powrt na stron salonu. Czym cieka ta rni si od cieki
umieszczonej w pliku jakdojechac.html?

Niczym si nie rni obie cieki s identyczne.

Wyt
umys

jeste tutaj!

95

cieki wzgldne i obrazy

Poprawianie bdnych adresw obrazw

Ju niemal udao Ci si poprawi gwn stron salonu Head First
i ponownie doprowadzi j do dziaania; ostatni rzecz, jak musisz
poprawi, s bdne obrazy, ktre si nie wywietlaj.
Nie przygldalimy si jeszcze szczegowo elementom <img> (zajmiemy si
tym pniej), jednak jak na razie cakowicie wystarczy Ci informacja,
e w atrybutach src tych elementw podawane s wzgldne cieki
tak samo jak w atrybutach href elementw <img>.

Hej to mio,
e poprawie te wszystkie
nie dziaajce cza, ale
czy przez przypadek o czym
nie zapomniae? Na stronie nie
wywietlaj si take adne obrazy!
Nie zostawiaj nas w takim
pooeniu, musimy jako
dziaa.

Poniej przedstawilimy posta elementu <img> podanego w kodzie strony

salon.html:

<img src=drinki.gif>
W tym miejscu podawana jest wzgldna
cieka okrelajca pooenie obrazu.
ciek t okrelamy dokadnie tak samo jak
w przypadku atrybutu href elementu <a>.

Okrelanie cieki z pliku salon.html do obrazu drinki.gif

Aby okreli t ciek, musimy przej od strony pocztkowej
salon.html do miejsca, w jakim jest umieszczony interesujcy nas
obraz, czyli do katalogu obrazy:
CEL: aktualnie jestemy
w katalogu salon i musimy
przesun si o jeden poziom
niej, do katalogu obrazy.

Zaczynamy std
(1) Zejd jeden poziom,
do katalogu obrazy.

<html>
.
.
.
</html>

salon

salon.html
zielony. jpg

onas

<html>
.
.
.
</html>

napoje

<html>
.
.
.
</html>

obrazy

niebieski. jpg

drinki.gif
jakdojechac.html

drinki.html

(2) Tu jest umieszczony nasz plik

drinki.gif.

A zatem po poczeniu ze sob elementw (1) i (2) z powyszego rysunku

otrzymamy w efekcie ciek o postaci obrazy/drinki.gif, za poprawna
posta elementu <img> powinna by nastpujca:

<img src=obrazy/drinki.gif>
96

Rozdzia 2

czerwony. jpg

jasnoniebieski. jpg

i mamy okreli
ciek do tego pliku.

Dokadniejsze poznanie hipertekstu

Okrelanie cieki od pliku drinki.html do obrazu czerwony.jpg

Na stronie z informacjami o napojach firmowych wywietlanych jest kilka
obrazw rnokolorowych drinkw. Obrazy te s przechowywane w plikach:
czerwony.jpg, zielony.jpg i tak dalej. Okrelmy najpierw ciek do pliku czerwony.
jpg; cieki do pozostaych obrazw bd bardzo podobne, gdy wszystkie pliki
graficzne zostay umieszczone w tym samym katalogu.

CEL: znajdujemy si
w katalogu napoje
i musimy przej do
katalogu obrazy.

(2) A nastpnie schodzimy jeden

poziom, do katalogu obrazy.

salon

<html>
.
.
.
</html>

salon.html
zielony. jpg

onas

<html>
.
.
.
</html>

napoje

<html>
.
.
.
</html>

obrazy

niebieski. jpg

i okrelamy
ciek prowadzc
do tego miejsca.

drinki.gif
drinki.html

jakdojechac.html

(1) W pierwszej kolejnoci

musimy zatem przej do
katalogu nadrzdnego salon.
Pamitaj, e w tym celu trzeba
uy symbolu ...

czerwony. jpg

Zaczynamy
tutaj

jasnoniebieski. jpg

(3) I w kocu moemy znale

plik czerwony.jpg.

Po poczeniu elementw (1), (2) oraz (3) uzyskujemy:

Przechodzimy
do katalogu
nadrzdnego

..

Ukonik
rozdzielajcy
elementy cieki.

Nastpnie schodzimy Kolejny ukonik

na niszy poziom, do rozdzielajcy
katalogu obrazy.
elementy cieki.

obrazy

I w kocu
podajemy nazw
pliku.

czerwony.jpg

<img src=../obrazy/czerwony.jpg>

jeste tutaj!

97

Poprawa wzgldnych cieek w elementach obrazw

wiczenia

Wszystkie czynnoci, jakie wykonae do tej pory, pozwoliy poprawi cza, ktre przestay
dziaa w wyniku reorganizacji witryny salonu Head First. Niemniej jednak wci pozostaj Ci
jeszcze do poprawienia obrazy wywietlane na stronach salon.html oraz drinki.html. Poniej
opisalimy, co musisz zrobi, aby je poprawi:
1

W pliku salon.html zmodyfikuj atrybut src,

wpisujc w nim ciek obrazy/drinki.gif.

W pliku drinki.html zmodyfikuj atrybuty src,

dopisujc przed nazwami plikw ciek ../
obrazy/.

Zapisz oba pliki, a nastpnie wywietl plik

salon.html w przegldarce. Nawigacja
pomidzy poszczeglnymi stronami powinna
dziaa poprawnie, a wszystkie obrazy powinny
by widoczne.

PS. Jeli masz jakiekolwiek problemy, to poprawnie dziaajc

wersj strony salonu Head First moesz znale w przykadach
doczonych do ksiki, w katalogu rozdzial2\salon_skonczony.
Dokadnie porwnaj swoje strony z ich odpowiednikami
doczonymi do ksiki.

Udao Ci si! Teraz nasza

witryna jest dobrze zorganizowana,
a wszystkie cza dziaaj poprawnie. Czas,
aby to uczci. Przycz si do nas i wypij
Zielon herbat orzewiajc.

98

Rozdzia 2

A pniej
zabierzemy si za dalsze
usprawnianie i rozbudow
naszej witryny.

Dokadniejsze poznanie hipertekstu

KLUCZOWE ZAGADNIENIA

Kiedy chcesz poczy dwie strony, uyj do tego celu

elementu <a>.

Strona docelowa cza jest okrelana przy uyciu

atrybutu href elementu <a>.

Zawarto elementu <a> stanie si etykiet cza.

To wanie ta etykieta jest wywietlana na stronie
WWW. Domylnie jest ona podkrelana, co oznacza,
e mona j klikn.

Etykiet cza moe stanowi zarwno tekst, jak i obrazy.

Po klikniciu cza przegldarka wywietla stron WWW

podan w atrybucie href.

cza mog wskazywa na pliki znajdujce si zarwno

w tym samym, jak i w zupenie innych katalogach.

cieka wzgldna jest czem wskazujcym na pliki

znajdujce si w tej samej witrynie, przy czym jest ona
okrelana wzgldem pooenia strony pocztkowej.
Podobnie jak na mapie take w tym przypadku droga
do celu jest okrelana wzgldem punktu pocztkowego.

Uyj symbolu .., aby utworzy cze z plikiem

umieszczonym w katalogu nadrzdnym wzgldem
katalogu, w jakim znajduje si strona zawierajca cze.

Symbol .. oznacza katalog nadrzdny.

Pamitaj, e poszczeglne elementy cieki naley

oddziela od siebie za pomoc znaku ukonika (/).

Jeli cieka do obrazu nie bdzie poprawna, to zamiast

waciwego obrazu przegldarka wywietli ikon
przeamanego obrazka.

Okrelajc nazwy plikw i katalogw wchodzcych

w skad witryny, naley pamita, by nie stosowa
w nich znakw odstpu.

Odpowiedni organizacj witryny naley opracowa

i zastosowa na moliwe wczesnych etapach jej tworzenia;
dziki temu pniej, kiedy witryna zostanie rozbudowana,
nie bdziesz musia poprawia dziesitek czy.

Istnieje wiele sposobw organizowania witryn WWW.

To, ktry z nich zastosujesz, zaley wycznie od Ciebie.

jeste tutaj!

99

Wielki konkurs wzgldnoci

Oto dajemy Ci szans wyprbowania swoich umiejtnoci okrelania cieek wzgldnych.
Stworzylimy witryn prezentujc 100 najlepszych albumw muzycznych, ktra jest
umieszczona w katalogu muzyka. W tym katalogu znajdziesz pliki HTML, inne katalogi oraz
obrazy. Twoim zadaniem jest okrelenie cieek wzgldnych, ktre pozwol nam na poczenie
naszych stron z innymi stronami i plikami wchodzcymi w skad witryny.
Na tej stronie przedstawilimy struktur witryny, na nastpnej znajdziesz natomiast wiczenia,
ktre sprawdz Twoje umiejtnoci. Twoim zadaniem jest okrelenie poprawnej wzgldnej
cieki dla kadej pary plikw: strona pocztkowa strona docelowa. Jeli uda Ci si wykona
to zadanie, to bdziesz prawdziwym mistrzem cieek.
Okrelajc cieki,
moesz rysowa je
bezporednio na tym
rysunku.
<html>
.
.
.
</html>

muzyka

gatunki

top100.html

<html>
.
.
.
</html>

obrazy

gatunki.html

logo.gif

<html>
.
.
.
</html>

darkside.gif

pinkfloyd.html

gatunki

okladkicd

floyd.gif

artysci

<html>
.
.
.
</html>

coldplay.html

100

Rozdzia 2

xandy.gif

chris.gif

Dokadniejsze poznanie hipertekstu

Czas zacz test.

Uwaga Gotw Pisz!
si
tml znajduje
Plik top100.h uzyka, a zatem,
w katalogu m pliku gatunki.
aby dotrze doprzej jeden
html, musimy wanie do
poziom niej nki.
katalogu gatu

Przykad
<html>
.
.
.
<html>

gatunki/gatunki.html

top100.html

<html>
.
.
.
<html>

gatunki.html

Runda pierwsza
<html>
.
.
.
<html>

top100.html

logo.gif

Runda druga
<html>
.
.
.
<html>

gatunki.html

logo.gif

Runda trzecia
<html>
.
.
.
<html>

top100.html

<html>
.
.
.
<html>

pinkfloyd.html

Runda dodatkowa
<html>
.
.
.
<html>

coldplay.html

chris.gif

jeste tutaj!

101

Rozwizania wicze

Rozwizania
wicze
<html>
<head>
<title>Firmowe napoje salonu Head First</title>
</head>
<body>
<h1>Nasze napoje firmowe</h1>
<h2>Zielona herbata orzewiajca</h2>
<p>
<img src=zielony.jpg>
Szklanica pena witamin i mineraw. Ten napj
to rdo zdrowia, jakie zapewnia zielona herbata
oraz mieszanka patkw rumianku i korzenia imbiru.
</p>
<h2>Koncentracja malinowej ochody</h2>
<p>
<img src=jasnoniebieski.jpg>
Ten orzewiajcy napj, stanowicy poczenie soku malinowego
z traw cytrynow, skrk cytrynow oraz owocami gogu sprawi,
e Twj umys stanie si bystry i chonny.
</p>
<h2>Niebiaska borwka</h2>
<p>
<img src=niebieski.jpg>
Wstrznita esencja jagd i winii, zmieszana z herbat
z czarnego bzu byskawicznie, sprawi, e poczujesz bog
rozkosz.
</p>
<h2>Eksplozja urawinowego antyutleniacza</h2>
<p>
<img src=czerwony.jpg>
Otrzewiej, wdychajc aromaty urawin i hibiskusa zawarte
w lekkim napoju penym witaminy C.

Oto nowy element

<a>, stanowicy cze
prowadzce do gwnej
strony salonu.

</p>
<p>
<a href=salon.html>Powrt na stron salonu</a>
</p>
Umiecilimy cze w osobnym
akapicie, aby zachowa
</body>
porzdek i przejrzys
</html>

102

Rozdzia 2

to strony.
ten temat podamy w nastpnym Wicej informacji na
rozdziale.

Dokadniejsze poznanie hipertekstu

Rozwizania wicze

PLAC
BUDOWY
POCZTEK
Kod HTML

Etykieta

Strona docelowa

Gorcy czy nie?

goracy.html

<a href=goracy.html>Gorcy czy nie?</a>

cv.html

<a href=cv.html>yciorys</a>

yciorys

Cukiereczek

cukiereczek.html

<a href= cukiereczek.html

>Cukiereczek</a>

Oto ja w moim mini

mini-cooper.html

<a href=mini-cooper.html>Oto ja w moim mini</a>

Zagrajmy

szczesciarz.html

<a href=szczesciarz.html> Zagrajmy </a>

jeste tutaj!

103

Rozwizania wicze

Zaostrz owek
Rozwizanie

Okrel wzgldn ciek od pliku salon.html do pliku jakdojechac.html. Kiedy ju

to zrobisz, uzupenij podany poniej element <a>.
A oto i rozwizanie wiczenia. Czy zmienie oba elementy <a> umieszczone
w kodzie strony salon.html?

onas

<html>
.
.
.
</html>

salon

salon.html

zielony. jpg
<html>
.
.
.
</html>

onas

napoje

<html>
.
.
.
</html>

obrazy

niebieski. jpg
drinki.gif

drinki.html

jakdojechac.html

czerwony. jpg

jakdojechac.html

<a href=

onas/jakdojechac.html

>opisem dojazdu</a>

POWIED
TU WPISZ SWOJ OD

104

Rozdzia 2

jasnoniebieski. jpg

Dokadniejsze poznanie hipertekstu

Rozwizanie wielkiego konkursu wzgldnoci

je
Plik top100.html znajdu
a,
si w katalogu muzyk do
a zatem, aby dotrze simy
pliku gatunki.html, mu
przesun si o jeden e do
poziom niej wani
katalogu gatunki.

Runda pierwsza
<html>
.
.
.
<html>

obrazy/logo.gif

logo.gif

top100.html

Runda druga
<html>
.
.
.
<html>

../obrazy/logo.gif
logo.gif

gatunki.html

Runda trzecia
<html>
.
.
.
<html>

<html>
.
.
.
<html>

gatunki/rock/pinkfloyd.html

top100.html

../../obrazy/artysci/chris.gif

coldplay.html

y
Ze strony top100.html wchodzim
do
do katalogu gatunki, nastpnie
katalogu rock, a w nim moemy
znale plik pinkfloyd.html.

pinkfloyd.html

Runda dodatkowa
<html>
.
.
.
<html>

Strona gatunki.html znajduje si

na niszym poziomie, w katalogu
gatunki, a zatem, aby dotrze
my
z niej do pliku logo.gif, musieli
najpierw wyj na wyszy poziom
e
do katalogu muzyka, a nastpni
wej do katalogu obrazy.

chris.gif

To bya najtrudniejsza cieka.

Zaczynajc do strony coldplay.html
znajdujcej si w katalogu rock,
musielimy przesun si o DWA
poziomy do gry, aby dosta si
do katalogu muzyka; nastpnie
musielimy wej do katalogu
obrazy, nastpnie do katalogu
artysci i dopiero w nim moglimy
znale poszukiwany plik chris.gif.
O rany!

jeste tutaj!

105