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