Skripty a styly

Zde se zaobírám pouze začleněním skriptů a stylů do HTML, nikoli jimi samotnými. Kurz CSS už jsem napsal, výklad JavaScriptu ještě není hotový.

Script

Párový tag obsahující zápis skriptu. Skript není zapsán v HTML, ale v jiném jazyce, většinou je to JavaScript.

Tag <script> může být kdekoli v dokumentu, v hlavičce i v těle. Instrukce programu se začnou okamžitě provádět (někdy bez viditelného efektu, např. při deklaraci funkcí), jakmile je prohlížeč načte.

Skripty mohou být do dokumentu vloženy třemi způsoby:

1. Elementem <script>, v němž je program zapsán (a pro jistotu zapoznámkován).
2. Elementem <script>, který atributem src stáhne jiný soubor, ve kterém je program zapsán. Tělo tagu je prázdné a ihned následuje značka </script>.
3. In-line skript: Instrukce mohou být zapsány jako hodnoty obecných atributů událostí. Událost je např. stisknutí tlačítka nebo přejetí odkazu. Tento způsob nepoužívá tagu <style>.

V praxi se používají kombinace těchto tří zápisů. Např. v externím skriptu jsou použité knihovny funkcí, přímým zápisem se inicializují proměnné a in-line stylem se spouští funkce jako reakce na práci uživatele.

Příklad zápisu skriptu do tagu <script>:
<script type="text/javascript"><!--
document.write("Ahoj světe!");
//--></script>

Příklad volání externího souboru:
<script language="Vbscript" src="iloveyou.vbs"></script>

Příklad in-line skriptu volaného událostí onmouseover:
<a href="tajna.html" onmouseover="alert('Neklikej na ten odkaz!')">Tajemství</a>

Zapoznámkování

Teoreticky ještě mohou existovat prohlížeče a klienti, které by mohly zápis skriptu chápat jako část textu (v praxi už vyhynuly, ale to nevadí). Proto se skript obaluje ještě navíc html poznámkou <!-- -->, aby se kód skriptu nezobrazoval. Novější prohlížeče vědí, že mají toto zapoznámkování ignorovat.

Osobně doporučuji skripty vůbec do poznámek neuzavírat, nikdy jsem nepozoroval, že by to poznámkování bylo potřeba.

Noscript

Alternativa ke skriptům. Internet Explorer, který skripty provádí, obsah elementu <noscript> ignoruje, i když má skripty zrovna vypnuté. Mozilla tag <noscript> provede, když se v ní vypne JavaScript přes Preferences-Advanced. Starší prohlížeče bez podpory skriptů (plus vyhledávače) berou obsah tagu <noscript> jako běžný text. Tag nemá žádné atributy.

Pozor, jde o tag párový, vynechání koncové značky způsobuje fatální problémy.

Tag <noscript> se umisťuje mimo tag <script>, funguje dokonce, i když ve stránce žádný skript není.

Příklad zápisu skriptu a noscript:
<script>
// ... zápis skriptu
</script>
<noscript>
libovolný html obsah
</noscript>

Style

Zápis stylu dokumentu. Párový tag obsahující zápis stylu. Styl je zapsán v jazyce CSS (Cascading Style Sheets), který není součástí HTML (ačkoli na HTML úzce navazuje).

Tag <style> by měl být součástí hlavičky, ale podle mých zkušeností jej prohlížeče akceptují i jako součást těla.

Styly dokumentu mohou být zapsány trojím způsobem:

1. Jako obsah tagu <style> (dříve se doporučovalo vlastní CSS ještě zapoznámkovat, dnes [2004] již není třeba)
2. Externím souborem -- tagem <link rel=stylesheet href="soubor.css"> se dokument nalinkuje na soubor *.css, ve kterém jsou definice stylu.
3. Přímo u každého elementu pomocí obecného atributu style, jehož hodnotou je CSS zápis. Tento způsob se obejde bez použití tagu <style>.

V praxi se mohou jednotlivé možnosti kombinovat.

Příklad zápisu stylu použitím tagu <style>:
<style type="text/css">
a {text-decoration: none} /* Odkazy nebudou podtrhávané */
u {font-weight: bold; color: blue}/* Co je podtržené, bude navíc tučné a modré */
</style>

Příklad zápisu stylu použitím tagu <link>:
<link rel="stylesheet" href="styly.css" type="text/css">

Příklad in-line stylu:
<p style="color: red">Červený odstavec</p>

Template

Obsah tagu <template> se do stránky nevypisuje. Prohlížeč si ho ale parsuje a může ho použít v nějakém skriptu, například přes innerHTML. Výhoda takového postupu je v tom, že prohlížeč už bude mít tuto část kódu předzpracovanou, takže skript bude rychlejší. Příkladem skriptu, kdy se template hodí, je starý javascriptový lazy loading obrázků.

Bez použití skriptu se <template> chová podobně jako poznámka. Prostě co v ní je, to není vidět. Případné obrázky nebo jiné objekty umístěné uvnitř <template> se nenačítají.

Tag <template> nezná prohlížeč Internet Explorer 11, takže vnitřek tagu vypíše. Dá se tedy použít také jako vtipná podmíněná poznámka pro tento konkrétní prohlížeč. V praxi ale nepodpora IE 11 přináší praktické problémy, takže je potřeba značku <template> zkombinovat s podmíněným komentářem.

Reklama

Předchozí: Hlavička

Další: Rozšíření HTML

HTML tagy:

• Struktura stránky
• Úprava textu
• Bloky
• Seznamy
• Odkazy
• Obrázky
• Klikací mapy
• Tabulky
• Video, audio
• Rámy
• Objekty
• Formuláře
• Hlavička dokumentu
• Skripty a styly
• Rozšíření HTML

Vizte též:

• o stylech: CSS - Kaskádové styly
• Přehled vlastností CSS
• O skriptech: Javascript - učebnice, objekty, příklady,
• Dynamické HTML