It is easiest to change your text into a web page if you do all of your proofreading, spellchecking, editing of the content before beginning to add the tags (or HTML codes). When you have finished with the content in your regular word processor, go to "Save As..." and select "Text" or "ASCII". Before saving, rename your file with an appropriate file name with the suffix html added: "filename.html". The next step is to open this document up in a simple text editor. Examples of programs to use on the Macintosh are SimpleText, BBedit; on IBM compatibles, use WordPad.
Once you begin the process of marking up, or placing the tags (HTML codes) into your document, the typical process is to put some of the tags in using your text editor, save it to your hard drive, then use your favorite web browser to open the file to see how the tags have affected your text. After viewing it in the web browser window, you return to the text editor, and put some more HTML tags in. Then save it and view the changes by reloading the file off the hard drive. And so on, and so forth, back and forth editor, browser, editor, browser until you are satisfied. The biggest dangers to warn against?
Every HTML document should contain certain standard HTML tags. Each document consists of head and body text. The head contains the title, and the body contains the actual text that is made up of paragraphs, lists, and other elements. Browsers expect specific information because they are programmed according to HTML and SGML specifications.
Required elements are shown in this sample bare-bones document:
The required elements are the
tags (and their corresponding end tags). Some browsers will format your
HTML file correctly even if these tags are not included. But some browsers
won't!
This page shows a simple HTML 2.0 document broken down into the source code on the left and the results (more or less) on the right.
When this column is the code... |
You will see this column... |
|
---|---|---|
<HTML> |
||
<HEAD> |
||
<TITLE>Web Authoring</TITLE> |
|
|
</HEAD> |
||
<BODY> |
||
<H1>I like learning!</H1> |
I like learning! |
|
<h2>With text...</h2> |
With text... |
|
<h4>...and other things</h4> |
...and other things |
|
<HR> <HR SIZE=8> |
|
|
I can <em>emphasize</em> things, and I can make things <strong>stronger</strong>.<p> |
I can emphasize things, and I can make things stronger. | |
Extra spacing doesn't matter.<p> |
Extra spacing doesn't matter. | |
An inline image <IMG SRC= "gopher.gif" ALIGN=BOTTOM> can be inserted wherever I want.<P> |
An inline image ![]() |
|
The alignment of the image <IMG SRC="gopher.gif" ALIGN=TOP> can be adjusted, too.<P> |
The alignment of the image![]() |
|
<DL> <DT>Definition lists: <DD>Can be useful. </DL> |
|
|
<OL> <LI>Ordered lists <LI>Number things <LI>As you go, automatically. </OL> |
|
|
Lists can be "nested" for greater effect:<P> <MENU> <LI>Many Topics Have Subtopics <UL> <LI>Like this one <LI>(it has two) </UL> <LI>But Some Topics Stand Alone </MENU> |
Lists can be "nested" for greater effect:
|
|
In some cases, a line break is better than a paragraph break:<P> Mr. U. R. Linebreaker<BR> 1 Main St., Davis, CA 95616<P> |
In some cases, a line break is better than a paragraph break:
Mr. U. R. Linebreaker |
|
Hypertext links are useful, as in:<BR> You can <A HREF="http://little.fishnet.net/~gini/cool/">get free graphics for your webpage in</A> now.<P> |
Hypertext links are useful, as in: You can get free graphics for your webpage now! |
|
Local links are useful, too:<BR> You can <A HREF="#here">go to the next sentence</A> now.<P> |
Local links are useful, too: You can go to the next sentence now. |
|
<A NAME="here">The next sentence.<P> |
The next sentence.
|
|
Pictures may stand alone:<BR> <IMG SRC="gopher.gif" ALT="(a gopher)"><P> |
Pictures may stand alone:![]() |
|
Or be links:<BR> <A HREF="mascot.html"><IMG SRC="gopher.gif" ALT="(a gopher)"></A><P> |
Or be links:![]() |
|
</BODY> |
||
</HTML> |
Images may be used as backgrounds for an entire web page with tag: BODY BACKGROUND="file name.gif" included right in the BODY tag at the being of the document. This will cause the image referenced to be tiled or repeated throughout the document's background. Alternately, you can add a background color to the BODY tag by following BODY with BGCOLOR="#0000FF" The six characters following the # sign are known as hexadecimals. These characters come in three pairs with (in order) the three colors of the electron guns used in computer monitor "Red" "Green" and "Blue". 00 means completely off, so 000000 means all guns off, resulting in the absence of the monitor flourescing- which would be black. 0000FF would result in no red, no green, full on blue - so the page would have a blue color. White pages are created with FFFFFF. There are handy utilities that will generate appropriate codes for colors that you select- I frequently use a freeware one for the Mac called Colormeister...
The chief objective in creating and using graphics on in your web page is to make the file size as small as possible, while retaining a quality color depth and physical size of the graphic that it complements your page or communicates what you want. Ideally, graphics should be less than 40 K. Thumbnails (postage stamp sized copies of the original picture) are often used as links to the full-sized graphic on a new page, when the full sized graphic is real big. However, another concern is how many seperate files are transmitted as a page downloads, since each one of the files requires as seperate connection to the server.