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 7, Problem 5HOE
Program Plan Intro

Web page creation using two-column layout with CSS

Program plan:

Include the HTML tag “<HTML>”.

  • Include the title on the webpage using “<head>” tag.
  • Include the title on the webpage using “<title>” tag.
  • Include the style tag using “<style>” for internal style.
    • Add the style for “body” element.
    • Add the style for “wrapper” element.
    • Add the style for “nav” element.
    • Add the style for “nav ul” element.
    • Add the style for “nav a” 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 “article” 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.
  • 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 “<section>” tag.
  • Open the article of the web page using “<article>” tag.
  • 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 regarding the hobby using two-column layout with CSS.

Explanation of Solution

Program:

Filename: “index.html”

<!-- html opening tag -->

<html>

    <!-- head opening tag -->

    <head>

    <!-- Title opening tag -->

    <title>Hobbies</title>

    <!--Style Tag-->

    <style>

    /*Internal style for body tag*/

    body

    {

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

        background-color: #00005D;

    }

    /*Internal style for wrapper tag*/

    #wrapper

    {

        background-color: #b3c7e6;

        color: #000066;

        width: 80%;

        margin: auto;

        min-width: 960px;

        max-width: 1200px;

    }

    /*Internal style for navigation tag*/

    nav

    {

        float: left;

        width: 150px;

    }

    /*Internal style for navigation in "ul" tag*/

    nav ul

    {

        list-style-type: none;

        margin-left: 0;

        padding: 10px;

    }

    /*Internal style for navigation in "a" tag*/

    nav a

    {

        text-decoration: none;

        padding: 10px;

        font-weight: bold;

    }

    /*Internal style for normal navigation link*/

    nav a:link { color: #ffffff; }

    /*Internal style for link when user has visited*/

    nav a:visited { color: #eaeaea; }

    /*Internal style for link when mouses over it*/

    nav a:hover { color: #000066; }

    /*Internal style for main tag*/

    main

    {

display: -moz-inline-box;

        margin-left: 155px;

        padding: 20px;

        background-color: #ffffff;

        color: #000000;

    }

    /*Internal style for header tag*/

    header

    {

        background-color: #869dc7;

        color: #00005D;

        font-size: 150%;

        padding: 10px 10px 10px 155px;

        background-image: url(hobbies.jpg);

        background-repeat: no-repeat;

        height: 130px;

    }

    /*Internal style for h1 tag*/

    h1 {margin-bottom: 0;}

    /*Internal style for h2 tag*/

    h2

    {

        color: #869dc7;

        font-family: arial, sans-serif;

        font-size: 200%;

    }

    /*Internal style for article tag*/

    article header

    {

        background-color: #FFFFFF;

        background-image: none;

        padding-left: 0;

        font-size: 90%;

        height: auto;

    }

    /*Internal style for footer tag*/

    footer

    {

        font-size:70%;

        text-align: center;

        clear: right;

        background-color: #869dc7;

        padding: 20px;

    }

    <!--close the style tag-->

    </style>

    <!--Close tag-->

    </head>

    <!-- Open the body tag-->

    <body>

    <!--open the div tag-->

    <div id="hobby">

    <!--Open the header tag-->

    <header>

    <!--Display the h1 heading-->

    <h1>Favorite hobby: Reading Books</h1>

    <!--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>

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

    </ul>

    <!--Close the navigation tag-->

    </nav>

    <!--Open the main tag-->

    <main>

    <!--Display the h2 heading-->

    <h2>Description</h2>

    <!--Open the section tag-->

    <section>

    <!--Open the article tag-->

    <article>

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

    <header><h1>Benifits</h1></header>

    <!--Display date and time using time tag-->

    <time datetime="2019-06-20">June 20, 2019</time>

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

<p>Everything you read fills your head with new bits of information, and you never know when it might come in handy.</p>

<p>The more knowledge you have, the better equipped you are to tackle any challenge you will ever face.</p>

    <!--Close the article tag-->

    </article>

    <!--Close the section tag-->

    </section>

    <!--Close the main tag-->

    </main>

    <!--Open the footer tag-->

    <footer>Copyright 1999-2021.All Rights Reserved.

    <!--Close the footer tag-->

    </footer>

    <!--Close the div tag-->

    </div>

    <!--Close the body tag-->

    </body>

<!--Open the html tag-->

</html>

Sample Output

Output:

Screenshot of the Webpage

Basics of Web Design: Html5 & Css3, Chapter 7, Problem 5HOE

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
Create it in HTML webpage
Use html , css and javascript to design a button, that when you click it, it displays a 4 input fields.
In html and CSS Create a mouseOver event function, that will change the colour of an HTML item (ie. a button or a list item) to green, then to black after 5 seconds
Knowledge Booster
Background pattern image
Similar questions
SEE MORE QUESTIONS
Recommended textbooks for you
Text book image
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L
Text book image
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
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