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
- Make a nice look home page using html and css about coffee shop website, apply bootstrap to get nice look, use your inispiration to make the home page with navigation bar and also footer at the end.arrow_forwardYou have to create a small website based on a grocery store. the website must cover HTML, CSS, and JavaScript HTML HTML Web elements (list, table, form ...) Navigation (Links are clear and located in the same area on each page. All links are functional) CSS Design (using CSS) Website clearly demonstrates design principles: with consistent alignment, proximity, repetition, and contrast... JavaScript Form validation copy and paste the website code and add screenshots of the output with a brief explication of each functionality of the web application Important Notes: The number of Web pages must be at least 5 Use the same theme across the website Use correct XHTML syntax Add Navigation menu to all pages (appear at the same area in all pages) For form validation, there must be one popup message that appears after the submit button has been clicked. The message must contain a list of all validation errors on the Web page.arrow_forwardMake a creative webpage as much as you can. Write a simple program showcasing HTML formatting, quotation, and citation elements. You may use other tags as to make your webpage more creative, informative and presentable.arrow_forward
- A restaurant online ordering application can be created using a simple and intuitive design, incorporating relevant and attractive images of dishes, and implementing unique and engaging features. A responsive 3-column layout using CSS Grid or Flexbox is recommended, with media queries to adjust the layout for different screen sizes. An HTML table should be created to display menu items, with appropriate HTML attributes to make the table accessible and responsive. Web forms should be implemented, allowing users to enter their name, contact information, delivery address, and preferences. JavaScript can be used to perform computations, dynamically update order summary and total cost, and capture user interactions. LocalStorage can be used to store order details in the browser, enabling persistent data storage. Loops and arrays can be used to efficiently handle multiple menu items and their corresponding details. External CSS should be created to organize and maintain the styling of the…arrow_forwardCreate a new html page called product.html. Add 5 product images to the page with Price, Name, Description and Id attributes. Under each product add an add to cart button and a remove from cart button on each item. Make the id property of the buttons the id for the product.arrow_forwardWeb page design. I just want the codes1. The student creates a one-page website to display the store's products, so that the student chooses medicinal herbs and healthy foods to sell in his store.2. The images are arranged in a table in HTML format. CSS colors and page decorations.3. The page visitor can move the mouse on the product image, so that it is enlarged when the mouse is over the image, and when it moves away, it returns to its original small size in the form of an icon. Of course the prices are calculated automatically when you click on the check box for each image. This is done through JavaScript programs.4. The visitor cannot buy or add to the basket products without an account, as he records his data in a database in the users table on the server.5. The shopper or visitor appears in the dedicated column on the right the products that they have selected and stored in the basket, the price of each product in addition to the total price at the bottom of the column.6. When he…arrow_forward
- Develop a basic personal web page using the HTML he correct html, head, and body tags Insert the following phrase, without the quotes, as your title tag: “HTML Beginner Exercise by <insert your first and last name>.” Example: HTML Beginner Exercise by Theresa Clarke One unordered list of items (must include at least four items) One ordered list of items (must include at least four items) A bold word or phrase anywhere on the page A centered word or phrase anywhere on the page An italicized word or phrase anywhere on the page At least three hypertext links to other sites on the Internet Include at least 4 menus(Home, About Me, Interest, Contacts) Any .jpg or .gif images imagesarrow_forwardUsing responsive images tags to create an HTML page. The image in the html file should be able to scale automatically as the browser window resizes at least in 3 different sizes as shown. As shown, correctly using responsive images tags will result in different images being displayed when resizing. Can someone help me with resizing?arrow_forwardCreate a new html page. On the html add five products to the page with a product class with price, name, description and id attributes for each. Under each product creat an add to cart button and create a remove from cart button. Make the id property of both buttons the id of the product.arrow_forward
- Complete the following webpage assignment. Assignment Instructions: Design a webpage to simulate a Blog. The website must have a banner image and a featured image with multiple resolutions to be active at different resolution breakpoints just as discussed in this lesson. Include a jQuery script in your project to further enhance the user experience. Use one of the CDN libraries. The script is up to your discretion though you must be able to justify its use. The blog page must be aesthetically pleasing and follow a traditional blog structure. It may help to look at the many WordPress templates available on the net.arrow_forwardYou are required to design HTML page based on the following descriptions: Insert image of nature in your web page. Change the border to size”20”. Change the position of the image to be in the center of the page. Add image as background in your web page. Add attributes to your image: Alternative text=”Nature” Title=”Nature”arrow_forwardProject Overview: In this project, you need to build a website based on your chosen idea. The Website must cover all aspects of the course (HTML, CSS HTML Web elements (header, footer, list, table, form ...) HTML Navigation (Links are clear and located in the same area on each page. All links are functional) Design (using CSS) Website demonstrates design principles: with CSs consistent alignment, proximity, repetition, and contrast, multi column layout.arrow_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:Cengage