Now comes the most important part - putting text on the page.
Let's start out by putting the title of your page on the screen.
Just put in "My First Page" like this:
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
My First Page
</BODY>
</HTML>
Now if you preview this in your browser you will see that this is not exactly
compelling stuff. So, let's jazz it up a bit. First let's make it larger. Do this you will
need to use the <H1-6> command. There are 6 different sizes to choose from, 1 being
the largest to six being the smallest. How about we try a size one? So, add the <H1>
command before your text. Don't forget to close this command off after your text or all of
the text below it will be that size as well. Now your code should look like this:
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>My First Page</H1>
</BODY>
</HTML>
Now if you take a look at it you will see that the text you
wrote looks quite a bit
bigger. However, it is just sitting there, on the left side of your screen. How about if
we center it?
In order to do this we must first use a combination of commands. First is the <P>
command. This is commonly referred to as the 'paragraph' command. It denotes a new
paragraph or section of text. Along with this command you will use 'align'. This goes in
the bracket with the <P> command. You will tell the align command that you want the
text to go to the center by typing simply 'CENTER'. The whole command looks like this:
<P ALIGN="CENTER"> . This will center your text. Now your code should look
like this:
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
<P ALIGN="CENTER">My First Page
</H1>
</BODY>
</HTML>
Note that there is not a command closing off
the <P align=""> command.
That is because the <P> command is one of the few that do not need to be shut off.
In order to change the alignment again just put the command in again and tell it where you
want it to go. Or just typing in the <P> command by itself will reset the text to
it's original position. To get the text where you want it is quite simple. For aligning
the text to the left put 'left', for centering put 'center' and for placing the text on
the right put 'right'. It is that simple. Also note that the <H1> command comes
before the align command. This is because the <H> command overrides the align
command if <H> is placed after align. This causes the text to stay on the left.
This leads to another option for centering text,
or placing it on the right or left. This
command looks like this: <CENTER>. This is used before all other text commands. This
must be closed off at the end of whatever text it is that you want centered. This
difference between the commands? The <CENTER> command is for large amounts of text
that want centered. For example, if you have more then one paragraph that you want
centered then use that command. However, if it is just one paragraph that you want aligned
differently, then the <P ALIGN> is the command for you. For the purposes of this
tutorial we will just use the <P ALIGN> command.
Now you can add tags to emphasize words. You can make the text italic by adding the
<I> command. Or you can add bold text by adding the <B> command. Remember,
after whatever text you want to modify to close off the command with the backslash.
Now though, it is time to add some color to our text. There are two ways of doing this.
First, there are the simpler colors. Those can be added simply by typing in the name of the
color. For example, let's make the text red. After the <P ALIGN>, command bracket put in this:
<FONT COLOR="RED"> Then put in your text. After you are done putting in
the text at whatever color you have chosen be sure to close off the command by putting in
</FONT>.
Go ahead and try this now. You code should now look like this:
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
<P ALIGN="CENTER">
<FONT COLOR="RED">
My First Page
</FONT>
</H1>
</BODY>
</HTML>
Now it is starting to look better right? However, putting in the name of the color will
limit the number of colors you can do. In order to get the full
216 web safe color range you will
need to use Color Hexes. Click here for the full color chart. How about we put in one
of
those colors now? Try this color as an example. I would tell you what color it is,
but I have no idea what is it called. :-) Go ahead and replace the RED with CC3366. Now
your code should look like this:
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
<P ALIGN=CENTER>
<FONT COLOR="CC3366">
My First Page
</FONT>
</H1>
</BODY>
</HTML>
The page is looking better, but it isn't very descriptive. Now we are just going to
insert a couple of paragraphs of text so that people can learn a little more about this
page. To do this we are going to use the <P> command. This will separate your
paragraphs. Also, note that after the title text there will be another new command. The
<BR> command. This puts breaks in the lines. The more you use, the more lines
separating your text. Note that neither the <P> or the <BR> needs to be closed
off.
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>
<P ALIGN=CENTER><FONT COLOR="CC3366">My First Page</FONT><BR><BR>
</H1>
<P>
This page was created so that I could learn HTML.
By the end of this tutorial I should have the basics
of HTML down so that I can begin creating nice
looking web pages.
<P>
Right now I am trying out a new command that
creates paragraphs. This keeps my sentences from
running together and looking confusing to the reader.
This new command, along with the ALIGN command, can
help me position the text wherever I want it.
</BODY>
</HTML>
Alright! Now you have the power to put that text wherever you want!
But now let's go learn to do a little more with that text. Time to make lists with
bullets and numbers.
Upload
