Digi Academy

Introduction to HTML5

Digi Academy
A Milano

Chiedi il prezzo
Chiedi informazioni a un consulente Emagister

Informazioni importanti

Tipologia Corso
Luogo Milano
Inizio Scegli data
  • Corso
  • Milano
  • Inizio:
    Scegli data
Descrizione

Page Structure New HTML5 Structural Tags Page Simplification In this exercise, you will convert a basic HTML 4 page to an HTML5 page. The CSS documents have already been created for you, such that, when you're finished, your HTML5 page should render exactly like the HTML 4 page.

Strutture (1)
Dove e quando
Inizio Luogo
Scegli data
Milano
Via Valtellina, 63, 20124, Milano, Italia
Visualizza mappa
Inizio Scegli data
Luogo
Milano
Via Valtellina, 63, 20124, Milano, Italia
Visualizza mappa

Cosa impari in questo corso?

Web master
Api
Browser
Audio
Javascript
HTML

Programma

After completing this module, students will be able to:


Lay out a page with HTML 4 (the "old" way).


Lay out a page with HTML5.


Understand the differences between the HTML5 and HTML 4 structures.


Understand the new HTML5 Doctype.


Understand the simpler script and style tags used in HTML5.


In this lesson, we will discuss the differences between HTML 4 and HTML5 (aside from the space and the number).


The Problems HTML 4 Addresses


The Problems XHTML Addresses


The New, More Flexible Approach of HTML5 - Paving the Cowpaths


New Features of HTML5


The HTML5 Spec(s)


Current State of Browser Support


After completing this module, students will:


Understand what problems HTML 4 addresses.


Understand what problems XHTML addresses.


Understand how HTML5 addresses these problems.


Understand the new features of HTML5.


Know what is in the HTML5 Spec.


Understand browser support for HTML5.


In HTML 4, we use the DIV tag to separate HTML pages into parts. Sometimes those parts were structurally meaningful. For example, a page describing a course might include an overview, goals, prerequisites, and an outline. Each of those parts might be enclosed in a DIV tag with meaningful ids to provide meaningful structure to the page. However, DIV tags are also used to separate parts of a page for styling purposes, for example, to create a column layout. In this case, the areas encompassed in DIV tags might not be structurally different. Browsers cannot distinguish between structurally meaningful and meaningless divs, so they do not attribute any special significance to either kind.



This lesson explains the purpose of and difference between SECTION and ARTICLE tags, how the differ from DIV tags, and how they affect a page's "outline."


The section Tag


The article Tag


Outlining


In this exercise, you will modify an HTML page we worked on earlier in the course to replace meaningless div elements with meaningful section and article elements.


In this exercise, you will try to determine the outline of an HTML page.


After completing this module, students will be able to:


Understand how to use SECTION and ARTICLE tags to eliminate inherent HTML 4 structure problems.


Understand what outlining is and how it is determined.


Understand how heading tags H1, H2, etc.) affect a document's structure/outline.


In this lesson, you will learn how to use the new HTML5 audio and video elements. As different browsers currently support different types of media, you will learn how to provide the necessary options to make your media work across browsers. You will also learn how to gracefully degrade your audio and video code.


Supported Media Types


The audio Element


The video Element


Accessibility


Scripting Media Elements


Dealing with Non-Supporting Browsers


In this exercise, you will create an HTML5 file from scratch that plays video files.


In this exercise, you will add a feature to the preceding demo that allows the user to jump to the beginning to a stanza.


After completing this module, students will be able to:


Use the AUDIO tag.


Use the VIDEO tag.


Detect audio and video failure.


Code for browsers that do not support the AUDIO and VIDEO tags.


The promise of HTML5 forms is great - richer, more meaningful, and backward-compatible forms that are consistent across browsers and include built-in client-side validation (read, no need for JavaScript for form validation). The current reality is far from great - only Opera does a half-way decent job of implementing most of the new form fields. That said there are some things you can do now to take advantage of Opera's implementation and be ready for other browsers without causing any harm in the non-supporting browsers.



So let's dig in and learn how to use the new HTML5 form features.


Modernizr


New Input Types


HTML5 New Form Attributes


Some Other New Form Field Attributes


New Form Elements


In this exercise, you will create an HTML5 quiz that validates form entries and reports the percentage of both the valid (but not necessarily correct) answers and the percentage of correct answers.


After completing this module, students will be able to:


Understand Modernizr, the JavaScript library for testing for HTML5 support.


Understand HTML5's new form fields and attributes.


Understand new types of inputs in HTML5.


Understand built-in HTML5 form validation.


Understand the new HTML5 output, progress, and meter elements.


In this unit, you will learn about local storage and session storage and the use cases for each. You will also learn about some other client-side storage methods, one defunct and one up and coming.


Overview of HTML5 Web Storage


Web Storage


Other Storage Methods


In this exercise, you will create a quiz application that allows the user to save and resume later. It also protects the user from losing data if he/she accidentally refreshes.


After completing this module, students will be able to:


How to use the two client-side storage methods in the W3C's Web storage specification.


About the past and future of client-side storage.


Canvas is one of the more talked-about new features of HTML5. It makes it possible to create drawings (e.g., for graphs or games) natively in the browser. If you know JavaScript, it is relatively easy to start using Canvas, which allows you to build intricate visual applications without the need of a plugin like Flash or Silverlight.


Getting Started with Canvas


Drawing Lines


Color and Transparency


Rectangles


Circles and Arcs


Quadratic and Bzier Curves


Images


Text


In this exercise, you will use HTML5 canvas to draw a simple sailboat.


In this exercise, you will use circles and squares to create a snowman.


In this exercise, you will create a drawing of a map of South America using image files of a map and country flag graphics supplied.


After completing this module, students will be able to:


Get started with canvas.


Draw lines.


Draw rectangles and circles.


Reposition and rotate the canvas.


Create animations.


HTML5 includes a bunch of integrated and associated (e.g., not specifically part of HTML5) APIs. In this lesson, we'll look at the Offline Application API and the Drag and Drop API.


Offline Application API


Drag and Drop API


After completing this module, students will be able to:


Understand the new HTML5 APIs.



Gli utenti che erano interessati a questo corso si sono informati anche su...
Leggi tutto