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; that is, 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 all 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. 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 "Graphics" tab above goes into these complexities, at least at a basic level, and will help you with the display of images.

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).***PNG?*** 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.


Grabbing Graphics

It's easy to download images from the web, although it's not always an ethical thing to do. To copy an image from the web, simply right click when the cursor is on the graphic, and choose "Save image" or "Copy image," depending on your browser.

Be sure when you save this "borrowed" image that you keep the extension of the filename (probably .gif or.jpg) the same, even if you rename the file. It's also nice to give credit to the source of the graphic.

star

To avoid copyright issues, or other breaches of ethics, copy images from a clip art web site, Creative Commons site, or some other site where content is freely available, rather than from commercial sites.

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 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 and after 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, just as with the other headings 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 brackets

"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.

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 levels; 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 Cnet's dowload site.

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