Instructions for maintaining a WWW page
on hackensackhigh.org

by Robert Kern Curtis

Introduction

As is common with computers, there are many different ways of doing this. The method described here is designed to be simple and functional for "newbies" and to conform to my personal judgment about the best way to learn to create and maintain WWW pages. I believe in KISS (keep it simple stupid) and the problem I have with many programs (Office97, Office2000, Netscape Composer, etc.) is that they add much unnecessary and confusing code to the page's source.

WWW pages are written in Hyper Text Markup Language (HTML), (with graphics in either .gif or .jpg format). This is a very simple language to learn and use and is very forgiving. Learning the basics of this language pays off in a much greater understanding of how WWW pages work. You can do WWW pages without learning this language; you can use Microsoft Office and save as HTML. (I do this with the HEA Faculty Council minutes: see http://168.229.236.6/~hea/heamin.htm.) [The code for this link is: <a href="http://168.229.236.6/~hea/heamin.htm">http://168.229.236.6/~hea/heamin.html</a>.] But this ignorance seriously cripples you.

You can learn much more about this always evolving language by following some of the links on my computer science page which is at http://hackensackhigh.org/cs.html. [The code for this link is: <a href="http://hackensackhigh.org/cs.html">http://hackensackhigh.org/cs.html</a>.] Go to the section on HTML & Javascript.

Getting the page on the WWW: how to use File Transfer Protocol (FTP).

First of all be sure you are connected to the internet (via aol, idt, or whatever) then minimize your browser and go to MSDOS Prompt, then type:

cd\c:

This will take you to your root directory on your hard-drive. (You could have chosen any other directory on your computer.) Then type:

ftp hackensackhigh.org

the screen should show

FTP> hackensackhigh.org

You will then be asked for your login id. Type this in and hit [ENTER].

You will then be asked for your password. Type this in and hit [ENTER].

Now you will be in your basic shell diretory (more about this later!) and you will have to enter the following command:

cd public_html

and hit [ENTER]. After you have done this you will be in the directory that is shown on the web by our web server. (We are using an APACHE brand server.)

Now you can get the file to your own computer where you can work on it by entering the command:

get index.html

and hitting [ENTER]. The index page will be transferred to your computer into whatever directory (folder) you are in.

To leave the FTP program, type:

bye

and click [ENTER].

Now you can edit your page. You have to use an editing program that does not add its own control codes, etc. You can use the MSDOS editor or the Windows Notebook program. To use the MSDOS editor, simply type:

edit index.html

This will show you your present page. You can make some changes and then upload your page. Make the changes. Then exit the editor program. You can do this by typing ALT-F and then ALT-X and then [ENTER].

To upload, you have to run the FTP program. Type:

ftp hackensackhigh.org

and go through the procedure above, but instead of typing "get index.html" type:

put index.html

then exit the program as before.

You can leave MSDOS prompt by typing:

exit

and hitting [ENTER]. Then you can maximize your browser and look at http://hackensackhigh.org/~xxxx/ where xxxx is your login.

There are other ways to use FTP, e.g., through the browser directly or by using a program called cuteFTP. I am looking for more FTP information and as I find it I will put is on ftp.html. [ The code for this link is <a href="ftp.html">ftp.html</a>.]

HTML Basics

HTML is a markup language. The control of the computer is done by putting tags in the text. When you view the source code of this page, you can see these tags. (To view the source code in Netscape Navigator, you can click on VIEW and then PAGE SOURCE. To exit, click on the X in the upper right corner of the page.) Much HTML is learned by looking at a page and then checking to see how a particular effect was accomplished. This paragraph has a tag telling the computer to justify it. (A good basic reference for HTML is barebone.txt.)

This is a picture of me. It is here so this page's source code will show you how to insert a picture!

[The code for this is: <img src="rkc.jpg" width="360"> the width="360" instruction says to make the picture 360 pixels wide. There are 72 pixels per inch on the screen, depending on the way the display is set.] You can do some crazy things with the tags. Here is an example.

[The code for the wide picture is: <img src="rkc.jpg" width="300" height="100"> and for the tall picture is: <img src="rkc.jpg" width="100" height="400">.]

This page contains all the most useful tags. You could write great WWW pages for years using just these tags. But there are also many more that you can use. One of my favorites is <pre> and </pre> This is for pre-formatted text.

This is pre-formatted text.  --spaces and lines and paragraphs
are maintained. It is good for columns of text, etc.

        Friends                    Foes

        Mable                      Jake
        Michael                    Lucifer


The problem with this is that it does not allow the browser to fit the page into the window, so you probably had to click the bottom bar to see this!

A horizontal bar is sometimes useful, but it is often over-used.


The italics tag is valuable and we have seen the bold tag. There are seven headline choices:

biggest head

head2

head3

head4

head5
head6
head7
and we are back to normal.

The <font> tag can also change the size of the text. You can make it bigger and even bigger and, of course smaller and even smaller. This tag can also be used to change the color and face of the font. (The font face depends on what is available on the particular browser and computer reading the page, so do not rely on it too much.) This should be Arial face and lime color. This should be Comic Sans MS face and green.

It is also possible to align a paragraph on the right of the page.

Robert Kern Curtis
287 Hamilton Place
Hackensack
New Jersey 07601
email rkc@rcurtis.com

Notice that this also shows how to include an email address on which the person viewing the page can click.

You can also strike out text. This text is struck out!

For the math oriented, you can say 50 = 1 or Dx = x2 - x1.
Confuse freshmen algebra students with this problem:

Solve for x: x0 = 1.

There are a few tags good programmers say should NEVER be used. The first is the underline tag, since on the WWW underlines are reserved for links. Another is the BLINK tag since it is very annoying. A third thing to avoid is the use of "frames."

Pictures and FTP

To show pictures as illustrated above, the picture has to be in your public_html directory. To FTP a picture there, you need to have it on your computer and transfer it as a binary file. This requires an extra command, namely, "bin" which has to be sent before the picture. The "bin" command forces the subsequent transfers to be exactly byte for byte; otherwise FTP modifies text codes for different operating systems, e.g., making suitable changes when going from DOS to UNIX. (You can use your browser to "steal" pictures from the www -- right click on a picture and follow the dialog box.)

FTP> bin

FTP> put bridge.jpg

etc. NOTE that the file names are case sensitive, i.e., bridge.jpg is different than bridge.JPG

Another interesting ftp command is hash, try it. It will print #-signs to the screen as the download or upload progresses.

The following picture is accessed without its being in the directory. The problem with this is that the other www page owner can change his or her page and eliminate your access to the picture.

[The code for this is: <img src="http://www.rain.org/~rcurtis/rkc.jpg">]

Color

There are sixteen colors which can be used by name: (I am looking for a list of them--but they are the most common colors). But you can make up your own colors by using RGB. Red, Green, and Blue are the primary colors of light. 256 shades of each are available using hexadecimal numbers, 00 - FF where FF=256. (Red is FF0000, Green is 00FF00, Blue is 0000FF; so to make yellow, you mix red with green and get FFFF00. Again, it can be fun!) 800000--I think this is close to maroon. 000080--This is a darker blue. And so it goes.

By now, you might have noticed that I like to begin sentences with conjunctions and that I sometimes verb my nouns--the delights of English--but I hate split infinitives and a sentence which ends with a preposition is something I will not put up with. I also dislike starting sentences with a post-positive. This is, however, something I can tolerate. Back to the World Wide Web.
To change the background color change the <body> tag at the beginning of your page, e.g., to <body bgcolor="lime">. The default color of the text can also be controlled there, e.g., <body bgcolor="lime" text="red">. NOTE: There should be one and only one <body> tag in a page! (Otherwise results are very unpredictable.)

Supplementary Pages

So far we have been dealing with the index page, index.html. This is the page which a browser finds when there is no file specification in the Uniform Resource Locator (URL) thus http://hackensackhigh.org/~xxxx is equivalent to http://hackensackhigh.org/~xxxx/index.html. You can add sub-directories (sub-folders) in your public_html directory and you can have other files in the public_html directory (folder). The FTP command for making a directory is mkdir. There are some choices with supplementary pages. The file name will tell the browser what kind of a file it is. We have seen this for .html and for .gif and .jpg. And be advised that .htm will act the same as .html, telling the browser that the page is written in HTML. You can keep things extremely simple and use .txt which will just print ordinary text! Here is a very simple link to such a page in my public_html directory: arrl.txt And here is a link to a page which illustrates using a background color black.htm

You can also use a picture for your page's background. This can get tricky but look at picture.htm to see how it can be done.

There are more possibilities which can run programs written to produce WWW pages. Some of these are .pl .cgi .asp but these are for advanced WWW page programmers....
Click here to see an example: page.pl Use the BACK button on your browser to return here!

In addition to pictures, it is also possible to have sound files on your page. These end in .mid .wav .ra .mp3 depending on the format of the file. See music.htm for a simple example.

No index.html? What happens?

You can choose to have a directory instead of the index file, index.html, by omitting this file. To see what happens Click here. Again, use the BACK button on your browser to return here.

Tables

You cannot do better in learning about complicated tables than by visiting Hiro's pages on the subject. But I will put a very simple table here.

Number 1 Mary 691
Number 2 Dominick 55

Special Characters

Here are some special characters: ¢ ¤ ® © for more and how to print them here is a table of the character set you are using now:

To print the character in regular text, type an and-sign, a number-sign then the number for the character followed by a semicolon. That is &#162; for ¢.

FTP features

We have begun to use the File Transfer Protocol but have only touched on a couple of features. Here are some of the most important:

FTP> dir

This command prints the directory on the other computer.

FTP> cd [directory_name]

This command changes the directory; it requires an argument.

FTP> cd ..

This command goes back one directory. Note the space between cd and .. is critical.

FTP> pwd

This command tells you the name of the directory in which you are on the target computer.

FTP> !

This command lets you return to your computer without disconnecting; to go back to FTP type exit and hit [ENTER].

FTP> close

This command closes the connection with the target computer but keeps you in FTP program.

FTP> open [computer_name]

This command connects you to a computer. It requires either the computer's internet name, e.g., hackensackhigh.org, or its IP address, e.g., 168.229.236.6

FTP> user

This command causes the FTP program to prompt for userid if no user is specified (as after a mistake in typing userid or password).

FTP> bye

This is the command to exit FTP. (Note exit or quit usually will not work.)

FTP> ?

This command gives you a list if possible FTP commands.

FTP> ? dir

Sometimes this command will explain the dir command, etc.

FTP> get [file_name]

This command copies a file from the target computer to your computer. It does not allow wild cards and is case sensitive.

FTP> put [file_name]

This command copies a file from your computer to the target computer.

FTP> mget [file_spec]

This command is a multiple get command and the file_spec can include wild cards. E.g., mget *.jpg would copy from the target computer to your computer all the files which end in .jpg (but not .JPG). Normally, the program will prompt you for each file_name.

FTP> mput [file_spec]

Like mget but reverse direction.

FTP> prompt

This command toggles the prompting for mput and mget, etc. I.e., if prompting is turned on, this command turns it off; if it is off then this command turns it on.

FTP> hash

This command adds hash marks to the screen as a file is transferred. I think the command also toggles.

FTP> chmod a+r [file_name]

This command changes the permissions on a file to allow anyone to read it. This solves the "forbidden" message which you might sometimes get on a newly created or transferred file.

FTP> delete [file_name]

This command deletes a file from the target computer.

FTP> mdelete [file_spec]

This command is the multiple delete command.

JavaScript

JavaScript is a more sophisticated programming scripting language which Netscape and MS Explorer understand and will execute. It has the advantage of being accepted on server sites which do not allow the use of cgi for security considerations. (Yes, many WWW page hosts do not allow programming in perl, c, or c++, because of security worries.) I am not much practiced at it since I normally accomplish the same goals in other languages, such as perl, C, and C++. But be encouraged to mess with JavaScript. Here is a simple example.

<script language="JavaScript" >
<!--
var example
example = document.lastModified
document.writeln("This page was most recently updated: "+example)
//-->
</script>

On my browser, I have an error! in the date above. I have tested this by moving the file to idt.net and running it from there, which worked fine. So I conclude that the problem is with Linux or with the Apache server. But PERL will tell us the real date this page was last updated:.

Many good tutorials about using JavaScript can be found at http://wsabstract.com/javaindex.shtml


Today is

Other References

James Tieng, a former student and teaching assistant suggested I add a link to www.webmonkey.com for the more adventurous!




To be continued.