Ramy dokumentu


Stronę internetową tworzymy za pomocą wybranego przez nas edytora i główny plik naszej strony zapisujemy jako „index.html.

Istotną kwestią podczas tworzenia strony jest określenie rodzaju kodowania znaków. Więcej informacji nt. kodowania znaków znajdziesz tutaj lub tutaj. My będziemy używać kodowania UTF-8.

Oto jak może wyglądać szablon strony www:

 

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pl” lang=”pl”> 

<head> 

<meta http-equiv=”Content-Type” content=”text/html; charset=”iso-8859-2″ />

<meta name=”Description” content=”Opis Twojej strony dla wyszukiwarek” /> 

<meta name=”Keywords” content=”Tu słowa kluczowe rozdzielone przecinkami dla wyszukiwarek” /> 

<title>tytuł strony dla wyszukiwarek</title> 

</head> 

<body>

Tu znajduje się treść strony widoczna w przeglądarce

</body> 

</html>

 

Tworzenie strony zaczynamy od DTD (Deklaracji Typu Dokumentu).

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

DTD to rodzaj dokumentu definiujący formalną strukturę dokumentów XML, HTML, XHTML lub innych pochodzących z rodziny SGML lub XML. Definicje DTD mogą być zawarte w pliku dokumentu, którego strukturę definiują, przeważnie jednak zapisane są w osobnym pliku tekstowym, co pozwala na zastosowanie tego samego DTD dla wielu dokumentów., dla chętnych opis DTD dostępny jest tutaj.

 

Po zadeklarowaniu typu dokumentu rozpoczynamy nasz kodzik od umieszczenia znaczników (tagów) <html></html>, a pomiędzy nimi umieszczamy 2 sekcje odpowiedzialne za działanie strony tzn. <head></head> oraz <body></body>. Tagi te występują tylko raz na stronie!!!

Omówimy teraz to co musi się znajdować w poszczególnych sekcjach.

<head>…</head>

Znajdują się tu informacje dla przeglądarki dotyczące sposobu kodowania znaków i ogólne zasady formatowania strony oraz informacje dla wyszukiwarek jak: tytułu, opis i słowa kluczowe.

1. Deklaracja kodowania znaków

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

 

2. Opis zawartości strony

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

Te informacje wykorzystują wyszukiwarki internetowe. Opis powinien być rzeczowy i zwięzły.

 

3. słowa kluczowe

<head>
	<meta name="Keywords" content="wyraz1, wyraz2, wyraz3..." />
        ..... 
</head>

Słowa kluczowe sczytywane są przez wyszukiwarki internetowe i pomagają odszukać w sieci twoją stronę, dlatego powinny być starannie dobierane.

 

4. Język strony

<head>
	<meta http-equiv="Content-Language" content="język"/> 
        ..... 
</head>

Określa 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].

 

5. Autor

<head>
	<meta name="Author" content="Tu wpisz swoje imię i nazwisko"/> 
        ..... 
</head>

6. data modyfikacji

<head>
	<meta http-equiv="Last-Modified" content="data"/> 
        ..... 
</head>
Data powinna być podana w formacie GMT np:"Tue, 20 Aug 1996 14:25:27 GMT"

7. Utrata ważności

<head>
	<meta http-equiv="Expires" content="data"/> 
        ..... 
</head>
Data powinna być podana w formacie GMT np:"Tue, 20 Aug 1996 14:25:27 GMT"

8. Automatyczne odświeżanie strony

<head>
	<meta http-equiv="Refresh" content="s"/> 
        ..... 
</head>

Parametr „s” podajemy w sekundach.

 

9. Automatyczne wczytanie strony

<head>
<meta http-equiv="Refresh" content="s; url=Tu podaj adres strony lub ścieżkę dostępu"/> 
 ..... 
</head>

Określamy po ilu sekundach ma zostać wczytana strona o zadanym adresie

 

10. Przejście między stronami

  • Przejście płynne
<head>
	<meta http-equiv="sposób" content="blendTrans(Duration=s)" />
</head>
  • Filtr graficzny
<head>
	<meta http-equiv="sposób" content="revealTrans(Duration=s,Transition=n)" />
</head>
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 od 0 do 23):

  • 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 <head> (jako pierwsze)! Wpisanie go po jakimkolwiek innym znaczniku, np. deklaracji strony kodowej, spowoduje, że nie będzie ono interpretowane.

11. Edytor

  • Generator
<head>
	<meta name="Generator" content="nazwa edytora" />
</head>
  • Narzędzie autorskie
<head>
	<meta name="Authoring_tool" content="nazwa edytora" />
</head>

12. Roboty

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

Więcej informacji znajdziesz na tej stronie.

 

12. Cache

<head>
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
    <meta http-equiv="Cache-Control" content="post-check=0, pre-check=0" />
    <meta http-equiv="Pragma" content="no-cache" />
</head>
 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 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 źródłowego lub obrazków ze swojej strony. Często wykorzystuje się to w połączeniu z dodatkowymi metodami ochrony stron WWW.

 

13. Ikona strony

<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

 

14. Nawigacja

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.

Strona główna

<head>
      <link rel="Start" href="adres" /> lub <link rel="Top" href="adres" />
</head>
Do góry
<head>
	<link rel="Up" href="adres" />
</head>
Pierwsza
<head>
	<link rel="First" href="adres" />
</head>
Poprzednia
<head>
	<link rel="Prev" href="adres" /> lub <link rel="Previous" href="adres" />
</head>
Następna
<head>
	<link rel="Next" href="adres" />
</head>
Ostatnia
<head>
	<link rel="Last" href="adres">
</head>
Zawartość
<head>
    <link rel="Contents" href="adres" /> lub <link rel="Toc" href="adres" />
</head>
Rozdział (Mozilla)
<head>
    <link rel="Chapter" title="Tytuł" href="adres" />
</head>

Dział (Mozilla)

<head>
	<link rel="Section" title="Tytuł" href="adres" />
</head>
Poddział (Mozilla)
<head>
	<link rel="Subsection" title="Tytuł" href="adres" />
</head>
Dodatek (Mozilla)
<head>
    <link rel="Appendix" title="Tytuł" href="adres" />
</head>
Słowniczek
<head>
	<link rel="Glossary" href="adres" />
</head>
Indeks
<head>
	<link rel="Index" href="adres" />
</head>
Pomoc
<head>
	<link rel="Help" href="adres" />
</head>
Szukaj
<head>
	<link rel="Search" href="adres" />
</head>
Autor
<head> 
        <link rel="Author" href="adres" /> 
</head>
Prawa autorskie
<head>
	<link rel="Copyright" href="adres" />
</head>
Zakładka (Mozilla)
<head>
	<link rel="Bookmark" title="Tytuł" href="adres" />
</head>
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
<head>
<link rel="Alternate" title="Tytuł kanału" href="adres kanału" type="application/rss+xml"/>
</head>
  • Atom
<head>
<link rel="Alternate" title="Tytuł kanału" href="adres kanału" type="application/atom+xml"/>
</head>

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

Własne (Mozilla)

<head>
	<link rel="Nazwa" title="Tytuł" href="adres" />
</head>

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