HTML HÁTTÉR BEÁLLÍTÁSA, KÉPEK A WEBLAPON HIPERLINKEK, HIVATKOZÁSOK DOKUMENTUM ADOTT PONTJÁRA VALÓ UGRÁS 4. rész HÁTTÉR BEÁLLÍTÁSA Egy pillanat alatt meg lehet változtatni egy oldal arculatát, ha megváltoztatjuk a háttérszínét. A háttér beállításához a <BODY> tag-et használjuk a megfelel paraméterezéssel. A színekre vonatkozó utasítások közül ez azon kevesek egyike, ami a böngészk szinte mindegyikével alkalmazható. A háttérszínt a dokumentum bevezet részében kell definiálnunk az alábbi módon. Példaként egy kék háttérszín dokumentumot mutatunk be sárga szín szöveggel, melyhez az alábbiakat kell begépelnünk. <HTML> <BODY BGCOLOR="0000B0"> <FONT COLOR="yellow"> Ez egy kék háttérszín dokumentum sárga szín szöveggel! </FONT> </BODY> </HTML> Természetesen a <BODY> tag-nek több paramétere is lehet. A szín megadásánál használhatjuk a szín tizenhatos számrendszerbeli kódját vagy nevét, ahogyan ezt a karakterformázásnál a szín beállításánál már láthattuk. Vajon mit jelent az "FFFFFF"? Ez a 6 karakterbl álló szimbólum a szín úgynevezett RGB kódja. Az els két karakter a vörös (R=red) szín ersségét mutatja 16-os számrendszerben (hexadecimálisan). A leggyengébb a 00, a legersebb az FF. (a számok növekv sorrendben: 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10,..., FE, FF). A 3. 4. karakter a zöld szín erssége (G=green), az 5. 6. a kéké (B=blue). Ennyi elismerettel persze már kikísérletezhetnénk az összes színt, de nem árt, ha néhány színt példaként megmutatunk. 000000 444444 888888 BBBBBB FFFFFF B00000 D00000 E00000 F00000 FF0000 00B000 00D000 00E000 00F000 00FF00 0000B0 0000D0 0000E0 0000F0 0000FF 00FFFF 800080 FFFF00 FF00FF 008080 Néhány szabály tisztán látszik. A vörös és a zöld keveréke a sárga, a kéké és a zöldé a türkiz, a vörösé és a kéké a lila. 1
Ha háttérként nemcsak egyszeren színeket szeretnénk használni, hanem képet, akkor a következ módon használjuk a <BODY> elemet. <BODY BACKGROUND= levelek.gif > Ebben az esetben a levelek.gif nev kép els példánya a bal fels sarokba kerül, majd a többi írásirányban folyamatosan kitölti a böngész ablakát. Célszer olyan képet használni, aminek a jobb és bal széle illetve a teteje és az alja illeszkedik egymáshoz. Görgetés esetén a kép a tartalommal együtt mozog. A hátteret rögzíthetjük a következ formát használva: <BODY BACKGROUND= levelek.gif > KÉPEK A WEBLAPON Az Interneten a gif és a jpg formátumú képek használatosak. Ez a két fájltípus biztosítja a legtömörebb képpontonkénti ábrázolási lehetséget. Ha van olyan rajzolóprogramunk, ami ismeri ezen fájltípusokat, akkor megnézhetjük vele, hogy a különböz típusú képek mérete mennyire eltér. Azt pedig nem kell hangsúlyozni, hogy a méret milyen fontos szempont az internetes adatátvitelnél. Az Internet Explorer kezeli ugyan a közismert bmp formátumot, de nem célszer a használata, mert azonos kép bmp formátumban sokkal nagyobb fájlméretet eredményezhet, mint a jpg vagy gif formátumban. Az <IMG SRC= fájlnév > paranccsal helyezhetünk el egy képet az oldalunkon. (img=image=kép) Példánkban nézzük meg a Picture.jpg kép megjelenítésének módját. <IMG SRC= picture.jpg > Ha azt szeretnénk, hogy a képre kattintva például a Google oldala jelenjen meg, akkor ezt a következ képen tehetjük meg: <A HREF= http://www.google.hu > <IMG SRC= picture.jpg > </A> Természetesen a <A HREF> formulával lejjebb részletesebben is foglakozunk majd! Amennyiben a kép köré keretet is el kívánunk helyezni, úgy a BORDER=keretvastagság paramétert kell megadni. Ha nem akarjuk, hogy ez látszódjék (mivel ez zavaró lehet, ha a képhez hivatkozást is rendelünk), ilyenkor a border=0 (a szegély szélessége=0) értéket kell beállítanunk. <IMG SRC= picture.jpg > <A HREF= http://www.google.hu > <IMG SRC= picture.jpg > </A> <A HREF= http://www.google.hu > <IMG SRC= picture.jpg > border=0> </A> 2
A képet követ szöveg helyzetét az ALIGN paranccsal tudjuk rendezni. <IMG SRC="picture.jpg" ALIGN="TOP"> Kép mellett fent <IMG SRC="picture.jpg" ALIGN="MIDDLE"> Középen <IMG SRC="picture.jpg" ALIGN="BOTTOM"> Lent <IMG SRC="picture.jpg" ALIGN="ABSCENTER"> Kép mellett a szöveg közepe középen <IMG SRC="picture.jpg" ALIGN="CENTER"> Kép mellett a szöveg alja lent <IMG SRC="picture.jpg" ALIGN="ABSBOTTOM"> <IMG SRC="picture.jpg" ALIGN="LEFT"> Kép mellett a szöveg a kép aljával egyvonalban Kép mellett baloldalt körbefolyatva <IMG SRC="picture.jpg" ALIGN="RIGHT"> Kép mellett jobboldalt körbefolyatva Ha igazán szépen elrendezett képeket akarunk, akkor táblázatba kell tennünk ket. A képek pontosan úgy viselkednek a táblázat elemeiként, mintha szöveget írtunk volna be. További lehetség a szöveg és kép távolságának megadása. Ez bal és jobb oldali távolságmegadás esetén a HSPACE=távolság, fels és alsó távolságmegadás esetén a VSPACE=távolság paraméterekkel történik. Ha használjuk az ALT opciót, akkor a képhez alternatív szöveget is rendelhetünk, az ALT= alternatív szöveg paraméterrel Ekkor ugyanis a képre mutatva az egérrel megjelenik az általunk megadott szöveg is. Ez akkor hasznos, ha valaki úgy böngészi az oldalunkat, hogy nem nézi a képeket. (Például a Lynx nev programmal.) <IMG SRC="picture.jpg" ALT="Kép"> 3
A képek méretét is megváltozathatjuk a HEIGHT és a WIDTH (height=magasság, width=szélesség) értékek beállításával. A kisebb képméret megadása nem csökkenti a letöltési idt, mivel a kép minden esetben az eredeti méretben töltdik le, csupán a megjelenés történik ettl eltér méretben. <IMG SRC="picture.jpg" HEIGHT="32" WIDTH="128" HSPACE="2" VSPACE="1" BORDER="0"> A HEIGHT és a WIDTH értékét akkor is érdemes beállítani, ha nem akarunk a kép méretében változást, ugyanis az elre beállított képméret a letöltést gyorsítja, hiszen a böngésznek nem kell a letöltést megvárnia ahhoz, hogy a kép helyét kiszámítsa. HIPERLINKEK, HIVATKOZÁSOK A HTML dokumentumok leghasznosabb tulajdonsága a hiperlinkek adta gazdag kapcsolatrendszer. A hivatkozások beillesztéséhez az <A> ide kattints </A> szerkezet használatos a megfelel paraméterezéssel. Az ide kattints szöveg helyére feltétlen kell valamit írnunk, hogy a böngészben tudjunk hová kattintani. Az <A> tag legfontosabb paraméter a HREF, ami azt mondja meg, hogy a hivatkozás hová fog mutatni. A "KAPCSOLAT" kifejezésbe írva kell meghatároznunk, hogy az "IDE KATTINTS" mezre rákattintva milyen kapcsolat (levél, másik HTML dokumentum, stb) jöjjön létre. (A "href" a hyperlink reference - hiperkapcsolat referencia rövidítése) E-MAIL KÜLDÉS Az alábbi szöveg begépelésével olyan linket hozunk létre, melyre rákattintva levelet küldhetünk (ebben a példában az oktatási anyag készítjének lehet levelet küldeni). A "mailto:" (levélküldés) szöveg után a címzett E-mail címét kell beírnunk. <A HREF="MAILTO:lutz@radnoti-pecs.hu"> Írás </A> MÁSIK WEBOLDAL MEGNYITÁSA Ha egy másik web-dokumentumra hivatkozunk, akkor a KAPCSOLAT mezbe a "http:"után kell írnunk a kívánt dokumentum címét. Az alábbi példában cégünk címlapjára ugorhatunk. <A HREF="http://www.centralacademy.hu"> Cégünk címlapja </A> 4
Ha a másik web-dokumentum ugyanabban a könyvtárban található, akkor csak a fájl nevét kell beírnunk. Példánkban cégünk bemutatkozó oldalára ugrunk, ami a "bemutatkozas.html" nevet viseli. <A HREF="bemutatkozas.html"> Cégünk bemutatkozó oldala </A> Hivatkozhatnánk rá az alábbi módon is, de ezt azért NEM javaslom, mert ha elköltöztetjük a weboldalunkat egy másik címre, akkor minden egyes hivatkozást át kéne írni az aktuálisra! <A HREF="http://www.centralacademy.hu/bemutatkozas.html"> Cégünk bemutatkozó oldala </A> Egy másik példán keresztül, ha egy másik könyvtárban, de ugyanazon a szerveren van a fájl, akkor a jól ismert DOS-ra emlékeztet szintaxis alkalmazható. <a href="../index.htm"> A FRISS rovat indexe egy könyvtári szinttel feljebb van. </a> <a href="../../index.htm"> Címlapunk kett szinttel feljebb van. </a> <a href="../../este/mozi/mozi.htm"> A mozimsor. </a> FÁJL LETÖLTÉS A következ példa egy fájl letöltését indítja. Ha a ZIP kiterjesztés helyett a HTML kiterjesztés szerepelne, akkor a böngésznk megjelenítené a hivatkozott oldalt, de így a közismert letöltést jelent ablakot látjuk felbukkanni. <A HREF="nevsor.zip"> Letölthet névsor </A> FTP ELÉRÉS A következ példa megmutatja, hogy miként juthatunk el egy FTP oldalra. FONTOS, hogy a hivatkozásban az ftp:// rész jelenti, hogy FTP helyre mutat a hivatkozás. <A HREF="ftp://ftp.valahol.hu"> Kedvenc FTP helyem </A> SZÖVEGRÉSZ HIVATKOZÁS Az elz hivatkozások mind olyanok, hogy egy rövidebb szöveg áll egy sorban, és a teljes bekezdéshez rendeltük a hivatkozást. Természetesen lehetséges, hogy a szöveg egy kisebb részéhez hivatkozást rendeljünk. Most nézzünk erre egy példát. 5
Példa: egy sorban az ALMA, BARACK, KÖRTE szavak állnak. Rendeljünk hivatkozást a középs szóhoz. <P> ALMA <A HREF= barack.html > BARACK </A> KÖRTE </P> KÉPHEZ VALÓ HIVATKOZÁS RENDELÉSE Ha képhez szeretnénk hivatkozást rendelni, akkor tulajdonképpen az <IMG> tag-et kell körbevenni a hivatkozást jelöl <A> </A> elempárral. Nézzük erre a következ példát! Példa: a macska.jpg-re kattintva a mcska.html lap fog megjelenni a böngészben (A 163x129 méret képet két pont vastagságú kék keret veszi körül). <A HREF= macska.html > <IMG BORDER= 2 SRC= macska.jpg WIDTH= 163 HEIGHT= 129 > </A> ÚJ ABLAKBAN VALÓ MEGJELENÉS Alapértelmezés szerint, ha egy hivatkozásra kattintunk, akkor a megjelen lap a hivatkozást tartalmazó lapot cseréli le a böngészben. Találkozhatunk olyan lapokkal az Interneten, amelyeken egy hivatkozásra kattintva újabb böngészablakban jelenik meg a hivatkozott oldal. Az új ablakban való megjelenéshez a TARGET paraméterrel kell kiegészítenünk az <A> tag-et. Ekkor a TARGET= _blank formát kell használnunk. Példa: a sonka szóra kattintva a sonka.html lapot fogjuk látni egy új böngészablakban. <A TARGET= _blank HREF= sonka.html > sonka </A> DOKUMENTUM ADOTT PONTJÁRA VALÓ UGRÁS Egy dokumentumon belül is ugorhatunk, illetve egy másik dokumentum adott pontjára is ugorhatunk, ha megfelel címkéket helyezünk el. <A NAME="CIMKE"> SZÖVEG </a> A "CIMKE" kifejezés egy tetszleges karakteres kifejezés lehet. A címkére így hivatkozhatunk. <A HREF="DOKUMENTUM#CIMKE"> SZÖVEG </a> <a name="teteje"> Ezen oldal tetején elhelyeztünk egy címkét: </a> <a href="#teteje"> Így ugorhatunk fel. </a> <a href="bemutatkozas.html#teteje"> Vagy így. </a> <a href="http://www.centralacademy.hu/bemutatkozas.html#teteje"> Esetleg így. </a> 6