Image
1.6.2016 0 Comments

Vytvárame WWW stránky / 4. časť

Späť na úvod >> Späť na seriál

V predošlej časti sme začali s hypertextovými odkazmi a teraz budeme pokračovať. Uká­ žeme odkazy na časť dokumentu, ďalšie možnosti tagu <a> a povieme si niečo o grafike. 

Hypertextové odkazy

Základy hypertextových odkazov už poznáme z predchádzajúcej časti. Aby však odkaz fungoval, musíme zadať správnu adresu, na ktorú odkazuje. Pri písaní odkazov rozlišujeme dva typy: absolútne a relatívne. Ako ich budeme používať? Tu platí zásada, že pri odkazoch na rovnaký server, na akom je umiestnená stránka, sa používajú relatívne odkazy a na iné servery odkazujú absolútne odkazy. Aký je medzi nimi rozdiel?

Vezmime si, že máme súbor stranka.htm na serveri www.pcrevue.sk. Jeho adresa je teda www.pcrevue.sk/stranka.htm. V ňom chceme vytvoriť odkaz na súbor index.htm na tom istom serveri. Môžeme použiť relatívny alebo absolútny odkaz.

l relatívny: <a href="index.htm">
l absolútny: <a href="http://www.pc revue.sk/index.htm">

Keďže sme si povedali pravidlo, podľa ktorého sa odkazy na stránky na tom istom serveri udávajú relatívne, použijeme prvú možnosť. Keby bol súbor, na ktorý chceme odkázať, v nejakom adresári, použili by sme takúto relatívnu cestu:

 l relatívne: <a href="spravy/index.htm">
l absolútne: <a href="http://www.pcrevue.sk/spravy/index.htm"> 

Opačný prípad je, ak je náš súbor, z ktorého odkazujeme, v nejakom podadresári a chceme odkázať na súbor o úroveň vyššie. Náš súbor je na adrese www.pcrevue.sk/serial/ stranka.htm. Chceme odkázať na www.pcrevue.sk/index.htm. Opäť to môžeme urobiť dvoma spôsobmi:

 l relatívne: <a href="../index.htm">
l absolútne: <a href="http://www.pcrevue.sk/index.htm">

V praxi sa však využívajú najmä relatívne odkazy a absolútne iba vtedy, ak sú nevyhnutné (pri odkaze na stránku na inom serveri).

Hypertextové odkazy na jednotlivé časti dokumentu

Ak chcete svoj dokument z nejakých dôvodov rozdeliť na viac častí, použijete práve túto voľbu. Časti dokumentu označíte pomocou tagu <A name="názov časti">. Vysvetlíme si to na nasledujúcom príklade:

V prvom rade si potrebujeme definovať názvy častí. V príklade sú to časti s názvami 1cast, 2cast a 3cast. Definujeme ich pomocou spomínaného tagu <A name>. Do týchto častí vložíme požadovaný text a pokračujeme tvorbou hypertextových odkazov. Tie sa tvoria štandardným tagom <A href> s tým rozdielom, že namiesto názvu súboru.prípona použijeme #názov časti. Napríklad <A href="#1cast">.

Ďalšie možnosti tvorby odkazov

Tag <A href> má ešte niekoľko možností:

l TITLE – je to titulok, ktorý sa zobrazuje, ak návštevník stránky podrží dlhšie myš nad odkazom.

Príklad: <a href="http://www.itnews.sk" title="Denne aktualizované počítačové
spravodajstvo">

l TARGET – používa sa najmä pri stránkach obsahujúcich rámy (frames), keď definujú, v ktorom ráme sa má stránka zobraziť. Pri stránkach bez rámov sa používa  parameter _blank. Ten spôsobí, že sa stránka otvorí v novom okne.

Príklad: <a href="http://www.itnews.sk" target="_blank">

l ACCESSKEY – používa sa na zjednodušenie prístupu. Pomocou neho môžete odkazu priradiť klávesovú skratku Alt + písmeno.

Príklad: <A href="http://www.itnews.sk" accesskey="i">IT News</A>

Internetová grafika

Aké by boli naše stránky, keby boli bez grafiky? Dá sa povedať, že grafika je nevyhnutnosť, ale netreba to preháňať. Začiatočníci väčšinou robia chyby v tom, že to s grafikou preháňajú. Predstavme si stránku, na ktorej blikajú všetky tlačidlá, cez obrazovku z času na čas prebehne psík... Jednoducho úplne nevkusná stránka. A ani rýchlosť jej načítavania nie je najvyššia. Niekedy dosiahnete lepší efekt správnym skombinovaním písma a fa­ rieb. Pri používaní grafiky treba dbať na použitie správneho formátu a optimalizáciu. Internetové prehliadače bežne podporujú formáty JPEG a GIF. Novšie podporujú aj pomaly sa rozbiehajúce PNG.

 GIF l bezstratová kompresia – tento formát sa hodí najmä pre čiarovú grafiku
    l farebná hĺbka je obmedzená na 256 farieb
         l možnosť transparentného pozadia
         l možnosť animácie
JPEG      l stratová kompresia, ktorá využíva nedokonalosť ľudského oka, tento formát je
            vhodný najmä na fotografie
         l farebná hĺbka True Color
         l nemá možnosť transparentného pozadia
         l nemá možnosť animácie

 Každý formát sa hodí na niečo iné. Po tom, čo si správne vyberieme, treba vložiť do HTML stránky kód. Ten je vo formáte <IMG SRC="cesta k obrázku">. Tag IMG má množstvo parametrov, z ktorých najdôležitejšie sú:

l ALT – je to opis obrázka. Zobrazí sa, ak má použivateľ vypnuté zobrazovanie obrázkov. Tento text používajú textové prehliadače, zobrazí sa, ak používateľ podrží myš nad obrázkom.

Príklad: ALT=opis obrázka

l WIDTH a HEIGHT – tieto parametre určujú veľkosť obrázka. Ak nemáme tieto dva parametre definované, môže sa stať, že prehliadač najprv natiahne text a až potom začne s obrázkami. Stránka sa začne meniť, objekty preskakovať a vôbec to nevyzerá dobre. Ak sú však tieto dva parametre definované, prehliadač natiahne výslednú podobu aj s miestom pre obrázky.

Príklad: WIDTH="šírka v pixeloch" HEIGHT="výška v pixeloch"

Výsledok môže vyzerať takto <IMG SRC="images/logo.jpg" ALT="Logo našej firmy" WIDTH="100" HEIGHT="50">

Toto boli povinné hodnoty, ktoré by mal obsahovať každý obrázok. Okrem nich existuje aj parameter ALIGN a môže mať nasledujúce hodnoty:

 l ALIGN="left" – zarovná obrázok doľava
l ALIGN="right" – zarovná obrázok doprava
l ALIGN="top" – horný okraj je zarovnaný s textom, ale text pokračuje až pod obrázkom
l ALIGN="texttop" – zhodné s top
l ALIGN="middle" – stred obrázka je zarovnaný so základňou textu a zvyšok pokračuje pod obrázkom
l ALIGN="absmiddle" – stred obrázka je zarovnaný so stredom textu a zvyšok pokračuje pod obrázkom
l ALIGN="baseline" – spodný okraj obrázka je zarovnaný so základňou textu
l ALIGN="bottom" – totožné s baseline
l ALIGN="absbottom" – spodný okraj obrázka je zarovnaný so základňou najspodnejšej linky textu

 Aby sme si to vedeli predstaviť, najlepšie je vytvoriť prázdnu stránku a všetky tieto parametre si vyskúšať.

Ďalšími menej používanými parametrami sú Border (určuje šírku rámčeka okolo obrázka v pixeloch), Vspace (vertikálny odstup ostatných objektov v pixeloch) a Hspace (horizontálny odstup ostatných objektov v pixeloch).

Obrázky sa dajú, samozrejme, použiť aj v kombinácii s obrázkami a získame niečo ako „tlačidlo“. Príklad môže vyzerať takto:

<A HREF="cesta k html dokumentu"><IMG SRC="cesta k obrázku "ALT="popis obrázka" HEIGHT="výška v pixeloch" WIDTH="šírka v pixeloch"></A> Výsledok môže byť takýto:

Ako sme si určite všimli, okolo nášho obrázka s odkazom je modrý rámček. Automaticky sa pridáva z toho dôvodu, aby sa obrázky s odkazom odlíšili od obrázkov bez odkazu. Tento jav sa však dá odstrániť. Stačí, aby sme text upravili tak, že pridáme parameter Border="0", a rámček zmizne.

Záver

Januárovú časť seriálu máme za sebou. Do budúcej časti si môžete precvičovať prácu s obrázkami a možnosťami ich zarovnávania. V nasledujúcom pokračovaní sa vrátime k písmu a začneme rozsiahlu tému – tabuľky.

 

 

Autor: Igor Kulman

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

Ako na to

Ako zbaviť fotky hmly

08.12.2016 11:59

Hmla alebo dym sú často veľmi kreatívne nástroje. No všetkého veľa škodí. Fotka potom stráca kontrast a v podstate na nej nič nevidieť. Hmlu môžete neraz následnými úpravami odstrániť alebo zredukovať ...

Ako na to

Užitočné SW nástroje

08.12.2016 11:53

AllDup v4.0.3 Určenie: program na vyhľadávanie a odstraňovanie duplicitných súborov Vlastnosti: duplicitné súbory sa vyhľadávajú len na zvolených diskových jednotkách alebo len v rámci vybraných ...

Ako na to

Fotografovanie s bleskom

08.12.2016 11:47

Ak máte moderný fotoaparát so vstavaným alebo externým bleskom, zdá sa vám téma článku triviálna. Jednoducho nastavíte vhodný režim, vyberiete najlepšiu kompozíciu záberu, exponujete a o zvyšok sa už ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá