Co je HTML, CSS a JavaScript a proč znát alespoň základy

Základy fungování webu

Toto není web pro vývojáře, ale i když chcete mít jen svůj blog, na který píšete články, je fajn vědět, jak vlastně ten váš web funguje. Není potřeba znát každý detail nebo co znamená tenhle nebo onen ve zdrojovém kódu, ale mít alespoň nějaký pojem o tom, z jakých částí je webová stránka složena, se prostě hodí pro ladění obsahu a vlastně celého SEO.

Sám nejsem expert na HTML, CSS ani JavaScript, ale minimálně základní znalost mi umožňuje poměrně snadno řešit základní problémy, které se občas objeví, aniž bych musel někoho shánět nebo se doptávat na fórech. Umět nějaké věci na webu vyřešit svépomocí znamená, že je vše typicky daleko rychlejší, než když to řešíte přes někoho dalšího, a hlavně můžete daleko snadněji testovat a ladit, co opravdu vyhovuje.

Jak jsem řekl, nejsem expert, takže i některá má vysvětlení budou značně zjednodušená pro potřeby pochopení základů, ale pro potřeby tvorby blogu a pochopení, jak vše funguje z trochu techničtějšího hlediska, bude myslím článek dostačující, a uvede vás do toho, jak funguje kombinace HTML/CSS/JS.

Pokud vás pak tyto techničtější věci nebo samotný vývoj webu budou zajímat, existuje spousta materiálů a příkladů. Osobně mám nejraději w3schools.com, kde je vše i s příklady, které můžeme okamžitě upravovat a ihned vidíme výsledek toho, co naše úpravy udělají. Jediný menší problém je, že web je kompletně v angličtině.

Jak vlastně vypadá webová stránka

Každá webová stránka, kterou navštívíte, je vytvořena pomocí série pokynů. Váš internetový prohlížeč (Chrome, Firefox, Safari atd.) vezme tyto pokyny a přeloží/zobrazí je do podoby, kterou následně vidíme na obrazovce, když si nějaký web otevřeme. Zobrazenou stránku následně můžeme číst, prohlížet si nebo dokonce s ní komunikovat nebo do ní zadávat údaje.

Webová stránka bez prohlížeče je ovšem jen textový soubor (respektive řada textových souborů). Potřebujeme právě prohlížeč, aby tento soubor správně interpretoval a zobrazil tak, aby to bylo uživatelsky přívětivé a weby byly použitelné. Podíváme se, jaké typy těchto textových souborů můžeme prohlížečům „předhodit“ tak, aby je interpretoval. Mezi základní typy patří právě HTML, CSS a JavaScript (JS), kde: 

• HTML poskytuje základní strukturu stránek, která je vylepšována a upravována dalšími technologiemi, jako jsou CSS a JavaScript.
• CSS se používá k úpravám vzhledu jednotlivých prvků, formátování nebo umístění jednotlivých prvků na webu
• JavaScript se používá k ovládání chování různých prvků, ale i k manipulaci HTML nebo CSS

HTML a CSS vlastně nejsou technicky vzato programovací jazyky (i když řada lidí používá pojmy jako „programovat v HTML“). HTML a CSS jsou informace o struktuře stránky a stylu. Oproti tomu JavaScript programovacím jazykem je, ale pro jeho uchopení je potřeba nejdříve znát HTML a CSS.

HTML

Jazyk HTML je základem každé webové stránky, bez ohledu na složitost webu nebo použité technologie. Jde o jakýsi výchozí bod, bez kterého se prostě neobejdete, hlavně pokud jde o samotný vývoj webu. Pro potřeby blogování je ovšem také velmi dobré vědět, jak HTML funguje a proč si dávat záležet na korektním použití

Jak funguje jazyk HTML?

HTML je zkratka pro HyperText Markup Language (hypertextový značkovací jazyk), tedy značkovací jazyk, kde jsou jednotlivé stránky propojeny hypertextovými odkazy (typicky odkazy v textu nebo obrázku, na které můžeme klasicky kliknout, ale také odkazy na umístění prvků nebo dalších dokumentů, které se mají na webu zobrazit nebo načíst).

„Značkovací jazyk“ znamená, že namísto programovacího jazyka k provádění funkcí používá jazyk HTML značky (anglicky tag, počeštěně tagy) k identifikaci různých typů prvků na webu. Tyto prvky slouží k různému účelu, a právě značky říkají, co daný prvek je a jakou má strukturu. Může jít o odstavec, nadpis, obrázek, tabulku atp..

Značkovací jazyk používá k označení kód, v tomto případě konkrétně HTML značky, tagy, někdy také elementy.

Každá webová stránka se skládá z řady těchto HTML značek označujících jednotlivé typy obsahu na stránce. Každý typ obsahu na stránce je „zabalen“ do značek HTML.

Každý odstavec v tomto článku je „zabalen“ do značky <p>, která označuje odstavec (p z anglického paragraph – odstavec). Stejně tak každý nadpis, obrázek a vše ostatní mají své vlastní značky.

Po otevření značky se předpokládá, že veškerý následující obsah je součástí této značky, dokud jí neuzavřeme. Těmto značkám s otevřením i uzavřením se říká párové značky. Když odstavec končí, vložil bych uzavírací značku odstavce: </p>. Všimněte si, že uzavírací značky vypadají úplně stejně jako otevírací značky, jen u zavírací značky je ihned za závorkou lomítko, které označuje právě ono zavření. 

 Příklady párových značek:

<h1>Toto je nadpis<h1>
<p>Toto je odstavec</p>

Značky mohou být do sebe i vnořeny, tedy v rámci jedné značky se mohou nacházet další značky. Pozor, pokud je značka vnořena do značky jiné, je potřeba, aby byla také v rámci této značky uzavřena:

Příklad vnořených značek:

<p>Toto je normální text. <strong>Toto je tučný text v rámci stejného odstavce.</strong> Toto je normální text.</p>

Takto by potom prohlížeč tuto značku zobrazil, pokud bychom ji umístili do zdrojového kódu:

Toto je normální text. Toto je tučný text v rámci stejného odstavce. Toto je normální text.

Chybné vnoření značek – značka <strong> je otevřena v rámci značky <p>, ale je uzavřena mimo tuto značku:

<p>Toto je normální text. <strong>Toto je tučný text v rámci stejného odstavce.</p></strong>

Některé značky uzavření nepotřebují, protože v nich není žádný obsah – říká se jim nepárové značky. Může jít o značky <br> (zalomení řádku), <img src=“obrazek.jpg“> (zobrazí obrázek ze zdroje v definované URL).

Prohlížeče si také často poradí i se značkami, které mají být uzavřeny, ale nejsou. Třeba u odstavce z kontextu pochopí, kde se měl nacházet konec odstavce, a stránku pak vykreslí správně. Pokud ale nějaký tag má být uzavřen, doporučuji ho prostě uzavřít, i když ve výsledku to na vykreslené stránce nic nezmění.

Pomocí jazyka HTML můžete přidávat nadpisy, odstavce, formátovat části textu, ovládat zalomení řádků, vytvářet seznamy, vytvářet speciální znaky, vkládat obrázky, vytvářet odkazy, sestavovat tabulky, ovládat některé styly a mnoho dalšího.

Samozřejmě se typicky o správné umístění značek starají editory v rámci našeho redakčního systému. Tyto editory fungují v zásadě stejně, jako třeba klasické psaní ve Wordu, ale text nebo obsah správně obalují HTML značkami. Abychom tedy vytvořili nový odstavec, nemusíme ručně uzavřít značku odstavce a vytvořit otevřít novou, ale jen zmáčkneme Enter, a tento nový odstavec se vytvoří sám. Vytvoření HTML kódu třeba nějakého článku je tak v rámci blogování v zásadě stejné, jako vytvoření dokumentu v textovém editoru na počítači, neboli se o ruční psaní značek nemusíme starat, redakční systémy toto dělají za nás.

HTML a SEO

Pokud jde o optimalizaci pro vyhledávače (SEO), tak je korektní HTML kód naprostý základ. Právě HTML kód je to, co vyhledávače primárně čtou, pokud přijdou na náš web. Je potřeba, aby použité značky byly korektní a vyhledávače pochopily strukturu našeho webu. Proto je správné použití odstavců, nadpisů, obrázků, tabulek a všeho dalšího klíčové k tomu, aby se náš web líbil Googlu, Seznamu Bingu a dalším. Vyhledávače pak chápou, která část obsahu je důležitá, co je nadpis a jakou má tento nadpis úroveň, že je nějaký obsah třeba tabulka a tak dále.

Vyhledávače si umí stránky i vykreslit a podívat se, jak by vypadaly v prohlížeči, vyhodnotit kontrast barev, blízkost prvků a celkový design, ale pořád platí, že korektní a čitelný HTML kód je něco, na co bychom si měli dávat pozor, pokud chceme, aby se naše weby zobrazovaly vysoko ve výsledcích vyhledávání.

Technicky vzato si také můžeme vytvářet i své vlastní značky, které prohlížeče ani vyhledávače neznají, ale právě proto, že je neznají, toto nedoporučuji. Měli bychom se držet těch značek, které jsou definovány a budou správně interpretovány. Definovaných značek značek je dost pro libovolné strukturování textu, takže tu není potřeba vytvářet nějaké nové značky.

CSS

CSS je zkratka pro Cascading Style Sheets, tedy kaskádové styly. Tyto styly určují, jak mají prvky na dané stránce vypadat.

HTML vs. CSS

Zatímco jazyk HTML tvořil základní strukturu webu, CSS dodává celému webu styl a vzhled. Barvy, fonty, tlačítka a mnoho dalšího jsou na webu zásluhou právě CSS. Pokud budete chtít změnit velikost písma, vytvořit si pěkné tlačítko s odkazem nebo cokoliv podobného, bude CSS právě to, co budete potřebovat.

Zjednodušeně řečeno, CSS je seznam pravidel, která mohou přiřazovat různé vlastnosti značkám HTML, a to buď určené jednotlivým značkám, více značkám, celému dokumentu nebo více dokumentům.

Když bychom se podívali do zdrojového kódu více webů a podívali se na články, tak zjistíme, že jsou si tyto HTML kódy poměrně hodně podobné a využívají se stejné značky. Nadpisy, odstavce, obrázky i vše ostatní jsou v HTML kódu v zásadě stejné, ale přesto jsou velikost písma, zvolený font nebo barvy web od webu rozdílné. To je zásluha právě CSS, tedy seznamu pravidel, jak má obsah skutečně vypadat. Zde si volíme, jaký font použít, jaká má být velikost písma nebo třeba mezery mezi řádky i jednotlivými odstavci.

Pomocí CSS také určujeme, kde se jaký prvek má nacházet, a to v rámci celého dokumentu nebo relativně vůči jiným prvkům. CSS je velmi mocný nástroj a dnes umožňuje jak základní stylování, tak pokročilejší zobrazování obsahu včetně různých animací. Lze také volit různé styly pro různé velikosti obrazovek a asi milion dalších věcí.

Jak vypadají kaskádové styly

Zápis stylů je poměrně přímočarý, kdy pod pojmem selektor vybíráme ten HTML prvek, který chceme upravovat, mezi složené závorky pak píšeme vlastnosti, tedy co chceme upravovat (třeba že chceme upravovat barvu písma) a hodnoty (tedy například že písmo má být zelené):

selektor {
vlastnost: hodnota;
vlastnost2: hodnota2;
}

Pro úpravu například barvy a fontu všech tagů <p> bychom zapsali:

p {
font-family: Arial;
color: red;
}

Tento zápis by upravil font všech odstavců na Arial a barvu změnil na červenou.

CSS selektory

Nebudeme zde moc zabředávat do podrobností, protože o selektorech existují podrobnější články (znovu odkážu na w3schools.com). Selektor je způsob, jakým označujeme prvek nebo více prvků na stránce. V příkladu výše jsme vybrali například všechny značky <p>.

Do značek v HTML kódu můžeme přidávat i různé atributy, které pak slouží pro odlišení se od zbytku obsahu, a které pak využíváme například pro stylování v CSS. Například:

<p>Toto je běžný odstavec</p>
<p class="cervena">Toto je odstavec s class cervena</p>

Pokud bychom chtěli upravit kompletně všechny odstavce, použijeme příklad výše. Co kdybychom ale chtěli upravit pouze některé odstavce? Zde budou roli hrát právě různé atributy, v tomto případě atribut class s nějakou hodnotou, v tomto případě hodnotou „cervena“.

V CSS pak můžeme odchytit právě tuto class, a stylovat pouze ty prvky, které mají tento atribut. V CSS pak jako selektor označíme právě tento atribut, kdy je na začátku tečka, která značí právě to, že odchytáváme nějakou class:

.cervena {
color: red;
}

Selektory můžeme i různě napojovat, volit prvky, které jsou vnořeny do jiných prvků a využívat různé atributy s různými zápisy selektorů. Mezi základní (a nejčastěji používané) patří:

Ve výsledku je kombinace HTML a CSS taková souhra. V HTML kódu bychom si měli prvky označovat tak, abychom je snadno mohli odchytávat třeba takto v CSS bez komplikovaných složených selektorů (v tabulce výše je opravdu základ, různých selektorů a jak se dají skládat a co znamenají je poměrně dost, ale není to pointa tohoto článku). 

Pokud máte možnost upravovat HTML kód stránek, je typicky velmi vhodné si prvky, které chcete nastylovat, označit nějakou class, a tu pak snadno stylujete podle potřeby.

Pokud tato možnost úpravy HTML není, když pracujete třeba ve WordPressu, je potřeba využívat předpřipravených atributů, které jsou využívány vaší šablonou, což bohužel často znamená také používat právě složené selektory nebo vyhledávat již zapsané styly a kopírovat selektory z nich.

Velmi pěkný návod v angličtině, co jsou to selektory, jak se používají i jak je za sebe skládat, ale také praktické příklady, najdete v tomto YouTubovém videu (a kanál doporučuji sledovat, pokud vás zajímá programování v JavaScriptu nebo CSS):

Jak najít použité selektory pomocí internetového prohlížeče

V tomto případě dost pomáhají přímo prohlížeče. Například v Google Chrome (a ostatní prohlížeče jsou v tomto velmi podobné) kliknete pravým tlačítkem myši na nějaký prvek na webové stránce, a zvolíte možnost „Prozkoumat“.

V pravé části se vám otevře panel pro vývojáře. V horní části vidíme zdrojový kód, kde si můžeme překlikávat na jednotlivé prvky stránky. Ve spodní části pak vidíme styly, které se na daný prvek aplikují, a to včetně selektorů. Takto pak můžeme najít použité styly u každého prvku a případně si i selektory zkopírovat a využít pro naše vlastní nastylování:

Kam se zapisují styly

V zásadě máme 3 možnosti:

1) Inline styly – styly zapisujeme přímo k daným elementům. Hodí se, pokud chceme opravdu upravit jediný prvek a nechceme si vytvářet novou class. Jde o velmi rychlý způsob zapsání stylu, který má navíc vysokou specificitu (viz ve článku níže). Inline style může vypadat nějak takto:

<p style="color:red; font-size:20px;">Barva textu je červená a velikost písma je 20px</p>

Inline styly se hodí v zásadě jen tehdy, když potřebujete jednorázově upravit styly nějakého prvku na jedné stránce. Může se to hodit, když potřebujete upravit třeba nějaký jeden prvek ve článku, a nepočítáte s tím, že byste to museli dělat často. Výhoda inline stylů také v přebití specificity, kdy prostě co napíšete přímo k danému elementu, to v zásadě platí, pokud to ještě více nepřebijete někde jinde pomocí !important.

2) Interní styly – styly si zapíšeme přímo do HTML kódu mezi tagy <style>. Tento tag můžeme umístit v zásadě kamkoliv v dokumentu a klidně i vícekrát, pokud k tomu máme důvod. Mezi tagy jen zapisujeme dané selektory, vlastnosti a hodnoty. Třeba takto:

<style>
p {
color:red;
}
h1 {
font-size: 25px;
}
</style>

3) Externí styly (samostatný soubor) – styly zapíšeme stejně, jako bychom to udělali mezi <style> tag, jen bez tohoto tagu, do souboru s příponou .css. V HTML kódu poté specifikujeme, odkud se má soubor .css načíst, kde do href píšeme URL k danému souboru:

<link rel="stylesheet" href="mojestyly.css">

Právě načítání stylů ze samostatného souboru je asi nejlepší řešení, kdy se styly nejlépe spravují z jednoho místa, aniž by bylo potřeba je upravovat na každé stránce.

Všechny 3 tyto možnosti načtení stylů můžeme zcela libovolně kombinovat. Můžeme některé styly zapsat přímo do HTML a klidně je rozepsat mezi více tagů <style>, některé styly načíst z jednoho nebo více externích souborů, jiné zase inline zapsat přímo k elementům. Prohlížeč všechny tyto styly načte a používá. Pokud se některé styly překrývají, musíme pak řešit specificitu.

Specificita CSS

Dost často se stane, že některé styly se překrývají. Pokud označíme všechny odstavce černou, ale k nějakému přidáme class, kterou poté samotnou obarvíme třeba na červenou, jakou barvu bude mít tento odstavec s přidanou a nastylovanou class? Celkem logicky bychom očekávali červenou, a měli bychom pravdu, ale proč vlastně?

Velmi důležitým faktorem je takzvaná specificita, která určuje, jaký styl ve výsledku prohlížeč použije, pokud se některé styly překrývají. Platí, že čím specifičtěji zapíšeme nějaký selektor, tím vyšší má tento styl váhu, a tedy bude mít přednost před styly s nižší specificitou.

Pořadí specificity podle selektorů

Pořadí pro atributy je následující, kdy čím níže, tím vyšší specificita a vyšší váha:

1. Selektor typu elementu a pseudo-elementu – například selektor p nebo ::before
2. Selektor class, atributů a pseudo-class – například .nejakaclass – označuje všechny elementy s danou class, [type=“radio“]) a pseudo-class například :hover)
3. Selektor ID – například #nejakeid – označuje jeden element s atributem id – pozor, hodnota daného ID může být na celé stránce jen jednou

V praxi budeme řešit hlavně specificitu u typu elementu, class a ID. Prvky také dědí styly z nadřazených elementů, do kterých jsou vnořeny. Neboli pokud vnoříme nějaké značky, tak přestože je v CSS nespecifikujeme, tak tyto vnořené značky budou mít stejné styly, jako jejich rodič.

Obecně pak má přednost ten styl, který přesněji zacílí na daný element.

Pokud se v CSS nacházejí styly se stejnou specificitou, přednost má ten, který je zapsán později.

Poměrně dobrou praxí, pokud máte možnost, je řešit vše pomocí class, tedy elementy opatřit vlastní class, a ty pak řešit samostatně v CSS. Tím v zásadě obejdete veškerou specificitu, protože vždy cílíte přesně na ty elementy s danou class.

inline styly a !important

Styly můžeme zapisovat přímo k elementům v HTML kódu, viz výše ve článku o zápisu CSS.

Vidíme, že styl jsme zapsali přímo k elementu ve stejném formátu, jako jsme si ukazovali v příkladech. Tomuto zápisu stylů říkáme, že jde o inline styly. Pokud takto styl zapíšeme, má přednost před veškerými zápisy v CSS, až na jednu důležitou výjimku

Touto výjimkou je !important, který píšeme přímo ke stylu, který upravujeme, například:

p {
color: red !important;
}

!important přebíjí veškeré další zápisy, a to včetně inline stylů. Pozor, jde o zcela poslední možnost, jak přebít všechny ostatní styly a vynutit si ten jeden, který opravdu potřebujeme.  Než ale !important použijeme, měli bychom vždy uvažovat o případné změně HTML kódu (pokud je to možné) nebo zacílení na daný element pomocí selektorů a přebitím specificity.

V zásadě chceme !important využívat jen ve chvíli, kdy potřebujeme přebít inline styly, nebo již vysokou specificitu. Zajímavé typy, jak případně přebíjet specificitu, najdete přímo na stránkách pro developery od Mozilly.

JavaScript

JavaScript je jediný programovací jazyk mezi trojicí HTML/CSS/JavaScript. JavaScript je podporován všemi moderními webovými prohlížeči a používá se téměř na všech webech pro výkonnější a složitější funkce. Všeho všudy není JavaScript nějak složitý, a super výhoda je, že nemusíme vlastně nic stahovat. Scripty můžeme psát přímo do HTML a spustit je v libovolném moderním prohlížeči. Začít s JavaScriptem je tak o mnoho snazší, než u jiných programovacích jazyků, protože není potřeba nic instalovat nebo nastavovat.

Jako tutoriály znovu doporučuji již zmíněné w3schools.com, kde se jede vše od začátku, přestože jde hlavně o praktické příklady a hotové funkce, se kterými se na webu můžete potkat.

K čemu se JavaScript používá?

JavaScript je programovací jazyk, který se používá k úpravě obsahu webových stránek. Ty se mohou měnit na základě interakcí uživatelů nebo různých dalších podmínek. V praxi JavaScript umožňuje vytvářet interaktivní stránky s komplikovanějšími funkcemi.

Všechny možné kalkulačky, vyskakovací okna, animace nebo dynamické prvky jsou zpravidla na webu zásluhou JavaScriptu. Díky tomu lze odchytávat různé akce uživatelů, jako je hýbání myši, scrollování, vyjetí myši z okna prohlížeče, kliknutí na tlačítko a mnoho dalšího. Na základě událostí se pak mohou dít různé další akce, kdy JavaScript může do HTML kódu doplnit nějaké prvky, které se vám pak zobrazí třeba v podobě vyskakovacího okna, banneru nebo něčeho podobného.

Velmi jednoduchý příklad JavaScriptu můžete vidět třeba tady:

V principu se při kliknutí nebo přejetí myči na tlačítko spustí funkce, která změní obsah a styly textu nad tlačítky. Jde o jednoduchou věc, která nemá zase tak moc praktické využití, ale jde tu vidět, jak asi JavaScript funguje, tedy že dynamicky mění obsah nebo vzhled stránky na základě typicky nějaké uživatelské interakce, v tomto případě kliknutí, podržení nebo přejetí myši.

JavaScript nebudeme probírat nějak do hloubky (hlavně proto, že nejsem nijak zkušený programátor) a obecně řečeno je to asi něco, co využijete nejméně, pokud se zrovna programování nechcete věnovat. Pro účely blogování je naprosto dostačující vědět, co je HTML a jak funguje v kombinaci s CSS, což pomůže s vyladěním obsahu a optimalizací webu.

Až poté, co HTML a CSS ovládáte na alespoň základní úrovni (znáte základní značky a umíte vlastně cokoliv nastylovat podle potřeby), má smysl začít s JavaScriptem. Pokud ale nechcete, nemusíte JS nikdy řešit, protože upřímně řečeno, pro potřeby blogu opravdu nedává moc smysl se tímto zabývat a zatěžovat.