HTML/CSS

Pamatujte si: Jednou z možností, jak si pořídit webovou stránku je naprogramovat si ji sám. Pokud ovládáte jazyk HTML a CSS můžete se pustit do vytváření stránek statických. To jsou stránky, které nemají žádnou logiku v pozadí a zobrazují pouze text a obrázky. Dnes už se taková forma stránek moc nevyrábí a často i ty nejjednodušší stránky mají v pozadí propracované chování.

Výhodou je, že máte plně pod kontrolou, co vytváříte, zároveň to obnáší nízké finanční náklady (“pouze” Váš čas) a platíte minimální základy na provoz (hosting). Nicméně tato možnost je vhodná za předpokladů, že umíte programovat, máte čas, vytváříte unikátní a složitější projekt a na trhu není uspokojující řešení.

Základní struktura HTML dokumentu

HTML je zkratkou pro HyperText Markup Language. V podstatě jde o nejrozšířenější značkovací jazyk pro vytváření internetových stránek a jejich grafickou úpravu. Soubory označované jako html jsou jednoduché textové soubory, které je možné upravovat v různých editorech od těch nejjednodušších až po komplikované profesionální editory sloužící k rozsáhlejším webovým prezentacím.

Tyto soubory kombinují obyčejný text a různé typy značek, které ve výsledku tvoří HTML kód. Značky (nebo někdy taky označovány jako tagy) se využívají k oddělení a vyznačení jednotlivých částí textu. Nejčastější způsob dělení značek je na párové a nepárové.

Každý dokument má základní kostru značek. Vypadá to například následovně:

Když využíváte jazyk HTML vůbec si nemusíte dělat hlavu jakou velikost znaků používáte. V zásadě je úplně jedno, jestli napíšete <head> nebo <HEAD>, ve výsledku to bude mít stejný efekt. Při vkládaní URL si na to ale dávejte pozor, aby byla cesta k souboru správná. Pokud byste rovněž v budoucnu chtěli přejít na verzi XHTML, je lepší psát všechno malým písmem, protože tam už to jedno není.

Základní formátovací značky

Mezi základní formátovací značky patří:

Také je možné vytvářet pomocí různých tagů (značek) číslované či nečíslované seznamy, tabulky nebo vkládat vybrané odkazy a obrázky.

Například:
Odkazy vkládáme pomocí párové značky <a> následovně:
<a href=“https://jsemdigitalni.cz“ … >jsem digitální</a>

Pro vkládání obrázků využíváme nepárové značky <img>.
<img src=“obrazek.jpg“ alt=“obrázek“ width=“288“ height=“180“>

Základní informace o CSS

CSS neboli Cascading Style Sheets (kaskádové styly) slouží pro grafickou úpravu webových stránek. Kdybychom se vrátili zpátky k souborům HTML, řekli jsme, že jde o typ souboru, který je kombinací textu a různých značek. Každý text musí mít nějaký obsah a formu a pomocí HTML tagů je také možné tu formu upravovat. Například <i> pro kurzívu nebo <b> pro ztučnění písma. Problémem však je, že pomocí tagů se některé věci udělat nedají, a proto vznikl novější způsob, jak formátovat text.

Tím novějším způsobem jsou právě CSS styly. Jde sice o komplikovanější způsob, ale mnohem všeobecnější a užitečnější. CSS styly dovedou například automaticky formátovat nadpisy, nastavit libovolnou velikost písma, nastavit kapitálky, zvýrazňovat odkazy po přejetí myší atd. Jednoduše řečeno jde o předpis, který určí, jak bude stránka vypadat. Navíc jakékoli změny vzhledu je možné udělat bez nutnosti zásahu do obsahu.

Základní formátovací příkazy CSS

V případě formátovacích příkazů v rámci stylů CSS je důležité určit si selektor, pro který chceme nastavit formátovaní. Představte si, že chcete titulku nastavit font nebo barvu, tak musíte jako selektor nastavit „title“. Každému selektoru pak musíme přiradit vlastnost a hodnotu. Kdybyste tedy řekněme chtěli nastavit modrou barvu, tak jako vlastnost musíme uvést „color“ a jako hodnotu barvu „blue“. Vypadalo by to následovně:

title {color: blue}

Mezi základní úpravy pomocí CSS stylů je možno považovat nastavení okrajů, rozměrů, barvy, fontu písma, textu nebo vytvoření rámečků.

Co je to JavaScript?

JavaScript je zaužívaný skriptovací programovací jazyk, který se využívá pro tvorbu webových stránek. Výhodou je, že se zapisuje přímo do HTML kódu, což je uživatelsky velice jednoduchý. Jedná se o klientský skript, co znamená, že se všechno odesílá do prohlížeče klienta. Server tedy není zatížen, ale na druhou stranu prohlížeč klienta musí podporovat daný skriptovací jazyk, aby bylo možné obsah zobrazit.

JavaScript je také výhodný v případech, kdy byste chtěly měřit různé aktivity na Vaší stránce. Pomocí jednoduchého zápisu můžete vložit kód pro Google Analytics, Facebook Pixel nebo Facebook Messenger.

Jak zjistit, zda je kód webu neoptimalizovaný

Zda je kód webu neoptimalizovaný poznáte velmi rychle. Už jen to, že načítání webové stránky trvá poměrně dlouho signalizuje nevhodné nastavení kódu. Důvodem může být například přelinkování JavaScript kódem, což způsobuje, že se klientovi musí načítat obrovské množství informací, a to ve výsledku zpomalí rychlost webu.

Dostat se k těmto informacím může v podstatě každý. Stačí si jednoduše otevřít zdrojový kód webové stránky (pravým tlačítkem kliknete na stránku a najdete možnost „zobrazit zdrojový kód“) a pak jednoduše dohledáte jaké množství skriptů stránka obsahuje.


Otestujte se

Pamatujete si důležité fakta? Zkuste náš krátký test a přejděte do další lekce.

Spustit test Ne, chci pokračovat dále bez testu

Výsledek studia

celkem splněno

- Webové stránky
- Marketing
- Legislativa
- Analytika

Webové stránky

Pro ukončení lekce splňte úspěšně krátký test na jejím závěru.


Lekce: Doména
 Lekce: HTML/CSS
 Lekce: UX a ergonomie webu
 Lekce: Specialisté webu

Inspirace pro Vás


© 2018 Provozuje Jarek Mikeš - Zpracování údajů Podmínky Enjoyed with Azami.cz