ETSU Logo

CSCI 1210

Essentials of Web Development

Lab 3

  1. Create a folder named lab3 in your labs folder on your external drive
  2. Download     The Lab 3 starter file and save it to your lab3 folder. This file contains instructions as comments in the file for how to complete it. Replace the content in the paragraphs and lists with your own (feel free to make stuff up...this is a public-facing website, after all)
  3. Open the file in Notepad++ (NPP)

    In the <head> element, update the meta-information (<meta> elements and comments) as directed
  4. Modifying the meta-information
    Modifying the meta-information

  5. Save the file as lab3.html in your external drive's labs\lab3 folder. Follow the instructions included in the file to complete it.

  6. Note: Once again, remember that this site is accessible to the world. DON'T put anything here that you wouldn't want to share with the everyone!

  7. Create a new file in Notepad++
  8. Save the file in your lab3 folder as lab3.css.
  9. Enter the required comment block at the top of your lab3.css file file (    Hint: You can copy the meat of the text from between the <-- and --> tags in your HTML document into your CSS document in between the /* and */ tags. Then, make changes to the text to reflect that this is a CSS file)
  10. Starting an external stylesheet
    Starting an external stylesheet

    NOTE: the 'Purpose line should be typed in all as one line. The screen shot shows it in separate lines because I had to shrink the window down to capture it all for these instructions

  11. Create a rule for the <body> element that changes the document's background-color to #2E6E12, the font-family to Arial, Helvetica, sans-serif and color to #FFFC7C
  12. Now, create a rule for the <div> element that sets its width to 800px, margin to 0 auto, background-color to #164900; padding-top and padding-bottom to 10px and padding-right and padding-left to 15px; and border to 4px double white. Finally, make the h2 font-style oblique
  13. Adding CSS rules to the page
    Adding CSS rules to the page

  14. Save your work and return to your lab3.html file
  15. In the head element of your lab3.html file, add a link to lab3.css in the head element of your html document: ⇒ <link rel="stylesheet" href="lab3.css">
  16. Linking to an external stylesheet
    Linking to an external stylesheet

    parts of a link
    Parts of a Link

  17. Note that the content of the page is enclosed in a <div> (division) element. This is how we 'chunk' content in more complex web pages
  18. Creating a container div
    Opening <div> tag

  19. This picture shows where the closing </div> tag should appear in the document
  20. Closing </div> and SSI
    Closing </div> tag
  21. If it isn't already there, add the <script src="/js/w3c.js"></script> code to the end of your page's content, immediately before the </body> tag
  22. What the Javascript code does is make the server insert code into your file when it loads that will resolve to links to the W3C HTML and CSS validators. This won't work when we look at the file locally, but, if entered correctly, will, when we browse to it on the csci1210.com site

    Linking to a Javascript File
    Linking to a Javascript File

  23. Save the file and return to your browser. Refresh the page and take note of the changes that the newly added CSS code has created

FileZilla

  1. Launch FileZilla and connect to the server. If you need a refresher on how to connect to FileZilla, click here, starting with #14
  2. In the left pane ("Local site:") of FileZilla, navigate to your lab3 folder. Remember, when you click on a folder in the upper pane (left or right), FileZilla displays that folder's subfolders and/or files in the lower pane
  3. In the right pane ("Remote site:"), navigate to your labs folder
  4. On the remote (right) side of the display, right-click on your labs folder, select 'Create directory and enter it'. Name the new folder lab3. Then click OK. This will name the lab3 (sub)folder and then make it your current folder
  5. Creating a new folder and entering it
    Creating a new folder and entering it
  6. Check the address bars on top of the left and right panes and ensure you're in the right location, both on your local computer and on the server
  7. FileZilla address bars
    FileZilla Address Bars
  8. Select lab3.html and lab3.css in the lower left pane. Then drag and drop them into the lower right pane (on the server)
  9. FileZilla address bars
    FileZilla Address Bars
  10. Once the files have successfully uploaded, return to your browser and enter the URL for your page. (It should be [your_etsuid].csci1210.com/labs/lab3/lab3.html. If it isn't, you didn't create your file/folder structure correctly, and you'll want to change that)
  11. Tap Enter and inspect your new page. It should look more or less like the image below.
  12. Lab 3 output
    Lab 3 output

    Note: the content on your display should be centered. It looks a little offset because I had to resize it to get the screen shot

  13. Check your file's validity for HTML and CSS through W3C by Ctrl+clicking on the two links at the bottom
  14. Validator links
    Validator links
  15. If all goes well, you should see a lot of green. If you see errors, look at the error messages and try to determine what went wrong. Each message will indicate a line number, corresponding to the location where the validator thinks the mistake is (it isn't always right). Look at your source file and see if you can determine where the error lies. If you still can't figure it out, raise your hand and one of us will help you
  16. W3C validator output
    W3C validator output
  17. If you had errors, once you've corrected them, save your work and upload the new file to the server using the steps outlined above. You'll get a dialog box warning you the the file already exists on the server. Click "OK" to overwrite the old file
  18.  Keep this in mind: in this class, we always drag left to right (local to remote). If you make a bunch of changes to a file, then accidentally drag and drop in the other direction, you'll end up overwriting your changes and will have to do them all over again!

  1. If you had to correct errors, go back to the validator page once you have finished. You don't have to click the icons again...just refresh the page. Hopefully, this will now display green. If not, repeat the steps above and refresh the validator page again to confirm that your page is now valid HTML and CSS
  2. Return to Notepad++ and open a new file. In this file, paste a copy of the URL for your lab3.html page. For example, if I were submitting the assignment, I would type (or copy & paste) ramseyjw.csci1210.com/labs/lab3/lab3.html. Save the file as lab3.txt in your lab3 folder
  3. Log in to D2L and click on "Evaluation" and "Dropbox"
  4. Upload lab3.txt to your Lab 3 Dropbox folder
Dilbert website

Upload the file lab3.txt ONLY!
Do NOT upload your source files!