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.
</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.
IMPORTANT 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 
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.
The most common formats for images on the web are gif (Graphics Interchange Format) and jpeg (Joint Photographic Experts Group).Another popular format is png (Portable Network Graphic). The bolded text are the file extensions. (And there are more, as you can see on this W3 Schools page.) 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.
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.
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.
Links: Basics
The tags that are used to insert a hypertext link in your text, like most HTML tags, come in pairs.
In the first part of the tag, you type the target, where the browser will take your users when they click on the anchor point in your text. The anchor is the section of text (or the image) that comes between the pair of link tags, and is the content that is often blue and underlined, at least in older HTML documents.
Link construction is something of an art, although it does require the science of these precisely arranged tags to work properly. Choosing where to anchor your links, how many links to include (you begin to see possibilities for them everywhere once you start this), and how to describe the destination files to your readers, are some of the finer points of this new type of writing.
Notice the way links are made on web pages that you particularly like and try to see why they are appealing, satisfying or effective—then incorporate those techniques into your own hypertextual writing.
Links: Tags
The first part of the link tag is <a href="a destination file"> and the closing tag is </a>. "href" means "hypertext reference."
For example, to link from this anchor point to a file called "target," I would type the following:
For example, to link from <a href="target.htm">this anchor point</a> to a file called "target".....
The dummy link in the phrase above is how you link to another file in the same directory as the HTML file you're writing.
If your destination file is a web page on the internet, you must preface the filename with http://, or a variant (such as https:// ). This stands for "hypertext protocol" and it goes inside the quotes after <a href=.
For instance, to link to the Astros home page here, I typed the following (this is a real link, by the way):
...to link to the <a href="http://www.astros.com">Astros home page</a>here, I typed...
Don't forget those quote marks! whether the link is to a web page or a file.
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 properly |
|
Link does not work |
|
Text is gibberish in browser |
|
Paragraphs run together |
|
HTML coding is displayed in browser |
|
"Broadcasting" your content
Making 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
I 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 
to 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 download 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:
