HTML 5 and modern website development methods

Google BuzzFacebookLinkedInOrkutStumbleUponShare

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

Solution By minds

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

solminds

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=”some@email.com” />
<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

This entry was posted in HTML5, Website Development. Bookmark the permalink.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>