In today's lab, we'll build some tables and learn to use CSS to style them
Essentials of Web Development
Create a folder named lab4 in your labs folder on your external drive
Open your Lab 3 HTML file (lab3.html) in Notepad++
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)
Save the file as lab4.html in your external drive's labs\lab4 folder
Open your lab3.css file and save it as lab4.css in your external drive's labs\lab4 folder
Modify the required comment block at the top of your lab4.css file and save it. For 'Purpose,' you can enter 'Tables'
In the head element of your lab4.html file, modify the link to lab4.css to point to ⇒ <linkrel="stylesheet" href="lab4.css">
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
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'
Let's make a simple table. Where the unordered list was, enter <table></table>
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
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
Make a second table row after the first
Read this entire instruction before doing anything.
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)
So you should have a total of five cells per row
In the second row, repeat the steps outlined above, only using <td></td> tags instead of <th></th> tags
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)
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
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):
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
These are your column headings
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
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
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:
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.
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)
Launch FileZilla and connect to the server. Use the same password we've been using
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
On the remote (right) side of the display, create a new directory in your labs folder named lab4 and enter it
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
Select lab4.html and lab4.css in the lower left pane. Then drag and drop them into the lower right pane (on the server).
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
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
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!
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
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)
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)
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
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!
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
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
ramseyjw.csci1210.com/labs/lab4/lab4.html Save the file as lab4.txt in your lab4 folder
Log in to D2L and click on Evaluation → Dropbox
Upload lab4.txt to your Lab 4 Dropbox folder
Upload the file lab4.txtONLY! Do NOT upload your source files to D2L!