HTML Basics Studies & Important description Part IV

HTML BASICS STUDIES FOR STUDENTS

HTML Basics Description

3.   Colors and Fonts

<b> </b>         ……..   The bold face tag

<I> </I>           ……..   The italics tag

……..   The superscripts tag

…….    The subscripts tag

The following is no longer available in HTML5:

              <u> </u>       ……..   The underline tag

              See below for how to do this with CSS.

                        Using CSS these would be accomplished with:

                        <span style= “font-weight: bold”>   … </span>

                        <span style= “font-style: italic”> … </span>

                        <span style=”text-decoration: underline”> …</span>

                        <span style=”vertical-align: super”>  … <span>

                        <span style=”vertical-align: sub”> … </span>

In general, it is better to use <strong> … </strong> than <b> …</b>, and it is better to use <em> …</em> than <i> … </i>.   (‘em’ stands for emphasis.)  This is because readers for the visually impaired can render ‘strong’ and ‘em’ but not b(old) and i(talics).

Font manipulation

Fonts have a font-face (e.g. Arial, Courier, etc.), a font-size, font-weight (e.g. bold), a font-style (e.g. italic).

Text attributes are used to set alignment (text-align), color (text-color) and decoration (text-decoration can have the values underline, overline, line-through or blink).

To have a paragraph in bold red with the Arial font and in the font three times as large as usual you would write:

<p style=”font-face:Arial; font-weight:bold; font-size:3em;text-color:red”> …</p>

The <font> tage of XHTML1 and HTML4 is no longer available in (X)HTML5.  Accordingly, you may no longer use code such as:

<font> </font>  ……..    Font tags

            These tags are used to specify a particular font - size, face, color in the body.

            Size, face and color are the attributes (properties) you are specifying in the font tag.

            When the font tag closes, those attributes end.

            <font size=”7”>This is the biggest text available.</font >

            <font size =”3”>This is the default size for text .</font >

<font size =”1”>This is the smallest text available.</font >

<font size =”+1”>Increases size by 1 unit</font >

Note: For headlines it is better (more reliable) to use h1, h2, etc.

You may also specify the typeface - but the face must be available on the user's

 computer.

<font face="helvetica">This is in Helvetica.</font>

Note: Not all browsers support this, and different browsers/versions may have

different faces available, or different names for the same face (e.g. Times, Times

Roman, Times New Roman.) 

face="Times, times, Times Roman, times roman, Times New Roman, times new roman"

will look for these 6 faces (in that order), and then go to the default face.

HW: Look at Mozilla Firefox, Opera and Internet Explorer on
                      the pc and Mac browsers and see what type faces you find

Colors

Finally, you may specify colors.  You should always try to use browser-safe colors.

Colors are described by a set of three hexadecimal numbers.  Each of the numbers is of

the form hh.

Since there are three such numbers, the whole thing looks like hhhhhh.

Each of the h's is 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E, or F.

The three numbers specify the level of the Red, Green and Blue lights which

make up the whole color.

Here are some common browser-safe colors:

            Red     #FF0000

            Green  #00FF00

            Blue     #0000FF

            White   #000000

            Black   #FFFFFF

The following list of colors is in the transitional but not the strict DTD of XHTML1 and is also available for styling with CSS (hence in HTML5).

There are also 16 widely known color names with their RGB values:

    Black  = #000000    Green  = #008000

    Silver = #C0C0C0    Lime   = #00FF00

    Gray   = #808080    Olive  = #808000

    White  = #FFFFFF    Yellow = #FFFF00

    Maroon = #800000    Navy   = #000080

    Red    = #FF0000    Blue   = #0000FF

    Purple = #800080    Teal   = #008080

    Fuchsia= #FF00FF    Aqua   = #00FFFF

If you wish your text to be blue then you enter:

            <span style=”text- color:#0000FF”>Here is my blue text. </span>

The # sign alerts HTML that a hexadecimal number is following.

HTML (Netscape, Firefox and Internet Explorer and probably the other browsers)
           also recognizes a few color names:

            Black, White, Green, Maroon, Olive, Navy, Purple, Gray,

            Red, Yellow, Blue, Teal, Lime, Aqua, Fuchsia, Silver