Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we...

Question

Question

Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we...

Hello

please, don't use your handwriting in the solution

Thank you

In Page Layout Strategies, we talked about fluid and fixed layouts. If I was given the below code. Does that fluid or fixed layouts, and how did you indicate that? Explain your answer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Mount Olympus News</title>

#wrapper {

width: 960px;

outline: #ff7900 2px dashed;

}

#main {

float: left;

width: 650px;

margin: 0 20px;

outline: 2px dashed #0053ae;

}

#extras {

float: left;

width: 250px;

margin: 0 20px 0 0;

outline: 2px dashed #dd0009;

}

</style>

</head>

<body>

<h1>Mount Olympus News</h1>

</div>

<h2>Prometheus Heats Things Up</h2>

<p>Prometheus did not care to live amid the clouds on the mountain top. He was too

busy for that. While the Mighty Folk were spending their time in idleness, drinking

nectar and eating ambrosia, he was intent upon plans for making the world wiser and

better than it had ever been before.</p>

</div>

<h2>Links to Stories</h2>

<li><a href="">Jupiter & His Mighty Company</a></li>

<li><a href="">The Golden Age</a></li>

<li><a href="">The Story of Prometheus</a></li>

<li><a href="">The Flood</a></li>

<li><a href="">The Story of Io</a></li>

<li><a href="">The Wonderful Weaver</a></li>

<li><a href="">Cadmus and Europa</a></li>

<li><a href="">The Quest for Medusa's Head</a></li>

<li><a href="">The Story of Atlanta</a></li>

<li><a href="">The Horse and the Olive</a></li>

</ul>

</div>

</div>

</body>

</html>

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Question :

Answer :

Given layout in the question is fixed layout because width in the fixed layout expressed in terms of px that is pixel.
In fixed layout elements within page remains as it is even if browser is resized.

Explanation :

Here a new web page with name "layout.html" is created, which contains the code given in the question.

======================================================

Output : When layout.html is opened in the browser will get the screen as shown below.

Screen 1 :

Screen 2 :When browser resized will get the screen as shown below

******************************

Fluid Layout :

In terms of fluid layout width is expressed in terms of % (percentage) instead of px.
When browser is resized elements within web page adjust its size.

In the sale layout.html widths are given in the %.

layout.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Mount Olympus News</title>

#wrapper {

width: 80%;

outline: #ff7900 2px dashed;

}

#main {

float: left;

width: 64%;

margin: 0 20px;

outline: 2px dashed #0053ae;

}

#extras {

float: left;

width: 25%;

margin: 0 20px 0 0;

outline: 2px dashed #dd0009;

}

</style>

</head>

<body>

<h1>Mount Olympus News</h1>

</div>

<h2>Prometheus Heats Things Up</h2>

<p>Prometheus did not care to live amid the clouds on the mountain top. He was too

busy for that. While the Mighty Folk were spending their time in idleness, drinking

nectar and eating ambrosia, he was intent upon plans for making the world wiser and

better than it had ever been before.</p>

</div>

<h2>Links to Stories</h2>

<li><a href="">Jupiter & His Mighty Company</a></li>

<li><a href="">The Golden Age</a></li>

<li><a href="">The Story of Prometheus</a></li>

<li><a href="">The Flood</a></li>

<li><a href="">The Story of Io</a></li>

<li><a href="">The Wonderful Weaver</a></li>

<li><a href="">Cadmus and Europa</a></li>

<li><a href="">The Quest for Medusa's Head</a></li>

<li><a href="">The Story of Atlanta</a></li>

<li><a href="">The Horse and the Olive</a></li>

</ul>

</div>

</div>

</body>

</html>

Output :layout.html when browser is resized

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

Add a comment

Answer 2

Similar Homework Help Questions

Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we ...

Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we talked about fluid and fixed layouts. If I was given the below code. Does that fluid or fixed layouts, and how did you indicate that? Explain your answer <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Mount Olympus News</title> <style type="text/css"> #wrapper { width: 960px; outline: #ff7900 2px dashed; } #main { float: left; width: 650px; margin: 0 20px; ...
1. Predict the Result.Draw and write a brief description of the Web page that will becreated...

1. Predict the Result.Draw and write a brief description of the Web page that will becreated with the following XHTML code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>CircleSoft Designs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body { background-color: #FFFFCC;color: #330000;font-family Arial,Helvetica,sans-serif; }.content { width: 750px; }</style></head>Apply Your Knowledge<body><div class="content"><h1>CircleSoft Design</h1><div><strong>CircleSoft Designs will </strong><ul><li>work with you to create a Web presence that fits yourcompany</li><li>listen to you and answer your questions</li><li>utilize the most appropriate technology for your sites:JavaScript, Java, PHP, databases,...
Hi, trying to arrange the fourth photo under media tab for a mock web page. I'm...

Hi, trying to arrange the fourth photo under media tab for a mock web page. I'm trying to figure out how to get the 'planned stadium' photo to be shifted to the right and parallel to the 'Ground View 2018' picture. Below is the attached code and thanks for your help: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta name="author" content="Ian Kusnadi" /> <title>Tottenham Spurs Fan Page</title> </head> <style type="text/css"> a:link...

Path of Light Yoga Chapter 7 Please help!! Here is my code for the index page:...

Path of Light Yoga Chapter 7 Please help!! Here is my code for the index page: <html lang="en"> <head> <title>Path of Light Yoga Studio</title> <link rel="stylesheet" href="yoga.css" /> </head> <body> <div id="wrapper"> <header> <h1>Path of Light Yoga Studio</h1> </header> <nav> <a href="index.html">Home</a>   <a href="classes.html">Classes</a>   <a href="schedule.html">Schedule</a>   <a href="contact.html">Contact</a> </nav> <main> <img class="floatleft" src="yogadoor2.jpg" alt="yogadoor2" height="300px" width="250px"> <h2>Find Your Inner Light</h2> <p> Path of Light Yoga Studio provides all levels of yoga practice in a tranquil, peaceful environment....
Create your own grid-based page using the sample HTML. Generate a Grid ( Experiment with Different...

Create your own grid-based page using the sample HTML. Generate a Grid ( Experiment with Different Tools ) http://gridcalculator.dk/ Implement grid on the sample html file using pixels Convert to a percentage-based grid HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Out with the old...</title> <link rel="stylesheet" href="path-to-style.css"> <meta name="description" content="We are going to refine this document down to a good starting point for all html5 projects moving forward."> <meta name="author" content="ABC"> <link rel="shortcut icon" href="/favicon.ico" /> </head> <body> <div...
Hello, I was wondering if you could possibly think of ways to improve my home page then I would l...

Hello, I was wondering if you could possibly think of ways to improve my home page then I would like you to do so. I know it could be better. Thank you. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link href="style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <nav class="navbar...

Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we...

Homework Answers

Add Answer to:
Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we...

Post as a guest

Earn Coins