Scribd
Upload
12 views13 pages

GR 9 Division Tag

Uploaded by

back.up.kong.email
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views13 pages

GR 9 Division Tag

Uploaded by

back.up.kong.email
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

The

DIVISION
TAG
Division Tag
The <div> tag
defines the division
or a section in a
HTML document. It
is also used as a
container for HTML
elements – which is
then styled using
CSS or manipulated
using JavaScript.
<div> tag is a pair
•Div tag is Block level
tag
•It is a generic
container tag
THINGS TO •It is used to the
REMEMBER group of various tags
ABOUT DIVISION of HTML so that
TAG
sections can be
created and style can
be applied to them.
- The Div is one of the most usable tag in web development
because it helps us to separate out data in the web page and we
can create a particular section for particular data or function in3
Read this pages
for some details
about the tags,
LOOK ON
attributes,
PAGE 5
IN YOUR values, and CSS
MODULE elements that we
can use to modify
and or put style
on your divisions.
4
TIME TO
PRACTICE
LET’S EXPLORE HOW TO MAKE
DIVISIONS
Let’s create a simple division and
BASIC: style it with simple CSS element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: block;
}
</style> In this document, we will
</head> create a division that has no
<body> border, no background color,
and very simple division.
A div element is displayed like this:

<div>This is some text in a div element.</div>

Change the default CSS settings to see the effect.

</body>
</html>
Let’s make the simple division into a bit
BASIC +1: artistic. Just edit the CSS portion from the
<!DOCTYPE html> previous document.
<html>
<head>
<style>
div {
display: block;
In this CSS format, the
background-color: yellow; division will now have a
margin: 2px; border around it, it will now
border: 5px blue outset; have a color, and the division
text-align: center; will have a margin. The text in
the division has now an
}
alignment.
</style>
</head>
<body>
…
Let’s make two divisions. To make
BASIC +2:
this work, we need to use a class.
<!DOCTYPE html>
<html>
<head> <h1>The div element</h1>
<style>
.c1 { <div class="c1">
border: 5px dotted red; <h2>This is the first division</h2>
background-color: lightblue; </div>
text-align: center;
} <div class="c2">
<h2>This is the second division</h2>
.c2 { </div>
border: 2px solid green;
background-color: yellow;
text-align: right; <p>This is some text outside the div element.</p>
}
</body>
</style> </html>
</head>
<body>
BASIC +3:
Let’s make a division within a
division. (nested division)
<!DOCTYPE html>
<html> <body>
<head>
<style> <h1>The div element</h1>
.c1 {
border: 5px dotted red; <div class="c1">
background-color: lightblue; <div class="c2">
text-align: center; <h2>in this division, you can see that one division
} is found inside another division</h2>
</div>
.c2 { </div>
border: 2px solid green;
background-color: yellow;
text-align: center; <p>This is some text outside the div element.</p>
margin: 10px;
} </body>
</html>
</style>
</head>
BASIC +4:
Let’s make a division that is
placed beside each other.
<!DOCTYPE html> <div class="rightdiv">
</style>
<html> SECOND<p>
</head>
<head> The height of the division will now
<body>
<style> depend on its content, unless
.leftdiv { specified by the encoder.
<h1>The div element</h1>
border: 2px solid red; </div>
background-color: lightblue;
<div class="leftdiv">
text-align: center; </body>
FIRST<p>
float: left; </html>
<p>
width: 40%;
This division may be taller than the
}
second since it has a larger amount
of text encoded inside of this
.rightdiv {
division. Remember, the height of
border: 2px solid green;
the division will depend on its
background-color: yellow;
content, unless the height is
text-align: center;
specified by the maker.
float: left;
</div>
width: 58%;
}
BASIC +5: A simple division layout
<!DOCTYPE html>
.topdiv { This division may be taller than the
<html>
border: 2px solid green; second since it has a larger amount
<head>
background-color: orange; of text encoded inside of this
<style>
text-align: center; division. Remember, the height of
.leftdiv {
float: top; the division will depend on its
border: 2px solid red;
} content, unless the height is
background-color: lightblue;
specified by the maker.
text-align: center;
</style> </div>
float: left;
</head>
width: 40%;
<body>
}
<div class="rightdiv">
<div class="topdiv"> SECOND<p>
.rightdiv {
THIS IS A NAVIGATION DIVISION The height of the division will now
border: 2px solid green;
</div> depend on its content, unless
background-color: yellow;
specified by the encoder.
text-align: center;
<div class="leftdiv"> </div>
float: left;
FIRST<p>
width: 58%;
<p> </body>
}
</html>
BASIC IS
DONE.

CHALLENGE TIME!!!
HANDS-ON CHALLENGE
NOTE:
Color of each
division:
Top: - green
Left – gray
Center – white
Right – blue
Bottom is gray

THE LAYOUT
OF ALL
DIVISION
MUST BE IN
SCALE IN
MUST FORM A
RECTANGLE

You might also like