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

Introduction to HTML

By cschultze

Made with Slides.com

Introduction to HTML

The Techrangers and ACM present an Introduction to HTML

  • 1,075

More from cschultze