Nagłówek i treść

W tym rozdziale dowiesz się...

Wstęp

Co to jest nagłówek, a co ciało dokumentu? Jak dodać do dokumentu dodatkowe informacje, mówiące o jego charakterze?

Znaczniki <body>...</body> oraz <meta> określają pewne informacje na temat strony jako całości. Polecenie BODY powinno wchodzić w skład każdego dokumentu HTML. Stanowi ono właściwą treść, czyli tzw. ciało, w którym zawierają się wszystkie inne znaczniki, dotyczące formatowania, a także zwykły tekst. W jednym dokumencie może się znajdować tylko jeden znacznik <body> - zaraz po nagłówku strony (<head>...</head>).

Natomiast znacznik <meta> stanowi tzw. metainformację, pozwalającą określić pewne ogólne wiadomości dotyczące dokumentu, m.in. sposób kodowania znaków, opis zawartości strony, jej autora czy język, w którym została napisana. Metainformacje nie wpływają bezpośrednio na wygląd dokumentu, lecz cechy które podają, są równie ważne. Chociaż nie są one wymagane, warto je stosować, ponieważ może to np. pomóc w odszukaniu strony przez wyszukiwarki sieciowe. Każdy dokument powinien zawierać obowiązkowo przynajmniej deklarację strony kodowej, bez której polskie litery na stronie mogą zostać błędnie wyświetlone! W pojedynczym dokumencie znajduje się zwykle kilka znaczników <meta> - każdy dotyczy innej informacji - wszystkie muszą znajdować się wewnątrz nagłówka strony (<head>...</head>). Ponadto w tym rozdziale opisane zostaną również inne przydatne znaczniki, które można umieścić w nagłówku dokumentu, opisujące sam dokument, a nie wyświetlające jakieś treści.

Oczywiście nie ma obowiązku stosowania dokładnie wszystkich znaczników META, które zostały przedstawione w tym rozdziale. Samodzielnie wybierz te, które Ci odpowiadają lub przekazują według Ciebie 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.

Większość edytorów HTML posiada specjalne generatory sekcji HEAD, w których podaje się wszystkie atrybuty oraz informacje dotyczące dokumentu, dzięki czemu nie trzeba tego robić ręcznie. Z takiego generatora możesz skorzystać również tutaj.

Język strony <HTML lang>

Jak określić w jakim języku (mówionym) jest napisana strona WWW?

<html lang="język">...</html>
gdzie jako "język" należy podać skrót nazwy wybranego języka.

Polecenie to pozwala 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.

Zwracam uwagę, że w dokumencie HTML może się znajdować tylko jeden element <html>. Dlatego powyższy atrybut lang="..." należy przypisać do już istniejącego znacznika, a nie dodawać kolejnego.

Tytuł strony <TITLE>

Jak zmienić tytuł strony, który wyświetla się na górze okna przeglądarki oraz w wyszukiwarkach sieciowych?

<head>
	<title>Tytuł strony</title>
</head>

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

Taki sam tytuł na wszystkich podstronach serwisu nie jest dobrym pomysłem, a tytuły w stylu "Strona główna" czy "Bez tytułu" są już bardzo nietrafne. Oczywiście w tytule wszystkich podstron można umieścić ten sam fragment z nazwą serwisu, ale oprócz tego każdy dokument powinien zawierać dalszą część tytułu, opisującą jego zawartość.

Tytuł strony jest znacznikiem obowiązkowym. Pominięcie go stanowi błąd!
Ponadto treść tytułu nie może zawierać żadnych znaczników.

Deklaracja strony kodowej <META charset>

O czym nie należy zapominać pisząc stronę WWW po polsku?

<head>
	<meta charset="utf-8">
	.....
</head>

Polecenie jest deklaracją strony kodowej, czyli sposobu w jaki będą zapisane w formie cyfrowej znaki na naszej stronie WWW. Więcej na ten temat możesz dowiedzieć się w rozdziale pt.: Strony kodowe.

UWAGA!
Absolutnie nie należy pomijać tego wpisu i powinna to być koniecznie deklaracja kodowania UTF, 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)!

Opis zawartości strony <META description>

W jaki sposób zachęcić internautów aby odwiedzili Twoją stronę? Jak wstawić opis, który wyświetli się w wyszukiwarkach (Google)?

<head>
	<meta name="description" content="Tu podaj opis twojej strony">
</head>

Polecenie to należy wstawić między znacznikami: <head> oraz </head>. Pozwala ono opisać co znajduje się na Twojej stronie. Z informacji tej korzystają wyszukiwarki sieciowe, dlatego staraj się tutaj wpisać tekst, który jak najlepiej opisze zawartość strony i zachęci do jej odwiedzenia. Ciekawy, ale niezbyt długi, opis może zachęcić internautów do obejrzenia Twojej strony!

UWAGA!
W treści wszystkich atrybutów content="..." nie należy używać znaków cudzysłowu. Jeśli musimy to zrobić, należy zamiast nich wpisywać: &quot;

Wyrazy kluczowe <META keywords>

W jaki sposób podwyższyć pozycję strony WWW w wyszukiwarkach (Google)?

<head>
	<meta name="keywords" content="wyraz1, wyraz2, wyraz3...">
</head>
gdzie "wyraz1, wyraz2, wyraz3..." oznaczają wyrazy, które należy rozdzielać przecinkami. Można oczywiście podać więcej niż trzy wyrazy (w miejsce kropek).

Polecenie to należy wstawić między znacznikami: <head> oraz </head>. Pozwala Ci ono podać wyrazy kluczowe, z których korzystają wyszukiwarki sieciowe. Dlatego staraj się tutaj wpisać wyrazy, które jak najlepiej opiszą zawartość Twojej strony. Dobrze dobrane wyrazy kluczowe, pomogą wyszukiwarkom odnaleźć Twoją stronę!

Autor strony <META author, creator, publisher>

Gdzie wpisać autora strony WWW?

  1. Autor
    <head>
    	<meta name="author" content="Tu wpisz swoje imię i nazwisko">
    </head>
  2. Twórca
    <head>
    	<meta name="creator" content="Tu wpisz nazwę organizacji">
    </head>
  3. Wydawca
    <head>
    	<meta name="publisher" content="Tu wpisz nazwę wydawcy">
    </head>

Polecenie to należy wstawić między znacznikami: <head> oraz </head>. Pierwsze z nich ("author") pozwala podać informację o fizycznej osobie będącej autorem strony, natomiast drugie ("creator") i trzecie ("publisher") - odpowiednio: informację o nazwie organizacji i wydawcy strony. Wydawca to firma lub instytucja, której główną działalnością jest publikowanie treści, podczas gdy organizacja może się zajmować również czymś innym.

Edytor <META generator>

Jak wstawić informację o edytorze użytym przy tworzeniu strony WWW?

<head>
	<meta name="generator" content="nazwa edytora">
</head>
gdzie jako "nazwa edytora" można wpisać nazwę programu, przy użyciu którego została stworzona strona.

Pozwala określić nazwę edytora HTML, który został wykorzystany do utworzenia dokumentu.

Roboty <META robots>

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?

<head>
	<meta name="robots" content="dyrektywy">
</head>
gdzie jako "dyrektywy" należy wpisać:
  • "index" - strona, na której wstawiono polecenie, będzie indeksowana przez roboty sieciowe (indeksery) - domyślnie
  • "noindex" - strona, na której wstawiono polecenie, nie będzie indeksowana
  • "follow" - przechodzenie do stron, do których odnoszą się odsyłacze, znajdujące się w dokumencie - domyślnie
  • "nofollow" - robot nie przechodzi do stron stron wskazywanych przez odsyłacze wstawione na stronie, ale może je zaindeksować, jeżeli istnieją inne linki umieszczone na stronach bez tego zakazu
  • "index, nofollow" - indeksuje stronę, nie przechodzi do stron wskazywanych przez odsyłacze
  • "noindex, follow" - nie indeksuje strony, na której wstawiono polecenie, przechodzi do stron wskazywanych przez odsyłacze
  • "all" = "index, follow" - indeksuje wszystko (domyślnie)
  • "none" = "noindex, nofollow" - nie indeksuje nic

Polecenie określa sposób zachowania się robotów-indekserów, czyli specjalnych programów zbierających informacje o stronach w Internecie, wykorzystywane później przez wyszukiwarki. Stosuj noindex tylko wtedy, gdy nie chcesz, aby Twoja strona była odnaleziona przez wyszukiwarki (bo np. treści na niej zawarte są ściśle tajne :-). Niestety całkowitej pewności nie będzie nigdy, ponieważ nie wszystkie roboty interpretują to polecenie.

Pamiętaj, że domyślnym zachowaniem robotów wyszukiwarek sieciowych jest indeksowanie wszystkich dokumentów. To oznacza, że dyrektywa "index, follow" może być pominięta, a zamiast wpisywać "noindex, follow" czy "index, nofollow" zwykle wystarczy wpisać odpowiednio: "noindex" i "nofollow". W przypadku zupełnego braku znacznika <meta name="robots" content="..."> robot zaindeksuje wszystkie strony serwisu, dlatego dodaje się go zwykle tylko, kiedy chcemy zablokować dostęp robotowi do wybranych stron.

Zwróć uwagę, że wartość "nofollow" blokuje jedynie podążanie za odnośnikami, a to oznacza, że może nie zapobiec indeksowaniu stron, do których prowadzą linki umieszczone w dokumencie. Jeżeli na innych stronach - możliwe, że w zupełnie innym serwisie - znajdą się linki do tych stron, zostaną one normalnie zaindeksowane. Aby temu zapobiec, należy wstawić dyrektywę "noindex" na stronach, które nie powinny być zaindeksowane.

Specyfikacja HTML 4.01 wskazuje tylko następujące wartości tego elementu: all, index, nofollow, noindex. Choć inne specyfikacje jasno wskazują na dodatkowe wartości, to jeśli chcesz mieć największą pewność, że dyrektywy zostaną uwzględnione, zamiast "none" możesz użyć "noindex, nofollow".

Niestandardowe dyrektywy robotów

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

  • "noarchive" - blokada archiwizowania kopii strony w pamięci podręcznej wyszukiwarki
  • "nosnippet" - blokada wyświetlania opisu strony w wynikach wyszukiwania
  • "notranslate" - blokada proponowania tłumaczenia strony na inny język
  • "noimageindex" - blokada indeksowania obrazków wstawionych na stronie (sama strona nadal może być indeksowana)

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

Aby połączyć dyrektywy standardowe z niestandardowymi, nie należy wpisywać kilku osobnych znaczników <meta name="robots">, ale podać pełną listę po przecinku, np.:

<meta name="robots" content="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ć:

<meta name="googlebot" content="noindex, nofollow">

Blokada indeksowania wybranych odsyłaczy

Element <meta name="robots" content="nofollow"> 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:

<a href="http://adres strony" rel="nofollow">...</a>

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 <meta name="robots"> jest przydatny w celu określania dostępu przez roboty do pojedynczych dokumentów HTML. Okazuje się jednak mało praktyczny, jeśli chcielibyśmy zablokować dostęp np. do wszystkich dokumentów z określonego katalogu serwisu albo wręcz hurtowo do wszystkich plików witryny. Znacznik ten okazuje się wręcz zupełnie nieprzydatny, jeśli zależy nam na zablokowaniu indeksowania np. zdjęć z naszego serwisu (większość wyszukiwarek posiada osobne formularze do wyszukiwania plików graficznych).

Istnieje jednak możliwość określenia globalnego dostępu do wszystkich plików serwisu - nosi on nazwę: Standard Wykluczania Robotów (ang. A Standard for Robot Exclusion - Robots Exclusion Protocol). W głównym katalogu konta WWW - czyli tam, gdzie znajduje się dokument strony głównej serwisu (index.html) - należy umieścić specjalny plik pod nazwą robots.txt. W pliku tym umieszcza się tzw. rekordy - każdy zawiera grupę linijek w postaci:

Pole: wartość

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

User-Agent

W jednym pliku robots.txt może się znajdować dowolna liczba rekordów rozdzielonych pustymi linijkami - każdy musi się rozpoczynać linią User-Agent, wskazującą do których robotów odnoszą się dalsze linijki danego rekordu:

# Ten rekord odnosi się tylko do robota "Googlebot":
User-agent: Googlebot

Pojedynczy rekord może zawierać więcej niż jedną linię User-Agent:

# Ten rekord odnosi się tylko do robotów "Googlebot" i "MSNBot":
User-agent: Googlebot
User-agent: MSNBot

Specyfikacja HTML 4.01 wyraźnie zabrania umieszczania kilku linii User-Agent jednej pod drugą, jednak standard (nieopracowany przez W3C) 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 stronie: The Web Robots Database.

Zamiast nazwy robota można wpisać również znak gwiazdki ("*"), co wskazuje każdego istniejącego robota. Kiedy robot danej wyszukiwarki odwiedza witrynę, najpierw sprawdza czy istnieje plik robots.txt. Jeśli tak, szuka w nim rekordu (grupy linii), który pasuje do jego nazwy. Jeśli taki znajdzie, odczytuje linie z wybranego rekordu i pomija wszystkie inne. Jeżeli nie znajdzie, szuka rekordu z linią User-Agent: *. Jeżeli takiego nie znajdzie, indeksuje bez ograniczeń wszystkie dokumenty serwisu. Zwracam uwagę, że jeśli robot znajdzie przeznaczony specjalnie dla niego rekord, to w ogóle nie zajmuje się rekordem User-Agent: *.

Disallow

W rekordach poniżej User-Agent musi się znajdować jedna lub więcej linii Disallow, wskazujących ścieżki do plików, do których robot nie ma dostępu. Każda ścieżka musi rozpoczynać się od znaku ukośnika ("/") i powstaje poprzez wycięcie pierwszego członu adresu URL. Na przykład aby zablokować dostęp do pliku http://www.example.org/index.html, należy wpisać:

User-Agent: *
Disallow: /index.html

Pusta wartość Disallow oznacza brak ograniczeń w indeksowaniu dokumentów:

User-Agent: *
# Wszystkie dokumenty serwisu bę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

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

User-Agent: *
Disallow: /zdjecia/

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

  • * - Zastępuję dowolny ciąg znaków (również pusty)
  • $ - Jeżeli zostanie postawiony na końcu ścieżki, oznacza dopasowanie do końca nazwy, dzięki temu nadaje się szczególnie do określania ścieżek do plików określonego typu, czyli o wybranym rozszerzeniu nazwy
User-Agent: Googlebot
# Nie indeksuj plików graficznych:
Disallow: /*.jpg$
Disallow: /*.jpeg$
Disallow: /*.gif$
Disallow: /*.png$
# Nie indeksuj dokumentów z identyfikatorami sesji:
Allow: /*?$
Disallow: /*?

Różnica pomiędzy /*.gif$ a /*.gif jest taka, że w drugim przypadku zablokowane zostaną również pliki: /nazwa.gift, /nazwa.gif/nazwa.html, co raczej nie było naszym zamiarem.

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

Swój plik robots.txt możesz przetestować w specjalnym generatorze.

Strona kanoniczna

W niemal każdym serwisie internetowym zdarza się, że ta sama treść jest prezentowana na kilka sposobów, tzn. pod różnymi adresami URL:

  • specjalna wersja serwisu przystosowana dla urządzeń mobilnych (smartfony, tablety itp.)
  • osobne wersje artykułów przeznaczone do wydruku
  • dokumenty zawierające tę samą listę pozycji (produktów, wyników wyszukiwania, artykułów itp.), a jedynie posortowanych w inny sposób - np. artykuly.php?sortuj=data i artykuly.php?sortuj=alfabet
  • obszary witryny wymagające zalogowania użytkownika, kiedy w adresie jest przekazywany identyfikator sesji - np. index.php?PHPSESSID=0123456789abcdef0123456789abcdef lub index.php?sid=0123456789abcdef0123456789abcdef
  • linki prowadzące do tej samej strony mają różną postać:
    • jeśli domyślnym numerem strony artykułu będzie 1, to adres artykul.php?strona=1 może być równoważny artykul.php
    • podobnie kolejność parametrów adresu URL, podawanych po pytajniku i rozdzielonych znakami "&", zwykle nie ma znaczenia, tzn. adres artykul.php?id=1&strona=1 zwykle jest równoważny artykul.php?strona=1&id=1
    • nazwę pliku "index.htm", "index.html" czy "index.php" zwykle można pominąć podając adres strony, dlatego http://www.example.com/index.html jest równoważny http://www.example.com/

Teoretycznie nie powinno to przeszkadzać czytelnikom naszej witryny, jednak może stać się problemem w przypadku wyszukiwarek internetowych - takich jak np. Google. Roboty wyszukiwarek starają się eliminować duplikujące się treści ze swojej bazy zaindeksowanych stron. Oznacza to, że jeśli ta sama lub bardzo podobna treść występuje w Twoim serwisie pod kilkoma różnymi adresami URL, w wynikach wyszukiwania pojawi się tylko jedna jej wersja. Która? To zależy, którą robot indeksujący uzna za podstawową. Niestety to tyko automat dlatego może się mylić, uznając za wersję podstawową adres URL z wieloma niepotrzebnymi parametrami po pytajniku lub wersję artykułu przeznaczoną do wydruku. Może to potencjalnie obniżyć pozycję Twojej witryny w wynikach wyszukiwania oraz wywołać pewną dezorientację czytelnika, który trafił z wyszukiwarki do Twojego serwisu na niewłaściwą wersję dokumentu.

Istnieje jednak możliwość jasnego wskazania robotowi wyszukiwarki, która wersja strony jest tą podstawową - stroną kanoniczną. Aby to zrobić, na każdej wersji takiej strony, która różni się adresem URL od wersji podstawowej, należy podać bezpośredni adres prowadzący do wersji kanonicznej:

<head>
	<link rel="canonical" href="adres strony podstawowej">
</head>
gdzie jako "adres strony podstawowej" można podać zarówno adres bezwzględny (rozpoczynający się od http:// lub https://) jak i względną ścieżkę dostępu do strony, która ma być prezentowana w wynikach wyszukiwania.

Warto zwrócić uwagę, że nie należy w ten sposób oznaczać dokumentów, które nie stanowią jedynie innej wersji strony kanonicznej (podstawowej), ponieważ wywoła to tylko ich niepotrzebną eliminację z wyników wyszukiwania. Trzeba również mieć świadomość, że znacznik ten stanowi jedynie sugestię dla robota wyszukiwarki i może nie być wzięty pod uwagę, jeśli robot z innego powodu uzna, że w danej sytuacji takie oznaczenie strony kanonicznej nie będzie pożądane dla użytkownika korzystającego z wyszukiwarki.

Skalowanie <META viewport>

W jaki sposób przeskalować rozmiar strony WWW? Jak przygotować stronę RWD (Responsive Web Design)?

<head>
	<meta name="viewport" content="parametr1=wartość1, parametr2=wartość2...">
</head>
gdzie jako "parametr1=wartość1, parametr2=wartość2..." należy podać rozdzieloną przecinkami listę parametrów wraz z przypisanymi im wartościami:
width
Określa początkową szerokość obszaru wyświetlania przeglądarki. Może być określona bezpośrednio w pikselach albo za pomocą specjalnego słowa kluczowego device-width, które oznacza pełną szerokość obszaru wyświetlania.
height
Określa początkową wysokość obszaru wyświetlania przeglądarki. Może być określona bezpośrednio w pikselach albo za pomocą specjalnego słowa kluczowego device-height, które oznacza pełną wysokość obszaru wyświetlania.
initial-scale
Wartość od 0.0 do 10.0 (należy posługiwać się kropką dziesiętną, a nie przecinkiem!) określająca początkowy stopień przeskalowania strony. Im większa wartość tym bardziej będzie powiększona zawartość strony.
minimum-scale
Wartość od 0.0 do 10.0 określająca minimalny stopień, do którego użytkownik będzie mógł przeskalować stronę. Jest to przydatne w przypadku, gdy nasza strona nie wygląda zbyt dobrze, kiedy jest za bardzo pomniejszona. Pamiętajmy jednak, że stanowi to ingerencję w preferencje użytkowników i dlatego przeglądarki mogą blokować to polecenie.
maximum-scale
Wartość od 0.0 do 10.0 określająca maksymalny stopień, do którego użytkownik będzie mógł przeskalować stronę. Przeglądarki mogą blokować to polecenie.
user-scalable
Może przyjąć następujące wartości:
  • yes - domyślnie
  • no - możliwość skalowania strony zostanie zablokowana (przeglądarki mogą ignorować to polecenie z uwagi na preferencje użytkownika)

Polecenie to jest szczególnie przydatne na urządzeniach mobilnych takich jak smartfony czy tablety. Ponieważ ekran przeglądarek mobilnych zwykle jest dość małych rozmiarów, strona może być odpowiednio powiększana, tak aby jej zawartość była dobrze czytelna. W pewnym zakresie możemy sterować tym zachowaniem za pomocą powyższego polecenia. W szczególności możemy zaprojektować stronę z użyciem techniki Responsive Web Design (w skrócie: RWD), tak aby automatycznie dopasowywała się do dostępnej szerokości ekranu przeglądarki [zobacz: Zapytania mediów]. W takim przypadku w nagłówku strony powinniśmy wstawić następujące polecenie:

<meta name="viewport" content="width=device-width, initial-scale=1">

Dzięki temu dokument HTML zostanie wyświetlony w taki sposób, aby nie wymagał od użytkownika dalszego powiększania. W przeciwnym razie przeglądarka mobilna starałaby się wyświetlić stronę w rozdzielczości typowej dla przeglądarek używanych na standardowych komputerach, co zwykle oznaczałoby zdecydowanie zbyt mały rozmiar tekstu, aby nadawał się do wygodnego czytania.

Automatyczne odświeżanie strony <META refresh>

Co zrobić, aby strona WWW była automatycznie odświeżana co określony czas?

<head>
	<meta http-equiv="refresh" content="s">
</head>
gdzie jako "s" należy podać liczbę, określającą co jaki przedział czasu (w sekundach) będzie odświeżana strona, czyli ponownie wczytywana.

Polecenie to pozwala na automatyczne odświeżanie strony, co pewien określony przedział czasu (podany w sekundach). Powinno być wstawione w treści nagłówkowej dokumentu - między znacznikami: <head> oraz </head>.

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

Przykład:

Przykład

Automatyczne wczytanie strony <META refresh url>

Jak wstawić przekierowanie na stronie WWW, czyli automatycznie wczytać inną stronę?

<head>
	<meta http-equiv="refresh" content="s; url=Tu podaj adres strony lub ścieżkę dostępu">
</head>
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.

Przykład:

Przykład

Ikona strony <LINK icon>

W jaki sposób wstawić ikonę obok adresu strony WWW?

(interpretuje: Internet Explorer, Netscape 7/Mozilla/Firefox, Opera 7, Chrome)

<head>
	<link rel="shortcut icon" href="adres ikony">
</head>
gdzie jako "adres ikony" należy podać URL, pod którym znajduje się ikona, np.: http://www.mojastrona.pl/favicon.ico

Polecenie to pozwala dodać ikonkę (favicon.ico), która będzie widoczna w przeglądarce przy adresie naszej strony. Typowy rozmiar ikony to 16x16 pikseli. W systemie Windows jest dodatkowa możliwość umieszczenia skrótu na pulpicie - wtedy przydatna może być ikona o rozmiarach 32x32. Format *.ico pozwala zapisać dwie wersje rozmiaru w jednym pliku. Niektóre przeglądarki - nie MSIE 6 - pozwalając również używać innych formatów graficznych, takich jak np. PNG.

Możemy również podać kilka ikon, a przeglądarka samodzielnie wybierze sobie taką, która jej najlepiej pasuje. W przypadku gdy więcej niż jedna z podanych ikon będzie odpowiednia, zostanie wybrana ostatnia z wymienionych. Na przykład:

<link rel="icon" href="favicon.ico" sizes="16x16 32x32" type="image/vnd.microsoft.icon">
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
<link rel="icon" href="favicon48.png" sizes="48x48" type="image/png">
<link rel="icon" href="favicon72.png" sizes="72x72" type="image/png">
<link rel="icon" href="favicon96.png" sizes="96x96" type="image/png">
<link rel="icon" href="favicon144.png" sizes="144x144" type="image/png">
<link rel="icon" href="favicon192.png" sizes="192x192" type="image/png">
<link rel='icon" href="favicon.svg" sizes="any" type="image/svg+xml">

gdzie dodatkowe atrybuty oznaczają:

sizes
Może być zapisany w jednym z dwóch formatów:
  • "any" - oznacza, że ikona może być dowolnie skalowana przez przeglądarkę. Najlepiej do tego nadają się grafiki wektorowe, które można bez ograniczeń powiększać bez żadnej utraty jakości.
  • Rozdzielona spacjami lista rozmiarów ikon zapisanych w podanym pliku. Każdy rozmiar składa się z dwóch liczb rozdzielonych znakiem "x" (bez spacji!), które określają kolejno: szerokość i wysokość.
type
Typ MIME - zobacz: sekcja "Filtr typu plików" w rozdziale Selektor plików.

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

Niestety niektóre przeglądarki pobierają ikonę strony tylko raz, a później rzadko jest ona odświeżana (albo nawet wcale). Więc jeśli kiedyś wprowadzimy nową, może to nie dać żadnego efektu, bo np. Internet Explorer zapisuje ikonę przy dodawaniu strony do ulubionych. Dlatego zanim wprowadzimy taki dodatek, warto go wcześniej dobrze dopracować.

W Internet Explorerze 6 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). Czasem pomocne okazuje się również wyczyszczenie historii przeglądanych stron.

Nawigacja <LINK prev, next, help, search, author, license, alternate>

W jaki sposób ułatwić nawigację na stronie WWW? Jak udostępnić czytelnikom subskrypcję kanału informacyjnego RSS (Really Simple Syndication) lub Atom, zawierającego nowości w serwisie?

(interpretuje: Mozilla i Opera 12-)

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. Poprzednia
    <head>
    	<link rel="prev" href="adres">
    </head>
  2. Następna
    <head>
    	<link rel="next" href="adres">
    </head>
  3. Pomoc
    <head>
    	<link rel="help" href="adres">
    </head>
  4. Szukaj
    <head>
    	<link rel="search" href="adres">
    </head>
  5. Autor
    <head>
    	<link rel="author" href="adres">
    </head>
  6. Licencja (prawa autorskie)
    <head>
    	<link rel="license" href="adres">
    </head>
  7. Inne wersje (Mozilla)
    <head>
    	<link rel="alternate" title="Tytuł" href="adres">
    </head>
    lub
    <head>
    	<link rel="alternate" title="Tytuł" lang="język" href="adres">
    </head>
    lub
    <head>
    	<link rel="alternate" title="Tytuł" media="media" href="adres">
    </head>

    Najczęstszym sposobem wykorzystania tego rodzaju znacznika jest osadzanie kanałów informacyjnych (obsługiwane przez wszystkie nowoczesne przeglądarki):

    • RSS
      <link rel="alternate" title="Tytuł kanału" href="adres kanału" type="application/rss+xml">
    • Atom
      <link rel="alternate" title="Tytuł kanału" href="adres kanału" type="application/atom+xml">
    Możliwe jest osadzenie kilku kanałów informacyjnych na jednej stronie - wystarczy wstawić kolejno kilka takich znaczników. W takim przypadku każdy powinien mieć inny tytuł (atrybut title="..."), ponieważ inaczej użytkownik nie będzie mógł rozróżnić, co chciałby subskrybować.
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

Quiz

Sprawdź swoją wiedzę, nabytą w tym rozdziale, rozwiązując testowy QUIZ (online).