HTML and CSS Reference
In-Depth Information
Cases and Places
Apply your creative thinking and problem solving skills to design and implement a solution.
Note:
To complete these assignments, you may be required to use the Data Files for Students. See the
inside back cover of this topic for instructions on downloading the Data Files for Students, or contact
your instructor for information about accessing the required files.
1: Hurricane Slide Show
Academic
Starting with www.nhc.noaa.gov/aboutnames.shtml, create a Web page slide show covering the
following topics. List the topics or questions as an unordered list. Select a word or phrase in the list to
act as a pop-up tip.
The list:
• WhocreatestheAtlanticbasinhurricanenamelistandwhendidtheystartnaminghurricanes?
• WhatistheSafir-Simpsonscaleandwhatarethesustainedwindsforeachlevel?
• Whoorwhatarethe“hurricanehunters?”
• Whatyearhadthemostnamedstorms?
• Howmanycategory-5hurricanesmadelandfallintheU.S.andwhatweretheirnames?
Use images you find on Wikimedia (commons.wikimedia.org/wiki/Main_Page) or the nhc.noaa.gov
Web pages to create the images for the slide show. Change the image when the user places the mouse over
the selected word or words in the unordered list.
2: Creating a Personal Web Page
Personal
Use a personal or family event such as a graduation, birthday, anniversary, wedding, or other family
event to create a personal Web page with a slide show of at least six images. Use pop-up captions to
emphasize some aspect of the images.
3: Using JavaScript to Drag and Drop an Image on a Web Page
Professional
You are a newly hired intern at Secure Micro. They are looking to launch their Web site and you have
been asked to come up with a unique introduction to the home page. You have learned how to create
Web pages that randomly display an image at a set location, changed an image every few seconds (a
slide show) in a set location, used a hyperlink to display a new image with a pop-up caption, and if you
did the Extend Your Knowledge exercise, you learned how to change the position of an image. This
chapter did not show you how to use drag and drop to move an image around the screen.
Case11-3drag-n-drop.html contains three images: case11-3_computer_worm, case11-3_monitor,
and case11-3_hypodermic. The images are placed on the Web page and any relevant style sheet values
have been set to properly identify the image objects.
The JavaScript Kit Web site (javascriptkit.com/howto/drag.shtml) contains a simple set of
JavaScript code that will allow you to drag the hypodermic needle over the virus-infected computer
monitor. You only need to copy and paste the code to drag-n-drop html file, and modify the code to
use the case11-3_hypodermic and case11-3_monitor images. You will need to change the .drag style
to inoculate, and change classname in the drags() user-defined function to inoculate. Be sure to leave
credit for the code to the JavaScript Kit Web site, as listed in the code. You should change the <script>
tag to be HTML5 compliant. In addition, use the code in the chapter that “floats” an image across the
screen to float the chapter11-3_computer_worm image across the page from right to left. Save this
page as case11-3drag-n-drop_solution.html.
