Lab 0: Introduction to Course and Linux Lab

Welcome

Table of Contents:

The purpose of this first lab is to familiarize you with the environment you will be using in this course. In particular, this lab will introduce you to remotely accessing the Linux operating system and course resources.

This lab is nothing like the rest of the semester. We want to make sure that you are comfortable with the environment before you start to program and you know the course's available resources.

The computer workstations in our lab run the Linux operating system, specifically the Ubuntu distribution.

Goals for Lab Zero

After the lab, you should know how to

  1. log in and out of the Linux machines, and set up your account for this course
  2. access the CSCI111 home page
  3. use the Canvas forums
  4. use the interactive textbook
  5. access the Web on the Linux machines
  6. create a text file with a text editor
  7. write basic HTML files and display them online

If you can do all those things, you are (almost) set for the course!

Objective: Learning to Use Linux

We are learning how to use the Linux Machines in class (the slides).

For reminders of Unix commands, check out the CS dept wiki's page on basic Unix commands.

Type labhelp to start an application that helps us keep track of who needs help next.

Objective: Remotely Accessing the Lab Machines

You may access your Computer Science account from any computer connected to the Internet, provided you have appropriate access software, e.g., a secure shell client program. Having an X server installed as well means that you'll be able to run graphical programs and have them display on your machine.

You may be planning to do most of your work on the lab machines, BUT you must set up your personal machine to remotely access the lab machines.

  1. Follow the instructions to download and install the ssh client and X server and ssh into python.
  2. ssh into another lab machine (also as described in the instructions). This document contains the names of all the lab machines.

    Note that when you ssh, you are using the same interface as when you opened the terminal on the lab machine.

  3. Type emacs & in the terminal to open a text editor. A text editor is a simple editor (like Notepad for Windows or TextEdit for Mac) for plain-text documents (like program source code and HTML files).

    The & means "run in the background" so you can keep using the terminal.

  4. In emacs, create a new file (under the File menu) named who.txt and save it in your home directory (username@ad.wlu.edu). The home directory should be the default location--note the home icon. The file will be blank.
  5. Back in the terminal, type who in the terminal to see who else is logged on to the machine, e.g., 
    sprenkle@python:~$ who
administrator pts/1        2022-01-10 20:19 (137.113.62.48)
sprenkles pts/2        2022-01-10 19:56 (137.113.118.56)
temadmin pts/3        2022-01-10 20:30 (10.0.4.179)
sprenkles pts/4        2022-01-10 20:33 (10.0.7.175)

    From the output, I see myself (twice) and two other people are logged into python.
  6. Copy the output from who and paste into the emacs window. Your typical keyboard-based shortcuts (e.g., Control-C or Command-C) won't work. Use the menu for Mac or right-click on Windows to get the copy/paste menu. In Windows, if you highlight text, it may automatically copy. In emacs, you will probably need to choose Edit → Paste to paste the output.

    This is an inelegant way for us to save output. There are better Unix-specific ways, but I wanted to start with something that you're somewhat familiar with.

  7. Save the file (who.txt).
  8. When you get to the appropriate question on the Canvas quiz, copy this output into the answer box.

Objective: Taking the Quiz in Canvas

"Quiz" isn't the appropriate word. We just want to make sure that what you did today makes sense. In Canvas, take the "Lab 0 Quiz".

You should also complete the introductory survey, but it's not part of the lab, per se.

Objective: Using a Text Editor and Creating an HTML File

We're going to create a web page using a simple text editor. Creating web pages isn't all or even most of what a computer scientist does. However, the Web is a great venue for a computer scientist to share her work with the world! (Or to create resources and information for her students.)

Use you're newly learned Unix command skills to do the following:

  1. Open a new terminal. We want one terminal to be on a lab machine. The other terminal is going to be on the computer science department's web server.
  2. ssh into the computer science department's web server using
    ssh -XY csci.wlu.edu

    You don't need to include your username because it's the same.

    You are now in your home directory of the web server. View the contents of your home directory. Note that you don't have a cs111 directory because this is a different server.

  3. Create a public_html directory. This is where you will put files that you want others to see on the Internet.
  4. Go into your newly created public_html directory and view its contents (which should be nothing).
  5. Copy the example.css, example.html, and example.gif files from your lab machine to the web server. (What? How?!?)
    • In the terminal on your lab machine, go into your ~/cs111/lab0 directory.
    • Copy all the files that start with example to your public_html directory on the web server, using
      scp example* username@csci.wlu.edu:public_html
    • Similarly to before, answer yes to the questions and then enter your password (which you won't be able to see).
  6. Open another tab in your browser so that you can switch between the lab instructions and your work. Point your browser at the location: http://csci.wlu.edu/~yourusername/example.html
    You should see the example web page. If you get an error message in the browser window, ask for help. If no one is around and the error message is a "permission denied" message, try executing this command in a terminal, in the public_html directory:
    chmod o+r *
    and then reloading the page. This command means "change modifiers" and is giving others read permission on those files.
  7. Point your browser at the location: http://csci.wlu.edu/~yourusername/
    What do you see?
  8. Copy example.html into a file named index.html. Now, point your browser to the location: http://csci.wlu.edu/~yourusername/
    What do you see?

    (For now, just recognize that index.html hides the contents of your web directory and is the default file that the web server "serves" when someone accesses a directory.)

  9. Type emacs index.html &

    emacs will open by default on a "scratch" file. Under the "Buffers" menu, select index.html

  10. Look at the file and compare it to what you saw in the browser. How are things related? For example, when you look at certain text in the HTML file, what does it look like in the browser? Or, look at it the other way: look for text you see in the browser. How is that marked up (the M in HTML) in the HTML document?

    There are some elements in the file that are just meant to give you a pretty starting point for your web pages that you don't need to understand.

  11. Edit the file so that the title (between the <title> and </title> tags) and the top-level heading (between the <h1> and </h1> tags) say Your Name's Web Page instead of Example Web Page. Save the file. Reload the page in the browser.
    How cool is that?
  12. In your web browser, view the source for the web page. You can do this by right-clicking on the page and then you'll see "View Page Source" or something similar. Viewing the source is another way to help you find errors in your HTML.

    In another tab in your browser, go to the W&L web page or another page of your choice, and view its source. Anyone can view any page's HTML source!

  13. Add two more links to the page.
    1. The first link will be to the CSCI111 student sitting to your right--perhaps that person is across the aisle. If you're in the rightmost chair, you'll link to the leftmost person in the row behind you. If you're the back, rightmost person, you'll link to a remote student. If you're remote, we'll talk about the link ring you're making.

      Find out the person's full name, username, and year to create the link. The text for the link should include the student's full name and year, e.g, first-year, sophomore, too. In the end, we will have created a "ring" of CSCI111 students.

    2. The second link will be to some online news article about computer science. See the Extra Credit page for ideas on how to find such an article. (You should not simply take one of the articles I have linked from that page.) You may want to search for an article after lab, depending on your time constraints because we still have a lot to do in this lab.

    Note the pattern of the links in the HTML file. How would you create a link to CNN? (You will perform similar activities throughout the course. You'll look at example code that does something similar to what you want to do, copy the code, and modify the code to do what you want.)

  14. Next, add an image to your web page. Find an image from the web. Yes, you are likely violating some copyrights, but it's for educational use, so you should be okay.

    This gets a little tricky, but we'll try.

    1. In your terminal on the web server, make sure you're in your public_html directory.
    2. Get the URL of your image. Typically, you can right-click on an image and there is an option to "View the Image in its own tab" or similar functionality. Copy that URL.
    3. Back in the terminal on the web server, run the command
      wget the-url-you-just-copied

      wget is a non interactive network downloader. We're using it to get an image by its URL.

    4. View the contents of your directory. It should now contain the image.
    5. If the image has an "ugly" name, rename it using the mv command, for example: mv original_ugly_name.jpg newname.jpg Save the image into the appropriate directory.
  15. Change the image (img) tag in your web page to display this image. The alt attribute is used by screenreaders to describe the image to blind people. If you want to change the size of the image, use the width attribute, e.g., width="300" would make the width of the image 300 pixels.
  16. Don't forget to update the information at the bottom of the page as well, to give yourself credit for your work.

    Note that you didn't need any fancy software to create a nice web page! I create my web pages for the course in a similar manner.

Objective: Using the Canvas Discussions

We will use the Canvas forums for submitting summaries for the "Broader Issues in Computer Science" part of the course.

  1. Use your W&L username and password to log in to Canvas.
  2. Navigate to the "FUND OF PROGRAMMING I" course site.
  3. Navigate to the "Discussions" from the side menu bar.
  4. Read over the existing entries/topics.
  5. Note the Broader Issues assignment is due before 11:59 p.m. on Thursday.

Objective: Using the Interactive Textbook

Register for the textbook, creating a username/password for the course WLU_CSCI111_W22. Please make the email, first name, and last name be what you use for W&L so that I can recognize your account.

While the book and registration is free, please consider donating $10 to help with their costs of hosting and development.

Read the first two sections, answer the questions in the section, and mark the sections as completed. Check the Assignments page to make sure you have completed the assignment.

Each week, there will be an assignment in the interactive text book that is due before the lab. You will complete the readings and do the problems. This will help prepare you for the lab. The next "pre-lab" assignment will be released on Friday.

Finishing up: What to turn in for this lab

There is nothing physical to turn in for this lab. I will see your submissions in Canvas, in the interactive textbook, and on the web!

Labs are due at the beginning of Friday's class.

Assessment