DAVEN Farnham: Ngayong araw, pupuntahan ko makipag-usap nang kaunti tungkol sa HTML, Hypertext Markup Language. Ang makikita mo ang HTML sa lahat ng dako mga araw na ito. Sa katunayan, kung pinapanood mo ito video sa isang browser, ikaw ay nakakakita ng HTML sa ngayon. HTML ay hindi isang programming language, sa halip, ito ay isang markup language na ginamit ng web browser na i-render ng pahina sa internet. 

Kaya maaari mong tanungin, kung paano eksaktong ay sumusulat isang web page sa HTML iba't ibang mula sa pagsusulat ng isang programa sa isang programming wika tulad ng C? Well, C ay isang wika na may napaka-mahigpit syntactical panuntunan na kailangang maging inipon bago ito maaaring tumakbo. Kung kailanman na iyong nakalimutan na magsama ng tuldok-kuwit sa dulo ng isang pahayag sa iyong C code, alam mo kung ano ang ako ng pakikipag-usap tungkol sa patungkol sa mahigpit na syntax. 

Web browser bagaman, ay isang bit higit pa pagpapatawad pagdating sa HTML. Kahit na ang iyong HTML ay hindi syntactically tama, ang iyong pahina ay maaari pa ring maging ipinapakita sa pamamagitan ng isang browser, ngunit maaari itong hindi mukhang tulad ng nilayon mo. Kaya ito ay palaging pinakamahusay na upang sundin ang mga panuntunan. Ang pinakamahusay na paraan upang makakuha ng intuwisyon tungkol sa kung paano bagay trabaho ay upang pumunta sa pamamagitan ng isang halimbawa. 

Kaya kung ano ang mayroon kami dito ay isang pangunahing magplano para sa isang web page. Maaaring napansin ng maraming mga bagay sa pagitan ng angled bracket. Well, ang mga lamang ang mga tag. Alam talaga Tags mga web browser na, hey, isang bagay Parating na ang iyong paraan. Tandaan bagaman, sa tuwing magbubukas ka ng isang tag, kailangan mong isara ito sa sandaling ikaw ay tapos na gumagamit nito. 

Kaya halimbawa, buksan ko ang isang seksyon ng code na may open bracket katawan, malapit bracket. Pagkatapos ay idagdag ako ng ilang teksto, sa kasong ito, ang aking pagkatapos ay unang web page kapag pinuntahan ko isara ang seksyong ito, gagamitin ko ang halos isang magkamukha tag maliban sa oras na ito na may isang pasulong iwa bago katawan. Sa pangkalahatan, ito ay ang format na ikaw ay pagpunta sa gamitin sa tuwing ikaw ay pagbubukas at closing tag. Sama-sama, isang open tag at isang end tag sumulat ng kung ano ang tinatawag na isang elemento. 

Kung tumingin ka sa unang linya, makakakuha ka makakita ng isang exclamation point na sinusundan ng DOCTYPE html. Ito ay talagang lamang na nagsasabi sa iyong browser na ang file ay isang web page nakasulat sa HTML. Ang HTML na tag mahalagang sinasabi, dito ay ilang mga HTML. Pagkatapos kami ay may isang head tag sa isang tag na pamagat sa loob nito. Ang ulo tag na maaari mong isipin bilang na binubuo ng HTML code na nauuna para sa sa karamihan ng iyong mga pahina ng web aktwal na nilalaman. 

Sa pangkalahatan, ilalagay mo ang pamagat ng iyong dito web page, kahit na mayroong ilang mga iba pang mga tag na maaaring lumitaw ang dito pati na rin. Susunod ay katawan ng iyong pahina ng web, ang aktwal na karne at mga buto ng iyong website. Sa aming halimbawa, nai-lamang inilalagay namin ang isang simpleng pangungusap, Aking Unang Webpage, kung saan, kung nagpapatakbo namin ang aming site, ang magiging hitsura isang maliit na isang bagay na katulad nito. Ang aming mga web page ay hindi masyadong masama ang pakiramdam, ngunit huwag mag-alala. Susubukan naming pustura ito up sa lalong madaling panahon. 

Kaya ang HTML sa itaas, bibigyan ka namin ng isang napaka basic template para sa isang web page, walang magarbong, lamang ang hubad buto. Ngunit kung Lumilikha ako ng isang web page, paano kung gusto kong magdagdag ng isang larawan ng, sabihin nating, aking sarili? Well, maaari kong gawin iyon. Mayroong ilang mga paraan upang magdagdag ng mga imahe sa iyong site. Kung ang mga imahe ay sa parehong folder bilang ang iyong mga file na HTML, maaari mong iugnay sa larawan sa pamamagitan ng path na tulad nito. 

Buksan up mo na may isang tag na imahe ay sumunod sa pamamagitan ng sa Alt attribute sa pinagmulan ng larawan. Ang halaga ng katangian ng Alt lamang ang ilang mga alternatibong teksto sa kaso ng isang user hindi maaari makita ang mga imahe. Bilang kahalili, maaari mo ring mag-link sa mga larawan sa pamamagitan ng isang buong URL, tulad nito. Ngayon, ang mga website na hindi talaga umiiral, ngunit kung mayroong isang larawan ng sa akin sa address na iyon, maaari ko bang gamitin ang ang source URL upang isama imahe nito sa aking website. Alinmang paraan, napupunta sa iyo ng isang magkano prettier website, isang bagay na katulad nito. 

Well, na medyo cool, ngunit uri ko ng gusto ng ilang teksto dito pati na rin. Kaya hayaan magdagdag ng lamang ng isang bagay sobrang simple sa itaas ng imahe, tulad ng sa header. Ang lahat ng mga nagawa ko sa ngayon ay gamitin ang header tag, H1, at isang line break tag, br. Ang header tag Ginagawa ang font ng kaunti bit na mas malaki at mas kitang-kita. Ang line break tag, sa kabilang banda, ay uri ng mga cool. Hindi tulad ng karamihan ng iba pang mga tag, hindi mo na kailangang may bakante at pagsasara ng break na tag, lamang ang isa na ipinapakita sa itaas. Ito ay dahil na bakasyon ay walang nilalaman at samakatuwid, ang isang walang laman na element. 

Walang-laman na mga elemento tulad nito, maaari mong buksan at malapit nang sabay-sabay sa pamamagitan lamang ng kabilang ang isang pasulong na slash sa dulo ng paunang deklarasyon. Kaya ngayon ang hitsura ng kaunti ang aking website isang bagay na katulad nito. Mas mahusay, ngunit ito uri ng nararamdaman tulad ng isang patay na dulo. Mayroong wala saan man pumunta sa isang tabi mula sa pangunahing pahina. Well, ni-ayos na sa pamamagitan ng ipaalam kabilang ang isang link. 

Ano pupuntahan ko gawin dito ay gumamit ng isang ipatungkol naitala sa pamamagitan ng A at gawin ang mga larawan ng isang link sa, sabihin nating, CS50 TV. Sa ganoong paraan, sa tuwing sinuman nag-click sa akin, ay nakadirekta ang kanilang mga browser upang isa pa, marahil higit pa kapaki-pakinabang, web page. Nagkaroon ako upang i-minimize ang laki ng text ng kaunti dahil ang aming web page ay pagkuha ng mas advanced na. Ngunit sana, ito ay malinaw pa rin. Mukhang eksaktong pareho Aking website lamang ngayon, sa tuwing nag-click ako sa mga larawan, Bubuksan nito ang aking browser ng isa pang tab para sa CS50.tv web page. 

Panghuli, sabihin nating Pupunta ako sa estilo mamaya website na ito gamit ang CSS. CSS ay kung ano ay kilala bilang isang style cascading sheet. At ito talaga ay nagbibigay ng isang mahusay na paraan upang i-edit at estilo katulad na mga bloke ng code. Gusto kong simulan ang pag-aayos ng aking HTML upang gawing mas madali upang estilo sa susunod. Dito, ako magse-set up ng dalawang mga iba't ibang mga uri ng mga pantukoy upang makatulong na ayusin ang aking code. Ginamit ko na ang mga katangian ID sa loob ng isang division, o div tag, at ginamit ko ang isang Klase ng katangian sa loob isa pang div tag. 

Mga katangian ID at Class gumana nang katulad. Ang pagkakaiba lamang ay maaari ka lamang magkaroon ang isang elemento, ang mga partikular na ID, ngunit anumang numero ng mga elemento maaaring magbahagi ng klase. Kaya halimbawa, maaari ko bang gamitin ang klase larawan nang maraming beses, ngunit hindi ko na lumikha ng isa pang division may tuktok ID. Kahit na hindi ko pa nawala na sa CSS, isa pang wika karaniwang ginagamit sa tabi ng HTML, sa sandaling sisimulan ko ang estilo ang aking code sa CSS, maaari ko bang gamitin ang mga pangsamahang mga katangian sa impluwensiya aesthetics aking mga web pahina. 

Lahat sa loob ng division tuktok ay magkakaroon ng katulad na stylings o anumang iba pang mga grupo ng mga HTML ko group sa class na imahe ay magbabahagi ng isang katulad na hitsura. Ito ay lubhang mas madaling kaysa sinusubukang i-edit at estilo ng mga imahe o mga bloke ng text paisa-isa. 

Kaya nagpunta kami sa ibabaw ng mga pangunahing kaalaman sa kung paano upang gumawa ng isang web page sa HTML. May ng grupo ng mga iba pang mga tampok HTML masyadong na kapag ipinares sa iba pang mga wika tulad ng CSS at JavaScript, maaari talaga gawing kakaiba ang mga pahina. Ang pinakamahusay na paraan upang makakuha ng komportable sa HTML ay isa lamang sa gulo sa paligid na may ito, makita kung ano ang gumagana, at kung ano ang hindi. 

Ang pangalan ko ay Daven Farnham. Ito ay CS50. 

Kaya halimbawa, maaari ko bang gamitin ang ang klase ng imahe - Hindi, may mga kaya maraming mga attributes. Ang pangalan ko ay Daven Farnham. Ito ay CS 650. Gusto kong sabihin CSS. Ito ay CSS.