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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN Farnham: Ngayong araw, pupuntahan ko
makipag-usap nang kaunti tungkol sa HTML,

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

4
00:00:12,330 --> 00:00:14,450
Ang makikita mo ang HTML sa lahat ng dako mga araw na ito.

5
00:00:14,450 --> 00:00:17,190
Sa katunayan, kung pinapanood mo ito
video sa isang browser, ikaw ay

6
00:00:17,190 --> 00:00:19,120
nakakakita ng HTML sa ngayon.

7
00:00:19,120 --> 00:00:22,760
HTML ay hindi isang programming language,
sa halip, ito ay isang markup language na ginamit ng

8
00:00:22,760 --> 00:00:25,460
web browser na i-render ng pahina
sa internet.

9
00:00:25,460 --> 00:00:30,410
>> Kaya maaari mong tanungin, kung paano eksaktong ay sumusulat
isang web page sa HTML iba't ibang

10
00:00:30,410 --> 00:00:33,574
mula sa pagsusulat ng isang programa sa isang programming
wika tulad ng C?

11
00:00:33,574 --> 00:00:38,010
Well, C ay isang wika na may napaka-mahigpit
syntactical panuntunan na kailangang maging

12
00:00:38,010 --> 00:00:39,880
inipon bago ito maaaring tumakbo.

13
00:00:39,880 --> 00:00:43,070
Kung kailanman na iyong nakalimutan na magsama ng
tuldok-kuwit sa dulo ng isang pahayag sa

14
00:00:43,070 --> 00:00:46,660
iyong C code, alam mo kung ano ang ako ng pakikipag-usap
tungkol sa patungkol sa mahigpit na syntax.

15
00:00:46,660 --> 00:00:50,360
>> Web browser bagaman, ay isang bit higit pa
pagpapatawad pagdating sa HTML.

16
00:00:50,360 --> 00:00:53,860
Kahit na ang iyong HTML ay hindi syntactically
tama, ang iyong pahina ay maaari pa ring maging

17
00:00:53,860 --> 00:00:57,150
ipinapakita sa pamamagitan ng isang browser, ngunit maaari itong
hindi mukhang tulad ng nilayon mo.

18
00:00:57,150 --> 00:00:59,640
Kaya ito ay palaging pinakamahusay na upang
sundin ang mga panuntunan.

19
00:00:59,640 --> 00:01:01,990
Ang pinakamahusay na paraan upang makakuha ng intuwisyon
tungkol sa kung paano bagay trabaho ay upang

20
00:01:01,990 --> 00:01:03,300
pumunta sa pamamagitan ng isang halimbawa.

21
00:01:03,300 --> 00:01:07,360
>> Kaya kung ano ang mayroon kami dito ay isang pangunahing
magplano para sa isang web page.

22
00:01:07,360 --> 00:01:10,690
Maaaring napansin ng maraming mga bagay
sa pagitan ng angled bracket.

23
00:01:10,690 --> 00:01:12,900
Well, ang mga lamang ang mga tag.

24
00:01:12,900 --> 00:01:15,810
Alam talaga Tags mga web browser
na, hey, isang bagay

25
00:01:15,810 --> 00:01:17,150
Parating na ang iyong paraan.

26
00:01:17,150 --> 00:01:20,770
Tandaan bagaman, sa tuwing magbubukas ka ng isang
tag, kailangan mong isara ito sa sandaling ikaw ay

27
00:01:20,770 --> 00:01:21,750
tapos na gumagamit nito.

28
00:01:21,750 --> 00:01:24,690
>> Kaya halimbawa, buksan ko ang isang seksyon
ng code na may open

29
00:01:24,690 --> 00:01:26,960
bracket katawan, malapit bracket.

30
00:01:26,960 --> 00:01:31,280
Pagkatapos ay idagdag ako ng ilang teksto, sa kasong ito, ang aking
pagkatapos ay unang web page kapag pinuntahan ko

31
00:01:31,280 --> 00:01:35,540
isara ang seksyong ito, gagamitin ko ang halos isang
magkamukha tag maliban sa oras na ito na may isang

32
00:01:35,540 --> 00:01:37,660
pasulong iwa bago katawan.

33
00:01:37,660 --> 00:01:41,140
Sa pangkalahatan, ito ay ang format na ikaw ay
pagpunta sa gamitin sa tuwing ikaw ay pagbubukas

34
00:01:41,140 --> 00:01:42,680
at closing tag.

35
00:01:42,680 --> 00:01:47,900
Sama-sama, isang open tag at isang end tag
sumulat ng kung ano ang tinatawag na isang elemento.

36
00:01:47,900 --> 00:01:51,870
>> Kung tumingin ka sa unang linya, makakakuha ka
makakita ng isang exclamation point na sinusundan ng

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

38
00:01:53,350 --> 00:01:56,280
Ito ay talagang lamang na nagsasabi sa iyong browser
na ang file ay isang web page

39
00:01:56,280 --> 00:01:58,280
nakasulat sa HTML.

40
00:01:58,280 --> 00:02:01,970
Ang HTML na tag mahalagang sinasabi,
dito ay ilang mga HTML.

41
00:02:01,970 --> 00:02:04,950
Pagkatapos kami ay may isang head tag sa
isang tag na pamagat sa loob nito.

42
00:02:04,950 --> 00:02:09,430
Ang ulo tag na maaari mong isipin bilang
na binubuo ng HTML code na nauuna para sa

43
00:02:09,430 --> 00:02:12,670
sa karamihan ng iyong mga pahina ng web
aktwal na nilalaman.

44
00:02:12,670 --> 00:02:16,700
>> Sa pangkalahatan, ilalagay mo ang pamagat ng iyong
dito web page, kahit na mayroong ilang mga

45
00:02:16,700 --> 00:02:19,350
iba pang mga tag na maaaring lumitaw ang
dito pati na rin.

46
00:02:19,350 --> 00:02:25,020
Susunod ay katawan ng iyong pahina ng web, ang
aktwal na karne at mga buto ng iyong website.

47
00:02:25,020 --> 00:02:28,910
Sa aming halimbawa, nai-lamang inilalagay namin ang isang simpleng
pangungusap, Aking Unang Webpage,

48
00:02:28,910 --> 00:02:34,100
kung saan, kung nagpapatakbo namin ang aming site, ang magiging hitsura
isang maliit na isang bagay na katulad nito.

49
00:02:34,100 --> 00:02:36,810
Ang aming mga web page ay hindi masyadong masama ang pakiramdam,
ngunit huwag mag-alala.

50
00:02:36,810 --> 00:02:39,210
Susubukan naming pustura ito up sa lalong madaling panahon.

51
00:02:39,210 --> 00:02:44,070
>> Kaya ang HTML sa itaas, bibigyan ka namin ng isang napaka
basic template para sa isang web page,

52
00:02:44,070 --> 00:02:46,310
walang magarbong, lamang ang hubad buto.

53
00:02:46,310 --> 00:02:49,160
Ngunit kung Lumilikha ako ng isang web page,
paano kung gusto kong magdagdag ng isang

54
00:02:49,160 --> 00:02:50,760
larawan ng, sabihin nating, aking sarili?

55
00:02:50,760 --> 00:02:52,760
Well, maaari kong gawin iyon.

56
00:02:52,760 --> 00:02:55,460
Mayroong ilang mga paraan upang
magdagdag ng mga imahe sa iyong site.

57
00:02:55,460 --> 00:02:59,780
Kung ang mga imahe ay sa parehong folder bilang
ang iyong mga file na HTML, maaari mong iugnay sa

58
00:02:59,780 --> 00:03:01,950
larawan sa pamamagitan ng path na tulad nito.

59
00:03:01,950 --> 00:03:05,910
>> Buksan up mo na may isang tag na imahe ay sumunod
sa pamamagitan ng sa Alt attribute sa

60
00:03:05,910 --> 00:03:07,240
pinagmulan ng larawan.

61
00:03:07,240 --> 00:03:12,030
Ang halaga ng katangian ng Alt lamang ang ilang mga
alternatibong teksto sa kaso ng isang user hindi maaari

62
00:03:12,030 --> 00:03:13,580
makita ang mga imahe.

63
00:03:13,580 --> 00:03:19,680
Bilang kahalili, maaari mo ring mag-link sa
mga larawan sa pamamagitan ng isang buong URL, tulad nito.

64
00:03:19,680 --> 00:03:24,180
Ngayon, ang mga website na hindi talaga umiiral,
ngunit kung mayroong isang larawan ng

65
00:03:24,180 --> 00:03:27,760
sa akin sa address na iyon, maaari ko bang gamitin ang
ang source URL upang isama

66
00:03:27,760 --> 00:03:29,930
imahe nito sa aking website.

67
00:03:29,930 --> 00:03:35,590
Alinmang paraan, napupunta sa iyo ng isang magkano
prettier website, isang bagay na katulad nito.

68
00:03:35,590 --> 00:03:39,730
>> Well, na medyo cool, ngunit uri ko
ng gusto ng ilang teksto dito pati na rin.

69
00:03:39,730 --> 00:03:43,020
Kaya hayaan magdagdag ng lamang ng isang bagay
sobrang simple sa itaas ng

70
00:03:43,020 --> 00:03:45,210
imahe, tulad ng sa header.

71
00:03:45,210 --> 00:03:50,830
Ang lahat ng mga nagawa ko sa ngayon ay gamitin ang header
tag, H1, at isang line break tag, br.

72
00:03:50,830 --> 00:03:54,900
Ang header tag Ginagawa ang font ng kaunti
bit na mas malaki at mas kitang-kita.

73
00:03:54,900 --> 00:03:58,930
Ang line break tag, sa kabilang
banda, ay uri ng mga cool.

74
00:03:58,930 --> 00:04:03,720
Hindi tulad ng karamihan ng iba pang mga tag, hindi mo na kailangang
may bakante at pagsasara ng break na tag, lamang

75
00:04:03,720 --> 00:04:05,120
ang isa na ipinapakita sa itaas.

76
00:04:05,120 --> 00:04:10,420
Ito ay dahil na bakasyon ay walang nilalaman
at samakatuwid, ang isang walang laman na element.

77
00:04:10,420 --> 00:04:14,940
>> Walang-laman na mga elemento tulad nito, maaari mong buksan
at malapit nang sabay-sabay sa pamamagitan lamang ng

78
00:04:14,940 --> 00:04:20,420
kabilang ang isang pasulong na slash sa
dulo ng paunang deklarasyon.

79
00:04:20,420 --> 00:04:24,390
Kaya ngayon ang hitsura ng kaunti ang aking website
isang bagay na katulad nito.

80
00:04:24,390 --> 00:04:27,410
Mas mahusay, ngunit ito uri ng nararamdaman
tulad ng isang patay na dulo.

81
00:04:27,410 --> 00:04:30,850
Mayroong wala saan man pumunta sa isang tabi
mula sa pangunahing pahina.

82
00:04:30,850 --> 00:04:33,075
Well, ni-ayos na sa pamamagitan ng ipaalam
kabilang ang isang link.

83
00:04:33,075 --> 00:04:36,860
>> Ano pupuntahan ko gawin dito ay gumamit ng isang
ipatungkol naitala sa pamamagitan ng A at gawin ang mga

84
00:04:36,860 --> 00:04:40,780
larawan ng isang link sa, sabihin nating, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Sa ganoong paraan, sa tuwing sinuman nag-click sa akin,
ay nakadirekta ang kanilang mga browser upang

86
00:04:44,460 --> 00:04:47,810
isa pa, marahil higit pa
kapaki-pakinabang, web page.

87
00:04:47,810 --> 00:04:51,040
Nagkaroon ako upang i-minimize ang laki ng
text ng kaunti dahil ang aming web page ay

88
00:04:51,040 --> 00:04:52,470
pagkuha ng mas advanced na.

89
00:04:52,470 --> 00:04:54,590
Ngunit sana, ito ay malinaw pa rin.

90
00:04:54,590 --> 00:04:59,460
Mukhang eksaktong pareho Aking website lamang
ngayon, sa tuwing nag-click ako sa mga larawan,

91
00:04:59,460 --> 00:05:04,410
Bubuksan nito ang aking browser ng isa pang
tab para sa CS50.tv web page.

92
00:05:04,410 --> 00:05:08,970
>> Panghuli, sabihin nating Pupunta ako sa estilo
mamaya website na ito gamit ang CSS.

93
00:05:08,970 --> 00:05:11,730
CSS ay kung ano ay kilala bilang isang
style cascading sheet.

94
00:05:11,730 --> 00:05:15,230
At ito talaga ay nagbibigay ng isang mahusay na
paraan upang i-edit at estilo

95
00:05:15,230 --> 00:05:16,910
katulad na mga bloke ng code.

96
00:05:16,910 --> 00:05:21,290
Gusto kong simulan ang pag-aayos ng aking HTML upang
gawing mas madali upang estilo sa susunod.

97
00:05:21,290 --> 00:05:26,900
Dito, ako magse-set up ng dalawang mga iba't ibang mga uri ng
mga pantukoy upang makatulong na ayusin ang aking code.

98
00:05:26,900 --> 00:05:31,170
Ginamit ko na ang mga katangian ID sa loob ng isang
division, o div tag, at ginamit ko ang isang

99
00:05:31,170 --> 00:05:34,120
Klase ng katangian sa loob
isa pang div tag.

100
00:05:34,120 --> 00:05:37,190
>> Mga katangian ID at Class
gumana nang katulad.

101
00:05:37,190 --> 00:05:41,210
Ang pagkakaiba lamang ay maaari ka lamang magkaroon
ang isang elemento, ang mga partikular na ID, ngunit

102
00:05:41,210 --> 00:05:43,600
anumang numero ng mga elemento
maaaring magbahagi ng klase.

103
00:05:43,600 --> 00:05:47,690
Kaya halimbawa, maaari ko bang gamitin ang klase
larawan nang maraming beses, ngunit hindi ko na

104
00:05:47,690 --> 00:05:50,533
lumikha ng isa pang division
may tuktok ID.

105
00:05:50,533 --> 00:05:54,750
Kahit na hindi ko pa nawala na sa CSS,
isa pang wika karaniwang ginagamit

106
00:05:54,750 --> 00:05:59,700
sa tabi ng HTML, sa sandaling sisimulan ko ang estilo
ang aking code sa CSS, maaari ko bang gamitin ang mga

107
00:05:59,700 --> 00:06:03,730
pangsamahang mga katangian sa impluwensiya
aesthetics aking mga web pahina.

108
00:06:03,730 --> 00:06:07,600
>> Lahat sa loob ng division tuktok
ay magkakaroon ng katulad na stylings o anumang

109
00:06:07,600 --> 00:06:12,010
iba pang mga grupo ng mga HTML ko group sa
class na imahe ay magbabahagi ng isang katulad na hitsura.

110
00:06:12,010 --> 00:06:15,700
Ito ay lubhang mas madaling kaysa sinusubukang i-edit
at estilo ng mga imahe o mga bloke ng

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

112
00:06:17,690 --> 00:06:21,480
>> Kaya nagpunta kami sa ibabaw ng mga pangunahing kaalaman sa kung paano
upang gumawa ng isang web page sa HTML.

113
00:06:21,480 --> 00:06:25,280
May ng grupo ng mga iba pang mga tampok HTML masyadong
na kapag ipinares sa iba pang mga wika

114
00:06:25,280 --> 00:06:29,220
tulad ng CSS at JavaScript, maaari talaga
gawing kakaiba ang mga pahina.

115
00:06:29,220 --> 00:06:32,960
Ang pinakamahusay na paraan upang makakuha ng komportable sa
HTML ay isa lamang sa gulo sa paligid na may ito,

116
00:06:32,960 --> 00:06:35,120
makita kung ano ang gumagana, at kung ano ang hindi.

117
00:06:35,120 --> 00:06:36,570
>> Ang pangalan ko ay Daven Farnham.

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

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

120
00:06:40,640 --> 00:06:45,690
>> Kaya halimbawa, maaari ko bang gamitin ang
ang klase ng imahe -

121
00:06:45,690 --> 00:06:48,028
Hindi, may mga kaya maraming mga attributes.

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

123
00:06:52,500 --> 00:06:53,950
Ang pangalan ko ay Daven Farnham.

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

125
00:06:58,560 --> 00:06:59,810
Gusto kong sabihin CSS.

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

127
00:07:02,325 --> 00:07:03,575
Ito ay CSS.

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