Webbing  

Putting material on the world wide web basically involves three primary steps:

I. Writing in or converting material into html (hypertext mark-up language);

II. viewing and adjusting it on your local machine `til it looks right. (Note: this step is not always needed, since some authoring software allows it to be edited  and reviewed on a server.)

III. Putting the material on a "web-server."

This document addresses parts I and II. (Step III varies from website to website. For how to do it this semester in Cpsc 130 or 217, see here.)

I. Writing web material

There are probably four main approaches to this:

A. Use and modify an existing "template" (respecting copyright issues). See below

B. Write HTML directly in a text editor (like Notepad, Wordpad or TeachText). See "some notes on HTML" to see how to get started learning HTML.

C. Write HTML in a web authoring application (like FrontPage,  HomeSite, DreamWeaver, AOLPress, GoLive, etc.). I will talk about HomeSite later in the course. A comparable package that can be downloaded at no cost is HTML-Kit -- you may wish to consider using it at home. We also have another no-cost package called PSPad available in the IT lab. You can download and experiment with that if you like.

D. Develop content in an application (like Adobe Photoshop or Microsoft Word or MSPowerPoint) and export it as HTML. This is not recommended for this particular course -- the application may write code in ways rather beyond your control. Better for "web development," perhaps, than for "web programming."

A. To use and modify an existing "template" (respecting copyright issues):

Though it is relatively common to "borrow" html code from other sites, potential issues of copyright are involved, so best to begin with a site that you have "permission" to copy.

1. Let's start with the sample file shown below, and located at ../html/simple.htm
Point your web browser at it.

2. Now look at the "source code."

[In some versions of Netscape, from the "view" menu   choose "document source:"
In some versions of IExplorer, choose "source" under the view menu.
Some browsers may call it "show codes."
Note: if the option isn't in the "view" menu, you may have to hunt a bit, by looking in different menus.]

You'll get a screen that shows the underlying html code:

3. Select all the text (CTRL A) and copy it to the clipboard (CTRL C).

4. Open a word-processor and paste the material into it.  (Note: one could simply use "notepad" to save or edit the file directly, possibly saving a step, but not all browsers will use notepad to "show codes".)

5. Save the file. Initially (for the first few weeks) you'll probably want to save it on your hard-drive (using "File/ Save As"). Navigate to an appropriate directory and put it in there.

Important: Make sure the filename ends in .htm (or .html) and that you save it in "text only" format. To ensure that the filename ends in ".htm" (rather than ".htm.htm"), some editors will require that you place the filename in quotes.
 
II. Examine and adjust your work (on your local machine):

A. use your web browser to view the file. You can either do this through "Open" in the "file" menu; thence navigating to the place you put the file, or by typing the pathname, something like

file:///c|/My_documents/sample.html

into the location or address field, in near the top of the browser window:

one way to enter the filename

another way

yet another way  

(Important note: each of these ways of refering to an html document on your C: drive uses a local file name rather than a real World Wide Web address known as a URL -- consult this page for notes on URL's.)

B. Modify as appropriate using a word processor:

Try replacing some of the text in the document with your own words.
Try adding a few new lines and using codes such as the following:

<b> -- begin boldface
</b> -- end boldface
<i> -- begin italics
</i> -- end italics
etc.

Note: since notepad and wordpad are such simple editors, they are often preferred for writing HTML over a full-fledged wordprocessor, since the latter is likely to embed "special" but unseen characters, into your document, oft with unpredictability arising.

C. Save the file again, with the changes you just made.

D. Look at it again with your browser.  Note: Generally you will have to "reload" the document in the browser. The browser will otherwise continue to display the last current version given to it, prior to the modifications.

Repeat steps b, c, and d again until the document looks the way you want it to.
Refer to this document for further ideas on how to embed special tags.

Here is a presentation that discusses form elements in some detail.