CS114 Lab 1: CS Accounts, ftp and basic html

In the first lab we will practice using some basic applications, like TextWrangler (text editor), Fetch (graphical secure file transfer client/program), and Safari/Firefox (web browsers). We will begin learning HTML (Hypertext Markup Language), a language for structuring the content of web pages. We will also become familiar with the process of uploading material to the CS server and viewing our web pages in a browser.

HTML Elements and Tags

An HTML document is composed out of elements that begin and end with tags. For example:

<title> CS114 accounts, ftp and basic html </title>
start tag contents end tag

The following are some HTML tags that we will work with today:

HTML document structure

Here is a simple html document.

<!doctype html>
<html>
 <head> 
  <title>My Little Page</title> 
 </head>
 <body>
  <!-- this is a comment, I can write whatever I want here -->
  <p>This is the text on my little page.</p>
 </body>
</html>

Pay attention to the html elements, and how they are properly nested.

Tasks for today:

  1. Log into the Mac, which run Mac OS X
  2. Request a CS account. You will use this account through out this semester, and in the future, should you decide to take more CS courses. To request your own account, please fill out our account request form.
  3. Using TextWrangler on a mac (or Notepad on a PC), create a simple web page in HTML. Fell free to start with the simple page given above. But in any case, keep it simple!
    Note: Do not use Microsoft Word. Don't even cut and paste from Word. This can introduce strange items into your HTML.
    Save the file on your desktop under the name yournameLab1.html(for example, jeanLab1.html).
  4. View the web page locally in a browser.
    Your browser's location bar should start with file:///Users/
  5. Upload the file to the CS server using Fetch on Macs (or WinSCP on PCs).
  6. View the newly-uploaded page in a browser.
    Your browser's location bar should start with http://cs.wellesley.edu/
  7. Modify your web page, in your text editor, by adding more text and tags, save it, and view it locally in a browser.
  8. Upload the new version to the server, using Fetch (or WinSCP).
  9. View the web page in a browser.
  10. Repeat the process "modify-upload-view" several times.

Valid HTML5