Webdesign

Webdesign se zabývá tvorbou webových stránek. Jde o rozsáhlou oblast, která se zabývá nejen technickou stránkou realizace webových stránek, ale i uživatelským pohledem. Má tak mimo jiné přesah i do psychologie či marketingu.

Jedno z témat, na které při tvorbě webových stránek opakovaně narážíme, je použití barev. Pro dobrý webdesign je potřeba rozumět obecným principům i reprezentaci barev.

Základní prostředek pro realizaci webových stránek je značkovací jazyk HTML (HyperText Markup Language). Pro snadnější správu stránek a udržení jednotného vzhledu používáme HTML v kombinaci s CSS (Cascading Style Sheets, kaskádové styly). Základy HTML a CSS pokrývají tato témata:

• HTML: základy – základní principy HTML.
• HTML: tabulky a seznamy – použití jednoduchých tabulek a seznamů v HTML.
• CSS: základy – základní principy CSS.
• CSS: hlavní vlastnosti a jejich použití – nejčastěji používané vlastnosti v CSS.
• CSS: barvy a jejich použití – práce s barvami v CSS.

Pro tvorbu dynamických webových stránek dále potřebujeme programovací jazyky, pomocí kterých zapisujeme žádoucí chování webu. Pro tvorbu webů se často používá JavaScript a Python.

Pomocí HTML můžeme označovat význam a zobrazení textu, například takto:

Toto je <b>tučný</b> text. A toto <i>kurzíva</i>.

Přehled běžných značek:

Některé značky udávají význam textu, např. <strong> a <em>, zatímco jiné udávají pouze způsob zobrazení, např. <b> a <i>. Typické zobrazení <strong> a <em> je tučné písmo a kurzíva, to však lze upravit pomocí kaskádových stylů (CSS).

Párové značky lze zanořovat, například tučnou kurzívu zapíšeme <b><i>takto</i></b>. Značky nelze „křížit“, tj. před uzavřením značky musíme vždy nejprve uzavřít všechny zanořené značky. Nepárové značky nemají žádný obsah ani ukončovací značku, např. <br>.

Mezery a nové řádky

Libovolné množství mezer a nových řádků v HTML kódu se zobrazí jako jedna mezera. Pokud potřebujeme nový řádek, použijeme značku <br>. Pokud chceme zachovat přesné počty mezer a nových řádků, použijeme značku <pre>:

<pre>

10x +  2y  =  16

 5x +   y  =   8

</pre>

Značky h1–h6, p, pre a hr jsou blokové, což znamená, že se před nimi i za nimi zalomí řádek. Například každý odstavec začne na novém řádku, i pokud ve zdrojovém kódu nový řádek není:

<p>První odstavec.</p> <p>Druhý odstavec.</p>

Atributy

Některé značky mají atributy, které ovlivňují jejich zobrazení či chování. Například u odkazů potřebujeme určit jejich adresu (atribut href z anglického hypertext reference) a volitelně, zda se má odkaz otevřít v novém okně (atribut target). U obrázků určujeme cestu k souboru (src), alternativní text (alt), který se vypíše, pokud obrázek nemůže být zobrazen, a volitelně velikost v pixelech (width, height). Atributy zapisujeme do úvodní značky a hodnoty obalujeme do uvozovek:

<a href="https://www.umimecesky.cz/">Umíme česky</a>

<img src="celer.png" alt="celer" width="400">

Seznamy

Nečíslované seznamy vytvoříme pomocí párové značky <ul> (unordered list). Jednotlivé položky seznamu označíme pomocí značky <li> (list item):

<ul>

<li>vlk</li>

<li>los</li>

<li>sob</li>

</ul>

• vlk
• los
• sob

Číslované seznamy vytvoříme pomocí párové značky <ol> (ordered list). Jednotlivé položky označíme opět pomocí značky <li>:

<ol>

<li>vlk</li>

<li>los</li>

<li>sob</li>

</ol>

1. vlk
2. los
3. sob

Typ odrážek a číslování lze změnit pomocí atributu type:

<ol type="A">

<li>vlk</li>

<li>los</li>

<li>sob</li>

</ol>

1. vlk
2. los
3. sob

Tabulky

Tabulku vytvoříme pomocí značky <table>, její řádky pomocí <tr> (table row), buňky pomocí <td> (table data):

<table>

<tr><td>pes</td><td>vlk</td></tr>

<tr><td>los</td><td>sob</td></tr>

</table>

Pro zvýraznění textu v hlavičce použijeme <th> místo <td>:

<table>

<tr><th>Zvíře</th><th>Výška</th></tr>

<tr><td>los</td><td>180 cm</td></tr>

<tr><td>sob</td><td>120 cm</td></tr>

</table>

Výchozí zobrazení tabulek je typicky bez čar oddělujících jednotlivé buňky. Vzhled lze změnit pomocí kaskádových stylů (CSS).

Spojování buněk

Buňky lze spojovat pomocí atributů rowspan a colspan. Hodnota atributu udává, kolik řádků či sloupců slučujeme.

<table>

<tr><td rowspan=2>vlk</td><td colspan=2>pes</td></tr>

<tr><td>los</td><td>sob</td></tr>

</table>

Kaskádové styly (CSS) umožňují určit vzhled jednotlivých prvků HTML stránky (či jiného XML dokumentu). Popis vzhledu a grafického rozložení dokumentu je tak do určité míry oddělen od obsahu, podobu určitých částí dokumentu lze snadno a hromadně měnit. Pomocí CSS lze také zajistit responzivní design: dokument může vypadat odlišně např. při různých rozměrech obrazovky.

CSS může být zapsáno v odděleném souboru (s příponou .css), na který se odkazuje z hlavičky HTML souboru. V takovém případě se jedná o tzv. externí CSS. Kaskádový styl též může být obsažen v tagu <style> v hlavičce HTML (interní CSS) či přímo u jednotlivých tagů v dokumentu (např. <p style="color: green">Hello world!</p> – inline CSS).

Externí či interní CSS se skládá z určitých pravidel. Pravidlo obsahuje tzv. selektor (popisuje, který prvek bude pravidlem ovlivněný) a jednotlivé deklarace oddělené středníky, společně uzavřené ve složených závorkách. Deklarace vždy sestává z identifikátoru vlastnosti (např. font-size), dvojtečky a hodnoty (např. 12pt).

Selektory mohou ovlivňovat konkrétní html tag, v takovém případě sestávají pouze z písmen a číslic:

h2 {color: ochre} – Nadpisy 2. úrovně budou okrové.

Pokud mají deklarace platit pro více prvků zároveň, selektory se oddělují čárkou:

h2, h3 {color: ochre} – Nadpisy 2. a 3. úrovně budou okrové.

Má-li selektor ovlivňovat jen prvky s určitou třídou, píše se na jeho začátek tečka:

.btn-skyblue {background: skyblue; border-radius: 2rem} – Prvky s class="btn-skyblue" budou mít modré pozadí a zaoblené rohy.

Prvek se určitým identifikátorem (id) se předznamenává znakem # (např. #price-selector).

Je-li mezi selektory mezera, ovlivňujeme jimi druhý uvedený prvek uzavřený v prvním uvedeném:

.gallery img {width: 130px; height: 130px} – Ovlivní obrázky v prvku se třídou gallery.

V případě selektorů oddělených plusem se předpis týká druhého uvedeného prvku, který následuje za prvním uvedeným:

h1 + p {font-size: 13pt} – Ovlivní odstavce (<p>) následující po nadpisech první úrovně (<h1>).

Pomocí dvojtečky v selektoru se vyjadřuje určitý stav prvku, např a:hover ovlivní odkazy, pokud je nad nimi kurzor.

Jeden prvek může být ovlivněn více pravidly. Mějme CSS:

p {font-size: 12pt}

.text-navy {color: blue}

Odstavec <p class="text-navy">Hello world!</p> tak bude mít písmo velké 12 bodů i modrou barvu.

Mezi běžné vlastnosti používané v rámci CSS patří například:

Některé vlastnosti (např. margin, padding, border) mohou ovlivňovat jen určitou stranu prvku. Chceme-li určit hodnoty pro různé strany, můžeme použít název vlastnosti v kombinaci s -top, -bottom, -left či -right (např. padding-top). Také lze rozepsat více hodnot ke krátkému identifikátoru vlastnosti (např. padding: 5px 10px 15px 20px – nastaví odsazení shora, zprava, zespoda a zleva, padding: 5px 10px – nastaví svislé odsazení 5px a vodorovné 10 px).

Co se týče rozměrů prvku, ve výchozím nastavení se k určenému rozměru přičítá i odsazení a rámeček (tedy např. prvek s width: 100px; padding: 10px bude široký 120 px). Tomuto chování lze předejít pomocí nastavení * {box-sizing: border-box}.

Podobu textu ovlivňují například vlastnosti:

Na způsobu zobrazení prvků se podílí např. vlastnost display. Její často užívané hodnoty jsou:

Zvláště flex a grid se uplatňují při tvorbě responzivního grafického rozvržení webů.

Mezi jednotky užívané v rámci CSS patří např. px (pixely, ve výsledku může být velikost definovaná v pixelech ovlivněna škálováním na zařízení), rem (1 rem = velikost fontu v základním elementu), % (procentní část rodičovského elementu), vw (šířka zobrazení, např. viditelné oblasti v rámci okna prohlížeče), vh (výška zobrazení). Jednotky se za hodnotu zapisují bez mezery.

Pomocí zápisu @media lze část předpisu určit pouze pro určité zařízení či způsob zobrazení:

@media (max-width: 600px) {

  p {

    font-size: 10pt;

  }

}

Kód výše definuje, že odstavce (<p>) budou mít velikost písma 10 pt při šířce obrazovky menší než 600 px.