Čo je to jazyk HTML a jeho základy. Všetko, čo na začiatok potrebujete vedieť
Prevzaté z webu WY.sk
Jazyk HTML sa už dlho nespája len s IT oblasťou a s ľuďmi, ktorí v nej pracujú. Znalosť tohto jazyka sa hodí všetkým, ktorý si chcú vytvoriť vlastnú webstránkuna osobné či pracovné účely.
V našom článku vám prinášame základné informácie o tom, čo je to HTML, čo obnáša a aké sú základné tagy a príkazy, ktoré sa oplatí poznať.
Nepotrebujete mať žiadne predošlé skúsenosti s programovaním, pretože sme tu mysleli práve na ľudí, ktorí ešte nikdy nič neprogramovali ani nič nevedia o webdevelopmente.
Čo je jazyk HTML?
HTML je hypertextový značkovací jazyk (z angl. hypertext markup language), s ktorým môžete tvoriť webstránky a dokumenty. Ide o kombináciu normálneho textu a značiek.
Ľudia ho mylne označujú ako programovací jazyk, čo však HTML nie je. Hlavnou funkciou programovacích jazykov (napr. Javascript, PHP…) je, že dokážu vytvárať podmienky typu ak sa stane x, urob y. Keďže s HTML nie je možné programovať, pomocou znalosti tohto jazyka si viete iba zobraziť určité elementy (video, text, obrázky, odrážky…) a teda vytvoriť si základnú webovú stránku.
Napr. v HTML by ste si nedokázali vytvoriť prihlasovaciu stránku, pretože to by vyžadovalo naprogramovať aj funkcie pre prihlásenie a overenie správnosti prihlasovacích údajov, čo je funkcionalita, ktorú v HTML nenájdete.
Čo potrebujete na začiatok?
Stačí vám iba internetový prehliadač, ktorý bežne používate a vhodný textový editor ako Sublime Text alebo NotePad++.
Príklad HTML kódu v programe Notepad++
Ukážka práce so Sublime Text editorom
Ako vytvoriť HTML súbor?
Výhodou HTML súborov je, že na ich zobrazenie vám stačí internetový prehliadač a nepotrebujete ich mať niekde na serveri. Až v prípade, že by ste ich chceli mať dostupné online, budete potrebovať webhosting a doménu.
Na jeho vytvorenie vám stačí textový dokument uložiť vo formáte s koncovkou .html.
Domovskú stránku je potrebné nazvať index.html, ostatné môžete nazvať podľa potreby a názov dokumentu bude zároveň aj url adresou. Súbor index.html je súbor, ktorý sa načíta ako základný, ak prehliadaču nedefinujete iný konkrétny súbor.
https://www.vasadomena.sk -> načíta súbor index.html
https://www.vasadomena.sk/onas.html -> načíta súbor onas.html
Štruktúra HTML dokumentu
Celý jazyk HTML je zložený z tzv. tagov (nazývaných aj značiek), ktoré určujú zobrazenie jednotlivých elementov na stránke.
Tagy sa píšu v lomených zátvorkách a rozlišujeme párové a nepárové; párové tagy majú úvodnú a koncovú značku. Medzi úvodným a koncovým tagom sa nachádza text alebo ďalšie HTML tagy, ktoré sa na vašej stránke zobrazia podľa príslušných pokynov. Nepárové tagy majú len úvodnú značku, nijako sa ukončiť nemusia.
Konkrétne to vyzerá nasledovne obsah
Na začiatku HTML dokumentu by ste mali použiť nepárový tag .Ide o špecifikáciu DTD – deklaráciu typu textu. 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.
Ďalším tagom je párový tag , ktorý určuje začiatok a koniec obsahu HTML dokumentu. Celý obsah dokumentu sa musí nachádzať medzi týmito dvoma tagmi. Tento tag nie je podmienkou, ale pokiaľ chcete, aby sa v kóde v budúcnosti vyznal aj niekto ďalší, je dobré písať kód v súlade so zaužívanými postupmi, ktoré spravidla pozná väčšina programátorov aj webdeveloperov. Na konci ho uzavriete značkou v tvare .
Tag je párovým tagom, ktorý označuje hlavičku textu. Hlavička sa na stránke reálne nezobrazuje, na konci dokumentu sa píše v tvare .
Celý obsah stránky sa zapisuje to tzv. tela. Telo v html dokumente označíte párovým tagom na jeho začiatku a na jeho konci. V rámci tela môžete používať aj iné tagy, napr.: na úpravu farby pozadia, vloženie obrázka, atď.
Tag sa síce na vašej stránke nezobrazí, avšak dokáže vám pomôcť v rýchlej orientácií v dokumente. Všetko, čo sa v tomto tagu nachádza, je poznámka. Môžete ňou označiť jednotlivé časti dokumentu, a mať tak v nich väčší prehľad a poriadok.
Základné HTML príkazy
Nadpisy
V HTML poznáme až 6 typov nadpisov, ktoré sa od seba líšia veľkosťou písma. V texte ich označujeme párovými tagmi, napr.
až
,
Odstavec
tag označuje paragraf, teda odsek. Ide o formátovací tag, ktorým sa začína a končí každý nový odsek.
Ďalšou párovou značkou, ktorú by ste mali použiť, je značka
Nadpis na stránke
text odsek 1
text odsek 2
Dôležité si je pri tejto štruktúre uvedomiť, že všetko, čo je v časti head, nie je zobrazené v prehliadači ale iba v kóde stránky.
Do tejto sekcie sa najčastejšie dávajú meta tagy ako napr. meta description pre SEO alebo analytické kódy ako Google Analytics.
V rámci tagu pre paragraf
môžete použiť aj nasledujúce značky na zmenu písma:
– bold; definovanie tučného písma
– italic; písmo bude napísané kurzívou
– strong, text v rámci týchto tagov bude tak isto tučný, ale tento tag bude na váš text klásť dôraz. Preto je táto značka nazývaná značkou sémantickou.
– small, text bude napísaný malým písmom
– tento tag označuje pridaný text, zobrazuje sa podčiarknutím pridaného textu.
– tag označuje odstránený text, ktorý preškrtne. Odporúčame vám ale odstránený text riadne z dokumentu vymazať.
Prelinkovanie
Na vytvorenie odkazu na inú stránku môžete použiť tag text odkazu, kde „text odkazu“ je textové označenie prelinkovania, ktoré vás po kliknutí presmeruje na odkaz konkrétnej stránky. Do atribútu href jednoducho napíšte odkaz na konkrétnu stránku, na ktorú chcete viesť svojich čitateľov.
Ak by ste chceli otvoriť odkaz v novom okne, stačí doplniť atribút target=„_blank“
Vytvorenie zoznamu
Na začiatku použite tag
- , ktorým definujete odrážkový nečíslovaný zoznam. V rámci tagu
- váš text .
- Odrážka 1
- Odrážka 2
- Odrážka 3
- párový tag
- názov uvádzajte v rámci značiek
- tagmi definujete hlavičku tabuľky
- na definíciu riadkov tabuľky viete použiť tagy
- tagmi
definujete hlavičkovú bunku tabuľky, a teda obsah hlavných buniek - tagy
definujú obsah jednotlivých buniek
Ak chcete použiť namiesto odrážok číslovaný zoznam, viete ho zapísať pomocou tagu
- . Zoznam vám bude číselne určovať všetky položky z vášho zoznamu.
Pre odrážkový zoznam vyzerá HTML kód nasledovne:
Ak chcete namiesto odrážok použiť číslice, použite HTML kód v tvare:
- Odrážka 1
- Odrážka 2
- Odrážka 3
Vytvorenie tabuľky
Na vytvorenie tabuľky sa využívajú viaceré tagy:
HTML kód v praxi vyzerá napríklad 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 |
Štruktúrne tagy
Používaním týchto tagov viete v rámci svojej webstránky vymedziť logické oblasti.
Prvou z nich je záhlavie stránky, teda viditeľná hlavička, ktorú možno označiť tagmi
.
Ďalej môžete využiť tag
na označenie pätičky stránky. V rámci pätičky môžete napísať informácie o vlastníkovi, popr.: tvorcovi stránky, ale aj rok vytvorenia stránky.
Tagom definujete hlavný obsah stránky, avšak je to celkom nadbytočný tag, pretože je skôr informačného charakteru a neovplyvňuje rozloženie ani vzhľad jednotlivých elementov na stránke. Obsah tohto tagu by mal byť unikátny a neodporúča sa doňho dávať navigačnú lištu, logo, alebo bočný panel.
Na označenie obsahovej sekcie, napr.: kapitol článku, používajte párový tag
. Stačí, keď do vnútra medzi tagy napíšete text, ktorý sa vám na stránke zobrazí ako označenie konkrétnej kapitoly. Tag ako taký neovplyvňuje zobrazenie na stránke a slúži skôr pre potreby rozčlenenia kódu, aby ste sa v ňom ľahšie mohli orientovať.
Tag
môžete použiť na označenie navigácie stránky ako je navigačná lišta, menu, obsah článku a pod.
Tag
ohraničuje obsahovú časť, ktorú si môžete užívatelia zobraziť/skryť. Používa sa spolu s tagmi
Používanie obrázkov
Na zobrazenie obrázkov sa využíva tag s atribútom src, cez ktorý určíte umiestnenie obrázka. Ten musí mať vlastnú url adresu, čo znamená, že si ho potrebujete najprv niekam nahrať – buď na svoj hosting alebo na nejaký voľne dostupný obrázkový server (napr. tento). Zapisuje sa nasledovne:
Ak by ste chceli okolo obrázka mať ohraničenie, využijete na to atribút border s uvedením príslušnej hrúbky.
.
Odporúčame vám vyskúšať viacero číselných hodnôt, aby ste našli tú vami požadovanú úroveň orámovania obrázka.
Výšku a šírku obrázka možno zapísať týmto spôsobom: 
, kde číselná hodnota je uvedená v pixeloch.
Neodporúčame vám však nahrávať obrázky s priveľkými rozmermi, a tie následne zmenšovať prostredníctvom HTML kódu do požadovanej veľkosti. Mohlo by to spomaľovať rýchlosť načítania vašej stránky. Namiesto toho si obrázok upravte na potrebnú výšku a šírku pred vložením obrázka na stránku.
Ďalšie HTML tagy
V prípade, že si píšete vlastný blog a chcete v rámci neho používať citácie, napíšete ich prostredníctvom párového tagu
.
Použitím tagu
sa zapisuje a udáva url adresa dokumentu, z ktorého je vami citovaná časť.
Zaujímavým tagom je aj , ktorým viete definovať skratky na vašich stránkach. Zapisuje sa nasledovne SKRATKA a na stránke to vyzerá takto:
Po prejdení kurzorom na HTML sa vám zobrazí význam skratky >>> HTML.
Tag slúži na vytvorenie tlačidla, do ktorého viete vložiť akýkoľvek HTML kód. V rámci tohto tagu môžete definovať názov, text, vkladať obrázky, atď. Príklad:
Na pokročilejšie fungovanie tohto tagu však budete potrebovať znalosti programovania, hlavne v prípade, ak by sa pri stlačení tlačidla mali odosielať nejaké údaje.
Úprava obsahu v HTML dokumentoch pomocou CSS atribútov
V rámci značky „body“ môžete použiť aj nasledujúce vlastnosti CSS, ktorými viete upravovať základné zobrazenie obsahu na stránke pomocou atribútu style.
Farba pozadiaBackground-color – využíva sa na zmenu farby pozadia. Zvolené farbu môžete napísať slovom alebo v tvare HEX kódu, ktorý obsahuje 6 znakov a znak # na začiatku kódu každej farby.
Zarovnanie textuK zarovnaniu textu sa využívajú atribúty text-align (left, right, center alebo justify), ktorými zarovnáte odsek a text v ňom na príslušné strany. Zapisuje sa v nasledovnom tvare:
váš text
Farba textuAk sa rozhodnete zmeniť farbu svojho písma, na túto zmenu použite značku color. Farbu viete definovať tak isto ako v prípade farby pozadia; a teda slovom, alebo HTML kódom príslušnej farby.
Veľkosť textuOkrem farby písma viete zmeniť aj jeho veľkosť. Veľkosť písma môžete definovať v pixeloch, v %, v milimetroch, v palcoch, atď. Na jeho zmenu použite tag font-size.
Príkazy na zmenu farby a veľkosti písma sa zapisujú nasledovne:
váš text
Slovo na záver
Veríme, že tento článok vám na začiatok pomohol pochopiť logiku jazyka HTML, tvorbu HTML súborov a ozrejmil základné tagy.
Tip 1: Ak si chcete pozrieť zapísaný HTML kód na svojej stránke, použite klávesy Ctrl+U, ktorými zobrazíte zdrojový kód stránky.
Tip 2: Na internete nájdete veľa online HTML editorov, ktoré vám po vložení požadovaný elementov a obsahu vygenerujú kód. Odporúčame vyskúšať napr. html-online.com.
