Post on 15-Apr-2017
IMAGESBY: SHANALEE MANWARING
CIT 230
GREAT IMAGES = AMAZING SITES
3 RULES OF IMAGES
1.
SAVE IMAGES IN THE RIGHT
FORMAT
2.
SAVE IMAGES AT THE RIGHT
SIZE
3.
ALWAYS MEASURE IMAGES IN
PIXELS
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
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)
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>
THE CODE THE RESULT
=
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