HTML Basics Part I

HTML or Hypertext Markup Language, is the language that you use to construct pages for the World Wide Web. HTML is very basic and can be read by any Web browser on a variety of different operating systems. Because HTML is so basic in nature it is very easy to learn. You can design your own Web page very easily and quickly. So if you don’t have a Web page yet, here is a basic guide to help you get started.

The first thing you need to do is decide which text program you’re going to use to make your page. All Web pages need to be in ASCII or plain text format in order to be read by a Web browser. This is easy, all this means is that you have to use a very simple word processor like Simple Text, or a program designed specifically for making Web pages. Some more powerful word processors also have the option to let you save a page in ASCII format instead of their own format. I believe the easiest way to make a page for the Web is to use an HTML editor like Web Weaver 2.5.3. You can find this excellent program on the Web at http://www.northnet.org/best/. Web Weaver is shareware and you can try it and see if you like it before you have to pay anything. Web Weaver not only saves files in ASCII format but has palettes that let you write HTML tags with just one click. This takes away the tedious typing that you would normally have to do to insert HTML tags. You can actually learn a lot from using Web Weaver.

What are HTML tags? Well, let’s take a look at what makes up a Web page. Every Web page has to have certain <tags> to tell the browser what to display. Some tags tell the browser to make a word bold. Others tell the browser to
Center the words on the page.

HTML tags tell the browser everything about your page. Once you learn what the different tags do you can easily put your page together.

The first tags that are needed are the tags that tell the browser that this is a Web page and they are <html> and </html> The tag with the / before it is called the closing tag because it tells the browser when to stop that particular command, <html> must be the first tag on your page and </html> must be the last.

Inside of these two tags you must include a set of header tags. After the first <html> tag you need a <head> tag followed by an end </head> tag. like this:
<html>

</html>

Now there are a few things that go in between the first and last head tags. This is where the title goes. So, in between the two head tags put a beginning and ending title tag, like this: <head> <title> </title> </head> See how easy that is. Now type the title of your page inside the two title tags, like this:
<title> Here is where the title goes</title> .
Your page should now look like this:

<html>

<head> <title> Here is where the Title goes </title> </head>

</html>

Now just a little bit more and you will have a basic Web page. The next step is to make the tags for the body of the page. This is where everything else goes. After the ending head tag </head> you can start the body. The <body> tags have a start and an end tag as well and go in between the ending head and the ending html tag.

Now here is some advice to make this much easier. After each end tag hit return two times. So after the </head> tag you return twice before the beginning body tag. You see, Web browsers only see one white space. In other words, if you type a sentence like this: Here is a short sentence. It would come out like this : Here is a short sentence. So instead of having all your text all smashed together space each line apart like this:

<html>

<head>

<title> Here is where your title goes </title>

</head>

<body>

Now here is where the rest of your content goes. Everything from images to text, whatever you want the world to see on your page will go here between the body tags. That’s really all there is to the basic web page. There is more to know about style and making your page look just right, but these are the building blocks you need to start with, so it’s best to learn them well.

</body>

</html>

Now take a look at what you have so far. This is the base for any Web page. When you have this basic page constructed on your computer, the next step is to see what it looks like on the Web. First you must save the file and name it. The name must end with .html. You should name the first page in your site as home.html because many Web servers require it, some may require it to be index.html but your network administrator ( the guy who runs your Internet service) will tell you . Now put this file into a folder and name the folder “Web folder”. If you plan to have more than one page on your site you must put them all in this same “Web folder”.

The next step is to launch your Web browser OFF line. Your browser will probably give you an alert message telling you that it can’t make an Internet connection. Just go to the File menu and use the open file command, not open location, open file. You will be presented with a dialog box asking you where the file you want to open is, well, just navigate to your Web folder and tell it to open home.html or whatever you named it.html. Now you can see what this page looks like on the Web. If you want to make any changes just make the change to your text document and then save it. Then to see what the change looks like just hit the Reload button on the browser. That’s it.

Well so far you have a real basic Web page, but you may want to spice it up a little and add some graphics. Maybe you would like to put a heading at the top and center it. These are easy to accomplish and I’ll go over a few. Let’s start with the heading at the top. Let’s put Top of the Page on the top and centered. Here is what you do. First type in Top of the page right under the first body tag, like this:

<body>

Top of the Page

Now, let’s make it a heading. Heading tags look like this:

<H3>Top of the Page</H3> This will now be bold because all headings are bold and because of the 3, the font will be fairly large. If we had put a 1 instead of the 3, the font would have been even larger. The lower the heading number the bigger the font.

Now let’s center the heading on top of the page. Let’s put the center tags around this whole thing, like this:

Anything that is inside the center tags will be centered and because we added the heading tags it will also be bold and large. The center tags will work with some but not all Web browsers so if the center tags did not do anything for you then you may have a limited browser. America Online’s browser for example does not center anything. It’s ok to leave the center tags in place even if your browser does not support them because it won’t hurt anything, they will just be overlooked by the non supporting browsers.

If you want to include graphics or drawings you will need to save them in gif format. You can do this easily with a program called Graphic Converter. You can find Graphic Converter on the Web at http://hyperarchive.lcs.mit.edu/HyperArchive/Archive/gst/grf/graphic-converter-231.hqx.
Once you save your image in the gif format, its name must have the .gif at the end of it. Then you put this image,lets call it “image.gif” in the Web folder with everything else. Now you can easily put it on your page by using the image tag like this:
<img src=”image.gif”> as long as the image.gif is in the same folder as home.html then it will be displayed right where the img tag is. Not too hard, is it? If you try this and you have any problems, you probably left out one very small part of a tag. Go back and look again making sure that all the tags have the proper marks. A great way to see how this works is to find a page on the Internet that you like and then choose View Source from the menu bar. This will download and open a copy of the HTML code for that page. Then you can see how the HTML looks and at the same time, see the results.

Practice this until you get a good feel for it and try to move the different tags around until it looks right. I hope this gives you a start on getting your page on the Web. Next month I’ll get a little more in depth, go over some more text tricks and get into some background colors and text color.

Ev_

Leave a Reply Cancel reply