Registrovaní hráči: 118
Hrdinovia: 98
Hrajúce sa questy: 8

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"

 

Ďalší odsek textu, ktorý môžete štylizovať
 
Odsek široký 150 pixelov, s čiernym celým okrajom širokým jeden pixel.
Obkolesenie textu

 

 

 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ť totoPrí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:

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. Tento text je prečiarknutý a TENTO TEXT JE VEĽKÝMI PÍSMENAMI.

 

 

 

 

 

 

 

 

Obkolesenie textu

Takto pekne sa dá obkolesiť text jedným tlačítkom! Má to však jednu chybičku...
Ak stlačíš enter, vznikne nový element s obkolesením. Preto musíš pozrieť do zdrojového kódu a opraviť to, alebo najprv napísať text a potom ho obkolesiť. Písať jeden odsek bez enteru sa dá však jednoducho, ako môžeš vidieť.

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.


19:41:12 04.08.2015 by Méďo