>> 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.