Web Coding Guide

Základy HTML

<html>

Popis:
Kořenový (root) element celé HTML stránky. Všechen obsah webu musí být uvnitř tohoto tagu. Prohlížeč díky němu ví, že pracuje s HTML dokumentem.

Jak se využívá:
Používá se vždy jednou na začátku dokumentu a obaluje celý obsah stránky.

Ukázka Kódu

<head>

Popis:
Obsahuje metadata o stránce – tedy informace, které se nezobrazují přímo uživateli (např. název stránky, propojení na CSS, znaková sada).

Jak se využívá:
Používá se pro nastavení stránky a připojení externích souborů (CSS, fonty, skripty).

Ukázka Kódu

<head>

<title>Moje stránka</title>

</head>

<body>

Popis:
Obsahuje veškerý viditelný obsah stránky – texty, obrázky, tlačítka atd.

Jak se využívá:
Sem patří vše, co má uživatel vidět a s čím může interagovat.

Ukázka Kódu

<body>

<h1>Ahoj světe</h1>

</body>

Rozdělení stránky

<header>

Popis:
Záhlaví stránky nebo sekce. Obvykle obsahuje logo, název webu nebo navigaci.

Jak se využívá:
Používá se na začátku stránky nebo jednotlivých sekcí pro důležité úvodní informace.

Ukázka Kódu

<h1>Moje stránka</h1>

<nav>

<a href="#"> Kontakt </a>

</nav>

</header>

<footer>

Popis:
Zápatí stránky nebo sekce. Obsahuje doplňující informace, jako jsou kontakty, copyright nebo odkazy.

Jak se využívá:
Používá se na konci stránky nebo sekcí.

Ukázka Kódu

</footer>

<main>

Popis:
Hlavní obsah stránky. Měl by obsahovat unikátní obsah dané stránky (ne navigaci, ne patičku).

Jak se využívá:
Používá se pro oddělení hlavního obsahu od ostatních částí jako header nebo footer. Na stránce by měl být pouze jeden.

Ukázka Kódu

<main>

<h2>Vítej na mém webu</h2>

<p>Tady je hlavní obsah stránky.</p>

</main>

<section>

Popis:
Slouží k logickému rozdělení obsahu stránky do tematických celků (sekcí).

Jak se využívá:
Používá se, když má obsah smysluplnou strukturu (např. kapitoly, části článku). Každá sekce by měla mít ideálně nadpis.

Ukázka Kódu

<p>Jsme firma zabývající se tvorbou webů.</p>

</section>

Obsah stránky

<h1> - <h6>

Popis:
Nadpisy různých úrovní(heading). <h1> je nejdůležitější (hlavní nadpis), <h6> nejméně důležitý.

Jak se využívá:
Používají se pro strukturování obsahu. Pomáhají uživatelům i vyhledávačům pochopit hierarchii stránky. Na stránce by měl být obvykle jen jeden <h1>.

Ukázka Kódu

<h1>Hlavní nadpis</h1>

<h2>Podnadpis</h2>

<h3>Menší sekce</h3>

<p>

Popis:
Odstavec textu (paragraph).

Jak se využívá:
Používá se pro běžný textový obsah. Prohlížeč automaticky přidává mezery mezi odstavci.

Ukázka Kódu

<p>Toto je odstavec textu na stránce.</p>

<p>Další odstavec s informacemi.</p>

<div>

Popis:
Univerzální blokový element bez vlastního významu (tzv. „kontejner“).

Jak se využívá:
Používá se hlavně pro rozvržení stránky (layout) a stylování pomocí CSS nebo práci s JavaScriptem. Neměl by nahrazovat sémantické prvky jako <section> nebo <main>.

Ukázka Kódu

<p>Obsah v kontejneru</p>

</div>

<a>

Popis:
Slouží k vytváření odkazů (hyperlinků), které uživatele přesměrují na jinou stránku nebo část webu.

Jak se využívá:
Používá se s atributem href, který určuje cílovou adresu. Může odkazovat na jiný web, soubor nebo konkrétní část stránky.

Ukázka Kódu

Přesměrovat v tomto okně:

<a href= "https://www.google.com"> Přejít na Google </a>

Otevření odkazu v novém okně:

<a href= "https://www.google.com" target="_blank"> Otevřít Google </a>

<img>

Popis:
Slouží k zobrazení obrázku na stránce.

Jak se využívá:
Používá se s atributem src (cesta k obrázku) a alt (alternativní text pro přístupnost a případ, kdy se obrázek nenačte).

Ukázka Kódu

<br>

Popis:
Zalomí řádek (udělá nový řádek bez vytvoření nového odstavce).

Jak se využívá:
Používá se pro krátké zalomení textu (např. adresa, básně). Neměl by se používat pro oddělování odstavců.

Ukázka Kódu

<p>

Jméno: Jan Novák<br>

Email: jan@email.cz

</p>

Seznamy

<ul>

Popis:
Neuspořádaný seznam (unordered list) – položky nejsou číslované, ale mají odrážky.

Jak se využívá:
Používá se pro výpis položek, kde nezáleží na pořadí (např. seznam funkcí, ingrediencí).

Ukázka Kódu

<ul>

<li>Jablko</li>

<li>Banán</li>

<li>Pomeranč</li>

</ul>

<ol>

Popis:
Uspořádaný seznam (ordered list) – položky jsou číslované.

Jak se využívá:
Používá se tam, kde pořadí hraje roli (např. postup, instrukce).

Ukázka Kódu

<ol>

<li>Zapni počítač</li>

<li>Otevři prohlížeč</li>

<li>Navštiv stránku</li>

</ol>

<li>

Popis:
Jednotlivá položka seznamu.

Jak se využívá:
Používá se uvnitř <ul> nebo <ol> pro definování konkrétních položek.

Ukázka Kódu

<ul>

<li>První položka</li>

<li>Druhá položka</li>

</ul>

<dl>

Popis:
Definiční seznam (description list) – používá se pro dvojice termín + popis.

Jak se využívá:
Hodí se pro slovníky, pojmy a jejich vysvětlení nebo seznamy vlastností.

Ukázka Kódu

<dl>

<dd>Jazyk pro tvorbu webových stránek</dd>

</dl>

<dt>

Popis:
Termín (název) v definičním seznamu.

Jak se využívá:
Používá se uvnitř <dl> jako označení pojmu.

Ukázka Kódu

<dl>

<dd>Stylování webu</dd>

</dl>

<dd>

Popis:
Popis nebo definice k termínu.

Jak se využívá:
Používá se uvnitř <dl> jako vysvětlení k <dt>.

Ukázka Kódu

<dl>

<dt>JavaScript </dt>

<dd>Programovací jazyk pro interaktivitu</dd>

</dl>

Tabulky

<table>

Popis:
Základní element pro vytvoření tabulky.

Jak se využívá:
Obaluje celou tabulku a obsahuje další prvky jako řádky, buňky nebo hlavičky.

Ukázka Kódu

<table>

<tr>

</tr>

</table>

<thead>

Popis:
Hlavička tabulky.

Jak se využívá:
Obsahuje záhlaví tabulky (názvy sloupců). Pomáhá se strukturou a stylováním.

Ukázka Kódu

<thead>

<tr>

<th>Jméno</th>

</tr>

</thead>

<tbody>

Popis:
Tělo tabulky – hlavní data.

Jak se využívá:
Obsahuje většinu řádků s daty.

Ukázka Kódu

<tbody>

<tr>

</tr>

</tbody>

<tfoot>

Popis:
Patička tabulky.

Jak se využívá:
Používá se pro souhrny, poznámky nebo celkové výsledky.

Ukázka Kódu

<tfoot>

<tr>

<td>Celkem</td>

<td>1 osoba</td>

</tr>

</tfoot>

<tr>

Popis:
Řádek tabulky (table row).

Jak se využívá:
Používá se uvnitř <thead>, <tbody> nebo <tfoot> pro vytvoření jednoho řádku.

Ukázka Kódu

<tr>

</tr>

<td>

Popis:
Buňka tabulky s běžnými daty(table data).

Jak se využívá:
Používá se uvnitř <tr> pro jednotlivé hodnoty.

Ukázka Kódu

<th>

Popis:
Hlavičková buňka tabulky.

Jak se využívá:
Používá se pro názvy sloupců nebo řádků. Text je automaticky tučný a zarovnaný.

Ukázka Kódu

<th>Jméno</th>

<caption>

Popis:
Nadpis tabulky.

Jak se využívá:
Popisuje obsah tabulky – důležité pro přehlednost a přístupnost.

Ukázka Kódu

<table>

<caption>Seznam uživatelů</caption>

</table>

<col>

Popis:
Definuje vlastnosti jednotlivých sloupců.

Jak se využívá:
Používá se hlavně pro stylování (např. šířka sloupce).

Ukázka Kódu

<colgroup>

Popis:
Skupina sloupců v tabulce.

Jak se využívá:
Používá se společně s <col> pro hromadné nastavení stylů více sloupců.

Ukázka Kódu

<table>

<col>

</colgroup>

</table>

Kompletní tabulka

Seznam uživatelů
Jméno	Věk
Jan	25
Eva	30
Celkem	2 osoby

Ukázka Kódu

<table>

<caption>Seznam uživatelů</caption>

<col>

</colgroup>

<thead>

<tr>

<th>Jméno</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

<td>Celkem</td>

<td>2 osoby</td>

</tr>

</tfoot>

</table>

Formuláře

<form>

Popis:
Základní obal pro formulář. Umožňuje uživateli odeslat data (např. přihlašovací údaje, zprávy).

Jak se využívá:
Používá se s atributy jako action (kam se data pošlou) a method (způsob odeslání – GET nebo POST).

Ukázka Kódu

</form>

<input>

Popis:
Vstupní pole pro uživatele.

Jak se využívá:
Používá se pro zadávání dat (text, email, heslo atd.). Typ pole se určuje atributem type.

Ukázka Kódu

<label>

Popis:
Popisek k formulářovému poli.

Jak se využívá:
Propojuje se s <label> pomocí atributu for (který odpovídá id inputu). Zlepšuje přístupnost a kliknutí na text aktivuje pole.

Ukázka Kódu

<label for="jmeno">Jméno:</label>

<button>

Popis:
Tlačítko, které může odeslat formulář nebo spustit akci.

Jak se využívá:
Ve formuláři se často používá s type="submit" pro odeslání dat.

Ukázka Kódu

<button type="submit"> Odeslat </button>

Kompletní formulář

Ukázka Kódu

<label for="jmeno">Jméno:</label><br>

<label for="email">Email:</label><br>

<button type="submit"> Odeslat </button>

</form>

Nastavení

<title>

Popis:
Určuje název stránky, který se zobrazuje v záložce prohlížeče.

Jak se využívá:
Je důležitý pro uživatele i SEO (vyhledávače). Každá stránka by měla mít unikátní a výstižný název.

Ukázka Kódu

<title>Moje webová stránka</title>

<meta>

Popis:
Slouží k definování metadat o stránce (např. znaková sada, popis stránky, responzivita).

Jak se využívá:
Používá se pro technická nastavení a informace pro prohlížeče a vyhledávače.

Ukázka Kódu

<link>

Popis:
Propojuje HTML dokument s externími soubory (nejčastěji CSS).

Jak se využívá:
Používá se pro načtení stylů, ikon (favicon) nebo fontů.

Ukázka Kódu

<style>

Popis:
Umožňuje zapisovat CSS přímo do HTML dokumentu.

Jak se využívá:
Používá se pro menší projekty nebo rychlé testování stylů (většinou se ale preferuje externí CSS přes <link>.

Ukázka Kódu

<style>

body {

background-color: lightgray;

}

p {

color: blue;

}

</style>

Úvod

Jak propojit HTML s CSS

Jsou tři způsoby, jak propojit CSS s HTML:

Použít externí css soubor a propojit ho pomocí elementu <link> v hlavičce HTML souboru
Použít <style> element v hlavičce html souboru
Použít atribut style v HTML elementu

Ukázka

1. Externí:

<head>

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

</head>
2. V Hlavičce:

<head>

<style>

body {

background-color: blue;

}

</style>

</head>
3. V Elementu:

<p style="color: red;"> Text </p>

Syntax a Selektory

Syntax

Pravidlo CSS se skládá ze selektoru a deklaračního bloku:

Selektor ukazuje, jakou třídu, id nebo element chcete stylovat.
Blok deklarací obsahuje deklarace oddělené středníky.
Deklarace obsahuje vlastnost CSS a její hodnotu oddělenou dvojtečkou.
Bloky deklarací jsou uzavřeny do složených závorek.

Ukázka

Selektor

body

Vlastnost : Hodnota

{background-color: blue;}

Selektory

CSS selektory se používají k výběru prvků HTML, které chcete stylovat.

Níže je seznam několika základních typů:

Selektor elementu, který vybírá HTML prvky na základě jejich názvu.
ID selektor, který používá atribut id HTML elementu k výběru konkrétního elementu. ID elementu je v rámci stránky jedinečné.
Selektor Třídy vybírá prvky HTML se specifickým atributem třídy.
Univerzální selektor, který vybírá všechny elementy na stránce.

Selektory je také možné seskupovat. Oddělujeme je čárkou.

Ukázka

Dle Elementu:

element {}
Dle ID:

#id {}
Dle Třídy:

.class {}
Univerzální:

* {}
Seskupené selektory

selektor1, selektor2, selektor3, ... {}

Základní vlastnosti

Barvy a Pozadí

V CSS se barvy určují pomocí předdefinovaného názvu barvy nebo pomocí hodnoty RGB, HEX, HSL, RGBA nebo HSLA

Můžeme upravit například barvu:

Pozadí
Textu
Ohraničení

Seznam všech předdefinovaných barev

Ukázka

Barva Pozadí:

background-color:blue
Barva Textu:

color:blue
Barva Ohraničení:

border:2px solid blue
Možnosti definování barev:

color:blue

color:rgb(255, 99, 71)

color:#001047

color:hsl(147, 50%, 47%)

V těchto je také možné definovat průhlednost:

color:rgba(255, 99, 71, 0.5)

color:hsla(9, 100%, 64%, 0.5)

Border

Vlastnosti ohraničení umožňují nastavit styl, velikost a barvu ohraničení.

Styly ohraničení:

dotted - Tečkované ohraničení
dashed - Přerušované ohraničení
solid - Plné ohraničení
double - Dvojité ohraničení
groove - 3D drážkované ohraničení
ridge - 3D vroubkované ohraničení
inset - 3D zastouplé ohraničení
outset - 3D vystouplé ohraničení
none - Bez ohraničení
hidden - Skryté ohraničení

Styly je možné kombinovat.

Šířku ohraničení je možné nastavit na specifickou hodnotu (např. px) nebo pomocí tří předdefinovaných hodnot: thin, medium a thick

Styly a šířky mohou mít jednu až čtyři hodnoty (Nahoře, Vpravo, Dole, Vlevo).

Je také možné specifikovat jednu stranu ohraničení. Např. border-top-radius

Barvy ohraničení jsou vysvětleny v sekci barvy.

Ukázka

Zápis v kódu:

border-style:dotted

border-style:dotted solid double dashed

border-width:medium

border-width:25px 10px 4px 35px
Ukázka:

dotted dashed solid double

groove

ridge

inset

outset

Zakulacené rohy

Zakulacené rohy můžeme vytvořit pomocí vlastnosti border-radius

Může mít jednu až čtyři hodnoty (Nahoře, Vpravo, Dole, Vlevo).

Pro jednotlivé rohy lze také použít the border-top-left-radius, border-top-right-radius, border-bottom-right-radius a border-bottom-left-radius

Ukázka

border-radius:5px

border-radius:5px 10px 15px 10px

Výška a Šířka

Tyto vlastnosti nastavují, jako výšku a šířku element bude mít.

Mají následující hodnoty:

auto - Základní hodnota. Prohlížeč spočítá výšku a šířku.
Specifická hodnota (např. px)
% - Procenta
initial - Nastaví šířku nebo výšku na základní hodnotu.
inherit - Výška nebo šířka bude převzata z nadřazené hodnoty.

Ukázka

Výška:

height:auto
Šířka:

width:auto

Texty a Fonty

Texty

U textu můžeme nastavit barvu, zarovnání a dekoraci.

O barvě textu je možné se více dozvědět v sekci barvy.

Možnosti zarovnání textu:

left
right
center
justify

Při nastavení „justify“ se každý řádek natáhne tak, aby měl stejnou šířku a levý a pravý okraj byly rovné.

Je několik možností dekorace textu:

overline
line-through
underline

Můžeme také změnit barvu, styl nebo tloušťku dekorace.

Styly dekorace:

solid
double
dotted
dashed
wavy

Ukázka

Zarovnání textu:

text-align:left

text-align:right

text-align:center
Dekorace textu:

text-decoration-line:overline

text-decoration-line:line-through

text-decoration-line:underline
Vlastnosti dekorace textu:

text-decoration-color:black

text-decoration-style:wavy

text-decoration-thickness:5px

Fonty

V CSS můžeme také nastavit vlastní písmo.

Je možné nastavit několik písem jako „záložní“ systém. Pokud prohlížeč nepodporuje první písmo, zkusí použít další. Názvy písem by měly být odděleny čárkou.

Dále lze u písem nastavit jejich velikost a také styl (normal,italic,...)

Ukázka

Nastavení písma:

font-family: "Times New Roman", Times, serif
Styl písma:

font-style: italic
Velikost písma:

font-size: 16px

Box Model

V CSS se termín „box model“ používá, když se mluví o webdesignu a rozvržení.

Skládá se ze čtyř částí (od nejvnitřnější k nejvnější):

Content - Obsah (Obrázky, text, atd.)
Padding - Prázdná oblast mezi obsahem a ohraničením (Border)
Border - Ohraničení obsahu a paddingu
Margin - Prázdná oblast okolo ohraničení.

Ukázka

Content, Padding, Border, Margin

Margin a Padding

Margin se používá k vytvoření prostoru kolem prvků. Definují vzdálenost mezi okrajem elementu a okolními elementy.

Padding se používá k vytvoření prostoru kolem obsahu elementu, uvnitř definovaných okrajů.

Margin a Padding je také možné nastavit na jednotlivé strany:

margin/padding-top
margin/padding-left
margin/padding-right
margin/padding-bottom

Nebo pomocí čtyř hodnot. (top,right,bottom,left)

Ukázka

Margin:

margin:20px
Padding:

padding:20px
Specifické nastavení:

margin:12px 4px 2px 4px

Position

Static

Výchozí nastavení pozice.

Staticky umístěné prvky nejsou ovlivněny vlastnostmi top, bottom, left a right.

Prvky se statickou pozicí jsou umístěny dle normálního toku stránky.

Ukázka

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

position: static

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Relative

Prvek je umístěn vzhledem ke své normální pozici v dokumentu.

Nastavení vlastností top, right, bottom a left způsobí, že se prvek posune mimo svou normální polohu.

Ukázka

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

position: relative; left: 30px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fixed

Prvek je umístěn relativně vzhledem k zobrazovacímu oknu, což znamená, že vždy zůstává na stejném místě, i když je stránka posunuta.

Vlastnosti top, right, bottom a left se používají k nastavení konečné polohy elementu.

Ukázka

Použitím css kódu níže docílíte elementu, který se bude držet v pravém dolním rohu stránky.

position: fixed;bottom: 0;right: 0;width: 100px; border: 2px solid black;

Absolute

Prvek je umístěn vzhledem k nejbližšímu umístěnému předkovi s jinou pozicí než static.

Pokud ale element s absolutní pozicií nemá žádné předky, použije tělo dokumentu a pohybuje se spolu s posouváním stránky.

Pozor: Prvky s absolutní polohou se mohou překrývat s jinými prvky.

Ukázka

relative

absolute
Kód relative:

position: relative;width: 192px;height: 192px;border: 3px solid black;
Kód absolute:

position: absolute;width: 112px;height: 112px;right: 4;bottom: 4;background-color: blue;color: white;

Sticky

Prvek se přepíná mezi pozicí relative a fixed v závislosti na pozici.

Sticky element je umístěn relativně, dokud není dosaženo určité pozice posunu. Poté se na tomto místě "zasekne" a funguje jako fixed.

Pozor: Aby umístění fungovalo, musíte zadat alespoň jednu z vlastností top, right, bottom nebo left

Ukázka

Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo.

position: sticky;

Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.

Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.

Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
Kód:

position: sticky;top: 0;background-color: blue;color: white;

Position Offsets

Patří sem vlastnosti top, right, bottom, a left, které odsadí prvek o zadanou vzdálenost od určitého kraje elementu.

Tyto vlastnosti fungují pouze na prvcích s position nastaveným na relative, absolute, fixed nebo sticky.

Ukázka

top 0;

left: 5;

right 10;

bottom: 0;

Z-index

Určuje, který prvek by měl být umístěn před nebo za ostatními prvky.

Prvek může mít kladný nebo záporný z-index.

Pozor: funguje pouze na pozicovaných prvcích a položkách flex boxu.

Ukázka

Bez z-indexu:
S z-index:

z-index: 2;

z-index: 1;

Display

Důležitá vlastnost pro řízení rozvržení. Určuje, zda se s HTML elementem zachází jako s blokovým nebo inline elementem.

Každý element HTML má výchozí zobrazovanou hodnotu v závislosti na typu elementu. Pro většinu elementů je to block nebo inline.

Blokové elementy:

Blokový element pokaždé začíná na novém řádku a zabírá celou dostupnou šířku.

Příklady:

<div>
<section>
<header>
<footer>
<p>
A další ...

Inline elementy:

Inline element nezačíná na novém řádku a zabírá pouze tolik šířky, kolik je potřeba.

Příklady:

<span>
<a>
A další ...

Hodnoty vlastonsti display:

block - začíná na novém řádku a zabírá celou dostupnou šířku
inline - nezačíná na novém řádku a zabírá pouze tolik šířky, kolik je potřeba
inline-block - něco mezi inline a block. Element je formátovaný jako inline, ale lze u něj použít výšku, šířku, pading a margin.
flex - více v sekci flexbox
grid - více v sekci grid
none - element je úplně skryt a nezabítá žádné místo

Ukázka

Block:

display: block;width: 192px; padding: 16px;border: 2px solid blue;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Inline:

display: inline; padding: 16px;border: 2px solid blue;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Inline-Block:

display: inline-block;width: 192px; padding: 16px;border: 2px solid blue;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Flexbox

Flexbox je model rozvržení pro uspořádání položek horizontálně nebo vertikálně v kontejneru flexibilním a responzivním způsobem.

Flexbox se používá pro jednorozměrné rozvržení s řádky nebo sloupci.

Flex Container

Nadřazený element (kontejner), kde je vlastnost display nastavena na flex nebo inline-flex.

Vlastnosti Flex Containeru:

display - musí být nastaven na flex nebo inline-flex
flex-direction - nastavuje směr položek flexboxu
flex-wrap - určuje, zda se mají položky flexboxu zalamovat, či nikoli
justify-content - zarovná položky flexboxu, pokud nevyužívají veškerý dostupný prostor na vodorovné ose
align-items - zarovná položky flexboxu, pokud nevyužívají veškerý dostupný prostor na vertikální ose

Flex Direction a Wrap

Flex Direction určuje směr zobrazení položek flexboxu.

Hodnoty:

row
column
row-reverse
column-reverse

Flex Wrap určuje, zda se mají položky flexboxu zalamovat či nikoli, pokud pro ně není dostatek místa.

Hodnoty:

nowrap
wrap
wrap-reverse

Ukázka

flex-direction: row

1

2

3
flex-direction: column

1

2

3
flex-direction: row-reverse

1

2

3
flex-direction: column-reverse

1

2

3
flex-wrap: nowrap

1

2

3

4

5

6

7

8

9
flex-wrap: wrap

1

2

3

4

5

6

7

8

9
flex-wrap: wrap-reverse

1

2

3

4

5

6

7

8

9

Flex Justify Content

Justify Content zarovná položky flexboxu, pokud nevyužívají veškerý dostupný prostor na vodorovné ose.

Hodnoty:

center
flex-start
flex-end
space-around
space-between
space-evenly

Ukázka

justify-content: center

1

2

3
justify-content: flex-start

1

2

3
justify-content: flex-end

1

2

3
justify-content: space-around

1

2

3
justify-content: space-between

1

2

3
justify-content: space-evenly

1

2

3

Flex Align

Align Items zarovná položky flexboxu, pokud nevyužívají veškerý dostupný prostor na vertikální ose.

Hodnoty:

normal
stretch
center
flex-start
flex-end
baseline

Ukázka

align-items: center

1

2

3
align-items: flex-start

1

2

3
align-items: flex-end

1

2

3
align-items: stretch

1

2

3
align-items: baseline

1

2

3

Flex Items

Podřazené prvky flexboxu.

Vlastnosti:

order - určuje pořadí zobrazení položek flexboxu uvnitř flexibilního kontejneru
flex-grow - určuje, o kolik se položka flexboxu zvětší vzhledem k ostatním flexibilním položkám
flex-shrink - určuje, o kolik se položka flexboxu zmenší vzhledem k ostatním flexibilním položkám
flex-basis - určuje počáteční délku položky flexboxu
align-self - určuje zarovnání pro položku flexboxu uvnitř flex kontejneru

Ukázka

Order

order: 1

order: 2

order: 3
Flex Grow

flex-grow: 1

flex-grow: 1

flex-grow: 3
Flex Shrink

flex-shrink: 1

flex-shrink: 3

flex-shrink: 1
Flex Basis

X

flex-basis: 256px

X
Align Self

align-self: center

align-self: flex-end

align-self: flex-start

X

Grid

Grid nabízí systém rozvržení založený na mřížce s řádky a sloupci.

Usnadňuje návrh responzivní struktury rozvržení bez použití funkcí nebo umístění.

Grid Container

Nadřazený kontejner, který obsahuje jednu nebo více položek mřížky uspořádaných do sloupců a řádků.

Z elemntu se stane Grid, když je jeho vlastnost display nastavena na hodnotu grid nebo inline-grid.

Řádky a sloupce

Uvnitř gridu definujete počet a velikost sloupců a řádků mřížky.

K tomu se dají použít následující vlastnosti:

grid-template-columns - definuje počet a šířku sloupců v mřížce.
grid-template-rows - definuje počet a výšku řádků v mřížce.
grid-template-areas - definuje, jak zobrazit sloupce a řádky pomocí pojmenovaných položek mřížky.

Hodnoty grid-template-columns:

px
procenta
fr (fraction)
auto
minmax()

Hodnoty grid-template-rows:

px
procenta
fr (fraction)
auto
minmax()
min-content
max-content

Ukázka

grid-template-columns: auto auto auto;

1

2

3

4

5

6
grid-template-columns: 64px 80px auto;

1

2

3

4

5

6
grid-template-columns: 1fr 1fr 1fr;

1

2

3

4

5

6
grid-template-columns: 1fr 3fr 1fr;

1

2

3

4

5

6
grid-template-columns: 50px minmax(90px,1fr) 50px;

1

2

3

4

5

6
grid-template-rows: 64px 192px;

1

2

3

4

Mezery

Prostor mezi řádky a sloupci gridu.

Mezery se vytvářejí mezi řádky a sloupci gridu, ale na vnějších okrajích gridu ne.

Velikost mezery lze upravit pomocí následujících vlastností:

column-gap - určuje mezeru mezi sloupci mřížky.
row-gap - určuje mezeru mezi řádky mřížky.
gap - zkrácená vlastnost pro row-gap a column-gap. Lze použít s jednou nebo dvěma hodnotami.

Ukázka

column-gap: 25px;

1

2

3

4

5

6
row-gap: 25px;

1

2

3

4

5

6
gap: 25px 100px;

1

2

3

4

5

6

Align

Uvnitř gridu můžete definovat zarovnání obsahu mřížky pomocí následujících vlastností:

justify-content - zarovná obsah mřížky, pokud nevyužívá veškerý dostupný prostor na vodorovné ose.
align-content - zarovná obsah mřížky, pokud nevyužívá veškerý dostupný prostor na vertikální ose.

Pozor! Celková šířka obsahu políčka gridu musí být menší než šířka políčka gridu, aby vlastnost měla nějaký účinek.

Hodnoty justify-content:

space-evenly
space-around
space-between
center
start
end

Hodnoty align-content:

space-evenly
space-around
space-between
center
start
end

Ukázka

justify-content: space-evenly;

1

2

3

4

5

6
justify-content: space-around;

1

2

3

4

5

6
justify-content: space-between;

1

2

3

4

5

6
justify-content: center;

1

2

3

4

5

6
justify-content: start;

1

2

3

4

5

6
justify-content: end;

1

2

3

4

5

6
align-content: center;

1

2

3

4

5

6
align-content: space-around;

1

2

3

4

5

6
align-content: end;

1

2

3

4

5

6

Grid Items

Grid obsahuje jednu nebo více položek.

Všechny přímé podřízené prvky gridu se automaticky stanou položkami gridu.

Rozpětí / Velikost

Prvek mřížky se může rozprostírat přes více sloupců nebo řádků.

Pomocí následujících vlastností můžeme určit, kde má začít a skončit prvek mřížky:

grid-column-start - určuje, na kterém sloupci bude položka gridu začínat.
grid-column-end - určuje, na kterém sloupci bude položka gridu končit.
grid-row-start - určuje, na kterém řádku bude položka gridu začínat.
grid-row-end - určuje, na kterém řádku bude položka gridu končit.
grid-column - zkrácená vlastnost pro grid-column-start a grid-column-end.
grid-row - zkrácená vlastnost pro grid-row-start a grid-row-end.

Ukázka

grid-column-start: 1; grid-column-end: 3;

1

2

3

4

5
grid-row-start: 1; grid-row-end: 3;

1

2

3

4

5
grid-column: 1 / span 2; grid-row: 1 / span 2;

1

2

3

Align

Položky gridu lze zarovnat v rámci příslušných buněk gridu pomocí vlastností:

justify-self - určuje vodorovné zarovnání v buňce.
align-self - určuje svislé zarovnání v buňce.

Hodnoty justify-self:

auto
normal
stretch
center
start
end
left
right

Hodnoty align-self:

auto
normal
stretch
center
start
end

Ukázka

justify-self: start; justify-self: center;

1

2

3

4

5

6
align-self: end; align-self: center;

1

2

3

4

5

6

Order

Vlastnost order lze použít k definování vizuálního pořadí položek gridu.

Ukázka

justify-self: start; justify-self: center;

order: 1

order: 2

order: 3

order: 4

order: 5

order: 6

Úvod

Jak propojit JS s HTML

Propojit Javascript s HTML lze dvěma způsoby:

1. Propojit pomocí <script> tagu odkaz na externí JavaScript soubor v hlavičce HTML souboru
2. Použít JavaScript kód přímo v HTML souboru pomocí tagu <script>, který dáváme vždy na konec <body>

Ukázka Kódu

1. Externí soubor:

<head>

<script src="script.js"></script>

</head>

2. JavaScript integrovaný v HTML:

<body>

<--! HTML kód -->

<script>

<--! Javascript kód -->

</script>

</body>

Základy JavaScriptu

Základní datové typy

Datové typy určují druh dat, například text nebo čísla. Různé typy dat určují, jaké operace s nimi můžeme provádět. V Javascriptu je mnoho různých datových typů, teď se ale zaměříme na ty nejznámější a nejpoužívanější:

1. number - nejběžnější datový typ pro čísla, můžou se s ním provádět matematické operace
2. string je určený pro jakékoliv znaky, používá se tedy při práci s textem. Dává se do uvozovek (""), které značí že se jedná o string
3. boolean - datový typ používanější nejčastěji u podmínek, uchovává hodnoty true (pravdivé) nebo false (nepravdivé)

Ukázka Kódu

1. Příklady numberu:

25

0

-9.68

2. Příklady stringu:

"Ahoj"

"Jak se máš?"

Skvěle! // toto není platný string

3. Booleany:

true

false

Komentáře

Komentáře slouží k vkládání vlastních poznámek do programu, mohou sloužit k lepší orientaci v kódu (používáme je občas také v této příručce :)). Text označený jako komentář program nespustí.

Jednoduché komentáře značíme dvěmi lomítky (//) za kterými napíšeme svůj komentář - ten lze ale zapsat pouze na jeden řádek. Víceřádkové komentáře začínají lomítkem a hvězdičkou (/*) a končí hvězdičkou a lomítkem (*/), přičemž náš komentář vložíme mezi ně.

Ukázka Kódu

1. Jednoduchý komentář

// toto je komentář na jeden řádek

2. Víceřádkový komentář

/* Tento komentář funguje..

..na více řádcích!*/

Proměnné

Proměnné slouží k ukládání dat pod vlastními názvy, se kterými lze potom v programu dále pracovat (např. text, čísla, seznamy). V JavaScriptu existují dva základní druhy proměnných: let a const.

u proměnné let se hodnota může měnit.
u proměnné const se hodnota po jejím deklarování změnit nemůže.

Po klíčových slovech let nebo const následuje název proměnné jakýkoli si zvolíte, znaménko '=' a hodnotu kterou jí chcete přiřadit. Středníkem (;) vždy zakončujeme příkaz.

Ukázka Kódu

1. Proměnná let:

let jmeno = "Jan";

jmeno = "Petr";

2. Proměnná const:

const vek = 25;

vek = 30; // vypíše chybu

console.log()

Console.log() je funkce, která vypisuje hodnoty do vývojářské konzole v prohlížeči. Používá se hlavně při učení a ladění kódu – můžete si tak ověřit, co se děje v programu.

Mezi závorky vždy vložíme název proměnné či jakoukoli jinou hodnotu kterou chceme vypsat.

Ukázka Kódu

1. Vypsání vlastní hodnoty

console.log("Ukázkový text");

2. Vypsání hodnoty z proměnné

const vesnice = "Brno";

console.log(vesnice);

Řízení toku programu

Podmínky

Podmínky umožňují spouštět různé části kódu podle toho, jestli je nějaká podmínka splněná.

Používají se všude tam, kde program musí „rozhodovat“, např. kontrola věku, přihlášení...

Po slovu if následuje v závorkách podmínka a v složených závorkách kód který se spustí pokud je podmínka platná. Pro více podmínek se používá (ale není povinný) příkaz else if, a potom else pokud žádná z podmínek nemá být pravdivá.

Ukázka Kódu

let vek = 18;

if (vek => 18) {

console.log("Přístup povolen");

} else if (vek > 120) {

console.log("Zadejte platný věk");

} else {

console.log("Nejsi plnoletý, přístup odepřen");

}

Cyklus (for)

Cyklus (anglicky "loop") opakuje určitý blok kódu vícekrát.

Používá se např. pro procházení pole (array) nebo opakování akce po určitý počet pokusů.

Podobně jako if podmínky začíná klíčovým for za kterým v závorce následují tři výrazy oddělené středníkem:

v prvním výrazu se vytvoří proměnná s nějakým počátečním číslem, která bude sloužit jako počítač (angl. counter)
v druhém výrazu se nastaví podmínka která určí, kolikrát má program daný kód opakovat
ke třetímu výrazu se v každém kole for cyklu přičte k počítací proměnné +1

Po definování těchto tří výrazů potom v složených závorkách následuje blok kódu který má for cyklus opakovat.

Ukázka Kódu

for (let i = 0; i < 3; i++) {

console.log("Opakování: ", i);

}

Funkce

Funkce je blok kódu, který je možné "zavolat" kdykoli je potřeba. Pomáhá rozdělit program na menší části.

Používá se pro znovupoužití kódu a lepší organizaci.

Po slovu function následuje jméno funkce, jaké si zvolíte a v složených závorkách váš kód.

Po jménu funkce můžete přidat takzvané parametry, které slouží jako vstupní data pro funkci zvenčí čímž se zvyšuje flexibilita a znovupoužitelnost funkcí, nejsou ale povinné.

Aby se funkce spustila, je potřeba ji potom "zavolat" jejím jménem a případně parametry.

Ukázka Kódu

1. Základní funkce bez parametrů

function pozdravJarmilu() {

console.log("Ahoj Jarmilo");

}

pozdravJarmilu();

2. Funkce s parametry

function pozdrav(jmeno) {

console.log("Ahoj " + jmeno);

}

pozdrav("Jarmilo");

pozdrav("Pavle");

Arrow funkce

Arrow funkce poskytují modernější a kratší zápis funkce. Využívá se často u jednoduchých funkcí nebo jako callback (např. u událostí).

Arrow funkce na rozdíl od klasických funkcí automaticky ukládají výslednou hodnotu do proměnné. Za proměnnou následují (pokud nějaké) parametry a po šipce "=>" v složených závorkách už píšete váš kód.

Ukázka Kódu

const pozdrav = (jmeno) => {

console.log("Ahoj " + jmeno);

};

pozdrav("Jano");

Datové struktury

Pole

Pole (angl. "array") je seznam hodnot uložených v jedné proměnné. Používá se pro práci s více daty, např. seznam uživatelů, produktů...

Zapisuje se jako soubor hodnot v hranatých závorkách oddělených čárkou. Pokud chcete z pole získat nějakou hodnotu, tak napíšete název pole a v hranatých závorkách číslo pořadí (indexu), v jakém hodnota v tom poli je.

⚠ POZOR!

V programování se počítání indexu začíná od nuly, takže např. druhá položka v pořadí má index 1, třetí index 2, čtvrtá index 3 atd...

Ukázka Kódu

let ovoce = ["jablko", "banán", "pomeranč"];

console.log(ovoce[1]); // vypíše "banán"

Objekt

Objekty ukládají data ve formě klíč-hodnota, přičemž jeden objekt může mít libovolný počet vlastností.

Používají se tedy pro reprezentaci složitějších dat (např. uživatel s více vlastnostmi).

Objekty se v Javascriptu ukládají jako jeden soubor vlastností do proměnných. Po vytvoření proměnné ve složených závorkách začínáme psát vlastnosti: její název, dvojtečku a mezeru, a hodnotu vlastnosti. Více vlastností oddělujeme čárkou.

Pro získání hodnoty vlastnosti z objektu použijeme výraz ve formátu "názevObjektu.názevVlastnosti". Tomuto konceptu se také říká Objektově Orientované Programování (OOP).

Ukázka Kódu

let uzivatel = {

jmeno: "Tomáš",

vek: 25

};

console.log(uzivatel.vek);

Vlastnosti

document.querySelector()

document.querySelector() vybírá první HTML element, který odpovídá zadanému CSS selektoru.

Používají se pro propojení Javascriptu s HTML (tzv. práce s DOM).

Syntax je zde velmi jednoduchý: po příkazu document.querySelector následuje v závorkách a uvozovkách název HTML elementu který hledáme.

Ukázka Kódu

let nadpis = document.querySelector("h1");

textContent

TextContent je vlastnost, která nastavuje nebo čte text uvnitř elementu. Používá se pro dynamickou změnu textu na stránce.

Po vybrání konkrétního HTML elementu změníte jeho text jednoduše přiřazením nové hodnoty.

Ukázka Kódu

let p = document.querySelector("p");

p.textContent = "Nový text";

Style

Umožňuje měnit vlastnosti elementu přímo pomocí Javascriptu. Používá se pro dynamické změny vzhledu (např. po kliknutí).

Ukázka Kódu

let div = document.querySelector("div");

div.style.backgroundColor = "blue";

Události

addEventListener()

Čeká na událost (např. kliknutí, stisk klávesy) a spustí vybranou funkci. Používá se pro vytváření dynamických prvků.

Opět nejdříve vyberete element který chcete aby se za dané události zachoval jinak a:

1. v závorkách nejprve definujete na jakou událost se má funkce spustit (např. kliknutí), oddělíte čárkou
2. definujete vlastní funkci: co chcete, aby se danému elementu stalo (nebo zavoláte již existující funkci)

Ukázka Kódu

let button = document.querySelector("button");

button.addEventListener("click", () => {

console.log("Klik!");

});

setTimeout()

Spustí funkci po určitém čase (v milisekundách).

Používá se pro zpožděné akce, např. notifikace.

Po klíčových slovech setTimeout do závorek nejprve napíšete (nebo zavoláte) funkci která řekne co se má stát, oddělíte čárkou a napíšete za kolik milisekund se má událost spustit.

Ukázka Kódu

setTimeout(() => {

console.log("Hotovo");

}, 2000); // zpozdí se o 2 sekundy

setInterval

Funkce, která se opakuje v pravidelných intervalech.

Používá se pro časovače nebo opakované akce.

Ukázka Kódu

setInterval(() => {

console.log("Běží...");

}, 1000); // spustí se každou 1 sekundu