93
3
Zaczynamy od podstaw
Rozdział 3.
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:
n co to jest HTML i do czego będziesz go używał,
n co możesz, a czego nie możesz robić, tworząc strony WWW,
n czym są i do czego służą znaczniki 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 to skrót od angielskiego 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 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 rys. 3.1).
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”.
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.
Notatka
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”.
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 innych 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śleniem. 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ą wyglą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 zaprojektowana 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.
Komuś, kto przywykł do pisania i projektowania na papierze, taka koncepcja może wydać się co najmniej dziwna. Brak kontroli nad układem strony? Cały projekt uzależniony 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ż j edną z największych 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 przecież 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łatwieniem 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 publikacji papierowych. Najważniejsze reguły projektowania stron WWW, o których będę bezustannie przypominała
w tej k siąż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, nakazują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 zademonstrują, 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. Pisanie w tego typu języku oznacza tyle, że praca rozpoczyna 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.
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 znacznikó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.
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 Communications Corporation, Novell, SoftQuad, Spyglass oraz Sun Microsystems. Nowości wprowadzone 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 Netscape 2.0) oraz ramki wpisane (wprowadzone w Internet Explorerze 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 dodatkowe poprawki związane z formatowaniem i wyświetlaniem tabel. Jednak bez wątpienia 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 http://www.w3.org/MarkUp/.
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 gubisz. 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 najszerszym 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ądarek obsługujących stosowane rozwiązania (tworzone w języku HTML 4.0 i wykorzystujące rozszerzenia charakterystyczne dla konkretnych przeglądarek). Aby być na bieżąco z wszystkimi nowościami w tej dziedzinie, trzeba poświęcić naprawdę mnóstwo czasu i energii. Kiedy będę przedstawiała jakiś znacznik w tej książce, zawsze załączę przy tym informację, do którego ze standardów HTML-a on należy, jak powszechna jest jego obsługa i jak najlepiej wykorzystać go w różnych przeglądarkach.
Korzystanie z Internetu nie jest już ograniczone możliwościami sprzętowymi i oprogramowaniem komputera. Łatwy dostęp do Internetu za pomocą WebTV zachęca do spędzania wielu godzin przed ekranem telewizora. Programy zarządzające informacją osobistą (Personal Information Managers) i palmtopy umożliwiają użytkowanie Internetu w czasie podróży. Odpowiedni sprzęt komputerowy umożliwia także korzystanie z sieci osobom niepełnosprawnym. W nowym tysiącleciu Internet stał się efektywnym, powszechnie dostępnym sposobem komunikacji i edukacji.
Wiele nowszych technologii, opracowanych dla urządzeń przenośnych, nie jest w stanie w pełni współpracować ze starszymi specyfikacjami języka HTML. Urządzenia te nie mają takich mocy przetwarzania danych jak komputery stacjonarne, więc są znacznie mniej pobłażliwe dla nieefektywnego kodu programu. Twórcy specyfikacji HTML starali się przystosować do postępujących zmian, lecz ograniczenia, jakim HTML podlega, stawały się coraz bardziej widoczne. Ponieważ obecna specyfikacja HTML wykracza już daleko poza jej możliwości, prawdopodobnie nie powstanie już w przyszłości specyfikacja HTML 5.0
ostatnie zdanie jest nie do końca zrozumałe
.
Rozwój Internetu domaga się języka znaczników bardziej elastycznego niż HTML. Zmiany podążają w kierunku XML (skrót od Extensible Markup Languge — elastyczny język znaczników), składnika SGML, umożliwiającego wykorzystanie indywidualnie definiowanych znaczników. I w tym momencie na scenę wkracza XHTML 1.0.
XHTML 1.0, napisany w XML, jest standardem stworzonym z myślą o przyszłości. Zapewne zastanawiasz się teraz, dlaczego czytasz książkę o HTML 4 zamiast o XTML 1.0? Pozwól mi wyjaśnić tą kwestię.
Technicznie języki XHTML 1.0 i HTML 4 są bardzo podobne do siebie. Znaczniki i atrybuty w nich użyte są praktycznie takie same, więc przystosowanie się do specyfikacji XHTML 1.0 wymaga spełnienia jedynie kilku prostych zasad. W niniejszej książce znajdziesz wiele rad, jak stosować różne znaczniki HTML, tak aby strony tworzone przez Ciebie były poprawnie odczytane we wszystkich przeglądarkach internetowych.
Strony, stworzone w HTML-u to zwykłe pliki tekstowe (ASCII), co oznacza, że nie zawierają one żadnych informacji właściwych dla konkretnej platformy systemowej czy programowej. Mogą być odczytywane praktycznie przez każdy edytor tekstów (co w praktyce oznacza, że mogą je odczytywać wszystkie edytory tekstów, o czym jeszcze powiem w dalszej części rozdziału, w podrozdziale pod tytułem: „Programy pomocne w tworzeniu plików HTML”). Plik HTML zawiera następujące elementy:
n właściwy tekst strony,
n znaczniki HTML, określające elementy strony, jej strukturę, sposoby formatowania i hiperpołączenia do innych stron lub informacji innego rodzaju.
Większość znaczników ma następującą postać:
<NazwaZnacznika>tekst</NazwaZnacznika>
Nazwa znacznika (tu NazwaZnacznika) ujęta jest w nawiasy kątowe.
Każdy znacznik składa się zasadniczo z dwóch części: znacznika otwierającego i zamykającego, pomiędzy którymi zawarty jest tekst, którego dotyczą. Znacznik otwierający „włącza” pewien sposób formatowania (nagłówek, pogrubienie itp.), a zamykający go „wyłącza”. Znacznik otwierający (na przykład, <p> dla początku akapitu) i znacznik zamykający (na przykład, </P> dla końca akapitu) tworzą tzw. element HTML.
Znaczniki HTML to informacje zawarte w nawiasach kątowych (<>), które definiują elementy strony lub sposób ich formatowania
Zwróć baczną uwagę na różnicę pomiędzy ukośnikiem (/) i znakiem backslash (\), który jest używany w DOS-ie i Windows jako element nazwy dysku w ścieżce dostępu do pliku (np. C:\WINDOWS). Jeżeli przypadkiem pomylisz ze sobą te dwa znaki, przeglądarka nie rozpozna znacznika końcowego i niepoprawnie sformatuje stronę.
Nie wszystkie znaczniki HTML mają swój początek i koniec. Niektóre z nich są pojedyncze, inne z kolei są swego rodzaju „pojemnikami”, które zawierają pomiędzy nawiasami dodatkowe informacje. Jednak w XHTML-u 1.0 wszystkie znaczniki muszą mieć koniec lub zakończenie. W miarę czytania książki będziesz zapoznawał się z tego typu znacznikami.
Kolejna różnica pomiędzy HTML-em 4.0 oraz XHTML-em 1.0 polega na zapisywaniu znaczników oraz ich atrybutów małymi literami. Znaczniki HTML są niezależne od wielkości liter, co oznacza, że możesz zapisywać je wielkimi, małymi bądź zarówno wielkimi jak i małymi literami. Tak więc <html> oznacza dokładnie to samo co ...
lukaszwalda