Images, Hyperlinks, and Sound Module 2: XHTML Basics LESSON 3

Module 2: XHTML Basics LESSON 3 Lesson Overview In this lesson, you will learn to:  Manipulate XHTML code using Notepad.  View Web pages created using XHTML code using a browser.  Insert images using XHTML code into a Web page.  Create hyperlinks using XHTML code.  Add sound to your Web page.

Module 2: XHTML Basics LESSON 3 Guiding Questions for Lesson 3  Besides text, what other elements are common to Web pages?  What is the difference between a Web page and a Web site?

Module 2: XHTML Basics LESSON 3 Adding Excitement to Your Web page  Look at your “Tags and Attributes” Web page in a browser.  What do you see on your Web page?  What could you add to your Web page to make it more exciting?

Module 2: XHTML Basics LESSON 3 Images  Visual representations include:  Graphics  Photographs  Graphs  Drawings  What images do you have on your computer right now that could be used in your Web site?

Module 2: XHTML Basics LESSON 3 The IMAGE Element  To place an image into a Web page the tag is used  Here is an example:   The tag tells the Web page to display the image named picture.jpg.

Module 2: XHTML Basics LESSON 3 Finding an Image Path 1. Open the folder containing the image file. 2. Right-click on the image. 3. Choose “Properties” from the menu.

Module 2: XHTML Basics LESSON 3 Finding an Image Path 1. In the “Properties” dialog box, look for “Location.” 2. Copy and paste this location inside the quotation marks. 3. Add a backward slash (\) and the image file name to the location path.

Module 2: XHTML Basics LESSON 3 Example of an Image tag   The image is located on the computer at C:\Documents and Settings\Owner.FAMILYROOM\My Documents\My Pictures\picture.jpg  Attributes have been added  Size of the image defined by height and width  Alt tag – used by browsers that “speak” the words on the Web page

Module 2: XHTML Basics LESSON 3 Using Hyperlinks  Connect a Web page to other Web sites and Web pages on the Internet  Use ANCHOR elements  Example of an anchor tag:  Microsoft “  The word Microsoft is displayed in the Web page and hyperlinked to the Microsoft Web site  The attribute “target” has been added  The “target=“ _blank” ” attribute tells the browser to open the Microsoft Web page in a new window

Module 2: XHTML Basics LESSON 3 Adding Visual Cues to Hyperlinks  Help a viewer to keep track of which hyperlinks have already been visited  Use an attribute within the body tag  Three examples:  sets the color of unvisited links to blue  sets the color of visited links to green  sets the color of active links to red These can be combined into one statement within the body tag: 

Module 2: XHTML Basics LESSON 3 Adding Sound Files  Can add valuable content or extra interest to the Web page  Similar to adding an image  May not play in all browsers  Overuse can be annoying  Should be appropriate for the site  Allow the viewer to control it

Module 2: XHTML Basics LESSON 3 Adding Sound Files  Uses an embed tag  Here is an example:   Plays the sound file “Heirloom” located on the computer  The viewer sees an audio player 300 pixels wide and 30 pixels high  When the “loop” attribute is set to “false” the file plays one time  When “autostart” is set to “false” the viewer must start the player to hear the file

Module 2: XHTML Basics LESSON 3 Lesson Review  Explain how to write the XHTML code for each of the following situations:  Adding an image to a Web page  Inserting a hyperlink to a Web page  Adding a sound to a Web page

Module 2: XHTML Basics LESSON 3 Practice: Make the following changes to your “Tags and Attributes” Web page:  Add an image of your choice  Create a hyperlink to your school Web site  Add a sound file