Vyšší odborná škola a Střední škola,Varnsdorf, příspěvková organizace

Šablona 5 VY 32 INOVACE 0101 0305

VÝUKOVÝ MATERIÁL

Číslo projektu

Vyšší odborná škola a Střední škola, Varnsdorf, příspěvková organizace Bratislavská 2166, 407 47 Varnsdorf, IČO: 18383874 www.vosassvdf.cz, tel. +420412372632 CZ.1.07/1.5.00/34.1076

Název projektu

Pro vzdělanější Šluknovsko

Číslo a název šablony

III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT

Autor Tematická oblast

0101 - Bc. Luděk Cupal Tvorba internetových stránek

Číslo a název materiálu

VY_32_INOVACE_0101_0305 – WWW - HTML kód I

Anotace

Výklad: úvod do značkovacího jazyka HTML, syntaxe

Vytvořeno Určeno pro

21. 4. 2013 ICT, 3. ročník, studijní obor Cestovní ruch

Přílohy

bez příloh

Identifikační údaje školy

ICT CR, 3. ročník Tvorba internetových stránek

učební materiál č. 5 WWW – HTML kód I

Úvod do HTML • internetové stránky (v tomto duchu website) jsou tvořeny více soubory, z nichž soubory s příponou HTM či HTML nesou vlastní obsah hypertextových dokumentů představujících jednotlivé stránky • u dynamických stránek to jsou jiné soubory, např. typu PHP; dynamické stránky však přesahují možnosti tohoto jemného úvodu • hlavní – výchozí – stránka nese název index.htm, index.html, default.htm či default.html (u dynamických stránek to bývá např. index.php) – je vždy potřeba • je to stránka, která se při zadání názvu domény do prohlížeče otevře jako první (např. po zadání www.sablony.cz do adresního řádku prohlížeče se otevře soubor index.html ležící v kořenovém adresáři datového úložiště spojeného s doménou sablony.cz)

Úvod do HTML • internetové stránky se přenášejí směrem k uživateli jako text s HTML kódem • webové prohlížeče umějí HTML kód interpretovat a zobrazí stránku odpovídajícím způsobem • HTML je značkovací jazyk, neboť používá určitých „značek“, tzv. tagů, k označení části textu, a tím mění význam – sémantiku – vztaženého textu • HTML kód má svoje standardy, v současné době je aktuální verze HTML5 • značky se dělí na 3 významově odlišné skupiny: • strukturální značky – tvoří formu (strukturu) dokumentu • sémantické značky – popisují prvky stránek, povahu obsahu • stylistické značky – udávají vzhled jednotlivých prvků při zobrazení

Úvod do HTML • kód HTML (= Hypertext Markup Language) je v textu na první pohled patrný (jeho prezentace prohlížečem předpokládá dodržování standardů HTML) • jednotlivé značky HTML se v dokumentu zapisují do špičatých závorek < > • většina tagů (značek) je párová, tzn. jeden tag tvoří jeho začátek (počáteční část tagu) a jeho konec (koncová část tagu), přičemž může být další text mezi těmito částmi – ten je pak tagem ovlivněn • některé tagy nejsou nepárové, není jich však mnoho • tagy mívají další atributy a jejich hodnoty, což jsou určité podrobnější vlastnosti značky, které se nastaví některou z přípustných hodnot

Úvod do HTML • kromě klasických tagů lze v hypertextovém dokumentu použít komentáře, které se uzavírají mezi skupiny znaků

• poté se nezobrazují ve výsledném dokumentu, jsou čitelné pouze při editaci • také se lze setkat s deklarací typu dokumentu, začínající
Syntaxe text • v příkladu je použit párový tag, který má 2 části • značka vždy začíná levou a končí pravou ostrou závorkou

< >

• ihned poté je uvedeno jméno tagu, povinně bez mezery

font

• za jménem tagu mohou následovat atributy a jejich hodnoty, zapisované vždy: alespoň 1 mezera, jméno atributu, rovná se (bez mezer), hodnota atributu v uvozovkách (bez mezer; uvozovky povinné)

size="4"

• v případě nepárového tagu by následovala ještě mezera a lomítko / • po úvodní části tagu následuje obsah, který je tagem ovlivněn text • konečná část tagu je opět v ostrých závorkách, v nichž je lomítko a jméno tagu (bez mezer)



Syntaxe • tagy lze do sebe vnořovat, nesmějí se však křížit

<strong>TUČNÝ NADPIS

ANO

<strong>TUČNÝ

NADPIS

NE!!!

• tabulátory a konce řádků jsou prohlížečem interpretovány jako mezera • více zapsaných mezer (i těch zapsaných pomocí tabulátoru nebo konce řádku) za sebou je vždy interpretováno jako jedna mezera • speciální znaky (zvláště pak ty, které by mohly být interpretovány jako příkazy/prvky jazyka) lze zapisovat pomocí tzv. entit • např. pevnou mezeru lze zapsat pomocí entity takto

&…;  

• na velikosti znaků nezáleží (doporučeny malé znaky), kromě adres URL

Seznam použitých zdrojů • HyperText Markup Language. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001-2013 [cit. 2013-04-21]. Dostupné z: • JANOVSKÝ, Dušan. Základy HTML. Jak psát web [online]. 2004 [cit. 2013-04-21]. Dostupné z: