Radomír Prokop
SŠ teleinformatiky, Ostrava-Poruba ·
prokop@teleinformatika.eu
Tyto stránky jsou určeny jako doplněk k výuce probíhající na naší škole. Studenti mohou z těchto stránek libovolně čerpat materiály pro svou práci a podle potřeby si příslušný učební materiál vytisknout. Veškeré zde umístěné materiály neprošly jazykovou úpravou.
Všechny tyto studijní materiály jsou rovněž umístěné v aplikaci MS Teams a to v týmech pro jednotlivé třídy.
COPYRIGHT © 2001 - 2026 | HTML5 | CSS
Odkazy
Programy, aplikace, portály a služby whodné pro web
- Visual Studio Code
- PSPad editor
- Sublime Text
- XAMPP
- HTML CSS JavaScript - Free Online Editors and Tools
- rajce.net
- Zonerama
- Vimeo
- WiseMapping
- bubbl.us
- Canva
Jak bezpečné je vaše heslo?
Validátory a Konsorcium W3C
- Online validátor pro jazyk HTML
- Online validátor pro jazyk CSS
- Online validátor pro jazyk PHP
- Online validátor pro jazyk JavaScript
- Konsorcium W3C
Nástroje pro tvorbu nového webu
Web hosting zdarma (freehosting)
Online tutoriály (w3schools.com)
CSS - míchání barev
- Create a Palette - Coolors
- Colorpicker - výběr HTML a CSS barev
- Barevný kruh, generátor barevné palety, Adobe Color
- Paletton - The Color Scheme Designer
Google fonts
Největší databáze bezplatných ikon
Fotografie zdarma
Škola a maturita
Umělá inteligence (AI)
PW - 3.ABCD
INTERNET A WEBOVÉ STANDARDY
7. 9. 2025
- pojem Internet
- historie Internetu v datech
- pojem webové standardy
- pojem značkovací jazyk
- vývoj jazyka HTML
- stručný popis jednotlivých webových standardů
- dodržování webových standardů v praxi
- výhody webových standardů
- STÁHNOUT (DOC)
- ZOBRAZIT
VALIDACE
10. 9. 2025
- pojem validace
- online validátor pro jazyk HTML
- off-line validátor pro jazyk HTML
- online validátor pro kaskádové styly (CSS)
- off-line validátor pro kaskádové styly (CSS)
- STÁHNOUT (DOC)
- ZOBRAZIT
W3C - World Wide Web Consortium
10. 9. 2025
- pojem W3C
- činnosti Consortia
- webová stránka W3C
- STÁHNOUT (DOC)
- ZOBRAZIT
Úvod do jazyka HTML5
23. 9. 2025
- jazyk HTML
- struktura dokumentu HTML
- popis struktury jazyka HTML5
- meta tagy
- tagy jazyka HTML
- rozdělení tagů
- zápis tagů, vlastnosti, atributy, hodnoty atributů
- STÁHNOUT (DOC)
- ZOBRAZIT
Entity
23. 9. 2025
- pojem entita
- znakové entity
- čiselné entity
- příklady často používaných entit
- STÁHNOUT (DOC)
- ZOBRAZIT
- STÁHNOUT (přehled entit, PDF)
Jazyk XHTML
23. 9. 2025
- pojem XHTML
- struktura XHTML dokumentu
- zásady jazyka XHTML
- DTD
- jmenný prostor
- STÁHNOUT (DOC)
- ZOBRAZIT
Kódování textu a znakové sady
23. 9. 2025
- ASCII
- 8-bitová kódování
- ISO 8859-2
- Windows-1250
- UTF-8
- STÁHNOUT (DOC)
- ZOBRAZIT
Grafické formáty pro web
23. 9. 2025
- vektorová grafika
- rastrová grafika
- favicon (favicon.ico)
- STÁHNOUT (DOC)
- ZOBRAZIT
Visual Studio Code
30. 9. 2025
- pojem VS Code
- vysvětlení dalších pojmů
- uživatelské prostředí
- začínáme aneb náš první html soubor
- doporučená rozšíření programu
- složka se soubory
- STÁHNOUT (DOC)
- ZOBRAZIT
HTML - formátování textu
30. 9. 2025
- tagy jazyka HTML pro formátování textu
- CSS vlastnosti pro formátování textu
- STÁHNOUT (PDF)
HTML - odkazy
10. 10. 2025
- tagy jazyka HTML pro tvorbu odkazů
- absolutní odkazy
- relativní odkazy
- odkaz na e-mail
- odkaz na telefonní číslo
- obrázek jako odkaz
- odkaz na určité místo na stránce
- STÁHNOUT (PDF)
- STÁHNOUT (cestne_prohlaseni.pdf)
- STÁHNOUT (game-of-thrones.jpg)
- STÁHNOUT (lorem_ipsum.doc)
- STÁHNOUT (google.png)
- STÁHNOUT (soubor.html)
Nadefinování barev pomocí CSS
19. 10. 2025
- tagy jazyka HTML pro formátování textu
- CSS vlastnosti pro nastavení barvy textu
- CSS vlastnosti pro nastavení barvy pozadí
- pět způsobů nadefinování barev
- STÁHNOUT (PDF)
- The super fast color palettes generator
- Web Safe Colors Chart (bezpečné barvy)
- Pojmenované barvy
- Nastavení průhlednosti červené barvy
HTML - seznamy
4. 11. 2025
- nečíslované seznamy
- číslované seznamy
- číslované seznamy + startovací pozice
- seznam, před položkami je obrázek
- víceúrovňový seznam
- definiční seznam
- STÁHNOUT (PDF)
- STÁHNOUT (square-purple.png)
HTML - obrázky
16. 11. 2025
- vložení obrázku
- obrázek obtékaný textem
- obrázek bez obtékání textu
- osm typů rámečků kolem obrázku
- zmenšování obrázku
- STÁHNOUT (PDF)
- STÁHNOUT (obrazek.png)
- www.flaticon.com (velké množství kvalitních ikon)
HTML - videa
24. 11. 2025
- vkládání videí z YouTube
- získání kódu videa
- nastavení rozměrů videa
- více videí vedle sebe
- rozšíření programu VS Code: Live Server
- STÁHNOUT (PDF)
HTML - obrazová klikací mapa
1. 12. 2025
- vytvoření obrazové klikací mapy
- nadefinování aktivních oblastí
- obrázek ČR (kraje)
- STÁHNOUT (PDF)
- tvary aktivních oblastí a jejich souřadnice STÁHNOUT (souradnice.png)
- STÁHNOUT (mapa-cr.png)
- STÁHNOUT (mapa-cr-kraje.png)
- online aplikace: https://www.image-map.net
- STÁHNOUT (aplikace image-map.net - postup, PDF)
HTML - tabulky
15. 12. 2025
- tvorba a úprava tabulek
- nadpis, hlavička, řádek, buňka tabulky, slučování buněk
- 12 různých tabulek
- k dispozici soubory html i css
- STÁHNOUT (soubory html, css, ZIP)
HTML - plovoucí rámy
10. 1. 2026
- plovoucí rám obsahující text
- plovoucí rám obsahující odkazy
- plovoucí rám obsahující seznamy
- plovoucí rám obsahující obrázky
- plovoucí rám obsahující web. stránku
- plovoucí rám obsahující video
- STÁHNOUT (soubory html, css, ZIP)
HTML - formulářové prvky
26. 1. 2026
- formulářové prvky
- funkční formulář pro studenty
- STÁHNOUT (formulářové prvky, ZIP)
- STÁHNOUT (funkční formulář pro studenty, ZIP)
Kaskádové styly (CSS) - úvod
30. 1. 2026
- pojem
- důvod vzniku
- výhody
- nevýhody
- syntaxe
- selektory
- připojení CSS do HTML stránky
- komentáře
- limity historického CSS vs. možnosti moderního CSS
- kaskádové pořadí (priorita stylů)
- CSS validátor
- STÁHNOUT (DOC)
- ZOBRAZIT
- STÁHNOUT (tři způsoby propojení s HTML, ZIP)
Přehledy CSS vlastností
30. 1. 2026
CSS - třídy
10. 2. 2024
- pojem třída
- syntaxe
- vícenásobné třídy
- příklady
- STÁHNOUT (DOC)
- ZOBRAZIT
- STÁHNOUT (příklad, ZIP)
CSS - identifikátory
17. 2. 2024
- pojem identifikátor
- syntaxe
- porovnání třídy a identifikátoru
- příklady
- STÁHNOUT (DOC)
- ZOBRAZIT
- STÁHNOUT (příklad, ZIP)
CSS - pseudotřídy, pseudoelementy
25. 2. 2024
- pojem pseudotřída
- syntaxe
- příklady
- pojem pseudoelement
- syntaxe
- příklady
- STÁHNOUT (DOC)
- ZOBRAZIT
- STÁHNOUT (příklad, ZIP)
CSS - kontextové a vícenásobné selektory
3. 3. 2024
- pojem kontextový selektor
- syntaxe
- příklady
- pojem vícenásobný selektor
- syntaxe
- příklady
- STÁHNOUT (DOC)
- ZOBRAZIT
- STÁHNOUT (příklad, ZIP)
CSS - barvy a pozadí
20. 3. 2024
- definice barev textu (5 způsobů)
- průhlednost
- barva pozadí
- pozadí a text
- podpůrné nástroje
- obrázek na pozadí
- bezpečné barvy
- stupně šedi
- základní barvy
- syntaxe
- příklady
- STÁHNOUT (DOC)
- ZOBRAZIT
- STÁHNOUT (příklad, ZIP)
CSS - vlastnosti písma
7. 4. 2024
- font-style
- font-variant
- font-weight
- font-size
- font-family
- font
- syntaxe
- příklady
- STÁHNOUT (DOC)
- ZOBRAZIT
- STÁHNOUT (příklad, ZIP)
CSS - vlastnosti textu
6. 5. 2024
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- text-align
- text-indent
- line-height
- text-shadow
- syntaxe
- příklady
- STÁHNOUT (DOC)
- ZOBRAZIT
- STÁHNOUT (příklad, ZIP)
CSS - okraje objektů
7. 6. 2023
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin
- padding-top
- padding-right
- padding-bottom
- padding-left
- padding
- syntaxe
- příklady
- STÁHNOUT (DOC)
- ZOBRAZIT
- STÁHNOUT (okraje objektů, příklad, ZIP)
- STÁHNOUT (okraje objektů - tanulka, příklad, ZIP)
PW - 4.ABCD
JavaScript
8. 11. 2025
- pojem
- historie
- typ skriptování podle prostředí
- základní charakteristiky
- case sensitive
- možnosti jazyka
- omezení jazyka
- začlenění skriptu do stránky
- přípony souborů
- vývojové nástroje
- STÁHNOUT (DOC)
- ZOBRAZIT
JavaScript - příklady
8. 11. 2025
- Co umí JavaScript?
- STÁHNOUT (příklady 001 - 005, ZIP)
- Kam vložit JavaScript?
- STÁHNOUT (příklady 006 - 010, ZIP)
- Výstup v JavaScriptu
- STÁHNOUT (příklady 011 - 014, ZIP)
- Syntaxe JavaScriptu
- STÁHNOUT (příklady 015 - 026, ZIP)
- Příkazy JavaScriptu
- STÁHNOUT (příklady 027 - 032, ZIP)
- Komentáře v JavaScriptu
- STÁHNOUT (příklady 033 - 037, ZIP)
- Proměnné v JavaScriptu
- STÁHNOUT (příklady 038 - 048, ZIP)
- Aritmetické operátory v JavaScriptu
- STÁHNOUT (příklady 049 - 057, ZIP)
- Přiřazovací operátory v JavaScriptu
- STÁHNOUT (příklady 058 - 063, ZIP)
- Spojování řetězců v JavaScriptu
- STÁHNOUT (příklady 064 - 068, ZIP)
- Datové typy v JavaScriptu
- STÁHNOUT (příklady 069 - 077, ZIP)
- Objekty v JavaScriptu
- STÁHNOUT (příklady 078 - 085, ZIP)
- Funkce v JavaScriptu
- STÁHNOUT (příklady 086 - 091, ZIP)
- Události v JavaScriptu
- STÁHNOUT (příklady 092 - 094, ZIP)
- Řetězce v JavaScriptu
- STÁHNOUT (příklady 095 - 106, ZIP)
- Čísla v JavaScriptu
- STÁHNOUT (příklady 107 - 135, ZIP)
- Číselné metody v JavaScriptu
- STÁHNOUT (příklady 136 - 153, ZIP)
- Matematika v JavaScriptu
- STÁHNOUT (příklady 154 - 165, ZIP)
- Random v JavaScriptu
- STÁHNOUT (příklady 166 - 174, ZIP)
- Data v JavaScriptu
- STÁHNOUT (příklady 175 - 182, ZIP)
- Pole v JavaScriptu
- STÁHNOUT (příklady 183 - 193, ZIP)
- Metody polí v JavaScriptu
- STÁHNOUT (příklady 194 - 203, ZIP)
- Řazení polí v JavaScriptu
- STÁHNOUT (příklady 204 - 217, ZIP)
- Iterace pole v JavaScriptu
- STÁHNOUT (příklady 218 - 228, ZIP)
- Převod typů v JavaScriptu
- STÁHNOUT (příklady 229 - 234, ZIP)
- Booleovské hodnoty v JavaScriptu
- STÁHNOUT (příklady 235 - 244, ZIP)
- Porovnávání v JavaScriptu
- STÁHNOUT (příklady 245 - 255, ZIP)
- Podmínky v JavaScriptu
- STÁHNOUT (příklady 256 - 260, ZIP)
- Cykly v JavaScriptu
- STÁHNOUT (příklady 261 - 268, ZIP)
- Zpracování chyb v JavaScriptu
- STÁHNOUT (příklady 269 - 271, ZIP)
- Regulární výrazy v JavaScriptu
- STÁHNOUT (příklady 272 - 273, ZIP)
- Objekty v JavaScriptu II
- STÁHNOUT (příklady 274 - 282, ZIP)
- Vlastnosti objektů v JavaScriptu
- STÁHNOUT (příklady 283 - 287, ZIP)
- Bonusové příklady v JavaScriptu vytvořené pomocí AI
- STÁHNOUT (40 příkladů, ZIP)
PHP
8. 11. 2025
- pojem
- historie
- typ skriptování podle prostředí
- základní charakteristiky
- case sensitive
- možnosti jazyka
- omezení jazyka
- začlenění skriptu do stránky
- přípony souborů
- princip fungování PHP
- podpora u webhostingu
- vývojové nástroje
- STÁHNOUT (DOC)
- ZOBRAZIT
Zobrazení výsledku PHP souboru v prohlížeči (postup ve škole)
8. 11. 2025
- postup ve škole
- STÁHNOUT (DOC)
- ZOBRAZIT
Zobrazení výsledku PHP souboru v prohlížeči (postup doma)
8. 11. 2025
- postup doma
- STÁHNOUT (DOC)
- ZOBRAZIT
PHP - příklady
17. 11. 2025
- Syntaxe PHP
- STÁHNOUT (příklady 001 - 003, ZIP)
- Komentáře v PHP
- STÁHNOUT (příklady 004 - 006, ZIP)
- Proměnné v PHP
- STÁHNOUT (příklady 007 - 012, ZIP)
- Příkazy echo a print
- STÁHNOUT (příklady 013 - 016, ZIP)
- Datové typy v PHP
- STÁHNOUT (příklady 017 - 022, ZIP)
- Řetězce v PHP
- STÁHNOUT (příklady 023 - 027, ZIP)
- Čísla v PHP
- STÁHNOUT (příklady 028 - 033, ZIP)
- Matematika v PHP
- STÁHNOUT (příklady 034 - 040, ZIP)
- Konstanty v PHP
- STÁHNOUT (příklady 041 - 044, ZIP)
- Operátory v PHP
- STÁHNOUT (příklady 045 - 085, ZIP)
- Příkazy if...else a switch v PHP
- STÁHNOUT (příklady 086 - 089, ZIP)
- Cykly while a for v PHP
- STÁHNOUT (příklady 090 - 096, ZIP)
- Funkce v PHP
- STÁHNOUT (příklady 097 - 103, ZIP)
- Pole v PHP
- STÁHNOUT (příklady 104 - 108, ZIP)
- Vícerozměrná pole v PHP
- STÁHNOUT (příklady 109 - 110, ZIP)
- Řazení polí v PHP
- STÁHNOUT (příklady 111 - 118, ZIP)
- Superglobální proměnné v PHP
- STÁHNOUT (příklady 119 - 123, ZIP)
- Regulární výrazy v PHP
- STÁHNOUT (příklady 124 - 126, ZIP)
- Ověření formuláře v PHP
- STÁHNOUT (příklad 127, ZIP)
- Datum a čas v PHP
- STÁHNOUT (příklady 128 - 136, ZIP)
- Include v PHP
- STÁHNOUT (příklady 137 - 141, ZIP)
- Práce se soubory v PHP
- STÁHNOUT (příklad 142, ZIP)
- Otevření, čtení, zavření souboru v PHP
- STÁHNOUT (příklady 143 - 146, ZIP)
- Cookies v PHP
- STÁHNOUT (příklady 147 - 150, ZIP)
- Relace v PHP
- STÁHNOUT (příklady 151 - 155, ZIP)
- Filtry v PHP
- STÁHNOUT (příklady 156 - 162, ZIP)
- JSON
- STÁHNOUT (příklady 163 - 166, ZIP)
- Výjimky v PHP
- STÁHNOUT (příklady 167 - 170, ZIP)
- Třídy a objekty v PHP
- STÁHNOUT (příklady 171 - 181, ZIP)
Úprava web. šablony pomocí PHP - 1. způsob
5. 12. 2025
Úprava web. šablony pomocí PHP - 2. způsob
5. 12. 2025
Webové šablony zdarma k použití
10. 1. 2026
- https://html5up.net
- https://freehtml5.co
- https://themewagon.com/theme-price/free
- https://www.tooplate.com/free-templates
- https://templated.live
- https://htmlrev.com/free-html-templates.html
- https://html5webtemplates.co.uk/templates
- https://templatemo.com/tag/html5
- https://colorlib.com/wp/free-html5-website-templates
- https://onepagelove.com/templates/free-templates
- https://uideck.com/templates
- https://bootstrapmade.com/
DTD a validace
30. 1. 2025
- pojem DTD, rozdělení (popis jednotlivých typů DTD)
- W3C (pojem, činnost, webová adresa)
- validace (pojem, důvody validace, on-line validace (webová adresa, co je možné validovat), offline validace (kontrola zdrojového kódu ve vývojovém prostředí, klávesová zkratka, výsledky validace), praktické příklady), validace a webový prohlížeč
- webové standardy (popis, výhody a dodržování webových standardů v praxi)
- STÁHNOUT (DOC)
- ZOBRAZIT
Webhosting
27. 2. 2024
- pojem, co by měl webhosting splňovat, rozdělení domén, vlastní doména, prostor na disku, skriptování na straně serveru, databáze, e-mail, vlastní server
- technická podpora, garance kvality služeb, další vlastnosti webhostingu
- český webhosting, freehosting
- registrace vlastní domény, nahrání stránek na web
- STÁHNOUT (DOC) | ZOBRAZIT
- STÁHNOUT (registrace domény 3. řádu, endora.cz, DOC) | ZOBRAZIT
- STÁHNUT (nahrání stránek na web, endora.cz, DOC) | ZOBRAZIT
- STÁHNOUT (instalace a použití WordPressu, endora.cz, DOC) | ZOBRAZIT
- STÁHNOUT (registrace domény 3. řádu, webzdarma.cz, DOC) | ZOBRAZIT
- STÁHNUT (nahrání stránek na web, webzdarma.cz, DOC) | ZOBRAZIT
- STÁHNOUT (instalace a použití WordPressu, webzdarma.cz, DOC) | ZOBRAZIT
PRAKTICKÁ MATURITA (IKT, IT)
Úloha č. 1
30. 12. 2025
K dispozici je zde několik doplňkových souborů ke stažení, které jsou zapotřebí k úloze č. 1.
Úloha č. 2
9. 1. 2026
K dispozici je zde několik doplňkových souborů ke stažení, které jsou zapotřebí k úloze č. 2.
ÚSTNÍ MATURITA (IKT, IT)
Maturitní téma č. 24: Značkovací jazyk HTML
20. 1. 2026
- pojem, značky (tagy), atributy a hodnoty atributů, rozdělení značek
- zásady jazyka HTML, přípony souborů, HTML entity
- struktura HTML dokumentu (popis jednotlivých částí), kódování znaků
- značky jazyka HTML (nadpisy, odstavce, oddíly, odkazy, obrázky, seznamy, tabulky)
- HTML validátor
- STÁHNOUT (DOC)
- ZOBRAZIT
Maturitní téma č. 25: Kaskádové styly (CSS)
18. 1. 2026
- pojem, důvod vzniku, výhody a nevýhody, připojení CSS k HTML dokumentu
- třídy, identifikátory, pseudotřídy, pseudoelementy
- vícenásobné a kontextové selektory
- CSS vlastnosti barev, písma, textu, boxů a bloků, pozicování
- CSS validátor
- STÁHNOUT (DOC)
- ZOBRAZIT
WEBOVÉ ŠABLONY (HTML5)
PROJEKT TELEWEB 2025
Návody
22. 10. 2025
- přihlášení
- změna hesla
- informace o FTP účtu
- změna hesla pro FTP účet
- přístup na FTP server
- postup přístupu na FTP server pomocí aplikace FileZilla
- postup přístupu na FTP server pomocí aplikace Altap Salamander
- zobrazení výsledku webového obsahu ve webovém prohlížeči
- NÁVOD
Aplikace
22. 10. 2025
- FileZilla
- FileZilla Portable (funguje i ve škole - stáhnout, nainstalovat a spustit)
- Altap Salamander
Autoškola
eTesty
eTesty (Informační systém pro vykonávání elektronických testů)