Titulek stránky </title

Transkript

Titulek stránky </title
<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“>
</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
<br> 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
Hypertextový odkaz <a> </a>
Vše, co je mezi značkami <a> a </a> bude sloužit jako hypertextový odkaz.
Např.
<a href="http://www.seznam.cz">Seznam</a>
Vytvoří ze slova „Seznam“ hypertextový odkaz na www.seznam.cz.
Cíl hypertextového odkazu v novém okně
Př.
<a href="http://www.seznam.cz" 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.
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).
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?
<br>
<input type="radio" name="o1" id="a1" >
Václav Klaus
<br>
<input type="radio" name="o1" id="b1" >
Václav Havel
<br>
<input type="radio" name="o1" id="c1" >
Gustav Husák
Kolik pater má naše škola?
<br>
<input type="radio" name="o2" id="a2">
2
<br>
<input type="radio" name="o2" id="b2" >
4
<br>
<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>
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í.

Podobné dokumenty

Navigace v prezentaci

Navigace v prezentaci tlačítko vybereme z nabídky poklepem a vložíme na vybrané místo ve snímku. S vložením symbolu se zároveň otevře dialogové okno pro zvolení vhodné akce. Např. symbol „domů“ pro zvolení návratu na sa...

Více

SJCAM SJ5000 PLUS - návod

SJCAM SJ5000 PLUS - návod Fotografii pořídíte stiskem tlačítka OK na horní straně kamery. Z boku kamery jsou tlačítka se šipkami, která slouží jako zoom.

Více

Přenosné počítače

Přenosné počítače prstu. Proto touchpad nereaguje na dotykové pero nebo např. prst v rukavici, jako třeba dotykový display, který funguje na jiném principu. Touchpad reaguje také na poklepání prstem, díky kterému lz...

Více

HEAD_SD

HEAD_SD V této nabídce je mód Hledání, Hledání sítě a Rádií. Když stisknete OK ve volbě Hledání satelitu pro zobrazení nabídky. Použijte tlačítka Nahoru/Dolů pro výběr položky a vyberte její parametr tlačí...

Více

canon ixus arancia – limitovaná serie aps fotoaparátu cz - foto-m.cz

canon ixus arancia – limitovaná serie aps fotoaparátu cz - foto-m.cz Limitovaná edice fotoaparátu Canon Ixus Arancia na APS film (IX240). Fotoaparát uvedeme do provozu vložení baterie CR2,pod kryt baterií.Do šachty pro film IX 240 APS vložíme kazetu s neexponovaným ...

Více

evropská pravidla pro internetové stránky vpa

evropská pravidla pro internetové stránky vpa Internet se stal hlavní obchodní a komunikační sítí, která lidem v podnikání nabízí téměř neomezený potenciál pro provádění transakcí a udržování kontaktů s ostatními. Aby VPA mohli propagovat prod...

Více

Elektronické publikování

Elektronické publikování Internetová adresa (http://www.seznam.cz) Pokud potřebujeme vytvořit odkaz, který by zajišťoval stažení nějakého souboru, do URL uvedeme přesnou adresu, kde se soubor nachází. Více