HTML – tagy

Tagy jsou značky značkovacího jazyka HTML. Mohou být:

  • Párové (například <body>…. </body>)
  • Nepárové (například <hr>, <br>, …)

Párové tagy mají následující strukturu:
počáteční tag <název tagu>
ukončovací tag </název tagu>

Mezi počátečním a ukončovacím tagem je obsah. Pokud je obsah uzavřen mezi párový tag, je tímto párovým tagem ovlivněn.

Základní struktura HTML dokumentu

<html> počátek HTML dokumentu
<head> hlavička dokumentu
<title></title> titulek dokumentu
</head> konec hlavičky
<body> tělo dokumentu HTML
</body> konec těla
</html> konec HTML dokumentu

Textové značky

Popis jednotlivých elementů:

HTML – Text

Značky pro text jsou dvojí – fyzické určují formátování a logické určují význam. Veškeré značky jsou řádkové, neodsazují se od ostatního textu, nemají okraje. Doporučuje se používat značky pro logické formátování, díky kterým prohlížeč bude rozumět typu obsahu. Fyzické formátování se doporučuje vždy nahrazovat pomocí CSS vlastností a HTML ponechat jen pro popis obsahu, jeho logiky, významu (sémantiky). Z logických značek si zapamatujte především span a strong, ty užijete nejčastěji. Ostatní značky uvádím spíše pro zajímavost, pro úplnost.

Fyzické formátování

b

Tučný text (bold). Vhodné pro zvýraznění (pouze styl). Pokud chcete oznámit, že informace je důležitá používá se značka <strong>, která též vykresluje tučně. Zápis pomocí CSS: font-weight: bold.

basefont

Nastavuje pomocí atributů face, color a size základní písmo, barvu a velikost pro celý web. Zastaralá značka, lze nahradit CSS.

big

Zvětšení písma o jeden stupeň. Zápis pomocí CSS: font-size: 12px

blink

Blikající písmo. Nefunguje v Internet Exploreru. Zápis pomocí CSS: text-decoration: blink

font

Nastavuje písmo, barvu, velikost. Atributy face, color a size. Zastaralá značka, lze nahradi CSS.

i

Kurzíva (italic). Vhodné pro zvýraznění (pouze styl). Naznačení, že informace je důležitá se provádí značkou <em>, která se vykresluje též kurzívou. Zápis pomocí CSS: font-variant: italics

nobr

Zakazuje zalomení řádku (i když je text delší než vymezená plocha).

s

Přeškrtnuté písmo (striked). Zápis pomocí CSS: text-decoration: striked-through

small

Zmenšení písma o jeden stupeň.

strike

Přeškrtnuté písmo. Zápis pomocí CSS: text-decoration: striked-through

sub

Dolní index (subscript). Zápis pomocí CSS: vertical-align: sub

sup

Horní index (superscript). Zápis pomocí CSS: vertical-align: super

u

Podtržení (underline). Je dobré zbytečně nepodtrhávat, návštěvník pak nechápe, co jsou odkazy a co nejsou. Zápis pomocí CSS: text-decoration: underline

Logické formátování

abbr

Zkratka. Její vysvětlení se zapisuje do atributu title.

acronym

Zkratka, která se nečte po jednotlivých písmenech, ale jako slovo.

cite

Řádková citace, nezalamuje řádek. Obvykle se vykresluje kurzívou.

code

Úsek kódu. Obvykle se vykreslí neproporcionálním písmem.

del

Odstraněný text. Obvykle se vykreslí jako přeškrtnutý.

dfn

Definice. Obvykle se vykreslí kurzívou nebo tučnou kurzívou.

em

Zvýraznění. Obvykle se vykreslí kurzívou.

ins

Přidaný text. Obvykle se vykreslí jako podtržený.

kbd

Zápis z klávesnice. Obvykle se vykreslí neproporcionálním písmem.

samp

Výstup programu. Obvykle se vykreslí neproporcionálním písmem.

span

Ohraničuje část textu, které má být přidělen zvolený styl prostředictvím atributů style, id, nebo class. Sám o sobě nijak neformátuje text.

strong

Zvýraznění. Obvykle se vykreslí tučným písmem

q

Citace. Atribut cite obsahuje zdroj citace. Některé prohlížeče přidávají uvozovky.

var

Proměnná. Obvykle se vykreslí kurzívou.

Blokové značky

Bloky textu se odlišují od řádkových značek tím, že se kolem nich
zalamují řádky. Nejdůležitější blokové značky jsou nadpisy a odstavce.

p

Odstavec. Ohraničený text vytvoří odstavec, blok textu vymezený mezerou shora i zdola (odstavce se od sebe navzájem odsazují, tuto vzdálenost lze změnit pomocí CSS vlastnosti margin).

Atribut Hodnoty
align (zarovnání) right (napravo), left (vlevo), center (na střed), justify (zarovnání do bloku)

Příklad (zarovnání na střed):

<p align="center">text odstavce<p>

Atribut align, lze nahradit CSS vlastností text-align.

Nadpisy

Nadpisy se zapisují značky h1, h2, h3, h4, h5 a h6. H1 je nadpis první úrovně, je největší, obvykle by měl obsahovat název celé stránky a na stránce by se měl vyskytovat pouze jednou. Po něm následuje h2 pro hlavní oddíly, h3 pro pododdíly atd. Velikost nadpisů postupně klesá, jejich velikosti si můžete samozřejmě změnit pomocí CSS vlastnosti font-size Pomocí nadpisů lze stránku pěkně strukturovat a učinit přehlednou. Ukázka vhodné struktury webové stránky:

<h1>Nadpis</h1>
  <h2>1. Podnadpis</h2>
    <p>Text</p>
  
  <h2>2. Podnadpis</h2>
    <h3>1. Nadpis úrovně 3</h3>
      <p>Text</p>
    <h3>1. Nadpis úrovně 3</h3>
      <p>Text</p>
  <h2>3. Podnadpis</h2>
    <p>Text</p>

br

Odřádkování (jako v klasickém textovém editoru klávesa [Enter]). Obvykle
se text zalamuje až s koncem okna prohlížeče, nebo odstavce. Příklad
předčasného odřádkování:

<p>
1. řádek<br />
2. řádek
</p>

div

Div je úsek stránky (lze si ho představit jako čtverec). V něm se může nacházet text, obrázky, formuláře, tabulky, zkrátka vše, včetně dalších značek div. Před divem a za divem se odřádkuje, ale neudělá se prázdný řádek jako u p (to je možné změnit pomocí CSS vlastnosti margin). Div nemá žádný význam zhlediska významu části stránky (p označuje odstavec). Div je důležitý pro CSS. Přes div se na HTML aplikují CSS vlastnosti, obvykle jsou to pozadí, okraje, rámečky, zarovnání. Pomocí divů se tvoří základní rozložení stránky (např. sloupcová vazba). V tomto se hodně podobá značce span, která rovněž slouží jen k aplikaci stylu. Rozdíl je v tom, že span je řádková značka (neodsazuje řádky) a div bloková (odsazuje řádky). Proto se span používá pro styl části textu a div pro styl nějakého většího úseku (např. pozadí). Ukázka:

<div style="background-color:gray">
  <h2>Nadpis</h2>
    <p>Text, <span style="background-color:white">jiné pozadí</span></p>
    <p></p>
</div>

hr

Vodorovná čára. Atribut width určuje šířku, size tloušťku, atribut noshade zakazuje stín. Ukázka:

<hr width="100" size="10" noshade>

pre

Velmi užitečná značka. Interpretuje totiž mezery (psané mezerníkem), odřádkování (enter) a tabulátory (tab). Obvykle se vykreslí neproporcionálním písmem. Hodí se například k jednoduchému zápisu zdrojového kódu, který má stromovou strukturu. Ušetří se tak práve s psaním značek br a pevných mezer.

blockquote

Bloková, víceřádková citace (cite slouží pro řádkovou citaci). Obvykle se vykreslí jako odstavec s pravým a levým odsazením. Atribut cite uvádí zdroj citace. Tato značka se příliš nepoužívá.

address

Adresa. Obvykle se vykreslí jako odstavec psaný kurzívou. Tato značka taky nemá moc velký praktický smysl, kurzíva se nahrazuje CSS vlastností font-style: italic.

Seznamy

Seznamy v HTML jsou stejné jako např. ve Wordu. Seznam je několik oddělených položek. Tyto položky mohou být číslované nebo mohou mít odrážky (čtverečky, kolečka).

Ukázka seznamů:

  • Položka 1
  • Položka 2

Jiný seznam:

  1. Položka 1
  2. Položka 2
  3. Položka 3
  4. Položka 4
  5. Položka 5

Odrážkové seznamy

Odrážkové seznamy se uzavírají do párového tagu ul, každá položka seznamu pak začíná tagem <li> a končí </li>.

<ul>
<li>První položka.</li>
<li>Druhá položka.</li>
<li>Třetí položka.</li>
</ul>

Standardně se odrážka zobrazuje jako kolečko, ale pomocí atributu type to můžete změnit na čtverec, nebo kroužek.

Type

Atribut type se používá k nastavení druhu odrážky na výběr jsou tři:

  • disc = puntík
  • circle = kolečko
  • square = obdélník

Type se může použít u ul i li.

<ul type=“circle“>
<li>První položka.</li>
<li>Druhá položka.</li>
<li>Třetí položka.</li>
</ul>

Číselné seznamy

Číselné seznamy se uzavírají mezi <ol> a </ol>.

<ol>
<li>První položka.</li>
<li>Druhá položka.</li>
<li>Třetí položka.</li>
</ol>

Type

U číselných seznamů se atribut type používá k nastavení druhu číslic, nebo písmen.

Hodnoty type:

  • 1 = normální číslování
  • A = velká písmena
  • a = malá písmena
  • I = římské číslice
  • i = malé římské číslice

Type se může zapisovat v ol i li.

Start

Atribut start se používá k změně počátečního čísla nebo písmena.

<ol type=“A“>
<li>První položka.</li>
<li>Druhá položka.</li>
<li>Třetí položka.</li>
</ol>
<ol type=“I“>
<li>První položka.</li>
<li>Druhá položka.</li>
<li>Třetí položka.</li>
</ol>

Vnořené seznamy

Seznamy lze vytvářet i vnořeně (seznam v seznamu). Ukázka:

Zdrojový kód:

Definiční seznamy

dl

Seznam definic (definition list). Obsahuje značky dt (defined term), které uzavírají definovaný pojem a dd (definition description), které uzavírají samotnou definici pojmu.

Zdrojový kód:

dt

Pojem, který se definuje v seznamu dl.

dd

Definice pojmu, která definuje pojem dt v seznamu dl.

dir

Seznam, který se chová stejně jako ul, není třeba ho používat. Používejte ul.

menu

Seznam, který se chová stejně jako ul, není třeba ho používat. Používejte ul.

Využití seznamů v praxi

Seznamy jsou vhodné pro vytváření seznamů (díky automatickému číslování), jsou vhodné pro snadnou orientaci čtenáře v textu (oddělení jednotlivých částí textů odrážkami), pro seznamy odkazů, pro menu. Důležité jsou značky ul a ol pro jednotlivé typy seznamů a značka li pro položku seznamu (nazáleží na typu).

Odkazy <a href>

Odkaz (hyperlink) se vytváří pomocí značky a, která zároveň slouží pro vytvoření záložky.

Klasický odkaz

Odkaz vypadá následovně:

<a href="http://www.seznam.cz/">odkaz na Seznam.cz</a>

Text odkazu (text, na který bude návštěvník klikat) se nachází uvnitř značek a. Uvnitř značek a se rovněž může nacházet například obrázek, pokud má být klikací.

Cíl odkazu (adresa) se zapisuje pomocí atributu href. URL může být absolutní adresa, např. „http://www.seznam.cz“, nebo relativní, vedoucí do stejného adresáře, např. „seznamy.html“, vedoucí do podřazeného adresáře, např. „html/seznamy.html“, nebo vedoucí do nadřazeného adresáře „../index.html“ nebo ještě výš „../../index.html“.

Záložka

Záložka je typ odkazu, který vede do specifikované části stránky (používá se v dlouhých stránkách). Na místo kam má odkaz směřovat (obvykle k  nadpisu) je třeba umístit následující:

<a name="n31"></a><h2>nadpis 31<h2>

Odkaz je nyní prázdný a atribut name vytváří název záložky. Nyní na tento nadpis můžeme směřovat odkaz, který bude vypadat (pokud bude odkaz na stejné stránce, na kterou odkazuje):

<a href="#n31">Odkaz na nadpis 31</a>

Pokud odkaz vede na jinou stránku a na její záložku, je třeba ještě  specifikovat URL:

<a href="html/index.html#n31">Odkaz na nadpis 31</a>

Atribut target

Atribut target specifikuje kam se má odkaz otevřít.

Hodnota Význam
_blank
_top
_parent
_self		 nové okno
nadřazené okno
nadřazený rám
stejný rám

Pokud atribut nepoužijete, odkaz se otevře ve stejném okně. Hodnota _blank otevře nové okno. Další hodnoty se používají pouze v případě, kdy se na stránce vyskytují rámy.

Obrázky <img>

Co by to bylo za web bez obrázků? Obrázky vložíme pomocí nepárového Setkáváme se s dalším tagem, který vyžaduje atributy (již jsme jimi dříve specifikovali např. jazyk lang v elementu <html> nebo kódování v <meta>). Víme, že atribut je doplňující informace k tagu. U obrázků typicky uvádíme 2 atributy:

  • src (source) – cestu k souboru
    obrázku     a
  • alt (alternate text – alternativní text) –
    popis obrázku pro vyhledávače, lidi s hlasovými čtečkami
    a jako alternativní obsah pro případ, že se obrázek nezobrazí

Dobrou praktikou je mít všechny obrázky k webu v nějaké
složce, aby se nemíchaly s dalším obsahem.

Vytvoříme si tedy ve složce s webem novou složku, kterou pojmenujeme img/. Do ní si vložíme obrázek, který budeme chtít na stránce zobrazit.

Atribut alt bývá často vynecháván, ale to je chyba. Hraje totiž svou roli např. ve vyhledávačích obrázků (Google Images) nebo v hlasových čtečkách.

Nejčastější chyby

Častou chybou je, že v atributu src uvedeme celou absolutní cestu k obrázku v našem počítači, např.
C:\users\Karel\Documents\Web\obrazky\avatar.jpg. Když potom nahrajeme web na internet, návštěvník na svém počítači bude mít těžko naši složku Karel/ s našimi dokumenty a obrázek se mu nezobrazí.

Proto píšeme vždy jen relativní část cesty od složky, ve které se nachází stránka, na které obrázek používáme. Obrázek musíme do složky samozřejmě nahrát, naše stránka musí být v nadřazené složce a názvy složek a souboru obrázku a souboru uvedeném v HTML kódu se musí na písmeno shodovat.

Opět nezapomeneme na rozlišování malých a velkých písmen, nezaměníme .jpeg za .jpg a naopak a také v názvech souborů (i HTML stránek, i obrázků) nikdy nepoužíváme diakritiku, obrázek by se na jiných operačních systémech nemusel načíst. Raději se vyhýbáme i mezerám v názvech souborů, které nahradíme např. pomlčkami -.

Typy obrázků pro web

Musíme si uvědomit, že až budou stránky na internetu, stažení obrázku bude nějakou dobu trvat. Používejte tedy úsporné formáty, jako jsou JPEG, PNG nebo WebP, kde má výsledný obrázek malou velikost díky kompresi.

  • JPEG se zpravidla používá na velké obrázky a fotky,
  • PNG na ikony, nákresy a obrázky, kde jsou jednobarevné plochy.

Při použití formátu JPEG volíme kvalitu okolo 90%, jinak obrázek obsahuje ošklivé artefakty. U velkých fotografií můžeme sáhnout s kvalitou trochu níže, aby soubor nebyl příliš velký. WebP je pak formát navržený přímo pro web, který je moderní úspornější alternativou k předchozím dvěma formátům.

Rozhodně se vyhněte formátu BMP, který je bezkompresní
nebo formátu GIF, který u neanimovaných obrázků jen zbytečně poškodí
paletu.

Nastavení výšky a šířky obrázku

Výšku a šířku obrázku je možné nastavit pomocí atributů width a height. Hodnoty můžeme zadat buď číslem (např. width="64") a budou označovat velikost v pixelech, nebo procenty (např width="50%"). Pokud je zadán jen jeden atribut, další se dopočítá tak, aby zůstal zachován poměr stran.

Opět si však musíme uvědomit, že obrázek by měl být na webu v té velikosti, ve které se bude zobrazovat. Měli bychom ho tedy prvně zmenšit v grafickém editoru (např. Paint.NET), a ne ho nahrát na web veliký a zmenšit si ho až v HTML. Prohlížeč by jinak musel načíst celý velký obrázek, zmenšit ho a až potom ho zobrazit.

Tabulky

V dávné minulosti se tabulky používaly na rozvržení celé stránky. Dnes už jsou pro tyto účely ovšem lepší nástroje a používání tabulek omezujeme opravdu jen na případy, kdy chceme uživateli zobrazit přehledně nějaká data.

Tabulka <table>

Celou tabulku uzavřeme mezi párové tagy <table> a </table>. Pro jednotlivé řádky využijeme párový tag <tr> a </tr>, pro jednotlivé buňky na řádku potom párový tag <td> a </td>.

Soubor uložíme a otevřeme v prohlížeči. Výsledek bude vypadat takto:

Rámeček tabulky border

Protože stylování webových stránek se budou věnovat samostatné lekce, my si zde prozradíme pouze atribut border. Ten označuje tloušťku rámečku tabulky. Pokud jej neuvedeme, má hodnotu 0, tedy je vypnutý. <table border="1">.

Řádky tabulky <tr>

Každý řádek tabulky uzavřeme do párového tagu <tr> (jako table row – řádek tabulky).

Buňky tabulky <td>

Jednotlivé buňky jsou poté v řádku obalené opět párovým tagem <td> (jako table data).

Tabulka s hlavičkou

Tabulka může mít navíc i hlavičkový řádek, případně patičku. Asi vás nepřekvapí, že pro to existují podobné tagy jako pro hlavičku a tělo HTML stránky. Celá tabulka bude opět v tagu <table>.

Hlavička <thead>

Hlavičkou tabulky se myslí první řádek <tr>, který popisuje, co hodnoty ve sloupcích znamenají. Obvykle je dobrý nápad takový řádek přidat, protože tabulka je potom přehlednější.

První řádek <tr> tabulky pak většinou obalujeme do párového elementu <thead> (jako table head). Toto obalení není povinné, ale zvyšuje přehlednost kódu tabulky.

Hlavičková buňka <th>

Když do řádku vkládáme buňky hlavičky, namísto <td> pro ně používáme tag <th> (jako table head).

Tělo tabulky <tbody>

Tělo tabulky, což je část tabulky bez hlavičky, potom obalíme do tagu <tbody> (jako table body). Ten opět slouží pro přehlednost a teoreticky jej můžeme vynechat, ovšem za cenu nepřehlednějšího kódu.

Patička tabulky <tfoot>

Za <tbody> může následovat podobně <tfoot>, obsahující patičku tabulky. Tam může být např. celkový součet, celkové hodnocení a další shrnující informace všech řádků tabulky. Do patičky pak vkládáme řádek <tr> a do něj běžné buňky <td>.

Ukázka HTML tabulky s hlavičkou

Vytvoříme si tabulku s několika notebooky a jejich parametry.

Výsledek:

 

 

 

 

 

 

 

 

 

Slučování buněk tabulky

Sousední buňky v tabulce můžeme slučovat podobně jako v již zmíněném Excelu.

Sloučení buněk vodorovně –colspan

Pokud budeme slučovat sloupce v nějakém řádku, zapíšeme buňku jen jednou a dáme ji atribut colspan (jako column span – rozpětí sloupců). Ten bude mít hodnotu s číslem, kolik buněk propojuje.

V tabulce, kterou jsme si vytvořili výše, se nabízí propojit buňky s textem „Neuvedeno“ v jednu. Hodnota colspan buňky bude tedy 2 (spojujeme 2 buňky v řádku). Druhou buňku z HTML kódu úplně smažeme. Kód posledního řádku tedy upravíme takto:

Výsledek:

Sloučení buněk svisle – rowspan

Obdobně můžeme spojovat i řádky v nějakém sloupci a to pomocí atributu rowspan (row span – rozpětí řádků). Ten udává, přes kolik řádků se sloupec roztáhne.

Spojme ještě dvě buňky s textem „Ano“. Jednu buňku opět úplně vymažeme, té horní dáme atribut rowspan s hodnotou 2. První dva řádky budou tedy vypadat takto:

Výsledek:

Další tagy

Tag <iframe>

do HTML stránky vloží rámec, ve kterém je zobrazen jiný HTML dokument. Jedná se o řádkový tag, odtud název iframe (= inline frame, řádkový rámec).<iframe> se často používá k vložení služeb cizích webů (widget s počasím, anketou apod.).

Element je párový a obaluje alternativní obsah, který se zobrazí prohlížečům, které nepodporují rámce.

Atributy

Elementu můžeme uvést následující atributy:

  • height – Udává výšku rámu v pixelech.
  • name – Udává jméno rámu. Pokud ve stránce, ve které  je <iframe> vložený, uvedeme odkaz. Můžeme mu nastavit atribut target na jméno rámce a odkaz se poté otevře v daném <iframe>.
  • sandbox – Umožňuje zakázat některé akce na stránce v <iframe> z hlediska bezpečnosti. To se hodí zejména tehdy, když v <iframe> zobrazujeme cizí stránku. Pokud neuvedeme hodnotu atributu  sandbox=““), zapnou se všechna bezpečnostní opatření. Opatření můžeme upřesnit uvedením následujících hodnot (můžeme uvést více hodnot oddělených mezerou):
    • allow-same-origin – Povolí stejný origin vloženého a vkládaného
      dokumentu.
    • allow-top-navigation – Povolí obsahu rámce, aby se navigoval na stránku, ve které je vložen.
    • allow-forms – Povolí odesílaní formulářů.
    • allow-scripts – Povolí spouštění skriptů.
  • seamless – Atribut je typu boolean. Pokud je uveden, je dokument v <iframe> zobrazen tak, jako by byl součástí hlavního dokumentu.
  • src – URL adresa zobrazovaného dokumentu.
  • srcdoc – Umožňuje přímo specifikovat vložený dokument, obsahuje tedy HTML kód.
  • width – Udává šířku rámu v pixelech.

Ukázka

<p>Iframe slouží k vložení rámce s dalším HTML dokumentem. Podívejme se na Seznam:</p> 
  <iframe src="http://www.seznam.cz" width="530" height="300">
     Váš prohlížeč nepodporuje rámce. Přejděte manuálně na <a href="http://www.seznam.cz">obsah rámce</a>. 
  </iframe>

Výsledek:

Ukázka použití HTML 5 tagu iframe k vložení stránky pomocí rámce

Komentáře <!-- ... -->

Tag <!– … –> označuje komentář ve zdrojovém kódu stránky. Tyto komentáře slouží pro autora stránky jako poznámky k lepší orientaci v kódu. Prohlížeč si komentářů nevšímá a nijak je nezobrazuje.

Často se používají k popisu složitých struktur, kdy je zanořeno několik divů do sebe apod. Komentáře se také používají při vkládání klientských skriptů.

Ukázka

<!-- Odstavec s popisem produktu --> 
<p> Výkonná grafická karta střední třídy s čipem AMD Radeon HD7850, frekvence jádra 975MHz, 2GB GDDR5 paměti na frekvenci 4800MHz, 256bit sběrnice, 1024 výpočetních jednotek, Shader Model 5.0, 2x mini DisplayPort, DVI-I, HDMI, PCIe x16 verze 3.0. </p>

Výsledek:

Ukázka použití komentářů v HTML 5

Formuláře v HTML<form>

Formulář je část stránky, která se běžnému uživateli jeví podobně jako dialogové okno. Slouží k získávání informací od uživatele, které jsou následně odeslány na server ke zpracování. K tomu se používají serverové skripty. Musíme tedy vytvořit stránku s formulářem a ještě skript, který zaslaná data správně zpracuje (například pomocí programovacího jazyka PHP). Formulář může obsahovat různá vstupní pole, tlačítka a přepínače. Na základě odeslaných dat (např. políčka s emailovou adresou a textem zprávy) provede aplikace na serveru požadovanou operaci (např. odešle e-mail na zadanou adresu a se zadaným textem).

S formuláři souvisí pojem webová aplikace. Tak se říká dynamickým „webovým stránkám“, které se od obyčejných stránek značně oddalují a blíží se spíše aplikaci, jaké běžně známe z desktopů. Nejedná se tedy již o stránku jako dokument, ale o stránku jako program, který od uživatele bere nějaký vstup a poté na něj reaguje, případně opět vrací nějaká data. Formulářů může být na jedné stránce více, ale nesmí být do sebe  vnořeny.

Formulář se vkládá do stránky pomocí tagu <form>. Kód jednoduchého formuláře pro zadání jména a příjmení by mohl vypadat např. takto:

<form method="post">
     <label for="jmeno">Jméno:</label><br />     
     <input type="text" id="jmeno" name="jmeno" /><br />
     <label for="prijmeni">Přijmení:</label><br />
     <input type="text" id="prijmeni" name="prijmeni" /><br />
</form>

Ukázka

Kód výše se v prohlížeči zobrazí následovně:

Atributy

Elementu <form> můžeme přiřadit následující atributy:

  • accept-charset – Povolení pouze určitých znakových sad, které server akceptuje. Nejčastěji UTF-8.
  • action – Určuje URL adresu skriptu, který bude formulář zpracovávat. Pokud není uveden, data z formuláře se odešlou na to samé URL, na kterém je formulář (viz příklad výše). Explicitně můžeme zadat adresu skriptu takto:
<form action="vyhodnoceni.php" method="post">
  • method – Určuje metodu odeslání dat. Máme k dispozici 2 metody: GET a POST. Metoda GET je výchozí hodnota (pokud tento atribut neuvedeme) a označuje metodu poslání dat z formuláře pomocí hodnot v URL adrese. Setkáváme se zde s limitem délky hodnot, adresa nevypadá hezky a není  zabezpečená – nepoužívejte to tedy pro přihlašování uživatele s heslem. Metoda POST označuje metodu odeslání dat, kdy jsou data zabalena v těle HTTP požadavku. Data jsou šifrována, schována a nemají omezenou velikost. Metoda POST se pro používání formulářů preferuje.
  • autocomplete – Nabývá hodnot on a off, přičemž hodnota on je výchozí. Pokud je atribut autocomplete zapnutý, nabízí prohlížeč uživateli při vyplňování údajů našeptávač, který zobrazuje dříve zapsané hodnoty, například „admin“:
  • name – Přiřazuje formuláři název. Používá se zejména, když je na stránce více formulářů nebo když s formulářem pracujeme např. pomocí JavaScriptu.
  • novalidate – Atribut je hodnoty typu boolean. Atribut je zapnutý, pokud je uveden (na hodnotě nezáleží). Specifikuje, zda se má formulář před odesláním zvalidovat. Tento atribut můžeme dospecifikovat zvlášť u jednotlivých elementů formuláře.
  • target – Specifikuje cílové umístění odpovědi formuláře. Hodnota _blank vyvolá odpověď v nové záložce, _top otevře odpověď v nejhlavnějším rámu, _parent v nadřazeném rámu a _self v aktuálním okně (to je výchozí hodnota). Jako hodnotu můžeme také uvést id rámu.
  • enctype – Určuje způsob kódování obsahu formuláře. Výchozí hodnota je application/x-www-form-urldecode, kde jsou mezery nahrazeny plusy a speciální znaky jsou zkonvertovány na hexadecimální hodnoty. Dále můžeme zadat hodnotu multipart/form-data, která je vyžadována v případě, že má formulář pole k odeslání souboru. Tehdy se žádné znaky nenahrazují. Poslední hodnota je text/plain, kdy se nahrazují pouze mezery za plusy.

Formulář může obsahovat následující elementy:

<input>

Představíme si hned jeden z nejznámějších elementů ze sekce formulářů <input>. Používá se ve formulářích, které umožňují uživateli vkládat data. Může mít mnoho podob, které se liší různým nastavením atributů.

Typ definujeme pomocí atributu type. Jednotlivé typy vstupů se liší a proto si ukážeme jen ty nejzákladnější. Všechny atributy jsou shrnuty níže v tabulce:

Název Popis
button Tlačítko
checkbox Zaškrtávací pole (checkbox)
color Výběr barvy (color picker)
date Výběr data (date picker)
datetime-local Výběr data a času (datetime picker)
email Zadání emailové adresy
file Nahrání souboru (upload)
hidden Skryté pole
image Tlačítko s obrázkem k odeslání formuláře
month Výběr měsíce a roku
number Zadání čísla
password Zadání hesla
radio Přepínací tlačítko (radiobutton)
range Zadání čísla posuvníkem
reset Vyprázdní formulář
search Vyhledávací pole
submit Tlačítko k odeslání formuláře
tel Zadání telefonního čísla
text Zadání krátkého textu
time Zadání času
url Zadání URL adresy
week Zadání týdnu a roku

Atributy

Následující atributy jsou společné pro všechny typy inputů:

  • autocomplete – Nabývá hodnot on a off, přičemž hodnota on je výchozí. Pokud je atribut zapnutý, nabízí prohlížeč uživateli při vyplňování údajů našeptávač, který zobrazuje dříve zapsané hodnoty.
  • disabled – Atribut je typu boolean. Pokud je uveden, nelze měnit hodnotu elementu a ten je často zobrazen jako zašedlý.
  • list – Obsahuje id elementu , položky listu poté slouží jako předdefinované možnosti elementu<input>.
  • readonly – Atribut je typu boolean. Pokud je uveden, nelze hodnoty v daném poli editovat.
  • name – Definuje jméno elementu. Jméno musí být unikátní vzhledem k formuláři a je po odeslání použito jako klíč v dvojici klíč-hodnota, která se na server odešle.
  • value – Přednastavená hodnota pole.
  • autofocus – Atribut je typu boolean. Pokud je uveden, element se zaktivní po načtení stránky.
  • form – Element <input> může být definován mimo formulář a následně být k tomuto formuláři připojen uvedením atributu form s hodnotou id formuláře. Element může patřit pouze jednomu formuláři.
  • pattern – Obsahuje regulární výraz, podle kterého se má hodnota v poli validovat.
  • placeholder – Definuje text, který se zobrazí v případě, že je pole prázdné. Obvykle je vykreslen zašedle a slouží jako nápověda.
  • required – Atribut je typu boolean. Pokud je uveden, znamená to, že pole musí být pro odeslání formuláře vyplněné.

<label>

Tag <label> je důležitým prvkem formulářů. Slouží k popisu polí, je to tedy text vedle pole, který udává, k čemu pole slouží. Mnoho lidí labely nepoužívá a vedle políčka vloží prostý text. To je ale špatně a projeví se to mimo jiné například u checkboxů, kde se při kliknutí na label (popis pole) políčko zaškrtne, ale při kliknutí na prostý text vedle textboxu se nestane nic a musíte se trefit přímo na políčko.

Atributy

Tento tag je párový a má následující atributy:

  • for – Atribut obsahuje id elementu, ke kterému patří label.
  • form – Element může být definován mimo formulář a následně být k tomuto formuláři připojen uvedením atributu form s hodnotou id formuláře. Element může patřit více formulářům.

Ukázka

Checkbox s labelem může vypadat například takto (ukázka s labelem a bez labelu):

<form>
     <label for="spravne">Správně</label>
     <input type="checkbox" name="spravne" value="Správně" id="spravne" /><br />
    Špatně<input type="checkbox" name="spravne" value="Správně" /> 
</form>

Výsledek vypadá vizuálně stejně, nicméně text labelu je po kliknutí funkční na rozdíl od druhé varianty bez labelu:

Protože už víme, k čemu slouží element <label>, můžeme si ukázat jednotlivé atributy typu <input>.

checkbox

Typ checkbox je klasické zaškrtávací políčko. Je podobné radiobuttonu, ale je možné zaškrtnout více možností a tudíž musí mít každý unikátní název.

Atribut

U typu checkboxu můžeme ještě uvést atribut:

  • checked – Atribut je typu boolean. Pokud je uveden, je políčko zaškrtnuto.

Ukázka

Uveďme si jednoduchou ukázku inputu typu checkbox:

<form>
     <input type="checkbox" id="novinky" name="novinky" value="1" checked="checked" />
     <label for="novinky">Přeji si zasílat novinky emailem.</label><br />
     <input type="checkbox" id="registrace" name="pravidla" value="1" />
     <label for="registrace">Souhlasím s pravidly registrace.</label>
</form>

A výsledek:

Na server jsou odeslána pouze zaškrtnutá pole. Na hodnotě v tomto případě nezáleží a je zvykem ji nastavovat na hodnotu 1 (jakotrue).

Pokud spolu checkboxy souvisí, můžeme si ulehčit práci tím, že je sdružíme do pole. Budou v atributu name mít hranaté závorky []. Na server poté  přijde pole odeslaných hodnot indexované od 0:

Zvolte si ingredience na svou pizzu:<br />
 <form>
     <input type="checkbox" id="syr" name="ingredience[]" value="syr">
     <label for="syr">Extra sýr</label><br />
     <input type="checkbox" id="zampiony" name="ingredience[]" value="zampiony">
     <label for="zampiony">Žampiony</label><br />
     <input type="checkbox" id="kukurice" name="ingredience[]" value="kukurice">
     <label for="kukurice">Kukuřice<br />
     <input type="checkbox" id="slanina" name="ingredience[]" value="slanina">
     <label for="slanina">Slanina</label>
 </form>

Výsledek:

radio

Typ radio vytvoří přepínací tlačítko (tzv. radiobutton). Tlačítka  seskupujeme tak, že jim dáme stejný název (atribut name). Při změně volby se původní volba odznačí. Odesláno potom bude jen jedno vybrané tlačítko.

Atribut

Typ inputu radio má pouze jeden atribut:

  • checked – Atribut je typu boolean. Pokud je uveden, je daná možnost zaškrtnutá.

Ukázka

Ukázka inputu typu radio:

Vyberte si barvu vzhledu:<br />
 <form>
     <input type="radio" id="zluta" name="barva" value="yellow" />
     <label for="zluta">žlutá</label><br />
     <input type="radio" id="modra" name="barva" value="blue" checked="checked" />
     <label for="modra">modrá</label><br />
     <input type="radio" id="cervena" name="barva" value="red" />   
     <label for="cervena">červená</label>
 </form>

Výsledek:

Pokud vás zajímá zpracování takových formulářů na serveru, doporučuji začít základy PHP a projít si tento jazyk. Pokud základy PHP již máte, můžete přejít na článek přímo o zpracování formulářů v PHP a formulář si zkusit zpracovat.

Rozdíl mezi name a id u formulářů

Hlavní rozdíl mezi těmito dvěma je v tom, že atribut name se používá k odkazování na data formuláře po odeslání formuláře, zatímco atribut id používají JavaScript a CSS k manipulaci s konkrétními prvky na stránce.

 Hlavní rozdíl mezi atributy name a id je v tom, že atribut name lze použít k odkazování na data formuláře po odeslání, zatímco atribut id lze použít skripty JavaScript a CSS k manipulaci s konkrétními prvky na stránce.

Kromě toho může mít prvek více jmen, ale pouze jedno jedinečné ID. Prvek HTML může mít navíc přiřazeno více jmen, ale musí mít pouze jeden jedinečný identifikátor (id)

Cvičení

C1 – Textové značky

Vytvořte v PSPad jednoduchou stránku, využijte základní kostru vytvořenou programem.

  • Změnte kódování z charset=windows-1250 na charset=utf-8.
  • Zadejte element titulek: Textové značky v HTML
  • V těle dokumentu si vyzkoušejte:
    • tučné písmo <b>, zvýraznění pomocí tagu <strong>,
    • italiku <i>,
    • horní, dolní index pomocí tagů <sup> a <sub>,
    • tag <span>, prozatím bez atributů,
    • tag <code> pro vložení kódu.

Dávejte pozor u párových tagů, aby byly řádně ukončeny. Všimněte si, jestli jsou výše používané tagy blokové.

Na adrese Služba ověřování značek W3C si ověřte, je-li váš kód validní.

C2 – Blokové tagy

  • Změnte kódování z charset=windows-1250 na charset=utf-8.
  • Zadejte element titulek: Textové značky v HTML
  • V těle dokumentu si vyzkoušejte:
    • odstavec <p>,
    • odřádkování <br/>,
    • tag <div>, prozatím bez atributů, – všimněte si rozdílu oproti tagu <span>,
    • tag <pre> pro interpretaci tabulátorů, odsazení a enterů,
    • nadpisy úrovně 1 až 6 <h1> … </h1> až <h6> … </h6>.

C3 – seznamy

Vytvořte v PSPad jednoduchou stránku, využijte základní kostru vytvořenou programem.

  • Změnte kódování z charset=windows-1250 na charset=utf-8.
  • Zadejte element titulek: Tesla Vás může i zabít
  • V těle dokumentu si naformátujte text z následujícího odkazu: K:\ProŽáky\Bečvářová Silvie\Podklady\HTML\Clanek-Tesla.pdf 
  • Správně použijte tagy pro nadpisy 1. a 2. úrovně, zvýraznění písma, italiku, odstavce a číslovaný a nečíslovaný seznam.

Dávejte pozor u párových tagů, aby byly řádně ukončeny. Všimněte si, jestli jsou výše používané tagy blokové.

C4 – obrázky, odkazy

Vytvořte v PSPad jednoduchou stránku, využijte základní kostru vytvořenou programem.

  • Změnte kódování z charset=windows-1250 na charset=utf-8.
  • Zadejte element titulek: Mobilizujeme
  • V těle dokumentu si naformátujte text z následujícího odkazu: K:\ProŽáky\Bečvářová Silvie\Podklady\HTML\Clanek-mobilizujeme.pdf
  • Správně použijte tagy pro nadpisy 1. a 2. úrovně, zvýraznění písma, italiku, odstavce a číslovaný a nečíslovaný seznam.
  • Vložte obrázek a odkazy.

Dávejte pozor u párových tagů, aby byly řádně ukončeny. Všimněte si, jestli jsou výše používané tagy blokové.

C5 – obrázky, odkazy

Vytvořte v PSPad jednoduchou stránku, využijte základní kostru vytvořenou programem.

  • Změnte kódování z charset=windows-1250 na charset=utf-8.
  • Stáhněte si libovolný obrázek a pod názvem obr.* si jej uložte do adresáře img , který si vytvoříte ve stejném adresáři jako html soubor.
  • Stejný obrázek si upravte v malování na 50% velikost původního obrázku a nazvěte jej obr-nahled.*. Opět uložte do adresáře img.
  • Do těla dokumentu vložte menší, náhledový obrázek, který bude fungovat jako odkaz na větší, původní obrázek.

C6 – tabulka 1

Vytvořte kód pro následující tabulku:

Zobrazení složitější tabulky

C7 – tabulka 2

Vytvořte kód pro následující tabulku:

Ukázka zformátované tabulky

C8 – cvičení, iframe, komentáře

Vytvořte si adresář Trida-Jmeno-Prijmeni a v něm podadresář img. Při zadávání názvu adresáře nepoužívejte diakritiku!

  • Do podadresáře img nakopírujte následující obrázek: K:\ProŽáky\Bečvářová Silvie\Podklady\HTML\PP2\img\jizvy.jpg
  • V PSPad vytvořte nový soubor index.html. Ten umístěte do adresáře
    Trida-Jmeno-Prijmeni
  • Pro soubor index.html nastavte správně kódování na utf-8.
  • Zadejte titulek stránky: Slavné jizvy
  • Do souboru index.html zkopírujte a naformátujte text z následující adresy: K:\ProŽáky\Bečvářová Silvie\Podklady\HTML\PP2\Slavne-foto.pdf
  • Použijte správné tagy pro nadpisy, podnadpisy, odstavce, zvýraznění slov, seznamy apod.
  • Vložte na odpovídající místa řádně obrázek, který máte zkopírovaný v adresáři img – zadejte relativní cestu.
  • Před kód s obrázkem vložte komentář s textem: „Zde je vložený obrázek.„
  • Místo textu s odkazem vložte náhledový iframe, který v sobě zobrazí odkazovaný zdroj – velikost dle svého uvážení.

Na adrese Služba ověřování značek W3C si ověřte, je-li váš kód validní.

Screenshot s výsledkem validace vložte do vašeho adresáře Trida-Jmeno-Prijmeni pod názvem validace.jpg.

C9 – formuláře

Vytvořte si jednoduchou html stránku s formulářem (nebudeme řešit obslužný skript ani další atributy).

V těle formuláře vyzkoušejte základní varianty tagu<INPUT>tedy:

  • text
  • password
  • checkbox
  • radio
  • submit
  • reset

Zobrazte si danou stránku a zvalidujte ji.

 

C10 – celkové opakování Vrťapka, s.r.o.

Vytvořte jednoduchou prezentaci firmy, která bude obsahovat celkově 4 níže uvedené html soubory.

Všechny soubory musí obsahovat povinné tagy jako <title>, správné kodování stránky, je vhodné použít komentáře pro okomentování složitější části kódu apod. Všechny 4 html soubory budou součástí jednoho adresáře. Pro potřebné obrázky vytvořte vlastní adresář img a dávejte pozor na relativní odkazování mezi jednotlivými soubory.

1. index.html

Vložte následující text a formátujte jej dle typografických pravidel. Využijte alespoň jeden tag pro nadpis úrovně 1, pro úroveň 2, pro odstavce, důležité informace zdůrazněte pomocí odpovídajícího tagu, využijte seznam s klasickými odrážkami.

Firma Böhm

Vážení zákazníci,
Představujeme Vám nový katalog čalouněných výrobků značky Böhm, které pro Vás v Jihlavě vytváříme s radostí již od roku 1993.
Při výrobě našich produktů klademe důraz na dokonalou funkčnost, pohodlné sezení a špičkový design. Vysoká kvalita a precizní řemeslné provedení každého detailu je pro nás samozřejmostí.
K výrobě používáme výhradně kvalitní, ekologicky a zdravotně nezávadné materiály. Široká kolekce  našich produktů plně uspokojí jak zájemce o funkční a praktický čalouněný nábytek, tak i zákazníky, kteří preferují individuální provedení nebo nápaditý design, nesoucí prvky luxusu. Naše výroba má zakázkový charakter a ke každé zakázce volíme osobní přístup.

Výrobky z naší kolekce: 
- upravujeme podle individuálních požadavků zákazníků,
- umožňujeme volný výběr potahových materiálů, 
- vyrábíme také atypický čalouněný nábytek určený do soukromých i veřejných prostor.

Naše firma se může pyšnit řadou prestižních ocenění a spoluprací na velkých projektech, spojených se jmény významných architektů a designérů.
  • Pod text umístěte následující tři obrázky. Upravte si je dle potřeby v malování. Jednotlivé obrázky umístěte do tabulky pro lepší naformátování. Pro každý z obrázků vytvořte odkaz, první obrázek bude odkazovat na stránku kontakt.html, druhý na stránku nakupni-podminky.html a třetí na stránku zbozi.html.

2. kontakt.html

Na stránku umístěte následující kontaktní informace. Pro větší přehlednost využijte pro sekci Kontaktní informace tabulku, pomocí které naformátujete obsah. Pro sekci Kontaktní formulář připravte html kod pro formulář – prozatím bez funkčního skriptu.

Kontaktní informace:

Název firmy: Vrťapka, s.r.o.
Kontaktní adresa: Nám. míru 6, Klobouky u Brna 691 72
email: info@vrtapka.cz
tel.: +420 123 456 789

Kontaktní formulář:

Jméno: input
Příjmení: input
Email: input
Zpráva: textarea

Odeslat – tlačítko

3. nakupni-podminky.html

sem zkopírujte následující text a naformátujte dle typografických pravidel:

V e-shopu www.vrtapka.cz mohou nakupovat zákazníci z ČR i zahraničí.
Více informací získáte zde.

Text Více informací získáte zde. bude fungovat jako odkaz na soubor: https://www.bohmsedacky.cz/DRead/files/obchodni_podminky.pdf

4. zbozi.html

Vytvořte kód pro následující tabulku:

C11 – celkové opakování  Blanař

Vytvořte jednoduchou prezentaci firmy, která bude obsahovat celkově 4 (5) níže uvedené html soubory.

Všechny soubory musí obsahovat povinné tagy jako <title>, správné kodování stránky, je vhodné použít komentáře pro okomentování složitější části kódu apod. Všechny 4 html soubory budou součástí jednoho adresáře. Pro potřebné obrázky vytvořte vlastní adresář img a dávejte pozor na relativní odkazování mezi jednotlivými soubory.

1. index.html

Pomocí html tagů sestavte základní layout web stránky, ať obsahuje hlavičku, patičku, hlavní část.

Zde bude připravený iframe pro vkládání obsahu, pro prvotní zobrazení se v iframe zobrazuje obsah stránky uvod.html.

  • Do hlavičky umístěte menu: HOME, ZBOŽÍ, KONTAKTY, O FIRMĚ s prokliky na jednotlivé stránky. Obsah jednotlivých stránek se bude zobrazovat v iframe v hlavní části.
  • Do patičky umístěte  copyright se svým jménem a rokem vytvoření. Text vycentrujte.
  • Hlavní část – zde se bude zobrazovat obsah (použijte iframe o velikosti 800x600px, identifikační název iframe bude content).

2- uvod.html – odkaz HOME

Vložte níže uvedený text a naformátujte dle svého uvážení. 

Firma Blanař
Český výrobek
Hrdě se hlásíme k tomu, že naším domovem je Česká republika. 
Právě tady vznikají tradiční výrobky, které dělají radost našim zákazníkům a spolupodílí se na vytváření jejich spokojeného a pohodlného bydlení.
Poctivé zpracování
Pro naši práci využíváme nejnovější technologie, které nám umožňují vytvářet originální a poctivě zpracované výrobky. 
Klademe důraz na detaily, protože právě ony jsou k dosažení unikátnosti a dokonalosti klíčové.
Kvalita
Na kvalitě si zakládáme. Vybíráme ty nejlepší materiály a spolupracujeme s lidmi, kteří svému oboru rozumí a jsou pro něj zapálení. 
Díky tomu můžeme vytvářet kvalitní nábytek, který splní i ta nejvyšší očekávání našich zákazníků.
Inovace
Sledujeme módní trendy a snažíme se být vždy o krok napřed. 
Ve vlastním vývojovém centru přicházíme s moderními materiály, výrobky a inovacemi tak, abychom obstáli 
v tuzemské i zahraniční konkurenci a mohli flexibilně reagovat na přání a potřeby našich zákazníků.

3. zbozi.html – odkaz ZBOŽÍ

Vložte níže uvedený text a naformátujte dle svého uvážení. Pro ilustraci vložte do níže uvedeného textu dva ilustrační obrázky. Jeden obrázek jednolůžka, druhý dvoulůžka.

Jednolůžka
Modelová řada nabízí několik typů jednolůžek, které si zákazník může nakonfigurovat dle vlastních preferencí pro svůj maximální komfort.
Jednolůžko je opatřeno kvalitním lamelovým roštem, na kterém jsou umístěny vybrané volně ložené či pevně začalouněné matrace. 
Rošt je možné polohovat mechanicky či elektricky za pomoci ovladače.
Dvoulůžka
Moderní, designová dvoulůžka disponují kvalitním mechanicky či elektricky ovladatelným 28-lamelovým roštem. 
Na něm jsou umístěny volně ložené či pevně začalouněné matrace, které si vyberete dle svých preferencí. 
K zajištění dokonalosti lze k posteli zvolit doplňky jako přehoz či polštáře.

4. kontakty.html – odkaz  KONTAKTY

Vložte níže uvedený text a naformátujte dle svého uvážení.

Sídlo společnosti a fakturační adresa
BLANÁŘ NÁBYTEK, a. s.
Brumovice na Moravě 410
691 11 Brumovice na Moravě

IČ 26259842
DIČ CZ26259842
Registrace: KOS Brno, oddíl B, vložka 3642

5. o-firme.html – odkaz O FIRMĚ

Vložte níže uvedený text a naformátujte dle svého uvážení. Pro ilustraci vložte do níže uvedeného textu dva ilustrační obrázky.

O firmě BLANÁŘ NÁBYTEK, a.s.

Firma BLANÁŘ NÁBYTEK, a.s., která vznikla v roce 1989, se specializuje 
na výrobu pohodlného čalouněného nábytku, jako jsou dvoulůžka, válendy všech typů, moderní postele boxspring, pohovky, sedačky, matrace a lamelové rošty. 
V České republice dnes zaujímá vedoucí postavení, neztrácí se však ani v Evropě, kde se řadí mezi největší výrobce lehacího nábytku. 
Více než polovinu své produkce exportuje do zahraničí, především do Německa, Rakouska, Švýcarska, Maďarska, Rumunska a Chorvatska. 
V Česku a na Slovensku má pak více než 200 odběratelů.

V současnosti zaměstnává přes 500 zaměstnanců, což ji řadí k hlavním zaměstnavatelům regionu. 
Produkce okolo 200 tisíc postelí ročně z ní činí nejrychleji rostoucí společnost svého druhu v Evropě. 
Společnost BLANÁŘ NÁBYTEK, a.s. je členem Asociace českých nábytkářů a hrdě užívá značku Český výrobek.

Ani přesto však neusíná na vavřínech. Na vývoji svých výrobků spolupracuje s řadou významných institucí. 
To vše s jediným cílem – nabídnout svým zákazníkům kvalitní, zdravotně nezávadné produkty podle aktuálních trendů, které se 
stanou nedílnou součástí jejich spokojeného života a pomohou vytvářet jejich příběhy.

Písemná práce

Zdroje: