>> 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.