DOUG LLOYD: Så vi tillbringade about-- om min matte är rätt, och jag tror att titta back-- Jag tror Vi tillbringade omkring 35 videor talar om olika aspekter av C, kanske lite mer, kanske lite mindre. Och vi inte täcker allt i C, men vi omfattas en stor del av den språk, den stora majoriteten av den, säkert för vanliga användningsområden. Nu ska vi prata om ett annat språk, HTML. Och vi kommer att täcka det på bara en video. 

Men det kommer att vara OK. Det kommer att faktiskt bli något du kommer att vänja sig vid. Nu när du har grunderna i ett språk, det är faktiskt ganska lätt att börja lära andra. Så vi kommer att börja till steg lite tillbaka och släta över de grundläggande skillnader mellan dessa språk och liksom lämnar du till den. Det finns en hel del riktigt bra resurser på internet, som vi kommer att börja styra dig mot eftersom Internet är en stor databas med information. Och så det är inte som du kommer vara förlora nödvändigtvis genom att inte ha den information omfattas av en video. Du kommer fortfarande att kunna få allt du behöver och användning den kunskap du har redan byggts upp genom att förstå C att göra inlärningskurvan för dessa andra språk faktiskt mycket planare. Jag lovar. 

Men låt oss tala om ett språk det är verkligen grundläggande för varje webbsida sida, vilket är HTML. HTML är Hyper Text Markup Language. HTML är ett språk, men det är inte ett programmeringsspråk. 

HTML har inte variabler. Det har inte logik eller funktioner eller nåt sånt. Vi kan inte göra något programmering i sig i HTML. Ibland hör du människor beskriver sig själva som HTML-programmerare, som är inte helt korrekt. Vi kan inte skriva HTML-program. 

HTML är bara används för att markera text. Det kallas en markup language. Och vad detta does-- denna markup-- Vi använder taggar i HTML och dessa tags-- detta markup-- semantiskt definierar strukturen på en sida och orsakar klartext att existerar mellan taggar tolkas av webbläsare på olika sätt. Och kanske är det bästa för att förklara detta i form av en illustration. 

Här är en mycket enkel HTML-sida, inte en HTML-program, återigen, en HTML-sida. Och vi vet att det är en HTML-sida eftersom vi har avgränsas allt med HTML-taggar. Så detta är vad en HTML-tagg ser ut. Det är mellan vinkelfästen. Och lägg märke på toppen har vi HTML och längst ned, efter att vi har gjort det som är uppenbarligen en hel del andra HTML, Vi har vinkelparentes snedstreck HTML. Så den sortens är gränsen mellan vad som är HTML och vad som inte. Och naturligtvis, konventionellt, bara som ni skrev alla dina C-program med punkt C förlängningar, alla dina HTML-filer kommer att sluta med punkt HTML förlängningar. Men det är mer som händer här. Vi har inte bara dessa HTML-taggar. Vi har tydligen detta som kallas ett huvud tag. Tja, OK, vad är det? 

Väl kanske det är bäst att skilja genom en kropp, kroppen är innehållet på webbsidan. Så kanske huvudet taggen definierar grejer som inte är i webbläsarfönstret korrekt, men på något sätt är viktigt för vår webbsidan som återges korrekt. Exempelvis insidan av head tag vi har rubriktaggar. 

Så titel är hallå världen, som är faktiskt kommer att vara vad dyker upp i fliken i Chrome eller safari eller Firefox-- vilken webbläsare du prefer-- det är vad som kommer att dyka upp i titeln. Och innan flikar det skulle visa i hela webbläsarfönstret och du kan bara ha en sida öppnas i ett webbläsarfönster i taget. Så det kommer att bli det titeln på min sida upp på fliken eller webbläsarfönstret bar, hallå världen. Och sedan innehållet i mitt webbsidan kommer att vara världs, hej. Så låt oss ta en titt på vad några sak som detta skulle kunna se ut. Detta är en ganska enkel HTML-sida. Så jag är här i min CS50 IDE och Jag har zoomat in lite. Och jag ska bara öppna upp hej dot HTML och visa dig att det är ganska mycket sidans innehåll som vi såg tidigare. Mina enkla HTML, huvud taggar, rubriktaggar, kropp, och så vidare. Jag har indragna vara rena. 

Och vad jag kan göra i mitt IDE är bara förhandsgranska sidan. Och det går vi. Innehållet på min sida är världs, hej, och jag kan inte se något in från huvudet taggar där. Det är bara innehållet i kroppen. Världen, hej. Och återigen kroppen bara sade värld, hej. Den andra delen saknas. 

Så det är egentligen allt det är. Detta är en mycket enkel grundläggande HTML-sida. Nu har jag indragen min HTML till vara riktigt nice och organiserade, men jag tror faktiskt inte. Jag skulle kunna göra det ser ganska ful. Och detta skulle fortfarande fungera. Detta skulle vara exakt samma webbsida. Jag har precis blivit kvitt alla blanktecken. 

Som det visar sig, är blank uppgifter. Och så när vi skickar data från avsändare till mottagare, från server till kund kostar uppgifter pengar. Och så bli av blank är faktiskt en bra idé om du är någon som tjänar upp en hel del webbinnehåll. Det är en dålig idé om du är någon som är att lära sig det här och du vill ha det välorganiserade. Detta är mycket lättare att tolka än detta. Men det är funktionellt identiska. 

Fördjupningen och sånt egentligen inte roll i HTML. Allt som räknas är öppna taggar och stänga taggar i rätt ordning. Lägg märke till vad som hände här, men. Den uppmärkning ger oss ett sätt att kommunicera till extra information om vad vi har skrivit. Hello, World del var tolkas som titeln. Och världen, var hej del tolkas som innehållet eller vad som borde vara synlig på min webbsida. 

Det finns över 100 av dessa olika taggar och massor av stora resurser nätet för att hitta dem. Vi kommer att tala om en några av dem i den här videon, vissa av de riktigt grundläggande grejer. Men vi tänker inte prata om det hela eftersom det skulle vara uttömmande att göra det. 

En annan sak du kan göra, men, är öppna utvecklingsverktyg. Och om du minns från vår video på HTTP, Jag förklarade hur man öppnar upp utvecklarverktyg. I Chrome är det oftast F12 att öppna upp utvecklaren verktygsfältet. Då istället för att välja nätverket fliken kan du välja fliken Elements. Och om du laddar en webbsida sida, kommer du faktiskt se HTML som skapar den webbsidan. Och så att du kan lära dig mycket om HTML genom att titta på dina favoritwebbplatser och se hur de bygger olika delar av dem som du vill. Så kanske det är denna coola mönster eller nåt sånt. Hur gör de det med HTML? Tja du kan bara öppna upp din utvecklare verktyg och sväva över det elementet och se exakt vad HTML gör det. Så det är en riktigt bra sätt att lära sig HTML, och jag rekommenderar starkt att du gör det både att lära sig HTML och även att lära sig lite lite om några av alternativen tillgängliga för dig i utvecklingsverktyg, som kommer säkert komma väl till pass som du börjar göra mer intensiv webben programmering. 

Så låt oss ta en titt på en par vanliga HTML-taggar. Och vi kommer att hoppa och ta en titt på vad dessa taggar kommer också att göra som genom att titta på några filer i min IDE. Så här är tre mycket grundläggande taggar för tweaking det visuella utseendet på text. Det finns B taggar, jag taggar, och U-taggar. Respektive vad de gör är gör texten mellan dem i fetstil, kursiv och understrykning. Så låt oss se vad det skulle se som på en verklig webbsida i min IDE. 

Så här i min IDE har jag fil som heter BIU dot HTML. BIU dot HTML bara vara fet, kursiv, understrykning. Jag ska öppna den. 

Och vi ser att här jag har den här texten är B taggar fet. Denna text är jag taggar kursiv. Och den här texten är U-taggar strukna. Vad detta kommer att se ut? Bra igen, har allt jag att göra är att gå hit min webbläsare, min fil webbläsare, klickar Förhandsgranska och detta är vad som kommer upp. 

Texten i mellan B taggar är verkligen nu fetstil. Texten i mellan I taggar är verkligen nu kursiv. Och texten i mellan U taggar är verkligen nu understruken. Så det är ganska bra. Vi vet nu hur man gör text ser lite mer fantasi eller rita tonvikt på vissa saker. Ytterligare ett par vanliga taggar här är punkt taggar, P, och header taggar, som jag har framfört här som HX. 

Dessa P-taggar, dessa punkt taggar, bryta din text upp i stycken. Det räcker inte att bara trycka Enter och lämna utrymmen eftersom en dator är bara att att göra vad du säger den att göra och det ignorerar vit utrymme för det mesta. Så vi kan inte bara trycka Enter och förväntar oss att vår dator tolka att vi vill att starta ett nytt stycke. Vi måste mycket tydligt säga detta är en paragraph-- detta är another-- genom att innesluta var och en i en uppsättning av p-taggar. 

Och vi har också dessa alternativ för H taggar, dessa header taggar. Vi har sex olika nivåer av rubriker, en, två, tre, fyra, fem, och sex, vilka är successivt större och större rubriker. Och de får mindre och mindre och mindre och mindre. Så vi har en toppnivå rubrik, en andra nivå huvudet, och så vidare, och så vidare. 

Låt oss ta en titt på kanske några P-taggar och vissa header taggar i aktion på en webbsida. Så här i min IDE Jag har en fil som heter PH dot HTML, PH är punkterna och header taggar. Öppna upp det. Det är en hel del som pågår här eftersom jag har lagt lite lorem ipsum, vissa bara slumpmässig text här. Så jag ska zooma ut lite eftersom det finns så mycket som pågår. Men märker att jag har åtmin top här jag har en H1, en nivå ett, sidhuvudtagg. Då jag har ett stycke, som är bara ett gäng slump text-- lorem ipsum-- bara standard standard fylla i text. Så jag har två stycken inne i det nivå en rubrik och sedan ned under jag har en nivå två rubrik här på ledningen 24, en andra nivå rubrik, och ytterligare två stycken. Tja vad gör detta ser ut Om jag ser det i min förhandsvisning? Låt oss se. 

Så märker att grundnivå header här är faktiskt ganska lite större än den andra nivån huvudet. Så vi använde H1 taggar. Och märker att P-taggar tillåter oss att bryta saker i stycken. Om vi ​​hade blivit av med dessa P-taggar och faktiskt bara sätta Öppnar eller returer mellan vad vi hoppades skulle vara olika punkterna, De skulle alla bara slam tillsammans och Det skulle inte ha denna trevliga punkt separation med utrymme ovanför och nedanför. Och så det är vad punkt taggar och header taggar används ofta för att göra för att dra uppmärksamhet till delar av vår hemsida på det sättet. 

Nästa upp är vissa taggar som vi använder att skapa listor på vår hemsida. Så vi har oordnad lists-- ULs-- som är precis punktlistor, beställda Listan som är numbered-- OLs-- och insida i antingen en av dem måste vi ha uppsättningar av hur man indikera listobjekt, LI. Och så har vi öppet UL tagg och vi lägger föremål inne i den. Och sedan när vi är klara med det kan vi stänga UL taggen. 

Och på samma sätt kan vi ha en ordnad eller numrerad lista och sätta listobjekt inuti det. Så låt oss ta en titt på ett par listor och vad de skulle render som På CS50 IDE. Så jag har här i min IDE en fil som heter listor dot HTML. Låt oss ta en titt. 

Och meddelande här jag har en oordnad lista med fem saker i den. Och så har jag en ordnad lista, och Jag har ändrat taggen lite, höger? Jag har sagt start lika med sex. Det visar sig med en ordnad lista I kan ställa in startpunkten varhelst Jag want-- som standard blir det en-- genom att bara lägga denna så kallade attribut till min OL tag. Och så den här listan kommer börja räkna på sex. Så de delar av denna numrerad lista bör vara sex, sju, åtta, nio, tio, eftersom det finns fem element i listan, i motsats till en, två, tre, fyra, fem, vilka skulle vara fallet om jag hade sagt OL utan att ange startattribut. 

Så vi ska bara förhandsgranska detta så att du kan få en känsla för vad som händer här. Och det går vi. Det är min lista. De första fem elementen är oordnade eller punktlistor. Och de kommande fem elementen är en separat ordnad lista utgående från sex. Så det är hur vi kan skapa listor med HTML. En annan sak som du kanske vill göra med HTML är att bygga en tabell över information av rader och kolumner att presentera information på ett särskilt organiserad sätt. För att göra detta med HTML vi kan ha en tabelldefinition som börjar öppna fästet tabell. Och sedan inne i samma tabell vi kan ha en uppsättning av rader, TR-taggar för att indikera varje rad. Och sedan TD taggar gå inne i TR-taggar för att ange en kolumn i en rad. 

Varför kallas det TD och inte TC? Tja, TD står för tabelldata. Vanligtvis är du sätter dina uppgifter där. Så det är därför det är TD och inte TC. Det är lite förvirrande. 

Så du har bords taggar och insidan av bords taggar du har ett antal rader, TR. Och inne varje rad du har TDS för antalet kolumner som du vill ha i just den raden. Låt oss ta en titt på en mycket enkel tabell över i CS50 IDE. 

Så jag har här en fil kallas bord dot HTML. Låt oss ta en titt på vad det ser ut. Det är en hel del som pågår här, men om du märker jag har en tabell öppen. Jag börjar definitionen med bord. Och sedan i min första raden jag tydligen har fyra kolumner, en, två, tre, fyra. Och sedan är jag klar med den raden. 

Då ska jag börja en annan rad och gör två, fyra, sex, åtta. Avsluta den raden. Gör en annan rad, tre, sex, nio, tolv. Och sedan en sista raden, fyra, åtta, 12, och även om det är lite avskuren här, 16. 

Jag avslutade den raden. Jag avslutade bordet. Och sedan är jag klar med min HTML. Vad betyder det här ut som? Tja, det är egentligen inte mycket att se. Jag har tydligt organiserat min information på ett något mer organiserat sätt. Men det är inte super ganska här. Och vi kommer att ta itu med att när vi talar om CSS. Vi kommer att återkomma denna idé om vad vi gör för att göra en table-- kanske formatera det lite bättre? Men jag har fortfarande fyra rader, vart och ett har fyra kolumner, och verkligen vad detta innebär är en mycket enkel fyra av fyra multiplikation tabell. 

Bara några fler taggar vi pratar om. Låt oss tala om Begreppet ett HTML-formulär. Så du kan ha sett detta i samband med att logga in på en webbsida. Vanligtvis du skriver in ditt användarnamn. Du skriver i ditt lösenord och du är bra att gå. Det skulle vara början på en blankett. 

Hoppa över huvudgrupp en andra. Vi har också ingångar som typ av plats i olika former. Dessa är de faktorer som du faktiskt skriver in, eller radioknapparna du tickar, eller kontrollen rutor som du tickar av. Så dessa gå in former. Och de innefattar i grund och botten varje rad i formuläret Om formuläret formateras väl. Sedan finns det begreppet en div, som egentligen inte passar i en viss kategori taggar som de som jag har gjort tidigare. Det bara sorts avgränsar den i början av en godtycklig division-- div-- på sidan. Det finns ingen visuell paus. Det finns ingen linje. Det är inte iväg som en separat bit automatiskt. Du skulle behöva styla det det sätt att göra det. 

Det säger att jag vill ha en rättvis sorts bit utrymme på min hemsida, och jag ska bara ringa det denna uppdelning av min sida. Vi kan lägga saker inuti av Divar, och i själva verket, när vi går över till IDE i en andra, vi ska se att jag sätter min bildas inuti en div. 

Så jag har här i min IDE en fil som heter div formuläret dot HTML. Låt oss öppna den. Lägg märke till att som jag sa, div är typ av godtycklig. Höger? Det spelar ingen betyder någonting. Så jag har en godtycklig första divisionen av min sida. Och sedan i stället för en annan div senare, med början på rad åtta, Jag har denna form. Och insidan av formen I har en antalet ingångar, fälten i formuläret. Så jag har ett fält, vars namn är A-- som egentligen inte betyder något rätt now-- som tydligen tar text, en annan som tar ett lösenord, en annan som är en radio knappen, en annan som är en kryssruta, och en annan som är en Skicka-knapp. Nå, vad gör detta alla egentligen ser ut? Nåväl, låt oss ta en titt. Vi ska öppna upp det i vår förhandsgranskningsfönstret. Lägg märke till att detta godtyckliga första division-- finns ingen visuell separation här. Det har inte riktigt göra någonting, rätt? 

Och då jag har min form. Och jag har inte gjort någon särskild formatering. Så formen är bara en stor rad av information. Om jag hade formaterat min formen annorlunda, Jag kanske har den rad för rad för rad. Men jag gjorde inte någon styling. Återigen, vi talar inte om CSS här. Vi pratar bara om HTML. 

Väl i min textform jag kan Motortyp- kom ihåg att olika former av typen text så jag kan sätta mitt namn. Och i mitt lösenord Jag kan skriva mitt lösenord. Och eftersom detta område är av typen lösenord du vet inte vad mitt lösenord är. Det är alla punkter. 

Jag kan också välja att bocka av en alternativknappen eller pricka av en kryssruta. Eller jag kunde skicka min form. Och jag har inte gjort något, så när jag in min form sidan uppdateras bara. Men jag kunde kanske konfigurera min Skicka-knappen för att göra något annat. Och vi får se vad vi kan göra med att i en framtida video på PHP. Men det bygger ett mycket enkel form som vi kan använda för att få användare interagerar och lämna uppgifter till vår hemsida. 

En sista kommentar innan vi gå vidare till några andra taggar är att ta en titt på detta input tag en gång. Lägg märke till att jag har markerat ändarna av etiketten i rött. Varannan tag vi har sett hittills har hade en början och ett slut, en öppning tagg och en sluttagg. 

Men en inmatningstagg inte. Det finns ingen text som går i mellan inmatnings taggar. All information vi har för avsikt att förmedla binds upp som en del av attribut av den ingången. Lägg märke till att vi har input Namnet är x. Typ lika y. Det är verkligen alla information vi behöver. 

Detta kallas för en självstängande tagg. Det kräver inte en öppning och en nära eftersom all information finns inuti den taggen och dess attribut. Så ibland ser du detta också. Så bara vara medvetna om att om du har en tagg som är helt fristående, öppnar och stänger sig med den öppenvinkelfästet på vänster och snedstreck vinkeln konsol till höger. Vi får se ytterligare en av dem just nu med bildtaggar samt. 

Innan vi talar om bilder, vi behöver prata om hyperlänkar. Om vi ​​vill att vår webbsida för att vara interaktiv och flytta oss runt, det skulle vara trevligt att kunna att klicka på en av dem vad som vanligtvis varit en blå länken. Detta är faktiskt hur vi bygger en hyperlänk i vår hemsida. Och intressant nog det finns en annan HTML-tagg kallas länk, som inte är en hyperlänk. En här står för ankare, och det är hur vi anger en hyperlänk. 

En href lika x medel går till webbsida X. Och allt mellan det öppna En tagg och nära En tagg är vad som kommer att vara att underströk blå text som ser ut som en länk att vi är bekant med. Nedan att vi har en bild-tagg, som är en självstängande tagg för att visa en bild som finns på X. Och du kanske kan ändra den bilden genom att specificera bredd och höjd och andra attribut i att dot dot dot där. 

Längst ner här Vi har en mycket intressant ser tagg som inte ha en sluttagg. Det är utropstecken doctype HTML. Så HTML har funnits sedan tidiga 1990-talet för att bygga webbsidor, och det har gått genomgått flera revideringar sedan dess. Senast 2014 Det genomgick en översyn kallas HTML5 som nu är aktuell sorts de facto HTML-standarden. 

För att visa att vår webb sidor skrivs med HTML5, Detta är hur vi börjar. Det kan utelämnas men vad det i grund och botten hjälp är att du inte kan använda någon av taggarna som är HTML5 taggar, dessa nya taggar. Så vi alltid börja Om vi ​​använder HTML5. Och alla taggar vi har pratat om tidigare inte HTML5 taggar. Men detta skulle indikera att HTML5-taggar kommer att vara närvarande. Och så har vi utrop doctype HTML, som är i början av vår HTML-fil, och sedan efter den punkten vi faktiskt har vår HTML öppen tagga och fortsätt därifrån. 

Den sista är en kommentar tagg som ser något annorlunda också. Det börjar med vinkeln fäste utrops streck streck men ingen stängning fäste. Mellan dessa två element där är där du skriver dina kommentarer. Och låt oss ta en titt på bilderna och kommentarer och länkar i CS50 IDE. 

Så jag har här en fil som heter bildlänk dot HTML som jag kommer att öppna upp. Och märker jag har ett par säger här i min HTML-kommentarer. Så precis som i C och andra programmeringsspråk, HTML bara genom att vara en markup language har förmågan att ha en kommentar. Och så jag uppenbarligen kommer att Placera en bild av Rick Astley någonstans mellan denna div tagg, detta godtyckliga divisionen. Tydligen filen är beläget vid Rick dot JPEG, som Om vi ​​går tillbaka över till min filträdet för en sekund, är en fil som finns i den aktuella katalogen. Så det är OK. Jag kan referera till den. 

Då kan jag ha interna länkar. Så märker på rad 11 här min href är hello dot HTML. Så att bara refererar till hello dot HTML som finns i den aktuella katalogen. Och jag kan också ha extern länkar genom att bara ange HTTPS för att indikera att jag inte talar om en fil i min nuvarande katalog. Jag talar om en fil som finns någonstans på internet, som jag har att begära hjälp av HTTP-protokollet. 

Så låt oss ta en titt på vad denna sida kan se ut och gör dig redo för en bild av Rick Astley att visa upp på din skärm. Så jag ska förhandsgranska. Det finns Rick Astley på högst upp i denna godtyckliga division Jag satte den på toppen. Och sedan ner under I har mina länkar, eller hur? 

Jag har en länk till hello dot HTML. Och om jag klickar det, jag får flyttas över till den här sidan att vi är väl förtrogen med från alldeles i början av vårt program. Om jag dyker den sidan öppen igen, om jag pop bildlänk öppna en gång, Jag kan också gå externt till CS50: s webbplats. Och där vi see-- jag ska zooma ut lite här-- vi får se CS50 hemsida sorts inbäddade i mitten av vår sida. Så jag kunde göra en intern länkar samt en extern länk. 

Den sista regeln med HTML som vi kommer att tala om här är att HTML ska välformade. I C pratade vi mycket om olika syntax saker. I HTML syntax verkligen kretsar kring etiketter. Varje tagg du öppnar måste stängas. Och i själva verket varje tagg du öppnar bör stängas i omvänd ordning. 

Så om du öppnar ett djärvt tagg, en kursiv tag, och sedan en understrykning tagg att göra alla tre till en särskild uppsättning av text, Du bör stänga dem i omvänd ordning. Så om du öppnat fet, kursiv, understruken, du vill stänga understrykning, kursiv, fet. Denna typ av inkapsling är vad håller HTML trevlig och organiserade. 

Till skillnad från C, men syntaxfel kommer inte faktiskt krympling HTML möjligen. Din HTML kanske inte väl bildas men skulle ändå fungera. Och så dessa fel kan sortera glid av. Det är upp till dig att verkligen vara vaksamma. Ibland kommer att misslyckas, men ibland kan du komma undan med det. 

Det kan vara en riktigt svår uppgift, fast, att hålla reda på när du öppnade en tagg, när du stängde det, särskilt som HTML filer blir större och större. Du kommer att ha lite hjälp. Och det är online validator verktyg som du kan använda för att ta en titt på din webbsida sida och se om det är Välformad HTML. Och du bör definitivt ta en titt på dem och börja använda dem som du börja göra en del arbete med HTML, skriver HTML, bara så att du får några goda vanor om att organisera HTML på ett bra sätt och god stil och se att du inte gör något som skulle kunna skapa ett syntaxfel som skulle leda till att du en bit av ett problem på vägen. 

Jag är Doug Lloyd. Detta är CS50.