TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03a Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03a 1. Úvod do značkovacích jazyků HTML a XHTML 2. Struktura webové stránky, popis částí 3. Základní značky jazyka HTML a XHTML 1
STRUKTURA WEBOVÉ STRÁNKY Soubory webové stránky Soubory webové stránky jsou textové soubory, jejichž název a přípona se řídí především těmito pravidly: Název souboru: doporučují se používat malá písmena, písmena bez diakritiky, název může obsahovat písmena, číslice, podtržítka a pomlčky, nepoužívat komplikované, dlouhé názvy, název souboru by měl vystihovat obsah (určení) webové stránky. 2
Soubory webové stránky Přípona souboru: Statické webové stránky: *.htm *.html Dynamické webové stránky: *.php *.asp (dle skriptovacího jazyka) Definice kaskádových stylů: *.css Úvodní (počáteční) soubor webové prezentace, který se zobrazuje po zadání adresy webové prezentace (např. www.mojestranky.cz), se jmenuje index (např. index.htm, index.html, index.php, atd.) Organizace souborů webové prezentace Webová prezentace může obsahovat typicky tyto soubory: soubory webové stránky (*.htm *.html *.php *.asp) externí definice kaskádových stylů (*.css) obrázky (*.jpg *.gif *.png) videa (*.mpg *.avi *.flv) audio (*.mp3 *.wav *.ogg) dokumenty (*.pdf *.doc *.xls *.pps) 3
Organizace souborů webové prezentace Pro snadnou správu webové prezentace je vhodné soubory dle obsahu (typu) rozdělit do jednotlivých podadresářů: www Kořenová složka - obsahuje soubory webové stránky (složka přístupná po přihlášení na webový server). css obr video audio dokumenty Užitečný tip: Soubory, které tvoří webovou prezentaci, optimalizujeme na co nejmenší velikost: RYCHLÉ NAČÍTÁNÍ Z WEBOVÉHO SERVERU! 4
Značkovací jazyk HTML a XHTML HTML (HyperText Markup Language) Hypertextový značkovací jazyk. Označuje obsah webové stránky a určuje prohlížeči co bude nadpis, odstavec, odkaz, seznam, blok textu, apod. Označuje, kde bude vložena tabulka, obrázek, formulář, apod. Existují HTML značky, které nejsou sémanticky správné (např. úprava fontu, blikající a jezdící text, podtržení, zarovnání, atd.). Určují pouze vzhled, neurčují smysl textu. U striktních verzí (X)HTML je nelze použít, obecně se nedoporučují! Značkovací jazyk HTML a XHTML XHTML (extensible HyperText Markup Language) Novější a přísnější verze značkovacího jazyka HTML. Striktní verze (neplatí pro Transitional) eliminuje použití HTML značek pro úpravu obsahu (využití kaskádových stylů). Myšlenka přísnějšího značkovacího jazyka XHTML: - oddělení obsahu od formy webové stránky, - vzhled stránky většinou shodný u všech známých prohlížečů, - jasnější pravidla pro prohlížeč, zobrazující obsah stránky, - čistší a přehlednější kód webového dokumentu. 5
Užitečný tip: Pro formátování (úpravu) a pozicování obsahu webové stránky se doporučuje používat jazyk CSS (kaskádové styly) Struktura HTML webové stránky <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>název stránky</title> Typ dokumentu - verze použitého jazyka HTML Zobrazí se v záhlaví okna prohlížeče <meta http-equiv="content-type" content="text/html; charset=windows-1250"> </head> <body> <h1> Nadpis </h1> <p> Nějaký text v odstavci </p> </body> </html> Kódování národního jazyka (češtiny) Tělo stránky - vlastní obsah, který se zobrazí v hlavním okně (ploše) prohlížeče 6
Struktura XHTML webové stránky <?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <title>název stránky</title> </head> <body> Zde bude obsah webové stránky </body> </html> 1. Zvolit menu Soubor 2. Položka Nový 3. Záložka Podle Šablony 4. Rozbalit HTML/XHTML 5. Vybrat typ dokumentu Pspad vytvoří nový webový dokument s již vloženou strukturou webové stránky dle zvoleného standardu. 7
Užitečný tip: Většina editorů webových stránek vytvoří v novém souboru základní strukturu sama! (např. Pspad, Dreamweaver, atd.) Deklarace <!DOCTYPE> Informace pro prohlížeč o verzi HTML/XHTML a použitém DTD. DTD (Document Type Definition, česky Definice typu dokumentu) Předpis (norma), který prohlížeči říká, jaké HTML značky a jejich atributy jsou povoleny v dokumentu webové stránky používat a jak s nimi má zacházet. Deklarace <!DOCTYPE> má komplikovaný zápis, editor webových stránek (např. Pspad, Dreamweaver, apod.) ji vytvoří automaticky při zakládání nového souboru dle typu webové stránky (HTML, XHTML) 8
Deklarace <!DOCTYPE> Typy deklarací HTML (4.01) / XHTML (1.0) dokumentu TRANSITIONAL povoluje použití nestandardních značek (především pro formátování vzhledu obsahu). STRICT povoluje pouze značky pro tvorbu struktury webu (nadpisy, odstavce, seznamy, obrázky, formuláře, tabulka, apod.). Formátování a pozicování obsahu se provádí pouze pomocí kaskádových stylů. (důsledné oddělení obsahu od formy webové stránky) Pozn.: Typ dokumentu XHTML 1.1 se podobá XHTML 1.0 Strict DOCTYPE dokumentu HTML 4.01 HTML 4.01 TRANSITIONAL <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> HTML 4.01 STRICT <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> 9
DOCTYPE dokumentu XHTML 1.0 a 1.1 XHTML 1.0 TRANSITIONAL <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> XHTML 1.0 STRICT <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> Ohraničení webového dokumentu Celý HTML / XHTML dokument webové stránky (kromě DOCTYPE) je vymezen párovou značkou <html> </html> HTML dokumenty mají většinou značku bez dalších atributů: <html> Obsah webového dokumentu </html> XHTML dokumenty značku s atributy xmlns, xml:lang, lang: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> Obsah webového dokumentu </html> 10
Hlavička stránky Vymezuje se párovou značkou <head> </head> Hlavička by měla obsahovat obsahovat: - název dokumentu (title) - povinné - meta značky (minimálně kódování čestiny - povinné) - programový kód skriptovacího jazyka javascript - definice kaskádových stylů (CSS) - odkaz na soubor ikony webové stránky (favicon.ico) Poznámka: Kaskádové styly a programový kód javascriptu jsou častěji definovány v externím souboru, v hlavičce je vytvořen pouze odkaz na tento soubor. Hlavička stránky Název webové stránky <title>název webové stránky</title> zobrazuje titulek webové stránky v záhlaví okna prohlížeče definuje název záložky, pokud je stránka uložena do oblíbených zobrazuje titulek stránky ve vyhledávačích 11
Hlavička stránky META značky Jedná se o informace, které definují např. kódování znakové sady (nezbytné pro webový prohlížeč), klíčová slova a popis dokumentu pro vyhledávače, autora, atd. Vhodné vždy v hlavičce uvést! <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <meta name="author" content="jméno autora webových stránek" /> <meta name="description" content="výstižný popis zaměření webové stránky" /> <meta name="keywords" content="klíčová slova oddělená čárkou" /> Hlavička stránky Nastavení kódování češtiny pro webový dokument: Standardní kódování operačního systému Windows: <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> Standardní kódování operačního systému Unix, Linux a v emailech: <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> Vhodné pro kódování mezinárodních dokumentů: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 12
Hlavička stránky Připojení externích souborů Soubor s definicí kaskádových stylů <link rel="stylesheet" type="text/css" media="screen" href="styly.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/styly.css" /> Soubor představující ikonku webové stránky <link rel="shortcut icon" href="favicon.ico" /> Soubor s definicí skriptů jazyka JAVASCRIPT <script type="text/javascript" src="skripty.js"></script> Ukázka konkrétní hlavičky stránky <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <meta name="description" content="jiří Zručný stolařství, truhlářství" /> <meta name="keywords" content="stolařství, truhlářství, havířov, nábytek" /> <meta name="author" content="pavel Chmiel" /> <title>rustikální nábytek</title> <link rel="shortcut icon" href="favicon.ico" /> <link rel="stylesheet" type="text/css" media="screen" href="styly.css" /> </head> 13
ZNAČKY XHTML JAZYKA HTML značka (tag) HTML značky neboli TAGy vymezují (označují) určitý obsah webové stránky a určují, co představuje (nadpis, odstavec, odkaz, seznam, apod.), jaký objekt se má na dané místo vložit (obrázek, formulář, tabulka, horizontální čára, apod.), popřípadě které objekty budou upravovány pomocí kaskádových stylů. Obsah a HTML značky vkládáme mezi párovou značku: <body> </body> Tato značka vymezuje tzv. tělo webové stránky. 14
HTML značka (tag) Jména HTML značek jsou uzavřena v ostrých závorkách < > Mezi nimi se nachází název značky (malými písmeny). Existují dva typy HTML značek: 1. párové značky 2. nepárové značky HTML značka (tag) 1. Párové značky Příklad: odstavce, odkazy, nadpisy, bloky, formulář, seznamy, atd. <značka>objekty nebo jejich části, které má značka ovlivnit</značka> Počáteční značka Koncová značka 2. Nepárové značky Příklad: vložení obrázku, horizontální čáry, odřádkování, atd. <značka> <značka /> Značka v HTML dokumentu Značka v XHTML dokumentu 15
HTML značka (tag) Atributy HTML značky Atributy přiřazují značce vlastnosti. Píší se do počáteční značky. Příklad: <a href="kontakty.htm"> nějaký odkaz </a> <a href="kontakty.htm" title="kontakty"> nějaký odkaz </a> Atributy mají své hodnoty, které se zapisují do uvozovek za rovnítko. Značka může obsahovat více atributů oddělujeme je mezerou. Atributy zapisujeme v libovolném pořadí. Užitečný tip: Název značky (tagu) i atributů píšeme VŽDY MALÝMI PÍSMENY! 16
HTML element HTML element = HTML značka + atributy s hodnotou Pravidla vnořování HTML elementů HTML element může obsahovat další vnořené elementy. Žádné se však nesmí křížit! Chybný zápis vnořených HTML elementů <p> HTML elementy se <strong> nesmí křížit! </p></strong> Správný zápis vnořených HTML elementů <p> HTML elementy se <strong> nesmí křížit! </strong></p> 17
HTML entity Jedná se o speciální kódy, které nahrazují některé znaky: mají v jazyce HTML speciální význam (např. znaky <, >,, ), nenacházející se běžně na CZ / ENG klávesnici, typografické entity (např. nedělitelná mezera, výpustka, atd.). Entita začíná znakem & a končí středníkem ; Mezi nimi je množina znaků (písmena nebo #čísla), reprezentující daný znak, např.: Φ nedělitelná mezera řecké písmeno velké fí výpustka tři tečky HTML entity Editor webových stránek Pspad nabízí vkládání HTML entit pomocí nástroje ASCII tabulka. Nástroj lze zobrazit: Menu Nástroje, položka ASCII tabulka (ALT + A) Nástroj nabízí dvě záložky: ASCII a SYMBOL. Výčet entit naleznete například zde: http://www.jakpsatweb.cz/html/entity-vsechny.html http://www.webtvorba.cz/xhtml/html-entity.html 18
HTML elementy pro textový obsah HTML elementy jednoznačně specifikující textový obsah, který obklopují (tzv. sémanticky správný kód). Umožňují technickým prostředkům a jejich programům porozumět textu alespoň na základní úrovni a správně jej interpretovat. Příklad: (X)HTML jazyk obsahuje značky pro určení nadpisů, odstavce, klíčových slov (důležitý text), číslované a nečíslované seznamy, zkratky, indexy, citace, atd. Poznámka: Některé značky jsou dnes již prakticky nepoužívané, popřípadě jsou zakázané neuvádím je zde!!! Textový element Nadpisy Šest úrovní nadpisů: <h1>1. úroveň</h1> <h2>2. úroveň</h2> <h3>3. úroveň</h3> <h4>4. úroveň</h4> <h5>5. úroveň</h5> <h6>6. úroveň</h6> Všechny nadpisy jsou implicitně zarovnány vlevo. 19
Textový element Odstavce <p>blok textu bude chápán jako 1. odstavec</p> <p>blok textu bude chápán jako 2. odstavec</p> <p> <p> </p> </p> Textový element Odřádkování Značka se vkládá v místě zalomení textu na další řádek: Značka HTML jazyka: <br> Značka XHTML jazyka: <br /> <p>tento text bude na 1. řádku<br />a tento na 2. řádku</p> <br /> 20
Textový element Tučný a důležitý text Značka <b> </b> vymezuje text, který má být tučný, Značka <strong> </strong> vymezuje důležitý či silně zvýrazněný text. <p>každý návštěvník má <strong>vstup zdarma!</strong></p> <p>vektor intenzity el. pole <b>e</b> určuje směr působící el. síly.</p> vstup zdarma je důležité sdělení. E je vektor, značíme jej tučně. Textový element Kurzíva a důležitý text Značka <i> </i> vymezuje text psaný kurzívou, Značka <em> </em> vymezuje důležitý text, menší důraz než <strong> <p>každý návštěvník má <em>vstup zdarma!</em></p> <p>elektrické napětí má jednotku <i>volt</i>.</p> 21
Textový element Horní a dolní index Vymezený text se stává horním, resp. dolním indexem: Horní index: Dolní index: <sup> </sup> <sub> </sub> <p>teplota T<sub>1</sub> = 100 <sup>o</sup>c</p> Textový element Citace Jednořádkový citovaný text: <q> </q> Blokový citovaný text (odstavce): <blockquote> </blockquote> Značka <q> přidává uvozovky ohraničující citovaný text. Značka <blockquote> způsobí odsazení citace od okolního textu. Značky mohou obsahovat nepovinný atribut cite, jehož hodnotou je URL adresa, ze které je citovaný text. V praxi není příliš využitelný, neboť URL není přímo vidět v okně prohlížeče (pouze zdrojový kód). <blockquote cite="http://www.semantika.name"> Citovaný blok textu. Může se jednat o jeden i více odstavců. </blockquote> 22
Textový element Citace <p>albert Einstein řekl:</p> <blockquote>jak vzniká vynález? To všichni vědí, že je něco nemožné, a pak se objeví nějaký blázen, který neví, že je to nemožné, a udělá vynález.</blockquote> <p>paní učitelka řekla: <q>děti, víte co je to vynález?</q></p> Textový element Zkratky Značka vymezující zkratku. Vysvětlení je řešeno pomocí atributu title: <abbr title="popisek, vysvětlení zkratky"> </abbr> <p><abbr title="solid State Drive polovodičový disk">ssd</abbr> se stále více používají u přenosných počítačů.</p> Zkratka se vždy vypíše s tečkovaným podtržením (vyjma Internet Exploreru!). Po najetí kurzorem myši se objeví vysvětlující text v bublině. 23
Textový element Zkratková slova Značka vymezující akronym (zkratkové slovo). Speciální zkratka, která se nehláskuje po písmenech, ale čte se jako jedno slovo, dá se i skloňovat. Příklad: NATO, BESIP, URNA, MODEM, MOSFET, atd. <acronym title="popisek, vysvětlení akronymu"> </acronym> Značky <abbr> a <acronym> vytvářejí vizuálně stejný výsledek. Význam mají především pro nevidomé, hlasový výstup čtečky tato slova přečte rozdílně!!! Textový element Programový kód <pre> <code> program TypeText; var t: text; s: string; begin while not eof(t) do begin readln(t,s); writeln(s); end; end. </code> </pre> Zachová bílé mezery (např. odsazení kódu) Obsah vypíše neproporcionálním písmem 24
Hypertextový odkaz Kliknutím na textový či obrázkový odkaz dojde k přesměrování. <a href="adresa" title="popis odkazu"> objekt odkazu </a> Mezi párovou značkou <a> </a> může být text nebo obrázek. Značka hypertextového odkazu má dva povinné atributy: href hodnotou je adresa (absolutní nebo relativní) cílového dokumentu. title hodnotou je textový popisek odkazu. Hypertextový odkaz Toto je <a href="soubor.htm" title="popisek">odkaz</a> Dalším (nepovinným) atributem je target. Je-li hodnota _blank, otevře se cílový dokument v novém okně. Atribut není povolen u dokumentů typu XHTML 1.0 Strict a XHTML 1.1 25
Hypertextový odkaz ABSOLUTNÍ ADRESA <a href="http://www.firma.cz" title="naše firma">odkaz na firmu</a> Odkaz na dokument (např. webovou stránku), který se nachází na jiném serveru. Odkaz na jinou stránku musí vždy obsahovat část http:// Hodnotou atributu href je adresa cílového dokumentu (v tomto případě http://www.firma.cz). Zobrazovaný a klikatelný text bude odkaz na firmu Hypertextový odkaz RELATIVNÍ ADRESA <a href="kontakty.htm" title="kontaktní údaje">kontakty na firmu</a> <a href="soubory/cenik.pdf">ceník služeb</a> Odkaz na dokument v rámci jedné webové prezentace (stejný server). Tvorba relativních odkazů (href): slozka/podstranka.htm (odkazuje na dokument ve složce o úroveň níže)../podstranka.htm (odkazuje na dokument ve složce o úroveň výše) 26
zdroj: http://polopate.jakpsatweb.cz Hypertextový odkaz ZÁLOŽKA odkaz na konkrétní místo v dokumentu Vhodné např. u rozsáhlých dokumentů (mnoho textu a obrázků) Pro funkční záložku je potřeba: 1. Definice samotné záložky (pojmenování objektu) 2. Tvorba odkazu, který odkazuje na záložku 27
Hypertextový odkaz ZÁLOŽKA odkaz na konkrétní místo v dokumentu 1. Pojmenování a vložení záložky Do určitého místa v dokumentu (cíl odkazu) vložíme následující kód: <a name="jmeno_zalozky"></a> Lze také použít atribut id příslušného (X)HTML elementu, například: <p id="jmeno_zalozky">text odstavce </p> <h1 id="jmeno_zalozky">nadpis</h1> Jedná se o moderní a doporučený způsob tvorby záložky. Hypertextový odkaz ZÁLOŽKA odkaz na konkrétní místo v dokumentu 2. Tvorba odkazu na záložku Hodnota atributu href začíná mřížkou neboli hash-markem # (pravý ALT + X), na níž přímo (bez mezery) navazuje jméno záložky. Záložka je ve stejné webové stránce: <a href="#jmeno_zalozky">odkaz na záložku</a> Záložka je umístěna v jiné webové stránce: <a href="stranka.htm#jmeno_zalozky">odkaz na záložku</a> 28
Užitečný tip: Název záložky by měl obsahovat pouze písmena bez diakritiky, čísla, pomlčku nebo podtržítko. Seznamy 1. Nečíslovaný (neuspořádaný) seznam <ul> <li>máta</li> <li>heřmánek</li> <li>černý bez</li> Unordered List vymezení položek nečíslovaného seznamu List Items Položky nečíslovaného seznamu </ul> Atribut type (nepovinný) určuje typ odrážky. Možné hodnoty jsou: circle, disc, square. Seznamy s obrázkovou odrážkou lze vytvořit pomocí kaskádových stylů a vlastnosti list-style-image. 29
Seznamy 2. Číslovaný seznam <ol> <li>máta</li> <li>heřmánek</li> <li>černý bez</li> Ordered List vymezení položek číslovaného seznamu List Items Položky číslovaného seznamu </ol> Atribut type (nepovinný) určuje typ odrážky. Možné hodnoty jsou: 1 (číslice), A, a (písmena), i,i (římské číslice). Číselná hodnota atributu start určuje počáteční hodnotu (závisí na typu odrážky!!!) Seznamy 3. Seznam definic <dl> <dt>cd</dt> <dd>compact Disc</dd> <dt>dvd</dt> Definition List ohraničení seznamu Definition Term ohraničení pojmu Definition definice pojmu <dd>digital Video Disc</dd> </dl> Používá se v případě, kdy potřebujeme vypsat např. nějaké termíny a k nim jejich definice nebo popisy. 30
Seznamy Kombinace seznamů <ol> <li>ovoce <ul> <li>jablko</li> <li>hruška</li> <li>švestka</li> </ul> </li> <li>zelenina</li> </ol> Užitečný tip: Seznam zajišťuje návštěvníkovi webu dobrou orientaci v textu a čitelnost. 31
Tabulka <table> <tr> <th>jméno</th> <th>příjmení</th> <th>zkratka</th> </tr> <tr> <td>pavel</td> <td>chmiel</td> <td>chm</td> </tr> </table> Tabulka Řádek tabulky Hlavičková buňka tabulky Buňka tabulky Tabulka Nadpis tabulky Pro nadpis tabulky se používá párová značka: <caption>nadpis tabulky</caption> Značka se vkládá bezprostředně za značku <table> <table> <caption>jména učitelů</caption> <tr> Zbývající struktura tabulky 32
Tabulka Slučování buněk tabulky <table> <tr> <th colspan="2">student</th> </tr> <tr> <td rowspan="2">pohlaví</td> <td>muž</td> </tr> <tr> <td>žena</td> </tr> </table> colspan Sloučí několik buněk v jednom řádku rowspan Sloučí několik buněk v jednom sloupci Užitečný tip: Tabulky používáme pouze pro prezentaci tabulkových údajů, nikoliv pro pozicování prvků a obsahu webové stránky! 33
Vkládání obrázku Obrázek je uložen jako samostatný soubor na webovém serveru. Ve webové prezentaci se zobrazí vložením nepárové značky: Jazyk HTML: <img> Jazyk XHTML: <img /> <img src="slozka/obrazek.jpg" alt="popis obrázku" /> Alternativní popisek (alt) je povinný atribut, který se zobrazí při nenačtení obrázku. Nezbytný je pro nevidomé (hlasový výstup čtečky). Preferované formáty obrázků pro web jsou JPG, GIF, PNG. Vhodné je zadat šířku (width) a výšku (height) obrázku v pixelech: <img src="obr.jpg" alt="popis" width="100" height="20" /> Vkládání obrázku <p>pod tímto odstavcem bude obrázek:</p> <img src="smajlik.jpg" alt="smajlík" /> Místo nenačteného obrázku se zobrazí alternativní text. 34
Vkládání flash videa Validní kód jazyka XHTML pro vložení videa (formát swf, flv): <object type="application/x-shockwave-flash" data="nazev.swf" width="400" height="210"> <param name="movie" value="nazev.swf" /> </object> Horizontální čára Značka se vkládá v místě vložení horizontální čáry: Značka HTML jazyka: <hr> Značka XHTML jazyka: <hr /> <p>pod tímto odstavcem bude vložena horizontální čára:</p><hr /> 35
Formuláře Umožňují uživateli vyplňovat na stránce údaje, které se následně zpracují pomocí skriptu (nejčastěji PHP, ASP nebo javascript). Výsledkem může být: modifikace obsahu webové stránky dle zadaných hodnot, uložení zadaných hodnot do databáze, odeslání mailu uživateli se zadanými hodnotami, autorizovaný přístup do zabezpečené části webové prezentace, atd. Formuláře 36
Vložení formuláře <form action="obsluha.php" method="post">... HTML značky pro vložení formulářových prvků Lze zde umístit také normální (formátovaný) text </form> ATRIBUT VÝZNAM HODNOTA action skript, který bude zpracovávat data odkaz na obslužný skript (soubor) method způsob předávání dat POST, GET enctype Způsob zakódování dat a) Neuvádí se (textový formulář) b) application/x-www-form-urlencoded c) multipart/form-data (soubory) Formulářové prvky Univerzální formulářový prvek <input /> - vstupní pole. <input type="typ" name="jméno" value="hodnota" /> ATRIBUT VÝZNAM HODNOTA type name value disabled druh vstupního pole jméno prvku počáteční hodnota prvek je zašedlý, nelze měnit hodnoty text, password, submit, reset, checkbox, radio, file, hidden libovolná, unikátní, doporučení bez diakritiky libovolný text, diakritika povolena bez hodnoty Další atributy formulářového prvku budou přístupné dle atributu TYPE! 37
Textové jednořádkové pole ATRIBUT VÝZNAM HODNOTA type jednořádkové textové pole text size šířka pole ve znacích celé číslo (např. 30) maxlength nejvyšší možný počet zadaných znaků celé číslo (např. 30) <input type="text" name="prijmeni" value="zadej příjmení" size="20" /> <input type="text" name="prijmeni" value="zadej příjmení" disabled="disabled" /> Pole pro zadání hesla Atributy a hodnoty jsou stejné jako u textového pole. Při zadávání hesla se objevují tečky nebo hvězdičky (dle prohlížeče). <input type="password" name="heslo" /> Bez zadaného hesla (shodné s textovým polem) Vložení hesla (znaky nahrazeny tečkami) 38
Tlačítko pro odeslání dat z formuláře Data z formuláře jsou odeslána obslužnému skriptu: <input type="submit" value="přihlášení" /> Tlačítko nelze stisknout = data nelze odeslat: <input type="submit" value="přihlášení" disabled ="disabled" /> Zaškrtávací políčko Zaškrtávací políčko bez volby. V případě volby (zaškrtnutí) se odesílá hodnota ano. <input type="checkbox" name="odesli_mail" value="ano" /> Zaškrtávací políčko s přednastavenou volbou. Pokud uživatel volbu zruší, z formuláře se neodesílá hodnota ano. <input type="checkbox" name="odesli_mail" value="ano" checked="checked" /> 39
Pole přepínačů Soubor přepínacích polí, kdy zatrženo může být vždy pouze jedno. Z formuláře se odesílá hodnota pole, které je vybráno (checked). Chci zasílat novinky <br /> <input type="radio" name="prepinac" value="t" />týdně<br /> <input type="radio" name="prepinac" value="m" checked="checked" /> měsíčně<br /> <input type="radio" name="prepinac" value="n" />nikdy Skrytý (neviditelný) prvek Neviditelný formulářový prvek pro odesílání skrytých hodnot z formuláře. <input type="hidden" name="uziv_prihlasen" value="ano" /> Většinou bývá za hodnotu atributu value dosazena hodnota proměnné. 40
Další podoby prvku <input /> Tlačítko pro vymazání (defaultní nastavení) hodnot formuláře. <input type="reset" value="vymazat" /> Prvek pro odeslání souboru na vzdálený server. Formulář musí být odeslán metodou (method) POST a používat kódování (enctype) multipart/form-data. <input type="file" /> Obecné tlačítko, bez obslužného skriptu nedělá nic. <input type="button" value="tlačítko" /> Víceřádkové textové pole <textarea name="vzkaz" rows="5" cols="30"> Nějaký text </textarea> ATRIBUT VÝZNAM HODNOTA rows počet viditelných řádků celé číslo (např. 5) cols viditelná šířka prvku ve znacích celé číslo (např. 30) 41
Rozbalovací menu <select name="vzdelani"> <option value="zs">základní škola</option> <option value="ss" selected="selected">střední škola</option> <option value="vs">vysoká škola</option> </select> Skriptu se posílá hodnota atributu value (zde např. zs, ss, nebo vs). Atribut selected provede předvýběr položky ze seznamu (není povinný). Seskupení formulářových prvků <form> <fieldset> <legend>přihlašovací formulář</legend> Login: <input type="text" name="login"><br> Heslo: <input type="password" name="heslo"> <input type="submit" value="přihlášení"> </fieldset> </form> 42
HTML elementy bez významu HTML elementy, které samy o sobě nenesou žádnou informaci. Používají se ve spojitosti s kaskádovými styly pro formátování či pozicování obsahu a struktury webové stránky 1. Blokový párový element DIV <div> obsah DIVu </div> dochází k zalomení před i za elementem DIV. ohraničuje libovolný řádkový i blokový obsah (text, obrázky, atd.). Používá se hlavně k vytvoření kostry vzhledu webové stránky. HTML elementy bez významu 2. Řádkový párový element SPAN <span> obsah SPANu </span> nedochází k zalomení před ani za elementem SPAN. ohraničuje pouze řádkový obsah (řádkové HTML elementy). Používá se k formátování textového obsahu pomocí kaskádových stylů. Elementy DIV i SPAN mají obvykle definovány atributy id nebo class, jejichž hodnotou je název identifikátoru (id) nebo třídy (class) kaskádového stylu. Praktické ukázky použití budou prezentovány v modulu TWS_3b. 43
Užitečný tip: HTML elementy SPAN i DIV nejsou sémantické (nenesou žádnou informaci) Nestavíme web pouze na těchto elementech!!! Konec modulu TWS_03a Děkuji Vám za pozornost. 44