Adobe Systems
Webové stránky ve výuce (e-learning)

Prezentace je vytvořena v rámci projektu ZIP, reg. č. CZ.02.3.68/0.0/0.0/19_068/0016170
Obsah obrázku text Popis byl vytvořen automaticky

Adobe Systems
Multimedia ve výuce I
2
Webové stránky ve výuce (e-learning)
Vyučující: Dominik Alvaro Rada
rada@sci.muni.cz

Adobe Systems
Webové stránky ve výuce
3
K čemu lze využít webovou stránku
̶Dokumenty a prezentace předmětu
̶Komunikace s rodiči a žáky
̶Pozvánka na událost/konferenci
̶E-learning
̶A mnoho dalšího…

Adobe Systems
Webové stránky ve výuce
4
Základní pojmy
̶HTML – …
̶CSS – …
̶Redakční systém – …
̶Moodle – …
̶WordPress – …
̶SEO – …
̶Doména – …
̶Hosting – …

Adobe Systems
Webové stránky ve výuce
5
Redakční systém
̶Snadný grafický editor pro správu webu
̶Většinou textové pole podobné Wordu
̶Jednoduchá „skládačka“
̶Joomla, WordPress, Umbraco…

Adobe Systems
Webové stránky ve výuce
6
HTML tagy I
̶základní tagy:
̶<h1></h1> hlavička (1 až 6) - <h1></h1> <h2></h2> atd.
̶<p></p> odstavec
̶<br /> zalomení řádku
̶<hr /> vodorovná čára
̶<b></b> tučný text
̶<i></i> kurzíva
̶<u></u> podtržený text
̶<sub></sub> dolní index
̶<sup></sup> horní index
̶<a href=″URL″>text odkazu</a> odkaz na URL
̶<img src=″URL″ alt=″popis″ /> obrázek
̶
̶

Adobe Systems
Webové stránky ve výuce
7
HTML tagy II
̶seznamy:
̶<ul></ul> nečíslovaný seznam
̶<ol></ol> číslovaný seznam
̶<li></li> položka seznamu
̶tabulky:
̶<table></table> tabulka
̶<tr></tr> řádek tabulky
̶<td></td> buňka tabulky
̶znakové entity:
̶&copy; ©
̶&nbsp; nedělitelná mezera

Adobe Systems
Webové stránky ve výuce
8
Na co myslet
̶Na různá velká zařízení (telefony, tablety, PC atp.)
̶Odkazy mimo vlastní web – otevřít v nové záložce
̶Proč?
̶Typografické chyby J
̶Věcný obsah (hodiny, kdo má svátek…)
̶Grafika a jednoduchost
̶
̶

Adobe Systems
Webové stránky ve výuce
9
Praktická ukázka
̶https://webcentrum.muni.cz/redakce/
̶Vytvoření stránky
̶Vložení „heroboxu“
̶Vložení obrázku
̶Vložení textového pole a ikony
̶Vložení své vizitky
̶Vložení videa z YouTube (elementem a pomocí HTML)

Adobe Systems
Webové stránky ve výuce
10
Užitečné odkazy
̶Popis HTML jazyka: https://www.jakpsatweb.cz/
̶Vysvětlení SEO: https://cs.wikipedia.org/wiki/Optimalizace_pro_vyhled%C3%A1va%C4%8De
̶Informace k doménám: https://www.nic.cz/
̶Redakční systém zdarma: https://wordpress.com/

Adobe Systems
Dotazy a diskuze
Webové stránky ve výuce
11

Adobe Systems
Multimedia ve výuce I
12
Zdroje
̶Jak psát web [online]. Praha: Jak psát web, ©1999 - 2022 [cit. 2021-10-10]. Dostupné z:
https://www.jakpsatweb.cz/