Design listingu pomocí HTML

Ač lze listingy na Geocaching.com tvořit jazykem HTML, jeho možné použití je poněkud osekané. Není možné použití nejn scriptů, ale ani stylování, což ze hry vyřazuje i použití divů (pokud nám tedy nestačí podbarvený, třeba zaoblený blok). Jak to tedy udělat, když chceme mít hezký a zároveň funkční listing? Musíme ho nakreslit.

Na to už přišlo mnoho ownerů, ovšem ne všichni to dělají zrovna ideálně. Ano, na prázdný pergamen můžeme v Malování napsat text tak jak potřebujeme, a pak stačí ten obrázek jenom vložit do listingu. Jenže to je řešení vhodné pouze pro zobrazení přímo na počítači. Pokud nějaká aplikace obrázky neumí zvětšit, nebo je dokonce neumí zobrazit, pak v listingu vlastně není nic. Důležité tedy je nikdy nevkládat do obrázků podstatný text. Tím se ovšem zároveň musíme smířit s tím, že nemůžeme použít jiné typy písem, než jsou ty standardní nabízené editorem. Stylovací odkaz na Google Fonts prostě vložit nelze.

Podívejme se nyní na pár příkladů toho, co možné je.

Pokud chceme text na barevném podkladu, s odsazením od kraje, klidně se zaoblením:

<div style="background-color:#3399ff;border-radius:15px;padding:15px;">

Kde vzít HTML kódy požadovaných barev, jako například #3399ff? Můžeme k tomu použít třeba tento nástroj.
Podobným způsobem se dá poprat i s tím pergamenem, i když zde už je to poněkud složitější:

<center>
<div style="background-image:url(https://s3.amazonaws.com/gs-geo-images/0e673879-7d6d-41c0-a003-70d28b5dd9f0.jpg);width:266px;height:515px;padding:80px;">
<a href="https://s3.amazonaws.com/gs-geo-images/685b037d-4554-4344-b65a-010e251c3bfa_l.png"><img src="https://s3.amazonaws.com/gs-geo-images/685b037d-4554-4344-b65a-010e251c3bfa_l.png" width="128" height="96" style="float:left;border-radius:20px;" /></a> Zde je text, který obtéká vložený obrázek. Jakmile délka textu přesáhne rozměry obrázku, pak se text začne zobrazovat po celé šířce. Je zaměřený na střed. </div>
</center>

Zde je text, který obtéká vložený obrázek. Jakmile délka textu přesáhne rozměry obrázku, pak se text začne zobrazovat po celé šířce. Je zaměřený na střed.

Barvu pozadí jsme vyměnili za obrázek pozadí. Tady se hodí zmínit, že maximální šířka listingu je vždy 670px. Pokud vkládáme obrázek na pozadí divu, nemůžeme mu určit, jak má být velký. Pokud bude širší než 670px, prostě se nám celý neukáže. Naopak musíme divu říci, jak velký ten obrázek je. Pokud tak neučiníme, namnoží se nám na šířku tolikrát, kolikrát se vejde - a na výšku se usekne tam, kde to uzná za vhodné.

Ale pro Geocaching.com je tu ještě jeden zádrhel - pokud použijeme padding, což určitě použijeme aby nám text nezačínal ještě na bílé ploše obrázku, musíme jej z každé strany obrázku nejprve odečíst. Pokud tedy obrázek má šířku 426px a padding (odstup od kraje) máme 80px, pak jako šířku obrázku na pozadí (width) musíme uvést 426(skutečná šířka)-80(odstup zleva)-80(odstup zprava)=266. Stejně tak musíme spočítat i rozměr pro výšku (height).

Zároveň jsme mohli do listingu přidat obrázek (rozměry width a height jsou u něj vypočítané ze skutečné velikosti, jinak by byl podivně roztáhnut), po kliknutí na nějž se otevře v plné velikosti. Obrázku jsme mohli také zakulatit rohy a zároveň nastavit, že text jej má obtékat.

Abychom měli celý pergamen i text v něm zaměřený na střed, obalili jsme div do tagu center. A tady se hodí říci další užitečná věc. Po vložení HTML kódu nepřepínejte na WYSIWIG editor. V daném příkladu nám toto přepnutí totiž způsobí to, že zmizí nejen tag center, ale i všechny vlastnosti vloženého obrázku (že má mít zahnuté rohy, že jej text má obtékat). Jedinou možností jak tyto vlastnosti dostat nazpět je opět přepnout do HTML kódu tlačítkem Source a ručně tam všechny požadované tagy dopsat.

Pokud to bez WYSIWIGu nezvládnete, pak jsou dvě možnosti. Buď listing tvořit na svém webu, a pak teprve celý kód do listingu překopírovat (ovšem pozor, někdy vám může pár tagů nepodporovaných Geocaching.com zmizet). Druhou možností je vytvořit takové schéma, které ještě ve WYSIWIGu upravovat půjde. Například si tedy zvolit podkladový obrázek o šířce 670px (tam nám pak bude jedno že nebude zaměřen na střed, když bude po celém; a text už si můžeme vycentrovat v editoru), nebo třeba jenom barevný přechod:

<div style="background-image:radial-gradient(circle, yellow, red); border-radius:15px; padding:15px">
Zde je text, který si můžeme v editoru zarovnat na střed. Na dalším řádku máme dva zmenšené obrázky zobrazené se stejnou výškou (šířku necháváme automaticky na prohlížeči). Pro přidání dalšího řádku v editoru používáme klávesovou zkratku <em>Shift+Enter</em>, při pouhé klávese <em>Enter</em> nám editor vytvoří další <em>div</em>.<br>
<img height="96" src="https://s3.amazonaws.com/gs-geo-images/685b037d-4554-4344-b65a-010e251c3bfa_l.png">&nbsp;
<img height="96" src="https://s3.amazonaws.com/gs-geo-images/a0ed4a03-b4f7-4f2d-8e09-6213d6251fa6_l.jpg"><br>
Dvojklikem na obrázek můžeme v editoru změnit jeho adresu, případně mu zadat kam má odkazovat.</div>

Zde je text, který si můžeme v editoru zarovnat na střed. Na dalším řádku máme dva zmenšené obrázky zobrazené se stejnou výškou (šířku necháváme automaticky na prohlížeči). Pro přidání dalšího řádku v editoru používáme klávesovou zkratku Shift+Enter, při pouhé klávese Enter nám editor vytvoří další div.
 
Dvojklikem na obrázek můžeme v editoru změnit jeho adresu, případně mu zadat kam má odkazovat.

Tím jsme přešli do toho lehčího, dost možná vás však zajímá to složitější. Co když chcete mít text jen na části obrázku? Nebo mít kousek obrázku jako odkaz? Někdy by se s tím ještě dalo vyhrát s pomocí divů, někdy je vhodnější to udělat formou tabulky. Další příklady již budou pocházet ze skutečného listingu, konkrétně z toho pro GeoOhýnek 2020.

Jak probíhala tvorba listingu? Nejprve bylo potřeba jej nakreslit, a to tak, aby měl na šířku již zmíněných 670px. To znamená, rozvržení jak má co vypadat bylo nutné vytvořit už před nakreslením podkladů. Následně bylo nutné obrázek v Malování rozřezat tak, aby odpovídal jednotlivým políčkám tabulky. Někdy to bylo až zbytečné, třeba hned v prvním oddílu listingu. Obrázek zde byl rozřezán na čtyři kusy, tabulkou byl pak dán dohromady. Přitom by stačilo vložit obrázek na pozadí divu výše uvedeným postupem a dvě tlačítka následně vložit do něj zarovnané vpravo. Někde už bychom se však bez tabulky neobešli, třeba v oddílu který obsahuje nejvíce textových informací. HTML kód ani ukázku zde tentokrát uvádět nebudu, neboť si vše lze zobrazit ve zmíněném listingu (navíc jsou použité obrázky nahrány na externím serveru, takže by stejně do nově zakládaného listingu nešly použít).

Než si začneme vysvětlovat, jak je tato tabulka vlastně tvořena, podívejme se pro lepší pochopení na její jednotlivé dílky, které jsou na obrázku zvýrazněny zeleně.

Obrazová stránka této tabulky příliš zabrat nedala. Nejpracnější bylo vytvořit vrchní část o šířce 670px.

Pro spodní část stačilo tento obrázek v Malování vodorovně překlopit. Následovaly kraje, které nemusely být nijak moc vysoké, neboť tabulka už si je pod sebe namnoží sama jak bude potřebovat. Hnědá barva pak byla nadefinována slovně, byť by taktéž šlo použít obrázek. No a na hnědé pozadí se musel dát i plamínek. A pak už bylo možné pustit se do samotné tvorby tabulky.

Nejprve definujeme samotnou tabulku. K tomu použijeme následující začátek:
<table style="width: 670px; border-spacing: 0px;" cellspacing="0" cellpadding="0" border="0" align="center">

Co tím říkáme? Že tabulka má mít šířku 670px. Žádné mezery ani ohraničení. A zarovnání na střed. Konec tabulky pak označíme </table>, ale do vnitřku (tedy mezi začátek a konec tohoto tagu) toho musíme ještě hodně vložit.

<tr> nám vytváří řádek tabulky, </tr> nám jej ukončuje. A dovnitř řádků se pak vkládají jednotlivé sloupečky. Do prvního řádku vkládáme sloupeček pouze jeden, zároveň mu však skrze colspan říkáme, že má být roztáhnut přes pět sloupečků (maximum užité v tabulce, ač až o pár řádků níže). Obrázek do něj vkládáme klasicky skrze img, potřebujeme jej zde totiž pouze jednou a on tím nastaví řádku požadovanou výšku.

<td colspan="5" style="text-align: center; padding: 0px;"><img src="https://adresaobrazku" style="max-width: 670px;" class="InsideTable"></td>

Do druhého řádku (<tr>) už vkládáme těch sloupečků více. První (a poslední) je ten s okrajem tabulky. Tento obrázek vkládáme jako background, aby se do dané buňky naduplikoval kolikrát bude potřeba. Zároveň přes width nastavujeme, že tato buňka musí mít šířku 29px.

<td style="text-align: center; padding: 0px;" width="29px" background="http://adresaobrazku"></td>

V druhém sloupečku vidíme další možný zápis barvy, a to pomocí hodnot RGB. Použil jsem jej proto, neboť jsem podkladový obrázek kreslil v Corelu a tyto hodnoty jsem znal. Namísto toho se dá však použít i jiný ze zápisů zmíněných v předchozích příkladech. Skrze text-align zde dále nastavujeme, že text (v našem případě tedy obrázek vlaječky) má být v dané buňce zarovnán vpravo.

<td style="background-color: rgb(175, 117, 58); text-align: right; padding: 0px;" width="79px"><img src="http://adresaobrazku"></td>

Ve třetím sloupečku nastavujeme barvu textu pomocí color. Zde vidíme další možný zápis barvy, tentokrát pomocí jejího názvu (snow). Tomuto sloupečku (vždy jednomu z každého řádku) nenastavujeme šířku, aby se přizpůsobil zbývajícímu místu v tabulce. Pokud bychom přesto šířku nastavit chtěli, pak bychom si museli dát pozor, aby součet šířek všech sloupečků v daném řádku dal dohromady nastavenou šířku celé tabulky. Zároveň opět používáme colspan, tentokrát nastavený na 2, neboť o řádek níže na šířce této buňky budou buňky dvě.

<td colspan="2" style="background-color: rgb(175, 117, 58); text-align: center; color: snow; padding: 0px;"><b>Zveme vás na...</b></td>

Poslední sloupeček v daném řádku je stejný jako ten první, více nového už bychom se patrně z dalšího rozboru kódu nedozvěděli. Pro jistotu tedy alespoň zopakujme, jak má struktura tabulky vypadat:

<table> // začátek tabulky

Další nepříliš využívanou věcí jsou v daném listingu kotvy. Ty umožňují posunout se ve stránce tam, kam je potřeba. V případě zmíněného listingu to je obrázek oné klády s vlajkami. Tvorbu samotné klády asi nemusím nijak rozvádět - je to prostě jeden nakreslený obrázek, který byl následně v Malování rozdělen na sedm obrázků. Začátek, konec, a pět částí s vlajkami. Do listingu jsou vloženy jako úplně normální obrázky, ty s vlajkami však odkazují na požadovanou kotvu. Například u slovenské vlajky je nastaven odkaz na #sk. Po kliknutí na tuto vlajku se listing posune na začátek tabulky se slovenským listingem, neboť právě tam je v HTML kódu zadáno následující:

<a name="sk"></a>

Pokud však neovládáte HTML, není vůbec potřeba přepínat z WYSIWIG editoru do Source. Samotný editor totiž obsahuje ikonku vlaječky nazvanou Anchor. Tím můžete vytvořit kotvu tam, kde právě máte v editoru nakliknuto. Vlaječka po vás bude pouze chtít vymyslet název kotvy. A odkážete na ni podobně, jako byste chtěli nějakému textu přiřadit odkaz, pomocí ikonky Link v editoru. V okně které se objeví vyberete v LINK TYPE (standardně navoleno URL) Link to anchor in the text, následným kliknutím na zaškrtávátko by anchor name už dostanete na výběr z existujících kotev v daném listingu.