0:00:00.411,0:00:01.835
Witam na swojej stronie.

0:00:01.835,0:00:04.059
Wiem, jest nieciekawa.

0:00:04.059,0:00:07.477
Pusta. Jak każda strona[br]na początku.

0:00:07.477,0:00:10.166
Niedługo pokażę wam,[br]jak ją zapełnić.

0:00:10.275,0:00:11.681
Zapoznajmy się

0:00:11.681,0:00:14.860
z budową takiej pustej strony.

0:00:15.389,0:00:16.944
Każda strona zaczyna się

0:00:16.944,0:00:20.384
od deklaracji DOCTYPE.

0:00:20.562,0:00:21.961
To znak dla przeglądarki,

0:00:21.961,0:00:24.603
że stronę stworzono[br]w nowej wersji HTML,

0:00:24.603,0:00:27.530
a nie w jakiejś[br]starej i dziwacznej.

0:00:27.931,0:00:31.026
Przejdźmy do pierwszego [br]znacznika na stronie.

0:00:31.026,0:00:34.582
HTML to język znaczników.

0:00:34.635,0:00:36.399
Znacznik zaczyna się

0:00:36.399,0:00:38.314
od nawiasu trójkątnego

0:00:38.314,0:00:40.684
i takim samym się kończy.

0:00:40.745,0:00:42.346
Jeśli lubicie matematykę,

0:00:42.346,0:00:45.383
nazywajcie je znakami[br]większości i mniejszości.

0:00:46.474,0:00:48.356
Pierwszym znacznikiem na stronie

0:00:48.356,0:00:51.343
jest „html”,[br]zawsze pod DOCTYPE.

0:00:51.343,0:00:53.871
To znacznik początkowy,

0:00:53.871,0:00:57.055
a u dołu jest znacznik końcowy,

0:00:57.055,0:00:59.729
taki sam, tylko z ukośnikiem,

0:00:59.729,0:01:01.747
który jest bardzo ważny.

0:01:01.889,0:01:05.147
Między nimi mieszczą się[br]wszystkie inne znaczniki

0:01:05.147,0:01:07.354
tworzące tę stronę.

0:01:07.376,0:01:11.051
Dlatego znacznik końcowy[br]jest na samym dole.

0:01:11.119,0:01:13.351
Wiele znaczników HTML[br]to takie pary,

0:01:13.351,0:01:15.099
ale nie wszystkie.

0:01:15.571,0:01:19.176
Pod znacznikiem „html”[br]zawsze jest znacznik „head”.

0:01:19.437,0:01:22.146
Zawiera znaczniki pomagające[br]przeglądarce

0:01:22.146,0:01:25.162
odpowiednio wyświetlić stronę.

0:01:25.435,0:01:27.885
Znacznik „meta”[br]szczegółowo informuje

0:01:27.885,0:01:30.017
przeglądarkę, jak to zrobić.

0:01:30.204,0:01:31.885
Jeśli np. chcemy używać tylko

0:01:31.885,0:01:33.281
alfabetu łacińskiego,

0:01:33.281,0:01:34.747
a nie skomplikowanych

0:01:34.747,0:01:36.628
liter arabskich,

0:01:36.628,0:01:39.618
wpiszemy znacznik[br]meta charset="utf-8".

0:01:40.100,0:01:41.578
Znacznik „title”

0:01:41.578,0:01:45.009
zawiera tytuł strony,

0:01:45.212,0:01:47.623
który pojawi się w pasku na górze,

0:01:47.623,0:01:50.039
w zakładkach[br]i wynikach wyszukiwania.

0:01:50.161,0:01:53.430
W Khan Academy tytuł[br]widać nad naszą stroną.

0:01:53.687,0:01:55.544
Zmienię tytuł.

0:01:55.695,0:01:59.348
Zrobię stronę o królikach:

0:01:59.348,0:02:01.914
„All About Rabbits”[br](Wszystko o królikach).

0:02:01.914,0:02:04.923
Może już widzicie,[br]że tytuł się zmienił.

0:02:05.539,0:02:08.149
Super! Zrobiliśmy już wszystko,

0:02:08.149,0:02:11.946
wstawmy znacznik „/head”[br]i przejdźmy dalej do znacznika,

0:02:11.946,0:02:14.809
w którym powstaje strona.[br]To znacznik „body”.

0:02:15.033,0:02:17.805
Na razie - nuda.[br]Tylko początek i koniec.

0:02:18.081,0:02:19.521
Co dodać?

0:02:19.521,0:02:21.921
Skoro tworzę stronę o królikach,

0:02:21.921,0:02:23.155
powinnam to napisać

0:02:23.155,0:02:25.455
dużymi literami u góry.

0:02:25.559,0:02:28.656
Nagłówek dodamy za pomocą[br]znacznika „h1”.

0:02:29.574,0:02:33.154
„Wszystko o królikach”, świetnie.

0:02:33.154,0:02:34.772
Mamy do dyspozycji

0:02:34.772,0:02:38.441
6 znaczników do nagłówków:[br]„h1”, „h2”, „h3”, „h4”, „h5”, „h6”;

0:02:38.461,0:02:41.153
„h1” odnosi się[br]do najważniejszego nagłówka,

0:02:41.153,0:02:43.358
a „h6” do najmniej ważnego.

0:02:43.491,0:02:45.682
Dodam tytuły sekcji.

0:02:45.696,0:02:49.035
Skorzystam ze znacznika „h2”,

0:02:49.035,0:02:51.197
bo te części są nieco mniej ważne.

0:02:51.957,0:02:55.469
Jeszcze piosenki. Świetnie.

0:02:56.214,0:02:58.240
Dodajmy trochę informacji.

0:02:58.402,0:03:00.435
Tworzę tę stronę

0:03:00.435,0:03:03.934
dla kosmitów,[br]którzy nigdy nie widzieli królika.

0:03:03.934,0:03:06.943
Przyda się porządny opis.

0:03:07.100,0:03:10.174
Cały akapit z informacjami.

0:03:10.396,0:03:12.856
Jak oznaczyć w HTML[br]akapit (paragraf)?

0:03:13.391,0:03:16.049
Oczywiście znacznikiem „p”.

0:03:16.470,0:03:20.736
Stawiam znacznik „p”[br]i już mogę

0:03:20.736,0:03:22.633
wkleić informacje.

0:03:22.633,0:03:25.568
Nie musicie patrzeć,[br]jak wszystko wklepuję.

0:03:25.856,0:03:27.116
Pięknie!

0:03:27.699,0:03:30.901
Kosmici muszą znać piosenkę[br]powitalną dla królików.

0:03:30.912,0:03:33.170
Podam im tekst swojej ulubionej.

0:03:33.170,0:03:38.170
Znów użyję znacznika „p”[br]i wkleję słowa.

0:03:39.521,0:03:43.419
„Króliczek Foo Foo”, ładna piosenka.

0:03:43.572,0:03:47.672
Oj, wszystko wyświetla się[br]w jednej linii!

0:03:47.868,0:03:50.315
Skąd kosmici mają wiedzieć,[br]gdzie są pauzy?

0:03:50.418,0:03:51.660
Dlaczego przeglądarka

0:03:51.660,0:03:54.092
nie pokazała podziałów wiersza?

0:03:54.350,0:03:57.052
Na ogół przeglądarki[br]ignorują te znaki

0:03:57.052,0:03:59.139
oraz spacje w tekstach w HTML.

0:03:59.318,0:04:01.647
Żeby przeglądarka podzieliła wiersz,

0:04:01.647,0:04:05.022
musimy jej to nakazać,[br]używając innego znacznika,

0:04:05.022,0:04:08.176
„br” (z ang. break - podział).

0:04:08.398,0:04:12.513
Dodamy więc „br”[br]na końcu każdego wiersza.

0:04:12.777,0:04:14.885
Teraz widać tekst piosenki!

0:04:15.440,0:04:18.890
Zauważyliście coś[br]w związku z „br”?

0:04:19.221,0:04:20.851
Nie ma znacznika końcowego.

0:04:20.966,0:04:21.938
Pomyślmy:

0:04:21.938,0:04:23.492
podział wiersza nie ma treści,

0:04:23.492,0:04:25.861
więc co tu kończyć?

0:04:26.006,0:04:28.496
Wystarczy znacznik początkowy.

0:04:29.062,0:04:30.361
Gotowe.

0:04:30.456,0:04:32.704
Kosmici dowiedzą się o królikach,

0:04:32.704,0:04:35.883
a wy poznaliście podstawy HTML.

0:04:36.044,0:04:37.158
Kiedy skończę,

0:04:37.158,0:04:39.915
pobawcie się,[br]pozmieniajcie różne rzeczy.

0:04:39.976,0:04:43.658
A gdy będziecie gotowi, przejdźcie[br]do pierwszego zadania w HTML.