HTML

Úvodné rady
➢ Každá nová stránka (počiatočný súbor index.html) v samostatnom priečinku.
➢ Počiatočný súbor (úvodná stránka) musí mať názov index.html alebo index.htm
➢ Osobitný priečinok na obrázky.
➢ Ideálne je mať otvorenú stránku v PSpade a internetovom prehliadači súčasne –
použitie refresh.
➢ Alebo v PSPade používať klávesu F10 pre rýchly náhľad. Ctrl + S – rýchle uloženie
dokumentu.
➢ Názvy bez diakritiky, malými písmenami, jednoslovne (prípadne cez
,,podčiarkovník“).
➢ Písanie ,,zobáčikových zátvoriek“ pomocou ,,pravého alt“ + ,,<>“. Úvodzovky „“
pomocou shift + ô.
➢ Nastavenie kódovania (napr. UTF-8) z hlavičky zo značky META nastaviť aj
v programe na karte Kódová stránka!!!
➢ Pre lepšiu vlastnú orientáciu v kóde využívame komentáre.
<!—komentár --> - prehliadač takýto text nezobrazuje

❖ V PSPade hore na lište – možnosť nastaviť:

o číslovanie riadkov
o zalomenie kódu (zalomí riadky širšie, ako dĺžka strany)
o paleta farieb
❖ Na vlastnú stránku uviesť poznámku: ,,optimalizované na prehliadač (obľúbený - doplň) a pre rozlíšenie
(doplň)“.

Párové značky
<značka>
Obsah.
</značka>

Obsahom môže byť nielen text, odkaz alebo iný dokument, ale aj ďalšia párová značka.

<značka1>
Obsah značky 1.
<značka2>
Obsah značky 1. aj 2.
</značka2>
Obsah značky 1.
</značka1>

Pre obsah vnoreného tagu (značka2) platí, že hodnoty pre vonkajšiu aj vnútornú značku sa sčítajú. Vnorenie je treba
kontrolovať, aby nedošlo ku kríženiu tagov. Takýto zápis nie je validný.

Párová značka HEAD slúži na definíciu hlavičky. Zapisujú sa k nej značky, ktoré informujú prehliadač o vašom
dokumente.

• <TITLE> toto je titulok </TITLE> Táto párová značka sa používa na titulok stránky. Obsah textu sa zobrazí
v hornej lište prehliadača.
• META značka je nepárová a slúži na informovanie pre ostatné servery. Definujú sa tu predovšetkým kľúčové
slová, ktoré využívajú rôzne vyhľadávače alebo vyhľadávacie roboty.
<META name=“keywords“ content=“Kľúčové slová pre vyhľadávače“>
Body - nastavenia pre body platia pre celý dokument. Body sa otvára iba raz!!! (atribúty nastavujeme hromadne..)

Značkám sa prideľujú parametre, ktoré ovplyvnia ich vlastnosti.

<značka parameter=“hodnota“> - Hodnoty parametra sú v úvodzovkách.

Úprava textu
Veľkosť nadpisu H1 – H6
Ďalšie značky pre písmo:
o <B> - tučné o <U> - podčiarknuté o <SUB> - dolný index
o <I> - kurzíva o <SUP> - horný index
Tieto značky môžeme aj kombinovať.

<P> - párová značka, ktorá definuje odsek

Toto je príklad, ktorý ukazuje ako s textom môžeme pracovať.

Text na novom riadku <BR>

Pokračovanie textu na novom riadku<BR><BR>
Text posunutý o dva riadky.

Ukážka rôzneho textu:

A jeho kód:

Zoznamy
<OL> - číslovaný zoznam
<UL> - nečíslovaný zoznam
<LI> - párová značka, ktorá určuje položku zoznamu

<UL type=“typ odrážok“>, <LI type=“typ odrážok“>

Parameter TYPE umožňuje upravovať vzhľad odrážok v nečíslovanom zozname. Môže sa použiť buď pre celý zoznam
(UL), alebo len pre položku (LI).

• DISC – plný krúžok • SQUARE – štvorec • CIRCLE – kružnica

<UL type="disc">
<LI>Prvá položka.</LI>
<LI>Druhá položka.</LI>
<LI type="square"> Tretia položka zoznamu.</LI>
<LI type="circle"> Štvrtá položka.</LI>
</UL>

<OL type=“typ označovania“>, <LI type=“typ označovania“>

Číslovaný zoznam umožňuje definovať hodnoty TYPE rovnako ako nečíslovaný.

▪ 1 – arabské číslice ▪ A – veľké písmená ▪ I – veľké rímske číslice

▪ a – malé písmená ▪ i – malé rímske číslice
<OL type="I">
<LI>pondelok <!-- prva položka zoznamu -->
<OL type="1"> <!-- začiatok vnoreneho zoznamu -->
<LI>prva položka v pondelok</LI>
<LI>druha položka v pondelok</LI>
</OL> <!-- koniec vnoreneho zoznamu -->
</LI>
<LI>utorok <!-- druha položka zoznamu -->
<OL type="a"> <!-- začiatok vnoreneho zoznamu -->
<LI>prva položka v utorok</LI>
<LI>druhá položka v utorok</LI>
<LI>tretia položka v utorok</LI>
</OL> <!-- koniec vnoreneho zoznamu -->
</LI>
</OL>

<OL start=“hodnota“> - napr. <OL type=“1“ start=“2“>

Parameter START môžeme použiť len u číslovaných zoznamov. Určuje, od ktorej položky sa začne zoznam počítať.

Definičný zoznam – používa sa tam, kde je potrebné vysvetliť určitý pojem – definíciu.
<DL> - párová značka pre označenie začiatku a konca zoznamu
<DT> - párová značka, ktorá definuje pojem, výraz, termín, ...
<DD> - párová značka, kde je konkrétna definícia pojmu, výrazu, termínu, ...

<DL>
<DT><b>termín 1</b></DT>
<DD>
<p>Tu nasleduje vysvetlenie obsahu termínu 1</p>
</DD>
<DT><b>termín 2</b></DT>
<DD>
<p>Tu nasleduje vysvetlenie termínu 2</p>
</DD>
</DL>

DÚ web2
Tabuľka

TABLE – definícia tabuľky

TR – definícia riadkov tabuľky
TD – definícia bunky tabuľky

<TABLE border="1">
<TR> <TD>bunka1.1</TD> <TD>bunka2.1</TD> <TD>bunka 3.1</TD> </TR>
<TR> <TD>bunka 1.2</TD> <TD>bunka 2.2</TD> </TR>
</TABLE>

<TD width="px" height="px"> - nastavenie rozmerov bunky width (šírka), height (výška)
Parametre výšky a šírky, ktoré sa zadajú u niektorej z buniek, preberajú automaticky bunky ostatné a to v riadku
výšku a v stĺpci šírku. Pokiaľ sa parametre nezadajú, riadi sa šírka a výška buniek podľa ich obsahu.

<TABLE border="1">
<TR> <!--1. riadok tabuľky-->
<TD width="150" height="100">Prvá bunka</TD>
<TD>Druhá bunka</TD>
<TD>Tretia bunka</TD>
</TR>
<TR> <!--2. riadok tabuľky-->
<TD>Prvá bunka</TD>
<TD height="50">Druhá bunka</TD>
<TD>Tretia bunka</TD>
</TR>
</TABLE>

Pri zadávaní parametrov veľkostí buniek a šírky tabuľky môžu nastať dva prípady:
▪ Ak je šírka tabuľky menšia ako celkový súčet šírok buniek, zmenšia sa šírky buniek tak, aby sa vošli do tabuľky a pomer
ich veľkostí ostal zachovaný.
▪ V prípade, že je šírka tabuľky väčšia, dopočítajú sa šírky buniek doprava tak, aby vyplňovali celú šírku tabuľky, pričom sa
opäť zachovajú zadané pomery veľkostí.
Text v bunkách ale vyplňuje bunku doprava len do zadanej šírky!

<TD colspan=“počet buniek“ rowspan=“počet buniek“> - Parameter colspan umožňuje prekrývanie buniek
v stĺpcoch, parameter rowspan umožňuje prekrývanie buniek v riadkoch. Hodnota ,,počet buniek“ bude udávať
výslednú veľkosť bunky ako celkový súčet buniek a to buď v riadku alebo stĺpci.

<TABLE border="1">
<TR>
<TD colspan="3">Prekrývanie buniek riadku - COLSPAN</TD>
</TR>
<TR>
<TD>Prvá bunka</TD>
<TD rowspan="2">Prekrývanie buniek v stĺpcoch - ROWSPAN</TD>
<TD>Tretia bunka</TD>
</TR>
<TR>
<TD>Prvá bunka</TD>
<TD>Tretia bunka</TD>
</TR>
</TABLE>
Obrázky
<IMG src="Obrazky/Pozadie.jpg">
<IMG alt=""> - popis obrázka, možnosť nechať prázdne ale nutné aby bola stránka validná
<DIV align="LEFT"> <IMG src="Obrazky/Pozadie.jpg" alt="" title="" > </DIV>
LEFT – zarovnáva obrázok vľavo, ostávajúci text obteká obrázok vpravo
RIGHT, CENTER, prípadne TOP, BOTTOM, MIDDLE (funguje?)

<DIV> -označenie časti stránky, pre ktorú platí rovnaké formátovanie. Používa sa zo štýlmi.

... <!—normálne odseky -->

<div style="color: maroon">
... <!-- mnoho rôznych odsekov, všetky budú hnedé -->
</div>
...<!-- a už je to zase normál -->

Niekedy je potrebné sformátovať kus textu, ktorý nie je vymedzený žiadnym konkrétnym tagom. Preto sa tam vloží
nový tag. Ak zahrňuje formátovaná oblasť viacero odsekov, použije sa párový tag <div>. V rámci jedného odseku sa
ale používa <span>, pretože <div> by to roztrhal do viacero odsekov.

<p>Normálny text a <span style="font-style: italic">text kurzívou</span> a zase normálny text.</p>

viac info na: http://www.jakpsatweb.cz/div-span.html

DÚ č.3 – Vlastný rozvrh hodín + vložiť ľubovoľný, ešte nepoužitý obrázok na stránku prvej DÚ.

Rozdelenie dokumentu horizontálnou linkou

<HR size=“hodnota“> - hodnota definuje hrúbku čiary
<HR width=“px/%“> - definuje šírku čiary
<HR color=“farba“> - nastavenie farby linky (implicitne je sivá)
<HR noshade> - vypne implicitné tieňovanie
<HR align=“poloha“> - možnosti zarovnania čiary (LEFT, RIGHT, CENTER)

<hr size="6" width="150" color="yellow" align="CENTER">

Precvičovanie jednotlivého učiva na jednoduchých príkladoch (viď. 01 prváci – precvičovanie).