|
Odkazy
Tag <a>
Záložky
Základní nastavení v <BODY>
Změna barvy a jiné efekty s písmem
Změna obrázku
Tag <a>
Odkaz může vypadat takhle: <a href="neco.htm" target="_blank" title="sdfs">název
odkazu<a>.
Takže tag <a> je párový, to znamená, že musí být ukončen </a>. Definuje,
kde začíná <a> a kde končí </a>. Vše mezi tím je součástí odkazu.
Tzn. text nebo obrázek, který bude sloužit jako odkaz musí být mezi tímhle párovým
znakem.
Atribut href obsahuje adresu odkazu na stránku nebo na email. Do uvozovek
se píše relativní nebo absolutní adresa. Absolutní se myslí adresa typu
http://www.biaggi.cz a relativní adresou se myslí: index.htm a to v případě
(většinou), že odkazujete na stránku v aktuálním adresáři.
- Jestliže je stránka
(nebo soubor, CSS styl, objekt atd.) o jeden adresář dál třeba v adresáři sluzby, tak se to napíše takhle:
sluzby/index.htm.
- Jestliže je stránka o jeden adresář zpět, tak se to napíše takhle:
../index.htm.
- Jestli odkazujete na adresu někde na Internetu, tak použijte
absolutní adresu.
Jestliže chcete napsat odkaz na archiv (zip, rar), použijte absolutní nebo relativní
adresu (podle toho kde to máte), ale místo přípony .htm dejte tu vaši. Příklad:
<a href="archiv.rar">soubor archiv.rar<a>
Atribut target určuje, kde se odkaz otevře viz tabulka:
| Možnost |
Popis |
| _blank |
v samostatném okně |
| _self |
v současném okně |
Plus ještě další dva _parent a _top, ale ty tak používat nebudete
a píše se o nich v rámech. Stránku můžete
otevřít v nějakém rámu (okně).
Atribut title ukazuje popisek stránky, když se na odkaz najede myší a chvíli
počká. Může upřesňovat odkaz
Záložky
Záložka je určitý druh odkazu, který odkazuje na některé místo na konkrétní stránce.
Tzn. že může odkazovat třeba o dvacet řádků dolů na nějaký nápis.
Vytvoření záložky je jednoduché a praktické, ale musíte dávat pozor, aby se záložky
nemíchaly s odkazy na stránky, protože pak má uživatel z toho bordel a myslí si, že je na
jiné stránce, když klikl na záložku.
Důležité jsou dva příkazy
<a href="#dolu">jít dolu</a> a
<a name="dolu"></a>
První z nich dáte nato místo, kde budete klikat na odkaz a druhý dáte na místo,
kde odkaz bude mít cíl (cíl toho odkazu).Vypadá to asi takhle:
dolu
Můžete dát taky odkaz na záložku na jiné stránce.
<a href="uvod.htm#nahoru">úvod nahoře</a>
Základní nastavení v <BODY>
Jestliže nepoužijete CSS styly na barvu odkazů (doporučeno), tak máte ještě možnost
nastavit v barvu body, jestliže nic nenastavíte, tak se barva odkazu
bude chovat podle nastavení prohlížeče. Teď tedy k tomu <body>. Může
to vypadat asi takhle: <body link="#000000" vlink="#ffffff" alink="#296ffd">
link znamená: barvu nenavštíveného odkazu
vlink znamená: barvu navštíveného odkazu
alink znamená: barvu aktivního odkazu
barvy jsou v html kódu viz odkaz BARVY, ještě je
můžete napsat slovy např. blue, red, white atd.
Změna barvy a jiné efekty s písmem
Nejlépe se to udělá pomocí CSS stylu viz CSS styly,
vytvořením souboru s příponou .css.
Anebo zadáte do hlavičky dokumentu tag <style></style>
a dovnitř příkazy např. a: link { color: #000000 }, a: visited { color: #ffffff }, a: active { color: #296ffd }
Vypadá to asi takhle:
<style>
a: link { color: #000000 }
a: visited { color: #ffffff }
a: active { color: #296ffd }
</style>
+ ještě další možnosti, ale to vám už napoví tabulka:
| Možnost |
Vysvětlení |
| a: link { } |
nenavštívený odkaz |
| a: visited { } |
navštívený odkaz |
| a: active { } |
aktivní odkaz |
| a: hover { } |
co se stane když se přejede myší přes odkaz |
| a { } |
celkově odkaz |
| { Možnost } |
Vysvětlení |
| color |
barva textu |
| background-color: |
barva pozadí |
| text-decoration: |
úprava textu (none - žádná, underline - podtržení atd.) |
| text-align: |
umístění textu (center - doprostřed, right - napravo, left - nalevo) |
| FONT-SIZE: |
velikost textu (v pixelech např. 12px) |
| FONT-FAMILY: |
typ písma (Arial CE, MS Sans Serif, podobně jako ve wordu) |
| font-weight: |
možnost písma(bold - tučné) |
Změna obrázku
Změnu obrázku, můžete provést buďto s CSS a filtrem a to asi
takhle:
a:hover img { filter: gray}
to napíšete do stylopisu (tagu <style>). Tento filtr zapříčiní to, že obrázek zešedne.
Bohužel problém je v tom, že je podporován prohlížeči 4 a víš a navíc Netscape je vůbec nepodporuje.
Tak jestli chcete mít kompatibilní stránky i pro Netscape udělejte to pomocí javascriptu:
Stačí na to takováhle šablona:
<a href="stranka.htm"
onmouseover="document['nazev'].src = 'priklad2.gif' ;"
onmouseout="document['nazev'].src = 'priklad1.gif' ;">
<img src="priklad1.gif" name="nazev">
</a>
A měla by fungovat i v Netscape prohlížeči.
Nahoru
|
|
