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
Multimedia ve výuce I2
Webové stránky ve výuce (e-learning)
Vyučující: Dominik Alvaro Rada
rada@sci.muni.cz
Webové stránky ve výuce3
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…
Webové stránky ve výuce4
Základní pojmy
̶ HTML – …
̶ CSS – …
̶ Redakční systém – …
̶ Moodle – …
̶ WordPress – …
̶ SEO – …
̶ Doména – …
̶ Hosting – …
Webové stránky ve výuce5
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…
Webové stránky ve výuce6
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
Webové stránky ve výuce7
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
Webové stránky ve výuce8
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 ☺
̶ Věcný obsah (hodiny, kdo má svátek…)
̶ Grafika a jednoduchost
Webové stránky ve výuce9
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)
Webové stránky ve výuce10
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/
Dotazy a diskuze
Webové stránky ve výuce11
Multimedia ve výuce I12
Zdroje
̶ Jak psát web [online]. Praha: Jak psát web, ©1999 - 2022 [cit. 2021-10-10]. Dostupné z:
https://www.jakpsatweb.cz/