15
Images, Images, Hyperlinks, and Hyperlinks, and Sound Sound Module 2: XHTML Basics LESSON 3 LESSON 3
| Date post: | 29-Dec-2015 |
| Category: |
Documents |
| Upload: | jesse-dalton |
| View: | 214 times |
| Download: | 0 times |
Images, Hyperlinks, and Images, Hyperlinks, and SoundSound
Module 2: XHTML Basics
LESSON 3LESSON 3LESSON 3LESSON 3
Module 2: XHTML Basics
LESSON 3LESSON 3LESSON 3LESSON 3
Lesson OverviewIn 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 3LESSON 3LESSON 3LESSON 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 3LESSON 3LESSON 3LESSON 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 3LESSON 3LESSON 3LESSON 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 3LESSON 3LESSON 3LESSON 3
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.
Module 2: XHTML Basics
LESSON 3LESSON 3LESSON 3LESSON 3
Finding an Image Path1. Open the folder containing
the image file.
2. Right-click on the image.
3. Choose “Properties” from the menu.
Module 2: XHTML Basics
LESSON 3LESSON 3LESSON 3LESSON 3
Finding an Image Path1. 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 3LESSON 3LESSON 3LESSON 3
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
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 3LESSON 3LESSON 3LESSON 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:
<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
Module 2: XHTML Basics
LESSON 3LESSON 3LESSON 3LESSON 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:
<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”>
Module 2: XHTML Basics
LESSON 3LESSON 3LESSON 3LESSON 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 3LESSON 3LESSON 3LESSON 3
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
Module 2: XHTML Basics
LESSON 3LESSON 3LESSON 3LESSON 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 3LESSON 3LESSON 3LESSON 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
