HTML5 Tutorial For Beginners

1
HTML5

• Gaurav Jaiswal
• Singsys Pte. Ltd.

2
What is HTML5?
3
What is HTML5?

• HTML5 is the new standard for HTML.
• The previous version of HTML was HTML 4.01,
  came in 1999.
• HTML5 is designed to deliver almost everything
  you want to do online without requiring
  additional plugins. It does everything from
  animation to apps, music to movies, and can also
  be used to build complicated applications that
  run in your browser.
• HTML5 is also cross-platform (it does not care
  whether you are using a tablet or a smartphone, a
  notebook, notebook or a Smart TV).

4
Differences Between HTML4 and HTML5
5
Differences Between HTML4 HTML5

1. HTML5 is a work in progress
2. Simplified Syntax
3. The New ltcanvasgt Element for 2D drawings
4. New content-specific elements, like ltarticlegt,
   ltheadergt, ltfootergt, ltnavgt, ltsectiongt
5. New ltmenugt and ltfiguregt Elements
6. New ltaudiogt and ltvideogt Elements
7. New form controls, like calendar, date, time,
   email, url, search
8. No More ltframegt, ltcentergt, ltbiggt, and ltbgt, ltfontgt
9. Support for local storage

6
Browser Support for HTML5
7
Browser Support for HTML5

• HTML5 is not yet an official standard, and no
  browsers have full HTML5 support.
• But all major browsers (Safari, Chrome, Firefox,
  Opera, Internet Explorer) continue to add new
  HTML5 features to their latest versions.

8
HTML5 Document
9
The HTML5 lt!DOCTYPEgt

• In HTML5 there is only one lt!doctypegt
  declaration, and it is very simple
• lt!DOCTYPE htmlgt

10
Minimum HTML5 Document

• Below is a simple HTML5 document, with the
  minimum of required tags
• lt!DOCTYPE htmlgtlthtmlgtltheadgtltmeta
  charset"UTF-8"gtlttitlegtTitle of the
  documentlt/titlegtlt/headgtltbodygtContent of the
  document......lt/bodygtlt/htmlgt

11
HTML5 New Elements
12
The New ltcanvasgt Element

• The ltcanvasgt element is used to draw graphics, on
  the fly, via scripting (usually JavaScript).

13
New Media Elements
Tag Description
ltaudiogt Defines sound content
ltvideogt Defines a video or movie
ltsourcegt Defines multiple media resources for ltvideogt and ltaudiogt
ltembedgt Defines a container for an external application or interactive content (a plug-in)
lttrackgt Defines text tracks for ltvideogt and ltaudiogt
14
New Form Elements
Tag Description
ltdatalistgt Specifies a list of pre-defined option for input controls
ltkeygengt Defines a key-pair generator field (for forms)
ltoutputgt Defines the result of a calculation
15
New Semantic/Structural Elements
Tag Description
ltarticlegt Defines an article
ltasidegt Defines content aside from the page content
ltbdigt Isolates a part of text that might be formatted in a different direction from other text outside it
ltcommandgt Defines a command button that a user can invoke
ltdetailsgt Defines additional details that the user can view or hide
ltdialoggt Defines a dialog box or window
ltsummarygt Defines a visible heading for a ltdetailsgt element
16
New Semantic/Structural Elements
Tag Description
ltfiguregt Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
ltfigcaptiongt Defines a caption for a ltfiguregt element
ltfootergt Defines a footer for a document or section
ltheadergt Defines a header for a document or section
ltmarkgt Defines marked/highlighted text
ltmetergt Defines a scalar measurement within a known range (a gauge)
ltnavgt Defines navigation links
17
New Semantic/Structural Elements
Tag Description
ltprogressgt Represents the progress of a task
ltrubygt Defines a ruby annotation (for East Asian typography)
ltrtgt Defines an explanation/pronunciation of characters (for East Asian typography)
ltrpgt Defines what to show in browsers that do not support ruby annotations
ltsectiongt Defines a section in a document
lttimegt Defines a date/time
ltwbrgt Defines a possible line-break
18
Removed Elements

• The following HTML 4.01 elements are removed from
  HTML5
• ltacronymgt
• ltappletgt
• ltbasefontgt
• ltbiggt
• ltcentergt
• ltdirgt
• ltfontgt
• ltframegt
• ltframesetgt
• ltnoframesgt
• ltstrikegt
• ltttgt

19
HTML5 Canvas
20
HTML5 Canvas

• The HTML5 ltcanvasgt element is used to draw
  graphics, on the fly, via scripting (usually
  JavaScript).
• The ltcanvasgt element is only a container for
  graphics. You must use a script to actually draw
  the graphics.
• Canvas has several methods for drawing paths,
  boxes, circles, text, and adding images.

21
HTML5 Inline SVG
22
HTML5 Inline SVG

• SVG stands for Scalable Vector Graphics
• SVG is used to define vector-based graphics for
  the Web
• SVG defines the graphics in XML format
• SVG graphics do NOT lose any quality if they are
  zoomed or resized
• Every element and every attribute in SVG files
  can be animated
• SVG is a W3C recommendation

23
SVG Advantages

• Advantages of using SVG over other image formats
  (like JPEG and GIF) are
• SVG images can be created and edited with any
  text editor
• SVG images can be searched, indexed, scripted,
  and compressed
• SVG images are scalable
• SVG images can be printed with high quality at
  any resolution
• SVG images are zoomable (and the image can be
  zoomed without degradation)

24
Difference Between SVG Canvas
Canvas SVG
Resolution dependent Resolution independent
No support for event handlers Support for event handlers
Poor text rendering capabilities Best suited for applications with large rendering areas (Google Maps)
You can save the resulting image as .png or .jpg Slow rendering if complex (anything that uses the DOM a lot will be slow)
Well suited for graphic-intensive games Not suited for game applications
25
HTML5 Geolocation
26
HTML5 Geolocation

• The HTML5 Geolocation API is used to get the
  geographical position of a user.
• Since this can compromise user privacy, the
  position is not available unless the user
  approves it.

27
Information you get from Geolocation API
Property Description
coords.latitude The latitude as a decimal number
coords.longitude The longitude as a decimal number
coords.accuracy The accuracy of position
coords.altitude The altitude in meters above the mean sea level
coords.altitudeAccuracy The altitude accuracy of position
coords.heading The heading as degrees clockwise from North
coords.speed The speed in meters per second
timestamp The date/time of the response
28
HTML5 Video
29
HTML5 Video

• Many modern websites show videos. HTML5 provides
  a standard for showing them.

30
Video Formats and Browser Support
Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox NOUpdate Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4 YES YES
Safari YES NO NO
Opera NO YES YES
31
HTML5 Audio
32
HTML5 Audio

• HTML5 provides a standard for playing audio files.

33
Audio Formats and Browser Support
Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox NOUpdate Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3 YES YES
Safari YES YES NO
Opera NO YES YES
34
HTML5 Input Types
35
HTML5 Input Types

• HTML5 has several new input types for forms.
  These new features allow better input control and
  validation.
• color
• Date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

36
HTML5 Form Elements
37
HTML5 Form Elements

• HTML5 has the following new form elements
• ltdatalistgt
• ltkeygengt
• ltoutputgt

38
HTML5 ltdatalistgt Element

• The ltdatalistgt element specifies a list of
  pre-defined options for an ltinputgt element.
• The ltdatalistgt element is used to provide an
  "autocomplete" feature on ltinputgt elements. Users
  will see a drop-down list of pre-defined options
  as they input data.
• Use the ltinputgt element's list attribute to bind
  it together with a ltdatalistgt element.

39
HTML5 ltkeygengt Element

• The purpose of the ltkeygengt element is to provide
  a secure way to authenticate users.
• The ltkeygengt tag specifies a key-pair generator
  field in a form.
• When the form is submitted, two keys are
  generated, one private and one public.
• The private key is stored locally, and the public
  key is sent to the server. The public key could
  be used to generate a client certificate to
  authenticate the user in the future.

40
HTML5 ltoutputgt Element
41
HTML5 ltoutputgt Element

• The ltoutputgt element represents the result of a
  calculation (like one performed by a script).

42
HTML5 Semantic Elements
43
HTML5 Semantic Elements

• A semantic element clearly describes its meaning
  to both the browser and the developer.
• Examples of non-semantic elements ltdivgt and
  ltspangt - Tells nothing about its content.
• Examples of semantic elements ltformgt, lttablegt,
  and ltimggt - Clearly defines its content.

44
HTML5 Semantic Elements

• HTML5 offers new semantic elements to clearly
  define different parts of a web page
• ltheadergt
• ltnavgt
• ltsectiongt
• ltarticlegt
• ltasidegt
• ltfigcaptiongt
• ltfiguregt
• ltfootergt

45
HTML5 Web Storage
46
HTML5 Web Storage

• With HTML5, web pages can store data locally
  within the user's browser.
• Earlier, this was done with cookies. However, Web
  Storage is more secure and faster. The data is
  not included with every server request, but used
  ONLY when asked for. It is also possible to store
  large amounts of data, without affecting the
  website's performance.
• The data is stored in key/value pairs, and a web
  page can only access data stored by itself.

47
HTML5 Web Storage

• There are two new objects for storing data on the
  client
• localStorage - stores data with no expiration
  date
• sessionStorage - stores data for one session
• The sessionStorage object is equal to the
  localStorage object, except that it stores the
  data for only one session. The data is deleted
  when the user closes the browser window.

48
HTML5 Application Cache
49
HTML5 Application Cache

• HTML5 introduces application cache, which means
  that a web application is cached, and accessible
  without an internet connection.
• Application cache gives an application three
  advantages
• Offline browsing - users can use the application
  when they're offline
• Speed - cached resources load faster
• Reduced server load - the browser will only
  download updated/changed resources from the
  server

50
HTML5 Cache Manifest Example

• The example below shows an HTML document with a
  cache manifest (for offline browsing)
• lt!DOCTYPE HTMLgtlthtml manifest"demo.appcache"gtlt
  bodygtThe content of the document......lt/bodygtlt
  /htmlgt

51
Cache Manifest Basics

• To enable application cache, include the manifest
  attribute in the document's lthtmlgt tag.
• lt!DOCTYPE HTMLgtlthtml manifest"demo.appcache"gt..
  .lt/htmlgt
• Every page with the manifest attribute specified
  will be cached when the user visits it. If the
  manifest attribute is not specified, the page
  will not be cached (unless the page is specified
  directly in the manifest file).
• The recommended file extension for manifest files
  is ".appcache

52
The Manifest File

• The manifest file is a simple text file, which
  tells the browser what to cache (and what to
  never cache).
• The manifest file has three sections
• CACHE MANIFEST - Files listed under this header
  will be cached after they are downloaded for the
  first time
• NETWORK - Files listed under this header require
  a connection to the server, and will never be
  cached
• FALLBACK - Files listed under this header
  specifies fallback pages if a page is
  inaccessible

53
CACHE MANIFEST

• The first line, CACHE MANIFEST, is required
• CACHE MANIFEST/theme.css/logo.gif/main.js
• The manifest file above lists three resources a
  CSS file, a GIF image, and a JavaScript file.
  When the manifest file is loaded, the browser
  will download the three files from the root
  directory of the web site. Then, whenever the
  user is not connected to the internet, the
  resources will still be available.

54
NETWORK

• The NETWORK section below specifies that the file
  "login.asp" should never be cached, and will not
  be available offline.
• NETWORKlogin.asp
• An asterisk can be used to indicate that all
  other resources/files require an internet
  connection
• NETWORK

55
FALLBACK

• The FALLBACK section below specifies that
  "offline.html" will be served in place of all
  files in the /html/ catalog, in case an internet
  connection cannot be established
• FALLBACK/html/ /offline.html

56
Updating the Cache

• Once an application is cached, it remains cached
  until one of the following happens
• The user clears the browser's cache
• The manifest file is modified (see tip below)
• The application cache is programmatically updated