Články a formátování

Základní souhrn formátovacích možností, které v článcích lze využít. Pamatujte ale že méně je někdy více, více je někdy méně ... stejně jako více je někdy více a méně je někdy méně. Zkrátka co je navíc, to překáží.
Napsal Max
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

  1. Odrážka
  2. Odrážka
  3. Odrážka
    1. Pododrážka
    2. Pododrážka
    3. 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"]
d20kostka

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"]
d20kostka
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]

d20kostkad20kostkad20kostka
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í.
Napsal Max 22.10.2009
Diskuze k tomuto článku již probíhá, můžete se přidat zde.
Obsahuje 224 příspěvků.
Věděli jste, že...
Na d20.cz můžete mít svůj vlastní blog. Pokud chcete napsat o nečem, co alespoň vzdáleně souvisí s RPG, můžete k tomu využít našeho serveru. Tak proč chodit jinam? >> více <<
Jak se chovat v diskuzích
Přehled pravidel pro ty, kteří k životu pravidla potřebují. Pokud se umíte slušně chovat, číst to nemusíte. >> více <<
Formátování článků
Stručné shrnutí formátovacích značek zdejších článků, diskuzí, blogů a vůbec všeho. Základní životní nutnost. >> více <<
ČAS 0.16732716560364 secREMOTE_IP: 23.20.157.174