HTML Tutorial

BASICS

When you open a page on the web, you’re actually downloading a page written in HTML (hypertext markup language). Your browser (Microsoft Internet Explorer, Netscape, etc.) then interprets the HTML to display the page.

HTML is written using a text editor (Notepad, Wordpad, etc.). Several specialized text editors exist for writing the HTML code. In addition, Microsoft Word can save a page in HTML format, automatically generating the HTML code. You may have less flexibility with making such a page appear the way you want, however.

The HTML page is saved in text format with either a .htm or .html file extension.

TAGS

The HTML page consists of text and tags. The text is what appears on the screen when you view the page with your web browser. The tags make the text appear the way you want it to.

All tags are entered in brackets like this <command>. Sometimes, there will be an ending tag that looks like this </command>.

All HTML pages should begin with this tag: <html>. The final tag on the page should be </html>.

Tags are not case sensitive. You can use either <HTML> or <html>. However, file names are case sensitive.

Here’s what a simple HTML page might look like.

<html>
<head>
<title>My Page</title>
</head>
<body leftmargin=10 topmargin=10 marginwidth=10 marginheight=10 bgcolor="white">
My text
</body>
</html>

HEAD TAG

The <head> tag should be the second tag entry. The <head> and </head> tags surround the title tags. In addition to the title, the heading can contain style markings, markings to aid search engines, and javascript. More on these later. The heading does not contain any information that appears on the screen when the page is loaded.

TITLE TAG

The title tags are optional. Whatever text you put between <title> and </title> will appear as the title on the top bar of your browser. Most search engines will also carry this title as the title of your page.

BODY TAG

The <body> and </body> tags surround all of the information that displays on the screen. The <body> tag contains page formatting information such as margin size (in pixels) and background color. A background image can also be used. This would be entered as

<body leftmargin=10 topmargin=10 marginwidth=10 marginheight=10 background="filename">

where the filename would be a .jpg or a .gif file. The filepath must be specified relative to the page that’s loaded -- see the part on image files. The order of the commands within the <body> tag is not important.