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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN Farnham: Šodien, es esmu gatavojas
runāt mazliet par HTML,

3
00:00:10,450 --> 00:00:12,330
Hiperteksta iezīmēšanas valoda.

4
00:00:12,330 --> 00:00:14,450
Redzat HTML visur šajās dienās.

5
00:00:14,450 --> 00:00:17,190
Patiesībā, ja jūs skatītos šo
video pārlūkprogrammā, jūs

6
00:00:17,190 --> 00:00:19,120
redzot HTML tieši tagad.

7
00:00:19,120 --> 00:00:22,760
HTML nav programmēšanas valoda,
Drīzāk, tas ir iezīmēšanas valoda, ko izmanto

8
00:00:22,760 --> 00:00:25,460
interneta pārlūkiem, lai padarītu lapas
internetā.

9
00:00:25,460 --> 00:00:30,410
>> Tātad, jūs varētu jautāt, kā tieši ir rakstiski
mājas lapa HTML dažādās

10
00:00:30,410 --> 00:00:33,574
no rakstīšanas programmu plānošanas
valodas, piemēram, C?

11
00:00:33,574 --> 00:00:38,010
Nu, C ir valoda ar ļoti stingriem
sintakses noteikumi, kas vajadzīga, lai būtu

12
00:00:38,010 --> 00:00:39,880
apkopoti pirms tā var darboties.

13
00:00:39,880 --> 00:00:43,070
Ja esat kādreiz aizmirst iekļaut
semikols beigās apgalvojumu

14
00:00:43,070 --> 00:00:46,660
savu C kodu, jūs zināt, ko es runāju
par to, kas attiecībā uz stingri sintaksi.

15
00:00:46,660 --> 00:00:50,360
>> Interneta pārlūkprogrammas, lai gan, ir nedaudz vairāk
piedošanu, kad runa ir par HTML.

16
00:00:50,360 --> 00:00:53,860
Pat ja jūsu HTML nav sintaktiski
pareizi, jūsu lapā joprojām var būt

17
00:00:53,860 --> 00:00:57,150
parādīts ar pārlūku, bet tas varētu
neizskatās, kā paredzēts.

18
00:00:57,150 --> 00:00:59,640
Tātad, tas vienmēr ir labākais, lai
ievēro noteikumus.

19
00:00:59,640 --> 00:01:01,990
Labākais veids, kā iegūt intuīcija
par to, kā lietas darbu ir

20
00:01:01,990 --> 00:01:03,300
iet caur piemēru.

21
00:01:03,300 --> 00:01:07,360
>> Tātad, ko mēs esam šeit ir pamata
projektu par mājas lapā.

22
00:01:07,360 --> 00:01:10,690
Jūs droši vien ievērojuši, daudz lietas
starp leņķveida iekavās.

23
00:01:10,690 --> 00:01:12,900
Nu, tie ir tikai tagus.

24
00:01:12,900 --> 00:01:15,810
Tags būtībā informēt interneta pārlūkiem
ka, hey, kaut

25
00:01:15,810 --> 00:01:17,150
nāk savu ceļu.

26
00:01:17,150 --> 00:01:20,770
Atcerieties, lai gan, kad jūs atverat
tag, jums ir nepieciešams, lai novērstu to, kad esat

27
00:01:20,770 --> 00:01:21,750
darīts, izmantojot to.

28
00:01:21,750 --> 00:01:24,690
>> Tā, piemēram, I atvērt sekciju
Koda ar atvērtu

29
00:01:24,690 --> 00:01:26,960
kronšteins ķermenis, tuvu kronšteins.

30
00:01:26,960 --> 00:01:31,280
Tad es pievienot tekstu, šajā gadījumā, my
Pirmā mājas lapa, tad, kad es devos uz

31
00:01:31,280 --> 00:01:35,540
slēgt šo sadaļu, es izmantoju gandrīz
identiski tag izņemot šajā laikā ar

32
00:01:35,540 --> 00:01:37,660
slīpsvītra pirms organismā.

33
00:01:37,660 --> 00:01:41,140
Kopumā, tas ir formāts tu esi
gatavojas izmantot ikreiz, kad atverat

34
00:01:41,140 --> 00:01:42,680
un noslēguma tagus.

35
00:01:42,680 --> 00:01:47,900
Kopā, atvērtu tagu un beigu tagu
sacerēt ko sauc elements.

36
00:01:47,900 --> 00:01:51,870
>> Ja paskatās pirmajā rindā, jūs
redzat izsaukuma zīmi, kam seko

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

38
00:01:53,350 --> 00:01:56,280
Tas ir patiešām vienkārši stāsta savu pārlūkprogrammu
ka fails ir mājas lapa

39
00:01:56,280 --> 00:01:58,280
rakstīts HTML.

40
00:01:58,280 --> 00:02:01,970
HTML tag būtībā saka,
Šeit nāk daži HTML.

41
00:02:01,970 --> 00:02:04,950
Tad mums ir galvas tagu ar
nosaukums tag tā iekšpusē.

42
00:02:04,950 --> 00:02:09,430
Galva tag jūs varat iedomāties, kā
ietver HTML kods, kas nāk par

43
00:02:09,430 --> 00:02:12,670
lielākā daļa no jūsu mājas lapā ir
faktiskais saturs.

44
00:02:12,670 --> 00:02:16,700
>> Vispār, jūs nodot nosaukumu jūsu
mājas lapā šeit, lai gan ir daži

45
00:02:16,700 --> 00:02:19,350
citi tagus, kas var parādīties
arī šeit.

46
00:02:19,350 --> 00:02:25,020
Tālāk seko jūsu mājas lapa ķermenis,
faktiskais gaļa un kauli jūsu mājas lapā.

47
00:02:25,020 --> 00:02:28,910
Mūsu Piemēram, mēs esam tikai izvirzīti vienkārši
teikumu, Mans pirmais adrese,

48
00:02:28,910 --> 00:02:34,100
kas, ja mēs palaist mūsu vietni, meklēs
mazliet kaut kas līdzīgs šim.

49
00:02:34,100 --> 00:02:36,810
Mūsu mājas lapa ir ne pārāk savādi,
bet neuztraucieties.

50
00:02:36,810 --> 00:02:39,210
Mēs egles to uz augšu ātrāk.

51
00:02:39,210 --> 00:02:44,070
>> Tāpēc iepriekš HTML, mēs jums ļoti
Pamata šablons mājas lapā,

52
00:02:44,070 --> 00:02:46,310
nekas fancy, tikai tukša kauli.

53
00:02:46,310 --> 00:02:49,160
Bet, ja es esmu veidojot mājas lapā,
Ko darīt, ja es gribu, lai pievienotu

54
00:02:49,160 --> 00:02:50,760
attēlu, teiksim, sevi?

55
00:02:50,760 --> 00:02:52,760
Nu, es varu darīt.

56
00:02:52,760 --> 00:02:55,460
Ir vairāki veidi, kā
pievienot attēlus, lai jūsu vietnē.

57
00:02:55,460 --> 00:02:59,780
Ja attēls ir vienā mapē
jūsu HTML failu, jūs varat saistīt ar

58
00:02:59,780 --> 00:03:01,950
attēlu pa ceļu, kā šis.

59
00:03:01,950 --> 00:03:05,910
>> Jūs atvērt ar attēla tagu seko
ar Alt atribūtu

60
00:03:05,910 --> 00:03:07,240
avots attēla.

61
00:03:07,240 --> 00:03:12,030
ALT atribūta vērtība ir tikai daži
alternatīvo tekstu, ja lietotājs nevar

62
00:03:12,030 --> 00:03:13,580
skatīt attēlu.

63
00:03:13,580 --> 00:03:19,680
Varat arī saistīt ar
attēlus, izmantojot pilnu URL, piemēram, šo.

64
00:03:19,680 --> 00:03:24,180
Tagad, ka mājas lapā nav īsti nepastāv,
bet, ja tur bija bilde

65
00:03:24,180 --> 00:03:27,760
man šajā adresē, es varētu izmantot
avota URL iekļaut

66
00:03:27,760 --> 00:03:29,930
tās tēls manā mājas lapā.

67
00:03:29,930 --> 00:03:35,590
Nu tā, jūs galu galā ar daudz
glītāka mājas lapā, kaut kas līdzīgs šim.

68
00:03:35,590 --> 00:03:39,730
>> Nu, tas ir diezgan foršs, bet es veida
un vēlaties kādu tekstu šeit, kā labi.

69
00:03:39,730 --> 00:03:43,020
Tāpēc pieņemsim tikai piebilst
super vienkārši iepriekš

70
00:03:43,020 --> 00:03:45,210
attēlu, piemēram, galvenes.

71
00:03:45,210 --> 00:03:50,830
Viss, ko es esmu darījusi līdz šim, ir izmantot galveni
tag, H1, un līnijas pārtraukumu tag, br.

72
00:03:50,830 --> 00:03:54,900
Header tag padara Fonts nedaudz
nedaudz lielāks un pamanāmāks.

73
00:03:54,900 --> 00:03:58,930
Line break tag, no otras puses
No otras puses, ir veida atdzist.

74
00:03:58,930 --> 00:04:03,720
Atšķirībā no vairuma citu tagus, jums nav
atvēršana un aizvēršana pauze tag, vienkārši

75
00:04:03,720 --> 00:04:05,120
viena parādīts iepriekš.

76
00:04:05,120 --> 00:04:10,420
Tas ir tāpēc, ka pārtraukums nav satura
un tādēļ, tukša elements.

77
00:04:10,420 --> 00:04:14,940
>> Tukšas elementi, piemēram, tas, jūs varat atvērt
un gandrīz vienlaicīgi vienkārši

78
00:04:14,940 --> 00:04:20,420
ieskaitot slīpsvītra pie
beigas sākotnējā deklarācijā.

79
00:04:20,420 --> 00:04:24,390
Tātad tagad manā mājas lapā izskatās nedaudz
kaut kas līdzīgs šim.

80
00:04:24,390 --> 00:04:27,410
Labāk, bet tas veida jūtas
kā strupceļā.

81
00:04:27,410 --> 00:04:30,850
Tur ir nekur citur iet malā
No šīs galvenajā lapā.

82
00:04:30,850 --> 00:04:33,075
Nu, pieņemsim noteikt, ka,
ieskaitot saiti.

83
00:04:33,075 --> 00:04:36,860
>> Ko es esmu gatavojas darīt, šeit ir izmantot
atribūtika apzīmē ar A un padarīt

84
00:04:36,860 --> 00:04:40,780
attēlu saiti uz, teiksim, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Tādā veidā, kad kāds noklikšķina uz mani,
viņu pārlūkprogramma tiks novirzīti

86
00:04:44,460 --> 00:04:47,810
citu, iespējams, vairāk
noderīgi, web lapas.

87
00:04:47,810 --> 00:04:51,040
Man bija, lai samazinātu izmēru
teksta mazliet, jo mūsu mājas lapā ir

88
00:04:51,040 --> 00:04:52,470
kļūst vairāk uzlabotas.

89
00:04:52,470 --> 00:04:54,590
Bet, cerams, tas joprojām ir skaidrs.

90
00:04:54,590 --> 00:04:59,460
Mana mājas lapa izskatās tieši tāds pats tikai
Tagad, kad es noklikšķiniet uz attēla,

91
00:04:59,460 --> 00:05:04,410
mana pārlūkprogramma atvērs vēl vienu
tab par CS50.tv mājas lapā.

92
00:05:04,410 --> 00:05:08,970
>> Visbeidzot, pieņemsim, ka es esmu gatavojas stilu
šajā mājas lapā vēlāk, izmantojot CSS.

93
00:05:08,970 --> 00:05:11,730
CSS ir tas, kas ir pazīstams kā
kaskādes stila lapas.

94
00:05:11,730 --> 00:05:15,230
Un tas būtībā sniedz efektīvu
veids, rediģēt un stils

95
00:05:15,230 --> 00:05:16,910
līdzīgi bloki kodu.

96
00:05:16,910 --> 00:05:21,290
Es gribu, lai sāktu organizēt savu HTML
vieglāk stils vēlāk.

97
00:05:21,290 --> 00:05:26,900
Lūk, es izveidot divas dažādas
identifikatori, lai palīdzētu organizēt savu kodu.

98
00:05:26,900 --> 00:05:31,170
Esmu izmantojis ID atribūts iekšpusē
nodaļa, vai div tag, un es esmu, ko izmanto

99
00:05:31,170 --> 00:05:34,120
Klases atribūts iekšpusē
cits div tag.

100
00:05:34,120 --> 00:05:37,190
>> ID un klases atribūti
strādā līdzīgi.

101
00:05:37,190 --> 00:05:41,210
Vienīgā atšķirība ir tā, jūs varat tikai
viens elements, īpaša ID, bet

102
00:05:41,210 --> 00:05:43,600
jebkuru no vairākiem elementiem
var dalīties klasi.

103
00:05:43,600 --> 00:05:47,690
Tā, piemēram, var izmantot klasi
attēlu vairākas reizes, bet es nevaru

104
00:05:47,690 --> 00:05:50,533
izveidojiet citu sadalījumu
ar ID augšpusē.

105
00:05:50,533 --> 00:05:54,750
Lai gan es neesmu gājusi uz CSS,
citā valodā, ko parasti izmanto

106
00:05:54,750 --> 00:05:59,700
kopā ar HTML, kad es sāku stils
mans kods ar CSS, es varu izmantot šos

107
00:05:59,700 --> 00:06:03,730
organizatoriskās atribūti ietekmēt
mana web lapas estētika.

108
00:06:03,730 --> 00:06:07,600
>> Viss ietvaros rajons augšu
būs līdzīgas stylings vai jebkura

109
00:06:07,600 --> 00:06:12,010
otra grupa HTML I grupas uz
klases attēla dalīsies līdzīgu izskatu.

110
00:06:12,010 --> 00:06:15,700
Tas ir daudz vieglāk, nekā mēģināt rediģēt
un stila attēlus vai bloki

111
00:06:15,700 --> 00:06:17,690
individuāli tekstu.

112
00:06:17,690 --> 00:06:21,480
>> Tātad, mēs devāmies pār pamatus par to, kā
padarīt mājas lapu ar HTML.

113
00:06:21,480 --> 00:06:25,280
HTML ir ķekars citas funkcijas too
ka tad, kad pārī ar citām valodām

114
00:06:25,280 --> 00:06:29,220
piemēram, CSS un JavaScript, tiešām var
padarīt lapas izceļas.

115
00:06:29,220 --> 00:06:32,960
Labākais veids, kā iegūt apmierināti ar
HTML ir tikai putru apmēram ar to,

116
00:06:32,960 --> 00:06:35,120
redzēt, kas darbojas un kas ne.

117
00:06:35,120 --> 00:06:36,570
>> Mans vārds ir Daven Farnham.

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

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

120
00:06:40,640 --> 00:06:45,690
>> Tā, piemēram, var izmantot
klase image -

121
00:06:45,690 --> 00:06:48,028
Nē, tur ir tik daudz īpašības.

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

123
00:06:52,500 --> 00:06:53,950
Mans vārds ir Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Tas ir CS 650.

125
00:06:58,560 --> 00:06:59,810
Es gribu teikt CSS.

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

127
00:07:02,325 --> 00:07:03,575
Tas ir CSS.

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