Týden 2
4.1 Tabulky
Tabulky jsou velmi důležitou součástí webového obsahu. Jsou obsaženy prakticky ve všech portálech a e-shopech, některé z nich jsou viditelné, jiné zase plní roli rozmístění dat na stránce a o jejich exis- tenci na první pohled nevíme. Proto tabulky obsahují celou řadu různých atributů zobrazování, které vidíme přehledně v tabulkách této kapitoly.
Tab. 4.1: Elementy pro zobrazování tabulek; zdroj: Internet a sítě
Tab. 4.2: Atributy elementu <table>
37 ZNAČKY HTML KÓDU PRO PRÁCI S TABULKAMI Tab. 4.3: Atributy elementu <td>
Značka pro tvorbu tabulky <table>...</table> může být doplněna atributy align (umístění tabulky na stránce) a border (šířka čáry ohraničení tabulky – pokud se nezadá, je standardně nula). Parametr width určuje šířku tabulky, height určuje výšku tabulky (oba parametry lze zadat v pixelech či % šířky stránky).
Značku tabulky doplňují další dvě značky – značka pro vytvoření řádku <tr>...</tr> a značka pro vy- tvoření buňky v řádku <td>...</td>. Obě značky mají parametry width či height (šířka řádku či buňky v pixelech nebo % šířky tabulky) a align (způsob zarovnávání textu v buňkách na daném řádku nebo jen v dané buňce – center, right, left).
WEBOVÉ TECHNOLOGIE
38
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)
5.1 Obrázky
Obrázky jsou nezbytnou součástí každé webové stránky. Pro vložení obrázku používáme nepárový element <img>. Tento element nelze použít bez atributů, neboť povinným atributem je cesta k ob- rázku. Pokud bude obrázek přímo ve stejném adresáři jako zdrojová html stránka, cesta bude obsa- hovat pouze název obrázku, jako je tomu na Obr. 5.1. Protože obrázků obsahuje většina webových sídel mnoho, doporučuje se na webovém serveru vytvořit adresář např. images a na něj se odkazo- vat v atributu src elementu <img>.
Tab. 5.1: Atributy elementu <img>; zdroj: (3)
V současné době popularity CSS stylů se doporučují atributy width, height a border nahradit stejnoj- mennými vlastnostmi CSS stylu, místo atributů vspace a hspace se doporučuje použít CSS vlastnost margin a zarovnání align je vhodné nahradit CSS vlastností float popřípadě vertical-align.
Obr. 5.1: Zdrojový kód pro zobrazení obrázku; zdroj: (3)
V jazyce XHTML má tag podobu <img />, protože je nepárový, tj. jeho koncová značka se nezapisuje, ale nahrazuje se lomítkem na konci.
<img src=“obrazky/kvetina.jpg“ alt=“Květina“ />
Tag <img /> umožňuje vložit do www stránky obrázek. Do nejdůležitějšího atributu – scr se pomocí rovnítka a uvozovek zapisuje cesta ke zdrojovému obrázku, který se na www stránce zobrazí. Pomocí relativní cesty zapíšeme pouze adresu obrázku (viz Obr. 5.1), pokud se odkazujeme na abslutní umís- tění obrázku, bude cesta vypadat např. takto:
43 ZNAČKY HTML KÓDU PRO PRÁCI S OBJEKTY C:\Documents\admin\Plocha\www\obrazky\kveti na.jpg
Pozor, jak vidíte, je potřeba zapisovat cestu k obrázku i s danou příponou. Na webu se nejčastěji používají obrázky ve formátu JPEG, GIF nebo PNG.
Rovněž si dávejte pozor na zápis přípony souboru – na webovém serveru NENÍ totéž kvetina.jpg a kvetina.JPG.
5.2 Multimediální objekty
Přehrávání videa a zvuku představuje v XHTML 1.0 docela problém. Závisí na tom, jaké soubory chcete přehrávat, jakou metodu (tagy HTML) pro to použít a zdali má uživatel k dispozici ten či onen internetový prohlížeč a k tomu ještě nainstalován správný plugin.2 Tyto problémy se snaží řešit verze jazyka HTML5 a XHTML5.
Zatím se pro „téměř“ spolehlivou projekci videa požívá přehrávač Adobe Flash. Jednodušší však je využít služby třetí strany. Pro účely prezentace videa na vlastních www stránkách je dobré využít například serveru YouTube.
Vybereme video nebo jej přímo uploadujeme na server YouTube. Poté stačí okopírovat poskytnutý kód a vložit do zdrojového kódu naší www stránky. Praktickou ukázku najdete na Obr. 5.2.
2 Pokud byste rádi vyzkoušeli i další možnosti navštivte: http://www.w3schools.com/html/html_videos.asp
WEBOVÉ TECHNOLOGIE
44
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.
45 ZNAČKY HTML KÓDU PRO PRÁCI S OBJEKTY
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)
6.1 CSS
Značkovací jazyk (X)HTML vytvoří doslova „kostru“ webových stránek. Jejich výslednou podobu (pakliže se nespokojíme pouze s klasickým bílým pozadím, černým textem atd.) jim ale dají tzv. kas- kádové styly CSS. Zkratka CSS znamená Cascading Style Sheets, neboli doslovně šablony kaskádo- vých stylů. Ve zkratce říkáme pouze kaskádové styly. Tyto styly dokáží pokročile formátovat ele- menty jazyka HTML.
Kaskádové styly (CSS) jsou jazykem pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. Jednoduše řečeno, CSS nám umožňuje naformátovat základní šablonu napsanou (v našem případě) v jazyce XHTML do graficky efektivnější podoby. V podstatě tak mů- žeme říci, že díky CSS jsme schopni na webových stránkách pracovat efektivně s grafikou.
6.1.1 Důvody pro použití kaskádových stylů
I když bychom důvodů pro použití CSS stylů našli mnoho, jejich společným sjednocením by nakonec
zůstali tyto tři hlavní důvody:
Použití CSS stylů ušetří čas.
Stránky, které používají CSS styly mají jednotný vzhled.
Vzniká nám přehledný a dobře citovatelný zdrojový kód.
První důvod oceníme jak při tvorbě jedné či několika stránek, tak i při tvorbě složitějšího webového portálu. Jistě se atributy HTML elementů opakují a samozřejmě z druhého uvedeného důvodu jsou často totožné. Proto je výhodnější vlastnosti elementů nadefinovat jednou hromadně a pak se na toto formátování odkazovat. Dokážeme si jistě představit tu dlouhou práci při editaci stránek, pokud bychom chtěli drobně upravit jejich vzhled. Editace atributů stovek elementů by mohla zabrat tolik času jako samotný návrh nového webu. Při změně barev, formátování, velikosti a dalších atributů nám tedy stačí editovat pouze styl, který se aplikuje na jednotlivé elementy ve všech stránkách apli- kace. Stránky, které jsou součástí jednoho webového sídla, musí mít vzhled jednotný a za použití CSS stylů máme také přehledný zdrojový kód, který můžeme v případě nutnosti lépe editovat.
6.1.2 Tři způsoby zápisu CSS
Existují 3 způsoby, jak vložit do dokumentu XHTML styly CSS. První dva způsoby umožňují zápis přímo do dokumentu XHTML (nepraktické, nepřehledné a neefektivní), třetím se v dokumentu
49 KASKÁDOVÉ STYLY XHTML pouze odkazujeme na externí soubor (ideální, protože tím oddělíme obsah – html dokument
od formátování – soubor se styly CSS).
1. Přímý inline zápis stylu pomocí atributu style (styly jsou přímou součástí počátečních značek jed- notlivých HTML tagů – jak vidíte níže, dochází tak k nežádoucímu míchání obsahu a jeho formáto- vání):
Ukázka:
<p style="color: red; text-decoration:underline">Tento odstavec bude červený a podtržený.</p>
2. Zápis stylů do elementu style (styly jsou opět přímou součástí html dokumentu, zapisují se jako přímá součást hlavičky www stránky):
Ukázka:
<style type="text/css"> p{
color: red;
text-decoration: underline; }
</style>
3. Připojení externího souboru pomocí tagu <link />.
Třetí způsob je pro své nesporné výhody nejvyužívanější. Uvedeme ty nejzásadnější plusy:
Oddělení obsahu dokumentu od jeho formátování.
Možnost využít jeden soubor CSS pro více dokumentů (odpadá duplicita CSS stylů, není potřeba styly na každé stránce zapisovat znovu).
Přehlednější zápis pro vývojáře.
Rychlejší zobrazení v internetovém prohlížeči (soubor je po dobu brouzdání po stránkách
uložen v operační paměti klienta).
Dále proto budeme styly CSS umisťovat vždy do externího souboru (přípona .css).Poznámka: Všimněte si rozdílu pro označení komentářů v dokumentu HTML (<!—text komentáře - ->), kdežto v CSS (/* text komentáře */).
WEBOVÉ TECHNOLOGIE 50
6.2 CSS – syntaxe
Jazyk CSS sestává z tzv. pravidel. Každé pravidlo obsahuje selektor a blok deklarací. Každý blok de- klarací pak obsahuje seznam deklarací a každá deklarace sestává z vlastnosti, následuje dvojtečka: a hodnota vlastnosti. Každá deklarace končí středníkem;
Obr. 6.1: Příklad pravidla CSS; zdroj: (4)
Celý výše uvedený blok je pravidlo, „body“ je selektor, v závorkách blok deklarací. Řádek „ba- ckground-color: white;“ je deklarace samotná, „background-color“ je vlastnost a „white“ je hod- nota této vlastnosti.
Celý kód v uvedeném příkladu je vztažen k elementu těla www stránky <body>, což znamená, že vlastnosti tohoto pravidla ovlivní vzhled celé www stránky.
nastavuje barvu pozadí stránky na bílou (background-color: white;),
barvu veškerého textu na černou (color: black;)
a vnější okraje celé stránky na hodnotu 10 pixelů (margin: 10px;).
6.2.1 Selektory
CSS definuje mnoho různých selektorů, které obvykle můžeme kombinovat. Základní selektory mají
stejný název jako příslušné HTML TAGY (např. body, h1, p, atd). Uveďme:
body – deklarace pro selektor body se vztahují na formátování celého těla www stránky.
body p – tyto deklarace budou platit pro všechny elementy p (resp. odstavce), které se nachází v elementu body (uvnitř těla www stránky), v jakékoliv hloubce.
.trida – tyto deklarace budou platit pro všechny elementy, které mají v HTML nastavenou třídu trida. Selektor třídy se používá jako atribut class html elementu a před definicí stylu jeho název předchází tečka. Selektor class ohraničuje své vlastnosti a hodnoty ve složených závorkách.
Třída se nastavuje pomocí HTML atributu class. V dokumentu HTML se pak odkážeme například takto:
51
KASKÁDOVÉ STYLY
<p class=“trida“>Nastylovaný odstavec</p>
Obr. 6.2: Použití selektoru class pro definici více elementů za použití kaskádového stylu; zdroj: (3)
#main – tyto deklarace budou platit pro definici nějakého stylu s více vlastnostmi, který budeme aplikovat na určitý typ elementu. Tento styl je vhodné pojmenovat, neboli přiřadit jednoznačný identifikátor tzv. id, na které se pak budeme odkazovat. Id tak bude atributem html elementu.
Obr. 6.3.: Použití selektoru id kaskádového stylu; zdroj: (3) V dokumentu HTML se pak odkážeme například takto:
<h2 id=“main“>Hlavní nadpis</h2>
Třídy a Identifikátory byly původně zavedeny pro to, aby bylo možné vytvářet více verzí stylů pro jednotlivé elementy. Jinak bude graficky formátován obyčejný odstavec <p> a jinak může vypadat odstavec s třídou – např. <p class=“trida“></p>.
WEBOVÉ TECHNOLOGIE 52
Na webu3 W3Schools si můžete vyzkoušet, jak se pracuje se styly CSS a rovnou si prohlížet výsledky změn které provádíte. Ve zkoušečce je využit druhý způsob vložení stylu do dokumentu, ovšem to nám jistě nebrání v testování:
Obr. 6.4.: CSS Zkoušečka; zdroj: (4)