Kuidas HTML-is burgerit valmistada - juhendaja algajatele

Kas teate, tarbivad ameeriklased aastas 13 miljardit hamburgerit, mis on piisav, et maakera 32 korda ringi teha!

Selle burgerite vaimu hoidmiseks õppige HTML-i ja CSS-i valmistades burgerit.

Esmalt peame loetlema burgeri komponendid:

  • Ülemine kakuke
  • Rohelise salati leht
  • Tomat
  • Juust
  • Pattie
  • Rohelise salati leht
  • Alumine kakuke

Selles burgeris on 7 komponenti. Esimene probleem selle burgeri HTML-i vormistamisel on see, et HTML ei mõista neid komponente; HTML-il on oma komponendid, neid nimetatakse elementideks. Üks selline element on “div”. Nimi “div” tähistab jaotust - ekraani väikest jaotust.

HTML-is määratletakse elemendid, kirjutades selle sildi nime nurksulgudesse. Näiteks:

määratleb ühe “div” elemendi.

Looge fail nimega „burger.html“. Kasutage vabalt oma valitud redaktorit (soovitan VS-koodi). Ärge unustage salvestada faili laiendiga .html. Pärast topeltklõpsamist faili salvestamisel avaneb see teie veebibrauseris.

Seda ei kuvata veel.

Vaata, igas restoranis on Burgeri sees erineva suurusega komponendid, eks? Me pole oma HTML-is veel elemendi div suurust kirjeldanud, seetõttu kuvatakse selles kast kasti kõrgusega 0px, sellepärast me seda ei näe.

Andkem meie div-elemendile teatav kõrgus, laius ja värv, kasutades HTML-is nn stiili atribuuti. Meie Burgeri iga komponendi kõrgus on 10 pikslit. Kirjutame selle järgmiselt:

\
. Lihtne pole?

Mitme stiili kirjutamiseks eraldame selle semikooloniga, näiteks järgmiselt:

. Minge edasi ja värskendage oma koodiga burger.html faili ja avage see brauseris.

Kuvatakse meie burgeri esimene komponent; teeme neist veel 7 erinevat värvi:

Meie HTML-burgeri esimene versioon on valmis:

See ei tundu nii maitsev, eks?

Teeme ülemise ja alumise kasti ümaraks. Saame seda teha, kasutades stiilselt omadust „border-raadius”. Igal div-elemendi nurgal on omadus “raadiuse raadius”, mida saame muuta.

Lisasime ülakeha paremasse ülanurka parempoolsesse ja ülemisse nurka 80xx raadiuse ning alumise kaku paremasse ja alumisse nurka 20xx raadiust.

Meie HTML-burger hakkab juba hea välja nägema:

Teeme meie Burgeri väljanägemise paremaks, lisades ääriseraadiuse kõigile burgeri komponentidele; kuid enne seda peame oma koodi korrastama, sest atribuudid stiilis = “…” muutuvad järjest suuremaks.

HTML-is saame kasutada , et panna kõik stiilid elementidest eraldi.

Mõelge sellele nii: te ei kanna kogu oma sissetulekut sularahana, vaid hoiate seda pangas. Samamoodi ei pane me kõiki stiile elemendi enda sisse, vaid sisse - see on meie stiilide pank.

Samuti kuidas pank teab, milline raha on teie oma ja milline raha kuulub teistele inimestele? Oma identiteedi järgi. Bank teab, et koguarvust 3000 1000 kuulub Tony Starkile, 1000 kuulub Bruce Bannerile ja 1000 Steve Rogersile. Pank teab, kes nende nime all omab.

Samamoodi peame oma elementidele nime andma, et sisse paigutatud stiilid teaksid, milline stiil millise elemendi jaoks on. Teeme seda, andes elementidele ID:

Oleme igale elemendile lisanud kordumatud id, et saaksime neid tuvastada. Nüüd laseme stiilid paigutada eraldi silti :

Meie kood näeb välja pikk, kuid palju puhtam. Kõik stiilid, mille kohta kirjutasime sisemuses style = "...", on nüüd ümbritsetud tähtedega "{" ja "}" ja neile eelneb selle elemendi ID, millele eelneb omakorda sümbol "#" - kõik paigutatakse sisemusse < stiil> silt.

Nii kirjutate stiile. See on CSS, mu sõbrad, kas see tundub keeruline? :-)

Võite märgata, et meil on üks omadus, mis on kõigi elementide jaoks sama: laius (200 pikslit). Enamiku elementide kõrgus on samuti sama: 10 pikslit, välja arvatud ülaosa, kile ja alumine.

Mis oleks, kui saaksime ühised omadused üks kord kirja panna ja rakendada kõigile elementidele? Selleks võime liigitada teie elemendid klassi ja kirjutada sellele klassile stiili.

Meie näites võime kõik burgeri komponendid klassifitseerida järgmiselt: „burgeri komponent“. Klassi määramine elemendile, mille atribuut „class” on järgmine:

Ülaltoodud kood tähendab, et div-l on ainulaadne tunnus “top-bun” ja see kuulub “burger-komponent” klassi. Klassi jaoks stiili kirjutamiseks kasutate „#” asemel „.”. Stiili # top-bun {...} sees rakendatakse elemendile, mille tunnus on „top-bun“, ja stiile .burger-komponent {...} sisemuses rakendatakse kõigile elementidele, millel on klass " burgerikomponent ".

Uuendame meie koodi:

See vähendas korduva koodi paljusid ridu. Ülaosas näete stiili, mille kirjutasin klassile “burger-komponent”, ja lisaksin kõigile div elementidele klassi = “burger-komponent”. Märkus. Hoidsin kordumatuid stiile ID-de sees ja ühiseid stiile .burger-komponendi {...} sees.

Pidage meeles, et CSS-is tähendab “.” Klassi ja “#” tähendab id.

Nüüd, kui oleme oma koodi korraldanud, lisage kõigile Burgeri elementidele veidi raadiuse raadiust, et muuta meie Burger ilusamaks:

Palju parem :)

Siiani lõime kastid ja mängisime nende stiilidega (laius, kõrgus, taustavärv, äärise raadius). Me pole veel teksti lisanud. Lisame natuke teksti.

Mõne sisu jagunemiseks kirjutame selle avamärgi vahele:

ja selle sulgev silt:
. Liigume edasi ja loome uue sisu, milles on meie sisu:

  HTML burger

Pange see kood oma burger.html faili alla ja avage see oma brauseris.

Meie tekst kuvatakse, kuid see pole keskel. Teksti keskele joondamiseks kasutame omadust “text-align”. Andkem div'ile id, et saaksime selle suunata . Allpool on meie lõplik kood tekstiga joondamise atribuudiga keskel:

Ja siin on meie väljund:

See on maitsev, kas pole?

Nüüd, kui meie maitsev HTML-burger on valmis, on meil vaja formaalsusi hoolitseda. Nagu iga teine ​​programmeerimiskeel, on ka HTML alates sünniaastast: 1990. läbinud mitmeid versioone. HTML-i praegune versioon on HTML5.

Kuidas teaks brauser, millist HTML-i versiooni te oma lehe kodeerimiseks kasutate? Kui soovite brauserile öelda, et kasutate HTML5, peate lehe ülaossa lisama . HTML-i vanemate versioonide puhul oli see ülemine rida varem erinev, kuid te ei pea seda õppima, kuna me ei kasuta seda enam.

Samuti varasemates HTML-i versioonides kapseldasime kogu dokumendi sildi sisse ja kogu fail jaotati kahte suuremasse ossa: pea, sees ja korpus, sees . HTML5-s seda ei nõuta, kuid ühilduvuse kaalutlustel teeme seda ikkagi. Uuendame oma koodi Doctype, , ja abil:

Võite märgata, et stiilielement läks "pea" sisse ja kõik div-elemendid läksid "kehasse". Laadime oma stiilid ja muu metateabe peasektsiooni sisse ning kõiki elemente, mida brauseris kuvatakse, hoitakse kehas.

Me määratleme oma stiilid eraldi osas, mis juhtuks, kui saaksime selle eraldi faili panna? Meie kood näeb sel moel palju puhtam välja. Suuremate projektide juurde liikudes hakkate oma dokumendile üha rohkem elemente ja stiile lisama, teie kood muutub varsti segaseks.

Kirjutagem siis meie stiilid eraldi faili ja linkige see meie html-failiga. HTML-is saame linkida teise failiga, kasutades elementi . Looge uus fail nimega "stiilid.css" ja kleepige sinna kogu sisu ja linkige see Burger.html-i, kasutades elementi .

style.css:

burger.html:

Uued asjad kohta:

  • rel: suhe. Milline seos on lingitud failil dokumendiga? .Css-laiendiga faili nimetatakse stiililehtedeks ja seetõttu hoiame rel = “styleheet” (BTW, CSS-i täielik vorm on Cascading Style Sheet).
  • tüüp: lingitud faili tüüp; CSS-faili jaoks on see tekst / css.
  • href: hüperteksti viide. Lingitud faili asukoht.
  • lingielemendi lõpus pole . Mõned HTML-elemendid ei vaja sulgemist, neid nimetatakse isesulguvateks siltideks.

Kui ainult sõbrannaks saamine oleks nii lihtne: D

Ei, seda ei juhtu, lähme edasi.

Oleme saanud käed praktilise HTML-i ja CSS-i osas, tutvume nüüd mõne terminoloogiaga.

HTML-elementide osad:

  • Sildi nimi: div, link, stiil jne. Need on sildinimed.
  • Atribuudid: kõiki elemendi omadusi, mille me seadisime tähisega “=”, nimetatakse elemendi atribuutideks. Näiteks: id, klass. rel, tüüp, href.
  • Sulgev silt:
, , - need on elemendi sulgevad sildid. Pidage meeles, et mõned elemendid, näiteks , ei vaja sulgurit ja neid nimetatakse isesulguvateks siltideks.

Stiilide osad:

  • Valija: pidage meeles, et klasside jaoks stiili rakendamiseks kasutasime “.” Ja id-ide jaoks stiili rakendamiseks “#”? Osa, mis järgneb numbrile “.” Või “#” ja enne “{”, nimetatakse valijaks. Valijad määravad, millisele stiilile stiili rakendatakse.
  • Atribuudid: kõrgus, laius, taustavärv, äärise raadius, neid kõiki nimetatakse atribuutideks.

Tore, sa tead HTMLi ja CSS-i põhitõdesid. Enne sulgemist peame katma veel ühe asja.

Kas panite html-faili brauseris avades tähele, mida teie vahekaart brauseris loeb?

See kuvab faili tee, näiteks järgmiselt:

Saame seda muuta, kasutades silti “pealkiri”. Kirjutage jaotise sisse lihtsalt HTML Burger ja erinevuse nägemiseks laadige leht uuesti.

Sellega oleme päev otsa mu sõbrad teinud.

Palju õnne, olete nüüd HTML Burger Maker!

Kiire kokkuvõte õpitu kohta:

Kontseptsioonid:

  • HTML-dokumendi struktuur
  • Elementide kirjutamine HTML-is (
    )
  • Mõiste, kui element on „id” ja „klass”
  • Kuidas anda elemendile id ja klass
  • Kuidas kirjutada stiile elemendi sees, kasutades stiili = “…” (seda nimetatakse sisemiseks stiiliks, vältige seda nii palju kui võimalik)
  • Kuidas kirjutada elemendi stiile (seda nimetatakse manustatud stiiliks)
  • Kuidas kirjutada stiile eraldi faili ja linkida sellega HTML-i kasutades (seda nimetatakse lingitud stiilileheks)
  • Mis on sildi nimi, atribuut ja sulgev silt
  • Klassi (.) Ja id (#) valijad CSS-is

Kaasasime järgmised HTML-sildid:

Kasutasime järgmisi CSS-i atribuute:

  • laius
  • kõrgus
  • taustavärv
  • piiriraadius
  • teksti joondamine

Programmeerimistundide lõbusamaks lugemiseks tellige supersarkar.com.

Täname, et lugesite! :)