Scribd
Upload
42 views

B2. Formatting Text Using Tags

This document discusses formatting text using HTML tags. It explains headings, formatting tags, monospaced fonts, block quotes, and lists. Heading tags specify different levels of headings. Formatting tags control text appearance by making it bold, italic, underlined etc. Monospaced fonts and <pre> tags are used for preformatted text. Block quotes are created using <blockquote> tags. Ordered and unordered lists are created using <ol>, <li> and <ul>, <li> tags respectively. The document provides code snippets to demonstrate various tags.

Uploaded by

Huỳnh Tôn Minh Quân
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

B2. Formatting Text Using Tags

This document discusses formatting text using HTML tags. It explains headings, formatting tags, monospaced fonts, block quotes, and lists. Heading tags specify different levels of headings. Formatting tags control text appearance by making it bold, italic, underlined etc. Monospaced fonts and <pre> tags are used for preformatted text. Block quotes are created using <blockquote> tags. Ordered and unordered lists are created using <ol>, <li> and <ul>, <li> tags respectively. The document provides code snippets to demonstrate various tags.

Uploaded by

Huỳnh Tôn Minh Quân
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

Session: 3

Formatting Text using Tags


! Explain"the"Heading"tag"
! Explain"the"different"tags"related"to"forma)ng"
! Explain"monospaced"font,"preforma@ed"text,"and"block"quotaDon"
! Describe"the"different"types"of"lists"
! Explain"the"procedure"to"change"the"background"color"and"image"
"

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3" 2"


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.

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 3"


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.

! H1"is"the"top"level"heading"and"is"displayed"with"largest"font"size"
! H6"is"the"lowestMlevel"heading"and"is"displayed"with"smallest"font"size"

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 4"


! The" Code" Snippet" demonstrates" how" to" specify" the" six" levels" of" heading" in" an"
HTML"page."

<!DOCTYPE html>
<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
</body>
</html>

"

"

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3" 5"


Creates a document
outline

<hgroup> element is HGROUP Used for multiple level sub


the new element headings that can be
defined in HTML5 subheadings, alternative
titles, taglines and so on

Groups a set of H1 to
H6 elements

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 6"


Formatting is applied
using formatting
elements which are
container elements

Content format
determines the Formatting Formatted content makes
an HTML page more
appearance of the
readable and presentable
content in the browser

Text may appear in bold or


underlined

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3" 7"


! Commonly"used"forma)ng"elements"are"as"follows:"

B element displays text in bold and is enclosed between <b> and </b> tags.

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.

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 8"


! The"Code"Snippet"demonstrates"the"use"of"basic"forma)ng"elements."

<!DOCTYPE html>
<html>
<head>
<title>Formats</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>
</body>
</html>

"

"

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3" 9"


! Some"more"forma)ng"elements"are"as"follows:"

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.

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 10"


! The"Code"Snippet"demonstrates"the"use"of"other"forma)ng"elements."

<!DOCTYPE html>
<html>
<head>
<title>Updating and Shifting Text</title>
</head>
<body>
<h3>Updating, Emphasizing, and Shifting Text</h3>
This is an example of <del>deleted</del> <ins>inserted
</ins> text.<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>

"

"

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3" 11"


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.

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 12"


! Following"table"lists"some"of"the"predefined"tags"and"their"descripDon."

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

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3" 13"


! To"define"a"long"quotaDon"or"block"quotaDon,"<blockquote> tags"are"used."
! <blockquote> tag"indents"the"quotaDon"in"browsers."
! The"Code"Snippet"demonstrates"the"use"of"<blockquote> tags."

<blockquote>
“When one door closes, another opens; but we often look so long and
so regretfully upon the closed door that we do not see the one
which has opened for us.” -Alexander Graham Bell
</blockquote>"
"

"

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3" 14"


Can contain
paragraphs, images,
links, and other lists

Is a collection of
items

Displays a list of
related items

Can be organized in
sequential or
nonsequential manner

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 15"


! List"is"displayed"using"a"numbered"or"alphabeDc"bullet"
! Two"elements"used"for"creaDng"an"ordered"list"are"as"follows:"
! OL"–"Creates"an"ordered"list"
! LI"–"Specifies"an"item"and"it"is"a"subMelement"of"the"OL"element"
The"Code"Snippet"demonstrates"the"use"of"OL"and"LI"tag."
!<!DOCTYPE html>
<html>
<head>
<title>Days in a Week</title>
</head>
<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>
</html>
©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 16"
! Following" table" lists" some" of" the" different" numbering" styles" and" their"
descripDon."

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…

! list-style-type" property" is" used" to" specify" a" numbering" style" for" the"
ordered"list."
! It"is"the"property"of"the"style"a@ribute,"which"is"specified"with"the"<ol> tags."

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 17"


! Items"are"arranged"in"random"order"
! Two"elements"used"for"creaDng"an"unordered"list"are"as"follows:"
! UL"–"Creates"an"unordered"list"
! LI"–"Specifies"an"item"and"it"is"a"subMelement"of"the"OL"element"
! The"Code"Snippet"demonstrates"the"use"of"UL"and"LI"tag."

<!DOCTYPE html>
<html>
<head>
<title>Features of EasyPad</title>
</head>
<body>
<h2>Features of EasyPad</h2>
<ul>
<li>Opens many files at a time</li>
<li>Unlimited undo and redo</li>
<li>Reads and writes both
Windows and Unix files</li>
</ul>
</body>
</html>

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 18"


! 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"Code"Snippet"demonstrates"how"to"apply"the"square"bullet"to"an"unordered"
list."
<!DOCTYPE html>
<html>
<head>
<title>Wild Animals</title>
</head>
<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>

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 19"


! The"list-style-type"property"of"the"style"a@ribute"is"set"to"square."
! Hence,"the"unordered"list"of"wild"animals"will"be"displayed"using"the"square"bullet"
as"shown"in"the"figure."

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 20"


! Refers"to"a"collecDon"of"terms"with"their"corresponding"descripDons"
! Contains"the"terms"along"with"their"descripDons"
! Appears"with"the"term"indented"on"the"le_"followed"by"descripDon"on"the"right"
or"on"next"line"
! Elements"required"to"create"a"definiDon"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.

DT – Specifies the definition or description of the term.

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 21"


! Steps"to"create"a"definiDon"list"are"as"follows:"

1. Specify the DL element to indicate that you want to create a definition list.

2. Use the DT element to specify the term such as Common Noun.

3. Use the DD element to specify the description of the term.

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 22"


! The"Code"Snippet"demonstrates"the"way"to"create"a"definiDon"list."

<!DOCTYPE html>
<html>
<head>
<title>Types of Nouns</title>
</head>
<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>
</html>

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 23"


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 bgcolor=”color_name|hex_number|rgb_number”>
"
where,"
color_name"M"Specifies"the"background"color"with"a"color"name"(such"as"“red”)"
hex_number"M"Specifies"the"background"color"with"a"hex"code"(such"as"“#ff0000”)"
rgb_number"M"Specifies"the"background"color"with"an"rgb"code"(such"as""""""""""""
"""""""""""""""""""""""""""""""“rgb(255,0,0)”)"
©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 24"
Another way to specify a background color for a Web page is by using the
style=“background-color: color” attribute.

This attribute must be added to the style attribute of the <body> tag.

The foreground color can be specified by using the style=“color: color” attribute.

!" Example"demonstraDng"the"specificaDon"of"background"and"foreground"color"is:"

<body style=”background-color: navy; color: yellow”>

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3" 25"


Choose an image that
blends well and looks like a
single image even after
tiling

Inserts an image as
Background
the background on
Image Choose images with
lighter shades
a Web page

Background images are not


recommended as the color
may hide the text

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3" 26"


!" The"heading"elements"define"headings"for"contents"such"as"text"and"images."

! The"<hgroup>"element"is"used"to"group"Dtles"and"their"subDtles."
"
! Monospaced" fonts" are" used" for" programming" code" scripts," instrucDon" texts,"
and"ASCII"characters."
"
! The"<pre>"tag"is"used"to"apply"preforma@ed"text"content"to"a"Web"page."
"
! To" define" a" long" quotaDon" or" block" quotaDon," the" <blockquote>" tag" can" be"
used."
"
! A" list" is" a" collecDon" of" items," which" might" be" organized" in" a" sequenDal" or"
nonsequenDal" manner." HTML" supports" three" types" of" lists" namely," ordered,"
unordered,"and"definiDon."

! HTML" provides" background" properDes" that" specify" the" background" color" and"
image"for"the"Web"pages.""

©"Aptech'Ltd.'' Forma)ng"Text"using"Tags"/"Session"3"" 27"

You might also like