TVORBA WEBOVÝCH STRÁNEK

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
Úvod do značkovacích jazyků HTML a XHTML Struktura webové stránky, popis částí Základní značky jazyka HTML a XHTML

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.

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ř. 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)

Organizace souborů webové prezentace
Pro snadnou správu webové prezentace je vhodné soubory dle obsahu (typu) rozdělit do jednotlivých podadresářů: Kořenová složka - obsahuje soubory webové stránky (složka přístupná po přihlášení na webový server). www 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!

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.

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> <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> Typ dokumentu - verze použitého jazyka HTML Zobrazí se v záhlaví okna prohlížeče 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

Struktura XHTML webové stránky
<?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="cs" lang="cs"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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.

(např. Pspad, Dreamweaver, atd.)
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)

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" " HTML 4.01 STRICT <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

DOCTYPE dokumentu XHTML 1.0 a 1.1
XHTML 1.0 TRANSITIONAL <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " XHTML 1.0 STRICT <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "

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=" xml:lang="cs" lang="cs"> …Obsah webového dokumentu… </html>

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

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 ech: <meta http-equiv="Content-Type" content="text/html; charset=iso " /> Vhodné pro kódování mezinárodních dokumentů: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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>

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.

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

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í.

Název značky (tagu) i atributů píšeme VŽDY MALÝMI PÍSMENY!
Užitečný tip: Název značky (tagu) i atributů píšeme VŽDY MALÝMI PÍSMENY!

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>

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:

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.

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

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>

Textový element – Horní a dolní index
Vymezený text se stává horním, resp. dolním indexem: Horní index: <sup> </sup> Dolní index: <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=" Citovaný blok textu. Může se jednat o jeden i více odstavců </blockquote>

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ě“.

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

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

Hypertextový odkaz ABSOLUTNÍ ADRESA
<a href=" 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 Hodnotou atributu href je adresa cílového dokumentu (v tomto případě 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)

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

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.

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>

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> </ul> Unordered List vymezení položek nečíslovaného seznamu List Items Položky nečíslovaného seznamu 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.

Seznamy 2. Číslovaný seznam <ol>
<li>máta</li> <li>heřmánek</li> <li>černý bez</li> </ol> Ordered List vymezení položek číslovaného seznamu List Items Položky číslovaného seznamu 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> <dd>Digital Video Disc</dd> </dl> Definition List – ohraničení seznamu Definition Term – ohraničení pojmu Definition – definice pojmu Používá se v případě, kdy potřebujeme vypsat např. nějaké termíny a k nim jejich definice nebo popisy.

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.

Hlavičková buňka tabulky
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 …

Tabulka Slučování buněk tabulky <table> <tr>
<th colspan="2">Student</th> </tr> <td rowspan="2">Pohlaví</td> <td>muž</td> <td>žena</td> </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 !

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.

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

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

Vložení formuláře ATRIBUT VÝZNAM HODNOTA
<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 druh vstupního pole text, password, submit, reset, checkbox, radio, file, hidden name jméno prvku libovolná, unikátní, doporučení bez diakritiky value počáteční hodnota libovolný text, diakritika povolena disabled prvek je „zašedlý“, nelze měnit hodnoty bez hodnoty Další atributy formulářového prvku budou přístupné dle atributu TYPE !

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

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

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é.

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)

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>

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.

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.

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