Basics of Web Design: Html5 & Css3
Basics of Web Design: Html5 & Css3
4th Edition
ISBN: 9780134444338
Author: Terry Felke-Morris
Publisher: PEARSON
bartleby

Concept explainers

Question
Book Icon
Chapter 8, Problem 6HOE
Program Plan Intro

Design a web page to display both in desktop and smartphone browser

Program plan:

  • Include the HTML tag using “<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 “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 hobby using header, nav, main, figure, figcaption, article, footer, and two-column layout with CSS to display the web page in both desktop and smartphone browser.

Explanation of Solution

Program:

<!-- html opening tag -->

<html>

    <!-- head opening tag -->

    <head>

        <!-- Open the meta tag to set the viewport -->

<meta name = "viewport" column-sidebar="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>

    <!-- 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 media queries to design the web page. */

@media screen and (max-width:320px) and (orientation: portrait)

  {

  /*Internal style for wrapper tag*/

  #wrapper

  {

  background-color: #b3c7e6;

  color: #000066;

  width: 80%;

  margin: auto;

  min-width: 960px;

  max-width: 1200px;

  }  

  }

    /*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 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 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;

    }

    /*Internal style for figure tag*/

  figure

  {

  float: right;

  width: 225px;

  padding-bottom: 10px;

  background-color: #EAEAEA;

  }

    /*Internal style for figcaption tag*/

    figcaption

    {

        text-align: center;

        font-style: italic;

        font-family: Georgia, serif;

    }

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

    <!--Open the figure tag-->

    <figure>

<img src="photo.png" alt="Golden Gate Bridge" width="225" height="168">

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

    <figcaption>Lovable Books</figcaption>

    <!--Close the figure tag-->

    </figure>

    <!--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 8, Problem 6HOE

Note: Run the html file on phone for better understanding.

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
ut da Q4: Consider the LIBRARY relational database schema shown in Figure below a. Edit Author_name to new variable name where previous surname was 'Al - Wazny'. Update book_Authors set Author_name = 'alsaadi' where Author_name = 'Al - Wazny' b. Change data type of Phone to string instead of numbers. عرفنه شنو الحل BOOK Book id Title Publisher_name BOOK AUTHORS Book id Author_name PUBLISHER Name Address Phone e u al b are rage c. Add two Publishers Company existed in UK. insert into publisher(name, address, phone) value('ali','uk',78547889), ('karrar', 'uk', 78547889) d. Remove all books author when author name contains second character 'D' and ending by character 'i'. es inf rmar nce 1 tic عرفته شنو الحل e. Add one book as variables data? عرفته شنو الحل
Add a timer in the following code. public class GameGUI extends JPanel {    private final Labyrinth labyrinth;    private final Player player;    private final Dragon dragon;    private Timer timer;    private long elapsedTime;  public GameGUI(Labyrinth labyrinth, Player player, Dragon dragon) {        this.labyrinth = labyrinth;        this.player = player;        this.dragon = dragon;        String playerName = JOptionPane.showInputDialog("Enter your name:");        player.setName(playerName);        elapsedTime = 0;        timer = new Timer(1000, e -> {            elapsedTime++;            repaint();        });        timer.start(); }    @Override    protected void paintComponent(Graphics g) {        super.paintComponent(g);        int cellSize = Math.min(getWidth() / labyrinth.getSize(), getHeight() / labyrinth.getSize());}
Change the following code so that when player wins the game, the game continues by creating new GameGUI with the same player. However the player's starting position is same, everything else should be reseted. public static void main(String[] args) {        Labyrinth labyrinth = new Labyrinth(10);        Player player = new Player(9, 0);        Random rand = new Random();        Dragon dragon = new Dragon(rand.nextInt(10), 9);        JFrame frame = new JFrame("Labyrinth Game");        GameGUI gui = new GameGUI(labyrinth, player, dragon);         frame.setLayout(new BorderLayout());        frame.setSize(600, 600);        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);        frame.add(gui, BorderLayout.CENTER);        frame.pack();        frame.setResizable(false);        frame.setVisible(true);    } public class GameGUI extends JPanel {    private final Labyrinth labyrinth;    private final Player player;    private final Dragon dragon;    private Timer timer;    private long…
Knowledge Booster
Background pattern image
Computer Science
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
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