Odkazy

1. Adresa URL typu http
2. Adresa URL typu javascript
3. Absolutní a relativní adresy
4. Odkazy na určité místo dokumentu
5. Atributy značky <a>
6. Obrázky jako odkazy (na straně klienta)
7. Značka <map>
8. Značka <base>
9. Element záhlaví <meta>

1. Adresa URL typu http

Příklad použití:
Zápis: <a href="http://wwwc.spszl.cz">SPŠ Zlín</a>
Se zobrazí jako: SPŠ Zlín
Úkol: vytvořte odkaz na portál Seznamu ZDE

2. Adresa URL typu javascript

Příklad použití:
Zápis: <a href="javascript: alert('JavaScript')">JavaSkript</a>
Se zobrazí jako: JavaScript
Úkol: vytvořte odkaz typu JavaScript, který Vás přesune na předchozí stránku ( javascript:history.go(-1) ) ZDE
Toto nedělejte: Neklikat

3. Absolutní a relativní adresy

Absolutní odkaz jsme použili v 1. příkladu.
Relativní odkaz je např.:
Zápis: <a href="./babicka.html">Babička</a>
Se zobrazí jako: Babička
Úkol: vytvořte relativní odkaz na Dědečka dedecek.html ZDE

4. Odkazy na určité místo dokumentu

Příklad použití:
Zápis: <a href="./babicka.html#zaver">Babička závěr</a>
Poznámka: v souboru babicka.html je definováno návěští <a name="zaver"></a> nebo <a id="zaver"></a>
Se zobrazí jako: Babička závěr
Úkol: vytvořte relativní odkaz na Dědečka (pozor vaše relativní adresa bude jiná) dedecek.html#zaver ZDE
Poznámka: # je tzv. dvojitý křížek (hash, "štafle").

5. Atributy značky <a>

• atributy událostí

Příklad použití:
Zápis: <a href="http://www.spszl.cz" onMouseOver="window.status='Střední průmyslová škola Zlín'; return true">SPŠ Zlín</a>
Se zobrazí jako: SPŠ Zlín, po přejetí myší se zobrazí na stavovém řádku "Střední průmyslová škola Zlín".
Úkol: vytvořte podobný odkaz ZDE

• atribut style

Příklad použití:
Zápis: <a style="font-size: xx-large; color: Green;" href="http://www.spszl.cz">SPŠ Zlín</a>
Se zobrazí jako: SPŠ Zlín.
Úkol: vytvořte modrý odkaz bez velkého písma ZDE

• atribut class

Příklad použití:
Zápis: <a class="biggreen" href="http://www.spszl.cz">SPŠ Zlín</a>
Se zobrazí jako: SPŠ Zlín.
Úkol: vytvořte modrý odkaz bez velkého písma (styl se jmenuje blue ) ZDE

• atribut dir (směr zobrazování textu)

Ukázka:
Zápis: <a dir="ltr" href="http://www.spszl.cz">SPŠ Zlín!!!</a>
Se zobrazí jako: SPŠ Zlín!!!.
Zápis: <a dir="rtl" href="http://www.spszl.cz">SPŠ Zlín!!!</a>
Se zobrazí jako: SPŠ Zlín!!!.

• atribut lang (definuje jazyk, pro některé jazyky je třeba kódování stránky Unicode UTF-8)
• atribut target (určuje, kde se má odkaz zobrazit; probere me v rámcích)
• atribut title

Ukázka:
Zápis: <a href="http://www.spszl.cz" title="Střední průmyslová škola Zlín">SPŠ Zlín</a>
Se zobrazí jako: SPŠ Zlín, necháme-li myš nad odkazem zobrazí se titul.

Neprobrané atributy

• rel a rev
• charset , breflang a type
• accesskey a tabkey
• coords a shape

6. Obrázky jako odkazy (na straně klienta)

Obrázek umístěný do kotvy, příklad použití:
Zápis: <a href="http://www.spszl.cz"><img src="kolecko1.gif" width="21" height="21" alt="SPŠ Zlín"></a>
Se zobrazí jako:
Úkol: vytvořte odkaz na portál Seznamu s obrázkem kolecko2 (šířka a výška jsou 20) ZDE

7. Značka <map>

Příklad použití obrazové mapy:

<img src="svet.gif" alt="Obrázek" width="400" height="219" align="top" usemap="#obrazek"> 

<map name="obrazek">
    <area href="javascript: alert('Afrika')" alt="Afrika" shape=poly coords="13,96,59,101,76,137,79,187,18,179,1,120"> 
    <area href="javascript: alert('Severní Amerika')" alt="Severní Amerika" shape=rect coords="229,-1,399,132"> 
    <area href="javascript: alert('Jižní Amerika')" alt="Jižní Amerika" shape=poly coords="313,131,372,134,365,189,324,219"> 
    <area href="javascript: alert('Austrálie a oceánie')" alt="Austrálie a oceánie" shape=circle coords="171,184,37">
</map>

Atributy značky map class , id , style , title , lang a dir se používají stejně jako u odkazů, podobně i atributy událostí.

Atributy značky area

• alt alternativní popis
• href stejné jako u odkazů
• nohref citlivé na pohyb myši, ale neprovádí odkaz (atributy href a nohref ) nemohou být současně
• notab , taborder a tabindex varianty pro použití klávesnice
• atributy událostí stejné jako u odkazů
• atributy class , id , style , target , title , lang a dir se používají stejně jako u odkazů
• shape definuje polynom, obdelník nebo kruh

Parametr atributu shape

• polygon shape=poly coords=" x₁, y₁, x₂, y₂, x₃, y₃, x₄, y₄, ... " nebo polygon
• obdelník shape=poly rect=" x₁, y₁, x₂, y₂ " nebo rectangle
• kruh shape=poly circ=" x, y, r " nebo circle

8. Značka <base>

Značka base se používá v záhlaví a má dva atributy:

• target určuje cíl použitých odkazů v dokumentu (probereme až v rámcích)
• href udává adresu, ke které se budou vztahovat použité relativní adresy v dokumentu

9. Element záhlaví <meta>

• name , content

<meta name="keywords" content="odkazy, výuka IKT, SPŠ Zlín"> 
<meta name="description" content="Výuka IKT na SPŠ Zlín">

• http-equiv

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> 
<meta http-equiv="Content-Style-Type" content="text/css">

Poznámka: Značku <ilink> probírat nebudeme.