Program: B.
tech, Semester-2, First Year
CSL0202: Web Architecture and Design
Unit No. 2
HTML Text Formatting and Styles
Lecture No. 4
Neha Garg
Assistant Professor, CSA/SOET
Outlines
• Prerequisite of topic
• Problem Objective
• HTML Text Formatting
• HTML Attributes
• Assignment
• Learning Outcomes
• Course Outcome (CO)
• Program Outcome (PO)
• References
Prerequisite of topic
• Students should have knowledge about the basics of HTML.
Problem Objective
• The objective of this lecture is to give knowledge about the HTML
Text formatting and Text styling.
HTML Text Formatting
• Tags for the text styles add the distinction to certain characters of the
text. HTML also defines special elements for defining text with a special
meaning.
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
Reference No.: R1, R2
Core Attributes
• The four core attributes that can be used on the majority of HTML
elements (although not all) are −
Id
Title
Class
Style
Reference No.: R1, R2, R3
The Id Attribute
• The id attribute of an HTML tag can be used to uniquely identify any
element within an HTML page.
• Example:
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>
Reference No.: R1, R2, R3
The title Attribute
• The title attribute gives a suggested title for the element. They syntax for
the title attribute is similar as explained for id attribute.
• Example:
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
Reference No.: R1, R2, R3
The style Attribute
• The style attribute allows you to specify Cascading Style Sheet (CSS)
rules within the element.
• The HTML style attribute has the following syntax:
<tagname style="property:value;">
• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
Reference No.: R1, R2, R3
The style Attribute
• Background Color:
<body style="background-color:powderblue;">
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
• Text Color:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Reference No.: R1, R2, R3
The style Attribute
• Fonts:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
• Text Size:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
• Text Alignment:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Reference No.: R1, R2, R3
Assignment
Q-1 Which of the following element is responsible for making the text bold
in HTML?
a) <pre>
b) <a>
c) <b>
d) <br>
Q-2 Which of the following property sets the size of the font?
a) font-size
b) font-variant
c) font-style
d) font-weight
Learning Outcomes
Students learn the following outcomes:
• Understand the HTML Text Formatting.
• Understand the HTML Attributes.
Course Outcomes (CO)
CO.1 Understanding: The basics of web architecture, Types of
architecture, knowledge about web protocols and web development tools.
CO.2: Applying: HTML, CSS, Javascript and XML web designing
language to create Web pages.
Program Outcome (PO)
PO1. Engineering knowledge: Apply the knowledge of mathematics,
science, engineering fundamentals, and an engineering specialization to the
solution of complex engineering problems.
PO2. Problem analysis: Identify, formulate, review research literature, and
analyze complex engineering problems reaching substantiated conclusions
using first principles of mathematics, natural sciences, and engineering
sciences.
PO12. Life-long learning: Recognize the need for, and have the
preparation and ability to engage in independent and life-long learning in
the broadest context of technological change.
References
1. John Duckett; Beginning HTML, XHTML, CSS, and JavaScript; Wrox
(Wiley).
2. N.P. Gopalan, J. Akilandeswari; Web Technology: A Developer’s
Perspective; Prentice Hall of India.
3. Ivan Bayross; Web Enabled Commercial Applications Development
using HTML, DHTML, JavaScript, Perl CGI; BPB Publication.
