Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 5 VY 32 INOVACE

Transkript

1 Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace Šablona 5 VY 32 INOVACE

2 VÝUKOVÝ MATERIÁL Identifikační údaje školy Číslo projektu Název projektu Číslo a název šablony Autor Tematická oblast Číslo a název materiálu Anotace Vyšší odborná škola a Střední škola, Varnsdorf, příspěvková organizace Bratislavská 2166, Varnsdorf, IČO: tel CZ.1.07/1.5.00/ Pro vzdělanější Šluknovsko III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT Bc. Luděk Cupal Tvorba internetových stránek VY_32_INOVACE_0101_0305 WWW - HTML kód I Výklad: úvod do značkovacího jazyka HTML, syntaxe Vytvořeno Určeno pro ICT, 3. ročník, studijní obor Cestovní ruch Přílohy bez příloh

3 ICT CR, 3. ročník Tvorba internetových stránek učební materiál č. 5 WWW HTML kód I

4 Ú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í do adresního řádku prohlížeče se otevře soubor index.htmlležící v kořenovém adresáři datového úložiště spojeného s doménou sablony.cz)

5 Ú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í

6 Úvod do HTML kód HTML(= Hypertext MarkupLanguage) 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 tagtvoří 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 tagemovlivněn některé tagy nejsou nepárové, není jich však mnoho tagymí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

7 Úvod do HTML kromě klasických tagůlze v hypertextovém dokumentu použít komentáře, které se uzavírají mezi skupiny znaků <!-- a --> 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í <!doctype tato deklarace, pokud je použitá, je v HTML dokumentu vždy na prvním řádku jako úplně první text

8 Syntaxe <font color="green" size="4">text</font> 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 tagumohou 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 taguje opět v ostrých závorkách, v nichž je lomítko a jméno tagu(bez mezer) </font>

9 Syntaxe tagylze do sebe vnořovat, nesmějí se však křížit <h1><strong>tučný</strong> NADPIS</h1> <h1><strong>tučný</h1> NADPIS</strong> ANO 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

10 Seznam použitých zdrojů HyperTextMarkupLanguage. In: Wikipedia: thefree encyclopedia[online]. San Francisco(CA): WikimediaFoundation, [cit ]. Dostupné z: < JANOVSKÝ, Dušan. Základy HTML. Jak psát web[online] [cit ]. Dostupné z: <