INFORMATIKA
|
 |
| Fórum 2000/4. |
INFORMATIKA
|
|
Az elõzõ részben elkezdtünk ismerkedni a WEB lapok készítéséhez használható "HTML" nyelvvel. Kövessük most a múltkori fonalat, javítgassuk a (remélem valóban…) elkezdett saját kis lapunkat, elõbb "csak" esztétikailag, majd bõvítsük tartalmában is.
(Megjegyzés: Ha már így szóba került a tartalom: ez a sorozat csak arra tud vállalkozni, hogy a HTML lapok készítésének alapjait - és annak is csak az alapjait - bemutatja, de hogy egy-egy lapot érdemes-e megcsinálni, van-e azon olyan, közérdeklõdésre számot tartó információ, ami egyáltalán a lap létezését indokolja - azaz van-e rajta megfelelõ tartalom - ezt eldönteni már az adott lap szerzõjének, illetve olvasóinak feladata. Itt csak a technikai lehetõségek legfontosabbjairól fog szó esni.)
Aki esetleg az elõzõ részt kihagyta, kérem, hogy lapozzon vissza, mert anélkül ez már nem lesz érthetõ!
Eljutottunk odáig, hogy a megírt szövegünk mögött át tudtuk színezni a hátteret, illetve egyes részeket el tudtunk választani egy vonallal (<HR>). Aki már sok WEB lapot nézett, biztosan tudja, hogy színezni nem csak a hátteret, hanem a betûket is lehet. Sõt, ahogy már láthattuk a címsoroknál (H1-H7), a betûk különbözõ méretûek is lehetnek.
BETÛK SZÍNEZÉSE
Próbáljuk ki most ezt! A betûk méret és szín beállítására a <FONT> … </FONT> páros tag használható. Persze így önmagában még nem mondtunk semmit, a <FONT> kezdõ tag-nek két lehetséges módosító értéke, úgynevezett "attribútuma" lehet, talán nem is meglepõ módon a COLOR (szín) és a SIZE (méret). A szín megadása hasonlóan történik, mint ahogy a háttérszín esetében tettük. A helyzet annyiban más, hogy amíg a háttérszín a teljes WEB lapra vonatkozott, addig betûszínt megadhatunk a teljes lapra érvényesen is, és a <FONT> … </FONT> közé zárt részre vonatkozóan is. A teljes lapra vonatkozó betûszín lesz érvényes minden olyan szövegrészre, amire nincs más szín megadva a <FONT> tag-eken belül. A teljes lapra érvényes betûszínt a <BODY> attribútumaként, a TEXT kulcsszóval adhatjuk meg.
Nézzük meg egy példában, így talán érthetõbb:
<HTML>
<HEAD>
<TITLE>SZINPROBA</TITLE>
</HEAD><BODY BGCOLOR="#ffffC0" TEXT="#000000">
<P><FONT COLOR="#ff0000">Ez piros,</FONT>
<P><FONT COLOR="#00ff00">ez zöld,</FONT>
<P><FONT COLOR="#0000ff">ez pedig kék</FONT>
<P>halványsárga háttér elõtt fekete betûk.
</BODY>
</HTML>
(A továbbiakban a fejrészt a mintáknál helytakarékossági okból elhagyom.)
Most már szinte mindent tudunk a szöveg színezésérõl, nézzük a méreteket!
BETÛMÉRETEK
Hogyan adhatunk meg betûméretet? A már említett SIZE kulcsszó után álló számértékkel, illetve módosító adatokkal. Hogy ne legyen túl egyszerû megjegyezni, használhatjuk nagyobb betûk eléréséhez a <BIG>, kisebbekhez a <SMALL> páros tag-eket is. A lényeg: összesen 7 lehetséges betûméret létezik, ezt a "keretet" nem léphetjük túl. Az "alapértelmezett" betûnagyság a 3-as (a Fórum lapjaihoz a jobb olvashatóság kedvéért én 4-est szoktam használni).
A pontos formát ismét minta alapján könnyebb elsajátítani:
<BODY>
<P>Alap betûméret (3-as)
<P><SMALL>Kisebb betû</SMALL>
<P><BIG>Nagyobb betû</BIG>
<P>
<P><FONT SIZE="1">1-es betûméret</FONT>
<P><FONT SIZE="2">2-es betûméret</FONT>
<P><FONT SIZE="3">3-as betûméret</FONT>
<P><FONT SIZE="4">4-es betûméret</FONT>
<P><FONT SIZE="5">5-ös betûméret</FONT>
<P><FONT SIZE="6">6-os betûméret</FONT>
<P><FONT SIZE="7">7-es betûméret</FONT>
</BODY>
Használható a fentieken kívül a betûméret ideiglenes módosítására a SIZE="+1" (1-gyel nagyobb méret) és a SIZE="-1" (1-gyel kisebb méret) alak is, de ehelyett inkább a <BIG> és a <SMALL> használata ajánlott.
Egy fontos figyelmeztetés: az elõzõ részben szó esett a címekhez használatos "fejléc" (header) betûkrõl (H1-H7). Ezek helyett ne használjuk a betûméret megadást, mert egyes keresõ szoftverek, amik a WEB lap tartalmát próbálják kigyûjteni (indexelni), a fejléc betûk alapján keresnek, így a mi információink esetleg kimaradnak (akkor pedig mi értelmük?).
GRAFIKA A WEB LAPON
HÁTTÉRKÉP
Most már egészen szépen kezd alakulni a lapunk, kellene rá még egy kis grafika is. A legegyszerûbb feladat: állítsunk be valamilyen hátteret! A háttér grafika hasonlóan viselkedik, mint a Windows-ból már ismert "tapéta", azaz ha a kép kisebb, mint a képernyõn megjelenõ ablak, addig ismétlõdik vízszintes és függõleges irányban is, míg a teljes hátteret lefedi. Ekkor persze hiába állítottunk be háttérszínt, a háttér-grafika ezt el fogja takarni. Azért a háttérszín beállítása ekkor sem felesleges, mert aki megnézi az oldalunkat, dönthet úgy is - mivel ezt a böngészõ programok lehetõvé teszik -, hogy kikapcsolja a grafika (képek) megjelenítését. Ha ilyenkor is szeretnénk, hogy a szöveg hasonlóan olvasható legyen, mint a háttérkép elõtt, akkor célszerû egy olyan háttérszínt beállítani, amilyen a felhasznált háttérgrafikánk domináns színe. (Tanács: a túlságosan tarka, vagy erõs mintázatú háttereket kerüljük, mert nagyon nehéz a ráírt szöveget olvashatóvá tenni!)
Hogyan állítsunk be háttér grafikát? Ezt is a <BODY>-n belül adhatjuk meg, a BACKGROUND kulcsszóval, pl. az alábbi módon:
<BODY TEXT="#000000" BGCOLOR="#ffffC0" BACKGROUND="yellow_f.gif">
(A figyelmes olvasónak talán feltûnt: az egyes attribútumok sorrendje közömbös, de célszerû az összetartozókat egymás után írni.) Most már csak az a kérdés, honnan vegyünk háttérképet? Nos, a válasz egyszerûbb, mint hinnénk. Több utat is választhatunk. A "legmacerásabb", de talán a legszebb: mi magunk tervezünk egyet. (Kezdõknek nem ajánlom.) A leggyorsabb: ha a WEB-en látunk egy hátteret, ami tetszik nekünk, rákattintunk a jobb egérgombbal, és a megjelenõ menübõl a "Háttérkép mentése más néven…" (Save Background As…) menüpontot választva "eltesszük magunknak". (Cégek bejegyzett logóit azért inkább ne használjuk fel így… A leírt módszert Internet Explorer 4.0 és 5.0-ban és Netscape Navigator 4.08-ban próbáltam ki.)
EGYÉB KÉPEK ÉS ELHELYEZÉSÜK
Egy WEB lap a szövegeken kívül attól válik "igazi WEB lappá", hogy képeket is tartalmaz, valamint linkeket ("élõkapcsokat", "horgonyokat") más lapokra, esetleg gépekre.
Nézzük meg, hogyan tudunk a lapunkra képet elhelyezni. Erre a célra egy páratlan tag használható, az <IMG>. Egy kép elhelyezése a lapon az alábbiak szerint néz ki:
<IMG SRC="kepneve.jpg" ALIGN="Left">Szöveg a kép mellett.
Ebben a sorban a "kepneve.jpg" helyett állhat az a kép, amit a lapunkon szeretnénk elhelyezni. A gyakorlatban széles körben a JPEG (.jpg) és a GIF (.gif) formátumok használatosak, amikrõl korábban már volt szó.
Izgalmasabb kérdés számunkra, hogy az ALIGN kulcsszó itt mit fog eredményezni. Amint az várható, a kép és a szöveg egymáshoz képesti viszonyát fogja meghatározni, de néhol talán - legalábbis elsõre - egy kicsit különös módon.
A lehetséges
értékek:
Left Balra Right Jobbra Center Középre Top Felülre Bottom Alulra
Eddig semmi meglepõ, egészen addig, amíg ki nem próbáljuk a lehetséges értékeket.
A "Left" a képet az ablak
bal oldalára igazítja, a szöveg mellé, ez megfelel
a várakozásunknak.
A "Right" esetén a kép
a szöveg mellé, jobb oldalra kerül.
Most jön a meglepetés:
A "Center"-tõl ezek után
azt várnánk, hogy a képet a szöveget kettéosztva
középre igazítja, de ez a várakozásunk már
nem fog teljesülni! A szöveg kettéosztása már
bonyolultabb feladat, így a képet csak szövegtõl
függetlenül, pl. az elõzõ részben már
tárgyalt
<CENTER> tag-ek
segítségével tudjuk középre igazítani.
Ekkor azonban nem lesz mellette szöveg. Akkor mit csinál az
<IMG> tag-en belül
az ALIGN="Center"?
A kép mellé igazítja,
a kép jobb oldalára, a kép magasságának
középvonalában a következõ szöveg elsõ
sorát, majd a szöveg a kép alatt folytatódik.
Ugyanígy a "Top" a kép felsõ széléhez, a "Bottom" az alsó széléhez igazítja a mellette álló szöveget (a szöveg elsõ sorát!).
(Elsõre talán feleslegesnek tûnhet, de rövidebb - várhatóan nem több soros - szövegek és kis képek esetében, pl. a menükben többször feltûnõ kis színes "pöttyök" esetében a "Center" gyakran használt beállítás!)
LINKEK, AZAZ ÉLÕKAPCSOK,
HORGONYOK
LINKEK LÉTREHOZÁSA
Most már képet is tettünk az oldalunkra, még hiányoznak a másik lapokra mutató linkek. Természetesen ez is könnyen megoldható, a használandó páros tag egy kicsit furcsább az eddigieknél:
<A HREF=" … "> … </A>
Itt az elsõ kipontozott rész helyére írhatjuk be azt az URL-t (ugye még emlékszünk rá, mi az? Pl.: http://www.zmne.hu/), ahová szeretnénk átlépési lehetõséget biztosítani az olvasónak. A második kipontozott helyre kerül az a szöveg, ami majd a böngészõben olvasható lesz, alap beállítás esetén aláhúzva, jelezve, hogy innen ugorhatunk.
Például:
<A HREF=http://www.zmne.hu/>A Nemzetvédelmi Egyetem honlapja</A>
A páros tag két része közé is kerülhet kép, ekkor a kép körül megjelenõ keret fogja jelezni, hogy a képre is kattinthatunk. Ha ez a keret számunkra zavaró, akkor a "BORDER=0" kiegészítést írhatjuk az <IMG> tag-en belülre, ekkor a keret nem fog megjelenni, mégis kattinthatunk a képen is.
Elõfordulhat olyan eset is, amikor a saját lapunk túl hosszú, de jól elkülönülõ részekre tagolható. (Tipikusan ilyen szokott lenni a Fórum WEB-es változatában a Hírek rovat.) Ilyenkor lehet hasznos, ha a saját lapunkon belül tudunk linket létrehozni. Ezt is lehet, de ekkor két feladatunk van. Oda, ahová ugrani szeretnénk, el kell helyeznünk egy "horgonyt" (anchor), ennek nevet kell adnunk, ott pedig, ahol az imént az URL-t adtuk meg, most a horgony neve kerül egy "#" jellel kezdve. A horgony elnevezéséhez az alábbi tag használható:
<A NAME="horgony neve"> </A>
Ennek két része között legfeljebb magyarázó szöveg fordul elõ, igazából oda semmit nem kell írni.
Például:
<A HREF="#belsocim">Ugorj a belsõ címre</A>
.
.
.
<A NAME="belsocim"></A>
A példában az olvasható "Ugorj a belsõ címre" feliratra kattintva a lap forrásában másutt elhelyezett, (a lapon nem látható!) "belsocim" nevû "horgonyhoz" fog ugrani a böngészõ programunk. A két variáció kombinálható is. Elõfordulhat, hogy egy adott URL-en elhelyezkedõ szöveg közepére szeretnénk linket létrehozni. Ezt csak akkor tehetjük meg, ha a lap szerzõje a megfelelõ helyen elhelyezett "horgonyt". Ekkor egyszerûen a HREF=... hivatkozás után az URL végére kerül a "#" jel és a megfelelõ horgony neve.
A LINKEK SZÍNE
Még egy fontos színezési beállításról nem esett szó: nem csak a szövegek, hanem az élõ, az aktív, illetve a meglátogatott linkek színét is beállíthatjuk, de ezeket csak az egész lapra egységesen, szokás szerint a <BODY> tag-en belül.
A lehetséges attribútumok:
LINK Linkek színe ALINK Aktív linkek színe VLINK Már meglátogatott (visited) linkek színe
A színek megadásának módja ugyanaz, mint eddig, tehát a LINK="#rrggbb" alak használható, ahol az "rr" a vörös, a "gg" a zöld, a "bb" a kék összetevõ intenzitása, hexadecimális alakban. Az "ALINK" beállítás ritkán szükséges, ez a szín többnyire addig látható, amíg az egér gombját lenyomva tartjuk, vagy a képernyõ más részén kattintunk.
A színekkel való "játékkal" vigyázzunk, nem mindig egyszerû az esztétikus megjelenést és a jó olvashatóságot biztosítani egy színes háttér elõtt, úgy a szövegre, mint az élõ és meglátogatott linkekre vonatkozóan!
Egyelõre ennyit, azt hiszem, lesz mit kipróbálgatni az érdeklõdõknek. A szövegek megjelenítésének néhány további trükkjérõl, a listákról, és a "csodatévõ" táblázatokról a következõkben ejtek szót. Addig is mindenkinek jó munkát kíván a szerzõ:
Felhasznált irodalom:
Galántai Zoltán - Komáromy Gábor: WEB page saját kezûleg
AZ EGYETEMEN