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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Idag ska jag
prata lite om HTML,

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

4
00:00:12,330 --> 00:00:14,450
Du ser HTML överallt dessa dagar.

5
00:00:14,450 --> 00:00:17,190
Faktum är att om du tittar på det här
video i en webbläsare, du

6
00:00:17,190 --> 00:00:19,120
se HTML just nu.

7
00:00:19,120 --> 00:00:22,760
HTML är inte ett programmeringsspråk,
snarare är det ett märkspråk som används av

8
00:00:22,760 --> 00:00:25,460
webbläsare för att återge sidor
på internet.

9
00:00:25,460 --> 00:00:30,410
>> Så du kan fråga, hur exakt skriver
en webbsida i HTML annorlunda

10
00:00:30,410 --> 00:00:33,574
från att skriva ett program i ett programmeringsspråk
språk som C?

11
00:00:33,574 --> 00:00:38,010
Tja, är C ett språk med mycket strikt
syntaktiska regler som måste vara

12
00:00:38,010 --> 00:00:39,880
kompileras innan det kan köras.

13
00:00:39,880 --> 00:00:43,070
Om du någon gång har glömt att ta med en
semikolon i slutet av ett uttalande i

14
00:00:43,070 --> 00:00:46,660
din C-kod, vet du vad jag talar
om i fråga om att strikt syntax.

15
00:00:46,660 --> 00:00:50,360
>> Webbläsare dock är lite mer
förlåtande när det kommer till HTML.

16
00:00:50,360 --> 00:00:53,860
Även om din HTML är inte syntaktiskt
rätt, kan din sida fortfarande

17
00:00:53,860 --> 00:00:57,150
som visas av en webbläsare, men det kan
inte ser ut som du tänkt.

18
00:00:57,150 --> 00:00:59,640
Så det är alltid bäst att
följer reglerna.

19
00:00:59,640 --> 00:01:01,990
Det bästa sättet att få en intuition
om hur det arbetet är att

20
00:01:01,990 --> 00:01:03,300
gå igenom ett exempel.

21
00:01:03,300 --> 00:01:07,360
>> Så vad vi har här är en grundläggande
utkast till en webbsida.

22
00:01:07,360 --> 00:01:10,690
Du märkte nog en massa saker
mellan vinkelparenteser.

23
00:01:10,690 --> 00:01:12,900
Tja, de är bara taggar.

24
00:01:12,900 --> 00:01:15,810
Tags princip informera webbläsare
att, hey, något

25
00:01:15,810 --> 00:01:17,150
kommer din väg.

26
00:01:17,150 --> 00:01:20,770
Kom dock ihåg, när du öppnar en
tag, måste du stänga den när du är

27
00:01:20,770 --> 00:01:21,750
göras med hjälp av den.

28
00:01:21,750 --> 00:01:24,690
>> Så till exempel, jag öppnar ett avsnitt
av kod med öppen

29
00:01:24,690 --> 00:01:26,960
fästesstomme, nära fästet.

30
00:01:26,960 --> 00:01:31,280
Jag lägger sedan lite text, i det här fallet, min
första webbsida sedan när jag gick till

31
00:01:31,280 --> 00:01:35,540
Detta avsnitt, använder jag nästan en
identiska tag men den här gången med en

32
00:01:35,540 --> 00:01:37,660
snedstreck innan kroppen.

33
00:01:37,660 --> 00:01:41,140
I allmänhet är detta det format du
kommer att använda när du öppnar

34
00:01:41,140 --> 00:01:42,680
och stänga taggar.

35
00:01:42,680 --> 00:01:47,900
Tillsammans en öppen tagg och en sluttagg
komponera vad som kallas ett element.

36
00:01:47,900 --> 00:01:51,870
>> Om du tittar på den första raden, kommer du
ser ett utropstecken följt av

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

38
00:01:53,350 --> 00:01:56,280
Detta är egentligen bara berätta din webbläsare
att filen är en webbsida

39
00:01:56,280 --> 00:01:58,280
skriven i HTML.

40
00:01:58,280 --> 00:02:01,970
HTML-taggen i grunden säger,
här kommer lite HTML.

41
00:02:01,970 --> 00:02:04,950
Då har vi ett huvud tag med
en titel tagg i den.

42
00:02:04,950 --> 00:02:09,430
Huvudet-taggen som du kan tänka på som
bestående av HTML-kod som kommer att

43
00:02:09,430 --> 00:02:12,670
huvuddelen av din webbsida s
faktiska innehållet.

44
00:02:12,670 --> 00:02:16,700
>> I allmänhet lägger du titeln på din
webbsida här, även om det finns några

45
00:02:16,700 --> 00:02:19,350
andra taggar som kan visas
här också.

46
00:02:19,350 --> 00:02:25,020
Därefter kommer din webbsida kropp, det
faktiska kött och ben av din webbplats.

47
00:02:25,020 --> 00:02:28,910
I vårt exempel har vi bara sätta en enkel
mening, min första webbsida,

48
00:02:28,910 --> 00:02:34,100
som, om vi kör vår webbplats, kommer att se ut
lite ungefär så här.

49
00:02:34,100 --> 00:02:36,810
Vår webbsida inte är för queer,
men oroa dig inte.

50
00:02:36,810 --> 00:02:39,210
Vi kommer att piffa upp det snart.

51
00:02:39,210 --> 00:02:44,070
>> Så ovanstående HTML, ger vi dig en mycket
grundläggande mall för en webbsida,

52
00:02:44,070 --> 00:02:46,310
inget märkvärdigt, bara nakna ben.

53
00:02:46,310 --> 00:02:49,160
Men om jag skapar en webbsida,
tänk om jag vill lägga till en

54
00:02:49,160 --> 00:02:50,760
bild av, säg, mig själv?

55
00:02:50,760 --> 00:02:52,760
Tja, kan jag göra det.

56
00:02:52,760 --> 00:02:55,460
Det finns ett par sätt att
lägga till bilder till din webbplats.

57
00:02:55,460 --> 00:02:59,780
Om bilden är i samma mapp som
HTML-fil, kan du länka till den

58
00:02:59,780 --> 00:03:01,950
bild via sökväg som denna.

59
00:03:01,950 --> 00:03:05,910
>> Du öppnar upp med en bildtagg följt
med i Alt-attributet i

60
00:03:05,910 --> 00:03:07,240
källa av bilden.

61
00:03:07,240 --> 00:03:12,030
Alt-attributet värde är bara några
alternativ text om en användare inte kan

62
00:03:12,030 --> 00:03:13,580
se bilden.

63
00:03:13,580 --> 00:03:19,680
Alternativt kan du också länka till
bilder via en fullständig URL, som den här.

64
00:03:19,680 --> 00:03:24,180
Nu, gör att webbplatsen inte egentligen existerar,
men om det fanns en bild av

65
00:03:24,180 --> 00:03:27,760
mig på den adressen, kan jag använda
käll URL för att inkludera

66
00:03:27,760 --> 00:03:29,930
sin bild på min hemsida.

67
00:03:29,930 --> 00:03:35,590
Hursomhelst, du sluta med en mycket
snyggare hemsida, ungefär så här.

68
00:03:35,590 --> 00:03:39,730
>> Tja, det är ganska coolt, men jag typ
av vill ha lite text här.

69
00:03:39,730 --> 00:03:43,020
Så låt oss bara lägga till något
super enkel ovanför

70
00:03:43,020 --> 00:03:45,210
bild, som rubriken.

71
00:03:45,210 --> 00:03:50,830
Allt jag har gjort hittills är att använda huvudet
tag, H1, och en radbrytning tag, br.

72
00:03:50,830 --> 00:03:54,900
Rubrik taggen gör typsnittet lite
lite större och mer framträdande.

73
00:03:54,900 --> 00:03:58,930
Linjen paus taggen, å andra
sidan är ganska häftigt.

74
00:03:58,930 --> 00:04:03,720
Till skillnad från de flesta andra taggar, behöver du inte
en öppning och stängning paus tag, precis

75
00:04:03,720 --> 00:04:05,120
den som visas ovan.

76
00:04:05,120 --> 00:04:10,420
Detta beror på att brott har inget innehåll
och är därför, ett tomt element.

77
00:04:10,420 --> 00:04:14,940
>> Tomma element som detta, kan du öppna
och nära samtidigt genom att helt enkelt

78
00:04:14,940 --> 00:04:20,420
finns ett snedstreck på
slutet av den ursprungliga deklarationen.

79
00:04:20,420 --> 00:04:24,390
Så nu min hemsida ser lite
ungefär så här.

80
00:04:24,390 --> 00:04:27,410
Bättre, men det slags känns
som en återvändsgränd.

81
00:04:27,410 --> 00:04:30,850
Det finns ingen annanstans att gå åt sidan
från denna huvudsida.

82
00:04:30,850 --> 00:04:33,075
Nåväl, låt oss fixa det genom
inklusive en länk.

83
00:04:33,075 --> 00:04:36,860
>> Vad jag ska göra här är att använda en
attribut betecknas med A och göra den

84
00:04:36,860 --> 00:04:40,780
bilden en länk till, låt oss säga, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
På så sätt, när någon klickar på mig,
sin webbläsare kommer att riktas till

86
00:04:44,460 --> 00:04:47,810
en annan, förmodligen mer
användbart, webbsida.

87
00:04:47,810 --> 00:04:51,040
Jag har haft för att minimera storleken på
text lite eftersom vår hemsida är

88
00:04:51,040 --> 00:04:52,470
blir mer avancerade.

89
00:04:52,470 --> 00:04:54,590
Men förhoppningsvis är det fortfarande tydligt.

90
00:04:54,590 --> 00:04:59,460
Min hemsida ser exakt samma bara
Nu, när jag klickar på bilden,

91
00:04:59,460 --> 00:05:04,410
min webbläsare kommer att öppna upp en annan
flik för webbsidan CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Slutligen, låt oss säga att jag ska stil
denna hemsida senare med hjälp av CSS.

93
00:05:08,970 --> 00:05:11,730
CSS är vad som kallas en
CSS.

94
00:05:11,730 --> 00:05:15,230
Och det i grunden ger en effektiv
sätt att redigera och stil

95
00:05:15,230 --> 00:05:16,910
liknande block av kod.

96
00:05:16,910 --> 00:05:21,290
Jag vill börja organisera min HTML till
göra det lättare att forma senare.

97
00:05:21,290 --> 00:05:26,900
Här satte jag upp två olika typer av
identifierare för att hjälpa till att organisera min kod.

98
00:05:26,900 --> 00:05:31,170
Jag har använt ID-attribut i en
delning, eller div-taggen, och jag har använt en

99
00:05:31,170 --> 00:05:34,120
Klass attribut inne
en annan div-taggen.

100
00:05:34,120 --> 00:05:37,190
>> ID och klassattribut
fungerar på liknande sätt.

101
00:05:37,190 --> 00:05:41,210
Den enda skillnaden är att du kan bara ha
ett element, det specifika ID, men

102
00:05:41,210 --> 00:05:43,600
valfritt antal element
kan dela en klass.

103
00:05:43,600 --> 00:05:47,690
Så till exempel, kan jag använda klassen
bild flera gånger, men jag kan inte

104
00:05:47,690 --> 00:05:50,533
skapa en annan division
med ID-toppen.

105
00:05:50,533 --> 00:05:54,750
Även om jag inte har gått in i CSS,
annat språk som vanligen används

106
00:05:54,750 --> 00:05:59,700
tillsammans med HTML, när jag börjar styling
min kod med CSS, kan jag använda dessa

107
00:05:59,700 --> 00:06:03,730
organisatoriska attribut till inflytande
min webbsida estetik.

108
00:06:03,730 --> 00:06:07,600
>> Allt inom divisionen toppen
kommer att ha liknande stylingsna eller någon

109
00:06:07,600 --> 00:06:12,010
andra gruppen av HTML I-gruppen i
klass image kommer att dela ett liknande utseende.

110
00:06:12,010 --> 00:06:15,700
Det är mycket enklare än att försöka redigera
och stil bilder eller block av

111
00:06:15,700 --> 00:06:17,690
text individuellt.

112
00:06:17,690 --> 00:06:21,480
>> Så vi gick över grunderna i hur
att göra en webbsida med HTML.

113
00:06:21,480 --> 00:06:25,280
HTML har en massa andra funktioner också
att när det paras ihop med andra språk

114
00:06:25,280 --> 00:06:29,220
som CSS och JavaScript, kan verkligen
göra sidorna sticker ut.

115
00:06:29,220 --> 00:06:32,960
Det bästa sättet att bli bekant med
HTML är bara för att röra runt med den,

116
00:06:32,960 --> 00:06:35,120
se vad som fungerar och vad som inte fungerar.

117
00:06:35,120 --> 00:06:36,570
>> Mitt namn är Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Detta är CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Så till exempel, kan jag använda
klassen image -

121
00:06:45,690 --> 00:06:48,028
Nej, det finns så många attribut.

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

123
00:06:52,500 --> 00:06:53,950
Mitt namn är Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Detta är CS 650.

125
00:06:58,560 --> 00:06:59,810
Jag vill säga CSS.

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

127
00:07:02,325 --> 00:07:03,575
Detta är CSS.

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