Basics of Web Design: Html5 & Css3
Basics of Web Design: Html5 & Css3
4th Edition
ISBN: 9780134444338
Author: Terry Felke-Morris
Publisher: PEARSON
Question
Book Icon
Chapter 11, Problem 9HOE
Program Plan Intro

Configure the opacity property

Program plan:

Include the HTML tag “<HTML>”.

  • Include the title on the webpage using “<head>” tag.
  • Open the “<meta>” tag to set the viewport for visible area of webpage.
  • Include the title on the webpage using “<title>” tag.
  • Include the style tag using “<style>” for internal style.
    • Add the style for “body” element.
    • Internal style for media queries to design the web page.
    • Add the style for “wrapper” element.
    • Add the style for “offer” element.
    • Add the style for “offer a” element.
    • Add the style for “nav” element.
    • Add the style for “nav ul” element.
    • Add the style for “nav li” element.
    • Add the style for “nav a” element.
    • Add the style for “nav a:link” element.
    • Add the style for “nav a:visited” element.
    • Add the style for “nav a:hover” element.
    • Add the style for “main” element.
    • Add the style for “header” element.
    • Add the style for “h1” element.
    • Add the style for “h2” element.
    • Add the style for “figure” element.
    • Add the style for “figcaption” element.
    • Add the style for “footer” element.
  • Open the body of the web page using “<body>” tag.
  • Use the two-column layout to design the webpage using “div” tag with name “wrapper”.
  • Open the header of the web page using “<header>” tag.
  • Open the navigation link using “<nav>” tag.
  • Open the main of the web page using “<main>” tag.
  • Open the section of the web page using “<figure>” tag.
  • Use the two-column layout to design the webpage using “div” tag with name “offer”.
  • Open the footer of the web page using “<footer>” tag.
  • Close all the tags.

Expert Solution & Answer
Check Mark
Program Description Answer

The HTML code creates a webpage to configure the opacity to display the lighthouse figure; initially it displays figure at 50% opacity, then slowly changes to 100% when the user places the mouse over the figure area.

Explanation of Solution

Program:

Filename: index.html

<!-- html opening tag -->

<html lang="en">

    <!-- head opening tag -->

    <head>

    <!-- Title opening tag -->

    <title>Lighthouse Island Bistro</title>

    <!--Define the meta tag-->

    <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--Style tag-->

    <style>

    /*Internal style for "*"*/

    *{ box-sizing: border-box; }

    /*Internal style for body tag*/

    body

    {  

        font-family: Verdana, Arial, sans-serif;

        background-color: #00005D;

    }

    /*Internal style for div tag with id of "wrapper" "*/

    #wrapper

    {  

        background-color: #b3c7e6;

        color: #000066;

        width: 90%;

        margin: auto;

        min-width: 450px;

        max-width: 1020px;

    }

    /*Internal style for header tag */

    header

    {

        background-color: #869dc7;

        background-image: url(lighthouselogo.jpg);

        background-repeat: no-repeat;

        color: #00005D;

        padding: 10px;

    }

    /*Internal style for h1 tag */

    header h1 { padding-left: 200px;}

    /*Internal style for span tag */

    header span

    {

        font-style: italic;

        font-weight: bold;

        color: #00005D;

        padding-right: 15px;

        text-align: right;

        display: block;

    }

    /*Internal style for navigation tag */

    nav

    {

        float: left;

        width: 150px;

        letter-spacing:0.1em;

        font-weight: bold;

    }

    /*Internal style for navigation "unordered list" tag */

    nav ul

    {

        list-style-type: none;

        margin: 0;

        padding: 0;

    }

    /*Internal style for navigation "list" tag */

    nav li { border-bottom: 1px solid #ffffff;}

    /*Internal style for nav "a" tag */

    nav a

    {

        text-decoration: none;

        display: block;

        padding: 15px;

        transition: background-color 2s linear;

    }

    /*Internal style for nav "a:link" tag */

    nav a:link { color: #ffffff; }

    /*Internal style for nav "a:visited" tag */

    nav a:visited { color: #eaeaea; }

    /*Internal style for nav "a:hover" tag */

    nav a:hover

    { 

        color: #869dc7;

        background-color: #eaeaea;

    }

    /*Internal style for main tag */

    main

    {   background-color: #ffffff;

        color: #000000;

        padding: 10px 20px;

        overflow: auto;

    }

    /*Internal style for h2 tag */

    h2

    {

        color: #869dc7;

        font-family: arial, sans-serif;

        margin: 5px;

    }

    /*Internal style for figure tag */

    figure

    {   float: right;

        margin: 10px;

        padding: 5px;

        background-color: #FFF;

        border: 1px solid #CCC;

        box-shadow: 5px 5px 5px #828282;

        /*Set the opacity as "50%" */

        opacity: .5;

/*Set the transition to change the opacity value 50% to 100% */

        transition: opacity 1s linear;

    }

/*Internal style for figure tag when mouse over the figure */

    figure:hover { opacity: 1; }

    /*Internal style for figcaption tag */

    figcaption

    {  

        text-align: center;

        font-size: .8em;

        font-style: italic;

    }

    /*Internal style for footer tag */

    footer

    {   font-size:70%;

        text-align: center;

        padding: 10px;

        background-color: #869dc7;

        clear: both;

    }

    /*Internal style for div tag with id of "offer" */

    #offer

    {

        background-color: #eaeaea;

        width: 10em;

        margin: auto;

        text-align: center;

    }

    /*Internal style for div tag with id of "offer a" */

    #offer a

    {

        text-decoration: none;

        color: #FF0000;      

    }

/*Internal style for header, main, nav, footer, figure, and figcaption tags */

header, main, nav, footer, figure, figcaption { display: block; }

/*Internal style for media queries to set maximum of 1024 size for web page. */

    @media only screen and (max-width: 1024px)

    {

        body { margin: 0; background-color: #869dc7;}

        #wrapper { width: auto; margin: 0; }                                                             

        main { margin-left: 0; }

        nav { float: none; width: auto; }

        nav li { display: inline-block; padding: 0.5em; }

        nav ul { text-align: center; }

        nav a { border-style: none; }

        h1, h2 { font-size: 120%; }

        p { font-size: 90%; }

    }

    /*Internal style for media queries to set maximum of 768 size for web page. */

    @media only screen and (max-width: 768px)

    {

        #wrapper { min-width: 0; }

header { background-image: url(lighthousemini.jpg); }

        header h1 { padding-left: 0; }

        h1, h2 { font-size: 100%; }

        span { font-size: 80%; }

        figure { display: none;}

        nav, nav ul, nav li { padding: 0; }

        nav li { display: block; }

        nav a { display: block; padding: 0.5em 0; border-bottom: 2px ridge #00005D; }

    }

    <!--close the style tag-->

    </style>

    <!--Close head tag-->

    </head>

    <!-- Open the body tag-->

    <body>

    <!--open the div tag-->

    <div id="wrapper">

    <!--Open the header tag-->

    <header>

        <!--Display the h1 heading-->

        <h1>Lighthouse Island Bistro</h1>

        <!--Display the span tag-->

        <span>the best coffee on the coast</span>

    <!--Close the header tag-->

    </header>

    <!--Open the navigation tag-->

    <nav>

        <!--Open the unordered list tag-->

        <ul>

        <!--Display the navigation link using "a" tag-->

        <li><a href="index.html">Home</a></li>

        <li><a href="menu.html">Menu</a></li>

        <li><a href="directions.html">Directions</a></li>

        <li><a href="contact.html">Contact</a></li>

        <!--Close the unordered list tag-->

        </ul>

        <!--Close the navigation tag-->

        </nav>

    <!--Open the main tag-->

    <main>

        <!--Open the figure tag-->

        <figure>

<img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island">

            <!--Display the caption using figcaption tag-->

<figcaption>Island Lighthouse, Built in 1870</figcaption>

        <!--Close the figure tag-->

        </figure>

        <!--Display the h2 heading-->

        <h2>Locally Roasted Free-Trade Coffee</h2>

        <!--Display the content using paragraph tag-->

<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>

        <!--Display the h2 heading-->

        <h2>Specialty Pastries</h2>

        <!--Display the content using paragraph tag-->

        <p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>

        <!--Display the h2 heading-->

        <h2>Lunchtime is Anytime</h2>

        <!--Display the content using paragraph tag-->

<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>

        <!--Display the h2 heading-->

        <h2>Panoramic View</h2>

        <!--Display the content using paragraph tag-->

<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>

        <!--open the div tag with id name of "offer"-->

        <div id="offer">

        <a href="#">Special Offer</a>

        <!--Close the div tag-->

        </div> 

    <!--Close the main tag-->

    </main>

    <!--Open the footer tag-->

    <footer>Copyright &copy; 2018

    <!--Close the footer tag-->

    </footer>

    <!--Close the div tag-->

    </div>

    <!--Close the body tag-->

    </body>

<!--Close the html tag-->

</html>

Sample Output

Output:

Note: Run the code and display the output web page.

Screenshot of the Webpage

Basics of Web Design: Html5 & Css3, Chapter 11, Problem 9HOE , additional homework tip  1

Note: The lighthouse figure is initially at 50% opacity then it slowly changes to 100% when the user places the mouse over the figure area.

Screenshot of the Webpage

Basics of Web Design: Html5 & Css3, Chapter 11, Problem 9HOE , additional homework tip  2

Want to see more full solutions like this?

Subscribe now to access step-by-step solutions to millions of textbook problems written by subject matter experts!
Students have asked these similar questions
Display the section element as a flexbox. Set the flow of items within the flexbox to go in row order with reverse wrapping so that the first item (Facebook) appears in the bottom-left corner and the last item (E-mail) appears in the top-right corner. Complete this task in conjunction with the following task: "Apply flex layout styles to card class's div elements".
Add an event listener to the button with an id of "button2". Listen for the click event. The button should change the text content of the paragraph with an id of "p2" to: "This button toggles text content." If the button is clicked a 2nd time, the text content should change back to: "Paragraph Two."The button should switch the text back and forth, so 3rd and 4th clicks willdo the same, etc. NOTE: Questions 2 and 5 are about toggling. While Part 1 is wrong, Part 2 will be correct. This is not an error. You should try to make both parts correct.
Create an interactive sign-up sheet.● Make the sign-up sheet interactive for the user.● Add a selection element to ask the user for their gender. Add the options “Male,” “Female,” and “Prefer not to mention.”● Use onblur and onfocus to add red borders to the input elements when the user leaves without any input, and a green border if a value is typed and the user is done with the input element.● Upon submission of the form, print all the information that the user has provided on a div or p tag at the bottom of the page.● Use fieldset and legend tag to separate the input part from the output part of the form.● Include a reset button to clear users input and also the information displayed at the bottom of the page.● Feel free also to design your own version and add other features.
Knowledge Booster
Background pattern image
Similar questions
SEE MORE QUESTIONS
Recommended textbooks for you
Text book image
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
Text book image
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage
Text book image
EBK JAVA PROGRAMMING
Computer Science
ISBN:9781337671385
Author:FARRELL
Publisher:CENGAGE LEARNING - CONSIGNMENT
Text book image
CMPTR
Computer Science
ISBN:9781337681872
Author:PINARD
Publisher:Cengage
Text book image
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L