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 attribute and the body tag.

12
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>nora.official@gmail.com </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
 Same script have https://go.qubitscs.com/61qo

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 of the web page.

<body bgcolor = "#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>nora.official@gmail.com </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.
Syntax:
<div>
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
Project source file -
https://go.qubitscs.com/c1eO
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 Role Models, Strengths, Goals, respectively.
<body>
<h1 align = "center"> Nora's Learning 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 [nora.official@gmail.com]</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 page.
<p> Get in touch at <span style="color:#1E90FF;font-
weight:bolder">[nora.official@gmail.com]</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 elements. Span tags are known to be inline elements.
After its closing tag, <div> adds a line After its closing tag, <span> does not add a
break. line break.
A div element fills all of its containers' width. <span> takes up the width of its inner
In CSS, a div element's width and height can content only. A span element's width and
be modified. height cannot be altered in CSS.
Content sections are separated using <div> The <span> tag is used to target a specific
elements. 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 <div> tag, <span> tag, and
class attribute, along with an appropriate 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