Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Struktura dokumentu

Email Drukuj PDF

Tematy: Czym jest dokument HTML? | Dlaczego stosujemy edytory HTML? | Podstawowe elementy dokumentu | Więcej szczegółów o HEAD | Tytuł dokumentu | Informacje nagłówkowe | Adres bazowy | Porządek w nawigacji | Więcej szczegółów o BODY | Obrazek jako tło strony | Kolor tła strony | Kolor tekstu w dokumencie | Kilka uwag o wlewaniu tekstu | Sekcje dokumentu

logo HTML 5O rozdziale (aktualizacja 15.03.2013): W rozdziale prezentuję ogólną strukturę dokumentu HTML, a więc ramy - prolog, część nagłówkową i ciało dokumentu - do których wstawiamy informacje o samym dokumencie oraz jego właściwą treść. Ze względu na pojawienie się w HTML 5 nowych elementów określających wewnętrzną budowę ciała dokumentu, umieszczamy je w tym rozdziale, sygnalizując tylko ich istnienie w rozdziale o elementach blokowych i liniowych.

Zrozumienie tego rozdziału jest kluczowe dla pisania poprawnie skonstruowanych stron, interpretowanych bez zakłóceń przez przeglądarki internetowe oraz dobrze widocznych w samym Internecie, a przede wszystkim w wyszukiwarkach sieciowych.

Czym jest dokument HTML?

Być może wiele osób sądzi, że strona w języku HTML jest jakimś tajemnym dokumentem, o specjalnym formacie, do tworzenia której potrzebne są specjalistyczne narzędzia i daleko idąca wiedza. Nic z tych rzeczy! Do utworzenia takiej strony nie jest potrzebne nic więcej niż... zwykły edytor tekstów. Może to być, przynajmniej teoretycznie, najprostszy edytor, jak Notatnik, który potrafi zapisywać dokument w postaci tekstowej. Listę dobrych edytorów znajdziesz na stronie HTML dla początkujących.

Przypomnijmy, że w języku HTML 4 wielkość liter w znacznikach jest obojętna, jednak zalecane jest stosowanie małych liter, a więc <h1>, a nie <H1> - w jego kontynuacji, językach XHTML i HTML 5, małe znaczniki są już obowiązkowe!

Przez wiele lat w tym miejscu deklarowaliśmy wsparcie dla standardu kodowania polskich liter ISO-8859-2 w dokumentach HTML, uzasadniając to następująco:

  • Po pierwsze, jest to międzynarodowy standard, przyjęty także w charakterze Polskiej Normy.
  • Po drugie, jest to standard bardziej uniwersalny, gdyż jest dostępny w wielu systemach operacyjnych.

Jednak w ostatnich latach na czoło wysuwa się standard kodowania wyraźnie znacznie bardziej uniwersalny technicznie, mianowicie UTF-8 (Unicode), dziś już dominujący na platformach blogowych (np. WordPress czy Blogger), w aplikacjach webowych typu CMS (jak Joomla, Drupal czy Witryny Google), a także w mediach społecznościowych. Według informacji Google, już na początku 2010 roku około 50 procent stron było już kodowanych w UTF, zatem dzisiaj udział ten musi być znacznie większy.

Należy unikać używania innych "polskich" standardów, a szczególnie Windows-1250, typowego jedynie dla Windows. W tej chwili praktycznie wszystkie systemy operacyjne są obsługiwane przez przeglądarki potrafiące rozpoznawać deklarację strony kodowej, umieszczanej w ramach części nagłówkowej strony (HEAD). W HTML 4 deklaracja obu stron kodowych ma następującą postać:

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
</head>

W przypadku standardu Unicode informacja o stronie kodowej ma następującą postać:

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>

W języku HTML 5 deklaracja strony kodowej została znacznie uproszczona i w przypadku UTF-8 przyjmuje następującą postać:

<head>
<meta charset="UTF-8" />
</head>

Dokument HTML jest więc najzwyczajniejszym plikiem tekstowym, który zawiera jednak pewne osobliwe znaczniki, zwane z angielska "tagami". "Tagi", których jest blisko setka, stanowią wraz z parametrami język HTML. Same składają się z nawiasów kątowych, między którymi znajdują się ściśle określone litery. Na przykład <h1> jest otwierającym znacznikiem tytułu pierwszego stopnia. Większość znaczników składa się z części otwierającej oraz zamykającej, która zawiera dodatkowo tzw. ukośnik (slash).

Gdybyśmy chcieli wprowadzić tytuł drugiego stopnia, powinniśmy napisać:

<h2>Treść tytułu drugiego stopnia</h2>

co w efekcie powinno dać wynik:

Treść tytułu drugiego stopnia

W podobny sposób możemy wprowadzić do dokumentu poziomą linię, posługując się pojedynczym znacznikiem <hr>, dzięki czemu uzyskamy na ekranie przeglądarki


Doszliśmy w tym miejscu do związku dokumentu HTML z przeglądarką World Wide Web. Przeglądarka jest wyspecjalizowanym programem, który interpretuje znaczniki i "przetwarza" je na właściwą postać graficzną. Do tej pory zaprojektowano już wiele przeglądarek, różniących się zaawansowaniem technicznym, a najdoskonalszymi z nich są obecnie programy oparte na pracach Fundacji Mozilla (jak Firefox), Opera firmy Opera Software, Safari firmy Apple, Chrome firmy Google oraz Internet Explorer firmy Microsoft.

Wróćmy jednak do HTML.

Do zbudowania dokumentu HTML nie potrzeba więc niczego więcej jak znajomości języka i prostego edytora tekstów (ale zalecam stosowanie specjalizowanych edytorów!). Powszechnie przyjętym standardem języka HTML jest opublikowany w grudniu 1997 roku HTML 4.0. Obszerny opis specyfikacji, czyli HTML 4.01 Specification (24 grudnia 1999), znajduje się na internetowej stronie http://www.w3.org/TR/html4/ - można tam również pobrać spakowane archiwum. W chwili obecnej (2013 rok) wiele firm i instytucji przetwarza swoje witryny do poziomu HTML 5, który jest jeszcze w stadium opracowywania (Candidate Recommendation - strona http://www.w3.org/TR/html5/) i ma być gotowy jako rekomendacja w 2014 roku. Na rok 2016 przewiduje się udostępnienie wersji 5.1. 

Ważna uwaga: formalnie zalecane jest stosowanie wyłącznie języka wchodzącego w skład oficjalnej specyfikacji HTML. Jest to oczywiście zalecenie, a nie bezwzględny przymus stosowania, którego ignorowanie pociąga za sobą jakiekolwiek sankcje, np. usunięcie witryny z Sieci - przynajmniej w tej chwili. Decyzję o przestrzeganiu lub wykraczaniu poza standard powinien podjąć SAM AUTOR serwisu, który przyjmuje tym samym płynące z tego tytułu konsekwencje. Skutkiem nieprzestrzegania specyfikacji może być to, że niektóre przeglądarki będą wadliwie interpretować przygotowane strony.

Dlaczego stosujemy edytory HTML?

Skoro tworzenie dokumentu jest technicznie tak proste, dlaczego pojawiło się na świecie tak wiele edytorów HTML? Odpowiedź jest także prosta. Zamiast pracowicie wpisywać ręcznie znaczniki, wystarczy kliknąć odpowiedni przycisk lub nacisnąć jakiś skrót klawiszowy, aby wprowadzić odpowiedni znacznik. Bardziej zaawansowane produkty wspomagają tworzenie wyspecjalizowanych elementów, jak ilustracje, tabele, odsyłacze, ramki czy formularze. I na tym właśnie polega istota ich pracy. Nie pozostawiają użytkownika samemu sobie, lecz intensywnie wspomagają jego pracę, znacznie ją przyspieszając i ułatwiając.

W Internecie, np. w grupach dyskusyjnych, pojawiają się często opinie, że "prawdziwy webmaster" nie używa niczego innego niż najprostszy notatnik. Należy stanowczo i zdecydowanie odrzucić takie stanowisko - praca bez wspomagania ze strony specjalizowanego edytora HTML jest oczywiście możliwa, ale jest znacznie bardziej czasochłonna, a przede wszystkim naraża na popełnianie błędów składniowych. Tego rodzaju opinie wprowadzają w błąd niedoświadczonych webmasterów, którzy przejęci nonszalancją "uczonych w piśmie" chcą postępować w podobny sposób. Prawdziwy webmaster to ten, kto tworzy poprawny kod, a nie ten, kto używa najprostszych narzędzi.

Podstawowe elementy dokumentu

Dokument HTML, aby odpowiadał przyjętemu standardowi, powinien zawierać co najmniej trzy elementy - ramę dla całego dokumentu, część nagłówkową oraz część zawierającą treść dokumentu. Choć często spotyka się w Internecie dokumenty nie zawierające wszystkich poleceń, zdecydowanie należy unikać tej maniery.

Wcześniej warto jeszcze powiedzieć, że często stosuje się w dokumentach WWW specjalny prolog (jest to zalecane, gdyż możemy dzięki temu sprawdzać poprawność stron w walidatorze), który identyfikuje poziom używanego języka HTML. Jest on wstawiany jako pierwszy element dokumentu, JESZCZE PRZED otwarciem szkieletu strony, czyli <html>. Prolog jest m.in. wykorzystywany jako oznaczenie poziomu w procesie weryfikacji poprawności składni za pomocą tzw. parserów.

Specyfikacja HTML 5 bardzo uprościła stosowany w HTML 4 prolog i sprowadza się on do następującej konstrukcji:

<!doctype html>

Specyfikacja HTML 4 jest dużo bardziej skomplikowana i przewiduje trzy wersje prologu.

Jeśli dokument jest zgodny ze specyfikacją HTML 4.0.1, możemy stosować prolog:

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

Prolog ten odpowiada wersji STRICT definicji typu dokumentu (DTD), a więc wykluczającej wszelkie elementy prezentacyjne, które specyfikacja HTML 4 uznaje za schyłkowe (deprecated). Wersja jest jest więc okrojonym HTML 4, przedkładającym strukturę nad prezentację.

Niektórzy autorzy stron dodają jeszcze sieciowy adres tej wersji DTD (ma on służyć do ewentualnego pobrania definicji przez przeglądarkę), choć nie jest to bezwzględnie konieczne - nawet specyfikacja HTML nie podaje tego adresu. Tym niemniej, gdy autor stosuje na stronach poziom HTML 4, zaleca się tę właśnie wersję prologu.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Często stosowaną wersją prologu jest tzw. wersja przejściowa ("luźna"):

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

Prolog ten deklaruje dokument jako zawierający wszelkie możliwe elementy i atrybuty HTML, łącznie z wycofanymi, jak i uznanymi za schyłkowe. Specyfikacja HTML sama posługuje się właśnie tym prologiem.

Wersja z adresem sieciowym DTD ma postać:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Szerszą odmianą Transitional jest prolog dla strony zawierającej ramki (jest to po prostu Transitional uzupełniona o ramki) :

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

I jego wersja z adresem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Oczywiście autorzy stron piszący w języku XHTML stosują nieco inne prologi, dostosowane właśnie do potrzeb tego języka.

Parsery przyjmują takie deklaracje jako podstawę badania poprawności składniowej. Najlepiej skorzystać z oficjalnego parsera World Wide Web Consortium:

W3C HTML Validation Service

Warto w tym miejscu powiedzieć kilka słów o programach, które weryfikują składnię offline, czyli na komputerze użytkownika. Wygodnym narzędziem jest CSE 3310 HTML Validator Lite dla Windows 95, firmy Alsoft Internet Solutions, wychwytujący wiele "głupich" błędów, jakie można popełnić w trakcie pracy. Osoba, której zależy na absolutnej zgodności ze standardem, powinna je wprawdzie traktować tylko jako narzędzie pomocnicze, niemniej bardzo przydatne. Niektóre edytory, np. polski kED, zawierają wbudowany walidator Tidy.

Więcej o technikach walidacji piszemy w rozdziale Poprawność dokumentów.

Informacje o DOCTYPE

Wróćmy do szkieletu strony.

<html> </html>

Jest to otwierający i zamykający znacznik dokumentu, a między nimi jest umieszczana cała treść. Znacznik nie jest bezpośrednio widoczny w przeglądarce.

Informacje o HTML

<head> </head>

Znacznik jest umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o dokumencie, w pierwszym rzędzie tytuł strony. W ramach tego znacznika jest umieszczana tzw. część nagłówkowa.

Informacje o HEAD

<body> </body>

Jest to znacznik umieszczany wewnątrz znaczników html, za znacznikami head. Zawiera konkretną treść dokumentu.

Informacje o BODY

Łącznie wygląda to więc następująco (wersje HTML 5 i HTML 4):

HTML 5
<!doctype html>
<html>
<head>
Informacje nagłówkowe o dokumencie, łącznie z tytułem
</head>
<body>
Treść dokumentu - śródtytuły, tekst, grafika, odsyłacze itp.
</body>
</html>
HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
Informacje nagłówkowe o dokumencie, łącznie z tytułem
</head>
<body>
Treść dokumentu - śródtytuły, tekst, grafika, odsyłacze itp.
</body>
</html>

Więcej szczegółów o HEAD

Definiując sekcję nagłówkową <head> możemy wstawić kilka dalszych parametrów, które uzupełniają informacje o stronie.

Tytuł dokumentu

<title> </title>

Ważnym elementem (koniecznie go używaj!) jest tytuł strony, który ukazuje się w belce tytułowej przeglądarki (karty). Zaleca się zwykle nieprzekraczanie 40 znaków. Tytułu nie należy mylić z pierwszym nagłówkiem strony, aczkolwiek oba te elementy mogą mieć oczywiście tę samą treść. Załączony fragment ekranu (stareńka przeglądarka Netscape Navigator) pokazuje w belce treść Netscape - (Kurs języka HTML), gdyż w dokumencie znalazła się definicja <title>Kurs języka HTML</title>.

Polecenie title umieszczaj bezpośrednio za otwierającym znacznikiem head, jeszcze PRZED informacjami meta.

tytuł w belce

Ważna uwaga: Nie używaj w tytułach samych WIELKICH LITER, gdyż wiele wyszukiwarek zignoruje stronę. Nie wpisuj także w ramach title adresów internetowych, gdyż skutek będzie taki sam. Warto także pamiętać, że indeksery nadają zwykle temu znacznikowi wysoki priorytet, a więc warto w nim podać istotne informacje, np. nie "Moja strona domowa", lecz raczej "Psy, koty i inne zwierzaki domowe". Zauważ od razu, że tytuł strony jest widoczny w zakładkach przeglądarki (Ulubione).

Informacje o TITLE

Informacje nagłówkowe

<meta ...>

Jest to opcjonalne polecenie, które bardziej szczegółowo informuje o zawartości dokumentu, np. dla celów katalogowych czy indeksów, wykorzystywanych przez odpowiednie programy, np. wyszukiwarki sieciowe. Zawiera ono trzy atrybuty: HTTP-EQUIV, NAME i CONTENT w kombinacji pierwszy z trzecim lub drugi z trzecim. HTTP-EQUIV definiuje zmienne systemowe, natomiast NAME - zmienne użytkownika.

Chociaż meta jest poleceniem opcjonalnym, niewymaganym dla poprawności dokumentu, używanie go jest zalecane (podkreślam to pogrubieniem i czerwonym kolorem!), gdyż usprawnia funkcjonowanie witryny w Sieci. Meta nie jest zbiorem nikomu niepotrzebnych zaklęć, lecz użytecznym instrumentem współpracującym z przeglądarkami internetowymi i sieciowymi wyszukiwarkami. Wstawienie tych "zaklęć" jest banalną czynnością, a korzyści są niezaprzeczalne. Pamiętaj, że trzeba opisać każdy dokument z osobna, aczkolwiek w wielu sytuacjach wystarczy po prostu skopiować dane meta z jednego dokumentu do pozostałych.

Zwróćmy uwagę na kilka poleceń, które można umieścić w <meta>. Polecamy w szczególności: strona kodowa, opis strony, wyrazy kluczowe, autor strony, data utworzenia.

Strona kodowa dokumentu

W wersji HTML 5, przykładowo:

<meta charset=UTF-8">

W wersji HTML 4, przykładowo:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

Polecenie jest deklaracją strony kodowej dokumentu, według standardu UTF-8 lub ISO-8859-2. Przeglądarki potrafią się automatycznie przestawić na właściwą stronę kodową, zgodnie z podaną deklaracją. Nie jest potrzebna interwencja użytkownika, który nie musi nawet wiedzieć, z jakim standardem kodowania polskich znaków ma do czynienia. Polecenie to jest bezwzględnie zalecane przy tworzeniu stron WWW. Jego brak jest, niestety, powszechnym błędem na stronach HTML-owych nowicjuszy.

Uwaga: aby strona była poprawnie wyświetlana w danym standardzie, np. ISO-8859-2 czu UTF-8, nie wystarczy podać jedynie tę deklarację. Także i polskie litery muszą być zapisane w tym standardzie. To spotykany nierzadko błąd początkujących webmasterów, którzy uważają, że sam charset załatwia sprawę. Użytkownicy dobrego polskiego edytora (np. Pajączka) nie muszą się na szczęście o to martwić, gdyż edytor sam się troszczy o obie sprawy.

Opis strony

<meta name ="description" content="jakaś tam treść">

Polecenie to opisuje zawartość strony. Zalecam stosowanie go, gdyż dzięki niemu ułatwiamy pracę osobom korzystającym z wyszukiwarki. Przykładowo, gdy posłużymy się wyszukiwarką Google, szukając np. stron poświęconym językowi Esperanto, łatwo dostrzeżemy funkcjonalność poleceń TITLE i Description. To, co umieściliśmy w ramach TITLE, zostanie wyświetlone jako tytuł znalezionej strony. Z kolei zawartość Description zostanie wyświetlona niżej, jako opis naszej strony. Gdybyśmy nie użyli Description, wyszukiwarka wyświetli kilka pierwszych wierszy naszego dokumentu, które mogą być zupełnie przypadkowe. Uważnie i świadomie zredagowana zawartość Description da natychmiast orientację co do zawartości strony. Może to być na przykład:

<meta name ="description" content="Esperanto: strona zawiera podstawowe informacje o języku Esperanto, odsyłacze do najważniejszych stron, podręcznik i słowniczek.">

Zaleca się nieprzekraczanie 150-200 znaków - w niektórych specjalistycznych serwisach spotyka się zalecenie "co najwyżej 20-25 wyrazów".

Wyrazy kluczowe

<meta name="keywords" content="jakieś wyrazy kluczowe">

Polecenie informuje o wyrazach kluczowych dokumentu, zwracając przykładową wartość Keywords: HTML, webmaster, kurs, poradnik. Warto stosować wyrazy kluczowe, gdyż ułatwia to pracę sieciowym programom indeksująco-wyszukiwawczym i zwiększa szansę znalezienia strony przez innych użytkowników. To my właśnie decydujemy tutaj, jakie są istotne elementy strony. Jeśli nasza strona zawiera opis jakiegoś produktu, moglibyśmy podać wyrazy kluczowe "marmolada śliwkowa, przemysł, spółdzielnia Lepsze Jutro, żywność". Poszczególne wyrazy kluczowe są oddzielane przecinkami. Dla scharakteryzowania strony zazwyczaj wystarcza kilka, rzadziej kilkanaście wyrazów. Kilkadziesiąt to już absolutny wyjątek. Generalnie, nie powinno się przekraczać 1000 znaków.

Uwaga: nie powtarzaj wyrazów kluczowych, chcąc "podbić" swój ranking (np. sex, sex, sex), gdyż wiele wyszukiwarek może to potraktować jako spam i za karę wykluczyć stronę z indeksu. No i unikaj używania szczególnie popularnych wyrazów kluczowych, poszukiwanych przez internautów, jeśli strona w ogóle się z nimi nie wiąże. To postępowanie nieetyczne. Nie wolno zwabiać na swoje strony kłamliwymi informacjami.

Język dokumentu

<meta http-equiv="content-language" content="pl">

Polecenie informuje o języku strony. Niektóre przeglądarki korzystają z niego przy precyzowaniu zapytań. Dla języka angielskiego użyjemy en, dla amerykańskiego angielskiego en-us, dla niemieckiego de, dla francuskiego fr, dla rosyjskiego ru itd.

Autor strony

<meta name="author" content="imię i nazwisko">

Polecenie informuje o autorze strony.

Nazwa edytora

<meta name="generator" content="nazwa edytora">

Polecenie informuje o użytym narzędziu do tworzenia stron HTML, np. Homesite, Pajączek, Tiger98.

Data ważności dokumentu

<meta http-equiv="expires" content="data i czas">

Polecenie wskazuje przeglądarce, kiedy dokument traci "ważność" i trzeba go wczytać na nowo z Sieci. Data musi być podawana w formacie zdefiniowanym przez dokument RFC850.

Przykład:

<meta http-equiv="expires" content="Wed, 26 Apr 2001 08:21:57 GMT">

Polecenie może być przydatne w przypadku długich dokumentów, których zawartość zmienia się w przewidzianych z góry momentach, jak np. dokumenty o oficjalnym charakterze.

Cache'owanie strony'

<meta http-equiv="pragma" content="no-cache">

Polecenie określa, czy strona ma być cache'owana na lokalnym dysku. Użycie no-cache zakazuje przeglądarce tej czynności i za każdym razem strona jest wczytywana z Sieci.

Odświeżanie strony

<meta http-equiv="refresh" content="x">

Polecenie spowoduje regularne odświeżanie strony co x sekund. Może to mieć praktyczne zastosowanie w przypadku, gdy strona zawiera bardzo często aktualizowane informacje (wiele razy dziennie). Gdy użytkownik korzysta ze strony przez dłuższy czas, strona będzie się sama aktualizowała.

Uwaga: nie stosuj tego polecenia jako narzędzia do "podbijania" wartości swojego licznika wizyt. Goście Twojej strony prędko zrezygnują z wizyt, gdy w trakcie czytania strona będzie się nagle odświeżała. No, chyba że robisz rzeczywiste aktualizacje co pół godziny :-) ...

Automatyczne przekierowanie

<meta http-equiv="refresh" content="x; url=http://.../strona.html">

Polecenie spowoduje automatyczne przekierowanie, czyli wczytanie nowej strony po x sekundach. W Internecie często spotyka się strony z informacją o zmianie adresu, gdy odsyłacz z innej strony jest już nieaktualny. Autor strony pozostawia pod starym adresem informację o zmianie, podając nowy adres, ale opatrując tę stronę zaprezentowanym poleceniem, które spowoduje automatyczne przejście pod właściwy adres po x sekundach.

Data utworzenia

<meta http-equiv="creation-date" content="Tue, 04 Dec 1993 21:29:02 GMT">

Polecenie informuje o dacie utworzenia dokumentu, zwracając wartość (np. sieciowemu indekserowi) Creation-Date: Tue, 04 Dec 1993 21:29:02 GMT.

Indeksowanie strony

<meta name="robots" content="dyrektywa">

Polecenie jest wskazówką dla indekserów, czy strona i jej pochodne mają być indeksowane. Domyślnie stosowane jest indeksowanie, ale możemy podać dyrektywę, wybierając kombinację index/noindex i follow/nofollow.

Index nakazuje indeksowanie strony, noindex zakazuje jej indeksowania. Follow nakazuje indeksowanie stron wskazywanych przez odsyłacze, nofollow zakazuje tej czynności.

Przykład:

<meta name="robots" content="index, nofollow">

Zamiast pisać index, follow, możemy podać all. W miejsce noindex, nofollow możemy użyć none.

Uwaga: nie wszystkie roboty sieciowe rozpoznają tę dyrektywę.

Cenzuralność strony

<META http-equiv="PICS-Label" content='(PICS-1.0 "http://www.rsac.org/ratingsv01.html" l gen false comment "RSACi North America Server" by " Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. " for "http://subnet.virtual-pc.com/~le387818/index.html" on "1996.04.04T08:15-0500" exp "1997.01.01T08:15-0500" r (n 0 s 0 v 0 l 0))'>

Jest to przykład (pochodzący z "HTML Reference Library 4") polecenia definiującego "cenzuralność" (rating) strony. Aby je zastosować, należy zgłosić stronę do serwisu zajmującego się wyceną zawartości stron, np. Recreational Software Advisory Council (RSAC), wypełniając formularz. RSAC przesyła ostateczną treść polecenia. W nawiasie są widoczne wyceny przykładowej strony: nudity - 0, sex - 0, violence - 0, language - 0. Wspomaganie PICS (Platform for Internet Content Selection) zawiera m.in. Pajączek.

Przeglądarka interpretuje zawartość strony według zadeklarowanych wartości i wczytuje stronę albo nie, zależnie od przyjętych w opcjach ograniczeń. Jest to narzędzie, które pozwala blokować dostęp do niektórych stron, np. nieletnim do serwisów pornograficznych.

Informacje o META

Adres bazowy

<base ...>

Polecenie definiuje bazowy adres dokumentu.

<base href="http://www.firma.com/dokument.html">

Polecenie w tej postaci zapewnia poprawność relatywnych odsyłaczy w dokumencie. Niekiedy dokumenty są przenoszone do innych miejsc, gdy wymaga tego porządek na serwerze. Jednak w dokumentach znajdują się zazwyczaj relatywne odsyłacze do innych stron na serwerze, a nie odsyłacze absolutne. Oznacza to, że nie jest w nich podawana pełna ścieżka dostępu, lecz jedynie jej fragmenty. Jest to znacznie wygodniejsze w trakcie konstruowania dokumentu.

Gdy dokument zostanie przeniesiony, może się zdarzyć, że odsyłacze stracą swoją aktualność, gdyż przeglądarka będzie je odnosić do nowego położenia dokumentu. Oczywiście poprawność wymagałaby w takiej sytuacji albo przeniesienia wszystkich dokumentów, do których odsyłacze znajdują się na danej stronie, albo ręcznego poprawienia adresów. Jedno i drugie może być bardzo kłopotliwe, a przeniesienie nawet z jakichś powodów niemożliwe. W takiej sytuacji wygodnym rozwiązaniem jest podanie <base> w nagłówku przenoszonej strony. Przeglądarka będzie automatycznie, "w locie" poprawiać adres w odsyłaczu, kierując się podanym adresem bazowym, który stanowi w tej sytuacji swoistą busolę.

Informacje o BASE

Porządek w nawigacji

<link ...>

Polecenie ma określać hierarchiczny porządek w zespole dokumentów dla celów nawigacyjnych. W tym miejscu warto o nim wspomnieć jedynie w kontekście stylów dołączanych, które w przeglądarce wpływają na postać wyświetlanego dokumentu (będzie o tym mowa w rozdziale poświęconym stylom).

Pełny zestaw poleceń LINK interpretowała jedynie przeglądarka NCSA Mosaic 3 (pamiętasz jeszcze taką nazwę?...)

Informacje o LINK

Więcej szczegółów o BODY

Definiując ciało dokumentu możemy wstawić dodatkowo kilka informacji o stylach, które zadecydują o graficznym tle strony.

Obrazek jako tło strony

W starszej wersji HTML stosowano atrybut background="nazwa_pliku_graficznego", jednak jest on uznany za przestarzały i obecnie zaleca się stosowanie stylów.

<body style="background-image: url(/sciezka/nazwa_obrazka); ">

Na przykład:

<body style="background-image: url(/grafika/lupus.gif); ">

Podany w poleceniu obrazek pokaże się w tle dokumentu w przeglądarce, np.:

Kliknij w tym miejscu, aby zobaczyć przykład

Zauważmy, że niewielki objętościowo obrazek lupus.gif został powielony na szerokość i długość strony. Za pomocą stylów można też określać sposób powtarzania obrazka oraz jego zaczepienia.

Kolor tła strony

W starszej wersji HTML stosowano też atrybut bgcolor="kolor", który pozwalał wybrać kolor tła dokumentu. Obecnie stosuje się w to miejsce style.

<body style="background-color: wartość_koloru; ">

Na przykład:

<body style="background-color: yellow; ">

Kliknij w tym miejscu, aby zobaczyć przykład

Mam nadzieję, że nikogo nie rozbolały oczy od tego przykładu.

Uwaga: w zasadzie powinno się deklarować kolor tła strony, gdyż jeśli tego nie zrobimy, czytelnik strony zobaczy tło zależne od jego własnych ustawień w przeglądarce, białe, szare czy jakiekolwiek inne - autor strony nie ma na to wpływu. Może to "zrujnować" wyświetlanie strony. Ponadto, gdy używamy pliku graficznego jako tła, także podawajmy alternatywny kolor tła strony, gdyż wiele osób wyłącza grafikę w przeglądarce - wtedy widoczny jest jedynie kolor tła strony.

Kolor tekstu w dokumencie

W starszych wersjach HTML stosowano atrybut body text="kolor", za pomocą którego definiowano "hurtowo" kolor tekstu w dokumencie. Obecnie stosuje się style.

<body style="color: wartość_koloru; ">

Na przykład:

<body style="color: #400040; ">

Kliknij w tym miejscu, aby zobaczyć przykład

Analogicznie możemy również określić za pomocą stylów kolory odsyłaczy. Poprzednio stosowano polecenia link="kolor" (standardowy kolor odsyłacza), vlink="kolor" (visited link, określający kolor odsyłacza, który został co najmniej raz użyty), alink="kolor" (active link, określający kolor aktywnego odsyłacza, czyli odsyłacza w trakcie ładowania dowiązanego do niego dokumentu), jednak są to polecenia uznane za przestarzałe.

Obecnie kolory odsyłaczy mozna definiować za pomocą tzw. selektorów pseudoklas - :link, :visited i :hover.

Kilka uwag o wlewaniu tekstu

Bardziej szczegółowy opis formatowania bloków tekstu znajduje się na stronie Elementy blokowe, ale już w tym miejscu warto zasygnalizować podstawowe, związane z tym problemy.

Gdy redagujemy tekst w edytorze, jesteśmy przyzwyczajeni do używania klawisza Enter, aby oddzielać od siebie akapity. Jednak przeglądarka ignoruje znak końca akapitu i mimo oddzielenia od siebie akapitów w edytorze zostaną one złączone w przeglądarce w ciągłą linię. Dlatego każdy akapit powinniśmy umieszczać między parą znaczników <p> </p>. Jeśli wlewamy do edytora HTML tekst z innego źródła, musimy objąć każdy z akapitów osobną parą znaczników. Akapity są w przeglądarce oddzielane dodatkową interlinią, która uwypukla podział.

Możemy też posłużyć się pojedynczym (otwartym) znacznikiem <br>, umieszczanym na końcu wiersza, który pozwoli oddzielić od siebie wiersze, nie wprowadzając interlinii.

Kilka spacji obok siebie jest zamienianych na pojedynczą spację, tak więc nie ma sensu (poza tzw. blokiem preformatowanym) wstawiać większej liczby spacji między wyrazami. Na tej samej zasadzie ignorowane są również tabulatory.

Można jednak wstawiać znak tzw. niełamliwej spacji (&nbsp;), który pozwala wstawić kilka kolejnych spacji. Przykładem jest niniejszy akapit, którego pierwszy wiersz jest odsunięty od lewego marginesu o 8 spacji. Nie poleca się jednak stosowania takiej techniki - znacznie wygodniejsze jest korzystanie ze stylów - przykładowo, wcięcie akapitu można uzyskać za pomocą stylu text-indent.

Sekcje dokumentu

Przyjrzyjmy się na zakończenie nowym elementom blokowym, które zostały wprowadzone w specyfikacji HTML 5. Mają one zastąpić wykorzystywanie polecenia DIV, precyzując rolę fragmentów dokumentu. Chodzi tutaj o polecenia header, nav, article, section, aside i footer, które są tzw. poleceniami semantycznymi, a więc sugerującymi wyszukiwarkom czy innym mechanizmom sieciowym, czym jest dany fragment dokumentu. Poprzednio stosowano zazwyczaj bloki div, ale nadawano im dodatkowe oznaczenia pozwalające wyróżniać rolę danego fragmentu. Teraz mamy jasno zdefiniowane polecenia, które można wykorzystywać przy budowaniu stron - naturalnie w ramach znacznika body. Poniższy rysunek (format SVG) ilustruje schemat.

Layer 1 <nav></nav> <header></header> <aside></aside> <section></section> <footer></footer> <section></section> <article> </article>

Opiszmy schematycznie układ elementów strony. Większy tekst, jak artykuł (article), można podzielić na fragmenty, wyróżniając nagłówek header (nie pomyl ze znacznikiem head w części nagłówkowej strony!), w którym umieszczamy ogólne informacje, jak tytuł, nazwisko autora, wyszukiwarkę itp. Blok nav zawiera z kolei elementy nawigacyjne strony. Główną część tekstu możemy umiescić w jednej czy kilku (nawet wielu) blokach section. Blok aside zawiera poboczne, uzupełniające informacje (o charakterze przypisu do głównej części). Blok footer miesci w sobie informacje umieszczane zwykle w stopce, jak adres, kontakt itp.

Naturalnie widoczne na rysunkiu pozycjonowanie jest przykładowe - autor strony może pozycjonować poszczególne bloki w dowolny sposób, wykorzystując do tego standardowe narzędzia pozycjonowania zawarte w kaskadowych arkuszach stylów.

W HTML 4 stosowano często zastępcze oznaczenia o charakterze semantycznym, nadając blokom div identyfikatory precyzujące ich rolę, np. id=header. W HTML 5 mamy już do dyspozycji dedykowane bloki, a rola div ogranicza się do tworzenia wyizolowanych bloków z treścią.

Informacje o ARTICLE


Informacje o HEADER


Informacje o NAV


Informacje o SECTION


Informacje o ASIDE


Informacje o FOOTER


gość specjalny Helion.pl
 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15279397