2. Szövegek formázása

Betűformázás

Miután (reményeim szerint) sikeresen megtanultuk a HTML alapjait, vegyük át, hogyan kell egy teljesen nyers szöveget megformázni. Mindjárt az elején leszögezném, hogy HTML-ben merőben más módszerekkel lehet a szöveget megformázni, és teljesen más lehetőségeink vannak. Nem lehet például hasábokba szedni a szöveget (helyesebben lehet, csak kicsit máshogy mint azt az ember gondolná - de erről a trükköknél), nem lehet sortávot beállítani, a betűk mérete csak meghatározott nagyságú (összesen hétféle) lehet, nincs sorkizárt igazítás, stb.

Nagyon azért nem kell megijedni, mert az alapvető formátumok, mint például a félkövér, dőlt vagy éppen aláhúzott betűk itt is alkalmazhatóak. Az első és legfontosabb a tag, mellyel a szöveg méretét, színét (itt elsősorban kiemelőszínekre gondolok, hiszen a normál szöveg és a linkek színét már a <BODY> taggel beállíthattuk), betűtípusát szabályozhatjuk. A betűk méreténél nem a szövegszerkesztőkben megszokott pixel-mérettel állíthatjuk be, hanem egy sorszámmal, egytől hétig. A normál betű mérete alapesetben 12 pixel, ami itt a 3-as méretnek felel meg. A Nagyobb szöveg például 5-ös méretben jelenik meg (18 pixel). A betűk méretét még egy módon megadhatjuk, még pedig viszonyítva az alapmérethez. Az előbbi méretet például oly módon is megadhatjuk, hogy a SIZE="5" helyett SIZE="+2"-t írunk (gondolom azt senkinek sem kell elmagyarázni, hogy 3+2=5). Ennek a módszernek különösen akkor van jelentősége, ha az alap-betűméretet megváltoztatjuk. Erre e műveletre a <BASEFONT> tag ugyancsak SIZE attribútumát használjuk.

A betűtípust szintén a tagben, mégpedig a FACE attribútummal adhatjuk meg. Nagyon fontos azonban, hogy tekintettel kell lennünk az oldalt olvasó gépére, egészen pontosan, hogy megtalálható-e rajta az általunk megadott betűtípus. Ez sokszor igen nagy gondokat okoz, éppen ezért lehetőség van arra, hogy nem csak egy betűtípust, hanem akár egy egész listát is megadjunk. Ajánlom azonban a legismertebb betűtípusok használatát, főleg azokat, melyeket a Windows alapban telepít. Ha például azt akarjuk, hogy az oldal Verdana-betűtípussal jelenjen meg, de ha az éppen nincs rajta, akkor Helvetica-val, illetve ha az sincsen rajta, akkor Arial betűtípussal, akkor használjuk a következő kódot: Talp nélküli szöveg. Mellesleg nem kell attól tartanunk, hogy az oldal szövege nem jelenik meg, ha az adott betűk nincsenek a gépen, valamilyen betűvel mindenképp be fog jönni (A Windows általában a Times-t használja alapnak). A taggel állíthatjuk még be a szöveg színét, melyhez a COLOR attribútumot használjuk, és RGB-kódot alkalmazunk.

Egyes szavak, de akár egy egész szöveg megkülönböztetéséhez szokásos használni félkövér, aláhúzott vagy éppen dőlt betűket. Erre mind külön tagek állnak rendelkezésre. A következő minta bemutatja a tageket, valamint azok használatát: Ebben a szövegben van félkövér, dőlt és aláhúzott szó is. Amennyiben azt akarjuk, hogy egy szó több "különleges" tulajdonsággal is rendelkezzen, ezt oly módon érhetjük el, hogy a tageket egymásba ágyazzuk.

Főleg régebben, de néha még ma is komoly gondokat okoz például az ékezetes betűk helyes megjelenítése. Alapesetben például az ő és ű betűk is helytelenül jelenhetnek meg. Erre az a megoldás, hogy az oldal fejlécében - metainformációként - megadjuk a használni kívánt karakterkészletet, mely jelen esetben például a közép-európai ISO-8859-2-es szabvány: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">Őő Űű. Alapesetben a böngészők a nyugat-európai szabványt, az ISO-8859-1-et használják. Gondot jelenthet még egyes speciális karakterek megjelenítése. A mai böngészők már nagyjából helyesen jelenítik meg az ilyen jeleket, azonban olykor célszerű lehet kódolni az efféle karaktereket. Sőt, például a <, >, " valamint az & szimbólumokat egyes esetekben lehetetlen máshogy megadni. Ha például csak lazán beírunk a forráskódba egy szöveget < és > jelek közé téve, akkor (miután a legtöbb böngésző tagnek hiszi, de a "parancsot" nem tudja értelmezni) ez a szövegrész vélhetően egyszerűen ki fog maradni. Éppen ezért az ilyen szövegrészt a következőképp kell megadni: <Kutyaszájak közé írt szöveg>. Az iménti kódban az < (lower than) kód a <, az > (greater than) kód pedig a > karaktert eredményezi. A kódot mindíg az & (és-jel) nyitja meg és pontosvessző zárja le, közéjük pedig vagy az előbb is használt angol rövidítéseket, vagy pedig egy #-et követő sorszám szerinti kódolást írunk. Az előbbi jelek például ugyanúgy előhívhatóak az < illetve az > kódokkal. Az ilymódon használható betűk és jelek listája igen hosszú, a függelékben megtalálható.

Bekezdések formázása

A megformázott szöveg termászetesen úgy teljes, ha nem csak a szavakat, mondatokat formázzuk kedvünk és ízlésünk szerint, de a sorok, bekezdések is kellően elkülönülnek egymástól. Sortörést például a (break) taggel érhetünk el. Ha nem csak új sort, hanem új bekezdést akarunk nyitni, akkor ezt a (paragraph) taggel jelöljük. Ebben az esetben a böngésző egy üres sort is be fog ékelni a két bekezdés közé. A szöveg igazítását kétféle módon is megadhatjuk, elsőként az előbb említett tag ALIGN attribútumának értékeivel. A Középre zárt szöveg tag például középre igazítja a bekezdést. A másik módszerrel nemcsak bekezdések, hanem kijelölt szövegrészek, de akár az egész szöveg is formázható, amire egy másik tag, a <DIV> használatos az előbbivel megegyező módon.

Létezik még egy tag, mely kezd kimenni a divatból, bár egyes esetekben még mindíg kénytelenek vagyunk alkalmazni, ez pedig a <CENTER> tag. A középre zárandó objektum elé illesszük ezt a taget, majd utána zárjuk is le a hagyományos módon.

Összefoglalásképp írjunk egy egyszerű oldalt, melyben kipróbáljuk a fentebb megismert újdonságokat! Az oldal a következő jellemzőkkel bírjon:

- Az oldal alapszövege 4-es méretű és sötétzöld, illetőleg Verdana, annak hiányában Arial típusú legyen
- Az címsor 6-os méretű, félkövér, dőlt és piros legyen, valamint legyen középre igazítva
- Ügyeljünk arra, hogy az ékezetes betűk is helyesen jelenjenek meg
- A speciális karaktereket kódoltan adjuk meg, akár többféle módon is
- Az oldal szövege az alábbi legyen:
"HTML-ről röviden

A Hypertext Markup Language-ban a parancsokat tagekkel adjuk meg, melyekhez attribútumokat is használhatunk. Az oldal logikailag két részből áll:
ť fejléc (header)
ť törzs (body)

A tageket kisebb-nagyobb jelbe tesszük, így: <tag>, az attribútumokat pedig ezeken belül használjuk.

vége"

És akkor íme a forráskód:

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
</HEAD>
<BODY TEXT="#007F00">
<BASEFONT SIZE="4">
HTML-ről röviden
A Hypertext Markup Language-ban a parancsokat tagekkel adjuk meg, melyekhez attribútumokat is használhatunk. Az oldal logikailag két részből áll: 
» fejléc (header) 
» törzs (body)
A tageket kisebb-nagyobb jelbe tesszük, így: <tag>, az attribútumokat pedig ezeken belül használjuk.
vége
</BODY>
</HTML>

Összefoglalás

Tag	Attribútum	Hozzárendel- hető érték	Magyarázat
B	-	-	félkövér szöveg
BASEFONT	SIZE	[szám 1-7]	alap betűméret
BR	-	-	sortörés
CENTER	-	-	középre igazítás
DIV	ALIGN	left, center, right	szöveg igazításának iránya
FONT	COLOR	#[RGB-kód]	szöveg színe
	FACE	[név]	betűtípus(ok)
	SIZE	[szám 1-7]	betűméret
I	-	-	dőlt szöveg
P	-	-	új bekezdés
	ALIGN	left, center, right	bekezdés igazításának iránya
U	-	-	aláhúzott szöveg

Félkövér
<BASEFONT SIZE="3">Normál méret
Sor- törés
<CENTER>Középre igazított szöveg</CENTER>
<DIV ALIGN="center">Középre igazított szöveg</DIV>
Fehér szöveg
Times betűk
Nagyon kicsi szöveg
dőlt betűk
Új bekezdés
Jobbra zárt szöveg
Aláhúzott szöveg

Előző fejezet
Következő fejezet