Vlastnosti fontu plně nahrazují nevhodný element <font> , který se nedoporučuje používat. Další nedoporučované html elementy, které jsme si představili v předchozí kapitole, se týkaly podtržení a přeškrtnutí písma. Tyto vlastnosti textu, pokud je potřebujeme použít, se nahrazují vlastností CSS stylu text-decoration. Tyto a také další vlastnosti písma, z nichž nejčastěji používáme definici barvy a zarovnávání, jsou uvedeny v tabulce 7.2.

Tab. 7.2: Nastavení formátu textu pomocí CSS; zdroj: (3)

Z uvedené tabulky si na příkladu ukážeme použití některých vlastností. Nadefinujeme si tři html ele- menty a nastavíme u nich zmíněné podtržení, přeškrtnutí, zvolíme barvu, zarovnávání a ukážeme si také nastavení mezer mezi písmeny a slovy. Pro písmo elementu h2 zvolíme kapitálky.

Obr. 7.2: Zdrojový kód CSS vlastností nastavení formátu textu; zdroj: (3)

Výsledné nastavení tří nadpisů pomocí CSS stylu vidíme v okně prohlížeče na Obr. 7.3.

Obr. 7.3: Formátování elementu podle zdrojového kódu z Obr. 7.2; zdroj: (3)

7.2 CSS formátování pozadí elementu

Jako pozadí nějakého elementu můžeme zvolit barvu nebo obrázek. Barvu opět definuje třemi mož- nostmi: jménem, rgb čísly nebo hexa-kódem. Obrázek je nejčastěji ve formátech gif, png nebo jpg. U obrázku je nutné počítat s obtížnou prací díky jeho rozměrům. Nemůžeme obrázek nějak defor- movat či roztahovat změnou jeho proporcí. Máme ale některé možnosti fixace, uchycení, skrolování či opakování. Tyto možnosti jsou uvedeny v tabulce 7.3.

Tab. 7.3: Pozadí elementu; zdroj: (3)

Nejen u obrázků, ale obecně u mnoha elementů, nám při definici plochy dělá problém nastavení počátku elementu. Abychom neměli např. písmo natlačené příliš na okraj stránky, použijeme okraje tzv. box modelu html elementu. Tento box model určuje plochy kolem html elementu, které lze pomocí vlastností CSS nastavit na požadovanou hodnotu.

Obr. 7.4: Box model html elementu; zdroj: (3)
Tab. 7.4: Box Model návrhu a rozložení (tzv. design& layout); Zdroj: (3)

Na praktickém příkladu si ukážeme nastavení obrázku na pozadí elementu a také vnější okraj – mar- gin. Obrázek nebudeme na pozadí opakovat a umístíme jej doprava. Element odstavec bude mít ještě nastavenou barvu pozadí a hodnoty vnějších okrajů.

Obr. 7.4: Zdrojový kód CSS formátování pozadí a okraje; zdroj: (3)

Vlastnosti odstavce jsou dle zdrojového kódu z Obr. 7.4 deklarovány jako CSS vlastnosti elementu, ale i pomocí selektoru class s tečkovou konvencí. Výsledný vzhled odstavce v prohlížeči vidíme na Obr. 7.5.

Obr. 7.5: Zobrazení formátování odstavce podle zdrojového kódu z obrázku 7.4; zdroj: (3)

Rovněž při nastavení proporcí je vhodné místo atributů html elementů použít CSS vlastnosti. Nasta- vení se provádí obvykle v pixelech nebo procentuálně. Seznam vlastností pro nastavení proporcí elementů je uveden v tabulce 7.5.

Tab. 7.5 Velikost elementu; zdroj: (3)

Nastavení proporcí html elementu si ukážeme na příkladu nastavení rozměru obrázku. Na obrázku 7.6 je uveden zdrojový kód s definicí tří velikosti pomocí selektoru class, na Obr. 7.7 je výsledný příklad zobrazen v prohlížeči.

Obr. 7.6: Zdrojový kód CSS nastavení velikosti elementu; zdroj: (3)

Obr. 7.7: CSS nastavení velikosti elementu podle zdrojového kódu z Obr. 7.6; zdroj: (3)

Tato kapitola neobsahuje kompletní seznam CSS vlastností, ale vybírá pouze ty nejdůležitější. Se- znam dalších elementů najdeme ve W3C specifikaci nebo na portálech zabývajícími se kaskádovými styly.

Seznam vybraných portálů s popisem CSS vlastností

•   http://www.w3.org/Style/CSS/

•   http://www.jakpsatweb.cz/css/css-vlastnosti-hodnoty-prehled.html

•   http://www.w3schools.com/css/css_reference.asp

  
  

  
  

  8.1 Základy formulářů

  Formuláře jsou dnes součástí většiny webů. Nejčastěji se setkáme s emailovými formuláři, registrač- ními formuláři nebo formuláři umožňujícími vložit příspěvek do diskuze. Formuláře jsou rozhraním v rámci komunikace uživatele s webovou aplikací. (X)HTML obsahuje prvky, pomocí nichž lze vytvá- řet interaktivní formuláře nebo vkládat ovládací prvky do dokumentu. Informace získané pomocí interaktivního formuláře jsou předány nějakému skriptu na straně serveru, který je dále zpracuje. Formulář má proto dvě hlavní části – viditelnou část v (X)HTML stránce a neviditelnou část na straněserveru (skript).

  8.1.1 Základní principy a konstrukce formuláře
  Obsahem formulářů jsou různé funkční prvky, které umožňují uživateli zadávat nejrůznější infor-

  mace.

  Formuláře zahrnují textová a zaškrtávací pole, rolovací seznamy, tlačítka, přepínače atd. Vytvořit takovýto formulář není pro člověka znalého základů HTML a CSS žádný problém. Problém nastává až v momentě, kdy se data získaná formulářem mají někam odeslat nebo uložit, případně nějakým způsobem zpracovat. A na tuto činnost je již HTML krátké. Je potřeba znalosti programovacích ja- zyků, pomocí nichž se definují další operace, které se získanými údaji z formulářů manipulují. Např. odesílají data na email adresáta, ukládají data do úložiště (soubory, databáze) nebo pomocí těchto dat filtrují výsledky zobrazení produktů e-shopů (3).

  Celý formulář je vždy ohraničen elementem form. Uvnitř tohoto kontejneru se vyskytují veškeré ovládací prvky (tlačítka, textová pole, zaškrtávací pole, rolovací seznamy atd.) potřebné pro daný formulář. Vzhled těchto ovládacích prvků závisí z velké části na použitém prohlížeči, ale funkce je vždy stejná. Kromě ovládacích prvků se uvnitř formuláře mohou vyskytovat veškeré ostatní prvky běžně používané v těle (X)HTML dokumentu. Hlavní účel elementu form spočívá ve sdružení ovlá- dacích prvků do jednoho bloku, aby se s nimi dalo pracovat. Formulářů se může v jednom HTMLdokumentu vyskytovat libovolný počet, ale nesmějí se vnořovat do sebe.

  <form[ atributy]>
  ... Prvky formuláře (select, input, textarea) ... ... Další různé (X)HTML prvky ...
  ...
  </form>

  8.1.2 Formulářové značky
  V této kapitole budou vysvětleny všechny značky, které jsou podstatné z hlediska našeho zpracování

  formuláře. U jednotlivých značek jsou popsány i všechny atributy podstatné pro další zpracování.

  <form> - párová značka, která vymezuje formulář v daném dokumentu <form id=”identifikátor”

  name=”unikátní jméno formuláře”
  action=”odkaz na script pro zpracování formuláře” method=”GET|POST”
  accept=”seznam MIME typů obsahu formuláře” enctype=”typ kódování odesílaných dat” >

  ... ovládací prvky ...

  </form>

  •   id - unikátní identifikátor prvku, atribut „id“, sdílí totožný prostor názvů s atributy „name“

    (name má přednost před id, jsou-li uvedeny oba, jinak může být použit jeden nebo druhý),

  •   name - unikátní jméno formuláře,

  •   action - atribut určuje URI adresu skriptu, který formulář zpracuje; může to být URI s proto- kolem http nebo mailto,

  •   method - atribut specifikuje http metodu, která bude použita pro odeslání dat formuláře

     Metoda GET – předává data pomocí URL. Obsah formulářových polí se předá jakou součást adresy URL, která může vypadat takto:

    http://www.example.cz/skript-zpracovani.html?jmeno=honza&odeslat=Odeslat%jméno Obsah formulářových polí (hodnota zadaná uživatelem, nebo přednastavená hodnota atri- butu value) se načte do tzv. superglobální proměnné v poli GET, odkud je dostupná pro další zpracování.

    Tato metoda není ideální pro všechny případy použití, protože se data odeslaná formulá- řem přenášejí viditelně v URL a podléhají tak určitému bezpečnostnímu riziku. Taktéž množství dat přenesených touto metodou je značně omezené.

    2.Metoda POST-jevhodnáproobsáhlejšídata.Odesílanádatajsouskrytaauživateljenemůže ve výsledku modifikovat jako v případě metody GET (POST bezpečnější oproti metodě GET).

  •   accept - seznam MIME typů (oddělených čárkou), jehož prostřednictvím server zpracováva- jící tento formulář jej bude moci korektně ovládat,

  WEBOVÉ TECHNOLOGIE 66

   enctype - zakódování obsahu (text/plain | multipart/form-data | application/x-www-form- urlencoded); použití v případě, že metoda odesílání je POST; implicitní hodnota je “applica- tion/x-www-form-urlencoded”; je li v odesílaných datech obsažen soubor nebo odesíláme ne-ASCII znaky, musí být jako hodnota enctype zadána “multipart/form-data”.

  <input> - nepárová značka, která slouží k definici jednoho ovládacího prvku typu vstupní pole

  <input id=”identifikátor”
  type=”typ prvku“
  name=”jméno prvku” value=”hodnota prvku” maxlength=”maximální počet znaků” accept=”typ souboru” alt=”alternativní text” checked=”zaškrtnutí prvku” readonly=”prvek pouze pro čtení” disabled=”prvek vypnutý” >

  •   id - unikátní identifikátor prvku, atribut „id“, sdílí totožný prostor názvů s atributy „name“ (name má přednost před id, jsou-li uvedeny oba, jinak může být použit jeden nebo druhý),

  •   type – typ prvku,

     text – implicitní typ; jednořádkové textové pole; atribut value specifikuje počáteční hod- notu,

    password – podobné jako text; vpisovaná hodnota je zastírána např. hvězdičkami,

    •   checkbox – zaškrtávací políčko; atribut value specifikuje hodnotu vracenou v případě za- škrtnutí políčka; při odesílání formuláře se odesílají pouze zaškrtnuté ovládací prvky chec-

      kbox,

    •   radio – volba právě jedné možnosti; prvky typu radio se pomocí stejného jména sdružují do

      skupin (je-li jeden zapnut, tak se ostatní nastaví jako vypnuto); ve skupině prvků typu radio je implicitně nastaven ten, který má nastaven atribut checked (pokud takto žádný nastaven není, pak se nastavuje první prvek ve skupině); atribut value specifikuje hodnotu vracenou pro danou volbu,

      submit – tlačítko pro odesílání dat na server; atribut value specifikuje popis tlačítka,

    •   reset – tlačítko pro obnovení implicitních hodnot; atribut value specifikuje popis tlačítka ,

    •   hidden – skryté pole; hodnota je odesílána s formulářem; atributem value lze definovat

      pevnou hodnotu nezadávanou uživatelem,

    •   image – tlačítko s obrázkem; atribut src specifikuje URI obrázku; tlačítko odesílá data z for-

  muláře a souřadnice odpovídající kliknutí na obrázek; hodnoty jsou měřeny,

  
  

  •   v pixelech od levého a horního okraje; souřadnice x a y se odesílají jako hodnoty „name.x = x“ a „name.y = y“, kde name je hodnota atributu name,

  •   file – pole pro vybrání souboru; umožňuje spolu s formulářem odeslat na server jeden nebo více lokálních souborů; atributem accept lze vymezit přípustné typy souborů,

  •   button – tlačítko bez implicitní činnosti; činnost je definovaná pomocí skriptu.

  •   name – jméno prvku; musí být v rámci formuláře jednoznačné; ve všech prvcích kromě typu

    „submit“ a „reset“ je tento atribut vyžadován,

  •   value – počáteční hodnota prvku dle typu

     text, password, hidden – počáteční hodnota prvku,
     checkbox, radio – požadován; definuje výsledek, je-li prvek vybrán kliknutím,  submit, reset, button – text na tlačítku,
     image – symbolický výsledek přenášený na skript,
     file – nemůže být použit s tímto typem.

  •   maxlength – maximální počet znaků akceptovatelných u prvků „text“ a „password“,

  •   accept – seznam MIME typů přípustných pro pole typu „file“, které je ochoten skript zpraco-

    vávající formulář přijíma,t

  •   alt – alternativní text,

  •   checked – implicitní zaškrtnutí pole typu „checkbox“ nebo implicitní volba pole typu „radio“,

  •   readonly – pole je pouze pro čtení; atribut lze použit pouze s typem „text“,

  •   disabled – znepřístupnění ovládacího prvku.

    <textarea> - párová značka, která se používá pro definici víceřádkového vstupního pole formuláře. Smí se vyskytnout pouze v prvku „form“ a nesmí být vnořována. Text uzavřený mezi značkami je implicitní zobrazovaný text. Zalomení řádku je zachováno a délka textu není omezena.

    <textarea id=”identifikátor” name=”jméno prvku” readonly=”prvek pouze pro čtení” disabled=”prvek vypnutý” >

    ... Text ... </textarea>

    •   id - unikátní identifikátor prvku, atribut „id“, sdílí totožný prostor názvů s atributy „name“ (name má přednost před id, jsou-li uvedeny oba, jinak může být použit jeden nebo druhý)

    •   name – jméno prvku; musí být v rámci formuláře jednoznačné (odesílá se na server)

  WEBOVÉ TECHNOLOGIE 68

  •   readonly – pole je pouze pro čtení, není možná modifikace

  •   disabled – znepřístupnění ovládacího prvku (nelze zapsat text nebo ovládací prvek vybrat)

    <select> - párová značka, pomocí které lze vytvořit rozbalovací seznam a slouží ke specifikaci na- bídky s řadou volitelných vstupů definovaných pomocí prvku „option“. V prvku „select“ se předpo- kládá použití alespoň jednoho prvku „option“. Prvek „select“ může obsahovat přednastavené volby. Chování UA (user agent – prohlížeč) při nestandardním nastavení není nijak specifikováno a závisí to čistě na prohlížeči.

    <select id=”identifikátor” name=”jméno prvku”

    multiple=”výběr více položek”

    disabled=”prvek vypnutý” > <optgroup>...

    <option> ... </option> ...

    </select>

  •   id - unikátní identifikátor prvku, atribut „id“, sdílí totožný prostor názvů s atributy „name“ (name má přednost před id, jsou-li uvedeny oba, jinak může být použit jeden nebo druhý)

  •   name – jméno prvku; musí být v rámci formuláře jednoznačné (odesílá se na server)

  •   multiple – povoluje možnost výběru více než jedné položky současně

  •   disabled – znepřístupnění ovládacího prvku (ovládací prvek nelze vybrat)

    <optgroup> - párová značka, která slouží k definici skupiny nabídek v prvku „select“. Značka se smí vyskytnout pouze v prvku „select“ a musí obsahovat alespoň jeden prvek „option“.

    <optgroup id=”identifikátor” label=”návěstí pro skupinu voleb” disabled=”prvek vypnutý” >

    <option> ... </option>

    ...

    </optgroup>

  •   id - unikátní identifikátor prvku

  •   label–nadpis/návěstískupiny nabídek

  •   disabled – znepřístupnění skupiny nabídek (nelze provádět volby)

  69 ZNAČKY HTML KÓDU PRO PRÁCI S FORMULÁŘI <option> - párová značka, pomocí které se definuje jedna položka nabídky uvnitř prvku „select“.

  Značka se může vyskytovat pouze v prvku „select“ nebo „optgtoup“ a nelze ji vnořovat.

  <option id=”identifikátor” value=”hodnota”

  selected=”výběr více položek”

  disabled=”prvek vypnutý” > ... text nabídky ...

  </option>

  •   id - unikátní identifikátor prvku

  •   value – hodnota prvku pro odeslání v případě výběru; pokud není uvedena, tak se odešle obsah nabídky

  •   selected – specifikuje implicitně vybranou nabídku

  •   disabled – znepřístupnění nabídky (volba nelze vybrat)

    <button> - párová značka, která slouží k definici tlačítka v dokumentu.

    <button id=”identifikátor” type=”typ prvku“

    name=”jméno tlačítka” value=”hodnota prvku” disabled=”prvek vypnutý” >

    ... nápis / obrázek tlačítka ...

    </button>

  •   id - unikátní identifikátor prvku, atribut „id“, sdílí totožný prostor názvů s atributy „name“

    (name má přednost před id, jsou-li uvedeny oba, jinak může být použit jeden nebo druhý)

  •   type – typ tlačítka

     button – jednoduché tlačítko (ovládání skriptem)
     submit – tlačítko pro odesílání formuláře na server (implicitní hodnota)  reset – tlačítko pro obnovení implicitních hodnot formuláře

  •   name – jméno tlačítka

  •   value – definuje výsledek pro tlačítko typu „button“

  •   disabled – znepřístupnění tlačítka (není možnost ovládání).

    
    

    V předchozích kapitolách jsme si vysvětlili podstatu formátování pomocí kaskádových stylů. Nyní přejdeme ještě o kousek dále a ukážeme si, jakým způsobem využijeme zkušenosti z předchozích kapitol při návrhu stránky.

    Dlouhou dobu se řešilo, jakým způsobem rozložit celý obsah webu do samostatných kompaktních bloků. Chtěli jsme mít na svých stránkách třeba horní blok jako záhlaví celé stránky – např. s logem společnosti, názvem školy atp. Poté levý sloupec pro menu stránek s hypertextovými odkazy a pak větší blok pro obsah jednotlivých stránek. Dříve se k těmto účelům používaly Rámy, tzv. frames.

    9.1 Rámy

    Pomocí rámů lze rozdělit obrazovku na několik částí, v každé pak může být jiný obsah. Rámy jsou rozumným řešením pro navigaci. V jednom okně je menu, které se nemění a v druhém obsah stránky, který se mění.

    9.1.1 Logika tvoření rámů

    Popíšeme, jak se rozdělí obrazovka (horizontálně na poloviny a dolní polovinu na polovinu). Rámy se vždy deklarují v sekci <head> a </head> Základem je značka <frameset>, která určuje, jak se stránka rozdělí.

    Obr. 9.1: Použití značky <frameset>; zdroj: https://www.tvorba-webu.cz/xhtml/ramy.php

    Nejprve rozdělíme obrazovku na 20 % a 80 % horizontálně, do 20 % oblasti vložíme stránku, a rám 80 % rozdělíme opět na 20 % a 80 %, ale vertikálně

    

    Složitější deklarace

    

    73 ZNAČKY HTML KÓDU PRO PRÁCI S RÁMY

    •   Rozdělíme obrazovku horizontálně na dvě části a do té první vložíme nějakou stránku.

    •   Rozdělíme obrazovku vertikálně na dvě části a do té první vložíme stránku.

    •   Zbytek rozdělíme horizontálně na dvě části a do té druhé vložíme obsah.

    •   Zbytek opět rozdělíme vertikálně na dvě části, do té druhé vložíme stránku.

    •   Zbytek rozdělíme horizontálně na dvě části a vložíme do nich obsah.

      A nyní přijde přepis na HTML, kdykoli dělíme obrazovku, použijem tag <frameset>, kdykoli vkládáme obsah, použijeme <frame>

      Obr. 9.2: Rozdělení obrazovky pomocí značky <frameset>; zdroj: https://www.tvorba-webu.cz/xhtml/ramy.php

          

    WEBOVÉ TECHNOLOGIE 74

    9.2 Layout www stránek

    Rámy jsou ale z více dnes závažných důvodů již zavržené řešení a byly nahrazeny tzv. tabulkovým layoutem. Obsah webu byl celý uvozen do jedné velké tabulky a bylo po starostech. Nicméně i toto řešení není z nejmoudřejších a proto se dnes vytváří tzv. CSS layout.

    

    Obr. 9.3: CSS Layout; zdroj: Coding Horror. Lets Build Grid. http://blog.codinghorror.com/lets-build-a-grid/

    Pomocí layoutu si můžeme webovou stránku rozdělit do oblastí, do kterých pak vkládáme dílčí části našich stránek. Na internetu najdete dokonce spoustu on-line generátorů, které dle vašeho zadání vytvoří potřebný styl CSS4.

    9.2.1 CSS pozicování
    CSS pozicování je jeden ze způsoby návrhu layoutu, používá jej většina moderních webů a portálů.

    

    4 Např: http://www.cssportal.com/layout-generator/

    Obr. 9.4: CSS pozicování; zdroj: (4)

    75 ZNAČKY HTML KÓDU PRO PRÁCI S RÁMY

    Pozicování elementů html nám umožňuje umístit objekt na stránku doslova, kam chceme. Pozicovat můžeme absolutně nebo relativně. Z názvu termínu absolutně vyplývá, že daný objekt se bude na- cházet přesně v souřadnicích, které mu určíme. Relativně naopak znamená posunutí v různých smě- rech oproti běžné poloze. V Tab. 9.1 jsou definovány CSS vlastnosti pro pozicování elementů. Všim- něme si, že vlastnost left určuje posunutí doprava, můžeme si tuto vlastnost vysvětlit jako posunutí v pixelech z levého okraje stránky.

    Tab. 9.1 CSS definice pozicování; zdroj: (4)

    V souvislosti s pozicováním se můžeme zejména u obrázku setkat s problémem obtékání textem. Defaultně prvky obtékané nejsou, výchozí hodnotou je none. V Tab. 9.2 jsouobsaženy CSS vlastnosti pro obtékání elementu. Podmínkou možnosti obtékání je nastavení šířky obtékaného elementu. Vlastnost clear určuje vykreslování elementu až pod obtékanými prvky.

    Tab. 9.2 CSS definice obtékání prvku; zdroj: (4)

    Nejvhodnějším vysvětlením problematiky pozicování je ukázka praktického příkladu. Navrhneme si layout webových stránek, který bude pozicován absolutně. V externím souboru pozicovani.css na- definujeme souřadnice absolutního pozicování. U jednotlivých částí layoutu ještě nastavíme dílší vlastnosti jako barva pozadí, písma apod. Výsledný obsah souboru se zdrojovým kódem vidíme na obrázku 9.5.

     

    WEBOVÉ TECHNOLOGIE

    76

    

    Obr. 9.5: Pozicování layoutu stránky; zdroj: (4)

    V hlavním souboru již budeme pracovat pouze s elementy <div>, jejichž id se bude odkazovat na vlastnosti kaskádových stylů. Zdrojový kód html jednotlivých stránek tak bude přehledný a snadno editovatelný. Element <div id=“vlevo“ > bude obsahovat zmíněné menu s odkazy na další stránky, které budou s totožným layoutem, pouze s rozdílným informačním obsahem v elementu <div id=“hlavni“ >. Element <div id=“zahlavi“ > je určen pro zobrazení logo či názvu stránek v horní části stránky, tento element bude rovněž shodný pro všechny stránky, které je možné zobrazit z navigač- ního menu.

    Na Obr. 9.6 vidíme přehledný zdrojový html kód jedné z navržených stránek. Výsledný layout strá- nek je zobrazen na Obr. 9.7. Jedná se o ukázkový příklad layoutu, stránky jsou tudíž prázdné, do jednotlivých částí jsme zapsali pouze informativní text.

    

    Obr. 9.6: Html kód s rozmístěním elementů <div> pro pozicování layout; zdroj: (4)

    77

    ZNAČKY HTML KÓDU PRO PRÁCI S RÁMY

    

    Obr. 9.7: Výsledný layout webu podle zdrojového kódu z obr. 9.6; zdroj: (4)