1 00:00:00,000 --> 00:00:06,986 2 00:00:06,986 --> 00:00:10,450 >> DAVEN FARNHAM: Heddiw, yr wyf i'n mynd i siarad ychydig am HTML, 3 00:00:10,450 --> 00:00:12,330 Iaith Markup HyperText. 4 00:00:12,330 --> 00:00:14,450 Byddwch yn gweld HTML ym mhob man y dyddiau hyn. 5 00:00:14,450 --> 00:00:17,190 Yn wir, os ydych yn gwylio'r fideo mewn porwr, rydych yn 6 00:00:17,190 --> 00:00:19,120 gweld HTML ar hyn o bryd. 7 00:00:19,120 --> 00:00:22,760 Nid HTML yn iaith raglennu, yn hytrach, mae'n iaith markup a ddefnyddir gan 8 00:00:22,760 --> 00:00:25,460 porwyr gwe i rendro tudalennau ar y rhyngrwyd. 9 00:00:25,460 --> 00:00:30,410 >> Felly efallai y byddwch yn gofyn, sut yn union yn ysgrifennu tudalen ar y we yn HTML gwahanol 10 00:00:30,410 --> 00:00:33,574 o ysgrifennu rhaglen mewn rhaglenni iaith fel C? 11 00:00:33,574 --> 00:00:38,010 Wel, C yw iaith â llym iawn rheolau cystrawennol y mae angen ei 12 00:00:38,010 --> 00:00:39,880 a luniwyd cyn y gellir ei rhedeg. 13 00:00:39,880 --> 00:00:43,070 Os ydych wedi anghofio'ch erioed i gynnwys hanner colon ar ddiwedd y datganiad yn 14 00:00:43,070 --> 00:00:46,660 eich cod C, eich bod yn gwybod beth rwy'n siarad am mewn perthynas â cystrawen llym. 15 00:00:46,660 --> 00:00:50,360 >> Porwyr gwe, fodd bynnag, yn ychydig yn fwy maddau pan ddaw i HTML. 16 00:00:50,360 --> 00:00:53,860 Hyd yn oed os nad yw eich HTML yn syntactically gywir, efallai y bydd eich tudalen yn dal i fod 17 00:00:53,860 --> 00:00:57,150 harddangos gan borwr, ond y gallai Nid yw edrych fel y bwriadwyd. 18 00:00:57,150 --> 00:00:59,640 Felly, mae'n well bob amser i yn dilyn y rheolau. 19 00:00:59,640 --> 00:01:01,990 Y ffordd orau i gael greddf am sut y mae pethau'n gweithio yw 20 00:01:01,990 --> 00:01:03,300 mynd drwy esiampl. 21 00:01:03,300 --> 00:01:07,360 >> Felly, yr hyn sydd gennym yma yw sylfaenol glasbrint ar gyfer tudalen we. 22 00:01:07,360 --> 00:01:10,690 Mae'n debyg y byddwch sylwi ar lawer o bethau rhwng cromfachau onglog. 23 00:01:10,690 --> 00:01:12,900 Wel, y rhai yn unig tagiau. 24 00:01:12,900 --> 00:01:15,810 Tags bôn gwybod i borwyr gwe hynny, hey, rhywbeth 25 00:01:15,810 --> 00:01:17,150 yn dod eich ffordd. 26 00:01:17,150 --> 00:01:20,770 Cofiwch, fodd bynnag, pryd bynnag y byddwch yn agor tag, mae angen i chi ei gau unwaith y byddwch yn 27 00:01:20,770 --> 00:01:21,750 wneud ei ddefnyddio. 28 00:01:21,750 --> 00:01:24,690 >> Felly, er enghraifft, yr wyf yn agor adran o god gyda agored 29 00:01:24,690 --> 00:01:26,960 corff braced, cromfach agos. 30 00:01:26,960 --> 00:01:31,280 Yna ychwanegu testun, yn yr achos hwn, mae fy dudalen we cyntaf, yna pan es i 31 00:01:31,280 --> 00:01:35,540 cau'r adran hon, yr wyf yn defnyddio bron i tag union yr un fath ac eithrio y tro hwn gyda 32 00:01:35,540 --> 00:01:37,660 ymlaen slaes cyn corff. 33 00:01:37,660 --> 00:01:41,140 Yn gyffredinol, mae hyn yn y fformat rydych yn mynd i ddefnyddio pryd bynnag y byddwch yn agor 34 00:01:41,140 --> 00:01:42,680 a chau tagiau. 35 00:01:42,680 --> 00:01:47,900 Gyda'i gilydd, tag agored a thag ben cyfansoddi yr hyn a elwir yn elfen. 36 00:01:47,900 --> 00:01:51,870 >> Os ydych yn edrych ar y llinell gyntaf, byddwch yn gweld pwynt ebychnod a ddilynir gan 37 00:01:51,870 --> 00:01:53,350 Html DOCTYPE. 38 00:01:53,350 --> 00:01:56,280 Mae hyn yn wir yn unig dweud wrth eich porwr fod y ffeil yn dudalen ar y we 39 00:01:56,280 --> 00:01:58,280 ysgrifennu yn HTML. 40 00:01:58,280 --> 00:02:01,970 Mae'r tag HTML yn dweud yn ei hanfod, yma hon rhywfaint o HTML. 41 00:02:01,970 --> 00:02:04,950 Yna, mae gennym tag pen gyda tag teitl y tu mewn iddo. 42 00:02:04,950 --> 00:02:09,430 Mae'r tag pen y gallwch feddwl amdano fel yn cynnwys cod HTML a ddaw i 43 00:02:09,430 --> 00:02:12,670 y rhan fwyaf eich tudalen gwe cynnwys gwirioneddol. 44 00:02:12,670 --> 00:02:16,700 >> Yn gyffredinol, i chi roi teitl eich dudalen we yma, er bod rhai 45 00:02:16,700 --> 00:02:19,350 tagiau eraill a all ymddangos yma hefyd. 46 00:02:19,350 --> 00:02:25,020 Nesaf daw corff eich tudalen we, mae'r cig ac esgyrn gwirioneddol eich gwefan. 47 00:02:25,020 --> 00:02:28,910 Yn ein enghraifft, rydym wedi dim ond rhoi syml dedfryd, Fy Tudalen We gyntaf, 48 00:02:28,910 --> 00:02:34,100 a fydd, os rydym yn cynnal ein safle, yn edrych rhywbeth bach fel hyn. 49 00:02:34,100 --> 00:02:36,810 Nid yw ein tudalen ar y we yn rhy queer, ond peidiwch â phoeni. 50 00:02:36,810 --> 00:02:39,210 Byddwn yn sbriws i fyny yn fuan. 51 00:02:39,210 --> 00:02:44,070 >> Felly, y HTML uchod, byddwn yn rhoi i chi yn iawn templed sylfaenol ar gyfer tudalen we, 52 00:02:44,070 --> 00:02:46,310 dim byd ffansi, dim ond y esgyrn noeth. 53 00:02:46,310 --> 00:02:49,160 Ond os ydw i'n creu tudalen ar y we, beth os wyf am ychwanegu 54 00:02:49,160 --> 00:02:50,760 llun o, dyweder, fy hun? 55 00:02:50,760 --> 00:02:52,760 Wel, gallaf wneud hynny. 56 00:02:52,760 --> 00:02:55,460 Mae cwpl o ffyrdd i ychwanegu delweddau at eich safle. 57 00:02:55,460 --> 00:02:59,780 Os yw'r ddelwedd yn yr un ffolder eich ffeil HTML, gallwch gysylltu â'r 58 00:02:59,780 --> 00:03:01,950 delwedd trwy'r llwybr fel hyn. 59 00:03:01,950 --> 00:03:05,910 >> I chi agor i fyny gyda thag delwedd dilyn gan yn Alt priodoledd yn y 60 00:03:05,910 --> 00:03:07,240 ffynhonnell y ddelwedd. 61 00:03:07,240 --> 00:03:12,030 Gwerth y priodoledd Alt yn ddim ond rhai testun amgen rhag ofn defnyddiwr na all 62 00:03:12,030 --> 00:03:13,580 gweld y llun. 63 00:03:13,580 --> 00:03:19,680 Fel arall, gallwch hefyd gysylltu â delweddau trwy URL llawn, fel hyn. 64 00:03:19,680 --> 00:03:24,180 Nawr, nid y wefan honno ddim yn bodoli, ond os oedd darlun o 65 00:03:24,180 --> 00:03:27,760 mi yn y cyfeiriad hwnnw, gallwn ei ddefnyddio yr URL ffynhonnell i gynnwys 66 00:03:27,760 --> 00:03:29,930 ei ddelwedd ar fy ngwefan. 67 00:03:29,930 --> 00:03:35,590 Naill ffordd neu'r llall, byddwch yn y diwedd gyda llawer gwefan prettier, rhywbeth fel hyn. 68 00:03:35,590 --> 00:03:39,730 >> Wel, dyna 'n bert oera, ond yr wyf yn fath o eisiau rhywfaint o destun yma hefyd. 69 00:03:39,730 --> 00:03:43,020 Felly, gadewch i ni ychwanegu rhywbeth super syml uwchben y 70 00:03:43,020 --> 00:03:45,210 delwedd, fel y pennawd. 71 00:03:45,210 --> 00:03:50,830 Y cyfan yr wyf wedi ei wneud hyd yn hyn yw defnyddio'r pennawd tag, H1, a thoriad llinell tag, br. 72 00:03:50,830 --> 00:03:54,900 Mae'r tag pennawd yn gwneud y ffont ychydig ychydig yn fwy ac yn fwy amlwg. 73 00:03:54,900 --> 00:03:58,930 Mae'r tag toriad llinell, ar y llaw arall llaw, yn fath o oer. 74 00:03:58,930 --> 00:04:03,720 Wahanol i'r rhan fwyaf tagiau eraill, nad oes gennych tag agor a chau egwyl, dim ond 75 00:04:03,720 --> 00:04:05,120 yr un a ddangosir uchod. 76 00:04:05,120 --> 00:04:10,420 Mae hyn oherwydd toriad gan unrhyw gynnwys ac felly, elfen wag. 77 00:04:10,420 --> 00:04:14,940 >> Elfennau gwag fel hyn, gallwch agor ac yn agos ar yr un pryd dim ond drwy 78 00:04:14,940 --> 00:04:20,420 gan gynnwys slaes ymlaen ar y ddiwedd y datganiad cychwynnol. 79 00:04:20,420 --> 00:04:24,390 Felly nawr fy ngwefan yn edrych ychydig yn rhywbeth fel hyn. 80 00:04:24,390 --> 00:04:27,410 Well, ond mae'n fath o teimlo fel diwedd marw. 81 00:04:27,410 --> 00:04:30,850 Does unman arall i fynd o'r neilltu o'r brif dudalen. 82 00:04:30,850 --> 00:04:33,075 Wel, gadewch i ni atgyweiria bod gan gan gynnwys cyswllt. 83 00:04:33,075 --> 00:04:36,860 >> Yr hyn yr wyf i'n mynd i wneud yma yn defnyddio priodoli a ddynodir gan A a gwneud y 84 00:04:36,860 --> 00:04:40,780 delwedd dolen i, gadewch i ni ddweud, CS50 teledu. 85 00:04:40,780 --> 00:04:44,460 Y ffordd honno, pryd bynnag unrhyw un yn clicio ar mi, Bydd eu porwr cael eu cyfeirio at 86 00:04:44,460 --> 00:04:47,810 arall, yn ôl pob tebyg yn fwy ddefnyddiol, tudalen we. 87 00:04:47,810 --> 00:04:51,040 Rwyf wedi cael i leihau maint y neges destun ychydig oherwydd bod ein tudalen ar y we yn 88 00:04:51,040 --> 00:04:52,470 mynd yn fwy datblygedig. 89 00:04:52,470 --> 00:04:54,590 Ond gobeithio, mae'n dal i fod yn glir. 90 00:04:54,590 --> 00:04:59,460 Mae fy gwefan yn edrych yn union yr un fath yn unig yn awr, pryd bynnag yr wyf yn cliciwch ar y llun, 91 00:04:59,460 --> 00:05:04,410 bydd fy porwr yn agor i fyny arall tab ar gyfer y dudalen we CS50.tv. 92 00:05:04,410 --> 00:05:08,970 >> Yn olaf, gadewch i ni ddweud fy mod i'n mynd i arddull y wefan hon yn ddiweddarach gan ddefnyddio CSS. 93 00:05:08,970 --> 00:05:11,730 CSS yw'r hyn a elwir yn dalen arddull rhaeadrol. 94 00:05:11,730 --> 00:05:15,230 Ac yn y bôn yn rhoi effeithlon ffordd i olygu ac arddull 95 00:05:15,230 --> 00:05:16,910 blociau tebyg o god. 96 00:05:16,910 --> 00:05:21,290 Yr wyf am ddechrau trefnu fy HTML i ei gwneud yn haws i arddull ddiweddarach. 97 00:05:21,290 --> 00:05:26,900 Yma, yr wyf yn sefydlu dau fath gwahanol o dynodwyr i helpu i drefnu fy cod. 98 00:05:26,900 --> 00:05:31,170 Rwyf wedi defnyddio'r briodoledd ID y tu mewn i rhannu, neu tag div, ac yr wyf wedi defnyddio 99 00:05:31,170 --> 00:05:34,120 Dosbarth yn priodoli y tu mewn tag div arall. 100 00:05:34,120 --> 00:05:37,190 >> ID a Dosbarth priodoleddau yn gweithio yn yr un modd. 101 00:05:37,190 --> 00:05:41,210 Yr unig wahaniaeth yw y gallwch chi dim ond un elfen, mae'r ID penodol, ond 102 00:05:41,210 --> 00:05:43,600 unrhyw nifer o elfennau Gall rhannu dosbarth. 103 00:05:43,600 --> 00:05:47,690 Felly, er enghraifft, gallaf ddefnyddio'r dosbarth delwedd sawl gwaith, ond ni allaf 104 00:05:47,690 --> 00:05:50,533 creu rhaniad arall gyda'r top adnabod. 105 00:05:50,533 --> 00:05:54,750 Er nad wyf wedi mynd i mewn i CSS, iaith arall a ddefnyddir yn gyffredin 106 00:05:54,750 --> 00:05:59,700 ochr yn ochr â HTML, unwaith y byddaf yn dechrau steilio fy cod gyda CSS, gallaf ddefnyddio'r rhain 107 00:05:59,700 --> 00:06:03,730 nodweddion sefydliadol i ddylanwadu estheteg fy dudalen gwe. 108 00:06:03,730 --> 00:06:07,600 >> Mae popeth o fewn y brig adran Bydd yn rhaid i stylings tebyg neu unrhyw 109 00:06:07,600 --> 00:06:12,010 grŵp arall y grŵp yr wyf yn HTML i mewn i'r Bydd delwedd dosbarth rhannu golwg tebyg. 110 00:06:12,010 --> 00:06:15,700 Mae hyn yn llawer haws na cheisio i olygu a delweddau arddull neu flociau o 111 00:06:15,700 --> 00:06:17,690 testun yn unigol. 112 00:06:17,690 --> 00:06:21,480 >> Felly aethom dros y pethau sylfaenol o sut y i wneud dudalen we gyda HTML. 113 00:06:21,480 --> 00:06:25,280 HTML Mae criw o nodweddion eraill hefyd pan paru gyda ieithoedd eraill 114 00:06:25,280 --> 00:06:29,220 fel CSS a JavaScript, gall mewn gwirionedd gwneud tudalennau sefyll allan. 115 00:06:29,220 --> 00:06:32,960 Y ffordd orau i gael gyfforddus gyda HTML yn unig i llanast o gwmpas gyda hi, 116 00:06:32,960 --> 00:06:35,120 weld beth sy'n gweithio, a beth nad yw'n gweithio. 117 00:06:35,120 --> 00:06:36,570 >> Fy enw i yw Daven Farnham. 118 00:06:36,570 --> 00:06:37,820 Mae hyn yn CS50. 119 00:06:37,820 --> 00:06:40,640 120 00:06:40,640 --> 00:06:45,690 >> Felly, er enghraifft, gall yr wyf yn defnyddio y ddelwedd dosbarth - 121 00:06:45,690 --> 00:06:48,028 Nac oes, mae cymaint o nodweddion. 122 00:06:48,028 --> 00:06:52,500 123 00:06:52,500 --> 00:06:53,950 Fy enw i yw Daven Farnham. 124 00:06:53,950 --> 00:06:58,560 Mae hyn yn CS 650. 125 00:06:58,560 --> 00:06:59,810 Wyf am ei ddweud CSS. 126 00:06:59,810 --> 00:07:02,325 127 00:07:02,325 --> 00:07:03,575 Mae hyn yn CSS. 128 00:07:03,575 --> 00:07:05,408