When you first view this page, it will be on your web browser. The text is formatted in different styles depending on tags that are given in the source document.
The objective of this lab is to...
The first thing you'll need to do is download an FTP client. I use FileZilla as has versions for Mac, Windows and Linux. If you have an FTP client you already like, feel free to use that.
After you install FileZilla, run the program. On the right hand side it should say something like "Not connected to any server." Let's change that. Close to the top of the window there's a quick connect option, but let's not use that. Instead, click on File and choose Site Manager.
Click on the New site button. It will highlight a new option under My Sites that you can call whatever you like. Maybe cim101?
Now click on the protocol dropdown menu and change it from FTP to SFTP.
For the host, type in iad1-shared-d12-03.dreamhost.com
For the user, type in cim101
For the password, type in 1K&tlq$fJl
When you click the connect button, you should eventually see the folder structure for the cim101.nerdlab.miami server. There will be an index.html file as well as a folder called student.
Let's stop reading this file in it's pretty format. Let's read it in a text editor. Do you have a text editor? I use Sublime as it has downloads for Mac, Windows and Linux as well.
Let's get nerdy!
Right click this page (or option click if you're using a Mac) and from the context menu that pops up, choose View Page Source.
Right click again and choose Save As. Make sure the file type is HTML Only. Choose a file name that has no upper case letters and no spaces.
Now open that file with your text editor!
Find this paragraph in the code! Great now you're looking at some HTML elements. See how the less than and greater than signs have a word or letter inside of them? That's called a tag or element. Now see how each tag has a twin, with the twin on the end containing a slash.
The p tag creates a paragraph. h1, h2, h3 all the way up to h6 create headers. The em tag creates emphasis.
What if you want to link to something? That's the a tag, with an href parameter.
What if you want to have an image? Use the img tag.
Those other tags you see are more structural: