Další Narsil rovná se již dá se říci tradičně další díl obsáhlého seriálu o tvorbě www stránek. Dnes je na řadě druhá část Tvorby moderního webu.
K A S K Á D O V É S T Y L Y
Formátování textu
Styly nabízejí poměrně slušné možnosti, které standardní html nezná. Můžete si např. nastavit mezery mezi písmeny, mezery mezi slovy, řádkování, zarovnání textu atd.
1. Mezery mezi slovy a písmeny
Mezi slovy i mezi písmeny lze nastavit vlastní velikost mezer. Znamená to, že tak můžete libovolný text zhušťovat nebo naopak roztahovat od sebe.
Mezery mezi písmeny se nastavují parametrem letter-spacing:
letter-spacing: velikost_mezery;
Velikost mezery se nastavuje v jednotkách již zmíněných v prvním díle (px, mm, pt), většinou se však zadává v tzv. čtverčíku, tedy šířky písmena "m":
letter-spacing: 2.3m;
Implicitně je definována standardní velikost mezer "normal".
Současně s mezerami mezi písmeny se automaticky zvětšují i mezery mezi slovy (mezera jako taková je přeci také znak). Dokonce lze zadat i záporné hodnoty, čímž text doslova sevřete k sobě, což je dobře použitelné např. u nadpisů.
Př.: <h2 style="letter-spacing: -1pt">Sevřený nadpis</h2>
Takto lze např. nadefinovat nadpis o standardní velikosti H2, ovšem s menšími mezerami mezi písmeny i slovy. Zde se jednotka "m" příliš nehodí, proto byly použity typografické body "pt".
2. ŕádkování
Mezery lze nastavit i mezi jednotlivými řádky, jinými slovy si můžeme nastavit libovolné řádkování. Tuto mezeru má na starosti parametr:
line-height: výška;
Mezera mezi řádky je vlastně výška řádku, tedy např. pokud je mezera 10 a výška písma 60, je výška řádku 70. Jako hodnota tohoto parametru se tedy udává výška celého řádku, nikoliv samotná mezera mezi řádky.
Tato výška řádku se zadává buď relativně, jako odchylka od standardní výšky (ta bývá 110 - 120% výšky písma), nebo absolutně. Relativní zadání se provádí buď násobkem, např. "1.5", nebo procentem (150%). Obojí dá stejný výsledek. Absolutní zadání je totožné s jakýmkoliv jiným udáváním délky, resp. výšky (např. tedy pt, px, mm atd.); častěji se však používá relativní nastavení, zejména kvůli různé velikosti písem.
Zadáním
line-height: 150%;
zvětšíte výšku řádky o 50%. Další příklad:
<p style="line-height: 150%>Narsil je prostě jednička mezi časopisy u nás a tím že jste si jej zakoupili, jsem rád že mne někdo může číst.</p>
Takovýto odstavec bude mít o 50% větší mezery mezi řádky než běžný text.
Ještě dodatek: pokud zadáte barevné pozadí, automaticky se přizpůsobí velikosti řádkování:
<p style="line-height: 150%; background-color: yellow">
3. Parametry pro efekty písma
Pomocí stylů můžeme nadefinovat i další řezy písma, jako např. podtržení či přeškrtnutí. Definují se následovně:
text-decoration: řez;
Atributy lze použít následující:
- underline - podtrhne text,
- overline - nadrthne text, tedy udělá nad ním čáru
- line-through - přeškrtne text
- none - zruší všechny řezy
Můžeme však nastavit i používání kapitálek, verzálek a minusek, což jsou velká a malá písmena. Parametr je zde:
text-transform: nastavení_písma;
Atributy jsou zde tyto:
- capitalize - převede text na kapitálky (druh velkých písmen)
- uppercase - převede text na verzálky (velká písmena)
- lowercase - převede text na minusky (malá písmena)
- none - ruší všechny efekty.
A jako další tu máme zarovnání textu. Stejně jako standardní html, i kaskádové styly umožňují nastavit zarovnání textu. Dokonce i parametr je podobný:
text-align: zarovnání;
Zarovnání může nabývat následujících hodnot:
- left - right - center - justify - zarovnání do bloku; ostatní snad není třeba vysvětlovat.
Sem ještě můžeme zařadit možnost odsazení textu od levého okraje. K tomu slouží parametr
text-indent: vzdálenost;
Toto odsazení platí vždy pro první řádek, proto je vhodné a možná i určené pro tvorbu odstavců. Vzdálennost se udává opět klasicky v některých již známých jednotkách (body, palce, centimetry, ...).
Vlastnosti stylů
Styly oplývají několika důležitými vlastnosti, z nichž zde ty nejdůležitější, které je třeba znát, zmíníme.
1. Seskupování stylů
Seskupování definicí stylů je vlastnost, která umožní jedinou definicí parametru přiřadit více stylům naráz. Pro nejlepší pochopení je zde příklad:
Styl1, Styl2, Styl3 {font-family: Life; font-size: 18pt;}
Styly s názvem Styl1, Styl2 a Styl3 budou (kromě jiného, mají-li určené nějaké další vlastnosti) psány písmem Life o velikosti 18 bodů. Lze tím např. ušetřit práci a místo při definování stejných vlastností různých stylů.
2. Dědičnost stylů
Dědičnost definicí vyplývá již z dědičnosti platné v html. Vytvořený styl si zachovává veškeré formátovací vlastnosti stylu, do něhož je vnořen - přidává pouze to, čím se od něj odlišuje nebo co definice nadřazeného stylu neobsahuje.
Čili máte-li definován (nadřazený) styl, který určuje že písmo bude 16 bodů veliké a tučné, a vložíte do textu který je takto definován jiný styl, který texto naformátuje s většími mezerami mezi slovy, bude tato část textu obsahovat tučné písmo o velikosti 16 bodů, které bude mít mezi slovy větší mezeru, zbytek textu bude pouze tučný o velikosti písma 16 bodů. Nebo:
<p style="font-size: 16pt">Toto je ukázka <b><i>vnořeného</i></b> stylu</p>
Veškerý text bude obsahovat písmo o velikosti 16 bodů, pouze na určeném místě bude slovo "vnořeného" psáno kromě toho ještě tučnou kurzívou.
3. Priorita stylů
Styly mají i svoje priority, tzn. že použijete-li na jeden text více stylů, z nichž každý např. definuje jinou velikost, je předem určeno, jakou výslednou velikost bude text mít. Priority příkazů jsou stejné jakov html - BODY je např. nadřazený všem prvkům, které obsahuje. Pokud byste ve stylech tento příkaz předefinovali, změní se podle toho i všechny prvky patřící do sekce body (pokud nejsou přímo na místě implicitně definovány jinak).
BODY {color: blue;}
způsobí, že všechen text ve stránce bude modrý, ovšem s výjimkou těch případů, kdy bude příkazy zdrojového kódu (font color="green" atp.) uvedena barva jiná. Stejně tak platí, že předefinováním stylu odstavce:
P {line-height: 120%;}
budou všechny odstavce formátované příkazem P mít nastavenou výšku řádku na 120% standardní hodnoty (nebude-li jim přímo na místě nadefinována velikost jiná). Stejně to platí i pro styly, které by z příkazu P vycházely.
4. Změna vlastnosti stylu
Kaskádové styly umožňují dokonce stylům mít své vlastní jakoby "podstyly", kdy jeden styl může mít pro každou událost jinak definovaný formát. Velmi dobrým příkladem je příkaz definující odkaz - <A>. Mějme definován styl pro aktivní odkaz, navštívený odkaz a odkaz nad kterým je právě kurzor. Změnou vlastností těchto "podstylů" lze docílit zajímavých efektů.
Chtějme např., aby normální odkaz nebyl podtržený, ale byl vypsán modře, tučným písmem Life o velikosti 14 bodů. Pak toho lze dosáhnout touto definicí stylu:
a:link {font-family: Life;
font-size: 14pt;
color: blue;
text-decoration: none;}
A je to. Stejně tak lze předefinovat i navštívený odkaz či odkaz nad kterým je právě kurzor (a:visited, a:active).
A ještě malou perličku. Pokud chcete, aby styl změnil barvu či velikost písma když jej přejedete myší (pro již znalé, jde o událost onmouseover), zkuste zadat:
a:hover {color: yellow;
font-size: 16pt;}
Takový odkaz bude mít v době kdy nad ním bude myš velikost místo 14 bodů 16 a nebude modrý, ale žlutý. Zázrak.
Tolik ode mne ke stylům. Technika kaskádových stylů je samozřejmě daleko bohatší a dá se s ní dosáhnout skutečně zajímavých efektů, k tomu je ale třeba pochopit a zvládnout vše, co bylo prezentováno zde. Nyní bystě měli mít určité základy, na kterých bude možné stavět. Jako přílohu k tomuto článku najdete na disketě seznam všech použitelných CSS stylů i s atributy a popisem ve formě html souboru. Jedná se o mírně upravenou tabulku z www.interval.cz, kam vás zároveň odkazuji jako na velmi vhodný zdroj dalších informací. K dispozici jsou samozřejmě i tištěné publikace.
ÚVOD DO JAVA SCRIPTU
JavaScript je programovací jazyk určený pro použití v html textu, resp. na www stránkách. Ve své podstatě se trochu podobá jazyku C, ovšem má svá specifika, která vyplývají právě z jeho určení pro web. Kdo má již nějaké znalosti s programováním, zejména pak v Céčku, bude mít jistou výhodu, ale ani ti, kteří zkušenosti zatím nemají, nemusí věšet hlavu. JavaScript je přeci jenom jednodušší než Céčko a již s určitým základem můžete své stránky velmi dobře vyšperkovat.
Je třeba se však zmínit o tom, že interpretace JavaScriptu není 100% shodná na prohlížečích MSIE a Netscape. Autorem JavaScriptu je Netscape, který měl za vzor Javu (programovací jazyk). Až o něco později přišel MSIE se svou interpretací JavaScriptu. Objevuje se tak zde stejný problém jako u html - každý prohlížeč zobrazí určité příkazy poněkud odlišně. U JavaScriptu to není tak markantní a časté jako u html, nicméně je dobré připomenout, že i s tímto faktem se můžete setkat. Zde prezentované informace by měly být společné, i když se vtztahují zejména na MSIE.
Zároveň všechny odkazuji na stránky plné informací, tipů. ukázek a článků na internetovém portálu www.interval.cz, do sekce Tvorba www. Zde najdete velké množství příkladů a článků.
Tak a nyní nejprve něco na úvod jak se to se skripty v html má.
Celý program napsaný v nějakém scriptu musí být ve zdrojovém kódu umístěn do uzavřeného příkazu
<SCRIPT> ... </SCRIPT>
Parametrem tohoto příkazu je druh používaného jazyka, tedy buď JavaScript, který je častější, nebo VBScript, který se již tolik nepoužívá. V praxi to vypadá takto:
<script language="JavaScript">
<!--
... vlastní program ...
-->
</script>
Příkaz SCRIPT může mít ještě další tři parametry:
- SRC="URL" - používá se, pokud script není součástí daného html dokumentu, ale je v externím souboru. To je podobné jako u kaskádových stylů. URL pak na tento externí soubor scriptů odkazuje.
- TYPE="text/javascript" - nepovinný parametr, vhodný je-li soubor scriptů samostatným souborem.
- RUNAT="server" - udává, že script bude spuštěn již na serveru a do vlastní stránky budou vloženy až výsledky jeho činnosti. Toto však zřejmě nepoužijete.
Jak jste si mohli všimnout z ukázky výše, je celý program scriptu uzavřen do poznámky, resp. komentáře. Opět jako u kaskádových stylů je to kvůli browserům neznajícím scripty. Je dobré (i když nikoliv nutné) script do komentáře vždy uzavírat.
Takto nadefinovaný script lze do html kódu umístit prakticky kamkoliv, do hlavičky i do těla, na libovolné místo. Záleží především na tom, kdy se má script provést. Má-li se např. spustit ihned po načtení stránky, můžete jej umístit do hlavičky. Umístíte-li jej do těla dokumentu, spustí se v okamžiku, kdy na něj přijde řada.
Script však nemusí být vázán jen na umístění v dokumentu, alébrž může být spouštěn až ve chvíli, kdy se něco stane, lépe řečeno když nastane nějaká definovaná událost. A to je právě nejčastější případ, jako příklad si můžeme uvést používání scriptu ve formulářích nebo při měnících se obrázcích.
Pro případ, že použijete scripty, které se stránkou podstatně zahýbají a bez nich by nebyla stránka dobře nebo celá zobrazitelná, je zde pro starší browsery, které neumí scripty, příkaz
<NOSCRIPT> ... </NOSCRIPT>
Tento příkaz budou interpretovat pouze browsery neznající script. Uvnitř se umisťuje upozornění, že daný browser scripty nepodporuje, nebo něco podobného. Ne vždy je to třeba a žádoucí. Pokud máte ve stránce skripty, které ji pouze vylepšují, ale i bez nich je celá správně zobrazitelná, je tento příkaz spíše neužitečný.
JavaScript na rozdíl od html rozlišuje velká a malá písmena, proto pozor. Klíčová slova jazyka, proměnné, názvy funkcí a všechny další identifikátory musí být vždy psány odpovídajícím písmem. Např. příkaz "for" musí být psán právě "for", nikoliv "For" nebo "FOR". Podobně např. "help", "Help" a "HELP" jsou tři různé názvy proměnných.
V html jsou i názvy událostí často psány libovolně, v JavaScriptu je však třeba dodržovat velká a malá písmena, např. událost "onclick" musí být v JavaScriptu napsána malými písmeny, zatímco v html může vypadat "OnClick" nebo "onClick".
A ještě komentáře a poznámky. V JavaScriptu se poznámka označuje jako v Céčku, tedy dvěma lomítky
//
vše mezi // a koncem řádku je považováno za poznámku, která bude ignorována. A podobně jako u stylů, také jakýkoliv text mezi
/* ... */
je považován za poznámku a opět bude ignorován.
To je pro dnešek vše. Tyto články by vás měli uvést do problému JavaScriptu a pomoci vám pochopit zejména základy práce s JavaScriptem a vytvářením příkazů a funkcí. Nečekejte žádnou příručku JavaScriptu, od toho jsou tu jiní. My se příšte již vrhneme na vlastní JavaScript a začneme pěkně od začátku, proměnnými a práce s nimi.
Konec druhé části.
Neznámý vojín