TVORBA WEBOVÝCH STRÁNEK

Rozměr: px
Začít zobrazení ze stránky:

Download "TVORBA WEBOVÝCH STRÁNEK"

Transkript

1 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

2 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

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

4 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

5 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

6 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

7 Struktura XHTML webové stránky <?xml version="1.0" encoding="iso "?> <!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 " /> <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

8 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

9 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

10 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

11 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

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

13 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

14 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

15 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

16 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

17 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

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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

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

27 zdroj: 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

28 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

29 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

30 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

31 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

32 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

33 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

34 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

35 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

36 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

37 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

38 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

39 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

40 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

41 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

42 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

43 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

44 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

HTML Hypertext Markup Language

HTML Hypertext Markup Language HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé

Více

Návrh a tvorba WWW stránek 1/8. Formuláře

Návrh a tvorba WWW stránek 1/8. Formuláře Návrh a tvorba WWW stránek 1/8 Formuláře význam předávání hodnot od uživatele skriptům mezi značkami a základní atributy action definuje obslužný skript, nelze v XHTML method metoda, kterou

Více

HTML - Úvod. Zpracoval: Petr Lasák

HTML - Úvod. Zpracoval: Petr Lasák HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají

Více

Formuláře. Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí!

Formuláře. Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí! Formuláře Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí! HTML formuláře: Formuláře Možnost, jak uživatel může vložit obsah na web - odeslat data na server - zpracovat data ve

Více

TNPW1 Cvičení 3 6.10.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 3 6.10.2015 aneta.bartuskova@uhk.cz 6.10.2015 aneta.bartuskova@uhk.cz Struktura stránky 6.10.2015 aneta.bartuskova@uhk.cz Struktura stránky Sémantická - pomocí HTML Stránka je chápána jako skupina oblastí, každá oblast má svůj účel (menu,

Více

Inovace a zkvalitnění výuky prostřednictvím ICT Tvorba webových stránek. Ing. Zelinka Pavel Číslo: VY_32_INOVACE_35 17 Anotace:

Inovace a zkvalitnění výuky prostřednictvím ICT Tvorba webových stránek. Ing. Zelinka Pavel Číslo: VY_32_INOVACE_35 17 Anotace: Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Šablona: Název: Téma: Autor: Inovace a zkvalitnění výuky prostřednictvím ICT Tvorba webových stránek Formuláře v (X)HTML II. Ing.

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou

Více

Hlavička dokumentu. mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka</a> </h3> <p> <img alt="Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka" title="Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka" class="news-block-img pull-right" src="/thumbs/48/23934103.jpg"> 1/10 Hlavička dokumentu mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka vzorová stránka - definuje vztah k jiným </p> <a href="/23934103-Hlavicka-dokumentu-mezi-head-a-head-obsahuje-informace-vztazene-k-dokumentu-metadata-title-nazev-stranky-povinna-parova-znacka.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595476-Tvorba-www-stranek-mojmir-volf-mojmir-volf-tul-cz-https-www-nti-tul-cz-wiki-wikiuser-mojmir-volf-485-353-675.html">Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675</a> </h3> <p> <img alt="Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675" title="Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675" class="news-block-img pull-right" src="/thumbs/20/595476.jpg"> Tvorba WWW stránek Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Zdroje KRUG: Web design - nenuťte uživatele přemýšlet.. Computer Press, 2003. PROKOP M.: CSS </p> <a href="/595476-Tvorba-www-stranek-mojmir-volf-mojmir-volf-tul-cz-https-www-nti-tul-cz-wiki-wikiuser-mojmir-volf-485-353-675.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595654-Tvorba-webovych-stranek.html">Tvorba webových stránek</a> </h3> <p> <img alt="Tvorba webových stránek" title="Tvorba webových stránek" class="news-block-img pull-right" src="/thumbs/20/595654.jpg"> Tvorba webových stránek 1 HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený </p> <a href="/595654-Tvorba-webovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/491485-Tvorba-www-stranek-prikazy-jazyka-html-budeme-pracovat-nasledovne-zakladni-struktura-webove-stranky-prikazy-sekce-head.html">Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD</a> </h3> <p> <img alt="Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD" title="Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD" class="news-block-img pull-right" src="/thumbs/20/491485.jpg"> Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu </p> <a href="/491485-Tvorba-www-stranek-prikazy-jazyka-html-budeme-pracovat-nasledovne-zakladni-struktura-webove-stranky-prikazy-sekce-head.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/18931438-12-zaklady-html-a-formulare-v-html.html">12. Základy HTML a formuláře v HTML</a> </h3> <p> <img alt="12. Základy HTML a formuláře v HTML" title="12. Základy HTML a formuláře v HTML" class="news-block-img pull-right" src="/thumbs/39/18931438.jpg"> 12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura </p> <a href="/18931438-12-zaklady-html-a-formulare-v-html.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/30294836-Zaklady-informatiky-html-tvorba-www-stranek-daniela-szturcova-cast-prevzata-z-prednasky-p-dergela.html">Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela</a> </h3> <p> <img alt="Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela" title="Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela" class="news-block-img pull-right" src="/thumbs/52/30294836.jpg"> Základy informatiky HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra HTML </p> <a href="/30294836-Zaklady-informatiky-html-tvorba-www-stranek-daniela-szturcova-cast-prevzata-z-prednasky-p-dergela.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/37775171-Nswi096-internet-uvod-do-html.html">NSWI096 - INTERNET. Úvod do HTML</a> </h3> <p> <img alt="NSWI096 - INTERNET. Úvod do HTML" title="NSWI096 - INTERNET. Úvod do HTML" class="news-block-img pull-right" src="/thumbs/55/37775171.jpg"> NSWI096 - INTERNET Úvod do HTML XHTML CO TO JE? XML extensible Markup Language Sada pravidel, jak kódovat dokumenty Podle těchto pravidel lze vytvořit nekonečně mnoho různých jazyků HTML HyperText Markup </p> <a href="/37775171-Nswi096-internet-uvod-do-html.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1532955-Tvorba-webu-uvod-a-zakladni-principy-martin-urza.html">Tvorba webu. Úvod a základní principy. Martin Urza</a> </h3> <p> <img alt="Tvorba webu. Úvod a základní principy. Martin Urza" title="Tvorba webu. Úvod a základní principy. Martin Urza" class="news-block-img pull-right" src="/thumbs/22/1532955.jpg"> Tvorba webu Úvod a základní principy Martin Urza World Wide Web (WWW) World Wide Web (doslova celosvětová pavučina ) je označení pro mnoho dokumentů rozmístěných na různých serverech po celém světě. Tyto </p> <a href="/1532955-Tvorba-webu-uvod-a-zakladni-principy-martin-urza.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/8550108-Atribut-vyznam-hodnoty.html">Atribut Význam Hodnoty</a> </h3> <p> <img alt="Atribut Význam Hodnoty" title="Atribut Význam Hodnoty" class="news-block-img pull-right" src="/thumbs/26/8550108.jpg"> Formuláře Tag Význam Párový Výskyt form formulář ano input vstupní pole ne select výběrové pole ano option volba ne textarea velké vstupní pole ano label popis pole ano </p> <a href="/8550108-Atribut-vyznam-hodnoty.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/28133790-Link-definuje-vztah-k-jinym-xhtml-dokumentum-typicky.html"><link> - definuje vztah k jiným XHTML dokumentům, typicky</a> </h3> <p> <img alt="<link> - definuje vztah k jiným XHTML dokumentům, typicky" title="<link> - definuje vztah k jiným XHTML dokumentům, typicky" class="news-block-img pull-right" src="/thumbs/51/28133790.jpg"> Návrh a tvorba WWW stránek 1/10 Hlavička dokumentu mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka vzorová stránka </p> <a href="/28133790-Link-definuje-vztah-k-jinym-xhtml-dokumentum-typicky.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/33334362-Zaklady-informatiky-03-html-tvorba-www-stranek-daniela-szturcova-cast-prevzata-z-prednasky-p-dergela.html">Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela</a> </h3> <p> <img alt="Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela" title="Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela" class="news-block-img pull-right" src="/thumbs/54/33334362.jpg"> Základy informatiky 03, HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra </p> <a href="/33334362-Zaklady-informatiky-03-html-tvorba-www-stranek-daniela-szturcova-cast-prevzata-z-prednasky-p-dergela.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2591451-Zaklady-html-obecna-syntaxe-html-struktura-html.html">Základy HTML. Obecná syntaxe HTML. Struktura HTML</a> </h3> <p> <img alt="Základy HTML. Obecná syntaxe HTML. Struktura HTML" title="Základy HTML. Obecná syntaxe HTML. Struktura HTML" class="news-block-img pull-right" src="/thumbs/24/2591451.jpg"> Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů </p> <a href="/2591451-Zaklady-html-obecna-syntaxe-html-struktura-html.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1765717-Vyvoj-internetovych-aplikaci.html">Vývoj Internetových Aplikací</a> </h3> <p> <img alt="Vývoj Internetových Aplikací" title="Vývoj Internetových Aplikací" class="news-block-img pull-right" src="/thumbs/23/1765717.jpg"> 2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info </p> <a href="/1765717-Vyvoj-internetovych-aplikaci.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595419-22-tvorba-webovych-stranek.html">22. Tvorba webových stránek</a> </h3> <p> <img alt="22. Tvorba webových stránek" title="22. Tvorba webových stránek" class="news-block-img pull-right" src="/thumbs/20/595419.jpg"> 22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči </p> <a href="/595419-22-tvorba-webovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9344767-Www-a-html-zakladni-pojmy-ivo-peterka.html">WWW a HTML. Základní pojmy. Ivo Peterka</a> </h3> <p> <img alt="WWW a HTML. Základní pojmy. Ivo Peterka" title="WWW a HTML. Základní pojmy. Ivo Peterka" class="news-block-img pull-right" src="/thumbs/26/9344767.jpg"> WWW a HTML Základní pojmy WWW World Wide Web systém navzájem propojených stránek Stránky se mohou skládat z částí nacházejících se v různých částech světa. HTML HyperText Markup Language Slouží k psaní </p> <a href="/9344767-Www-a-html-zakladni-pojmy-ivo-peterka.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1964704-Html-xhtml-javascript-php-asp-net-zajimave-odkazy.html">HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy</a> </h3> <p> <img alt="HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy" title="HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy" class="news-block-img pull-right" src="/thumbs/23/1964704.jpg"> V čem se píší web. dokumenty HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy HTML HTML (HyperText Markup Language, značkovací jazyk pro hypertext) standart pro vytváření stránek v systému aplikací World </p> <a href="/1964704-Html-xhtml-javascript-php-asp-net-zajimave-odkazy.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/6023545-Ie1-jazyk-html-a-kaskadove-styly.html">IE1 jazyk HTML a kaskádové styly</a> </h3> <p> <img alt="IE1 jazyk HTML a kaskádové styly" title="IE1 jazyk HTML a kaskádové styly" class="news-block-img pull-right" src="/thumbs/25/6023545.jpg"> IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace. </p> <a href="/6023545-Ie1-jazyk-html-a-kaskadove-styly.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4424001-Mgr-vlastislav-kucera-lekce-c-2.html">Mgr. Vlastislav Kučera lekce č. 2</a> </h3> <p> <img alt="Mgr. Vlastislav Kučera lekce č. 2" title="Mgr. Vlastislav Kučera lekce č. 2" class="news-block-img pull-right" src="/thumbs/24/4424001.jpg"> Mgr. Vlastislav Kučera lekce č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to je to, co se </p> <a href="/4424001-Mgr-vlastislav-kucera-lekce-c-2.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1367396-Za-klady-html-tag-html-html-parova-znacka-ktery-definuje-webovou-stranku-obsah-stranky-konci-znackou.html">Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou</a> </h3> <p> <img alt="Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou" title="Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou" class="news-block-img pull-right" src="/thumbs/22/1367396.jpg"> Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány </p> <a href="/1367396-Za-klady-html-tag-html-html-parova-znacka-ktery-definuje-webovou-stranku-obsah-stranky-konci-znackou.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/357285-Mgr-vlastislav-kucera-prednaska-c-2.html">Mgr. Vlastislav Kučera přednáška č. 2</a> </h3> <p> <img alt="Mgr. Vlastislav Kučera přednáška č. 2" title="Mgr. Vlastislav Kučera přednáška č. 2" class="news-block-img pull-right" src="/thumbs/19/357285.jpg"> Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS </p> <a href="/357285-Mgr-vlastislav-kucera-prednaska-c-2.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/11018426-Ie1-jazyk-html-a-kaskadove-styly.html">IE1 jazyk HTML a kaskádové styly</a> </h3> <p> <img alt="IE1 jazyk HTML a kaskádové styly" title="IE1 jazyk HTML a kaskádové styly" class="news-block-img pull-right" src="/thumbs/27/11018426.jpg"> IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace. </p> <a href="/11018426-Ie1-jazyk-html-a-kaskadove-styly.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/43604598-Ctvrtek-11-dubna-zaklady-html-obecna-syntaxe-html-struktura-html.html">Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML</a> </h3> <p> <img alt="Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML" title="Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML" class="news-block-img pull-right" src="/thumbs/59/43604598.jpg"> Čtvrtek 11. dubna Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje </p> <a href="/43604598-Ctvrtek-11-dubna-zaklady-html-obecna-syntaxe-html-struktura-html.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4736306-Xhtml-1-znackovaci-jazyky-mark-up-soucasti-prostredku-je-system-m-znacek.html">XHTML 1. Značkovací jazyky (mark-up): Součastí prostředků je systém m značek</a> </h3> <p> <img alt="XHTML 1. Značkovací jazyky (mark-up): Součastí prostředků je systém m značek" title="XHTML 1. Značkovací jazyky (mark-up): Součastí prostředků je systém m značek" class="news-block-img pull-right" src="/thumbs/25/4736306.jpg"> XHTML 1 Jazyk HTML značkovací jazyk, speciálně vyvinutý pro popis Internetových dokumentů. HTML umožňuje popis: struktury dokumentu; obsahu dokumentu; způsobu zobrazení obsahu prohlížečem na displeji. </p> <a href="/4736306-Xhtml-1-znackovaci-jazyky-mark-up-soucasti-prostredku-je-system-m-znacek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/44182406-Nazev-dum-vy_32_inovace_2b_14_-programovaci_jazyk_html.html">Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML</a> </h3> <p> <img alt="Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML" title="Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML" class="news-block-img pull-right" src="/thumbs/60/44182406.jpg"> Název školy: Základní škola a Mateřská škola Žalany Číslo projektu: CZ. 1.07/1.4.00/21.3210 Téma sady: Informatika pro sedmý až osmý ročník Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Vyučovací </p> <a href="/44182406-Nazev-dum-vy_32_inovace_2b_14_-programovaci_jazyk_html.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/24778289-X-html-tagy-vos-a-sst-ceska-trebova.html">(X)HTML-TAGY. VOŠ a SŠT Česká Třebová</a> </h3> <p> <img alt="(X)HTML-TAGY. VOŠ a SŠT Česká Třebová" title="(X)HTML-TAGY. VOŠ a SŠT Česká Třebová" class="news-block-img pull-right" src="/thumbs/48/24778289.jpg"> (X)HTML-TAGY Mgr. Petr Slívko VOŠ a SŠT Česká Třebová Tagy Popis Značka tagu začíná levou ostrou závorkou. Za ní následuje jméno tagu, před kterým nesmí být mezera. Mohou následovat atributy. Před </p> <a href="/24778289-X-html-tagy-vos-a-sst-ceska-trebova.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/11860876-Tnpw1-cviceni-2-6-10-2015-aneta-bartuskova-uhk-cz.html">TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz</a> </h3> <p> <img alt="TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz" title="TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz" class="news-block-img pull-right" src="/thumbs/27/11860876.jpg"> 6.10.2015 aneta.bartuskova@uhk.cz TNPW1 Cvičení 1 Technologie pro tvorbu webu HTML, HTML5 značkovací jazyk struktura, obsah, odkazy - hypertext CSS, CSS3 kaskádové styly vzhled (rozvržení, formátování, </p> <a href="/11860876-Tnpw1-cviceni-2-6-10-2015-aneta-bartuskova-uhk-cz.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3908200-Zaklady-programovaciho-jazyka-html-autor-ing-jan-nozicka-sos-a-sou-ceska-lipa-vy_32_inovace_1133_zaklady-programovaciho-jazyka-html_pwp.html">Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP</a> </h3> <p> <img alt="Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP" title="Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP" class="news-block-img pull-right" src="/thumbs/24/3908200.jpg"> Základy programovacího jazyka HTML Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP Název školy: Číslo a název projektu: Číslo a název šablony klíčové </p> <a href="/3908200-Zaklady-programovaciho-jazyka-html-autor-ing-jan-nozicka-sos-a-sou-ceska-lipa-vy_32_inovace_1133_zaklady-programovaciho-jazyka-html_pwp.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/28660531-Formulare-neomezeny-pocet-formularovych-poli-v-ramci-html-dokumentu-muze-byt-vice-formularu-nelze-je-ale-do-sebe-vnorovat.html">Formuláře. neomezený počet formulářových polí v rámci HTML dokumentu může být více formulářů, nelze je ale do sebe vnořovat</a> </h3> <p> <img alt="Formuláře. neomezený počet formulářových polí v rámci HTML dokumentu může být více formulářů, nelze je ale do sebe vnořovat" title="Formuláře. neomezený počet formulářových polí v rámci HTML dokumentu může být více formulářů, nelze je ale do sebe vnořovat" class="news-block-img pull-right" src="/thumbs/51/28660531.jpg"> Formuláře význam předávání hodnot od uživatele skriptům mezi značkami a základní atributy action definuje obslužný skript, nelze v HTML method metoda, kterou klient předává data serveru </p> <a href="/28660531-Formulare-neomezeny-pocet-formularovych-poli-v-ramci-html-dokumentu-muze-byt-vice-formularu-nelze-je-ale-do-sebe-vnorovat.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2592011-13-vytvareni-webovych-stranek.html">13. Vytváření webových stránek</a> </h3> <p> <img alt="13. Vytváření webových stránek" title="13. Vytváření webových stránek" class="news-block-img pull-right" src="/thumbs/24/2592011.jpg"> 13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací </p> <a href="/2592011-13-vytvareni-webovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1733748-X-html-css-a-jquery.html">(X)HTML, CSS a jquery</a> </h3> <p> <img alt="(X)HTML, CSS a jquery" title="(X)HTML, CSS a jquery" class="news-block-img pull-right" src="/thumbs/22/1733748.jpg"> Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje </p> <a href="/1733748-X-html-css-a-jquery.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/739380-Zaklady-html-url-http-druhy-skriptovani-formulare.html">Základy HTML, URL, HTTP, druhy skriptování, formuláře</a> </h3> <p> <img alt="Základy HTML, URL, HTTP, druhy skriptování, formuláře" title="Základy HTML, URL, HTTP, druhy skriptování, formuláře" class="news-block-img pull-right" src="/thumbs/18/739380.jpg"> Základy HTML, URL, HTTP, druhy skriptování, formuláře Skriptování na straně klienta a serveru Skriptování na straně klienta se provádí pomocí programovacího jazyka JavaScript, který je vkládán do HTML </p> <a href="/739380-Zaklady-html-url-http-druhy-skriptovani-formulare.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9538939-Usporadani-klient-server-standardy-pro-web.html">Uspořádání klient-server. Standardy pro Web</a> </h3> <p> <img alt="Uspořádání klient-server. Standardy pro Web" title="Uspořádání klient-server. Standardy pro Web" class="news-block-img pull-right" src="/thumbs/27/9538939.jpg"> Návrh a tvorba WWW stránek 1/11 Uspořádání klient-server klient na straně uživatele (browser, prohlížeč) server program obsluhující požadavky uživatele Standardy pro Web HTTP Hypertext Transfer Protocol </p> <a href="/9538939-Usporadani-klient-server-standardy-pro-web.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7998678-Www-helpmark-cz-tomas-herout.html">www.helpmark.cz Tomáš Herout</a> </h3> <p> <img alt="www.helpmark.cz Tomáš Herout" title="www.helpmark.cz Tomáš Herout" class="news-block-img pull-right" src="/thumbs/26/7998678.jpg"> 4. 1. 2015 1 Obsah prezentace» Jak naplánovat strukturu» Co je to HTML a CSS» Co používat za nástroje» Struktura a logika HTML» DOCTYPE» Hlavička (X)HTML» Tělo (X)HTML» Skupiny (X)HTML tagů» Vztah mezi </p> <a href="/7998678-Www-helpmark-cz-tomas-herout.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2532914-Zaklady-www-publikovani.html">Základy WWW publikování</a> </h3> <p> <img alt="Základy WWW publikování" title="Základy WWW publikování" class="news-block-img pull-right" src="/thumbs/24/2532914.jpg"> Ing. Igor Kopetschke Oddělení aplikované informatiky Ústav nových technologií a aplikované informatiky Fakulta mechatroniky a mezioborových inženýrských studií Technická univerzita v Liberci Email : igor.kopetschke@tul.cz </p> <a href="/2532914-Zaklady-www-publikovani.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3871753-Co-je-html-1-parovy-tag-ma-zacatek-a-konec-2-neparovy-tag-nema-ukoncovaci-znacku.html">Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:</a> </h3> <p> <img alt="Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:" title="Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:" class="news-block-img pull-right" src="/thumbs/24/3871753.jpg"> Co je HTML HTML HyperText Markup Language je značkovací jazyk pro tvorbu www stránek. Jako například Český jazyk má svá slova, tak i HTML obsahuje slova, neboli tagy (značky), které dávají vlastnímu obsahu </p> <a href="/3871753-Co-je-html-1-parovy-tag-ma-zacatek-a-konec-2-neparovy-tag-nema-ukoncovaci-znacku.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/596708-1-struktura-stranky-zasady-pri-psani-kodu-mvc-pattern-web-pro-kodery-petr-kosnar-cvut-fjfi-kfe-pinf-2008.html">1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)</a> </h3> <p> <img alt="1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)" title="1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)" class="news-block-img pull-right" src="/thumbs/20/596708.jpg"> 1. Struktura stránky, zásady při psaní kódu, MVC pattern Web pro kodéry (Petr Kosnar, ČVUT, Obsah } Terminologie } Prezentace x Obsah } Struktura kódu } Sémantika kódu } Struktura stránky } Šablony } Template </p> <a href="/596708-1-struktura-stranky-zasady-pri-psani-kodu-mvc-pattern-web-pro-kodery-petr-kosnar-cvut-fjfi-kfe-pinf-2008.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/27651069-Internetovy-portal-elektrotechnika-2-skoleni.html">Internetový portál Elektrotechnika 2. školení</a> </h3> <p> <img alt="Internetový portál Elektrotechnika 2. školení" title="Internetový portál Elektrotechnika 2. školení" class="news-block-img pull-right" src="/thumbs/51/27651069.jpg"> Internetový portál Elektrotechnika 2. školení Tento projekt je spolufinancovaný Evropským sociálním fondem a státním rozpočtem České republiky č. CZ.1.07/1.3.09/01.0021, D/0059/2009/ŘDP 1 Opakování Přihlášení </p> <a href="/27651069-Internetovy-portal-elektrotechnika-2-skoleni.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3164029-Html-hypertext-markup-language-25-9-2013-josef-steinberger.html">HTML. HyperText Markup Language. 25.9.2013 Josef Steinberger</a> </h3> <p> <img alt="HTML. HyperText Markup Language. 25.9.2013 Josef Steinberger" title="HTML. HyperText Markup Language. 25.9.2013 Josef Steinberger" class="news-block-img pull-right" src="/thumbs/24/3164029.jpg"> HTML HyperText Markup Language 25.9.2013 Josef Steinberger HTML historie, verze Hypertext Jazyk popisující strukturu dokumentu SGML/XML Aplikace Verze: HTML 1 1990+ TBL, CERN HTML 2.0 1995 as RFC 1866 </p> <a href="/3164029-Html-hypertext-markup-language-25-9-2013-josef-steinberger.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/23921591-Tvorba-webovych-stranek.html">Tvorba webových stránek</a> </h3> <p> <img alt="Tvorba webových stránek" title="Tvorba webových stránek" class="news-block-img pull-right" src="/thumbs/48/23921591.jpg"> Tvorba webových stránek Seznamy Seznam je skupina odstavců označených odrážkou. Seznam je: číslovaný je označen pořadovým číslem nebo písmenem, nečíslovaný je označen značkou (odrážkou) Seznam Celý blok </p> <a href="/23921591-Tvorba-webovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3199579-Mgr-vlastislav-kucera-prednaska-c-1.html">Mgr. Vlastislav Kučera přednáška č. 1</a> </h3> <p> <img alt="Mgr. Vlastislav Kučera přednáška č. 1" title="Mgr. Vlastislav Kučera přednáška č. 1" class="news-block-img pull-right" src="/thumbs/24/3199579.jpg"> Mgr. Vlastislav Kučera přednáška č. 1 jazyk (x)html kaskádové styly Castro, E.: HTML, XHTML a CSS. CPress, 2007 Písek, S.: HTML a XHTML, začínáme programovat. Grada Publishing, 2003 Wempen, F.: HTML a </p> <a href="/3199579-Mgr-vlastislav-kucera-prednaska-c-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/43422672-Html-pokracovani-co-uz-vime.html">HTML - pokračování. Co už víme?</a> </h3> <p> <img alt="HTML - pokračování. Co už víme?" title="HTML - pokračování. Co už víme?" class="news-block-img pull-right" src="/thumbs/59/43422672.jpg"> HTML - pokračování Co už víme? HTML slouží ke strukturovanému zápisu informací HTML dokument je jako skládačka Je to text uvozený značkou Základní části jsou HEAD a BODY Nadpisy pomocí </p> <a href="/43422672-Html-pokracovani-co-uz-vime.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/18002456-Obsah-strucna-historie-world-wide-webu-7.html">Obsah. Stručná historie World Wide Webu 7</a> </h3> <p> <img alt="Obsah. Stručná historie World Wide Webu 7" title="Obsah. Stručná historie World Wide Webu 7" class="news-block-img pull-right" src="/thumbs/38/18002456.jpg"> KAPITOLA I Web bez tajemství 1 Kde se vzal web a jeho stránky 2 Kouzlo jménem HTML 3 Jak stránky připravovat 5 Webová grafika 6 Web aktivní a interaktivní 6 Na straně serveru 6 Jak studovat tuto knihu </p> <a href="/18002456-Obsah-strucna-historie-world-wide-webu-7.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4924872-Internet-2-css-skriptovani-dynamicke-prvky.html">Internet 2 css, skriptování, dynamické prvky</a> </h3> <p> <img alt="Internet 2 css, skriptování, dynamické prvky" title="Internet 2 css, skriptování, dynamické prvky" class="news-block-img pull-right" src="/thumbs/25/4924872.jpg"> Internet 2 css, skriptování, dynamické prvky Martin Hejtmánek hejtmmar@fjfi.cvut.cz http://kmlinux.fjfi.cvut.cz/ hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 26. března 2009 Dnešní </p> <a href="/4924872-Internet-2-css-skriptovani-dynamicke-prvky.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9276907-Tvorba-internetovych-stranek.html">Tvorba internetových stránek</a> </h3> <p> <img alt="Tvorba internetových stránek" title="Tvorba internetových stránek" class="news-block-img pull-right" src="/thumbs/26/9276907.jpg"> Tvorba internetových stránek Ing. Michal Seibert E111 Konzultační hodiny: Středa 9:00-10:00h http://tvorba-is.wz.cz/ Samostatný úkol Zvolili jste si doménu a zjistili její cenu? Nalezli jste svůj freehosting? </p> <a href="/9276907-Tvorba-internetovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595703-Tvorba-fotogalerie-v-html-str-1.html">Tvorba fotogalerie v HTML str.1</a> </h3> <p> <img alt="Tvorba fotogalerie v HTML str.1" title="Tvorba fotogalerie v HTML str.1" class="news-block-img pull-right" src="/thumbs/20/595703.jpg"> Tvorba fotogalerie v HTML str.1 obr. A obr. B 1) Spustíme PsPad, vytvoříme nový dokument a otevře se nám okno nový soubor, kde si můžeme zvolit jaký chceme typ. My označíme HTML a potvrdíme. 2) Pro správné </p> <a href="/595703-Tvorba-fotogalerie-v-html-str-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/5218429-Bottle-priklad-databaze-testovaci-data-id-jedinecny-identifikator-radku-bude-typu-int-s-auto_increment-a-nastavime-ho-jako-primarni-klic.html">Bottle -- příklad. Databáze. Testovací data. id Jedinečný identifikátor řádku: Bude typu INT s AUTO_INCREMENT a nastavíme ho jako primární klíč</a> </h3> <p> <img alt="Bottle -- příklad. Databáze. Testovací data. id Jedinečný identifikátor řádku: Bude typu INT s AUTO_INCREMENT a nastavíme ho jako primární klíč" title="Bottle -- příklad. Databáze. Testovací data. id Jedinečný identifikátor řádku: Bude typu INT s AUTO_INCREMENT a nastavíme ho jako primární klíč" class="news-block-img pull-right" src="/thumbs/25/5218429.jpg"> Bottle -- příklad V tomto příkladu se pokusíme vytvořit malou aplikaci umožňující psát jednoduché poznámky. Databáze Nejprve je třeba vytvořit v databázovém serveru uživatele (pokud už není vytvořen) a </p> <a href="/5218429-Bottle-priklad-databaze-testovaci-data-id-jedinecny-identifikator-radku-bude-typu-int-s-auto_increment-a-nastavime-ho-jako-primarni-klic.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3163166-Inovace-vyuky-prostrednictvim-sablon-pro-ss.html">Inovace výuky prostřednictvím šablon pro SŠ</a> </h3> <p> <img alt="Inovace výuky prostřednictvím šablon pro SŠ" title="Inovace výuky prostřednictvím šablon pro SŠ" class="news-block-img pull-right" src="/thumbs/24/3163166.jpg"> Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748 </p> <a href="/3163166-Inovace-vyuky-prostrednictvim-sablon-pro-ss.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/354285-Tvorba-stranek-v-html-ve-wordu.html">Tvorba stránek v HTML ve Wordu</a> </h3> <p> <img alt="Tvorba stránek v HTML ve Wordu" title="Tvorba stránek v HTML ve Wordu" class="news-block-img pull-right" src="/thumbs/19/354285.jpg"> Tvorba stránek v HTML ve Wordu HTML (hypertext markup language hypertextový značkovací jazyk). Internetová stránka jako soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený o </p> <a href="/354285-Tvorba-stranek-v-html-ve-wordu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/561847-Prirucka-sprava-obsahu-webove-prezentace-formatovani-textu.html">PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu</a> </h3> <p> <img alt="PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu" title="PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu" class="news-block-img pull-right" src="/thumbs/20/561847.jpg"> PŘÍRUČKA Správa obsahu webové prezentace Formátování textu Verze: 6.2 Datum: 4.12.2009 Autor: Ing. Michal Šídlo, michal.sidlo@netgenium.com Společnost: NetGenium s.r.o., www.netgenium.com Obsah 1. Základní </p> <a href="/561847-Prirucka-sprava-obsahu-webove-prezentace-formatovani-textu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/5653196-Zaklady-html-autor-palito.html">Základy HTML. Autor: Palito</a> </h3> <p> <img alt="Základy HTML. Autor: Palito" title="Základy HTML. Autor: Palito" class="news-block-img pull-right" src="/thumbs/25/5653196.jpg"> Základy HTML Autor: Palito Zobrazení zdrojového kódu Zobrazení zdrojového kódu Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML. Když si chcete </p> <a href="/5653196-Zaklady-html-autor-palito.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3816700-Jemny-uvod-do-html-co-je-html-znacka-web-nezna-text-formatovany-mezerami-a-konci-radku-ale-ja-potrebuji-psat-vice-mezer-a-urcovat-zalomeni-radku.html">Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!</a> </h3> <p> <img alt="Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!" title="Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!" class="news-block-img pull-right" src="/thumbs/24/3816700.jpg"> Jemný úvod do HTML Redakční systém školního webu umožňuje formátovat text HTML značkami, tedy stejným způsobem, jakým se formátují webové stránky. Tento návod si dává za úkol seznámení se základními formátovacími </p> <a href="/3816700-Jemny-uvod-do-html-co-je-html-znacka-web-nezna-text-formatovany-mezerami-a-konci-radku-ale-ja-potrebuji-psat-vice-mezer-a-urcovat-zalomeni-radku.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1964686-Internet-a-tvorba-www-stranek.html">Internet a tvorba WWW stránek</a> </h3> <p> <img alt="Internet a tvorba WWW stránek" title="Internet a tvorba WWW stránek" class="news-block-img pull-right" src="/thumbs/23/1964686.jpg"> Internet a tvorba WWW stránek HTML hypertextový značkovací jazyk (HyperText Markup Language) označuje (značkuje) části dokumentu. Určuje např. která část textu se má zobrazit jako nadpis, který kus textu </p> <a href="/1964686-Internet-a-tvorba-www-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/561582-Stranka-se-da-otevrit-dvema-zpusoby.html">Stránka se dá otevřít dvěma způsoby</a> </h3> <p> <img alt="Stránka se dá otevřít dvěma způsoby" title="Stránka se dá otevřít dvěma způsoby" class="news-block-img pull-right" src="/thumbs/20/561582.jpg"> Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (Poznámkový blok). Potřebujete webový prohlížeč. Hodí se připojení na internet. Kdo nemá </p> <a href="/561582-Stranka-se-da-otevrit-dvema-zpusoby.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/18390440-Vyssi-odborna-skola-a-stredni-skola-varnsdorf-prispevkova-organizace-sablona-13-vy-32-inovace-0101-0313.html">Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 13 VY 32 INOVACE 0101 0313</a> </h3> <p> <img alt="Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 13 VY 32 INOVACE 0101 0313" title="Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 13 VY 32 INOVACE 0101 0313" class="news-block-img pull-right" src="/thumbs/39/18390440.jpg"> Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace Šablona 13 VY 32 INOVACE 0101 0313 VÝUKOVÝ MATERIÁL Identifikační údaje školy Číslo projektu Název projektu Číslo a název šablony Autor </p> <a href="/18390440-Vyssi-odborna-skola-a-stredni-skola-varnsdorf-prispevkova-organizace-sablona-13-vy-32-inovace-0101-0313.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/739515-Zaklady-html-2-prednaska.html">Základy HTML (2. přednáška)</a> </h3> <p> <img alt="Základy HTML (2. přednáška)" title="Základy HTML (2. přednáška)" class="news-block-img pull-right" src="/thumbs/18/739515.jpg"> Základy HTML (2. přednáška) WWW World Wide Web Sestává ze tří stavebních bloků Síť informačních zdrojů Universal Resource Identifier jednotný způsob jak adresovat zdroje, (URL) protokoly pro přístup ke </p> <a href="/739515-Zaklady-html-2-prednaska.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/35640291-Nswi096-internet-css-kaskadove-styly-mgr-petr-lasak.html">NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák</a> </h3> <p> <img alt="NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák" title="NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák" class="news-block-img pull-right" src="/thumbs/55/35640291.jpg"> NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE </p> <a href="/35640291-Nswi096-internet-css-kaskadove-styly-mgr-petr-lasak.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595609-Tvorba-webovych-stranek-pomoci-html-kodu-v-prikladech-m-semenka-2014.html">Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014</a> </h3> <p> <img alt="Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014" title="Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014" class="news-block-img pull-right" src="/thumbs/20/595609.jpg"> Tvorba webových stránek pomocí HTML kódu v příkladech podpůrný text pro výuku M. Seménka, 2014 na příkladech se studenti seznámí se základními postupy tvorby www stránek Příklady je třeba důkladně prostudovat </p> <a href="/595609-Tvorba-webovych-stranek-pomoci-html-kodu-v-prikladech-m-semenka-2014.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1468603-Webova-stranka-matej-klenka.html">Webová stránka. Matěj Klenka</a> </h3> <p> <img alt="Webová stránka. Matěj Klenka" title="Webová stránka. Matěj Klenka" class="news-block-img pull-right" src="/thumbs/22/1468603.jpg"> Webová stránka Matěj Klenka Osobní webová stránka Toto je dokumentace k mé webové stránce This is a documentation to my web page Já, Matěj Klenka, prohlašuji, že má webová stránka byla vytvořena mnou a </p> <a href="/1468603-Webova-stranka-matej-klenka.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2591333-Webove-stranky-2-uvod-do-jazyka-html-datum-vytvoreni-11-9-2012-str-ank-y-vytvoril-petr-lerch-www-isspolygr-cz.html">Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz</a> </h3> <p> <img alt="Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz" title="Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz" class="news-block-img pull-right" src="/thumbs/24/2591333.jpg"> Webové stránky 2. Úvod do jazyka HTML Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 11. 9. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická </p> <a href="/2591333-Webove-stranky-2-uvod-do-jazyka-html-datum-vytvoreni-11-9-2012-str-ank-y-vytvoril-petr-lerch-www-isspolygr-cz.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/35819691-Uvod-1-cast-1-html-1-zaklady-html-a-kaskadovych-stylu-5.html">Úvod 1 ČÁST 1 HTML 1 Základy HTML a kaskádových stylů 5</a> </h3> <p> <img alt="Úvod 1 ČÁST 1 HTML 1 Základy HTML a kaskádových stylů 5" title="Úvod 1 ČÁST 1 HTML 1 Základy HTML a kaskádových stylů 5" class="news-block-img pull-right" src="/thumbs/55/35819691.jpg"> Úvod 1 ČÁST 1 HTML 1 Základy HTML a kaskádových stylů 5 Struktura dokumentu HTML obsah a forma 5 Prvky dokumentu 7 Jméno prvku 7 Atributy prvku 8 Obsah prvku, hierarchie prvků 9 Zastupující jednotky (entity) </p> <a href="/35819691-Uvod-1-cast-1-html-1-zaklady-html-a-kaskadovych-stylu-5.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/28608580-Internet-a-site-role-pri-tvorbe-webovych-aplikaci-rozhodovaci-vrstvy-pri-tvorbe-webovych-aplikaci-povrch-kostra-struktura-obsah-strategie.html">INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie</a> </h3> <p> <img alt="INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie" title="INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie" class="news-block-img pull-right" src="/thumbs/51/28608580.jpg"> INTERNET A SÍTĚ Ing. Pavel Smutný, Ph.D. Kancelář: H305 Telefon: 3511 Email: pavel.smutny@vsb.cz Role při tvorbě webových aplikací 1996 2009 GIF HTML CSS CGI analytik, informační architekt, grafik, programátor </p> <a href="/28608580-Internet-a-site-role-pri-tvorbe-webovych-aplikaci-rozhodovaci-vrstvy-pri-tvorbe-webovych-aplikaci-povrch-kostra-struktura-obsah-strategie.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2646644-Tvorba-www-stranek-prehled-technologii-pouzivanych-na-webu-principy-jednotlivych-technologii-a-moznosti-jejich-vzajemneho-kombinovani.html">Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování</a> </h3> <p> <img alt="Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování" title="Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování" class="news-block-img pull-right" src="/thumbs/24/2646644.jpg"> Tvorba WWW stránek přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování HTML/XHTML kaskádové styly PHP spolupráce PHP s databázemi Technologie </p> <a href="/2646644-Tvorba-www-stranek-prehled-technologii-pouzivanych-na-webu-principy-jednotlivych-technologii-a-moznosti-jejich-vzajemneho-kombinovani.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/23537132-Formulare-v-html-evropsky-socialni-fond-praha-a-eu-investujeme-do-vasi-budoucnosti.html">Formuláře v HTML. Evropský sociální fond Praha a EU Investujeme do vaší budoucnosti</a> </h3> <p> <img alt="Formuláře v HTML. Evropský sociální fond Praha a EU Investujeme do vaší budoucnosti" title="Formuláře v HTML. Evropský sociální fond Praha a EU Investujeme do vaší budoucnosti" class="news-block-img pull-right" src="/thumbs/46/23537132.jpg"> Formuláře v HTML Praha a EU Investujeme do vaší budoucnosti Obsah 1 Úvod... 2 2 Značky a atributy... 2 2.1 atributy značky form... 2 2.2 Prvky ve formuláři... 3 2.2.1 Textové vstupy... 3 2.2.2 Zaškrtávací </p> <a href="/23537132-Formulare-v-html-evropsky-socialni-fond-praha-a-eu-investujeme-do-vasi-budoucnosti.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/32695683-Html-uvod-do-x-html-tagy-znacky-slouzi-ke-strukturovani-dokumentu-parove-a-neparove-tag-atribut1-hodnota-atributu-text-tag.html">HTML. Úvod do (X)HTML. Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag></a> </h3> <p> <img alt="HTML. Úvod do (X)HTML. Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag>" title="HTML. Úvod do (X)HTML. Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag>" class="news-block-img pull-right" src="/thumbs/53/32695683.jpg"> HTML Úvod do (X)HTML Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) text HTML HyperText Markup Language HTML první verze 1991 Značkovací jazyk </p> <a href="/32695683-Html-uvod-do-x-html-tagy-znacky-slouzi-ke-strukturovani-dokumentu-parove-a-neparove-tag-atribut1-hodnota-atributu-text-tag.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/8898103-Manual-k-editoru-tinymce.html">Manuál k editoru TinyMCE</a> </h3> <p> <img alt="Manuál k editoru TinyMCE" title="Manuál k editoru TinyMCE" class="news-block-img pull-right" src="/thumbs/26/8898103.jpg"> Manuál k editoru TinyMCE Popis ovládacích prvků UPOZORNĚNÍ: Některé tlačítka nemusí být k dispozici. Styl písma Dolní a horní index Zarovnání textu Může se aplikovat na označený text. B - tučné písmo, </p> <a href="/8898103-Manual-k-editoru-tinymce.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/562507-Skola-gymnazium-brno-slovanske-namesti-7-iii-2-inovace-a-zkvalitneni-vyuky-prostrednictvim-ict-nazev-projektu-inovace-vyuky-na-gsn.html">Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN</a> </h3> <p> <img alt="Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN" title="Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN" class="news-block-img pull-right" src="/thumbs/20/562507.jpg"> Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím ICT Číslo projektu: CZ.1.07/1.5.00/34.0940 </p> <a href="/562507-Skola-gymnazium-brno-slovanske-namesti-7-iii-2-inovace-a-zkvalitneni-vyuky-prostrednictvim-ict-nazev-projektu-inovace-vyuky-na-gsn.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2562011-03-zaklady-editace-dynamickych-stranek.html">03 - Základy editace dynamických stránek</a> </h3> <p> <img alt="03 - Základy editace dynamických stránek" title="03 - Základy editace dynamických stránek" class="news-block-img pull-right" src="/thumbs/24/2562011.jpg"> Dynamické WWW stránky V předchozí kapitole byly popsány tagy jazyka HTML, kterým se říká statické. Jinými slovy, lze jimi vytvořit plnohodnotnou a kvalitní statickou stránku. To znamená, že stránka sice </p> <a href="/2562011-03-zaklady-editace-dynamickych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2123813-Php-php-je-skriptovaci-programovaci-jazyk-dynamickych-internetovych-stranek-php-je-nezavisly-na-platforme.html">PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě</a> </h3> <p> <img alt="PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě" title="PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě" class="news-block-img pull-right" src="/thumbs/24/2123813.jpg"> PHP PHP původně znamenalo Personal Home Page a vzniklo v roce 1996, od té doby prošlo velkými změnami a nyní tato zkratka znamená Hypertext Preprocessor. PHP je skriptovací programovací jazyk, určený především </p> <a href="/2123813-Php-php-je-skriptovaci-programovaci-jazyk-dynamickych-internetovych-stranek-php-je-nezavisly-na-platforme.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595575-1-tvorba-www-stranek-pomoci-programu-microsoft-frontpage.html">1 Tvorba WWW stránek pomocí programu Microsoft FrontPage</a> </h3> <p> <img alt="1 Tvorba WWW stránek pomocí programu Microsoft FrontPage" title="1 Tvorba WWW stránek pomocí programu Microsoft FrontPage" class="news-block-img pull-right" src="/thumbs/20/595575.jpg"> 1 Tvorba WWW stránek pomocí programu Microsoft FrontPage Pomocí tohoto programu můžete vytvářet WWW stránky s minimální znalostí HTML kódu. Bohužel takto vytvořené stránky obsahují množství chyb a nejsou </p> <a href="/595575-1-tvorba-www-stranek-pomoci-programu-microsoft-frontpage.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4357174-Internetove-technologie-cviceni-c-5.html">Internetové technologie, cvičení č. 5</a> </h3> <p> <img alt="Internetové technologie, cvičení č. 5" title="Internetové technologie, cvičení č. 5" class="news-block-img pull-right" src="/thumbs/24/4357174.jpg"> Internetové technologie, cvičení č. 5 Náplň cvičení Obsahem 5. cvičení předmětu Internetové technologie je ukázka a procvičení XHTML značek a atributů používaných při vytváření hypertextových odkazů a </p> <a href="/4357174-Internetove-technologie-cviceni-c-5.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3253860-X-html-internetove-publikovani.html">(X)HTML. Internetové publikování</a> </h3> <p> <img alt="(X)HTML. Internetové publikování" title="(X)HTML. Internetové publikování" class="news-block-img pull-right" src="/thumbs/24/3253860.jpg"> (X)HTML Internetové publikování 1 Prohlížeč Obsluhuje přenos a interpretuje obsah Hlavní prohlížeče Microsoft Internet Explorer Firefox Opera Safari WWW stránka WWW stránka dokument (soubor) s informacemi </p> <a href="/3253860-X-html-internetove-publikovani.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595525-Mgr-vlastislav-kucera-prednaska-c-1.html">Mgr. Vlastislav Kučera přednáška č. 1</a> </h3> <p> <img alt="Mgr. Vlastislav Kučera přednáška č. 1" title="Mgr. Vlastislav Kučera přednáška č. 1" class="news-block-img pull-right" src="/thumbs/20/595525.jpg"> Mgr. Vlastislav Kučera přednáška č. 1 jazyk HTML5 CSS3 HTML5 a CSS3: CASTRO, E. HTML5 a CSS3. Computer press, 2012 GOLDSTEIN, A., LAZARIS, L. a WEYL, E. HTML5 a CSS3 pro webové designéry. Brno: Zoner Press, </p> <a href="/595525-Mgr-vlastislav-kucera-prednaska-c-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2842561-Manual-jak-pouzivat-administraci-webovych-stranek-obsah-zaklad-2-upravy-polozky-3-upravy-textove-stranky-4.html">MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4</a> </h3> <p> <img alt="MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4" title="MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4" class="news-block-img pull-right" src="/thumbs/24/2842561.jpg"> MANUÁL Jak používat administraci webových stránek Obsah ZÁKLAD... 2 PŘIHLÁŠENÍ DO ADMINISTRACE... 2 HLAVNÍ MENU... 2 VÝBĚR POLOŽKY... 2 ÚPRAVY POLOŽKY... 3 DETAIL POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... </p> <a href="/2842561-Manual-jak-pouzivat-administraci-webovych-stranek-obsah-zaklad-2-upravy-polozky-3-upravy-textove-stranky-4.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595492-Tvorba-webovych-stranek.html">Tvorba webových stránek</a> </h3> <p> <img alt="Tvorba webových stránek" title="Tvorba webových stránek" class="news-block-img pull-right" src="/thumbs/20/595492.jpg"> Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech </p> <a href="/595492-Tvorba-webovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/28506895-Moderni-web-snadno-a-rychle.html">MODERNÍ WEB SNADNO A RYCHLE</a> </h3> <p> <img alt="MODERNÍ WEB SNADNO A RYCHLE" title="MODERNÍ WEB SNADNO A RYCHLE" class="news-block-img pull-right" src="/thumbs/51/28506895.jpg"> SNADNO A RYCHLE Marek Lučný Pavoučí síť přes celý svět Co prohlížeče (ne)skrývají Tajemný kód HTML Všechno má svůj styl Interaktivní je IN Na obrazovce i na mobilu Začni podle šablony Informace jsou základ </p> <a href="/28506895-Moderni-web-snadno-a-rychle.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/23754939-Formatovani-obsahu-adminweb.html">Formátování obsahu adminweb</a> </h3> <p> <img alt="Formátování obsahu adminweb" title="Formátování obsahu adminweb" class="news-block-img pull-right" src="/thumbs/47/23754939.jpg"> Formátování obsahu adminweb verze 24032015 1 Obsah 1. Možnosti formátování textu...3 2. Formátování v editoru...4 3. Tabulka pro pozicování obsahu...5 4. Tabulka se stylem... 6 5. Šablony...7 6. Obrázky </p> <a href="/23754939-Formatovani-obsahu-adminweb.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2177115-Inovace-vyuky-prostrednictvim-sablon-pro-ss.html">Inovace výuky prostřednictvím šablon pro SŠ</a> </h3> <p> <img alt="Inovace výuky prostřednictvím šablon pro SŠ" title="Inovace výuky prostřednictvím šablon pro SŠ" class="news-block-img pull-right" src="/thumbs/24/2177115.jpg"> Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748 </p> <a href="/2177115-Inovace-vyuky-prostrednictvim-sablon-pro-ss.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/35566447-Cast-1-uvod-1-1-technicke-pozadi-html-a-web-html-a-xhtml-myslenka-css-dalsi-technologie-48.html">Část 1. Úvod. 1.1 Technické pozadí HTML a web HTML a XHTML Myšlenka CSS Další technologie 48</a> </h3> <p> <img alt="Část 1. Úvod. 1.1 Technické pozadí HTML a web HTML a XHTML Myšlenka CSS Další technologie 48" title="Část 1. Úvod. 1.1 Technické pozadí HTML a web HTML a XHTML Myšlenka CSS Další technologie 48" class="news-block-img pull-right" src="/thumbs/55/35566447.jpg"> Předmluva...................................19 Část 1 Úvod 1 Historické pozadí a vývoj................... 25 1.1 Technické pozadí 27 1.2 HTML a web 32 1.3 HTML a XHTML 36 1.4 Myšlenka CSS 46 1.5 Další </p> <a href="/35566447-Cast-1-uvod-1-1-technicke-pozadi-html-a-web-html-a-xhtml-myslenka-css-dalsi-technologie-48.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3995779-Jazyky-xhtml-dhtml-css-a-wml.html">Jazyky XHTML, DHTML, CSS a WML</a> </h3> <p> <img alt="Jazyky XHTML, DHTML, CSS a WML" title="Jazyky XHTML, DHTML, CSS a WML" class="news-block-img pull-right" src="/thumbs/24/3995779.jpg"> Dodatky Petr Pexa 2007 pepe@pf.jcu.cz 1. Upravená kapitola 5.1 Vývojové verze jazyka XHTML Modularizace XHTML Modularizace je proces zařazení jednotlivých elementů do fiktivních modulů podle jejich funkce </p> <a href="/3995779-Jazyky-xhtml-dhtml-css-a-wml.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1200530-Zaklady-xml-struktura-dokumentu-vcetne-testovych-otazek.html">Základy XML struktura dokumentu (včetně testových otázek)</a> </h3> <p> <img alt="Základy XML struktura dokumentu (včetně testových otázek)" title="Základy XML struktura dokumentu (včetně testových otázek)" class="news-block-img pull-right" src="/thumbs/21/1200530.jpg"> Základy XML struktura dokumentu (včetně testových otázek) Otakar Čerba Oddělení geomatiky Katedra matematiky Fakulta aplikovaných věd Západočeská univerzita v Plzni Přednáška z předmětu Počítačová kartografie </p> <a href="/1200530-Zaklady-xml-struktura-dokumentu-vcetne-testovych-otazek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/882567-Microsoft-word-prostredi-zakladni-editace-textu-mgr-jan-veverka-stredni-odborna-skola-socialni-evangelicka-akademie.html">Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie</a> </h3> <p> <img alt="Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie" title="Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie" class="news-block-img pull-right" src="/thumbs/18/882567.jpg"> Microsoft Word prostředí, základní editace textu Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie Microsoft Office balík aplikací používaných v kancelářské i jiné práci Word textový </p> <a href="/882567-Microsoft-word-prostredi-zakladni-editace-textu-mgr-jan-veverka-stredni-odborna-skola-socialni-evangelicka-akademie.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/561859-Mgr-stepan-stepanov-2013.html">Mgr. Stěpan Stěpanov, 2013</a> </h3> <p> <img alt="Mgr. Stěpan Stěpanov, 2013" title="Mgr. Stěpan Stěpanov, 2013" class="news-block-img pull-right" src="/thumbs/20/561859.jpg"> Mgr. Stěpan Stěpanov, 2013 Abstrakt V tomto kurzu se seznámíme se základními pojmy HTML, klíčovými pravidly pro práci se značkami a atributy a strukturou dokumentu. Také se dozvíte, jak a v čem lze vytvářet </p> <a href="/561859-Mgr-stepan-stepanov-2013.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/28660527-Sada-1-php-09-formulare.html">Sada 1 - PHP. 09. Formuláře</a> </h3> <p> <img alt="Sada 1 - PHP. 09. Formuláře" title="Sada 1 - PHP. 09. Formuláře" class="news-block-img pull-right" src="/thumbs/51/28660527.jpg"> S třední škola stavební Jihlava Sada 1 - PHP 09. Formuláře Digitální učební materiál projektu: SŠS Jihlava šablony registrační číslo projektu:cz.1.09/1.5.00/34.0284 Šablona: III/2 - inovace a zkvalitnění </p> <a href="/28660527-Sada-1-php-09-formulare.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1398093-Administrace-webu-postup-pri-praci.html">Administrace webu Postup při práci</a> </h3> <p> <img alt="Administrace webu Postup při práci" title="Administrace webu Postup při práci" class="news-block-img pull-right" src="/thumbs/22/1398093.jpg"> Administrace webu Postup při práci Obsah Úvod... 2 Hlavní menu... 3 a. Newslettery... 3 b. Administrátoři... 3 c. Editor stránek... 4 d. Kategorie... 4 e. Novinky... 5 f. Produkty... 5 g. Odhlásit se... </p> <a href="/1398093-Administrace-webu-postup-pri-praci.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/356186-1-uvod-2-tvorba-internetovych-prezentaci-2-1-nastroje-pro-tvorbu-prezentace-stranka-1.html">1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1</a> </h3> <p> <img alt="1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1" title="1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1" class="news-block-img pull-right" src="/thumbs/19/356186.jpg"> 1 Úvod V tomto studijním textu se seznámíme s tvorbou webových stránek a prezentací a se základy syntaxe jazyka HTML. K tomu, abychom byli schopni vytvořit internetovou stránku, nemusíme používat žádný </p> <a href="/356186-1-uvod-2-tvorba-internetovych-prezentaci-2-1-nastroje-pro-tvorbu-prezentace-stranka-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/672847-Jak-vytva-r-et-webove-stra-nky-pomoci-xhtml-a-css.html">Jak vytva r et webove stra nky pomocı XHTML a CSS.</a> </h3> <p> <img alt="Jak vytva r et webove stra nky pomocı XHTML a CSS." title="Jak vytva r et webove stra nky pomocı XHTML a CSS." class="news-block-img pull-right" src="/thumbs/18/672847.jpg"> Jak vytva r et webove stra nky pomocı XHTML a CSS. K vytváření webových stránek se používají různé editory. Z pohledu tvůrce je nejednodušší způsob jak napsat stránku použít např. editor MS-Word a soubor </p> <a href="/672847-Jak-vytva-r-et-webove-stra-nky-pomoci-xhtml-a-css.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2591882-Webove-stranky-www-krestanskevanoce-cz.html">WEBOVÉ STRÁNKY www.krestanskevanoce.cz</a> </h3> <p> <img alt="WEBOVÉ STRÁNKY www.krestanskevanoce.cz" title="WEBOVÉ STRÁNKY www.krestanskevanoce.cz" class="news-block-img pull-right" src="/thumbs/24/2591882.jpg"> WEBOVÉ STRÁNKY www.krestanskevanoce.cz Domovská stránka Křesťanských Vánoc je založena na databázi, která vedle běžných funkcí redakčního systému internetové prezentace umožňuje též uložit údaje o jednotlivých </p> <a href="/2591882-Webove-stranky-www-krestanskevanoce-cz.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/6792603-K-2-zaklady-zpracovani-textu.html">K 2 - Základy zpracování textu</a> </h3> <p> <img alt="K 2 - Základy zpracování textu" title="K 2 - Základy zpracování textu" class="news-block-img pull-right" src="/thumbs/25/6792603.jpg"> Radek Maca Makovského 436 Nové Město na Moravě 592 31 tel. 0776 / 274 152 e-mail: rama@inforama.cz http://www.inforama.cz K 2 - Základy zpracování textu Mgr. Radek Maca Word I 1 slide ZÁKLADNÍ POJMY PRVKY </p> <a href="/6792603-K-2-zaklady-zpracovani-textu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9637662-M-e-t-o-d-i-k-a-w-i-k-i.html">M E T O D I K A W I K I</a> </h3> <p> <img alt="M E T O D I K A W I K I" title="M E T O D I K A W I K I" class="news-block-img pull-right" src="/thumbs/27/9637662.jpg"> M E T O D I K A W I K I STŘEDNÍ ŠKOLY INFORMATIKY A SPOJŮ, BRNO, ČICHNOVA 23 NÁPOVĚDA OBSAH Webové stránky Střední školy informatiky a spojů, Brno, Čichnova 23... 3 Moje stránka... 6 Přihlášení... 6 Po </p> <a href="/9637662-M-e-t-o-d-i-k-a-w-i-k-i.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/39827701-Tematicky-celek-promenne-promenne-slouzi-k-docasnemu-uchovavani-hodnot-behem-provadeni-aplikace-deklarace-promennych.html">Tematický celek Proměnné. Proměnné slouží k dočasnému uchovávání hodnot během provádění aplikace Deklarace proměnných</a> </h3> <p> <img alt="Tematický celek Proměnné. Proměnné slouží k dočasnému uchovávání hodnot během provádění aplikace Deklarace proměnných" title="Tematický celek Proměnné. Proměnné slouží k dočasnému uchovávání hodnot během provádění aplikace Deklarace proměnných" class="news-block-img pull-right" src="/thumbs/57/39827701.jpg"> Tematický celek 03 3.1 Proměnné Proměnné slouží k dočasnému uchovávání hodnot během provádění aplikace. 3.1.1 Deklarace proměnných Dim jméno_proměnné [As typ] - deklarace uvnitř procedury platí pouze pro </p> <a href="/39827701-Tematicky-celek-promenne-promenne-slouzi-k-docasnemu-uchovavani-hodnot-behem-provadeni-aplikace-deklarace-promennych.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/596686-Databazove-aplikace-pro-internetove-prostredi-01-php-uvod-zakladni-princip-vkladani-skriptu-komentare-vypis-na-obrazovku.html">Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku</a> </h3> <p> <img alt="Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku" title="Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku" class="news-block-img pull-right" src="/thumbs/20/596686.jpg"> Databázové aplikace pro internetové prostředí 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku Projekt: Inovace výuky prostřednictvím ICT Registrační číslo: CZ.1.07/1.5.00/34.250 </p> <a href="/596686-Databazove-aplikace-pro-internetove-prostredi-01-php-uvod-zakladni-princip-vkladani-skriptu-komentare-vypis-na-obrazovku.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> </div> <!-- END RIGHT SIDEBAR --> </div> </div> </div> <!-- END CONTENT --> </div> <!-- END SIDEBAR & CONTENT --> </div> </div> <!-- BEGIN FOOTER --> <div class="footer"> <div class="container"> <div class="row"> <!-- BEGIN COPYRIGHT --> <div class="col-md-10 col-sm-10 padding-top-10"> 2017 © DocPlayer.cz <a href="/support/privacy-policy/">Ochrana osobních údajů</a> | <a href="/support/terms-of-service/">Podmínky obsluhování</a> | <a href="/support/feedback/">Kontaktní formulář</a> </div> <!-- END COPYRIGHT --> <!-- BEGIN PAYMENTS --> <div class="col-md-6 col-sm-6"> </div> <!-- END PAYMENTS --> </div> </div> </div> <!-- END FOOTER --> <!--[if lt IE 9]> <script src="/static/theme/global/plugins/respond.min.js"></script> <![endif]--> <script src="/static/js/f303b/total.js" type="text/javascript"></script> <div style="display: none;"> <script> var page_data = {"domain_id":24,"design_id":0,"page_id":0}; (function(){ var img = new Image(); var pixel_image_src = '/pix/'+Math.random()+'/report/pixel.gif?type=pageview&domain_id=24&page_id=0&design_id=0&l='+encodeURIComponent(navigator.language)+'&p='+encodeURIComponent(navigator.platform)+'&url='+encodeURIComponent(document.location); document.write('<img src="'+pixel_image_src+'"> '); }()); </script> </div> </body> </html>