Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00609 009791 10451038 na godz. na dobę w sumie
Tworzenie stron WWW. Kurs - książka
Tworzenie stron WWW. Kurs - książka
Autor: Liczba stron: 320
Wydawca: Helion Język publikacji: polski
ISBN: 83-7361-310-2 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).

Zamiast długich tekstów - rysunki z dokładnymi objaśnieniami.
Samodzielna nauka nigdy nie była tak prosta

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 witryny. 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ć do pracy 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 i wyposażony w nowoczesną przeglądarkę WWW. Znajomość opisanych w książce podstaw zdecydowanie ułatwi Ci ewentualną naukę obsługi bardziej skomplikowanych programów służących do wizualnego tworzenia rozbudowanych serwisów internetowych.

Poznasz: 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 krótkim czasie nabyć praktycznych umiejętności przydatnych w karierze zawodowej i codziennej pracy. Napisane przystępnym językiem i bogato ilustrowane są wspaniałą pomocą w samodzielnej nauce.

Napisana, by pomóc Ci w samodzielnej nauce!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREĎCI SPIS TREĎCI KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOĎCIACH O NOWOĎCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA Tworzenie stron WWW. 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. FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE 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 Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl Spis treści Wstęp ...................................................z...................................................z.................... ...................................................z.....7 Rozdział 1. Nowa strona WWW ...................................................z....................................................................13 Pobieranie programu Webber z Sieci ...................................................p............................ 14 Uruchomienie programu Webber ...................................................p................................. 15 Wprowadzanie podstawowego kodu strony...................................................p................. 16 Ustalanie tytułu strony WWW ...................................................p....................................... 18 Zapisywanie kodu strony na dysku twardym ...................................................p............... 19 Otwieranie zapisanej wcześniej strony WWW ...................................................p............. 21 Wyświetlanie strony w przeglądarce ...................................................p..............................22 Aktualizowanie strony w przeglądarce...................................................p..........................24 Kopiowanie fragmentu kodu HTML ...................................................p............................ 25 Wklejanie uprzednio skopiowanego fragmentu kodu HTML ..................................... 26 Wycinanie fragmentu kodu HTML...................................................p...............................27 Podsumowanie...................................................p...................................................p............. ..28 Rozdział 2. Tekst i jego atrybuty ...................................................z.................................................................29 Wprowadzanie tekstu...................................................p...................................................p.... 30 Deklarowanie sposobu kodowania polskich znaków diakrytycznych ........................ 31 Zapisanie fragmentu tekstu czcionką pogrubioną...................................................p...... 33 Zapisanie fragmentu tekstu kursywą ...................................................p............................. 35 Podkreślenie fragmentu tekstu ...................................................p....................................... 36 Twarde spacje...................................................p...................................................p............ ...... 37 Włączanie i wyłączanie wyświetlania znaków niedrukowalnych ................................. 38 Indeksy górne i dolne...................................................p...................................................p....40 Zapisywanie fragmentu tekstu czcionką nieproporcjonalną........................................ 41 Zapisywanie większego fragmentu tekstu czcionką nieproporcjonalną ..................... 43 Zmiana sposobu wyrównywania akapitu tekstu...................................................p..........44 Łamanie tekstu wewnątrz akapitu ...................................................p.................................. 46 Zmiana koloru treści i tła akapitu...................................................p..................................47 Zmiana koloru treści i tła fragmentu tekstu...................................................p.................49 Zmiana koloru tła strony ...................................................p................................................ 50 4 Spis treści Zmiana rozmiaru czcionki ...................................................p............................................. 51 Zmiana kroju pisma...................................................p...................................................p...... 52 Określanie marginesów akapitu ...................................................p..................................... 54 Tworzenie nagłówka...................................................p...................................................p...... 56 Wstawianie poziomej linii...................................................p............................................... 58 Zmiana wyglądu poziomej linii ...................................................p..................................... 59 Lista wypunktowana ...................................................p...................................................p..... 61 Zagnieżdżanie listy ...................................................p...................................................p...... .. 63 Lista numerowana ...................................................p...................................................p.........64 Wstawianie znaków specjalnych...................................................p..................................... 66 Kompletna, prosta strona...................................................p................................................ 68 Podsumowanie...................................................p...................................................p............. ..70 Rozdział 3. Odnośniki...................................................z...................................................z....................................71 Tworzenie odnośnika...................................................p...................................................p....72 Tworzenie odnośnika pocztowego...................................................p................................. 73 Definiowanie domyślnego tematu wiadomości pocztowej........................................... 75 Definiowanie etykiety ...................................................p...................................................p...77 Tworzenie odnośnika prowadzącego do etykiety ...................................................p........78 Tworzenie odnośnika prowadzącego do etykiety zadeklarpowanej na innej stronie WWW...................................................p..................................................79 Otwieranie odnośnika w nowym oknie ...................................................p........................ 81 Podsumowanie...................................................p...................................................p............. .. 83 Rozdział 4. Obrazy ...................................................z...................................................z....... ...................................85 Instalacja programu IrfanView ...................................................p.......................................88 Uruchomienie programu IrfanView...................................................p.............................. 96 Umieszczanie obrazu na stronie WWW ...................................................p.......................98 Opatrywanie obrazu komentarzem ...................................................p............................. 100 Określanie rozmiaru obrazu...................................................p......................................... 102 Zmiana rozmiarów obrazu ...................................................p........................................... 104 Zmiana szerokości marginesów obrazu ...................................................p...................... 106 Zmiana szerokości obramowania obrazu ...................................................p................... 107 Zmiana koloru obramowania...................................................p....................................... 109 Przekształcanie obrazu w odnośnik...................................................p..............................110 Zamieszczanie miniatur zdjęć ...................................................p.......................................112 Mapy odnośników...................................................p...................................................p....... 120 Oblewanie obrazu tekstem...................................................p............................................ 125 Rezygnowanie z oblewania obrazu tekstem..................................................p................. 127 Usuwanie obrazu ...................................................p...................................................p......... 129 Używanie obrazu jako tła strony ...................................................p.................................. 130 Podsumowanie...................................................p...................................................p............. .131 Rozdział 5. Tabele...................................................z...................................................z....... ..................................133 Jak w języku HTML opisuje się tabelę ...................................................p......................... 134 Tworzenie tabeli...................................................p...................................................p......... Wprowadzanie tekstu do komórki tabeli...................................................p.................... 138 Zmiana szerokości kolumny tabeli...................................................p.............................. 139 .. 135 Spis treści 5 Zmiana szerokości obramowania tabeli...................................................p.......................141 Zmiana koloru tła tabeli...................................................p................................................ 142 Zmiana koloru tła komórki tabeli ...................................................p............................... 143 Zmiana marginesów komórek tabeli...................................................p........................... 145 Wstawianie nowego wiersza tabeli ...................................................p............................... 147 Wstawianie nowej kolumny tabeli ...................................................p............................... 149 Scalanie komórek tabeli...................................................p..................................................151 Dzielenie scalonej komórki tabeli...................................................p................................ 154 Określenie położenia zawartości komórki tabeli ...................................................p...... 156 Tabela tworząca układ strony ...................................................p....................................... 158 Podsumowanie...................................................p...................................................p.............165 Rozdział 6. Kaskadowe arkusze stylu...................................................z.....................................................167 Zmiana czcionki, kolorów tekstu i tła oraz marginesów tekstu ................................. 170 Zmiana wyglądu elementu języka HTML...................................................p................... 172 Definiowanie klas wyglądu elementu języka HTML ...................................................p 174 Definiowanie niezależnych klas stylu...................................................p.......................... 176 Zmiana wyglądu odnośników ...................................................p...................................... 178 Tworzenie zewnętrznego arkusza stylu ...................................................p....................... 180 Podsumowanie...................................................p...................................................p.............183 Rozdział 7. Ramki...................................................z...................................................z......... .................................185 Budowa serwisu składającego się z ramek ...................................................p................... 186 Tworzenie strony podzielonej na ramki ...................................................p..................... 187 Weryfikowanie podziału na ramki ...................................................p.............................. 190 Tworzenie ramki z tytułem serwisu ...................................................p..............................191 Tworzenie ramki z menu...................................................p............................................... 192 Tworzenie ramki z treścią...................................................p.............................................. 193 Ustalanie początkowej zawartości ramek...................................................p.................... 194 Tworzenie odnośnika prowadzącego do wybranej ramki ........................................... 196 Tworzenie odnośnika otwierającego nowe okno przeglądarki................................... 198 Blokowanie możliwości zmiany szerokości ramki...................................................p....200 Zmiana obramowania ramki ...................................................p........................................202 Tworzenie treści alternatywnej ...................................................p.....................................203 Ramka osadzona...................................................p...................................................p..........204 Usuwanie obramowania ramki osadzonej...................................................p..................206 Podsumowanie...................................................p...................................................p.............207 Rozdział 8. JavaScript...................................................z...................................................z................................. 209 Quiz internetowy...................................................p...................................................p.........210 Dynamiczne menu ...................................................p...................................................p...... 218 Podsumowanie...................................................p...................................................p.............222 Rozdział 9. Serwis internetowy...................................................z................................................................. 223 Strona główna serwisu...................................................p...................................................p.224 Dynamiczne tworzenie stron WWW...................................................p...........................225 Komponowanie stron WWW z szablonów ...................................................p................226 Instalacja programu Compose ...................................................p.....................................227 6 Spis treści Tworzenie plików szablonu ...................................................p..........................................229 Tworzenie nowej strony na bazie szablonu ...................................................p................232 Generowanie kodu strony na bazie szablonu...................................................p............. 233 Automatyczne generowanie serwisu WWW...................................................p............... 236 Automatyczne wstawianie daty ostatniej aktualizacji strony......................................238 Definiowanie słów kluczowych serwisu ...................................................p......................239 Definiowanie opisu serwisu ...................................................p..........................................240 Rejestrowanie strony WWW w wyszukiwarkach ...................................................p....... 241 Podsumowanie...................................................p...................................................p.............244 Rozdział 10. Publikowanie serwisu WWW ...................................................z.............................................. 245 Instalowanie programu SmartFTP...................................................p...............................247 Uruchomienie programu SmartFTP ...................................................p........................... 251 Tworzenie nowego połączenia...................................................p......................................252 Zmiana parametrów połączenia...................................................p................................... 255 Nawiązywanie połączenia...................................................p..............................................257 Zrywanie połączenia z serwerem ...................................................p..................................259 Aktualizowanie listy plików...................................................p..........................................260 Podświetlanie grupy plików ...................................................p..........................................262 Pobieranie plików z serwera ...................................................p..........................................264 Tworzenie nowego folderu na serwerze...................................................p....................... 266 Umieszczanie plików na serwerze ...................................................p................................268 Weryfikacja poprawności opublikowania pliku HTML .............................................270 Zmiana nazwy folderu lub pliku umieszczonego na serwerze ...................................272 Zmiana praw dostępu do folderów lub plików umieszczonych na serwerze ...........274 Usuwanie plików przechowywanych na serwerze...................................................p......276 Weryfikacja zgodności kodu HTML ze standardami ..................................................278 Podsumowanie...................................................p...................................................p.............280 Rozdział 11. Zakończenie...................................................z...................................................z.. ...........................281 Dodatek A Elementy języka HTML...................................................z......................................................... 283 Elementy podstawowe...................................................p...................................................p.283 ..284 Atrybuty tekstu ...................................................p...................................................p.......... Bloki tekstu...................................................p...................................................p............. ......286 Odnośniki i etykiety...................................................p...................................................p....288 ........289 Ramki ...................................................p...................................................p.................... Formularze ...................................................p...................................................p............... .... 291 ............295 Listy..............................................p...................................................p......................... ........296 Obrazy...................................................p...................................................p................... Tabele.............................................p...................................................p......................... ..........298 Kaskadowe arkusze stylu ...................................................p...............................................302 Informacje o dokumencie ...................................................p............................................. 303 Programowanie ...................................................p...................................................p............304 Skorowidz...................................................z...................................................z................ .............................................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 tekcstem lub liczbami, podzieloną liniami na wiersze i kolumny kartką papieru; w dokumentach celektronicznych też najczęściej przyjmują taką postać. Na stronach WWW tabele zyskują jcednak nowe znaczenie — choć można je wykorzystywać do zapisywania danych, to nacjczęściej służą jednak do definiowania układu strony — np. dzielenia strony na różnej szerokcości kolumny wypełnione tekstem, na wzór szpalt w gazecie. Mechanizm tabel jest mocnym punktem języka HTML — możlciwe jest definiowanie rodzaju obramowania komórek tabeli (bądź zrezygnowanice z niego), ustalanie marginesów komórek tabeli, a nawet zagnieżdżanie tabel (tworzencie tabeli wewnątrz komórki innej tabeli). Osiągnięcie mistrzostwa w operowaniu tabelami wymagca miesięcy ciężkiej pracy, jednak po przeczytaniu kilkunastu kolejnych stron powinienceś opanować podstawy tworzenia i modyfikowania tabel, które pozwolą Ci samodzielnie cposzerzać 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 elementuc 6#$. . Niestety, olbrzymia elastyczność języka HTML spowodowała, że nie wystarczcy utworzyć element 6#$. , podać liczbę wierszy i kolumn tabeli i rozpocząć wprcowadzanie danych. By stworzyć tabelę, konieczne jest stworzenie odrębnych elementców dla każdego wiersza i każdej komórki tabeli! Powoduje to, że tworzenie tabel jest cjednym z najbardziej skomplikowanych i frustrujących zadań, przed którymi cstają twórcy stron WWW. Projektując tabele w języku HTML, musisz cały czas pacmiętać o podstawowej zasadzie: najważniejszym elementem tabeli jest wiersz, który z kolei podzielony jest na komórki. Wierszowi tabeli odpowiada element 64 , zaś pojedynczej komórce — element 6* (w przypadku komórek pełniących funkcję nagłówka) oraz 6 (w przypadku zwykłych komórek danych). Elementy 6* oraz 6 muszą być zawarte w elemencie 64 , a ten z kolei — w elemencie 6#$. . Struktura kodu tabeli wygląda zatem następująco: VCDNG VT VF VF VT VCDNG Projektowanie tabeli najlepiej rozpocząć od… narysowacnia jej na kartce papieru. Zaufaj mi — pozwoli Ci to zaoszczędzić sporo czasu, gdyż pomcoże w przełożeniu podziału na wiersze i komórki na prawidłowy kod HTML tabeli. Tworzenie tabeli 135 Tworzenie tabeli Poniżej przedstawiłem kroki niezbędne do zbudowaniac najprostszej tabeli, zawierającej dwa wiersze po dwie komórki każdy. Jeden z wierszy bęcdzie pełnić funkcję nagłówka tabeli, drugi zaś — tymczasowo pusty — funkcję wierszca danych. Wyróżnianie wiersza pełniącego funkcję nagłówka tabelic nie ma na celu wyłącznie zmiany jego wyglądu: ten sam efekt wizualny mógłbyś osiągnąć crównież tworząc nagłówek w sposób identyczny, co zwykły wiersz. Jak już jednak podkreśclałem w poprzednich rozdziałach, równie istotna co wygląd dokumentu HTML jest jego struktura logiczna. 2 3 4 1 5 6 8 7 10 9 1. Umieść kursor w miejscu kodu, w którym powinna pojawić się tabela. Tabele umieszcza się zazwyczaj bezpośrednio wewnątrz elementu $1 ; lub we wnętrzu innego elementu 6#$. . 2. Wprowadź kod znacznika otwierającego element 6#$. . 3. Uzupełnij kod elementu 6#$. atrybutem YKFVJ z wartością . Wymusi to na przeglądarce rozszerzenie tabeli na całą szerokość okna: VCDNGYKFVJŒŒ 4. Uzupełnij kod elementu 6#$. atrybutem DQTFGT z wartością  (jeden). Nakaże to przeglądarce wyświetlanie obramowania tabeli, co ułatwi późniejsze zweryfikowanie poprawności układu tabeli: VCDNGYKFVJŒŒDQTFGTŒŒ Jeśli chcesz, by tabela była węższa, podaj inną wartość atrybutu YKFVJ. Jeśli całko- wicie pominiesz atrybut YKFVJ, przeglądarka nada tabeli minimalną szerokość pozwalającą na czytelne przedstawienie zawartych w ztabeli danych. 136 Tworzenie tabeli 5. Otwórz element 64 , reprezentujący wiersz tabeli. 6. Otwórz element 6* , reprezentujący komórkę tabeli pełniącą funkcję nagcłówka. 7. Wprowadź tekst pierwszej komórki nagłówka tabeli. 8. Zamknij element 6* . Kod tworzący pierwszą komórkę powinien wyglądać następująco: VJ 6GMUVMQOÎTMKPCIđÎYMCVCDGNKVJ 9. Powtórz operacje opisane w punktach 6., 7. i 8. dla drugicej komórki nagłówka tabeli. 10. Zamknij element 64 , kończąc tym samym opis pierwszego wiersza tabeli. Kod całego wiersza powinien wyglądać mniej więcej w taki sposóbc: VT VJ 6GMUVMQOÎTMKPCIđÎYMCVCDGNKVJ VJ 6GMUVMQOÎTMKPCIđÎYMCVCDGNKVJ VT 18 11 12 16 17 15 13 14 11. Otwórz kolejny element 64 , by rozpocząć wprowadzanie drugiego wiersza tabeli. 12. Otwórz element 6 , by stworzyć komórkę tabeli zawierającą zwykły tekst (niepełniącą funkcji nagłówka). 13. 14. Kombinacją Ctrl+Spacja wprowadź znak twardej spacji, aby komórka nie zawierała żadnej treści. Zamknij element 6 . Kod tworzący pierwszą komórkę tego wiersza powinien wyglądać następująco: VF VF . 15. Powtórz operacje opisane w punktach 6., 7. i 8. dla drugiej komórki tego wiersza tabeli. Element 6 koniecznie musi zawierać jakąś treść. Jeśli komórka tabeli ma pozostać pusta, wewnątrz elementu 6 (a więc pomiędzy znacznikami VF i VF ) musi być zawarty znak twardej spacji (w kodzie HTML odpowiada mu encja JVON). 16. Zamknij element 64 , kończąc tym samym opis drugiego wiersza tabeli. Kodc całego wiersza powinien wyglądać mniej więcej w taki sposóbc: Tworzenie tabeli 137 VT VF VF VF VF VT 17. Zamknij element 6#$. , kończąc tym samym opis całej tabeli. 18. Zapisz wprowadzone zmiany. Kod całej tabeli powinien cwyglądać w tym momencie mniej więcej tak: VCDNGYKFVJŒŒDQTFGTŒŒ VT VJ 6GMUVMQOÎTMKPCIđÎYMCVCDGNKVJ VJ 6GMUVMQOÎTMKPCIđÎYMCVCDGNKVJ VT VT VF VF VF VF VT VCDNG 19. Uaktywnij okno przeglądarki. 20. Zaktualizuj wyświetlaną stronę. 19 21. W oknie przeglądarki powinna się pojawić tabela o założonym układzie. 20 21 138 Wprowadzanie tekstu do komórki tabeli Wprowadzanie tekstu do komórki tabeli 1 2 4 3 5 6 7 1. Odszukaj element 6 opisujący komórkę tabeli, której treść chcesz zmienić. 2. Podświetl istniejącą treść komórki tabeli. 3. Wprowadź nową treść komórki tabeli. Wprowadzany tekst zastąpi podświetlony fragment. 4. Zapisz wprowadzone zmiany. 5. Uaktywnij okno przeglądarki. 6. Zaktualizuj wyświetlaną stronę. 7. Oto nowa zawartość komórki tabeli. Przeglądarka samodzielnie dopasowała szerokość kolumn tabeli do nowo wprowadzonej treści. Zmiana szerokości kolumny tabeli 139 Zmiana szerokości kolumny tabeli Rzadko kiedy przeglądarce uda się we właściwy sposóbc dopasować szerokość kolumn tabeli do zawartej w jej komórkach treści. Czasem też nie mocże być mowy o automatycznym modyfikowaniu szerokości wybranych kolumn. Na szczęśccie język HTML pozwala bardzo dokładnie kontrolować szerokość kolumn tabeli i okrecślać ją w sposób dokładny — co do jednego piksela — lub względny. 1 2 1. Umieść kursor wewnątrz kodu znacznika 6 lub 6* otwierającego komórkę tabeli należącą do wybranej kolumny tabeli. Komórka ta koniecznie musi należeć do pierwszego wiersza tabeli. 2. Uzupełnij kod elementu 6* lub 6 atrybutem YKFVJ i podaj pożądaną szerokość kolumny: ♦ bezwzględną — w pikselach: YKFVJŒUGTQMQħèŒ ♦ względną — w procentach: YKFVJŒUGTQMQħèŒ 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 zmiany szerokoś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 ich zawartości oraz od szerokości pozostałych kolumn tazbeli. 140 Zmiana szerokości kolumny tabeli 4 3 4. Zaktualizuj wyświetlaną stronę. 3. Uaktywnij okno przeglądarki. 5 6 5. Kolumna tabeli, której komórka należąca do pierwszego wiersza otrzymała atrybut YKFVJŒŒ stała się wyraźnie węższa. 6. Druga kolumna tabeli została automatycznie rozszerzona tak, aby obejmować pozostałe 60 szerokości tabeli. Zmiana szerokości obramowania tabeli 141 Zmiana szerokości obramowania tabeli 3 1 2 5 6 1. Umieść kursor wewnątrz kodu znacznika 6#$. otwierającego kod tabeli. 2. Zmień wartość atrybutu DQTFGT, podając szerokość obramowania tabeli. Podanie wartości  (zero) spowoduje całkowite ukrycie obramowania: VCDNGDQTFGT ŒUGTQMQħèQDTCOQYCPKCŒ 3. Zapisz wprowadzone zmiany. 4. Uaktywnij okno przeglądarki. 4 5. Zaktualizuj wyświetlaną stronę. 6. Nadanie atrybutowi DQTFGT wartości  spowodowało zniknięcie obramowania tabeli. Prawie zawsze używa się tabel pozbawionych obramowania — po prostu wyglą- dają one znacznie lepiej. 142 Zmiana koloru tła tabeli Zmiana koloru tła tabeli 4 3 1 2 1. Umieść kursor wewnątrz kodu znacznika 6#$. , otwierającego kod tabeli, której kolor tła chcesz zmienić. 2. Uzupełnij kod znacznika 6#$. atrybutem UV[NG. 3. Jako wartość atrybutu UV[NG wprowadź atrybut stylu DCEMITQWPFEQNQT oraz kod koloru tła tabeli: VCDNGUV[NGŒDCEMITQWPFEQNQT MQFMQNQTWŒ 4. Zapisz wprowadzone zmiany. 5. Uaktywnij okno przeglądarki. 6 5 6. Zaktualizuj wyświetlaną stronę. 7. Tło tabeli (oraz wszystkich jej komórek) przyjęło nową barwę. 7 Zmiana koloru tła komórki tabeli 143 Zmiana koloru tła komórki tabeli Dokonana przed chwilą zmiana koloru tła tabeli spowcodowała zmianę koloru tła wszystkich jej komórek. Istnieje też możliwość wybiórcczego zmieniania koloru tła pojedynczych komórek tabeli. W zależności od szerokości marginesów komórek tabeli c(o których dowiesz się więcej już za chwilę), zmiana koloru tła tabeli połączona cze zmianą koloru tła wszystkich jej komórek (na inny kolor) może być ciekawym sposobem uzycskania barwnego obramowania tabeli. 4 1 3 2 6 7 5 1. Umieść kursor wewnątrz kodu znacznika 6 lub 6* otwierającego kod komórki tabeli, której kolor tła chcesz zmienić. 2. Uzupełnij kod znacznika atrybutem UV[NG. 3. Jako wartość atrybutu UV[NG wprowadź atrybut stylu DCEMITQWPFEQNQT oraz kod koloru tła komórki tabeli: VFUV[NGŒDCEMITQWPFEQNQT MQFMQNQTWŒ VJUV[NGŒDCEMITQWPFEQNQT MQFMQNQTWŒ 4. Zapisz wprowadzone zmiany. 5. Uaktywnij okno przeglądarki. 6. Zaktualizuj wyświetlaną stronę. 7. Tło komórki tabeli przyjęło nową barwę. 144 Zmiana koloru tła komórki tabeli 8. Powtórz powyższe operacje dla pozostałych komórek tabeli. Czy takie obramowanie tabeli nie wygląda lepiej niż prosta ramka oferowana 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 cjest jeszcze możliwość wpływania na szerokość marginesów jej komórek. Język HTML daje możcliwość regulowania szerokości marginesów komórek tabeli oraz odstępów micędzy komórkami. 4 1 2 3 6 8 5 7 1. Umieść kursor wewnątrz kodu znacznika 6#$. otwierającego kod tabeli, której szerokość marginesów chcesz zmodyfikować. 2. Uzupełnij kod znacznika 6#$. atrybutem EGNNRCFFKPI określającym szerokość wewnętrznego marginesu każdej z komórek tabeli (przyjmującego barwę tła komórki tabeli). 3. Uzupełnij kod znacznika 6#$. atrybutem EGNNURCEKPI określającym szerokość odstępu między sąsiednimi komórkami tabeli (przyjmującego barwę tła tabeli): VCDNGEGNNRCFFKPI ŒUGTQMQħèOCTIKPGUWMQOÎTGMŒ EGNNURCEKPI ŒUGTQMQħèQFUVúRWOKúF[MQOÎTMCOKŒ 4. Zapisz wprowadzone zmiany. 5. Uaktywnij okno przeglądarki. 6. Zaktualizuj wyświetlaną stronę. 7. Za margines komórki odpowiada atrybut EGNNRCFFKPI… 8. …a za szerokość odstępu między komórkami — atrybut EGNNURCEKPI. 146 Zmiana marginesów komórek tabeli EGNNRCFFKPI EGNNURCEKPI EGNNRCFFKPI EGNNURCEKPI Wstawianie nowego wiersza tabeli 147 Wstawianie nowego wiersza tabeli Wstawienie nowego wiersza tabeli jest operacją banaclną — wystarczy w odpowiednim miejscu kodu wstawić nowy element 64 i uzupełnić go odpowiednią liczbą elementów 6 lub 6* . Musisz jedynie pamiętać, by w nowo wstawianym wiersczu tabeli liczba komórek była identyczna z liczbą komórek znajdującycch się w pozostałych wierszach. 8 1 2 4 6 3 7 5 1. Umieść kursor zaraz za znacznikiem 64 zamykającym kod wiersza poprzedzający wstawiany wiersz tabeli (lub zaraz przed pierwszym znacznikiem 64 występującym wewnątrz elementu 6#$. , jeśli wstawiany wiersz ma być pierwszym wierszem tabeli). 2. Otwórz nowy element 64 . 3. Wprowadź element 6 (lub 6* ) opisujący pierwszą komórkę nowego wiersza. Jeśli chcesz, możesz od razu uzupełnić kod tego elementu dodatkowymi atrybutami, np. atrybutem UV[NG opisującym wygląd komórki. 4. Wprowadź treść wstawianej komórki tabeli. Jeśli chcesz, by komórka była pusta, umieść w niej znak twardej spacji za pomocą kombinacji klawiszy Ctrl+Spacja. 5. Zamknij element 6 (lub 6* ), kończąc tym samym opis pierwszej komórki nowego wiersza tabeli. 6. Powtórz operacje opisane w punktach 3., 4. i 5. dla pozostałych komórek nowego wiersza tabeli. Pamiętaj, by wstawiany wiersz zawierał tyle samo komórek, co pozostałe wiersze tej samej tabeli. 148 Wstawianie nowego wiersza tabeli 7. Zamknij element 64 , kończąc tym samym opis nowego wiersza tabeli. 8. Zapisz wprowadzone zmiany. 10 9 11 9. Uaktywnij okno przeglądarki. 10. Zaktualizuj wyświetlaną stronę. 11. Oto nowy, pusty wiersz tabeli. Jeśli po rozbudowaniu kodu tabeli o nowy element 64 tabela dosłownie „roz- pada się”, mieszając zawartość komórek lub kończąc się przedwcześnie, na pewno popełniłeś jakiś błąd w kodzie. W takim przypadku jeszcze raz sprawdź, czy zamknął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 tyle samo elementów 6 lub 6* , co pozostałe wiersze. Wstawianie nowej kolumny tabeli 149 Wstawianie nowej kolumny tabeli Niestety, struktura kodu tabeli w języku HTML — tabelac opisana jest wiersz po wierszu, zaś każdy wiersz zawiera identyczną liczbę komórek c— powoduje, że rozszerzenie tabeli o dodatkową kolumnę jest znacznie bardziej skomplikcowane i pracochłonne niż wstawienie nowego wiersza. Wstawienie nowej kolumny polega na dcołożeniu nowych elementów 6 lub 6* do każdego istniejącego wiersza tabeli. 1 7 8 4 3 2 6 5 1. Umieść kursor w miejscu kodu pierwszego wiersza tabeli, w którym ma się pojawić komórka tworząca nową kolumnę tabeli. 2. Wprowadź kod elementu 6 (lub 6* , jeśli komórka ma pełnić funkcję nagłówka tabeli). 3. Uzupełnij kod utworzonego elementu 6 (lub 6* ) atrybutem YKFVJ opisującym szerokość wstawianej kolumny tabeli. 4. Jeśli chcesz, uzupełnij kod utworzonego elementu dodatkowymi atrybutami, na przykład atrybutem UV[NG 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 spacji przy użyciu kombinacji klawiszy Ctrl+Spacja. 6. Zamknij element 6 (lub 6* ), kończąc tym samym opis nowej komórki tabeli. Jeśli chcesz, aby przeglądarka automatycznie ustalała szerokość kolumny, pomiń wprowadzanie atrybutu YKFVJ. 150 Wstawianie nowej kolumny tabeli 7. Powtórz operacje opisane w punktach 2., 4., 5. i 6. we wszcystkich pozostałych wierszach tabeli. W kolejnych wierszach nie wprowadzcaj już atrybutu YKFVJ opisującego szerokość kolumny — przeglądarka dla wszystkich nowych komórek zastosuje szerokość narzuconą w pierwszym wierszu tcabeli. 8. Zapisz wprowadzone zmiany. 9. Uaktywnij okno przeglądarki. 9 10. Zaktualizuj wyświetlaną stronę. 11. Oto nowa, pusta kolumna tabeli. 10 11 Jeśli po rozbudowaniu kodu tabeli o elementy 6 lub 6* składające się na nowy wiersz tabela dosłownie „rozpada się”, mieszając zawartość komórek lub kończąc się przedwcześnie, na pewno popełniłeś jakiś błąd w kodzie. W takim przypadku jeszcze raz sprawdź, czy zamknąłeś wszystkie elementy języka HTML składające się na kod tabeli we właściwej kolejności, oraz czy każdy wiersz tabeli zawiera tyle samo elementów 6 lub 6* , co pozostałe. Scalanie komórek tabeli 151 Scalanie komórek tabeli Jeśli tworzyłeś kiedyś za pomocą edytora tekstów lubc arkusza kalkulacyjnego tabele o skomplikowanym układzie, zetknąłeś się pewnie z fcunkcją scalania komórek tabeli, umożliwiającą utworzenie wspólnego nagłówka obejmująccego swoim zasięgiem kilka wierszy lub kolumn tabeli. Scalanie komórek tabeli jecst również dostępne w języku HTML; można wręcz powiedzieć, że jego rola jest znacznie cwiększa, gdyż tabele umieszczane na stronie WWW służą nie tylko tabelaryzowaniu danych, acle również tworzeniu układu strony oraz rozmieszczaniu jej elementów — takich jack fragmenty tekstu czy osadzone na stronie obrazy. Niestety, tworzenie kodu HTML odpowciedzialnego za układ tabeli zawierającej scalone komórki jest dość trudne. Podstawowa trudność przy tworzeniu kodu scalonych kocmórek polega na tym, że scalanie wymaga złamania zasady obecności takiej samej liczbcy komórek w każdym wierszu tabeli. Dwie scalone ze sobą komórki opisywane będą w kodziec przez tylko jeden element 6 , co znacznie utrudnia weryfikację poprawności kodu tcabeli. Scalanie komórek tabeli w poziomie Scalanie dwóch leżących obok siebie komórek tabeli w cpoziomie jest jeszcze w miarę łatwe — należy tylko usunąć jeden z elementów 6 , zaś kod drugiego uzupełnić jednym atrybutem. 1. W poniższym przykładzie dokonasz scalenia tych dwóch komórek tabeli. 1 3 2 2. Podświetl kod elementu 6 odpowiadającego jednej ze scalanych komórek. 3. Naciśnij klawisz Delete, aby usunąć podświetlony kod. 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–1 elementów 6 , pozostawiając w kodzie tylko jeden. 6 4 5 9 8 7 4. Umieść kursor wewnątrz jedynego pozostawionego elementu 6 . 5. Uzupełnij kod elementu 6 atrybutem EQNURCP z parametrem określającym liczbę komórek tabeli zastępowanych pozostawionym pojedynczym elementem 6 : VFEQNURCPŒCUVúRECNKEDC MQOÎTGMŒ VF 6. Zapisz wprowadzone zmiany. 7. Uaktywnij okno przeglądarki. 8. Zaktualizuj wyświetlaną stronę. 9. Dwie komórki tabeli zostały połączone. Dwa odrębne elementy 6 (znajdujące się obok siebie w jednym wierszu tabeli) zastąpił jeden, uzupełniony atrybutem EQNURCPŒŒ. Scalanie komórek w pionie Scalanie dwóch leżących nad sobą w pionie komórek tabceli wymaga rozszerzenia o atrybut TQYURCP elementu 6 leżącego w najwyższym wierszu oraz usunięcia elemecntu 6 leżącego w wierszu poniżej. W przypadku scalania więcej niż dwóch komórek należy usunąć odpowiednio więcej elementów 6 w leżących poniżej wierszach tabeli. 1 2 3 6 4 5 7 8 9 Scalanie komórek tabeli 153 1. W poniższym przykładzie dokonasz scalenia tych dwóch komórek tabeli. 2. Podświetl kod elementu 6 odpowiadającego jednej ze scalanych komórek, leżącej w niższym z dwóch wierszy, w których znajdują się scalane komórki. 3. Naciśnij klawisz Delete, aby usunąć podświetlony kod. 4. Umieść kursor wewnątrz jedynego pozostawionego elementu 6 . 5. Uzupełnij kod elementu 6 atrybutem TQYURCP z parametrem określającym liczbę komórek tabeli zastępowanych pozostawionym pojedynczym elementem 6 : VFTQYURCPŒCUVúRECNKEDC MQOÎTGMŒ VF 6. Zapisz wprowadzone zmiany. 7. Uaktywnij okno przeglądarki. 8. Zaktualizuj wyświetlaną stronę. 9. Dwie komórki tabeli zostały połączone. Dwa odrębne elementy 6 (znajdujące się w dwóch różnych wierszach tabeli) zastąpił jeden, uzupełniony atrybutem TQYURCPŒŒ. 154 Dzielenie scalonej komórki tabeli Dzielenie scalonej komórki tabeli Aby anulować operację scalenia komórek tabeli, należyc wykonać dwie operacje: ♦ usunąć atrybut TQYURCP lub EQNURCP z elementu 6 odpowiadającego za scaloną komórkę (zamienić ją z powrotem w najzwyklejszą komórkcę tabeli), ♦ odtworzyć usunięte w czasie scalania elementy 6 tak, aby przywrócić odpowiednią liczbę elementów w każdym wierszu (elemencie 64 ) tabeli. W poniższym przykładzie dokonuję anulowania scalenica dwóch komórek tabeli w poziomie. 1 5 2 3 4 1. Celem ćwiczenia będzie rozdzielenie tych dwóch scalonych ze sobą komórek. 2. Podświetl kod atrybutu EQNURCP, zmieniającego element 6 ze zwykłej komórki tabeli w komórkę scalającą. 3. Naciśnij klawisz Delete, by usunąć podświetlony kod. 4. Zaraz za kodem elementu 6 zawierającego jeszcze przed chwilą atrybut EQNURCP wprowadź kod nowego elementu 6 . Utworzy on komórkę tabeli wyrównującą liczbę komórek w wierszu z liczbą komórek istniejących w pozostałych wierszach tabeli: VF VF . 5. Zapisz wprowadzone zmiany. Dzielenie scalonej komórki tabeli 155 6. Uaktywnij okno przeglądarki. 7. Zaktualizuj wyświetlaną stronę. 8. Scalona komórka została podzielona na 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 wc dwojaki sposób: ♦ w poziomie — do lewego lub prawego marginesu, do obcu marginesów lub wycentrowany, ♦ w pionie — do górnego lub dolnego marginesu albo wyccentrowany. Szczególnie istotna jest możliwość definiowania wyrówncywania tekstu w pionie, gdyż przeglądarki WWW najczęściej domyślnie centrują zawarctość komórki, co powoduje nieelegancki wygląd tabel zawierających w komórkachc na zmianę długie i krótkie fragmenty tekstu: 5 1 3 4 2 1. Umieść kursor wewnątrz elementu 6 (lub 6* ), którego sposób wyrównywania chcesz zmienić. 2. Jeśli element ten nie jest jeszcze wyposażony w atrybut UV[NG, uzupełnij kod. Określenie położenia zawartości komórki tabeli 157 3. Wewnątrz atrybutu UV[NG wprowadź atrybut stylu VGZVCNKIP z parametrem określającym sposób wyrównania zawartości komórki tabeli w poziomie: ♦ NGHV — do lewego marginesu, ♦ TKIJV — do prawego marginesu, ♦ EGPVGT — wycentrowany, ♦ LWUVKH[ — do obu marginesów (wyjustowany). 4. Wewnątrz atrybutu UV[NG wprowadź atrybut stylu XGTVKECNCNKIP z parametrem określającym sposób wyrównania zawartości komórki tabeli w pionie: ♦ VQR — do górnego marginesu, ♦ DQVVQO — do dolnego marginesu, ♦ EGPVGT — wycentrowany. VFUV[NGVGZVCNKIPURQUÎDY[TÎYP[YCPKCYRQKQOKG XGTVKECNCNKIPURQUÎDY[TÎYP[YCPKCYRKQPKG 5. Zapisz wprowadzone zmiany. 7 6 7. Zaktualizuj wyświetlaną stronę. 1. Uaktywnij okno przeglądarki. 8 8. Zawartość tej komórki została wycentrowana w poziomie (VGZVCNKIPEGPVGT) oraz wyrównana do górnego marginesu (XGTVKECNCNKIPVQR). 158 Tabela tworząca układ strony Tabela tworząca układ strony Podstawowym celem tabeli jest przedstawienie zbioruc danych w eleganckiej, tabelarycznej postaci. Dostępny w języku HTML mechanizm tabel jest jcednak tak elastyczny, iż umożliwia budowanie — za pomocą tabel — układu całej strony WWW c(dzielenie jej na prostokątne fragmenty odpowiadające szpaltom gazety). W poniższym przykładzie pokażę, w jaki sposób wykorzystać mechanizm tabel do stworzenia prostego układu strony podzielonej na następujące fragmenty: Tworząc bardziej skomplikowane tabele, możesz wspomagać się takimi właśnie szkicami. Ułatwiają one określenie liczby wymaganych wierszy i kolumn tabeli oraz oznaczenie komórek, które powinny zostać scalonez. 1 2 1. Uruchom program Webber, aby rozpocząć pracę nad nowym kodem. 2. Wprowadź podstawowy kod każdej strony WWW:  1 6;2 JVON27$.+ 9  6 *6/.6TCPUKVKQPCN 0 JVON JGCF VKVNG /QLCRKGTYUCUVTQPC999VKVNG Tabela tworząca układ strony 159 OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ JGCF DQF[ DQF[ JVON 3 4 5 6 3. Wprowadź nagłówek strony jako treść elementu * : J /QLCRKGTYUCUVTQPC999J 4. Rozpocznij wprowadzanie kodu tabeli, wpisując znacznik otwierający 6#$. wraz z atrybutami: ♦ YKFVJŒŒ — aby tabela miała szerokość okna przeglądarki, ♦ EGNNURCEKPIŒŒ — aby usunąć odstępy między komórkami, ♦ EGNNRCFFKPIŒŒ — aby komórki tabeli miały margines o szerokości 5 pikseli z każdej strony, ♦ UV[NGŒDCEMITQWPFEQNQTDNWGŒ — aby tło tabeli miało niebieską barwę. VCDNGYKFVJ EGNNURCEKPIEGNNRCFFKPI UV[NGDCEMITQWPFEQNQTDNWG 5. Wprowadź trzy pełne elementy 64 . Zgodnie ze schematem tabeli potrzebne są trzy wiersze (jeden na datę aktualizacji strony, jeden na menu i treść artykułu, jeden na stopkę strony — stąd liczba elementów 64 ). 6. Zamknij kod tabeli znacznikiem zamykającym 6#$. . 160 Tabela tworząca układ strony 7 8 9 13 10 12 11 7. Ponieważ pierwszy wiersz tabeli ma zawierać jedynie datę ostatniej aktualizacji strony, wystarczy jedna, szeroka komórka scalająca (EQNURCPŒŒ). Wprowadź jej kod: VFEQNURCPŒŒ VF 8. W drugim wierszu tabeli potrzebne są już dwie odrębne komórki tabeli o różnej szerokości: ♦ komórka zawierająca menu powinna mieć stałą szerokość, niezależną od szerokości okna przeglądarki, ♦ komórka zawierająca treść artykułu powinna dostosowywać swoją szerokość do szerokości okna przeglądarki. VFXCNKIPVQRYKFVJ VF VF VF 9. Ostatni wiersz, zawierający stopkę strony, może zawierać tylko jedną scaloną komórkę: VFEQNURCPŒŒ VF 10. Uzupełnij kod pierwszego elementu 6 w drugim wierszu tabeli (komórka zawierająca menu) atrybutem XCNKIPŒVQRŒ. Dzięki temu niezależnie od rozmiaru sąsiedniej komórki menu zawsze będzie dosunięte do górnej krawędzi komórki. 11. 12. Uczyń to samo z drugą komórką tego wiersza — dzięki tecmu tekst artykułu, nawet gdyby był niezwykle krótki, zawsze będzie dosuniętyc do górnej krawędzi komórki. Uzupełnij kod prawej komórki drugiego wiersza (komórkic zawierającej tekst artykułu) atrybutem UV[NGŒDCEMITQWPFEQNQTYJKVGŒ. Nadasz w ten sposób tej komórce biały kolor tła. Tabela tworząca układ strony 161 VT VFXCNKIPVQRYKFVJ VF VFUV[NGDCEMITQWPFEQNQTYJKVGXCNKIPVQR VF VT 13. Zapisz wprowadzone zmiany. 15 14 14. Uaktywnij okno przeglądarki. 15. Zaktualizuj wyświetlaną stronę. 16. Strona zaczyna wyglądać jak przygotowany wcześniej szkic. 16 17 18 21 20 19 17. Wróć do edycji kodu strony w oknie programu Webber. 18. Umieść kursor pomiędzy znacznikami elementu 6 tworzącego jedyną komórkę pierwszego wiersza tabeli. 19. Otwórz element 2 , który ma zawierać informację o dacie ostatniej aktualizacji strony. Wykorzystaj następujące atrybuty stylu tego elementu (podane jako treść atrybutu UV[NG): ♦ HQPVHCOKN[CTKCNUCPUUGTKH — aby napis złożony był czcionką bezszeryfową, ♦ EQNQT[GNNQY — aby tekst miał kolor żółty i odznaczał się na niecbieskim tle, ♦ VGZVCNKIPTKIJV — aby data ostatniej aktualizacji strony dosuniętac była do prawego marginesu. RUV[NGHQPVHCOKN[CTKCNUCPUUGTKHEQNQT[GNNQYVGZVCNKIPTKIJV 20. Wprowadź tekst informujący o dacie ostatniej aktualizcacji strony. 21. Zamknij element 2 . Cały jego kod powinien wyglądać mniej więcej tak: RUV[NGHQPVHCOKN[CTKCNUCPUUGTKHEQNQT[GNNQYVGZVCNKIPTKIJV D CVCQUVCVPKGLCMVWCNKCELKD  R 162 Tabela tworząca układ strony 22 25 24 23 22. Umieść kursor pomiędzy znacznikami elementu 6 tworzącego pierwszą komórkę drugiego wiersza tabeli. Będzie ona zawierać menu słucżące do nawigowania po stronach Twojego serwisu. 23. Aby nadać całemu menu jednolity wygląd, wprowadź kod celementu 52#0 wraz z następującymi atrybutami stylu (podanymi jako trecść atrybutu UV[NG): ♦ VGZVCNKIPEGPVGT — aby cały tekst menu był wypośrodkowany, ♦ HQPVHCOKN[CTKCNUCPUUGTKH — aby tekst menu był złożony czcionką bezszeryfowąc. URCPUV[NGVGZVCNKIPEGPVGTHQPVHCOKN[CTKCNUCPUUGTKH 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 tekstcu (elementy 2 ) zawierających odnośniki (elementy # ). Pamiętaj, by każdemu elementowi # przyporządkować kolor umożliwiający odczytanie teksctu na ciemnym tle: R CJTGHKPFGZJVONUV[NGEQNQTYJKVG 5VTQPCIđÎYPCFC R R CJTGHNKPMKJVONUV[NGEQNQTYJKVG 1FPQħPKMKC R 25. Zamknij element 52#0 . Tabela tworząca układ strony 163 26 27 26. Umieść kursor wewnątrz znaczników drugiego elementu 6 w tym samym wierszu tabeli. 27. Wprowadź dowolny tekst. 32 28 31 30 29 28. Umieść kursor pomiędzy znacznikami 6 komórki tabeli w ostatnim jej wierszu. 29. Otwórz element 2 , który ma zawierać tekst stopki strony. Wykorzystaj ncastępujące atrybuty stylu tego elementu (podane jako treść atrycbutu UV[NG): ♦ HQPVHCOKN[CTKCNUCPUUGTKH — aby napis złożony był czcionką bezszeryfową, ♦ EQNQT[GNNQY — aby tekst miał kolor żółty i odznaczał się na niecbieskim tle, ♦ HQPVUKGRV — aby czcionka miała rozmiar 9 punktów. RUV[NGHQPVHCOKN[CTKCNUCPUUGTKHHQPVUKGRVEQNQT[GNNQY 30. Wprowadź dowolny tekst stopki strony. 164 Tabela tworząca układ strony 31. Zamknij element 2 : RUV[NGHQPVHCOKN[CTKCNUCPUUGTKHHQPVUKGRVEQNQT[GNNQY D QR[TKIJVEQR[,CP/TÎHHMCD R 32. Zapisz wprowadzone zmiany. 34 35 33. Uaktywnij okno przeglądarki. 33 34. Zaktualizuj wyświetlaną stronę. 35. Oto gotowy układ strony. Możesz kopiować ten plik pod różnymi nazwami, zmieniając tylko treść artykułu umieszczonego na stronie. Podsumowanie 165 Podsumowanie Tabele stanowią bardzo istotny element języka HTML. Wbcrew pozorom rzadko służą one do przedstawiania w postaci tabelarycznej zestawów cdanych. Najczęstszym zastosowaniem tabel jest dzielenie strony na obszary (takie jak ocbszar nagłówka, obszar menu czy obszar treś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 64 ) zawiera kilka komórek (elementy 6 lub 6* ), ♦ ♦ w tabeli niezawierającej scalonych komórek liczba kcomórek w każdym wierszu powinna być identyczna, komórka scalona obejmująca N wierszy lub N kolumn odpowiada N odrębnym elementom 6 lub 6* , zatem tworząc scaloną komórkę należy usunąć nadmiarowe komórki tabeli wraz z ich zawartością, ♦ błędny kod tabeli najczęściej owocuje efektem „rozsycpywania się” tabeli — pojawiają się puste wiersze lub kolumny, komórki nachodzą na csiebie lub też tabela urywa się nagle i przekształca w zwykły tekst.
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Tworzenie stron WWW. Kurs
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: