Artykuł
09/20/2011

Samouczek: Nagłówek strony internetowej - Kurs HTML i CSS

Autor: Jakub Mytko

Opublikowano: 2011-09-15

Typowym zadaniem przy projektowaniu strony internetowej jest poprawne określenie nagłówka. Do nagłówka zalicza się wszystkie elementy, które znajdują się wewnątrz znacznika head. Pomimo tego, że efektów działania większości elementów nagłówka nie widać na pierwszy rzut oka, jego poprawne utworzenie jest niezbędne, jeśli zależy nam na tym, aby strona była wysoko pozycjonowana w wynikach wyszukiwania wyszukiwarek internetowych.

W naszym zadaniu zajmiemy się podstawowymi elementami nagłówka strony internetowej, do których zaliczają się m.in. tytuł strony, meta tagi i definicja stylów CSS.

Przed wykonaniem zadań powinieneś wiedzieć:

Jak utworzyć stronę internetową

Po wykonaniu zadań nauczysz się:

definiować nagłówek strony.

Implementacja

W naszym zadaniu zajmiemy się -podstawowymi elementami nagłówka. Zaczniemy od ustawienia odpowiedniego tytułu. Zwrócimy uwagę także na meta tagi, które pozwolą nam utworzyć opis strony, słowa kluczowe dla strony oraz zapewnią poprawne wyświetlanie polskich znaków.

Przygotowanie strony

Przygotujemy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka Pierwsza strona internetowa.

Otwórz edytor HTML i utwórz szkielet strony.

W nowo otwartym oknie Notatnika wpisz:

<html>
    <head> 
    </head>
    <body>
    </body>
</html>

Zapisz plik pod nazwą index.html i otwórz w przeglądarce internetowej.

Tytuł strony

Tytuł strony to nie tylko tekst, który pojawia się na górnym pasku strony internetowej, ale jest on również jednym z podstawowych elementów, które brane są pod uwagę przez wyszukiwarki internetowe. W tytule strony powinny być zawarte podstawowe słowa kluczowe związane z naszą stroną, a jego długość nie powinna przekraczać kilkudziesięciu znaków. Tytuł jest elementem wymaganym w standardzie HTML.

Dodaj tytuł strony.

Pomiędzy znacznikami <head></head> wpisz:

<title>Nagłówek strony internetowej</title>

Zapisz zmiany. Sprawdź, czy plik index.html wygląda tak, jak na Rys. 1.

Rys. 1. Zawartość pliku index.html po dodaniu tytułu strony.

Odśwież w przeglądarce plik index.html i sprawdź, czy tytułem strony jest Nagłówek strony internetowej (Rys. 2).

Rys. 2. Widok pliku index.html w przeglądarce.

Meta tagi

Kolejnymi elementami, które powinniśmy uwzględnić w nagłówku strony są meta tagi. Odpowiadają one m.in. za kodowanie znaków, opis strony oraz słowa kluczowe.

Więcej o tych elementach dowiesz się w encyklopedii Jak umieścić meta tagi w HTML.

Kodowanie znaków

Częstym problemem, napotykanym przez początkujących webmasterów, jest brak polskich znaków na stronie. Aby były one wyświetlane na stronie, należy zwrócić uwagę na dwie czynności. Pierwszą jest ustawienie w opcjach edytora HTML określonego kodowania. Drugą jest umieszczenie znacznika meta, który wskazuje na to samo kodowanie.

Więcej o kodowaniu znaków dowiesz się w encyklopedii Jak kodować polskie znaki w HTML.

W opcjach swojego edytora HTML ustaw kodowanie znaków na UTF-8 (w Visual Web Developer 2010 Express nie musisz nic zmieniać – jest to standardowe kodowanie).
Dodaj znacznik meta wskazujący na kodowanie znaków UTF-8. Poniżej tytułu wpisz:

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

W znaczniku body wpisz zestaw polskich znaków:

<p>ąęłśźżćó</p>

Zapisz zmiany. Sprawdź, czy plik index.html wygląda tak, jak na Rys. 3.

Rys. 3. Zawartość pliku index.html po określeniu kodowania UTF-8.

Odśwież plik w przeglądarce i sprawdź, czy wszystkie polskie znaki wyświetlane są poprawnie (Rys. 4.).

Rys. 4. Widok pliku index.html w przeglądarce po określeniu kodowania UTF-8.

Opis strony

Opis strony to krótki tekst, który dotyczy zawartości strony. Jest on wyświetlany w wynikach wyszukiwania w wyszukiwarkach internetowych. Aby zachęcić potencjalnych czytelników naszej strony do wejścia na nią, bardzo ważne jest, aby był starannie napisany. Opis powinien być powiązany z treścią strony i mieć maksymalnie 150 znaków.

Dodaj opis strony.

Poniżej znacznika meta, odpowiadającego za kodowanie znaków, wpisz:

<meta name="description" content="Twój opis strony" />

W miejsce Twój opis strony wpisz wymyślony przez siebie opis.
Zapisz zmiany. Sprawdź, czy plik index.html wygląda podobnie, jak na Rys. 5.

Rys. 5. Zawartość pliku index.html po dodaniu opisu.

Słowa kluczowe

Meta tagi umożliwiają również zdefiniowanie słów kluczowych strony, to znaczy słów, które określają zawartość strony. Słowa kluczowe powinny być oddzielone od siebie przecinkami.

Dodaj słowa kluczowe strony.

Poniżej znacznika meta, odpowiadającego za opis strony, wpisz:

<meta name="keywords" content="twoje, słowa, kluczowe" />

W miejsce twoje, słowa, kluczowe wpisz wymyślone przez siebie słowa kluczowe oddzielone przecinkiem.
Zapisz zmiany. Sprawdź, czy plik index.html wygląda podobnie, jak na Rys. 6.

Rys. 6. Zawartość pliku index.html po dodaniu słów kluczowych.

Informacja

Słowa kluczowe nie odgrywają dzisiaj tak dużej roli, jak miało to miejsce kiedyś. Niektóre wyszukiwarki zupełnie nie biorą ich pod uwagę i nie mają one wpływu na pozycję strony w wynikach wyszukiwania.

Style CSS

Istnieją dwa sposoby umieszczania stylów CSS, które mają związek z nagłówkiem strony. Pierwszym jest umieszczenie stylów wewnątrz znacznika style w nagłówku strony internetowej. Drugim jest umieszczenie stylów w osobnym pliku i przywołanie go w nagłówku strony. Jest to jedno z zastosowań znacznika link, który służy do określania zewnętrznego dokumentu.

Więcej o umieszczaniu stylów CSS dowiesz się z encyklopedii Jak umieszczać style CSS.

W nagłówku head strony, poniżej słów kluczowych, wpisz:

<style type="text/css">
</style>

Ustaw czerwony kolor czcionki dla elementu body. W znaczniku <style> wpisz:

body { color: red; }

Zapisz plik. Sprawdź, czy plik index.html wygląda podobnie, jak na Rys. 7.

Rys. 7. Zawartość pliku index.html po dodaniu formatowania.

Odśwież w przeglądarce plik index.html. Sprawdź, czy zestaw polskich liter wpisanych wcześniej ma kolor czerwony tak, jak na Rys. 8.

Rys. 8. Widok pliku index.html w przeglądarce po dodaniu formatowania.

Informacja

W nagłówku strony można również umieścić m.in. następujące znaczniki:

<base /> - adres podany w atrybucie href stanowi bazowy adres strony, względem którego należy następnie podawać adresy plików w dokumencie. Dzięki temu nie trzeba powtarzać długich niekiedy adresów.
<script> - w tym znaczniku umieszcza się skrypty. Skrypty mogą być napisane np. w JavaScript.

Strona końcowa

<html>
<head>
    <title>Nagłówek strony internetowej</title> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Twój opis strony" />
    <meta name="keywords" content="twoje, słowa, kluczowe" />
    <style type="text/css">
        body { color: red; }
    </style>
</head>
<body>
    <p>ąęłśźżćó</p>
</body>
</html>

Podsumowanie

W tym artykule nauczyliśmy się, jakie znaczenie ma nagłówek strony. Dowiedzieliśmy się, jakie znaczniki można umieścić w nagłówku, jak utworzyć tytuł strony oraz meta tagi. Poznaliśmy podstawowe funkcje meta tagów, takie jak określanie kodowania znaków, opisu strony i słów kluczowych.

W kolejnym artykule nauczymy się, w jaki sposób umieścić Treść na stronie WWW.

Dodatkowo zobacz: