|
Lesson 5 � Making it look better
Making it look better
If you want to make your page look better, you will need to add some more tags. You can add headings, make some text bold or italic, change the size of the text, break it up into paragraphs and even put horizontal lines to seperate sections.
Paragraphs
The most inportant tag is also one of the simplest <P> is the paragraph tag. When you put <P> your browser will start a new paragraph.
Type
This is some text. This is some more text.
And it looks like this:
| This is some text. This is some more text. |
Type
This is some text.
<P>This is some more text.
And it looks like this:
|
This is some text.
This is some more text.
|
Go through your document adding <P> wherever you want a new line to start. You should also put </P> at the end of each paragraph. Although this is not strictly necessary for the <P> tag, it is good practise, as many tags will not work properly unless they are used in pairs. You will see that the browser puts a blank line between each paragraph- if you just want a line break without a blank line you can use the <BR> tag instead. (Note there is no </BR> tag)
If you type:
This is some text.
<BR>
This is some more text on a new line without a space.
It produces
|
This is some text.
This is some more text on a new line without a space.
|
Headings
-
- The next thing is to add headings and sub-headings. You might
want o put something at the top like:
-
- "The Surrey United Home Page"
-
- You can do this by typing;
-
- <H1>The Surrey United Home Page</H1>
-
- The <H1> is a level 1 heading,. There are six levels <H1>
to <H6>
- Normally a heading will be bigger and bolder than normal text,
but one the things you will learn is it is not possible to control
precisely how a page will look on another computer. This is because
different browsers display things differently.
- If you want the headings in the middle of the screen, you can
add an extra bit (called an attribute) to the tag:
-
- <H1 ALIGN=CENTER>The Surrey United Home Page</H1>
-
- (Note it is "center" because the Internet
uses US spellings)
Lines
You can add horizontal lines to sperate sections. Just put <HR>
where you want the line. You can control the size (in pixels, the
defualt is 2. More about pixels when we cover images) and width
(usually as a percentage of the window).
For example
-
- <HR> will give you <HR size =4 width =50%> will
give you
-
-
-
-
- Bold and italic
-
- Finally you can add more variety with Bold, italics and underline
to mark out words. The tags are:
-
-
- <B> ... </B> Bold
- <I> � </I> Italic
- <U> … </U> Underline
-
- For example:
-
- This is a <B>very important</B> season for us. If
we are not <I>careful</I> we could be relegated. That�s
right � <I><U>sent down</U></I>!
-
-
- Looks like
| This is a very important season for us.
If we are not careful we could be relegated. That�s
right � sent down! |
Summary
You should now have some code that looks a bit like this:
<HTML>
<HEAD>
<TITLE>Surrey United: The Greatest Football Team Ever</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>The Surrey United Home Page</H1>
<P>This is all about Surrey United, my favourite football
team.
<BR>
I have been a supporter for three years and they play at a ground
near my home so I can go and watch them</P>
<HR SIZE=4 ALIGN=CENTER WIDTH=50%>
<P>This is a <B>very important</B> season for
us. If we are not <I>careful</I> we could be relegated.
<BR>
That�s right <I><U>sent down</U></I>!</P>
</BODY>
</HTML>
Looks like
The Surrey United Home
Page
This is all about Surrey United, my
favourite football team.
I have been a supporter for three years and they play at a
ground near my home so I can go and watch them
This is a very important season
for us. If we are not careful we could be relegated.
That�s right sent down!
|
-
- A bit dull
The pages you can create using these tags will be readable but
not particularly pretty. Everything will be in the same font and
it�s all the same colour. Don�t worry � there are lot ways to live
things up. You can change the colours of pages, use a background,
change the colour, size and appearance of text. These require more
tags and we�ll look at them after we�ve seen how to add pictures
and link pages together.
|
