Návod pre UNIsite a UNIobchod systém

Vyskúšajte eshop

Zdrojový kód (HTML)

Modul zdrojový kód je určený pre plnenie obsahu štruktúrovaným HTML kódom. Spôsob zápisu kódu môžete využiť aj pri administrácii iných modulov na webe, napríklad textový editor, články, krátky a dlhý popis produktov a mnoho ďalších. Pri textovom module a článkoch je potrebné mať modul prepnutý do režimu “Zdroj“. Na formátovanie textu sa používajú tagy, ktoré môžu mať rôzné atribúty, ktoré určujú vzhľad a správanie daného elementu-tagu na webe. Nižšie vám vysvetlíme najpoužívanejšie tagy, ktoré budete najviac používať, ale okrem spomenutých tagov, je možné používať aj všetky ostatné, ktoré sme neuviedli v tomto zozname.

Postup nastavenia

Tagy (html elementy) sú značky, ktoré zapisujeme v špicatých zátvorkách, ktorými sa zaznačuje obsah v kóde. Tagy rozdeľujeme na nepárové a párové tagy. Nepárové tagy sa skladajú iba z jednej značky, ktorá sa umiestni v kóde na miesto, kde ju chceme mať na webe v texte. Nemajú ukončovaciu značku, ukončená je samotná počiatočná značka. Párové tagy sa skladajú z dvoch značiek. Prvá značka sa nachádza pred vkladaným/zvýrazňovaným obsahom a druhá značka sa nachádza za zvýrazňovaným obsahom/textom.

Párové tagy

Tučné písmo: <strong> ... </strong>

príklad zápisu v kóde:

Nulla lacus enim, <strong>imperdiet sit amet</strong> bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

príklad zobrazenia výstupu na webe:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Kurzíva: <em> ... </em>

príklad zápisu v kóde:

Nulla lacus enim, <em>imperdiet sit amet bibendum quis</em>, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, vehicula sit amet sem imperdiet sit amet bibendum quis, vehicula sit amet sem.

príklad zobrazenia výstupu na webe:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, vehicula sit amet sem imperdiet sit amet bibendum quis, vehicula sit amet sem.

Veľkosť písma: <span style="font-size:14px;"> ... </span>

príklad zápisu v kóde:

<span style="font-size:18px;">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</span>

príklad zobrazenia výstupu na webe:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Podčiarknuté písmo: <u> ... </u>

príklad zápisu v kóde:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis.<u>Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</u> Vehicula sit amet sem.

príklad zobrazenia výstupu na webe:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Vehicula sit amet sem.

Hypertextový odkaz na stránku súbor alebo obrázok: <a href="..."> ... </a>

Do atribútu href vložíte adresu webovej stránky, kde bude návštevník presmerovaný.

Postup pre zistenie adresy obrázka:

krok 1. Kliknite na "Vybrať obrázok alebo súbor"
krok 2. Vyberte požadovaný obrázok.
krok 3. Kliknite na "Skopírovať". Následne danú adresu skopírujte na vyznačené miesto medzi úvodzovkami.

príklad zápisu v kóde:

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml">Nulla lacus enim</a>

príklad zobrazenia výstupu na webe:

Nadpis: <h1> ... </h1>

príklad zápisu v kóde:

<h1>Nadpis prvej úrovne</h1>
<h2>Nadpis druhej úrovne</h2>
<h3>Nadpis tretej úrovne</h3>
<h4>Nadpis štvrtej úrovne</h4>
<h5>Nadpis piatej úrovne</h5>
<h6>Nadpis šiestej úrovne</h6>

príklad zobrazenia výstupu na webe:

Nadpis prvej úrovne

Nadpis druhej úrovne

Nadpis tretej úrovne

Nadpis štvrtej úrovne

Nadpis piatej úrovne
Nadpis šiestej úrovne

Textový blok: <p> ... </p>

príklad zápisu v kóde:

<p>Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</p><p>Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</p>

príklad zobrazenia výstupu na webe:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Zoznam cez odrážky: <ul> ... </ul>

príklad zápisu v kóde:

<ul>
     <li>
consectetur</li>
     <li>adipiscing</li>
     <li>vulputate</li>
     <li>bibendum</li>
</ul>

príklad zobrazenia výstupu na webe:

  • consectetur
  • adipiscing
  • vulputate
  • bibendum

príklad zápisu vnoreného zoznamu v kóde:

<ul>
    <li>
consectetur
        <ul>
             <li>
adipiscing</li>
             <li>vulputate</li>
        </ul>
    </li>
    <li>bibendum</li>
</ul>

príklad zobrazenia výstupu na webe:

  • consectetur
    • adipiscing
    • vulputate
  • bibendum

Zoznam číslovaný: <ol> ... </ol>

príklad zápisu v kóde:

<ol>
     <li>
consectetur</li>
     <li>adipiscing</li>
     <li>vulputate</li>
     <li>bibendum</li>
</ol>

príklad zobrazenia výstupu na webe:

  1. consectetur
  2. adipiscing
  3. vulputate
  4. bibendum

príklad zápisu vnoreného zoznamu v kóde:

<ol>
     <li>
consectetur
        <ol>
             <li>
adipiscing</li>
             <li>vulputate</li>
        </ol>
    </li>
    <li>bibendum</li>
</ol>

príklad zobrazenia výstupu na webe:

  1. consectetur
    1. adipiscing
    2. vulputate
  2. bibendum

Youtube video

Kód na získanie videa nájdete na webovej stránke www.youtube.sk. Jedonoducho ho skopírujete a vložíte do editora.

príklad zápisu v kóde:

<iframe width="560" height="315" src="https://www.youtube.com/embed/DwSe1hCYLRg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

príklad zápisu v kóde s responzivitou:

<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/DwSe1hCYLRg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

príklad zobrazenia výstupu na webe:

Zvýraznenie textu podfarbeným blokom

Funguje iba v našom redakčnom systéme. Tieto zápisy sú preddefinované a je možnosť si vybrať zo 6 pastelových farieb red (červená), green (zelená), blue (modrá), yellow (žltá), pink (ružová) a grey (sivá).

príklad zápisu v kóde:

<div class="special-container-red">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</div>

<div class="special-container-green">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</div>

<div class="special-container-blue">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</div>

<div class="special-container-yellow">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</div>

<div class="special-container-pink">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</div>

<div class="special-container-grey">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</div>

príklad zobrazenia výstupu na webe:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Farebné tlačítka <a href="..." class="..."> ... </a>

Pre Uniobchod a Unisite od verzie 6.12.0 pridávame farebné tlačítka rôznych farebných variacií, veľkostí a štýlov.
Do atribútu class vložte vhodné triedy definujúce farbu veľkosť alebo štýl ktoré možu byť aj kombinované.

zoznam tried:
uni-btn: Definuje predštylované tlačítko (túto triedu musia obsahovať všetky tlačítka)
uni-medium: Tlačítko strednej veľkosti
uni-big: Najväčšie tlačítko
uni-rounded: Zaoblené tlačítko
uni-bordered: Priehľadné tlčítko s rámikom
uni-orange: Tlačítko oranžovej farby
uni-green: Tlačítko zelenej farby
uni-red: Tlačítko červenej farby
uni-yellow: Tlačítko žltej farby
uni-black: Tlačítko čiernej farby
uni-brown: Tlačítko hnedej farby

príklad zápisu v kóde:

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml" class="uni-btn">Tlačítko1</a>

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml" class="uni-btn uni-orange">Tlačítko2</a>

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml" class="uni-btn uni-green uni-medium">Tlačítko3</a>

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml" class="uni-btn uni-red uni-medium uni-rounded">Tlačítko4</a>

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml" class="uni-btn uni-red uni-medium uni-bordered">Tlačítko5</a>

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml" class="uni-btn uni-yellow uni-big uni-bordered uni-rounded">Tlačítko6</a>

príklad zobrazenia výstupu na webe:

Všetky možné varianty tlačítiek:

Pre uľahčenie môžte kliknúť na tlačítko ktoré vám skopíruje jeho stávajúce triedy a následne ich ľahko vložiť (ctrl + v) do atribútu class.

Obsah v stĺpcoch: <div class="uni-columns"> ... </div>

Pre vytvorenie stĺpcov vytvorte kontajner s triedou "uni-columns-container" a následne doň vlozíte počet kontajnerov s triedou "uni-columns" ktoré sa budú zobrazovať vo forme stĺpcov. Počet kontajnerou s triedou "uni-columns-container" zodpovedá počtu stĺpcov do ktorých následne môžete vkladať obsah.

príklad zápisu v kóde:

<div class="uni-columns-container">
    <div class="uni-columns">Obsah rozdelený do stĺpcov</div>
    <div class="uni-columns">Obsah rozdelený do stĺpcov</div>
</div>

príklad zobrazenia výstupu na webe:

Obsah rozdelený do stĺpcov
Obsah rozdelený do stĺpcov
Nepárové tagy

Vloženie obrázka: <img src=" ... " />

Do atribútu src vložte adresu požadovaného obrázka a za " alt=“ napíšte text pre obrázok.
Postup pre zistenie adresy obrázka:

krok 1. Kliknite na "Vybrať obrázok alebo súbor"
krok 2. Vyberte požadovaný obrázok.
krok 3. Kliknite na "Skopírovať". Následne danú adresu skopírujte na vyznačené miesto medzi úvodzovkami.

príklad zápisu v kóde:

<img src="images/uniobchod-system.png" alt=“sem vpíšete zástupný text obrázka“/>

príklad zobrazenia výstupu na webe:

sem vpíšete zástupný text obrázka

Prechod textu na nový riadok: <br />

príklad zápisu v kóde:

Nullalacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. <br/>Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. <br/><br/>Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem

príklad zobrazenia výstupu na webe:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis.
Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Horizontálna čiara: <hr />

príklad zápisu v kóde:

<hr />

príklad zobrazenia výstupu na webe:


Máte otázky, na ktoré ste nenašli odpoveď a riešenie v návode?

Všetkým naším klientom Uniobchod systému sme k dispozícii na zákazníckej podpore, kde ochotne odpovieme na vaše otázky tíkajúce sa nastavenia webovej stránky alebo eshopu.

Prosíme o pozorné vyplnenie údajov v dotazníku, aby sme vás mohli kontaktovať alebo využite našu emailovú alebo telefonickú podporu:

Volajte v pracovných dňoch (Po-Pia) na:
045/5400 200 (od 8:00 do 16:00)

alebo píšte na: info@webygroup.sk
www.webygroup.sk, www.uniobchod.sk

verify

* Tento údaj je povinný