Emily Kauffman

Back to teaching

CIS 275 Lecture 5: Troubleshooting Tips, Tables

Goals

  1. Saving files
  2. Tables
  3. Troubleshooting tips
  4. Practice!

Review

  1. HTML5 is a combination of HTML, CSS, and JavaScript
  2. HTML structural elements, basic syntax
  3. Images (use img not image)
  4. Links

Saving Files

  • Cloud service (icloud/Dropbox, Box, Google Drive)
  • flash drive
  • git (learning curve but most useful)

Tables

A table represents information in grid format. They allow us to understand complex data. What are some examples you've seen, web or not?

  • Each block is in the grid is called a table cell.
  • In HTML, tables are written out row by row.

Class Syllabus

Here's an example someone made of a pricing table for their website. Feel free to click around and see what it does.


Basic Table Structure

<!-- 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>

Displays as:

1 2 3
4 5 6
7 8 9

Table with Headings

  • Use scope="col" or scope="row" to show that certain cells are column or row headings
  • Even if a cell has no content, use an empty <td> or <th> to make sure the table renders correctly
  • Why use these? Screen readers!
<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>

Displays as:

Saturday Sunday
Tickets sold: 120 135
Total sales: $600 $675

Spanning Columns/Rows

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>

Displays as:

9am 10am 11am 12am
Monday Geography Math Art
Tuesday Gym Home Ec

Long Tables

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>

Displays as:

Date Income Expenditure
1st January 250 36
2nd January 285 48
31st January 129 64
7824 1241

Troubleshooting/Tips

  1. When you make a tag, make the first and last immediately: <html></html>
  2. If an element is inside another one, it should be indented for readibility.
  3. If something is displaying incorrectly, go through each of your tags. Find the starting and ending tag.
  4. If something isn't displaying at all, make sure you have a body tag and your missing element is inside of it.
  5. Keyboard shortcuts (save, copy/paste/cut, select)
  6. Copy and paste your code into the W3 Validator

Paragraphs vs. Linebreaks

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>

In Class Exercises

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:

  1. Does it validate?
  2. Are child elements indented?
  3. Are my images accessible?
  4. Do all of my tags have an opening and ending tag?
  5. Are element choices semantically correct?
  6. Is my text formatted correctly (strong, emphasized)?

Exercise 1: Home Page

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.


Mockup of Dubjay Designs home page


Logo to download and use:

DubJay Designs logo

Exercise 2: Tables

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!

Mockup of Dubjay Designs pricing table

Exercise 3: Links

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.

Exercise 4: Debugging

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>

Homework

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:

  1. Understand where your files are located
  2. Comprehend the differences between relative and absolute paths
  3. Add hyperlinks to your html documents
  4. Add imagery into your html documents
  5. Build a table using html

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:

  1. A home page with links out to three additional documents that you’ve marked up
  2. Hyperlinks with both relative and absolute syntax
  3. Some images that are at least tangentially related to the content
  4. A table on the home page

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.


Next Class

  • Read: Duckett, Chps. 7
  • Extra credit: Visit a PAL tutor during hours. Have them sign a piece of paper with their name and date. Write down what they helped you with. Give it to me for a bonus point toward something.
  • Homework: Finish in class exercises, Homework #2
  • Optional practice: Make a codecademy.com account (free) and start the HTML track.

Resources

  1. Duckett, John. Html & CSS: Design and Build Websites. John Wiley and Sons, 2014.
  2. Debugging Code - https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html
  3. Assignment text taken from Sam Fee