CSCI 1210

Essentials of Web Development

Lab 1.5 Instructions

Create a New Folder & Download Starter File

  1. On your removable drive, navigate to the folder. In that folder, create a new folder named lab1.5
Create <span class='mlab1.5 Folder
Create lab1.5 Folder
  1. Download the starter file by clicking here. Save the file in your \labs\lab1.5 folder

Here's a shortcut for opening your Brackets projects. In File Explorer, navigate to the labs folder. Right-click the lab1.5 folder and select 'Open as Brackets project'. That'll launch Brackets and set the current directory to lab1.5

  1. Open lab1.5starterfile.txt in Brackets (you can easily open it by right-clicking on the file name and selecting 'Edit with Brackets' from the menu)
  2. The starter file includes a series of instructions for creating headings (1 and 2), horizontal rules, paragraphs, ordered lists, unordered lists, and nested lists. The instructions are in the form of comments embedded in the document. Don't replace the comments! If they're in place, it makes it easier to help you if you run into a snag
  3. Save the starter file in your lab1.5 folder as (File ⇒ Save As) lab1.5.html'
  4.   In places where you are instructed to enter personal information (hometown, etc.), feel free to fictionalize it. Make sure you replace my information in the example below with yours

Enter lab1.5's Content

Beginning 'lab1.5.html'
Beginning lab1.5.html
  1. Enter the above information into your lab1.5.html document, beginning, as in the screen shot, on line 1

  2.   Be sure to use your name, not mine!
  3. (Don't worry...pretty soon, we'll make a template file and you won't have to type everything in for every assignment, just update content for a given assignment. We're doing it 'the hard way' the first few times for practice)
  4. Take another look at line 9. This is Javascript code that will insert the links to the validator, which we will use to make sure there are no errors in your code. Javascript is beyond the scope of this class, though I plan on making some JS solutions available to you for your semester project, if you wish to use them
  5. After the </head> tag, insert a line and enter a <body> tag
  6. Place the cursor at the end of the document. Press 'Enter' twice and enter </body>. Press 'Enter' and enter </html>. You now have all of the content of your starter file nested within the HTML structure and can complete the lab
  7. Now, scroll back up to the opening body tag and, under it, complete the (embedded as comments) instructions. Remember, don't delete the comments
Getting the remaining instructions from the starter file
Getting the remaining instructions from the starter file
Modifying the starter file
Modifying the starter file
  1. In the example above, you would surround 'Your Name Here' with a heading one (h1) element, then an opening emphasis tag (em), replace the words 'Your name here' with your name, and the closing emphasis tag. Then, you'll put in a horizontal rule. Then enclose 'My Hometown' inside a heading 2 (h2) element. And so on
Screen shots of Lab 1.5
Following the instructions
  1. When you're done editing, save your changes. In Brackets, click 'Run' on the menu bar and 'Launch in' Chrome or Firefox. Make sure everything's displaying the way it should (see below). Then, we'll upload the project to the server
  2. Refer to the following screen shot to see how your page should appear:
Screen shots of Lab 1.5
Screen shots of Lab 1.5

  Note that the icons in the lower right of your page will not work when you display the local file on your lab PC. The page has to be loaded from a server for them to work

Upload and View the File

  1. The last thing we're going to do today is upload and view our new file to and from the server
  2. Launch FileZilla
  3. In the Host field (near the top left), enter ''
  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:
Connecting to the server with FileZilla
Connecting to the server with FileZilla
  1. On the left ('local') side of the display, navigate to your external drive\\labs\lab1.5 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.5
    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.5.html displayed in the lower pane, but not in the right lower pane. Double-click on lab1.5.html (or, click, drag right, and drop). Now you should see something similar to the image displayed below:
    Uploading file(s) to the server with FileZilla
    Uploading file(s) to the server with FileZilla
    1. Return to your browser. Open a new tab in the browser and enter For example, mine would read:
    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)

      If you copy right to left, what you'll be doing is copying your old file over your new one -- wiping out all of your changes!
    Validating HTML file with W3C's Nu Validator
    Validating HTML file with W3C's Nu Validator
    1. Finally, copy the URL of your page (from the browser's address bar). Open a new text file in Brackets. Paste the URL into the text file. Nothing else. Save the file as lab1.5.txt. Upload lab1.5.txt (and nothing else!) to the Lab 1.5 folder on D2L's Dropbox
    Submit this file to the D2L Dropbox Folder
    Submit this file to the D2L Dropbox Folder
    (using your userid, of course!)