VSTUPNÍ ČÁST

Název modulu

Základy HTML, HTML5, CSS, W3C, SEO optimalizace

Kód modulu

82-m-4/AC76

Typ vzdělávání

Odborné vzdělávání

Typ modulu

(odborný) teoreticko–praktický

Kategorie dosaženého vzdělání

M (EQF úroveň 4)

Skupiny oborů

82 - Umění a užité umění

Komplexní úloha

Obory vzdělání - poznámky

• 82-41-M/05 Grafický design
• 82-41-M/03 Výstavní tvorba a bytový design

Délka modulu (počet hodin)

24

Poznámka k délce modulu

Platnost modulu od

30. 04. 2020

Platnost modulu do

21. 11. 2019

Vstupní předpoklady

Nejsou stanoveny

JÁDRO MODULU

Charakteristika modulu

Cílem modulu je osvojení znalostí a terminologie z oblasti kódování značkovacího jazyka HTML, navazujících kaskádových stylů CSS, SEO optimalizace a návrhu webu pomocí W3C standardovaného jazyka. Také využití nástrojů SEO optimalizace pro vyhledávače k docílení viditelnosti a měření konverzních poměrů webu. 

Žák bude schopen popsat prostředí kódu, jazyky a vztahy mezi nimi, vysvětlit proces psaní kódu, nastavit SEO, připravit databázi webu, umisťovat a pozicovat jednotlivé prvky pomocí CSS. Žák se orientuje v HTML5 prosředí i jeho CSS, v jejich vlastnostech a použití.

Po absolvování modulu je žák schopen aplikovat získané znalosti do vlastní práce a pracovat na zadaném úkolu samostatně.

Očekávané výsledky učení

Žák:

• používá terminologii z oblasti kódování značkovacího jazyka HTML
• rozeznává kódovací jazyky a používá k tomu určený software
• rozeznává výhody užití kaskádových stylů
• používá a zná vhodné atributy a značky (párové x nepárové) HTML 
• rozeznává strukturu HTML i CSS
• používá prostředí HTML5 i jeho CSS
• vymezí vhodnost užití nástrojů pro SEO optimalizaci
• ovládá sémantické a vizuální formátování znaků
• provádí navržení i realizaci webu 
• používá drátový model pro design webu
• ve vlastní práci kombinuje všechny aspekty naučených znaků a jejich formátování

Obsah vzdělávání (rozpis učiva)

Obsahové okruhy učiva:

1. Základy HTML a HTML5 
2. Server – freehosting, placený hosting

• doména
• FTP

3. Správa souborů 
4. Prohlížeče (Explorer, Firefox, Chrome)
5. Editor vhodný pro psaní jazyka:

• Poznámkový blok,
• PSPad
• Notepad++
• NetBeans
• Adobe Dreamweaver

6. HTML a a HTML5:

• obsah a vzhled
• tagy – značky v HTML
• základní kostra v HTML
• strukturní blokové značky
• sématické a vizuální formátování znaků
• odkazy
• obrázky a multimédia
• seznamy
• tabulky
• formuláře
• další značky (čas, výstraha, neplatný text, aj.)

7. CSS:

• přímý stylopis
• externí stylopis
• pseudotřídy
• URL v CSS
• jednotky v CSS
• vlastnosti
• font
• odstavce
• barvy a pozadí
• velikosti
• okraje
• rámečky
• pozicování
• tabulky

8. SEO (optimalizace pro vyhledávače):

• funkce SEO – vyhledávání na Googlu
• html tag – tag title
• URL 
• duplicity a podobnosti 
• přirozené duplicity a kanonizace 
• míra zaindexování – operátorem site: ve vyhledávačích 
• odkazy – operátorem link, webmaster tools nebo analýzou statistik a logů
• ranky – teoretický základ
• Seznam, Google
• návštěvnost –  cíl SEO

Učební činnosti žáků a strategie výuky

Zásady psaní textů vhodných pro Internet, hlavně zmiňuji nadpisy, češtinu a aktuálnost.

Strategie učení: ve výuce se doporučuje kombinovat níže uvedené metody výuky.

Metody slovní:

• odborný výklad s prezentací a ukázkami (responzivní webové stránky–základní, pokročilé, základní kostra HTML a CSS, formátování znaků, stylopis, optimalizace pro vyhledávače)

Přímé vyučování:

• přednes s použitím odborné literatury–prezentace názorných prací
• vlastní tvorba s konzultací - průběžné práce
• hodnocená samostatná práce 
• orientace žáků v učivu (diskuze, ústní prezentace)
• prezentace vlastní tvorby před spolužáky ve třídě

Specifikace průběžné práce:

• provedení jednotlivých prvků stránky (4–8 prací)

• provedení vlastního responzivního vícestránkového webu (1  práce)

Specifikace samostatné práce:

• teoretická část (teoretický popis tématu)
• praktická část (návrh a provedení webu, výsledky pozorování)
• závěr (výsledky práce)

Učební činnosti žáků:

• používá základy HTML a popíše je na příkladech nejjednodušších stránek
• charakterizuje Správu souborů včetně pojmenovávání, přejmenování a startovacího souboru
• rozeznává kódovací jazyky a používá k tomu určený software
• rozeznává výhody užití kaskádových stylů
• používá a zná užití vhodných atributů a značek (párových x nepárových) HTML 
• rozeznává strukturu HTML i CSS
• vymezí vhodnost užití nástrojů pro SEO optimalizaci
• používá sémantické a vizuální formátování znaků
• používá zásady psaní textů vhodných pro Internet ( nadpisy, češtinu a aktuálnost)
• provádí navržení i realizaci webu 
• používá drátový model pro design webu
• ve vlastní práci kombinuje všechny aspekty naučených znaků a jejich formátování

Zařazení do učebního plánu, ročník

3. ročník

VÝSTUPNÍ ČÁST

Způsob ověřování dosažených výsledků

Písemná forma zkoušení

• základní pojmy a terminologie

Průběžné práce:

• provedení jednotlivých prvků stránky 
• provedení vlastního responzivního vícestránkového webu

Samostatná práce žáků:

• zpracování vlastního obrazového materiálu pro web
• provedení webdesignu pomocí grid systému
• přehled vlastností CSS, jejich hodnot a významů s příklady zobrazení

Ověřované okruhy:

• termín HTML, CSS, SEO, W3C
• vhodné užití editoru
• postprodukce vlastního obrazového materiálu
• vhodné atributy a značky (párové x nepárové) HTML včetně jejich užití
• sémantické a vizuální formátování znaků
• navržení i realizace designu webu 
• vhodnost užití nástrojů pro SEO optimalizaci
• kombinace jednotlivých aspektů daných znaků a jejich formátování

Kritéria hodnocení

prospěl – neprospěl

• prospěl: splnění zadání (zadaný počet prací, zvládnutí návrhu i provedení kódu webu–ověření funkčnosti a zobrazování; SEO – docílení viditelnosti a měření konverzních poměrů webu)
• neprospěl: nesplnění zadání, provedení zvládne jen s pomocí učitele, vlastní práce vykazují závažné nedostatky

Pro splnění modulu ho musí žák absolvovat s maximální absencí do 20 %

Doporučená literatura

CASTRO, Elizabeth; HYSLOP, Bruce: HTML5 a CSS3: názorný průvodce tvorbou WWW stránek, 2017, ISBN: 978-80-251-3733-8

DOMES, Martin: Kniha Tvorba WWW stránek pro začátečníky, 2008, ISBN: 978-80-251-2160-3

JANOUCH, Viktor: Internetový marketing, 2014, ISBN: 978-80-251-4311-7

https://www.w3schools.com

Poznámky

Materiál vznikl v rámci projektu Modernizace odborného vzdělávání (MOV), který byl spolufinancován z Evropských strukturálních a investičních fondů a jehož realizaci zajišťoval Národní pedagogický institut České republiky. Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Robin Michenka. Creative Commons CC BY SA 4.0 – Uveďte původ – Zachovejte licenci 4.0 Mezinárodní.