R 03 07, HTML
[ Pobierz całość w formacie PDF ]
Rozdział 3.
Wprowadzenie do HTML
Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji
witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych pojęć,
prawdopodobnie zastanawiasz się, kiedy zaczniesz pisać strony WWW. W końcu po to
przecież kupiłeś tę książkę, prawda? Nie będziesz już musiał dłużej czekać! W tym
rozdziale stworzysz swoją pierwszą (choć krótką) stronę WWW, poznasz język HTML
używany do tworzenia stron WWW oraz zapoznasz się z następującymi zagadnieniami:
co to jest HTML i do czego będziesz go używał,
co możesz, a czego nie możesz robić, tworząc strony WWW,
czym są i do czego służą znaczniki HTML.
Czym jest, a czym nie jest HTML?
Przed przystąpieniem do właściwego tworzenia stron WWW musisz zwrócić uwagę na
pewną bardzo istotną sprawę. Otóż powinieneś dowiedzieć się bardzo dokładnie, czym
właściwie jest HTML, co możesz zrobić za jego pomocą i, co ważniejsze, czego zrobić
nie możesz.
HTML
(ang.
HyperText Markup Language
) powstał on w oparciu o język
SGML
(ang.
Standard Generalized Markup Language
), który jest poważnym systemem tworzenia
dokumentów. Tworząc strony WWW, nie musisz wiedzieć zbyt wiele o SGML-u, ale
znajomość najistotniejszej jego cechy, czyli faktu, iż jest to język opisu struktury strony
a nie wyglądu konkretnych jej elementów, może okazać się pomocna. Jeżeli jesteś
przyzwyczajony do graficznych edytorów tekstu typu
WYSIWYG
(ang.
What You See Is
What You Get
), taka koncepcja może być dla Ciebie czymś zupełnie nowym, tak więc
postaram się omówić ją bardzo dokładnie.
HTML opisuje strukturę strony
HTML odziedziczył po swoim przodku, języku SGML, jego najistotniejszą cechę, jest
językiem opisu strony a nie wyglądu poszczególnych jej elementów. Idea polega na
tym, że większość dokumentów posiada pewne cechy wspólne, takie jak nagłówki,
akapity czy listy. Stąd też przed rozpoczęciem pisania można określić, jakiego typu
elementy będą używane i nadać im odpowiednie nazwy (patrz rysunek 3.1).
50
Część 1.
Informacje wstępne
Rysunek 3.1.
Elementy dokumentu
Jeżeli kiedykolwiek korzystałeś z edytora tekstu, wykorzystującego arkusze stylów (np.
Microsoft Word) lub katalogi akapitów (FrameMaker), robiłeś już coś podobnego. Każdy
fragment dokumentu jest tam napisany w konkretnym, wcześniej zdefiniowanym stylu.
W HTML-u zdefiniowany jest pewien określony zestaw stylów, używanych na stronach
WWW: nagłówki, akapity, listy i tabele. Dodatkowo zostały zdefiniowane również
pewne elementy formatowania znaków, jak, na przykład, pogrubienie. Każdy taki
element posiada swoją nazwę i występuje w formie czegoś, co zostało nazwane
znacznikiem. Tworząc stronę WWW, nadajesz różnym elementom strony etykiety
mówiące: „to jest nagłówek” lub: „to jest element listy”.
HTML nie opisuje układu strony
Style w edytorach tekstu i innych programach do graficznego składu stron nie są tylko
nazwami, przypisanymi do poszczególnych elementów strony, zawierają oprócz tego
informacje o formatowaniu tych elementów, takie jak rozmiar i styl użytej czcionki,
wcięcia, podkreślenia itp. Jeżeli więc napiszesz tekst, który powinien być nagłówkiem,
używasz stylu Nagłówek, a odpowiednim formatowaniem zajmuje się już program.
HTML nie posuwa się tak daleko. Nie mówi nic na temat tego, jak powinna wyglądać
strona, kiedy znajdzie się na ekranie. Znacznik HTML wskazuje tylko, że dany element
to nagłówek bądź lista, ale w żaden sposób nie określa, jak ten nagłówek czy lista ma
być sformatowana. I tutaj znów można odnieść się do przykładu autora artykułu i osoby
składającej tekst — to właśnie ona, a nie autor, decyduje o tym, jaką czcionką
wydrukować tytuł i jaki ma być duży. Autor, którym w przypadku stron WWW
będziesz Ty, musi martwić się tylko o to, który fragment tekstu ma być tytułem.
Choć HTML nie mówi wiele o wyglądzie strony po jej wyświetleniu, to jednak kaskadowe arkusze
stylów (w skrócie CSS) dają zaawansowane możliwości formatowania znaczników HTML. Wiele
zmian wprowadzonych w języku HTML 4.0 sprzyja wykorzystaniu CSS. Poznawanie arkuszy
stylów rozpoczniesz w rozdziale 4. — „Zaczynamy od podstaw”, a więcej na ich temat dowiesz się
w rozdziale 10. — „XHTML i arkusze stylów”.
Rozdział 3.
Wprowadzenie do HTML
51
Przeglądarki WWW, oprócz funkcji pobierania stron z sieci, wykonują także całą pracę
związaną z formatowaniem tekstu HTML. Każda przeglądarka, nieważne czy będzie to
Lynx, czy też Netscape, po pobraniu pliku z sieci odczytuje (choć może lepszym
słowem byłoby: przetwarza) znaczniki HTML, a następnie formatuje tekst i elementy
graficzne oraz wyświetla je na ekranie.
Przeglądarka posiada przypisane ustawienia, każdemu elementowi strony przypisany jest
pewien styl wyświetlania na ekranie. Przykładowo, nagłówki wyświetlane są przy użyciu
czcionki większej niż reszta tekstu na danej stronie. Przeglądarka dopasowuje szerokość
tekstu do aktualnego rozmiaru okna, przenosząc odpowiednio wyrazy do nowej linii.
Standardowe ustawienia stylów w przeglądarkach mogą różnić się w zależności od
przeglądarek i platform systemowych. Niektóre z nich mogą korzystać z zupełnie in-
nych czcionek niż pozostałe. I tak, w jednej przeglądarce kursywa będzie wyświetlana,
tak jak powinna, czyli jako pismo pochyłe, ale w innych systemach, które nie mają
możliwości wyświetlania tego typu czcionki na ekranie, zostanie zastąpiona pokreśle-
niem. Innym przykładem mogą być nagłówki, które zamiast być wyświetlane większą
czcionką, będą wypisane wielkimi literami.
Dla projektanta stron WWW oznacza to tyle, że strony tworzone przez niego mogą wy-
glądać bardzo różnie, w zależności od systemu i przeglądarki. Informacje, zawarte na
stronie oraz wszystkie połączenia pozostaną niezmienione, różny będzie jedynie wygląd
na ekranie. Strona, która wygląda wspaniale w systemie, w którym została zaprojekto-
wana i wykonana, może okazać się beznadziejna (albo nawet kompletnie nieczytelna),
kiedy będzie oglądana za pomocą innej przeglądarki na innej platformie systemowej.
Dlaczego akurat tak?
Komuś, kto przywykł do pisania i projektowania na papierze, taka koncepcja może wy-
dać się co najmniej dziwna. Brak kontroli nad układem strony? Cały projekt uzależnio-
ny od tego, gdzie strona będzie oglądana? Przecież to straszne! Dlaczego, do licha, jakiś
system miałby działać w ten sposób?
Być może przypominasz sobie, że w rozdziale pierwszym pisałam, iż jedną z najwięk-
szych zalet WWW jest to, że sieć może być dostępna z każdego rodzaju komputera, bez
względu na typ ekranu czy karty graficznej.
Najważniejszym celem publikowania czegokolwiek na WWW jest to, aby informacje te
mogły trafić do jak największej rzeszy odbiorców na całym świecie. Nie możesz prze-
cież liczyć na to, że wszyscy odbiorcy stron będą dysponowali takim samym sprzętem
jak Ty i na dodatek tak samo skonfigurowanym. WWW bierze te wszystkie różnice pod
uwagę i zrównuje w prawach wszystkie systemy i wszystkie przeglądarki.
WWW jako medium służące do projektowania stron jest nie tylko kolejnym ułatwie-
niem w porównaniu do pracy na papierze. To zupełnie nowy sposób przekazywania
informacji, posiadający całkiem odmienne założenia i cele, bardzo różne od publika-
cji papierowych.
52
Część 1.
Informacje wstępne
Najważniejsze reguły projektowania stron WWW, o których będę bezustannie przypo-
minała w tej książce zapisałam poniżej.
Tak
Nie
Zawsze staraj się projektować stronę tak,
aby działała w większości przeglądarek.
Koncentruj się na dobrej organizacji treści,
tak aby była ona przejrzysta i łatwa
do odczytania i zrozumienia.
Projektując stronę WWW nigdy nie opieraj się
na tym, jak wygląda ona w przeglądarce,
której sam używasz
W tej książce przedstawię wiele fragmentów kodu w HTML-u wraz z rysunkami, naka-
zującymi wygląd tych stron. W wielu wypadkach będziesz mógł porównać, jak dany
przykład prezentuje się w różnych przeglądarkach. Przykłady te wyraźnie zademonstru-
ją, jak zróżnicowany może być wygląd tej samej strony w różnych przeglądarkach.
Pomimo tego, że reguła projektowania stron z ukierunkowaniem na strukturę
a nie na wygląd, jest najlepszym sposobem na stworzenie dobrego kodu w HTML-u,
przeglądając zasoby WWW, możesz być zaskoczony faktem, że dla autorów sporej
większości witryn WWW właśnie wygląd okazuje się być najważniejszy. Na dodatek, są one
projektowane z myślą o konkretnej przeglądarce (zwykle jest to Netscape lub Internet
Explorer). Nie daj się temu zwieść. Jeżeli będziesz trzymał się sugerowanych przeze mnie
reguł, rezultat Twojej pracy będzie dużo lepszy, ponieważ liczba potencjalnych odbiorców
prezentowanych informacji będzie nieporównywalnie większa.
HTML jest językiem znaczników
HTML jest
językiem znaczników
. Pisanie w tego typu języku oznacza tyle, że praca roz-
poczyna się od napisania tekstu, do którego następnie dodawane są specjalne znaczniki,
umieszczane wokół słów, zdań i akapitów. Znaczniki określają różne elementy strony
i dają różny efekt w różnych przeglądarkach. W następnym podrozdziale przeczytasz
więcej o znacznikach i sposobach ich używania.
W języku HTML został zdefiniowany pewien zestaw znaczników, z których możesz
korzystać. W żadnym wypadku nie możesz tworzyć własnych, nowych znaczników, ale
żeby utrudnić całą sprawę powiem, że różne przeglądarki obsługują różne zestawy
znaczników. Aby to lepiej zrozumieć, spójrz na skróconą historię HTML.
Krótka historia znaczników HTML
Podstawowy zestaw znaczników HTML, będący wspólną częścią wszystkich istnieją-
cych kombinacji, jest znany jako HTML 2.0. Jest to dawny standard języka HTML
(specyfikacja jest utrzymywana i rozwijana przez W3 Consortium) i zestaw znaczni-
ków, obsługiwanych przez wszystkie bez wyjątku przeglądarki. W kilku następnych
rozdziałach będziemy mówili właśnie o znacznikach HTML 2.0.
Rozdział 3.
Wprowadzenie do HTML
53
Specyfikacja HTML 3.2 została opublikowana na początku 1996 roku. Aby ją stworzyć, do
W3C dołączyło kilka firm programistycznych, w tym: IBM, Microsoft, Netscape Commu-
nications Corporation, Novell, SoftQuad, Spyglass oraz Sun Microsystems. Nowości wpro-
wadzone w języku HTML 3.2 obejmowały przede wszystkim: tabele, aplety oraz otaczanie
obrazów tekstem. Język ten był w pełni zgodny z wcześniejszym standardem HTML 2.0.
Dodatkowe funkcje, wprowadzone w HTML 3.2, są omówione w dalszej części niniejszej
książki. O tablicach dowiesz się więcej w rozdziale 11. — „Tabele”. Natomiast w rozdziale
13. — „Multimedia: Dodawanie dźwięków, obrazów wideo i innych elementów
multimedialnych” zostały przedstawione aplety Javy.
Język HTML 4.0, który pojawił się w 1997 roku, zawierał wiele nowych cech, które
w porównaniu z językami HTML 2.0 oraz 3.2 dawały większą kontrolę nad projektem
strony. HTML 4.0, podobnie jak HTML 2.0 oraz 3.2, jest tworzony przez Consortium
W3 (W3C). Zarówno Internet Explorer 4 jak i Netscape Navigator 4 obsługują znaczną
część możliwości standardu HTML 4.0, jednak osoby używające wcześniejszych wersji
przeglądarek nie będą mogły korzystać z niektórych możliwości HTML 4.0, takich jak
kaskadowe arkusze stylów czy też dynamiczny HTML.
Kaskadowe arkusz stylów oraz dynamiczny HTML to dodatkowe technologie
współdziałające z HTML, których celem jest zapewnienie większej kontroli nad wyglądem
stron WWW. Arkusze stylów zostaną dokładniej omówione w rozdziale 10
— „XHTML i arkusze stylów”. W rozdziale 21. — „Użycie Dynamicznego HTML-a”
znajdziesz natomiast informacje o podstawowych możliwościach dynamicznego HTML-a.
Układy ramek (wprowadzone w przeglądarce Netscape 2.0) oraz ramki wpisane (wpro-
wadzone w przeglądarce Internet Explorer 3.0) stały się oficjalną częścią specyfikacji
HTML 4.0. Układy ramek zostaną bardziej szczegółowo opisane w rozdziale 12. —
„Ramki i okna połączone”. W tej nowej wersji języka HTML wprowadzono także do-
datkowe poprawki związane z formatowaniem i wyświetlaniem tabel. Jednak bez wąt-
pienia najważniejszą zmianą wprowadzoną w HTML-u 4.0 jest jego znacznie ściślejsza
integracja z arkuszami stylów.
Jeżeli jesteś zainteresowany aktualnym stanem prac nad rozwojem HTML-a, prowadzonych
w W3 Consortium, zajrzyj pod adres
Oprócz znaczników, zdefiniowanych w różnych standardach HTML-a, producenci
przeglądarek wprowadzili sporo nowych znaczników, obsługiwanych tylko przez ich
oprogramowanie. Odpowiedzialność za wprowadzanie nowych rozwiązań spada przede
wszystkim na firmy Microsoft oraz Netscape, które oferują wiele nowych możliwości
obsługiwanych wyłącznie przez ich przeglądarki.
Skomplikowane to wszystko, prawda? Ale nie martw się, nie Ty jeden się w tym gu-
bisz. Nawet doświadczeni projektanci, twórcy setek stron borykają się z problemem,
który zbiór znaczników zastosować, aby osiągnąć równowagę pomiędzy jak najszer-
szym kręgiem odbiorców (uzyskiwanym dzięki użyciu znaczników HTML 2.0 i 3.2)
oraz większą elastycznością projektu, uzyskiwaną kosztem zawężenia grupy przegląda-
rek obsługujących stosowane rozwiązania (tworzone w języku HTML 4.0 i wykorzystu-
jące rozszerzenia charakterystyczne dla konkretnych przeglądarek).
[ Pobierz całość w formacie PDF ]