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
- also provide the number of moves(actions) made at state A and moves(actions) made state B. INCLUDE Java program required(this question is not graded)arrow_forwardYou are given a class that processes purchases for an online store. The class receives calls to: • Retrieve the prices for items from a database • Record the sold items • Update the database • Refresh the webpage a. What architectural pattern is suitable for this scenario? Illustrate your answer by drawing a model for the solution, showing the method calls/events. b. Comment on how applying this pattern will impact the modifiability of the system. c. Draw a sequence diagram for the update operation.arrow_forward2. The memory management has contiguous memory allocation, dynamic partitions, and paging. Compare the internal fragmentation and external fragmentation for these three approaches. [2 marks] 3. Suppose we have Logical address space = 24 = 16 (m = 4), Page size=2² =4 (n = 2), Physical address space = 26 = 64 (r = 6). Answer the following questions: [4 marks] 1) Total # of pages ? 2) Total # of frames ? 3) Number of bits to represent logical address? 4) Number of bits to represent offset ? 5) Number of bits to represent physical address? 6) Number of bits to represent a page number? 7) Number of bits to represent a frame number / 4. What is translation look-aside buffers (TLBS)? Why we need them to implement the page table? [2 marks] 5. Why we need shared pages for multiple processes? Give one example to show the benefits. [2 marks] 6. How to implement the virtual memory by using page out and page in? Explain with an example. [2 marks] 7. We have a reference string of referenced page…arrow_forward
- Good morning, please solve this trying to follow this criteria. (use Keil) Abstract describing the requirements and goals of the assignment. List file with no errors or warnings. Brief description of your implementation design and code. Debugging screen shots for different scenarios with your reference and comments. Conclusion (and please give me the code without errors, make sure it is working)arrow_forwardGood mrng, please solve this trying to follow this criteria. (use Keil) Abstract describing the requirements and goals of the assignment. List file with no errors or warnings. Brief description of your implementation design and code. Debugging screen shots for different scenarios with your reference and comments. Conclusion (and please give me the code without errors, make sure it is working)arrow_forward#include <stdio.h> #include <stdlib.h> #include <unistd.h> int global_var = 42; // int* function(int *a) { int local_var = 10; // *a = *a + local_var; int *local_pointer = (int *)malloc (size of (int) * 64); // Allocated array with 64 integers return local_pinter; } int main() { int local_main[1024*1024*1024*1024*1024] = {0}; // initialize an array and set all items as 0 int *heap_var = (int *)malloc(size of(int) * 16); // Allocated array with 16 integers *heap_var = 100; function(heap_var); printf(“the value is %d\n”, *heap_var); free(heap_var); // release the memory return 0; } 1) draw the memory layout of the created process, which should include text, data, heap and stack [2 marks]. 2) Indicate which section the variables are allocated [2 marks]: global_var local_var, local_pointer local_main heap_var, *heap_var (the data that it points to) 3) Does this code have memory leaking (heap memory is not released)? [2 marks] 4) The…arrow_forward
- 8. List three HDD scheduling algorithms. [2 marks] 9. True or False? The NVM has the same scheduling algorithms with HDD. Explain why? [2 marks] 10. Why the modern mouses use polling to detect movements instead of interrupts? [2 marks] 11. What is thrashing? How does it happen? [2 marks] 12. Given a reference string of page numbers 7, 0, 1, 2, 0, 3, 0, 4, 2, 3, 0, 3, 0, 3, 2, 1, 2, 0, 1, 7, 0, 1 and 4 frames show how the page replacement algorithms work, and how many page faults? [6 marks], 1) FIFO algorithm? [2 marks] 2) Optimal algorithm? [2 marks] 3) LRU algorithm? [2 marks] 13. List at least three file systems that you know. [2 marks] 14. In C programming, how the seek to a specific position in the file by offset? [2 marks]arrow_forwardA Personal Address Book application program allows the user to add, delete, search, save, and load contact information. The program separates the user interface (command-line) and the internal processing subsystem. The internal processing system consists of the following classes: • • Contact Manager (responsible for add and delete operations) Contact Finder (responsible for the search operation) pataManager (responsible for save and load operations) a. What design pattern can be used to implement the user interface? Explain your answer using a class diagram for the entire system. b. Draw a UML sequence diagram to show the behavioral view of the Personal Address Book program, demonstrating what happens when a user enters new contact information.arrow_forwardA system comprises three components: A, B, and C. Calling A requires calling B, and calling B requires calling A. Component C is responsible for dissimilar tasks T#1, #2, and T#3. a. Comment on the modifiability of this system. What problems do you see in this system, and how would you solve them? b. Suppose that T#1 is performed by both component A and C. What does this indicate about A and C? How would you solve this problem?arrow_forward
- Please answer questions from number 1 to 3 if these questions in the image provided below(NOTE: THESE QUESTIONS ARE NOT GRADED!)arrow_forwardIn a client-server system for a hypothetical banking application, the clients are ATM machines, and the server is the bank server. Suppose the client has two operations: withdraw and deposit. Use the broker architectural pattern to document an initial architecture design for this system: a. Draw a class diagram for this system. Use a client-side proxy to encrypt the data using an encrypt operation and a server-side proxy to decrypt the data. b. Discuss how you plan to apply redundancy tactics on the server. Additionally, identify the quality attribute that this tactic will achieve and discuss any potential side effects of applying it.arrow_forwarda. Comment on how you would achieve higher performance for a hypothetical Trent Course Registration System, assuming it utilizes a client-server architecture. b. Suppose we want greater availability of the server. Discuss what kind of tactics should be used to achieve that.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:CengageCOMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L
Programming with Microsoft Visual Basic 2017Computer ScienceISBN:9781337102124Author:Diane ZakPublisher:Cengage Learning