With this tutorial being the first of the HTML tutorials I will just go through the bare basics. As you go through the tutorials you will be able to do more and more HTML and should feel more comfortable in typing up a simple website.
The first thing you will need is a text editor. This can be notepad or even a program such as Dreamweaver or FrontPage. However, it would be best that you do not use a text program that automatically formats text. (Like Microsoft Word, or Corel WordPerfect, or the Mac equivalent.) For these tutorials I will just use Notepad.
In all HTML documents you must have tags. Tags are the first and most common parts of HTML. Tags always begin with a less than sign (<) and end with a greater than sign (>). Most tags will have an opening tag and a closing tag, as you will see shortly, while a few others consist of only one tag.
Some tags are required or at least highly recommended in all of your HTML documents. These tags are <html></html> and <body></body>. You should also have <head></head> and <title></title> in there as well. Simple right? Well, you have to set them up a certain way. Here is how they should be set up:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
The <html> tag must be the first and last tag in your HTML documents. This tells your web browser when the HTML coding begins and when it ends. The <head> tags typically come second with the <title> tags in between. The <body> tags come after the closing <head> tag. This brings me to another point. Closing tags will always have a forward slash (/) after the less than sign (<). While this is true for most cases, there are some cases where it is not. You will learn more about that later.
Essentially, everything that will appear your web page in a browser is going to be within the <body></body> tags. To get your first page up type the code above into your text editor. After you have done that type “My Web Page” between the <title> tags and put “Hello!” anywhere between the <body> tags. It should look something like this:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
Hello!
</body>
</html>
Now, save your text file. Make sure you save it with a .HTML extension otherwise your page will not come out correctly. Put it somewhere you can easily find. After saving open up your web browser and find the HTML file you just saved and open it in your browser. You should have something like this:
On the very top, on the header of your browser, you can see “My Web Page”. This is the title of your web page which is aptly put between the <title> tags. “Hello!” is printed in the viewing screen of your browser. Everything that appears in the viewing window of your browser must be between the <body> tags.
As you can see this website is pretty boring. All we have is black text on a white background. Let’s change the background color. On the inside of the <body> tag we are going to add an attribute. Attributes are used to help format everything that is within the tag the attribute is in. The first attribute we will be adding will change the background color. Since the <body> tags are what will be shown in the web browsers viewing window this is what the attribute will be put in. Also, when adding an attribute it must be within the opening tag. Here is an example:
<body bgcolor=”blue”>
This attribute will change the background color of everything between the <body> tags to blue. When defining an attribute you must have the = sign and quotes around the defining text. Without those your attribute will not take effect. Save your file and hit the refresh button in you browser. Your background should be blue now.
You can also put tags within tags. We have already done this with the <title> tags within the <head> tags. Let’s make “Hello!” bold. To do this all you have to do is put <b></b> tags around “Hello!”. Your whole file should look like this:
<html>
<head>
<title>My Web Page</title>
</head>
<body bgcolor="blue"><b>Hello!</b>
</body>
</html>
Save this file and refresh your browser again. “Hello!” should be bolded now. These are the bare basics of HTML editing. There are many tags and attributes that you can use to edit your web page, however not all tags can have attributes. Text formatting tags do not usually have attributes in them. We will go over text formatting in the next tutorial.
discuss this topic to forum
