Kurs HTML - HTML - BODY i META.pdf - Poradniki - Platun

Kurs HTML - HTML - BODY i META

Strona 1

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

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

2008-02-07 18:41:22

Kurs HTML - HTML - BODY i META

Strona 2

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

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

2008-02-07 18:41:22

Kurs HTML - HTML - BODY i META

Strona 3

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

lub

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

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

2008-02-07 18:41:22

Kurs HTML - HTML - BODY i META

Strona 4

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

stylów.

Podświetlenie

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

2008-02-07 18:41:22

Kurs HTML - HTML - BODY i META

Strona 5

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.

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

2008-02-07 18:41:22

Kurs HTML - HTML - BODY i META.pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: