Multimedia and canvas elements in HTML5

Multimedia and canvas elements in HTML5

<canvas>

The <canvas> element was originally developed by Apple® for use in Mac OS X
Dashboard widgets and in Safari, but was later adopted by Mozilla® and Opera® in
their Web browsers. The element has been standardized and included in the HTML5
specification, along with a series of 2D drawing APIs that can be used to create
shapes, text, transitions, and animations inside the element.
Many believe that the <canvas> element is one of the most important aspects of
HTML5 as it facilitates the production of graphs, interactive games, paint
applications, and other graphics on the fly without requiring external plug-ins such as
Adobe Flash.

The <canvas> element itself is quite basic, defining the width, height, and unique ID
for the object. The developer must then use a series of JavaScript APIs to actually
draw objects on the canvas, typically when the Web page has finished rendering.
These APIs allow the developer to draw shapes and lines; apply color, opacity, and
gradients; create text; transform canvas objects; and perform animation. The APIs
also allow the <canvas> to be interactive and respond to user input such as mouse
events and key events, facilitating the production of games and Web applications on
the canvas. You will see an example of the <canvas> element in action in the
sample HTML5/CSS3 Web site later in this tutorial.

<audio> and <video>

In recent years, the popularity of video sharing sites such as YouTube and content
delivery platforms like Hulu has seen a huge explosion in the use of the Web for
multimedia streaming. Unfortunately, the Web was not built with such content in
mind, and as a result, the provision of video and audio has by and large been
facilitated by the Flash Video (.flv) file format and the Adobe Flash platform.
HTML5, however, includes support for two new elements, <audio> and <video>,
which allow Web developers to include multimedia content without relying on the
user to have additional browser plug-ins installed. Several browsers, including
Mozilla Firefox, Apple Safari, and Google Chrome, have begun supporting these
new elements and providing standard browser playback controls, should the user
choose to use them. In addition, a set of standard JavaScript APIs has been
provided to allow developers to create their own playback controls, should they wish
to do so. A key advantage to native multimedia playback is that it theoretically
requires less CPU resources, which can lead to energy savings.
A key issue with these new multimedia elements, however, is the file formats
supported by each browser and the patent licensing issues that go along with the
various codecs that these files can be encoded with. Mozilla and Opera want to use
the open source Theora video container and codec, which does not require patent
licensing for the inclusion of the codecs in the Web browser. On the other hand,
Apple and Google are not happy with the quality of Theora, particularly for the
delivery of high definition (HD) content on the likes of YouTube. They prefer the
H.264 codec, typically contained in MP4, MOV, or MKV files.
The issue is not just with video however, as the same problems reside with audio
codecs. The MP3 and AAC formats are restricted by patents, whereas the Vorbis
format is not. The problem with Vorbis audio is that it is not in widespread use, as
portable media players and many media software applications do not support it.
There are many decisions to be made about HTML5 <video> and <audio> in the
near future, and it will be interesting to see what codecs and formats are facilitated in
the final recommendation. In the meantime, you can try to support all browsers by
making video available in a variety of formats and by providing Flash video as a
fallback. Let’s hope that a final decision is made, and that it is not left to browser
vendors to decide which formats to support, as that would essentially render these
new elements useless.
Again, you will see the <video> element in action later in this tutorial.

Creating Reset.css

Creating Reset.css

Too many CSS designers don’t realize the importance of creating a “reset.css” file. When you have an environment where each browser has its own “default” styling, you’ll often find yourself thumping your skull as you ask yourself, “Why is there a spacing here?” To save yourself some of the headaches that you’ll undoubtedly experience, you’ll need to create your own simple reset file. The problem with using one of the many currently existing frameworks is that they aren’t tailored specifically to you. For example, I never use the deprecated “center” element in my projects. Consequently, I don’t need to put it into my default styling. However, others may need to do so – though they would deserve a slap on the wrist…or the buttocks if you’re so inclined.

Step 1: Zero Out Your Margins And Padding

By default, the browsers will add margins to many elements. For example, typically there are about six pixels of margins on the body element. As the designer, you should be the one specifying these figures! (Except maybe when it comes to font size – which is a whole other topic to be debated at length.) So let’s zero out a bunch of these elements!

 

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, 

ol, li, dl, dt, dd, form, a, fieldset, input, th, td 

margin: 0; padding: 0; border: 0; outline: none; 

Step 2: Take Control Of Your Elements

You may have noticed that your elements vary in size from browser to browser. You can change this by setting the default font-size to 100%.

 

h1, h2, h3, h4, h5, h6 

font-size: 100%; 

}

Next, we’ll need to define the margins and padding for our heading elements. I’m also going to remove the list-style-type from my list elements. Lastly, I’ll set a base font-size for the body element.

body 

line-height: 1; 

font-size: 88%; 

 

h1, h2, h3, h4, h5, h6 

font-size: 100%; 

padding: .6em 0; 

margin: 0 15px; 

 

ul, ol 

list-style: none; 

 

img 

border: 0; 

Step 3: Expand

I typically like to include a few common classes that I use in all of my projects. You may or may not choose to use these yourself.

 

.floatLeft 

float: left; 

padding: .5em .5em .5em 0; 

 

.floatRight 

float: rightright; 

padding: .5em 0 .5em .5em; 

}

Here Is Our Final Simple Reset.css File.

 

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, 

li, dl, dt, dd, form, a, fieldset, input, th, td 

margin: 0; padding: 0; border: 0; outline: none; 

 

body 

line-height: 1; 

font-size: 88% /* Decide for yourself if you want to include this. */; 

 

h1, h2, h3, h4, h5, h6 

font-size: 100%; 

padding: .6em 0; 

margin: 0 15px; 

 

ul, ol 

list-style: none; 

 

color: black; 

text-decoration: none; 

 

a:hover 

text-decoration: underline; 

 

.floatLeft 

float: left; 

padding: .5em .5em .5em 0; 

 

.floatRight 

float: rightright; 

padding: .5em 0 .5em .5em; 

}

At least for me, this is all I need to get started with a new website. For your own projects, you should expand upon what I have here so that it best suits you. You should probably specify the margins on more of your commonly used elements, like the paragraph tag.

CSS3 Tutorials with all Tags

CSS3 Tutorials with all Tags

Cascading Style Sheets (CSS) is a style sheet language
and it was used for presentations  look and formatting of a document written in a Hyper Text Mark up Language.
It’s most common application is to style web pages written in HTML and XHTML.

Please download the attached PDF document for its tags and tutorials.

 

Local storage and offline applications in HTML 5

Local storage and offline applications in HTML 5

Web developers have traditionally used cookies to store information on a visitor’s
local machine, allowing a Web page to read this information back at a later point.
While cookies are very useful for storing basic data, they are limited by the fact that
Web browsers are not required to keep more than 20 cookies per Web server or
more than 4KB of data per cookie (including both name and value). In addition, they
are sent to the Web server with every HTTP request, which is a waste of resources.
HTML5 provides a solution for these problems with the Local Storage APIs, which
are covered in a separate specification to the main HTML5 document. This set of
APIs allows developers to store information on the visitor’s computer while remaining
reasonably confident that they will still be there at a later date. In addition, the
information is accessible at any point (even after the page has rendered) and is not
loaded automatically with each HTTP request. The specification includes
same-origin restrictions, which prevent Web sites from reading or changing data
stored by other Web sites.

Most browsers store Web pages in local cache, allowing them to be viewed even if
the user is offline. This works fine for static pages, but it is not available for dynamic
content that is typically database-driven, such as Gmail, Facebook, or Twitter.
HTML5 provides support for offline applications, where the browser downloads all
the files necessary to use the application offline, and when the user uses the
application offline, the browser can allow any changes made in the process to be
uploaded to the server when they reconnect to the Internet.

HTML 5 – Semantic elements

HTML 5 – Semantic elements

The HTML5 specification includes a series of new semantic elements that is used to
give some meaning to the various sections or parts of a Web page, such as a
header, footer, navigation, and so on. In previous versions of HTML (HTML4.01), you would
typically use <div> elements to create these parts, using ID or class attributes to
differentiate them from each other. The problem with this is that this has no semantic
meaning, as there are no strict rules defined that specify what class names or IDs
are to be used, making it extremely difficult for software to determine what the
particular area is doing. HTML5 should help alleviate these issues, making it easier
for Web browsers to parse the semantic structure of a document.
It is worth pointing out that continuing to use <div> elements in HTML5 is perfectly
valid, but in order to future-proof your work, it is recommended that you use
semantic elements where relevant.

Try avoid using these new elements for purposes other than their intended. For
example, the <nav> element should not be used for just any group of links; it is
intended to surround the main navigation block on the page.
The main semantic elements that HTML5 introduces are:

<header>

This element is used to define a header for some part of a Web page, be it the
entire page, an <article> element, or a <section> element.

<footer>

Like the <header> element, this new element defines a footer for some part of
a page. A footer does not have to be included at the end of a page, article, or
section, but it typically does.

<nav>

This is a container for the primary navigation links on a Web page. This
element is not intended for use with all groups of links and should be used for
major navigation blocks only. If you have a <footer> element that contains
navigation links, you do not need to wrap these links in a <nav> element, since
the <footer> element will suffice on its own.

<article>

The <article> element is used to define an independent item on the page that
can be distributed on its own, such as a news item, blog post, or comment.
Such items are typically syndicated using RSS feeds.

<section>

This element represents a section of a document or application, such as a
chapter or a section of an article or tutorial. For example, the section you are
reading now could be surrounded by a <section> element in HTML5. <section>
elements typically have a header, although it is not strictly required. The header
for the section you are reading now would contain the text "Semantic
elements," for example.

<aside>

This new element can be used to mark up a sidebar or some other content that
is considered somewhat separate to the content around it. An example of this
might be advertising blocks.

<hgroup>

In some cases, a page, article, or section may require more than one heading,
such as where you have a title and a subtitle. This tutorial, for example, has the
title "Create modern Web sites using HTML5 and CSS3" and the subtitle
"Implementing the canvas and video elements in HTML5." You could wrap
these in an <hgroup> element, using an <h1> element for the main title
Create modern Web sites using HTML5 <h2> element for the subtitle.
The sample Web site at the end of this tutorial includes several of these new
semantic elements, and I will explain their syntax and use in more detail at that
point.

Difference between <DIV>, <SPAN>, <SECTION>

Difference between <DIV>, <SPAN>, <SECTION>

The SPAN and DIV HTML Elements
How to Use SPAN and DIV with CSS on Web Pages
The SPAN and DIV elements are very useful when dealing with CSS(Cascading Style Sheets).
These two elements in a similar fashion, but they serve different purposes.
The DIV Element :The DIV elements define logical divisions in your web page. It acts a lot like a <P> element, by placing newlines before and after the division. A division can have multiple paragraphs in it.
Using the DIV Tag
To use the DIV element, simply surround the area of your page that you want as a separate division with the <div> and </div> tags:
<div id=”mydiv”>
<p>contents of div</p>
</div>
The DIV element gives you the chance to define the style of whole sections of the HTML. You can define a division of your page as a call out and give that area a different style from the surrounding text. That area could have images, paragraphs and headlines, anything you wanted. The DIV element also gives you the ability to ID areas of your documents so that you can change them with Ajax and dynamic HTML.
The DIV element is different in new HTML5 SECTION element because it does not give the enclosed content any semantic meaning. If you aren’t sure whether the block of content should be a DIV or a SECTION, think about what that content’s purpose is and why you need the DIV or SECTTION element.
1.    If you need the element simply to add styles to that area of the page, you should use the DIV element.
2.    If that area of the page has a specific meaning, for example it holds all your social media elements or it contains your blogroll, then you should use the SECTION element.
One thing to keep in mind when using the DIV element is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a DIV you can’t have a DIV inside a paragraph.
The primary attributes of the DIV element are:
1.    style
2.    class
3.    id
Even if you don’t use style sheets or DHTML, you should get into the habit of using the DIV element. This will give you more flexibility and future proof your HTML. Also, you can use the id to identify your divisions so that your web pages are well formed.
Because the CENTER element has been deprecated in HTML 4.0 and is obsolete in HTML5, it is a good idea to start using <div style=”text-align: center;”> to center the content inside your DIV.
Learn More About the DIV Element
The SPAN Element
The SPAN element has very similar properties to the DIV element, in that it changes the style of the text it encloses. But without any style attributes, the SPAN element won’t change the enclosed items at all.
The primary difference between the SPAN and DIV elements is that SPAN doesn’t do any formatting of it’s own. The DIV element includes a paragraph break. The SPAN element simply tells the browser to apply the style rules to whatever is within the SPAN.
To use the SPAN element, simply surround the text that you want to add styles to with the<span> and </span> tags:
<div id=”mydiv”>
<p><span class=”highlight”>Highlighted text</span> and non-highlighted text.</p>
</div>
The SPAN element has no required attributes, but the three that are the most useful are the same as for the DIV element:
·    style
·    class
·    id
Use SPAN when you want to change the style of elements without placing them in a new block-level element in the document. For example, if you had a Level 3 Heading (H3) that you wanted the second word to be red, you could surround that word with <span style=”color : #f00;”>2ndWord</span> and it would still be a part of the H3 tag, just red. For example:
<h3>This is My <span style=”color: red;”>Awesome</span> Headline</h3>