The Way Text Looks

In our last lesson we used the bold tag <B> to make text look darker and thicker. There are several other tags that allow web designers to change the way text will look on a web page. These include the Italics tag, Heading tag and Font tag. Let�s take a closer look at each.

Italics

The italics tag italicizes your text. It makes your text stand out. Most web pages don�t use italics very often because they are difficult to read. It is usually used to show a quotation, or the title of a movie, book or play. Here is an example:

<P> I enjoyed reading <I> The Distracted Professor </I>. I plan to do a book report on it. </P>

Here is how it would look:

I enjoyed reading The Distracted Professor. I plan to do a book report on it.

Underlining

You can also make text stand out by underlining. The tags for this are <U> and </U>. Here is an example:

I love eating at <U> Taco Bell </U>. I also like <U> Pizza Hut</U>

This is what it would like:

I love eating at Taco Bell. I also like Pizza Hut.

Be careful, on most web pages underlined text is reserved for links. Underlining ordinary text may confuse (and annoy) visitors to your site.

Headings

Headings are similar to the headlines of a newspaper. Headings are big and bold and their goal is to get the reader�s attention. The largest heading tag is <H1>, and the smallest is <H6> Here are some examples:

<H1>SCHOOL</H1>

This is what it would like:

SCHOOL

whereas

<H6>Subjects</H6>

will look like this:

Subjects

Font

Font <FONT> is a very important tag. It allows you to control the size, type, and colour of the text.

Font Size

The font size tag allows you to specify how big you want the text on the page to be.

You can choose from sizes ranging from 1 (smallest) to 7 (largest). Here is an example:

<FONT SIZE = "4">I love Math. </FONT>

This is what it would like:

I love Math.

You can also use the font size command to change the relative size of the text (how much bigger or smaller its compared to the other text on the page). For example <FONT SIZE = +1> is one step bigger than the regular-sized text on the page Here is an example:

<FONT SIZE = "+3"> HI </FONT>, my name is Mr. Chaffar.

Here's what appears on your web page:

Hi, my name is Mr. Chaffar.

Font Type

Font type allows you to specify a web page's typeface.

Choosing a font type is tricky because available typefaces differ from computer to computer. Safe choices include Arial and Times New Roman, which are installed on most computers. You can specify one typeface, or you can give a list of typefaces, separated by a comma�the browser will use the second font listed if the first is unavailable.

Here is an example:

<FONT TYPE = "ARIAL, TIMES NEW ROMAN"> Have you done your homework? </FONT>

Font Colour

In addition to changing the type and size of the print on your web page, you can also customize its colour. Be careful how you use coloured text, as it can be hard on the eyes. Note that HTML uses American spellings of words, so �colour� won�t work!

Example:

<FONT COLOR = "RED"> What a great project! </FONT>

Combining All Three Font Commands

All three modifiers (SIZE, TYPE, AND COLOUR) can be added to a single font tag, which only needs to be closed once For example

<FONT SIZE = "4" TYPE = "ARIAL" COLOR = "RED"> Mr. Chaffar is my teacher.</FONT>

Here is an example of using all three ways of changing text appearance on one page:

<HTML>

<HEAD>

<TITLE> My site! </TITLE>

</HEAD>

<BODY>

<H1> Subjects </H1>

<FONT SIZE = "4" TYPE = "ARIAL" COLOR = "RED">

<P> What subject do you prefer? Math, Geography, History? </P>

<P> Everybody has different opinions. </P>

<P> Personally, I prefer Math! I read my Math book from <I> Houghton Mifflin </I> every day! </P>

</FONT>

</BODY>

</HTML>

Assignment 3: Compose a web page that uses bold, italic and underlined text, with two headings having different sizes, and where your use two different font sizes and colours. The topic is of your choice.

Next

Html 101