Jak vytvářet www stránky - 6. díl

V dnešním díle se podíváme na to, jak lze vytvořit seznamy s odrážkami, a krátce také nahlédneme do světa hyperlinkových odkazů, které jsou alfou a omegou Internetu.
Vítejte u šestého pokračování našeho seriálu, který vás provede základy vytváření webových stránek. V dnešním díle se podíváme na to, jak lze vytvořit seznamy s odrážkami, a krátce také nahlédneme do světa hyperlinkových odkazů, které jsou alfou a omegou Internetu.

Nečíslovaný seznam
Nečíslovaný seznam uvedete tagem <UL> (UL=unnumbered list), každou položku seznamu pak nepárovým tagem <LI> (LI=list item), vše nakonec uzavřete uzavíracím tagem </UL>. Lépe bude vysvětlit si to celé na názorném příkladu:

<UL>
<LI>první
<LI>druhá
<LI>třetí
<LI>čtvrtá
</UL>
Výsledek bude vypadat následovně:

  • první
  • druhá
  • třetí
  • čtvrtá
Jak do tagu <UL>, tak i do tagu <LI> lze uvést parametr TYPE určující, jak budou vypadat odrážky. Tento parametr může mít tři následující hodnoty:

TYPE=disc - prázdné kolečko

TYPE=circle - plné kolečko

TYPE=square - čtverec

Číslovaný seznam
Číslovaný seznam se od nečíslovaného liší především tím, že jej uvádíte tagem <OL> (ordered list) a ukončujete </OL>. Postup použití je stejný jako v předcházejícím případě, pouze jsou místo grafických odrážek zobrazeny číslice nebo písmena.

Příklad:

<OL>
<LI>první
<LI>druhá
<LI>třetí
<LI>čtvrtá
</OL>
A výsledek bude vypadat takto:

  1. první
  2. druhá
  3. třetí
  4. čtvrtá
Podobně jako u tagu <UL> můžete parametrem TYPE definovat typ číslování:

TYPE=A velká písmena (A, B, C ...)
TYPE=a malá písmena (a, b, c ...)
TYPE=I velké římské číslice (I, II, III ...)
TYPE=i malé římské číslice (i, ii, iii ...)
TYPE=1 arabské číslice (1, 2, 3 ...)

Chcete-li číslovat seznam od jiného než implicitně prvního čísla nebo písmena (1, I, a, A, ...), můžete použít Parametr START. Oba parametry si názorně vysvětlíme na příkladě:

<OL TYPE=a START=3>
<LI>Jak sami vidíte, tento seznam začíná písmenem c
<LI>protože parametr TYPE má hodnotu a
<LI>a parametr START hodnotu 3
</OL>
Výsledek vidíte zde:

  1. Jak sami vidíte, tento seznam začíná písmenem c
  2. protože parametr TYPE má hodnotu a
  3. a parametr START hodnotu 3

Vnořování seznamů
Seznamy lze do sebe libovolně vnořovat. Můžete vytvořit vnořený číslovaný i nečíslovaný seznam, stejně jako vnořený seznam kombinující jak číslované, tak nečíslované položky.

<OL type=1>
 <LI>První položka číslovaného seznamu, který se dále větví
 <UL type=circle>
  <LI>na další
  <LI>a další nečíslované položky
 </UL>
 <LI>Tady máme druhou položku
 <LI>Tady třetí
 <LI>A tady čtvrtou, která se větví
 <OL type=a>
  <LI>na další
  <LI>a další
  <LI>a ještě jednu číslovanou položku
 </OL>
</OL>
Výsledek by měl vypadat takto:

  1. První položka číslovaného seznamu, který se dále větví
    • na další
    • a další nečíslované položky
  2. Tady máme druhou položku
  3. Tady třetí
  4. A tady čtvrtou, která se větví
    1. na další
    2. a další
    3. a ještě jednu číslovanou položku
Důležité je nezapomínat na správné uzavírání párových tagů - ke každému uvozovacímu tagu musí existovat i tag ukončovací.

Hyperlinkové odkazy
Element <A> (anchor neboli kotva) je základním kamenem webových stránek. Umožňuje vytváření hyperlinkových odkazů, které mohou směrovat na jinou stránku nebo soubor. Právě díky vzájemnému protkání stránek hyperlinkovými odkazy bývá Internet často označován slovem pavučina (původ pochází z anglického slovíčka web). Dnes se naučíme vytvořit jednoduchý odkaz na jinou www stránku.

Element <A> má následující základní strukturu:

<A HREF="soubor, na který se odkazuje">popis odkazu</A>

Místo textu soubor, na který se odkazuje vložíte mezi uvozovky adresu na stránku nebo soubor, na niž odkazujete. Odkazujete-li na stránku (tj. dokument s příponou htm, html, asp, ...), otevře se po kliknutí tato stránka v okně prohlížeče. Jestliže odkazujete na soubor, zachová se browser podle toho, jakou příponu má odkazovaný soubor - nabídne uložení na disk nebo spustí přidruženou aplikaci a otevře v ní zmíněný soubor.

Text popis odkazu nahradíte tím, co uvidí uživatel jako text ve svém prohlížeči.

Příklad:

po kliknutí na <A HREF="http://www.zive.cz">tento odkaz</A> přejdete na stránku Živě

Výsledek bude vypadat takto (zkuste si myší kliknout na text tento odkaz):

po kliknutí na tento odkaz přejdete na stránku Živě

Tímto jsme vytvořili odkaz na server www.zive.cz. Neodkazujeme na žádnou konkrétní stránku, takže prohlížeč bude na serveru automaticky hledat stránky index, default nebo main.

Chcete-li například vytvořit odkaz na stránku nabízející aktuální vydání britské hitparády, budete muset odkaz směrovat přesněji:

<A HREF="http://www.dotmusic.com/charts/top75singles_print.asp">Oficiální britská top 75</A>

V tomto případě odkazujete na stránku top75singles_print.asp umístěnou v adresáři charts na serveru www.dotmusic.com.

Pro tento týden si dáme pohov, ale těšte se - příště si povíme o hyperlinkových odkazech další podrobnosti. Do té doby si můžete procvičovat vytváření vnořených seznamů protknutých hyperlinky.

Diskuze (2) Další článek: Ericsson A1018s: vidět a být viděn

Témata článku: Software, Prohlížeče, Programování, Druhý typ, Položka, Str, Díl, Stráň, Číslovaný seznam, Pavučina, Omega, První parametr, Jak, Software na Heureka.cz



40 ženských erotických symbolů osmdesátých let

40 ženských erotických symbolů osmdesátých let

Vyzývavá krása, rafinovanost, nevinnost i perverzní voyeurské fantazie. Filmaři už se sexu ve filmu nebáli, a tak dala 80. léta vzniknout řadě kultovních ženských erotických symbolů.

Marek Čech
Filmy a seriály
Tohle nejsou Jedenáctky, ale Linux. Windowsfx 11 opisuje opravdu důkladně
Lukáš Václavík
Windows 11Operační systémyLinux
Korpusový vyhledávač Kontext Alpha je tajná zbraň každého milovníka češtiny

Korpusový vyhledávač Kontext Alpha je tajná zbraň každého milovníka češtiny

** Český národní korpus analyzuje tisíce textů ze všech oblastí života ** Vyhledávač Kontext v něm umí dokonale vyhledávat ** Je to skvělý nástroj pro milovníky češtiny a zbraň grammar nazis

Jakub Čížek
ČeskoVyhledávače
eFootball je obrovským propadákem, Konami vydalo oficiální omluvu

eFootball je obrovským propadákem, Konami vydalo oficiální omluvu

Nový fotbálek je sice zcela zdarma, to ale na kvalitách zrovna nepřidává.

Michal Maliarov
eFootballKonami
Recenze Windows 11. Microsoft nás opíjí rohlíkem a omezuje použitelnost

Recenze Windows 11. Microsoft nás opíjí rohlíkem a omezuje použitelnost

** Oproti Desítkám významně stouply hardwarové požadavky ** Windows 11 mají nový vzhled, ale výrazně narušují workflow. ** Potěší vyhledávání, multitasking i rychlejší aktualizace

Petr Urban
Windows 11Testy