Ako vytvoriť webovú stránku za niekoľko minút pomocou HTML5 Boilerplate

Ako vytvoriť webovú stránku za niekoľko minút pomocou HTML5 Boilerplate

Keď vytvárate nový web, v dnešnej dobe budete chcieť, aby bol kompatibilný s HTML5. Ale tiež nechcete tráviť zbytočný čas učením sa zložitosti HTML5 od začiatku, však?





Našťastie, Šablóna HTML5 Boilerplate môžem pomôcť. Je to jednoduchá klientska šablóna, ktorú môžete použiť na vytvorenie webovej stránky HTML5 za niekoľko minút. Je však tiež dostatočne výkonný, aby ste ho mohli použiť ako základ komplexného, ​​plne funkčného webu.



ako zobraziť staré textové správy

Tento tutoriál HTML5 Boilerplate sa bude zaoberať tým, čo je súčasťou šablóny, základmi, ktoré potrebujete vedieť o jej použití, a niektorými zdrojmi ďalšieho vzdelávania. Tiež vám ukážem, ako som použil šablónu na vytvorenie úplne základnej stránky iba s niekoľkými riadkami HTML.





Šablóna HTML5 kotly

Keď si stiahnete šablónu z HTML5 Boilerplate, získate množstvo priečinkov a súborov. Tu je obsah súboru ZIP:

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

Nebudeme tu preberať každý prvok v šablóne, iba základy. Aby sme sa však uistili, že máte zdroje na použitie všetkých súborov, začneme dokumentmi pomocníka.



Dokumentácia pomocníka Boilerplate HTML5

Boilerplate má zbierku dokumenty pomoci hostené v GitHub . Je to veľká pomoc, ak máte technické otázky alebo sa zaujímate, prečo bolo niečo navrhnuté tak, ako to bolo.

Takmer všetko v dokumentácii je zahrnuté aj v priečinku doc ​​šablóny. Uvidíte množstvo súborov Markdown (.md), ktoré sú veľkou pomocou pri zisťovaní, ako vytvoriť webovú stránku Boilerplate.



Ak si chcete prečítať všetko, začnite s TOC.md a odtiaľto postupujte podľa odkazov na ďalšie súbory Markdown. Ak hľadáte pomoc s konkrétnym problémom, nájdite súbor, ktorý podľa všetkého môže súvisieť; usage.md je dobré miesto, kde začať.

Počnúc CSS HTML5 Boilerplate

Šablóna HTML5 Boilerplate sa dodáva s dvoma súbormi CSS: main.css a normalize.css.



Druhý súbor, normalizalize.css, pomáha rôznym prehliadačom vykresľovať prvky konzistentným spôsobom. Ak sa chcete dozvedieť viac o tom, ako to funguje, pozrite sa na projekt normalizalize.css na GitHub .

Medzitým sa do main.css vloží ľubovoľný kód, ktorý potrebujete naformátujte svoje stránky pomocou CSS . Štandardný CSS zahrnutý v šablóne je výsledkom výskumu, ktorý vykonali vývojári a komunita HTML5 Boilerplate. Je čitateľný a pekne sa zobrazuje v rôznych prehliadačoch.

Ak chcete pridať svoj vlastný CSS, môžete ho pridať do sekcie Autorove vlastné štýly. Pridám trochu štýlu odkazov na našu ukážkovú stránku:

V základnom CSS je tiež zahrnutých niekoľko užitočných pomocných tried. Niektoré z nich skrývajú položky zo štandardných prehliadačov a čítačiek obrazovky (alebo z nejakej kombinácie).

V main.css nájdete aj podporu pre responzívny dizajn a užitočné nastavenia tlače.

Všetky tieto položky sú jasne vysvetlené komentármi v CSS:

Vo všeobecnosti môžete začať so základným CSS.

Pridanie vlastného HTML do šablóny

Boilerplate obsahuje dva súbory HTML: 404.html a index.html.

Na stránke indexu vytvoríte svoju domovskú stránku (alebo jedinú stránku, ak hľadáte jednoduchý stránkovací server).

Ak v prehliadači otvoríte indexovú stránku, zobrazí sa vám jeden riadok textu. Pohľad do HTML však odhalí oveľa viac skrývania sa v kóde. Jediná vec, ktorej si so zmenou skutočne musíte robiť starosti, je kód Google Analytics (nájdite text „UA-XXXXX-Y“ a nahraďte ho vlastným kódom sledovania).

Zvyšok HTML na indexovej stránke obsahuje informácie o webových aplikáciách, upozornenia pre staré prehliadače a užitočné skripty JavaScripty. Keď začínate, nemali by ste si s tým nič zahrávať.

Ich predvyplnenie je však dobrý spôsob, ako sa uistiť, že je váš web pripravený na maximum z HTML5.

Ak chcete vytvoriť svoju stránku, vložte kód HTML medzi značky v súbore. Tu je niekoľko základných informácií, ktoré o sebe pridám:

Chcete vytvoriť viac stránok? Vytvorte kópie tohto súboru a premenujte ich, aby ste nemuseli kopírovať a prilepovať celý kód HTML. Potom pridajte svoj obsah.

Ak chcete prispôsobiť svoju stránku 404, stačí upraviť súbor HTML. Nie ste si istí, čo dať na svoju stránku 404? Pozrite sa na tieto skvelé príklady dizajnu 404 strán.

Pridanie Favicon (a ďalších ikon)

Chcete vymeniť svoj favicon? Potom je favicon.ico súbor, ktorý budete musieť nahradiť.

Ak ešte žiadny nemáte, budete si ho musieť vytvoriť. Môžete použiť online generátor favicon alebo si vytvoriť vlastný. Uistite sa, že má 16 x 16 pixelov a typ súboru .ico.

ako hrať hru ps1 na počítači

Je dobré nad svojim faviconom popremýšľať. Použite tieto slávne favióny na vedenie svojho brainstormingu. Uistite sa, že keď pridáte nový favicon, bude sa nazývať favicon.ico.

Môžete si všimnúť, že v koreňovom adresári vášho webu sú tri ďalšie obrázky: icon.png, tile.png a tile-wide.png. Na čo slúžia tieto?

  • Icon.png sa používa pre dotykové ikony Apple. Ak vytvoríte webovú aplikáciu, táto ikona sa použije, keď si používateľ zariadenia iPhone alebo iPad pridá aplikáciu na plochu.
  • tile.png a tile-wide.png sú pre funkciu „pin“ systému Windows a zobrazia sa v systéme Windows 10.

Vo všetkých týchto prípadoch je vhodné poskytnúť ikony-ale ak nevytvárate webovú aplikáciu, môže to mať nižšiu prioritu.

Pridanie ďalších funkcií

Keď pridáte svoj HTML a favicon (ako aj všetky CSS, ktoré by ste chceli zahrnúť), bude váš web pripravený na zverejnenie. Takto jednoducho je možné použiť HTML5 Boilerplate. Nahrajte ho na svoj server a máte hotovo!

Takto vyzerá naša stránka:

Ako vidíte, iba niekoľko riadkov textu vytvorilo plne funkčnú (aj keď trochu nevýraznú) webovú stránku. Nie je to veľa, ale trvalo to len pár minút. A je veľmi rozšíriteľný pomocou HTML5. To je sila šablóny Boilerplate.

Ak však chcete, so šablónou Boilerplate môžete urobiť oveľa viac. Ak hľadáte niečo konkrétne, je veľká šanca, že to nájdete v dokumentácii pomocníka.

Ak si nie ste istí, čo môžete s HTML5 robiť, ale chceli by ste to zistiť, existuje množstvo návodov na webový design, ktoré vám pomôžu.

zdieľam zdieľam Tweet E -mail Je v poriadku nainštalovať Windows 11 na nekompatibilný počítač?

Teraz môžete nainštalovať Windows 11 na staršie počítače s oficiálnym súborom ISO ... je to však dobré?

Čítajte ďalej Súvisiace témy
  • Programovanie
  • HTML5
  • Návody na kódovanie
O autorovi Potom Albright(506 publikovaných článkov)

Dann je konzultant pre stratégiu obsahu a marketing, ktorý pomáha spoločnostiam vytvárať dopyt a potenciálnych zákazníkov. Píše tiež blogy o stratégii a obsahovom marketingu na dannalbright.com.

Viac od Danna Albrighta

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber