1 / 88

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK. Výukový modul TWS_03a Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE. Osnova výukového modulu TWS_03a. Úvod do značkovacích jazyků HTML a XHTML Struktura webové stránky, popis částí Základní značky jazyka HTML a XHTML. STRUKTURA WEBOVÉ STRÁNKY.

moswen
Télécharger la présentation

TVORBA WEBOVÝCH STRÁNEK

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03a Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE

  2. Osnova výukového modulu TWS_03a • Úvod do značkovacích jazyků HTML a XHTML • Struktura webové stránky, popis částí • Základní značky jazyka HTML a XHTML

  3. STRUKTURA WEBOVÉ STRÁNKY

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

  5. Soubory webové stránky • Přípona souboru: • Statické webové stránky:*.htm *.html • Dynamické webové stránky: *.php *.asp (dle skriptovacího jazyka) • Definice kaskádových stylů:*.css Úvodní (počáteční) soubor webové prezentace, který se zobrazuje po zadání adresy webové prezentace (např. www.mojestranky.cz), se jmenuje index (např. index.htm, index.html, index.php, atd.)

  6. Organizace souborů webové prezentace • Webová prezentacemůž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)

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

  8. Užitečný tip: Soubory, které tvoří webovou prezentaci, optimalizujeme na co nejmenší velikost:RYCHLÉ NAČÍTÁNÍ Z WEBOVÉHO SERVERU!

  9. Značkovací jazyk HTML a XHTML • HTML (HyperTextMarkupLanguage) • 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í ajezdí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í!

  10. Značkovací jazyk HTML a XHTML • XHTML (eXtensibleHyperTextMarkupLanguage) • 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.

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

  12. Struktura HTML webové stránky <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html> <head> <title>Název stránky</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> </head> <body> <h1> Nadpis </h1> <p> Nějaký text v odstavci</p> </body> </html> Typ dokumentu - verze použitého jazyka HTML Zobrazí se v záhlaví okna prohlížeče Kódování národního jazyka (češtiny) Tělo stránky - vlastní obsah, který se zobrazí v hlavním okně (ploše) prohlížeče

  13. Struktura XHTML webové stránky <?xmlversion="1.0" encoding="iso-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <title>Název stránky</title> </head> <body> Zde bude obsah webové stránky… </body> </html>

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

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

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

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

  18. 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">

  19. 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">

  20. 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:<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">…Obsah webového dokumentu…</html>

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

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

  23. Hlavička stránky META značkyJedná 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" />

  24. Hlavička stránky Nastavení kódování češtiny pro webový dokument: Standardní kódování operačního systému Windows: <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /> Standardní kódování operačního systému Unix, Linux a v emailech: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/> Vhodné pro kódování mezinárodních dokumentů: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

  25. 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<scripttype="text/javascript" src="skripty.js"></script>

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

  27. ZNAČKY XHTML JAZYKA

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

  29. 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čky2. nepárové značky

  30. HTML značka (tag) • Párové značky Příklad: odstavce, odkazy, nadpisy, bloky, formulář, seznamy, atd. <značka>objekty nebo jejich části, které má značka ovlivnit</značka> Počáteční značka Koncová značka • Nepárové značky Příklad: vložení obrázku, horizontální čáry, odřádkování, atd. <značka> <značka /> Značka v HTML dokumentu Značka v XHTML dokumentu

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

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

  33. HTML element HTML element =HTML značka +atributy s hodnotou

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

  35. 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ř.: &nbsp; nedělitelná mezera&#934; řecké písmeno „velké fí“ &hellip; výpustka „tři tečky“

  36. HTML entity • Editor webových stránek Pspad nabízí vkládání HTML entit pomocí nástroje „ASCII tabulka“. Nástroj lze zobrazit:Menu Nástroje, položka ASCII tabulka(ALT + A) • Nástroj nabízí dvě záložky: ASCII a SYMBOL. • Výčet entit naleznete například zde:http://www.jakpsatweb.cz/html/entity-vsechny.htmlhttp://www.webtvorba.cz/xhtml/html-entity.html

  37. 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!!!

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

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

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

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

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

  43. Textový element – Horní a dolní index Vymezený text se stává horním, resp. dolním indexem: Horní index: <sup></sup> Dolní index: <sub> </sub> <p>Teplota T<sub>1</sub>= 100 <sup>o</sup>C</p>

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

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

  46. Textový element – Zkratky Značka vymezující zkratku. Vysvětlení je řešeno pomocí atributu title: <abbrtitle="popisek, vysvětlení zkratky"></abbr> <p><abbrtitle="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ě“.

  47. 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ě!!!

  48. Textový element – Programový kód Zachová bílé mezery (např. odsazení kódu) Obsah vypíše neproporcionálním písmem <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>

  49. 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: • hrefhodnotou je adresa (absolutní nebo relativní) cílového dokumentu. • titlehodnotou je textový popisek odkazu.

  50. Hypertextový odkaz Toto je <a href="soubor.htm"title="popisek">odkaz</a> Dalším (nepovinným) atributem je target. Je-li hodnota _blank, otevře se cílový dokument v novém okně. Atribut není povolen u dokumentů typu XHTML 1.0 Strict a XHTML 1.1

More Related