Tvorba webových stránek

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>

řá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>

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 (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 ftp:// 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) 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, u 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

ú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) 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>

2. definice stylu v tagu <STYLE> <style> ..definice stylů.. </style> <style type="text/css"> h1 { color: blue } </style>

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ě ( ) 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 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é ( ,- 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 MB) nebo zpoplatněná (náprava chyb do určitého času, větší prostor na disku) – 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

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">  </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

Tvorba webových stránek

Podobné prezentace

Prezentace na téma: "Tvorba webových stránek"— Transkript prezentace:

Podobné prezentace

O projektu

Kontaktní formulář

Přihlásit se

Přihlásit se přes sociální síť:

Tvorba webových stránek

Podobné prezentace

Prezentace na téma: "Tvorba webových stránek"— Transkript prezentace:

Podobné prezentace

O projektu

Kontaktní formulář