Introduction to
HTML

What is Html?

  • HyperText Markup Language (HTML)
  • Forms the building blocks of all websites
    • Paragraphs
    • Lists
    • Links
    • Images

A brief timeline

  • 1991 - HTML
  • 1993 - HTML+
  • 1995 - HTML 2.0
  • 1997 - HTML 3.2
  • 1999 - HTML 4.01
  • 2000 - XHTML 1.0
  • 2012 - HTML5
  • 2013 - XHTML5

Live editors & text editors

What makes up html?

html uses elements

  • Most elements have a start tag and end tag
    • <p>Hello, world!</p>
  • Some are self-closing
    • <img src="meow.jpg" />

Basic HTML structure

<!DOCTYPE html>
<html>
<head>
    <title>My Title</title>
</head>
<body>
    <p>This is some content.</p>
</body>
</html>

Basic Tags

  • <p>
  • <a>
  • <h1>, <h2>, ..., <h6>
  • <div>
  • <ol>
  • <ul>
  • <table>

deprecated tags

  • <b>
    • use <strong> instead
  • <i>
    • use <em> instead
  • <applet>
    • use <object> instead
  • <u>
  • <center>
  • <font>

lists

  • <ol>
    • Defines an ordered list (numbers) 
  • <ul>
    • Defines an unordered list (bullets)
  • <li>
    • Defines a list element, or item in the list

lists

  • <dl>
    • Defines a description/definition list
  • <dt>
    • Defines the term
  • <dd>
    • Defines the definition (describes
      the term)

Links

  • <a>
    • anchor tag
  • Requires an attribute, in this case href
    • Always quote attribute values
    • Use lowercase
  • Ex: 
    • <a href="http://www.google.com">Google</a>

images

  • <img>
  • Also requires an attribute, in this case src
  • Ex:
    • <img src="meow.jpg" alt="My cat" />
      • alt text displays when the image cannot
        be displayed
      • alt text is also read by screen readers to
        help make web pages accessible
  • The <img> tag is self-closing

tables

  • <table> defines the table
  • <tr> defines a table row
  • <th> defines a table header
    • scope="row"
    • scope="col"
  • <td> defines a table cell
    • colspan="2"
    • rowspan="3"

tables

basic structure

<table>
<tr>
        <th scope="col">Column 1 Header</th>
             <th scope="col">Column 2 Header</th>
    </tr>
    <tr>
        <td>Column 1, item 1</td>
            <td>Column 2, item 1</td>
    </tr>
</table>

other attributes

  • class
    • Specifies one or more classname
      for an element (refers to a class in
      a style sheet)
  • id
    • Specifies a unique ID for an element
  • style
    • Specifies an inline CSS style for an
      element
  • title
    • Specifies extra information about an 
      element

comments

  • Ignored by the browser
  • Not displayed on the web page
  • <!-- This is a comment -->
  • Example:

Forms

basic structure

<form>
<input type="text" />
<input type="submit" />
</form>

forms

attributes

  • type="search"
  • placeholder="Search for something"
  • autofocus
  • type="submit"
  • type="email"
    • not just type="text"
    • iPhone keyboard adds @
  • type="url"
    • iPhone keyboard eliminates spacebar
      and adds .com

forms

attributes

  • type="number"
    • Optional attributes:
      • min="0"
      • max="10"
      • step="2"
        • acceptable numbers would be 2, 4, 6 etc
      • value="6"
        • sets the default value
        • same attribute used to specify values for
          form fields

Forms

attributes

  • type="range"
    • Also uses min, max, step, and value
  • type="date"
    • type="month"
    • type="week"
    • type="datetime-local"
    • type="time"
  • type="color"
    • Allows you to pick a color and returns
      the color's hexadecimal value

Form validation

Automatic input validation

  • Client-side JavaScript, server-side validation
    in PHP, Python, etc
    • 10% of users don't have JavaScript enabled
  • HTML5 can't replace server-side validation, 
    but...
    • type="email"
    • offers validations even if scripting is disabled
    • HTML5 also offers validation for type="url"
      and type="number"

form validation

what if I don't want to validate?

  • novalidate
    • ex:
      <form novalidate>

forms

REQUIRED FIELDS

  • Make certain form fields mandatory in order
    to submit the form
  • Attribute: required
  • <input type="email" required>

Canvas

  • <canvas>
  • "A canvas is a rectangle in your page where you
    can use JavaScript to draw anything you want."
  • "HTML5 defines a set of functions ('the canvas
    API') for drawing shapes, defining paths, creating
    gradients, and applying transformations."

Other tags

  • <br />
    • Don't use it for style!
  • <hr />
  • <code>
  • <pre>
  • <sub>
  • <sup>

html entities

  • Some characters are reserved in HTML.
    To actually display reserved characters,
    we must use character entities in the
    HTML source code.
    • &nbsp;
      • (but don't use it!)
    • &lt;
    • &gt;
    • &copy;
    • &trade;
    • &amp;

validate your html

  • Double check your code for errors
  • Make sure it displays properly
  • W3C Validation service

how do I make it pretty?

CSS

  • Inline styles
    • <p style="color: blue;">This text is blue</p>
  • Internal styles
    • <head><style> p { color: blue; } </style></head>
  • External styles
    • Cascading Style Sheet (CSS)
    • <link rel="stylesheet" type="text/css" href="styles.css">
  • Introduction to CSS
    • October 10, 6-7 PM
    • Center for Distributed Learning,
      first floor of John C. Hitt Library

Resources

Made with Slides.com