HTML Lesson #1
"Webpage DEconstruction"
As HTML is a mark-up language, purists believe that you should only use an HTML document for your information and use CSS to style it. Most people don't adhere to this at all (which is why there are style tags such as <b> and <i> in the language).

Before you can do anything you first need to know what makes up a webpage. Without these essential things any webpage you create won't display correctly, if at all. These are basic HTML 4.01 tags. This tutorial won't cover XHTML or meta tags. First I'll list a very basic example webpage then I'll explain the function of each tag. You can copy this sample code into a blank plain text file then save it as example.html. Don't forget that the type selected is something resembling "all files".
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>My Webpage</title></head>

<body>
Welcome to my webpage!
</body>
</html>
If you view the source code of webpages you come across on the Internet (which is a good way to learn how to put things together though some people frown upon it) you will see many different kinds of formatting. It actually doesn't matter whether or not the text is capitalized or how much space you have between tags or sections. This is up to the designer. But less white space means a smaller file size and this means a lot to a person who runs a large website.

To properly close a tag, you must use a second tag along with a forwardslash (/) like in the example above. For tags that don't have a closing one (and I'll tell you which ones don't), place the forwardslash at the end of the tag (ex. <br />). This actually isn't required for HTML but it's a good coding practice if you want to graduate to XHTML.

You're allowed to nest tags but remember to close them when you're done using them. Font formatting tags such as <b> and <i> will visibly affect your webpage in a negative way if not closed correctly.
<!DOCTYPE...>: This defines the type of document you're writing. For now just use what's in the sample until I get into it in more depth later on.

<html>: This tells the browser that you're beginning an HTML document.

<head>: Defines the heading of the webpage. Additional information about your webpage goes here. Visitors won't be able to see it unless they view your source code.

<title>: Defines the title of the webpage. Without this the title bar at the top will be blank.

<body>: Defines the main section of the webpage. Place everything you want your visitors to see after this tag.


This page was last updated on: