Daven FARNHAM: Tänään aion puhua hieman HTML, Hypertext Markup Language. Näet HTML kaikkialla näinä päivinä. Itse asiassa, jos olet katsomassa tätä video selaimessa, olet nähdä HTML juuri nyt. HTML ei ole ohjelmointikieli, pikemminkin on käytetty sivunkuvauskieli selaimet ladata sivut Internetissä. 

Joten saatat kysyä, miten tarkalleen on kirjallisesti Web-sivun HTML eri kirjoittamasta ohjelman ohjelmointi kieli kuten C? No, C on kieli erittäin tiukkoja syntaktisia sääntöjä, jonka on oltava koottu ennen kuin se voi ajaa. Jos olet joskus unohtanut sisällyttää puolipiste lopussa lausuma C-koodia, tiedät mistä puhun noin Suhteen tiukkaa syntaksin. 

Web-selaimet kuitenkin ovat hieman anteeksi kun se tulee HTML. Vaikka HTML ei ole syntaktisesti oikein, sivu voi silti olla näytetään selaimessa, mutta se saattaa ei näytä niin kuin on tarkoitettu. Joten se on aina parasta noudattaa sääntöjä. Paras tapa saada intuitiota siitä, miten asiat toimivat, on läpi esimerkki. 

Joten mitä meillä täällä on perus suunnitelma Web-sivun. Olet varmaan huomannut paljon asioita välillä kulma suluissa. No, nämä ovat vain tageja. Tunnisteet periaatteessa ilmoitettava selaimet että, hei, jotain on tulossa teidän tavoin. Muista kuitenkin, kun avaat tag, sinun täytyy sulkea se kerran olet lopettanut sen käyttämisen. 

Niinpä esimerkiksi, avaan jakso koodia auki kiinnike elin, loppusulkumerkki. Sitten lisätä tekstiä, tässä tapauksessa minun ensimmäinen Web-sivu sitten kun menin sulje tämä, käytän melkein identtinen tag paitsi tällä kertaa vinoviiva ennen ruumiin. Yleensä tämä on muotoa olet aio käyttää aina, kun avaat ja loppumerkinnät. Yhdessä avoin koodi ja lopputunniste säveltää mitä kutsutaan elementin. 

Jos tarkastellaan ensimmäistä riviä, sinun katso huutomerkki seuraa DOCTYPE html. Tämä on oikeastaan ​​vain kertoo selaimen että tiedosto on web-sivu kirjoitettu HTML. HTML-tunniste lähinnä kertoo, tässä tulee joitakin HTML. Sitten meillä on pää tag otsikko tag sisällä. Pää tag voit ajatella niin käsittää HTML-koodi, joka tulee varten Suurin osa web-sivun todellista sisältöä. 

Yleensä laitat otsikko Web-sivu täällä, vaikka joitakin muut tunnisteet, joita saattaa esiintyä myös täällä. Seuraavaksi tulee Web-sivun ruumis, Varsinainen lihan ja luiden sivuston. Tässä esimerkissä olemme vain laittaa yksinkertaisen virke, My First Verkkosivun, joka, jos hoidamme sivusto, näyttää vähän jotain tällaista. Meidän web-sivu ei ole liian queer, mutta ei hätää. Me kuusen sitä pian. 

Joten yllä HTML, annamme sinulle erittäin perus malli web-sivun, ei mitään fancy, vain paljain luut. Mutta jos olen luoda web-sivun, mitä jos haluan lisätä kuva vaikkapa itse? No, voin tehdä sen. On olemassa pari tapaa lisätä kuvia sivuston. Jos kuva on samassa kansiossa kuin HTML-tiedoston, voit linkittää Kuvan kautta polku näin. 

Avaat kanssa kuvan tag jälkeen in Alt määritteen kuvan lähdettä. Alt määritteen arvo on vain muutamia vaihtoehtoista tekstiä, jos käyttäjä ei voi katso kuva. Vaihtoehtoisesti voit myös linkittää kuvien kautta koko URL, kuten tämä. Nyt, että sivusto ei todellisuudessa ole olemassa, mutta jos siellä oli kuva minua kyseisessä osoitteessa, voisin käyttää lähde URL sisällyttää sen kuvan sivuilleni. Joko niin, voit päätyä paljon kauniimpi sivusto, jotain tällaista. 

No, se on aika siistiä, mutta olen sellainen ja haluavat jotain tekstiä täällä. Joten haluan vain lisätä jotain Super yksinkertainen yläpuolella kuva, kuten otsikossa. Kaikki olen tehnyt tähän mennessä on käyttää header tag, H1, ja rivinvaihdon tag, br. Header tag tekee fontti hieman vähän isompi ja näkyvämpi. Rivinvaihdon tag toisaalta taas on eräänlainen jäähtyä. Toisin kuin useimmat muut tunnisteet, sinun ei tarvitse avaaminen ja sulkeminen tauko tag, vain yllä esitetystä. Tämä johtuu siitä, että tauko ei ole sisältöä ja on näin ollen tyhjän elementin. 

Tyhjät elementit kuten tämä, voit avata ja lähellä samanaikaisesti yksinkertaisesti lukien vinoviiva at loppuun alkuperäisestä ilmoituksesta. Joten nyt minun verkkosivuilla näyttää hieman jotain tällaista. Parempi, mutta se tavallaan tuntuu kuin umpikujaan. Ei missään muualla mennä sivuun Tämän pääsivulla. No, korjata, että myös linkki. 

Mitä aion tehdä tässä käyttää Yhdistän merkitty ja tehdä kuva linkki, sanotaanko, CS50 TV. Näin kun joku napsauttaa minua, niiden selain ohjautuu toinen, luultavasti enemmän hyödyllisiä, web-sivun. Minulla on ollut minimoida koko tekstiin vähän, koska meidän web-sivu on tulossa kehittyneempiä. Mutta toivottavasti se on silti selvä. Oma sivusto näyttää samalta vain nyt, kun olen klikkaa kuvaa, selain avaa toisen välilehti CS50.tv sivun. 

Lopuksi sanokaamme aion tyyli Tällä sivustolla myöhemmin CSS. CSS on se, mitä kutsutaan CSS tyylisivu. Ja se pohjimmiltaan tarjoaa tehokkaan tapa muokata ja tyyli samanlaiset lohkot koodia. Haluan aloittaa järjestelemään HTML on helpompi muotoilla myöhemmin. Täällä olen perustaa kaksi erilaista tunnisteet auttaa järjestämään minun koodi. Olen käyttänyt tunnus-määritteen sisällä alueeseen tai div tag, ja olen käyttänyt Luokan attribuutti sisällä toinen div tag. 

ID ja luokan attribuutit toimivat samalla. Ainoa ero on, voi olla vain yksi tekijä, erityinen tunnus, mutta mikä tahansa määrä elementtejä voi jakaa luokassa. Niinpä esimerkiksi, voin käyttää luokan kuva useita kertoja, mutta en voi luo toiselle osastolle ID-top. Vaikka en ole mennyt CSS, toinen kieli yleisesti käytetty rinnalla HTML, kun aloitan muotoilu minun koodi CSS, voin käyttää näitä organisatoriset määritteet vaikutusvaltaa Web-sivun estetiikkaa. 

Kaiken divisioonan alkuun ovat samanlaiset stylings tai Muitten HTML I ryhmän osaksi luokan kuva jakavat samanlaisen ilmeen. Tämä on paljon helpompaa kuin yrittää muokata ja tyyli kuvia tai lohkojen tekstiä erikseen. 

Niinpä menimme yli perusasiat, miten tehdä Web-sivun HTML. HTML on joukko muita ominaisuuksia myös että kun pariksi muilla kielillä kuten CSS ja JavaScript, voi todella tehdä sivut erottuvat. Paras tapa totutella HTML on vain pelleillä sen kanssa, nähdä, mikä toimii ja mikä ei. 

Nimeni on Daven Farnham. Tämä on CS50. 

Niinpä esimerkiksi, voin käyttää luokan kuva - Ei, on niin paljon ominaisuuksia. Nimeni on Daven Farnham. Tämä on CS-650. Haluan sanoa CSS. Tämä on CSS.