Part 2: HTML - The Hustle

Presented by

Agenda

  • More used HTML tags
  • More on Attributes
  • HTML5
  • Tools and references
  • Question time

More used HTML tags

  • <img> - Displays an image
    <img src="http://i.imgur.com/Y1DaqZD.jpg">
  • Looks like:
  • <h#> - A common heading (# is between 1 and 6)
    <h1>This is an h1 heading</h1>
    <h2>This is an h2 heading</h2>
    <h3>This is an h3 heading</h3>
    <h4>This is an h4 heading</h4>
    <h5>This is an h5 heading</h5>
    <h6>This is an h6 heading</h6>
  • Looks like:

    This is an h1 heading

    This is an h2 heading

    This is an h3 heading

    This is an h4 heading

    This is an h5 heading
    This is an h6 heading
  • <table> - A table
    <table>
      <thead>
        <tr>
          <th>Header 1, row 1</th>
          <th>Header 2, row 1</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Column 1, row 2</td>
          <td>Column 2, row 2</td>
        </tr>
      </tbody>
    </table>
  • Looks like:
    Header 1, row 1 Header 2, row 1
    Column 1, row 2 Column 2, row 2
  • <form> - A submittable form
    <form>
      First name: <input type="text" name="fname"> <br>
      Last name: <input type="text" name="lname">
    
      <input type="button" value="Submit">
    </form>
  • Looks like:
    First name:
    Last name:
  • <button> - A clickable button
    <button>I'm in a button!</button>

More on Attributes

  • Last time we mentioned one attribute, for <a> tags, called href
  • Every tag has it's own set of attributes, but there are universal attributes for each tag as well
  • These are class, id, title, alt, and style

IDs and Classes

  • <div id="main" class="widget">I'm the main widget!</div>
    <div id="secondary" class="widget">I'm the secondary widget!</div>
  • IDs are unique; classes can be duplicate.
  • So in the above, both are widget, but only one is the main widget.
  • DO use classes and IDs. They make your HTML Semantic.

Accessibility with Titles and Alts

  • Example:
    <img src="http://i.imgur.com/Y1DaqZD.jpg" title="How Do I Shot Web" alt="How Do I Shot Web">
  • If for some reason your image doesn't render, the title still shows up
  • For people using screen readers, they can still "see" the image because of the alternative text.

Styling html with style

  • So default html is ugly. Let's add some style using <style>
  • <button style="background: #2d6cc0; color: white; padding: 15px; font-weight: bold;">Styled button</button>
  • Problems:
    • Doesn't scale
    • Have to repeat styles for similar elements
    • Job done better by CSS
    • Design is strongly coupled to content, not a good idea

HTML5: DOCTYPES

  • Last session, I mentioned <!doctype>
    <!doctype html>
  • In the past, before HTML5, there were Document Data Types (DTDs) to specify which standard to render HTML with
  • They looked like this (ugh):
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Now in HTML5, there is a single unified doctype (YAY!)

New tags in HTML5 (More semantic)

  • <aside - Define content aside from the main content
  • <article> - Defines an article
  • <header> - Defines a header for a document or section
  • <section> - Defines a section
  • <footer> - Defines a footer for a document or section
  • <nav> - Defines navigation links
  • Basically more semantic <div>s

Tools and References

Questions?