Autor: Maria Sokół

Data wydania: 05/2002

Spis treści:

Wstęp (5)
Rozdział 1. Informacje podstawowe (7)

•

Zacznijmy od A (7)

•

Od historii do teraźniejszości (9)

•

Definicja typu dokumentu - DTD (10)

•

Zapisywanie dokumentów HTML w edytorze i otwieranie w przeglądarce (11)

•

Trochę treningu (13)

•

Najważniejsze informacje (13)

Rozdział 2. Internet, strona WWW i znaczniki HTML (15)

•

World Wide Web i strona WWW (15)

•

Znaczniki (16)

•

Elementy dokumentu HTML (17)

•

Kodowanie polskich znaków (20)

•

Najważniejsze informacje (21)

Rozdział 3. Znaczniki HTML formatujące tekst i nadające strukturę dokumentowi HTML (23)

•

Nagłówki i akapity tekstu (23)

•

Trzy rodzaje list (34)

•

Najważniejsze informacje (40)

Rozdział 4. Podstawy kaskadowych arkuszy stylów (43)

•

Ogólne informacje na temat kaskadowych arkuszy stylów (43)

•

Komentarze CSS (49)

•

Styl wpisany (50)

•

Osadzony arkusz stylów (51)

•

Zewnętrzny arkusz stylów (57)

•

Rozciąganie stylu (59)

•

Wydzielone bloki (62)

•

Przykłady stylów CSS dla tła strony WWW (64)

•

Atrybuty stylu odnoszące się do tekstu (68)

•

Najważniejsze informacje (75)

Rozdział 5. Obrazy w dokumencie HTML (79)

•

Najważniejsze informacje (90)

Rozdział 6. Połączenia (93)

•

Uniform Resource Locator (93)

•

Ulokowanie dokumentu a ścieżka dostępu (94)

•

Definiowanie połączeń (96)

•

Definiowanie połączenia z inną stroną (99)

•

Zakotwiczenia (105)

•

Więcej o obrazach pełniących funkcję połączeń (109)

•

Połączenia z archiwami FTP (115)

•

Najważniejsze informacje (115)

Rozdział 7. Tabele HTML (117)

•

Elementy konstrukcyjne tabeli (132)

•

Najważniejsze informacje (134)

Rozdział 8. Ramki i układy ramek (137)

•

Najważniejsze informacje (149)

Rozdział 9. HTML a XHTML (151)
Dodatek A Znaczniki HTML i ich funkcje (157)
Dodatek B Podstawowe moduły kodu HTML (181)
Dodatek C Atrybuty standardowe (185)
Dodatek D Kolory w HTML (187)

Wstęp

HTML pozwala publikować w Internecie dokumenty zawierające nagłówki, tekst, tabele, listy,
zdjęcia, formularze, pobierać za pośrednictwem „połączeń hipertekstowych” informacje z
Internetu, projektować formularze oraz umieszczać w dokumentach arkusze kalkulacyjne, klipy
wideo oraz inne aplikacje. Niewątpliwie jest to język prezentacji XXI wieku. Nie można się po
prostu bez niego obejść!

Książka poświęcona jest podstawom języka HTML. Jest w niej ABC tworzenia dokumentów
HTML. Obok wyjaśnień podstawowych terminów, znajdziesz tu także praktyczne wprowadzenie
w świat języka HTML. Poszczególne zagadnienia ilustrowane są zestawem prostych przykładów.
Przechodząc od przykładu do przykładu nawet nie zauważysz, kiedy przestałeś być nowicjuszem i
zacząłeś świadomie i z wyczuciem posługiwać się tym narzędziem.

Co będzie Ci potrzebne do pracy? Komputer – to oczywiste, przeglądarka – na przykład Internet
Explorer lub Netscape Navigator (lub inna, najlepiej jednak graficzna, czyli taka, która obsługuje
obrazy) i edytor tekstu – wystarczy nam prosty edytor typu Notepad lub Wordpad, polecam jednak
bezpłatny edytor Webber, który ma tę zaletę, że udostępnia numerację wierszy. Edytor ten
znajdziesz na stronie WWW Radka Sokoła

http://magsoft.com.pl/~rsokol/

Książka napisana została w konwencji pytań i odpowiedzi, a zagadnienia zostały podzielone na 9
rozdziałów.

Rozdział 1. zawiera informacje podstawowe.

Z rozdziału 2. dowiesz się czym jest Internet, strona WWW i znaczniki HTML.

Rozdział 3. poświęcony jest znacznikom HTML formatującym tekst i nadającym strukturę
dokumentowi HTML.

W rozdziale 4. znajdziesz dość obszerne omówienia kaskadowych arkuszy stylów. Specyfikacja
HTML 4.01, a do niej chcemy się dostosować, kładzie wielki nacisk na to, aby niemal wszystko,
co dotyczy stylów, definiowane było za pomocą arkuszy CSS. Z tego względy w książce ani razu
nie pojawił się tak popularny znacznik

<font>

. To prawda, że przyzwyczajenie jest drugą naturą,

więc zacznijmy się przyzwyczajać do stylów CSS, tym bardziej, że ich stosowanie nie jest trudne,
a bardzo ułatwia życie.

Rozdział 5. pokazuje różne sposoby korzystania z obrazów w dokumentach HTML, rozdział 6.
zajmuje się połączeniami, także tymi nietypowymi, na bazie obrazu – ikonami, które można
klikać, i mapami odnośników.

W rozdziale 7. pojawiają się tabele HTML. Tabele to nie tylko sposób prezentacji danych, lecz
także sposób na prezentację dokumentu (choć CSS też tu sięga!).

W rozdziale 8. dominują ramki i układy ramek.

Ważny jest także rozdział 9., który wskazuje różnice między obecnie najbardziej popularną wersją
języka HTML, a nową specyfikacją, XHTML. Warto przeczytać ten rozdział, bowiem stosowanie
się do zasad obowiązujących przy tworzeniu dokumentów XHTML pomoże tworzyć poprawne
dokumenty HTML.

Każdy z rozdziałów zawiera krótkie podsumowanie, w którym zebrane zostały najważniejsze
informacje, warte przypomnienia od czasu do czasu.

Do książki dołączone zostały cztery dodatki. Dodatek A to obszerny zestaw znaczników i ich
atrybutów (wg. specyfikacji HTML 4.01). Znajdziesz w nim także podstawowe zasady korzystania
z tych elementów. Mam nadzieję, że będzie to użyteczna ściągawka.

Dodatek B to podstawowe moduły kodu HTML. Nie musisz więc kartkować całej książki, aby na
przykład dowiedzieć się, jak zapisać kod HTML tabeli!

Dodatek C prezentuje tabele atrybutów standardowych, które mogą być stosowane niemal ze
wszystkimi znacznikami, a w dodatku D znajdziesz tabelkę kodów i nazw podstawowych
kolorów.

Życzę powodzenia w tworzeniu ciekawych dokumentów HTML.

Maria Sokół

Rozdział 1. Informacje
podstawowe

Książka poświęcona jest podstawom języka HTML – HyperText Mark-up Language. Utworzą
one solidny fundament, który pozwoli Ci budować nawet skomplikowane strony WWW. Jeśli
absolutnie nie masz pojęcia o znacznikach i wyrażeniach przez nie tworzonych, tutaj dowiesz się
tego wszystkiego, co w niezbędne.

Zaawansowani twórcy stron WWW także powinni znaleźć w książce swego pomocnika – omawia
ona bowiem poszczególne znaczniki (a pamięć bywa zawodna!) oraz prezentuje szereg
przydatnych przykładów ich zastosowania.

Zacznijmy od A

Co będzie Ci potrzebne?

Komputer – to oczywiste.

Przeglądarka – na przykład Internet Explorer lub Netscape Navigator (lub inna, najlepiej
jednak graficzna, czyli taka, która obsługuje obrazy).

Edytor plików tekstowych – wystarczy nam prosty edytor typu Notepad lub Wordpad,
polecam jednak bezpłatny edytor Webber, który ma tę zaletę, że udostępnia numerację
wierszy (a jak się przekonasz, jest to rzecz niezwykle przydatna) oraz automatycznie
dokonuje konwersji kodów polskich znaków diakrytycznych ze standardu Windows
na standard używany w Internecie. Edytor ten znajdziesz na stronie WWW Radka Sokoła

http://www.magsoft.com.pl/~rsokol/

Brak podłączenia do Internetu, w żaden sposób nie ogranicza Twoich możliwości tworzenia kodu
HTML. Fazy pisania i wstępnego testowania kodu można przeprowadzać bez łączenia się z
Internetem.

Czy HTML to język programowania?

HTML – HyperText Mark-up Language nie jest językiem programowania, takim jak C++ czy
Pascal. A czym jest? Hyper oznacza, że HTML nie jest językiem liniowym. Języki
programowania mają zazwyczaj strukturę liniową – innymi słowy struktura programu określa
kolejność jego wykonania. W przypadku strony WWW użytkownik ma możliwość skorzystania z
dowolnej opcji strony w dowolnym czasie. Drugi człon nazwy, Text, to narzędzie, którym się
posługujesz, a jest nim zwykły (no, może nie całkiem zwykły) tekst. „Niezwykłość” tekstu bierze
się stąd, że umieszczany jest on w specjalnych znacznikach, „< >”, „</>”, i one właśnie są
odpowiedzialne za kolejny człon nazwy: Mark-up. Dzięki znacznikom przeglądarka wie, że ma do
czynienia z kodem strony WWW, a nie ze zwykłym tekstem. Znaczniki nadają specjalne atrybuty i
instruują przeglądarkę jak interpretować wygląd tekstu. Format znacznika jest następujący:

<ZNACZNIK>To jest zawartość</ZNACZNIK>

(jest parę wyjątków, na przykład przy

wstawianiu obrazu niezbędny jest tylko znacznik otwierający).

Ostatnia litera w skrócie HTML to L – od Language, co oznacza „język”. HTML jest bowiem
językiem publikowania w sieci WWW, a co najważniejsze, językiem niezależnym od stosowanej
platformy sprzętowej, czyli rodzaju komputera, z jakiego korzystasz.

Co HTML umożliwia?

HTML pozwala:

Publikować dokumenty zawierające nagłówki, tekst, tabele, listy, zdjęcia,
formularze, itp.

Pobierać za pośrednictwem „połączeń hipertekstowych” informacje z Internetu
(mówiąc w skrócie polega to na klikaniu „połączeń”, co uaktywnia pobieranie
danych).

Projektować formularze pozwalające na korzystanie ze zdalnych usług, takich jak na
przykład wyszukiwanie informacji, dokonywanie rezerwacji oraz zamawianie
produktów.

Umieszczać w dokumentach arkusze kalkulacyjne, klipy wideo oraz inne aplikacje.

Jak HTML działa?

Aby lepiej zrozumieć funkcjonowanie języka HTML, spróbuj potraktować znaczniki HTML jako
przymiotniki. Kolor obiektu, na przykład piłki, można opisać korzystając z takich przymiotników
jak niebieska, czerwona czy żółta. Relację względem innego obiektu można z kolei wyrazić za
pomocą słów takich jak: z lewej, z prawej, w centrum. Podobnie HTML pomaga opisać wygląd
i ulokowanie tekstu, obrazów i innych obiektów na Twojej stronie WWW.

Od historii do teraźniejszości

Kto zaczął i gdzie to zmierza?

Twórcą języka HTML jest Tim Berners-Lee. Język pomyślany jako narzędzie ułatwiające
komunikowanie się naukowców w sieci szybko zyskał ogromną popularność. Przyniósł ją w latach

90-tych szalony rozwój Internetu. Wraz z rozwojem sieci globalnej zmieniał się też sam język. W
1995 roku zatwierdzono specyfikację HTML 2, natomiast specyfikacja HTML 3, także z tego
roku, nie doczekała się rekomendacji. W 1996 roku powstała specyfikacja HTML 3.2, która
uzyskała rekomendację w 1997 roku. W kolejnych specyfikacjach wprowadzano zmiany, których
zadaniem było poprawić przenośność dokumentów HTML między różnymi platformami i
przeglądarkami. Zdano sobie bowiem sprawę, że jedynie pełna kompatybilność zagwarantuje
prawidłowy rozwój Internetu, a jej brak będzie oznaczał lawinę formatów, która utrudni lub wręcz
uniemożliwi powszechne wykorzystanie sieci. Wprowadzane modyfikacje rozszerzały potencjał
języka nie naruszając jego dotychczasowych możliwości. Chodziło o to, aby już utworzone strony
były nadal dostępne.

Inne ważne kwestie, które zadecydowały o kierunku rozwoju to potrzeba umożliwienia
korzystania z informacji sieciowych za pomocą różnych urządzeń, takich jak telefony komórkowe
czy komputerowe urządzenia służące do komunikacji głosowej, oraz uniezależnienia się od
konfiguracji sprzętowej (a więc na przykład od ustawień takich jak rozdzielczość czy głębokość
barw) i parametrów łączy sieciowych.

Wersja 4 (z 1998 r.) rozszerzyła możliwości języka HTML o arkusze stylów, skrypty, ramki i
osadzanie obiektów. Poprawiono obsługę tekstu, rozbudowano opcje tabel i formularzy
wprowadzając ułatwienia dla osób niepełnosprawnych.

W wersji 4.01, wprowadzonej w 1999 roku, poprawiono błędy i wprowadzono drobne zmiany.

Kto dba o standaryzację?

Definiowaniem standardu języka HTML zajmuje się World Wide Web Consortium (W3C).
Konsorcjum W3C utworzone zostało w 1994 roku przez 500 organizacji. Dba ono o rozwój
technologii, wyznacza kierunki rozwoju, tworzy i zatwierdza specyfikacje, udostępnia
oprogramowanie i narzędzia, a wszystko to w celu wyzwolenia pełnych możliwości Internetu jako
forum wymiany informacji i usług oraz centrum komunikacji między ludźmi.

Czy W3C przewiduje opublikowanie kolejnej specyfikacji, HTML 5.0? I tak, i nie. Na początku
2000 roku pojawiła się specyfikacja XHTML 1.0 (eXxtensible Hypertext Mark-up Language) –
oznacza się ją także jako xHTML, Xhtml, XML/HTML lub właśnie jako HTML 5.0. XHTML,
wyznaczony na „oficjalnego” następcę języka HTML 4.0, to hybryda językowa wyrastająca z
języka XML, posiadająca jednocześnie wiele cech wspólnych z językiem HTML.

A co to takiego ten XML?

XML – eXtensible MarkUp Language – to rodzina technologii, służąca do definiowania formatu i
struktury dokumentów. Stanowi ona uproszczoną wersję języka SGML, a dokładniej jego
podzbiór. No tak, z deszczu pod rynnę. Wyjaśnijmy sobie więc najpierw skrót SGML. SGML –
Standard Generalized MarkUp Language, to przemysłowy standard obróbki dokumentów
elektronicznych zgodny z ISO 8879. Jest on nadrzędny zarówno w stosunku do XML, jak i języka
HTML. Oba te języki mają swoje miejsce pod ogromnym parasolem SGML –XML jest aplikacją
SGML, a XHTML aplikacją XML. Za pomocą znaczników oraz deklaracji typu dokumentów
aplikacje te ustalają jednolite formatowanie danych uwzględniające ich specyfikę i zakres
zastosowań. Sam SGML nie zawiera natomiast żadnych instrukcji formatujących.

Dokumenty SGML przechowywane są w plikach tekstowych.

Więcej informacji na temat języka XHTML znajdziesz w rozdziale 9.

Definicja typu dokumentu, DTD

Co to jest DTD?

Definicja typu dokumentu, DTD, to specyfikacja towarzysząca każdemu dokumentowi
stworzonemu w języku SGML (Standard Generalized Markup Language), której zadaniem jest
dostarczenie przeglądarce istotnych informacji o składni dokumentu. Innymi słowy definicje DTD
umożliwiają określenie zasad stosowania znaczników.

DTD zawiera przeważnie definicje nazw i zawartości wszystkich rodzajów elementów, jakie mogą
wystąpić w danym dokumencie. Może także określać wymaganą kolejność elementów oraz zasady
ich zagnieżdżania, dopuszczalne atrybuty wraz z ich domyślnymi wartościami, warunki rezygnacji
ze znaczników końcowych czy nazwy predefiniowanych symboli, do których można się
odwoływać w dokumencie.

Szczególnym przypadkiem DTD jest język HTML. Odbiornikiem definicji jest tutaj przeglądarka
internetowa, którą zaprojektowano pod kątem pobierania i analizy dokumentów tekstowych
sformatowanych przy pomocy znaczników i zasad określonych w specyfikacji HTML.

Definicja typu dokumentu może znajdować się w pliku dokumentu lub w pliku zewnętrznym,
wskazanym przez adres URL. Takie zewnętrzne pliki DTD mogą być używane przez różne
dokumenty i różne strony WWW.

Oto przykład odwołania do definicji typu dokumentu umieszczonego w obrębie dokumentu
HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

...

</head>

<body>

...

</body>

</html>

Zapisywanie dokumentów HTML w edytorze
i otwieranie w przeglądarce

Jakie edytory?

Zanim przystąpimy do tworzenia kodu HTML na serio, kilka uwag na temat korzystania z
edytorów, w których kod HTML będzie wprowadzany. Pamiętaj, że dokument HTML jest
dokumentem tekstowym. Zapisując go, musisz wziąć to pod uwagę.

Nazwa dokumentu składa się z dwóch członów –

nazwa.rozszerzenie

. Zdefiniuj więc

dowolną nazwę i dodaj do niej rozszerzenie. W przypadku dokumentów HTML rozszerzenie ma
postać

.htm

lub

.html

(bardziej pewne jest to właśnie).

Zapisując dokument w edytorach takich jak NotePad czy WordPad, w których format tekstowy
jest jedynym formatem, musisz rozszerzenie wpisać ręcznie. W edytorze Webber format HTML
jest formatem domyślnym, nie musisz więc pamiętać o rozszerzeniu.

Jeśli chcesz korzystać z edytora Word, możesz, lecz musisz pamiętać, by w oknie dialogowym

Zapisz jako (Save As)

wybierać z listy

Zapisz jako Typ (Save As Type)

typ

(*.html)

(patrz rysunek 1.1). Jeśli pozostawisz format domyślny (

*.doc

), Word zapisze

znacznie więcej, niż sam tekst na stronie. Zapisze też ustawienia marginesów, tabulatorów,
czcionki i całą masę innych ustawień formatowania potrzebnych do poprawnego wyświetlenia
strony, lecz absolutnie niepotrzebnych w kodzie HTML. Na wszelki wypadek nie przyzwyczajaj
się zbytnio do edytora Word jako narzędzia tworzenia stron WWW – każda rzecz wymaga
odpowiednich narzędzi.

Rys. 1.1.

Zapisywanie
dokumentu
HTML w
Notatniku –
tutaj musisz
ręcznie
wpisać
rozszerzenie
nazwy .html,
Webberze –
domyślnie
edytor
przyjmuje
rozszerzenie
.html, i w
edytorze
Word – w
tym
przypadku

format pliku
trzeba
wybrać z
listy
rozwijanej
Zapisz jako
typ

Jak wyświetlić w przeglądarce plik html zapisany na dysku twardym?

Dokument HTML zapisany na dysku twardym lub na dyskietce można otworzyć w przeglądarce.
Operacja jest bardzo prosta. Wybierz w menu

File

pozycję

Open

, a następnie kliknij przycisk

Browse

lub

Open File

i odszukaj żądany dokument (patrz rysunek 1.2), a następnie naciśnij

OK, by pojawił się w oknie przeglądarki.

Rys. 1.2.

Otwieranie
dokumentu
HTML w
przeglądarce
– tutaj jest to
przeglądarka
Internet
Explorer

Trochę treningu

Żeby oswoić się z językiem HTML, przyglądnij się postaciom źródłowym stron WWW
dostępnych w Internecie.

Jak wyświetlić postać źródłową strony WWW?

Jak już wiesz, w swojej postaci źródłowej, strona WWW to po prostu plik tekstowy, do którego
nazwy dołączone jest przedłużenie .html. Jeśli wyświetlisz taki plik w jakimś edytorze tekstu,
zobaczysz tekst wymieszany ze specyficznymi znakami – są to znaczniki HTML. Być może
będziesz zaskoczony, że piękne strony WWW, z obrazkami i animacjami, wyglądają tak
nieciekawie. Aby pojawiły się w całej krasie, ich kod źródłowy musi zostać „odczytany” przez
przeglądarkę – ot i cała tajemnica.

Wyświetl kolejno kilka stron WWW w oknie przeglądarki, a najlepiej wyświetl strony w osobnych
oknach. Jeśli korzystasz z przeglądarki Netscape Navigator, wybierz w menu View pozycję Page
source (użytkownicy programu Internet Explorer powinni wybrać pozycję Source w menu
View) (patrz rysunek 1.3).

Rys. 1.3.

Strona WWW i jej
postać źródłowa

Przyglądnij się postaciom źródłowym stron zwracając uwagę na powtarzające się elementy.
Podglądanie gotowych dokumentów HTML to doskonała metoda nauki języka.

Najważniejsze informacje

HTML to język hipertekstowego znakowania (Hypertext Markup Language),
który stanowi ustanowioną przez konsorcjum World Wide Web Consortium
(W3C) specyfikację nakreślającą postać dokumentów prezentowanych w
Internecie. Twórcy przeglądarek sieciowych sprawdzają za pośrednictwem
języka HTML jak ich produkty będą wyświetlać strony WWW na ekranie
Twojego komputera. Twórcą języka HTML jest Tim Berners-Lee.

HTML pozwala publikować w Internecie dokumenty zawierające nagłówki,
tekst, tabele, listy, zdjęcia, formularze, itd., pobierać za pośrednictwem
„połączeń hipertekstowych” informacje z Internetu, projektować formularze oraz
umieszczać w dokumentach arkusze kalkulacyjne, klipy wideo oraz inne
aplikacje.

Dokument HTML jest dokumentem tekstowym. Jego nazwa składa się z dwóch
członów –

nazwa.rozszerzenie.

W przypadku dokumentów HTML

rozszerzenie ma postać

.htm

lub

.html

(bardziej pewne jest to właśnie).

Dokumenty html można tworzyć przy użyciu najprostszych edytorów
tekstowych, takich jak

Notatnik

czy

Webber

Rozdział 2.
Internet, strona WWW i
znaczniki HTML

World Wide Web i strona WWW

Co to jest World Wide Web?

World Wide Web (w skrócie WWW) to sieć komputerów nazywana popularnie Internetem.
Tworzą ją komputery z całego świata. Komputery te porozumiewają się ze sobą za pośrednictwem
protokołu HTTP.

Jak to działa?

Wszelkie informacje umieszczone w sieci zapisane są w dokumentach zwanymi stronami WWW.
Strona WWW to dokument utworzony za pomocą języka HTML. Gotowe strony WWW
zapisywane są na specyficznym komputerze, który nazywamy serwerem. Serwer to właściwie
program, ale przyjęło się nazywać tym mianem także komputer, na którym go zainstalowano.
Serwer jest odpowiedzialny za realizację żądania przesłania dokumentów do tego komputera,
który wystąpił z takim żądaniem. Jest także konieczny do opublikowania dokumentów w
Internecie. Internet z kolei stanowi sieć komputerów połączonych ze sobą. Oczywiście nie
fizycznie. Komputery mogą jednak komunikować się ze sobą i przesyłać sobie dane, czyli
informacje. Strony WWW stanowią jedno ze źródeł informacji.

Co musisz zrobić, żeby przeglądać strony WWW?

Aby przeglądać strony WWW, konieczne jest nawiązanie połączenia z Internetem – za
pośrednictwem modemu lub łącza stałego – i uruchomienie specjalnego programu, który nazywa
się przeglądarką – najpopularniejsze przeglądarki to Netscape Navigator i Internet Explorer.
Przeglądarkę należy poinformować, gdzie ma szukać danych. Informacja ta zawarta jest w adresie
URL.

Co to jest adres URL?

URL – to skrót od Uniform Resource Locator, co można przetłumaczyć jako „uniwersalny
identyfikator zasobów”. Jego postać jest mniej więcej taka:

http://www.dobrastrona.com/

Adres ten wpisujesz najczęściej w polu adresu przeglądarki (patrz rysunek 2.1). Przeglądarka
wysyła wiadomość do komputera, którego adres podałeś (serwera), zawierającą żądanie strony.
Serwer pobiera odpowiednie dane i przekazuje je występującemu o nie komputerowi.

Rys. 2.1.

Pole adresu przeglądarki –
tu wpisujesz adres URL
strony, której zawartość
chcesz wyświetlić w
przeglądarce

Co przeglądarka zrobi z danymi, które otrzyma od serwera?

Dane, które trafiły do Twojej przeglądarki, są zakodowane w specjalny sposób – są zapisane w
języku HTML. Przeglądarce to nie przeszkadza – potrafi ona interpretować ten kod, więc
wyświetla pobraną stronę na Twoim ekranie. Język HTML informuje przeglądarkę jak ma
obsłużyć pobrane dane.

Tak więc sam widzisz, jak ważny jest język HTML. Dotrzemy teraz do jego istoty – zajmiemy się
znacznikami HTML.

Znaczniki

Jeśli wyświetlisz kod źródłowy strony WWW, zobaczysz, że zawiera on szereg poleceń języka
HTML umieszczonych w nawiasach kątowych. Twory te noszą nazwę znaczników.

Jak wyglądają znaczniki?

Znaczniki stosowane są zazwyczaj w parach (zwróć uwagę na ukośnik, /, który odróżnia znacznik
zamykający od otwierającego):
<znacznik otwierający>, </znacznik zamykający>, np.

, ale

są wyjątki. Oto niektóre z nich:

<p>

– znacznik akapitu (w zasadzie istnieje znacznik zamykający, </p>, ale

pominięcie go nie spowoduje błędu w działaniu strony; stosuj ten znacznik, aby
rozpocząć nowy akapit),

<br>

– znacznik nowego wiersza

<hr>

– znacznik umożliwiający dodanie na stronie linii poziomej.

Parę znaczników (lub znacznik pojedynczy, jeśli nie ma on znacznika zamykającego) nazywa się
także elementem. Element pozbawiony znacznika zamykającego nazywa się pustym. Może on
zawierać jedynie atrybuty.

Jaka jest funkcja znaczników?

Znaczniki informują przeglądarkę, jak wyświetlić stronę na ekranie.

Wielkie czy małe litery w znacznikach?

Znaczniki nie są wrażliwe na wielkość liter. Oznacza to, że <body> to to samo co <BODY>.
Warto jednak zacząć przyzwyczajać się do małych liter. Są one zalecane w rekomendacji W3C
specyfikacji HTML 4, a w specyfikacji XHTML są wymagane.

Co to są atrybuty znaczników i jaka jest ich funkcja?

Atrybuty znaczników dostarczają dodatkowych informacji o elementach strony definiowanych
poprzez znaczniki. Jeśli na przykład chciałbyś, aby Twoja strona miała tło w kolorze zielonym,
wystarczy, że poinformujesz o tym przeglądarkę dodając do znacznika

<body>

odpowiedni

atrybut:

. Atrybut definiowany jest za pomocą pary:

atrybut=”wartość”

i umieszczany zawsze w znaczniku otwierającym danego elementu HTML.

Wartości należy podawać w cudzysłowie – pojedynczym,

‘ ’

, lub podwójnym,

” ”

Elementy dokumentu html

Pewne znaczniki pełnią szczególne funkcje. Tworzą bowiem podstawowy szkielet dokumentu
html.

Jaka jest ta podstawowa postać kodu HTML dokumentu html?

Otwórz Notatnik lub edytor Webber i wpisz w nim następujący tekst (Wydruk 2.1) – jest to
podstawowy, najprostszy szkielet dokumentu html:

Wydruk 2.1. Podstawowy szkielet dokumentu html

<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
To jest moja pierwsza strona WWW.
</body>
</html>

Zapisz plik pod nazwą

mojastrona.html

, uruchom przeglądarkę i otwórz w niej swój plik

(wybierz w menu

File

lub

Plik

– w zależności od wersji językowej – pozycję

Open

Open File

lub

Otwórz

). W przeglądarce wyświetlone zostanie tylko zdanie

To jest moja pierwsza

strona WWW.

Reszta tekstu nie pojawi się – to kod dla przeglądarki informujący ją, co ma z

dokumentem zrobić (patrz rysunek 2.2).

Rys. 2.2.

Zapisz dokument
HTML i otwórz go w
przeglądarce – oto
Twoja pierwsza strona
WWW

Jakie znaczenie mają poszczególne wyrażenia kodu z wydruku 2.1?

Pierwszym znacznikiem w Twoim dokumencie HTML jest znacznik

<html>

. Informuje on

przeglądarkę, że jest to początek dokumentu HTML. Ostatnim znacznikiem kodu jest znacznik

</html>

– jak już wiesz, jest to znacznik zamykający i informuje on przeglądarkę, że na nim

kończy się dokument HTML.

Znaczniki

<html>

</html>

informują, że wszystko, co znajduje się między nimi stanowi

dokument HTML. Nową stronę będziesz zawsze rozpoczynał od znacznika

<html>

i kończył ją

znacznikiem

</html>

Znaczniki

<head>

</head>

wyznaczają element strony, który nosi nazwę nagłówka.

Zawartość nagłówka nie jest wyświetlana na stronie WWW. Zwróć jednak uwagę na pasek tytułu
okna przeglądarki, w którym wyświetliłeś swoją pierwszą stronę WWW. Tekst, który wpisałeś
między znacznikami

, pojawia się na pasku tytułu tego okna. Strona może

mieć tylko jeden tytuł, a ten z kolei może zawierać tylko tekst – żadne inne znaczniki nie są tu
dozwolone. Tytuł nie może być zbyt długi, bo nie zmieści się na pasku tytułu, ale nie przesadź też

w odwrotną stronę, aby dać szansę przypadkowym czytelnikom zorientować się jaka jest tematyka
strony.

Pierwszym elementem strony jest nagłówek. Jego ramy wyznacza para <head>, </head>. Między
tymi znacznikami umieszczany jest kod definiujący tytuł strony. W żadnym wypadku nie należy tu
umieszczać treści strony!

Strona WWW ma oczywiście swoją zawartość. W przykładzie umieściliśmy ją między
znacznikami

<body>, </body>

. One właśnie wyznaczają drugi element strony WWW – obszar

treści.

Para

<body>

</body>

wyznacza podstawową część strony – tu twórca strony WWW umieszcza

wszystko: treść, obrazy, połączenia, itd.

Elementy strony WWW często nazywa się od angielskich nazw znaczników sekcją head i sekcją
body. Potrafisz już je zdefiniować, potrafisz wyświetlić na ekranie przeglądarki tekst. Pora, abyś
poznał nowe znaczniki i nauczył się kontrolować wygląd wyświetlanego na ekranie tekstu oraz
nadawać mu określoną strukturę.

Co to jest element meta?

Element

head

zawiera ogólne informacje na temat dokumentu. Umieszczane są one między

innymi w znaczniku

<meta>

. Najczęściej są to informacje przydatne przeglądarkom lub słowa

kluczowe wykorzystywane przez serwisy wyszukujące (coraz rzadziej jednak). W znaczniku

<meta>

można na przykład umieścić adres

url

, pod który przeglądarka ma się skierować, aby

wyświetlić nową wersję strony WWW, lub opis dokumentu.

Do czego służą atrybuty znacznika <meta>?

Niektóre serwisy wyszukujące korzystają z atrybutów znacznika

<meta>

przy indeksowaniu

dokumentów.

Atrybuty opisują dokument i dostarczają słów kluczowych. I tak atrybut

name

określa sposób

opisu dokumentu dostarczony w atrybucie

content

Oto przykład elementu

meta

, który definiuje opis strony (

name="description"

Oto przykład elementu

meta

, który zawiera słowa kluczowe, charakteryzujące zawartość strony

WWW (

name="keywords"

VBScript">

Oto przykład dokumentu html, w którym za pomocą elementu meta umieszczono informacje o
autorze strony, dacie ostatniej modyfikacji dokumentu oraz o stosowanym oprogramowaniu (patrz
wydruk 2.2).

Wydruk 2.2. Atrybuty znacznika <meta>

<html>

<head>

<meta name="author"

content="Jan Kowalski">

content="Jan Kowalski,6/10/02">

content="Microsoft FrontPage 4.0">

</head>

<body>

<p>

Atrybuty meta podają w tym dokumencie dane autora, datę wprowadzenia
poprawek oraz typ stosowanego oprogramowania.

</p>

</body>

</html>

Jak wykorzystać element meta, aby skierować użytkownika pod inny adres url?

Element

meta

będzie bardzo przydatny, jeśli zmienił się adres

url

, pod którym można było

oglądać Twoją stronę WWW. Na wydruku 2.3 znajdziesz kod html, który pozwoli poinformować
użytkownika, gdzie powinien Cię teraz szukać, a nawet sam skieruje go we właściwe miejsce.

Wydruk 2.3. Kierowanie użytkownika pod nowy adres url

<html>

<head>

content="5;url=http://www.adres.com">

</head>

<body>

<p>

Przepraszam! Już mnie tu nie ma! Nowy URL jest: <a
href="http://www.adres.com">http://www.adres.com</a>

</p>

<p>

Za kilka sekund zostaniesz skierowany pod nowy adres.

</p>

<p>

Jeśli komunikat wyświetlany jest dłużej, niż 5 sekund, kliknij to
połączenie!

</p>

</body>

</html>

Kodowanie polskich znaków

Jak wykorzystać znacznik <meta>, aby zdefiniować stronę kodową?

Poprawne zdefiniowanie kodowania znaków jest w dokumencie HTML bardzo pożądane. Zaleca
się aby polskie strony były kodowane w ISO-8859-2, bo tylko wtedy będą poprawnie
wyświetlane. Korzystając z edytora Webber nie musisz się martwić o poprawność kodowania
samych liter – to jego zmartwienie - musisz jednak pamiętać o wstawieniu odpowiedniego
nagłówka

<meta>

Aby zapewnić czytelność dokumentu HTML, możesz:

Zrezygnować ze stosowania polskich znaków diakrytycznych – takie rozwiązanie posiada
wiele zalet: niezależnie od systemu zawsze widać znaki – może słowa nie są poprawne
ortograficznie, ale względnie czytelne. Wyrazy nie są podzielone dziwnymi znakami.
Zdarza się że potencjalni czytelnicy nie posiadają przeglądarki czytającej po polsku.
Większość przeglądarek ma polską stronę kodową – większość w Polce, na pewno tak,
ale niekoniecznie tak będzie gdzieś w świecie. Dlatego też kodowanie bez polskich
znaków jest pewnym rozwiązaniem i nie wymaga żadnych specjalnych zabiegów.

Korzystać z kodowania Windows-1250 – kodowanie Windows zapewnia poprawne
oglądanie strony użytkownikom systemu Windows, ale są przecież inne systemy i inni
użytkownicy. Niewątpliwie zaletą tego sposobu jest to, że użytkownicy polskiej wersji
systemu Windows mogą bez żadnych problemów pisać kod swoich stron korzystając z
Notatnika. Gdy z jakich powodów zechcesz zdefiniować w dokumencie HTML stronę
kodową Windows-1250, wpisz odpowiednią informację

meta

<meta http-

equiv="content-type" content="text/html; charset=windows-1250">

Takie rozwiązanie należy jednak odradzać.

Zdefiniować stronę kodową ISO-8859-2 – aby zdefiniować w dokumencie HTML tę
stronę kodową, wpisz w elemencie

meta

Wymaga to korzystania z edytora, który potrafi prawidłowo kodować polskie litery –
takim edytorem jest Webber (

http://www.magsoft.com.pl/~rsokol/

). To rozwiązanie

gorąco polecam.

Najważniejsze informacje

World Wide Web (w skrócie WWW) to sieć komputerów nazywana popularnie
Internetem.

Informacje dostępne są w Internecie w postaci dokumentów HTML zwanych stronami
WWW.

Strony WWW umieszczane są na specyficznych komputerach zwanych serwerami.

URL – to skrót od Uniform Resource Locator, co można przetłumaczyć jako
„uniwersalny identyfikator zasobów”. Jego postać jest mniej więcej taka:

http://www.dobrastrona.com/

. Adres ten określa ulokowanie strony WWW i jest

podawany w polu adresu przeglądarki.

Dane, które trafiły do Twojej przeglądarki, są zakodowane w specjalny sposób – są
zapisane w języku HTML. Język HTML informuje przeglądarkę jak ma obsłużyć
pobrane dane – informacje te są zawarte w znacznikach .

Znaczniki to polecenia języka HTML umieszczone w nawiasach kątowych. Ich postać
jest następująca: <znacznik otwierający>, </znacznik zamykający>.

Znaczniki nie są wrażliwe na wielkość liter.

Dokument HTML otwiera znacznik

<html>

, a zamyka znacznik

</html>

. Elementy

strony umieszczane są między tymi znacznikami.

Podstawowe elementy strony WWW to obszar nagłówka i obszar treści (sekcja head i
sekcją body).

Obszar nagłówka wyznaczają znaczniki

<head>

</head>.

Zawartość strony WWW – tekst obrazy, połączenia, itp. – jest umieszczana między
znacznikami

. One właśnie wyznaczają drugi element strony WWW

– obszar treści.

Element

head

zawiera ogólne informacje na temat dokumentu. Umieszczane są one

między innymi w znaczniku

<meta>

. Najczęściej są to informacje przydatne

przeglądarkom lub słowa kluczowe wykorzystywane przez serwisy wyszukujące. W
znaczniku

<meta>

można na przykład umieścić adres

url

, pod który przeglądarka ma

się skierować, aby wyświetlić nową wersję strony WWW, lub opis dokumentu. Można
także umieścić nowy adres url, pod który użytkownik zostanie automatycznie skierowany
po określonym czasie.

Stronę kodową ISO-8859-2 (polskie litery!) definiuje się w elemencie

meta

Rozdział 3.
Znaczniki HTML formatujące
tekst i nadające strukturę
dokumentowi HTML

Nagłówki i akapity tekstu

Co to są nagłówki i jak wyglądają ich znaczniki HTML?

Nagłówki, tak jak w dokumencie edytora Word, dzielą tekst na części, a dzięki temu, że nadają
tekstowi rzucający się w oczy wygląd, zwracają na ten podział uwagę czytelnika. Wszyscy
użytkownicy edytora Word wiedzą, o co chodzi – musimy jedynie nauczyć się korzystać z innego
narzędzia. Aby przekształcić fragment tekstu w nagłówek, wystarczy zawrzeć go między
znacznikami nagłówka, tak jak w tym przykładzie:

<h1> To jest nagłówek pierwszego poziomu </h1>

Znaczniki nagłówka powiększają tekst i dodają do niego pogrubienie. Masz do dyspozycji sześć
rozmiarów nagłówka – pokazane są one na rysunku 3.1. Polecałabym korzystanie nagłówków
drugiego poziomu,

. Jeśli chcesz, aby nagłówek był nieco mniejszy, użyj pary

<h3>

</h3>

. Nagłówki naprawdę ogromne uzyskasz stosując

, ale większość projektantów

stron ich unika ze względu na dysproporcję wielkości w stosunku do zwykłego tekstu. Nagłówki

<h4>

<h5>

<h6>

także są rzadko wykorzystywane, ponieważ ich rozmiar jest bliski rozmiarowi

tekstu, a w przypadku nagłówka

<h6>

nawet mniejszy (patrz rysunek 3.1).

Rys. 3.1.

Sześć poziomów nagłówka i
zwykły tekst

Jak zdefiniować nagłówki w kodzie HTML?

W rozdziale 2 nauczyłeś się definiować podstawowy szkielet strony WWW. Skorzystamy teraz z
niego i będziemy go rozbudowywać o nowe elementy. Wczytaj do edytora tekstu (

Notatnika

lub

Webbera

) plik HTML zawierający ten podstawowy kod. Zmień dowolnie tytuł strony (jak

pamiętasz, tytuł zawarty jest między znacznikami

Aby zdefiniować nagłówek, wstaw między znacznikami <body> </body> parę znaczników
nagłówka, na przykład

, a między nimi wpisz tekst nagłówka (patrz wydruk 3.1).

Zapisz plik i wyświetl stronę w przeglądarce. Ponieważ rozbudowywana teraz strona będzie już
zapisywana pod tą samą nazwą (zapisując szkielet strony WWW zdefiniowaliśmy nazwę
mojastrona.html – patrz rozdział 2), możesz nacisnąć w oknie przeglądarki przycisk

Odśwież

lub

Reload

, aby ukazała się uaktualniona wersja strony (patrz rysunek 3.2).

Wydruk 3.1. Definiujemy nagłówek

<html>

<head>

<title>Zwierzaki</title>

</head>

<body>

</body>

</html>

Rys. 3.2.

W oknie
przeglądarki
pojawiły się
zdefiniowane
przed chwilą
nagłówki

Jak wycentrować nagłówek?

Nagłówek jest wyrównany do lewego marginesu – oznacza to, że jest dosunięty do lewej krawędzi
strony. Wynika to z domyślnych ustawień przeglądarki. Możesz go umieścić na środku strony –
nazywa się to wyśrodkowaniem, zagnieżdżając znaczniki nagłówka w obrębie znacznika

<center><h2>Twój nagłówek</h2></center>

lub dodając w znaczniku nagłówka atrybut

align=”center”

<h2 align=”center”>Twój nagłówek</h2>

Jak dodać tekst?

Strona ma już tytuł i nagłówek, wprowadźmy więc jej zawartość tekstową. W wersji HTML 4
akapit jest definiowany za pomocą pary znaczników

. Jak już wspominałam, brak

znacznika zamykającego nie spowoduje katastrofy, ale tutaj będziemy go stosować (tym bardziej,
że w specyfikacji XHTML wymagania są znacznie ostrzejsze).

Otwórz plik strony w oknie edytora. Przygotuj treść strony i wpisz tekst między znacznikami

<p>

</p>

, w obrębie elementu

body

. Wydruk 3.2 pomoże Ci zorientować się o co chodzi. Zapisz

stronę i zobacz jak się prezentuje w przeglądarce (patrz rysunek 3.3).

Wydruk 3.2. Akapity tekstu

<html>

<head>

<title>Zwierzaki</title>

</head>

<body>

<p>Lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi kotami.
Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych
(Felidae). Do tej rodziny należą też małe koty: puma, ryś, ocelot,
serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce
są większe od samic. Wszystkie mruczą, gdy sa zadowolone. Rozzłoszczone -
powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p>

<p>Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota

nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego
(Felis silvestris ornata). Do dziś nie wiadomo dokładnie kiedy i jak kot
stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około
5000 lat temu. Miało to miejsce w dolinie Nilu.</p>

</body>

</html>

Rys. 3.3.

Strona
została
zaopatrzona
w
wycentrowa
ne nagłówki
oraz w tekst

Jak zwiększyć odstęp między akapitami lub wprowadzić odstęp w samym
akapicie?

Pamiętaj, że efekt wizualny jaki wywrze Twoja strona, zależy w dużym stopniu od ustawień na
komputerach czytelników. Niektórzy mają duże monitory, inni małe, parametry kart grafiki różnią
się, różne są w związku z tym ustawienia. Tekst będzie też przeformatowywany przy każdej
zmianie rozmiarów okna przeglądarki. Twórcy strony WWW zależy na tym, aby tak sformatować
zawartość strony, żeby zniosła bezpiecznie te pułapki. Nigdy jednak nie próbuj formatować tekstu
w edytorze dodając puste wiersze lub spacje (od tej zasady jest pewien wyjątek – omawiam go w
następnym punkcie). To nie ma sensu. Dodatkowe spacje zostaną i tak potraktowane jako jeden
odstęp. Nie wstawiaj też pustych akapitów, a więc par:

<p></p>

, które nie zawierają żadnego

tekstu.

W takim razie jak sobie poradzić, gdy wprowadzany automatycznie przed i za nagłówkami oraz
akapitami wolny obszar nie wystarcza? Zastosuj znacznik

<br>

. Ten znacznik, o czym powinieneś

pamiętać, nie ma znacznika zamykającego. Znacznik pozbawiony znacznika zamykającego nosi
miano pustego.

Wydruk 3.3 pokazuje, w jaki sposób można dodać wolny obszar w samym akapicie. Efekt tej
operacji przedstawiono na rysunku 3.4.

Wydruk 3.3. Dodatkowy wolny obszar – znacznik <br>

<html>

<head>

<title>Zwierzaki</title>

</head>

<body>

<p>Lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi
kotami.<br><br> Należą do gromady ssaków, rzędu drapieżnych, rodziny
kotowatych (Felidae). Do tej rodziny należą też małe koty: puma, ryś,

ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt.
Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone.
Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią
ryczeć.</p>

<p>Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota
nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego
(Felis silvestris ornata). <br><br>Do dziś nie wiadomo dokładnie kiedy i
jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się
okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.</p>

</body>

</html>

Rys. 3.4.

Do akapitu
wprowadzon
o dodatkowe
wolne
obszary

Jak zachować odstępy i łamania wierszy w tekście?

A jeśli mimo wszystko chcesz zachować wprowadzone do tekstu liczne spacje i łamania wierszy?
Czy jest taka możliwość? Tak. Daje ją znacznik

<pre>

. Jest to doskonałe narzędzie do prezentacji

dokumentów, które z natury swojej mają określoną strukturę, jak na przykład programy
komputerowe.

Wydruk 3.5 pokazuje sposób użycia elementu

pre

– zwróć uwagę, że umieszczone w kodzie

odstępy są zachowane na wyświetlanej w przeglądarce stronie (patrz rysunek 3.5).

Wydruk 3.4. Tekst preformatowany

<html>

<body>

<pre>

To jest tekst

preformatowany.

Zachowuje on zarówno odstępy

jak i łamania wierszy.

</pre>

<p>Znacznik pre jest doskonały do

prezentacji kodu programu:</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

Rys. 3.5.

Element pre
pozwala na
zachowanie
dodatkowych
odstępów –
porównaj wygląd
wydruku i strony

Jak sformatować tekst?

Jeśli przyglądniesz się stronie z rysunku 3.4, zauważysz, że aż się prosi wyróżnić pewne
fragmenty tekstu – na przykład nazwy łacińskie napisać kursywą, a nazwy polskie czcionką
pogrubioną. Innymi słowy konieczne jest zastosowanie formatowania.

Formatowanie pozwala między innymi wprowadzić tekst pisany czcionką pogrubioną, kursywą
oraz indeksy górne. W specyfikacji HTML 4 zalecane jest co prawda korzystanie przy
formatowaniu z arkuszy stylu (poznasz je w rozdziale 4., Kaskadowe arkusze stylów), lecz w
przypadku prostego formatowania można korzystać także ze znaczników stylów z wcześniejszych
wersji języka HTML. Tabela 3.1 prezentuje listę takich znaczników wraz z opisem i przykładami.

Tabela 3.1. Style fizyczne i logiczne znaków

Znacznik

Opis

Przykład zastosowania

Style fizyczne

<b>

Pogrubienie

<p><b>Ten tekst jest pisany czcionką
pogrubioną</b></p>

<i>

Kursywa

<p><i>Ten tekst jest pisany kursywą</i><p>

<tt>

Czcionka maszynowa
(znaki o jednakowej
szerokości)

<p>Wpisz <tt>copy nazwa_pliku lpt:</tt>, aby
wydrukować plik</p>

<big>

Czcionka większa od
reszty tekstu

<p>Moje oczy zrobiły się
<big>WIELKIE</big></p>

<small>

Czcionka mniejsza od
reszty tekstu

<p>Krasnoludki są tak
<small>malutkie</small>, że ich nie widać</p>

<sub>

Indeks dolny

H<sub>2</sub>O

<sup>

Indeks górny

<sup>31</sup>P

Style logiczne

<em>

Emfaza, wyróżnienie
tekstu (zazwyczaj
kursywa)

<p>Lubię Cię <em>bardzo.</em></p>

Wyraźne wyróżnienie
(zazwyczaj
pogrubienie)

<p>Lubię Cię <strong>ogromnie.</strong></p>

<code>

Wskazuje, że fragment
tekstu to kod
programu, który ma
być wyświetlony
czcionką o stałej
szerokości

<samp>

Wskazuje, że jest to
tekst przykładowy
(podobnie jak
<code>)

<p>Adres URL:
<samp>http://www.microsoft.com.pl</samp></p>

<kbd>

Oznacza tekst, który
ma być wpisany z
klawiatury

<p>Podaj komendę: <kbd>find . -name ”prune” -
print</kbd></p>

<var>

Wskazuje nazwę
zmiennej

<code>chown </code><var>twoje_imie
nazwa_pliku</var></p>

<dfn>

Znacznik definicji

<p>Podane w tabeli znaczniki definiują
<dfn>style znaków</dfn>.</p>

<cite>

Stosowany w
przypadku krótkich
cytatów lub
odnośników
literaturowych

<p>Kto to powiedział, że <cite>milczenie jest
złotem</cite>?</p>

Na wydruku 3.5 możesz zobaczyć przykłady z tabeli bezpośrednio w kodzie HTML, a na rysunku
3.6 efekt działania poszczególnych sposobów formatowania.

Wydruk 3.5. Formatowanie tekstu

<html>

<head>

</head>

<body>

<h3>Style fizyczne</h3>

<p>Czcionka pogrubiona: <br><b>Ten tekst jest pisany czcionką
pogrubioną</b></p>

<p>Kursywa:<br><i>Ten tekst jest pisany kursywą</i><p>

<p>Czcionka maszynowa:<br>Wpisz <tt>copy nazwa_pliku lpt:</tt>, aby
wydrukować plik</p>

<p>Czcionka powiększona:<br>Moje oczy zrobiły się <big>wielkie</big></p>

<p>Czcionka pomniejszona:<br>Krasnoludki są tak <small>malutkie</small>,
że ich nie widać</p>

<p>Indeks dolny:<br>H<sub>2</sub>O</p>

<p>Indeks górny:<br><sup>31</sup>P</p>

<h3>Style logiczne</h3>

<p>Emfaza:<br>Lubię Cię <em>bardzo.</em></p>

<p>Wyraźne wyróżnienie:<br>Lubię Cię <strong>ogromnie.</strong></p>

<p>Kod programu:<br><code>For a=1 to 100 </code></p>

<p>Tekst przykładowy:<br>Adres URL:
<samp>http://www.microsoft.com.pl</samp></p>

<p>Tekst z klawiatury:<br>Podaj komendę: <kbd>find . -name ”prune” -
print</kbd></p>

<p>Zmienna:<br><code>chown </code><var>twoje_imie nazwa_pliku</var></p>

<p>Definicja:<br>Podane w tabeli znaczniki definiują <def>style
znaków</def>.</p>

<p>Cytat:<br>Kto to powiedział, że <cite>milczenie jest
złotem</cite>?</p>

</body>

</html>

Rys. 3.6.

Oto efekt
działania
znaczników
formatowani
a z tabeli 3.1

Otwórzmy więc ponownie nasz przykładowy plik HTML w edytorze i korzystając z pomocy
wyrażeń HTM z tabeli 3.1 sformatujmy odpowiednie fragmenty tekstu (patrz wydruk 3.6). Po
wpisaniu dodatkowych elementów kodu, plik trzeba zapisać, aby można zobaczyć zmiany w
przeglądarce (wyświetlimy aktualną postać strony klikając przycisk

Odśwież

lub Reload).

Jak widać na rysunku 3.7 tekst strony jest teraz łatwiejszy w odbiorze. Pamiętaj jednak, aby nie
przesadzić z formatowaniem, bowiem efekt może być wówczas odwrotny od zamierzonego.

Wydruk 3.6. Formatowanie tekstu

<html>

<head>

<title>Zwierzaki</title>

</head>

<body>

<p><b>Lwa</b>, <b>tygrysa</b>, <b>panterę</b>, <b>geparda</b> i
<b>jaguara</b> nazywamy <big>wielkimi kotami</big>.<br><br> Należą do
gromady ssaków, rzędu drapieżnych, rodziny kotowatych (<i>Felidae</i>).
Do tej rodziny należą też małe koty: <b>puma</b>, <b>ryś</b>,
<b>ocelot</b>, <b>serwal</b>. W sumie rodzina kotowatych obejmuje 40
gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są
zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty
potrafią ryczeć.</p>

<p><b>Kot domowy</b> najprawdopodobniej pochodzi od dwóch gatunków: od
<b>kota nubijskiego</b> (<i>Felis silvestris lybica</i>) i od
<b>azjatyckiego kota stepowego</b> (<i>Felis silvestris ornata</i>).
<br><br>Do dziś nie wiadomo dokładnie kiedy i jak kot stał się
zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat
temu. Miało to miejsce w dolinie Nilu.</p>

</body>

</html>

Rys. 3.7.

Do tekstu
zastosowano
formatowani

Czy można stosować do tego samego tekstu kilka znaczników formatujących?

Do tego samego fragmentu tekstu można zastosować jednocześnie różne style: na przykład
pogrubienie i kursywę:

<B><I>Pogrubienie i kursywa</I></B>

co daje w efekcie tekst pogrubiony pisany kursywą.

Stosując znaczniki wielokrotne pamiętać jednak należy o znacznikach zamykających – musi ich
być tyle samo ile otwierających, oraz o kolejności znaczników – kolejność znaczników
zamykających musi być odwrotna niż znaczników otwierających. Tę zasadę pokazuje rysunek 3.8.

Rys. 3.8.

Zasady
stosowania
kilku
znaczników
do tego
samego
tekstu

Jak dodać linię poziomą?

Linią poziomą można oddzielać od siebie wizualnie fragmenty strony WWW – w naszym
przykładzie linia pozioma może oddzielić fragmenty tekstu poświęcone innym zwierzakom.

Aby umieścić na stronie linię poziomą, otwórz plik w oknie edytora i wpisz pod definicją
pierwszego akapitu znacznik

<hr>

(patrz wydruk 3.7 – element

wyróżniony został czcionką

pogrubioną). Zapisz plik i przetestuj go w przeglądarce (patrz rysunek 3.9).

Wydruk 3.7. Wstawiamy linię poziomą

<html>

<head>

<title>Zwierzaki</title>

</head>

<body>

zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty
potrafią ryczeć.</p>

<!—tu wstawimy linię poziomą-->

<hr>

<br><br>Do dziś nie wiadomo dokładnie kiedy i jak kot stał się
zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat
temu. Miało to miejsce w dolinie Nilu.</p>

</body>

</html>

Rys. 3.9.

Akapity
odnoszące się
do różnych
tematów
zostały
rozdzielone
linią poziomą

Czy można modyfikować wygląd linii poziomej?

Znacznik

<hr>

ma swoje atrybuty, które umożliwiają definiowanie grubości, długości i

wyrównania linii. Tabela 3.2 prezentuje te atrybuty wraz z przykładem ich użycia. Atrybuty te są
nadal uznawane w wersji HTML 4, lecz zaleca się stosowanie arkuszy stylów.

Tabela 3.2. Atrybuty znacznika <hr>

Atrybut

Opis

size=”piksele”

Grubość linii w pikselach; wartość domyślna (i najmniejsza) to
2

width=”piksele|wartość%”

Długość linii w poziomie; wartości mogą być podawane w
pikselach lub jako procent szerokości okna

align=”left|right|center”

Wyrównanie linii.

Przykład: <hr width=”50%” size=”3” align=”center”>

Trzy rodzaje list

W języku HTML możliwe jest zdefiniowanie trzech rodzajów list: wypunktowanej,
numerowanej i definicji. W pierwszym wypadku pozycje listy oznaczone są znakiem
wypunktowania – na przykład kropkami, w drugim są numerowane, a w trzecim listę tworzą
terminy i ich definicje.

Jak zdefiniować listę wypunktowaną?

Listę wypunktowaną definiuje para znaczników

. Między nimi wstawiane są

pozycje listy – do tego celu służy para znaczników

. Pozycji listy może być wiele. O

ile w przypadku elementu ul znacznik zamykający jest konieczny, to w przypadku pozycji listy,
czyli elementu li, takiego wymogu nie ma.

Wydruk 3.8 prezentuje podstawową postać listy wypunktowanej:

Wydruk 3.8. Lista wypunktowana

<html>

<head>

<title>Lista wypunktowana</title>

</head>

<body>

<h2>Lista wypunktowana:</h2>

<ul>

<li>pierwsza pozycja listy</li>

<li>druga pozycja listy</li>

<li>trzecia pozycja listy</li>

</ul>

</body>

<html>

Czy można modyfikować znak wypunktowania listy?

Kropka to domyślny znak wypunktowania. Jeśli chcesz użyć innego znaku, musisz zdefiniować go
korzystając z atrybutu

type

znacznika

<ul>

. Oto wartości atrybutu

type

dla listy

wypunktowanej:

"disc"

– znak domyślny – czarna kropka

circle"

– kółko (puste w środku)

"square"

– kwadrat

Na wydruku 3.9 pokazano różne przykłady definicji list wypunktowanych, a rysunek 3.10
prezentuje wygląd list w oknie przeglądarki.

Wydruk 3.9. Lista wypunktowana – znaki wypunktowania

<html>

<head>

<title>Lista wypunktowana</title>

</head>

<body>

<h4>Kropki jako znaki wypunktowania:</h4>

<li>Brzoza</li>

<li>Topola</li>

</ul>

<h4>Kółka jako znaki wypunktowania:</h4>

<li>Brzoza</li>

<li>Topola</li>

</ul>

<h4>Kwadraty jako znaki wypunktowania:</h4>

<li>Brzoza</li>

<li>Topola</li>

</ul>

</body>

</html>

Rys. 3.10.

Różne
przykłady list
wypunktowan
ych – atrybut
type znacznika
<ul>
umożliwia
zdefiniowanie
znaku
wypunktowani
a

Jak zdefiniować listę numerowaną?

Drugim typem listy jest lista numerowana. Definiuje ją para znaczników

. Znacznik

zamykający

</ol>

jest absolutnie konieczny. Pozycje listy są oznaczane w taki sam sposób, jak

w przypadku listy wypunktowanej i podobnie jak tam znacznik zamykający

</li>

jest

opcjonalny.

Wydruk 3.10 prezentuje podstawową postać listy numerowanej:

Wydruk 3.10. Lista numerowana

<html>

<head>

<title>Lista numerowana</title>

</head>

<body>

<h2>Lista numerowana:</h2>

<ol>

<li>pierwsza pozycja listy</li>

<li>druga pozycja listy</li>

<li>trzecia pozycja listy</li>

</ol>

</body>

<html>

Czy można modyfikować znak numerowania listy?

Sposób numeracji listy numerowanej można zmieniać, korzystając z tego samego atrybutu

type

co w przypadku listy wypunktowanej. Inne są oczywiście jego wartości. Atrybut

type

umieszczany jest w znaczniku otwierającym

<ol>

. W przypadku list numerowanych, wartości

atrybutu

type

są następujące:

"l"

– numeracja standardowa (1, 2, 3...)

"a"

– małe litery alfabetu (a, b, c...)

"A"

– wielkie litery alfabetu (A, B, C...)

"i"

– kolejne liczby rzymskie pisane małymi literami (i, ii, iii...)

"I"

– kolejne liczby rzymskie (I, II, III...)

Na wydruku 3.11 pokazano różne przykłady definicji list numerowanych, a rysunek 3.11
prezentuje wygląd list w oknie przeglądarki.

Wydruk 3.11. Lista numerowana – typy numeracji

<html>

<head>

<title>Lista numerowana</title>

</head>

<body>

<h4>Lista numerowana:</h4>

<ol>

<li>Kasztan</li>

</ol>

<h4>Lista alfabetyczna – wielkie litery:</h4>

<li>Kasztan</li>

</ol>

<h4>Lista alfabetyczna – małe litery:</h4>

<li>Kasztan</li>

</ol>

<h4>Numeracja rzymska:</h4>

<li>Kasztan</li>

</ol>

<h4>Liczby rzymskie pisane małymi literami:</h4>

<li>Kasztan</li>

</ol>

</body>

</html>

Rys. 3.11.

Różne przykłady list
numerowanych –
atrybut type znacznika
<ol> umożliwia
zdefiniowanie znaku
numeracji

Jak utworzyć listę definicji?

Trzecim i ostatnim typem listy jest lista definicji. Umożliwia ona prezentacje terminów wraz z
definicjami. Listę definicji otwiera znacznik

<dl>

, a zamyka znacznik

</dl>

. Terminy wstawiane

są za pomocą pary

, a ich definicje przy użyciu pary

. Znaczniki

</dt>

</dd>

są opcjonalne. Wydruk 3.12 pokazuje podstawowy przykład takiej listy, a jej wygląd

możesz zobaczyć na rysunku 3.12.

Wydruk 3.12. Lista definicji

<html>

<head>

<title>Lista definicji</title>

</head>

<body>

<h2>Lista definicji:</h2>

<dl>

<dt>Pieniądze</dt>

<dd>Środek płatniczy.</dd>

<dd>Substancja chemiczna, złożona z dwóch atomów wodoru i jednego atomu
tlenu.</dd>

</dl>

</body>

<html>

Rys. 3.12.

Lista definicji

Czy listy różnego typu można ze sobą łączyć?

Tak, listy różnego typu można łączyć – jest to tak zwane zagnieżdżanie list. Jest ono przydatne,
gdy trzeba na przykład zdefiniować podpunkty określonego punktu listy. Wówczas wystarczy
wstawić listę jako element innej listy. Brzmi może trochę tajemniczo, ale przykład wyjaśni Ci o co
chodzi.

Skorzystajmy z wydruku 3.10 listy numerowanej i dodajmy do jej kolejnych numerowanych
pozycji podpunkty oznaczone znakiem wypunktowania. Efekty tej operacji prezentuje wydruk
3.13. Wpisz kod html w edytorze, zapisz swój plik i przetestuj w przeglądarce (patrz rysunek
3.13).

Wydruk 3.13. Zagnieżdżanie list

<html>

<head>

<title>Lista numerowana z podpunktami</title>

</head>

<body>

<h2>Lista numerowana z podpunktami:</h2>

<!—poniżej jest kod listy numerowanej, a każda jej pozycja ma podpunkty--
>

<ol>

<li>Pierwsza pozycja listy</li>

<ul>

<li>punkt pierwszy</li>

<li>punkt drugi</li>

</ul>

<li>Druga pozycja listy</li>

<ul>

<li>punkt pierwszy</li>

<li>punkt drugi</li>

</ul>

<li>Trzecia pozycja listy</li>

<ul>

<li>punkt pierwszy</li>

<li>punkt drugi</li>

</ul>

</ol>

</body>

<html>

Rys. 3.13.

Lista
numerowana,
której każda
pozycja ma
podpunkty

Czy w obrębie listy można korzystać z innych znaczników?

Jeśli pozycję listy stanowi długi tekst, można skorzystać na przykład ze znaczników akapitu,

<p>

lub nagłówków,

<hn>

, aby nadać mu znośniejszą dla oka postać. Można także wprowadzić do

listy trochę wolnej przestrzeni – tu przyda się znacznik

<br>

, lub wydzielić punkty podstawowe

podkreślając je.

Spróbujmy tak właśnie potraktować naszą listę numerowaną z podpunktami (patrz wydruk 3.13,
rysunek 3.13). W obecnej postaci sprawia ona wrażenie przeładowanej i jest mało czytelna.
Wprowadźmy więc wolny obszar, a liniami poziomymi podkreślmy główne punkty.

Otwórz więc plik z wydruku 3.13 i wstaw za każdą z pozycji listy numerowanej znacznik

<hr>

Aby podkreślony został sam tekst, można w znaczniku

<hr>

dodać atrybut

width=”wartość”

określający długość linii poziomej (patrz tabela 3.2) oraz atrybut

align=”left”

, który

spowoduje dosunięcie linii do lewego marginesu.

Za podpunktami warto wprowadzić trochę wolnego miejsca – wówczas łatwiej będzie czytać listę.
Tak więc wstaw za wyrażeniem

<li>punkt drugi</li>

dwa znaczniki

<br>

Wydruk 3.14 prezentuje cały kod, a efekty wprowadzonych zmian możesz zobaczyć na rysunku
3.14.

Wydruk 3.14. Poprawianie czytelności listy za pomocą linii poziomych i wolnej przestrzeni

<html>

<head>

<title>Lista numerowana z podpunktami</title>

</head>

<body>

<h2>Lista numerowana z podpunktami:</h2>

<ol>

<li>Pierwsza pozycja listy</li><hr align="left" width="200">

<ul>

<li>punkt pierwszy</li>

<li>punkt drugi</li><br><br>

</ul>

<li>Druga pozycja listy</li><hr align="left" width="200">

<ul>

<li>punkt pierwszy</li>

<li>punkt drugi</li><br><br>

</ul>

<li>Trzecia pozycja listy</li><hr align="left" width="200">

<ul>

<li>punkt pierwszy</li>

<li>punkt drugi</li>

</ul>

</ol>

</body>

<html>

Rys. 3.14.

Lista
numerowana
z
podpunktami
–
wprowadzono
trochę wolnej
przestrzeni i
podkreślono
główne
punkty

Najważniejsze informacje

Atrybuty opisują właściwości elementów strony WWW. Definiuje się je za pomocą par:

atrybut=”wartość”

i umieszcza zawsze w znaczniku otwierającym danego elementu

HTML. Wartości należy podawać w cudzysłowie – pojedynczym, ’’ lub podwójnym, ””.

Aby przekształcić tekst w nagłówek, należy zawrzeć go między znacznikami nagłówka,
<hn

> </hn>

, umieszczonymi w sekcji

body

dokumentu.

W języku HTML istnieje sześć poziomów nagłówka:

. Poziom

ważności nagłówka maleje wraz ze wzrostem jego numeru.

Nagłówek może być dowolnie długi.

Aby wyśrodkować nagłówek, znaczniki nagłówka można zagnieździć w obrębie
znacznika

<center>: <center><hn>Nagłówek<hn></center>

, lub dodać w

znaczniku nagłówka atrybut

align=”center”

. W ten sam sposób można

wypośrodkowywać obrazy lub tekst.

Akapit tekstu definiowany jest przez parę znaczników

umieszczaną w obrębie

znaczników

Aby zwiększyć odstęp między akapitami lub wprowadzić odstęp w samym akapicie
można skorzystać ze znacznika

<br>

Aby zachować istniejący układ tekstu, w którym użyto dodatkowych odstępów i łamań
wierszy, można skorzystać z elementu

pre

: <

pre>Tekst Preformatowany</pre>

Aby zastosować do tekstu formatowanie takie jak pogrubienie, kursywa, indeks dolny lub
górny, czy któryś ze stylów logicznych, należy formatowany tekst umieścić między parą
znaczników formatujących. Lista znaczników znajduje się w tabeli 3.1 oraz w tabeli A1 z
dodatku A.

Do tego samego fragmentu tekstu można zastosować jednocześnie różne style, pamiętając
jednak o znacznikach zamykających i poprawnej kolejności znaczników.

Znacznik definiujący linię poziomą to

<hr>

. Nie ma on znacznika zamykającego.

Listy numerowane – to listy, których elementy są numerowane. Takie listy są objęte
znacznikami

, a każdy element listy rozpoczyna się od znacznika

<li>

Listy wypunktowane – w tych listach elementy są oznaczane znakiem wypunktowania i
podobnie jak poprzednio poprzedza je znacznik

<li>

. Lista wypunktowana zawiera się

między znacznikami

Listy definicji – to listy, w których są dwie składowe: pojęcie i definicja. Znacznik

<dt>

definiuje pojęcie, a znacznik

<dd>

definicję. Np.: <

dt>Kot</dt><dd>Zwierzę

futerkowe</dd>

. Elementy umieszczane są w obrębie pary znaczników

Listy wypunktowane i numerowane można modyfikować. Atrybut

type

pozwala na

zmianę domyślnego znaku wypunktowania, a w przypadku list numerowanych, znaku
numerowania.

Rozdział 4.
Kaskadowe arkusze stylów

Ogólna postać kaskadowego arkusza stylów

Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania
elementów HTML. Pozwalają określać rozmiar i kolor czcionki, definiować odstępy i rozmieszczenie
tekstu oraz obrazów na stronie, a pełna lista ich możliwości jest znacznie dłuższa.

Znaczniki HTML zostały pierwotnie zaprojektowane jako narzędzia definiowania zawartości dokumentu. I
tak znacznik nagłówka określał: „To jest nagłówek”, znacznik akapitu stwierdzał: „To jest akapit tekstu”,
znacznik tabeli informował: „To jest tabela”, a o układzie strony decydowała przeglądarka.

Wraz z rozbudową możliwości przeglądarek zaczęły pojawiać się coraz to nowe znaczniki i atrybuty.
Tworzenie stron WWW, których zawartość byłaby dobrze odseparowana od układu dokumentu, stawało się
coraz trudniejsze.

Z tego właśnie powodu konsorcjum W3C powołało do życia kaskadowe arkusze stylów – wprowadzono je
do specyfikacji HTML 4.0. Obecnie są one standardem i zarówno Netscape 4, jak i Internet Explorer 4 je
obsługują.

Co daje stosowanie arkuszy CSS?

Podstawowe zalety stylów CSS to możliwość szybkiej i prostej modyfikacji stylu oraz błyskawiczna wręcz
aktualizacja postaci dokumentu w przypadku takich zmian. One naprawdę zaoszczędzą Twój czas!
Wyobraź sobie, że w rozbudowanej witrynie trzeba zmienić sposób formatowania dziesiątków nagłówków
czy połączeń! To wiele godzin pracy, jeśli będziesz ręcznie wyszukiwał elementy i zmieniał ich atrybuty,
lub kilka chwil, jeśli zastosujesz w dokumencie arkusze CSS – wówczas modyfikacja stylu to parę stuknięć
w klawisze, a aktualizacja to automat.

Czym są kaskadowe arkusze stylów?

Kaskadowy arkusz stylów to mechanizm definiujący formatowanie dla danej strony przy zastosowaniu
stylów złożonych, które przeglądarka zinterpretuje w określonym porządku zwanym kaskadą.

Jakie są rodzaje arkuszy stylów?

Arkusze stylów dają wiele możliwości stosowania stylów. Definicja stylu może pojawić się w konkretnym
elemencie HTML – wówczas mówimy o stylu wpisanym , w obrębie elementu

head

strony HTML (to

znaczy między znacznikami

) – takie arkusze stylów nazywa się osadzonymi, lub może

zostać pobrana z pliku zewnętrznego – jest to wtedy zewnętrzny lub łączony arkusz stylów.

Wszystkie typy arkuszy CSS – wpisane, osadzone i zewnętrzne – można stosować jednocześnie.

Łączone arkusze stylów są przechowywane w zewnętrznym pliku o rozszerzeniu nazwy

.css

. Składnia

takiego arkusza jest podobna jak w przypadku arkusza osadzonego, a sformatowanie strony wymaga
jedynie umieszczenia połączenia do pliku zawierającego definicję stylu.

Jaki styl zostanie zastosowany, jeśli w dokumencie zdefiniowano kilka arkuszy stylów
(czyli jak działa kaskada stylów)?

W przypadku obecności różnych arkuszy stylów na jednej stronie, hierarchia ich ważności rośnie w
następującej kolejności:

1. Domyślne ustawienia przeglądarki

2. Zewnętrzny arkusz stylów

3. Osadzony arkusz stylów (umieszczony między znacznikami

)

4. Styl wpisany (dotyczący konkretnego elementu HTML)

Najwyższy priorytet ma styl wpisany, co oznacza, że jego ustawienia są dominujące względem
zadeklarowanych w sekcji

head

oraz pobranych z pliku zawierającego zewnętrzny arkusz stylów.

Dominują także nad domyślnymi ustawieniami przeglądarki.

Jaka jest ogólna postać kaskadowego arkusza stylów?

Postać arkusza stylu CSS zależy od typu arkusza. I tak w przypadku stylu wpisanego – a więc
umieszczonego w konkretnym znaczniku – ma ona taką oto postać:

Ogólna postać osadzonego arkusza CSS jest następująca:

Zawarta w obrębie elementu

style

definicja następującą składnię:

selektor{właściwość: wartość}

Selektorem nazywa się znacznik czy też element, który chcesz zdefiniować, właściwość to jego atrybut,
który zmieniasz przypisując mu nową wartość. Właściwość i wartość rozdzielone są dwukropkiem oraz
zawarte w nawiasach klamrowych, tak jak w tym przykładzie:

body {color: black}

Jeśli wartość ma postać wielowyrazową – na przykład

sans serif

– umieszcza się ją w cudzysłowie:

p {font-family: "sans serif"}

Oto przykład rzeczywistej definicji:

Między znacznikami

<style>

</style>

umieszczana jest lista znaczników HTML wraz z

właściwościami arkusza, które je definiują. Definicja zaprezentowana powyżej zawiera tylko jeden
symboliczny selektor definiowany przez jedną właściwość CSS. W przypadku większej liczby
właściwości, wszystkie muszą być umieszczone w nawiasie klamrowym (

{}

) oraz oddzielone średnikami

(

;

Zwróć uwagę na znaczniki komentarza html, obejmujące wszystkie znaczniki i właściwości CSS – dzięki
temu, że zostały zastosowane, przeglądarki, które nie potrafią obsługiwać arkuszy stylów nie wyświetlą
śmieci, lecz potraktują kod jako komentarz. Te z kolei, którym arkusze CSS nie są obce, wiedzą, że między
znacznikami zawarte są definicje stylów.

Co oznacza ta definicja stylu?

W zaprezentowanej definicji stylu zdefiniowany jest krój pisma, który zostanie zastosowany do tekstu
strony w sekcji

body

. Innymi słowy tekst w tej sekcji będzie pisany czcionką

Verdana

(lub czcionką

Arial

, ewentualnie czcionką

Helvetica

, jeśli

Verdana

nie zostanie znaleziona na komputerze

użytkownika – jak widzisz, arkusze stylu uwzględniają nawet ewentualny brak zaplanowanej przez twórcę
strony czcionki). Styl czcionki zostanie zastosowany także do tekstu umieszczonego między znacznikami

<p>

<div>

natomiast tekst umieszczony w komórkach tabeli wymaga odrębnej definicji stylu.

W jaki sposób w jednej definicji stylu określić kilka właściwości?

Jeśli chciałbyś zdefiniować w definicji stylu kilka właściwości, musisz je rozdzielać średnikami, tak jak w
poniższym wyrażeniu przykładowym, w którym do tekstu stosowane jest wyrównanie i kolor:

p {text-align: center; color: red}

Aby definicja była bardziej czytelna, każdą z właściwości możesz umieszczać w osobnym wierszu:

{

text-align: center;

color: black;

font-family: arial

}

Czy jedną właściwość można przypisać kilku elementom?

W definicji stylu elementy (inaczej selektory) można grupować. Selektory w grupie oddzielane są
przecinkami. Oto przykład definicji, w której wszystkim poziomom nagłówka (od

) przypisany

zostaje kolor czerwony:

h1, h2, h3, h4, h5, h6

{

color: red

}

Czy jednemu elementowi można przyporządkować różne style?

Powiedzmy, że chcesz w swoim dokumencie zastosować do akapitów dwa różne sposoby wyrównania
tekstu: pewne akapity chcesz dosunąć do prawego marginesu, a pozostałe wycentrować. W takim
przypadku przydatny będzie atrybut

class

. Pozwala on zdefiniować różne style dla tego samego elementu

– inaczej mówiąc pozwala zdefiniować klasy stylu.

Klasę określa się w taki oto sposób:

element.nazwa_klasy{właściwość: wartość}

W naszym przykładzie musimy więc zdefiniować dwie klasy: pierwsza, nazwijmy ją

prawy

, w której

ustawimy sposób wyrównania tekstu do prawego marginesu, i klasa

center

, w której tekst jest

wyśrodkowany:

p.prawy {text-align: right}

p.center {text-align: center}

Teraz wystarczy wstawić nazwę klasy do tych znaczników, w których chcemy mieć określony sposób
formatowania i gotowe:

Ten akapit zostanie wyrównany do prawej.

</p>

Ten akapit zostanie wyśrodkowany.

</p>

Nazwy klas mogą być dowolne, pamiętaj jednak, by nie stosować w nich polskich liter.

Nazwę selektora w definicji klasy można pominąć:

.nazwa_klasy{właściwość: wartość}

Wówczas zdefiniowany zostanie styl, który można zastosować do wielu elementów. W przykładzie
przedstawionym poniżej klasa prawy została zastosowana zarówno do elementu h1, jak i do akapitu

Ten nagłówek został wyrównany do prawego marginesu.

</h1>

Ten akapit został wyrównany do prawego marginesu.

</p>

Czy można narzucić styl pojedynczym wystąpieniom danego elementu?

Pojedynczym wystąpieniom danego typu można narzucić styl korzystając z atrybutu

. Atrybut

pozwala więc oznaczać elementy podobnie jak atrybut

class

–

jest czymś w rodzaju identyfikatora

elementów.

Nazwa atrybutu

musi być jednoznaczna. W dokumencie może istnieć tylko jeden element o danym

Do tego akapitu zostaną zastosowane ustawienia stylu zdefiniowane w definicji id
o nazwie wstep.

</p>

Atrybut

można zdefiniować na dwa sposoby: tak, by styl stosowany był do dowolnego elementu o

określonym

lub tak, by styl był stosowany do określonego elementu o danym

Ta definicja stanowi, że styl zostanie zastosowany do każdego elementu oznaczonego identyfikatorem

wstep

#wstep

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

A oto drugi przypadek. Tutaj styl będzie zastosowany tylko do elementu p o

id=”wstep

”:

p#wstep

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

Zwróć uwagę, że w obu przypadkach ustawienia stylu, które będą stosowane do elementów oznaczonych
atrybutem id identyfikuje się nazwą atrybutu id poprzedzoną znakiem #, o tak:

#nazwa_id

Komentarze CSS

Definicje stylu nie zawsze są proste, a nawet jeśli są, nie zawsze pamiętamy dlaczego wybraliśmy takie, a
nie inne właściwości. Aby zabezpieczyć się przed skutkami niepamięci wstecznej, stosuj komentarze. Będą
bardzo przydatne przy przyszłej edycji arkusza stylów.

Jaką postać ma komentarz CSS?

Komentarz CSS rozpoczyna się od znaku prawego ukośnika, nim pojawia się gwiazdka, potem tekst
komentarza i wreszcie zamknięcie komentarza gwiazdką i ukośnikiem. Oto przykład:

/* To jest komentarz CSS */

{

text-align: right;

/* To też jest komentarz CSS */

color: green;

font-family: arial

}

Styl wpisany

Informacje ogólne na temat arkuszy stylów sprawdzimy teraz w praktyce. Zaczniemy od zdefiniowania
stylu wpisanego.

Co to jest styl wpisany?

Styl wpisany jest wprowadzany w wybranym znaczniku i nie ma wpływu na pozostałe znaczniki. Jeśli
chcesz na przykład zastosować kursywę do zawartości znacznika

<h1>

, odpowiednią informację musisz

umieścić w tym właśnie znaczniku.

Ogólna postać definicji stylu wpisanego jest taka:

Oto przykład:

<h1 style="font-size: 20pt; font-weight: bold; font-family: Arial, sans-
serif">Treść tytułu</h1>

Styl wpisany powinien być stosowany tylko wtedy, gdy konieczne jest zastosowanie specyficznego stylu
do pojedynczego wystąpienia danego elementu, z reguły tylko tam, gdzie niezbędne są drobne korekty
stylu. Nie spełnia on bowiem zasadniczego celu kaskadowego arkusza stylów, a więc globalnej kontroli
stylu całej strony.

Jak zdefiniować w dokumencie html styl wpisany?

Aby lepiej zrozumieć o co tu chodzi, sformułujmy razem taką lokalną definicję stylu.

Otwórz w edytorze kod źródłowy szkieletu strony

mojastrona.html

lub wpisz go ręcznie. Między

znacznikami

wstaw parę akapitów tekstu. Zdefiniuj w wybranych akapitach inny

rozmiar czcionki – użyj do tego celu właściwości

font-size

(w końcowej części rozdziału znajdziesz

wyjaśnienia wykorzystywanych tu właściwości – patrz tabele 4.1 i 4.2). Możesz skorzystać z pomocy
wydruku 4.1. Zapisz plik pod nazwą

wpisany.html

i otwórz stronę w oknie przeglądarki (patrz rysunek

4.1).

Wydruk 4.1. Styl wpisany

<html>

<head>

<title>Styl wpisany</title>

</head>

<body>

Styl zastosowany w obrębie znacznika p.</p>

<p>W tym akapicie nie zastosowano stylu.</p>

Styl zastosowano w obrębie znacznika p.</p>

</p>

<p>

Zawartość tego znacznika p nie jest formatowana.

</p>

</body>

</html>

Rys. 4.1.
Wpisany arkusz
stylów oddziałuje
tylko na znacznik, w
którym
umieszczono
definicję stylu

Wpisany arkusz stylów oddziałuje tylko na te akapity, w znacznikach których umieszczona została
definicja stylu. Pozostałe akapity zachowują domyślne formatowanie.

Osadzony arkusz stylów

Co to jest osadzony arkusz stylów i jaką ma postać?

Osadzony arkusz stylów to definicja stylu umieszczona między znacznikami

. Element

ten powinien znaleźć się w nagłówku dokumentu. Konfiguruje on atrybuty stylu dla całej strony. Oto
przykład:

<head>

<--!

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/kot.gif")}

-->

</style>

</head>

Przeglądarka przeczyta te definicje stylów i sformatuje dokument zgodnie z nimi. Zwróć uwagę, że atrybut

type

znacznika

<style>

ma wartość

text/css

– jest to dla przeglądarki informacja, że następne

instrukcje to arkusz stylów. Instrukcje te zawarte są w znaczniku komentarza – jest to zabezpieczenie na
wypadek, gdyby strona trafiła do przeglądarki starego typu, która nie potrafi obsłużyć arkuszy stylów.
Wówczas instrukcje formatowania zostaną zignorowane, a nie wyświetlone na ekranie jako tekst.

Globalne formatowanie oznacza, że styl zostanie zastosowany do wszystkich instancji elementu, dla
którego został zdefiniowany. Wyjątki od reguły? Tak, już o nich wspominaliśmy przy okazji omawiania
klas i atrybutów

. W dalszej części rozdziału zobaczysz, jak w praktyce rozwiązać taki problem.

Jak zdefiniować osadzony arkusz stylów?

Aby utworzyć i przetestować osadzony arkusz stylów, otwórz edytor HTML i wpisz podstawowe znaczniki
definiujące szkielet strony:

<html>

<head>

<body>

Wstaw znaczniki

<style>

</style>

– definicje stylów są umieszczane właśnie między nimi.

Dodatkowe informacje na temat zasad tworzenia definicji stylów znajdziesz we wstępie do tego rozdziału.
Możesz też skorzystać z definicji zawartych na wydruku 4.2.

Wydruk 4.2. Osadzony arkusz stylów

<html>

<head>

<title>Osadzony arkusz stylów</title>

<!--

body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm}

h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF}

p {font-size: 14pt; text-indent: 4cm}

-->

</style>

</head>

<body>

<h2>Czerwony nagłówek na białym tle</h2>

<p>

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy
takie jak do nagłówka.

</p>

<h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2>

<p>

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy
takie jak do nagłówka.

</p>

</body>

</html>

Zapisz plik pod nazwą

osadzony.html

i wyświetl dokument html w przeglądarce (patrz rysunek 4.2).

Rys. 4.2.

Osadzony arkusz
stylów określa style
na całej stronie

Skąd się wzięła taka postać strony?

Jak już wspomniałam, osadzony arkusz stylów definiuje style dla całego dokumentu. Definicja stylu z
wydruku 4.2:

<!--

body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm}

h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF}

p {font-size: 14pt; text-indent: 4cm}

-->

</style>

definiuje domyślny wygląd całej sekcji body, lecz narzuca specyficzne ustawienia dla wszystkich
nagłówków

(w przeciwnym razie do nagłówków zastosowane zostałyby także ustawienia sekcji

body

–

wynika to z zasady dziedziczenia ustawień stylu przez elementy podrzędne) i dodatkowe dla wszystkich
akapitów

Odnośnie sekcji

body

stanowi ona, że:

Tło strony będzie koloru niebieskiego – decyduje o tym wartość właściwości

background:

#0000FF

. Symbol, #

0000FF

, to kod koloru. Zamiast niego możesz użyć nazwy koloru,

blue

. Kody kolorów znajdziesz w dodatku D.

Tekst dokumentu (akapitów i nagłówków) będzie koloru żółtego. Określa to para:

color:

#FFFF00

(wynika stąd, że nagłówki

powinny być pisane czcionką żółtą, lecz my chcemy

czerwoną na białym tle i dlatego musimy przygotować specjalną definicję stylu dla

Z obu stron pojawią się marginesy o szerokości 2 cm:

margin-left: 2cm

;

margin-

right: 2cm

Jeśli chodzi o nagłówki

, definicja stylu określa, że:

Czcionka ma mieć rozmiar 20 (bo

font-size: 20pt

Tekst ma pojawiać się na białym tle i ma być koloru czerwonego:

color: #FF0000

;

background: #FFFFFF

Do akapitów z kolei zastosowane zostaną domyślne ustawienia zawarte w definicji stylów sekcji

body

, a

więc marginesy i kolor tekstu. Dodatkowo jednak:

Narzucony zostanie rozmiar czcionki –

font-size: 14pt

oraz wcięcie pierwszego wiersza:

text-indent: 4cm

Jak widzisz, pomimo tajemniczego wyglądu, osadzony arkusz stylów nie jest wcale tak tajemniczy.
Wyjaśnienia dotyczące stosowania właściwości odnoszących się do czcionki i tekstu znajdziesz w tabelach
4.1 i 4.2.

W jaki sposób do jednej instancji elementu zastosować inny styl?

Powiedzmy więc, że chcesz, aby jeden z akapitów tekstu miał zupełnie inne formatowanie niż pozostałe.
Realizacja tego jest prosta, jeśli skorzystamy z atrybutu

(patrz informacje wstępne do tego rozdziału).

Na wydruku 4.3 przedstawiony został kod źródłowy dokumentu z wydruku 4.2, w którym jednemu z
akapitów zmieniono styl. Akapitowi przypisano identyfikator

id=”wyjatek”

, a

styl #wyjatek

dołączono do listy definicji stylów w elemencie

style

. Zgodnie z definicją, tekst pojawi się na białym tle i

będzie koloru czerwonego. Pozostałe ustawienia stylu akapitu zostaną zachowane.

Wygląd strony pokazany został na rysunku 4.3.

Wydruk 4.3. Osadzony arkusz stylów, w którym wykorzystano atrybut id

<html>

<head>

<title>Osadzony arkusz stylów</title>

<!--

body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm}

h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF}

p {font-size: 14pt; text-indent: 4cm}

#wyjatek {color: #FF0000; background: #FFFFFF}

-->

</style>

</head>

<body>

<h2>Czerwony nagłówek na białym tle</h2>

<p>

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy
takie jak do nagłówka.

</p>

<h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2>

<p id="wyjatek">Ten akapit pojawi się na białym tle, a czcionka będzie koloru

czerwonego. Oznaczyliśmy go bowiem atrybutem id. Pozostałe ustawienia zostaną
zachowane.

</p>

<p>

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy
takie jak do nagłówka.

</p>

</body>

</html>

Rys. 4.3.

Osadzony arkusz
stylów określa style
na całej stronie, lecz
można spod jego
działania wyłączyć
określone instancje
elementu

Jak zastosować w dokumencie klasy?

Czas już, aby przyjrzeć się klasom od strony praktycznej (wstępne informacje na temat klas znajdziesz na
początku tego rozdziału).

Sformułujmy najpierw problem: chcemy, aby akapity tekstu były wyrównywane naprzemiennie – raz do
prawego, a raz do lewego marginesu.

Zgodnie z tym, co już wiemy o klasach, musimy zdefiniować dwie klasy – nazwiemy je

prawa

lewa

– a

ich definicje wstawić do elementu style.

Otwórz więc plik

osadzony.html

w edytorze tekstu i dodaj w nim jeszcze kilka akapitów tekstu, aby

efekt dywersyfikacji wyrównania akapitów po zastosowaniu klas stał się lepiej widoczny.

Zdefiniujmy nasze klasy – skorzystamy w nich z właściwości

text-align

, która umożliwia określenie

sposobu wyrównania tekstu:

.lewa {text-align: left}

.prawa {text-align: right}

Umieśćmy klasy tam, gdzie ich miejsce – w sekcji

head

, między znacznikami

Pozostaje jedynie oznaczyć elementy strony, do których zastosujemy klasy stylu – w znacznikach

<p>

trzeba dodać atrybut

class

i przypisać mu odpowiednie wartości:

prawa

lub

lewa

. Szczegóły tej operacji

znajdziesz na wydruku 4.4.

Wydruk 4.4. Osadzony arkusz stylów i klasy

<html>

<head>

<title>Osadzony arkusz stylów</title>

<!--

body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm}

h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF}

p {font-size: 14pt; text-indent: 4cm}

.lewa {text-align: left}

.prawa {text-align: right}

-->

</style>

</head>

<body>

<h2>Czerwony nagłówek na białym tle</h2>

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy
takie jak do nagłówka. Wyrównamy go do lewego marginesu.

</p>

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy
takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.

</p>

<h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2>

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy
takie jak do nagłówka. Wyrównamy go do lewego marginesu.

</p>

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy
takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.

</p>

</body>

</html>

Efekty możesz podziwiać na rysunku 4.4.

Rys. 4.4.

Klasy pozwalają
modyfikować
właściwości arkusza
stylów

Zwróć uwagę, że w definicjach klas nie użyliśmy nazwy elementu – postać definicji to

.lewa {text-

align: left}

i .

prawa {text-align: right}

, a nie

p.lewa {text-align: left}

p.prawa

{text-align: right}

. Ta druga forma jest także prawidłowa, lecz mniej ogólna – dotyczyłaby tylko

elementów

. Ogólna postać pozwala nam skorzystać z klas także w przypadku stosowania wyrównania do

innych elementów, na przykład do nagłówków.

Zewnętrzny arkusz stylów

Kiedy stosowany jest zewnętrzny arkusz stylów?

Zewnętrzny (lub inaczej: łączony) arkusz stylów to doskonałe rozwiązanie dla witryn, czyli układów wielu
stron. Wówczas te same style mogą być stosowane do wszystkich stron witryny. Jeśli przyjdzie Ci ochota
zmienić wygląd swojej witryny, wprowadzisz zmiany tylko w pliku arkuszy stylów, a zmiany zostaną
automatycznie uwzględnione na wszystkich stronach. Zewnętrzny arkusz stylów rezyduje zgodnie z nazwą
poza dokumentem html, w zewnętrznym pliku o rozszerzeniu nazwy

.css

Jak wygląda zewnętrzny arkusz stylów?

W kodzie każdej ze stron korzystających z zewnętrznych arkuszy stylów musi zostać zdefiniowane
połączenie do pliku zewnętrznego, który je zawiera. Połączenie to definiuje się za pomocą znacznika

<link>

, który umieszczany jest w sekcji

head

dokumentu:

<head>

href="mojestyle.css">

</head>

Definicje stylów rezydują w pliku

mojestyle.css

– nazwa pliku może być dowolna, ale musi mieć

rozszerzenie .

css

. Przeglądarka odczyta plik i sformatuje dokument zgodnie z zawartymi w nim

instrukcjami.

W znaczniku

<link>

musi znaleźć się atrybut

rel

o wartości

stylesheet

. Dzięki temu przeglądarka

będzie wiedziała, że atrybut

href

podaje jej adres URL pliku, który zawiera arkusz stylów.

Jak przygotować plik .css?

Plik

.css

można utworzyć w dowolnym edytorze. Plik nie powinien zawierać znaczników HTML. Oto

przykład zawartości:

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/obraz.gif")}

Jak w praktyce zastosować zewnętrzny arkusz stylów?

Przećwiczmy stosowanie zewnętrznego arkusza stylów na przykładzie dokumentu z wydruku 4.4. W
dokumencie tym stosowany jest osadzony arkusz stylów. Wyrzucimy z kodu źródłowego strony element

style

, w którym znajdują się definicje stylów, i zastąpimy go znacznikiem

<link>

z odpowiednimi

atrybutami.

Najpierw jednak przygotujmy plik zawierający arkusz stylów.

Otwórz edytor i wyświetl w nim kod dokumentu z wydruku 4.4. Wytnij z niego definicje stylów i wklej
wycięty fragment kodu do nowego okna. Jego zawartość powinna być taka jak na wydruku 4.5. Zapisz plik
na przykład pod nazwą

zewnetrzny.css

(bez polskich liter i z rozszerzeniem .css).

Wydruk 4.5. Zewnętrzny arkusz stylów

body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm}

h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF}

p {font-size: 14pt; text-indent: 4cm}

.lewa {text-align: left}

.prawa {text-align: right}

Wróć do dokumentu HTML, w którym chcesz zastosować plik zewnętrzny. W obrębie znaczników

, poniżej znacznika

<title>

(przy okazji zmień też tytuł strony) wprowadź następujący

wiersz kodu:

Znacznik

<link>

wskazuje plik zawierający zewnętrzny arkusz stylów. Oczywiście nazwa pliku będzie

taka, jaką zadeklarowałeś zapisując zewnętrzny arkusz stylów. Atrybut

href

podaje adres URL, pod

którym plik rezyduje. Musisz więc pamiętać o poprawnym zdefiniowaniu połączenia do pliku
zewnętrznego (patrz rozdział6., Połączenia).

Kompletny nagłówek wygląda teraz tak:

<head>

<title>Zewnętrzny arkusz stylów</title>

</head>

Zapisz plik i wyświetl go w przeglądarce. Prezentuje się identycznie jak plik korzystający z arkusza
osadzonego – nic dziwnego, w końcu zewnętrzny arkusz stylów zawiera zestaw tych samych definicji –
tylko tytuł na pasku tytułu uświadamia nam, że to nie ta sama strona (patrz rysunek 4.5).

Rys. 4.5.

Na stronie
korzystającej z
zewnętrznego
arkusza stylów
umieszczane jest
odwołanie do pliku
zawierającego
definicje stylów;
przedłużenie nazwy
tego pliku to .css

Rozciąganie stylu

Rozciąganie stylu polega na objęciu stylem pewnej sekcji dokumentu HTML. Służy do tego para
znaczników

Co umożliwia element span?

Element span jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku znaków w
obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać, aby zastosować styl
do większej sekcji dokumentu. Może ona zawierać elementy różnego typu – na przykład tekst i listy.

Ogólna postać definicji stylu wykorzystującej element

span

jest następująca:

W jaki sposób zastosować element span w kodzie HTML?

Powiedzmy, że w dokumencie z wydruku 4.4 chcesz w drugim z nagłówków wyraz „formatowanie”
napisać wielkimi literami w kolorze niebieskim, a cały wyraz podkreślić. Co robimy? Obejmujemy
znacznikami

żądany wyraz (lub frazę) – w naszym przypadku wyraz znajduje się w

obrębie nagłówka

, i umieszczamy w znaczniku otwierającym

<span>

atrybut style, któremu

przypisujemy odpowiednie właściwości. Rzuć okiem na wydruk 4.6. Skuteczność metody prezentuje
rysunek 4.6.

Wydruk 4.6. Wykorzystanie elementu span

<h2>Ten nagłówek ma takie samo <span style="font-variant: small-caps;
color:blue; text-decoration: underline">formatowanie</span> jak poprzedni</h2>

Rys. 4.6.

Element span
pozwolił na
wyróżnienie
jednego wyrazu w
drugim z
nagłówków
formatowanym za
pomocą arkuszy
stylów

Czy zmieniając formatowanie przy użycie elementu span można korzystać z klas?

Stosowanie klas z elementem

span

jest oczywiście możliwe. Powiedzmy, że chcesz na swojej stronie

WWW pierwszy wyraz wszystkich akapitów pisać czcionką o innym rozmiarze i w innym kolorze niż
pozostały tekst.

Otwórz w edytorze plik z wydruku 4.4 (lub otwórz plik zawierający arkusze stylów) i dodaj w sekcji

head

jeszcze jedną definicję klasy. Nazwijmy ją

kolorowa

.kolorowa {font-size: 24pt; color: #FFFFFF}

Definiuje ona czcionkę o rozmiarze 24 pt w kolorze białym.

Trzeba teraz objąć znacznikami

pierwsze wyrazy wszystkich akapitów i wstawić w

znacznikach otwierających atrybut

class

przypisując mu jako wartość nazwę utworzonej klasy.

Przeanalizuj pełny kod dokumentu na wydruku 4.7. Aktualny wygląd strony prezentuje rysunek 4.7.

Wydruk 4.7. Wykorzystanie elementu span

<html>

<head>

<title>Osadzony arkusz stylów</title>

<!--

body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm}

h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF}

p {font-size: 14pt; text-indent: 4cm}

.lewa {text-align: left}

.prawa {text-align: right}

.kolorowa {font-size: 24pt; color: #FFFFFF}

-->

</style>

</head>

<body>

<h2>Czerwony nagłówek na białym tle</h2>

<span class="kolorowa">Tekst </span>jest żółty na niebieskim tle. Zastosowano do
niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego

marginesu.

</p>

<span class="kolorowa">Tekst </span>jest żółty na niebieskim tle. Zastosowano do
niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do
prawego marginesu.

</p>

<h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2>

<span class="kolorowa">Tekst </span>jest żółty na niebieskim tle. Zastosowano do
niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego
marginesu.

</p>

<span class="kolorowa">Tekst </span>jest żółty na niebieskim tle. Zastosowano do
niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do
prawego marginesu.

</p>

</body>

</html>

Rys. 4.7.

Element span
pozwolił na
wyróżnienie
pierwszego wyrazu
każdego akapitu –
skorzystaliśmy tu z
klasy, aby nie
powtarzać
wielokrotnie
definicji stylu

Wydzielone bloki

Istnieje jeszcze jedna metoda pozwalająca na nadawanie blokom dokumentu innego stylu. Na sposób ten
warto zwrócić szczególną uwagę, gdyż jest on często wykorzystywany w dokumentach dynamicznych (a
więc tworzonych przy wykorzystaniu języka DHTML).

Bloki wydzielamy za pomocą pary znaczników

. Fragment dokumentu objęty nimi można

w swobodny sposób formatować za pomocą stylów. Jest to metoda podobna do omawianej poprzednio, ale
w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki,

akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać
im specyficzne formatowanie za pomocą stylów.

Jaki efekt daje stosowanie elementu div?

Zazwyczaj przeglądarki wprowadzają łamanie wiersza przed i za fragmentem objętym znacznikami

<div>

</div>

. Sprawdź to, wydzielając w dokumencie fragment tekstu (patrz wydruk 4.8 – fragment

wydzielony za pomocą elementu

div

został oznaczony czcionką pogrubioną). Efekt działania elementu

div

pokazuje rysunek 4.8.

Wydruk 4.8. Wykorzystanie elementu div

<html>

<head>

<title>Element div</title>

<!--

body {background: #3366FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm}

h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF}

p {font-size: 14pt; text-indent: 4cm}

.lewa {text-align: left}

.prawa {text-align: right}

-->

</style>

</head>

<body>

<h2>Czerwony nagłówek na białym tle</h2>

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy
takie jak do nagłówka. Wyrównamy go do lewego marginesu.

</p>

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy
takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. Tekst jest

żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do

nagłówka.<div style="font-size:11pt; color: #000000"> Fragment dokumentu objęty
znacznikami div można w swobodny sposób formatować za pomocą stylów. Jest to
metoda podobna do omawianej w przypadku elementu span, ale w tym przypadku
wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki,
akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe,
logiczne fragmenty i nadawać im specyficzne formatowanie za

pomocą stylów.</div>

</p>

<h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2>

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy
takie jak do nagłówka. Wyrównamy go do lewego marginesu.

</p>

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy
takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.

</p>

</body>

</html>

Rys. 4.8.

Element div
umożliwia
wydzielenie
fragmentów
dokumentu i
narzucenie im
innego
formatowania

Przykłady stylów CSS dla tła strony WWW

W tej części rozdziału znajdziesz proste recepty zaspokajające podstawowe potrzeby odnośnie arkuszy
stylów CSS. Na ich podstawie będziesz mógł tworzyć własne definicje.

Jak zdefiniować kolor tła elementu?

Ten przykład nauczy Cię określać dla danego elementu inne tło niż tło całej strony – możesz na przykład
zmienić tło dla obszaru tekstu lub nagłówka. Wydruk 4.9 pokazuje jak zróżnicować tło strony i elementu, a
na rysunku 4.9 zobaczysz jakie to daje efekty.

Wydruk 4.9. Tło strony i elementu

<html>

<head>

<title>Kolor tła elementu</title>

body {background-color: yellow}

h1 {background-color: #00ff00}

h2 {background-color: transparent}

p.magenta {font-size: 16pt; background-color: rgb(250,0,255)}

</style>

</head>

<body>

<h1>Nagłówek na zielonym tle</h1>

<h2>Nagłówek na transparentnym tle</h2>

<p class="magenta">Tekst tego akapitu umieszczono na tle w kolorze fioletowym!
Zwiększono rozmiar czcionki do 16. Wszystko to dzięki klasie o nazwie
magenta.</p>

<p>Ten akapit ma żółte tło, bo tak stanowi styl elementu body.</p>

</body>

</html>

Rys. 4.9.

Inne tło strony i
elementów

Oto znaczenie poszczególnych definicji stylów:

body {background-color: yellow}

– tło sekcji body będzie żółte.

h1 {background-color: #00ff00}

– nagłówki h1 mają być umieszczane na tle w

kolorze zielonym.

h2 {background-color: transparent}

– wszystkie nagłówki

mają tło

transparentne (to daje na przykład możliwość umieszczania tekstu na tle obrazu).

p.magenta {font-size: 16pt; background-color: rgb(250,0,255)}

–

utworzono klasę o nazwie

magenta

, która umożliwia zmianę tła wybranych akapitów na

kolor

magenta

. Dodatkowo zwiększono rozmiar czcionki.

Jak zdefiniować obraz jako tło?

Na wydruku 4.10 znajdziesz definicję stylu CSS, dzięki której będziesz mógł jako tło strony zastosować
obraz. Rysunek 4.10 pokazuje efekt.

Wydruk 4.10. Obraz jako tło strony

<html>

<head>

<title>Obraz jako tło strony</title>

body

{

background-image:

url("images/obraz.jpg")

}

</style>

</head>

<body>

<p>Tu umieszczasz resztę zawartości swojej strony!</p>

</body>

</html>

Rys. 4.10.

Obraz jako tło
strony – możesz na
nim umieszczać
tekst i inne elementy
strony

Oto znaczenie definicji stylów:

{background-image: url("images/obraz.jpg")}

– adres URL określa ulokowanie

obrazu stanowiącego tło strony. W tym przypadku umieszczono go w folderze

images

(nazwa jest oczywiście dowolna) utworzonym w folderze przechowującym plik strony
WWW.

Jak zbudować tło strony z powtórzeń obrazu?

Oto definicja, która pozwala zbudować tło z mniejszych obrazów powtórzonych w pionie (patrz wydruk
4.11). Rysunek 4.11 prezentuje ten ciekawy efekt.

Wydruk 4.11. Budowanie tła z powtórzeń obrazu

<html>

<head>

<title>Budowanie tła z powtórzeń obrazu</title>

body

{

background-image:

url("images/kot.gif");

background-repeat: repeat-y

}

</head>

<body>

</body>

</html>

Rys. 4.11.

Tło zostało
zbudowane z
powtórzeń w pionie
niewielkiego obrazu

Oto znaczenie definicji stylów:

{background-image: url("images/kot.gif"); background-repeat: repeat-
y}

– adres URL określa ulokowanie obrazu, który zostanie powtórzony w kolumnie z lewej

przy lewej krawędzi strony. Powtórzenia definiuje właściwość

background-repeat:

repeat-y

. Gdybyś chciał umieścić pasek tła w poziomie, użyj właściwości

background-

repeat: repeat-x

background-repeat: repeat

spowoduje pokrycie całej

powierzchni powtórzeniami.

Jak umiejscowić na stronie obraz stanowiący tło?

Czasami obraz stanowiący tło strony wcale nie pokrywa jej całkowicie. Najczęściej wynika to z układu
strony i daje całkiem interesujące rezultaty. Tak więc, nawet niewielki obraz można zastosować jako tło.
Postać definicji stylów znajdziesz na wydruku 4.12, a na rysunku 4.12 zobaczysz jak to wygląda w
praktyce.

Wydruk 4.12. Umiejscawianie obrazu-tła na stronie

<html>

<head>

<title>Mały obraz w centrum strony</title>

body

{

background-image:

url("images/kot.gif");

background-repeat:

no-repeat;

background-position:

center center

}

</style>

</head>

<body>

<p>

<b>Uwaga:</b>

Netscape 4 nie obsługuje właściwości "background-position".

</p>

</body>

</html>

Rys. 4.12.

Tło zostało
zbudowane z
powtórzeń w pionie
niewielkiego obrazu

Oto znaczenie definicji stylów:

{background-image: url("images/kot.gif"); background-repeat: no-
repeat; background-position: center center}

– w tej definicji użyto

właściwości:

background-repeat: no-repeat

– wartość

no-repeat

określa, że obraz stosowany

jako tło strony nie będzie powtarzany.

background-position: center center

– dzięki takiemu ustawieniu tej

właściwości obraz znalazł się w centralnym punkcie strony. Gdybym chciała umieścić
go, powiedzmy, w połowie lewej krawędzi, użyłabym wyrażenia

background-

position: center left

(inne możliwości to

top left

top center

top right

center right

bottom left

bottom center

bottom right

). Wyspecyfikowanie

tylko jednego słowa kluczowego spowoduje, że jako drugie domyślnie zostanie przyjęte
słowo

center

A jeśli konieczne byłoby ulokowanie obrazu-tła gdzieś w innym, określonym miejscu
strony, skorzystałabym z takiej definicji:

background-position: 20% 80%

lub

bacground-position: 0px,0px

. Te tajemnicze pary wartości

center, left

, 20%

czy 80% to po prostu współrzędne określające ulokowanie obrazu-tła w poziomie i
pionie. Lewy górny narożnik ma współrzędne

0%,0%

lub

0px,0px

. Jednostki można

mieszać.

Atrybuty stylu odnoszące się do tekstu

Style CSS definiujące krój, kolor, rozmiar i styl czcionki są bardzo często stosowane. Zmiana koloru tła
zazwyczaj wymaga dostosowania koloru tekstu, aby był on czytelny. Konieczność zdefiniowania
parametrów tekstu wynika także z potrzeby zabezpieczenia się na wypadek braku u użytkownika takich
czcionek, jakie zaplanowałeś na swojej stronie WWW. No i oczywiście powód najważniejszy – przecież
jednym z podstawowych zamiarów twórcy dokumentu html jest nadanie mu atrakcyjnej postaci, a ma na to
wpływ także wygląd i układ tekstu.

Co należy wiedzieć o czcionce, aby napisać definicję jej stylu?

Czcionki to znaki, które można wyświetlić na ekranie lub wydrukować. Mogą mieć krój – na pewno
słyszałeś takie nazwy jak, np.

Arial

Times New Roman

czy

Helvetica

; to są właśnie różne kroje

pisma, mają specyficzne wykończenia – nazywa je się wówczas czcionkami szeryfowymi lub są tych
wykończeń pozbawione, jak czcionki bezszeryfowe. Cechy czcionki to także jej rozmiar – jest to wysokość
podawana w punktach (gdzie jeden punkt to około 1/29 centymetra) i styl (kursywa, pogrubiona,
podkreślona). Tekst charakteryzują też odstępy pomiędzy znakami.

Czcionki szeryfowe (serif) to czcionki z wykończeniami liter i cyfr. Dodatkowe elementy zaokrąglające i
wykańczające pełnią nie tylko funkcję dekoracyjną, ale też ułatwiają czytanie. Stąd też czcionki szeryfowe
najczęściej stosuje się do tekstu podstawowego, a rzadziej do tytułów. Przykładem takiej czcionki jest
Times New Roman.

Czcionki bezszeryfowe (sans serif) pozbawione są dodatkowych ornamentów, a stosuje je się zazwyczaj do
nagłówków i małych bloków tekstu. Przykładem czcionki bezszeryfowej jest

Arial

Jak zdefiniować arkusz stylów formatujący tekst?

Proces definiowania arkusza stylów wymaga więc w przypadku tekstu określenia poszczególnych cech
pisma. Zacząć należy od kwestii najważniejszej – od wskazania rodziny czcionek (arkusze stylów
rozpoznają następujące rodziny czcionek:

serif

sans serif

cursive

fantasy

monospace

) i

podania nazwy czcionki lub ciągu nazw alternatywnych (z przecinkami) – wówczas w przypadku braku
czcionki podstawowej, zastosowana zostanie pierwsza alternatywna, a gdy tej także nie będzie, kolejna
alternatywna, itd. Jeśli nazwa czcionki składa się z kilku wyrazów, np.

Goudy Old Style

, w definicji

stylu powinna być podana w cudzysłowach:

font-family: times, ”goudy old style”

. W dalszej

kolejności definiowane są kolejne atrybuty. Oddzielasz je średnikami.

Czy sposób podawania atrybutów jest ważny?

Kolejność atrybutów jest istotna. Atrybuty grubości czcionki –

font-weight

, i stylu –

font-style

muszą pojawić się przed innymi atrybutami czcionki, a rozmiar czcionki –

font-size

, poprzedza odstępy.

Wartości atrybutów nie oddziela się przecinkami – jedyny wyjątek to rodziny czcionek.

Wydruk 4.13 prezentuje osadzony arkusz stylów dla

, w których zdefiniowano krój czcionek

(

font-family

), styl (

font-style

) oraz rozmiar (

font-size

Wydruk 4.13. Formatowanie tekstu

<style>

<!--

h1 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal;
font-size: 20pt}

h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal;
font-size: 14pt}

-->

</style>

Jak zachować porządek w definicjach stylów CSS?

W definicjach stylu powinien być porządek. Nie wynika to wcale ze względów estetycznych, lecz z
praktycznych. Organizacja stylów pozwoli zredukować liczbę definicji, a co najważniejsze, ułatwi
wprowadzanie ewentualnych modyfikacji stylów. O potrzebie grupowania elementów, do których
stosowane będą te same właściwości, już była mowa. Teraz czas na konkretny przykład.

Przyglądając się sekcji

<style>

z przykładu pokazanego na wydruku 4.13 zauważysz, że dla nagłówków

większość atrybutów jest identyczna. Różnica dotyczy jedynie wielkości czcionki. Zapiszmy więc

naszą obserwację w postaci kodu. Wydzielmy to, co różni sposób formatowania elementów

, a

cechy identyczne przedstawmy w jednej definicji wspólnej dla obu (patrz wydruk 4.14). Pomimo zmiany
postaci sekcji

style

– jest ona teraz znacznie prostsza w odbiorze, wygląd tekstu pozostanie taki sam

(patrz rysunek 4.13).

Wydruk 4.14. Grupowanie stylów – identyczne atrybuty stylu przyporządkowano różnym elementom.

<style>

<!--

h1, h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal}

h1 {font-size: 20pt}

h2 {font-size: 14pt}

-->

</style>

Rys. 4.13.

Po uporządkowaniu
definicji stylów
efekt wizualny jest
taki sam, a kod
dokumentu znacznie
się uprościł

Nie tylko elementy można grupować, lecz także atrybuty. Na przykład długą definicję

body

body {font-family: arial, sans-serif; font-style: normal; font-size: 12pt; line-
height: 14pt; font-weight: bold}

można zapisać w następujący sposób:

body {font: bold 12/14pt arial, sans-serif}

Jakie są najczęściej stosowane atrybuty tekstu?

Listę najczęściej stosowanych atrybutów tekstu prezentuje tabela 4.1.

Tabela 4.1. Podstawowe atrybuty umożliwiające zdefiniowanie stylu tekstu.

Atrybut

Przykład definicji

color:

–

kontroluje kolor
czcionki.

h1 {color: #00ff00}

– tutaj kod koloru podany jest w zapisie

szesnastkowym. Ostateczna postać kodu koloru w HTML-u to trzy liczby
szesnastkowe połączone razem i poprzedzone znakiem #.

h2 {color: red}

– jeśli korzystasz ze standardowych kolorów, możesz

posługiwać się ich nazwami, np.

red

blue

white

czy

green

, zamiast

kodami heksadecymalnymi.

p {color: rgb(0,0,255)}

– każdemu kolorowi można

przyporządkować kod

RGB

w postaci trzech liczb z przedziału 0-255. Liczby

określają natężenie barw podstawowych: czerwonej, zielonej i niebieskiej.
W tym zapisie kod

0 0 0

odpowiada kolorowi czarnemu, a

255 255 255

białemu, kolor żółty to 255 255 0, a niebieski 0 0 255. RGB daje do
dyspozycji 16,7 milionów kolorów (24 bity).

font-family:

–

kontroluje krój
czcionki.

{font-family: times}

– podano nazwę czcionki Times,

{font-family: times , arial}

– w tym przypadku podana została

nazwa czcionki wraz z nazwą czcionki alternatywnej,

{font-family: serif}

– tu wskazano rodzinę czcionek, dzięki czemu

przeglądarka zastosuje czcionkę, której przynajmniej podstawowe atrybutu
odpowiadają Twojemu wyborowi.

font-size:

rozmiar czcionki.

{font-size: 12pt}

– w tej definicji rozmiar podany jest w punktach

drukarskich. Jest to standard najczęściej stosowany.
Rozmiar można podawać w punktach (

), pikselach (

), calach (

centymetrach (

) i w procentach (

font-style:

określa styl
tekstu.

{font-style: italic}

– definiuje tekst pisany kursywą.

{font-style: normal}

– przywraca ustawienia domyślne.

{font-style: oblique}

– wprowadza pochylenie odmiany prostej danej

czcionki.

font-weight:

określa grubość
czcionki.

{font-weight; bold}

– definiuje czcionkę pogrubioną (do dyspozycji

masz tu jeszcze atrybuty takie jak:

extra-light

demi-light

medium

extra-bold

oraz

demi-bold

text-
decoration:

umożliwia
określenie
efektów
dodatkowych.

{text-decoration: none}

– brak efektów.

{text-decoration: underline}

– podkreślenie.

{text-decoration: italic}

– kursywa.

{text-decoration: line-through}

– przekreślenie.

line-height:

definiuje
wysokość
wiersza.

p {line-height: 12pt}

Odstępy między wierszami w akapicie można podawać w punktach,
pikselach, calach, centymetrach i w procentach, podobnie jak wielkość
czcionki.

Jak definiować marginesy, wcięcia i wyrównanie tekstu?

Oto kolejna porcja atrybutów – grupa zgromadzona w tabeli 4.2 służy do określenia marginesów,
sposobów wyrównania oraz wcięć.

Tabela 4.2. Atrybuty formatowania akapitu.

Atrybut

Przykład definicji

margin-left

–

określa szerokość
lewego
marginesu.

{margin-left: 2cm}

– margines wynosi 2 cm.

Szerokość marginesu można podawać w punktach (

), pikselach (

calach (

), centymetrach (

) i w procentach (

margin-right

–

określa szerokość
prawego
marginesu

{

margin-right: 2in

} – tu ustawiono margines równy 2 cale. Szerokość

marginesu można podawać w punktach (

), pikselach (

), calach (

centymetrach (

) i w procentach (

margin-top

–

ustawienie
marginesu
górnego.

{

margin-top: 20pt

} – margines górny wynosi 20 punktów.

Jednostki są takie same jak w przypadku marginesów bocznych.

text-indent

–

ustawienie
wcięcia. Jednostki
takie jak dla
marginesów.

{

text-indent: 0.5in

} – wcięcie o głębokości 0.5 cala. Internet Explorer

dopuszcza wcięcia ujemne – wysunięcia.

text-align

–

{

text-align: right

} – tekst zostanie wyrównany do prawego marginesu.

opcja wyrównania
tekstu.

Atrybut może przyjmować wartości:

left

(do lewej),

center

(wyśrodkowanie),

right

(do prawej) i

justify

(do obu marginesów).

Atrybuty z tabeli 4.2 pozwalają kontrolować marginesy, wcięcia i wyrównanie tekstu – decydują więc o
wyglądzie akapitu.

Jak w praktyce zastosować wszystkie zdobyte informacje o stylach CSS?

Aby sprawdzić w praktyce zdobytą wiedzę, zacznij od przygotowania dokumentu pozbawionego
formatowania. Zobaczymy jak wygląda w przeglądarce i zastanowimy się nad sposobami sformatowania
go przy użyciu arkuszy stylów CSS.

Otwórz w edytorze dokument

mojastrona.html

– jak pamiętasz, zawiera on podstawowy kod

dokumentu html – i dodaj w nim nagłówki oraz akapity tekstu, tak jak na wydruku 4.15. Zapisz plik, na
przykład pod nazwą

nostyle.html

, i wyświetl go w przeglądarce (patrz rysunek 4.14).

Wydruk 4.15. Dokument html, w którym nie są stosowane arkusze stylów

<html>

<head>

<title>Tu nie stosujemy arkuszy stylów!</title>

</head>

<h1>Windows XP!</h1>

<h2>Co będzie dalej?</h2>

<p>Już w tym roku czeka nas rewolucja w licencjonowaniu oprogramowania,
zapowiadana przez firmę Microsoft w związku z premierami jednych z
najważniejszych produktów przez nią sprzedawanych - systemu operacyjnego

Windows XP</A> oraz pakietu biurowego <A href="Office_XP.html" title="Nowy
pakiet Office.">Office XP</A>.</p>

<p>Pomysłem Billa Gatesa na ukrócenie piractwa i zmniejszenie strat firmy jest
obowiązkowa telefoniczna rejestracja produktu przy każdej jego instalacji.
Pomyślmy teraz, jak zareaguje rynek na taką sytuację. Czy nagle półki sklepów
zostaną ogołocone z pudełek z programami ze znakiem Microsoft?</p>

</body>

</html>

Rys. 4.14.

W tym dokumencie
nie są stosowane
style CSS

Zawartość dokumentu z rysunku 4.14 jest czytelna, aczkolwiek wygląda nieatrakcyjnie. Zajmijmy się więc
jej sformatowaniem. Wykorzystamy tu podstawowe informacje odnośnie formatowania czcionki, akapitu i
tła dokumentu html.

Powróćmy do pliku

nostyle.html

(patrz wydruk 4.15) i zdefiniujmy w nim osadzony arkusz stylów,

który będzie formatował tło i marginesy strony, nagłówki tekstu oraz sam tekst. Wstaw więc w sekcji

head

element

style

ujęty w znacznikach komentarza html i wprowadź odpowiednie definicje formatowania

wymienionych elementów strony.

Pamiętaj, że na ekranie lepiej prezentuje się strona WWW, w której jest dużo wolnej przestrzeni, marginesy
nie powinny więc być symboliczne. Oto przykładowa definicja stylów dla sekcji

body

body {background-color: yellow; margin-left: 3cm; margin-right:3cm; margin-top:
1cm}

Wprowadza ona kolor tła – jeśli chciałbyś, by tło było inne, wróć do serii przykładów definiowania tła
strony z wcześniejszej części rozdziału, oraz marginesy – w tabeli 4.2 znajdziesz wyjaśnienia stosowanych
atrybutów oraz inne sposoby formatowania akapitu.

W kolejnym kroku zajmiemy się nagłówkami. Pogrupujemy elementy, do których zastosowane zostanie to
samo formatowanie:

h1, h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal}

oraz dodamy definicje specyfikujące właściwości o różnych wartościach:

h1 {font-size: 20pt; text-align: left}

h2 {font-size: 14pt; text-align: right}

Następny etap to styl akapitu. Określimy krój czcionki, jej styl i rozmiar oraz wysokość wiersza – inne
właściwości znajdziesz w tabeli 4.1:

p {font-family: goudy, times, serif; font-style: normal; font-size: 12pt; line-
height: 16pt}

Aby zastosować do akapitów różne sposoby wyrównania, możesz skorzystać z klas – zajmowaliśmy się już
takim rozwiązaniem tej kwestii – lub użyć w elemencie

stylu wpisanego:

Możesz także inaczej sformatować połączenia, na przykład pozbawiając je domyślnego podkreślenia, w
zamian stosując czcionkę pogrubioną (już najwyższa pora, by zacząć mówić o połączeniach – poświęcony
jest im rozdział 6.):

a {text-decoration: none; font-weight: bold}

Wydruk 4.16 prezentuje kod html naszego dokumentu, w którym uwzględnione zostały wszystkie
omawiane zmiany. Po sformatowaniu dokument prezentuje się zupełnie inaczej. Aby się o tym przekonać,
zapisz go i obejrzyj w przeglądarce (patrz rysunek 4.15).

Wydruk 4.16. Dokument html, w którym sformatowano tekst i tło przy wykorzystaniu arkuszy stylów

<html>

<head>

<title>Style tekstu</title>

<style>

<!--

body {background-color: yellow; margin-left: 3cm; margin-right:3cm; margin-top:
1cm}

h1, h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal}

h1 {font-size: 20pt; text-align: left}

h2 {font-size: 14pt; text-align: right}

p {font-family: goudy, times, serif; font-style: normal; font-size: 12pt; line-
height: 16pt}

a {text-decoration: none; font-weight: bold}

-->

</style>

</head>

<body>

<h1>Windows XP!</h1>

<h2>Co będzie dalej?</h2>

<p style="text-align:left">Już w tym roku czeka nas rewolucja w licencjonowaniu
oprogramowania, zapowiadana przez firmę Microsoft w związku z premierami jednych
z najważniejszych produktów przez ni± sprzedawanych - systemu operacyjnego <A
href="Windows_XP.html" title="System Windows XXI wieku.">Windows XP</A> oraz
pakietu biurowego <A href="Office_XP.html" title="Nowy pakiet Office.">Office
XP</A>.</p>

<p style="text-align:right">Pomysłem Billa Gatesa na ukrócenie piractwa i
zmniejszenie strat firmy jest obowiązkowa telefoniczna rejestracja produktu przy
każdej jego instalacji. Pomyślmy teraz, jak zareaguje rynek na taką sytuację.
Czy nagle półki sklepów zostaną ogołocone z pudełek z programami ze znakiem
Microsoft?</p>

</body>

</html>

Rys. 4.15.

Oto dokument po
dodaniu
formatowania za
pomocą stylów
CSS

Pomyśl, jak prosta teraz będzie modyfikacja formatowania, nawet jeśli dokument znacznie się rozrośnie!

Najważniejsze informacje

Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu
wyświetlania elementów HTML. Pozwalają korzystać ze stylów złożonych, które przeglądarka
zinterpretuje w określonym porządku zwanym kaskadą.

Arkusze stylów mogą być stosowane w odniesieniu do konkretnego elementu html – wówczas
mówimy o stylu wpisanym, w odniesieniu do całego dokumentu html – takie arkusze stylów
nazywa się osadzonymi, lub mogą rezydować w pliku zewnętrznym – wtedy jest to zewnętrzny
lub łączony arkusz stylów.

Atrybut

style

pozwala zastosować arkusz stylów do konkretnego elementu. Ogólna postać stylu

wpisanego jest następująca:

Styl wpisany jest wprowadzany w wybranym znaczniku i nie ma wpływu na pozostałe znaczniki.

Osadzony arkusz stylów to definicja stylu umieszczona między znacznikami

Element

style

powinien znaleźć się w nagłówku dokumentu:

Selektorem nazywa się definiowany znacznik czy też element, właściwość to jego atrybut.
Właściwość i wartość rozdzielone są dwukropkiem oraz zawarte w nawiasach klamrowych.

Aby zdefiniować w definicji stylu kilka właściwości, należy je rozdzielać średnikami. Na
przykład:

p {text-align: center; color: red}

Znaczniki komentarza html obejmują wszystkie znaczniki i właściwości

CSS

– dzięki temu

przeglądarki, które nie potrafią obsługiwać arkuszy stylów, potraktują kod jako komentarz.

W definicji stylu elementy (inaczej selektory) można grupować. Selektory w grupie oddzielane
są przecinkami. Na przykład:

h1, h2 {color: red}

Atrybut

class

pozwala zdefiniować różne style dla tego samego elementu – inaczej mówiąc

pozwala zdefiniować klasy stylu.

Klasa to szeroko zdefiniowany styl, który określa właściwości dla pewnych lub wszystkich
elementów dokumentu.

Ogólna postać definicji klasy jest następująca:

element.nazwa_klasy{właściwość:

wartość}

Nazwy klas mogą być dowolne, nie należy jednak stosować w nich polskich liter.

W definicji klasy można pominąć nazwę selektora:

.nazwa_klasy{właściwość: wartość}

– co umożliwia stosowanie klasy do różnych elementów.

Pojedynczym wystąpieniom danego typu można narzucić styl korzystając z atrybutu

. Atrybut

ten powinien mieć jednoznaczną nazwę.

Atrybut

pozwala oznaczać elementy podobnie jak atrybut

class

–

jest czymś w rodzaju

identyfikatora elementów:

Ustawienia stylu, które będą stosowane do elementów oznaczonych atrybutem

identyfikuje się

nazwą atrybutu

poprzedzoną znakiem #, o tak:

#nazwa_id

Komentarze CSS są bardzo przydatne przy ewentualnej edycji arkusza stylów. Oto ich postać:

To jest komentarz CSS */

Zewnętrzny arkusz stylów rezyduje poza dokumentem html, w zewnętrznym pliku o rozszerzeniu
nazwy

.css

. W kodzie każdej ze stron korzystających z zewnętrznych arkuszy stylów musi

zostać zdefiniowane połączenie do pliku zewnętrznego, który je zawiera. Połączenie to definiuje
się za pomocą znacznika

<link>

, który umieszczany jest w sekcji

head

dokumentu

<head>

Plik

.css

można utworzyć w dowolnym edytorze. Plik nie powinien zawierać znaczników

HTML.

Element

span

jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku

znaków w obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać,
aby zastosować styl do większej sekcji dokumentu. Może ona zawierać elementy różnego typu –
na przykład tekst i listy.

Ogólna postać definicji stylu wykorzystującej element

span

jest następująca:

Bloki wydzielamy za pomocą pary znaczników

. Fragment dokumentu objęty

nimi można w swobodny sposób formatować za pomocą stylów. Wydzielone fragmenty mogą
zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe,
logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów.

Zazwyczaj przeglądarki wprowadzają łamanie wiersza przed i za fragmentem objętym
znacznikami

Rozdział 5.
Obrazy w dokumencie HTML

Gdzie wstawiać obrazy?

Strona bez obrazów to smutna strona. Nawet strony traktujące o super poważnej tematyce zyskują
na atrakcyjności, gdy znajdzie się na nich choćby malutki obrazek. Obrazy można wstawiać w
odrębnym akapicie, wewnątrz tekstu lub w obszarze nagłówka – wystarczy umieścić znacznik

<img>

wewnątrz odpowiedniego elementu. Jeśli chcesz, by obraz ubarwił nagłówek, umieść

znacznik

<img>

między znacznikami nagłówka.

Obrazy można wstawiać na stronie bezpośrednio lub zastępować je połączeniami prowadzącymi
do odpowiednich plików. W tym drugim przypadku mówimy o obrazach zewnętrznych. Mając do
dyspozycji połączenie czytelnik sam podejmuje decyzję, czy chce zobaczyć obraz.

Obraz może także stanowić tło strony, lecz tym nie będziemy się tutaj zajmować. W rozdziale 4.
znajdziesz parę przykładów stosowania obrazów jako tła.

Jaką postać ma element img?

Zacznij od tego, aby zobaczyć jak to robią inni. Przejrzyj zasoby sieciowe, wyświetl postaci
źródłowe stron WWW i przyglądnij się znacznikowi

<img

>, bowiem on właśnie pozwala na

wstawianie obrazów. Znacznik ten jest pusty – oznacza to, że nie posiada znacznika
zamykającego, ale ma szereg atrybutów, które kontrolują sposób prezentacji obrazu na stronie.
Atrybuty te zostały zgromadzone w tabeli 5.1. Najważniejszym z nich jest atrybut

src

. Umożliwia

on określenie ulokowania obrazu i zdefiniowanie jego nazwy. Wygląda to mniej więcej tak:

<img src="url">.

Dlaczego mniej więcej? Bo dokładna postać tego wyrażenia zależy od tego, gdzie umieściłeś
obraz, oraz od jego formatu (to znaczy typu pliku).

Co jest wartością atrybutu src?

Wartością atrybutu

src

jest adres URL, który określa ulokowanie obrazu – inaczej mówiąc jest to

adres, pod którym obraz jest dostępny. Jeśli więc obraz o nazwie

obraz.gif

jest przechowywany

w katalogu

images

witryny

www.mojastrona.com

, to bezwzględny adres URL będzie miał

postać

http://www.mojastrona.com/images/obraz.gif

. Adres względny zależeć będzie

natomiast od ulokowania pliku html. Więcej informacji na temat adresowania znajdziesz w
rozdziale 6. poświęconym połączeniom.

Jak przeglądarka zinterpretuje znacznik <img>?

Przeglądarka wstawi obraz w miejscu, w którym umieszczony został element

img

. Jeśli znacznik

<img>

zostanie umieszczony między dwoma akapitami (definiowanymi za pomocą elementów p),

to najpierw wyświetlony zostanie tekst pierwszego akapitu, potem obraz, a za nim tekst drugiego
akapitu (patrz wydruk 5.1 i rysunek 5.1).

Jeśli obraz się nie pojawia, sprawdź poprawność podanej nazwy, a jeśli plik nie znajduje się w tym
samym katalogu co strona, poprawność ścieżki dostępu.

Wydruk 5.1. Wstawiamy obrazy

<html>

<head>

<title>Zwierzaki</title>

</head>

<body>

<br><br>Do dziś nie wiadomo dokładnie kiedy i jak kot stał się
zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat
temu. Miało to miejsce w dolinie Nilu.</p>

</body>

</html>

Rys. 5.1.

Obraz wstawiono
między dwoma
akapitami tekstu

Jaki powinien być format wstawianych obrazów?

Skąd wziąć obrazy? Poszukaj ich w swoich zasobach, w sieci (pamiętając o prawach autorskich!)
lub zeskanuj coś – obrazy powinny być w formacie GIF lub JPEG (innymi słowy rozszerzenie
nazwy pliku powinno być

.gif

lub

.jpg

). Zapisz je w tym samym katalogu, w którym zapisany

jest plik html zawierający Twoją stronę – to uprości znacznie definiowanie atrybutu

src

lub w

osobnym katalogu, podrzędnym względem katalogu przechowującego pliki Twojej strony WWW
(patrz informacja zamieszczona powyżej).

Co to jest GIF?

Najpopularniejszym formatem plików graficznych do zastosowań w Internecie jest format

GIF

(Graphics Interchange Format). Obrazy

GIF

są interpretowane niemal przez wszystkie typy

przeglądarek (oczywiście zawsze są wyjątki).

Obrazy

GIF

najbardziej nadają się do szkiców i prostych ilustracji (do fotografii stosuj format

JPEG

, o którym później). Format

GIF

pozwala również wybrać liczbę kolorów. Pamiętaj, że im

więcej kolorów, tym większy plik. Pliki

GIF

można jednak poddawać kompresji. Inna zaleta

formatu

GIF

to możliwość zdefiniowania obrazu jako przeźroczystego.

Co to jest JPEG?

Drugim na liście formatów plików graficznych stosowanych w Internecie jest format

JPEG

(Joint

Photographics Experts Group). Format

JPEG

to najlepszy wybór dla prezentacji fotografii.

Stosowany do szkiców i prostych ilustracji spowoduje pojawienie się na obrazach rozmyć (naszą
one nazwę artefaktów), z których na pewno nie byłbyś zadowolony, oraz zupełnie zbędny przyrost
wielkości pliku. Za to fotografie zapisane w formacie

JPEG

wyglądają wspaniale.

Czy sam obraz wystarczy?

Sam obraz, nawet najwspanialszy, to za mało. Musisz pomyśleć o tych, którzy wyłączyli opcję
ładowania obrazów oraz tych, choć nielicznych, którzy nie korzystają z przeglądarek graficznych.
Jeśli wstawiasz w swoim dokumencie obrazy, powinieneś zaopatrzyć je w tekst alternatywny.
Informuje on użytkowników o treści obrazu, jeśli przeglądarka z jakichś względów go nie
wyświetla. Strona pozbawiona grafiki straci niewątpliwie na atrakcyjności, ale znacznie
ważniejsze jest to, że nie ucierpi przekaz informacji. Choć oglądający Twoją stronę nie będą
obrazów widzieć, dowiedzą się przynajmniej co przedstawiają.

Jak dodać tekst alternatywny?

Dodanie tekstu alternatywnego umożliwia atrybut

alt

znacznika <

img

>. Atrybut ten działa w ten

sposób, że wstawia na miejsce obrazu coś, co jest go w stanie zastąpić w tych przeglądarkach,
które nie mogą go obsłużyć (patrz rysunek 5.2) . Tekst ten jest przydatny także wówczas, gdy
przeglądarka wyświetla obrazy – nie zawsze bowiem są one oczywiste dla oglądającego (czy ktoś
sam domyśli się, że zwierzak na obrazie to Twoja maskotka?).

Rys. 5.2.

Jeśli przeglądarka
nie może
wyświetlić
obrazu, zastępuje
go tekstem
alternatywnym

Aby zaopatrzyć obraz w tekst alternatywny, wyświetl kod źródłowy tworzonej strony w oknie
edytora – możesz skorzystać z przykładu zaprezentowanego na wydruku 5.1. Zdefiniuj tekst
alternatywny opisujący obraz i dodaj do znacznika <

img

> atrybut

alt

. Przypisz mu jako wartość

tekst alternatywny:

<img src="images/lampart.gif" alt=”To jest mój malutki kotek :)”>.

Zapisz plik i zobacz jak wygląda w przeglądarce (patrz rysunek 5.3).

Rys. 5.3.

Obraz
zaopatrzono w
tekst alternatywny

Tekst alternatywny pojawi się nad obrazem, gdy przesuniesz nad niego wskaźnik myszki.

Jak wstawić obrazy w nagłówkach?

Wróćmy do naszej strony testowej o zwierzakach i dodajmy nagłówki anonsujące omawianą
tematykę. Duże zwierzaki prezentowane będą z pomocą nagłówka

, a dla małych

zarezerwujemy nagłówek

. Aby prezentacja lepiej przemawiała do wyobraźni, oprócz samego

tekstu, umieścimy w elementach

obrazy.

Wyświetl kod źródłowy tworzonej strony w oknie edytora. Umieść znaczniki <

img SRC="url">

w obrębie elementów

. Na wydruku 5.2 odpowiednie fragmenty kodu zaznaczono

czcionką pogrubioną. Zapisz plik i zobacz jak wygląda Twoja strona (patrz rysunek 5.4).

Wydruk 5.2. Wstawiamy obrazy w obszarze nagłówka

<html>
<head>
<title>Zwierzaki</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>

<body>

<p><b>Lwa</b>, <b>tygrysa</b>, <b>panterę</b>, <b>geparda</b> i
<b>jaguara</b> nazywamy <big>wielkimi kotami</big>.<br><br> Należą do
gromady ssaków, rzędu drapieżnych, rodziny kotowatych (<i>Felidae</i>).
Do tej rodziny należą też małe koty: <b>puma</b>, <b>ryś</b>,
<b>ocelot</b>, <b>serwal</b>. W sumie rodzina kotowatych
obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie

mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko
wielkie koty potrafią ryczeć.</p>

<!—tu wstawimy linię poziomą-->
<hr>

<h2 align="center"><img src="images/kot.gif" alt="Kotek" width="75"
height="75"> Koty małe</h2>

<p><b>Kot domowy</b> najprawdopodobniej pochodzi od dwóch gatunków: od
<b>kota nubijskiego</b> (<i>Felis silvestris lybica</i>) i od
<b>azjatyckiego kota stepowego</b> (<i>Felis silvestris ornata</i>).

<br><br>Do dziś nie wiadomo dokładnie kiedy i jak kot stał się
zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat
temu. Miało to miejsce w dolinie Nilu.</p>

</body>
</html>

Rys. 5.4.

Obrazy
umieszczono w
nagłówkach

Czy można wstawić obraz w akapicie?

Jeśli chcesz wstawić obraz w odrębnym akapicie, umieść znacznik <

img

> między znacznikami

Obraz może się także pojawić w akapicie zawierającym tekst. Jest wówczas traktowany dokładnie
tak samo jak sam tekst. Jeśli chcesz skorzystać z tej opcji, musisz zastanowić się nad kwestią
wyrównania obrazu względem otaczającego tekstu.

W jaki sposób zastosować do obrazu wyrównanie?

Korektę umiejscowienia obrazu w obszarze tekstu umożliwia atrybut

align

. Sprawdźmy jego

działanie na prostych przykładach. Na wydruku 5.3 znajdziesz akapity tekstu, w których
wstawiono element

img

stosując do niego atrybut

align

z różnymi wartościami:

bottom

middle

top

. Kontrolują one pionowe położenie obrazu względem tekstu, który znajduje się w

tym samym wierszu co obraz. Przeanalizuj ten kod i porównaj z zaprezentowanymi na rysunku 5.5
efektami działania.

Przećwicz sam wyrównywanie obrazów w tekście – wyświetl kod źródłowy tworzonej strony w
oknie edytora, wstaw element

img

w tekście akapitu, dodaj do znacznika

<img>

atrybut

align

przypisz mu różne wartości.

Wydruk 5.3. Wyrównujemy obraz względem tekstu otaczającego

<html>
<head>
<title>Sposoby wyrównania obrazu względem tekstu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<head>

<body>

<p>
Obraz
<img src ="images/kot.gif"
align="bottom" width="90" height="75">
w obrębie tekstu.
</p>

<p>
Obraz
<img src ="images/kot.gif"
align="middle" width="90" height="75">
w obrębie tekstu.
</p>

<p>
Obraz
<img src ="images/kot.gif"
align="top" width="90" height="75">
w obrębie tekstu
</p>

<p>Oto domyślny sposób wyrównania - odpowiada on wartości bottom:</p>

<p>
Obraz

<img src ="images/kot.gif"
width="90" height="75">
w obrębie tekstu.
</p>

<p>
<img src ="images/kot.gif"
width="90" height="75">
Obraz przed tekstem.
</p>

<p>
Obraz za tekstem

</body>
</html>

Rys. 5.5.

Oto różne
sposoby
wyrównywan
ia obrazu
względem
otaczającego
tekstu

Jak zdefiniować wyrównanie obrazu względem marginesu?

Sposób wyrównania obrazu względem marginesu także kontroluje się za pomocą atrybutu

align

Jeśli nadasz mu wartość

left

, obraz zostanie wyrównany do lewego marginesu, jeśli

right

przesunięty zostanie do prawego marginesu. Innymi słowy te dwie wartości umożliwiają
określenie relacji między obrazem i tekstem. Jeśli obraz po lewej stronie, to tekst po prawej i
odwrotnie. Tę relację określa się też mianem obłamywania tekstu.

Możesz też wymusić umieszczenie tekstu pod obrazem – skorzystaj w tym celu z atrybutu

clear

elementu

i przypisz mu wartość

all

. Szczegóły tej operacji poznasz analizując wydruk 5.4, a

efekty zobaczysz na rysunku 5.6.

Wydruk 5.4. Wyrównujemy obraz względem marginesów

<html>
<head>
<title>Sposoby wyrównania obrazu względem marginesu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<head>

<body>

<p>
<img src="images/kot.gif" alt="Kot" width="90" height="75"
align="left">Ten tekst pojawi się z prawej strony obrazu,

który zostanie wyświetlony przy lewym marginesie.
</p>
<br>
<br>
<p>

<img src="images/kot.gif" alt="Kot" width="90" height="75"
align="right">Ten tekst pojawi się z lewej strony obrazu,
który zostanie wyświetlony przy prawym marginesie.
</p>
<br>
<br>
<p>
<img src="images/kot.gif" alt="Kot" width="90" height="75"
align="left"><br clear="all">Aby wymusić umieszczenie tekstu pod obrazem,
skorzystaj z atrybutu <i>clear</i> elementu br i przypisz mu wartość
<i>all</i>, tak jak w tym przypadku.
</p>
</body>

</html>

Rys. 5.6.

Oto różne
sposoby
wyrównywan
ia obrazu
względem
marginesów

Jak dostosować rozmiary obrazu?

Jeśli uważnie analizowałeś kod z wydruków 5.3 i 5.4, zauważyłeś zapewne, że w znaczniku

img

znajdują się pewne dodatkowe atrybuty, o których nie było jeszcze mowy. To atrybuty

width

height

– definiują one szerokość i wysokość obrazu. Wartości tych atrybutów podaje się

pikselach lub w procentach wymiarów oryginalnych obrazu. W tej przykładowej definicji
znacznika

<img>

rozmiary obrazu zdefiniowano w pikselach. Na podstawie kodu z wydruku 5.5 i rysunku 5.7
możesz prześledzić, w jaki sposób ustawienia takie jak

width

height

wpływają na sposób

prezentacji obrazu.

Wydruk 5.5. Dostosowujemy rozmiar obrazu

<html>
<head>
<title>Dostosowywanie rozmiarów obrazu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<head>

<body>
<p>Tu szerokość i wysokość są równe 40:</p>
<p>
<img src="images/kot.gif" alt="Kot"
width="40" height="40">
</p>

<p>Tu szerokość i wysokość są równe 80:</p>
<p>
<img src="images/kot.gif" alt="Kot"
width="80" height="80">
</p>

<p>Tu szerokość i wysokość są równe 140:</p>
<p>
<img src="images/kot.gif" alt="Kot"
width="140" height="140">
</p>

</body>
</html>

Rys. 5.7.

Atrybuty
width i height
pozwalają
dostosować
rozmiar
obrazu

Jeśli musisz już zmieniać rozmiary obrazu, pamiętaj że lepiej jest zmniejszyć obraz niż
powiększać. Powiększanie prowadzi do utraty jakości obrazu.

Jak dodać wokół obrazu nieco wolnej przestrzeni?

Jeśli umieszczasz obraz bezpośrednio w tekście, warto pomyśleć o dodaniu wokół obrazu nieco
wolnej przestrzeni, aby tekst nie zlewał się z obrazem. Umożliwiają to dwa kolejne atrybuty
znacznika

<img>

vspace

hspace

. Pierwszy definiuje szerokość wolnego obszaru nad i pod

obrazem, a drugi wprowadza wolny obszar z prawej i lewej strony. Choć możesz jednocześnie
zdefiniować oba ustawienia, nie da się niestety wprowadzić wolnego obszaru tylko z jednej strony
obrazu. Oto postać znacznika <img> z atrybutami

vspace

hspace

Wolny obszar wokół obrazów także można zdefiniować korzystając z atrybutów

Cell Padding

Cell Spacing

(jeśli układ strony został oparty na tabeli) lub z kaskadowych arkuszy stylów.

Jak ważne jest oddzielenie obrazu od tekstu jest pokazuje rysunek 5.8. Po odsunięciu tekstu od
obrazu, strona prezentuje się znacznie lepiej.

Rys. 5.8.

Atrybuty
vspace i
hspace
pozwalają
dodać wokół
obrazu trochę
wolnej
przestrzeni –
u góry tekst
zlewa się z
obrazem; u
dołu całość
prezentuje się
znacznie
lepiej

Jakie są najczęściej stosowane atrybuty znacznika <img>?

Tabela 5.1 prezentuje niektóre z atrybutów, które można stosować ze znacznikiem

<img>

Tabela 5.1 Niektóre atrybuty znacznika

<img>

Atrybut

Opis

align=”left”

Obraz jest wyświetlany przy lewym marginesie,
a tekst pojawia się obok, w obszarze między
obrazem a prawym marginesem.

align=”right”

Obraz jest wyświetlany przy prawym
marginesie, a tekst pojawia się obok, w obszarze
między obrazem a lewym marginesem.

align=”top”

Kontrolują pionowe położenie obrazu względem
tekstu, który znajduje się w tym samym wierszu

align=”middle”

align=”baseline”

align=”bottom”

vspace=”piksele”

Odległość obrazu od tekstu w pionie

hspace=”piksele”

Odległość obrazu od tekstu w poziomie

longdesc=”url”

Pod wskazanym adresem URL umieszczono
długi opis obrazu.

height=”piksele|wartość%”

Określa wysokość obrazu w pikselach lub w
procentach rozmiaru oryginalnego.

widght=”piksele|wartość%”

Określa szerokość obrazu w pikselach lub w
procentach rozmiaru oryginalnego.

Najważniejsze informacje

Obrazy można wstawiać w odrębnym akapicie, wewnątrz tekstu czy nawet w obszarze
nagłówka.

Wstawianie obrazów umożliwia znacznik

<img

>. Znacznik ten jest pusty – oznacza to,

że nie posiada znacznika zamykającego, ale ma szereg atrybutów, które kontrolują
sposób prezentacji obrazu na stronie (patrz tabela 5.1).

Najważniejszym z atrybutów jest atrybut

src

. Umożliwia on określenie ulokowania

obrazu i zdefiniowanie jego nazwy:

Przeglądarka wstawi obraz w miejscu, w którym umieszczony został element

img

Najpopularniejszym formatem plików graficznych do zastosowań w Internecie jest
format

GIF

(Graphics Interchange Format). Obrazy

GIF

są interpretowane niemal przez

wszystkie typy przeglądarek. Drugim na liście formatów plików graficznych
stosowanych w Internecie jest format

JPEG

(Joint Photographics Experts Group). Format

JPEG

to najlepszy wybór dla prezentacji fotografii.

Umieszczając na stronie obrazy należy pamiętać o tekście alternatywnym. Informuje on
użytkowników o treści obrazu, jeśli przeglądarka obrazu z jakichś względów nie
wyświetla.

Dodanie tekstu alternatywnego umożliwia atrybutu

alt

znacznika <

img

Wyrównywanie obrazów w tekście i względem marginesów strony umożliwia atrybut

align

znacznika

<img>

. Odpowiednie wartości atrybutu podano w tabeli 5.1.

Rozmiary obrazu umieszczanego na stronie można dostosowywać. Służą do tego
atrybuty

width

height

– definiują one szerokość i wysokość obrazu. Wartości tych

atrybutów podaje się pikselach lub w procentach wymiarów oryginalnych obrazu.

Aby dodać wokół obrazu wolny obszar, należy skorzystać z atrybutów

vspace

hspace

znacznika

<img>

. Pierwszy definiuje szerokość wolnego obszaru nad i pod

obrazem, a drugi wprowadza wolny obszar z prawej i lewej strony.

Rozdział 6. Połączenia

Uniform Resource Locator

Co to jest URL?

Uniform Resource Locator (URL) to adres dokumentu (lub innych zasobów) w sieci WWW.
Ogólna postać adresu WWW, na przykład:

http://www.mojastrona.com/html/strona.htm

spełnia następujące reguły składni:

protokół://host.domena:port/ścieżka/nazwa_pliku

Co oznaczają poszczególne elementy adresu URL?

Nazwa protokołu określa typ usługi internetowej – w przypadku stron WWW jest to

http

. Inne nazwy to na przykład

file

ftp

gopher

news

telnet

Domena to nazwa domeny internetowej, na przykład

microsoft.com

Host to oczywiście host domeny. Domyślnym hostem dla

http

jest

www

:port

definiuje numer portu hosta – zazwyczaj go pomijamy. Domyślny numer dla

serwerów

http

to 80.

Ścieżka określa ścieżkę dostępu na serwerze. Jeśli nie jest podana, dokument musi
znajdować się w katalogu głównym witryny WWW.

Nazwa pliku definiuje nazwę dokumentu. Nazwa domyślna to

index.html

lub

default.asp

, co zależy od ustawień serwera sieciowego.

Ulokowanie dokumentu a ścieżka dostępu

Zrozumienie relacji między adresem lokalnym dokumentu, w którym połączenie jest tworzone, a
adresem dokumentu, do którego ono prowadzi, jest niezwykle istotne z punktu widzenia
zrozumienia procesu definiowania połączeń.

Jakie są rodzaje ścieżek dostępu?

Każda strona WWW ma swój unikatowy adres URL (ang. Uniform Resource Locator). Jednak w
przypadku połączeń lokalnych – a więc z dokumentu do dokumentu tej samej witryny – nie ma
potrzeby wprowadzania całego adresu URL. Wystarczy określić położenie pliku względem
dokumentu bieżącego lub względem katalogu głównego witryny.

Ścieżki dostępu mogą być więc następujące:

bezwzględne (np.

http:/www.magsoft.com.pl/~rsokol/nmr/index.html

)

względne

o zdefiniowane względem dokumentu (np.

katalog/katalog.html

)

o zdefiniowane względem foldera głównego (np.

/katalog/katalog.html

)

Co to jest adres bezwzględny?

Adres bezwzględny to po prostu pełny adres URL, wraz z nazwą protokołu. Jeśli więc odwołujesz
się do dokumentu na innym serwerze, musisz podać pełny adres. Lokalnie nie ma potrzeby
definiowania połączeń absolutnych – jest to wręcz szkodliwe.

Kiedy i jak korzystać z adresów względnych definiowanych względem dokumentu?

Adresy zdefiniowane względem dokumentu to najlepsze rozwiązanie dla prezentacji lokalnych.
Szczególnie wówczas, gdy dokumenty – bieżący oraz te, których prowadzą połączenia – znajdują
się w jednym folderze. Nawet jeśli są w innym, wystarczy wskazać hierarchię folderów startując
od bieżącego dokumentu.

Tak więc, w przypadku odwoływania się do dokumentu w tym samym folderze wystarczy podać
nazwę pliku. Jeśli odwołanie ma prowadzić do dokumentu w folderze podrzędnym, adres składa
się z nazwy foldera podrzędnego i nazwy pliku rozdzielonych prawym ukośnikiem.

Jak definiować adresy względne?

Oto przykłady adresów względnych:

Aby utworzyć połączenie prowadzące od pliku

a1.html

do pliku

a2.html

w tym

samym folderze A, wystarczy podać nazwę pliku:

a2.html

(patrz rysunek 6.1).

Rys. 6.1.

Połączenie z pliku

a.html

do pliku b.html
umieszczonego w folderze
podrzędnym B

Aby utworzyć połączenie z pliku

a.html

do pliku

b.html

(umieszczonego w folderze

podrzędnym B), zdefiniuj adres względny:

B/b.html

(patrz rysunek 6.2).

Rys. 6.1.

Połączenie z pliku

a.html

do pliku b.html
umieszczonego w folderze
podrzędnym B

Aby utworzyć połączenie od pliku

b.html

(folder podrzędny

) do pliku

a.html

(folder

nadrzędny

), zdefiniuj adres jako

../a.html

(../ oznacza przejście o poziom wyżej w

hierarchii folderów).

Rys. 6.2.

Połączenie z pliku

b.html

do pliku a.html
umieszczonego w folderze
nadrzędnym A

Aby utworzyć połączenie z pliku

c.html

(folder podrzędny

) do pliku

b.html

innym folderze podrzędnym, o nazwie

), zdefiniuj adres jako

../B/b.html

(

../

spowoduje przejście do foldera nadrzędnego, a

przejście w dół hierarchii, do foldera

podrzędnego

Rys. 6.3.

Połączenie z pliku

c.html

do pliku b.html – oba w
folderach podrzędnych
względem A

W przypadku przesuwania całej grupy plików, bez naruszania powiązań między nimi, połączenia
względne nie wymagają aktualizacji. Przesunięcie pojedynczych plików taką konieczność
spowoduje.

Co to są adresy względne definiowane względem foldera nadrzędnego?

W tym przypadku adres pliku to ścieżka dostępu od foldera nadrzędnego witryny do dokumentu.

Adres rozpoczyna się od ukośnika, który oznacza folder witryny. Adres tego rodzaju:

/A/a.html

jest adresem pliku

a.html

z foldera

, który jest folderem podrzędnym foldera całej witryny.

Korzystanie z tego typu adresów jest trudniejsze. Jeśli sprawia Ci ono kłopot, stosuj adresowanie
względem dokumentu.

Ten typ adresowania sprawdza się najlepiej, gdy pliki witryny są często przemieszczane. Jeśli
połączenia zostały zdefiniowane względem foldera prezentacji, zachowają swoją poprawność.

Połączenia definiowane względem foldera nadrzędnego są interpretowane przez serwery, a nie
przeglądarki.

Definiowanie połączeń

Połączenie to narzędzie nawigacji, które możesz wbudować w swoje strony, aby umożliwić
czytelnikom przemieszczanie się do innych miejsc na tej samej stronie, do innych stron w obrębie
prezentacji lub do zupełnie obcych, lecz ciekawych stron w sieci. Funkcję połączenia może pełnić
wyraz, fraza, a nawet obraz.

Jaki znacznik HTML umożliwia utworzenie połączenia?

Znacznik HTML, za pomocą którego tworzone jest połączenie nosi nazwę znacznika
zakotwiczenia i ma taką postać:

<a href=”url_dokumentu.html”>Tekst połączenia</a>

Znacznik ten oprócz atrybutu

href

może mieć także inne atrybuty.

Co umożliwiają połączenia?

Zanim zabierzemy się za definiowane połączeń, jeszcze kilka istotnych informacji na temat
połączeń. Ich możliwości są ogromne:

Połączenia mogą prowadzić do innych dokumentów, w tym również do obrazów, plików
dźwiękowych, sekwencji wideo.

Zakotwiczenia można definiować także w obrębie tej samej strony WWW (jeśli
oznaczysz w dokumencie cele, będziesz mógł sterować sposobem odbioru strony).

Dzięki połączeniom e-mail (które już poznałeś), ułatwisz użytkownikom nawiązanie
kontaktu.

Listy menu to nic innego jak listy połączeń stanowiące ciekawy element strony.

Połączenia skryptowe pozwalają przypisać obiektom określone zachowanie. Powodują
one wykonanie określonego kodu języka JavaScript.

Jak wygląda połączenie?

Wiesz to na pewno. Połączenia mają postać niebieskiego podkreślonego tekstu (w przypadku, gdy
są tekstowe), którego kliknięcie wywołuje określoną akcję – przejście do wskazanego miejsca.
Strona WWW, do której prowadzi kliknięte połączenie zostanie wyświetlona w bieżącym oknie
przeglądarki, chyba że ustawienia dodatkowe stanowią inaczej.

Na rysunku 6.4 pokazany jest przykład strony, która z racji funkcji zbudowana jest w znacznej
mierze z połączeń.

Rys. 6.4.

Oto portal
internetowy, w
którym połączenia
pełnią dominującą
rolę

Do tworzenia połączeń służy, jak się już dowiedziałeś, para znaczników

. Element

nazywa się zakotwiczeniem. Podstawowym jego atrybutem jest

href

– Hypertext REFerence.

Jak definiować atrybut href?

Wartością atrybutu

href

jest adres URL (Uniform Resource Locator). W najprostszej sytuacji,

gdy obie łączone strony znajdują się w tym samym katalogu, stosuje się tylko nazwę pliku.
Na przykład:

Wyświetl <a href="dane.html">dodatkowe informacje</a> na ten temat.

Znacznik

<a>

definiuje też styl – powoduje podkreślenie tekstu i zmianę jego koloru na niebieski.

Można go umieszczać w dowolnym elemencie HTML. Z oczywistych względów nie można
zagnieżdżać znaczników

<a>

w sobie.

Struktura adresu URL zgodna jest z formatami systemu UNIX. Oznacza to, że wszystkie nazwy i
ścieżki dostępu są czułe na wielkość znaku (za wyjątkiem nazw komputerów i adresów e-mail).

Aby utworzyć połączenie do pliku w katalogu podrzędnym bieżącego pliku, należy skorzystać z
prawego ukośnika, /, który umieszczany jest między nazwą katalogu a nazwą pliku. Oto przykład:

Lista

<a href="1999/wszystkie.html">moich publikacji wydanych w 1999r</a>.

Aby odwołać się do pliku w katalogu nadrzędnym, zastosujesz taką oto składnię:

Powrót do

<a href="../xxx.html">Spisu treści</a>.

W tym przypadku wykorzystywane są ścieżki względne. Ścieżki bezwzględne zawsze
rozpoczynają się od ukośnika, co różni je od ścieżek względnych. Po ukośniku pojawiają się
nazwy wszystkich katalogów, od katalogu najwyższego poziomu po nazwę pliku, do którego
tworzone jest łącze.

Adresowanie względne jest wygodniejsze i bezpieczniejsze – umożliwia swobodne przenoszenie
stron między katalogami i systemami.

Jeśli w adresie URL na końcu nie pojawia się nazwa pliku (a jedynie nazwa katalogu), serwer
będzie szukał pliku o nazwie domyślnej – najczęściej jest to plik index.html. Jeśli nie znajdzie
takiego pliku, zwróci listę plików w katalogu.

Do czego służy atrybut name?

Innym ważnym atrybutem elementu

jest atrybut

name

. Stosowany jest on do zdefiniowania

odnośnika:

<a name="słowniczek">Terminy i definicje</a>

Wartością tego atrybutu jest słowo kluczowe. W przeciwieństwie do połączeń, odnośniki nie są
widoczne na stronie. Żeby skierować połączenie na wybrany odnośnik, skorzystamy z elementu

<a>

o podobnej składni jak w przypadku zwykłych połączeń. Przed nazwą należy jednak dodać

znak #:

Patrz <a href="#słowniczek">Dodatek A</a>.

Zakotwiczenia o zdefiniowanych nazwach są często stosowane do utworzenia czegoś w rodzaju
„spisu treści strony WWW” – w poszczególnych sekcjach dokumentu umieszczane są
zakotwiczenia o zdefiniowanych nazwach, a na początku strony pojawiają się połączenia do
oznaczonych nazwami fragmentów.

Co to jest połączenie e-mail?

Specjalne połączenie – także je już poznałeś – umożliwia czytelnikowi przesłanie listu e-mail do
autora strony. Składnia jest tutaj następująca:

<a href="mailto:me@myserver.com">Wyślij do mnie list</a>

Czy można wskazać miejsce otwieranego połączeniem dokumentu?

Kliknięcie połączenia poprowadzi Cię do dokumentu, który jest dostępny pod adresem
wskazanym przez atrybut

href

. Dokument ten wyświetlony zostanie w bieżącym oknie Twojej

przeglądarki, zastępując wcześniejszą zawartość. Czy możemy to zmienić? Jak najbardziej. Służy
do tego atrybut

target

Atrybut ten może przyjmować jedną z czterech wartości:

_blank

_parent

_self

(jest to

wartość domyślna) lub

_top

. Szczegółowy opis wpływu poszczególnych ustawień znajdziesz w

dodatku A. Najczęściej wykorzystuje się wartość

_blank

, która pozwala otwierać nową stronę w

nowym oknie.

Jeśli chcesz otworzyć stronę w nowym oknie, postać kodu html jest następująca:

<a href="http://www.naszastrona.com/" target="_blank">Odwiedź tę
stronę!</a>

W dalszej części rozdziału poświęcimy atrybutom znacznika

<a>

więcej miejsca. Sprawdzimy

różne sposoby jego wykorzystania w dokumentach html.

Definiowanie połączenia do innej strony

Zaopatrzony we wstępne informacje na temat tworzenia połączeń możesz spróbować utworzyć
połączenie prowadzące ze strony głównej do innego dokumentu html.

Jak zdefiniować połączenie do innej strony tej samej witryny?

Witryna to zestaw kilku stron powiązanych ze sobą połączeniami. Jedna ze stron pełni w niej rolę
centrum dowodzenia – nazywamy ją stroną główną, ale wielu użytkowników stosuje też określenie
strona domowa. Zazwyczaj strona główna zawiera informacje ogólne, które rozwijane są na
stronach podrzędnych.

Aby zdefiniować połączenie spinające dwie strony, musimy więc zacząć od przygotowania dwóch
plików html. Wykorzystamy w naszych eksperymentach z połączeniami stronę o zwierzakach, z
poprzedniego rozdziału. To będzie strona główna. Strona podrzędna będzie zawierała dodatkowe
informacje na temat określony tekstem połączenia.

Przyjrzyj się postaci strony WWW i zastanów się, w jakich miejscach chciałbyś umieścić
połączenia (patrz rysunek 6.5).

Rys. 6.5.

Przekształcimy
w połączenia
nazwy
gatunków kotów
– będą
prowadziły do
stron
poświęconych
im konkretnie

Wybierz fragmenty tekstu, które w najbardziej reprezentatywny sposób będą charakteryzowały
punkt docelowy. W przykładzie przekształcimy w połączenia nazwy gatunków kotów, na razie
wyróżnione czcionką pogrubioną – połączenia te poprowadzą do stron poświęconych im
tematycznie.

Wyświetl w oknie edytora kod źródłowy swojej strony głównej – kod tego przykładowego
dokumentu znajdziesz w rozdziale 5., na wydruku 5.2. Zamień w nim wszystkie elementy

elementy

, zgodnie ze składnią:

<a href=”nazwa_dokumentu.html”>Tekst połączenia</a>

Oczywiście jeśli w swoim pliku nie stosowałeś znaczników

<b>

, obejmij znacznikami

żądany tekst.

Wartościami atrybutu

href

będą nazwy poszczególnych plików html, do których wiodą

połączenia (tak będzie, jeśli wszystkie podrzędne pliki html umieścisz w tym samym folderze, w
którym znajduje się plik strony głównej – patrz rozważania na temat adresowania, na początku
rozdziału). Przygotuj pliki html w taki sam sposób jak plik strony głównej i zapisz.

Zapisz kod strony głównej i sprawdź działanie połączeń wczytując stronę główną do przeglądarki i
klikając je (patrz wydruk 6.1 oraz rysunki 6.6 i 6.7).

Wydruk 6.1. Połączenia prowadzące ze strony głównej do stron podrzędnych

<html>

<head>

<title>Zwierzaki</title>

</head>

<body>

<p><a href="lew.html">Lwa</a>, <a href="tygrys.html">tygrysa</a>,

<a href="pantera.html">panterę</a>, <a href="gepard.html">geparda</a> i
<a href="jaguar.html">jaguara</a> nazywamy <big>wielkimi kotami</big>.

<br>

<br> Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych
(<i>Felidae</i>). Do tej rodziny należą też małe koty: <a hrefpuma,
<a href="rys.html">ryś</a>, <a href="ocelot.html">ocelot</a>,
<a href="serwal.html">serwal</a>. W sumie rodzina kotowatych obejmuje 40

gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są
zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty
potrafią ryczeć.</p>

<!—tu wstawimy linię poziomą-->

<hr>

<p><a href="kot_domowy.html">Kot domowy</a> najprawdopodobniej pochodzi
od dwóch gatunków: od
<a href="nubijski.html">kota nubijskiego</a> (<i>Felis silvestris
lybica</i>) i od
<a href="azjatycki.html">azjatyckiego kota stepowego</a> (<i>Felis
silvestris ornata</i>).

<br>

<br>Do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem

domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało
to miejsce w dolinie Nilu.</p>

</body>

</html>

Rys. 6.6.

Wszystkie
nazwy zostały
przekształcone
w połączenia do
innych
dokumentów
html tej samej
witryny

Rys. 6.7.

Kliknięcie
połączenia
powoduje
wyświetlenie w
oknie
przeglądarki
pliku
kot_domowy.ht
ml

Jak zdefiniować połączenie do zewnętrznej strony?

Połączenia do stron WWW znajdujących się na innych serwerach definiuje się korzystając z tego
samego elementu

. Cała tajemnica tkwi w adresie

url

, który musi być w tym przypadku pełny.

Jeśli więc chcesz umieścić na swojej stronie połączenie prowadzące do innej interesującej strony,
spoza Twojej witryny, musisz jako wartość atrybutu

href

podać adres bezwzględny witryny. Na

wydruku znajdziesz proste porównanie kodu html definiującego połączenie lokalne z
odpowiednim kodem dla połączenia zewnętrznego. Zwróć uwagę, że na ekranie nie ma różnicy
(patrz rysunek 6.8).

Wydruk 6.2. Połączenia lokalne i zewnętrzne

<html>

<head>

<title>Połączenia lokalne i zewnętrzne</title>

</head>

<body>

<p>

Ten fragment tekstu</a> to połączenie do innej strony tej samej witryny.

</p>

<p>

Ten fragment tekstu</a> to połączenie prowadzące do witryny Microsoft.

</p>

</body>

</html>

Rys. 6.8.

Połączenia
lokalne nie
różnią się
wyglądem od
zewnętrznych

Czy można dowiedzieć się pod jaki adres URL prowadzą połączenia?

Podglądając postać źródłową strony WWW dowiesz się jak zdefiniowano na niej połączenia. Jest
jednak prostsza metoda. Wystarczy spojrzeć na pasek stanu, z lewej strony (patrz rysunek 6.9).

Rys. 6.9.

Na pasku stanu
wyświetlany jest
adres URL
wskazywanego
myszką
połączenia

Jak wrócić do strony głównej?

Element

pozwala zdefiniować połączenie, które poprowadzi Cię do innego dokumentu html

Twojej witryny. A jak z niego wrócić?

Jeśli chcesz tworzyć poprawne technicznie strony WWW, nie możesz skazywać czytelnika
Twoich stron na korzystanie z przycisków nawigacyjnych przeglądarki. Zaplanowanie
odpowiedniego systemu nawigacji między stronami jest tym ważniejsze, że daje Ci on możliwość
sterowania sposobem przeglądania stron, co zwiększa prawdopodobieństwo skutecznego przekazu
informacji.

Co to oznacza? Oznacza mianowicie, że na wszystkich stronach witryny powinieneś wstawić
połączenia prowadzące do strony głównej, a w idealnym przypadku także do pozostałych stron.

Czy obraz może być połączeniem?

Jak wiesz, nie tylko tekst może zostać przekształcony w połączenie. Równie dobrze nadają się do
tego celu obrazy. Ikony nawigacyjne zamiast zwykłych połączeń na pewno uatrakcyjnią Twoje
strony. Mogą one mieć na przykład postać przycisków lub niewielkich obrazków – jest to kwestia
Twojej inwencji. Odpowiednie ikony znajdziesz wśród rysunków dołączonych do pakietu
Microsoft Office lub możesz je sam przygotować.

Posłużmy się takim obrazkiem, aby utworzyć graficzne połączenie pozwalające powrócić do
strony głównej.

Składnia wyrażenia przekształcającego obraz w połączenie jest podobna jak w przypadku tekstu:

Element

obejmuje tym razem znacznik

<img>

a nie tekst.

Przygotuj lub wybierz plik .GIF lub .JPG, który chcesz zastosować jako ikonę nawigacyjną.
Otwórz plik. Oddziel treść strony od menu ikon nawigacyjnych linią poziomą (użyj w tym celu
znacznika <hr>).

Dodaj na początku lub na końcu strony połączenie do strony głównej. Oto odpowiedni kod (patrz
wydruk 6.3):

Wydruk 6.3. Ikona nawigacyjna

<html>

<head>

<title>Kot domowy</title>

</head>

<body>

<p>KOT DOMOWY (Felis domestica) pochodzi od dzikich gatunków kotów (m.in.
od żbika). Istnieje wiele ras i odmian barwnych kotów, a główne rasy to:
kot syjamski — krótkowłosy o długiej, proporcjonalnej głowie z dużymi,
szeroko rozstawionymi uszami i skośnymi, niebieskimi oczami, oraz kot
perski — długowłosy o okrągłej, masywnej głowie z małymi, zaokrąglonymi
na końcach uszami i dużymi, okrągłymi, zwykle pomarańczowymi oczami.</p>

<p>Długość ciała kota to 70–80 cm, ogona 25–35 cm, masa ciała ok. 3–5 kg
(wyjątkowo nawet do 20 kg). Koty osiągają dojrzałość płciową w 6–10
miesiącu życia. Ruja występuje u kotek 2–3 razy w roku, a ciąża trwa ok.
60 dni. Zazwyczaj rodzi się od 4–8 młodych.

</p>

<hr>

<p>

Oto obraz, który pełni rolę połączenia powrotnego:

<a href="obraz1.html">

</a>

</p>

</body>

</html>

W tym przypadku kod został dodany na końcu strony. Zwróć uwagę, że obok ikony umieszczono
też tekst opisujący dokąd prowadzi obraz-połączenie. Taki tekst można także przekształcić w
połączenie. W naszym przykładzie ma on jedynie aspekt informacyjny. Ponieważ skorzystaliśmy z
obrazu, możemy też dołączyć dodatkowe informacje definiując za pomocą atrybutu

alt

tekst

alternatywny (patrz rysunek 6.10).

Rys. 6.10.

Ikona dodana na
końcu strony
pozwala powrócić
do strony głównej
bez konieczności
korzystania z
przycisków
nawigacyjnych
przeglądarki

Odnośniki

Jak już wspominałam, odnośniki – zakotwiczenia o zdefiniowanych nazwach – tworzy się przy
użyciu tego samego znacznika

<a>

, który poznaliśmy przy okazji połączeń. Zamiast atrybutu

href

stosowany jest tu atrybut

name

. Atrybut ten zawiera słowa kluczowe, które będą stanowiły

nazwę odnośnika:

<a name=”nazwa”>tekst</a>

Żeby skierować połączenie na wybrany odnośnik, musimy utworzyć „zwykłe” połączenie, z tym
że wartością atrybutu

href

jest w tym przypadku nazwa odnośnika poprzedzona znakiem

<a href=”#nazwa>inny tekst</a>

Jakie może być zastosowanie odnośników?

Zdarza się, że strona zawiera omówienie jakiegoś zagadnienia (jest na przykład instrukcją obsługi
lub zawiera wybrane fragmenty literackie). W takich obszernych tekstowo stronach przydatna jest
komunikacja wewnętrzna, która umożliwi czytelnikowi przechodzenie do wybranych tematów
oraz powrót.

W przełożeniu na język praktyki chodzi tu o umieszczenie na początku dokumentu czegoś w
rodzaju spisu treści strony, którego pozycje będą prowadziły do kolejnych fragmentów. Z tej
samej opcji można skorzystać definiując połączenie prowadzące na początek strony.

Jak zdefiniować odnośniki?

Utworzymy prosty plik, w którym zbudujemy spis treści strony. Na początku dokumentu pojawią
się połączenia prowadzące do umieszczonych gdzieś w tekście zakotwiczeń o zdefiniowanych
nazwach. Po przeanalizowaniu wydruku 6.4, bez trudu złapiesz, o co w tego typu konstrukcji
chodzi. Zapisz swój plik, wczytaj stronę do przeglądarki i sprawdź działanie odnośników (patrz
rysunek 6.11).

Wydruk 6.4. Definiujemy odnośniki

<html>

<head>

<title>Spis treści</title>

</head>

<body>

<p>

Do rozdziału 1.

</a>

</p>

<p>

Do rozdziału 2.

</a>

</p>

<p>

Do Rozdziału 3.

</a>

</p>

<p>

Do rozdziału 4.

</a>

</p>

<p>

Do rozdziału 5.

</a>

</p>

<p>

Do rozdziału 6.

</a>

</p>

<p>

Do rozdziału 7.

</a>

</p>

<p>

<a name="R1"><h2>Rozdział 1</h2></a>

<p>Ten rozdział zawiera bla bla bla bla</p>

<a name="R2"><h2>Rozdział 2</h2></a>

<p>Ten rozdział zawiera bla bla bla bla</p>

<a name="R3"><h2>Rozdział 3</h2></a>

<p>Ten rozdział zawiera bla bla bla bla</p>

<a name="R4"><h2>Rozdział 4</h2></a>

<p>Ten rozdział zawiera bla bla bla bla</p>

<a name="R5"><h2>Rozdział 5</h2></a>

<p>Ten rozdział zawiera bla bla bla bla</p>

<a name="R6"><h2>Rozdział 6</h2></a>

<p>Ten rozdział zawiera bla bla bla bla</p>

<a name="R7"><h2>Rozdział 7</h2></a>

<p>Ten rozdział zawiera bla bla bla bla</p>

</body>

</html>

Rys. 6.11.

Strona, na której utworzony
został spis treści – kliknięcie
pozycji spisu przeniesie Cię
do odpowiedniego rozdziału

Jak wykorzystać odnośniki do przechodzenia na początek strony?

Oczywiście w tym przypadku obowiązuje ten sam mechanizm. Spróbujmy jednak troszeczkę
utrudnić sobie życie i przygotujmy obraz-połączenie.

Scenariusz jest następujący: gdzieś na początku strony, na przykład w elemencie

przykładowym pliku jest on pierwszym elementem zawartości) umieścimy zakotwiczenie o
zdefiniowanej nazwie; na końcu strony wstawimy element a, w którym atrybut

href

ma wartość

odpowiadającą nazwie zakotwiczenia ze znakiem #. I to wszystko. Wydruk 6.5 zawiera przekład
tego, co powiedzieliśmy na język HTML. Odpowiednie fragmenty kodu zostały wyróżnione
czcionką pogrubioną. Pamiętaj, aby umieścić obraz stanowiący połączenie na początek strony w
odpowiednim folderze!

Wydruk 6.5. Powrót na początek strony

<html>

<head>

<title>Kot domowy</title>

</head>

<body>

<h1><a name="poczatek">KOT DOMOWY (Felis domestica)</a></h1>

<p>Pochodzi od dzikich gatunków kotów (m.in. od żbika). Istnieje wiele
ras i odmian barwnych kotów, a główne rasy to: kot syjamski - krótkowłosy
o długiej, proporcjonalnej głowie z dużymi, szeroko rozstawionymi uszami
i skośnymi, niebieskimi oczami, oraz kot perski - długowłosy o okrągłej,
masywnej głowie z małymi, zaokrąglonymi na końcach uszami i dużymi,
okrągłymi, zwykle pomarańczowymi oczami.</p>

<p>Długość ciała kota to 70-80 cm, ogona 25-35 cm, masa ciała ok. 3-5 kg
(wyjątkowo nawet do 20 kg). Koty osiągają dojrzałość płciową w 6-10
miesiącu życia. Ruja występuje u kotek 2-3 razy w roku, a ciąża trwa ok.
60 dni. Zazwyczaj rodzi się od 4-8 młodych.

</p>

<hr>

<p>

<hr>

<p>

Oto obraz, który jest połączeniem powrotnym:

<a href="obraz1.html">

</a>

</p>

<p>

Oto obraz, który prowadzi na początek strony:

<a href="#poczatek">

</a>

</p>

</body>

</html>

Rysunek 6.12 prezentuje nasz nowy element nawigacji w obszarze strony.

Rys. 6.12.

Strona, na której utworzony
został spis treści – kliknięcie
pozycji spisu przeniesie Cię
do odpowiedniego rozdziału

Więcej o obrazach pełniących funkcję
połączeń

Ja wykorzystać ikony do prezentacji obrazów?

Często na stronie umieszcza się ikonę obrazu – obrazek o niewielkich rozmiarach, i konfiguruje ją
jako połączenie prowadzące do zewnętrznego pliku zawierającego obraz. Zmniejsza to rozmiar
strony, skraca czas jej ładowania i daje czytelnikowi swobodę w podejmowaniu decyzji odnośnie
ściągania pliku.

Jeśli chciałbyś skorzystać z tego sposobu, przygotuj miniaturę obrazu i zapisz – rozmiar takiego
pliku jest o jeden rząd wielkości mniejszy od pliku obrazu. Umieść ikonę na stronie i przekształć
ją w połączenie prowadzące do pliku zawierającego obraz w pełnych wymiarach. Można tu
wykorzystać w połączeniu atrybut target znacznika <a>, aby obraz oryginalny był wyświetlany w
nowym oknie. Kod strony przedstawiony jest na wydruku 6.6, a efekt jego działania na rysunku
6.13.

Wydruk 6.6. Stosowanie pomniejszonych obrazów jako połączeń do większych odpowiedników

<html>

<head>

</head>

<body>

<h2>Kot w worku</h2>

</body>

</html>

Rys. 6.13.

Ikona jest tu połączeniem
prowadzącym do
zewnętrznego pliku obrazu;
dzięki użyciu atrybutu target
z wartością _blank obraz jest
wyświetlany w nowym oknie

Jak dodać do ikon informacje o wielkości plików?

Do ikon zapraszających użytkownika do ściągnięcia obrazu można dołączyć informację o
wielkości pliku. Ta sama metoda może posłużyć do podłączania także innych plików,
niekoniecznie graficznych.

Wydruk 6.7. Informacja o plikach

<html>

<head>

</head>

<body>

<h2>Kot w worku</h2>

<ul>

<li>Kot (<a href="images/kot_2.gif">plik GIF; 1.03 MB</a>)

<li>Kot (<a href="images/kot_2.jpg">plik JPEG; 342 KB</a>)

</ul>

</body>

</html>

Rys. 6.14.

Miniatura może zachęcać do
wyświetlenia obrazu;
informacja o rozmiarze pliku
będzie cenna dla tych, którzy
chcą obraz ściągnąć

Co to są mapy odsyłaczy?

Mapy odsyłaczy to obrazy, które pełnią funkcje wielu połączeń jednocześnie. Kliknięcie zwykłego
połączenia – tekstowego czy też w postaci obrazu – prowadzi pod konkretny adres URL z nim
stowarzyszony. W przypadku obrazu zdefiniowanego jako mapa odsyłaczy, adres docelowy
będzie zależny od obszaru obrazu, w którym nastąpiło kliknięcie.

Mapy odsyłaczy działające po stronie klienta stanowią element specyfikacji HTML 3.2. Ze
względu na swoją naturę działają tylko w przeglądarkach graficznych. W tekstowych, na przykład
w przeglądarce Lynx, nie będzie ani obrazu, ani jego funkcji nawigacyjnych. Musisz więc
utworzyć ekwiwalent tekstowy obrazu, dzięki któremu użytkownicy przeglądarek tekstowych nie
stracą dostępu do strony.

Mapy odsyłaczy mogą z powodzeniem być stosowane jako centra nawigacji na stronach
głównych.

Jak przygotować mapę odsyłaczy?
Proces przygotowania mapy odsyłaczy działającej po stronie klienta składa się z następujących
etapów:

Wybór obrazu – obraz powinien zawierać odrębne wizualnie obszary, aby

definicje połączeń mogły być jednoznaczne.

Przygotowanie definicji mapy:

Naszkicuj obraz i podziel go ręcznie na obszary (obszar może być prostokątem,
wielokątem lub okręgiem).

Wyświetl obraz w oknie programu do obróbki grafiki (np. może być to program Paint
Shop Pro) i zanotuj współrzędne wskaźnika myszki w punktach krańcowych obszarów.
W przypadku prostokąta, będą to współrzędne lewego górnego wierzchołka i prawego

dolnego; w przypadku okręgu – współrzędne jego środka i długość promienia. Jeśli
obszar jest wielokątem, zanotuj współrzędne wszystkich wierzchołków.

Przygotuj adresy URL (lub odsyłacze działające w obrębie strony), z którymi
stowarzyszysz poszczególne obszary.

Umieszczenie mapy odsyłaczy w dokumencie HTML – służy do tego znacznik

map

>. Jego składnia jest następująca:

<map name="nazwa_mapy">współrzędne i adresy</map>

Wartością atrybutu

name

jest nazwa definicji mapy. Nazwa ta będzie wykorzystywana później w

celu stowarzyszenia obrazu z odpowiadającymi mu współrzędnymi i odwołaniami. Między
znacznikami

umieszczane są współrzędne każdego z obszarów mapy odsyłaczy

oraz adresy miejsc docelowych, do których wiodą poszczególne połączenia. Pojawiają się one w
obrębie kolejnego znacznika –

<area>

. Jego postać może być następująca:

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,xN,yN" href="URL">,

<area shape ="rect" coords="x1,y1,x2,y2" href="URL"> lub

Atrybut

shape

określa kształt obszaru. Jego wartości to "poly" (wielokąt), "rect" (prostokąt)

lub "circle" (okrąg).

Jak wygląda w praktyce proces definiowania mapy odsyłaczy?

Proces przygotowania obrazu jako mapy odsyłaczy jest naprawdę prosty. Spróbujmy prześledzić
go na konkretnym przykładzie.

Zacznijmy od wybrania obrazu zdefiniowaniu obszarów, które będą pełniły rolę łączy. Wybierz
odpowiedni obraz i przygotuj jego szkic na kartce. Może to być na przykład prosta struktura
Twojej witryny. Podziel obraz na reprezentatywne obszary (patrz rysunek 6.16.).

Rys. 6.15.

Orientacyjny podział rysunku
na obszary

Wyświetl obraz w programie umożliwiającym obróbkę grafiki (np. takim jak Paint Shop Pro).
Umieszczaj wskaźnik myszki w tych punktach obrazu, które definiują współrzędne obszarów – w

tym przypadku obszary mogą mieć postać okręgów (patrz rysunek 6.15). Gdy przesuniesz kursor
nad środek okręgu, w lewym dolnym rogu okna programu pojawiają się jego współrzędne x i y
(patrz rysunek 6.16) – zanotuj je. Trzeba jeszcze oszacować promień okręgu, a to można zrobić
umieszczając kursor nad krawędzią okręgu – uzyskamy w ten sposób wartość współrzędnej x1.
Różnica x-x1 to promień.

Rys. 6.16.

Rejestracja
współrzędnych
obszarów
mapy
odsyłaczy – w
lewym dolnym
rogu okna
programu
pojawiają się
współrzędne

Czas na umieszczenie definicji mapy odsyłaczy w kodzie dokumentu. Mapa, którą tutaj
preparujemy, świetnie nadaje się na centrum nawigacyjne (musisz ją jednak dopracować pod
względem graficznym). Wstawimy ją wobec tego na pustej stronie, utworzonej w oparciu o
szablon.

Zaczniemy od nagłówka

<h3>

informującego użytkownika co powinien zrobić, aby uzyskać

określone informacje, a za nim umieścimy obraz, który będzie pełnił rolę mapy odsyłaczy.

Dołącz do znacznika

<img>

atrybut

usemap

i przypisz mu jako wartość nazwę mapy

zdefiniowanej za pomocą znacznika <map name="nazwa_mapy"> – w naszym przykładzie
mapa nosi nazwę

strony

. Nazwa mapy musi być poprzedzona znakiem # (patrz wydruk 6.8).

Wydruk 6.8. Mapa odsyłaczy

<h3>Kliknij interesujący Cię obszar tematyczny:</h3>

<img src="images/strony.gif" width="584" height="245"

alt="mapa_witryny" usemap="#mapa_witryny" border="0">

W kolejnych wierszach kodu pojawią się definicje obszarów mapy (patrz wydruk 6.9). Obszary
jak pamiętasz są okręgami (a więc atrybut

shape

ma wartość

”circle”

). Wartością atrybutów

href

będą połączenia do innych stron witryny wiążących się z danym fragmentem obrazu.

Zamiast odwołań tego typu możesz tu umieścić odnośniki do sekcji danej strony.

Wydruk 6.9. Mapa odsyłaczy – c.d.

…

<area shape="circle" coords="186,44,45"

href="podstawy.html" alt="Informacje podstawowe">

<area shape="circle" coords="42,171,45"

href="Style.html" alt="Style i nie tylko..">

<area shape="circle" coords="186,171,45"

href="Skrypty.html" alt="Trochę skryptów">

<area shape="circle" coords="318,173,45"

href="DHTML.html" alt="Dynamiczny HTML">

…

Zapisz swój plik i przetestuj. Pełny kod html mapy odsyłaczy prezentuje wydruk 6.10. Na
rysunkach 6.17 i 6.18 możesz zobaczyć mapę w działaniu.

Wydruk 6.10. Pełny kod html mapy odsyłaczy

<html>

<head>

<title>Mapa odsyłaczy</title>

</head>

<body>

<h3>Kliknij interesujący Cię obszar tematyczny:</h3>

<img src="images/strony.gif" width="584" height="245"

alt="mapa_witryny" usemap="#mapa_witryny" border="0">

<area shape="circle" coords="186,44,45"

href="podstawy.html" alt="Informacje podstawowe">

<area shape="circle" coords="42,171,45"

href="Style.html" alt="Style i nie tylko..">

<area shape="circle" coords="186,171,45"

href="Skrypty.html" alt="Trochę skryptów">

<area shape="circle" coords="318,173,45"

href="DHTML.html" alt="Dynamiczny HTML">

</map>

</p>

</body>

</html>

Rys. 6.17.

Mapa odsyłaczy jest
gotowa do pracy – po
umieszczeniu
wskaźnika myszki nad
obszarem aktywnym,
forma wskaźnika
zmienia się w typową
dla połączeń

Rys. 6.18.

Po kliknięciu, w oknie
wyświetlony został
dokument, do którego
prowadziło połączenie
stowarzyszone z
obszarem aktywnym

Połączenia do archiwów FTP

Czasami można spotkać w Internecie strony, na których autorzy oferują własne programy lub pliki
mp3. Jeśli chciałbyś na swojej stronie umieścić połączenie do takiego archiwum, zrób to tak (patrz
wydruk 6.11):

Wydruk 6.11. Połączenie prowadzące do archiwum FTP

<html>

<head>

</head>

<body>

<h2>Archiwum FTP</h2>

<p>Jeśli interesują Cię moje pliki,

idź do

<a href="ftp://sokol.gliwicki.necik.pl">mojego archiwum FTP!</a>

</p>

</body>

</html>

Rysunek 6.19 pokazuje efekt działania kodu.

Rys. 6.19.

To połączenie prowadzi do
archiwum FTP

Najważniejsze informacje

Uniform Resource Locator (URL) to adres dokumentu (lub innych zasobów) w sieci
WWW.

Ogólna postać adresu WWW, na przykład:

http://www.mojastrona.com/html/strona.htm

spełnia następujące reguły

składni:

protokół://host.domena:port/ścieżka/nazwa_pliku

Połączenia lokalne – a więc z dokumentu do dokumentu tej samej witryny – nie
wymagają wprowadzania całego adresu URL. Wystarczy określić położenie pliku
względem dokumentu bieżącego lub względem katalogu głównego witryny.

Adres bezwzględny to pełny adres URL, wraz z nazwą protokołu.

Adresy względne mogą być zdefiniowane względem dokumentu
(np.

katalog/katalog.html

) lub względem foldera głównego (np.

/katalog/katalog.html

Adresy zdefiniowane względem dokumentu to najlepsze rozwiązanie dla prezentacji
lokalnych.

W przypadku gdy adresy względne są definiowane względem foldera nadrzędnego, adres
pliku to ścieżka dostępu od foldera nadrzędnego witryny do dokumentu.

Połączenie to narzędzie nawigacji, które możesz wbudować w swoje strony, aby
umożliwić czytelnikom przemieszczanie się do innych miejsc na tej samej stronie, do

innych stron w obrębie prezentacji lub do zupełnie obcych, lecz ciekawych stron w sieci.
Funkcję połączenia może pełnić wyraz, fraza, a nawet obraz.

Znacznik HTML, za pomocą którego tworzone jest połączenie nosi nazwę znacznika
zakotwiczenia i ma taką postać:

<a href=”url_dokumentu.html”>Tekst

połączenia</a>

Wartością atrybutu

href

jest adres URL.

Połączenie e-mail umożliwia czytelnikowi przesłanie listu e-mail do autora strony.
Składnia jest tutaj następująca:

<a href="mailto:me@myserver.com">Tekst</a>

Witryna to zestaw kilku stron powiązanych ze sobą połączeniami. Jedna ze stron pełni
rolę centralną – jest to tak zwana strona główna lub domowa. Zazwyczaj strona główna
zawiera informacje ogólne, które rozwijane są na stronach podrzędnych.

Połączenia są definiowane przy pomocy elementu

. Składnia wyrażenia jest

następująca:

<a href=”nazwa_dokumentu.html”>Tekst połączenia</a>

Wartościami atrybutu

href

są nazwy poszczególnych plików html, do których wiodą

połączenia.

Połączenia do stron WWW znajdujących się na innych serwerach definiuje się
korzystając z tego samego elementu

, lecz adres

url

, musi być w tym przypadku

bezwzględny.

Nie tylko tekst może zostać przekształcony w połączenie. Równie dobrze nadają się do
tego celu obrazy. Element

obejmuje w takim przypadku znacznik

<img>

a nie tekst.

Składnia wyrażenia przekształcającego obraz w połączenie jest podobna jak w
przypadku tekstu:

<a href=”url”><img src=”url_obrazu”

alt=”tekst_alternatywny></a>

Odnośniki – zakotwiczenia o zdefiniowanych nazwach – tworzy się przy użyciu tego
samego znacznika

<a>

, który służy do tworzenia połączeń. Zamiast atrybutu

href

stosowany jest tu atrybut

name

. Atrybut ten zawiera słowa kluczowe, które będą

stanowiły nazwę odnośnika:

<a name=”nazwa”>tekst</a>

Żeby skierować połączenie na wybrany odnośnik, należy utworzyć „zwykłe” połączenie,
z tym że wartością atrybutu

href

jest w tym przypadku nazwa odnośnika poprzedzona

znakiem

<a href=”#nazwa>inny tekst</a>

Mapy odsyłaczy to obrazy, które pełnią funkcje wielu połączeń jednocześnie. W
przypadku obrazu zdefiniowanego jako mapa odsyłaczy, adres docelowy będzie zależny
od obszaru obrazu, w którym nastąpiło kliknięcie.

Rozdział 7. Tabele HTML

Do czego służą tabele?

Tabele HTML pozwalają na sterowanie układem danych, tekstu, obrazów, połączeń, formularzy i
ich pól, a także innych tabel, przy pomocy wierszy i kolumn komórek. Każda tabela ma swój
podpis – definiuje go element

caption

– który pozwala na dołączenie krótkiego opisu zawartości

tabeli. Dłuższe opisy można dołączać korzystając z atrybutu

summary

Tabele języka HTML umożliwiają prezentację danych na stronach WWW oraz kontrolowanie
umiejscawiania elementów strony – tekstu, tekstu preformatowanego, obrazów, pól formularzy,
czy też innych tabel, poprzez umieszczanie ich w kolumnach lub wierszach tabeli. Unikaj jednak
stosowania tabel jako szablonu układu dokumentu – W3C, konsorcjum opracowujące standardy
języka HTML, zaleca stosowanie arkuszy stylów.

Jakie są elementy strukturalne tabeli?

W tabeli można wyróżnić trzy sekcje: nagłówka, stopki i treści. Umożliwiają to elementy

thead

tfoot

tbody

. Nadają one tabeli strukturę, a w najnowszych typach przeglądarek stwarzają

możliwość przewijania zawartości tabeli niezależnie od sekcji nagłówka i stopki. Opcja ta jest
szczególnie wygodna w przypadku długich tabel, bo opisy kolumn są zawsze wyświetlane na
ekranie.

Na narzucenie tabeli określonej struktury pozwala też opcja grupowania kolumn. Dzięki
specjalnym właściwościom elementów

colgroup

col

, HTML 4 pozwala też na stopniowe

wyświetlanie zawartości tabeli, bez konieczności czekania na jej pełne załadowanie.

Tabele mogą zawierać dane nagłówka – służy do tego element

– lub zwykłe dane – w tym

przypadku elementem podstawowym jest

. Komórki tabeli można „rozpinać” na wielu

wierszach i kolumnach, a każdą komórkę można zaopatrzyć w etykietę, co ułatwia przekazywanie
informacji użytkownikom z wadami wzroku i pozwala prezentować tabele w przeglądarkach o
ograniczonych możliwościach graficznych, na przykład zainstalowanych w telefonach
komórkowych.

Jak się zabrać do konstruowania tabeli?

Zanim napiszesz kod tabeli, pobaw się w konstruktora. Naszkicuj tabelę na papierze, zaznacz
komórki rozpięte na n wierszach i/lub kolumnach. Otwórz szablon strony w oknie edytora. Wpisz
kod tabeli, rozpoczynając od zewnętrznego znacznika

<table>

i dodając kolejne wiersze –

elementy

– a w wierszach komórki nagłówka – elementy th – oraz danych – elementy

.. Nie

zapomnij o znacznikach zamykających. Wydruk 7.1 prezentuje prosty schemat kodu tabeli –
skorzystaj z jego pomocy.

Wydruk 7.1. Podstawowy kod tabeli

<html>

<head>

<title>Tabela</title>

</head>

<body>

<caption>Tabela przykładowa</caption>

<tr>

<th>NAGŁÓWEK, komórka 1</th>

<th>NAGŁÓWEK, komórka 2</th>

</tr>

<tr>

<td>wiersz 1, komórka 1</td>

<td>wiersz 1, komórka 2</td>

</tr>

<tr>

<td>wiersz 2, komórka 1</td>

<td>wiersz 2, komórka 2</td>

</tr>

</table>

</body>

</html>

Ten kod pomoże nam rozszyfrować zagadnienia związane z tworzeniem tabel. Zapisz go na dysku
(na przykład pod nazwą

tabela.html

) i zobacz w przeglądarce jak wygląda przygotowana tabela

(patrz rysunek 7.1).

Rys. 7.1.

Tabela ma podpis –
umieszczony nad nią, oraz
wiersz nagłówka i dwie
komórki danych. Atrybut
border pozwolił na dodanie
obramowania – domyślnie go
nie ma

Jakie są funkcje poszczególnych elementów tabeli?

Element

table

to zasobnik przechowujący wszystkie elementy składowe tabeli. Atrybut

border

definiuje szerokość obramowania tabeli w pikselach. Jego wartość w tym przypadku to 1 –
oznacza to, że chcemy, aby obramowanie było wyświetlane. Wartość równa 0 to brak
obramowania. Jest to wartość domyślna, nie wymaga więc specyfikacji. Element

tworzy wiersz

– a każdy wiersz podzielony jest na komórki. Komórki to elementy

– zawierają one dane

nagłówka i dane tabeli.

Czy można zwiększyć nieco wolny obszar w obrębie komórek?

Przykładowa tabela nie wygląda najlepiej, a jednym z powodów tego stanu rzeczy jest zlewanie
się ze sobą zawartości i obramowania. Czy możemy temu zaradzić? Tak, bo mamy do dyspozycji
atrybut elementu

table

o nazwie

cellpadding

Jak kolosalne ma on znaczenie przekonasz się, gdy zastosujesz atrybut w kodzie naszej tabeli, tak
jak tutaj:

Oczywiście wartość atrybutu

cellpadding

może być dowolna. Na rysunku 7.2 możesz

sprawdzić, jak zmienił się wygląd tabeli.

Rys. 7.2.

Do elementu table dodano
atrybut cellpaddig

Czy można zwiększyć wolny obszar rozsuwając komórki?

Jeśli takie rozwiązanie nie wystarczy, masz do dyspozycji inną możliwość – rozsunięcie samych
komórek. Umożliwia to atrybut

cellspacing

, także dodawany do elementu

table

. Oto przykład

jego definicji:

Dodaj atrybut

cellspacing

o wartości 10 do kodu html tabeli i zobacz, co tym razem się stanie.

Komórki rozsuną się i tabela uzyska „lekki” wygląd (patrz rysunek 7.3).

Rys. 7.3.

Do elementu table dodano
atrybut cellspacing

Uzyskany efekt wizualny zależy w dużym stopniu od tła tabeli, co pokazuje rysunek 7.4.
Dobierając atrybuty

bgcolor=”kod_koloru”

– określa kolor tła, i

bordercolor=”kod_koloru”

– określa kolor obramowania, można uzyskać ciekawe efekty. Na

rysunku 7.4 w pierwszym przypadku atrybuty te dodano w elemencie

table

, w drugim

zdefiniowano tło w elementach

, ale można też zmieniać kolory pojedynczych komórek tabeli.

Na końcu tego rozdziału znajdziesz tabelę 7.1, w której wymienione zostały podstawowe atrybuty
elementów tabeli. Bardziej rozbudowany wykaz jest dostępny w dodatku A.

Rys. 7.4.

Kolor tła i obramowań także
wpływają na wizualny efekt
oddzielenia komórek

Jaka jest właściwie różnica między atrybutami cellpadding i cellspacing?

Rysunek 7.5 wizualizuje relacje pomiędzy zawartością komórek, odstępami między zawartością a
krawędziami (

cellpadding

) i między samymi komórkami (

cellspacing

Rys. 7.5.

Cellspacing, cellpadding a
zawartość komórek

Jak zdefiniować szerokość tabeli?

Szerokość tabeli można zdefiniować korzystając z atrybutu

width

. Jego wartość można podawać

w dwojaki sposób: w pikselach lub jako wartość procentową odległości między marginesami
lewym i prawym.

Jeśli więc w kodzie html przykładowej tabeli zdefiniujemy element

table

w taki oto sposób:

to spowoduje to, że tabela w oknie przeglądarki będzie miała szerokość równą połowie szerokości
jej okna. Sprawdź to na rysunku 7.6. Co więcej, relacja ta zostanie zachowana nawet wówczas,
gdy użytkownik zmieni rozmiary okna przeglądarki.

Rys. 7.6.

Szerokość tabeli została
zdefiniowana za pomocą
atrybutu width i stanowi 50%
szerokości okna

Jaki mamy wpływ na sposób wyrównania tekstu w komórkach?

Domyślnie przeglądarki wycentrowują zawartość komórek nagłówka (definiowanego za pomocą
elementu

). Dane komórek „zwykłych” (tych definiowanych za pomocą elementu

) są

natomiast wyrównywane względem lewej krawędzi komórki.

Zmianę ustawień domyślnych umożliwia atrybut

align

, który można dodawać do elementów

lub

. Dostępne wartości to

center

right

left

Na wydruku 7.2 przedstawiony został uaktualniony kod naszej tabeli. Między innymi do wierszy
danych dodano atrybut

align=”center”

. W jaki sposób to wpływa na sposób wyrównania

zawartości komórek możesz zaobserwować na rysunku 7.7.

Wydruk 7.2. Podstawowy kod tabeli rozbudowany o pewne atrybuty

<html>

<head>

<title>Tabela</title>

</head>

<body>

<caption>Tabela przykładowa</caption>

<tr>

<th>NAGŁÓWEK, komórka 1</th>

<th>NAGŁÓWEK, komórka 2</th>

</tr>

<td>wiersz 1, komórka 1</td>

<td>wiersz 1, komórka 2</td>

</tr>

<td>wiersz 2, komórka 1</td>

<td>wiersz 2, komórka 2</td>

</tr>

</table>

</body>

</html>

Rys. 7.7*.

Zawartość komórek danych
została wycentrowana

Czy można zmienić sposób wyrównania także w pionie?

Sposób wyrównania zawartości komórek można modyfikować także w pionie. Służy do tego
atrybut

valign

. Jest on stosowany z wartościami

top

middle

lub

bottom

i można go stosować

w każdej komórce lub wierszu.

Jak zdefiniować w tabeli pustą komórkę?

Większość przeglądarek nie wyświetli komórek tabeli, w których nie umieszczono danych.

Jeśli więc dodamy do kodu naszej przykładowej tabeli kolejne komórki danych, lecz będą wśród
nich puste:

<td>wiersz 1, komórka 1</td>

<td>wiersz 1, komórka 2</td>

<td>wiersz 1, komórka 3</td>

</tr>

<td>wiersz 2, komórka 1</td>

<td>wiersz 2, komórka 2</td>

<td></td>

</tr>

to przeglądarka wyświetli tabelę w niezbyt eleganckiej postaci (patrz rysunek 7.8). Zwróć uwagę,
że komórka nie ma obramowań, nie widać jej wcale.

Rys. 7.8.

Jeśli w tabeli jest pusta
komórka, przeglądarka

Aby temu zaradzić, należy umieszczać w „pustych” komórkach twarde spacje,

&nbsp

; o tak:

<td>wiersz 1, komórka 1</td>

<td>wiersz 1, komórka 2</td>

<td>wiersz 1, komórka 3</td>

</tr>

<td>wiersz 2, komórka 1</td>

<td>wiersz 2, komórka 2</td>

<td> </td>

</tr>

Teraz przeglądarka nie ma wyjścia i musi wyświetlić pustą komórek danych wraz z
obramowaniem (patrz rysunek 7.9).

Rys. 7.9.

Twarde spacje zmuszają
przeglądarkę do wyświetlenia
pustych komórek

Jak rozpiąć komórkę na kilku kolumnach?

Komórki rozpięte na kilku wierszach lub kolumnach można zaobserwować najczęściej w
nagłówkach. I tam są najbardziej przydatne.

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

kolumnach komórka jest rozpięta.

Komórki są rozpinane w dół i na prawo, a więc aby utworzyć komórkę rozpiętą na kilku
kolumnach, należy dodać atrybut

colspan

do komórki wysuniętej najbardziej w lewo, a w

przypadku rozpinania komórki na wierszach, atrybut

rowspan

powinien być dodany do komórki

pierwszej od góry.

Rozbudujmy więc nagłówek naszej przykładowej tabeli wykorzystując możliwość rozpinania
komórek, tak by uzyskać coś takiego, jak na rysunku 7.10.

Rys. 7.10.

Plan tabeli – nowa postać
nagłówka z komórką rozpiętą
na trzech kolumnach

Dodamy w nagłówku jeszcze jeden wiersz i w elemencie

umieścimy atrybut

colspan

Ponieważ chcemy rozpiąć komórkę na trzech kolumnach, atrybut ten musi mieć wartość 3.

Kod nagłówka tabeli jest teraz taki, jak na rysunku 7.11:

Rys. 7.11.

Nowa postać kodu html
nagłówka z komórką rozpiętą
na trzech kolumnach

W naszej tabeli można jeszcze dodać parę atrybutów zmieniających kolor tła wierszy. Finalny kod
html tabeli przedstawiony jest na wydruku 7.3.

Wydruk 7.3. Tabela, w której wiersz nagłówka rozpięty jest na trzech kolumnach

<html>

<head>

<title>Tabela</title>

</head>

<body>

<caption>Tabela przykładowa</caption>

<tr>

<th colspan="3" bgcolor="lightgreen">Bardzo ważny nagłówek!!!</th>

</tr>

<tr>

<th bgcolor="lightblue">NAGŁÓWEK, komórka 1</th>

<th bgcolor="lightblue">NAGŁÓWEK, komórka 2</th>

<th bgcolor="lightblue">NAGŁÓWEK, komórka 3</th>

</tr>

<td>wiersz 1, komórka 1</td>

<td>wiersz 1, komórka 2</td>

<td>wiersz 1, komórka 3</td>

</tr>

<td>wiersz 2, komórka 1</td>

<td>wiersz 2, komórka 2</td>

</tr>

</table>

</body>

</html>

Tabela, którą tworzy kod z wydruku 7.3 (patrz rysunek 7.12) odpowiada projektowi z rysunku
7.10 – porównaj sam.

Rys. 7.12.

Tabela, w której wiersz
nagłówka został rozpięty na
trzech kolumnach

Jak rozpiąć komórkę na kilku wierszach?

Przeanalizujmy jeszcze jeden przykład. Uwzględnia on 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 są oczywiście komórki rozpięte na wierszach i kolumnach.

Przeanalizuj kod źródłowy tabeli z wydruku 7.4 – bez trudu zorientujesz się, które fragmenty
definiują komórki rozpięte i skąd to wynika. Zapisz kod i wyświetl tabelę w przeglądarce (patrz
rysunek 7.13).

Wydruk 7.4. Rozbudowana tabela

<html>

<head>

<title>Tabela rozbudowana</title>

</head>

<body>

<caption align=bottom><b>Tabela opisująca schemat wydatków</b></caption>

<tr>

<th colspan="2">Wydatki</th>

<th rowspan="2">Liczba stałych<br>pracowników</th>

<th rowspan="2">Liczba<br>zleceń</th>

</tr>

<tr>

<th>Planowane</th>

<th>Rzeczywiste</th>

</tr>

<tr>

<th>Styczeń</th>

</tr>

<tr>

</tr>

<tr>

<th>Marzec</th>

</tr>

<tr>

<th>Kwiecień</th>

</tr>

</table>

</body>

</html>

Rys. 7.13.

Nieco bardziej
skomplikowana tabela –
przyda Ci się do
najróżniejszych prezentacji

Jak do tabeli zastosować style CSS?

Z pewną nieśmiałością opisywałam możliwość zmiany tła tabeli, wiersza czy komórki przy użyciu
atrybutu

bgcolor

. Przede wszystkim dlatego, że standard HTML 4.01 kładzie bardzo mocny

nacisk na stosowania formatowania za pośrednictwem stylów CSS. Cóż nam zostaje? Spróbować
zdefiniować arkusz stylów, który zajmie się wyglądem naszej tabeli.

Na pocieszenie powiem, że niemal wszystkie przeglądarki obsługują poprawnie atrybut

bgcolor

nie musisz więc z nim się całkowicie rozstawać

Zdefiniujmy style, które zostaną zastosowane w tabeli. Wydruk 7.5 prezentuje pełny kod tabeli
formatowanej przy pomocy kaskadowego arkusza stylówi. Arkusz CSS został zaznaczony
czcionką pogrubioną.

Wydruk 7.5. Kaskadowy arkusz stylów formatujący tabelę

<html>

<head>

<title>Tabela formatowana stylami CSS</title>

<style type="text/css">

<!--

table {

margin-left: -4%

font-family: sans-serif;

background: white;

border-width: 2;

border-color: white;

}

th { font-family: sans-serif; background: rgb(204, 204, 153) }

td { font-family: sans-serif; background: rgb(255, 255, 153) }

-->

</style>

</head>

<body>

<caption align=bottom><b>Tabela opisująca schemat wydatków</b></caption>

<tr>

<th colspan="2">Wydatki</th>

<th rowspan="2">Liczba stałych<br>pracowników</th>

<th rowspan="2">Liczba<br>zleceń</th>

</tr>

<tr>

<th>Planowane</th>

<th>Rzeczywiste</th>

</tr>

<tr>

<th>Styczeń</th>

</tr>

<tr>

</tr>

<tr>

<th>Marzec</th>

</tr>

<tr>

<th>Kwiecień</th>

</tr>

</table>

</body>

</html>

Efekt graficzny formatowania tabeli przy użyciu arkusza CSS prezentuje rysunek 7.14.

Rys. 7.14.

Tabela sformatowana przy
użyciu arkusza stylów CSS

A może jednak tabela bez obramowań?

Jak wspomniałam, o tym, czy obramowania będą wyświetlane, czy nie, decyduje atrybut

border

Jeśli więc nie chcesz widzieć obramowań, wystarczy, że w znaczniku

<table>

zdefiniujesz

border=”0”

cellspacing=”0”

, o tak:

Przypisanie wartości 0 atrybutowi

cellspacing

jest konieczne, aby zlikwidować odstępy między

komórkami, które choć niewielkie, są jednak widoczne.

W jakich przypadkach przydają się tabele bez obramowań?

Do czego może być przydatna tabela bez obramowań? A choćby do definiowania układu strony.
Lecz nie tylko. Czasami po prostu tak jest lepiej. Na rysunku 7.15 możesz popodziwiać naszą
tabelę właśnie bez obramowań – wcale nie wygląda gorzej.

Rys. 7.15.

Tabela bez obramowań

Czy w tabeli można umieścić inne elementy HTML?

Już wspominałam, że komórka może zawierać dowolne dane – tekstowe, liczbowe, łącza,
zagnieżdżoną inną tabelą, a także obraz. Wydruk 7.6 prezentuje kod tabeli, w której komórkach
zastały ulokowane inne elementy html:

<p>

<table>

<img>

<ul>

. To pierwszy krok do

zdefiniowania układu strony w oparciu o tabelę. Wystarczy, że zrezygnujesz z obramować (patrz
punkt wcześniejszy) i to wszystko.

Na rysunku 7.16 pokazana została tabela z umieszczonymi w niej elementami.

Wydruk 7.6. Tabela a inne znaczniki

<html>

<head>

<title>Tabela z mnóstwem innych rzeczy</title>

</head>

<body>

<tr>

<td>

<p>Tutaj pojawia się tekst.</p>

<p>I jeszcze jeden akapit tekstu...</p>

</td>

<td>W tej komórce zagnieżdżono inną tabelę!

<tr>

<td>AAAAAA</td>

<td>BBBBBB</td>

</tr>

<tr>

<td>CCCCCC</td>

<td>DDDDDD</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>Ta komórka zawiera listę.

<ul>

<li>Pozycja pierwsza</li>

<li>Pozycja druga</li>

<li>Pozycja trzecia</li>

</ul>

</td>

</tr>

</table>

</body>

</html>

Rys. 7.16.

Ta tabela zawiera tekst, listę,
inną tabelę oraz obraz

O czym trzeba pamiętać wstawiając w komórce tabeli obraz?

Jeśli decydujesz się umieścić w komórce obraz, użyj takiej postaci kodu:

Jest to ważne – umieszczenie znaczników

<td>

<img>

w osobnych wierszach może zaburzyć

umiejscowienie obrazu.

Jak zapobiec problemom z wyświetlaniem tabel w przeglądarkach?

Tabele nie są równie dobrze obsługiwane we wszystkich typach przeglądarek. Może się więc
zdarzyć, że zamiast wypieszczonej tabeli, na ekranie pojawi się kaszka. Można tego uniknąć,
aczkolwiek wymaga to bardzo pieczołowitego dopracowania układu tabeli. Jeśli umieścisz w
komórkach tabeli nagłówki i cytaty blokowe, w środowisku, w którym tabela nie jest obsługiwana,
tekst pojawi się w sposób uporządkowany i czytelny. Można też skorzystać ze znaczników <p>
lub <br> umieszczanych na końcu wybranych komórek, np.:

Tam, gdzie tabele są obsługiwane, te dodatkowe znaczniki będą ignorowane, natomiast tam, gdzie
są kłopoty z obsługą tabel, zadziałają złamania wiersza.

Pamiętaj o znacznikach zamykających </tr>, </th> i </td>. Pomimo, że są one opcjonalne, ich
brak może być przyczyną nieoprawnego wyświetlania tabeli w pewnych przeglądarkach.

Elementy konstrukcyjne tabeli

Tabela 5.1 prezentuje podstawowe znaczniki definiujące tabelę, ich funkcje oraz niektóre atrybuty,
które mogą Ci się najbardziej przydać. Szerszy wybór znajdziesz w dodatku A.

Tabela 5.1. Znaczniki tabeli i podstawowe atrybuty

Znaczniki

Funkcja znacznika i jego atrybuty

Tworzy tabelę – jest „opakowaniem” pozostałych elementów.
Domyślnie tabele nie mają obramowań.

Niektóre atrybuty:

cellspacing=”piksele”

wolny obszar między komórkami

align=”left|right”

sposób wyrównania tabeli

cellpadding=”piksele”

wolny obszar między krawędziami komórki a zawartością

bgcolor=”kod_koloru”

zmienia tło tabeli; wartością jest nazwa koloru lub liczba
szesnastkowa

background=”url”

width=”warto••%|piksele”

szerokość tabeli w procentach względem szerokości strony lub w
pikselach

height=”warto••%|piksele”

wysokość tabeli w procentach względem wysokości strony lub w
pikselach

Wiersz tabeli.

Niektóre atrybuty:

align="left|center|right|justyfy|char”

wyrównanie tekstu

bgcolor="rrggbb" (lub nazwa koloru)

kolor tła

bordercolor=="rrggbb" (lub nazwa koloru)

kolor obramowania

Komórka tabeli. Komórki umieszcza się między znacznikami
wiersza tabeli.

Niektóre atrybuty:

rowspan="n_wierszy"

rozpięcie komórki na n wierszach

colspan="n_kolumn"

rozpięcie komórki na n kolumnach

width=”wartość%|piksele”

szerokość komórki w procentach względem szerokości tabeli lub w
pikselach

Komórka nagłówka. Od komórki danych różni się tym, że
zastosowano w niej czcionkę pogrubioną i wycentrowanie.

Niektóre atrybuty:

rowspan="n_wierszy"

rozpięcie komórki na n wierszach

colspan="n_kolumn"

rozpięcie komórki na n kolumnach

width=”wartość%| piksele”

szerokość komórki w procentach względem szerokości tabeli lub w
pikselach

Podpis – informuje o zawartości tabeli. Podpis jest opcjonalny i
umieszcza się go w obrębie elementu <table>, przed definicjami
wierszy.

Atrybut:

align="top|bottom|left|right"

Stopka – utworzona podobnie jak nagłówek ze zgrupowanych
wierszy.

Nagłówek – tworzą go zgrupowane wiersze.

<tbody> </tbody>.

Obszar treści tabeli.

Najważniejsze informacje

Tabele HTML pozwalają na sterowanie układem danych, tekstu, obrazów, połączeń,
formularzy i ich pól, a także innych tabel, przy pomocy wierszy i kolumn komórek.

Tabele umożliwiają prezentację danych na stronach WWW oraz kontrolowanie
umiejscawiania elementów strony – tekstu, tekstu preformatowanego, obrazów, pól
formularzy, czy też innych tabel, poprzez umieszczanie ich w kolumnach lub wierszach
tabeli.

Element

table

to zasobnik przechowujący wszystkie elementy składowe tabeli: tr, th i

td. Element

tworzy wiersz – a każdy wiersz podzielony jest na komórki. Komórki to

elementy

– zawierają one dane nagłówka i dane tabeli.

Atrybut

border

definiuje szerokość obramowania tabeli w pikselach. Jego wartość

równa 1 oznacza to, że chcemy, aby obramowanie było wyświetlane. Wartość równa 0 to
brak obramowania. Jest to wartość domyślna, nie wymaga więc specyfikacji.

Atrybut cellpadding elementu table pozwala zwiększyć wolny obszar w obrębie
komórek. Oto przykładowa definicja:

Zwiększenie odstępu między komórkami umożliwia atrybut

cellspacing

, także

dodawany do elementu

table

. Oto przykład jego definicji:

Za pomocą atrybutów

bgcolor=”kod_koloru”

bordercolor=”kod_koloru”

można zdefiniować kolor tła i kolor obramowania. Atrybuty te można ~wstawiać w
elemencie

table

oraz innych w elementach

i td.

Szerokość tabeli można zdefiniować korzystając z atrybutu

width

. Jego wartość można

podawać w pikselach lub w procentach szerokości okna przeglądarki. Oto przykład:

Zmianę sposobu wyrównania zawartości komórek umożliwia atrybut

align

, który

można dodawać do elementów

lub

. Dostępne wartości to

center

right

left

Sposób wyrównania zawartości komórek można modyfikować także w pionie. Służy do
tego atrybut

valign

. Jest on stosowany z wartościami

top

middle

lub

bottom

można go stosować w każdej komórce lub wierszu.

Aby puste komórki tabeli zostały poprawnie wyświetlone, należy umieszczać w nich
twarde spacje,

&nbsp

; o tak:

Aby zdefiniować komórkę rozpiętą na kilku wierszach lub kolumnach, 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 kolumnach komórka jest
rozpięta.

Aby wyłączyć wyświetlanie obramowań, należy w znaczniku

<table>

zdefiniować

border=”0”

cellspacing=”0”

, o tak:

W przypadku umieszczania w komórce tabeli obrazu, należy zastosować taką oto
składnię:

Jest to ważne – umieszczenie znaczników

<td>

<img>

w osobnych wierszach może

zaburzyć umiejscowienie obrazu.

Rozdział 8.
Ramki i układy ramek

Ramki pozwalają wyświetlić w oknie przeglądarki więcej niż jeden dokument html. Każdy z
takich dokumentów jest prezentowany w odrębnej ramce, a poszczególne ramki są od siebie
niezależne. Wadą takiego sposobu prezentacji jest jedynie utrudnienie procesu drukowania strony.

Co to jest ramka?

Ramka to zdefiniowana przez swojego twórcę część okna przeglądarki, której to części
przypisano właściwości takie jak całemu oknu. Tak więc ramka może być przewijana niezależnie
od pozostałej zawartości okna. Można też swobodnie zmieniać jej rozmiary. Zawartość ramki
tworzy standardowy plik HTML.

Wszystkie cechy ramek określane są za pomocą atrybutów znacznika

<frame>

, generującego

ramkę. Lista podstawowych atrybutów została zebrana w tabeli 8.1. Rozszerzony zestaw
atrybutów znajdziesz w dodatku A.

Co to jest układ ramek?

Układ ramek to zestaw ramek wypełniający okno przeglądarki lub ramkę w „zewnętrznym”
układzie ramek. Poszczególne ramki układu mogą mieć swoje nazwy – dzięki temu można
tworzyć połączenia do ramek oraz stosować nazwy ramek w skryptach.

O ile strona WWW w klasycznej formie nie odbiega od tego, co zwykliśmy sobie wyobrażać pod
pojęciem strona, to prezentacja informacji w układzie ramek jest już czymś typowym dla aplikacji
komputerowych.

Zazwyczaj w układzie ramek jedna z ramek prezentuje informacje, a druga, często statyczna, jest
wyposażona w system nawigacji i stanowi coś w rodzaju systemu dowodzenia – tu decydujesz, co
będzie wyświetlane w pierwszej ramce. Wybranie połączenia w pierwszej ramce powoduje
uaktualnienie zawartości drugiej ramki. Strony WWW z ramkami są niewątpliwie bardziej
atrakcyjne wizualnie, lecz znacznie trudniejsze w projektowaniu i przygotowaniu.

Do czego służy znacznik <frameset>?

Układ ramek jest definiowany w pliku HTML, w którym element

body

zastąpiono

elementem

frameset

. W elemencie tym określane są następujące cechy układu ramek:

Sposób podziału okna na ramki.

Liczba wierszy lub kolumn.

Obszar ekranu przyporządkowany poszczególnym kolumnom/wierszom.

Do czego służy znacznik <frame>?

Znacznik

<frame>

definiuje dokument, który zostanie umieszczony w danej ramce. Wartością

jego atrybutu

src

jest adres

url

dokumentu html.

Jaka jest ogólna postać definicji układu ramek?

Ogólna postać definicji układu ramek przedstawiona została na wydruku 8.1. Przy tworzeniu
ramek należy pamiętać, że znaczniki

<body>

<frameset>

wzajemnie się wykluczają. Co

więcej, znacznik

nie może zawierać innych znaczników formatujących, połączeń

oraz dokumentów tekstowych.

Wydruk 8.1. Definicja układu ramek

<html>

<head>

<title>Tytuł strony</title>

</head>

...

</frameset>

</html>

Aby zdefiniować układ ramek, konieczne jest:

Określenie liczby ramek w układzie.

Przygotowanie plików, które wypełnią poszczególne ramki. Jeśli na przykład w układzie
będą trzy ramki, konieczne będą trzy pliki HTML (patrz rysunek 8.1).

Rys. 8.1.

Plik definiujący układ ramek
bazuje na plikach
definiujących zawartość
poszczególnych ramek

W jaki sposób można podzielić okno przeglądarki na pionowe ramki?

Znacznik

przyjmuje dwa atrybuty:

cols

rows

. Pierwszy z nich,

cols

, umożliwia

określenie liczby kolumn, na które zostanie podzielone okno przeglądarki – a więc liczby ramek
pionowych. Co więcej, atrybut ten pozwala także wskazać sposób przypisania kolumnom obszaru
okna.

Zobaczmy jak wykorzystać ten atrybut. Oto podstawowa definicja znacznika

atrybutem

cols

Liczba kolumn określana jest liczbą wartości atrybutu

cols

. Wartości te podawane są kolejno, z

przecinkami. Wartości – czyli szerokość ramki – można definiować w pikselach, w procentach
(względem całkowitej szerokości układu ramek) oraz za pomocą znaku „

” (w tym przypadku

przydzielana jest ramce maksymalna możliwa szerokość).

Jak podzielić okno na ramki o jednakowej szerokości?

Aby podzielić okno na ramki, o jednakowej szerokości, przypisz atrybutowi

cols

wartości

określone za pomocą symbolu ”*”. Jeśli więc układ ramek ma składać się z trzech identycznych
ramek, definicja elementu

frameset

będzie następująca:

Unikaj definiowania rozmiarów ramek w jednostkach bezwzględnych. Jeśli jednak musisz, to
wymiary pozostałych ramek określaj za pomocą gwiazdki, *, aby pozostała część ekranu została
wypełniona.

Jak w praktyce poradzić sobie z kodem html układu ramek?

Wydruk 8.2 pokazuje przykładowy podział okna przeglądarki na trzy pionowe ramki.

Wydruk 8.2. Układ trzech ramek pionowych

<html>

<head>

<title>Układ trzech ramek pionowych</title>

</head>

<frame src="ramka1.html

<frame src="ramka2.html

<frame src="ramka3.html

</frameset>

</html>

Ramki te możesz zobaczyć na rysunku 8.2. Ramka środkowa zajmuje 50% szerokości układu
ramek, a ramki skrajne po 25%.

Rys. 8.2.

Układ trzech ramek
pionowych

W każdej z ramek wyświetlany jest inny dokument html. Ich nazwy stanowią wartości atrybutu

src

poszczególnych znaczników

<frame>

. Na razie pliki

ramka1.html

ramka 2.html

ramka3.html

nie zawierają nic, oprócz podstawowego kodu HTML – są to po prostu klony

szablonu dokumentu HTML.

Jak wykorzystać taki pionowy układ ramek w praktyce?

Pionowy układ ramek może nam się przydać do stworzenia dokumentu html, w którym jedna
ramka będzie ramką nawigacyjną, a druga będzie prezentować wybrane w pierwszej tematy.

Ramkę nawigacyjną umieścimy po lewej stronie – to jest bardziej naturalny układ, częściej
spotykany – a jej zawartość będzie statyczna. Stanowić ją będzie zestaw połączeń, aczkolwiek
można go zastąpić mapą odsyłaczy. W ramka z prawej pojawią się dokumenty wskazane w ramce
nawigacyjnej. Skoro tak, to należałoby prawej ramce przyznać dominujący obszar okna. Niech
więc szerokości ramek stanowią odpowiednio 25 i 75% szerokości układu ramek.

Aby umożliwić komunikację między ramkami za pomocą połączeń, musimy zidentyfikować
ramki, nadając im nazwy, oraz wskazać cel połączeń – ramkę o określonej nazwie. Pierwsze
zadanie wykonamy korzystając z atrybutu

name

znacznika

<frame>

. Do realizacji drugiego

przyda się atrybut

target

znacznika

<a>

Zdefiniujmy więc odpowiednie pliki:

uklad_ramek.html

– jest układ dwóch pionowych ramek.

nawigacja.html

– ten plik zawierać będzie listę, której elementami będą połączenia.

strona.html

– to plik html drugiej ramki. Zostanie on załadowany do drugiej ramki

po wczytaniu układu ramek do okna przeglądarki.

pliki pozostałych dokumentów html – ich liczba będzie zależała od tego, ile połączeń

zdefiniujesz w ramce nawigacyjnej,

Wydruki 8.3, 8.4 i 8.5 stanowią przykłady takich plików. Wydruki zaopatrzone zostały w
komentarze html, które pomogą Ci prześledzić sposób działania kodu.

Wydruk 8.3. uklad_ramek.html

<html>

<head>

<title>Ramki w pionie</title>

</head>

</frameset>

</html>

Układ ramek z wydruku 8.3 to układ dwóch ramek. Za pomocą atrybutu

name

przypisano

pierwszej z ramek nazwę

nawigacja

, a drugiej

strona

Wydruk 8.4. Nawigacja.html

<html>

<head>

<title>Nawigacja</title>

</head>

<body>

<h3>Wybierz interesujący cię temat: </h3>

<ul>

<li><a href="strona.html" target="strona">strona 1</a>

<li><a href="strona1.html" target="strona">strona 2</a>

<li><a href="strona2.html" target="strona">strona 3</a>

</ul>

</body>

</html>

W tym pliku html został wykorzystany element

tworzący listę wypunktowaną. Elementami

listy są połączenia prowadzące do kolejnych plików html:

<li><a href="strona1.html" target="strona">strona 2</a>

Połączenia są definiowane za pomocą znacznika

<a>

, który przyjmuje dwa atrybuty:

href

target

. Wartością atrybutu

src

są adresy

url

plików wyświetlanych w szerszej z ramek Ramka

ta jest wskazywana jako cel połączeń za pomocą atrybutu

target

– jego wartością jest nazwa

szerszej ramki.

Atrybut

target

ma kluczowe znaczenie w definiowaniu systemu nawigacji między ramkami.

Ramkom warto nadawać nazwy, nawet jeśli w danej chwili nie korzystasz z nich. Jeśli
będziesz rozwijał swoją stronę WWW, może się to okazać bardzo przydatne. Istnieją jednak
nazwy, do których należy podchodzić z niezwykłą ostrożnością – nazwy te rozpoczynają się od
znaku podkreślenia i mają specjalne funkcje. Te wyjątkowe nazwy prezentuje tabela 8.2.

Wydruk 8.5. strona.html

<html>

<head>

<title>Strona</title>

</head>

<body>

<h2>To jest plik o nazwie strona.html.</h2>

<p>Jeśli chcesz wyświetlić inny plik, kliknij połączenie...</p>

</body>

</html>

Plik html z wydruku 8.5 to dowolny plik html. Może to być strona główna Twojej witryny. W
takim przypadku połączenia będą prowadziły do kolejnych stron witryny.

Na rysunku 8.3 możesz zobaczyć układ ramek, który właśnie skonstruowaliśmy. Klikając
połączenia w ramce nawigacyjnej, będziesz wyświetlał w ramce z prawej strony kolejne
dokumenty html składające się na Twoją witrynę.

Rys. 8.3.

Ramki dzielą okno w
pionie

Taki układ ramek można także wykorzystać do prezentacji „zewnętrznych” stron WWW. Wymaga
to jedynie odpowiedniego zdefiniowania adresów

url

przy wykorzystaniu adresowania

bezwzględnego (patrz rozdział Połączenia) (patrz rysunek 8.4).

Rys. 8.4.

Teraz połączenia
prowadzą do innych
witryn

Kiedy pojawiają się w ramkach paski przewijania, a kiedy nie?

Domyślnie ramki są automatycznie zaopatrywane w paski przewijania wtedy, gdy jest to
konieczne. Jeśli chciałbyś zablokować przewijanie zawartości ramki, umieść w znaczniku
<

frame

> atrybut

scrolling

i przypisz mu wartość

Czy użytkownik może zmieniać rozmiary ramek?

Ramki są oddzielane obramowaniem, z którego możesz skorzystać, aby zmienić zadane rozmiary
ramki. Złap za obramowanie oddzielające ramki i przeciągnij w odpowiadające Ci położenie.

Jak wyłączyć wyświetlanie obramowania?

Aby pozbyć się obramowań, skorzystaj z takiej definicji znacznika:

Wyłączenie wyświetlania obramowań ramek znacznie utrudni użytkownikowi zmianę rozmiarów
ramek. Nie jest on jednak w sytuacji beznadziejnej – nad obramowaniem, którego wyświetlanie
wyłączono, wskaźnik myszki zmienia postać (patrz rysunek 8.5).

Rys. 8.5.

Obramowania ramek
zostały ukryte. Zwróć
jednak uwagę na postać
wskaźnika myszki –
informuje ona, że tam jest
obramowanie

Jak podzielić okno przeglądarki w poziomie?

Drugim atrybutem znacznika

jest

rows

. Umożliwia on określenie liczby wierszy, na

które zostanie podzielone okno przeglądarki – a więc liczby ramek poziomych. Oto postać
definicji:

Unikaj stosowania absolutnych rozmiarów ramek. Jeśli jednak musisz, to wymiary pozostałych
ramek określaj za pomocą gwiazdki, *, aby pozostała część ekranu została wypełniona.

Aby podzielić okno na trzy poziome ramki, o jednakowej wysokości, zastosuj atrybut

rows="*,

*, *"

Jak napisać kod html poziomego układu ramek?

Przygotujemy prosty układ dwóch ramek, dzielących ekran w poziomie. W pierwszej, węższej,
możemy umieścić banner, a w drugiej, szerszej, dokument html. Wąskiej rameczce narzucimy
stałą wysokość, na przykład 75 pikseli. Druga ramka niech wypełni pozostałą część ekranu.

Wydruk 8.6 pomoże Ci w zaprojektowaniu układu ramek. Wydruki 8.7 i 8.8 to pliki HTML z
zawartością ramek – banner.html i strona.html. Możesz je dowolnie modyfikować. Na
razie nie ma w nich nic szczególnego.

Wydruk 8.6. Prosty układ ramek

<html>

<head>

<title>Ramki poziome</title>

</head>

</frameset>

</html>

Ten układ ramek różni się od układu zdefiniowanego na wydruku 8.3 tylko tym, że element

frameset

ma tu atrybut

rows

. Jego wartości wskazują, że okno podzielone zostanie na dwie

ramki, przy czym jednej narzucona została wysokość 75 pikseli, a wysokość drugiej to pozostała
część okna. W wąskiej ramce pojawi się baner reklamowy, a w wysokiej Twoja strona WWW.

Wydruk 8.7. Banner.html

<html>

<head>

<title>Banner</title>

</head>

<body>

<marquee><h1>Oto najwspanialsza strona WWW na świecie!!!<h1></marquee>

</body>

</html>

Plik

baner.html

to prostu dokument html, który zawiera napis reklamowy. Napis ten będzie

płynnie przewijany w poprzek ekranu. Wykorzystana tu została prosta metoda tworzenia animacji
tekstowych, tak zwanych animacji

Marquee

Aby utworzyć taką animację, wpisz między znacznikami

dowolny

tekst. Znacznik ten ma swoje atrybuty – zostały one zebrane w tabeli 8.3.

Jest to bardzo prosta metoda, lecz należy pamiętać, że udostępnia ją tylko Internet Explorer. W
Netscape napis będzie nieruchomy.

Wydruk 8.8. Strona.html

<html>

<head>

<title>Strona </title>

</head>

<body>

<h1>To jest ramka, w której wyświetlana będzie strona</h1>

</body>

</html>

Plik strona.html tozwykły dokument html. Zastąp go swoją stroną WWW.

Na rysunku 8.6 pokazane zostały efekty naszej pracy – okno przeglądarki zostało podzielone na
dwie poziome ramki.

Rys. 8.6.

Okno przeglądarki
podzielone zostało na dwie
ramki poziome

Czy można mieszać ramki poziome i pionowe?

Łączenie poziomych i pionowych układów ramek pozwala budować skomplikowane układy,
przypominające szachownicę.

Aby utworzyć mieszany układ ramek, konieczne jest zagnieżdżenie elementu

frameset

w innym

elemencie

frameset

Utwórzmy taki układ ramek, który umożliwia jednoczesną prezentację trzech dokumentów (patrz
rysunek 8.7).

Rys. 8.7.

Okno przeglądarki
podzielone zostało na dwie
ramki poziome

Kod html takiego dokumentu znajdziesz na wydruku 8.9.

Wydruk 8.9. Mieszany układ ramek

<html>

<head>

<title>Mieszany układ ramek</title>

</head>

</frameset>

</html>

Konieczne jest oczywiście przygotowanie plików

ramka_A.html

– zawartość górnej ramki,

ramka_B.html

– zawartość dolnej lewej ramki, i

ramka_C.html

– zawartość dolnej prawej

ramki.

Jak wygląda taki podział okna możesz zobaczyć na rysunku 8.8.

Rys. 8.8.

Mieszany układ ramek

Jak zabezpieczyć się przed nieprawidłową obsługą ramek?

Nie wszyscy mogą i chcą korzystać z ramek. Dla nich właśnie dołącz do swojej strony połączenie
umożliwiające wyświetlenie strony w środowisku bez ramek. Umożliwia to element

noframes

Umieszcza się go w obrębie elementu

frameset

<html>

<head>

<title>Tytuł strony</title>

<frameset cols = "25%, 25%,*">
<noframes>Przeglądarka nie obsługuje ramek!</noframes>
<frame src ="ramka_A.html">
<frame src ="ramka_B.html">
<frame src ="ramka_C.html">

</frameset>

</html>

Tekst zawarty między znacznikami

nie będzie wyświetlany tam,

gdzie ramki są obsługiwane, a pojawi się w przypadku kłopotów z ich obsługą, umożliwiając
wyświetlenie strony w wersji bez ramek.

Wartą polecenia praktyką jest udostępnianie zawartości strony w dwóch wersjach: z ramkami i
bez. W przypadku długich dokumentów zawierających wiele połączeń da to czytelnikom
możliwość wyboru między wersją „nawigacyjną” strony, wyposażoną w ramkę z połączeniami, a
wersją pozbawioną ramek, kładącą nacisk na treść i umożliwiającą czytelnikowi przeglądanie
dokumentu w większym oknie.

Jak zdefiniować ramkę lokalną?

Ramki lokalne lub pływające, to ramki, które pojawiają się jako wpisane w dokument, a więc
stosuje się je podobnie jak obrazy. Jeśli chcesz wstawić jakiś dokument html w dowolnym miejscu

innego dokumentu html, skorzystaj z ramki pływającej. Definiowana jest ona przy pomocy pary
znaczników

Atrybuty tego elementu to: name, width, height, src i align. Znacznik

umożliwia tworzenie ramek w dowolnym miejscu dokumentu HTML.

Tabela 8.1. Podstawowe atrybuty znacznika

<frame>

Nazwa

Opis

longdesc=”url”

Połączenie do strony zawierającej obszerny opis ramki. Stosuj
tam, gdzie spodziewasz się, że ramki nie będą obsługiwane.

marginheight=”piksele”

Wysokość marginesu.

marginwidth”piksele”

Szerokość marginesu.

frameborder=”0|1”

Określa, czy obramowanie ramki ma być wyświetlane.

noresize=”true|false”

Określa, czy użytkownik ma możliwość zmiany rozmiarów
ramki.

scrolling=”yes|no|auto”

Definiuje sposób przewijania ramki.

name=”nazwa_ramki”

Nazwa ramki.

src=”url”

Podaje ulokowanie pliku, który zostanie wyświetlony w
ramce.

Tabela 8.2. Nazwy specjalne ramek

azwa

Opis

_blank

Otwiera stronę w nowym oknie.

_self

Otwiera stronę w bieżącej ramce lub oknie. Jest to ustawienie
domyślne. Korzysta się z tej nazwy, aby zniwelować działanie
ustawienia w znaczniku <base> (czyli wyświetlenie dokumentu w

ramce domyślnej, wskazanej przez ten znacznik).

_top

Powoduje, że ładowany dokument jest wyświetlany w oknie
umieszczonym na wierzchu stosu i zajmuje całe okno, zastępując
układ ramek. Umożliwia to ucieczkę ze środowiska ramek.

_parent

Dokument jest ładowany do ramki nadrzędnej względem ramki
zawierającej bieżący dokument.

Tabela 8.3. Atrybuty znacznika

Atrybut

Działanie

behavior=”
scroll|slide|alternate”

scroll – napis przesuwa się z prawej strony do lewej.

slide – napis przesuwa się do lewego marginesu i zatrzymuje się.

alternate – tekst pojawia się z lewej strony, po czym odbija się

od marginesów.

direction=” right|left”

Tylko z atrybutem scroll; określa kierunek animowanego tekstu.

loop=” liczba|infinite”

Liczba powtórzeń przewinięć tekstu.

scrollamount=” liczba”

Liczba pikseli, o jaką przesuwa się tekst w pojedynczym kroku.

scrolldelay=” milisekundy”

Opóźnienie między kolejnymi krokami animacji.

bgcolor=”definicja koloru”

Zmienia kolor w obszarze, po którym przesuwa się napis.

height=”wartość%|piksele”

width=”wartość%|piksele

Wymiary obszaru, po którym przesuwa się napis.

hspace=”piksele”

vspace=”piksele”

Odległość obszaru od bocznych (hspace) oraz górnej i dolnej
krawędzi okna (vspace).

align=”top|middle|bottom”

Określa wyrównanie tekstu otaczającego względem obszaru, po
którym przesuwa się tekst. Nie ma wpływu na położenie tekstu
animowanego – ten jest zawsze umieszczany przy górnej krawędzi
obszaru.

Najważniejsze informacje

Układ ramek to zestaw ramek wypełniający okno przeglądarki lub ramkę w
„zewnętrznym” układzie ramek. Poszczególne ramki układu mogą mieć swoje nazwy –
dzięki temu można tworzyć połączenia do ramek oraz stosować nazwy ramek w
skryptach. Układ ramek definiowany jest za pomocą znaczników

</frameset>

Znaczniki

<body>

wzajemnie się wykluczają.

Ramki pozwalają wyświetlić w oknie przeglądarki więcej niż jeden dokument html.
Każdy z takich dokumentów jest prezentowany w odrębnej ramce, a poszczególne ramki
są od siebie niezależne.

Ramka to zdefiniowana przez swojego twórcę część okna przeglądarki, której to części
przypisano właściwości takie jak całemu oknu. Atrybutem znacznika

<frame>

jest

src

–

wartością atrybutu jest adres

url

dokumentu html, który zostanie umieszczony w danej

ramce.

W elemencie

frameset

określane są następujące cechy układu ramek: sposób podziału

okna na ramki, liczba wierszy lub kolumn oraz obszar ekranu przyporządkowany
poszczególnym kolumnom/wierszom.

Znacznik

przyjmuje dwa atrybuty:

cols

rows

. Pierwszy z nich,

cols

umożliwia określenie liczby kolumn, na które zostanie podzielone okno przeglądarki, a
drugi liczby wierszy.

Aby podzielić okno przeglądarki na ramki pionowe, należy zastosować znacznik

z atrybutem

cols

<frameset cols="szerokość_kolumny,

szerokość_kolumny, ...">

Liczba kolumn określana jest liczbą wartości atrybutu

cols

. Wartości te podawane są

kolejno, z przecinkami. Wartości – czyli szerokość ramki – można definiować w
pikselach, w procentach (względem całkowitej szerokości układu ramek) oraz za pomocą
znaku „

” (w tym przypadku przydzielana jest ramce maksymalna możliwa szerokość).

Aby podzielić okno na ramki, o jednakowej szerokości, należy przypisać atrybutowi

cols

wartości określone za pomocą symbolu ”*”.

Atrybut

rows

znacznika

<frameset> u

możliwia określenie liczby wierszy, na które

zostanie podzielone okno przeglądarki – a więc liczby ramek poziomych. Oto postać
definicji:

Atrybut

target

znacznika

<a>

ma kluczowe znaczenie w definiowaniu systemu

nawigacji między ramkami. Umożliwia kierowanie połączeń na ramki o określonych
nazwach. Z tego względu ramkom warto nadawać nazwy, nawet jeśli w danej nie są one
konieczne.

Domyślnie ramki są automatycznie zaopatrywane w paski przewijania wtedy, gdy jest to
konieczne. Aby zablokować przewijanie zawartości ramki, należy umieścić w znaczniku
<

frame

> atrybut

scrolling

i przypisać mu wartość

Obramowanie ramek można wykorzystać do zmiany ich rozmiarów.

Aby pozbyć się obramowań, skorzystaj z takiej definicji znacznika:

<frameset

rows="75,*" border=”0” frameborder=”0” framespacing=”0”>

Łączenie poziomych i pionowych układów ramek pozwala budować skomplikowane
układy ramek. Aby utworzyć mieszany układ ramek, konieczne jest zagnieżdżenie
elementu

frameset

w innym elemencie

frameset

Aby zabezpieczyć się przed nieprawidłową obsługą ramek, należy stosować element

noframes

. Umieszcza się go w obrębie elementu

frameset

Tekst zawarty między znacznikami

nie będzie wyświetlany

tam, gdzie ramki są obsługiwane, a pojawi się w przypadku kłopotów z ich obsługą,
umożliwiając wyświetlenie strony w wersji bez ramek.

Rozdział 9. HTML a XHTML

Co to jest XHTML?

XHTML to EXtensible HyperText Markup Language

XHTML jest niemal identyczny z HTML 4.01

XHTML ma czystszą formę niż HTML

XHTML jest aplikacją XML

XHTML 1.0 jest od 26 stycznia 2000 oficjalnym standardem sieciowym. Rekomendacja W3C
oznacza, że specyfikacja jest stabilna i przetestowana.

Po co XHTML?

W sieci umieszczanych jest coraz więcej stron WWW, rośnie też liczba „złych” stron – stron,
napisanych niepoprawnie. Taki kod HTML:

<html>

<head>

<title>Błędny kod HTML!</title>

<body>

<h1>TU JEST EWIDENTNY BŁĄD!

</body>

będzie wyświetlany poprawnie w większości przeglądarek, mimo, że zawiera błąd składni –
brakuje w nim znacznika zamykającego

</h1>

XML nie dopuszcza takich wpadek. Dlatego połączenie języków XML i HTML daje nadzieję na
stworzenie dobrego i stabilnego narzędzia. Dokumenty XHTML są interpretowane przez
wszystkie urządzenia radzące sobie z językiem XML. XHTML pozwala tworzyć dokumenty o
poprawnej strukturze, które działają we wszystkich przeglądarkach i są kompatybilne wstecznie.

Czy XHTML wymaga specjalnych przygotowań?

XHTML to kolejna generacja języka HTML, ale niewątpliwie trochę czasu upłynie zanim ludzie i
urządzenia do niej się dostosują. Trochę, lecz niezbyt wiele. Należy pamiętać, że między HTML
4.01 a XHTML nie ma wiele różnic, nie będzie więc to trudny proces.

Podstawowe wymagania to kod pisany małymi literami i zamykanie znaczników – chyba możesz
je spełnić.

Jakie są najważniejsze różnice między XHTML a HTML?

Elementy XHTML muszą być poprawnie zagnieżdżane

Dokumenty XHTML muszą mieć poprawną formę

Nazwy znaczników muszą być pisane małymi literami

Wszystkie elementy XHTML muszą być zamknięte

Co to oznacza konieczność poprawnego zagnieżdżania elementów?

W języku HTML wymaganie prawidłowego zagnieżdżania nie musi być restrykcyjnie spełniane.
Na przykład wyrażenie sformułowane w HTML tak:

<b><i>Tekst pogrubiony i pisany kursywą...</b></i>

będzie w XHTML absolutnie niepoprawne. W XHTML zagnieżdżenie musi być prawidłowe:

<b><i>Tekst pogrubiony i pisany kursywą... </i></b>

Na przykład częstym błędem w zagnieżdżonych listach jest zapominanie, że lista zagnieżdżona
musi być umieszczona w obrębie elementu

. Oto zły zapis:

<ul>

<li>Punkt 1</li>

<li>Punkt 2

<ul>

<li>Zagnieżdżony 1</li>

<li>Zagnieżdżony 2</li>

</ul>

<li>Punkt 3</li>

</ul>

A tutaj poprawny odpowiednik błędnego kodu:

<ul>

<li>Punkt 1</li>

<li>Punkt 2

<ul>

<li>Zagnieżdżony 1</li>

<li>Zagnieżdżony 2</li>

</ul>

</li>

<li>Punkt 3</li>

W poprawnym przykładzie znacznik

</li>

został wstawiony za znacznikiem

</ul>

listy

zagnieżdżanej.

Co oznacza, że dokument musi mieć poprawną formę?

Oto wymagania, które określają poprawność formy. Wszystkie elementy XHTML muszą być
zagnieżdżone w podstawowym elemencie

html

. Elementy podrzędne danych elementów

stosowane są w parach i są prawidłowo zagnieżdżone w elemencie nadrzędnym. Podstawowa
struktura dokumentu prezentuje się tak:

<html>

</html>

Dlaczego należy stosować małe litery?

Konieczność stosowania małych liter wynika z tego, że dokumenty XHTML są aplikacjami XML,
a XML to język czuły na wielkość znaku. Tak więc znaczniki

<br>

<BR>

zostaną

zinterpretowane jako różne.

Zgodnie z tym, zapisz kodu w takiej formie:

<BODY>

<P>Tekst</P>

</BODY>

jest niepoprawny. Poprawna postać powinna wyglądać tak:

<body>

<p>Tekst</p>

Dlaczego należy pamiętać o znacznikach zamykających?

Wszystkie elementy, które nie są puste, muszą mieć znaczniki zamykające.

Zgodnie z tym, zapisz kodu w takiej formie:

<p>Tekst

<p>Kolejny akapit

jest niepoprawny. Poprawna postać powinna wyglądać tak:

<p>Tekst</p>

<p>Kolejny akapit.</p>

A co z elementami pustymi?

Elementy puste muszą także zostać zaopatrzone w znacznik zamykający lub znacznik otwierający
musi kończyć się znakami

Oto nieprawidłowa postać wyrażenia:

Tu dodamy łamanie wiersza<br>

A tu pojawi się linia pozioma<hr>

Poprawny zapis wygląda tak:

Tu dodamy łamanie wiersza<br />

A tu pojawi się linia pozioma<hr />

lub

Kolejna linia <hr></hr>

Dodatkowa spacja w zapisie znacznika zamykającego,

<br />

, jest konieczna, aby zachować

zgodność z obecnymi przeglądarkami.

Co oznacza stwierdzenie, że XHTM ma czystszą formę?

XHTML nie dopuszcza dowolności. Nazwy znaczników i atrybutów muszą być pisane małymi
literami, wartości atrybutów muszą być podawane w cudzysłowach, skracanie definicji atrybutu
jest niedopuszczalne, atrybut

zastępuje nazwę atrybutu, a DTD definiuje w dokumentach

XHTML elementy obowiązkowe.

Skoro tak, to zapis:

będzie nieprawidłowy z dwóch powodów: nazwa atrybutu pisana jest wielkimi literami, a wartość
nie została ujęta w cudzysłowach. Oto zapis poprawny:

Rezygnacja z możliwości skróconego zapisu atrybutów oznacza, że nie wolno zapisać tak:

Należy zastosować pełną postać zapisu:

Co oznacza, że atrybut id zastępuje nazwę?

W HTML 4.01 stosowany jest atrybut

name

, który definiuje nazwy następujących elementów:

frame

iframe

img

map

. W XHTML jego rolę przejmuje atrybut

Taki zapis będzie w XHTML niepoprawny:

A tu postać prawidłowa:

W celu zachowania zgodności z obecnymi wersjami przeglądarek, na razie należy stosować oba
atrybuty,

name

, z tymi samymi wartościami. Na przykład:

Należy także pamiętać o dodatkowej spacji przed

(patrz uwaga o znacznikach zamykających w

XHTML).

Co to jest atrybut lang?

Atrybut

lang

jest stosowany niemal z każdym elementem XHTML. Określa on język, w jakim

zdefiniowana została zawartość:

Jakie są obowiązkowe elementy XHTML?

Wszystkie dokumenty XHTML muszą zawierać deklarację

DOCTYPE

. Obowiązkowe są także

elementy

html

head

body

, a element

title

musi być zawarty w obrębie elementu

head

. Oto

podstawowy szablon dokumentu XHTML:

<!DOCTYPE Doctype goes here>

<html>

<head>

<title>Tytuł dokumentu</title>

</head>

<body>

Zawartość dokumentu

</body>

</html>

Deklaracja

DOCTYPE

nie jest częścią samego dokumentu XHTML, nie jest też elementem XHTML

i nie może mieć znacznika zamykającego. Deklaracja

DOCTYPE

jest zawsze umieszczana w

pierwszym wierszu kodu dokumentu XHTML.

Jak wygląda przykładowy dokument XHTML?

Oto przykład dokumentu XHTML:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Dokument XHTML</title>

</head>

<body>

<p>Tekst</p>

</body>

</html>

Deklaracja DOCTYPE określa typ dokumentu:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Reszta dokumentu wygląda jak zwykły dokument HTML:

<html>

<head>

<title>Dokument XHTML</title>

</head>

<body>

<p>Tekst</p>

</body>

</html>

Deklaracje typu dokumentu zostały zawarte w dodatku A.

Dodatek A. Znaczniki HTML i
ich funkcje

W tabeli A1 przedstawiono listę znaczników języka HTML 4.01 pogrupowanych zgodnie z ich
funkcjami. Sposób definiowania poszczególnych elementów podany został w przykładach. Do
każdego elementu dołączony jest krótki opis jego funkcji oraz lista podstawowych atrybutów
opcjonalnych (atrybuty standardowe omówione zostały w dodatku C). Dołączono także informacje
o wersjach przeglądarek, począwszy od których element jest obsługiwany, oraz o wersji
specyfikacji W3C, w której został po raz pierwszy zamieszczony.

Tabela A1. Lista znaczników HTML 4.01 w podziale na funkcje.

Legenda:

NN – Netscape, IE – Internet Explorer, W3C – specyfikacja World Wide Web Consortium

Możliwe wartości danego atrybutu są oddzielone znakiem |, np.

rows=”piksele|wartość%|*”

Kursywą oznaczona jest wartość atrybutu, którą należy podać w postaci liczby lub tekstu.

Znacznik
otwierający

Przykład

Opis

W3C

Znaczniki

podstawowe

<!DOCTYPE>

Strict DTD

<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4
/strict.dtd">

Transitional DTD

<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4
/loose.dtd">

Frameset DTD

Definiuje typ dokumentu. Deklaracja
ta powinna pojawić się jako pierwszy
element kodu HTML. Informuje ona
przeglądarkę, z którą wersją języka
HTML ma ona do czynienia.

3.2

<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4
/frameset.dtd">

<html>

<head>
</head>
<body>
Zawartość dokumentu......
</body>

</html>

Informuje przeglądarkę, że plik
zawiera kod HTML.

3.0

3.2

<body>

Definiuje zawartość dokumentu.

3.0

3.2

<h1>To jest nagłówek
poziomu 1</h1>

<h2>To jest nagłówek
poziomu 2</h2>

<h3>To jest nagłówek

poziomu 3</h3>

<h4>To jest nagłówek
poziomu 4</h4>

<h5>To jest nagłówek
poziomu 5</h5>

<h6>To jest nagłówek
poziomu 6</h6>

Definiują nagłówki.

3.0

3.2

<p>

<p>To jest akapit.</p>

<p>To kolejny akapit.</p>

Definiuje akapit.

3.0

3.2

<br>

<p>W tym akapicie<br> zła-
<br>

mano wiersz</p>

Wprowadza w akapicie złamania
wiersza.

3.0

3.2

<hr>

<p>Znacznik hr wprowadza

linię poziomą:</p>

<hr>

<p>między akapitami</p>

Umożliwia wstawienie na stronie linii
poziomej.

3.0

3.2

<!-->

Znacznik stosowany jest do
wstawienia w kodzie HTML
komentarza (komentarz jest
ignorowany przez przeglądarkę).
Komentarz jest pomocny przy
wyjaśnianiu funkcji kodu, ale ma
jeszcze jedną niezwykle istotną rolę –
pozwala wprowadzać do kodu

3.0

3.2

skrypty.

Formatowanie

znaku

<b>

<b>Ten tekst jest pisany
czcionką pogrubioną</b>

Wprowadza formatowanie fizyczne –
tekst pogrubiony.

3.0

3.2

<strong>Ten tekst też jest
pisany czcionką
pogrubioną</strong>

Wprowadza formatowanie logiczne –
tekst pogrubiony.

3.0

3.2

<i>

<i>Ten tekst jest pisany
kursywą</i>

Wprowadza formatowanie fizyczne –
kursywa.

3.0

3.2

<em>

<em>Ten tekst będzie
wyróżniony</em>

Wprowadza formatowanie logiczne –
tekst przypominający kursywę.

3.0

3.2

<big>

<big>Tekst wyświetlany
czcionką powiększoną.</big>

Definiuje tekst o większym rozmiarze
czcionki niż tekst otaczający.

3.0

3.2

<small>

<small>Tekst wyświetlany
czcionką
pomniejszoną</small>

Definiuje tekst o mniejszym
rozmiarze czcionki niż tekst
otaczający.

3.0

3.2

<sup>

W tekście pojawi się indeks
<sub>dolny</sub>

Definiuje indeks dolny.

3.0

3.2

<sub>

W tekście umieszczono
indeks <sup>górny</sup>

Definiuje indeks górny.

3.0

3.2

<bdo>

<bdo dir = "rtl">Tekst
będzie pisany na
opak!</bdo>

Efekt:

!kapo an ynasip eizdębtskeT

Zmienia kierunek tekstu. Wymagany
atrybut

dir

5.0

4.0

<dfn>

<dfn>Ten tekst stanowi
termin definicji</dfn>

Umożliwia wstawienie do tekstu
terminu definicji (tekstu o określonym
sposobie formatowania, który
wyróżnia go względem pozostałego
tekstu).

3.0

3.2

<u>

Jest odradzany. W zamian należy
stosować

style

Formatowanie tekstu

<pre>

<pre>Tekst
preformatowany</pre>

W tekście umieszczonym w elemencie

pre

zachowane zostaną odstępy i

łamania wierszy. Tekst będzie
wyświetlany czcionką o stałej
szerokości.

3.0

3.2

<code>

<code>Tekst kodu
programu</code>

Stosowany do prezentacji kodu
programu. Tekst będzie wyświetlany

3.0

3.2

czcionką o stałej szerokości.

<tt>

<tt>Tekst pisany czcionką o
stałej szerokości </tt>

Stosowany do prezentacji kodu
programu.

3.0

3.2

<kbd>

<kbd>Tekst pisany czcionką
komputerową</kbd>

Stosowany do prezentacji kodu
programu.

3.0

3.2

<var>

<var>Zmienna</var>

Stosowany do prezentacji kodu
programu – wskazuje nazwę
zmiennej.

3.0

3.2

<samp>

<samp>Tekst
przykładowy</samp>

Stosowany do prezentacji kodu
programu lub tekstu przykładowego.
Efekt podobny, jak w przypadku

<code>

3.0

3.2

Są odradzane. W zamian zaleca się
stosować znacznik

<pre>

Blok tekstu

WWW </acronym>

W niektórych przeglądarkach wartość
atrybutu

title

można wykorzystać

do wyświetlenia pełnego tekstu
skrótu. Pojawi się on po umieszczeniu
nad skrótem wskaźnika myszki (w
przykładzie obok, nad skrótem
WWW).

Element

acronim

pozwala nadać

tekstowi strukturę.

4.0

Jan Kowalski<br>

Gliwice<br>

ul. Zwycięstwa
888</address>

Element definiuje blok adresu. Można
wykorzystać go także do
formatowania sygnatur. Zazwyczaj
tekst wyświetlany jest kursywą, a pod
i nad adresem przeglądarka doda
pusty wiersz. Łamania wierszy w
samym adresie musisz definiować
sam, tak jak w przykładzie.

4.0

3.2

<html>

<body>

Oto tekst cytowany:

To cytat. To cytat. To

cytat. To cytat. To bardzo
długi cytat.

</blockquote>

Element

blockquote

pozwala

definiować długie cytaty, a element

cytaty krótkie. W przypadku długich
cytatów przeglądarka wstawi łamania
wierszy i marginesy, natomiast krótkie
cytaty zostaną wyświetlone bez
jakichkolwiek dodatków.

Atrybuty opcjonalne elementu

blockquote

3.0

4.0

3.2

4.0

A teraz niezbyt długi
cytat:

<q>

A to cytat.

</q>

</body>

</html>

cite=”url”

– adres URL strony, z

której pochodzi cytowana informacja.

<cite>

<cite>Tekst cytatu</cite>

Do tekstu zastosowane zostanie
wyróżnienie przypominające kursywę.

3.0

3.2

<ins>

zapadało<ins>osiemdziesiąt<
/ins> procent dróg

Umożliwia zaznaczenie tekstu
wstawionego. Stosuj z

<del>

, aby

opisać aktualizacje i modyfikacje
kolejnych wersji dokumentu.

Tekst zawarty w tym elemencie
będzie wyświetlany jako podkreślony.

Atrybuty opcjonalne:

cite=”url”

– pozwala wstawić

połączenie do dokumentu, w którym
zmiany zostały wyjaśnione.

daytime=”yyyymmdd”

– określa

czas wprowadzenia zmian

4.0

<del>

zapadało<del>osiemdziesiąt<
/del> procent dróg

Umożliwia zaznaczenie tekstu
usuniętego. Tekst będzie wyświetlany
jako przekreślony.

Atrybuty opcjonalne takie same jak
dla elementu

ins

4.0

Odradzane. Stosuj w zamian

<del>

Połączenia

<a>

<a href="stronaX.html">Oto

połączenie </a>do strony X
danej witryny.

Efekt:

Oto połączenie do strony X danej
witryny.

Oto połączenie</a> do

Definiuje zakotwiczenie. Umożliwia
ono tworzenie połączeń do innych
dokumentów oraz tworzenie połączeń
do określonych miejsc w tym samym
dokumencie.

Ważniejsze atrybuty opcjonalne:

href=”url”

– połączenie do innego

dokumentu

3.0

3.2

strony w Internecie.

Efekt:

Oto połączenie do strony w
Internecie.

<a href="
http://main.magsoft.com.pl/
~rsokol/"

target="_blank">Odwiedź
nas!!</a>

Aby utworzyć połączenie do
określonej sekcji danej strony,
zdefiniuj zakotwiczenie i jego
nazwę:

A potem w dowolnym miejscu
strony wstaw połączenie do sekcji o
zdefiniowanej nazwie:

< a href="#opis">Przeczytaj
opis</a>

name=”nazwa_sekcji”

– definiuje

nazwę zakotwiczenia, z której można
korzystać w atrybucie

href

. Dzięki

zakotwiczeniom o zdefiniowanych
nazwach możesz definiować
połączenia do określonej sekcji strony.

target =
“_blank|_parent|_self|_top”

–

określa miejsce otwarcia strony: w
nowym oknie | w oknie nadrzędnym |
w bieżącej ramce lub oknie | w
pełnym oknie na wierzchu stosu.

<link>

W przykładzie pokazano
zastosowanie znacznika w
definiowaniu połączenia do
zewnętrznego arkusza stylów:

</head>

Określa relację pomiędzy dwoma
dokumentami. Jest elementem
pustym – oznacza to, że zawiera tylko
atrybuty. Umieszczany jest w sekcji

head

i może pojawiać się

wielokrotnie.

Znacznik zamykający jest
zabroniony.

Niektóre atrybuty opcjonalne:

href=”url”

– adres do innego

dokumentu.

target =
“_blank|_parent|_self|_top”

–

określa miejsce otwarcia strony: w
nowym oknie | w oknie nadrzędnym |
w bieżącej ramce lub oknie | w
pełnym oknie na wierzchu stosu.

type=”typ_MIME|text/css|text
/javascript”

– określa typ MIME.

4.0

3.0

3.2

Ramki

Prosty układ pionowych ramek:

Definiuje układ ramek i sposób
podziału okna przeglądarki na

3.0

4.0

</frameset>

Prosty układ poziomych ramek:

<frameset

rows="25%,50%,25%">

</frameset>

Złożony układ ramek:

</frameset>

poszczególne ramki. Każda z ramek
(kreowanych przez elementy

frame

)

wyświetla osobny dokument –
definiujesz go korzystając z atrybutu

src

. Element

frameset

zastępuje

element

body

Pamiętaj o przygotowaniu plików
HTML – każda ramka to osobny plik.

Atrybuty opcjonalne:

cols=”piksele|wartość%|*”

–

określa liczbę kolumn układu ramek i
ich rozmiar: w pikselach | w
procentach szerokości całego układu
ramek | względem pozostałych ramek.

rows=”piksele|wartość%|*”

–

określa liczbę wierszy układu ramek i
ich rozmiar w pikselach | w
procentach szerokości całego układu
ramek | względem pozostałych ramek.

<frame>

Patrz przykład powyżej

Definiuje ramkę. Korzystając z ramek
nie stosuj elementu

body

– zastępuje

frameset

Atrybuty opcjonalne:

longdesc=”url”

– połączenie do

dokumentu zawierającego opis ramki;
przydatne w przypadku przeglądarek,
które nie obsługują ramek.

marginheight=”piksele”

–

szerokość marginesu w pionie

marginwidth=”piksele”

–

szerokość marginesu w poziomie

frameborder=”0|1”

– wyświetlanie

3.0

4.0

obramowania (wartość 1) lub
wyłączanie go (wartość 0).

noresize=”true|false”

–

umożliwienie użytkownikowi zmiany
rozmiarów ramki – wartość

true

(lub

zablokowanie tej opcji – wartość

false

)

scrolling=”yes|no|auto”

–

włączanie przewijania zawartości
(włączone przewijanie, wyłączone i
wprowadzane automatycznie, gdy
zawartość obszerna)

name=”nazwa”

– nazwa ramki

src=”nazwa_pliku|url”

– plik,

którego zawartość pojawi się w ramce

<frameset cols = "25%,
25%,*">
<noframes>Opis zawartości
ramek lub inna
informacja</noframes>
<frame src ="plik1.html">
<frame src ="plik2.html">
<frame src
="plik3.html">
</frameset>

Ten element przeznaczony jest dla
przeglądarek, które nie obsługują
ramek. Umieszczany jest w obrębie
elementu

frameset

. i zawiera

informację zastępczą.

3.0

4.0

<html>

<body>

</iframe>

</body>

</html>

Definiuje ramkę wpisaną – jest to
ramka w obrębie strony WWW. Nie
wszystkie przeglądarki obsługują ten
element.

Atrybuty opcjonalne:

src=”url”

– określa adres

dokumentu, który zostanie
wyświetlony w ramce wpisanej.

height=”piksele”

– wysokość

ramki w pikselach.

width=”piksele”

– szerokość

ramki w pikselach.

name=”nazwa_ramki”

longdesc=”url”

– adres

dokumentu, w którym umieszczono
opis zawartości ramki

marginheight=”piksele”

–

6.0

3.0

4.0

szerokość marginesu w pionie

marginwidth=”piksele”

–

szerokość marginesu w poziomie

frameborder=”0|1”

– wyświetlanie

obramowania

scrolling=”yes|no|auto”

–

włączanie przewijania zawartości

Wprowadzanie danych – formularze

<form>

Imię:

<br>

Nazwisko:

<br>

</form>

Definiuje formularz. Może on
zawierać pola tekstowe, pola wyboru,
przyciski opcji, itp. Formularze
pozwalają przesyłać dane do serwera
w celu ich dalszej obróbki.

Atrybut wymagany:

action=”url”

– określa miejsce

przesłania danych po naciśnięciu
przez użytkownika przycisku

submit

Może to być adres serwera, na którym
rezyduje skrypt CGI dekodujący dane
formularza (patrz przykład) lub
wyrażenie

mailto:adres@pocztowy

Niektóre atrybuty opcjonalne:

method=”get|post”

– metoda

HTTP przesyłania danych do serwera.

Metoda

get

jest metodą domyślną.

Jeśli formularz zawiera znaki inne niż
ASCII lub więcej niż 100 znaków,
musi korzystać z metody

post

enctype=”typ_MIME”

– typ MIME

stosowany do kodowania zawartości
formularza.

target=”_blank|_self|_parent
|_top”

– miejsce otwierania

dokumentów: w nowym oknie | w
oknie nadrzędnym | w bieżącej ramce
lub oknie | w pełnym oknie na
wierzchu stosu.

3.0

3.2

<input>

Pole tekstowe:

<form>

Definiuje pole wprowadzania danych.
Jest to element pusty – zawiera

3.0

3.2

Imię:

<br>

Nazwisko:

</form>

Przyciski opcji:

<form>

<input type="radio"
name="opcja" value="kot">
Kot

<br>

<input type="radio"
name="opcja" value="pies">
Pies

</form>

Pola wyboru:

<form>

<input type="checkbox"
name="lady">Kobieta

<br>

<input type="checkbox"
name="man">Mężczyzna

</form>

Przycisk wysyłania formularza:

<form name="input"
action="http://www.myserver
.com.cgi-bin/uploadit/"

method="get">

Użytkownik:

</form>

Formularz wysyłający list e-mail:

wyłącznie atrybuty. Nie stosuje się
znacznika zamykającego.

Atrybuty opcjonalne:

– typ pola

danych; domyślnym typem jest

text

accept=”typ_pliku”

– stosowany

gdy

type=”file”

name=”nazwa_pliku”

– nazwa

pola; przyciski opcji są grupowane
poprzez nadawanie im tych samych
nazw, dzięki czemu możliwe jest
wybranie tylko jednego przycisku z
grupy.

value=”wartość”

– w przypadku

pól wyboru i przycisków opcji określa
wartość zwracaną po przekazaniu
kontroli; w przypadku przycisków,
umożliwia podanie tekstu, którym
przycisk jest opisany; w przypadku
pól typu

hidden

password

text

określa wartość domyślną.

size=”liczba_znaków”

– pozwala

określić rozmiar pola w znakach
(domyślna wartość to 20); stosowany
dla pól typu

password

text

Zamiast liczby można stosować znak
#.

maxlenght=”liczba”

– określa

maksymalną liczbę znaków, jaką
użytkownik może wpisać w polu typu

text

lub

password

checked=”checked”

– wskazuje

domyślnie wybrany przycisk opcji

readonly=”readonly”

– określa,

że zawartość pola tekstowego nie
podlega zmianie.

src=”url”

– adres pliku

<html>

<body>

<h3>Ten formularz wyśle e-
mail pod wskazany
adres.</h3>

Imię:<br><input type="text"

name="imie" value="Wpisz
swoje imię" size="20"><br>

Adres e-mail:<br><input
type="text"
name="mail"value="Podaj
adres e-mail"
size="20"><br>

Uwagi:<br><input
type="text" name="uwagi"
value="Twoje uwagi"
size="40"><br><br>

<input type="submit"
value="Wyślij"><input

type="reset"
value="Wyczyść">

</form>

</body>

</html>

zawierającego obraz; stosowany dla
pól typu image.

disabled=”disabled”

– określa,

że użytkownik nie ma żadnych
uprawnień w stosunku do tego pola.

Definiuje wielowierszowe pole
tekstowe. W takim polu użytkownik
może wprowadzać dowolnie długi
tekst.

Wymagane atrybuty:

cols=”liczba”

– szerokość pola w

znakach

rows=”liczba”

– wysokość pola w

znakach

Atrybuty opcjonalne:

disabled=”disabled”

–

uniemożliwia korzystanie z pola
tekstowego.

name=”nazwa_pola”

3.0

3.2

readonly=”readonly”

–

użytkownik nie może zmieniać
zawartości pola

Definiuje przycisk. W obrębie
elementu

button

możesz umieścić

tekst lub obraz – na tym polega
różnica pomiędzy elementem

button

a przyciskami utworzonymi za
pomocą elementu

input

Atrybuty opcjonalne:

disabled=”disabled”

– przycisk

niedostępny dla użytkownika

type=”button|reset|submit”

–

definiuje typ przycisku

name=”nazwa_przycisku”

–

określa nazwę przycisku, dzięki
czemu można odwoływać się do niej
w skryptach i formularzach.

value=”dowolna_wartość”

–

określa wartość domyślną, którą
można modyfikować za pomocą
skryptu

4.0

<select>
<option value ="kot">Kot
<option value ="pies">Pies
<option value
="rybka">Rybka
<option value
="krokodyl">Krokodyl
</select>

Element

select

definiuje pole listy

rozwijanej.

Atrybuty opcjonalne:

disabled=”disabled”

–

uniemożliwia użytkownikowi
korzystanie z listy

multiple=”true|false”

– określa,

czy użytkownik może wybrać więcej
niż jedną pozycję z listy (

true

– tak,

false

– nie).

name”tekst”

– nazwa listy.

size=”liczba”

– określa liczbę

wyświetlanych pozycji listy

3.0

3.2

<select>
<optgroup
label="Samochody">
<option value ="volvo">Fiat
<option value
="Syrena">Mercedes

Grupuje opcje.

Atrybuty opcjonalne:

disabled=”disabled”

– wyłącza

grupę opcji

6.0

4.0

</optgroup>
<optgroup label="Dobre
samochody">
<option value
="mercedes">Maluch
<option value
="audi">Syrena
</optgroup>
</select>

label=”tekst”

– etykieta grupy

opcji

Patrz przykład dla elementu

select

Jest to pozycja listy zdefiniowanej za
pomocą elementu

select

Element ten można stosować bez
atrybutów, aczkolwiek zazwyczaj
konieczny jest atrybut

value

, który

określa, co zostanie przesłane do
serwera.

Znacznik ten stosowany jest w
elemencie

form

– poza nim nie ma

sensu.

Atrybuty opcjonalne:

disabled=”disabled”

– wyłącza

możliwość wyboru opcji.

label=”tekst”

– etykieta opcji.

value=”tekst”

– określa wartość

opcji

selected=”selected”

– wskazuje

domyślnie wybraną pozycję listy.

3.0

3.2

<label>

<form>

<label for="Imie"
accesskey="I"><u>I</u>mię:<
/label>
<input type="text"

id="Imie" size=30>

<label for="uwagi"

Umożliwia zdefiniowanie etykiet dla
pól formularza.

Atrybuty opcjonalne:

for=”id_pola”

– wskazuje element,

któremu przyporządkowana zostanie
etykieta.

accesskey=”klawisz”

– określa

klawisz skrótu klawiaturowego

Alt+klawisz

, który pozwoli na

uaktywnienie pola i automatyczne
przeniesienie do niego punktu
wstawiania. W przykładzie
naciśnięcie skrótu

Alt+E

spowoduje

uaktywnienie pola

4.0

accesskey="C"><u>C</u>o
powiesz:</label>
<textarea id="uwagi"
cols="10"
rows="2"></textarea>

</form>

<fieldset>
Waga <input type="text"
size="3">
Wzrost<input type="text"
size="3">
</fieldset>

Pozwala umieścić obramowanie
wokół tekstu i innych elementów.
Stosowany tylko w formularzach.

4.0

<legend>Informacje o wadze
i wzroście:</legend>
Waga <input type="text"
size="3">
Wzrost<input type="text"
size="3">

</fieldset>

Pozwala dołączyć etykietę do
elementu

fieldset

. Stosowany tylko

w formularzach.

4.0

Ten element jest odradzany. Stosuj w
zamian

<input>

Listy

<ul>

<ul>
<li>Amelia</li>
<li>Gladiator</li>
</ul>

Definiuje listę wypunktowaną – jej
pozycje oznaczone są znakami
wypunktowania.

3.0

3.2

<ol>

<ol>
<li>Amelia</li>
<li>Gladiator</li>
</ol>

Definiuje listę numerowaną – jej
pozycje oznaczone są liczbami.

3.0

3.2

<li>

Patrz przykłady dla elementów

Definiuje pozycję listy.

3.0

3.2

<dl>

<dl>
<dt>Kot</dt>
<dd>Mały drapieżnik
futerkowy</dd>
<dt>Człowiek</dt>
<dd>Duży drapieżnik</dd>

</dl>

Definiuje listę definicji.

3.0

3.2

<dt>

Patrz przykład dla elementu

Definiuje termin na liście definicji.

3.0

3.2

<dd>

Patrz przykład dla elementu

Definiuje wyjaśnienie terminu z listy
definicji.

3.0

3.2

Odradzane. W zamian stosuj

<ul>

Obrazy

<img>

<p>To jest moje zdjęcie:
<img border="0"
src="mary.gif"
alt="Mary"></p>

Obraz jako mapa odnośników:

<p>Kliknij na jednej z

planet Układu:</p>
<img src
="images/planets.gif"
width ="145" height ="126"
usemap ="#planetmap">

<map name ="planetmap">
<area shape ="rect" coords
="0,0,82,126"
href ="sun.html" target
="_blank">
<area shape ="circle"
coords ="90,58,3"
href ="mercur.html"
target ="_blank">
<area shape ="circle"
coords ="124,58,8"
href ="venus.html" target

="_blank">
</map>

Pozwala wstawić obraz.

Wymagane atrybuty:

src=”url”

– tu podajesz

ulokowanie pliku zawierającego
obraz.

alt=”tekst”

– krótki opis obrazu

(tak zwany tekst alternatywny).

Atrybuty opcjonalne:

longdesc=”url”

– stosowany, gdy

konieczne skierowanie użytkownika
do dokumentu zawierającego długi
komentarz tekstowy dotyczący
obrazu.

vspace=”piksele”

– wolny obszar

u góry/dołu obrazu.

hspace=”piksele”

– wolny obszar

z lewej/prawej strony obrazu.

align=”top|bottom|middle|lef
t|right”

– wyrównanie obrazu

względem otaczającego tekstu.

usemap=”url”

– definiuje obraz

jako mapę odsyłaczy działającą po
stronie klienta.

ismap=”url”

– definiuje obraz jako

mapę odsyłaczy działającą po stronie
serwera.

height=”piksele|wartość%”

–

określa wysokość obrazu w pikselach
lub względem rzeczywistego rozmiaru
obrazu.

width=”piksele|wartość%”

–

określa szerokość obrazu w pikselach
lub względem rzeczywistego rozmiaru
obrazu.

3.0

3.2

<map>

Patrz przykład dla elementu

img

Definiuje obraz jako mapę odsyłaczy
(obraz podzielony na obszary aktywne
o funkcjach połączeń). Nazwa
stosowana w elemencie

map

występuje jako wartość atrybutu

3.0

3.2

usemap

znacznika

<img>

Atrybut opcjonalny:

name=”nazwa_mapy”

<area>

Patrz przykład dla elementu

img

Definiuje obszar aktywny mapy
odsyłaczy. Jest to element pusty,
zawierający jedynie atrybuty. Zawsze
jest zagnieżdżony w elemencie

map

Znacznik zamykający jest
zabroniony.

Atrybut wymagany:

alt=”tekst”

– tekst alternatywny.

Atrybuty opcjonalne:

coords=x,y,r|
x1,y1,..xn,yn|x1,y1,x2,y2

–

współrzędne określające obszar:
współrzędne środka okręgu i promień
| współrzędne wierzchołków
wielokąta | dla prostokąta:
współrzędne wierzchołków lewego
górnego i prawego dolnego.

shape=”circle|poly|rect|defa
ult”

– definiuje kształt obszaru:

okrąg | wielokąt | prostokąt |
domyślny.

href=”url”

– adres URL do

dokumentu, do którego prowadzi
połączenie stowarzyszone z obszarem
aktywnym.

nohref=”true|false”

– wyłącza

obszar z mapy odsyłaczy.

target =
“_blank|_parent|_self|_top”

–

określa miejsce otwarcia dokumentu
po kliknięciu obszaru aktywnego: w
nowym oknie | w oknie nadrzędnym |
w bieżącej ramce lub oknie | w
pełnym oknie na wierzchu stosu.
Stosowany z atrybutem

href

3.0

3.2

<title>Tabela</title>
</head>
<body>

Tworzy tabelę – jest „opakowaniem”
pozostałych elementów. Domyślnie
tabele nie mają obramowań.

3.0

3.2

<table>

<table>
<caption>Podpis
tabeli</caption>

<tr>
<th>NAGŁÓWEK</th>
<th>NAGŁÓWEK</th>
</tr>
<!--Drugi wiersz to dwie

komórki danych -->
<tr>
<td>DANE</td>
<td>DANE</td>
</tr>

</table>
</body>
</html>

Atrybuty opcjonalne:

border=”piksele” –szerokość
obramowania w pikselach

cellspacing=”piksele|wart
o••%” – w

olny obszar między

komórkami.

cellpadding

=”piksele|warto••%

” – w

olny obszar między

krawędziami komórki a zawartością

width=”piksele|warto••%”
– s

zerokość tabeli w pikselach lub

względna.

– elementy zewnętrznego

obramowania; aby atrybut działał,
konieczne zdefiniowanie także
atrybutu

border

– poziome i pionowe

linie dzielące tabelę; także wymagane
zdefiniowanie atrybutu

border

Patrz przykład dla elementu

table

. Podpis tabeli informuje o zawartości

tabeli. Jest opcjonalny i umieszczany
w obrębie elementu

table

, przed

definicjami wierszy.

3.0

3.2

<th>

Patrz przykład dla elementu

table

. Komórka nagłówka. Od komórki

danych różni się tym, że zastosowano
w niej czcionkę pogrubioną i
wycentrowanie.

Atrybuty opcjonalne:

abbr=”tekst”

– skrócona wersja

zawartości.

align=”left|right|center|jus
tify|char”

– poziome wyrównanie

zawartości komórki.

char=”znak”

– znak, względem

którego tekst zostanie wycentrowany
w przypadku zastosowania atrybutu

align=”char”

colspan=”liczba_kolumn”

–

3.0

3.2

liczba kolumn, na których komórka
jest rozpięta.

rowspan="liczba_wierszy" –
liczba wierszy, na których komórka
jest rozpięta.

valign=”top|middle|bottom|ba
seline”

– wyrównanie zawartości

komórki w pionie.

width=”piksele|wartość%”

–

szerokość komórki; odradzany; w
zamian stosuj styl, np.:

<th

style="width:100px">

height=”piksele|%”

– wysokość

komórki; odradzany; w zamian stosuj
styl, np.:

<th

style="height:100px">

<tr>

Patrz przykład dla elementu

table

. Wiersz tabeli.

Atrybuty opcjonalne:

align=”left|right|center|jus
tify|char”

– poziome wyrównanie

zawartości.

valign=”top|middle|bottom|ba
seline”

– wyrównanie zawartości w

pionie.

3.0

3.2

<td>

Patrz przykład dla elementu

table

. Komórka tabeli. Komórki umieszcza

się między znacznikami wiersza
tabeli.

Atrybuty opcjonalne:

abbr=”tekst”

– skrócona wersja

zawartości.

align=”left|right|center|jus
tify|char”

– poziome wyrównanie

zawartości komórki.

char=”znak”

– znak, względem

którego tekst zostanie wycentrowany
w przypadku zastosowania atrybutu

align=”char”

colspan=”liczba_kolumn”

–

liczba kolumn, na których komórka

3.0

3.2

jest rozpięta.

rowspan="liczba_wierszy" –
liczba wierszy, na których komórka
jest rozpięta.

valign=”top|middle|bottom|ba
seline”

– wyrównanie zawartości

komórki w pionie.

width=”piksele|wartość%”

–

szerokość komórki; odradzany; w
zamian stosuj styl, np.:

<td

style="width:100px">

height=”piksele|wartość%”

–

wysokość komórki; odradzany; w
zamian stosuj styl, np.:

<td

style="height:100px">

<table border = "1">
<thead>
<tr>
<td>Ten tekst znajduje się
w obszarze THEAD</td>
</tr>
</thead>
<tfoot>

<tr>
<td>Ten tekst znajduje się
w obszarze TFOOT</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ten tekst znajduje się
w obszarze TBODY</td>
</tr>
</tbody>
</table>

Nagłówek – tworzą go zgrupowane
wiersze, obszar treści tabeli oraz
stopka – utworzona podobnie jak
nagłówek ze zgrupowanych wierszy.
Taki podział umożliwia
przeglądarkom obsługę przewijania
obszaru treści tabeli niezależnie od
przewijania nagłówka i stopki.
Elementy te są jednak rzadko
używane ze względu na
niedostateczną obsługę w
przeglądarkach.

Elementy

thead

tbody

tfoot

są

umieszczane – w tej właśnie
kolejności – w elemencie

table

4.0

<col>

W tym przykładzie każda kolumna z
grupy kolumn ma inną szerokość:

Umożliwia zdefiniowanie wartości
atrybutów dla kolumn tabeli. Stosuj,
gdy chcesz do grupy kolumn
zastosować inne atrybuty niż do
reszty. Jest to element pusty.
Znacznik zamykający jest
zabroniony.

Atrybuty opcjonalne:

align=”left|right|center|jus
tify|char”

– poziome wyrównanie

zawartości komórki kolumny.

3.0

4.0

</table>

char=”znak”

– znak, względem

którego tekst zostanie wycentrowany
w przypadku zastosowania atrybutu

align=”char”

valign=”top|middle|bottom|ba
seline”

– wyrównanie zawartości

komórki kolumny w pionie.

width=”piksele|wartość%|wzgl
ędna_wartość”

– szerokość

kolumny; dominuje nad ustawieniami
dokonanymi w

colgroup

span=”liczba”

– liczba kolumn, do

których ustawienia określone w
elemencie

col

są stosowane.

W tym przykładzie tworzona jest
tabela o 4 kolumnach – 3 z nich
tworzą jedną grupę, a czwarta
drugą. Do grup zastosowano różne
atrybuty:

Definiuje grupę kolumn, na przykład
w celu zróżnicowania formatowania
grup kolumn. Element umieszcza się
w obrębie elementu

table

Atrybuty opcjonalne:

align=”left|right|center|jus
tify|char”

– poziome wyrównanie

zawartości komórek w grupie kolumn.

char=”znak”

– znak, względem

którego tekst zostanie wycentrowany
w przypadku zastosowania atrybutu

align=”char”

valign=”top|middle|bottom|ba
seline”

– wyrównanie zawartości

komórek grupy kolumn w pionie.

width=”piksele|wartość%|wzgl
ędna_wartość”

– szerokość

kolumn; ustawienia wprowadzone w
elemencie

col

dominują nad tymi.

span=”liczba”

– liczba kolumn.

3.0

4.0

Style

<style>

Przykład formatowania dokumentu
za pomocą stylów zdefiniowanych
w elemencie

style

Definiuje styl w dokumencie.
Umieszczany jest w sekcji

head

Atrybuty:

type=”text/css|
text/javascript”

4.0

3.0

3.2

h1 {color: red}
h3 {color: blue}
</style>
</head>
<body>
<h1>Nagłówek 1</h1>
<h3>Nagłówek 3</h3>
</body>
</html>

Przykład osadzonego arkusza
stylów:

<head>
<style type="text/css">
body {background-color:
red}
p {margin-left: 20px}

</style>
</head>

Zewnętrzny arkusz stylów:

Styl wpisany:

<p style="color: red;
margin-left: 20px">
To jest akapit!
</p>

<div>

To jest tekst <div
style="color:#FF0000;">Ten
fragment jest pisany
czcionką w kolorze
czerwonym i stanowi sekcję
dokumentu. Znacznik <div>
wstawia łamanie wiersza
przed i za sekcją. Tu
sekcja div kończy się.

</div> Ten tekst jest już
innego koloru - sprawdź.

Element

div

definiuje sekcję

dokumentu. Umożliwia to stosowanie
do sekcji różnych stylów. Przeglądarki
zazwyczaj wprowadzają przed i za
sekcją łamanie wiersza.

3.0

3.2

<span>

<p>To jest tekst akapitu
<span

style="color:#0000FF;">Tu
wydzielono sekcję w kolorze
niebieskim.</span> Dalej
tekst akapitu jest znów
czarny.</p>

Element

span

definiuje sekcję

dokumentu. Umożliwia to stosowanie
do sekcji różnych stylów. Przeglądarki
zazwyczaj nie wprowadzają przed i za
sekcją łamania wiersza.

4.0

3.0

3.2

Odradzane. Zastąp je stylami.

Informacje o dokumencie

<head>

Element

head

może zawierać

informacje o dokumencie – nie są one
przez przeglądarkę wyświetlane (poza
tytułem, który pojawi się na pasku
tytułu). Umieszczane są w nim
następujące znaczniki:

<base>

<link>

<meta>

<style>

<title>

3.0

3.2

<title>

<head>

<title>Tutuł strony</title>
</head>

Definiuje tytuł dokumentu. Tytuł
będzie wyświetlany na pasku tytułu
przeglądarki.

3.0

3.2

<meta>

Ten element

meta

zawiera słowa

kluczowe dla wyszukiwarek:

Ten element

meta

zawiera opis

strony:

Tu umieszczono informacje o
ostatniej aktualizacji strony:

Tu wykorzystano znacznik

meta

załadowania innej strony:

W elemencie

meta

umieszczane są

opisy i słowa kluczowe
wykorzystywane przez serwisy
wyszukujące. Znacznik zamykający
jest zabroniony.

Atrybut wymagany:

content=”tekst”

– dostarcza

informacji, które są stowarzyszone z
atrybutami

name

http-equiv

Atrybuty opcjonalne:

– definiuje nazwę obiektu

meta

http-equiv=”content-
type|expires|refresh|set-
cookie”

– definiuje dodatkową

akcję, która być wykonana (w
przykładzie obok będzie to
załadowanie innej strony po czasie
równym 6 sekund).

3.0

3.2

<base>

Definiowanie odwołania
domyślnego do zasobów
zewnętrznych:

W sekcji

head

umieść element

base

i podaj w nim pełny adres

URL zasobu:

Definiuje domyślne odwołanie do
zasobów zewnętrznych.

Jeśli strona stanowi układ ramek,
można zastosować element

base

atrybutem

target

, aby wskazać

wszystkim połączeniom na stronie
konkretną ramkę, w której dokumenty
będą otwierane.

Jeśli strona nie jest układem ramek,

3.0

3.2

W dokumencie wystarczy już podać
tylko adres względny:

element

base

z atrybutem

href

pozwoli zdefiniować odwołanie do
zewnętrznych zasobów, takich jak
dokumenty, obrazy i arkusze stylów.

Znacznik zamykający jest
zabroniony.

Atrybuty opcjonalne:

href=”url”

– definiuje pełny adres

URL dla połączeń korzystających z
adresowania względnego.

target =
“_blank|_parent|_self|_top”

–

określa miejsce otwarcia dokumentu:
w nowym oknie | w oknie nadrzędnym
| w bieżącej ramce lub oknie | w
pełnym oknie na wierzchu stosu.

Programowanie

Umożliwia umieszczenie w
dokumencie skryptu, na przykład
skryptu JavaScript. Kod zawarty w
tym elemencie jest wykonywany
natychmiast po załadowaniu strony (o
ile nie jest funkcją). Skrypty
pojawiające się za znacznikiem

będą ignorowane.

Skrypty umieszczaj w znaczniku
komentarza – dzięki temu
przeglądarki, które nie obsługują
skryptów pominą ten kod (inaczej
pojawi się on jako tekst na ekranie).

Atrybut konieczny:

– typ MIME skryptu.

Atrybuty opcjonalne:

charset=”strona_kodowa”

src=”url”

– adres do pliku

zawierającego skrypt.

3.0

3.2

JavaScript:

<!--

Element

noscript

definiuje

zawartość alternatywną, która będzie
przydatna, jeśli skrypt nie będzie mógł

3.0

4.0

document.write("Hej, to
ja!")
//-->
</script>
<noscript>Twoja
przeglądarka nie obsługuje
skryptów
JavaScript!</noscript>

VBScript:

</script>
<noscript>Twoja
przeglądarka nie obsługuje
skryptów
VBScript!</noscript>

zostać wykonany. Przeglądarki, które
obsługują skrypty, ignorują ten
element.

value="0">
<param name="Max"
value="10">
</object>

Definiuje obiekt osadzony. Służy do
umieszczania na stronie multimediów.
Można go umieszczać w sekcji head
lub body. Między znacznikami
<object> i </object> umieszczany jest
tekst alternatywny lub zamienny kod
HTML. Znacznik <param> definiuje
ustawienia dla wstawianego obiektu.

Niektóre atrybuty opcjonalne:

archive=”url1,url2,...,urln”

– lista adresów URL do zasobów
wykorzystywanych przez obiekt.

classid=”url”

– URL określający

implementację obiektu. Składnia
adresu URL zależy od typu obiektu.
Przykładowo, dla zarejestrowanych
obiektów kontrolnych ActiveX
składnia jest następująca:
CLSID:class-identifier

codebase=”url”

–

URL określający

bazę kodu (codebase) dla obiektu.
Składnia zależy od obiektu.

codetype=”typ_MIME”

– typ MIME

obiektu.

data=”url”

– URL odnoszący się do

3.0

4.0

danych obiektu.

height=”piksele|wartość%”

–

wysokość okna obiektu.

width=”piksele|wartość%”

–

szerokość okna obiektu.

name=”tekst”

– nazwa obiektu.

standby=”tekst”

– informacja dla

użytkownika wyświetlana w trakcie
ładowania obiektu.

type=”typ_MIME”

– typ danych

wyspecyfikowanych w atrybucie

data

usemap=”url”

– ulokowanie

stowarzyszonej z obiektem mapy
odnośników.

<param>

Patrz przykład dla obiektu

object

Element

param

pozwala zdefiniować

ustawienia dla obiektów wstawianych
w dokumentach HTML.

Atrybut wymagany:

name=”tekst”

– nazwa parametru.

Atrybuty opcjonalne:

id=”tekst”

– jednoznaczny

identyfikator parametru.

value=”wartość”

–wartość

parametru.

valuetype=”data|ref|object”

–

typ atrybutu

value

type=”typ_MIME”

– typ MIME.

3.0

3.2

Odradzany. W zamian stosuj

Dodatek B. Podstawowe
moduły kodu HTML

W tym dodatku zaprezentowano najczęściej stosowane moduły kodu HTML.

Dokument HTML

<html>

<head>

<title>Nazwa dokumentu</title>

</head>

<body>

Treść dokumentu

</body>

</html>

Nagłówki

<h1>Nagłówek najwyższego poziomu</h1>

<h2>Nagłówek poziomu 2</h2>

<h3>Nagłówek poziomu 3</h3>

<h4>Nagłówek poziomu 4</h4>

<h5>Nagłówek poziomu 5</h5>

<h6>Nagłówek poziomu 6</h6>

Elementy tekstowe

<p>Akapit</p>

<br> //łamanie wiersza

<hr> //linia pozioma

<pre>Tekst preformatowany</pre>

Style logiczne

<em>Do tego tekstu zastosowano emfazę</em>

<strong>Ten tekst wyróżniono</strong>

<code>Tekst pisany czcionką o stałej szerokości</code>

Style fizyczne

<b>Tekst pogrubiony</b>

<i>Tekst pisany kursywą</i>

Połączenia, zakotwiczenia i obrazy-połączenia

<a href="http://adres.com/strona.html/">To jest połączenie</a>

<a href="#nazwa_zakotwiczenia">Zakotwiczenie</a>

<a href="mailto:adres@pocztowy">Prześlij do mnie list</a>

Lista wypunktowana

<ul>

<li>Pierwsza pozycja</li>

<li>Kolejna pozycja</li>

...

<li>Ostatnia pozycja</li>

</ul>

Lista numerowana

<ol>

<li>Pierwsza pozycja</li>

<li>Kolejna pozycja</li>

...

<li>Ostatnia pozycja</li>

</ol>

Lista definicji

<dl>

<dt>Pierwszy termin</dt>

<dd>Definicja</dd>

<dt>Drugi termin</dt>

<dd>Definicja</dd>

...

<dt>Ostatni termin</dt>

<dd>Definicja</dd>

</dl>

Tabela

<tr>

<th>Tekst nagłówka</th>

</tr>

<tr>

<td>Zawartość komórki</td>

</tr>

</table>

Ramki

Prosty układ pionowych ramek:

</frameset>

Prosty układ poziomych ramek:

</frameset>

Złożony układ ramek:

</frameset>

Formularz

<option>Tekst1

<option selected>Tekst2

<option>Tekst3

</select>

</form>

Identyczności

< to to samo co <

> to to samo co >

Przykłady postaci innych elementów

<!—Komentarz

-->

Tekst cytowany.

</blockquote>

Adres1<br>

Adres 2<br>

Miasto<br>

</address>

Dodatek C. Atrybuty
standardowe

Atrybuty specyficzne dla poszczególnych znaczników zostały opisane w dodatku A. Atrybuty
zgromadzone tabelach C1, C2 i C3 są atrybutami standardowym i mogą być zastosowane niemal
do wszystkich znaczników (z pewnymi wyjątkami).

Tabela C1. Atrybuty podstawowe.

Atrybut

Opis

class=”nazwa_definicji_klas
y”

Klasa elementu.

id=”nazwa”

Łańcuch, który identyfikuje obiekt.

style=”definicja_stylu”

Definicja stylu.

title=”tekst”

Tekst, który będzie wyświetlany jako

Atrybuty te są stosowane ze wszystkimi elementami za wyjątkiem:

base

head

html

meta

param

script

style

title

Tabela C2. Atrybuty dotyczące języka.

Atrybut

Opis

dir=”ltr | rtl”

Określa kierunek tekstu.

lang=”kod_języka”

Kod języka.

Atrybuty te są nie stosowane z elementami:

base

frame

frameset

iframe

param

script

Tabela C3. Atrybuty określające dostęp do elementów za pomocą klawiatury.

Atrybut

Opis

accesskey=”znak”

Atrybut określa

tabindex=”liczba”

Określa porządek przechodzenia między polami
formularza.

Atrybuty te są nie stosowane z elementami:

base

frame

frameset

iframe

param

script

Dodatek D. Kolory w HTML

Tabela D.1. Podstawowe kolory i ich nazwy, kod szesnastkowy oraz zapis w systemie RGB.

Kolor

Nazwa

Kod szesnastkowy

Kod RGB

Czarny

black

#000000

rgb(0,0,0)

Czerwony

red

#FF0000

rgb(255,0,0)

Zielony

green

#00FF00

rgb(0,255,0)

Niebieski

blue

#0000FF

rgb(0,0,255)

Żółty

yellow

#FFFF00

rgb(255,255,0)

Jasnoniebieski

lightblue

#00FFFF

rgb(0,255,255)

Fiolet

magenta

#FF00FF

rgb(255,0,255)

Szary

gray

#C0C0C0

rgb(192,192,192)

Biały

white

#FFFFFF

rgb(255,255,255)

000000

000033

000066

000099

0000CC

0000FF

003300

003333

003366

003399

0033CC

0033FF

006600

006633

006666

006699

0066CC

0066FF

009900

009933

009966

009999

0099CC

0099FF

00CC00

00CC33

00CC66

00CC99

00CCCC

00CCFF

00FF00

00FF33

00FF66

00FF99

00FFCC

00FFFF

330000

330033

330066

330099

3300CC

3300FF

333300

333333

333366

333399

3333CC

3333FF

336600

336633

336666

336699

3366CC

3366FF

339900

339933

339966

339999

3399CC

3399FF

33CC00

33CC33

33CC66

33CC99

33CCCC

33CCFF

33FF00

33FF33

33FF66

33FF99

33FFCC

33FFFF

660000

660033

660066

660099

6600CC

6600FF

663300

663333

663366

663399

6633CC

6633FF

666600

666633

666666

666699

6666CC

6666FF

669900

669933

669966

669999

6699CC

6699FF

66CC00

66CC33

66CC66

66CC99

66CCCC

66CCFF

66FF00

66FF33

66FF66

66FF99

66FFCC

66FFFF

990000

990033

990066

990099

9900CC

9900FF

993300

993333

993366

993399

9933CC

9933FF

996600

996633

996666

996699

9966CC

9966FF

999900

999933

999966

999999

9999CC

9999FF

99CC00

99CC33

99CC66

99CC99

99CCCC

99CCFF

99FF00

99FF33

99FF66

99FF99

99FFCC

99FFFF

CC0000

CC0033

CC0066

CC0099

CC00CC

CC00FF

CC3300

CC3333

CC3366

CC3399

CC33CC

CC33FF

CC6600

CC6633

CC6666

CC6699

CC66CC

CC66FF

CC9900

CC9933

CC9966

CC9999

CC99CC

CC99FF

CCCC00

CCCC33

CCCC66

CCCC99

CCCCCC

CCCCFF

CCFF00

CCFF33

CCFF66

CCFF99

CCFFCC

CCFFFF

FF0000

FF0033

FF0066

FF0099

FF00CC

FF00FF

FF3300

FF3333

FF3366

FF3399

FF33CC

FF33FF

FF6600

FF6633

FF6666

FF6699

FF66CC

FF66FF

FF9900

FF9933

FF9966

FF9999

FF99CC

FF99FF

FFCC00

FFCC33

FFCC66

FFCC99

FFCCCC

FFCCFF

FFFF00

FFFF33

FFFF66

FFFF99

FFFFCC

FFFFFF

Document Outline

okładka.jpg
Spis treści.pdf
Wstęp.pdf
Rozdział 1.pdf
Rozdział 2.pdf
Rozdział 3.pdf
Rozdział 4.pdf
Rozdział 5.pdf
Rozdział 6.pdf
Rozdział 7.pdf
Rozdział 8.pdf
Rozdział 9.pdf
Dodatek A.pdf
Dodatek B.pdf
Dodatek C.pdf
Dodatek D.pdf
Wkładka.pdf

Wyszukiwarka

Podobne podstrony:
ABC jezyka html i xhtml
ABC jezyka HTML
M Sokół ABC języka HTML Wstęp
ABC języka HTML i XHTML
ABC JĘZYKA HTML - Rozdział 8. - Ramki i układy ramek, ► Szkoła, HTML
ABC JĘZYKA HTML - Rozdział 2. - Internet, ► Szkoła, HTML
ABC JĘZYKA HTML - Wstęp, ► Szkoła, HTML
ABC JĘZYKA HTML - Dodatek D. - Kolory w HMTL, ► Szkoła, HTML
ABC JĘZYKA HTML - Dodatek B. - Podstawowe moduły kodu HTML, ► Szkoła, HTML
ABC Jezyka HTML
ABC JĘZYKA HTML - Dodatek A. - Znaczniki HTML i ich funkcje, ► Szkoła, HTML
ABC jezyka HTML i XHTML
ABC jezyka html i xhtml
ABC jezyka HTML i XHTML abchtx
ABC jezyka HTML i XHTML Wydanie II
M Sokół ABC języka HTML Rozdział IX HTML a XHTML(1)
M Sokół ABC języka HTML Rozdział VIII Ramki i układy ramek
ABC jezyka HTML abchtm

więcej podobnych podstron