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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN Farnham: Šiandien aš ruošiuosi
kalbėti šiek tiek apie HTML,

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

4
00:00:12,330 --> 00:00:14,450
Jūs matote HTML visur šių dienų.

5
00:00:14,450 --> 00:00:17,190
Iš tiesų, jei jūs žiūrite šį
Vaizdo naršyklę, jūs

6
00:00:17,190 --> 00:00:19,120
matome HTML dabar.

7
00:00:19,120 --> 00:00:22,760
HTML nėra programavimo kalba,
o, tai žymėjimo kalba, naudojama pagal

8
00:00:22,760 --> 00:00:25,460
interneto naršyklių, kuri padėtų padaryti puslapius
internete.

9
00:00:25,460 --> 00:00:30,410
>> Taigi jums gali paklausti, kaip tiksliai rašyti
tinklalapio HTML skiriasi

10
00:00:30,410 --> 00:00:33,574
nuo rašymo programą į programų
kalba kaip C?

11
00:00:33,574 --> 00:00:38,010
Na, C kalba su labai griežti
sintaksiniai taisyklės, kurios turi būti

12
00:00:38,010 --> 00:00:39,880
surinkti, kol ji gali veikti.

13
00:00:39,880 --> 00:00:43,070
Jeigu jūs kada nors pamiršote įtraukti
kabliataškis vienu ataskaitoje pabaigos

14
00:00:43,070 --> 00:00:46,660
Jūsų kodas C, jūs žinote, ką aš kalbu
apie ir atsižvelgiant į griežtą sintaksę.

15
00:00:46,660 --> 00:00:50,360
>> Interneto naršyklių, nors yra šiek tiek daugiau
atlaidus, kai jis ateina į HTML.

16
00:00:50,360 --> 00:00:53,860
Net jei jūsų HTML nėra sintaksiškai
teisingai, jūsų puslapis vis dar gali būti

17
00:00:53,860 --> 00:00:57,150
rodomas naršyklėje, tačiau ji gali
neatrodo taip, kaip norėjote.

18
00:00:57,150 --> 00:00:59,640
Taigi, tai visada geriausia
laikytis taisyklių.

19
00:00:59,640 --> 00:01:01,990
Geriausias būdas gauti intuicija
kaip viskas darbas yra

20
00:01:01,990 --> 00:01:03,300
eiti per pavyzdį.

21
00:01:03,300 --> 00:01:07,360
>> Taigi, ką mes turime čia yra pagrindinė
koncepciją, internetinį puslapį.

22
00:01:07,360 --> 00:01:10,690
Jūs tikriausiai pastebėjote, daug dalykų
tarp kampu skliaustuose.

23
00:01:10,690 --> 00:01:12,900
Na, jie yra tik žodžius.

24
00:01:12,900 --> 00:01:15,810
Žymos esmės informuoti naršykles
kad, ei, kažkas

25
00:01:15,810 --> 00:01:17,150
ateina savo kelią.

26
00:01:17,150 --> 00:01:20,770
Atminkite, nors, kai atidarote
tag jums reikia jį uždaryti, kai esate

27
00:01:20,770 --> 00:01:21,750
padaryti jį naudoti.

28
00:01:21,750 --> 00:01:24,690
>> Taigi, pavyzdžiui, atidaryti skyrių
kodo su atvira

29
00:01:24,690 --> 00:01:26,960
laikiklis kūnas, skliaustai uždaromi.

30
00:01:26,960 --> 00:01:31,280
Aš tada pridėti tekstą, šiuo atveju, mano
Pirmasis interneto puslapis, tada, kai aš atvykau į

31
00:01:31,280 --> 00:01:35,540
uždaryti šį skyrių, aš naudoju beveik
identiški tegus išskyrus šį kartą su

32
00:01:35,540 --> 00:01:37,660
pirmyn velniop prieš kūną.

33
00:01:37,660 --> 00:01:41,140
Apskritai, tai yra formatas esate
ketinate naudoti, kai norite atidaryti

34
00:01:41,140 --> 00:01:42,680
ir uždarymo žymes.

35
00:01:42,680 --> 00:01:47,900
Kartu atvira žyma ir pabaigos žymė
kurti tai, kas vadinama elementas.

36
00:01:47,900 --> 00:01:51,870
>> Jei pažvelgti į pirmą eilutę, jūs turėsite
pamatyti šauktuką po

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

38
00:01:53,350 --> 00:01:56,280
Tai tikrai tiesiog pasakoja savo naršyklę
kad failas yra interneto puslapis

39
00:01:56,280 --> 00:01:58,280
parašytas HTML.

40
00:01:58,280 --> 00:02:01,970
HTML tegus iš esmės teigia,
čia ateina kai HTML.

41
00:02:01,970 --> 00:02:04,950
Tada mes turime galvą tegus su
pavadinimas tegus viduje.

42
00:02:04,950 --> 00:02:09,430
Vadovas tegus jūs galite galvoti, kaip
sudaro HTML kodas, kuris ateina

43
00:02:09,430 --> 00:02:12,670
iš jūsų interneto puslapis urmu
tikrasis turinys.

44
00:02:12,670 --> 00:02:16,700
>> Apskritai, jūs įdėti savo titulą
interneto puslapis čia, nors yra keletas

45
00:02:16,700 --> 00:02:19,350
kitų žodžius, gali pasirodyti
čia taip pat.

46
00:02:19,350 --> 00:02:25,020
Kitas ateina savo tinklalapį kūnas,
Tikrasis mėsa ir kaulai iš savo svetainės.

47
00:02:25,020 --> 00:02:28,910
Mūsų pavyzdyje, mes tiesiog paprastas
sakinys, My First Svetainė,

48
00:02:28,910 --> 00:02:34,100
kuris, jei mes paleisti mūsų svetainėje, atrodys
šiek tiek kažką panašaus į tai.

49
00:02:34,100 --> 00:02:36,810
Mūsų interneto puslapis nėra labai neįprasta,,
bet nesijaudinkite.

50
00:02:36,810 --> 00:02:39,210
Mes eglės it greičiau.

51
00:02:39,210 --> 00:02:44,070
>> Taigi pirmiau, HTML, mes suteiksime jums labai
Pagrindinis šablonas tinklalapį,

52
00:02:44,070 --> 00:02:46,310
nieko išgalvotas, tik pliki kaulai.

53
00:02:46,310 --> 00:02:49,160
Bet jei aš sukurti interneto puslapį,
Ką daryti, jei noriu pridėti

54
00:02:49,160 --> 00:02:50,760
nuotrauka, tarkim, sau?

55
00:02:50,760 --> 00:02:52,760
Na, aš galiu tai padaryti.

56
00:02:52,760 --> 00:02:55,460
Yra būdų, kaip pora
pridėti atvaizdus savo svetainėje.

57
00:02:55,460 --> 00:02:59,780
Jei paveikslėlis yra tame pačiame aplanke kaip
Jūsų HTML failą, galite susieti

58
00:02:59,780 --> 00:03:01,950
vaizdas per kelią, kaip šis.

59
00:03:01,950 --> 00:03:05,910
>> Jūs atverti su vaizdo žyma, po
per Alt atributas

60
00:03:05,910 --> 00:03:07,240
šaltinis vaizdą.

61
00:03:07,240 --> 00:03:12,030
Alt atributas vertė yra tik keletas
alternatyvus tekstas, jei vartotojas negali

62
00:03:12,030 --> 00:03:13,580
pamatyti vaizdą.

63
00:03:13,580 --> 00:03:19,680
Arba, jūs taip pat galite susieti su
vaizdai per visą URL, tai patinka.

64
00:03:19,680 --> 00:03:24,180
Dabar, kad svetainė nėra tikrai egzistuoja,
bet jei ten buvo apie paveikslėlį

65
00:03:24,180 --> 00:03:27,760
man šiuo adresu, aš galėtų naudoti
šaltinis URL yra

66
00:03:27,760 --> 00:03:29,930
jos įvaizdis mano svetainėje.

67
00:03:29,930 --> 00:03:35,590
Bet kuriuo atveju, jūs galų gale su daug
gražiau tinklalapis, kažkas panašaus į tai.

68
00:03:35,590 --> 00:03:39,730
>> Na, tai gana kietas, bet aš tipo
iš norite tekstą čia taip pat.

69
00:03:39,730 --> 00:03:43,020
Taigi galime tik pridėti kažką
super paprasta aukščiau

70
00:03:43,020 --> 00:03:45,210
įvaizdis, kaip antraštėje.

71
00:03:45,210 --> 00:03:50,830
Viskas, ką padarei tiek, kiek yra naudoti antraštę
žymė H1, ir eilutės lūžį žymeles, Br.

72
00:03:50,830 --> 00:03:54,900
Antraštė tegus leidžia šrifto mažai
tiek didesni ir ryškesni.

73
00:03:54,900 --> 00:03:58,930
Eilutės lūžį žymeles, kita
Kita vertus, yra tipo kietas.

74
00:03:58,930 --> 00:04:03,720
Skirtingai nuo daugelio kitų žymių, jūs neturite
atidarymo ir uždarymo pertrauka žymeles, tik

75
00:04:03,720 --> 00:04:05,120
viena parodyta aukščiau.

76
00:04:05,120 --> 00:04:10,420
Tai yra todėl, kad pertrauka neturi turinio
Todėl ir yra tuščias elementas.

77
00:04:10,420 --> 00:04:14,940
>> Tuščios elementų, tokių kaip šis, galite atidaryti
ir beveik tuo pačiu metu, tiesiog

78
00:04:14,940 --> 00:04:20,420
įskaitant pasviruoju brūkšniu ne
pabaigoje pradinės deklaracijos.

79
00:04:20,420 --> 00:04:24,390
Taigi dabar mano svetainė atrodo mažai
kažkas panašaus į tai.

80
00:04:24,390 --> 00:04:27,410
Geriau, bet jis tipo jaučiasi
kaip aklavietę.

81
00:04:27,410 --> 00:04:30,850
Nėra niekur kitur eiti žemę
iš šio pagrindiniame puslapyje.

82
00:04:30,850 --> 00:04:33,075
Na, galime nustatyti, kad
įskaitant nuorodą.

83
00:04:33,075 --> 00:04:36,860
>> Ką aš ruošiuosi daryti čia yra naudoti
atributas žymimas ir padaryti

84
00:04:36,860 --> 00:04:40,780
vaizdas nuorodą į, tarkim, CS50 televizorių.

85
00:04:40,780 --> 00:04:44,460
Tokiu būdu, kai kas nors paspaudžia ant manęs,
jų naršyklė bus nukreipti į

86
00:04:44,460 --> 00:04:47,810
kitą, tikriausiai daugiau
naudinga, interneto puslapis.

87
00:04:47,810 --> 00:04:51,040
Turėjau sumažinti dydį
tekstą šiek tiek, nes mūsų tinklalapis

88
00:04:51,040 --> 00:04:52,470
vis labiau pažengusios.

89
00:04:52,470 --> 00:04:54,590
Bet tikiuosi, tai visiškai aišku.

90
00:04:54,590 --> 00:04:59,460
Mano svetainė atrodo lygiai taip pat tik
dabar, kai aš spustelėkite ant nuotraukos,

91
00:04:59,460 --> 00:05:04,410
mano naršyklė atvers kitą
skirtuką CS50.tv puslapyje.

92
00:05:04,410 --> 00:05:08,970
>> Galiausiai, tarkime, aš ruošiuosi stilius
Ši svetainė vėliau naudojant CSS.

93
00:05:08,970 --> 00:05:11,730
CSS yra tai, kas vadinama
pakopinių stilių.

94
00:05:11,730 --> 00:05:15,230
Ir tai iš esmės suteikia efektyvus
būdas redaguoti ir stilius

95
00:05:15,230 --> 00:05:16,910
panašios blokai kodą.

96
00:05:16,910 --> 00:05:21,290
Noriu pradėti organizuoti savo HTML
Kad būtų lengviau stilius vėliau.

97
00:05:21,290 --> 00:05:26,900
Čia aš įsteigti dviejų skirtingų rūšių
identifikatoriai, kurie padės organizuoti savo kodą.

98
00:05:26,900 --> 00:05:31,170
Aš naudojau atributas ID viduje
padalinys, arba div tegus ir Aš naudojau

99
00:05:31,170 --> 00:05:34,120
Klasės atributas viduje
kitas div tegus.

100
00:05:34,120 --> 00:05:37,190
>> ID ir klasės atributai
dirbti panašiai.

101
00:05:37,190 --> 00:05:41,210
Vienintelis skirtumas yra tai, jūs galite turėti tik
vienas elementas, specifinis ID, bet

102
00:05:41,210 --> 00:05:43,600
bet elementų skaičius
gali dalintis klasę.

103
00:05:43,600 --> 00:05:47,690
Taigi, pavyzdžiui, galiu naudoti klasę
image kelis kartus, bet aš negaliu

104
00:05:47,690 --> 00:05:50,533
sukurti kitą padalinį
su ID viršuje.

105
00:05:50,533 --> 00:05:54,750
Nors aš ne dingo į CSS,
dažniausiai naudojamas kita kalba

106
00:05:54,750 --> 00:05:59,700
kartu su HTML, kai aš pradedu stilius
mano kodas su CSS, galiu naudoti šiuos

107
00:05:59,700 --> 00:06:03,730
organizaciniai atributai įtakos
Mano interneto puslapio estetika.

108
00:06:03,730 --> 00:06:07,600
>> Viskas pagal skyriaus viršuje
turės panašias stylings ar bet

109
00:06:07,600 --> 00:06:12,010
Kita grupė HTML I grupės į
klasė vaizdas praleisite panašią išvaizdą.

110
00:06:12,010 --> 00:06:15,700
Tai daug paprasčiau, nei bandyti keisti
ir stiliaus vaizdų ar blokai

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

112
00:06:17,690 --> 00:06:21,480
>> Taigi, mes nuėjome per, kaip pagrindai
padaryti tinklalapį su HTML.

113
00:06:21,480 --> 00:06:25,280
HTML turi kitų funkcijų krūva per
kad, kai suporuotas su kitomis kalbomis

114
00:06:25,280 --> 00:06:29,220
kaip CSS ir JavaScript, tikrai gali
padaryti puslapiai išsiskirti.

115
00:06:29,220 --> 00:06:32,960
Geriausias būdas gauti patogiai
HTML yra tiesiog pažaisti su juo,

116
00:06:32,960 --> 00:06:35,120
pamatyti, kas pasiteisina, o kas ne.

117
00:06:35,120 --> 00:06:36,570
>> Mano vardas Daven Farnham.

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

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

120
00:06:40,640 --> 00:06:45,690
>> Taigi, pavyzdžiui, aš galiu naudoti
klasė atvaizdas -

121
00:06:45,690 --> 00:06:48,028
Ne, ten yra tiek daug atributų.

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

123
00:06:52,500 --> 00:06:53,950
Mano vardas Daven Farnham.

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

125
00:06:58,560 --> 00:06:59,810
Noriu pasakyti, CSS.

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

127
00:07:02,325 --> 00:07:03,575
Tai yra CSS.

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