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
Webové stránky ve výuce2
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ýuce3
Základní pojmy
̶ HTML – …
̶ CSS – …
̶ Redakční systém – …
̶ Moodle – …
̶ WordPress – …
̶ SEO – …
̶ Doména – …
̶ Hosting – …
Webové stránky ve výuce4
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ýuce5
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ýuce6
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ýuce7
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ýuce8
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ýuce9
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ýuce10
Multimedia ve výuce I11
Zdroje
̶ Jak psát web [online]. Praha: Jak psát web, ©1999 - 2022 [cit. 2021-10-10]. Dostupné z:
https://www.jakpsatweb.cz/
„Tento materiál, Popis inovace předmětu C7660, jehož autorem je Mgr. Tomáš Bouchal, který je dostupný z:
Databáze výstupů projektů OP VVV, (https://databaze.opvvv.msmt.cz), lze užít v souladu s licenčními podmínkami
Creative Commons BY‐SA 4.0 International (https://creativecommons.org/licenses/by‐sa/4.0/legalcode). Uvedené
se nevztahuje na díla nebo jiné předměty ochrany (např. obrazovou či fotografickou dokumentaci), které jsou ve
výstupu užity zejména na základě smluvní licence nebo výjimky či omezení příslušných práv, jak je uvedeno u
konkrétního jednotlivého předmětu ochrany.“