This Tutorial is for HTML5, Please click on right arrow icon for next page and left arrow icon for previous page

HTML 5 Includes

  • Introduction
  • Advanced Input types
  • SVG
  • Audio Tag
  • Video Tag
  • Canvas
  • Geolocation

1. Introduction

New HTML 5 Elements

  • New elements HEADER Tag, FOOTER Tag, ARTICLE Tag, and SECTION tag.
  • New form control attributes like number, date, time, calendar, and range.
  • New graphic elements: SVG Tag and CANVAS Tag
  • New multimedia elements: AUDIO Tag and VIDEO Tag
  • Click Here For tag detail

HTML5 Browser Support

  • HTML5 is supported in all modern browsers.

Define HTML5 Elements as Block Elements

  • HTML5 defines eight new semantic HTML elements. All these are block-level elements.
  • header, section, footer, aside, nav, main, article, figure
  • You can also add any new element to HTML
  • Click Here for demo

Problem With Internet Explorer

  • You could use the solution described above, for all new HTML5 elements.
  • You can also add any new element to HTML
  • Click Here for demo

What are Semantic Elements?

  • A semantic element clearly describes its meaning to both the browser and the developer.
  • Examples of non-semantic elements: DIV tag and SPAN tag- Tells nothing about its content.
  • Examples of semantic elements: FORM tag, TABLE tag, and IMG tag - Clearly defines its content.

New Semantic Elements in HTML5

New Semantic Elements in HTML5

2. Advanced Input Type

New input types

  • Click Here For tag detail
  • 3.SVG

    What is 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
    • SVG integrates with other W3C standards such as the DOM and XSL

    SVG Advantages

    • 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)
    • SVG is an open standard
    • SVG files are pure XML
  • Start With svg
  • Line Using SVG
  • Rectangle Using SVG
  • Circle Using SVG
  • Text Using SVG
  • Transform Using SVG
  • Star Using SVG
  • Linear Gradient
  • Radial Gradient
  • SVG Filters

    • SVG Filters are used to add special effects to SVG graphics.

    SVG Filters Example

    4.Audio Tag

    Audio Tag

    • The audio tag defines sound, such as music or other audio streams.
    • Currently, there are 3 supported file formats for the audio tag element: MP3, Wav, and Ogg

    Audio Tag

    5.video Tag

    video Tag

    • Before HTML5, there was no standard for showing videos on a web page.
    • Before HTML5, videos could only be played with a plug-in (like flash).
    • The HTML5 video tag element specifies a standard way to embed a video in a web page.

    video Tag

    6.Canvas Tag

    SVG Vs CANVAS

    What is HTML Canvas?

    • The HTML CANVAS element is used to draw graphics, on the fly, via scripting (usually JavaScript).
    • The CANVAS 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.

    CANVAS example

    7.Geolocation

    What is Geolocation?

    The HTML5 geolocation feature lets you find out the geographic coordinates (latitude and longitude numbers) of the current location of your website's visitor. This feature is helpful for providing better browsing experience to the site visitor. For example, you can return the search results that are physically close to the user's location.

    Gelocation example

    THE END