"Creating Web Pages With HTML - Simplified"
Chapter 10: Pages 140-169

Advanced Web Pages

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

Table of Contents

Add Sounds
Add Videos
Add Java Applets
Add Java Script
Create An Image Map
Create Frames 
	142 Add Sounds
	

		
»Reasons For Adding Sounds

		
 

		
    
		
  1. Entertainment
    
		You can include sound clips from television shows, movies, famous speeches and theme songs.
    
		
    
		
  2. Sales
    
		Adding sounds to Web pages is useful if you sell products such as music CD's or audio tapes.
    
		
    
		
  3. Types Of Sounds
    
		You can include several types of sounds on a Web page. The most popular type of sound is WAVE. You can determine the type of a sound by the characters that appear after the period in the sound file name (Example: BirdChirp.wav).
    
		


	

		
Type of Sound Extension Used For 

		
Midi .mid Instrumental Music 

		
MPEG .mp3 Songs 

		
Real Audio .ra Live Broadcasts 

		
WAVE .wav Short Sound Clips 

		
		





	

		
» Where To Get Sounds

		
 

		
    
		
  1. The Internet
    
		There are many places on the Internet that offer sounds you can use for free on your Web pages. Make sure you have permission to use any sounds you obtain on the Internet.
    
		
    
		You can find sounds at the following Web sites:
    
		
      
		
    • http://www.earthstation1.com
		
    • http://www.soundamerica.com
		
    • http://www.wavcentral.com
		

    
		
  2. Computer Stores
    
		Many computer stores offer collections of sounds that you can purchase. Sound collections can include theme songs, nature sounds and special effects. Make sure sounds you purchase are in a format commonly used on the Web, such as WAV.
    
		
    
		
  3. Record Sounds
    
		If your computer has sound capabilities, you can use a sound recording program to record sounds. You can connect a microphone to your computer to record your own voice or connect a CD or cassette player to record music or other sounds. When recording a sound you did not create, make sure you have permission to use the sound on your Web page.
    
		
    
		Note: Windows includes a sound recording program called Sound Recorder. The latest Macintosh computers include a sound recording program called QuickTime that you can also obtain at the www.apple.com/quicktime Web site.
		

		





	

		
» Add A Sound

		
 

		
    
		
  • You can add sounds to your Web pages to entertain and inform your readers.
    
		
    
		
  • Make sure the sounds you add are in a format commonly used on the Web. Whenever possible, you should use small sound files. Large sound files can take a long time to transfer to a computer.
    
		


		
    
		
  1. Type the text or add the image you want readers to select to play the sound.
    
		
    
		
  2. Type <A HREF="?"> in front of the text or image, replacing ? with the location of the sound on your computer.
    
		
    
		
  3. Type <A> after the text or image.
    
		
    
		Example: <A HREF="images/Photo.gif"> Photo of the beach. <A>
		

		





	

		
» Sound Considerations

		
 

		
    
		
  1. Provide Descriptions
    
		
    You should provide a short description of a sound you add to a Web page. Include the sound type, size and length of time the sound will play. Readers can use this information to decide if they want to play the sound.
    
		
    
		
  2. Sound Alternatives
    
		
    Some readers may be hearing impaired or use computers that cannot play sounds. Other readers may not be able to play certain tyhpes of sounds. You should consider including a text version of important sounds on your Web page.
    
		
    
		
  3. Specify Location Of Sounds
    
		
    You should store all of your sounds and Web pages in one folder on your computer. If the folder contains many files, you may want to store your sounds in a subfolder.
		

		
    
		
  • If a sound 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 sound.
    
		
    
		Example: <A HREF="Photo.gif"> Photo of the beach. <A>
    
		
    
		
  • If a sound is stored in a subfolder, you must specify the name of the subfolder and the name of the sound.
    
		
    
		Example:
    
		<A HREF="images/Photo.gif"> Photo of the beach. <A>
    
		

		






	146 Add Videos
	

		
» Reasons For Adding Videos

		
 

		
    
		
  1. Entertainment
    
		
    Videos can entertain readers who visit your Web pages. You can include videos to present eye-catching visual effects, movie clips, animation or home videos.
    
		
    
		
  2. Provide Information
    
		You can include videos on your Web pages to provide information about a company, organization or topic of interest. A video can show a TV broadcast, interview, press announcement or a demonstration of a product or service.
    
		
    
		
  3. Types Of Videos
    
		You can include several types of videos on a Web page. You can determine the type of a video by the characters that appear after the period in the video file name.
    
		
    
		Example: Plane.avi
		
    
		Some Web browsers can play only certain types of video, while other Web browsers cannot play any video types.
		

		

	

		
Type of VideoExtension

		
AVI.avi

		
MPEG.mpg or .mpeg

		
Quick Time.mov

		




	

		
» Where To Get Videos

		
 

		
    
		
  1. The Internet
    
		There are many places on the Internet that offer videos you can use for free on your Web pages. Make sure you have permission to use any videos you obtain on the Internet.
    
		
    
		You can find videos at the following Web sites:
    
		
      
		
    • http://www.moviecentral.hypermart.net
		
    • http://www.jurassicpunk.com
		
    • http://www.nasa.gov/gallery/video
		
    
		
    
		
  2. Computer Stores
    
		Many computer stores offer collections of videos that you can purchase. Video collections can include movie clips, special effects and nature clips. Make sure videos you purchase are in a format commonly used on the Web, such as AVI.
    
		
    
		
  3. Record Videos
    
		If your computer has a video capture card, you can connect a VCR, video camera or DVD player to your computer to record videos. Video capture cards usually include all the necessary cables and software you need to record videos. When recording a video you did not create, make sure you have permission to use the video on you Web page.
		

		



	

		
» Add An External Video

		
 

		
    
		
  • You can add an external video to your Web page. An external video will play when readers select a link on your Web page.
    
		
    
		
  • Make sure the video you add is in a format commonly used on the Web.
		

		
    
		
  1. Type the text or add the image you want readers to select to play the video.
    
		
    
		
  2. Type <A HREF="?"> in front of the text or image, replacing ? with the location of the video on your computer.
    
		
    
		
  3. Type <A> after the text or image.
    
		

		




	

		
» Add An Internal Video

		
 

		
    
		
  • You can add an internal video to your Web page. An internal video will play directly on the Web page.
    
		
    
		
  • When adding an internal video, you should only use AVI videos.
		

		
    
		
  1. Position the cursor where you want the video to appear on your Web page.
    
		
    
		
  2. Type <Embed SRC="?">  replacing ? with the location of the video on your computer.
    
		
    
		
  3. In the  <Embed> tag, type Width=? Height=? replacing ? with the width and height of the video in pixels.
    
		
    
		
  4. If you want the video to play automatically when a reader visits your Web page, type AutoStart=true in the <Embed> tag.
    
		
    
		
  5. If you want the video to play continuously until a reader clicks the video or displays another Web page, type Loop=true in the <Embed > tag.
    
		
    
		Note: What width and height should I specify for my video?
    
		You can use a video player to determine the correct width and height of a video. You should specify the correct dimensions for a video to make sure the video appears correctly in a Web browser. Windows comes with a video player called Windows Media Player. You can also use the QuickTime video player that you can obtain at the http://www.apple.com/quicktime Web site.
		

		






	152 Add Java Applets
	

		
A Java applet is a program written using the Java programming language. Java applets are useful for adding animated and interactive information to your Web pages.

		
 

		
»Reasons For Adding Java Applets

		
 

		
    
		
  1. Entertainment
    
		Java applets can make your Web pages more entertaining by adding special effects such as rotating images, fireworks and animated text. Java applets can also allow readers to play simple games and chat with other people viewing your Web pages.
    
		
    
		
  2. Provide Information
    
		Java applets are ideal for displaying information that constantly changes, such as stock market updates, the time, weather information and news headlines. Java applets can also perform complex calculations such as calculating a mortgage.
		

		




	

		
» Where To Get Java Applets

		
 

		
    
		
  1. The Internet
    
		There are many places on the Internet that offer Java applets you can use for free on your Web pages. Most Java applets come with instructions on how to properly add the applets to a Web page. You can find Java applets at the following Web sites:
    
		
    
		
      
		
    • http://www.javaboutique.internet.com
		
    • http://www.javashareware.com
		
    • http://www.gamelan.com
		
    
		
    
		
  2. Create Java Applets
    
		If you know the Java programming language, you can create your own Java applets that you can add to your Web pages. You can learn about the Java programming language at the Java.sun.com Web site.
		

		




	

		
» Java Applet Considerations

		
 

		
    
		
  1. Increase Transfer Time
    
		Java applets can significantly increase the time it takes for a Web page to transfer over the Internet and appear on a screen. If a Web page takes too long to appear, readers may lose interest and move to another Web page.
    
		
    
		
  2. Java Applets May Not Appear
    
		The Java applets on your Web pages may not appear for some readers. Some readers may use older Web browsers that cannot run Java applets, while others may turn off Java applets in their Web browsers.
		

		



	

		
You can add Java applets to your Web pages to entertain and inform your readers.

		
 

		
» Add A Java Applet

		
 

		
    
		
  1. Position the cursor where you want the Java applet to appear on our Web page.
    
		
    
		
  2. Type <Applet Code="?"> replacing ? with the location of the Java applet on our computer.
    
		
    
		
  3. In the <Applet> tag, type Width=? Height=? replacing ? with the width and height of the Java applet in pixels.
    
		
    
		
  4. Type </Applet> to complete the Java applet.
		

		



	

		
» What width and height should I specify for a Java applet?

		
 

		
    
		If you obtained a Java applet on the Internet, the applet will usually come with instructins that indicate the correct width and height of the applet. If you do not specify the correct width and height of a Java applet, all or part of the applet may not appear on your Web page.
		

		






	156 Add Java Script
	

		
    
		
  • JavaScript can make your Web pages interactive and entertaining.
    
		
    
		
  • JavaScript can display alert messages, offer drop down menus, open new windows, and change images in response to mouse movements. Although the names are similar, JavaScript and Java have very little in common.
		
 

		
		



	

		
» Where To Get JavaScript

		
 

		
    
		
  1. The Internet
    
		There are many places on the Internet that offer JavaAcripts you can use for free on your Web pages. Make sure you have permission to use any JavaScripts you obtain on the Internet. Most JavaScripts come with instructions on how to properly add the JavaScript to a Web page. You can find JavaScripts at the following Web sites:
    
		
      
		
    • http://www.javascript.internet.com
		
    • http://www.javagoodies.com
		
    • http://www.javascripts.com
		
    
		
    
		
  2. Create JavaScripts
    
		If you know the JavaScript scripting language, you can create our own JavaScripts that you can add to our Web pages. You can learn about the JavaScript scripting language at the http://www.htmlgoodies.com/primers/jsp Web site.
    
		

		



	

		
» Add JavaScript

		
 

		
You can add JavaScript to make your Web pages dynamic and interactive.

		
 

		
    
		
  1. Type <Script Type="text/javascript"> on your Web page.
    
		Note: To determine where to place the JavaScript on your Web page, check the instructions included with the JavaScript.
    
		
    
		
  2. Type the code for the JavaScript.
    
		
    
		
  3. Type </Script>
    
		

		



	

		
» Hide JavaScript

		
 

		
    
		
  • You can Provide text that you want to display if a Web browser does not run JavaScript. This will tell readers what they are missing.
    
		
    
		
  • Some readers use old Web browsers that cannot run JavaSript, while others may turn off JavaScript in their Web browsers.
		

		
 

		
    
		
  1. Type <NoScript> directly below the <Script> tag.
    
		
    
		
  2. Type the text you want to display if a Web browser does not run JavaScript.
    
		
    
		
  3. Type </NoScript>.
    
		

		






	160 Create An Image Map
	

		
» Determine Coordinates Of Image Areas

		
 

		
    
		
  • You can create an image map that divides an image into different areas that each link to a different Web page.
    
		
    
		
  • When creating an image map, you should use an image that has several distinct areas that readers can select. Photographs do not usually make good image maps.
    
		
    
		
  • To determine the coordinates of each image area, you need an image editing program such as Paint Shop Pro. You can obtain Paint Shop Pro at computer stores or at the http://www.jasc.com Web site.
		
 

		
    
		
    
		
  1. Start your image editing program.
    
		
    
		
  2. Open the image you want to use as an image map.
    
		
    
		
  3. Position the mouse over a point on the image for the coordinates you need.
    
		
    
		
  4. Write down the coordinates displayed in this area.
    
		
    
		
  5. Repeat steps 3 & 4 until you have all the coordinates for the image area.
    
		
    
		
  6. Repeat steps 3 to 5 until you have all the coodinates for each image area.
		

		



	

		
» What coordinates do I need fo each area in an image map?

		
 

		
The coordinates you need depend on the shape of each area.

		

	

		
 Rectangle Polygon (Irregular Shape) Circle

		
 • Top Left Corner
• Bottom Right Corner		 • Each point on the polygon • Center Of Circle
• Right Edge Of Circle

		




	

		
» Create An Image Map

		
 

		
    
		
  1. Add the image you want to use as an image map to your Web page.
    
		
    
		
  2. In the <IMG> tag for the image, type UseMap="#?" replacing ? with a name for the image map.
    
		
    
		
  3. Position the cursor where you want to enter the information for the image map. Most people enter this information at the bottom of the Web page.
    
		
    
		
  4. Type <Map Name="?"> replacing ? with the image map name you typed in step 2.
    
		
    
		
  5. Type <Area> to specify the information for one image area of the image map. Then press the SpaceBar.
    
		
    
		
  6. Type Shape="?" replacing ? with the shape of the area
    
		(rect for rectangle, circle for circle or poly for an irregular shape). Then press the SpaceBar.
    
		
    
		
  7. For a rectangle, type Coords="a,b,c,d" where a,b are the coordinates of the top left corner and c,d are the coordinates of the bottom right corner.
    
		
    
		
  8. For a circle, type Coords="a,b,r" where a,b are the coordinates for the center of the circle and r is the radius.
    
		
    
		
  9. For a polygon, type Coords="a,b,c,d..." where a,b,c,d and so on are the coordinates of each point on the polygon.
    
		
    
		
  10. Press the SpaceBar.
    
		
    
		
  11. Type <HREF="?"> replacing ? with the address of the Web page you want the image area to link to.
    
		Note: To link the image area to a Web page in your own Web site, replace ? with the location of the Web page on your computer.
    
		
    
		
  12. Repeat steps 5 to 9 for each image area.
    
		
    
		
  13. Type </Map> to complete the image map.
    
		

		




	

		
» Is there an easier way to create an image map?

		
 

		
You can use the Mapedit program to help you create image maps. You can obtain Mapedit at the http://www.boutell.com/mapedit Web site.

		






	164 Create Frames
	

		
    
		
  • You can create frames to divide a Web browser window into sections. Each section will display a different Web page.
		

		
 

		
» Reasons For Using Frames

		
 

		
    
		
  1. Banners
    
		Frames allow you to display a banner that will remain on the screen while readers browse through your Web  pages. Banners are useful for displaying information such as an advertisement, a warning message or a company logo.
    
		
    
		
  2. Navigation
    
		You can place a table of contents, navigational tools or search tools in a frame to keep the information on the screen at all times. This information will help readers move through your Web pages and find information of interest.
    
		
    
		
  3. Supporting Information
    
		You can use frames to display supporting information on the screen while readers move through your Web pages. This is ideal for information such as copyright notices, footnotes, references and other information related to your Web pages.
    
		

		



	

		
» Creating Frames

		
 

		
    
		
  1. Create Web Pages For Frames
    
		You must create the Web pages you want to appear in the frames. Each frame will display a differnet Web page.
    
		
    
		
  2. Set Up Frames
    
		You must create a Web page that defines the structure of your frames. The page will contain information such as the number of frames you wwant to create and which Web page will appear in each frame. The page will not contain any information that readers will see.
		

		

	

		
Frame #1

		
Frame #2

		
Frame #3

		
Frame #4

		
Frame #5

		



	

		
» Frame Considerations

		
 

		
    
		
  1. Using Frames
    
		Try not to use too many frames since this can display too much information at once. Using too many frames can also make your Web pages difficult to read by reducing the amount of information each Web page can display.
    
		
    
		
  2. Screen Resolution
    
		The resolution of a monitor determines the amount of information that will appear on a screen. When creating frames, you should make sure your Web pages appear the way you want on computers using different resolutions. Computers using lower resolutions will show less information in each frame.
		

		




	

		
» Create Frames

		
 

		
    
		
  1. Set up a Web page as shown:
    
		
    
		<HTML>
    
		<Head>
    
		<Title> Oceanography.com </Title>
    
		</Head>
    
		<FrameSet Rows="50,*">
    
		</Html>
    
		
    
		
    
		
  2. Type <FrameSet > directly below the </Head> tag. Then press the SpaceBar.
    
		
    
		
  3. To create frames in rows, type Rows="a,b..."> and so on with the height of each row you want to create.
    
		
    
		
  4. To create frames in columns, type Cols="a,b..."> replacing a,b and so on with the width of each column you want to create.
    
		
    
		
  5. To specify the information for one frame, type <Frame Name="?" replacing ? with a name for the frame. Then press the Spacebar.
    
		
    
		
  6. Type SRC="?"> replacing ? with the location of the Web page you want to appear in the frame.
    
		
    
		
  7. Repeat steps 4 and 5 for each frame you created in step 3.
    
		
    
		
  8. Type </FrameSet >.
    
		
    
		Note: Scroll bars appear automatically when a frame is too small to display the contents of an entire Web page.
    
		

		




	

		
» How do I specify the height or width of a frame?

		
 

		
You can specify the height or width of a frame by:

		
 

		
    
		
  1. Typing a percentage of the window (example: 50%)
    
		
  2. Typing a number of pixels (example: 300)
    
		
  3. Or typing an asterisk (*).
		
    
		
     
    
		
    When you type an asterisk (*), the size of the frame will depend on the size of your other frames. For example, if one frame uses 70% of the window, the frame with the asterisk will use 30% of the window.
    
		
    


    
	
    
		
    » Create A Link To A Frame
    
		
     
    
		
      
		
    1. On the Web page you want to display the link, type the text or add the image you want readers to select to display a Web page in another frame.
      
		
      
		
    2. Type <A Href="?"> in front of the text or image, replacing ? with the location of the Web page you want to appear in another frame. Then press the SpaceBar.
      
		
      
		
    3. Type Target="?"> replacing ? with the name of the frame where you want the Web page to appear.
      
		
      
		
    4. Type </A> after the text or image.
      
		
    
		
    


    
	
    
		
    » Can I create a link that opens a Web page in its own window?
    
		
     
    
		
    If a Web page does not display well in a frame, you can create a link that will open the Web page in its own window.
    
		
     
    
		
      
		
    • New Window
      
		To open a Web page in a new window,
      
		type Target=_blank> in step 3 above.
      
		
      
		
    • Current Window
      
		To open a Web page in the current window,
      
		type Target=_top> in step 3 above.