DOUG Lloyd: Vietimme about-- jos matematiikka on oikea, ja mielestäni etsivät back-- mielestäni vietimme noin 35 videoita puhuminen noin eri osa C, ehkä hieman enemmän, ehkä hieman vähemmän. Ja emme kata kaikki C, mutta me katettu iso kimpale kieli, valtaosa siitä, varmasti yhteisiä käyttötarkoituksia. Nyt aiomme puhua noin toinen kieli, HTML. Ja aiomme kattaa se vain yhden videon. 

Mutta se tulee olemaan OK. Että menee todella tullut jotain aiot tottua. Nyt sinulla on perusteet yhdellä kielellä, se on oikeastaan ​​aika helppo aloittaa oppimisen muille. Joten aiomme aloittaa vaiheeseen vähän takaisin ja kaunistella perus eroja kielillä ja tavallaan jätä sinua siihen. On paljon todella suuri resursseja Internetissä, joka aiomme aloittaa ohjaa sinut kohti, koska Internet on valtava varasto tietoa. Ja niin se ei ole kuin te ll olla häviämässä välttämättä ei tarvinnut tiedot katettu video. Voit silti saada kaikki mitä tarvitset ja käyttö tieto olet jo rakentaneet ymmärtämällä C tehdä oppimiskäyrä näiden Muilla kielillä todella paljon tasaisempi. Lupaan. 

Mutta puhutaanpa yksi kieli se on todella olennaista jokaisen web sivu, joka on HTML. HTML on Hyper Text Markup Language. HTML on kieli, mutta se on ei ohjelmointikieli. 

HTML ei ole muuttujia. Se ei ole logiikkaa tai toimintoja tai mitään sellaista. Emme voi tehdä mitään ohjelmointi sinänsä HTML. Joskus kuulet ihmiset kuvailevat itseään HTML ohjelmoijia, joka ei ole täysin tarkka. Emme voi kirjoittaa HTML-ohjelmia. 

HTML on vain käytetään merkitä tekstiä. Sitä kutsutaan markup language. Ja mitä tämä does-- tämä markup-- käytämme tageja HTML ja nämä tags-- tämä markup-- semanttisesti määrittelee rakenteen sivun ja aiheuttaa pelkkää tekstiä että välillä tunnisteita tulkittava selaimissa eri tavoin. Ja ehkä on parasta selittää tämä tavalla kuva. 

Tässä on hyvin yksinkertainen HTML-sivu, ei HTML-ohjelma, jälleen, HTML-sivun. Ja me tiedämme, se on HTML-sivun koska olemme jota rajoittaa kaiken HTML-tunnisteita. Joten tämä on mitä HTML-tunnisteen näyttää. Se on välillä kulmasulkeiden. Ja huomaa huipulla meillä HTML ja alareunassa, kun olemme tehneet, mitä on ilmeisesti paljon muita HTML, meillä on kulmasulkeen slash HTML. Niin että sellainen on rajan välillä, mikä on HTML ja mikä ei. Ja tietenkin, tavanomaisesti, vain kuten kirjoitit kaikki C -ohjelmien DOT C laajennukset, kaikki HTML-tiedostoja päättyy piste HTML laajennuksia. Mutta siellä on enemmän tekeillä. Meillä ei vain ole näitä HTML tageja. Meillä ilmeisesti on tämä asia kutsutaan pää tag. No okei, mikä tuo on? 

No ehkä on parasta erottaa tavalla elin, elin on sisältöä www-sivulla. Joten ehkä pään tag määrittelee jutut joka ei ole selainikkunassa oikea, mutta on jotenkin tärkeää meidän verkkosivu on suoritettu oikein. Esimerkiksi sisällä pää tag meillä on otsikko tags. 

Joten otsikko on Hello World, joka on todella olemaan mitä näkyy välilehdellä Chromessa tai Safarissa tai Firefox-- mitä selain prefer-- se mitä tulee näy otsikossa. Ja ennen välilehdet se osoittaisi vuonna koko selainikkunan ja voit vain yksi sivu avautuvat selainikkunaan kerrallaan. Niin että tulee olemaan otsikko sivuni ylös välilehti tai selainikkunan baari, Hello World. Ja sitten sisältöä minun verkkosivu on maailman, hei. Joten katsomaan mitä jotkut asia näin voisi näyttää. Tämä on melko yksinkertainen HTML-sivu. Joten olen täällä minun CS50 IDE ja Olen zoomataan vähän. Ja olen juuri menossa avata Hei piste HTML ja näyttää, että tämä on melko paljon sivun sisällön että näimme aiemmin. Minun yksinkertainen HTML, pää tunnisteet, otsikko tags, body, ja niin edelleen. Olen sisennetään olla puhdas. 

Ja sitten, mitä voin tehdä minun IDE on vain esikatsella sivu. Ja siellä mennään. Sisältö sivuni on maailman, Hei, ja en näe mitään sisään pään tunnisteet siellä. Se on vain sisällön ruumiin. Maailma, hei. Ja taas kehon vain sanoi, maailma, hei. Muut osa puuttuu. 

Niin, että oikeastaan ​​kaikki se on. Tämä on hyvin yksinkertainen HTML sivu. Nyt olen sisennetään minun HTML todella mukavaa ja järjestäytyneen, mutta en oikeastaan ​​tarvitse. Voisin tehdä sen näyttää aika ruma. Ja tämä olisi vielä työtä. Tämä olisi täsmälleen sama sivun. Olen juuri päässyt eroon kaikki valkoinen tila. 

Kuten on käynyt ilmi, valkoinen tila on tietoja. Ja niin kun me lähetetään tietoja lähettäjältä vastaanottajalle, palvelimesta asiakkaan, tiedot maksaa. Ja niin päästä eroon välilyönnillä on todella hyvä idea jos olet joku, joka palvelee ylös paljon web-sisältöä. Se on huono idea, jos olet joku, joka on oppimisen tätä kamaa ja haluat olla se hienosti järjestetty. Tämä on paljon helpompaa jäsentää kuin tämä. Mutta se on toiminnallisesti identtisiä. 

Sisennys ja tavaraa niin ei varsinaisesti väliä HTML. Tärkeää on avaaminen tunnisteet ja päätösmerkkauksia oikeassa järjestyksessä. Huomaa, mitä täällä tapahtui, vaikka. Markup antaa meille tapa kommunikoida Lisätiedot mitä olemme kirjoitettu. Hei, Maailma osa oli tulkita otsikko. Ja maailma, hei osa oli tulkita sisällön tai mitä pitäisi näkyvä minun verkkosivu. 

Maassa on yli 100 näiden eri tunnisteet ja paljon suuria resursseja online löytää niitä. Aiomme puhua harvat heistä tämän videon, jotkut on todella perustavanlaatuinen kamaa. Mutta emme aio puhua siitä kaikki koska se olisi tyhjentävä tehdä niin. 

Toinen asia mitä voi tehdä, vaikka, on avata kehitystyökalut. Ja jos muistatte Meidän video HTTP, Selitin miten avata up kehitystyökalut. Chrome on yleensä F12 avata kehittäjä työkalupalkin. Niin sen sijaan valita Network välilehti, voit valita elementit välilehti. Ja jos lataat web sivu, sinun todella katso HTML, joka luo kyseisen sivun. Ja niin voit oppia paljon HTML katsomalla lempisivustoiltasi ja nähdä miten ne rakentaa eri palasten heille, että haluat. Joten ehkä on tämä jäähtyä kuvio tai jotain. Miten he tekevät sen HTML? No voit vain avatkaa kehittäjä Työkalut ja hääriä yli että elementti ja katsoa, ​​mitä HTML tekee. Niin, että todella hyvä tapa oppia HTML, ja suosittelen lämpimästi, että teet sen molemmat opetella HTML ja myös oppia hieman vähän siitä joitakin vaihtoehtoja käytössäsi kehitystyökaluja, jotka varmasti tulee kätevä kuin voit alkaa tehdä enemmän intensiivinen web ohjelmointi. 

Joten katsomaan pari yhteisiä HTML-tunnisteita. Ja me hypätä ja katsomaan mitä nämä tunnisteet myös tehdä kuten tarkastelemalla joitakin tiedostoja minun IDE. Joten tässä on kolme hyvin perus tunnisteet säätämistä ulkoasun tekstin. On B tunnisteet, minä tunnisteet, ja U tunnisteet. Ja vastaavasti mitä he tekevät on tehdä tekstin välillä lihavoitu, kursiivilla, ja alleviivaus. Katsotaanpa, mitä se näyttää vastaavaa todellisen Web-sivun minun IDE. 

Joten tässä minun IDE Minulla tiedosto nimeltä BIU piste HTML. BIU piste HTML vain on rohkea, kursivoitu, korostaa. Avaan sen. 

Ja näemme, että tässä minä on tämä teksti on B tageja rohkea. Tämä teksti on minä tunnisteita kursiivilla. Ja tämä teksti on U tageja alleviivattu. Mitä tämä tulee näyttämään? No jälleen, minulla on tehdä, on mennä tänne selaimeeni, minun tiedostoselain, napsauttamalla Esikatselu, ja tämä on mitä tulee esiin. 

Teksti välillä B Tunnisteet on todellakin nyt rohkeita. Teksti välillä I Tunnisteet on todellakin nyt kursiivilla. Ja tekstin välillä U Tunnisteet on todellakin nyt alleviivattu. Niin se on aika hyvä. Nyt tiedämme, miten tehdä tekstin näyttää hieman enemmän fancy tai piirtää huomiota tiettyihin asioihin. Toinen pari yhteisten tunnisteiden täällä kohta tunnisteet, P, ja header tags, jonka olen suoritettu täällä HX. 

Nämä P tunnisteet, nämä kohta tunnisteet, rikkoa tekstin ylös kohdat. Se ei riitä, että vain Enter ja jättää tilat, koska tietokone on vain menossa tehdä mitä kerrot sen tehdä ja se ohittaa valkoinen tilaa suurimmaksi osaksi. Joten emme voi painaa Enter ja odottaa meidän tietokone tulkita, että haluamme aloittaa uuden kappaleen. Meidän on hyvin selkeästi sanoa on yksi paragraph-- tämä on another-- sulkemalla kukin joukko P tunnisteita. 

Ja meillä on myös näistä vaihtoehdoista H tunnisteita, nämä header tageja. Meillä on kuusi eri tasoilla otsikot, yksi, kaksi, kolme, neljä, viisi ja kuusi, jotka ovat asteittain yhä suurempia otsikot. Ja he saavat pienempiä ja pienempiä ja pienempiä. Meillä on huipputason otsikon, toinen tason otsikko, ja niin edelleen, ja niin edelleen. 

Katsotaanpa katsomaan ehkä jotkut P tunnisteet ja joitakin header tageja toiminnassa web-sivulla. Joten tässä minun IDE Olen tiedosto nimeltä PH piste HTML, PH on kohdassa ja header tageja. Avaa se ylös. Siellä on paljon täällä koska olen laittaa lorem ipsum, jotkut vain satunnaisia ​​tekstiä täällä. Niin minä loitontaa hieman koska siellä on niin paljon meneillään. Mutta huomaa, että minulla on aivan Alkuun täällä Minulla on H1, taso yksi, header tag. Sitten minulla on kohta, joka on vain nippu satunnainen text-- lorem ipsum-- vain oletuksena standardi täyttämistä tekstissä. Joten minulla on kaksi kohtaa sisällä että Tason yksi otsikko ja sitten alas alla I on tason kaksi otsikon täällä line 24, toisen tason otsikko, ja toiset kaksi kohdat. No mitä tämä näyttää jos näen sen minun esikatsella? Katsotaan. 

Niin huomaa, että ensimmäisen tason otsikko täällä on oikeastaan ​​aika vähän isompi kuin toisen tason otsikko. Joten käytimme H1 tunnisteita. Ja huomaa, että P tunnisteet antavat meille rikkoa asioita kappaleiksi. Jos olisimme päässyt eroon näistä P tunnisteet ja oikeastaan ​​vain laittaa Siirtyy tai Palautukset välillä mitä toivoimme olla eri kohdissa, he kaikki vain paiskata yhdessä ja se ei ole tätä mukavaa kohta erottaminen tilaa ylä- ja alapuolella. Ja niin sitähän kohta tunnisteet ja header tags käytetään yleisesti tehdä piirtää huomiota osia kotisivultamme tuolla tavalla. 

Seuraavaksi joitakin tunnisteita, jotka käytämme rakentaa luetteloita nettisivuillamme. Joten meillä on järjestämättömiä lists-- ULs-- jotka ovat vain luettelomerkkiluettelot tilasi lista, jotka ovat numbered-- OLs-- ja sisältä joko yksi niistä meidän on sarjaa miten ilmoittamaan luettelokohteita, LI. Ja niin meillä on avoin UL tag ja laitamme kohteita sisälle. Ja sitten kun olemme tehneet että voimme sulkea UL tag. 

Ja samalla voimme olla tilata tai numeroidun luettelon ja laittaa lista kohteita sisällä siitä. Joten katsomaan klo pari luetteloita ja mitä ne olisivat tehdä kuin CS50 IDE. Joten minulla on täällä minun IDE tiedosto nimeltä luettelot piste HTML. Katsotaanpa katsomaan. 

Ja ilmoitus täällä minulla järjestämättömiä luetella viisi asioita se. Ja sitten on järjestetty lista, ja Olen muuttanut tunnistetta hieman, oikea? Olen sanonut alusta vastaa kuusi. On käynyt ilmi kanssa järjestetty lista I voi asettaa lähtökohta missä I want-- oletuksena se on one-- vain lisäämällä tämä niin kutsuttu ominaisuus minun OL tag. Ja niin tämä lista alkaa laskea kuusi. Joten osatekijät numeroitu luettelo olisi kuusi, seitsemän, kahdeksan, yhdeksän, kymmenen, koska on viisi elementtiä luettelossa, toisin kuin yksi, kaksi, kolme, neljä, viisi, joka olisi, jos olisin sanonut OL täsmentämättä alku määrite. 

Joten me vain kuvaa tätä, jotta voit Saat käsityksen siitä, mitä täällä tapahtuu. Ja siellä mennään. Ei minun lista. Ensimmäiset viisi elementtiä ovat järjestämättömiä tai luettelomerkkiluettelot. Ja seuraavan viiden elementit ovat erillisiä järjestetty lista alkaen kuusi. Niin, että miten voimme rakentaa luetteloita HTML. Toinen asia saatat haluavat tehdä HTML on rakentaa taulukko tietoa rivien ja sarakkeiden esittää tietoja erityisesti järjestäytynyttä tavalla. Voit tehdä tämän HTML voimme olla taulukko määritelmä alussa alkusulkumerkki pöytä. Ja sitten sisällä että taulukon me voi olla joukko rivejä, TR tagit osoittamaan kunkin rivin. Ja sitten TD tagit mennä sisälle TR tunnisteet Voit määrittää sarakkeen sisällä peräkkäin. 

Miksi sitä kutsutaan TD eikä TC? No, TD tarkoittaa taulukon tiedot. Yleensä olet laskemisesta tietosi siellä. Joten siksi se TD eikä TC. Se on hieman sekava. 

Joten sinulla on pöytä tunnisteet ja sisällä oman pöydän tunnisteet sinulla rivien, TR. Ja sisällä kunkin rivin sinulla on TTS sarakkeita että haluat olla kyseisessä rivillä. Katsotaanpa katsomaan hyvin yksinkertainen taulukko ohi CS50 IDE. 

Olen siis täällä tiedosto nimeltään pöytä piste HTML. Katsotaanpa vilkaista mitä se näyttää. Siellä on paljon täällä, mutta jos huomaat minulla on pöytä auki. Olen alkanut määritelmä pöytä. Ja sitten minun ensimmäisellä rivillä I ilmeisesti on neljä saraketta, yksi, kaksi, kolme, neljä. Ja sitten olen päässyt että rivi. 

Sitten aloitan toisen rivin ja tehdä kaksi, neljä, kuusi, kahdeksan. Viimeistelyn, joka rivi. Tehdä uuden rivi, kolme, kuusi, yhdeksän, 12. Ja sitten viimeisen rivin, neljä, kahdeksan, 12, ja vaikka se on hieman katkaista täällä, 16. 

Lopetin että rivi. Lopetin pöytä. Ja sitten olen tehnyt minun HTML. Mitä tämä näyttää? No, se ei oikeastaan ​​paljon nähdä. Olen selkeästi organisoitunut tietoni vuonna hieman järjestäytyneesti. Mutta se ei ole erittäin kaunis täällä. Ja aiomme käsitellä että kun puhumme CSS. Me uudelleen tätä ajatusta mitä teemme tehdä table-- ehkä alustaa sitä vähän paremmin? Mutta minulla on vielä neljä riviä, joissa kussakin on neljä saraketta, ja oikeastaan ​​mitä tämä merkitsee on hyvin yksinkertainen neljä neljä kertomalla pöytä. 

Vain muutama tageja me puhumme. Puhutaanpa käsite HTML muodossa. Joten olet saattanut nähdä tämän yhteydessä kirjautumalla sivun. Yleensä kirjoitat käyttäjätunnuksesi. Kirjoitat salasanan, ja olet hyvä mennä. Se olisi alku muodossa. 

Ohittaminen yli div toinen. Meillä on myös tulot, jotka Tällainen mahdu muotoja. Nämä ovat tekijöitä, jotka olet todella konekirjoitus osaksi, tai valintanapeista olet tikittää, tai tarkista laatikot että olet tikittää pois. Joten nämä menevät sisälle muotoja. Ja ne käsittävät pohjimmiltaan jokainen rivi muoto jos lomake on muotoiltu hyvin. Sitten on tämä käsite div, joka ei oikeastaan sovi mihinkään tiettyyn luokkaan tunnisteiden kuten niitä olen tehneet aiemmin. Se vain eräänlainen rajataan alussa noin mielivaltaisen division-- div-- sivun. Ei ole visuaalinen tauko. Ei ole linja. Se ei kuitata niin erillinen kimpale automaattisesti. Sinun täytyy tyyli se että tapa tehdä se. 

Se vain eräänlainen sanoo Haluan pala tilaa minun sivun, ja olen juuri menossa soittaa se tämä jako sivuni. Voimme laittaa tavaraa sisällä sekä divs, ja itse asiassa, kun pään yli IDE toisessa käymme nähdä, että olen laskemisesta minun muodostavat sisällä div. 

Joten minulla on täällä minun IDE tiedosto nimeltä div muodossa piste HTML. Katsotaanpa avaa sen. Huomaa, että kuten sanoin, div on sellainen mielivaltainen. Oikea? Se ei oikeastaan ​​tarkoita mitään. Joten minulla on mielivaltainen ensimmäinen jako sivuni. Ja sitten sijasta toisen div myöhemmin, alkaen linja kahdeksan, Minulla on tässä muodossa. Ja sisältä lomakkeen minulla määrä tuloja, kenttien muotoa. Joten minulla on kenttä jonka nimi on A-- joka ei oikeastaan ​​tarkoita mitään oikea now-- että ilmeisesti vie tekstin, toinen, joka ottaa salasana, toinen, joka on Radio painike, toinen se valintaruutu, ja toinen, joka on Lähetä-painiketta. No, mitä tämä kaikki oikeastaan ​​näyttää? No, katsotaanpa katsomaan. Me avaa sen meidän esikatseluikkunassa. Huomaa, että tämä mielivaltainen ensimmäinen division-- olemassa ei visuaalinen erottaminen täällä. Se ei oikeastaan ​​tehdä mitään, eikö? 

Ja sitten minulla on muoto. Ja en tehnyt mitään erityistä muotoiluja. Joten muoto on vain yksi iso rivi tietoja. Jos olisin alustanut muodossa eri tavalla, Voisin olla se rivi rivi riviltä. Mutta en tehnyt mitään tyyli. Jälleen, emme puhu CSS täällä. Me vain puhumme HTML. 

No minun tekstimuodossa voin type-- muistaa, että muodot kirjoittaa tekstiä joten voin laittaa nimeni. Ja salasanani I voit kirjoittaa salasanani. Ja koska tällä alalla on tyyppiä salasana, et tiedä mitä minun salasana on. Se kaikki pisteet. 

Voin myös valita ruksata valintanappi tai rasti pois valintaruutu. Tai voisin jättää minun muodossa. Enkä tee mitään, joten kun lähetän muodossa, sivu vain päivittyy. Mutta voisin ehkä määritän Lähetä-painiketta tehdä jotain muuta. Ja näemme, mitä voimme tehdä että tulevaisuudessa video PHP. Mutta tämä perustuu hyvin yksinkertainen muoto että me voi käyttää saada käyttäjät ovat vuorovaikutuksessa ja toimitettava tiedot sivuillemme. 

Yksi viimeinen kommentti ennen kuin siirtyä johonkin toiseen tunnisteet on katsomaan tämä tulo tag vielä kerran. Huomaa, että olen korostanut päät tunnisteen punaisella. Joka toinen tag olemme nähneet tähän mennessä on oli alku ja loppu, aukko tag ja sulkeminen tag. 

Mutta tulo tag ei. Ei ole tekstiä, joka menee välillä tulo tageja. Kaikki tiedot olemme aikovat välittää on sidoksissa osana ominaisuudet kyseisen tulon. Huomaa, meillä on panos nimi vastaa x. Tyyppi vastaa y. Se on todella kaikki tietoja tarvitsemme. 

Tätä kutsutaan itsestään sulkeminen tag. Se ei vaadi avaamista ja sulje koska kaikki tiedot sisältyy sisällä tag ja sen ominaisuuksia. Joten joskus näet tämäkin. Joten vain olla tietoinen siitä, että jos sinulla on tunniste, joka on täysin itsenäinen, se avautuu ja sulkeutuu itsensä avoin kulma kiinnike vasemmalla ja slash kulma kiinnike oikealla. Näemme toinen niistä juuri nyt kuvan tunnisteet samoin. 

Ennen kuin puhumme kuvia, me täytyy puhua hyperlinkkejä. Jos haluamme verkkosivustoa olla interaktiivinen ja siirtää meidät ympäri, olisi kiva pystyä klikkaa yksi niistä mitä on tyypillisesti ollut sininen linkki. Tämä on todella miten rakennamme hyperlinkki nettisivuillamme. Ja kiinnostavaa kyllä on toinen HTML-koodi nimeltään linkki, joka ei ole hyperlinkki. Tässä tarkoittaa ankkuri, ja Näin saimme osoittaa hyperlinkin. 

Href vastaa x keinoja mennä Web-sivun X Ja kaikki välillä avoimen tunniste ja sulje tunniste on mitä tulee olemaan, että alleviivattu sininen teksti, joka näyttää linkki että olemme tuttuja. Alla että meillä on kuvan tunniste, joka on itsestään sulkeminen tag näyttämällä kuva sijaitsee X. saatat pystyä muuttamaan että kuva määrittelemällä leveys ja korkeus ja muut attribuutit että piste piste piste siellä. 

Alareunaan täällä meillä on hyvin mielenkiintoinen etsivät tag, joka ei on sulkeminen tag. Se on huutomerkki DOCTYPE HTML. Niin HTML on ollut voimassa vuodesta 1990-luvun alussa rakentaa web-sivuja, ja se on mennyt läpikäynyt lukuisia muutoksia sen jälkeen. Viimeksi vuonna 2014 se tehtiin tarkistus nimeltään HTML5 joka on nyt nykyinen eräänlainen de facto HTML standardi. 

Osoittavan, että web sivut ovat kirjoitettu HTML5, näin lähdetään. Se voidaan jättää pois, mutta mitä se pohjimmiltaan väline on et voi käyttää mitä tahansa tunnisteet jotka ovat HTML5 tunnisteita, niitä uusia tunnisteita. Joten me aina aloittaa jos käytämme HTML5. Ja kaikki tagit olemme puhuneet aiemmin eivät ole HTML5 tageja. Mutta tämä osoittaisi, että HTML5 tagit on läsnä. Ja niin meillä on huudahdus DOCTYPE HTML, joka on aivan alussa meidän HTML-tiedosto, ja sitten sen jälkeen piste meillä on todellakin meidän HTML auki tag ja edetä sieltä. 

Viimeinen on kommentti tag, joka näyttää hieman erilaiselta, liian. Se alkaa kanssa kulma kiinnike huudahdus viiva viiva mutta ei sulkeminen kiinnike. Välillä nämä kaksi seikkaa siellä on, jos kirjoitat kommentteja. Ja lähdetään katsomaan kuvia ja kommentit sekä linkit CS50 IDE. 

Olen siis täällä tiedosto nimeltä kuvalinkissä dot HTML joka aion avata. Ja huomaa, minulla pari kommentit täällä minun HTML kommentteja. Joten aivan kuten C ja muut ohjelmointikielet, HTML vain olemalla markup language hänellä on kyky on kommentteja. Ja niin olen ilmeisesti menossa aseta kuvan Rick Astley jonnekin tämä div tag, tämä mielivaltainen jako. Ilmeisesti että tiedosto on sijaitsee Rick piste JPEG, joka jos lähdemme takaisin yli minun tiedosto puu toista, on tiedosto, joka on olemassa nykyinen hakemisto. Niin se on OK. En voi viitata sen. 

Sitten voin olla sisäisiä linkkejä. Niin huomaa linjalla 11 täällä minun href on hei piste HTML. Niin, että vain viitataan hei piste HTML joka on olemassa nykyisessä hakemistossa. Ja voin myös olla ulkoinen linkit vain määrittämällä HTTPS osoittamaan, että En puhu noin tiedosto minun hakemistossa. Puhun olemassa olevaa tiedostoa jonnekin Internetissä, joka minulla on pyytää käyttämällä HTTP-protokollaa. 

Joten katsomaan mitä tämä sivu saattaa näyttää ja valmistaudu kuvan Rick Astley näy ruudulla. Niin minä esikatsella. On Rick Astley at hyvin alkuun tässä mielivaltainen jako Laitoin sen yläreunassa. Ja sitten alas alla I minun yhteyksiä, eikö? 

Minulla on linkki hei piste HTML. Ja jos minä sitten, että saan siirtyi tälle sivulle että olemme hyvin tuttuja alusta ohjelmamme. Jos minä pop että sivu taas auki, jos en pop kuvalinkissä avata vielä kerran, Voin myös mennä ulkoisesti että CS50 verkkosivuilla. Ja siellä me see-- I will loitontaa hieman here-- näemme CS50 verkkosivuilla eräänlainen upotettu keskellä meidän sivulla. Joten pystyin tekemään sisäinen linkki sekä ulkoisen linkin. 

Viimeinen sääntö HTML että aiomme puhua täällä on että HTML on hyvin muodostuneita. C puhuimme paljon eri syntaksi asioita. HTML syntaksin todella pyörii tageja. Jokainen tag avaat on suljettava. Ja itse asiassa, joka tag avaat tulisi sulkea päinvastaisessa järjestyksessä. 

Joten jos avaat rohkea tag, kursivoitu tag, ja sitten alleviivaus tag tehdä kaikki kolme tietyn joukon tekstiä, kannattaa sulkea ne käänteisessä järjestyksessä. Joten jos olet avannut rohkea, kursivoitu, alleviivattu, voit haluat sulkea alleviivaus, kursivoitu, lihavoitu. Tällainen kapselointi on mitä pitää HTML mukava ja järjestetty. 

Toisin kuin C, vaikka syntaksivirheitä eivät todella lamauttaa HTML mahdollisesti. HTML voi olla hyvin muodostettu mutta silti työtä. Ja niin nämä virheet voi lajitella slide mennessä. Se on jopa voit todella olla valppaana. Joskus he epäonnistuvat mutta joskus voit saada veräjästä. 

Se voi olla todella vaikea tehtävä, vaikka, seurata kun avasit tag, kun suljettu se, varsinkin kun HTML tiedostoja saada isompi ja isompi. Sinun kannattaa apua. Ja on verkossa Validator työkalut, joita voivat käyttää vilkaista Web sivu ja katso jos se on hyvin muotoiltu HTML. Ja kannattaa ehdottomasti katsomaan niitä ja alkavat käyttää niitä sinua alkaa tehdä töitä HTML, kirjallisesti HTML, juuri niin saat hyviä tapoja noin järjestämisestä HTML hyvällä tavalla ja hyvä tyyli ja varmistamalla että et tee mitään, voisi luoda syntaksivirhe joka aiheuttaisi sinulle hieman ongelma tiellä. 

Olen Doug Lloyd. Tämä on CS50.