Tvorba webu – Narsil 42

Po pěti dílech našeho seriálu o jazyce html a vytváření www stránek pokračujeme tento rok dalším, navazujícím seriálem s názvem "Tvorba moderního webu". Vytvářet statické stránky pomocí html byste nyní již měli umět, proto se můžeme pustit do toho, co dělá dnešní web dynamickým. Nejprve to budou kaskádové styly a poté základy JavaScriptu. Nutno ovšem podotknout, že nyní již s browsery existujícími na Atari nevystačíte - nepodporují totiž zatím ani kaskádové styly, ani JavaScript. Výjimkou by mohl být Light of Adamas, nevím však přesně jak se to s ním v tomto ohledu má. Proto to, o čem bude v tomto seriálu řeč, se bude týkat hlavně MSIE verze 5.0 a vyšších (či Netscape verze 4 a vyšší). Je to velká škoda, ale třeba se ještě nejakého překvapení (v dobrém slova smyslu) na Atari dočkáme.

K A S K Á D O V É S T Y L Y

Kaskádové styly, anglicky Cascade Style Sheets (css) nabízí rozsáhlejší formátovací možnosti než samotný html, a to nejen co se textu týče. Odpadá zde neustále nové formátování textu pomocí standardních značek html, text se tak stává přehlednějším a kratším. Definice stylů se umisťuje buď do hlavičky html dokumentu, nebo se vytvoří ve vlastním ASCII souboru s koncovkou .css a v html dokumentu se pak na tento soubor stylů pouze odkazuje. Kaskádové se styly nazývají proto, že více stylů může ovlivňovat jediný text. Nenastává zde chyba vyplývající z konfliktu dvou vlastností, které mají být ovlivněny dvěma různými styly, protože každý styl má vždy jinou prioritu. U konfliktních stylů má např. přednost ta definice, která byla uvedena jako poslední.

Definice stylu se tedy umisťuje do hlavičky html dokumentu, nebo do vlastního souboru. Ať tak či onak, je vždy umístěna v poznámce a je uzavřena do složených závorek; to je podobné JavaScriptu. Obecná syntaxe definice stylů je následující:

<!--

.názevstylu1 {parametr: hodnota;

parametr1: hodnota1;

parametr2: hodnota2;}

.názevstylu2 {parametr: hodnota;

parametr1: hodnota;

parametr2: hodnota2;}

-->

</STYLE>

Definice stylu je tedy uvnitř uzavřené značky STYLE s parametrem TYPE="text/css". Pak následuje značka pro komentář a poté již vlastní nadefinování stylů. Pokud budete vytvářet styl nový, vždy musí začínat tečkou, jak je tomu i výše. Pokud budete jen měnit nějaký již existující styl, pak musí být jeho název vždy bez tečky. Parametry stylu jsou uvedeny ve složených závorkách a každý má dvě části: název parametru a jeho hodnotu. Středník na konci je povinný. ŕetězcové hodnoty není nutné ukládat do uvozovek, mezi jednotlými parametry ani nemusejí být volné řádky, vše je vždy odděleno středníky.

Styly však mohou být v některých případech definovány přímo v textu, v těle dokumentu. Pak již nejde o předdefinování stylů, ale přímo o definici stylu na místě, kde bude použit. Příklad je zde:

<BODY>

<P STYLE="font-size: 12pt; font-family: Arial; font-style: bold; text-align: center; color: red; background: grey"> Zde následuje samotný text, který bude naformátován udaným stylem.

</P>

</BODY>

Ovšem s tímto druhem přiřazování jsem se příliš často nesetkal, spíše se používá předdefinování stylů v hlavičce dokumentu nebo vlastním css souboru. Pokud chcete využívat druhou možnost, musíte vytvořit nový ASCII soubor s koncovkou .css a nadefinovat v něm jednotlivé styly (podle obecné syntaxe). Ve vlastním html dokumentu, kde budete chtít tyto styly použít, pak musíte do hlavičky uvést:

Je to výhodné zvláště tehdy, máte-li více html souborů a používáte-li v nich několik stejných stylů. Abyste je nemuseli definovat v každém html souboru zvlášť, vytvoříte je pouze jednou jako samostatný soubor a jednotlivým html dokumentům pak jenom příkazem výše řeknete, který soubor .css mají použít a kde ho najdou (URL).

Nyní ještě jak se jednotlivé předdefinované styly přiřazují. Pro přiřazení stylů slouží parametr CLASS, který může být parametrem různých příkazů. Zřejmě základním příkazem je uzavřený příkaz SPAN:

Tento příkaz (SPAN) slouží pouze k přiřazení stylu, sám o sobě daný text nijak neformátuje (na rozdíl od dalších příkazů).

Dále lze použít příkaz pro odstavec <P>:

nebo

Tyto značky již text sám o sobě formátují, jedná se o odstavec.

Toto provedete zejména tehdy, bude-li se jednat o nový styl (neplatí vždy v případě značky pro odstavec). Pokud jenom předefinujete styl již existující, může to vypadat jinak. Například předefinujeme styl <H3> jenž slouží jako nadpis:

<!--

H3 {font-family: Life;

font-size: 16pt;

font-weight: italic;

color: green;}

-->

</STYLE>

Všimněte si, že je H3 bez tečky, neboť to není nový styl, ale upravujeme již existující. Nyní kdykoliv bude někde v textu použit příkaz

bude tento text vždy 16 bodů velký, psaný fontem Life, kurzíva a zelený. Původní příkaz nadpisu H3 byl předefinován.

Již existující styl však lze i přebít stylem jiným, nebývá to však příliš časté. Mějme původní, nijak neupravovaný styl <H2>. Zároveň předpokládejme, že jsme v hlavičce nadefinovali styl s názvem "kuk", jenž bude psán tučně o velikosti 26 bodů a bude červený. Nyní jej můžeme použít i v příkazu H2, tím však přebijeme jeho nastavení:

Na text uvnitř příkazu nebude použit standardní styl H2, alébrž předdefinovaný styl "kuk".

Nejčastěji se ovšem pro přiřazování stylů používají uzavřené příkazy <SPAN> a <P>.

Pokud chcete v definici stylů uvádět komentář, musí mít následující syntaxi:

/* komentář */

Písmo a jeho vlastnosti

Nyní se blíže podíváme na parametry a hodnoty definující formát písma. Mezi základní vlastnosti písma patří: font (znaková sada), řez (typ) a velikost.

1. Font

Font písma se definuje parametrem

font-family: písmo;

Za dvojtečku se umístí seznam písem, která má prohlížeč použít. Prohlížeč prochází tento seznam od začátku ke konci, bere jedno písmo po druhém a zjišťuje, zda je v daném počítači k dispozici. Pokud ano, zastaví další hledání a nastaví písmo; pokud ne, hledá dál. Lze zadat jak obecnější název (např. Arial, Life), tak i přímo konkrétní písmo (např. Times New Roman).

Dále však existuje ještě tzv. "generický" druh písma, jenž označuje širší rodinu písem. Generických písem je definováno celkem 5 a pokrývají prakticky téměř celou oblast možných konkrétních písem:

serif - standardní patkové písmo

sans-serif - standardní bezpatkové písmo

cursive - kurzíva

fantasy - celkem libovolné ornamentální písmo

monospace - neproporcionální písmo.

Příklad:

font-family: Arial, Life, Times New Roman, monospace;

2. ŕez (typ) písma

Pro řez písma mají kaskádové styly určeny dva parametry. Pro kurzívu

font-style: řez;

a pro tučnost písma pak

font-weight: řez;

Font-style může nabývat těchto hodnot:

- normal - klasické stojaté písmo (default)

- italic - klasická kurzíva (vytvořená autorem písma)

- oblique - umělé sklonění písma (není totéž co kurzíva). Nejedná se o jiné písmo, aktuální písmo se pouze uměle skloní. Většinou má však stejný efekt jako hodnota "italic".

Pro font-weight jsou k dispozici následující hodnoty:

- normal

- bold - tučné písmo (od autora písma)

- bolder - tučnější řez písma; u některých písem ovšem není k dispozici a pak má stejný účinek jako "bold"

- lighter - jako "bolder", ale tenčí písmo než normální.

Ve valné většině případů však vystačíte s hodnotami "normal", "bold" a "italic".

Malý příklad:

<P STYLE="font-style: italic"> kurzíva </P>

<P STYLE="font-weight: bold"> tučné písmo </P>

3. Velikost písma

Zatímco v html se velikost písma definovala sedmi různými velikostmi, ve stylech se nejčastěji používá určování velikosti v bodech (pt) a pixelech (px), ačkoliv klasické html definování velikostí lze také použít.

Velikost písma se určuje touto obecnou syntaxí:

font-size: velikost;

Velikost pak lze definovat několika způsoby: relativně, absolutně, v typografických jednotkách a procentuálně.

Absolutní velikost určuje velikost jako v html, tzn. od 1 do 7. Jednotlivé hodnoty jsou zde: xx-small, x-small, small, medium, large, x-large, xx-large. Hodnota x-small tedy odpovídá html velikosti 2 atp.

Relativní velikost se používá je-li styl odvozen od nějakého již existujícího stylu, čilipokud měníte např. styl H3, můžete mu nastavit velikost věttší nebo menší než aktuální. Hodnoty jsou larger a smaller.

Velikost se zadanými jednotkami udává výšku písma v jednotkách.

Procentuální velikost určuje zvětšní nebo zmenšení oproti základní velikosti v procentech.

Hodnota definující velikost se skládá ze znaménka (+ se uvádět nemusí a také se neuvádí), za nímž ihned (bez mezer) následuje vlastní číslo a za ním opět ihned označení jednotky. Jednotky jsou zásadně dvoupísmenné zkratky a jsou buď relativní (vzhledem k objektu, z něhož vycházejí), nebo absolutní:

px - výška zadaná v pixelech

in - palce (1" = 2,54 cm)

cm - centimetry

mm - milimetry

pt - typografické body (1pt = 1/72 palce)

pc - picas, 1pc = 12pt

Pár příkladů:

P {font-size: 140%;}

H4 {font-size: larger;}

CODE {font-size: 17px;}

Barvy textu a pozadí

Styly umožňují i lepší správu barev. Neomezují se pouze na definici barvy textu, ale lze jimi nezávisle nastavit i pozadí textu. Navíc lze na pozadí textu umístit i obrázek.

1. Barva textu

Barva textu se nastavuje parametrem

color: barva;

Barva se definuje standardním způsobem, buď jménem základní barvy nebo v RGB hodnotě:

color: red;

color: rgb(50, 200, 0);

color: rgb(100%, 0%, 50%);

Jak vidíte, můžete nastavit prakticky libovolnou barvu. V případě RGB (Red-Green-Blue) se na rozdíl od html barvy nezadávají hexadecimálně, ale normálně v rozmezí čísel 0 - 255 pro každou barvu. Lze též jednotlivé složky zadávat procentuálně (0% - 100%).

2. Barva pozadí textu

Textu lze nadefinovat i barvu pozadí. Jedná se vlastně o barvu jakéhosi rámečku kolem textu. Barva pozadí se definuje parametrem

background-color: barva;

Barva se zadává stejně jako u textu, navíc lze však zadat i průhledné pozadí, a to hodnotou

transparent.

Na pozadí textu je možné umístit i obrázek. K tomu slouží parametr

background-image: url;

Hodnota URL je klasické cesta k obrázku vč. celého názvu obrázku. Pro práci s obrázkem na pozadí mají styly ještě několik parametrů, ale jejich ladění není úměrné výsledku. Moc se nepoužívá.

Tolik první část našeho nového seriálu. Příště dokončíme styly a zřejmě se již vrhneme i na úvod k JavaScriptu.

Neznámý vojín