Current Position >>Home Page >>Lesson 4

Make Text Stand Out

1. Change the font

We changed the size of headings by using <H1> </H1>, <h2> </h2> etc. Now we change the size, color and font of the bodytext.

• To change the setting you must use the following TAGS:

<FONT> </FONT>

• You will also use the following ATTRIBUTES:

Size = "_____"     Color = "_______"          Face = "______"

• Remember, attributes go INSIDE the start tag,
  e.g. <FONT size="2" color="blue" face="Arial"> text to change </FONT>

If you write codes like:
<font size=+1>Bob</font> <font size=+2>is</font> <font size=+3>a</font> <font size=+2>Cool</font> <font size=+1>Guy</font> isn't <font size=-1>he?</font>

The text will look like this in a browser:

 Bob is a Cool Guy isn't he?

Do this:

• Open your web page
• Right Click
• Choose VIEW SOURCE
• The HMTL page will appear
• Place the cursor in front of the word to be changed 
• type <FONT>
• Place your cursor between T and >
• press SPACE bar and Type: Size="7"
  (This will make the text the biggest size; the smallest size is 1)
• SPACE and Type: Color="Blue"
  (Note the American spelling)
• SPACE and Type: Face="Comic Sans MS"
  (This will change the font.  Always check that you have the right spelling)
• Place your cursor after the last word to be changed
• Type:</font>
• Save
• Return to your Web Page
• Click on Refresh
• The text between the FONT tags will now be Large, Blue and Comic Sans MS.
• imagine the pair of tags are the pair of hands of yours, anytthing to be changed is between the two hands.

2. make text Bold, Italic and Underline 

To improve the look of your text, you can use different tags to emphasise certain words.

Apart from the size, colour, font face tags we have used, there are three other tags:

Bold                     Italic                    Underline

^{<B> </B>}     <I> </I>      <U> </U>

 

Do this

• Open your page in notepad
• Type THIS IS BOLD 
• Place the cursor in front of the word BOLD
• Type:<b>
• Place the cursor after the word BOLD
• Type </b>
• Save
• Return to your Web Page
• Click on Refresh
• The BOLD will be darker than the rest of the text.
• Now, Go back to notepad
•  Change the B tags to I tags, i.e. use <I> and </I> in the places of <b> and </b>
• Save and Refresh, BOLD should now be BOLD
• Return to Notepad and try the U tags
• Next Try BOLD
• Do you know which pair of codes to use?

Remember that you must save the changes and then refresh the page before you will see any change

3. Align the text

try the code below to produce the three different alignment

• <h1 align=left> Left Align </h1>
• <h1 align=center>Center Align</h1>
• <h1 align=right>Right Align</h1>
• View in browser. (still remember how to do it? No?) Do they look like these?

Left Align

Center Align

Right Align

 

If you forgot how to do it, try the following:

• Open your web page
• Right Click
• Choose VIEW SOURCE
• The HMTL page will appear
• Place the cursor in front of </BODY>
• Type: the codes above
• Save
• Return to your Web Page
• Click on Refresh
• It should look like the ones above

 

4.   A Banner or Marquee

A banner that moves across the top of the screen is called a Marquee.

• type the following into Internet Explorer

<MARQUEE BGCOLOR="RED" LOOP="infinite" >text text text</marquee>

• It does not work in Netscape

Well done!