Ako upraviť blog pomocu tabuliek vytvorených v HTML
Niekto sa možno bude čudovať, prečo píšem návod na tvorbu tabuliek prostredníctvom HTML. Možno si ten niekto povie, že netvorí stránku štatistického úradu a nepotrebuje do tabuliek vkladať rôzne číselne hodnoty. Tabuľky sú však dôležitým stavebným prvkov každej dobrej šablóny. Pomocou tabuliek možno jednoducho vyriešiť zdanlivo ťažko riešiteľné úpravy šablóny blogu. Ak ste zvedaví, čo všetko sa dá pomocou tabuliek vytvoriť, čítajte ďalej.
Najskôr sa naučíme vytvoriť jednoduchú základnú tabuľku, z ktorej budeme neskôr odvodzovať vychytávky na náš blog.Tabuľky budeme vytvárať v gadgetoch, ktoré služba Blogger umožňuje pridávať. Nemusíme sa tak báť, že niečo pokazíme v hlavnej šablóne. Ak sa niečo nepodarí, problematický gadget jednoducho odstránime.
ROZLOŽENIE - PRIDAŤ MODUL GADGET - HTML/JAVASCRIPT
Do gadgetu vložíme HTML kód
<table border="1"cellpading="10" cellspacing="5" bordercolor="darkgrey" bgcolor="lightgrey"> <tr><td>ľavá horná bunka</td><td>pravá horná bunka</td></tr>
<tr><td>ľavá dolná bunka</td><td>pravá dolná bunka</td></tr></table>
<tr><td>ľavá dolná bunka</td><td>pravá dolná bunka</td></tr></table>
Pomocou tohto kódu vytvoríme našu prvú základnú tabuľku
ZNAČKY
|
VÝZNAM
|
<table>ďalšie
značky a text </table>
|
vytvorenie tabuľky
|
<tr> ďalšie
značky a text </tr>
|
riadok tabuľky
|
<td>text
</td>
|
bunka tabuľky
|
width="100"
|
šírka
|
height="100"
|
výška
|
border="1"
|
šírka rámu
|
cellpading="10"
|
vnútorný okraj buniek
|
cellspasing="10"
|
vonkajší okraj buniek
|
bgcolor="lightgrey"
|
farba pozadia
|
bordercolor="darkgrey"
|
farba orámovania
|
baground="URL adresa obrázka"
|
obrázok na pozadí
|
<center>tabuľka</center>
|
tabuľka zarovnaná na stred
|
<left>tabuľka</left>
|
tabuľka zarovnaná vľavo
|
< right >tabuľka</right
>
|
tabuľka zarovnaná vpravo
|
Potom, ako sme sa naučili vytvárať základné tabuľky, je dôležité si uvedomiť, že do buniek tabuľky možno vložiť prakticky čokoľvek (text, obrázky, hypertextový odkaz ...). Po tomto uvedomení si, sa nám otvára široká škála možností, ako tabuľky využiť pri úprave šablóny blogu. Stačí nastaviť nulové orámovanie a vložiť niečo zaujímave.
TABUĽKA S OBRÁZKAMI
Tabuľka s obrázkami sa skvelé hodí na umiestnenie lóg sponzorov, obľúbenej kozmetiky, prečítaných kníh a vlastne všetkého možného.
Do gadgetu vložíme HTML kód
<center><table
border="0"cellpading="10" cellspacing="5"
bordercolor="darkgrey"bgcolor="lightgrey">
<tr><td><img height="30"
width="30" src=" URL adresa obrázka "> </td><td><img
height="30" width="30"
src=" URL adresa obrázka "> </td><td><img
height="30" width="30"
src=" URL adresa obrázka "> </td></tr>
<tr><td><img height="30"
width="30" src=" URL adresa obrázka "> </td><td><img
height="30" width="30"
src=" URL adresa obrázka "> </td><td><img
height="30" width="30"
src=" URL adresa obrázka "> </td></tr>
<tr><td><img height="30"
width="30" src=" URL adresa obrázka "> </td><td><img
height="30" width="30"
src=" URL adresa obrázka "> </td><td><img
height="30" width="30"
src=" URL adresa obrázka "> </td></tr>
</table></center>
A vytvoríme napríklad takúto zaujímavú mozaiku.
A vytvoríme napríklad takúto zaujímavú mozaiku.
TABUĽKA S OBRÁZKAMI A HYPERTEXTOVÝMI PREPOJENIAMI
Takáto tabuľka sa skvele hodí napríklad na umiestenie lóg sociálnych sietí.
Do gadgetu vložíme HTML kód
<center><table border="0"cellpading="10" cellspacing="5" bordercolor="white"bgcolor="white">
Takáto tabuľka sa skvele hodí napríklad na umiestenie lóg sociálnych sietí.
Do gadgetu vložíme HTML kód
<center><table border="0"cellpading="10" cellspacing="5" bordercolor="white"bgcolor="white">
<tr><td> <a href="odkaz
kam bude čitatel po kliknutí presmerovaný"><img height="40" width="40"
src="webova adresa obrazka
v nepublikovanom prispevku"/></a> </td><td> <a
href="odkaz kam bude čitatel po kliknutí
presmerovaný"><img height="40"
width="40"
src="webova adresa obrazka
v nepublikovanom prispevku"/></a> </td><td> <a
href="odkaz kam bude čitatel po kliknutí
presmerovaný"><img height="40"
width="40"
src="webova adresa obrazka
v nepublikovanom prispevku"/></a> </td></tr> </table></center>
A vytvoríme napríklad presmerovania na sociálne siete.
A vytvoríme napríklad presmerovania na sociálne siete.
TABUĽKA SO STRÁNKAMI ZAROVNANÝMI NA STRED
Viacero blogov má pod hlavným/titulným obrázkom umiestnené tzv. STRÁNKY, čiže hypertextové prepojenia na určitú stránku blogu. Vo veľkej väčšine prípadov sú tieto stránky nevycentrované, nakoľko služba bloger neumožňuje v tomto prípade vycentrovanie. Dá sa to však vyriešiť pomocou tabuliek.
Do gadgetu vložíme HTML kód
<center><table
border="0"cellpading="0" cellspacing="0"
bordercolor="white"bgcolor="white">
<tr> <td> <a href="URL ADRESA NA KTORÚ BUDE ČITATEĽ PRESMEROVANÝ">POPIS</a></td> <td>...</td>
<td> <a href="URL ADRESA NA KTORÚ BUDE ČITATEĽ PRESMEROVANÝ">POPIS</a></td>
<td>...</td><td> <a
href="URL ADRESA NA KTORÚ BUDE ČITATEĽ PRESMEROVANÝ">POPIS</a>
</td></tr>
</table></center>
A vytvoríme stránky umiestené pekne v strede.
Viac informácií o úprave textu, zarovnaní, vkladaní obrázkov a odkazov sa dozviete po kliknutí na hypertextové prepojenia. Ak vás môj návod inšpiroval, budem rada, ak mi do komentárov vložíte linky vašich blogoch vyzdobených tabuľkami.
Zdroje:
www.jakpsatweb.cz
www.polopate.jakpsatweb.cz
www.jakpsatweb.cz
www.polopate.jakpsatweb.cz
http://interval.cz/clanky/tipy-pro-tvorbu-tabulek-v-html-kodu/
Schafer, S.(2009): HTML, XHTML a CSS (Bible pro tvorbu WWW stranek)
Schafer, S.(2009): HTML, XHTML a CSS (Bible pro tvorbu WWW stranek)
Teba toto náramne baví, však? :-D Ale naozaj, klobúk dolu ;-)
OdpovedaťOdstrániťAno bavi. Tym ze pisem navody sa aj ja zdokonalujem.
OdstrániťDíky za návod! Ikonky už mám na blogu ;)
OdpovedaťOdstrániťsuper :-)
OdstrániťĎakujem za typ! Určite to pomôže. Aj ja som niečo také na blogu v minulosti robila :-)
OdpovedaťOdstrániťDijoun&Klaudi
Skvělej návod díky :)
OdpovedaťOdstrániťVšedně a nevšedně o kosmetice