Tworzenie stron WWW. Kurs

Wydawnictwo Helion

ul. Chopina 6

44-100 Gliwice

tel. (32)230-98-63

e-mail: [email protected]

PRZYK£ADOWY ROZDZIA£PRZYK£ADOWY ROZDZIA£

IDZ DOIDZ DO

ZAMÓW DRUKOWANY KATALOGZAMÓW DRUKOWANY KATALOG

KATALOG KSI¥¯EKKATALOG KSI¥¯EK

TWÓJ KOSZYKTWÓJ KOSZYK

CENNIK I INFORMACJECENNIK I INFORMACJE

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW CENNIKZAMÓW CENNIK

CZYTELNIACZYTELNIA

FRAGMENTY KSI¥¯EK ONLINEFRAGMENTY KSI¥¯EK ONLINE

SPIS TRE�CISPIS TRE�CI

DODAJ DO KOSZYKADODAJ DO KOSZYKA

KATALOG ONLINEKATALOG ONLINE

Tworzenie stronWWW. Kurs

Autor: Rados³aw Sokó³

ISBN: 83-7361-310-2

Format: B5, stron: 320

Zawiera CD-ROM

Coraz czê�ciej u¿ytkownicy korzystaj¹cy z Internetu chc¹ aktywnie zaistnieæ w sieci

poprzez stworzenie w³asnej strony WWW. Na przeszkodzie staje zazwyczaj nieznajomo�æ

jêzyka HTML, s³u¿¹cego do okre�lania struktury i wygl¹du strony. Istniej¹ oczywi�cie

dziesi¹tki programów umo¿liwiaj¹cych stworzenie w³asnej strony w sposób niewiele

ró¿ni¹cy siê od tworzenia elektronicznego dokumentu za pomoc¹ programów takich jak

Microsoft Word, jednak tworzenie stron WWW z ich pomoc¹ przy braku znajomo�ci choæby

podstaw jêzyka HTML, mo¿na porównaæ z prac¹ mechanika samochodowego, który potrafi

jedynie wypolerowaæ karoseriê i wymieniæ filtr powietrza, nie maj¹c przy tym pojêcia,

po co w ogóle to robi.

Ksi¹¿ka, któr¹ trzymasz w rêku ma na celu zaznajomienie Ciê z podstawami jêzyka HTML.

Nie bêdziesz potrzebowa³ w czasie nauki ¿adnych zaawansowanych programów —

wystarczy komputer osobisty pracuj¹cy pod kontrol¹ dowolnego systemu operacyjnego

wyposa¿ony w nowoczesn¹ przegl¹darkê WWW. Znajomo�æ opisanych w ksi¹¿ce podstaw

zdecydowanie u³atwi Ci ewentualn¹ naukê bardziej skomplikowanych programów s³u¿¹cych

do wizualnego tworzenia rozbudowanych serwisów internetowych.

Poznasz:

• Aplikacje u³atwiaj¹ce tworzenie stron WWW

• Tekst i jego formatowanie w HTML

• Tworzenie odno�ników

• Przygotowywanie grafiki i umieszczanie jej na stronach

• Tabele i ramki

• Kaskadowe arkusze stylów (CSS)

• Szybkie tworzenie serwisów internetowych przy pomocy szablonów

• Publikowanie serwisu WWW w sieci

Je�li szukasz solidnego podrêcznika pozwalaj¹cego na samodzielne poznanie tajemnic

tworzenia stron WWW, nie musisz szukaæ dalej. To, czego nauczysz siê z tej ksi¹¿ki,

pozwoli Ci tworzyæ w³asne strony i w pe³ni zaistnieæ w globalnej sieci.

Ksi¹¿ki wydawnictwa Helion z serii „Kurs” przeznaczone s¹ dla pocz¹tkuj¹cych

u¿ytkowników komputerów, którzy chc¹ w szybkim czasie nabyæ praktycznych

umiejêtno�ci, przydatnych w karierze zawodowej i codziennej pracy. Napisane przystêpnym

jêzykiem i bogato ilustrowane, s¹ wspania³¹ pomoc¹ przy samodzielnej nauce.

• Przystêpny i dog³êbny kurs jêzyka HTML

• Opis prostych i darmowych narzêdzi u³atwiaj¹cych tworzenie i publikacjê

serwisów WWW

• Omówienie podstaw tworzenia grafiki na potrzeby stron WWW

• Wprowadzenie do stosowania kaskadowych arkuszy stylów i JavaScriptu

http://helion.pl/view/2547w



http://helion.pl/add/2547w/twwkur




mailto:[email protected]

http://helion.pl/view/2547w/twwkur.htm

Spis treści

Wstęp..................................................................................................................................................................................7

Rozdział 1. Nowa strona WWW.......................................................................................................................13Pobieranie programu Webber z Sieci ............................................................................... 14Uruchomienie programu Webber .................................................................................... 15Wprowadzanie podstawowego kodu strony.................................................................... 16Ustalanie tytułu strony WWW .......................................................................................... 18Zapisywanie kodu strony na dysku twardym.................................................................. 19Otwieranie zapisanej wcześniej strony WWW ................................................................ 21Wyświetlanie strony w przeglądarce .................................................................................22Aktualizowanie strony w przeglądarce.............................................................................24Kopiowanie fragmentu kodu HTML............................................................................... 25Wklejanie uprzednio skopiowanego fragmentu kodu HTML.....................................26Wycinanie fragmentu kodu HTML..................................................................................27Podsumowanie.....................................................................................................................28

Rozdział 2. Tekst i jego atrybuty ....................................................................................................................29Wprowadzanie tekstu.......................................................................................................... 30Deklarowanie sposobu kodowania polskich znaków diakrytycznych........................ 31Zapisanie fragmentu tekstu czcionką pogrubioną......................................................... 33Zapisanie fragmentu tekstu kursywą ................................................................................ 35Podkreślenie fragmentu tekstu .......................................................................................... 36Twarde spacje........................................................................................................................ 37Włączanie i wyłączanie wyświetlania znaków niedrukowalnych ................................. 38Indeksy górne i dolne.......................................................................................................... 40Zapisywanie fragmentu tekstu czcionką nieproporcjonalną........................................ 41Zapisywanie większego fragmentu tekstu czcionką nieproporcjonalną ..................... 43Zmiana sposobu wyrównywania akapitu tekstu.............................................................44Łamanie tekstu wewnątrz akapitu.....................................................................................46Zmiana koloru treści i tła akapitu.....................................................................................47Zmiana koloru treści i tła fragmentu tekstu....................................................................49Zmiana koloru tła strony ................................................................................................... 50

4 Spis treści

Zmiana rozmiaru czcionki ................................................................................................ 51Zmiana kroju pisma............................................................................................................ 52Określanie marginesów akapitu ........................................................................................ 54Tworzenie nagłówka............................................................................................................ 56Wstawianie poziomej linii.................................................................................................. 58Zmiana wyglądu poziomej linii ........................................................................................ 59Lista wypunktowana ........................................................................................................... 61Zagnieżdżanie listy .............................................................................................................. 63Lista numerowana ............................................................................................................... 64Wstawianie znaków specjalnych........................................................................................ 66Kompletna, prosta strona...................................................................................................68Podsumowanie.....................................................................................................................70

Rozdział 3. Odnośniki..........................................................................................................................................71Tworzenie odnośnika..........................................................................................................72Tworzenie odnośnika pocztowego.................................................................................... 73Definiowanie domyślnego tematu wiadomości pocztowej........................................... 75Definiowanie etykiety .........................................................................................................77Tworzenie odnośnika prowadzącego do etykiety ...........................................................78Tworzenie odnośnika prowadzącego do etykiety zadeklarowanej

na innej stronie WWW.....................................................................................................79Otwieranie odnośnika w nowym oknie ........................................................................... 81Podsumowanie..................................................................................................................... 83

Rozdział 4. Obrazy ................................................................................................................................................85Instalacja programu IrfanView..........................................................................................88Uruchomienie programu IrfanView.................................................................................96Umieszczanie obrazu na stronie WWW ..........................................................................98Opatrywanie obrazu komentarzem................................................................................ 100Określanie rozmiaru obrazu............................................................................................ 102Zmiana rozmiarów obrazu .............................................................................................. 104Zmiana szerokości marginesów obrazu ......................................................................... 106Zmiana szerokości obramowania obrazu...................................................................... 107Zmiana koloru obramowania.......................................................................................... 109Przekształcanie obrazu w odnośnik.................................................................................110Zamieszczanie miniatur zdjęć ..........................................................................................112Mapy odnośników............................................................................................................. 120Oblewanie obrazu tekstem............................................................................................... 125Rezygnowanie z oblewania obrazu tekstem................................................................... 127Usuwanie obrazu ............................................................................................................... 129Używanie obrazu jako tła strony ..................................................................................... 130Podsumowanie....................................................................................................................131

Rozdział 5. Tabele...............................................................................................................................................133Jak w języku HTML opisuje się tabelę ............................................................................ 134Tworzenie tabeli................................................................................................................. 135Wprowadzanie tekstu do komórki tabeli....................................................................... 138Zmiana szerokości kolumny tabeli................................................................................. 139

Spis treści 5

Zmiana szerokości obramowania tabeli..........................................................................141Zmiana koloru tła tabeli................................................................................................... 142Zmiana koloru tła komórki tabeli .................................................................................. 143Zmiana marginesów komórek tabeli .............................................................................. 145Wstawianie nowego wiersza tabeli .................................................................................. 147Wstawianie nowej kolumny tabeli .................................................................................. 149Scalanie komórek tabeli.....................................................................................................151Dzielenie scalonej komórki tabeli................................................................................... 154Określenie położenia zawartości komórki tabeli ......................................................... 156Tabela tworząca układ strony .......................................................................................... 158Podsumowanie................................................................................................................... 165

Rozdział 6. Kaskadowe arkusze stylu........................................................................................................167Zmiana czcionki, kolorów tekstu i tła oraz marginesów tekstu ................................. 170Zmiana wyglądu elementu języka HTML...................................................................... 172Definiowanie klas wyglądu elementu języka HTML ................................................... 174Definiowanie niezależnych klas stylu............................................................................. 176Zmiana wyglądu odnośników ......................................................................................... 178Tworzenie zewnętrznego arkusza stylu .......................................................................... 180Podsumowanie................................................................................................................... 183

Rozdział 7. Ramki................................................................................................................................................185Budowa serwisu składającego się z ramek ...................................................................... 186Tworzenie strony podzielonej na ramki ........................................................................ 187Weryfikowanie podziału na ramki ................................................................................. 190Tworzenie ramki z tytułem serwisu .................................................................................191Tworzenie ramki z menu.................................................................................................. 192Tworzenie ramki z treścią................................................................................................. 193Ustalanie początkowej zawartości ramek....................................................................... 194Tworzenie odnośnika prowadzącego do wybranej ramki ........................................... 196Tworzenie odnośnika otwierającego nowe okno przeglądarki................................... 198Blokowanie możliwości zmiany szerokości ramki.......................................................200Zmiana obramowania ramki ...........................................................................................202Tworzenie treści alternatywnej ........................................................................................203Ramka osadzona................................................................................................................204Usuwanie obramowania ramki osadzonej.....................................................................206Podsumowanie...................................................................................................................207

Rozdział 8. JavaScript....................................................................................................................................... 209Quiz internetowy............................................................................................................... 210Dynamiczne menu ............................................................................................................ 218Podsumowanie...................................................................................................................222

Rozdział 9. Serwis internetowy.................................................................................................................... 223Strona główna serwisu.......................................................................................................224Dynamiczne tworzenie stron WWW..............................................................................225Komponowanie stron WWW z szablonów ...................................................................226Instalacja programu Compose ........................................................................................227

6 Spis treści

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

Rozdział 10. Publikowanie serwisu WWW................................................................................................. 245Instalowanie programu SmartFTP..................................................................................247Uruchomienie programu SmartFTP .............................................................................. 251Tworzenie nowego połączenia.........................................................................................252Zmiana parametrów połączenia...................................................................................... 255Nawiązywanie połączenia.................................................................................................257Zrywanie połączenia z serwerem .....................................................................................259Aktualizowanie listy plików.............................................................................................260Podświetlanie grupy plików .............................................................................................262Pobieranie plików z serwera .............................................................................................264Tworzenie nowego folderu na serwerze..........................................................................266Umieszczanie plików na serwerze ...................................................................................268Weryfikacja poprawności opublikowania pliku HTML .............................................270Zmiana nazwy folderu lub pliku umieszczonego na serwerze ...................................272Zmiana praw dostępu do folderów lub plików umieszczonych na serwerze ...........274Usuwanie plików przechowywanych na serwerze.........................................................276Weryfikacja zgodności kodu HTML ze standardami ..................................................278Podsumowanie...................................................................................................................280

Rozdział 11. Zakończenie...................................................................................................................................281

Dodatek A Elementy języka HTML............................................................................................................ 283Elementy podstawowe.......................................................................................................283Atrybuty tekstu ..................................................................................................................284Bloki tekstu.........................................................................................................................286Odnośniki i etykiety..........................................................................................................288Ramki ..................................................................................................................................289Formularze ......................................................................................................................... 291Listy......................................................................................................................................295Obrazy.................................................................................................................................296Tabele...................................................................................................................................298Kaskadowe arkusze stylu ..................................................................................................302Informacje o dokumencie ................................................................................................ 303Programowanie .................................................................................................................. 304

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

♦ Jak w języku HTML opisuje się tabelę

♦ Tworzenie tabeli

♦ Wprowadzanie tekstu do komórki tabeli

♦ Zmiana szerokości kolumny tabeli

♦ Zmiana szerokości obramowania tabeli

♦ Zmiana koloru tła tabeli

♦ Zmiana koloru tła komórki tabeli

♦ Zmiana marginesów komórek tabeli

♦ Wstawianie nowego wiersza tabeli

♦ Wstawianie nowej kolumny tabeli

♦ Scalanie komórek tabeli

♦ Dzielenie scalonej komórki tabeli

♦ Określenie położenia zawartości

komórki tabeli

♦ Tabela tworząca układ strony

♦ Podsumowanie

Tabele

Tabele zazwyczaj kojarzą się z wypełnioną gęsto tekstem lub liczbami, podzieloną liniamina wiersze i kolumny kartką papieru; w dokumentach elektronicznych też najczęściejprzyjmują taką postać. Na stronach WWW tabele zyskują jednak nowe znaczenie — choćmożna je wykorzystywać do zapisywania danych, to najczęściej służą jednak do definiowaniaukładu strony — np. dzielenia strony na różnej szerokości kolumny wypełnione tekstem,na wzór szpalt w gazecie.

Mechanizm tabel jest mocnym punktem języka HTML — możliwe jest definiowanierodzaju obramowania komórek tabeli (bądź zrezygnowanie z niego), ustalanie marginesówkomórek tabeli, a nawet zagnieżdżanie tabel (tworzenie tabeli wewnątrz komórki innejtabeli).

Osiągnięcie mistrzostwa w operowaniu tabelami wymaga miesięcy ciężkiej pracy, jednakpo przeczytaniu kilkunastu kolejnych stron powinieneś opanować podstawy tworzeniai modyfikowania tabel, które pozwolą Ci samodzielnie poszerzać swoją wiedzę.

134 Jak w języku HTML opisuje się tabelę

Jak w języku HTML opisuje się tabelę

Kod opisujący tabelę zawarty jest wewnątrz elementu ��. Niestety, olbrzymiaelastyczność języka HTML spowodowała, że nie wystarczy utworzyć element ��,podać liczbę wierszy i kolumn tabeli i rozpocząć wprowadzanie danych. By stworzyćtabelę, konieczne jest stworzenie odrębnych elementów dla każdego wiersza i każdejkomórki tabeli! Powoduje to, że tworzenie tabel jest jednym z najbardziejskomplikowanych i frustrujących zadań, przed którymi stają twórcy stron WWW.

Projektując tabele w języku HTML, musisz cały czas pamiętać o podstawowej zasadzie:najważniejszym elementem tabeli jest wiersz, który z kolei podzielony jest na komórki.Wierszowi tabeli odpowiada element ��, zaś pojedynczej komórce — element ��(w przypadku komórek pełniących funkcję nagłówka) oraz �� (w przypadku zwykłychkomórek danych). Elementy �� oraz �� muszą być zawarte w elemencie ��, a tenz kolei — w elemencie ��. Struktura kodu tabeli wygląda zatem następująco:

��

��

��

��

��

��

Projektowanie tabeli najlepiej rozpocząć od… narysowania jej na kartce papieru. Zaufajmi — pozwoli Ci to zaoszczędzić sporo czasu, gdyż pomoże w przełożeniu podziału nawiersze i komórki na prawidłowy kod HTML tabeli.

Tworzenie tabeli 135

Tworzenie tabeli

Poniżej przedstawiłem kroki niezbędne do zbudowania najprostszej tabeli, zawierającejdwa wiersze po dwie komórki każdy. Jeden z wierszy będzie pełnić funkcję nagłówkatabeli, drugi zaś — tymczasowo pusty — funkcję wiersza danych.

Wyróżnianie wiersza pełniącego funkcję nagłówka tabeli nie ma na celu wyłącznie zmianyjego wyglądu: ten sam efekt wizualny mógłbyś osiągnąć również tworząc nagłówek w sposóbidentyczny, co zwykły wiersz. Jak już jednak podkreślałem w poprzednich rozdziałach,równie istotna co wygląd dokumentu HTML jest jego struktura logiczna.

1. Umieść kursor w miejscu kodu,w którym powinna pojawić siętabela. Tabele umieszcza sięzazwyczaj bezpośrednio wewnątrzelementu �� lub we wnętrzuinnego elementu ��.

2. Wprowadź kod znacznikaotwierającego element ��.

3. Uzupełnij kod elementu ��atrybutem �� z wartością ��.Wymusi to na przeglądarcerozszerzenie tabeli na całąszerokość okna:

��

4. Uzupełnij kod elementu ��atrybutem �� z wartością �(jeden). Nakaże to przeglądarcewyświetlanie obramowania tabeli,co ułatwi późniejsze zweryfikowaniepoprawności układu tabeli:

��

Jeśli chcesz, by tabela była węższa, podaj inną wartość atrybutu ��. Jeśli całko-wicie pominiesz atrybut ��, przeglądarka nada tabeli minimalną szerokośćpozwalającą na czytelne przedstawienie zawartych w tabeli danych.

1

5

6

10 9

78

3 4

2

136 Tworzenie tabeli

5. Otwórz element ��, reprezentujący wiersz tabeli.

6. Otwórz element ��, reprezentujący komórkę tabeli pełniącą funkcję nagłówka.

7. Wprowadź tekst pierwszej komórki nagłówka tabeli.

8. Zamknij element ��. Kod tworzący pierwszą komórkę powinien wyglądaćnastępująco:

��

9. Powtórz operacje opisane w punktach 6., 7. i 8. dla drugiej komórki nagłówka tabeli.

10. Zamknij element ��, kończąc tym samym opis pierwszego wiersza tabeli. Kod całegowiersza powinien wyglądać mniej więcej w taki sposób:

��

��

��

��

11. Otwórz kolejny element ��,by rozpocząć wprowadzaniedrugiego wiersza tabeli.

12. Otwórz element ��,by stworzyć komórkę tabelizawierającą zwykły tekst(niepełniącą funkcji nagłówka).

13. Kombinacją Ctrl+Spacja wprowadźznak twardej spacji, aby komórkanie zawierała żadnej treści.

14. Zamknij element ��. Kodtworzący pierwszą komórkę tegowiersza powinien wyglądaćnastępująco:

��.

15. Powtórz operacje opisanew punktach 6., 7. i 8. dla drugiejkomórki tego wiersza tabeli.

Element �� koniecznie musi zawierać jakąś treść. Jeśli komórka tabeli mapozostać pusta, wewnątrz elementu �� (a więc pomiędzy znacznikami ��i ��) musi być zawarty znak twardej spacji (w kodzie HTML odpowiada muencja �� ).

18

13

14

11

12

1617 15

Tworzenie tabeli 137

16. Zamknij element ��, kończąc tym samym opis drugiego wiersza tabeli. Kod całegowiersza powinien wyglądać mniej więcej w taki sposób:

��

��

��

��

17. Zamknij element ��, kończąc tym samym opis całej tabeli.

18. Zapisz wprowadzone zmiany. Kod całej tabeli powinien wyglądać w tym momenciemniej więcej tak:

��

��

��

��

��

��

��

��

��

��

19. Uaktywnij okno przeglądarki.

20. Zaktualizuj wyświetlaną stronę.

21. W oknie przeglądarki powinna siępojawić tabela o założonym układzie.

20

19

21

138 Wprowadzanie tekstu do komórki tabeli

Wprowadzanie tekstu do komórki tabeli

1. Odszukaj element �� opisującykomórkę tabeli, której treść chceszzmienić.

2. Podświetl istniejącą treść komórkitabeli.

3. Wprowadź nową treść komórkitabeli. Wprowadzany tekst zastąpipodświetlony fragment.

4. Zapisz wprowadzone zmiany.



7. Oto nowa zawartość komórkitabeli. Przeglądarka samodzielniedopasowała szerokość kolumntabeli do nowo wprowadzonejtreści.

1

2

4

3

6

7

5

Zmiana szerokości kolumny tabeli 139

Zmiana szerokości kolumny tabeli

Rzadko kiedy przeglądarce uda się we właściwy sposób dopasować szerokość kolumn tabelido zawartej w jej komórkach treści. Czasem też nie może być mowy o automatycznymmodyfikowaniu szerokości wybranych kolumn. Na szczęście język HTML pozwala bardzodokładnie kontrolować szerokość kolumn tabeli i określać ją w sposób dokładny — co dojednego piksela — lub względny.

1. Umieść kursor wewnątrz koduznacznika �� lub ��otwierającego komórkę tabelinależącą do wybranej kolumnytabeli. Komórka ta koniecznie musinależeć do pierwszego wiersza tabeli.

2. Uzupełnij kod elementu ��lub �� atrybutem �� i podajpożądaną szerokość kolumny:

♦ bezwzględną — w pikselach:

� ��

♦ względną — w procentach:

� ��

Szerokości wszystkich kolumn muszą być określone w pierwszym wierszu tabeli.Szerokości komórek należących do kolejnych wierszy będą identyczne z szero-kością komórek leżących powyżej nich; nie ma możliwości selektywnej zmianyszerokości komórek wybranych wierszy.

Kolumny, których szerokość nie zostanie ręcznie określona nadal będą auto-matycznie rozszerzane lub zwężane przez przeglądarkę w zależności od ichzawartości oraz od szerokości pozostałych kolumn tabeli.

1

2

140 Zmiana szerokości kolumny tabeli



5. Kolumna tabeli, której komórkanależąca do pierwszego wierszaotrzymała atrybut �� stałasię wyraźnie węższa.

6. Druga kolumna tabeli zostałaautomatycznie rozszerzona tak,aby obejmować pozostałe 60%szerokości tabeli.

4 3

5 6

Zmiana szerokości obramowania tabeli 141

Zmiana szerokości obramowania tabeli

1. Umieść kursor wewnątrz koduznacznika �� otwierającegokod tabeli.

2. Zmień wartość atrybutu ��,podając szerokość obramowaniatabeli. Podanie wartości � (zero)spowoduje całkowite ukrycieobramowania:

��

��




6. Nadanie atrybutowi �� wartości� spowodowało zniknięcieobramowania tabeli.

Prawie zawsze używa się tabel pozbawionych obramowania — po prostu wyglą-dają one znacznie lepiej.

2

1

3

5 4

6

142 Zmiana koloru tła tabeli

Zmiana koloru tła tabeli

1. Umieść kursor wewnątrz koduznacznika ��, otwierającegokod tabeli, której kolor tła chceszzmienić.

2. Uzupełnij kod znacznika ��atrybutem ��.

3. Jako wartość atrybutu �� wprowadźatrybut stylu �� !"��#$�% �� orazkod koloru tła tabeli:

��

��




7. Tło tabeli (oraz wszystkich jejkomórek) przyjęło nową barwę.

4 3

1

2

6

7

5

Zmiana koloru tła komórki tabeli 143

Zmiana koloru tła komórki tabeli

Dokonana przed chwilą zmiana koloru tła tabeli spowodowała zmianę koloru tławszystkich jej komórek. Istnieje też możliwość wybiórczego zmieniania koloru tłapojedynczych komórek tabeli.

W zależności od szerokości marginesów komórek tabeli (o których dowiesz się więcejjuż za chwilę), zmiana koloru tła tabeli połączona ze zmianą koloru tła wszystkich jejkomórek (na inny kolor) może być ciekawym sposobem uzyskania barwnegoobramowania tabeli.

1. Umieść kursor wewnątrz koduznacznika �� lub �� otwierającegokod komórki tabeli, której kolor tłachcesz zmienić.

2. Uzupełnij kod znacznikaatrybutem ��.

3. Jako wartość atrybutu �� wprowadźatrybut stylu �� !"��#$�% �� orazkod koloru tła komórki tabeli:

��

��

��

��




7. Tło komórki tabeli przyjęło nowąbarwę.

4

1

3

2

6

5

7

144 Zmiana koloru tła komórki tabeli

8. Powtórz powyższe operacje dlapozostałych komórek tabeli.Czy takie obramowanie tabeli niewygląda lepiej niż prosta ramkaoferowana przez przeglądarkę?

8

Zmiana marginesów komórek tabeli 145

Zmiana marginesów komórek tabeli

Aby całkowicie kontrolować wygląd tabeli, potrzebna jest jeszcze możliwość wpływaniana szerokość marginesów jej komórek. Język HTML daje możliwość regulowaniaszerokości marginesów komórek tabeli oraz odstępów między komórkami.

1. Umieść kursor wewnątrz koduznacznika �� otwierającegokod tabeli, której szerokośćmarginesów chcesz zmodyfikować.

2. Uzupełnij kod znacznika ��atrybutem ��&��$" określającymszerokość wewnętrznego marginesukażdej z komórek tabeli(przyjmującego barwę tłakomórki tabeli).

3. Uzupełnij kod znacznika ��atrybutem ��&� �$" określającymszerokość odstępu między sąsiednimikomórkami tabeli (przyjmującegobarwę tła tabeli):

��

��

��

��




7. Za margines komórki odpowiadaatrybut ��&��$"…

8. …a za szerokość odstępu międzykomórkami — atrybut ��&� �$".

3

4

1 2

6 5

8

7

146 Zmiana marginesów komórek tabeli

��

��

��

��

Wstawianie nowego wiersza tabeli 147

Wstawianie nowego wiersza tabeli

Wstawienie nowego wiersza tabeli jest operacją banalną — wystarczy w odpowiednimmiejscu kodu wstawić nowy element �� i uzupełnić go odpowiednią liczbą elementów�� lub ��. Musisz jedynie pamiętać, by w nowo wstawianym wierszu tabeli liczbakomórek była identyczna z liczbą komórek znajdujących się w pozostałych wierszach.

1. Umieść kursor zaraz zaznacznikiem �'�� zamykającymkod wiersza poprzedzającywstawiany wiersz tabeli (lub zarazprzed pierwszym znacznikiem ��występującym wewnątrz elementu��, jeśli wstawiany wiersz mabyć pierwszym wierszem tabeli).

2. Otwórz nowy element ��.

3. Wprowadź element �� (lub ��)opisujący pierwszą komórkęnowego wiersza. Jeśli chcesz,możesz od razu uzupełnić kodtego elementu dodatkowymiatrybutami, np. atrybutem ��opisującym wygląd komórki.

4. Wprowadź treść wstawianej komórkitabeli. Jeśli chcesz, by komórka byłapusta, umieść w niej znak twardejspacji za pomocą kombinacjiklawiszy Ctrl+Spacja.

5. Zamknij element �� (lub ��),kończąc tym samym opis pierwszejkomórki nowego wiersza tabeli.

6. Powtórz operacje opisanew punktach 3., 4. i 5. dla pozostałychkomórek nowego wiersza tabeli.Pamiętaj, by wstawiany wierszzawierał tyle samo komórek, copozostałe wiersze tej samej tabeli.

3

7

1

2

4

5

6

8

148 Wstawianie nowego wiersza tabeli

7. Zamknij element ��, kończąc tym samym opis nowego wiersza tabeli.




11. Oto nowy, pusty wiersz tabeli.

Jeśli po rozbudowaniu kodu tabeli o nowy element �� tabela dosłownie „roz-pada się”, mieszając zawartość komórek lub kończąc się przedwcześnie, na pewnopopełniłeś jakiś błąd w kodzie. W takim przypadku jeszcze raz sprawdź, czyzamknąłeś we właściwej kolejności wszystkie elementy języka HTML składa-jące się na kod tabeli, oraz czy nowo wstawiony kod wiersza tabeli zawiera tylesamo elementów �� lub ��, co pozostałe wiersze.

11

10

9

Wstawianie nowej kolumny tabeli 149

Wstawianie nowej kolumny tabeli

Niestety, struktura kodu tabeli w języku HTML — tabela opisana jest wiersz po wierszu,zaś każdy wiersz zawiera identyczną liczbę komórek — powoduje, że rozszerzenie tabelio dodatkową kolumnę jest znacznie bardziej skomplikowane i pracochłonne niż wstawienienowego wiersza. Wstawienie nowej kolumny polega na dołożeniu nowych elementów ��lub �� do każdego istniejącego wiersza tabeli.

1. Umieść kursor w miejscu kodupierwszego wiersza tabeli, w którymma się pojawić komórka tworzącanową kolumnę tabeli.

2. Wprowadź kod elementu ��(lub ��, jeśli komórka ma pełnićfunkcję nagłówka tabeli).

3. Uzupełnij kod utworzonegoelementu �� (lub ��) atrybutem �� opisującym szerokośćwstawianej kolumny tabeli.

4. Jeśli chcesz, uzupełnij kodutworzonego elementudodatkowymi atrybutami,na przykład atrybutem ��opisującym wygląd komórki tabeli.

5. Wprowadź treść komórki tabeli.Jeśli chcesz, by komórka była pusta,umieść w niej znak twardej spacjiprzy użyciu kombinacji klawiszyCtrl+Spacja.

6. Zamknij element �� (lub ��),kończąc tym samym opis nowejkomórki tabeli.

Jeśli chcesz, aby przeglądarka automatycznie ustalała szerokość kolumny, pomińwprowadzanie atrybutu ��.

8 4 3

1

5

6

7

2

150 Wstawianie nowej kolumny tabeli

7. Powtórz operacje opisane w punktach 2., 4., 5. i 6. we wszystkich pozostałychwierszach tabeli. W kolejnych wierszach nie wprowadzaj już atrybutu ��opisującego szerokość kolumny — przeglądarka dla wszystkich nowych komórekzastosuje szerokość narzuconą w pierwszym wierszu tabeli.




11. Oto nowa, pusta kolumna tabeli.

Jeśli po rozbudowaniu kodu tabeli o elementy �� lub �� składające się nanowy wiersz tabela dosłownie „rozpada się”, mieszając zawartość komórek lubkończąc się przedwcześnie, na pewno popełniłeś jakiś błąd w kodzie. W takimprzypadku jeszcze raz sprawdź, czy zamknąłeś wszystkie elementy języka HTMLskładające się na kod tabeli we właściwej kolejności, oraz czy każdy wiersz tabelizawiera tyle samo elementów �� lub ��, co pozostałe.

10

11

9

Scalanie komórek tabeli 151

Scalanie komórek tabeli

Jeśli tworzyłeś kiedyś za pomocą edytora tekstów lub arkusza kalkulacyjnego tabeleo skomplikowanym układzie, zetknąłeś się pewnie z funkcją scalania komórek tabeli,umożliwiającą utworzenie wspólnego nagłówka obejmującego swoim zasięgiem kilkawierszy lub kolumn tabeli. Scalanie komórek tabeli jest również dostępne w języku HTML;można wręcz powiedzieć, że jego rola jest znacznie większa, gdyż tabele umieszczane nastronie WWW służą nie tylko tabelaryzowaniu danych, ale również tworzeniu układustrony oraz rozmieszczaniu jej elementów — takich jak fragmenty tekstu czy osadzonena stronie obrazy. Niestety, tworzenie kodu HTML odpowiedzialnego za układ tabelizawierającej scalone komórki jest dość trudne.

Podstawowa trudność przy tworzeniu kodu scalonych komórek polega na tym, że scalaniewymaga złamania zasady obecności takiej samej liczby komórek w każdym wierszu tabeli.Dwie scalone ze sobą komórki opisywane będą w kodzie przez tylko jeden element ��,co znacznie utrudnia weryfikację poprawności kodu tabeli.

Scalanie komórek tabeli w poziomie

Scalanie dwóch leżących obok siebie komórek tabeli w poziomie jest jeszcze w miarę łatwe— należy tylko usunąć jeden z elementów ��, zaś kod drugiego uzupełnić jednym atrybutem.

1. W poniższym przykładzie dokonaszscalenia tych dwóch komórek tabeli.

2. Podświetl kod elementu ��odpowiadającego jednej ze scalanychkomórek.

3. Naciśnij klawisz Delete, aby usunąćpodświetlony kod.

1

3

2

152 Scalanie komórek tabeli

Scaleniu niekoniecznie muszą podlegać tylko dwie komórki tabeli. Możesz scalićze sobą dowolną liczbę komórek. Scalając N komórek tabeli, musisz usunąć N–1elementów ��, pozostawiając w kodzie tylko jeden.

4. Umieść kursor wewnątrz jedynegopozostawionego elementu ��.

5. Uzupełnij kod elementu ��atrybutem ��&�$ z parametremokreślającym liczbę komórek tabelizastępowanych pozostawionympojedynczym elementem ��:

�� !��

��"#��$$$$��




9. Dwie komórki tabeli zostałypołączone. Dwa odrębne elementy�� (znajdujące się obok siebiew jednym wierszu tabeli) zastąpiłjeden, uzupełniony atrybutem ��&�$��(�.

Scalanie komórek w pionie

Scalanie dwóch leżących nad sobą w pionie komórek tabeli wymaga rozszerzenia o atrybut�� &�$ elementu �� leżącego w najwyższym wierszu oraz usunięcia elementu �� leżącegow wierszu poniżej.

W przypadku scalania więcej niż dwóch komórek należy usunąć odpowiedniowięcej elementów �� w leżących poniżej wierszach tabeli.

6

4

5

78

9

Scalanie komórek tabeli 153

1. W poniższym przykładziedokonasz scalenia tych dwóchkomórek tabeli.

2. Podświetl kod elementu ��odpowiadającego jednej zescalanych komórek, leżącejw niższym z dwóch wierszy,w których znajdują się scalanekomórki.

3. Naciśnij klawisz Delete, aby usunąćpodświetlony kod.

4. Umieść kursor wewnątrz jedynegopozostawionego elementu ��.

5. Uzupełnij kod elementu ��atrybutem �� &�$ z parametremokreślającym liczbę komórek tabelizastępowanych pozostawionympojedynczym elementem ��:

�� !��

��"#��$$$$��




9. Dwie komórki tabeli zostałypołączone. Dwa odrębne elementy�� (znajdujące się w dwóchróżnych wierszach tabeli) zastąpiłjeden, uzupełniony atrybutem�� &�$��(�.

1

2

3

4

5

6

8 7

9

154 Dzielenie scalonej komórki tabeli

Dzielenie scalonej komórki tabeli

Aby anulować operację scalenia komórek tabeli, należy wykonać dwie operacje:

♦ usunąć atrybut �� &�$ lub ��&�$ z elementu �� odpowiadającego za scalonąkomórkę (zamienić ją z powrotem w najzwyklejszą komórkę tabeli),

♦ odtworzyć usunięte w czasie scalania elementy �� tak, aby przywrócić odpowiedniąliczbę elementów w każdym wierszu (elemencie ��) tabeli.

W poniższym przykładzie dokonuję anulowania scalenia dwóch komórek tabeliw poziomie.

1. Celem ćwiczenia będzie rozdzielenietych dwóch scalonych ze sobąkomórek.

2. Podświetl kod atrybutu ��&�$,zmieniającego element ��ze zwykłej komórki tabeliw komórkę scalającą.

3. Naciśnij klawisz Delete, by usunąćpodświetlony kod.

4. Zaraz za kodem elementu ��zawierającego jeszcze przed chwiląatrybut ��&�$ wprowadź kodnowego elementu ��. Utworzy onkomórkę tabeli wyrównującą liczbękomórek w wierszu z liczbą komórekistniejących w pozostałychwierszach tabeli:

��.


1

5

4

3

2

Dzielenie scalonej komórki tabeli 155



8. Scalona komórka została podzielonana dwie niezależne komórki.

7 6

8

156 Określenie położenia zawartości komórki tabeli

Określenie położenia zawartości

komórki tabeli

Tekst zawarty w komórce tabeli może być wyrównywany w dwojaki sposób:

♦ w poziomie — do lewego lub prawego marginesu, do obu marginesówlub wycentrowany,

♦ w pionie — do górnego lub dolnego marginesu albo wycentrowany.

Szczególnie istotna jest możliwość definiowania wyrównywania tekstu w pionie, gdyżprzeglądarki WWW najczęściej domyślnie centrują zawartość komórki, co powodujenieelegancki wygląd tabel zawierających w komórkach na zmianę długie i krótkiefragmenty tekstu:

1. Umieść kursor wewnątrz elementu�� (lub ��), którego sposóbwyrównywania chcesz zmienić.

2. Jeśli element ten nie jest jeszczewyposażony w atrybut ��,uzupełnij kod.

5

1 3 4

2

Określenie położenia zawartości komórki tabeli 157

3. Wewnątrz atrybutu �� wprowadź atrybut stylu ��)�%��"$ z parametremokreślającym sposób wyrównania zawartości komórki tabeli w poziomie:

♦ ��*� — do lewego marginesu,

♦ ��"�� — do prawego marginesu,

♦ �$�� — wycentrowany,

♦ +#��*� — do obu marginesów (wyjustowany).

4. Wewnątrz atrybutu �� wprowadź atrybut stylu ,�� %��"$ z parametremokreślającym sposób wyrównania zawartości komórki tabeli w pionie:

♦ ��& — do górnego marginesu,

♦ ��- — do dolnego marginesu,

♦ �$�� — wycentrowany.

��%��&��

��'�� %�




8. Zawartość tej komórki zostaławycentrowana w poziomie(��)�.��"$/. �$��0) orazwyrównana do górnego marginesu(,�� %��"$/.��&0).

7 6

8

158 Tabela tworząca układ strony

Tabela tworząca układ strony

Podstawowym celem tabeli jest przedstawienie zbioru danych w eleganckiej, tabelarycznejpostaci. Dostępny w języku HTML mechanizm tabel jest jednak tak elastyczny, iż umożliwiabudowanie — za pomocą tabel — układu całej strony WWW (dzielenie jej na prostokątnefragmenty odpowiadające szpaltom gazety).

W poniższym przykładzie pokażę, w jaki sposób wykorzystać mechanizm tabel dostworzenia prostego układu strony podzielonej na następujące fragmenty:

Tworząc bardziej skomplikowane tabele, możesz wspomagać się takimi właśnieszkicami. Ułatwiają one określenie liczby wymaganych wierszy i kolumn tabelioraz oznaczenie komórek, które powinny zostać scalone.

1. Uruchom program Webber,aby rozpocząć pracę nadnowym kodem.

2. Wprowadź podstawowy kod każdej strony WWW:

�()*+,-./��"��.0123+�%��45+��),)�6,72�8$��,�� /9%�

��"��

��

�� 7�:�� 444��

1

2

Tabela tworząca układ strony 159

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

��

��

��

��"��

3. Wprowadź nagłówek strony jakotreść elementu ��:

��7�:�� 444��

4. Rozpocznij wprowadzanie kodutabeli, wpisując znacznikotwierający �� wrazz atrybutami:

♦ �� — aby tabela miałaszerokość okna przeglądarki,

♦ ��&� �$"�� — aby usunąćodstępy między komórkami,

♦ ��&��$"��1� — aby komórkitabeli miały margineso szerokości 5 pikseli z każdejstrony,

♦ �� !"��#$�% ��/.��#�0�

— aby tło tabeli miało niebieskąbarwę.

�� %��%

�� %�%�� %=%

��%��%�

5. Wprowadź trzy pełne elementy��. Zgodnie ze schematem tabelipotrzebne są trzy wiersze (jeden nadatę aktualizacji strony, jeden namenu i treść artykułu, jeden nastopkę strony — stąd liczbaelementów ��).

6. Zamknij kod tabeli znacznikiemzamykającym �'��.

3

4

5

6


7. Ponieważ pierwszy wiersz tabeli mazawierać jedynie datę ostatniejaktualizacji strony, wystarczy jedna,szeroka komórka scalająca( ��&�$��(�). Wprowadź jej kod:

��?��

8. W drugim wierszu tabeli potrzebnesą już dwie odrębne komórki tabelio różnej szerokości:

♦ komórka zawierająca menupowinna mieć stałą szerokość,niezależną od szerokości oknaprzeglądarki,

♦ komórka zawierająca treśćartykułu powinna dostosowywaćswoją szerokość do szerokościokna przeglądarki.

��'�� %��%�� %��%��

��

9. Ostatni wiersz, zawierający stopkęstrony, może zawierać tylko jednąscaloną komórkę:

��?��

10. Uzupełnij kod pierwszegoelementu �� w drugim wierszutabeli (komórka zawierająca menu)atrybutem ,��"$��&�. Dziękitemu niezależnie od rozmiarusąsiedniej komórki menu zawszebędzie dosunięte do górnejkrawędzi komórki.

11. Uczyń to samo z drugą komórką tego wiersza — dzięki temu tekst artykułu, nawetgdyby był niezwykle krótki, zawsze będzie dosunięty do górnej krawędzi komórki.

12. Uzupełnij kod prawej komórki drugiego wiersza (komórki zawierającej tekst artykułu)atrybutem �� !"��#$�% ��/. ��0�. Nadasz w ten sposób tej komórce białykolor tła.

7

8

9

10

13

12 11


��

��'�� %��%�� %��%��

��%�� %�'�� %��%��

��




16. Strona zaczyna wyglądać jakprzygotowany wcześniej szkic.

17. Wróć do edycji kodu stronyw oknie programu Webber.

18. Umieść kursor pomiędzyznacznikami elementu ��tworzącego jedyną komórkępierwszego wiersza tabeli.

19. Otwórz element �2�, który mazawierać informację o dacieostatniej aktualizacji strony.Wykorzystaj następujące atrybutystylu tego elementu (podane jakotreść atrybutu ��):

♦ *�$�%*�-��/.��3��$�%��* — aby napis złożony był czcionką bezszeryfową,

♦ ��/.�� — aby tekst miał kolor żółty i odznaczał się na niebieskim tle,

♦ ��)�%��"$/.��"�� — aby data ostatniej aktualizacji strony dosunięta była doprawego marginesu.

��%@��@�" �� A�� @��&�� %�

20. Wprowadź tekst informujący o dacie ostatniej aktualizacji strony.

21. Zamknij element �2�. Cały jego kod powinien wyglądać mniej więcej tak:

��%@��@�" �� A�� @��&�� %�

��)�� :�� : ��?��5��<��$

��

16

14

18

17

21 20 19

15


22. Umieść kursor pomiędzy znacznikami elementu �� tworzącego pierwszą komórkędrugiego wiersza tabeli. Będzie ona zawierać menu służące do nawigowania po stronachTwojego serwisu.

23. Aby nadać całemu menu jednolity wygląd, wprowadź kod elementu �42�5� wrazz następującymi atrybutami stylu (podanymi jako treść atrybutu ��):

♦ ��)�%��"$/. �$�� — aby cały tekst menu był wypośrodkowany,

♦ *�$�%*�-��/.��3.��$�%��* — aby tekst menu był złożony czcionką bezszeryfową.

��%��&�� @��@�" �� A�� @�%�

Niestety, nie możesz zdefiniować w tak prosty sposób koloru tekstu całego me-nu, gdyż elementy �� tworzące odnośniki (niezbędne do zbudowania menu)anulują zmiany poczynione w nadrzędnym elemencie.

24. Wprowadź treść menu w postaci kolejnych akapitów tekstu (elementy �2�)zawierających odnośniki (elementy ��). Pamiętaj, by każdemu elementowi ��przyporządkować kolor umożliwiający odczytanie tekstu na ciemnym tle:

��@�% ��&$��"�%��%�� %�B��C#��

��@�%� �� $��"�%��%�� %�*��D� � ��

25. Zamknij element �42�5�.

22

25

23

24


26. Umieść kursor wewnątrz znaczników drugiego elementu �� w tym samym wierszutabeli.

27. Wprowadź dowolny tekst.

28. Umieść kursor pomiędzy znacznikami �� komórki tabeli w ostatnim jej wierszu.

29. Otwórz element �2�, który ma zawierać tekst stopki strony. Wykorzystaj następująceatrybuty stylu tego elementu (podane jako treść atrybutu ��):

♦ *�$�%*�-��/.��3��$�%��* — aby napis złożony był czcionką bezszeryfową,

♦ ��/.�� — aby tekst miał kolor żółty i odznaczał się na niebieskim tle,

♦ *�$�%��6�/.7&� — aby czcionka miała rozmiar 9 punktów.

��%@��@�" �� A�� @��@�� >��%�

30. Wprowadź dowolny tekst stopki strony.

26

27

32

28

31 30 29


31. Zamknij element �2�:

��%@��@�" �� A�� @��@�� >��%�

��+�� E��?��5�F��7#@@��

��




35. Oto gotowy układ strony. Możeszkopiować ten plik pod różnyminazwami, zmieniając tylko treśćartykułu umieszczonego na stronie.

3334

35

Podsumowanie 165

Podsumowanie

Tabele stanowią bardzo istotny element języka HTML. Wbrew pozorom rzadko służą onedo przedstawiania w postaci tabelarycznej zestawów danych. Najczęstszym zastosowaniemtabel jest dzielenie strony na obszary (takie jak obszar nagłówka, obszar menu czy obszartreści) wypełnione różnorodnym tłem.

Tworząc tabele, pamiętaj o kilku zasadach:

♦ kod tabeli wprowadza się zawsze wiersz po wierszu,

♦ każdy wiersz tabeli (element ��) zawiera kilka komórek (elementy �� lub ��),

♦ w tabeli niezawierającej scalonych komórek liczba komórek w każdym wierszupowinna być identyczna,

♦ komórka scalona obejmująca N wierszy lub N kolumn odpowiada N odrębnymelementom �� lub ��, zatem tworząc scaloną komórkę należy usunąć nadmiarowekomórki tabeli wraz z ich zawartością,

♦ błędny kod tabeli najczęściej owocuje efektem „rozsypywania się” tabeli — pojawiająsię puste wiersze lub kolumny, komórki nachodzą na siebie lub też tabela urywa sięnagle i przekształca w zwykły tekst.

Tworzenie stron WWW. Kurs

Technology

Transcript of Tworzenie stron WWW. Kurs