Internet Publishing CSC 2 LFH
HTML text formatting
Learning Objectives
To know how to format text using HTML tags
To be aware of how to properly combine (or nest) tags
Conveying a message is only half of the art of creating HTML documents. One should also consider the
aesthetics of the document so that if the document will be launched in the internet for public access,
readers will be more enticed to view the document. Designing the look and feel of the page starts with
the mastery of the Text Formatting Tags. The following are the most common used for formatting text in
HTML documents.
FONT – (Deprecated) formants the text to an assigned fort and color.
Attributes:
Face – defines the font to be used
Color – defines the color
Size – defines the size (range 1-7)
Example: This contains <font face = “Times New Roman” color = “blue”> set font </font>
Output:
BOLD – formats the text to bold
Example: This contains <b> bold </b> Text
Output:
Internet Publishing CSC 2 LFH
ITALIC – formats the text to italics
Example: This contains <i> Italics</i> Text
Output:
UNDERLINE- (Deprecated) formats the next with underline
Example: This contains <u> underlined </u> text
Output:
STRIKETHROUGH- (Deprecated) formats the next with strikethrough
Example: This contains <strike> strikethrough </strike> text
Output:
SUPERSCRIPT- formats the text with superscript
Example: This contains <sup> superscripted </sub> text
Output:
Internet Publishing CSC 2 LFH
SUBSCRIPT- formats the text with subscript
Example: This contains <sub> subscripted </sub> text
Output:
EMPHASIZE- emphasizes text
Example: This contains <em> emphasized </em> text
Output:
BIG- defines big text – an increase in font size
Example: This contains <big> big </big> text
Output:
SMALL- defines small text- a decrease in font size
Example: This contains <small> small </small> text
Output:
Internet Publishing CSC 2 LFH
STRONG- defines strong text: bold-like attributed
Example: This contains < strong > strong </strong> text
Output:
BDO- defines the direction of text display: left ->right or right > text
Example: This contains <bdo dir=”rtl”> 12345 </bdo> text
Output:
*Deprecated – not recommended for use. Tag is being phased-out. An alternative way of defining the
said attribute is recommended (Cascading Style Sheets).
NESTING TAGS
To combine the effects of one type of tag with another, simply enclose the container tag in
another container tag.
REMEMBER:
The tags should be consistent in its structure. Make sure that all levels of the nest are properly arranged.
Though it will not necessarily result to an error in display, it is best to keep the HTML tags neat so when
something goes wrong, the problem can be easily traced.
ACTIVITY:
1. Open myLiterature1.html, myLiterature2.html, and myLiterature3.html
2. Apply Additional formatting on the next of the file
3. Highlight the title and the first letter of the paragraphs
4. Change Fonts if necessary