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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN Farnham: Hodiaŭ, mi tuj
paroli iom pri HTML,

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

4
00:00:12,330 --> 00:00:14,450
Komprenu HTML ĉie ĉi tiuj tagoj.

5
00:00:14,450 --> 00:00:17,190
Fakte, se vi rigardas ĉi
video en foliumilo, vi estas

6
00:00:17,190 --> 00:00:19,120
vidante HTML nun.

7
00:00:19,120 --> 00:00:22,760
HTML ne estas programlingvo,
pli ĝuste, ĝi estas markaĵojn uzata de

8
00:00:22,760 --> 00:00:25,460
foliumiloj por repagi paĝoj
sur la interreto.

9
00:00:25,460 --> 00:00:30,410
>> Do eble vi demandas, kio precize estas skribanta
TTT-paĝo en HTML malsamajn

10
00:00:30,410 --> 00:00:33,574
el skribi programon en programado
lingvo kiel C?

11
00:00:33,574 --> 00:00:38,010
Nu, C estas lingvo kun tre strikta
sintaksa reguloj kiuj bezonas esti

12
00:00:38,010 --> 00:00:39,880
kompilis antaŭ ĝi povas kuri.

13
00:00:39,880 --> 00:00:43,070
Se vi iam forgesis inkludi
punktokomo ĉe la fino de formulita en

14
00:00:43,070 --> 00:00:46,660
via C kodon, vi scias pri kio mi parolas
pri koncerne al strikta sintakso.

15
00:00:46,660 --> 00:00:50,360
>> Foliumiloj kvankam, estas iom pli
pardonante, kiam temas pri HTML.

16
00:00:50,360 --> 00:00:53,860
Eĉ se via HTML ne estas sintakse
korekta, via paĝo eble ankoraŭ estos

17
00:00:53,860 --> 00:00:57,150
montrata per foliumilo, sed eble
Ne rigardu kiel vi celas.

18
00:00:57,150 --> 00:00:59,640
Do ĝi estas ĉiam bona por
sekvi la regulojn.

19
00:00:59,640 --> 00:01:01,990
La plej bona maniero por akiri intuicio
pri kiel la aferoj laboro estas

20
00:01:01,990 --> 00:01:03,300
iri tra ekzemplo.

21
00:01:03,300 --> 00:01:07,360
>> Do kion ni havas ĉi tie estas baza
blukopio di retpaĝo.

22
00:01:07,360 --> 00:01:10,690
Vi verŝajne rimarkis multajn aferojn
en inter angled krampoj.

23
00:01:10,690 --> 00:01:12,900
Nu, tiuj estas nur etikedojn.

24
00:01:12,900 --> 00:01:15,810
Tags baze informi foliumiloj
ke, hey, iu

25
00:01:15,810 --> 00:01:17,150
Venas vian vojon.

26
00:01:17,150 --> 00:01:20,770
Memoru tamen, kiam ajn vi malfermas
etikedo, vi bezonas fermi ĝin iam vi estas

27
00:01:20,770 --> 00:01:21,750
farita uzante gxin.

28
00:01:21,750 --> 00:01:24,690
>> Do, ekzemple, Mi malfermos sekcion
de kodo kun malfermita

29
00:01:24,690 --> 00:01:26,960
krampo korpo, proksime krampo.

30
00:01:26,960 --> 00:01:31,280
Mi tiam aldoni iun tekston, en ĉi tiu kazo, mia
unuan retpaĝon tiam kiam mi iris al

31
00:01:31,280 --> 00:01:35,540
fermi ĉi tiu sekcio, mi uzas preskaŭ
identa tag krom tiu tempo kun

32
00:01:35,540 --> 00:01:37,660
antaŭen oblikvo antaux korpo.

33
00:01:37,660 --> 00:01:41,140
Ĝenerale, ĉi tiu estas la formaton vi estas
tuj uzu kiam ajn vi estos la malfermo

34
00:01:41,140 --> 00:01:42,680
kaj fermante etikedojn.

35
00:01:42,680 --> 00:01:47,900
Kune, malfermita etikedon kaj finon etikedon
formi kio nomiĝas ero.

36
00:01:47,900 --> 00:01:51,870
>> Se vi rigardas la unuan linion, vi
vidi ekkrion punkto sekvita de

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

38
00:01:53,350 --> 00:01:56,280
Tio estas vere nur diras via retumilo
ke la dosiero estas retpaĝo

39
00:01:56,280 --> 00:01:58,280
skribita en HTML.

40
00:01:58,280 --> 00:02:01,970
La HTML-etikedo esence diras:
jen kelkaj HTML.

41
00:02:01,970 --> 00:02:04,950
Tiam ni havas kapon etikedon kun
titolo etikedon en ĝi.

42
00:02:04,950 --> 00:02:09,430
La kapo tag vi povas pensi pri kiel
komprenante HTML kodo kiu venas por

43
00:02:09,430 --> 00:02:12,670
la plejparto de via TTT-paĝo de
efektiva enhavo.

44
00:02:12,670 --> 00:02:16,700
>> Ĝenerale, oni metis la titolon de via
retpaĝo ĉi tie, kvankam estas kelkaj

45
00:02:16,700 --> 00:02:19,350
aliaj etikedoj kiu povas aperi
tie ankaŭ.

46
00:02:19,350 --> 00:02:25,020
Sekva venas vian retpaĝon la korpo, la
efektiva karno kaj ostoj de via retejo.

47
00:02:25,020 --> 00:02:28,910
En nia ekzemplo, ni simple metu simplan
frazo: Mia Unua Retpaĝo:

48
00:02:28,910 --> 00:02:34,100
kio, se ni kuras nia retejo, aspektos
iom io kiel tio.

49
00:02:34,100 --> 00:02:36,810
Nia TTT-paĝo ne estas tro stranga,
sed ne maltrankvilu.

50
00:02:36,810 --> 00:02:39,210
Ni Spruce ĝin baldaŭ.

51
00:02:39,210 --> 00:02:44,070
>> Do la supre HTML, ni donos al vi tre
baza ŝablono por retpaĝo,

52
00:02:44,070 --> 00:02:46,310
nenio fantazio, nur la nudaj ostoj.

53
00:02:46,310 --> 00:02:49,160
Sed se mi kreas retpaĝon,
kio se mi volas aldoni

54
00:02:49,160 --> 00:02:50,760
bildo de, ekzemple, mi mem?

55
00:02:50,760 --> 00:02:52,760
Nu, mi povas fari tion.

56
00:02:52,760 --> 00:02:55,460
Ekzistas kelkaj manieroj
aldoni bildojn al via retejo.

57
00:02:55,460 --> 00:02:59,780
Se la bildo estas en la sama dosierujo kiel
vian HTML-dosiero, vi povas alligi la

58
00:02:59,780 --> 00:03:01,950
bildo tra vojeto kiel ĉi tio.

59
00:03:01,950 --> 00:03:05,910
>> Vi malfermas kun bildo tag sekvis
per en Alt atributo en la

60
00:03:05,910 --> 00:03:07,240
fonto de la bildo.

61
00:03:07,240 --> 00:03:12,030
La Alt atributo valoro estas nur iuj
Alternativa teksto en kazo de uzanto ne povas

62
00:03:12,030 --> 00:03:13,580
vidi la bildon.

63
00:03:13,580 --> 00:03:19,680
Alternative, vi povas ankaux ligi al
bildoj pere kompletan URL, kiel ĉi tio.

64
00:03:19,680 --> 00:03:24,180
Nun, ke retejo ne vere ekzistas,
sed se estis bildo de

65
00:03:24,180 --> 00:03:27,760
mi ĉe tiu adreso, mi povus uzi
la fonto URL por inkluzivi

66
00:03:27,760 --> 00:03:29,930
lia bildo sur mia retpaĝo.

67
00:03:29,930 --> 00:03:35,590
Ĉiaokaze, vi finu kun multe
bela retejo, io kiel tio.

68
00:03:35,590 --> 00:03:39,730
>> Nu, tio estas sufiĉe malvarmaj, sed mi specon
de want some text here tiel.

69
00:03:39,730 --> 00:03:43,020
Do ni simple aldoni ion
super simpla supre la

70
00:03:43,020 --> 00:03:45,210
bildon, kiel la ĉapon.

71
00:03:45,210 --> 00:03:50,830
Ĉio kiun mi faris ĝis nun estas uzi la kaplinio
tag: H1, kaj sxnuro break tag: br.

72
00:03:50,830 --> 00:03:54,900
La kaplinio tag faras la tiparo iom
iom pli grandaj kaj pli elstara.

73
00:03:54,900 --> 00:03:58,930
La linerompo etikedon, sur la alia
mano, estas speco de malvarmeta.

74
00:03:58,930 --> 00:04:03,720
Malkiel plej parto de aliaj etikedoj, vi ne havas
malfermo kaj fermo break tag, simple

75
00:04:03,720 --> 00:04:05,120
la montrita supre.

76
00:04:05,120 --> 00:04:10,420
Ĉi tio estas ĉar ripozon ne havas enhavon
kaj estas pro tio, malplena elemento.

77
00:04:10,420 --> 00:04:14,940
>> Malplena elementoj kiel tiu, vi povas malfermi
kaj proksima samtempe simple per

78
00:04:14,940 --> 00:04:20,420
inkludante antaŭen oblikvo ĉe la
fino de la komenca deklaro.

79
00:04:20,420 --> 00:04:24,390
Do nun mia retejo aspektas iom
iu kiel ĉi tio.

80
00:04:24,390 --> 00:04:27,410
Pli bona, sed speco de sentas
kiel morta fino.

81
00:04:27,410 --> 00:04:30,850
Estas neniu alia foriri
de tiu ĉefa paĝo.

82
00:04:30,850 --> 00:04:33,075
Nu, ni fiksas, ke per
inkludante ligon.

83
00:04:33,075 --> 00:04:36,860
>> Kion mi faros cxi tie estas uzi
atribui signifita per A kaj fari la

84
00:04:36,860 --> 00:04:40,780
bildo ligilon al, ni diru, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Tiel, kiam ajn iu alklakas sur mi,
ilia retumilo estos direktita al

86
00:04:44,460 --> 00:04:47,810
alia, probable pli
utila, retpaĝo.

87
00:04:47,810 --> 00:04:51,040
Mi havis minimumigi la grandeco de la
teksto iom pro nia TTT-paĝo

88
00:04:51,040 --> 00:04:52,470
atingi pli progresintaj.

89
00:04:52,470 --> 00:04:54,590
Sed mi esperas, ĝi estas ankoraŭ klara.

90
00:04:54,590 --> 00:04:59,460
Mia paĝo aspektas ekzakte la samaj nur
Nun, kiam mi klakas sur la bildo,

91
00:04:59,460 --> 00:05:04,410
mia retumilo malfermos alian
langeton por la CS50.tv retpaĝo.

92
00:05:04,410 --> 00:05:08,970
>> Laste, ni diru Mi tuj stilo
ĉi retejo poste uzi la CSS.

93
00:05:08,970 --> 00:05:11,730
CSS estas kio estas konata kiel
kaskadan stilo folio.

94
00:05:11,730 --> 00:05:15,230
Kaj esence provizas efikan
maniero por redakti kaj stilo

95
00:05:15,230 --> 00:05:16,910
simila blokoj da kodo.

96
00:05:16,910 --> 00:05:21,290
Mi volas komenci organizi mian HTML por
plifaciligi stiligi poste.

97
00:05:21,290 --> 00:05:26,900
Ĉi tie, mi starigis du malsamaj specoj de
ensalutiloj helpi organizi mia kodo.

98
00:05:26,900 --> 00:05:31,170
Mi uzis la ID atributo ene
divido, aux div etikedon, kaj mi uzis

99
00:05:31,170 --> 00:05:34,120
Klaso atribui interne
alia div etikedo.

100
00:05:34,120 --> 00:05:37,190
>> ID kaj Klaso atributoj
funkcias simile.

101
00:05:37,190 --> 00:05:41,210
La sola diferenco estas vi nur povas havi
unu elemento, la specifa ID, sed

102
00:05:41,210 --> 00:05:43,600
ajna kvanto de eroj
povas dividi klaso.

103
00:05:43,600 --> 00:05:47,690
Do ekzemple, mi povas uzi la klaso
bildo plurfoje, sed mi ne povas

104
00:05:47,690 --> 00:05:50,533
krei alian divido
kun la ID supro.

105
00:05:50,533 --> 00:05:54,750
Kvankam mi ne eniris en CSS,
alian lingvon komune uzita

106
00:05:54,750 --> 00:05:59,700
apud HTML, unufoje mi komencas stilo
mia kodo kun CSS, mi povas uzi tiujn

107
00:05:59,700 --> 00:06:03,730
organizaj atributojn al influo
mia retpaĝo de estetiko.

108
00:06:03,730 --> 00:06:07,600
>> Ĉio ene de la divido supro
havos similajn stylings aŭ ajna

109
00:06:07,600 --> 00:06:12,010
alia grupo de HTML Mi grupo en la
klaso bildo dividos similan aspekton.

110
00:06:12,010 --> 00:06:15,700
Tiu estas multe pli facile ol por provi redaktanton
kaj stilo bildoj aŭ blokoj de

111
00:06:15,700 --> 00:06:17,690
teksto individue.

112
00:06:17,690 --> 00:06:21,480
>> Do ni iris trans la fundamentojn de kiel
fari retpaĝon kun HTML.

113
00:06:21,480 --> 00:06:25,280
HTML havas faskon da aliaj trajtoj tro
ke kiam parigita kun aliaj lingvoj

114
00:06:25,280 --> 00:06:29,220
kiel CSS kaj JavaScript, ĉu vere
fari paĝojn elstaras.

115
00:06:29,220 --> 00:06:32,960
La plej bona maniero por akiri komforta kun
HTML estas nur por salato ĉirkaŭ ĝi,

116
00:06:32,960 --> 00:06:35,120
vidi kio funkcias kaj kio ne.

117
00:06:35,120 --> 00:06:36,570
>> Mia nomo estas Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Ĉi tio estas CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Do ekzemple, mi povas uzi
la klaso bildo -

121
00:06:45,690 --> 00:06:48,028
Ne, tie estas tiom da atributoj.

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

123
00:06:52,500 --> 00:06:53,950
Mia nomo estas Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Ĉi tio estas CS 650.

125
00:06:58,560 --> 00:06:59,810
Mi volas diri CSS.

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

127
00:07:02,325 --> 00:07:03,575
Tiu estas la CSS.

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