HTML5 Archives - Codentricks

Web Developer extension and the choice of Best Web Browser

If you are a web developer then the question is quite common which is the best web browser for web development . In this tech arena every browser want to take the number one tag. In this blog I am going to share my favorite browser and why it became number one .
Mozilla Firefox is my favorite, I accept chrome has taken the market share for being light and fast, internet explorer 10 is also doing well but still I die for firefox. Right now I use Firefox 18 , in speed its par with chrome and IE 10 in some cases faster, but right now we use modern computer that has atleast 2GB of RAM and dual core CPU so you can’t see the speed difference only benchmarks can tell the difference. Firefox uses more memory around 400-700MB but its not a problem. Firefox offers net and clean interface, always welcome new technologies, devoted towards open source and also stable and secure. Its extension arena has everything you need and it makes you special , chrome also supports extension and has decent store where you can download and install extension with no restart feature but firefox interface is awesome as firefox is feature rich compared to chrome. IE is by greedy microsoft the company is not listening to its old customer as the support of IE10 is limited to Windows 8 still now does not supports multi platform so it was omitted from my list.

Firefox and the extension we die for :

If we are a web developer or SEO Expert then Firefox makes you job easy, I am going to share a partial list of my favorite extension.

1. ADBLOCK PLUS

Web Designer has to surf a lot to get new ideas or inspiration but the annoying ads and pop ups make the job hard, adblock plus not only block all these but gives you interface to control it.

2. Colorzilla

If you are a web designer or UI designer then you can’t stop yourselves playing with colors. This is not a color picker tool but has eyedropper and other cool option.

3. Firebug

HTML , HTML5 , CSS , javascript wonder which kind of scripting is using this firebug is the only solution, it give not only to view source of website but with advance option. This is Web Designer no. one app.

4. Webrankstat

This is a SEO tool provides alexa rank, google rank,page index,backlinks and other information while surfing.list is going to updated soon.

HTML5 Audio Tag

HTML 5 natively support audio tag . Now your HTML 5 enable
browser supports .ogg ,.mp3 format. So you can implement audio streaming on your HTML5 based website with a little bit of coding and its fairly simple.
Browser Compatibility :
IE 9, Firefox, Opera, Chrome, and Safari support the <audio> element.

HTML5 Audio Tag Coding Structure

<audio controls=”corols”>
<source src=”openplus.ogg” type=”audio/ogg” />
<source src=”openplus.mp3″ type=”audio/mp3″ />
Your browser does not support the audio tag.
</audio>

For more info visit
w3schools.com/html5/tag_audio.asp

HTML FORM tutorial with CSS based Example

FORMS are used to pass data to a server and contain input elements like
text, check box, radio, button, submit, reset, password.

A form is incomplete with out input box . Data sent to server through forms using input elements and executed on the server.Lets have a example of a form

Output

Explanation:
action- pointed to page where programming codes will be there.
type- we have to define type of input box whether it is text, password,submit or so on..
method- we have to define which method we are using GET or POST , remember POST is secure compare to GET.

Lets have Complete example –
In this example used PHP as Programming language, CSS for making the form look good and html5.

Complete Script –

<!DOCTYPE html>

<head>

<title>Form Tutorial</title>

.input{

background:#fff;

border: 1px solid #999;

box-shadow:inset 0 0 2px #000000;

color: #222;

}

.input:hover{

background:#f6f6f6;

border: 1px solid #999;

color: #222;

}

</style>

</head><body>

<?php

if(isset($_POST[‘submit’)){

$name=$_POST[‘name’];

echo “Hello “. $name. ” its Working naa”;

}

</form>

</body>

</html>

If you have any question then please comment .

Creating Stunning Pure CSS Navigation Menu with Simple Coding

I am not going to teach you each step as you see the code , you will be able to understand it with out any problem. If you have any problem then please comment I will help you.

Screenshot:

Coding:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Sanjay’ HTML5 World</title>
<meta charset=”utf-8″ />
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
background:#FFD700;
border: 1px solid #f80;
padding:5px 5px 5px 15px;
}
li
{
display:inline;
}
li a:link{
color:#222;
text-decoration:none;
}
li a:active{
color:#222;
text-decoration:none;
}
li a:visited{
color:#222;
text-decoration:none;
}
li a:hover{
color:#f30;
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li><a href=”home.htm”>Home</a></li>
<li><a href=”service.htm”>Services</a></li>
<li><a href=”contact.htm”>Contact</a></li>
<li><a href=”about.htm”>About</a></li>
</ul>
</body>
</html>

HTML5 Video Tag

HTML 5 natively support Video tag , so no more lengthy coding or dependence on .flv format for streaming Video. Now your HTML 5 enable browser supports .ogv, .ogg , .mp4 format.

Browser Compatibility :
IE 9, Firefox, Opera, Chrome, and Safari support the <video> element.Coding Structure

Your browser does not support the video tag.
</video>

Its very simple to implement on your web page.

HTML5 <video> – Methods, Properties, and Events

The table below lists the video methods, properties, and events supported by most browsers:

Methods	Properties	Events
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

To Know more visit W3SCHOOLs

HTML 5 introduction

According to Wikipedia

HTML5 is a markup language for structuring and presenting content for the World Wide Web, and is a core technology of the Internet originally proposed by Opera Software. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and, as of July 2012,
is still under development. Its core aims have been to improve the
language with support for the latest multimedia while keeping it easily
readable by humans and consistently understood by computers and devices .Why HTML5?
It is future’s technology, already adopted by Adobe,Google…. . HTML5 enable to write less for web designers , has built in support for audio, video, Drag-and-drop and others uncountable features. It combines with CSS3 to give a stunning web experience that you can’t imagine.

Coding Structure of HTML 5 :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sanjay' HTML5 World</title>
<meta charset="utf-8" />

</head>

<body>

<h2>Join me on Google+</h2>

</body>

</html>

Do You not think its great for web designers who work harder than a programmer when comes to differentbrowser compatibility.

HTML 5 TEXTAREA TUTORIAL WITH WORKING EXAMPLE

If you want to use unlimited number of characters in your form then <textarea> is going to easy your life. According to w3school The <textarea> tag defines a multi-line text input control and hold unlimited number of characters.A simple example :

How to use in language like PHP?
Its simple just check out the example below…

<?php
$msg=(isset($_POST[‘msg’]))?trim($_POST[‘msg’]):”;if(isset($_POST[‘submit’])){
echo $msg;
}
?>
<form action=”” method=”post”>
Message<br/>
<textarea name=”msg” rows=”14″ cols=”30″ ></textarea>
<br/>
<input type=”submit” name=”submit” value=”Go” />

Whats new in HTML 5
autofocus – Specifies that a text area should automatically get focus when the page
loads.
placeholder-Specifies a short hint that describes the expected value of a text area.
required-Specifies that a text area is required/must be filled out.

If you have any suggestion or something to add please comment so I can implement in my blog.

Web Developer extension and the choice of Best Web Browser

Web Developer extension and the choice of Best Web Browser

Categories

Recent Post

HTML5 Audio Tag

HTML5 Audio Tag

HTML5 Audio Tag Coding Structure

HTML FORM tutorial with CSS based Example

HTML FORM tutorial with CSS based Example

Creating Stunning Pure CSS Navigation Menu with Simple Coding

Creating Stunning Pure CSS Navigation Menu with Simple Coding

HTML5 Video Tag

HTML5 Video Tag

HTML 5 introduction

HTML 5 introduction

HTML 5 TEXTAREA TUTORIAL WITH WORKING EXAMPLE

HTML 5 TEXTAREA TUTORIAL WITH WORKING EXAMPLE

Do you have any Query / Suggestion

© 2023 CODENTRICKS