CSC 241 Lab 1

Fundamentals of HTML and Homepage Construction

Theme

This lab is designed to teach you the basics of HTML (hyper-text markup language) and publishing your own webpage here at Oswego. It will also help you set up your account for using openwin on the SUN workstations and compiling and running Java programs.

The reason for having your own webpage in this class is that some of your programming assignments and labs will have applet front-ends and will be accessible through your webpage. When you finish this lab you will have a homepage that will consist of a header and title, a little text about yourself and one or more links to existing HTML files that run applets. The sample webpage that you will use as a template will contain links to actual pages that you can put in yours to start.

You will first copy some important files, create some directories, and set the needed protections to get things started. Once you get into OpenWindows, you will make some modifications to your environment. The next step is to fire up netscape and bring up this page. There are several references in this page that are only meaningful in a web browser. For example, part of the way into this lab, you will bring up the sample webpage that was mentioned earlier in netscape and at the same time be in a different window typing your own webpage. You may think that it would have been easier, if we would have just given you the template to start with. But, this is a good practice in having multiple windows on the screen, each of which play an important role. Also, once you finish typing your homepage, you will be able to bring it up in netscape. If there are any mistakes in it, you modify it in the editor and reload it in netscape.

Copy dot-files:

1. Login on a workstation
2. cp .cshrc old-dot-cshrc
3. cp .login old-dot-login
4. cp .emacs old-dot-emacs--(don't worry if says `no such file')
5. cp .Xdefaults old-dot-Xdefaults--(don't worry if says `no such file')
6. cp /csclass/dl/sample-dot-cshrc .cshrc
7. cp /csclass/dl/sample-dot-login .login
8. cp /csclass/dl/sample-dot-Xdefaults .Xdefaults
9. cp /csclass/dl/dot-emacs.fall96 .emacs
10. Then logout and login again. Optionally, later edit any of these files to include anything in your old versions, or in the various default versions in /src/etc.

Creating necessary directories

You need to be in your home directory.

1. mkdir public-html
2. mkdir public-html/classes
3. mkdir public-html/classes/csc241

Setting permissions

1. chmod og+rx .--don't forget the dot
2. chmod og+rx public-html
3. chmod og+rx public-html/classes
4. chmod og+rx public-html/classes/csc241

Set up your openwin environment:

• type openwin.
• get rid of default file manager and help tutorial by Quiting them (not just Closeing). The Quit option in the File pull-down menu.
• Choose save Workspace. You get to that option by clicking the right mouse button. You will see the Workspace menu. The second item in the menu is Utilities. Point/Click that option, again use the right mouse button. You should now see the save Workspace option. This way, the file manager and the help tutorial won't load up next time that you start up OpenWindows.
• Adjust Properties if you want to, especially the Set active Window to move pointer in the Miscellaneous page. With this switch, just moving your pointer into a window will make it active and you won't have to click the mouse in the header of the window.
  1. Bring up Workspace menu again.
  2. Choose Properties. At the top of that window, you will notice the word Category. Adjacent to that there is a menu button with the word Color to its right.
  3. Click on the menu button.
  4. Choose Miscellaneous.
  5. Click on move pointer button.

Make sure Netscape with Java works

1. In the CMD tool window type: netscape & and click Accept when Netscape starts up.
2. Bring up this lab by typing the following URL in the Location text area: http://g.oswego.edu/dl/csc241/lab1.html -- leave the Netscape window open.

Write your index.html page

For a few quick HTML tips follow the link to Basics of HTML.

1. get into your public-html directory, type"cd .." and then "cd public-html"
2. start emacs by typing emacs -fn 10x20 index.html &
3. Follow the link to sample in your Netscape window.
4. We have set up emacs to work in html-helper mode which starts you with a template of an html file. For the purpose of this lab, you can delete the template that appears.
5. In the Netscape window starting from the line that has <html>, highlight the content of that page.
6. In Netscape's Edit pull-down menu, pick copy.
7. Now move your pointer into your emacs window and press the Paste button on your KEYBOARD.
8. Change what needs to be changed.
9. once your page is completed, save (cntrl x, s) and exit emacs(cntrl x, cntrl c). You have a homepage.

Make your page accessible to others

The following will take place in your CMD tool window:

1. ls
   (you should see "index.html" listed)
2. chmod 755 index.html
   Note: any subsequent files added to public-html or its subdirectories must also have the permissions changed by using the chmod command, if you want them to become accessible through the Web. However, do not change permission on your .java files, if they are intended for this course.

Testing your page

Type your URL http://www.oswego.edu/~your user name in the Location text area. Your page should load up in all its glory!

Note: You may come across pages on the Web that have features that you like. If you want to see how they are implemented, you can use the Document Source option in the Netscape's View pull-down menu. This will show the html code generating the page and I already shared with you the procedure to follow for copying things from netscape into a file in emacs. So have fun!