← Úroveň 1 – Stavitel

Lekce 11 z 12 ⏱ 25 minut

Patička a poslední doladění

Dokončíš vzhled webu: patička, drobnosti, které dělají velký dojem, a závěrečná kontrola.

Ukaž mi to: patička

Patička uzavírá stránku. Bývá tmavší, klidná a drží se dole:

footer {
  background-color: #1f2937;   /* tmavě šedá */
  color: white;
  text-align: center;          /* text na střed */
  padding: 24px 16px;
  margin-top: 48px;            /* odstup od obsahu */
}

footer a {
  color: #93c5fd;              /* odkazy v tmavé patičce musí být světlé */
}

Do patičky patří: kdo web vyrobil, rok, kontakt (klidně smyšlený nebo školní – nikdy nedávej na web svou adresu ani telefon).

Ukaž mi to: drobnosti, které dělají profíka

Tři maličkosti, které skoro nikdo nezná, a přitom dělají obrovský rozdíl:

/* 1. Plynulé odscrollování při kliknutí na odkaz v rámci stránky */
html {
  scroll-behavior: smooth;
}

/* 2. Obrázky se při najetí myší lehce zvětší */
.karta img:hover,
.galerie img:hover {
  transform: scale(1.03);
}

/* 3. ...a aby to zvětšení bylo plynulé, ne skokové */
img {
  transition: transform 0.2s ease;
}

transform: scale(1.03) zvětší prvek na 103 % a transition říká: „Změny dělej plynule za 0,2 vteřiny.” Najeď myší na fotku – vidíš to jemné nadechnutí? Přesně tohle dělají moderní weby.

Teď ty 💪

  1. Nastyluj patičku podle ukázky (barvu klidně slaď se svou hlavičkou) a zkontroluj, že v ní máš: kdo web vyrobil + rok.

  2. Přidej tři profi drobnosti z ukázky.

  3. Velká kontrola celého webu. Projdi tenhle checklist:

    • Menu funguje z každé stránky na každou stránku.
    • Všechny obrázky se zobrazují a mají vyplněný alt.
    • Zmenši okno na šířku mobilu – všechno se vejde, nic nepřetéká do stran.
    • V patičce není tvoje adresa, telefon ani škola s třídou (bezpečnost!).
    • Titulky <title> dávají smysl na každé stránce.
Hotové řešení patičky (uprav si barvy)

HTML (na všech stránkách stejné):

<footer>
  <p>Vyrobil Kuba v roce 2026 · postaveno vlastníma rukama a HTML</p>
  <p><a href="index.html">Domů</a></p>
</footer>

CSS:

footer {
  background-color: #1f2937;
  color: white;
  text-align: center;
  padding: 24px 16px;
  margin-top: 48px;
}

footer a {
  color: #93c5fd;
}

html {
  scroll-behavior: smooth;
}

img {
  transition: transform 0.2s ease;
}

.karta img:hover,
.galerie img:hover {
  transform: scale(1.03);
}
⚠️

Bezpečnost na prvním místě: v příští lekci půjde tvůj web na opravdový internet, kde ho uvidí kdokoli. Proto na něm nesmí být: přesná adresa bydliště, telefon, e-mail, jméno školy s třídou ani fotky, u kterých by to vadilo tobě nebo lidem na nich. Projdi web s rodičem a zkontrolujte to spolu.

✅

Kontrola: Web má hlavičku s menu, obsah v pěkném sloupci, karty, fotky, patičku – a při najetí myší se věci jemně hýbou. Vypadá jako opravdový web. Protože to opravdový web je! Zbývá poslední krok: ukázat ho světu.

Co si z téhle lekce odnést

© 2026 Ing. Martin Polak / AlgoRhino · Podmínky užití obsahu