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 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ész k 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.
Ez egy kék háttérszín dokumentum sárga szín szöveggel! Természetesen a 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 karakterb l álló szimbólum a szín úgynevezett RGB kódja. Az els két karakter a vörös (R=red) szín er sségét mutatja 16-os számrendszerben (hexadecimálisan). A leggyengébb a 00, a leger sebb 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 er ssége (G=green), az 5. 6. a kéké (B=blue). Ennyi el ismerettel 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 egyszer en színeket szeretnénk használni, hanem képet, akkor a következ módon használjuk a elemet. 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: 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 lehet sé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=image=kép)
paranccsal
helyezhetünk
el
egy
képet
az
oldalunkon.
Példánkban nézzük meg a Picture.jpg kép megjelenítésének módját.
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:
Természetesen a
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.
2
border=0>
A képet követ szöveg helyzetét az ALIGN paranccsal tudjuk rendezni.
Kép mellett fent
Középen
Lent
Kép mellett a szöveg közepe középen
Kép mellett a szöveg alja lent
Kép mellett a szöveg a kép aljával egyvonalban
Kép mellett baloldalt körbefolyatva
Kép mellett jobboldalt körbefolyatva
Ha igazán szépen elrendezett képeket akarunk, akkor táblázatba kell tennünk pontosan úgy viselkednek a táblázat elemeiként, mintha szöveget írtunk volna be.
ket. A képek
További lehet sé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.)
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 id t, mivel a kép minden esetben az eredeti méretben tölt dik le, csupán a megjelenés történik ett l eltér méretben.
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 el re beállított képméret a letöltést gyorsítja, hiszen a böngész nek 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
ide kattints szerkezet használatos a megfelel paraméterezéssel. Az ”ide kattints” szöveg helyére feltétlen kell valamit írnunk, hogy a böngész ben tudjunk hová kattintani. Az
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" mez re 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ít jé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. Írás
MÁSIK WEBOLDAL MEGNYITÁSA Ha egy másik web-dokumentumra hivatkozunk, akkor a KAPCSOLAT mez be 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.
Cégünk címlapja
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.
Cégünk bemutatkozó oldala
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!
Cégünk bemutatkozó oldala
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 FRISS rovat indexe egy könyvtári szinttel feljebb van. Címlapunk kett szinttel feljebb van. A mozim sor.
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ész nk megjelenítené a hivatkozott oldalt, de így a közismert letöltést jelent ablakot látjuk felbukkanni.
Letölthet névsor
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.
Kedvenc FTP helyem
SZÖVEGRÉSZ HIVATKOZÁS Az el z 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.
ALMA BARACK KÖRTE
KÉPHEZ VALÓ HIVATKOZÁS RENDELÉSE Ha képhez szeretnénk hivatkozást rendelni, akkor tulajdonképpen az
![]()
tag-et kell körbevenni a hivatkozást jelöl
… 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ész ben (A 163x129 méret képet két pont vastagságú kék keret veszi körül).
Ú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ész ben. Találkozhatunk olyan lapokkal az Interneten, amelyeken egy hivatkozásra kattintva újabb böngész ablakban jelenik meg a hivatkozott oldal. Az új ablakban való megjelenéshez a TARGET paraméterrel kell kiegészítenünk az
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ész ablakban. sonka 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.
SZÖVEG A "CIMKE" kifejezés egy tetsz leges karakteres kifejezés lehet. A címkére így hivatkozhatunk.
SZÖVEG Ezen oldal tetején elhelyeztünk egy címkét: Így ugorhatunk fel. Vagy így. Esetleg így.
6
