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.