MMDT1021 Chapter 4 Notes - page 1

 

Making Text Bold or Italic

Code Result
Text before <b>This is in bold</b> Text After Text before This is in bold Text After
Text before <strong>This is in strong</strong> Text After Text before This is in strong Text After
Text before <i>This is in italics</i> Text After Text before This is in italics Text After
Text before <em>This is in emphasized</em> Text After Text before This is in emphasized Text After
Text before <b><i>This is in italics and bold</i></b> Text After Text before This is in italics and bold Text After

Note the proper use of nesting in the above example.  <i> is an inner block to <b>.

Marking up Text (new in HTML5)

Code Result
Please be sure to <mark>lock</mark> the door behind you. Please be sure to lock the door behind you.

Changing the Text Size

Using the FONT tag. This is a deprecated way of changing the text size, but is sometimes the most
convenient method of changing the size.

Code Result
Text before <font size="1">Size 1 text</font> Text after Text before Size 1 text Text after
Text before <font size="+1">1 size larger text</font> Text after Text before 1 size larger text Text after

To see more about the FONT tag, click here.

Using BIG and SMALL.

Text before <big>1 size larger text</big> Text after Text before 1 size larger text Text after
Text before <small>1 size smaller text</small> Text after Text before 1 size smaller text Text after
Text before <small><small>2 sizes smaller text</small></small> Text after Text before 2 sizes smaller text Text after

Monospaced and Proportionally spaced Fonts

A monospaced font is a font where character widths are constant, regardless of the character used.

llllllllll   These are 10 lower case "l" characters.
WWWWWWWWWW   These are 10 upper case "W" characters.

A proportionally spaced font is a font where character widths on the page are change depending on how much space a character requires.

llllllllll   These are 10 lower case "l" characters.
WWWWWWWWWW   These are 10 upper case "W" characters.

<CODE>, <KBD>, <SAMP>, or <TT>.

Code Result
Normal text<br / > <code>Code text</code> Normal text
Code text
Normal text<br / > <kbd>Keyboard text</kbd> Normal text
Keyboard text
Normal text<br / > <samp>sample text</samp> Normal text
Sample text
Normal text<br / > <tt>Typewriter text</tt> Normal text
Typewriter text