Sprint 3.

4 Attributes and
Grouping
Unit 3 Basics of HTML

DigiChamps | Level 8
Learning Objective
● manage the design of HTML elements;
● implement a div, span tag, and class attribute to apply text styling
and background to the web page.

2
Outline
● Adding attributes to enhance functionality to web pages.

3
Attributes

4
Attributes
An attribute is a piece of code that is put inside the opening tag of
an HTML element to describe its properties. There are two parts to
every attribute: a name and a value.
● The name is the property to be changed. In this example, the
body element has an attribute called bgcolor that can be used
to set the background color of the body of the web page.
● The value refers to the property's value, and is always written
in quotes. The value of the bgcolor attribute shown in the
example is #FFF5EE.

5
Attributes
Following are the four important attributes that almost all HTML
elements can have:
➢ style
➢ id
➢ class
➢ title

6
Style Attribute

7
Style Attribute

Style attribute, we can give our HTML elements

different styles. It changes the way the text looks on
the page. It includes changing the font size, font
family, font color, and so on.
Syntax:
<tagname style="property:value;">

Example:
8
 https://go.qubitscs.com/6M4u

The style attribute -

Project source file
To find the project source
file, scan the QR code or
access the link.

9
Style Attribute

Applying multiple styles

Syntax:
<tagname style = "property: value;
property: value";>

Example:

10
Properties of Style Tag

11
Properties of the style tag
Font size
The font-size attribute can be used in any writing tag like heading or
paragraph <p> tag to alter the size of the written text.
Font color
Any text writing tag, such as <p> or a heading tag, can use the font color tag
to change the color of the text. Both color names and color hex codes are
acceptable.
Text alignment
The text alignment tag changes how a text is aligned; such as in the center,
to the left, or to the right.
Background color
We can change the color of the background page or web page by using this
attribute. You can change the color of the whole body also using this
12
attribute and the body tag.
Applying Style Tag to Web Page

13
Applying Style Tag to Web Page
Steps to apply style tags to web page:

Step 1: Open the web page biography.html

Step 2: Change the font color, font size, text alignment, and background
color of the footer.

<p style="font-size:20px; color:green; text-align:center;

background-color:#FFDAB9;"> <marquee> Get in touch at
[<mark>[email protected] </mark> ] </marquee> </p>

14
Output

15
Using id Attribute

16
Using id Attribute
The id attribute is a unique identifier that is used to identify the document.
It is used by CSS to do a certain job for a unique element. In CSS, the id
attribute is used with the symbol # followed by id. Tag =" " does not always
require quotes. Since this attribute is global, it can be used in any tag.

Syntax:
<tag id=" "> text </tag>

Example:
<h4 id="flower">Chives (Allium schoenoprasum)</h4>

17
 https://go.qubitscs.com/6M7w

The id attribute -
Project source file
To find the project source
file, scan the QR code or
access the link.

18
Cascading Style Sheet (CSS)

19
Cascading Style Sheet (CSS)
CSS (Cascading Style Sheet) is the language to style and present HTML
elements in the document. Basically, HTML is the document or content, and
CSS is a way of showcasing that document.

Example:

20
Cascading Style Sheet (CSS)
● The selector shows the particular HTML element that we want to
style.
● There may be one or more declarations in the declaration block,
which are separated by semicolons.
● A colon separates the name of a CSS property and its value in each
declaration.
● Separating multiple CSS declarations are semicolons, and blocks of
declarations are surrounded by curly braces.

21
Cascading Style Sheet (CSS)
There are three methods to add CSS.

➢ Inline - by applying the style attribute within HTML elements.

<h1 style = "color: red;"> A red heading </h1>

➢ Internal - by using a <style> element in the <head> section.

22
Cascading Style Sheet (CSS)
<html>
<head>
<title> Sample of CSS file </title>
<style>
p{
color: pink;
}
a{
color: brown;
}
</style>
</head>

➢ External - by using a <link> element to link to an external CSS

file.
23
Adding id Attribute to Web Page

24
Adding id Attribute to Web Page
Step 1: Inside the head element, add a style tag to style the element
header <h1> with id bio.
<head>
<title> Biography </title>
<style>
#bio {
color: #FF7F50;
}
</style>
</head>

25
Adding Attributes to Web Page
Step 2: Implement the id bio in the header h1 to make the heading
color turn to Coral.
<html>
<head>
<title> Biography </title>
</head>
<body>
<h1 align="center" id="bio"> Things About
Myself </h1>

26
<p>"Bonito" is what my mom calls me. It means "pretty". I was
born on December 4th, 2009. I live with my parents and
grandparents in the state of Texas, United States of America.
I have a younger sister and an older brother. My mother is a
software engineer and my father is a geophysicist. </p>

<p>I love to go on hikes. My mom, dad and I usually go hiking

on most weekends. Hiking helps me maintain a healthy lifestyle
and gives me a chance to see beautiful places. </p>

</body>
</html>

27
Output

28
Adding id Attribute to Web Page
When two elements in the same script have the same name, the id attribute
helps us tell them apart by giving each one a unique id.

Example:
Inside the head element, implement the id attribute to style the two
paragraphs having the same name element <p> with ids paragraph-1 and
paragraph-2 respectively.

29
 https://go.qubitscs.com/61qo
Same script have the
same name - Project
source file
To find the project source
file, scan the QR code or
access the link.

30
Adding id Attribute to Web Page
<head>
<title> Biography </title>
<style>
#paragraph-1 {
color: #FFC0CB;
}
#paragraph-2 {
color: #EE82EE;
}
</style>
</head>
31
Adding id Attribute to Web Page
Add the following within the body of the html file.

<body>
<p id="paragraph-1"> document's first
paragraph</p>
<p id="paragraph-2"> document's first
paragraph</p>
</body>

32
Output

33
Title Attribute

34
Title Attribute
It is used to give the element more information. When the mouse
hovers over an element, the information appears. It is often used to
show a tooltip.

Syntax:

35
 https://go.qubitscs.com/jM5w

The title attribute -

Project source file
To find the project source
file, scan the QR code or
access the link.

36
Title Attribute

Step 1: Implement the title tag <title> with the tooltip information
about your web page in the header tag<h1>.

<h1 align="center" id="bio" title="Nora's Learning

Journey"> Things About Myself </h1>

37
Output
Hover the mouse over the heading on the output screen of the web
page. The tooltip text for the header element <h1> can be seen.

38
Class Attribute

39
Class Attribute
The class property of an HTML element defines one or more class
names. Any HTML element can use the class attribute. CSS uses the
class name to perform specific actions on items that have the specified
class name.

Defining a class in HTML

To make an HTML class, we must first define its style using the <style>
tag in the <head> section.

40
 https://go.qubitscs.com/IM6K

The class attribute

- Project source file
To find the project source
file, scan the QR code or
access the link.

41
Class Attribute
Example:
<head>
<style>
.paragraphs{
font-family: Georgia;

color: green;
}
</style>
</head>

42
Class Attribute
We have set the style for a class name called paragraphs. We can use
this class name with any HTML element we want to style in this way. To
use it, we just need to follow the syntax below.

<tag class="paragraphs"> content </tag>

43
Adding Class Attribute

44
Adding Class Attribute

Step 1: Set the style for a class name called decor within the<head> tag.
<head>
<style>
.decor{
background-color: #E6E6FA;
font-family: Georgia;
}
</style>
</head>

45
Adding Class Attribute

Step 2: Apply the class decor to the header <h1> tag within the body
section
<body of the web
bgcolor page.
= "#FFF5EE" topmargin= "3" leftmargin = "5">

<h1 align="center" id="bio" title="Nora's Learning Journey"

class="decor"> Things About Myself </h1>

<p><b><font face = "Georgia" color="purple">"Bonito"</font></b>

is what my mom calls me. It means <strong><font
size="3">"pretty"</font></strong>. I was born on <em>December</em>
4^th, <small>2009</small>. I live with my parents and
grandparents in the state of <i> Texas </i>, <u>United States of
America</u>. I have a younger sister and an older brother. My
mother is a software engineer and my father is a geophysicist .
</p>
46
<p>I love to go on hikes. My mom, dad and I usually go hiking
on most weekends. Hiking helps me maintain a healthy
lifestyle and gives me a chance to see beautiful places. </p>

<p style="font-size:20px; color:green; text-align:center;

background-color:#FFDAB9;"> <marquee> Get in touch at
[<mark>[email protected] </mark> ] </marquee> </p>
</body>

47
Output

48
Div Tag

49
Div Tag
The division tag is also known as the div tag. HTML uses the div tag to create
content divisions in web pages such as images, headers, text, navigation bar,
footer, and so on. It is required to close the div tag, which has an opening
(<div>) and closing (</div>) tag.
<div>
Syntax:
The div tag's content
</div>

The div element is the most useful in web development because it allows us to
divide the data on a web page and create specific sections for different types
of information or functions.
50
Div Tag
Features of the div tag

● It is used to group together different HTML tags so that sections can

be made and styles can be added to them.

● A div tag is a block-level tag. An HTML element that takes up

horizontal space by default is called a block-level element. It
stretches out to its full width and takes on the height of what's
inside. Block-level elements always start on a new line and stack
vertically by default. The <div>tag is thought of as a block-level
element.

51
Adding Div Tag

52
Adding Div Tag
To demonstrate a div tag as a block-level element, add a div tag inside
the style attribute within the head section of the web page.
<head>
<style>
div
{
color: #696969;
border: #FFFAF0;
background-color: #F0FFF0;
margin: 3px;
font-size: 35px;
}
</style>
</head>
53
 https://go.qubitscs.com/Q1wi

Div tag - Project

source file
To find the project source
file, scan the QR code or
access the link.

54
Adding Div Tag
Add the div tag within the body tag to provide style for the entire block
containing two paragraphs.
<div>

<p><b><font face = "Georgia" color="purple">"Bonito"</font></b> is what

my mom calls me. It means <strong><font size="3">"pretty"</font></strong>.
I was born on <em>December</em> 4^th, <small>2009</small>. I
live with my parents and grandparents in the state of <i> Texas </i>,
<u>United States of America</u>. I have a younger sister and an older
brother. My mother is a software engineer and my father is a geophysicist
. </p>

<p>I love to go on hikes. My mom, dad and I usually go hiking on most

weekends. Hiking helps me maintain a healthy lifestyle and gives me a
chance to see beautiful places. </p>

</div>

55
Output
The output will be:

56
Adding Div Tag
We can create a three-column layout with a div tag. The div tag is a
container that comes by default vertically. But we can put different div
tags in one section on the right, left, or in the middle. This helps us
manage where the content goes.

Step 1: Open the web page about_me.html

57
 https://go.qubitscs.com/c1eO

Project source file -

Three-column layout
with a div tag
To find the project source
file, scan the QR code or
access the link.

58
Adding Div Tag
Step 2: Define the style tag with the following properties within the
head section of the web page.

<head>
<title>My portfolio</title>
<style>
* {
box-sizing: border-box;
}

59
Adding Div Tag
/* Create three equal columns that floats next to each
other */
.column {
float: left;
width: 33.33%;
padding: 10px;

}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

</style>
</head>

60
Adding Div Tag
Step 3: Add the div tag within the body element with its class name
to implement three equal columns along with a unique background
color for each column. Also add the headings for each column as
<body>
Role
<h1Models, Strengths,
align = "center"> Nora's Goals,
Learning respectively.
Journey </h1>
<hr>
<h2 align = "center"> About Me </h2>

<p align = "center"> Hello, I am Nora. I am a grade

eight student. I love programming and building websites.
In my free time, I play basketball and help out at an
animal shelter. </p>
<p align = "center"> I also like to travel. <br> I love
to see new places and learn about other cultures. </p>

61
Adding Div Tag
<div class="row">

<div class="column" style="background-

color:#F0FFFF;">
<h2>Role Models</h2>
</div>

<div class="column" style="background-

color:#F0FFF0;">
<h2>Strengths</h2>
</div>

<div class="column" style="background-

color:#FFF5EE;">
<h2>Goals</h2>
</div>

</div>
</body>

62
Output
The output will be:

63
Div With Inline CSS

64
Div with inline CSS
We can use CSS right away in div, and this method doesn't need a class.
Div is used as a container tag in HTML coding because it is the only tag
that can hold all other tags.

Step 1: Let's add a footer section, with the content containing the
contact information, to the homepage of the website.

Apply a div tag to style the footer section with the properties like font
size, color, and text alignment.
<div style="font-size:20px; color:green; text-align:center;">
<p> Get in touch at [[email protected]]</p>
</div>

65
 https://go.qubitscs.com/T1r2

Div with inline CSS

-Project source file
To find the project source
file, scan the QR code or
access the link.

66
Output

67
Span Element

68
Span Element
The HTML span element is a general-purpose inline container for inline
elements and content. It is used to group elements for styling purposes.
It has both opening (<) and closing (>) tags. The span tag is used to
group inline elements, but it doesn't change the way things look by
itself.
Syntax:
<span class="">text</span>

Step 1: Add a span tag with style in the footer section of the web
<p> Get in touch at <span style="color:#1E90FF;font-
page.
weight:bolder">[[email protected]]</span></p>

69
 https://go.qubitscs.com/E1tD

Project source file -

HTML span element
To find the project source
file, scan the QR code or
access the link.

70
Output
The output will be

71
Difference between div and span
tag

72
Difference between div and span tag
Div tag Span tag

Div tags are also known as block Span tags are known to be inline
elements. After its closing tag, elements. After its closing tag,
<div> adds a line break. <span> does not add a line break.
A div element fills all of its <span> takes up the width of its
containers' width. In CSS, a div inner content only. A span
element's width and height can element's width and height
be modified. cannot be altered in CSS.
Content sections are separated The <span> tag is used to target
using <div> elements. a specific section of text within a
bigger body of material.

73
HTML Comments

74
HTML Comments
The comment tag (<!- Comment ->) is used to insert comments in the
HTML code to help the coder and the reader understand the code.

Single-line comment
<html>
<body>
<!-- This is a heading tag - ->
<h2> Welcome to my page </h1>

<!-- This is a single line comment - - >

<h2> This is a single-line comment </h2>
</body>
</html>
75
HTML Comments
Multi-lines comment

<html>
<body>
<!-- This is
a heading tag - ->
<h2> Welcome to my page </h1>

<!-- This is
multi lines
comment - - >
<h2> This is a multi-lines comment </h2>
</body>
</html>

76
Master Challenges

77
Challenge-1
Create an HTML web page for the menu card at Uncle Peter's
restaurant.
● Add a CSS rule to style the text Today’s Specials so that it is italic
and the font color is gray.
● Add a CSS rule to style the text garlic potato so that it has the
background color gray.
● Add a CSS rule to style the text Caesar salad so that it has the font
color red.
● Add a CSS rule to style the text mushrooms so that it has the font
color green.

78
Solution - Challenge 1

A sample solution is given below:

<html>
<head>
<title>Restaurant's menu</title>
</head>
<body>
<h1 align="center"> Uncle Peter's Restaurant</h1>
<p style=" color:rgb(52, 53, 52); text-align:
center; font-style: italic;">Today's Specials </p>
<p>Broiled <span style="background-color:#9b9999;">garlic potato</span>
bites</p>
<p style=" color:rgb(244, 9, 16);"> Caesar salad</p>
<p>Italian stuffed <span style=" color:rgb(11, 192,
14);">mushrooms</span></p>
</body>
</html>

79
Reference screenshot
The output will look like

80
 https://go.qubitscs.com/XBdD

Challenge 1 -
Project Source File
To find the project source file
for challenge 1, scan the QR
code or access the link.

81
Challenge-2
Create a web page using the <span> tag with the desired color to
describe the steps of making your favorite dish at home.

82
Solution - Challenge 2
A sample solution is given below:
● Create a new HTML file in the Visual Studio Code editor.
● Start writing the HTML codes within <html>, <head> and
<body> tags in the document.
● Use <span> tag to define the color to be used inside the
content.
● Describe the steps of making your favorite dish in your home
kitchen within a paragraph.
● Save the HTML document with a suitable file name.
● View the HTML web page in the preferred web browser.
83
<html>
<head>
<style>
span.utensils{
color:ORANGE
}
</style>
</head>
<body>
<p> Take a <span class="utensils">cup</span> of water in a <span
class="utensils"> saucepan</span>.
Add the noodles to the <span class="utensils"> pan </span>when the water
comes to a boil.
Cover the <span class="utensils"> saucepan</span> with a <span
class="utensils"> lid</span>
for a minute. Uncover the <span class="utensils"> saucepan</span>
and add Noodles tastemaker to the <span class="utensils"> pan</span>. Stir
it well.
</p>
</body>
</html>

84
The output will look like

85
 https://go.qubitscs.com/CBfN

Challenge 2 -
Project source file
To find the project source file
for challenge 2, scan the QR
code or access the link.

86
Challenge 3
Create a web page that gives details about three countries using the
tag, <span> tag, and class attribute, along with an appropriate
<div>
background color.

87
Challenge 3 - Solution
A sample solution is given below:
● Create a new HTML file in the Visual Studio Code editor.
● Start writing the HTML codes within <html>, <head> and <body> tags in the
document.
● Provide <title> tag for mentioning the title of the HTML document.
● Use the <style> attribute to apply and manage the design of HTML elements to
the web
● page. Add the necessary background color, color, border, margin, and padding.
● Apply <div>, <class> tags to provide details about three countries on the
page.
● Save the HTML document with a suitable file name.
● View the HTML web page in the preferred web browser.

88
<html>
<head>
<style>
.Country{
background-color:yellow;
color:red;
border:2px solid brown;
margin:30 px;
padding: 30 px;
}
</style>
</head>
<body>
<div class="Country">
<h2>China</h2>
<p>Capital- Beijing</p>
</div></html>

89
<div class="Country">
<h2>Bahrain</h2>
<p>Capital- Manama</p>
</div>
<div class="Country">
<h2>France</h2>

<p>Capital- Paris</p>
</div>
</body>
</html>

90
The output will look like

91
 https://go.qubitscs.com/2BgP

Challenge 3 -
Project Source File
To find the project source file
for challenge 3, scan the QR
code or access the link.

92