Daven FARNHAM: I dag, vil jeg snakke lidt om HTML, HyperText Markup Language. Du ser HTML overalt i disse dage. I virkeligheden, hvis du ser dette video i en browser, er du se HTML lige nu. HTML er ikke et programmeringssprog, snarere, det er et markup sprog, der bruges af webbrowsere på at gøre siderne på internettet. 

Så du kan spørge, hvordan netop skriver en webside i HTML anderledes fra at skrive et program i et programmeringssprog sprog som C? Nå, C er et sprog med meget strenge syntaktiske regler, der skal være udarbejdet før det kan køre. Hvis du nogensinde har glemt at medtage en semikolon i slutningen af ​​en erklæring i din C-kode, du ved, hvad jeg taler om i forhold til strenge syntaks. 

Webbrowsere dog er en smule mere tilgivende når det kommer til HTML. Selv hvis din HTML er ikke syntaktisk korrekt, kan din side stadig være vises af en browser, men det kan ikke ser ud, som du havde tænkt dig. Så det er altid bedst at følger reglerne. Den bedste måde at få en intuition om, hvordan tingene arbejde er at gå gennem et eksempel. 

Så hvad vi har her er en grundlæggende blueprint for en webside. Du har sikkert lagt mærke til en masse ting mellem vinklede parenteser. Nå, de er bare tags. Tags dybest set informere webbrowsere at, hey, noget kommer din vej. Husk dog, når du åbner en tag, skal du lukke den, når du er færdig med at bruge det. 

Så for eksempel, jeg åbner en sektion kode med åben beslag organ tæt beslag. Jeg derefter tilføje noget tekst, i dette tilfælde, min første webside så når jeg gik til afslutning på dette afsnit, jeg bruger næsten en identiske tag undtagen denne gang med en skråstreg fremad før kroppen. I almindelighed, er dette format, du er kommer til at bruge, når du åbner og lukning tags. Tilsammen en åben tag og en slutkode komponere, hvad der kaldes et element. 

Hvis man ser på den første linje, vil du se et udråbstegn efterfulgt af DOCTYPE html. Dette er egentlig bare at fortælle din browser at filen er en webside skrevet i HTML. HTML-tag hovedsagelig siger, her kommer nogle HTML. Så har vi et hoved tag med en titel-tag inde i det. Hovedet tag, du kan tænke på som bestående af HTML-kode, der kommer til hovedparten af ​​din webside s faktiske indhold. 

I almindelighed, du sætte titlen på din webside her, selvom der er nogle andre mærker, der kan vises her så godt. Dernæst kommer din webside krop, den faktiske kød og knogler af din hjemmeside. I vores eksempel har vi bare sætte en simpel sætning, My First webside, som, hvis vi driver vores hjemmeside, vil se lidt noget som dette. Vores webside er ikke for queer, men fortvivl ikke. Vi fikse det op snart. 

Så ovennævnte HTML, vil vi give dig en meget grundlæggende skabelon til en webside, ikke noget fancy, blot skelettet. Men hvis jeg oprette en webside, hvad hvis jeg ønsker at tilføje en billede af, siger, mig selv? Tja, jeg kan gøre det. Der er et par måder at tilføje billeder til dit websted. Hvis billedet er i samme mappe som din HTML-fil, kan du linke til den billedet via sti som dette. 

Du åbner op med et billede tag fulgt ved i Alt attribut i kilde af billedet. Alt attribut værdi er blot nogle alternativ tekst i tilfælde en bruger ikke kan se billedet. Alternativt kan du også linke til billeder via en fuld URL, som denne. Nu betyder, at hjemmesiden ikke eksisterer i virkeligheden, men hvis der var et billede af mig på denne adresse, kunne jeg bruge kilde URL til at omfatte sit image på min hjemmeside. Uanset hvad, du ender op med en meget smukkere hjemmeside, noget som dette. 

Nå, det er temmelig cool, men jeg slags af ønsker lidt tekst her. Så lad os bare tilføje noget super enkel over billede, ligesom overskriften. Alt, hvad jeg har gjort hidtil, er at bruge header tag, H1, og et linjeskift tag, br. Header tag gør skrifttypen lidt smule større og mere fremtrædende. Den linjeskift tag, på den anden side hånd, er slags cool. I modsætning til de fleste andre koder, behøver du ikke en åbning og lukning pause tag, bare der er vist ovenfor. Dette skyldes brud har intet indhold og er derfor et tomt element. 

Tomme elementer som dette, kan du åbne og tæt samtidigt blot ved herunder en skråstreg på udgangen af ​​den første erklæring. Så nu er min hjemmeside ser lidt noget som dette. Bedre, men den slags føles som en blindgyde. Der er ingen andre steder at gå bort fra denne hoved side. Nå, lad os ordne det ved herunder et link. 

Hvad jeg har tænkt mig at gøre her, er at bruge en attribut betegnet A og gøre billede et link til, lad os sige, CS50 TV. På den måde, når nogen klikker på mig, deres browser vil blive dirigeret til en anden, sandsynligvis mere nyttigt, webside. Jeg har haft til at minimere størrelsen af tekst en smule, fordi vores webside er bliver mere avancerede. Men forhåbentlig er det stadig klart. Min hjemmeside ser nøjagtig det samme kun Nu, når jeg klikker på billedet, min browser vil åbne op en anden fanen for CS50.tv webside. 

Endelig, lad os sige, at jeg har tænkt mig at stil denne hjemmeside senere ved hjælp af CSS. CSS er, hvad der er kendt som en cascading style sheet. Og det dybest set giver en effektiv måde at redigere og stil lignende blokke af kode. Jeg ønsker at begynde at organisere min HTML til gøre det lettere at style senere. Her har jeg oprettet to forskellige slags identifikatorer for at organisere min kode. Jeg har brugt id attribut inde i en division, eller div tag, og jeg har brugt en Class attribut inde en anden div tag. 

Id og class attributter fungerer på samme måde. Den eneste forskel er, at du kan kun have et element, den specifikke id, men vilkårligt antal elementer kan dele en klasse. Altså for eksempel, kan jeg bruge klassen billede flere gange, men jeg kan ikke oprette en anden division med ID toppen. Selvom jeg ikke har gået ind i CSS, et andet sprog almindeligvis anvendes sammen med HTML, når jeg starter styling min kode med CSS, kan jeg bruge disse organisatoriske attributter til indflydelse min webside æstetik. 

Alt i divisionen top vil have lignende styling eller enhver anden gruppe af HTML I gruppe i klasse billede vil dele et lignende udseende. Dette er meget nemmere end at forsøge at redigere og stil billeder eller blokke af tekst individuelt. 

Så vi gik over det grundlæggende i, hvordan at lave en webside med HTML. HTML har en masse andre funktioner også at når parret med andre sprog ligesom CSS og JavaScript, kan virkelig lave sider skiller sig ud. Den bedste måde at blive fortrolig med HTML er bare at rode rundt med det, se, hvad der virker, og hvad der ikke gør. 

Mit navn er Daven Farnham. Dette er CS50. 

Altså for eksempel, kan jeg bruge klassen billedet - Nej, der er så mange egenskaber. Mit navn er Daven Farnham. Dette er CS 650. Jeg ønsker at sige CSS. Det er CSS.