Hi, I need help with Unit G: skills review, the questions are attached as an image. The name of the textbook is Sasha Vodnik - HTML5 and CSS3, Illustrated Complete- 2nd edition. The data files for this activity has been uploaded to https://drive.google.com/drive/folders/1KpysfxKVZIclFYW9PDKllMqggpzMQjnQ?usp=sharing
Hi, I need help with Unit G: skills review, the questions are attached as an image. The name of the textbook is Sasha Vodnik - HTML5 and CSS3, Illustrated Complete- 2nd edition. The data files for this activity has been uploaded to https://drive.google.com/drive/folders/1KpysfxKVZIclFYW9PDKllMqggpzMQjnQ?usp=sharing
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
Related questions
Question
Hi, I need help with Unit G: skills review, the questions are attached as an image. The name of the textbook is Sasha Vodnik - HTML5 and CSS3, Illustrated Complete- 2nd edition.
The data files for this activity has been uploaded to https://drive.google.com/drive/folders/1KpysfxKVZIclFYW9PDKllMqggpzMQjnQ?usp=sharing
![Skills Review
1 lasert images.
a. In your editor, apen HTM_G-4html tom the SR folder where you store your Data Files for this unit, save it as
index.html, then repeat to save HTM G-Shtml as events.html and HTM_G-6.cs as styles.cs.
b. In the comment at the top of each file, enter your name and today's date whese indicated, then save the files
e. Retum to events.html in your editor, add a p clement below the h2 element in the artiele clement with
the elasa value decorative-inage, then within the p element add an ing element with a sre value of
Images/bigis gt, a width of 281, a height of 280, and alt text of Bigs Deep Dish Pizza
a Save your changes, then open events.html in a desktop beowser and on a handheld device.
e. Retum to styles.cs in your editor, caeate a new style rule for the ing element at the end of the seset styles
section, then add the declarations max-width: 100;, baight: auto;, and vidth: auto;.-
1. Scroll to the reset styles section, then add the ing selector to the lis of selectoes in the style ruke that sets boeder,
padding, and margin to
& In the main content section and below the ha style rule, create a style nule with the selector p.decorative-
inage with the declarations mas-width: 35; and float: right;, then create another style rule with the
selector p. introtert and the dedaration vidth: 724;.
L. In the h3 style rule, add the declaration elear: beth;.
i Save your changes, refresh or reload events.html on your handheld device, then verify that the logo image
is scaled down.
2. Insert a background image.
a. In your browser, open the file brickipg from the images folder.
b. Retum to styles.cs in your editor.
e Scroll to the body style rule in the body and container section, insert a blank line before the dosing }, then
Indent and type background: url("imagea/brick. jpg"):-
Inserting and Working with Images
189
Skills Review (continued)
d. In the background-color declaration above the code you just entered, change the peoperty name background-
color to background.
e. Scoill to the paint styles section at the bottm of the style sheet, then, in the body, h2, artiele style rule,
replace the background-color property with the background property.
L Save your wark, open indexhtml in your beouser, then verify that the hackground of the body element is the
tiled buick pg image.
3. Mark images as figures.
a. Retun to events.htmi in your editor, then, an a new line below the apening tag for the h3 element with the id
value queen. add a ftigure cement.
b. Within the figure ckement, add an ing element with a source of images/party.jpg, a width of 450, a height of 235,
and alt text of a long room with a high ceiling, hardwood floor, tables set for 2 and 4
people with tablecloths, and a small raised dais.
C. Add a figure clement below the opening tag for the h3 element with the id value atelair, then within the
figure clement add an ing ekement with a source of images/gazebo.jps a width of 450, a height of 300, and alt
text of an outdoor brick patio containing several tables with chairs, interspersed with
poles supporting a translucent covering, and surrounded by trees.
d. Add a figure clement below the opening tag tor the h3 element with the id value dunda, then within the
figure clement add an ing ekement with a source of images/specialjpg, a width af 450, a height od 300, and alt
text of a bright room with a high ceiling and tall windows, a hardwood floor, tables
set with chairs, and lamps hanging from the ceiling-
e. Save your changes, setun to styles.cs in your editor, saol to the main content section, then below the hi style
rule, add a nule that uses the figure selector with the declarations max-width: 501; and flaat:right;.
L In the style nule that sets booder, padding, and margin to O in the seset styles section, add the figure selector to
the Iist of selectors.
& In the main content section, add the declaration overflov: auto; to the artiele style rule.
h. Save your changes, then rethesh or sekoad events.html in your browser.
4. Create a figure caption.
a. Return to events.htmi in your editor, then, within the figure element and below the h3 element with the id value
queen, insert a figeaption dement containing the test The Party Room below the ing element.
b. Repeat Step a to add a figcaption element containing the text The Gazebo for the figuze clement below the
h3 ekment with the id value stelair, and a figcaption element containing the text The Special Events
Room for the figure ckement below the h3 element with the id value dundaa.
C. Save your changes, then retum to styles.cs in your editor.
d. Within the main content section and below the figure style rule, add a style nle that uses the figeaption
selector with the declarations font-aize: 1.6en; and taxt-aliga: center;.
e. Scroll to the seset styles section, then add the figcaption selector to the list of selectoes in the style nule that sets
border, padding, and margin to 0.
L Save your changes, then retresh or sekoad eventshtml in your browser.
5. Use images as links.
a. Return to events.htmi in your editor.
b. Scroll to the opening tag for the artiele element, then, within the p element with the elaas value decorative-
inagu, add an a ekement enclosing the ing element and set the href value for the a clement to indexhtmil.
(Hant: Be sune to include the cloing </a tag ater the cing tag)
c. Save your changes, then rethesh or seload eventshtml in your browser.
d. Move the mouse pointer over the logo image, then verify the mouse pointer becomes a pointing hand.
e. Click the logo image, then verity that index.html opens.
190
Inserting and Working with Images](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F4d323f39-cba7-41db-8a7a-e1db7f82b8f1%2F307d4c84-845b-4854-b1cf-1ae91e3970dd%2Fjv64p55_processed.png&w=3840&q=75)
Transcribed Image Text:Skills Review
1 lasert images.
a. In your editor, apen HTM_G-4html tom the SR folder where you store your Data Files for this unit, save it as
index.html, then repeat to save HTM G-Shtml as events.html and HTM_G-6.cs as styles.cs.
b. In the comment at the top of each file, enter your name and today's date whese indicated, then save the files
e. Retum to events.html in your editor, add a p clement below the h2 element in the artiele clement with
the elasa value decorative-inage, then within the p element add an ing element with a sre value of
Images/bigis gt, a width of 281, a height of 280, and alt text of Bigs Deep Dish Pizza
a Save your changes, then open events.html in a desktop beowser and on a handheld device.
e. Retum to styles.cs in your editor, caeate a new style rule for the ing element at the end of the seset styles
section, then add the declarations max-width: 100;, baight: auto;, and vidth: auto;.-
1. Scroll to the reset styles section, then add the ing selector to the lis of selectoes in the style ruke that sets boeder,
padding, and margin to
& In the main content section and below the ha style rule, create a style nule with the selector p.decorative-
inage with the declarations mas-width: 35; and float: right;, then create another style rule with the
selector p. introtert and the dedaration vidth: 724;.
L. In the h3 style rule, add the declaration elear: beth;.
i Save your changes, refresh or reload events.html on your handheld device, then verify that the logo image
is scaled down.
2. Insert a background image.
a. In your browser, open the file brickipg from the images folder.
b. Retum to styles.cs in your editor.
e Scroll to the body style rule in the body and container section, insert a blank line before the dosing }, then
Indent and type background: url("imagea/brick. jpg"):-
Inserting and Working with Images
189
Skills Review (continued)
d. In the background-color declaration above the code you just entered, change the peoperty name background-
color to background.
e. Scoill to the paint styles section at the bottm of the style sheet, then, in the body, h2, artiele style rule,
replace the background-color property with the background property.
L Save your wark, open indexhtml in your beouser, then verify that the hackground of the body element is the
tiled buick pg image.
3. Mark images as figures.
a. Retun to events.htmi in your editor, then, an a new line below the apening tag for the h3 element with the id
value queen. add a ftigure cement.
b. Within the figure ckement, add an ing element with a source of images/party.jpg, a width of 450, a height of 235,
and alt text of a long room with a high ceiling, hardwood floor, tables set for 2 and 4
people with tablecloths, and a small raised dais.
C. Add a figure clement below the opening tag for the h3 element with the id value atelair, then within the
figure clement add an ing ekement with a source of images/gazebo.jps a width of 450, a height of 300, and alt
text of an outdoor brick patio containing several tables with chairs, interspersed with
poles supporting a translucent covering, and surrounded by trees.
d. Add a figure clement below the opening tag tor the h3 element with the id value dunda, then within the
figure clement add an ing ekement with a source of images/specialjpg, a width af 450, a height od 300, and alt
text of a bright room with a high ceiling and tall windows, a hardwood floor, tables
set with chairs, and lamps hanging from the ceiling-
e. Save your changes, setun to styles.cs in your editor, saol to the main content section, then below the hi style
rule, add a nule that uses the figure selector with the declarations max-width: 501; and flaat:right;.
L In the style nule that sets booder, padding, and margin to O in the seset styles section, add the figure selector to
the Iist of selectors.
& In the main content section, add the declaration overflov: auto; to the artiele style rule.
h. Save your changes, then rethesh or sekoad events.html in your browser.
4. Create a figure caption.
a. Return to events.htmi in your editor, then, within the figure element and below the h3 element with the id value
queen, insert a figeaption dement containing the test The Party Room below the ing element.
b. Repeat Step a to add a figcaption element containing the text The Gazebo for the figuze clement below the
h3 ekment with the id value stelair, and a figcaption element containing the text The Special Events
Room for the figure ckement below the h3 element with the id value dundaa.
C. Save your changes, then retum to styles.cs in your editor.
d. Within the main content section and below the figure style rule, add a style nle that uses the figeaption
selector with the declarations font-aize: 1.6en; and taxt-aliga: center;.
e. Scroll to the seset styles section, then add the figcaption selector to the list of selectoes in the style nule that sets
border, padding, and margin to 0.
L Save your changes, then retresh or sekoad eventshtml in your browser.
5. Use images as links.
a. Return to events.htmi in your editor.
b. Scroll to the opening tag for the artiele element, then, within the p element with the elaas value decorative-
inagu, add an a ekement enclosing the ing element and set the href value for the a clement to indexhtmil.
(Hant: Be sune to include the cloing </a tag ater the cing tag)
c. Save your changes, then rethesh or seload eventshtml in your browser.
d. Move the mouse pointer over the logo image, then verify the mouse pointer becomes a pointing hand.
e. Click the logo image, then verity that index.html opens.
190
Inserting and Working with Images
![Skills Review (continued)
6. Lreate an image map and detine aaaitional hoEspots.
a. In your browser, open the file imagemap.png from the Images folder in the SR folder where you stoe your Data
Files for Lnit G.
b. Retum to events.html in your editor, in the artiele clement add a blank line above the h3 element with the
id value queen, then add a p element with the elaaa value imagenap.
e Wthin the p element you just caeated, add an ing dement with a sounce of images/imagemap png, width of
480, height of 240, and empty alt test.
4 Add a blank ine below the dosing </p> tag you created in Step b, then add a map element with a sane
value of eventanap
e Within the aap element, add an area element with a shape value af rect, coorda of 22, 15,137,204, an href
value of tqueen, and alt text of Party Room.
1. Below the area element you created in the previous step, add another area clement with a ahape value of
eirela, coorda of 235,114,63, an href value
af tatelair, and alt text of Gazebo.
8. Below the area ckement you created in the
previous step, add another area clement with a
ahape value of poly, coorde of 328,25,422,25,
FIGURE G-28
Big J's Deep Dish Piza
Sperial Events
422,75,470,75,470,202328,202, an href value
af tdundaa, and alt text of Special Events
Room.
A In the cing tag for the imagemap png fie, add
a uanap attribute with a value of teventamap,
then save your changes.
i Retum to styles.cs in your editor, scroll to the
main content section, then, in the style nde
with the selector p. introtext, add the selector
P.inagemap
i Below the style nule you just edited, caeate a new
sayle nuke using the selectoe p. imagemap ing with
the declaation mas-widthinon, then save your
changes.
k. Refresh or reload events.html in your browser
Your document should match FIGURE G-1.
L Move the mouse pocinter over each shape in the
map guaphic, then verity that the mouse pointer
becomes a pointing hand only when it is over
cach shape.
m.Click each shape, then verity that the page
saolls to the comect section, decasing the
height of your beowser window if necessary
for testing.
Inserting and Warking with Images
191
Skills Review (continued)
7. Add a favicon and touch icons.
a Return to events.html in your editor, then befane the closing </head>
tag, enter a link ekement with a rel value of sharteut icon and an
href value of imagea/fevicon. ice.
b. Below the link eiement you created in the previous step, add another
link dement with a rel value of apple-touch-icon and an heef
value of inages/apple-touch-icon.png.
FIGURE G-2
Google
C. Below the link eiement you created in the previous step, add another
link dement with a rel value of icon, a siza value of 192x192, and
an href value of inagea/android. pag
d. Save events.htmi, then seload events.html in your browser and verity
that the Big s favicon is diplayed in the beoser tah.
e. Open indes htul on a smartphone or tablet, tap the Menu buttonE
(Chrome for Andrcid) ar the Share bumon satari for OS, tap Add to
Home Screen, tap Add, then examine the icon cn your home sceen.
(FHant t you use a diffeent baowser or operating system, follow the steps
you nomally use.) FIGURE C-23 shows the lcon on the Android home screen.
L Repeat Steps ae for index.html
& Validate the code foan your web pages and your style sheet, then make
changes as necessary to fix any erors
Indenendent Challenge 1
HTMLS & CSS3](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F4d323f39-cba7-41db-8a7a-e1db7f82b8f1%2F307d4c84-845b-4854-b1cf-1ae91e3970dd%2Fg0b46x_processed.png&w=3840&q=75)
Transcribed Image Text:Skills Review (continued)
6. Lreate an image map and detine aaaitional hoEspots.
a. In your browser, open the file imagemap.png from the Images folder in the SR folder where you stoe your Data
Files for Lnit G.
b. Retum to events.html in your editor, in the artiele clement add a blank line above the h3 element with the
id value queen, then add a p element with the elaaa value imagenap.
e Wthin the p element you just caeated, add an ing dement with a sounce of images/imagemap png, width of
480, height of 240, and empty alt test.
4 Add a blank ine below the dosing </p> tag you created in Step b, then add a map element with a sane
value of eventanap
e Within the aap element, add an area element with a shape value af rect, coorda of 22, 15,137,204, an href
value of tqueen, and alt text of Party Room.
1. Below the area element you created in the previous step, add another area clement with a ahape value of
eirela, coorda of 235,114,63, an href value
af tatelair, and alt text of Gazebo.
8. Below the area ckement you created in the
previous step, add another area clement with a
ahape value of poly, coorde of 328,25,422,25,
FIGURE G-28
Big J's Deep Dish Piza
Sperial Events
422,75,470,75,470,202328,202, an href value
af tdundaa, and alt text of Special Events
Room.
A In the cing tag for the imagemap png fie, add
a uanap attribute with a value of teventamap,
then save your changes.
i Retum to styles.cs in your editor, scroll to the
main content section, then, in the style nde
with the selector p. introtext, add the selector
P.inagemap
i Below the style nule you just edited, caeate a new
sayle nuke using the selectoe p. imagemap ing with
the declaation mas-widthinon, then save your
changes.
k. Refresh or reload events.html in your browser
Your document should match FIGURE G-1.
L Move the mouse pocinter over each shape in the
map guaphic, then verity that the mouse pointer
becomes a pointing hand only when it is over
cach shape.
m.Click each shape, then verity that the page
saolls to the comect section, decasing the
height of your beowser window if necessary
for testing.
Inserting and Warking with Images
191
Skills Review (continued)
7. Add a favicon and touch icons.
a Return to events.html in your editor, then befane the closing </head>
tag, enter a link ekement with a rel value of sharteut icon and an
href value of imagea/fevicon. ice.
b. Below the link eiement you created in the previous step, add another
link dement with a rel value of apple-touch-icon and an heef
value of inages/apple-touch-icon.png.
FIGURE G-2
Google
C. Below the link eiement you created in the previous step, add another
link dement with a rel value of icon, a siza value of 192x192, and
an href value of inagea/android. pag
d. Save events.htmi, then seload events.html in your browser and verity
that the Big s favicon is diplayed in the beoser tah.
e. Open indes htul on a smartphone or tablet, tap the Menu buttonE
(Chrome for Andrcid) ar the Share bumon satari for OS, tap Add to
Home Screen, tap Add, then examine the icon cn your home sceen.
(FHant t you use a diffeent baowser or operating system, follow the steps
you nomally use.) FIGURE C-23 shows the lcon on the Android home screen.
L Repeat Steps ae for index.html
& Validate the code foan your web pages and your style sheet, then make
changes as necessary to fix any erors
Indenendent Challenge 1
HTMLS & CSS3
Expert Solution
![](/static/compass_v2/shared-icons/check-mark.png)
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
Step by step
Solved in 7 steps with 5 images
![Blurred answer](/static/compass_v2/solution-images/blurred-answer.jpg)
Knowledge Booster
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.Recommended textbooks for you
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
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)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
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)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
![C How to Program (8th Edition)](https://www.bartleby.com/isbn_cover_images/9780133976892/9780133976892_smallCoverImage.gif)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
![Database Systems: Design, Implementation, & Manag…](https://www.bartleby.com/isbn_cover_images/9781337627900/9781337627900_smallCoverImage.gif)
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
![Programmable Logic Controllers](https://www.bartleby.com/isbn_cover_images/9780073373843/9780073373843_smallCoverImage.gif)
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education