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 (HyperText 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) dHTML – JavaSript (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í MySQL 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
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 <h1>zde bude text</h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
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 <br />, 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 mypage.html mypicture.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 mypicture.html bude obsahovat 4 obrázky (stáhněte z internetu) kontakt.html bude obsahovat název stránky a informace o telefonu adrese, emailu atd.. ve formě seznamu
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> <!-- definice tabulky <tr> první řádek <td> první buňka <td> druhá buňka <td> třetí buňka <td> první buňka <td> třetí buňka </table>
ú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 pojmenování tagu pak vypadá takto: 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=“odkaz1“> <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"> h1 { 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
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 { vlastnost1: hodnota; vlastnost2: hodnota; } např: div { //definice pro všechny prvky typu div color:red; //barva písma font-size: 12px; //velikost písma .mujodstavec { //. znamená styl pro třídu (class) font-weight: bold; //zvýraznění - tučně color:#122345; //barva písma v hexadec.kódu #zvyrazneny { // unikátní selektor id font-variation: small-caps; {
textové styly 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; //normální písmo font-style: italic; //kurzíva
font-variant: normal; //normální písmo vlastnost, která volí mezi kapitálkami a normálním písmem font-variant: normal; //normální písmo font-variant: small-caps; //kapitálky
font-weight vlastnost, která určuje tloušťku písma hodnoty se udávají slovně (normal, bold, bolder, lighter) nebo číselně (100 - 900) font-weight: bold; //tučné písmo font-weight: 100; //velmi tenké písmo
font-size vlastnost, která určuje velikost písma doporučuje se definovat absolutní velikost slovně: xx-smal, x-small, small, medium (odpovídá písmu velikosti 14 bodů a nadpisu úrovně h4), large (h3), x-large (h2), xx-large (h1) 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 – 12px, 20px font-size: x-small; //velikost písma asi 10,5 bodů font-size: 1,5em; //velikost 150% k nadřaz. prvku font-size:150%; //stejné jako v předchozím případě font-size: 12px; //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 letter-spacing:75%; vlastnost, která upravuje velikost mezer mezi jednotlivými písmeny v textu letter-spacing:0.5em; //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:20px; //mezera mezi písmeny větší o 20 bodů
word-spacing word-spacing:75%; vlastnost, která upravuje velikost mezer mezi jednotlivými slovy v textu word-spacing:0.5em; //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:20px; //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: 2em; //odsazení prvního řádku o dvojnásobnou šířku znaku (m) text-indent: 20px; //odsazení prvního řádku o 20 obrazovkových bodů
line-height line-height: 1.3em; vlastnost, která určuje výšku řádky lze nastavit relativně podle velikosti písma neb o v bodech line-height: 1.3em; //výška řádky 1.3×výška písma line-height: 150%; //řádkování 1,5 line-height: 16px; //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:#FFFF80; //barva textu písková
úkol vytvořte krátký html dokument se třemi odstavci <p>(každý odstavec má unikátní id - “odstavec1“, „odstavec2“, „odstavec3“) 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 mujstyl2 vytvořte v PSPadu tabulku stylů s názvem mujstyl2 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 //barva pozadí modrá vlastnost, která určuje barvu pozadí background-color: blue; //barva pozadí modrá background-color: #fe6b1c //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% 100% znamená, že pravý dolní roh obrázku bude zarovnán s pravým dolním rohem prvku) body (20px 10px – 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: url(„pozadi.gif“) no-repeat top center; 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 .prvni { font-family: sans-serif; } pseudoprvek, který umožňuje separátně formátovat první písmeno jiného prvku .prvni { font-family: sans-serif; } // definuje bezpatkové písmo pro 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 font-family: sans-serif; } .prvni:first-letter { pseudoprvek, který umožňuje separátně formátovat první řádku jiného prvku .prvni { font-family: sans-serif; } // definuje bezpatkové písmo pro prvky třídy „prvni“ .prvni:first-letter { font-variant: small-caps; font-size:1.2em; // 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í
prvky jsou blokové, řádkové, tabulkové 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 border-left, 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: padding: 10 px; // text bude vzdálen 10 bodů od okraje prvku nastavuje vzdálenost textu od okraje blokového prvku padding: 10 px; // text bude vzdálen 10 bodů od okraje prvku padding: 1,5em; // 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.
umístění prvků v rámci prezentace na vytisknuté stránce…) 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: -5px; //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,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, mySQL a PHP serveru případně dalších aplikací podle nabízených služeb je buď zadarmo (podpora nízká, prostor na disku 50-100MB) nebo zpoplatněná (náprava chyb do určitého času, větší prostor na disku) – 200-1000Kč/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
JavaScript v příkladech 5 praktických příkladů využití Java Scriptu
implementace JavaScriptu 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 JavaScript 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 JavaScriptu 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
aneb jsou tu také formuláře a tlačítka 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 JavaScriptu (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 JavaScriptu… 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ů
JavaScriptový kód