|
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...
|
|