DOUG LLOYD: Så vi har brukt om-- hvis min matte er riktig, og jeg tror ser back-- jeg tror vi brukte ca 35 videoer snakker om ulike aspekter av C, kanskje litt mer, kanskje litt mindre. Og vi fikk ikke dekke alt i C, men vi dekket en stor del av den språk, det store flertallet av det, sikkert for vanlige bruker. Nå skal vi snakke om et annet språk, HTML. Og vi kommer til å dekke det i løpet av bare én video. 

Men det kommer til å være OK. Det kommer til å faktisk bli noe du kommer til å bli vant til. Nå som du har grunnleggende av ett språk, det er faktisk ganske lett å begynne å lære andre. Så vi kommer til å starte å gå litt tilbake og glatte over de grunnleggende Forskjellene mellom disse språkene og liksom la deg til det. Det finnes en rekke virkelig gode ressurser på Internett, som vi kommer til å begynne å henvise deg mot fordi internett er et stort lager av informasjon. Og så det er ikke som du vil være gjekk ut nødvendigvis ved ikke å ha den informasjonen dekket i en video. Du vil fortsatt kunne få alt du trenger og bruk den kunnskapen du allerede har bygget opp ved å forstå C for å gjøre læringskurven for disse andre språk faktisk mye flatere. Jeg lover. 

Men la oss snakke om ett språk det er egentlig grunnleggende for alle web siden som er HTML. HTML er Hyper Text Markup Language. HTML er et språk, men det er ikke et programmeringsspråk. 

HTML har ikke variabler. Det trenger ikke logikk eller funksjoner eller noe sånt. Vi kan ikke gjøre noe programmering per se i HTML. Noen ganger vil du høre folk beskriver seg selv som HTML-programmerere, som er ikke helt nøyaktig. Vi kan ikke skrive HTML-programmer. 

HTML er bare brukt til å markere tekst. Det kalles et kodespråk. Og hva dette does-- dette markup-- vi bruker koder i HTML og disse tags-- dette markup-- semantisk definerer strukturen for en side og fører til at ren tekst som eksisterer mellom kodene skal tolkes av nettlesere på ulike måter. Og kanskje det er best å forklare dette ved hjelp av en illustrasjon. 

Her er en veldig enkel HTML-side, ikke en HTML-program, igjen, en HTML-side. Og vi vet at det er en HTML-side fordi vi har avgrenset alt med HTML-koder. Så dette er hva en HTML-kode ser ut. Det er mellom vinkelparenteser. Og legg merke til på toppen vi har HTML og helt nederst, etter at vi har gjort det som er tilsynelatende mye annet HTML, vi har vinkelfeste slash HTML. Så den slags er grensen mellom hva som er HTML og hva som ikke. Og selvfølgelig, konvensjonelt, bare som du skrev alle dine C-programmer med dot C utvidelser, alle HTML-filer vil ende med punkt HTML utvidelser. Men det er mer å gå på her. Vi trenger ikke bare disse HTML-koder. Vi tilsynelatende har dette ting som kalles et hode tag. Vel, OK, hva er det? 

Vel kanskje det er best å skille ved hjelp av et organ, Kroppen blir innholdet på nettsiden. Så kanskje hodet tag definerer ting som ikke er i nettleservinduet riktig, men er liksom viktig for vår nettside blir gjort på riktig måte. For eksempel, på innsiden av head tag vi har titler. 

Så tittelen er hello world, som faktisk kommer til å være det dukker opp i den kategorien i Chrome eller i safari eller Firefox-- uansett nettleser du prefer-- det er hva som kommer til å dukke opp i tittelen. Og før tabs ville det vise seg opp i hele nettleservinduet og du kan bare ha én side åpnes i et nettleservindu om gangen. Så det kommer til å bli den Tittelen på min side opp i kategorien eller nettleservinduet bar, hallo verden. Og da innholdet i min nettside vil være verden, hallo. Så la oss ta en titt på hva noen ting som dette kan se ut. Dette er en ganske enkel HTML-side. Så jeg er her i min CS50 IDE og Jeg har zoomet inn litt. Og jeg skal bare åpne opp hallo dot HTML og vise deg at dette er ganske mye innholdet på siden som vi har sett før. Mine enkle HTML, head-koder, title tags, body, og så videre. Jeg har rykket inn for å være ren. 

Og hva jeg kan gjøre i min IDE er bare forhåndsvise siden. Og der vi går. Innholdet på siden min er verden, hei, og jeg ser ikke noe fra hodet kodene der. Det er bare innholdet av kroppen. Verden, hallo. Og igjen kroppen bare sa, verden, hallo. Den andre delen er savnet. 

Så det er egentlig alt det er. Dette er en veldig enkel grunnleggende HTML-side. Nå har jeg rykket mitt HTML til være veldig hyggelig og organisert, men jeg faktisk ikke må. Jeg kunne gjøre det ser ganske stygt. Og dette vil fortsatt fungere. Dette ville være nøyaktig samme nettside. Jeg har nettopp blitt kvitt all white space. 

Som det viser seg, er tomrom data. Og så når vi sender data fra avsender til mottaker, fra server til klienten, data koster penger. Og så bli kvitt mellomrom er faktisk en god idé hvis du er noen som tjener opp mye av web-innhold. Det er en dårlig idé hvis du er noen som er å lære dette ting og du vil ha det pent organisert. Dette er mye lettere å analysere enn dette. Men det er funksjonelt identiske. 

Innrykk og sånt faktisk ikke saken i HTML. Alt som teller er åpne koder og lukking tags i riktig rekkefølge. Legg merke til hva som skjedde her, skjønt. Markup gir oss en måte å kommunisere ekstra informasjon om hva vi har skrevet. The Hello, World del var tolket som tittel. Og verden, hallo del var tolket som innholdet eller hva som bør være synlig på nettsiden min. 

Det finnes over 100 av disse forskjellige tags og massevis av flotte ressurser på nettet for å finne dem. Vi kommer til å snakke om en noen av dem i denne videoen, noen av de virkelig grunnleggende ting. Men vi skal ikke snakke om det hele, fordi det ville være uttømmende for å gjøre dette. 

En annen ting du kan gjøre, skjønt, er åpne utviklerverktøy. Og hvis du husker fra vår video på HTTP, Jeg forklarte hvordan du åpner opp utviklerverktøy. I Chrome er det vanligvis F12-tasten å åpne opp utvikleren verktøylinjen. Så i stedet for å velge Network fanen kan du velge fanen Elements. Og hvis du laster inn en nettside side, vil du faktisk se HTML som skaper denne websiden. Og så kan du lære mye om HTML ved å se på dine favoritt nettsteder og se hvordan de bygger ulike delene av dem som du liker. Så kanskje det er denne kule mønster eller noe sånt. Hvordan de gjør det med HTML do? Vel du kan bare åpne opp utvikleren verktøy og sveve over det elementet og se nøyaktig hva som HTML gjør det. Så det er en veldig god måte å lære HTML, og jeg anbefaler sterkt at du gjør det både for å lære HTML og også å lære litt litt om noen av alternativene tilgjengelig for deg i utviklerverktøy, som vil sikkert komme godt med som du begynner å gjøre mer intensiv web programmering. 

Så la oss ta en titt på en par vanlige HTML-koder. Og vi vil hoppe og ta en titt på hva disse kodene vil også gjengi som ved å se på noen filer i min IDE. Så her er tre svært grunnleggende koder for tweaking det visuelle inntrykket av teksten. Det er B-koder, jeg koder og U-koder. Og henholdsvis det de gjør er gjengi teksten mellom dem i fet skrift, kursiv og understreking. Så la oss se hva som ville se som på en faktisk nettside i min IDE. 

Så her i min IDE har jeg en fil som heter BIU dot HTML. BIU dot HTML bare å være fet, kursiv, understreking. Jeg skal åpne den opp. 

Og vi vil se at her jeg har denne teksten er B-koder fet. Denne teksten er jeg tags kursiv. Og denne teksten er U-koder understreket. Hva er dette kommer til å se ut? Vel igjen, har alt jeg å gjøre er å gå over her til nettleseren min, min filbehandler, klikk Preview, og dette er hva som kommer opp. 

Teksten i mellom B tags er faktisk nå dristig. Teksten i mellom I tags er faktisk nå kursiv. Og teksten på mellom U tags er faktisk nå understreket. Så det er ganske bra. Vi vet nå hvordan å lage tekst ser litt mer fancy eller trekke vekt på visse ting. Et annet par vanlige tags her er ledd koder, P, og header koder, som jeg har gjengitt her som HX. 

Disse P-koder, disse ledd koder, bryte teksten opp i avsnitt. Det er ikke nok å bare trykk Enter og la mellomrom, fordi en datamaskin er bare kommer å gjøre det du ber den om og det ignorerer hvit plass til det meste. Så vi kan ikke bare trykke Enter og forventer vår datamaskin å tolke at vi ønsker for å starte et nytt avsnitt. Vi må veldig eksplisitt si dette er en paragraph-- dette er another-- ved å kapsle hver i et sett av P-koder. 

Og vi har også disse opsjonene for H koder, disse overskriften koder. Vi har seks forskjellige nivåer overskrifter, en, to, tre, fire, fem og seks, som er progressivt større og større overskrifter. Og de får mindre og mindre og mindre og mindre. Så vi har et toppnivå header, en andre nivå header, og så videre, og så videre. 

La oss ta en titt på kanskje noen P-koder og noen header koder i aksjon på en nettside. Så her i min IDE har jeg en fil som heter PH dot HTML, PH være avsnitt og header koder. Åpne den opp. Det er mye som skjer her fordi jeg har satt noen lorem ipsum, noen bare tilfeldig tekst i her. Så jeg skal zoome ut litt fordi det er så mye som skjer. Men legg merke til at jeg har helt toppen her har jeg en H1, et nivå én, header tag. Da har jeg et avsnitt, som er like en haug med tilfeldig text-- lorem ipsum-- bare standard standard fylling i teksten. Så jeg har to avsnittene innsiden av det nivå en header og deretter ned nedenfor jeg ha et nivå to header her på linje 24, et andre nivå header, og en annen to avsnitt. Vel hva ser dette ut hvis jeg kunne se i forhåndsvisning min? La oss se. 

Så merker at første nivå header her er faktisk ganske mye større enn det andre nivået spissen. Så vi brukte H1 tagger. Og legg merke til at P-koder tillate oss å bryte ut ting i avsnitt. Hvis vi hadde blitt kvitt disse P-koder og faktisk bare sette Går eller retur i mellom hva vi håpet ville være de ulike punktene, de ville alle bare smelle sammen og det ikke ville ha denne fine avsnitt separasjon med plass over og under. Og så det er hva avsnitt koder og header koder blir ofte brukt til å gjøre for å trekke oppmerksomhet til deler av vår nettside på den måten. 

Neste opp er noen koder som vi bruker å bygge lister på vår nettside. Så vi har uordnet lists-- ULs-- som er bare punktlister, bestilt Listen som er numbered-- OLs-- og innsiden av enten en av dem må vi ha sett på hvordan man kan indikere listeelementer, LI. Og så har vi åpent UL tag og vi legger elementer inne i den. Og så når vi er ferdige med det, kan vi lukke UL tag. 

Og på samme måte kan vi ha en ordnet eller nummerert liste og sette listeelementer innsiden av det. Så la oss ta en titt på et par lister og hva de ville gjengi som på CS50 IDE. Så jeg har her i min IDE en fil som heter lister dot HTML. La oss ta en titt. 

Og legg merke til her jeg har en uordnet liste med fem ting i den. Og så har jeg en sortert liste, og Jeg har endret koden litt, ikke sant? Jeg har sagt start tilsvarer seks. Det viser seg med en sortert liste jeg kan sette startpunktet hvor Jeg want-- som standard vil det være one-- ved å bare legge denne såkalte attributt til min OL tag. Og så denne listen vil begynne å telle på seks. Så elementene som nummerert liste bør være seks, syv, åtte, ni, ti, fordi det er fem elementer i listen, i motsetning til en, to, tre, fire, fem, noe ville være tilfelle hvis jeg hadde sagt OL uten å spesifisere starten attributtet. 

Så vi får bare forhåndsvise dette slik at du kan få en følelse for hva som skjer her. Og der vi går. Det er min liste. De fem første elementene er sorterte eller punktlister. Og de neste fem elementene er en egen ordnet liste fra seks. Så det er hvordan vi kan bygge lister ved hjelp av HTML. En annen ting du kanskje ønsker å gjøre med HTML er å bygge en tabell over informasjon rader og kolonner å presentere informasjon i en spesielt organisert måte. For å gjøre dette med HTML vi kan ha en tabelldefinisjonen begynner åpen brakett tabell. Og så innsiden av det bordet vi kan ha et sett med rader, TR tags å indikere hver rad. Og så TD tags gå på innsiden av TR tags for å angi en kolonne i en rad. 

Hvorfor heter det TD og ikke TC? Vel, står TD for tabelldata. Vanligvis du setter din informasjon der. Så det er derfor det er TD og ikke TC. Det er litt forvirrende. 

Så du har tabellkoder og innsiden av tabellkoder du har et antall rader, TR. Og inne i hver rad du har TDS for antall kolonner at du vil ha i den aktuelle rad. La oss ta en titt på en svært enkel tabell over i CS50 IDE. 

Så jeg har her en fil kalt bord dot HTML. La oss ta en titt på hva som ser ut som. Det er mye som skjer her, men hvis du merker jeg har en tabell åpen. Jeg begynner definisjonen med bord. Og så i min første rad jeg tydeligvis har fire kolonner, en, to, tre, fire. Og så er jeg ferdig med den raden. 

Da starter jeg en annen rad og gjøre to, fire, seks, åtte. Fullfør den raden. Har en annen rad, tre, seks, ni, 12. Og så en siste rad, fire, åtte, 12, og selv om det er litt avskåret her, 16. 

Jeg er ferdig som rad. Jeg er ferdig bordet. Og så er jeg ferdig med min HTML. Hvordan ser dette ut? Vel, det er ikke veldig mye å se. Jeg har helt klart organisert min informasjon i en noe mer organisert måte. Men det er ikke super pen her. Og vi kommer til å forholde seg til at når vi snakker om CSS. Vi vil se denne ideen om hva vi gjør for å gjøre a tabell kanskje formatere det litt bedre? Men jeg har fortsatt fire rader, som hver har fire kolonner, og egentlig hva dette utgjør er en veldig enkel fire av fire multiplikasjon tabell. 

Bare noen få flere tags vi skal snakke om. La oss snakke om det Konseptet med et HTML-skjema. Så du kan ha sett dette i sammenheng med å logge inn på en nettside. Vanligvis du skrive inn brukernavnet ditt. Du skriver inn passordet, og du er flink til å gå. Det ville være begynnelsen på et skjema. 

Hoppe over div et sekund. Vi har også innganger hvilke slags passe innsiden av skjemaer. Dette er elementer som du faktisk skriver inn, eller radioknappene du er tikker, eller sjekk bokser som du tikker av. Så disse gå på innsiden av skjemaer. Og de utgjør i utgangspunktet hver rad i form hvis formen er formatert godt. Så er det dette begrepet en div, som ikke egentlig passe en bestemt kategori i av tagger som de jeg har gjort tidligere. Det bare liksom avgrenser begynnelsen av en oppkonstruert division-- div-- på siden. Det er ingen visuell pause. Det er ingen linje. Det er ikke satt av som en separat del automatisk. Du må style det på den måten å gjøre det. 

Den sier bare liksom jeg vil ha en stykke plass på min nettside, og jeg bare kommer til å kalle det denne divisjonen på siden min. Vi kan sette ting inni av divs, og faktisk, når vi hodet over til IDE i et sekund, vil vi ser at jeg setter min danner innsiden av en div. 

Så jeg har her i min IDE en fil kalt div skjema dot HTML. La oss åpne den opp. Legg merke til at som jeg sa, div er slags vilkårlig. Høyre? Det gjør egentlig ikke betyr noe. Så jeg har en vilkårlig første divisjon på siden min. Og så i stedet for en annen div senere, starter på linje åtte, Jeg har denne formen. Og inne på formen jeg har en antall innganger, feltene i skjemaet. Så jeg har et felt som heter A-- som egentlig ikke betyr noe rett now-- som tilsynelatende tar tekst, en annen som tar et passord, en annen som er en Radio knapp, en annen som er en avmerkingsboks, og en annen som er en Send-knappen. Vel, hva betyr dette alt faktisk ser ut? Vel, la oss ta en titt. Vi vil åpne den opp i forhåndsvisning vinduet vårt. Legg merke til at dette vilkårlig første division-- det er ingen visuell separasjon her. Det gjorde egentlig ikke gjøre noe, ikke sant? 

Og så har jeg min form. Og jeg gjorde ikke noen spesiell formatering. Så formen er bare ett store raden av informasjon. Hvis jeg hadde formatert formen min annerledes, Jeg kan ha det linje for linje for linje. Men jeg gjorde ikke noe styling. Igjen, vi snakker ikke om CSS her. Vi snakker bare om HTML. 

Vel i min tekstform kan jeg type-- husk at former typen tekst så jeg kan sette navnet mitt. Og i passordet mitt jeg kan skrive passordet mitt. Og fordi det feltet er av typen passord, du vet ikke hva passordet mitt er. Det er alle punkter. 

Jeg kan også velge å krysse av en alternativknappen eller krysse av i en avkrysningsboks. Eller jeg kunne sende inn skjemaet. Og jeg gjorde ikke noe, så når jeg sender min form, siden oppdateres. Men jeg kunne kanskje konfigurere min Send-knappen for å gjøre noe annet. Og vi får se hva vi kan gjøre med at i en fremtidig video på PHP. Men dette bygger en veldig enkelt skjema som vi kan bruke til å ha brukere kommuniserer og sende inn informasjon til vår hjemmeside. 

En siste kommentar før vi gå videre til noen andre koder er å ta en titt på denne inngang tag en gang til. Legg merke til at jeg har fremhevet endene av tag i rødt. Annenhver tag vi har sett så langt har hadde en begynnelse og en ende, en åpning tag og en avsluttende koden. 

Men en inngang tag ikke. Det er ingen tekst som går i mellom inngangs koder. All informasjonen vi har tenkt å formidle er forbundet som en del av attributter av at innspill. Merker vi ha innspill navn lik x. Type er lik y. Det er egentlig alt informasjonen vi trenger. 

Dette kalles en selvlukkende tag. Det krever ikke en åpning og en lukke fordi all informasjon finnes inne i tag og dets attributter. Så noen ganger vil du se dette også. Så bare vær oppmerksom på at hvis du har en tag som er helt selvforsynt, den åpner og lukker seg med den åpne vinkel braketten til venstre og skråstreken vinkel braketten til høyre. Vi får se en annen av de akkurat nå med bilde koder også. 

Før vi snakker om bilder, vi trenger å snakke om hyperkoblinger. Hvis vi ønsker vår nettside for å være interaktiv og bevege oss rundt, det ville være hyggelig å kunne til å klikke på en av disse hva har typisk vært en blå link. Dette er faktisk hvordan vi bygger en hyperkobling i vår nettside. Og interessant nok det er en annen HTML-koden kalt link, som ikke er en hyperkobling. En her står for anker, og det er hvordan vi viser en hyperkobling. 

A href lik x del gå til nettside X. Og alt mellom den åpne A tag og den nære En kode er hva som kommer til å være at understreket blå tekst som ser ut som en link at vi er kjent med. Nedenfor at vi har en bildekode, som er en selvlukkende tag for visning et bilde som ligger på X. Og du kan være i stand til å endre det bildet ved å angi bredde og høyde og andre attributter i at dot dot dot der. 

Helt nederst her vi har en veldig interessant ser tag som ikke har en avsluttende koden. Det er utropstegn DOCTYPE HTML. Så HTML har eksistert siden begynnelsen av 1990 for å bygge websider, og det har gått gjennomgått flere revisjoner siden da. Senest i 2014 det gjennomgikk en revisjon kalles HTML5 som nå er gjeldende slags de facto HTML-standarden. 

For å vise at vår web Sidene er skrevet med HTML5, dette er hvordan vi begynne. Det kan utelates, men hva som i utgangspunktet betyr er at du kan ikke bruke noen av kodene som er HTML5-koder, de nye kodene. Så vi alltid begynne hvis vi bruker HTML5. Og alle kodene vi har snakket om tidligere er ikke HTML5-koder. Men dette skulle tilsi at HTML5-koder vil være til stede. Og så har vi utrops DOCTYPE HTML, som er helt i begynnelsen av vår HTML-fil, og deretter etter at punktet vi faktisk har vår HTML åpen tagge og gå videre derfra. 

Den siste er en kommentar tag, som ser litt annerledes, også. Det starter med vinkel brakett utrops dash dash men ingen avsluttende brakett. I mellom disse to elementene der er der du skrive dine kommentarer. Og la oss ta en titt på bildene og kommentarer og lenker i CS50 IDE. 

Så jeg har her en fil som heter image link dot HTML som jeg kommer til å åpne opp. Og legg merke til jeg har fått et par kommentarer her i mine HTML kommentarer. Så akkurat som i C og andre programmeringsspråk, HTML bare ved å være et kodespråk har muligheten til å ha kommentarer. Og så jeg tilsynelatende kommer til å plassere et bilde av Rick Astley et sted mellom dette div tag, dette vilkårlig divisjon. Tilsynelatende at filen er ligger på Rick dot JPEG, som hvis vi hodet tilbake over til filen min treet for en andre, er en fil som finnes i gjeldende katalog. Så det er OK. Jeg kan referere til den. 

Da kan jeg ha interne lenker. Så oppdager on line 11 her min href er hallo dot HTML. Slik at bare refererer til hei dot HTML som eksisterer i den gjeldende katalogen. Og jeg kan også ha ekstern forbindelser med bare spesifisere HTTPS for å vise at jeg ikke snakker om en fil i min nåværende katalog. Jeg snakker om en fil som eksisterer et sted på internett, som jeg har til å be om hjelp av HTTP-protokollen. 

Så la oss ta en titt på hva denne siden kan se ut og gjør deg klar for et bilde av Rick Astley å dukke opp på skjermen din. Så jeg skal forhåndsvise dette. Det er Rick Astley på Helt øverst i denne vilkårlig divisjonen jeg satte den på toppen. Og deretter ned nedenfor jeg har mine lenker, ikke sant? 

Jeg har en link til hei dot HTML. Og hvis jeg klikker det, får jeg flyttet over til denne siden at vi er godt kjent med fra Helt i begynnelsen av programmet vårt. Hvis jeg pop som siden åpen igjen, hvis jeg pop image link åpne en gang til, Jeg kan også gå eksternt til CS50 hjemmeside. Og der vi see-- jeg skal zoome ut litt her-- vi får se CS50 hjemmeside slags innebygd i midten av vår side. Så var jeg i stand til å gjøre en intern lenker samt en ekstern lenke. 

Den siste regelen med HTML som vi skal snakke om her er at HTML skal være godt utformet. I C snakket vi mye om de ulike syntaksen til ting. I HTML syntaksen virkelig dreier seg om koder. Hver tag du åpner må være lukket. Og faktisk, hver tag du åpner bør lukkes i omvendt rekkefølge. 

Så hvis du åpner en fet tag, en kursiv tag, og deretter en understreking tag å gjøre alle tre til en bestemt sett av tekst, du bør lukke dem i omvendt rekkefølge. Så hvis du åpnet fet, kursiv, understreking, du ønsker å lukke understreking, kursiv, fet. Denne typen innkapsling er hva holder HTML fin og organisert. 

I motsetning til C, men syntaksfeil vil ikke faktisk krøpling HTML muligens. HTML kanskje ikke godt dannet, men vil fortsatt fungere. Og så disse feilene kan sortere på lysbildet ved. Det er opp til deg å virkelig være årvåken. Noen ganger vil de mislykkes, men noen ganger kan du komme unna med det. 

Det kan være en virkelig vanskelig oppgave, men å holde styr på når du åpnet en tag, når du lukket den, spesielt som HTML filene blir større og større. Du vil ha litt hjelp. Og det er online validator verktøy som du kan bruke til å ta en titt på nettsiden din side og se om det er godt formet HTML. Og du bør definitivt ta en titt på de og begynne å bruke dem som du begynne å gjøre noe arbeid med HTML, skrive HTML, bare så du får noen gode vaner om organisering HTML på en god måte og god stil og gjør at at du ikke gjør noe som kunne skape en syntaksfeil som ville føre deg litt et problem nedover veien. 

Jeg er Doug Lloyd. Dette er CS50.