Learn: Site Creation Tutorial

Home

Learn: Site Creation Tutorial - Part 2

Now, it's time to add some text! This is very simple. Remember that spot between the <BODY> and </BODY> tags where we left a line blank? Just type your text in there:

<HTML>
<HEAD>
<TITLE>My First Homepage</TITLE>
</HEAD>
<BODY>
This is my first Homepage. Bla Bla Bla
</BODY>
</HTML>

If we save this file, and view it in a browser, it will look like this:

htut1.gif (7841 Bytes)

(While we're talking about saving files, HTML files are normally saved with a file extension of either .htm or .html, which you've probably noticed if you've been in the internet for long)

This is a little bit boring. We need some changes! First, let's make some bigger text, so that everybody can read it! To do this we use another tag: <H1> (H for Headline!) makes a headline out of normal text. There are six different headline tags, <H1> through <H6>. H1 gives the largest text and H6 gives the smallest.

<HTML> <HEAD> <TITLE>My First Homepage</TITLE> </HEAD> <BODY> <H1>This is my first Homepage</H1> </BODY> </HTML>

</H1> closes the headline. We don't want to make all our text huge.

Now, things look much more interesting:

htut2.gif (8482 Byte)

Now, we want to add some more text. Just add it under the headline:

<HTML> <HEAD> <TITLE>My first Homepage</TITLE> </HEAD> <BODY> <H1>This is my first Homepage</H1> Hi, I'm Kevin, and I just started HTML programming, my hobbies are: HTML programming, chasing burglars, etc... </BODY> </HTML>

Now, it looks like this:

htut3.gif (9639 Byte)

Now we want to add a picture. There is a tag which makes this very easy: <IMG>. We have to give this tag an "attribute," which is a bit of information inside the tag itself, telling it where the image is stored.

<IMG SRC="filename.jpg">

    <HTML>
    <HEAD>
    <TITLE>My first Homepage</TITLE>
    </HEAD>
    <BODY>
    <H1>This is my first Homepage</H1>
    Hi, I'm Kevin, and I just started HTML programming,
    my hobbies are: HTML programming, chasing burglars, etc...
    <IMG SRC="mypicture.jpg">
    </BODY>
    </HTML>

Now, our page would look something like this:

htut4.gif (11388 Byte)

(We've substituted a blue picture for Kevin's picture, as we don't have one of him readily available.)

Previous Next