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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Ma megyek
beszéljünk egy kicsit a HTML,

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

4
00:00:12,330 --> 00:00:14,450
Látod HTML mindenütt ezekben a napokban.

5
00:00:14,450 --> 00:00:17,190
Sőt, ha ezt nézed
video a böngészőben, akkor

6
00:00:17,190 --> 00:00:19,120
látva HTML most.

7
00:00:19,120 --> 00:00:22,760
HTML nem programozási nyelv,
inkább ez egy leíró nyelv által használt

8
00:00:22,760 --> 00:00:25,460
böngészők tétele oldalak
az interneten.

9
00:00:25,460 --> 00:00:30,410
>> Szóval lehet kérni, hogy pontosan ír
a weboldal HTML különböző

10
00:00:30,410 --> 00:00:33,574
írás egy programot a programozó
nyelv, mint a C?

11
00:00:33,574 --> 00:00:38,010
Nos, a C egy nyelv nagyon szigorú
szintaktikai szabályokat kell

12
00:00:38,010 --> 00:00:39,880
össze mielőtt futni.

13
00:00:39,880 --> 00:00:43,070
Ha valaha is elfelejtette, hogy tartalmazza a
pontosvessző végén egy nyilatkozatot

14
00:00:43,070 --> 00:00:46,660
A C kód, tudod, mit beszélek
mintegy annak tekintetében, hogy a szigorú szintaxis.

15
00:00:46,660 --> 00:00:50,360
>> Webböngészők, bár, egy kicsit
megbocsátó, amikor a HTML.

16
00:00:50,360 --> 00:00:53,860
Még ha a HTML nem szintaktikailag
helyes, az oldal még mindig

17
00:00:53,860 --> 00:00:57,150
jelenik meg a böngészőben, de lehet, hogy
nem úgy néz ki, mint ahogy tervezte.

18
00:00:57,150 --> 00:00:59,640
Tehát mindig a legjobb
követi a szabályokat.

19
00:00:59,640 --> 00:01:01,990
A legjobb módja, hogy az intuíció
arról, hogyan működnek a dolgok, hogy

20
00:01:01,990 --> 00:01:03,300
végig egy példát.

21
00:01:03,300 --> 00:01:07,360
>> Szóval, mi van itt egy alapvető
tervezet egy internetes oldalon.

22
00:01:07,360 --> 00:01:10,690
Valószínűleg észrevette, hogy egy csomó dolgot
között szögletes zárójelben.

23
00:01:10,690 --> 00:01:12,900
Nos, ezek csak címkék.

24
00:01:12,900 --> 00:01:15,810
Címkék alapvetően tájékoztatja böngészők
hogy, hé, valami

25
00:01:15,810 --> 00:01:17,150
jön az utat.

26
00:01:17,150 --> 00:01:20,770
Ne feledje azonban, ha megnyitja a
tag, be kell zárnia, hogy ha már

27
00:01:20,770 --> 00:01:21,750
használatával történik meg.

28
00:01:21,750 --> 00:01:24,690
>> Így például, nyitok egy szakaszt
kód nyitott

29
00:01:24,690 --> 00:01:26,960
tartó test, záró zárójel.

30
00:01:26,960 --> 00:01:31,280
Én majd adjunk hozzá egy kis szöveget, ebben az esetben, az
első weboldalt, akkor, amikor elmentem

31
00:01:31,280 --> 00:01:35,540
zárja ezt a részt, azt használja majdnem
azonos címke kivéve, ezúttal egy

32
00:01:35,540 --> 00:01:37,660
perjel előtt testet.

33
00:01:37,660 --> 00:01:41,140
Általában ez a formátum akkor
fogja használni, amikor nyit

34
00:01:41,140 --> 00:01:42,680
és a záró tag.

35
00:01:42,680 --> 00:01:47,900
Együtt, egy nyitott címkét, és véget tag
alkotják az úgynevezett egy elem.

36
00:01:47,900 --> 00:01:51,870
>> Ha megnézzük az első sorban, akkor
megjelenik egy felkiáltójel követ

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

38
00:01:53,350 --> 00:01:56,280
Ez tényleg csak mondja a böngésző
, hogy a fájl egy weboldal

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

40
00:01:58,280 --> 00:02:01,970
A HTML tag lényegében azt mondja,
Itt van pár HTML.

41
00:02:01,970 --> 00:02:04,950
Aztán van egy fej címkét
a címet tag benne.

42
00:02:04,950 --> 00:02:09,430
A fej tag lehet gondolni, mint
amely HTML kódot, ami a

43
00:02:09,430 --> 00:02:12,670
a nagy részét a weblap
tényleges tartalom.

44
00:02:12,670 --> 00:02:16,700
>> Általában, akkor tegye a címe a
honlap itt, bár van néhány

45
00:02:16,700 --> 00:02:19,350
további címkék is megjelennek
itt is.

46
00:02:19,350 --> 00:02:25,020
Ezután következik a weboldal testét, a
tényleges hús és a csontok az Ön honlapján.

47
00:02:25,020 --> 00:02:28,910
A példánkban most már csak hogy egy egyszerű
mondat, az első Web,

48
00:02:28,910 --> 00:02:34,100
amely, ha fut az oldalon, fog kinézni
egy kis valamit, mint ez.

49
00:02:34,100 --> 00:02:36,810
A weboldal nem túl furcsa,
de ne aggódj.

50
00:02:36,810 --> 00:02:39,210
Majd lucfenyő fel hamarosan.

51
00:02:39,210 --> 00:02:44,070
>> Tehát a fenti HTML, akkor kapsz egy nagyon
alapvető sablon egy weboldalt,

52
00:02:44,070 --> 00:02:46,310
semmi különös, csak a csupasz csont.

53
00:02:46,310 --> 00:02:49,160
De ha én honlap elkészítésére,
mi van, ha hozzá szeretne adni egy

54
00:02:49,160 --> 00:02:50,760
kép, mondjuk, én magam?

55
00:02:50,760 --> 00:02:52,760
Nos, meg tudom csinálni.

56
00:02:52,760 --> 00:02:55,460
Van egy pár módon
hozzá képeket webhelyére.

57
00:02:55,460 --> 00:02:59,780
Ha a kép ugyanabban a mappában, mint
a HTML fájlt, akkor link a

58
00:02:59,780 --> 00:03:01,950
Image via utat, mint ez.

59
00:03:01,950 --> 00:03:05,910
>> Ha nyit egy képet tag követte
in Alt attribútum a

60
00:03:05,910 --> 00:03:07,240
forrása a kép.

61
00:03:07,240 --> 00:03:12,030
Az Alt attribútum értéke csak néhány
alternatív szöveget abban az esetben a felhasználó nem

62
00:03:12,030 --> 00:03:13,580
lásd a képet.

63
00:03:13,580 --> 00:03:19,680
Alternatív megoldásként, akkor is hivatkoznak
képek segítségével a teljes URL-t, mint ez.

64
00:03:19,680 --> 00:03:24,180
Most, hogy a honlap nem igazán létezik,
de ha lenne egy kép

65
00:03:24,180 --> 00:03:27,760
nekem a címet, tudtam használni
A forrás URL tartalmazza

66
00:03:27,760 --> 00:03:29,930
a kép a honlapomon.

67
00:03:29,930 --> 00:03:35,590
Akárhogy is, a végén egy sokkal
szebb honlap, valami ilyesmi.

68
00:03:35,590 --> 00:03:39,730
>> Hát, ez elég jó, de valahogy
A szeretnénk szöveget itt is.

69
00:03:39,730 --> 00:03:43,020
Szóval csak adj valamit,
szuper egyszerű felett

70
00:03:43,020 --> 00:03:45,210
kép, mint a fejléc.

71
00:03:45,210 --> 00:03:50,830
Minden, amit eddig, hogy használja a header
tag, H1 és a sortörés tag, br.

72
00:03:50,830 --> 00:03:54,900
A fejléc tag teszi a font egy kicsit
kicsit nagyobb és nagyobb.

73
00:03:54,900 --> 00:03:58,930
A sortörés tag, a másik
viszont elég jó.

74
00:03:58,930 --> 00:04:03,720
Ellentétben a legtöbb más címkéket, akkor nem kell
nyitó és záró szünet tag, csak

75
00:04:03,720 --> 00:04:05,120
az egyik, a fentiek szerint.

76
00:04:05,120 --> 00:04:10,420
Ez azért van, mert szünet nincs tartalma
, és ezért egy üres elem.

77
00:04:10,420 --> 00:04:14,940
>> Üres elemeket, mint ez, meg tudja nyitni
és közel egyszerre egyszerűen

78
00:04:14,940 --> 00:04:20,420
beleértve a perjel a
végén az eredeti nyilatkozat.

79
00:04:20,420 --> 00:04:24,390
Tehát most a website néz ki egy kicsit
valami ilyesmi.

80
00:04:24,390 --> 00:04:27,410
Jobb, de ez a fajta érzés
mint egy zsákutca.

81
00:04:27,410 --> 00:04:30,850
Nincs hová menniük félre
ebből a főoldalon.

82
00:04:30,850 --> 00:04:33,075
Nos, rögzíteni, hogy a
köztük egy linket.

83
00:04:33,075 --> 00:04:36,860
>> Mit fogok csinálni itt is használ
attribútumot jelöl, és a

84
00:04:36,860 --> 00:04:40,780
kép egy linket, mondjuk, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Így, ha bárki rákattint rám,
a böngészőben fog irányulni, hogy

86
00:04:44,460 --> 00:04:47,810
egy másik, talán még
hasznos weboldal.

87
00:04:47,810 --> 00:04:51,040
Elegem van, hogy minimálisra csökkentsék a méret a
szöveg egy kicsit, mert a weboldal

88
00:04:51,040 --> 00:04:52,470
egyre fejlettebb.

89
00:04:52,470 --> 00:04:54,590
De remélhetőleg, még mindig világos.

90
00:04:54,590 --> 00:04:59,460
Saját honlap néz ki, pontosan ugyanaz csak
Most, amikor rákattintok a képre,

91
00:04:59,460 --> 00:05:04,410
a böngésző nyit egy
a lap a CS50.tv weboldalt.

92
00:05:04,410 --> 00:05:08,970
>> Végül mondjuk fogom stílus
ezen a honlapon később CSS.

93
00:05:08,970 --> 00:05:11,730
CSS, amit ismert, mint egy
lépcsőzetes stíluslap.

94
00:05:11,730 --> 00:05:15,230
És ez alapvetően biztosítja a hatékony
módon szerkeszteni és stílus

95
00:05:15,230 --> 00:05:16,910
hasonló blokkokat a kódot.

96
00:05:16,910 --> 00:05:21,290
Azt akarom, hogy megkezdi a HTML
megkönnyítik a stílust később.

97
00:05:21,290 --> 00:05:26,900
Itt, én meg két különböző
azonosítókat, hogy segítsen megszervezni a kódot.

98
00:05:26,900 --> 00:05:31,170
Én is használtam az attribútum belül
osztály, vagy a div tag, és én is használtam a

99
00:05:31,170 --> 00:05:34,120
Class attribútum belül
egy div tag.

100
00:05:34,120 --> 00:05:37,190
>> Id és a class attribútumok
hasonlóan működnek.

101
00:05:37,190 --> 00:05:41,210
Az egyetlen különbség az, akkor csak
egyik eleme, az egyedi azonosító, de

102
00:05:41,210 --> 00:05:43,600
tetszőleges számú elem
osztozik egy osztály.

103
00:05:43,600 --> 00:05:47,690
Így például, tudom használni az osztály
képet többször, de nem tudok

104
00:05:47,690 --> 00:05:50,533
hozzon létre egy másik részlege
Az ID tetején.

105
00:05:50,533 --> 00:05:54,750
Bár én még nem ment bele CSS,
egy másik nyelvet általánosan használt

106
00:05:54,750 --> 00:05:59,700
mellett HTML, ha egyszer elkezdem stílus
a kód CSS, tudom használni ezeket a

107
00:05:59,700 --> 00:06:03,730
szervezeti tulajdonságokat befolyásolja
a weblap esztétika.

108
00:06:03,730 --> 00:06:07,600
>> Minden körzetben felső
is hasonló kápráztatja vagy

109
00:06:07,600 --> 00:06:12,010
másik csoportja a HTML I csoport a
osztály kép megosztja a hasonló megjelenés.

110
00:06:12,010 --> 00:06:15,700
Ez sokkal egyszerűbb, mint próbál szerkeszteni
és stílusú képek vagy blokkolja a

111
00:06:15,700 --> 00:06:17,690
szöveg külön-külön.

112
00:06:17,690 --> 00:06:21,480
>> Így mentünk át az alapokat, hogy milyen
, hogy egy weblap HTML.

113
00:06:21,480 --> 00:06:25,280
HTML egy csomó más funkciók is
hogy amikor párosítva más nyelveken

114
00:06:25,280 --> 00:06:29,220
mint a CSS és a JavaScript, tényleg
az oldalak kitűnjön.

115
00:06:29,220 --> 00:06:32,960
A legjobb módja, hogy kényelmes
HTML csak szórakozni vele,

116
00:06:32,960 --> 00:06:35,120
mi működik, és mi nem.

117
00:06:35,120 --> 00:06:36,570
>> A nevem Daven Farnham.

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

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

120
00:06:40,640 --> 00:06:45,690
>> Így például, tudom használni
az osztály kép -

121
00:06:45,690 --> 00:06:48,028
Nem, olyan sok attribútumokat.

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

123
00:06:52,500 --> 00:06:53,950
A nevem Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Ez a CS 650.

125
00:06:58,560 --> 00:06:59,810
Azt akarom mondani, CSS.

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

127
00:07:02,325 --> 00:07:03,575
Ez a CSS.

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