Tutorial #1:
The Basics of HTML

Other tutorials
The Basics

If you want to construct a web site from scratch, but you don't know what to do, then you've come to the right place! Sure, you can use FrontPage Express or Word, but if you want to make truly awesome sites, keep reading!


HTML looks weird when you see it, but with a little explanation, it will seem very easy.
The best tool for constructing web pages is Notepad. Other programs can be used, but Notepad is the simplest. Just make sure you read the not about saving a little later on.
It's okay to copy and paste these HTML scripts, but put a link on your site so others can use the following. It'll also get some people coming here. Thanks!
The first thing that you need to learn are some of the basic tags. Have a look...

<HTML>
<HEAD>
<TITLE>An HTML template</TITLE>

</HEAD>
<BODY>

The main stuff on your page goes here

</BODY>
</FONT>
</HTML>


So, what does all of this mean, anyway?

The first tag is <HTML>. That tells the browser, "Okay, we have an HTML script coming in." The next tag is <HEAD>. This is the stuff that isn't on the actual page. Included in it is the title and some JavaScripts. The text written after the <TITLE> tag is what appears in the upper left-hand corner of your web browser. The </TITLE> tag "turns off" the TITLE tag. If you didn't do this, everything you type will appear in the title. The </HEAD> tag essentially does the same thing. The <BODY> tag is important. It marks the beginnning of where you will actually put the main content of the web page. There are things that can go in this tag, some of which will be specified a little later. The </BODY> tag turns off the body. The </FONT> tag turns off whatever fonts you might have going, and the </HTML> tag turns off the whole thing. This will get you off and running on your first HTML document!

A little note about saving...

To save a document in Notepad, go to File, and click Save As. Before you save your site wherever you want to, do these first.

  • Where it says Text Documents (*.txt) near the bottom, click the arrow and change it to All Files (*.*).
  • Go to the folder that you want to save your file in.
  • After typing in your filename, make sure you type .html after it.

If you don't follow these steps, then your web site will be saved as a text document, and it won't work.


So what's next, Brendan?

The next thing that is essential in a good web page is working with backgrounds and other simple effects.


The following shows you how to change your background color.

<body bgcolor="black">

* One small note about writing in tags: In HTML, the tags aren't case-sensitive, so it doesn't matter whether or not they are capitalized.

Okay, that's done with. Now, back to the tag. The bgcolor part goes in the body tag. It isn't seperate, as some might think. the =" " part is typical in HTML scripting. Inside of it, I put the color "black". You can put some of the more common colors in here. If you want to put a weird or uncommon color names in, you'd have to use the hexadecimal system. What is it? I'm not exactly sure, so I don't use it. It may look something like #00FFF5.

The following shows you how to insert an image into your background.

<body background="somepicture.gif">

The 'background' part, like bgcolor, is a part of the body tag. You can use a JPEG (.jpg) or a GIF (.gif) file for this. You can learn more about this in the images section. The image that you put in must be in the same folder as the web page, or you'll just get a white background. There is a way around it, but don't worry about it.


What else can I do?

There are some effects that are really simple, but they are essential to a good web page.

<hr> This adds a line.
<br> This stands for BReak and basically it is like pressing the return or enter key.
<p> This stands for Paragraph and it is like pressing the Enter key twice.


This will get you started. Go straightaway to the text lesson to learn how to put a little spice on your site.