Képek a HTML oldalon Utolsó módosítás: 11/22/2004 13:07:28 Háttérkép Ahhoz, hogy az adott oldal háttérképpel rendelkezzen, a <BODY> részben el kell helyeznünk a background="kep" paramétert, ahol a kép GIF, illetve JPG formátumú lehet! Jelen esetben: <BODY background="backg.gif"> Azt is beállíthatjuk, hogy a háttér a szöveg gördítésénél egy helyben maradjon, és csak a szöveg mozogjon a háttér felett. Ez a funkció viszont csak az Internet Explorer böngészővel látható. Használata: A <body> részbe a.bgproperties="fixed" paramétert kell beillesztenünk pl. <body background="backg.gif" bgproperties="fixed"> Nagyon fontos, hogy olyan háttérképet válasszunk, amelyen a szöveg olvasható marad. (pl. a szöveg színe, illetve a linkek színe ne vegye fel a háttérkép színét, mert emiatt a szöveg, vagy link nem fog rendesen látszódni.) Így olvashatatlan a szöveg Ez már jobb... De ezt is nagyon fárasztó hosszú távon olvasni... Ez kellemes háttér, és olvasható marad a szöveg... De ezt is el elehet rontani... Hol olvasható hol nem, Hol olvasható hol nem, Hol olvasható hol nem,hol olvasható hol nem, Ez sem túl szerencsés...
ha nem tudod elolvasni a szöveget, akkor jelöld ki az egérrel. A saját honlapod elkészítésénél ügyelj a színhatásra, az olvashatóságot nem szabad feláldozni egy szebb háttérkép érdekében... Erre megoldás lehet, ha megadjuk, hogy az adott oldal egészén milyen színű legyen a szöveg, és a link. Ezt a következőképpen érhetjük el: a <body> részt egészítsük ki a következő paraméterekkel: text= szín vagy színkód (a szöveg színét állítja be) link= szín vagy színkód (a linkek színét állítja be) alink= szín vagy színkód (az aktív linkek színét állítja be) vlink= szín vagy színkód (a már meglátogatott linkek színét állítja be) pl. <body bgcolor="#caffb0" text="#aa3900" link="#0000ff" alink="#ff2020" vlink="#800020"> Háttérszín beállítása Ha nem képet, hanem valamilyen színt szeretnénk oldalunk hátterének, akkor a bgcolor paramétert használhatjuk. <BODY bgcolor="színkód" > vagy <BODY bgcolor="szín neve" > pl.: <BODY bgcolor="#ff0000" > vagy <BODY bgcolor="red" > Képek elhelyezése az oldalon <IMG> Képet az <IMG> paraméterrel helyezhetünk el az oldalon. Paraméterei: src: URL (vagyis a kép útvonalának megadása) width: a kép szélessége pixelekben height: a kép magassága pixelekben align: a kép és a szöveg viszonyának megadása o top: a kép teteje a mellette lévő szöveg tetejével lesz egy vonalban o middle: a kép közepe lesz a szöveg alapvonala o bottom: a kép alját a szöveg alapvonalához illeszti (ez az alapértelmezett) o left: a képet a bal oldali margóhoz igazítja o right:a képet a jobb oldali margóhoz igazítja border: a kép köré rajzolandó keret vastagságának megadása hspace: a kép körül vízszintesen hagyandó átlátszó sáv mérete pixelben vspace: a kép körül föggőlegesen hagyandó átlátszó sáv mérete pixelben
alt: leírás, jellemző szöveg a képről. (Akkor jelenik meg, ha a böngésző nem képes megjeleníteni a képeket. Egyes böngészőkben akkor is látható, ha a kép fölé visszük az egérkurzort) Tetőhöz igazítva <IMG SRC="infologo.gif" ALIGN=top> Tetőhöz igazítva <IMG SRC="infologo.gif" ALIGN=middle>Középhez igazítva Középhez igazítva <IMG SRC="infologo.gif" ALIGN=middle>Középhez igazítva <IMG SRC="infologo.gif" ALIGN=bottom>Talphoz igazítva Talphoz igazítva
<IMG SRC="infologo.gif" ALIGN=bottom> Talphoz igazítva <IMG SRC="infologo.gif" ALIGN=left>Jól használható a balra igazítás arra, hogy egy kép mellé illesszünk egy hosszabb szöveget. Az a szövegrész, amelyik túllóg a képen, az az eredeti margóhoz ugrik vissza. Jól használható a balra igazítás arra, hogy egy kép mellé illesszünk egy hosszabb szöveget. Az a szövegrész, amelyik túllóg a képen, az az eredeti margóhoz ugrik vissza. <IMG SRC="infologo.gif" ALIGN=left>Jól használható a balra igazítás arra, hogy egy kép mellé illesszünk egy hosszabb szöveget. Az a szövegrész, amelyik túllóg a képen, az az erede <IMG SRC="infologo.gif" ALIGN=right>A jobb oldalra igazított kép is az előzőhöz hasonlóan viselkedik. Természetesen a szöveg továbbra is balra lesz igazítva. A jobb oldalra igazított kép is az előzőhöz hasonlóan viselkedik. Természetesen a szöveg továbbra is balra lesz igazítva.
<IMG SRC="infologo.gif" ALIGN=right>A jobb oldalra igazított kép is az elozohöz hasonlóan viselkedik. Természetesen a <IMG SRC="infologo.gif" ALIGN=left><IMG SRC="infologo.gif" ALIGN=right>A két utóbbi lehetőség együttes alkalmazása is lehetséges. A két utóbbi lehetőség együttes alkalmazása is lehetséges. <IMG SRC="infologo.gif" ALIGN=left> <IMG SRC="infologo.gif" ALIGN=right> A két utóbbi lehetőség együttes alkalmazása is lehetséges. <a href="http://www.szikszi.hu/infosavaria/"> <IMG SRC="infologo.gif" ALT="Info Savaria'99" ALIGN=left width="180" height="150" border="5" hspace="15" vspace="5" > </a> Az INFO 9? konferencia rendezői ez évtől Szombathelyen is elindítják az informatika oktatással és érvényesülési ismeretekkel foglakozó konferencia sorozatot. A már nyolcadik éve Békéscsabán megrendezett INFO konferencia nagy sikere azt bizonyítja, hogy az informatika oktatással kapcsolatban lévő tanárok illetve más szakemberek széles rétegének szüksége van azokra a tapasztalatcserékre, információkra, továbbképzésekre és egyéb programokra amiket az INFO konferencia nyújt. Nyilvánvaló viszont, hogy a békéscsabai INFO konferencia a nyugat-dunántúli tanárok, szakemberek többsége számára lényegében elérhetetlen az utazási távolságok miatt. Optimális megoldásként ez évtől két alkalommal rendezünk INFO konferenciát:
<a href="http://w w w.szikszi.hu/infosavaria/"> <IMG SRC="infologo.gif" ALT="Info Savaria'99" ALIGN=left w idth="180" height="150" border="5" hspace="15" vspace="5" > </a> Természetesen táblázatok használatával is megoldhatóak a különböző igazítások: <table border="0" cellpadding="0" cellspacing="0" width="495"> <td width="165"> <img src="infologo.gif" align="left" hspace="0" width="165" height="65"> <td align="center" width="165"> <strong>info SAVARIA</strong> <td width="165"> <img src="infologo.gif" align="left" hspace="0" width="165" height="65"> <td width="165"> <strong>info SAVARIA</strong> <td width="165"> <img src="infologo.gif" align="left" hspace="0" width="165" height="65"> <td align="right" width="165"> <strong>info SAVARIA</strong> <td align="center" valign="bottom" width="165"> <img src="infologo.gif" width="124" height="49"> <img src="infologo.gif" width="124" height="49"> <td align="center" valign="bottom" width="165"> <strong>info SAVARIA</strong> <td align="center" width="165">
<img src="infologo.gif" align="middle" width="140" height="100"> </table> INFO SAVARIA INFO SAVARIA INFO SAVARIA INFO SAVARIA <table border="0" cellpadding="0" cellspacing="0" w idth="495"> <td w idth="165"><img src="infologo.gif" align="left" hspace="0" w idth="165" height="65"> <td align="center" w idth="165"><strong>info SAVARIA</strong> <td w idth="165"><img src="infologo.gif" align="left" hspace="0" w idth="165" height="65"> <td w idth="165"><strong>info SAVARIA</strong> <td w idth="165"><img src="infologo.gif" align="left" hspace="0" w idth="165" height="65"> <td align="right" w idth="165"><strong>info SAVARIA </strong> <td align="center" valign="bottom" w idth="165"><img src="infologo.gif" w idth="124" height="49"><img src="infologo.gif" w idth="124" height="49"> <td align="center" valign="bottom" w idth="165"> <strong>info SAVARIA</strong>
Probléma: Sok esetben előfordul, hogy például egy balra igazított kép melletti szöveg esetében be szeretném állítani, hogy a következő sor már ne a kép mellé kerüljön, hanem a bal margóhoz igazítva. Ez az 1.sor Ennél a sornál pedig azt szeretném, hogy ne kerüljön a kép mellé. Megoldás: <br clear="left"> tag használata Ekkor a sortörés utáni szöveg a bal oldali margónál lévő kép aljához ugrik. Ez az 1.sor Ennél a sornál pedig azt szeretném, hogy ne kerüljön a kép mellé. <img src="infologo.gif" align="left" hspace="0" w idth="100" height="100"> Ez az 1.sor <br clear="left"> Ennél a sornál pedig azt szeretném, hogy ne kerüljön a kép mellé. Ugyanez természetesen a <br clear="right"> tag használatával a jobb oldali margóhoz történő igazításra is vonatkozik. Abban az esetben, ha mindkét margóhoz igazítottunk egy-egy képet, akkor a <br clear="all"> tag használatával a szöveg a legalsó kép aljához ugrik.
Nézzük a következő példát. Itt a <br clear="right"> taget használtuk. Így a következő sor a jobb oldali margóhoz igazodik. Következő sor Ebben a példában a <br clear="all"> taget használtuk. Így a következő sor a legalsó kép aljához ugrik.. Következő sor <img src="infologo.gif" align="left" hspace="0" w idth="100" height="140"><img src="infologo.gif" align="right" hspace="0" w idth="60" height="70">ebben a példában a <br clear="all"> taget használtuk. Így a következő sor a legalsó kép Átlátszó (transparent) képek Érdemes megemlíteni, hogy GIF formátumú képek esetén lehetőség van arra, hogy a kép egy színét valamilyen segédprogrammal átlátszóvá tegyük. Ekkor az adott szín helyett az oldal háttere, vagy háttérszíne fog megjelenni. pl. A bal oldali képet egy grafikai programmal úgy módosítottuk, hogy a fekete szín legyen a transparent (átlátszó) szín. Az eredmény a jobb oldali képen látható.
pl. egy olyan táblázatban, ahol a cellák háttérszínnel rendelkeznek a következő hatás érhető el: <table border="0"> <td bgcolor="#000080"> <img src="redrose2.gif" w idth="137" height="94"> <td bgcolor="#008000"> <img src="redrose2.gif" w idth="137" height="94" <td bgcolor="#008080"> <img src="redrose2.gif" w idth="137" height="94"> </table> Margók beállítása A böngészők a lap tartalma és a böngésző kerete között (bal oldalról és felülről) üres sávot (margót) hagynak. A margó méretét a <body> tagben adhatjuk meg. pl. <BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0> A megfelelő paraméterek: Internet Explorer esetén Netscape esetén
leftmargin: a bal oldali margó képpontokban topmargin:a felső margó képpontokban marginwidth: a bal oldali margó képpontokban marginheight: a felső margó képpontok