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

2
00:00:06,100 --> 00:00:08,790
>> DOUG LLOYD: Så vi tillbringade
about-- om min matte är rätt,

3
00:00:08,790 --> 00:00:11,900
och jag tror att titta back-- Jag tror
Vi tillbringade omkring 35 videor talar

4
00:00:11,900 --> 00:00:15,139
om olika aspekter av C, kanske
lite mer, kanske lite mindre.

5
00:00:15,139 --> 00:00:16,930
Och vi inte täcker
allt i C, men vi

6
00:00:16,930 --> 00:00:21,170
omfattas en stor del av den
språk, den stora majoriteten av den,

7
00:00:21,170 --> 00:00:22,882
säkert för vanliga användningsområden.

8
00:00:22,882 --> 00:00:25,090
Nu ska vi prata
om ett annat språk, HTML.

9
00:00:25,090 --> 00:00:28,180
Och vi kommer att täcka
det på bara en video.

10
00:00:28,180 --> 00:00:29,340
>> Men det kommer att vara OK.

11
00:00:29,340 --> 00:00:31,410
Det kommer att faktiskt bli
något du kommer att vänja sig vid.

12
00:00:31,410 --> 00:00:33,535
Nu när du har
grunderna i ett språk,

13
00:00:33,535 --> 00:00:35,776
det är faktiskt ganska lätt
att börja lära andra.

14
00:00:35,776 --> 00:00:37,650
Så vi kommer att börja
till steg lite tillbaka

15
00:00:37,650 --> 00:00:43,340
och släta över de grundläggande
skillnader mellan dessa språk

16
00:00:43,340 --> 00:00:45,750
och liksom lämnar du till den.

17
00:00:45,750 --> 00:00:48,530
Det finns en hel del riktigt bra
resurser på internet, som

18
00:00:48,530 --> 00:00:51,279
vi kommer att börja styra dig
mot eftersom Internet är

19
00:00:51,279 --> 00:00:53,340
en stor databas med information.

20
00:00:53,340 --> 00:00:55,960
Och så det är inte som du kommer
vara förlora nödvändigtvis

21
00:00:55,960 --> 00:00:58,349
genom att inte ha den information
omfattas av en video.

22
00:00:58,349 --> 00:01:00,640
Du kommer fortfarande att kunna få
allt du behöver och användning

23
00:01:00,640 --> 00:01:03,590
den kunskap du har redan
byggts upp genom att förstå C

24
00:01:03,590 --> 00:01:07,130
att göra inlärningskurvan för dessa
andra språk faktiskt mycket planare.

25
00:01:07,130 --> 00:01:08,640
Jag lovar.

26
00:01:08,640 --> 00:01:12,770
>> Men låt oss tala om ett språk
det är verkligen grundläggande för varje webbsida

27
00:01:12,770 --> 00:01:14,830
sida, vilket är HTML.

28
00:01:14,830 --> 00:01:18,230
HTML är Hyper Text Markup Language.

29
00:01:18,230 --> 00:01:22,700
HTML är ett språk, men det är
inte ett programmeringsspråk.

30
00:01:22,700 --> 00:01:23,900
>> HTML har inte variabler.

31
00:01:23,900 --> 00:01:26,430
Det har inte logik eller
funktioner eller nåt sånt.

32
00:01:26,430 --> 00:01:30,301
Vi kan inte göra något
programmering i sig i HTML.

33
00:01:30,301 --> 00:01:32,300
Ibland hör du
människor beskriver sig själva

34
00:01:32,300 --> 00:01:35,710
som HTML-programmerare, som
är inte helt korrekt.

35
00:01:35,710 --> 00:01:37,980
Vi kan inte skriva HTML-program.

36
00:01:37,980 --> 00:01:40,770
>> HTML är bara används för att markera text.

37
00:01:40,770 --> 00:01:42,690
Det kallas en markup language.

38
00:01:42,690 --> 00:01:47,680
Och vad detta does-- denna markup--
Vi använder taggar i HTML och dessa tags--

39
00:01:47,680 --> 00:01:51,600
detta markup-- semantiskt
definierar strukturen på en sida

40
00:01:51,600 --> 00:01:55,280
och orsakar klartext att
existerar mellan taggar tolkas

41
00:01:55,280 --> 00:01:57,320
av webbläsare på olika sätt.

42
00:01:57,320 --> 00:02:00,370
Och kanske är det bästa för att förklara
detta i form av en illustration.

43
00:02:00,370 --> 00:02:06,450
>> Här är en mycket enkel HTML-sida, inte
en HTML-program, återigen, en HTML-sida.

44
00:02:06,450 --> 00:02:08,680
Och vi vet att det är en
HTML-sida eftersom vi har

45
00:02:08,680 --> 00:02:11,480
avgränsas allt med HTML-taggar.

46
00:02:11,480 --> 00:02:13,850
Så detta är vad en HTML-tagg ser ut.

47
00:02:13,850 --> 00:02:15,870
Det är mellan vinkelfästen.

48
00:02:15,870 --> 00:02:18,570
Och lägg märke på toppen har vi
HTML och längst ned,

49
00:02:18,570 --> 00:02:21,400
efter att vi har gjort det som är
uppenbarligen en hel del andra HTML,

50
00:02:21,400 --> 00:02:24,310
Vi har vinkelparentes snedstreck HTML.

51
00:02:24,310 --> 00:02:29,262
Så den sortens är gränsen
mellan vad som är HTML och vad som inte.

52
00:02:29,262 --> 00:02:32,220
Och naturligtvis, konventionellt, bara
som ni skrev alla dina C-program

53
00:02:32,220 --> 00:02:35,300
med punkt C förlängningar,
alla dina HTML-filer

54
00:02:35,300 --> 00:02:37,909
kommer att sluta med punkt HTML förlängningar.

55
00:02:37,909 --> 00:02:39,200
Men det är mer som händer här.

56
00:02:39,200 --> 00:02:40,658
Vi har inte bara dessa HTML-taggar.

57
00:02:40,658 --> 00:02:44,010
Vi har tydligen detta
som kallas ett huvud tag.

58
00:02:44,010 --> 00:02:46,010
Tja, OK, vad är det?

59
00:02:46,010 --> 00:02:48,550
>> Väl kanske det är bäst att
skilja genom en kropp,

60
00:02:48,550 --> 00:02:50,590
kroppen är innehållet på webbsidan.

61
00:02:50,590 --> 00:02:55,860
Så kanske huvudet taggen definierar grejer
som inte är i webbläsarfönstret korrekt,

62
00:02:55,860 --> 00:02:59,410
men på något sätt är viktigt för vår
webbsidan som återges korrekt.

63
00:02:59,410 --> 00:03:02,490
Exempelvis insidan av
head tag vi har rubriktaggar.

64
00:03:02,490 --> 00:03:05,500
>> Så titel är hallå världen,
som är faktiskt kommer att vara vad

65
00:03:05,500 --> 00:03:08,797
dyker upp i fliken i Chrome
eller safari eller Firefox--

66
00:03:08,797 --> 00:03:11,880
vilken webbläsare du prefer-- det är
vad som kommer att dyka upp i titeln.

67
00:03:11,880 --> 00:03:14,800
Och innan flikar det skulle visa
i hela webbläsarfönstret

68
00:03:14,800 --> 00:03:19,710
och du kan bara ha en sida
öppnas i ett webbläsarfönster i taget.

69
00:03:19,710 --> 00:03:22,160
Så det kommer att bli det
titeln på min sida upp på fliken

70
00:03:22,160 --> 00:03:24,600
eller webbläsarfönstret bar, hallå världen.

71
00:03:24,600 --> 00:03:28,611
Och sedan innehållet i mitt
webbsidan kommer att vara världs, hej.

72
00:03:28,611 --> 00:03:31,360
Så låt oss ta en titt på vad några
sak som detta skulle kunna se ut.

73
00:03:31,360 --> 00:03:33,210
Detta är en ganska enkel HTML-sida.

74
00:03:33,210 --> 00:03:35,970
Så jag är här i min CS50 IDE och
Jag har zoomat in lite.

75
00:03:35,970 --> 00:03:38,290
Och jag ska bara
öppna upp hej dot HTML

76
00:03:38,290 --> 00:03:42,000
och visa dig att det är ganska mycket
sidans innehåll som vi såg tidigare.

77
00:03:42,000 --> 00:03:45,240
Mina enkla HTML, huvud taggar,
rubriktaggar, kropp, och så vidare.

78
00:03:45,240 --> 00:03:47,320
Jag har indragna vara rena.

79
00:03:47,320 --> 00:03:51,530
>> Och vad jag kan göra i mitt
IDE är bara förhandsgranska sidan.

80
00:03:51,530 --> 00:03:52,630
Och det går vi.

81
00:03:52,630 --> 00:03:56,070
Innehållet på min sida är världs,
hej, och jag kan inte se något

82
00:03:56,070 --> 00:03:58,500
in från huvudet taggar där.

83
00:03:58,500 --> 00:03:59,980
Det är bara innehållet i kroppen.

84
00:03:59,980 --> 00:04:00,780
Världen, hej.

85
00:04:00,780 --> 00:04:03,700
Och återigen kroppen bara
sade värld, hej.

86
00:04:03,700 --> 00:04:06,160
Den andra delen saknas.

87
00:04:06,160 --> 00:04:07,610
>> Så det är egentligen allt det är.

88
00:04:07,610 --> 00:04:11,370
Detta är en mycket enkel grundläggande HTML-sida.

89
00:04:11,370 --> 00:04:14,280
Nu har jag indragen min HTML till
vara riktigt nice och organiserade,

90
00:04:14,280 --> 00:04:15,840
men jag tror faktiskt inte.

91
00:04:15,840 --> 00:04:17,959
Jag skulle kunna göra det ser ganska ful.

92
00:04:17,959 --> 00:04:19,467
Och detta skulle fortfarande fungera.

93
00:04:19,467 --> 00:04:21,050
Detta skulle vara exakt samma webbsida.

94
00:04:21,050 --> 00:04:23,100
Jag har precis blivit kvitt
alla blanktecken.

95
00:04:23,100 --> 00:04:24,820
>> Som det visar sig, är blank uppgifter.

96
00:04:24,820 --> 00:04:28,540
Och så när vi skickar data från
avsändare till mottagare, från server

97
00:04:28,540 --> 00:04:30,670
till kund kostar uppgifter pengar.

98
00:04:30,670 --> 00:04:34,460
Och så bli av blank
är faktiskt en bra idé

99
00:04:34,460 --> 00:04:37,320
om du är någon som tjänar
upp en hel del webbinnehåll.

100
00:04:37,320 --> 00:04:39,820
Det är en dålig idé om du är
någon som är att lära sig det här

101
00:04:39,820 --> 00:04:41,528
och du vill ha
det välorganiserade.

102
00:04:41,528 --> 00:04:43,810
Detta är mycket lättare att tolka än detta.

103
00:04:43,810 --> 00:04:45,540
Men det är funktionellt identiska.

104
00:04:45,540 --> 00:04:48,720
>> Fördjupningen och sånt
egentligen inte roll i HTML.

105
00:04:48,720 --> 00:04:53,634
Allt som räknas är öppna taggar och
stänga taggar i rätt ordning.

106
00:04:53,634 --> 00:04:55,050
Lägg märke till vad som hände här, men.

107
00:04:55,050 --> 00:04:58,450
Den uppmärkning ger oss ett sätt att
kommunicera till extra information

108
00:04:58,450 --> 00:04:59,940
om vad vi har skrivit.

109
00:04:59,940 --> 00:05:03,130
Hello, World del var
tolkas som titeln.

110
00:05:03,130 --> 00:05:06,410
Och världen, var hej del
tolkas som innehållet

111
00:05:06,410 --> 00:05:09,090
eller vad som borde vara
synlig på min webbsida.

112
00:05:09,090 --> 00:05:12,167
>> Det finns över 100 av dessa olika
taggar och massor av stora resurser

113
00:05:12,167 --> 00:05:13,000
nätet för att hitta dem.

114
00:05:13,000 --> 00:05:14,900
Vi kommer att tala om en
några av dem i den här videon, vissa

115
00:05:14,900 --> 00:05:16,440
av de riktigt grundläggande grejer.

116
00:05:16,440 --> 00:05:18,440
Men vi tänker inte prata
om det hela eftersom det

117
00:05:18,440 --> 00:05:20,250
skulle vara uttömmande att göra det.

118
00:05:20,250 --> 00:05:22,880
>> En annan sak du kan göra, men,
är öppna utvecklingsverktyg.

119
00:05:22,880 --> 00:05:26,069
Och om du minns från
vår video på HTTP,

120
00:05:26,069 --> 00:05:27,860
Jag förklarade hur man öppnar
upp utvecklarverktyg.

121
00:05:27,860 --> 00:05:32,020
I Chrome är det oftast F12
att öppna upp utvecklaren verktygsfältet.

122
00:05:32,020 --> 00:05:35,909
Då istället för att välja nätverket
fliken kan du välja fliken Elements.

123
00:05:35,909 --> 00:05:37,700
Och om du laddar en webbsida
sida, kommer du faktiskt

124
00:05:37,700 --> 00:05:40,280
se HTML som skapar den webbsidan.

125
00:05:40,280 --> 00:05:44,090
Och så att du kan lära dig mycket om HTML
genom att titta på dina favoritwebbplatser

126
00:05:44,090 --> 00:05:48,474
och se hur de bygger
olika delar av dem som du vill.

127
00:05:48,474 --> 00:05:50,890
Så kanske det är denna coola
mönster eller nåt sånt.

128
00:05:50,890 --> 00:05:52,140
Hur gör de det med HTML?

129
00:05:52,140 --> 00:05:55,630
Tja du kan bara öppna upp din utvecklare
verktyg och sväva över det elementet

130
00:05:55,630 --> 00:05:57,700
och se exakt vad HTML gör det.

131
00:05:57,700 --> 00:05:59,450
Så det är en riktigt
bra sätt att lära sig HTML,

132
00:05:59,450 --> 00:06:02,330
och jag rekommenderar starkt att
du gör det både att lära sig HTML

133
00:06:02,330 --> 00:06:04,930
och även att lära sig lite
lite om några av alternativen

134
00:06:04,930 --> 00:06:07,050
tillgängliga för dig i
utvecklingsverktyg, som

135
00:06:07,050 --> 00:06:10,200
kommer säkert komma väl till pass som
du börjar göra mer intensiv webben

136
00:06:10,200 --> 00:06:11,090
programmering.

137
00:06:11,090 --> 00:06:14,080
>> Så låt oss ta en titt på en
par vanliga HTML-taggar.

138
00:06:14,080 --> 00:06:17,210
Och vi kommer att hoppa och ta en titt på
vad dessa taggar kommer också att göra

139
00:06:17,210 --> 00:06:20,490
som genom att titta på några filer i min IDE.

140
00:06:20,490 --> 00:06:26,330
Så här är tre mycket grundläggande taggar för
tweaking det visuella utseendet på text.

141
00:06:26,330 --> 00:06:29,050
Det finns B taggar, jag taggar, och U-taggar.

142
00:06:29,050 --> 00:06:33,170
Respektive vad de gör är
gör texten mellan dem i fetstil,

143
00:06:33,170 --> 00:06:35,430
kursiv och understrykning.

144
00:06:35,430 --> 00:06:40,430
Så låt oss se vad det skulle se
som på en verklig webbsida i min IDE.

145
00:06:40,430 --> 00:06:43,390
>> Så här i min IDE har jag
fil som heter BIU dot HTML.

146
00:06:43,390 --> 00:06:46,770
BIU dot HTML bara vara
fet, kursiv, understrykning.

147
00:06:46,770 --> 00:06:47,830
Jag ska öppna den.

148
00:06:47,830 --> 00:06:51,810
>> Och vi ser att här jag
har den här texten är B taggar fet.

149
00:06:51,810 --> 00:06:54,010
Denna text är jag taggar kursiv.

150
00:06:54,010 --> 00:06:56,307
Och den här texten är U-taggar strukna.

151
00:06:56,307 --> 00:06:57,640
Vad detta kommer att se ut?

152
00:06:57,640 --> 00:06:59,473
Bra igen, har allt jag
att göra är att gå hit

153
00:06:59,473 --> 00:07:04,690
min webbläsare, min fil webbläsare, klickar
Förhandsgranska och detta är vad som kommer upp.

154
00:07:04,690 --> 00:07:07,520
>> Texten i mellan B
taggar är verkligen nu fetstil.

155
00:07:07,520 --> 00:07:10,720
Texten i mellan I
taggar är verkligen nu kursiv.

156
00:07:10,720 --> 00:07:14,634
Och texten i mellan U
taggar är verkligen nu understruken.

157
00:07:14,634 --> 00:07:15,550
Så det är ganska bra.

158
00:07:15,550 --> 00:07:18,450
Vi vet nu hur man gör text
ser lite mer fantasi

159
00:07:18,450 --> 00:07:20,360
eller rita tonvikt på vissa saker.

160
00:07:20,360 --> 00:07:25,530
Ytterligare ett par vanliga taggar här är
punkt taggar, P, och header taggar,

161
00:07:25,530 --> 00:07:27,980
som jag har framfört här som HX.

162
00:07:27,980 --> 00:07:32,520
>> Dessa P-taggar, dessa punkt taggar,
bryta din text upp i stycken.

163
00:07:32,520 --> 00:07:34,646
Det räcker inte att bara
trycka Enter och lämna utrymmen

164
00:07:34,646 --> 00:07:37,186
eftersom en dator är bara att
att göra vad du säger den att göra

165
00:07:37,186 --> 00:07:39,450
och det ignorerar vit
utrymme för det mesta.

166
00:07:39,450 --> 00:07:41,636
Så vi kan inte bara trycka Enter
och förväntar oss att vår dator

167
00:07:41,636 --> 00:07:43,760
tolka att vi vill
att starta ett nytt stycke.

168
00:07:43,760 --> 00:07:47,670
Vi måste mycket tydligt säga detta
är en paragraph-- detta är another--

169
00:07:47,670 --> 00:07:50,740
genom att innesluta var och en i en uppsättning av p-taggar.

170
00:07:50,740 --> 00:07:54,560
>> Och vi har också dessa alternativ
för H taggar, dessa header taggar.

171
00:07:54,560 --> 00:07:57,000
Vi har sex olika nivåer
av rubriker, en, två, tre,

172
00:07:57,000 --> 00:08:01,110
fyra, fem, och sex, vilka är
successivt större och större

173
00:08:01,110 --> 00:08:01,710
rubriker.

174
00:08:01,710 --> 00:08:04,360
Och de får mindre och
mindre och mindre och mindre.

175
00:08:04,360 --> 00:08:07,690
Så vi har en toppnivå rubrik, en andra
nivå huvudet, och så vidare, och så vidare.

176
00:08:07,690 --> 00:08:10,480
>> Låt oss ta en titt på kanske några
P-taggar och vissa header taggar

177
00:08:10,480 --> 00:08:13,110
i aktion på en webbsida.

178
00:08:13,110 --> 00:08:18,180
Så här i min IDE Jag har en fil som heter
PH dot HTML, PH är punkterna

179
00:08:18,180 --> 00:08:18,970
och header taggar.

180
00:08:18,970 --> 00:08:20,709
Öppna upp det.

181
00:08:20,709 --> 00:08:23,000
Det är en hel del som pågår här
eftersom jag har lagt lite lorem

182
00:08:23,000 --> 00:08:24,660
ipsum, vissa bara slumpmässig text här.

183
00:08:24,660 --> 00:08:27,284
Så jag ska zooma ut lite
eftersom det finns så mycket som pågår.

184
00:08:27,284 --> 00:08:31,980
Men märker att jag har åtmin
top här jag har en H1, en nivå ett,

185
00:08:31,980 --> 00:08:32,802
sidhuvudtagg.

186
00:08:32,802 --> 00:08:36,010
Då jag har ett stycke, som är bara
ett gäng slump text-- lorem ipsum--

187
00:08:36,010 --> 00:08:38,720
bara standard standard fylla i text.

188
00:08:38,720 --> 00:08:41,970
Så jag har två stycken inne i det
nivå en rubrik och sedan ned under jag

189
00:08:41,970 --> 00:08:46,850
har en nivå två rubrik här på ledningen 24,
en andra nivå rubrik, och ytterligare två

190
00:08:46,850 --> 00:08:47,840
stycken.

191
00:08:47,840 --> 00:08:51,910
Tja vad gör detta ser ut
Om jag ser det i min förhandsvisning?

192
00:08:51,910 --> 00:08:53,790
Låt oss se.

193
00:08:53,790 --> 00:08:55,730
>> Så märker att
grundnivå header här

194
00:08:55,730 --> 00:08:58,420
är faktiskt ganska lite större
än den andra nivån huvudet.

195
00:08:58,420 --> 00:08:59,940
Så vi använde H1 taggar.

196
00:08:59,940 --> 00:09:03,820
Och märker att P-taggar tillåter oss
att bryta saker i stycken.

197
00:09:03,820 --> 00:09:07,500
Om vi ​​hade blivit av med dessa P-taggar
och faktiskt bara sätta Öppnar eller returer

198
00:09:07,500 --> 00:09:10,110
mellan vad vi hoppades skulle
vara olika punkterna,

199
00:09:10,110 --> 00:09:13,193
De skulle alla bara slam tillsammans och
Det skulle inte ha denna trevliga punkt

200
00:09:13,193 --> 00:09:15,840
separation med utrymme ovanför och nedanför.

201
00:09:15,840 --> 00:09:18,300
Och så det är vad punkt
taggar och header taggar

202
00:09:18,300 --> 00:09:22,440
används ofta för att göra för att dra
uppmärksamhet till delar av vår hemsida

203
00:09:22,440 --> 00:09:23,550
på det sättet.

204
00:09:23,550 --> 00:09:27,560
>> Nästa upp är vissa taggar som vi använder
att skapa listor på vår hemsida.

205
00:09:27,560 --> 00:09:30,820
Så vi har oordnad
lists-- ULs-- som är precis

206
00:09:30,820 --> 00:09:34,090
punktlistor, beställda
Listan som är numbered--

207
00:09:34,090 --> 00:09:37,680
OLs-- och insida i antingen
en av dem måste vi ha

208
00:09:37,680 --> 00:09:40,600
uppsättningar av hur man indikera listobjekt, LI.

209
00:09:40,600 --> 00:09:44,370
Och så har vi öppet UL tagg
och vi lägger föremål inne i den.

210
00:09:44,370 --> 00:09:46,920
Och sedan när vi är klara med
det kan vi stänga UL taggen.

211
00:09:46,920 --> 00:09:49,850
>> Och på samma sätt kan vi ha
en ordnad eller numrerad lista

212
00:09:49,850 --> 00:09:51,560
och sätta listobjekt inuti det.

213
00:09:51,560 --> 00:09:53,350
Så låt oss ta en titt
på ett par listor

214
00:09:53,350 --> 00:09:57,230
och vad de skulle
render som På CS50 IDE.

215
00:09:57,230 --> 00:10:00,640
Så jag har här i min IDE en
fil som heter listor dot HTML.

216
00:10:00,640 --> 00:10:03,100
Låt oss ta en titt.

217
00:10:03,100 --> 00:10:08,482
>> Och meddelande här jag har en oordnad
lista med fem saker i den.

218
00:10:08,482 --> 00:10:11,440
Och så har jag en ordnad lista, och
Jag har ändrat taggen lite,

219
00:10:11,440 --> 00:10:11,939
höger?

220
00:10:11,939 --> 00:10:13,152
Jag har sagt start lika med sex.

221
00:10:13,152 --> 00:10:16,110
Det visar sig med en ordnad lista I
kan ställa in startpunkten varhelst

222
00:10:16,110 --> 00:10:20,130
Jag want-- som standard blir det en--
genom att bara lägga denna så kallade attribut

223
00:10:20,130 --> 00:10:21,190
till min OL tag.

224
00:10:21,190 --> 00:10:23,572
Och så den här listan kommer
börja räkna på sex.

225
00:10:23,572 --> 00:10:26,780
Så de delar av denna numrerad lista
bör vara sex, sju, åtta, nio, tio,

226
00:10:26,780 --> 00:10:29,930
eftersom det finns fem element
i listan, i motsats till en,

227
00:10:29,930 --> 00:10:33,770
två, tre, fyra, fem, vilka
skulle vara fallet om jag hade sagt OL

228
00:10:33,770 --> 00:10:36,730
utan att ange startattribut.

229
00:10:36,730 --> 00:10:41,594
>> Så vi ska bara förhandsgranska detta så att du kan
få en känsla för vad som händer här.

230
00:10:41,594 --> 00:10:42,260
Och det går vi.

231
00:10:42,260 --> 00:10:44,610
Det är min lista.

232
00:10:44,610 --> 00:10:47,810
De första fem elementen är
oordnade eller punktlistor.

233
00:10:47,810 --> 00:10:51,010
Och de kommande fem elementen
är en separat ordnad lista

234
00:10:51,010 --> 00:10:52,980
utgående från sex.

235
00:10:52,980 --> 00:10:56,247
Så det är hur vi kan
skapa listor med HTML.

236
00:10:56,247 --> 00:10:58,080
En annan sak som du kanske
vill göra med HTML

237
00:10:58,080 --> 00:11:01,520
är att bygga en tabell över
information av rader och kolumner

238
00:11:01,520 --> 00:11:04,560
att presentera information på ett
särskilt organiserad sätt.

239
00:11:04,560 --> 00:11:09,110
För att göra detta med HTML vi kan ha en
tabelldefinition som börjar öppna fästet

240
00:11:09,110 --> 00:11:10,160
tabell.

241
00:11:10,160 --> 00:11:14,680
Och sedan inne i samma tabell vi
kan ha en uppsättning av rader, TR-taggar

242
00:11:14,680 --> 00:11:15,980
för att indikera varje rad.

243
00:11:15,980 --> 00:11:22,510
Och sedan TD taggar gå inne i TR-taggar
för att ange en kolumn i en rad.

244
00:11:22,510 --> 00:11:24,340
>> Varför kallas det TD och inte TC?

245
00:11:24,340 --> 00:11:25,940
Tja, TD står för tabelldata.

246
00:11:25,940 --> 00:11:27,900
Vanligtvis är du sätter
dina uppgifter där.

247
00:11:27,900 --> 00:11:29,440
Så det är därför det är TD och inte TC.

248
00:11:29,440 --> 00:11:31,140
Det är lite förvirrande.

249
00:11:31,140 --> 00:11:33,720
>> Så du har bords taggar och
insidan av bords taggar

250
00:11:33,720 --> 00:11:35,600
du har ett antal rader, TR.

251
00:11:35,600 --> 00:11:40,030
Och inne varje rad du har
TDS för antalet kolumner

252
00:11:40,030 --> 00:11:42,880
som du vill ha
i just den raden.

253
00:11:42,880 --> 00:11:47,730
Låt oss ta en titt på en mycket
enkel tabell över i CS50 IDE.

254
00:11:47,730 --> 00:11:49,730
>> Så jag har här en fil
kallas bord dot HTML.

255
00:11:49,730 --> 00:11:53,390
Låt oss ta en titt på
vad det ser ut.

256
00:11:53,390 --> 00:11:56,225
Det är en hel del som pågår här, men
om du märker jag har en tabell öppen.

257
00:11:56,225 --> 00:11:57,850
Jag börjar definitionen med bord.

258
00:11:57,850 --> 00:12:02,100
Och sedan i min första raden jag tydligen
har fyra kolumner, en, två, tre,

259
00:12:02,100 --> 00:12:02,660
fyra.

260
00:12:02,660 --> 00:12:04,290
Och sedan är jag klar med den raden.

261
00:12:04,290 --> 00:12:07,750
>> Då ska jag börja en annan rad och
gör två, fyra, sex, åtta.

262
00:12:07,750 --> 00:12:08,850
Avsluta den raden.

263
00:12:08,850 --> 00:12:11,410
Gör en annan rad, tre, sex, nio, tolv.

264
00:12:11,410 --> 00:12:14,830
Och sedan en sista raden, fyra,
åtta, 12, och även om det är

265
00:12:14,830 --> 00:12:16,560
lite avskuren här, 16.

266
00:12:16,560 --> 00:12:17,710
>> Jag avslutade den raden.

267
00:12:17,710 --> 00:12:18,970
Jag avslutade bordet.

268
00:12:18,970 --> 00:12:21,430
Och sedan är jag klar med min HTML.

269
00:12:21,430 --> 00:12:22,590
Vad betyder det här ut som?

270
00:12:22,590 --> 00:12:26,014

271
00:12:26,014 --> 00:12:27,430
Tja, det är egentligen inte mycket att se.

272
00:12:27,430 --> 00:12:31,690
Jag har tydligt organiserat min information
på ett något mer organiserat sätt.

273
00:12:31,690 --> 00:12:33,755
Men det är inte super ganska här.

274
00:12:33,755 --> 00:12:36,130
Och vi kommer att ta itu med
att när vi talar om CSS.

275
00:12:36,130 --> 00:12:38,930
Vi kommer att återkomma denna idé om
vad vi gör för att göra en table--

276
00:12:38,930 --> 00:12:41,260
kanske formatera det lite bättre?

277
00:12:41,260 --> 00:12:45,070
Men jag har fortfarande fyra rader,
vart och ett har fyra kolumner,

278
00:12:45,070 --> 00:12:48,890
och verkligen vad detta innebär är en
mycket enkel fyra av fyra multiplikation

279
00:12:48,890 --> 00:12:49,870
tabell.

280
00:12:49,870 --> 00:12:51,690
>> Bara några fler taggar vi pratar om.

281
00:12:51,690 --> 00:12:54,617
Låt oss tala om
Begreppet ett HTML-formulär.

282
00:12:54,617 --> 00:12:57,450
Så du kan ha sett detta i
samband med att logga in på en webbsida.

283
00:12:57,450 --> 00:12:59,100
Vanligtvis du skriver in ditt användarnamn.

284
00:12:59,100 --> 00:13:01,510
Du skriver i ditt lösenord
och du är bra att gå.

285
00:13:01,510 --> 00:13:04,170
Det skulle vara början på en blankett.

286
00:13:04,170 --> 00:13:05,420
>> Hoppa över huvudgrupp en andra.

287
00:13:05,420 --> 00:13:07,987
Vi har också ingångar som
typ av plats i olika former.

288
00:13:07,987 --> 00:13:10,320
Dessa är de faktorer som
du faktiskt skriver in,

289
00:13:10,320 --> 00:13:12,580
eller radioknapparna du
tickar, eller kontrollen

290
00:13:12,580 --> 00:13:14,310
rutor som du tickar av.

291
00:13:14,310 --> 00:13:15,770
Så dessa gå in former.

292
00:13:15,770 --> 00:13:18,500
Och de innefattar i grund och botten
varje rad i formuläret

293
00:13:18,500 --> 00:13:19,887
Om formuläret formateras väl.

294
00:13:19,887 --> 00:13:22,220
Sedan finns det begreppet
en div, som egentligen inte

295
00:13:22,220 --> 00:13:25,060
passar i en viss kategori
taggar som de som jag har

296
00:13:25,060 --> 00:13:26,170
gjort tidigare.

297
00:13:26,170 --> 00:13:29,790
Det bara sorts avgränsar den
i början av en godtycklig division--

298
00:13:29,790 --> 00:13:31,670
div-- på sidan.

299
00:13:31,670 --> 00:13:33,210
Det finns ingen visuell paus.

300
00:13:33,210 --> 00:13:34,800
Det finns ingen linje.

301
00:13:34,800 --> 00:13:37,180
Det är inte iväg som en
separat bit automatiskt.

302
00:13:37,180 --> 00:13:39,430
Du skulle behöva styla det
det sätt att göra det.

303
00:13:39,430 --> 00:13:42,110
>> Det säger att jag vill ha en rättvis sorts
bit utrymme på min hemsida,

304
00:13:42,110 --> 00:13:45,190
och jag ska bara ringa
det denna uppdelning av min sida.

305
00:13:45,190 --> 00:13:47,619
Vi kan lägga saker inuti
av Divar, och i själva verket,

306
00:13:47,619 --> 00:13:49,410
när vi går över till
IDE i en andra, vi ska

307
00:13:49,410 --> 00:13:53,760
se att jag sätter min
bildas inuti en div.

308
00:13:53,760 --> 00:13:57,050
>> Så jag har här i min IDE en
fil som heter div formuläret dot HTML.

309
00:13:57,050 --> 00:13:59,260
Låt oss öppna den.

310
00:13:59,260 --> 00:14:01,460
Lägg märke till att som jag sa,
div är typ av godtycklig.

311
00:14:01,460 --> 00:14:01,640
Höger?

312
00:14:01,640 --> 00:14:02,973
Det spelar ingen betyder någonting.

313
00:14:02,973 --> 00:14:05,140
Så jag har en godtycklig
första divisionen av min sida.

314
00:14:05,140 --> 00:14:07,848
Och sedan i stället för en annan div
senare, med början på rad åtta,

315
00:14:07,848 --> 00:14:08,730
Jag har denna form.

316
00:14:08,730 --> 00:14:13,594
Och insidan av formen I har en
antalet ingångar, fälten i formuläret.

317
00:14:13,594 --> 00:14:16,510
Så jag har ett fält, vars namn är A--
som egentligen inte betyder något

318
00:14:16,510 --> 00:14:19,350
rätt now-- som tydligen
tar text, en annan som

319
00:14:19,350 --> 00:14:22,630
tar ett lösenord, en annan som är en radio
knappen, en annan som är en kryssruta,

320
00:14:22,630 --> 00:14:24,797
och en annan som är en Skicka-knapp.

321
00:14:24,797 --> 00:14:26,630
Nå, vad gör detta
alla egentligen ser ut?

322
00:14:26,630 --> 00:14:27,629
Nåväl, låt oss ta en titt.

323
00:14:27,629 --> 00:14:31,010
Vi ska öppna upp det i vår förhandsgranskningsfönstret.

324
00:14:31,010 --> 00:14:33,557
Lägg märke till att detta godtyckliga
första division-- finns

325
00:14:33,557 --> 00:14:34,640
ingen visuell separation här.

326
00:14:34,640 --> 00:14:37,150
Det har inte riktigt göra någonting, rätt?

327
00:14:37,150 --> 00:14:38,220
>> Och då jag har min form.

328
00:14:38,220 --> 00:14:39,890
Och jag har inte gjort någon särskild formatering.

329
00:14:39,890 --> 00:14:42,680
Så formen är bara en
stor rad av information.

330
00:14:42,680 --> 00:14:46,424
Om jag hade formaterat min formen annorlunda,
Jag kanske har den rad för rad för rad.

331
00:14:46,424 --> 00:14:47,590
Men jag gjorde inte någon styling.

332
00:14:47,590 --> 00:14:49,256
Återigen, vi talar inte om CSS här.

333
00:14:49,256 --> 00:14:51,030
Vi pratar bara om HTML.

334
00:14:51,030 --> 00:14:53,980
>> Väl i min textform jag kan Motortyp-
kom ihåg att olika former av typen text

335
00:14:53,980 --> 00:14:55,480
så jag kan sätta mitt namn.

336
00:14:55,480 --> 00:14:57,330
Och i mitt lösenord Jag
kan skriva mitt lösenord.

337
00:14:57,330 --> 00:14:59,740
Och eftersom detta område
är av typen lösenord

338
00:14:59,740 --> 00:15:01,470
du vet inte vad mitt lösenord är.

339
00:15:01,470 --> 00:15:02,800
Det är alla punkter.

340
00:15:02,800 --> 00:15:09,140
>> Jag kan också välja att bocka av en
alternativknappen eller pricka av en kryssruta.

341
00:15:09,140 --> 00:15:10,420
Eller jag kunde skicka min form.

342
00:15:10,420 --> 00:15:11,810
Och jag har inte gjort något,
så när jag in min form

343
00:15:11,810 --> 00:15:13,090
sidan uppdateras bara.

344
00:15:13,090 --> 00:15:16,970
Men jag kunde kanske konfigurera min
Skicka-knappen för att göra något annat.

345
00:15:16,970 --> 00:15:20,410
Och vi får se vad vi kan göra med
att i en framtida video på PHP.

346
00:15:20,410 --> 00:15:22,520
Men det bygger ett mycket
enkel form som vi

347
00:15:22,520 --> 00:15:27,360
kan använda för att få användare interagerar och
lämna uppgifter till vår hemsida.

348
00:15:27,360 --> 00:15:29,620
>> En sista kommentar innan vi
gå vidare till några andra taggar

349
00:15:29,620 --> 00:15:32,040
är att ta en titt på detta
input tag en gång.

350
00:15:32,040 --> 00:15:35,760
Lägg märke till att jag har markerat
ändarna av etiketten i rött.

351
00:15:35,760 --> 00:15:39,390
Varannan tag vi har sett hittills har
hade en början och ett slut, en öppning

352
00:15:39,390 --> 00:15:41,030
tagg och en sluttagg.

353
00:15:41,030 --> 00:15:42,520
>> Men en inmatningstagg inte.

354
00:15:42,520 --> 00:15:46,860
Det finns ingen text som går
i mellan inmatnings taggar.

355
00:15:46,860 --> 00:15:49,160
All information
vi har för avsikt att förmedla

356
00:15:49,160 --> 00:15:52,640
binds upp som en del av
attribut av den ingången.

357
00:15:52,640 --> 00:15:54,690
Lägg märke till att vi har input Namnet är x.

358
00:15:54,690 --> 00:15:55,580
Typ lika y.

359
00:15:55,580 --> 00:15:57,660
Det är verkligen alla
information vi behöver.

360
00:15:57,660 --> 00:15:59,470
>> Detta kallas för en självstängande tagg.

361
00:15:59,470 --> 00:16:02,470
Det kräver inte en öppning och en
nära eftersom all information

362
00:16:02,470 --> 00:16:04,974
finns inuti den
taggen och dess attribut.

363
00:16:04,974 --> 00:16:06,390
Så ibland ser du detta också.

364
00:16:06,390 --> 00:16:10,400
Så bara vara medvetna om att om du har en
tagg som är helt fristående,

365
00:16:10,400 --> 00:16:14,170
öppnar och stänger sig med
den öppenvinkelfästet på vänster

366
00:16:14,170 --> 00:16:17,000
och snedstreck vinkeln
konsol till höger.

367
00:16:17,000 --> 00:16:20,580
Vi får se ytterligare en av dem
just nu med bildtaggar samt.

368
00:16:20,580 --> 00:16:23,300
>> Innan vi talar om bilder, vi
behöver prata om hyperlänkar.

369
00:16:23,300 --> 00:16:26,080
Om vi ​​vill att vår webbsida för att vara
interaktiv och flytta oss runt,

370
00:16:26,080 --> 00:16:28,121
det skulle vara trevligt att kunna
att klicka på en av dem

371
00:16:28,121 --> 00:16:30,190
vad som vanligtvis varit en blå länken.

372
00:16:30,190 --> 00:16:34,440
Detta är faktiskt hur vi bygger
en hyperlänk i vår hemsida.

373
00:16:34,440 --> 00:16:36,540
Och intressant nog
det finns en annan HTML-tagg

374
00:16:36,540 --> 00:16:39,000
kallas länk, som inte är en hyperlänk.

375
00:16:39,000 --> 00:16:44,130
En här står för ankare, och
det är hur vi anger en hyperlänk.

376
00:16:44,130 --> 00:16:49,150
>> En href lika x medel går till
webbsida X. Och allt

377
00:16:49,150 --> 00:16:51,580
mellan det öppna En tagg
och nära En tagg

378
00:16:51,580 --> 00:16:56,010
är vad som kommer att vara att underströk
blå text som ser ut som en länk

379
00:16:56,010 --> 00:16:57,590
att vi är bekant med.

380
00:16:57,590 --> 00:17:01,660
Nedan att vi har en bild-tagg, som
är en självstängande tagg för att visa

381
00:17:01,660 --> 00:17:05,599
en bild som finns på X. Och
du kanske kan ändra

382
00:17:05,599 --> 00:17:08,280
den bilden genom att specificera
bredd och höjd

383
00:17:08,280 --> 00:17:11,640
och andra attribut i
att dot dot dot där.

384
00:17:11,640 --> 00:17:14,260
>> Längst ner här
Vi har en mycket intressant

385
00:17:14,260 --> 00:17:16,170
ser tagg som inte
ha en sluttagg.

386
00:17:16,170 --> 00:17:19,410
Det är utropstecken doctype HTML.

387
00:17:19,410 --> 00:17:23,300
Så HTML har funnits sedan
tidiga 1990-talet för att bygga webbsidor,

388
00:17:23,300 --> 00:17:25,859
och det har gått genomgått
flera revideringar sedan dess.

389
00:17:25,859 --> 00:17:28,550
Senast 2014
Det genomgick en översyn

390
00:17:28,550 --> 00:17:33,440
kallas HTML5 som nu är aktuell
sorts de facto HTML-standarden.

391
00:17:33,440 --> 00:17:36,730
>> För att visa att vår webb
sidor skrivs med HTML5,

392
00:17:36,730 --> 00:17:38,160
Detta är hur vi börjar.

393
00:17:38,160 --> 00:17:40,380
Det kan utelämnas men
vad det i grund och botten

394
00:17:40,380 --> 00:17:45,930
hjälp är att du inte kan använda någon av taggarna
som är HTML5 taggar, dessa nya taggar.

395
00:17:45,930 --> 00:17:48,591
Så vi alltid börja
Om vi ​​använder HTML5.

396
00:17:48,591 --> 00:17:51,340
Och alla taggar vi har pratat om
tidigare inte HTML5 taggar.

397
00:17:51,340 --> 00:17:55,470
Men detta skulle indikera att
HTML5-taggar kommer att vara närvarande.

398
00:17:55,470 --> 00:17:58,400
Och så har vi utrop
doctype HTML, som

399
00:17:58,400 --> 00:18:01,280
är i början av vår
HTML-fil, och sedan efter den punkten

400
00:18:01,280 --> 00:18:04,930
vi faktiskt har vår HTML öppen
tagga och fortsätt därifrån.

401
00:18:04,930 --> 00:18:10,050
>> Den sista är en kommentar tagg
som ser något annorlunda också.

402
00:18:10,050 --> 00:18:12,810
Det börjar med vinkeln
fäste utrops streck

403
00:18:12,810 --> 00:18:15,220
streck men ingen stängning fäste.

404
00:18:15,220 --> 00:18:20,150
Mellan dessa två element där
är där du skriver dina kommentarer.

405
00:18:20,150 --> 00:18:28,420
Och låt oss ta en titt på bilderna
och kommentarer och länkar i CS50 IDE.

406
00:18:28,420 --> 00:18:32,850
>> Så jag har här en fil som heter bildlänk
dot HTML som jag kommer att öppna upp.

407
00:18:32,850 --> 00:18:36,420
Och märker jag har ett par
säger här i min HTML-kommentarer.

408
00:18:36,420 --> 00:18:38,990
Så precis som i C och andra
programmeringsspråk,

409
00:18:38,990 --> 00:18:43,169
HTML bara genom att vara en markup language
har förmågan att ha en kommentar.

410
00:18:43,169 --> 00:18:45,710
Och så jag uppenbarligen kommer att
Placera en bild av Rick Astley

411
00:18:45,710 --> 00:18:49,060
någonstans mellan denna div
tagg, detta godtyckliga divisionen.

412
00:18:49,060 --> 00:18:51,497
Tydligen filen är
beläget vid Rick dot JPEG, som

413
00:18:51,497 --> 00:18:53,580
Om vi ​​går tillbaka över till
min filträdet för en sekund,

414
00:18:53,580 --> 00:18:55,490
är en fil som finns i
den aktuella katalogen.

415
00:18:55,490 --> 00:18:56,031
Så det är OK.

416
00:18:56,031 --> 00:18:57,710
Jag kan referera till den.

417
00:18:57,710 --> 00:18:59,680
>> Då kan jag ha interna länkar.

418
00:18:59,680 --> 00:19:05,080
Så märker på rad 11 här
min href är hello dot HTML.

419
00:19:05,080 --> 00:19:09,050
Så att bara refererar till hello dot HTML
som finns i den aktuella katalogen.

420
00:19:09,050 --> 00:19:12,980
Och jag kan också ha extern
länkar genom att bara ange HTTPS

421
00:19:12,980 --> 00:19:16,180
för att indikera att jag inte talar
om en fil i min nuvarande katalog.

422
00:19:16,180 --> 00:19:19,730
Jag talar om en fil som finns
någonstans på internet, som jag har

423
00:19:19,730 --> 00:19:23,370
att begära hjälp av HTTP-protokollet.

424
00:19:23,370 --> 00:19:25,990
>> Så låt oss ta en titt på vad
denna sida kan se ut

425
00:19:25,990 --> 00:19:29,500
och gör dig redo för en bild av Rick
Astley att visa upp på din skärm.

426
00:19:29,500 --> 00:19:31,490
Så jag ska förhandsgranska.

427
00:19:31,490 --> 00:19:33,800
Det finns Rick Astley på
högst upp i denna godtyckliga

428
00:19:33,800 --> 00:19:35,008
division Jag satte den på toppen.

429
00:19:35,008 --> 00:19:36,960
Och sedan ner under I
har mina länkar, eller hur?

430
00:19:36,960 --> 00:19:39,330
>> Jag har en länk till hello dot HTML.

431
00:19:39,330 --> 00:19:42,860
Och om jag klickar det, jag får
flyttas över till den här sidan

432
00:19:42,860 --> 00:19:47,050
att vi är väl förtrogen med från
alldeles i början av vårt program.

433
00:19:47,050 --> 00:19:50,880
Om jag dyker den sidan öppen igen, om jag
pop bildlänk öppna en gång,

434
00:19:50,880 --> 00:19:54,420
Jag kan också gå externt
till CS50: s webbplats.

435
00:19:54,420 --> 00:19:56,740
Och där vi see-- jag ska
zooma ut lite här--

436
00:19:56,740 --> 00:20:00,260
vi får se CS50 hemsida sorts
inbäddade i mitten av vår sida.

437
00:20:00,260 --> 00:20:04,670
Så jag kunde göra en intern
länkar samt en extern länk.

438
00:20:04,670 --> 00:20:07,200
>> Den sista regeln med HTML som
vi kommer att tala om här

439
00:20:07,200 --> 00:20:09,510
är att HTML ska välformade.

440
00:20:09,510 --> 00:20:13,020
I C pratade vi mycket om
olika syntax saker.

441
00:20:13,020 --> 00:20:17,650
I HTML syntax verkligen
kretsar kring etiketter.

442
00:20:17,650 --> 00:20:19,660
Varje tagg du öppnar måste stängas.

443
00:20:19,660 --> 00:20:22,630
Och i själva verket varje tagg du öppnar
bör stängas i omvänd ordning.

444
00:20:22,630 --> 00:20:25,790
>> Så om du öppnar ett djärvt tagg, en kursiv
tag, och sedan en understrykning tagg

445
00:20:25,790 --> 00:20:28,120
att göra alla tre till en
särskild uppsättning av text,

446
00:20:28,120 --> 00:20:30,070
Du bör stänga dem i omvänd ordning.

447
00:20:30,070 --> 00:20:32,270
Så om du öppnat fet,
kursiv, understruken, du

448
00:20:32,270 --> 00:20:35,240
vill stänga understrykning, kursiv, fet.

449
00:20:35,240 --> 00:20:39,990
Denna typ av inkapsling är vad
håller HTML trevlig och organiserade.

450
00:20:39,990 --> 00:20:44,370
>> Till skillnad från C, men syntaxfel kommer inte
faktiskt krympling HTML möjligen.

451
00:20:44,370 --> 00:20:48,730
Din HTML kanske inte väl
bildas men skulle ändå fungera.

452
00:20:48,730 --> 00:20:50,589
Och så dessa fel
kan sortera glid av.

453
00:20:50,589 --> 00:20:52,130
Det är upp till dig att verkligen vara vaksamma.

454
00:20:52,130 --> 00:20:54,760
Ibland kommer att misslyckas, men
ibland kan du komma undan med det.

455
00:20:54,760 --> 00:20:56,509
>> Det kan vara en riktigt
svår uppgift, fast,

456
00:20:56,509 --> 00:21:00,660
att hålla reda på när du öppnade
en tagg, när du stängde det,

457
00:21:00,660 --> 00:21:04,110
särskilt som HTML
filer blir större och större.

458
00:21:04,110 --> 00:21:05,490
Du kommer att ha lite hjälp.

459
00:21:05,490 --> 00:21:07,560
Och det är online
validator verktyg som du

460
00:21:07,560 --> 00:21:11,474
kan använda för att ta en titt på din webbsida
sida och se om det är Välformad HTML.

461
00:21:11,474 --> 00:21:13,390
Och du bör definitivt
ta en titt på dem

462
00:21:13,390 --> 00:21:16,620
och börja använda dem som du
börja göra en del arbete med HTML,

463
00:21:16,620 --> 00:21:20,800
skriver HTML, bara så att du får
några goda vanor om att organisera

464
00:21:20,800 --> 00:21:24,377
HTML på ett bra sätt och
god stil och se

465
00:21:24,377 --> 00:21:27,210
att du inte gör något som
skulle kunna skapa ett syntaxfel som

466
00:21:27,210 --> 00:21:30,270
skulle leda till att du en bit av
ett problem på vägen.

467
00:21:30,270 --> 00:21:31,190
>> Jag är Doug Lloyd.

468
00:21:31,190 --> 00:21:33,450
Detta är CS50.

469
00:21:33,450 --> 00:21:34,859