Képek

Képek

Háttérkép

Ahhoz, hogy az adott oldal háttérképpel rendelkezzen, a <BODY> részben el kell helyezned a background="kép elérési útvonala, neve" paramétert, ahol a kép a következő formátumú lehet:

.bmp — Windows Bitmap (BMP)
.emf — Windows Enhanced Metafile (EMF)
.gif — Graphics Interchange Format (GIF)
.jpg, .jpeg — Joint Photographic Experts Group (JPEG) 
.png — Portable Network Graphics (PNG)
.wmf — Windows Metafile (WMF)
.xbm — X Bitmap (XBM)

Nézzünk egy egyszerű példát:

<BODY background="backg.gif">

Próbáld ki

Ha az oldal egészére vonatkozóan be akarod állítani a szöveg, és link színét, a <body> részt egészítsd 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)

Próbáld ki

Háttérszín

Ha nem képet, hanem valamilyen színt szeretnél beállítani az oldal hátterének, akkor a bgcolor paramétert használd!

Próbáld ki

Azt is beállíthatod, 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. Ezt a funkciót viszon nem mindegyik böngészõ támogatja.

Használata: A <body> részbe a bgproperties="fixed" paramétert kell beillesztenünk

<body background="backg.gif" bgproperties="fixed">

Próbáld ki

Képek elhelyezése az oldalon

Képet az <IMG> paraméterrel helyezhesz 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
- top: a kép teteje a mellette lévõ szöveg tetejével lesz egy vonalban
- middle: a kép közepe lesz a szöveg alapvonala
- bottom: a kép alját a szöveg alapvonalához illeszti (ez az alapértelmezett)
- left: a képet a bal oldali margóhoz igazítja
- right:a képet a jobb oldali margóhoz igazítja
border: a kép köré rajzolandó szegély vastagságának megadása
hspace: a kép körüli üres köz mérete vízszintesen
vspace: a kép körüli üres köz mérete függõlegesen
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, de ez nem szerencsés megoldás. Ha ezt akarod elérni, használd a title paramétert.)
title: akkor jelenik meg ez a szöveg, ha a kép fölé visszük az egeret (tooltip)

Igazítsunk alulra

<IMG SRC="nappali.jpg" ALIGN=middle>Középre igazítva

Középre igazítva

Igazítsunk balra

<IMG SRC="nappali.jpg" 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.

Igazítsunk balra és jobbra

<IMG SRC="nappali.jpg" ALIGN=left><IMG SRC="nappali.jpg" 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.

Jelenítsünk meg egy képet eredeti méretében, majd 200x100 pixel méretben (torzítás)

Ha arányosan akarsz nagyítani vagy kicsinyíteni, akkor elég a kép egyik paraméterét megadnod!

Emeljük ki a képet egy szegéllyel, valamint jelenjen meg egy szöveg ha egérrel fölé állunk

Rendeljük hiperhivatkozást egy képhez

Extrák

Sokszor elõfordul, hogy például egy balra igazított kép melletti szöveg esetében be szeretnénk állítani, hogy a következõ sor már ne a kép mellé kerüljön, hanem a bal margóhoz igazítva.

A megoldást a   tag használata jelenti.
Ugyanez természetesen a   tag 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..

<img src="nappali.jpg" align="left" hspace="0"> Ez az 1.sor
 
Ennél a sornál pedig azt szeretném, hogy ne kerüljön a kép mellé.

Ez az 1.sor
Ennél a sornál pedig azt szeretném, hogy ne kerüljön a kép mellé.

Természetesen táblázatok használatával is megoldhatsz bonyolultabb igazításokat:

<td width="100">
<img src="nappali.,jpg" align="left" hspace="0" width="100" height="65">
</td>
<td align="center" width="100">
keletiapro
</td>
<td width="100">
<img src="nappali.jpg" align="left" hspace="0" width="100" height="65">
</td>

</tr>
<tr>

<td width="100">
keletiapro
</td>
<td width="100">
<img src="nappali.jpg" align="left" hspace="0" width="100" height="65">
</td>
<td align="right" width="100">
keletiapro
</td>

</tr>
</table>

	keletiapro
keletiapro		keletiapro