Men Of Diversion - www.menofdiversion.com

HOME
Photography
Humor
HTML Tutorial
HTML Tables
Potting Shed
MEMBERS ONLY

TC's Quick & Dirty HTML Tutorial

If you want to learn to make a web page, and you don't want to sit down and read a book or a lengthy tutorial, you have come to the right place. For the purposes of this tutorial, I am assuming you know how to use notepad or some other plain text editing program of choice, and that you know how to save and open files on your computer.

Web pages are written in hyper-text markup language (HTML). Coding html relies on "tags" surrounded by angle brackets (i.e. <HTML>). There are many tags with a variety of uses such as formatting your web page, adding images, linking to other web pages, and much more. Open your text editing program and paste in the following code: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> As you can see, an html page is made up of a head section and a body section. The body section will contain the visible page content. The html code found above contains the bare essential tags needed for making a web page. Now let's add two lines to the code above:

<HTML> <HEAD> <TITLE>My first webpage</TITLE> </HEAD> <BODY> This is my first webpage. I hope you like it. </BODY> </HTML> Go ahead and save this code in a folder on your computer and name it index.html. Next, open the file you just saved in your web browser. At the top of your browser, in the title bar, you should see your page title (My first webpage). You should also see the contents of the body section (This is my first webpage. I hope you like it.) on the page.

You have probably noticed that the html tags being used have a start tag (i.e. <TITLE>) and an ending tag (i.e. </TITLE>). For most tags, you must have an ending tag for every starting tag. Let's add some more code to the line in the BODY section to make bold and italic text:

This is my first webpage. I hope you like it. Save your file and reopen or refresh the file in your browser to display your changes. You can also make the text bold AND italic:

This is my first webpage. I hope you like it. Html tags must be properly nested. The code above is done correctly, but the code below would be incorrect:

This is my first webpage. I hope you like it. In this line, we start the bold tag first, and inside the bold tag we start the italic tag. Proper nesting means that since the italic tag was started inside the bold tag, it also must be ended inside the bold tag. We end the italic tag first, and then we end the bold tag.

Now change the code inside the body tag to this:

This is my first webpage. I hope you like it. View these changes in your browser. You may have been expecting to see a line break between the two lines, but you will see that both sentences are on the same line. To put a line break between them, use the following code:

This is my first webpage. I hope you like it. The BR tag is used to make a line break. Unlike the other tags we have used so far, it does not have an end tag. Another tag that does not have an end tag is the IMG tag. The IMG tag will place an image on your web page, but to display an image, you must have a separate image file. Right click on the image below and choose "Save Picture As...". Save the image as tree.jpg in the same folder you put your index.html file.

Now add this code to the BODY section of your html file:

<IMG SRC="tree.jpg" WIDTH="125" HEIGHT="83" BORDER="0"> Now you should see the image of the tree when you view your html file in your browser. The image tag makes use of tag "properties" to define the image source file (SRC), pixel WIDTH and HEIGHT of the image, and pixel width of the BORDER around the image. Tag properties should always be enclosed in double quotation marks. Feel free to change some of these property values and see what happens.

Finally, add this code to the body of your html file:

<A HREF="http://www.menofdiversion.com">Men Of Diversion</A> - a very cool website for men. This code uses the anchor (A) tag to link from one web page to another. The hypertext reference (HREF) property specifies the web address to point the browser to when you click on the link. You could also make another webpage and link to it like this:

<A HREF="mypix.html">My Pictures</A> In this case, if you make another html file, name it mypix.html, and put it in the same folder with your index.html file, this link will show the mypix.html page when you click the link text, My Pictures.

As advertised, this has been a very quick and dirty tutorial to help you make your first webpage without giving much explanation. If you are interested in reading more, I suggest doing a web search for html tutorials, or click here for many easy to understand and well written tutorials by a fellow named Boogie Jack. Booj starts with the basics and takes you much deeper into site design, text formatting, images, links, tables, using colors, web forms, lists, frames, and even javascript and cascading style sheets. His style of writing is conversational, humorous, and so much fun to read that it makes learning a pleasure rather than a chore.

Did you know that you can view the html source code of almost any web page? On your browser, click on the "View" menu and choose "Source". I think the best way to learn to make web pages is by looking at code others have written and then experimenting with the tags on your own page. If you are on a web page and some aspect of it looks interesting to you, view the source and learn the trick by example.

Following the syntax rules of html can get tricky, particularly as your web page gets more complex. When you don't follow the rules, your page can look different than expected and finding the problem can be frustrating. I highly recommend using an html validation program to check the syntax of your code. HTML Validator is an excellent validation utility and the LITE edition can be downloaded free by clicking here.

In order for others to view your web page, you have to upload your html code files and images to a web server. Often, your internet service provider (ISP) gives you space on their web server for your personal web pages. Check your ISPs web site or consult documentation provided by your ISP to find out how to publish your html pages on the internet. Don't let this step hamper your progress. You can make an entire website right on your own hard drive, and when you have figured out how to publish the site, it will be a simple matter of uploading the files from your hard drive to the web server.

Thanks for reading this tutorial. When your friends ask you how you learned to make a web page in 15 minutes, be sure and tell them that they can make web pages too by going to www.menofdiversion.com!

TC is one of the founders of Men of Diversion and a member of The Big Three. He is a professional web developer with experience in html, web design, graphic manipulation, and scripting technologies. If you have any questions or comments about this tutorial, feel free to contact TC by sending an email to commander@menofdiversion.com.