Opakovanie HTML a tvoja vlastná stránka

Zistiť, na čom staviame, pomenovať základné značky HTML a založiť si stránku, ktorú budeš vylepšovať celý rok.

11. 9. 2026

Hotová stránka a päť úprav

Dole je hotová stránka. Nie je tvoja, nie je pekná a nie je na známku. Potrebujem vedieť, kde začať, aby som neučil príliš pomaly ani príliš rýchlo. Keby to bolo na známku, opisoval by si od suseda a ja by som sa nič nedozvedel.

Sprav na nej týchto päť vecí, v akomkoľvek poradí. Pod editorom sa ti píše, čo ešte chýba — nič viac.

1. Zmeň farbu nadpisu.
2. Pridaj odkaz na hocijakú stránku.
3. Pridaj obrázok.
4. Sprav zoznam aspoň dvoch vecí.
5. Daj rámček s kontaktom do stredu stránky.

Ak nemáš adresu obrázka

Obrázok potrebuje adresu v src. Ak žiadnu nemáš, použi túto — funguje aj bez internetu, lebo obrázok je zapísaný priamo v adrese.

data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80'><rect width='120' height='80' fill='%23ff6f1e'/><circle cx='60' cy='40' r='24' fill='%23171717'/></svg>

Skopíruj ju celú, aj s tým data: na začiatku. Vyzerá divne, ale pre prehliadač je to adresa ako každá iná.

Odkiaľ sa HTML vzalo

HTML je skratka z HyperText Markup Language. Po slovensky: jazyk na značkovanie hypertextu. Obe polovice niečo znamenajú.

Hypertext je text, v ktorom sú odkazy — klikneš a si inde. Dnes ti to príde samozrejmé. V osemdesiatych rokoch to samozrejmé nebolo.

Značkovanie (markup) znamená, že do obyčajného textu dopisuješ značky, ktoré hovoria, čo ktorá časť je: toto je nadpis, toto odsek, toto odkaz. Text ostáva textom, značky sú navyše.

Z toho vyplýva jedna vec, ktorú si treba zapamätať: HTML nie je programovací jazyk. Nič sa v ňom nepočíta a nič sa nerozhoduje. Iba popisuje, čo na stránke je.

Kedy to vzniklo

• Marec 1989 — Tim Berners-Lee, fyzik v CERNe, napíše návrh Information Management: A Proposal. Riešil úplne obyčajný problém: vo veľkom výskumnom ústave sa nedalo vyznať v dokumentoch a v tom, kto čo kde má.
• Vianoce 1990 — má hotové HTML, HTTP aj adresy URL, k tomu prvý server a prvý prehliadač na svete.
• August 1991 — oznámi to verejne v internetových diskusiách a projekt sa začne šíriť.
• 30. apríl 1993 — CERN uvoľní web do public domain: zadarmo, pre kohokoľvek, bez podmienok. Toto je dôvod, prečo web dnes vyzerá tak, ako vyzerá, a nie je vo vlastníctve jednej firmy.

Web teda nevznikol v softvérovej firme. Vznikol ako vedľajší produkt fyzikov, ktorí si potrebovali podávať dokumenty.

Ako vyzerali prvé stránky

Prvá stránka na svete popisovala sám projekt World Wide Web. Stále beží a vieš si ju otvoriť: info.cern.ch/hypertext/WWW/TheProject.html. Otvor si ju doma — je to to isté HTML, aké píšeš ty, len o tridsaťpäť rokov staršie.

Nie je na nej ani jeden obrázok. A nie preto, že by sa autorovi nechcelo: v prvom zozname HTML značiek značka pre obrázok jednoducho nebola. Boli tam TITLE, A, P, H1 až H6, UL a LI — teda skoro presne tie, ktoré sa učíš o kúsok nižšie. Obrázky, farby a rozloženie prišli až neskôr.

Z čoho je stránka poskladaná

Všetko, čo si pred chvíľou prepisoval, má svoje meno. Bez tých mien sa o stránke nedá rozprávať — a rozprávať sa o nej budeme celý rok.

Značka je to v špicatých zátvorkách. Skoro vždy chodí v páre: otváracia <p> a zatváracia </p>. Čo je medzi nimi, to značka ovplyvňuje.

Atribút je doplnok napísaný do otváracej značky. Hovorí značke niečo, čo sa z nej samej nedá zistiť — href hovorí odkazu, kam vedie, src hovorí obrázku, kde ho hľadať.

Značka aj s tým, čo obaľuje, je jeden element.

Kostra, ktorú má každá stránka

Toto je rám. Mení sa až to, čo je v <body>.

<!DOCTYPE html>
<html lang="sk">
<head>
  <meta charset="utf-8">
  <title>Názov v karte prehliadača</title>
</head>
<body>

  <!-- sem ide všetko, čo je na stránke vidieť -->

</body>
</html>

Riadok po riadku, lebo každý z nich niečo robí:

<!DOCTYPE html> musí byť úplne prvý riadok. Hovorí prehliadaču „toto je dnešné HTML”. Keď chýba, prehliadač sa prepne do režimu zlučiteľnosti so stránkami spred dvadsiatich rokov a nakreslí ti stránku inak, než čakáš. Nemá zatváraciu značku a nič neobaľuje — je to pokyn, nie značka.

<html lang="sk"> obaľuje celú stránku. Atribút lang="sk" hovorí, že je po slovensky. Podľa neho čítačka obrazovky vyslovuje slová správne, prehliadač vie ponúknuť preklad a kontrola pravopisu vie, ktorý slovník použiť. Napíš tam en a to isté sa začne čítať s anglickým prízvukom.

<head> je pre prehliadač, <body> je pre človeka. Toto je celý rozdiel. Nič, čo je v <head>, nie je na stránke vidieť — sú to informácie o stránke. Všetko, čo má návštevník vidieť, musí byť v <body>.

V <head> sú dnes pre teba dve veci:

• <meta charset="utf-8"> je dôvod, prečo ti fungujú mäkčene a dĺžne. Bez neho sa z „ď” a „ô” stanú otázniky alebo zlepence znakov. Toto je najčastejšia príčina rozsypanej diakritiky na stránke.
• <title> je názov stránky. Ukáže sa v karte prehliadača, uloží sa do záložiek a je to riadok, ktorý ukáže Google vo výsledkoch vyhľadávania. Nie je to nadpis na stránke — ten je <h1> a je v <body>.

Riadok <!-- takto --> je poznámka. Prehliadač ju preskočí, na stránke ju nevidno. Slúži tebe.

Šesť značiek, ktoré dnes potrebuješ

alt pri obrázku nie je nepovinná ozdoba: číta ho čítačka obrazovky pre nevidiacich a ukáže sa aj vtedy, keď sa obrázok nenačíta.

A čo <div>?

V cvičení na začiatku hodiny si ho videl — rámček s kontaktom bol <div class="ramcek">. Patrí sem, tak nech má meno.

<div> je obal. Nič nehovorí o tom, čo je vnútri, a sám o sebe na stránke nespraví nič viditeľné — je to len zátvorka okolo niekoľkých vecí, ktoré k sebe patria. Skús si ho dať do svojej stránky a nič sa nezmení. To je správne.

Zmysel dostane až vtedy, keď mu vieš niečo nastaviť: daj tomuto rámčeku okraj, tomuto šírku, tento posuň do stredu. A to je CSS, čiže nabudúce. Preto ho dnes nepotrebuješ mať na svojej stránke — príde do nej v ďalšej úlohe.

Rozdiel, ktorý si zapamätaj: <h1>, <p> alebo <ul> hovoria čo to je. <div> nehovorí nič — len drží veci pokope.

Úloha: založ si vlastnú stránku

Toto je prvá úloha, ktorú odovzdávaš. Stránku, ktorú si dnes založíš, budeš vylepšovať celý rok — vždy, keď preberieme niečo nové, pridáš to do nej. Nezakladaj si preto zakaždým novú, vracaj sa k tejto.

Všetko ide cez web GitHubu. Nič sa neinštaluje, nepotrebuješ na to školský počítač ani admin práva — dá sa to doklikať aj na mobile.

1. Vyber si tému

Celý rok budeš písať o tom istom, tak si vyber niečo, čo ťa baví. Napríklad:

• hra, ktorú hráš
• kapela alebo interpret
• šport alebo klub, ktorému fandíš
• auto alebo motorka
• zviera
• film alebo seriál
• mesto alebo miesto, kde si bol
• jedlo a ako sa robí
• koníček — bicykel, kreslenie, hudba
• niečo z odboru, ktorý študuješ

Nemusíš si vybrať z tohto zoznamu. Musíš si ale vybrať.

2. Založ repozitár

1. Prihlás sa na github.com — účet máš z minulého roka.
2. Vpravo hore + → New repository.
3. Repository name: tiu-stranka
4. Nechaj ho Public.
5. Zaškrtni Add a README file.
6. Create repository.

3. Pridaj súbor index.html

1. V repozitári Add file → Create new file.
2. Do políčka s názvom napíš index.html. Presne takto, malými písmenami.
3. Skopíruj si kostru nižšie a prepíš ju na svoju tému.
4. Úplne dole zelené Commit changes.

<!DOCTYPE html>
<html lang="sk">
<head>
  <meta charset="utf-8">
  <title>Sem názov tvojej stránky</title>
</head>
<body>

  <h1>Sem hlavný nadpis</h1>

  <p>Prvý odsek. Napíš, o čom stránka je.</p>

  <p>Druhý odsek. Napíš, prečo si si vybral práve túto tému.</p>

  <h2>Sem menší nadpis</h2>

  <ul>
    <li>Prvá vec</li>
    <li>Druhá vec</li>
    <li>Tretia vec</li>
  </ul>

  <p>Viac je na <a href="https://sk.wikipedia.org">Wikipédii</a>.</p>

  <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80'><rect width='120' height='80' fill='%23ff6f1e'/><circle cx='60' cy='40' r='24' fill='%23171717'/></svg>" alt="Sem napíš, čo je na obrázku">

</body>
</html>

Adresu obrázka si pokojne nechaj túto — funguje aj bez internetu. Ak máš vlastnú, použi ju.

4. Zapíš sa do tabuľky

Aby som vedel, kde tvoju stránku hľadať, zapíš do tabuľky svoje meno a odkaz na repozitár:

→ Otvoriť tabuľku a zapísať sa

Odkaz na repozitár je adresa z riadka prehliadača, keď ho máš otvorený — vyzerá ako github.com/tvojemeno/tiu-stranka.

Čo na stránke musí byť

Toto je celé zadanie. Nič viac sa dnes nechce.

• hlavný nadpis <h1>
• aspoň dva odseky <p>
• jeden menší nadpis <h2>
• jeden odkaz <a>
• jeden obrázok <img> aj s alt
• zoznam aspoň troch vecí <ul>
• všetko o téme, ktorú si si vybral

Nabudúce

Tvoja stránka zatiaľ vyzerá tak, ako ju prehliadač nakreslí sám — čierny text na bielom. Nabudúce jej povieme, ako má vyzerať: CSS pravidlo, farba, veľkosť písma a vycentrovanie. Vtedy aj <div> konečne dostane zmysel.

Prvé, čo spravíš, bude vyfarbenie tej stránky, ktorú si dnes založil.