Answered: Hi, I need help with Unit G: skills…

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

See similar textbooks

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

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

Expert Solution

Step by step

Solved in 7 steps with 5 images

SEE SOLUTION Check out a sample Q&A here

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.