1
00:00:00,411 --> 00:00:01,835
Witam na swojej stronie.

2
00:00:01,835 --> 00:00:04,059
Wiem, jest nieciekawa.

3
00:00:04,059 --> 00:00:07,477
Pusta. Jak każda strona
na początku.

4
00:00:07,477 --> 00:00:10,166
Niedługo pokażę wam,
jak ją zapełnić.

5
00:00:10,275 --> 00:00:11,681
Zapoznajmy się

6
00:00:11,681 --> 00:00:14,860
z budową takiej pustej strony.

7
00:00:15,389 --> 00:00:16,944
Każda strona zaczyna się

8
00:00:16,944 --> 00:00:20,384
od deklaracji DOCTYPE.

9
00:00:20,562 --> 00:00:21,961
To znak dla przeglądarki,

10
00:00:21,961 --> 00:00:24,603
że stronę stworzono
w nowej wersji HTML,

11
00:00:24,603 --> 00:00:27,530
a nie w jakiejś
starej i dziwacznej.

12
00:00:27,931 --> 00:00:31,026
Przejdźmy do pierwszego 
znacznika na stronie.

13
00:00:31,026 --> 00:00:34,582
HTML to język znaczników.

14
00:00:34,635 --> 00:00:36,399
Znacznik zaczyna się

15
00:00:36,399 --> 00:00:38,314
od nawiasu trójkątnego

16
00:00:38,314 --> 00:00:40,684
i takim samym się kończy.

17
00:00:40,745 --> 00:00:42,346
Jeśli lubicie matematykę,

18
00:00:42,346 --> 00:00:45,383
nazywajcie je znakami
większości i mniejszości.

19
00:00:46,474 --> 00:00:48,356
Pierwszym znacznikiem na stronie

20
00:00:48,356 --> 00:00:51,343
jest „html”,
zawsze pod DOCTYPE.

21
00:00:51,343 --> 00:00:53,871
To znacznik początkowy,

22
00:00:53,871 --> 00:00:57,055
a u dołu jest znacznik końcowy,

23
00:00:57,055 --> 00:00:59,729
taki sam, tylko z ukośnikiem,

24
00:00:59,729 --> 00:01:01,747
który jest bardzo ważny.

25
00:01:01,889 --> 00:01:05,147
Między nimi mieszczą się
wszystkie inne znaczniki

26
00:01:05,147 --> 00:01:07,354
tworzące tę stronę.

27
00:01:07,376 --> 00:01:11,051
Dlatego znacznik końcowy
jest na samym dole.

28
00:01:11,119 --> 00:01:13,351
Wiele znaczników HTML
to takie pary,

29
00:01:13,351 --> 00:01:15,099
ale nie wszystkie.

30
00:01:15,571 --> 00:01:19,176
Pod znacznikiem „html”
zawsze jest znacznik „head”.

31
00:01:19,437 --> 00:01:22,146
Zawiera znaczniki pomagające
przeglądarce

32
00:01:22,146 --> 00:01:25,162
odpowiednio wyświetlić stronę.

33
00:01:25,435 --> 00:01:27,885
Znacznik „meta”
szczegółowo informuje

34
00:01:27,885 --> 00:01:30,017
przeglądarkę, jak to zrobić.

35
00:01:30,204 --> 00:01:31,885
Jeśli np. chcemy używać tylko

36
00:01:31,885 --> 00:01:33,281
alfabetu łacińskiego,

37
00:01:33,281 --> 00:01:34,747
a nie skomplikowanych

38
00:01:34,747 --> 00:01:36,628
liter arabskich,

39
00:01:36,628 --> 00:01:39,618
wpiszemy znacznik
meta charset="utf-8".

40
00:01:40,100 --> 00:01:41,578
Znacznik „title”

41
00:01:41,578 --> 00:01:45,009
zawiera tytuł strony,

42
00:01:45,212 --> 00:01:47,623
który pojawi się w pasku na górze,

43
00:01:47,623 --> 00:01:50,039
w zakładkach
i wynikach wyszukiwania.

44
00:01:50,161 --> 00:01:53,430
W Khan Academy tytuł
widać nad naszą stroną.

45
00:01:53,687 --> 00:01:55,544
Zmienię tytuł.

46
00:01:55,695 --> 00:01:59,348
Zrobię stronę o królikach:

47
00:01:59,348 --> 00:02:01,914
„All About Rabbits”
(Wszystko o królikach).

48
00:02:01,914 --> 00:02:04,923
Może już widzicie,
że tytuł się zmienił.

49
00:02:05,539 --> 00:02:08,149
Super! Zrobiliśmy już wszystko,

50
00:02:08,149 --> 00:02:11,946
wstawmy znacznik „/head”
i przejdźmy dalej do znacznika,

51
00:02:11,946 --> 00:02:14,809
w którym powstaje strona.
To znacznik „body”.

52
00:02:15,033 --> 00:02:17,805
Na razie - nuda.
Tylko początek i koniec.

53
00:02:18,081 --> 00:02:19,521
Co dodać?

54
00:02:19,521 --> 00:02:21,921
Skoro tworzę stronę o królikach,

55
00:02:21,921 --> 00:02:23,155
powinnam to napisać

56
00:02:23,155 --> 00:02:25,455
dużymi literami u góry.

57
00:02:25,559 --> 00:02:28,656
Nagłówek dodamy za pomocą
znacznika „h1”.

58
00:02:29,574 --> 00:02:33,154
„Wszystko o królikach”, świetnie.

59
00:02:33,154 --> 00:02:34,772
Mamy do dyspozycji

60
00:02:34,772 --> 00:02:38,441
6 znaczników do nagłówków:
„h1”, „h2”, „h3”, „h4”, „h5”, „h6”;

61
00:02:38,461 --> 00:02:41,153
„h1” odnosi się
do najważniejszego nagłówka,

62
00:02:41,153 --> 00:02:43,358
a „h6” do najmniej ważnego.

63
00:02:43,491 --> 00:02:45,682
Dodam tytuły sekcji.

64
00:02:45,696 --> 00:02:49,035
Skorzystam ze znacznika „h2”,

65
00:02:49,035 --> 00:02:51,197
bo te części są nieco mniej ważne.

66
00:02:51,957 --> 00:02:55,469
Jeszcze piosenki. Świetnie.

67
00:02:56,214 --> 00:02:58,240
Dodajmy trochę informacji.

68
00:02:58,402 --> 00:03:00,435
Tworzę tę stronę

69
00:03:00,435 --> 00:03:03,934
dla kosmitów,
którzy nigdy nie widzieli królika.

70
00:03:03,934 --> 00:03:06,943
Przyda się porządny opis.

71
00:03:07,100 --> 00:03:10,174
Cały akapit z informacjami.

72
00:03:10,396 --> 00:03:12,856
Jak oznaczyć w HTML
akapit (paragraf)?

73
00:03:13,391 --> 00:03:16,049
Oczywiście znacznikiem „p”.

74
00:03:16,470 --> 00:03:20,736
Stawiam znacznik „p”
i już mogę

75
00:03:20,736 --> 00:03:22,633
wkleić informacje.

76
00:03:22,633 --> 00:03:25,568
Nie musicie patrzeć,
jak wszystko wklepuję.

77
00:03:25,856 --> 00:03:27,116
Pięknie!

78
00:03:27,699 --> 00:03:30,901
Kosmici muszą znać piosenkę
powitalną dla królików.

79
00:03:30,912 --> 00:03:33,170
Podam im tekst swojej ulubionej.

80
00:03:33,170 --> 00:03:38,170
Znów użyję znacznika „p”
i wkleję słowa.

81
00:03:39,521 --> 00:03:43,419
„Króliczek Foo Foo”, ładna piosenka.

82
00:03:43,572 --> 00:03:47,672
Oj, wszystko wyświetla się
w jednej linii!

83
00:03:47,868 --> 00:03:50,315
Skąd kosmici mają wiedzieć,
gdzie są pauzy?

84
00:03:50,418 --> 00:03:51,660
Dlaczego przeglądarka

85
00:03:51,660 --> 00:03:54,092
nie pokazała podziałów wiersza?

86
00:03:54,350 --> 00:03:57,052
Na ogół przeglądarki
ignorują te znaki

87
00:03:57,052 --> 00:03:59,139
oraz spacje w tekstach w HTML.

88
00:03:59,318 --> 00:04:01,647
Żeby przeglądarka podzieliła wiersz,

89
00:04:01,647 --> 00:04:05,022
musimy jej to nakazać,
używając innego znacznika,

90
00:04:05,022 --> 00:04:08,176
„br” (z ang. break - podział).

91
00:04:08,398 --> 00:04:12,513
Dodamy więc „br”
na końcu każdego wiersza.

92
00:04:12,777 --> 00:04:14,885
Teraz widać tekst piosenki!

93
00:04:15,440 --> 00:04:18,890
Zauważyliście coś
w związku z „br”?

94
00:04:19,221 --> 00:04:20,851
Nie ma znacznika końcowego.

95
00:04:20,966 --> 00:04:21,938
Pomyślmy:

96
00:04:21,938 --> 00:04:23,492
podział wiersza nie ma treści,

97
00:04:23,492 --> 00:04:25,861
więc co tu kończyć?

98
00:04:26,006 --> 00:04:28,496
Wystarczy znacznik początkowy.

99
00:04:29,062 --> 00:04:30,361
Gotowe.

100
00:04:30,456 --> 00:04:32,704
Kosmici dowiedzą się o królikach,

101
00:04:32,704 --> 00:04:35,883
a wy poznaliście podstawy HTML.

102
00:04:36,044 --> 00:04:37,158
Kiedy skończę,

103
00:04:37,158 --> 00:04:39,915
pobawcie się,
pozmieniajcie różne rzeczy.

104
00:04:39,976 --> 00:04:43,658
A gdy będziecie gotowi, przejdźcie
do pierwszego zadania w HTML.