.

 [3] Emphasizing text

Coloured text I here you shout? Easy, all you do is to define the colour of the text by using the <font> element with the <color>attribute.


<p>
    <font color="#0000ff">
        This text is blue
    </font>
</p>

This will give blue text
This text is blue

The colour codes for the fonts are identical to those introduced earlier for the background colours.
It is also possible to change the size of the fonts you use, so that the text is of different sizes. There are 6 levels of font sizes available as shown below.

<Font size=1> Mannan's World</font>
<Font size=2> Mannan's World</font>
<Font size=3> Mannan's World</font>
<Font size=4> Mannan's World</font>
<Font size=5> Mannan's World</font>
<Font size=6> Mannan's World</font>

Say if we wanted the following to appear on the web page


Mannan's Crazy World

What would the Html code look like?


<p align="center">
<font size="3" color="#ff0000">
Mannan's
</font>
<font size="6" color="#008000">
Crazy
</font>
<font size="3" color="#0000ff">
World
</font>
</p>

You will notice that you do not need to issue separate font elements, in order to control the colour or size of your font. You can just use the one element to do both. You can also control the typeface of the font you use, by using the Face attribute.


<p align="center">
    <font size="6" color="#008000" face="Algerian,Arial,Arial black">
        Crazy
    </font>
</p>


Crazy


You will notice that I have included Three typefaces, the browser will first check that the computer in question has the Algerian font loaded, if not it will try the next one Arial, and then Arial black, and so on. If none of the fonts specified exist on the machine then it will display the text using the default font used by the browser.

Alternative methods to highlight text are as follows


<p>
This should < U > underline < /U > the text
This will produce < B > Bold Text < /B > on the page
This will produce < I > italic Text < /I > on the page
This should give < STRIKE > text with < /STRIKE > a line running through it
This should make < BIG > text big < /BIG > on the page
This should make < SMALL > Text small < /SMALL > on the page
This should give < SUB > text < /SUB > in subscript form
This should give < SUP > text < /SUP > in superscript form
</p>

This should give the following effects, minus the red Text. I have highlighted the text in red just to empathize things. Note on some of the older browsers (The Old Grad Daddy Things) the following may not have the desired effects. In this case the browser will ignore the tags.


This should underline the text
This will produce Bold Text on the page
This will produce italic Text on the page
This should give text with a line running through it
This should make text big on the page
This should make Text small on the page
This should givetext in subscript form
This should givetext in superscript form

It is also possible to display other character symbols, but not all browsers have implemented this. For example using the non-breaking space and soft hypen are not supported by all browsers. IE and NS do support them. The character data set is tabulated below. Depending upon your browser, the Character column may not display all the Characters. I have found that IE5 will correctly interpretate all the ISO numbers, but will not display one or two of the easier to remember alternative names. Strictly speaking all browsers should recognize the ISO numbers apparently, so that characters which are not accessible from standard keyboards or editors, can be included in a HTML document.

ISO
Number
NAME Description Charc.
&#09; - Horizontal Tab space
&#10; - Line feed space
&#32; - Space
&#33; - Exclamation mark !
&#34; &quot; Quotation mark " "
&#35; - Number sign #
&#36; - Dollar sign $
&#37; - Percent sign %
&#38; &amp; Ampersand & &
&#39; - Apostrophe '
&#40; - Left parenthesis (
&#41; - Right parenthesis )
&#42; - Asterisk *
&#43; - Plus sign +
&#44; - Comma ,
&#45; - Hyphen -
&#46; - Period (full stop) .
&#47; - Right slash /
&#48;-&#57; - Digits (0-9) 0 - 9
&#58; - Colon :
&#59; - Semi-colon ;
&#60; &lt; Less than < <
&#61; - Equals sign =
&#62; &gt; Greater than > >
&#63; - Question mark ?
&#64; - Commercial at @
&#65;-&#90; - Upper case A-Z A-Z
&#91; - Left square bracket [
&#92; - Left backslash \
&#93; - Right square bracket ]
&#94; - Caret ^
&#95; - Horizontal bar _
&#96; - Acute accent `
&#97;-&#122; - Lower case a-z a-z
&#123; - Left curly brace {
&#124; - Vertical bar |
&#125; - Right curly brace }
&#126; - Tilde ~
&#160; &nbsp; Non-breaking space    
&#161; &iexcl; Inverted exclamation ¡ ¡
&#162; &cent; Cent sign ¢ ¢
&#163; &pound; Pound sterling sign £ £
&#164; &curren; General currency sign ¤ ¤
&#165; &yen; Yen sign ¥ ¥
&#166; &brvbar; Broken vertical bar ¦ ¦
&#167; &sect; Section sign § §
&#168; &uml; Umlaut (dierisis) ¨ ¨
&#169; &copy; Copyright © ©
&#170; &ordf; Feminine ordinal ª ª
&#171; &laquo; Guillemot left « «
&#172; &not; Not sign ¬ ¬
&#173; &shy; Soft hyphen ­ ­
&#174; &reg; Registered trademark ® ®
&#175; &macr; Macron accent ¯ ¯
&#176; &deg; Degree sign ° °
&#177; &plusmn; Plus or minus ± ±
&#178; &sup2; Superscript two ² ²
&#179; &sup3; Superscript three ³ ³
&#180; &acute; Acute accent ´ ´
&#181; &micro; Micro sign µ µ
&#182; &para; Paragraph sign ¶ ¶
&#183; &middot; Middle dot · ·
&#184; &cedil; Cedilla ¸ ¸
&#185; &sup1; Superscript one ¹ ¹
&#186; &ordm; Masculine ordinal º º
&#187; &raquo; Guillemot right » »
&#188; &frac14; Fraction (one quarter) ¼ ¼
&#189; &frac12; Fraction (one half) ½ ½
&#190; &frac34; Fraction (three quarters) ¾ ¾
&#191; &iquest; Inverted question mark ¿ ¿
&#192; &Agrave; Capital A, grave accent À À
&#193; &Aacute; Capital A, acute accent Á Á
&#194; &Acirc; Capital A, circumflex accent  Â
&#195; &Atilde; Capital A, tilde à Ã
&#196; &Auml; Capital A, umlaut (dierisis) Ä Ä
&#197; &Aring; Capital A, ring Å Å
&#198; &AElig; Capital AE dipthong Æ Æ
&#199; &Ccedil; Capital C, cedilla Ç Ç
&#200; &Egrave; Capital E, grave accent È È
&#201; &Eacute; Capita E, acute accent É É
&#202; &Eirc; Capital E, circumflex accent Ê &Eirc;
&#203; &Euml; Capital E, umlaut (dierisis) Ë Ë
&#204; &Igrave; Capital I, grave accent Ì Ì
&#205; &Iacute; Capital I, acute accent Í Í
&#206; &Icirc; Capital I, circumflex accent Î Î
&#207; &Iuml; Capital I, umlaut (dierisis) Ï Ï
&#208; &ETH; Capital Eth, Icelandic Ð Ð
&#209; &Ntilde; Capital N, tilde Ñ Ñ
&#210; &Ograve; Capital O, grave accent Ò Ò
&#211; &Oacute; Capital O, acute accent Ó Ó
&#212; &Ocirc; Capital O, circumflex accent Ô Ô
&#213; &Otilde; Capital O, tilde Õ Õ
&#214; &Ouml; Capital O, umlaut (dierisis) Ö Ö
&#215; &times; Multiply sign × ×
&#216; &Oslash; Capital O, slash Ø Ø
&#217; &Ugrave; Capital U, grave accent Ù Ù
&#218; &Uacute; Capital U, acute accent Ú Ú
&#219; &Ucirc; Capital U, circumflex accent Û Û
&#220; &Uuml; Capital U, umlaut (dierisis) Ü Ü
&#221; &Yacute; Capital Y, acute accent Ý Ý
&#222; &Thorn; Capital Thorn, Icelandic Þ Þ
&#223; &szlig; Small sharp s, German (sz ligature) ß ß
&#224; &agrave; Small a, grave accent à à
&#225; &aacute; Small a, acute accent à à
&#226; &acirc; Small a, circumflex accent â â
&#227; &atilde; Small a, tilde ã ã
&#228; &auml; Small a, umlaut (dierisis) ä ä
&#229; &aring; Small a, ring å å
&#230; &aelig; Small ae dipthong (ligature) æ æ
&#231; &ccedil; Small c, cedilla ç ç
&#232; &egrave; Small e, grave accent è è
&#233; &eacute; Small e, acute accent é é
&#234; &ecirc; Small e, circumflex accent ê ê
&#235; &euml; Small e, umlaut (dierisis) ë ë
&#236; &igrave; Small i, grave accent ì ì
&#237; &iacute; Small i, acute accent í í
&#238; &icirc; Small i, circumflex accent î î
&#239; &iuml; Small i, umlaut (dierisis) ï ï
&#240; &eth; Small eth, Icelandic ð ð
&#241; &ntilde; Small n, tilde ñ ñ
&#242; &ograve; Small o, grave accent ò ò
&#243; &oacute; Small o, acute accent ó ó
&#244; &ocirc; Small o, circumflex accent ô ô
&#245; &otilde; Small o, tilde õ õ
&#246; &ouml; Small o, umlaut (dierisis) ö ö
&#247; &divide; Division sign ÷ ÷
&#248; &oslash; Small o, slash ø ø
&#249; &ugrave; Small u, grave accent ù ù
&#250; &uacute; Small u, acute accent ú ú
&#251; &ucirc; Small u, circumflex accent û û
&#252; &uuml; Small u, umlaut (dierisis) ü ü
&#253; &yacute; Small y, acute accent ý ý
&#254; &thorn; Small thorn, Icelandic þ þ
&#255; &yuml; Small y, umlaut (dierisis) ÿ ÿ
&#338; &OElig; Latin Capital OE (ligature) Œ Œ
&#339; &oelig; Latin Small OE (ligature) œ œ
&#352; &Scaron; Capital S with caron Š Š
&#353; &scaron; Small s with caron Š Š
&#376; &Yuml; Capital Y with dierisis Ÿ Ÿ
&#710; &circ; Circumflex accent ˆ ˆ
&#732; &tilde; Small tilde ˜ ˜
&#8211; &ndash; En dash – –
&#8212; &mdash; Em dash — —
&#8216; &lsquo; Left single quotation mark ‘ ‘
&#8217; &rsquo; Right single quotation mark ’ ’
&#8218; &sbquo; Single low-9 quotation mark ‚ ‚
&#8220; &ldquo; Left double quotation mark “ “
&#8221; &rdquo; Right double quotation mark ” ”
&#8222; &bdquo; Double low-9 quotation mark „ „
&#8224; &dagger; Dagger † †
&#8225; &Dagger; Double Dagger ‡ ‡
&#8240; &permil; Per mille (thousand) sign ‰ ‰
&#8249; &lsaquo; Single left-pointing angle quotation mark ‹ ‹
&#8250; &rsaquo; Single right-pointing angle quotation mark › ›
&#8364; &euro; Euro sign* € €

Below are the ISO numbers and alternative names for some Greek symbols. Note there are further symbols from the HTML 4.0 specification which have not been included here. Note NS4.7 does not support many of these characters yet.

ISO
Number
NAME Description Charc.
&#913; &Alpha; Greek capital Alpha Α
&#914; &Beta; Greek capital Beta Β
&#915; &Gamma; Greek capital Gamma Γ
&#916; &Delta; Greek capital Delta Δ
&#917; &Epsilon; Greek capital Epsilon Ε
&#918; &Zeta; Greek capital Zeta Ζ
&#919; &Eta; Greek capital Eta Η
&#920; &Theta; Greek capital Theta Θ
&#921; &Iota; Greek capital Iota Ι
&#922; &Kappa; Greek capital Kappa Κ
&#923; &Lambda; Greek capital Lambda Λ
&#924; &Mu; Greek capital Mu Μ
&#925; &Nu; Greek capital Nu Ν
&#926; &Xi; Greek capital Xi Ξ
&#927; &Omicron; Greek capital Omicron Ο
&#928; &Pi; Greek capital Pi Π
&#929; &Rho; Greek capital Rho Ρ
&#931; &Sigma; Greek capital Sigma Σ
&#932; &Tau; Greek capital Tau Τ
&#933; &Upsilon; Greek capital Upsilon Υ
&#934; &Phi; Greek capital Phi Φ
&#935; &Chi; Greek capital Chi Χ
&#936; &Psi; Greek capital Psi Ψ
&#937; &Omega; Greek capital Omega Ω
&#945; &Alpha; Greek small Alpha α Α
&#946; &Beta; Greek small Beta β Β
&#947; &Gamma; Greek small Gamma γ Γ
&#948; &Delta; Greek small Delta δ Δ
&#949; &Epsilon; Greek small Epsilon ε Ε
&#950; &Zeta; Greek small Zeta ζ Ζ
&#951; &Eta; Greek small Eta η Η
&#952; &Theta; Greek small Theta θ Θ
&#953; &Iota; Greek small Iota ι Ι
&#954; &Kappa; Greek small Kappa κ Κ
&#955; &Lambda; Greek small Lambda λ Λ
&#956; &Mu; Greek small Mu μ Μ
&#957; &Nu; Greek small Nu ν Ν
&#958; &Xi; Greek small Xi ξ Ξ
&#959; &Omicron; Greek small Omicron ο Ο
&#960; &Pi; Greek small Pi π Π
&#961; &Rho; Greek small Rho ρ Ρ
&#962; &Sigma; Greek small final Sigma ς Σ
&#963; &Sigma; Greek small Sigma σ Σ
&#964; &Tau; Greek small Tau τ Τ
&#965; &Upsilon; Greek small Upsilon υ Υ
&#966; &Phi; Greek small Phi φ Φ
&#967; &Chi; Greek small Chi χ Χ
&#968; &Psi; Greek small Psi ψ Ψ
&#969; &Omega; Greek small Omega ω Ω
&#8226; &bull; Small black circle • •
&#8482; &trade; Trademark symbol ™ ™
&#402; &fnof; florin (latin small f with hook) ƒ ƒ

Using these characters could not be simpler. You either use the ISO number form, which should work with all browsers, or you use the easier to remember alternative name, which have been assigned to the more popular characters. You should remember that these codes always begin with an ampersand (&) and finish with a semicolon (;).
The code below illustrates how simple they are to use.


<p>
Here is the capital symbol &#198; (dipthong), which can be manipulated in exactly the same way as standard text.<br>
For example we can change its colour to blue and increase its size as normal.<br>
    <font color="#0000ff" size="+4">
        <center> &#198</center>
    </font>
</p>

The above should give
Here is the capital symbol Æ (dipthong), which can be manipulated in exactly the same ways as standard text.
For example we can change its colour to blue and increase its size as normal.
Æ

Well thats it for this section.


Previous topic Back To Contents Next Topic