Menus

Jun 14, 2016

HTML 5 Introduction

HTML 5
Introduction
HTML 5 is nothing different than HTML, it is an advanced & modified version of HTML standers which most of new browsers supports this standard. HTML 5 has introduced some new tags and removed some unnecessary tags from the HTML standers.
The first web browser, Mosaic, was introduced in 1993. A year later Netscape, based on Mosaic, was introduced and the net began to become popular. HTML was used in both browsers, but there was no "standard" HTML until the introduction of HTML 2.0.
HTML 2.0 was first published in 1995.* HTML 3.0 was published two years later and 4.01 two years after that. HTML 4.01 has been the work horse of the net ever since.
The first "working draft" of HTML5 came out in January of 2008 and it already has surprisingly broad browser support. However HTML5 is not yet fully implemented and won't be for some years yet.
Two groups, the W3C and the WHATWG (Web Hypertext Application Technology Working Group), are in charge of developing HTML5.
In many ways HTML5 is not all that different that 4.01. Certain tags, such as the <font> tag that were "deprecated" but worked in HTML 4.01 don't work in HTML5. There are a number of other odds and ends that have been changed, but they tidy up old messes rather than introduce fundamental changes.

Some rules for HTML5 were established:
  • New features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the need for external plugins (like Flash)
  • Better error handling
  • More markup to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public

The doctype declaration
At the very top of the page you will see the doctype declaration:
<!DOCTYPE html>
Like any language, HTML5 has a grammar and a vocabulary.
Grammar: <!DOCTYPE html> goes at the top of every HTML5 page.
Vocabulary: The HTML5 word <!DOCTYPE html> means "this page is written in HTML5"

A Sample HTML5 Document
Text Box: <!DOCTYPE html>
<html>
    <head> 
        <title>Title of the document</title>
   </head>
  <body>
      The content of the document......
  </body>
</html>

<NAV> tag
The <nav> tag defines a set of navigation links.
A Sample HTML5 Document
Text Box: <nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

HTML5 Video
Many modern websites show videos. HTML5 defines a new element which specifies a standard way to embed a video/movie on the web page: the <video> element. In HTML 4.01 or older version browsers shows the videos through a plug-ins (like flash player).
Example:
Text Box: <video width="320" height="240" controls="controls">
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
   Your browser does not support the video tag.
</video>
·         You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element.
·         The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format.
·         The control attribute adds video controls, like play, pause, and volume.

HTML Video Tags:
<video> : Defines a video or movie
<source> : Defines multiple media resources for media elements, such as <video> and <audio>
<track> : Defines text tracks in mediaplayer.
Note: The <track> tag is not supported in any of the major browsers.

HTML5 Audio
Similarly to video before HTML5 standard browsers use the plug-ins to play the audio file. HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.
Example:
Text Box: <audio controls="controls">
    <source src="song.mp3" type="audio/mpeg" />
    <source src="song.ogg" type="audio/ogg" />
   Your browser does not support the audio tag.
</audio>

·         The control attribute adds audio controls, like play, pause, and volume.
·         You should also insert text content between the <audio> and </audio> tags for browsers that do not support the <audio> element.
·         The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.

HTML5 Canvas
The canvas concept was originally introduced by Apple to be used in Mac OS X WebKit to create dashboard widgets. Before the arrival of canvas, you could only use drawing APIs in a browser through plug-ins such as Adobe plug-ins for Flash and Scalable Vector Graphics (SVG), Vector Markup Language (VML) only in Internet Explorer, or other clever JavaScript hacks.
When you use a canvas element in your web page, it creates a rectangular area on the page. By default, this rectangular area is 300 pixels wide and 150 pixels high, but you can specify the exact size and set other attributes for your canvas element.
A Basic Canvas Element:
<canvas></canvas>
Once you have added a canvas element to your page, you can use JavaScript to manipulate it any way you want. You can add graphics, lines and text to it, you can draw on it, and you can even add advanced animations to it.
The canvas API supports the same two-dimensional drawing operations that most modern operating systems and frameworks support.
To programmatically use a canvas, you have to first get its context. You can then perform actions on the context and finally apply those actions to the context. You can then perform actions on the context and finally apply those actions to the context.

Canvas Coordinates
Canvas coordinates start at x=0, y=0 in the upper-left corner, which we will refer to as the origin and increase (in pixels) horizontally over the x-axis and vertically over the y-axis.

Adding a Canvas to a page
Adding a canvas element in an HTML page is pretty straight-forward.
Example:
<canvas id="diagonal" style="border: 1px solid;" width="200" height="200"></canvas>
Note the addition of the ID="diagonal" to make it easy to locate this canvas element programmatically. An ID attribute is crucial to any canvas because all the useful operations on this element must be done through scripting.

Script code for Example canvas:
<script>
function drawDiagonal(){
        //Get the canvas element and its drawing context
        var canvas = document.getElementById('diagonal');
        var context = canvas.getContext('2d');

        //Create a path in absolute coordinates
        context.beginPath();
        context.moveTo(70,140);
        context.lineTo(140,70);

        //Stroke the line onto the canvas
        context.stroke();
}
        window.addEventListener("load", drawDiagonal, true);
</script>
        The drawing methods moveTo() and lineTo() do not actually create the line; you finalize a canvas operation and draw the line by calling the context.stroke() method.
Lets examine the JavaScript code used to create the diagonal line. It is a simple example, but it captures the essential flow of working with the Canvas API. You should know the detail of Canvas API for further drawing advance at canvas.

HTML5 Scalable Vector Graphics (SVG)
Vector graphics are quite different. Vector graphics represent images with mathematical descriptions of geometry. A vector image contains all of the information needed to draw an image from high-level geometric objects such as lines and shapes.
As you can tell by the name, SVG is an example of vector graphics.
When you magnify, rotate, or otherwise transform SVG content, all of the lines making up the image are crisply redrawn. SVG scales without losing quality.
Example: Adding SVG to Page
<!doctype html>
<svg width="200" height="200">
</svg>

Adding Simple Shapes to the SVG:
The SVG language includes basic shape elements such as rectangles, circles, and ellipses. The size and position of shape elements are defined with attributes. For rectangles, these are width and height.
Exmaple:
<!doctype html>
<svg width="200" height="200">
<rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" />
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8" />
</svg>


Transforming SVG Elements
There are organizational elements in SVG intended to combine multiple elements so that they can be transformed or linked to as units. The <g> element stands for “group.” Groups can be used to combine multiple related elements. As a group, they can be referred to by a common ID. A group can also be transformed as a unit. If you add a transform attribute to a group, all of that group’s contents are transformed. The transform attribute can include commands to rotate, translate, scale, and skew.
Example:
<svg width="200" height="200">
<g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
<rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" />
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8" />
</g>
</svg>
Reusing Content:
SVG has a <defs> element for defining content for future use. It also has an element named <use> that you can link to your definitions. This lets you reuse the same content multiple times and eliminate redundancy. Figure below shows a group used three times at different transformed positions and scales. The group has the id ShapeGroup, and it contains a rectangle and a circle. The actual rectangle and circle shapes are just defined the one time inside of the <defs> element. The defined group is not, by itself, visible. Instead, there are three <use> elements linked to the shape group, so three rectangles and three circles appear rendered on the page.
Example:
<svg width="200" height="200">
<defs>
<g id="ShapeGroup">
<rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" />
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8" />
</g>
</defs>
<use xlink:href="#ShapeGroup" transform="translate(60,0) scale(0.5)"/>
<use xlink:href="#ShapeGroup" transform="translate(120,80) scale(0.4)"/>
<use xlink:href="#ShapeGroup" transform="translate(20,60) scale(0.25)"/>
</svg>



SVG Text:
SVG also supports text. Text in SVG is selectable within the browser (see Figure 3-11). Should they choose to, browsers and search engines could also allow users to search for text inside of SVG text elements. This has major usability and accessibility benefits.
SVG Text has attributes that are similar to CSS style rules for HTML.
Example:
<svg width="600" height="200">
<text x="10" y="80"
font-family="Droid Sans"
stroke="#00f" fill="#0ff" font-size="40px"
font-weight="bold">
Select this text!
</text>
</svg>


No comments:

Post a Comment

Contact Form

Name

Email *

Message *