How to Create the Product webpage of Chapter 11 working with images and icons. Halloween 11 Create a product page In this exercise, you’ll create a product page that uses a variety of features for working with images. When you’re through, the page should look similar to this:   Specifications • To create the product page, you can copy the index.html file you worked on in exercise 7 to the products folder and rename it cat.html. Then, you can delete the content from the section, modify the URLs on the page as necessary, and add the content shown above. • Create a new style sheet named product.css for the product page, and copy the styles you need from the main.css file to this style sheet. Then, modify the link element for the style sheet in the cat.html file so it points to the correct style sheet. • Modify the horizontal navigation menu so it indicates that no page is current. • In the section, float the image to the left of the text. In addition, set the left margin for the text so if the product description is longer, the text won’t flow below the image. • Assign an id to the left sidebar, and modify the CSS so it refers to the sidebar by that id. • Add another sidebar with a width of 180 pixels that’s floated to the right of the main section, and assign an id to that sidebar. Set the background color of the right sidebar to #F5DEB3 • Add a heading to the right sidebar, formatted as shown above. Then, add an unordered list with three list items. Each list item should include a figure with a link that includes an image and a figure caption that includes a text link. The images are named flying_bats.jpg, rat1.jpg, and strobe1.jpg. Be sure to size the images appropriately. • Format the links in the right sidebar so they’re displayed in black whether or not they’ve been visited. If a link has the focus or the mouse is hovering over it, though, it should be displayed in green. • Adjust the margins and padding as necessary so the page looks as shown above. • Add a circular image map for the pumpkin image in the header. When this image map is clicked, the home page should be displayed. • Add the link element for the favicon to the head element of the HTML document. You’ll find the favicon in the images folder.

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question
100%

How to Create the Product webpage of Chapter 11 working with images and icons.

Halloween 11 Create a product page In this exercise, you’ll create a product page that uses a variety of features for working with images. When you’re through, the page should look similar to this:

 

Specifications

• To create the product page, you can copy the index.html file you worked on in exercise 7 to the products folder and rename it cat.html. Then, you can delete the content from the section, modify the URLs on the page as necessary, and add the content shown above.

• Create a new style sheet named product.css for the product page, and copy the styles you need from the main.css file to this style sheet. Then, modify the link element for the style sheet in the cat.html file so it points to the correct style sheet.

• Modify the horizontal navigation menu so it indicates that no page is current.

• In the section, float the image to the left of the text. In addition, set the left margin for the text so if the product description is longer, the text won’t flow below the image.

• Assign an id to the left sidebar, and modify the CSS so it refers to the sidebar by that id.

• Add another sidebar with a width of 180 pixels that’s floated to the right of the main section, and assign an id to that sidebar. Set the background color of the right sidebar to #F5DEB3

• Add a heading to the right sidebar, formatted as shown above. Then, add an unordered list with three list items. Each list item should include a figure with a link that includes an image and a figure caption that includes a text link. The images are named flying_bats.jpg, rat1.jpg, and strobe1.jpg. Be sure to size the images appropriately.

• Format the links in the right sidebar so they’re displayed in black whether or not they’ve been visited. If a link has the focus or the mouse is hovering over it, though, it should be displayed in green.

• Adjust the margins and padding as necessary so the page looks as shown above.

• Add a circular image map for the pumpkin image in the header. When this image map is clicked, the home page should be displayed.

• Add the link element for the favicon to the head element of the HTML document. You’ll find the favicon in the images folder.

 

Deranged Cat
D 127.0.0.1:8020/HTML5%20Halloween%20Solutions/ch09/products/cat.html
The Halloween Store
For the little Goblin in all of us!
Home
Product List
Personal
Decorating Ideas
Join Email
Customers who bought
this product also
bought:
Props
20" Deranged cat
This cat provides its
own light and is perfect
for a backyard
haunting.
Costumes
Special FX
Price: 19.99
Flying bats
Masks
16" Ugly rat
Mini strobe light
© 2016 Ben Murach
II
Transcribed Image Text:Deranged Cat D 127.0.0.1:8020/HTML5%20Halloween%20Solutions/ch09/products/cat.html The Halloween Store For the little Goblin in all of us! Home Product List Personal Decorating Ideas Join Email Customers who bought this product also bought: Props 20" Deranged cat This cat provides its own light and is perfect for a backyard haunting. Costumes Special FX Price: 19.99 Flying bats Masks 16" Ugly rat Mini strobe light © 2016 Ben Murach II
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 2 steps with 6 images

Blurred answer
Knowledge Booster
Multimedia tools and applications
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education