1. HTML - základy syntaxe

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR EU PENÍZE ŠKOLÁM
Číslo projektu CZ.1.07/1.4.00/21.2732
Název projektu školy EU Peníze školám
Klíčová aktivita III/2 Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_01

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - základy syntaxe

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Seznámení se základními pravidly zápisu jazyka HTML

Klíčová slova: webová stránka, HTML, syntaxe, značky, kód, element, objekt

Metodické zhodnocení: Žáci se seznámí se základními pravidly zápisu jazyka HTML.

Ověřeno: 7. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

1.1 HTML - základy syntaxe (studijní text)

Značkový jazyk HTML

  • značkový jazyk HTML (HyperText Markup Language) je určen pro tvorbu webového obsahu, jinými slovy - je stavebním kamenem či cihlou celého webu,
  • HTML jazyk je kombinací normálního textu a speciálních klíčových slov, tzv. "značek" nebo též "tagů",
  • každá HTML značka určuje typ obsahu (například pro odstavec, nadpis, obrázek či tabulku)

HTML soubor

  • HTML jazyk (kód) se zapisuje do souboru, který má většinou příponu HTML či HTM
  • každá webová stránka potřebuje svůj samostatný soubor
  • pokročilejší tvůrci webových stránek zapisují značky HTML do souborů příponou PHP, kde využívají pokročilé metody programování webových stránek pomocí jazyka PHP

HTML prvek

  • každá webová stránka se skládá z jednotlivých HTML prvků ("cihel"), které jsou popsány pomocí značek jazyka HTML
  • používá se též výraz HTML objekt či HTML element.

Jak se značky zapisují neboli syntaxe?

  • všechny značky jsou od ostatního textu odděleny špičatými závorkami < nebo >
  • HTML značky se rozdělují na párové (většina) a nepárové
    • párové značky mají počáteční a koncovou značku (obalují zobrazovaný obsah)
    • nepárové značky znační mají jen počáteční značku
  • koncová značka má předřazeno lomítko /
  • každá značka má navíc své atributy s různými hodnotami, které se zapisují do počáteční značky
  • atribut se odděluje od značky mezerou, totéž platí při oddělování více atributů,
  • mezi atribut a jeho hodnotu se vkládá znak "=" (bez mezer),
  • hodnota je vymezena uvozovkami.

Obecný zápis HTML

<značka atribut1="hodnota" atribut2="hodnota">Zobrazený obsah</značka>

Příklad zápisu HTML

<p align="center" size="3">Text zarovnaný na střed</p>

Vnoření značek

  • značky se mohou vnořovat do jiné značky, ale zápis se řídí jistými pravidly
  • značka nesmí mít koncovou značku dříve, než ji mají všechny vnořené značky (stejný princip jako např. závorky v matematice)

Správný zápis vnořené značky

<P>Normální text <STRONG>tučný text, <EM>tučná kurzíva</EM></STRONG>.</P>

Nesprávný zápis vnořené značky

<P>Normální text <STRONG>tučný text, <EM>tučná kurzíva</STRONG></EM>.</P>

Velikost znaků

  • při zápisu značek se nerozlišují velká a malá písmena
  • není rozdíl mezi <značka> nebo <ZNAČKA>
  • je dobré vybrat si jeden způsob (nejlépe malými písmeny)
  • totéž platí u atributů (není rozdíl mezi <značka atribut="hodnota"> nebo <ZNAČKA ATRIBUT="HODNOTA">)
  • u zobrazovaného textu je ovšem nutné dodržovat pravidla českého pravopisu
  • velká či malá písmena je též nutné dodržet u zápisu cesty k existujícímu souboru

Klávesy Enter a Tab při zápisu HTML

  • znak konce řádku (klávesa Enter) a znak tabulátoru (klávesa Tab) nejsou zpracovány při zobrazování, tudíž nehrajou při zápisu důležitou roli

1.2 HTML - základy syntaxe (cvičení)

Odpovězte na otázky

1. Jaká je správná přípona HTML souborů?

  1. .htm
  2. .www
  3. .html
  4. .web

2. Vyber jediné správné tvrzení.

  1. Nepárová značka má na konci zakončovací značku s lomítkem.
  2. Párová značka se skládá jen z počáteční značky.
  3. Párová značka má počáteční značku a koncovou značku s lomítkem.

3. Vyber jediný správný zápis vnořených značek.

  1. Normální text <b>tučný text, <i>tučný text s kurzívou</i></b>
  2. Normální text <b>tučný text<i></b>, tučný text s kurzívou</i>
  3. Normální text <i>tučný text, </i>tučný text s kurzívou<b></b>

4. Rozlišují se malá a velká písmena při zápisu samotné HTML značky?

  1. Ano
  2. Ne

5. V jakých případech se vždy zobrazí jen jedna mezera?

  1. Pokud je v zápise znak konce řádku.
  2. Pokud je v zápise znak tabulátoru.
  3. Pokud jsou v zápise dvě a více mezer.

6. Vyber jediný správný zápis HTML.

  1. <fontsize="2"color="blue">Modrý text</font>
  2. <font size=2 color=blue>Modrý text</ font>
  3. <font size="2" color="blue">Modrý text</font>