Kostka nyní podporuje několik značek, které se překládají na jazyk HTML. Vyjma několika drobností se dá říci: "Znáte-li HTML, máte vyhráno".
Pokud ne, pokusím se zde shrnout co je možno pomocí něj stvořit a to včetně ukázek.
Obecné funkce
Značky jsou buď párové, nebo nepárové. Párovostí je myšleno, že platí od místa otvírací značky
[b]až do místa jejího uzavření[/b]. Nepárové pak tvoří jen jedna značka. [img src="http://www.d20.cz/data/U/unknown.png" alt="d20kostka" title="Ikona neregistrovaného uživatele"]
Jelikož se pro zápis značek využívá znak "[" a někdy se vyskytne potřeba zobrazit i tento znak, je vyčleněn znak zpětného lomítka "\" které zruší speciální význam následujícího jednoho znaku. Pro výpis [a] se tedy musí zadat \[a\]. I samo lomítko lze vypsat stejnou cestou. Pro výpis zpětného lomítka se text použijí zpětná lomítka dvě "\\".
Formátování
Základní formátovací značky jsou:
[b]tučné písmo[/b]
[i]kurzíva[/i]
[u]podtržení[/u]
Blokové formátování
Bez většího rozebírání se blokové formátování od předchozího líší v tom, že obsah je zabalen do samostatného bloku, který ukončuje původní tok textu a začne "na novém řádku".
Takže copak tu máme:
Nejprve obecné značky
[h1]nadpis 1[/h1]
[h2]nadpis 2[/h2]
[h3]nadpis 3[/h3]
[h4]nadpis 4[/h4]
Pokud chcete formát písma s pevnou šíří včetně mezer, slouží k tomu značka "pre". Touto značkou obalíte text. Text poté nebude nijak měněn. To znamená, že nedojde ani k zalomení dlouhé řádky.
[pre]
* Text bez formátování
* který není dále
* nijak formátován
* a každý znak má pevnou šířku.
***** _-_-_-,. _-_-_-,. _-_-_-,.
**-----** | O O || | O O || | O O ||
**\2 0/** vs | O O || | O O || | O O ||
***'.'*** | O O || | O O || | O O ||
***** '------' '------' '------'
[/pre]
Jako další blokový element slouží "div". Jedná se o obecný blokový element. Jeho účel je pouze v ohraničení nějakého bloku textu, kterému lze poté definovat další vlastnosti dle CSS.
CSS je jazyk kaskádových stylů ... velmi intuitivní jazyk. font-size nastavuje velikost fontu, width:11cm znamená šířku bloku 11 centimetrů. Samozřejmě je třeba vědět co napsat. V dnešní době se CSS zabývá spousta webů. Uvedu ten, u kterého jsem začínal. Tím je
jakpsatweb, kde se lze o CSS vlastnostech dozvědět více. Jen bych zde podotknul, že i když je to možné, neměňte barvu textu, jeho pozadí nebo rámečků. Může to nyní vypadat dobře, nikdy ale nevíte na jakém podkladu a s jakým okolím bude text zobrazen za několik měsíců.
[div style="text-width:bold; font-size:1.5em;"]
Takže tučný text s trochu větším fontem zde asi neočekával málokdo. Jednoduché že?
[/div]
Další elementy popíšu pouze zběžně. Všechny totiž vycházejí z "div" elementu, pouze už mají přednastaveny určité vlastnosti.
[p] je párový element, kterým by se měli obalovat odstavce textu.
[cite] stejně jako [q] je párový element, kterým by se měli obalovat citace.
Tabulky
Tabulky jsou v některých ohledech spása. Vytvářejí se poměrně jednoduše, ovšem nejsou příliš čitelné při návrhu.
Kostka | Rozsah | Pozn. |
---|
k4 | 1-4 | Při našlápnutí horší jak ježci |
k6 | 1-6 | Šestek není nikdy dost |
k8 | 1-8 | V podstatě dekorace |
[table style="width: 10cm;"]
[tr][th]Kostka [/th][th]Rozsah [/th][th]Pozn.[/th][/tr]
[tr][td]k4 [/td][td]1-4 [/td][td]Při našlápnutí horší jak ježci[/td][/tr]
[tr][td]k6 [/td][td]1-6 [/td][td]Šestek není nikdy dost[/td][/tr]
[tr][td]k8 [/td][td]1-8 [/td][td]V podstatě dekorace[/td][/tr]
[/table]
Značka [table] označuje začátek tabulky.
[tr] začíná nový řádek a [/tr] jej ukončuje.
[td] obaluje obsah buňky tabulky a uzavírá jej [/td]
"th" je obdoba "td" pouze by mělo být použito pouze pro hlavičkové řádky tabulky.
Seznamy
Můžeme mít klasický odrážkový seznam.
- Odrážka 1
- Odrážka 2
- Odrážka 3
- Pododrážka 3.1
- Pododrážka 3.2
- Pododrážka 3.3
[ul]
[li]Odrážka 1[/li]
[li]Odrážka 2[/li]
[li]Odrážka 3
[ul]
[li]Pododrážka 3.1[/li]
[li]Pododrážka 3.2[/li]
[li]Pododrážka 3.3[/li]
[/ul]
[/li]
[/ul]
nebo číslovaný seznam
- Odrážka
- Odrážka
- Odrážka
- Pododrážka
- Pododrážka
- Pododrážka
[ol]
[li]Odrážka[/li]
[li]Odrážka[/li]
[li]Odrážka
[ol]
[li]Pododrážka[/li]
[li]Pododrážka[/li]
[li]Pododrážka[/li]
[/ol]
[/li]
[/ol]
Odkazy
K dalším značkám patří například odkaz
[a href="http://www.d20.cz/" title="Stránky d20"]
Stránka d20[/a]
Do "href" se vyplňuje HTTP adresa. Musí se vyplnit včetně HTTP, jinak je považována za relativní. Relativní znamená, že se před ní automaticky doplní cesta, na které se nacházíte. Pokud například vyplníte pouze "www.mojestranky.cz", tak odkaz nepovede na vaše stránky, ale na "http://www.d20.cz/www.mojestranky.cz" což je samozřejmě nesmysl.
Obrázky
Pro vkládání obrázků slouží nepárový tag "img".
[img src="http://www.d20.cz/data/U/unknown.png" alt="d20kostka" title="Ikona neregistrovaného uživatele"]
Pro odkaz zapisovaný do "src" platí to co v předchozím případě. Pokud si nejste jisti použitím, zapište úplnou cestu k obrázku.
Zalomení
Pod zalomením je myšleno vložení horizontální čáry. [hr]
Co se může hodit
Každému blokovému prvku lze nastavit šířku například
[div style="width:5cm"]
tento text bude zalamován jakmile dosáhne délky pěti centimetrů.
[/div]
[img style="float:right;" src="http://www.d20.cz/data/U/unknown.png" alt="d20kostka" title="Ikona neregistrovaného uživatele"]
Každému blokovému prvku jde nastavit obtékání. Obtékání může být pravé (element se poté přichytí u levé strany stránky) a nebo levé (přichytí se na pravé straně). Další elementy i text se poté snaží nejprve zaplňit místo okolo něj.
Ukončení obtékání plovoucího elementu nastává při jeho celkovém obtečení, nebo pokud následující element má nastavenu vlastnost style="clear:both"
stejný efekt se dosáhne zápisem [div class="break"][/div]
Text
[div class="break"][/div]
A další text již je pod obrázkem.
Co dodat
Při ukládání se provádí kontrola párování tagů. Cílem kontroly je, aby nedošlo k narušení "párovosti" v rámci celých stránek. Ve vlastním zájmu se vyhněte křížení, nebo neuzavírání tagů. Nedodržování může znamenat podivné výsledné zobrazení.