2. Lesson Objectives
By the end of this lesson:
All students will be able to use different HTML text
formatting tools
Most students will be able to change the
background colour of an HTML document
Some students will be able to edit the code of an
existing HTML document to make it more
attractive
3. Starter
You may have seen the World’s Worst Website
before, but it now has a rival:
The World’s Worst Website Ever!
Have a look at this website and think about the
following:
What is wring with the background used?
What is wrong with the different types of text
used?
4. Formatting text
HTML allows us to use many
different styles of text, they
include:
Bold <b>
Strong <strong>
Big <big>
Italic <i>
Emphasized <em>
Code <code>
Subscript <sub>
Superscript <superscript>
Type in the code provided, then
save your work as textstyles.htm
Preview your work in Internet
Explorer
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is
strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is
emphasized</em></p>
<p><code>This is computer
output</code></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>
</body>
</html>
5. Adding colour to your text and
changing fonts
<html>
<body>
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red
text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in
blue text color.
</font>
</p>
</body>
</html>
HTML allows us to set which
fonts we wish to use and what
colour they will be displayed as
The best way to understand this
is to type in the code provided...
Go on get it typed in!
Save your work as textcolour.htm
and preview it in Internet
Explorer.
If you manage to get this typed in
quickly, then have a play around
by changing the fonts, the size
and the colours of the writing.
NOTE – Color is used instead
of colour!
6. Changing the background
colour...
Changing the
background colour
is really easy, all you
need to do is add a
little piece of code to
the body tag
Try changing the
background by
adjusting your code
like that shown in
red
<html>
<body bgcolor=‘Silver’>
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red
text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in
blue text color.
</font>
</p>
</body>
</html>
7. Your task...
Using your Newcastle.htm file from last lesson,
you need to:
Change the background colour to something
more attractive than white
Change the colour of the writing
Change the font and the size of the writing
Add another hyperlink to go to:
www.nufc.co.uk
Make your heading appear to be bold
8. Extension...
If you have managed to complete all of the
required tasks, then try the following:
Add another hyperlink to a Newcastle related
website
Use the Internet to find out how to include a
marquee and add a message below your heading
Check you have updated all the meanings and
provided examples within your HTML summary
table
9. Plenary...
Update your HTML tag table to explain the
following tags you have used today:
<b>
<i>
<body bgcolor>
Remember to include an example of where
you have used these tags during today’s
lesson.
10. Summary
In this lesson you have:
Used different HTML text formatting tools
Changed the background colour of an HTML
document
Edited the code of an existing HTML document to
make it more attractive
