Základné HTML príkazy, tagy a značky, ktoré by ste mali poznať (zoznam)
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
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
.
- Odrážka 1
- Odrážka 2
- Odrážka 3
- Odrážka 1
- Odrážka 2
- Odrážka 3
- Odrážka 1
- Odrážka 2
- Odrážka 3
- Odrážka 1
- Odrážka 2
- Odrážka 3
- iné sekcie vašej webstránky, napr.: Moje záľuby
- inú webstránku; odkaz na stranku
- obrázok; váš obrázok
- video; Video
- hudbu; Hudba
Pre odrážkový zoznam vyzerá HTML kód nasledovne:
Vyzerať bude nasledovne:
Ak chcete použiť číslovaný zoznam, použite namiesto
- tag
Príklad HTML kódu:
Vyzerať bude nasledovne:
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.
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.
Servery
2 min
Online marketing
8 min
V rámci tagu
