Maturitarozbory témat
14

Návrh a tvorba obsahového webu

📚 WEB
Příprava: 15 min
Zkouška: 15 min
📖

Teorie

Sémantika HTML, informační architektura, přístupnost (a11y), SEO základy (title, meta, sitemaps), responsivní design, wireframy, prototypování, obsahová strategie, CMS vs. statický web, performance (Lighthouse, Core Web Vitals), i18n/l10n.

🎯

Tahák

  • 1Sémantické tagy
  • 2ALT u obrázků
  • 3Mobile-first
  • 4CWV: LCP, CLS, INP
❓

Typické otázky u maturity

  • 1Co je ARIA a kdy ji použít?
  • 2Jak navrhnout navigaci pro a11y?
🏷️

Klíčová slova

a11ySEOresponsiveCore Web VitalsCMS
⚡

Praktická část

Zadání:

Navrhni strukturu sémantické homepage pro školní web.

Kroky:

  1. 1Header/Nav/Main/Aside/Footer
  2. 2H1–H2 hierarchie
  3. 3Skip to content odkaz

Kód:

index.html (výřez)
<!-- sémantická kostra -->
<header>...
<nav aria-label="Hlavní navigace">...</nav>
<main>
  <h1>Školní web</h1>
  <section aria-labelledby="novinky"><h2 id="novinky">Novinky</h2>...</section>
</main>
<footer>© škola</footer>