CS120 - Setting up a CS account and Basic HTML

Preamble

The purpose of this exercise is to introduce the students to the computing systems of the Math and Computer Science department. The student will develop very basic skills required to use the Unix computers Math/CS lab such as logging in and changing passwords. These skills will be necessary to accomplish the more advanced tasks.

Introduction to HTML for web design.

Objective

  1. Set up Linux account
  2. Become familiar with the Linux/Unix system

Background

Unix and Windows are two different operating systems which are run in the Math/CS lab. Each manages the computer's resources in a different way, and each requires the user to interact with the computer in a different way. It is a good idea to become familiar with both.

Required Tasks

Part A: Logging in and changing your password.



Account Creation:

  1. The lab admins should have already created an account for you. Your password is NOT connected to your regular Clark password. Obtain a password slip from your instructor or lab TA.

  2. To log in to the Linux system from a Windows computer, use PuTTY to connect to csgateway.clarku.edu.
  3. Once you are logged in, use yppasswd to change your password.
  4. Complete the following tasks:
    • Become familar with some unix commands. Try typing the commands into a terminal window:
      • ls lists the contents of the current directory
      • ls - l lists the contents of the current directory in long format
      • pwd print working directory
      • pine pine is an email reader, type Q to exit
      • pico filename.txt pico is a text editor, type CTRL-O to save, or CTRL-X to exit.
      • more filename.txt displays a text file, one screen at a time
      • man more prints the manual (help) page for the "more" command. Try other commands.
      • logout closes the terminal session if logged in remotely.
      There are many more useful commands, you can search online for a guide.

Required Task 2

Part A: Introduction to HTML tags.

HTML is a structured markup language describing a document, for which the building block is a tag. Tags mark the opening and closing of a document fragment, and fragments can be nested. An opening tag looks like <html>, and the corresponding closing tag looks like </html>. Opening and closing tags must be matched like parentheses.

A basic HTML document must have the following structure.

<html>
  <head>
    <!-- information about the document goes here -->
    <title>This is the (optional) page title</title>
  </head>
  <body>
    <!-- content of the document goes here -->
  </body>
</html>

Notice that the page title is only displayed as window or tag title for the web browser, but it is not shown inside the page.

An opening tag could be annotated with attributes, the use of which is different for each tag. An example tag with attributes looks like <body bgcolor="black" text="white"> ... </body>.

Some tags are not meant to enclose document fragments. These tags are self-closed, and they look like <br/>. This particular tag breaks the flow of text into a new line.

A listing of HTML tags by function can be found at http://www.w3schools.com/tags/ref_byfunc.asp. We expect you to find out everything you need about HTML tags from that website.

There are close to 90 HTML tags. In this lab we will use some tags from the Basic, Formatting, Images, Links and Lists categories. Please choose several tags from the list and look through the attributes. Here we provide an example of how to use the reference:

Look at the <p> tag which is used to enclose a paragraph of text. Its reference page shows an "align" attribute, so if we want to write a paragraph in which texts are aligned by the center, simply write the following:

<p align="center"> This is my first time using an HTML tag </p>

Which will look like,

This is my first time using an HTML tag

For more HTML basics and tags, a more complete tutorial is available here.

Part B: Making a simple HTML web page.

Using the reference provided, let us write a simple HTML web page. The editor we are going to use to write HTML code is called Notepad++. The program is located at Start Menu.

The following instructions will guide you through the web page creation process:

  1. Create a directory named lab09 either on your network drive or a flash drive.
  2. Using Notepad++, create an html file and name it index.html. Save it under lab09.
  3. Place the basic HTML tags (html, head and body) at the right place in the file.
  4. Find a poem that you like (if you can't think of one, try this one). Then, find two images on the web that you think illustrates this poem well. You can use Google Image search.
  5. Using the title tag, set the title to the title of the poem.
  6. Set the background and text color of the web page to a color that reflects the theme of the poem, by adding appropriate attributes to the body tag. A list of color names can be found here.
  7. The main body of the web page should contain a heading enclosed by <h1> tags, and put the title of the poem inside the heading. The heading is then followed by a paragraph that credits the author. Place the year of the poem if known.
  8. After the heading and the author, place the images you found online there. You will first save the images at lab09, and then insert the images to the document using the <img src="..."/> tag. Notice that the img tag is self-closing.
  9. After the images, place the text of the poem, formatted with the <p> and <br/> tags.
  10. At the end of the page, insert a horizontal rule <hr/> and include the phrase: Created by yourname. This text should have a different font color (use the font tag here).
  11. Insert a small heading <h3> and call it Image credits. Then, create an unordered list where each list item indicates the website URL where you found an image you used earlier, and then insert a link to the website. Use the <ul> tag for the unordered list, and <li> tag to markup list item. The ink is inserted using the <a> hyperlink tag.
  12. Go back to the text of the poem. Identify three interesting keywords or keyphrases in the poem. For each keyphrase, try to do a Google search, and insert a link to one of the search results.

Once you are satisfied with your web page, copy it to the CS server

  1. Use a file transfer program such as WinSCP, FileZilla, or Fetch.
  2. Connect to csgateway.clarku.edu, use port 22, and make sure it's set to SFTP or SCP.
  3. Copy your web page folder into your ~/public_html/ folder.
  4. In your web browser, enter http://www.cs.clarku.edu/~yourloginname/lab09/index.html (remember to replace yourloginname with your CS account user name) and verify that the page looks what you think it does, and that all your links work.

Make a page with a Java applet.

If you've made it this far and you still have time, follow the instructions on the slides to include one of your Java programs on a web page.