Képek, fotók, animációk

 

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><FONT FACE="VERDANA" SIZE="18pt" COLOR="red"><B>Fénykép és animáció</B> </FONT></CENTER>

<BR>

<HR>

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

<HR>

<BR><P ALIGN="LEFT"><FONT FACE="ARIAL" SIZE="4" COLOR="#DB9900"><I>Itt most beillesztettem egy képet, és most jöhet az animáció is. </I></FONT></P>

<HR>

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

<HR>

<BR><P ALIGN="CENTER"><FONT FACE="ARIAL" SIZE="4" COLOR="#DB9900"><I>Ezzel meg is volnánk. </I></FONT></P>

<BR>

</BODY>

</HTML>

Megnézem!