Internet cvičení (X)HTML Jakub Klímek
|
|
|
- Drahomíra Říhová
- před 7 lety
- Počet zobrazení:
Transkript
1 Internet cvičení (X)HTML Jakub Klímek XML and Web Engineering Research Group Faculty of Mathematics and Physics Charles University, Prague Czech Republic
2 Agenda Požadavky na zápočet jsou na webu Deadline na témata: :59 Deadline: :59 Nechte si rezervu, úkol se vám nemusím uznat a můžete odevzdávat vícekrát Každé odevzdání snižuje možnou známku o 1, kontrolujte zda máte vše co se po vás chce Informace: Internet (X)HTML 2
3 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 Language Jazyk pro tvorbu WWW stránek XHTML extensible HyperText Markup Language "kombinace" Je to jazyk HTML přizpůsobený pravidlům XML Dnes už převážně XHTML Vzhledem k více méně kosmetickým rozdílům budeme používat jen XHTML Internet (X)HTML 3
4 XML jak to vypadá - Tag Řetězec uzavřený v ostrých závorkách <můj_tag> Mají 3 typy Start-tag: <můj_tag> End-tag: </můj_tag> Empty-element tag: <můj_tag/> Internet (X)HTML 4
5 XML jak to vypadá - Element 2 typy Dvojice Start-tag, end-tag se stejným názvem <můj_tag>...</můj_tag>... se nazývají obsah elementu. To může být jak text, tak další elementy Empty-element tag říká že element nemá žádný obsah <můj_tag/> Stejné jako <můj_tag></můj_tag> Internet (X)HTML 5
6 XML jak to vypadá - Obsah Obsah elementu 4 typy Prázdný - <můj_tag/> Textový - <můj_tag>můj text</můj_tag> Elementový <můj_tag><další_tag/><jiný_tag/></můj_tag> Smíšený <můj_tag>t<jiný_tag>text</jiný_tag></můj_tag> Internet (X)HTML 6
7 XML jak to vypadá Atributy Dvojice název/hodnota uvnitř Start-tagu nebo Empty-element tagu Například number="3" Název number Hodnota 3 Příklady <položka id="123">toto je položka</položka> <značka id="456"/> Internet (X)HTML 7
8 XML - pravidla Záleží na velkých a malých písmenech Nelze: <Můj_tag></můj_tag> Správné uzávorkování Nelze: <Tag1><Tag2></Tag1></Tag2> Pouze jeden kořenový element Celý XML dokument má tvar stromu První řádek dokumentu obsahuje hlavičku <?xml version="1.0" encoding="utf-8"?> Encoding je použité kódování znaků Nejlépe Unicode UTF-8 Lze i ISO nebo Windows-1250 Internet (X)HTML 8
9 XML - Příklad <?xml version="1.0" encoding='utf-8'?> <záznam> <img src="fotka.jpg" alt="moje fotka"/> <popis> Tohle je moje fotka ze dne: <datum> <den>2</den>.<měsíc>12</měsíc>. <rok>2009</rok> </datum> </popis> </záznam> Internet (X)HTML 9
10 HTML jak to vypadá Je to sada tagů, atributů a pravidel, jak tyto tagy a atributy mohou být umístěny Tagy: html, body, head, h1, h2, div, span,... Atributy: id, src, ref,... Pravidla "Tag head musí být jen v tagu html a to právě jednou" "Tag img musí mít atribut src"... Internet (X)HTML 10
11 HTML vs. XHTML HTML není XML, XHTML je XML V HTML je možné mít třeba start-tag a ne endtag <p>, <br> Aby to bylo XML a tedy XHTML, musí to být správně uzávorkované <p/>, <br/> nebo <p></p>, <br></br> Další rozdíly, v podstatě vychází z HTML 4.01 Internet (X)HTML 11
12 (X)HTML hlavička dokumentu HTML i XHTML dokument má hlavičku říkající podle které verze W3C doporučení je dokument napsán HTML: 4.01 XHTML: 1.0 Strict, 1.0 Transitional, 1.0 Frameset, 1.1 XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " Internet (X)HTML 12
13 XHTML struktura dokumentu Kořenový element <html> 2 podelementy <head> a <body> <head> obsahuje informace o stránce, které se nezobrazují Výjimka: element <title> obsahuje text, který se zobrazí v titulku prohlížeče <body> je vlastní obshah stránky <p> - odstavec <h1> - <h6> - Nadpisy dle váhy, <h1> nejvyšší Internet (X)HTML 13
14 XML - namespaces Různé dokumenty mohou používat stejné názvy elementů v různých významech Aby se předešlo zmatkům, zavádí se prostory jmen namespace Identifikátor namespace je URI Pro namespace se v dokumentu zavede jméno Jako atribut xmlns elementu, uvnitř kterého budu namespace používat <e xmlns:n=" /> Poté se elementy z namespace N značí <N:e/> Lze zavést výchozí namespace bez označení Internet (X)HTML 14
15 XHTML základní příklad <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="cs"> <head> <title>moje první stránka</title> </head> <body> <h1>můj první nadpis</h1> <p>test</p> </body> </html> Internet (X)HTML 15
16 XML - entity Entita kód pro text Pro web nejzajímavější: & & < < > > " " Obecně lze v XML definovat vlastní, tady na to zapomeňte Příklad: H&M se v XHTML píše: H&M Internet (X)HTML 16
17 XHTML jak na to? Když nevím jak udělat to co chci (užitečné odkazy) Použiji Google Seznam tagů: XHTML 1.1 vychází z XHTML 1.0 Strict používejte tedy jen tagy označené jako "S" Jestliže to najdu jinde, podívám se na zdrojový kód stránky jestli to nejde opsat Internet (X)HTML 17
18 XHTML zajímavé tagy - seznamy Seznamy <ol> - Číslovaný seznam (Ordered list) <ul> - Nečíslovaný seznam (Unordered list) <li> - Položka seznamu (List Item) Příklad: <ul> <li>první</li> <li>druhá</li> </ul> Internet (X)HTML 18
19 XHTML zajímavé tagy - tabulky <table> - Tabulka <tr> - Řádek tabulky (Table Row) <td> - Záznam uvnitř řádku (Table Data) Příklad: <table> <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><td>2-1</td><td>2-2</td></tr> </table> Tabulka nemusí mít v každém řádku stejný počet buněk (sloupečků) Internet (X)HTML 19
20 XHTML zajímavé tagy - odkazy <a> - Kotva (Anchor) Hlavní použití jako odkaz <a href=" Atribut href udává URL kam odkaz vede Obsah elementu <a> je to, na co budu klikat V našem případě je to text Google, ale může to být cokoliv jiného» I složitého jako tabulka, obrázek, odstavec, seznam, Další použití jako cíl odkazu v rámci stránky (Bookmark) <a id="odstavec2"> </a> Atribut id udává identifikátor, na který se pak dá odkázat Pomocí <a href="#odstavec2"> </a> Nebo z jiné stránky pomocí <a href=" </a> Internet (X)HTML 20
21 XHTML zajímavé tagy - obrázky <img> - Obrázek (Image) Slouží pro vkládání obrázků <img src="obrazek.jpeg" alt="obrázek slona" usemap="#mojemapa" width="10" height="20"/> Atribut src udává URL souboru s obrázkem Atribut alt udává textový popis obrázku Objeví se když jsou obrázky vypnuté, když nelze obrázek načíst Atribut usemap udává id klikací mapy Atributy width a height mohou udávat rozměry Povinné atributy: src a alt Internet (X)HTML 21
22 XHTML klikací mapa <map> Atribut id udává id mapy, na které se dá odkazovat třeba z <img> Podelementy <area> - klikací oblasti Atribut href kam vede odkaz Atribut alt náhradní text Atributy shape a coords tvar a rozměr oblasti shape="rect" coords="x1,y1,x2,y2" krajní body obdélníka shape="circle" coords="x,y,r" střed a poloměr kružnice shape="poly" coords="x1,y1,x2,y2,,xn,yn" body polygonu Internet (X)HTML 22
23 XHTML klikací mapa - příklad <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap"/> <map id="planetmap" name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="sun"/> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="mercury"/> <area shape="circle" coords="124,58,8" href="venus.htm" alt="venus"/> </map> Proč používám atribut name? Mapa je různě definována v HTML, XHTML 1.0 a XHTML 1.1 Navíc každý prohlížeč podporuje něco jiného XHTML 1.1: atribut usemap elementu img nesmí obsahovat #. Element map musí mít atribut id, nesmí mít atribut name. Tedy: <img usemap="planetmap"/> <map id="planetmap"/> XHTML 1.0 Strict: atribut usemap elementu img tvaru #planetmap. Element map musí mít atribut id. Tedy: <img usemap="#planetmap"/> <map id="planetmap"/> Takto to ale umí jen IE a Opera Neumí: Firefox, Safari, Google Chrome Oprava: přidat i atribut name se stejnou hodnotou, který v XHTML 1.0 být může viz příklad nahoře Takto to ale žádný prohlížeč nepodporuje HTML 4.01: atribut usemap elementu img tvaru #planetmap. Element map musí mít atribut name, nesmí mít atribut id. <img usemap="#planetmap"> <map name="planetmap"> Takto to funguje všude, ale není to XHTML Internet (X)HTML 23
24 XHTML další tagy <code> - pro zdrojové kódy použije písmo se stejnou šířkou všech znaků <address> - označuje kontakt na majitele XHTML dokumentu <dl> - Seznam definic, obsahuje: <dd> - Definition description <dt> - Term Tagy pro formuláře ještě dnes Tagy pro formátování (<div>, <span>) bude příště <b> - tučný text, <i> - kurzíva, <hr/> vodorovná čára <!-- --> - XML komentář Internet (X)HTML 24
25 XHTML - poznámka Až budete nahrávat svůj web na internet, hlavní stránka se jmenuje index.<přípona> Přípona je.html,.htm, (později.php) dle potřeby Tzn. ve skutečnosti ukazuje na Internet (X)HTML 25
26 XHTML poznámka - adresy Adresy na webu mohou být absolutní nebo relativní Absolutní: vždy plná cesta. Např. Relativní: jen rozdílná část Jsem-li tedy na stránce a chci odkaz na stránku stačí mi napsat <a href="teaching">blabla</a> Internet (X)HTML 26
27 XHTML - Formuláře Pro sběr dat od uživatele Element <form> atribut method hodnota post nebo get post data se předávají vůči uživateli neviditelně get data se předávají v adrese stránky lze ukládat odkazy atribut action URL stránky, kam se data posílají Podelementy <select> Podelementy <input> atribut name udává jméno, pod kterým se vstup bude dále zpracovávat atribut type rozhoduje o funkci/vzhledu text, password, radio, checkbox, file, button, reset, submit, image, hidden Internet (X)HTML 27
28 XHTML Elementy <input> 1 text pro vložení jedné řádky textu atribut maxlength maximální délka textu password to samé, ale místo textu se zobrazují zástupné znaky (není vhodné používat s metodou GET) radio volba, u všech položek ve skupině musí být name stejné atribut value jaká hodnota se předá pro zpracování atribut checked="checked" výchozí hodnota: zvoleno checkbox vícenásobná volba, jinak stejné jako radio Pro následné zpracování ve formě pole je nutné atribut name ukončit [] Jinak může mít každá volba jiné jméno Internet (X)HTML 28
29 XHTML Elementy <input> 2 submit tlačítko pro odeslání, atribut value obsahuje text reset tlačítko pro vyčistění formuláře, atribut value obsahuje text hidden skrytý element, používá se pro výchozí hodnoty a nebo pro změny JavaScriptem image udává obrázek místo tlačítka pro odeslání file pole pro odeslání souboru button tlačítko které nic nedělá (využití JavaScriptem), atribut value obsahuje text Internet (X)HTML 29
30 XHTML - <select> Element <select> se používá pro seznam, ze kterého se dá vybírat Podelementy <option> atribut value předaná hodnota textový obsah elementu text volby atribut selected="selected" výchozí hodnota atribut multiple="multiple" možnost více voleb Pro následné zpracování ve formě pole je nutné atribut name ukončit [] atribut size="5" počet přímo zobrazených voleb Internet (X)HTML 30
31 XHTML: Příklad formuláře <form method="post" action=" <div> Jméno: <input type="text" name="name"/><br/> Tajná zpráva: <input type="password" name="secret"/> <h2>pohlaví</h2> <input type="radio" name="sex" value="muž"/> Muž<br/> <input type="radio" name="sex" value="žena"/> Žena <h2>majetek</h2> <input type="checkbox" name="property[]" value="kolo"/> Kolo<br/> <input type="checkbox" name="property[]" value="auto"/> Auto<br/> <input type="checkbox" name="property[]" value="letadlo"/> Letadlo <h2>rodinný stav</h2> <select name="status"> <option value="svobodný(á)">svobodný(á)</option> <option value="ženatý/vdaná">ženatý/vdaná</option> <option value="rozvedený(á)" selected="selected">rozvedený(á)</option> </select> <br/><br/> <input type="reset"/><input type="submit" value="odeslat"/> </div> </form> Internet (X)HTML 31
32 XHTML - validace Jak zjistit jestli je stránka validní? Tj. jestli vyhovuje např. XHTML 1.1 standardu? Tj. jestli už splňuje podmínku validity na zápočet? Validuje přes odkaz Validuje přes nahrání HTML souboru Validuje přes zadání textu přímo do validátoru Internet (X)HTML 32
33 Formátování - CSS Formátování vzhledu již není součástí XHTML Používají se k tomu styly CSS CSS Cascading Style Sheets XHTML obsahuje data k zobrazení CSS říká jak je zobrazovat Bude příště Internet (X)HTML 33
NSWI096 - INTERNET. Úvod do HTML
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
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é
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
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
Základy HTML. Obecná syntaxe HTML. Struktura HTML
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ů
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í
Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML
Č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
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ývoj Internetových Aplikací
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
12. Základy HTML a formuláře v HTML
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
Formuláře. Internetové publikování. Formuláře - příklad
Formuláře Internetové publikování Formuláře - příklad 1 Formuláře - použití Odeslání dat od uživatele Možnosti zpracování dat Webová aplikace na serveru (ASP, PHP) Odeslání e-mailem Lokální script Formuláře
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
Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675
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
XHTML 1. Formuláře. Element form. <form>... </form>
XHTML 1 Formuláře Činnost: - zadávání informací do elektronického obchodu; - odesílání jména a dalších informací pro on-line službu; - nákup letenek a cestovních služeb; - nákup dalšího zboží a služeb,
13. Vytváření webových stránek
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í
IE1 jazyk HTML a kaskádové styly
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.
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.
IE1 jazyk HTML a kaskádové styly
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.
(X)HTML, CSS a jquery
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
HTML - pokračování. Co už víme?
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í
DUM 14 téma: Interakce s uživatelem
DUM 14 téma: Interakce s uživatelem ze sady: 2 tematický okruh sady: Tvorba statických www stránek s použitím CSS ze šablony: 08 Internet určeno pro: 3. ročník vzdělávací obor: 18-20-M/01 Informační technologie
HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy
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
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
APLIKACE XML PRO INTERNET
APLIKACE XML PRO INTERNET Jaroslav Ráček Fakulta Informatiky, Masarykova Universita Brno Abstrakt Text je věnován možnostem využití XML technologie pro prezentaci dokumentů pomocí Internetu. V úvodu je
Tvorba webových stránek
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ý
Základy HTML. Autor: Palito
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
(X)HTML-TAGY. VOŠ a SŠT Česká Třebová
(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
Úvod do jazyka HTML (Hypertext Markup Language)
Úvod do jazyka HTML (Hypertext Markup Language) WWW zdroje: http://www.jakpsatweb.cz/ Jak psát web, návod na HTML stránky (Dušan Yuhů Janovský) http://www.kit.vslib.cz/~satrapa/www/kurs/ Kurs vytváření
Uspořádání klient-server. Standardy pro Web
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
Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD
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
Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka
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
WWW a HTML. Základní pojmy. Ivo Peterka
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í
Základy webových aplikací ZWA Přednáška č. 3 tvorba formulářů na klientské straně. Martin Klíma
Základy webových aplikací ZWA Přednáška č. 3 tvorba formulářů na klientské straně Martin Klíma FORMULÁŘE Formuláře Formuláře se používají k odesílání dat na server Omezená sada formulářových polí Není
Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant
Základy informatiky 03 HTML, tvorba webových stránek Kačmařík/Szturcová/Děrgel/Rapant Obsah přednášky princip webového dokumentu, ukázka nástroje pro tvorbu pravidla tvorby HTML, značky kostra HTML dokumentu
Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 13 VY 32 INOVACE 0101 0313
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
Atribut Význam Hodnoty
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
Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela
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
Úvod do aplikací internetu a přehled možností při tvorbě webu
CVT6 01a Úvod do aplikací internetu a přehled možností při tvorbě webu Internet a www Internet? Služby www ftp e-mail telnet NetNews konference IM komunikace Chaty Remote Access P2P aplikace Online games
Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela
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
Základy HTML. Obecná syntaxe HTML. Struktura HTML
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ů
<link> - definuje vztah k jiným XHTML dokumentům, typicky
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
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
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
Internet 1 vývoj, html, css
Internet 1 vývoj, html, css 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 19. března 2009 Dnešní přednáška 1 Historie
Úvod do tvorby internetových aplikací
CVT6 01a Úvod do tvorby internetových aplikací Osnova předmětu (X)HTML a tvorba webu pomocí přímého zápisu kódu Tvorba web designu a skládání stránek z kousků Skriptovací jazyky na webu Návrh software
XHTML 1. Značkovací jazyky (mark-up): Součastí prostředků je systém m značek
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.
Formuláře. Internetové publikování
Formuláře Internetové publikování Formuláře - příklad Formuláře - použití Odeslání dat od uživatele Možnosti zpracování dat Webová aplikace na serveru (ASP, PHP) Odeslání e-mailem Lokální script Formuláře
HTML. Úvod do (X)HTML. Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag>
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
Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:
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
TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz
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í,
Programování v PHP. Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze. Další možnosti formulářů
Programování v PHP Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, Helena Wallenfelsová, 2011 Další možnosti formulářů BI-PHP, cvičení
Základy WWW publikování
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
Stránka se dá otevřít dvěma způsoby
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á
Tvorba webu. Úvod a základní principy. Martin Urza
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
HTML. HyperText Markup Language. 25.9.2013 Josef Steinberger
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
<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura
mv Všechny html tagy jsou uzavřeny do závorek . Většina tagů je párových, tzn. ke každému tagu existuje druhá značka s lomítkem před tagem. (, ) HTML tagy by měly udávat pouze logické členění
Formuláře v HTML. Evropský sociální fond Praha a EU Investujeme do vaší budoucnosti
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í
Základy HTML, URL, HTTP, druhy skriptování, formuláře
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
Internet cvičení. ZS 2009/10, Cvičení 3.,8.12.2009. Tomáš Pop. DISTRIBUTED SYSTEMS RESEARCH GROUP http://dsrg.mff.cuni.cz
Internet cvičení ZS 2009/10, Cvičení 3.,8.12.2009 Tomáš Pop DISTRIBUTED SYSTEMS RESEARCH GROUP http://dsrg.mff.cuni.cz CHARLES UNIVERSITY PRAGUE Faculty of Mathematics and Physics Java Script obecně Moc
Internet a tvorba WWW stránek
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
22. Tvorba webových stránek
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
Tvorba webových stránek
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
Tvorba internetových stránek
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?
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
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é
Mgr. Vlastislav Kučera přednáška č. 1
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
Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou
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
03 - Základy editace dynamických stránek
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
Obsah. Stručná historie World Wide Webu 7
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
Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014
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
Webová stránka. Matěj Klenka
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
Název: VY_32_INOVACE_PG4116 SEO, standardy, sémantika kódu, přistupnost
Název: VY_32_INOVACE_PG4116 SEO, standardy, sémantika kódu, přistupnost Autor: Mgr. Tomáš Javorský Datum vytvoření: 09 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace:
TVORBA WEBOVÝCH STRÁNEK
TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03a Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03a 1. Úvod do značkovacích jazyků HTML a XHTML 2. Struktura webové stránky, popis částí
Mgr. Vlastislav Kučera přednáška č. 1
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,
Mgr. Vlastislav Kučera lekce č. 2
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
Š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
Š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
Internet 2 css, skriptování, dynamické prvky
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í
Tvorba stránek v HTML ve Wordu
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
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!
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
www.helpmark.cz Tomáš Herout
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
Internetové technologie, cvičení č. 5
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
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íč
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
Mgr. Vlastislav Kučera Struktura stránky, hlavička,
Mgr. Vlastislav Kučera Struktura stránky, hlavička, Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to
XFORMS JAKO NÁHRADA WEBOVÝCH FORMULÁŘŮ XFORMS - WEB FORMS SUCCESSOR
XFORMS JAKO NÁHRADA WEBOVÝCH FORMULÁŘŮ XFORMS - WEB FORMS SUCCESSOR Martin Smítka Souhrn Současný svět Internetu se velmi rychle vyvýjí a tento vývoj mění zažité způsoby tvorby webových stránek. Posun
Kaskádové styly (CSS)
Kaskádové styly (CSS) Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar ČERBA Západočeská univerzita v Plzni Vznik dokumentu: 20.11.2007 Poslední aktualizace: 5.11.2009 Cascading Style Sheets
Úvod do tvorby internetových stránek v jazyce HTML
Úvod do tvorby internetových stránek v jazyce HTML Dostupné z Metodického portálu www.rvp.cz, ISSN: 1802-4785, financovaného z ESF a státního rozpočtu ČR. Provozováno Výzkumným ústavem pedagogickým v Praze.
Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne
Obrázky Tag Význam Párový Výskyt img obrázek ne img video ne map klikací mapa ano area oblast v klikací mapě ne Img Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného
HTML. PIA 2012/2013 Téma 1. P. Brada, O. Rohlík, J. Tichava, Západočeská univerzita
HTML PIA 2012/2013 Téma 1 P. Brada, O. Rohlík, J. Tichava, Západočeská univerzita HyperText Markup Language... a document structuring language hypertext SGML/XML aplikace http://www.w3.org/markup/ 2 Verze:
Obsah prezentace. Co je to XML? Vlastnosti. Validita
Obsah prezentace Co je to XML? Vlastnosti Validita Co je to XML? EXtensible Markup Language Účelem je usnadnit sdílení dat napříč informačními systémy Popis dokumentu z hlediska věcného obsahu Vyvinuto
Mgr. Vlastislav Kučera přednáška č. 2
Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS
Jazyk XSL XPath XPath XML. Jazyk XSL - rychlá transformace dokumentů. PhDr. Milan Novák, Ph.D. KIN PF JU České Budějovice. 9.
Jazyk XSL - rychlá transformace dokumentů 9. prosince 2010 Osnova 1 Jazyk XSL Úvod Princip zpracování pomocí stylů Formátování dokumentu pomocí XSL FO Osnova 1 Jazyk XSL Úvod Princip zpracování pomocí
Tvorba internetových aplikací v XHTML 2.0 BAKALÁŘSKÁ PRÁCE
Pedagogická fakulta, Jeronýmova 10, 371 15 České Budějovice Tvorba internetových aplikací v XHTML 2.0 BAKALÁŘSKÁ PRÁCE Vedoucí absolventské práce: PaedDr. Petr Pexa Autor: Vojtěch Soukup České Budějovice,
NSWI096 - INTERNET JavaScript
NSWI096 - INTERNET JavaScript Mgr. Petr Lasák JAVASCRIPT JAK SE DNES POUŽÍVÁ Skriptovací (interpretovaný) jazyk Umožňuje interaktivitu Použití: Dialogy Kontrola dat ve formulářích Změny v (X)HTML dokumentu
1. WAP Jazyk WML Webserver Nastavení MIME: Co na tvorbu a prohlížení WAPu pot ebujete? Waptor Nokia Mobile Internet Toolkit
1. WAP WAP - Wireless Application Protocol je standardem pro bezdrátový přenos dat a jejich zobrazování na displeji mobilních telefonů. Tím z nich vytváří komunikační zařízení schopná komunikovat s jinými
Internet cvičení. ZS 2009/10, Cvičení 4.,15.12.2009 PHP. Tomáš Pop. DISTRIBUTED SYSTEMS RESEARCH GROUP http://dsrg.mff.cuni.cz
Internet cvičení ZS 2009/10, Cvičení 4.,15.12.2009 PHP Tomáš Pop DISTRIBUTED SYSTEMS RESEARCH GROUP http://dsrg.mff.cuni.cz CHARLES UNIVERSITY PRAGUE Faculty of Mathematics and Physics Generování tabulky
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í
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
CSS Stylování stránek. Zpracoval: Petr Lasák
CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze
Tvorba fotogalerie v HTML str.1
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é
Nová struktura souborů a složek
Tvorba podstránek Vytvoření podstránek Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu. Máme 4 možnosti jak vytvářet podstránky
Mgr. Stěpan Stěpanov, 2013
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