>> Daven FARNHAM: I dag, jeg kommer til å snakke litt om HTML,
Hypertext Markup Language.
Du ser HTML overalt i disse dager.
Faktisk, hvis du ser dette video i en nettleser, er du
se HTML akkurat nå.
HTML er ikke et programmeringsspråk, snarere er det et kodespråk som brukes av
nettlesere å gjengi sider på internett.
>> Så du kan spørre, hvordan er egentlig å skrive en web-side i HTML annerledes
fra å skrive et program i et programmerings språk som C?
Vel, er C et språk med svært strenge syntaktiske regler som må være
kompilert før den kan kjøre.
Hvis du noen gang har glemt å inkludere en semikolon ved enden av en uttalelse
C-kode, vet du hva jeg snakker om i forhold til streng syntaks.
>> Nettlesere skjønt, er litt mer tilgivende når det kommer til HTML.
Selv om HTML er ikke syntaktisk korrekt, kan siden din fortsatt være
vises av en nettleser, men det kan ikke se ut som du hadde tenkt.
Så det er alltid best å følge reglene.
Den beste måten å få en intuisjon om hvordan ting fungerer er å
går gjennom et eksempel.
>> Så det vi har her er en grunnleggende blåkopi for en web-side.
Du har sannsynligvis lagt merke til en del ting i mellom vinklede parentes.
Vel, de er bare koder.
Tags utgangspunktet informere nettlesere at, hei, noe
kommer din vei.
Husk skjønt, når du åpner en tag, må du lukke den når du er
gjøres ved hjelp av den.
>> Så for eksempel, åpner jeg en seksjon av koden med åpen
brakett kroppen, tett brakett.
Jeg deretter legge litt tekst, i dette tilfellet, min første web side så når jeg gikk til
lukke denne delen, bruker jeg nesten en identiske tag bortsett fra denne gangen med en
skråstrek før kroppen.
Generelt, er dette formatet du er kommer til å bruke når du åpner
og lukking koder.
Sammen, en åpen tag og en slutt tag komponere det som kalles et element.
>> Hvis du ser på den første linjen, vil du se et utropstegn etterfulgt av
DOCTYPE html.
Dette er egentlig bare å fortelle nettleseren din at filen er en web-side
skrevet i HTML.
HTML-kode i hovedsak sier, her kommer noen HTML.
Da har vi et hode tag med en tittel tag inni den.
Hodet tag du kan tenke på som bestående av HTML-kode som kommer for
mesteparten av nettsidens faktiske innhold.
>> Generelt, sette deg tittelen på web-side her, selv om det er noen
andre koder som kan vises her også.
Neste kommer nettsiden din kropp, det faktiske kjøtt og bein på ditt nettsted.
I vårt eksempel har vi bare sette en enkel setning, My First webside,
som, hvis vi kjører vår side, vil se litt noe sånt som dette.
Vår nettside er ikke så rart, men ikke bekymre deg.
Vi vil gran det opp snart.
>> Så ovenfor HTML, vil vi gi deg en veldig grunnleggende mal for en web-side,
ikke noe fancy, bare den nakne bein.
Men hvis jeg oppretter en nettside, hva om jeg ønsker å legge til et
bilde av, si, meg selv?
Vel, jeg kan gjøre det.
Det er et par måter å legge til bilder til nettstedet ditt.
Hvis bildet er i samme mappe som HTML-filen, kan du koble til
image via stien slik.
>> Du åpner opp med en bildekode fulgt etter i Alt attributt i
kilde av bildet.
Alt attributt verdi er bare noen alternativ tekst i tilfelle en bruker kan ikke
se bildet.
Alternativt, kan du også koble til bilder via en full URL, som dette.
Nå betyr at nettstedet ikke egentlig eksisterer, men hvis det var et bilde av
meg på denne adressen, jeg kunne bruke kildeadressen for å inkludere
sitt image på min hjemmeside.
Uansett, ender du opp med en mye penere nettside, noe som dette.
>> Vel, det er ganske kult, men jeg slags av ønsker litt tekst her også.
Så la oss bare legge til noe super enkelt over
bilde, som overskriften.
Alt jeg har gjort så langt er å bruke overskriften tag, H1, og et linjeskift tag, br.
Overskriften koden gjør skriften litt litt større og mer fremtredende.
Linjen signal, på den annen hånd, er litt kult.
I motsetning til de fleste andre koder, trenger du ikke en åpning og lukking pause tag, bare
det som er vist ovenfor.
Dette skyldes at brudd ikke har noen innholds og er derfor et tomt element.
>> Tomme elementer som dette, kan du åpne og tett samtidig bare ved
inkludert en skråstrek på slutten av den første erklæringen.
Så nå er min hjemmeside ser litt noe sånt som dette.
Bedre, men det føles litt som en blindvei.
Det er ingen andre steder å gå til side fra denne hovedsiden.
Vel, la oss fikse det ved inkludert en kobling.
>> Hva jeg skal gjøre her er å bruke en attributt betegnes av en og gjøre
image en link til, la oss si, CS50 TV.
På den måten, når noen klikker på meg, nettleseren vil bli rettet mot
en annen, sannsynligvis mer nyttig, web-side.
Jeg har hatt for å minimere størrelsen på tekst litt fordi vår nettside er
blir mer avanserte.
Men forhåpentligvis er det fortsatt klart.
Min hjemmeside ser nøyaktig det samme bare Nå, når jeg klikker på bildet,
Nettleseren min vil åpne opp en annen kategorien for CS50.tv nettside.
>> Til slutt, la oss si at jeg kommer til stil denne nettsiden senere ved hjelp av CSS.
CSS er det som er kjent som en gripende stilark.
Og det gir i utgangspunktet en effektiv måte å redigere og stil
lignende blokker av kode.
Jeg ønsker å begynne å organisere min HTML til gjøre det enklere å style senere.
Her setter jeg opp to forskjellige typer identifikatorer for å bidra til å organisere koden min.
Jeg har brukt ID-attributtet inne i en divisjon, eller div tag, og jeg har brukt en
Klasse attributt inne en annen div tag.
>> ID og Class attributter fungerer på samme måte.
Den eneste forskjellen er at du kan bare ha ene element, den spesifikke ID, men
hvilket som helst antall elementer kan dele en klasse.
Så for eksempel, kan jeg bruke klassen bilde flere ganger, men jeg kan ikke
opprette en ny divisjon med ID toppen.
Selv om jeg ikke har gått inn i CSS, et annet språk som vanligvis brukes
sammen med HTML, når jeg begynner styling koden min med CSS, kan jeg bruke disse
organisatoriske egenskaper til innflytelse siden min web estetikk.
>> Alt innen divisjonen toppen vil ha lignende stylings eller noen
andre gruppen av HTML I gruppen inn i klasse bildet vil dele en lignende utseende.
Dette er mye enklere enn å prøve å redigere og stil bilder eller blokker av
tekst individuelt.
>> Så gikk vi over det grunnleggende om hvordan å lage en nettside med HTML.
HTML har en haug med andre funksjoner også som da sammen med andre språk
som CSS og Javascript, kan virkelig gjøre sidene skiller seg ut.
Den beste måten å bli komfortabel med HTML er bare å rote rundt med det,
se hva som fungerer, og hva som ikke virker.
>> Mitt navn er Daven Farnham.
Dette er CS50.
>> Så for eksempel, kan jeg bruke klassebildet -
Nei, det er så mange attributter.
Mitt navn er Daven Farnham.
Dette er CS 650.
Jeg ønsker å si CSS.
Dette er CSS.