Jukka Virtanen

Lab 1

Creating a PIC Unix account

There should be a handout at the PIC lab on how to do this. If not, you can find instructions here. If you have any questions or difficulties, ask the TA or lab assistants to help you.

Logging into your PIC Unix Account

The secure shell program that is installed on the PIC lab computers is called Putty. You can find it either through the start menu or on the desktop. Open up this program.

In the host box type in laguna.pic.ucla.edu. Click the open button. Now a console window will pop up. Follow the instructions on the handout to set your password.

After a successful login you will see the Unix command-line prompt that will look something like:

Unix Command-line Prompt

Note: some of these screen shots are from an older program so your actual console will look slightly different.

Creating Your First PIC Web Page

Please note that in this excercise you will be creating an XHTML web document rather than an HTML5 document. Do not worry about this at this time. The point is just to learn the process of making a webpage and making it visible to the world and validating it.

To create your first PIC Web page, follow these instructions:

  1. In your Unix home directory, grant executable permissions to all by typing:

    chmod a+x .

  2. Create a directory named public_html by writing:

    mkdir public_html

    All of your Web pages must be in your public_html directory or some subdirectory of public_html to be visible on the Web.

  3. Grant executable permissions for that directory to all:

    chmod a+x public_html

  4. Make sure you are now in that directory by typing:

    cd public_html

  5. Create an XHTML plain text file for your home page called index.html using PICO, a Unix plain text editor:

    pico index.html

    Use this template's source to get you started. Click on the link and a page will open in a new tab. You should have a webpage with nothing on it except a small logo with W3 and XHTML 1.1 on it. Your goal now is to create this page in your directory. Note that you can view the source for any web page by going to the menu "view" on your browser and clicking on view source. (Alternatively just right click on the page and a menu will pop up. Choose view source.) Copy this source code to the clipboard (select all and then ctrl+c)

    We want to paste the source code into the pico editor. Note that copy and paste does not work in the usual way inside the terminal window! Pasting is done with ctrl+shift (instead of usual ctrl+v). Copying inside the putty terminal is done with ctrl+insert (You should not need to do any copying this time around.)

    Creating an XHTML file using PICO

    The pico Environment
    Editing index

  6. Once you have written the code into the pico editor, save it under the filename index.html
    In pico, type CTRL-O and make sure you are saving to filename index.html. Then press Enter and type CTRL-X to exit the pico environment.

  7. Grant read permissions to all for the file index.html:

    chmod a+r index.html

  8. Grant write permissions to you, the user, for the file index.html:

    chmod u+w index.html

    Your SSH terminal should look something like this:

    Setting up your index file permissions.

  9. Congratulations! You did it! Visit the website now located at the following URL:

    http://www.pic.ucla.edu/~yourPicAccountLoginName

    Setting up your webpage.

Validating Your First PIC Web Page

In this class, you are required to make sure that your web documents are well-formed and valid according to the standards of the W3C (World Wide Web Consortium). The W3C provides an online validation tool which you can use in one of two ways:

  1. Click the W3C icon on your page.
  2. Visit the following URL and enter the URL of your page in the textfield: http://validator.w3.org

If all goes well, you should get a message like this:

A valid webpage.

If you do not get this message, you most likely have some typos in your index.html file.

If you are interested in learning more about Unix commands, check out this tutorial.

Valid XHTML 1.1