HTML HyperText Markup Language 4. část Ústav automatizace inženýrských úloh a informatiky FAST VUT v Brně 0U2 - Základy informatiky a výpočetní techniky 2

Rámy — FRAMES  Rámy umožňují rozdělit okno prohlížeče na několik částí. V každém rámu může být zobrazována jiná stránka.  Definice rozložení rámů — FRAMESET  atributy rows, cols rows="200,*" rows="20%,80%" cols="40,2*,3*"  Definice obsahu rámů — FRAME  srcURL obsahu rámu  namejméno pro využití v odkazech  noresizevelikost rámu nelze změnit  scrollingrolování obsahu rámu (no, yes, auto)  marginwidth, marginheight vzdálenost obsahu od okrajů  frameborder rámeček oddělující rámy od sebe

Vytvoření stránky s rámy  Zamýšlené rozvržení stránky: Záhlaví stránky Navigační pruh (MENU)Vlastní obsah stránky

Vytvoření stránky s rámy – hlavní stránka Záhlaví stránky Navigační pruh (MENU) Vlastní obsah stránky Stránka s rámy Váš prohlížeč nepodporuje rámy, klikněte prosím na verzi bez rámů % 80%

Příklad stránky s rámy Stránka s rámy Váš prohlížeč nepodporuje rámy, klikněte na verzi bez rámů

Příklad stránky s rámy - pokračování Hlavicka Úzkorozchodné dráhy v ČR Menu1 Úvod Jnidřichův Hradec - Nová Bystřice Jnidřichův Hradec - Obrataň Třemešná - Osoblaha Uvodni Obsah úvodní stránky Hlavicka.htm menu1.htm uvod.htm

Kaskádové styly - CSS  Obecné rozšíření HTML – popis vzhledu prvků pomocí parametrů, obdobně jako v DTP.  Stránka se skládá z vlastního zdrojového textu a definice stylů. Definice stylů  Deklarace stylu Selektor {vlastnost1:hodnota; vlastnost2:hodnota; … vlastnost3:hodnota } Př. obvykle v části HEAD dokumentu styly jsou definované v samostatném textovém souboru.css

Kaskádové styly - CSS Příklad H1 {font-family:serif; color:red} P {text-indent:4em; text-align:justify}.vyrazny {font-weight:bold; font-family:courier; font-color:darkblue}.podklad {background-color:gray} #odst {margin-left:25px} Nadpis text … Příklad

Použití stylů M.S.-www stránka H3 {color:blue}.spec {font-family:Arial;font-style:italic;font-weight:extra-bold;font-size:18pt;text-align:center}.odst {color:red; text-indent:5em;font-family:monospace;text-transform:uppercase;} Nadpis3 Odstavec1 Odstavec2 Bunka 1 Bunka2 Položka formuláre:

Použití stylů II {background-color:olive}.jine {color:white;border-style:solid;border-color:red}.fml {margin-left:25px;color:darkblue;border-style:groove;}.pol {font-weight:bold}.poz {background-image:url(bgd.jpg); background-repeat:repeat} H3 {color:blue}.spec {font-family:sans-serif;font-style:italic;font-weight:extra-bold;font-size:18pt;text-align:center}.odst {color:red; text-indent:5em;font-family:monospace;text-transform:uppercase;} Nadpis3 Odstavec1 Odstavec2 Bunka 1 Bunka2 Položka formuláre:

Dodatek Kostra dokumentu Hlavní stránka

Dynamické HTML

Objektový model dokumentu HTML elementy jsou OBJEKTY.  Každý objekt : má vlastnosti – atributy může reagovat na události  Identifikace objektu: atributy id – jednoznačná identifikace name – několik objektů může mít stejné name Hierarchická struktura objektů: Window Document all forms images a další Reprezentuje otevřené okno v prohlížeči HTML dokument v daném okně Kontejner všech objektů uvnitř daného dokumentu. Každý HTML element má zde svůj objekt. Kontejnery objektů odpovídajících určitému typu elementu.

Identifikace objektu  Identifikovat určitý objekt je nezbytné, pokud chceme pomocí skriptu měnit některé jeho vlastnosti nebo obsah.  Příklady: Odkaz na objekt: Obsah windows.document.all.NAZEV document.all.NAZEV ( pokud nepoužíváme rámy, je určení okna jednoznačné) document.all.NAZEV[1] při stejném pojmenování několika elementů pomocí name, je nutné určit pořadové číslo elementu (0 – n) – tzv. index text document.all.ODST A document.all.R[0] B document.all.R[1] Cdocument.all.R[2] document.all.R[1].value Odkaz na objekt: Obecné schéma: Odkaz na konkrétní vlastnost objektu:

Události, na které může objekt reagovat Události spojené s myšívznik události onclick při kliknutí myší na daném prvku ondblclick při dvojitém kliknutí myší na daném prvku onmousedown při stisknutém tlačítku myši na prvku onmouseup při uvolnění tlačítka myši na prvku onmouseover při ponechání myši nad prvkem onmousemove při najetí myši na prvek onmouseout při opuštění prvku myší onfocus při ponechání myši nad prvkem (u položek formuláře) onblur při opuštění prvku myší (u položek formuláře) onkeypress při rychlém stisku klávesy na prvku onkeydown při stisknuté klávese na prvku onkeyup při uvolnění klávesy Události spojené s klávesnicívznik události

Další události a obsluha události  Události spojené s formulářemvznik události onsubmit při odeslání formuláře onreset při vymazání formuláře onselect při výběru textu v textovém poli onchange při změně hodnoty v prvku formuláře onload při dokončení zavedení stránky se všemi jejími elementy onunload po odstranění obsahu dokumentu z okna nebo rámcem Tyto události lze použít jen v prvcích BODY a FRAMESET.   Další události vznik události   OBSLUHA UDÁLOSTI Př: Volání funkce, ve které je zapsán program (skript) jenž se má provést.

Jednoduchá obsluha události  V jednoduchých případech, lze příkaz obsluhující danou událost zapsat přímo, bez volání funkce. Příklad: Změna vlastnosti prvku při vzniku události: Text nadpisu Nebo též: Nový obrázek onclick= " document.all.I1.src = ‘o2.jpg’ "Př–udalost.htm Elementární skript tvořený jediným příkazem – přiřazovacím (vlastnosti se přiřazuje hodnota). Pro psaní skriptů je nutná znalost programování v jazyce Javascript nebo VBScript.