Digitální učební materiál HTML – značkovací jazyk Ing. Jan Grepl říjen 2013
Digitální učební materiál Číslo projektu CZ.1.07/1.5.00/34.0606 Název programu OP 1.5 Vzdělávání pro konkurenceschopnost Název projektu Inovace vzdělávacího procesu Číslo materiálu VY_32_INOVACE-11-33-IKT-14 Název školy Střední zdravotnická škola, Brno, Jaselská 7/9 Autor Ing. Jan Grepl Vzdělávací oblast Informační a komunikační technologie Tematická oblast Internet Téma HTML – značkovací jazyk Ročník 2. Datum tvorby duben 2013 Anotace materiál slouží k výuce IKT – tvorba webové stránky Metodický pokyn Doporučuji využít jako součást učiva internetové stránky.
HTML HTML – HyperText Markup Language je tzv. značkovací jazyk, který umožňuje vytvářet webové stránky.
HTML text HTML se od normálního textu liší tzv. značkami (tzv. tagy), které říkají prohlížeči jak se má text na monitoru zobrazit značky (tagy) jsou uzavřeny mezi znaky < a > Skoro každá značka má svůj protějšek ukončující její platnost
HTML Syntaxe: název souboru: index.html (startovací soubor) htm X html – není důležité malá a velká písmena značky nejsou zohledněna, ale vzhledem k tomu, že další formy tvorby webových dokumentů (xhtml) jsou malými písmeny, tak je vhodné používat malá písmena
HTML Syntaxe: adresy a jména souborů - záleží na velikosti písmen, bez diakritiky na začátku značky nesmí být mezera, třeba < ̺ br> je špatně více mezer má stejný význam jako jediná mezera neznámé značky prohlížeč ignoruje
HTML Struktura textu – dokumentuHTML: Začátek dokumentu <HTML> Úvod dokumentu <!DOCTYPE html> Začátek dokumentu <HTML> Konec dokumentu </HTML> Hlavička dokumentu je mezi <HEAD> a </HEAD> Tělo dokumentu (vlastní obsah www stránky) je mezi <BODY> a </BODY>
HTML Hlavička www stránky: může obsahovat i nastavení základních barev, adres, kaskádových stylů, … neměla by chybět informace o verzi jazyka HTML … např. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
HTML Hlavička www stránky: název stránky - <TITLE> text </TITLE> libovolný text zobrazí se v hlavičce prohlížeče max. 64 znaků
HTML Hlavička www stránky: Matainformace <META> (nepárová) - informace o obsahu, o klíčových slovech, jméno autora, adresu, kódování textu, popis, typ šablony, atd. <meta name="keywords" content="Střední zdravotnická škola Jaselská 7/9 BRNO, SZŠ Jaselská, Střední zdravotnická škola, Zdravotnický asistent, Zdravotnické lyceum" />
HTML Komentáře: - nejsou vidět v prohlížeči - slouží programátorovi k „uložení“ poznámky ke svému html textu - umožňuje „zneplatnit“ html text <!-- komentář, poznámka -->
HTML Normální text: <BODY> Pokusný text </BODY> Zobrazí se:
HTML Ukončení – zalomení řádku <BR> Ahoj <BR>AHOJ Zobrazí se: Ahoj AHOJ
HTML Odstavec: <DIV> xyz text </DIV> Definuje odstavec textu. Na rozdíl od <BR> umožňuje větší přehlednost textu … Zarovnání odstavce: <DIV ALIGN=LEFT> - zarovnání dole <DIV ALIGN=RIGHT> - zarovnání doprava <DIV ALIGN=CENTR> - zarovnání na střed
HTML Označení a zalomení odstavce: <p> xyzxyzxyzxyz </p> Má podobný význam jako značky <DIV> a vkládá prázdný řádek za text. + umožňuje zarovnat odstavec (align)
HTML Tučné písmo: <B> </B> Kurzíva: <I> </I> Podtržené písmo: <U> </U> <p><B><U> tučně a podtrženě /U></B></P> Zobrazí se: tučně a podtrženě
HTML Nadpisy: <H1> Nadpis </H1> až <H6></H6> - různé velikosti - důležité pro vyhledavače – předpokládají, že nadpis obsahuje důležitá slova z obsahu webu
HTML Barva textu: <font color="red"> <font color="#ff0000"> … Black = černá = #000000 Blue = modrá = #0000FF Lime = zelená = #00FF00 Red = červená = #FF0000 atd.
HTML Barva pozadí: <body bgcolor=“red” Způsob vyjádření barvy: white – bílá - #FFFFFF yellow – žlutá - #FFFF00 red – červená - #FF0000 blue – modrá - #0000FF black – černá - #000000
HTML Velikost textu: <font size=5> Typ fontu: velikost se pohybuje v rozmezí 1-7 Typ fontu: <font face=“ARIAL“> (standardní font je Times New Roman)
HTML Hyperlink – přepnutí na jinou webovou stránku <a href=“http://www.szs-jaselska.cz“> Odkaz na web szs</a>
HTML Vložení obrázku: <img src="obrazek.jpg“> + umístění - ALIGN <img src="obrazek.jpg" width="100" height="200" alt="obrázek"> <img src="obrazek.jpg" width="100" height="200" alt="obrázek"> + umístění - ALIGN
Použitá literatura:: NAVRÁTIL, Pavel. S počítačem k maturitě. ISBN 80-86686.