Č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ánku na 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++
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 <nazovtagu>obsah</nazovtagu>
Na začiatku HTML dokumentu by ste mali použiť nepárový tag <!DOCTYPE>.Ide o špecifikáciu DTD – deklaráciu typu textu. 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.
Ďalším tagom je párový tag <html>, 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 </html>.
Tag <head> 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 </head>.
Celý obsah stránky sa zapisuje to tzv. tela. Telo v html dokumente označíte párovým tagom <body> na jeho začiatku a </body> 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 <! – vaša poznámka – > 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. <h1></h1> až <h6></h6>,
Odstavec
<p> 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 <title>. Touto značkou, ktorá sa nachádza v hlavičke dokumentu medzi značkami <head></head>, označujeme titulok, a teda názov požadovanej stránky, ktorý sa zobrazuje v lište prehliadača.
<!DOCTYPE html>
<html>
<head>
<title>Názov stránky</title>
</head>
<body>
<h1>Nadpis na stránke</h1>
<p>text odsek 1</p>
<p>text odsek 2</p>
</body>
</html>
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 <p> môžete použiť aj nasledujúce značky na zmenu písma:
<b></b> – bold; definovanie tučného písma
<i></i> – italic; písmo bude napísané kurzívou
<strong></strong> – 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></small> – small, text bude napísaný malým písmom
<ins></ins> – tento tag označuje pridaný text, zobrazuje sa podčiarknutím pridaného textu.
<del></del> – 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 <a href=„url adresa“>text odkazu</a>, 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“
<a href=„url adresa“ target=„_blank“>text odkazu</a>
Vytvorenie zoznamu
Na začiatku použite tag <ul>, ktorým definujete odrážkový nečíslovaný zoznam. V rámci tagu <ul> sa používajú tagy <li>, ktoré definujú položku zoznamu a jej názov. Napr.: <li>váš text</li>.
Ak chcete použiť namiesto odrážok číslovaný zoznam, viete ho zapísať pomocou tagu <ol>. Zoznam vám bude číselne určovať všetky položky z vášho zoznamu.
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>
Ak chcete namiesto odrážok použiť číslice, použite HTML kód v tvare:
<! – Lists – >
<ul>
<ol>Odrážka 1</ol>
<ol>Odrážka 2</ol>
<ol>Odrážka 3</ol>
</ul>
Vytvorenie tabuľky
Na vytvorenie tabuľky sa využívajú viaceré tagy:
- párový tag <table></table>
- názov uvádzajte v rámci značiek <caption></caption>
- tagmi <thead></thead> definujete hlavičku tabuľky
- na definíciu riadkov tabuľky viete použiť tagy <tr></tr>
- tagmi <th></th> definujete hlavičkovú bunku tabuľky, a teda obsah hlavných buniek
- tagy <td></td> definujú obsah jednotlivých buniek
HTML kód v praxi vyzerá napríklad takto:
<! – Table – >
<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 |
Š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 <header></header>.
Ďalej môžete využiť tag <footer></footer> 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 <main></main> 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 <section></section>. 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 <nav></nav> môžete použiť na označenie navigácie stránky ako je navigačná lišta, menu, obsah článku a pod.
Tag <details></details> ohraničuje obsahovú časť, ktorú si môžete užívatelia zobraziť/skryť. Používa sa spolu s tagmi <summary> a <p>. Príklad si môžete pozrieť tu.
Používanie obrázkov
Na zobrazenie obrázkov sa využíva tag <img> 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:
<img src=„url-adresa-vasho-obrazka.jpg“>
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.
<img src=„url-vasho-obrazka.jpg“ border=“2″>.
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: <img src=vas_obrazok.gif „width=“60″ height=“100″>, 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 <blockquote></blockquote>.
Použitím tagu <blockquote cite=„http://vaspriklad.sk“> sa zapisuje a udáva url adresa dokumentu, z ktorého je vami citovaná časť.
Zaujímavým tagom je aj <abbr>, ktorým viete definovať skratky na vašich stránkach. Zapisuje sa nasledovne <abbr title=„Popis skratky“>SKRATKA</abbr> a na stránke to vyzerá takto:
Po prejdení kurzorom na HTML sa vám zobrazí význam skratky >>> <abbr title=„Toto je článok o HTML“>HTML</abbr>.
Tag <button></button> 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: <button name=„cokolvek“ value=„cokolvek“>tlačítko <b>odoberajte nas a dozviete sa viac</b></button>
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 pozadia
Background-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 textu
K 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:
<p style=„text-align: right“>váš text</p>
Farba textu
Ak 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ť textu
Okrem 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:
<p style=„color: #999999; font-size: 16px;“>váš text</p>
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.
