1
00:00:00,000 --> 00:00:03,486
>> [CHWARAE CERDDORIAETH]

2
00:00:03,486 --> 00:00:10,460

3
00:00:10,460 --> 00:00:14,250
>> DAVID J Malan: Mae hwn yn CS50 ac
mae hyn yn ddechrau wythnos 7.

4
00:00:14,250 --> 00:00:15,060
Felly croesawu.

5
00:00:15,060 --> 00:00:17,540
Ac efallai y byddwch yn cofio bod
yn broblem yn gosod pedwar,

6
00:00:17,540 --> 00:00:21,510
roedd yn dipyn o helfa sborion
ar gyfer rhai gwobrau gwych lle

7
00:00:21,510 --> 00:00:24,219
ar ôl i chi adennill y lluniau o
staff yma ac yn New Haven,

8
00:00:24,219 --> 00:00:27,468
cawsoch eich herio i ddod o hyd i gynifer o
gwyddonwyr cyfrifiadurol hynny fel y gallai.

9
00:00:27,468 --> 00:00:29,550
Ac rydym wedi cael yn ei gyfanrwydd
criw o gyflwyniadau.

10
00:00:29,550 --> 00:00:31,930
Meddwl y byddwn i'n rhannu ychydig
gyda chi yma heddiw.

11
00:00:31,930 --> 00:00:35,100
>> A byddwn yn postio pob un o'r rhain ar-lein.

12
00:00:35,100 --> 00:00:39,310
Ond yn benodol, roeddwn i eisiau
dynnu eich sylw i'r canlynol-- yn dda un,

13
00:00:39,310 --> 00:00:42,670
Roedd Sam yn eithaf ychydig ohonynt
Yn gyffredinol peri fel hyn.

14
00:00:42,670 --> 00:00:45,750
Ond mae'n ymddangos bod fel o
y bore yma, yr enillydd

15
00:00:45,750 --> 00:00:51,170
Roedd yn rhywun arbennig o'r enw Ken gyda
24 o'r staff eu dal ar gamera

16
00:00:51,170 --> 00:00:54,600
neu ychydig yn fwy pan fyddwch yn cymryd i mewn
cyfrif staff lluosog yn y lluniau.

17
00:00:54,600 --> 00:00:58,300
Yn y llun yma yw Ken nesaf
i Mary yn New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Yn awr, Ken, fodd bynnag, yn troi
allan yn dipyn o achos cornel

19
00:01:01,300 --> 00:01:02,880
Nid yw hynny wedi digwydd eto o'r blaen.

20
00:01:02,880 --> 00:01:05,713
Mae'n troi allan nad oedd yn digwydd
i mi roi print mân yn broblem

21
00:01:05,713 --> 00:01:09,710
gosod pedwar sy'n dweud bod y staff yn
anghymwys ar gyfer y gwobrau gwych

22
00:01:09,710 --> 00:01:13,130
gan fod Ken, wrth gwrs, yn un o
ffotograffwyr ar ein staff.

23
00:01:13,130 --> 00:01:16,820
Yn awr, gyda dweud hynny, efe a
Ysgrifennodd yn wreiddiol i mi ddweud

24
00:01:16,820 --> 00:01:19,180
peidiwch bostio lluniau hyn ar-lein.

25
00:01:19,180 --> 00:01:21,630
Yr wyf yn meddwl i raddau helaeth
oherwydd bod y rhan fwyaf o'r lluniau

26
00:01:21,630 --> 00:01:24,499
bod ffotograffydd hwn yn cymryd yn edrych
rhywbeth bach fel hyn.

27
00:01:24,499 --> 00:01:25,040
Ac yn y blaen.

28
00:01:25,040 --> 00:01:28,990
>> Ond byddai Ken hoffi i mi eich sicrhau
bod ei fod yn ffotograffydd da iawn,

29
00:01:28,990 --> 00:01:33,190
ei fod yn weithiwr proffesiynol, mae'n cymryd
lluniau nad ydynt yn aneglur,

30
00:01:33,190 --> 00:01:37,270
sy'n well mewn ffocws, ac efe
Cymerodd dipyn o ychydig o ein staff ein hunain.

31
00:01:37,270 --> 00:01:40,370
Ond yn hytrach na dim ond cydnabod
Ken, yr hyn yr ydym yn meddwl y byddwn ni'n ei wneud

32
00:01:40,370 --> 00:01:43,390
yn mynd drwy'r rhestr o
myfyrwyr gwirioneddol a gyflwynodd.

33
00:01:43,390 --> 00:01:48,640
Ac mae'n ymddangos fod Lance gyda
Lluniau 15 fel y bore yma

34
00:01:48,640 --> 00:01:50,030
oedd ein enillydd.

35
00:01:50,030 --> 00:01:55,730
>> Ac yn y llun yma yw Lance gyda Colton,
gyda Skaz, gyda mi fy hun, a gyda Sam.

36
00:01:55,730 --> 00:02:00,230
Ond yna mae'n troi allan bod fel o
11:46, felly dim ond ychydig yn ôl,

37
00:02:00,230 --> 00:02:04,380
Es yn ôl at fy e-bost a dod o hyd
nad oedd gennym eto un cyflwyniad mwy

38
00:02:04,380 --> 00:02:08,300
gan fyfyriwr a enwir Bonnie
Dywedodd y mae ei e-bost yn unig hyn.

39
00:02:08,300 --> 00:02:10,800
Ddim yn mynd i orwedd, rwy'n
gwneud hyn yn ystod y dosbarth.

40
00:02:10,800 --> 00:02:17,620
Ac yna ymlaen i atodi yn unig
Lluniau 14, un swil o Lance 15.

41
00:02:17,620 --> 00:02:22,690
>> Ond mewn lluniau Bonnie, mae'n troi
Roedd aelodau o staff allan lluosog, Sam

42
00:02:22,690 --> 00:02:25,960
yn eu plith, felly yr hyn yr ydym yn meddwl ein
Byddai ei wneud yw cydnabod y ddau o'r rhain.

43
00:02:25,960 --> 00:02:29,240
Felly, yn ogystal â chael y Dropbox
lle y bydd pawb a gymerodd ran

44
00:02:29,240 --> 00:02:33,900
derbyn, bydd y ddwy adran hon hefyd
yn derbyn cinio darperir ar braf iddynt

45
00:02:33,900 --> 00:02:36,100
a'u adran
Ffrindiau wythnos hon sydd i ddod.

46
00:02:36,100 --> 00:02:38,970
Ac felly, byddwch yn clywed gennym,
Lance a Bonnie, am hynny.

47
00:02:38,970 --> 00:02:40,002
Congrats mor fawr iddynt.

48
00:02:40,002 --> 00:02:42,210
Yn awr, y rhai ohonoch a fyddai'n
fel cinio yn fwy cyffredinol

49
00:02:42,210 --> 00:02:45,320
gwybod bod cinio CS50 yng Nghaergrawnt
a New Haven yw dydd Gwener hwn.

50
00:02:45,320 --> 00:02:48,510
Ewch i wefan RSVP slaes CS50 yn.

51
00:02:48,510 --> 00:02:49,800
Ac yn awr gair ar seminarau.

52
00:02:49,800 --> 00:02:50,730
Yn fwy cwricwlaidd.

53
00:02:50,730 --> 00:02:52,490
Felly rydym yn agosáu at
pwynt y semester

54
00:02:52,490 --> 00:02:55,200
lle y dylech ddechrau
meddwl am brosiectau terfynol.

55
00:02:55,200 --> 00:02:59,309
Ac yn wir, mewn dim ond ychydig, bydd
hyn a elwir cynigion cyn yn ddyledus.

56
00:02:59,309 --> 00:03:01,850
Cynigion Felly cyn i fod i
effaith fod yn eithaf isel ac yn wir

57
00:03:01,850 --> 00:03:04,109
yn unig yn gyfle i
chi i gyfansoddi nodyn byr

58
00:03:04,109 --> 00:03:06,900
eich cyd-addysgu i roi gwybod
iddo ef neu hi beth rydych chi'n chi'n meddwl

59
00:03:06,900 --> 00:03:09,140
Efallai eisiau ei wneud ar gyfer eich prosiect terfynol.

60
00:03:09,140 --> 00:03:11,730
>> Yn awr, mae llawer o fyfyrwyr yn y pen draw
wneud ar y we sy'n seiliedig ar brosiectau terfynol.

61
00:03:11,730 --> 00:03:13,800
Ac wrth gwrs, rydym yn unig
wythnos yn awr ddiwethaf yn hyn

62
00:03:13,800 --> 00:03:15,890
a thu hwnt blymio i mewn i raglenni ar y we.

63
00:03:15,890 --> 00:03:18,200
Felly, i beidio â phoeni os ydych yn
i ddim syniad o gwbl sut

64
00:03:18,200 --> 00:03:21,594
byddech yn adeiladu'r syniadau a
allai fod gennych yn eich meddwl.

65
00:03:21,594 --> 00:03:24,510
Mae hyn yn wir yn unig yn swyddogaeth orfodi
i wneud i chi feddwl a siarad

66
00:03:24,510 --> 00:03:25,650
gyda'ch TF am y peth.

67
00:03:25,650 --> 00:03:28,810
Ond i chi helpu gyda hynny, a
gyda phrosiectau terfynol yn y pen draw,

68
00:03:28,810 --> 00:03:31,750
gwybod bod CS50 draddodiad
o gynnig seminarau.

69
00:03:31,750 --> 00:03:36,084
>> Ac mae'r rhain yn ddewisol, ymarferol,
neu ddarlithio yn seiliedig ar gyfleoedd

70
00:03:36,084 --> 00:03:39,000
i ddysgu mwy am bynciau sy'n cael eu
ychydig o ategol i'r cwrs

71
00:03:39,000 --> 00:03:43,310
maes llafur, ond serch hynny wych
deunydd i yrru prosiectau terfynol.

72
00:03:43,310 --> 00:03:46,840
Ac felly mae hwn yn rhestr sy'n
Staff CS50 yma yn New Haven

73
00:03:46,840 --> 00:03:48,600
wedi dod o hyd i
eleni am iOS

74
00:03:48,600 --> 00:03:50,730
rhaglennu, Android
rhaglennu, datblygu gêm,

75
00:03:50,730 --> 00:03:54,480
a sypiau o fwy offer
ac ieithoedd a thechnegau.

76
00:03:54,480 --> 00:03:56,780
>> Felly cadwch lygad ar wefan y CS50 yn.

77
00:03:56,780 --> 00:04:00,110
Ac yn y cyfamser, os hoffech chi
gofrestru eich diddordeb yn unrhyw un o'r rhain,

78
00:04:00,110 --> 00:04:02,510
mynd i'r gofrestr slaes CS50 yn.

79
00:04:02,510 --> 00:04:05,770
A byddwn wedyn yn dilyn i fyny o ran y
dyddiau ac amseroedd hedfan a lleoliadau

80
00:04:05,770 --> 00:04:09,090
ac everything-- mwyaf bopeth fydd
fod ffrydio ac hefyd ar gael ar y galw

81
00:04:09,090 --> 00:04:11,750
ar ôl os na allwch chi mewn gwirionedd yn ei gwneud yn.

82
00:04:11,750 --> 00:04:15,800
Felly, heb ado pellach, rydym yn
chwith oddi tro diwethaf gyda GET.

83
00:04:15,800 --> 00:04:19,610
>> A hyn oedd fel y neges a oedd yn
tu mewn i'r amlen rhithwir, yn galw i gof,

84
00:04:19,610 --> 00:04:23,960
ein bod yn trosglwyddo o llwybrydd i llwybrydd i
llwybrydd rhwng porwr gwe a gwe

85
00:04:23,960 --> 00:04:24,487
gweinydd.

86
00:04:24,487 --> 00:04:26,695
A bod neges edrych yn
ychydig iawn o rhywbeth fel hyn.

87
00:04:26,695 --> 00:04:29,700
Dyma oedd y neges yn fwy dirgel sy'n
oedd mewn gwirionedd y tu mewn o amlen

88
00:04:29,700 --> 00:04:34,440
hysgrifennu ar ddarn o bapur y mae ei
llinell gyntaf yn dweud llythrennol, yn cael slaes.

89
00:04:34,440 --> 00:04:37,830
>> Ac yn union fel gwiriad pwyll,
beth wnaeth slaes ddynodi?

90
00:04:37,830 --> 00:04:40,455
Beth mae slaes yn ei olygu pan
gofyn am y wefan?

91
00:04:40,455 --> 00:04:43,070

92
00:04:43,070 --> 00:04:44,250
Rydych yn gofyn am hynny drwy'r amser.

93
00:04:44,250 --> 00:04:47,333
Mae'r rhan fwyaf unrhyw tro y byddwch yn ymweld â gwefan, rydych
Nid oes mewn gwirionedd deipio enw ffeil.

94
00:04:47,333 --> 00:04:50,960
Mae'n debyg y byddwch yn unig yn mynd i Facebook.com,
fynd i mewn, gmail.com, neu debyg.

95
00:04:50,960 --> 00:04:52,260
A beth mae slaes yn ei gynrychioli?

96
00:04:52,260 --> 00:04:53,506
Beth ffeil?

97
00:04:53,506 --> 00:04:54,630
Neu pa dudalen, yn benodol?

98
00:04:54,630 --> 00:04:59,642

99
00:04:59,642 --> 00:05:00,720
>> Mae'r mynegai, yeah.

100
00:05:00,720 --> 00:05:01,810
Felly y dudalen diofyn.

101
00:05:01,810 --> 00:05:04,810
Felly, os nad ydych yn nodi ffeil
enwi, fel y byddwn yn dechrau gweld,

102
00:05:04,810 --> 00:05:07,750
eich bod mewn gwirionedd yn unig yn gofyn am
rhoi'r dudalen diofyn Facebook mi

103
00:05:07,750 --> 00:05:10,800
neu roi fy inbox mi neu roi
'm' r dudalen diofyn newyddion

104
00:05:10,800 --> 00:05:12,510
ar wefan CNN neu debyg.

105
00:05:12,510 --> 00:05:15,220
A gweinydd wedyn yn ymateb i
bod neges gyda rhywbeth

106
00:05:15,220 --> 00:05:18,420
fel hyn, gan ddweud ie, yr wyf yn
siarad fersiwn HTTP 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, sydd yn statws
Cod yr ydym bodau dynol anaml

108
00:05:21,130 --> 00:05:22,790
erioed wedi gweld oherwydd ei fod yn dda.

109
00:05:22,790 --> 00:05:26,640
Oherwydd mae'n golygu OK, mae'r cais
Derbyniwyd a thrin yn briodol.

110
00:05:26,640 --> 00:05:28,960
A'r math o gynnwys
yn ôl pob golwg yn yr ymateb

111
00:05:28,960 --> 00:05:31,170
yn eithaf aml, ond nid bob amser, testun.

112
00:05:31,170 --> 00:05:32,580
Ac yn benodol, HTML.

113
00:05:32,580 --> 00:05:34,760
A dyna mewn gwirionedd
lle yr ydym yn edrych ar heddiw.

114
00:05:34,760 --> 00:05:37,140
>> Felly, mewn gwirionedd, yr wyf i'n mynd i fynd
yn ei flaen ac yn agor porwr.

115
00:05:37,140 --> 00:05:40,410
Rydw i'n mynd i ddefnyddio Chrome, gallwch ddefnyddio
unrhyw borwr mwyaf yn ystod yr wythnosau i ddod.

116
00:05:40,410 --> 00:05:42,410
Yn gyffredinol, argymhellwn Chrome
am ei fod yn arbennig o

117
00:05:42,410 --> 00:05:43,750
da ar gyfer datblygwyr meddalwedd.

118
00:05:43,750 --> 00:05:46,070
Mae wedi cael llawer o adeiladwyd yn
offer sy'n ei gwneud yn haws

119
00:05:46,070 --> 00:05:49,800
i ddatblygu nid yn unig HTML a CSS,
pethau byddwn yn dechrau siarad am heddiw,

120
00:05:49,800 --> 00:05:51,530
ond hefyd ieithoedd eraill hefyd.

121
00:05:51,530 --> 00:05:55,530
>> Ac yr wyf i'n mynd i fynd yn ei flaen ac yn mynd i'r canlynol--
Rydw i'n mynd i Reoli clic neu i'r dde

122
00:05:55,530 --> 00:05:57,210
cliciwch unrhyw le ar dudalen we.

123
00:05:57,210 --> 00:05:59,070
Ac yr wyf i'n mynd i fynd i Archwilio Elfen.

124
00:05:59,070 --> 00:06:03,850
Ac yr wyf i'n mynd i tweak fy
sgrin ychydig bach yma.

125
00:06:03,850 --> 00:06:05,790
Gadewch i mi symud hyn i'r gwaelod.

126
00:06:05,790 --> 00:06:08,140
Felly, mae hyn yn beth a elwir
Arolygydd Chrome ar.

127
00:06:08,140 --> 00:06:11,010
Felly, mae hyn yn debyg i debugging
offeryn adeiladu i mewn Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Mae pob un gennych yn barod hwn
os ydych wedi bod yn defnyddio Chrome.

129
00:06:13,520 --> 00:06:17,169
Ac mae'n eich galluogi i weld beth sy'n mynd
ar o dan y cwfl o ryw dudalen we.

130
00:06:17,169 --> 00:06:19,210
Felly gadewch i ni mewn gwirionedd yn cymryd
edrych ar hyn fel a ganlyn.

131
00:06:19,210 --> 00:06:21,251
Mae ganddo ffordd fwy o nodweddion
ac yr ydym yn gofalu amdano heddiw.

132
00:06:21,251 --> 00:06:22,760
Ond mae tabs hyn dros yma.

133
00:06:22,760 --> 00:06:25,890
Elfennau, rhwydwaith, ffynonellau,
llinell amser, a rhai pethau eraill.

134
00:06:25,890 --> 00:06:27,800
Rydw i'n mynd i glicio ar
Rhwydweithio am eiliad.

135
00:06:27,800 --> 00:06:30,500
>> Ac mae'n ychydig yn llethol
ar yr olwg gyntaf yma.

136
00:06:30,500 --> 00:06:34,190
Ond yr hyn yr wyf i'n mynd i wneud ei osod
mi symleiddio ychydig.

137
00:06:34,190 --> 00:06:37,560
Rydw i'n mynd i droi ar y
cofnodi golau fel ei bod yn goch.

138
00:06:37,560 --> 00:06:39,140
Ac yr wyf i'n mynd i ddweud cadw log.

139
00:06:39,140 --> 00:06:41,015
Ac mae hyn yn unig yw ychydig
beth yr wyf yn cyfrifedig allan

140
00:06:41,015 --> 00:06:44,120
dros gyfnod o amser sy'n mynd i achub
popeth sy'n digwydd yn y porwr.

141
00:06:44,120 --> 00:06:50,030
Ac yn awr dw i'n mynd i fynd
i http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> A dweud y gwir, gadewch i ni wneud www
ar gyfer mesur da, slaes.

143
00:06:52,690 --> 00:06:53,643
Enter.

144
00:06:53,643 --> 00:06:56,180
Felly URL y mae llawer o
Efallai eich bod wedi ymweld â nhw.

145
00:06:56,180 --> 00:06:58,830
Ac yn awr y we Facebook
dudalen yn dod i fyny ar y brig.

146
00:06:58,830 --> 00:07:02,350
Ac yna criw cyfan o
pethau hedfanodd gan ar y gwaelod.

147
00:07:02,350 --> 00:07:04,830
Ac yn wir, mae'n ymddangos fod
pan fyddwch yn ymweld Facebook.com,

148
00:07:04,830 --> 00:07:09,320
nid ydych ond yn gwneud un cais HTTP,
mae'n ymddangos fod mynd i Facebook.com

149
00:07:09,320 --> 00:07:14,320
anfon 41 o amlenni hynny,
pob un â'i chais get ei hun,

150
00:07:14,320 --> 00:07:18,360
fel y nodwyd, er bod hynny y tu ôl i'r sgrîn
yma, ar waelod y sgrin,

151
00:07:18,360 --> 00:07:24,040
mae'n dangos bod, yn wir, fy
porwr wnaed 41 y ceisiadau.

152
00:07:24,040 --> 00:07:29,689
>> Ac i gyd, mae'n trosglwyddwyd 861
Cymerodd kilobytes ac am ryw reswm

153
00:07:29,689 --> 00:07:31,730
cymaint ag wyth eiliad
i lwytho i lawr hynny i gyd.

154
00:07:31,730 --> 00:07:33,790
Felly dyna mewn gwirionedd ychydig yn od
y byddai safle Facebook yn cymryd hynny

155
00:07:33,790 --> 00:07:35,600
hir, ond felly boed yn yr achos hwn.

156
00:07:35,600 --> 00:07:39,520
Yn awr, mae hyn oll nid wyf yn wir gofal
am eithrio ar gyfer y cais topmost.

157
00:07:39,520 --> 00:07:46,440
Felly gadewch i ni fynd i hon i'r dde yma
a gadewch i mi chwyddo allan am ychydig funudau'n.

158
00:07:46,440 --> 00:07:47,754
>> A gadewch i mi chwyddo i mewn ar hyn.

159
00:07:47,754 --> 00:07:50,670
Felly, yr hyn yr wyf wedi ei wneud ar y chwith er bod
mae llawer yn digwydd dros yma

160
00:07:50,670 --> 00:07:53,360
yn Rwyf wedi tynnu sylw at
Facebook.com ac yna

161
00:07:53,360 --> 00:07:56,540
sylwi fy mod yn sgrolio i lawr,
sgrolio i lawr, sgrolio i lawr,

162
00:07:56,540 --> 00:07:58,330
i ofyn am penawdau.

163
00:07:58,330 --> 00:08:01,720
A byddwch yn gweld bod Chrome yn dangos
fi yn ei hanfod y cynnwys mewnol

164
00:08:01,720 --> 00:08:02,810
y cais wnes i.

165
00:08:02,810 --> 00:08:06,130
Dyw hi ddim yn fformatio yn union yr un
ffordd, ond yn sylwi mae sôn am ei gael,

166
00:08:06,130 --> 00:08:09,481
sylwi mae sôn am y llu,
Facebook.com, mae'r llwybr, neu slaes,

167
00:08:09,481 --> 00:08:10,730
sef y ffeil yr wyf yn gofyn.

168
00:08:10,730 --> 00:08:12,930
>> Ac yna os byddaf yn sgrolio
yn ôl i fyny, rydym annhymerus 'mewn gwirionedd

169
00:08:12,930 --> 00:08:17,270
gweld bod yr hyn a ddychwelwyd Facebook
i mi yw pob un o'r penawdau hyn.

170
00:08:17,270 --> 00:08:21,040
Felly, y tu mewn o hynny amlen rhithwir
yn wir llawer o barau gwerth allweddol.

171
00:08:21,040 --> 00:08:23,130
Gair, colon, ac yna mae werth.

172
00:08:23,130 --> 00:08:25,050
Gair, colon, ac mae gwerth.

173
00:08:25,050 --> 00:08:26,160
Gelwir y rhain yn penawdau.

174
00:08:26,160 --> 00:08:31,860
Ac mae modd mwy o fanylion yma nag
rydym mewn gwirionedd yn poeni am hyn o bryd.

175
00:08:31,860 --> 00:08:33,750
>> Ond mae hyn yn ail i
cafodd yr un olaf i lawr yno,

176
00:08:33,750 --> 00:08:38,809
sylwi, bod gweinydd Facebook.com yn,
yn wir dweud yma hon rhyw HTML testun.

177
00:08:38,809 --> 00:08:41,409
Felly, hyn i gyd yw dweud
pan fyddwch yn gofyn am y we

178
00:08:41,409 --> 00:08:44,300
Tudalen o borwr i
gweinydd, y gweinydd yn ymateb

179
00:08:44,300 --> 00:08:47,630
gydag amlen ei hun
tu mewn sydd yn destun.

180
00:08:47,630 --> 00:08:49,020
Mewn geiriau eraill, HTML.

181
00:08:49,020 --> 00:08:50,590
Iaith Arwyddnodi HyperText.

182
00:08:50,590 --> 00:08:53,200
Pa un yw iaith arall
ein bod yn cyflwyno heddiw

183
00:08:53,200 --> 00:08:57,740
bod bodau dynol neu gyfrifiaduron cynhyrchu
er mwyn gweithredu tudalennau gwe.

184
00:08:57,740 --> 00:08:59,580
>> Yn benodol, gadewch i ni edrych ar hyn.

185
00:08:59,580 --> 00:09:03,277
Rydw i'n mynd i fynd yn ôl yn awr
at wefan Facebook.

186
00:09:03,277 --> 00:09:05,360
Ac yr wyf i'n mynd i jyst
rheoli clic neu dde chlecia

187
00:09:05,360 --> 00:09:07,634
a chliciwch ar View Tudalen Source.

188
00:09:07,634 --> 00:09:10,550
A hyd yn oed os nad ydych yn defnyddio Chrome,
Gall IE wneud hyn, gall Firefox yn gwneud hyn,

189
00:09:10,550 --> 00:09:14,060
Gall Safari yn gwneud hyn, er bod y fwydlen
Gallai opsiynau edrych ychydig yn wahanol.

190
00:09:14,060 --> 00:09:18,990
Ac mae hyn yn y HTML a Mark a
cwmni ar Facebook wedi ysgrifennu.

191
00:09:18,990 --> 00:09:24,640
>> Ac atynt gyda'i gilydd, iaith hon yma
yn gweithredu'r glas a gwyn y dudalen

192
00:09:24,640 --> 00:09:26,370
ein bod yn gweld eiliad yn ôl.

193
00:09:26,370 --> 00:09:28,030
Yn awr, mae hyn yn ychydig yn llethol.

194
00:09:28,030 --> 00:09:31,400
Ond os ydym yn edrych i fyny ar chwith uchaf, rydym yn
mynd i ddechrau i weld rhai batrymau.

195
00:09:31,400 --> 00:09:34,140
Mae'n edrych fel mae llawer
o'r rhain ar agor bachyn ongl

196
00:09:34,140 --> 00:09:35,970
ac yna mae hwn HTML gair allweddol.

197
00:09:35,970 --> 00:09:38,330
Dyma agored arall
bachyn ongl a pen.

198
00:09:38,330 --> 00:09:41,560
>> Dyma, os ydym yn sgroliwch i lawr
ac i lawr ac i lawr, rwy'n

199
00:09:41,560 --> 00:09:43,820
mynd i fynd yn ei flaen a rhoi cynnig
i chwilio am rywbeth.

200
00:09:43,820 --> 00:09:48,510
Mae yna ffordd drosodd ar y dde
yma yw corff braced agored.

201
00:09:48,510 --> 00:09:50,800
A galw i gof o ddiwethaf
amser a gynigiwyd i ni

202
00:09:50,800 --> 00:09:53,364
bod y dudalen gwefan symlaf
y gallai pobl yn ysgrifennu

203
00:09:53,364 --> 00:09:55,030
Gallai edrych ychydig yn debyg i hyn.

204
00:09:55,030 --> 00:09:58,430
Tag HTML Agored, pen agored
tag, tag teitl agored,

205
00:09:58,430 --> 00:10:03,230
Yna teitl gau, pen caeedig, ar agor
tag corff, rhywfaint o destun, corff ar gau,

206
00:10:03,230 --> 00:10:04,720
HTML caeedig.

207
00:10:04,720 --> 00:10:06,290
>> Ond saib yma am ychydig funudau'n.

208
00:10:06,290 --> 00:10:09,030
Mae'r cod hwn, hyd yn oed os ydych chi wedi
nid yw byth yn ysgrifenedig cyn

209
00:10:09,030 --> 00:10:11,864
ond dal ddim yn deall yn iawn
beth sy'n digwydd, yn edrych yn eithaf da.

210
00:10:11,864 --> 00:10:12,821
Iawn, mae'n lân iawn.

211
00:10:12,821 --> 00:10:14,120
Mae'n arddull iawn 'n glws.

212
00:10:14,120 --> 00:10:16,190
Mae llawer o pant a gofod gwyn.

213
00:10:16,190 --> 00:10:18,020
Nid yw Facebook yn.

214
00:10:18,020 --> 00:10:23,190
Felly pam mae cymaint Facebook
yn waeth nag yr oeddwn yn ysgrifennu HTML?

215
00:10:23,190 --> 00:10:24,310
Mae'n debyg.

216
00:10:24,310 --> 00:10:26,899
>> Iawn, mae hyn yn debyg un
allan o bump ar gyfer arddull.

217
00:10:26,899 --> 00:10:29,315
Mae 'na reswm grymus
iddynt dorri corneli hyn.

218
00:10:29,315 --> 00:10:31,069

219
00:10:31,069 --> 00:10:33,860
Mae pob hawl, felly dydyn nhw ddim eisiau i
gwneud yn haws i chi ei ddarllen.

220
00:10:33,860 --> 00:10:36,940
Felly, mewn rhyw ystyr, maen nhw'n
gelu'r iddo, math o sgramblo ei

221
00:10:36,940 --> 00:10:40,260
o leiaf yn esthetaidd felly
ei bod yn anoddach i Myspace

222
00:10:40,260 --> 00:10:42,705
i fynd a RIP oddi ar eu
hafan a'r HTML ar ei gyfer.

223
00:10:42,705 --> 00:10:45,080
Mae'n ymddangos bod â rhaglenni
fodd bynnag, yn cynnwys Chrome,

224
00:10:45,080 --> 00:10:47,020
gallwn lanhau hyn i fyny super hawdd.

225
00:10:47,020 --> 00:10:49,420
Felly nid yn eithaf ei fod fel y rheswm.

226
00:10:49,420 --> 00:10:51,290
Beth arall allai fod yn achos.

227
00:10:51,290 --> 00:10:51,790
Yeah.

228
00:10:51,790 --> 00:10:54,680

229
00:10:54,680 --> 00:10:55,890
Yeah, data costau gofod gwyn.

230
00:10:55,890 --> 00:10:56,598
Beth ydych chi'n ei olygu?

231
00:10:56,598 --> 00:11:02,250

232
00:11:02,250 --> 00:11:02,979
Yeah, yn union.

233
00:11:02,979 --> 00:11:06,020
Os ydych yn taro llawer neu'r fysell Tab
bar gofod, ystyried y goblygiadau.

234
00:11:06,020 --> 00:11:10,060
Felly pob allwedd ar eich bysellfwrdd yn
[Anghlywadwy] Hydred fel un beit.

235
00:11:10,060 --> 00:11:14,560
>> Felly mae'n debyg bod Mark neu unrhyw un o'r devs
y dyddiau hyn yn taro'r spacebar unwaith yn unig

236
00:11:14,560 --> 00:11:17,899
yn y dudalen HTML sy'n
yn cynrychioli homepage Facebook.

237
00:11:17,899 --> 00:11:19,690
A Facebook wedi llawer
o ddefnyddwyr y dyddiau hyn.

238
00:11:19,690 --> 00:11:24,030
Felly mae'n debyg bod homepage Facebook
yn cael ymweliad gan biliwn o bobl heddiw.

239
00:11:24,030 --> 00:11:27,020
A rhywun yn Facebook wedi
taro'r bar gofod unwaith yn unig.

240
00:11:27,020 --> 00:11:29,890
>> Felly, un beit ychwanegol,
biliwn o geisiadau,

241
00:11:29,890 --> 00:11:32,790
faint mwy o ddata yw Facebook
trosglwyddo dros y rhyngrwyd

242
00:11:32,790 --> 00:11:37,160
oherwydd bod rhywun yn taro'r
spacebar ar ei bysellfwrdd?

243
00:11:37,160 --> 00:11:41,660
A biliwn bytes, neu un gigabeit o
data yn cael ei anfon o weinyddion Facebook

244
00:11:41,660 --> 00:11:43,626
i bobl o gwmpas y
byd heb reswm da.

245
00:11:43,626 --> 00:11:44,750
Nawr, dyna un lle yn unig.

246
00:11:44,750 --> 00:11:48,866
>> Dychmygwch os ydym mewn gwirionedd yn glanhau hyn
beth i fyny ac yn mewnoli ac ychwanegu

247
00:11:48,866 --> 00:11:50,990
llawer o le gwyn a
cymeriadau tab a mannau,

248
00:11:50,990 --> 00:11:53,656
chi gigabeit gwariant y pen draw,
os nad terra bytes mwy o le.

249
00:11:53,656 --> 00:11:56,640
Ac felly super gyffredin yn y
byd go iawn o ddatblygiad ar y we

250
00:11:56,640 --> 00:11:58,950
yw minify eich cod.

251
00:11:58,950 --> 00:12:01,280
A byddwn yn y pen draw yn gweld
sut y gallech chi wneud hyn.

252
00:12:01,280 --> 00:12:04,630
>> Ond heddiw, byddwn yn dechrau ysgrifennu cod
dyna mewn gwirionedd yn ddarllenadwy gennym ni bobl.

253
00:12:04,630 --> 00:12:10,120
Mae'n troi allan, fodd bynnag, os byddwch yn mynd yn ôl
i offeryn hwn yn Chrome Archwiliwch Elfen,

254
00:12:10,120 --> 00:12:12,030
yn flaenorol, roeddem ar y tab Rhwydwaith.

255
00:12:12,030 --> 00:12:15,430
Mae'n ymddangos bod os byddwch yn mynd i'r
elfennau tab, yr hyn yr ydych mewn gwirionedd yn gweld

256
00:12:15,430 --> 00:12:19,230
yn Chrome yn ei argraffu 'n bert
Fersiwn o'r un HTML.

257
00:12:19,230 --> 00:12:20,640
Felly, rydym wedi deobfuscated iddo.

258
00:12:20,640 --> 00:12:22,472
Felly does dim cyfatebol ar gyfer cyfrifiadur.

259
00:12:22,472 --> 00:12:24,430
Ac yn awr y gallwch mewn gwirionedd
cliciwch gwmpas a dechrau

260
00:12:24,430 --> 00:12:27,630
i weld yr hierarchaeth sy'n tudalen ar y we.

261
00:12:27,630 --> 00:12:28,780
Felly gadewch i ni mewn gwirionedd yn gwneud hyn.

262
00:12:28,780 --> 00:12:32,120
Rydw i'n mynd i fynd yn ei flaen ac yn agor i fyny ar
fy Mac rhaglen o'r enw golygu testun.

263
00:12:32,120 --> 00:12:35,490
A dwyn i gof bod hyn yn unig
rhaglen testun yn super syml.

264
00:12:35,490 --> 00:12:37,490
Windows Mae gan notepad.exe.

265
00:12:37,490 --> 00:12:39,820
Ac yr wyf i'n mynd i air am air
teipiwch y canlynol.

266
00:12:39,820 --> 00:12:44,650
Doc math HTML, braced agored
HTML, ar gau HTML braced,

267
00:12:44,650 --> 00:12:49,000
mae gennym y pennaeth y dudalen yma,
diwedd y pennaeth y dudalen yma,

268
00:12:49,000 --> 00:12:52,310
Bydd teitl yn debyg, helo byd.

269
00:12:52,310 --> 00:12:56,660
>> Ac yna i lawr yma, mae angen
corff y dudalen we.

270
00:12:56,660 --> 00:12:58,050
Corff caeedig.

271
00:12:58,050 --> 00:13:00,700
Ac yna i mewn yma, helo byd.

272
00:13:00,700 --> 00:13:01,270
Iawn.

273
00:13:01,270 --> 00:13:03,350
Felly rydym wedi ysgrifennu tudalen gwe super gyflym.

274
00:13:03,350 --> 00:13:06,675
Rydw i'n mynd i gadw fel
hello.html ar fy n ben-desg.

275
00:13:06,675 --> 00:13:09,050
Fy Mac yn mynd i gwyno,
feddwl bod, arhoswch funud,

276
00:13:09,050 --> 00:13:11,091
mae hon yn ffeil destun, ei wneud
yr ydych am ei alw Txt?

277
00:13:11,091 --> 00:13:13,300
Ond na, yr wyf am ei ddefnyddio dot HTML.

278
00:13:13,300 --> 00:13:16,140
>> Ac yna beth braf pe bawn
jyst clicio ddwywaith y ffeil,

279
00:13:16,140 --> 00:13:18,600
hello.html, dyma fy dudalen we.

280
00:13:18,600 --> 00:13:22,564
Yn anffodus, yr wyf yn y
unig berson yn y byd

281
00:13:22,564 --> 00:13:23,980
sy'n gallu ymweld â'r dudalen hon ar hyn o bryd.

282
00:13:23,980 --> 00:13:26,734
Oherwydd ble mae'n byw yn ôl pob golwg?

283
00:13:26,734 --> 00:13:27,650
Mae'n ar fy Mac, dde?

284
00:13:27,650 --> 00:13:28,470
Pa yn ddiwerth.

285
00:13:28,470 --> 00:13:30,390
Fel nad oes neb yn yr ystafell hon
heb sôn ar y rhyngrwyd

286
00:13:30,390 --> 00:13:31,598
Gall mewn gwirionedd yn ymweld y dudalen honno.

287
00:13:31,598 --> 00:13:33,820
Felly heddiw, mae angen i ni
cyflwyno elfen arall.

288
00:13:33,820 --> 00:13:36,720
>> Ac i wneud hyn, dwi'n mynd i
mynd yn ei flaen ac yn agor i fyny cwmwl 9.

289
00:13:36,720 --> 00:13:40,090
Felly cwmwl 9 wrth gwrs yn
cloud service-- seiliedig CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- Mae hynny wedi ein holl gweithfannau
rhedeg rhywle ar y we.

291
00:13:44,890 --> 00:13:48,330
Ac mae hynny'n golygu bod pob un o'n ffeiliau
yn hygyrch i'r cyhoedd yn barod.

292
00:13:48,330 --> 00:13:49,830
Felly gadewch i ni fynd yn ei flaen ac yn gwneud hyn.

293
00:13:49,830 --> 00:13:53,670
Rydw i'n mynd i fynd yn ei flaen a
creu ffeil newydd NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Rydw i'n mynd i gadw fel o'r blaen
fel hello.html a chliciwch arbed.

295
00:13:58,819 --> 00:14:01,860
Ac yn awr yn unig i arbed amser, rwy'n mynd
i fynd yn ei flaen a chopïo gludwch y cod hwn

296
00:14:01,860 --> 00:14:03,470
yn hytrach na Ail-deipiwch hynny.

297
00:14:03,470 --> 00:14:04,550
A'i gadw.

298
00:14:04,550 --> 00:14:07,550
Ac felly nawr mae gen i
ffeil o'r enw hello.html.

299
00:14:07,550 --> 00:14:09,710
Ond sut mae gwneud mewn gwirionedd
agor fel tudalen ar y we?

300
00:14:09,710 --> 00:14:14,120
Wel, mae'n troi allan y cynnwys yn CS50
Nid yw IDE yn unig casglwr fel chlang

301
00:14:14,120 --> 00:14:16,670
a debugger fel GDB a
tusw o raglenni eraill,

302
00:14:16,670 --> 00:14:21,140
mae mewn gwirionedd yn fledged llawn
gweinydd gwe yn rhedeg o fewn CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Mae pob un ohonoch, hynny yw,
cael eich gweinyddwr gwe eu hunain.

304
00:14:23,900 --> 00:14:26,850
A gweinydd gwe yn unig yw darn
o feddalwedd y mae ei bwrpas mewn bywyd

305
00:14:26,850 --> 00:14:28,220
yw gwasanaethu i fyny tudalennau gwe.

306
00:14:28,220 --> 00:14:32,490
I wrando am geisiadau gan borwyr a
ymateb gydag ychydig amlenni rhithwir

307
00:14:32,490 --> 00:14:35,290
tu mewn sef y
cynnwys fy mod i wedi ysgrifennu.

308
00:14:35,290 --> 00:14:38,372
Felly, mae hyn gweinydd gwe yn
ffynhonnell mewn gwirionedd yn rhad ac am ddim ac yn agored.

309
00:14:38,372 --> 00:14:40,830
Lle ffynhonnell agored yn unig yn golygu
meddalwedd y mae rhywun arall wedi

310
00:14:40,830 --> 00:14:43,480
ysgrifenedig bod pob un ohonom yn gallu
mewn gwirionedd yn gweld a llwytho i lawr a hyd yn oed

311
00:14:43,480 --> 00:14:44,780
newid y cod ffynhonnell.

312
00:14:44,780 --> 00:14:46,150
Ac fe'i gelwir Apache.

313
00:14:46,150 --> 00:14:51,450
>> Ac rydym wedi ei gwneud yn ychydig yn haws i
defnyddio yn CS50IDE drwy ffonio ei Apache 50.

314
00:14:51,450 --> 00:14:53,780
Fel ei bod yn gallu mewn gwirionedd
deall y canlynol.

315
00:14:53,780 --> 00:14:56,560
Rydw i'n mynd i ddweud Apache 50 cychwyn.

316
00:14:56,560 --> 00:14:58,910
Ac yna Im 'jyst yn mynd i ddweud dot.

317
00:14:58,910 --> 00:15:01,080
Ac rydym yn gweld rhai braidd
Neges dirgel yn dweud

318
00:15:01,080 --> 00:15:04,640
gosod Apache ddogfen [? grŵp?]
i'r cartref, ubuntu, beth bynnag hynny yw,

319
00:15:04,640 --> 00:15:05,770
slaes lle gwaith.

320
00:15:05,770 --> 00:15:08,280
Dechrau gweinydd gwe
Apache 2 yn llwyddiannus.

321
00:15:08,280 --> 00:15:11,330
>> Felly stori hir yn fyr, yr wyf yn
newydd gwthio botwm

322
00:15:11,330 --> 00:15:18,000
ac yn troi ar weinydd gwe pwy sydd bellach
gwrando ar y rhyngrwyd ar TCP porthladd

323
00:15:18,000 --> 00:15:20,587
80 mewn cyfeiriad penodol.

324
00:15:20,587 --> 00:15:22,420
Ac mae'n dweud yma, ac
bydd hyn yn newid yn seiliedig

325
00:15:22,420 --> 00:15:26,550
ar eich enw defnyddiwr a ffactorau eraill,
ond yn sylwi nawr os ydw i'n clicio hyn,

326
00:15:26,550 --> 00:15:30,211
IDE50 dot jharvard ac yn y blaen ac
felly, yn sylwi bod yr holl amser hwn

327
00:15:30,211 --> 00:15:31,960
am y gorffennol nifer o
wythnosau, efallai y bydd gennych

328
00:15:31,960 --> 00:15:35,200
sylwi bod eich enw defnyddiwr eich hun
wedi'i wreiddio yn y dde uchaf

329
00:15:35,200 --> 00:15:37,130
cornel CS50IDE.

330
00:15:37,130 --> 00:15:41,050
>> Ac mae hyn sydd mewn gwirionedd wedi bod i gyd
amser y cyfeiriad lle y gallwch

331
00:15:41,050 --> 00:15:43,574
ymweld â phob un o'ch ffeiliau ar y we.

332
00:15:43,574 --> 00:15:45,990
Hyd yn hyn, nid yw wedi yn bwysig,
oherwydd yn C, yr ydych yn gyffredinol

333
00:15:45,990 --> 00:15:48,073
am i bethau redeg mewn
terfynell, nid ar y we.

334
00:15:48,073 --> 00:15:50,800
Ond heddiw, rydym yn dechrau
ysgrifennu cod ar y we

335
00:15:50,800 --> 00:15:53,350
ein bod yn dymuno
hygyrch URLs cyhoeddus.

336
00:15:53,350 --> 00:15:56,100
Felly, yr hyn yr wyf i'n mynd i
ei wneud yw clicio URL hwn.

337
00:15:56,100 --> 00:16:00,880
>> Ac yn sylwi fy mod yn gweld yn deg
mynegai hyll, cyfeiriadur rhestru,

338
00:16:00,880 --> 00:16:04,090
ond yr hyn file neidio allan ar chi yn ôl pob tebyg?

339
00:16:04,090 --> 00:16:05,210
Hello.html.

340
00:16:05,210 --> 00:16:07,870
Mae hynny oherwydd fy mod achub
y ffeil yn fy lle gwaith.

341
00:16:07,870 --> 00:16:12,310
A hyn yr wyf wedi dweud wrth y Apache gwe gweinyddwr
yn edrych yn y cyfeiriadur lle gwaith Dewi.

342
00:16:12,310 --> 00:16:15,300
Ac yn gadael i unrhyw un yn y
byd yn gweld y ffeiliau hynny.

343
00:16:15,300 --> 00:16:19,050
>> Ac yn wir, os wyf yn awr
cliciwch ar hello.html,

344
00:16:19,050 --> 00:16:22,180
Rwy'n gweld o fewn y tab hwn yn union y ffeil.

345
00:16:22,180 --> 00:16:26,430
Nawr yn sylwi, cwmwl thrwy hynny yn 9 oed
rhywbeth ychydig yn ddefnyddiol i ni.

346
00:16:26,430 --> 00:16:29,480
O fewn y IDE CS50, yn sylwi mae
yn sydyn bar cyfeiriad.

347
00:16:29,480 --> 00:16:33,690
Mae hyn oherwydd hyd yn oed er ein bod
gan ddefnyddio Chrome i ymweld â CS50IDE,

348
00:16:33,690 --> 00:16:37,940
tu mewn CS50IDE yw ei ben ei hun
fersiwn o'r porwr gwe ar hyn o bryd.

349
00:16:37,940 --> 00:16:40,820
Ac felly yn hytrach na
cymhlethu pethau fel y cyfryw,

350
00:16:40,820 --> 00:16:42,955
Rydw i'n mynd i fynd yn ei flaen
a jyst adysgrifia URL hwn.

351
00:16:42,955 --> 00:16:45,330
Rydw i'n mynd i fynd yn ei flaen a dim ond
agor fy ffenestr Chrome hun.

352
00:16:45,330 --> 00:16:47,800
Felly does dim hud yma, dim CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Im 'jyst yn mynd i bastio llythrennol
fy J Harvard URL a daro Chofnoda.

354
00:16:51,800 --> 00:16:54,750
Ac yn voila, yn awr yr wyf, a
mewn theori, mae pawb

355
00:16:54,750 --> 00:16:57,700
ar y rhyngrwyd, os ydw i wedi ffurfweddu
caniatâd yn briodol,

356
00:16:57,700 --> 00:16:58,720
Gall ymweld â'r ffeil.

357
00:16:58,720 --> 00:17:03,230
Ac felly yn awr, os wyf yn dweud
hello.html, voila, mae

358
00:17:03,230 --> 00:17:06,366
yw fy dudalen we hynod underwhelming.

359
00:17:06,366 --> 00:17:07,740
Felly, gadewch i ni wneud gwiriad bwyll cyflym.

360
00:17:07,740 --> 00:17:09,710
Oherwydd hynny i gyd
yn gosod cysyniadol i fyny.

361
00:17:09,710 --> 00:17:13,180
Ac mae gennym mewn gwirionedd ddim wir
ddysgu i chi sut i ysgrifennu HTML fel y cyfryw.

362
00:17:13,180 --> 00:17:16,084
Unrhyw gwestiynau hyd yn hyn
ar yr hyn sy'n digwydd yn unig?

363
00:17:16,084 --> 00:17:18,549

364
00:17:18,549 --> 00:17:19,049
Ydw.

365
00:17:19,049 --> 00:17:24,290

366
00:17:24,290 --> 00:17:25,800
A yw CS50 yn berchen ar y tudalennau gwe hyn?

367
00:17:25,800 --> 00:17:26,460
Ym mha ystyr?

368
00:17:26,460 --> 00:17:28,947

369
00:17:28,947 --> 00:17:29,530
Cwestiwn da.

370
00:17:29,530 --> 00:17:32,429
Felly CS50 yn berchen ar CS50.io.

371
00:17:32,429 --> 00:17:33,970
Rydym wedi wir yn prynu enw parth.

372
00:17:33,970 --> 00:17:37,240
A thrwy natur ohonoch guys
logio mewn i CS50IDE,

373
00:17:37,240 --> 00:17:39,270
chi i gyd yn cael yr hyn a elwir yn is-barth.

374
00:17:39,270 --> 00:17:46,840
>> Felly IDE50-Malan, neu IDE50-Rob.CS50.io,
dyna eich gyfeiriad unigryw o fewn

375
00:17:46,840 --> 00:17:47,730
ein henw parth.

376
00:17:47,730 --> 00:17:50,850
Felly, at ddibenion y cwrs,
eich bod wedi eich gyfeiriad unigryw ei hun.

377
00:17:50,850 --> 00:17:55,150
Ond rydym wedi symleiddio pethau gan
prynu'r parth lefel uchaf, CS50 dot

378
00:17:55,150 --> 00:17:58,050
I / O ac yna pawb arall yn
y tu mewn o hynny, fel petai.

379
00:17:58,050 --> 00:17:59,890
A byddwn yn dod yn ôl at hynny
mewn cwpl o wythnosau yn ôl pob tebyg,

380
00:17:59,890 --> 00:18:01,930
yn enwedig yn y prosiect terfynol
amser, pan fydd rhai ohonoch

381
00:18:01,930 --> 00:18:03,596
Efallai am gael eich enwau parth eich hun.

382
00:18:03,596 --> 00:18:06,270
Mae'n mewn gwirionedd yn gymharol
syml.

383
00:18:06,270 --> 00:18:06,770
Iawn.

384
00:18:06,770 --> 00:18:07,880
Felly, gadewch i ni yn awr yn gwneud hyn.

385
00:18:07,880 --> 00:18:11,910
Rydw i'n mynd i fynd yn ôl i mewn i
CS50IDE, lle mae fy ffeil ar hyn o bryd,

386
00:18:11,910 --> 00:18:14,710
hello.html, nid yw'r cyfan sydd yn ddiddorol.

387
00:18:14,710 --> 00:18:17,130
Hoffwn i wneud rhywbeth
ychydig yn brafiach na hynny.

388
00:18:17,130 --> 00:18:19,440
Felly, yr wyf i'n mynd i wneud rhywbeth fel hyn.

389
00:18:19,440 --> 00:18:21,510
Gadewch i mi paragraphs.html agored.

390
00:18:21,510 --> 00:18:23,560
Felly, mae hyn yn ffeil yr ysgrifennais ymlaen llaw.

391
00:18:23,560 --> 00:18:26,480
Ar ben hynny, fel
bob amser, mae gennym sylwadau.

392
00:18:26,480 --> 00:18:28,730
Ond yn HTML, sylwadau
edrych ychydig yn wahanol.

393
00:18:28,730 --> 00:18:33,270
Ar-lein tri a llinell 14, yr ydych
gweld y cystrawen ar gyfer cychwyn sylw

394
00:18:33,270 --> 00:18:34,020
ac yn y pen sylw.

395
00:18:34,020 --> 00:18:36,820
>> Ond nid yw'r un o'r pethau mewn
rhwng y materion swyddogaethol.

396
00:18:36,820 --> 00:18:40,250
Dim ond nodyn i
dynol beth sy'n digwydd fan hyn.

397
00:18:40,250 --> 00:18:43,040
Ac yn union fel bwyll cyflym
gwirio, os wyf yn sgroliwch i lawr,

398
00:18:43,040 --> 00:18:46,820
beth yw'r newydd amlwg
tag ein bod wedi cyflwyno?

399
00:18:46,820 --> 00:18:52,130
Mae'r tagiau hyd yn hyn rydym wedi gweld ar agor
HTML braced, pen, teitl, a chorff.

400
00:18:52,130 --> 00:18:54,400
Ond yr hyn sy'n amlwg yn newydd nawr?

401
00:18:54,400 --> 00:18:55,200
>> Yeah, felly t.

402
00:18:55,200 --> 00:18:57,320
Mae'r tag p neu baragraff tag.

403
00:18:57,320 --> 00:19:01,182
Ac yna Fi jyst benthyg rhywfaint diofyn
Testun Lladin yn gyfystyr fy paragraffau.

404
00:19:01,182 --> 00:19:03,390
Oherwydd yr hyn roeddwn i eisiau
dangos sut rydych efallai

405
00:19:03,390 --> 00:19:05,859
cynrychioli baragraffau o destun mewn HTML.

406
00:19:05,859 --> 00:19:08,400
Ac felly beth sy'n dechrau digwydd
yma yw bod yna eisoes

407
00:19:08,400 --> 00:19:09,657
patrwm sy'n datblygu.

408
00:19:09,657 --> 00:19:10,990
A gadewch i mi fynd yn ei flaen ac yn gwneud hyn.

409
00:19:10,990 --> 00:19:12,760
Gadewch i mi droi yn gyntaf off Apache.

410
00:19:12,760 --> 00:19:17,340
Ac yr wyf i'n mynd i ddweud iddo ddechrau ei hun
eto y tu mewn o ffynhonnell heddiw saith

411
00:19:17,340 --> 00:19:18,420
cyfeiriadur m.

412
00:19:18,420 --> 00:19:20,100
Felly, yr wyf yn cael mynediad at bopeth.

413
00:19:20,100 --> 00:19:22,230
>> Ac yn awr, os wyf yn mynd yn ôl i
cyfeiriadur hwn rhestru,

414
00:19:22,230 --> 00:19:24,846
sylwi fy mod yn gweld pob ffeil o heddiw ymlaen.

415
00:19:24,846 --> 00:19:26,720
A byddwch yn gweld yn y
set broblem nesaf, rydym yn chi helpu

416
00:19:26,720 --> 00:19:28,594
rhoi cyfarwyddiadau i chi
ar gyfer gwneud yn union hynny.

417
00:19:28,594 --> 00:19:35,210
Os byddaf yn agor paragraphs.html, gallai hyn
yn ogystal edrych fel iaith raglennu

418
00:19:35,210 --> 00:19:36,970
i chi os nad ydych yn siarad neu ddarllen Ladin.

419
00:19:36,970 --> 00:19:40,525
Ond mae hyn yn dim ond tri paragraffau
o destun sydd wedi'u marcio i fyny yn HTML.

420
00:19:40,525 --> 00:19:43,100
>> Ac yn sylwi ar y paragraff
seibiannau rhyngddynt.

421
00:19:43,100 --> 00:19:46,400
Oherwydd ei fod yn troi allan,
a hyd yn oed er eich bod

422
00:19:46,400 --> 00:19:49,210
allai fod yn tueddu i wneud hyn,
tra yn y byd go iawn,

423
00:19:49,210 --> 00:19:51,370
os ydych am roi llinell
seibiannau rhwng pethau,

424
00:19:51,370 --> 00:19:55,680
efallai y byddwch yn syml
gwneud hyn a tharo Save.

425
00:19:55,680 --> 00:19:59,460
Ac yn awr, os wyf ail-lwytho fan hyn, rhybudd
bod popeth yn unig cymylu ei gilydd

426
00:19:59,460 --> 00:20:01,100
mewn dim ond un blob o destun.

427
00:20:01,100 --> 00:20:03,570
Oherwydd bod HTML yn fath o iaith fud.

428
00:20:03,570 --> 00:20:07,230
>> Mae'n i fod i gael ei ddefnyddio yn y cyfryw
ffordd y bydd y porwr yn unig

429
00:20:07,230 --> 00:20:09,920
gwneud yn glir yr hyn yr ydych yn dweud iddo wneud.

430
00:20:09,920 --> 00:20:12,890
Felly, os nad ydych yn dweud ei fod
rhoi paragraff newydd i mi,

431
00:20:12,890 --> 00:20:14,569
nad ydych yn mynd i weld paragraff newydd.

432
00:20:14,569 --> 00:20:16,360
Ac yn wir, yr hyn y mae'r
porwr yn mynd i wneud

433
00:20:16,360 --> 00:20:20,020
hyd yn oed os byddwch yn taro Mewnbynnu,
gadewch i ni ddweud dro ar ôl tro

434
00:20:20,020 --> 00:20:23,190
ac unwaith eto, gan symud y modd hwn y testun
i lawr ar y sgrin, ac yna arbed

435
00:20:23,190 --> 00:20:26,610
ac yna ail-lwytho, mae'r porwr yn mynd
i ddymchwel hynny i gyd ofod gwyn

436
00:20:26,610 --> 00:20:29,021
i mewn dim ond gofod sengl, gweladwy.

437
00:20:29,021 --> 00:20:29,520
Iawn.

438
00:20:29,520 --> 00:20:30,869
Felly dyna y paragraff tag.

439
00:20:30,869 --> 00:20:32,910
Ac felly beth yw'r patrwm
sy'n datblygu yma?

440
00:20:32,910 --> 00:20:37,450
Wel, mae'n ymddangos i fod yn wir bod
HTML yn ymwneud â dechrau tag

441
00:20:37,450 --> 00:20:38,460
ac yn dod i ben tag.

442
00:20:38,460 --> 00:20:39,300
A beth yw tag?

443
00:20:39,300 --> 00:20:41,160
Wel, 'i' jyst darn o gystrawennau.

444
00:20:41,160 --> 00:20:44,400
Braced Agored, gair allweddol,
braced ar gau, yn tag.

445
00:20:44,400 --> 00:20:45,510
Neu ddechrau tag.

446
00:20:45,510 --> 00:20:48,590
Ac yna pan fyddwch chi'n
wneud mynegi eich hun,

447
00:20:48,590 --> 00:20:52,300
fel yn yr ydych chi'n ei wneud â'r paragraff,
rydych yn gwneud hynny i siarad gyferbyn.

448
00:20:52,300 --> 00:20:55,480
Ond nid y gwrthwyneb yn hollol yn ôl.

449
00:20:55,480 --> 00:21:00,630
>> Rydych yn syml o flaen yr un tag yn
enwi gyda slaes fel hyn.

450
00:21:00,630 --> 00:21:01,130
Iawn.

451
00:21:01,130 --> 00:21:02,570
Felly nid bob un sy'n gyffrous.

452
00:21:02,570 --> 00:21:05,270
Ac yn wir, nid ydym yn gwneud y
gwe bob un sy'n fwy diddorol.

453
00:21:05,270 --> 00:21:07,630
Beth os wyf am wneud
pethau mwy a beiddgar?

454
00:21:07,630 --> 00:21:11,780
Felly, mae'n troi allan bod dyma enghraifft
yn headings.html, lle yn fy nghorff,

455
00:21:11,780 --> 00:21:17,280
Mae gen tag H1, H2, H3,
pedwar, pump, neu chwech, pob un ohonynt

456
00:21:17,280 --> 00:21:18,310
yn ymddangos yn eithaf arcane.

457
00:21:18,310 --> 00:21:21,010
Ond os af agor y
enghraifft, gadewch i ni edrych.

458
00:21:21,010 --> 00:21:22,490
Headings.html.

459
00:21:22,490 --> 00:21:27,030
>> Felly gall porwyr yn ddiofyn yn rhoi i chi anfon neges destun
mae hynny'n fawr a beiddgar o feintiau gwahanol.

460
00:21:27,030 --> 00:21:28,070
H1 yn fawr.

461
00:21:28,070 --> 00:21:31,240
H6 yn llai ac yna
popeth arall yn y canol.

462
00:21:31,240 --> 00:21:34,170
Felly dyna ddiddorol ond yn dal
ddim wir y we rwy'n gwybod.

463
00:21:34,170 --> 00:21:36,870
Beth os ydym am gen i
rhywbeth fel rhestr. .

464
00:21:36,870 --> 00:21:40,190
Felly dyma rhestr bwledi o
tri o dai Harvard.

465
00:21:40,190 --> 00:21:41,600
>> Sut aethoch chi ati i wneud hyn?

466
00:21:41,600 --> 00:21:45,410
Wel, cymerwch olwg ar list.html.

467
00:21:45,410 --> 00:21:47,870
Ac yma, gwelwn
ychydig bach o funkiness

468
00:21:47,870 --> 00:21:49,630
ond gadewch i ni ystyried yr hyn sy'n digwydd.

469
00:21:49,630 --> 00:21:56,182
Felly seiliedig ar yr hyn yr ydych yn unig wedi gweld,
UL yn sefyll am y rhestr di-drefn.

470
00:21:56,182 --> 00:21:57,640
Rhestr heb drefn yn unig yn golygu bwledi.

471
00:21:57,640 --> 00:21:58,431
Does dim rhifau.

472
00:21:58,431 --> 00:22:01,850
Mae hefyd yn rhywbeth a elwir yn
rhestr, sy'n OL yn tag harchebu.

473
00:22:01,850 --> 00:22:05,350
Yna LI, rhestr eitem i gyd mae'n ei olygu.

474
00:22:05,350 --> 00:22:07,790
>> Ac felly y awtomatig
rhifau popeth i chi.

475
00:22:07,790 --> 00:22:11,270
Ond unwaith eto, fy holl mewnoliad
a gofod gwyn yn unig er fy mwyn.

476
00:22:11,270 --> 00:22:13,050
Nid yw'r porwr yn
mewn gwirionedd yn mynd i ofal.

477
00:22:13,050 --> 00:22:16,670
Felly hyd yn oed er nad gallech
gwneud hyn, dim ond i fod yn glir,

478
00:22:16,670 --> 00:22:19,880
ni ddylech hyd yn oed er
y porwr, bydd yn dal i

479
00:22:19,880 --> 00:22:22,130
yn gallu deall ei fod jyst ddirwya.

480
00:22:22,130 --> 00:22:24,590
Im 'yn taro ail-lwytho yn fy
porwr, Im 'yn clicio ail-lwytho

481
00:22:24,590 --> 00:22:26,760
ac nid oes unrhyw newid yn digwydd
oherwydd bod y porwr yn dal

482
00:22:26,760 --> 00:22:29,550
gwneud yn union yr hyn yr wyf yn dweud iddo wneud.

483
00:22:29,550 --> 00:22:30,050
>> Iawn.

484
00:22:30,050 --> 00:22:31,340
Felly, mae hyn yn i gyd yn unig testun.

485
00:22:31,340 --> 00:22:33,730
Nawr, gadewch i ni wneud rhywbeth mwy diddorol.

486
00:22:33,730 --> 00:22:36,660
Rydw i'n mynd i fynd yn ei flaen a
benthyg rhywfaint o'r HTML hwn.

487
00:22:36,660 --> 00:22:40,910
Rydw i'n mynd i fynd yn ei flaen a
creu ffeil newydd yma.

488
00:22:40,910 --> 00:22:43,370
Ac fe rown alwad rick.html hwn.

489
00:22:43,370 --> 00:22:46,190

490
00:22:46,190 --> 00:22:48,916
Rydym wedi anghymesur
defnyddio rhywbeth

491
00:22:48,916 --> 00:22:51,290
Gelwir rholyn rick yn hyn
dosbarth y flwyddyn hon, nid wyf yn gwybod,

492
00:22:51,290 --> 00:22:53,880
'i jyst yn digwydd yn organig.

493
00:22:53,880 --> 00:22:55,397
>> Ac yn awr ei fod yn mynd allan o reolaeth.

494
00:22:55,397 --> 00:22:56,730
Felly, Im 'jyst yn mynd i fynd â hi.

495
00:22:56,730 --> 00:22:59,700
Ac os af i Google
Delweddau a Rick Astley.

496
00:22:59,700 --> 00:23:02,450

497
00:23:02,450 --> 00:23:06,170
Os nad ydych yn gwybod pam yr ydym yn ei wneud
hyn, dim ond darllen am Wicipedia.

498
00:23:06,170 --> 00:23:11,520
Bob tro y byddwch wedi clicio ar y ddolen,
rhywun sydd wedi bod yn chwerthin yn rhywle.

499
00:23:11,520 --> 00:23:14,860
A gadewch i mi fynd yno ahead--
rydym yn mynd, gadewch i ni weld y ddelwedd hon.

500
00:23:14,860 --> 00:23:16,750
>> Felly dyma ni gael
image mewn Google Delweddau.

501
00:23:16,750 --> 00:23:19,390
A gadewch i ni dybio bod hyn yn
yn rhesymol ym mhob man ar y rhyngrwyd.

502
00:23:19,390 --> 00:23:22,570
Felly, yr wyf i'n mynd i gymryd yn ganiataol ei fod yn iawn i mi
i roi hyn mewn gwirionedd i mewn i fy tudalen ar y we.

503
00:23:22,570 --> 00:23:24,820
Rydw i'n mynd i fynd yn ei flaen
a chopïo delwedd URL.

504
00:23:24,820 --> 00:23:28,600
Ac yn awr os byddaf yn mynd yn ôl i Cloud
9, gadewch i ni weld beth y gallaf ei wneud yma.

505
00:23:28,600 --> 00:23:30,630
Felly dyma dim ond dudalen we yn.

506
00:23:30,630 --> 00:23:39,020
Mae hyn yn Rick Astley, haha,
Rydw i'n mynd i fynd yn ôl yn awr

507
00:23:39,020 --> 00:23:43,510
at fy porwr, ail-lwytho, ac yn ddiddorol.

508
00:23:43,510 --> 00:23:44,530
>> Ble mae Rick?

509
00:23:44,530 --> 00:23:46,050
Felly gadewch i mi weld beth sydd wedi digwydd.

510
00:23:46,050 --> 00:23:49,114
A dweud y gwir, dw i'n mynd i
esgus fel doeddwn i ddim yn gwneud hynny.

511
00:23:49,114 --> 00:23:50,280
[Anghlywadwy] ei roi yn fan hyn.

512
00:23:50,280 --> 00:23:52,520
Byddwn yn dod yn ôl at hynny mewn munud.

513
00:23:52,520 --> 00:23:54,200
Felly dyma rick.html.

514
00:23:54,200 --> 00:23:56,070
Felly nid yw hynny'n Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Felly, mae'n troi allan y gallwn
mewn gwirionedd ychwanegwch ef i mewn yma.

516
00:23:59,680 --> 00:24:00,830
Mae hyn yn Rick Astley.

517
00:24:00,830 --> 00:24:06,680
Dw i'n mynd i ddweud roi delwedd y mae ei fi
ffynhonnell yw'r URL Fi jyst copïo, a oedd yn

518
00:24:06,680 --> 00:24:09,110
yn ôl pob golwg yn hapus
rhywbeth pen-blwydd neu eraill.

519
00:24:09,110 --> 00:24:13,280
>> Ac yn awr rwy'n mynd i
cau'r tag fel hyn.

520
00:24:13,280 --> 00:24:15,170
Felly, mae hyn yn lapio super hir.

521
00:24:15,170 --> 00:24:17,740
Ond yn sylwi bod yr holl rwyf wedi
wneud yw image braced agored,

522
00:24:17,740 --> 00:24:20,270
ffynhonnell gyda priodoledd o hyn.

523
00:24:20,270 --> 00:24:21,530
Ac mae'n URL 'n sylweddol hir.

524
00:24:21,530 --> 00:24:23,720
Ac ar ddiwedd iawn, sylwi ar hyn.

525
00:24:23,720 --> 00:24:29,530
Slaes Pam wyf wedi gwneud braced onglog
yn lle, fel pob tag arall,

526
00:24:29,530 --> 00:24:33,590
cael braced agored,
IMG, ar gau braced?

527
00:24:33,590 --> 00:24:37,040
Dim ond yn cymryd dyfalu hyd yn oed os ydych yn
yn cael unrhyw gyfarwydd o gwbl

528
00:24:37,040 --> 00:24:40,410
gyda HTML o'r blaen.

529
00:24:40,410 --> 00:24:42,710
>> Felly mae'n sut y mae'n dod i ben
y gorchymyn, ond pam

530
00:24:42,710 --> 00:24:45,850
mae'n ddim wir yn gwneud sythweledol
synnwyr i wneud rhywbeth ychydig yn fwy

531
00:24:45,850 --> 00:24:48,820
amleiriog fel delwedd agos?

532
00:24:48,820 --> 00:24:51,400
Yeah.

533
00:24:51,400 --> 00:24:52,000
Yeah.

534
00:24:52,000 --> 00:24:55,620
Dim ond semantig, does dim synnwyr o
gan ddechrau delwedd ac yn gorffen delwedd,

535
00:24:55,620 --> 00:24:56,870
'i' naill ai yno ai peidio yw'n.

536
00:24:56,870 --> 00:25:00,960
Felly, nid yw'n gwneud synnwyr i adael bwlch
am unrhyw beth arall y tu mewn o ddelwedd.

537
00:25:00,960 --> 00:25:02,010
Rydych yn methu gwneud hynny.

538
00:25:02,010 --> 00:25:03,720
Ac felly y gystrawen
Byddai yn gyffredinol fod yr un

539
00:25:03,720 --> 00:25:07,910
i wneud y slaes y tu mewn
y tag agored neu y tag cychwyn

540
00:25:07,910 --> 00:25:09,020
ac yna daro Save.

541
00:25:09,020 --> 00:25:13,350
>> Felly os wyf yn awr yn ail-lwytho y ffeil, erbyn hyn
Mae gen i ar y we dudalen coginio da yma.

542
00:25:13,350 --> 00:25:15,100
Ac gallem yn sicr
'n sylweddol cythruddo pobl

543
00:25:15,100 --> 00:25:17,010
drwy ymgorffori yn lle hynny
fel dolen YouTube.

544
00:25:17,010 --> 00:25:19,350
Ac yn wir, unrhyw adeg
chi erioed wedi mynd i YouTube,

545
00:25:19,350 --> 00:25:22,190
a gadewch i mi mewn gwirionedd yn ddamweiniol
rick rholio fy hun yma.

546
00:25:22,190 --> 00:25:25,770
Felly Rick gofrestr.

547
00:25:25,770 --> 00:25:29,592
Felly rick roll-- Rydw i'n mynd i fynd yma.

548
00:25:29,592 --> 00:25:31,900
>> [CHWARAE CERDDORIAETH]

549
00:25:31,900 --> 00:25:33,730
>> OK, un person yn hoffi hynny.

550
00:25:33,730 --> 00:25:37,270
Felly, yn sylwi holl amser hwn, os ydych yn
cliciwch ar y ddolen Share, byddwch wrth gwrs

551
00:25:37,270 --> 00:25:41,390
cael y URL y gallwch mewn gwirionedd
ymgorffori mewn e-bost neu delwedd fforensig

552
00:25:41,390 --> 00:25:43,730
neu mewn problem a osodwyd neu mewn sleidiau.

553
00:25:43,730 --> 00:25:49,055
Ac yn awr, os wyf yn lle hynny cliciwch ar ymgorffori,
sylwi bod yr holl amser hwn, pethau hyn

554
00:25:49,055 --> 00:25:49,680
wedi bod yno.

555
00:25:49,680 --> 00:25:50,910
Rydw i'n mynd i fynd yn ei flaen a chopi hyn.

556
00:25:50,910 --> 00:25:54,000
>> A dim ond er mwyn i ni ei weld yn well, dwi'n
mynd i bastio i mewn i fy golygydd testun.

557
00:25:54,000 --> 00:25:55,860
Sylwch fod hyn yn beth
YouTube wedi bod yn dweud wrthych.

558
00:25:55,860 --> 00:25:57,693
Bob tro y byddwch yn ymweld â
YouTube fideo, os ydych yn

559
00:25:57,693 --> 00:26:00,410
awyddus i ymgorffori'r fideo ar eich
tudalen ar y we, yn syml chrafangia hyn.

560
00:26:00,410 --> 00:26:03,350
Felly mae hyn yn arall eto
HTML tag a elwir yn iframe.

561
00:26:03,350 --> 00:26:04,590
Neu mewn ffrâm llinell.

562
00:26:04,590 --> 00:26:08,680
Felly mae'n rhy yn edrych ychydig yn fwy
cymhleth na'r lleill i gyd.

563
00:26:08,680 --> 00:26:11,950
Felly, mae'n ymddangos bod y ddelwedd
tag ac i bob golwg y tag iframe

564
00:26:11,950 --> 00:26:13,370
cymryd yr hyn a elwir yn briodoleddau.

565
00:26:13,370 --> 00:26:15,710
>> Ac mae hyn yn un arall
darn o gystrawen yn HTML.

566
00:26:15,710 --> 00:26:19,240
Yn ychwanegol at y tag yn
enw, agored enw tag braced,

567
00:26:19,240 --> 00:26:23,780
gallwch reoli ymddygiad y tag
drwy gael criw cyfan o priodoledd

568
00:26:23,780 --> 00:26:24,860
yn dychwelyd gwerth.

569
00:26:24,860 --> 00:26:26,290
Priodoledd yn dychwelyd gwerth.

570
00:26:26,290 --> 00:26:28,100
Ac felly, er enghraifft,
YouTube yn ei ddweud wrthym

571
00:26:28,100 --> 00:26:31,990
os ydych am lled fideo hwn
i fod yn 420 picsel ac uchder

572
00:26:31,990 --> 00:26:35,470
i fod yn 315 picsel, dyna
sut yr ydych yn ei fynegi mewn HTML.

573
00:26:35,470 --> 00:26:38,480
>> Ffynhonnell y fideo yn mynd
yw bod YouTube URL hir

574
00:26:38,480 --> 00:26:40,830
ac yna rhai pethau eraill
fel border ffrâm yn sero,

575
00:26:40,830 --> 00:26:43,500
fel bod yn ôl pob tebyg yn golygu mae
dim border o gwmpas y peth.

576
00:26:43,500 --> 00:26:45,450
Caniatáu sgrin lawn yn ôl pob tebyg
yn golygu bod y defnyddiwr

577
00:26:45,450 --> 00:26:47,840
Gall glicio botwm ac
mewn gwirionedd sgrin lawn y fideo.

578
00:26:47,840 --> 00:26:52,870
Felly os wyf wir eisiau bod yn
drawiadol yma yn Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
yn hytrach na defnyddio'r ddelwedd tag, gadewch
mi dileu hynny, yn hytrach na bastio hyn.

580
00:26:58,490 --> 00:27:00,810
Ac yn ail-lwytho yn awr.

581
00:27:00,810 --> 00:27:02,500
Ac yn awr dyma ni unwaith eto.

582
00:27:02,500 --> 00:27:04,979

583
00:27:04,979 --> 00:27:06,020
Mae pob hawl, mae hynny'n ddigon.

584
00:27:06,020 --> 00:27:08,970
Mae pob hawl, felly byddaf yn ceisio
galed i beidio â gwneud hynny eto.

585
00:27:08,970 --> 00:27:11,400
Felly beth yw rhai o'r siopau cludfwyd yma?

586
00:27:11,400 --> 00:27:15,130
Felly HTML, yn hyll fel tudalennau gwe yma
yn, mewn gwirionedd yn eithaf syml.

587
00:27:15,130 --> 00:27:16,467
Dyw hi ddim yn iaith raglennu.

588
00:27:16,467 --> 00:27:17,550
Nid oes ganddo swyddogaethau.

589
00:27:17,550 --> 00:27:18,410
Nid oes ganddo ddolenni.

590
00:27:18,410 --> 00:27:19,535
Nid oes ganddo amodau.

591
00:27:19,535 --> 00:27:22,900
Mae'r holl mae wedi ei dwsinau o
gwahanol tagiau, pob un ohonynt

592
00:27:22,900 --> 00:27:24,620
Mae sero neu fwy o nodweddion.

593
00:27:24,620 --> 00:27:27,320
Ac yn wir, yr hyn sy'n hwyl am
HTML wrth i chi ddechrau blymio i mewn

594
00:27:27,320 --> 00:27:29,560
yw ei fod yn hunan-teachable iawn.

595
00:27:29,560 --> 00:27:32,880
>> Mae'r holl mae'n ei gymryd yn deall
y fframwaith cyffredinol o HTML.

596
00:27:32,880 --> 00:27:36,510
Beth yw tag, beth yw nodwedd,
sut ydych chi mewn gwirionedd ffurfweddu tudalen ar y we

597
00:27:36,510 --> 00:27:37,250
fel a ganlyn.

598
00:27:37,250 --> 00:27:40,720
A phopeth arall sydd mewn gwirionedd yn y canlyniad
o edrych i fyny mewn geirda ar-lein

599
00:27:40,720 --> 00:27:43,080
neu googling sut i wneud ychydig o
techneg neu fel yr ydym wedi gweld,

600
00:27:43,080 --> 00:27:45,371
gan edrych ar y ffynhonnell Facebook
cod, gan edrych ar wefan

601
00:27:45,371 --> 00:27:48,710
bod chi'n hoffi ar ei cod ffynhonnell a
deall sut y datblygwyr yno

602
00:27:48,710 --> 00:27:50,550
mewn gwirionedd yn gosod pethau allan.

603
00:27:50,550 --> 00:27:52,180
>> Felly, gallwn ni ei wneud delweddau yn ogystal.

604
00:27:52,180 --> 00:27:53,994
Ac yn wir, yr ydym yn gwneud hynny funud yn ôl.

605
00:27:53,994 --> 00:27:55,410
Gadewch i mi fynd yn ei flaen a dim ond yn dangos i chi.

606
00:27:55,410 --> 00:27:56,770
Dyma rai cod enghreifftiol.

607
00:27:56,770 --> 00:27:58,380
Os ydych chi erioed wedi eisiau gweld cath blin.

608
00:27:58,380 --> 00:28:00,620
Felly sylwi bod gallaf
cael tag delwedd yma.

609
00:28:00,620 --> 00:28:02,090
Ac mae gen i sylw uwch ei ben.

610
00:28:02,090 --> 00:28:04,490
Mae gen i ddewis arall
destun ar gyfer hygyrchedd.

611
00:28:04,490 --> 00:28:07,250
Felly rhywun sy'n defnyddio sgrîn
darllenydd am resymau golwg

612
00:28:07,250 --> 00:28:10,172
Gall mewn gwirionedd wedyn yn cael eu
darllenydd sgrîn yn dweud cath flin.

613
00:28:10,172 --> 00:28:11,880
Oherwydd os nad ydynt yn gallu
gweld y llun, maent yn

614
00:28:11,880 --> 00:28:14,504
Gall o leiaf yn cael eu cyfrifiadur
dywedwch wrthynt ar lafar beth ydyw.

615
00:28:14,504 --> 00:28:18,020
A ffynhonnell y ffeil yn cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Felly, mewn gwirionedd, os wyf wir eisiau
cael glyfar, yr hyn y gallwn i gael done--

617
00:28:22,472 --> 00:28:25,680
Nid wyf yn addo i fynd i'r Rick Astley, felly
Rydw i'n mynd i google am gath yn lle hynny.

618
00:28:25,680 --> 00:28:28,290
Ac os af i Google Images
yma, a byddwn yn cymryd yn ganiataol

619
00:28:28,290 --> 00:28:30,040
bod hwn yn llun o fy gath.

620
00:28:30,040 --> 00:28:35,070
>> Tybiwch fod gen i reolaeth glicio
neu i'r dde clicio ar hyn, yn ddamweiniol

621
00:28:35,070 --> 00:28:35,630
creepy.

622
00:28:35,630 --> 00:28:40,320
Ac cat.jpeg Rydw i'n mynd
i arbed ar fy n ben-desg.

623
00:28:40,320 --> 00:28:44,700
Gadewch i mi yn awr yn mynd yn ôl i'r cwmwl 9.

624
00:28:44,700 --> 00:28:48,150
Hysbysiad bod yma, gallaf
ewch i lwytho ffeiliau lleol.

625
00:28:48,150 --> 00:28:51,530
Ac os wyf yn chrafangia hon
ffeil, cat.jpeg, rhybudd

626
00:28:51,530 --> 00:28:54,674
y gallaf lusgo a
gollwng i mewn cwmwl 9

627
00:28:54,674 --> 00:28:56,090
ac mae'n mynd i gweiddi arna i yma.

628
00:28:56,090 --> 00:28:59,000
>> Oherwydd ein bod i wedi eisoes
Rhoddir ffeil cat.jpeg chi,

629
00:28:59,000 --> 00:29:01,430
ond mae'n super hawdd
fachu llun yr ydych wedi

630
00:29:01,430 --> 00:29:03,220
a gymerwyd o Facebook
neu Flickr neu debyg

631
00:29:03,220 --> 00:29:05,678
ac mewn gwirionedd yn llusgo a gollwng ei
i mewn i gwmwl 9 ac yna yn ei gwneud yn

632
00:29:05,678 --> 00:29:07,970
rhan o'ch personol eich hun
gwefan neu broblem

633
00:29:07,970 --> 00:29:10,442
pennu saith neu wyth gan y byddwn cyn hir yn gweld.

634
00:29:10,442 --> 00:29:12,150
Ac yna pan fyddwch yn
yn olaf yn ymweld y gath,

635
00:29:12,150 --> 00:29:16,610
gan dybio Fi downloaded yr un gath,
rhybudd that-- a oedd yn annwyl.

636
00:29:16,610 --> 00:29:19,160
>> Beth fyddech chi'n ei weld yw
rhywbeth fel hyn yn eu hwynebu yma.

637
00:29:19,160 --> 00:29:21,810
Felly y ffeiliau a chi
cyfeiriad o fewn tudalen we

638
00:29:21,810 --> 00:29:26,050
Gall fod naill ai'n lleol yn eich hun
cyfrif neu anghysbell ar rai gweinydd arall

639
00:29:26,050 --> 00:29:29,670
fel yn achos y Rick
Photo Astley ychydig yn ôl.

640
00:29:29,670 --> 00:29:32,990
Felly, ble else-- beth
arall allwn ni ei wneud yma?

641
00:29:32,990 --> 00:29:34,890
Felly, gadewch i ni edrych ar y canlynol.

642
00:29:34,890 --> 00:29:36,160
Rydych yn gwybod beth sy'n fath o oer?

643
00:29:36,160 --> 00:29:39,330
>> Hyd yn hyn rydym wedi bod yn gwneud
tudalennau gwe statig iawn.

644
00:29:39,330 --> 00:29:41,830
Rwyf am i sbeis i fyny pethau fel a ganlyn.

645
00:29:41,830 --> 00:29:44,344
Rwyf am wneud fy peiriant chwilio hun.

646
00:29:44,344 --> 00:29:47,010
Felly, er mwyn gwneud peiriant chwilio, gadewch i ni
mynd yn ei flaen ac yn dechrau gwneud hyn.

647
00:29:47,010 --> 00:29:52,570
Rydw i'n mynd i fynd yn ei flaen ac yn creu
ffeil newydd o'r enw search.html.

648
00:29:52,570 --> 00:29:54,890
Ac rydym wedi prefabed fersiynau ar-lein.

649
00:29:54,890 --> 00:29:56,027
Wps.

650
00:29:56,027 --> 00:29:57,610
Peidiwch â bastio i mewn i'ch ffenestr terfynell.

651
00:29:57,610 --> 00:29:58,744
Fersiynau ar Parod ar-lein.

652
00:29:58,744 --> 00:30:00,160
Ac yr wyf i'n mynd i ddechrau fel a ganlyn.

653
00:30:00,160 --> 00:30:04,490
Felly dyma ddechrau
ffeil o'r enw search.html.

654
00:30:04,490 --> 00:30:07,510
Rydw i'n mynd i gadw mewn
cyfeiriadur ffynhonnell heddiw.

655
00:30:07,510 --> 00:30:09,079
Rydw i'n mynd i alw Chwilio hwn.

656
00:30:09,079 --> 00:30:10,370
Mewn gwirionedd, byddwn yn gwneud yn well.

657
00:30:10,370 --> 00:30:13,600
CS50 Chwilio ac mewn gwirionedd brand arno.

658
00:30:13,600 --> 00:30:17,500
Ac yn awr, yr wyf i'n mynd i ddweud
rhywbeth fel H1 CS50 Chwilio.

659
00:30:17,500 --> 00:30:20,930
Ac yna i lawr yma, H2 yn dod yn fuan.

660
00:30:20,930 --> 00:30:23,230
A dim ond i ailadrodd, H1 a
H2 golygu yr hyn y drefn honno?

661
00:30:23,230 --> 00:30:26,750

662
00:30:26,750 --> 00:30:30,320
>> Yeah, mor fawr ac yn feiddgar, ac
Nid yw mor fawr, ond yn dal beiddgar.

663
00:30:30,320 --> 00:30:37,375
Felly, os wyf yn achub hon ac ewch dros yma,
gadewch i ni weld y search.html ffeil.

664
00:30:37,375 --> 00:30:42,560
Mae pob hawl, ac mae hyn yn un
yn right-- [Anghlywadwy].

665
00:30:42,560 --> 00:30:46,980

666
00:30:46,980 --> 00:30:49,110
Yn sefyll yn ôl.

667
00:30:49,110 --> 00:30:49,945
Mae David yn ddryslyd.

668
00:30:49,945 --> 00:30:52,610

669
00:30:52,610 --> 00:30:54,080
O, mae'n iawn yno.

670
00:30:54,080 --> 00:30:54,860
David 'an idiot.

671
00:30:54,860 --> 00:30:55,420
IAWN.

672
00:30:55,420 --> 00:30:56,660
Felly dyna ydyw.

673
00:30:56,660 --> 00:30:58,350
Felly Chwilio CS50 yn dod yn fuan.

674
00:30:58,350 --> 00:31:00,370
Felly nawr, gadewch i syntheseiddio
hyn a wnaethom yr wythnos diwethaf.

675
00:31:00,370 --> 00:31:03,400
>> Pan fyddwn yn siarad am y
mecaneg lefel is o HTTP.

676
00:31:03,400 --> 00:31:05,780
Ac mae'r rhain syniadau newydd
o HTML, sydd ychydig

677
00:31:05,780 --> 00:31:08,890
yr iaith marcio lle rydych
dywedwch porwr yn union beth i'w wneud

678
00:31:08,890 --> 00:31:10,740
a gweithredu ein peiriant chwilio hunain.

679
00:31:10,740 --> 00:31:12,520
Felly, yn lle unig
gan ddweud yn dod yn fuan, dwi'n

680
00:31:12,520 --> 00:31:14,810
mynd i gyflwyno
rywbeth o'r enw ffurflen tag.

681
00:31:14,810 --> 00:31:19,610
Ac yn y ffurflen hon, yr wyf i'n mynd i
cael rhywbeth fel cae mewnbwn.

682
00:31:19,610 --> 00:31:22,450
>> Ac enw mewnbwn hwn
maes, dw i'n mynd i alw C.

683
00:31:22,450 --> 00:31:26,240
A'r math o y maes mewnbwn
Rydw i'n mynd i ddweud yn unig yw "testun".

684
00:31:26,240 --> 00:31:29,130
A chae testun, gan ein bod chi helpu
gweld, yn unig yw blwch testun.

685
00:31:29,130 --> 00:31:32,830
Ac felly nid yw'n synnwyr yma i gael
unrhyw beth tu mewn iddo yn y fan hon.

686
00:31:32,830 --> 00:31:35,320
Ac felly rwy'n dim ond yn mynd
i gau'r tag â hynny

687
00:31:35,320 --> 00:31:38,099
blaenslaes iawn yn y tag ei ​​hun.

688
00:31:38,099 --> 00:31:39,890
Ac yna dwi'n mynd i
gael un mewnbwn arall.

689
00:31:39,890 --> 00:31:43,480
Math Mewnbwn hafal cyflwyno.

690
00:31:43,480 --> 00:31:45,320
Ac yna dwi'n mynd i
cau'r yr un yma hefyd.

691
00:31:45,320 --> 00:31:46,840
>> Ac yn awr rwy'n mynd i fynd yn ôl yma.

692
00:31:46,840 --> 00:31:49,520
Ac eisoes rydym yn gweld,
er yn eithaf hyll, rwyf wedi

693
00:31:49,520 --> 00:31:52,460
cael y dechreuad
fy nhudalen chwilio hunain yma.

694
00:31:52,460 --> 00:31:55,150
Yn wir, gadewch i mi geisio
glanhau hyn i fyny ychydig bach.

695
00:31:55,150 --> 00:31:57,330
Mae'n ymddangos bod ar y
mewnbwn yma, gallaf gael

696
00:31:57,330 --> 00:31:59,910
priodoledd arall o'r enw dalfan.

697
00:31:59,910 --> 00:32:05,165
Ac efallai y byddwn yn gweld rhywbeth fel keywords,
neu yn fwy penodol, holi am q.

698
00:32:05,165 --> 00:32:07,820
>> Ac yn sylwi, yn awr, yr wyf wedi
y math hwn o destun llwyd

699
00:32:07,820 --> 00:32:10,440
sy'n diflannu fel
gynted ag y byddaf yn dechrau teipio,

700
00:32:10,440 --> 00:32:12,930
ond mae'n fwy na thebyg yn rhywbeth
eich bod wedi gweld yn y tudalennau gwe eraill.

701
00:32:12,930 --> 00:32:14,650
Dwi ddim yn hoffi y botwm Anfon.

702
00:32:14,650 --> 00:32:18,320
Felly dw i'n wir yn mynd i roi'r
Botwm Anfon gwerth o chwilio.

703
00:32:18,320 --> 00:32:21,680
Ac yn awr, os wyf yn ail-lwytho, yn sylwi bod
fy botwm yn dod yn chwilio enwir.

704
00:32:21,680 --> 00:32:24,140
Rydych yn gwybod, nid wyf yn ei wneud mewn gwirionedd
fel y logo yma.

705
00:32:24,140 --> 00:32:27,140
Felly generadur Google Font.

706
00:32:27,140 --> 00:32:28,820
>> Rwyf am i sbeis hyn i fyny ymhellach.

707
00:32:28,820 --> 00:32:30,660
Chwilio Felly CS50.

708
00:32:30,660 --> 00:32:31,870
Gadewch i mi greu fy logo hun.

709
00:32:31,870 --> 00:32:33,080
Mae hynny'n edrych yn neis.

710
00:32:33,080 --> 00:32:36,945
Felly nawr gadewch i mi achub y as-- dod ymlaen.

711
00:32:36,945 --> 00:32:40,710

712
00:32:40,710 --> 00:32:43,120
I ble mae'n mynd?

713
00:32:43,120 --> 00:32:43,620
Yno.

714
00:32:43,620 --> 00:32:44,160
IAWN.

715
00:32:44,160 --> 00:32:44,980
Wedi colli ei.

716
00:32:44,980 --> 00:32:47,740
Cadw fel.

717
00:32:47,740 --> 00:32:49,470
Porwyr dwp.

718
00:32:49,470 --> 00:32:51,700
Sefyll yn ôl, rydym yn mynd i
atgyweiria hon unwaith ac am byth.

719
00:32:51,700 --> 00:32:57,650

720
00:32:57,650 --> 00:32:58,590
Dyna ni.

721
00:32:58,590 --> 00:32:59,090
Iawn.

722
00:32:59,090 --> 00:32:59,600
Mae'n ddrwg gennym.

723
00:32:59,600 --> 00:33:00,750
Diwrnod i ffwrdd.

724
00:33:00,750 --> 00:33:02,310
Yn awr mae hyn yn ffynci.

725
00:33:02,310 --> 00:33:03,160
Gadewch sgrin lawn.

726
00:33:03,160 --> 00:33:04,150
Iawn.

727
00:33:04,150 --> 00:33:06,870
>> Yn awr, fel normal
person, ac eithrio fel y ddelwedd.

728
00:33:06,870 --> 00:33:08,810
Logo.gif.

729
00:33:08,810 --> 00:33:13,194
Nawr rydw i'n mynd i fynd i mewn i CS50IDE a
Rydw i'n mynd i wneud dim ond chrafangia 'r logo,

730
00:33:13,194 --> 00:33:15,360
Rydw i'n mynd i lusgo i mewn
fy ffynhonnell saith cyfeiriadur,

731
00:33:15,360 --> 00:33:17,002
ffeil yn bodoli eisoes, yr wyf i'n iawn â hynny.

732
00:33:17,002 --> 00:33:19,210
Felly, yr wyf i'n mynd i droi'r fantol yn ei
oherwydd yr wyf eisoes wedi cael ei.

733
00:33:19,210 --> 00:33:20,630
Ac yn awr sut ydw i'n cael gwared ar hyn?

734
00:33:20,630 --> 00:33:24,670
>> Gadewch i ni fynd yn ei flaen yma ac yn gwneud
ffynhonnell ddelwedd yn dychwelyd logo.gif.

735
00:33:24,670 --> 00:33:25,490
Cau'r hyn.

736
00:33:25,490 --> 00:33:26,050
Arbed.

737
00:33:26,050 --> 00:33:30,560
Ac yn awr os byddaf yn mynd yn ôl at fy chwiliad
tudalen, yn awr ei fod yn edrych yn eithaf da.

738
00:33:30,560 --> 00:33:33,610
Mae pob hawl, felly nid oes ganddo
eithaf gwneud unrhyw beth defnyddiol.

739
00:33:33,610 --> 00:33:37,000
Yn wir, gadewch i mi rhowch gynnig ar chwilio
am gath a gweld beth sy'n digwydd.

740
00:33:37,000 --> 00:33:38,890
Cats.

741
00:33:38,890 --> 00:33:39,420
Damn hi.

742
00:33:39,420 --> 00:33:41,400
Nid yw'n unig yn gweithio, mae'n debyg.

743
00:33:41,400 --> 00:33:43,760
Felly beth yw'r darn allweddol
sydd ar goll yma?

744
00:33:43,760 --> 00:33:49,100
>> Iawn, hyd yn oed os nad ydych yn gwybod unrhyw HTML,
Rydw i wedi dechrau marcio i fyny y ffurflen ffôn

745
00:33:49,100 --> 00:33:54,130
ac rwyf wedi dweud ei fod sut i gael mewnbwn,
rhoi blwch testun i mi ac yn cyflwyno botwm,

746
00:33:54,130 --> 00:33:55,730
pa darn yn cael pob golwg ar goll?

747
00:33:55,730 --> 00:33:58,975
Tybiwch ein bod am gael mewn gwirionedd
y peth hyn yn gweithio yn gywir.

748
00:33:58,975 --> 00:34:02,420

749
00:34:02,420 --> 00:34:05,360
Yr hyn sydd angen i ni ei wneud?

750
00:34:05,360 --> 00:34:08,860
Mae gennym angen i weithredu'r ben yn ôl
cronfa ddata neu y peiriant chwilio hun,

751
00:34:08,860 --> 00:34:11,210
a hynny'n mynd i gymryd
llawer gyfan o amser, a dweud y gwir.

752
00:34:11,210 --> 00:34:13,380
>> Felly cofiwch hyn a wnaethom tro diwethaf.

753
00:34:13,380 --> 00:34:18,230
Felly, os ydych yn chwilio am rywbeth ar Google
ac yr ydych wedi ymlaen llaw diffodd,

754
00:34:18,230 --> 00:34:20,355
galw i gof, chwilio amrantiad.

755
00:34:20,355 --> 00:34:22,230
Felly gadewch i mi droi hynny off
fel bod hyn mewn gwirionedd

756
00:34:22,230 --> 00:34:26,650
ymddwyn fel porwr ysgol hŷn,
os wyf yn awr yn chwilio am rywbeth fel cathod,

757
00:34:26,650 --> 00:34:28,190
galw i gof yr hyn yr URL yn edrych fel.

758
00:34:28,190 --> 00:34:29,449
Mae'n eithaf cryptig.

759
00:34:29,449 --> 00:34:33,000
Ond hymgorffori i mewn 'na,
galw i gof, yn chwilio slaes.

760
00:34:33,000 --> 00:34:35,100
Marc cwestiwn q hafal cathod.

761
00:34:35,100 --> 00:34:37,760
>> A byddai hynny'n ymddangos i roi i mi
criw cyfan o canlyniadau chwilio.

762
00:34:37,760 --> 00:34:39,134
Felly, rydych yn gwybod beth rwy'n mynd i'w wneud?

763
00:34:39,134 --> 00:34:41,650
Rydw i'n mynd i fenthyg
Google am ychydig funud.

764
00:34:41,650 --> 00:34:43,670
Rydw i'n mynd i fynd dros
yma ac yr wyf i'n mynd i ddweud

765
00:34:43,670 --> 00:34:47,850
bod hyn yn ffurfio gweithred neu
cyrchfan, fel petai,

766
00:34:47,850 --> 00:34:49,330
Dylai fod yn llythrennol Google.

767
00:34:49,330 --> 00:34:52,590
A'r dull roeddwn i eisiau
i ddefnydd yn mynd i fod gael.

768
00:34:52,590 --> 00:34:53,560
>> Felly beth yw gweithredu?

769
00:34:53,560 --> 00:34:55,760
Gweithredu cael ei enwi weirdly,
ond mae hynny'n ei olygu yw

770
00:34:55,760 --> 00:34:58,120
pwy sy'n mynd i drin
y camau y ffurflen hon?

771
00:34:58,120 --> 00:35:00,820
Pan fyddaf yn clicio Chwilio, lle
dylai'r canlyniad fynd?

772
00:35:00,820 --> 00:35:05,300
Ac os wyf yn awr yn mynd yn ôl i fy ffurflen
yma ac ail-lwytho fy tudalen ar y we

773
00:35:05,300 --> 00:35:09,000
ac yn awr yn chwilio am rywbeth
fel ci, yn sylwi nawr

774
00:35:09,000 --> 00:35:10,850
Rwyf wedi ail gweithredu Google.

775
00:35:10,850 --> 00:35:11,350
Iawn?

776
00:35:11,350 --> 00:35:14,141
>> Os ydw i am chwilio am rywbeth
arall, mae'n gweithio ar gyfer nid yn unig cŵn,

777
00:35:14,141 --> 00:35:16,400
mae hefyd yn gweithio ar gyfer cathod.

778
00:35:16,400 --> 00:35:21,930
Mae hefyd yn gweithio i CS50.

779
00:35:21,930 --> 00:35:24,310
Ac OK, mae hyn yn unig
dan whelming, ynte?

780
00:35:24,310 --> 00:35:25,920
Mae pob hawl, ond mae'n gweithio mewn gwirionedd.

781
00:35:25,920 --> 00:35:27,360
Felly, beth sydd mewn gwirionedd wedi bod yn digwydd?

782
00:35:27,360 --> 00:35:31,340
Felly, yr wyf wedi dysgu fy porwr, gan ddefnyddio
HTML, i gymryd mewnbwn gan y defnyddiwr

783
00:35:31,340 --> 00:35:35,810
ac mewn gwirionedd yn anfon y mewnbwn
i weinydd anghysbell gan ddefnyddio HTTP.

784
00:35:35,810 --> 00:35:39,120
>> Ac oherwydd fy porwr
deall HTTP, mewn gwirionedd mae'n

785
00:35:39,120 --> 00:35:43,500
adeiladu'r URL fel bod yr hyn
Yr wyf yn y diwedd drosodd yn fy porwr,

786
00:35:43,500 --> 00:35:45,660
sylwi ar beth sy'n digwydd
pan fyddaf yn chwilio am gi.

787
00:35:45,660 --> 00:35:49,270
Os byddaf yn cliciwch Search, yn sylwi bod
yr URL yn newid wrth i mi fwriadu

788
00:35:49,270 --> 00:35:52,770
i google.com/search ymholiad hafal ci.

789
00:35:52,770 --> 00:35:56,020
A dyna oherwydd bod y ffurflen
yn gwybod, oherwydd bod y dull yn cael,

790
00:35:56,020 --> 00:35:59,560
yn syml atodi iddo i'r URL yno.

791
00:35:59,560 --> 00:36:01,730
>> Yn awr, tudalennau gwe hyn yn dal i fod yn hyll.

792
00:36:01,730 --> 00:36:04,890
Felly gadewch i ni gyflwyno un arall
darn o cystrawen os gallwn heddiw.

793
00:36:04,890 --> 00:36:07,640
Ac mae hyn yn rhywbeth hysbys
fel taflenni arddull rhaeadrol.

794
00:36:07,640 --> 00:36:10,720
Felly gadewch i mi gymryd edrych ar
yr enghraifft hon yma ac yn gweld

795
00:36:10,720 --> 00:36:12,380
os gallwn gasglu beth sy'n mynd ymlaen.

796
00:36:12,380 --> 00:36:14,520
Mae hyn yn CSS0.html.

797
00:36:14,520 --> 00:36:16,532
A dyma lle pethau
cael ychydig yn hyll.

798
00:36:16,532 --> 00:36:18,490
Oherwydd yn anffodus,
ym myd y we,

799
00:36:18,490 --> 00:36:20,920
HTML ben ei hun ni all wneud popeth.

800
00:36:20,920 --> 00:36:22,920
Ac felly os ydych chi am
stylize eich tudalen ar y we,

801
00:36:22,920 --> 00:36:28,370
mewn gwirionedd mae angen i chi ganolbwyntio ar y
estheteg mewn ffordd wahanol.

802
00:36:28,370 --> 00:36:33,090
Felly dyma, mae gennyf gorff fy gwe
tudalen tu mewn sydd yn div mawr.

803
00:36:33,090 --> 00:36:34,700
A div unig yn golygu rhannu.

804
00:36:34,700 --> 00:36:38,060
Felly mae fel paragraff ond mae'n
Nid oes gan yr un semanteg

805
00:36:38,060 --> 00:36:39,180
o baragraff o destun.

806
00:36:39,180 --> 00:36:40,940
>> Mae hyn yn unig yn golygu i'r
porwr, yma hon

807
00:36:40,940 --> 00:36:45,210
rhanbarth hirsgwar fawr o fy gwe
dudalen, yr wyf am i ymdrin â hwy yn arbennig.

808
00:36:45,210 --> 00:36:47,420
Yn awr, llinell 21 yw lle y div yn dechrau.

809
00:36:47,420 --> 00:36:48,770
A dim ond yn cymryd dyfalu.

810
00:36:48,770 --> 00:36:53,080
Beth yw effaith llinell 21 ar y
gweddill cynnwys y dudalen?

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
Canoli ef.

813
00:36:56,311 --> 00:36:56,810
Dyna i gyd.

814
00:36:56,810 --> 00:36:58,830
Felly, nid ydym wedi gweld yn ffordd o
mewn gwirionedd ganoli testun.

815
00:36:58,830 --> 00:37:00,996
>> Yn wir, mae fy peiriant chwilio,
yn wahanol i'r gwir Google,

816
00:37:00,996 --> 00:37:03,040
Roedd pob gyfiawnhau drosodd i'r chwith.

817
00:37:03,040 --> 00:37:07,430
Ac felly yn awr yn unol 21, i ddim yn dweud, hey
porwr, creu adran y dudalen.

818
00:37:07,430 --> 00:37:09,450
Dim ond yn rhoi fawr, petryal anweledig i mi.

819
00:37:09,450 --> 00:37:11,490
Dyna sut yr wyf am
meddwl am y dudalen we.

820
00:37:11,490 --> 00:37:13,870
Ac yna stylize fel a ganlyn.

821
00:37:13,870 --> 00:37:16,900
Y tu mewn o ddyfyniadau hynny,
yn awr, yn ail iaith

822
00:37:16,900 --> 00:37:19,969
ein bod yn cyflwyno heddiw
Gelwir dalennau arddull rhaeadrol.

823
00:37:19,969 --> 00:37:22,010
Diolch byth, mae'n heb fod yn rhy yn
iaith raglennu,

824
00:37:22,010 --> 00:37:26,470
felly mae'n gyfyngedig iawn yn ei cystrawen ond
hefyd yn gyfyngedig iawn o ran ei ymarferoldeb

825
00:37:26,470 --> 00:37:30,670
tra HTML yn ymwneud
marcio i fyny 'r data o dudalen we

826
00:37:30,670 --> 00:37:32,130
a strwythur tudalen ar y we.

827
00:37:32,130 --> 00:37:35,320
CSS yn gyffredinol am y
filltir olaf, estheteg,

828
00:37:35,320 --> 00:37:40,160
cael y maint a'r lliw a'r
lleoliad union gywir mewn tudalen we.

829
00:37:40,160 --> 00:37:43,000
Ac yn wir, mae'n cael ei ffurfio
gyda parau gwerth allweddol.

830
00:37:43,000 --> 00:37:46,290
>> Mae eiddo fel hyn, testun
alinio, gan osod colon,

831
00:37:46,290 --> 00:37:49,720
wedi'i ddilyn gan y gwerth y
eiddo, sydd yn yr achos hwn yw canolfan.

832
00:37:49,720 --> 00:37:51,910
Ac yn awr yn sylwi chi
gall nythu pethau hyn.

833
00:37:51,910 --> 00:37:56,780
Os Roeddwn i eisiau popeth yn y
Rwyf wedi tynnu sylw gael ei ganolbwyntio,

834
00:37:56,780 --> 00:38:00,270
dyna pam yr wyf wedi llinell 21 ac
y llinell gyfatebol 31.

835
00:38:00,270 --> 00:38:04,820
Ond mae'n debyg yn awr eisiau dweud John
Harvard, croeso i fy nhudalen gartref.

836
00:38:04,820 --> 00:38:06,530
>> Symbol hawlfraint John Harvard.

837
00:38:06,530 --> 00:38:09,180
Ac mae'n debyg Rwyf am i'r cyntaf o
llinellau hynny i fod yn eithaf mawr.

838
00:38:09,180 --> 00:38:10,450
36 picsel.

839
00:38:10,450 --> 00:38:11,530
Felly dyna faint gweddus.

840
00:38:11,530 --> 00:38:13,240
Ac roeddwn i eisiau ei bwysau i fod yn feiddgar.

841
00:38:13,240 --> 00:38:15,450
Ond yna is na hynny,
Rwyf am destun llai.

842
00:38:15,450 --> 00:38:19,980
Ac is na hynny, yr wyf am
testun yn hyd yn oed yn llai.

843
00:38:19,980 --> 00:38:20,480
Mae'n ddrwg gennym.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Heddiw teimlo fel diwrnod i ffwrdd.

846
00:38:26,940 --> 00:38:29,840
>> Felly nawr, beth ydw i'n ei wneud i fynegi hyn?

847
00:38:29,840 --> 00:38:34,580
Yma ar linell 22 yn eu hymgorffori
div neu div nythu, os mynnwch.

848
00:38:34,580 --> 00:38:36,190
Mae hefyd wedi ei tag arddull ei hun.

849
00:38:36,190 --> 00:38:38,160
Yr wyf yn nodi maint ffont o 36.

850
00:38:38,160 --> 00:38:40,460
Rwyf yn nodi pwysau ffont o beiddgar.

851
00:38:40,460 --> 00:38:43,360
Lawr yma, dim ond yn nodi 24 o picsel.

852
00:38:43,360 --> 00:38:45,960
Ac yn olaf, yn unol 28, yr wyf yn nodi 12.

853
00:38:45,960 --> 00:38:49,070
Felly, dim ond fel gwiriad pwyll cyflym
ac fel darlleniad dynol hwn,

854
00:38:49,070 --> 00:38:52,545
pa eiriau ar y sgrin yn
mewn gwirionedd yn mynd i fod yn feiddgar?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Pa llinellau ar beiddgar mewn gwirionedd?

857
00:38:58,760 --> 00:38:59,570
>> Dim ond John Harvard.

858
00:38:59,570 --> 00:39:00,070
Iawn?

859
00:39:00,070 --> 00:39:05,940
Gan fod yn union fel llinell 22 yn dweud hey
porwr, dyma is-adran y dudalen.

860
00:39:05,940 --> 00:39:07,920
Ei gwneud yn ffont maint 36 pwynt.

861
00:39:07,920 --> 00:39:09,460
Gwnewch y pwysau ffont print trwm.

862
00:39:09,460 --> 00:39:11,920
Cyn gynted ag y byddwch yn cyrraedd y
tag pen cyfatebol

863
00:39:11,920 --> 00:39:15,340
neu tag ar gau ar linell 24,
hynny modd, hey porwr,

864
00:39:15,340 --> 00:39:17,640
roi'r gorau i wneud beth bynnag yr ydych yn ei wneud.

865
00:39:17,640 --> 00:39:21,020
A rhybudd i fod yn glir, er bod
llinell 22 Mae pob un o'r priodoleddau hyn

866
00:39:21,020 --> 00:39:24,430
fel arddull, pan fyddwch yn
cau'r tag yn unol 24,

867
00:39:24,430 --> 00:39:25,940
dim ond sôn am enw'r tag yn.

868
00:39:25,940 --> 00:39:29,990
>> Nid ydych yn ailadrodd yr arddull gair neu
unrhyw beth sy'n y tu mewn o ddyfyniadau hynny.

869
00:39:29,990 --> 00:39:32,860
Ac felly os wyf yn edrych ar hyn yn awr
yn fy porwr, gadewch i ni gymryd

870
00:39:32,860 --> 00:39:38,060
a edrych ar y canlyniad terfynol. Gadewch i mi fynd
ymlaen at y ffeil hon, sef CSS 0.

871
00:39:38,060 --> 00:39:41,814
Ac mae'n dal i fod yn eithaf plaen,
ond mae cael 'n bert diddorol.

872
00:39:41,814 --> 00:39:43,980
Ond mae'n troi allan yno yn
pethau eraill y gallaf ei wneud fan hyn,

873
00:39:43,980 --> 00:39:46,490
ac ar y perygl o wneud
mae hyn yn gwbl erchyll,

874
00:39:46,490 --> 00:39:48,630
sylwi yma fod yn fy
corff fy tudalen ar y we,

875
00:39:48,630 --> 00:39:53,930
Gallaf wneud rhywbeth doniol
fel bg neu liw cefndir.

876
00:39:53,930 --> 00:39:56,670
>> Ac yn gyflym, beth yw eich hoff liw?

877
00:39:56,670 --> 00:39:57,720
Green Clywais.

878
00:39:57,720 --> 00:39:58,750
Iawn.

879
00:39:58,750 --> 00:40:02,920
Felly nawr, os wyf yn taro ail-lwytho yn awr,
mae gennym dudalen gwe gwyrdd.

880
00:40:02,920 --> 00:40:04,710
Mae pob hawl, felly nid yw hynny'n ddrwg.

881
00:40:04,710 --> 00:40:08,350
Ac yn awr, os wyf am wneud hyn mewn gwirionedd
oer, gallaf wneud y lliw fy testun

882
00:40:08,350 --> 00:40:09,360
hyd yn oed yn goch.

883
00:40:09,360 --> 00:40:10,870
Felly, gadewch i ni weld beth mae hyn yn edrych fel.

884
00:40:10,870 --> 00:40:12,230
Nawr mae'n edrych yn eithaf da.

885
00:40:12,230 --> 00:40:15,460
Ac i lawr fan hyn, os ydych yn wir
eisiau chwarae o gwmpas gyda rhywun

886
00:40:15,460 --> 00:40:17,487
neu os ydych am fod yn
un o'r bobl hynny sy'n

887
00:40:17,487 --> 00:40:20,570
yn ceisio eich twyllo i ymweld â we
dudalen am eu bod wedi twyllo Google

888
00:40:20,570 --> 00:40:27,610
i mewn i feddwl mae criw cyfan
o eiriau allweddol like-- gadewch i ni weld, ail-lwytho.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
O ble ddaeth y mae'n mynd?

891
00:40:30,680 --> 00:40:31,530
Ac mae yn ein.

892
00:40:31,530 --> 00:40:32,030
Iawn.

893
00:40:32,030 --> 00:40:34,905
Felly, yr wyf yn dweud hyn wrth fynd heibio, yr ydym chi helpu
siarad am bethau hyn mewn ychydig wythnosau

894
00:40:34,905 --> 00:40:36,740
pan fyddwn yn sôn am
diogelwch, os ydych mewn gwirionedd

895
00:40:36,740 --> 00:40:38,852
tusw cyfan ymgorffori o
keywords mewn tudalen we,

896
00:40:38,852 --> 00:40:41,810
hyd yn oed os nad ydynt yn weladwy i
dynol, rhywun fel Google, wrth gwrs,

897
00:40:41,810 --> 00:40:43,250
Gall dal mewn gwirionedd yn cael hyn.

898
00:40:43,250 --> 00:40:45,820
Mae pob hawl, felly dyna 'n bert
erchyll yn weddol gyflym.

899
00:40:45,820 --> 00:40:48,420
>> Ac yn wir, nid yw'n gyd
bod llawer yn wahanol i fy gwe eu hunain

900
00:40:48,420 --> 00:40:51,480
dudalen fel myfyriwr israddedig, a oedd yn
Dechreuais googling o gwmpas i ddod o hyd

901
00:40:51,480 --> 00:40:53,690
fersiynau blaenorol o fy hen wefannau.

902
00:40:53,690 --> 00:40:54,500
Yr oedd yn eithaf gwael.

903
00:40:54,500 --> 00:40:56,650
A dweud y gwir, yr wyf yn dod o hyd
un ychydig cyn y dosbarth.

904
00:40:56,650 --> 00:40:58,620
Ond mae yn waeth i maes 'na.

905
00:40:58,620 --> 00:41:01,534
Mae hyn yn ôl pob golwg oedd fy
dudalen gartref yn ôl yn 1996.

906
00:41:01,534 --> 00:41:04,200
Mae'n debyg fy mod yn meddwl ei fod
briodol i ofyn i bobl eu henw

907
00:41:04,200 --> 00:41:05,991
cyn y gallent
mewn gwirionedd yn gweld fy tudalen ar y we.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> Ac yna Dangosais iddynt
rhywbeth twp, yn ôl pob tebyg.

910
00:41:11,920 --> 00:41:13,450
'N annhymerus' godi'r mwy ar gyfer y tro nesaf.

911
00:41:13,450 --> 00:41:16,220
Ond am nawr, gadewch i ni
ystyried ychydig o ddylunio.

912
00:41:16,220 --> 00:41:17,444
Rydym wedi siarad am steil.

913
00:41:17,444 --> 00:41:19,735
Ac mae hyn yn dudalen hyd yn hyn ac
y rhan fwyaf o bopeth yr wyf wedi ysgrifennu

914
00:41:19,735 --> 00:41:21,890
yn eithaf lân arddull.

915
00:41:21,890 --> 00:41:23,320
Ond beth am ddylunio?

916
00:41:23,320 --> 00:41:25,990
Wel, mae llawer o gael eu diswyddo
yn yr hyn yr wyf wedi bod yn ei wneud yma.

917
00:41:25,990 --> 00:41:28,156
>> Rwyf wedi crybwyll y gair
lliw mewn un neu ddau o leoedd.

918
00:41:28,156 --> 00:41:31,630
Rwyf wedi crybwyll maint y ffont mewn un neu ddau o
lleoedd a beiddgar mewn un neu ddau o leoedd.

919
00:41:31,630 --> 00:41:34,870
Ac yn y bôn, dwi'n cyd
cymysgu dwy iaith.

920
00:41:34,870 --> 00:41:38,100
Mae gen i HTML gyda fy tagiau a fy
priodoleddau ac yna yn sydyn,

921
00:41:38,100 --> 00:41:40,100
rhwng dyfyniadau, yr wyf wedi
yr ail iaith heddiw

922
00:41:40,100 --> 00:41:43,830
Gelwir CSS, sydd unwaith eto, yn unig yw hyn
parau gwerth allweddol neu eiddo hyn

923
00:41:43,830 --> 00:41:45,280
gwahanu gan colon.

924
00:41:45,280 --> 00:41:47,700
>> Mae'n ymddangos bod llawer
fel yn C lle rydym

925
00:41:47,700 --> 00:41:50,550
Gall ddechrau ffactor allan
rhywfaint o cod i mewn ffeiliau pennawd,

926
00:41:50,550 --> 00:41:53,520
er mwyn i ni wneud yr un peth mewn HTML.

927
00:41:53,520 --> 00:41:56,030
Ac yn gam tuag at hynny fel a ganlyn.

928
00:41:56,030 --> 00:42:02,230
Sylwch fod y fersiwn hwn, CSS1.html yw
Yn strwythurol yr un dudalen we union.

929
00:42:02,230 --> 00:42:05,250
Felly mae gen i criw cyfan
o divs, ond y tro hwn, rwyf wedi

930
00:42:05,250 --> 00:42:07,220
gotten gwared ar y deunydd lapio
div fel y byddwch yn gweld.

931
00:42:07,220 --> 00:42:12,390
>> Ac yr wyf wedi rhoi rhai tri divs
top, canol, a gwaelod, rhifau adnabod unigryw.

932
00:42:12,390 --> 00:42:14,760
Mae hyn yn neis, oherwydd erbyn
gan roi adrannau hynny

933
00:42:14,760 --> 00:42:18,715
o'r dudalen dynodwyr unigryw,
Gallaf eu cyfeirio mewn mannau eraill.

934
00:42:18,715 --> 00:42:19,215
Ble?

935
00:42:19,215 --> 00:42:21,070
Wel, gadewch i mi sgrolio i fyny.

936
00:42:21,070 --> 00:42:24,070
Ac hyd yn hyn, unrhyw bryd yr ydym wedi edrych
ar ben tudalen ar y we, beth sydd

937
00:42:24,070 --> 00:42:28,560
yr unig tag a gawsom yn
y pennaeth dudalen ar y we?

938
00:42:28,560 --> 00:42:29,740
Mae uwch bach.

939
00:42:29,740 --> 00:42:30,799
Dim ond y teitl hyd yn hyn.

940
00:42:30,799 --> 00:42:32,590
Ond mae'n troi allan yno yn
ychydig o bethau eraill

941
00:42:32,590 --> 00:42:35,840
gallwch roi i mewn 'na, un o
y mae'n cael ei alw tag arddull.

942
00:42:35,840 --> 00:42:37,850
Felly funud yn ôl, edrychasom
mewn priodoledd arddull.

943
00:42:37,850 --> 00:42:39,150
Troi allan yna tag arddull.

944
00:42:39,150 --> 00:42:41,200
Mae'n perthyn tu mewn
y pennaeth tudalen ar y we.

945
00:42:41,200 --> 00:42:42,840
Ac yn awr sylwi ar yr hyn rwy'n ei wneud.

946
00:42:42,840 --> 00:42:46,540
Mae gen i tu mewn o hyn
tag arddull y canlynol.

947
00:42:46,540 --> 00:42:51,190
Im 'yn llythrennol yn sôn ar linell 20 y
enwi o tag yr wyf am ei stylize.

948
00:42:51,190 --> 00:42:53,489
>> Yna, mae gen i Brace cyrliog agored
ac ar gau brês cyrliog.

949
00:42:53,489 --> 00:42:56,030
Felly debyg o ran ysbryd i C, ond
eto, nid yw hyn yn swyddogaeth,

950
00:42:56,030 --> 00:42:57,796
mae hyn yn unig yw manylion cystrawennol yma.

951
00:42:57,796 --> 00:43:00,170
Ac yna, wrth gwrs, rwy'n dweud
y porwr, hey porwr,

952
00:43:00,170 --> 00:43:05,210
yn gwneud y corff cyfan y dudalen
cael aliniad testun ganolfan.

953
00:43:05,210 --> 00:43:06,930
Ac yna mae hyn yn ei ddweud y canlynol.

954
00:43:06,930 --> 00:43:12,600
Hey porwr, os byddwch yn gweld HTML
elfen neu tag yn y dudalen sy'n

955
00:43:12,600 --> 00:43:17,040
Mae gan dynodwr unigryw o ben,
felly mae'r symbol hash yma yn unig yn golygu

956
00:43:17,040 --> 00:43:21,010
syniad unigryw o top, mynd yn ei flaen
a gwneud ei maint ffont 36

957
00:43:21,010 --> 00:43:22,490
ac mae ei bwysau ffont print trwm.

958
00:43:22,490 --> 00:43:26,840
>> Hey porwr, elfen y mae ei
ID yn canol, yn ei gwneud yn 24 picsel.

959
00:43:26,840 --> 00:43:31,070
Ac hey porwr, os byddwch yn gweld
syniad o gwaelod, yn ei gwneud yn 12 picsel.

960
00:43:31,070 --> 00:43:33,540
Yr effaith yn y pen draw
yn union yr sam.

961
00:43:33,540 --> 00:43:36,500
Os byddaf yn mynd i mewn i CSS 1, mae'r
dudalen yn edrych yr un fath.

962
00:43:36,500 --> 00:43:39,810
Ond rydym yn gam tuag at
dyluniad ychydig yn well.

963
00:43:39,810 --> 00:43:44,850
Gadewch i mi yn awr yn mynd yn ôl yma i CSS2
a gweld beth arall dw i wedi gwneud.

964
00:43:44,850 --> 00:43:48,030
>> Nawr bod y dudalen yn iawn, iawn yn lân.

965
00:43:48,030 --> 00:43:50,730
Yn wir, gallaf addas i bawb o
y cynnwys ar dudalen fan hyn.

966
00:43:50,730 --> 00:43:54,270
Ond beth tag newydd mae'n rhaid i mi
cyflwyno, yn amlwg?

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
Ac nid yr enw gorau ar gyfer tag,
gan nad yw'n cyswllt yn yr ystyr

969
00:43:57,853 --> 00:44:00,780
ein bod yn gwybod hynny, ond mae hyn yn golygu
cyswllt mewn rhyw ffeil arall.

970
00:44:00,780 --> 00:44:02,890
Mae hyn yn fath o fel miniog cynnwys yn C.

971
00:44:02,890 --> 00:44:06,280
>> Dyma'r ffordd yn HTML
i ddweud hey porwr,

972
00:44:06,280 --> 00:44:10,240
fynd gael cynnwys
y ffeil o'r enw css2.css.

973
00:44:10,240 --> 00:44:12,880
Mae'r berthynas, i mi,
yw ei fod yn dalen arddull.

974
00:44:12,880 --> 00:44:17,980
Ac yn wir, dyna beth yr un o'r
S mewn steil rhaeadru Taflenni modd.

975
00:44:17,980 --> 00:44:20,350
Mae hwn yn dalen arddull.

976
00:44:20,350 --> 00:44:23,120
Dim ond y ffeil destun sy'n cynnwys
criw cyfan o eiddo.

977
00:44:23,120 --> 00:44:25,940
Mae'n criw cyfan o arddulliau
eich bod am wneud cais i dudalen.

978
00:44:25,940 --> 00:44:28,860
>> Ac felly mae hyn yn ôl pob golwg yn
gan gyfeirio at yr ail ffeil.

979
00:44:28,860 --> 00:44:32,970
Ac os wyf yn agor y, CSS2.css,
sylwi bod pob wyf wedi ei wneud

980
00:44:32,970 --> 00:44:35,900
yw adysgrifia a bastio i gyd
o hyn yn y ffeil hon.

981
00:44:35,900 --> 00:44:38,220
Ac yn awr, hyd yn oed os ydych erioed wedi
codio pethau hyn o'r blaen,

982
00:44:38,220 --> 00:44:40,700
dim ond ystyried gyda'r
het peirianneg diarhebol

983
00:44:40,700 --> 00:44:44,220
ar, pam mae hwn
gwell dylunio yn ôl pob tebyg?

984
00:44:44,220 --> 00:44:48,910
Ffactoreiddio allan eiddo CSS hynny,
eu rhoi ar eu ffeil eu hunain.

985
00:44:48,910 --> 00:44:51,330
Hyd yn oed er ein bod yn datrys hyn
problem debyg bum munud yn ôl

986
00:44:51,330 --> 00:44:52,600
yn y fersiwn cyntaf un.

987
00:44:52,600 --> 00:44:55,730
>> Nid ydym wedi gwella'r
tudalen arddull,

988
00:44:55,730 --> 00:44:57,520
mae hyn yn unig well
dylunio mewn rhyw synnwyr.

989
00:44:57,520 --> 00:44:58,990
Pam ydych chi'n meddwl?

990
00:44:58,990 --> 00:45:01,510
Yeah.

991
00:45:01,510 --> 00:45:02,260
Mwy hyblyg sut?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Yeah.

994
00:45:05,540 --> 00:45:07,373
Felly os ydych am fynd
yn ôl a newid pethau,

995
00:45:07,373 --> 00:45:09,540
Erbyn hyn, mae gennych un lle
lle y gallwch newid pethau.

996
00:45:09,540 --> 00:45:11,622
Ac yn wir, am rywbeth
fel problem yn gosod saith,

997
00:45:11,622 --> 00:45:13,690
lle byddwn yn gweithredu
Gwefan masnachu stoc,

998
00:45:13,690 --> 00:45:15,523
hynny'n mynd i gael
criw cyfan o dudalennau.

999
00:45:15,523 --> 00:45:17,620
A byddai'n wirioneddol
blino os byddwch yn penderfynu, EM,

1000
00:45:17,620 --> 00:45:21,630
Dwi ddim yn hoffi 24 picsel, yr wyf am
ei fod yn 28 o picsel neu ychydig yn fwy.

1001
00:45:21,630 --> 00:45:23,550
Ac mae'n rhaid iddynt wneud hynny
byd-eang yn canfod a newid

1002
00:45:23,550 --> 00:45:27,560
neu agor holl ffeiliau eich gwefan
yn syml i mewn gwirionedd yn newid un gwerth.

1003
00:45:27,560 --> 00:45:31,290
Drwy ffactoreiddio allan arddulliau hyn
mewn un lle canolog,

1004
00:45:31,290 --> 00:45:34,720
gallwch nawr agor un ffeil testun
mewn CS50IDE i mewn i unrhyw raglen,

1005
00:45:34,720 --> 00:45:36,479
ei newid, cadwch hi, ac yn ei wneud.

1006
00:45:36,479 --> 00:45:38,270
Rydych chi wedi lluosogi rhai
newidiadau ym mhob man.

1007
00:45:38,270 --> 00:45:42,450
A byddai hynny yr un fath
mewn ffeil dot h hefyd.

1008
00:45:42,450 --> 00:45:46,697
Felly unrhyw gwestiynau a thrwy hynny
yn hyn ar gystrawen hwn?

1009
00:45:46,697 --> 00:45:48,530
Mae pob hawl, felly rydym wedi
gwneud popeth y mae'n ymddangos

1010
00:45:48,530 --> 00:45:51,170
ac eithrio mewn gwirionedd yn gweithredu hypergysylltiadau.

1011
00:45:51,170 --> 00:45:52,740
Ac felly gadewch i ni fynd yn ei flaen ac yn gwneud hyn.

1012
00:45:52,740 --> 00:45:54,830
Gadewch i mi fynd yn ei flaen ac
creu ffeil newydd yma.

1013
00:45:54,830 --> 00:45:59,970
Rydw i'n mynd i alw
link.html, rhoi mewn cod heddiw.

1014
00:45:59,970 --> 00:46:03,000
>> Ac yr wyf i'n mynd i wneud agored
braced doc math html.

1015
00:46:03,000 --> 00:46:05,970
Fel o'r neilltu, y peth hyn yn y
top, mae hyn yn ddatganiad math doc,

1016
00:46:05,970 --> 00:46:08,420
'i' yr unig un sy'n rhyfedd
gyda'r pwynt ebychnod.

1017
00:46:08,420 --> 00:46:12,100
Mae'n rhaid i chi wneud hynny yno ac mae'n
golygu ein bod yn defnyddio fersiwn HTML 5.

1018
00:46:12,100 --> 00:46:14,460
Fersiynau hŷn o
Roedd gan iaith llawer hirach

1019
00:46:14,460 --> 00:46:16,400
llinynnau yr oedd angen i chi roi yno.

1020
00:46:16,400 --> 00:46:18,620
Felly dyma enghraifft o'r enw cyswllt.

1021
00:46:18,620 --> 00:46:20,950
>> Mae angen corff o fy dudalen we yma rwyf.

1022
00:46:20,950 --> 00:46:29,770
Ac mewn yma, mae gyfartal href
gadewch i ni ddweud HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
a fy hoff wefan, byddwn yn ei ddweud.

1024
00:46:35,420 --> 00:46:38,550
Mae pob hawl, felly mae iawn
dudalen ddiniwed, hawdd ei ddefnyddio.

1025
00:46:38,550 --> 00:46:42,950
Os wyf yn awr yn mynd i mewn i fy cyfeiriadur
rhestru yma ac agor link.html,

1026
00:46:42,950 --> 00:46:44,780
mae gennym testun hyper.

1027
00:46:44,780 --> 00:46:47,410
>> Ac yn wir, dyma lle
yr H yn HTTP yn dod.

1028
00:46:47,410 --> 00:46:51,580
Protocol Trosglwyddo Hyperdestun
yn ymwneud â throsglwyddo testun

1029
00:46:51,580 --> 00:46:53,840
sydd â hypergysylltiadau i adnoddau eraill.

1030
00:46:53,840 --> 00:46:58,210
Ac yn wir, dyma yw'r cyfarwydd,
os retro, dolen las os clicio,

1031
00:46:58,210 --> 00:47:02,607
Bydd gwirionedd yn fy arwain at Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Yn awr, oh, sy'n dod allan yn fuan.

1033
00:47:03,940 --> 00:47:08,970
Mae pob hawl, felly, yn awr, beth yw rhai
o oblygiadau hyn?

1034
00:47:08,970 --> 00:47:11,610
>> Ac yn dweud y gwir, mae'r byd yn cychwyn
er mwyn cael ychydig yn fwy cyfarwydd

1035
00:47:11,610 --> 00:47:15,090
a hefyd ychydig yn scarier
ond mae hefyd ychydig yn fwy

1036
00:47:15,090 --> 00:47:17,840
hunan amddiffynadwy unwaith i chi ddechrau
i ddeall y pethau hyn.

1037
00:47:17,840 --> 00:47:21,610
Oherwydd groes yn, rhai ohonoch, os ewch chi
trwy eich ffolder spam Gmail neu hyd yn oed

1038
00:47:21,610 --> 00:47:23,990
i'ch mewnflwch, eich bod wedi yn ôl pob tebyg
gotten rhyw fath o e-bost

1039
00:47:23,990 --> 00:47:26,980
sy'n gofyn i chi newid eich
cyfrinair efallai neu efallai wirio

1040
00:47:26,980 --> 00:47:28,910
eich cymwysterau PayPal neu whatnot.

1041
00:47:28,910 --> 00:47:34,510
>> Ac yn wir, efallai y byddwch wedi derbyn
rhywbeth sy'n dweud fel cliciwch yma

1042
00:47:34,510 --> 00:47:42,260
i ailosod eich cyfrinair PayPal.

1043
00:47:42,260 --> 00:47:44,130
Ac yn awr, yn sylwi, os
nid yw hyn yn Disney.com

1044
00:47:44,130 --> 00:47:51,600
ond fel badplace.com a
ail-lwytho, yn nodi bod y testun yma

1045
00:47:51,600 --> 00:47:53,710
Gallai dweud unrhyw beth o gwbl.

1046
00:47:53,710 --> 00:47:55,260
Ac yn wir, mae hyn yn unig eiriau.

1047
00:47:55,260 --> 00:48:04,610
Pam na wnewch Fi 'n weithredol yn super maleisus
a dweud http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Cliciwch yma ailosod eich PayPal
cyfrinair a reload yn awr.

1049
00:48:14,090 --> 00:48:16,220
Mae hyn yn edrych yn eithaf cyfreithlon, dde?

1050
00:48:16,220 --> 00:48:20,470
Hynny yw, ni fyddwn yn clicio ar
e-bost mai dim ond yn dweud y bydd hyn.

1051
00:48:20,470 --> 00:48:22,450
Ond yn sylwi ar y ddeuoliaeth yma.

1052
00:48:22,450 --> 00:48:26,880
Mae'n dweud www.paypal.com,
ac mewn gwirionedd, arhoswch funud,

1053
00:48:26,880 --> 00:48:29,210
rydym yn gwybod eich bod am
y s ar gyfer diogelwch.

1054
00:48:29,210 --> 00:48:35,450
Felly nawr, ewch i www.paypal.com HTTPS,
ond os nad ydych erioed wedi gwneud hyn o'r blaen,

1055
00:48:35,450 --> 00:48:38,182
ddim yn mynd i'r arfer o
hofran dros gysylltiadau bach yma.

1056
00:48:38,182 --> 00:48:39,890
Ac mae'n anodd gweld
ar y sgrin yno,

1057
00:48:39,890 --> 00:48:41,340
ac nid yw bob un sy'n haws yma.

1058
00:48:41,340 --> 00:48:43,615
Ond ffordd i lawr yma yn
y gornel bach bach

1059
00:48:43,615 --> 00:48:45,740
mae'r porwr mewn gwirionedd
ddweud wrthych ein bod yn mynd

1060
00:48:45,740 --> 00:48:48,850
i badplace.com yn lle Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Yn awr, lle rydym yn mynd â hyn?

1062
00:48:51,620 --> 00:48:54,859
Mae'r holl enghreifftiau rydym wedi'i wneud heddiw,
rydym wedi codio galed ac teipio allan â llaw.

1063
00:48:54,859 --> 00:48:56,900
Mae'r we yn hynod
anniddorol pan fyddwch yn galed

1064
00:48:56,900 --> 00:48:59,844
cod eich tudalennau gwe fel bod y cynnwys
yn statig a byth yn newid.

1065
00:48:59,844 --> 00:49:01,760
Wrth gwrs, mae ein holl
hoff wefannau heddiw,

1066
00:49:01,760 --> 00:49:04,470
boed yn Gmail neu Twitter neu
Facebook neu unrhyw nifer o bobl eraill

1067
00:49:04,470 --> 00:49:05,290
yn ddeinamig.

1068
00:49:05,290 --> 00:49:07,340
Maent yn newid mewn
ymateb i mewnbwn defnyddwyr

1069
00:49:07,340 --> 00:49:08,840
yn union fel y canlyniadau chwilio Google.

1070
00:49:08,840 --> 00:49:12,415
>> Ac yn y blaen ar ddydd Mercher, yr hyn rydym yn ei wneud yw
ydym yn gadael HTML a chyflwyniad CSS

1071
00:49:12,415 --> 00:49:14,290
tu ôl i ni ac rydym yn cymryd
yn ganiataol ein bod yn awr

1072
00:49:14,290 --> 00:49:16,640
yn gwybod ei fod ac rydym yn cyflwyno
iaith raglennu newydd

1073
00:49:16,640 --> 00:49:19,050
o'r enw PHP, sy'n hoffi
C, yn mynd i roi i ni

1074
00:49:19,050 --> 00:49:22,450
y pŵer i mewn gwirionedd yn creu rhaglenni
bod hwy eu hunain yn cynhyrchu allbwn.

1075
00:49:22,450 --> 00:49:25,900
Yn yr achos hwn, byddwn yn defnyddio
PHP i gynhyrchu ddeinamig ar y we

1076
00:49:25,900 --> 00:49:27,340
tudalennau gan ddefnyddio'r iaith newydd.

1077
00:49:27,340 --> 00:49:28,989
Felly mwy am hynny ar ddydd Mercher.

1078
00:49:28,989 --> 00:49:29,530
Welwn ni chi wedyn.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [CHWARAE CERDDORIAETH]

1081
00:49:37,380 --> 00:52:38,864