Odkaz (link) a atribúty
Ďaľší prvok, bez ktorého sa nemôže zaobísť takmer žiadna webstránka je odkaz (link). Poznáte to väčšinou ako tlačítko v menu, nadpis na ktorý sa dá kliknúť (na článok), odkaz na video, obrázok alebo hocičo iné, čo nás niekam presmeruje (zobrazí niečo iné, inú stránku). Charakteristický je vo väčšine tým, že po prejdení myšou cez tento element sa kurzor myšky (šípka) zmení na prst (ukazovateľ – pointer). Často sa nejako aj celý element zvýrazní (podčiarknutý text, zmena farby tlačítka, okraje okolo obrázka a pod.).
Tento element sa používa ako prepojenie na niečo iné, jednoducho odkazuje na niečo iné, vo väčšine na nejaký objekt alebo inú stránku. Najčastejšie je odkazom položka v menu (odkazy na podstránky), reklamný banner (obrázok s reklamou), rôzne ovládacie tlačítka (dopredu, dozadu, lupa na zväčšenie), nadpis článku (ktorý nás presmeruje na stránku, kde si môžeme pozrieť celý obsah článku), ale takisto to môže byť len odkaz, ktorý niečo vyvolá na aktuálnej stránke a nikde inde nás nepresmeruje. Možno ste sa zamysleli, ako daný odkaz vie, na čo nás má presmerovať, čo má zobraziť alebo čo sa má vykonať.
Každá webstránka je identifikovateľná unikátnou (jedinečnou) URL adresou. URL adresa je webová adresa tak ako ju poznáme, skrátka to, čo píšeme do hornej lišty, aby sa nám zobrazila stránka, ktorú chceme navštíviť (napríklad www.google.sk, www.sme.sk alebo www.w3schools.com/html/tryit.asp?filename=tryhtml_default na ktorej ste zrejme teraz). Ohľadom URL adresy sa ešte budeme viac baviť neskôr. Nateraz nám ale stačí pochopiť to, že všetko prístupné cez internet má svoju vlastnú jedinečnú URL adresu. Jedinečnú znamená, že napríklad adresa www.google.sk bude vždy ukazovať na konkrétnu jednu stránku, resp. na server, na ktorom je daná stránka uložená. Nikdy nemôžu mať dve rôzne stránky alebo prvky tú istú url adresu. Ak si zoberieme napríklad populárny portál sme.sk, po zadaní tejto adresy sa zobrazí domovská (úvodná) stránka tohto portálu. Ak však klikneme na hocičo na tejto stránke (napríklad na položku šport v hlavnom menu hore), všimnite si, že URL adresa sa zmení (http://sport.sme.sk/?ref=menu). Táto nová URL adresa prislúcha k aktuálnej stránke, ktorú práve vidíte. Ak znova kliknete na niečo z tejto stránky, URL adresa bude vyzerať znova inak. Pretože každá stránka a takisto aj podstránka má svoju vlastnú URL adresu.
A práve URL adresa bude pre nás kľúčom pri presmerovaní niekam pomocou odkazu. Tento element má párovú značku a (anchor – kotva, ukotvenie), ktorá štandardne obaluje zobrazený text (podobne ako tagy b, i atď). Text ohraničený týmto tagom je aj samotným odkazom, čiže prvkom, na ktorý sa dá kliknúť. V podstate by náš jednoduchý odkaz mohol vyzerať takto:
Ukazka odkazu:<a>Tento text je link</a>
Ak si ale vyskúšate tento kód, uvidíte, že s daným textom sa nič nedeje. Nezmenil sa jeho výzor, keď prejdeme myšou nezmení sa kurzor a takisto sa na ten text nedá kliknúť. Je to preto, pretože náš element musí obsahovať aj informáciu, kam nás má presmerovať resp. na čo odkazuje. Tu sa stretávame prvýkrát s pojmom atribút (attribute - vlastnosť) elementu/značky (tagu). Atribút je vlastnosť (option), ktorá rozširuje informáciu o danom elemente. Niektoré elementy s rovnakou značkou sa podľa rôznych atribútov (akokeby svojich vlastných nastavení) odlišujú od seba správaním, výzorom, funkcionalitou a podobne. Atribúty sa zapisujú v otváracom tagu elementu, za identifikátorom značky (p, b, a a podobne) a oddeľujú sa medzerou. Spôsob zápisu je identifikátor atribútu, znamienko rovná sa (=), dvojité úvodzovky (''), hodnota atribútu a nakoniec dvojité úvodzovky (''). Kód tagu s atribútmi vyzerá takto : <p atribut1=''hodnota'' atribut2=''hodnota2''></p>. Atribút pre tag a, ktorý určuje cieľ odkazu, má meno href (hypertextová referencia - hypertext reference) a jeho hodnotou je URL adresa (webstránky, obrázku a pod.). Týmto spôsobom si v podstate vieme na našej stránke vytvoriť odkazy na čokoľvek, k čomu vieme URL adresu (napríklad ku všetkému, čo máte zobrazené v prehliadači, stačí skopírovať URL adresu z lišty pre zadávanie adresy). Poďme si to teda vyskúšať :
Ukazka odkazu na stranku: <a href="http://www.w3schools.com">Tento text je link</a>
<br>
Odkaz na obrazok : <a href="http://www.htmlandcssbook.com/images/press/book-paragraph.jpg">Klikni sem</a>
<br><br>
<a href="http://images.boomsbeat.com/data/images/full/30918/horse_2-jpg.jpg">Úsmev !!!</a>
Pri tomto tagu sa naučíme používať ešte dva atribúty. Veľmi používaný atribút, ktorý sa dá aplikovať na viaceré tagy, je titulok (nápoveda – title). Určite to poznáte, keď sa nad nejaký element na stránke (odkaz, obrázok atď.) zobrazíte myšou a po chvíľke sa zobrazí malý rámček nad elementom s nejakým textom. Väčšinou je to text, ktorý nám má bližšie priblížiť, čo sa stane, ak na daný odkaz klikneme resp. kam nás odkaz presmeruje alebo sa nám snaží bližšie popísať napríklad obrázok a podobne. Jeho hodnotou býva spravidla text. V nasledujúcej ukážke použijeme najskôr atribút title ako bližšiu špecifikáciu odkazu a v druhom prípade ako vysvetlenie skratky :
<a href="http://www.w3schools.com" title="Ak kliknes, pojdes na stranku w3schools!">Ukaz sem mysou!</a>
<br>
<p>Zakladom web developera je ovladat jazyk <b title="HyperText Markup Language">HTML</b>.</p>
Druhý atribút, ktorý si vysvetlíme, sa používa iba s tagom a. Možno ste si všimli, že pri prezeraní internetu a klikaní na odkazy rôzneho druhu, sa ich obsah (cieľ) zobrazí nie vždy rovnako. Napríklad keď klikneme na odkaz na nejakú stránku, tak sa daná stránka niekedy zobrazí v tej istej aktuálne otvorenej/zobrazenej karte prehliadača a niekedy sa otvorí v novej karte prehliadača. Toto správanie určuje hodnota v atribúte target (cieľ). Defaultne (štandardne) sa cieľ zobrazí v aktuálne otvorenej karte, toto správanie zaručuje hodnota target atribútu _self (v sebe samotnom). Ak použijeme hodnotu _blank (prázdny), otvorí sa cieľ na novej karte prehliadača. Simulátor má niektoré obmedzenia, ak si chcete vyskúšať zobraziť hocijakú inú stránku podľa vášho gusta, musíte použiť hodnotu atribútu target _top. Táto možnosť otvorí stránku ako novú stránku v akutálnej karte (vysvetlíme si neskôr rozdiel oproti _self) :
<a href="http://www.w3schools.com/">Otvorim sa v tom istom</a>
<br>
<a href="http://www.w3schools.com/" target="_blank">Otvorim sa na novej karte</a>
<br>
<a href="http://www.google.sk" target="_top">Otvorim sa ako nova stranka v tomto okne</a>