HTML for Beginners

So you want to create a web site, but you don't know the first thing about HTML code? Well, rest assured, it isn't nearly as difficult as you think. This guide will help get you started, and teach you how to create a simple web page containing text, images, links to other web pages, and an email link. What you need for this tutorial is only a simple text editor program like Notepad or other programs that you use for writing text on your machine. If you're using Windows 95/98, just go to:

Start > Programs > Accessories > Notepad

First, type the first line of our web page:
<HTML>

then type this:
</HTML>

You can type code in capital or lower case letters. It doesn't matter. I typed them in capital to make it easy to read. Nothing has happened yet; we have just told the browsers (Netscape, Internet Explorer, and etc.) that this is a HTML document. The first <HTML> is to tell the browser that "Here's the beginning of HTML section." </HTML> tells the browsers that "Here's the end of HTML section." Inside these two tags is where you will put the contents of your web page.

Notice that we have <HTML> and </HTML>. This is how we open and close HTML tags. The closing tag is always in </.....> format. In most cases, you will have to close every tag that you open.

Next, add a HEAD section to your web page.

<HTML>
<HEAD>
<TITLE>My first page</TITLE>
</HEAD>
</HTML>

<TITLE> tells the browsers that the title of our web page is "My first page." This sentence will appear at the top of browser window. Where? Look at the top of this window (the one that you're reading) and you will see "Beginner's Guide to HTML"

OK. Now, let's put in the first word that the browser will display.

<HTML>
<HEAD>
<TITLE>My first page</TITLE>
</HEAD>
<BODY>
<H1>HELLO</H1>
</BODY>
</HTML>

We put <BODY> to tell the browser that this is the starting point of the body of our document. <H1> refers to header 1, which is the biggest text size (see below.) You can try from <H1> to <H6>. Different numbers will yield different sizes.

Here is an example:

h1

h3

h5

Now let's get back to our document. It now looks like this in a browser.

HELLO

Let's save this web page and view it in your browser. Save the page using 'save as' and name it whatever you like. Let's name it "mypage.htm" Please remember the location of your file. You may create a new directory for it or just simply save it in drive C. Open your web browser (Netscape or Internet Explorer) and try to open the file that you just save. Click on 'File' -> 'Open' and type in c:\mypage.htm or the path to your file.

You should see a big "Hello" in your browser.

Now, we'll add a sentence and align it.

<HTML>
<HEAD>
<TITLE>My first page</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">HELLO</H1>
<P ALIGN="LEFT">This text is aligned "left"
<P ALIGN="RIGHT">This text is aligned "right"
</BODY>
</HTML>

<P> refers to paragraph. You don't need the closing tag for <P>, but some people put the closing tag as a reminder. <P> is the way to tell the browser to begin a new line. We have put the word ALIGN after <P>. It's what called an attribute, an optional indicator. Some attributes need quotation marks, but some don't. An easy rule to remember is to put the quotation marks in every attribute.

Here is how our page looks now:

HELLO

This text is aligned "left"

This text is aligned "right"

Next, let's add an image on our web page. You can insert an image by using this tag <IMG SRC="....the name and the location of your image ...."> Please see the example below.

HELLO

This text is aligned "left"

This text is aligned "right"

<IMG SRC="tipsbanner.gif"> tells the location of your graphic file. If it isn't in the same directory of your web document (the one that we are working on), you have to specify it differently. For example, calling it from your hard drive <IMG SRC="c:\your_image_directory\image.gif"> calling it from the location on the WWW <IMG SRC="http://www.your_name.com/image.gif">

You might have a question by now. How can I get an image? There are many ways: use a scanned image from a scanner, download free clipart from other web sites, create it yourself, etc. To use scanned images, you have to buy a scanner. Then, you can scan your photographs. To download a free clipart, visit one of the web's hundreds of free clip art sites. As I said earlier, we will create a web page that has a link to another place, and a visitor can send an email to you. We can make these possible by using an anchor tag <A>. See the example below.

<HTML>
<HEAD>
<TITLE>My first page</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">HELLO</H1>
<P ALIGN="LEFT">This text is aligned left.
<P ALIGN="RIGHT">This text is aligned right.
<P ALIGN="CENTER">
<A HREF="https://www.hostsearch.com">
<IMG SRC="images/logo.gif"></A>
<P ALIGN="LEFT">
<A HREF="https://www.hostsearch.com">
Click here to go to HostSearch.com</A>
<P ALIGN="LEFT">
<A HREF="mailto:your@email.address">
email me</A>
</BODY>
</HTML>

You page now will look like this:

HELLO

This text is aligned "left"

This text is aligned "right"

Click here to go to HostSearch.com

email me

This <A HREF="https://www.hostsearch.com">........ </A> tells the browsers to link words or images inside to the direction stated in HREF=" ... " You can use it for email by using mailto:your@email.address (see example above.)

Now we have finished the tutorial. You must save this file as an .htm or .html file. Simply click "Save As" and name it whatever you want, ending with .htm or .html. For example, mypage.htm. You can now test it from your web browsers. Open your Netscape or Internet Explorer, select "file",select "open", click "browse" or "choose file" to select mypage.htm for viewing.

GO TO TOP