Add Images to Improve Your Presentation

1
Add Images to Improve Your Presentation

• Day 8

2
You will learn to

• Understand Graphics Formats
• Find Graphics
• Create Your Own Images
• Insert an Image on Your Page
• Control Image Placement and Appearance
• Use Image Links for Navigation

3
Content can be boring.

• Todays world is visually oriented and need more
  than straight text
• Pictures add life to your Web page
• There are plenty of resources on the Web to find
  graphics

4
Learn the differences between Graphics Formats

• There are three formats that are best suited for
  the Web
• GIF pronounced jiff like the peanut butter
• JPEG
• PNG pronounced PING like the golf club
• Each has its own qualities and is best used for
  particular types of images

5
GIF Format for Art

• If you are doing navigation buttons using clip
  art or creating banners, drawings, or anything
  that has large blocks of the same color you want
  to use GIF images.

6
Use JPEG for Photos

• Because GIFs and JPEGs use different compression,
  JPEGs are better suited for photographs.
• Photographs have a much broader range of color
  varieties and shades, which make it unsuitable
  for GIFs

7
Look to the Future with PNG

• Combines some of the best qualities of GIFs and
  JPEGs but doesnt have very broad browser
  support
• It is probably better to use GIFs and JPEGs until
  PNG is more widely supported.

8
Key Terms For Imaging

• Transparency possible to cause one or more of
  the colors in the image to act as if it were
  transparent, thus matching the background color
  (JPEG does not support)
• Interlacing saving an image so that when it
  loads, it gradually progresses from a low
  resolution to a high resolution.(JPEG does not
  support)

9
Locate Graphics for Use on Your Site

• Capture Images from the Web
• Find Royalty-Free Clip Art
• Create Your Own Graphics

10
Capture Image From the Web

• Easiest way
• Save virtually any image that appears on your
  screen when you visit a site.
• Go online and find a picture, logo, or graphic
  you like
• Put the cursor somewhere on the image and right
  click
• Choose Save Picture As
• Give it a file name and put it in your folder
• Click OK

11
Find Royalty-Free Clip Art

• There are tons of sources on the Web, there is no
  need to borrow someone elses without
  permission.
• Use a search engine to search for free clip art.
• Or you can visit some of the following sites.

12
www.webplaces.com/html/clipart.htm www.aplusart.co
m www.clip-art.com www.clipart.com www.GifArt.com
www.freewebtemplates.com www.stockphotowarehouse.c
om www.freestockphotos.com
13
Save three pictures on your H// drive

• Clipart
• Photos
• Buttons

14
Insert a Graphic Image

• Inserting an image is easy.
• You place an graphic on your page by using the
  image, ltimg /gt, element and its attributes.
• To place an image follow these steps

15

• Insert the image with the image element ltimg /gt
• Identify the images location with the source
  attribute src
• The source attribute tells the browser where to
  find the image
• ltimg srcsunset.jpg /gt
• Add a description for non-visual browsers with
  the alt attribute.
• This will create a pop-up text box with your
  description when the cursor moves over it.

16
Control Graphic Size with Height and Width

• The height and width attributes enable you to
  specify the amount of space your image takes up
  on the page.
• Height and Width do not change the image files
  actual size, only how it displays on a page. A
  1MB image still takes up a full meg of space,
  even if you scale it down to a thumbnail

17

• Height specifies the height of the image in
  pixels
• Width specifies the width of the image in
  pixels
• ltimg srcsunset altMy favorite sunset
  height100 width150 /gt

18
Wrap Text and Align Images

• To determine where your image appears on a Web
  page and how it relates to the text around it,
  you can use the align attribute

19
Use left and right for Text Wrapping

• To control text wrapping, you use the align
  attribute with left or right as the value.
• Insert one of your images
• ltimg srcyour image.jpg alignleft /gt
• Insert the second of your images
• ltimg srcyourimage.jpg alignright /gt
• Type a paragraph complete with tags after each
  inserted image.

20
Add a border

• To add a border around your image, include the
  border attribute.
• Specify in pixels
• Add border10 to one of you images.

21
Create image links

• Add lta hreftables.htmgtltimg srcyour third
  image.jpggtlt/agt