+421 258 101 062
  • Blog
  • Tvorba webu
  • Základné HTML príkazy, tagy a značky, ktoré by ste mali poznať (zoznam)

nextio

Publikované 17. júna 2022

Základné HTML príkazy, tagy a značky, ktoré by ste mali poznať (zoznam)

Tvorba webu

7 min

nextio

Publikované 17. júna 2022

Príklad jazyka HTML

Prevzaté z webu WY.sk

Ak ste sa rozhodli programovať či už na osobné, alebo pracovné účely, je dôležité, aby ste sa naučili aj základy HTML a tiež poznali základné príkazy a tagy využívané v tomto jazyku. 

V našom článku nájdete prehľadný zoznam tých najpoužívanejších kódov, ich funkcie a tiež príklady, ako tieto príkazy používať.

Príkazy na označenie štruktúry HTML dokumentu

!doctype – ide o nepárový tag, ktorý musí byť na začiatku dokumentu. Spolu s ním sa udáva aj verzia html jazyka – napíšete ho ako

Deklarácia kódovania sa v HTML dokumente píše v rámci príkazu . Toto kódovanie povoľuje používať diakritické znamienka, ktoré sú súčasťou slovenského jazyka.

párový tag, ktorý označuje začiatok html dokumentu a celý jeho obsah musí byť medzi týmito tagmi. V html dokumente ich napíšete:

V tejto časti bude celý obsah vášho webu

Párový tag označuje hlavičku stránky, ktorá sa na stránke nezobrazuje, je teda mimo tela dokumentu.

Tento tag sa zapisuje v nasledovnom v tvare:

Hlavička vášho webu

V rámci tagu sa využívaj aj tag </strong>, ktorý sa zobrazuje vo webových prehliadačoch ako názov karty alebo vo výsledkoch vyhľadávania. </p> <p><img decoding="async" class="alignnone size-full" src="https://sk.wy.pt/wp-content/uploads/2024/06/1440-image-40-tinyMCE-large-960x0-1-1.png" alt="" width="956" height="591" /><em>HTML tag title v Google SERP</p> <p><img loading="lazy" decoding="async" src="/upload/1439-image-41.png" alt="" width="840" height="76"><br /></em></p> <p><em>HTML tag title v lište prehliadača</em></p> <p><strong></strong> je párový tag na označenie tela dokumentu. V rámci neho sa zapisuje celý obsah html dokumentu resp. stránky. V jeho vnútri viete použiť aj ďalšie tagy, ktoré formátujú vzhľad dokumentu, napr.: značky na vytvorenie tabuľky, úpravy veľkosti či farby textu, atď. </p> <p>Zapisuje sa v tvare:</p> <p><strong></strong></p> <p>Obsah vašej stránky</p> <p><strong></strong></p> <p></p> <p><strong></strong> tag na označenie poznámky. Môžete, ale nemusíte ho používať. Pokiaľ chcete mať v html súbore poriadok, viete ho šikovne použiť na oddelenie jednotlivých sekcií. Napr.: <strong></strong></p> <h2><strong>Zhrnutie štruktúry html dokumentu</strong></h2> </p> </p> <p><title></p> <p>Hlavička vášho webu</p> <p>

Obsah vašej stránky

 

Obsah vašej stránky

HTML príkazy pre nadpisy a odseky

V HTML dokumente poznáme a vieme využívať až 6 typov nadpisov. Líšia sa od seba veľkosťou písma a ide vždy o párové tagy.

Váš nadpis

 – Nadpis 1

Váš nadpis

 – Nadpis 2

Váš nadpis

 – Nadpis 3

…

Váš nadpis

 – Nadpis 6

Nadpis úrovne h1

Nadpis úrovne h2

Nadpis úrovne h3

Nadpis úrovne h4

atď.

Odseky viete definovať pomocou párového tagu

. Tento tag, inak nazývaný aj paragraf, je formátovacím tagom, ktorým sa začína a končí každý nový odsek.

Tagom
definujete prechod na nový riadok.

Napríklad:

prvý riadok

druhý riadok

tretí riadok

Html tagy pre vytvorenie zoznamu

V prípade, že chcete na vašej stránke vytvoriť odrážkový zoznam, použite tag

    , ktorým definujete odrážkový zoznam. Na definovanie jednotlivých položiek zoznamu sa používa tag

  • .

    Pre odrážkový zoznam vyzerá HTML kód nasledovne:

       

    • Odrážka 1

      •  

    • Odrážka 2

      •  

    • Odrážka 3

    Vyzerať bude nasledovne:

    • Odrážka 1
    • Odrážka 2
    • Odrážka 3
       

    Ak chcete použiť číslovaný zoznam, použite namiesto

      tag

        .

        Príklad HTML kódu:

        1. Odrážka 1

        2. Odrážka 2

        3. Odrážka 3

        Vyzerať bude nasledovne:

        1. Odrážka 1
        2. Odrážka 2
        3. Odrážka 3

        HTML značky na úpravu písma/textu

        Nižšie uvádzame niekoľko značiek pomocou ktorých viete meniť vzhľad písma, jeho farbu, veľkosť a iné atribúty.

        Na zvýraznenie textu tučným písmom použite .

        Vyzerá to takto: váš text, ktorý chcete zvýrazniť -> váš text, ktorý chcete zvýrazniť

        Pokiaľ chcete text napísať kurzívou, použite .

        váš text, ktorý chcete kurzívou -> váš text, ktorý chcete kurzívou

        Pre podčiarknutie textu použite značku .

        podčiarknutý text -> podčiarknutý text

        Na prečiarknutie textu použite značku .

        prečiarknutý text -> prečiarknutý text

        Poznámka: tagy a  sú už zastarané a bežne sa namiesto nich používa jazyk CSS. Takisto nie sú podporované v HTML5.

        Horný index viete nastaviť použitím tagu .

        text, ktorý chcete mať v tvare horného indexu -> text, ktorý chcete mať v tvare horného indexu

        Dolný index nastavíte použitím značky .

        text, ktorý chcete mať v tvare dolného indexu -> text, ktorý chcete mať v tvare dolného indexu

        Zvýraznený text nastavíte použitím tagu .

        text, ktorý chcete zvýrazniť -> text, ktorý chcete zvýrazniť

        Na zväčšenie textu viete použiť značku

        Vyzerá takto text, ktorý chcete zväčšiť</big> -> text, ktorý chcete zväčšiť

        A naopak, keď chcete váš text zmenšiť, použite tag .

        Text bude vyzerať takto <small>text, ktorý chcete zmenšiť -> text, ktorý chcete zmenšiť

        Tagom viete nastavovať písmo a pridávať doň parametre ako veľkosť (size), typ písma (face) a farba (color)

        Veľkosť definujeme v pixeloch alebo v %. 

        Typ písma viete zvoliť podľa vlastného gusta, napr.: Arial, Times New Roman, atď.

        Farbu definujete v hexadecimálnych hodnotách od „#000000″ až do“#FFFFFF“

        Príklad pre zelený text písaný fontom Arial o veľkosti 12px

        font písma Arial, text vo veľkosti 12, zelená farba písma

        Poznámka: namiesto tagov , a  sa bežne používa jazyk CSS. Takisto nie sú podporované v HTML5.

        Vytvorenie tabuľky

        Na vytvorenie tabuľky potrebujete niekoľko dôležitých tagov. Začiatok a koniec tabuľky definujete prostredníctvom párového tagu

        . Na definovanie začiatku a konca riadka tabuľky použite tag

        . Začiatok a koniec bunky tabuľky definujete pomocou

        . Tagom

        viete definovať hlavný obsah jednotlivých buniek tabuľky.

        V praxi môže kód vyzerať takto:

        Meno Priezvisko Vek
        Jožko Mrkvička 30
        Janka Mrkvičková 29

        A tabuľka bude vyzerať nasledovne:

        Meno Priezvisko Vek
        Jožko Mrkvička 30
        Janka Mrkvičková 29

        Ďalšie parametre tagu

        V rámci tagu

        viete nastavovať ďalšie parametre, napr.: ohraničenie tabuľky, farbu pozadia tabuľky, medzery medzi bunkami tabuľky, a iné.

        Pokiaľ chcete mať ohraničenie tabuľky vo veľkosti 1px, zapíšete to nasledovne

        Farbu pozadia tabuľky viete definovať v hexadecimálnych hodnotách „#000000″ až“#FFFFFF“ pomocou zápisu

        Medzeru medzi bunkami tabuľky nastavíme pomocou príkazu

        , kde × je číselná veľkosť v pixeloch.

        Medzeru medzi obsahom bunky a rámikom zapíšete ako

        , kde × je číselná veľkosť v pixeloch

        Šírku tabuľky definujete v % príkazom WIDTH a zarovnanie tabuľky na aktuálnom riadku docielite použitím príkazu ALIGN=„LEFT/CENTER/RIGHT“

        Príklad pre tabuľku s bielym pozadím, ohraničením tabuľky vo veľkosti 1 pixela, medzerou medzi bunkami tabuľky vo veľkosti 4 pixely, medzerou medzi obsahom bunky a rámikom vo veľkosti 1 pixel, šírkou tabuľky „90%“ a zarovnaním tabuľky na stred.

        Parametre tagu

        a 

        Riadky a bunky tabuľky viete ľubovoľne upravovať – ich obsah sa dá zarovnať vo vodorovnom a vo zvislom smere.

        Zarovnanie obsahu bunky vo vodorovnom smere docielite použitím príkazu ALIGN=„LEFT/CENTER/RIGHT“

        Zarovnať obsah bunky vo zvislom smere viete pomocou tagu VALIGN=„TOP/MIDDLE/BOTTOM“

        Parametre buniek tabuľky

        V rámci buniek viete nastaviť ich šírku, použitím tagu WIDTH a definovaním šírky v pixeloch.

        Pokiaľ chcete nastaviť výšku bunky, pomocou príkazu HEIGHT a definovaním v pixeloch.

        Obrázky

        Pokiaľ chcete na stránku vložiť obrázok, je potrebné, aby ste ho mali uložený. Buď na svojom hostingu, alebo v rámci voľne dostupného obrázkového serveru (napr. tento).

        Na zobrazenie obrázka na stránke musíte použiť tag s atribútom src.

        Zobrazenie obrázka napíšete takto . Ak je obrázok nahraný priamo na doméne, kde chcete obrázok zobraziť, môžete použiť aj zjednodušený zápis .

        Ďalšie parametre tagu

        Chcete, mať svoje obrázky ohraničené? Žiaden problém, použite príkaz BORDER a definujte si hrúbku ohraničenia v pixeloch.

        Ak chcete svoj obrázok zarovnať vo vodorovnom smere, použite príkaz ALIGN=„left/right“

        Zarovnanie obrázku zvislo docielite zápisom príkladu ALIGN=„top/middle/bottom“

        Šírku obrázku definujete v pixeloch zápisom WIDTH=„x“.

        Výšku viete nastaviť ako HEIGHT tiež použitím rozmerov v pixeloch.

        Popis k obrázku nastavíte tagom: ALT=„nazov vasho obrazka“

        Príklad pre obrázok so šírkou obrázka 200 pixelov, výškou 120 pixelov, popisom obrázka „text k obrázku“ a zarovnaním obrázka na stred.

        „text

        Prelinkovanie

        Na vytvorenie odkazu na inú webstránku alebo sekciu na vašej stránke, môžete použiť tag text odkazu, kde text odkazu je textové označenie prelinkovania, po ktorého kliknutí budete presmerovaní na zadanú url adresu.

        Prelinkovania viete vytvárať na:

        Štruktúrne tagy

        Štruktúrne tagy sa používajú na vymedzenie logických oblastí stránky. Ich použitím budete mať vo svojom html dokumente väčší prehľad.

        Prvou oblasťou je záhlavie stránky, teda viditeľná hlavička, ktorú definujete tagmi

        . V hlavičke možno definovať jednotlivé sekcie stránky, napríklad domov, o nás, kontakt, atď.

        Pätička stránky sa označuje tagom

        . V pätičke sa zvyčajne vyskytujú informácie o vlastníkovi, popr. tvorcovi stránky, ale aj rok vytvorenia stránky.

        Napríklad:

        Copyright VAŠA FIRMA s.r.o. © 2023

        Ďalším tagom v rámci štruktúrnych tagov je

        . Definujete sa ním hlavný obsah stránky, avšak nie je potrebné ho používať.

        Použitím párového tagu

        označujeme obsahové sekcie, napr.: kapitoly článku, atď. Do vnútra medzi tagy napíšete text, ktorý sa vám na stránke zobrazí ako označenie konkrétnej kapitoly. Vďaka tomuto tagu môžete využiť aj prelinkovanie na konkrétnu sekciu stránky, kedy vás automaticky zoskroluje na danú sekciu.

        Tag

        môžete použiť na označenie navigačnej lišty, napr.: menu, obsah článku a pod.

        Tag

        ohraničuje obsahovú časť, ktorú si môžete ako užívatelia zobraziť alebo skryť. Používa sa spolu s tagmi

        a <p>. Príklad si môžete pozrieť tu.

        Slovo na záver

        Veríme, že vám náš článok pomohol a ozrejmili ste si pomocou neho základné html príkazy a ich funkcie. Ak si ich budete v budúcnosti budete chcieť zopakovať, nezabudnite si článok pridať do svojich záložiek.

        nextio
        Viac mojich článkov

        Související články

        Newsletter Prihlásili ste sa na odber noviniek

        Novinky, akce, články a návody Váš e-mail bol úspešne pridaný.
        Pole je povinné so správnym e-mail formátom

        Toto je testovacia verzia webstránky

        POZRIEŤ ŽIVÚ STRÁNKU