Menu >> Strona Startowa
Witam... Gry |

Licznik

Zegar

Webmaster-info

Webmaster

Dokument

Struktura dokumentu

O rozdziale: W rozdziale prezentuję ogólną strukturę dokumentu HTML, a więc ramy - prolog, część nagłówkową i ciało dokumentu - do których wstawiamy informacje o samym dokumencie oraz jego właściwą treść. Zrozumienie tego rozdziału jest kluczowe dla pisania poprawnie skonstruowanych stron, interpretowanych bez zakłóceń przez przeglądarki internetowe oraz dobrze widocznych w samym Internecie, a przede wszystkim w wyszukiwarkach sieciowych.

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. Listę dobrych edytorów znajdziesz na stronie HTML dla początkujących.

Przypomnijmy, że w języku HTML wielkość liter w znacznikach jest obojętna, jednak zalecane jest stosowanie małych liter, a więc <h1>, a nie <H1> - w jego kontynuacji, języku XHTML, małe znaczniki są już obowiązkowe!

W dokumentach powinniśmy stosować przede wszystkim 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.

Drugim wartym rozważenia standardem, zalecanym zwłaszcza w języku XHTML, jest UTF-8 (Unicode), jednak jest on jeszcze niezbyt często spotykany na polskich stronach, choć bez wątpienia jest przyszłością webmasterstwa.

Należy unikać używania innych "polskich" standardów, a szczególnie Windows-1250, typowego jedynie dla Windows. 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>

W przypadku standardu Unicode informacja o stronie kodowej ma następującą postać:

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>

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 programy oparte na pracach Fundacji Mozilla (jak Firefox), Opera firmy Opera Software, oraz Internet Explorer firmy Microsoft.

Wróćmy jednak do HTML.

Do zbudowania 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 języka HTML 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 - może to być szczególnie widoczne wtedy, gdy rozpowszechnią się nowsze standardy, tj. XHTML.

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ąć odpowiedni przycisk lub nacisnąć jakiś skrót klawiszowy, aby wprowadzić odpowiedni znacznik. Bardziej zaawansowane produkty wspomagają tworzenie wyspecjalizowanych elementów, jak ilustracje, 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.

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ń, zdecydowanie należy unikać tej maniery.

Wcześniej warto jeszcze powiedzieć, że często stosuje się w dokumentach WWW specjalny prolog (jest to zalecane, gdyż możemy dzięki temu sprawdzać poprawność stron w walidatorze), 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. Tym niemniej zaleca się tę właśnie wersję prologu.

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

Często 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 z wycofanymi, jak i uznanymi za schyłkowe. Specyfikacja HTML sama posługuje się właśnie tym prologiem.

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

Oczywiście autorzy stron piszący w nowszym języku XHTML stosują nieco inne prologi, dostosowane właśnie do potrzeb tego języka.

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

Informacje o DOCTYPE

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.

Informacje o HTML

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

Informacje o HEAD

<body> </body>

Jest to znacznik umieszczany wewnątrz znaczników html, za znacznikami head. Zawiera konkretną treść dokumentu.

Informacje o BODY

Łącznie wygląda to więc następująco:

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

Więcej szczegółów o HEAD

Definiując sekcję nagłówkową <head> możemy wstawić kilka dalszych parametrów, które uzupełniają informacje o stronie.

Tytuł dokumentu

<title> </title>

Ważnym 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>.

Polecenie title umieszczaj zawsze bezpośrednio za otwierającym znacznikiem head, jeszcze PRZED informacjami meta.

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ą zwykle 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".

Informacje o TITLE

Informacje nagłówkowe

<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, data utworzenia.

Strona kodowa dokumentu

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

Polecenie jest deklaracją strony kodowej dokumentu, według standardu iso-8859-2. Przeglądarki 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.

Opis strony

<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ę wyszukiwarką Google, 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".

Wyrazy kluczowe

<meta name="keywords" content="jakieś wyrazy kluczowe">

Polecenie informuje o wyrazach kluczowych dokumentu, zwracając przykładową wartość Keywords: HTML, webmaster, kurs, poradnik. 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.

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.

Język dokumentu

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

Autor strony

<meta name="author" content="imię i nazwisko">

Polecenie informuje o autorze strony.

Nazwa edytora

<meta name="generator" content="nazwa edytora">

Polecenie informuje o użytym narzędziu do tworzenia stron HTML, np. Homesite, Pajączek, Tiger98.

Data ważności dokumentu

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

Cache'owanie strony'

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

Odświeżanie strony

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

Automatyczne przekierowanie

<meta http-equiv="refresh" content="x; url=http://.../strona.html">

Polecenie spowoduje automatyczne przekierowanie, czyli 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.

Data utworzenia

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

Indeksowanie strony

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

Cenzuralność strony

<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) zawiera m.in. Pajączek.

Przeglądarka 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.

Informacje o META

Adres bazowy

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

Informacje o BASE

Porządek w nawigacji

<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 przeglądarce wpływają na postać wyświetlanego dokumentu (będzie o tym mowa w rozdziale poświęconym stylom).

Pełny zestaw poleceń LINK interpretowała jedynie przeglądarka NCSA Mosaic 3 (pamiętasz jeszcze taką nazwę?...)

Informacje o LINK

Więcej szczegółów o BODY

Definiując ciało dokumentu możemy wstawić dodatkowo kilka informacji o stylach, które zadecydują o graficznym tle strony.

Obrazek jako tło strony

W starszej wersji HTML stosowano atrybut background="nazwa_pliku_graficznego", jednak jest on uznany za przestarzały i obecnie zaleca się stosowanie stylów.

<body style="background-image: url(nazwa_obrazka); ">

Na przykład:

<body style="background-image: url(../grafika/lupus.gif); ">

Podany w poleceniu obrazek pokaże się w tle dokumentu w przeglądarce,

 

Zauważmy, że niewielki objętościowo obrazek lupus.gif został powielony na szerokość i długość strony. Za pomocą stylów można też określać sposób powtarzania obrazka oraz jego zaczepienia.

Kolor tła strony

W starszej wersji HTML stosowano też atrybut bgcolor="kolor", który pozwalał wybrać kolor tła dokumentu. Obecnie stosuje się w to miejsce style.

<body style="background-color: wartość_koloru; ">

Na przykład:

<body style="background-color: yellow; ">

Kliknij w tym miejscu, aby zobaczyć przykład

Mam nadzieję, że nikogo nie rozbolały oczy od tego przykładu.

Uwaga: w zasadzie powinno się 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 - autor strony nie ma na to wpływu. 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.

Kolor tekstu w dokumencie

W starszych wersjach HTML stosowano atrybut body text="kolor", za pomocą którego definiowano "hurtowo" kolor tekstu w dokumencie. Obecnie stosuje się style.

<body style="color: wartość_koloru; ">

Na przykład:

<body style="color: #400040; ">

Kliknij w tym miejscu, aby zobaczyć przykład

Analogicznie możemy również określić za pomocą stylów kolory odsyłaczy. Poprzednio stosowano polecenia link="kolor" (standardowy kolor odsyłacza), vlink="kolor" (visited link, określający kolor odsyłacza, który został co najmniej raz użyty), alink="kolor" (active link, określający kolor aktywnego odsyłacza, czyli odsyłacza w trakcie ładowania dowiązanego do niego dokumentu), jednak są to polecenia uznane za przestarzałe.

Obecnie kolory odsyłaczy mozna definiować za pomocą tzw. selektorów pseudoklas - :link, :visited i :hover.

Kilka uwag o wlewaniu tekstu

Bardziej szczegółowy opis formatowania bloków tekstu znajduje się na stronie Elementy blokowe, 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 wiersza, który pozwoli oddzielić od siebie wiersze, nie wprowadzając interlinii.

Kilka spacji obok siebie jest zamienianych na pojedynczą spację, tak więc nie ma sensu (poza tzw. blokiem 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. Nie poleca się jednak stosowania takiej techniki - znacznie wygodniejsze jest korzystanie ze stylów - przykładowo, wcięcie akapitu można uzyskać za pomocą stylu text-indent.






Dodaj komentarz do tej strony:
Twoje imię:
Twoja wiadomość:

desing Webmaster-info

 
 
=> Chcesz darmową stronę ? Kliknij tutaj! <=