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.