Inovace výuky prostřednictvím šablon pro SŠ

HTML
DOWNLOAD

Rozměr: px

Začít zobrazení ze stránky:

Download "Inovace výuky prostřednictvím šablon pro SŠ"

Božena Říhová
před 9 lety
Počet zobrazení:

1 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/ Gymnázium Jana Pivečky a Střední odborná škola Slavičín Ing. Alois Kužela III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT VY_32_INOVACE_G2_IVT_02_14 Gymnaziální vzdělávání Informatika a Informační a komunikační technologie Informatika Informatika Cílová skupina Anotace Vybavení, pomůcky ww.zlinskedumy.cz Žák let Prezentace slouží k vysvětlení pojmu HTML dokument a dává návod na vytvoření HTML dokumentu s využitím textového editoru PSPad. PC, interaktivní tabule Datum Klíčová slova HTML, SGML, textový editor, WYSIWYG editor, strukturální značky, sémantické značky, stylistické značky, párové tagy, nepárové tagy

2 HTML DOKUMENT HTML (HyperText Markup Language) je značkovací jazyk pro hypertext. Je hlavní z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikace dokumentů na Internetu. Vývoj HTML byl ovlivněn vývojem webových prohlížečů, které ovlivňovali definici jazyka.

3 HTML DOKUMENT HTML je aplikací dříve vyvinutého univerzálního značkovacího jazyka SGML (Standard Generalized Markup Language), který umožňuje definovat značkovací jazyky jako své vlastní podmnožiny. Díky své složitosti není SGML příliš rozšířen.

4 PROGRAMY PRO TVORBU HTML Textové editory Běžný textový editor HTML zvládá barevnou syntaxi, dokáže napovídat značky, zvládá validovat dokument podle předepsané specifikace. Takovými editory jsou například Notepad++, PSPad nebo Sublime Text. WYSIWYG editory Editory tohoto typu pracují na opačném principu než textové editory ve WYSIWYG editoru pracujete přímo s již hotovou stránkou a obecně neplatí, že by uživatel tohoto editoru musel znát jazyk HTML. Ve WYSIWYG editoru si může uživatel poskládat stránku, jak se mu zlíbí, a program následně vygeneruje požadovaný kód HTML. Takovými editory jsou například Adobe Dreamweaver nebo Microsoft FrontPage.

5 STRUKTURA HTML DOKUMENTU HTML dokument má předepsanou strukturu: Doctype úvod dokumentu, sděluje prohlížeči, že otevřel HTML dokument. Povinný, zapisuje se <!DOCTYPE html>. Kořenový element značky <html>, </html> - reprezentují celý dokument. Hlavička dokumentu značky <head>, </head>, obsahují metadata dokumentu. Definuje například kódování, název dokumentu, autora, titulek, popis, klíčová slova nebo CSS styly. Tělo dokumentu značky <body>, </body> zahrnují obsah dokumentu.

6 DRUHY ZNAČEK Značky lze z hlediska významu rozdělit na tři základní skupiny: Strukturální značky - rozvrhují strukturu dokumentu, příkladem jsou třeba odstavce (<p>) nebo nadpisy (<h1>, <h2>). Dodávají dokumentu formu. Popisné (sémantické) značky - popisují povahu obsahu prvku, příkladem je nadpis (<title>) nebo adresa (<address>). Současný trend je orientován právě na sémantické značky, které usnadňují automatizované zpracovávání dokumentů a vyhledávání informací v záplavě dokumentů na webu. Vyvrcholením této snahy je v současné době jazyk XML.

7 DRUHY ZNAČEK Stylistické značky - určují vzhled prvku při zobrazení, typickým příkladem je značka pro tučné písmo (<b>). Od tohoto druhu značek se postupně upouští, trendem je používání kaskádových stylů, které vzhled popisují odděleně od obsahu dokumentu. Mezi důvody pro neužívání těchto značek patří především to, že tyto značky jsou orientovány na prohlížení na obrazovce počítače, příliš se však nepočítá s používáním dokumentu jiným způsobem alternativní prohlížeče pro postižené (čtečky pro slepce), v mobilních zařízeních a podobně. Kaskádové styly umožňují definovat rozdílné zobrazení pro různá zařízení.

8 TAGY Jazyk HTML je charakterizován množinou značek (tzv. tagů) a jejich vlastností (atributů) definovaných pro danou verzi. Párové tagy koncová značka je shodná s počáteční, liší se jen lomítkem před názvem. Například <body> a </body>. Nepárové tagy nemají žádný obsah a nepoužívají koncovou značku. Například <hr>.

9 Zdroje Web 1. Wikipedie, otevřená encyklopedie [online]. [cit ]. Dostupný na WWW: ge

Podobné dokumenty

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz 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á