Image
1.6.2016 0 Comments

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

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

Na začiatok tohtomesačného pokračovania nášho seriálu si povieme ešte o niektorých tagoch použiteľných v tabuľkách, o využití tabuliek pri formátovaní stránok a prejdeme k základom práce s formulármi. 

Tag Caption
Tento párový tag určuje titulok tabuľky a je použiteľný iba za tagom Table. Umiestnenie nadpisu sa definuje parametrom align s týmito hodnotami:

  • top - nadpis je umiestnený nad tabuľkou
  • bottom - nadpis je umiestnený pod tabuľkou
  • left - nadpis je umiestnený vľavo od tabuľky
  • nadpis je umiestnený vpravo od tabuľky

Tagy THead TBody a TFoot
Tieto tagy prišli až s HTML 4.0. Tag THead určuje hlavičku tabuľky, tag Tbody telo tabuľky a tag TFoot pätu tabuľky. Tieto tagy slúžia na zvýšenie prehľadnosti vytváranej tabuľky. Pri ich zápis platí pravidlo hlava – päta – telo (THead – TFoot – TBody). Výsledok by mohol vyzerať takto:

<TABLE>
<THEAD>
<TR> hlavička tabuľky
</THEAD>
<TFOOT>
<TR> päta tabuľky
</TFOOT>
<TBODY>
<TR> prvý riadok prvej časti tabuľky
<TR> druhý riadok prvej časti tabuľky
<TR> tretí riadok prvej časti tabuľky
</TBODY>
<TBODY>
<TR> prvý riadok druhej časti tabuľky
<TR> druhý riadok druhej časti tabuľky
<TR> tretí riadok druhej časti tabuľky
</TBODY>
</TABLE>

Všetky tieto tagy majú nasledujúce parametre:

  • align – vodorovné zarovnávanie textu
  • valign – zvislé zarovnávanie tabuľky
  • char – znak, na ktorý bude text v bunke zarovnaný (napríklad: char = ".")
  • charoff – odsadenie znaku špecifikovaného parametrom char

Tagy Colgroup a Col
Na vodorovné rozdelenie tabuľky na logické úseky slúžia, ako už vieme, tagy THead, TFoot a TBody. Na zvislé rozdelenie sa zase používajú tagy Colgroup a Col. Tieto tagy treba zaradiť ešte pred prvý riadok tabuľky.
Colgroup spája stĺpce, ktoré spolu logicky súvisia, do väčších celkov a tag Col sa využíva pri jemnejšom definovaní vlastností stĺpcov. Pri obidvoch tagoch je možné definovať vlastnosti pre niekoľko stĺpcov súčasne. Na to slúži atribút span, ktorý hovorí, na koľko stĺpcov sa príslušné nastavenie vzťahuje.
Okrem zarovnávacích parametrov (vysvetlených v prechádzajúcom opise tagov) je možné pomocou atribútu width nastaviť šírku stĺpcov.

Príklad:

<TABLE border=1>
 <COLGROUP span=1 align="left" width=100>
<COLGROUP span=3 align="right" width=75>
 <TR align="center">
<TH>Ovocie</TH>
<TH>január</TH>
<TH>február</TH>
<TH>marec</TH></TR>
 <TR><TD>jablká</TD><TD>10</TD><TD>20</TD><TD>15</TD></TR> <TR><TD>hrušky</TD><TD>15</TD><TD>25</TD><TD>35</TD></TR> <TR><TD>slivky</TD><TD>5</TD><TD>5</TD><TD>5</TD></TR> <TR><TD>marhule</TD><TD>16</TD><TD>18</TD><TD>20</TD></TR>
 </TABLE>

Výsledok:

Ovocie

január

február

marec

jablká

10

20

15

hrušky

15

25

35

slivky

5

5

5

marhule

16

18

20

Zlučovanie buniek
Jazyk HTML umožňuje zlučovať viac stĺpcov a/alebo riadkov do jednej bunky. Na to slúžia atribúty colspan a rowspan. Môžeme ich napísať do tagu TH alebo TD. Ich hodnota udáva, cez koľko riadkov a/alebo stĺpcov sa bunka rozkladá. Môžeme použiť jeden alebo aj obidva atribúty. Pri použití obidvoch sa bude bunka rozkladať cez viac riadkov a viac stĺpcov.

Príklad:

<TABLE border="1">

<TR><TH rowspan="2"></TH>

<TH colspan="2">Priemer</TH>

<TH rowspan="2">Hnedé oči</TH></TR>

<TR><TH>váha</TH><TH>výška</TH></TR><TR>

<TH>muži</TH><TD>75</TD><TD>182</TD><TD>40%</TD></TR>

<TR><TH>ženy</TH><TD>60</TD><TD>170</TD><TD>43%</TD></TR></TABLE>

Výsledok:

 

Priemer

Hnedé oči

váha

výška

muži

75

182

40%

ženy

60

170

43%

Ak chcete v tabuľkách definovať prázdne bunky, nikdy nepoužívajte <TD></TD> ani <TD> </TD>. Takéto bunky nezobrazia všetky prehliadače zhodne. Najlepšie je použiť neviditeľnú medzeru - &nbsp;

Využitie tabuliek
Základné využitie tabuliek je na presné umiestnenie textu a grafiky na stránke. Napríklad budeme chcieť, aby sa text začínal 50 pixelov od ľavého okraja stránky a končil 100 pixelov od pravého okraja stránky. Najlepšie riešenie je vytvoriť tabuľky s veľkosťou  100 % stránky a nulovou šírkou okrajov.

<TABLE border=0 width=100%>
<TR><TD width=100>nbsp;</TD><TD>tu bude text</TD><TD width="150></TD></TR>
</TABLE>

Ďalším využitím môže byť vytvorenie ovládacích prvkov, pri ktorých záleží na presnom umiestnení. Napríklad ak chceme vytvoriť vodorovnú navigačnú lištu,

<TABLE border=0 width=100%>
<TR><TD width=10% align="center"><a href="odkaz1.htm">popis1</A></TD>
<TD width=10% align="center"><a href="odkaz2.htm">popis2</A></TD>
<TD width=10% align="center"><a href="odkaz3.htm">popis3</A></TD>
. . . . .
<TD width=10% align="center"><a href="odkaz9.htm">popis9</A></TD>
<TD width=10% align="center"><a href="odkaz10.htm">popis10</A></TD></TR>
</TABLE>

pretože sme nepoužili absolútne, ale relatívne určenie šírky buniek, bude lišta pri každom rozlíšení zaberať celú šírku obrazovky a jednotlivé ovládacie prvky budú vždy rovnako široké.
Ak sa rozhodnete namiesto jednoduchých textových odkazov použiť ako odkazy obrázky, môžete pomocou tabuliek vytvoriť napríklad obrázkovú mapu, zloženú z niekoľkých častí, ktoré budú odkazovať na rôzne objekty. V takomto prípade sa odporúča určovať nielen veľkosť jednotlivých buniek, ale i samotných obrázkov pre rýchlejšie zobrazenie stránky v prehliadači.
Využitie tabuliek pri navrhovaní vzhľadu stránok je skutočne široké. Stačí sa pozrieť na zdrojový kód niektorých serverov. Všetky weby síce vyzerajú rôzne, ale v drvivej väčšine sú vytvorené tabuľkami.
Doteraz sme informácie návštevníkom len odovzdávali. Dôležitým prvkom internetu je obojstranná komunikácia. Na to slúžia napríklad diskusné fóra, knihy návštev alebo formuláre. Teraz si ukážeme prácu s formulármi.

Formulár
Celý formulár je uložený medzi tagmi <Form> a </Form>. Má niekoľko dôležitých parametrov:

  • action – určuje adresu skriptu (CGI, PHP alebo ASP), ktorý formulár spracuje. Okrem toho môžeme formulár aj odoslať elektronickou poštou. Využijeme to napríklad vtedy, ak nemáme skriptovanie povolené. V tom prípade bude parameter action vyzerať takto – action=mailto:adresa@server.sk.
  • method – tento parameter má hodnoty get alebo post. Get je vhodný najmä v prípadoch, že dáta z formulára nevyžadujú žiadne vonkajšie spracovanie. Príkladom je vyhľadávanie v databáze. V ostatných prípadoch nastavíme parameter method na post. Pri get sa dáta z formulára pripájajú k adrese URL volaného skriptu, pri post sa odošlú priamo v HTTP.
  • enctype – spôsob kódovania odosielaných dát. Ak budeme dáta získavať pomocou elektronickej pošty, je najlepšie použiť voľbu text/plain.

Príklad:

<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.sk" method="post">
.
.
.
vlastný formulár
.
.
.
</FORM>

Základné ovládacie prvky
Na konci formulára sa spravidla nachádzajú ovládacie prvky, ktoré zabezpečujú odosielanie dát a zmazanie obsahu celého formulára. Základným stavebným kameňom väčšiny položiek formulára je tag Input, ktorý sám osebe nič neznamená, ale bez tohto elementu sa určite nezaobídete. Parameter type určuje,  čo sa dotyčná položka premení. Pre odoslanie formulára to bude hodnota submit a pre zmazanie hodnota reset.

Tlačidlo na odoslanie formulára:
<INPUT type="submit" value="Odošli>

Tlačidlo na zmazanie celého formulára:
<INPUT type="reset" value="Zmaž">

Po stisnutí druhého tlačidla sa formulár vráti do stavu pred vyplnením akýchkoľvek údajov.

Textové pole
Textové pole využijete pri získavaní údajov, ako sú meno, priezvisko, e-mail, slová na vyhľadávanie a podobne. V tomto prípade použijeme tag Input s parametrom text. Ďalej môžeme použiť jeden z nasledujúcich parametrov:

  • name – meno vstupného prvku. Toto meno sa využíva pri spracovaní formulára skriptom a veľmi dôležité je jeho určenie v prípade, že sa údaje odosielajú elektronickou poštou. V takomto prípade vám príde správa, ktorá má štruktúru meno vstupného prvku=používateľom zadaná hodnota. Každé meno by malo byť vo formulári použité iba raz, aby sme zachovali prehľadnosť. Parameter name sa uvádza pri všetkých  elemtoch Input vo formulári 
  • value – hodnota, ktorú môže používateľ meniť. Napríklad value="napíšte svoj e-mail" spôsobí, že pri zobrazení formulára v danom textovom poli napísané: napíšte svoj e-mail 
  • size – udáva veľkosť textového poľa v počte písmen, ktoré budú viditeľné 
  • maxlenght – určuje maximálny počet písmen, ktoré je možné zadať do textového poľa 
  • acceskey – klávesová skratka, ktorá presunie kurzor do textového poľa. Ak zadáme napríklad acceskey="k", do textového poľa sa kurzor presunie po stlačení ALT + K 
  • aling – zarovnávanie textového poľa
  • readonly – zavedenie tohto parametra spôsobí, že textové pole bude síce viditeľné, ale nebude editovateľné

Príklad:
Adresa: <INPUT type="text" name="adresa" value="vyplňte, prosím, svoju adresu" size=30 maxlength=45 accesskey="a" align="left">

Ukážka:

Adresa:

Záver
Nabudúce budeme pokračovať s formulármi, ukážeme si ešte pole na vstup hesla, urobíme si kompletný formulár, ktorý odošle údaje o používateľovi na e-mail, a postúpime k zaškrtávacím a prepínacím poliam.

 

 

 

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á