Elektronické publikování – rozcestník

Rozcestník kategorie: o čem předmět je, kdy se podle ŠVP učí, co si z něj určitě zapamatovat, kde je které téma a jak souvisí s maturitou.

O předmětu

• Tvorba webových stránek od struktury po publikování: HTML (obsah a struktura), CSS (vzhled), JavaScript (chování).
• Dále design webu a grafika pro web, responzivní web (media queries, flexbox, grid), redakční systémy (WordPress) a e-shop.
• Je to převážně praktický předmět – výsledkem je vlastní web; stránky zde shrnují pojmy a syntaxi.
• Navazuje na grafiku na PC (úprava obrázků pro web) a pokračuje webovým programováním (PHP, dynamické stránky).

Ročníky a hodiny podle ŠVP

Plné znění výstupů je v přehledu ŠVP.

Co si určitě zapamatovat

• HTML je značkovací jazyk: značky (tagy) v lomených závorkách, párové (<p>…</p>) a nepárové (<br>, <img>). Dokument má pevnou kostru <html> → <head> (metadata, titulek, připojené styly) a <body> (obsah).
• Základní tagy: nadpisy <h1>–<h6>, odstavec <p>, odkaz <a href>, obrázek <img src>, seznamy <ul> / <ol> s položkami <li>, tabulka <table> s řádky <tr> a buňkami <td>, bloky <div>.
• CSS se k HTML připojí tagem <link> v hlavičce. Zápis: selektor a ve složených závorkách vlastnosti oddělené středníkem – h1 { color: blue; font-size: 12px; }. Selektor může být tag, třída (.menu) nebo identifikátor (#hlavicka).
• margin = vnější okraj, padding = vnitřní okraj; barvy šestnáctkově (#ff0000) nebo rgb().
• Responzivní web se přizpůsobí šířce obrazovky: media queries (@media (max-width: 600px) { … }), rozvržení flexbox (řada nebo sloupec) a grid (mřížka). Mobile-first = nejdřív styly pro mobil, pak rozšíření pro větší obrazovky.
• Grafika pro web: JPEG pro fotografie, PNG pro průhlednost, SVG pro vektory, moderně WebP; obrázky před nasazením zmenšit a zkomprimovat.
• JavaScript běží v prohlížeči (na rozdíl od PHP na serveru). Připojí se inline (onclick), tagem <script> nebo externím souborem .js. Proměnné let (měnitelná), const (konstanta); === porovná i datový typ. Se stránkou pracuje přes DOM (document.getElementById, addEventListener).
• Redakční systém (CMS) – např. WordPress: obsah se spravuje v administraci bez znalosti kódu, vzhled určuje šablona (theme), funkce se přidávají pluginy.
• E-shop: katalog produktů, košík, platební brána, správa objednávek.

Témata kategorie

HTML a CSS

• HTML a CSS – struktura stránky a základní tagy
• CSS – zápis, selektory a kaskáda
• CSS – barvy, pozadí, text a jednotky
• CSS – box model, rozvržení a pozicování

Responzivní web a nástroje

• Responzivní web, media queries a breakpointy
• Bootstrap a CSS frameworky
• Design webu, redakční systémy a e-shop

Skripty a zveřejnění

• JavaScript – základy
• Publikování webu – doména, hosting, FTP a SEO

Navazující látka: serverová strana webu v dynamických stránkách a serverovém skriptování, útoky na webové aplikace (XSS, SQL injection) v zabezpečení sítí a aplikací.

Maturitní okruhy

Elektronické publikování se u ústní zkoušky nezkouší – podle maturitních okruhů IT je součástí praktické zkoušky a maturitní práce. Na web navazuje okruh 20 (zranitelnost webových aplikací – HTTP, XSS) z kybernetické bezpečnosti.

Co je jen okrajové

• Zastaralé tagy – <b>, <i>, <bgsound> a vzhled nastavovaný přímo v HTML; dnes patří vzhled do CSS (pro tučné písmo font-weight, sémanticky <strong>).
• Rozvržení pomocí float – nahradily ho flexbox a grid.
• var v JavaScriptu – starší způsob deklarace, dnes let a const.
• No-code a low-code nástroje – stačí vědět, co jsou a jaké mají výhody a nevýhody.
• Ukázkový redakční systém v PHP – ilustrace principu šablony a include(), ne látka k učení zpaměti.