>> DAVEN Farnham: Šiandien aš ruošiuosi kalbėti šiek tiek apie HTML,
Hypertext Markup Language ".
Jūs matote HTML visur šių dienų.
Iš tiesų, jei jūs žiūrite šį Vaizdo naršyklę, jūs
matome HTML dabar.
HTML nėra programavimo kalba, o, tai žymėjimo kalba, naudojama pagal
interneto naršyklių, kuri padėtų padaryti puslapius internete.
>> Taigi jums gali paklausti, kaip tiksliai rašyti tinklalapio HTML skiriasi
nuo rašymo programą į programų kalba kaip C?
Na, C kalba su labai griežti sintaksiniai taisyklės, kurios turi būti
surinkti, kol ji gali veikti.
Jeigu jūs kada nors pamiršote įtraukti kabliataškis vienu ataskaitoje pabaigos
Jūsų kodas C, jūs žinote, ką aš kalbu apie ir atsižvelgiant į griežtą sintaksę.
>> Interneto naršyklių, nors yra šiek tiek daugiau atlaidus, kai jis ateina į HTML.
Net jei jūsų HTML nėra sintaksiškai teisingai, jūsų puslapis vis dar gali būti
rodomas naršyklėje, tačiau ji gali neatrodo taip, kaip norėjote.
Taigi, tai visada geriausia laikytis taisyklių.
Geriausias būdas gauti intuicija kaip viskas darbas yra
eiti per pavyzdį.
>> Taigi, ką mes turime čia yra pagrindinė koncepciją, internetinį puslapį.
Jūs tikriausiai pastebėjote, daug dalykų tarp kampu skliaustuose.
Na, jie yra tik žodžius.
Žymos esmės informuoti naršykles kad, ei, kažkas
ateina savo kelią.
Atminkite, nors, kai atidarote tag jums reikia jį uždaryti, kai esate
padaryti jį naudoti.
>> Taigi, pavyzdžiui, atidaryti skyrių kodo su atvira
laikiklis kūnas, skliaustai uždaromi.
Aš tada pridėti tekstą, šiuo atveju, mano Pirmasis interneto puslapis, tada, kai aš atvykau į
uždaryti šį skyrių, aš naudoju beveik identiški tegus išskyrus šį kartą su
pirmyn velniop prieš kūną.
Apskritai, tai yra formatas esate ketinate naudoti, kai norite atidaryti
ir uždarymo žymes.
Kartu atvira žyma ir pabaigos žymė kurti tai, kas vadinama elementas.
>> Jei pažvelgti į pirmą eilutę, jūs turėsite pamatyti šauktuką po
DOCTYPE HTML.
Tai tikrai tiesiog pasakoja savo naršyklę kad failas yra interneto puslapis
parašytas HTML.
HTML tegus iš esmės teigia, čia ateina kai HTML.
Tada mes turime galvą tegus su pavadinimas tegus viduje.
Vadovas tegus jūs galite galvoti, kaip sudaro HTML kodas, kuris ateina
iš jūsų interneto puslapis urmu tikrasis turinys.
>> Apskritai, jūs įdėti savo titulą interneto puslapis čia, nors yra keletas
kitų žodžius, gali pasirodyti čia taip pat.
Kitas ateina savo tinklalapį kūnas, Tikrasis mėsa ir kaulai iš savo svetainės.
Mūsų pavyzdyje, mes tiesiog paprastas sakinys, My First Svetainė,
kuris, jei mes paleisti mūsų svetainėje, atrodys šiek tiek kažką panašaus į tai.
Mūsų interneto puslapis nėra labai neįprasta,, bet nesijaudinkite.
Mes eglės it greičiau.
>> Taigi pirmiau, HTML, mes suteiksime jums labai Pagrindinis šablonas tinklalapį,
nieko išgalvotas, tik pliki kaulai.
Bet jei aš sukurti interneto puslapį, Ką daryti, jei noriu pridėti
nuotrauka, tarkim, sau?
Na, aš galiu tai padaryti.
Yra būdų, kaip pora pridėti atvaizdus savo svetainėje.
Jei paveikslėlis yra tame pačiame aplanke kaip Jūsų HTML failą, galite susieti
vaizdas per kelią, kaip šis.
>> Jūs atverti su vaizdo žyma, po per Alt atributas
šaltinis vaizdą.
Alt atributas vertė yra tik keletas alternatyvus tekstas, jei vartotojas negali
pamatyti vaizdą.
Arba, jūs taip pat galite susieti su vaizdai per visą URL, tai patinka.
Dabar, kad svetainė nėra tikrai egzistuoja, bet jei ten buvo apie paveikslėlį
man šiuo adresu, aš galėtų naudoti šaltinis URL yra
jos įvaizdis mano svetainėje.
Bet kuriuo atveju, jūs galų gale su daug gražiau tinklalapis, kažkas panašaus į tai.
>> Na, tai gana kietas, bet aš tipo iš norite tekstą čia taip pat.
Taigi galime tik pridėti kažką super paprasta aukščiau
įvaizdis, kaip antraštėje.
Viskas, ką padarei tiek, kiek yra naudoti antraštę žymė H1, ir eilutės lūžį žymeles, Br.
Antraštė tegus leidžia šrifto mažai tiek didesni ir ryškesni.
Eilutės lūžį žymeles, kita Kita vertus, yra tipo kietas.
Skirtingai nuo daugelio kitų žymių, jūs neturite atidarymo ir uždarymo pertrauka žymeles, tik
viena parodyta aukščiau.
Tai yra todėl, kad pertrauka neturi turinio Todėl ir yra tuščias elementas.
>> Tuščios elementų, tokių kaip šis, galite atidaryti ir beveik tuo pačiu metu, tiesiog
įskaitant pasviruoju brūkšniu ne pabaigoje pradinės deklaracijos.
Taigi dabar mano svetainė atrodo mažai kažkas panašaus į tai.
Geriau, bet jis tipo jaučiasi kaip aklavietę.
Nėra niekur kitur eiti žemę iš šio pagrindiniame puslapyje.
Na, galime nustatyti, kad įskaitant nuorodą.
>> Ką aš ruošiuosi daryti čia yra naudoti atributas žymimas ir padaryti
vaizdas nuorodą į, tarkim, CS50 televizorių.
Tokiu būdu, kai kas nors paspaudžia ant manęs, jų naršyklė bus nukreipti į
kitą, tikriausiai daugiau naudinga, interneto puslapis.
Turėjau sumažinti dydį tekstą šiek tiek, nes mūsų tinklalapis
vis labiau pažengusios.
Bet tikiuosi, tai visiškai aišku.
Mano svetainė atrodo lygiai taip pat tik dabar, kai aš spustelėkite ant nuotraukos,
mano naršyklė atvers kitą skirtuką CS50.tv puslapyje.
>> Galiausiai, tarkime, aš ruošiuosi stilius Ši svetainė vėliau naudojant CSS.
CSS yra tai, kas vadinama pakopinių stilių.
Ir tai iš esmės suteikia efektyvus būdas redaguoti ir stilius
panašios blokai kodą.
Noriu pradėti organizuoti savo HTML Kad būtų lengviau stilius vėliau.
Čia aš įsteigti dviejų skirtingų rūšių identifikatoriai, kurie padės organizuoti savo kodą.
Aš naudojau atributas ID viduje padalinys, arba div tegus ir Aš naudojau
Klasės atributas viduje kitas div tegus.
>> ID ir klasės atributai dirbti panašiai.
Vienintelis skirtumas yra tai, jūs galite turėti tik vienas elementas, specifinis ID, bet
bet elementų skaičius gali dalintis klasę.
Taigi, pavyzdžiui, galiu naudoti klasę image kelis kartus, bet aš negaliu
sukurti kitą padalinį su ID viršuje.
Nors aš ne dingo į CSS, dažniausiai naudojamas kita kalba
kartu su HTML, kai aš pradedu stilius mano kodas su CSS, galiu naudoti šiuos
organizaciniai atributai įtakos Mano interneto puslapio estetika.
>> Viskas pagal skyriaus viršuje turės panašias stylings ar bet
Kita grupė HTML I grupės į klasė vaizdas praleisite panašią išvaizdą.
Tai daug paprasčiau, nei bandyti keisti ir stiliaus vaizdų ar blokai
teksto atskirai.
>> Taigi, mes nuėjome per, kaip pagrindai padaryti tinklalapį su HTML.
HTML turi kitų funkcijų krūva per kad, kai suporuotas su kitomis kalbomis
kaip CSS ir JavaScript, tikrai gali padaryti puslapiai išsiskirti.
Geriausias būdas gauti patogiai HTML yra tiesiog pažaisti su juo,
pamatyti, kas pasiteisina, o kas ne.
>> Mano vardas Daven Farnham.
Tai CS50.
>> Taigi, pavyzdžiui, aš galiu naudoti klasė atvaizdas -
Ne, ten yra tiek daug atributų.
Mano vardas Daven Farnham.
Tai CS 650.
Noriu pasakyti, CSS.
Tai yra CSS.