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

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. Lesson 3 Overview

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? Post one or more of these questions in an area where students can read them and allow time for students to respond to the questions. Discuss the student answers these questions.

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? To this point, students have learned how to place text into a Web page and learned the basics of manipulating the text. Students may notice that outside of color, the Web page that they have created is relatively boring. Discuss with the students how they think they might be able to make their Web pages more exciting.

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? Where else can you get images? When can you copy images off the Internet? Discuss images. One way to add some interest to your Web page is to add an image. A image is some visual representation such as an picture, photograph, graph, or drawing. If students already have some images saved on their computer, use them to add interest to their Web page. If they don’t have any images saved to the computer, locate some on the Internet and save in a convenient location. If students have access to digital photographs of themselves or can take photographs of each other in the classroom, the project will be more interesting to them.

The IMAGE Element To place an image into a Web page the <img /> tag is used Here is an example: <img src=“picture.jpg” /> The tag tells the Web page to display the image named picture.jpg. Discuss the IMAGE element. Images can be inserted into a Web page using HTML code. The <img /> tag includes the letters ‘src’ (source) indicating the name and possibly the location of the image file. Here is an example of an image tag: <img src=”picture.jpg” /> This element tells the Web page to display the image named picture.jpg.

Finding an Image Path Open the folder containing the image file. Right-click on the image. Choose “Properties” from the menu. Discuss how to find an image path. Finding path of a image on the computer can be difficult. Discuss this trick with students to finding the correct path to enter in within the quotation marks. Open the folder containing the image that the student wants to use in their Web page. Right-click on the image and choose “Properties” from the menu. 7

Finding an Image Path In the “Properties” dialog box, look for “Location.” Copy and paste this location inside the quotation marks. Add a backward slash (\) and the image file name to the location path. In the “Properties” dialog box, students will find a section called “Location.” Students can copy and paste this inside the quotation marks and then add a backward slash (\) and the image file name. 8

Example of an Image tag <img src=“C:\Documents and Settings\Owner.FAMILYROOM\My Documents\My Pictures\picture.jpg” height=“100” width=“100” alt=”My Image” /> The image is located on the computer at C:\Documents and Settings\Owner.FAMILYROOM\My Documents\My Pictures\picture.jpg Attributes have been added Display size of the image defined by height and width Alt tag – used by browsers that “speak” the words on the Web page An example of an img element might look like this: <img src=”C:\Documents and Settings\Owner.FAMILYROOM\My Documents\My Pictures\picture.jpg” height=“100” width=“100” alt=”My Image” /> In this example, the image is located on the computer at C:\Documents and Settings\Owner.FAMILYROOM\My Documents\My Pictures\picture.jpg. You will notice that a few attributes have been added to the element. Using attributes, you can set the size of the image (height and width) and give the image an alt attribute. The alt attribute is used by read aloud browsers which are used by blind individuals that “speak” the words on Web page. 9

Using Hyperlinks Connect a Web page to other Web sites and Web pages on the Internet Use ANCHOR elements Example of an anchor tag: <a href=“http://www.microsoft.com” target=“_blank”>Microsoft</a> 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 Discuss hyperlinks. Hyperlinks are connections to other parts of the Web site or to other Web sites on the Internet. Hyperlinks can be very useful for making connections to other areas. Hyperlinks are possible by using an anchor element. An example of an anchor element is: <a href=“http://www.microsoft.com” target=”_blank”>Microsoft</a>. In this example, the word Microsoft is displayed in the Web page and hyperlinked to the Microsoft Web site. An attribute has been added called target. This attribute tells the browser to open the Microsoft Web page in a new window. 10

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: <body link=“#0000FF”> sets the color of unvisited links to blue <body vlink=“#00FF00”> sets the color of visited links to green <body alink=“#FF0000”> sets the color of active links to red These can be combined into one statement within the body tag: <body link=“#0000FF” vlink=“#00FF00” alink=“#FF0000”> Visual clues can help a viewer keep track of which hyperlinks have already been visited. These visual clues are easily defined in the body tag of a Web page. Here are three examples: <body link=“#0000FF”> sets the color of unvisited links to blue <body vlink=“#00FF00”> sets the color of visited links to green <body alink=“#FF0000”> sets the color of active links to red 11

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 Discuss adding a sound file to a Web page. Adding a sound file to a Web page can add valuable content or extra interest. Adding a sound is very similar to adding an image file. Be aware though that the file may not play in all browsers. Over using sounds can also be annoying. Be sure that the sound is appropriate for the Web site and that the viewer is able to turn the sound off if they choose. 12

Adding Sound Files Uses an embed tag Here is an example: <embed name="Heirloom" src="C:\Documents and Settings\Owner.FAMILYROOM\My Documents\My Music\Heirloom.mp3" width=“300” height=“30” loop="false" autostart="false"></embed> 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 To add a sound file to a Web page, an embed tag is used. Here is an example: <embed name="Heirloom" src="C:\Documents and Settings\Owner.FAMILYROOM\My Documents\My Music\Heirloom.mp3" width=“300” height=“30” loop="false" autostart="false"></embed> This tag plays the file called “Heirloom” which is found on the computer in the location C:\Documents and Settings\Owner.FAMILYROOM\My Documents\My Music\Heirloom.mp3. The viewer will see an audio player 300 px. wide and 30 px. high. The file will play once when the attribute “loop” is set to “false” If the “autostart” attribute is set to “false,” the viewer must start the player to hear the file. 13

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 Review concepts covered if needed with the students and discuss the practice activity.

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 This is the last slide of the presentation.