Zhrnutie na Základy informatiky, grafiky a podnikania

Základy Informatiky, Grafiky a Podnikania: Kompletný Sprievodca

ZhrnutieTest znalostíKartičkyPodcastMyšlienková mapa

Úvod

Tento materiál pokrýva praktické a študijné informácie o návrhu základného rozloženia stránok (layout) v kontexte prípravy náčrtov a o tvorbe HTML tabuliek. Je určený pre samostatné štúdium (Not attending) a obsahuje definície, príklady a porovnania, ktoré uľahčia zapamätanie.

Definícia: Layout v tomto materiáli sa rozumie ako usporiadanie prvkov na ploche s dôrazom na čitateľnosť, hierarchiu informácií a stabilné rozloženie.

Časť A: Náčrt rozloženia stránky (praktický postup)

1. Základné požiadavky na náčrt

  1. Dve strany vedľa seba – vytvorte dvojsloupový náčrt na formáte (napr. A4 na šírku) s jasným rozdelením na ľavú a pravú stranu.
  2. Veľké okraje – zabezpečte dostatok bieleho priestoru okolo obsahu pre čitateľnosť.
  3. Hlavne text – minimalizujte použitie obrázkov, text je prioritou.
  4. Nadpis kapitoly – každý náčrt musí mať jasne označený nadpis kapitol.

Tip: Pri kresbe používajte jednoduché, čisté čiary a konzistentné písmo pre lepšiu prehľadnosť.

2. Charakteristika rozloženia

  • Jednoduchý a čistý layout – menej prvkov znamená lepšiu zrozumiteľnosť.
  • Dôraz na čitateľnosť – vhodné písmo, veľkosť, medzery.
  • Stabilné rozloženie – symetria alebo jasná mriežka.

3. Povinné prvky, ktoré musíš označiť

Na každom náčrte MUSÍŠ označiť:

  • Nadpis
  • Textový blok (textbox)
  • Obrázkový box

Ideálne označenie: šípkami alebo krátkym popisom pri prvkoch (napr. "Nadpis – H1", "Textový blok – odsek")

Definícia: Textový blok (textbox) je oblasť určená na súvislý text; obrázkový box je miesto vyhradené pre grafiku alebo ilustráciu.

4. Porovnanie layoutov (prehľadná tabuľka)

TypCharakter
Plagátjednoduchý, výrazný
Časopisdynamický, kombinovaný
Knihastabilný, čitateľný
💡 Vedeli ste?Zajímavost: Plagáty často používajú veľké písmo a kontrastné farby, aby upútali pozornosť z veľkej vzdialenosti.

5. Praktický príklad: Krok za krokom

  1. Naformátuj dokument ako dve strany vedľa seba.
  2. Nakresli hranice okrajov (20–25 mm).
  3. Vyhraď priestor pre nadpis (horná časť stránky).
  4. Rozdeľ obsah do textových blokov s rovnakou šírkou stĺpcov.
  5. Vyhraď malé obrázkové boxy – len ak dopĺňajú text.
  6. Označ všetky prvky šípkami a popismi.

Časť B: HTML tabuľky - základné použitie a techniky

Úvod do tabuliek na webe

Tabuľky slúžia na zobrazovanie údajov v riadkoch a stĺpcoch. Používajú sa pre cenníky, rozvrhy, výsledky, porovnania produktov a admin rozhrania.

Definícia: HTML tabuľka je štruktúra definovaná značkami <table>, <tr>, <th> a <td> určená na prezentáciu tabuľkových údajov.

💡 Vedeli ste?Did you know that modernné rozloženie dát na webe často využíva CSS grid alebo flexbox namiesto tabuľiek pre layout, zatiaľ čo tabuľky sú určené predovšetkým pre štruktúrované tabuľkové dáta?

Základné HTML značky a ich význam

  • <table> – obal tabuľky
  • <tr> – riadok tabuľky (table row)
  • <th> – hlavičková bunka (table header)
  • <td> – dátová bunka (table data)

Príklad základnej štruktúry (ilustratívne):

<table>
  <tr>
    <th>Meno</th>
    <th>Vek</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>21</td>
  </tr>
</table>

Základné atribúty a ich moderné náhrady

Tradičné atribúty tabuľky:

  • cellpadding – vnútorné odsadenie bunky (dnes cez CSS: padding)
  • cellspacing – medzera medzi bunkami (dnes cez CSS: border-collapse alebo gap v niektorých prípadoch)
  • width, height – rozmery tabuľky (dnes cez CSS: width, height)
  • align – zarovnanie tabuľky (dnes cez CSS: margin alebo text-align)

Príklad moderného štýlu cez CSS:

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid black;
  padding: 8px;
}
💡 Vedeli ste?Fun fact: Pre prístupnosť je vhodné používať element <caption> pre názov tabuľky a atributy scope v <th> na lepšie čítanie pomocou čítačiek obrazovky.

Zlúčenie buniek: colspan a rowspan

Na zlučovanie buniek slúžia atribúty:

  • colspan – zlučuje bunky vodorovne (v rámci riadku)
  • rowspan – zlučuje bunky zvisle (v rámci stĺpca)

Prakti

Zaregistruj sa pre celé zhrnutie
KartičkyTest znalostíZhrnutiePodcastMyšlienková mapa
Začni zadarmo

Už máš účet? Prihlásiť sa

Layout a HTML tabuľky

Klíčová slova: Layout (grafický dizajn), Layout a HTML tabuľky, Základy podnikania

Klíčové pojmy: Náčrt musí mať dve strany vedľa seba a veľké okraje, Na náčrte označ nadpis, textový blok a obrázkový box šípkami alebo popisom, Používaj jednoduchý, čistý layout s dôrazom na čitateľnosť, HTML tabuľka používa <table>, <tr>, <th>, <td>, V modernom HTML používaj CSS namiesto cellpadding alebo cellspacing, Zlúčenie buniek: colspan zlučuje vodorovne, rowspan zlučuje zvisle, Pridaj <caption> a scope v <th> pre prístupnosť, Nepoužívaj tabuľky na layout stránky, použij CSS grid alebo flexbox, Pri rowspan dbaj na súlad počtu <td> v riadkoch, Používaj border-collapse a padding cez CSS pre čitateľnú tabuľku

## Úvod Tento materiál pokrýva praktické a študijné informácie o návrhu základného rozloženia stránok (layout) v kontexte prípravy náčrtov a o tvorbe HTML tabuliek. Je určený pre samostatné štúdium (Not attending) a obsahuje definície, príklady a porovnania, ktoré uľahčia zapamätanie. > Definícia: Layout v tomto materiáli sa rozumie ako usporiadanie prvkov na ploche s dôrazom na čitateľnosť, hierarchiu informácií a stabilné rozloženie. ## Časť A: Náčrt rozloženia stránky (praktický postup) ### 1. Základné požiadavky na náčrt 1. Dve strany vedľa seba – vytvorte dvojsloupový náčrt na formáte (napr. A4 na šírku) s jasným rozdelením na ľavú a pravú stranu. 2. Veľké okraje – zabezpečte dostatok bieleho priestoru okolo obsahu pre čitateľnosť. 3. Hlavne text – minimalizujte použitie obrázkov, text je prioritou. 4. Nadpis kapitoly – každý náčrt musí mať jasne označený nadpis kapitol. > Tip: Pri kresbe používajte jednoduché, čisté čiary a konzistentné písmo pre lepšiu prehľadnosť. ### 2. Charakteristika rozloženia - **Jednoduchý a čistý layout** – menej prvkov znamená lepšiu zrozumiteľnosť. - **Dôraz na čitateľnosť** – vhodné písmo, veľkosť, medzery. - **Stabilné rozloženie** – symetria alebo jasná mriežka. ### 3. Povinné prvky, ktoré musíš označiť Na každom náčrte MUSÍŠ označiť: - Nadpis - Textový blok (textbox) - Obrázkový box Ideálne označenie: šípkami alebo krátkym popisom pri prvkoch (napr. "Nadpis – H1", "Textový blok – odsek") > Definícia: Textový blok (textbox) je oblasť určená na súvislý text; obrázkový box je miesto vyhradené pre grafiku alebo ilustráciu. ### 4. Porovnanie layoutov (prehľadná tabuľka) | Typ | Charakter | | --- | --- | | Plagát | jednoduchý, výrazný | | Časopis | dynamický, kombinovaný | | Kniha | stabilný, čitateľný | Zajímavost: Plagáty často používajú veľké písmo a kontrastné farby, aby upútali pozornosť z veľkej vzdialenosti. ### 5. Praktický príklad: Krok za krokom 1. Naformátuj dokument ako dve strany vedľa seba. 2. Nakresli hranice okrajov (20–25 mm). 3. Vyhraď priestor pre nadpis (horná časť stránky). 4. Rozdeľ obsah do textových blokov s rovnakou šírkou stĺpcov. 5. Vyhraď malé obrázkové boxy – len ak dopĺňajú text. 6. Označ všetky prvky šípkami a popismi. ## Časť B: HTML tabuľky - základné použitie a techniky ### Úvod do tabuliek na webe Tabuľky slúžia na zobrazovanie údajov v riadkoch a stĺpcoch. Používajú sa pre cenníky, rozvrhy, výsledky, porovnania produktov a admin rozhrania. > Definícia: HTML tabuľka je štruktúra definovaná značkami <table>, <tr>, <th> a <td> určená na prezentáciu tabuľkových údajov. Did you know that modernné rozloženie dát na webe často využíva CSS grid alebo flexbox namiesto tabuľiek pre layout, zatiaľ čo tabuľky sú určené predovšetkým pre štruktúrované tabuľkové dáta? ### Základné HTML značky a ich význam - <table> – obal tabuľky - <tr> – riadok tabuľky (table row) - <th> – hlavičková bunka (table header) - <td> – dátová bunka (table data) Príklad základnej štruktúry (ilustratívne): ```html <table> <tr> <th>Meno</th> <th>Vek</th> </tr> <tr> <td>Anna</td> <td>21</td> </tr> </table> ``` ### Základné atribúty a ich moderné náhrady Tradičné atribúty tabuľky: - cellpadding – vnútorné odsadenie bunky (dnes cez CSS: padding) - cellspacing – medzera medzi bunkami (dnes cez CSS: border-collapse alebo gap v niektorých prípadoch) - width, height – rozmery tabuľky (dnes cez CSS: width, height) - align – zarovnanie tabuľky (dnes cez CSS: margin alebo text-align) Príklad moderného štýlu cez CSS: ```css table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; } ``` Fun fact: Pre prístupnosť je vhodné používať element <caption> pre názov tabuľky a atributy scope v <th> na lepšie čítanie pomocou čítačiek obrazovky. ### Zlúčenie buniek: colspan a rowspan Na zlučovanie buniek slúžia atribúty: - colspan – zlučuje bunky vodorovne (v rámci riadku) - rowspan – zlučuje bunky zvisle (v rámci stĺpca) Prakti