Úloha 3 – Práce s HTML atributy

Úvod k úloze

Jakmile máte v HTML dokumentu kostru a umíte správně volit sémantické elementy, dalším krokem je práce s atributy. Atributy přidávají k elementům doplňující informace – pomáhají je identifikovat, propojit s CSS styly či JavaScriptem, nebo určují, jak se má daný prvek chovat. Správné používání atributů je naprosto zásadní pro funkčnost i vzhled stránky. Pokud je napíšeme chybně, stránka nemusí fungovat podle očekávání.

Teorie a principy

Co je atribut
- Atribut je vlastnost HTML elementu, která upřesňuje jeho význam nebo chování.
- Vždy se píše uvnitř otevíracího tagu.
- Má tvar název="hodnota".
Základní atributy
- id – jednoznačný identifikátor prvku (na stránce by se měl vyskytovat jen jednou).
- class – třída, umožňuje seskupovat prvky pro stylování nebo skriptování.
- src – cesta ke zdroji, nejčastěji u obrázků (<img>) nebo skriptů (<script>).
- alt – alternativní text u obrázků, důležitý pro přístupnost a SEO.
Syntaktická pravidla
- Hodnoty atributů se vždy píší do uvozovek (" ").
- Mezi atributy musí být mezera.
- Jeden tag může mít více atributů, ale každý musí být jasně oddělený.

Praktické příklady kódu

Použití `id` a `class`

Pomocí id="uvod" na něj můžeme odkazovat v CSS nebo JavaScriptu.
class="zvyrazneny" umožňuje použít stejný styl i u více prvků.

Obrázek se zdrojem a alternativním textem

src určuje cestu k souboru obrázku.
alt popisuje obsah obrázku pro uživatele, kteří jej nemohou vidět.

Využití více atributů v jednom tagu

href definuje odkaz.
target="_blank" otevírá odkaz v nové záložce.
class="tlacitko" umožňuje odkaz graficky upravit.

Typické chyby / záludnosti

Chybějící uvozovky:

Některé prohlížeče si poradí, ale je to nevalidní HTML. Správně:

Záměna id a class – ID má být jedinečné, zatímco class můžete použít opakovaně.
Prázdný atribut alt u dekorativních obrázků je v pořádku:
- Ale nikdy ho nevynechávejte úplně.
Zapomenuté mezery mezi atributy:
- zde chybí mezera před alt.

Shrnutí

Atributy rozšiřují elementy o dodatečné informace a chování.
Syntaxe je vždy název="hodnota".
Důležité atributy:
- id (jedinečný identifikátor),
- class (pro skupiny prvků),
- src (cesta ke zdroji),
- alt (alternativní text obrázku).
Dodržujte uvozovky a mezery mezi atributy.
Správné atributy jsou klíčové pro stylování (CSS) i interaktivitu (JavaScript).

Úloha

Zadání (kontext úlohy)

Na webové stránce zobraz krátký úvodní text, obrázek a odkaz. Každý prvek bude mít atributy, které určují jeho chování a umožní jejich pozdější stylování nebo propojení se skripty.

Cíl úlohy

Procvičíš si práci s více atributy najednou: id, class, src, alt, href, target. Naučíš se také rozlišovat, kdy použít id a kdy class.

Vstupní podmínky

Budeš pracovat pouze s nově vytvořeným souborem index.html.

Požadovaný výstup

V dokumentu vytvoříš:
- odstavec <p> s jedinečným id a zároveň s nějakou třídou (class),
- obrázek s atributy src, alt a class,
- odkaz <a> pod obrázkem s atributem href vedoucím na libovolnou stránku, s atributem target="_blank" a třídou (class).
Každý prvek bude mít alespoň jeden atribut navíc (např. title, lang apod.), aby sis procvičil více možností.

Doplňující pokyny

Hodnoty atributů piš vždy do uvozovek.
Pamatuj, že id musí být na stránce jedinečné.
Zkontroluj mezery mezi jednotlivými atributy.
Pokud nemáš k dispozici skutečný obrázek, použij fiktivní cestu (např. obrazek.jpg).

Řešení úlohy

Co je zde splněno:

Odstavec <p> obsahuje jedinečné id="uvodni-text" a třídu class="highlight", plus atribut title.
Obrázek <img> má povinné atributy src, alt, class a navíc title a width.
Odkaz <a> má href, target="_blank", class a doplňující title.
Každý prvek má více atributů, jak vyžadovalo zadání.
Všechny atributy jsou v uvozovkách, kód je validní a přehledný.

Sitio:	Moodle ZČU
Curso:	Sada úloh pro procvičení v předmětu KVD/PGM1P (BP Vítek Dolný)
Libro:	Úloha 3 – Práce s HTML atributy

Imprimido por:	Nepřihlášený host
Día:	domingo, 18 de octubre de 2026, 06:48