Witam na swojej stronie.

Wiem, jest nieciekawa.

Pusta. Jak każda strona
na początku.

Niedługo pokażę wam,
jak ją zapełnić.

Zapoznajmy się

z budową takiej pustej strony.

Każda strona zaczyna się

od deklaracji DOCTYPE.

To znak dla przeglądarki,

że stronę stworzono
w nowej wersji HTML,

a nie w jakiejś
starej i dziwacznej.

Przejdźmy do pierwszego 
znacznika na stronie.

HTML to język znaczników.

Znacznik zaczyna się

od nawiasu trójkątnego

i takim samym się kończy.

Jeśli lubicie matematykę,

nazywajcie je znakami
większości i mniejszości.

Pierwszym znacznikiem na stronie

jest „html”,
zawsze pod DOCTYPE.

To znacznik początkowy,

a u dołu jest znacznik końcowy,

taki sam, tylko z ukośnikiem,

który jest bardzo ważny.

Między nimi mieszczą się
wszystkie inne znaczniki

tworzące tę stronę.

Dlatego znacznik końcowy
jest na samym dole.

Wiele znaczników HTML
to takie pary,

ale nie wszystkie.

Pod znacznikiem „html”
zawsze jest znacznik „head”.

Zawiera znaczniki pomagające
przeglądarce

odpowiednio wyświetlić stronę.

Znacznik „meta”
szczegółowo informuje

przeglądarkę, jak to zrobić.

Jeśli np. chcemy używać tylko

alfabetu łacińskiego,

a nie skomplikowanych

liter arabskich,

wpiszemy znacznik
meta charset="utf-8".

Znacznik „title”

zawiera tytuł strony,

który pojawi się w pasku na górze,

w zakładkach
i wynikach wyszukiwania.

W Khan Academy tytuł
widać nad naszą stroną.

Zmienię tytuł.

Zrobię stronę o królikach:

„All About Rabbits”
(Wszystko o królikach).

Może już widzicie,
że tytuł się zmienił.

Super! Zrobiliśmy już wszystko,

wstawmy znacznik „/head”
i przejdźmy dalej do znacznika,

w którym powstaje strona.
To znacznik „body”.

Na razie - nuda.
Tylko początek i koniec.

Co dodać?

Skoro tworzę stronę o królikach,

powinnam to napisać

dużymi literami u góry.

Nagłówek dodamy za pomocą
znacznika „h1”.

„Wszystko o królikach”, świetnie.

Mamy do dyspozycji

6 znaczników do nagłówków:
„h1”, „h2”, „h3”, „h4”, „h5”, „h6”;

„h1” odnosi się
do najważniejszego nagłówka,

a „h6” do najmniej ważnego.

Dodam tytuły sekcji.

Skorzystam ze znacznika „h2”,

bo te części są nieco mniej ważne.

Jeszcze piosenki. Świetnie.

Dodajmy trochę informacji.

Tworzę tę stronę

dla kosmitów,
którzy nigdy nie widzieli królika.

Przyda się porządny opis.

Cały akapit z informacjami.

Jak oznaczyć w HTML
akapit (paragraf)?

Oczywiście znacznikiem „p”.

Stawiam znacznik „p”
i już mogę

wkleić informacje.

Nie musicie patrzeć,
jak wszystko wklepuję.

Pięknie!

Kosmici muszą znać piosenkę
powitalną dla królików.

Podam im tekst swojej ulubionej.

Znów użyję znacznika „p”
i wkleję słowa.

„Króliczek Foo Foo”, ładna piosenka.

Oj, wszystko wyświetla się
w jednej linii!

Skąd kosmici mają wiedzieć,
gdzie są pauzy?

Dlaczego przeglądarka

nie pokazała podziałów wiersza?

Na ogół przeglądarki
ignorują te znaki

oraz spacje w tekstach w HTML.

Żeby przeglądarka podzieliła wiersz,

musimy jej to nakazać,
używając innego znacznika,

„br” (z ang. break - podział).

Dodamy więc „br”
na końcu każdego wiersza.

Teraz widać tekst piosenki!

Zauważyliście coś
w związku z „br”?

Nie ma znacznika końcowego.

Pomyślmy:

podział wiersza nie ma treści,

więc co tu kończyć?

Wystarczy znacznik początkowy.

Gotowe.

Kosmici dowiedzą się o królikach,

a wy poznaliście podstawy HTML.

Kiedy skończę,

pobawcie się,
pozmieniajcie różne rzeczy.

A gdy będziecie gotowi, przejdźcie
do pierwszego zadania w HTML.