HTML-szerkesztés kezdőknek!!!
-
#5349
"Azt szeretném megkérdezni, hogyan lehet olyan weblapot csinálni html-ben, amire nem default windows fonttal írok, de nem is képként készítem el?"
Röviden és tömören: kép használata nélkül sehogy.
Ugyanis ámbár az Internet Explorer támogatja a betűtípusok letöltését, de ezt nem minden látogató fogja megtenni (másrészt ugye gondolni kell a Firefox, Opera és egyéb böngészők használóira).
Másrészt a weboldalkészítés alapvető célja az információközlés, ezért minél átjárhatóbb módon kell közölni az információkat, gondolva azokra is, akiknek nincsen lehetőségük egyes szolgáltatások elérésére.
Harmadrészt a kenyérszöveget (ezen értsd azt a szövegrészt, ami nem menü, fejléc, lábléc, dísz, címsor) nem ajánlatos talpatlan betűtípuson kívül más betűtípussal írni, mert olvashatatlanná válik, ami a látogatót az oldal elhagyására ösztönözheti. Más esetben lehet alkalmazni díszes betűket.
Akkor hogyan oldható meg, hogy egy ilyen díszes szöveg a betűtípus megléte nélkül is elérhető legyen? A megoldás a képek használatában rejlik.
Egyszerűbb megoldás: simán használjuk a képet (de azért ne felejtsük el az alt attribútum használatát - hogy azok is értsék a honlapot, akik nem látják a képet):
<img src="brianelete.gif" alt="Brian élete" width="200" height="50" />
Bonyolultabb megoldás:
Tegyük fel, hogy van egy címsorod, amit díszes betűkkel akarsz kiírni:
<h1>Brian élete</h1>
Hogyan tegyük be a képet? Tegyük be háttérképként! Erre remek megoldást nyújt a stíluslapok használata:
<h1 style="background-image: url(brianelete.gif); background-repeat: no-repeat; background-position: top left; width: 200px; height: 50px;">Brian élete</h1>
Viszont a huncut szöveg megmarad a háttérkép felett. Hogyan tüntessük el? Tegyük be a címsorban szereplő szöveget egy külön elembe, és stíluslapokkal rejtsük el.
<h1 style="background-image: url(brianelete.gif); background-repeat: no-repeat; background-position: top left; width: 200px; height: 50px;"><span style="display: none;">Brian élete</span></h1>
Ez utóbbira példa a CSS Zen Garden oldala, ahol ugyanezt a technikát használják. Például itt, illeve itt, és még sorolhatnám.