Formatting of a Text in Html (Session 3)

FORMATTING TEXT USING HTML
TAGS
SESSION 3
Aptech Computer Education
Presented by Muhammad Ehtisham Siddiqui (BSCS)
1

Objectives
 Explain the heading tag
 Explain the different tags related to formatting
 Explain the monospaced font, preformatted
text and block quotation
 Describe the different types of lists
 Explain the procedure to change the
background color and image
2

Introduction
3
 Text content of Web page forms an important part of a Web
site.
 Text must be attractive, easy to read, and should be short and
crisp.
 Text formatting options such as bold, italics, superscript,
subscript, and so on must be applied to attract the user
attention.
 Background color and image of the Web page can be
specified using HTML.

Heading <h1 ></h1>
4
 Heading elements define headings for contents such as
text and images
 Specifies the hierarchical structure of a Web page by
grouping the contents.
 HTML defines six levels of headings ranging from H1 to
H6

Heading <h1 ></h1>
5
 <!DOCTYPE html>
 <html>
 <head>
 <title>Headings</title>
 </head>
 <body>
 <h1>H1 Heading</h1>
 </body>
 </html>

Formatting of Text
6
 Content format determines the appearance of the
content in the browser
 Text may appear in bold or underlined
 Formatted content makes an HTML page more
readable and presentable
 Formatting is applied using formatting elements
which are container elements

Formatting Elements
7
Commonly used formatting elements are as follows:
 B element displays text in bold and is enclosed between <b> and </b>
 I element displays text in italics and is enclosed between <i> and </i> tags
 SMALL element makes the text appear smaller in browser and is enclosed
between <small> and </small> tags
 U element underlines a text and is enclosed between <u> and </u> tags
 DEL element encloses deleted text and is placed between <del> and </del>
tags
 INS element encloses inserted text and is placed between <ins> and </ins>
tags
 STRONG element emphasizes the text and is placed between <strong> and
</strong> tags
 SUB element displays a text as subscript and is enclosed between <sub> and
</sub> tags
 SUP element displays a text as superscript and is enclosed between <sup>
and </sup> tags

Formatting Elements
8
<!DOCTYPE html>
<head><title>we are learning H group</title></head>
<body>
<h2>Using HTML Formatting Elements</h2><br>
<b>This text is displayed in bold.</b><br>
<i>This text is displayed in italic.</i><br>
<u>This text is underlined.</u><br>
<small>This text is displayed smaller.</small> <br /><br />
<h2>Updating, Emphasizing, and Shifting Text</h2>
This is an example of <del>deleted</del> Text<br />
<ins> This is example of inserted Text</ins> <br />
The is an example of <strong>Strong</strong> text.<br />
The is an example of <sub>subscript</sub>text.<br />
The is an example of <sup>superscript</sup> text.<br />
</body>
</html>

Monospaced and Preformatted Text
9
 Monospaced font allows the same amount of horizontal space
between fonts irrespective of font size, shape, and type.
 Monospaced fonts are used for programming code snippets,
instruction texts, and ASCII characters.
 <pre> tag is used for preformatted text content.
 <pre> tag applies a fixed-font width to the text content.
 <pre> tag allows you to copy-paste the content along with the
formatting from the source.

Monospaced and Preformatted Text
10
 Following table lists some of the predefined tags and their
description:TAG DESCRIPTION
<em>
Used for emphasized text
<dfn>
Used for definition term
<code>
Used for computer code
<samp>
Used for sample output from a
computer program
<cite> Used for citation

Lists
11
 Is a collection of items
 Can be organized in sequential or nonsequential
manner
 Can contain paragraphs, images, links, and other
lists
 Displays a list of related items

Ordered Lists
12
 List is displayed using a numbered or alphabetic bullets
 Two element used for creating an ordered list
 OL (it create ordered list)
 LI (specifies an item and it is a sub-element of the OL element)
 The code snippet demonstrate the use of OL and LI tag<body>
<h2>Days in a Week:</h2>
<ol>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ol>
</body>

Ordered Lists
13
 Some lists of different numbering styles and their description
 List-style-type property is used to specify a numbering style of
the ordered list.
 It is the property of the style attribute which is specified with the
<ol> tags.Property’s Value Example
decimal 1, 2, 3…
lower-alpha a, b, c…
upper-alpha A, B, C…
lower-roman i, ii, iii…
upper-roman I, II, III…

Unordered Lists
14
 Items are arranged in random order
 Two element used for creating an unordered list
 UL (it create unordered list)
 LI (specifies an item and it is a sub-element of the UL element)
 The code snippet demonstrate the use of OL and LI tag<body>
<h2>Days in a Week:</h2>
<ul>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ul>
</body>

Unordered Lists
15
 The list-style-type property specifies the type of bullet to be applied to an unordered
list.
 There are three types of bullets defined for the unordered lists:
 Disc
 Square
 circle
 The default value is disc, which is applied to the unordered list, even if the
list-style-type property is not specified.
 The list-style-type property of the style attribute is set to square.
The Code Snippet demonstrates how to apply the square bullet to an unordered list.
<body>
<h2>Wild Animals</h2>
<ul style=”list-style-type:square”>
<li>Lion</li>
<li>Tiger</li>
<li>Leopard</li>
<li>Wolf</li>
</ul>
</body>
</html>

Definition Lists
16
 Refers to a collection of terms with their corresponding
descriptions
 Contains the terms along with their descriptions
 Appears with the term indented on the left followed by
description on the right or on next line
 Elements required to create a definition list are as
follows:
 DL – Is a container element that consists of DT and DD sub
elements. Specifies that the definition list will be created using
these elements.
 DT – Specifies the term to be defined or described.
 DD – Specifies the definition or description of the term.

Definition Lists
17
 Steps to create a definition lists are as follows:
Specify the DL element to indicate that you want to create a
definition list.
Use the DT element to specify the term such as Common Noun.
Use the DD element to specify the description of the term.
<body>
<h2>Types of Nouns</h2>
<dl>
<dt><b>Common Noun:</b></dt>
<dd>It is a name of an object in general, such as
pencil, pen, paper, and so on.</dd>
<dt><b>Proper Noun:</b></dt>
<dd>It is the unique name of a person or a place.
</dd>
</dl>
</body>

Background and Foreground Colors
18
 Background properties specify the background color and
image for the Web pages
 Background property is a shorthand property that
specifies all the background properties in just one
declaration.
 bgcolor attribute specifies the background color of a
document.
 Syntax for bgcolor is
 <body style=”background-color: navy; color: yellow”>

Background Image File
19
 Inserts an image as the background on a Web page
 Background images are not recommended as the
color may hide the text
 Choose images with lighter shades
 Choose an image that blends well and looks like a
single image even after tiling

Background Image File
20
 Inserts an image as the background on a Web page
 Background images are not recommended as the
color may hide the text
 Choose images with lighter shades
 Choose an image that blends well and looks like a
single image even after tiling
 Syntax: <body style=“background-image:Url(image1.png)”>

Questions?
21

Formatting of a Text in Html (Session 3)

More Related Content

What's hot

Similar to Formatting of a Text in Html (Session 3)

More from Muhammad Ehtisham Siddiqui

Recently uploaded

Formatting of a Text in Html (Session 3)

Editor's Notes