"Creating Web Pages With HTML - Simplified"
Chapter 5: Pages 64-85

Adding Images

IDG's 3-D Visual Series
Navigation Bar
Main Table of Contents Previous Chapter Next Chapter

Table of Contents

Introduction To Images
Image Considerations
Add An Image
Center An Image
Add A Border
Provide Alternative Text
Align An Image With Text
Wrap Text Around An Image
Stop Text Wrap
Add Space Around An Image
Add A Background Image
Add A Horizontal Rule 
	66 Introduction To Images
	

		
» Reasons For Using Images

		
    
		
  1. Art
		
  2. Photographs
		
  3. Illustrations
		
  4. Navigational Tools
		

		
» Obtain Images

		
    
		
  1. Internet
		
  2. Scan Images
		
  3. Create Images
		
  4. Image Collections
		

		





	68 Image Considerations
	

		
    
		
  1. Copyright
    
		Make sure you have permission to use images.
    
		
    
		
  2. Image Resolution
    
		Images do not need resolutions higher than 72 dpi.
    
		
    
		
  3. Image Width
    
		Make sure the images you add to your Web pages are less than 620 pixels wide.
    
		
    
		
  4. Large Images
    
		Large images can increase the time it takes to load your Web page.
    
		
    
		
  5. View Web Pages Without Images
    
		Make sure your Web pages will make sense and look attractive if the images are not displayed.
    
		
    
		
  6. ReUse Images
    
		You can use the same image several times on a Web page without increasing the time it takes for the Web page to transfer to a computer.
		

		






	70 Add An Image
	

		
» You Can Add An Image To A Web Page.

		
 

		
    
		
  1. Position the cursor where you want the image to appear on your Web page.
    
		
    
		
  2. Type <Img Src="?"> replacing ? with the location of the image on your computer.
    
		
    
		Example: <Img Src="Photo.gif">
		

		
» Tips For Adding Images

		
 

		
    
		
  1. Image Types
    
		Use GIF or JPG images.
    
		
    
		
  2. Image Size
    
		Images increase the time it takes for a Web page to appear on a screen. Use images with small file sizes.
    
		
    
		
  3. Specify Location Of Images
    
		You should store all of your Web pages and images in one folder on your computer.
    
		If an image you want to add to a Web page is stored in the same folder as the Web page, you can specify just the name of the image
    
		
    
		Example: <Img Src="Photo.gif">
    
		
    
		If an image is stored in a subfolder, you must specify the name of the subfolder and the name of the image
    
		
    
		Example: <Img Src="images/Photo.gif">
		

		





	72 Center An Image
	

		
» You can center an image on your Web page.

		
 

		
    
		
  1. Type <Center> in front of the image you want to center.
    
		
    
		
  2. Type </Center> after the image you want to center.
    
		
    
		Example:  <Center> <Img Src="images/Photo.gif"> </Center>
		

		





	73 Add A Border
	

		
» You can add a border (frame) to an image on your Web page.

		
 

		
    
		
  1. In the <Img> tag for the image you want to display a border,
    
		type Border=? replacing ? with the border thickness you want to use in pixels.
    
		
    
		Example:  <Img Src="images/Photo.gif" Border=5>
    
		
    
		Note: To remove an existing border, replace ? with the number 0.
    
		

		





	74 Provide Alternative Text
	

		
» You can provide text that you want to display if an image on your Web page does not appear. This will give readers who do not see images information about the missing images.

		
 

		
    
		
  • In the <Img> tag for the image you want to offer alternative text, type Alt="?" replacing ? with the text you want to display if the image does not appear.
    
		
    
		Example:  <Img Src="images/Photo.gif" Alt="Picture of Porsche">
    
		
    
		Note: Some readers use Web browsers that cannot display images, while others turn off the display of images to browse more quickly.
		

		





	75 Align An Image With Text
	

		
» There are three way you can align an image with text.

		

		In the <Img> tag for the image you want to align with text, type Align=? replacing ? with the way you want to align the image with the text.

		
    
		
  1. Top
		
  2. Middle
		
  3. Bottom
		

    
		Example:  <Img Src="images/Photo.gif" Align=Middle>
    
		
    
		Note #1: If you have wrapped text around an image, you cannot align the image with text.
    
		
    
		Note #2: The Align attribute is still supported by Web browsers, but the use of style sheets is now preferred.
    
		

		





	76 Wrap Text Around An Image
	

		
» You can wrap text around an image to give your Web page a professional look.

		
 

		
    
		
  1. To wrap text around the right side of an image,
    
		type Align=Left in the <Img> tag for the image.
    
		
    
		
  2. To wrap text around the left side of an image,
    
		type Align=Right in the <Img> tag for the image.
    
		
    
		Example:  <Img Src="images/Photo.gif" Align=Left>
    
		
    
		Note #1: If you have aligned an image with text, you cannot wrap text around the image.
		

    
		Note #2: The Align attribute is still supported by Web browsers, but the use of style sheets is now preferred.
    
		

		





	77 Stop Text Wrap
	

		
» You can stop text from wrapping around an image. You can have the text continue when the left, right or both margins are clear of images.

		
 

		
    
		
  1. Position the cursor where you want to stop text from wrapping around an image.
    
		
    
		
  2. Type <BR Clear="?"> replacing ? with the margins(s) you want to be clear of images before the text continues (left, right or all).
    
		
    
		Example:  <BR Clear="All">
    
		
    
		Note: The Clear attribute is still supported by Web browsers, but the use of style sheets is now preferred.
    
		

		





	78 Add Space Around An Image
	

		
» You can increase the amount of space around an image to enhance the appearance of your Web page.

		
 

		
» Left and Right Sides

		
 

		
    
		
  • In the <Img> tag for the image you want to add space around,
    
		type HSpace=? replacing ? with the amount of space you want to add to both the left and right sides of the image in pixels.
    
		
    
		Example:  <Img Src="images/Photo.gif" HSpace=10>
    
		
    
		Note: The HSpace attribute is still supported by Web browsers, but the use of style sheets is now preferred.
    
		

		
» Top and Bottom

		
 

		
    
		
  • In the <Img> tag for the image you want to add space around,
    
		type VSpace=? replacing ? with the amount of space you want to add to both the top and bottom of the image in pixels.
    
		
    
		Example:  <Img Src="images/Photo.gif" VSpace=10>
    
		
    
		Note: The HSpace attribute is still supported by Web browsers, but the use of style sheets is now preferred.
    
		

		





	80 Add A Background Image
	

		
» You can have a small image repeat to fill an entire Web page. This can add an interesting background design to your Web page.

		
 

		
    
		
  1. In the <Body> tag, type Background="?" replacing ? with the location of the image on your computer.
    
		
    
		
  2. The Web browser repeats the image to fill the entire Web page.
    
		
    
		Example:  <Body Background="images/Photo.gif">
    
		
    
		Note: The Background attribute is still supported by Web browsers, but the use of style sheets is now preferred.
    
		

		
» Tips For Adding Background Images

		
 

		
    
		
  1. Choose an image that creates an interesting background design without overwhelming your Web page.
    
		
    
		
  2. A good background image should have invisible edges. You should not be able to tell where the edges of the images meet.
    
		
    
		
  3. Make sure the background image you choose does not affect the readability of your Web page.
    
		
    
		
  4. You can find background images that you can use for free at the following Web sites:
    
		
      
		
    • http://www.metanet.com
      
		
    • http://www.ip.pt/webground/main.htm
      
		
    • http://www.nepthys.com/textures
		
    
		
    


    

	82 Add A Horizontal Rule
	
    
		
    » You can add a horizontal rule to visually separate sections of your Web page.
    
		
     
    
		
      
		
    • Type <HR> where you want a horizontal rule to appear on your Web page.
      
		
      
		Note: You should not overuse horizontal rules on your Web page since this can distract your readers, and make your Web page difficult to read. Try not to place more than one horizontal rule on each screen.
      
		
    

		
    » Change Thickness
    
		
     
    
		
      
		
    • In the <HR> tag for the horizontal rule you want to change,
      
		type Size=? replacing ? with the thickness you want to use for the horizontal rule in pixels.
      
		
      
		Note: The Size attribute is still supported by Web browsers, but the use of style sheets is now preferred.
      
		
    

		
    » Change Color
    
		
     
    
		
      
		
    • In the <HR> tag for the horizontal rule you want to change,
      
		type Color=? replacing ? with the color you want to use for the horizontal rule.
      
		
    

		
    » Change Width
    
		
     
    
		
      
		
    • In the <HR> tag for the horizontal rule you want to change,
      
		type Width="?%" replacing ? with the percentage of the Web page you want the horizontal rule to extend across.
      
		
      
		Note: The Width attribute is still supported by Web browsers, but the use of style sheets is now preferred.
      
		
    

		
    » Change Alignment
    
		
     
    
		
      
		
    • After changing the width of a horizontal rule, you can change the alignment of the rule.
      
		
      
		
    • In the <HR> tag for the horizontal rule you want to change,
      
		type Align="?" replacing ? with the way you want to align the horizontal rule (left, center or right).
      
		
      
		Note: The Align attribute is still supported by Web browsers, but the use of style sheets is now preferred.
      
		
      
		Example:
      
		<HR Size=5 Color=Brown Width="80%" Align="Center">