Indentations

Agenda

Reminder the girls: Coding is about trial & error. Don't be afraid to mess up, because you can't. The more you experiment and mess up, the more you'll learn.

Review h1, h2, h3, img, a, br
Tag order matters
Parents & Children
Indentation
Lists
Signout sheet to take home computers
Handout site requirements; have them design site as a takehome exercise

Review

Tag matching card game h1, h2, h3, img, a, br
What does every web page start with?
How do you add a link?
How do you add an img?
Does every tag need a closing tag? What is one doesn't?

Why Tag Ordering Matters

Show the importance 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.

Similarly, when writing code, you need to have your tags in the correct order, otherwise they could be invalid, or mean something other than what you've intended.

  <p><i>Hello</i> world</p>   
  <i><p>Hello</i> world</p>    // invalid
  <p><i>Hello world</i></p>    // different meaning

Parents and Children

HTML resembles a Russian Doll. You have tags inside tags inside tags, just like there are dolls inside of dolls inside of dolls.

When we are talking about html, which tag is the largest, outside doll?

The tag that wraps the outside of another tag is called a parent tag. The tag that exists inside another tag is called a child tag.

Which is the parent here? Which is the child here?

<Html>
  <Body>
  </Body>
</Html>

Which are parents here and which are children?

<HTML>
 <body>
   <p></p>
 </body>
</HTML>

Indentations Are Used To Show Page Structure

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>

Todo

Teacher writes the following on the board:

   <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.</p>
    </center>
  </body>

Get each girl to draw a box around a tag with a different color marker. Indentations help us see the structure.

Time permitting: Get each girl to clean up their site, by adding the proper indentation.

Lists

New tag where the parent / child relationship is very important. It's the list tag. <ul> indicates a new list. <li> indicates a list item.

<h1>Shopping List</h1>

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

Take home computer policy

Get each girl to sign out their computer & charger. They are responsible for bringing it back each class. If they forget, they won't be able to work on it! Girls have forgot in the class, so make sure you remember.

Take good care of these. Don't drink near them. It's a special privalege. So be nice to them :)

Real Homework.

Handout web site requirements sheet. Need to draw your site out. Use one of each of these tags. If you don't know how to do all of these right now, that's okay. Draw your first draft. And we'll start working on them next week!

ashaegupta/gist:5392952