F.

4 CIT – HTML – Text: Font page 1

Introduction
In HTML 3.2 or before, the typeface, font size and font colour of a portion of text can be defined by
<font> tag, and the font style can be specified by other tags such as <i> and <b> tags. But in HTML
4.01, the <font> tag is totally deprecated and is replaced by CSS. However, <font> tag is still widely
used in many web-authoring softwares such as Macromedia Dreamweaver.

Font style
Text styles can be specified by different tags.
Styles that can be specified are
italic, bold, underlined, strikethrough, superscript, subscript and monospaced.
Usage:
<i>Text</i>
<b>Text</b>
<ins>Text</ins>
<del>Text</del>
^Text
_Text
<tt>Text</tt>
Attributes:
None.
Example:
<i> Style 1 : __________________</i>
<b> Style 2 : __________________</b>
<ins> Style 3 : __________________</ins>
<del> Style 4 : __________________</del>
^{Style 5 : __________________}
_{Style 6 : __________________}
<tt> Style 7 : __________________</tt>

Emphasis and other tags

There are some emphasis tags used to emphasize portions of the enclosed text. These tags are used in
previous HTML versions, but these tags are deprecated in HTML 4.01 and replaced by styles.
These tags include:
<cite></cite>, <code></code>, <dfn></dfn>, <em></em>, <kbd></kbd>,
<samp></samp>, <strong></strong> and <var></var>
Try to see what the effects of these tags are and try to think why they are deprecated.
F.4 CIT – HTML – Text: Font page 2

<FONT> Tag
<FONT> tag is used to control the typeface, colour and the size of the enclosed text. However, <FONT>
tag makes no effect on the text if the font attributes are specified.
Usage:
<FONT attr1=”value” attr2=”value” ...>Text</FONT>
Attributes:
color: Text colour
face: Typeface
size: Font size
Note: 1. Font size is a number in 1 – 7 (absolute) or in -7 – +7 (relative). 2.
The actual font size depends on the user agents.
Example:
<font size=”2” color=”navy”>Test 1</font>
<font size=”+2” face=”Courier” color=”red”>Test 2</font>
<font size=”-2” face=”Arial” color=”green”>Test 3</font>
<font size=”-1” color=”black”>Test 4</font>
Try to test different font sizes.

Special Characters
Although its roots are firmly grounded in plain text, HTML needs to be able to display a wide range of
characters – many of that cannot be typed on a regular keyboard. Hence, the HTML specification
defines many entities which are some specific codes to insert special characters.
Web Reference:
http://webmonkey.wired.com/webmonkey/reference/special_characters/
Example:

Code Display
4&gt;3
3&lt;4
3&nbsp;4
4&#62;3
3&#60;4
3&#160;4

Exercise:
Try to build a page with the following code segments:
1. CIT is a new subject in HKCEE. It replaces the syllabus of Computer Studies.
Candidates are asked to study a core module with another selective module.
2. CIT is a new subject in HKCEE. It replaces the syllabus of Computer
&nbsp;Studies. Candidates are&nbsp;asked&nbsp;to&nbsp;study a core module
F.4 CIT – HTML – Text: Font page 3

with another selective module.

Find the difference between the above two codes by resizing the windows of the web browser.

Soft Hyphens
By using a soft-hyphen (code: &shy;), the web browser can hyphenate long words to better justify the
paragraph.
e.g. The fear of 13 is called Triskaidendekaphobia.
Tri&shy;skai&shy;den&shy;deka&shy;phobia plays an important role in current culture and
history.

Try to resize the windows produced by the above code. What is different if we use a soft hyphen?