Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

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

Podobné prezentace


Prezentace na téma: "Tvorba webových stránek RNDr. Pavel Vlach, Ph.D.."— Transkript prezentace:

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

2 WWW – World Wide Web - nejrozšířenější služba na internetuWWW – World Wide Web - nejrozšířenější služba na internetu na serveru jsou vystaveny webové stránkyna 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 webuwebová 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)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)stránky jsou zobrazovány ve webovém prohlížeči (nejčastější Mozilla, Firefox, MS Explorer)

3 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 příkladech)dHTML – JavaSript (stručně se budeme učit v 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)

4 HTML základní jazyk pro tvorbu www stránekzákladní jazyk pro tvorbu www stránek prochází historickým vývojemprochá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)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)

5 HTML použití jazyka je poměrně variabilní × existuje množství různých prohlížečů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=> 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íčím vyšší specifikace HTML, tím přísnější pravidla použití

6 HTML základním nástrojem práce v html jsou strukturální a formátovací značky zvané tagyzá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 dokumentutagy 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 obsahuALE – 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 dokumentuv 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 CSSna vzhled tj. formátování dokumentu používáme CSS

7 CSS Cascade Styles SheetCascade Styles Sheet soubory tabulek, které definují formát struktur definovaných v HTML dokumentusoubory 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)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)

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

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

10 PHP (asp) scriptovací jazykscriptovací jazyk scripty se vykonávají na serveruscripty se vykonávají na serveru webové aplikace (formuláře, ankety, ale i grafy, diáře)webové aplikace (formuláře, ankety, ale i 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

11 Výuka 1. HTML

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

13 struktura HTML dokumentu vytvářená stránka specifikace dokumentu dokument hlavička dokumentu meta značky titul stránky odkazy formát html tělo dokumentu

14

15 html dokument - shrnutí má tyto 4 nezbytné části:má tyto 4 nezbytné části: 1. specifikaci dokumentu –tag –tag 2. označení dokumentu –tag –tag 3. označení hlavičky –tag –tag 4. označení těla dokumentu –tag –tag

16

17 tagy pro strukturování textu nadpisnadpis –6 úrovní značek (tagů) pro nadpisy – zde bude text – zde bude text – –

18

19 řádkový prvekřádkový prvek zde je obsah prvku zde je obsah prvku odstavcový prvek 1odstavcový prvek 1 zde je obsah prvku zde je obsah prvku odstavcový prvek 2odstavcový prvek 2 zde je obsah prvku zde je obsah prvku tagy pro strukturování textu

20

21 seznam 1seznam 1 –seznam (výčet s odrážkami) se značí tagem výčet položek –seznam (výčet s odrážkami) se značí tagem výčet položek –jednotlivé položky se označují tagem (většinou nedoplňujeme koncový tag ) seznam 2seznam 2 –seznam (číslovaný) se značí tagem výčet položek –seznam (číslovaný) se značí tagem výčet položek –jednotlivé položky se označují tagem –jednotlivé položky se označují tagem seznam 3seznam 3 –seznam (definiční seznam) se značí tagem výčet položek –seznam (definiční seznam) se značí tagem výčet položek –jednotlivé položky se označují tagem a jejich vysvětlení –jednotlivé položky se označují tagem a jejich vysvětlení

22

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

24

25 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í!!jejich použití do budoucna nebude v nových specifikacích validní – nedoporučuji jejich používání!! tučně tučně kurzíva kurzíva větší písmo větší písmo menší písmo menší písmo neproporcionální písmo (courier) neproporcionální písmo (courier) podškrtnuté písmo podškrtnuté písmo přeškrtnuté písmo přeškrtnuté písmo dolní index dolní index spodní index spodní index lze měnit jejich obsah pomocí CSS ale není to logické × CSS plně nahrazuje použirí těchto tagů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í.oblíbené je používání tagu, 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

26 úkol vytvořte jednoduchý html dokument, který bude: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í

27 odkazy odkazy (hypertextové odkazy) umožní kliknutím na odkaz: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….)

28 struktura hypertextového odkazu:struktura hypertextového odkazu: text nebo objekt, na který se bude klikat text nebo objekt, na který se bude klikat URL je adresa na webu nebo pevném diskuURL je adresa na webu nebo pevném disku –http://www.blovice.cz –ftp://www.blovice.cz ftp://www.blovice.cz –mojevideo.mpeg –obrazky/mujobzar.jpg odkazy

29

30 odkazy URL může být také návěští – určitý bod v dokumentuURL 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ímpouž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í se označuje značkou # návěští (místo, kam se odkazem přesuneme v dokumentu) se musí specifikovat:návěští (místo, kam se odkazem přesuneme v dokumentu) se musí specifikovat: SEM SEM odkaz potom bud vypadat:odkaz potom bud vypadat: přesun TAM přesun TAM

31

32 obrázky obrázky vkládáme pomocí taguobrázky vkládáme pomocí tagu 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.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)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é velikostiheigth 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, bottomalign je zarovnání vůči textu – tři možnosti – top, center, bottom

33

34 ú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 krátký popis (2-3 odstavce) –odkazy (menu) na 3 následující stránky mypage.htmlmypage.html –bude obsahovat název stránky a informace (3 odstavce) o Vás –odkazy (menu) na 3 následující stránky mypicture.htmlmypicture.html –bude obsahovat 4 obrázky (stáhněte z internetu) –odkazy (menu) na 3 následující stránky kontakt.htmlkontakt.html –bude obsahovat název stránky a informace o telefonu adrese, u atd.. ve formě seznamu –odkazy (menu) na 3 následující stránky

35

36 Tabulky a jejich formátování tabulky vkládáme pomocí tagu obsah tabulky tabulky vkládáme pomocí tagu obsah tabulky jednotlivé řádky vkládáme pomocí tagu jednotlivé řádky vkládáme pomocí tagu jednotlivé sloupce vkládáme pomocí tagu jednotlivé sloupce vkládáme pomocí tagu

37 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:

44

45 úkol vytvořte svou první opravdovou rozsáhlejší stránku se potřebnou strukturou, obsahem dle zájmuvytvoř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ů minimálně 4 stránky s použitím prvků rozumně využívat formátovací tagyrozumně využívat formátovací tagy pod nadpisem bude menu shodné pro všechny stránkypod nadpisem bude menu shodné pro všechny stránky první oficiální výstup kurzuprvní oficiální výstup kurzu

46 Výuka 2. CSS

47 doporučená literatura CSS – Kaskádové stylyCSS – Kaskádové styly kompletní průvodcekompletní průvodce Petr Staníček (pixy)Petr Staníček (pixy) cena cca 190 Kčcena cca 190 Kč k dostání všude (i hypermarkety)k dostání všude (i hypermarkety)

48 co to je CSS tabulky (správně externí) se styly – formáty prvků definovaných v htmltabulky (správně externí) se styly – formáty prvků definovaných v html prvky jsou všechny pojmenované tagyprvky 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í se provádí pomocí doplňků v tagu class (třída) a id (unikátní kód) pojmenování tagu pak vypadá takto:pojmenování tagu pak vypadá takto:

49 připojení stylů k html dokumentu 1. definice stylu přímo u příslušného tagu obsah odstavcového prvku


50

51 připojení stylů k html dokumentu 2. definice stylu v tagu 2. definice stylu v tagu..definice stylů....definice stylů.. h1 { color: blue }

52

53 připojení stylů k html dokumentu 3. pomocí externí tabulku stylů – DOPORUČUJI  pomocí tagu v hlavičce dokumentu

54 vlastnosti stylů: kaskáda styl dokumentu styl odstavců styl odstavců třídy „odstavec1“ styl odstavců třídy „odstavec2“ styl odkazů styl odkazů třídy „moje odkazy“

55 vlastnosti stylů: dě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áší podřazenému prvku (logické)vlastnosti nadřazeného prvku se přenáší podřazenému prvku (logické) => nemusí se znovu definovat=> nemusí se znovu definovat

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

57

58 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 { 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; {

59

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

61 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

62 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 obecným rodinám 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

63 font-style vlastnost, která určuje volbu normálního nebo skloněného písmavlastnost, 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

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

65 font-weight vlastnost, která určuje tloušťku písmavlastnost, která určuje tloušťku písma hodnoty se udávají slovně (normal, bold, bolder, lighter) nebo číselně ( )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

66 font-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, medium (odpovídá písmu velikosti 14 bodů a nadpisu úrovně h4), large (h3), x-large (h2), xx-large (h1)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)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, 20pxlze definovat absolutně velikostí písma – nedoporučuje se – 12px, 20px font-size: x-small;//velikost písma asi 10,5 bodůfont-size: x-small;//velikost písma asi 10,5 bodů font-size: 1,5em;//velikost 150% k nadřaz. prvkufont-size: 1,5em;//velikost 150% k nadřaz. prvku font-size:150%;//stejné jako v předchozím případěfont-size:150%;//stejné jako v předchozím případě font-size: 12px;//velikost písma 12 bodůfont-size: 12px;//velikost písma 12 bodů

67 font – sdružená vlastnost umožňuje definovat všechny uvedené vlastnosti najednou (jednotlivé vlastnosti se oddělují mezerouumožňuje definovat všechny uvedené vlastnosti najednou (jednotlivé vlastnosti se oddělují mezerou poslední povinné údaje jsou velikost písma a znaková sadaposlední povinné údaje jsou velikost písma a znaková 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 velké // vzhled písma: bezpatkové písmo, tenké, kurzíva, kapitálky a velké

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

69

70

71 letter-spacing vlastnost, která upravuje velikost mezer mezi jednotlivými písmeny v textuvlastnost, která upravuje velikost mezer mezi jednotlivými písmeny v textuletter-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ů

72 word-spacing vlastnost, která upravuje velikost mezer mezi jednotlivými slovy v textuvlastnost, která upravuje velikost mezer mezi jednotlivými slovy v textuword-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ů

73 text-decoration vlastnost, která definuje dekorace textuvlastnost, která definuje dekorace textu dostupné dekorace jsou: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ý

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

75 text-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ě vzhledem k velikosti písma nebo pevně v bodechje 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ů

76 line-height vlastnost, která určuje výšku řádkyvlastnost, která určuje výšku řádky lze nastavit relativně podle velikosti písma neb o v bodechlze 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ů

77 color 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 hexadecimálně (v grafickém editoru k přečtení) nebo color: blue;//barva textu modrá color:#FFFF80;//barva textu písková

78 úkol vytvořte krátký html dokument se třemi odstavci (každý odstavec má unikátní id - “odstavec1“, „odstavec2“, „odstavec3“)vytvořte krátký html dokument se třemi odstavci (každý odstavec má unikátní id - “odstavec1“, „odstavec2“, „odstavec3“) v textu použijte zvýraznění tří typů: 1. v textu použijte zvýraznění tří typů: připojte (pomocí tagu ) tabulku stylů s názvem mujstyl2připojte (pomocí tagu ) 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 přednastavený styl v prohlížeči)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.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…)definujte styly pro zvýraznění em „prvni“, „druhy“, treti“ (např. jiné proložení písmen, podškrtnutí, jiná barva, skoln, tučnost…)

79

80

81 background-color vlastnost, která určuje barvu pozadívlastnost, která určuje barvu pozadí background-color: blue; //barva pozadí modrá background-color: #fe6b1c //barva oranžová v hexadecimálním kódu //barva oranžová v hexadecimálním kódu

82 background-image vlastnost, která nahrává obrázek na pozadí prvku specifikovaný v urlvlastnost, 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

83 background-repeat vlastnost, která určuje zda se nahraný obrázek bude opakovat nebo ne (je-li obrázek menší než zvolený prvek)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-repeatvolby: 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)

84 background-position vlastnost, která určuje pozici nahrání obrázku (v podstatě zarovnávání) na pozadí prvkuvlastnost, 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)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)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 rightslovně – 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ů

85

86

87 background sdružená vlastnostsdružená vlastnost v libovolném pořadí definujeme jednotlivé atributy, oddělujeme je mezeramiv libovolném pořadí definujeme jednotlivé atributy, oddělujeme je mezerami pokud neuvedeme některý atribut je přednastaven automatický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

88

89 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

90 :first-letter pseudoprvek, který umožňuje separátně formátovat první písmeno jiného prvkupseudoprvek, 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

91 :first-line pseudoprvek, který umožňuje separátně formátovat první řádku jiného prvkupseudoprvek, 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

92

93 :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)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í

94

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

96 display: vlastnost, která definuje způsob zobrazení (typ) prvkuvlastnost, která definuje způsob zobrazení (typ) prvku volby: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)

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

98 border: vlastnosti rámečku blokového prvkuvlastnosti 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)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, insetlze nastavit šířku (v bodech), barvu a typ rámečku – none, solid, double, dashed, dotted, groove, outset, inset

99 úkol vyzkoušejte vlastnost bordervyzkoušejte vlastnost border vytvořte jednoduchý dokument, který bude obsahovat jeden prvek div (třídy odstavec)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ů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;)nezapomeňte uvést v definici třídy odstavec vlastnost display:block;)

100 padding: nastavuje vzdálenost textu od okraje blokového prvkunastavuje 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

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

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

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

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

105 position: vlastnost, která určuje, jakým způsobem bude prvek pozicovánvlastnost, 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)

106 float: vlastnost, která určuje styl obtékání prvku (v podstatě umístění v toku dokumentu)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;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ějleft - 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ějright – prvek bude zarovnán s prvou stranou omezujícího bloku, další prvky budou umístěny vlevo od něj

107 top: bottom: left: right: vlastnosti, které umožňují pozicování prvku, který má vlastnost position:relative, absolute nebo fixedvlastnosti, 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 prvkuuvá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 //posune prvek s vlastností absolute na hodnotu 90% výšky okna

108 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ší než 0, používejte proto jen kladné hodnotyněkteré prohlížeče nezobrazují vrstvy menší než 0, používejte proto jen kladné hodnoty

109 úkol shlédněte lektorem prezentované příklady pozicování prvkůshlédněte lektorem prezentované příklady 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 prvkyvytvořte dokument a relativně pozicovanými prvky vytvořte dokument s absolutně pozicovanými prvkyvytvořte dokument s absolutně pozicovanými prvky

110 viditelnost a zalamování prvků

111 visibility: vlastnost, která určuje viditelnost prvkuvlastnost, 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í menupoužívá se po skrývání prvků (jsou přítomny, ale zcela průhledné), např. pro dynamické zobrazování menu visible – prvek je viditelnývisible – prvek je viditelný hidden – prvek je neviditelnýhidden – prvek je neviditelný

112 overflow: vlastnost, která umožní přetékání textu nebo jiného obsahu v případě menšího prvku, než by obsah vyžadovalvlastnost, 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ámvisible – přetékající obsah bude mimo rám hidden – přetékající obsah bude skrythidden – přetékající obsah bude skryt scroll – bude zobrazen posuvník, obsah bude zviditelněn posuvníkemscroll – bude zobrazen posuvník, obsah bude zviditelněn posuvníkem auto – záleží na prohlížečiauto – záleží na prohlížeči

113 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); //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

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

115 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ánkydomé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: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:domény třetího řádu: –neco.wz.cz –něco.unas.cz –něco.sweb.cz –bývají zdarma

116 webhosting prostor na serveru pra webové stránkyprostor na serveru pra webové stránky servis a správa serveru, mySQL a PHP serveru případně dalších aplikací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ícpodle 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

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

118 úkol registrujte doménu podle pokynů lektoraregistrujte doménu podle pokynů lektora

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

120 implementace JavaScriptu do html pomocí tagu pomocí tagu 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í jejdo 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 -->

121 implementace JavaScriptu do html můžeme vložit script z externího souboru s názvem: xxxxx.jsmůžeme vložit script z externího souboru s názvem: xxxxx.js

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

123 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.jsdo vašeho dokumentu připojte script s názvem svatek.js zformátujte dle vašeho vkusuzformátujte dle vašeho vkusu

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

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

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

127 základní syntaxe formuláře se vkládají pomocí taguformuláře se vkládají pomocí tagu. obsah samozřejmě může být po označení třídou (class) nebo unikátním selektorem (id) formátován pomocí stylůsamozřejmě může být po označení třídou (class) nebo unikátním selektorem (id) formátován pomocí stylů

128 typy formulářových prvků existují 3 základní typy formulářů a jejich modifikace: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:tlačítka, vstupní pole, zaškrtávací a výběrová políčka se vkládají pomocí tagu: typ: text (textové pole), button (tlačítko), checkbox (zaškrtávací políčko), radio (výběrové políčko), submit (potvrzovací tlačítko)

129 příklady vstupní pole a potvrzovací tlačítkovstupní pole a potvrzovací tlačítko vyzkoušejtevyzkoušejte

130 příklady několik tlačítekněkolik tlačítek vyzkoušejtevyzkoušejte

131 příklady 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 Trest smrti by měl být znovu zaveden: souhlasím souhlasím nesouhlasím nesouhlasím nevím nevím vyzkoušejtevyzkoušejte

132 příklady check box - výběr několika variant a potvrzovací tlačítkocheck box - výběr několika variant a potvrzovací tlačítko Lektor aktivity je: Lektor aktivity je: komunikativní komunikativní kooperativní kooperativní erudovaný erudovaný empatický empatický vyzkoušejtevyzkoušejte

133 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 u položky, které je přednastavena jako výchozí se uvede atribut selectedu položky, které je přednastavena jako výchozí se uvede atribut selected

134 příklad druhého typu formulářů Vyberte si destinaci: Vyberte si destinaci: Afrika Afrika Evropa Evropa Amerika Amerika Asie Asie  vyzkoušejte

135 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 je třeba uvést výšku a šírku ve sloupcích (cols=„počet“) resp. řádcích (rows=„počet“)je třeba uvést výšku a šírku ve sloupcích (cols=„počet“) resp. řádcích (rows=„počet“)

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

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

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

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

140 obsah zpracovaný html tagy

141 forma vytvořená pomocí CSS

142 porovnání dokumentů

143 JavaScriptový kód


Stáhnout ppt "Tvorba webových stránek RNDr. Pavel Vlach, Ph.D.."

Podobné prezentace


Reklamy Google