ETSU Logo

CSCI 1210

Essentials of Web Development

Lab 4

  1. Create a folder named lab4 in your labs folder on your external drive
  2. Open your Lab 3 HTML file (lab3.html) in Notepad++
  3. Make the necessary changes to the head elements of the file to indicate that this is Lab 4 (e.g., <title>Jack's Lab 4</title> & comment block)
  4. Save the file as lab4.html in your external drive's labs\lab4 folder
  5. Open your lab3.css file and save it as lab4.css in your external drive's labs\lab4 folder
  6. Modify the required comment block at the top of your lab4.css file and save it. For 'Purpose,' you can enter 'Tables'
  7. In the head element of your lab4.html file, modify the link to lab4.css to point to ⇒
    <link rel="stylesheet" href="lab4.css">
  8. 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.

Creating a Table

  1. Under the last heading ('Places I'd Like to Visit'), delete the list -- <ol>...</ol>, <ul>...</ul>. Change the remaining heading from 'My Interests' to 'Classes that I am Taking this Semester'
  2. Let's make a simple table. Where the unordered list was, enter <table></table>
  3. Click between the opening and closing table tags, press Enter twice, the up arrow ( ), and Tab. This is our table container. Remember, a browser draws tables row-by-row
  4. Using the same series of steps described above, make your first row, <tr></tr>. Again, click between the opening and closing table tags, press Enter twice, the up arrow ( ), and Tab. This will be the table header row
  5. Make a second table row after the first
  6. Read this entire instruction before doing anything.

  7. In the indented space between your first <tr></tr> tags, type <th></th>. Then highlight the element, both tags. Type Ctrl-C (hold down the Ctrl button and type c - Copy). Then, still holding down the Ctrl button, type v - Paste - five times (the first time you press Ctrl+c, it'll overwrite the first <th></th> tags, which is fine)
  8. Constructing a table
    Constructing a table
    Using Copy/Paste to make cells
    Using Copy/Paste to make cells

    So you should have a total of five cells per row
  9. In the second row, repeat the steps outlined above, only using <td></td> tags instead of <th></th> tags
  10. Making the first table data row
    Making the first table data row
  11. Now, here's the cool part. Click at the end of the second row, after the </tr> tag. Press Enter, creating a blank line between </tr> and </table>. The cursor may go to the beginning of the line. If it does, Tab in so that the cursor is below the </tr> tag

    Highlight the second row, down to the blank line (what you have highlighted should look exactly like what is pictured)
  12. Table setup: duplicating row structure
    Table setup: duplicating row structure
  13. The second row will contain information about one of the classes you are taking this semester. For each other class, type Ctrl-D. This will duplicate the second row so you can fill out the information for your other classes
  14. The reason this is so cool (and many text editors include this feature) is that you only have to type the content that is common to each row once. After the first time, you can shortcut it with a couple of keystrokes, and then just fill in the part(s) that are unique. We'll see this a lot throughout the session. Automation: it's tha bomb

    (If you are not taking many classes, use your schedule for last semester or make some up. You should list at least three classes in your table):

    Table setup: adding new rows for the other classes
    Table setup: adding new rows for the other classes
  15. Now, return to the first (table header) row. In between the first two <th></th> tags, type Class; the second, Section; the third, Days; the fourth, Start Time; and the last, Credit Hours
  16. These are your column headings

    Entering table headings
    Entering table headings
  17. Enter the appropriate information in the following rows for each class you are taking this semester (make sure to include all of your classes). If you are taking less than three classes this semester, make a couple up
  18. Entering class information
    Entering class information

    Note that in the screen shot, the first row is wrapped. I had to do that to get the screen capture. The <th></th> elements should all be on one line

  19. Save your file, return to the browser, and refresh/reload the display. So there's your table, but it isn't very awe-inspiring, is it? Let's dress it up a little. In your lab4.css file enter the following at the bottom:
  20. Styling the table
    Styling the table

    Yes, I want you to include the comments. It is a best practice to document your code, even if it seems like a pain at the time. Two, three, six, 18 months from now, when you have to maintain your code - or worse, when someone else has to - you'll appreciate the extra little bit of typing you took the time to do.

    Always code as if the person who's maintaing it is a violent psychopath who knows where you live
    Think about it
  21. Save your work, return to the browser, and refresh the page. Notice how things have changed. (Remember, your validator links won't appear until the files are uploaded to the server)

FileZilla

  1. Launch FileZilla and connect to the server. Use the same password we've been using
  2. In the left pane ("Local site:") of FileZilla, navigate to your lab4 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. On the remote (right) side of the display, create a new directory in your labs folder named lab4 and enter it
  4. Creating a new folder and entering it
    Creating a new folder and entering it
  5. Check the address bars on top of the left and right panes and ensure you're in the right location (/labs/lab4), both on your local computer and on the server
  6. FileZilla address bars
    FileZilla Address Bars
  7. Select lab4.html and lab4.css in the lower left pane. Then drag and drop them into the lower right pane (on the server).
  8. Once the files have successfully uploaded, return to your browser and enter the URL for lab4.html into the address bar. The URL should look like
  9. ramseyjw.csci1210.com/labs/lab4/lab4.html
  10. Tap Enter and inspect your new page. The image below looks a little off-center, but I had to take the screen shot that way to include the validation links in the lower right corner
  11. Lab 4 output
    Lab 4 output
  12. I don't know about you, but I'm not in love with our color selection. Go to Paletton.com. Pick out new colors for the background, div, and font colors. Paletton will help you choose colors that are compatible with one another. For each color, copy the hexadecimal code and replace the one in your CSS file with it. So, for example, I might choose to replace background-color: #2E6E12; with background-color: #C4BFD5; in the CSS body rules. And so on. Depending on the background colors you choose, you may have to change the border colors for <table>, <tr>, and <td>. Remember: Contrast is key!
  13. Once you've found colors you like, save your changes and upload the saved files to the server. Reload lab4.html to see what effect your changes had. Once you're content with the colors (and don't intentionally pick colors that clash -- it'll cost points), re-upload your changed CSS file to the server and refresh the view
  14. W3C validator output
    New Colors!
  15. Check your files' validity for HTML and CSS through W3C by clicking on the two links at the bottom (Again, if you hold down the Ctrl key, you can click both links, then click on each tab to view the pages -- the CSS validator usually loads first)
  16. 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. This where syntax highlighting comes in real handy. If you still can't figure it out, raise your hand and I will help you (debugging code is a critical skill for a coder, so try to figure it out first)
  17. W3C validator output
    W3C validator output
  18. 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
  19. 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!

  20. If you had to correct errors, go back to the validator page once you have finished. You don't have to paste the URL in 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
  21. Return to Notepad++ and open a new file. In this file, paste a copy of the URL for your lab4.html page. For example, if I were submitting the assignment, I would type
  22. ramseyjw.csci1210.com/labs/lab4/lab4.html
    Save the file as lab4.txt in your lab4 folder
  23. Log in to D2L and click on EvaluationDropbox
  24. Upload lab4.txt to your Lab 4 Dropbox folder

Upload the file lab4.txt ONLY! Do NOT upload your source files to D2L!


FBI Surveillance Van