DOUG LLOYD: Så vi har brugt om-- hvis min matematik er rigtigt, Og jeg tror, ​​ser tilbage-- jeg tror Vi tilbragte omkring 35 videoer taler om forskellige aspekter af C, måske lidt mere, måske lidt mindre. Og vi ikke dække alt i C, men vi dækkede en stor del af den sprog, at langt størstedelen af ​​det, i hvert fald for almindelige anvendelser. Nu vil vi tale om et andet sprog, HTML. Og vi kommer til at dække det på blot én video. 

Men der kommer til at være OK. Det kommer til at faktisk blive noget, du kommer til at vænne sig til. Nu hvor du har den grundlæggende elementer i et sprog, det er faktisk ret nemt at begynde at lære andre. Så vi kommer til at starte at træde lidt tilbage og glans over den grundlæggende forskelle mellem disse sprog og slags forlade dig til det. Der er en masse virkelig stor ressourcer på internettet, som vi kommer til at begynde at lede dig mod fordi internettet er en stor database af oplysninger. Og så det er ikke ligesom du vil være tabere nødvendigvis ved ikke at have oplysningerne dækket i en video. Du vil stadig kunne få alt, hvad du har brug for og brug den viden, du har allerede opbygget ved at forstå C at gøre indlæringskurve for disse andre sprog faktisk meget fladere. Jeg lover. 

Men lad os tale om et sprog det er virkelig grundlæggende for alle web side, som er HTML. HTML er Hyper Text Markup Language. HTML er et sprog, men det er ikke et programmeringssprog. 

HTML har ikke variable. Det har ikke logik eller funktioner eller noget lignende. Vi kan ikke gøre nogen programmering per se i HTML. Nogle gange vil du høre folk beskriver sig selv som HTML programmører, som er ikke helt korrekt. Vi kan ikke skrive HTML-programmer. 

HTML er bare bruges til at markere tekst. Det kaldes et kodesprog. Og hvad det does-- denne markup-- vi bruger tags i HTML og disse tags-- dette markup-- semantisk definerer strukturen på en side og forårsager almindelig tekst, eksisterer mellem tags skal fortolkes af browsere på forskellige måder. Og måske er det bedst at forklare dette ved hjælp af en illustration. 

Her er en meget simpel HTML-side, ikke en HTML-programmet, igen, en HTML-side. Og vi ved, det er en HTML-side, fordi vi har afgrænset alt med HTML-tags. Så dette er hvad en HTML-tag ser ud. Det er mellem vinkelbeslag. Og bemærk i toppen, vi har HTML og i bunden, efter at vi har gjort, hvad der er tilsyneladende en masse andre HTML, vi har vinkelbeslag skråstreg HTML. Så den slags er grænsen mellem det HTML og hvad der ikke er. Og selvfølgelig konventionelt, lige som du skrev alle dine C-programmer med dot C extensions, alle dine HTML-filer vil ende med dot HTML udvidelser. Men der er flere foregår her. Vi har ikke bare har disse HTML-tags. Vi har tilsyneladende dette ting kaldet et hoved tag. Nå, OK, hvad er det? 

Nå måske er det bedst at skelne ved hjælp af et organ, legeme er indholdet af websiden. Så måske hovedet tag definerer ting som ikke er i browservinduet korrekt, men er på en måde vigtigt for vores webside blive gjort korrekt. For eksempel indersiden af head tag vi har titel tags. 

Så titel bliver hej verden, der er faktisk kommer til at være, hvad dukker op i tappen i Chrome eller i safari eller Firefox-- uanset hvad browser du prefer-- der er hvad der kommer til at dukke op i titlen. Og før faner det ville vise op i hele browservinduet og du kan kun have én side åbne i et browservindue ad gangen. Så det kommer til at være det titlen på min side op på fanen eller browservinduet bar, hej verden. Og derefter indholdet af min webside vil være verden, hej. Så lad os tage et kig på, hvad nogle ting som dette kunne se ud. Dette er en temmelig simpel HTML-side. Så jeg er her i min CS50 IDE og Jeg har zoomet ind en lille smule. Og jeg er bare at gå til åbne op hej dot HTML og vise dig, at dette er temmelig meget sidens indhold, som vi så før. Mine simple HTML, hoved tags, title tags, krop, og så videre. Jeg har indrykket at være rene. 

Og så hvad jeg kan gøre i min IDE er bare vist et eksempel på siden. Og der går vi. Indholdet af min side er verden, hej, og jeg kan ikke se noget fra hovedet tags der. Det er blot indholdet af kroppen. Verden, hej. Og igen kroppen lige sagde, verden, hej. Den anden del mangler. 

Så det er virkelig alt det er. Dette er en meget simpel grundlæggende HTML-side. Nu har jeg indrykket min HTML til være virkelig rart og organiseret, men jeg har faktisk ikke behøver at. Jeg kunne gøre det ser temmelig grimt. Og dette ville stadig arbejde. Dette ville være nøjagtig den samme webside. Jeg har netop fået slippe af med alle de hvide rum. 

Da det viser sig, hvide rum er data. Og så når vi sender data fra afsender til modtager, fra server til kunden, data koster penge. Og så at komme af blanke tegn er faktisk en god idé hvis du er en person, der tjener en masse web-indhold. Det er en dårlig idé, hvis du er nogen, der er at lære det her og du vil have det pænt organiseret. Dette er meget lettere at tolke end dette. Men det er funktionelt identiske. 

Indrykningen og den slags faktisk ikke noget i HTML. Alle, der betyder noget er, åbner tags og lukke tags i den rigtige rækkefølge. Læg mærke til hvad der skete her, selv om. Opmærkningen giver os en måde at kommunikere ekstra information om, hvad vi har skrevet. Hello, Verden del var tolkes som titlen. Og verden, goddag del var fortolkes indholdet eller hvad der skal være synlig på min webside. 

Der er over 100 af disse forskellige tags og masser af store ressourcer online for at finde dem. Vi kommer til at tale om en få af dem i denne video, nogle af de virkelig grundlæggende ting. Men vi vil ikke tale om det hele, fordi det ville være udtømmende hertil. 

En anden ting du kan gøre, selv om, er åbne udviklingsværktøjer. Og hvis du husker fra vores video på HTTP, Jeg forklarede, hvordan du åbner op udviklingsværktøjer. I Chrome er det normalt F12 at åbne op udvikleren værktøjslinje. Så i stedet for at vælge netværket fane kan du vælge fanen Elementer. Og hvis du indlæser en web side, vil du rent faktisk se HTML, der skaber denne webside. Og så kan du lære en masse om HTML ved at se på dine foretrukne hjemmesider og se, hvordan de bygger den forskellige stykker af dem, som du kan lide. Så måske er der denne cool mønster eller noget lignende. Hvordan de gør det med HTML? Nå du kan bare åbne din developer værktøjer og svæver over dette element og se præcis, hvad HTML gør det. Så det er en rigtig god måde at lære HTML, og jeg anbefaler stærkt, at du gøre det både for at lære HTML og også at lære lidt lidt om nogle af de muligheder til rådighed for dig i udviklingsværktøjer, som vil helt sikkert komme i handy som du begynder at gøre mere intensiv web programmering. 

Så lad os tage et kig på en par almindelige HTML-tags. Og vi vil hoppe og tage et kig på hvad disse tags vil også gøre som ved at se på nogle filer i mit IDE. Så her er tre meget grundlæggende tags for tweaking det visuelle udseende af tekst. Der er B-tags, I tags og U-tags. Og henholdsvis hvad de gør, er gøre teksten mellem dem med fed skrift, kursiv og understregning. Så lad os se, hvad der ville se ligesom på en faktiske webside i min IDE. 

Så her i min IDE har jeg en fil kaldet BIU dot HTML. BIU dot HTML bare at være fed, kursiv, understregning. Jeg vil åbne det op. 

Og vi vil se, at her jeg har denne tekst er B-tags fed. Denne tekst er I tags kursiv. Og denne tekst er U-tags understreget. Hvad er dette kommer til at se ud? Nå igen, alt hvad jeg har at gøre, er at gå over her til min browser, min fil browser, skal du klikke Eksempel, og det er hvad der kommer op. 

Teksten i mellem B tags er faktisk nu fed. Teksten i mellem I tags er faktisk nu kursiv. Og teksten i mellem U tags er faktisk nu understreget. Så det er temmelig godt. Vi ved nu, hvordan man kan gøre tekst ser lidt mere fancy eller tegne vægt på visse ting. Et andet par af fælles tags her afsnit tags, P og header tags, som jeg har gjort her som HX. 

Disse P-tags, disse afsnit tags, bryde din tekst op i afsnit. Det er ikke nok bare at tryk Enter og efterlade rum, fordi en computer er kun vil at gøre, hvad du fortæller det til at gøre og det ignorerer hvid plads til det meste. Så vi kan ikke bare trykke Enter og forventer vores computer at fortolke, at vi ønsker at starte et nyt afsnit. Vi må meget eksplicit sige dette er en paragraph-- dette er another-- ved at indsætte hver i et sæt af P tags. 

Og vi har også disse muligheder for H tags, disse header tags. Vi har seks forskellige niveauer overskrifter, en, to, tre, fire, fem og seks, som er gradvist større og større overskrifter. Og de får mindre og mindre og mindre og mindre. Så vi har et topniveau overskrift, en anden vater, og så videre, og så videre. 

Lad os tage et kig på måske nogle P-tags og nogle header tags i aktion på en webside. Så her i min IDE jeg har en fil kaldet PH dot HTML, idet pH-værdien stykker og header tags. Åbn det op. Der er en masse foregår her fordi jeg har lagt nogle lorem ipsum, nogle bare tilfældig tekst her. Så jeg vil zoome ud en lille smule fordi der er så meget foregår. Men bemærk, at jeg har i det top her Jeg har en H1, et niveau et, header tag. Så jeg har et afsnit, som er lige en flok af tilfældige text-- lorem ipsum-- bare standard standard fyldning i tekst. Så jeg har to stykker inde i det niveau et sidehoved og derefter ned under jeg har en niveau to header her på linie 24, et andet niveau header, og yderligere to stykker. Nå hvad betyder dette ligne hvis jeg ser det i min preview? Lad os se. 

Så mærke til, at første niveau header her er faktisk ganske lidt større end det andet niveau header. Så vi brugte H1 tags. Og bemærk, at P-tags giver os mulighed til at bryde tingene ud i stykker. Hvis vi havde fået slippe af disse P-tags og faktisk bare sætte Indtaster eller Retur i mellem, hvad vi håbede ville være de forskellige stykker, de ville alle bare smække sammen og det ville ikke have denne nice stykke adskillelse med plads over og under. Og så det er hvad afsnit tags og header tags er almindeligt anvendt til at gøre at trække opmærksom på dele af vores webside på denne måde. 

Næste op er nogle mærker, som vi bruger at opbygge lister på vores hjemmeside. Så vi har uordnet lists-- ULs-- der er lige punktopstillinger, bestilt liste, som er numbered-- OLs-- og indersiden af ​​enten en af ​​dem, vi har brug for sæt af hvordan man angive listeelementer, LI. Og så har vi åbent UL-tag og vi sætte punkter inde i den. Og så når vi er færdig med det, kan vi lukke UL tag. 

Og tilsvarende vi kan have en ordnet eller nummereret liste og sætte listeelementer inde i det. Så lad os tage et kig på et par lister og hvad de ville gengive som på CS50 IDE. Så jeg har her i min IDE et fil kaldet lister dot HTML. Lad os tage et kig. 

Og varsel her har jeg en uordnet liste med fem ting i det. Og så har jeg en ordnet liste, og Jeg har skiftet tag en lille smule, højre? Jeg har sagt starten lig seks. Det viser sig med en ordnet liste I kan indstille startpunktet uanset hvor Jeg want-- som standard vil det være en-- ved blot at tilføje denne såkaldte attribut til min OL-tag. Og så denne liste vil begynde at tælle på seks. Så de elementer i denne nummereret liste skal være seks, syv, otte, ni, ti, fordi der er fem elementer på listen, i modsætning til en, to, tre, fire, fem, som ville være tilfældet, hvis jeg havde sagt OL uden at angive starten attribut. 

Så vi vil bare få vist dette, så du kan få en fornemmelse for, hvad der foregår her. Og der går vi. Der er min liste. De første fem elementer er uordnede eller punktopstillinger. Og de næste fem elementer er en separat ordnet liste startende fra seks. Så det er, hvordan vi kan opbygge lister ved hjælp af HTML. En anden ting du måske ønsker at gøre med HTML er at opbygge en tabel over information af rækker og kolonner at præsentere oplysninger i en især organiseret måde. For at gøre dette med HTML vi kan få en tabel definition begynder åben beslag tabel. Og så inde i skemaet vi kan have et sæt af rækker, TR-tags at angive hver række. Og derefter TD tags gå inde i TR-tags at angive en kolonne i et træk. 

Hvorfor hedder det TD og ikke TC? Nå, TD står for tabeldata. Normalt du lægger dine oplysninger er der. Så det er derfor, det er TD og ikke TC. Det er en lille smule forvirrende. 

Så du har table tags og indersiden af ​​din tabel tags du har et antal rækker, TR'er. Og inde i hver række, du har Datablad for antallet af kolonner at du vil have i denne særlige træk. Lad os tage et kig på et meget simpel bordet over i CS50 IDE. 

Så jeg har her en fil kaldet tabel dot HTML. Lad os få et kig på hvad der ligner. Der er en masse foregår her, men hvis du bemærker jeg har en tabel åben. Jeg begynder definitionen med bord. Og så i mit første række, jeg tilsyneladende har fire kolonner, en, to, tre, fire. Og så er jeg færdig med denne række. 

Så jeg starter en anden række og gør to, fire, seks, otte. Afslut pågældende række. Gøre en anden række, tre, seks, ni, 12. Og så en sidste række, fire, otte, 12, og selv om det er lidt afskåret her, 16. 

Jeg færdig pågældende række. Jeg færdig bordet. Og så er jeg færdig med min HTML. Hvad betyder dette se ud? Tja, det er egentlig ikke meget at se. Jeg har helt klart organiseret mine oplysninger i en noget mere organiseret måde. Men det er ikke super smuk her. Og vi kommer til at beskæftige sig med at når vi taler om CSS. Vi vil revidere denne idé om hvad vi gør for at gøre en table-- måske formatere det lidt bedre? Men jeg har stadig fire rækker, som hver har fire kolonner, og virkelig, hvad svarer det til en meget enkel fire af fire multiplikation tabel. 

Bare et par flere tags, vi vil tale om. Lad os tale om det Begrebet en HTML-formular. Så du kan have set dette i sammenhæng med at logge ind på en webside. Normalt skal du indtaste dit brugernavn. Du skriver i dit password, og du er god til at gå. Det ville være begyndelsen på en formular. 

Skipping løbet div et sekund. Vi har også indgange, som slags passe inde former. Disse er de elementer, du faktisk skrive i, eller radioknapperne du er tikkende, eller checken bokse, som du tikkende off. Så disse gå ind af formularer. Og de omfatter grundlæggende hver række af formen Hvis din formular er formateret godt. Så er der denne begrebet en div, som ikke rigtig passer i en bestemt kategori af tags som dem, jeg har gjort tidligere. Det bare slags afgrænser den begyndelsen af ​​nogle vilkårlige division-- div-- på siden. Der er ingen visuel pause. Der er ingen linje. Det er ikke modregne som en separat chunk automatisk. Du ville have til at style det på den måde at gøre det. 

Det bare slags siger jeg vil have en stykke plads på min webside, og jeg bare at kalde det på denne opdeling af min side. Vi kan sætte ting inde af divs, og i virkeligheden, når vi hovedet over til IDE i en anden, vi får se, at jeg lægger min dannes inde i en div. 

Så jeg har her i min IDE et fil kaldet div formular dot HTML. Lad os åbne det op. Bemærk, at som jeg sagde, div er slags vilkårlig. Højre? Det betyder ikke virkelig betyder noget. Så jeg har en arbitrær første division af min side. Og så i stedet for en anden div senere, der starter på linje otte, Jeg har denne form. Og inde i formen jeg har en Antallet af indgange, felter i formularen. Så jeg har et felt, hvis navn er en-- som ikke virkelig betyder noget højre nu-- der tilsyneladende tager tekst, en anden, der tager en adgangskode, en anden, der er en radio knap, en anden, der er et afkrydsningsfelt, og en anden, der er en knap Send. Nå, hvad betyder det alt faktisk se ud? Nå, lad os tage et kig. Vi vil åbne det op i vores preview-vinduet. Bemærk at denne vilkårlige først division-- der er ingen visuel adskillelse her. Det gjorde ikke rigtig gøre noget, ikke? 

Og så har jeg min form. Og jeg gjorde det ikke nogen særlig formatering. Så form er blot en store række af information. Hvis jeg havde formateret min formular forskelligt, Jeg kunne have det linje for linje for linje. Men jeg gjorde det ikke nogen styling. Igen, vi taler ikke om CSS her. Vi bare taler om HTML. 

Tja i min tekstform jeg kan Motortype- huske, at former af typen tekst så jeg kan sætte mit navn. Og i min adgangskode Jeg kan skrive min adgangskode. Og fordi dette område er af typen adgangskode, du ved ikke, hvad mit password er. Det er alle prikker. 

Jeg kan også vælge at sætte kryds ud for en alternativknap eller kryds et afkrydsningsfelt. Eller jeg kunne sende min form. Og jeg gjorde ikke noget, så når jeg indsende min form siden bare opdateres. Men jeg kunne måske konfigurere min Indsend knappen for at gøre noget andet. Og vi vil se, hvad vi kan gøre med at der i en fremtidig video på PHP. Men dette sker en meget enkel form, som vi kan bruge til at få brugerne interagerer og indsende oplysninger til vores hjemmeside. 

En sidste bemærkning, før vi gå videre til nogle andre mærker er at tage et kig på dette input tag endnu en gang. Bemærk, at jeg har fremhævet enderne af fragmentet i rødt. Hver anden tag, vi har set hidtil har havde en begyndelse og en slutning, en åbning tag og et afsluttende tag. 

Men en input tag ikke. Der er ingen tekst, der går mellem input-tags. Alle de oplysninger vi har til hensigt at formidle er bundet op som en del af attributter af denne input. Bemærk, at vi har input navn lig x. Typen er lig y. Det er virkelig alt oplysninger, vi har brug for. 

Dette kaldes en selvlukkende tag. Det kræver ikke en åbning og en tæt, fordi alle de oplysninger er indeholdt inde i tag og dets egenskaber. Så nogle gange vil du se dette, også. Så bare være opmærksom på, at hvis du har en tag, der er helt selvstændig, den åbner og lukker sig den åbne vinkel beslag til venstre og skråstreg vinkel beslag til højre. Vi vil se endnu en af ​​dem, lige nu med billede tags så godt. 

Før vi taler om billeder, vi har brug for at snakke om hyperlinks. Hvis vi ønsker, at vores webside for at være interaktiv og bevæge os rundt, det ville være rart at kunne til at klikke på en af ​​dem hvad har typisk været en blå link. Dette er faktisk hvordan vi opbygger et hyperlink i vores hjemmeside. Og interessant nok der er en anden HTML-tag kaldet link, som ikke er et hyperlink. En her står for anker, og det er, hvordan vi angiver et hyperlink. 

En href lig x midler gå til webside X. Og alt mellem det åbne Et mærke og den tætte Et mærke er, hvad der kommer til at være der understregede blå tekst, der ligner et link at vi er bekendt med. Nedenfor, at vi har et billede-tag, som er en selvstændig lukker mærke til visning et billede placeret på X. Og du kan være i stand til at ændre billedet ved at angive bredde og højde og andre attributter i at dot dot dot der. 

Nederst her vi har en meget interessant søger tag, der ikke har en afsluttende tag. Det er udråbstegn DOCTYPE HTML. Så HTML har eksisteret siden begyndelsen af ​​1990'erne til at bygge web-sider, og det er gået undergået flere revisioner siden da. Senest i 2014 det undergik en revision kaldet HTML5 som nu er den nuværende slags de facto-HTML-standarden. 

At angive, at vores web sider er skrevet ved hjælp af HTML5, dette er, hvordan vi starter. Det kan udelades, men hvad der dybest set Midlet er at du ikke kan bruge nogen af ​​de tags som er HTML5 tags, de nye mærker. Så vi altid starter hvis vi bruger HTML5. Og alle de tags vi har talt om tidligere ikke HTML5 tags. Men dette ville indikere, at HTML5 tags vil være til stede. Og så vi har udråbstegn DOCTYPE HTML, som er selve begyndelsen af ​​vores HTML-fil, og derefter efter dette punkt vi faktisk har vores HTML åben mærke og videre derfra. 

Den sidste er en kommentar tag, som ser lidt anderledes, også. Det starter ud med vinkel beslag udråbstegn bindestreg Dash men ingen afsluttende beslag. I mellem disse to elementer der er, hvor du skriver dine kommentarer. Og lad os tage et kig på billederne og kommentarer og links i CS50 IDE. 

Så jeg har her en fil kaldet billede link dot HTML, som jeg har tænkt mig at åbne op. Og bemærk jeg har fået et par kommentarer her i min HTML kommentarer. Så ligesom i C og andre programmeringssprog, HTML bare ved at være et kodesprog har evnen til at have kommentarer. Og så jeg tilsyneladende vil placere et billede af Rick Astley et sted mellem denne div tag, denne vilkårlige division. Tilsyneladende, at filen er placeret på Rick dot JPEG, som hvis vi hovedet tilbage over til min fil træ til en anden, er en fil, der findes i den aktuelle mappe. Så det er OK. Jeg kan henvise til det. 

Så kan jeg have interne links. Så mærke på linie 11 her min href er hej dot HTML. Så det bare refererer til goddag dot HTML der findes i den aktuelle mappe. Og jeg kan også have ekstern links ved bare at angive HTTPS at angive, at jeg ikke taler om en fil i min nuværende mappe. Jeg taler om en fil, der findes et eller andet sted på internettet, som jeg har at anmode hjælp af HTTP-protokollen. 

Så lad os tage et kig på, hvad denne side kan se ud og gør dig klar til et billede af Rick Astley at dukke op på din skærm. Så jeg vil se et eksempel dette. Der er Rick Astley på øverst i denne vilkårlige division jeg sætte det på toppen. Og derefter ned under jeg har mine links, right? 

Jeg har et link til goddag dot HTML. Og hvis jeg klikker der, jeg får flyttet over til denne side at vi er meget fortrolig med fra begyndelsen af ​​vores program. Hvis jeg pop pågældende side åben igen, hvis jeg pop billede link åbner en gang mere, Jeg kan også gå eksternt til CS50 hjemmeside. Og der har vi see-- jeg vil zoome ud en lille smule her-- vi vil se CS50 hjemmeside slags indlejret i midten af ​​vores side. Så jeg var i stand til at foretage en intern link samt et eksternt link. 

Den sidste regel med HTML, der vi kommer til at tale om her er, at din HTML skal være godt dannet. I C talte vi meget om de forskellige syntaks i tingene. I HTML syntaksen virkelig kredser om tags. Hvert tag du åbner skal lukkes. Og i virkeligheden, hver tag du åbner skal lukkes i omvendt rækkefølge. 

Så hvis du åbner en fed tag, en kursiv tag, og derefter en understregning tag at gøre alle tre til en bestemt sæt af tekst, bør du lukke dem i omvendt rækkefølge. Så hvis du åbnede fed, kursiv, understregning, du ønsker at lukke understregning, kursiv, fed. Denne form for indkapsling er det holder HTML pæn og organiseret. 

I modsætning til C, dog syntaksfejl vil ikke faktisk ødelægge din HTML evt. Din HTML kan være ikke godt dannet, men vil stadig fungere. Og så disse fejl kan sortere af dias ved. Det er op til dig at virkelig være på vagt. Nogle gange vil de ikke, men nogle gange kan man slippe af sted med det. 

Det kan være en virkelig vanskelig opgave, selv om, at holde styr på, da du åbnede et tag, når du har lukket det, især da din HTML filer får større og større. Du ønsker noget hjælp. Og der er online validator værktøjer, som du kan bruge til at få et kig på din web side og se om det er velformet HTML. Og bør du helt sikkert tage et kig på dem og begynde at bruge dem som du begynde at gøre noget arbejde med HTML, skrive HTML, bare så du får nogle gode vaner om at organisere din HTML på en god måde, og god stil og sikre at du ikke laver noget, kunne skabe en syntaks fejl, ville medføre, at du lidt af et problem nede ad vejen. 

Jeg er Doug Lloyd. Det er CS50.