ETSU Logo

CSCI 1210

Essentials of Web Development

Lab 1.6 Instructions

Create a New Folder & Download Starter File

  1. On your removable drive, navigate to the youretsuid.csci1210.com/labs folder. In that folder, create a new folder named lab1.6
make a folder
New folder for Lab 1.6
  1. Download the starter file by clicking here. Save the file in your \labs\lab1.6 folder. Then extract the file lab1.6starterfile.txt and css subfolder to your lab1.6 folder
  2. Open lab1.6starterfile.txt in Notepad++ (you can easily open it by right-clicking on the file name and selecting 'Edit with Notepad++' from the menu)
  3. Save the starter file in your lab1.6 folder as (File ⇒ Save As) lab1.6.html
  4. Update the information in the <head> element
  5. complete the head element
    Complete the head element
    Don't sweat all the gobblygook that's in the red square - we'll discuss it later in the semester. Then, it'll make perfect sense    🙃
  6. Save your changes

Enter lab1.6's Content

  1. So this is a list that includes advice to new college students (I know - not all of you are newbies, but it's good advice anyway). The content is (mostly) from Lifehacker.com
  2. Funny thing: We can't nest a paragraph element (<p>) inside a list without the validator throwing a hissy-fit. So, we'll have to do each list item one at a time. Ultimately, we're going to have eight lists with one item each; with each item being followed by a paragraph
  3. So here's our starting point:
  4. Starting point
    Starting out
  5. After the closing </p> element, make a new line and add:
  6. first list
    First List
  7. Again, after the new closing </p> tag, enter:
  8. add a list
    Adding another list
    Something to note here. Since our second list should be #2, we use the start='2' attribute/value to tell the browser what number to start the list with. We'll do this for each of the remaining lists
  9. Following the same steps, add the remaining lists and their associated paragraphs:
  10. add a list
    Adding another list
    add a list
    Adding another list
    add a list
    Adding another list
    add a list
    Adding another list
    add a list
    Adding another list
    add a list
    Adding another list
  11. Save your work and look at it in Chrome (either Run→Launch in Chrome or View→View Current File In→Chrome). It should look like this:
Final product
Final product
Remember, the 'Validation Icons' won't appear when you're looking at the file locally. Once they're uploaded to the server and displayed from it, they'll be available (
http://ramseyjw.csci1210.net/labs/lab1.6/lab1.6html vs.
file:///H:\ramseyjw.csci1210.net\labs\lab1.6\lab1.6html )

Upload and View the File

  1. Having said all that (above) - let's upload and look at our new file!
  2. Launch FileZilla
  3. In the Host field (near the top left), enter 'csci1210.com' or 'ftp.csci1210.com' [just use 'csci1210.com']
  4. In the Username field to its right, enter your ETSU user id
  5. Enter the password in the Password field (I'll provide your password in class, not this - public! - document)
  6. Click the 'Quickconnect' button
  7. If all goes well, you should see something similar to what's below:
filezilla
Logging in to FileZilla
  1. On the left ('local') side of the display, navigate to your external drive\etsuid.csci1210.com\labs\lab1.6 folder
    1. On the right ('remote') side of the display, double-click on the 'labs' folder
    2. Right-click on the white space inside the lower right pane. Select 'Create directory and enter it'. Name your new directory lab1.6
    3. Referring to the image below, at this point you should see similar paths on the left and right. On the left, you should also see lab1.6.html displayed in the lower pane, but not in the right lower pane. Double-click on lab1.6.html and the css folder (or, click, drag right, and drop). Now you should see something similar to the image displayed below:
    filezilla
    Setting up the lab1.6 folder
    1. Return to your browser. Open a new tab in the browser and enter

      youretsuid.csci1210.com/labs/lab1.6/lab1.6.html

      For example, mine would read:

      ramseyjw.csci1210.com/labs/lab1.6/lab1.6.html
    2. Now, here's where the fun begins! Hold down the Control (Ctrl) key. While holding the key down, click on both of the icons in the lower right corner of the display. This will launch the HTML and CSS validators in separate tabs
    3. Check each of the new tabs. You should see a lot of green. If you have errors, though, try to decipher the error messages and fix what's wrong. If you can't, raise your hand and I'll help
    4. If you had errors, fix them, save your changes, return to FileZilla, and double-click on the file (on the left, not the right)

    5. Finally, copy the URL of your page (from the browser's address bar). Open a new text file in Notepad++. Paste the URL into the text file. Nothing else. Save the file as lab1.6.txt. Upload lab1.6.txt (and nothing else!) to the Lab 1.6 folder on D2L's Dropbox
    🙂 Have a nice day!