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 tag, and the font style can be specified by other tags such as and tags. But in HTML 4.01, the tag is totally deprecated and is replaced by CSS. However, 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: Text Text Text <del>Text <sup>Text <sub>Text Text
Attributes: None. Example: Style 1 : __________________ Style 2 : __________________ Style 3 : __________________ <del> Style 4 : __________________ <sup> Style 5 : __________________ <sub> Style 6 : __________________ Style 7 : __________________
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: ,
, , <em>, , <samp>, <strong> and
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
Tag tag is used to control the typeface, colour and the size of the enclosed text. However, tag makes no effect on the text if the font attributes are specified. Usage: Text
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). The actual font size depends on the user agents. Example:
2.
Test 1 Test 2 Test 3 Test 4
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 4>3 3<4 3 4 4>3 3<4 3 4
Display
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 Studies. Candidates are asked to 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: ), the web browser can hyphenate long words to better justify the paragraph. e.g. The fear of 13 is called Triskaidendekaphobia. Triskaidendekaphobia 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?