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

Tipy a triky: Ako na snímku obrazovky na akomkoľvek počítači s Windows?

02.12.2016 00:13

Ak snímky obrazovky robíte často apotrebujete napríklad funkcie na posun stránok alebo snímanie zobrazenia pri vyššom rozlíšení displeja, zrejme používate nejakú špecializovanú aplikáciu. Väčšina použ ...

Ako na to 1

Tipy a triky: Ako aplikácii prednastaviť spúšťanie s administrátorskými právami?

30.11.2016 00:10

Väčšina aspoň trochu skúsenejších používateľov vie, že aj keď máte na operačnom systéme Windows vytvorený administrátorský účet, aplikácie pre bezpečnosť nefungujú vždy splnými administrátorskými práv ...

Ako na to 2

Tipy a triky: Ako vypnúť uzamykaciu obrazovku vo Windows 10?

29.11.2016 00:10

Rozčuľuje vás, že pred každým prihlásením doúčtu vášho počítača musíte prejsť uzamykacou obrazovkou? Windows 10 na tejto obrazovke ukazuje čas,dátum anejakú zaujímavú fotografiu zrôznych kútov sveta. ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá