Вы находитесь на странице: 1из 3

Lesson 2

Paragraphs
In HTML you indicate paragraphs with the <P> and </P>. Without these elements the
document becomes one long paragraph.
Thus the examples below, although coded differently, are all displayed the same way:
HTML Code Browser Display
<P> This is a very short
paragraph.</P> <P>This is
the second paragraph. </P>

This is a very short paragraph.
This is the second paragraph.
<P> Although this
is written differently
with lots of carriage returns
it still only displays
the paragraphs when
you put in the Paragraph
Tag.</P> <P> Like so.</P>

Although this is written
differently with lots of carriage
returns it still only displays the
paragraphs when you put in
the Paragraph Tag.
Like so.


Fonts

The <FONT> tag sets a font's size, typeface and colour.

Font Sizes:
In HTML, font sizes range from 1-7, with 1 being the smallest. Font sizes 2 and 3 are the
most commonly used. If a font size is not specified the default setting is 3.

Size 1 Size 2 Size 3 Size 4 Size 5 Size 6 Size 7


Font Types

Arial Lucida Sans Times New Roman Verdana Helvetica Impact Comic
Sans MS
Font Colours:
Using the <FONT> tag, text can be instructed to display in any colour. Text colours are
chosen either according to a hexadecimal numbering system or by specifying one of
sixteen pre-defined colour names that (other than black) can be included in the <FONT>
tag. These sixteen colours are:
Aqua - Red Green - Blue Violet Fuchsia Grey - Lime - Maroon - Navy Olive
Purple - Silver Teal - White - Yellow


The font attributes described above are included in the <FONT> tag as follows:
HTML Code Browser Display
<FONT SIZE=2>This is a size
two font</FONT>
This is a size two font
<FONT FACE="Comic Sans
MS">This font is Comic Sans
MS</FONT>
This font is Comic Sans MS
<FONT COLOR="Red"> This text
is red </FONT>
This text is red



Task 1

Open notepad and write the following.

Save the document as task 1. Once saved click on the page to see what appears.

<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 colour.
</font>
</p>
</body>
</html>

Task 2

Using the tags that were used in the previous task create a web page that uses 5 different
colours and five different Font styles in the text. Write two sentences for each paragraph
but remember to correctly space the paragraphs using the <p> tag.



Changing the background colour of a document

The <style=background-color:> is used to change the background colour of a web
page.

Example
If we wanted the background colour of our page blue we would write the tag
<body style="background-color: blue">
We can change the colour of individual paragraphs similar to highlighting by writing the
tag.
<p style="background-color:red"> this will change all paragraphs red until we close it
with the </p> tag
Task 3

Type the following information into Microsoft notepad, save and click to view. Once you
have seen what the page looks like reopen the notepad file and change the colour of your
background and paragraphs.

<html>

<body style="background-color: blue">

<p> The background colour is aqua </p>

<p style="background-color:red">
The paragraph is now in red
</p>

<p style="background-color:yellow">
This paragraph is written in yellow
</p>

</body>

</html>





Assignment 2

Open Microsoft notepad and create a web page called Assignment 2

In the centre of the page write Colours, fonts and backgrounds.

Write 3 paragraphs of information about your favourite book, TV programme or favourite
film.

Change the background colour of your document from white.

Use a different font style and font size for each paragraph (size 4, Verdana etc.)

Highlight the information by changing the colour of each paragraph.

Вам также может понравиться