Indentations

Agenda

Reminder the girls: Coding is about trial & error. Don't be afraid to mess up, because you can't.

Todo: Design your own website.
Review
Importance of Tag Orders / Indentation
Tables / Lists
Signout sheet to take home computers

Todo

Ask the girls to think about their site and draw out the design on paper. Show them an example.

Review

Get some of the girls to show their designs and ask the class to identify the tags they used

Why Tag Ordering Matters?

Show the important of tags through english / mathematics

Let’s eat Grandma.
Let’s eat, Grandma.

Why is the first sentence incorrect? Without the comma we become cannibals.

She lives with her two children, a cat and a dog.

Without a comma, the woman has two animals as children.

10 - 5 * 5 = 25
(10 - 5) * 5 = 25

If parentheses are not present the answer to this equation is -15.

Indentations Increase Code Readability

Ask the girls what they think this code renders.

Single Line

The html code is repesented in a single line. This makes readability very difficult.

http://codepen.io/anon/pen/EbcCB

<!-- Starting the Page Properly --> <html> <head> <title>CodeEd - Spring 2013</title> </head> <body> <center> <h1>Why Indentations Matter</h1> <a href='http://google.com'> <img src='http://placehold.it/350/250'/> </a> <p>Lemon drops chocolate caramels apple pie marshmallow. Pastry caramels wafer liquorice bear claw.</p> </center> </body> </html>

Multi Line No Indent

This code has line breaks, but it's still not super user friendly.

http://codepen.io/anon/pen/HAciB

<!-- Starting the Page Properly -->
<html>
<head>
<title>CodeEd - Spring 2013</title>
</head>
<body>
<center>
<h1>Why Indentations Matter</h1>
<a href='http://google.com'>
<img src='http://placehold.it/350/250'/>
</a>
<p>Lemon drops chocolate caramels apple pie marshmallow. Pastry caramels wafer liquorice bear claw.</p>
</center>
</body>
</html>

Indented

This version should be very easy to read. Explain to them that once you open a tag you should indent. The open / close tag should line up with each other. Line breaks between segments of code help readability. Comments also help.

http://codepen.io/anon/pen/bmDaH

<!-- Starting the Page Properly -->
<html>
  
  <head>
    <title>CodeEd - Spring 2013</title>
  </head>
  
  <body>
    <center>
      <h1>Why Indentations Matter</h1>
      
      <a href='http://google.com'>
        <img src='http://placehold.it/350/250'/>
      </a>
      
      <p>Lemon drops chocolate caramels apple pie marshmallow. Pastry caramels wafer liquorice bear claw.</p>
    </center>
  </body>

</html>

Tables

What is a table? Can anyone give me an example of a table? Usages of tables -- multiplication table, track attendances, general statistics.

Can anyone guess what the tag for a table is?

<table>

</table>

Tables consists of rows and within each row contains data (You can think of the data as columns). How would we represent that with HTML? Can anyone guess what the tag for a table row is? What would the tag for a table data be? Let's make make a times table now (3x3).

<table>
   <tr>
       <td>
           
       </td>
   </tr>
</table>

   |----------------------|
   |    |  1  |  2  |  3  |
   |----------------------|
   |  1 |  1  |  2  |  3  |
   |----------------------|
   |  2 |  2  |  4  |  6  |
   |----------------------|
   |  3 |  3  |  6  |  9  |
   |----------------------|

Let's code out the first row. How many table data [cells] are there? How many <td> tags would we need?

<table>
   <tr>
      <td></td>
      <td>1</td>
      <td>2</td>
      <td>3</td>   
   </tr>
</table>

Optional Objectives

Ask the girls how you would bold the headers?
How would you add color to the table header?

Final Output

http://codepen.io/anon/pen/mfIhC

<table border='1'>

   <tr>
      <td></td>
      <td><b style='color:red'>1</b></td>
      <td><b style='color:red'>2</b></td>
      <td><b style='color:red'>3</b></td>   
   </tr>

   <tr>
      <td><b style='color:red'>1</b></td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
   </tr>

   <tr>
      <td><b style='color:red'>2</b></td>
      <td>2</td>
      <td>4</td>
      <td>6</td>
   </tr>

   <tr>
      <td><b style='color:red'>3</b></td>
      <td>3</td>
      <td>6</td>
      <td>9</td>
   </tr>

</table>

Lists

If time permits, show them a shopping list

<h1>Shopping List</h1>

<ul>
  <li>Oranges</li>
  <li>Banana</li>
  <li>Peanut Butter</li>
  <li>Water</li>
  <li>Bread</li>
</ul>

rickyc/codeed-spring-2013-lesson-5.markdown