Otázka: HTML
Předmět: Informatika
Přidal(a): admin
Jazyk HTML [1]
HTML je zkratka slov HyperText Markup Language, což lze do českého jazyka přeložit jako značkovací jazyk pro hypertext (text obsahující hypertextové odkazy). Je to jazyk, pomocí kterého lze vytvářet webové stránky (www). Jazyk vyvinul Tim Berners-Lee v roce 1990 pro potřeby tvorby a výměny dokumentů společně s prvn,ím prohlížečem pro organizaci CERN (Evropská organizace pro jaderný výzkum). V současné době je používána verze HTML5.
Výhodou jazyka HTML je to, že je multiplatformní. To znamená, že dokument, který pomocí HTML vytvoříte, lze zobrazovat jak na různých typech zařízení (počítače, notebooky, tablety, smartphony…), tak na různých programových vybaveních (nezáleží na použitých operačních systémech).
K prohlížení HTML dokumentů slouží prohlížeče (výčet nejznámějších):
- Internet Explorer
- Firefox
- Chrome
- Opera
Značkovací jazyk HTML
HTML není programovacím, ale značkovacím jazykem. To znamená, že části HTM dokumentu (nejčastěji text) se uzavírají do značek, TAGŮ. Část takto uzavřeného dokumentu nazýváme prvkem (elementem) dokumentu. Uzavřením do tagů je textu dáván jeho význam.
Příklad prvku dokumentu s párovým tagem – odstavec
<p>Text odstavce</p>
Příklad prvku dokumentu s nepárovým tagem – vložení obrázkuZnačky jsou většinou ve dvojicích – tzv. PÁROVÉ TAGY. Otevírací značka označuje počátek prvku <p>, následuje obsah prvku a konec označuje koncová značka </p> (shodná s počáteční, doplněná o lomítko).
<img width=75% src=“obrazky/krajiny/les.jpg“>
HTML dokumentZde je u tagu img použity dva parametry – první width pro stanovení šířky obrázku a druhý src, který popisuje, kde je obrázek uložený.
Jak již bylo řečeno, jedná se o textový dokument, jehož struktura a styl jsou definovány pomocí značek – TAGŮ. Html dokument je po uložení na disku reprezentován souborem, jehož přípona je .html nebo .htm. Pro vytváření používáme HTML editory.
Příkladem textových HTML editorů je Notepad, PSPad nebo Poznámkový blok. Při vytváření dokumentů je nutná znalost tagů HTML, některé z těchto editorů umožňují validaci kódu, barevné rozlišení kódu apod. Tvorba je velmi odlišná od klasické tvorby a úpravy dokumentů v textových editorech.
Wysiwyg editory jsou uživatelsky méně náročné, více podobné úpravě textu v textových editorech – uživatel poskládá stránku a editor následně vygeneruje odpovídající HTML kód. Příkladem těchto editorů je Adobe Dreamweaver nebo Microsoft Expression Web (náhrada za Microsoft FrontPage).
Struktura webové stránky[2]
Při vytváření webové stránky je nutné dodržet tuto strukturu, která popisuje části webové stránky.
<!DOCTYPE html> => Doctype
<html> => Začátek webové stránky
<head> => Hlavička
<title>Titulek</title>
</head> => Hlavička
<body> => Tělo (začátek)
<h1>Nadpis stránky</h1>
<p>První odstavec</p>
<h2>Podnadpis stránky</h2>
<p>Druhý odstavec</p>
</body> => Tělo (konec)
</html> => Konec webové stránky
Doctype
Úvod dokumentu, který informuje prohlížeč o typu otevřeného dokumentu. Tento je platný pro HTML5.
HTML dokument
Tag <html> označuje začátek a konec webové stránky.
Hlavička <head>
Obsahuje titulek, který je zobrazen v záhlaví webové stránky nebo jako název záložky. Dále může obsahovat metadata vztahující se k celé stránce, autora, popis, styly…
Tělo <body>
Zde je zapisován veškeré prvky (obsah) webové stránky. Obsahuje zpravidla text (rozdělený do odstavců pomocí tagu <p>).
Úkoly
- Vysvětlete, co znamená zkratka HTML.
- Vysvětlete, co je to prohlížeč a vyjmenujte alespoň tři.
- Jaké znáte programy pro tvorbu webových stránek? Jaké jsou mezi nimi rozdíly?
- Na webové stránce http://www.w3schools.com/ si otevřete HTML tutorial. Přeložte si stránku do českého jazyka a projděte si první čtyři kapitoly.
- Nalezněte chyby v následujícím kódu a opravte je.
Zdroje:
- Veškerá obrazová dokumentace použitá v tomto materiálu byla pořízena z programu Poznámkový blok (z OS Windows 7 Profesional) od firmy Microsoft (Used with permission from Microsoft).
- Příklady použité v příkladech – vlastní.
- HyperText Markup Language. WIKIPEDIE. Wikipedie [online]. San Francisco: Wikimedia Foundation, 2014, 9. 1. 2014 [cit. 2014-01-11]. Dostupné z: http://cs.wikipedia.org/wiki/HyperText_Markup_Language
- 1 Introduction — HTML5. THE WORLD WIDE WEB CONSORTIUM (W3C). W3C [online]. 2014 [cit. 2014-01-11]. Dostupné z: http://www.w3.org/TR/html5/introduction.html#a-quick-introduction-to-html
[1] HyperText Markup Language. WIKIPEDIE. Wikipedie [online]. San Francisco: Wikimedia Foundation, 2014, 9. 1. 2014 [cit. 2014-01-11]. Dostupné z: http://cs.wikipedia.org/wiki/HyperText_Markup_Language
[2] 1 Introduction — HTML5. THE WORLD WIDE WEB CONSORTIUM (W3C). W3C [online]. 2014 [cit. 2014-01-11]. Dostupné z: http://www.w3.org/TR/html5/introduction.html#a-quick-introduction-to-html
