HTML 5 and modern website development methods
Have you ever wondered about..
Embed a video without help of any thirdparty tools/player…
Make use of hosted fonts ,i.e, user doesn’t need particular font in his system to read
Draw curved borders, circles etc ..
HTML 5 will help us to do the above all and more. It is powering browsers on its way to become a self dependant platform. HTML5 is trying to reduce the interference of third-party or external plugins and tools. Even if it is not a mature standard yet, we can easily say that web world is going to move with HTML5.
Lets check out some Tags and features. We have tried to implement html 5 standards for demo purpose at the following link also.
http://gd.solminds.in/www/html5/
1. Audio Tag
We can embed a audio on a website using a single tag . No need to take the help of any external players on front end.
2. Video Tag
In the same way we did in audio, we can embed and play video files using a tag
3. Micro data
This is an invisible property which gives more intelligence to the system
My name is Praveen.
I am an Indian.
4. Rounded Corners
Imagine about displaying round cornered boxes without using any graphics/images.
CSS
#mac {
border-radius: 16px; /* half of button size + padding */
-moz-border-radius: 16px;
height: 20px;
background: -webkit-gradient(linear, left top, left bottom, from(#8cc0f6), to(#cfe4fa));
background: -moz-linear-gradient(top, #8cc0f6, #cfe4fa);
}
HTML
5. Draw Circles / Gradient fill
CSS
#circle {
border-radius: 36px; /* half of button size + padding */
-moz-border-radius: 36px;
height: 60px;
width: 60px;
border: 2px solid #ccc;
left: 50%;
background: -webkit-gradient(linear, left top, left bottom, from(#f53e0c), to(#ffbaa8));
background: -moz-linear-gradient(top, #f53e0c, #ffbaa8);
}
HTML
6. Usage of hosted fonts
It’s a solution of all type of font issue. User can read text with the help of hosted fonts, That mean he doesn’t need that particular font we have used on his system.
CSS
@font-face {
font-family: ‘Droid Sans’;
font-style: normal;
font-weight: bold;
src: local(‘Droid Sans’), url(‘http://playground.html5rocks.com/samples/html5_misc/Droid_Sans.ttf’) format(‘truetype’);
}
p#title2 {
font: 100% “Molengo”, Verdana, sans-serif;
HTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit
7. Form Fields
<input type=”range” value=”0″ />
<input type=”search” />
<input type=”text” />
<strong>Input Validation:</strong>
<!– :invalid { background-color: red; } –>
<input type=”color” value=”bear” />
<input type=”number” value=”abc” />
<input type=”email” value=”[email protected]” />
<input type=”tel” value=”1234″ /> HTML5 has a wide range of tags which will help us to display new generation form fields.
Some examples are as following
Please note that html5 is only supported in latest version of the browsers. Internet Explorer 9 is the only supported version from Microsoft stable. All versions of chrome and the latest firefox supports HTML5
