Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00108 010372 11038332 na godz. na dobę w sumie
Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie II - książka
Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie II - książka
Autor: Liczba stron: 192
Wydawca: Helion Język publikacji: polski
ISBN: 83-246-0587-8 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).

Witryny WWW to chyba najlepiej znane oblicze internetu. Miliony stron poświęcone różnym tematom są codziennie odwiedzane przez użytkowników sieci z całego świata. To wizytówki firm, galerie cyfrowej sztuki, źródła wiedzy o nawet najbardziej egzotycznych zagadnieniach lub po prostu 'własne miejsca' tych, którzy zdecydowali się pokazać cząstkę swojego życia światu.

Podstawowym budulcem stron internetowych jest język HTML -- zestaw znaczników określających wygląd elementów strony. Konsorcjum W3C czuwające nad standardami wykorzystywanymi w sieci WWW co pewien czas ogłasza nową wersję specyfikacji języka, dbając również o to, aby producenci przeglądarek WWW prawidłowo zaimplementowali ją w swoich produktach.

Czytając książkę 'Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie II', poznasz język HTML. Dowiesz się, w jaki sposób zaistnieć w sieci, tworząc własną witrynę WWW. Wykonując kolejne ćwiczenia zawarte w książce, zaplanujesz strukturę i schemat nawigacyjny witryny, zastosujesz znaczniki języka HTML do sformatowania elementów strony oraz wykorzystasz ogromne możliwości kaskadowych arkuszy stylów do nadania stronie niepowtarzalnego wyglądu.

Przestań być biernym uczestnikiem internetowej rewolucji
-- stwórz własną witrynę WWW.

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 FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl Tworzenie stron WWW. Æwiczenia praktyczne. Wydanie II Autor: Maria Sokó³ ISBN: 83-246-0587-8 Format: A5, stron: 192 Przyk³ady na ftp: 251 kB Witryny WWW to chyba najlepiej znane oblicze internetu. Miliony stron poœwiêcone ró¿nym tematom s¹ codziennie odwiedzane przez u¿ytkowników sieci z ca³ego œwiata. To wizytówki firm, galerie cyfrowej sztuki, Ÿród³a wiedzy o nawet najbardziej egzotycznych zagadnieniach lub po prostu „w³asne miejsca” tych, którzy zdecydowali siê pokazaæ cz¹stkê swojego ¿ycia œwiatu. Podstawowym budulcem stron internetowych jest jêzyk HTML — zestaw znaczników okreœlaj¹cych wygl¹d elementów strony. Konsorcjum W3C czuwaj¹ce nad standardami wykorzystywanymi w sieci WWW co pewien czas og³asza now¹ wersjê specyfikacji jêzyka, dbaj¹c równie¿ o to, aby producenci przegl¹darek WWW prawid³owo zaimplementowali j¹ w swoich produktach. Czytaj¹c ksi¹¿kê „Tworzenie stron WWW. Æwiczenia praktyczne. Wydanie II”, poznasz jêzyk HTML. Dowiesz siê, w jaki sposób zaistnieæ w sieci, tworz¹c w³asn¹ witrynê WWW. Wykonuj¹c kolejne æwiczenia zawarte w ksi¹¿ce, zaplanujesz strukturê i schemat nawigacyjny witryny, zastosujesz znaczniki jêzyka HTML do sformatowania elementów strony oraz wykorzystasz ogromne mo¿liwoœci kaskadowych arkuszy stylów do nadania stronie niepowtarzalnego wygl¹du. (cid:129) Projekt witryny WWW (cid:129) Elementy sk³adowe dokumentu HTML (cid:129) Hiper³¹cza i nawigacja (cid:129) Tabele (cid:129) Definiowanie i stosowanie stylów CSS (cid:129) Testowanie witryny WWW w ró¿nych przegl¹darkach (cid:129) Podstawowe wiadomoœci o jêzyku PHP Przestañ byæ biernym uczestnikiem internetowej rewolucji — stwórz w³asn¹ witrynê WWW Rozdział 1. Wstęp Informacje podstawowe Co to jest internet? Co to jest WWW? Jak komunikują się komputery w internecie? Surfowanie i przeglądarka Jeszcze kilka słów o adresach URL Co to jest odnośnik? Co to jest HTML? Elementy strony Rozdział 2. Projektowanie serwisu WWW Rozdział 3. Projektowanie serwisu Projektowanie serwisu — uwagi praktyczne Tworzenie strony WWW Tworzenie podstawowego szkieletu strony WWW Definiowanie tytułu Nagłówek Dodajemy tekst Linia pozioma Dodajemy listę Lista zagnieżdżona Obrazy na stronie WWW Tekst alternatywny Podpis Ćwiczenie do samodzielnego wykonania 5 9 9 10 11 12 13 14 17 20 21 21 23 25 25 28 30 33 37 38 41 42 47 48 50 4 Tworzenie stron WWW • Ćwiczenia praktyczne Rozdział 4. Odnośniki Tworzenie odnośnika do strony składowej serwisu Tworzenie odnośników prowadzących do punktów nawigacyjnych w obrębie strony Powrót do strony głównej i komunikacja między stronami — ikony nawigacji Obrazy aktywne Udostępnianie plików na FTP i ze strony WWW Galeria obrazów na stronie WWW Tabele Elementy konstrukcyjne tabeli Procedura tworzenia tabeli Tabela trochę bardziej złożona Komórki rozpięte na kilku wierszach lub kolumnach Tabela w różnych przeglądarkach Rozdział 5. Rozdział 6. Kaskadowe arkusze stylów Kaskadowe arkusze stylów Klasy Definicja CSS Czcionka Tło Arkusze stylów — zasady ogólne CSS a rozszerzenia HTML Trochę więcej wolnej przestrzeni Formatowanie kilku znaków Przyłączanie arkuszy stylu do dokumentu HTML Testowanie stron WWW Rozdział 7. Rozdział 8. Strony PHP Kilka słów o PHP Testowanie serwera PHP Krótki kurs PHP Zmienne PHP Elementy języka HTML Dodatek A 53 55 58 60 63 69 72 75 75 78 81 83 87 89 89 91 92 94 95 97 98 113 119 121 123 127 127 129 130 132 149 Tabele języka HTML umożliwiają prezentację danych na stro- nach WWW oraz kontrolowanie umiejscawiania elementów strony — tekstu, obrazów, pól formularzy, innych tabel itd. — poprzez umieszczanie ich w kolumnach lub wierszach tabeli. Bardzo często autorzy stron WWW budują z tabel strukturę strony, dzieląc ją na poziome i pionowe pasy wypełniane później treścią. Chociaż nowo- czesne serwisy internetowe nie powinny być zbudowane w ten spo- sób, prostota stosowania tabel i ich efektywność powodują, że są one najlepszym rozwiązaniem dla początkujących twórców. Tabela 5.1 prezentuje podstawowe znaczniki definiujące tabelę, ich funkcje oraz niektóre atrybuty, które mogą Ci się najbardziej przydać. Podział tabeli przy wykorzystaniu elementów zalecanych w HTML 4 ( caption , tbody , tfoot i thead ) pozwala na nadanie jej określo- nej struktury i jest przydatny w przypadku długich tabel, ponieważ ułatwia orientację w ich zawartości (nagłówek i stopka mogą być drukowane na każdej stronie). W prostych tabelach można ograniczać się do elementów ze specyfikacji HTML 3.2. 7 6 Tworzenie stron WWW • Ćwiczenia praktyczne Tabela 5.1. Znaczniki tabeli i podstawowe atrybuty Znaczniki table /table tr /tr td /td Funkcja znacznika i jego atrybuty Tworzy tabelę — jest „opakowaniem” pozostałych elementów. Pamiętaj, że tabela jest tworem logicznym — domyślnie nie są wyświetlane żadne obramowania, nie zobaczysz więc utworzonej tabeli, dopóki nie wypełnisz jej treścią lub nie narzucisz formatowania. Oto atrybuty tabeli stosowane bezpośrednio: cellspacing=”piksele” — wolny obszar między komórkami; cellpadding=”piksele” — wolny obszar między krawędziami komórki a zawartością. Width=”szerokość” — szerokość tabeli w procentach względem szerokości strony lub w bezwzględnej jednostce miary (pt, px, em, cm, mm). Oprócz tego, tabele mogą być wyposażone w atrybut style określający wygląd całej tabeli (marginesy, tła, czcionki). Więcej o atrybutach stylu CSS przeczytasz w rozdziale 6. Wiersz tabeli. Wiersze mają wyższy priorytet i muszą zawierać poszczególne komórki — nigdy na odwrót. Wiersz tabeli opisany przez element tr może być wyposażony w atrybut style określający wygląd całego wiersza tabeli (marginesy, tła, czcionki). Komórka tabeli. Komórki umieszcza się między znacznikami wiersza tabeli. Atrybuty: rowspan= n — rozpięcie komórki na n wierszach; colspan= n — rozpięcie komórki na n kolumnach. Oprócz tego, komórka tabeli opisana przez element td może być wyposażona w atrybut style określający jej wygląd (marginesy, tła, czcionki). Rozdział 5. • Tabele 7 7 Tabela 5.1. Znaczniki tabeli i podstawowe atrybuty — ciąg dalszy Znaczniki th /th caption /caption tfoot /tfoot thead /thead tbody /tbody . Funkcja znacznika i jego atrybuty Komórka nagłówka tabeli. Standardowo od komórki danych różni się tym, że zastosowano w niej czcionkę pogrubioną i wycentrowanie, jednak oczywiście za pomocą stylów CSS możesz dowolnie wpływać na wygląd nagłówka. Elementy th stosuje się nie tylko po to, by wyróżniać wizualnie nagłówki tabeli, ale przede wszystkim, by odseparować logicznie komórki th składające się na strukturę logiczną tabeli od komórek td zawierających faktyczne dane. Atrybuty: rowspan= n — rozpięcie komórki na n wierszach; colspan= n — rozpięcie komórki na n kolumnach. Oprócz tego, komórka tabeli opisana przez element th może być wyposażona w atrybut style określający jej wygląd (marginesy, tła, czcionki). Podpis — informuje o zawartości tabeli. Jest opcjonalny, a umieszczany w obrębie elementu table , przed definicjami wierszy. Stopka — utworzona podobnie jak nagłówek ze zgrupowanych wierszy. Nagłówek — tworzą go zgrupowane wiersze. Obszar treści tabeli. Komórki tabeli mogą zawierać: q informacje nagłówka — do takich zastosowań rezerwuje je znacznik th ; q dane — informuje o tym znacznik td . Jeszcze raz podkreślę: tabela (element table ) jest podzielona na wier- sze (elementy tr ), a dopiero te podzielone są na komórki (elementy td i th ). Takiej konstrukcji tabeli musisz się trzymać — nie wolno 7 8 Tworzenie stron WWW • Ćwiczenia praktyczne Ci na przykład dzielić tabeli na kolumny, a dopiero w drugiej kolej- ności na komórki w kolejnych wierszach. W poniższym ćwiczeniu zbudujemy od nowa szablon strony WWW, tym razem jednak dzieląc jej powierzchnię na prostokątne obszary prze- znaczone do zapełniania nagłówkiem strony, dwoma panelami z me- nu i informacjami, stopką oraz właściwym tekstem strony. Sam chy- ba przyznasz, że taki dwuwymiarowy podział strony WWW w pionie i w poziomie jest znacznie bardziej elastyczny niż proste, liniowe pro- jektowanie „od góry do dołu” ze znikomym wpływem na postać gra- ficzną serwisu. Ć W I C Z E N I E 5.1 Projektowanie tabeli Zanim napiszesz kod tabeli, pobaw się w konstruktora. 1. Naszkicuj tabelę na papierze. 2. Zaznacz komórki rozpięte na n wierszach i (lub) kolumnach (jeśli chcesz, by któreś komórki były większe, niż wynika to z naturalnego podziału tabeli). 3. 4. Otwórz szablon strony w oknie Notatnika. Wpisz kod tabeli: rozpocznij od zewnętrznego znacznika table i dodaj kolejne wiersze ( tr ), a w wierszach — komórki nagłówka ( th ) oraz danych ( td ). Nie zapomnij o znacznikach zamykających. Listing 5.1 prezentuje kod kompletnej, choć niezbyt treściwej strony WWW zbudowanej w oparciu o tabelę — skorzystaj z jego pomocy. Listing 5.1. Podstawowy kod tabeli tworzącej szablon strony WWW !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns= http://www.w3.org/1999/xhtml xml:lang= pl lang= pl head meta http-e im= Content-Type content= text/htmle charset= tf-; / title Gliwickie Bi ro Projektów GLIWPROJ /title Rozdział 5. • Tabele 7 9 /head body style= margin: 0 0 0 0e padding: 0 0 0 0e table style= width: 100 e cellpadding= 3 cellspacing= 0 !-- Wiersz nagłówka strony, rozci gaj cy sie na trzy kol mny tabeli. -- tr td colspan= 3 style= backgro nd-color: bl ee color: whitee NAGŁÓWEK STRONY /td /tr !-- Wiersz treści strony, podzielony na 3 kol mny. -- tr td style= backgro nd-color: greene color: whitee LEWY PANEL /td td TREŚĆ STRONY br / nbspe br / nbspe br / nbspe br / /td td style= backgro nd-color: greene color: whitee PRAWY PANEL /td /tr !-- Wiersz stopki strony, rozci gaj cy sie znów na trzy kol mny tabeli. -- tr td colspan= 3 style= backgro nd-color: bl ee color: whitee STOPKA STRONY /td /tr /table /body /html 5. Zapisz kod strony zbudowanej w oparciu o tabelę na dysku i zobacz w przeglądarce, jak wygląda (rysunek 5.1). W powyższym przykładzie w elemencie body pojawia się definicja stylu narzucająca zerowe marginesy (atrybut margin) oraz odstępy (atrybut padding). To powoduje, że tabela tworząca układ strony może przylegać bezpośrednio do krawędzi okna przeglądarki, bez zbędnego odstępu. 8 0 Tworzenie stron WWW • Ćwiczenia praktyczne Rysunek 5.1. Utworzona tabela dzieli obszar strony WWW na pięć prostokątów, które możesz zapełniać treścią znacznie ciekawiej niż w poprzednich przykładach Atrybuty stylu background-color oraz color umożliwiają nadawanie dowolnego koloru indywidualnym komórkom tabeli tła oraz zamieszczonemu wewnątrz nich tekstowi. Mimo iż tabela tak naprawdę zawiera trzy kolumny komórek (ponieważ drugi wiersz zawiera trzy elementy td ), zastosowanie atrybutu colspan powoduje, że pierwszy i ostatni wiersz składają się jedynie z pojedynczych komórek o szerokości całej tabeli. W ten sposób powstały nagłówek i stopka strony. Atrybut stylu width o wartości 100 przypisany elementowi table powoduje, że tabela zawsze wypełnia na szerokość całe okno przeglądarki, niezależnie od jego rozmiarów. Pamiętaj, że dobrze zaprojektowana strona WWW wygląda zawsze dobrze, niezależnie od tego, jak duże (lub jak małe) jest okno przeglądarki! Rozmiar okna to indywidualna decyzja użytkownika komputera. Rozdział 5. • Tabele 8 1 Potrafisz już utworzyć tabelę, ma jednak ona kilka niedoskonałości. Zawartość bocznych paneli wędruje w pionie, znajdując się zawsze na środku komórki, same panele są zdecydowanie zbyt szerokie, a sza- blon strony z powodu braku obrazów wygląda niezbyt interesująco. Ć W I C Z E N I E 5.2 Modyfikowanie tabeli i umieszczanie obrazu w komórce Czas poprawić wygląd serwisu, zmieniając nieco atrybuty elementów td i dodając obraz umieszczony w jednej z komórek. 1. Wpisz w oknie Notatnika kod źródłowy pokazany w listingu 5.2. Możesz go wykorzystać, opracowując swoją stronę główną. Listing 5.2. Poprawiony projekt tabeli-szablonu !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns= http://www.w3.org/1999/xhtml xml:lang= pl lang= pl head meta http-e im= Content-Type content= text/htmle charset= tf-; / title Gliwickie Bi ro Projektów GLIWPROJ /title /head body style= margin: 0 0 0 0e padding: 0 0 0 0e table style= width: 100 e cellpadding= 3 cellspacing= 0 !-- Wiersz nagłówka strony, rozci gaj cy sie na trzy kol mny tabeli. -- tr td colspan= 3 style= backgro nd-color: bl ee color: whitee NAGŁÓWEK STRONY /td /tr !-- Wiersz treści strony, podzielony na 3 kol mny. -- tr td style= backgro nd-color: #c0c0ffe color: bl ee mertical-align: tope width: 140pxe LEWY PANEL /td td style= mertical-align: tope TREŚĆ STRONY br / nbspe br / nbspe br / nbspe br / 8 2 Tworzenie stron WWW • Ćwiczenia praktyczne /td td style= backgro nd-color: #c0c0ffe color: bl ee mertical-align: tope width: 140pxe dim style= text-align: centere padding: 6px 0 2px 0e img src= obrazy/siedziba-mala.jpg style= width: 130pxe height: 97pxe border: 1px solid bl ee alt= Siedziba naszej firmy / /dim Siedziba firmy /td /tr !-- Wiersz stopki strony, rozci gaj cy sie znów na trzy kol mny tabeli. -- tr td colspan= 3 style= backgro nd-color: bl ee color: whitee STOPKA STRONY /td /tr /table /body /html 2. Zmień atrybuty lub zamiast tekstu umieść w komórce obraz (patrz uwaga). 3. Zapisz plik i zobacz, jak się prezentuje w przeglądarce (rysunek 5.2). 4. Zapisz plik i ponownie przetestuj. Komórka może zawierać dowolne dane: tekstowe, liczbowe, łącza, zagnieżdżoną inną tabelę, a także obraz. Aby umieścić w komórce obraz, po prostu wstaw element img (wraz z niezbędnymi atrybutami) pomiędzy znaczniki otwierający i zamykający elementu td . Jeżeli obraz ma być jednym elementem umieszczonym w komórce tabeli, warto wszystkie trzy znaczniki umieścić w jednym wierszu tekstu ( td img ... / /td ) — w ten sposób unikniesz problemów z wyglądem obrazu ujawniających się w niektórych przeglądarkach. Atrybut stylu width przypisany elementowi td steruje szerokością całej kolumny tabeli, do której należy dana komórka. Kolumny, w których żadna z komórek nie narzuca szerokości w ten sposób, dostosowują się szerokością tak, by prezentować maksimum treści lub by cała tabela miała odpowiednią szerokość. Rozdział 5. • Tabele 8 3 Rysunek 5.2. Nowa wersja projektu prezentuje się znacznie lepiej — nie tylko tekst we wszystkich panelach wyrównany jest do górnej krawędzi, ale też w prawym panelu pojawił się obrazek Atrybut stylu vertical-align przypisany elementowi td steruje sposobem wyrównywania treści komórki w pionie. Domyślna wartość middle powoduje centrowanie zawartości, zaś wartości top i bottom dosuwają treść odpowiednio do górnej lub dolnej krawędzi komórki. Komórki rozpięte na kilku wierszach lub kolumnach zawierają naj- częściej nagłówki. Aby zdefiniować taką komórkę, należy do znacznika th lub td dodać atrybuty rowspan i (lub) colspan i przypisać im jako wartości liczby całkowite określające, na ilu wierszach i (lub) kolum- nach komórka jest rozpięta. Są one rozpinane w dół i na prawo, a więc aby utworzyć komórkę na kilku kolumnach, należy dodać atrybut colspan do komórki wysuniętej najbardziej w lewo, a w przypadku 8 4 Tworzenie stron WWW • Ćwiczenia praktyczne rozpinania komórki na wierszach atrybut rowspan powinien być dodany do komórki pierwszej od góry. Z atrybutem colspan zaznajomiłeś się już przy okazji projektowania tabeli-szablonu strony WWW w dwóch poprzednich ćwiczeniach. Te- raz nie tylko ugruntujesz swoją wiedzę na ten temat, ale też zobaczysz, że bez najmniejszego problemu wewnątrz komórki tabeli można umie- ścić… drugą tabelę! Poniższy przykład uwzględnia większość z tego, czego nauczyłeś się już o tabelach: są tu komórki nagłówka, zwykłe komórki danych (do których zastosowane zostanie wyrównanie) oraz — oczywiście — komórki rozpięte na wierszach i kolumnach. Ć W I C Z E N I E 5.3 Rozpinanie komórek nagłówka i formatowanie komórek z danymi Aby utworzyć tabelę z danymi, zawierającą wszystkie poznane ele- menty: 1. Przeanalizuj kod źródłowy tabeli z listingu 5.3 — jest on zaopatrzony w komentarze, więc powinieneś bez trudu zorientować się, które fragmenty definiują komórki rozpięte i z czego to wynika. Listing 5.3. Rozbudowana tabela !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns= http://www.w3.org/1999/xhtml xml:lang= pl lang= pl head meta http-e im= Content-Type content= text/htmle charset= tf-; / title Gliwickie Bi ro Projektów GLIWPROJ /title /head body style= margin: 0 0 0 0e padding: 0 0 0 0e table style= width: 100 e cellpadding= 3 cellspacing= 0 !-- Wiersz nagłówka strony, rozci gaj cy sie na trzy kol mny tabeli. -- tr td colspan= 3 style= backgro nd-color: bl ee color: whitee NAGŁÓWEK STRONY /td /tr Rozdział 5. • Tabele 8 5 !-- Wiersz treści strony, podzielony na 3 kol mny. -- tr td style= backgro nd-color: #c0c0ffe color: bl ee mertical-align: tope width: 140pxe LEWY PANEL /td td style= mertical-align: tope !-- TUTAJ JEST DRUGA, NIETALEJNA TABELA! -- table style= margin: 0 a to 0 a toe caption Cennik sł g projektowych /caption thead tr th colspan= 2 rowspan= 2 style= backgro nd-color: silmere nbspe /th th colspan= 6 style= backgro nd-color: silmere Ceny br / (w tysi cach PLN) /th /tr tr th style= width: 0.6cme backgro nd-color: silmere A /th th style= width: 0.6cme backgro nd-color: silmere B /th th style= width: 0.6cme backgro nd-color: silmere C /th th style= width: 0.6cme backgro nd-color: silmere D /th th style= width: 0.6cme backgro nd-color: silmere E /th th style= width: 0.6cme backgro nd-color: silmere F /th /tr /thead tbody tr th style= backgro nd-color: silmere font-size: ;pte rowspan= 3 P br / r br / o br / j br / e br / k br / t br / y /th th style= backgro nd-color: silmere architektoniczny /th td style= text-align: centere 5 /td td style= text-align: centere 6 /td td style= text-align: centere 7 /td td style= text-align: centere 7 /td td style= text-align: centere 6 /td td style= text-align: centere 6 /td /tr tr th style= backgro nd-color: silmere instalacyjny /th td style= text-align: centere 6 /td td style= text-align: centere 6 /td td style= text-align: centere 5 /td td style= text-align: centere 5 /td td style= text-align: centere 4 /td td style= text-align: centere 4 /td /tr tr 8 6 Tworzenie stron WWW • Ćwiczenia praktyczne th style= backgro nd-color: silmere architekt ra ogrod /th td style= text-align: centere 7 /td td style= text-align: centere 9 /td td style= text-align: centere 12 /td td style= text-align: centere ndashe /td td style= text-align: centere ndashe /td td style= text-align: centere ndashe /td /tr /tbody /table /td td style= backgro nd-color: #c0c0ffe color: bl ee mertical-align: tope width: 140pxe dim style= text-align: centere padding: 6px 0 2px 0e img src= obrazy/dom.jpg style= width: 130pxe height: 97pxe border: 1px solid bl ee alt= Dom / /dim Dom drewniany — project A /td /tr !-- Wiersz stopki strony, rozci gaj cy sie znów na trzy kol mny tabeli. -- tr td colspan= 3 style= backgro nd-color: bl ee color: whitee STOPKA STRONY /td /tr /table /body /html 2. Przepisz kod i zapisz w pliku o dowolnej, wybranej nazwie. 3. Wyświetl kod w przeglądarce (rysunek 5.3). Aby puste miejsce tabeli (takie jak lewy, górny róg tabeli z rysunku 5.3) zastąpić prawdziwą, lecz pustą komórką, konieczne jest umieszczenie w tej komórce niełamliwej spacji. Odpowiedni kod komórki nagłówka wygląda wówczas następująco: th nbsp; /th . Rozdział 5. • Tabele 8 7 Rysunek 5.3. Oto rozbudowana tabela, w której zastosowano rozpięcie komórek nagłówka i formatowanie komórek z danymi Przed umieszczeniem strony WWW z tabelą na serwerze koniecznie musisz sprawdzić, czy w różnych przeglądarkach prezentuje się ona równie dobrze. Ć W I C Z E N I E 5.4 Testowanie tabeli w przeglądarkach Spróbuj wyświetlić tabelę z ćwiczenia 5.3 w przeglądarkach Mozilla Firefox oraz Internet Explorer (rysunek 5.4). Czy wygląda tak samo? Ewentualne różnice w wyglądzie (często drastyczne) mogą być spowo- dowane błędami w kodzie — w takim przypadku jeszcze raz dokładnie przeglądnij kod w poszukiwaniu braku znaczników zamykających lub niepoprawnej struktury (na przykład znacznika td niezawartego we wnętrzu elementu tr ). 8 8 Tworzenie stron WWW • Ćwiczenia praktyczne Rysunek 5.4. Nasza tabela w oknie przeglądarki Internet Explorer — na poprzednim rysunku tabela jest wyświetlana w przeglądarce Mozilla Firefox
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie II
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ą: