Képek beillesztése

 

 

Most képeket próbálunk a dokumentumunkba beilleszteni.


A weblapok elég unalmasak lennének képek nélkül. Ezek beillesztése egyszerű művelet lesz.

A dokumentumokba úgy lehet képet illeszteni, hogy a HTML kódban a megfelelő elem - az IMG elem segítségével - hivatkozunk a kívánt képre, amit a böngésző a parancs kiolvasásakor új kérésként lehív a szerverről. Természetesen ne felejtsük el a vonatkozó képfájl-t is a szerveren elhelyezni. Tehát a dokumentumban csak, mint egy linket, a képünk fájlnevét és elérési útját írjuk le. Az elérési utat lehet a dokumentum könyvtárától, vagy abszolút hivatkozásként leírni. (lásd: itt.) A kérdéses kódrészt, mivel ez is megjelenítendő tartalom, a szövegtörzsben (<BODY> </BODY>) helyezzük el.
Lássuk első példánkat:

<IMG SRC="elso_kepem.jpg">

Itt mindjárt egy új attribútummal is találkozhatunk: az SRC= segítségével tudjuk a képünk nevét és elérési útját megadni.

Képünk megjelenítéséhez az alábbi tulajdonságokat is meghatározhatjuk (nem kötelező):

  • Megadhatjuk a kép szélességét (width) és magasságát (height).
    Ha ezeket a méreteket nem határozzuk meg, akkor a böngésző az eredeti méreteivel jeleníti meg a képet. A méretek megadhatók pixelben, vagy a rendelkezésre álló hely százalékában.
    Következő példánkban ezt is meghatározzuk:

    <IMG SRC="elso_kepem.jpg" width=200 height=100>

  • Meghatározhatjuk, a böngésző mennyi üres helyet hagyjon ki a kép körül. Erre a hspace és a vspace attribútumok szolgálnak.

    <IMG SRC="elso_kepem.jpg" width=200 height=100 hspace=20 vspace=15>

    Ebben a példában vízszintesen és függőlegesen egyaránt 15 pixel üres hely lesz a kép körül.

  • Megadhatjuk, legyen-e keret a képünk körül és az milyen vastag legyen. Erre szolgál a border attribútum. Következő példánkban keret nélkül jelenítjük meg képünket:

    <IMG SRC="elso_kepem.jpg" width=200 height=100 hspace=20 vspace=15 border=0>

    Már megtanultuk hogy a böngésző a képre helyezett link esetén a képet kék illetve lila kerettel jeleníti meg. Nos, a fenti módon ezt a keretet is letilthatjuk.

  • Megadhatunk a képünkhöz egy szöveget is. Ezt a szöveges böngészők fogják a kép helyett megjeleníteni, illetve az egérmutatót a képre tolva szövegdobozban ez a szöveg is látható lesz.

    <IMG SRC="elso_kepem.jpg" width=200 height=100 hspace=20 vspace=15 border=0 alt="ez egy kép">

  • Végül meghatározhatjuk, hogyan legyen a képünk a környező szöveghez képest igazítva.

    <IMG SRC="elso_kepem.jpg" width=200 height=100 hspace=20 vspace=15 alt="ez egy kép" border=0 align="right">

    Az align=right illetve az align=left meghatározásokra a kép az ablak jobb illetve bal oldalára kerül, a mellette futó szöveg pedig körbefutja azt. Az ide illesztett kép ilyen módon van jobbra igazítva.

Képeinkre linket is írhatunk, amikor a képre kattintva fog a link aktivizálódni. Ha azt akarjuk, hogy a képünk különböző részeire kattintva különböző oldalakra jussunk el, a térképek c. fejezetben leírtak szerint kell eljárnunk.

A képekről bővebben itt olvashatsz...

fel...

 



fel...
előző: a hivatkozásokról...
következő: a táblázatokról...
tartalom...


ThomasWebMűhely
(c)Katona Tibor
2001-2002