DOUG Lloyd: Pra kemi kaluar ? Për nëse matematika ime është e drejtë, dhe unë mendoj se duke kërkuar back-- unë mendoj kemi shpenzuar rreth 35 video duke folur në lidhje me aspekte të ndryshme të C, ndoshta pak më shumë, ndoshta më pak. Dhe ne nuk e mbulojnë çdo gjë në C, por ne mbuluar një pjesë të madhe të të gjuha, pjesa më e madhe e saj, sigurisht për përdorime të zakonshme. Tani ne jemi duke shkuar për të folur në lidhje me një gjuhë tjetër, HTML. Dhe ne jemi duke shkuar për të mbuluar ajo në vetëm një video. 

Por kjo do të jetë në rregull. Kjo do të në fakt bëhet diçka që ju jeni duke shkuar për të marrë të përdoret për të. Tani që ju keni bazat e një gjuhë, kjo është në fakt goxha e lehtë të fillojnë të mësojnë të tjerët. Pra, ne jemi duke shkuar për të filluar të hap një pak prapa dhe shkëlqim mbi bazë dallimet në mes të këtyre gjuhëve dhe lloj të largohet nga ju për të. Nuk është një shumë e vërtetë të madhe Burimet në internet, e cila ne jemi duke shkuar për të filluar ju drejtuar drejt shkak të internetit është një depo e madhe e informacionit. Dhe kështu që nuk është si ju do të të jetë humbur nga detyrimisht duke mos pasur informacionin e mbuluar në një video. Ju ende do të jetë në gjendje për të marrë gjithçka që ju duhet dhe të përdorni njohuritë ju keni tashmë ndërtuar nga të kuptuarit C për të bërë kurbë të mësuarit për këto gjuhë të tjera në fakt një kënaqem shumë. Premtoj. 

Por le të flasim për një gjuhë kjo është me të vërtetë themelore për çdo web faqe, e cila është HTML. HTML është teksti Hyper Markup Language. HTML është një gjuhë, por ajo është e jo një gjuhë programimi. 

HTML nuk ka variablave. Ajo nuk ka logjikë ose funksione ose diçka të tillë. Ne nuk mund të bëjë ndonjë programimit në vetvete në HTML. Ndonjëherë ju do të dëgjoni njerëzit e përshkruajnë veten e tyre si programuesit HTML, të cilat nuk është plotësisht e saktë. Ne nuk mund të shkruajnë programe të HTML. 

HTML është përdorur vetëm për të shënuar deri tekstit. Është quajtur një gjuhë markup. Dhe çfarë kjo does-- këtë markup-- ne përdorim tags në HTML dhe këto tags-- kjo markup-- semantike përcakton strukturën e një faqe dhe shkakton tekst të thjeshtë që ekziston në mes tags duhet të interpretohen nga shfletuesit në mënyra të ndryshme. Dhe ndoshta është më mirë për të shpjeguar në këtë mënyrë nga një ilustrim. 

Këtu është një faqe shumë e thjeshtë HTML, jo një program HTML, përsëri, një faqe HTML. Dhe ne e dimë se është një Faqe HTML sepse ne kemi kufizohet gjithçka me HTML tags. Pra, kjo është ajo që një tag HTML duket si. Është në mes të kllapa kënd. Dhe vini re në krye kemi HTML dhe në fund shumë, pasi ne kemi bërë atë që është e me sa duket një shumë e HTML tjetër, ne kemi kënd kllapa slash HTML. Kështu që lloj i është kufiri mes asaj që është HTML dhe çfarë nuk është. Dhe sigurisht, konvencionale, vetëm si keni shkruar të gjitha programet tuaja C me extensions dot C, të gjitha dosjet tuaja HTML do të përfundojë me extensions dot HTML. Por ka më shumë ndodh këtu. Ne nuk kemi vetëm këto HTML tags. Ne me sa duket kanë këtë gjë quhet një tag kokë. E pra, në rregull, çfarë është kjo? 

E pra ndoshta është më mirë për dalluar me anë të një organi, Trupi qenë përmbajtja e faqes së internetit. Kështu që ndoshta tag kokë definon gjëra që nuk është në dritaren shfletuesit duhur, por është disi e rëndësishme për tonë web faqe duke u dhënë të saktë. Për shembull, brenda e tag kokë kemi tags titullin. 

Pra Titulli qenit botë Hello, Kjo është në fakt do të jetë se çfarë tregon deri në tab në Chrome ose në Safari ose Firefox-- çfarëdo shfletuesi ju prefer-- kjo është çfarë do të shfaqen në titull. Dhe para se skeda ajo do të tregojë deri në tërë dritaren e shfletuesit tuaj dhe ju mund të keni vetëm një faqe të hapet në një dritare të shfletuesit në një kohë. Kështu që do të jetë titulli i faqes sime deri në tab ose të dritares së shfletuesit bar, Hello World. Dhe pastaj përmbajtja e mia web faqe do të jetë bota, përshëndetje. Pra, le të marrin një vështrim në atë që disa gjë e tillë mund të duket si. Kjo është një faqe shumë e thjeshtë HTML. Kështu që unë jam këtu në IDE time CS50 dhe Unë kam zoomed në pak. Dhe unë jam vetëm do të hapur deri Hello dot HTML dhe të ju tregojnë se kjo është shumë e shumë përmbajtjen e faqes që pamë më parë. Mia tags thjeshtë HTML, kreu, tags titullin, trupit, dhe kështu me radhë. Unë e kam prerë që të jetë i pastër. 

Dhe pastaj çfarë mund të bëj në tim IDE është vetëm preview faqe. Dhe atje ne do të shkojmë. Përmbajtja e faqes sime është bota, hello, dhe unë nuk shoh ndonjë gjë nga tags kokë atje. Është vetëm përmbajtja e trupit. Botërore, përshëndetje. Dhe përsëri trupi vetëm tha, bota, përshëndetje. Pjesa tjetër është e humbur. 

Pra, kjo është me të vërtetë gjithçka që është. Kjo është një faqe shumë e thjeshtë themelore HTML. Tani unë e kam prerë HTML time për jetë me të vërtetë e bukur dhe të organizuar, por unë në fakt nuk duhet të. Unë mund të bëjë atë të duket mjaft e shëmtuar. Dhe kjo ende do të punojnë. Kjo do të jetë e saktë të njëjtën web faqe. Unë e kam vetëm gotten shpëtoj të gjithë hapësirën e bardhë. 

Siç rezulton, hapësira e bardhë është e të dhënave. Dhe kështu kur ne jemi të dërguar të dhëna nga dërguesi te marrësi, nga serveri të klientit, të dhënat kushton para. Dhe kështu duke u shpëtoj prej whitespace është në fakt një ide e mirë në qoftë se ju jeni dikush që i shërben një shumë të përmbajtjes web. Kjo është një ide e keqe, nëse ju jeni dikush që është mësuar këto gjëra dhe ju dëshironi të keni ajo i organizuar bukur. Kjo është një shumë më e lehtë të kuptoj se sa kjo. Por kjo është funksionalisht identike. 

Vulë dhe stuff like that ka të vërtetë nuk ka rëndësi në HTML. E gjithë kjo çështje është tags hapjes dhe mbylljes tags në mënyrë korrekte. Vini re se çfarë ka ndodhur këtu, pse. Markup na jep një mënyrë për të komunikojnë informacion shtesë në lidhje me atë që ne kemi shkruar. Pjesa Përshëndetje, Botërore ishte interpretohet si titull. Dhe bota, përshëndetje pjesë ishte interpretohet si përmbajtje apo çfarë duhet të jetë dukshme në web faqen time. 

Ka mbi 100 prej tyre të ndryshme tags dhe shumë e burimeve të mëdha në internet për të gjetur ata. Ne jemi duke shkuar për të folur për një disa prej tyre në këtë video, disa e gjëra me të vërtetë themelore. Por ne nuk jemi duke shkuar të flasim në lidhje me të gjitha për shkak të do të jetë i plotë për ta bërë këtë. 

Një tjetër gjë që ju mund të bëni, edhe pse, është hapur mjete developer. Dhe në qoftë se ju kujtohet nga Video ynë mbi HTTP, I shpjegova se si për të hapur up mjetet zhvilluesi. Në Chrome është zakonisht çelësi F12 për të hapur deri në zhvilluesi toolbar. Atëherë në vend të zgjedhjes së Rrjetit tab, ju mund të zgjidhni tab Elementet. Dhe në qoftë se ju load një web faqe, ju do të vërtetë të shih HTML që krijon këtë web faqe. Dhe kështu që ju mund të mësoni shumë për HTML duke shikuar në faqet e internetit tuaj të preferuar dhe duke parë se si ata të ndërtuar pjesë të ndryshme të atyre që ju pëlqen. Kështu që ndoshta nuk është kjo e ftohtë model ose diçka të tillë. Si mund ata e bëjnë atë me HTML? E pra ju mund të sapo hapur deri zhvilluesi tuaj mjetet dhe rri pezull mbi këtë element dhe parë saktësisht se çfarë HTML bën atë. Pra, kjo është me të vërtetë një mënyrë e mirë për të mësuar HTML, dhe unë fuqimisht rekomandojmë që ju bëni atë edhe për të mësuar HTML dhe gjithashtu për të mësuar pak bit për disa nga opsionet në dispozicion për ju në Developer Tools, të cilat me siguri do të jetë në dispozicion si ju filloni duke bërë web më intensive programimit. 

Pra, le të marrin një vështrim në një Disa tags përbashkëta HTML. Dhe ne do të kërcejnë dhe të marrë një sy në çfarë këto tags do të bëjë si duke shikuar në disa fotografi në IDE time. Pra, këtu janë tre tags shumë themelore për tweaking pamjen vizuale e tekstit. Ka tags B, I tags, dhe tags U. Dhe përkatësisht ajo që ata bëjnë është bëjnë tekstin mes tyre me shkronja të theksuara, italik, dhe nënvizime. Pra, le të shohim se çfarë do të duken si në një faqe web aktuale në IDE time. 

Kështu që këtu në IDE tim unë kam një file i quajtur Biu dot HTML. Biu dot HTML vetëm duke u bold, italik, duke nënvizuar. Unë do të hapur atë. 

Dhe ne do të shohim se këtu kam kanë këtë tekst është B tags guximshme. Ky tekst është tags I italic. Dhe ky tekst është tags U theksuar. Çfarë është kjo do të duken si? E pra përsëri, të gjitha unë kam për të bëni është të shkoni këtu në shfletuesin tim, shfletuesi im file, klikoni Preview, dhe kjo është ajo që vjen deri. 

Teksti në mes të B tags është me të vërtetë tani guximshme. Teksti në mes të I tags është me të vërtetë tani italic. Dhe teksti në mes të U tags është me të vërtetë tani nënvizuar. Pra, kjo është goxha e mirë. Ne tani e dimë se si të bëjnë tekstin duken më të vogël dashuroj ose të tërheqë theksin për gjëra të caktuara. Një tjetër çift i tags zakonshme këtu janë paragrafi tags, P, dhe header tags, që unë kam dhënë këtu si HX. 

Këto tags P, këto paragrafi tags, pushim tekstin tuaj deri në paragrafët. Kjo nuk është e mjaftueshme për të vetëm hit Enter dhe të lënë hapësira, sepse një kompjuteri është vetëm do të bëni atë që ju them se për të bërë dhe ai injoron të bardhë hapësirë ​​për pjesën më të madhe. Pra, ne nuk mund vetëm hit Enter dhe presin kompjuterin tonë për të interpretuar se ne duam për të filluar një paragraf i ri. Ne kemi për të thënë shumë qartë këtë është një paragraph-- kjo është another-- duke bashkëngjitur secili në një sërë P tags. 

Dhe ne gjithashtu kemi këto opsione për tags H, këto tags header. Ne kemi gjashtë nivele të ndryshme i headers, një, dy, tre, katër, pesë dhe gjashtë, të cilat janë në mënyrë progresive më të mëdha dhe më të mëdha headers. Dhe ata të merrni më të vogla dhe të vogla dhe të vogla dhe të vogla. Pra, ne kemi një kokë të nivelit të lartë, një të dytë header nivel, dhe kështu me radhë, dhe kështu me radhë. 

Le të marrin një vështrim në disa ndoshta P tags dhe disa header tags në veprim në një web faqe. Kështu që këtu në IDE time Unë kam një skedar të quajtur PH dot HTML, PH qenë paragrafët dhe header tags. Hapni se deri. Ka shumë ndodh këtu sepse unë e kam vënë disa Lorem ipsum, disa tekst vetëm të rastit në këtu. Kështu që unë do të zoom out pak sepse nuk ka aq shumë në vazhdim e sipër. Por vëreni se unë kam në shumë krye këtu Unë kam një H1, një nivel të një, header tag. Pastaj unë kam një paragraf, e cila është vetëm një bandë të Lorem rastit text-- ipsum-- vetëm parazgjedhur plotësojë standarde në tekst. Pra, unë kam dy paragrafë brenda se Niveli i një header dhe pastaj poshtë Parë kanë një nivel dy kokë këtu on line 24, një header nivelit të dytë, dhe dy të tjerë paragrafët. E pra çfarë e bën këtë të duket si në qoftë se kam parë atë në vrojtim e mia? Le të shohim. 

Pra, vini re se header nivelit të parë këtu në fakt është mjaft e madhe se kokë shkallës së dytë. Pra, kemi përdorur tags H1. Dhe vini re se tags P na lejojë për të thyer gjëra jashtë në paragrafët. Nëse do të kishte gotten shpëtoj nga këto tags P dhe në fakt vetëm vënë Hyn apo Kthim në mes të asaj që ne do të shpresuar të jenë paragrafët e ndryshme, ata të gjithë do të vetëm të kritikoj së bashku dhe kjo nuk do të ketë këtë paragraf bukur Ndarja me hapësirën mbi dhe nën. Dhe kështu kjo është ajo që paragrafi tags dhe header tags janë përdorur zakonisht për të bërë për të nxjerrë vëmendjen për pjesë të faqes tonë të internetit në këtë mënyrë. 

Up ardhshme janë disa etiketa që ne përdorim për të ndërtuar listat në faqen tonë të internetit. Pra, ne kemi të renditura lists-- ULs-- të cilat janë vetëm listat bulleted, urdhëruar Lista cilat janë numbered-- OLs-- dhe brenda ose një nga ata që ne duhet të kemi grupe të si për të treguar artikuj lista, Li. Dhe kështu që ne kemi hapur tag UL dhe ne kemi vënë artikuj në brendësi të saj. Dhe atëherë kur ne jemi bërë me se, ne mund të mbyllë tag UL. 

Dhe në mënyrë të ngjashme ne mund të kemi një listë të urdhëruar apo numëruar dhe të vënë pikat lista brenda atë. Pra, le të marrin një vështrim në një çift të listave dhe atë që ata do të bëjnë si në CS50 IDE. Kështu që unë kam këtu në IDE time një skedar të quajtur listat dot HTML. Le të marrin një vështrim. 

Dhe njoftimi këtu unë kam një të renditura listën me pesë gjëra në të. Dhe pastaj unë kam një listë të renditur, dhe Unë e kam ndryshuar tag pak, e drejtë? Unë e kam thënë fillimi barabartë gjashtë. Ajo rezulton me një listë të renditur I mund të vendosni pikënisje kurdoherë Unë want-- nga default ajo do të jetë one-- duke shtuar vetëm këtë të ashtuquajtur atribut në tag time OL. Dhe kështu kjo listë do të fillojë numërimi në gjashtë. Kështu elementet e kësaj liste të numëruar duhet të jetë gjashtë, shtatë, tetë, nëntë, dhjetë, sepse ka pesë elemente në listë, në krahasim me një, dy, tre, katër, pesë, i cili do të jetë rasti nëse unë kishte thënë OL pa specifikuar atribut fillimit. 

Pra, ne do të preview vetëm këtë kështu që ju mund të marrë një kuptim për çfarë po ndodh këtu. Dhe atje ne do të shkojmë. Nuk është lista ime. Pesë Elementet e para janë Listat e renditura ose bulleted. Dhe pesë elementet e ardhshme janë një listë të veçantë urdhëroi duke filluar nga gjashtë. Pra, kjo është se si ne mund të të ndërtuar listat e përdorur HTML. Një tjetër gjë që ju mund doni të bëni me HTML është ndërtuar një tryezë të Informacioni i rreshtave dhe kolonave të paraqesin informacion në një veçanërisht organizuar rrugën. Për ta bërë këtë me HTML ne mund të kemi një Përkufizimi tryezë duke filluar parantezë të hapur tryezë. Dhe pastaj brenda atë tavolinë ne mund të ketë një sërë rreshta, tags TR për të treguar çdo rresht. Dhe pastaj tags TD shkoni brenda tags TR të specifikoni një kolonë brenda një rresht. 

Pse është quajtur TD dhe jo Tc? E pra, TD qëndron për të dhënat tryezë. Zakonisht ju jeni vënë informacionit tuaj atje. Pra, kjo është arsyeja pse kjo është TD dhe jo TC. Kjo është pak konfuze. 

Pra, ju keni tags tryezë dhe brenda tags tuaj tryezë ju keni një numër të rreshtave, TRS. Dhe brenda çdo rresht që ju keni TDS per numrin e kolonave që ju dëshironi të keni në atë rresht të veçantë. Le të marrin një vështrim në një shumë të tabelë të thjeshtë gjatë në CS50 IDE. 

Kështu që unë kam këtu një fotografi quajtur tryezë dot HTML. Le të ketë një vështrim në ajo që duket si. Ka shumë ndodh këtu, por në qoftë se ju të vini re unë kam një tryezë të hapur. Unë jam duke filluar përkufizimin me tryezë. Dhe pastaj në rreshtin tim të parë unë me sa duket kanë katër kolona, ​​një, dy, tre, katër. Dhe atëherë unë jam bërë me atë rresht. 

Pastaj unë të fillojë një rresht dhe të bëjë dy, katër, gjashtë, tetë. Mbaro atë rresht. Të bëjë një rresht, tre, gjashtë, nëntë, 12. Dhe pastaj një rresht të fundit, katër, tetë, 12, dhe pse kjo është një të prerë pak jashtë këtu, 16. 

Kam mbaruar atë rresht. Kam mbaruar tryezë. Dhe atëherë unë jam bërë me HTML tim. Çfarë e bën këtë të duket si? E pra, kjo nuk është me të vërtetë shumë për të parë. Unë kam organizuar në mënyrë të qartë të dhënat e mia në një mënyrë disi më të organizuar. Por kjo nuk është super goxha këtu. Dhe ne jemi duke shkuar për t'u marrë me se kur ne flasim për CSS. Ne do të rishqyrtojnë këtë ide të atë që ne bëjmë për të bërë një table-- ndoshta format atë një pak më të mirë? Por unë ende kam katër radhë, secila prej të cilave ka katër kolona, dhe me të vërtetë ajo që kjo përbën një shumë e thjeshtë katër nga katër shumëzimit tryezë. 

Vetëm disa tags më shumë ne do të flasim. Le të flasim në lidhje me Koncepti i një formë të HTML. Kështu që ju mund të keni parë këtë në Konteksti i prerjet në një faqe interneti. Zakonisht ju shkruani emrin tuaj të përdoruesit. Ju shkruani fjalëkalimin tuaj, dhe ju jeni të mirë për të shkuar. Kjo do të jetë fillimi i një forme. 

Skipping mbi div një të dytë. Ne gjithashtu kemi inputet që lloj i përshtaten brenda formave. Këto janë elementet që ju jeni në të vërtetë shtypur në, ose butonat e radios ju jeni kurdisur, ose kontrolloni kuti që ju jeni duke kurdisur off. Pra, këto shkojnë brenda formave. Dhe ata përbëjnë në thelb çdo rresht i formës Nëse formulari juaj është i formatuar mirë. Pastaj ka ky koncept i një div, e cila nuk ka të vërtetë përshtatet në ndonjë kategori të veçantë e etiketave si ato që unë kam bërë më parë. Ajo thjesht lloj Në kufirin fillimi i disa division-- arbitrare div-- e faqes. Nuk ka pushim vizuale. Nuk ka asnjë linjë. Kjo nuk është vendosur jashtë si një copë të veçantë automatikisht. Ju do të duhet të stilit atë në këtë mënyrë për të bërë këtë. 

Ajo thjesht lloj i thotë se unë dua një pjesë e hapësirë ​​në web faqen time, dhe unë jam vetëm duke shkuar për të thirrur ajo kjo ndarje e faqen time. Ne mund të vënë gjëra brenda e divs, dhe në fakt, kur ne kokë mbi të IDE në një të dytë, ne do të shihni se unë jam vënë tim formë brenda një div. 

Kështu që unë kam këtu në IDE time një file i quajtur div formë dot HTML. Le të hapur atë. Vini re se si i tha, div është lloj i arbitrar. E drejtë? Ajo nuk ka të vërtetë do të thotë asgjë. Kështu që unë kam një arbitrar Ndarja e parë e faqen time. Dhe pastaj në vend të një tjetër div më vonë, duke filluar në linjë tetë, Unë kam këtë formular. Dhe brenda formës unë kam një Numri i inputeve, fushat e formularit. Pra, unë kam një fushë emri i të cilit është A-- e cila nuk ka të vërtetë do të thotë asgjë now-- e drejtë që me sa duket merr tekstin, një tjetër që merr një fjalëkalim, një tjetër që është një radio buton, një tjetër që është një kuti kontrolloni, dhe një tjetër që është një Submit button. E pra, çfarë e bën këtë të gjithë në fakt duken si? E pra, le të marrin një sy. Ne do të hapur atë në një dritare preview tonë. Vini re se kjo arbitrare së pari division-- ka nuk ka ndarje vizuale këtu. Ajo nuk ka të vërtetë të bëjë asgjë, e drejtë? 

Dhe atëherë unë kam formën time. Dhe unë nuk e ka bërë asnjë formatim special. Pra, forma është vetëm një rresht i madh i informacionit. Po të kisha formatuar formën time ndryshe, Unë mund të ketë atë rresht pas rreshti nga linjë. Por unë nuk e ka bërë asnjë styling. Përsëri, ne nuk jemi duke folur për CSS këtu. Ne jemi vetëm duke folur për HTML. 

Edhe në formën time tekst unë mund type-- mos harroni se format e tekstit tipit kështu që unë mund të vënë emrin tim. Dhe në Fjalëkalimi Kam mia mund të shtypni fjalëkalimin tim. Dhe për shkak se këtë fushë është e tipit fjalëkalim, ju nuk e dini se çfarë fjalëkalimi im është. Kjo është e gjitha dots. 

Unë gjithashtu mund të zgjidhni për të shënoj një radio button ose shënoj një kuti kontrolloni. Ose unë mund të dërgoj formularin tim. Dhe unë nuk kam bërë asgjë, kështu që kur unë të dërgoj formularin tim, faqja e vetëm freskon. Por unë ndoshta mund të konfiguroni tim Submit button për të bërë diçka tjetër. Dhe ne do të shohim çfarë mund të bëjmë me që në një video të ardhmen në PHP. Por kjo ndërton një shumë formë e thjeshtë që ne mund të përdorni të ketë përdorues të ndërveprojnë dhe paraqesë informacion në faqen tonë të internetit. 

Një koment të fundit para se të lëvizin për disa tags tjera janë për të marrë një sy në këtë tag input një herë më shumë. Vini re se unë kam theksuar skajet e tag në të kuqe. Çdo tag tjetër ne kemi parë deri më tani ka kishte një fillim dhe një fund, një hapje tag dhe një etiketë mbyllëse. 

Por një tag input nuk ka. Nuk ka asnjë tekst që shkon në mes tags dhëna. Të gjitha të informacionit ne jemi duke synuar për të përcjellë është e lidhur si pjesë e atributet e këtij input. Vini re ne kemi emrin input është e barabartë me x. Lloji i barabartë y. Kjo është me të vërtetë të gjithë informacion ne kemi nevojë. 

Kjo është quajtur një etiketë mbyllëse vetë. Ajo nuk kërkon një hapje dhe një ngushtë për shkak të gjithë informacionin gjendet brenda tag dhe atributet e tij. Pra, ndonjëherë ju do të shihni këtë, too. Pra, vetëm të jetë i vetëdijshëm se në qoftë se ju keni një tag kjo është plotësisht vetë-përmbante, ajo hapet dhe mbyllet me veten kllapa hapur kënd në të majtë dhe kënd slash kllapa në të djathtë. Ne do të shohim një tjetër një nga ato tani me tags imazhit si. 

Para se të flasim për imazhe, ne duhet të flasim për hyperlinks. Në qoftë se ne duam faqen tonë të internetit për të qenë interaktive dhe të na lëvizë, do të ishte mirë të jetë në gjendje të klikoni në një nga ato atë që ka qenë zakonisht një lidhje blu. Kjo është në fakt si ne ndërtojmë një hyperlink në faqen tonë të internetit. Dhe mjaft interesant ka një tjetër tag HTML quajtur lidhje, e cila nuk është një hyperlink. Një këtu qëndron për spirancë, dhe kjo është se si ne të tregojnë një hyperlink. 

A href barabartë x mjete të shkojnë në faqe web X. Dhe çdo gjë midis të hapur një tag dhe mbyllur një tag është ajo që do të jetë që nënvizoi Teksti blu që duket si një lidhje se ne jemi të njohur me të. Më poshtë se ne kemi një tag imazhit, i cili është një vetë mbylljes tag për të shfaqur një figurë e vendosur në X. Dhe ju mund të jetë në gjendje të ndryshojë se imazhi duke specifikuar gjerësi dhe lartësi dhe atributet e tjera në që dot dot dot atje. 

Në fund shumë këtu ne kemi një shumë interesante kërkim tag që nuk ka kanë një etiketë mbyllëse. Kjo është thirrje HTML pikë DOCTYPE. Pra, HTML ka qenë rreth e rrotull që nga viteve 1990 për ndërtimin e web pages, dhe është e shkuar pësuar disa rishikime që nga atëherë. Kohet e fundit në vitin 2014 ajo iu nënshtrua një rishikim quhet HTML5 e cila tani është aktual lloj de facto standardit HTML. 

Për të treguar se web ynë faqe janë shkruar duke përdorur HTML5, kjo është se si ne nisem. Ajo mund të hiqej, por ajo që në thelb do të thotë është se ju nuk mund të përdorni ndonjë nga tags që janë tags HTML5, këto tags reja. Pra, ne gjithmonë nisem në qoftë se ne jemi duke përdorur HTML5. Dhe të gjithë tags ne kemi biseduar për më parë nuk janë tags HTML5. Por kjo do të tregojë se Tags HTML5 do të jetë i pranishëm. Dhe kështu që ne kemi thirrje HTML DOCTYPE, e cila është në fillim të tonë Skedar HTML, dhe pas kësaj pike ne fakt kemi HTML tonë të hapur tag dhe të vazhdojë nga atje. 

Kjo e fundit është një koment tag, e cila duket pak më të ndryshme, too. Ajo fillon me kënd kllapa thirrje dash dash por jo kllapa e mbylljes. Në mes të këtyre dy elementeve atje është ajo ku ju shkruani komentet tuaja. Dhe le të marrin një vështrim në imazhe dhe komente dhe lidhjet në CS50 IDE. 

Kështu që unë kam këtu një file i quajtur image Lidhje dot HTML që unë jam duke shkuar për të hapur. Dhe vini re unë kam marrë një çift të Komentet këtu në komentet e mia HTML. Pra, ashtu si në C dhe të tjera gjuhë programimi, HTML vetëm duke qenë një gjuhë markup e ka mundësinë që të ketë komente. Dhe kështu që unë jam me sa duket duke shkuar për të vendosni një foto të Rick Astley diku në mes të këtij div tag, kjo ndarje arbitrare. Me sa duket kjo skedë është vendosur në Rick dot JPEG, e cila në qoftë se ne kokë mbrapa mbi të Pema ime skedar për një të dytë, është një skedar që ekziston në dosjen aktuale. Pra, kjo është në rregull. Unë mund referencë atë. 

Atëherë unë mund të ketë lidhje të brendshme. Pra, vini re on line 11 këtu href im është përshëndetje dot HTML. Kështu që vetëm i referohet përshëndetje dot HTML që ekziston në dosjen aktuale. Dhe unë gjithashtu mund të ketë të jashtëm lidhjet nga vetëm duke specifikuar HTTPS për të treguar se unë nuk jam duke folur për një fotografi në directory time aktuale. Unë jam duke folur për një fotografi që ekziston diku në internet, që kam për të kërkuar duke përdorur protokollin HTTP. 

Pra, le të marrin një vështrim në atë që Kjo faqe mund të duket si dhe të marrë të gatshme për një foto të Rick Astley të shfaqen në ekranin tuaj. Kështu që unë do të parapamje këtë. Ka Rick Astley në nivel shumë të lartë në këtë arbitrare Ndarja e kam vënë atë në krye. Dhe pastaj poshtë Parë kanë lidhje të mia, e drejtë? 

Unë kam një lidhje me përshëndetje dot HTML. Dhe në qoftë se unë të klikoni atë, unë shkoj lëvizur mbi këtë faqe se ne jemi shumë të njohur me nga fillimi shumë i programit tonë. Nëse unë pop atë faqe e hapur përsëri, në qoftë se unë pop image Lidhje të hapë një më shumë kohë, Unë gjithashtu mund të shkoj jashtë në faqen e internetit CS50 e. Dhe atje ne see-- unë do zoom out pak here-- ne do të shohim CS50 s website lloj ngulitur në mes të faqes sonë. Kështu që unë kam qenë në gjendje të bëjë një të brendshëm lidhin si dhe një lidhje të jashtme. 

Rregulli i fundit me HTML që ne do të flasim për këtu është se HTML juaj duhet të formohet mirë. Në C kemi biseduar shumë për Sintaksa ndryshme të gjërave. Në HTML sintaksa vërtetë sillet rreth tags. Çdo tag keni hapur duhet të jenë të mbyllura. Dhe në fakt, çdo tag keni hapur duhet të mbyllet në mënyrë të kundërt. 

Pra, nëse ju hapni një tag të guximshme, një italic tag, dhe pastaj një etiketë theksoj për të bërë të tre për një grup të veçantë të tekstit, ju duhet të mbyllni ato në mënyrë të kundërt. Pra, nëse keni hapur guximshme, italic, theksoj, ju duan për të mbyllur theksoj, italic, bold. Ky lloj i encapsulation është çfarë mban HTML bukur dhe të organizuar. 

Ndryshe C, edhe pse, gabime sintakse nuk do të në fakt ulok HTML tuaj ndoshta. HTML juaj mund të mos jetë mirë formuar por do të punojë ende. Dhe kështu këto gabime mund të lloj të rrëshqitje nga. Është e deri tek ju për të vërtetë të jetë vigjilent. Ndonjëherë ata do të dështojnë, por ndonjëherë ju mund të merrni larg me të. 

Ajo mund të jetë një të vërtetë të detyrë e vështirë, edhe pse, për të mbajtur gjurmët e kur e keni hapur një tag, kur ju të mbyllur atë, sidomos si HTML tuaj Fotografi të merrni më të mëdha. Ju do të dëshironi ndihmë. Dhe ka në internet mjete Validator që ju mund të përdorni të ketë një vështrim në web tuaj faqe dhe të shohim nëse ajo është e mirë HTML formuar. Dhe ju duhet patjetër hidhini një sy në ato dhe të fillojnë të përdorin ato si ju të fillojë duke bërë disa punë me HTML, shkrim HTML, vetëm kështu që ju merrni disa zakone të mira për organizimin e HTML tuaj në një mënyrë të mirë dhe stil të mirë dhe duke u siguruar se ju nuk jeni duke bërë ndonjë gjë që mund të krijojë një gabim sintakse që do të shkaktonte ju një grimë e një problem poshtë rrugës. 

Unë jam Doug Lloyd. Kjo është CS50.