Tvorba webovch strnek RNDr Pavel Vlach Ph D

Tvorba webových stránek RNDr. Pavel Vlach, Ph. D.

• WWW – World Wide Web - nejrozšířenější služba na internetu • na serveru jsou vystaveny webové stránky • webová stránka – multimediální dokumenty (text, grafika, hudba, video) doplněné o hypertext – odkaz na jiné místo webu • základní www stránky jsou tvořeny pomocí jazyka HTML (Hyper. Text Markup Language) • stránky jsou zobrazovány ve webovém prohlížeči (nejčastější Mozilla, Firefox, MS Explorer)

Používané „technologie“ • HTLM (budeme se učit) • CSS (budeme se učit) • d. HTML – Java. Sript (stručně se budeme učit v příkladech) • Flash – zmíníme (jiný kurz) • PHP (asp…. ) zmíníme (jiný kurz)

HTML • základní jazyk pro tvorbu www stránek • prochází historickým vývojem • specifikace druhu HTML je důležitá pro správné zobrazení stránky (dnes nejčastěji html 4. 01 Strict, případně xhtml, starší 4. 01 Transitional)

HTML • použití jazyka je poměrně variabilní × existuje množství různých prohlížečů • => pro validní zobrazení (v postatě garantované zobrazení pro všechny prohlížeče) je třeba dodržovat striktní pravidla • čím vyšší specifikace HTML, tím přísnější pravidla použití

HTML • základním nástrojem práce v html jsou strukturální a formátovací značky zvané tagy • tagy umožňují vytvářet strukturu dokumentu a také jeho formátování, tzn. pomocí HTML lze vytvořit obsah i formu dokumentu • 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 obsahu při zachování formy, nebo naopak nové formátování – změna celého vzhledu stránek bez zasahování do obsahu • v současné době preferujeme tedy použití HTML pouze na vytváření obsahu, tj. struktury dokumentu • na vzhled tj. formátování dokumentu používáme CSS

CSS • Cascade Styles Sheet • soubory tabulek, které definují formát struktur definovaných v HTML dokumentu • mohou být součástí HTML dokumentu nebo být v externím textovém souboru (a pak mají svůj správný význam)

Java Script • scriptovací jazyk • dynamické HTML – poskytuje vyšší míru interaktivity • pohyblivá menu, kalendář, rozbalovací menu… • scripty se vykonávají na straně prohlížeče

Flash • většinou animace, bannery, hry a další webové aplikace, ale i celé webové stránky • výhody – perfektní grafické rozhraní – neomezená interaktivita • nevýhody – – – není přístupné standardním službám není možnost hypertextu ne vyhledávání webových aplikací uvnitř flashových souborů)

PHP (asp) • scriptovací jazyk • scripty se vykonávají na serveru • webové aplikace (formuláře, ankety, ale i grafy, diáře) • spolupráce s databází My. SQL a dalšími • nutnost webového serveru

Výuka 1. HTML

tagy • tagy jsou párové značky, které umožňují strukturovat (i formátovat) html dokument • tagy mají následující strukturu: – – – počáteční tag <název tagu> ukončovací tag </název tagu> mezi počátečním a ukončovacím tagem je obsah (text)

struktura HTML dokumentu vytvářená stránka specifikace dokumentu <!DOCTYPE> dokument <html> hlavička dokumentu <head> meta značky <meta> titul stránky <title> odkazy <link> formát html tělo dokumentu <body>

html dokument - shrnutí • má tyto 4 nezbytné části: 1. specifikaci dokumentu – tag <!DOCTYPE> 2. označení dokumentu – tag <html> </html> 3. označení hlavičky – tag <head></head> 4. označení těla dokumentu – tag <body> </body>

tagy pro strukturování textu • nadpis – – – – 6 úrovní značek (tagů) pro nadpisy <h 1>zde bude text</h 1> <h 2></h 2> <h 3></h 3> <h 4></h 4> <h 5></h 5> <h 6></h 6>

tagy pro strukturování textu • řádkový prvek <span> zde je obsah prvku </span> • odstavcový prvek 1 <div> zde je obsah prvku </div> • odstavcový prvek 2 <p> zde je obsah prvku </p>

tagy pro strukturování textu • seznam 1 – seznam (výčet s odrážkami) se značí tagem <ul> výčet položek </ul> – jednotlivé položky se označují tagem <li> (většinou nedoplňujeme koncový tag </li>) • seznam 2 – seznam (číslovaný) se značí tagem <ol> výčet položek </ol> – jednotlivé položky se označují tagem <li> • seznam 3 – seznam (definiční seznam) se značí tagem <dl> výčet položek </dl> – jednotlivé položky se označují tagem <dt> a jejich vysvětlení <dd>

tagy pro formátování textu I. • jejich použití je i nových specifikacích validní – doporučuji jejich používání <cite> pro citace (normálně kurzíva) <pre> pro ukázky programového kódu (normálně písmem Courier) <em> pro zvýraznění (normálně kurzíva) <strong> pro zvýrazněné (normálně tučně) • ostatní viz www. kosek. cz (nepoužívají se tolik) • vzhled těchto tagů lze měnit pomocí CSS

tagy pro formátování textu II. • jejich použití do budoucna nebude v nových specifikacích validní – nedoporučuji jejich používání!! <b> tučně <i> kurzíva <big> větší písmo <small> menší písmo <tt> neproporcionální písmo (courier) <u> podškrtnuté písmo <strike> přeškrtnuté písmo <sub> dolní index <sup> spodní index • • • lze měnit jejich obsah pomocí CSS ale není to logické × CSS plně nahrazuje použirí těchto tagů oblíbené je používání tagu , který způsobí odřádkování. tento tag je vždy nahraditelný!!! Pokud možno NEPOUŹÍVAT

úkol • vytvořte jednoduchý html dokument, který bude: – respektovat správnou strukturu html dokumentu (tzn. bude mít všechny nutné náležitosti) – obsahovat 2 nadpisy různé úrovně – obsahovat jeden seznam – tři odstavce textu – použijte „správné“ tagy pro formátování

odkazy • odkazy (hypertextové odkazy) umožní kliknutím na odkaz: – přesunout se na jiné místo v dokumentu – spustit jiný html dokument – spustit jiný soubor (video, zvuk, obrázek…. )

odkazy • struktura hypertextového odkazu: • <a href=“URL“>text nebo objekt, na který se bude klikat</a> • URL je adresa na webu nebo pevném disku – – – http: //www. blovice. cz ftp: //www. blovice. cz mailto: vlach. pavel@mybox. cz mojevideo. mpeg obrazky/mujobzar. jpg

odkazy • URL může být také návěští – určitý bod v dokumentu • použitím návěští se přesuneme v dokumentu na místo označené návěštím • návěští se označuje značkou # • návěští (místo, kam se odkazem přesuneme v dokumentu) se musí specifikovat: <a name=„navesti“>SEM</a> • odkaz potom bud vypadat: <a href=„#navesti“>přesun TAM</a>

obrázky • obrázky vkládáme pomocí tagu <img src=„URL“ alt=„popis“ height=„výška“ width =„šířka“ align=zarovnání /> • kde URL je adresa na obrázek (na webu na disku) – http: //www. blovice. cz/logo. jpg – obrazky/esf. gif • alt je popis obrázku (po najetí kurzoru se objeví text, který obrázek popisuje – opodstatěné dříve při pomalém internetu, vhodné – při nenahrání obrázku je aspoň k dispozici text) • heigth a width lze uvést v bodech nebo procentech – nemusí být uvedeny, pak se obrázek zobrazí ve své skutečné velikosti • align je zarovnání vůči textu – tři možnosti – top, center, bottom

úkol • vytvořte 4 html dokumenty • index. html – bude obsahovat obrázek jako logo, název stránky, jméno autora a krátký popis (2 -3 odstavce) – odkazy (menu) na 3 následující stránky • mypage. html – bude obsahovat název stránky a informace (3 odstavce) o Vás – odkazy (menu) na 3 následující stránky • mypicture. html – bude obsahovat 4 obrázky (stáhněte z internetu) – odkazy (menu) na 3 následující stránky • kontakt. html – bude obsahovat název stránky a informace o telefonu adrese, emailu atd. . ve formě seznamu – odkazy (menu) na 3 následující stránky

Tabulky a jejich formátování • tabulky vkládáme pomocí tagu <table> obsah tabulky </table> • jednotlivé řádky vkládáme pomocí tagu <tr> • jednotlivé sloupce vkládáme pomocí tagu <td>

tabulky • tabulka o 2 řádcích a 3 sloupcích tedy bude vypadat takto: <table> <tr> první řádek <td> první buňka <td> druhá buňka <td> třetí buňka </table> <!-- definice tabulky

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

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

úkol • vytvořte svou první opravdovou rozsáhlejší stránku se potřebnou strukturou, obsahem dle zájmu • minimálně 4 stránky s použitím prvků <p> <div> <span> <a> • rozumně využívat formátovací tagy • pod nadpisem bude menu shodné pro všechny stránky • první oficiální výstup kurzu

Výuka 2. CSS

doporučená literatura • • CSS – Kaskádové styly kompletní průvodce • Petr Staníček (pixy) • • • www. knihy. cpress. cz cena cca 190 Kč k dostání všude (i hypermarkety)

co to je CSS • tabulky (správně externí) se styly – formáty prvků definovaných v html • prvky jsou všechny pojmenované tagy • pojmenování se provádí pomocí doplňků v tagu class (třída) a id (unikátní kód) • pojmenování tagu pak vypadá takto: <div class=“mujodstavec“> <a href=„URL“ class=“odkaz 1“> <p id=“uvodni_odstavec“ >

připojení stylů k html dokumentu 1. definice stylu přímo u příslušného tagu <div style= “definice stylu“ > obsah odstavcového prvku </div>

připojení stylů k html dokumentu 2. definice stylu v tagu <STYLE> <style>. . definice stylů. . </style> <style type="text/css"> h 1 { color: blue } </style>

připojení stylů k html dokumentu 3. pomocí externí tabulku stylů – DOPORUČUJI § pomocí tagu <link> v hlavičce dokumentu <link rel=stylesheet type="text/css" href="URL tabulky stylů">

vlastnosti stylů: kaskáda styl dokumentu <body> styl odstavců <div> styl odstavců třídy „odstavec 1“ <div class=„odstavec 1“> styl odstavců třídy „odstavec 2“ <div class=„odstavec 2“> styl odkazů <a> styl odkazů třídy „moje odkazy“ <a class=„mojeodkazy“ styl řádkových prvků <span> styl nadpisů <h> styl nadpisu <h 2>

vlastnosti stylů: dědičnost • v rámci kaskády se vlastnosti prvků dědí • vlastnosti nadřazeného prvku se přenáší podřazenému prvku (logické) • => nemusí se znovu definovat

vlastnosti stylů: odolnost • ve smyslu ignorance chyb • je-li zápis stylu syntakticky (formálně) špatný, nehlásí se žádná chyba, jen se daný styl neprovede

struktura tabulky stylů • • • je velmi jednoduchá textový soubor s koncovkou. css obsahuje styly pro definované prvky v tomto formátů: názevprvku { vlastnost 1: hodnota; vlastnost 2: hodnota; } div { color: red; font-size: 12 px; např: //definice pro všechny prvky typu div //barva písma //velikost písma }. mujodstavec { font-weight: bold; color: #122345; //. znamená styl pro třídu (class) //zvýraznění - tučně //barva písma v hexadec. kódu } #zvyrazneny { // unikátní selektor id font-variation: small-caps; {

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

• • • font-family font-style font-variant font-weight font-size sdružená vlastnost font • • letter-spacing word-spacing text-decoration text-align text-intend line-height vertical-align color • • background-color background-image background-position sdružená vlastnost background

font-family • vlastnost, která určuje použitý font • většinou se definuje od konkrétních fontů k obecným rodinám fontů font-family: „Arial CE“, „Helvetica CE“, sans-sefif font-family: „Times CE“, „Times New Roman“, serif

font-style • vlastnost, která určuje volbu normálního nebo skloněného písma font-style: normal; font-style: italic; //normální písmo //kurzíva

font-variant • vlastnost, která volí mezi kapitálkami a normálním písmem font-variant: normal; font-variant: small-caps; //normální písmo //kapitálky

font-weight • vlastnost, která určuje tloušťku písma • hodnoty se udávají slovně (normal, bolder, lighter) nebo číselně (100 - 900) font-weight: bold; font-weight: 100; //tučné písmo //velmi tenké písmo

font-size • • • vlastnost, která určuje velikost písma doporučuje se definovat absolutní velikost slovně: xx-smal, x-small, medium (odpovídá písmu velikosti 14 bodů a nadpisu úrovně h 4), large (h 3), x-large (h 2), xx-large (h 1) • definovat lze relativně podle nadřazeného prvku hodnotami v procentech nebo em (udává velikost písma nadřazeného prvku) • lze definovat absolutně velikostí písma – nedoporučuje se – 12 px, 20 px • • font-size: x-small; font-size: 1, 5 em; font-size: 150%; font-size: 12 px; //velikost písma asi 10, 5 bodů //velikost 150% k nadřaz. prvku //stejné jako v předchozím případě //velikost písma 12 bodů

font – sdružená vlastnost • umožňuje definovat všechny uvedené vlastnosti najednou (jednotlivé vlastnosti se oddělují mezerou • poslední povinné údaje jsou velikost písma a znaková sada font: light italic small-caps x-large „Arial“, sans-serif; // vzhled písma: bezpatkové písmo, tenké, kurzíva, kapitálky a velké

úkol • vytvořte krátký html dokument s jedním nadpisem a čtyřmi odstavci (2. -4. odstavec bude mít unikátní id) • připojte (pomocí tagu <link>) tabulku stylů s názvem mujstyl • vytvořte v PSPadu tabulku stylů s názvem mujstyl • definujte styl pro nadpis pomocí sdružené vlastnosti font • definujte styl pro všechny odstavce (tj. pro skupinu prvků <div>) pomocí sdružené vlastnosti font • pozměňte styly jednotlivých odstavců definovaných selektory id pomocí uvedených vlastností

letter-spacing • vlastnost, která upravuje velikost mezer mezi jednotlivými písmeny v textu letter-spacing: 0. 5 em; //mezera mezi písmeny větší o 50% šířky písmene letter-spacing: 75%; //mezera mezi písmeny větší o 75% šířky písmene letter-spacing: 20 px; //mezera mezi písmeny větší o 20 bodů

word-spacing • vlastnost, která upravuje velikost mezer mezi jednotlivými slovy v textu word-spacing: 0. 5 em; //mezera mezi slovy větší o 50% šířky písmene word-spacing: 75%; //mezera mezi slovy větší o 75% šířky písmene word-spacing: 20 px; //mezera mezi slovy větší o 20 bodů

text-decoration • vlastnost, která definuje dekorace textu • dostupné dekorace jsou: – podtržení (underline), nadtržení (overline), přeškrtnutí (line-through) text-decoration: underline; // text v tomto prvku bude podtržený text-decoration: none; // text v tomto prvku nebude nijak dekorovaný

text-align • vlastnost, která určuje způsob zarovnávání textu v prvku • volby jsou standardní: doleva (left), doprava (right), na střed (center), do bloku (justify) text-align: right; //text tohoto prvku bude zarovnán doprava

text-indent • vlastnost, která určuje odsazení prvního řádku • je možno nastavit v procentech šířky okna, relativně vzhledem k velikosti písma nebo pevně v bodech text-indent: 20%; //odsazení prvního řádku o 20% velikosti okna text-indent: 2 em; //odsazení prvního řádku o dvojnásobnou šířku znaku (m) text-indent: 20 px; //odsazení prvního řádku o 20 obrazovkových bodů

line-height • vlastnost, která určuje výšku řádky • lze nastavit relativně podle velikosti písma neb o v bodech line-height: 1. 3 em; //výška řádky 1. 3×výška písma line-height: 150%; //řádkování 1, 5 line-height: 16 px; //výška řádky 16 obrazovkových bodů

color • • • vlastnost, která určuje barvu textu určená slovně black, magenta, blue, green, yellow, gray • určená hexadecimálně (v grafickém editoru k přečtení) nebo http: //wellstyled. com/tools/ color: blue; //barva textu modrá color: #FFFF 80; //barva textu písková

úkol • • vytvořte krátký html dokument se třemi odstavci <p>(každý odstavec má unikátní id - “odstavec 1“, „odstavec 2“, „odstavec 3“) v textu použijte zvýraznění <em> tří typů: 1. <em class=„prvni“> 2. <em class=„druhy“> 3. <em class=„treti“> připojte (pomocí tagu <link>) tabulku stylů s názvem mujstyl 2 vytvořte v PSPadu tabulku stylů s názvem mujstyl 2 ponechejte výchozí styl pro odstavce (nic nedefinujte, použije se přednastavený styl v prohlížeči) pro unikátní odstavce definujte různou barvu, mezery mezi slovy, zarovnávání, odsazení prvního řádku a výšku řádku. definujte styly pro zvýraznění em „prvni“, „druhy“, treti“ (např. jiné proložení písmen, podškrtnutí, jiná barva, skoln, tučnost…)

background-color • vlastnost, která určuje barvu pozadí background-color: blue; //barva pozadí modrá background-color: #fe 6 b 1 c //barva oranžová v hexadecimálním kódu

background-image • vlastnost, která nahrává obrázek na pozadí prvku specifikovaný v url background-image: url(„pozadi. jpg“); // na pozadí nahraje obrázek v kořenovém adresáři se jménem pozadi. jpg backgroung-image: url(„picture/back. gif“); //na pozadí nahraje obrázek ze složky picture s názvem back. gif

background-repeat • vlastnost, která určuje zda se nahraný obrázek bude opakovat nebo ne (je-li obrázek menší než zvolený prvek) • volby: repeat, repeat-x, repeat-y, no-repeat background-repeat: no-repeat; //obrázek nahraný na pozadí prvku se nebude opakovat background-repeat: repeat-x; //obrázek nahraný na pozadí prvku se (pokud je velikost prvku větší než velikost obrázku) bude opakovat v x-ové souřadnici (několik obrázků v řádce za sebou)

background-position • • vlastnost, která určuje pozici nahrání obrázku (v podstatě zarovnávání) na pozadí prvku 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% znamená, že pravý dolní roh obrázku bude zarovnán s pravým dolním rohem prvku) body (20 px 10 px – posun obrázku o 20 bodů od kraje prvku v ose x a 10 bodů v ose y) slovně – top center bottom a left center right background-position: 50% 10%; //zarovná obrázek na střed stránky a 10% šířky prvku od horního okraje background-position: left bottom; //zarovná obrázek doleva dolů

background • sdružená vlastnost • v libovolném pořadí definujeme jednotlivé atributy, oddělujeme je mezerami • pokud neuvedeme některý atribut je přednastaven automatický background: url(„pozadi. gif“) no-repeat top center; //nahraje na pozadí prvku obrázek s názvem pozadi. gif, zarovná jej nahoru doprostřed a obrázek se neopakuje

pseudotřídy dynamické a jiné prvky, které nejsou součástí html a přidávají další obsah nebo umožňují specifické formátování části jiného prvku

: first-letter • pseudoprvek, který umožňuje separátně formátovat první písmeno jiného prvku . prvni { font-family: sans-serif; } // definuje bezpatkové písmo prvky třídy „prvni“ . prvni: first-letter { font-family: Verdana sans-serif; color: blue; font-size: 200%; } // první písmeno prvků třídy „prvni“ bude vypsáno písmem Verdana, bude modré, bude dvakrát velké než ostatní text

: first-line • pseudoprvek, který umožňuje separátně formátovat první řádku jiného prvku . prvni { font-family: sans-serif; } // definuje bezpatkové písmo prvky třídy „prvni“ . prvni: first-letter { font-variant: small-caps; font-size: 1. 2 em; } // první řádek bude vypsán kapitílkami a bude o 120% větší než další řádky

: hover • pseudoprvek, který umožňuje změnit styl jiného prvku v okamžiku, kdy na tento prvek ukážeme kurzorem (dynamické – vhodné pro odkazy). odkaz { color: blue; background: yellow; } // prvek třídy odkaz bude mít modrý text na žlutém pozadí . odkaz: hover { color: yellow; background: blue; } // tento pseudoprvek způsobí, že po najetí kurzorem na prvek třídy „odkaz“ se změní na žlutou barvu textu na modrém pozadí

typy prvků prvky jsou blokové, řádkové, tabulkové

display: • vlastnost, která definuje způsob zobrazení (typ) prvku • volby: in-line – řádkový prvek (např. položky menu) block – blokový prvek (odstavcový blok a plovoucí nebo pevnou velikostí, standardně není obtékán textem)

formátování blokových prvků margin border padding

border: • vlastnosti rámečku blokového prvku • nastavujeme pro celý rámeček nebo pro jednotlivé části (pak bude vlastnost borderleft, border-right, border-top a border-bottom) • lze nastavit šířku (v bodech), barvu a typ rámečku – none, solid, double, dashed, dotted, groove, outset, inset

úkol • vyzkoušejte vlastnost border • vytvořte jednoduchý dokument, který bude obsahovat jeden prvek div (třídy odstavec) • vytvořte tabulku stylů, ve které budete nastavovat různé typy rámečků • nezapomeňte uvést v definici třídy odstavec vlastnost display: block; )

padding: • nastavuje vzdálenost textu od okraje blokového prvku padding: 10 px; // text bude vzdálen 10 bodů od okraje prvku padding: 1, 5 em; // text bude vzdálen od okraje 1, 5 násobek velikosti textu

margin: • určuje velikost „prázdného“ okraje kolem blokového prvku • tj. jak daleko bude vzdálen od ostatních prvků • udává se v bodech, procentech šířky okna (omezujícího nadřazeného prvku)

další vlastnosti blokových rámů • samozřejmě i ostatní dosud uvedené vlastnosti (pro formátování textu, pozadí a pseudotřídy)

úkol • sledujte tři modelové ukázky s využitím blokových prvků a jejich formátováním • vytvořte samostatný dokument se třemi odstavci a vytvořte tabulku, která je bude různým způsobem formátovat.

Pozicování prvků umístění prvků v rámci prezentace (v okně prohlížeče, na vytisknuté stránce…)

position: • vlastnost, která určuje, jakým způsobem bude prvek pozicován static (formátován „v toku dokumentu“) relative (formátován relativně ke své pozici „v toku dokumentu“ v bodech nebo procentech šířky omezujícího nadřazeného prvku) absolute (formátován absolutně vzhledem k nadřazenému prvku) fixed (formátován absolutně – navíc roluje s oknem prohlížeče)

float: • vlastnost, která určuje styl obtékání prvku (v podstatě umístění v toku dokumentu) • pro použití této vlastnosti je nutné, aby prvek měl danou šířku (danou vnitřním obsahem nebo vlastností width), platí jen pro prvky s position: static; nebo position: relative; • left - prvek bude zarovnán s levou hranou omezujícího bloku, další prvky budou umístěny vpravo od něj • right – prvek bude zarovnán s prvou stranou omezujícího bloku, další prvky budou umístěny vlevo od něj

top: bottom: left: right: • vlastnosti, které umožňují pozicování prvku, který má vlastnost position: relative, absolute nebo fixed • uvádí se v bodech (kladných i záporných) a procentech velikosti nadřazeného prvku top: -5 px; //posune prvek s vlastností relative o 5 bodů nahoru oproti „toku dokumentu“ bottom: 90%; //posune prvek s vlastností absolute na hodnotu 90% výšky okna

z-index: • číslo vrstvy do které bude prvek umístěn • některé prohlížeče nezobrazují vrstvy menší než 0, používejte proto jen kladné hodnoty

úkol • shlédněte lektorem prezentované příklady pozicování prvků • vytvořte dokument a s plovoucími prvky • vytvořte dokument a relativně pozicovanými prvky • vytvořte dokument s absolutně pozicovanými prvky

viditelnost a zalamování prvků

visibility: • vlastnost, která určuje viditelnost prvku • používá se po skrývání prvků (jsou přítomny, ale zcela průhledné), např. pro dynamické zobrazování menu • visible – prvek je viditelný • hidden – prvek je neviditelný

overflow: • vlastnost, která umožní přetékání textu nebo jiného obsahu v případě menšího prvku, než by obsah vyžadoval • • • visible – přetékající obsah bude mimo rám hidden – přetékající obsah bude skryt scroll – bude zobrazen posuvník, obsah bude zviditelněn posuvníkem • auto – záleží na prohlížeči

clip: • • • vlastnost, které určuje viditelnou oblast v prvku auto: velikost je shodná s rámem prvku rec (top, right, bottom, left) clip: rec(10, 20, 20); //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 20 bodů od levého okraje

Publikování www stránek hosting, registrace a správa domény, aktualizace

registrace domény • doména je adresa webové prezentace (www stránek), je to virtuální prostor v internetu, na kterém máte své stránky • doména druhého řádu: – – neco. cz (něco. ru něco. net něco. org…. ) placené (200 -1000, - Kč/rok) • domény třetího řádu: – – neco. wz. cz něco. unas. cz něco. sweb. cz bývají zdarma

webhosting • prostor na serveru pra webové stránky • servis a správa serveru, my. SQL a PHP serveru případně dalších aplikací • podle nabízených služeb je buď zadarmo (podpora nízká, prostor na disku 50 -100 MB) nebo zpoplatněná (náprava chyb do určitého času, větší prostor na disku) – 200 -1000 Kč/měsíc

aktualizace webu • pomocí ftp klienta • upravujeme soubory a zálohujeme staré (např. pomocí Total Commanderu) • přímo upravujeme soubory na internetu (např. pomocí ftp klienta v PSPadu)

úkol • registrujte doménu podle pokynů lektora

Java. Script v příkladech 5 praktických příkladů využití Java Scriptu

implementace Java. Scriptu do html • • pomocí tagu <script></script> do těchto tagů vkládáme značku pro komentář v html – starší prohlížeče, které neumí zobrazit Java. Script pochopí kód jako komentář a nezobrazí jej <script type="text/javascript"> <!-function zobraz() { submenu. style. visibility="visible"; } function skryj() { submenu. style. visibility="hidden"; } --> </script>

implementace Java. Scriptu do html • můžeme vložit script z externího souboru s názvem: xxxxx. js <script src="svatek. js" type="text/javascript"></script>

příklad 1: Zobrazení datumu • otevřete textový soubor kalendar. txt a vložte jej do vašeho html dokumentu • zformátujte dle vašeho vkusu

příklad 2: vložení scriptu pro výpis jména, které má pro tento den svátek • do vašeho dokumentu připojte script s názvem svatek. js • zformátujte dle vašeho vkusu

příklad 3: výstraha při zmáčknutí pravého tlačítka • otevřete soubor nestahuj_obrazky. html • pokuste se pochopit strukturu scriptu a vložte jej do svého dokumentu

a ještě jednou html…… aneb jsou tu také formuláře a tlačítka

formuláře • formuláře mají smysl pouze ve spojení se scripty • tedy s použitím Java. Scriptu (omezeně) a hlavně serverovými scripty (php, asp…. )

základní syntaxe • formuláře se vkládají pomocí tagu <form action=„akce“ name=„název fomuláře“>. obsah </form> • samozřejmě může být po označení třídou (class) nebo unikátním selektorem (id) formátován pomocí stylů

typy formulářových prvků • existují 3 základní typy formulářů a jejich modifikace: • tlačítka, vstupní pole, zaškrtávací a výběrová políčka se vkládají pomocí tagu: <input type=„typ“ name=„jméno“ value=„hodnota „/> typ: text (textové pole), button (tlačítko), checkbox (zaškrtávací políčko), radio (výběrové políčko), submit (potvrzovací tlačítko)

příklady • vstupní pole a potvrzovací tlačítko <form name="prvni" class="prvni"> <input type="text" width="150" name="vstupni_pole" value="heslo„ /> <input type="submit" value="vstupte„ /> </form> • vyzkoušejte

příklady • několik tlačítek <form name="druhy" class="druhy"> <input type="button" name="navigace" value="google. com" class="tlac„ /> <input type="button" name="navigace„ value="seznam. cz" class="tlac„ /> <input type="button" name="navigace" value="hledej. cz" class="tlac„ /> </form> • vyzkoušejte

příklady • radio button - výběr jedné z několika variant a potvrzovací tlačítko <form name="treti" class="treti"> Trest smrti by měl být znovu zaveden: <input type="radio" name="nazor" value="souhlas" class="nazor">souhlasím <input type="radio" name="nazor" value="nesouhlas" class="nazor">nesouhlasím <input type="radio" name="nazor" value="volny" class="nazor">nevím <input type="submit" value="odešli"> </form> • vyzkoušejte

příklady • check box - výběr několika variant a potvrzovací tlačítko <form name="ctvrty" class="ctvrty"> Lektor aktivity je: <input type="checkbox" name="lektor" value="komunikativni" class="check„ />komunikativní <input type="checkbox" name="lektor" value="kooperatovni" class="check„ />kooperativní <input type="checkbox" name="lektor" value="erudovany" class="check„ />erudovaný <input type="checkbox" name="lektor" value="empaticky" class="check„ />empatický <input type="submit" value="odešli„ /> </form> • vyzkoušejte

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

příklad druhého typu formulářů <form name="paty" class="paty"> Vyberte si destinaci: <select name="vyber" size="1„ class=„vyber“> <option value="afrika" selected >Afrika <option value="evropa">Evropa <option value="amerika">Amerika <option value="asie">Asie </select> <input type="submit" value="vybráno"> </form> § vyzkoušejte

3. typ polí formulářů • třetí typ je textové pole • vkládá se pomocí tagu <textarea></textarea> • je třeba uvést výšku a šírku ve sloupcích (cols=„počet“) resp. řádcích (rows=„počet“)

příklad třetího typu formulářů <form name="sesty" class="sesty"> <textarea name="odeslany_text" cols="10" rows="10"> </textarea> <input type="submit" value="odešli"> </form>

…a teď zpět k Java. Scriptu… resp. příkladům jeho využití

příklad 4: vstupní heslo a jeho kontrola • otevřete soubor vstupni_heslo. html • prozkoumejte jeho strukturu • přeneste do svého dokumentu

příklad 5: navigace formulářovými tlačítky • otevřete soubor navigace. html • prostudujte jeho strukturu • pokuste se jej modifikovat

obsah zpracovaný html tagy

forma vytvořená pomocí CSS

porovnání dokumentů

Java. Scriptový kód