Basic Introduction to HTML5 – Review: HTML Terms – HTML 5: What is it?

View Github Repository Open presentation in a new window

jannypie

See all presentation from jannypie

Basic Introduction to HTML5 – Review: HTML Terms – HTML 5: What is it?

0 0

html5-intro

First set of slides for HTML5 workshop

On Github jannypie / html5-intro

Basic Introduction to HTML5

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Stuff to keep in mind!

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Review: HTML Terms

Tag

Labels that define and separate parts of your markup into elements

<img />
<h1> </h1>
<p> </p>
Element

A single markup object from opening to closing tags

<p>A paragraph.</p>
<div>Sidebar content</div>
Attribute

Name/value pairs within the opening tag that provide additional information

Examples: class=" ", id=" ", href=" ", src=" "

            <!-- Example of an image element with attributes -->
            <img src="logo.png" title="My Logo" alt="company logo" />
            
            <!-- Example of a div element with attributes -->
            <div id="header" class="full-width" />
ID

An element attribute that should always be unique to that single element and not re-used

Class

An element attribute that can take one or more values, separated by spaces; Classes can be used on any number of elements

Block-Level Element

An element with a rectangular shape that takes up the entire width of its parent, creating a "block"

Begins on a new line, and following elements also begin on a new line

Examples: <div>, <h1> </h1>, <p> </p>

Inline-Level Element

An element that falls "inline" with the text surrounding it, without creating new breaks in the flow

Examples: <a> , <span> </span>, <img />

HTML 5: What is it?

HTML5 is the W3C’s set of standards for the next version of HTML, which had not been officially updated since HTML4 in 1999.

What has happened in the web since the early days?

  • Explosion of internet use worldwide
  • More websites created than ever before
  • Websites with many different uses: e-Commerce, news, business, education, social, navigation
  • Creation of assistive technologies to help those with disabilities navigate the internet
  • "Web2.0" boom in web design and techniques

What were some new challenges the web faced?

  • Searchability: More websites make it harder to find information
  • Location: Local businesses with related information should be more accessible now the internet is worldwide
  • Accessibility: Page readers need to make sense to the listener
  • Design: Design trends like headers, sidebars, footers, and more were popular, but made no code sense to the browser, being all <div>s

HTML5 Specification

  • 2004 - W3C started work
  • 2008 - first public working draft
  • 2011 - last call
  • 2012 - working draft
  • 2014 - planned for stable recommendation

Update! October 2014

W3C Declares HTML5 Standard Complete

So what's so cool about it?

Too much to cover in our time together

But here are some highlights:

  • Gives additional markup options with more meaning
  • Further separates markup (content) from presentation (design)

Adds a bunch of new features

  • semantics
  • multimedia
  • 3D & graphics
  • device access
  • presentation
  • offline & storage
  • connectivity
  • performance

Redefines a few things

Gives some old elements semantic meaning and separates them from presentation (e.g. b, i, strong, em)

            <b>Bolded text</b>
            <i>Italics text</i>

Became

            <strong>Heavier text</strong>
            <em>Emphasized text</em>

Marks some old things obsolete

Examples

  • Deprecated items (e.g. frame, frameset, noframes)
  • Presentational elements and attributes replaced by CSS (e.g. font, big, center)
reference

Old Doctypes

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
  
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 Doctype

            <!DOCTYPE html>

HTML5 Doctype also requires charset declaration

            <!doctype html>
            <html>
              <head>
                <meta charset="UTF-8">
                <title>Example document</title>
              </head>
              <body>
                <p>Example paragraph</p>
              </body>
            </html>

Minimum information required to ensure that a browser renders using standards mode

Semantic HTML

The use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation (look). -Wikipedia

Basic HTML examples:

  • <p> means paragraph
  • <h1> means first-level header
  • <body> means the body of the page

Semantic HTML

What were we seeing before?

          <body>
            <div id="header">
              <h1>Hi, I'm a header!</h1>
              <div id="nav">
                <ul>
                  <li><a href="foo">foo</a></li>
                  <li><a href="bar">bar</a></li>
                </ul>
              </div>
            </div>
            <div id="main">
              <div class="article">foo</div>
              <div class="article">bar</div>
            </div>
            <div id="footer">Hi, I'm a footer!</div>
          </body>
Well, it's better than using tables

But, this is

Not very semantic

<div id="header"></div>
<div class="nav"></div>
<div id="footer"></div>

Also known as "div-itis"

To a browser, none of these elements mean anything, or relate to any other part

W3C looked at a large number of websites to see how people were using these divs, then created new semantic elements.

New Structural Elements

  • <header>
  • <footer>
  • <nav>
  • <section>
  • <article>
  • <main>
  • <aside>
  • <hgroup>
  • <figure>
  • <figcaption>

List of new elements

Another list of new elements

<header>

  • Container for a group of introductory or navigational aids
  • Document can have multiple header elements
  • E.g. One for the page, one for each section
            <header id="site-header"></header>
            
            <header class="article-header"></header>

<nav>

  • Contains major navigational information
  • Usually a list of links
  • Often lives in the header
  • E.g. site navigation
            <nav id="site-links"></nav>

<main>

  • Usually the container for the part of the website not included in the site header or footer
  • Should only have one <main> per document
          <body>
            <header></header>
            <main></main>
            <footer></footer>
          </body>

<footer>

  • Contains information about its containing element
  • E.g. who wrote it, copyright, links to related content, etc.
  • Document can have multiple footer elements
  • E.g. One for the page, one for each section
            <footer id="site-footer"></footer>
            
            <footer class="article-footer"></footer>

<section>

  • Group together thematically related content
  • Similar to prior use of the div, but div has no semantic meaning
            <section id="about-me"></section>
            <section id="contact-us"></section>

<aside>

  • Tangentially related content
  • E.g. sidebar, pull quotes

<article>

  • Self-contained related content
  • E.g. blog posts, news stories, comments, forum posts

Example article markup from nytimes.com

Which one to use?

Source: html5doctor.com

Document Outlines

The document outline is the structure of a document, generated by the document’s headings, form titles, table titles, and any other appropriate landmarks to map out the document.

This table of contents could then be used by assistive technology to help the user, or be parsed by a machine like a search engine to improve search results.

reference

Semantic Markup Enhances

  • Accessibility
  • Searchability
  • Internationalization
  • Interoperability

It also helps treat the plague of div-itis!

Let's Take a Moment

To talk about browser compatibility

HTML5Shiv

HTML5Shiv

HTML5 IE enabling script

<!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
    <![endif]-->
polyfill (n): a JavaScript shim that replicates the standard API for older browsers

HTML5 FORM Additions

Forms used to be a series of <input>s with maybe a <textarea> and a <input type="submit">

<input type=" "> now has new options

  • tel
  • search
  • url
  • email
  • date
  • time
  • number
  • range
  • color
  • month
  • week

List of new elements

new <input type=""> features

  • Opens up UI helper elements, such as calendars, when clicked
  • On mobile, number input types will bring up the number keypad
  • Input types are checked for validity before being submitted
  • Example: type="email" will only accept email address formats (word@something.somewhere)

HTML5 FORM Additions

Placeholders

Can be placed on input or textarea elements

Gives hint to user for data entry

                <input type="email" placeholder="name@email.com">

HTML5 FOrm Additions

Required

Can be used on input, select, and textarea

Won't let the form be submitted if not filled out!

                <input type="name" required>

Multimedia

Audio and video are first class citizens in HTML5

HTML4 forced us to use embedded elements

              <embed src="MyVideo.mp4"/>

No browser control over play/pause, sound, or anything

Useful as a replacement for flash on mobile devices

Flash makes mobile devices sad :(

Video

The Dream

The video element was created to make it unnecessary to use plugins to display video content on your pages.

The idea is to simplify and streamline video content delivery.

    <video src="demo.mp4" type="video/mp4">
      Your browser does not support the video element.
    </video>

Video

The Reality

If you want to support ALL browsers and ALL video encodings, you will still need a plugin as a last-resort fall back plan.

This is because not all browsers read video the same way, and older browsers (like IE<9) don't support the video element at all.

Video

In reality it looks a bit like this

<video id="video" controls preload="metadata" poster="img/poster.jpg">
  <source src="my-video.mp4" type="video/mp4">
  <source src="my-video.webm" type="video/webm">
  <source src="my-video.ogg" type="video/ogg">
  
  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/my-video.mp4" width="1024">
     <img alt="my-video" src="img/my-video-poster.jpg" title="No video playback possible"/>
  </object>
</video>

Audio 

      <audio controls>
      <source src="music.mp3" type="audio/mpeg"/>
      <source src="music.aac" type="audio/mp4" />
      <source src="music.ogg" type="audio/ogg"/>
      <!-- now include flash fall back -->
      </audio>

Canvas

  • Environment for creating dynamic images
  • Canvas element + javascript = dynamic content!
  • Can be used with SVG (vectors) to create non-pixelating graphics

Canvas

Canvas

The first step is to add a canvas element to your HTML. Make sure you give it an id:

    <canvas id="myCanvas" width="400" height="400">
      Your browser doesn’t support Canvas.
    </canvas>

Unfortunately, everything else (all the cool stuff) is actually in JavaScript and outside the scope of this class

Questions?

?

Let's Develop It!

Use HTML5 elements to markup up a sample blog post or news article.

  • Create a full HTML5 document page with doctype, head, and body
  • Place the article inside a <main> element in the body
  • Give the article a header containing a byling and date
  • Also give it a footer with an Author description
  • Include any other HTML elements you wish!

Bonus

Time permitting, also include a comment section with HTML5 comment form

Basic HTML5 ~ Girl Develop It ~