1 / 15

Images, Hyperlinks, and Sound

Images, Hyperlinks, and Sound. LESSON 3. Module 2: XHTML Basics. 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.

turi
Download Presentation

Images, Hyperlinks, and Sound

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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.

  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?

  4. 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?

  5. 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?

  6. 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.

  7. Finding an Image Path Open the folder containing the image file. Right-click on the image. Choose “Properties” from the menu.

  8. 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.

  9. 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

  10. 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

  11. 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”>

  12. 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

  13. 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

  14. 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

  15. 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

More Related