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 ... 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 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 - zaraz po nagłówku strony (...). 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 (...). 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
kolor ... 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
kolor ... 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
ście\ka dostępu do obrazka ... lub
ście\ka dostępu do obrazka ... (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 *.gif (dla zdjęć wielokolorowych) lub (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
aktywnych ... 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 wskaznik 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 ...) umieścić następujący tekst:
gdzie "kolor" oznacza definicję koloru. Aby dodać tło, nale\y wpisać (tak jak poprzednio w treści nagłówkowej):
Aby połączyć powy\sze efekty:
Aby zupełnie usunąć podkreślenie pod odsyłaczami:
Aby usunąć podkreślenie pod zwykłymi odsyłaczami i dodać je po wskazaniu myszką:
Aby zupełnie usunąć podkreślenie tylko pod niektórymi odsyłaczami - np. w menu serwisu (kod do wstawienia w wybranym miejscu strony): style="text-decoration: none" opis [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 Strona 6 Szerokość marginesów 1. Internet Explorer (równie\ Opera 7 i nowsze wersje przeglądarek na silniku Gecko, czyli Netscape/Mozilla/ Firefox): x1 x2 y1 bottommargin=" "> y2 ... x1 Szerokość lewego marginesu x2 Szerokość prawego marginesu y1 Wysokość górnego marginesu y2 Wysokość dolnego marginesu (wszystko w pikselach). 2. Netscape/Mozilla/Firefox: 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. Kolor suwaków (tylko Internet Explorer 5.5 lub nowszy oraz Opera 7 przy niestandardowych ustawieniach!)
kolor ... gdzie "kolor" oznacza definicję koloru. http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 7 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
Tytuł strony
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. Strona główna Taki sam tytuł na wszystkich podstronach serwisu nie jest dobrym pomysłem, a tytuły w stylu " " Bez tytułu czy " " 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
.....
Polecenie jest deklaracją strony kodowej, czyli sposobu w jaki będą kodowane znaki na naszej stronie WWW. Zamiast charset=iso-8859-2 charset=windows-1250 mo\na wpisać: , 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 http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 8 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
Tu podaj opis twojej strony
Polecenie to nale\y wstawić między znacznikami: oraz . 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
wyraz1, wyraz2, wyraz3...
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: oraz . 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 odnalezć Twoją stronę! Język strony http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 9
język
gdzie jako "język" nale\y podać skrót nazwy wybranego języka. Polecenie to nale\y wstawić między znacznikami: oraz . 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
Tu wpisz swoje imię i nazwisko
Polecenie to nale\y wstawić między znacznikami: oraz . Pozwala ono podać informację, kto jest autorem strony. Adres zwrotny
twój adres e-mail
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: oraz . Bezpośrednie podanie swojego adresu e-mail na stronie WWW mo\e poskutkować zalewem Twojej skrzynki spamem, czyli niechcianą korespondencją reklamową. Data utworzenia
data
gdzie jako "data" nale\y wpisać datę utworzenia dokumentu w formacie GMT, np.: "Tue, 20 Aug 1996 14:25:27 GMT". http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 10 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: oraz head> . Ostatnia modyfikacja
data
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: oraz . Utrata wa\ności
data
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: oraz . Automatyczne odświe\anie strony
s
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: oraz head> . http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 11 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
lub ście\kę dostępu
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. Przejście między stronami (tylko Internet Explorer 4.01 lub nowszy!) 1. Przejście płynne
sposób s
2. Filtr graficzny
s n
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 od0do23): http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 12 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 (jako pierwsze)! Wpisanie go po jakimkolwiek innym znaczniku, np. deklaracji strony kodowej, spowoduje, \e nie będzie ono interpretowane. Edytor 1. Generator http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 13
nazwa edytora
2. Narzędzie autorskie
nazwa edytora
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
dyrektywy
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ózniej 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 index, follow dokumentów. To oznacza, \e dyrektywa " " mo\e być pominięta, a zamiast wpisywać noindex, follow index, nofollow noindex " " czy " " zwykle wystarczy wpisać odpowiednio: " " 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. nofollow Zwróć uwagę, \e wartość " " 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 - http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 14 mo\liwe, \e w zupełnie innym serwisie - znajdą się linki do tych stron, zostaną one normalnie zaindeksowane. Aby noindex temu zapobiec, nale\y wstawić dyrektywę " " na stronach, które nie powinny być zaindeksowane. all index nofollow Specyfikacja HTML 4.01 wskazuje tylko następujące wartości tego elementu: , , , noindex . Choć inne specyfikacje jasno wskazują na dodatkowe wartości, to jeśli chcesz mieć największą none noindex, nofollow pewność, \e dyrektywy zostaną uwzględnione, zamiast " " mo\esz u\yć " ". 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 noarchive Dyrektywa " " 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.:
nofollow, noarchive 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ć:
Googlebot 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: ... adres strony rel="nofollow" http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 15 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 index.html - nale\y umieścić konta WWW - czyli tam, gdzie znajduje się dokument strony głównej serwisu ( ) 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": : Googlebot User-agent Pojedynczy rekord mo\e zawierać więcej ni\ jedną linię User-Agent : # Ten rekord odnosi się tylko do robotów "Googlebot" i "MSNBot": : Googlebot User-agent : MSNBot User-agent Specyfikacja HTML 4.01 wyraznie zabrania umieszczania kilku linii User-Agent jednej pod drugą, jednak 3 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 http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 16 * 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 Disallow musi się znajdować jedna lub więcej linii , 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ędą 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 http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 17 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 Allow oraz : *- 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 / a 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
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 http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 18 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 zró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)
adres ikony
gdzie jako "adres ikony" nale\y podać URL, pod którym znajduje się ikona, np.:http:// www.mojastrona.pl/favicon.ico favicon.ico Polecenie to pozwala dodać ikonkę ( ), 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ózniej 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 http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 19
adres
lub
adres
2. Do góry
adres
3. Pierwsza
adres
4. Poprzednia
adres
lub
adres
5. Następna
adres
6. Ostatnia
adres
7. Zawartość http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 20
adres
lub
adres
8. Rozdział (Mozilla)
Tytuł adres
9. Dział (Mozilla)
Tytuł adres
10. Poddział (Mozilla)
Tytuł adres
11. Dodatek (Mozilla)
Tytuł adres
12. Słowniczek
adres
13. Indeks
adres
14. Pomoc http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 21
adres
15. Szukaj
adres
16. Autor
adres
17. Prawa autorskie
adres
18. Zakładka (Mozilla)
Tytuł adres
19. Inne wersje (Mozilla)
Tytuł adres
lub
Tytuł język adres
lub
Tytuł media adres >
20. Własne (Mozilla) http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22 Kurs HTML - HTML - BODY i META Strona 22
Nazwa Tytuł adres
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 Sprawdz swoją wiedzę, nabytą w tym rozdziale, rozwiązując testowy QUIZ. http://www.kurshtml.boo.pl/html/body.print.html 2008-02-07 18:41:22