HyperText Markup Language/Szövegformázás

A HTML-ben van pár tag amivel alapvető formázásokat érhetünk el. Íme:

<b> félkövér (bold)
<i> dőlt (italic)
<ins> aláhúzott (inserted)
<del> áthúzott (deleted)
<tt> fix szélességű betűk (teletype)
<sup> felső index (superscript)
<sub> alsó index (subscript)

A további formázások alkalmazására az ún. Cascading Style Sheets (CSS) használható. Ez lehetővé teszi, hogy különböző stílusokat hozzunk létre bizonyos szövegekhez. Ezeket a stílusokat aztán alkalmazhatjuk a szövegekkel kapcsolatos tagekben. Mi most helyben fogjuk létrehozni ezeket, méghozzá a style attribútummal.

A formázások alkalmazására a <span> taget fogjuk használni. Ez önmagában alkalmazva nem csinál semmit, a különböző attribútumok használatával lehet variálni a hatásait.

A style attribútumon belül a color opcióval lehet megadni a szöveg színét. Az opció neve után tegyünk kettőspontot, az érték után pedig pontosvesszőt. Az értéket háromféleképpen is meg lehet adni: angolul egy szín nevével, hexadecimális értékkel, vagy RGB színkóddal.

<span style="color:blue;">kék</span>
kék
<span style="color:#0000FF;">kék</span>
kék
<span style="color:rgb(0,0,225);">kék</span>
kék

A méretet a font-size opcióval lehet módosítani. Az értéket itt kétféleképpen adhatjuk meg: pixelnagyságban (a szám után oda kell írni, hogy "px"), vagy angolul a nagysággal.

<span style="font-size:18px;">18 pixel</span>
18 pixel
<span style="font-size:x-small;">x-small</span>
x-small

A megadható értékek: xx-small, x-small, smaller, small, medium, larger, large, x-large, xx-large.

Betűtípus

szerkesztés

A betűtípus választásánál az opció neve: font-family. Fontos megjegyezni, hogy ha olyan betűtípust adunk meg, ami a böngésző gépén nem található, akkor az alapértelmezett betűtípus jelenik meg.

<span style="font-family:Verdana;">Verdana</span>
Verdana
<span style="font-family:Arial;">Arial</span>
Arial

Igazítás

szerkesztés

A szöveg elhelyezkedését text-align opcióval lehet beállítani. Az érték a következők valamelyike lehet: left (bal), right (jobb), center (középre), justify (sorkizárt).

Mellesleg ezen szöveg írásakor a <span>-nal nem igazán akart működni ez az opció, úgyhogy a bekezdést - <p> - használtuk.

<p style="text-align:left;">balra igazított</p>

balra igazított

<p style="text-align:right;">jobbra igazított</p>

jobbra igazított

<p style="text-align:center;">középre igazított</p>

középre igazított

<p style="text-align:left;">sorkizárt</p>

sorkizárt

A beállításokat nyugodtan lehet keverni is:

<p style="color:green; text-align:center; font-family:Times New Roman; font-size:20px;">

Szöveg...</p>

Szöveg...