Jak na to ? vkládání obrázků a tabulek

vydání číslo 3.



Sice jsem slíbil že tento článek bude co nejdříve navazovat, na druhé vydání, ale jistě víte jak to mnohdy bývá s časem. Dostávám se k tomu dnes, a dnes budu chtít ukázat jen drobnosti, které v článcích určitě využijete.

1. Jak vkládat obrázky

Začnu tím že do každého článku se dávají obrázky, a každý obrázek v článku je potřeba v obsahu článku nějak umístit. Nějak znamená především vlevo vpravo a uprostřed. Základní tag pro obrázek je img a je nepárový
<img src="adresa obrázku"> adresou obrázku se myslí jeho umístění, například http://www...
pokud se nechcete zabývat úpravami obrázku, ale máte ho příliš velký na to aby jste ho umístili do článku, tak stačí do tagu přidat
<img src="http://www. ..." width="100" height="100" > přičemž width je šířka a height je výška obrázku, zde nastavena na sto pixelů. Nezapomeňte zachovávat poměr stran, aby se z obrázku nestal paskvil.
Každý takový obrázek se pak umístí automaticky vlevo, pokud mu nezadáte jinak. normální a nejjednodušší forma jak vycentrovat obrázek v článku je přidat příkaz center, tento tag je párový.
<center><img src="http://www. ..." width="100" height="100" ></center> určitě by jste přišli na mnoho způsobů jak obrázek posouvat po ploše článku i mimo něj, ale otázkou je co vlastně všechno v editoru OP funguje a jak to správně napsat aby to fungovalo, tak jak chcete.
Pokud si nějaký obrázek chcete nadefinovat ve stylu, a v tomto případě platí hlavně jeho umístění, tak si dopište do stylu toto:
#obsah img {float: left;} pro zarovnání vlevo, nebo #obsah img {float: right;} pro zarovnání vpravo. To ale způsobí, že se obrázek přesune úplně na levý nebo pravý kraj článku, a tak když k tomu přidáte margin, tedy vnější okraj obrázku, tak se vám obrázek posune tak jak budete chtít:
#obsah img {float: right; margin: 10 50 10 50px;} v tomto případě je to posunuto deset pixelů z hora a zdola padesát pixelů z leva a zprava, nezapomeňte ale že když je nadefinováno float right, tak obrázek bude posunut od kraje padesát pixelů zprava a pokud obrázek bude menší než šířka článku plus těch padesát pixelů, budete mít zleva delší okraj. Tímto způsobem se dá obrázek centrovat na celou šířku článku.
Teď tu máme ale jiné úskalí, co když má dva obrázky a každý chci jinde. řešení je následující, složité, trochu na hlavu, ale funguje to. Uděláte si nový div, nazvěme ho img2. Prohlížeče neznají img2 vědí že img je obrázek, ale img není nic. A podle toho se musíme chovat, tak říkajíc prohlížeči vysvětlit co po něm chceme. Do stylu přidáte
#img2 {float: left; margin: 0 10 0 10px;} a před obrázek který budete chtít takto umístit zadáte div img2:
<div id="img2"><img src="http://www. ..." width="100" height="100" ></div>
Myslím že k tomu bylo řečeno asi dost, pokud něco nebude jasné, nebo uvidíte chybu napište to pod článek nebo mě do pošty.

2. Jak vkládat tabulku

Tabulka je asi nejdůležitější součást, každého článku, dá se využít mnoha způsoby. Nejde jen o tabulku kde budou seřazeny týmy, ale dají se do ní vložit i obrázky a text. Nejjednodušším způsobem jak vložit tabulku je formou print screenu, ořezat obrázek a vložit jako obrázek pomocí jedno z předešlých příkladů. Pokud ale chcete přidat k jednotlivým textům odkaz, už je to problém který musíte řešit jinak.
Samotná tabulka se skládá z několika tagů, všechny tyto tagy jsou párové. Začínáme tagem table pak následuje řádek tr a sloupec td. Následně je tedy uspořádáme tak aby vznikla tabulka o dvou řádcích a dvou sloupcích. Daný sled tagů bude vypadat takto:
<table>
   <tr>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
   </tr>
</table>

vznikne vám prakticky toto, čím více budete mít TR tím více bude řádků, každé TD je sloupec v daném řádku:

pokud jste mne dobře pochopily, tak jistě víte že daný text v tabulce se píše mezi tagy td. Každá tabulka je nějak velká, normálně se vám rozšíří podle délky text, dokud se text nezalomí. Délku tabulky si nastavíte tím že do tagu table přidáte width, a délka je v pixelech. Málo kdo ví jak má být tabulka velká předem, to vyplyne až z délky toho co do ní dáte. Já například dám do prvního sloupce názvy svých týmů, a do druhého sloupce jméno manažera. Délka sloupce se zadává do tagu td a opět pomocí width. Nezapomeňte že velikost písma určí výšku řádku, ale pokud ji chcete mít vyšší tak do tagu tr zadáte height, takže takto:
<table width="350">
   <tr height="30">
      <td width="220">SpVgg Elversberg 07</td>
      <td width="130">Míra</td>
   </tr>
   <tr height="30">
      <td width="220">Philadelphia Union</td>
      <td width="130">Míra</td>
   </tr>
</table>

celková šířka table width je vlastně součet šířek sloupců, a tato část zapsaná být nemusí. Já si ji tam dávám jen proto, kdybych někde v kódu udělal chybu s počtem sloupců, tak mi tabulka zůstane stejně dlouhá.

Tohle všechno je ale v editoru OP na nic, je to nefunkční. Tabulku vám to neudělá takovou jakou chcete ... Proč, to je asi problém CSS, které vy neovlivníte, a já se možná mýlím a jen někde dělám chybu. Ale každá chyba se dá obejít a tak jsem se naučil v článku používat styl. Ten až dosud nebyl úplně nutný, jen mi zjednodušil práci. Ale co se týká tabulek, tam to nutné je. A tak si do stylu napíšete něco v podobě:
#obsah table {width: 350px; margin: 5px 180px 5px 180px; float: center; font-size: 11px; background-color: #F0F0F0;}
a co nám to říká ? width je délka tabulky, margin jsou okraje tabulky, toto je velmi důležitá část, kdy je potřeba nastavit vzdálenost od kraje článku. Důvod je ten že když zadáte tabulku bez těchto okrajů, tabulka se vám vždycky roztáhne po celé délce, nevím proč, ale je to tak. Okraje nastavíte pomocí vzorce, délka článku mínus délka tabulky děleno dvěma, v tomto případě (710 - 350) / 2 = 180px zleva i zprava. float je zarovnání, opět se zadává left, right, nebo ceneter. font-size je velikost písma v tabulce a background-color je barva pozadí tabulky. Prakticky je to vše podstatné co potřebujete vědět, ale já protože se jistím jak ve stylu tak přímo v tagu obsahu tak vytvořím navíc k tomu toto:

<center><table width="350" align="center">
   <tr height="30">
      <td width="220" align="left" ><a href="http://www.brejk.cz/index.php?p=info_tym&tym=17870"> SpVgg Elversberg 07</a></td>
      <td width="130" align="center" >Míra</td>
   </tr>
   <tr height="30">
      <td width="220" align="left" ><a href="http://www.brejk.cz/index.php?p=info_tym&tym=62260"> Philadelphia Union</a></td>
      <td width="130" align="center" >Míra</td>
   </tr>
</table></center>


Ke každému tagu td jsem navíc přidal align a to center nebo left, což mi navíc zarovná text do dané buňky. Center nebyl nutný, protože ten je už je u tagu table, ale pro názornost jsem ho tam nechal. A ještě jsem přidal odkaz na moje týmy pomocí párového tagu a a tak vám vznikne toto:

 SpVgg Elversberg 07  Míra
 Philadelphia Union  Míra

Takových to tabulek do článku můžete vkládat nekonečně mnoho, mohou mít rozdílný počet sloupců, i řádků, ale jedno budou mít společné, a to stejnou šířku. V tom je problém, ale já abych neměl mnoho nadefinovaných tabulek ve stylu, tak jsem si vytvořil standart, s rozdílným počtem, velikostí řádků a sloupců, ale šířku tabulky standartně používám 520px.
Když potřebujete užšší tabulku, dá se to řešit dvěma způsoby, buď si nevplníte krajní sloupce a když máte tabulku průhlednou tak to vypadá že v článku ani nejsou, nebo ...

3. Jak vkládat více tabulek o jiných šířkách

Když potřebujete udělat více tabulek a každá bude jinak široká, doporučuji ji uzavřít v jiném obsahu a načít jakoby nový obsah ... Tzn. že vytvoříte ve stylu dvě tabulky, například:

#obsah table {width: 350px; margin: 5px 180px 5px 180px; float: center; font-size: 11px; background-color: #F0F0F0;}
#obsah2 table {width: 550px; margin: 5px 80px 5px 80px; float: center; font-size: 11px; background-color: #AFAFAF;}
v následujícím obsahu je potřeba udělat něco v tomto smyslu, když doděláte jednu tabulku, ukončíte obsah a načnete nový obsah2, ten nemusí být ve stylu nadefinovaný stejně, ale přesto vám to pro začátek doporučuji. Následně to bude vypadat takto:

<style type="text/css">začátek stylu

#obsah {width: 710px; margin: -12px 0 -15px 0; background-image: url(http://www.brejk.cz/UserFiles/Image/clanek/back.jpg); background-repeat: repeat-y;}
#obsah h1 { color: #42476F; padding: 15px 0px 15px 70px; font-size: 18px;}
#obsah p { line-height: 18px; color: #000 ; margin: 15px 80px 15px 80px; text-align: justify; font-size: 11px; }
#obsah table {width: 350px; margin: 5px 180px 5px 180px; float: center; font-size: 11px; background-color: #F0F0F0; float: center;}

#obsah2 {width: 710px; margin: -12px 0 -15px 0; background-image: url(http://www.brejk.cz/UserFiles/Image/clanek/back.jpg); background-repeat: repeat-y;}
#obsah2 h1 { color: #42476F; padding: 15px 0px 15px 70px; font-size: 18px;}
#obsah2 p { line-height: 18px; color: #000 ; margin: 15px 80px 15px 80px; text-align: justify; font-size: 11px; }
#obsah2 table {width: 550px; margin: 5px 80px 5px 80px; float: center; font-size: 11px; background-color: #AFAFAF;}

</style>
konec stylu

začátek obsahu
<div id="obsah">
<center><table width="350" align="center">
   <tr height="30">
      <td width="220" align="left" ><img src="http://www.brejk.cz/images/flags/de.gif"><a href="http://www.brejk.cz/index.php?p=info_tym&tym=17870"> SpVgg Elversberg 07</a></td>
      <td width="130" align="center" >Míra</td>
   </tr>
   <tr height="30">
      <td width="220" align="left" ><img src="http://www.brejk.cz/images/flags/us.gif"<a href="http://www.brejk.cz/index.php?p=info_tym&tym=62260"> Philadelphia Union</a></td>
      <td width="130" align="center" >Míra</td>
   </tr>
</table></center>
</div>
konec obsahu

začátek obsahu2
<div id="obsah2">
<center><table width="550" align="center">
   <tr height="30">
      <td width="320" align="left" ><img src="http://www.brejk.cz/images/flags/de.gif"<a href="http://www.brejk.cz/index.php?p=info_tym&tym=17870"> SpVgg Elversberg 07</a></td>
      <td width="230" align="center" >Míra</td>
   </tr>
   <tr height="30">
      <td width="320" align="left" ><img src="http://www.brejk.cz/images/flags/us.gif"<a href="http://www.brejk.cz/index.php?p=info_tym&tym=62260"> Philadelphia Union</a></td>
      <td width="230" align="center" >Míra</td>
   </tr>
</table></center>
</div>
konec obsahu2

sem už jsem přidal i obrázky a výsledek je tento:

  SpVgg Elversberg 07  Míra
  Philadelphia Union  Míra

Předpokládám že jsem vám tím dostatečně zamotal hlavu na další týdny, než si vzpomenu co vám mohu ukázat příště. Napadá mě například to že pomocí tabulky a obrázku jsem udělal pro Chile sestavu kola při MS. Ale to opravdu někdy jindy.
Každopádně si myslím že co jsem vám ukázal ve všech třech dílech, je tolik, kolik potřebujete k vydání článků, článkům podobným těm mým. Za celé ty týdne mě o radu poprosilo jen pár manažerů, a co víc, za celé ty týdny mě nikdo nepožádal o sestavení článku, tím beru na vědomí že se všem všechno daří, a nebo to většina z vás vzdala. Ale potěšilo mne i to že jsem viděl první vydané články, podle článku "jak na to". Tímto děkuju těm kteří podpořili mou snahu a mé vědomí že to nebylo úplně zbytečné.






 


Autor: Míra