Wstęp 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órcą języka HTML jest Tim Berners-Lee. 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 . 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:To jest zawartość (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:......

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):, , np. , , ale są wyjątki. Oto niektóre z nich: o

– znacznik akapitu (w zasadzie istnieje znacznik zamykający,

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 to to samo co . 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 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 htmlTo jest moja pierwsza strona WWW.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 . Informuje on przeglądarkę, że jest to początek dokumentu HTML. Ostatnim znacznikiem kodu jest znacznik – jak już wiesz, jest to znacznik zamykający i informuje on przeglądarkę, że na nim kończy się dokument HTML. Znaczniki i informują, że wszystko, co znajduje się między nimi stanowi dokument HTML. Nową stronę będziesz zawsze rozpoczynał od znacznika i kończył ją znacznikiem . Znaczniki i 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 , . 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 , . One właśnie wyznaczają drugi element strony WWW – obszar treści. Para , 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 . Najczęściej są to informacje przydatne przeglądarkom lub słowa kluczowe wykorzystywane przez serwisy wyszukujące (coraz rzadziej jednak). W znaczniku 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 ? Niektóre serwisy wyszukujące korzystają z atrybutów znacznika 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"):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

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

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

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. 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ą. 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: , . Znaczniki nie są wrażliwe na wielkość liter. Dokument HTML otwiera znacznik , a zamyka znacznik . 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 i . 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 . Najczęściej są to informacje przydatne przeglądarkom lub słowa kluczowe wykorzystywane przez serwisy wyszukujące. W znaczniku 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:

To jest nagłówek pierwszego poziomu

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 parę znaczników nagłówka, na przykład

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

Wydruk 3.2. Akapity tekstu

Koty duże

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:

Koty duże