![[gasket]](gasket.gif){kind=small}
Quick and Painless
HTML
by Kathy Amen
Basic Tags | Spacing
Getting Fancier: Headings |
Graphics | Links
Saving, Testing & Troubleshooting Pages
Putting It All Together (and
up)
Important note on HTML standards
[If you are looking for more advanced information, Intermediate HTML is now available]
The following is designed to be a self-study tutorial. At my in-person workshops I refer to this page occasionally but do a lot of work at the board. The following pages approximate some of my in-class scribblings, giving a different visualization of the basic HTML coding process: Scribble #1 | Scribble #2 | Scribble #3 | Scribble #4
You can quickly and easily create simple HTML (Hypertext Markup Language) documents that can be viewed on the web by any browser. These simple documents can be constructed with a word processor; there are no special characters required. You can use an HTML editor but it is still useful to understand the basics of HTML coding--if only to help you to learn new techniques from existing web pages. (For some information (and opinions) on editors, see this page.)
To boil HTML down to its bare essentials, there are only three things that you have to do to create a browser-readable page (other than write your text, that is!) :
These are some other features that are nice to know about, to be covered below:
The essential tags for any HTML document come at the beginning and at the end of the text you want to display. You can copy this example and use it as a template for your pages if you'd like:
<HTML>
<BODY>
Your first paragraph here.
<P>
Your second paragraph here.
</BODY>
</HTML>
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. 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.
NOTE: You must enclose all 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 putting the tags in CAPS makes your coding easier to "read." 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.
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> where you want the blank line to appear. Unlike the tags discussed above, the <P> marker does not need to be paired with a </P> although.you can use </P> if you want to at the end of paragraphs.
If you want a line break at a specific point, without an extra blank line, use the marker <BR>. It is also a non-paired tag.
Here are three ways to spice up your HTML document, while still keeping it basically very simple and easy to construct with a word processor:
Headings tags are similar to the <HTML> and <BODY> tags described above, in that they 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.
To display this, I typed:
<H1>This is what an <H1> heading looks like</H1>
In addition to making the text bigger and bolder, the heading tags also insert spacing before and after the heading. So you do not need <P> markers after the heading to create space before your regular text begins.
If you want a centered heading, as at the top of your page, just nest the heading text and tags between paired <CENTER></CENTER> tags. Typing this:
<CENTER><H1>Title</H1></CENTER>
Gives you this:
Putting a title on your page in this way, however, does not cause a title to be displayed at the top of the window or in your users' history ("Go") lists or bookmark files. In order to do this, you need to place a pair of <TITLE></TITLE> tags in the heading section (above the body) of your document. Details are available in the Identification section of my Intermediate HTML guide.
The tags that are used to insert a hypertext link in your text come in pairs. In the first part of the tag, you type the destination, or 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 usually blue and underlined in HTML documents.
The first part of the link tag is <A href="destination"> and the closing tag is </A>. "Href" means "hypertext reference." For example, to link from this anchor point to a file called "target," I typed the following:
For example, to link from <A href="target.htm">this anchor point</A> to a file called "target".....
The link in the phrase above is to another file in my directory. If your destination file is a web page on the internet, you must preface the filename with http://. 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:
to link to the <A href="http://www.astros.com">Astros home page</A> here, ....
Don't forget those quote marks whether the link is to a web page or a file.
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.
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.ext">
IMG means you are inserting an image; src means the "source" of the image follows the equal sign. The IMG tag stands alone, without a paired partner. Don't forget the quotes around the image's filename. For example,
To display this image here ![[bookstack]](bookstac.gif)
I typed:
To display this image here <IMG src="bookstac.gif"> I ...
Here are some other items to note about graphics:
GENERAL GRAPHICS TIPS Graphics can present all kinds of problems to web page authors, but if you keep your use of graphics to a minimum and don't try any unusual positioning of the images, you can get by with these simple instructions. Often the difficulties with graphics come not from the HTML coding, which as you see is very simple and straightforward, but from the location of your image files. If you keep your text and image files in the same directory, however, this won't be a problem. Be sure to notice that your HTML document doesn't really include the images you want it to display in the browser. The IMG tag simply identifies the image file, which is separate from the HTML document file. In order to display both your HTML-formatted text and the images you want to accompany it, all these files must be present and correctly named.
|
GRAPHICS FORMATS
Most browsers can only recognize certain graphic formats and, unfortunately, this short list does not include the formats used by most word processing programs. The major 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'll need 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. And, of course, full-function graphics programs such as Photoshop can convert images to different formats. If you download an image from the web, it will already be in a browser-compatible format. Just be sure when you save this "borrowed" image that you keep the extension of the filename (.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 copy an image from the web, simply right click your mouse button when the cursore is pointing on the graphic, and choose "Save graphic." |
There is more information on graphics in the Illustration section of my Intermediate HTML Guide.
Be sure to save your file as an ASCII, or DOS TEXT file. If you save it in a word processing format, it will display with a lot of odd characters at best, and as gibberish at worst. Also, give the file the extension .htm or .html. This lets the browser know that it is an HTML file.
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 Netscape 4, choose Open Page under the View menu and type in your local filename. (In Explorer, choose Source under View and in earlier versions of Netscape, look at Open File under the File menu.) It 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 on the disk, or are WWW pages.
| Image does not display properly | -Image file is not located in the same directory as the text -You mis-typed the image's filename (check extension, too) -You left out a " or mis-typed the tag <IMG src=> -In some systems, filenames are case sensitive; be sure case is typed correctly |
| Link does not work | -If link is to a web page, you may have omitted "http://" from the reference
line -You may have mis-typed the destination name (is it .html or just .htm?) -You left out a ", mis-typed the tag <A href=> or omitted the </A> closing tag -In some systems, filenames are case sensitive; be sure case is typed correctly |
| Text is gibberish in browser | File not saved as ASCII or DOS text |
| Paragraphs run together | You forgot to insert <P> spacing markers |
| HTML coding is displayed in browser | You forgot to enclose your commands in brackets < > , or you omitted one of the brackets |
Here is a sample page that incorporates all of the features you've learned about. (Frames required)
As a way to learn more HTML tags, to see different ways of displaying information, and to imitate techniques used by effective web page authors, you can see the HTML coding for any web page by choosing the Page Source (or Document Source in earlier versions) under the View option in Netscape Navigator. (In Explorer, choose Source under View.) At first, it's best only to look at source code for simple pages; if you look at the code for a page like this one (the Weather Channel), for example, you might be too confused/scared/intimidated ever to try HTML-ing again!
There are many different options available these days for housing your pages. There are the various university servers, of course, for St. Mary's-related content. But there are many services which will host other pages that you might want to share with the world. For non-commercial content there are literally hundreds of services. Some of the major ones are linked in this guide to free services prepared by Librarian Diane Duesterhoeft. If you want to do a comprehensive search of all the options, FreeWebspace.net lists 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 to the host server. The best way to do this is with an FTP (FIle Transfer Protocol) program. (Some services, however, do not support FTP; I would strongly suggest that you go with an FTP-supporting service.) I have been very happy with a freeware program (free to non-commercial users) called WS-FTP LE. The homepage for the company which offers this software is www.ipswitch.com/Products/WS_FTP/index.html. You can find many other free- and share-ware programs at Tucows (www.tucows.com).
Email me at kamen@stmarytx.edu
if you have any questions about HTML. I will try to answer them or refer
you to a source for more information.
IMPORTANT NOTE: All of the instructions in this and my other tutorials apply to authoring for the Web at present (early 2001) and will continue to be useful into the future. There are some new standards on the horizon, however, that will need to be applied when writing for later browser editions and for some specialized devices. I will gradually be re-writing these tutorials to conform with the new standards, but until that's completed, I urge you to look at this explanation of the differences between HTML (the heretofore standard) and XHTML (the new standard), provided by the W3Schools site.
Graphics credits for these pages: Sierpinski gaskets by the title and the nice julia set graphic in my graphics tips box are from the Fractal Icon Archive (which unfortunately seems no longer to exist). Pretty divider bars and palm trees are from Ender's Realm. I made the target graphic myself (can't you tell) and I "borrowed" the stack of books from Margaret Sylvia's pages.
last updated
