Blog

Jak začít s tvorbou webu?

Tento článek je určen těm, kteří by se chtěli začít učit tvořit webové stránky ať už pro svoje koníčky či pro svoje podnikání nebo by se tvorbě webu chtěli věnovat v budoucnu profesionálně.

12.3.2023 | doba čtení: asi 10 min

Na začátku máme vlastně dvě možné cesty po kterých se vydat. Buď můžeme využít nějaký redakční systém jako Wordpress, Webnode, Wix, Estranky a mnoho dalších. Nebo se můžeme naučit webové stránky psát přímo ve formě kódu.
Pojďme si nyní stručně nastínit, jaký je v tom rozdíl a jaké má každý z těchto přístupů přednosti a úskalí. Podle vašich cílů, dosavadních schopností a hlavně účelu, proč web vytváříte.

Tvorba pomocí redakčního systému.

Redakční systém umožňuje vytvořit webové stránky bez znalosti psaní kódu. Web se vytváří v rozhraní redakčního systému definováním struktury webu, jeho vzhledu funkcí a obsahu. Ovládání rozhraní redakčních systémů je zpravidla více intuitivní, ale to neznamená, že naučit se s redakčním systémem pracovat nevyžaduje jisté úsilí.

Redakční systémy zpravidla nabízejí množství předpřipravených šablon, které si můžete zvolit podle typu a zamýšleného využití webovách stránek. Může jít například o blog, periodikum, stránky pro propagaci produktů nebo služeb, umělecké stránky nebo eshop.

Redakční systémy umožňují relativně snazší přidávání různých funkčních prvků webu jako jsou například kontaktní formuláře, diskuzní fóra nebo sledování návštěvnosti a mnoho dalších.

Kromě tvorby webu usnadňují také jeho plnění obsahem, neboť jejich součástí je takzvaný Content Management System (CMS) neboli systém pro správu obsahu. Jinak řečeno pro přidávání textů, fotografií nebo videí.

Poskytovatelé redakčních systémů obvykle také nabízejí webhosting a zakoupení domény. Webhosting je služba, která vám umožní zveřejnit vaše stránky v internetové síti a zpřístupnit ostatním uživatelům. Zjednodušeně je to místo na serveru, kam svůj web nahrajete. V rámci redakčního systému můžete mít tuto službu zdarma, ale s tím že název domény vašich stránek bude obsahovat i jméno poskytovatele webhostingu. Chcete-li mít název domény podle svého přání a není-li tento název již obsazen, pak je třeba zvolit zpoplatněnou službu. Nejedná se však o nijak závratnou částku.

Asi nejznámějším redakčním systémem je Wordpress. Zmiňme jen, že existuje ve dvou iteracích. Wordpress.com coby redakční systém i s integrovaným webhostingem, nebo Wordpress.org, což je open source software a je tedy zdarma. Vytvořený web pak nahrajete na úložiště s doménou zakoupenou u jakéhokoli správce domén a poskytovatele webhostingu.

Klíčovým faktorem pro rozhodnutí bude podle našeho názoru možnost plnění obsahu webu přes redakční systém. Představme si, že máme blog nebo periodikum a v redakci více autorů. Díky CMS budou mít možnost vkládat příspěvky a články samostatně bez správce webu.

Asi lze říci, že pokud chceme mít stránky co nejrychleji, je redakční systém také vhodnější volbou. Nicméně to neznamená, že by tvorba webů v redakčním systému nebyla také profesionální záležitostí. Tvůrce webu v redakčním systému je zcela plnohodnotná profese.

Co se týká využití, tak například pro zprovoznění e-shopu je určitě levnější a rychlejší volbou využít právě redakčního systému. Toliko velmi stručně o redakčních systémech.

Psaní webových stránek v kódu

Základní kód webových stránek je psán v jazyce HTML (hyper text markup language). Vzhled stránek je definován v připojeném kódu v jazyce CSS.

Dalšími jazyky nejčastěji využívanými k tvorbě a funkci webových stránek je JavaScript a PHP. Zjednodušeně lze říci, že JavaScript je určen k "rozpohybování" webu a PHP se využívá k interakci mezi uživatelem s serverem, kde je web nahrán.

Kromě jazyků se během studia tvorby webu psaním kódu webu setkáte ještě s pojmy Framework a knihovna, jako jsou například Bootstrap či Tailwind pro CSS nebo React, JQuery či Angular pro JavaScript. Jde o již napsané kódy, takže je nemusíme sami vymýšlet, ale musíme je umět správně použít.

Jak tedy začít? Začátek je právě HTML a CSS. Zkušení lektoři radí, že psát kód se naučíme právě psaním kódu. Doporučujeme tedy najít na Youtube nějaký tutoriál a podle něj psát naše první řádky.

Dříve se kódy psaly do prostého textového editoru. Dnes nám tuto činnost usnadňují nástroje jako například Visual Code Studio nebo Brackets, které nám našeptávají a upozorňují na chyby.

HTML je úplný základ psaní webového kódu. Je v něm definována hlavní struktura stránek, jejich obsah a propojení s dalšími soubory v ostatních jazycích. Troufneme si říci, že základy HTML se lze naučit poměrně rychle.

Dalším jazykem nepostradatelným pro dnešní webové stránky je CSS neboli Cascading Style Sheets. Tento jazyk definuje vzhled webu. Rozměry, fonty, barvy, základní animace. Kdo se věnuje grafické tvorbě, toho bude CSS vyloženě bavit.

S těmito dvěma jazyky lze již vytvořit vizuálně hezkou takzvanou webovou prezentaci, což je také web svého druhu. Akorát se moc nehýbe a neumožňuje interakci se serverem na kterém je uložen.

K "rozhýbání webu" potřebujeme další jazyky. Určitě dalším stupněm studia jazyků pro webovou tvorbu je JavaScript. Zatímco jazyky HTML a CSS se neřadí mezi programovací jazyky v pravém slova smyslu, Java Script je již plnohodnotným programovacím jazykem, jehož ovládnutí vám umožní snažší naučení jazyků dalších. Doba potřebná ke zvládnutí JavaScriptu je však většinou delší než u předchozích dvou jazyků.

JavaScript nám umožní mimo jiné zasahovat do struktury a obsahu HTML a CSS na základě akcí uživatele. Funkční prvky webu, které vyžadují využití Java Scriptu jsou například galerie, slidery, theme switche, pop-up okna, tlačítko nahoru, pozvolné skrolování po zmáčknutí odkazu na stejnou stránku a mnoho dalších funkcionalit.

Asi prvním využitím jazyka PHP bude odeslání vzkazu vyplněného do kontaktního formuláře.

Pro použití výše uvedeným funkcionalit není však nutno tyto jazyky plně ovládat. Téměř vždy lze nalézt návod na internetu nebo na Youtube a potřebnou sekvenci kódu zkopírovat do našich stránek.

Proč se rozhodnout učit se tvořit stránky pomocí psaní kódu? Tak třeba právě proto, abychom se naučili, jak psát kód a postupně se posunuli ke studiu dalších jazyků. Ovládnutí webového kódu nám umožní větší kontrolu nad vzhledem a funkcí našeho webu. Pakliže chceme vytvořit nějaké vizuálně méně standardní zato však více tvůrčí webové rozhraní, znalost kódu bude určitě lepší volbou. Díky vlastnímu kódu mohou být stránky datově menší a tím pádem rychlejší k načtení na zařízení návštěvníka. Výše zmíněné redakční systémy také umožňují upravovat či vkládat přímo kód stránek a tak jejich šablony modifikovat a doplňovat.

Pro ty, kteří chtějí psát kód se jistě hodí umění psát všemi deseti, ale díky pokročilým textovým editorům se bez toho také obejdete, neboť budete mnohem více využívat našeptávač v kombinaci s myší nebo šipkami a klávesou enter. Budete-li však psát kód deseti prsty doporučujeme používat americký layout klávesnice. Uvidíte, že máte všechny znaky více po ruce a můžete tak psát rychleji.

Závěr

Co se týká tvorby stránek obecně, tak na začátku bude určitě nějaká myšlenka. Základní strukturu stránek můžeme nakreslit na papír nebo flipchart. Definujeme si mapu našeho webu čili jakéhosi pavouka jednotlivých podstránek, z nichž se bude web skládat a jak budou propojeny odkazy.

Co se týká rozvržení jednotlivých stránek našeho webu definujeme jaká a kde budou okna, kontejnery, sekce, nadpisy, texty a tlačítka v závislosti na rozměrech obrazovky neboť v dnešní době jistě chceme, aby náš web byl responzivní a mohl být prohlížen na různých zařízení od velkého stolního monitoru, přes tablet až po mobilní telefon.

V nějakém grafickém editoru si jednotlivé stránky předkreslíme včetně barevného zobrazení. Ale samozřejmě můžeme navrhovat a tvořit zároveň. Zejména ve fázi učení, kde je jistý chaos naprosto přirozený. Postupně však přijdeme na to, že systematičnost ulehčuje práci.

Užitečnými skills, které možná mnohým studium webové tvorby usnadní je ovládání grafických editorů, znalost anglického jazyka, znalost programování nebo digitálního marketingu. Nicméně není to podmínkou. Vůle a vášeň učit se a tvořit je mnohem mocnější.

Tento článek je pouze velice skromným příspěvkem a vodítkem, jak s tvorbou webu začít. Na internetu naleznete přehršle návodů a tutoriálů, které vám usnadní začátky, ale také umožní vaše schopnosti prohloubit a posunout dále třeba až na profesionální úroveň.

Byl pro vás tento článek přínosný? Chcete-li můžete poslat příspěvek na kávu, která pomohla tento článek napsat.