(blok. značka) • přiřazení třídy části textu, který je součástí odstavce (nechceme tedy, aby byl oddělen) provedeme pomocí nové značky <span> • v definici stylu je možné používat komentáře jako v programovacím jazyce C h1 {color:blue} /* modrý nadpis */

Selektor pomocí identifikátoru: • definici stylu uvedeme zvláštní deklarací #ID01 {letter-spacing:1pt} identifikátor elementu

• na příslušný identifikátor se odkážeme v dokumentu pomocí atributu ID

Text odstavce

• deklarace identifikátoru může mít podobu h1#ID01 {letter-spacing:3pt}

• v tomto případě se definice uplatní u elementů h1, které mají nastaven atribut id="ID01" Příklad:

Nadpis

Výsledek:

Nadpis

Poznámka: • pomocí tzv. kontextových selektorů je možné definovat výjimky v definici stylů, např. při vnořování Příklad: – definice stylu u zvýrazněného textu v nadpisu h1 em {…}

– definice stylu u položek seznamu ul li {…}

Pseudotřídy a pseudoelementy Pseudotřídy • neobjeví jako hodnota atributu CLASS • pseudotřídy pro nastavení barev odkazů: a:link {color: blue} • nenavštívený odkaz

a:visited {…} • navštívený odkaz

a:active {…} • aktivní odkaz (je na něm kurzor)

Příklad: <style> a:link {font-size:20pt} a:visited {color: yellow}

Výsledek: • nenavštívené odkazy budou velké, navštívené normální a žluté

Pseudotřídy div > p:first-child { text-indent:0 } • vlastnost prvního elementu, který je součástí jiného elementu, zde vlastnost 1. odstavce elementu div

a:focus { color: red } • element, na kterém je focus

a:hover {…} • element, nad kterým je kurzor

q:lang(fr) {quotes: '« ' ' »'} • vlastnosti elementu q, označeného atributem lang="fr" • IE podporuje, je-li vloženo

Pseudoelementy: first-letter • nastavení vlastností prvního písmene textu elementu

first-line • nastavení vlastností první řádky textu elementu

before after • automatické vložení obsahu před/za element

Příklad: <style> P.prvni:first-letter {font-size: 300%; float: left}

Byla, nebyla, v lese stála malá chaloupka. A v ní bydlela kouzelná babička. Ale nebyla to vůbec žádná zlá čarodějnice.

Výsledek:

<style> body { counter-reset: chapter;} /* Vytvoření a reset čítače */ h1:before { content: "Kap " counter(chapter) ". "; counter-increment: chapter;} /* Zvýšení čítače o 1 */

Úvod

Toto je úvod

Webové stránky

Webové stránky jsou.

Vlastnosti nastavované pomocí CSS • vlastností je mnoho (více než 50) • ovlivňovat lze – vzhled písma – barvu a pozadí – zarovnání a formátování textu – formátování stránky – automaticky generovaný text

• uvedeme jen některé vlastnosti

Písmo: – rodina písma

font-family

• serif, sans-serif, cursive

– styl písma font-style • normal, italic, oblique

– duktus písma (síla) font-weight • normal, bold, bolder, lighter

– velikost písma font-size • medium, large, small, procentuální

Barva a pozadí: – kromě dříve známých způsobů zápisu lze použít i procentuální zápis RGB modelu • rgb (25%,25%,25%)

– barva textu color – barva pozadí background-color – obrázek na pozadí background-image • background-image: url()

– směry, ve kterých se obrázek na pozadí bude opakovat background-repeat • repeat, repeat-x, repeat-y,no-repeat

Zarovnání a formátování textu: – nastavují se vlastnosti textu jako zarovnání, mezery mezi písmeny, odstavcová odrážka atd. – zvětšení mezislovní mezery word-spacing – zvětšení mezery mezi písmeny letterspacing – zarovnání text-align • left, right, center, justify

– velikost odstavcové odrážky text-indent – výška řádky line-height

Jednotky délky Jednotka Popis em Výška aktuálního písma. Odpovídá šířce písmene 'M'. ex Výška písmene 'x'. px Pixel. 1px odpovídá jednomu bodu obrazovky in Palec. 1 in = 2,54 cm cm centimetr mm milimetr pt Tiskařský bod. 1pt = 1/72" = 1/12 pc pc Pica. 1pc = 12 pt

Formátování stránky: – nastavují se velikosti okrajů a jednotlivých boxů

– velikost horního okraje margin-top – velikost pravého okraje margin-right – velikost vnitřního horního okraje padding-top – šířka rámečku border-width – tvar rámečku border-style • none, dotted, dashed, solid, atd.

– šířka elementu width – umístění plovoucího objektu float • left, right, none

– atd.

Klasifikační vlastnosti Dvě skupiny: 1. určují druh elementu a jeho zobrazení – display • block, inline, list-item, none

2. určují zobrazení seznamů – druh odrážek list-style-type • disc, circle, decimal, upper-roman

– obrázek jako odrážka list-style-image • url

Další rozšíření HTML 4.0 • rámy – viz minulá přednáška

• kaskádové styly CSS – dnešní přednáška

• odkazy s určením typu • rozšířený model tabulek • applety JAVA a skriptování

Odkazy s určením typu • pomocí atributu REL u odkazů nebo určujeme typ (význam) odkazu • příklad hodnot: – Top, Start • odkaz na hlavní úroveň hierarchie dokumentů

– StyleSheet • odkaz na definici stylu

– Alternate • odkaz na alternativní verzi dokumentu (např. pro tisk)

Rozšířený model tabulek Skupiny řádek: • rozdělení tabulky na tři části – záhlaví • značka

– zápatí • značka

– tělo • značka

• ukončovací značky skupin jsou nepovinné • skupiny musí být použity v pořadí záhlaví, zápatí, tělo • tělo může být rozděleno na několik částí opakovaným použitím značky • význam – u dlouhých tabulek může prohlížeč ponechat záhlaví a zápatí zobrazené, zbytek tabulky rotuje

Skupiny sloupců: • definice skupiny sloupců a jejich vlastností • nové značky a – definuje skupinu sloupců – definuje sloupce

• atributy – SPAN – určuje počet sloupců ve skupině – WIDTH – určuje šířku sloupců ve skupině • nová speciální hodnota "0*" = minimální šířka

– ALIGN, VALIGN- zarovnání

• definice musí být ještě před prvním řádkem tabulky Příklad 1: Obsah tabulky

Příklad 2: Obsah tabulky

Zarovnání buněk: • atribut VALIGN – nová hodnota BASELINE – zarovnání účaří buněk do stejné výše

• atribut ALIGN – nová hodnota JUSTIFY – zarovnání do bloku – nová hodnota CHAR – zarovnání na písmeno v textu

• nový atribut CHAR – určuje znak, na který se budou hodnoty zarovnávat, např. desetinná čárka – ve spojení s hodnotou CHAR atributu ALIGN

Vsuvka – něco z typografie • účaří je typografický termín Akcentová dotažnice Horní dotažnice Verzálková dotažnice Střední dotažnice výška písma

Základní dotažnice = účaří Dolní dotažnice

Ábčý

Barva pozadí tabulky a buněk • nový atribut BGCOLOR

Rámečky a mřížka: • dva nové atributy u značky – FRAME • určuje způsob vykreslení rámečku okolo tabulky

– RULES • určuje způsob vykreslení rámečku uvnitř tabulky

Hodnoty atributu FRAME FRAME void border box hsides vsides above lhs below

Popis tabulka nemá rámeček rámeček okolo celé tabulky rámeček okolo celé tabulky horní a dolní strana boční strany horní okraj levá strana tabulky spodní okraj

Hodnoty atributu RULES RULES none all rows cols

Popis mřížka nebude vykreslena mřížka bude všude mřížka mezi řádky mřížka mezi sloupci

Podpora vícejazyčných dokumentů • zavedení nových atributů LANG,DIR – mohou být použity u každé značky

• LANG – určuje jazyk elementu, zápis dle ISO 639

• DIR – určuje směr, v jakém se má text zobrazit – LRT – zleva doprava – RTL – zprava doleva

Příklad: …

citace v americké angličtině

…

Vyznačování textu • značka – slouží k označování zkratek použitých v textu – atribut TITLE – vysvětlivka

Příklad: Nejznámější službou internetu je WWW

– po najetí kurzorem na text WWW se zobrazí vysvětlivka

• značky , – pro nově vložený (ins) a zrušený (del) text • prohlížeče nově vložený text zobrazí zpravidla podtrženým písmen, zrušený přeškrtnutým (některé prohlížeče zrušený text nezobrazí)

– atribut CITE • měl by obsahovat URL na dokument vysvětlující změnu

– atribut DATETIME • obsahuje čas provedení změny • hodnoty atributů se zobrazí ve Vlastnostech

Vkládání objektů • značka

Jméno:
Odešli

Výsledek:

Sdružení polí • značky

• sdružená pole se orámují rámečkem, jehož šířka je standardně přes celou obrazovku – šířku lze omezit pomocí CSS - width

• pomocí značky

lze určit název celé skupiny –

musí následovat hned za značkou

Příklad:

Osobní údaje

Jméno:
Příjmení:

Výsledek:

Vkládání skriptů • skripty zabudovala do prohlížeče firma Netscape • skript je vložený kód do stránky, který vykonává prohlížeč • použitý skriptovací jazyk u firmy Netscape byl JavaScript

• skripty se osvědčily • proto byly vytvořeny i jiné skriptovací jazyky, zejména firmou Microsoft – VBS (Visual Basic Script) • skriptovací jazyk odvození od Visual BASICu, podpora pouze IE

– JScript • upravený JavaScript, rozšířený o objektový model prohlížeče (práce s objekty prohlížeče)

• HTML 4.0 umožňuje obecné vložení skriptů bez ohledu na jazyk

Druhy skriptů 1. skripty, které jsou vykonány při nahrání stránky do prohlížeče – vkládání pomocí značky <SCRIPT>

2. skripty vázané na určitou událost – např. při stisku tlačítka myši – spojují se s určitým elementem

Důvody používání skriptů • zvýšení uživatelského komfortu stránek: – modifikování dokumentu v průběhu jeho nahrávání – zajištění kontroly vstupních dat v políčkách – inteligentní chování formulářů – zobrazení lišt nabídek, interaktivní uživatelské rozhraní (změna barev po přejetí myši atd.) – nějaký dialog s uživatelem

Vložení skriptu do stránky • párová značka <SCRIPT> • důležitý atribut LANGUAGE – definuje použitý skriptovací jazyk

• skript může být zapsán přímo mezi párové značky nebo určen odkaz na soubor se skriptem (např. .js) pomocí URL • skript může být umístěn kdekoliv - v záhlaví i v těle – v záhlaví by měly být definice funkcí

Příklad 1: <SCRIPT LANGUAGE="JavaScript"> alert("Zdravím Vás při nahrání stránky!");

Výsledek: • script zobrazí okénko s hlášením a tlačítkem OK při nahrávání stránky (před zobrazením) priklad1.html

Příklad 2: • vložení skriptu (skriptů) pomocí odkazu <SCRIPT LANGUAGE="JavaScript" SRC="prvni.js">

Poznámka: – nelze kombinovat oba způsoby v jednom výskytu elementu <SCRIPT> priklad2.html

Základní vlastnosti JavaScriptu • skriptovací jazyk (interpretovaný), jehož syntaxe je podobná jazyku Java (a tudíž C) • rozlišuje malá a velká písmena • každý příkaz ukončen středníkem • neumí přistupovat k souborům ani jiným systémovým prostředkům (jen aktuální datum a čas) • hodí se pro jednoduché aplikace

Proměnné, deklarace proměnných • proměnné nejsou typované, jsou globální • mohou být číselné, textové, booleovské • deklarace pomocí klíčového slova var • přiřazení hodnoty: = Poznámka: – řetězcové konstanty jsou uzavřeny do uvozovek nebo do apostrofů – booleovské konstanty jsou true, false

Příklad: var x; var text; x = 13; text = "Ahoj";

• je možné definovat pole pomocí klíčového slova Array var dny; dny = new Array("pondělí","úterý");

• dny[0] vrátí řetězec "pondělí" • po deklaraci pole je možné přidat další položky, např. dny[2] = "středa" • délku pole je možné zjistit pomocí vlastnosti length Poznámka: • pole je možné také vytvořit např. z řetězce pomocí funkce split(oddělovač)

Hlášení • existují tři procedury pro zobrazení hlášení (dialogového okna): • alert("Text"); – zobrazí okénko s textem a tlačítkem OK

• prompt("Text","Implicitní"); – zobrazí dialogové okénko s textem, se vstupním polem a tlačítky OK, Zruš – v poli je zapsán implicitní text – zadanou hodnotu lze přiřadit do proměnné

Příklad: jmeno = prompt("Zadej jméno",""); – v případě stisku tlačítka Zruš přiřadí do proměnné jmeno hodnotu null

• confirm("Text"); – zobrazí dialogové okénko s textem a tlačítky Ano, Ne – výsledkem je booleovská hodnota true/false zadani.html, pozdrav.html

Základní operátory • přiřazení • aritmetické

= +, -, *, /, ++, +=, *=, -=, /=

b++ - přičtení 1 k proměnné b b+=3 ekvivalentní s b=b+3

• porovnání – rovno = = (dvě rovnítka bez mezery) – nerovno != – větší, menší <, >, <=, >=

• logické

&& (and), || (or)

• ternární operátor ?: – podmíněný výraz (a
Základní řídicí struktury • větvení if (a == 5) { document.write("Je to pet"); } else { … }

• cykly while (podminka) {příkazy; } for (i=1; i <= 7; i++) { příkazy; } do { příkazy; } while(podmínka);

Funkce • deklarovat funkce je vhodné v záhlaví dokumentu – jsou načtené při nahrávání stránky

• deklarace funkce function jmenoFunkce(param,param) { příkaz; příkaz; return hodnota };

• ve funkci lze deklarovat proměnnou pomocí var – proměnná (i parametry) je lokální

• funkce, která nevrací hodnotu, je procedura – vynechává se klíčové slovo return

• volání funkce jmenoFunkce(hodnota, hodnota);

Události a skripty • spouštění skriptu se provede při vzniku určité události, kterou způsobil uživatel (např. stisk myši) – spuštění akce při vzniku události se nazývá event-handling

• událost se váže k určitému elementu • zápis

Události okna a dokumentu Událost

Popis

onLoad

při úplném načtení stránky

onUnload při opouštění stránky onResize při změně velikosti okna onScroll při skrolování, posouvání obsahu

Události myši Událost

Popis

onClick

při kliknutí na prvek nebo při přednastavené akci při dvojkliku na prvku

onDblClick

onMouseOver při najetí myší na prvek onMouseOut

při odjetí z prvku

onMouseMove při pohybu myši nad prvkem onMouseDown při stisknutí tlačítka nad prvkem onMouseUp

při uvolnění tlačítka nad prvkem

Události klávesnice Událost

Popis

onKeyPress při stisknutí klávesy ve chvíli, kdy je element aktivní onKeyDown při stlačení klávesy ve chvíli, kdy je element aktivní onKeyUp při uvolnění klapky ve chvíli, kdy je element aktivní

Události formuláře Událost

Popis

onSubmit

těsně před odesláním formuláře

onReset

při vynulování formuláře tlačítkem Reset

onFocus

při aktivaci políčka (okna)

onBlur

při deaktivaci políčka (okna)

onChange

při změně hodnoty políčka

onSelect

při vybrání textu myší

Příklad: • připojení procedury jako reakce na událost kliknutí na tlačítko

• jednoduché skripty je možné zapsat jako „in-line“, tj. přímo tlacitko.html

Příklad • procedura ve formuláři, která počítá peněžní částku s daní 21% <SCRIPT language="JavaScript"> function Vypocet_DPH() { var cena_b, cena_s; cena_b = document.form_cena.Cena_bez.value; if (isNaN(cena_b)) alert("V políčku Cena bez DPH musí být číslo"); else { cena_s = cena_b*1.21; document.form_cena.Cena_s.value = cena_s; } }

Cena bez DPH:
Cena s DPH:

vypocet_dane.html

• výpis není zaokrouhlen např. při zadání hdnoty 11 • upravíme přiřazení hodnoty do políčka pomocí funkce matematického zaokrouhlení na celá čísla z objektu Math Math.round() Math.round(cena_s*100)/100

vypocet_dane2.html

Objekt Math • zaokrouhlení – ceil() - nahoru, floor(), round()

• funkce – sin(x), cos(x), max(x), log(x), exp(x), abs(x), sqrt(x) atd.

• konstanty – Math.E, Math.PI, Math.LN2

Objekt Date • zapouzdřuje funkce data a času • např.: – getMonth(), getDate(), getYear() – getDay() – číslo dne v týdnu (0 = neděle) – getHours(), getMinutes(), … – setMonth(), setDate() atd.

Objekt String • metody pro manipulaci s řetězci • např. – toString(x) – převádí číslo na řetězec – length – délka řetězce – toUpperCase(), toLowerCase() – charAt(n) – concat(s1,s2) – indexof(s) – pozice s v řetězu

Příklad: <SCRIPT> datum = new Date(); cislodne = datum.getDay(); den = new Array("neděle", "pondělí", "úterý", "středa", "čtvrtek", "pátek", "sobota"); mesic = datum.getMonth(); mesic += 1; document.write(datum.getDate()+"."+ mesic +"."+datum.getFullYear()); document.write(" a je " + den[cislodne]); datum.html

Změna HTML • stránky, jejichž obsah se mění na klientské straně (pomocí skriptů) • lze měnit – obsah (elementy) – styly – hodnoty atributů

Objektový model dokumentu • DOM – Document Object Model

• definován konsorciem W3C • definuje jednotnou hierarchii objektů, pomocí nichž se přistupuje k jednotlivým elementům dokumentu a jejich vlastnostem • základní (kořenový) objekt ve stromu je windows

Základní hierarchie objektů window – location – history – navigator • appName

– atd. – document • links • images • all • body • atd.

Přístup k objektům • pomocí tečkové notace • u objektu document můžeme vynechat nadřazený objekt window Příklady: window.screen window.document.body nebo jen document.body

• důležitý objekt je document.all – obsahuje všechny elementy obsažené v dokumentu

• elementy jsou přístupné pomocí identifikátoru = hodnota atributu ID – pomocí tohoto identifikátoru je možné měnit vlastnosti elementu, jeho styl, nebo text uvnitř elementu, dokonce i celý element

Příklad: <SCRIPT LANGUAGE="JavaScript"> function Zarovnani() { document.all.Nadpis.align="center"; }

Klikni si

zarovnani.html

•

ke stylům je možné přistupovat pomocí vlastnosti style 1. hromadně document.all.Nadpis.style="color: red; font-size: 30px";

2. po jednotlivých vlastnostech document.all.Nadpis.style.color= "red";

• pomocí atributu innerText lze měnit obsah elementu, – např. text nadpisu

• pomocí atributu outerHTML lze měnit element jako celek – např. z nadpisu udělat obrázek

<SCRIPT LANGUAGE="JavaScript"> var nadpis= true; function Zarovnani() { if (nadpis==true) { document.all.Nadpis.outerHTML="

Z nadpisu je normální odstavec. Klikni si"; nadpis = false; } else { document.all.Nadpis.outerHTML="

Klikni na mně

"; nadpis = true; } }

Klikni na mně

zmena.html, zmena2.html

Řízení pozice elementů • ke stylům byla přidána nové vlastnosti týkající se pozice elementu na stránce • souřadnice se vztahují k nadřazenému elementu (nejčastěji celý dokument) – levý horní roh = (0,0)

• některé vlastnosti – position – relativní, absolutní – left, top – souřadnice • zadané v pixelech nebo procentech

Příklad – rozbalovací menu

Škola

• Učitelé
• Žáci

Třídy

• 1.A
• 2.A

<SCRIPT LANGUAGE="JavaScript"> function Zobraz(polozka) { var cela; cela = "Menu"+polozka; document.all.item(cela).style.display=""; } function Skryj(polozka) { var cela; cela = "Menu"+polozka; document.all.item(cela).style.display="none"; }

menu.html, menu2.html

Časování • metody objektu window • jednorázové načasování – proměnná = setTimeout("akce",ms); – clearTimeout(proměnná);

• opakované časování – proměnná2 = setInterval("akce",ms); – clearInterval(proměnná2);

Příklad: <SCRIPT> var casovani; var pozdravy; pozdravy = new Array("Ahoj","Cau","Nazdar"); casovani=window.setInterval("Zdravice()",2000); function Zdravice() { var index = Math.floor(Math.random()*3); alert(pozdravy[index]); } Zastavit

Applety • applet – aplikace napsaná v jazyce JAVA – applet = malá aplikace

• vkládá se pomocí značky <APPLET> • atributy – CODE – odkaz na kód – WIDTH,HEIGHT – šířka a výška okna appletu – NAME – jméno appletu

• ve verzi HTML 5 označeny jako zastaralé

• značka – umožňuje předat appletu parametry

• atributy – NAME – jméno parametru – VALUE – hodnota parametru <APPLET code= "kresleni.class"> Zde se měl spustit applet

Java • „čistý“ objektově orientovaný programovací jazyk navržený firmou Sun Microsystems • syntaxe odvozena od C++ (jednodušší) • původně určen pro vývoj aplikací pro jednočipové mikropočítače (v domácích spotřebičích) • asi od poloviny 90. let se ujal jako programovací jazyk pro www aplikace

• snaha navrhnout jednotnou koncepci jazyka (syntace + sémantika) nezávislou na plat-formě (snaha o ISO standardizaci) • „polointerpretovaný“ jazyk: – zápis kódu v jazyce Java (soubory . java) – překládá se do vnitřní formy – BYTE kódu (není to strojový kód žádného procesoru) – soubory .class – BYTE kód je interpretován (zpracováván) na konkrétním počítači pomocí „virtuálního počítače“ – JVM (Java Virtual Machine)

• firma Sun se snažila JVM interpretovat ve formě obvodu – JavaStation (počítač v síti bez disků, který zpracovává jenom BYTE kód) – „tenký klient“ • důsledek: – přenositelnost – program v Javě je nezávislý na přítomnosti prohlížeče, může „běžet“ pod libovolným JVM – zdrojové kódy mohou zůstat utajené

výhody: • plnohodnotný programovací jazyk – tvorba jakékoliv složitější aplikace • objektové rysy – dědičnost (jednonásobná) • mnoho knihoven – síťová komunikace, parsing, abstraktní datové typy, grafická knihovna (kreslení na stránky) – využívá nativní kódy OS • automatická správa dynamické paměti – garbage collector („sběrač smetí“)

• podpora multiprocessingu – vlákna (třídy Thread, ThreadGroup) • synchronizace procesů – příkaz synchronized • strukturované ošetření chyb - výjimky • zabezpečení: není přístup k systémovým prostředkům (je možné ovlivnit Security Managerem)

• základní datové typy – char (UNICODE), boolean, byte, short, int, long, float, double – definovaná velikost – pole – třídy (objekty) – class

• další důležité vlastnosti: – nejsou struktury, uniony, ukazatele jsou skryté, neexistují globální proměnné – kontrolují se meze polí – objekty se musí explicitně tvořit, např. i pole

• ukázka programu, který vypisuje na konzoli: import java.lang.Math; public class Kruh { public float polomer ; public float Obvod() { return 2 * Math.Pi * polomer; } public static void main(void) { Kruh k; k = new Kruh(); k.polomer = 3; System.out.print(“Obvod: “); System.out.print(k.Obvod()); } }

ActiveX • binární komponenta vkládaná do stránky podobně jako Java applet • binární → funguje pouze ve 32bitových Windows • vytvořit ji lze v libovolném jazyce VisualBasic, Visual C++, Delphi, … • po spuštění je již ActiveX komponenta pánem počítače

• komponenta není nijak odstíněná od OS • komponentu lze opatřit digitálním podpisem • uživatel se musí rozhodnout, zda tvůrci ActiveX komponenty důvěřuje • v historii již bylo mnoho případů závažného porušení bezpečnosti a soukromí pomocí ActiveX komponent – převody pomocí homebankingového programu, změna parametrů telefonického připojení apod. • vložení do html pomocí