Thursday, December 1, 2011

HTML 5 Media Elements With Example

by GS | 0 comments


The new HTML5 media elements are ..

<audio> : For audio content, sounds, music or other audio streams
<video> : For video content, such as a movie clip or other video streams
<source> : For media resources for media elements, defined inside video or audio elements
<embed> : For embedded content, such as a plug-in
<track> : For text tracks used in media players

Audio example :

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
</audio>


Video example :

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>


 

Thursday, November 24, 2011

Linking (including) an external CSS (style sheet) to a HTML page

by GS | 0 comments


An external style sheet can be linked to the page with a <link> tag.

Example link tag which includes an external style sheet is as follows..

<link rel="stylesheet" type="text/css" href="xyz.css" />

The advantage of doing this is that the same style sheet can be used in every page on your site. And the entire site's styling can be managed by changing just this one file.

When the CSS is defined inside the html page, the css classes can be declared with in the <style> tags, but we do not put <style> tags inside an external style sheet.


 

What is CSS? Where is CSS Used? and an example HTML that uses CSS

by GS | 2 comments


CSS is nothing but Cascading Style Sheets, these are used to separate the content from design of the HTML page, so that in future if we want to change the design and layout of the HTML page, without disturbing the content, it will become any easy job. That is we can change the layout / design by simply modifying the CSS.

The CSS can be declared with in the html file or in a separate CSS file.

The structure of the simple CSS is as follows,

.leftcol
{
float: left;
width: 33%;
background:#908800;
}
.middlecol
{
float: left;
width: 34%;
background:#effefe;
}
.rightcol
{
float:left;
width: 33%;
background:#dddd11;
}

In the above example the "leftcol","middlecol","rightcol" are the css class names, which defines its own styling, these classes need to be applied on the HTML elements to see these styling effects.

simple html that uses the above declared css class

<html>

<head>

<style type=​"text/​css">
.leftcol
{
float: left;
width: 33%;
background:#908800;
}
.middlecol
{
float: left;
width: 34%;
background:#effefe;
}
.rightcol
{
float:left;
width: 33%;
background:#dddd11;
}
</style>

</head>

<body>

<div class="leftcol">this is a left div ...</div>
<div class="middlecol">this is a middle div ...</div>
<div class="rightcol">this is a right div ...</div>

</body>

</html>


 

What is the difference between Dojo and jQuery

by GS | 0 comments


jQuery is a JavaScript Library that simplifies HTML document traversing(DOM manipulation), event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Dojo is a more comprehensive toolkit that offers the above features, but also includes many other pieces that facilitate building rich web applications