Kurs HTML HTML BODY i META

Strona 1

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

BODY i META

W tym rozdziale dowiesz się...

Co to jest nagłówek, a co ciało dokumentu? Jak dodać do dokumentu dodatkowe informacje, mówiące o jego
charakterze?
W jaki sposób zmienić kolor tekstu na stronie WWW?
W jaki sposób zmienić kolor tła strony WWW?
W jaki sposób wstawić obrazek (grafikę, zdjęcie) w tle strony WWW (tapeta)?
Jak zmienić kolor odsyłaczy (hiperłączy, odnośników hipertekstowych, linków) na stronie WWW?
Jak zmienić szerokość marginesów strony WWW?
Jak zmienić kolor suwaków do przewijania?
Jak zmienić tytuł strony, który wyświetla się na górze okna przeglądarki oraz w wyszukiwarkach sieciowych?
O czym nie należy zapominać pisząc stronę WWW po polsku?
W jaki sposób zachęcić internautów aby odwiedzili Twoją stronę? Jak wstawić opis, który wyświetli się w
wyszukiwarkach (Google)?
W jaki sposób podwyższyć pozycję strony WWW w wyszukiwarkach (Google)?
Jak określić w jakim języku (mówionym) jest napisana strona WWW?
Gdzie wpisać autora strony WWW?
Jak określić adres e-mail, na który można odpisać na stronie WWW?
Jak ustawić datę utworzenia dokumentu HTML na stronie WWW? Jak utworzyć datę w formacie GMT
(Greenwich Mean Time)?
Jak ustawić datę ostatniej modyfikacji dokumentu HTML na stronie WWW?
Jak przekazać informację o aktualności strony WWW?
Co zrobić, aby strona WWW była automatycznie odświeżana co określony czas?
Jak wstawić przekierowanie na stronie WWW, czyli automatycznie wczytać inną stronę?
Jak wstawić na stronie WWW efekt specjalny przy wchodzeniu lub wychodzeniu?
Jak wstawić informację o edytorze użytym przy tworzeniu strony WWW?
W jaki sposób ułatwić indeksowanie (wyszukanie) strony WWW przez roboty wyszukiwarek sieciowych
(Google) lub sprawić, aby strona nie była odnajdowana przez wyszukiwarki? Jak zablokować indeksowanie
zdjęć lub plików z określonego katalogu?
Jak zmusić przeglądarkę, aby nie zapisywała elementów strony WWW (np. obrazków) na dysku
użytkownika?
W jaki sposób wstawić ikonę obok adresu strony WWW?
W jaki sposób ułatwić nawigację na stronie WWW?

Wstęp

Znaczniki

oraz

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

Strona 2

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

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

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

- każdy dotyczy innej wiadomości - wszystkie

muszą znajdować się wewnątrz nagłówka strony (<head>...</head>). Ponadto w tym rozdziale opisane zostaną
również inne przydatne znaczniki, które można umieścić w nagłówku dokumentu, opisujące sam dokument, a nie
wyświetlające jakieś treści.

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,
natomiast podanie tytułu strony jest wręcz obowiązkowe! Zaleca się również wpisanie opisu zawartości strony oraz
wyrazów kluczowych.

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.

Kolor tekstu strony

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

gdzie "kolor" oznacza definicję koloru [zobacz: Kolory].

Strona 3

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

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.

Strona 4

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

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

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 ALINK są zdeprecjonowane przez specyfikację HTML 4.01 - zaleca się stosowanie
stylów.

Podświetlenie

Strona 5

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

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:

/* <![CDATA[ */

a:hover { color: kolor }

/* ]]> */

</style>

gdzie "kolor" oznacza definicję koloru.

Aby dodać tło, należy wpisać (tak jak poprzednio w treści nagłówkowej):

/* <![CDATA[ */

a:hover { background-color: kolor }

/* ]]> */

</style>

Aby połączyć powyższe efekty:

/* <![CDATA[ */

a:hover { color: kolor1; background-color: kolor2 }

/* ]]> */

</style>

Aby zupełnie usunąć podkreślenie pod odsyłaczami:

/* <![CDATA[ */

a { text-decoration: none }

/* ]]> */

</style>

Aby usunąć podkreślenie pod zwykłymi odsyłaczami i dodać je po wskazaniu myszką:

/* <![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):

[Zobacz: Odsyłacze]

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

Strona 6

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

Szerokość marginesów

1. Internet Explorer (również Opera 7 i nowsze wersje przeglądarek na silniku Gecko, czyli Netscape/Mozilla/

Firefox):

Szerokość lewego marginesu

Szerokość prawego marginesu

Wysokość górnego marginesu

Wysokość dolnego marginesu

(wszystko w pikselach).

2. Netscape/Mozilla/Firefox:

Szerokość poziomego marginesu (lewy = prawy = x)

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.

Kolor suwaków

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

gdzie "kolor" oznacza definicję koloru.

Strona 7

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

W niektórych przypadkach polecenie to można wstawić do znacznika

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)!

Tytuł strony

<head>

<title>Tytuł strony</title>

</head>

Każdy dokument (X)HTML (podstrona serwisu) posiada własny tytuł. Może on zawierać dowolny tekst, zaleca się
jednak, aby nie był zbyt długi (najwyżej kilka wyrazów). Powinien on również odnosić się do treści zawartych na
danej stronie. Tytuł pojawia się na belce tytułowej przeglądarki internetowej (na samej górze okna programu), a
także w wyszukiwarkach sieciowych, po odnalezieniu Twojej strony - dlatego właśnie nie może on być zbyt długi.
Trafny tytuł może również zachęcić internautów do obejrzenia Twojej strony.

Taki sam tytuł na wszystkich podstronach serwisu nie jest dobrym pomysłem, a tytuły w stylu "

Strona główna

czy "

Bez tytułu

" są już bardzo nietrafne. Oczywiście w tytule wszystkich podstron można umieścić ten sam

fragment z nazwą serwisu, ale oprócz tego każdy dokument powinien zawierać dalszą część tytułu, opisującą jego
zawartość.

Tytuł strony jest znacznikiem obowiązkowym. Pominięcie go stanowi błąd!

Deklaracja strony kodowej

<head>

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

Strona 8

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

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>

</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ć:

Wyrazy kluczowe

<head>

</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

Strona 9

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

<head>

zyk" />

</head>

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>

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>

</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>

Bezpośrednie podanie swojego adresu e-mail na stronie WWW może poskutkować zalewem Twojej skrzynki
spamem, czyli niechcianą korespondencją reklamową.

Data utworzenia

<head>

</head>

gdzie jako "data" należy wpisać datę utworzenia dokumentu w formacie GMT, np.:
"

Tue, 20 Aug 1996 14:25:27 GMT

Strona 10

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

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>

Ostatnia modyfikacja

<head>

</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>

</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żanie strony

<head>

</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>

Strona 11

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

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

Automatyczne wczytanie strony

<head>

lub

cie

dost

pu" />

</head>

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.

Przejście między stronami

(tylko Internet Explorer 4.01 lub nowszy!)

1. Przejście płynne

<head>

</head>

2. Filtr graficzny

<head>

(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

czas trwania przejścia (w sekundach)

numer filtru graficznego (liczba od

Strona 12

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

- Zmniejszający się prostokąt (Box in)

- Zwiększający się prostokąt (Box out)

- Zmniejszające się koło (Circle in)

- Zwiększające się koło (Circle out)

- "Wytarcie" w górę (Wipe up)

- "Wytarcie" w dół (Wipe down)

- "Wytarcie" w prawo (Wipe right)

- "Wytarcie" w lewo (Wipe left)

- Pionowa zasłona (Vertical blinds)

- Pozioma zasłona (Horizontal blinds)

- Szachownica w prawo (Checkerboard across)

- Szachownica w dół (Checkerboard down)

- Losowy rozkład (Random dissolve)

- Połączenie w pionie (Split vertical in)

- Rozłączenie w pionie (Split vertical out)

- Połączenie w poziomie (Split horizontal in)

- Rozłączenie w poziomie (Split horizontal out)

- "Wytarcie" w lewy-dolny róg (Strips left down)

- "Wytarcie" w lewy-górny róg (Strips left up)

- "Wytarcie" w prawy-dolny róg (Strips right down)

- "Wytarcie" w prawy-górny róg (Strips right up)

- Losowe poziome smugi (Random bars horizontal)

- Losowe pionowe smugi (Random bars vertical)

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

Edytor

1. Generator

Strona 13

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

<head>

</head>

2. Narzędzie autorskie

<head>

</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>

</head>

gdzie jako "dyrektywy" należy wpisać:

index

" - strona, na której wstawiono polecenie, będzie indeksowana przez roboty sieciowe (indeksery) -

domyślnie
"

noindex

" - strona, na której wstawiono polecenie, nie będzie indeksowana

follow

" - przechodzenie do stron, do których odnoszą się odsyłacze, znajdujące się w dokumencie -

domyślnie
"

nofollow

" - robot nie przechodzi do stron stron wskazywanych przez odsyłacze wstawione na stronie, ale

może je zaindeksować, jeżeli istnieją inne linki umieszczone na stronach bez tego zakazu
"

index, nofollow

" - indeksuje stronę, nie przechodzi do stron wskazywanych przez odsyłacze

noindex, follow

" - nie indeksuje strony, na której wstawiono polecenie, przechodzi do stron

wskazywanych przez 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.

Pamiętaj, że domyślnym zachowaniem robotów wyszukiwarek sieciowych jest indeksowanie wszystkich
dokumentów. To oznacza, że dyrektywa "

index, follow

" może być pominięta, a zamiast wpisywać

noindex, follow

" czy "

index, nofollow

" zwykle wystarczy wpisać odpowiednio: "

noindex

" i

nofollow

". W przypadku zupełnego braku znacznika

robot zaindeksuje wszystkie strony serwisu, dlatego dodaje się go zwykle tylko, kiedy chcemy zablokować dostęp
robotowi do wybranych stron.

Zwróć uwagę, że wartość "

nofollow

" blokuje jedynie podążanie za odnośnikami, a to oznacza, że może nie

zapobiec indeksowaniu stron, do których prowadzą linki umieszczone w dokumencie. Jeżeli na innych stronach -

Strona 14

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

możliwe, że w zupełnie innym serwisie - znajdą się linki do tych stron, zostaną one normalnie zaindeksowane. Aby
temu zapobiec, należy wstawić dyrektywę "

noindex

" na stronach, które nie powinny być zaindeksowane.

Specyfikacja HTML 4.01 wskazuje tylko następujące wartości tego elementu:

all

index

nofollow

noindex

. Choć inne specyfikacje jasno wskazują na dodatkowe wartości, to jeśli chcesz mieć największą

pewność, że dyrektywy zostaną uwzględnione, zamiast "

none

" możesz użyć "

noindex, nofollow

Niestandardowe dyrektywy robotów

Roboty mogą interpretować dodatkowe, niestandardowe dyrektywy (wszystkie poniższe są rozpoznawane przez
robota wyszukiwarki Google):

noarchive

" - blokada archiwizowania kopii strony w pamięci podręcznej wyszukiwarki

nosnippet

" - blokada wyświetlania opisu strony w wynikach wyszukiwania

noodp

" - opis strony nie zostanie pobrany z katalogu Open Directory Project

Dyrektywa "

noarchive

" blokuje archiwizowanie dokumentu. Wyszukiwarki sieciowe często zapisują kopię

indeksowanych stron w swojej pamięci podręcznej. Użytkownicy korzystający z wyszukiwarki mogą otworzyć taką
kopię strony np. kiedy oryginalna witryna jest chwilowo niedostępna. Aby otworzyć stronę z pamięci podręcznej
wyszukiwarki Google, należy na liście wyników wyszukiwania kliknąć link "Kopia".

Aby połączyć dyrektywy standardowe z niestandardowymi, nie należy wpisywać kilku osobnych znaczników

, ale podać pełną listę po przecinku, np.:

Googlebot

Wyszukiwarka Google wprowadziła specjalny znacznik, który pozwala wydać dyrektywy tylko dla robota
Googlebot. Na przykład aby zablokować robotowi Google dostęp do strony, ale jednocześnie pozwolić na to
robotom innych wyszukiwarek, można wpisać:

Blokada indeksowania wybranych odsyłaczy

Element

powoduje, że roboty sieciowe nie będą

podążać za żadnymi linkami umieszczonymi w dokumencie. Czasami jednak chcielibyśmy zablokować
uwzględnianie tylko wybranych odsyłaczy. Taka sytuacja najczęściej ma miejsce, kiedy wstawiamy na swojej
stronie system komentarzy. Spammerzy lub spamboty (automaty spamujące) często wpisują komentarze bez żadnej
konkretnej treści, ale za to przeładowane linkami do stron, które chcą zareklamować. Aby uczynić takie linki
nieistotnymi dla robota wyszukiwarki Google, należy dopisać do wszystkich odsyłaczy np. z komentarzy
dodatkowy atrybut:

Strona 15

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

Takie linki zostaną zignorowane przez robota wyszukiwarki Google, zatem być może zniechęci to spammera do
umieszczania ich na naszej stronie, a nawet jeśli nie, to przynajmniej nie damy mu satysfakcji i nie przyczynimy się
do nieuczciwego wypromowania kolejnej bezużytecznej strony :-)

Plik robots.txt

Znacznik

jest przydatny w celu określania dostępu przez roboty do pojedynczych

dokumentów HTML. Okazuje się jednak mało praktyczny, jeśli chcielibyśmy zablokować dostęp np. do wszystkich
dokumentów z określonego katalogu serwisu albo wręcz hurtowo do wszystkich plików witryny. Znacznik ten
okazuje się wręcz zupełnie nieprzydatny, jeśli zależy nam na zablokowaniu indeksowania np. zdjęć z naszego
serwisu (większość wyszukiwarek posiada osobne formularze do wyszukiwania plików graficznych).

Istnieje jednak możliwość określenia globalnego dostępu do wszystkich plików serwisu - nosi on nazwę: Standard
Wykluczania Robotów (ang. A Standard for Robot Exclusion - Robots Exclusion Protocol). W głównym katalogu
konta WWW - czyli tam, gdzie znajduje się dokument strony głównej serwisu (

index.html

) - należy umieścić

specjalny plik pod nazwą

robots.txt

. W pliku tym umieszcza się tzw. rekordy - każdy zawiera grupę linijek w

postaci:

Pole: warto

ść

Wielkość liter w nazwach pól nie ma znaczenia, natomiast zwykle ma znaczenie w wartościach pola. Oprócz
typowych linijek możliwe jest również umieszczanie komentarzy, czyli tekstu, który nie zostanie wzięty pod uwagę
przez roboty. Komentarz rozpoczyna się znakiem "

", a kończy na końcu linijki.

User-Agent

W jednym pliku

robots.txt

może się znajdować dowolna liczba rekordów rozdzielonych pustymi linijkami -

każdy musi się rozpoczynać linią

User-Agent

, wskazującą do których robotów odnoszą się dalsze linijki danego

rekordu:

# Ten rekord odnosi si

tylko do robota "Googlebot":

User-agent: Googlebot

Pojedynczy rekord może zawierać więcej niż jedną linię

User-Agent

# Ten rekord odnosi si

tylko do robotów "Googlebot" i "MSNBot":

User-agent: Googlebot

User-agent: MSNBot

Specyfikacja HTML 4.01 wyraźnie zabrania umieszczania kilku linii

User-Agent

jednej pod drugą, jednak

standard (nieopracowany przez W

C) mówi na ten temat zupełnie co innego. Googlebot interpretuje wielokrotne

linijki tego typu.

Wielkość liter w nazwach robotów nie ma znaczenia. Lista istniejących robotów wyszukiwarek sieciowych
znajduje się na stronach:

The Web Robots Database - wersja angielska
Spiders.pl - wersja polska

Strona 16

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

Zamiast nazwy robota można wpisać również znak gwiazdki ("

"), co wskazuje każdego istniejącego robota.

Kiedy robot danej wyszukiwarki odwiedza witrynę, najpierw sprawdza czy istnieje plik

robots.txt

. Jeśli tak,

szuka w nim rekordu (grupy linii), który pasuje do jego nazwy. Jeśli taki znajdzie, odczytuje linie z wybranego
rekordu i pomija wszystkie inne. Jeżeli nie znajdzie, szuka rekordu z linią

User-Agent: *

. Jeżeli takiego nie

znajdzie, indeksuje bez ograniczeń wszystkie dokumenty serwisu. Zwracam uwagę, że jeśli robot znajdzie
przeznaczony specjalnie dla niego rekord, to w ogóle nie zajmuje się rekordem

User-Agent: *

Disallow

W rekordach poniżej

User-Agent

musi się znajdować jedna lub więcej linii

Disallow

, wskazujących ścieżki

do plików, do których robot nie ma dostępu. Każda ścieżka musi rozpoczynać się od znaku ukośnika ("

") i

powstaje poprzez wycięcie pierwszego członu adresu URL. Na przykład aby zablokować dostęp do pliku

http:/

/www.example.org/index.html

, należy wpisać:

User-Agent: *

Disallow: /index.html

Pusta wartość

Disallow

oznacza brak ograniczeń w indeksowaniu dokumentów:

User-Agent: *

# Wszystkie dokumenty serwisu b

normalnie indeksowane:

Disallow:

Aby zablokować dostęp do wszystkich plików z jakiegoś katalogu i ewentualnie wszystkich jego podkatalogów,
wystarczy wpisać samą nazwę tego katalogu, która koniecznie musi kończyć się znakiem ukośnika ("

"):

User-Agent: *

aden plik z katalogu "prywatne" nie zostanie zaindeksowany:

Disallow: /prywatne/

Aby zablokować dostęp do wszystkich plików całego serwisu, jako ścieżkę należy podać sam ukośnik:

# Ten serwis w ogóle nie b

dzie indeksowany przez roboty:

User-Agent: *

Disallow: /

Allow

Standard Wykluczania Robotów został rozszerzony o dodatkową dyrektywę -

Allow

, której działanie jest

przeciwne do

Disallow

, czyli wskazuje ścieżki, które robot może indeksować:

# Tylko strona główna tego serwisu zostanie zaindeksowana:

User-Agent: *

Disallow: /

Allow: /index.html

Dyrektywa

Allow

może nie być interpretowana przez niektóre roboty wyszukiwarek (jest rozpoznawana przez

robota Google)

Wzorce dopasowania

Strona 17

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

Co zrobić, jeśli chcemy zablokować indeksowanie wszystkich zdjęć serwisu, ale jednocześnie zezwolić na
indeksowanie samych dokumentów HTML? Najlepiej byłoby umieścić wszystkie zdjęcia w osobnym katalogu:

User-Agent: *

Disallow: /zdjecia/

Czasem jednak jest to niemożliwe. W takim przypadku pomocne są tzn. wzorce dopasowania, czyli znaki
specjalne, które pozwalają dopasować ścieżki na podstawie ogólnych warunków. Googlebot rozpoznaje
następujące znaki specjalne w ścieżkach dyrektyw

Disallow

oraz

Allow

- Zastępuję dowolny ciąg znaków (również pusty)

- Jeżeli zostanie postawiony na końcu ścieżki, oznacza dopasowanie do końca nazwy, dzięki temu nadaje

się szczególnie do określania ścieżek do plików określonego typu, czyli o wybranym rozszerzeniu nazwy

User-Agent: Googlebot

# Nie indeksuj plików graficznych:

Disallow: /*.jpg$

Disallow: /*.jpeg$

Disallow: /*.gif$

Disallow: /*.png$

# Nie indeksuj dokumentów z identyfikatorami sesji:

Allow: /*?$

Disallow: /*?

Różnica pomiędzy

/*.gif$

/*.gif

jest taka, że w drugim przypadku zablokowane zostaną również pliki:

nazwa.gift

/nazwa.gif/nazwa.html

, co raczej nie było naszym zamiarem.

Wzorce dopasowania są rozszerzeniem standardu i mogą być nieobsługiwane przez wiele robotów sieciowych (są
interpretowane przez robota Google), dlatego zaleca się nie umieszczać ich w rekordzie

User-Agent: *

Cache

<head>

revalidate" />

check=0" />

</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

Strona 18

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

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>

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

Ikona strony może się wyświetlić automatycznie, nawet bez potrzeby wstawiania powyższego znacznika, jeśli
będzie nosiła nazwę

favicon.ico

i zostanie zapisana w głównym katalogu na serwerze WWW, czyli np.

http://www.example.com/favicon.ico

(Internet Explorer, Firefox, Opera).

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 7 ani Netscape 7)

Nowoczesne 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

Strona 19

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

<head>

</head>

lub

<head>

</head>

2. Do góry

<head>

</head>

3. Pierwsza

<head>

</head>

4. Poprzednia

<head>

</head>

lub

<head>

</head>

5. Następna

<head>

</head>

6. Ostatnia

<head>

</head>

7. Zawartość

Strona 20

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

<head>

</head>

lub

<head>

</head>

8. Rozdział (Mozilla)

<head>

</head>

9. Dział (Mozilla)

<head>

</head>

10. Poddział (Mozilla)

<head>

</head>

11. Dodatek (Mozilla)

<head>

</head>

12. Słowniczek

<head>

</head>

13. Indeks

<head>

</head>

14. Pomoc

Strona 21

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

<head>

</head>

15. Szukaj

<head>

</head>

16. Autor

<head>

</head>

17. Prawa autorskie

<head>

</head>

18. Zakładka (Mozilla)

<head>

</head>

19. Inne wersje (Mozilla)

<head>

</head>

lub

<head>

zyk" href="adres" />

</head>

lub

<head>

>
</head>

20. Własne (Mozilla)

Strona 22

Kurs HTML - HTML - BODY i META

2008-02-07 18:41:22

http://www.kurshtml.boo.pl/html/body.print.html

<head>

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

Wyszukiwarka

Podobne podstrony:
kurs html rozdział II
kurs HTML
[PL tutorial] Asembler kurs - HTML, Asembler, Asembler
Chomikowy kurs HTML
kurs html podstawy tworzenia stron www RHQWUXUAVSLOSX6ABOMEHGX52LV2WV67LZXY6RQ
kurs html rozdział VIII
kurs html rozdział V
kurs html K3XFOFAKJ5HG5BCW7HPVBJ5WVTXMHDAJGD266GA
Kurs HTML - obrazek
Kurs HTML, Dokumenty Textowe, Komputer
kurs html rozdział I
Kurs HTML, ♥Dokumenty, Przydatne do choniczka
Kurs HTML HTML Odsylacze id 254775
Mini Kurs HTML by Tommek131
kurs html rozdział IV
kurs html rozdział IX
Kurs HTML - HTML, Multimedia

więcej podobnych podstron