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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Dnes, budem
hovoriť trochu o HTML,

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

4
00:00:12,330 --> 00:00:14,450
Vidíte HTML všade v týchto dňoch.

5
00:00:14,450 --> 00:00:17,190
V skutočnosti, ak sa pozeráte na to
videa v prehliadači, ste

6
00:00:17,190 --> 00:00:19,120
vidieť HTML teraz.

7
00:00:19,120 --> 00:00:22,760
HTML nie je programovací jazyk,
skôr, že je to značkovací jazyk používaný

8
00:00:22,760 --> 00:00:25,460
webové prehliadače k ​​vykresľovanie stránok
na internete.

9
00:00:25,460 --> 00:00:30,410
>> Takže môžete sa pýtať, ako sa presne píše
webové stránky vo formáte HTML odlišné

10
00:00:30,410 --> 00:00:33,574
od písania programu v programovaní
jazyk C?

11
00:00:33,574 --> 00:00:38,010
No, C je jazyk s veľmi prísna
syntaktických pravidiel, ktoré musia byť

12
00:00:38,010 --> 00:00:39,880
zostavený pred tým, než môže bežať.

13
00:00:39,880 --> 00:00:43,070
Ak ste niekedy zabudol zahrnúť
bodkočiarku na konci príkazu v

14
00:00:43,070 --> 00:00:46,660
Váš kód v C, viete, o čom hovorím
o v súvislosti s prísnou syntax.

15
00:00:46,660 --> 00:00:50,360
>> Webové prehliadače aj keď sú trochu viac
odpustenie, pokiaľ ide o HTML.

16
00:00:50,360 --> 00:00:53,860
Aj keď vaše HTML nie je syntakticky
správne, vaša stránka môže byť stále

17
00:00:53,860 --> 00:00:57,150
zobraziť prehliadači, ale to by mohlo
nevyzerá, ako ste zamýšľali.

18
00:00:57,150 --> 00:00:59,640
Takže je to vždy lepšie, aby
dodržiavať pravidlá.

19
00:00:59,640 --> 00:01:01,990
Najlepší spôsob, ako získať intuíciu
o tom, ako veci fungujú, je

20
00:01:01,990 --> 00:01:03,300
prejsť príklad.

21
00:01:03,300 --> 00:01:07,360
>> Takže to, čo tu máme, je základnou
plán pre webové stránky.

22
00:01:07,360 --> 00:01:10,690
Asi ste si všimli, veľa vecí
medzi špicaté zátvorky.

23
00:01:10,690 --> 00:01:12,900
No, to sú len tagy.

24
00:01:12,900 --> 00:01:15,810
Tagy podstate informovať webových prehliadačov
že, hej, čo

25
00:01:15,810 --> 00:01:17,150
prichádza vaša cesta.

26
00:01:17,150 --> 00:01:20,770
Pamätajte, že pri každom otvorení
tag, musíte zavrieť raz ste

27
00:01:20,770 --> 00:01:21,750
vykonáva použitím.

28
00:01:21,750 --> 00:01:24,690
>> Tak napríklad, otvorím sekcii
kódu s otvorenou

29
00:01:24,690 --> 00:01:26,960
držiak telo, úzkym držiak.

30
00:01:26,960 --> 00:01:31,280
Potom som pridať nejaký text, v tomto prípade, my
Prvé webové stránky potom, keď som išiel do

31
00:01:31,280 --> 00:01:35,540
Zavri túto sekciu, ja používam takmer
identické tag mimo túto dobu sa

32
00:01:35,540 --> 00:01:37,660
lomítko pred telom.

33
00:01:37,660 --> 00:01:41,140
Všeobecne platí, že sa jedná o formát ste
bude používať vždy, keď sa otvára

34
00:01:41,140 --> 00:01:42,680
a uzatváracie tagy.

35
00:01:42,680 --> 00:01:47,900
Spoločne otvorený tag a koncový tag
skladať, čo sa nazýva prvok.

36
00:01:47,900 --> 00:01:51,870
>> Ak sa pozriete na prvom riadku, budete si musieť vybrať
pozri výkričník nasledovaný

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

38
00:01:53,350 --> 00:01:56,280
To je naozaj len rozprávanie svojho prehliadača
že súbor je webová stránka

39
00:01:56,280 --> 00:01:58,280
písané v HTML.

40
00:01:58,280 --> 00:02:01,970
HTML tag v podstate hovorí,
tu je nejaký HTML.

41
00:02:01,970 --> 00:02:04,950
Potom máme značku hlavy s
názov značky vnútri.

42
00:02:04,950 --> 00:02:09,430
Tag si môžete myslieť ako hlava
obsahujúce HTML kód, ktorý je pre

43
00:02:09,430 --> 00:02:12,670
Prevažná časť vašej webovej stránky je
skutočný obsah.

44
00:02:12,670 --> 00:02:16,700
>> Všeobecne platí, že dal názov vášho
webové stránky tu, ale tam sú niektoré

45
00:02:16,700 --> 00:02:19,350
iné značky, ktoré sa môžu objaviť
aj tu.

46
00:02:19,350 --> 00:02:25,020
Ďalšie je telo vašej webovej stránky je,
skutočné mäso a kosti z vašich webových stránok.

47
00:02:25,020 --> 00:02:28,910
V našom príklade sme len dať jednoduchý
veta, Moje prvé webové stránky,

48
00:02:28,910 --> 00:02:34,100
ktoré, keď narazíme na našich stránkach, bude vyzerať
Trochu niečo také.

49
00:02:34,100 --> 00:02:36,810
Naša webová stránka nie je príliš divný,
ale nebojte sa.

50
00:02:36,810 --> 00:02:39,210
Budeme smrek to čoskoro.

51
00:02:39,210 --> 00:02:44,070
>> Takže nad HTML, budeme vám veľmi
základné šablóny pre webové stránky,

52
00:02:44,070 --> 00:02:46,310
nič vymysleného, ​​len holé kosti.

53
00:02:46,310 --> 00:02:49,160
Ale keď som vytvoriť webové stránky,
Čo keď chcem pridať

54
00:02:49,160 --> 00:02:50,760
obraz, povedzme, ja?

55
00:02:50,760 --> 00:02:52,760
No, môžem to urobiť.

56
00:02:52,760 --> 00:02:55,460
Existuje niekoľko spôsobov, ako
pridať obrázky do vašich stránok.

57
00:02:55,460 --> 00:02:59,780
Ak je obraz v rovnakom priečinku ako
váš súbor HTML, môžete prepojiť so

58
00:02:59,780 --> 00:03:01,950
obrázok cez cestu takhle.

59
00:03:01,950 --> 00:03:05,910
>> Môžete otvoriť s tagom obrazu s následným
by v atribútu ALT u

60
00:03:05,910 --> 00:03:07,240
Zdroj obrazu.

61
00:03:07,240 --> 00:03:12,030
Hodnota ALT atribútu je len niektoré
alternatívny text v prípade, že užívateľ nemôže

62
00:03:12,030 --> 00:03:13,580
viď obrázok.

63
00:03:13,580 --> 00:03:19,680
Prípadne môžete tiež odkazy na
obrázky pomocou plnej URL, ako je tento.

64
00:03:19,680 --> 00:03:24,180
Teraz, že webové stránky v skutočnosti neexistuje,
ale ak tam bol obraz

65
00:03:24,180 --> 00:03:27,760
mi na tejto adrese, mohol by som použiť
zdroj URL obsahovať

66
00:03:27,760 --> 00:03:29,930
jeho obraz na mojich webových stránkach.

67
00:03:29,930 --> 00:03:35,590
Či tak alebo onak, môžete skončiť s oveľa
krajší webové stránky, niečo také.

68
00:03:35,590 --> 00:03:39,730
>> No, to je celkom v pohode, ale nejako som
zo chcieť nejaký text aj tu.

69
00:03:39,730 --> 00:03:43,020
Takže povedzme niečo pridať
veľmi jednoduchá vyššie

70
00:03:43,020 --> 00:03:45,210
obrazu, ako je záhlavie.

71
00:03:45,210 --> 00:03:50,830
Všetko, čo som urobil tak ďaleko, je použiť záhlavie
tag, H1 a zalomenie riadku tag, br.

72
00:03:50,830 --> 00:03:54,900
Tag hlavička je písmo trochu
trochu väčšie a výraznejšie.

73
00:03:54,900 --> 00:03:58,930
Tag zalomenie riadku, na strane druhej
ruka, je celkom v pohode.

74
00:03:58,930 --> 00:04:03,720
Na rozdiel od väčšiny ostatných značiek, nemusíte
otváranie a zatváranie prestávka tag, len

75
00:04:03,720 --> 00:04:05,120
jeden je uvedené vyššie.

76
00:04:05,120 --> 00:04:10,420
To je preto, že prestávka nemá žiadny obsah
, A je teda, prázdny element.

77
00:04:10,420 --> 00:04:14,940
>> Prázdne elementy, ako je táto, môžete otvoriť
a blízko zároveň jednoducho tým, že

78
00:04:14,940 --> 00:04:20,420
vrátane lomítka na
Koniec počiatočné vyhlásenie.

79
00:04:20,420 --> 00:04:24,390
Takže teraz moje webové stránky vyzerá trochu
niečo také.

80
00:04:24,390 --> 00:04:27,410
Lepšie, ale tak nejako pocit,
ako slepej uličky.

81
00:04:27,410 --> 00:04:30,850
Nie je kam inam ísť bokom
z tejto hlavnej stránky.

82
00:04:30,850 --> 00:04:33,075
Dobre, poďme napraviť tým,
vrátane odkazu.

83
00:04:33,075 --> 00:04:36,860
>> Čo budem robiť, je tu použiť
atribút označené A, a aby

84
00:04:36,860 --> 00:04:40,780
obrázok odkaz, povedzme, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Týmto spôsobom, keď niekto klikne na mňa,
ich prehliadač bude zameraná na

86
00:04:44,460 --> 00:04:47,810
ďalšie, pravdepodobne
užitočné webové stránky.

87
00:04:47,810 --> 00:04:51,040
Mal som k minimalizácii veľkosti
text, trochu preto, že naše webové stránky je

88
00:04:51,040 --> 00:04:52,470
stále vyspelejší.

89
00:04:52,470 --> 00:04:54,590
Ale dúfajme, že je to stále jasné.

90
00:04:54,590 --> 00:04:59,460
Moje webové stránky vyzerá presne rovnaký len
teraz, keď som kliknite na obrázok,

91
00:04:59,460 --> 00:05:04,410
môj prehliadač otvorí ďalšie
Karta pre webové stránky CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Napokon, povedzme, že budem štýl
tento web neskôr pomocou CSS.

93
00:05:08,970 --> 00:05:11,730
CSS je to, čo je známe ako
kaskádových štýlov.

94
00:05:11,730 --> 00:05:15,230
A to v podstate poskytuje efektívny
spôsob, ako upraviť a štýl

95
00:05:15,230 --> 00:05:16,910
podobné bloky kódu.

96
00:05:16,910 --> 00:05:21,290
Chcem začať organizovať svoju HTML do
uľahčujú štýl neskôr.

97
00:05:21,290 --> 00:05:26,900
Tu som nastaviť dva rôzne druhy
identifikátory, ktoré vám pomôžu zorganizovať svoj kód.

98
00:05:26,900 --> 00:05:31,170
Použil som atribút ID vnútri
rozdelenie, alebo div tag, a som použil

99
00:05:31,170 --> 00:05:34,120
Atribút Class vnútri
ďalší div tag.

100
00:05:34,120 --> 00:05:37,190
>> ID a triedy atribúty
pracujú podobne.

101
00:05:37,190 --> 00:05:41,210
Jediný rozdiel je môžete mať len
jeden prvok, špecifické ID, ale

102
00:05:41,210 --> 00:05:43,600
ľubovoľný počet prvkov
môžu zdieľať triedu.

103
00:05:43,600 --> 00:05:47,690
Tak napríklad, môžem použiť triedu
obrázok niekoľkokrát, ale nemôžem

104
00:05:47,690 --> 00:05:50,533
vytvoriť ďalšie delenie
s ID vrchole.

105
00:05:50,533 --> 00:05:54,750
Aj keď som išiel do CSS,
iný jazyk bežne používa

106
00:05:54,750 --> 00:05:59,700
spolu s HTML, akonáhle začnem štýl
môj kód s CSS, môžem použiť tieto

107
00:05:59,700 --> 00:06:03,730
organizačné atribúty k vplyvu
estetika mojej webovej stránky.

108
00:06:03,730 --> 00:06:07,600
>> Všetko v rámci divízie vrchole
bude mať podobné stylings alebo akékoľvek

109
00:06:07,600 --> 00:06:12,010
Druhá skupina I skupiny do HTML
trieda obraz bude zdieľať podobný vzhľad.

110
00:06:12,010 --> 00:06:15,700
To je oveľa jednoduchšie ako sa snažiť upravovať
a obrazy štýl alebo bloky

111
00:06:15,700 --> 00:06:17,690
texte samostatne.

112
00:06:17,690 --> 00:06:21,480
>> Tak sme šli cez základy toho, ako
aby webové stránky s HTML.

113
00:06:21,480 --> 00:06:25,280
HTML má veľa ďalších funkcií príliš
že pri spárovaní s inými jazykmi

114
00:06:25,280 --> 00:06:29,220
ako CSS a JavaScriptu, môže naozaj
aby stránky vyniknúť.

115
00:06:29,220 --> 00:06:32,960
Najlepší spôsob, ako sa dostať pohodlne s
HTML je len pachtiť s tým,

116
00:06:32,960 --> 00:06:35,120
vidieť, čo funguje, a čo nie.

117
00:06:35,120 --> 00:06:36,570
>> Volám sa Daven Farnham.

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

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

120
00:06:40,640 --> 00:06:45,690
>> Tak napríklad, môžem použiť
obrázok trieda -

121
00:06:45,690 --> 00:06:48,028
No, tam je tak veľa atribútov.

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

123
00:06:52,500 --> 00:06:53,950
Volám sa Daven Farnham.

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

125
00:06:58,560 --> 00:06:59,810
Chcem povedať CSS.

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

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

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