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

Tworzenie stron
WWW. Kurs
Autor: Radosaw Sok
ISBN: 83-7361-310-2
Format: B5, stron: 320
Zawiera CD-ROM

Coraz czciej uytkownicy korzystajcy z Internetu chc aktywnie zaistnie w sieci

poprzez stworzenie wasnej strony WWW. Na przeszkodzie staje zazwyczaj nieznajomo
jzyka HTML, sucego do okrelania struktury i wygldu strony. Istniej oczywicie
dziesitki programw umoliwiajcych stworzenie wasnej strony w sposb niewiele
rnicy si od tworzenia elektronicznego dokumentu za pomoc programw takich jak
Microsoft Word, jednak tworzenie stron WWW z ich pomoc przy braku znajomoci choby
podstaw jzyka HTML, mona porwna z prac mechanika samochodowego, ktry potrafi
jedynie wypolerowa karoseri i wymieni filtr powietrza, nie majc przy tym pojcia,
po co w ogle to robi.
Ksika, ktr trzymasz w rku ma na celu zaznajomienie Ci z podstawami jzyka HTML.
Nie bdziesz potrzebowa w czasie nauki adnych zaawansowanych programw
wystarczy komputer osobisty pracujcy pod kontrol dowolnego systemu operacyjnego
wyposaony w nowoczesn przegldark WWW. Znajomo opisanych w ksice podstaw
zdecydowanie uatwi Ci ewentualn nauk bardziej skomplikowanych programw sucych
do wizualnego tworzenia rozbudowanych serwisw internetowych.
Poznasz:
Aplikacje uatwiajce tworzenie stron WWW
Tekst i jego formatowanie w HTML
Tworzenie odnonikw
Przygotowywanie grafiki i umieszczanie jej na stronach
Tabele i ramki
Kaskadowe arkusze stylw (CSS)
Szybkie tworzenie serwisw internetowych przy pomocy szablonw
Publikowanie serwisu WWW w sieci

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

Jeli szukasz solidnego podrcznika pozwalajcego na samodzielne poznanie tajemnic

tworzenia stron WWW, nie musisz szuka dalej. To, czego nauczysz si z tej ksiki,
pozwoli Ci tworzy wasne strony i w peni zaistnie w globalnej sieci.
Ksiki wydawnictwa Helion z serii Kurs przeznaczone s dla pocztkujcych
uytkownikw komputerw, ktrzy chc w szybkim czasie naby praktycznych
umiejtnoci, przydatnych w karierze zawodowej i codziennej pracy. Napisane przystpnym
jzykiem i bogato ilustrowane, s wspania pomoc przy samodzielnej nauce.
Przystpny i dogbny kurs jzyka HTML
Opis prostych i darmowych narzdzi uatwiajcych tworzenie i publikacj
serwisw WWW
Omwienie podstaw tworzenia grafiki na potrzeby stron WWW
Wprowadzenie do stosowania kaskadowych arkuszy stylw i JavaScriptu

Spis treci
Wstp..................................................................................................................................................................................7
Rozdzia 1. Nowa strona WWW .......................................................................................................................13
Pobieranie programu Webber z Sieci ............................................................................... 14
Uruchomienie programu Webber .................................................................................... 15
Wprowadzanie podstawowego kodu strony.................................................................... 16
Ustalanie tytuu strony WWW .......................................................................................... 18
Zapisywanie kodu strony na dysku twardym .................................................................. 19
Otwieranie zapisanej wczeniej strony WWW ................................................................ 21
Wywietlanie strony w przegldarce .................................................................................22
Aktualizowanie strony w przegldarce.............................................................................24
Kopiowanie fragmentu kodu HTML ............................................................................... 25
Wklejanie uprzednio skopiowanego fragmentu kodu HTML ..................................... 26
Wycinanie fragmentu kodu HTML..................................................................................27
Podsumowanie.....................................................................................................................28

Rozdzia 2. Tekst i jego atrybuty ....................................................................................................................29

Wprowadzanie tekstu.......................................................................................................... 30
Deklarowanie sposobu kodowania polskich znakw diakrytycznych ........................ 31
Zapisanie fragmentu tekstu czcionk pogrubion......................................................... 33
Zapisanie fragmentu tekstu kursyw ................................................................................ 35
Podkrelenie fragmentu tekstu .......................................................................................... 36
Twarde spacje........................................................................................................................ 37
Wczanie i wyczanie wywietlania znakw niedrukowalnych ................................. 38
Indeksy grne i dolne.......................................................................................................... 40
Zapisywanie fragmentu tekstu czcionk nieproporcjonaln........................................ 41
Zapisywanie wikszego fragmentu tekstu czcionk nieproporcjonaln ..................... 43
Zmiana sposobu wyrwnywania akapitu tekstu .............................................................44
amanie tekstu wewntrz akapitu ..................................................................................... 46
Zmiana koloru treci i ta akapitu.....................................................................................47
Zmiana koloru treci i ta fragmentu tekstu....................................................................49
Zmiana koloru ta strony ................................................................................................... 50

Spis treci
Zmiana rozmiaru czcionki ................................................................................................ 51
Zmiana kroju pisma............................................................................................................ 52
Okrelanie marginesw akapitu ........................................................................................ 54
Tworzenie nagwka............................................................................................................ 56
Wstawianie poziomej linii.................................................................................................. 58
Zmiana wygldu poziomej linii ........................................................................................ 59
Lista wypunktowana ........................................................................................................... 61
Zagniedanie listy .............................................................................................................. 63
Lista numerowana ............................................................................................................... 64
Wstawianie znakw specjalnych........................................................................................ 66
Kompletna, prosta strona................................................................................................... 68
Podsumowanie.....................................................................................................................70

Rozdzia 3. Odnoniki..........................................................................................................................................71
Tworzenie odnonika..........................................................................................................72
Tworzenie odnonika pocztowego.................................................................................... 73
Definiowanie domylnego tematu wiadomoci pocztowej........................................... 75
Definiowanie etykiety .........................................................................................................77
Tworzenie odnonika prowadzcego do etykiety ...........................................................78
Tworzenie odnonika prowadzcego do etykiety zadeklarowanej
na innej stronie WWW.....................................................................................................79
Otwieranie odnonika w nowym oknie ........................................................................... 81
Podsumowanie..................................................................................................................... 83

Rozdzia 4. Obrazy ................................................................................................................................................85

Instalacja programu IrfanView ..........................................................................................88
Uruchomienie programu IrfanView................................................................................. 96
Umieszczanie obrazu na stronie WWW ..........................................................................98
Opatrywanie obrazu komentarzem ................................................................................ 100
Okrelanie rozmiaru obrazu............................................................................................ 102
Zmiana rozmiarw obrazu .............................................................................................. 104
Zmiana szerokoci marginesw obrazu ......................................................................... 106
Zmiana szerokoci obramowania obrazu ...................................................................... 107
Zmiana koloru obramowania.......................................................................................... 109
Przeksztacanie obrazu w odnonik.................................................................................110
Zamieszczanie miniatur zdj ..........................................................................................112
Mapy odnonikw............................................................................................................. 120
Oblewanie obrazu tekstem............................................................................................... 125
Rezygnowanie z oblewania obrazu tekstem................................................................... 127
Usuwanie obrazu ............................................................................................................... 129
Uywanie obrazu jako ta strony ..................................................................................... 130
Podsumowanie....................................................................................................................131

Rozdzia 5. Tabele...............................................................................................................................................133
Jak w jzyku HTML opisuje si tabel ............................................................................ 134
Tworzenie tabeli................................................................................................................. 135
Wprowadzanie tekstu do komrki tabeli....................................................................... 138
Zmiana szerokoci kolumny tabeli................................................................................. 139

Spis treci

Zmiana szerokoci obramowania tabeli..........................................................................141

Zmiana koloru ta tabeli................................................................................................... 142
Zmiana koloru ta komrki tabeli .................................................................................. 143
Zmiana marginesw komrek tabeli.............................................................................. 145
Wstawianie nowego wiersza tabeli .................................................................................. 147
Wstawianie nowej kolumny tabeli .................................................................................. 149
Scalanie komrek tabeli.....................................................................................................151
Dzielenie scalonej komrki tabeli................................................................................... 154
Okrelenie pooenia zawartoci komrki tabeli ......................................................... 156
Tabela tworzca ukad strony .......................................................................................... 158
Podsumowanie................................................................................................................... 165

Rozdzia 6. Kaskadowe arkusze stylu........................................................................................................167

Zmiana czcionki, kolorw tekstu i ta oraz marginesw tekstu ................................. 170
Zmiana wygldu elementu jzyka HTML...................................................................... 172
Definiowanie klas wygldu elementu jzyka HTML ................................................... 174
Definiowanie niezalenych klas stylu............................................................................. 176
Zmiana wygldu odnonikw ......................................................................................... 178
Tworzenie zewntrznego arkusza stylu .......................................................................... 180
Podsumowanie................................................................................................................... 183

Rozdzia 7. Ramki................................................................................................................................................185
Budowa serwisu skadajcego si z ramek ...................................................................... 186
Tworzenie strony podzielonej na ramki ........................................................................ 187
Weryfikowanie podziau na ramki ................................................................................. 190
Tworzenie ramki z tytuem serwisu .................................................................................191
Tworzenie ramki z menu.................................................................................................. 192
Tworzenie ramki z treci................................................................................................. 193
Ustalanie pocztkowej zawartoci ramek....................................................................... 194
Tworzenie odnonika prowadzcego do wybranej ramki ........................................... 196
Tworzenie odnonika otwierajcego nowe okno przegldarki................................... 198
Blokowanie moliwoci zmiany szerokoci ramki.......................................................200
Zmiana obramowania ramki ...........................................................................................202
Tworzenie treci alternatywnej ........................................................................................203
Ramka osadzona................................................................................................................204
Usuwanie obramowania ramki osadzonej.....................................................................206
Podsumowanie...................................................................................................................207

Rozdzia 8. JavaScript....................................................................................................................................... 209

Quiz internetowy............................................................................................................... 210
Dynamiczne menu ............................................................................................................ 218
Podsumowanie...................................................................................................................222

Rozdzia 9. Serwis internetowy.................................................................................................................... 223

Strona gwna serwisu.......................................................................................................224
Dynamiczne tworzenie stron WWW..............................................................................225
Komponowanie stron WWW z szablonw ...................................................................226
Instalacja programu Compose ........................................................................................227

Spis treci
Tworzenie plikw szablonu .............................................................................................229
Tworzenie nowej strony na bazie szablonu ...................................................................232
Generowanie kodu strony na bazie szablonu................................................................ 233
Automatyczne generowanie serwisu WWW.................................................................. 236
Automatyczne wstawianie daty ostatniej aktualizacji strony......................................238
Definiowanie sw kluczowych serwisu .........................................................................239
Definiowanie opisu serwisu .............................................................................................240
Rejestrowanie strony WWW w wyszukiwarkach .......................................................... 241
Podsumowanie...................................................................................................................244

Rozdzia 10. Publikowanie serwisu WWW ................................................................................................. 245

Instalowanie programu SmartFTP..................................................................................247
Uruchomienie programu SmartFTP .............................................................................. 251
Tworzenie nowego poczenia.........................................................................................252
Zmiana parametrw poczenia...................................................................................... 255
Nawizywanie poczenia.................................................................................................257
Zrywanie poczenia z serwerem .....................................................................................259
Aktualizowanie listy plikw.............................................................................................260
Podwietlanie grupy plikw .............................................................................................262
Pobieranie plikw z serwera .............................................................................................264
Tworzenie nowego folderu na serwerze.......................................................................... 266
Umieszczanie plikw na serwerze ...................................................................................268
Weryfikacja poprawnoci opublikowania pliku HTML .............................................270
Zmiana nazwy folderu lub pliku umieszczonego na serwerze ...................................272
Zmiana praw dostpu do folderw lub plikw umieszczonych na serwerze ...........274
Usuwanie plikw przechowywanych na serwerze.........................................................276
Weryfikacja zgodnoci kodu HTML ze standardami ..................................................278
Podsumowanie...................................................................................................................280

Rozdzia 11. Zakoczenie...................................................................................................................................281

Dodatek A

Elementy jzyka HTML............................................................................................................ 283

Elementy podstawowe.......................................................................................................283
Atrybuty tekstu ..................................................................................................................284
Bloki tekstu.........................................................................................................................286
Odnoniki i etykiety..........................................................................................................288
Ramki ..................................................................................................................................289
Formularze ......................................................................................................................... 291
Listy......................................................................................................................................295
Obrazy.................................................................................................................................296
Tabele...................................................................................................................................298
Kaskadowe arkusze stylu ..................................................................................................302
Informacje o dokumencie ................................................................................................ 303
Programowanie .................................................................................................................. 304

Skorowidz...................................................................................................................................................................307

Jak w jzyku HTML opisuje si tabel

Tworzenie tabeli
Wprowadzanie tekstu do komrki tabeli
Zmiana szerokoci kolumny tabeli
Zmiana szerokoci obramowania tabeli
Zmiana koloru ta tabeli
Zmiana koloru ta komrki tabeli
Zmiana marginesw komrek tabeli
Wstawianie nowego wiersza tabeli
Wstawianie nowej kolumny tabeli
Scalanie komrek tabeli
Dzielenie scalonej komrki tabeli
Okrelenie pooenia zawartoci
komrki tabeli
Tabela tworzca ukad strony
Podsumowanie

Tabele

Tabele zazwyczaj kojarz si z wypenion gsto tekstem lub liczbami, podzielon liniami
na wiersze i kolumny kartk papieru; w dokumentach elektronicznych te najczciej
przyjmuj tak posta. Na stronach WWW tabele zyskuj jednak nowe znaczenie cho
mona je wykorzystywa do zapisywania danych, to najczciej su jednak do definiowania
ukadu strony np. dzielenia strony na rnej szerokoci kolumny wypenione tekstem,
na wzr szpalt w gazecie.
Mechanizm tabel jest mocnym punktem jzyka HTML moliwe jest definiowanie
rodzaju obramowania komrek tabeli (bd zrezygnowanie z niego), ustalanie marginesw
komrek tabeli, a nawet zagniedanie tabel (tworzenie tabeli wewntrz komrki innej
tabeli).
Osignicie mistrzostwa w operowaniu tabelami wymaga miesicy cikiej pracy, jednak
po przeczytaniu kilkunastu kolejnych stron powiniene opanowa podstawy tworzenia
i modyfikowania tabel, ktre pozwol Ci samodzielnie poszerza swoj wiedz.

134

Jak w jzyku HTML opisuje si tabel

Jak w jzyku HTML opisuje si tabel

Kod opisujcy tabel zawarty jest wewntrz elementu
. Niestety, olbrzymia
elastyczno jzyka HTML spowodowaa, e nie wystarczy utworzy element
,
poda liczb wierszy i kolumn tabeli i rozpocz wprowadzanie danych. By stworzy
tabel, konieczne jest stworzenie odrbnych elementw dla kadego wiersza i kadej
komrki tabeli! Powoduje to, e tworzenie tabel jest jednym z najbardziej
skomplikowanych i frustrujcych zada, przed ktrymi staj twrcy stron WWW.
Projektujc tabele w jzyku HTML, musisz cay czas pamita o podstawowej zasadzie:
najwaniejszym elementem tabeli jest wiersz, ktry z kolei podzielony jest na komrki.
Wierszowi tabeli odpowiada element
, za pojedynczej komrce element
 
(w przypadku komrek penicych funkcj nagwka) oraz

 (w przypadku zwykych
komrek danych). Elementy
  oraz

 musz by zawarte w elemencie
, a ten
z kolei w elemencie
. Struktura kodu tabeli wyglda zatem nastpujco:



 







 



Projektowanie tabeli najlepiej rozpocz od narysowania jej na kartce papieru. Zaufaj

mi pozwoli Ci to zaoszczdzi sporo czasu, gdy pomoe w przeoeniu podziau na
wiersze i komrki na prawidowy kod HTML tabeli.

Tworzenie tabeli

135

Tworzenie tabeli
Poniej przedstawiem kroki niezbdne do zbudowania najprostszej tabeli, zawierajcej
dwa wiersze po dwie komrki kady. Jeden z wierszy bdzie peni funkcj nagwka
tabeli, drugi za tymczasowo pusty funkcj wiersza danych.
Wyrnianie wiersza penicego funkcj nagwka tabeli nie ma na celu wycznie zmiany
jego wygldu: ten sam efekt wizualny mgby osign rwnie tworzc nagwek w sposb
identyczny, co zwyky wiersz. Jak ju jednak podkrelaem w poprzednich rozdziaach,
rwnie istotna co wygld dokumentu HTML jest jego struktura logiczna.

1. Umie kursor w miejscu kodu,

2
3

1
5
6

7
10

w ktrym powinna pojawi si

tabela. Tabele umieszcza si
zazwyczaj bezporednio wewntrz
elementu

 lub we wntrzu
innego elementu
.

2. Wprowad kod znacznika

otwierajcego element
.

3. Uzupenij kod elementu


atrybutem  z wartoci .
Wymusi to na przegldarce
rozszerzenie tabeli na ca
szeroko okna:




4. Uzupenij kod elementu


atrybutem  z wartoci 
(jeden). Nakae to przegldarce
wywietlanie obramowania tabeli,
co uatwi pniejsze zweryfikowanie
poprawnoci ukadu tabeli:



 

Jeli chcesz, by tabela bya wsza, podaj inn warto atrybutu
. Jeli cakowicie pominiesz atrybut
, przegldarka nada tabeli minimaln szeroko
pozwalajc na czytelne przedstawienie zawartych w tabeli danych.

136

Tworzenie tabeli

5. Otwrz element
, reprezentujcy wiersz tabeli.

6. Otwrz element
 , reprezentujcy komrk tabeli penic funkcj nagwka.
7. Wprowad tekst pierwszej komrki nagwka tabeli.
8. Zamknij element
 . Kod tworzcy pierwsz komrk powinien wyglda
nastpujco:



    


9. Powtrz operacje opisane w punktach 6., 7. i 8. dla drugiej komrki nagwka tabeli.
10. Zamknij element
, koczc tym samym opis pierwszego wiersza tabeli. Kod caego
wiersza powinien wyglda mniej wicej w taki sposb:

 



    




    


 

11. Otwrz kolejny element
,

by rozpocz wprowadzanie
drugiego wiersza tabeli.

18
11

13
14

12
16

17

15

12. Otwrz element


,
by stworzy komrk tabeli
zawierajc zwyky tekst
(niepenic funkcji nagwka).

13. Kombinacj Ctrl+Spacja wprowad

znak twardej spacji, aby komrka
nie zawieraa adnej treci.
14. Zamknij element

. Kod
tworzcy pierwsz komrk tego
wiersza powinien wyglda
nastpujco:




.

15. Powtrz operacje opisane

w punktach 6., 7. i 8. dla drugiej
komrki tego wiersza tabeli.
Element  koniecznie musi zawiera jak tre. Jeli komrka tabeli ma
pozosta pusta, wewntrz elementu  (a wic pomidzy znacznikami 
i 
 ) musi by zawarty znak twardej spacji (w kodzie HTML odpowiada mu
encja  ).

Tworzenie tabeli

137

16. Zamknij element
, koczc tym samym opis drugiego wiersza tabeli. Kod caego
wiersza powinien wyglda mniej wicej w taki sposb:

 











 

17. Zamknij element
, koczc tym samym opis caej tabeli.
18. Zapisz wprowadzone zmiany. Kod caej tabeli powinien wyglda w tym momencie
mniej wicej tak:



 

 



    




    


 

 











 



19. Uaktywnij okno przegldarki.

20

20. Zaktualizuj wywietlan stron.

19

21

21. W oknie przegldarki powinna si

pojawi tabela o zaoonym ukadzie.

138

Wprowadzanie tekstu do komrki tabeli

Wprowadzanie tekstu do komrki tabeli

1. Odszukaj element

 opisujcy
komrk tabeli, ktrej tre chcesz
zmieni.

2. Podwietl istniejc tre komrki

tabeli.

2
3. Wprowad now tre komrki
tabeli. Wprowadzany tekst zastpi
podwietlony fragment.

4. Zapisz wprowadzone zmiany.

3
5. Uaktywnij okno przegldarki.
6

6. Zaktualizuj wywietlan stron.

7. Oto nowa zawarto komrki
tabeli. Przegldarka samodzielnie
dopasowaa szeroko kolumn
tabeli do nowo wprowadzonej
treci.

Zmiana szerokoci kolumny tabeli

139

Zmiana szerokoci kolumny tabeli

Rzadko kiedy przegldarce uda si we waciwy sposb dopasowa szeroko kolumn tabeli
do zawartej w jej komrkach treci. Czasem te nie moe by mowy o automatycznym
modyfikowaniu szerokoci wybranych kolumn. Na szczcie jzyk HTML pozwala bardzo
dokadnie kontrolowa szeroko kolumn tabeli i okrela j w sposb dokadny co do
jednego piksela lub wzgldny.

1. Umie kursor wewntrz kodu

1
2

znacznika

 lub
 
otwierajcego komrk tabeli
nalec do wybranej kolumny
tabeli. Komrka ta koniecznie musi
nalee do pierwszego wiersza tabeli.

2. Uzupenij kod elementu
 

lub

 atrybutem  i podaj
podan szeroko kolumny:
bezwzgldn w pikselach:




wzgldn w procentach:




Szerokoci wszystkich kolumn musz by okrelone w pierwszym wierszu tabeli.

Szerokoci komrek nalecych do kolejnych wierszy bd identyczne z szerokoci komrek lecych powyej nich; nie ma moliwoci selektywnej zmiany
szerokoci komrek wybranych wierszy.

Kolumny, ktrych szeroko nie zostanie rcznie okrelona nadal bd automatycznie rozszerzane lub zwane przez przegldark w zalenoci od ich
zawartoci oraz od szerokoci pozostaych kolumn tabeli.

140

Zmiana szerokoci kolumny tabeli

3. Uaktywnij okno przegldarki.

3

4. Zaktualizuj wywietlan stron.

5. Kolumna tabeli, ktrej komrka

naleca do pierwszego wiersza

otrzymaa atrybut  staa
si wyranie wsza.

6. Druga kolumna tabeli zostaa

automatycznie rozszerzona tak,
aby obejmowa pozostae 60%
szerokoci tabeli.

Zmiana szerokoci obramowania tabeli

141

Zmiana szerokoci obramowania tabeli

1. Umie kursor wewntrz kodu
znacznika
 otwierajcego
kod tabeli.

3
1

2. Zmie warto atrybutu ,

podajc szeroko obramowania
tabeli. Podanie wartoci  (zero)
spowoduje cakowite ukrycie
obramowania:


 



  

3. Zapisz wprowadzone zmiany.

4. Uaktywnij okno przegldarki.
5

5. Zaktualizuj wywietlan stron.

6. Nadanie atrybutowi  wartoci
 spowodowao zniknicie
obramowania tabeli.

Prawie zawsze uywa si tabel pozbawionych obramowania po prostu wygldaj one znacznie lepiej.

142

Zmiana koloru ta tabeli

Zmiana koloru ta tabeli

1. Umie kursor wewntrz kodu
4

znacznika
, otwierajcego

kod tabeli, ktrej kolor ta chcesz
zmieni.

2. Uzupenij kod znacznika


2

atrybutem .

3. Jako warto atrybutu  wprowad

atrybut stylu  !"#$%  oraz
kod koloru ta tabeli:

 
 




4. Zapisz wprowadzone zmiany.

5. Uaktywnij okno przegldarki.
6

6. Zaktualizuj wywietlan stron.

7. To tabeli (oraz wszystkich jej
komrek) przyjo now barw.

Zmiana koloru ta komrki tabeli

143

Zmiana koloru ta komrki tabeli

Dokonana przed chwil zmiana koloru ta tabeli spowodowaa zmian koloru ta
wszystkich jej komrek. Istnieje te moliwo wybirczego zmieniania koloru ta
pojedynczych komrek tabeli.
W zalenoci od szerokoci marginesw komrek tabeli (o ktrych dowiesz si wicej
ju za chwil), zmiana koloru ta tabeli poczona ze zmian koloru ta wszystkich jej
komrek (na inny kolor) moe by ciekawym sposobem uzyskania barwnego
obramowania tabeli.

1. Umie kursor wewntrz kodu

znacznika

 lub
  otwierajcego
kod komrki tabeli, ktrej kolor ta
chcesz zmieni.

4
3

2. Uzupenij kod znacznika

atrybutem .

3. Jako warto atrybutu  wprowad

atrybut stylu  !"#$%  oraz
kod koloru ta komrki tabeli:


 
 




 
 




4. Zapisz wprowadzone zmiany.

5. Uaktywnij okno przegldarki.
6

6. Zaktualizuj wywietlan stron.

7. To komrki tabeli przyjo now
barw.

144

Zmiana koloru ta komrki tabeli

8. Powtrz powysze operacje dla

pozostaych komrek tabeli.
Czy takie obramowanie tabeli nie
wyglda lepiej ni prosta ramka
oferowana przez przegldark?

Zmiana marginesw komrek tabeli

145

Zmiana marginesw komrek tabeli

Aby cakowicie kontrolowa wygld tabeli, potrzebna jest jeszcze moliwo wpywania
na szeroko marginesw jej komrek. Jzyk HTML daje moliwo regulowania
szerokoci marginesw komrek tabeli oraz odstpw midzy komrkami.

1. Umie kursor wewntrz kodu

znacznika
 otwierajcego
kod tabeli, ktrej szeroko
marginesw chcesz zmodyfikowa.

2. Uzupenij kod znacznika


atrybutem &$" okrelajcym

szeroko wewntrznego marginesu
kadej z komrek tabeli
(przyjmujcego barw ta
komrki tabeli).

3. Uzupenij kod znacznika


atrybutem & $" okrelajcym
szeroko odstpu midzy ssiednimi
komrkami tabeli (przyjmujcego
barw ta tabeli):









 



 

4. Zapisz wprowadzone zmiany.

5. Uaktywnij okno przegldarki.
6

6. Zaktualizuj wywietlan stron.

7

7. Za margines komrki odpowiada

atrybut &$"

8. a za szeroko odstpu midzy

komrkami atrybut & $".

146

Zmiana marginesw komrek tabeli




 




 

Wstawianie nowego wiersza tabeli

147

Wstawianie nowego wiersza tabeli

Wstawienie nowego wiersza tabeli jest operacj banaln wystarczy w odpowiednim
miejscu kodu wstawi nowy element
 i uzupeni go odpowiedni liczb elementw


 lub
 . Musisz jedynie pamita, by w nowo wstawianym wierszu tabeli liczba
komrek bya identyczna z liczb komrek znajdujcych si w pozostaych wierszach.

1. Umie kursor zaraz za

8
1

2
3

6
7

znacznikiem
' zamykajcym

kod wiersza poprzedzajcy
wstawiany wiersz tabeli (lub zaraz
przed pierwszym znacznikiem

wystpujcym wewntrz elementu

, jeli wstawiany wiersz ma
by pierwszym wierszem tabeli).

2. Otwrz nowy element
.

3. Wprowad element

 (lub
 )
opisujcy pierwsz komrk
nowego wiersza. Jeli chcesz,
moesz od razu uzupeni kod
tego elementu dodatkowymi
atrybutami, np. atrybutem 
opisujcym wygld komrki.

4. Wprowad tre wstawianej komrki

tabeli. Jeli chcesz, by komrka bya
pusta, umie w niej znak twardej
spacji za pomoc kombinacji
klawiszy Ctrl+Spacja.

5. Zamknij element

 (lub
 ),
koczc tym samym opis pierwszej
komrki nowego wiersza tabeli.

6. Powtrz operacje opisane

w punktach 3., 4. i 5. dla pozostaych
komrek nowego wiersza tabeli.
Pamitaj, by wstawiany wiersz
zawiera tyle samo komrek, co
pozostae wiersze tej samej tabeli.

148

Wstawianie nowego wiersza tabeli

7. Zamknij element
, koczc tym samym opis nowego wiersza tabeli.
8. Zapisz wprowadzone zmiany.
9. Uaktywnij okno przegldarki.
10
11

10. Zaktualizuj wywietlan stron.

11. Oto nowy, pusty wiersz tabeli.

Jeli po rozbudowaniu kodu tabeli o nowy element  tabela dosownie rozpada si, mieszajc zawarto komrek lub koczc si przedwczenie, na pewno
popenie jaki bd w kodzie. W takim przypadku jeszcze raz sprawd, czy
zamkne we waciwej kolejnoci wszystkie elementy jzyka HTML skadajce si na kod tabeli, oraz czy nowo wstawiony kod wiersza tabeli zawiera tyle
samo elementw  lub  , co pozostae wiersze.

Wstawianie nowej kolumny tabeli

149

Wstawianie nowej kolumny tabeli

Niestety, struktura kodu tabeli w jzyku HTML tabela opisana jest wiersz po wierszu,
za kady wiersz zawiera identyczn liczb komrek powoduje, e rozszerzenie tabeli
o dodatkow kolumn jest znacznie bardziej skomplikowane i pracochonne ni wstawienie
nowego wiersza. Wstawienie nowej kolumny polega na dooeniu nowych elementw


lub
  do kadego istniejcego wiersza tabeli.

1. Umie kursor w miejscu kodu

1

pierwszego wiersza tabeli, w ktrym

ma si pojawi komrka tworzca
now kolumn tabeli.

2
7

2. Wprowad kod elementu



(lub
 , jeli komrka ma peni
funkcj nagwka tabeli).

3. Uzupenij kod utworzonego

elementu

 (lub
 ) atrybutem
 opisujcym szeroko
wstawianej kolumny tabeli.

4. Jeli chcesz, uzupenij kod

utworzonego elementu
dodatkowymi atrybutami,
na przykad atrybutem 
opisujcym wygld komrki tabeli.

5. Wprowad tre komrki tabeli.

Jeli chcesz, by komrka bya pusta,
umie w niej znak twardej spacji
przy uyciu kombinacji klawiszy
Ctrl+Spacja.

6. Zamknij element

 (lub
 ),
koczc tym samym opis nowej
komrki tabeli.
Jeli chcesz, aby przegldarka automatycznie ustalaa szeroko kolumny, pomi
wprowadzanie atrybutu
.

150

Wstawianie nowej kolumny tabeli

7. Powtrz operacje opisane w punktach 2., 4., 5. i 6. we wszystkich pozostaych

wierszach tabeli. W kolejnych wierszach nie wprowadzaj ju atrybutu 
opisujcego szeroko kolumny przegldarka dla wszystkich nowych komrek
zastosuje szeroko narzucon w pierwszym wierszu tabeli.

8. Zapisz wprowadzone zmiany.

9. Uaktywnij okno przegldarki.
10

10. Zaktualizuj wywietlan stron.

11. Oto nowa, pusta kolumna tabeli.

11

Jeli po rozbudowaniu kodu tabeli o elementy  lub  skadajce si na

nowy wiersz tabela dosownie rozpada si, mieszajc zawarto komrek lub
koczc si przedwczenie, na pewno popenie jaki bd w kodzie. W takim
przypadku jeszcze raz sprawd, czy zamkne wszystkie elementy jzyka HTML
skadajce si na kod tabeli we waciwej kolejnoci, oraz czy kady wiersz tabeli
zawiera tyle samo elementw  lub  , co pozostae.

Scalanie komrek tabeli

151

Scalanie komrek tabeli

Jeli tworzye kiedy za pomoc edytora tekstw lub arkusza kalkulacyjnego tabele
o skomplikowanym ukadzie, zetkne si pewnie z funkcj scalania komrek tabeli,
umoliwiajc utworzenie wsplnego nagwka obejmujcego swoim zasigiem kilka
wierszy lub kolumn tabeli. Scalanie komrek tabeli jest rwnie dostpne w jzyku HTML;
mona wrcz powiedzie, e jego rola jest znacznie wiksza, gdy tabele umieszczane na
stronie WWW su nie tylko tabelaryzowaniu danych, ale rwnie tworzeniu ukadu
strony oraz rozmieszczaniu jej elementw takich jak fragmenty tekstu czy osadzone
na stronie obrazy. Niestety, tworzenie kodu HTML odpowiedzialnego za ukad tabeli
zawierajcej scalone komrki jest do trudne.
Podstawowa trudno przy tworzeniu kodu scalonych komrek polega na tym, e scalanie
wymaga zamania zasady obecnoci takiej samej liczby komrek w kadym wierszu tabeli.
Dwie scalone ze sob komrki opisywane bd w kodzie przez tylko jeden element

,
co znacznie utrudnia weryfikacj poprawnoci kodu tabeli.

Scalanie komrek tabeli w poziomie

Scalanie dwch lecych obok siebie komrek tabeli w poziomie jest jeszcze w miar atwe
naley tylko usun jeden z elementw

, za kod drugiego uzupeni jednym atrybutem.

1. W poniszym przykadzie dokonasz

scalenia tych dwch komrek tabeli.

2. Podwietl kod elementu



3
2

odpowiadajcego jednej ze scalanych

komrek.

3. Nacinij klawisz Delete, aby usun

podwietlony kod.

152

Scalanie komrek tabeli

Scaleniu niekoniecznie musz podlega tylko dwie komrki tabeli. Moesz scali
ze sob dowoln liczb komrek. Scalajc N komrek tabeli, musisz usun N1
elementw  , pozostawiajc w kodzie tylko jeden.

4. Umie kursor wewntrz jedynego

6

pozostawionego elementu

.

5. Uzupenij kod elementu



atrybutem &$ z parametrem
okrelajcym liczb komrek tabeli
zastpowanych pozostawionym
pojedynczym elementem

:

4
5


 !   

"# $$$$



6. Zapisz wprowadzone zmiany.

8

7. Uaktywnij okno przegldarki.

8. Zaktualizuj wywietlan stron.
9. Dwie komrki tabeli zostay

poczone. Dwa odrbne elementy


 (znajdujce si obok siebie
w jednym wierszu tabeli) zastpi
jeden, uzupeniony atrybutem
&$(.

Scalanie komrek w pionie

Scalanie dwch lecych nad sob w pionie komrek tabeli wymaga rozszerzenia o atrybut
 &$ elementu

 lecego w najwyszym wierszu oraz usunicia elementu

 lecego
w wierszu poniej.
W przypadku scalania wicej ni dwch komrek naley usun odpowiednio
wicej elementw  w lecych poniej wierszach tabeli.

Scalanie komrek tabeli

153

1. W poniszym przykadzie
dokonasz scalenia tych dwch
komrek tabeli.

2. Podwietl kod elementu



odpowiadajcego jednej ze
scalanych komrek, lecej
w niszym z dwch wierszy,
w ktrych znajduj si scalane
komrki.

3. Nacinij klawisz Delete, aby usun

podwietlony kod.

4. Umie kursor wewntrz jedynego

pozostawionego elementu

.

5. Uzupenij kod elementu




atrybutem  &$ z parametrem

okrelajcym liczb komrek tabeli
zastpowanych pozostawionym
pojedynczym elementem

:


  !   

"# $$$$



6. Zapisz wprowadzone zmiany.

7

7. Uaktywnij okno przegldarki.

8. Zaktualizuj wywietlan stron.
9. Dwie komrki tabeli zostay

poczone. Dwa odrbne elementy


 (znajdujce si w dwch
rnych wierszach tabeli) zastpi
jeden, uzupeniony atrybutem
 &$(.

154

Dzielenie scalonej komrki tabeli

Dzielenie scalonej komrki tabeli

Aby anulowa operacj scalenia komrek tabeli, naley wykona dwie operacje:
usun atrybut  &$ lub &$ z elementu

 odpowiadajcego za scalon
komrk (zamieni j z powrotem w najzwyklejsz komrk tabeli),
odtworzy usunite w czasie scalania elementy

 tak, aby przywrci odpowiedni
liczb elementw w kadym wierszu (elemencie
) tabeli.
W poniszym przykadzie dokonuj anulowania scalenia dwch komrek tabeli
w poziomie.

1. Celem wiczenia bdzie rozdzielenie

tych dwch scalonych ze sob
komrek.

1
2. Podwietl kod atrybutu &$,
5
2
3
4

zmieniajcego element


ze zwykej komrki tabeli
w komrk scalajc.

3. Nacinij klawisz Delete, by usun

podwietlony kod.

4. Zaraz za kodem elementu



zawierajcego jeszcze przed chwil
atrybut &$ wprowad kod
nowego elementu

. Utworzy on
komrk tabeli wyrwnujc liczb
komrek w wierszu z liczb komrek
istniejcych w pozostaych
wierszach tabeli:




.

5. Zapisz wprowadzone zmiany.

Dzielenie scalonej komrki tabeli

155

6. Uaktywnij okno przegldarki.

6

7. Zaktualizuj wywietlan stron.

8. Scalona komrka zostaa podzielona
na dwie niezalene komrki.

156

Okrelenie pooenia zawartoci komrki tabeli

Okrelenie pooenia zawartoci

komrki tabeli
Tekst zawarty w komrce tabeli moe by wyrwnywany w dwojaki sposb:
w poziomie do lewego lub prawego marginesu, do obu marginesw
lub wycentrowany,
w pionie do grnego lub dolnego marginesu albo wycentrowany.
Szczeglnie istotna jest moliwo definiowania wyrwnywania tekstu w pionie, gdy
przegldarki WWW najczciej domylnie centruj zawarto komrki, co powoduje
nieelegancki wygld tabel zawierajcych w komrkach na zmian dugie i krtkie
fragmenty tekstu:

1. Umie kursor wewntrz elementu


 (lub
 ), ktrego sposb

wyrwnywania chcesz zmieni.

2. Jeli element ten nie jest jeszcze

wyposaony w atrybut ,
uzupenij kod.

Okrelenie pooenia zawartoci komrki tabeli

157

3. Wewntrz atrybutu  wprowad atrybut stylu )%"$ z parametrem

okrelajcym sposb wyrwnania zawartoci komrki tabeli w poziomie:
* do lewego marginesu,
" do prawego marginesu,
$ wycentrowany,
+#* do obu marginesw (wyjustowany).

4. Wewntrz atrybutu  wprowad atrybut stylu , %"$ z parametrem

okrelajcym sposb wyrwnania zawartoci komrki tabeli w pionie:
& do grnego marginesu,
- do dolnego marginesu,
$ wycentrowany.


%&  
  
'    
  %

5. Zapisz wprowadzone zmiany.

1. Uaktywnij okno przegldarki.
7

7. Zaktualizuj wywietlan stron.

8. Zawarto tej komrki zostaa

wycentrowana w poziomie
()."$/. $0) oraz
wyrwnana do grnego marginesu
(, %"$/.&0).

158

Tabela tworzca ukad strony

Tabela tworzca ukad strony

Podstawowym celem tabeli jest przedstawienie zbioru danych w eleganckiej, tabelarycznej
postaci. Dostpny w jzyku HTML mechanizm tabel jest jednak tak elastyczny, i umoliwia
budowanie za pomoc tabel ukadu caej strony WWW (dzielenie jej na prostoktne
fragmenty odpowiadajce szpaltom gazety).
W poniszym przykadzie poka, w jaki sposb wykorzysta mechanizm tabel do
stworzenia prostego ukadu strony podzielonej na nastpujce fragmenty:

Tworzc bardziej skomplikowane tabele, moesz wspomaga si takimi wanie

szkicami. Uatwiaj one okrelenie liczby wymaganych wierszy i kolumn tabeli
oraz oznaczenie komrek, ktre powinny zosta scalone.

1. Uruchom program Webber,

aby rozpocz prac nad

nowym kodem.

2. Wprowad podstawowy kod kadej strony WWW:

()*+,-./".0123+%45+),)6,728$,   /9%

"




 7:    444
 

Tabela tworzca ukad strony

159


"; '%+,%%&"  <<=>?%











"

3. Wprowad nagwek strony jako

tre elementu
:

3
5
6

7:    444


4. Rozpocznij wprowadzanie kodu

tabeli, wpisujc znacznik
otwierajcy
 wraz
z atrybutami:
 aby tabela miaa
szeroko okna przegldarki,
& $" aby usun
odstpy midzy komrkami,
&$"1 aby komrki
tabeli miay margines
o szerokoci 5 pikseli z kadej
strony,
 !"#$% /.#0
aby to tabeli miao niebiesk
barw.


%%

 %%

%=%

% 
 %

5. Wprowad trzy pene elementy

. Zgodnie ze schematem tabeli

potrzebne s trzy wiersze (jeden na

dat aktualizacji strony, jeden na
menu i tre artykuu, jeden na
stopk strony std liczba
elementw
).

6. Zamknij kod tabeli znacznikiem

zamykajcym
'.

160

Tabela tworzca ukad strony

7. Poniewa pierwszy wiersz tabeli ma

7
8
9

zawiera jedynie dat ostatniej

aktualizacji strony, wystarczy jedna,
szeroka komrka scalajca
( &$(). Wprowad jej kod:


?



8. W drugim wierszu tabeli potrzebne

s ju dwie odrbne komrki tabeli
o rnej szerokoci:
komrka zawierajca menu
powinna mie sta szeroko,
niezalen od szerokoci okna
przegldarki,
komrka zawierajca tre
artykuu powinna dostosowywa
swoj szeroko do szerokoci
okna przegldarki.


' %%
%%








9. Ostatni wiersz, zawierajcy stopk

strony, moe zawiera tylko jedn
scalon komrk:


?



10. Uzupenij kod pierwszego

13
10

12

11

elementu

 w drugim wierszu
tabeli (komrka zawierajca menu)
atrybutem ,"$&. Dziki
temu niezalenie od rozmiaru
ssiedniej komrki menu zawsze
bdzie dosunite do grnej
krawdzi komrki.

11. Uczy to samo z drug komrk tego wiersza dziki temu tekst artykuu, nawet
gdyby by niezwykle krtki, zawsze bdzie dosunity do grnej krawdzi komrki.

12. Uzupenij kod prawej komrki drugiego wiersza (komrki zawierajcej tekst artykuu)
atrybutem  !"#$% /. 0. Nadasz w ten sposb tej komrce biay
kolor ta.

Tabela tworzca ukad strony

161

 


' %%
%%




% 
  %' %%



 

13. Zapisz wprowadzone zmiany.

14. Uaktywnij okno przegldarki.
15

14

15. Zaktualizuj wywietlan stron.

16. Strona zaczyna wyglda jak
przygotowany wczeniej szkic.

16
17. Wr do edycji kodu strony
w oknie programu Webber.

17

18. Umie kursor pomidzy

18

21

znacznikami elementu


tworzcego jedyn komrk
pierwszego wiersza tabeli.

20

19

19. Otwrz element
2, ktry ma

zawiera informacj o dacie
ostatniej aktualizacji strony.
Wykorzystaj nastpujce atrybuty
stylu tego elementu (podane jako
tre atrybutu ):

*$%*-/.3$%* aby napis zoony by czcionk bezszeryfow,

/. aby tekst mia kolor ty i odznacza si na niebieskim tle,
)%"$/." aby data ostatniej aktualizacji strony dosunita bya do
prawego marginesu.

%@@"  A @ &  %

20. Wprowad tekst informujcy o dacie ostatniej aktualizacji strony.

21. Zamknij element
2. Cay jego kod powinien wyglda mniej wicej tak:

%@@"  A @ &  %

) : : 
?5<$



162

Tabela tworzca ukad strony

22

24
23
25
22. Umie kursor pomidzy znacznikami elementu

 tworzcego pierwsz komrk
drugiego wiersza tabeli. Bdzie ona zawiera menu suce do nawigowania po stronach
Twojego serwisu.

23. Aby nada caemu menu jednolity wygld, wprowad kod elementu
425 wraz
z nastpujcymi atrybutami stylu (podanymi jako tre atrybutu ):
)%"$/. $ aby cay tekst menu by wyporodkowany,
*$%*-/.3.$%* aby tekst menu by zoony czcionk bezszeryfow.

%&  @@"  A @%

Niestety, nie moesz zdefiniowa w tak prosty sposb koloru tekstu caego menu, gdy elementy  tworzce odnoniki (niezbdne do zbudowania menu)
anuluj zmiany poczynione w nadrzdnym elemencie.

24. Wprowad tre menu w postaci kolejnych akapitw tekstu (elementy
2)
zawierajcych odnoniki (elementy
). Pamitaj, by kademu elementowi

przyporzdkowa kolor umoliwiajcy odczytanie tekstu na ciemnym tle:


 @% 
&$"%%  %B C#




 @%  $"%%  %*
D 



25. Zamknij element
425.

Tabela tworzca ukad strony

163

26
27

26. Umie kursor wewntrz znacznikw drugiego elementu


 w tym samym wierszu
tabeli.

27. Wprowad dowolny tekst.

32

28

31

30

29

28. Umie kursor pomidzy znacznikami


 komrki tabeli w ostatnim jej wierszu.
29. Otwrz element
2, ktry ma zawiera tekst stopki strony. Wykorzystaj nastpujce
atrybuty stylu tego elementu (podane jako tre atrybutu ):
*$%*-/.3$%* aby napis zoony by czcionk bezszeryfow,
/. aby tekst mia kolor ty i odznacza si na niebieskim tle,
*$%6/.7& aby czcionka miaa rozmiar 9 punktw.

%@@"  A @@ > %

30. Wprowad dowolny tekst stopki strony.

164

Tabela tworzca ukad strony

31. Zamknij element
2:

%@@"  A @@ > %

+ E?5F7 #@@




32. Zapisz wprowadzone zmiany.

33. Uaktywnij okno przegldarki.
34

33
35

34. Zaktualizuj wywietlan stron.

35. Oto gotowy ukad strony. Moesz
kopiowa ten plik pod rnymi
nazwami, zmieniajc tylko tre
artykuu umieszczonego na stronie.

Podsumowanie

165

Podsumowanie
Tabele stanowi bardzo istotny element jzyka HTML. Wbrew pozorom rzadko su one
do przedstawiania w postaci tabelarycznej zestaww danych. Najczstszym zastosowaniem
tabel jest dzielenie strony na obszary (takie jak obszar nagwka, obszar menu czy obszar
treci) wypenione rnorodnym tem.
Tworzc tabele, pamitaj o kilku zasadach:
kod tabeli wprowadza si zawsze wiersz po wierszu,
kady wiersz tabeli (element
) zawiera kilka komrek (elementy

 lub
 ),
w tabeli niezawierajcej scalonych komrek liczba komrek w kadym wierszu
powinna by identyczna,
komrka scalona obejmujca N wierszy lub N kolumn odpowiada N odrbnym
elementom

 lub
 , zatem tworzc scalon komrk naley usun nadmiarowe
komrki tabeli wraz z ich zawartoci,
bdny kod tabeli najczciej owocuje efektem rozsypywania si tabeli pojawiaj
si puste wiersze lub kolumny, komrki nachodz na siebie lub te tabela urywa si
nagle i przeksztaca w zwyky tekst.