Formátování textu <font size= velikost color= barva face= typ písma >

Rozměr: px

Začít zobrazení ze stránky:

Download "Formátování textu <font size= velikost color= barva face= typ písma >"

Alena Pešková
před 8 lety
Počet zobrazení:

1 <html> </html> Jedná se o nepovinný párový tag, většina prohlížečů si ho domyslí. Pokud ale chcete mít soubory v souladu s normou, <html> tag používejte. Uvádí se na začátku a konci souboru. <body> </body> Párová tag uvozující tělo dokumentu. Obsahuje veškerý zobrazovaný obsah stránky.nrjpoužívanější parametry tagu body : <body bgcolor="yellow" background="obrazek.gif" text="blue" link="green"> bgcolor="yellow" nastavý barvu pozadí stránky (barva pozadí se uvádí anglicky) background="obrazek.gif" vloží do pozadí obrázek ze souboru obrazek.gif, který musí být umístěn ve stejné složce jako stránka text="blue" nastaví barvu textu link="green" nastaví barvu hypertextového odkazu Titulek stránky <title> </title> Titulek stránky. Párový tag. Mezi značkami <title> a </title> je text, který bude chápán jako titulek. Titulek má několik málo známých funkcí, například: zobrazuje se v záhlaví okna a na hlavním panelu jako nadpis aplikace zobrazuje se jako nadpis ve vyhledávačích je prioritní při indexování stránky vyhledávacími roboty Odstavec <p> </p> Párový tag ohraničující odstavec s následujícími parametry: <p align="right"> zarovná odstavec doprava <p align="left"> zarovná odstavec doleva <p align="center"> zarovná odstavec na střed <p align="justify"> zarovná odstavec dobloku Formátování textu <font size= velikost color= barva face= typ písma >

gif" text="blue" link="green"> bgcolor="yellow" nastavý barvu pozadí stránky (barva pozadí se uvádí anglicky) background="obrazek.gif" vloží do pozadí obrázek ze souboru obrazek.

2 </font> Př.: <font color="red" face="arial" size=7>ahoj</font> Nastaví barvu písma na červenou, typ na Arial a velikost na maximum. Velikost písma může být v rozsahu 1 až 7 odřádkuje Vložení obrázku Příklad vložení obrázku strom.gif, který se nachází ve stejném adresáři jako váš web: <img src="strom.gif" alt="strom"> alt zástupný text. Zobrazuje se ve stránce v oblasti nenačteného obrázku. Velikost obrázku <img src="strom.gif" width="50" height="100" alt="strom"> Width, height Šířka (width) a výška (height) obrázku. Udává se v pixelech nebo procentech. Pokud rozměry nejsou uvedeny, zobrazí se obrázek ve své normální velikosti. V praxi se doporučuje výšku a šířku u obrázku zadávat i v případě, že obrázek bude přirozeně veliký. To kvůli rychlejšímu a lepšímu načítání stránky.pokud se zadají jiné rozměry, než má obrázek ve skutečnosti, pak se ve výsledku obrázek zvětší, zmenší nebo zdeformuje. V případě, že je uveden jenom jeden rozměr (šířka nebo výška), upraví se druhý rozměr tak, aby obrázek zachovával proporce (takže může být jinak velký, ale nebude deformovaný). Zarovnání obrázku <img src="strom.gif" alt="strom" align="right"> Hodnota parametru align určuje způsob zarovnání: left vlevo, right vpravo, center na střed

gif" alt="strom"> alt zástupný text. Zobrazuje se ve stránce v oblasti nenačteného obrázku. Velikost obrázku <img src="strom.

3 Hypertextový odkaz <a> </a> Vše, co je mezi značkami <a> a </a> bude sloužit jako hypertextový odkaz. Např. <a href=" Vytvoří ze slova Seznam hypertextový odkaz na Cíl hypertextového odkazu v novém okně Př. <a href=" target="_blank" >Seznam</a> Parametr target s hodnotou _balnk zajistí otevření cíle hypertextového odkazu v novém okně. Záložka a hypertextový odkaz Tag <a> může sloužit kromě odkazu i jako záložka. Záložka je dobrá k tomu, že definuje místo v dokumentu, na které může mířit odkaz (jiný tag <a> s href="#jmenozalozky"). Po kliknutí na takový odkaz se stránka odroluje na pozici záložky. Tag <a> definující záložku obsahuje pouze atribut name. Příklad: <a name="priklad"></a> <a href="#priklad">po kliknutí na tento odkaz odroluje stránka na místo kde je umístěna záložka priklad.</a> Hypertextový odkaz z části obrázku Nejprve se musí definovat část obrázku, která bude fungovat jako hypertextový odkaz. Např.: <map name="ctverecek"> <area href="prvni.htm" shape="rect" coords="80, 80, 130, 130"> </map> Příklad ukazuje definování tzv. klikací mapy pojmenované ctverecek. Tvar oblasti hypertextového odkazu je definován hodnotou atributu shape (rect obdelníková oblast, circle kruh, polygon mnohoúhelník). Pomocí hodnoty atributu coords určíme souřadnice dané oblasti (levý horní roh obrázku má souřadnice x=0, y=0). Pro obdelníkovou oblast se zadávají souřadnice levého horního rohu a pravého dolního rohu oblasti. Pro kruhovou oblast se zadávají souřadnice středu a poloměr. Pro mnohoúhelník se zadávají souřadnice jednotlivých vrcholů.vše v pixelech. Po definování klikací mapy ji musíme přiřadit obrázku: <img src="obrazek.gif" usemap="#ctverecek" width="150" height="150"> Přiřazení příslušné klikací mapy zajišťuje atribut usemap.

Záložka a hypertextový odkaz Tag <a> může sloužit kromě odkazu i jako záložka. Záložka je dobrá k tomu, že definuje místo v dokumentu, na které může mířit odkaz (jiný tag <a> s href="#jmenozalozky").

4 Rámy Postup vytvoření stránky obsahující rámy: 1. Vytvoříme stránky, které budou tvořit jednotlivé oblasti stránky s rámy(menu, hlavní stránka). 2. Vytvoříme spouštěcí stránku(většinou pojmenovanou index.htm), která bude obsahovat: <frameset cols="150, *"> <frame name="sloupek" src="menu.htm"> <frame name="obsah" src="uvod.htm"> </frameset> Parametry tagu frameset: cols - rozdělení stránky do sloupcových rámů, 150 šířka 1. sloupce zadaná v pixelech, * - šířka 2. sloupce zbytek okna. rows - rozdělení do řádkových rámů border - šířka rámečku mezi stránkami v pixelech Parametry tagu frame: name jméno rámu, důležité pro určení cíle odkazu v parametru target. src zobrazovaná stránka Vytvoření animované nabídky Postup jak vytvořit menu, které bude reagovat na umístěni ukazatele pohybu myši. Jakmile umístíme ukazatel pohybu myši na určitou položku v nabídce, tak položky změní svů vzhled. Postup: 1. Vytvoříme si například v malování obrázky, kterými bude menu tvořeno(úvod, odkazy,...). Každý obrázek je nutné uložit do složky se stránkami a to ve dvou variantách. Jednou v podobě ve které se bude zobrazovat, když na něm nebude ukazatel phybu myši a jednou v podobě jaká bude odpovídat při najetí ukazatele pohybu myši. 2. Vložíme na stránku, kde má být menu umístěno kód v JavaScriptu, který nám načte všechny obrázky, ze kterých je menu tvořeno do proměnných, čímž bude zajištěna rychlá změna obrázku. <SCRIPT language="javascript"> o1= new Image(130,23); o1.src="uvod1.jpg"; o2= new Image(130,23); o2.src="uvod2.jpg";.. </SCRIPT> Čísla v závorce(130,23) udávají šířku a výšku obrázku v pixelech. Musí odpovídat velikosti vámi vytvořených obrázků (zjistíte např. v IrfanView).

htm"> </frameset> Parametry tagu frameset: cols - rozdělení stránky do sloupcových rámů, 150 šířka 1. sloupce zadaná v pixelech, * - šířka 2. sloupce zbytek okna.

5 3. Na stránku kde má být menu umístěno vložíme obrázky tvořící nabídku, vytvoříme z nich hypertextové odkazy a nadefinujeme akce pro najetí(onmouseover) a opuštění(onmouseout) ukazatele myši. <a onmouseover="document.images[0].src='uvod2.jpg'" onmouseout="document.images[0].src='uvod1.jpg'" target="název cílového rámce" href="stánka"> <img border="0" src="uvod.jpg" width="130" height="23"> </a> Při najetí ukazatele pohybu myši na obrázek, se provede akce definovaná v onmouseover zobrazí se obrázek uvod2.jpg Při opuštění obrázku se provede akce definovaná v onmouseout zobrazí se obrázek uvod1.jpg Číslo v hranatých závorkách udává kolikátý je daný obrázek na stránce 0=první, 1=druhý, Hodnota parametru target určuje v jaké oblasti se otevře cíl hypertextového odkazu(název rámce ve které chceme cíl hypertextového odkazu otevřít). Hodnota parametru href určuje stránku, kterou chceme po kliknutí na obrázek otevřít. Formuláře - Vytvoření testu pomocí přepínačů a tlačítek Postup jak vytvořit tzv. zaškrtávací test, který má u každé otázky několik variant odpovědí. 1. Vložíme na stránku jednotlivé otázky s příslušnými variantami odpovědí a za ně dvě tlačítka pro vyhodnoceni a zopbrazení správných odpovědí. <form name="otazky"> Kdo byl prvním prezidentem České republiky? <input type="radio" name="o1" id="a1" > Václav Klaus <input type="radio" name="o1" id="b1" > Václav Havel <input type="radio" name="o1" id="c1" > Gustav Husák Kolik pater má naše škola? <input type="radio" name="o2" id="a2"> 2 <input type="radio" name="o2" id="b2" > 4 <input type="radio" name="o2" id="c2 > 3 <input type="button" name="t1" value="zkontroluj" onclick="hodnot()"> <input type="button" name="t2" value="správné odpovědi" onclick="odpovedi()"> </form>

jpg" width="130" height="23"> </a> Při najetí ukazatele pohybu myši na obrázek, se provede akce definovaná v onmouseover zobrazí se obrázek uvod2.

6 Přepínače patřící k jedné otázce musí mít stejné jméno(hodnota parametru name). Každý přepínač musí mít jedinečnou hodnotu id. Hodnota parametru value u talčítek určuje text zobrazený na tlačítku. Kliknutím na tlačítko spustíme příslušnou funci, kterou musíme naprogramovat v JavaScriptu. 2. Vložíme na začátek stránky kód v JavaScriptu pro funkce spouštěné pře příslušná tlačítka. <script language="javascript"> function hodnot() { var chyba; chyba=0; if(document.getelementbyid('b1').checked==false) chyba=chyba+1; if(document.getelementbyid('c2').checked==false) chyba=chyba+1; alert("počet chyb: "+chyba); } function odpovedi() { document.getelementbyid('b1').checked="checked"; document.getelementbyid('c2').checked="checked"; } </script> Funkce hodnot spočítá a vypíše počet špatných odpovědí. V závorce musíte uvést hodnotu id přepínače se správnou odpovědí. Funkce odpovedi nám zaškrtne správné odpovědi. V závorce musíte uvést hodnotu id přepínače se správnou odpovědí.

<script language="javascript"> function hodnot() { var chyba; chyba=0; if(document.getelementbyid('b1').checked==false) chyba=chyba+1; if(document.getelementbyid('c2').

Podobné dokumenty

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 13 VY 32 INOVACE 0101 0313

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace Šablona 13 VY 32 INOVACE 0101 0313 VÝUKOVÝ MATERIÁL Identifikační údaje školy Číslo projektu Název projektu Číslo a název šablony Autor