A Very Basic Guide to HTML

The Very Basic Tags

The essential tags for any HTML document come at the beginning and at the end of the text you want to display.

<html>
<body>

Your content here.

</body>
</html>

And that's all there is to it!

The first tag <html> identifies the text which will follow as an HTML-formatted document. The <body> tag simply alerts the browser that the following text makes up the body of the document, what it is to display. The tags at the bottom of the document—</body> and </html>—tell the browser first that the body of the document is finished, and then that the document as a whole is finished.


HTML codeIMPORTANT NOTE on TAGS: You must enclose HTML tags, markers and other coding in brackets: < > Browsers read the characters inside the brackets as formatting commands. Without the brackets, it's just text to be displayed. Tags are not case sensitive, but current standards call for lower case.

Furthermore, most HTML tags must be placed in the text in the paired and nested configuration described above. Different browsers deal with breaches of this rule in different ways, but almost always your text will not display properly if the tags are not nested and paired.

Saving your HTML

If you are writing "raw" HTML code in a word processor, you need to be careful about saving it, if you want it to display in a browser.

First of all, Notepad, or another plain ASCII word processor, is the best way to write raw HTML code. Notepad won't add any extra tags to your text when you save it, and it automatically saves files in plain text format. All you have to remember is to give the filename a .htm or .html extension.

If you are writing in a more advanced word processor, be sure to save the file as a plain text file, with the proper extension.

Without a .htm or .html extension, browsers won't know it's an HTML file and it won't display, or at least not properly.


If you are using an HTML editor, it will automatically save the file in the format required. But you should check to be sure it's appending the correct extension, the one required by your server, to the filename. Usually there is a setting that you can adjust so that the editor will always save files with the extension you want.

Graphics: Basics

To insert a graphic in your text, you need to tell the browser to look for an image, then identify the graphic's filename.

The format for this bit of HTML coding is:

<img src="filename.jpg" />

img means you are inserting an image and src means the "source" of the image follows the equal sign. Current standards require that all tags be closed, however, so for non-paired tags you do this by putting a / inside the bracket. Don't forget the quotes around the image's filename.


An example:

To display this image here ball I typed:

To display this image here <img src="ball.gif" /> I typed:


That's all there is to inserting graphics, in theory. In practice, however, there are other issues to consider. The information elsewhere on this page gives an introduction to these complexities. And for more issues, more details, and more explanations, see the "Graphics" tab above.

Graphics: formats

Most browsers can only recognize certain graphic formats and, though this list is growing, it might not include the format used by your word processing program.

GIF graphic The most common formats for images on the web are gif (Graphics Interchange Format) and jpeg (Joint Photographic Experts Group). If you want to display an image that is not in one of these formats, you might want to convert it. There are free graphics conversion programs available on the web that will convert images to different formats and some will even allow simple editing of images. (Gimp is a widely-used free graphics program.) And, of course, full-function graphics programs such as Photoshop can convert images to different formats. 

The file extensions for these formats are: .gif and .jpg.

Spacing between paragraphs

HTML browsers do not recognize any spaces between letters other than the single space that occurs between words. For your document to display any additional spaces (an extra line between paragraphs, for example) a spacing marker must appear in the text.

To insert a blank line between paragraphs, simply type <p> at the start of the paragraph and </p> at the end. This will put blank lines around it.

If you want a line break at a specific point, without an extra blank line, use the line-break tag:

<br />

Since this tag is non-paired, don't forget to comply with current standards that require a / inside the bracket.

Headings tags

Headings are an easy way to organize text on your page and make it easier for readers to find what they need. They also break up larger blocks of text which are difficult to read comfortably on a computer screen.

Headings tags come in pairs and enclose the text which will be displayed as the heading.

For all practical purposes, there are 4 levels of headings, with <h1> being the largest and <h4> the smallest. Different browsers (depending on settings) will display these sizes differently, but the relative differences should always be noticeable.

In addition to making the text bigger and bolder, the heading tags also insert spacing before the heading text. So you do not need <p></p> tags around the heading to create space setting it off from your regular text.

Headings How-to

This is what an <h1> heading looks like

To display this, I typed:

<h1>This is what an <h1>* heading looks like</h1>

This, on the other hand, is an <h2> heading

<h2>This, on the other hand, is an <h2> heading</h2>

While this is an <h3> heading

<h3>While this is an <h3>heading</h3>

And this is an <h4> heading, which at many browser settings just looks like bolded text

<h4>And this is an <h4> heading, which at many browser settings just looks like bolded text. </h4>

But, the <h4> is automatically set set off from the surrounding, non-heading text without <p></p> tags.

*You can't actually type < or > as characters in your display text (unless you are using an HTML editor. Since these symbols are used for HTML commands you have to use a special character string if you want them to display. See the "Special Characters" tab above.

Finishing touches

Checking Your Page

Of course, before you send your page out into the wider world (see below) you want to be sure it looks the way you want. Fortunately, you don't have to put your page on a web server in order to see what it will look like in a browser. In most browsers you can open a file by typing <CTRL> O. Or, under the file menu, choose either "Open File," or "Open...". 

The page will display correctly if any images you have inserted are also on the disk, or in the same directory, as your text file. Links will work if the files you are linking to are also in the same directory, or are web pages identified by http// in the a href tag.

Troubleshooting

 Image does not display properlycheck box
  • Image file is not located in the same directory as the text or its directory isn't properly identified
  • You mis-typed the image's filename (check the extension, too)
  • You left out a " or mis-typed the tag
  • In some systems, filenames are case sensitive; be sure case is typed correctly
 Link does not workcheck box
  • If link is to a web page, you may have omitted "http://" from the src attribute
  • You may have mis-typed the destination name (is it .html or just .htm?)
  • You left out a ", mis-typed the tag or omitted the closing tag </a>
  •  In some instances, filenames are case sensitive; be sure case is typed correctly 
 Text is gibberish in browsercheck box
  • File not saved as ASCII, plain, or DOS text
Paragraphs run togethercheck box
  • You forgot to insert <p></p> tags
HTML coding is displayed in browsercheck box
  • You forgot to enclose your commands in brackets < >
  • You omitted one of the brac

"Broadcasting" your content

antennaMaking HTML documents/web pages is just the first step in communicating with the world via the Web. The pages (and associated image files) have to be stored on a server that can be located by other web browsers.There are many different options available these days for hosting your pages. For non-commercial content, in particular, there are literally hundreds of services

In Motion HostingI have been very happy with the folks at InMotion Hosting, where my personal pages are housed. They're not free but are very cheap and I've had good service from them and no problems. You can find more free or low-cost hosting services at FreeWebspace.net. They list more services than you will probably ever want to know about. Another source of information on webhosting is Webhostingstuff.com.

Once you have signed up with a hosting service, you should consult with the people operating the server for specifics on actually uploading files from your computer Core FTPto the host server. The easiest way to do this is with an FTP (File Transfer Protocol) program. (Some services, however, do not support FTP, especially at the cheapest subscription levelst; I would strongly suggest that you go with an FTP-supporting service, even if you have to pay a little more.)

You shouldn't have to pay for an FTP program, for non-commercial use. I have been very happy with a freeware program called CORE-FTP. You can find many other free- and share-ware programs at Tucows.

Graphics credits

Most of the cute images are from Realm Graphics, a nice free graphics site. I found the HTML code at Clker.com, another good one. And the Core FTP and Inmotion Hosting graphics come from their websites.

Last updated:

Back to kathyamen.net