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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN Farnham: Danes bom
govori malo o HTML,

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

4
00:00:12,330 --> 00:00:14,450
Vidiš HTML povsod v teh dneh.

5
00:00:14,450 --> 00:00:17,190
V bistvu, če gledaš to
video v brskalniku, ste

6
00:00:17,190 --> 00:00:19,120
videnje HTML zdaj.

7
00:00:19,120 --> 00:00:22,760
HTML ni programski jezik,
ampak to je označevalni jezik, ki ga uporablja

8
00:00:22,760 --> 00:00:25,460
brskalniki napravijo strani
na internetu.

9
00:00:25,460 --> 00:00:30,410
>> Tako da boste morda vprašati, kako točno se pisno
spletna stran v HTML drugačna

10
00:00:30,410 --> 00:00:33,574
od pisanja programa v programiranju
jezik kot C?

11
00:00:33,574 --> 00:00:38,010
No, C je jezik z zelo stroga
sintaktične pravila, da mora biti

12
00:00:38,010 --> 00:00:39,880
zbrani pred začetkom delovanja.

13
00:00:39,880 --> 00:00:43,070
Če ste kdaj pozabil vključiti
podpičje na koncu stavka v

14
00:00:43,070 --> 00:00:46,660
vaša C kodo, veš kaj govorim
o v zvezi s strogo sintakso.

15
00:00:46,660 --> 00:00:50,360
>> Spletni brskalniki, čeprav so nekoliko bolj
odpuščati, ko gre za HTML.

16
00:00:50,360 --> 00:00:53,860
Tudi če je vaš HTML ni skladenjsko
pravilno, lahko vaša stran še vedno

17
00:00:53,860 --> 00:00:57,150
prikaže brskalnika, vendar bi
Ni videti, kot ste nameravali.

18
00:00:57,150 --> 00:00:59,640
Zato je vedno najbolje, da
upoštevajo pravila.

19
00:00:59,640 --> 00:01:01,990
Najboljši način, da dobite intuicijo
o tem, kako stvari delujejo, je

20
00:01:01,990 --> 00:01:03,300
iti skozi primer.

21
00:01:03,300 --> 00:01:07,360
>> Torej, kaj imamo tukaj je osnovna
načrt za spletno stran.

22
00:01:07,360 --> 00:01:10,690
Verjetno ste opazili veliko stvari
med kotne oklepaje.

23
00:01:10,690 --> 00:01:12,900
No, to so samo oznake.

24
00:01:12,900 --> 00:01:15,810
Tags bistvu obvesti spletnih brskalnikov
da, hej, kaj

25
00:01:15,810 --> 00:01:17,150
prihaja svojo pot.

26
00:01:17,150 --> 00:01:20,770
Ne pozabite, čeprav, ko odprete
tag, boste morali, da ga zaprete, ko ste

27
00:01:20,770 --> 00:01:21,750
storiti, da jo uporabljajo.

28
00:01:21,750 --> 00:01:24,690
>> Tako na primer, sem odprl oddelek
kode z odprto

29
00:01:24,690 --> 00:01:26,960
Nosilec telo, zaklepaj.

30
00:01:26,960 --> 00:01:31,280
Nato sem dodati nekaj besedila, v tem primeru moj
prva spletna stran, potem ko sem šel v

31
00:01:31,280 --> 00:01:35,540
zapreti to poglavje, ki ga uporabljam skoraj
identična tag razen tega časa s

32
00:01:35,540 --> 00:01:37,660
poševnica pred telesom.

33
00:01:37,660 --> 00:01:41,140
Na splošno velja, da je to oblika ste
boste uporabljali vsakič, ko se odpirajo

34
00:01:41,140 --> 00:01:42,680
in zapiranje oznake.

35
00:01:42,680 --> 00:01:47,900
Skupaj odprt tag in končna oznaka
sestaviti kar se imenuje element.

36
00:01:47,900 --> 00:01:51,870
>> Če pogledaš na prvi vrstici, boste
glej klicaj, ki mu sledi

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

38
00:01:53,350 --> 00:01:56,280
To je res samo povedal brskalnik
da je datoteka spletna stran

39
00:01:56,280 --> 00:01:58,280
napisana v HTML.

40
00:01:58,280 --> 00:02:01,970
HTML tag v bistvu pravi,
tukaj prihaja nekaj HTML.

41
00:02:01,970 --> 00:02:04,950
Potem smo imeli oznako glavo z
tag Naslovno znotraj njega.

42
00:02:04,950 --> 00:02:09,430
Glava tag si lahko zamislite kot
vsebuje HTML kodo, ki pride za

43
00:02:09,430 --> 00:02:12,670
Večji del vaše spletne strani je
dejanska vsebina.

44
00:02:12,670 --> 00:02:16,700
>> Na splošno, si dal naslov vašega
Spletna stran tukaj, čeprav obstajajo nekateri

45
00:02:16,700 --> 00:02:19,350
druge oznake, ki se lahko pojavijo
tudi tukaj.

46
00:02:19,350 --> 00:02:25,020
Sledi telo vaše spletne strani je,
Dejanska meso in kosti vaše spletne strani.

47
00:02:25,020 --> 00:02:28,910
V našem primeru smo pravkar dal preprost
stavek, Moj prvi spletni strani,

48
00:02:28,910 --> 00:02:34,100
ki bi, če tečemo našo spletno stran, bo videti
Malo kaj takega.

49
00:02:34,100 --> 00:02:36,810
Naša spletna stran ni preveč queer,
vendar ne skrbite.

50
00:02:36,810 --> 00:02:39,210
Bomo smreka kmalu.

51
00:02:39,210 --> 00:02:44,070
>> Torej zgoraj HTML, bomo vam zelo
Osnovni model za spletno stran,

52
00:02:44,070 --> 00:02:46,310
Nič posebnega, samo gole kosti.

53
00:02:46,310 --> 00:02:49,160
Ampak, če sem oblikovanje spletnih strani,
Kaj pa, če želim dodati

54
00:02:49,160 --> 00:02:50,760
slika, recimo, sam?

55
00:02:50,760 --> 00:02:52,760
No, to lahko naredim.

56
00:02:52,760 --> 00:02:55,460
Obstaja nekaj načinov, da
dodajanje slik na vašo spletno stran.

57
00:02:55,460 --> 00:02:59,780
Če je slika v isti mapi kot
vaš HTML datoteke, ki jih lahko povežete s

58
00:02:59,780 --> 00:03:01,950
Podoba preko poti, kot je ta.

59
00:03:01,950 --> 00:03:05,910
>> Odpreš z oznako slike, ki mu sledi
ki ga v Alt atribut v

60
00:03:05,910 --> 00:03:07,240
vir slike.

61
00:03:07,240 --> 00:03:12,030
Vrednost atributa je le nekaj
Nadomestno besedilo v primeru uporabnik ne more

62
00:03:12,030 --> 00:03:13,580
glej sliko.

63
00:03:13,580 --> 00:03:19,680
Lahko pa tudi povezava
slik preko polnega URL, je to všeč.

64
00:03:19,680 --> 00:03:24,180
Zdaj, da je spletna stran v resnici ne obstaja,
vendar, če je bilo slika

65
00:03:24,180 --> 00:03:27,760
me na tem naslovu, sem lahko uporabite
vir URL za vključitev

66
00:03:27,760 --> 00:03:29,930
njegova slika na moji spletni strani.

67
00:03:29,930 --> 00:03:35,590
Kakorkoli, ste na koncu z veliko
lepša spletne strani, nekaj takega.

68
00:03:35,590 --> 00:03:39,730
>> No, to je zelo kul, ampak nekako sem
o želijo nekaj besedila tudi tukaj.

69
00:03:39,730 --> 00:03:43,020
Tako da je le dodajte nekaj
Super preprost zgoraj

70
00:03:43,020 --> 00:03:45,210
slika, kot v glavi.

71
00:03:45,210 --> 00:03:50,830
Vse, kar sem naredil, je uporaba glavo
tag, H1 in prelom vrstice tag, br.

72
00:03:50,830 --> 00:03:54,900
Header tag naredi pisavo malo
malo večji in bolj vidno.

73
00:03:54,900 --> 00:03:58,930
Prelom vrstice tag, na drugi strani
strani pa je nekako kul.

74
00:03:58,930 --> 00:04:03,720
Za razliko od večine drugih oznak, nimate
odpiranje in zapiranje odmor tag, samo

75
00:04:03,720 --> 00:04:05,120
ena je prikazano zgoraj.

76
00:04:05,120 --> 00:04:10,420
To je zato, ker ima odmor nobene vsebine
in je zato, prazna element.

77
00:04:10,420 --> 00:04:14,940
>> Prazne elemente, kot je ta, lahko odprete
in hkrati blizu preprosto z

78
00:04:14,940 --> 00:04:20,420
vključno s poševnico na
Konec prvotni deklaraciji.

79
00:04:20,420 --> 00:04:24,390
Torej, zdaj moja spletna stran izgleda malo
kaj takega.

80
00:04:24,390 --> 00:04:27,410
Bolje pa je, nekako čuti
kot slepa ulica.

81
00:04:27,410 --> 00:04:30,850
Nikamor drugam razveljavitev
od tega glavno stran.

82
00:04:30,850 --> 00:04:33,075
No, da se določi, da ga
vključno s povezavo.

83
00:04:33,075 --> 00:04:36,860
>> Kaj bom naredil tukaj je uporaba
atribut, označenih z in da

84
00:04:36,860 --> 00:04:40,780
Podoba povezavo do, recimo, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Na ta način, vsakič, ko kdo klikne na mene,
njihov brskalnik bodo usmerjeni

86
00:04:44,460 --> 00:04:47,810
drugo, verjetno bolj
koristno, spletna stran.

87
00:04:47,810 --> 00:04:51,040
Sem imel, da se zmanjša velikost
besedilo, malo zato, ker je naša spletna stran

88
00:04:51,040 --> 00:04:52,470
postajajo vse bolj napredni.

89
00:04:52,470 --> 00:04:54,590
Upam pa, da je še vedno jasna.

90
00:04:54,590 --> 00:04:59,460
Moja spletna stran izgleda popolnoma enako le
Zdaj, ko sem kliknite na sliko,

91
00:04:59,460 --> 00:05:04,410
moj brskalnik bo odprl drugo
Kartica za spletno stran CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Nazadnje, recimo, da bom slogu
Ta spletna stran kasneje z uporabo CSS.

93
00:05:08,970 --> 00:05:11,730
CSS je tisto, kar je znano kot
kaskadno slog stanja.

94
00:05:11,730 --> 00:05:15,230
In se v osnovi zagotavlja učinkovito
način za urejanje in stil

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

96
00:05:16,910 --> 00:05:21,290
Rada bi začela organizirati svoj HTML
lažje slog kasneje.

97
00:05:21,290 --> 00:05:26,900
Tukaj sem ustanovil dve različni vrsti
identifikatorje, ki vam pomaga organizirati svoj zbornik.

98
00:05:26,900 --> 00:05:31,170
Uporabil sem osebno lastnost notranjosti
delitev ali div tag, in sem se uporabljajo

99
00:05:31,170 --> 00:05:34,120
Razred atributa znotraj
drugo div tag.

100
00:05:34,120 --> 00:05:37,190
>> ID in razred atributi
delujejo podobno.

101
00:05:37,190 --> 00:05:41,210
Edina razlika je, da lahko le
en element, posebno ID, vendar

102
00:05:41,210 --> 00:05:43,600
poljubno število elementov
lahko delijo razred.

103
00:05:43,600 --> 00:05:47,690
Tako, na primer, lahko uporabite razred
slikovnih večkrat, ampak ne morem

104
00:05:47,690 --> 00:05:50,533
ustvarite nov oddelek
z ID vrhu.

105
00:05:50,533 --> 00:05:54,750
Čeprav nisem šla v CSS,
drug jezik, pogosto uporablja

106
00:05:54,750 --> 00:05:59,700
poleg HTML, ko začnem styling
moja koda s CSS, lahko uporabite te

107
00:05:59,700 --> 00:06:03,730
organizacijske pripisuje vplivu
estetika moji spletni strani.

108
00:06:03,730 --> 00:06:07,600
>> Vse, kar je v okviru delitve na vrh
bo imel podobne stylings ali katerokoli

109
00:06:07,600 --> 00:06:12,010
Druga skupina I skupina HTML v
Razred slike bodo delili podoben videz.

110
00:06:12,010 --> 00:06:15,700
To je veliko lažje kot poskuša urediti
in slike slog ali bloki

111
00:06:15,700 --> 00:06:17,690
besedilo posamično.

112
00:06:17,690 --> 00:06:21,480
>> Torej smo šli čez osnove o tem, kako
narediti spletno stran s HTML.

113
00:06:21,480 --> 00:06:25,280
HTML ima kup drugih funkcij preveč
da, ko seznanjene z drugimi jeziki

114
00:06:25,280 --> 00:06:29,220
kot so CSS in JavaScript, lahko resnično
da strani izstopajo.

115
00:06:29,220 --> 00:06:32,960
Najboljši način, da bi dobili udobno s
HTML je le igral z njo,

116
00:06:32,960 --> 00:06:35,120
glej, kaj deluje in kaj ne.

117
00:06:35,120 --> 00:06:36,570
>> Moje ime je 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
>> Tako, na primer, lahko uporabite
Razred sliko -

121
00:06:45,690 --> 00:06:48,028
Ne, obstaja toliko atributi.

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

123
00:06:52,500 --> 00:06:53,950
Moje ime je Daven Farnham.

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

125
00:06:58,560 --> 00:06:59,810
Hočem reči, 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