Ralph Brandt. Common Sense in York, PA - Web Page Authoring

HTM

WEB Page Authoring

Authoring a web page consists of several steps:

1) Determine the message you wish to convey

2) Determine the general layout of the page.

3) Determine where the page will reside.

4) Obtain the graphics and texts for the page.

5) Begin the construction.

6) After the page is constructed, test it in a local directory.

7) Load it to the server.

8) Test the page in place.

9) Register the page with the appropriate search engines and if appropriate join WEBRING's.

10) A good HTML Resource

1) Determine the message you wish to convey (if it is a commercial page this may be done for you)

What do you wish to say. Who is the audience you wish to reach. Is yours an information, training, reference or opinion page? If you are doing something for a commercial page, see if the business has logo, sales brochures, product brochures, etc. These are useful in putting together a page, most businesses like a consistent appearance in their public image. Be careful here, some companies do not own the rights to the art on their brochures EXCEPT for use on the brochures. If they own the rights, this can be a significant aid, get good, clean brochures and scan them, extract the pictures.

If this is a personal page, this should present you in a good light, unless you for some reason desire otherwise.

2) Determine the general layout of the page.

This is the artistic portion of the job, if you are as artistic as I am you should get some help with this. There are things that should be included in every page. The name of the page. The purpose if appropriate. Pictures if appropriate. Example, the YTI page might have an impressive picture of the building, some of the students, etc. This is publishing. A page should have a "contact" e-mail address. Guest books and counters are nice. Links to other pages are nice. Remember your page need not have everything on one "file". Splitting it into several files makes the load time shorter and also makes it easier to navigate in the page and through the whole home page. Decide how to split it. Remember that a page of 200K will take nearly 100 seconds, (1 1/2 minutes) to load. Get much bigger than this, people don't wait. I like to see the front page at 60 K max including the text and ALL graphics that are used on the pages. If I want to use big pictures of hi-res graphics I use thumbnails (small) with hot spots to show the full picture. If you use a graphic on the initial page and what to reuse it later, it will be in the person's cache and will not have to be reloaded to the PC. This saves time in loading "next pages." I try to reuse as many graphics as possible.

3) Determine where the page will reside. (What server)

I personally use GEOCITIES. AOL has a page area, so do most other Internet Servoce Providers. I like geocities because I can change network providers and let my page stay on its location. In addition, Geo currently allows a page size of 6meg FREE. Determine what the name of the page will be. Most providers allow you to use their DOMAIN name and a suffix for a name, this is cheap but can get cumbersome. www.geocities.com/CapitolHill/2694 (free) is not as nice as www.geocities.com/~brandtre ($5 a month cost) and www.ralphbrandt.com ($100 for 2 years) is nicer. There are other options from other servers. AOL has a similar plan. If you are going to pay for a commercial page server it will cost more than $50 a month, most are over $100. But these are hefty servers, the space available is significant, and can keep up with all but the fastest network connections. Recently some servers are offering plans as low as $20 a month, I have no experience but the performance may not be what you desire. Remember, if this is a commercial page, get a good server, nobody wants to wait while a server chokes on a page. Some of these can offer secure connection for people ordering with credit cards. But make sure you know of the costs, some servers charge a flat fee, no matter what, others charge a monthly fee and a download charge by byte. This can get expensive if your page gets a lot of activity.

4) Obtain the graphics and texts for the page.

GRAPHICS

I suggest having two or three graphics packages. I personally use A Miro DC20 Video Capture with associated software, PC paint, LV PRO, and 3DFX. I have Paint Shop Pro that gets some use and GIF Construction set that I use for animated GIF's. All of this except the DC20 is less than $120, this is a significant investment.

I use a scanner (for documents), Video Capture (from video tape), PC Paint (for my own creations), 3DFX to make files. Generally at this point I may have a BMP file that is much too big for the net. I like the video capture hardware and software, most of my pictures on the net are from video tape. The Miro is expensive, but there is another hardware device called a SNAPPY is also good for this at less cost than my setup that will also do AVI files and motion video which is not needed for the web pages (unless you want to put out LARGE motion video files in your page). A digital still camera is good, I have seen them, the result is generally a little better than what I use. Likewise the scanner has its place where you have pictures or documents to put on the net. I have done some limited work with Optical Character Recognition - OCR - to build text files from printed documents. This has been successful if the document is clean, has not been marked up and highlighted, and has relatively consistent fonts. It saves typing.

You need a package that can create GIF and JPG files from a BMP file. I use LV PRO to read the BMP (or TIF) and convert it to JPG or GIF.

You can do animated GIF's, these allow motion on the screen when the page is up. It is done by creating several GIF files that describe steps of the motion, just like cartoons are mad. It is easy to do from a video tape, snap several BMP's, convert to GIF's of the same size and use GIF Construction set to form the animation. It is not necessary to have many shots, usually two to five shots will define an action.

TEXT

Put your text together in WORD or a good word processor. SPELL CHECK. GRAMMER CHECK if possible. Have someone else read it. Let it set for a day or two. Read it again. Then use it if it still looks good. You can also use the OCR mentioned above to create text from printed pages.

WARNING

Remember copyrights. If you use a background, picture, graphic, text, etc. that is someone else's work, make sure you have the right to do so. One local business used a document that it thought was public domain. It wasn't, the owner sent them an E-mail, "Take it down now or face a law suit." It came down.

5) Begin the construction and test in the local directory.

This is the HTML work. We are going to do it "the hard way, that is in native HTML. If you get one of the fancy page authoring packages later, fine, use it, but it in good to understand the process. We will be working with something called HTML TAGS. Each tag indicates some function. Many tags have a start and end. The tag <html> is the tag to start HTML code. The tag </html> is the end of the HTML code. These two should start and end a home page.

GENERAL LAYOUT OF A WEB PAGE

The page sits between a start and end HTML.

<html>

page

</html>

The title information sits between a <title> and a </title>, the body between the <body> and </body> and the heading between the <head> and the </head>. Overall it looks like this.

<html>

<head>

<title>The name of the page. This is used by search engines</title>

</head>

<body>

The body has the actual page data.

</body>

</html>

Let's look at the tags that are most frequently used.

<h1>A level one heading, very big bold print.</h1>

<h2>A level two heading, big bold print</h2>

<h3>A level three heading, bold print, larger than text</h3>

<p>A text paragraph</p>

<p>Within any text area you can <b>bold</b> one or more word, or we can <I> italicize</i> and return to the plain text</p>

The case of the tags is not important. Note that the paragraph data is wrapped to fit, spaces are suppressed to one between each word and two after a period. You cannot format with <p> tags. Use <text>

Create a directory on your disk, myhtml. Open notepad, generate a page, with a title, a H1, h2, h3, and a paragraph with italics and a bold area. Also bold and italicize a word. Save the file in myhtml as index.html - let H1 be the name of your page, h2 be a subtitle and h3 be a followup information. Save the file to

a:\myhtml\index.html

Bring up INTERNET EXPLORER. (or NETSCAPE if you use it) In the TO area type a:\myhtml\index.html Your page should come up.

Does it look like it should? Things that can go wrong, if something formats wrong, look at the tags at the point that the error occurs. If a tag is put in with no end tag, everything from the tag on is that tag. For example, if <H1> is put in with no </H1> (or you type a <HI> by mistake, everything after the H1 is treated as a heading one.

Go back to notepad, insert before H1 line <center> and after it </center> Save and view the page again on EXPLORER. When you go to explorer you will note that it has not changed. It will not change till you refresh. Click REFRESH. If you miss the </center>, everything from that tag on will be centered.

Add a line <hr> and a <br> after the last h3. Save and view again. This puts a <br> blank line and a horizontal rule (line) under the H3.

Click on View Source in INTERNET EXPLORER. This will bring up a copy of the HTML source for you to view. It is your source. One real valuable use for this is to look at other pages that have neat things and determine how they are done.

LINKS TO OTHER SPOTS IN THIS PAGE

This is normally used only in large pages, for example large text files can have a table of contents at the beginning so you can jump to various places in the file. We will do it here as an educational experience. An example of this follows:

<A HREF="#BILLREEL">Bill Clinton's re-election campaign...</a> (This was writen before the election)

<BR>

<A HREF="#BILLOLY">Bill Clinton's Olympic deception...</a>

<BR>

<A HREF="#BILL800">Bill Clinton on Flight 800...</a> <BR>

<A HREF="#BILLSTAX">Bill Clinton's Tax Return</a>

<BR>

<A HREF="#INAGURALADDRESS">1991 Inagural Address Revisited</a>

<BR>

<A HREF="#FATHERBILL">Father Bill, Mother Hillary?</a>

<BR>

<A HREF="#BUDDY">Buddy Replaces Socks</a> (New, 1/1/98)

<BR>

In the actual document area there must be a name matching each HREF. I've shown only a few here.

<BR>

<H2><A NAME="BUDDY">Buddy replaces Socks</a></H2>

<p>Bills dog.............

<H2><A NAME="BILL800">Bill Clinton on Flight 800...</a></H2>

<p>Am I the only ...........

<H2><A NAME="BILLSTAX">Bill Clinton's Tax Return</a></H2>

<p>Am I the.............

<H2><A NAME="INAGURALADDRESS">1991 Inagural Address Revisited</a></H2>

<p>Date: Wed, 24 Jul 1996 19:22:37 -0400 (EDT)..........

<H2><A NAME="FATHERBILL">Father Bill, Mother Hillary?</a></H2>

<p>Letter to the editor...

The A is an address tag. The HREF is the reference, if it is prefixed by a # it is a reference inside the current file and there must be an <A NAME > entry for it in the same file. The above is an abbreviated section from one of my pages. The area, "Buddy Replaces Socks" will show as a hyperlink and clicking on it will move the page to point to the point with the <A NAME BUDDY>.

In large documents I place the following code:

right after the BODY statement. Note that there is nothing between the >< in the link, thus no hyper text shows at the top of the document, but the link is there. This allows me to put

anywhere in the text. Clicking on the (Top) hyper text that appears returns me to the top of the document. I also use the words BIBLIOGRAPHY, INDEX or CONTENTS in lieu of TOP if they are more descriptive. (Bibliography is usually at the end of the document.)

<A HREF="#INDEX">(INDEX)</a>

EXERCISE: Add an HREF at the top of your document for the paragraph you wrote and a NAME line above your paragraph. Also put in the TOP HREF and TOP NAME commands. Save the document and test it on explorer. (Did you forget to refresh?)

LINKS TO OTHER PAGES

You can link to the top of other pages. This does not matter if it is your page or a page belonging to someone else. I have some links to pages I like.

<A HREF="/handshu.html">TARGET FILE IN THIS DIRECTORY - used for another file in your page.</A><BR><A HREF="http://www.geocities.com/CapitolHill/2694/handshu.html">FILE IS FULLY QUALIFIED - used for a file in another page.</A><BR><A HREF="http://www.geocities.com/CapitolHill/2694/handshu.html#INDEX">FILE IS FULLY QUALIFIED and there is an A NAME for INDEX in it. Use to jump to the middle of a different file. </A><BR>

Open a second notepad and create a second document in the directory, SECOND.HTML SAVE AS it now before you forget. Do not close either document for now, it saves time to have three windows open. Make SECOND.HTML like the first document but change the H1 line to SECOND so they are easy to identify.

At the end of the document SECOND.HTML place an entry:

<A HREF=/index.html">Return to home</a>

before the end of body. In the index.html file add a link

<A HREF="/second.html">TO THE SECOND PAGE</A>

Save both documents and go back to IE. Refresh index and look at the link to second. Click on it and see the page SECOND load. Find the HOME link and click on it. You should go back to the INDEX page.

You have just created a simple home page with two files. If you can do two files, you can do fifty.

INSERTING PICTURES AND BACKGROUNDS

One of the first things you can do to improve the appearance of your page is to change the color of the background, text, link and vlink. (link is an active hyperlink, vlink is a hyperlink that has been used.)

The colors are formed as follows. #rrggbb where rr gg and bb are hex numbers from 00 to ff (000 through 255 in hex format) and the colors are mixed from these components. The color 000000 is black (no color) and ffffff is white (maximum intensity of all colors). ff0000 is red, 00ff00 is green 0000ff is blue. The 00f0e0 is a pleasant aqua. If you see a page color on the net you like, VIEW SOURCE, look at the BGCOLOR on the BODY line.

Remember that if you change the background to black you must change the text color to white or yellow or you get black text on a black background. It's like looking for a sitting polar bear in Alaska in a blizzard. Likewise if you use blue you must change the LINK color or you will get blue links on a blue background. Pretty, but no more readable.

If you add a BACKGROUND option you will get a background that consists of a file named rain.jpg. This can be used to make the page more alive. The bgcolor is important, it will be displayed until the background file is downloaded. If the background is not large enough it will be repeated horizontally and vertically to fill the page. Thus the background blocks must match or it will look like a patchwork. Matching the background, softening it and making it appear continuous (if desired) are artistic functions. The idea is to make the page appealing.

If you wish to put a picture on the page, load the jpg file to the directory and insert a line before the H1 line:

Clc01.jpg must be on the directory.

Add this and look at the page. Now change the line to:

Look at the page. Before the graphic is displayed the letters CLC1 will show in the area, the picture will have a border and the picture will appear on the right side of the screen. Save and look at the results.

The align can be "left" and the border can be 0 if there is to be no border.

A picture can be used as a hot spot (hypertext link) by wrapping the image entry with an A HREF as follows:

Try this and save it. Pass the cursor over the picture in IE and see the URL show on the bottom of the screen.

6) Load it to the server.

The method for this varies with the server. I suggest FTP unless the server has its own method. GEO has a file manager that is really nice. If you keep a copy of your page on your hard drive it really works.

7) Test the page in place.

As soon as you get a good upload, test it. Look for mistakes, check for errors. Try Netscape and IE. If you have a friend on internet with training wheels (IWTW or AOL) have them check their browser. It may look bad on one, if so you may want to make a change.

8) Register the page with the appropriate search engines and if appropriate join WEBRING's.

There are many search engines, I have registered with quite a few to determine how. You may not want to use as many.

I list here the URL of the engine and some short instructions on how to get to add your URL.

http://www.altavista.digital.com/
Click on -- ADD URL
confirms if done

http://www.opentext.com/
Click on -- Add your site
It provides a place to type your URL

http://www.lycos.com/
Click on -- Add Your Site to Lycos
URL ONLY -- Confirms if done OK.
http://www.pointcom.com/
Don't know how to list.

http://a2z.lycos.com/
Don't know how to list

http://www.yahoo.com/
Click on -- How to Include Your Site -- Near the bottom of the form
Before getting to this one, determine the YAHOO catagory or catagories your page should be listed under -- you will need them.

http://www.excite.com/home.html
Click on --- [Add URL]
This will put up a search request, go to the bottom of the form
Insert your URL and click on submit.
You will get a THANK YOU response.

http://www.dejanews.com/

http://index.opentext.net/main/simplesearch.html
Click on interact - submit your URL
Enter the URL, INCLUDE the HTTP:// This is different from other search engines.

http://guide.infoseek.com/
Click on ADD Site at the bottom of the page
Instructions there, mail the full URL (http://.........) to the following address.
[email protected]

http://www.websitepromote.com/dir_list_serv/index.html

9. RINGS or WEBRINGS link like pages so you can step from one to another like page. For example, I am aware of rings called Christian, Faith, Fathering, Pennsylvania, Parenting, Amputee, Lesbian, .... Each of the pages in the ring have a Hyper link that points you to the next or previous page in the ring. If you keep going long enough, you will come back to the page you started with.

Copyright 1998 Ralph Brandt

Additional sequences...

<p><Strong>I'll be very surprised if

<img src="/cgi-bin/counter/0"> people write to me.</strong><bk><p>

1) The above sequence works on Geocities, each server has different sequences for the counter.

(c) Ralph Brandt, 1996 <A HREF=mailto:[email protected]><i>Write me at [email protected]</i></A>

2) The above sequence is a netscape/IE sequence to define the mail address to create a hypertext link to a mail message creation.

<table border center>
<tr>
<td><A HREF="../2694/abortion.html">Abortion </A></td>
<td><A HREF="../2694/parentin.html">Parenting</A></td>
<td><A HREF="../2694/masons.html">Free Masonry</A> </td>
<td><A HREF="../2694/marriage.html">Christian Marriage</A>
</td>
</tr>
<tr>
<td><A HREF="../2694/ofunity.html">Unity, Body of Christ</A></td>
<td><A HREF="../2694/commit.html">Are you COD or AWOL</A></td>
<td><A HREF="../2694/onelife.html">The Value of A Life</A></td>
<td><A HREF="../2694/conserv.html">Am I a Conservative</A></td>
</tr>
</table>

3) The above sequence builds a table.

(top)

Return to the Common Sense in York PA - Home Page

I'll be very surprised if people write to me.

Ralph Brandt, Write me at [email protected]

Return to Geocities Home Page

Sign my Guestbook View my Guestbook

This page hosted by Get your own Free Home Page

Revised 4/12/1998 DRAAW is not a misspelling, it is an acronymn for Dee,Ralph, Angela, Annette and William..

Hosted by www.Geocities.ws