Other Pages

HTML_tags.step

goals do
  goal "Add some tags to your HTML file"
  goal "Learn more about available tags"
end

overview do

  message <<-MARKDOWN

## Use Tags to Separate Blocks of Content


Tags convey meaning. And in order to display your content well, everything should be inside of a tag, not just words you want emphasized. So let's use the paragraph tag `<p>` and the header 1 tag `<h1>`.

You'll notice that even if you put in extra lines and spaces, browsers will treat any number of
new line or space characters like there's just one space there. When you're getting started
with HTML, this can seem like a pain, because you have to type
  MARKDOWN

  source_code :html, <<HTML
<p>first sentence</p>
<p>second sentence</p>
HTML
  message <<-MARKDOWN

when all you want is a blank line between two sentences. But as you get more advanced, this
aspect of HTML will feel more useful, because it means you can format your code however is
most readable for **you**, without worrying about what the browser will think of your blank
lines and spaces.

## Nested Tags

It's common for an HTML tag to be nested inside another tag. In the example above, you saw:
  MARKDOWN

  source_code :html, "<h1><em></em></h1>"

  important do
    message "Just make sure that the tags are correctly _nested_. For example, you can't do:"

    source_code :html, "<h1><em>Hello World!</h1> I like you!</em>"

    message "The inner tag, `em`, needs to close before the outer tag closes."
  end
end

steps do

  step do
    message "Add some more lines of content to your HTML file. Introduce yourself."

    source_code :html, <<-HTML
Hello <em>World</em>!

My name is Rachel.
    HTML

    message "Now save the file and refresh your browser."
    img src: 'img/hello_world_2line.png'
  end

  step do
    message "The browser ignored the new lines and the blank line because we didn't use any tags. Let's use some to break up our content."
    message "Update your HTML with an `h1` tag and a `p` tag:"

    source_code :html, <<-HTML
<h1>Hello <em>World</em>!</h1>
<p>My name is Rachel.</p>
    HTML

    message "Now save the file and refresh your browser."
    img src: 'img/hello_world_2line2.png'
  end

  step do
    message "Now let's add a list of things we like."

    source_code :html, <<-HTML
<h1>Hello <em>World</em>!</h1>
<p>My name is Rachel.</p>
<p>I like:</p>
<ul>
  <li>Polka Dots</li>
  <li>Soccer</li>
  <li>Programming</li>
</ul>
    HTML

    message "Now save the file and refresh your browser."
    img src: 'img/html_tags_list.png'
  end

end


explanation do

  message <<-MARKDOWN

## Tags for Every Occasion

The meteoric rise in popularity of the world-wide-web and the recent proliferation of web
applications has made HTML hugely popular.  While originally used only for simple documents,
HTML now has tags for embedded video and music playback, embedding images, filling out
web forms, and all kinds of other useful tags.

You just used two well-known tags, `h1` for a headline and `p` for a paragraph. But there
are a ton of other tags you might use:

## More Tags

  MARKDOWN

  table border: "1", cellspacing: "0", cellpadding: "3", align: "center" do
    tr {
      th "Tag"
      th "Purpose"
    }
    tr {
      td "a"
      td "A link (the 'a' stands for Anchor)."
    }
    tr {
      td "h1 to h6"
      td "Various headers, h1 is the most important, h6 the least."
    }
    tr {
      td "ul"
      td "Start a bulleted list (an 'unordered list')."
    }
    tr {
      td "ol"
      td "Start a numbered list (an 'ordered list')."
    }
    tr {
      td "li"
      td "A single thing within a list (a 'list item')."
    }
    tr {
      td "table, tr, td"
      td "Tables (like this one) with table rows and data cells."
    }
    tr {
      td "form"
      td "A form that can collect data from user input."
    }
    tr {
      td "input"
      td "A text input, a button, or a checkbox in a form."
    }
    tr {
      td "div"
      td "A section marker that doesn't do anything specific to the contents itself, but does make a new line after. (a 'division'. More on this later)"
    }
    tr {
      td "span"
      td "Another section marker that doesn't do anything to its contents, but is inline - it does not make a new line after."
    }
  end

  message <<-MARKDOWN

  HTML5 introduced lots of new tags to make the HTML more *semantic*, meaning the tags should describe the content they describe. Some of the new elements introduced by HTML5 include:

  MARKDOWN

  table border: "1", cellspacing: "0", cellpadding: "3", align: "center" do
    tr {
      th "Tag"
      th "Purpose"
    }
    tr {
      td "section"
      td "A section of a document: a thematic grouping of content."
    }
    tr {
      td "nav"
      td "A navigation section, containing links to other pages or to parts within the current page."
    }
    tr {
      td "header"
      td "The header for a page or section of a page. (This is different from the head element, which contains metadata about the page!)."
    }
    tr {
      td "footer"
      td "The footer for a page or section of a page."
    }
    tr {
      td "main"
      td "The main content of a page."
    }
    tr{
      td "aside"
      td "Content that's related to the main content, but could be considered separate from it."
    }
  end

  message <<-MARKDOWN

You don't need to memorize all the tags! You can always look them up on sites like:

* [WebPlatform.org](http://webplatform.org/)
* [Mozilla Developer Network](https://developer.mozilla.org/en/HTML/Element)
* [Sitepoint](http://reference.sitepoint.com/html)

## Try This

What happens if you change the `<ul>` in your **hello.html** to `<ol>`? (Don't forget to change the closing tag, too.)

Can you link your favorite things to their Wikipedia pages? Here's an example link for you: `<a href="http://en.wikipedia.org/wiki/Ruby_(programming_language)">Ruby</a>`

What are all the individual parts of the code to add a link?

  MARKDOWN

end

next_step "HTML_structure"