Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
Digitální učební materiál
HTML – značkovací jazyk Ing. Jan Grepl říjen 2013
2
Digitální učební materiál
Číslo projektu CZ.1.07/1.5.00/ 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 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.
3
HTML HTML – HyperText Markup Language
je tzv. značkovací jazyk, který umožňuje vytvářet webové stránky.
4
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
5
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
6
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
7
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>
8
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"
9
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ů
10
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" />
11
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 -->
12
HTML Normální text: <BODY> Pokusný text </BODY>
Zobrazí se:
13
HTML Ukončení – zalomení řádku <BR> Ahoj <BR>AHOJ
Zobrazí se: Ahoj AHOJ
14
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
15
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)
16
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ě
17
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
18
HTML Barva textu: <font color="red">
<font color="#ff0000"> … Black = černá = #000000 Blue = modrá = #0000FF Lime = zelená = #00FF00 Red = červená = #FF0000 atd.
19
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
20
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)
21
HTML Hyperlink – přepnutí na jinou webovou stránku
<a href=“ Odkaz na web szs</a>
22
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
23
Použitá literatura:: NAVRÁTIL, Pavel. S počítačem k maturitě. ISBN
Podobné prezentace
