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.

Drag the first_page.html file from your desktop into the Chrome window.

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 ctrl + r.

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 shift key 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 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.

Guest Accounts:
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, and if multiple students upload a folder called just `lab1`, files will be overwritten.)

Once your settings are filled in, click Connect and you should be connected to the cs.wellesley.edu server.

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.

Enter the 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:
http://cs.wellesley.edu/~yourusername/lab1/first_page.html (replace yourusername).

Important note: You now have two copies of your first_page.html file:

The original version on your desktop inside the lab1 folder.

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.