Strona g│≤wna
Spis polece± HTML | WstΩp | Etykieta webmastera | HTML dla bardzo pocz▒tkuj▒cych | Struktura dokumentu | Czcionki | Elementy blokowe | Odsy│acze | Wykazy | Grafika i multimedia | Tabele | Style | Ramki | P│ywaj▒ce ramki | Formularze | Znaki specjalne | Kolory | Ankieta
KsiΩga go╢ci | Wprowadzenie do JavaScript | Przydatne skrypty | Response-O-Matic | Liczniki wizyt | Kilka s│≤w o narzΩdziach | Leksykon webmastera | Wprowadzenie do FrontPage Express | Jak publikowaµ w jΩzyku Esperanto? | Tworzenie stron z ActiveX | Tworzenie stron z HTML Help Java Applet | NarzΩdzia ICQ | Zasoby webmasterskie

Struktura dokumentu

Czym jest dokument HTML? | Dlaczego stosujemy edytory HTML? | Podstawowe elementy dokumentu | WiΩcej szczeg≤│≤w o HEAD | WiΩcej szczeg≤│≤w o BODY | Kilka uwag o wlewaniu tekstu

[hand]Czym jest dokument HTML?

Byµ mo┐e wiele os≤b s▒dzi, ┐e strona w jΩzyku HTML jest jakim╢ tajemnym dokumentem, o specjalnym formacie, do tworzenia kt≤rej potrzebne s▒ specjalistyczne narzΩdzia i daleko id▒ca wiedza. Nic z tych rzeczy! Do utworzenia takiej strony nie jest potrzebne nic wiΩcej ni┐... zwyk│y edytor tekst≤w. Mo┐e to byµ, przynajmniej teoretycznie, najprostszy edytor, jak Notatnik, kt≤ry potrafi zapisywaµ dokument w postaci tekstowej.

W dokumentach powinni╢my stosowaµ standard kodowania polskich liter ISO-8859-2.
Po pierwsze, jest to miΩdzynarodowy standard, przyjΩty tak┐e w charakterze Polskiej Normy.
Po drugie, jest to standard bardziej uniwersalny, gdy┐ jest dostΩpny w wielu systemach operacyjnych.
Nale┐y zatem unikaµ u┐ywania innych standard≤w, np. Windows-1250. W tej chwili praktycznie wszystkie systemy operacyjne s▒ obs│ugiwane przez przegl▒darki potrafi▒ce rozpoznawaµ deklaracjΩ strony kodowej, umieszczanej w ramach czΩ╢ci nag│≤wkowej strony (HEAD). Ma ona w tym wypadku nastΩpuj▒c▒ postaµ:

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

Kosztem stosowania standardu ISO-8859-2 jest b│Ωdne wy╢wietlanie w starszych przegl▒darkach (Internet Explorer 3) kilku polskich znak≤w w niekt≤rych elementach strony - skryptach Javy, belce tytu│owej, wierszu statusu, alternatywnych opisach grafik, formularzach. Je╢li bΩdzie to raziµ poczucie estetyki autora, mo┐e zrezygnowaµ w nich ze stosowania polskich liter. PamiΩtajmy jednak, ┐e IE3 ma ju┐ tylko kilkuprocentowy udzia│ w rynku, wiΩc problem ma charakter coraz bardziej marginalny.

Stosowanie standardu kodowania Windows-1250 nie jest zabronione, ale nie jest r≤wnie┐ zalecane. Gdyby webmaster z jakich╢ powod≤w chcia│ stosowaµ ten standard, powinien bezwglΩdnie umie╢ciµ w dokumencie deklaracjΩ u┐ytej strony kodowej:

<HEAD>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
</HEAD>


Uwaga praktyczna:

Aby wygodnie redagowaµ dokumenty w standardzie kodowania ISO-8859-2, nale┐y siΩ zaopatrzyµ w czcionki w tym standardzie. S▒ one dostΩpne na polskiej stronie "ogonkowej", pod adresem http://www.agh.edu.pl/ogonki/pl.html. U┐ytkownikom edytor≤w dla Windows polecam darmowe czcionki ekranowe PolskieStrony i PolskieStrony2, dostΩpne w serwisie Polska Strona Windowsowa. U┐ytkownikom edytora HomeSite 2.5 lub nowszego nale┐y zalecaµ u┐ywanie czcionki PolskieStrony2. Nale┐y r≤wnie┐ u┐ywaµ nak│adki klawiaturowej, kt≤ra pozwala zdefiniowaµ klawiaturΩ ISO, np. w pakietach Mako lub Zecer. Pakiet Zecer 2.1 zawiera nak│adkΩ klawiaturow▒ Polkeyb, autorstwa Andrzeja G≤rbiela. Nak│adka pozwala zdefiniowaµ klawiatury w trybie graficznym, choµ mo┐liwe jest to za pomoc▒ rΩcznego wpisu do pliku WIN.INI.

Dla u│atwienia podajΩ tre╢µ wpisu. Wystarczy go skopiowaµ do schowka, wstawiµ do sekcji [PolKeyb] w WIN.NI, zapisaµ plik na dysku i ponownie uruchomiµ Windows. Fragment WIN.INI powinien wygl▒daµ nastΩpuj▒co:

[PolKeyb]
settings=0 2 10 0 1 10 0

name0=ISO-8859-2
keys0¼ELNOSXZ
lower0=177,230,234,179,241,243,182,188,191
upper0=161,198,202,163,209,211,166,172,175

Aby tekst w edytorze HTML by│ poprawnie wy╢wietlany, nale┐y wybraµ czcionkΩ ISO.

Wygodn▒, darmow▒ klawiaturΩ ISO mo┐na znale╝µ w serwisie Polska Strona Windowsowa

A st▒d mo┐esz pobraµ za darmo Polkeyb 2.4 (35 KB)

Uwaga: powy┐sze uwagi nie dotycz▒ czo│owych polskich edytor≤w, jak Paj▒czek 2000, Tiger czy WebPager Xpress, kt≤re automatycznie koduj▒ znaki w wybranym standardzie kodowania. W przypadku tego ostatniego edytora potrzebna jest jedynie czcionka ekranowa ISO.


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

Gdyby╢my chcieli wprowadziµ tytu│ drugiego stopnia, powinni╢my napisaµ:
<H2>Tre╢µ tytu│u drugiego stopnia</H2>, co w efekcie powinno daµ wynik:

Tre╢µ tytu│u drugiego stopnia

W podobny spos≤b mo┐emy wprowadziµ do dokumentu poziom▒ liniΩ, pos│uguj▒c siΩ pojedynczym znacznikiem <HR>, dziΩki czemu uzyskamy na ekranie przegl▒darki


Doszli╢my w tym miejscu do zwi▒zku dokumentu HTML z przegl▒dark▒ World Wide Web. Przegl▒darka jest wyspecjalizowanym programem, kt≤ry interpretuje znaczniki i "przetwarza" je na w│a╢ciw▒ postaµ graficzn▒. Do tej pory zaprojektowano ju┐ wiele przegl▒darek, r≤┐ni▒cych siΩ zaawansowaniem technicznym, a najdoskonalszymi z nich s▒ obecnie Netscape Communicator (wersja 6), wyprodukowany przez ameryka±sk▒ firmΩ Netscape Communications, Internet Explorer (wersja 5.5), firmy Microsoft, oraz Opera (wersja 5), firmy Opera Software.

Wr≤µmy jednak do HTML.

Do zbudowaniu dokumentu HTML nie potrzeba wiΩc niczego wiΩcej jak znajomo╢ci jΩzyka i prostego edytora tekst≤w (ale zalecam stosowanie specjalizowanych edytor≤w!). Powszechnie przyjΩtym standardem jest opublikowany w grudniu 1997 roku HTML 4.0. Obszerny opis najnowszej specyfikacji, czyli HTML 4.01 Specification (24 grudnia 1999), znajduje siΩ na internetowej stronie http://www.w3.org/TR/html4/ - mo┐na tam r≤wnie┐ pobraµ spakowane archiwum.

Wa┐na uwaga: formalnie zalecane jest stosowanie wy│▒cznie jΩzyka wchodz▒cego w sk│ad oficjalnej specyfikacji HTML. Jest to oczywi╢cie zalecenie, a nie bezwzglΩdny przymus stosowania, kt≤rego ignorowanie poci▒ga za sob▒ jakiekolwiek sankcje, np. usuniΩcie witryny z Sieci - przynajmniej w tej chwili. DecyzjΩ o przestrzeganiu lub wykraczaniu poza standard powinien podj▒µ SAM AUTOR serwisu, kt≤ry przyjmuje tym samym p│yn▒ce z tego tytu│u konsekwencje. Skutkiem nieprzestrzegania specyfikacji mo┐e byµ to, ┐e niekt≤re przegl▒darki bΩd▒ wadliwie interpretowaµ przygotowane strony. PamiΩtajmy tak┐e, ┐e nawet czo│owe przegl▒darki nie interpretuj▒ w pe│ni element≤w HTML 4.


[hand]Dlaczego stosujemy edytory HTML?

Skoro tworzenie dokumentu jest technicznie tak proste, dlaczego pojawi│o siΩ na ╢wiecie tak wiele edytor≤w HTML? Odpowied╝ jest tak┐e prosta. Zamiast pracowicie wpisywaµ rΩcznie znaczniki, wystarczy klikn▒µ na odpowiednim przycisku lub nacisn▒µ jaki╢ skr≤t klawiszowy, aby wprowadziµ odpowiedni znacznik. Bardziej zaawansowane produkty wspomagaj▒ tworzenie wyspecjalizowanych element≤w, jak tabele, odsy│acze, ramki czy formularze. I na tym w│a╢nie polega istota ich pracy. Nie pozostawiaj▒ u┐ytkownika samemu sobie, lecz intensywnie wspomagaj▒ jego pracΩ, znacznie j▒ przyspieszaj▒c i u│atwiaj▒c.

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


[hand]Podstawowe elementy dokumentu

Dokument HTML, aby odpowiada│ przyjΩtemu standardowi, powinien zawieraµ co najmniej trzy elementy. Choµ czΩsto spotyka siΩ w Internecie dokumenty nie zawieraj▒ce wszystkich polece±, nale┐y unikaµ tej maniery.

Wcze╢niej warto jeszcze powiedzieµ, ┐e czΩsto stosuje siΩ w dokumentach WWW specjalny prolog, kt≤ry identyfikuje poziom u┐ywanego jΩzyka HTML. Jest on wstawiany jako pierwszy element dokumentu, JESZCZE PRZED otwarciem szkieletu strony, czyli <HTML>. Prolog jest m.in. wykorzystywany jako oznaczenie poziomu w procesie weryfikacji poprawno╢ci sk│adni za pomoc▒ tzw. parser≤w. Specyfikacja HTML 4 przewiduje trzy wersje prologu.

Je╢li dokument jest zgodny ze specyfikacj▒ HTML 4.0.1, mo┐emy stosowaµ prolog:

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

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

Niekt≤rzy autorzy stron dodaj▒ jeszcze sieciowy adres tej wersji DTD (ma on s│u┐yµ do ewentualnego pobrania definicji przez przegl▒darkΩ), choµ nie jest to bezwzglΩdnie konieczne - nawet specyfikacja HTML nie podaje tego adresu.

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

CzΩ╢ciej stosowan▒ wersj▒ prologu jest tzw. wersja przej╢ciowa ("lu╝na"):

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

Prolog ten deklaruje dokument jako zawieraj▒cy wszelkie mo┐liwe elementy i atrybuty HTML, │▒cznie ze schy│kowymi. Specyfikacja HTML sama pos│uguje siΩ w│a╢nie tym prologiem. Sugerujemy u┐ywanie tej postaci prologu - w│a╢nie dziΩki niej mo┐na miΩdzy innymi poprawnie wy╢wietlaµ kolorowe suwaki.

Wersja z adresem sieciowym DTD ma postaµ:

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

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

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

I jego wersja z adresem:

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

Je╢li dokument jest zgodny z wcze╢niejsz▒ specyfikacj▒ HTML 3.2, powinni╢my stosowaµ prolog:

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

lub

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

Parsery przyjmuj▒ takie deklaracje jako podstawΩ badania poprawno╢ci sk│adniowej. Najlepiej skorzystaµ z oficjalnego parsera World Wide Web Consortium, opartego na specyfikacji HTML 4.0.:

W3C HTML Validation Service

Warto w tym miejscu powiedzieµ kilka s│≤w o programach, kt≤re weryfikuj▒ sk│adniΩ offline, czyli na komputerze u┐ytkownika. Dobrymi narzΩdziami, aczkolwiek w chwili obecnej nie dysponuj▒cymi wbudowanym parserem SGML, s▒ HTML Powertools, firmy Opposite Software, a tak┐e CSE 3310 HTML Validator dla Windows 95, firmy Alsoft Internet Solutions. S▒ to dobre korektory poprawno╢ci sk│adniowej, wychwytuj▒ce wiele b│Ωd≤w, aczkolwiek nie traktuj▒ce tak rygorystycznie standardu HTML. Osoba, kt≤rej zale┐y na absolutnej zgodno╢ci ze standardem, powinna je traktowaµ tylko jako bardzo dobre narzΩdzie pomocnicze. Oba programy s▒ p│atne, ale Alsoft Internet Solutions oferuje te┐ darmow▒, uproszczon▒ wersjΩ Lite, kt≤ra pomaga usun▒µ wiele "g│upich" b│Ωd≤w na stronie - sam chΩtnie korzystam z tego programu i polecam go wszystkim webmasterom.

Wr≤µmy do szkieletu strony.

<HTML> </HTML>

Jest to otwieraj▒cy i zamykaj▒cy znacznik dokumentu, a miΩdzy nimi jest umieszczana ca│a tre╢µ. Znacznik nie jest bezpo╢rednio widoczny w przegl▒darce.

<HEAD> </HEAD>

Znacznik jest umieszczany wewn▒trz znacznik≤w HTML i sam zawiera podstawowe informacje o dokumencie, w pierwszym rzΩdzie tytu│ strony. W ramach tego znacznika jest umieszczana tzw. czΩ╢µ nag│≤wkowa.

<BODY> </BODY>

Jest to znacznik umieszczany wewn▒trz znacznik≤w HTML, za znacznikami HEAD. Zawiera konkretn▒ tre╢µ dokumentu.

W praktyce wygl▒da to nastΩpuj▒co:


<HTML>
<HEAD>

Informacje nag│≤wkowe o dokumencie, │▒cznie z tytu│em

</HEAD>
<BODY>

Tre╢µ dokumentu - ╢r≤dtytu│y, tekst, grafika, odsy│acze itp.

</BODY>
</HTML>


[hand]WiΩcej szczeg≤│≤w o HEAD

Definiuj▒c <HEAD> mo┐emy wstawiµ kilka dalszych parametr≤w, kt≤re uzupe│niaj▒ informacje o stronie.

[zielona kropka]<TITLE></TITLE>

Najwa┐niejszym elementem (koniecznie go u┐ywaj!) jest tytu│ strony, kt≤ry ukazuje siΩ w belce tytu│owej przegl▒darki. Zaleca siΩ zwykle nieprzekraczanie 40 znak≤w. Tytu│u nie nale┐y myliµ z pierwszym nag│≤wkiem strony, aczkolwiek oba te elementy mog▒ mieµ oczywi╢cie tΩ sam▒ tre╢µ. Za│▒czony fragment ekranu pokazuje w belce tre╢µ Netscape - (Kurs jΩzyka HTML), gdy┐ w dokumencie znalaz│a siΩ definicja <TITLE>Kurs jΩzyka HTML</TITLE>.

[tytu│ w belce]

Wa┐na uwaga: Nie u┐ywaj w tytu│ach samych WIELKICH LITER, gdy┐ wiele wyszukiwarek zignoruje stronΩ. Nie wpisuj tak┐e w ramach TITLE adres≤w internetowych, gdy┐ skutek bΩdzie taki sam. Warto tak┐e pamiΩtaµ, ┐e indeksery nadaj▒ temu znacznikowi wysoki priorytet, a wiΩc warto w nim podaµ istotne informacje, np. nie "Moja strona domowa", lecz raczej "Psy, koty i inne zwierzaki domowe".

[zielona kropka]<META>

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

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

Zwr≤µmy uwagΩ na kilka polece±, kt≤re mo┐na umie╢ciµ w <META>. Polecamy w szczeg≤lno╢ci: strona kodowa, opis strony, wyrazy kluczowe, autor strony.

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2">

Polecenie jest deklaracj▒ strony kodowej dokumentu. Inna postaµ to charset=windows-1250. Nowe przegl▒darki (Navigator/Communicator, Internet Explorer) potrafi▒ siΩ automatycznie przestawiµ na w│a╢ciw▒ stronΩ kodow▒, zgodnie z podan▒ deklaracj▒. Nie jest potrzebna interwencja u┐ytkownika, kt≤ry nie musi nawet wiedzieµ, z jakim standardem kodowania polskich znak≤w ma do czynienia. Polecenie to jest bezwzglΩdnie zalecane przy tworzeniu stron WWW. Jego brak jest, niestety, powszechnym b│Ωdem na stronach HTML-owych nowicjuszy.

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


<META NAME ="Description" CONTENT="jaka╢ tam tre╢µ">

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

<META NAME ="Description" CONTENT="Esperanto: strona zawiera podstawowe informacje o jΩzyku Esperanto, odsy│acze do najwa┐niejszych stron, podrΩcznik i s│owniczek.">

Zaleca siΩ nieprzekraczanie 150-200 znak≤w - w niekt≤rych specjalistycznych serwisach spotyka siΩ zalecenie "co najwy┐ej 20-25 wyraz≤w".


<META NAME="Keywords" CONTENT="jakie╢ wyrazy kluczowe">

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

Polecam pobranie 15-dniowej wersji testowej programu TagGen z serwisu TUCOWS i zapoznanie siΩ z jego dzia│aniem, a zw│aszcza z funkcj▒ Meta tag analysis. To dobra szko│a dla webmastera dbaj▒cego o opisanie swojego serwisu.

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


<META HTTP-EQUIV="Content-Language" CONTENT="pl">

Polecenie informuje o jΩzyku strony. Niekt≤re przegl▒darki korzystaj▒ z niego przy precyzowaniu zapyta±. Dla jΩzyka angielskiego u┐yjemy en, dla ameryka±skiego angielskiego en-us, dla niemieckiego de, dla francuskiego fr, dla rosyjskiego "ru" itd.


<META NAME="Author" CONTENT="imiΩ i nazwisko">

Polecenie informuje o autorze strony.


<META NAME="Generator" CONTENT="nazwa edytora">

Polecenie informuje o u┐ytym narzΩdziu do tworzenia stron HTML, np. Homesite, Paj▒czek, Tiger98.


<META HTTP-EQUIV="expires" CONTENT="data i czas">

Polecenie wskazuje przegl▒darce, kiedy dokument traci "wa┐no╢µ" i trzeba go wczytaµ na nowo z Sieci. Data musi byµ podawana w formacie zdefiniowanym przez dokument RFC850.

Przyk│ad:

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Apr 2001 08:21:57 GMT">

Polecenie mo┐e byµ przydatne w przypadku d│ugich dokument≤w, kt≤rych zawarto╢µ zmienia siΩ w przewidzianych z g≤ry momentach, jak np. dokumenty o oficjalnym charakterze.


<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

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


<META HTTP-EQUIV="Refresh" CONTENT="x">

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

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


<META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://.../strona.html">

Polecenie spowoduje automatyczne wczytanie nowej strony po x sekundach. W Internecie czΩsto spotyka siΩ strony z informacj▒ o zmianie adresu, gdy odsy│acz z innej strony jest ju┐ nieaktualny. Autor strony pozostawia pod starym adresem informacjΩ o zmianie, podaj▒c nowy adres, ale opatruj▒c tΩ stronΩ zaprezentowanym poleceniem, kt≤re spowoduje automatyczne przej╢cie pod w│a╢ciwy adres po x sekundach. Tylko niekt≤re przegl▒darki interpretuj▒ to polecenie.


<META HTTP-EQUIV="Creation-Date" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">

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


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

Polecenie jest wskaz≤wk▒ dla indekser≤w, czy strona i jej pochodne maj▒ byµ indeksowane. Domy╢lnie stosowane jest indeksowanie, ale mo┐emy podaµ dyrektywΩ, wybieraj▒c kombinacjΩ index/noindex i follow/nofollow.

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

Przyk│ad:

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

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

Uwaga: nie wszystkie roboty sieciowe rozpoznaj▒ tΩ dyrektywΩ.


<META HTTP-EQUIV="Page-Enter" CONTENT="filter:RevealTrans(Duration=3,Transition=23)">

Polecenie jest przyk│adem zastosowania przej╢µ miΩdzy stronami, interpretowanym jedynie przez Internet Explorer 4.01 lub nowszy. Mo┐emy tutaj zastosowaµ page-enter, page-exit, site-enter i site-exit. W Transition stosujemy numery filtr≤w graficznych od 1 do 28 (ich zestaw zawiera m.in. FrontPage), natomiast Duration okre╢la czas trwania przej╢cia w sekundach. Filtry daj▒ podobny efekt wizualny, jak przej╢cia miΩdzy stronami w programach grafiki prezentacyjnej. Polecenie jest umieszczane na pierwszym miejscu listy polece± META.

Przyk│ad (Transition=1)

Przyk│ad (Transition=2)

Przyk│ad (Transition=3)

Przyk│ad (Transition=4)

Przyk│ad (Transition=5)

Przyk│ad (Transition=6)

Przyk│ad (Transition=7)

Przyk│ad (Transition=8)

Przyk│ad (Transition=9)

Przyk│ad (Transition=10)

Przyk│ad (Transition=11)

Przyk│ad (Transition=12)

Przyk│ad (Transition=13)

Przyk│ad (Transition=14)

Przyk│ad (Transition=15)

Przyk│ad (Transition=16)

Przyk│ad (Transition=17)

Przyk│ad (Transition=18)

Przyk│ad (Transition=19)

Przyk│ad (Transition=20)

Przyk│ad (Transition=21)

Przyk│ad (Transition=22)

Przyk│ad (Transition=23)

Przyk│ad (Transition=24)

Przyk│ad (Transition=25)

Przyk│ad (Transition=26)

Przyk│ad (Transition=27)

Przyk│ad (Transition=28)


<META http-equiv="PICS-Label" content='(PICS-1.0 "http://www.rsac.org/ratingsv01.html" l gen false comment "RSACi North America Server" by "htmlib@htmlib.demon.co.uk" for "http://subnet.virtual-pc.com/~le387818/index.html" on "1996.04.04T08:15-0500" exp "1997.01.01T08:15-0500" r (n 0 s 0 v 0 l 0))'>

Jest to przyk│ad (pochodz▒cy z "HTML Reference Library 4") polecenia definiuj▒cego "cenzuralno╢µ" (rating) strony. Aby je zastosowaµ, nale┐y zg│osiµ stronΩ do serwisu zajmuj▒cego siΩ wycen▒ zawarto╢ci stron, np. Recreational Software Advisory Council (RSAC), wype│niaj▒c formularz. RSAC przesy│a ostateczn▒ tre╢µ polecenia. W nawiasie s▒ widoczne wyceny przyk│adowej strony: nudity - 0, sex - 0, violence - 0, language - 0. Wspomaganie PICS (Platform for Internet Content Selection) zawieraj▒ m.in. HotDog 4.5 i WebEdit 3.

Przegl▒darka (Internet Explorer) interpretuje zawarto╢µ strony wed│ug zadeklarowanych warto╢ci i wczytuje stronΩ albo nie, zale┐nie od przyjΩtych w opcjach ogranicze±. Jest to narzΩdzie, kt≤re pozwala blokowaµ dostΩp do niekt≤rych stron, np. nieletnim do serwis≤w pornograficznych.

[zielona kropka]<BASE>

Polecenie definiuje bazowy adres dokumentu.

<BASE HREF="http://www.firma.com/dokument.html">

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

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

[zielona kropka]<LINK>

Polecenie ma okre╢laµ hierarchiczny porz▒dek w zespole dokument≤w dla cel≤w nawigacyjnych. W tym miejscu warto o nim wspomnieµ jedynie w kontek╢cie styl≤w do│▒czanych, kt≤re w Internet Explorerze wp│ywaj▒ na postaµ wy╢wietlanego dokumentu (bΩdzie o tym mowa w rozdziale po╢wiΩconym stylom).

Pe│ny zestaw polece± LINK interpretuje jedynie przegl▒darka NCSA Mosaic 3 (pamiΩtasz jeszcze tak▒ nazwΩ?...)


[hand]WiΩcej szczeg≤│≤w o BODY

Definiuj▒c <BODY> mo┐emy wstawiµ dodatkowo kilka parametr≤w, kt≤re zadecyduj▒ o graficznej postaci strony.

[zielona kropka]<BODY BACKGROUND="URL albo ╢cie┐ka/nazwa_pliku.gif">

Parametr BACKGROUND="obrazek.gif" pozwala wybraµ obrazek, kt≤ry poka┐e siΩ w tle dokumentu w przegl▒darce. (najlepiej, ┐eby siΩ znajdowa│ w tym samym katalogu co strona HTML) Je╢li np. bΩdzie to <BODY BACKGROUND="lupus.gif">, w przegl▒darce zobaczymy dokument w takiej postaci:

Kliknij w tym miejscu, aby zobaczyµ przyk│ad

Zauwa┐my, ┐e niewielki objΩto╢ciowo obrazek lupus.gif zosta│ powielony na szeroko╢µ i d│ugo╢µ strony.

[zielona kropka]<BODY BGCOLOR="kolor">

Parametr BGCOLOR="kolor" pozwala wybraµ kolor t│a dokumentu, kt≤ry poka┐e siΩ w tle dokumentu w przegl▒darce. Gdyby by│ to <BODY BGCOLOR="yellow">, zobaczymy:

Kliknij w tym miejscu, aby zobaczyµ przyk│ad

Mam nadziejΩ, ┐e nikogo nie rozbola│y oczy od tego przyk│adu.

Uwaga: nale┐y deklarowaµ kolor t│a strony, gdy┐ je╢li tego nie zrobimy, czytelnik strony zobaczy t│o zale┐ne od jego w│asnych ustawie± w przegl▒darce, bia│e, szare czy jakiekolwiek inne. Mo┐e to "zrujnowaµ" wy╢wietlanie strony. Ponadto, gdy u┐ywamy pliku graficznego jako t│a, tak┐e podawajmy alternatywny kolor t│a strony, gdy┐ wiele os≤b wy│▒cza grafikΩ w przegl▒darce - wtedy widoczny jest jedynie kolor t│a strony.

[zielona kropka]<BODY TEXT="kolor">

Parametr TEXT="kolor" pozwala okre╢liµ kolor tekstu w dokumencie. Wybieraj▒c kolor, nale┐y mieµ tak┐e na uwadze kolor t│a.

Kliknij w tym miejscu, aby zobaczyµ przyk│ad

[zielona kropka]<BODY LINK="kolor1" VLINK="kolor2" ALINK="kolor3">

Mo┐emy r≤wnie┐ okre╢liµ kolory odsy│aczy. LINK="kolor" okre╢la standardowy kolor odsy│acza. VLINK="kolor" (visited link) okre╢la kolor odsy│acza, kt≤ry zosta│ co najmniej raz u┐yty (zauwa┐my zwi▒zek z ustawieniem przegl▒darki u odbiorcy, kt≤ry mo┐e na og≤│ swobodnie definiowaµ czas "wygasania" informacji o wizytowaniu jakiego╢ miejsca w Internecie). ALINK="kolor" (active link) okre╢la kolor aktywnego odsy│acza Odsy│acz aktywny to odsy│acz w trakcie │adowania dowi▒zanego do niego dokumentu. Je╢li np. odsy│acz ma standardowo kolor niebieski, w momencie przywo│ywania dowi▒zanego dokumentu zmieni na chwilΩ sw≤j kolor (w│a╢nie zdefiniowany za pomoc▒ ALINK="kolor"), natomiast gdy powr≤cimy do tej samej strony, zobaczymy, ┐e odsy│acz ma ju┐ kolor zdefiniowany za pomoc▒ VLINK="kolor", jako ju┐ co najmniej raz wizytowany. Mo┐emy przyk│adowo u┐yµ kolor≤w:

<BODY LINK="blue" VLINK="red" ALINK="yellow">

[zielona kropka]<BODY LEFTMARGIN="xx">

Microsoft Internet Explorer pozwala dodatkowo wprowadziµ lewy margines strony. Warto╢µ LEFTMARGIN="xx" spowoduje przesuniΩcie zawarto╢ci dokumentu o xx pikseli w prawo.

[zielona kropka]<BODY TOPMARGIN="xx">

Ta sama przegl▒darka akceptuje kod wprowadzaj▒cy g≤rny margines strony. Warto╢µ TOPMARGIN="yy" spowoduje przesuniΩcie zawarto╢ci dokumentu o yy pikseli w d≤│.

Kliknij w tym miejscu, aby zobaczyµ przyk│ad

Oba polecenia nie wchodz▒ w zakres standardu HTML 4.0.


[hand]Kilka uwag o wlewaniu tekstu

Bardziej szczeg≤│owy opis formatowania blok≤w tekstu znajduje siΩ na stronie Bloki, ale ju┐ w tym miejscu warto zasygnalizowaµ podstawowe, zwi▒zane z tym problemy.

Gdy redagujemy tekst w edytorze, jeste╢my przyzwyczajeni do u┐ywania klawisza Enter, aby oddzielaµ od siebie akapity. Jednak przegl▒darka ignoruje znak ko±ca akapitu i mimo oddzielenia od siebie akapit≤w w edytorze zostan▒ one z│▒czone w przegl▒darce w ci▒g│▒ liniΩ. Dlatego ka┐dy akapit powinni╢my umieszczaµ miΩdzy par▒ znacznik≤w <P> </P>. Je╢li wlewamy do edytora HTML tekst z innego ╝r≤d│a, musimy obj▒µ ka┐dy z akapit≤w osobn▒ par▒ znacznik≤w. Akapity s▒ w przegl▒darce oddzielane dodatkow▒ interlini▒, kt≤ra uwypukla podzia│.
Mo┐emy te┐ pos│u┐yµ siΩ pojedynczym (otwartym) znacznikiem <BR>, umieszczanym na ko±cu akapitu, kt≤ry pozwoli oddzieliµ od siebie akapity, nie wprowadzaj▒c interlinii.

Kilka spacji obok siebie jest zamienianych na pojedyncz▒ spacjΩ, tak wiΩc nie mo┐na (poza tzw. stylem preformatowanym) wstawiaµ wiΩkszej liczby spacji miΩdzy wyrazami. Na tej samej zasadzie ignorowane s▒ r≤wnie┐ tabulatory.

        Mo┐na jednak wstawiaµ znak tzw. nie│amliwej spacji (&nbsp;), kt≤ry pozwala wstawiµ kilka kolejnych spacji. Przyk│adem jest niniejszy akapit, kt≤rego pierwszy wiersz jest odsuniΩty od lewego marginesu o 8 spacji.


go╢µ specjalny helion.pl