1 00:00:00,000 --> 00:00:06,100 2 00:00:06,100 --> 00:00:08,790 >> DOUG LLOYD: Kaya namin na ginugol about-- kung ang aking math ang tama, 3 00:00:08,790 --> 00:00:11,900 at sa tingin ko naghahanap back-- tingin ko namin na ginugol ang tungkol sa 35 mga video na pakikipag-usap 4 00:00:11,900 --> 00:00:15,139 tungkol sa iba't ibang aspeto ng C, siguro ng kaunti pa, marahil ng isang maliit na mas mababa. 5 00:00:15,139 --> 00:00:16,930 At hindi namin ginawa masaklawan lahat ng bagay sa C, ngunit hindi namin 6 00:00:16,930 --> 00:00:21,170 sakop ng isang malaking tipak ng wika, ang karamihan sa mga ito, 7 00:00:21,170 --> 00:00:22,882 tiyak para sa mga karaniwang gumagamit. 8 00:00:22,882 --> 00:00:25,090 Ngayon kami ay pagpunta sa makipag-usap tungkol sa isa pang wika, HTML. 9 00:00:25,090 --> 00:00:28,180 At kami ay pagpunta upang masakop ito sa isang video lamang. 10 00:00:28,180 --> 00:00:29,340 >> Ngunit iyon ay magiging OK. 11 00:00:29,340 --> 00:00:31,410 Iyan ay pagpunta sa tunay na maging isang bagay na ikaw ay pagpunta sa masanay. 12 00:00:31,410 --> 00:00:33,535 Ngayon na mayroon ka ng mga mga batayan ng isang wika, 13 00:00:33,535 --> 00:00:35,776 ito ay aktwal na medyo madali upang simulan ang pag-aaral ng iba. 14 00:00:35,776 --> 00:00:37,650 Kaya kami ay pagpunta upang simulan ang sa hakbang ng isang maliit na bumalik 15 00:00:37,650 --> 00:00:43,340 at pagtakpan ang basic pagkakaiba sa pagitan ng mga wikang ito 16 00:00:43,340 --> 00:00:45,750 at ang uri ng mga iniwan mo dito. 17 00:00:45,750 --> 00:00:48,530 May isang pulutong ng mga tunay na magaling resources sa internet, kung saan 18 00:00:48,530 --> 00:00:51,279 kami ay pagpunta sa simulan ang nagtutulak sa iyo patungo dahil ang internet ay 19 00:00:51,279 --> 00:00:53,340 isang malawak na imbakan ng impormasyon. 20 00:00:53,340 --> 00:00:55,960 At kaya ito ay hindi na gusto mo makikita maging pagkawala out kinakailangang 21 00:00:55,960 --> 00:00:58,349 sa pamamagitan ng hindi pagkakaroon ng impormasyon sakop sa isang video. 22 00:00:58,349 --> 00:01:00,640 Makikita mo pa rin ay maaaring makakuha ng lahat ng kailangan mo at gamitin 23 00:01:00,640 --> 00:01:03,590 ang kaalaman na sa iyo na binuo sa pamamagitan ng pag-unawa sa C 24 00:01:03,590 --> 00:01:07,130 upang gawin ang mga pag-aaral curve para sa mga iba pang mga wika tunay na isang pulutong mambola. 25 00:01:07,130 --> 00:01:08,640 Pangako ko. 26 00:01:08,640 --> 00:01:12,770 >> Ngunit makipag-usap tungkol sa isang wika hayaan iyan ay talagang pangunahing para sa bawat web 27 00:01:12,770 --> 00:01:14,830 pahina, na kung saan ay HTML. 28 00:01:14,830 --> 00:01:18,230 HTML ay ang Hyper Text Markup Language. 29 00:01:18,230 --> 00:01:22,700 HTML ay isang wika ngunit ito ay hindi isang programming language. 30 00:01:22,700 --> 00:01:23,900 >> HTML ay hindi magkaroon ng mga variable. 31 00:01:23,900 --> 00:01:26,430 Hindi nito ay may lohika o andar o anumang bagay tulad na. 32 00:01:26,430 --> 00:01:30,301 Hindi namin maaaring gawin ang anumang programming per se sa HTML. 33 00:01:30,301 --> 00:01:32,300 Minsan makikita mo marinig tao ilarawan ang kanilang sarili 34 00:01:32,300 --> 00:01:35,710 bilang programmer HTML, na kung saan ay hindi ganap na tumpak. 35 00:01:35,710 --> 00:01:37,980 Hindi namin maaaring sumulat ng mga programa HTML. 36 00:01:37,980 --> 00:01:40,770 >> HTML ay ginagamit lamang upang markahan up teksto. 37 00:01:40,770 --> 00:01:42,690 Ito ay tinatawag na isang markup language. 38 00:01:42,690 --> 00:01:47,680 At kung ano ito does-- ito markup-- ginagamit namin ang mga tag sa HTML at mga tags-- 39 00:01:47,680 --> 00:01:51,600 ito markup-- semantically tumutukoy sa istraktura ng isang pahina 40 00:01:51,600 --> 00:01:55,280 at nagiging sanhi ng mga plain text na umiiral sa pagitan ng mga tag upang bigyang-kahulugan 41 00:01:55,280 --> 00:01:57,320 sa pamamagitan ng browser sa iba't ibang paraan. 42 00:01:57,320 --> 00:02:00,370 At marahil ito ay pinakamahusay upang ipaliwanag ito sa pamamagitan ng paraan ng isang paglalarawan. 43 00:02:00,370 --> 00:02:06,450 >> Narito ang isang napaka-simpleng pahina ng HTML, hindi isang programa ng HTML, muli, isang HTML na pahina. 44 00:02:06,450 --> 00:02:08,680 At alam namin na ito ay isang HTML page dahil hindi namin 45 00:02:08,680 --> 00:02:11,480 bounded ang lahat ng bagay na may mga tag na HTML. 46 00:02:11,480 --> 00:02:13,850 Kaya ito ay kung ano ang hitsura ng isang HTML tag tulad ng. 47 00:02:13,850 --> 00:02:15,870 Ito ay sa pagitan ng angle bracket. 48 00:02:15,870 --> 00:02:18,570 At mapansin sa tuktok kami HTML at sa pinakadulo ibaba, 49 00:02:18,570 --> 00:02:21,400 matapos ang aming nagawa kung ano ang tila isang pulutong ng iba pang mga HTML, 50 00:02:21,400 --> 00:02:24,310 kami ay may angle bracket slash HTML. 51 00:02:24,310 --> 00:02:29,262 Kaya na uri ng ay ang hangganan pagitan ng kung ano ang HTML at ano ang hindi. 52 00:02:29,262 --> 00:02:32,220 At siyempre, conventionally, makatarungan gaya ng isinulat mo ang lahat ng iyong C programa 53 00:02:32,220 --> 00:02:35,300 may tuldok C extension, ang lahat ng iyong mga file na HTML 54 00:02:35,300 --> 00:02:37,909 ay nagtatapos sa tuldok extension HTML. 55 00:02:37,909 --> 00:02:39,200 Ngunit mayroong higit pa sa pagpunta dito. 56 00:02:39,200 --> 00:02:40,658 Hindi namin lamang magkaroon ng mga tag na HTML. 57 00:02:40,658 --> 00:02:44,010 Malas naming magkaroon ito bagay na tinatawag na isang ulo tag. 58 00:02:44,010 --> 00:02:46,010 Well, OK, ano na? 59 00:02:46,010 --> 00:02:48,550 >> Well marahil ito ay pinakamahusay na makilala sa pamamagitan ng paraan ng isang katawan, 60 00:02:48,550 --> 00:02:50,590 katawan na ang nilalaman ng mga web page. 61 00:02:50,590 --> 00:02:55,860 Kaya siguro ang ulo tag tumutukoy stuff na ito ay hindi sa window ng browser tamang, 62 00:02:55,860 --> 00:02:59,410 ngunit sa anuman ay mahalaga sa aming mga web page na nai-render nang tama. 63 00:02:59,410 --> 00:03:02,490 Halimbawa, sa loob ng head tag na namin title tag. 64 00:03:02,490 --> 00:03:05,500 >> Kaya title pagiging kumusta mundo, na ang tunay na pagpunta sa kung ano 65 00:03:05,500 --> 00:03:08,797 nagpapakita sa mga tab sa Chrome o sa safari o Firefox-- 66 00:03:08,797 --> 00:03:11,880 kahit anong browser prefer-- ka na ano ang pagpunta sa magpapakita sa mga pamagat. 67 00:03:11,880 --> 00:03:14,800 At bago tabs ito ay magpapakita ng up sa iyong buong window ng browser 68 00:03:14,800 --> 00:03:19,710 at maaari ka lamang magkaroon ng isang pahina buksan sa isang window ng browser sa isang pagkakataon. 69 00:03:19,710 --> 00:03:22,160 Kaya na ang pagpunta sa maging ang pamagat ng aking pahina sa tab 70 00:03:22,160 --> 00:03:24,600 o window ng browser bar, hello mundo. 71 00:03:24,600 --> 00:03:28,611 At pagkatapos ay ang nilalaman ng aking web page ay mundo, hello. 72 00:03:28,611 --> 00:03:31,360 Kaya sabihin kumuha ng isang pagtingin sa kung ano ang ilang mga bagay na tulad nito ay maaaring magmukhang. 73 00:03:31,360 --> 00:03:33,210 Ito ay isang medyo simpleng pahina ng HTML. 74 00:03:33,210 --> 00:03:35,970 Kaya ako dito sa aking CS50 IDE at Na naka-zoom ko sa ilang sandali. 75 00:03:35,970 --> 00:03:38,290 At lamang ako ng pagpunta sa magbukas kumusta dot HTML 76 00:03:38,290 --> 00:03:42,000 at ipakita sa iyo na ito ay medyo marami nilalaman ng pahina na nakita natin dati. 77 00:03:42,000 --> 00:03:45,240 My simple HTML, ulo ng mga tag, tag ng pamagat, katawan, at iba pa. 78 00:03:45,240 --> 00:03:47,320 Na naka-indent kong maging malinis. 79 00:03:47,320 --> 00:03:51,530 >> At pagkatapos ay kung ano ang maaari kong gawin sa aking IDE ay i-preview lamang ang pahina. 80 00:03:51,530 --> 00:03:52,630 At doon kami pumunta. 81 00:03:52,630 --> 00:03:56,070 Ang nilalaman ng aking pahina ay mundo, hello, at hindi ko makita ang anumang bagay 82 00:03:56,070 --> 00:03:58,500 in mula sa ulo ng mga tag doon. 83 00:03:58,500 --> 00:03:59,980 Ito lang ang nilalaman ng katawan. 84 00:03:59,980 --> 00:04:00,780 World, hello. 85 00:04:00,780 --> 00:04:03,700 At muli ang katawan lamang sinabi, mundo, hello. 86 00:04:03,700 --> 00:04:06,160 Ang iba pang mga bahagi ay nawawala. 87 00:04:06,160 --> 00:04:07,610 >> Kaya na talagang lahat ng ito ay. 88 00:04:07,610 --> 00:04:11,370 Ito ay isang napaka-simpleng basic HTML na pahina. 89 00:04:11,370 --> 00:04:14,280 Ngayon na naka-indent ko na ang aking HTML sa maging talagang maganda at inorganisa, 90 00:04:14,280 --> 00:04:15,840 ngunit hindi ko talaga kailangang. 91 00:04:15,840 --> 00:04:17,959 Kaya kong gawin itong magmukhang medyo pangit. 92 00:04:17,959 --> 00:04:19,467 At ito ay gagana pa rin. 93 00:04:19,467 --> 00:04:21,050 Ito ay ang eksaktong parehong web page. 94 00:04:21,050 --> 00:04:23,100 Ko na lang nakuha mapupuksa lahat ng mga white space. 95 00:04:23,100 --> 00:04:24,820 >> Bilang ito ay lumiliko out, white space ay data. 96 00:04:24,820 --> 00:04:28,540 At kaya kapag kami ay nagpapadala ng data mula sa sender sa receiver, mula sa server 97 00:04:28,540 --> 00:04:30,670 sa client, gastos sa pera ng data. 98 00:04:30,670 --> 00:04:34,460 At kaya pagkuha ng alisan ng whitespace ay talagang isang magandang ideya 99 00:04:34,460 --> 00:04:37,320 kung ikaw ay isang tao na naglilingkod up ng isang pulutong ng mga web content. 100 00:04:37,320 --> 00:04:39,820 Ito ay isang masamang ideya kung ikaw ay isang tao kung sino ang pag-aaral ng mga bagay-bagay na ito 101 00:04:39,820 --> 00:04:41,528 at gusto mong magkaroon ng ito mabuti na inayos. 102 00:04:41,528 --> 00:04:43,810 Ito ay isang pulutong mas madali upang i-parse kaysa ito. 103 00:04:43,810 --> 00:04:45,540 Ngunit ito ay pagtakbo kapareho. 104 00:04:45,540 --> 00:04:48,720 >> Ang indentation at bagay-bagay na tulad ng ay hindi tunay na mahalaga sa HTML. 105 00:04:48,720 --> 00:04:53,634 Ang lahat na bagay ay pagbubukas ng mga tag at mga pagsasara ng mga tag sa tamang pagkakasunod-sunod. 106 00:04:53,634 --> 00:04:55,050 Pansinin kung ano ang nangyari dito, bagaman. 107 00:04:55,050 --> 00:04:58,450 Markup ay nagbibigay sa amin ng isang paraan upang makipag-usap sa dagdag na impormasyon 108 00:04:58,450 --> 00:04:59,940 tungkol sa kung ano na aming sinulat. 109 00:04:59,940 --> 00:05:03,130 Ang Hello, World bahagi ay kahulugan bilang ang pamagat. 110 00:05:03,130 --> 00:05:06,410 At ang mundo, hello bahagi ay kahulugan bilang ang nilalaman 111 00:05:06,410 --> 00:05:09,090 o kung ano ang dapat na makikita sa aking mga web page. 112 00:05:09,090 --> 00:05:12,167 >> Mayroong higit sa 100 sa mga ito ang iba't ibang tag at maraming ng mahusay na mga mapagkukunan 113 00:05:12,167 --> 00:05:13,000 online upang mahanap ang mga ito. 114 00:05:13,000 --> 00:05:14,900 Kami ay pagpunta sa makipag-usap tungkol sa isang ilan sa mga ito sa video na ito, ang ilang mga 115 00:05:14,900 --> 00:05:16,440 sa mga tunay na mga pangunahing bagay-bagay. 116 00:05:16,440 --> 00:05:18,440 Ngunit hindi namin pagpunta talk tungkol sa lahat ng ito dahil ito 117 00:05:18,440 --> 00:05:20,250 ay magiging napakahirap na gawin ito. 118 00:05:20,250 --> 00:05:22,880 >> Isa pang bagay na maaari mong gawin, bagaman, ay bukas hanggang tool ng developer. 119 00:05:22,880 --> 00:05:26,069 At kung ang pagpapabalik sa iyo mula sa aming mga video sa HTTP, 120 00:05:26,069 --> 00:05:27,860 Ipinaliwanag ko kung paano buksan up tool ng developer. 121 00:05:27,860 --> 00:05:32,020 Sa Chrome ito ay karaniwang ang F12 key para buksan ang toolbar developer. 122 00:05:32,020 --> 00:05:35,909 Pagkatapos ay sa halip ng pagpili ng Network tab, maaari mong piliin ang tab na Mga Elemento ng. 123 00:05:35,909 --> 00:05:37,700 At kung nag-load ang isang web page, makikita mo ang tunay na 124 00:05:37,700 --> 00:05:40,280 makita ang mga HTML na lumilikha na web page. 125 00:05:40,280 --> 00:05:44,090 At upang maaari mong malaman ng maraming tungkol sa HTML sa pamamagitan ng pagtingin sa iyong mga paboritong website 126 00:05:44,090 --> 00:05:48,474 at makita kung paano sila ay bumuo ng iba't-ibang mga piraso ng mga ito na gusto mo. 127 00:05:48,474 --> 00:05:50,890 Kaya marahil may ito cool pattern o isang bagay tulad na. 128 00:05:50,890 --> 00:05:52,140 Paano nila gawin ito sa HTML? 129 00:05:52,140 --> 00:05:55,630 Well maaari mo lamang buksan ang iyong developer mga kasangkapan at mag-hover sa mga sangkap na 130 00:05:55,630 --> 00:05:57,700 at makita kung ano mismo ang gumagawa ng mga ito HTML. 131 00:05:57,700 --> 00:05:59,450 Kaya na ang isang tunay na mahusay na paraan upang malaman ang HTML, 132 00:05:59,450 --> 00:06:02,330 at ako Matindi ang pinapayo na gawin mo ang parehong mga ito upang malaman ang HTML 133 00:06:02,330 --> 00:06:04,930 at din upang malaman ang kaunti kaunti tungkol sa ilan sa mga opsyon 134 00:06:04,930 --> 00:06:07,050 magagamit mo sa mga tool ng developer, na kung saan 135 00:06:07,050 --> 00:06:10,200 ay tiyak na darating sa madaling bilang magsisimula ka sa paggawa ng mas intensive web 136 00:06:10,200 --> 00:06:11,090 programming. 137 00:06:11,090 --> 00:06:14,080 >> Kaya sabihin kumuha ng isang pagtingin sa isang pares ng mga karaniwang mga tag na HTML. 138 00:06:14,080 --> 00:06:17,210 At kami na tumalon at tingnan ang kung ano ang mga tag na ito ay magkakaroon din ng render 139 00:06:17,210 --> 00:06:20,490 tulad ng sa pamamagitan ng pagtingin sa ilang mga file sa aking IDE. 140 00:06:20,490 --> 00:06:26,330 Kaya narito ang tatlong tunay pangunahing mga tag para sa ng pagsasaayos ng mga visual na hitsura ng text. 141 00:06:26,330 --> 00:06:29,050 May B tags, I tag, at U tag. 142 00:06:29,050 --> 00:06:33,170 At ayon sa pagkakabanggit ano ang ginagawa nila ay render ang teksto sa pagitan ng mga ito na naka-bold, 143 00:06:33,170 --> 00:06:35,430 italics, at salungguhit. 144 00:06:35,430 --> 00:06:40,430 Kaya sabihin makita kung ano na ang magiging hitsura tulad ng sa isang aktwal na web page sa aking IDE. 145 00:06:40,430 --> 00:06:43,390 >> Kaya dito sa aking IDE mayroon akong isang file na tinatawag na biu dot HTML. 146 00:06:43,390 --> 00:06:46,770 Lamang pagiging biu dot HTML bold, italics, salungguhit. 147 00:06:46,770 --> 00:06:47,830 Kukunin ko buksan ito. 148 00:06:47,830 --> 00:06:51,810 >> At kami na makita na ako dito Mayroon text na ito ay naka-bold tag B. 149 00:06:51,810 --> 00:06:54,010 Ang tekstong ito ay kong tag italic. 150 00:06:54,010 --> 00:06:56,307 At ang text na ito ay nakasalungguhit U tag. 151 00:06:56,307 --> 00:06:57,640 Ano itong nangyayari sa hitsura? 152 00:06:57,640 --> 00:06:59,473 Well muli, mayroon ako ng lahat gawin ay pumunta sa paglipas dito 153 00:06:59,473 --> 00:07:04,690 sa aking browser, ang aking mga file browser, i-click ang Preview, at ito ay kung ano ang dumating up. 154 00:07:04,690 --> 00:07:07,520 >> Ang teksto sa pagitan ng B tags ay sa katunayan ng bold ngayon. 155 00:07:07,520 --> 00:07:10,720 Ang teksto sa pagitan ng ko tags ay sa katunayan italic ngayon. 156 00:07:10,720 --> 00:07:14,634 At ang teksto sa pagitan ng U tags ay sa katunayan ngayon salungguhit. 157 00:07:14,634 --> 00:07:15,550 Kaya na medyo magandang. 158 00:07:15,550 --> 00:07:18,450 Alam na namin ngayon kung paano gumawa ng text tumingin ng kaunti pa-iisip 159 00:07:18,450 --> 00:07:20,360 o gumuhit ng diin sa mga tiyak na mga bagay. 160 00:07:20,360 --> 00:07:25,530 Ang isa pang pares ng mga karaniwang mga tag dito ay tag talata, P, at header tag, 161 00:07:25,530 --> 00:07:27,980 na kung saan ko na nai-render dito bilang HX. 162 00:07:27,980 --> 00:07:32,520 >> Ang mga P tag, ang mga tag ng talata, masira ang iyong teksto ng hanggang sa mga talata. 163 00:07:32,520 --> 00:07:34,646 Ito ay hindi sapat upang lamang pindutin ang Enter at mag-iwan ang mga puwang, 164 00:07:34,646 --> 00:07:37,186 dahil ang isang computer ay lamang ang pagpunta upang gawin kung ano sabihin mo ito gawin 165 00:07:37,186 --> 00:07:39,450 at ito pinapansin puti puwang para sa pinaka-bahagi. 166 00:07:39,450 --> 00:07:41,636 Kaya maaari naming hindi lamang pindutin ang Enter at inaasahan ang aming mga computer 167 00:07:41,636 --> 00:07:43,760 upang bigyang-kahulugan na gusto naming upang simulan ang isang bagong talata. 168 00:07:43,760 --> 00:07:47,670 Mayroon kaming na masyadong malinaw na sinasabi na ito ay isa paragraph-- ito ay another-- 169 00:07:47,670 --> 00:07:50,740 sa pamamagitan ng nasasakupang bawat isa sa isang set ng mga P tag. 170 00:07:50,740 --> 00:07:54,560 >> At mayroon din namin ang mga pagpipiliang ito para sa H tag, mga header tag. 171 00:07:54,560 --> 00:07:57,000 Mayroon kaming anim na iba't ibang mga antas ng mga header, isa, dalawa, tatlo, 172 00:07:57,000 --> 00:08:01,110 apat, lima, at anim na, na kung saan ay progressively mas malaki at mas malaki 173 00:08:01,110 --> 00:08:01,710 header. 174 00:08:01,710 --> 00:08:04,360 At sila makakuha ng mas maliit at mas maliit at mas maliit at mas maliit. 175 00:08:04,360 --> 00:08:07,690 Kaya kami ay may isang top header antas, ang pangalawang level header, at iba pa, at iba pa. 176 00:08:07,690 --> 00:08:10,480 >> Tingnan natin ang isang pagtingin sa marahil ilang P tag at ang ilang mga header tag 177 00:08:10,480 --> 00:08:13,110 sa pagkilos sa isang web page. 178 00:08:13,110 --> 00:08:18,180 Kaya dito sa aking IDE Mayroon akong isang file na tinatawag na PH dot HTML, PH pagiging talata 179 00:08:18,180 --> 00:08:18,970 at header tag. 180 00:08:18,970 --> 00:08:20,709 Buksan na up. 181 00:08:20,709 --> 00:08:23,000 Mayroong maraming nagaganap dito dahil inilagay ko ang ilang lorem 182 00:08:23,000 --> 00:08:24,660 ipsum, ilan lang random text in dito. 183 00:08:24,660 --> 00:08:27,284 Kaya ko na mag-zoom out nang kaunti dahil mayroong kaya magkano ang pagpunta sa. 184 00:08:27,284 --> 00:08:31,980 Ngunit mapansin na mayroon akong sa pinakadulo itaas dito Mayroon akong isang H1, isang antas ng isa, 185 00:08:31,980 --> 00:08:32,802 header tag. 186 00:08:32,802 --> 00:08:36,010 Pagkatapos Mayroon akong isang talata, kung saan ay lamang ng grupo ng mga random text-- lorem ipsum-- 187 00:08:36,010 --> 00:08:38,720 default lang standard pagpuno sa text. 188 00:08:38,720 --> 00:08:41,970 Kaya ako ay may dalawang mga talata sa loob ng na antas ng isa header at pagkatapos ay down sa ibaba ko 189 00:08:41,970 --> 00:08:46,850 magkaroon ng isang antas ng dalawang header dito sa 24 na linya, isang pangalawang antas header, at isa pang dalawang 190 00:08:46,850 --> 00:08:47,840 talata. 191 00:08:47,840 --> 00:08:51,910 Well kung ano ang ibig hitsura kung ang mga ito sa aking preview? 192 00:08:51,910 --> 00:08:53,790 Tingnan natin. 193 00:08:53,790 --> 00:08:55,730 >> Kaya mapapansin na ang unang header antas dito 194 00:08:55,730 --> 00:08:58,420 ay talagang lubos isang bit mas malaki kaysa sa ikalawang header level. 195 00:08:58,420 --> 00:08:59,940 Kaya ginamit namin ang H1 tag. 196 00:08:59,940 --> 00:09:03,820 At mapansin na ang P tag-daan sa amin na masira ang mga bagay out sa mga talata. 197 00:09:03,820 --> 00:09:07,500 Kung nakuha namin ay alisan ng mga P tag at talagang lamang ilagay pumapasok o Ibinabalik 198 00:09:07,500 --> 00:09:10,110 sa pagitan ng kung ano ang aming inaasahan ay maging ang iba't-ibang mga talata, 199 00:09:10,110 --> 00:09:13,193 ang mga ito ay ang lahat ng slam lang na magkasama at ito ay hindi na ito magandang talata 200 00:09:13,193 --> 00:09:15,840 paghihiwalay sa espasyo sa itaas at sa ibaba. 201 00:09:15,840 --> 00:09:18,300 At kaya na kung ano ang talata tags at header tag 202 00:09:18,300 --> 00:09:22,440 ay karaniwang ginagamit upang gawin upang gumuhit pansin sa mga bahagi ng aming pahina ng web 203 00:09:22,440 --> 00:09:23,550 sa paraang iyon. 204 00:09:23,550 --> 00:09:27,560 >> Next up ang ilang mga tag na ginagamit namin upang bumuo ng mga listahan sa aming web page. 205 00:09:27,560 --> 00:09:30,820 Kaya kami unordered lists-- ULs-- na lamang 206 00:09:30,820 --> 00:09:34,090 bullet na listahan, iniutos list na numbered-- 207 00:09:34,090 --> 00:09:37,680 OLs-- at sa loob ng alinman sa isa sa mga kailangan naming magkaroon ng 208 00:09:37,680 --> 00:09:40,600 set ng kung paano upang ipahiwatig item sa listahan, li. 209 00:09:40,600 --> 00:09:44,370 At kaya kami ay may open ul tag at ilalagay namin ang mga bagay sa loob ng mga ito. 210 00:09:44,370 --> 00:09:46,920 At pagkatapos ay kapag tapos na kami sa na, maaari naming isara ang ul tag. 211 00:09:46,920 --> 00:09:49,850 >> At katulad maaari kaming magkaroon ng isang order o ng bilang na listahan 212 00:09:49,850 --> 00:09:51,560 at ilagay ang mga item sa listahan sa loob ng na. 213 00:09:51,560 --> 00:09:53,350 Kaya sabihin tumagal ng isang pagtingin sa isang pares ng mga listahan 214 00:09:53,350 --> 00:09:57,230 at kung ano ang gagawin nila render na rin sa CS50 IDE. 215 00:09:57,230 --> 00:10:00,640 Kaya ko dito sa aking IDE isang file ng mga listahan na tinatawag na tuldok HTML. 216 00:10:00,640 --> 00:10:03,100 Tignan natin. 217 00:10:03,100 --> 00:10:08,482 >> At pansinin dito Mayroon akong isang unordered ilista sa limang bagay sa loob nito. 218 00:10:08,482 --> 00:10:11,440 At pagkatapos ay mayroon akong isang order listahan, at Binago ko na ang tag nang kaunti, 219 00:10:11,440 --> 00:10:11,939 right? 220 00:10:11,939 --> 00:10:13,152 Sinabi ko na start katumbas ng anim. 221 00:10:13,152 --> 00:10:16,110 Ito ay lumiliko out na may isang iniutos listahan ko maaaring i-set ang panimulang punto kung saan man 222 00:10:16,110 --> 00:10:20,130 Want-- ko sa pamamagitan ng default ito ay one-- sa pamamagitan ng pagdaragdag lamang ito sa tinatawag na attribute 223 00:10:20,130 --> 00:10:21,190 sa aking ol tag. 224 00:10:21,190 --> 00:10:23,572 At kaya ang listahan na ito ay simulan ang pagbibilang sa anim. 225 00:10:23,572 --> 00:10:26,780 Kaya ang mga elemento ng bilang na listahan dapat na anim, pitong, walong, siyam, sampu, 226 00:10:26,780 --> 00:10:29,930 dahil may mga limang mga sangkap sa listahan, bilang laban sa isa, 227 00:10:29,930 --> 00:10:33,770 dalawa, tatlo, apat, lima, na ay ang kaso kung ako ay sinabi ol 228 00:10:33,770 --> 00:10:36,730 nang hindi tinutukoy ang simula attribute. 229 00:10:36,730 --> 00:10:41,594 >> Kaya makikita lamang i-preview namin ito sa gayon maaari mong makakuha ng isang kahulugan para sa kung ano ang nangyayari sa dito. 230 00:10:41,594 --> 00:10:42,260 At doon kami pumunta. 231 00:10:42,260 --> 00:10:44,610 May ang aking listahan. 232 00:10:44,610 --> 00:10:47,810 Ang unang limang mga sangkap ay unordered o bullet na listahan. 233 00:10:47,810 --> 00:10:51,010 At sa susunod na limang mga sangkap ay isang hiwalay na order list 234 00:10:51,010 --> 00:10:52,980 simula sa anim. 235 00:10:52,980 --> 00:10:56,247 Kaya na kung paano namin magagawa bumuo ng mga listahan ng paggamit ng HTML. 236 00:10:56,247 --> 00:10:58,080 Isa pang bagay maaari ka gusto mong gawin sa HTML 237 00:10:58,080 --> 00:11:01,520 ay bumuo ng isang talaan ng mga impormasyon ng mga hanay at haligi 238 00:11:01,520 --> 00:11:04,560 upang ipakita ang impormasyon sa isang lalo na inayos paraan. 239 00:11:04,560 --> 00:11:09,110 Upang gawin ito na may HTML na maaari naming magkaroon ng isang table definition simula bukas bracket 240 00:11:09,110 --> 00:11:10,160 table. 241 00:11:10,160 --> 00:11:14,680 At pagkatapos ay sa loob ng talahanayan na tayo ay maaaring magkaroon ng isang hanay ng mga hilera, TR tags 242 00:11:14,680 --> 00:11:15,980 upang ipahiwatig ang bawat hilera. 243 00:11:15,980 --> 00:11:22,510 At pagkatapos td tags pumunta sa loob ng TR tags upang tukuyin ang isang hanay sa loob ng isang hilera. 244 00:11:22,510 --> 00:11:24,340 >> Bakit tinatawag na ito ay td at hindi TC? 245 00:11:24,340 --> 00:11:25,940 Well, td ibig sabihin para sa mga talahanayan ng data. 246 00:11:25,940 --> 00:11:27,900 Karaniwan ikaw ay paglagay ang iyong impormasyon doon. 247 00:11:27,900 --> 00:11:29,440 Kaya na ang dahilan kung bakit ito ay td at hindi TC. 248 00:11:29,440 --> 00:11:31,140 Ito ay isang maliit na bit nakalilito. 249 00:11:31,140 --> 00:11:33,720 >> Kaya ikaw ay may mga tag ng talahanayan at sa loob ng iyong mga tag ng talahanayan 250 00:11:33,720 --> 00:11:35,600 mayroon kang isang bilang ng mga hilera, TRs. 251 00:11:35,600 --> 00:11:40,030 At sa loob ng bawat hilera mayroon kang TDS para sa bilang ng mga haligi 252 00:11:40,030 --> 00:11:42,880 na nais mong magkaroon ng sa partikular na hanay. 253 00:11:42,880 --> 00:11:47,730 Tingnan natin ang isang pagtingin sa isang napaka simpleng mesa sa ibabaw sa CS50 IDE. 254 00:11:47,730 --> 00:11:49,730 >> Kaya ko dito ang isang file tinatawag talahanayan dot HTML. 255 00:11:49,730 --> 00:11:53,390 Mayroon ng isang pagtingin sa Ipaalam kung ano na kamukha. 256 00:11:53,390 --> 00:11:56,225 Mayroong maraming nagaganap dito ngunit kung napansin mo ako bukas sa isang table. 257 00:11:56,225 --> 00:11:57,850 Ako simula sa kahulugan na may table. 258 00:11:57,850 --> 00:12:02,100 At pagkatapos ay sa aking unang row ako sa malas Mayroon apat na mga haligi, isa, dalawa, tatlo, 259 00:12:02,100 --> 00:12:02,660 apat. 260 00:12:02,660 --> 00:12:04,290 At pagkatapos ay ako tapos sa hilerang iyon. 261 00:12:04,290 --> 00:12:07,750 >> Pagkatapos ko simulan ang isa pang hilera at gawin dalawa, apat, anim, walo. 262 00:12:07,750 --> 00:12:08,850 Tapos na hilera. 263 00:12:08,850 --> 00:12:11,410 Gawin ang isa pang hilera, tatlo, anim, siyam, 12. 264 00:12:11,410 --> 00:12:14,830 At pagkatapos ay isang huling hilera, apat, walo, 12, at kahit na ito ay 265 00:12:14,830 --> 00:12:16,560 isang maliit na cut-off dito, 16. 266 00:12:16,560 --> 00:12:17,710 >> Natapos ko na hilera. 267 00:12:17,710 --> 00:12:18,970 Natapos ko ang table. 268 00:12:18,970 --> 00:12:21,430 At pagkatapos ay ako na ginawa sa aking HTML. 269 00:12:21,430 --> 00:12:22,590 Ano ang nilalaman ng hitsura? 270 00:12:22,590 --> 00:12:26,014 271 00:12:26,014 --> 00:12:27,430 Well, ito ay hindi tunay marami na makita. 272 00:12:27,430 --> 00:12:31,690 Malinaw ko na inayos ang aking impormasyon sa isang medyo mas maayos na paraan. 273 00:12:31,690 --> 00:12:33,755 Ngunit ito ay hindi sobrang pretty dito. 274 00:12:33,755 --> 00:12:36,130 At kami ay pagpunta sa pakikitungo sa na kapag ang usapan namin tungkol CSS. 275 00:12:36,130 --> 00:12:38,930 Susubukan naming muling bisitahin ito ideya ng ano ang ginagawa namin upang makagawa ng isang table-- 276 00:12:38,930 --> 00:12:41,260 siguro format na ito ng isang maliit na bit mas mahusay? 277 00:12:41,260 --> 00:12:45,070 Ngunit ko pa rin magkaroon ng apat na hanay, bawat isa ay may apat na haligi, 278 00:12:45,070 --> 00:12:48,890 at talagang kung ano ang halaga na ay isang napaka-simple apatan pagpaparami 279 00:12:48,890 --> 00:12:49,870 table. 280 00:12:49,870 --> 00:12:51,690 >> Lamang ng ilang higit pang mga tag namin makipag-usap tungkol sa. 281 00:12:51,690 --> 00:12:54,617 Makipag-usap tungkol sa mga Ipaalam konsepto ng isang HTML form. 282 00:12:54,617 --> 00:12:57,450 Kaya maaaring may nakita mo na ito sa konteksto ng pag-log sa isang web page. 283 00:12:57,450 --> 00:12:59,100 Karaniwan type ka sa iyong user name. 284 00:12:59,100 --> 00:13:01,510 Nag-type ka sa iyong password, at ikaw ay handa na upang patakbuhin. 285 00:13:01,510 --> 00:13:04,170 Iyon ay magiging simula ng isang form. 286 00:13:04,170 --> 00:13:05,420 >> Nilalaktawan paglipas div isang segundo. 287 00:13:05,420 --> 00:13:07,987 Kami rin ay may input na uri ng magkasya sa loob ng mga form. 288 00:13:07,987 --> 00:13:10,320 Ang mga ito ay ang mga elemento na tunay na ikaw ay pag-type sa, 289 00:13:10,320 --> 00:13:12,580 o ang mga pindutan ng radyo ikaw gris, o ang check 290 00:13:12,580 --> 00:13:14,310 kahon na kayo ay gris off. 291 00:13:14,310 --> 00:13:15,770 Kaya ang mga ito pumunta sa loob ng mga form. 292 00:13:15,770 --> 00:13:18,500 At bumubuo sila talaga ang bawat hilera ng form 293 00:13:18,500 --> 00:13:19,887 kung ang iyong mga form ay naka-format na rin. 294 00:13:19,887 --> 00:13:22,220 Pagkatapos ay may ito konsepto ng isang div, na kung saan ay hindi tunay 295 00:13:22,220 --> 00:13:25,060 magkasya sa anumang partikular na kategorya ng mga tag tulad ng mga na hindi ko na 296 00:13:25,060 --> 00:13:26,170 ay ginagawa na dati. 297 00:13:26,170 --> 00:13:29,790 Ito lamang ang uri ng demarkasyon sa simula ng ilang di-makatwirang division-- 298 00:13:29,790 --> 00:13:31,670 div-- ng pahina. 299 00:13:31,670 --> 00:13:33,210 Walang visual break. 300 00:13:33,210 --> 00:13:34,800 Walang linya. 301 00:13:34,800 --> 00:13:37,180 Hindi ito naka-set off bilang hiwalay na awtomatikong tipak. 302 00:13:37,180 --> 00:13:39,430 Gusto mo na estilo ito na paraan upang gawin iyon. 303 00:13:39,430 --> 00:13:42,110 >> Ito lamang ang uri ng sabi gusto ko ng piraso ng puwang sa aking web page, 304 00:13:42,110 --> 00:13:45,190 at ako lamang ang pagpunta sa tawag ito ang pagkakahati ng aking page. 305 00:13:45,190 --> 00:13:47,619 Maaari naming ilagay ang mga bagay-bagay sa loob ng divs, at sa katunayan, 306 00:13:47,619 --> 00:13:49,410 kapag tumuloy kami ng mahigit sa IDE sa isang segundo, bibigyan namin ng 307 00:13:49,410 --> 00:13:53,760 makita na ako ng paglalagay ng aking form sa loob ng isang div. 308 00:13:53,760 --> 00:13:57,050 >> Kaya ko dito sa aking IDE isang file na tinatawag na div anyo dot HTML. 309 00:13:57,050 --> 00:13:59,260 Buksan up natin ito. 310 00:13:59,260 --> 00:14:01,460 Pansinin na tulad ng sinabi ko, div ay uri ng di-makatwirang. 311 00:14:01,460 --> 00:14:01,640 Right? 312 00:14:01,640 --> 00:14:02,973 Hindi ito tunay na ibig sabihin ang anumang bagay. 313 00:14:02,973 --> 00:14:05,140 Kaya Mayroon akong isang arbitrary first division ng aking page. 314 00:14:05,140 --> 00:14:07,848 At pagkatapos ay sa halip ng isa pang div sa susunod, na nagsisimula sa walong linya, 315 00:14:07,848 --> 00:14:08,730 Mayroon akong na ito form. 316 00:14:08,730 --> 00:14:13,594 At sa loob ng form mayroon akong isang bilang ng mga input, mga patlang ng form. 317 00:14:13,594 --> 00:14:16,510 Kaya ako ay may isang patlang na ang pangalan ay A-- na kung saan ay hindi tunay na ibig sabihin ng kahit na ano 318 00:14:16,510 --> 00:14:19,350 karapatan now-- na tila tumatagal ng teksto, isa pa na 319 00:14:19,350 --> 00:14:22,630 tumatagal ng isang password, ang isa pang iyon ang isang Radio button, ang isa pang iyon ang isang check box, 320 00:14:22,630 --> 00:14:24,797 at isa pa na ang isang pindutan ng Isumite. 321 00:14:24,797 --> 00:14:26,630 Well, kung ano ang ibig lahat ng tunay na hitsura? 322 00:14:26,630 --> 00:14:27,629 Well, sabihin kumuha ng isang hitsura. 323 00:14:27,629 --> 00:14:31,010 Susubukan naming buksan ito sa aming window preview. 324 00:14:31,010 --> 00:14:33,557 Pansinin na ang arbitrary unang division-- mayroong 325 00:14:33,557 --> 00:14:34,640 walang visual paghihiwalay dito. 326 00:14:34,640 --> 00:14:37,150 Ito ay hindi tunay na gumawa ng kahit ano, tama? 327 00:14:37,150 --> 00:14:38,220 >> At pagkatapos ay ako ang aking form. 328 00:14:38,220 --> 00:14:39,890 At hindi ko gawin ang anumang espesyal na format. 329 00:14:39,890 --> 00:14:42,680 Kaya ang form ay isa lamang malaking hanay ng impormasyon. 330 00:14:42,680 --> 00:14:46,424 Kung naiiba ako ay na-format ang aking form, Maaari ba akong magkaroon ito line sa pamamagitan ng linya sa pamamagitan ng linya. 331 00:14:46,424 --> 00:14:47,590 Ngunit hindi ko gawin ang anumang estilo. 332 00:14:47,590 --> 00:14:49,256 Muli, hindi namin kausap tungkol sa CSS dito. 333 00:14:49,256 --> 00:14:51,030 Kami ay pakikipag-usap lamang tungkol sa HTML. 334 00:14:51,030 --> 00:14:53,980 >> Well sa aking form na teksto ang maaari kong type-- tandaan na ang mga anyo ng uri ng teksto 335 00:14:53,980 --> 00:14:55,480 kaya maaari ko bang ilagay ang aking pangalan. 336 00:14:55,480 --> 00:14:57,330 At sa aking password ko maaaring i-type ang aking password. 337 00:14:57,330 --> 00:14:59,740 At dahil ang patlang na ay uri ng password, 338 00:14:59,740 --> 00:15:01,470 Hindi mo alam kung ano ang aking password. 339 00:15:01,470 --> 00:15:02,800 Lahat ng ito ay mga tuldok. 340 00:15:02,800 --> 00:15:09,140 >> Maaari ko ring piliin na pagsabihan ng isang radio button o pagsabihan ng isang check box. 341 00:15:09,140 --> 00:15:10,420 O maaari ko isusumite ang aking form. 342 00:15:10,420 --> 00:15:11,810 At hindi ko gawin ang anumang bagay, kaya kapag isusumite ang aking form, 343 00:15:11,810 --> 00:15:13,090 mga pahina lamang nagre-refresh. 344 00:15:13,090 --> 00:15:16,970 Ngunit marahil ko maaaring i-configure ang aking Isumite ang pindutan upang gawin ang iba pa. 345 00:15:16,970 --> 00:15:20,410 At kami na makita kung ano ang maaari naming gawin sa na sa isang susunod na video sa PHP. 346 00:15:20,410 --> 00:15:22,520 Ngunit ito ay gagawa ng isang napaka simpleng form na kami 347 00:15:22,520 --> 00:15:27,360 ay maaaring gamitin upang magkaroon ng ugnayan ang mga user at isumite ang impormasyon sa aming website. 348 00:15:27,360 --> 00:15:29,620 >> Isang huling komento bago namin lumipat sa sa ilang iba pang mga tag 349 00:15:29,620 --> 00:15:32,040 Isasama na kumuha ng isang pagtingin sa ito input tag isa pang beses. 350 00:15:32,040 --> 00:15:35,760 Notice na ako naka-highlight mga dulo ng tag ng pula. 351 00:15:35,760 --> 00:15:39,390 Bawat iba pang mga tag na nakita namin sa ngayon ay ay nagkaroon ng isang simula at isang dulo, ang isang pambungad 352 00:15:39,390 --> 00:15:41,030 tag at isang closing tag. 353 00:15:41,030 --> 00:15:42,520 >> Ngunit isang input tag ay hindi. 354 00:15:42,520 --> 00:15:46,860 Walang teksto na napupunta sa pagitan ng input tag. 355 00:15:46,860 --> 00:15:49,160 Ang lahat ng impormasyon kami ay nagbabalak na magbigay-kahulugan 356 00:15:49,160 --> 00:15:52,640 ay iniugnay bilang bahagi ng katangian ng input na. 357 00:15:52,640 --> 00:15:54,690 Pansinin na namin name input ay katumbas ng x. 358 00:15:54,690 --> 00:15:55,580 Uri katumbas y. 359 00:15:55,580 --> 00:15:57,660 Iyan ay talagang ang lahat ng mga impormasyon na kailangan namin. 360 00:15:57,660 --> 00:15:59,470 >> Ito ay tinatawag na isang self closing tag. 361 00:15:59,470 --> 00:16:02,470 Ito ay hindi nangangailangan ng isang pambungad at isang malapit dahil ang lahat ng mga impormasyon 362 00:16:02,470 --> 00:16:04,974 ay nilalaman sa loob ng tag at mga katangian nito. 363 00:16:04,974 --> 00:16:06,390 Kaya kung minsan makikita mo na ito, masyadong. 364 00:16:06,390 --> 00:16:10,400 Kaya lamang magkaroon ng kamalayan na kung ikaw ay may isang na tag na ay ganap na self-contained, 365 00:16:10,400 --> 00:16:14,170 ito ay bubukas at magsasara ang sarili sa ang open angle bracket sa kaliwang 366 00:16:14,170 --> 00:16:17,000 at ang mga anggulo slash bracket sa kanan. 367 00:16:17,000 --> 00:16:20,580 Susubukan naming makita ang isa pang isa sa mga ngayon gamit ang mga tag ng imahe pati na rin. 368 00:16:20,580 --> 00:16:23,300 >> Bago namin makipag-usap tungkol sa mga imahe, kami kailangang makipag-usap tungkol sa mga hyperlink. 369 00:16:23,300 --> 00:16:26,080 Kung gusto namin ang aming mga web page upang maging interactive at ilipat sa amin sa paligid, 370 00:16:26,080 --> 00:16:28,121 magiging maganda ma mag-click sa isa sa mga 371 00:16:28,121 --> 00:16:30,190 kung ano ang karaniwang naging isang asul na link. 372 00:16:30,190 --> 00:16:34,440 Ito ay talagang kung paano namin bumuo ng isang hyperlink sa aming web page. 373 00:16:34,440 --> 00:16:36,540 At kawili-wili sapat may isa pang HTML tag 374 00:16:36,540 --> 00:16:39,000 tinatawag na link, na kung saan ay hindi isang hyperlink. 375 00:16:39,000 --> 00:16:44,130 A dito ay kumakatawan sa mga anchor, at na kung paano namin ipahiwatig ang isang hyperlink. 376 00:16:44,130 --> 00:16:49,150 >> Ay katumbas ng isang href x paraan pumunta sa X. web page At lahat ng bagay 377 00:16:49,150 --> 00:16:51,580 sa pagitan ng mga bukas na A tag at ang malapit na A tag 378 00:16:51,580 --> 00:16:56,010 ay kung ano ang nangyayari na na nakasalungguhit asul na text na ganito ang hitsura ng isang link 379 00:16:56,010 --> 00:16:57,590 na hindi namin alam. 380 00:16:57,590 --> 00:17:01,660 Nasa ibaba na kami ay may isang imahe na tag, na kung saan Magsasara na ang isang self tag para sa pagpapakita ng 381 00:17:01,660 --> 00:17:05,599 isang imahe na matatagpuan sa X. At maaaring ikaw ay maaaring baguhin 382 00:17:05,599 --> 00:17:08,280 na imahe sa pamamagitan ng pagtukoy lapad at taas 383 00:17:08,280 --> 00:17:11,640 at iba pang mga katangian sa na tuldok tuldok tuldok doon. 384 00:17:11,640 --> 00:17:14,260 >> Sa ibaba very dito kami ay may isang napaka-interesante 385 00:17:14,260 --> 00:17:16,170 naghahanap tag na hindi magkaroon ng isang closing tag. 386 00:17:16,170 --> 00:17:19,410 Ito ay exclamation point doctype HTML. 387 00:17:19,410 --> 00:17:23,300 Kaya HTML ay dahil sa paligid ng unang bahagi ng 1990 para sa pagbuo ng mga web page, 388 00:17:23,300 --> 00:17:25,859 at ito ay nawala undergone ng ilang mga pagbabago mula noon. 389 00:17:25,859 --> 00:17:28,550 Karamihan sa kamakailan lamang sa 2014 ito ay sumailalim sa isang rebisyon 390 00:17:28,550 --> 00:17:33,440 tinatawag na HTML5 na ngayon ang kasalukuyang uri ng talaga HTML standard. 391 00:17:33,440 --> 00:17:36,730 >> Upang ipahiwatig na ang aming web mga pahina ay nakasulat gamit HTML5, 392 00:17:36,730 --> 00:17:38,160 ito ay kung paano namin simulan off. 393 00:17:38,160 --> 00:17:40,380 Ito ay maaaring tinanggal na ngunit kung ano na talaga 394 00:17:40,380 --> 00:17:45,930 ibig sabihin nito ay hindi mo maaaring gamitin ang alinman sa mga tags na HTML5 tag, mga bagong tag. 395 00:17:45,930 --> 00:17:48,591 Kaya laging simulan namin off kung kami ay gumagamit ng HTML5. 396 00:17:48,591 --> 00:17:51,340 At ang lahat ng mga tag na usapan natin ang tungkol dati ay hindi HTML5 tag. 397 00:17:51,340 --> 00:17:55,470 Ngunit ito ay nagpapahiwatig na HTML5 tags ay kasalukuyan. 398 00:17:55,470 --> 00:17:58,400 At kaya kami ay may exclamation doctype HTML, na kung saan 399 00:17:58,400 --> 00:18:01,280 ay sa pinakadulo simula ng aming HTML file, at pagkatapos ay pagkatapos ng puntong iyon 400 00:18:01,280 --> 00:18:04,930 talaga kami bukas sa aming HTML tag at magpatuloy mula doon. 401 00:18:04,930 --> 00:18:10,050 >> Ang huling isa ay isang tag ng komento, na kamukha bahagyang naiiba, masyadong. 402 00:18:10,050 --> 00:18:12,810 Ito ay nagsisimula sa anggulo bracket exclamation dash 403 00:18:12,810 --> 00:18:15,220 dash ngunit walang closing bracket. 404 00:18:15,220 --> 00:18:20,150 Sa pagitan ng mga dalawang mga elemento doon ay kung saan mo isulat ang iyong mga komento. 405 00:18:20,150 --> 00:18:28,420 At tumagal ng isang pagtingin sa mga imahe ipaalam at ang mga komento at mga link sa CS50 IDE. 406 00:18:28,420 --> 00:18:32,850 >> Kaya ako dito ng isang file na tinatawag na link image dot HTML kung saan ako pupunta upang buksan up. 407 00:18:32,850 --> 00:18:36,420 At mapansin Mayroon akong isang pares ng mga comments dito sa aking mga komento HTML. 408 00:18:36,420 --> 00:18:38,990 Kaya lang tulad sa C at iba pang mga programming languages, 409 00:18:38,990 --> 00:18:43,169 HTML sa pamamagitan lamang ng pagiging isang markup language hindi na magkakaroon ng kakayahan upang magkaroon ng mga komento. 410 00:18:43,169 --> 00:18:45,710 At kaya tila ako pagpunta sa maglagay ng isang larawan ng Rick Astley 411 00:18:45,710 --> 00:18:49,060 saanman sa pagitan ng mga ito div tag, ito arbitrary division. 412 00:18:49,060 --> 00:18:51,497 Tila file na na matatagpuan sa Rick dot JPEG, na 413 00:18:51,497 --> 00:18:53,580 kung ulo namin pabalik sa paglipas ng sa aking file tree para sa isang segundo, 414 00:18:53,580 --> 00:18:55,490 ay isang file na umiiral sa kasalukuyang directory. 415 00:18:55,490 --> 00:18:56,031 Kaya na ang OK. 416 00:18:56,031 --> 00:18:57,710 Maaari ko bang isangguni ito. 417 00:18:57,710 --> 00:18:59,680 >> Pagkatapos ay maaari akong magkaroon ng panloob na mga link. 418 00:18:59,680 --> 00:19:05,080 Kaya mapapansin sa linya 11 dito aking href ay hello dot HTML. 419 00:19:05,080 --> 00:19:09,050 Kaya na lamang tumutukoy sa kumusta dot HTML na umiiral sa kasalukuyang direktoryo. 420 00:19:09,050 --> 00:19:12,980 At ako ay maaari ding magkaroon ng mga panlabas mga link sa pamamagitan lamang ng pagtukoy HTTPS 421 00:19:12,980 --> 00:19:16,180 upang ipahiwatig na hindi ko pakikipag-usap tungkol sa isang file sa aking kasalukuyang direktoryo. 422 00:19:16,180 --> 00:19:19,730 Pakikipag-usap ako tungkol sa isang file na umiiral isang lugar sa internet, kung saan mayroon akong 423 00:19:19,730 --> 00:19:23,370 upang humiling ng paggamit ng HTTP protocol. 424 00:19:23,370 --> 00:19:25,990 >> Kaya sabihin kumuha ng isang pagtingin sa kung ano Maaaring tumingin ang pahinang ito tulad ng 425 00:19:25,990 --> 00:19:29,500 at maghanda para sa isang larawan ng Rick Astley na magpapakita sa iyong screen. 426 00:19:29,500 --> 00:19:31,490 Kaya kailangan ko i-preview ito. 427 00:19:31,490 --> 00:19:33,800 May Rick Astley sa pinakatuktok sa arbitrary 428 00:19:33,800 --> 00:19:35,008 division ko bang ilagay ito sa itaas. 429 00:19:35,008 --> 00:19:36,960 At pagkatapos ay down sa ibaba ko ang aking mga link, di ba? 430 00:19:36,960 --> 00:19:39,330 >> Mayroon akong isang link sa hello dot HTML. 431 00:19:39,330 --> 00:19:42,860 At kung i-click ko na, nakukuha ko inilipat sa pahinang ito 432 00:19:42,860 --> 00:19:47,050 na kami masyadong pamilyar sa mula sa ang simula ng aming programa. 433 00:19:47,050 --> 00:19:50,880 Kung pop kong muli ang pahinang open na, kung ako ay pop link image buksan ang isa pang beses, 434 00:19:50,880 --> 00:19:54,420 Maaari ko ring pumunta sa labas sa website CS50. 435 00:19:54,420 --> 00:19:56,740 At may see-- namin idedetalye ko mag-zoom out nang kaunti here-- 436 00:19:56,740 --> 00:20:00,260 kami makita website uri ng CS50 naka-embed sa gitna ng aming mga pahina. 437 00:20:00,260 --> 00:20:04,670 Kaya ako ay maaaring gumawa ng isang panloob na link pati na rin ang isang panlabas na link. 438 00:20:04,670 --> 00:20:07,200 >> Ang huling rule na may HTML na kami ay pagpunta sa makipag-usap tungkol dito 439 00:20:07,200 --> 00:20:09,510 ay na ang iyong HTML ay dapat na maayos na binuo. 440 00:20:09,510 --> 00:20:13,020 Sa C usapan natin ng maraming tungkol sa ang iba't-ibang mga syntax ng mga bagay. 441 00:20:13,020 --> 00:20:17,650 Sa HTML syntax talagang umiikot na mga tag. 442 00:20:17,650 --> 00:20:19,660 Tuwing tag binuksan mo kailangang maging sarado. 443 00:20:19,660 --> 00:20:22,630 At sa katunayan, ang bawat tag na buksan mo dapat na sarado sa reverse order. 444 00:20:22,630 --> 00:20:25,790 >> Kaya kung nagbukas ka ng isang naka-bold tag, isang italic tag, at pagkatapos ay isang salungguhit tag 445 00:20:25,790 --> 00:20:28,120 na gawin ang lahat ng tatlong sa isang partikular na hanay ng teksto, 446 00:20:28,120 --> 00:20:30,070 dapat mong isara ang mga ito sa reverse order. 447 00:20:30,070 --> 00:20:32,270 Kaya't kung ikaw binuksan bold, italic, salungguhit, mo 448 00:20:32,270 --> 00:20:35,240 nais upang isara salungguhit, italic, bold. 449 00:20:35,240 --> 00:20:39,990 Ito ay uri ng encapsulation ay kung ano ang mapigil ang HTML maganda at organisadong. 450 00:20:39,990 --> 00:20:44,370 >> Hindi tulad ng C, bagaman, syntax error ay hindi talagang lumpo iyong HTML posibleng. 451 00:20:44,370 --> 00:20:48,730 Maaaring hindi na rin Ang iyong HTML binuo ngunit nais pa rin gumagana. 452 00:20:48,730 --> 00:20:50,589 At kaya ang mga error Maaaring ayusin ng slide sa pamamagitan ng. 453 00:20:50,589 --> 00:20:52,130 Ito ay nasa sa iyo na talagang maging mapagbantay. 454 00:20:52,130 --> 00:20:54,760 Minsan sila mabibigo ngunit paminsan-minsan maaari kang makakuha ng malayo sa mga ito. 455 00:20:54,760 --> 00:20:56,509 >> Maaari itong maging isang tunay na mahirap na gawain, bagaman, 456 00:20:56,509 --> 00:21:00,660 upang subaybayan kapag binuksan mo isang tag, kapag isinara mo ito, 457 00:21:00,660 --> 00:21:04,110 lalo na bilang iyong HTML file makakuha ng mas malaki at mas malaki. 458 00:21:04,110 --> 00:21:05,490 Makikita mo gusto ng ilang tulong. 459 00:21:05,490 --> 00:21:07,560 At may mga online tools validator na kayo 460 00:21:07,560 --> 00:21:11,474 ay maaaring gamitin upang magkaroon ng isang pagtingin sa iyong web pahina at makita kung ito ay mahusay na nabuo HTML. 461 00:21:11,474 --> 00:21:13,390 At dapat mo talaga tingnan ang mga 462 00:21:13,390 --> 00:21:16,620 at simulang gamitin ang mga ito bilang ka simulan ang paggawa ng ilang trabaho sa HTML, 463 00:21:16,620 --> 00:21:20,800 pagsulat ng HTML, kaya lang makakuha ka ang ilang mga magandang gawi tungkol aayos 464 00:21:20,800 --> 00:21:24,377 iyong HTML sa isang mabuting paraan at magandang style at siguraduhin 465 00:21:24,377 --> 00:21:27,210 na hindi ka gumagawa ng anumang bagay na maaaring lumikha ng isang syntax error na 466 00:21:27,210 --> 00:21:30,270 ay magdudulot ng isang piraso ng isang problema down ang kalye. 467 00:21:30,270 --> 00:21:31,190 >> Ako Doug Lloyd. 468 00:21:31,190 --> 00:21:33,450 Ito ay CS50. 469 00:21:33,450 --> 00:21:34,859