Skip to main content

Basics Of HTML5 for beginners Part I


HTML5 released more than a year or so, but today I find many people having difficulty (including me) and doesn't know how HTML5 can be helpful.
So here I am providing some of its tags which are used most widely and can be also be helpful to you.

These are the very basics of HTML5 and more and advanced tuts will be provided in Future.






DOCTYPE
The doctype for HTML 4.01 looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


Now  The doctype for HTML5 is:
<!DOCTYPE html>


It is very short indeed.

Meta Tags
If you want to specify the character encoding of a markup document, the best way is to ensure that your server sends the correct Content-Type header. The meta declaration for a document written in HTML 4.01:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


In HTML5 it as simple as that:
<meta charset="UTF-8">


<script> tag
The <script> tag we use to write is this:
<script type="text/javascript" src="javas.js"></script>


Browsers don’t need that attribute since javascript is the only scripting language on the web(most widely used):
<script src="javas.js"></script>


Similarly, no need to specify type value of “text/css” every time when a CSS file is linked:
<link rel="stylesheet" type="text/css" href="css.css">

Simply write it as:
<link rel="stylesheet" href="css.css">


a tags
previous format
<h2><a href="/page">Page</a></h2>
<p><a href="/page">Page of HTML5.</a></p>

In HTML5, it can wrapped into a single element:
<a href="/page">
<h2>Page</h2>
<p> Page of HTML5. </p>
</a>


Audio
Embedding an audio file in an HTML5 :
<audio src="broken.mp3"></audio>

Using autoplay attribute it can be played as the site is loaded:
<audio src="broken.mp3" autoplay></audio>


If you want to keep the audio playing you can use loop attribute:
<audio src="broken.mp3" autoplay loop></audio>

If you want the controls to be shown to the users you can simply use controls attribute:


<audio src="broken.mp3" controls></audio>

You can create your own controls using JavaScript use Audio API, which gives you access to methods such as play and pause and properties such as volume:
<audio id="player" src="broken.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()"> Play</button>
<button onclick="document.getElementById('player').pause()"> Pause</button>
<button onclick="document.getElementById('player').volume += 0.5">Volume Up</button>
<button onclick="document.getElementById('player').volume -= 0.5">Volume Down</button>
</div>

The autobuffer attribute has now been replaced with the preload attribute. It can take three possible values: none, auto, and metadata. Using preload="none", you can tell browsers not to pre-load the audio unless user wants it:
<audio src=" broken.mp3" controls preload="none"></audio>


Video

  • It has preload attribute.
  • It has the optional autoplay and loop.
  • You can use src or source to fetch the video file.
  • You’ll have to provide dimensions to fit as you want:
<video src="movies.mp4"  width="300" height="300" controls></video>

You can choose a representative image for the video and tell the browser to display it using the poster attribute:
<video src="movies.mp4" controls width="300" height="300" poster="initial.jpg"></video>

There are many video formats available so there is a need to specify which of the format you are using. So for that you can use the other apps:
<video controls width="360" height="240" poster="initial.jpg">
<source src="movies.mp4" type="video/mp4">
<source src="movies.ogv" type="video/ogg">
<object type="application/x-shockwave-flash" width="360" height="240" »
data="player.swf?file=movies.mp4">
<param name="movie" value="player.swf?file=movies.mp4">
<a href="movies.mp4">Download the movie</a>
</object>
</video>

We will talk about more tags and tips in the another tutorial.

Comments

  1. YA some new comers are facing this problem while making Web sites.Your content can be more helpful to them.

    ReplyDelete

Post a Comment

Popular posts from this blog

Microsoft pays Facebook to put Bing on logout page

Facebook got its first customer for the logout page, and the customer is also OS giant Microsoft . Now, it may bee soon that you will get to see Bing page as you logout of the Facebook, though some of the people have got it already as it is testing phase . This step is taken by Microsoft to save its search engine so called BING 'Bing Is Not Google' . Microsoft has been spending millions of dollars to increase Bing's market share so this

JQuery Plugins Site Down

Two three days before when I entered to  http://plugins.jquery. com   I thought it might be a small error and will be fixed in a hour or so . But, when I returned it showed the same message COME BACK LATER.

Jailbreak for iPhone OS 6 Beta

If you are iPhone user then this post is surely going to surprise you. Whenever iPhone or iPad with new iOS is released then it takes some time for their jailbreak to come. But this time it is something special. It’s only 15 days from the date when iOS 6 was released and in this short span of time, iPhone Dev team has announced that they have released the jailbreak for it. Seems to be interesting and this news is hitting the web across the world. Some say that it’s just announcement and far from reality. Whatever is, in this post I am going to post the procedure to jailbreak iOS6. Hope you find it useful for you. So let’s have a look on it.