HTML5 Tutorial 4 U http://www.html5tutorial4u.com Sun, 05 May 2013 12:59:08 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 How to Submit A Form Using JavaScript http://www.html5tutorial4u.com/blog/how-to-submit-form-using-javascript.htm http://www.html5tutorial4u.com/blog/how-to-submit-form-using-javascript.htm#comments Sun, 05 May 2013 12:38:12 +0000 admin http://www.html5tutorial4u.com/?p=1338 Continue reading →]]> You often face situation where you have to submit a HTML form without using SUBMIT type button. In this type of situation, JavaScript will help you to accomplish the task.

In this article we have discussed about how to submit a HTML form using JavaScript. Below we have provided the simple code for submitting a form using JavaScript. Anybody has the basic knowledge of HTML and JavaScript should easily understand this code.

<!DOCTYPE html>
<html>
<head>
<title>Example of How To Submit A Form Using JavaScript</title>
<script type="text/javascript">
function submit_form()
{
    document.my_form.submit();
}
</script>
</head>
<body>
<form name="my_form" method="post" action="my_page.php">
First Name: <input type="text" name="first_name" size="30"><br><br>
Last Name: <input type="text" name="last_name" size="30">
</form>
<a href="javascript:;" onclick="submit_form()">Click Here to Submit Form</a>
</body>
</html>
 
Previous

How to Submit A Form Using JavaScript

Next
]]> http://www.html5tutorial4u.com/blog/how-to-submit-form-using-javascript.htm/feed 0 Abstract Class and Interface http://www.html5tutorial4u.com/blog/abstract-class-and-interface.htm http://www.html5tutorial4u.com/blog/abstract-class-and-interface.htm#comments Sun, 21 Apr 2013 08:13:39 +0000 admin http://www.html5tutorial4u.com/?p=1253 Continue reading →]]> Abstract class and interface are very well known words for programmers. These two are very important for object oriented programming. Though interface and abstract class have few similarities, but there are some differences as well. In this article we have discussed about important differences between abstract class and interface.

Abstract Class and Interface Difference

Abstract Class
Interface
In abstract class, at least one method must be declared as abstract. Abstract method has only declaration within abstract class and it does not have any implementation.
In interface, all the methods are abstract by default. No variable or concrete method is allowed in interface.
Abstract method must be declared with public, protected and internal access modifiers. In the time of implementation within sub classes, the same or less restricted access modifier must be used.
All methods must have public access modifiers in an interface.
Multiple inheritance is not possible for abstract class, that means a class can inherit only one abstract class.
Multiple inheritance is possible for interface, that means a class can inherit more than one interface at a time.
Abstract class can contain variables and concrete methods.
Variables and concrete methods are not allowed in interface.
 
Previous

Abstract Class and Interface

Next
]]> http://www.html5tutorial4u.com/blog/abstract-class-and-interface.htm/feed 0 Convert Image to Base64 http://www.html5tutorial4u.com/blog/convert-image-to-base64.htm http://www.html5tutorial4u.com/blog/convert-image-to-base64.htm#comments Wed, 17 Apr 2013 17:40:31 +0000 admin http://www.html5tutorial4u.com/?p=1213 Continue reading →]]> Base64 is an encoding method which is used to represent binary data in ASCII format. Conversion of images into base64 string is very useful for such pages where a large number of images are displayed. For example, suppose you are developing a web page which is showing fifty images at a time. For showing those images, fifty HTTP requests need to be sent to the web server and also fifty responses need to be received. Because all the images are physically stored in the web server. It increases the page load time and also affects the SEO performance of that page. Convert image to base64 string is the best solution of the above mentioned situation. The following example shows how to convert an image to base64 string in PHP.

Image to base64 string example:

<?php

   $image_src = "sunrise.jpg"; // image path in the server
   $imagebinary = fread(fopen($image_src, "r"), filesize($image_src));
   $image_str = base64_encode($imagebinary);
   echo '<img src="data:image/jpg;base64,'.$image_str.'" />';

?>
 
Previous

Convert Image to Base64

Next
]]> http://www.html5tutorial4u.com/blog/convert-image-to-base64.htm/feed 0 HTML5 New Input Types http://www.html5tutorial4u.com/html5-input-types.htm http://www.html5tutorial4u.com/html5-input-types.htm#comments Sat, 02 Mar 2013 06:22:17 +0000 admin http://www.html5tutorial4u.com/?p=1051 Continue reading →]]> Input elements are very important for designing form. HTML5 has introduced several new input types. These new types offer input controls and validation in simpler manner.

In this article we have discussed about the following new HTML5 input types:

  • date
  • datetime
  • datetime-local
  • time
  • month
  • week
  • color
  • email
  • url
  • tel
  • number
  • range
  • search

Important point need to be remembered:

All these HTML5 input types are not supported by all web browsers. But hopefully all browsers will support these new input types in near future. Now if you use these input types in your HTML5 document and they are not supported by the web browser, then these are shown as regular text fields.

Input Type – date

HTML5 date type input element allows user to select a date. Presently date type is supported by Google Chrome, Opera and Safari web browsers.

Example:

Birthday: <input type="date" name="dob">

Input Type – datetime

HTML5 datetime type input element allows user to select a date with time (hour and minute). It always shows ‘UTC’ timezone which can’t be modified. Presently datetime type is supported by Opera and Safari web browsers.

Example:

Journey Start Date: <input type="datetime" name="journey_start_date">

Input Type – datetime-local

HTML5 datetime-local type input element allows user to select a date with time (hour and minute) for local timezone. It does not show any timezone. Presently datetime-local type is supported by Opera and Safari web browsers.

Example:

Birthday with Time: <input type="datetime-local" name="dob">

Input Type – time

HTML5 time type input element allows user to select a time (hour and minute). Presently time type is supported by Google Chrome, Opera and Safari web browsers.

Example:

Event Start Time: <input type="time" name="event_start_time">

Input Type – month

HTML5 month type input element allows user to select a month with year. Presently month type is supported by Google Chrome, Opera and Safari web browsers.

Example:

Birthday (month and year): <input type="month" name="dob">

Input Type – week

HTML5 week type input element allows user to select a week with year. Presently week type is supported by Google Chrome, Opera and Safari web browsers.

Example:

Event Week: <input type="week" name="event_week">

Input Type – color

HTML5 color type input element allows user to select a color from predefined color palate. Presently color type is supported by Google Chrome and Opera web browsers.

Example:

Select Color: <input type="color" name="pick_color">

Input Type – email

HTML5 email type input element is used to create input field which specifically takes an email address as value. It also provides default client-side email address validation. Presently email type is supported by latest versions of all web browsers except Safari.

Example:

Email Address: <input type="email" name="user_email">

Input Type – url

HTML5 url type input element is used to create input field which specifically takes a web address or URL as value. It also provides default client-side URL validation. Presently url type is supported by latest versions of all web browsers except Safari.

Example:

Website Address: <input type="url" name="website_address">

Input Type – tel

HTML5 tel type input element is used to create input field which specifically takes a telephone number as value. Unfortunately at present time no web browser supports tel type input element.

Example:

Phone Number: <input type="tel" name="phone_number">

Input Type – number

HTML5 number type input element is used to create input field which takes a numeric value. To enforce restrictions, the following attributes can be used:

  • max – It specifies the maximum value that is allowed
  • min – It specifies the minimum value that is allowed
  • step – It specifies the legal number intervals

Presently number type is supported by latest versions of all web browsers except Firefox.

Example:

Age (from 1 to 18): <input type="number" name="age" min="1" max="18">

Input Type – range

HTML5 range type input element is used to create input field which takes a numeric value from a specified range of numbers. To enforce restrictions, the following attributes can be used:

  • max – It specifies the maximum value that is allowed
  • min – It specifies the minimum value that is allowed
  • step – It specifies the legal number intervals

Presently range type is supported by latest versions of all web browsers except Firefox.

Example:

Marks (0 - 80): <input type="range" name="marks" min="0" max="80">

Input Type – search

HTML5 search type input element is used to create search field. It is quite similar to regular text type input element. Presently search type is supported by Google Chrome and Safari web browsers.

Example:

Search: <input type="search" name="search_field">
Previous

HTML5 Input Types

Next
]]> http://www.html5tutorial4u.com/html5-input-types.htm/feed 3 <wbr> http://www.html5tutorial4u.com/wbr-element.htm http://www.html5tutorial4u.com/wbr-element.htm#comments Sun, 17 Feb 2013 14:35:04 +0000 admin http://www.html5tutorial4u.com/?p=1038 Continue reading →]]> The wbr element (<wbr>) is used to specify a break point in a very long word or string. If a word or a string is too long in a document then sometimes the browser may breaks it at wrong place so it will be very difficult to read or it does not get broken at all which hampers the page layout. To overcome these problems the HTML5 wbr element is ideal.

Important point need to be remembered:

HTML5 wbr tag is supported by latest versions of all web browsers except Internet Explorer.

There is a HTML5 wbr element example given below:

<p>For functioning of AJAX, one of the very important object is XML<wbr>Http<wbr>Request.</p>
Previous

wbr element

Next
]]> http://www.html5tutorial4u.com/wbr-element.htm/feed 1 <hgroup> http://www.html5tutorial4u.com/hgroup-element.htm http://www.html5tutorial4u.com/hgroup-element.htm#comments Thu, 07 Feb 2013 06:37:26 +0000 admin http://localhost/html5tutorial4u/?p=754 Continue reading →]]> The hgroup element (<hgroup>) is used to group heading with associated sub-headings. More specifically it can say that HTML5 hgroup tag is used for grouping <h1> – <h6> tags. It works just like a container of two or more related heading elements.

Important point need to be remembered:

HTML5 hgroup element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support hgroup tag.

There is a HTML5 hgroup element example given below:

<article>
   <hgroup>
      <h1>Title of article goes here</h1>
      <h2>Sub-title of article goes here</h2>
   </hgroup>
   <p>Article content goes here...</p>
</article>
Previous

hgroup element

Next
]]> http://www.html5tutorial4u.com/hgroup-element.htm/feed 0 <mark> http://www.html5tutorial4u.com/mark-element.htm http://www.html5tutorial4u.com/mark-element.htm#comments Sat, 02 Feb 2013 06:40:41 +0000 admin http://localhost/html5tutorial4u/?p=776 Continue reading →]]> The mark element (<mark>) is used to highlight some parts of text of a document to indicate its importance to the users. It also draws extra attention of users to the highlighted text.

Important point need to be remembered:

HTML5 mark element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support mark tag.

There is a HTML5 mark element example given below:

<h1>About <mark>HTML5</mark></h1>
<p><mark>HTML5</mark> is the fifth version of HyperText Markup Language. Many elements like header, footer, audio, video etc. have been introduced in <mark>HTML5</mark>.</p>
Previous

mark element

Next
]]> http://www.html5tutorial4u.com/mark-element.htm/feed 0 301 Redirect http://www.html5tutorial4u.com/blog/301-redirect.htm http://www.html5tutorial4u.com/blog/301-redirect.htm#comments Wed, 30 Jan 2013 07:42:34 +0000 admin http://www.html5tutorial4u.com/?p=929 Continue reading →]]> 301 redirect is a very useful way for web page redirection. It is also very important for search engine optimization (SEO) and today everybody knows that without proper search engine optimization, no website can get good rank in search results. As the 301 redirection is not browser dependent, so it is faster than ‘meta refresh’ method.

301 redirect can be done in several ways. We have tried to discuss all the methods in this article. But htaccess 301 redirect is the most popular method among them. After reading this article, anyone can easily understand how to create 301 redirection in different ways.

301 redirect non-www to www URLs using .htaccess

First create an .htaccess file with the following code and place it in the root directory (generally the root directory is ‘public_html’). This .htaccess file will redirect all incoming requests from ‘domain.com’ to ‘www.domain.com’. This 301 redirection is very important for SEO. Please don’t forget to replace ‘domain.com’ and ‘www.domain.com’ in the code with the corresponding actual domain name value.

Options+FollowSymlinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^domain.com
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]
Note: htaccess 301 redirect method only works on Linux web server having mod-rewrite module enabled.

Redirect old domain to new domain using .htaccess

Create an .htaccess file with the following code and place it in the root directory of the old domain. This .htaccess file will redirect all the web pages from old domain name to new domain name (new website). Please don’t forget to replace ‘www.new-domain.com’ in the code with the actual new domain name value.

Options+FollowSymlinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^old-domain.com$ [OR]
RewriteCond %{HTTP_HOST} ^www.old-domain.com$
RewriteRule (.*)$ http://www.new-domain.com/$1 [R=301,L]
Note: htaccess 301 redirect method only works on Linux platform having mod-rewrite module enabled.

Redirect entire website using .htaccess

Options+FollowSymlinks
RewriteEngine On
Redirect 301 / http://www.new-site.com/
Note: htaccess 301 redirect method only works on Linux web server having mod-rewrite module enabled.

Redirect specific web page using .htaccess

Options+FollowSymlinks
RewriteEngine On
Redirect 301 /old-page.html http://www.yoursite.com/new-page.html
Note: htaccess 301 redirect method only works on Linux platform having mod-rewrite module enabled.
Previous

301 Redirect

Next
]]> http://www.html5tutorial4u.com/blog/301-redirect.htm/feed 0 8 New Free Fonts for Your Designs http://www.html5tutorial4u.com/blog/8-new-free-fonts-for-your-designs.htm http://www.html5tutorial4u.com/blog/8-new-free-fonts-for-your-designs.htm#comments Fri, 11 Jan 2013 17:50:25 +0000 admin http://www.html5tutorial4u.com/?p=784 Continue reading →]]> Fonts are very essential element for designs and every designer knows the importance of fonts for making a good design. So designers always try to increase their font library and especially with new free fonts. Here we have made a collection of few very good free fonts with different style for designers. We hope that these fonts will help you a lot. Best of luck!

Villa Didot

Free Fonts

Manteka

Free Fonts

Free Fonts

Barkentina

Free Fonts

Free Fonts

Metropolis

Free Fonts

Free Fonts

Multicolore

Free Fonts

Free Fonts

Maven Pro

Free Fonts

Jalane Light

Free Fonts

Existence Light

Free Fonts

8 New Free Fonts for Your Design

Next
]]> http://www.html5tutorial4u.com/blog/8-new-free-fonts-for-your-designs.htm/feed 0 <time> http://www.html5tutorial4u.com/time-element.htm http://www.html5tutorial4u.com/time-element.htm#comments Fri, 11 Jan 2013 09:25:13 +0000 admin http://localhost/html5tutorial4u/?p=774 Continue reading →]]> The time tag (<time>) defines extra semantic information like time (24 hour format) or date (with or without time zone offset) in a web page. The time element of HTML5 does not render anything, so it won’t make any difference in the output. But it encodes the date and time in a way that can be read by web browsers and generates smarter search results produced by search engines.

Important point need to be remembered:

HTML5 time element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support time element.

There is a HTML5 time element example given below:

<p>Our shop is opened at <time>10:00</time> every morning.</p>

When <time> tag is used without any attributes then the content enclosed between <time> and </time> must be a valid date or time.

The HTML5 time element has an attribute ‘datetime’. In the following examples I would like to show that how to use ‘datetime’ attribute in the time element.

<time datetime="2012-11-25">25<sup>th</sup> November</time>

<time datetime="18:00">starts at 6pm</time>

<time datetime="2012-11-25T18:00+00:00">6pm on the festival day</time>

When the datetime attribute is used with the HTML5 time element that time the content can be anything.

 
Previous

time element

Next
]]> http://www.html5tutorial4u.com/time-element.htm/feed 2