|
Remember
our last example? Unfortunately, that still
wasn't valid HTML. There's just one more
container tag we need to add before it will all
work, and this tag is the most important of all.
It's the <body> tag - it
defines the actual content of the page, what the
web browser will actually show when someone comes
to visit your page. Yet again, the <body>
tag is a container, and will need it's terminator
</body>. This tag pair
needs to be inserted after the </head>
tag but before the </html>
tag. Inside the <body> tag
you can assign background colours, link colours
and even more attributes, but for the moment
we'll just leave it as it is. The default
background colour is grey on some browsers, but
white on some others. You can find more about
adding background colours and even images in
other tutorials.
Text
you type inside the <body>
and </body> tags will
appear in a web browser in the default size, the
default colour and the default font (which is
normally Times New Roman). This is how your
browser will show the default font:
Your browsers' default font. The quick brown fox jumps over the lazy dog. 1234567890
However,
you might not want to use this font. Why not
change it? This is written in Verdana, but it may
appear as Arial, Helvetica or any other
sans-serif font on your computer. You can change
the font, and the size, in exactly the same way.
All you need to do is to use the <font>
tag inside the <body> and </body>
tags. However, just the <font>
tag on it's own will do nothing. You need to add
the attribute face inside the
tag to change the font. To do this, you type:
<font face="Arial">
Notice that after the face
attribute, there is an equals sign, and then the
name of the font is enclosed in quotes? You use
this format for almost all attributes to all HTML
tags. If the value of the attribute is simply a
number, such as 124, you don't
actually need the quotes - but some attributes
require quotes and it never hurts to use them, so
it's best to use them all the time.
After
our <font face="blah">
tag, we can add all the text that we want to be
that font. Don't forget that <font>
is a container tag, and so we'll also need </font>
at the end of all of the text we want in that
specified font. Note that you do not need any
attributes added to the terminator tag. The face
attribute is not the only one you can add to the <font>
tag either - you can add colours, sizes and other
attributes to customise your text even more. For
example, the size attribute can
be assigned to change the text size. If you add size="+1"
to your <font> tag, the
text inside will get one size larger. If you use size="-2",
the text will be two sizes lower. You can also
replace these relative sizes with absolute sizes,
such as size="5". So,
now we can add this to our code:
<font face="Arial"
size="6">Welcome to my
homepage!</font>
Not surprisingly, this will write the
line 'Welcome to my homepage!' in the Arial font
if it is available (if it isn't, the default font
will be used instead) in size 6. Adding colours
to text will be covered in other tutorials.
Our entire example so far is:
<html>
<head>
<title>
Now
you can write the rest of your page. If you want
to format your text with bold, italic and
underlined areas, add paragraphs and line breaks,
simply use the tags below. All of them are paired
tags and need the text you want to be changed or
included before the terminator tag. Make sure all
of these go inside the <body> and
</body> tags.
<p>
text </p>
defines a paragraph. A blank line
appears above the paragraph.
<p
align="alignment"> text </p>
aligns the paragraph. Alignment can be
"left", "center" or
"right".
<strong>
text </strong>
makes the text between the <strong>
and </strong> tags bold,
like this.
<em>
text </em>
makes the text between the <em>
and </em> tags italic,
like this.
<u>
text </u>
makes the text between the <u>
and </u> tags underlined,
like this.
.
<hn>
text </hn>
makes the text between the <hn>
and </hn> tags into a heading, where
n is a number between 1 and 6 (1 is the largest,
6 the smallest).
See examples.
However,
pressing [Enter] or [Return] will not
work in HTML if you want to create a new line in
your page. You probably do want to do this to
make your HTML source more readable though,
because you will probably want to edit your page
at a later date and if all the HTML is in one
extremely long line it can get incredibly hard to
read.
If you want to go on to a new line in your final
page, you need to use the tag <br>.
However, this is an incredibly easy tag to use -
you don't need any terminator or any attributes.
If you want to put the two sentences 'My name
is A.N.Other.' and 'I am 34 years old.'
on different lines in your page, all you need to
do is to type:
My
name is A.N.Other. <br>I am 34 years old.
but
I would suggest adding a line break after the <br>
in your HTML to make it much easier to read. The
space before the tag are purely to help reading
as well - as the second sentence is about to go
onto the next line anyway, it really doesn't
matter.
Although if you want a forced line break
you use the <br> tag, it
is not necessary to use the tag normally, as if
you write a long line of text the browser will
simply wrap it to the next line. If I wrote a
long paragraph on learning HTML (looks like I
have actually...) then I don't need to add
anything at the end of each line until I am
finishing the paragraph or I want to force a new
line.
Now,
just click on the link below to continue
with the tutorial!
Part 3 -->
|
, at 800x600 or higher.