Multimedia ve výuce II

Základy značkování

Slidy k přednášce (HTML)

Slidy pro tisk (pdf)

Značkování v HTML slouží k vytvoření struktury dokumentu.

Formátování dokumentu (nastavení, jak bude vypadat v prohlížeči) je záležitostí kaskádových stylů CSS.

Základy CSS, vnitřní styly

Srovnání formátování v MS Wordu a pomocí CSS

Referenční přehled vlastností CSS 1 (cz)

Reference CSS na tvorba-webu.cz

Web-safe fonty

Konsorcium W3C (en)

Seznámíme se s prací v textovém editoru

vytvoříme první dokument podle šablony HTML5
označkujeme běžný text povídek
označkujeme chemický text o alkalických kovech.

V následujících odkazech najdete zdrojový text dokumentu, zkopírujte si ho do editoru.

Zde pomocí značek vytvořte jeho strukturu, do konečné podoby ho upravíme s využitím kaskádových stylů – zkusíme ho co nejvíce připodobnit vzorovému dokumentu.

Visual Studio Code

Doporučené doplňky pro editor

HTML Preview

Dúležité zkratky v Emmet

CTRL + SHIFT + A - obalení výběru značkou (nebo složitější strukturou)
CTRL + SHIFT + K - odstranění aktuální značky
CTRL + SHIFT + I - nahrazení aktuální značky jinou
CTRL + SHIFT + M - stažení výběru na jeden řádek

Emmet Documentation – Cheat Sheet

MDN - regulární výrazy (en)

RegexOne – Learn Regular Expressions with simple, interactive exercises

Seriál Regulární výrazy a Javascript (cs)

Cvičení - soubor povídek

Cvičení - soubor povídek

V následujících odkazech najdete zdrojový text dokumentu, zkopírujte si ho do editoru.

Zde pomocí značek vytvořte jeho strukturu, do konečné podoby ho upravíme s využitím kaskádových stylů – zkusíme ho co nejvíce připodobnit vzorovému dokumentu.

Slovacko sa súdí aj nesúdí - zdroj pro cvičení

Sdílený dokument – Slovácko sa súdí aj nesúdí – cvičení

Nákres - struktura dokumentu

Rozpracovaný soubor po prvním cvičení

Navigace a layout stránek - soubor povídek

Hotový soubor stránek s navigací