Image
1.6.2016 0 Comments

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

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

Definovanie farby hexadecimálne
Týmto spôsobom zapisujeme farbu v tvare #rrggbb, ktorý vyjadruje pomer základných farieb (červená, zelená, modrá). Pre každú farbu sú určené dve miesta, preto sa takýmto spôsobom dá definovať 16 581 375 farieb. Ak chceme napísať červený text, použijeme tag Font s parametrom Color a hodnotou red alebo #FF0000.

Príklad: Ukážka <font color="red"> červeného textu </font>
Ukážka: Ukážka červeného textu

S farbami písma musíme byť veľmi opatrní, najmä v spojení s pozadím. Nie všetky farby písma sa hodia k určitej farbe pozadia, a ak je na stránke viacfarebné písmo, môže to návštevníka zmiasť.

Veľkosť písma
Pomocou parametra Size tagu Font sa dá meniť veľkosť písma. Môžeme to urobiť absolútne a relatívne. Absolútne určujeme veľkosť písma hodnotami 1 až 7 (pričom 3 zodpovedá veľkosti štandardného textu). Relatívne určujeme veľkosť písma vzhľadom na štandardný text. Robíme to pomocou znamienok + (väčšie ako štandardný text) a – (menšie ako štandardný text). Napríklad Size=+1. Pri relatívnom určení veľkosti môže mať parameter Size hodnoty -7 až +7.

Príklad: Normálne písmo a <Font Size=5>písmo veľkosti 5</Font>
             Normálne písmo a písmo veľkosti 5;

Príklad: Normálne písmo a <Font Size=+2>písmo o 2 väčšie  </Font>
             Normálne písmo a písmo o 2 väčšie

Pojmom štandardná veľkosť sa myslí veľkosť písma bežného prehliadača. Túto veľkosť môžeme zmeniť pomocou <BASEFONT SIZE=štandardná veľkosť>. Potom sa budú všetky relatívne veľkosti písma odvodzovať od nami definovanej.

Typ písma
Posledným parametrom tagu Font je Face, ktorý určuje font, ktorým bude písmo zobrazené. Hodnotou toho parametra je presný(!) názov písma. Ak návštevník stránky takéto písmo nemá, zobrazí sa text štandardným písmom, čo môže viesť k nežiaducim efektom. Preto sa väčšinou ako parameter uvádzajú dva až štyri typy písma. Určite nie je múdre používať fonty, ktoré má len minimálna skupina používateľov. Najpoužívanejšie fonty sú Arial, Times New Roman a Courier. V súčasnosti sa veľkej obľube teší aj Helvetica a Verdana.

Príklad :

<FONT FACE="Verdana, Arial CE">Tento text má byť zobrazený písmom Verdana, ale ak ho používateľ nemá, zobrazí sa ako Arial CE. </FONT>

Tag Font sa dá, samozrejme, skombinovať aj s inými tagmi. Zápisom <B><FONT COLOR="blue">Tučné modré písmo</FONT></B> dostaneme Tučné modré písmo.

Tabuľky
Na vytvorenie jednoduchej tabuľky nám stačia párové tagy Table, TR a TD. Tag Table označuje začiatok (resp. koniec) tabuľky, TR začiatok (koniec) riadka a TD začiatok (koniec) bunky.  HTML neobsahuje žiaden tag na určenie stĺpcov. Stĺpce sa nastavujú automaticky alebo ich môžeme ovplyvniť hodnotami v definícii bunky.

Príklad jednoduchej tabuľky s dvoma riadkami a tromi stĺpcami:

<TABLE>
<TR><TD>jablká</TD><TD>hrušky</TD><TD>slivky</TD></TR>
<TR><TD>pomaranče</TD><TD>mandarínky</TD><TD>ananásy</TD></TR>
</TABLE>

Výsledok: 

jablká

hrušky

slivky

pomaranče

mandarínky

ananásy

Ak používame Internet Explorer, tak si určite všimneme, že tabuľka je zobrazená bez mriežky. Mriežka tam síce je, ale jej hodnota je 0. Na jej nastavenie sa používa parameter Border, ktorý umiestnime do elementu Table. Ak tento parameter vynecháte, môžu rôzne prehliadače zobrazovať tabuľku s rôznymi hrúbkami mriežky. Definovanie mriežky môže byť napríklad takéto: <TABLE border=2>. Naša tabuľka nevyzerá veľmi pekne. So zvýrazneným záhlavím by vyzerala určite lepšie. Na to slúži párový tag TH, ktorým nahradíme tag TD všade, kde chceme odlíšiť obsah bunky od ostatných. Syntax tagu TH je zhodná s tagom TD.

Parameter align môžeme použiť nielen v tagu TD, určuje zarovnávanie bunky. Môžeme ho použiť aj pri tagoch Table alebo TR. V prvom prípade sa nastavuje zarovnávanie všetkých buniek v riadku, v druhom volíme umiestnenie tabuľky vzhľadom na okraje stránky. Treba si zapamätať, že určujúci je vždy parameter menšieho segmentu tabuľky. Znamená to, že ak necháme všetky bunky v riadku zarovnávať doprava a jednu alebo viac buniek tohto riadka zarovnáme doľava, má definícia zarovnávania buniek prednosť pred definíciou celého riadka.

Príklad:

<TABLE border=2>
<TR><TH>ovocie</TH><TH>kúpa</TH><TH>predaj</TH></TR>
<TR align="right"><TD align="left">jablká</TD><TD>100 kg</TD><TD>125 kg</TD></TR>
<TR align="right"><TD align="left">hrušky</TD><TD>50 g</TD><TD>48 kg</TD></TR>
</TABLE>

Bunky v druhom a treťom riadku sú zarovnané na pravý okraj, ale bunky v prvom stĺpci majú nastavené zarovnávanie k ľavému okraju. Bunka je menší segment ako riadok, preto bude obsah buniek zarovnaný doľava. Bunky v treťom riadku nemajú nastavené žiadne zarovnávanie, preto prevezmú zarovnávanie platné pre celý riadok.

ovocie

kúpa

predaj

jablká

100 kg

125 kg

hrušky

50 g

48 kg

V tagoch TD a TR sa dá použiť aj parameter valign. Nie však v tagu table. Na rozdiel od align, ktorý určuje zarovnávanie vo vodorovnom smere, valign určuje zvislé zarovnávanie a môže mať nasledujúce hodnoty:

  • top – obsah bunky je zarovnávaný k jej hornému okraju
  • middle – obsah bunky je zarovnávaný na jej stred
  • bottom – obsah bunky je zarovnávaný k jej dolnému okraju
  • baseline – zarovnávanie na spoločnú základňu

Aby naša tabuľka vyzerala ešte lepšie, doplníme ju o farby. Farbu pozadia určíme pomocou parametra bgcolor. Syntax je rovnaká ako pri všetkých nastaveniach farby v jazyku HTML, a to buď slovný alebo hexadecimálny zápis farby. Parameter bgcolor je možné použiť v tagu Table (farba pozadia pre celú tabuľku), TR (farba pozadia pre celý riadok) a TD (farba pozadia danej bunky).

Príklad:

<TABLE border=2 bgcolor="#EFCC03" align="center">
<TR bgcolor="#EBE125">
<TH>Ovocie</TH><TH>1999</TH><TH>2000</TH><TH>2001</TH>
</TR>
<TR align="right"><TD align="left">Hrušky</TD><TD>200 kg</TD><TD>231 kg</TD><TD bgcolor="#EDDE74">300 kg</TD></TR>
<TR align="right"><TD align="left">Jablká</TD><TD>150 kg</TD><TD>146 kg</TD><TD bgcolor="#EDDE74">168 kg</TD></TR>
<TR align="right"><TD align="left">Slivky</TD><TD>98 kg</TD><TD bgcolor="#EDDE74">120 kg</TD><TD>72 kg</TD></TR>
<TR align="right" bgcolor="#C0C0C0">
<TD align="left">Celkom</TD><TD>448 kg</TD><TD>479 kg</TD><TD>540 kg</TD>
</TR>
</TABLE>

Výsledok:

Ovocie

1999

2000

2001

Hrušky

200 kg

213 kg

300 kg

Jablká

150 kg

146 kg

168 kg

Slivky

98 kg

120 kg

72 kg

Celkom

448 kg

479 kg

540 kg

Myslím, že teraz je namieste malá rekapitulácia:

  • Table – definuje začiatok a koniec tabuľky
  • border – hrúbka mriežky
  • align – vodorovné zarovnávanie tabuľky
  • bgcolor – farba pozadia celej tabuľky
  • TR – definuje začiatok a koniec riadka
  • align – vodorovné zarovnávanie riadka
  • valign – zvislé zarovnávanie riadka
  • bgcolor – farba pozadia celého riadka
  • TD – definuje začiatok a koniec bunky (prípadne TH – bunka hlavičky)
  • align – vodorovné zarovnávanie bunky
  • valign – zvislé zarovnávanie bunky
  • bgcolor – farba pozadia bunky

Teraz sa pozrieme na prehľad parametrov tagu Table.

Tag Table

  • align – vodorovné zarovnávanie tabuľky; tento parameter môže mať hodnoty left (doľava), right (doprava) alebo center (na stred)
  • bgcolor – farba pozadia celej tabuľky
  • border – tento parameter určuje hrúbku mriežky tabuľky; použijeme ho aj vtedy, ak chceme zobraziť tabuľku bez mriežky, pretože niektoré prehliadače pri nenájdení tejto hodnoty zobrazujú vlastnú hŕubku mriežky
  • cellpadding – špecifikuje vzdialenosť obsahu bunky od kraja mriežky; predvolená hodnota je 1
  • cellspacing – špecifikuje vzialenosť medzi jednotlivými bunkami tabuľky; predvolená hodnota je 2
  • frame – určuje, ktorá časť vonkajšieho rámu bude zobrazená; k dispozícii máme nasledujúce hodnoty:
    • void – tabuľka bez rámčekov
    • above – iba horný okraj
    • below – iba dolný okraj
    • hsides – horný a dolný okraj
    • vsides – ľavý a pravý okraj
    • lhs – iba ľavý okraj
    • rhs – iba pravý okraj
  • rules – určuje, ktoré časti mriežky budú zobrazené vnútri tabuľky:
    • none – žiadna mriežka nebude zobrazená
    • groups – mriežka bude zobrazená iba pri skupinách definovaných tagmi THEAD, TFOOT, TBODY, COLGROUP a COL (o nich v ďalšom pokračovaní)
    • rows – zobrazí mriežku iba medzi riadkami
    • cols – zobrazí mriežku iba medzi stĺpcami
    • all – zobrazí celú vnútornú mriežku
  • width – určuje šírku celej tabuľky. Udáva sa v pixeloch alebo percentách aktuálnej šírky stránky. V druhom prípade sa tabuľka prispôsobí aktálnemu rozlíšeniu a veľkosti okna prehliadača. Ak tento parameter vynecháme alebo nastavíme primalú hodnotu, vypočíta ju prehliadač na základe súčtu šírok najširších buniek v každom stĺpci. 

Tag TR

  • align – určuje vodorovné zarovnánie obsahu buniek v riadku (left = doľava, right = doprava, center = na stred)
  • valign – určuje zvislé zarovnánie obsahu buniek v riadku (top = k hornému okraju, middle = na stred, bottom = dole, baseline = text je zarovnaný na spoločnú základňu)
  • bgcolor – farba pozadia buniek v riadku

Tag TH a TD

  • align – vodorovné zarovnávanie obsahu bunky (hodnoty sú rovnaké ako pri tagu TR)
  • axis – pomenovanie obsahu bunky (má využitie v databázových aplikáciách, ktoré odkazujú na bunku menom)
  • bgcolor – farba pozadia bunky
  • collspan – určuje, cez koľko stĺpcov sa bunka rozprestiera
  • height – výška bunky; opäť sa určuje buď v pixeloch, alebo relatívne v percentách; ak zvolíme percentuálne zadanie, vzťahuje sa táto hodnota k výške aktuálneho okna prehliadača; výška najvyššej bunky určuje výšku celého riadka, nie je teda nevyhnutné určovať výšku pri každej bunke zvlášť
  • nowrap – nemá žiadnu hodnotu; zapísanie tohto parametra určuje, že obsah bunky nesmie byť zalomený na viac riadkov
  • rowspan – určuje, cez koľko riadkov sa bunka rozprestiera 
  • valign – vertikálne zarovnánie obsahu bunky (hodnoty sú rovnaké ako pri tagu TR)
  • width – šírka bunky; určuje sa buď v pixeloch, alebo v percentách relatívne k šírke tabuľky; ak určíme napríklad v tagu TABLE šírku tabuľky na 400 pixelov, spôsobí parameter width="10%", že bunka bude široká 40 pixelov.

Záver
Po tejto viac-menej teoretickej časti ovládame už základy tvorby tabuliek, ale to ešte nie je všetko. V nasledujúcej časti si ukážeme využitie tabuliek pri formátovaní stránky.

 

 

 

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á