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 HTML HyperText Markup Language 4. část

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 • name jméno pro využití v odkazech • noresize velikost rámu nelze změnit • scrolling rolová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 Záhlaví stránky Navigační pruh (MENU) Vlastní obsah stránky • Zamýšlené rozvržení stránky:

<HTML><HEAD><TITLE>Stránka s rámy</TITLE> <FRAMESETrows="80,*"> <FRAME src="hlavicka.htm" noresize scrolling="no" frameborder="0"> <FRAMESETcols="20%,80%”> <FRAME src="menu1.htm" name="menu" scrolling="no"> <FRAME src="uvod.htm" name="hlavni"> </FRAMESET> </FRAMESET></HEAD> <BODY> Váš prohlížeč nepodporuje rámy, klikněte prosím na <A href="bez.htm">verzi bez rámů</A>. </BODY> </HTML> Vytvoření stránky s rámy – hlavní stránka Záhlaví stránky 80 Navigační pruh (MENU) Vlastníobsahstránky 80% 20%

<HTML><HEAD><TITLE>Stránka s rámy</TITLE> </HEAD> <FRAMESET rows="60,*"> <FRAME src="hlavicka.htm" noresize scrolling="no" frameborder="0"> <FRAMESET cols="20%,80%"> <FRAME src="menu1.htm" name="menu" scrolling="no"> <FRAME src="uvod.htm" name="hlavni"> </FRAMESET> </FRAMESET></HEAD> <BODY> Váš prohlížeč nepodporuje rámy, klikněte na <A href="bez.htm">verzi bez rámů</A> </BODY> </HTML> Příklad stránky s rámy

<HTML><HEAD><TITLE>Hlavicka</TITLE></HEAD> <BODY bgColor="olive" text="white" > <TABLE width="100%"> <TR><TD align="center" width="20%"> <IMG src="u47.jpg"></TD> <TD align="center"> <H1>Úzkorozchodné dráhy v ČR</H1></TD></TR> </TABLE></BODY></HTML> Hlavicka.htm Příklad stránky s rámy - pokračování <HTML><HEAD><TITLE>Menu1</TITLE></HEAD> <BODY bgColor="olive" link="darkblue" > <TABLE width="100%" > <TR><TD width="20%" bgColor="gold" > <A href="uvod.htm" target="hlavni"> Úvod</A></TD></TR> <TR><TD bgColor="gold"> <A href="jhnb.htm" target="hlavni">Jnidřichův Hradec - Nová Bystřice </A></TD></TR> <TR><TD bgColor="gold"> <A href="jho.htm" target="hlavni">Jnidřichův Hradec - Obrataň</A> </TD></TR> <TR><TD bgColor="gold"> <A href="to.htm" target="hlavni">Třemešná - Osoblaha</A> </TD></TR> </TABLE></BODY></HTML> menu1.htm uvod.htm <HTML><HEAD><TITLE>Uvodni</TITLE> </HEAD> <BODY bgColor="ivory" > <H2>Obsah úvodní stránky</H2> </BODY></HTML>

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 <PRVEK style=" … " > Př. <P style="color:blue"> <STYLE type="text/css">obvykle v části HEAD </STYLE> dokumentu <LINK rel="StyleSheet" href="soubor.css" type="text/css"> styly jsou definované v samostatném textovém souboru .css Selektor{vlastnost1:hodnota; vlastnost2:hodnota; … vlastnost3:hodnota }

Kaskádové styly - CSS Příklad <HTML><HEAD><TITLE> Příklad </TITLE> <STYLE type="text/css"> 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} </STYLE> <LINK rel="StyleSheet" href="styl.css" type="text/css"> </HEAD> <BODY class="podklad"> <H1>Nadpis<H1> <P> text </P> <P class="vyrazny"> text</P> …

<HTML><HEAD> <TITLE> M.S.-www stránka </TITLE> <STYLE type="text/css"> 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;} </STYLE> </HEAD> <BODY bgColor="lightblue"> <H3 class="spec"> Nadpis3 </H3> <HR> <Pstyle="color:darkblue;font-weight:bold;background-color:khaki"> Odstavec1</P> <P class="odst">Odstavec2</P> <TABLE bgColor="#DDDDDD" border="1" width="50%"> <TR><TD>Bunka 1</TD></TR> <TR> <TD>Bunka2</TD></TR> </TABLE> <FORM > Položka formuláre: <INPUT type="text" size="10" value="implicitní text"> </FORM></BODY> </HTML> Použití stylů

<TABLE> {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} Použití stylů II <STYLE type="text/css"> 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;} </STYLE> <LINK rel="StyleSheet"href="c.css" type="text/css"> </HEAD> <BODY bgColor=lightblueclass="poz"> <H3 class=spec> Nadpis3 </H3> <HR> <Pstyle="color:darkblue;font-weight:bold;background-color:khaki">Odstavec1</P> <P class="odst">Odstavec2</P> <TABLE bgColor="#DDDDDD" border="1" width="50%" class="jine"> <TR><TD>Bunka 1</TD></TR> <TR><TD>Bunka2</TD></TR> </TABLE> <FORM class="fml"> <SPAN class="pol">Položka formuláre: <INPUT type="text" size="10" value="implicitní text"></SPAN> </FORM> </BODY>

Kostra dokumentu Dodatek <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Hlavní stránka</TITLE> <META name="keywords" content="prodej, spotřebiče"> <META http-equiv="Content-Type" content="text/html; charset=windows-1250"> </HEAD> <BODY> </BODY> </HTML>

Dynamické HTML

Reprezentuje otevřené okno v prohlížeči Window HTML dokument v daném okně Document Kontejner všech objektů uvnitř daného dokumentu. Každý HTML element má zde svůj objekt. all Kontejnery objektů odpovídajících určitému typu elementu . forms images a další Objektový model dokumentu HTML elementy jsouOBJEKTY. • 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ů:

Identifikace objektu <Značka id="NAZEV" další_vlastnosti >Obsah </Značka> <Značka id="NAZEV" další_vlastnosti > <Značka name="NAZEV" další_vlastnosti > 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 Obecné schéma: • Identifikovat určitý objektje nezbytné, pokud chceme pomocí skriptu měnit některé jeho vlastnosti nebo obsah. • Příklady:Odkaz na objekt: Odkaz na objekt: <P id="ODST"> text </P> document.all.ODST <INPUT type="radio" name="R" value="25">A document.all.R[0] <INPUT type="radio" name="R" value="15">B document.all.R[1] <INPUT type="radio" name="R" value="0">C document.all.R[2] document.all.R[1].value Odkaz na konkrétní vlastnost objektu:

Události, na které může objekt reagovat 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) Události spojené s myší vznik události Události spojené s klávesnicí vznik události 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

Další události a obsluha 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 • Události spojené s formulářem vznik události • Další události vznik události 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. • OBSLUHA UDÁLOSTI <PRVEK Událost = “skript”> Př: <INPUT type=“button” value=“Výpočet” onclick=“Vypoc()”> Volání funkce, ve které je zapsán program (skript) jenž se má provést.

Jednoduchá obsluha události <H2 id="N1" onmousemove="document.all.N1.align=‘center’ " onmouseout="document.all.N1.align=‘left’ " > Text nadpisu </H2> <IMG src="o1.jpg" id="I1" onclick="document.all.I1.src=‘o2.jpg’ "> Nebo též: <IMG src="o1.jpg" id="I1" onclick="this.src=‘o2.jpg’ "> <P onClick="document.all.I1.src=‘o2.jpg’">Nový obrázek</P> • 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: 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.

HTML HyperText Markup Language 4 . část