>> Daven FARNHAM: Idag ska jag prata lite om HTML,
Hypertext Markup Language.
Du ser HTML överallt dessa dagar.
Faktum är att om du tittar på det här video i en webbläsare, du
se HTML just nu.
HTML är inte ett programmeringsspråk, snarare är det ett märkspråk som används av
webbläsare för att återge sidor på internet.
>> Så du kan fråga, hur exakt skriver en webbsida i HTML annorlunda
från att skriva ett program i ett programmeringsspråk språk som C?
Tja, är C ett språk med mycket strikt syntaktiska regler som måste vara
kompileras innan det kan köras.
Om du någon gång har glömt att ta med en semikolon i slutet av ett uttalande i
din C-kod, vet du vad jag talar om i fråga om att strikt syntax.
>> Webbläsare dock är lite mer förlåtande när det kommer till HTML.
Även om din HTML är inte syntaktiskt rätt, kan din sida fortfarande
som visas av en webbläsare, men det kan inte ser ut som du tänkt.
Så det är alltid bäst att följer reglerna.
Det bästa sättet att få en intuition om hur det arbetet är att
gå igenom ett exempel.
>> Så vad vi har här är en grundläggande utkast till en webbsida.
Du märkte nog en massa saker mellan vinkelparenteser.
Tja, de är bara taggar.
Tags princip informera webbläsare att, hey, något
kommer din väg.
Kom dock ihåg, när du öppnar en tag, måste du stänga den när du är
göras med hjälp av den.
>> Så till exempel, jag öppnar ett avsnitt av kod med öppen
fästesstomme, nära fästet.
Jag lägger sedan lite text, i det här fallet, min första webbsida sedan när jag gick till
Detta avsnitt, använder jag nästan en identiska tag men den här gången med en
snedstreck innan kroppen.
I allmänhet är detta det format du kommer att använda när du öppnar
och stänga taggar.
Tillsammans en öppen tagg och en sluttagg komponera vad som kallas ett element.
>> Om du tittar på den första raden, kommer du ser ett utropstecken följt av
DOCTYPE html.
Detta är egentligen bara berätta din webbläsare att filen är en webbsida
skriven i HTML.
HTML-taggen i grunden säger, här kommer lite HTML.
Då har vi ett huvud tag med en titel tagg i den.
Huvudet-taggen som du kan tänka på som bestående av HTML-kod som kommer att
huvuddelen av din webbsida s faktiska innehållet.
>> I allmänhet lägger du titeln på din webbsida här, även om det finns några
andra taggar som kan visas här också.
Därefter kommer din webbsida kropp, det faktiska kött och ben av din webbplats.
I vårt exempel har vi bara sätta en enkel mening, min första webbsida,
som, om vi kör vår webbplats, kommer att se ut lite ungefär så här.
Vår webbsida inte är för queer, men oroa dig inte.
Vi kommer att piffa upp det snart.
>> Så ovanstående HTML, ger vi dig en mycket grundläggande mall för en webbsida,
inget märkvärdigt, bara nakna ben.
Men om jag skapar en webbsida, tänk om jag vill lägga till en
bild av, säg, mig själv?
Tja, kan jag göra det.
Det finns ett par sätt att lägga till bilder till din webbplats.
Om bilden är i samma mapp som HTML-fil, kan du länka till den
bild via sökväg som denna.
>> Du öppnar upp med en bildtagg följt med i Alt-attributet i
källa av bilden.
Alt-attributet värde är bara några alternativ text om en användare inte kan
se bilden.
Alternativt kan du också länka till bilder via en fullständig URL, som den här.
Nu, gör att webbplatsen inte egentligen existerar, men om det fanns en bild av
mig på den adressen, kan jag använda käll URL för att inkludera
sin bild på min hemsida.
Hursomhelst, du sluta med en mycket snyggare hemsida, ungefär så här.
>> Tja, det är ganska coolt, men jag typ av vill ha lite text här.
Så låt oss bara lägga till något super enkel ovanför
bild, som rubriken.
Allt jag har gjort hittills är att använda huvudet tag, H1, och en radbrytning tag, br.
Rubrik taggen gör typsnittet lite lite större och mer framträdande.
Linjen paus taggen, å andra sidan är ganska häftigt.
Till skillnad från de flesta andra taggar, behöver du inte en öppning och stängning paus tag, precis
den som visas ovan.
Detta beror på att brott har inget innehåll och är därför, ett tomt element.
>> Tomma element som detta, kan du öppna och nära samtidigt genom att helt enkelt
finns ett snedstreck på slutet av den ursprungliga deklarationen.
Så nu min hemsida ser lite ungefär så här.
Bättre, men det slags känns som en återvändsgränd.
Det finns ingen annanstans att gå åt sidan från denna huvudsida.
Nåväl, låt oss fixa det genom inklusive en länk.
>> Vad jag ska göra här är att använda en attribut betecknas med A och göra den
bilden en länk till, låt oss säga, CS50 TV.
På så sätt, när någon klickar på mig, sin webbläsare kommer att riktas till
en annan, förmodligen mer användbart, webbsida.
Jag har haft för att minimera storleken på text lite eftersom vår hemsida är
blir mer avancerade.
Men förhoppningsvis är det fortfarande tydligt.
Min hemsida ser exakt samma bara Nu, när jag klickar på bilden,
min webbläsare kommer att öppna upp en annan flik för webbsidan CS50.tv.
>> Slutligen, låt oss säga att jag ska stil denna hemsida senare med hjälp av CSS.
CSS är vad som kallas en CSS.
Och det i grunden ger en effektiv sätt att redigera och stil
liknande block av kod.
Jag vill börja organisera min HTML till göra det lättare att forma senare.
Här satte jag upp två olika typer av identifierare för att hjälpa till att organisera min kod.
Jag har använt ID-attribut i en delning, eller div-taggen, och jag har använt en
Klass attribut inne en annan div-taggen.
>> ID och klassattribut fungerar på liknande sätt.
Den enda skillnaden är att du kan bara ha ett element, det specifika ID, men
valfritt antal element kan dela en klass.
Så till exempel, kan jag använda klassen bild flera gånger, men jag kan inte
skapa en annan division med ID-toppen.
Även om jag inte har gått in i CSS, annat språk som vanligen används
tillsammans med HTML, när jag börjar styling min kod med CSS, kan jag använda dessa
organisatoriska attribut till inflytande min webbsida estetik.
>> Allt inom divisionen toppen kommer att ha liknande stylingsna eller någon
andra gruppen av HTML I-gruppen i klass image kommer att dela ett liknande utseende.
Det är mycket enklare än att försöka redigera och stil bilder eller block av
text individuellt.
>> Så vi gick över grunderna i hur att göra en webbsida med HTML.
HTML har en massa andra funktioner också att när det paras ihop med andra språk
som CSS och JavaScript, kan verkligen göra sidorna sticker ut.
Det bästa sättet att bli bekant med HTML är bara för att röra runt med den,
se vad som fungerar och vad som inte fungerar.
>> Mitt namn är Daven Farnham.
Detta är CS50.
>> Så till exempel, kan jag använda klassen image -
Nej, det finns så många attribut.
Mitt namn är Daven Farnham.
Detta är CS 650.
Jag vill säga CSS.
Detta är CSS.