Képek

Képek beszúrása

Hogy minél látványosabb legyen egy oldal, képekkel lehet díszíteni.
A képeket külön fájlokban tároljuk, így a HTML dokumentumban (oldalunkon) valójában nem a képet helyezzük el, amikor beszúrjuk, hanem csupán hivatkozunk a képre.
Képcsere nélkül, a hivatkozás megváltoztatásával a kép cserélődni fog.
képre való hivatkozás <IMG SRC=képfájl> utasítással történik
Ha a képfájl ugyanabban a könyvtárban található, ahol a dokumentum.
- - pl. <IMG SRC=”kep.jpg”>
 - pl. <IMG SRC=”kep.gif”>
Ha a kép másik könyvtárban van, meg kell adnunk a pontos elérési útvonalat:
- - pl. <IMG SRC=”konyvtar/kep.jpg”>
 - pl.<IMG SRC=”http://www.szenteskep.hu/informatika/kep.gif”>
Képeket lehet méretezni is, ha azt szeretnénk, hogy az eredeti méretéhez képest megváltozzon a mérete
A kisebb méret megadása a letöltési időt nem csökkenti, mivel a kép mérete valójában nem változik meg, csupán annak megjelenítésekor kisebbnek látszódik.
- - WIDTH szélesség megadása pixelben vagy százalékban
 - HEIGHT magasság megadása pixelben vagy százalékban
 - pl. <IMG SRC=”kep.jpg” HEIGHT=”50″ WIDTH=”75″
Meghatározhatjuk, hogy mekkora távolság legyen a kép és a szöveg között
- - bal és jobboldali távolság megadása HSPACE=távolság
  - felső és alsó távolság VSPACE=távolság
A kép köré keretet is lehet tenni BORDER= keretvastagság paraméterrel
- - ha a képre kattintva hivatkozás történik, praktikus a BORDER=0, ekkor nem lesz ott a hivatkozást jelző kék keretszín
A képeket természetesen éppúgy igazíthatjuk, ahogyan a bekezdéseket is: középre, jobbra, balra
Megadhatjuk, hogy a szöveg a képhez képes hol legyen. A leghasználatosabbak:
- - a kép mellett baloldalt körbefolyatva ALIGN = left
  - a kép mellett jobboldalt körbefolyatva ALIGN = right
A képekhez ún. alternatív szöveget is lehet írni, ezek akkor jelennek meg sárga buborékban ha az egérrel a képre mutatnak ALT=”alternatív szöveg”
A képhez tartozó paraméterek tetszőleges sorrendben megadhatók
pl. <IMG SRC=”kep.jpg” WIDTH=”50″ HEIGHT=”50″ HSPACE=”20″ WIDTH=”30″ BORDER=”0″ ALIGN=LEFT ALT=”Ez pedig sárga buborékban fog megjelenni.”>

<HTML>

<HEAD>

<TITLE>Második weblapom</TITLE>

</HEAD>

<BODY BGCOLOR=”#CEFFFD” TEXT=”#0000FF” LINK=”#00FF00″ VLINK=”#0000FF” ALINK=”#FFFFFF”>

<CENTER>Fénykép és animáció </CENTER>

 

<HR>

<IMG SRC=”kep/kiskep.jpg” WIDTH=”320″ HEIGHT=”240″ HSPACE=”20″ WIDTH=”30″ BORDER=”5″ ALT=”Ez pedig sárga buborékban fog megjelenni.”>

<HR>

 Itt most beillesztettem egy képet, és most jöhet az animáció is. 

<HR>

<IMG SRC=”kep/anima.gif” WIDTH=”100″ HEIGHT=”120″ HSPACE=”20″ WIDTH=”30″ BORDER=”0″ ALT=”Ennek is lehet alternatív szövege.”>

<HR>

 Ezzel meg is volnánk. 

 

</BODY>

</HTML>

Megnézem!