Kuinka tehdä hampurilainen HTML: ssä - Aloittelijan opas

Tiedätkö, amerikkalaiset kuluttavat 13 miljardia hampurilaista vuodessa, tarpeeksi kiertääksesi maata 32 kertaa!

Jatkamaan tätä hampurilaisten henkeä oppimalla HTML ja CSS tekemällä hampurilainen.

Ensin meidän on lueteltava hampurilaisen komponentit:

  • Top pulla
  • Vihreä salaatin lehti
  • Tomaatti
  • Juusto
  • Pattie
  • Vihreä salaatin lehti
  • Pohja pulla

Meillä on 7 komponenttia tässä hampurilaisessa. Ensimmäinen ongelma tämän Burgerin tekemisessä HTML-muodossa on, että HTML ei ymmärrä näitä komponentteja; HTML: llä on omat komponentit, joita kutsutaan elementeiksi. Yksi tällainen elementti on “div”. Nimi “div” tarkoittaa jakoa - pieni jako näytölle.

HTML-muodossa elementit määritetään kirjoittamalla tunnisteen nimi kulmasulkoihin. Esimerkiksi:

määrittelee yhden “div” -elementin.

Luo tiedosto nimeltä “burger.html”. Voit vapaasti käyttää valitsemaasi toimittajaa (suosittelen VS-koodia). Muista tallentaa tiedosto laajennuksella .html. Kun kaksoisnapsautat tiedostoa tallennettuna, se avataan selaimessa.

Se ei näytä vielä mitään.

Katso, jokaisessa ravintolassa on erikokoisia komponentteja Burgerissa, eikö niin? Emme ole vielä kuvanneet div-elementin kokoa HTML-koodissamme, joten se näyttää ruudun, jonka korkeus on 0px, siksi emme näe sitä.

Annetaan div-elementille korkeus, leveys ja väri käyttämällä HTML: ssä nimitystä ”style attribute”. Hampurilamme jokaisen komponentin korkeus on 10px. Me kirjoitamme sen seuraavasti:

\
. Eikö se ole helppoa?

Jos haluat kirjoittaa useampia kuin yksi tyyli, eromme sen puolipisteellä, kuten näin:

. Päivitä burger.html-tiedostosi tällä koodilla ja avaa se selaimessa.

Ensimmäinen komponentti hampurilaista näytetään; tehdään vielä 7 niistä eri väreillä:

HTML-hampurilaisen ensimmäinen versio on valmis:

Se ei näytä niin herkulliselta, eikö niin?

Tehdään ylä- ja alaruudut pyöristetyt. Voimme tehdä sen käyttämällä ”raja-säde” -ominaisuutta tyylillä. Jokaisella div-elementin kulmalla on ”raja-säde” -ominaisuus, jota voimme muokata.

Lisäsimme 80px: n säteen Yläpupun oikeaan ja vasempaan yläkulmaan ja 20px-säteen alaosan oikeassa alakulmassa ja oikeassa alakulmassa.

HTML-hampurilaisemme alkaa näyttää hyvältä:

Tehdään hampurilainen näyttää paremmalta lisäämällä reunan säde kaikkiin hampurilaisen osiin; mutta ennen sitä meidän on järjestettävä koodimme, koska ominaisuudet sisällä style = “…” ovat kasvamassa.

HTML-muodossa voimme käyttää laittaa kaikki tyylit erillään elementeistä.

Ajattele sitä näin: et kanna kaikkia tulojasi käteisellä, vaan pidät sitä pankissa. Samalla tavoin emme laita kaikkia tyylejä itse elementtiin, mutta - se on tyylimme.

Lisäksi kuinka pankki tietää, mikä rahasi on sinun ja mikä rahat kuuluvat muille ihmisille? Henkilöllisyytesi mukaan. Bank tietää, että yhteensä 3000: sta 1000 kuuluu Tony Starkille, 1000 Bruce Bannerille ja 1000 Steve Rogersille. Pankki tietää, kuka omistaa heidän nimensä.

Samalla tavoin meidän on annettava elementeille nimiä, jotta sisälle asetetut tyylit tietävät mikä tyyli on mikä elementti. Teemme tämän antamalla elementeille tunnuksen:

Olemme lisänneet jokaiselle elementille yksilölliset tunnukset, jotta voimme tunnistaa ne. Nyt laitetaan tyylit erilliseen -tunnisteeseen:

Koodimme näyttää pitkältä, mutta paljon puhtaammalta. Kaikki tyylit, jotka kirjoitimme sisällä style = "...", on nyt kääritty merkinnöillä “{” ja “}” ja edeltää sen elementin tunnusta, jota edeltää puolestaan ​​tunnus “#” - kaikki sijoitetaan < tyyli> -tagi.

Näin kirjoitat tyylejä. Tämä on CSS-ystäväni, näyttääkö siltä vaikeaa? :-)

Huomaat, että meillä on yksi ominaisuus, joka on sama kaikille elementeille: leveys (200 pikseliä). Useimpien elementtien korkeus on myös sama: 10px, paitsi ylhäällä pulla, pastty ja ala-pulla.

Entä jos voisimme kirjoittaa yhteiset ominaisuudet kerran ja soveltaa kaikkiin elementteihin? Tätä varten voimme luokitella elementtejä luokkaan ja kirjoittaa tyyli sille luokalle.

Esimerkissämme voimme luokitella kaikki hampurilaisen komponentit seuraavasti: ”hampurilainen komponentti”. Määritä luokka elementille, jolla on ”luokka” -ominaisuus näin:

Yllä oleva koodi tarkoittaa, että div-yksiköllä on ainutlaatuinen tunnus “top-pulla” ja se kuuluu “burger-komponentti” -luokkaan. Jos haluat kirjoittaa tyyliä luokalle, käytät "." Sijasta "#". # Top-pulla {...} -tyylin tyyliä sovelletaan elementtiin, jonka tunnus on “top-pulla”, ja .burger-komponentin {...} sisällä olevat tyylit sovelletaan kaikkiin elementteihin, joilla on luokka " hampurilainen-komponentti".

Päivitetään koodi:

Se vähensi toistuvan koodin monia rivejä. Yläosassa näet tyylin, jonka kirjoitin luokalle “burger-komponentti”, ja lisäsin myös class = ”burger-komponentti” kaikkiin div-elementteihin. Huomaa, että pidin ainutlaatuiset tyylit tunnusten sisällä ja yleiset tyylit .burger-komponentin {...} sisällä.

Muista, että CSS: ssä “.” Tarkoittaa luokkaa ja “#” tarkoittaa id.

Nyt kun olemme järjestäneet koodimme, lisäämme jonkin verran raja-säteitä kaikille elementeille, jotta burgeristamme tulee kauniimpi:

Paljon parempi :)

Tähän asti olemme luoneet laatikot ja pelanneet joidenkin niiden tyyleillä (leveys, korkeus, taustaväri, reunan säde). Emme ole vielä lisänneet tekstiä. Lisäämme tekstiä.

Jos haluat laittaa sisällön div: n sisään, kirjoitamme sen avaintunnisteen:

ja sen sulkevan tunnisteen:
väliin. Mennään eteenpäin ja luodaan uusi div sisältö sisältömme kanssa:

  HTML-hampurilainen

Sijoita tämä koodi burger.html-tiedoston alaosaan ja avaa selaimesi.

Tekstimme näkyy, mutta se ei ole keskellä. Tekstin kohdistamiseksi keskelle käytämme ”text-align” -ominaisuutta. Annetaan div-tunnuksemme, jotta voimme viitata siihen . Alla on loppukoodimme, jossa teksti-kohdistusominaisuus on asetettu keskustaan:

Ja tässä on tulosmme:

Tämä on herkullista, eikö niin?

Nyt kun herkullinen HTML-hampurilainen on valmis, meillä on joitain muodollisuuksia, joista on huolehdittava. Kuten kaikki muutkin ohjelmointikielet, HTML on käynyt läpi monia versioita syntymävuodesta 1990 lähtien. HTML: n nykyinen versio on HTML5.

Kuinka selain tietää, mitä HTML-versiota käytät sivusi koodaamiseen? Sinun on lisättävä sivun yläosaan, jotta voit kertoa selaimelle, että käytät HTML5: tä. Vanhemmissa HTML-versioissa tämä ylärivi oli aiemmin erilainen, mutta sinun ei tarvitse oppia sitä, koska emme käytä sitä enää.

Lisäksi aikaisemmissa HTML-versioissa kapseloimme koko asiakirjan -tunnisteeseen, ja koko tiedosto jaettiin kahteen pääosaan: pää, ja body, sisäpuolelle . Tätä ei vaadita HTML5: ssä, mutta teemme sen silti yhteensopivuussyistä. Päivitämme koodimme Doctype, , ja :

Huomaat, että tyylielementti meni "pään" sisään ja kaikki div-elementit menivät "rungon" sisään. Lataamme tyylimme ja muut metatiedot pääosan sisäpuolelle, ja kaikki selaimessa näkyvät elementit pidetään rungossa.

Määrittelemme tyylimme erillisessä osassa, entä jos voisimme laittaa sen erilliseen tiedostoon? Koodimme näyttää siltä paljon puhtaammalta. Kun siirryt suurempiin projekteihin, alat lisätä yhä enemmän elementtejä ja tyylejä asiakirjaasi, koodistasi tulee sotku pian.

Joten kirjoitetaan tyylimme erilliseen tiedostoon ja linkitä se html-tiedostoomme. HTML-muodossa voimme linkittää toiseen tiedostoon käyttämällä -elementtiä. Luo uusi tiedosto nimellä "stílus.css" ja liitä siihen kaikki -sisältö ja linkitä se Burger.html-tiedostoon käyttämällä -elementtiä.

style.css:

burger.html:

Uusia asioita :

  • rel: Suhde. Millainen suhde linkitetyllä tiedostolla on asiakirjaan. .Css-tunnisteella varustettua tiedostoa kutsutaan tyylitaulukoiksi, ja siksi pidämme rel = “styleheet” (BTW, CSS: n koko muoto on Cascading Style Sheet).
  • type: linkitetyn tiedoston tyyppi; se on CSS-tiedoston teksti / css.
  • href: Hypertekstin viite. Linkitetyn tiedoston sijainti.
  • linkkielementin lopussa ei ole . Jotkut HTML-elementit eivät vaadi sulkemista. Näitä kutsutaan itsesulkeviksi tunnisteiksi.

Jos vain tyttöystävän saaminen oli niin helppoa: D

Ei, niin ei tapahdu, siirrytään eteenpäin.

Olemme saaneet käsillämme käytännöllisen HTML: n ja CSS: n. Tutustumme nyt joihinkin terminologioihin.

HTML-elementtien osat:

  • Tunnisteen nimi: div, linkki, tyyli jne. Nämä ovat tunnisteiden nimiä.
  • Attribuutit: Kaikkia elementin ominaisuuksia, jotka asetamme “=” -merkillä, kutsutaan elementin määritteiksi. Esimerkiksi: id, luokka. rel, tyyppi, href.
  • Sulkeva tunniste:
, , - Nämä ovat elementin sulkevat tunnisteet. Muista, että jotkut elementit, kuten , eivät tarvitse sulkeutustagia, ja niitä kutsutaan itsesulkeviksi tunnisteiksi.

Tyylien osat:

  • Valitsin: Muista, että käytimme “.” Tyylin käyttämiseen luokassa ja “#” tyylin käyttämiseen tunnukseen? Osaa, joka on ”.” Tai “#” ja ennen ”{”, kutsutaan valitsimeksi. Valitsijat määrittelevät tyylin, jota käytetään mihin elementtiin.
  • Ominaisuudet: korkeus, leveys, taustaväri, reunan säde, näitä kaikkia kutsutaan ominaisuuksiksi.

Hienoa, tiedät HTML: n ja CSS: n perusteet nyt. Meidän on katettava yksi viimeinen asia ennen kuin suljemme.

Huomasitko, mitä välilehti lukee selaimessa, kun avaat html-tiedostosi selaimessa?

Se näyttää tiedoston polun seuraavasti:

Voimme muuttaa tämän käyttämällä ”otsikko” -tagia. Kirjoita vain HTML-hampurilainen -kohtaan ja lataa sivu uudelleen nähdäksesi ero.

Tämän avulla olemme valmiita päiväksi ystäväni.

Onnittelut, olet nyt HTML Burger Maker!

Pikakatsaus oppimaamme:

käsitteet:

  • HTML-asiakirjan rakenne
  • Elementtien kirjoittaminen HTML-muodossa (
    )
  • Käsite jos elementti on ”id” ja ”luokka”
  • Kuinka antaa tunnus ja luokka elementille
  • Kuinka kirjoittaa tyylejä elementin sisällä käyttämällä tyyliä = “…” (tätä kutsutaan inline-tyyliksi, vältä tätä niin paljon kuin pystyt)
  • Kuinka kirjoittaa elementin tyylejä … (tätä kutsutaan upotettua muotoilua)
  • Kuinka kirjoittaa tyylejä erilliseen tiedostoon ja linkittää siihen HTML-muodossa käyttämällä (tätä kutsutaan linkitetyksi tyylitaulukkoksi)
  • Mikä on tunnisteen nimi, ominaisuus ja sulkeva tunniste
  • Luokan (.) Ja id (#) valitsimet CSS: ssä

Käsittelimme seuraavia HTML-tunnisteita:

  • </li><li><Link></li><li><Style></li></ul><p>Käytimme seuraavia CSS-ominaisuuksia:</p><ul><li>leveys</li><li>korkeus</li><li>taustaväri</li><li>border-säde</li><li>text-align</li></ul><p>Tilaa supersarkar.com hauskemmista ohjelmointitunneista.</p><p>Kiitos lukemisesta! :)</p></div><div class="neighbor-articles"><h4 class="ui header">Katso myös</h4><a href="/article/how-to-write-an-elevator-pitch-41b167/" title="Kuinka kirjoittaa hissipiikkia">Kuinka kirjoittaa hissipiikkia</a><a href="/article/how-to-easily-improve-your-mindset-3-simple-steps-46aaf8/" title="Kuinka parantaa mielentilaasi helposti? (3 yksinkertaista vaihetta)">Kuinka parantaa mielentilaasi helposti? (3 yksinkertaista vaihetta)</a><a href="/article/how-to-create-an-ico-part-2-the-two-w-s-b34ae3/" title="Kuinka luoda ICO - Osa 2 - Kaksi "W"">Kuinka luoda ICO - Osa 2 - Kaksi "W"</a><a href="/article/how-to-add-google-optimize-a-b-testing-to-your-react-app-in-10-lines-of-code-636b2f/" title="Kuinka lisätä Google Optimize A / B -testaus React-sovellukseesi 10 koodirivissä">Kuinka lisätä Google Optimize A / B -testaus React-sovellukseesi 10 koodirivissä</a><a href="/article/congregation-how-to-b872f6/" title="Seurakunta: Kuinka">Seurakunta: Kuinka</a></div></main><div class="push"></div></div><footer style="height:50px">ceadesc.org<!-- --> © <!-- -->2019<!-- --> <a href="https://fr.ceadesc.org/article/how-to-make-a-burger-in-html-a-beginner-tutorial-74780d" title="https://ceadesc.org">ceadesc.org</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script> window.cookieconsent.initialise({ "palette": { "popup": { "background": "#eaf7f7", "text": "#5c7291" }, "button": { "background": "#56cbdb", "text": "#ffffff" } }, "showLink": false }); </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-3845662922897763", enable_page_level_ads: true }); </script></body></html>