PODPORA ELEKTRONICKÝCH FOREM VÝUKY

Transkript

1 I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í PODPORA ELEKTRONICKÝCH FOREM VÝUKY CZ.1.07/1.1.06/ Tento projekt je financován z prostředků ESF a státního rozpočtu ČR. SOŠ informatiky a spojů a SOU, Jaselská 826, Kolín

2 I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í Programové vybavení Programové vybavení_4.ročník_a Autorem tohoto výukového materiálu je Mgr. Hynek Kohout SOŠ informatiky a spojů a SOU, Jaselská 826, Kolín

3 Tvorba WWW stránek HTML

4 Úvod Barvy Jednotky Tagy Práce s textem Seznamy Obrázky Odkazy Tabulky Formuláře Rámce Rámce

5 Úvod - historie HTML První definici jazyka HTML vytvořil v roce 1991 Tim Berners-Lee jako součást projektu WWW, který měl umožnit vědcům zabývajícím se fyzikou vysokých energií komunikaci a sdílení výsledků výzkumů po celém světě. Ne náhodou proto celý projekt vznikal v CERNu (Centre Européenne de Rechere Nucléaire, Evropské centrum jaderného výzkumu), který leží na švýcarsko-francouzských hranicích nedaleko Ženevy. Verze HTML z tohoto období je známá pod označením HTML 0.9. Umožňovala text rozčlenit do několika logických úrovní, použít několik druhů zvýraznění textu, zařadit do textu odkazy a obrázky.

6 Úvod - historie HTML Evropská organizace pro jaderný výzkum je mezinárodní organizace se sídlem v Ženevě. Je známa též pod zkratkou CERN (z franc. Conseil Européen pour la recherche nucléaire). CERN, Evropská laboratoř pro fyziku částic, je nejrozsáhlejší výzkumné centrum částicové fyziky na světě. Byla založena v roce 1954 a od té doby se tato laboratoř, která byla prvním takovým evropským společným dílem, stala zářným příkladem úspěšné mezinárodní spolupráce. Z původních 12 signatářů dohody o založení CERN vzrostl počet členských zemí na 20. Laboratoř leží na francouzsko-švýcarské hranici západně od Ženevy na úpatí pohoří Jura. Se zařízením CERN pracuje okolo 6500 vědců, což je polovina všech částicových fyziků na světě. Vědci reprezentují 500 univerzit či jiných odborných pracovišť a více než 80 národností.

7 Úvod - historie HTML Urychlovače částic Podrobnější informace naleznete v článku Urychlovaččástic. Urychlením získajíčástice velmi vysoké energie. Jejich následné střílení do terčů nebo vzájemné srážky pomáhají fyzikům rozluštit tajemství sil působící mezi částicemi. Existují urychlovače dvou typů, lineární a kruhové. V CERN se můžeme setkat s oběma. Urychlovače používají silné elektrické pole, jehož prostřednictvím nahustí energii do svazku částic. Magnetické pole svazek přesně zaostřuje a slouží i k udrženíčástic na kruhové dráze. Lineární urychlovače předávají energii svazku při jeho postupném pohybu po celé délce. Platí tedy, že čím delší zařízení, tím vyšší konečná energie. V kruhových urychlovačích částice létají znovu a znovu kolem dokola a hromadí tak energii s každým oběhem kruhu. Jak ale rychlost částic roste, většina má tendenci vyletět ven z kruhu podobně jako auto projíždějící ostrou zatáčku na silnici. To je důvod, proč je LEP tak velký. Byl navržen tak, aby zakřivení kruhu bylo tak mírné, jak je to jen možné.

8 Úvod - historie HTML Verze HTML: Verze 0.9 : Byla vydána v roce 1991, nepodporuje grafický režim (vytvořil Tim Berners-Lee) Verze 2.0 : Stav jazyka v roce Standard vydala komunita IETF. Přidává k původní verzi interaktivní formuláře a podporu grafiky. Verze 3.2 : Byla vydána 14.ledna Přídává k jazyku tabulky, zarovnání textu a elementy style, pro ovlivnění vzhledu stránky. Verze 4.0 : Byla vydána 18.prosince Verze upravuje tabulky, formuláře a nově standardizuje rámy. Verze 4.01 : Byla vydána 24.prosince Podle původních předpokladů se mělo jednat o poslední verzi, pro které by se přešlo na XHTML. Verze 5 : 7. března 2007 byla založena nová pracovní skupina HTML, jejíž cílem je vývoj nové verze HTML.

9 Úvod Vytvoření HTML souboru 1. v libovolném textovém editoru 2. v editoru webovských stránek HomeSite, PSPad, EasyPad, UltraEdit, jedit Front Page KVALITA HTML KÓDU?

10 Struktura HTML <html> <head> <title>titulek stránky</title> </head> <body> Úvod html kód </body> </html>

11 Barvy 1. Anglicky red, green, blue.. 2. Hexadecimálně - # <FONT color="#663300>text</font> 3. Barevným modelem RGB červená(r), zelená(g) a modrá(b) RGB CMYK

12 Barvy model RGB Čím větší je součet mohutností, tím světlejší je výsledná barva. R G B barva barva černá černá červená červená zelená zelená modrá modrá žlutá žlutá purpurová purpurová azurová azurová bílá bílá

13 Jednotky Pixely Obrazovkové body. Pixely jsou základní délkovou jednotkou v HTML. Číslo je vždy chápáno jako počet pixelů. Procenta Procenta - číslo a znak procenta bez mezery. Stupně písma Pouze pro účel HTML zadávají se jako číslice od 1 do malé 3 běžné 7 obrovské Uživatel si může zvětšovat a zmenšovat písmo v prohlížeči. Jednotky nepoužívané v HTML pt, cm, in, mm, pc - tyto jednotky jsou pro CCS

14 Tagy Párové Nepárové <B> </B> ; <I> </I>.. <BR>. odřádkování Vlastnosti atributy tagů Zapisují se do uvozovek do těla prvního tagu <Font face= ARIEL">druh písma</font> vlastnost hodnota - druh fontu

15 Práce s textem Zapisuje se do tagu <body>.. </body> <B> - tučné písmo <U> - podtržené písmo <I> - kurzíva Druh písma, velikosti, barva <FONT>.. <FONT> Vlastnosti (atributy) tagu FONT: <Font face= ARIEL">druh písma</font> <Font size= 40">velikost</Font> <Font color= red">barva</font> <Font <SUB></SUB> dolní index <SUP></SUP> horní index <SMALL></SMALL> zmenšení písma o jeden stupeň Poznámka: lze kombinovat : <small><small>maličký text</small></small> <BIG></BIG> zvětšení písma o jeden stupeň <STRIKE></STRIKE> přeškrtnuté písmo <S> </S> <STRONG></STRONG> silné písmo

16 Varianta I. Práce s textem -řádkování Varianta II. Odřádkování(zalomení) textu <HTML> <HEAD> <TITLE> odřádkování</title> </HEAD> <BODY> 1 řádek 2 řádek 3 řádek </BODY> </HTML> Výsledek: 1 řádek 2 řádek 3 řádek. Odřádkování(zalomení) textu <HTML> <HEAD> <TITLE> odřádkování</title> </HEAD> <BODY> 1 řádek <BR> 2 řádek <BR> 3 řádek <BR> </BODY> </HTML> Výsledek: 1 řádek 2 řádek 3 řádek. Větší mezeru mezi textem - speciální znak pro mezeru - &nbsp

17 Práce s textem - nadpisy <H1>.. <H1> <H2>.. <H2> <H3>.. <H3> <H4>.. <H4> <H5>.. <H5> <H6>.. <H6> Velikost se řídíčíslicí 1 6. Zvyšováním čísla se nadpis zmenšuje. nadpis první úrovně nadpis druhé úrovně nadpis třetí úrovně

18 Zobrazení textového bloku s odřádkováním. <P> Práce s textem - odstavec </P> Zabránění automatickému odřádkování <NOBR>. Zobrazení formátovaného textu Zobrazení včetně mezer, odřádkování a odsazení. Text uzavřený mezi <PRE> a </PRE> se zobrazí na stránce přesně tak, jak je napsán v kódu stránky <PRE> </PRE>

19 Kontejnery Práce s textem kontejnery, atributy <SPAN>. </SPAN>řádkový element tag nezpůsobí odřádkování <DIV>. </DIV> blokový element tag s odřádkováním Atributy používá se u CCS <SPAN STYLE="color:red">STYLE <SPAN align="center">text zarovnaný vpravo</span> Příklady: align="left"... zarovná text vlevo (přednastavená hodnota) align="right"... zarovná text vpravo align="center"... zarovná text na střed color:blue

20 Práce s textem odsazení textu <BLOCKQUOTE>.. </BLOCKQUOTE> Odstavec s větším levým a pravým odsazením. Velikost odsazení 40 pixelů. Jednotlivé tagy lze vnořovat. Poznámka : vodorovnáčára v textu Délka čáry <HR width= 50%"> Šířka čáry <HR size="10"> Barva čáry <HR color="red"> Stín noshade Příklad: hr width="50%" size="50" color="red" align="center" noshade

21 Číslovaný seznam <OL> začátek seznamu <LI> asie jednotlivá položka <LI> afrika jednotlivá položka <LI> amerika jednotlivá položka <OL> konec seznamu Typy číslování <LI TYPE="1"> <LI TYPE="a"> <LI TYPE="A"> <LI TYPE="I"> <LI TYPE="i"> Seznamy

22 Seznamy Nečíslovaný seznam <UL> <LI> asie <LI> afrika <LI> amerika </UL> Typy číslování <LI TYPE= disc"> <LI TYPE= circle"> <LI TYPE= square">

23 Seznamy

24 Datová velikost souboru s obrázkem Obrázky Obrázky musejí být co nejmenší používají se kompresní formáty GIF, JPG, PNG. Tlačítko 2 kb - 5 kb pozadí stránky 2 kb - 10 kb reklamní banner 8 kb - 25 kb Fotografie 20 kb - 90 kb zmenšenina fotky 5 kb - 10 kb ilustrační obrázek 10 kb - 40 kb obrázkový nadpis 3 kb - 8 kb Orientační velikosti webových prvků!!!!! Obrázky < 100 kb!!!

25 Obrázky - formáty obrazových souborů Formát JPG - ztrátově, komprimovaný formát - nastavuje se stupeň komprese čím větší stupeň komprese, tím menší soubor a horší kvalita obrázku

26 Formáty obrazových souborů Formát GIF - ztrátově, komprimovaný formát -umožňuje vytvořit průhlednéčásti obrazu transparent gif - obsahuje maximálně 256 barev

27 K vložení obrázku na stránku slouží tag <IMG>. U něj je možné zadat více atributů Umístění obrázku Obrázky <SRC> - zdroj, umístění Pokud není obrázek ve stejném adresáři jako www stránka, je třeba dodržet stejné umístění v adresářovém stromu a v popisu zdroje obrázku. <IMG SRC= asie.jpg > obrázek je umístěn ve stejném adresáři jako WWW stránka <IMG SRC=../asie.jpg > obrázek je umístěn o adresář nad umístěním www stránky <IMG SRC="C:/kontinent/asie.jpg > obrázek je umístěn na disku C <IMG SRC=" > obrázek je na udaném www umístění v síti Internet

28 obrázky Zarovnání <ALIGN> - zarovnání <IMG ALIGN="left"> obrázek se umístí doleva a textem je obtékán z pravé strany <IMG ALIGN="right"> obrázek se umístí doprava a textem je obtékán z levé strany <IMG ALIGN="center"> obrázek je vycentrován vzhledem k okolnímu textu <IMG ALIGN="bottom"> zarovná spodní okraj obrázku se základnou textového řádku <IMG ALIGN="middle"> zarovná spodní okraj obrázku se základnou textového řádku <IMG ALIGN="top"> zarovná horní okraj obrázku se základnou textového řádku

29 Obrázky Výška a šířka obrázku <HEIGHT> - výška obrázku <WIDTH> - šířka obrázku zadává se v pixelex nebo v % velikosti okna prohlížeče pokud nejsou rozměry zadány zobrazí se v originální velikosti Příklad: <img src= asie.gif" width= 150" height="100" > Volný prostor kolem obrázku <HSPACE> <VSPACE> zadává se v pixelex nebo v % velikosti obrázku pokud nejsou rozměry zadány zobrazí se v originální velikosti

30 Obrázky Rámeček kolem obrázku <BORDER> rámeček <img src= evropa.jpg alt="strom border="0"> <img src= evropa.jpg alt="strom border= 1"> <img src= evropa.jpg alt="strom border= 2"> Popisek obrázku <ALT> zobrazuje se při přejetí kurzorem myši jako bublinková nápověda

31 <A> </A> vše mezi značkami bude sloužit jako odkaz - reaguje na kliknutí Např. <a href= start.html">moje stránka</a> <a href=" Odkazy <a href=" <img src= evropa.jpg > </a> Do odkazů není možné vkládat: 1. Odkazy 2. Tabulky 3. Formuláře

32 Odkazy Odkazy na téže stránce přesuny na odkazy v rámci jedné stránky <a name= nazev_zalozky">start</a> <a name= evropa"></a> Start <a href="#nazev_zalozky">text odkazu</a> <a href="#evropa">text odkazu</a> xxxxx xxxxx xxxxx

33 Tabulky Tabulka patří mezi velmi důležité prvky na stránce. Umožňuje zobrazit přehledně skupiny dat a dále je použitelná pro řízení vzhledu organizace stránky. Při tomto použití je možné přizpůsobovat vzhled stránky změně rozlišení. Html stránku je možné si představit jako velkou tabulku s různými rozložením buněk, které tvoří její strukturu. <TABLE> <TR> <TD>...</TD><TD>...<TD/>...<TD>...<TD/> </TR> <TR> <TD>...</TD><TD>...<TD/>...<TD>...<TD/> </TR> <TR> <TD>...</TD><TD>...<TD/>...<TD>...<TD/> </TR> <TR></TR> <TABLE> <TR> uvozujeřádky tabulky <TD> uvozuje jednotlivé buňky tabulky

34 Tabulky Příklad: <TABLE border="1"> <TR> <TD> asie </TD> <TD> afrika</td> </TR> <TR> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE> border vlastnost border určuje šířku okraje tabulky v pixelech

35 Tabulky Rozměry tabulky je možné zadávat v délkových jednotkách nebo % tj. procento velikosti okna prohlížeče <TABLE width= 50% > <TABLE height= 300 > <TH> hlavička tabulky, používá se stejně jako tag <TD>, vkládá se do jednotlivýchřádků. <TABLE border="1"> <TR> <TH>kontinenty A</TH> <TH>kontinenty B </TH> </TR> <TR> <TD> asie </TD> <TD> afrika</td> </TR> <TR> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE>

36 Tabulky Popisek tabulky zobrazuje se jako prostý text nad tabulkou v jejím středu. Jiné zarovnání popisku je možné zadáním vlastnosti ALIGN. <CAPTION>nadpis tabulky</caption> <TABLE border="1"> <CAPTION>Nadpis tabulky</caption> <TR> <TH>kontinenty A</TH> <TH>kontinenty B </TH> </TR> <TR> <TD> asie </TD> <TD> afrika</td> </TR> <TR> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE>

37 Tabulky Rámeček tabulky border šířka rámečku, standartně je nastavena na nulu <TABLE border= 7"> bordecolor barva rámečku <TABLE bordercolor="green"> bordercolordark barva vnějšího rámečku <TABLE bordercolorlight="green"> bordercolordark barva vnitřního rámečku <TABLE bordercolorlight="green"> <TABLE border="5" bordercolordark="green" bordercolorlight="yellow">

38 Tabulky Pozadí tabulky jako pozadí tabulky je možné nastavot barvu nebo obrázek BGCOLOR barva pozadí stránky <TABLE bgcolor="# FF00FF"> BACKGROUND obrázek na pozadí s cestou k souboru <TABLE background= c:\chata.jpg > <TABLE border="5" background="c:\chata.jpg"> <TR> <TD> asie </TD> <TD> afrika</td> </TR> <TR> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE> Vlastnost bgcolor má vyšší prioritu nad vlastností background!

39 Tabulky Zarovnání tabulky jako pozadí tabulky je možné nastavot barvu nebo obrázek ALIGN vodorovné zarovnánní obsahu tabulky Hodnoty: LEFT RIGHT CENTER A B C VALIGN svislé zarovnání obsahu tabulky Hodnoty: BOTTOM?????????????????????

40 Tabulky Slučování buněk buňky v tabulce je možné slučovat přes řádky a sloupce COLSPAN nastavení šířky buňky ve sloupcích. Hodnota 1, zobrazí se buňka přes jeden sloupec, hodnota 2, zobrazí se buňka přes dva sloupce. <TABLE border="1" > <TR> <TD colspan="2"; align="center"><b>kontinenty</b></td> </TR> <TR> <TD> asie </TD> <TD> afrika</td> </TR> <TR> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE>

41 Tabulky Slučování buněk buňky v tabulce je možné slučovat přes řádky a sloupce ROWNSPAN nastavení šířky buňky v řádcích Hodnota 1, zobrazí se buňka přes jeden řádek; hodnota 2, zobrazí se buňka přes dva řádky. <TABLE border="1" > <TR> <TD colspan="3"; align="center"><b>kontinenty</b></td> </TR> <TR> <TD rowspan="4">název</td> <TR> <TD> asie </TD> <TD> afrika</td> </TR> <TR> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE>

42 Tabulky Nastavení prokladu CELLPADDING velikost místa mezi obsahem buňky a jejím ohraničením CELLSPACING nastavuje rozestup mezi buňkami. Oba tyto atributy se umísťují do tagu TABLE a nelze je nastavovat pro jednotlivé buňky <TABLE border="1" valign="bottom "cellpadding="40" width=50%> <TR> <TD colspan="3"; align="center"><b>kontinenty</b></td> </TR> <TR> <TD rowspan="4">název</td> <TR align="center"> <TD> asie </TD> <TD> afrika</td> </TR> <TR align="center"> <TD> amerika</td> <TD> oceanie </TD> </TR> <TR align="center"> <TD> antarktida</td> <TD> australie </TD> </TR> </TABLE>

43 Tabulky Kombinace obou vlastností CELLPADDING, CELLSPACING <TABLE border="1" bordercolor= green valign="bottom "cellpadding="40" cellspacing="40" width=50%>

44 Tabulky Příklad tabulka v tabulce Vytvořte následující tabulku s vnořenými tabulkami...

45 Tabulky Řešení tabulka v tabulce <TABLE BORDER="1" CELLPADDING="5"> <TR> <TD VALIGN="top">X</TD> <TD> <TABLE BORDER="2"> <TR><TD>A</TD><TD>B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> </TABLE> </TD> </TR> <TR> <TD> <TABLE BORDER="5"> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> </TD> <TD VALIGN="bottom" ALIGN="right">Y</TD> </TR> </TABLE>

46 Formuláře <FORM>.. </FORM> Formuláře v HTML pouze předávají zadané údaje skriptům, které vykonají akci. Využití zadávání libovolných údajů ze strany uživatele ankety, dotazníky. action - obsahuje URL skriptu, kam je formulář poslán a zpracován method určuje způsob odeslání dat. Existují dvě varianty GET nebo POST. Základní Metodu GET není nutné zadávat - data jsou odeslána přímo v URL Metoda POST se neposílá v URL, ale jako samostatný objekt. target - určitě znáte z tvorby hypertextových odkazů; určuje cílový rám, ve kterém bude operace probíhat. _blank pošle výsledek do nového okna <form action="skript.php" method="post" target="_blank"> </form>

47 Formuláře Text <input type="text" value="text"> Maxlength.nejvyšší počet zadaných znaků Radio <input type="radio" value="1" name="jedna"> Checkbox <input type="checkbox"> Textarea <textarea cols="40" rows="3">text</textarea> Wrap Zalamovánířádků. wrap="soft" -řádky se smějí zalomit jen v místě mezery wrap="hard" -řádky se zalamují v mezerách a ve slovech, které se nevejdou na řádek wrap="off" -řádek se nezalamuje

48 Formuláře Select <select > <option>první</option> <option>druhá</option> <option>třetí</option> </select> Size Určuje kolik řádků pod sebou se zobrazí, pokud nastavíte méněřádků než počet option tak se objeví rolovací lišta. Multiple Pokud chcete uživateli nabídnout více možností najednou, uvádí se bez hodnoty. Selected Předem vybere položku ze seznamu, uvádí se bez hodnoty.

49 Formuláře II Formuláře Password Vlastnosti jsou stejné jaku u type=text akorát se místo textu zobrazí hvězdičky. Hidden Používá se pokud chcete odeslat již předem připravenou hodnotu, toto pole se nezobrazuje. Button Tlačítko používa se ve spojení s JavaScriptem. <BUTTON TYPE="SUBMIT BUTTON RESET" NAME="jméno" VALUE="hodnota">co je na tlačítku</button> Submit Odešle formulář. Reset Vymaže obsah formuláře

50 Formuláře Image Obrázek jako tlačítko <INPUT TYPE="IMAGE" ALIGN="zarovnání" ALT= bublina" SRC="zdroj obrázku"> Zarovnání: TOP,MIDDLE, BOTTOM, LEFT, RIGHT Fieldset Seskupí skupinu prvků do pole, okolo skupiny se zobrazuje rámeček, čáru můžete přerušit tagem legend, který se zobrazí jako nadpis. Legend <legend>název skupiny prvků</legend> vkládá se přímo za <fieldset >

51 Formuláře Parametry formulářových prvků Name Name určuje jméno pole, které se posílá s ostatními daty formuláře. Každý <input> musí nutně mít nastavený parametr NAME, který obsahuje jméno daného políčka. Toto je nezbytně nutné, pokud má být formulář korektně odeslán. Přes toto jméno pak script přistupuje k jednotlivým datům. Z toho vyplývá i to, že v rámci jednoho formuláře musí být každé jméno unikátní. Povinný u TEXTAREA,SELECT, INPUT nepovinné u RESET a SUBMIT. Value Value určuje počáteční hodnotu vstupního pole (text zobrazený v textovém poli nebo na tlačítku...). Align Zarovnání Disabled Disabled uvádí se bez hodnoty, disabled způsobí, že vstupní pole nepůjde změnit.

52 Formuláře

53 Odeslání formuláře Formuláře 1. Odeslání přes poštovní program uživatele počítače - nespolehlivé!!!!! Action="mailto:..." HTML už v sobě obsahuje způsob, kterým se má vyplněný formulář odeslat na mail adresa@prijemce <form action="mailto:adresa@prijemce" method="post" enctype="text/plain"> Váš mail: <input name="mail_odesilatele" size="20"><br> Předmět: <input name="subject" size="20"><br> Zpráva: <textarea name="body" rows="4" cols="30"></textarea><br> <input type="submit" value="odeslat"> </form> 2. Odeslání přes server Action se namíří na nějakou aktivní stránku (např. ASP nebo PHP skript), která udělá dvě věci: Bez znalosti PHP / služba

54 Rámce Nejednoduší způsob jak organizovat www stránku. Použití pro jednoduchý web. V dnešní době jsou rámce málo používané. Výhody: jednoduchá správa stránek Nevýhody: problémy s tiskem adresa je stále stejná a nemění se při odkazování vyhledávací roboti vyhledávají konkrétní stránku a nemusí vždy zobrazit celou konstrukci stánky, ale pouze obsah konkrétního rámce. html3 html1 html2 html1 html2 html3

55 Rámce COLS určuje počet sloupců rozdělení rámce <FRAMESET cols= 60%,40%,*"> <FRAME src="strana1.htm"> <FRAME src="strana2.htm"> <FRAME src="strana3.htm"> </FRAMESET> ROWS určuje počet řádků rozdělení rámce <FRAMESET rows= 60%,40%,*"> <FRAME src="strana1.htm"> <FRAME src="strana2.htm"> <FRAME src="strana3.htm"> </FRAMESET>

56 Rámce Příklad: html1 html2 Html3 html1 html2 html3 Poznámka: U tohoto příkladu dodržte rozložení barev na jednotlivých stránkách

57 Rámce <FRAMESET cols= 30%,*"> <FRAMESET rows= 60%,*"> <FRAME src="stranka1.htm"> <FRAME src="stranka2.htm"> </FRAMESET> <FRAME src="stranka3.htm > </FRAMESET>

58 Rámce Vlastnosti tagu FRAME : SRC..zdroj stránky NAME jméno rámce Jméno rámce je důležité s ohledem na směrování odkazů do konkrétního rámu. Příklad: <A HREF="stranka2.htm" target= menu"> SCROLLING možnost zobrazení posuvníků..yes/no/auto NORESIZE..povolení změny velikosti rámu..yes/no MARGINHEIGHT vertikální prázdný okraj.px MARGINWIDTH..horizontální prázdný okraj px BORDERCOLOR barva rámečku..red, green. Vlastnosti tagu SETFRAME : COLS počet sloupců ROWS...počet řádků FRAMEBORDER okraj rámce.....1/2/ px

59 Rámce Adresování <A HREF="stranka2.htm" target= _blank"> stránka se načte do nového okna <A HREF="stranka2.htm" target= _self"> stránka se načte do stejného rámu <A HREF="stranka2.htm" target= _top > stránka se načte do okna prohlížeče <A HREF="stranka2.htm" _parent"> stránka se načte do nadřazeného rámu Inframe? použití

60 Multimédia <EMBED>. </EMBED> SRC..zdroj zvuku nebo videa???????? Vyhledejte a vypište seznam vlastností tohoto atributu na konkrétním příkladu přehrávání zvuku nebo videa na HTML stránce?

61 Příklady Příklad č.1

62 Příklady Příklad č.1 - řešení

64 Příklady Příklad č.3 záložky na téže stránce

70 Příklady Příklad č.9 layout pomocí tabulek

73 Použitá literatura a informační zdroje

74 Použitá literatura a informační zdroje příklady www stránek příklady www stránek