jejího provozu význam služby FTP pomalu klesá, díky jejímu jednoduchému zprovoznění prakticky na libovolném počítači připojeném k Internetu je však stále užitečná. Základní klient služby FTP je součástí protokolu TCP/IP, takže pokud jej máme nainstalovaný lze službu FTP okamžitě používat.

 Vzdálený přístup Telnet
Prostřednictvím služby Telnet se můžeme připojit ke vzdálené LAN a chovat se jako její běžný uživa- tel. To je velmi příjemné, jsme-li např. v zahraničí. Pomocí Telnetu se můžeme připojit ke svému domovskému serveru a přečíst např. došlou elektronickou poštu. Můžeme jeho prostřednictvím rovněž využívat služeb katalogů mnohých knihoven v ČR i v celém světě.

Služba Telnet (Telecommunication Network) umožňuje připojení ke vzdálenému počítači nejen pro přenos souborů, jako je tomu u služby FTP, ale i pro další práci na tomto vzdáleném počítači (spouš- tění programů, zpracování elektronické pošty atd.), tedy obdobné služby, jaké nám poskytuje server v naší LAN. Telnet je obdobně jako FTP realizován dvojicí klient - server. Vzhledem k tomu, že posky- tuje širší služby, vyžaduje prakticky ve všech případech autorizovaný přístup - uživatel tedy musí mít na vzdáleném počítači svůj účet chráněný heslem.

1.2 Princip WWW stránek

Prvním významným krokem k rozšíření Internetu mezi nejširší veřejnost bylo zavedení služby World Wide Web, kterou dnes známe pod označením WWW. Tato přelomová služba vznikla roku 1989 ve Švýcarsku, v evropském centru pro jaderný výzkum CERN. Její vynálezce Tim Bernes Lee ji původně zamýšlel jako vnitropodnikový systém (5).

Komunikace počítače s internetovým prohlížečem na straně jedné a webovým serverem poskytují- cím výslednou webovou stránku na straně druhé probíhá v modelu klient/server. Tento model ko- munikace pracuje způsobem žádost/odpověď (request/response). V praxi to znamená, že klientský počítač zašle serverovému požadavek na informace. Serverový počítač klientovi odpoví a informace mu poskytne. Klientský počítač pak získané informace zobrazí v prohlížeči.

Obr. 1.1: Komunikace typu klient/server ; zdroj: http://178.248.252.60/~xsenj01/klient%20 -%20server.htm

1.2.1 Dostupné prohlížeče a nástroje pro tvorbu web stránek

Webové stránky se zobrazují v prohlížečích tzv. browserech, které umožňují http komunikaci s we- bovým serverem a přijatý kód zobrazují ve formě webových stránek. Mezi nejznámější internetové prohlížeče patří:

•   Internet Explorer od společnosti Microsoft

•   Mozilla Firefox

•   Opera

•   Google Chrome od společnosti Google

 Safari a další.

Obr. 1.2 Ikony nejznámějších prohlížečů

Právě pro výše uvedené skutečnosti již Internet Explorer není tak dominantním prohlížečem, který měl v minulosti podíl okolo 95 %. Dnes se stále více užívá prohlížeč Mozilla Firefox, ale i další, které máme zobrazeny na obrázku: Opera, Google Chrome a Safari.

V prvním odstavci této kapitoly jsme si definovali, v jakém programu můžeme stránky prohlížet, nyní nastal čas zodpovědět otázku, v jakém programu webové stránky vytvářet? Odpovědí na tuto otázku můžeme opět slyšet desítky. Rozhodujícím aspektem je právě naše pozice v roli tvůrce stránek. Zdro- jový kód stránek můžeme totiž psát i v obyčejném textovém editoru jako je notepad. Nebude to příliš pohodlné, ale jsou případy, kdy si s tímto editorem pohodlně vystačíme. Pro relevantní odpo- věď na otázku musíme vědět, zdali se tvorbou stránek hodláme věnovat dlouhodobě, profesionálně či amatérsky a jaké webové stránky budeme vytvářet. Mnohé editory jsou volně šiřitelné zdarma, naopak ty licencované nejsou levnou záležitostí, avšak ve svém instalačním balíku dokáží nabídnout profesionální funkce. Mezi volně šiřitelné editory patří velice oblíbený editor PSPad. Na opačném konci stojí například profesionální nástroj Dreamweaver společnosti Macromedia – dnes již Adobe. V našem předmětu se seznámíme i s Microsoftími produkty Visual Studio a převážně Microsoft Ex- pression Web, který je nástupcem bývalého nástroje Front Page z balíku Office této společnosti.

Příklad volně dostupných editrorů HTML

•   PSPad Editor - http://www.pspad.com/cz/

•   HTML Kit - http://www.chami.com/html-kit/

•   HTML Editor - http://editor.2b.cz/

•   Dynamic HTML Editor - http://www.dynamic-html-editor.com/en/home.asp

•   Golden HTML Editor - http://www.golden-html.com/

•   CofeeCup Html Editor 2008 - http://www.coffeecup.com/

•   1Site Lite - http://www.visualvision.com/software/1site_e.html?1site

•   Hypertext Builder - http://www.paksoft-productions.com/hb/hb1.asp

•   AceHtml - http://software.visicommedia.com/en/products/acehtmlfreeware/

•   Webster - http://www.dwn.cz/webster (4)

  A mnoho dalších, záměrně neuvádím čísla verzí programů, neboť editory se neustále zdokonalují. Jejich web adresy výrobců by však měly zůstat stále stejné.

  WWW je služba internetu, celosvětová pavučina, která propojuje systém hypertextových doku- mentů napsaných podle určitých pravidel a umožňuje jejich přenos. K tvorbě dokumentů pro WWW (www stránek) je nutná existence vývojového nástroje, který umožňuje formátovat text, vložení hy- pertextových odkazů, obrázků, zvukových stop atp. To vše má na starosti od svého vzniku v roce 1991 značkovací jazyk www stránek, jazyk HTML.

  Pozn: Hypertextové dokumenty – dokumenty obsahující hypertextové odkazy umožňující vzájemné propojení těchto dokumentů do funkčního celku.

1.2.2 HTTP

V prostředí sítě internet pracují počítače buď jako servery nebo jako klienti. Server poskytuje služby klientům, klienti služeb serveru využívají. V rámci služby WWW hovoříme konkrétně o webovém (HTTP) serveru. Tyto servery slouží jako uložiště www stránek a zpracovávají požadavky, které k nim vyšlou uživatelé prostřednictvím internetových prohlížečů. Klient musí serveru zaslat požadavek prostřednictvím určitých pravidel. Jestliže server požadavku rozumí, je schopen ho zpracovat a dokáže podle akce uživatele odpovědět, zašle klientovi opět dle zmíněných pravidel příslušnou odpověď (např. www stránku, dokument ke stažení atd.) (viz následující obrázek). Pravidla této ko- munikace určuje internetový protokol HTTP (Hypertext Transfer Protocol).

HTTPS - Bezpečnější varianta protokolu, která umožňuje přenášená data šifrovat a tím chránit před odposlechem či jiným narušením.

Obr 3.1: Komunikace klient/web server (zdroj: Webový server. http://cs.wikipedia.org/wiki/Webov%C3%BD_ser-ver#mediaviewer/Soubor:Webserver.jpg)

1.2.3 URL

URL, celým názvem Uniform Resource Locator („jednotný lokátor zdrojů“) je řetězec znaků s defi- novanou strukturou, který slouží k přesné specifikaci umístění zdrojů informací (ve smyslu doku- ment nebo služba) na Internetu. URL definuje doménovou adresu serveru, umístění zdroje na ser- veru a protokol, kterým je možné zdroj zpřístupnit.

Příklad URL:

1.3.2 Jazyk SGML

Ve stejné době, kdy vznikl GenCode, definovala komise ANSI1 svůj standard založený na jazyku GML (Generalized Mark-up Language – zobecněný značkovací jazyk). Následně se obě organizace spojily a vytvořily společný standard, který byl v prosinci 1986 akceptován jako standard ISO 8879 – SGML (Standard Generalized Mark-up Language).

Nejedná se o značkovací jazyk sám o sobě, ale o metajazyk sloužící k definování různých značkova- cích jazyků. Data zapsaná pomocí SGML jsou strojově modifikovatelná do libovolného formátu. Na bouřlivě se rozvíjejícím Internetu však SGML nemohl obstát. Je totiž komplikovaný na implementaci a obsahuje velkou spoustu rysů, které jsou zřídkakdy využity. Tato skutečnost má za následek, že software pro práci s tímto jazykem je složitý a nestabilní, přičemž drtivá většina tohoto software kompletní specifikaci SGML stejně nedokáže vyhovět.

1.3.3 Jazyk HTML

Asi nejznámější aplikací SGML je jazyk HTML (Hypertext Markup Language), který se používá pro tvorbu webových stránek. Jazyk HTML si získal velkou oblibu díky své jednoduchosti, která byla v os- trém kontrastu s komplexností SGML. Ukázalo se však, že pevně daná skupina značek, které HTML používá, už nestačí. Pro účely vyhledávání a vůbec efektivnější výměny dat by bylo lepší mít možnos t použít vlastní značky, které by přesně vymezily význam textu (3).

1.3.4 W3C a normy

World Wide Web Consortium (W3C) je mezinárodní konsorcium, jehož členové společně s veřej- ností vyvíjejí webové standardy pro World Wide Web. Cílem konsorcia je „Rozvíjet World Wide Web do jeho plného potenciálu vývojem protokolů a směrnic, které zajistí dlouhodobý růst Webu“ (1). W3C se také zabývá vzděláním a přístupností, vyvíjí software a nabízí otevřenou diskuzi o Webu pro- střednictvím fóra. Konsorciu předsedá jeho zakladatel Tim Berners-Lee, tvůrce služby Webu a pri- mární autor specifikací URL (Uniform Resource Locator), HTTP (HyperText Transfer Protocol) a HTML (HyperText Markup Language) - základních pilířů Webu.

1 1ANSI je americká instituce, která vyvíjí americké průmyslové standardy ve shodě s mezinárodními standardy ISO (International Standard Organization)

Mnoho formálních norem, další technické specifikace a software definuje operace různých aspektů World Wide Webu, Internetu a serverů pro výměnu informací. Mnoho z těchto dokumentů je prací World Wide Web Consortium (W3C).

•   Doporučení pro značkovací jazyk, hlavně HTML a XHTML od W3C. Definují strukturu a in- terpretaci hypertextových dokumentů.

•   Doporučení pro styly, především CSS od W3C.

•   Normy pro ECMAScript (obvykle forma JavaScriptu).

•   Doporučení pro Document Object Model (DOM) od W3C (1).

1.3.5 Jazyk XML

Standard SGML je velmi komplexní a jeho úplná impelmentace velice náročná. Přitom během deseti let používání SGML se ukázalo, že se v praxi používá pouze část jeho možností. Tato nejdůležitější podmnožina SGML proto byla vybrána jako novy jazyk, který dovede Web do třetího tisíciletí. Správně již tušíte, že novy jazyk dostal jméno XML (eXtensible Markup Language). Jedná se o pod- množinu SGML, která si zachovává možnost definování vlastních značek pro pro jednotlivé skupiny dokumentů. Narozdíl od SGML je mnoho parametrů předem určeno a nelze je měnit (maximalni délka názvů značek, použité oddělovače a speciální znaky atd. XML už rovnou počítá s podporou všech možných jazyků, takže není tak úzce svázáno s angličtinou jako většina předchozích počítačo- vých technologií. Syntaxe zápisu dokumentů v XML oproti SGML poměrně přísná, což umožni mno- hem snazší a levnější vývoj aplikaci, které umožňují s tímto jazykem pracovat (3).

1.3.6 Jazyk XHTML

U HTML se v poslední době začíná objevovat další nedostatek – příliš velká volnost syntaxe. Zatímco webové prohlížeče jsou poměrně robustní a spoustu chybných výrazů dokáží zkorigovat, existují a vyvíjejí se další zařízení pro přístup k Internetu (WebTV, organizéry, mobilní telefony, herní kon- zole), jejichž schopnosti jsou velmi rozdílné. V mnoha případech pak nemají výpočetní potenciál po- třebný ke kontrole kódu. Taková zařízení proto vyžadují, aby byl kód syntakticky správný a ověřený.

Toho lze s XML docílit snadno. Samo konsorcium W3C ale uvádí, že nevěří tomu, že by se právě XML stal hlavním nástrojem pro tvorbu WWW stránek. Ač se dá na rozdíl od SGML na Webu použít velice dobře, oproti HTML je pořád příliš složitý.

Proto W3C vytvořila kompromisní řešení – jazyk XHTML (eXtensible HyperText Mark-up Language). Jeho základem je HTML 4.01 definovaný jako aplikace XML. V praxi to znamená hlavně zpřísnění

2.2 Základy jazyka XHTML
Tato studijní opora je v příslušných příkladech a rozborech dále věnována jazyku XHTML, protože:

•   v současnosti stále nejužívanější jazyk tvorby www stránek,

•   vychází z množiny pravidel definovaných XML,

•   oproti HTML 4.1 má jednodušší a přehlednější zápis,

•   podporuje menší množství značek, je lépe zapamatovatelný,

•   je základem pro (X)HTML 5.

  Obr. 2.2: Zdrojový kód naší první webové stránky; zdroj: (4)

  K napsaní kódu stránek, které budeme v prvních kapitolách vysvětlovat, nám postačí i editor Note- pad.

  Je také možné editovat zdrojový kód html stránky, který budeme ihned prohlížet ve webovém pro- hlížeči. Zdrojový kód nám umožní prohlédnout každý typ prohlížeče. Musíme zvolit z nabídkové lišty prohlížeče MENU – ZOBRAZIT – ZDROJOVÝ KÓD.

2.2.1 Kostra stránky
Každá www stránka začíná a končí tagem <html> (viz Obr. 2.2). Je to tzv. kořenový tag. Každá www

stránka obsahuje dvě logické části:

 Hlavička dokumentu – tag <head>. Informace, které jsou uvozeny počáteční a koncovou značkou tagu <head>, jsou určeny pro potřeby internetového prohlížeče a uživatel se s nimi až na dvě výjimky vizuálně nesetká. Uvozují se zde například tzv. META tagy o kterých se dozvíte více později. Důležitou součástí hlavičky je také tag <title>. Obsah tagu <title> se zobrazí v záhlaví internetového prohlížeče jako titulek stránky.

 Tělo dokumentu – <body>. Vše co je uvozeno počáteční a koncovou značku tagu <body> se zobrazí jako obsah www stránky v internetovém prohlížeči. V našem prvním příkladu to byl vlastně jen jeden text odstavce, Moje první www stránka. Pro potřeby zvýraznění slova „první“ jsme použili TAG k tomu určený, TAG <strong>.

2.2.2 TAGY
Základní struktura dokumentu (X)HTML je tvořena TAGY – základními značkami jazyka.

Značkám příslušného jazyka, které popisují a formátují text, tabulky, obrázky atp. do kýžené podoby říkáme TAGY. Tyto se zapisují do ostrých závorek < > a jsou definovány příslušným jazykem, tj. mají různý význam. Jednoduše řečeno, značkují obsah www stránky a říkají mu, jak se má ve výsledku v internetovém prohlížeči zobrazit.

Každý TAG v jazyce XHTML má svou počáteční a koncovou značku. To je specifikum pro XHTML. Například na Obr. 2.2 si popíšeme TAG <p>, který označuje v těle www stránky text v odstavci.

<p> Moje první www stránka </p>
Koncová značka daného TAGU se liší pouze přidáním lomítka. Vše co leží mezi počáteční a koncovou

značkou daného TAGU je jeho obsahem a zobrazí se nám ve výsledku v internetovém prohlížeči (4).

2.2.3 Zásady a konvence jazyka XHTML

•   Všechny TAGY se zapisují malými písmeny.

•   Všechny TAGY jsou ukončené (mají svou koncovou značku).

•   TAGY mohou být zároveň obsahem jiného TAGU (vnořování). Jak jsme např. viděli obsahem tagu <head> je tag <title>. Nebo obsahem tagu <body> je tag <p>.

•   TAGY se nesmí křížit (tj. nesmí docházet k míchání pořadí koncových značek při vnořování) – viz následující ukázka:

  Obr. 2.3: Ukázky tagů; zdroj: (4)

Zápis hlavních TAGŮ www stránek se většinou provádí pro větší přehlednost pod sebe. Jednotlivé TAGY se odsazují tabulátorem od levého okraje tak, aby jejich počáteční a koncová značka měla stejné levé odsazení, a aby tato vzdálenost u jednotlivých TAGŮ rostla s jejich vnořením pod TAGY nadřazené (podobě jako ve stromovém výpisu adresáře). Nicméně není to povinná zásada a je na vás, jak budete zápis provádět. Já doporučuji uvedený způsob – viz Obr. 2.2.

Obr. 2.4: Odsazení tagů; zdroj: (4)

Hlavním (kořenovým) je TAG <html>. Jeho počáteční a koncová značka má nulové odsazení. Tagy <head> a <body> jsou již tagy vnořené a mají tak určité odsazení. Jelikož jsou oba na logicky stejné úrovni (mají téhož rodiče), mají stejnou vzdálenost od levého okraje. Tagy <title> a <p> jsou opět tagy vnořené a mají proto opět o něco větší odsazení. Jelikož oba uvozují pouze krátký text, umístili jsme jejich počáteční a koncovou značku na stejný řádek.

Je opravdu prakticky jedno jak si to vyřešíte – hlavní je, aby se tagy nikdy nekřížily a abyste se v zápisu poté znovu vyznali. V dalších příkladech se ale budeme snažit dodržovat uvedenou kon- venci.

Pamatujte si:

Fyzické rozmístění textu ve zdrojové části www stránky (ve zdrojovém kódu) nemá žádný vliv na její výslednou vizuální podobu v internetovém prohlížeči. Podobu ovlivňují pouze jednotlivé TAGY a pří- slušné styly CSS (o nich později – viz kap. 6).

Čili v internetovém prohlížeči budou úplně stejně zobrazeny následující dva zápisy zdrojového kódu:

<p>Moje <strong>první</strong> www stránka</p> <p>Moje

<strong>první</strong> www stránka</p>

2.2.4 Atributy HTML elementů

HTML elementy mohou ve své definici používat buďto pouze název elementu v ostrých závorkách (viz podkapitoly výše) nebo můžeme použít atributy elementů, které danému elementu určí ještě dodatečné vlastnosti. Těmito vlastnostmi bývá zarovnávání, velikost, barva a mnoho dalších. Syntaxi použití atributů html elementů vidíme na následujícím obrázku.

Obr. 2.5: Syntaxe použití atributů html elementu; Zdroj: (3)

Barvy v HTML stránkách

V html dokumentech můžeme používat barvy pro běžné písmo, nadpisy, pozadí stránky, odstíny bu- něk tabulky a další prvky. Barvy jsou vyjádřeny ve formátu RGB (RedGreenBlue) pomocí hexadeci- málního kódu nebo přímo čísel odstínu od 0 do 255. Při použití hexadecimálního kódu použijeme před číselným vyjádřením barvy znak #.

Obr. 2.6: Příklad nastavení barev; Zdroj: (3)

Přes množství barev (16 777 216 možných barevných odstínů), které nám RGB zobrazení nabízí, musíme být obezřetní a použití barev uvážit. Webová stránka musí být barevně vyvážená, nejsou vhodné ostré a kontrastní barvy. Stránka je především určena uživatelům, kteří v ní hledají užitečné infor- mace, a proto by je barvy neměly rušit či dokonce odradit.

Pro základní barvy nemusíme používat číselný rgb nebo hexadecimální kód. Základní barvy mají svá jména, samozřejmě v anglickém jazyce. Jména těchto barev můžeme používat přímo v atributech html elementů. Na následujícím obrázku vidíme pro základních 16 barev jejich název, odstín i kó- dové označení.

Obr. 2.7: 16 barev, které můžeme použít jmenným označením v HTML dokumentech; Zdroj: (3)

Hlavička HTML dokumentu

Hlavička HTML dokumentu je nezbytnou částí každé stránky. Je uvozena elementy <head></head>.

Mezi těmito elementy se může nacházet pouze několik elementů, přesto jsou některé z nich nepo- stradatelnými a budeme je pravidelně používat. Elementy nacházející se v hlavičce jsou:

<title>, <link>, <base>, <meta>, <style>,<script> a jejich párové ukončení.

Nejznámějším elementem hlavičky je element title definující název stránky. Nepodceňujme tento element, je důležitý pro vyhledávače, které tyto stránky třídí, ale hlavně pro samotného čtenáře webových stránek. S elementem link se setkáme při tvorbě externích souborů s kaskádovými styly. Tímto elementem soubor s kaskádovým stylem přilinkujeme do našeho dokumentu. Neuvádím zde ukázku, protože se CSS stylům budeme věnovat v dalších kapitolách, kde bude probrán rovněž ele- ment style. Důležitým elementem hlavičky je tag meta, který popisuje pomocí svých atributů obsah stránky, klíčové slovo pro vyhledávání autora stránek a znakovou sadu, ve které se bude zobrazovat informační obsah webové stránky. Element skript budeme rovněž probírat v jiné kapitole. Na ob- rázku 2.8 vidíme zdrojový kód hlavičky HTML stránky s příslušnými elementy.

Obr. 2.8: HTML hlavička s elementy <title>,<meta>,<style>,<script>; Zdroj: (3)

Obr. 4.1: Příklad zdrojového kódu pro definici tabulky; zdroj: (2)

Tab. 4.4: Výsledná tabulka z předchozího příkladu; zdroj: (2)

2 Pokud byste rádi vyzkoušeli i další možnosti navštivte: http://www.w3schools.com/html/html_videos.asp

Obr. 5.2: Zdrojový kód z YouTube; zdroj: (4)

5.3 Multimédia v HTML5

HTML5 je stále ještě připravovaným standardem HTML. Klade si poměrně komplexní a užitečné cíle a snaží se situaci kolem tvorby www stránek především zjednodušit, odtrhnout od spousty doplňu- jících technologií a přinést mnohé přelomové a inovativní možnosti.

HTML5 navazuje nejen na HTML4, ale také XHTML3. Je navržen tak, aby obsahoval vše potřebné bez nutnosti dalších pluginů (např. Flash playeru)k tvorbě animací, přehrávání hudby až k vytvoření slo- žitějších aplikací, které běží přímo v prohlížeči v offline režimu. HTML5 je také multiplatformní (je jedno, jestli používáte tablet nebo smartphone, netbook, notebook, Smart TV či PC). Všechny hlavní prohlížeče podporují mnoho nových prvků HTML5 a API.

5.3.1 Multimédia s menší závislostí na zásuvných modulech

Pro video, audio nebo vektorovou grafiku už nepotřebujeme Flash nebo SilverLight. Pro audio se používávelmijednoduchýTAG<audio>.Vzávislostinatypuinternetového prohlížeče,lzepřehrávat formáty zvuku mp3, wav a ogg.

Obr. 5.3: Tag audio v HTML5; zdroj: (4)

V případě videa je nový TAG <video>. V závislosti na typu internetového prohlížeče, lze přehrávat formáty zvuku mp4 a ogg.

Obr. 5.4: Tag video v HTML5; zdroj: (4)

5.3.2 Element CANVAS

HTML5 element <canvas> se používá ke kreslení grafiky za běhu, pomocí skriptování (obvykle JavaScript). Element <canvas> je jen kontejner pro grafiku. Musíme použít skript, který grafiku vy- kreslí. Existuje několik metod pro kreslení cest (čar), kvádrů, kruhů, textu a přidávání obrázků.

Obr. 5.5: Element canvas v HTML5; zdroj: (4)

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>

  65 ZNAČKY HTML KÓDU PRO PRÁCI S FORMULÁŘI

  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,

  67

  ZNAČKY HTML KÓDU PRO PRÁCI S FORMULÁŘI

  •   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)

Jak jsme již řekli, odkazy jsou v podstatě nejdůležitější částí webových stránek. Povinným atributem je zde cíl odkazu, který je zadán URL adresou. Může se jednat o stránku ve stejném adresáři webové aplikace, nebo o vzdálený link odkazující se na adresu jiného serveru. Důležitým atributem je target, který určí, zda se odkazující link otevře do nového resp. stejného okna prohlížeče.

Obr. 10.2: Zdrojový kód pro odkazy; zdroj: (4)

Obr. 10.3. Zobrazení obou odkazů z Obr. 10.2; zdroj: (4)

Pohledem na atributy elementu ) <a> (Tab. 10.1) vidíme atribut name sloužící po pojmenování ně- jakého úseku stránky, kterému říkáme záložka. Pokud tedy použijeme tento mechanismus, můžeme použít element <a> i pro odkazy uvnitř jedné stránky. Tento mechanismus je oblíben u online ma- nuálů, které v horní části stránky uvedou obsah s relativními odkazy na kapitoly, které jsou psány zhora dolů za sebou a link na záložky pomocí atributu name tak umožní snadný pohyb uvnitř roz- sáhlého textu.

Tab. 10.1: Atributy elementu <a>; zdroj: (4

Jiným typem odkazů jsou záložky. Takový odkaz vám otevře vybranou stránku na vybraném místě, třeba uprostřed (odroluje na vybrané místo). Záložky se vytvářejí atributem name u tagu <a>.

Nějaký text <a name="zalozka" /> Pokračování stránky

Záložky není nijak vidět, ale můžeme se na ní přesunout odkazem, tak aby text následující po záložce byl na prvním řádku prohlížeče.

<a href="soubor.html#zalozka">Na záložku</a>

Tento odkaz otevře stránku soubor.html. Všimněte si nové věci v URL #zalozka, tímto způsobem se zadává jméno záložky. S použitím záložek může vzniknout problém, pokud se nacházejí u spodního okraje stránky. Prohlížeč je v takovém případě nemůže zobrazit na prvním řádku, ale až dále, pouze doroluje dokument až na konec.

Speciálním odkazem je odkaz na e-mail, který umožňuje otevřít e-mailového klienta (MS Outlook).

URL tohoto odkazu se skládá ze speciálního protokolu mailto: za kterým následuje e-mailová adresa. Po kliknutí by se mělo otevřít okno Vašeho e-mailového klienta s novou zprávou a vyplněnou polož- kou adresát. Tento odkaz nefunguje vždy, ne každý má poštovního klienta, proto je dobré napsat do textu odkazu samotný e-mail (5).

10.1.1 Formátování odkazů

Asi mi dáte za pravdu, že modro-fialové odkazy se nebudou vyjímat na každém webu. Proto existuje možnost změnit styl odkazů pomocí CSS. Styl odkazů lze nastavit pomocí pseudoelementů v exter- ním souboru nebo uvnitř elementu style.

Příklad:

a {font-size: 15px}
a:link {color: black}
a:hover {background-color: gray} a:visited {color: red}
a:active {color: blue}

První řádek nastavuje velikost písma odkazů. Na dalších řádcích se setkáváme s pseudoelementy.

Příklad:

   

a:link nastavuje styl nenavštívených odkazů, a:hover - styl odkazů po najetí myši,

a:visited - navštívené odkazy, a:active - aktivní odkazy (5).