Lab 1: Basics
In this lab, you will:
- Practice using basic web development applications including a code editor and FTP program.
- Begin learning HTML (Hypertext Markup Language), the language for structuring web pages.
- Practice uploading web files to the cs server and viewing web pages in a browser.
If you have not yet requested an account, do so by filling out the account request form. If you don't yet have your own account, we have guest accounts you can use in today's lab.
Download/open TextWrangler and Fetch
This course revolves around three important software programs:
- Your web browser
- A code editor— we'll be using TextWrangler.
- A SFTP (Secure File Transfer Protocol) Program; we'll be using Fetch.
Students on the lab computers, open TextWrangler and Fetch. If it's not on your dock, you can find it via the Spotlight (magnifying glass icon on the top right). If you are not used to the Mac, let us know and we can help you out, or ask another student nearby.
On your own mac computer, and after class, download a free copy of TextWrangler from http://www.barebones.com/products/textwrangler/download.html and Fetch from http://web.wellesley.edu/Computing/Fetch/fetch.html, so you can work on your homework. If you are on a pc, you may use any text editor you are used too, like Notepad.
Your first HTML file
Create a new folder on your desktop and name it
Here's some general rules for naming folders and files:
- Don't use spaces. Separate words with hypthens (
-) or underscores (
_) to separate multiple words.
- Don't use special characters like
- Stick with lowercase letters, avoiding uppercase. Some web servers are case sensitive and you'll confuse yourself if you mix upper and lower case.
By default, when you first load TextWrangler you should see a blank text file labeled
untitled, waiting to be edited.
In this file type the following:
Save this file in the
lab1 folder on your desktop, with the name
When naming files, we'll follow the same naming conventions we outlined above for folders.
On a Mac, your final file path will be something like
Now, add in the structural tags around the content to be displayed:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <meta name=author content="Your name here"> <title>title here</title> </head> <body> <h1>Hello World!</h1> <p> Join us for a n exciting semester, here in cs115! You don't even need to bring your own server! </p> </body> </html>
Notice the tags are not capitalized: HTML is not case-sensitive, but it is best to adopt a consistent format for readability. Also notice the indentation used: although HTML ignores any extra whitespace, it can be used to indicate the nesting/structure of your code, which also improves readability, and can help with debugging.
Don't forget to save your changes before going to the next step.
Viewing your file
Next you want to load your html file in the browser. In this course we'll use Chrome as our primary browser. There are 2 ways you can load your HTML file in Chrome.
first_page.htmlfile from your desktop into the Chrome window.
- From Chrome, goto File > Open File (or hit
o) and locate the file from your desktop.
Once your file is loaded in your browser, you'll only need to refresh the page to see any changes you make.
You can quickly refresh the page by hitting
Practice this workflow:
- Make a change in your HTML file
- Save your changes
- Refresh the browser to see your changes
- Repeat steps 1-3 a couple more times
Not seeing your changes?
There are two reasons you may not be seeing your changes in the browser:
- The browser may be caching (i.e. saving) a previous version of your
file. Try holding down the
shiftkey while refreshing to clear the cache.
- You may accidentally be working on a file that is different than the one you're viewing in the browser. This happens sometimes as your projects get more complex and you're wrangling multiple files. Check the path of your file in your code editor and in the browser and make sure they match.
Uploading your file to the server
To move your web files from your computer to the cs server, you'll use a SFTP (Secure File Transfer Protocol) program. In this class, we'll use Fetch.
From the main Fetch window, choose the New Connection option under the File menu.
This will bring up a window where you'll enter your SFTP credentials. For your username and password, you'll use the credentials you created when filling out the CS115 account request form. For the other fields, match the graphic below.
If your server account has not yet been created, you can use one of our temporary guest accounts. See the whiteboard or instructor for credentials.
If you are using a guest account, rename your `lab1` folder on your desktop to `lab1_yourfirstname_yourlastname` before the next steps. (Because the guest accounts are shared, if multiple students upload a folder called just `lab1`, you'll overwrite each other.)
Once your settings are filled in, click Connect and you should be connected to the
You are in what is called the top-level directory of your account. Here, you'll see the
public_html folder, which is where you'll put all files that you want to be publicly available on the web.
public_html folder by double-clicking it.
Let's upload your work so far. Drag the
lab1 folder from the desktop to the Fetch window.
This will copy the entire lab1 folder and its contents into the
public_html folder on your server.
At this point let's view your work by copying this URL into Chrome:
Important note: You now have two copies of your
- The original version on your desktop inside the
- The copy you uploaded to the cs.wellesley.edu server.
This means if you make a change to #1, it will not be reflected when you refresh the
http://cs.wellesley.edu/~yourusername/lab1/first_page.html URL. You will have to re-upload the file in order to see the changes.
Likewise, if you make a change to the file directly on the server, those changes will not be reflected in your local copy.
We recommend though that you only make changes to the local files only. When your edits are done, upload your work to the server.
- Shortcuts > New Shortcut > Create one to your cs account
- Creating/editing files
- Creating/editing folders
View > Text Display > Show/Hide Line Numbers
- Increasing/Decreasing text size with