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 8 months 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...
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.
Describe different types of data structures in Computer Science with examples.
Describe different types of data structures in Computer Science with examples.
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...
QUALITY MANAGEMENT Describe in detail the application of service quality dimensions (Parasuraman, Zeithamel, and Berry) :...
QUALITY MANAGEMENT Describe in detail the application of service quality dimensions (Parasuraman, Zeithamel, and Berry) : i. in providing high-quality services ii. in meeting/exceeding customer expectations (through service quality gap)
Given the html below, create css to produce the following illustrated color page output: Red for...
Given the html below, create css to produce the following illustrated color page output: Red for outer paragraph and outer list Green and italic for first inner div paragraph, green for second div paragraph, blue for inner list HTML File <html> <head>       <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body>              <p>     I'm a paragraph, what color am I ?      </p>    <ul>      <li id = "fix"> I'm a list item;what color am I? </li>        </ul> <div class = "central1"> <p class ="above">   I'm...
Foundation of Computer Science Describe an algorithm that takes as input a list of n integers...
Foundation of Computer Science Describe an algorithm that takes as input a list of n integers and produces as output the largest difference obtained by subtracting an integer in the list from the one following it. Write its corresponding program using your favorite programming language
5) Describe the principle or application of Brain Computer Interface. a) What is the value proposition...
5) Describe the principle or application of Brain Computer Interface. a) What is the value proposition b) What is the technology and what are the key components of this device? please explain technical details of this technology c) How is the medical device different or the competitive advantage of this medical device.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT