WEBVTT

00:00:00.411 --> 00:00:01.835
Witam na swojej stronie.

00:00:01.835 --> 00:00:04.059
Wiem, jest nieciekawa.

00:00:04.059 --> 00:00:07.477
Pusta. Jak każda strona
na początku.

00:00:07.477 --> 00:00:10.166
Niedługo pokażę wam,
jak ją zapełnić.

00:00:10.275 --> 00:00:11.681
Zapoznajmy się

00:00:11.681 --> 00:00:14.860
z budową takiej pustej strony.

00:00:15.389 --> 00:00:16.944
Każda strona zaczyna się

00:00:16.944 --> 00:00:20.384
od deklaracji DOCTYPE.

00:00:20.562 --> 00:00:21.961
To znak dla przeglądarki,

00:00:21.961 --> 00:00:24.603
że stronę stworzono
w nowej wersji HTML,

00:00:24.603 --> 00:00:27.530
a nie w jakiejś
starej i dziwacznej.

00:00:27.931 --> 00:00:31.026
Przejdźmy do pierwszego 
znacznika na stronie.

00:00:31.026 --> 00:00:34.582
HTML to język znaczników.

00:00:34.635 --> 00:00:36.399
Znacznik zaczyna się

00:00:36.399 --> 00:00:38.314
od nawiasu trójkątnego

00:00:38.314 --> 00:00:40.684
i takim samym się kończy.

00:00:40.745 --> 00:00:42.346
Jeśli lubicie matematykę,

00:00:42.346 --> 00:00:45.383
nazywajcie je znakami
większości i mniejszości.

00:00:46.474 --> 00:00:48.356
Pierwszym znacznikiem na stronie

00:00:48.356 --> 00:00:51.343
jest „html”,
zawsze pod DOCTYPE.

00:00:51.343 --> 00:00:53.871
To znacznik początkowy,

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

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

00:00:59.729 --> 00:01:01.747
który jest bardzo ważny.

00:01:01.889 --> 00:01:05.147
Między nimi mieszczą się
wszystkie inne znaczniki

00:01:05.147 --> 00:01:07.354
tworzące tę stronę.

00:01:07.376 --> 00:01:11.051
Dlatego znacznik końcowy
jest na samym dole.

00:01:11.119 --> 00:01:13.351
Wiele znaczników HTML
to takie pary,

00:01:13.351 --> 00:01:15.099
ale nie wszystkie.

00:01:15.571 --> 00:01:19.176
Pod znacznikiem „html”
zawsze jest znacznik „head”.

00:01:19.437 --> 00:01:22.146
Zawiera znaczniki pomagające
przeglądarce

00:01:22.146 --> 00:01:25.162
odpowiednio wyświetlić stronę.

00:01:25.435 --> 00:01:27.885
Znacznik „meta”
szczegółowo informuje

00:01:27.885 --> 00:01:30.017
przeglądarkę, jak to zrobić.

00:01:30.204 --> 00:01:31.885
Jeśli np. chcemy używać tylko

00:01:31.885 --> 00:01:33.281
alfabetu łacińskiego,

00:01:33.281 --> 00:01:34.747
a nie skomplikowanych

00:01:34.747 --> 00:01:36.628
liter arabskich,

00:01:36.628 --> 00:01:39.618
wpiszemy znacznik
meta charset="utf-8".

00:01:40.100 --> 00:01:41.578
Znacznik „title”

00:01:41.578 --> 00:01:45.009
zawiera tytuł strony,

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

00:01:47.623 --> 00:01:50.039
w zakładkach
i wynikach wyszukiwania.

00:01:50.161 --> 00:01:53.430
W Khan Academy tytuł
widać nad naszą stroną.

00:01:53.687 --> 00:01:55.544
Zmienię tytuł.

00:01:55.695 --> 00:01:59.348
Zrobię stronę o królikach:

00:01:59.348 --> 00:02:01.914
„All About Rabbits”
(Wszystko o królikach).

00:02:01.914 --> 00:02:04.923
Może już widzicie,
że tytuł się zmienił.

00:02:05.539 --> 00:02:08.149
Super! Zrobiliśmy już wszystko,

00:02:08.149 --> 00:02:11.946
wstawmy znacznik „/head”
i przejdźmy dalej do znacznika,

00:02:11.946 --> 00:02:14.809
w którym powstaje strona.
To znacznik „body”.

00:02:15.033 --> 00:02:17.805
Na razie - nuda.
Tylko początek i koniec.

00:02:18.081 --> 00:02:19.521
Co dodać?

00:02:19.521 --> 00:02:21.921
Skoro tworzę stronę o królikach,

00:02:21.921 --> 00:02:23.155
powinnam to napisać

00:02:23.155 --> 00:02:25.455
dużymi literami u góry.

00:02:25.559 --> 00:02:28.656
Nagłówek dodamy za pomocą
znacznika „h1”.

00:02:29.574 --> 00:02:33.154
„Wszystko o królikach”, świetnie.

00:02:33.154 --> 00:02:34.772
Mamy do dyspozycji

00:02:34.772 --> 00:02:38.441
6 znaczników do nagłówków:
„h1”, „h2”, „h3”, „h4”, „h5”, „h6”;

00:02:38.461 --> 00:02:41.153
„h1” odnosi się
do najważniejszego nagłówka,

00:02:41.153 --> 00:02:43.358
a „h6” do najmniej ważnego.

00:02:43.491 --> 00:02:45.682
Dodam tytuły sekcji.

00:02:45.696 --> 00:02:49.035
Skorzystam ze znacznika „h2”,

00:02:49.035 --> 00:02:51.197
bo te części są nieco mniej ważne.

00:02:51.957 --> 00:02:55.469
Jeszcze piosenki. Świetnie.

00:02:56.214 --> 00:02:58.240
Dodajmy trochę informacji.

00:02:58.402 --> 00:03:00.435
Tworzę tę stronę

00:03:00.435 --> 00:03:03.934
dla kosmitów,
którzy nigdy nie widzieli królika.

00:03:03.934 --> 00:03:06.943
Przyda się porządny opis.

00:03:07.100 --> 00:03:10.174
Cały akapit z informacjami.

00:03:10.396 --> 00:03:12.856
Jak oznaczyć w HTML
akapit (paragraf)?

00:03:13.391 --> 00:03:16.049
Oczywiście znacznikiem „p”.

00:03:16.470 --> 00:03:20.736
Stawiam znacznik „p”
i już mogę

00:03:20.736 --> 00:03:22.633
wkleić informacje.

00:03:22.633 --> 00:03:25.568
Nie musicie patrzeć,
jak wszystko wklepuję.

00:03:25.856 --> 00:03:27.116
Pięknie!

00:03:27.699 --> 00:03:30.901
Kosmici muszą znać piosenkę
powitalną dla królików.

00:03:30.912 --> 00:03:33.170
Podam im tekst swojej ulubionej.

00:03:33.170 --> 00:03:38.170
Znów użyję znacznika „p”
i wkleję słowa.

00:03:39.521 --> 00:03:43.419
„Króliczek Foo Foo”, ładna piosenka.

00:03:43.572 --> 00:03:47.672
Oj, wszystko wyświetla się
w jednej linii!

00:03:47.868 --> 00:03:50.315
Skąd kosmici mają wiedzieć,
gdzie są pauzy?

00:03:50.418 --> 00:03:51.660
Dlaczego przeglądarka

00:03:51.660 --> 00:03:54.092
nie pokazała podziałów wiersza?

00:03:54.350 --> 00:03:57.052
Na ogół przeglądarki
ignorują te znaki

00:03:57.052 --> 00:03:59.139
oraz spacje w tekstach w HTML.

00:03:59.318 --> 00:04:01.647
Żeby przeglądarka podzieliła wiersz,

00:04:01.647 --> 00:04:05.022
musimy jej to nakazać,
używając innego znacznika,

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

00:04:08.398 --> 00:04:12.513
Dodamy więc „br”
na końcu każdego wiersza.

00:04:12.777 --> 00:04:14.885
Teraz widać tekst piosenki!

00:04:15.440 --> 00:04:18.890
Zauważyliście coś
w związku z „br”?

00:04:19.221 --> 00:04:20.851
Nie ma znacznika końcowego.

00:04:20.966 --> 00:04:21.938
Pomyślmy:

00:04:21.938 --> 00:04:23.492
podział wiersza nie ma treści,

00:04:23.492 --> 00:04:25.861
więc co tu kończyć?

00:04:26.006 --> 00:04:28.496
Wystarczy znacznik początkowy.

00:04:29.062 --> 00:04:30.361
Gotowe.

00:04:30.456 --> 00:04:32.704
Kosmici dowiedzą się o królikach,

00:04:32.704 --> 00:04:35.883
a wy poznaliście podstawy HTML.

00:04:36.044 --> 00:04:37.158
Kiedy skończę,

00:04:37.158 --> 00:04:39.915
pobawcie się,
pozmieniajcie różne rzeczy.

00:04:39.976 --> 00:04:43.658
A gdy będziecie gotowi, przejdźcie
do pierwszego zadania w HTML.