Question

In: Computer Science

Computer science!: (Dimension the following html application and describe positioning, dimensions of, and color of all...

Computer science!:

(Dimension the following html application and describe positioning, dimensions of, and color of all of the section elements. (DESCRIBE ONLY THE SECTION ELEMENTS IN DETAIL)

For A) Everything as given in the HTML and CSS with section height 700 excluded ( commented out as given)

  1. With a section height of 750   included

<html>

<head>

    <meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="square12.css">

<title>Squarespace layout</title>

</head>

    

<body>

    <nav></nav>

    <header></header>

    <section>

      <!-- main paragraph -->

      <p></p>

      <!-- Two column-type things -->

      <div id="flex-container">

        <div class="col"></div>

        <div class="col"></div>

        <div class="col"></div>

        <div class="col"></div>

      </div>

    </section>

    <footer></footer>

</body>

</html>

                               Square12.css

body {

margin: 0;

}

nav {

background-color: royalblue;

height: 75px;

}

header {

background-color: lightskyblue;

height: 400px;

}

section {

background-color: orange;

margin: 75px 100px;

/* height:700px; */

}

footer {

background-color: black;

height: 100px;

}

p {

background-color: khaki;

height: 275px;

margin-bottom: 75px;

}

div.col { background-color: tomato;

border: 2px solid black;

height:50px;}

#flex-container{ height:300px;

background-color:green;}

Solutions

Expert Solution

The section tag will define the group on the webpage if we have topics relating to headings, paragraphs, images, and videos in this case when we put in one place is called a section. In our webpage like this section may occur in different forms like about us page, copyright page, services page, etc, now will get confusion what is difference between section and division, the division is the blank element in which can be possible to put a related group of content together but we should put in the section itself because section will define group all content together, the main difference of section and div that in the google search engine section is very easy to traceable but div is not.

Syntax:

<section> contents with tag elements </section>

Example:

<!DOCTYPE html> 
<html> 
        <head> 
                <title>Section tag</title> 
        </head> 
        <body> 
                <section> 
                        <h1>Introduction</h1> 
                        <p>Content of Introduction</p> 
                </section> 
        </body> 
</html>

The section element represents a generic section of a document or application, the basic difference is that the div element should be used for styling or scripting whereas the section element should be used for literal content, when an element is needed only for styling purposes or as a convenience for scripting always have suggestion to make use of section, a general rule is the section element is appropriate only if the element content would be listed explicitly although section is stylable as well it is suggest to use div instead the purpose of section and question for styling or scripting. use section for things like section of chapter or the chapters themselves. the section element represents the generic document section not a wrapper element.

Kindly note that, the div can be used any part of area of the website like inside the section or outside the section.

From the code, the section tag was mention in the html page after header and nav tag so in the webpage will display after nav element, here the reference:

<nav></nav>

    <header></header>

    <section>

      <!-- main paragraph -->

      <p></p>

      <!-- Two column-type things -->

      <div id="flex-container">

        <div class="col"></div>

        <div class="col"></div>

        <div class="col"></div>

        <div class="col"></div>

      </div>

    </section>

    <footer></footer>

header, nav, section and footer display on webapge on the basis on the css define for the html tags,

let's discuss about the css section tag,

section {

background-color: orange;

margin: 75px 100px;

/* height:700px; */


}

from css the height is on the comment which means that height alignment will not display according to the webpage. the margin define two values for top and right alignment where is top is 75 px and height 100px; in the webpage it will show like this:

As per margin assign the values it was setup up top and right, now if you remove the comment for the height which is 700px then also there will also not apply on the webpage, which means margin and height can't be work together for this purpose you need to remove margin element from the css,

section {
background-color: orange;
height:700px;
}

Once assign the height, here the output:

I hope you understand how the height work on the webpage, any doubts please let me know.

venereology answered 1 year ago
Next > < Previous

Related Solutions

(Dimension the following html application describe positioning, dimensions of and color of all of the section...
(Dimension the following html application describe positioning, dimensions of and color of all of the section elements. ( ONLY DESCRIBE THE SECTION ELEMENTS IN DETAIL) For A) Everything as given in the HTML and CSS with section height 675 excluded ( commented out as given) With the section height of 675 uncommented ( included) <html>   <head>     <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="square12.css">   <title>Squarespace layout</title>   </head>   <body>     <nav></nav>     <header></header>     <section>       <!-- main paragraph -->       <p></p>       <!-- Two column-type things -->       <div...
Importance of modern science and philosophy by determining their application to and limitation on computer science....
Importance of modern science and philosophy by determining their application to and limitation on computer science. Give 5 instances.
q: Given the following HTML for a table, put all these questions into one application (use...
q: Given the following HTML for a table, put all these questions into one application (use css) a)   Modify the html to create another column called Assessment, and then modify the html to extend the data in the rows ( you may use arbitrary numbers for the data items in the td elements) b)   Make all table text elements blue using either css or html modification c)   Make the background color of the columns alternate between pink and yellow, <!DOCTYPE...
Identify and describe the Eight Dimensions of Organizational Capacity for Change (OCC). For each Dimension, discuss...
Identify and describe the Eight Dimensions of Organizational Capacity for Change (OCC). For each Dimension, discuss its significance to the organization and whether or not you believe it is essential to OCC. Support your positions with examples. please a diffrent answer other than what's already in here
Identify and describe the Eight Dimensions of Organizational Capacity for Change (OCC). For each Dimension, discuss...
Identify and describe the Eight Dimensions of Organizational Capacity for Change (OCC). For each Dimension, discuss its significance to the organization and whether or not you believe it is essential to OCC. Support your positions with examples.
______ ______ can be appropriately described as the application of computer science to high-level, real-world problems.
______ ______ can be appropriately described as the application of computer science to high-level, real-world problems.
Describe different types of data structures in Computer Science with examples.
Describe different types of data structures in Computer Science with examples.
Select one of the following three common computer science problems and describe how recursion can be...
Select one of the following three common computer science problems and describe how recursion can be used to solve this problem more efficiently (sorting, minimum cost spanning tree, knapsack problem). You must generally describe the algorithm that would be used to solve the problem and detail how recursion makes the algorithm more asymptotically efficient.
Create 6 tags with text inside them (in a valid HTML page,) color each differently. All...
Create 6 tags with text inside them (in a valid HTML page,) color each differently. All show up on the page at this point... it's better to try to have everything upfront and in the open 1st and later have them hide, hover, or whatever interaction they will do. See the video for the text, don't bother matching the colors in the video. Validate the HTML. Bugs multiply as you make the page more complex; a CSS problem could actually...
Describe what are sorting and searching, and why are they essential in a computer science field....
Describe what are sorting and searching, and why are they essential in a computer science field. Give two examples when sorting and searching are necessary in designing software applications. Describe three different types of existing sorting algorithms and two types of searching algorithms. Justify, compare and contrast your choice of sorting and searching algorithms. Include one example of sorting or searching program. You may use a program you discover on the Internet as an example. Please make sure to give...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT