Image
1.6.2016 0 Comments

Vytvárame WWW stránky / 3. časť

Späť na úvod >> Späť na seriál

Vítam vás pri tretej časti nášho seriálu o vytváraní WWW stránok v jazyku HTML. O čom bude? Ukážeme si prácu s nadpismi, vytvoríme zoznamy s odrážkami a vysvetlíme jednu z najdôležitejších vecí – tvorbu hypertextových odkazov.  

Práca s nadpismi
V predchádzajúcej časti sme si vysvetlili, ako meniť veľkosť nadpisov pomocou tagov <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Ako ste si určite všimli, nadpisy sú vždy zarovnávané vľavo. Teraz si ukážeme, ako ich zarovnať vľavo (left), vpravo (right) , na stred (center) a do bloku (justify). So zarovnávaním do bloku (justify) sa nestretávame na veľkom množstve stránok, pretože bolo zavedené až štandardom HTML 4.0 a vie o ňom len málo ľudí. Tu sú príklady na zarovnávanie: 

<H2 align="left">vľavo</H2>

vľavo

<H2 align="right">vpravo</H2>

vpravo

<H2 align="center">na stred</H2>

na stred

<H2 align="justify">do bloku</H2>

do bloku

Nadpisy majú ešte jednu výhodu. Automaticky pred nimi a za nimi nasleduje prechod na nový riadok.
Príklad:
prvý riadok <H2> nadpis </H2> druhý riadok

Ukážka:
prvý riadok
nadpis
druhý riadok

Ako sme už uviedli v predchádzajúcej časti, s nadpismi treba zaobchádzať veľmi opatrne a najmä nadpis <H1> treba použiť pre lepšiu prehľadnosť na stránke iba raz – ako názov stránky.
Toľko nadpisy a teraz prejdime k zoznamom. 

Číslovaný zoznam
Číslovaný zoznam sa uvádza tagom <OL> (ordered list) a ukončuje </OL>. Položky v tomto zozname sa uvádzajú tagom <LI>. Každá položka v tomto zozname je označená číslom alebo písmenom. 

Príklad:

<OL>
<LI>raz 
<LI>dva
<LI>tri
</OL>  

Výsledok príkladu:

  1. raz 
  2. dva
  3. tri

Ako vidíme na výsledku príkladu, všetky položky zoznamu sú označené číslami. Označovanie položiek v zozname môžeme definovať parametrom TYPE podľa tejto tabuľky:

TYPE=A

veľké písmená (A, B, C ...)

TYPE=a

malé písmená (a, b, c ...)

TYPE=I

veľké rímske číslice (I, II, III ...)

TYPE=i

malé rímske číslice (i, ii, iii ...)

TYPE=1

arabské číslice (1, 2, 3 ...)

Predvolene sú položky v tabuľke číslované od prvého čísla (písmena). Ak chceme číslovať napríklad od tretieho písmena abecedy, použijeme parameter START s hodnotou 3.

Príklad:      

<OL TYPE=a START=3>
<LI>raz 
<LI>dva
<LI>tri
</OL>  
 

Výsledok vyzerá takto:

  1. raz 
  2. dva
  3. tri

Vysvetlenie: položky v zozname sú číslované písmenami, pretože parameter TYPE je nastavený na a., položky sú číslované od písmena c, pretože parameter START je nastavený na 3 a c je tretie písmeno abecedy.

Nečíslovaný zoznam
Nečíslovaný zoznam sa líši od číslovaného najmä tým, že sa uvádza tagom <UL> (UL=unnumbered list) a končí </UL>. Položky sú takisto uvádzané tagom <LI>. 

Príklad:

<UL>
<LI>raz 
<LI>dva
<LI>tri
</UL>

Výsledok :

  • raz 
  • dva
  • tri

Aj pri nečíslovanom zozname môžeme použiť parameter TYPE. Pri tomto zozname je možné použiť tieto hodnoty:
TYPE=disc – plné koliesko
○ TYPE=circle – prázdne koliesko
■ TYPE=square – štvorec

Vnorené zoznamy
Číslované zoznamy môžeme ľubovoľne kombinovať. Môžeme napríklad vnoriť číslovaný do nečíslovaného zoznamu. Dostaneme kombináciu číslovaných a nečíslovaných položiek.

Príklad:

<OL type=1>
   <LI>Prvá číslovaná položka
<UL type=circle>
   <LI>nečíslovaná
   <LI>ďalšia nečíslovaná 
</UL>
    <LI>Druhá číslovaná položka
    <LI>Tretia
    <LI>Štvrtá rozvetvená 
<OL type=a>
     <LI>na prvú
     <LI>druhú
     <LI>a tretiu položku
</OL>
</OL>

Vysledok príkladu  :

  1. Prvá číslovaná položka
    • nečíslovaná
    • ďalšia nečíslovaná
  2. Druhá číslovaná položka
  3. Tretia
  4. Štvrtá rozvetvená
    1. na prvú
    2. druhú
    3. a tretiu položku

Upozornenie: Všetky tagy sú párové, preto by sme nemali zabúdať na ich uzatváranie. 

Hypertextové odkazy
Hypertextové odkazy sú jedným z najdôležitejších prvkov webových stránok. Ich základom je element <A> (anchor – kotva). Základná štruktúra hypertextového odkazu je takáto:
<a href="súbor, na ktorý sa odkazuje">názov odkazu</a>

Text súbor, na ktorý sa odkazuje nahradíme názvom súboru, na ktorý odkazuje. Ak je to súbor s príponou HTM, HTML, ASP, PHP alebo podobnou, otvorí sa daný súbor v okne prehliadača. Ak je to súbor iného typu, prehliadač ponúkne spustenie alebo uloženie tohto súboru alebo spustí aplikáciu, ku ktorej je daný typ súboru asociovaný.  
Text názov odkazu nahradíme slovom alebo vetou, ktorú má používateľ vidieť v prehliadači.

Príklad:
<A HREF="http://www.pcrevue.sk">tento odkaz</A>

Výsledok:

tento odkaz

Tento odkaz nás zavedie na stránku nášho časopisu. Neodkazuje na konkrétny súbor, preto bude hľadať súbor index alebo default.
Môžeme vytvoriť aj odkaz priamo na súbor na serveri.

Príklad:
<A HREF="http://www.tipyatriky.sk/win.htm">Tipy a Triky pre Windows</A>

Výsledok:

Tipy a Triky pre Windows

Tento odkaz nás zavedie na stránku servera www.tipyatriky.sk so zameraním na tipy a triky pre Windows.

Nabudúce
Do nasledujúcej časti seriálu si môžete precvičiť tvorbu zoznamov, ich vnáranie a tvorbu hypertextových odkazov. V ďalšej časti si povieme podrobnejšie o odkazoch a o obrázkoch.

Autor: Igor Kulman

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

Ako na to

CES 2017: Lenovo predstavilo nové notebooky ThinkPad X1, Miix 720 a prvý smartfón s podporou Tango - Lenovo Phab 2

03.01.2017 00:09

Lenovo odštartovala ďalší ročník veľtrhu s celou škálou nových produktov. Nová generácia produktov radu ThinkPad X1 Carbon 2017 je najľahším 14-palcovým biznis notebookom, ktorý váži len 1,14kg a obsa ...

Ako na to

Tipy a triky: Ako správne poskytovať IT pomoc a ako o ňu správne žiadať?

14.12.2016 09:40

Či už ste pokročilý používateľ počítača, ktorý často poskytuje IT pomoc známym a rodine, alebo ste to vy, kto o takúto pomoc zvyčajne žiada, ľahko sa stanete nechcenou príčinou frustrácie a obrovskej ...

Ako na to

Tipy a triky: Ako diagnostikovať a opravovať neúspešné upgrady Windows 10

14.12.2016 09:37

Microsoft prešiel s Windows 10 do celkom novej éry vývoja. Namiesto samostatných verzií Windows, vydávaných zvyčajne s odstupom dvoch až piatich rokov (XP, Vista, 7 a podobne), začal svoj systém vyvíj ...

Žiadne komentáre

Vyhľadávanie

ITSMF jar

Najnovšie videá