Home-theater-designers
Kun rakennat uutta verkkosivustoa, haluat nykyään sen olevan HTML5-yhteensopiva. Mutta et myöskään halua käyttää tarpeetonta aikaa HTML5: n hienovaraisuuksien oppimiseen tyhjästä?
Onneksi, HTML5 Boilerplate -malli voi auttaa. Se on yksinkertainen käyttöliittymämalli, jonka avulla voit luoda HTML5-verkkosivuston muutamassa minuutissa. Mutta se on myös riittävän tehokas, jotta voit käyttää sitä monimutkaisen, täysin varustellun sivuston perustana.
paras valokuvasovellus Windows 10: lle
Tässä HTML5 Boilerplate -opetusohjelmassa käsitellään mallin sisältöä, perusasiat, jotka sinun on tiedettävä sen käytöstä, sekä joitain resursseja jatko -oppimiseen. Näytän myös, miten olen käyttänyt mallia luodessani hyvin yksinkertaisen sivuston, jossa on vain muutama rivi HTML -koodia.
HTML5 -laatikkomalli
Kun lataat mallin HTML5 Boilerplatesta, saat useita kansioita ja tiedostoja. Tässä on ZIP -tiedoston sisältö:
css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.pngEmme käy läpi kaikkia mallin elementtejä täällä, vain perusasiat. Varmistaaksemme, että sinulla on resurssit kaikkien tiedostojen käyttämiseen, aloitamme kuitenkin ohjeasiakirjoista.
HTML5 -kattilalevyn ohjeasiakirjat
Boilerplate sisältää kokoelman ohjeasiakirjoja GitHubissa . Tästä on suuri apu, kun sinulla on teknisiä kysymyksiä tai ihmettelet, miksi jokin asia on suunniteltu sellaiseksi kuin se oli.
Lähes kaikki asiakirjoissa olevat tiedot sisältyvät myös mallin doc -kansioon. Näet useita Markdown (.md) -tiedostoja, joista on suuri apu Boilerplate -sivuston rakentamisessa.
Jos haluat lukea kaiken, aloita TOC.md ja seuraa sieltä linkkejä muihin Markdown -tiedostoihin. Jos etsit apua tiettyyn ongelmaan, etsi tiedosto, joka kuulostaa siltä, että se saattaa liittyä asiaan. use.md on hyvä paikka aloittaa.
Alkaen HTML5 Boilerplate CSS: stä
HTML5 Boilerplate -mallissa on kaksi CSS -tiedostoa: main.css ja normalize.css.
Toinen tiedosto normalize.css auttaa eri selaimia hahmottamaan elementtejä johdonmukaisesti. Jos haluat lisätietoja sen toiminnasta, tutustu normalize.css -projekti GitHubissa .
Samaan aikaan main.css on paikka, jossa voit syöttää tarvitsemasi koodin muotoilla sivustosi CSS: llä . Mallin mukana toimitettu vakio CSS on kehittäjien ja HTML5 Boilerplate -yhteisön tekemän tutkimuksen tulos. Se on luettavissa ja näkyy hienosti eri selaimissa.
Jos haluat lisätä oman CSS: n, voit lisätä sen Tekijän mukautetut tyylit -osioon. Lisään hieman linkin muotoilua esimerkkisivullemme:
Perus -CSS: ään sisältyy myös useita hyödyllisiä auttajaluokkia. Jotkut niistä piilottavat tavallisilta selaimilta ja näytönlukuohjelmilta (tai jonkin yhdistelmän).
Myös main.css -tiedostossa on tuki responsiiviselle suunnittelulle ja hyödyllisille tulostusasetuksille.
Kaikki nämä asiat selitetään selkeästi CSS: n kommenteilla:
Yleensä voit aloittaa perus CSS: n käytön.
Oman HTML -koodin lisääminen malliin
Boilerplate sisältää kaksi HTML -tiedostoa: 404.html ja index.html.
Hakusivulla voit luoda kotisivusi (tai ainoan sivusi, jos haluat yksinkertaisen hakulaitteen).
Jos avaat hakemistosivun selaimessa, näet yhden tekstirivin. Mutta HTML: ään tutustuminen paljastaa paljon enemmän piiloutumista koodiin. Ainoa asia, joka sinun on todella huolehdittava muutoksesta, on Google Analytics -koodi (etsi teksti 'UA-XXXXX-Y' ja korvaa se omalla seurantakoodillasi).
Muut hakemistosivun HTML -koodit sisältävät tietoja verkkosovelluksista, ilmoituksia vanhoista selaimista ja hyödyllisiä JavaScriptejä. Kun aloitat, sinun ei tarvitse sekoittaa mihinkään tähän.
Jos ne ovat jo valmiiksi täytettyjä, se on kuitenkin hyvä tapa varmistaa, että sivustosi on valmis saamaan kaiken irti HTML5: stä.
Voit luoda sivusi lisäämällä HTML -koodin tiedoston tunnisteiden väliin. Tässä on perustietoja, jotka lisään itsestäni:
Haluatko luoda lisää sivuja? Luo kopiot tästä tiedostosta ja nimeä ne uudelleen, jotta sinun ei tarvitse kopioida ja liittää kaikkea HTML -tiedostoa. Lisää sitten sisältösi.
Jos haluat muokata 404 -sivua, muokkaa vain HTML -tiedostoa. Etkö ole varma, mitä lisätä 404 -sivullesi? Katso nämä upeat 404 sivun suunnitteluesimerkit.
Faviconin (ja muiden kuvakkeiden) lisääminen
Haluatko vaihtaa suosikkisi? Sitten favicon.ico on tiedosto, joka sinun on vaihdettava.
Jos sinulla ei vielä ole sitä, sinun on luotava sellainen. Voit käyttää online -favicon -generaattoria tai suunnitella oman. Varmista vain, että se on 16 x 16 pikseliä ja että .ico -tiedostotyyppi on.
kuinka paljon kaistanleveyttä käytän
On hyvä idea miettiä suosikkiasi. Käytä näitä kuuluisia faviconeja ohjaamaan aivoriihiäsi. Varmista, että kun lisäät uuden faviconin, sen nimi on favicon.ico.
Saatat huomata, että sivustosi juurihakemistossa on kolme muuta kuvaa: icon.png, tile.png ja tile-wide.png. Mitä varten nämä ovat?
- icon.png käytetään Applen kosketuskuvakkeisiin. Jos luot verkkosovelluksen, tätä kuvaketta käytetään, kun iPhone- tai iPad -käyttäjä lisää sovelluksen aloitusnäyttöön.
- tile.png ja tile-wide.png ovat Windowsin '' pin '' -toimintoja varten, ja ne näkyvät Windows 10: ssä.
On hyvä idea näyttää kuvakkeet kaikkiin näihin tapauksiin --- mutta jos et ole luomassa verkkosovellusta, se voi olla alempi prioriteetti.
Lisää toiminnallisuutta
Kun olet lisännyt HTML -koodisi ja faviconin (sekä mahdolliset CSS -tiedostot), sivustosi on valmis julkaistavaksi. Näin helppoa on käyttää HTML5 -kattilalevyä. Lataa se palvelimellesi ja olet valmis!
Tältä sivumme näyttää:
Kuten näette, vain muutama tekstirivi on luonut täysin toimivan (jos vähän tylsän) verkkosivuston. Se ei ole paljon, mutta kesti vain muutaman minuutin. Ja se on erittäin laajennettavissa HTML5: llä. Se on Boilerplate -mallin voima.
Mutta voit tehdä paljon enemmän Boilerplate -mallilla, jos haluat. Jos etsit jotain erityistä, löydät sen hyvistä ohjeista.
Jos et ole varma, mitä voit tehdä HTML5: llä, mutta haluat selvittää, siellä on paljon web -suunnitteluohjeita, jotka auttavat sinua.
Jaa Jaa Tweet Sähköposti Onko ok asentaa Windows 11 yhteensopimattomaan tietokoneeseen?Voit nyt asentaa Windows 11: n vanhemmille tietokoneille virallisella ISO -tiedostolla ... mutta onko hyvä tehdä niin?
Lue seuraava Liittyvät aiheet- Ohjelmointi
- HTML5
- Koodausoppaat
Dann on sisältöstrategia- ja markkinointikonsultti, joka auttaa yrityksiä luomaan kysyntää ja liidejä. Hän kirjoittaa myös blogia strategiasta ja sisältömarkkinoinnista osoitteessa dannalbright.com.
Lisää Dann Albrightiltatilaa uutiskirjeemme
Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!
Klikkaa tästä tilataksesi