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
- whats for dinner? pleasearrow_forwardConsider the follow program that prints a page number on the left or right side of a page. Define and use a new function, isEven, that returns a Boolean to make the condition in the if statement easier to understand. ef main() : page = int(input("Enter page number: ")) if page % 2 == 0 : print(page) else : print("%60d" % page) main()arrow_forwardWhat is the correct python code for the function def countWords(string) that will return a count of all the words in the string string of workds that are separated by spaces.arrow_forward
- Consider the following program that counts the number of spaces in a user-supplied string. Modify the program to define and use a function, countSpaces, instead. def main() : userInput = input("Enter a string: ") spaces = 0 for char in userInput : if char == " " : spaces = spaces + 1 print(spaces) main()arrow_forwardWhat is the python code for the function def readFloat(prompt) that displays the prompt string, followed by a space, reads a floating-point number in, and returns it. Here is a typical usage: salary = readFloat("Please enter your salary:") percentageRaise = readFloat("What percentage raise would you like?")arrow_forwardassume python does not define count method that can be applied to a string to determine the number of occurances of a character within a string. Implement the function numChars that takes a string and a character as arguments and determined and returns how many occurances of the given character occur withing the given stringarrow_forward
- Consider the ER diagram of online sales system above. Based on the diagram answer the questions below, a) Based on the ER Diagram, determine the Foreign Key in the Product Table. Just mention the name of the attribute that could be the Foreign Key. b) Mention the relationship between the Order and Customer Entities. You can use the following: 1:1, 1:M, M:1, 0:1, 1:0, M:0, 0:M c) Is there a direct relationship that exists between Store and Customer entities? Answer Yes/No? d) Which of the 4 Entities mention in the diagram can have a recursive relationship? e) If a new entity Order_Details is introduced, will it be a strong entity or weak entity? If it is a weak entity, then mention its type?arrow_forwardNo aiarrow_forwardGiven the dependency diagram of attributes {C1,C2,C3,C4,C5) in a table shown in the following figure, (the primary key attributes are underlined)arrow_forward
- What are 3 design techniques that enable data representations to be effective and engaging? What are some usability considerations when designing data representations? Provide examples or use cases from your professional experience.arrow_forward2D array, Passing Arrays to Methods, Returning an Array from a Method (Ch8) 2. Read-And-Analyze: Given the code below, answer the following questions. 2 1 import java.util.Scanner; 3 public class Array2DPractice { 4 5 6 7 8 9 10 11 12 13 14 15 16 public static void main(String args[]) { 17 } 18 // Get an array from the user int[][] m = getArray(); // Display array elements System.out.println("You provided the following array "+ java.util.Arrays.deepToString(m)); // Display array characteristics int[] r = findCharacteristics(m); System.out.println("The minimum value is: " + r[0]); System.out.println("The maximum value is: " + r[1]); System.out.println("The average is: " + r[2] * 1.0/(m.length * m[0].length)); 19 // Create an array from user input public static int[][] getArray() { 20 21 PASSTR2222322222222222 222323 F F F F 44 // Create a Scanner to read user input Scanner input = new Scanner(System.in); // Ask user to input a number, and grab that number with the Scanner…arrow_forwardGiven the dependency diagram of attributes C1,C2,C3,C4,C5 in a table shown in the following figure, the primary key attributes are underlined Make a database with multiple tables from attributes as shown above that are in 3NF, showing PK, non-key attributes, and FK for each table? Assume the tables are already in 1NF. Hint: 3 tables will result after deducing 1NF -> 2NF -> 3NFarrow_forward
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
Np Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:CengageCOMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L
Programming with Microsoft Visual Basic 2017Computer ScienceISBN:9781337102124Author:Diane ZakPublisher:Cengage Learning