tvorba webových stránek

Tvorba webových stránekTvorba webových stránek

RNDr. Pavel Vlach, Ph.D.RNDr. Pavel Vlach, Ph.D.

• WWW WWW – – World Wide WebWorld Wide Web - nejrozšířenější služba na - nejrozšířenější služba na internetuinternetu

• na serveru jsou vystaveny na serveru jsou vystaveny webové stránky webové stránky • webová stránkawebová stránka – multimediální dokumenty (text, – multimediální dokumenty (text,

grafika, hudba, video) doplněné o grafika, hudba, video) doplněné o hypertexthypertext – odkaz – odkaz na jiné místo webuna jiné místo webu

• základní www stránky jsou tvořeny pomocí jazyka základní www stránky jsou tvořeny pomocí jazyka HTML (HyperText Markup Language)HTML (HyperText Markup Language)

• stránky jsou zobrazovány ve webovém prohlížeči stránky jsou zobrazovány ve webovém prohlížeči (nejčastější Mozilla, Firefox, MS Explorer)(nejčastější Mozilla, Firefox, MS Explorer)

Používané „technologie“Používané „technologie“

• HTLM (budeme se učit)HTLM (budeme se učit)• CSS (budeme se učit)CSS (budeme se učit)• dHTML – JavaSript (stručně se budeme učit v dHTML – JavaSript (stručně se budeme učit v

příkladech)příkladech)• Flash – zmíníme (jiný kurz)Flash – zmíníme (jiný kurz)• PHP (asp….) zmíníme (jiný kurz)PHP (asp….) zmíníme (jiný kurz)

HTMLHTML

• základní jazyk pro tvorbu www stránekzákladní jazyk pro tvorbu www stránek• prochází historickým vývojem prochází historickým vývojem • specifikace druhu HTML je důležitá pro specifikace druhu HTML je důležitá pro

správné zobrazenísprávné zobrazení stránkystránky (dnes nejčastěji (dnes nejčastěji html 4.01 Strict, případně xhtml, starší 4.01 html 4.01 Strict, případně xhtml, starší 4.01 Transitional)Transitional)

HTMLHTML

• použití jazyka je poměrně variabilní × existuje použití jazyka je poměrně variabilní × existuje množství různých prohlížečůmnožství různých prohlížečů

• => => pro validní zobrazenípro validní zobrazení (v postatě (v postatě garantované zobrazení pro všechny garantované zobrazení pro všechny prohlížeče) je třeba dodržovat prohlížeče) je třeba dodržovat striktní striktní pravidlapravidla

• čím čím vyšší specifikacevyšší specifikace HTML, tím HTML, tím přísnější přísnější pravidlapravidla použití použití

HTMLHTML• základním nástrojem práce v html jsou strukturální a základním nástrojem práce v html jsou strukturální a

formátovací značky zvané formátovací značky zvané tagytagy • tagy umožňují vytvářet strukturu dokumentu a také jeho tagy umožňují vytvářet strukturu dokumentu a také jeho

formátování, tzn. pomocí HTML lze vytvořit obsah i formu formátování, tzn. pomocí HTML lze vytvořit obsah i formu dokumentudokumentu

• ALE – v současné době se volá po „čistotě“ html kódu, tj. po ALE – v současné době se volá po „čistotě“ html kódu, tj. po oddělení obsahu a formy – výhodou je, libovolná změna oddělení obsahu a formy – výhodou je, libovolná změna obsahu při zachování formy,nebo naopak nové formátování – obsahu při zachování formy,nebo naopak nové formátování – změna celého vzhledu stránek bez zasahování do obsahuzměna celého vzhledu stránek bez zasahování do obsahu

• v současné době preferujeme tedy použití HTML v současné době preferujeme tedy použití HTML pouze na pouze na vytváření obsahuvytváření obsahu, tj. struktury dokumentu, tj. struktury dokumentu

• na vzhled tj. formátování dokumentu používáme CSSna vzhled tj. formátování dokumentu používáme CSS

CSSCSS

• Cascade Styles SheetCascade Styles Sheet• soubory tabulek, které definují formát soubory tabulek, které definují formát

struktur definovaných v HTML dokumentustruktur definovaných v HTML dokumentu• mohou být součástí HTML dokumentu nebo mohou být součástí HTML dokumentu nebo

být v externím textovém souboru (a pak mají být v externím textovém souboru (a pak mají svůj správný význam)svůj správný význam)

Java ScriptJava Script

• scriptovací jazykscriptovací jazyk• dynamické HTML – poskytuje vyšší míru dynamické HTML – poskytuje vyšší míru

interaktivityinteraktivity• pohyblivá menu, kalendář, rozbalovací pohyblivá menu, kalendář, rozbalovací

menu…menu…• scripty se vykonávají na straně prohlížečescripty se vykonávají na straně prohlížeče

FlashFlash

• většinou animace, bannery, hry a další většinou animace, bannery, hry a další webové aplikace, ale i celé webové stránkywebové aplikace, ale i celé webové stránky

• výhodyvýhody– perfektní grafické rozhraníperfektní grafické rozhraní– neomezená interaktivitaneomezená interaktivita

• nevýhodynevýhody– není přístupné standardním službám není přístupné standardním službám – není možnost hypertextunení možnost hypertextu– ne vyhledávání webových aplikací uvnitř ne vyhledávání webových aplikací uvnitř

flashových souborů)flashových souborů)

PHP (asp)PHP (asp)

• scriptovací jazyk scriptovací jazyk • scripty se vykonávají na serveruscripty se vykonávají na serveru• webové aplikace (formuláře, ankety, ale i webové aplikace (formuláře, ankety, ale i

grafy, diáře)grafy, diáře)• spolupráce s databází MySQL a dalšímispolupráce s databází MySQL a dalšími• nutnost webového serverunutnost webového serveru

VýukaVýuka

1. HTML1. HTML

tagytagy

• tagy jsou párové značky, které umožňují tagy jsou párové značky, které umožňují strukturovat (i formátovat) html dokumentstrukturovat (i formátovat) html dokument

• tagy mají následující strukturu:tagy mají následující strukturu:– počáteční tagpočáteční tag <název tagu><název tagu> – ukončovací tagukončovací tag </název tagu></název tagu>– mezi počátečním a ukončovacím tagem je obsah mezi počátečním a ukončovacím tagem je obsah

(text)(text)

struktura HTML dokumentustruktura HTML dokumentuvytvářená stránka

specifikace dokumentu <!DOCTYPE>

dokument <html>

hlavička dokumentu <head>

meta značky <meta>

tělo dokumentu <body>

titul stránky <title>

odkazy <link>

formát html

html dokument - shrnutíhtml dokument - shrnutí

• má tyto 4 nezbytné části:má tyto 4 nezbytné části:1. specifikaci dokumentu1. specifikaci dokumentu

– tag <!DOCTYPE>tag <!DOCTYPE>2. označení dokumentu2. označení dokumentu

– tag <html> </html>tag <html> </html>3. označení hlavičky3. označení hlavičky

– tag <head></head>tag <head></head>4. označení těla dokumentu4. označení těla dokumentu

– tag <body> </body>tag <body> </body>

tagy pro strukturování textutagy pro strukturování textu

• nadpisnadpis– 6 úrovní značek (tagů) pro nadpisy6 úrovní značek (tagů) pro nadpisy– <h1><h1>zde bude textzde bude text</h1></h1>– <h2></h2><h2></h2>– <h3></h3><h3></h3>– <h4></h4><h4></h4>– <h5></h5><h5></h5>– <h6></h6><h6></h6>

• řádkový prvekřádkový prvek<span><span> zde je obsah prvku zde je obsah prvku </span></span>

• odstavcový prvek 1odstavcový prvek 1<div><div> zde je obsah prvku zde je obsah prvku </div></div>

• odstavcový prvek 2odstavcový prvek 2<p><p> zde je obsah prvku zde je obsah prvku </p></p>



• seznam 1seznam 1– seznam (výčet s odrážkami) se značí tagem seznam (výčet s odrážkami) se značí tagem <ul><ul> výčet výčet

položek položek </ul></ul>– jednotlivé položky se označují tagem jednotlivé položky se označují tagem <li><li> (většinou (většinou

nedoplňujeme koncový tag nedoplňujeme koncový tag </li>)</li>)• seznam 2seznam 2

– seznam (číslovaný) se značí tagem seznam (číslovaný) se značí tagem <ol><ol> výčet položek výčet položek </ol></ol>– jednotlivé položky se označují tagem jednotlivé položky se označují tagem <li><li>

• seznam 3seznam 3– seznam (definiční seznam) se značí tagem seznam (definiční seznam) se značí tagem <dl><dl> výčet výčet

položek položek </dl></dl>– jednotlivé položky se označují tagem jednotlivé položky se označují tagem <dt><dt> a jejich a jejich

vysvětlení vysvětlení <dd><dd>

tagy pro formátování textu I.tagy pro formátování textu I.

• jejich použití je i nových specifikacích validní – jejich použití je i nových specifikacích validní – doporučuji jejich používánídoporučuji jejich používání

<cite><cite> pro citace (normálně kurzíva) pro citace (normálně kurzíva)<pre><pre> pro ukázky programového kódu (normálně písmem pro ukázky programového kódu (normálně písmem

Courier)Courier)<em><em> pro zvýraznění (normálně kurzíva) pro zvýraznění (normálně kurzíva)<strong><strong> pro zvýrazněné (normálně tučně) pro zvýrazněné (normálně tučně)

• ostatní viz ostatní viz www.kosek.czwww.kosek.cz (nepoužívají se tolik)(nepoužívají se tolik)• vzhled těchto tagů lze měnit pomocí CSSvzhled těchto tagů lze měnit pomocí CSS

http://www.kosek.cz/

tagy pro formátování textu II.tagy pro formátování textu II.

• jejich použití do budoucna jejich použití do budoucna nebude nebude v nových specifikacích validní – v nových specifikacích validní – nedoporučuji jejich používání!!nedoporučuji jejich používání!!

<b><b> tučně tučně<i><i> kurzíva kurzíva<big><big> větší písmo větší písmo<small><small> menší písmo menší písmo<tt><tt> neproporcionální písmo (courier) neproporcionální písmo (courier)<u><u> podškrtnuté písmo podškrtnuté písmo<strike><strike> přeškrtnuté písmo přeškrtnuté písmo<sub><sub> dolní index dolní index<sup><sup> spodní index spodní index

• lze měnit jejich obsah pomocí CSS ale není to logické × CSS plně lze měnit jejich obsah pomocí CSS ale není to logické × CSS plně nahrazuje použirí těchto tagůnahrazuje použirí těchto tagů

• oblíbené je používání tagu <br />, který způsobí odřádkování.oblíbené je používání tagu <br />, který způsobí odřádkování.• tento tag je vždy nahraditelný!!! Pokud možno NEPOUŹÍVATtento tag je vždy nahraditelný!!! Pokud možno NEPOUŹÍVAT

úkolúkol

• vytvořte jednoduchý html dokument, který vytvořte jednoduchý html dokument, který bude:bude:– respektovat správnou strukturu html dokumentu respektovat správnou strukturu html dokumentu

(tzn. bude mít všechny nutné náležitosti)(tzn. bude mít všechny nutné náležitosti)– obsahovat 2 nadpisy různé úrovněobsahovat 2 nadpisy různé úrovně– obsahovat jeden seznamobsahovat jeden seznam– tři odstavce textutři odstavce textu– použijte „správné“ tagy pro formátovánípoužijte „správné“ tagy pro formátování

odkazyodkazy

• odkazy (hypertextové odkazy) umožní odkazy (hypertextové odkazy) umožní kliknutím na odkaz:kliknutím na odkaz:

– přesunout se na jiné místo v dokumentupřesunout se na jiné místo v dokumentu– spustit jiný html dokumentspustit jiný html dokument– spustit jiný soubor (video, zvuk, obrázek….)spustit jiný soubor (video, zvuk, obrázek….)

• struktura hypertextového odkazu:struktura hypertextového odkazu:• <a href=“URL“><a href=“URL“>text nebo objekt, na který se text nebo objekt, na který se

bude klikatbude klikat</a></a>• URL je adresa na webu nebo pevném diskuURL je adresa na webu nebo pevném disku

– http://www.blovice.czhttp://www.blovice.cz– ftp://www.blovice.czftp://www.blovice.cz– mailto:[email protected]:[email protected]– mojevideo.mpegmojevideo.mpeg– obrazky/mujobzar.jpgobrazky/mujobzar.jpg

odkazyodkazy

http://www.blovice.cz/

ftp://www.blovice.cz/

mailto:[email protected]

odkazyodkazy

• URL může být také URL může být také návěštínávěští – určitý bod v dokumentu – určitý bod v dokumentu• použitím návěští se přesuneme v dokumentu na použitím návěští se přesuneme v dokumentu na

místo označené návěštímmísto označené návěštím• návěští se označuje značkou návěští se označuje značkou ##

• návěští (místo, kam se odkazem přesuneme v návěští (místo, kam se odkazem přesuneme v dokumentu) se musí specifikovat:dokumentu) se musí specifikovat:<a name=„navesti“><a name=„navesti“>SEMSEM</a></a>

• odkaz potom bud vypadat:odkaz potom bud vypadat:<a href=„#navesti“><a href=„#navesti“>přesun TAMpřesun TAM</a></a>

obrázkyobrázky

• obrázky vkládáme pomocí taguobrázky vkládáme pomocí tagu<img src=„URL“ alt=„popis“ height=„výška“ width =„šířka“ <img src=„URL“ alt=„popis“ height=„výška“ width =„šířka“ align=zarovnání />align=zarovnání />

• kde URL je adresa na obrázek (na webu na disku)kde URL je adresa na obrázek (na webu na disku)– http://www.blovice.cz/logo.jpghttp://www.blovice.cz/logo.jpg– obrazky/esf.gifobrazky/esf.gif

• altalt je popis obrázku (po najetí kurzoru se objeví text, který je popis obrázku (po najetí kurzoru se objeví text, který obrázek popisuje – opodstatěné dříve při pomalém internetu, obrázek popisuje – opodstatěné dříve při pomalém internetu, vhodné – při nenahrání obrázku je aspoň k dispozici text)vhodné – při nenahrání obrázku je aspoň k dispozici text)

• heigthheigth aa widthwidth lze uvést v bodech nebo procentech – nemusí lze uvést v bodech nebo procentech – nemusí být uvedeny, pak se obrázek zobrazí ve své skutečné velikostibýt uvedeny, pak se obrázek zobrazí ve své skutečné velikosti

• alignalign je zarovnání vůči textu – tři možnosti – top, center, bottomje zarovnání vůči textu – tři možnosti – top, center, bottom

http://www.blovice.cz/logo.jpg

úkolúkol• vytvořte 4 html dokumentyvytvořte 4 html dokumenty• index.htmlindex.html

– bude obsahovat obrázek jako logo, název stránky, jméno autora a bude obsahovat obrázek jako logo, název stránky, jméno autora a krátký popis (2-3 odstavce)krátký popis (2-3 odstavce)

– odkazy (menu) na 3 následující stránkyodkazy (menu) na 3 následující stránky• mypage.htmlmypage.html

– bude obsahovat název stránky a informace (3 odstavce) o Vásbude obsahovat název stránky a informace (3 odstavce) o Vás– odkazy (menu) na 3 následující stránkyodkazy (menu) na 3 následující stránky

• mypicture.htmlmypicture.html– bude obsahovat 4 obrázky bude obsahovat 4 obrázky (stáhněte z internetu)(stáhněte z internetu)– odkazy (menu) na 3 následující stránkyodkazy (menu) na 3 následující stránky

• kontakt.htmlkontakt.html– bude obsahovat název stránky a informace o telefonu adrese, bude obsahovat název stránky a informace o telefonu adrese,

emailu atd.. ve formě seznamuemailu atd.. ve formě seznamu– odkazy (menu) na 3 následující stránkyodkazy (menu) na 3 následující stránky

Tabulky a jejich formátováníTabulky a jejich formátování

• tabulky vkládáme pomocí tagu tabulky vkládáme pomocí tagu <table><table> obsah obsah tabulky tabulky </table> </table>

• jednotlivé řádky vkládáme pomocí tagu jednotlivé řádky vkládáme pomocí tagu <tr><tr>

• jednotlivé sloupce vkládáme pomocí tagu jednotlivé sloupce vkládáme pomocí tagu <td><td>

• tabulka o 2 řádcích a 3 sloupcích tedy bude vypadat takto:tabulka o 2 řádcích a 3 sloupcích tedy bude vypadat takto:

<table><table> <!-- definice tabulky<!-- definice tabulky<tr><tr> první řádek první řádek

<td><td> první buňka první buňka <td><td> druhá buňka druhá buňka

<td><td> třetí buňka třetí buňka

<tr><tr> první řádek první řádek <td><td> první buňka první buňka

<td><td> druhá buňka druhá buňka <td><td> třetí buňka třetí buňka

</table></table>

tabulkytabulky

úkolúkol

• vytvořte stránku s několika tabulkamivytvořte stránku s několika tabulkami• používejte slučování polí (řádků a sloupců) používejte slučování polí (řádků a sloupců) • použijte změnu velikosti tabulkypoužijte změnu velikosti tabulky

komentáře v htmlkomentáře v html

• hojně vkládáme komentáře – zpřehledňují hojně vkládáme komentáře – zpřehledňují kód, po delší době umožňují vrátit se ke kódukód, po delší době umožňují vrátit se ke kódu

-->

úkolúkol

• vytvořte svou první opravdovou rozsáhlejší vytvořte svou první opravdovou rozsáhlejší stránku se potřebnou strukturou, obsahem stránku se potřebnou strukturou, obsahem dle zájmudle zájmu

• minimálně 4 stránky s použitím prvků minimálně 4 stránky s použitím prvků <p> <p> <div> <span> <a><div> <span> <a>

• rozumně využívat formátovací tagyrozumně využívat formátovací tagy• pod nadpisem bude menu shodné pro pod nadpisem bude menu shodné pro

všechny stránkyvšechny stránky• první oficiální výstup kurzuprvní oficiální výstup kurzu

VýukaVýuka

2. CSS2. CSS

doporučená literaturadoporučená literatura

• CSS – Kaskádové stylyCSS – Kaskádové styly• kompletní průvodcekompletní průvodce

• Petr Staníček (pixy)Petr Staníček (pixy)

• www.knihy.cpress.czwww.knihy.cpress.cz• cena cca 190 Kčcena cca 190 Kč• k dostání všude (i hypermarkety)k dostání všude (i hypermarkety)

http://www.knihy.cpress.cz/

co to je CSSco to je CSS

• tabulky (správně externí) se styly – formáty prvků tabulky (správně externí) se styly – formáty prvků definovaných v htmldefinovaných v html

• prvky jsou všechny pojmenované tagyprvky jsou všechny pojmenované tagy• pojmenování se provádí pomocí doplňků v tagu pojmenování se provádí pomocí doplňků v tagu

class (třída)class (třída) a a id (unikátní kód)id (unikátní kód)

• pojmenování tagu pak vypadá takto:pojmenování tagu pak vypadá takto:<div class=“mujodstavec“><div class=“mujodstavec“><a href=„URL“ class=“odkaz1“><a href=„URL“ class=“odkaz1“><p id=“uvodni_odstavec“ ><p id=“uvodni_odstavec“ >

připojení stylů k html dokumentupřipojení stylů k html dokumentu

1. definice stylu přímo u příslušného tagu1. definice stylu přímo u příslušného tagu

<div <div style= style= “definice stylu““definice stylu“ >>obsah odstavcového prvkuobsah odstavcového prvku

</div></div>


2. definice stylu v tagu <STYLE>2. definice stylu v tagu <STYLE>

<style> ..definice stylů.. </style><style> ..definice stylů.. </style>

<<stylestyle typetype="text/css">="text/css"> hh1 { color: blue }1 { color: blue }

</</stylestyle>>


3. pomocí externí tabulku stylů – DOPORUČUJI3. pomocí externí tabulku stylů – DOPORUČUJI pomocí tagu pomocí tagu <link><link> v hlavičce dokumentu v hlavičce dokumentu

<link rel=stylesheet type="text/css" <link rel=stylesheet type="text/css" href="URL tabulky stylů">href="URL tabulky stylů">

vlastnosti stylů: vlastnosti stylů: kaskádakaskádastyl dokumentu <body>

styl odstavců <div>

styl odkazů <a>

styl řádkových prvků <span>

styl odstavců třídy „odstavec1“<div class=„odstavec1“>

styl odstavců třídy „odstavec2“<div class=„odstavec2“>

styl odkazů třídy „moje odkazy“<a class=„mojeodkazy“

styl nadpisů <h>

styl nadpisu <h2>

vlastnosti stylů: vlastnosti stylů: dědičnostdědičnost

• v rámci kaskády se vlastnosti prvků dědív rámci kaskády se vlastnosti prvků dědí• vlastnosti nadřazeného prvku se přenáší vlastnosti nadřazeného prvku se přenáší

podřazenému prvku (logické)podřazenému prvku (logické)• => nemusí se znovu definovat=> nemusí se znovu definovat

vlastnosti stylů: vlastnosti stylů: odolnostodolnost

• ve smyslu ignorance chyb ve smyslu ignorance chyb • je-li zápis stylu syntakticky (formálně) je-li zápis stylu syntakticky (formálně)

špatný, nehlásí se žádná chyba, jen se daný špatný, nehlásí se žádná chyba, jen se daný styl neprovedestyl neprovede

struktura tabulky stylůstruktura tabulky stylů• je velmi jednoducháje velmi jednoduchá• textový soubor s koncovkou .csstextový soubor s koncovkou .css• obsahuje styly pro definované prvky v tomto formátů:obsahuje styly pro definované prvky v tomto formátů:

názevprvku {názevprvku {vlastnost1: hodnota;vlastnost1: hodnota;vlastnost2: hodnota;vlastnost2: hodnota;

}}např:např:

div {div { //definice pro všechny prvky typu div//definice pro všechny prvky typu divcolor:red;color:red; //barva písma//barva písmafont-size: 12px;font-size: 12px; //velikost písma//velikost písma

}}

.mujodstavec {.mujodstavec { //. znamená styl pro třídu (class)//. znamená styl pro třídu (class)font-weight: boldfont-weight: bold;; //zvýraznění - tučně//zvýraznění - tučněcolor:#122345;color:#122345; //barva písma v hexadec.kódu//barva písma v hexadec.kódu

}}#zvyrazneny {#zvyrazneny { // unikátní selektor id// unikátní selektor id

font-variation: small-caps;font-variation: small-caps;{{

textové stylytextové styly

styly pro formátování textu s styly pro formátování textu s libovolném prvku – všechny libovolném prvku – všechny možnosti textového editorumožnosti textového editoru

• font-familyfont-family• font-stylefont-style• font-variantfont-variant• font-weightfont-weight• font-sizefont-size• sdružená vlastnost fontsdružená vlastnost font

• letter-spacingletter-spacing• word-spacingword-spacing• text-decorationtext-decoration• text-aligntext-align• text-intendtext-intend• line-heightline-height• vertical-alignvertical-align• colorcolor

• background-colorbackground-color• background-imagebackground-image• background-positionbackground-position• sdružená vlastnost backgroundsdružená vlastnost background

font-family font-family

• vlastnost, která určuje použitý fontvlastnost, která určuje použitý font• většinou se definuje od konkrétních fontů k většinou se definuje od konkrétních fontů k

obecným rodinám fontůobecným rodinám fontů

font-family: „Arial CE“, „Helvetica CE“, sans-sefiffont-family: „Arial CE“, „Helvetica CE“, sans-sefiffont-family: „Times CE“, „Times New Roman“, seriffont-family: „Times CE“, „Times New Roman“, serif

font-stylefont-style

• vlastnost, která určuje volbu normálního vlastnost, která určuje volbu normálního nebo skloněného písmanebo skloněného písma

font-style: normal;font-style: normal; //normální písmo//normální písmofont-style: italic;font-style: italic; //kurzíva//kurzíva

font-variantfont-variant

• vlastnost, která volí mezi kapitálkami a normálním vlastnost, která volí mezi kapitálkami a normálním písmempísmem

font-variant: normal; font-variant: normal; //normální písmo//normální písmofont-variant: small-caps;font-variant: small-caps; //kapitálky//kapitálky

font-weightfont-weight

• vlastnost, která určuje tloušťku písmavlastnost, která určuje tloušťku písma• hodnoty se udávají slovně (normal, bold, bolder, hodnoty se udávají slovně (normal, bold, bolder,

lighter) nebo číselně (100 - 900)lighter) nebo číselně (100 - 900)

font-weight: bold; font-weight: bold; //tučné písmo//tučné písmofont-weight: 100; font-weight: 100; //velmi tenké písmo//velmi tenké písmo

font-sizefont-size• vlastnost, která určuje velikost písmavlastnost, která určuje velikost písma• doporučuje se definovat absolutní velikost slovně:doporučuje se definovat absolutní velikost slovně:• xx-smal, x-small, small, mediumxx-smal, x-small, small, medium (odpovídá písmu velikosti 14 (odpovídá písmu velikosti 14

bodů a nadpisu úrovně h4), bodů a nadpisu úrovně h4), largelarge (h3), (h3), x-largex-large (h2), (h2), xx-largexx-large (h1) (h1)• definovat lze relativně podle nadřazeného prvku hodnotami v definovat lze relativně podle nadřazeného prvku hodnotami v

procentechprocentech nebo nebo emem (udává velikost písma nadřazeného prvku) (udává velikost písma nadřazeného prvku)• lze definovat absolutně velikostí písma – nedoporučuje se – lze definovat absolutně velikostí písma – nedoporučuje se –

12px, 20px12px, 20px

• font-size: x-small;font-size: x-small; //velikost písma asi 10,5 bodů//velikost písma asi 10,5 bodů• font-size: 1,5em;font-size: 1,5em; //velikost 150% k nadřaz. prvku//velikost 150% k nadřaz. prvku• font-size:150%;font-size:150%; //stejné jako v předchozím případě//stejné jako v předchozím případě• font-size: 12px;font-size: 12px; //velikost písma 12 bodů//velikost písma 12 bodů

font – sdružená vlastnostfont – sdružená vlastnost

• umožňuje definovat všechny uvedené vlastnosti umožňuje definovat všechny uvedené vlastnosti najednou (jednotlivé vlastnosti se oddělují mezerounajednou (jednotlivé vlastnosti se oddělují mezerou

• poslední povinné údaje jsou velikost písma a poslední povinné údaje jsou velikost písma a znaková sadaznaková sada

font: light italic small-caps x-large „Arial“, sans-serif;font: light italic small-caps x-large „Arial“, sans-serif; // vzhled písma: bezpatkové písmo, tenké, kurzíva, kapitálky a // vzhled písma: bezpatkové písmo, tenké, kurzíva, kapitálky a

velkévelké

úkolúkol

• vytvořte krátký html dokument s jedním nadpisem a čtyřmi vytvořte krátký html dokument s jedním nadpisem a čtyřmi odstavci (2.-4. odstavec bude mít unikátní id)odstavci (2.-4. odstavec bude mít unikátní id)

• připojte (pomocí tagu <link>) tabulku stylů s názvem mujstylpřipojte (pomocí tagu <link>) tabulku stylů s názvem mujstyl• vytvořte v PSPadu tabulku stylů s názvem mujstylvytvořte v PSPadu tabulku stylů s názvem mujstyl• definujte styl pro nadpis pomocí sdružené vlastnosti fontdefinujte styl pro nadpis pomocí sdružené vlastnosti font• definujte styl pro všechny odstavce (tj. pro skupinu prvků definujte styl pro všechny odstavce (tj. pro skupinu prvků

<div>) pomocí sdružené vlastnosti font<div>) pomocí sdružené vlastnosti font• pozměňte styly jednotlivých odstavců definovaných selektory pozměňte styly jednotlivých odstavců definovaných selektory

id pomocí uvedených vlastnostíid pomocí uvedených vlastností

letter-spacingletter-spacing

• vlastnost, která upravuje velikost mezer mezi vlastnost, která upravuje velikost mezer mezi jednotlivými písmeny v textujednotlivými písmeny v textu

letter-spacing:0.5em;letter-spacing:0.5em;//mezera mezi písmeny větší o 50% šířky písmene//mezera mezi písmeny větší o 50% šířky písmene

letter-spacing:75%;letter-spacing:75%;//mezera mezi písmeny větší o 75% šířky písmene//mezera mezi písmeny větší o 75% šířky písmene

letter-spacing:20px;letter-spacing:20px;//mezera mezi písmeny větší o 20 bodů//mezera mezi písmeny větší o 20 bodů

word-spacingword-spacing

• vlastnost, která upravuje velikost mezer mezi vlastnost, která upravuje velikost mezer mezi jednotlivými slovy v textujednotlivými slovy v textu

word-spacing:0.5em;word-spacing:0.5em;//mezera mezi slovy větší o 50% šířky písmene//mezera mezi slovy větší o 50% šířky písmene

word-spacing:75%;word-spacing:75%;//mezera mezi slovy větší o 75% šířky písmene//mezera mezi slovy větší o 75% šířky písmene

word-spacing:20px;word-spacing:20px;//mezera mezi slovy větší o 20 bodů//mezera mezi slovy větší o 20 bodů

text-decorationtext-decoration

• vlastnost, která definuje dekorace textuvlastnost, která definuje dekorace textu• dostupné dekorace jsou: dostupné dekorace jsou:

– podtržení (podtržení (underlineunderline), nadtržení (), nadtržení (overlineoverline), ), přeškrtnutí (přeškrtnutí (line-throughline-through))

text-decoration: underline;text-decoration: underline;// text v tomto prvku bude podtržený// text v tomto prvku bude podtržený

text-decoration: none;text-decoration: none;// text v tomto prvku nebude nijak dekorovaný// text v tomto prvku nebude nijak dekorovaný

text-aligntext-align

• vlastnost, která určuje způsob zarovnávání textu v vlastnost, která určuje způsob zarovnávání textu v prvkuprvku

• volby jsou standardní:volby jsou standardní:doleva (left), doprava (right), na střed (center), do bloku doleva (left), doprava (right), na střed (center), do bloku

(justify)(justify)

text-align: right;text-align: right;//text tohoto prvku bude zarovnán doprava//text tohoto prvku bude zarovnán doprava

text-indenttext-indent

• vlastnost, která určuje odsazení prvního řádkuvlastnost, která určuje odsazení prvního řádku• je možno nastavit v procentech šířky okna, relativně je možno nastavit v procentech šířky okna, relativně

vzhledem k velikosti písma nebo pevně v bodechvzhledem k velikosti písma nebo pevně v bodech

text-indent: 20%;text-indent: 20%;//odsazení prvního řádku o 20% velikosti okna//odsazení prvního řádku o 20% velikosti okna

text-indent: 2em;text-indent: 2em;//odsazení prvního řádku o dvojnásobnou šířku //odsazení prvního řádku o dvojnásobnou šířku znaku (m)znaku (m)

text-indent: 20px;text-indent: 20px;//odsazení prvního řádku o 20 obrazovkových bodů//odsazení prvního řádku o 20 obrazovkových bodů

line-heightline-height

• vlastnost, která určuje výšku řádkyvlastnost, která určuje výšku řádky• lze nastavit relativně podle velikosti písma neb o v lze nastavit relativně podle velikosti písma neb o v

bodechbodech

line-height: 1.3em;line-height: 1.3em;//výška řádky 1.3×výška písma//výška řádky 1.3×výška písma

line-height: 150%;line-height: 150%;//řádkování 1,5//řádkování 1,5

line-height: 16px;line-height: 16px;//výška řádky 16 obrazovkových bodů//výška řádky 16 obrazovkových bodů

colorcolor

• vlastnost, která určuje barvu textuvlastnost, která určuje barvu textu• určená slovněurčená slovně• black, magenta, blue, green, yellow, grayblack, magenta, blue, green, yellow, gray• určená hexadecimálně (v grafickém editoru k přečtení) nebo určená hexadecimálně (v grafickém editoru k přečtení) nebo

http://wellstyled.com/tools/http://wellstyled.com/tools/

color: blue;color: blue; //barva textu modrá//barva textu modrá

color:#FFFF80;color:#FFFF80; //barva textu písková//barva textu písková

http://wellstyled.com/tools/

úkolúkol

• vytvořte krátký html dokument se třemi odstavci vytvořte krátký html dokument se třemi odstavci <p>(<p>(každý odstavec každý odstavec má unikátní id - “má unikátní id - “odstavec1odstavec1“, „“, „odstavec2odstavec2“, „“, „odstavec3odstavec3“)“)

• v textu použijte zvýraznění <em> tří typů:v textu použijte zvýraznění <em> tří typů: 1.<em class=„prvni“>1.<em class=„prvni“>2.<em class=„druhy“>2.<em class=„druhy“>3.<em class=„treti“>3.<em class=„treti“>

• připojte (pomocí tagu <link>) tabulku stylů s názvem mujstyl2připojte (pomocí tagu <link>) tabulku stylů s názvem mujstyl2• vytvořte v PSPadu tabulku stylů s názvem mujstyl2vytvořte v PSPadu tabulku stylů s názvem mujstyl2• ponechejte výchozí styl pro odstavce (nic nedefinujte, použije se ponechejte výchozí styl pro odstavce (nic nedefinujte, použije se

přednastavený styl v prohlížeči)přednastavený styl v prohlížeči)• pro unikátní odstavce definujte různou barvu, mezery mezi slovy, pro unikátní odstavce definujte různou barvu, mezery mezi slovy,

zarovnávání, odsazení prvního řádku a výšku řádku.zarovnávání, odsazení prvního řádku a výšku řádku.• definujte styly pro zvýraznění em „prvni“, „druhy“, treti“ (např. jiné definujte styly pro zvýraznění em „prvni“, „druhy“, treti“ (např. jiné

proložení písmen, podškrtnutí, jiná barva, skoln, tučnost…)proložení písmen, podškrtnutí, jiná barva, skoln, tučnost…)

background-colorbackground-color

• vlastnost, která určuje barvu pozadívlastnost, která určuje barvu pozadí

background-color: blue;background-color: blue;

//barva pozadí modrá//barva pozadí modrá

background-color: #fe6b1cbackground-color: #fe6b1c //barva oranžová v hexadecimálním kódu//barva oranžová v hexadecimálním kódu

background-imagebackground-image

• vlastnost, která nahrává obrázek na pozadí vlastnost, která nahrává obrázek na pozadí prvku specifikovaný v urlprvku specifikovaný v url

background-image: url(„pozadi.jpg“);background-image: url(„pozadi.jpg“);// na pozadí nahraje obrázek v kořenovém adresáři se // na pozadí nahraje obrázek v kořenovém adresáři se jménem pozadi.jpgjménem pozadi.jpg

backgroung-image: url(„picture/back.gif“);backgroung-image: url(„picture/back.gif“);//na pozadí nahraje obrázek ze složky picture s názvem //na pozadí nahraje obrázek ze složky picture s názvem back.gifback.gif

background-repeatbackground-repeat

• vlastnost, která určuje zda se nahraný obrázek bude vlastnost, která určuje zda se nahraný obrázek bude opakovat nebo ne (je-li obrázek menší než zvolený opakovat nebo ne (je-li obrázek menší než zvolený prvek)prvek)

• volby: repeat, repeat-x,repeat-y,no-repeatvolby: repeat, repeat-x,repeat-y,no-repeat

background-repeat: no-repeat;background-repeat: no-repeat;//obrázek nahraný na pozadí prvku se nebude opakovat//obrázek nahraný na pozadí prvku se nebude opakovat

background-repeat: repeat-x;background-repeat: repeat-x;//obrázek nahraný na pozadí prvku se (pokud je velikost prvku //obrázek nahraný na pozadí prvku se (pokud je velikost prvku

větší než velikost obrázku) bude opakovat v x-ové větší než velikost obrázku) bude opakovat v x-ové souřadnici (několik obrázků v řádce za sebou)souřadnici (několik obrázků v řádce za sebou)

background-positionbackground-position

• vlastnost, která určuje pozici nahrání obrázku (v podstatě zarovnávání) na vlastnost, která určuje pozici nahrání obrázku (v podstatě zarovnávání) na pozadí prvkupozadí prvku

• v procentech (0% 0% znamená, že levý horní roh obrázku bude zarovnán s v procentech (0% 0% znamená, že levý horní roh obrázku bude zarovnán s levým horním rohem prvku (automaticky přednastaveno), 100% 100% levým horním rohem prvku (automaticky přednastaveno), 100% 100% znamená, že pravý dolní roh obrázku bude zarovnán s pravým dolním rohem znamená, že pravý dolní roh obrázku bude zarovnán s pravým dolním rohem prvku) prvku)

• body (20px 10px – posun obrázku o 20 bodů od kraje prvku v ose x a 10 body (20px 10px – posun obrázku o 20 bodů od kraje prvku v ose x a 10 bodů v ose y)bodů v ose y)

• slovně – top center bottom a left center rightslovně – top center bottom a left center right

background-position: 50% 10%;background-position: 50% 10%;//zarovná obrázek na střed stránky a 10% šířky prvku //zarovná obrázek na střed stránky a 10% šířky prvku od od horního okrajehorního okrajebackground-position: left bottom;background-position: left bottom;//zarovná obrázek doleva dolů//zarovná obrázek doleva dolů

backgroundbackground

• sdružená vlastnostsdružená vlastnost• v libovolném pořadí definujeme jednotlivé atributy, v libovolném pořadí definujeme jednotlivé atributy,

oddělujeme je mezeramioddělujeme je mezerami• pokud neuvedeme některý atribut je přednastaven pokud neuvedeme některý atribut je přednastaven

automatický automatický

background: url(„pozadi.gif“) no-repeat background: url(„pozadi.gif“) no-repeat top center;top center;//nahraje na pozadí prvku obrázek s názvem pozadi.gif, //nahraje na pozadí prvku obrázek s názvem pozadi.gif,

zarovná jej nahoru doprostřed a obrázek se zarovná jej nahoru doprostřed a obrázek se neopakujeneopakuje

pseudotřídypseudotřídy

dynamické a jiné prvky, které nejsou součástí html dynamické a jiné prvky, které nejsou součástí html a přidávají další obsah nebo umožňují specifické a přidávají další obsah nebo umožňují specifické

formátování části jiného prvkuformátování části jiného prvku

:first-letter:first-letter

• pseudoprvek, který umožňuje separátně formátovat první pseudoprvek, který umožňuje separátně formátovat první písmeno jiného prvkupísmeno jiného prvku

.prvni {.prvni {font-family: sans-serif;font-family: sans-serif;

}}// definuje bezpatkové písmo pro prvky třídy „prvni“// definuje bezpatkové písmo pro prvky třídy „prvni“

.prvni:first-letter {.prvni:first-letter {font-family: Verdana sans-serif;font-family: Verdana sans-serif;color: blue;color: blue;font-size:200%;font-size:200%;

}}// první písmeno prvků třídy „prvni“ bude vypsáno písmem // první písmeno prvků třídy „prvni“ bude vypsáno písmem

Verdana, bude modré, bude dvakrát velké než ostatní textVerdana, bude modré, bude dvakrát velké než ostatní text

:first-line:first-line

• pseudoprvek, který umožňuje separátně formátovat první řádku pseudoprvek, který umožňuje separátně formátovat první řádku jiného prvkujiného prvku.prvni {.prvni {

font-family: sans-serif;font-family: sans-serif;}}// definuje bezpatkové písmo pro prvky třídy „prvni“// definuje bezpatkové písmo pro prvky třídy „prvni“

.prvni:first-letter {.prvni:first-letter {font-variant: small-caps;font-variant: small-caps;font-size:1.2em;font-size:1.2em;

}}// první řádek bude vypsán kapitílkami a bude o 120% větší než // první řádek bude vypsán kapitílkami a bude o 120% větší než

další řádkydalší řádky

:hover:hover

• pseudoprvek, který umožňuje změnit styl jiného prvku v pseudoprvek, který umožňuje změnit styl jiného prvku v okamžiku, kdy na tento prvek ukážeme kurzorem (dynamické – okamžiku, kdy na tento prvek ukážeme kurzorem (dynamické – vhodné pro odkazy)vhodné pro odkazy)

.odkaz {.odkaz {color: blue;color: blue;background: yellow;background: yellow;}}// prvek třídy odkaz bude mít modrý text na žlutém pozadí// prvek třídy odkaz bude mít modrý text na žlutém pozadí.odkaz:hover {.odkaz:hover {color: yellow;color: yellow;background: blue;background: blue;}}// tento pseudoprvek způsobí, že po najetí kurzorem na prvek třídy // tento pseudoprvek způsobí, že po najetí kurzorem na prvek třídy „odkaz“ se změní na žlutou barvu textu na modrém pozadí„odkaz“ se změní na žlutou barvu textu na modrém pozadí

typy prvkůtypy prvků

prvky jsou blokové, řádkové, prvky jsou blokové, řádkové, tabulkovétabulkové

display:display:

• vlastnost, která definuje způsob zobrazení (typ) vlastnost, která definuje způsob zobrazení (typ) prvkuprvku

• volby:volby:in-linein-line – řádkový prvek (např. položky menu) – řádkový prvek (např. položky menu)

blockblock – blokový prvek (odstavcový blok – blokový prvek (odstavcový blok a a plovoucí nebo pevnou velikostí, standardně plovoucí nebo pevnou velikostí, standardně není obtékán textem)není obtékán textem)

formátování blokových prvkůformátování blokových prvků

border

padding

margin

border:border:

• vlastnosti rámečku blokového prvkuvlastnosti rámečku blokového prvku• nastavujeme pro celý rámeček nebo pro nastavujeme pro celý rámeček nebo pro

jednotlivé části (pak bude vlastnost border-jednotlivé části (pak bude vlastnost border-left, border-right, border-top a border-left, border-right, border-top a border-bottom)bottom)

• lze nastavit šířku (v bodech), barvu a typ lze nastavit šířku (v bodech), barvu a typ rámečku – none, solid, double, dashed, rámečku – none, solid, double, dashed, dotted, groove, outset, insetdotted, groove, outset, inset

úkolúkol

• vyzkoušejte vlastnost bordervyzkoušejte vlastnost border• vytvořte jednoduchý dokument, který bude vytvořte jednoduchý dokument, který bude

obsahovat jeden prvek div (třídy odstavec)obsahovat jeden prvek div (třídy odstavec)• vytvořte tabulku stylů, ve které budete nastavovat vytvořte tabulku stylů, ve které budete nastavovat

různé typy rámečků různé typy rámečků • nezapomeňte uvést v definici třídy odstavec nezapomeňte uvést v definici třídy odstavec

vlastnost display:block;)vlastnost display:block;)

padding:padding:

• nastavuje vzdálenost textu od okraje blokového nastavuje vzdálenost textu od okraje blokového prvkuprvku

padding: 10 px;padding: 10 px;// text bude vzdálen 10 bodů od okraje prvku// text bude vzdálen 10 bodů od okraje prvku

padding: 1,5em;padding: 1,5em;// text bude vzdálen od okraje 1,5 násobek // text bude vzdálen od okraje 1,5 násobek

velikosti textuvelikosti textu

margin:margin:

• určuje velikost „prázdného“ okraje kolem určuje velikost „prázdného“ okraje kolem blokového prvkublokového prvku

• tj. jak daleko bude vzdálen od ostatních tj. jak daleko bude vzdálen od ostatních prvkůprvků

• udává se v bodech, procentech šířky okna udává se v bodech, procentech šířky okna (omezujícího nadřazeného prvku)(omezujícího nadřazeného prvku)

další vlastnosti blokových rámůdalší vlastnosti blokových rámů

• samozřejmě i ostatní dosud uvedené samozřejmě i ostatní dosud uvedené vlastnosti (pro formátování textu, pozadí a vlastnosti (pro formátování textu, pozadí a pseudotřídy)pseudotřídy)

úkolúkol

• sledujte tři modelové ukázky s využitím sledujte tři modelové ukázky s využitím blokových prvků a jejich formátovánímblokových prvků a jejich formátováním

• vytvořte samostatný dokument se třemi vytvořte samostatný dokument se třemi odstavci a vytvořte tabulku, která je bude odstavci a vytvořte tabulku, která je bude různým způsobem formátovat.různým způsobem formátovat.

Pozicování prvkůPozicování prvků

umístění prvků v rámci prezentace umístění prvků v rámci prezentace (v okně prohlížeče,(v okně prohlížeče,

na vytisknuté stránce…)na vytisknuté stránce…)

position:position:

• vlastnost, která určuje, jakým způsobem bude prvek vlastnost, která určuje, jakým způsobem bude prvek pozicovánpozicován

staticstatic (formátován „v toku dokumentu“)(formátován „v toku dokumentu“)relativerelative (formátován relativně ke své pozici „v toku (formátován relativně ke své pozici „v toku

dokumentu“ v bodech nebo procentech šířky dokumentu“ v bodech nebo procentech šířky omezujícího nadřazeného prvku)omezujícího nadřazeného prvku)

absoluteabsolute (formátován absolutně vzhledem k (formátován absolutně vzhledem k nadřazenému prvku)nadřazenému prvku)

fixedfixed (formátován absolutně – navíc roluje s oknem (formátován absolutně – navíc roluje s oknem prohlížeče)prohlížeče)

float:float:• vlastnost, která určuje styl obtékání prvku (v podstatě vlastnost, která určuje styl obtékání prvku (v podstatě

umístění v toku dokumentu)umístění v toku dokumentu)• pro použití této vlastnosti je nutné, aby prvek měl pro použití této vlastnosti je nutné, aby prvek měl

danou šířkudanou šířku (danou vnitřním obsahem nebo vlastností (danou vnitřním obsahem nebo vlastností width), platí jen pro prvky s width), platí jen pro prvky s position: static;position: static; nebo nebo position: relative;position: relative;

• leftleft - - prvek bude zarovnán s levou hranou omezujícího prvek bude zarovnán s levou hranou omezujícího bloku, další prvky budou umístěny vpravo od nějbloku, další prvky budou umístěny vpravo od něj

• rightright – prvek bude zarovnán s prvou stranou – prvek bude zarovnán s prvou stranou omezujícího bloku, další prvky budou umístěny vlevo omezujícího bloku, další prvky budou umístěny vlevo od nějod něj

top: bottom: left: right:top: bottom: left: right:

• vlastnosti, které umožňují pozicování prvku, který má vlastnost vlastnosti, které umožňují pozicování prvku, který má vlastnost position:relative, absolute nebo fixedposition:relative, absolute nebo fixed

• uvádí se v bodech (kladných i záporných) a procentech velikosti uvádí se v bodech (kladných i záporných) a procentech velikosti nadřazeného prvkunadřazeného prvku

top: -5px;top: -5px;//posune prvek s vlastností relative o 5 bodů nahoru oproti „toku //posune prvek s vlastností relative o 5 bodů nahoru oproti „toku dokumentudokumentu““

bottom: 90%;bottom: 90%; //posune prvek s vlastností absolute na hodnotu 90% výšky okna//posune prvek s vlastností absolute na hodnotu 90% výšky okna

z-index:z-index:

• číslo vrstvy do které bude prvek umístěnčíslo vrstvy do které bude prvek umístěn• některé prohlížeče nezobrazují vrstvy menší některé prohlížeče nezobrazují vrstvy menší

než 0, používejte proto jen kladné hodnotynež 0, používejte proto jen kladné hodnoty

úkolúkol

• shlédněte lektorem prezentované příklady shlédněte lektorem prezentované příklady pozicování prvkůpozicování prvků

• vytvořte dokument a s plovoucími prvkyvytvořte dokument a s plovoucími prvky• vytvořte dokument a relativně pozicovanými vytvořte dokument a relativně pozicovanými

prvkyprvky• vytvořte dokument s absolutně pozicovanými vytvořte dokument s absolutně pozicovanými

prvkyprvky

viditelnost a zalamování prvkůviditelnost a zalamování prvků

visibility:visibility:

• vlastnost, která určuje viditelnost prvkuvlastnost, která určuje viditelnost prvku• používá se po skrývání prvků (jsou přítomny, používá se po skrývání prvků (jsou přítomny,

ale zcela průhledné), např. pro dynamické ale zcela průhledné), např. pro dynamické zobrazování menuzobrazování menu

• visiblevisible – prvek je viditelný – prvek je viditelný• hiddenhidden – prvek je neviditelný – prvek je neviditelný

overflow:overflow:

• vlastnost, která umožní přetékání textu nebo jiného vlastnost, která umožní přetékání textu nebo jiného obsahu v případě menšího prvku, než by obsah obsahu v případě menšího prvku, než by obsah vyžadovalvyžadoval

• visiblevisible – přetékající obsah bude mimo rám – přetékající obsah bude mimo rám• hiddenhidden – přetékající obsah bude skryt – přetékající obsah bude skryt• scrollscroll – bude zobrazen posuvník, obsah bude – bude zobrazen posuvník, obsah bude

zviditelněn posuvníkemzviditelněn posuvníkem• autoauto – záleží na prohlížeči – záleží na prohlížeči

clip:clip:

• vlastnost, které určuje viditelnou oblast v prvkuvlastnost, které určuje viditelnou oblast v prvku• auto: velikost je shodná s rámem prvkuauto: velikost je shodná s rámem prvku• rec (top,right,bottom, left)rec (top,right,bottom, left)

clip: rec(10,10,20,20);clip: rec(10,10,20,20);//viditelný obdélník ve vzdálenosti 10 bodů od horního okraje, //viditelný obdélník ve vzdálenosti 10 bodů od horního okraje,

10 bodů od pravého okraje, 20 bodů od spodního okraje a 10 bodů od pravého okraje, 20 bodů od spodního okraje a 20 bodů od levého okraje20 bodů od levého okraje

Publikování www stránekPublikování www stránek

hosting, registrace a správa hosting, registrace a správa domény, aktualizacedomény, aktualizace

registrace doményregistrace domény

• doména je adresa webové prezentace (www doména je adresa webové prezentace (www stránek), je to virtuální prostor v internetu, na kterém stránek), je to virtuální prostor v internetu, na kterém máte své stránkymáte své stránky

• doména druhého řádu: doména druhého řádu: – neco.cz (něco.ru něco.net něco.org….) neco.cz (něco.ru něco.net něco.org….) – placené (200-1000,- Kč/rok)placené (200-1000,- Kč/rok)

• domény třetího řádu:domény třetího řádu:– neco.wz.czneco.wz.cz– něco.unas.czněco.unas.cz– něco.sweb.czněco.sweb.cz– bývají zdarmabývají zdarma

webhostingwebhosting

• prostor na serveru pra webové stránkyprostor na serveru pra webové stránky• servis a správa serveru, mySQL a PHP serveru servis a správa serveru, mySQL a PHP serveru

případně dalších aplikacípřípadně dalších aplikací

• podle nabízených služeb je buď podle nabízených služeb je buď zadarmozadarmo (podpora (podpora nízká, prostor na disku 50-100MB) nebo nízká, prostor na disku 50-100MB) nebo zpoplatněnázpoplatněná (náprava chyb do určitého času, větší prostor na (náprava chyb do určitého času, větší prostor na disku) – disku) – 200-1000Kč/měsíc200-1000Kč/měsíc

aktualizace webuaktualizace webu

• pomocí ftp klientapomocí ftp klienta• upravujeme soubory a zálohujeme staré upravujeme soubory a zálohujeme staré

(např. pomocí Total Commanderu)(např. pomocí Total Commanderu)• přímo upravujeme soubory na internetu přímo upravujeme soubory na internetu

(např. pomocí ftp klienta v PSPadu)(např. pomocí ftp klienta v PSPadu)

úkolúkol

• registrujte doménu podle pokynů lektoraregistrujte doménu podle pokynů lektora

JavaScript JavaScript v příkladechv příkladech

5 praktických příkladů využití Java 5 praktických příkladů využití Java ScriptuScriptu

implementace JavaScriptu do htmlimplementace JavaScriptu do html

• pomocí tagu pomocí tagu <script></script><script></script>• do těchto tagů vkládáme značku pro komentář v html – starší do těchto tagů vkládáme značku pro komentář v html – starší

prohlížeče, které neumí zobrazit JavaScript pochopí kód jako prohlížeče, které neumí zobrazit JavaScript pochopí kód jako komentář a nezobrazí jejkomentář a nezobrazí jej

<script type="text/javascript"><script type="text/javascript">-->

</script></script>

implementace JavaScriptu do htmlimplementace JavaScriptu do html

• můžeme vložit script z externího souboru s můžeme vložit script z externího souboru s názvem: názvem: xxxxx.jsxxxxx.js

<script src="svatek.js" type="text/javascript"></script><script src="svatek.js" type="text/javascript"></script>

příklad 1: Zobrazení datumupříklad 1: Zobrazení datumu

• otevřete textový soubor otevřete textový soubor kalendar.txtkalendar.txt a vložte a vložte jej do vašeho html dokumentujej do vašeho html dokumentu

• zformátujte dle vašeho vkusuzformátujte dle vašeho vkusu

příklad 2příklad 2: : vložení scriptu pro výpis jména, vložení scriptu pro výpis jména, které má pro tento den svátekkteré má pro tento den svátek

• do vašeho dokumentu připojte script s do vašeho dokumentu připojte script s názvem názvem svatek.jssvatek.js

• zformátujte dle vašeho vkusuzformátujte dle vašeho vkusu

příklad 3: výstraha při zmáčknutí příklad 3: výstraha při zmáčknutí pravého tlačítkapravého tlačítka

• otevřete soubor otevřete soubor nestahuj_obrazky.htmlnestahuj_obrazky.html• pokuste se pochopit strukturu scriptu a pokuste se pochopit strukturu scriptu a

vložte jej do svého dokumentuvložte jej do svého dokumentu

a ještě jednou html……a ještě jednou html……

aneb jsou tu také formuláře a aneb jsou tu také formuláře a tlačítkatlačítka

formulářeformuláře

• formuláře mají smysl pouze ve spojení se formuláře mají smysl pouze ve spojení se scripty scripty

• tedy s použitím JavaScriptu (omezeně) a tedy s použitím JavaScriptu (omezeně) a hlavně serverovými scripty (php, asp….)hlavně serverovými scripty (php, asp….)

základní syntaxezákladní syntaxe

• formuláře se vkládají pomocí taguformuláře se vkládají pomocí tagu

<form action=„akce“ name=„název fomuláře“><form action=„akce“ name=„název fomuláře“>. obsah. obsah. obsah. obsah

</form></form>

• samozřejmě může být po označení třídou (class) samozřejmě může být po označení třídou (class) nebo unikátním selektorem (id) formátován pomocí nebo unikátním selektorem (id) formátován pomocí stylůstylů

typy formulářových prvkůtypy formulářových prvků

• existují 3 základní typy formulářů a jejich existují 3 základní typy formulářů a jejich modifikace:modifikace:

• tlačítka, vstupní pole, zaškrtávací a výběrová políčka tlačítka, vstupní pole, zaškrtávací a výběrová políčka se vkládají pomocí tagu:se vkládají pomocí tagu:

<input type=„typ“ name=„jméno“ value=„hodnota „/><input type=„typ“ name=„jméno“ value=„hodnota „/>

typ: text (textové pole), button (tlačítko), checkbox typ: text (textové pole), button (tlačítko), checkbox (zaškrtávací políčko), radio (výběrové políčko), (zaškrtávací políčko), radio (výběrové políčko), submit (potvrzovací tlačítko)submit (potvrzovací tlačítko)

příkladypříklady

• vstupní pole a potvrzovací tlačítkovstupní pole a potvrzovací tlačítko

<<form name="prvni" class="prvni">form name="prvni" class="prvni"><input type="text" width="150" name="vstupni_pole" <input type="text" width="150" name="vstupni_pole"

value="heslo„ />value="heslo„ /><input type="submit" value="vstupte„ /><input type="submit" value="vstupte„ />

</form></form>

• vyzkoušejtevyzkoušejte


• několik tlačítekněkolik tlačítek

<<form name="druhy" class="druhy">form name="druhy" class="druhy"><input type="button" name="navigace" <input type="button" name="navigace" value="google.com" value="google.com" class="tlac„ />class="tlac„ /><input type="button" <input type="button" name="navigace„ value="seznam.cz" name="navigace„ value="seznam.cz" class="tlac„ />class="tlac„ /><input type="button" name="navigace" <input type="button" name="navigace" value="hledej.cz" value="hledej.cz" class="tlac„ />class="tlac„ />

</form></form>



• radio button - výběr jedné z několika variant a potvrzovací tlačítkoradio button - výběr jedné z několika variant a potvrzovací tlačítko

<form name="treti" class="treti"><form name="treti" class="treti">Trest smrti by měl být znovu zaveden:Trest smrti by měl být znovu zaveden:<input type="radio" name="nazor" value="souhlas" <input type="radio" name="nazor" value="souhlas" class="nazor">souhlasímclass="nazor">souhlasím<input type="radio" name="nazor" value="nesouhlas" <input type="radio" name="nazor" value="nesouhlas" class="nazor">nesouhlasímclass="nazor">nesouhlasím<input type="radio" name="nazor" value="volny" <input type="radio" name="nazor" value="volny" class="nazor">nevímclass="nazor">nevím<input type="submit" value="odešli"><input type="submit" value="odešli">

</form></form>



• check box - výběr několika variantcheck box - výběr několika variant a potvrzovací tlačítko a potvrzovací tlačítko

<form name="ctvrty" class="ctvrty"><form name="ctvrty" class="ctvrty"> Lektor aktivity je:Lektor aktivity je: <input type="checkbox" name="lektor" <input type="checkbox" name="lektor"

value="komunikativni" class="check„ />komunikativní value="komunikativni" class="check„ />komunikativní <input type="checkbox" name="lektor" <input type="checkbox" name="lektor"

value="kooperatovni" class="check„ />kooperativní value="kooperatovni" class="check„ />kooperativní <input type="checkbox" name="lektor" value="erudovany" <input type="checkbox" name="lektor" value="erudovany"

class="check„ />erudovaný class="check„ />erudovaný <input type="checkbox" name="lektor" value="empaticky" <input type="checkbox" name="lektor" value="empaticky"

class="check„ />empatický class="check„ />empatický <input type="submit" value="odešli„ /><input type="submit" value="odešli„ /> </form></form>


2. typ polí formulářů2. typ polí formulářů

• druhý typ je rozbalovací nabídka.druhý typ je rozbalovací nabídka.• vkládá se pomocí tagu vkládá se pomocí tagu <select></select><select></select>• <položky se vkládají tagy <položky se vkládají tagy <option><option>• u položky, které je přednastavena jako výchozí se u položky, které je přednastavena jako výchozí se

uvede atribut uvede atribut selectedselected

příklad druhého typu formulářůpříklad druhého typu formulářů

<form name="paty" class="paty"><form name="paty" class="paty"> Vyberte si destinaci:Vyberte si destinaci: <select name="vyber" size="1„ class=„vyber“><select name="vyber" size="1„ class=„vyber“> <option value="afrika" selected >Afrika<option value="afrika" selected >Afrika <option value="evropa">Evropa<option value="evropa">Evropa <option value="amerika">Amerika<option value="amerika">Amerika <option value="asie">Asie<option value="asie">Asie </select></select> <input type="submit" value="vybráno"><input type="submit" value="vybráno"> </form></form>

vyzkoušejtevyzkoušejte

3. typ polí formulářů3. typ polí formulářů

• třetí typ je textové poletřetí typ je textové pole• vkládá se pomocí tagu vkládá se pomocí tagu <textarea></textarea><textarea></textarea>

• je třeba uvést výšku a šírku ve sloupcích je třeba uvést výšku a šírku ve sloupcích (cols=„počet“)(cols=„počet“) resp. resp. řádcích (řádcích (rows=„počet“)rows=„počet“)

příklad třetího typu formulářůpříklad třetího typu formulářů

<form name="sesty" class="sesty"><form name="sesty" class="sesty"> <textarea name="odeslany_text" cols="10" <textarea name="odeslany_text" cols="10"

rows="10">rows="10"> </textarea></textarea> <input type="submit" value="odešli"><input type="submit" value="odešli"> </form></form>

……a teď zpět k JavaScriptu…a teď zpět k JavaScriptu…

resp. příkladům jeho využitíresp. příkladům jeho využití

příklad 4: vstupní heslo a jeho kontrolapříklad 4: vstupní heslo a jeho kontrola

• otevřete soubor otevřete soubor vstupni_heslo.htmlvstupni_heslo.html • prozkoumejte jeho strukturuprozkoumejte jeho strukturu• přeneste do svého dokumentupřeneste do svého dokumentu

příklad 5: navigace formulářovými příklad 5: navigace formulářovými tlačítkytlačítky

• otevřete soubor otevřete soubor navigace.htmlnavigace.html• prostudujte jeho strukturuprostudujte jeho strukturu• pokuste se jej modifikovatpokuste se jej modifikovat

obsah zpracovaný html tagyobsah zpracovaný html tagy

forma vytvořená pomocí CSSforma vytvořená pomocí CSS

porovnání dokumentůporovnání dokumentů

JavaScriptový kódJavaScriptový kód

tvorba webových stránek

Documents