1 Képek a HTML oldalon Utolsó módosítás: 11/22/ :07:28 Háttérkép Ahhoz, hogy az adott oldal háttérképpel rendelkezzen, a részben el kell helyeznünk a...
Képek a HTML oldalon Háttérkép Ahhoz, hogy az adott oldal háttérképpel rendelkezzen, a részben el kell helyeznünk a background="kep" paramétert, ahol a kép GIF, illetve JPG formátumú lehet! Jelen esetben: 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 részbe a .bgproperties="fixed" paramétert kell beillesztenünk pl. 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.) Ez már jobb.... Így olvashatatlan a szöveg
Ez kellemes háttér, és olvasható marad a szöveg....
Hol olvasható hol nem, Hol olvasható hol nem, Hol olvasható hol nem,Hol olvasható hol nem,
De ezt is nagyon fárasztó hosszú távon olvasni....
De ezt is el elehet rontani....
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 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.
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. vagy pl.: vagy
Képek elhelyezése az oldalon Képet az 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 A kódot módosíthatod az alábbi ablakban: Tetőhöz igazítva
Eredeti visszaállítása
Középhez igazítva
Középhez igazítva A kódot módosíthatod az alábbi ablakban: Középhez igazítva
Eredeti visszaállítása
Talphoz igazítva
Talphoz igazítva A kódot módosíthatod az alábbi ablakban:
Talphoz igazítva
Eredeti visszaállítása
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.
A kódot módosíthatod az alábbi ablakban: 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
Eredeti visszaállítása
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.
A kódot módosíthatod az alábbi ablakban:
A jobb oldalra igazított kép is az elozohöz hasonlóan viselkedik. Természetesen a
Eredeti visszaállítása
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.
A kódot módosíthatod az alábbi ablakban: A két utóbbi lehetőség együttes alkalmazása is lehetséges.
Eredeti visszaállítása
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 kódot módosíthatod az alábbi ablakban:
Eredeti visszaállítása
Természetesen táblázatok használatával is megoldhatóak a különböző igazítások:
<strong>INFO SAVARIA
<strong>INFO SAVARIA
<strong>INFO SAVARIA
<strong>INFO SAVARIA
INFO SAVARIA
INFO SAVARIA
INFO SAVARIA
INFO SAVARIA
A kódot módosíthatod az alábbi ablakban:
<strong>INFO SAVARIA
<strong>INFO SAVARIA
<strong>INFO SAVARIA
<strong>INFO SAVARIA
Eredeti visszaállítása
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: 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é. A kódot módosíthatod az alábbi ablakban: Ez az 1.sor Ennél a sornál pedig azt szeretném, hogy ne kerüljön a kép mellé.
Eredeti visszaállítása
Ugyanez természetesen a 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 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 taget használtuk. Így a következő sor a jobb oldali margóhoz igazodik.
Következő sor
Ebben a példában a taget használtuk. Így a következő sor a legalsó kép aljához ugrik..
Következő sor A kódot módosíthatod az alábbi ablakban: Ebben a példában a taget használtuk. Így a következő sor a legalsó kép
Eredeti visszaállítása
Á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:
A kódot módosíthatod az alábbi ablakban:
Eredeti visszaállítása
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 tagben adhatjuk meg. pl.
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
Tetőhöz igazítva