Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Inne elementy nagłówka

Podczas tej lekcji, stworzysz ostateczny szkielet dokumentu, który będziesz stosował na lekcjach następnych. Prawie wszystkie omówione poniżej elementy przynależą do grupy meta i nie są widoczne na stronie, a jedynie w źródle dokumentu.

Informacja o autorze

<meta name="author" content="Imię i nazwisko" />
Każda strona ma swojego autora. Jeżeli decydujesz się na umieszczenie swojej strony w sieci, to nie bądź anonimowy. Jeżeli wstydzisz się swojego dzieła, to niech pozostanie ono wyłącznie w Twoim komputerze. Stosowanie tego znacznika, świadczy o tym że:

  1. Szanujemy naszych gości i siebie
  2. Chcemy przekazać ważne treści
  3. Autoryzujemy przekazywane treści, co może być przydatne podczas ustalania praw autorskich do danej strony

Narzędzie zastosowane do tworzenia strony

<meta name="generator" content="Notepad++" />
Ten element informuje o narzędziu zastosowanym do wykonania danej strony. Wiele edytorów automatycznie wstawia tutaj swój "autograf". Zanim przejdzie Ci przez głowę, żeby usunąć ten wpis, zajrzyj do warunków umowy licencyjnej stosowanego narzędzia, czy przypadkiem nie zabrania ona takiego działania. W przypadku Notepad++, możemy ten wpis pominąć, chyba że sami chcemy zarekomendować to narzędzie innym twórcom stron. W naszym szkielecie, ten element pominiemy.

Informacja dla roborów sieciowych

<meta name="robots" content="all" />
W powyższym przykładzie all zezwala robotom na indeksowanie zarówno danej strony, jak i znajdujących się na niej linków. Jeżeli chcemy aby wyszukiwarki pokazywały naszą stronę na w miarę przyzwoitej pozycji, to pozostawmy ten element tak jak w przykładzie. Możemy jednak zastosować różne dyrektywy:

  • index - strona powinna być zaindeksowana,
  • noindex - strona nie powinna być zaindeksowana,
  • follow - linki z tej strony powinny być zaindeksowane,
  • nofollow - linki z tej strony nie powinny być zaindeksowane,
  • all - działanie identyczne jak index,follow,
  • none - działanie identyczne jak noindex,nofollow.

W naszych ćwiczeniach będziemy stosować all

Odświeżanie strony

<meta http-equiv="refresh" content="x" />
Nie będziemy raczej tego stosować, ponieważ oznacza to ni mniej ni więcej jak przeładowywanie naszej strony co x sekund. Jednak jeżeli autor np. prezentuje na stronie dane, które są często zmieniane i chce aby odwiedzający widział zawsze postać aktualną, to zastosowanie tego elementu jest jak najbardziej wskazane. Zwróć uwagę, że w tym przypadku znacznik meta występuję z nowym atrybutem http-equiv, który zawiera informacje będące nagłówkiem HTTP.

Przekierowanie

<meta http-equiv="refresh" content="x; url=adres_nowej_strony" />
Jeżeli zmienimy adres naszej strony, to stracimy odwiedzających, chyba że... No właśnie, należy pod starym adresem umieścić plik index.html z pokazaną wyżej deklaracją i każdy, kto wejdzie pod stary adres zostanie automatycznie przekierowany na adres_nowej_strony. Podobny efekt można osiągnąć przy pomocy PHP jak również JavaScript.

<link rel="stylesheet" href="style.css" type="text/css" />
Style CSS poznamy w dalszym toku nauki, ale już teraz możemy powiedzieć, że zasadą jest umieszczanie "co tylko się da" w oddzielnym pliku zwanym zewnętrznym arkuszem stylów. Jeżeli plik znajduje się w tym samym katalogu co nasza strona, to podajemy tylko jego nazwę (w naszym przykładzie style.css), w przeciwnym razie podajemy ścieżkę do tego pliku. Dopóki nie zaczniemy stosować stylów, będziemy pomijać ten element.

Kompletny szkielet dokumentu

No może prawie kompletny ponieważ:

  1. Na razie pomijamy zewnętrzny arkusz stylów.
  2. Pokazaliśmy tylko podstawowe elementy nagłówka.
  3. W toku dalszej nauki dowiemy się o umieszczaniu skryptów JavaScript w oddzielnych plikach.

Po uwzględnieniu poznanych dzisiaj wiadomości, szkielet dokumentu HTML, który będziemy stosować w dalszym toku nauki będzie następujący:

<!doctype html>
<html>
  <head>
    <title>Tytuł</title>
    <meta charset="UTF-8" />
    <meta name="keywords" content="Słowa kluczowe oddzielone przecinkami />
    <meta name="description" content="Opis strony" /> 
    <meta name="author" content="Twoje imię i nazwisko" />
    <meta name="robots" content="all" />
  </head>
  <body>
  </body>
</html>

Ćwiczenie 1_1_3_1

Utwórz dokument HTML zawierający pokazany wyżej szkielet dokumentu

  1. Strona powinna posiadać tytuł szkielet dokumentu.
  2. Słowa kluczowe pozostawimy puste ="".
  3. Opis strony pozostawimy pusty ="".
  4. Jako autora wpisz swoje imię i nazwisko.
  5. Jako treść strony zamieść szkielet dokumentu.
  6. Zapisz wykonany dokument HTML.
  7. Otwórz ten plik przeglądarką.
  8. Sprawdź, czy jest pokazany tytuł strony.
  9. Pokaż źródło dokumentu i sprawdź czy są pokazane w sposób poprawny wszystkie znaczniki.
  10. Jeżeli to konieczne, dokonaj stosownych korekt.
  11. Wykonaj kopię dokumentu. Umieść ją poza folderami ćwiczeń (w folderze html5) jako szkielet.html.

Tak powinna wyglądać poprawnie wykonana strona:

Ćwiczenie 1_1_3_2

Wykorzystując wykonany w poprzednim ćwiczeniu szkielet, wykonaj stronę na której w kilku zdaniach opowiesz który przedmiot nauczany w szkole interesuje Cię najbardziej i dlaczego.

Praca domowa

  1. Wykonaj ponownie Ćwiczenie 1_1_3_1.
  2. Wykonaj ponownie Ćwiczenie 1_1_3_2. Tym razem wykonaj stronę na której w kilku zdaniach opowiesz który przedmiot nauczany w szkole interesuje Cię najmniej i dlaczego
  3. Przepisz do zeszytu szkielet dokumenu i naucz się go na pamięć. Musisz umieć omówić znaczenie poszczególnych elementów.

Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.