Scribd
Upload
41 views

4 - HTML Text Formatting and Styles

This document outlines a lecture on HTML text formatting and styles, describing various HTML tags for formatting text like bold, italics, and subscript. It discusses core HTML attributes like ID, title, class, and style that can be used on most elements and provides examples of using the style attribute to specify CSS rules for properties like colors, fonts, sizes, and alignment. The learning objectives are to understand HTML text formatting and attributes.

Uploaded by

Aman Sikarwar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

4 - HTML Text Formatting and Styles

This document outlines a lecture on HTML text formatting and styles, describing various HTML tags for formatting text like bold, italics, and subscript. It discusses core HTML attributes like ID, title, class, and style that can be used on most elements and provides examples of using the style attribute to specify CSS rules for properties like colors, fonts, sizes, and alignment. The learning objectives are to understand HTML text formatting and attributes.

Uploaded by

Aman Sikarwar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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.

You might also like