Skip to main content.

Lab 0: Introduction to Linux and HTML

Welcome

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 the Linux operating system and HTML.

The computer workstations in our lab can run both Linux and OSX operating systems. We will use the Linux operating system in this course.

Note: Outside of lab, 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. Some work for this course you can do from any computer, but most work you will have to do directly on the Linux machines.

Goals for Lab Zero

This lab is a "warm up" for 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.

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. apply basic Linux commands given various situations
  3. access the Web on the Linux machines
  4. access the CSCI111 home page
  5. use the Sakai forums
  6. enroll and use the Piazza Q&A forums
  7. create a text file with a text editor
  8. 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 the Linux Machines

For this part of the lab, work through the handout and do the exercises. Hand in the worksheet before you leave lab.

Objective: Using the Sakai Forums

We will use the Sakai 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 Sakai.
  2. Navigate to the "CSCI 111 W16" course site.
  3. Navigate to the "Forums" from the side menu bar or from the home page.
  4. Read over the existing entries/topics.

Objective: Using Piazza (Q&A Forum)

We will use Piazza for asking/answering questions. The student assistants and instructor will monitor the forums and answer questions. Students are also welcome to and encouraged to answer questions. By asking questions on Piazza, you'll benefit from the collective knowledge of your classmates and instructors. We encourage you to ask questions when you're struggling to understand a concept--you can even do so anonymously.

The Piazza forum is linked from the web site, in both the head and side navigation bars.

  1. Register/enroll in the forum if you haven't already. You should have received an email about enrolling already.
  2. Navigate to the Q&A forum
  3. Read the "Welcome to Piazza!" post.
  4. Create a new question and put it in the folder "practice".

We will only answer limited questions about this part of the lab. It's important for you to learn how to use new software by exploring the software.

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.)

  1. Open a terminal using the shortcut icon you made earlier.
  2. Go into your public_html directory. This is where you will put files that you want others to see on the Internet.
  3. Copy the example.css, example.html, and example.gif files from /csdept/local/courses/cs111-01/handouts/lab0 into your public_html directory. (Recall: what is the special name for the current directory? How can you copy all three files using one command?)
  4. 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://www.cs.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.
  5. Point your browser at the location: http://www.cs.wlu.edu/~yourusername/
    What do you see?
  6. Copy example.html into a file named index.html. Now, point your browser to the location: http://www.cs.wlu.edu/~yourusername/
    What do you see?

    (We can talk about what's going on here more later, but for now, just recognize that index.html hides the contents of your web directory.)

  7. Type jedit index.html &

    The "&" (called the "ampersand") is a special command to let the terminal know that you want the program to open in a new window and lets you keep using the terminal window too. I will also refer to the ampersand as saying that you want the command to "run in the background".

    jEdit is a "text editor", i.e., a program that helps you create files. jEdit looks similar to a word processor. Look through some of the menus and you'll notice a lot of functionality that you'd see in a typical word processor, such as save, open, copy, and paste.

  8. 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?

    Note that the page has several links to other online documents. The HTML Help link is useful if you want to develop more web pages after this brief introduction.

  9. 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 the leftmost person in the first row.

      If you're in Parmly 413, make "link rings" based on the layout of the computers, as appropriate. (I can talk to you about this in person more easily than I can explain in words.)

      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.)

  10. Next, add an image to your web page. Find an image from the web. Save the image into the appropriate directory. Change the image (img) tag in your web page to display this image.
  11. 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.

Finishing up: What to turn in for this lab

  1. Turn in your UNIX worksheet to the instructor before leaving lab.

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

Ask well before the deadline if you need help turning in your assignment!

Grading (60 pts)