Lapformázás

Kezdjük a legnagyobbtól: lapformázás

A legtöbb HTML oktató a legkisebb elemtől kezdi az oktatást, azaz a karakterektől. Hogyan formázzuk a megjelenő szöveget: betűméret, betűtípus, betűstílus. Erre is sort kerítek, de ne legyünk "szokásosak", kezdjük fordítva.
Gondolkodjunk egy kiadványszerkesztő fejével: az a feladatunk, hogy elkészítsünk egy reklámanyagot. A könnyebbség kedvéért legyen csupán egy oldalas! Mi az első dolog, amit mindenképpen meg kell fogalmazzunk? Nálam a tervezés mindig a lap színeinek meghatározásával kezdődik. Milyen színű lesz a lap, amire maga az anyag kerül? Milyen színű lesz az alap betűkészlet, amivel írni fogok rá? Mivel weblapokról van szó, külön meg kell határozzuk a linkek színét is.
Mindehhez a <BODY> tag hat attribútumát használhatjuk:
<BODY> attribútumleírás

text | A szöveg színét adhatjuk meg a szín angol nevével vagy hexadecimális kóddal.
link | A még nem látott linkek színét lehet megadni a szín angol nevével vagy hexadecimális kóddal.
vlink | A már látott linkek színét lehet megadni a szín angol nevével vagy hexadecimális kóddal.
alink | A megadott színűvé válik a link, ha éppen rákattintunk. Itt is a szín angol nevét vagy hexadecimális kódot alkalmazhatunk.
bgcolor | A háttérszínt adhatjuk meg a szín angol nevével vagy hexadecimális kóddal.
background | Itt értékként megadhatjuk egy képfájl elérési útját. Amikor valaki megnyitja az oldalt, a böngésző a megadott képpel telepakolja a weblapot, tehát addig rakja egymás mellé és alá, míg ki nem tölti teljesen az oldalt.

Lássunk erre egy példát:
[HTML]××[HEAD]×¤[META http-equiv="Content-Type" content="text/html; charset=ISO-8859-2"]×[/HEAD]××[BODY bgcolor="#FFFFC0" background="images/hatter.jpg" text="#FF0000" link="#0000FF" vlink="#00FF00" alink="#0000FF"]×¤Ez a HTML oldalunk törzse×[/BODY]××[/HTML]

Ezzel elértük azt, hogy a lapunk háttere halványsárga lesz, továbbá egy hatter.jpg nevű képpel lesz kitapétázva. Itt álljunk meg: ha egy képet helyezünk a háttérbe, akkor minek kell a halványsárga háttér? Hiszen a kép teljes egészében ki fogja tölteni a teljes böngészőfelületet! Tényleg így van, de gondoljunk bele, ha a háttérrel valami történne, vagy esetleg olyan lassú az internetkapcsolat (olyan nagy a kép), hogy hosszú ideig tartana, mire a kép letöltődne és kitöltené a hátteret. Ha addig fehér marad, s esetleg fehérrel (bármilyen világos színnel) írunk a felületre, olvashatatlan lesz az egész oldalunk. A háttérszín azonnal applikálódik, máris lehetőséget teremt arra, hogy olvashassuk a lapot. Ezért érdemes olyan színt választani, amelyik a háttérrel hasonlóságot mutat. (Sötét képhez, sötét színt, pl.) Egyébként nem muszály mindkettőt megadni, egymástól független a két attribútum. Látni fogjuk, hogy ez a két legsűrűbben használt attribútum, a következő négyet csak igen ritkán használjuk.
Tovább folytatva igen bonyolult lapunk magyarázatát, négy szín következik: az első maga a lapon használt alap betűszín. Itt pirosat választottunk, ami nem jelenti azt, hogy nem tudjuk megváltoztatni. A következő a link színe. Ez azon linkeket jelenti, amelyeket még sosem látogattunk meg. Amint rákattintunk, lép működésbe az alink tulajdonság, ami az aktív link színét határozza meg. Ez csupán addig tart, amíg fel nem engedjük, vagy a TAB billentyűvel aktívvá nem tesszük a linket. Amint megnyomtuk, már vlink (visited) lesz belőle, azaz látogatott link. Érdekes módon, a Firefox ez utóbbi két színt nem támogatja, az IE-ben tökéletesen működik.
FONTOS: Sok-sok különbséggel fogunk még találkozni a böngészők között. Mindig vegyük figyelembe ezeket a különbségeket, soha ne építsünk rájuk!