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 <!doctype html>
Deklarácia kódovania sa v HTML dokumente píše v rámci príkazu <meta charset=„utf-8“>. Toto kódovanie povoľuje používať diakritické znamienka, ktoré sú súčasťou slovenského jazyka.
<html> 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:
<html>
V tejto časti bude celý obsah vášho webu
</html>
Párový tag <head> 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:
<head>
Hlavička vášho webu
</head>
V rámci tagu <head> sa využívaj aj tag <title>, ktorý sa zobrazuje vo webových prehliadačoch ako názov karty alebo vo výsledkoch vyhľadávania.
<body> 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ď.
Zapisuje sa v tvare:
<body>
Obsah vašej stránky
</body>
<! – – > 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.: <! – vasa poznamka – >
Zhrnutie štruktúry html dokumentu
<!doctype html>
<html>
<head>
<meta charset=„utf-8“>
<title>
Hlavička vášho webu
</title>
</head>
<body>
Obsah vašej stránky
<! – vasa poznamka – >
Obsah vašej stránky
</body>
</html>
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.
<h1>Váš nadpis</h1> – Nadpis 1
<h2>Váš nadpis</h2> – Nadpis 2
<h3>Váš nadpis</h3> – Nadpis 3
…
<h6>Váš nadpis</h6> – Nadpis 6
Nadpis úrovne h1
Nadpis úrovne h2
Nadpis úrovne h3
Nadpis úrovne h4
atď.
Odseky viete definovať pomocou párového tagu <p></p>. Tento tag, inak nazývaný aj paragraf, je formátovacím tagom, ktorým sa začína a končí každý nový odsek.
Tagom <br> definujete prechod na nový riadok.
Napríklad:
<p>
prvý riadok<br>
druhý riadok<br>
tretí riadok<br>
</p>
Html tagy pre vytvorenie zoznamu
V prípade, že chcete na vašej stránke vytvoriť odrážkový zoznam, použite tag <ul>, ktorým definujete odrážkový zoznam. Na definovanie jednotlivých položiek zoznamu sa používa tag <li>.
Pre odrážkový zoznam vyzerá HTML kód nasledovne:
<! – Lists – >
<ul>
<li>Odrážka 1</li>
<li>Odrážka 2</li>
<li>Odrážka 3</li>
</ul>
Vyzerať bude nasledovne:
- Odrážka 1
- Odrážka 2
- Odrážka 3
Ak chcete použiť číslovaný zoznam, použite namiesto <ul> tag <ol>.
Príklad HTML kódu:
<! – Lists – >
<ol>
<li>Odrážka 1</il>
<li>Odrážka 2</il>
<li>Odrážka 3</il>
</ol>
Vyzerať bude nasledovne:
- Odrážka 1
- Odrážka 2
- 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 <b>.
Vyzerá to takto: <b>váš text, ktorý chcete zvýrazniť</b> -> váš text, ktorý chcete zvýrazniť
Pokiaľ chcete text napísať kurzívou, použite <i>.
<i>váš text, ktorý chcete kurzívou</i> -> váš text, ktorý chcete kurzívou
Pre podčiarknutie textu použite značku <u>.
<u>podčiarknutý text</u> -> podčiarknutý text
Na prečiarknutie textu použite značku <strike>.
<strike>prečiarknutý text</strike> -> prečiarknutý text
Poznámka: tagy <u> a <strike> 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 <sup>.
<sup>text, ktorý chcete mať v tvare horného indexu</sup> -> text, ktorý chcete mať v tvare horného indexu
Dolný index nastavíte použitím značky <sub>.
<sub>text, ktorý chcete mať v tvare dolného indexu</sub> -> text, ktorý chcete mať v tvare dolného indexu
Zvýraznený text nastavíte použitím tagu <strong>.
<strong>text, ktorý chcete zvýrazniť</strong> -> text, ktorý chcete zvýrazniť
Na zväčšenie textu viete použiť značku <big>
Vyzerá takto <big>text, ktorý chcete zväčšiť</big> -> text, ktorý chcete zväčšiť
A naopak, keď chcete váš text zmenšiť, použite tag <small>.
Text bude vyzerať takto <small>text, ktorý chcete zmenšiť</small> -> text, ktorý chcete zmenšiť
Tagom <font> 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 FACE=„Arial“ SIZE=„12″ COLOR=“#27FF00″>font písma Arial, text vo veľkosti 12, zelená farba písma</FONT>
Poznámka: namiesto tagov <big>, <small> a <font> 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 <table></table>. Na definovanie začiatku a konca riadka tabuľky použite tag <tr></tr>. Začiatok a koniec bunky tabuľky definujete pomocou <td></td>. Tagom <th></th> viete definovať hlavný obsah jednotlivých buniek tabuľky.
V praxi môže kód vyzerať takto:
<table>
<tr>
<th>Meno</th>
<th>Priezvisko</th>
<th>Vek</th>
</tr>
<tr>
<td>Jožko</td>
<td>Mrkvička</td>
<td>30</td>
</tr>
<tr>
<td>Janka</td>
<td>Mrkvičková</td>
<td>29</td>
</tr>
</table>
A tabuľka bude vyzerať nasledovne:
| Meno | Priezvisko | Vek |
|---|---|---|
| Jožko | Mrkvička | 30 |
| Janka | Mrkvičková | 29 |
Ďalšie parametre tagu <table>
V rámci tagu <table> 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 <TABLE BORDER=“1″>
Farbu pozadia tabuľky viete definovať v hexadecimálnych hodnotách „#000000″ až“#FFFFFF“ pomocou zápisu <TABLE BGCOLOR=“#000000″>
Medzeru medzi bunkami tabuľky nastavíme pomocou príkazu <TABLE CELLSPACING=„x“>, kde × je číselná veľkosť v pixeloch.
Medzeru medzi obsahom bunky a rámikom zapíšete ako <TABLE CELLPADDING=„x“>, 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.
<TABLE BGCOLOR=„#FFFFFF“ BORDER=„1″ CELLSPACING=“4″ CELLPADDING=„1″ WIDTH=“90%“ ALIGN=CENTER>
Parametre tagu <tr></tr> a <td></td>
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 <td></td>
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 <img> s atribútom src.
Zobrazenie obrázka napíšete takto <img src=„url-nazov-vasho-obrazka.jpg“>. Ak je obrázok nahraný priamo na doméne, kde chcete obrázok zobraziť, môžete použiť aj zjednodušený zápis <img src=„/priecinok-obrazka/vas_obrazok.jpg“>.
Ďalšie parametre tagu <img>
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.
<IMG SRC=„https://www.domena.sk/priecinok-obrazka/vas_obrazok.jpg“ WIDTH=„200″ HEIGHT=“120″ ALT=„text k obrázku“ ALIGN=„middle“ HSPACE=„20″ VSPACE=“20″>
Prelinkovanie
Na vytvorenie odkazu na inú webstránku alebo sekciu na vašej stránke, môžete použiť tag <a href=„url-adresa“>text odkazu</a>, kde text odkazu je textové označenie prelinkovania, po ktorého kliknutí budete presmerovaní na zadanú url adresu.
Prelinkovania viete vytvárať na:
- iné sekcie vašej webstránky, napr.: <a href=„https://www.vasadomena.sk/moje-zaluby“>Moje záľuby</a>
- inú webstránku; <a href=„https://www.inadomena.sk/ina-stranka“>odkaz na stranku</a>
- obrázok; <a href=„obrazok.jpg“>váš obrázok</a>
- video; <a href=„video.mpg“>Video</a>
- hudbu; <a href=„hudba.mp3“>Hudba</a>
Š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 <header></header>. 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 <footer></footer>. 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:
<footer>
<p>Copyright VAŠA FIRMA s.r.o. © 2023 </p>
</footer>
Ďalším tagom v rámci štruktúrnych tagov je <main></main>. Definujete sa ním hlavný obsah stránky, avšak nie je potrebné ho používať.
Použitím párového tagu <section></section> 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 <nav></nav> môžete použiť na označenie navigačnej lišty, napr.: menu, obsah článku a pod.
Tag <details></details> ohraničuje obsahovú časť, ktorú si môžete ako užívatelia zobraziť alebo skryť. Používa sa spolu s tagmi <summary> 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.
