more html

More HTML

last modified: 12:35 PM MDT, Tue 04 Oct 2005

You will need to make a simple website on Gentry in order to show your instructor the results of your tasks. The website needs to be on Gentry because some of the tasks will be CGI scripts interacting with meteorological data on Gentry. You will add password protection to at least part of your website. That is covered in the last part of the tutorial.

You do not need to build your website from scratch. You are welcome to download a simple website, which contains my ex1.html, ex2.shtml, among other goodies.

You can edit the html files to modify them for your own needs. Even if you already have a website, you still might want to play with these examples, in order to learn some more about html.

Now for the download. Do one of the following:

Easiest: On Gentry, within your public_html directory, simply type:
```
wget http://gentry.metr.ou.edu/html/htmlex.tar
```
Potentially clumsy: Click on this link to this 120 kb file: htmlex.tar. You need to get htmlex.tar into your /home/joestudent/joestudent directory on Gentry. On your local unix machine, type
```
scp htmlex.tar joestudent@gentry.metr.ou.edu:~/public_html/.
```
Enter your Gentry password at the prompt. If your local machine is running Windows, you will need to use a utility that supports scp.

The following command on Gentry will extract a directory htmlex from htmlex.tar. Be careful: it will overwrite files if you already have a directory htmlex:

tar xvf htmlex.tar

The example files should now be viewable at:

http://gentry.metr.ou.edu/~yourname/htmlex/ex1.html

If you want to move this example system of web pages into the top of your website, and thus have it accessed from

http://weather.metr.ou.edu/~yourname

Do the following within htmlex

mv * ..
cd ..
mv ex1.html index.html

You will need to use a text editor immediately on the file ex1.html (or index.html, if you moved it there), otherwise you will be known as "Joe Student" to the rest of the world. Notice when you look at ex1.html in a text editor, there are a lot more characters that did not appear when you looked at your page through a web browser. In the editor, you are seeing the html language that defines your page. Learn more about html by:

Firefox (Mozilla) has an option "View Page Source", which is available by right clicking on a web page. Use this option on pages you are browsing, to see how they are constructed. But with frames so prevalent, you may need to right click on the frame and go to the "This Frame" menu.
For html files that you own, you may compare what you see through a web browser with what is seen in the text editor. In the text editor, you may see the html for "server-side includes" that were processed by the "server" before the page was sent to your computer. You will not see that code using the "view page source" method. ex2.shtml has lots of server side includes.
For this course, all you need is some simple old-fashioned 1990's HTML. The venerable Introduction to HTML might suit your needs.
Buy an html book. HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide, Fifth Edition has received good reviews.

Editing files at your website

After you make your editing changes and save the file, try the "reload" option on the browser on your local machine to see what it looks like. Use "shift" "reload" to download all the graphics again, rather than use the ones in your cache.

In general, you should make a copy of your html file before doing a lot of heavy editing. This can be done by using the Unix command for copying:

 cp index.html index.html.backup

If you damage your index.html, you can always revert to the backup with:

 cp index.html.backup index.html

Alternatively, you may copy your index.html to a file with a hard-to-guess name, such as obscure.html. Then hack away on obscure.html and copy it back when you are ready to show it off. (You may still want to have an index.html.backup)