BODY i META

W tym rozdziale dowiesz się...

Wstęp

Znaczniki <body>...</body> oraz <meta /> określają pewne informacje na temat strony jako całości. Polecenie BODY powinno wchodzić w skład każdego dokumentu HTML. Stanowi ono właściwą treść, czyli tzw. ciało, w którym zawierają się wszystkie inne znaczniki, dotyczące formatowania, a także zwykły tekst. Podając dodatkowe atrybuty dla znacznika BODY, można określić niektóre cechy wyglądu całej strony, takie jak kolor tła oraz tekstu lub szerokość marginesów. W jednym dokumencie może się znajdować tylko jeden znacznik <body> - zaraz po nagłówku strony (<head>...</head>).

Natomiast znacznik <meta /> stanowi tzw. metainformację, pozwalającą określić pewne ogólne wiadomości, dotyczące dokumentu, m.in. sposób kodowania znaków, opis zawartości strony, jej autora czy język, w którym została napisana. Metainformacje nie wpływają bezpośrednio na wygląd dokumentu, lecz cechy które podają, są równie ważne. Chociaż nie są one wymagane, warto je stosować, ponieważ może to np. pomóc w odszukaniu strony przez wyszukiwarki sieciowe. Każdy dokument powinien zawierać obowiązkowo przynajmniej deklarację strony kodowej, bez której polskie litery na stronie mogą zostać błędnie wyświetlone! W pojedynczym dokumencie znajduje się zwykle kilka znaczników <meta /> - każdy dotyczy innej wiadomości - wszystkie muszą znajdować się wewnątrz nagłówka strony (<head>...</head>).

Oczywiście nie ma obowiązku stosowania dokładnie wszystkich atrybutów BODY oraz META, które zostały przedstawione w tym rozdziale. Autor strony powinien sam wybrać te, które mu odpowiadają lub przekazują według niego ważne informacje. Jednak nigdy nie należy zapominać o wstawianiu deklaracji strony kodowej!

Większość edytorów (X)HTML posiada specjalne generatory sekcji BODY oraz META, w których podaje się wszystkie atrybuty oraz informacje dotyczące dokumentu, dzięki czemu nie trzeba tego robić ręcznie. Z takiego generatora możesz skorzystać również tutaj.

Kolor tekstu strony

<body text="kolor">...</body>
gdzie "kolor" oznacza definicję koloru [zobacz: Kolory].

Polecenie pozwala określić kolor tekstu na Twojej stronie internetowej (domyślnie zwykle jest to czarny). Staraj się używać barw, które będą się dobrze wyróżniały na kolorze tła.

Edytory (X)HTML posiadają często specjalny selektor kolorów, za pomocą którego można w prosty sposób wybrać barwę o dowolnym odcieniu.

Równocześnie z kolorem tekstu strony powinniśmy koniecznie określić odpowiedni kolor tła, nawet jeśli odpowiada nam domyślny. Pamiętaj, że użytkownik może zmienić domyślny kolor tła w swoim systemie operacyjnym, a wtedy istnieje prawdopodobieństwo, że będzie on podobny do koloru tekstu ustalonego na Twojej stronie, co wywoła brak możliwości odczytania treści lub bardzo utrudni czytanie.

Atrybut TEXT jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Kolor tła strony

<body bgcolor="kolor">...</body>
gdzie "kolor" oznacza definicję koloru [zobacz: Kolory].

Polecenie pozwala określić kolor tła na Twojej stronie internetowej (domyślnie zwykle jest to biały). Pamiętaj, że nie powinno się używać barw bardzo jaskrawych jako kolory tła. Sprawiają one, że oczy szybko się męczą i dodatkowo zaciemniają treść strony. Dodatkowo należy pamiętać, aby na ustalonym kolorze tła, tekst był dobrze widoczny.

Równocześnie z kolorem tła strony powinniśmy określić odpowiedni kolor tekstu, nawet jeśli odpowiada nam domyślny. Pamiętaj, że użytkownik może zmienić domyślny kolor tekstu w swoim systemie operacyjnym, a wtedy istnieje prawdopodobieństwo, że będzie on podobny do koloru tła ustalonego na Twojej stronie, co wywoła brak możliwości odczytania treści lub bardzo utrudni czytanie. To samo dotyczy koloru odsyłaczy hipertekstowych.

Atrybut BGCOLOR jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Tło obrazkowe

<body background="ścieżka dostępu do obrazka">...</body>
lub
<body background="ścieżka dostępu do obrazka" bgproperties="fixed">...</body>
(tło nieruchome - znak wodny - tylko Internet Explorer!)
gdzie jako "ścieżka dostępu do obrazka" należy podać lokalizację, gdzie znajduje się obrazek, który chcemy umieścić w tle.

Jeśli znudziły Ci się już strony o jednolitym kolorze, możesz umieścić w tle dowolny obrazek. Dzięki temu strona może wyglądać dużo lepiej. Ponadto drugie z podanych poleceń pozwala zdefiniować tło obrazkowe które jest nieruchome, tzn. nie przesuwa się wraz z tekstem, gdy przewijamy zawartość okna (tylko Internet Explorer).

Pamiętaj jednak, że obrazki o dużych rozmiarach spowalniają wczytywanie strony. Dlatego staraj się używać pliki tylko w formacie *.jpg (dla zdjęć wielokolorowych) lub *.gif (dla rysunków). Są to formaty skompresowane, zajmujące dużo mniej miejsca niż zwykłe mapy bitowe *.bmp. Trzeba również pamiętać, aby obrazek w tle nie był zbyt jaskrawy - spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie.

Zauważ, że nie ma potrzeby stosowania obrazka tła o rozmiarze takim jak strona, ponieważ jego kopie są ustawiane obok siebie tak, że zajmują cały obszar strony. Dlatego wystarczy wyciąć mały powtarzający się wzór, który zostanie następnie powielony przez przeglądarkę.

Należy unikać stosowania w tle dużych obrazków wyciętych ze zwykłych zdjęć. Tło powinno: mieć łagodne kolory (pastelowe, blade albo całkiem ciemne, ale nie jaskrawe; szczególnie odradza się jednoczesnego stosowania barw jasnych oraz ciemnych, ponieważ uniemożliwia to dobranie odpowiednio czytelnego koloru tekstu), składać się z powtarzalnych wzorów o niezbyt wielkich rozmiarach oraz być nieco rozmyte - nieostre (można to uzyskać w dowolnym bardziej rozbudowanym programie graficznym - odpowiedni efekt nazywa się zwykle: Rozmywanie albo Blur). Dobrym pomysłem są tła imitujące strukturę jakiejś powierzchni.

Jeśli nie masz zacięcia artystycznego, nie musisz samodzielnie rysować obrazków tła. W Internecie na pewno znajdziesz wiele stron, gdzie możesz je darmowo pobrać. Często są one dostępne również w edytorach HTML (np.: FrontPage) oraz programach graficznych.

Równocześnie z atrybutem background="..." często podaje się dodatkowo zwyczajny kolor tła strony. W takim przypadku, jeśli obrazek będzie niedostępny lub użytkownik wyłączy wyświetlanie obrazów, tło przyjmie podany kolor. Ponadto jeżeli obrazek posiada przezroczystość (np. format *.gif), zostanie ona zastąpiona podanym kolorem.

Jeśli ustalimy kolor tekstu strony (text="...") zbliżony do domyślnego koloru tła (zwykle biały), wskazane jest podanie dodatkowo takiego koloru tła (bgcolor="..."), aby tekst był na nim czytelny. Jeżeli tego nie zrobimy, a obrazek nie zostanie wyświetlony, może wystąpić sytuacja typu: "biały tekst na białym tle".

Może się to zdarzyć np. gdy obrazek w tle strony jest dość ciemny. Wtedy określa się zwykle jasny kolor tekstu, zapominając o ustaleniu równocześnie ciemnego koloru tła - jako zabezpieczenie. Dopóki obrazek jest widoczny, wszystko jest w porządku, lecz jeśli nie zostanie on wyświetlony, tło przyjmie najczęściej kolor biały (jako domyślny) i w ten sposób otrzymamy stronę, której nie można przeczytać :-(

Atrybut BACKGROUND jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Atrybut BGPROPERTIES nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.

Kolor odsyłaczy

<body link="kolor nowych" vlink="kolor odwiedzonych" alink="kolor aktywnych">...</body>
gdzie "kolor nowych", kolor odwiedzonych" i "kolor aktywnych" oznaczają definicje kolorów [zobacz: Kolory], przy czym:
kolor nowych
Kolor odsyłaczy które nie zostały jeszcze użyte
kolor odwiedzonych
Kolor odsyłaczy, które zostały już użyte
kolor aktywnych
Kolor aktywnego odsyłacza, czyli takiego który właśnie został użyty
[zobacz: Odsyłacze].

Polecenie pozwala określić kolor odsyłaczy na stronie. Staraj się używać barw, które będą się dobrze wyróżniały na kolorze tła oraz odróżniały od koloru tekstu (aby odsyłacze były dobrze widoczne).

Równocześnie z kolorem odsyłaczy hipertekstowych powinniśmy określić odpowiedni kolor tła, nawet jeśli odpowiada nam domyślny. Pamiętaj, że użytkownik może zmienić domyślny kolor tła w swoim systemie operacyjnym, a wtedy istnieje prawdopodobieństwo, że będzie on podobny do koloru odsyłaczy ustalonego na Twojej stronie, co wywoła brak możliwości odczytania lub bardzo utrudni czytanie.

Atrybuty LINK, VLINK i ALINKzdeprecjonowane przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Podświetlenie

Aby bardziej urozmaicić wygląd odnośników tekstowych, można posłużyć się poleceniami stylów CSS. Pozwalają one swobodnie zmieniać kolor i inne cechy odsyłaczy po wskazaniu ich myszką. Jeśli usuniemy wskaźnik myszki znad takich łączy, zostanie im przywrócony pierwotny wygląd.

  • Aby wszystkie odsyłacze na stronie zmieniały kolor po wskazaniu myszką, należy w treści nagłówkowej dokumentu (w ramach <head>...</head>) umieścić następujący tekst:
    <style type="text/css">
    /* <![CDATA[ */
    a:hover { color: kolor }
    /* ]]> */
    </style>
    gdzie "kolor" oznacza definicję koloru.

    Przykład:

    zmień kolor
  • Aby dodać tło, należy wpisać (tak jak poprzednio w treści nagłówkowej):
    <style type="text/css">
    /* <![CDATA[ */
    a:hover { background-color: kolor }
    /* ]]> */
    </style>

    Przykład:

    pokaż tło
  • Aby połączyć powyższe efekty:
    <style type="text/css">
    /* <![CDATA[ */
    a:hover { color: kolor1; background-color: kolor2 }
    /* ]]> */
    </style>
  • Aby zupełnie usunąć podkreślenie pod odsyłaczami:
    <style type="text/css">
    /* <![CDATA[ */
    a { text-decoration: none }
    /* ]]> */
    </style>
  • Aby usunąć podkreślenie pod zwykłymi odsyłaczami i dodać je po wskazaniu myszką:
    <style type="text/css">
    /* <![CDATA[ */
    a { text-decoration: none }
    a:hover { text-decoration: underline }
    /* ]]> */
    </style>
  • Aby zupełnie usunąć podkreślenie tylko pod niektórymi odsyłaczami - np. w menu serwisu (kod do wstawienia w wybranym miejscu strony):
    <a href="adres.html" style="text-decoration: none">opis</a>
    [Zobacz: Odsyłacze]

Aby dowiedzieć się więcej, zobacz: Selektory pseudoklas.

Szerokość marginesów

  1. Internet Explorer (również Opera 7 i nowsze wersje przeglądarek na silniku Gecko, czyli Netscape/Mozilla/Firefox):
    <body leftmargin="x1" rightmargin="x2" topmargin="y1" bottommargin="y2">...</body>
    x1
    Szerokość lewego marginesu
    x2
    Szerokość prawego marginesu
    y1
    Wysokość górnego marginesu
    y2
    Wysokość dolnego marginesu
    (wszystko w pikselach).
  2. Netscape/Mozilla/Firefox:
    <body marginwidth="x" marginheight="y">...</body>
    x
    Szerokość poziomego marginesu (lewy = prawy = x)
    y
    Wysokość pionowego marginesu (górny = dolny = y)
    (wszystko w pikselach).

Polecenie to pozwala ustalić szerokości marginesów na stronie, czyli odstępów tekstu od poszczególnych krawędzi strony.

Ponieważ Internet Explorer wprowadza inne atrybuty niż Netscape/Mozilla/Firefox, najbezpieczniej jest określić margines przy użyciu obu powyższych sposobów jednocześnie!

Atrybuty LEFTMARGIN, RIGHTMARGIN, TOPMARGIN, BOTTOMMARGIN, MARGINWIDTH i MARGINHEIGHT nie wchodzą w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

Przykład

Kolor suwaków

(tylko Internet Explorer 5.5 lub nowszy oraz Opera 7 przy niestandardowych ustawieniach!)

<html style="scrollbar-base-color: kolor">...</html>
gdzie "kolor" oznacza definicję koloru.

W niektórych przypadkach polecenie to można wstawić do znacznika <body>...</body>.

Polecenie to pozwala zmienić kolor suwaków na stronie, na której się znajduje. Dzięki niemu można dopasować ich barwę do koloru tła strony. Aby dowiedzieć się więcej, zobacz: Suwaki.

UWAGA!
Interpretacja polecenia różni się w zależności o zastosowanej deklaracji DTD (łącznie z zupełnym brakiem interpretacji w pewnych warunkach) - więcej informacji w rozdziale Suwaki.

UWAGA!
Polecenie nie wchodzi w skład specyfikacji stylów CSS 2 i jest wyłącznie rozszerzeniem przeglądarki Internet Explorer 5.5 lub nowszej (ale nie MSIE 5.0)!

Deklaracja strony kodowej

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

Polecenie jest deklaracją strony kodowej, czyli sposobu w jaki będą kodowane znaki na naszej stronie WWW. Zamiast charset=iso-8859-2 można wpisać: charset=windows-1250, ale jest to mocno odradzane, ponieważ polecenie takie deklaruje inną stronę kodową, podczas gdy w całym niemal polskim Internecie przyjęto standard kodowania iso-8859-2. Stronę kodową Windows obsługują tylko przeglądarki w systemie MS Windows - jeśli użytkownik będzie posiadał inny system operacyjny, prawie na pewno spowoduje to pojawienie się u niego na ekranie zupełnie nieprzewidzianych znaków! Czy chcesz, aby Twoja strona WWW wyglądała nieprofesjonalnie? Z tego powodu nie jest polecane stosowanie innej strony kodowej jak ISO.

UWAGA!
Absolutnie nie należy pomijać tego wpisu i powinna to być koniecznie deklaracja kodowania ISO a nie WINDOWS, gdyż wtedy mogą wystąpić problemy z wyświetlaniem polskich znaków (nawet jeśli na Twoim komputerze wszystko jest w porządku)! Wstawienie odpowiedniej deklaracji strony kodowej to nie wszystko! Trzeba również stosować właściwy edytor (X)HTML - zobacz: Polskie znaki.

Jeśli Twoja strona WWW ma być napisana w innym języku niż polski, musisz zadeklarować odpowiednią inną stronę kodową (pamiętaj również o podaniu właściwego skrótu nazwy języka).

Więcej na temat stron kodowych możesz dowiedzieć się w rozdziale pt.: Strony kodowe.

Opis zawartości strony

<head>
	<meta name="Description" content="Tu podaj opis twojej strony" />
</head>

Polecenie to należy wstawić między znacznikami: <head> oraz </head>. Pozwala ono opisać co znajduje się na Twojej stronie. Z informacji tej korzystają wyszukiwarki sieciowe, dlatego staraj się tutaj wpisać tekst, który jak najlepiej opisze zawartość strony i zachęci do jej odwiedzenia. Ciekawy, ale niezbyt długi, opis może zachęcić internautów do obejrzenia Twojej strony!

UWAGA!
W treści wszystkich atrybutów content="..." nie należy używać znaków cudzysłowu. Jeśli musimy to zrobić, należy zamiast nich wpisywać: &quot;

Wyrazy kluczowe

<head>
	<meta name="Keywords" content="wyraz1, wyraz2, wyraz3..." />
</head>
gdzie "wyraz1, wyraz2, wyraz3..." oznaczają wyrazy, które należy rozdzielać przecinkami. Można oczywiście podać więcej niż trzy wyrazy (w miejsce kropek).

Polecenie to należy wstawić między znacznikami: <head> oraz </head>. Pozwala Ci ono podać wyrazy kluczowe, z których korzystają wyszukiwarki sieciowe. Dlatego staraj się tutaj wpisać wyrazy, które jak najlepiej opiszą zawartość Twojej strony. Dobrze dobrane wyrazy kluczowe, pomogą wyszukiwarkom odnaleźć Twoją stronę!

Język strony

<html xml:lang="język" lang="język" />
<head>
	<meta http-equiv="Content-Language" content="język" />
</head>
.....
</html>
gdzie jako "język" należy podać skrót nazwy wybranego języka.

Polecenie to należy wstawić między znacznikami: <head> oraz </head>. Pozwala ono podać, w jakim języku jest napisana Twoja strona internetowa, np.: pl - polski, en - angielski, de - niemiecki, fr - francuski, it - włoski, es - hiszpański, ru - rosyjski i inne [zobacz: Skróty nazw jezyków].

Nie należy również zapominać o zadeklarowaniu odpowiedniej dla wybranego języka strony kodowej.

Autor strony

<head>
	<meta name="Author" content="Tu wpisz swoje imię i nazwisko" />
</head>

Polecenie to należy wstawić między znacznikami: <head> oraz </head>. Pozwala ono podać informację, kto jest autorem strony.

Adres zwrotny

<head>
	<meta http-equiv="Reply-To" content="twój adres e-mail" />
</head>
gdzie jako "Twój adres e-mail" należy podać swój adres poczty elektronicznej (np.: "jan_kowalski@jakas.domena.pl").

Pozwala podać zwrotny adres poczty elektronicznej e-mail, na który można odpowiadać. Polecenie może być wstawione tylko w treści nagłówkowej dokumentu - między znacznikami: <head> oraz </head>.

Data utworzenia

<head>
	<meta http-equiv="Creation-Date" content="data" />
</head>
gdzie jako "data" należy wpisać datę utworzenia dokumentu w formacie GMT, np.: "Tue, 20 Aug 1996 14:25:27 GMT".

Czas w formacie GMT jest określany dla Greenwich (południk "0"). W Polsce strefa czasowa jest przesunięta o +1 godz. (czas zimowy) lub +2 godz. (czas letni). Dlatego w przypadku tworzenia daty GMT, należy odjąć od czasu lokalnego odpowiednio: 1 lub 2 godziny.

Komenda wprowadza informację o dacie utworzenia dokumentu, z której mogą korzystać np. sieciowe indeksery. Polecenie może być wstawione tylko w treści nagłówkowej dokumentu - między znacznikami: <head> oraz </head>.

Datę w formacie GMT możesz otrzymać w generatorze poniżej:

  ::

Ostatnia modyfikacja

<head>
	<meta http-equiv="Last-Modified" content="data" />
</head>
gdzie jako "data" należy wpisać datę, kiedy dokument był ostatni raz modyfikowany, np.: "Tue, 20 Aug 1996 14:25:27 GMT" (zobacz: Data utworzenia).

Komenda wprowadza informację, kiedy dany dokument był ostatnio zmieniany. Może to być sygnał dla przeglądarki, że trzeba wczytać go ponownie. Polecenie może być wstawione tylko w treści nagłówkowej dokumentu - między znacznikami: <head> oraz </head>.

Utrata ważności

<head>
	<meta http-equiv="Expires" content="data" />
</head>
gdzie jako "data" należy wpisać datę, kiedy dokument traci ważność, np.: "Tue, 20 Aug 1996 14:25:27 GMT" (zobacz: Data utworzenia).

Komenda wprowadza informację, kiedy dany dokument traci ważność. Może to być sygnał dla przeglądarki, że trzeba wczytać go ponownie. Polecenie może być wstawione tylko w treści nagłówkowej dokumentu - między znacznikami: <head> oraz </head>.

Automatyczne odświeżenie strony

<head>
	<meta http-equiv="Refresh" content="s" />
</head>
gdzie jako "s" należy podać liczbę, określającą co jaki przedział czasu (w sekundach) będzie odświeżana strona, czyli ponownie wczytywana.

Polecenie to pozwala na automatyczne odświeżanie strony, co pewien określony przedział czasu (podany w sekundach). Powinno być wstawione w treści nagłówkowej dokumentu - między znacznikami: <head> oraz </head>.

Nie należy przesadzać z odświeżaniem strony, ponieważ irytuje to użytkowników, a nawet może uniemożliwić czytanie!

Przykład:

Przykład

Automatyczne wczytanie strony

<head>
	<meta http-equiv="Refresh" content="s; url=Tu podaj adres strony lub ścieżkę dostępu" />
</head>
s
Czas, po którym zostanie załadowana podana strona (w sekundach)
Tu podaj adres strony lub ścieżkę dostępu
Adres lub ścieżkę dostępu do strony, która ma być wczytana

Polecenie to pozwala na automatyczne wczytanie podanej strony. Załadowanie nastąpi po określonym przez nas czasie (podanym w sekundach). Powinno być wstawione w treści nagłówkowej dokumentu.

Polecenie to jest często stosowane, w razie przeniesienia serwisu pod inny adres, w celu automatycznego przekierowania tam użytkownika.

Przykład:

Przykład

Przejście między stronami

(tylko Internet Explorer 4.01 lub nowszy!)

  1. Przejście płynne
    <head>
    	<meta http-equiv="sposób" content="blendTrans(Duration=s)" />
    </head>
  2. Filtr graficzny
    <head>
    	<meta http-equiv="sposób" content="revealTrans(Duration=s,Transition=n)" />
    </head>
sposób
  • "Page-Enter" - graficzne przejście nastąpi przy wchodzeniu na stronę
  • "Page-Exit" - przejście nastąpi przy wyjściu
  • "Site-Enter" - przejście przy wejściu z innej domeny (adresu)
  • "Site-Exit" - przejście przy wyjściu do innej domeny
s
czas trwania przejścia (w sekundach)
n
numer filtru graficznego (liczba od 0 do 23):
  • 0 - Zmniejszający się prostokąt (Box in)
  • 1 - Zwiększający się prostokąt (Box out)
  • 2 - Zmniejszające się koło (Circle in)
  • 3 - Zwiększające się koło (Circle out)
  • 4 - "Wytarcie" w górę (Wipe up)
  • 5 - "Wytarcie" w dół (Wipe down)
  • 6 - "Wytarcie" w prawo (Wipe right)
  • 7 - "Wytarcie" w lewo (Wipe left)
  • 8 - Pionowa zasłona (Vertical blinds)
  • 9 - Pozioma zasłona (Horizontal blinds)
  • 10 - Szachownica w prawo (Checkerboard across)
  • 11 - Szachownica w dół (Checkerboard down)
  • 12 - Losowy rozkład (Random dissolve)
  • 13 - Połączenie w pionie (Split vertical in)
  • 14 - Rozłączenie w pionie (Split vertical out)
  • 15 - Połączenie w poziomie (Split horizontal in)
  • 16 - Rozłączenie w poziomie (Split horizontal out)
  • 17 - "Wytarcie" w lewy-dolny róg (Strips left down)
  • 18 - "Wytarcie" w lewy-górny róg (Strips left up)
  • 19 - "Wytarcie" w prawy-dolny róg (Strips right down)
  • 20 - "Wytarcie" w prawy-górny róg (Strips right up)
  • 21 - Losowe poziome smugi (Random bars horizontal)
  • 22 - Losowe pionowe smugi (Random bars vertical)
  • 23 - Efekt losowy - jeden z powyższych (Random)

Polecenie to pozwala na efektowne graficznie przejście między dwiema stronami. Pierwszy sposób (blendTrans) powoduje płynne przejście. W drugim przypadku (revealTrans) można wybrać odpowiedni rodzaj filtru graficznego: od 0 do 23 (dla Transition=23 będzie to efekt wybrany losowo).

Jeśli zastosujemy "Page-Enter", nastąpi graficzne przejście do strony, na której znajduje się powyższe polecenie (po jej wczytaniu). Natomiast po wpisaniu "Page-Exit", przejście będzie przy wyjściu z danej strony (kiedy klikniemy dowolny odsyłacz prowadzący na inną stronę). Różnica pomiędzy "Page-Enter/Exit" a "Site-Enter/Exit" jest taka, że w drugim przypadku przejście nastąpi tylko podczas wejścia/wyjścia z/do innej domeny internetowej, czyli innej niż nasza strony WWW.

UWAGA!
W Internet Explorerze 6, aby polecenie ("Page-Enter") było realizowane, musi znajdować się bezwzględnie bezpośrednio po znaczniku <head> (jako pierwsze)! Wpisanie go po jakimkolwiek innym znaczniku, np. deklaracji strony kodowej, spowoduje, że nie będzie ono interpretowane.

Przykład:

Przykład

Edytor

  1. Generator
    <head>
    	<meta name="Generator" content="nazwa edytora" />
    </head>
  2. Narzędzie autorskie
    <head>
    	<meta name="Authoring_tool" content="nazwa edytora" />
    </head>
gdzie jako "nazwa edytora" można wpisać nazwę programu, przy użyciu którego została stworzona strona.

Pozwala określić nazwę edytora (X)HTML, który został wykorzystany do utworzenia dokumentu.

Roboty

<head>
	<meta name="Robots" content="metoda" />
</head>
gdzie jako "metoda" należy wpisać:
  • "index" - strona będzie indeksowana przez roboty sieciowe (indeksery)
  • "noindex" - strona nie będzie indeksowana
  • "follow" - indeksowanie stron, do których odnoszą się odsyłacze, znajdujące się w dokumencie
  • "nofollow" - nie indeksuje odsyłaczy
  • "index, nofollow" - indeksuje stronę główną, nie indeksuje odsyłaczy
  • "noindex, follow" - nie indeksuje strony głównej, indeksuje odsyłacze
  • "all" = "index, follow" - indeksuje wszystko (domyślnie)
  • "none" = "noindex, nofollow" - nie indeksuje nic

Polecenie określa sposób zachowania się robotów-indekserów, czyli specjalnych programów zbierających informacje o stronach w Internecie, wykorzystywane później przez wyszukiwarki. Stosuj noindex tylko wtedy, gdy nie chcesz, aby Twoja strona była odnaleziona przez wyszukiwarki (bo np. treści na niej zawarte są ściśle tajne :-). Niestety całkowitej pewności nie będzie nigdy, ponieważ nie wszystkie roboty interpretują to polecenie.

Cache

<head>
	<meta http-equiv="Expires" content="0" />
	<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
	<meta http-equiv="Cache-Control" content="post-check=0, pre-check=0" />
	<meta http-equiv="Pragma" content="no-cache" />
</head>

Polecenia wstawione w treści nagłówkowej dokumentu w większości przypadków teoretycznie zabezpieczają stronę przed przechowywaniem w tzw. cache-u przeglądarki, czyli pamięci podręcznej. Cache-owanie polega na zapisywaniu dokumentów HTML, obrazków i innych elementów strony na dysku lokalnym użytkownika podczas pierwszej wizyty. Normalnie, jeśli odwiedzimy taką stronę ponownie, wczyta się dużo szybciej, ponieważ dane zostaną pobrane z dysku twardego, a nie z Internetu. Lecz w pewnych przypadkach możemy chcieć, aby treść dokumentu nie była w ten sposób przechowywana, lecz za każdym razem wczytywana bezpośrednio z Internetu (np. jeśli strona jest często aktualizowana lub nie chcemy by była zapisywana na dysku użytkownika). Wtedy przydatne okazują się te właśnie polecenia. Niestety przegladarki często po prostu ignorują powyższe polecenia, a więc całkowitej pewności nie będzie raczej nigdy :-(

Wiele osób próbuje stosować tą metodę, aby nie dopuścić do zapisania na dysku użytkownika kodu źródłowego lub obrazków ze swojej strony. Często wykorzystuje się to w połączeniu z dodatkowymi metodami ochrony stron WWW.

Ikona strony

(Internet Explorer, Netscape 7/Mozilla/Firefox, Opera 7)

<head>
	<link rel="Shortcut icon" href="adres ikony" />
</head>
gdzie jako "adres ikony" należy podać URL, pod którym znajduje się ikona, np.: http://www.mojastrona.pl/favicon.ico

Polecenie to pozwala dodać ikonkę (favicon.ico), która będzie widoczna w przeglądarce przy adresie naszej strony. Typowy rozmiar ikony to 16x16 pikseli. W systemie Windows jest dodatkowa możliwość umieszczenia skrótu na pulpicie - wtedy przydatna może być ikona o rozmiarach 32x32. Format *.ico pozwala zapisać dwie wersje rozmiaru w jednym pliku. Niektóre przeglądarki - nie MSIE 6 - pozwalając również używać innych formatów graficznych, takich jak np. PNG.

Niestety niektóre przeglądarki pobierają ikonę strony tylko raz, a później rzadko jest ona odświeżana (albo nawet wcale). Więc jeśli kiedyś wprowadzimy nową, może to nie dać żadnego efektu, bo np. Internet Explorer zapisuje ikonę przy dodawaniu strony do ulubionych. Dlatego zanim wprowadzimy taki dodatek, warto go wcześniej dobrze dopracować.

W Internet Explorerze aby ikona była widoczna, trzeba dodać stronę do ulubionych. Aby odświeżyć ikonę, należy usunąć stronę z ulubionych, a następnie dodać ją tam ponownie (ikona będzie widoczna po ponownym otworzeniu przeglądarki).

Nawigacja

(Mozilla i Opera 7, ale nie Internet Explorer 6 ani Netscape 7)

Nowe przeglądarki pozwalają określić bezpośrednio z poziomu strony WWW dodatkowe punkty nawigacyjne w serwisie. Są one wyświetlane na specjalnym pasku narzędzi (najczęściej Nawigacja) w postaci linków do wskazanych stron.

  1. Strona główna
    <head>
    	<link rel="Start" href="adres" />
    </head>
    lub
    <head>
    	<link rel="Top" href="adres" />
    </head>
  2. Do góry
    <head>
    	<link rel="Up" href="adres" />
    </head>
  3. Pierwsza
    <head>
    	<link rel="First" href="adres" />
    </head>
  4. Poprzednia
    <head>
    	<link rel="Prev" href="adres" />
    </head>
    lub
    <head>
    	<link rel="Previous" href="adres" />
    </head>
  5. Następna
    <head>
    	<link rel="Next" href="adres" />
    </head>
  6. Ostatnia
    <head>
    	<link rel="Last" href="adres">
    </head>
  7. Zawartość
    <head>
    	<link rel="Contents" href="adres" />
    </head>
    lub
    <head>
    	<link rel="Toc" href="adres" />
    </head>
  8. Rozdział (Mozilla)
    <head>
    	<link rel="Chapter" title="Tytuł" href="adres" />
    </head>
  9. Dział (Mozilla)
    <head>
    	<link rel="Section" title="Tytuł" href="adres" />
    </head>
  10. Poddział (Mozilla)
    <head>
    	<link rel="Subsection" title="Tytuł" href="adres" />
    </head>
  11. Dodatek (Mozilla)
    <head>
    	<link rel="Appendix" title="Tytuł" href="adres" />
    </head>
  12. Słowniczek
    <head>
    	<link rel="Glossary" href="adres" />
    </head>
  13. Indeks
    <head>
    	<link rel="Index" href="adres" />
    </head>
  14. Pomoc
    <head>
    	<link rel="Help" href="adres" />
    </head>
  15. Szukaj
    <head>
    	<link rel="Search" href="adres" />
    </head>
  16. Autor
    <head>
    	<link rel="Author" href="adres" />
    </head>
  17. Prawa autorskie
    <head>
    	<link rel="Copyright" href="adres" />
    </head>
  18. Zakładka (Mozilla)
    <head>
    	<link rel="Bookmark" title="Tytuł" href="adres" />
    </head>
  19. Inne wersje (Mozilla)
    <head>
    	<link rel="Alternate" title="Tytuł" href="adres" />
    </head>
    lub
    <head>
    	<link rel="Alternate" title="Tytuł" lang="język" href="adres" />
    </head>
    lub
    <head>
    	<link rel="Alternate" title="Tytuł" media="media" href="adres" />
    </head>
  20. Własne (Mozilla)
    <head>
    	<link rel="Nazwa" title="Tytuł" href="adres" />
    </head>
We wszystkich przypadkach odpowiednie wpisy oznaczają:
adres
Lokalizacja punktu nawigacyjnego
Tytuł
Tytuł który pojawi się na pasku nawigacji
język
Język alternatywny
media
Typ(y) mediów alternatywnych
Nazwa
Nazwa własnego punktu nawigacyjnego

Quiz

Sprawdź swoją wiedzę, nabytą w tym rozdziale, rozwiązując testowy QUIZ.