Zdrojový kód

Každý príspevok je odosielaný vo forme HTML, takže všetky normálne HTML tagy tu budú fungovať. Taktiež jednotlivé elementy sa dajú upravovať pomocou CSS, a práve o tom bude tento článok.

Príklady HTML tagov často používaných v týchto editoroch:

<p>obyčajný odsek textu</p>

<strong>hrubý text</strong>

<em>kurzíva</em>

<span style="color:red;">text, ktorý je inak štylizovaný (napríklad farba textu, podčiarknutie,...), v tomto prípade má text červenú farbu</span>

<ul> - začiatok odrážkového zoznamu

     <li>1. položka v odrážkovom zozname</li>

     <li>2. položka v odrážkovom zozname</li>

</ul> - ukončenie odrážkového zoznamu

<a href="http://www.eragon-online.net/">Odkaz na link zadaný v "href"</a>

<img src="http://www.eragon-online.net/obrazok.jpg"/> - vloženie obrázka

<div> Ďalší odsek textu, ktorý môžete štylizovať </div>

<div style="width:150px; border:1px solid black;">Odsek široký 150 pixelov, s čiernym celým okrajom širokým jeden pixel.</div>

<div class="bubble">Obkolesenie textu</div> 

Nadpisy:

<h1>Nadpis prvej úrovne, najväčší</h1>

<h2>Nadpis druhej úrovne, o niečo menší</h2>

...

<h6>Nadpis najmenšej úrovne</h6>

Ako tieto príklady vyzerajú v praxi?

obyčajný odsek textu

hrubý text

kurzíva

text, ktorý je inak štylizovaný (napríklad farba textu, podčiarknutie,...), v tomto prípade má text červenú farbu

• 1. položka v odrážkovom zozname
• 2. položka v odrážkovom zozname

Odkaz na link zadaný v "href"

 Možné CSS pre formátovanie blokov textu či obrázkov (všetky treba vložiť do style=""):

width/height: Šírka a výška elementu. Môže byť zadaná buď v pixeloch, alebo percentách. Odporúčam používať len pixely. Príklad: width:500px

border: Okraj elementu. Ako prvé treba zadať šírku okraja (v pixeloch), potom typ okraja a následne farbu okraja (môže byť akákoľvek, názov alebo hexadecimálny kód). Hlavné typy okrajov:

• solid - neprerušený
• dotted - bodkovaný
• dashed - čiarkovaný
• double - dvojitý

Príklad: border: 2px dashed blue;

border-radius: Veľkosť zaoblených rohov, v pixeloch. Príklad: border-radius:10px;

margin: Voľné miesto okolo elementu (v pixeloch), hodí sa najmä pre obrázky, aby neboli nalepené hneď na texte. Ak chcete nastaviť rôzne odsadenie elementu na každej jeho strane, odporúčam pozrieť toto. Príklad: margin:10px;

padding: Voľné miesto vnútri elementu (v pixeloch), odsadenie od kraja elementu. Ak chcete nastaviť miesto vnútri elementu rozdielne na každej jeho strane, odporúčam pozrieť toto. Príklad: padding:20px;

color: Farba textu elementu. Príklad: color:#FFFFFF;

background-color: Farba pozadia elementu. Príklad: background-color:red;

float: Zarovnanie elementu vzhľadom k ostatným elementom. Element bude nalepený na danú stranu, a ostatné elementy pôjdu okolo neho. Veľmi užitočné pre obrázky! Príklad: float:right;

text-align: Zarovnanie textu elementu, možné hodnoty sú left, right, center a justify (text je na celú šírku). Príklad: text-align:right;

text-decoration: Mierne ozdobenie textu. Overline (čiara nad textom), Underline (podčiarknutý text) alebo Line-through (prečiarknutý text). Príklad: text-decoration:line-through;

text-transform: Mení veľkosti písmen. Uppercase (všetky písmená elementu veľké), Lowercase (všetky písmená malé) a Capitalize (prvé písmeno každého slova veľké). Príklad: text-transform:capitalize;

font-size: Veľkosť písma v pixeloch. Normálna veľkosť je 12 pixelov. Príklad: font-size:14px;

Trocha rozsiahlejší príklad

<div style="width: 70%; height: 100px; border:5px dotted darkred; margin:10px; padding:8px; color:#eeaaee; background-color:#262626; float:right; text-align:justify; border-radius:10px;">Toto je nejaký úplne random text :D Výška 100 pixelov, šírka 70 percent, päťpixelový bodkovaný okraj tmavočervenej farby, odsadenie 10 pixelov zvonka a 8 pixelov zvnútra, farba textu ružová, pozadie tmavé, celý element zarovnaný doprava akurát text je zarovnaný na celú šírku elementu. Celý element má zaoblené rohy s veľkosťou 10 pixelov. <span style="text-decoration:line-through;">Tento text je prečiarknutý</span> a <span style="text-transform:uppercase;">tento text je veľkými písmenami</span></div>

Takto vyzerá v praxi:

Obkolesenie textu

Ak sa ti to stane a zobrazíš zdrojový kód, budeš tam vidieť niečo takéto:

<div class="bubble">Obkolesenie.</div>

<div class="bubble">Obkolesenie, čo sa vytvorí po stlačení enteru.</div>

Najprv povymazávaj prebytočné DIV tagy, vznikne ti niečo takéto:

<div class="bubble">Obkolesenie.

Obkolesenie, čo sa vytvorí po stlačení enteru.</div>

To však celkom nestačí, musíš ešte pridať odseky, aby bol text oddelený:

<div class="bubble"><p>Obkolesenie.</p>

<p>Obkolesenie, čo sa vytvorí po stlačení enteru.</p></div>

Nie je to síce najlepšie riešenie, no inak sa to nedá. Preto veľmi odporúčam najprv napísať text čo chceš mať obkolesený, a až potom ho obkolesiť (alebo aspoň kostru textu, do ktorej to potom dopíšeš, najlepšie bez enteru :D).

Samozrejme, aj toto pekné obkolesenie môžeš prispôsobiť tak, ako potrebuješ. Nastaviť mu šírku, výšku, zarovnať ho doprava, zmeniť okraje a okrúhle rohy, farbu pozadia či textu,... proste všetko to, čo sa dá robiť s normálnym DIV elementom.

Formátovanie obrázkov

Formátovanie obrázkov je o niečo jednoduchšie, ako formátovanie normálnych elementov. Pri vkladaní obrázka stačí zvoliť Pokročilé nastavenia, a do políčka Štýl zadať CSS kód, ktorý by bol inak v zdrojovom kóde vnútri style="".

Nasledujúce nastavenie prilepí obrázok napravo a horizontálny priestor nastaví na 50 pixelov:

 Ak chcete meniť veľkosť obrázku, nenastavoval by som ju v menu "Hlavné", ale rovno v textovom editore.