html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }

Hello World

The Philippine Global School

U The Philippine Global School.

">
Scribd
Upload
36 views8 pages

Q3W5 - Create Divisions in A Web Page

Here is the code with divisions added: <!DOCTYPE html> <html> <body> <div id="header"> <h3 style="color:Tomato;">Hello World</h3> </div> <div id="content"> <p style="color:DodgerBlue;">The Philippine Global School</p> <p style="color:MediumSeaGreen;">U The Philippine Global School.</p> </div> </body> </html>

Uploaded by

Pauline Ann Tasi
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
36 views8 pages

Q3W5 - Create Divisions in A Web Page

Here is the code with divisions added: <!DOCTYPE html> <html> <body> <div id="header"> <h3 style="color:Tomato;">Hello World</h3> </div> <div id="content"> <p style="color:DodgerBlue;">The Philippine Global School</p> <p style="color:MediumSeaGreen;">U The Philippine Global School.</p> </div> </body> </html>

Uploaded by

Pauline Ann Tasi
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
You are on page 1/ 8

Grade 10 – HTML5

Create Division in a Web Page


Grade 10 – HTML5
HTML Background Images
Objectives:

ICT:

 Explain divisions – The Div Tag


 Define Master Head and ID attributes

ROBOTICS
 Apply Web and Structure of HTML and CSS.
Grade 10 – HTML5
Definition and Usage
The <div> tag defines a division or a section in an HTML
document.

The <div> tag is used as a container for HTML elements -


which is then styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Note: By default, browsers always place a line break before


and after the <div> element.
Grade 10 – HTML5
Div Tag
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>

<h1>The div element</h1>

<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>

<p>This is some text outside the div element.</p>

</body>
</html>
Grade 10 – HTML5
HTML ID Attribute
The HTML id attribute is used to specify a unique
id for an HTML element.

You cannot have more than one element with the


same id in an HTML document.
Grade 10 – HTML5
Using The id Attribute
The id attribute specifies a unique id for an HTML element.
The value of the id attribute must be unique within the HTML
document.

The id attribute is used to point to a specific style declaration


in a style sheet. It is also used by JavaScript to access and
manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an


id name. Then, define the CSS properties within curly braces
{}.

In the following example we have an <h1> element that points


to the id name "myHeader". This <h1> element will be styled
according to the #myHeader style definition in the head
section:
Grade 10 – HTML5
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>

<h1 id="myHeader">My Header</h1>

</body>
</html>
Grade 10 – HTML5
Activity (create a division for the following code)

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">The Philippine Global School</p>

<p style="color:MediumSeaGreen;">U The Philippine Global School.</p>

</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy