- Saving files
- Troubleshooting tips
February 06, 2020
A table represents information in grid format. They allow us to understand complex data. What are some examples you've seen, web or not?
Here's an example someone made of a pricing table for their website. Feel free to click around and see what it does.
<!-- no headings --> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>
scope="row"to show that certain cells are column or row headings
<th>to make sure the table renders correctly
<table> <tr> <th></th> <th scope="col">Saturday</th> <th scope="col">Sunday</th> </tr> <tr> <th scope="row">Tickets sold:</th> <td>120</td> <td>135</td> </tr> <tr> <th scope="row">Total sales:</th> <td>$600</td> <td>$675</td> </tr> </table>
Sometimes you want a cell to span multiple columns. To do this, use
colspan="". You can also do this with rows by using
rowspan="". Examples of both are in the book on page 133 and 134.
<table> <tr> <th></th> <th>9am</th> <th>10am</th> <th>11am</th> <th>12am</th> </tr> <tr> <th>Monday</th> <td colspan="2">Geography</td> <td>Math</td> <td>Art</td> </tr> <tr> <th>Tuesday</th> <td colspan="3">Gym</td> <td>Home Ec</td> </tr> </table>
There are three elements to help differentiate between a table header, body, and footer. They are not required for every table, but are helpful when displaying data (and also for later, when we style tables) so I recommend using them.
<table> <thead> <tr> <th>Date</th> <th>Income</th> <th>Expenditure</th> </tr> </thead> <tbody> <tr> <th>1st January</th> <td>250</td> <td>36</td> </tr> <tr> <th>2nd January</th> <td>285</td> <td>48</td> </tr> <!-- additional rows as above --> <tr> <th>31st January</th> <td>129</td> <td>64</td> </tr> </tbody> <tfoot> <tr> <td></td> <td>7824</td> <td>1241</td> </tr> </tfoot> </table>
How do we format this text example?
You must hold your quiet center,
where you do what only you can do.
If others call you a maniac or a fool,
just let them wag their tongues.
If some praise your perseverance,
don't feel too happy about it—
only solitude is a lasting friend.
You must hold your distant center.
Don't move even if earth and heaven quake.
If others think you are insignificant,
that's because you haven't held on long enough.
As long as you stay put year after year,
eventually you will find a world
beginning to revolve around you.
<p> You must hold your quiet center,<br/> where you do what only you can do.<br/> If others call you a maniac or a fool,<br/> just let them wag their tongues.<br/> If some praise your perseverance,<br/> don't feel too happy about it—<br/> only solitude is a lasting friend. </p> <p> You must hold your distant center.<br/> Don't move even if earth and heaven quake.<br/> If others think you are insignificant,<br/> that's because you haven't held on long enough.<br/> As long as you stay put year after year,<br/> eventually you will find a world<br/> beginning to revolve around you. </p>
Today we're going to write some code with fewer explicit instructions. Additionally, we've been doing a lot of coding in class, but we're going to add in some validation!
Scenario: You and a friend decide to start a web development business called DubJay Designs. Your friend comes up with a design for your marketing website, and you've agreed to code it.
Some questions to ask yourself when you think you're done with each part:
Based on the image below (also called a "mockup"), create an HTML page called
index.html. It should be HTML compliant and all formatting (line breaks, text formatting, paragraphs, images) should match. Set the title to "Home | Lecture 5". Once completed, validate your code using the W3 Validator. Show me when you're done! The logo image to use is available for download below.
Logo to download and use:
Potential clients have been asking you about how much everything costs. Based on the image below, create a new HTML page called
pricing.html. Set the title to "Pricing | Lecture 5". Include the same logo above the heading like you did in Exercise 1. Once completed, validate your code using the W3 Validator. Show me when you're done!
On the index.html page, add a link at the bottom of the page that links to the Pricing Page. On the pricing page, add a link to the bottom that says "Back to home" and takes you back to the index.html page.
Copy and paste the following code into a file. Find and fix the syntax errors. When you think you're done, use the HTML validator to check.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML debugging examples</title> </head> <body> <h1>HTML debugging examples</h1> <p>What causes errors in HTML? <ul> <li>Unclosed elements: If an element is <strong>not closed properly, then its effect can spread to areas you didn't intend <li>Badly nested elements: Nesting elements properly is also very important for code behaving correctly. <strong>strong <em>strong emphasised?</strong> what is this?</em> <li>Unclosed attributes: Another common source of HTML problems. Let's look at an example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> </ul> </body> </html>
Due: Feb 11
This exercise gives you the opportunity to examine if you are keeping up with the additional content we’ve been covering in class. In addition to the items addressed in Homework #1, you should now be able to:
There isn’t a grade for this. This exercise is simply a tool to indicate whether you are learning or not. We will use it as part of our next in-class exercises, so please do it! I may collect it to assess where the class is to help me adjust our schedule if needed.
Generate a small web site of four pages. For content, make three of the pages written assignments from other classes. In other words, take three assignments from earlier classes and mark them up as you did with your response to Exercise 1. Sprinkle in some additional links to relevant material and add in some images as well. Finally, link out to all of these files from the home page and create a table on that home page the includes the title of the work, the course it was written for, and the grade you think you should have received for it. The web site should include:
In the end, you should end up with four html files. If you load them into a browser they should render correctly. Your hyperlinks should take you back and forth between the pages and/or sections of content. All of this depends on what content you are using – so everyone’s work and code will be a little different.
All markup for this project should be in accordance with the HTML5 specification. Run it through the HTML validator to confirm.