Ako najjednoduchšie pridať textový obsah

V tomto článku si ukážeme ako najjednoduchšie pridať textový obsah na stránku, či už to je blog, podstránka alebo popis produktu. Ukážeme si ako vytvoriť odstavec, ako zvýrazniť písmo či pridať nadpis, zoznamy a obrázky. Urobíme si ukážku na blogu.

Nadpis

Nadpisy sa označujú značkou h, za ktorou nasleduje číslo, ktoré určuje level nadpisu – h2, h3, h4,…Nižšie číslo predstavuje vyššiu dôležitosť.
Keď pridávate nadpis do článku musí byť ohraničený <h*>nadpis.

Vo väčšine prípadoch už nebudete používať nadpis h1, pretože ten je generovaný automaticky a na podstránke by mal byť len jeden.

Pri nadpisoch si treba uvedomiť ich hierarchiu. Vždy treba začať najvyššou úrovňou, v našom prípade to už bude h2, keďže h1 je generovaný automaticky. Ak obsahová sekcia spadá pod nadpis h2 a chcete ju ešte viac rozdeliť použite nadpis h3, ak h3 chcete ešte viac rozdeliť tak použite h4 a tak ďalej. Nadpisy by mali ísť vždy logicky v poradí  h1-h2-h2-h3-h4….. a nie h2-h4.

Poznámka: Keď sa to nedodrží, nič v texte sa nepokazí.

<h2>Toto je nadpis level 2</h2>
<h3>Toto je nadpis level 3</h3>
<h4>Toto je nadpis level 4</h4>

Nadpisy vyzerajú nasledovne:

nadpis

Odstavec, zarovnanie a zvýraznenie textu

Ak chcete pridať odstavec s textom riadok sa musí začínať <p> potom nasleduje daný text, ktorý ukončíte </p>.

<p>Toto je odstavec.</p>

Ak chcete zvýrazniť určitú časť textu môžete použiť <strong>tučné</strong>, <em>šikmé</em> či <u>podčiarknuté</u>.

<p>Toto je odstavec a v ňom je <strong>tučné</strong> písmo.</p>
<p>Toto je odstavec a v ňom je <em>šikmé</em> písmo.</p>
<p>Toto je odstavec a v ňom je <u>podčiarknuté</u> písmo.</p>

Text bude vyzerať nasledovne:

odstavec

Zarovnať text môžete jednoducho pomocou použitia class=“…“:

Zarovnanie vľavo
<p class=“text-left“>Text, ktorý chcete zarovnať vľavo.</p>

Zarovnanie na stred
<p class=“text-center“>Text, ktorý chcete zarovnať na stred.</p>

Zarovnanie vpravo
<p class=“text-right“>Text, ktorý chcete zarovnať vpravo.</p>

Zarovnanie podľa okrajov
<p class=“text-justify“ >Zarovnanie Justify slúži na zarovnávanie textu podľa okrajov. Text sa rovnomerne rozdelí tak, aby siahal až po okraje riadku. Na obrázku nižšie môžete vidieť ako vyzerá zarovnanie v článku.</p>

zarovnanie

Do článku je možné vložiť aj citát a to formou <blockquote>Daný citát.</blockquote>.

Citát môže vyzerať takto:

citát

Poznámka: Citát bude mať programátorom vopred zadefinovaný dizajn, ktorý sa odráža od dizajnu stránky. Vopred zadefinovať sa môžu aj nadpisy.

Ak by ste v texte chceli odkázať na iný web použite

<a href=“https://modernewebstranky.sk“ target=“_blank“>www.modernewebstranky.sk</a>

alebo

<a href=“https://modernewebstranky.sk“ target=“_blank“>Viac tu</a>

target=“_blank“ sa používa na to, aby sa daný odkaz otvoril v novom okne prehliadača.
Za ním nasleduje text odkazu. Môže to byť doména, na ktorú odkazujete alebo iný text ako napr. Viac tu, kliknite sem, atď.

Pre vloženie odkazu na mail použite

<a href=“mailto:info@modernewebstranky.sk“>info@modernewebstranky.sk</a>

Zoznamy

V článkoch sa najviac využívajú nečíslované a číslované zoznamy. Ukážeme si aj zoznam v tvare nadpis a popis, ktorý sa však veľmi nepoužíva.

Nečíslovaný zoznam sa začína <ul>, potom nasleduje text zoznamu. Riadok zoznamu má mať formu <li>text</li>. Pre ukončenie zoznamu použite </ul>.

<ul>

<li>nečíslovaný zoznam</li>

<li>nečíslovaný zoznam</li>

<li>nečíslovaný zoznam</li>

<li>nečíslovaný zoznam</li>

<li>nečíslovaný zoznam</li>

</ul>

Zoznam bude vyzerať nasledovne:

nečíslovaný zoznam

Číslovaný zoznam sa začína <ol>. Riadky vyzerajú rovnako ako pri nečíslovanom zozname. Ukončuje sa však </ol>.

<ol>

<li>číslovaný zoznam</li>

<li>číslovaný zoznam</li>

<li>číslovaný zoznam</li>

<li>číslovaný zoznam</li>

<li>číslovaný zoznam</li>

</ol>

Zoznam bude vyzerať nasledovne:

číslovaný zoznam

Zoznam v tvare nadpis a popis sa začína <dl>, nadpis vložíte do <dt>nadpis</dt> a popis do <dd>popis</dd>. Celý zoznam ukončíte </dl>.

<dl>
<dt>Nadpis</dt>
<dd>Tu vložíte text k danému nadpisu.</dd>
</dl>

Zoznam bude vyzerať nasledovne:

nadpis a popis

Poznámka: Pri zozname vždy vkladajte text len do <li></li> alebo <dt></dt><dd></dd> v prípade popisného zoznamu.

Rozdelenie na stĺpce

Každá stránka je rozdelená na 12 častí. Každá časť teda stĺpec má označenie col-md-*.

Ak chcete rozdeliť článok na 12 rovnakých častí použijete:

<div class=“row“>
<div class=“col-md-1″>.col-md-1</div>
<div class=“col-md-1″>.col-md-1</div>
<div class=“col-md-1″>.col-md-1</div>
<div class=“col-md-1″>.col-md-1</div>
<div class=“col-md-1″>.col-md-1</div>
<div class=“col-md-1″>.col-md-1</div>
<div class=“col-md-1″>.col-md-1</div>
<div class=“col-md-1″>.col-md-1</div>
<div class=“col-md-1″>.col-md-1</div>
<div class=“col-md-1″>.col-md-1</div>
<div class=“col-md-1″>.col-md-1</div>
<div class=“col-md-1″>.col-md-1</div>
</div>

Poznámka: Toto rozdelenie sa nezvykne používať.

Ak chcete článok rozdeliť na 2 stĺpce, z ktorých jeden bude dvakrát väčší ako ten druhý môžete použiť:

<div class=“row“>
<div class=“col-md-8″>.col-md-8</div>
<div class=“col-md-4″>.col-md-4</div>
</div>

Ak chcete článok rozdeliť na 3 rovnaké stĺpce použite:

<div class=“row“>
<div class=“col-md-4″>.col-md-4</div>
<div class=“col-md-4″>.col-md-4</div>
<div class=“col-md-4″>.col-md-4</div>
</div>

Ak chcete článok rozdeliť na 2 rovnaké stĺpce použite:

<div class=“row“>
<div class=“col-md-6″>.col-md-6</div>
<div class=“col-md-6″>.col-md-6</div>
</div>

stlpce

Poznámka: Myslite na to, že ak chcete aby odstavce vyplnili celú šírku stránky súčet čisiel v class=“col-md-1″ musí byť 12. Napr. ak chcete 3 stĺpce použijete col-md-4 pretože 3*4=12

Skúsme si teraz do každého stĺpca vložiť text.

<div class=“row“>
<div class=“col-md-1″><p>Toto je stĺpec číslo 1.</p></div>
<div class=“col-md-1″><p>Toto je stĺpec číslo 1.</p></div>
<div class=“col-md-1″><p>Toto je stĺpec číslo 1.</p></div>
<div class=“col-md-1″><p>Toto je stĺpec číslo 1.</p></div>
<div class=“col-md-1″><p>Toto je stĺpec číslo 1.</p></div>
<div class=“col-md-1″><p>Toto je stĺpec číslo 1.</p></div>
<div class=“col-md-1″><p>Toto je stĺpec číslo 1.</p></div>
<div class=“col-md-1″><p>Toto je stĺpec číslo 1.</p></div>
<div class=“col-md-1″><p>Toto je stĺpec číslo 1.</p></div>
<div class=“col-md-1″><p>Toto je stĺpec číslo 1.</p></div>
<div class=“col-md-1″><p>Toto je stĺpec číslo 1.</p></div>
<div class=“col-md-1″><p>Toto je stĺpec číslo 1.</p></div>
</div>

<div class=“row“>
<div class=“col-md-8″><p>Tento stĺpec je dvakrát väčší ako druhý.</p></div>
<div class=“col-md-4″><p>Tento stĺpec je dvakrát menší ako prvý.</p></div>
</div>

<div class=“row“>
<div class=“col-md-4″><p>Tento stĺpec je rovnaký ako druhý a tretí.</p></div>
<div class=“col-md-4″><p>Tento stĺpec je rovnaký ako prvý a tretí.</p></div>
<div class=“col-md-4″><p>Tento stĺpec je rovnaký ako prvý a druhý.</p></div>
</div>

<div class=“row“>
<div class=“col-md-6″><p>Tento stĺpec je rovnaký ako druhý.</p></div>
<div class=“col-md-6″><p>Tento stĺpec je rovnaký ako prvý.</p></div>
</div>

Teraz už viete ako pridávať textový obsah na svoj web. V ďalšom článku si popíšeme ako pridať článok do blogu, ako pridať obrázky a ako vytvoriť novú kategóriu pre blog.

Viac o našich službách sa dozviete tu:

Webové služby
2018-04-11T09:36:32+00:00 Návody, Tvorba eshopu|