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.