krpr-html

Obsah webových stránok - základné elementy

Asi už chápeš, že webová stránka je ako skladačka. Presne ako stavebnica. Keď máš dieliky, ktoré do seba pasujú, už je to len o tvojej fantázii. Teraz ti pomôžem objaviť niekoľko dielikov, z ktorých si môžeš vyskladať pomerne slušnú webovú stránku.
Budeme sa postupne baviť o tagoch pre nadpis (h1, h2, h3, h4, h5, h6), odstavec (p), tagoch pre formátovanie textu (b, strong, i, em, ins, del, mark, small, sup, sub), pre písanie zoznamov (ul, ol, li), odkazov (a), vkladanie obrázkov, videa a hudby (img, video, audio), tabuliek (table, tr, td, th) a o tajomných neutrálnych tagoch (div a span). Skôr ako sa o nich začneme baviť konkrétne, ešte jeden dôležitý pohľad:

Už vieš, že v jazyku html poznáme párové (html, head, body, ...) a nepárové (hr, br) tagy. Je tu ešte jedno užitočné delenie. Tagy (elementy) v html delíme na blokové a riadkové.

blokové elementy	(body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, table, div)
	- zalomenie riadku pred aj za elementom - do blokového elementu môžeš vložiť akýkoľvek iný element, tak blokový ako aj riadkový
riadkové elementy	(a, b, strong, i, em, ins, del, mark, small, sup, sub, img, video, audio, span)
	- ostáva vo svojom riadku (nezalamuje riadky) - do riadkového elementu môžeš vložiť len riadkový element !!!

nadpisy

Jazyk html pozná šesť úrovní nadpisov. Používa na to tagy <h1>nadpis</h1>, <h2>nadpis</h2>, <h3>nadpis</h3>, ... , <h6>nadpis</h6>.
Nadpisové tagy sú párové a blokové. Ako fungujú rýchlo pochopíš, ak si vyrobíš stránku s nasledujúcim skriptom:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html-nadpisy</title> </head> <body> <h1>Nadpis prvej úrovne</h1> <p>text odstavca, ...............</p> <h2>Nadpis druhej úrovne</h2> <p>text odstavca, ...............</p> <h3>Nadpis tretej úrovne</h3> <p>text odstavca, ...............</p> <h4>Nadpis štvrtej úrovne</h4> <p>text odstavca, ...............</p> <h5>Nadpis piatej úrovne</h5> <p>text odstavca, ...............</p> <h6>Nadpis šiestej úrovne</h6> <p>text odstavca, ...............</p> </body> </html>

odstavce

V predchádzajúcom príklade som použil párový tag <p>text odstavca</p> ktorý slúži na vloženie bloku textu. Tento tag je rovnako ako tagy pre nadpis blokový. Vyskúšaj a vyrob nasledujúcu stránku:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html-odstavce</title> </head> <body> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> </body> </html>

formátovanie textu

Teraz príde niekoľko riadkových tagov, ktoré umožňujú čarovať s textom. Niekedy totiž potrebujeme použiť tučné písmo, inokedy písmo naklonené, písmo podčiarknuté, ~~prečiarknuté~~, farebne zvýraznené, menšie alebo vačšie, písmo ako ^horný alebo _dolný index. Hovoríme o formátovaní textu a vštky tagy o ktorých sa tu dozvieš sú riadkové elementy. To znamená že ich použitie nespôsobí zalomenie riadku. Pozri sa na tento príklad:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>formátovanie</title> </head> <body> <p> riadok v ktorom je len jednoduchý text bez formátovania<br> riadok v ktorom je <b>hrubo vyznačený text</b> (bold)<br> riadok v ktorom je <strong>dôležitý text</strong> (important)<br> riadok v ktorom je <i>naklonený text</i> (italic)<br> riadok v ktorom je <em>zdôraznený text</em> (emphasized)<br> riadok v ktorom je <mark>farebne označený text</mark> (marked)<br> riadok v ktorom je <small>malé písmo (smaller)</small><br> riadok v ktorom je <del>vymazaný text</del> (deleted)<br> riadok v ktorom je <ins>vložený text</ins> (inserted)<br> riadok v ktorom je <sup>text ako dolný index</sup> (supscript)<br> riadok v ktorom je <sub>text ako horný index</sub> (subscript)<br> </p> <p> Bola <b>raz</b> jedna <i>trieda</i>,<br> v tej <strong>triede</strong> bola <em>krieda</em>.<br> Tá <mark>krieda</mark> bola <del>biela</del><br> a bolo jej <ins>dosť veľa</ins>.<br> No prišiel <sup>Miško Hruška</sup><br> šup <sub>kriedu</sub> do vrecúška. </p> <p> V tomto riadku je <b><i><mark><del>hrubý, naklonený, prečiarknutý a farebne vyznačený</del></mark></i></b> text. </p> </body> </html>

zoznamy

Ak potrebuješ na stránke čosi vymenovať, použi blokový element zoznam. Jazyk html pozná dva typy zoznamov:

nečíslovaný zoznam: <ul>nečíslovaný_zoznam-unordered_list</ul>
číslovaný zoznam: <ol>číslovaný_zoznam-ordered_list</ol>

Vo vnútri týchto elementov môžeš pomocou ďalšieho elementu: <li>niečo_na_vymenovanie</li> vymenovať všetko čo chceš. Mrkni na príklad a objavuj:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>formátovanie</title> </head> <body> <h4>Nečíslovaný zoznam:</h4> <ul> <li>html</li> <li>css</li> <li>python</li> <li>c++</li> </ul> <h4>Číslovaný zoznam:</h4> <ol> <li>html</li> <li>css</li> <li>python</li> <li>c++</li> </ol> </body> </html>

link

Určite "link" dobre poznáš. Nejaký kúsok textu na webovej stránke, ktorý sa správa ako "tlačidlo". Keď naň klikneš, prehodí ťa dajme tomu na inú stránku. Link je napríklad TENTO TEXT. Keď naň klikneš, zobrazí sa iná stránka a na nej bude ďalší link, ktorý ťa vráti naspäť sem. Vyskúšaj to.

Elementy, o ktorých sme sa doteraz bavili boli jednoduché a mali tvar: <tag>nejaký_obsah</tag>. Riadkový element - link je o niečo zložitejší, lebo musí mať nejaké ďalšie atribúty. Minimálne musí mať atribút href ktorý hovorí, kam nás link po kliknutí odkáže: <a href="odkaz_niekam">text_linku</a>
Iný atribút - target zasa slúži na to aby sme povedali kde sa má odkaz zobraziť: <a href="odkaz_niekam" target="kde_zobraziť">text_linku</a>

Poznámka pre parameter href:

Keď linkom odkazuješ na existujúcu webovú stránku, potom do parametra href vypíšeš presnú URL adresu. Napríklad href=http://www.google.sk
Ak odkazuješ na existujúci súbor na tvojom webovom serveri, potom máš dve možnosti. Použiješ ako v prvom prípade URL adresu toho súboru, alebo relatívnu adresu súboru vzhľadom na stránku s linkom. Čo je to relatívna adresa vysvetľujem nižšie.

Poznámka pre parameter target:

Keď použiješ target=_blank vytvorí sa nová karta a v nej zobrazí stránka. Hodnota target=_self otvorí stránku na rovnakej karte. Keď parameter target vôbec nepoužiješ, je to to isté ako target=_self

Čo je to relatívna adresa súboru:
Súbor, ktorý chceš zobraziť kliknutím na link na tvojej stránke sa často nachádza niekde na tvojom webovom serveri. Adresu súboru budeš písať vždy vzhľadom na tvoju stránku. Nastať môžu tri prípady. Súbor je v tom istom priečinku ako stránka, súbor je v podpriečinku tvojej stránky aleno je súbor v nadpriečinku tvojej stránky.

ak je súbor v tom istom priečinku, stačí zadať jeho meno
ak je súbor v podpriečinku, treba postupne vypísať a lomítkom oddeliť všetky priečinky až po meno súboru
ak je súbor v nadpriečinku, pomocou dvoch bodiek môžeš skočiť o priečinok vyššie

príklad: href=mojaStranka.html
príklad: href=priecinok1/priecinok2/mojaStranka.html
príklad: href=../../priecinok3/priecinok4/mojaStranka.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html-link</title> </head> <body> <h4>Ako funguje link:</h4> <p>atribúty: <b>href</b> a <b>target</b>.</p> <a href="http://www.google.sk">google na tejto istej karte</a><br> <a href="http://www.zsfarskanr.sk" target="_blank">stránka ZŠ na novej karte</a><br> <a href="03priklad1.html">priklad - nadpisy na tejto istej karte</a><br> <a href="03priklad4.html" target="_blank">príklad - zoznamy na novej karte</a> </body> </html>

obrázok, video a audio

Vložiť na stránku obrázok, video alebo audio je v celku jednoduché. Nachystaj si obrázok (môže byť typu png, jpg alebo gif), video (typu mp4) a audio súbor (typu mp3). Môžeš si stiahnuť tieto: mojObrazok.png, mojObrazok.gif, mojeVideo.mp4, mojeAudio.mp3. Ulož ich do toho istého priečinku v ktorom bude uložená tvoja stránka.

Obrázok je riadkový element, na ktorý musíš použiť nepárový tag img. Atribút src hovorí, kde sa obrázok nachádza. Môžeš ešte použiť atribúty width alebo height na definovanie šírky, alebo výšky obrázku na stránke:

Video je riadkový element, na ktorý použiješ párový tag video. Atribútmi width a height nastavujeme jeho šírku alebo výšku. Atribút controls zobrazí na videu bežné tlačidlá na ovládanie. Ak požiješ atribút autoplay video sa po načítaní stránky začne automaticky prerávať. V elemente video je potrebné do nepárovaného tagu source zadať pomocou atribútu src umiestnenie videa a pomocou atribútu type uviesť typ použitého videa. Vyzerá to takto:

Audio je riadkový element, na ktorý musíš použiť párový tag audio. Atribút controls zobrazí bežné tlačidlá na jeho ovládanie. V elemente audio je podobne ako pri videu potrebné do nepárovaného tagu source zadať pomocou atribútu src umiestnenie nahrávky a pomocou atribútu type uviesť o aký typ audio súboru sa jedná. Vyzerá to takto:

Poznámka pre parameter src:

Keď chceš zobraziť existujúci obrázok (video alebo hudbu) ktorý sa nachádza na webe, potom do parametra src vypíšeš presnú URL adresu. Napríklad src=http://krpr.zsfarskanr.sk/krpr/priklady/mojObrazok.png
Ak odkazuješ na existujúci súbor na tvojom webovom serevri, potom máš podobne ako pri linku dve možnosti. Použiješ ako v prvom prípade URL adresu toho súboru, alebo použiješ relatívnu adresu súboru vzhľadom na stránku s obrázkom.

Čo je to relatívna adresa súboru:
Platí to isté ako pri linku, ale vysvetlím to radšej ešte raz. Súbor, ktorý chceš zobraziť na tvojej stránke sa často nachádza niekde na tvojom webovom serveri. Adresu súboru budeš písať vždy vzhľadom na tvoju stránku. Nastať môžu tri prípady. Súbor je v tom istom priečinku ako stránka, súbor je v podpriečinku tvojej stránky aleno je súbor v nadpriečinku tvojej stránky.

príklad: src=mojObrazok.png
príklad: src=priecinok1/priecinok2/mojObrazok.png
príklad: src=../../priecinok3/priecinok4/mojObrazok.png

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ObrazokVideo</title> </head> <body> <h5>obrázok...</h5> <img src="mojObrazok.png" width="100px"> <h5>video...</h5> <video height="200px" controls> <source src="mojeVideo.mp4" type="video/mp4"> </video> <h5>audio...</h5> <audio controls> <source src="mojeAudio.mp3" type="audio/mpeg"> </audio> </body> </html>

tabuľka

Často budeš potrebovať na zoradiť údaje tak, aby z nich vznikla tabuľka. Na to má jazyk html pripravený blokový element table, ktorý v sebe obsahuje ďalšie elementy (tr, td a th). Najlepšie sa to naučíš, ak vyskúšaš vyrobiť stránky s nižšie uvedenými kódmi. Na prvý pohľad síce vyzerajú podobne, ale majú nepatrné rozdiely. Pozri sa na tento príklad.

element <table>...</table>	označuje celú "tabuľku"
element <tr>...</tr>	označuje "table row" - riadok tabuľky
element <td>...</td>	označuje "table data" - bunku v riadku
element <th>...</th>	označuje "table head" - hlavičkovú bunku

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tabuľka</title> </head> <body> <table> <tr> <td>Zuzka</td> <td>Hrušková</td> <td>Python</td> <td>72 bodov</td> </tr> <tr> <td>Ferko</td> <td>Mrkvička</td> <td>c++</td> <td>67 bodov</td> </tr> <tr> <td>Janko</td> <td>Hraško</td> <td>c#</td> <td>58 bodov</td> </tr> <tr> <td>Katka</td> <td>Slivková</td> <td>Python</td> <td>43 bodov</td> </tr> </table> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tabuľka</title> </head> <body> <table> <tr> <th>meno</td> <th>priezvisko</th> <th>progr. jazyk</th> <th>body</th> </tr> <tr> <td>Zuzka</td> <td>Hrušková</td> <td>Python</td> <td>72 bodov</td> </tr> <tr> <td>Ferko</td> <td>Mrkvička</td> <td>c++</td> <td>67 bodov</td> </tr> <tr> <td>Janko</td> <td>Hraško</td> <td>c#</td> <td>58 bodov</td> </tr> <tr> <td>Katka</td> <td>Slivková</td> <td>Python</td> <td>43 bodov</td> </tr> </table> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tabuľka</title> </head> <body> <table> <tr> <th>umiestnenie</th> <th>meno</td> <th>priezvisko</th> <th>progr. jazyk</th> <th>body</th> </tr> <tr> <th>1. miesto</th> <td>Zuzka</td> <td>Hrušková</td> <td>Python</td> <td>72 bodov</td> </tr> <tr> <th>2. miesto</th> <td>Ferko</td> <td>Mrkvička</td> <td>c++</td> <td>67 bodov</td> </tr> <tr> <th>3. miesto</th> <td>Janko</td> <td>Hraško</td> <td>c#</td> <td>58 bodov</td> </tr> <tr> <th>4. miesto</th> <td>Katka</td> <td>Slivková</td> <td>Python</td> <td>43 bodov</td> </tr> </table> </body> </html>

neutrálne tagy div a span

Všetky tagy, ktoré si doteraz spoznal majú presne určený cieľ a použitie. Niekedy by sa ale hodil element, ktorý v podstate nič konkrétne nerobí. Napríklad keď potrebuješ "zbaliť" niekoľko iných elementov, aby si s nimi mohol narábať ako so skupinou. Alebo v prípade, že by si chcel nejakú časť stránky špeciálne naformátovať. vtedy by sa ti hodil tag (element), ktorý nemá sám od seba žiadnu špeciálnu funkciu alebo žiadne špeciálne vlastnosti. Kvôli tomu boli do jazyka html doplnené neutrálne tagy div a span. Sú to tagy bez vlastností - neutrálne tagy.

div -	je blokový element. Pred ním aj za ním vznikne zalomenie riadku, okolo seba negeneruje žiadne medzery a môžeš do neho umiestniť akékoľvek iné elementy.
span -	je riadkový element. Ostáva vždy v tom riadku na ktorom je napísaný. Neslobodno do neho vkladať blokové elementy. Riadkové môžeš, ale nezvykne sa to robiť (neskôr sa dozvieš prečo)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>div_span</title> <style> div{border-style: solid; border-width: 1px; margin: 5px;} span{color: red;} </style> </head> <body> <h4>Neutrálne tagy - div a span:</h4> <p> blokový element <b>div</b> je zvýraznený orámovaním<br> riadkový element <b>span</b> je zvýraznený červeným písmom </p> <div>blokový element DIV1</div> <div> element DIV2 a <span>riadkový element "SPAN1"</span> vložený do DIV2 <div>DIV3 vložený do DIV2 a <span>SPAN2</span> vložený do DIV3</div> <div>DIV4 vložený do DIV2 a <span>SPAN3</span> vložený do DIV4</div> </div> <div>blokový element DIV5</div> <h4>Neutrálny tag - span v kombinácii s odstavcom:</h4> <p>Text odstavca <span>tu je riadkový element span</span> text odstavca.</p> </body> </html>

V poslednom príklade som na zvýrazmenie elementov div a span použil nastavenie štýlu pre tieto elementy. Urobil som to v elemente head pomocou tagu style. Doteraz sme sa o možnostiach formátovať celé elementy nebavili. Avšak keď už pre teba nie je problém vyskladať si vlastnú webovú stránku, keď už vieš použiť elementy, ktoré poznáš, prichádza vhodný čas stať sa dizajnérom a pohrať sa s nastavením štýlu jednotlivých elementov.
Na scénu čochvíľa príde jazyk CSS.