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
Webové stránky ve výuce
2
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
3
Základní pojmy
̶HTML – …
̶CSS – …
̶Redakční systém – …
̶Moodle – …
̶WordPress – …
̶SEO – …
̶Doména – …
̶Hosting – …

Adobe Systems
Webové stránky ve výuce
4
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
5
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
6
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
7
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
8
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
9
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
10

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

Adobe Systems
„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.“