Zanim cokolwiek zaczniemy, musimy stworzyć jakąś stronę internetową. Oto kod najproszej strony zawierającej jedynie jedno zdanie.

<html>
<head>
</head>
<body>Moja pierwsza strona</body>
</html>

Nasza strona składa się z trzech znaczników, które zawsze posiadają początek i koniec , czyli tworzą pary.

Cała strona znajduje się pomiędzy parą znaczników:
<html>…</html>
Pierwszy znacznik <html> jest znacznikiem otwierającym, natomiast drugi < / html> jest znacznikiem zamykającym. Ukośnik użyty w na początku znacznika zawsze oznacza, że jest to znacznik zamykający.

Pomiędzy znacznikami:
<head>…</head>
powinny znaleźć się informacje, które nie są widoczne na stronie. Najważniejszą z tych informacji jest najprawdopodomniej tytuł strony, który widoczny jest na dole lub górze przeglądarki. Tytuł umieszamy pomiedzy znacznikami <title>…</title>, np.:

<html>
<head>
<title>Moja strona</title>
</head>
<body>Tu znajduje sie treść strony! </body>
</html>

Znaczniki: <body>…</body> zawierają w sobie całą treść strony włącznie ze zdjęciami, filmami, itp. Powyższy kod możesz wpisać do okna źródła edytora HTML lub skopiować bezpośrednio stąd.

HTMLephant

Mój słoń HTML. Wygląda trochę dziwnie ale na pewno go zapamiętasz!

Tak powstała pierwsza strona internetowa, którą możesz zabezpieczyć pod nazwą “index.htm”. Będzie ona działać w każdej przeglądarce, ale oczywiście nie jest czymś super wystrzałowym . Zapezpieczając plik na pulpicie lub dowolnym folderze na swoim komputerze, możesz go otworzyć dowolna przeglądarką w oknie “Otwórz”, która znajduje się w opcji “Plik”.

Towja pierwsza strona będzie wygladać w następujący sposób:

Pierwsza strona »

Stronie brakuje jeszcze treści, czyli najważniejszego składnika. Nie ma potrzeby tworzenia strony jeśli nic na niej nie będzie poza “Tu znajduje sie treść strony”.

Treść, którą wyświetli każda przeglądarka znajduje się pomiędzy znacznikami <body> i </body>.

Wstawiając słowa i zdania na tej stronie, okaże się, że cały tekst nie ma żadnej struktury, tz. słowa bedą układane w kolejności od lewej do prawej, z góry w dół. Nie będzie żadnej możliwości podkreślania niekórych fragmentów treści. Większym sensem było by pogrupowanie poszczególnych fragmentów treści w nagłówki, paragrafy, cytaty, itp.

Przeglądarki ignorują puste przestrzenie w tekście takie jak tabulatory czy podwójne spacje.

Struktura dokumentów HTML tworzona jest za pomocą znaczników.

Paragraf tworzy się znacznikami <p>…</p>. W języku HMTL paragraf jest grupą słów lub zdań, które oddzielone są od innych elementów struktury jakąś przestrzenią.

Każde z powyższych zdań jest oddzielnym paragrafem.

Nagłówki tworzy się sześcioma różnymi znacznikami, które różnią się jedynie wielkością: od największego: <h1>…</h1> do namniejszego <h6>..</h6>. Wyglądają one w nastepujacy sposób:

To jest nagłówek H1

To jest nagłówek H2

To jest nagłówek H3

To jest nagłówek H4

To jest nagłówek H5
To jest nagłówek H6

Jak widać w miarę jak rośnie cyfra, zmniejsza się wielkość nagłówka. Są one w różnym kolorze tylko dlatego, że chciałem żeby były. Jeśli wstwisz je na swojej stronie, wszystki bedą tego samego koloru.

Istniej jeszcze więcej możliwości formatowania tekstu, takie jak:

Pogrubienie tworzy para znaczników <b>…</b> lub nowsza forma <strong>…</strong>. Działają one w ten sam sposób.

Kursywa tworzona jest parą znaczników <i>…</i> lub jej nowszą formą: <um>…</um>.

Podkreślenie tworzone przez <u>…</u>. W języku HTML zazwyczaj oznacza ono odnośnik, dlatego lepiej nie używać go nie potrzebnie, aby nie mylić czytelników.

Innym ważnym znacznikiem jest <br />. W przeciwięństwie do innych znaczników nie wymaga on znacznika zamykającego. Powoduje on przejście do drugiej linii tego samego paragrafu.

Stosowanie powyższych znaczników pozwola nam na formatowanie tekstu, nadanie mu jakiego kształtu i charakteru jak w przypadku edytorów tekstowych.