Jak vytvořit web za několik minut pomocí HTML5 Boilerplate

Jak vytvořit web za několik minut pomocí HTML5 Boilerplate

Když vytváříte nový web, v dnešní době budete chtít, aby byl kompatibilní s HTML5. Ale také nechcete trávit zbytečný čas učením se složitosti HTML5 od nuly, že?





Naštěstí Šablona HTML5 Boilerplate může pomoct. Je to jednoduchá front-endová šablona, ​​kterou můžete použít k vytvoření webové stránky HTML5 během několika minut. Je ale také dostatečně výkonný, abyste jej mohli použít jako základ komplexního, plně funkčního webu.



operační systémy nenalezeny Windows 7

Tento tutoriál HTML5 Boilerplate se bude zabývat tím, co je součástí šablony, základy, které potřebujete vědět o tom, jak ji používat, a některými zdroji pro další učení. Také vám ukážu, jak jsem použil šablonu k vytvoření velmi základního webu pouze s několika řádky HTML.





Šablona HTML5 Boilerplate

Když si stáhnete šablonu z HTML5 Boilerplate, získáte řadu složek a souborů. Zde je obsah souboru 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 zde procházet každý prvek v šabloně, pouze základy. Abychom se však ujistili, že máte prostředky k použití všech souborů, začneme s dokumenty nápovědy.



Dokumentace nápovědy HTML5 Boilerplate

Boilerplate má sbírku dokumenty nápovědy hostované na GitHubu . Je to velká pomoc, pokud máte technické dotazy nebo se ptáte, proč bylo něco navrženo tak, jak to bylo.

Téměř vše v dokumentaci je také obsaženo ve složce doc šablony. Uvidíte řadu souborů Markdown (.md), které jsou velkou pomocí při zjišťování, jak vytvořit web Boilerplate.



Pokud si chcete vše přečíst, začněte s TOC.md a odtud následujte odkazy na další soubory Markdown. Pokud hledáte pomoc s konkrétním problémem, najděte soubor, který zní, jako by mohl souviset; usage.md je dobré místo pro začátek.

Počínaje CSS HTML5 Boilerplate

Šablona HTML5 Boilerplate se dodává se dvěma soubory CSS: main.css a normalize.css.



Druhý soubor, normalize.css, pomáhá různým prohlížečům vykreslovat prvky konzistentním způsobem. Chcete -li se dozvědět více o tom, jak to funguje, podívejte se na projekt normalizalize.css na GitHubu .

Mezitím main.css je místo, kam vložíte libovolný kód, který potřebujete naformátujte svůj web pomocí CSS . Standardní CSS, který je součástí šablony, je výsledkem výzkumu provedeného vývojáři a komunitou HTML5 Boilerplate. Je čitelný a pěkně se zobrazuje v různých prohlížečích.

Pokud chcete přidat svůj vlastní CSS, můžete jej přidat do sekce Vlastní styly autora. Přidám trochu stylu odkazů pro naši ukázkovou stránku:

V základním CSS je také řada užitečných pomocných tříd. Některé z nich skrývají položky ze standardních prohlížečů a čteček obrazovky (nebo nějaké kombinace).

Také v main.css najdete podporu pro responzivní design a užitečné nastavení tisku.

Všechny tyto položky jsou jasně vysvětleny komentáři v CSS:

Obecně můžete začít se základním CSS.

Přidání vlastního HTML do šablony

Boilerplate obsahuje dva soubory HTML: 404.html a index.html.

Na stránce rejstříku vytvoříte domovskou stránku (nebo jedinou stránku, pokud se chystáte na jednoduchý pager).

Pokud v prohlížeči otevřete stránku rejstříku, zobrazí se vám jeden řádek textu. Pohled do HTML ale odhalí mnohem více skrývání se v kódu. Jediná věc, se kterou si ve skutečnosti musíte dělat starosti, je kód Google Analytics (najděte text „UA-XXXXX-Y“ a nahraďte jej vlastním sledovacím kódem).

Zbytek HTML na indexové stránce obsahuje informace pro webové aplikace, oznámení pro staré prohlížeče a užitečné JavaScripty. Když začínáte, neměli byste si s tím nic dělat.

Jejich předvyplnění je však dobrý způsob, jak zajistit, aby byl váš web připraven na maximum z HTML5.

Chcete -li vytvořit svou stránku, vložte kód HTML mezi značky v souboru. Zde je několik základních informací, které o sobě přidám:

Chcete vytvořit více stránek? Vytvořte kopie tohoto souboru a přejmenujte je, abyste nemuseli kopírovat a vkládat celý HTML. Poté přidejte svůj obsah.

Chcete -li upravit stránku 404, upravte soubor HTML. Nejste si jisti, co dát na stránku 404? Podívejte se na tyto skvělé příklady designu 404 stránek.

Přidání Faviconu (a dalších ikon)

Chcete vyměnit svůj favicon? Pak je favicon.ico soubor, který budete muset nahradit.

Pokud ještě žádný nemáte, budete si jej muset vytvořit. Můžete použít online generátor faviconů nebo si navrhnout vlastní. Jen se ujistěte, že má 16 x 16 pixelů a typ souboru .ico.

jak opravit přehřátý notebook

Je dobré se nad svým faviconem trochu zamyslet. Použijte tyto slavné favikony k vedení svého brainstormingu. Ujistěte se, že když přidáte nový favicon, bude se nazývat favicon.ico.

Můžete si všimnout, že v kořenovém adresáři vašeho webu jsou tři další obrázky: icon.png, tile.png a tile-wide.png. K čemu to jsou?

  • Icon.png se používá pro dotykové ikony Apple. Pokud vytvoříte webovou aplikaci, tato ikona se použije, když uživatel zařízení iPhone nebo iPad přidá aplikaci na domovskou obrazovku.
  • tile.png a tile-wide.png jsou pro funkci Windows 'pin' a zobrazí se v systému Windows 10.

Pro všechny tyto případy je dobré poskytnout ikony-ale pokud nevytváříte webovou aplikaci, může to mít nižší prioritu.

Přidání více funkcí

Jakmile přidáte svůj HTML a favicon (stejně jako jakýkoli CSS, který můžete chtít zahrnout), váš web je připraven k publikování. Tak jednoduché je použití HTML5 Boilerplate. Nahrajte jej na svůj server a máte hotovo!

Naše stránka vypadá takto:

Jak vidíte, jen několik řádků textu vytvořilo plně funkční (i když trochu nevýrazný) web. Není to mnoho, ale trvalo to jen pár minut. A je velmi rozšiřitelný pomocí HTML5. To je síla šablony Boilerplate.

Pokud však chcete, můžete s šablonou Boilerplate udělat mnohem víc. Pokud hledáte něco konkrétního, je velká šance, že to najdete v dokumentaci nápovědy.

Pokud si nejste jisti, co můžete s HTML5 dělat, ale chtěli byste to zjistit, existuje spousta návodů pro webový design, které vám pomohou.

Podíl Podíl tweet E-mailem Je v pořádku nainstalovat Windows 11 na nekompatibilní počítač?

Nyní můžete nainstalovat Windows 11 na starší počítače s oficiálním souborem ISO ... je ale dobré to udělat?

Číst dále Související témata
  • Programování
  • HTML5
  • Návody na kódování
O autorovi Pak Albright(506 článků zveřejněno)

Dann je poradce pro strategii obsahu a marketing, který pomáhá společnostem vytvářet poptávku a potenciální zákazníky. Píše také o strategickém a obsahovém marketingu na dannalbright.com.

Více od Danna Albrighta

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru