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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN FARNHAM: Í dag, ég ætla að
tala svolítið um HTML,

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

4
00:00:12,330 --> 00:00:14,450
Þú sérð HTML alls staðar þessa dagana.

5
00:00:14,450 --> 00:00:17,190
Í staðreynd, ef þú ert að horfa á þetta
Vídeó í vafra, þú ert

6
00:00:17,190 --> 00:00:19,120
sjá HTML núna.

7
00:00:19,120 --> 00:00:22,760
HTML er ekki forritunarmál,
Fremur er það Markup Language notuð af

8
00:00:22,760 --> 00:00:25,460
vefur flettitæki til teikna síður
á internetinu.

9
00:00:25,460 --> 00:00:30,410
>> Svo þú might spyrja, hvernig nákvæmlega er að skrifa
vefsíðu í HTML öðruvísi

10
00:00:30,410 --> 00:00:33,574
Frá skrifa forrit í forritun
tungumál eins og C?

11
00:00:33,574 --> 00:00:38,010
Jæja, C er tungumál með mjög ströng
syntactical reglur sem þarf að vera

12
00:00:38,010 --> 00:00:39,880
saman áður en það er hægt að keyra.

13
00:00:39,880 --> 00:00:43,070
Ef þú hefur einhvern tíma gleymt að fela í sér a
semíkommu í lok yfirlýsingu í

14
00:00:43,070 --> 00:00:46,660
C númerið þitt, þú veist hvað ég er að tala
um í sambandi við stranga setningafræði.

15
00:00:46,660 --> 00:00:50,360
>> Vefur flettitæki þó eru aðeins meira
fyrirgefa þegar það kemur að HTML.

16
00:00:50,360 --> 00:00:53,860
Jafnvel ef HTML er ekki setningafræðilega
rétt, þín getur samt verið

17
00:00:53,860 --> 00:00:57,150
birtar í vafranum, en það gæti
ekki líta út eins og þú ætlaðir.

18
00:00:57,150 --> 00:00:59,640
Svo það er alltaf best að
fylgja reglunum.

19
00:00:59,640 --> 00:01:01,990
Besta leiðin til að fá innsæi
um hvernig hlutirnir vinna er að

20
00:01:01,990 --> 00:01:03,300
fara í gegnum dæmi.

21
00:01:03,300 --> 00:01:07,360
>> Svo er það sem við höfum hér undirstöðu
Teikning til a vefur blaðsíða.

22
00:01:07,360 --> 00:01:10,690
Þú tekið sennilega margt
á milli horn sviga.

23
00:01:10,690 --> 00:01:12,900
Jæja, þá eru bara merki.

24
00:01:12,900 --> 00:01:15,810
Tags grundvallaratriðum upplýsa vöfrum
að hey, eitthvað

25
00:01:15,810 --> 00:01:17,150
er koma á þinn hátt.

26
00:01:17,150 --> 00:01:20,770
Mundu þó, þegar þú opnar
tag, þú þarft að loka henni þegar þú ert

27
00:01:20,770 --> 00:01:21,750
gert með það.

28
00:01:21,750 --> 00:01:24,690
>> Svo til dæmis, ég opna kafla
af kóða með opinn

29
00:01:24,690 --> 00:01:26,960
krappi líkami, loka krappi.

30
00:01:26,960 --> 00:01:31,280
I bæta við þá texta, í þessu tilfelli, minn
fyrstu vefsíðu svo þegar ég fór að

31
00:01:31,280 --> 00:01:35,540
loka þessum kafla, ég nota nánast
eins tag nema að þessu sinni með

32
00:01:35,540 --> 00:01:37,660
skástrik fyrir líkamanum.

33
00:01:37,660 --> 00:01:41,140
Almennt, þetta er snið sem þú ert
fara að nota þegar þú ert að opna

34
00:01:41,140 --> 00:01:42,680
og lokun tags.

35
00:01:42,680 --> 00:01:47,900
Saman, opinn tag og endir tag
yrkja það sem er kallað stak.

36
00:01:47,900 --> 00:01:51,870
>> Ef þú horfir á fyrstu línu, munt þú
sjá upphrópunarmerki á eftir

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

38
00:01:53,350 --> 00:01:56,280
Þetta er í raun bara að segja vafranum þínum
að skrá er vefsíðan

39
00:01:56,280 --> 00:01:58,280
skrifuð í HTML.

40
00:01:58,280 --> 00:02:01,970
HTML tag segir í raun,
hér kemur nokkrar HTML.

41
00:02:01,970 --> 00:02:04,950
Þá erum við með höfuðið tag með
A titill tag inni það.

42
00:02:04,950 --> 00:02:09,430
Höfuð tag þú getur hugsað sem
samanstendur HTML kóða sem kemur fyrir

43
00:02:09,430 --> 00:02:12,670
meginhluti vefsíðu þinnar
raunverulegt innihald.

44
00:02:12,670 --> 00:02:16,700
>> Almennt, setja þér titli
Vefsíða hér, þó að það eru sumir

45
00:02:16,700 --> 00:02:19,350
önnur merki sem geta birst
hér eins vel.

46
00:02:19,350 --> 00:02:25,020
Næst kemur líkami vefsíðu þinnar er
Raunveruleg kjöt og bein af vefsvæði þínu.

47
00:02:25,020 --> 00:02:28,910
Í dæminu okkar, höfum við bara að setja upp einfalt
setning, First Webpage My,

48
00:02:28,910 --> 00:02:34,100
sem, ef við hlaupum á síðuna okkar, mun líta
smá eitthvað eins og this.

49
00:02:34,100 --> 00:02:36,810
Vefsíða okkar er ekki of hinsegin,
en ekki hafa áhyggjur.

50
00:02:36,810 --> 00:02:39,210
Við munum greni það upp fljótlega.

51
00:02:39,210 --> 00:02:44,070
>> Svo ofan HTML, munum við gefa þér mjög
undirstöðu sniðmát fyrir vefsíðu,

52
00:02:44,070 --> 00:02:46,310
ekkert fínt, bara Bare Bones.

53
00:02:46,310 --> 00:02:49,160
En ef ég er að búa til vefsíðu,
hvað ef ég vil bæta við

54
00:02:49,160 --> 00:02:50,760
mynd af, segjum, mig?

55
00:02:50,760 --> 00:02:52,760
Jæja, ég get gert það.

56
00:02:52,760 --> 00:02:55,460
There ert a par af leiðir að
bæta myndum inn á síðuna þína.

57
00:02:55,460 --> 00:02:59,780
Ef myndin er í sömu möppu og
HTML skrá, getur þú hlekkur til

58
00:02:59,780 --> 00:03:01,950
Mynd með leið svona.

59
00:03:01,950 --> 00:03:05,910
>> Þú opnar upp með mynd tag fylgt
með í Alt eiginleiki í

60
00:03:05,910 --> 00:03:07,240
uppspretta af myndinni.

61
00:03:07,240 --> 00:03:12,030
Gildi ALT eiginleiki er bara sumir
val texta ef notandi getur ekki

62
00:03:12,030 --> 00:03:13,580
sjá myndina.

63
00:03:13,580 --> 00:03:19,680
Einnig getur þú einnig hlekkur til
ímynd um fullt URL, eins og þetta.

64
00:03:19,680 --> 00:03:24,180
Nú, þessi vefsíða er í raun ekki til,
en ef það væri mynd af

65
00:03:24,180 --> 00:03:27,760
mig á þetta netfang, ég gæti notað
uppspretta URL til að fela

66
00:03:27,760 --> 00:03:29,930
ímynd þess á heimasíðu mína.

67
00:03:29,930 --> 00:03:35,590
Annar hvor vegur, þú endar með mun
fallegri website, eitthvað eins og this.

68
00:03:35,590 --> 00:03:39,730
>> Jæja, það er laglegur kaldur, en ég góður
af vilja sumir texta hér eins og heilbrigður.

69
00:03:39,730 --> 00:03:43,020
Þannig að við skulum bara bæta við eitthvað
frábær einfalt fyrir ofan

70
00:03:43,020 --> 00:03:45,210
mynd, eins og hausinn.

71
00:03:45,210 --> 00:03:50,830
Allt sem ég hef gert hingað til er að nota haus
tag, H1, og línu brot tag, br.

72
00:03:50,830 --> 00:03:54,900
Haus tag gerir letrið smá
aðeins stærri og meira áberandi.

73
00:03:54,900 --> 00:03:58,930
The línu brot tag, hins vegar
vegar er góður af kaldur.

74
00:03:58,930 --> 00:04:03,720
Ólíkt flestum öðrum merkjum, þú þarft ekki
opnun og lokun brot tag, rétt

75
00:04:03,720 --> 00:04:05,120
einn sýnt hér að ofan.

76
00:04:05,120 --> 00:04:10,420
Þetta er vegna þess að brjóta hefur ekkert efni
og er þess vegna, er tómur þáttur.

77
00:04:10,420 --> 00:04:14,940
>> Tóm þættir eins og þetta, þú getur opnað
og loka samtímis einfaldlega með

78
00:04:14,940 --> 00:04:20,420
þ.mt framvirkum skástrik í
af upphaflegum yfirlýsingu.

79
00:04:20,420 --> 00:04:24,390
Svo nú vefsíðan mín lítur svolítið
eitthvað eins og this.

80
00:04:24,390 --> 00:04:27,410
Betri, en mér finnst svona
eins og dauður enda.

81
00:04:27,410 --> 00:04:30,850
Það er hvergi annars að fara til hliðar
frá þessari aðal síðu.

82
00:04:30,850 --> 00:04:33,075
Jæja, við skulum festa það með
þ.mt tengil.

83
00:04:33,075 --> 00:04:36,860
>> Hvað ég ætla að gera hér er að nota sem
eigindi einkenndar með og gera

84
00:04:36,860 --> 00:04:40,780
ímynd tengil á, segjum, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Þannig þegar einhver smellir á mig,
vafra þeirra verður beint að

86
00:04:44,460 --> 00:04:47,810
annað, sennilega meira
gagnlegur, vefur blaðsíða.

87
00:04:47,810 --> 00:04:51,040
Ég hef þurft að draga úr the stærð af the
texta svolítið vegna vefsíðu okkar er

88
00:04:51,040 --> 00:04:52,470
að komast lengra.

89
00:04:52,470 --> 00:04:54,590
En vonandi er það samt ljóst.

90
00:04:54,590 --> 00:04:59,460
Vefsíðan mín lítur nákvæmlega það sama bara
Nú, þegar ég smelli á myndina,

91
00:04:59,460 --> 00:05:04,410
vafrinn minn opnast annar
flipi fyrir CS50.tv vefsíðu.

92
00:05:04,410 --> 00:05:08,970
>> Loksins, segjum að ég ætla að stíl
þetta vefsvæði síðar að nota CSS.

93
00:05:08,970 --> 00:05:11,730
CSS er það sem er þekktur sem
Cascading stíll lak.

94
00:05:11,730 --> 00:05:15,230
Og það veitir í grundvallaratriðum duglegur
leið til að breyta og stíl

95
00:05:15,230 --> 00:05:16,910
svipaðar blokkir af kóða.

96
00:05:16,910 --> 00:05:21,290
Mig langar að byrja að skipuleggja HTML minn til
gera það auðveldara að stíla síðar.

97
00:05:21,290 --> 00:05:26,900
Hér setti ég upp tvær mismunandi tegundir af
heiti til að skipuleggja kóðann minn.

98
00:05:26,900 --> 00:05:31,170
Ég hef notað ID eiginleiki inni a
deild, eða div tag, og ég hef notað er

99
00:05:31,170 --> 00:05:34,120
Class eigindi inni
annar div tag.

100
00:05:34,120 --> 00:05:37,190
>> ID og Class eiginleika
vinna á svipaðan hátt.

101
00:05:37,190 --> 00:05:41,210
Eini munurinn er að þú getur aðeins haft
einn þáttur, tiltekna ID, en

102
00:05:41,210 --> 00:05:43,600
allir tala um þætti
geta deilt bekknum.

103
00:05:43,600 --> 00:05:47,690
Svo til dæmis, ég get notað í bekknum
mynd mörgum sinnum, en ég get ekki

104
00:05:47,690 --> 00:05:50,533
búa á aðra
með ID ofan.

105
00:05:50,533 --> 00:05:54,750
Þó að ég hafi ekki farið inn í CSS,
annað tungumál sem almennt eru notaðar

106
00:05:54,750 --> 00:05:59,700
hlið HTML, þegar ég byrja hönnun
númerið mitt með CSS, get ég notað þetta

107
00:05:59,700 --> 00:06:03,730
skipulagsbreytingar eiginleika til að hafa áhrif
fagurfræði Web Page míns.

108
00:06:03,730 --> 00:06:07,600
>> Allt sviðinu efst
mun hafa svipaða stylings eða einhverju

109
00:06:07,600 --> 00:06:12,010
annar hópur HTML I hóp inn í
flokki ímynd deila svipuðum útlit.

110
00:06:12,010 --> 00:06:15,700
Þetta er miklu auðveldara en að reyna að breyta
og stíl myndir eða blokkir

111
00:06:15,700 --> 00:06:17,690
texta fyrir sig.

112
00:06:17,690 --> 00:06:21,480
>> Þannig að við fórum yfir grunnatriði hvernig
að gera vefsíðu með HTML.

113
00:06:21,480 --> 00:06:25,280
HTML hefur fullt af öðrum aðgerðum of
að þegar par með öðrum tungumálum

114
00:06:25,280 --> 00:06:29,220
eins og CSS og JavaScript, getur raunverulega
gera síðurnar standa út.

115
00:06:29,220 --> 00:06:32,960
Besta leiðin til að fá þægilegri með
HTML er bara að skipta um með það,

116
00:06:32,960 --> 00:06:35,120
sjá hvað virkar og hvað virkar ekki.

117
00:06:35,120 --> 00:06:36,570
>> Mitt nafn er Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Þetta er CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Svo til dæmis, ég get notað
bekknum mynd -

121
00:06:45,690 --> 00:06:48,028
Nei, það eru svo margir eiginleikar.

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

123
00:06:52,500 --> 00:06:53,950
Mitt nafn er Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Þetta er CS 650.

125
00:06:58,560 --> 00:06:59,810
Mig langar að segja CSS.

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

127
00:07:02,325 --> 00:07:03,575
Þetta er CSS.

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