Alpin | 31. května 2007
V minulém díle jsme se zabývali úpravou textu, v tomto o trochu rozsáhlejším díle se budeme zabývat nejpoužívanějšími prvky v HTML.
4.1 Seznamy
Seznamy jsou velmi užitečné, velmi nám zpřehlední určitý výpis, takže jejich využití je jasné. Dělíme je na číslovaný, nečíslovaný a definiční. Definičním se nebudeme zabývat.
4.1.1 Číslovaný
Číslovaný seznam nám před každým řádkem automatický umístí číslo. Ohraničovacím tagem bude <OL>.... </OL> a příslušné odrážky uvnitř seznamu budou mít tyto tagy <Li>...</Li>
Ukázka:
<ol>
<li>prvni</li>
<li>druhy</li>
<li>treti </li>
</ol>
Samozřejmě, pokud by se nám nelíbili odrážky tvořený z čísel, pak si můžeme definovat jiné:
<OL TYPE=A/a/I/i/1>...</OL>
A - velká písmena (A, B, C, D atd...)
a - malá písmena (a, b , c, d atd...)
I - římské číslování (I, II, III, atd...)
i - římské číslování (i , ii, iii atd...)
1 - arabské číslování (1, 2, 3, 4 atd...)
Příklad:
Pokud bychom chtěli číslovaný seznam za pomocí římských číslic, tak napíšeme:
<OL type= l >
<Li> prvni </Li>
<Li> druhy </Li>
<Li> treti </Li>
</OL>
A všechny odrážky budou očíslovaný římskými číslicemi.
Pozn. v tomto případě I není malé písmeno L, ale velký i.
4.1.2 Nečíslovaný
Před každou položkou nám umístí puntík (defaultně). Ohraničujícím tagem bude <UL>....</UL> a odrážkovací tag bude <Li>...</Li>.
Ukázka:
<ul>
<li>počítače</li>
<li>squash</li>
<li>strategické hry, akční hry a RPG</li>
<li>spaní</li>
<li>demoralizace okolí</li>
</ul>
Pokud se vám nelíbí puntíky, tak si můžeme definovat jiné
<UL TYPE=DISC/CIRCLE/SQUARE>...</UL>
4.2 Odkazy
Co to je odkaz ? Je to zvýrazněná část textu, ve které se skrývá adresa dalších stránek. Odkazem může být nejen text, ale také obrázek (např. bannery). Naučit se pracovat s odkazem je naprosto nezbytné. Ohraničujícími tagy jsou <A href = "..." >....</A>. Odkazy dělíme na relativní a absolutní. Absolutní se používá u odkazu na jinou stránku a relativní, třeba na jiný soubor, který se nachází v aktuálním adresáři.
4.2.1 Textový odkaz
<A href="http://www. NejakyHodneDobryOdkaz.cz"> TEXT ODKAZU </A>, stačí kliknout na TEXT ODKAZU a budete přesměrování na příslušnou WWW stránku (absolutní odkaz).
Příklad:
<A href="http://www.cheater.cz "> Scorpion cheater </A>
Po kliknutí se přesuneme na stránku Scorpion cheateru.
4.2.2 Obrázkový odkaz
<A HREF="http://www.NejakyHodneDobryOdkaz.cz"> <IMG SRC="obrazek.gif > </A>
<IMG SRC="obrazek.gif > - udává nám umístění obrázku, v tomto případě se obrázek nalézá ve stejném adresáři jako soubor do které vkládáme tento kód. Jinak řečeno jde o relativní odkaz. Velmi často se stává, že obrázek leží o adresář výše, například v adresáři OBRAZKY, pak je nutné zadat:
<IMG SRC="../obrazky/obrazek.gif >.
Příklad:
<A HREF="http://www.cheater.cz"> <IMG SRC="scorpion.gif " > </A>
4.2.3 Odkaz na část dokumentu (záložka)
Někdy je třeba se pohybovat jenom v daném dokumentu a chceme nutně doporučit místo, kam by se měli uživatele podívat a proto jim tam vložíme záložku, která po kliknutí na daný hyper text přesune k požadované části.
<A HREF="WebovaStranka.html#001">druhá část</A>
...
...
<A NAME="001">
druhá část
4.3 Závěr
Na závěr jako vždy, názorný příklad. Soubor index.htm a scorpion.gif se nacházejí ve stejném adresáři. Pokud obrázek dáte jinam, je nutné upravit odkaz na obrázek.
Obsah souboru index.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> MOJE PRVNI STRANKA</TITLE>
</HEAD>
<BODY>
Nečíslovaný seznam:
<ul>
<li>Honza Svatoš</li>
<li>Mirek Moucha</li>
<li>Jakub Hladík</li>
<li>Le Hai Anh</li>
<li>Mirek Sýkora</li>
</ul>
Číslovaný seznam:
<ol>
<li>Atlantis</li>
<li>Max Payne</li>
<li>Doom 3</li>
<li>Half life 2</li>
<li>SW: KOTOR 2</li>
</ol>
<A href="http://www.cheater.cz "> Scorpion cheater </A> <br>
<br>
<br>
<A HREF="http://www.cheater.cz"> <IMG SRC="scorpion.gif" ></A>
</BODY>
</HTML>
Výsledek:
Při kliknuti na odkaz nebo na obrázek, budete přesměrování na stránky www.cheater.cz.