An HTML file is simply a text file with an HTML filename extension like index.htm or mypage.html. A filename extension and is letters that appears after the rightmost period, in this case .htm or .html.

HTML files can be edited using any text editor such as Notepad which is included with Windows. It should not be edited using programs such as Word which add unwanted extra information into the file.

Besides the filename extension, the thing that makes this file special is what's inside.

The basic structure (or organization) of all HTML pages is:

<html>
  <head>
    <title>
      This appears in the web browsers title bar
    </title>
  </head>
  <body>
     This stuff appears in the browser itself.
  </body>
</html>

Copy and paste the above text into a text editor such as notepad and save it as “index.html”. When saving a file, take note of where you save it so you don’t have to look for it. You have just created an HTML file. Double click on it to see it in your web browser.

Congratulations! You have just created your first web page. The only difference between this web page and the ones everyone can access on the Internet is that this one is stored on your computer instead of a web server.

Let’s read through the above example one line at a time.

First, text between < and > is referred to as an HTML “tag”. Although tags can be in uppercase, lowercase has become the standard and is what I therefore recommend. You may as well start off by developing good habits right from the beginning.

Most tags open with a tag and close with the same tag proceeded by a slash but without the tag attribute(s). For example, <html> and </html>, <head> and </html>, <body> and </body>. Tags are always closed in the reverse order that they were opened. The indentations are optional but highly recommended to help in matching up opening and closing tags.

Here are some other types of tags you can use inside the <body></body> tags:

<ul>
 <li>This is a bulleted (Unordered List) List Item</li>
 <li>Unordered simply means it isn't numbered.</li>
</ul>

<ol>
 <li>This is a numbered (Ordered List) List Item</li>
 <li>This would be item #2 in the list</li>
</ol>

<img src="YourImage.jpg" height="200" width="200" />

This last line is how you put an image into your page. The most compatible types of images on the Internet are .JPG (for photos), .GIF (for images/drawings) and .PNG (for scalable graphics) files. It is interesting to note that the IMG tag is what is called a self-closing tag. There is no </img> tag. Instead, the slash is included at the end inside the tag as seen above. It is always recommended to include the height and width of an image. The specified number is the measurement in pixels.

<a href="mylink.html">Link to another web page on this site.</a>
<a href="http://www.othersite.com/mylink.html">Link to a web page on some other site.</a>

What's the difference? The second  starts with http:// and includes the domain name while the first doesn't. If the domain is not specified, the web browser will assume that the link is to a file on the current website.

Combining these two tags, we can even make images <a href="aboutchet.html"><img src="chet.jpg" height="200″ width="200″></a> clickable.

The <br /> is another one of those self-closing tags. It inserts a break into the line. Text that follows appears on the next line. It is used to move to the next line when you aren't quite finished your paragraph. Some people use it when they just want text to go on the next line without the extra space normally found between paragraphs.

The <p> tag is normally used around a paragraph. At the end of the paragraph, </p> is used to not only add a carriage return like the <br /> tag, but a blank line between the paragraphs.

<div> and <span> are tags that really don't do much on their own. Think of them as containers which you can configure using Cascading Style Sheets (CSS).</span></div>

<b><u><i>Are to turn on Bold, Underline and Italics.</i></u></b>

Note that more recent versions of HTML encourage you to use <strong> instead of <b> for bold and <emphasize> instead of <i> for italic. If you are just learning, you may as well apply the current standard syntax.

Blank empty lines or carriage returns (Enters) in your HTML

do not affect your web page as long as it isn’t in the middle of a word. Any number of blank lines stuck together end up appearing as a single space in your web page (yes, even if there are a thousand!). The only exception is if you are using a <pre></pre> set of tag to preformat text.

Multiple     spaces     between     words     also     result    in     a     single space between words in your web page.

<h1>TABLES – This is a heading.</h1>
<h2>This is a second level heading.</h2>

Headings go from <h1> to <h6> and should be used in the correct order and without skipping levels while going down. Don't just use <h3> because it has the size of font you want.

<table border=1>Start of table. Border=1 shows table borders, 0 hides them.
  <tr> start of a row
     <td>start of a column</td>
     <td>column #2</td>
     <td>Each set of TD tags creates another column.</td>
  </tr> end of a row. Repeat from the TR tags and everything in between to create another row.
</table>End of Table

Text outside the <td> tags in a table do not show up in the table. Use <th> instead of <td> tags for headings in a table.

<p><font size="+5" face="arial">Any Questions?</font></p>

By the way, indenting HTML lines normally has absolutely no effect on the results. Indentations are typically only used to make it easier to match up the opening and closing HTML tags and troubleshoot when you mess up. HTML tags must not weave between themselves. It is a important to always close tags in the reverse order that they were opened. Otherwise you could get unexpected results.

<b><u>This is a bad example.</b></u>
<b><u>This is a good example.</u></b>

Also, all HTML tags should be in lowercase, even if they will likely work (for now) in uppercase. In the end, it also makes your HTML code much easier to read.

And that concludes our course on Basic HTML course. While there are attributes you can add to tags as touched upon with the FONT, COLOR, SIZE, FACE and BORDER tags above, the above HTML actually makes up most web pages on the Internet. In fact, much of the formatting in HTML pages is actually controlled by Cascading Style Sheets with ID's and Classes, to which there is unfortunately no 5 minute tutorial.

Good luck!

Related Posts: