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:
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>
<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>
YA some new comers are facing this problem while making Web sites.Your content can be more helpful to them.
ReplyDelete