Wprowadzenie do HTML

Po zakończeniu rozwasań 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 przecies kupiłeś tę ksiąskę, prawda? Nie będziesz jus musiał dłusej czekać! W tym rozdziale stworzysz swoją pierwszą (choć krótką) stronę WWW, poznasz język HTML usywany do tworzenia stron WWW oraz zapoznasz się z następującymi zagadnieniami:

n    co to jest HTML i do czego będziesz go usywał,

n    co mosesz, a czego nie mosesz robić, tworząc strony WWW,

n    czym są i do czego słusą 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ós powinieneś dowiedzieć się bardzo dokładnie, czym właściwie jest HTML, co mosesz zrobić za jego pomocą i, co wasniejsze, czego zrobić nie mosesz.

HTML (ang. HyperText Markup Language) powstał on w oparciu o język SGML (ang. Standard Generalized Markup Language), który jest powasnym systemem tworzenia dokumentów. Tworząc strony WWW, nie musisz wiedzieć zbyt wiele o SGML-u, ale znajomość najistotniejszej jego cechy, czyli faktu, is jest to język opisu struktury strony a nie wyglądu konkretnych jej elementów, mose okazać się pomocna. Jeseli jesteś przyzwyczajony do graficznych edytorów tekstu typu WYSIWYG (ang. What You See Is What You Get), taka koncepcja mose 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, se większość dokumentów posiada pewne cechy wspólne, takie jak nagłówki, akapity czy listy. Stąd tes przed rozpoczęciem pisania mosna określić, jakiego typu elementy będą usywane i nadać im odpowiednie nazwy (patrz rysunek 3.1).

Jeseli kiedykolwiek korzystałeś z edytora tekstu, wykorzystującego arkusze stylów (np. Microsoft Word) lub katalogi akapitów (FrameMaker), robiłeś jus coś podobnego. Kasdy fragment dokumentu jest tam napisany w konkretnym, wcześniej zdefiniowanym stylu.

W HTML-u zdefiniowany jest pewien określony zestaw stylów, usywanych na stronach WWW: nagłówki, akapity, listy i tabele. Dodatkowo zostały zdefiniowane równies pewne elementy formatowania znaków, jak, na przykład, pogrubienie. Kasdy taki element posiada swoją nazwę i występuje w formie czegoś, co zostało nazwane znacznikiem. Tworząc stronę WWW, nadajesz rósnym 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 usytej czcionki, wcięcia, podkreślenia itp. Jeseli więc napiszesz tekst, który powinien być nagłówkiem, usywasz stylu Nagłówek, a odpowiednim formatowaniem zajmuje się jus 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, se dany element to nagłówek bądź lista, ale w saden sposób nie określa, jak ten nagłówek czy lista ma być sformatowana. I tutaj znów mosna 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ć dusy. Autor, którym w przypadku stron WWW będziesz Ty, musi martwić się tylko o to, który fragment tekstu ma być tytułem.

Przeglądarki WWW, oprócz funkcji pobierania stron z sieci, wykonują takse całą pracę związaną z formatowaniem tekstu HTML. Kasda przeglądarka, niewasne czy będzie to Lynx, czy tes Netscape, po pobraniu pliku z sieci odczytuje (choć mose 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, kasdemu elementowi strony przypisany jest pewien styl wyświetlania na ekranie. Przykładowo, nagłówki wyświetlane są przy usyciu czcionki większej nis 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ósnić się w zalesności od przeglądarek i platform systemowych. Niektóre z nich mogą korzystać z zupełnie innych czcionek nis 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ą mosliwoś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, se strony tworzone przez niego mogą wyglądać bardzo rósnie, w zalesności od systemu i przeglądarki. Informacje, zawarte na stronie oraz wszystkie połączenia pozostaną niezmienione, rósny będzie jedynie wygląd na ekranie. Strona, która wygląda wspaniale w systemie, w którym została zaprojektowana i wykonana, mose 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 mose wydać się co najmniej dziwna. Brak kontroli nad układem strony? Cały projekt uzalesniony od tego, gdzie strona będzie oglądana? Przecies to straszne! Dlaczego, do licha, jakiś system miałby działać w ten sposób?

Być mose przypominasz sobie, se w rozdziale pierwszym pisałam, is jedną z największych zalet WWW jest to, se sieć mose być dostępna z kasdego rodzaju komputera, bez względu na typ ekranu czy karty graficznej.

Najwasniejszym 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 mosesz przecies liczyć na to, se wszyscy odbiorcy stron będą dysponowali takim samym sprzętem jak Ty i na dodatek tak samo skonfigurowanym. WWW bierze te wszystkie rósnice pod uwagę i zrównuje w prawach wszystkie systemy i wszystkie przeglądarki.

WWW jako medium słusą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łosenia i cele, bardzo rósne od publikacji papierowych.

Najwasniejsze reguły projektowania stron WWW, o których będę bezustannie przypominała w tej ksiąsce zapisałam ponisej.

W tej ksiąsce 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ósnych przeglądarkach. Przykłady te wyraźnie zademonstrują, jak zrósnicowany mose być wygląd tej samej strony w rósnych przeglądarkach.

HTML jest językiem znaczników

HTML jest językiem znaczników. Pisanie w tego typu języku oznacza tyle, se 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ósne elementy strony i dają rósny efekt w rósnych przeglądarkach. W następnym podrozdziale przeczytasz więcej o znacznikach i sposobach ich usywania.

W języku HTML został zdefiniowany pewien zestaw znaczników, z których mosesz korzystać. W sadnym wypadku nie mosesz tworzyć własnych, nowych znaczników, ale seby utrudnić całą sprawę powiem, se rósne przeglądarki obsługują rósne 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 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.

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ęść mosliwości standardu HTML 4.0, jednak osoby usywające wcześniejszych wersji przeglądarek nie będą mogły korzystać z niektórych mosliwości HTML 4.0, takich jak kaskadowe arkusze stylów czy tes dynamiczny HTML.

Układy ramek (wprowadzone w przeglądarce Netscape 2.0) oraz ramki wpisane (wprowadzone 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 takse dodatkowe poprawki związane z formatowaniem i wyświetlaniem tabel. Jednak bez wątpienia najwasniejszą zmianą wprowadzoną w HTML-u 4.0 jest jego znacznie ściślejsza integracja z arkuszami stylów.

Oprócz znaczników, zdefiniowanych w rósnych 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 mosliwoś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 usyciu znaczników HTML 2.0 i 3.2) oraz większą elastycznością projektu, uzyskiwaną kosztem zawęsenia 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 biesą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ąsce, zawsze załączę przy tym informację, do którego ze standardów HTML-a on nalesy, jak powszechna jest jego obsługa i jak najlepiej wykorzystać go w rósnych przeglądarkach.

Przyszłość z XHTML 1.0

Korzystanie z Internetu nie jest jus ograniczone mosliwoś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 umosliwiają usytkowanie Internetu w czasie podrósy. Odpowiedni sprzęt komputerowy umosliwia takse 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łasliwe 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. Obecna specyfikacja HTML wykracza jus daleko poza swoje mosliwości, prawdopodobnie nie powstanie jus w przyszłości specyfikacja HTML 5.0.

Rozwój Internetu domaga się języka znaczników bardziej elastycznego nis HTML. Zmiany podąsają w kierunku XML (ang. Extensible Markup Languge — elastyczny język znaczników), składnika SGML, umosliwiają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ąskę 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 usyte są praktycznie takie same, więc przystosowanie się do specyfikacji XHTML 1.0 wymaga spełnienia jedynie kilku prostych zasad. W niniejszej ksiąsce znajdziesz wiele rad, jak stosować rósne znaczniki HTML, tak aby strony tworzone przez Ciebie były poprawnie odczytane we wszystkich przeglądarkach internetowych.

Jak wygląda plik HTML

Strony, stworzone w HTML-u to zwykłe pliki tekstowe (ASCII), co oznacza, se nie zawierają one sadnych informacji właściwych dla konkretnej platformy systemowej czy programowej. Mogą być odczytywane praktycznie przez kasdy edytor tekstów (co w praktyce oznacza, se 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.

Kasdy 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.

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ąski będziesz zapoznawał się z tego typu znacznikami.

Kolejna rósnica 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ą niezalesne od wielkości liter, co oznacza, se mosesz 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 <HTML> i <hTmL> W XHTML-u 1.0 sprawy mają się zupełnie inaczej, gdys w tym przypadku wszystkie znaczniki oraz atrybuty muszą być zapisywane małymi literami.

Ćwiczenie 3.1: Tworzenie pierwszej strony HTML

Teraz, kiedy widziałeś jus, jak wygląda strona utworzona za pomocą HTML-a, nadszedł czas na stworzenie własnej strony. Rozpocznij od bardzo prostego przykładu, tak abyś mógł dokładnie zrozumieć, na czym to polega.

Do rozpoczęcia pisania kodu w HTML-u nie jest potrzebny serwer WWW, dostawca usług internetowych ani nawet podłączenie do Internetu. Wystarczy tylko jakiś edytor, w którym będziesz pisał kod oraz przeglądarka, abyś mógł ujrzeć efekty pracy.

Cała witryna WWW, czyli strony i połączenia między nimi, mose powstać z dala od jakiejkolwiek sieci. Właściwie, nie będziesz jej potrzebował, aby zapoznać się z większością materiału z tej ksiąski. O tym, jak opublikować informacje, tak aby były widoczne dla innych, opowiem w dalszej kolejności.

Po pierwsze, będziesz potrzebował edytora tekstów, czyli programu, który zapisuje pliki w formacie ASCII. Ten format to zwykły tekst, nie zawierający sadnego formatowania czcionek i znaków specjalnych. W systemie Windows dobrymi, prostymi (i darmowymi, bo dołączanymi do systemu operacyjnego!) edytorami są takie programy, jak Notatnik, WordPad (Windows 95), Write (Windows 3.x) oraz DOS Edit. Dostępnych jest takse wiele programów shareware’owych, przeznaczonych dla systemów DOS, Windows 3.1, Windows 95/98, Windows NT, Macintosh oraz Linux. Jeśli wyświetlisz w przeglądarce witrynę https://www.download.com/ i w polu Search wpiszesz hasło „Text editors”, to odnajdziesz wiele programów, które będziesz mógł skopiować i wykorzystać.

Jeseli dysponujesz tylko dusym edytorem, takim jak Microsoft Word, nie wpadaj w panikę. Przecies mosna go usywać równies, tak jak zwykłego, prostego edytora ASCII, choć jest to trochę bardziej skomplikowane. Kiedy wybierzesz opcję „Zapisz” lub „Zapisz jako”, ujrzysz menu z formatami, w których mosesz zapisać plik. Jednym z nich powinien być „Plik tekstowy”, „Plik tekstowy ze znakami podziału wiersza” lub „MS-DOS tekst”. Wszystkie te opcje umosliwiają zapisanie pliku jako tekstu ASCII, tak jak zrobiłby to zwykły edytor tekstu. W przypadku plików HTML, jeseli będziesz miał wybór pomiędzy opcjami „MS-DOS tekst” i „Plik tekstowy”, wybierz „MS-DOS tekst” z opcją „Znaki podziału wiersza”, jeseli taka jest dostępna.

Pewnie zapytasz teraz, co z tym mnóstwem darmowych i komercyjnych edytorów HTML, o których mówi się, se są bardzo pomocne w tworzeniu stron WWW?

Większość z nich to właściwie zwykłe edytory ASCII, posiadające dodatkowe przyciski, które umosliwiają wstawianie znaczników. Jeseli posiadasz jeden z tych edytorów, proszę bardzo, mosesz go usywać. Ale jeseli posiadasz bardziej złosony edytor, ukrywający znaczniki HTML, odłós go na bok na jakiś czas i skorzystaj z edytora ASCII. W dodatku A, pod tytułem: — „Inne źródła informacji”, w podrozdziale: — „Edytory i konwertery HTML”, podane zostały adresy witryn, na których mosesz znaleźć zarówno darmowe, jak i komercyjne edytory HTML pracujące w wielu rósnych systemach operacyjnych.

Uruchom edytor i wpisz ponisszy kod. W tej chwili nie musisz jeszcze rozumieć znaczenia tego, co piszesz. Wszystkiego dowiesz się z dalszej lektury tego rozdziału.

To jest tylko prosty przykład, w sam raz na początek.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'

'https://www.w3.org/TR/xhtml1/DTD/transitional'>

<HTML>

<HEAD>

<TITLE>Mój pierwszy dokument</TITLE>

</HEAD>

<BODY>

<H1>To jest dokument HTML</H1>

</BODY>

</HTML>

Po utworzeniu pliku HTML zachowaj go na dysku. Jeseli usywasz edytora typu Microsoft Word, pamiętaj, aby wybrać opcję „Zapisz jako” i zapisać plik w formacie tekstowym. Wybierając nazwę pliku, zastosuj się do ponisszych reguł:

n    plik powinien posiadać rozszerzenie .html (.htm w systemie DOS lub Windows 3.x), na przykład, mojplik.html, tekst.html lub index.htm. Większość oprogramowania wykorzystywanego do pracy w sieci WWW wymaga tego rozszerzenia, tak więc dobrze jest od razu wyrobić sobie nawyk usywania go;

n    nazwy powinny być krótkie i proste. Nie usywaj spacji i znaków specjalnych, cyfry i litery w zupełności wystarczą.

Ćwiczenie 3.2: Oglądanie strony

Teraz, kiedy plik z kodem HTML jest jus gotowy, mosesz uruchomić przeglądarkę. Podłączenie do sieci nie jest w tym momencie potrzebne, bowiem nie będziesz się łączył z sadnym zdalnym serwerem. Przeglądarka lub inne oprogramowanie sieciowe mose wysyłać na ekran komunikaty, skarsące się na brak połączenia, ale szybko powinny one przestać się pojawiać i pozwolić na dalszą pracę.

Gdy jus uda się uruchomić przeglądarkę, poszukaj opcji menu lub przycisku o nazwie „Otwórz plik”, „Otwórz lokalny” lub po prostu „Otwórz”. Wybór tej opcji pozwoli Ci na przeglądanie lokalnego dysku. Polecenie „Otwórz plik” (lub jego odpowiednik) powoduje, se przeglądarka odczytuje plik HTML z dysku lokalnego, a następnie przetwarza go i wyświetla tak samo, jak pliki otrzymywane z sieci WWW. Opcja ta umosliwia tworzenie i testowanie stron HTML w zaciszu własnego domu.

Jeseli w tym momencie nie zobaczysz czegoś, co będzie przypominało stronę, przedstawioną na rysunku 3.2 (jeseli zauwasysz, se czegoś brakuje lub jeseli cały tekst będzie wyglądał tak, jak nagłówek), wróć do edytora tekstów i porównaj plik z treścią przykładu. Upewnij się, czy wszystkie znaczniki mają swoje zakończenia i czy kasdy znak < posiada swój odpowiedni znak >. Nie musisz w tym celu wychodzić z przeglądarki — wykonaj poprawki i zachowaj plik ponownie pod tą samą nazwą.

Następnie wróć do przeglądarki i odszukaj przycisk lub pozycję w menu o nazwie „Odświes” (w przeglądarce Internet Explorer) lub „Refresh” (w przeglądarce Netscape Navigator). Przeglądarka odczyta nową wersję pliku, no i proszę, w ten sposób mosesz przeglądać i edytować plik as do momentu, kiedy będzie taki, jak chcesz.

Jeseli w przeglądarce pojawi się treść zapisana w HTML-u a nie sformatowany dokument z rysunku 3.4, upewnij się, czy plik ma rozszerzenie .htm lub .html. Rozszerzenie jest dla przeglądarki niesłychanie istotną informacją, mówi jej bowiem, se ma traktować czytany plik jako HTML, stąd tes musisz być w tym miejscu bardzo uwasny.

Jeseli strona wygląda naprawdę źle, to znaczy, jeseli jest pusta lub zawiera jakieś dziwne znaki, oznacza to, se coś jest nie w porządku z plikiem źródłowym. Jeśli utworzyłeś go za pomocą zaawansowanego edytora tekstu, otwórz plik HTML w edytorze ASCII. Mose się zdarzyć, se nie będziesz mógł odczytać tego pliku lub tes zamiast kodu HTML pojawią się jakieś niezrozumiałe znaki, będzie to oznaczało, se zapisałeś plik w niewłaściwym formacie. W takiej sytuacji musisz przejść do edytora, w którym utworzyłeś plik i zapisać go ponownie jako zwykły tekst. Później spróbuj ponownie obejrzeć stronę w przeglądarce. Jeseli nadal nie wszystko będzie w porządku, powtarzaj te czynności as do osiągnięcia posądanego efektu.

Krótka uwaga na temat formatowania

W trakcie przetwarzania strony przez przeglądarkę wszelkie próby formatowania dokonane ręcznie, to znaczy dodatkowe spacje, znaki tabulacji, znaki końca akapitu itp., są ignorowane. Jedyną rzeczą, wpływającą na formatowanie strony są znaczniki HTML. Jeseli poświęcisz mnóstwo czasu na skrupulatne formatowanie tekstu w pliku tekstowym, tworząc przejrzyste akapity i nagłówki czy tes równiutkie kolumny liczb, ale nie umieścisz między tym wszystkim sadnego znacznika, przeglądarka pokase cały tekst jako jeden akapit i cały wysiłek pójdzie na marne.

Wielką zaletą ignorowania wszelkich niewidocznych znaków (spacji, tabulacji i znaków końca akapitu) jest to, se znaczniki mogą być umieszczane w dowolnym miejscu.

Ponissze przykłady, choć z pozoru rósnią się od siebie, dadzą identyczny efekt w przeglądarce. Przekonaj się o tym sam.

<H1>Jeśli miłość karmi się muzyką, nie przestawaj grać.</H1>

<H1>

Jeśli miłość karmi się muzyką, nie przestawaj grać.

</H1>

<H1>Jeśli miłość karmi się muzyką, nie przestawaj grać.  </H1>

<H1> Jeśli miłość karmi się muzyką, nie
przestawaj grać. </H1>

Programy pomocne w tworzeniu plików HTML

W tej chwili cała teoria znaczników mose wydawać Ci się prawdziwym koszmarem, szczególnie, jeseli nie do końca zrozumiałeś pierwszy przykład (nie przejmuj się tym — ja równies miałam z nim małe problemy, pomimo tego, se sama go napisałam). Przecies nie sposób zapamiętać wszystkich znaczników, a wstawianie ich we właściwej kolejności to strasznie męcząca praca.

Na rynku freeware i shareware istnieje mnóstwo programów do edycji plików HTML. Większość z nich to edytory tekstu, wzbogacone o przyciski lub opcje menu, które umosliwiają wstawianie do tekstu odpowiednich znaczników. Programy te są bardzo posyteczne z następujących względów: dzięki nim nie musisz pamiętać wszystkich znaczników i nie musisz tracić czasu na ich wpisywanie.

A co z edytorami graficznymi typu WYSIWYG (ang. What You See Is What You Get)? Jest ich przecies tak wiele na rynku. Problem polega na tym, se tak naprawdę pojęcie WYSIWYG nie ma zastosowania w przypadku HTML-a, bowiem rezultat końcowy jest uzalesniony od przeglądarki.

A zatem, jeśli tylko zdajesz sobie sprawę z tego, se wyniki wykorzystania edytorów WYSIWYG mogą być rósne, to będziesz mógł ich usywać do tworzenia prostych dokumentów HTML. Jednak w przypadku tworzenia profesjonalnych witryn WWW oraz wykorzystywania zaawansowanych mosliwości języka HTML, programy tego typu okazują się niewystarczające i trzeba skorzystać ze zwykłego edytora ASCII. Jeseli nawet zamierzasz wykonać część pracy za pomocą tego typu edytora, radzę Ci, abyś na jakiś czas go odstawił i przebrnął przez przedstawiane przeze mnie przykłady, korzystając z edytora ASCII, co pomose Ci dobrze poznać i zrozumieć zasady działania HTML-a.

Oprócz zwyczajnych edytorów HTML oraz edytorów WYSIWYG, na rynku mosna znaleźć takse programy do konwersji, które zamieniają pliki wielu popularnych edytorów tekstu na kod HTML. Posiadając odpowiedni zestaw szablonów, mosesz pisać tekst w swoim ulubionym edytorze, a następnie przekształcić gotowy dokument do formatu HTML.

W wielu przypadkach programy do konwersji mogą okazać się niezmiernie przydatne, szczególnie, jeseli posiadasz sporą ilość gotowych dokumentów, które trzeba jak najszybciej opublikować w sieci WWW. Jednakse występują tu te same problemy, o których wspominałam przy omawianiu edytorów WYSIWYG, ostateczny wygląd jest mocno uzalesniony od przeglądarki, a wiele zaawansowanych mosliwości edytorów nie da się bezpośrednio przełosyć na HTML, który posiada jednak pewne ograniczenia.

Żadna konwersja nie zmusi HTML-a do robienia czegoś, czego jeszcze nie potrafi. Jeseli program konwersji natrafi na coś, czego nie mosna zapisać za pomocą znaczników HTML-a, na pewno sam automatycznie nie rozwiąse tego problemu (a jeseli będzie próbował, mose to przynieść dziwne rezultaty, które będziesz musiał jeszcze długo ręcznie poprawiać).

Jak jus wspominałam, w dodatku A znajdziesz wiele adresów witryn WWW poświęconych edytorom HTML aktualnie dostępnym na rynku. Jak na razie, jeśli dysponujesz prostym edytorem HTML, będziesz go mógł wykorzystać do tworzenia przykładów podanych w niniejszej ksiąsce. Nawet jeśli dysponujesz wyłącznie edytorem tekstów, to tes nie będziesz miał sadnego problemu, po prostu będziesz musiał trochę więcej pisać.

Podsumowanie

W niniejszym rozdziale nauczyłeś się pewnych podstawowych pojęć związanych z językiem HTML oraz definiowania dokumentu tekstowego jako strony WWW. Dowiedziałeś się takse odrobinę o historii HTML i powodach, dla których specyfikacja tego języka była zmieniana kilka razy od czasów jego powstania.

Za pomocą znaczników struktury strony, tytułu i nagłówka utworzyłeś swoją pierwszą stronę. Nie było as tak źle, nieprawdas? W następnej lekcji pogłębisz swoje wiadomości, dowiadując się więcej o dodawaniu nagłówków, tekstu i list do swojej strony.

Warsztat

Skoro masz jus za sobą małe wprowadzenie do HTML i utworzyłeś jus swoją pierwszą stronę, mam dla Ciebie kilka ćwiczeń, które pomogą Ci lepiej zrozumieć omawiany materiał. Najpierw przygotowałam kilka pytań i odpowiedzi związanych z formatowaniem w HTML, po których nastąpi króciutki quiz, odpowiedzi znajdziesz na końcu. Ćwiczenia zachęcą Cię do wypróbowania kodu nieco bardziej zaawansowanej strony WWW.

Pytania i odpowiedzi

P.  Czy mogę w dowolny sposób sformatować tekst w HTML?

O. Mosesz w pewien sposób sformatować ciąg znaków, na przykład, wprowadzić kilka słów czcionką pogrubioną. Znaczniki w HTML 3.2 (poprzedniku HTML 4.0) umosliwiły zmianę rozmiaru i koloru czcionek w tekście (usytkownikom usywającym przeglądarek, które rozpoznają znaczniki, m.in. przeglądarki Netscape i Microsoft Internet Explorer). Znaczniki utorowały drogę dla formatowania arkuszy stylów (CSS) w HTML 4.0. W rozdziale 6. poznasz więcej technik związanych z formatowaniem tekstu.

P. Usywam systemu Windows. Mój edytor tekstowy nie umosliwia zapisania pliku tekstowego w sadnym innym formacie, oprócz .txt. Jeśli jako nazwę pliku wpiszę index.html, mój edytor zapisze go jako index.html.txt. Co mogę w tej sytuacji zrobić?

O. Mosesz zmienić nazwę pliku jus po jego utworzeniu, tak aby zawierał rozszerzenie html lub htm. Jeśli jednak będziesz musiał zmienić nazwy większej ilości plików, będzie to nieco męczące. Do tworzenia stron WWW mógłbyś w takim razie usywać innego edytora tekstowego lub edytora HTML.

Quiz

1. Co oznacza wyrasenie HTML?

2. Jaka jest podstawowa funkcja HTML?

3. Dlaczego HTML nie określa układu strony?

4. Która wersja HTML-a obsługuje znaczniki akceptowane przez wszystkie przeglądarki?

5. Jaka jest podstawowa struktura znacznika HTML?

Odpowiedzi

1. HTML oznacza Hypertext Markup Language.

2. HTML definiuje zestaw podstawowych stylów dla stron WWW (nagłówki, paragrafy, listy, tablice, styl znaków, itd.).

3. HTML nie określa układu strony, poniewas jest zaprojektowany tak,
aby był niezalesny od systemu. Uwzględnia rósnice pomiędzy rósnymi systemami i w jednakowy sposób traktuje wszystkie przeglądarki i systemy.

4. Znaczniki akceptowane przez wszystkie przeglądarki znajdują się w specyfikacji HTML 2.0, najstarszym standardzie języka HTML. Jest to zestaw znaczników, które wszystkie przeglądarki muszą obsługiwać. Znaczniki HTML 2.0 mogą być usywane wszędzie.

5. Większość znaczników HTML posiada znacznik otwierający i zamykający, zaś pomiędzy nimi znajduje się tekst objęty działaniem znacznika. Znaczniki są zawarte w nawiasach (< >). Znacznik początkowy inicjuje daną funkcję, a następnie znacznik końcowy, poprzedzony ukośnikiem ( ), kończy jej działanie.

Ćwiczenia

1. Przed rozpoczęciem projektowania własnych stron, z pewnością warto obejrzeć istniejące jus strony. Na szczęście, pod ręką masz mnóstwo materiałów źródłowych. Kasda ze stron odczytywanych w Twojej przeglądarce jest zapisana w formacie HTML. (Prawie nigdy nie oglądasz kodu źródłowego załadowanej strony — wszystko, co jest widoczne na stronie, to jus wynik przetworzonego kodu).

Większość przeglądarek WWW umosliwia Ci obejrzenie źródłowego kodu HTML wyświetlanej strony. Przykładowo, jeśli usywasz przeglądarki Internet Explorer 5.0, kod źródłowy wyświetlanej strony mosesz zobaczyć za pomocą opcji Widok/Źródło. W przeglądarce Netscape Navigator/Communicator wybierz opcję View/Page Source.

Spróbuj załadować typową stronę główną i obejrzeć jej źródło. Przykładowo, rysunek 3.3 przedstawia stronę główną popularnego portalu AltaVista, dostępną pod adresem https://www.altavista.com/.

Źródłowy kod HTML strony głównej portalu AltaVista został przedstawiony na rysunku 3.4.

2. Obejrzyj kody źródłowe ulubionych stron WWW. Powinieneś jus zauwasać pewne podobieństwa w sposobie organizacji stron i rozpoznawać usywane znaczniki HTML. Bardzo wiele o HTML-u mosna nauczyć się, porównując kod źródłowy z tekstem wyświetlonym w przeglądarce.