Scribd
Upload
7 views24 pages

HTML4

The document provides an overview of the HTML <div> tag, which is used as a block-level container for styling and structuring content with CSS and JavaScript. It includes examples demonstrating the use of <div> elements, class and id attributes for styling, and how to manipulate content for better readability and maintainability. Additionally, it highlights the importance of unique id attributes and class attributes in applying styles to HTML elements.

Uploaded by

Aegan Joshua Malapitan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views24 pages

HTML4

The document provides an overview of the HTML <div> tag, which is used as a block-level container for styling and structuring content with CSS and JavaScript. It includes examples demonstrating the use of <div> elements, class and id attributes for styling, and how to manipulate content for better readability and maintainability. Additionally, it highlights the importance of unique id attributes and class attributes in applying styles to HTML elements.

Uploaded by

Aegan Joshua Malapitan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Click to edit Master title style

HTML
Introduction

1
HTML Div Tag
Click to edit Master title style

The HTML <div> tag defines sections in


HTML documents, serving as containers
styled with CSS or controlled with JavaScript.
It’s easily customized using class or id
attributes and can contain various content.

2 2
Click
Div to
tagedit Master title style
Usage

•The div tag is the block-level tag.

•It is used for applying styles and layout structure <div> and
allows us to manipulate and position content through CSS.

•It also divides content into logical sections, aiding in the


readability and maintainability of the code.

•As we know, a Div tag is a block-level tag containing the entire


width. Hence, every div tag will start from a new line and not the
same line.
3 3
Click to edit
<!DOCTYPE Master title style
html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>

<h1>HTML DIV Example</h1>

IT <div>I am a div</div> Programmer.

<p>The yellow background is added to demonstrate the footprint of the DIV


element.</p>

</body>
</html>
4 4
<!DOCTYPE html>
Click to edit Master
<html>
<style> title style
div {
background-color: #FFF4A3;
}
</style>
<body>

<h1>HTML DIV Example</h1>

<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>

<p>The yellow background is added to demonstrate the footprint of the DIV element.</p>

</body>
</html> 5 5
<!DOCTYPE html>
Click to edit Master title style
<html>
<style>
div {
width: 300px;
margin: auto;
background-color: #FFF4A3;
}
</style>
<body>

<h1>Center align a DIV element</h1>

<div>
<h2>Tayabas</h2>
<p>CITY.</p>
<p>QUEZON.</p>
</div>

</body>
</html>
6 6
<!DOCTYPE html>
<html>
Click to edit Master title style
<body>

<h1>Multiple DIV Elements</h1>

<div style="background-color:#FFF4A3;">
<h2>Tayabas</h2>
<p>City</p>
<p>Quezon</p>
</div>

<div style="background-color:#FFC0C7;">
<h2>Lucena</h2>
<p>City</p>
<p>Quezon</p>
</div>

<div style="background-color:#D9EEE1;">
<h2>Lucban</h2>
<p>City</p>
<p>Quezon</p>
</div>
7 7

</body>
Click to edit Master title style

8 8
Click to edit Master title style

9
9
Click to edit Master title style

1010
}
</style>

Click to edit Master title style


<body>

<div style="background-color:#FFF4A3;">
<h2>Tayabas</h2>
<p>City</p>
<p>Quezon</p>
</div>

<div style="background-color:#FFC0C7;">
<h2>Lucena</h2>
<p>City</p>
<p>Quezon</p>
</div>

<div style="background-color:#D9EEE1;">
<h2>Lucban</h2>
<p>City</p>
<p>Quezon</p>
</div>

</div> 1111
ClickThe
to edit attribute
Master
class is often used to point
title style
to a class name in a style sheet. It can
also be used by a JavaScript to access and
manipulate elements with the specific
class name.

In the following example we have


three <div> elements with
a class attribute with the value of "city".
All of the three <div> elements will be
styled equally according to the .city style
definition in the head section:
1212
<style>
.city {
background-color: tomato;
Click to edit Master title style
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h2>Tayabas</h2>
<p>City</p>
</div>

<div class="city">
<h2>Lucena</h2>
<p>City</p>
</div>

<div class="city">
<h2>Lucban</h2>
1313
<p>Quezon</p>
Click to edit Master title style

1414
Click to edit Master title style

1515
Click to edit Master title
<!DOCTYPE html>style
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>

<h1>IT <span class="note">PROGRAMMER</span>


101</h1>
<p>This is some <span class="note">important</span>
text.</p>

</body>
</html>

1616
Click to edit Master title style

1717
<html>
<head>
<style>
Click to edit Master title style
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>

<h2>The class Attribute</h2>


<p>Use CSS to style elements with the class name
"city":</p>

<h2 class="city">TAYABAS</h2>
<p>CITY</p>

<h2 class="city">LUCENA</h2>
<p>CITY.</p>

<h2 class="city">LUCBAN</h2>
<p>QUEZON</p>
1818
Click to edit Master title style

1919
<html>
<head>

Click to edit Master title style


<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}

.main {
text-align: center;
}
</style>
</head>
<body>

<h2>Multiple Classes</h2>

<h2 class="city main">LUCENA</h2>


<h2 class="city">TAYABAS</h2>
<h2 class="city">LUCBAN</h2>

</body> 2020

</html>
HTML
Click id Attribute
to edit Master title style

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 {}.

2121
<!DOCTYPE html>

Click to edit Master title style


<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>

2222
Click to edit Master title style

2323
background-color: lightblue;
color: black;

Click to edit Master title style


padding: 40px;
text-align: center;
}

/* Style all elements with the class name "city" */


.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>

<!-- An element with a unique id -->


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

<!-- Multiple elements with same class -->


<h2 class="city">TAYBAS</h2>
<p>CITY.</p>

<h2 class="city">LUCENA</h2> 2424

<p>CITY</p>

You might also like