Part 2 Styles and Effects
Putting text on your page and styling it is what we will be looking in this Tutorial.
Let's start out by putting the title of your page on the screen. Just put in "My Hobby
Page" like this:
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
My Hobby Page
</BODY>
</HTML>
Click here to view how the page will Look like
Now if you preview the above link you will find that the text displayed
is on the left-hand top corner of the page. That is not what we want to see.
We want the text displayed a bit larger and also centered on the screen.
First let's make it larger. To do this you will need to use the Heading
Tags (<H></H>). There are 6 different heading sizes to choose from, 1
being the largest to 6 being the smallest. So if we want to use the largest
heading we will use the <H1> Tag. So, add the <H1> command before your
text and close the Tag with </H1>. Now your code should look like this:
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>My Hobby Page</H1>
</BODY>
</HTML>
Now lets position the text to the center.
For this we use the <CENTER></CENTER> Tags. We can
use the <CENTER> Tag individually or with the
combination of different tags. Since the text is just a simple heading we will
use the <CENTER> Tag on its own. So now lets
see how the code will look like :
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
<CENTER>My Hobby Page</CENTER>
</H1>
</BODY>
</HTML>
Click here to view how the page will Look like
Now lets put in some text into the page to describe what your hobbies
are. We will format the text by aligning it on the screen, changing the
color of the font, specifying a font type, styling the font to bold and
italics. To display text in paragraph form we use the (<P>
) Tag. Notice here that we don't use a </P>
Tag to close it. This is one of the few Tags which don't need a closing Tag.
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
<CENTER>My Hobby Page</CENTER>
</H1>
<P>
Welcome to my Hobby Page. In this page I will show
you what my hobbies are and how I spend my time doing the things I love
to do. I like to use my Computer to create beautiful graphics and also
play arcade games with my mates. I also use the Internet a lot and often
keep myself busy chatting to my online friends.
</BODY>
</HTML>
Click here to view how the page will Look like
Now if you notice, the paragraph we typed
has got uneven edges for every line. We can align the edges by using the
<P ALIGN="JUSTIFY"> Tag. We can also use
CENTER, LEFT or RIGHT alignment depending on
what output you wish to display. We will change the color of the font by
stating FONT COLOR="RED" inside the <P> Tag (It will apply to that paragraph only)
or it can be included into the <BASEFONT>(does
not require to be closed) Tag which will affect the whole document. Similarly
we can also specify the FONT FACE in either the <P>
Tag or in the <BASEFONT> Tag. We will use the
(<B></B>)Tag to make the text Bold style.
So lets see what the final code will look like. Remember to experiment the codes
and find the differences it can make to the output.
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<BASEFONT COLOR="RED" FACE="VERDANA">
<H1>
<CENTER>My Hobby Page</CENTER>
</H1>
<P ALIGN="JUSTIFY">
<B>
Welcome to my Hobby Page. In this page I will show
you what my hobbies are and how I spend my time doing the things I love
to do. I like to use my Computer to create beautiful graphics and also
play arcade games with my mates. I also use the Internet a lot and often
keep myself busy chatting to my online friends.
</B>
</BODY>
</HTML>
Click here to view how the page will Look like
<<Back<<
>>Continue>>
Top
|
