Můj pracovní webík

... aneb HTML a CSS pro starší a nechápavé ...

ODKAZY

odkazy neboli hyperlinky nebo též hypertexty jsou základním a nejtypičtějším prvkem webu
pro vložení odkazu slouží v XHTML element <a> (anchor, kotva)
jeho povinným atributem je atribut href, který určuje URL, na které se v případě kliknutí přemístíte (jiná webová stránka, e-mail, FTP server)

URL
Uniform Resource Locator
adresa zdroje na internetu

absolutní URL obsahuje plnou URL adresu
relativní URL je zkrácené - možno použít, jestliže je část URL adresy současné i odkazované stejná
relativní URL jsou vždy vztaženy k adresáři, kde je uložen aktuální HTML dokument
chceme-li se odkázat na dokument v nadřazeném adresáři, musíme použít na začátku relativní adresy 2 tečky (../)
pokud máme několik úrovní podadresářů, stává se používání relativních URL velmi nepřehledné
chceme-li používat relativní URL i v případě několika úrovní podadresářů, můžeme si nastavit jakousi "základní" URL
k tomu slouží element <base />, který je umístěn v hlavičce HTML dokumentu
více o tomto elementu v části ŠABLONA

pokud však někdy změníme tuto "základní" URL, je bezpodmínečně třeba překontrolovat všechny relativní odkazy
v případě používání absolutních URL toto odpadá
výhoda relativních a "základní" URL např. při změně domény - stačí změnit "základní" URL, relativní URL se nemění

naprostá většina hypertextových odkazů na stránce je vytvářena elementem <a>
mezi oběma tagy <a> a </a> je text, který popisuje, kam odkaz směřuje
URL musí být uzavřené v uvozovkách

základní tag pro odkaz:

<a href="URL">popisek odkazu</a>

máme-li dlouhý HTML dokument s mnoha sekcemi, můžeme vytvořit odkazy na různé sekce právě zobrazeného dokumentu
nejprve označíme sekci nebo část dokumentu jménem
provedeme to pomocí elementu <a> s atributem name
toto však nelze v XHTML, protože nepodporuje atribut name - zde místo tohoto atributu slouží atribut id, který má širší uplatnění ve více elementech
atribut id však není implementován v mnoha starších prohlížečích, proto můžeme použít oba atributy najednou
název takto označené sekce může být libovolně dlouhý, vždy však musí začínat písmenem - dále můžeme použít vedle písmen i číslice, z interpunkčních znamének jen pomlčku, podtržítko, tečku a dvojtečku
chceme-li vytvořit odkaz na takto pojmenovanou sekci, jednoduše místo URL použijeme jméno sekce, před které umístíme #

odkazy na pojmenované sekce nemusí být jen v rámci aktuálního dokumentu
chceme-li odkázat z jiného HTML dokumentu jen na určitou sekci jiného HTML dokumentu, připojíme na konec URL #název_sekce (bez mezery)

místo textu popisujícího odkaz můžeme použít obrázek pomocí elementu <img />

základní tag tohoto odkazu bude vypadat takto:

<a href="URL"><img src="URL_obrázku" alt="popis" /></a>

okolo obrázku bude zvýrazněný rámeček, který návštěvníkovi říká, že jde o odkaz, na který je možné kliknout
tento rámeček je možné zrušit pomocí atributu border s hodnotou 0
toto platí jen pro XHTML Transitional
v XHTML Strict je to řešeno pomocí CSS

odkaz na e-mail

<a href="mailto:e-mailová_adresa> text</a">
případně
<a href="mailto:e-mailová_adresa><img src="URL_obrázku"></a>

odkaz na FTP

<a href="ftp:internetová_adresa_FTP_serveru">text</a>

k tomuto účelu slouží atribut target, který nastavuje cílové okno nebo rámec, ve kterém se má odkaz otevřít
pokud má hodnotu _blank (prázdný), otevře se odkaz v novém okně

pokud chceme, aby se všecky odkazy otevíraly v novém okně, můžeme atribut target="_blank" zadat rovněž v elementu <base> uvnitř sekce <head> dokumentu

automatické přesměrování (načtení jiné webové stránky) se dá provést pomocí elementu <meta>
lze jím také obnovit stejnou stránku
funkci obnovování nastavujeme pomocí atributu http-equiv="refresh"
atribut content
specifikuje za kolik sekund prohlížeč načte stránku z nové URL
pokud není jiné URL zadané, obnoví se aktuální dokument
čas zapsaný v atributu content říká, kolik sekund má prohlížeč čekat, než načte novou stránku

takto pak vypadá hlavička dokumentu:

<head>
<title>název_stránky</title>
<meta http-equiv="refresh" content="počet_sekund; url=nové_url" />
</head>

více o tomto elementu v části ŠABLONA