Scribd
Upload
23 views20 pages

Formatting Text

The document discusses various HTML formatting elements for text. It describes different types of fonts like serif, sans serif, proportional, and monospaced fonts. It also covers inline and block-level formatting elements for bold, italics, small text, superscript, subscript, underline, and more. Additionally, it discusses phrasing elements for code, citations, strong and emphasized text. The document provides examples and descriptions of tags for deleted, inserted, keyboard, variable, and computer output text.

Uploaded by

Jake Aldred Cabela
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views20 pages

Formatting Text

The document discusses various HTML formatting elements for text. It describes different types of fonts like serif, sans serif, proportional, and monospaced fonts. It also covers inline and block-level formatting elements for bold, italics, small text, superscript, subscript, underline, and more. Additionally, it discusses phrasing elements for code, citations, strong and emphasized text. The document provides examples and descriptions of tags for deleted, inserted, keyboard, variable, and computer output text.

Uploaded by

Jake Aldred Cabela
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

FORMATTING

TEXT
Text
› It is the most important aspect of any website.
› It also provides the most valuable information found on the
web and is the most important feature when it comes to
“searchability” – it is a term that refers to how easy it is to
find your web page in search engines.
Two (2) types of Fonts
1. Serif font – it starts and ends with a stroke.
› Examples: Times New Roman, Georgia, and Cambria

2. Sans Serif – it does not have strokes.


› Examples: Arial, and Verdana
Two (2) types of Fonts
-in terms of the space that fonts occupy within a web page.

1. Proportional font – it occupies only as much


space as needed within a given space.
2. Monospaced font – it occupies the same amount
of space regardless of its actual width.
› Examples: Courier and Courier New

≈ Times New Roman and Arial – are the most


popular default fonts.
Formatting Elements
-these are presentational and or visual.
The commonly used formatting inline elements are:
1. Bold
2. Italics
3. Small
4. Subscript
5. Superscript
Formatting Elements
-these are presentational and or visual.
The commonly used formatting inline elements are:
1. Bold
2. Italics
3. Small
4. Subscript
5. Superscript
Tag Description
1. <b> </b> (Bold) This tag should only be used
when there is no other tags
available.
2. <i> </i> (Italics) It defines a part of text in an
Italicized form.
3. <small> </small> (Small) It defines smaller text.
4. <sup> </sup> (Superscript) The text is placed below the
baseline.
This can be used to express a
chemical symbol such as H20.
5. <u> </u> (Underline) It underlines a word or group of
words.
This tag is not advisable as it can
Phrasing Elements
- these are used for specific purpose.
- it is about semantics, which refers to the
meaning or substance of a phrase or word.
The commonly used formatting inline elements are:
1. Code
2. Cite
3. Strong
4. Emphasis
Emphasized Text
› <em> and <strong>
- These are two phrasing elements that are used to emphasize the
meaning or importance of a word or group of words.

Tag Description
1. <em> </em> It is used to emphasize text,
appearance is usually italicized.
2. <strong> </strong> It is used to give stronger
emphasis and greater
importance to text.
Emphasized Text
› <em> and <strong>
- These are two phrasing elements that are used to emphasize the
meaning or importance of a word or group of words.

Tag Description
1. <em> </em> It is used to emphasize text,
appearance is usually italicized.
2. <strong> </strong> It is used to give stronger
emphasis and greater
importance to text.
<em> vs. <i>
1. <i> - it is used to italicize technical terms, scientific
names, foreign words, and other similar terms.

2. <em> - it is used to emphasize a message.


<strong> vs. <b>
1. <b> - it is intended to make characters in a paragraph
or sentence stand out even if these are not important.

2. <strong> - it is used to give greater importance to a


phrase or group of words in a paragraph or sentence.
Editing Marks
Tag Description
1. <del> </del> It indicates deleted text during
corrections.
The deleted text appears with a
strike-through.
2. <ins> </ins> It indicates text inserted
during corrections or changes.
The text inserted appears with
an underline.
Computer Output Tags
› The output of these tags are uses a fixed-width font such as
courier, which is also known as mono-spaced or mono-typed font.
› The use of these elements make it easier to differentiate parts of
the content from ordinary readable text.

Tag Description
1. <code> </code> This code is strictly used in the
definition od computer code
text like HTML.
2. <samp> </samp> It is similar to <code>, but it
refers mainly to the output of
the computer code.
Tag Description
3. <kbd> </kbd> It is use to distinguish keyboard
text from non-keyboard text.
It refers to text typed in by a
user.
4. <var> /<var> It is used to indicate that a
particular text in the code is a
variable.
It typically used when writing
JavaScript codes.
Citations, Quotations, &
Definition Tags
› Citations – are used to give credit to a reference source
used on a web page.
› Quotations – it represents information that does not
belong to the web page author.
› Definition Tags – are used for terms and definitions.
Tag Description
1. <abbr> </abbr> It indicates acronym or
abbreviation.
For example:
<abbr title=“Hyper Text Mark
Up Language”> HTML </abbr>
2. <bdo> </bdo> • It is used to override the
default direction of text that
is left to right; often use for
languages such as Hebrew and
Arabic.
• It uses the attributes <bdo
dir=“rtl”> to go to right to
left.
Tag Description
3. <q> </q> • It is used only for short
quotes.
• It uses the attribute <q
cite=“url”>.
4. <cite> </cite> • It is used to define the title
of a book or painting or any
form of work used in a web
page.
• Do not be confused with the
tags <blockquote> and <q>
5. <dfn> </dfn> • It is used to enclose a term
so as to stand out from the
definition it follows.
Preformatted Text
› The use of <pre> refers to preformatted text in a web
page.
› The output will appear as mono-spaced and all spaces
are counted as is.

You might also like