Download - IMAGES PRESENTATION
![Page 1: IMAGES PRESENTATION](https://reader031.vdocuments.co/reader031/viewer/2022021507/5879ec921a28ab15288b6f69/html5/thumbnails/1.jpg)
IMAGESBY: SHANALEE MANWARING
CIT 230
![Page 2: IMAGES PRESENTATION](https://reader031.vdocuments.co/reader031/viewer/2022021507/5879ec921a28ab15288b6f69/html5/thumbnails/2.jpg)
GREAT IMAGES = AMAZING SITES
![Page 3: IMAGES PRESENTATION](https://reader031.vdocuments.co/reader031/viewer/2022021507/5879ec921a28ab15288b6f69/html5/thumbnails/3.jpg)
3 RULES OF IMAGES
1.
SAVE IMAGES IN THE RIGHT
FORMAT
2.
SAVE IMAGES AT THE RIGHT
SIZE
3.
ALWAYS MEASURE IMAGES IN
PIXELS
![Page 4: IMAGES PRESENTATION](https://reader031.vdocuments.co/reader031/viewer/2022021507/5879ec921a28ab15288b6f69/html5/thumbnails/4.jpg)
SAVING FORMATS
JPEGUSED WHEN YOUR PICTURES
HAVE MANY DIFFERENT COLORS.
BEST FOR PHOTOGRAPHS
GIFOFTEN USED WHEN YOUR PICTURE
HAS SHARP LINES AND SOLID COLORS.
ABILITY TO BE ANIMATED
BEST FOR LOGOS AND ANIMATED IMAGES
PNGSIMILAR TO GIF, BUT USED FOR TRANSPARENT BACKGROUNDS
BEST USED FOR SCREEN GRAPHICS. THEY DO NOT LOOK
GOOD PRINTED OUT
![Page 5: IMAGES PRESENTATION](https://reader031.vdocuments.co/reader031/viewer/2022021507/5879ec921a28ab15288b6f69/html5/thumbnails/5.jpg)
SIZING THE IMAGE• USING A PHOTO EDITOR WILL
HELP YOU RESIZE AND CROP YOUR PICTURE.
• ALWAYS SAVE THE IMAGE AT THE SAME WIDTH AND HEIGHT YOU WANT IT TO APPEAR ON THE WEBSITE. (MEASURED IN PIXELS)
![Page 6: IMAGES PRESENTATION](https://reader031.vdocuments.co/reader031/viewer/2022021507/5879ec921a28ab15288b6f69/html5/thumbnails/6.jpg)
INSERTING AN IMAGE ONTO YOUR SITEImages can be inserted into a web site by adding an image folder to your source folder and keeping all images need for the site in one location.
Code to enter images looks like this:<img src=“imagefolder/imagename.format” Alt=“image” />
Images can be added as a picture or as a picture with caption. To add caption to a picture you must use the <figcaption> element.
Code to add an image with caption would look like this:<figure><img src=“imagefolder/imagename.format” Alt=“image” /><br /><figcaption>Description of your image</figcaption></figure>
![Page 7: IMAGES PRESENTATION](https://reader031.vdocuments.co/reader031/viewer/2022021507/5879ec921a28ab15288b6f69/html5/thumbnails/7.jpg)
THE CODE THE RESULT
=
![Page 8: IMAGES PRESENTATION](https://reader031.vdocuments.co/reader031/viewer/2022021507/5879ec921a28ab15288b6f69/html5/thumbnails/8.jpg)
SOURCES HTTP://WWW.KILLERSITES.COM/ARTICLES_2005/THEORY/IMAGES-IN-WEBPAGES.PHP HTTPS://PIXLR.COM/EDITOR/ HTML & CSS DESIGN AND BUILD WEBSITES; BY JON DUCKETT HTTPS://COMMONS.WIKIMEDIA.ORG/WIKI/FILE:MANHATTAN_BEACH_SUNSET.JPG HTTP://BELLARD.ORG/BPG/GALLERY2.HTML HTTP://
WWW.GIFS.NET/GIF/INDEX.PHP?N=IMAGE.PHP&IMAGE_ID=1530&IMAGE_NAME=3D_CD