1
00:00:00,000 --> 00:00:06,986

2
00:00:06,986 --> 00:00:10,450
>> Daven Farnham: Dzisiaj mam zamiar
powiedzieć trochę o HTML,

3
00:00:10,450 --> 00:00:12,330
Hypertext Markup Language.

4
00:00:12,330 --> 00:00:14,450
Widzisz HTML wszędzie te dni.

5
00:00:14,450 --> 00:00:17,190
W rzeczywistości, jeśli to oglądasz
wideo w przeglądarce, jesteś

6
00:00:17,190 --> 00:00:19,120
widząc HTML teraz.

7
00:00:19,120 --> 00:00:22,760
HTML nie jest językiem programowania,
raczej, że jest to język znaczników używany przez

8
00:00:22,760 --> 00:00:25,460
przeglądarki internetowe do renderowania stron
w Internecie.

9
00:00:25,460 --> 00:00:30,410
>> Więc możesz zapytać, jak dokładnie jest pisanie
strona w HTML różne

10
00:00:30,410 --> 00:00:33,574
od pisania programów w programowaniu
język jak C?

11
00:00:33,574 --> 00:00:38,010
Cóż, C jest językiem o bardzo surowe
składniowe zasady, które muszą być

12
00:00:38,010 --> 00:00:39,880
opracowywane zanim uruchomić.

13
00:00:39,880 --> 00:00:43,070
Jeśli kiedykolwiek zapomniałeś włączyć
średnik na końcu instrukcji w

14
00:00:43,070 --> 00:00:46,660
Twój kod C, wiesz, o czym mówię
o w odniesieniu do ścisłej składni.

15
00:00:46,660 --> 00:00:50,360
>> Przeglądarki internetowe są jednak nieco bardziej
wyrozumiały, jeśli chodzi o HTML.

16
00:00:50,360 --> 00:00:53,860
Nawet jeśli nie jest składniowo HTML
poprawne, strona może być jeszcze

17
00:00:53,860 --> 00:00:57,150
wyświetlane przez przeglądarkę, ale to może
nie wyglądają jak przeznaczone.

18
00:00:57,150 --> 00:00:59,640
Dlatego zawsze najlepiej
przestrzegać zasad.

19
00:00:59,640 --> 00:01:01,990
Najlepszym sposobem, aby dostać się intuicją
o tym, jak to wszystko działa

20
00:01:01,990 --> 00:01:03,300
przejść przez przykład.

21
00:01:03,300 --> 00:01:07,360
>> Więc co my tu mamy jest podstawowym
plan na stronie internetowej.

22
00:01:07,360 --> 00:01:10,690
Prawdopodobnie zauważyłeś, wiele rzeczy
w nawiasach kątowych.

23
00:01:10,690 --> 00:01:12,900
Cóż, to są tylko tagi.

24
00:01:12,900 --> 00:01:15,810
Tagi zasadzie informuje przeglądarek internetowych
że, hej, coś

25
00:01:15,810 --> 00:01:17,150
jest na Twojej drodze.

26
00:01:17,150 --> 00:01:20,770
Pamiętaj jednak, przy każdym otwarciu
tag, trzeba go zamknąć, gdy jesteś

27
00:01:20,770 --> 00:01:21,750
wykonane przy użyciu go.

28
00:01:21,750 --> 00:01:24,690
>> Tak na przykład, otworzyć sekcję
kodu z otwartym

29
00:01:24,690 --> 00:01:26,960
Korpus wspornika, blisko wspornika.

30
00:01:26,960 --> 00:01:31,280
Następnie dodać jakiś tekst, w tym przypadku, moim
pierwsza strona internetowa, a następnie, gdy poszedłem do

31
00:01:31,280 --> 00:01:35,540
zamknąć ten rozdział, używam prawie
identyczny tag chyba z tego czasu

32
00:01:35,540 --> 00:01:37,660
ukośnik przed ciałem.

33
00:01:37,660 --> 00:01:41,140
W ogóle, to jest format jesteś
będzie korzystać, gdy otwierasz

34
00:01:41,140 --> 00:01:42,680
i zamykanie tagów.

35
00:01:42,680 --> 00:01:47,900
Razem, otwarte tag oraz znacznik końcowy
komponować, co nazywa elementem.

36
00:01:47,900 --> 00:01:51,870
>> Jeśli spojrzeć na pierwszą linię, będziesz
zobacz wykrzyknik następnie

37
00:01:51,870 --> 00:01:53,350
DOCTYPE html.

38
00:01:53,350 --> 00:01:56,280
To jest naprawdę tylko mówi przeglądarkę
że plik jest strona internetowa

39
00:01:56,280 --> 00:01:58,280
napisane w HTML.

40
00:01:58,280 --> 00:02:01,970
Tag HTML zasadniczo mówi,
oto niektóre HTML.

41
00:02:01,970 --> 00:02:04,950
To mamy z głowy tag
Tytuł tag wewnątrz niego.

42
00:02:04,950 --> 00:02:09,430
Tag głowy można myśleć jako
zawierający kod HTML, który przychodzi do

43
00:02:09,430 --> 00:02:12,670
Większość jest Twoja strona internetowa
rzeczywista zawartość.

44
00:02:12,670 --> 00:02:16,700
>> Ogólnie rzecz biorąc, można umieścić swój tytuł
strona tutaj, choć są tacy,

45
00:02:16,700 --> 00:02:19,350
inne znaczniki, które mogą się pojawić
również tutaj.

46
00:02:19,350 --> 00:02:25,020
Następnie przychodzi ciało swojej stronie internetowej,
Rzeczywista mięso i kości z Twojej strony.

47
00:02:25,020 --> 00:02:28,910
W naszym przykładzie mamy tylko umieścić proste
zdanie, moja pierwsza strona internetowa,

48
00:02:28,910 --> 00:02:34,100
które, jeśli prowadzimy naszą witrynę, będzie wyglądać
trochę coś takiego.

49
00:02:34,100 --> 00:02:36,810
Strona internetowa nie jest zbyt dziwne,
ale nie martw się.

50
00:02:36,810 --> 00:02:39,210
Będziemy świerk go wkrótce.

51
00:02:39,210 --> 00:02:44,070
>> Więc przede HTML, damy Ci bardzo
Podstawowy szablon dla strony internetowej,

52
00:02:44,070 --> 00:02:46,310
nic specjalnego, tylko gołe kości.

53
00:02:46,310 --> 00:02:49,160
Ale jeśli mam tworzenia stron internetowych,
Co zrobić, jeśli chcę dodać

54
00:02:49,160 --> 00:02:50,760
obraz, powiedzmy sobie?

55
00:02:50,760 --> 00:02:52,760
Cóż, może to zrobić.

56
00:02:52,760 --> 00:02:55,460
Istnieje kilka sposobów, aby
dodawać zdjęcia do swojej strony.

57
00:02:55,460 --> 00:02:59,780
Jeśli obraz jest w tym samym folderze,
Twój plik HTML, można połączyć się

58
00:02:59,780 --> 00:03:01,950
obraz poprzez drogę tak.

59
00:03:01,950 --> 00:03:05,910
>> Otwierasz tagiem obrazu po
przez w atrybutu alt w

60
00:03:05,910 --> 00:03:07,240
źródło obrazu.

61
00:03:07,240 --> 00:03:12,030
Wartość atrybutu alt jest tylko niektóre
tekst alternatywny w przypadku użytkownik nie może

62
00:03:12,030 --> 00:03:13,580
zobacz zdjęcie.

63
00:03:13,580 --> 00:03:19,680
Alternatywnie, można również odwołują się do
zdjęć za pośrednictwem pełnego adresu URL, takie jak ten.

64
00:03:19,680 --> 00:03:24,180
Teraz, że strona nie istnieje naprawdę,
ale gdyby nie było obraz

65
00:03:24,180 --> 00:03:27,760
mnie pod tym adresem, można używać
URL źródła do włączenia

66
00:03:27,760 --> 00:03:29,930
jego obraz na mojej stronie internetowej.

67
00:03:29,930 --> 00:03:35,590
Tak czy inaczej, w końcu z dużo
ładniejsza strona, coś takiego.

68
00:03:35,590 --> 00:03:39,730
>> Cóż, to jest bardzo fajne, ale rodzaj
z chcesz tekst również tutaj.

69
00:03:39,730 --> 00:03:43,020
Więc po prostu dodać coś
super proste powyżej

70
00:03:43,020 --> 00:03:45,210
obraz, jak w nagłówku.

71
00:03:45,210 --> 00:03:50,830
Wszystko robiłem do tej pory korzystać z nagłówka
tag H1, a przerwa slogan, br.

72
00:03:50,830 --> 00:03:54,900
Tag nagłówek sprawia trochę czcionkę
nieco większe i bardziej widoczne.

73
00:03:54,900 --> 00:03:58,930
Tag linia przerwy, z drugiej
strony, jest całkiem ciekawie.

74
00:03:58,930 --> 00:04:03,720
W przeciwieństwie do większości innych znaczników, nie musisz
Znacznik otwierający i zamykający przerwa, po prostu

75
00:04:03,720 --> 00:04:05,120
pokazany powyżej.

76
00:04:05,120 --> 00:04:10,420
To dlatego, że przerwa nie ma treści
i jest w związku z tym, puste elementem.

77
00:04:10,420 --> 00:04:14,940
>> Puste elementy, takie jak to, można otworzyć
i jednocześnie, po prostu zamknij

78
00:04:14,940 --> 00:04:20,420
w tym ukośnik w
koniec początkowej deklaracji.

79
00:04:20,420 --> 00:04:24,390
Więc teraz moja strona wygląda trochę
coś takiego.

80
00:04:24,390 --> 00:04:27,410
Lepiej, ale to niby czuje
jak ślepy zaułek.

81
00:04:27,410 --> 00:04:30,850
Nie ma dokąd pójść na bok
od strony głównej.

82
00:04:30,850 --> 00:04:33,075
No to naprawić przez
tym linkiem.

83
00:04:33,075 --> 00:04:36,860
>> Co mam zamiar zrobić, to użyć tutaj
atrybut oznaczona i zrobić

84
00:04:36,860 --> 00:04:40,780
Obraz link do, powiedzmy, CS50 telewizor.

85
00:04:40,780 --> 00:04:44,460
W ten sposób, gdy ktoś kliknie na mnie,
ich przeglądarki będą dotyczyć

86
00:04:44,460 --> 00:04:47,810
inny, prawdopodobnie więcej
użyteczne, strona internetowa.

87
00:04:47,810 --> 00:04:51,040
Miałem w celu zminimalizowania rozmiaru
tekst trochę dlatego, że nasza strona internetowa jest

88
00:04:51,040 --> 00:04:52,470
coraz bardziej zaawansowane.

89
00:04:52,470 --> 00:04:54,590
Ale miejmy nadzieję, że to jeszcze jasne.

90
00:04:54,590 --> 00:04:59,460
Moja strona wygląda dokładnie tak samo tylko
teraz, gdy klikam na zdjęcie,

91
00:04:59,460 --> 00:05:04,410
moja przeglądarka otworzy kolejny
zakładka na stronie internetowej CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Wreszcie, powiedzmy, mam zamiar stylu
ta strona później za pomocą CSS.

93
00:05:08,970 --> 00:05:11,730
CSS tzw
Arkusz stylów kaskadowych.

94
00:05:11,730 --> 00:05:15,230
I to w zasadzie zapewnia efektywne
sposób edytować i styl

95
00:05:15,230 --> 00:05:16,910
podobne bloki kodu.

96
00:05:16,910 --> 00:05:21,290
Chcę rozpocząć organizowanie mój HTML na
łatwiej projektować później.

97
00:05:21,290 --> 00:05:26,900
Tutaj skonfigurować dwa różne rodzaje
identyfikatory, które pomogą zorganizować mój kod.

98
00:05:26,900 --> 00:05:31,170
Użyłem atrybut ID wewnątrz
podział lub div tag, i użyłem

99
00:05:31,170 --> 00:05:34,120
Atrybut wewnątrz klasy
kolejny znacznik div.

100
00:05:34,120 --> 00:05:37,190
>> Atrybuty id i class
działają podobnie.

101
00:05:37,190 --> 00:05:41,210
Jedyną różnicą jest to możesz mieć tylko
jeden element konkretny identyfikator, ale

102
00:05:41,210 --> 00:05:43,600
dowolna liczba elementów
może podzielić klasę.

103
00:05:43,600 --> 00:05:47,690
Tak na przykład, można użyć klasy
obraz wiele razy, ale nie mogę

104
00:05:47,690 --> 00:05:50,533
utworzyć inny podział
z ID górze.

105
00:05:50,533 --> 00:05:54,750
Mimo, że nie poszły w CSS,
inny język powszechnie używany

106
00:05:54,750 --> 00:05:59,700
obok HTML, raz zaczynam stylizacji
mój kod CSS, można z nich korzystać

107
00:05:59,700 --> 00:06:03,730
atrybuty organizacyjne do wpływu
estetyka mojej stronie internetowej.

108
00:06:03,730 --> 00:06:07,600
>> Wszystko w ramach podziału górę
będą miały podobne stylizacje lub dowolny

109
00:06:07,600 --> 00:06:12,010
Druga grupa HTML do grupy I
Klasa obraz będzie dzielić podobny wygląd.

110
00:06:12,010 --> 00:06:15,700
Jest to o wiele łatwiejsze niż próbuje edytować
i zdjęcia w stylu lub bloki

111
00:06:15,700 --> 00:06:17,690
tekst indywidualnie.

112
00:06:17,690 --> 00:06:21,480
>> Więc poszliśmy na podstawach, jak
zrobić stronę internetową z HTML.

113
00:06:21,480 --> 00:06:25,280
HTML ma kilka innych funkcji, zbyt
że gdy w połączeniu z innymi językami

114
00:06:25,280 --> 00:06:29,220
jak CSS i JavaScript, może naprawdę
by strony wyróżniać.

115
00:06:29,220 --> 00:06:32,960
Najlepszym sposobem, aby się komfortowo
HTML jest po prostu poeksperymentować z nim,

116
00:06:32,960 --> 00:06:35,120
zobaczyć, co działa, a co nie.

117
00:06:35,120 --> 00:06:36,570
>> Nazywam się Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
To CS50.

119
00:06:37,820 --> 00:06:40,640

120
00:06:40,640 --> 00:06:45,690
>> Tak na przykład, można użyć
Klasa obiektu -

121
00:06:45,690 --> 00:06:48,028
Nie, nie jest tak wiele atrybutów.

122
00:06:48,028 --> 00:06:52,500

123
00:06:52,500 --> 00:06:53,950
Nazywam się Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
To jest CS 650.

125
00:06:58,560 --> 00:06:59,810
Chcę powiedzieć, CSS.

126
00:06:59,810 --> 00:07:02,325

127
00:07:02,325 --> 00:07:03,575
To jest CSS.

128
00:07:03,575 --> 00:07:05,408