Mamičkovská škola HTML – štýlovanie

Štýlovanie pomocou CSS

Prečítali ste si aj úvodný diel?

Aj na poli tvorby webových stránok dochádza k vývoju. Vyvíja sa jazyk HTML, prispôsobujú sa mu nové verzie browserov. A ak sa snažíte ísť ruka v ruke s dobou a pravidelne vymieňate počítač, tablet či mobil, alebo jednoducho povoľujete browserom nainštalovať si ich novú verziu, je dobré vedieť, že HTML príkazy vznikajú i zanikajú. Avšak namiesto tých zaniknutých existuje náhrada – kaskádové štýly (Cascading Style Sheet v skratke CSS).

 

Pôvodný článok o HTML spomínal párový tag <font> </font> používaný na nastavenie typu a farby textového fontu. Možnosti tvorby webstránok sa však rozširujú, preto sa menej dôrazu kladie na používanie HTML tagov a čoraz viac na štýlovanie pomocou CSS.

Takže ak sme v predošlých verziách jazyka HTML textu prisúdili vlastnosti priamo pomocou spomínaného tagu, v najnovšej verzii (HTML5) na to použijeme štýlovanie.

Vo všeobecnosti platí, že ak chceme nastaviť vlastnosti akéhokoľvek HTML tagu pomocou štýlovania, súčasťou tagu je príkaz style, čo sa zapisuje nesledovne:

<tag style=”vlastnosť:hodnota;”>formátovaný text</tag>

Ako príklad formátovania textu použijeme na tomto mieste neutrálny (nemá svoje vlastné formátovanie) párový tag <span> </span>, ktorý slúži na umiestnenie prvkov webstránky v riadku za sebou.

V predošlom článku sme použili na formátovanie textu párové tagy <p> </p> ohraničujúci odstavec voľného textu, a <div> </div> ohraničujúci blok.

Typ fontu

Ak chcete meniť typ fontu, mali by ste si byť vedomí toho, že môže nastať problém vo vašom designe, pokiaľ príslušný typ fontu nie je nainštalovaný na klientskom počítači (teda na všetkých tých počítačoch, čo používajú ľudia čítajúci váš príspevok). Preto je vhodné voliť najrozšírenejšie typy fontov.

V tabuľke uvediem aspoň niektoré:

ako to vyzerá	ako sa to napíše
font arial	kedysi: <font face=“arial“>font arial</font> dnes: <span style=”font-family:Arial;“>font arial</span>
font comic sans ms	kedysi: <font face=“comic sans ms“>font comic sans</font> dnes: <span style=”font-family:comic sans ms;”>font comic sans</span>
font bookman old style	kedysi: <font face=“bookman old style“>font bookman old style</font> dnes: <span style=”font-family:bookman old style;”>font bookman old style</span>
font courier	kedysi: <font face=“courier“>font courier</font> dnes: <span style=”font-family:courier;“>font courier</span>
font impact	kedysi: <font face=“impact“>font impact</font> dnes: <span style=”font-family:impact;“>font impact</span>

Farba fontu

ako to vyzerá	ako sa to napíše
font arial červeným	kedysi: <font face=“arial“ color=“red“> font arial červeným </font> dnes: <span style=”font-family:Arial;color:red;“> font arial červeným </span> alebo: <span style=”font-family:Arial;color:#FF0000;“> font arial červeným </span>

Na určovanie farby sa dajú použiť dve možnosti:

Farbu môžete špecifikovať tzv. RGB hexadecimálnym číslom, ktoré musí začínať znakom #. Tri páry číslic, resp. písmen za “hashtagom”, určujú úroveň farebných zložiek R (red) = červenej, G (green) = zelenej a B (blue) = modrej od najtmavšej (00) po najsvetlejšiu (FF). Kombináciou #000000 je teda zakódovaná čierna farba, naproti nej bielu zapíšete ako #FFFFFF.. Príslušné číslo k vami požadovenej farbe nájdete v lepšom grafickom editore (napr. Adobe Photoshop) alebo v zoznamoch farieb na webe (napríklad na w3schools)

Mená 16 základných farieb sú s troškou porozumenia angličtiny celkom dobre zapamätateľné, vtedy stačí uviesť napr. style=”color:yellow;”.

farba	meno	hexadecimálny kód
	Black	#000000
	Silver	#C0C0C0
	Gray	#808080
	White	#FFFFFF
	Maroon	#800000
	Red	#FF0000
	Purple	#800080
	Fuchsia	#FF00FF
	Green	#008000
	Lime	#00FF00
	Olive	#808000
	Yellow	#FFFF00
	Navy	#000080
	Blue	#0000FF
	Teal	#008080
	Aqua	#00FFFF

Špeciálne znaky

Ak ste sa chceli vyblázniť viac, ako len napísaním obyčajného textu, je možné, že ste chceli napísať niečo neštandardné. Špeciálny znak. Alfu a omegu. Guličku či štvorček. Biznis znaky ako kopyrajt (céčko v krúžku), znak registrované (erko v krúžku), znaky svetových mien ako sú britská libra či japonský jen, ktoré nenájdete na klávesnici tak, ako dolár a novšie aj euro.

Dokonca nie všetky znaky z klávesnice možno použiť priamo. HTML totiž využíva ako ohraničenia svojich príkazov znaky &lt; a &gt;, preto ak nimi budete chcieť v texte trebárs porovnávať čísla, narazíte na to, že browser ich môže interpretovať ako začiatok a koniec HTML tagu a váš text nebude vyzerať podľa očakávaní. A tak tieto znaky nahraďte “príkazom” &lt; a &gt; (nezabudnite takýto príkaz vždy ukončiť bodkočiarkou).

Niektorým z vás možno v hlavách skrsla myšlienka, či nebude podobný problém aj so samotným znakom &? Áno, môže byť problém, pretože ako sme si ukázali na predošlom príklade, znak & sa používa ako signál pre browser, že tu začína špeciálny kód. A končí až bodkočiarkou. No a ak chceme napísať samotné &, aj preňho máme príkaz. Tento znak sa volá ampersand, a v príkaze na jeho vypísanie sa použije skratka tohto slova – &amp;.

Vráťme sa ešte na chvíľu k znakom “väčšie” a “menšie”. Aj ich príkazy používajú skratky z angličtiny. V tomto prípade &gt; z výrazu “greater than = väčší ako” a &lt; z výrazu “less than = menší ako”.

A takto si vďaka angličtine vysypete z rukáva mnoho ďalších znakov. Napríklad &alpha; pre malú alfu, &Alpha; pre veľkú, &omega; pre malú omegu, &Omega; pre tú veľkú. Napríklad &rarr; pre šípku doprava (right arrow), &larr; pre šípku doľava (left arrow). &copy; pre C v krúžku, &reg; pre R v krúžku.

Ďalšie príklady nájdete napr. na W3Schools: Entity Symboly Šípky

Odsadenie textu

ako to vyzerá	ako sa to napíše
odsadenie textu naľavo	kedysi: <div align=“left“>odsadenie textu naľavo</div> dnes: <div style=“text-align:left;“>odsadenie textu naľavo</div>
text v strede	kedysi: <div align=“center“>text v strede</div> dnes: <div style=“text-align:center;“>text v strede</div>
odsadenie textu napravo	kedysi: <div align=“right“>odsadenie textu napravo</div> dnes: <div style=“text-align:right;“>odsadenie textu napravo</div>