Concept explainers
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.
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>
Output:
Screenshot of the Webpage
Note: Run the html file on phone for better understanding.
Want to see more full solutions like this?
Chapter 8 Solutions
Basics of Web Design: Html5 & Css3
- Create a home page about cafe business in HTML on a notepad. No CSS required (with source code).arrow_forwardCreate an HTML page with name yourname&ID.html and include thefollowing (After finishing it should like the image ): A <title> element. A <header> element with to headings inside it:o <h1>: Brown Examo <h2>: This is HTML and CSS Exam A <nav> element containing hyperlinks (Home, Examples, About Us, and Contact Us). A <div id="content"> element for the main content. The main content has two parts:o The first part contains a heading <h1>, an image and a dummy paragraph.o The second part contains a heading <h1>, a dummy paragraph, and a table. It finally contains a <footer> element: © Web page prepared by: [your name]arrow_forwardCreate a simple webpage about any famous person using these HTML attributes:Background ColorFont size, color, and faceStyle (bold, italicized, underline, and subscript)Aligning ContentListsUnordered ListDescription ListHref AttributeSrc AttributeTitle Attributearrow_forward
- Create a Page for "Make an Election" of Electronic Voting System using HTML and CSSarrow_forwardCreate an HTML 5 web page 1, add a background color sky-blue, and name the page, “The Sky Is The Limit”. Add a Heading: LEARNER: Lesson Learned (ALL CAPS), add your full nameand Surname, Student Number, Module Code, Semester, Date, and Year in the text line. Also add a paragraph with a list of 05 positive points and five negative points reflecting on this module CS 101, (good and/or bad). Also, make a suggestion on how to improve. Create another page 2 using HTML 5, add background color to be light gray, insert two text boxes, all should be in the middle, the first one lable it Username and the second one Password, and add the following buttons, Clear and Log-in, add a link named Forgotten Password at the bottom, on a mouse click, a popup message/window saying “ Please contact the administrator for assistance!!! should appear. - Use JavaScript code to make text box 1 (Username) accept only text and text box 2 (Password) to accept a combination of both text and numbers.…arrow_forwardCreate a semantic page layout with only with HTML no styling. Within the header, create a navigation list with one or two "skip navigation links. In the main content, create a form with username and email text inputs and a submit button. Create a footer with the copyright date. Make sure that all elements that need proper WGAG compliant AIRA and ROLES and can be navigated by keyboard and screen reader.arrow_forward
- In the index.html and about.html files, add a class attribute with a value of round to the image elements within the main element.--- my index.html <!DOCTYPE html> <html lang="en"> <head> <title>Wild Rescues: Home</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/styles.css"> <link href="https://fonts.googleapis.com/css2?family=Emblema+One&family=Lora:ital,wght@0, 400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> </head> <body> <header> <div class="tab-desk"> <div class="mobile"> <h1>🐾 Wild Rescues</h1> <h3>Rescue. Rehabilitate. Release.</h3> <a href="index.html"> <img src="images/baby-hawk.jpg" alt="rescued baby hawk"> </a> </div> </div> </header> <nav> <ul> <li><a…arrow_forwardI need help with making me auditioned needed in the image I have provided the code I have so far Below please help To continue to work on this code to help me I have added everything needed below you simply need to cut and paste it into an HTML/CSS Compiler <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lab 14</title></head><body> <div> <h2>Sticky Note Board</h2> <div class="sticky-board"> <div style="display: relative;"> <div class="sticky-note" id="first"> <div class="sticky-note-title"> Transforms </div> <div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div>…arrow_forwardUsing javascript Need help creating a data base that stores login detail from my html page. Please use code below and integrate to it. main.html <html><head><title> login design </title><link rel = "stylesheet" type = "text/css" href= "style.css"><link rel="icon" type="image/png" href="image/blog.png"><script src= "login2.js"> </script><body><div class="loginbox"><img src="avatar.png" class="avatar"><h1> Login Here </h1><form action="login.php" method="post"><p>Username</p><input type="text" name="" placeholder="Enter Username"><p>Password</p><input type="password" name="" placeholder=" Enter Password"><input type="submit" name="" value="Login" onclick="validate()"><a href="#">Forgot Password? </a><a href="register.html">Register Here</a></form></div>> </body></head></html>…arrow_forward
- <!DOCTYPE html> <!-- Created By CodingNepal - www.codingnepalweb.com --> <html lang="en" dir="ltr"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title> Website Layout | CodingLab</title> <linkrel="stylesheet"href="style.css"> <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/> </head> <body> <nav> <divclass="menu"> <divclass="logo"> <ahref="#">CodingLab</a> </div> <ul> <li><ahref="#">Home</a></li> <li><ahref="#">About</a></li> <li><ahref="#">Services</a></li> <li><ahref="#">Contact</a></li> <li><ahref="#">Feedback</a></li> </ul> </div> </nav> <divclass="img"></div>…arrow_forward<!DOCTYPE html> <!-- Created By CodingNepal - www.codingnepalweb.com --> <html lang="en" dir="ltr"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title> Website Layout | CodingLab</title> <linkrel="stylesheet"href="style.css"> <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/> </head> <body> <nav> <divclass="menu"> <divclass="logo"> <ahref="#">CodingLab</a> </div> <ul> <li><ahref="#">Home</a></li> <li><ahref="#">About</a></li> <li><ahref="#">Services</a></li> <li><ahref="#">Contact</a></li> <li><ahref="#">Feedback</a></li> </ul> </div> </nav> <divclass="img"></div>…arrow_forwardHow can I extend the codebase to include CSS animations and one more CSS element (A STAR) See my HTML AND CSS <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Transforms and Transitions & Animations CSS</title> <link rel="stylesheet" href="./css/cloud.css"></head><body> <div class="wrapper"> <div class="cloud"> <div class="cloudshadow"></div> </div> </div></body></html> CSS: .cloud, .cloudshadow { width: 350px; height: 120px; background: #3498db; border-radius: 100px; position: relative; margin: 150px 50px;}.cloud:after, .cloud:before, .cloudshadow:after, .cloudshadow:before { content: ''; position: absolute; background: #3498db;…arrow_forward
Database System ConceptsComputer ScienceISBN:9780078022159Author:Abraham Silberschatz Professor, Henry F. Korth, S. SudarshanPublisher:McGraw-Hill Education
Starting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSON
Digital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON
C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSON
Database Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage Learning
Programmable Logic ControllersComputer ScienceISBN:9780073373843Author:Frank D. PetruzellaPublisher:McGraw-Hill Education