Daven FARNHAM: Täna ma lähen rääkida natuke HTML, Hypertext Markup Language. Näete HTML kõikjal nendel päevadel. Tegelikult, kui sa vaatad seda video brauseris, sa oled nägemine HTML kohe. HTML ei ole programmeerimise keel, pigem on see kasutatav märgistuskeel veebibrauserite muuta lehekülgi Internetis. 

Nii võite küsida, kuidas täpselt on kirjalikult veebilehe HTML erinev kirjutamise programmi programmeerimine keel nagu C? Noh, C on keel väga ranged süntaktilised reeglid, mis peab olema koostatud enne seda saab. Kui olete kunagi unustanud lisada semikoolon lõpus avalduse oma C-koodi, sa tead, mida ma räägin kohta on seoses range süntaks. 

Veebibrauserite kuigi on natuke rohkem andke andeks, kui tegemist on HTML. Isegi kui teie HTML ei ole süntaktiliselt õige, oma lehele võib veel kuvatakse brauseri, kuid see võib ei vaata, nagu soovite. Nii et see on alati parima, et järgima reegleid. Parim viis saada intuitsiooni kuidas asjad töötavad on läbida näiteks. 

Nii, mis meil siin on põhiline plaan veebilehele. Sa ilmselt märganud palju asju vahel noolsulge. Noh, need on vaid sildid. Sildid põhimõtteliselt teavitama brausereid et, hei, midagi tuleb sinu õuele. Pidage meeles, kui avate tag, siis tuleb sulgeda, kui olete teha seda kasutada. 

Nii näiteks, kui avan jagu koodi avatud toendit, sulg. Ma siis lisada mõned teksti, antud juhul minu esimene veebileht, siis kui ma läksin sulgege see lõik, ma kasutan peaaegu identne tag välja seekord kaldkriips enne keha. Üldiselt on see formaat oled kavatse kasutada, kui avate ja sulgemise sildid. Koos avatud tag ja end tag kirjutada, mida nimetatakse element. 

Kui te vaatate esimest rida, siis saad vaata hüüumärk, millele järgneb DOCTYPE html. See on tõesti lihtsalt ütlen oma brauseri et fail on veebileht kirjutatud HTML. HTML tag sisuliselt ütleb, siin on mõned HTML. Siis on meil head tag title tag sees. Pea tag sa ei mõtle nagu sisaldab HTML koodi, mis tuleb võtta suurema osa oma veebilehe tegelik sisu. 

Üldiselt paned pealkiri oma veebilehele siin, kuigi on ka mõned muud tunnused, mis võivad ilmneda ka siin. Seejärel tuleb oma veebilehe keha tegelik liha ja kondid oma veebilehel. Meie näites, oleme lihtsalt panna lihtne lause, minu esimene veebileht, mis, kui me käivitada meie saidi näeb natuke midagi sellist. Meie veebileht ei ole liiga veider kuid ärge muretsege. Me kuusk see üles kiiresti. 

Nii eespool HTML, me anname teile väga põhi malli veebilehe Nothing fancy, lihtsalt tühi luud. Aga kui ma loon veebilehe Mis siis, kui ma tahan lisada pilt, ütleme, ise? Noh, ma ei saa seda teha. Seal on paar võimalust, et lisada pilte saidile. Kui pilt on samas kaustas HTML-faili, mida saab siduda image via tee niimoodi. 

Sa avada koos image tag järgneb poolt Alt atribuut allikas pilt. Alt atribuut väärtus on vaid mõned alternatiivse teksti kui kasutaja ei saa vaata pilti. Alternatiivina võite ka link piltide kaudu täielik URL, nagu see. Nüüd, et veebileht ei ole tegelikult olemas, aga kui oleks pilt mind sellele aadressile, mida ma kasutan allikas URL lisada selle pildi oma veebilehel. Mõlemal juhul, sa lõpuks koos palju ilusam veebilehel, midagi sellist. 

Noh, see on päris lahe, aga ma lahke kohta soovite mingi tekst ka siin. Teeme lihtsalt midagi lisada super lihtne üle pilt, nagu päises. Kõik, mida ma olen teinud siiani kasutada päises tag, H1 ja reavahetuse tag, br. Header tag muudab font vähe natuke suurem ja silmatorkavam. Line break tag teiselt Samas on selline lahe. Erinevalt enamikust teistest sildid, et sa ei pea avamise ja sulgemise break tag, just üks eespool näidatud. Seda seetõttu, et break puudub sisu ning on seetõttu tühi element. 

Tühjad elemendid nagu seda saab avada Lähedale samaaegselt lihtsalt sealhulgas kaldkriips kell Esialgse avalduse. Nüüd minu kodulehel paistab pisut midagi sellist. Parem, kuid see omamoodi tunne nagu tupikusse. Seal on kuhugi minna kõrvale selle esilehele. Noh, määrata, et sealhulgas link. 

Mida ma teen siin kasutada omistada tähistatakse ja teha image link, ütleme, CS50 TV. Nii kui keegi klikib mind oma brauseri suunatakse teine, ilmselt rohkem kasulik, veebilehele. Mulle minimeerida suurus teksti natuke, sest meie kodulehel on üha rohkem arenenud. Aga loodetavasti see on ikka selge. Minu veebileht välja täpselt sama ainult Nüüd, kui ma klõpsa pildil, minu brauser avab teise sakk CS50.tv veebilehele. 

Lõpuks oletame ma lähen stiil sellel veebilehel kasutades CSS. CSS on nn CSS-stiil. Ja põhimõtteliselt annab tõhusa kuidas muuta ja stiil sarnane plokid koodi. Tahan hakata korraldama oma HTML lihtsam stiili hiljem. Siin ma loodud kaks erinevat tunnused, mis aitavad korraldada oma koodi. Olen kasutanud ID atribuudi sees jagunemise või div tag ja olen kasutanud Class'i sees teine ​​div tag. 

ID-klassi atribuudid töötavad sarnaselt. Ainus erinevus on, saab olla ainult üks element, konkreetsed ID, kuid tahes elementide arvu jagada klassi. Nii näiteks, ma saan kasutada klassi pildi mitu korda, aga ma ei saa luua teise divisjoni ID-top. Kuigi ma ei ole läinud CSS, teine ​​keel levinumaid koos HTML, kui ma hakkan stiil minu koodi CSS, ma ei kasuta neid organisatsioonilisi aspekte, et mõju minu veebilehe esteetika. 

Kõik rajoonis top on sarnane stylings või Teine osa HTML I rühm arvesse klassi pilt jagavad sarnast välimust. See on palju lihtsam kui üritad muuta ja stiili pilte või plokid tekst eraldi. 

Nii me läksime üle põhitõdesid teha veebilehe HTML. HTML on hunnik muid funktsioone ka et kui need on ühendatud teiste keelte nagu CSS ja JavaScript, võib tõesti teha lehti välja paistma. Parim viis saada rahul HTML on lihtsalt jändama see, näha, mis toimib ja mis mitte. 

Minu nimi on Daven Farnham. See on CS50. 

Nii näiteks, ma ei saa kasutada klassi pilt - Ei, seal on nii palju atribuute. Minu nimi on Daven Farnham. See on CS 650. Ma tahan öelda, CSS. See on CSS.