HTML dla początkujących


HTML (HyperText Markup Language) to język opisu strony. Dokument HTML jest plikiem tekstowym, który oprócz tekstu widocznego na stronie zawiera znaczniki zawierające polecenia dla przeglądarek klienta, opisują one wygląd i funkcje elementów strony web. Język HTML przechodził już wielokrotnie modyfikacje. Dodawane są nowe polecenia i funkcje. Specyfikacja HTML zmierza do tego, aby strony pisane w tym języku były tak samo prezentowane w różnych przeglądarkach i na różnych komputerach. Mimo standaryzacji, niektóre przeglądarki inaczej interpretują te same polecenia. Aby uniknąć błędów autorzy stron muszą zapoznać się z różnicami w składni.
Opisy znaczników są tu: Tagi HTML
Znajomość HTML-a jest potrzebna nawet wtedy, gdy tworzy się strony w edytorach graficznych, typu FrontPage. Edytor taki tworzy dokument HTML podobnie jak w Wordzie, można pisać tekst i osadzać obrazki bez wnikania w kod źródłowy. Jednak źródło HTML zawiera nadmiarowy kod, niepotrzebne elementy formatowania, co powoduje, że strona się wolno ładuje.
Autor strony ma pełną możliwość edycji tylko na poziomie kodu źródłowego HTML. W FrontPage można się przełączyć, wybierając odpowiednią zakładkę HTML. Do edycji lepiej jest użyć gotowego edytora HTML z kolorowaniem składni. Programiści chętnie wybierają polski program Pajączek.


Skorzystaj z naszego generatora stony HTML. Skrypt automatycznie wygeneruje szkielet dokumentu HTML. Można skopiować wybrane fragnenty kodu i wkleić je w sekcji nagłówkowej własnej strony.
Generator META TAGów


Wygląd dokumentu HTML

Gdy patrzymy na źródło strony, czyli dokument HTML na pozór wydaje się nieczytelny i niezrozumiały. Oprócz tekstów, które stanowią treść strony są tu tajemnicze znaczniki. Znacznik, zwany też tagiem to fragment kodu ujęty w ostre nawiasy. Tagi nie są wyświetlane na stronie, są to tylko polecenia dla przeglądarki, aby mogła prawidłowo wyświetlić stronę. Dokument HTML składa się z dwóch części. Pierwsza to część nagłówkowa znajdująca się między znacznikami <head> i </head> są 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. Druga część między znacznikami < body> i < /body> to właściwa treść strony razem z tagami opisującymi formatowanie. Obie części dokumentu objęte są tagami: <html> i </html> Wewnątrz tagów mogą być jeszcze dodatkowe polecenia zmieniające ich działanie. Poniżej przedstawiamy typowy szablon dokumentu HTML

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


Składnia HTML

 Każdy tag zaczyna się i kończy ostrym nawiasem, nie ma znaczenie wielkość liter wewnątrz tagów. W kodzie źródłowym długie linijki kodu mogą być podzielone na kilka linii. Przeglądarka dopóki nie na trafi na znak zamykający tag czyta go jako jedną linię. Przerwy między znacznikami są nieistotne. Tu zastosowano je dla lepszej czytelności kodu.
Większość znaczników formatujących ma tagi otwierające i zamykające, różnica jest w znaku / występującym w tagu zamykającym.

 Dobrym obyczajem programisty jest rozpoczęcie dokumentu HTML od prologu, czyli deklaracji standardu. Prolog nie jest bezwzględnie wymagany, ale ułatwia interpretację kodu przez przeglądarką, która wie jaką wersją języka HTML stosował autor strony.
Jeśli przy pisaniu używamy dobrego edytora HTML to deklaracja ta wstawiana jest automatycznie jako pierwsza linijka kodu lub musimy wkleić ten fragment sami.
Następna linijka kodu w naszym szablonie to znacznik <html> który informuje, że tu zaczyna się dokument HTML, wewnątrz znacznika mogą być dodatkowe polecenia dla przeglądarki.

Kolejne znaczniki to <head> i </head> którymi objęta jest część nagłówkowa dokumentu.
W tej części występują tagi: <title> i </title> pomiędzy którymi wpisany jest tytuł dokumentu. Nie jest on bezpośrednio wyświetlany na stronie tylko na pasku tytułowym przeglądarki oraz jest wykorzystywany przez wyszukiwarki w opisie strony.
Bardzo ważne jest umieszczenie w dokumencie linijki kodu określającej stronę kodową języka, dla stron w języku polskim powinna to być: ISO-8859-2 (czyli ISO Latin 2).


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

Aby nasza strona była prawidłowo indeksowana w wyszukiwarkach trzeba też umieścić tagi Description - z opisem strony i Keywords - ze słowami kluczowymi. W części nagłówkowej może być jeszcze wiele innych informacji jak: data utworzenia strony, autor, lokalizacja zewnętrznego arkusza stylów i skrypty uruchamiane na stronie.

Właściwa treść dokumentu znajduje się w sekcji BODY, czyli między tagami: < body> i < /body>. W tej sekcji znajdziemy szereg znaczników służących do opisu sposobu formatowania tekstu i innych elementów strony.
Najpopularniejsze są tagi: < P> i < /P> oznaczające początek i koniec akapitu.
Gdybyśmy ich nie stosowali to blok tekstu byłby wyświetlany na stronie jako jednolita masa, ignorowane byłyby znaki Enter kończące akapit.
Wprawdzie wystarczyłoby podawać tag rozpoczynający akapit, bo większość przeglądarek koryguje takie błędy i sama stawia znak końca akapitu przed rozpoczęciem nowego, jednak przestrzeganie zasad domykania znaczników pozwoli uniknąć przypadkowych błędów.


Tytuły

Na stronie zwykle występują tytuły o różnej wielkości czcionek. W kodzie HTML określą się to tagami < H1> i < /H1> pomiędzy którymi jest tekst nagłówka, a cyfra od 1 do 6 określa jego stopień


<H1>Tytuł pierwszego stopnia</H1>
<H2>Tytuł drugiego stopnia</H2>
<H3>Tytuł trzeciego stopnia</H3>
<H4>Tytuł czwartego stopnia</H4>
<H5>Tytuł piątego stopnia</H5>
<H6>Tytuł szóstego stopnia</H6>

Tak to wygląda na stronie:

Tytuł pierwszego stopnia

Tytuł drugiego stopnia

Tytuł trzeciego stopnia

Tytuł czwartego stopnia

Tytuł piątego stopnia
Tytuł szóstego stopnia


Listy wyliczeniowe

Znane z edytorów tekstów wykazy, czyli listy można stosować na stronie www.
Wypunktowanie w tej formie nadaje dokumentom bardziej przejrzysty wygląd. Mogą to być listy uporządkowane, których elementy są ponumerowane lub oznaczone kolejnymi literami alfabetu oraz listy nieuporządkowane, których poszczególne elementy list są poprzedzone takim samym znakiem, np. kropką.
Przykład listy nieuporządkowanej:

<ul>
<li>Pierwsza pozycja listy</li>
<li>Druga pozycja listy</li>
<li>Trzecia pozycja listy</li>
</ul>
  • Pierwsza pozycja listy
  • Druga pozycja listy
  • Trzecia pozycja listy

Przykład listy numerowanej:

<ol>
<li>Pierwsza pozycja listy</li>
<li>Druga pozycja listy</li>
<li>Trzecia pozycja listy</li>
</ol>
  1. Pierwsza pozycja listy
  2. Druga pozycja listy
  3. Trzecia pozycja listy


Odsyłacze

Przechodzenie z jednej strony do drugiej możliwe jest właśnie dzięki odsyłaczom, czyli linkom. Link na stronie może wyglądać jak zwykły tekst, jednak po najechaniu na niego kursorem myszki zmienia się na wskazującą rączkę, a po kliknięciu przenosi nas na inną stronę. Standardowo link tekstowy jest podkreślony i w kolorze niebieskim, choć to można zmienić w stylach. Kod linka tekstowego może wyglądać tak:

<a href="http://szablony.freeware.info.pl/">poradnik webmastera</a>

Na stronie to samo może wyglądać tak:

poradnik webmastera

Odmianą odnośnika jest taki link co uruchamia program pocztowy i otwiera list zaadresowany do autora. Kod odnośnika do poczty email może wyglądać tak:

<a href="mailto:twoj@adres.pl">Napisz do mnie</a>

Na stronie ten link może wyglądać tak:

Napisz do mnie


Grafika

Obrazki na stronie bardzo podnoszą jej atrakcyjność. Na witrynach można umieszczać grafikę w formatach GIF, JPG i PNG, są to obrazki skompresowane, czyli ich wielkość została zmniejszona aby ograniczyć transfer i przyśpieszyć ładowanie strony.
Typowy znacznik, który osadza obrazek znajdujący się w tym samym katalogu co strona wygląda tak:

<img src="obrazek.jpg" alt="nazwa alternatywna obrazka">

Należy pamiętać o podaniu tekstu alternatywnego opisującego obrazek, jest to ważna dla przeglądarek, które maja wyłączone wyświetlanie obrazków, jej użytkownik może się po tym zorientować co tu było. Jeśli obrazek jest w innym katalogu niż strona trzeba podać ścieżkę do tego pliku, np.:

<img src="images/obrazek.jpg" alt="nazwa alternatywna obrazka">