Why do all the HTML errors seem to have some kind of vague number rather than a real definition of what just happened while you were trying to remove a website or upload your email? But numbers are commonplace, and discovering what is wrong with your computer requires digging deeper into our alternatives. Interestingly, many HTML errors such as 0x0 0x0 have the same causes or — at least — the same solutions.

List of common HTML Errors

Error 400

If you see a message like “400: Bad Request” or especially “HTTP 400 Error — Bad Request” you can trust what you see. The request that you requested was incorrect in some way. Typing a URL in your browser is a signal to a computer that you are requesting a page from another computer, or server. If something goes wrong with the URL you entered, it can not load and give you an error.

While typing is certainly a possible 400 error, it is also possible that the page you are trying to access has been deleted, the URL has been copied incorrectly or is missing important items. The website may also have been updated.

Error 401

“401: Unauthorized” means you are not the person the website was hoping to see when you tried to sign in. Mistake 401 is a simple mistake — the visible door has just been slammed into your face for website security. If you did not log in to a website that requires users to enter their username and password, you will see Error 401. If you tried to log in, but the web server did not detect you, you mistyped something or something unusual. twist of fate, you will not be allowed to continue and you will be looking down Error 401 again.

Error 403

Naughty into! If you receive an Error 403 message, it means you have tried to access the part of the website that is completely banned, banned. Who knows what the webmaster is trying to hide behind a brick wall you just hit, but one thing is for sure — you will not proceed with that particular URL. At least not yet.

You could be calling Error 403 rather innocently, of course, but you are typing something wrong with the URL or maybe you are trying to access the website at the wrong time of day. This error does not mean that you have done something wrong … unless you have done something wrong.

Error 404

You may see any number of different error messages 404, but they will all have something in the “Error 404: Page Not Found”. You will see an error message 404 if you are trying to remove a webpage that is not actually on the server.

In general terms, Error 404 is said to be your fault, but in reality not all Error 404 messages appear due to user error. Pages may be inferior to a website or you may be trying to access a page that the website owner has removed or modified, and no one can blame you for that.

Error 408

Error 408 is a frustrating stumbling block especially on the internet. Type the URL or click the link. And wait. And wait. Then the website returns the error rather than the site you are trying to access. This Error 408 — “You Have an End Time.”

If you submit a website request and it does not load fast enough, the server stops. Instead of loading the site in question, it coughs up an error. Sometimes a quick recovery is helpful, but sometimes a strong connection is needed. To refresh your browser, click the round arrow next to the address bar.

Fixing HTML Errors

While there are many numbers caused by various online errors 0x0 0x0 above, many will have similar or similar solutions. If you do not find the website you are trying to access, problem solving involves some form of ground piercing.

Check Internet Connection

Do a quick check that you are getting full internet access by removing the search page and looking for something random. If you get results and you can click on those sites, you can skip the wrong internet out of your list of potential problems. If you do not come across any new websites, you may do well to reset your route and restart your computer to make sure you are fully connected to the Internet.

Look at the obvious flaws

Look at the address you just typed in and look for obvious errors — long URLs are especially difficult to spell correctly. If you miss a single letter or dot, you will not go far. Also note, especially in Error 403 where the password will be encrypted, that you do not have Caps Lock unlocked. Also check that the Number Lock is set to the default setting. If you find a valid error, just fix it and try again. The solution may be quite simple.

Restart your computer

Although it is suspected that the Internet is giving you a problem, not your computer, it does not hurt to restart the computer. When you restart your computer it may update some important software or reset the connection to the router so that your internet can work faster or faster. It’s easy to fix, and it’s worth the few minutes it takes.

Update your browser

If you notice that you have a lot of internet problems and you see a few problems appear, check to make sure your internet browser is up to date. Your browser is probably set to update automatically as new versions become available, but if you stop updating or skip updates, you can get caught by going to Windows Update for Internet Explorer, and by going to the Firefox Toolbar. and Chrome.

Update plug-in

If your browser is completely up-to-date, check to make sure your most used plugins are up to date. Among the standard plug-in for websites are things like ActiveX and Flash. You can see the message on the website to update the plug-in or you can update this yourself by visiting the websites and downloading malicious applications to update or install the plug-ins. Firefox provides a plug-in test page here too for ideas on what might be causing the problem.

The post How to understand and Fix HTML Errors 404 or 401 or 403? appeared first on OneStop Shop.

You must remember in the early age of HTML to draw graphics in a Web page generally we use GIF images or Flash animations. Here the major drawback is image based animations are not at all SEO friendly. Search engine are unknown about the anatomy of the animation. Looking into this the 5th generation of HTML introduced Canvas. Canvas is a rectangular area in a HTML page. Which we can define using two dimensions X & Y. By default a Canvas is not having any border or content. To draw graphics using a Canvas we required the help of Scripting language. By own Canvas is acts like a Container. Look at the below HTML5 Canvas Examples to know how draw shapes over a Canvas.

Canvas vs. SVG: Key Differences

While both Canvas and SVG enable graphics rendering in the browser, they differ in several ways:

Rendering Method: – Canvas is raster-based, meaning it draws pixel-by-pixel. – SVG is vector-based, using mathematical descriptions of shapes.

DOM Interaction: – Canvas does not retain individual objects; once drawn, shapes cannot be modified unless redrawn. – SVG elements are part of the DOM, allowing for direct manipulation via CSS or JavaScript.

Performance: – Canvas performs better for large numbers of objects and complex animations. – SVG is better suited for static or interactive vector graphics that require scalability.

Using a Canvas we can draw graphics like lines, boxes, circles, rectangles, squares, polygons, tingles, texts or even can add images. All the latest browsers (Google Chrome 4.0 or above, IE 9.0 or above, Mozilla Firefox 2.0 or above, Safari 3.1 or above and Opera 9.0 or above) supports Canvas. Canvas is rich for high end graphics. Starting from an animation to develop a game Canvas is awesome. While SVG gives better results for Text rendering Canvas gives better results for Graphics.

The following Syntax we use to define a HTML5 Canvas.

<canvas id="mycanvas" width="300" height="250">
Your browser does not support HTML5 Canvas.
</canvas>

Keep remember while defining a Canvas always assign an ID to your Canvas. ID helps to detect the Canvas during client Scripting. You can dynamically provide width and height to a Canvas but it is advisable to define width and height during you declare a Canvas. Going forward if required you can update this settings.

With the above introduction let us watch some real-time examples about how to draw various shapes on over a Canvas using Scripting language. Here in the below demo I am using the popular client scripting language JavaScript. In a HTML5 Canvas you are free to any scripting language.

Example to draw a Line over Canvas?

Look at the below Code. Here I am drawing a straight line using JavaScript over a Canvas. The logic I implemented here is so simple. Using getElementById I am detecting the Canvas control from my HTML page. Then defining dimensions using getContext() method. Then to define coordinates for the line using moveTo I am setting the line pointer to 0, 0 coordinate. Then for the end points using lineTo() method. Keep remember the lineTo() method is useful to draw lines. At last I am applying stroke to the line using stroke() method.

var d = document.getElementById("demoCanvas");
var dln = d.getContext("2d");
dln.moveTo(0,0);
dln.lineTo(200,100);
dln.stroke();

Example to draw a Rectangle over Canvas?

As we discussed above we can draw graphics on canvas using client scripts (JavaScript or Jquery). In the below example I used JavaScript to draw a rectangle. Here “mycanvas” is the id of HTML5 Canvas control. Using document object model (DOM) getElementById() method I am fetching the canvas control to my JavaScript code. Then using getContext(‘2d’) I am instructing my Canvas to draw 2D Graphs. To create a rectangle I used fillRect() method. Which accepts 4 parameters as x1, y1 & x2, y2 as the rectangle areas. To fill color to my Rectangle I am using fillStyle() method.

var mycanvas = document.getElementById('mycanvas');
var context = mycanvas.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(20, 20, 80, 80);

Example to draw a Circle over Canvas?

Similarly like a line to draw a Circle I am using arc() method. Arc() method accepts 6 parameters as x, y, radius, Starting Angle, Ending Angle & Counter Clockwise or Anti-Clockwise. Look at the example below how I did draw a Circle.

var d = document.getElementById("demoCanvas");
var dln = d.getContext("2d");
dln.beginPath();
dln.arc(95,50,40,0,2*Math.PI);
dln.stroke();

Example to draw a Text over Canvas?

To draw a text over Canvas generally we use FillText() method. FillText() accepts 3 parameters. First is the String which one you want to Draw as graphics. 2nd and 3rd parameters are the starting position of the text using X and Y coordinates. Additionally to define font size or font family we use font() method.
var d = document.getElementById(“demoCanvas”);

var dln = d.getContext("2d");
dln.font = "30px Arial";
dln.fillText("Hello World",10,50);

Example to draw Image over Canvas?

Keep remember you can’t directly insert an image to the Canvas. To display an image over a Canvas you have to Draw that image. To draw an image over a Canvas drawImage() method works. Like fillText() DrawImage() also accepts 3 parameters. First parameter is the image File path. 2nd & 3rd parameters are the starting point defined using X & Y Coordinates.

var d = document.getElementById("demoCanvas");
var dln = d.getContext("2d");
var img = document.getElementById("imgTag”);
dln.drawImage(img,10,10);

Conclusion

HTML5 Canvas is a versatile tool for creating dynamic graphics and animations on the web. Unlike SVG, it operates at the pixel level, making it ideal for performance-intensive applications. By mastering basic drawing techniques and animation principles, developers can build engaging visual experiences for users. Whether for games, data visualization, or interactive art, Canvas provides the flexibility needed to bring creative ideas to life.

The post HTML5 Canvas Examples to draw Circle, Rectangle, Line, Text & Image appeared first on OneStop Shop.

Welcome to the World of Web. HTML Stands as the Skeleton of Web Design. Complete name of HTML is “Hypertext Markup Language”. Compare to a programming language C or C++ markup languages are easy and fun to learn. A programming language comes with Data Types, Loops, Conditional Statements or Object Oriented Programming features. While a markup language only required tags and its attributes to learn. To make your journey easier here we are presenting HTML tutorial for beginners.

The initial version of HTML was introduced on the year of 1993 by W3C (World Wide Web Consortium) & WHATWG (Web Hypertext Application Technology Working Group). HTML is the standard markup language to Create web pages. HTML is also used to Create user interface for Mobile applications. To Getting Started with HTML you required any text editor like Notepad or Notepad++.

Structure of a HTML page

Basic Structure of a HTML page is similar to a Human body. Top of the page comes with head. Then body and the end part is called footer. Look at the example below.

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial for beginners</title>
</head>
<body>
<h2>Add Topic Heading here</h2>
<p>Hello World!</p>
</body>
</html>

Here <!DOCTYPE html> is used to make the browser aware about that this is a HTML5 web page. Inside head tag I added title tag. Title tag is responsible to display which for this page is. Like title tag we can use meta tag under head tag. Meta speaks details of a web page. Generally there are various types of meta tags available in HTML but Commonly we use keywords, description or language meta tags. Body is the part where we do develop user interface. In the above example here inside my body tag I have heading tag and a paragraph tag.

Basic Rules to Develop a HTML page

1. In Client Browser to identify the page that this is a HTML5 document you required to declare <!DOCTYPE html> at the top of the page. This must be your first line while creating a HTML5 web page.

2. Title says about the headline of a story. Always make practice to add title tag in the head section of a HTML5 page. Title tag helps in Search Engine Optimization (SEO).

3. There are various meta tags. Few common used meta tags are Keyword and Description. Before deploy your application to production server make a habit to add keywords & description for page. Keep remember your description must not more than 160 words. Keywords can be comma separated strings. For better performace it is always wise to add not more than 5 to 6 keywords. Provide Character encoding meta tag to your HTML page. Ex. <meta charset=”UTF-8″>.

4. In HTML5 use the power of Semantic Elements. Structure page take less time to debug. Generally a HTML page Comes with 4 to 5 sections like Head, Body or Footer. Learn the adnvaced HTML5 Semantic elements and use them as required.

5. HTML is not a case sensitive language. <STRONG> is similar as <strong>. But it is a good practice to use lower case letters while developing HTML.

6. Never ever miss an end tag in HTML. It breaks hirarchy. There are two ways to end a HTML tag. For an example img tag can be end like “</img>” or “/>”. It is a good practice to choose “/>” in place of “</img”> end tag. But in the matter of a paragraph tag you must require “</p>”.

7. In a tag while defining an attribute always use lower case letters. For an Example replace <div CLASS=”tabview”> with <div class=”tabview”>.

8. While declaring attribute value use double quotes.

9. In production server always avoid in-line CSS. For an example it’s a bad practice to develop <div style=”float:left;” />. In this place you can add a class to the div and take your Styles to that Class.

10. Keep HTML5 document extension to “.html” in place of “.htm”.

11. Use language attribute with your html tag. Ex. <html lang=”en-us”>.

12. For Internet Explorer Compatibility mode use <meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>.

13. While defining attributes to a HTML tag maintain the sequence order like class, id or name, data-*, src, type, href, for, value, title or alt, role & aria-*.

14. During you integrate CSS or JS file to your HTML5 document don’t include type=”text/css” or type=”text/javascript”. Modern browsers are too smart they can detect without the attributes.

Heading Tags (H1, H2, …, H6)

Generally H1 to H6 tag we used to display topic title or sub-titles of a HTML page. To instruct Search engines about your topic, heading tags are very helpful. H1 tag is more important heading tag then H6 tag. Never use heading tag to make texts bold or big.

Paragraph

In HTML <p> tag is used to define a Paragraph. Browser automatically add space to top and bottom of a paragraph. A paragraph starts with <p> and ends with </p>.

Line Break

In HTML to bring a new line we use <br />. While adding a new line tag use <br /> in place of only <br>.

Using CSS with HTML

There are 4 different ways to Apply CSS in a HTML document. These are In-line CSS, Embedded CSS, Linked CSS & Imported CSS.

Example of In-line CSS

<div style="font-size: 14px; color: #FF0000;">This is in Red Color</p>

Example of Embedded CSS

<style type="text/css">
h2 { 
font-size: 14px; 
color: #2d2d00; 
font-weight: 600; 
}
</style>

Example of Linked CSS

<link rel="stylesheet" href="custom/custom.css" type="text/css" media="screen, projection" />

Example of Imported CSS

@import url('/css/color.css');

HTML Text Formatting Tags

<strong> – Use to defines bold or important labels.
<em> – Defines emphasized text.
<i> – Defines italic text.
<sub> – Defines subscripted text.
<sup> – Defines superscripted text.
<ins> – This tag we use to insert text in to a pre-defined paragraph.
<del> – Del is used to delete text from a pre-defiend paragraph.

How to Comment in HTML?

The following Syntax we use to Comment in HTML.
<!– Your Comments goes here –>

HTML Link

In HTML we use anchor tag to place a link. A link helps to redirect user from one page to other HTML page. Syntax to Create a link is as below.

<a href="http://www.example.com" target="_blank" rel="nofollow">Link text goes here</a>

While Creating a link using target=”_blank” we can instruct the browser to open that link in a new window.

HTML Image

While designing a web page image plays great role. In HTML we use <img> tag to place images. Image tag supports all types of images such as jpeg, png or gif. The following syntax we use to add an image using image tag.

<img src="http://example.com/logo.png" alt="Logo" title="Logo" />

In image tag src attribute helps to define the image path. Image path can be absolute or an url too. For better performance in image tag it is a good practice to use alt and title attributes. These attributes give defination to an image.

HTML Table

In a web page generally we use table to display data in a structural way. A table comes with rows and columns. In HTML to create a table we use the following syntax.

<table>
<td>
<tr>First Row of First Column</tr>
<tr>Second Row of First Column</tr>
<tr>Third Row of First Column</tr>
</td>
<td>
<tr>First Row of Second Column </tr>
<tr>Second Row of Second Column </tr>
<tr>Third Row of Second Column</tr>
</td>
</table>

The above table is with 2 columns and 3 rows.

Frequently used of HTML Tags

Compare to older versions of HTML, HTML5 is rich with many new features. To design a web page more better HTML5 is enrich with advanced Structural Elements & Form elements. Some of them are as below.

<header> – While Designing a HTML file header tag helps to define page header in a separate block.

<main> – In a HTML document main is the area in between header & footer. Main tag in HTML5 helps to design better structure of a HTML document.

<footer> – In a web page HTML footer tag helps to define page footer in a separate block.

<nav> – Nav element in HTML5 helps to define navigation links under a single tab.

<progress> – Progress tab act like an indication. If some job running in background using this control we can show how much work is in progress.

<mark> – Mark tag in HTML5 helps to Highlight text easily.

<meter> – Meter tag in HTML5 help to present scalar measurement within a known range.

<dialog> – Using dialog tag we can show popup like window in HTML5. Dialog tag supports Chrome version 37+, Safari 6+ & Opera 24+.

<article> – article tag defines an Article in the document. Using article tag we can categorized content area in a HTML file.

<aside> – aside tag defines content aside from body content.

<bdi> – bdi tag helps to identify text that might be formatted in a different direction from normal text.

<time> – time tag helps to specify date & time part in a HTML file.

<section> – To identify a particular section in a HTML document section tag is useful.

<wbr> – Defines a possible line-break.

<audio> – Using audio tag in HTML5 we can define music.

<video> – Using video tag in HTML5 we can define movie.

<embed> – embed tag act like a plugin. Using embed tag we can integrate external application to HTML5 document.

<source> – source tag helps to declare file path for audio or video elements.

<track> – Defines tracks for video & audio.

<canvas> – Canvas is a new HTML5 element to draw Graphics using Client Script. Read more about HTML5 Canvas.

<svg> – HTML5 Supports SVG. svg tag helps to draw graphics using SVG.

Do you like this Story about HTML Tutorial for beginners? Share us.

The post Online free HTML Tutorial for beginners – Learn Web Design appeared first on OneStop Shop.

Designing a Software is not a Single handed job. Multiple resources required to build an application. Let’s assume in your lab 5 peoples are working with you as a Team. Here if your Coding Standards are different from others then practically it is difficult to understood by an another developer. Unplanned Coding Standards waste quality time of a Developer. How it is if we all will maintain similar Coding Standards? This habit makes our job easier. As you know in Software industry Code is the major asset. It has no depreciation. In each revision it shines better. Developers are responsible to generate Codes. Codes are like the Skeleton of an Application. What we invest while designing a Software the major percentage is to develop Codes only. It’s better if before into development your developer team aware about the value of Codes. Looking into these factors here with we are sharing universal HTML5 Coding Standards for web designers.

1. There are many version of HTML. Using <!doctype html> at the top of a HTML File, Client Browser will understood that the web is designed with HTML5. In a HTML5 document always declare this as the First Line.

2. While Creating a HTML page never miss the title tag. It helps in SEO.

3. Meta information’s are useful for Search Engines to track your HTML page. Make a habit to define minimum 2 meta tags in your HTML page. Those are Keywords and Description. If your HTML page is responsive then additionally define meta viewport tag.

4. Use advanced programmer friendly IDE to develop Codes. For an example you can install “MS Visual Studio”.

5. While generating html in HTML5 use the power of Semantic Elements. For an example if in your HTML5 page there are three sections header, container and footer define them inside Semantic Elements. In a large HTML page Semantic Elements helps to maintain hierarchy.

6. HTML is not case sensitive. If you are using <STRONG> tag in place of <strong> it will not affect anything but refer to early age it’s a good practice to write HTML in lower case letters.

7. Generally in-case of Freshers it was noticed they forgot the end tag. Always make practice if you are defining a tag there must be a end tag. For an example if you are using image tag then there are two ways to close this tag. You can go for </img> or /> at the end. It is a best practice to choose /> in place of img end tag. But in the matter of a paragraph tag you must required </p>.

8. Inside a Tag while defining an attribute use lower case letters. Ex. Replace <div CLASS=”tab”> with <div class=”tab”>.

9. Define an attribute value in side double quotes. For an example while defined the source path (src) of an image tag you required to write like <img src=”/images/temp.jpg”. Do same for multiple attribute values. For an example in a div I am with 2 CSS classes <div class=”menu dashboard”.

10. Make a habit to Comment your Codes professionally. I noticed many developers Comments on Unnecessary places. Comment only if you found the block of Code is difficult to understood by you Colleague.

11. CSS helps to Style HTML. In production avoid in-line CSS. For an example it is a wrong practice to write like <div style=”float:left;” /> replace this with <div class=”leftAlign” />. Here leftAlign the class which contains float:left;.

12. Use lower Case letters while creating a File name. Update the HTML5 page extension to .html in place of .htm.

13. Nested HTML elements should be indented once (two spaces).

14. Use language attribute with your html tag. Ex. <html lang=”en-us”>.

15. For IE Compatibility mode use <meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>.

16. Provide Character encoding meta tag to your HTML page. Ex. <meta charset=”UTF-8″>.

17. While embedding CSS or JS file to your HTML document don’t include type=”text/css” or type=”text/javascript”. Modern browsers are too smart they will take care of script type.

Ex.

<!– Code Embed External CSS –>
<link rel=”stylesheet” href=”code-guide.css”>

<!– In-line CSS –>
<style>/* … */</style>

<!– Code to Embed External JS –>
<script src=”code-guide.js”></script>

18. While defining attributes to a HTML tag maintain the sequence order like class, id or name, data-*, src, type, href, for, value, title or alt, role & aria-*.

19. Whenever it is possible try to reduce superfluous parent elements.

Do you like the above Article related to HTML5 Coding Standards? While Coding HTML Follow this Guidelines.

The post HTML5 Coding Standards and Best Practices for Web Design appeared first on OneStop Shop.

World is running under Client Server architecture. In real-time Customer interacts to Server through Clients. Server stores data. Depending upon the level of authentication and type of request Server provides data to Clients. As a common practice in this response request mechanism generally we use Database to store large amount of data. Which resides in Server. During http requests if the page contains data from the Database then it takes time to load. Which directly affects performance. How it is if we can operate large amount of data in Client machine? I can say definitely it will improve the performance.

IndexedDB is a new feature introduced in the 5th revision of HTML. Using IndexedDB we can store large amount of data to the Client Browser. Compare to a Cookie IndexedDB works faster and stores bigger. IndexedDB stores data in KEY & VALUE pair. The term has derived from Database. That’s why by hearing the term “IndexedDB” many of us guess SQL. No it is not like SQL. IndexedDB doesn’t support any kind of SQL query. IndexedDB runs under Single domain only.

Key Concepts of IndexedDB

1. Databases

IndexedDB operates on a per-origin basis, meaning each website or application has its own database. A single origin can have multiple databases, each identified by a unique name.

2. Object Stores

An object store is the primary storage mechanism in IndexedDB, similar to tables in relational databases. Each object store contains a collection of key-value pairs where the key must be unique.

3. Indexes

Indexes allow for efficient querying of data within an object store. They enable developers to retrieve records based on properties other than the primary key.

4. Transactions

Transactions ensure that database operations are performed reliably. A transaction can include multiple read and write operations, and if any operation fails, the entire transaction is rolled back.

5. Cursors

Cursors provide a way to iterate over records in an object store or index, enabling efficient traversal of large datasets.

Getting Started with HTML5 IndexedDB

To implement IndexedDB in a HTML5 page initially you required to declare the following js scripts.

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
 
if (!window.indexedDB) {
window.alert("Update your browser. Older version is incompatible for IndexedDB.")
}

Prepare Data for IndexedDB

Before we jump to Create a Database first let us keep some data ready. In below I am presenting few records from my “Employee_Details” table. Keep mark the Data Structure I presented below is in JSON form.

const employeeDetails = [
{ emp_id: "01", name: "Raghav Sukla", dob: "01/06/1980", email_id: "raghav@gmail.com" },
{ emp_id: "02", name: "Hariharan Swain", dob: "13/11/1972", email_id: "hariharan@gmail.com" }
{ emp_id: "03", name: "Satyabrata Panda", dob: "22/06/1973", email_id: "satyabrata@gmail.com" }
];

Create an IndexedDB Database

Like we do in SQL or any DBMS here also we required to Create a Database. Look at the below Code here I created a Database. The method I used is “window.indexedDB.open(“<Your Database Name>”). Under Database I handing 3 events onerror for error handling, onsuccess for successful response and onupgradeneeded for adding record during up-gradation.

var mydb;
var request = window.indexedDB.open("demoDb", 1);
/* Handling Error */
request.onerror = function(event) {
console.log("Error Occurred.");
};
/* Executing after Success */
request.onsuccess = function(event) {
mydb = request.result;
console.log("success: "+ mydb);
};
/* While Updating */
request.onupgradeneeded = function(event) {
var mydb = event.target.result;
var objectStore = mydb.createObjectStore("empDetails", {keyPath: "emp_id"});
            
for (var i in employeeDetails) {
objectStore.add(employeeDetails[i]);
}
}

How to Store records to HTML5 IndexedDB?

Without records Database is meaningless. Let’s watch the example below.

function insertRecords() {
var request = mydb.transaction(["empDetails"], "readwrite")
.objectStore("empDetails")
.add({ emp_id: "04", name: "Vratika Viswakarma", dob: "02/08/1982", email_id: "vratika@gmail.com" });
request.onsuccess = function(event) {
alert("Vratika Viswakarma is added to your Database.");
};
request.onerror = function(event) {
alert("Getting Errors.");
}
}

While adding records I am maintaining the same sequence and key value pairs.

Function to Read Data from HTML5 IndexedDB

You must aware of the power of a SQL SELECT Statement. Like the same look at the below code how I am fetching records from IndexedDB. Here I used “emp_id” as the WHERE Condition.

function readRecords() {
var trans = mydb.transaction(["empDetails"]);
var objectStore = trans.objectStore("empDetails");
var request = objectStore.get("04");
/* On Error */        
request.onerror = function(event) {
alert("Unable to Retrieve Data.");
};
/* On Success */            
request.onsuccess = function(event) {
// Here you can Operate request.result Data!
if(request.result) {
alert("Name: " + request.result.name + ", DOB: " + request.result.dob + ", Email: " + request.result.email_id);
}
else {
alert("Vratika Viswakarma couldn't be found in your database!");
}
};
}

In below this an another way to fetch records sequentially. You can say this trick is similar to a SQL Cursor.

function readAllRecords() {
var objectStore = mydb.transaction("empDetails").objectStore("empDetails");
objectStore.openCursor().onsuccess = function(event) {
var indexeddb_cursor = event.target.result;
if (indexeddb_cursor) {
alert("Name for id " + indexeddb_cursor.key + " is " + indexeddb_cursor.value.name + ", DOB: " + indexeddb_cursor.value.dob + ", Email: " + indexeddb_cursor.value.email_id);
indexeddb_cursor.continue();
}
else {
alert("No more entries!");
}
};
}

How to Delete records from HTML5 IndexedDB?

Delete is a very Common Operation of DBMS. In the below example we are passing “emp_id” to Delete a record.

function deleteRecords() {
var request = mydb.transaction(["empDetails"], "readwrite")
.objectStore("empDetails")
.delete("04");
request.onsuccess = function(event) {
alert("Vratika Viswakarma record has been removed from Database.");
};
}

Best Practices

1. Error Handling: Always implement error handling to manage database operation failures gracefully.
2. Transaction Management: Use transactions efficiently to avoid performance bottlenecks.
3. Database Versioning: Handle database upgrades carefully to prevent data loss.
4. Memory Management: Close database connections when not in use to free up resources.

Limitations of IndexedDB

Despite its advantages, IndexedDB has some limitations:

– Complex API: The API is more complex compared to localStorage or sessionStorage.
– Browser Support Variations: While widely supported, some older browsers may have partial or inconsistent implementations.
– No Built-in Synchronization: Unlike server-side databases, IndexedDB does not provide built-in synchronization mechanisms.

Conclusion

HTML5 IndexedDB is a powerful client-side storage solution for web applications requiring large-scale, structured data storage. Its asynchronous nature, transaction support, and indexing capabilities make it ideal for complex applications. While it has a steeper learning curve compared to simpler storage options, mastering IndexedDB enables developers to build more robust and efficient web applications. By following best practices and understanding its core concepts, developers can leverage IndexedDB to enhance user experiences with offline capabilities and fast data access.

The post How to Store, Retrieve & Delete data from HTML5 IndexedDB? appeared first on OneStop Shop.

In the early age of HTML5, application data was stored in cookies & included in every server request. Compare to Cookies with web storage, web applications can store data locally within the user’s browser. HTML5 Local storage is more secured and performance wise rich. Local Storage limit is larger than cookies & information is not passed on to the server, it is per origin, i.e., per domain and per protocol.

Using HTML5 LocalStorage Objects

HTML 5 storage is based on named key-value pairs. The data is stored based on a named key, retrieve using the same key, and the named key will be a string.

HTML provides 2 objects for Web Storage:

1. window.localStorage: stores data without an expiration date. The local storage will be available whenever you would use that page. Local storage will be available in the browser to all windows with the same origin (domain).

Example:

localStorage.setItem ("firstname", "John");
document.getElementById("name").innerHTML = localStorage.getItem("firstname");

2. window.sessionStorage: stores data only for a session (data will be lost when the browser is closed). Multiple windows from the same origin (URL) cannot see others session storage. Using sessionStorage object is same as localStorage object, except that it stores data for only one session.

Example: setItem (key, value) to save database key/value

sessionStorage.setItem("name", "Picasso"); /* Here name is the key, Picasso is value */
var data = sessionStorage.getItem('name');

Using Web SQL Database

The Web SQL Database API is not a part of HTML5, but is a separate specification which has a set of APIs to manipulate client side databases using SQL. It is essentially an embedded SQLite database. You can create a database, tables and run SQL on it.

The Web SQL Database is a relational database system that allows web applications to store structured data using SQL queries. Unlike other client-side storage options like `localStorage` or `IndexedDB`, Web SQL Database supports full SQL syntax, making it a powerful choice for applications requiring complex data operations.

HTML5 Web SQL Database Methods

The HTML5 Web SQL Database offers a robust solution for client-side data storage, leveraging SQL for structured data management. While its future is uncertain due to deprecation, it remains a viable option for certain applications. By mastering `openDatabase`, `transaction`, and `executeSql`, developers can build efficient offline-capable web applications. Understanding its strengths and limitations ensures informed decisions when choosing client-side storage solutions.

There are 3 methods in SQL database which are as follows:

• openDatabase – This method creates a database object either of the existing database or creating a new one. The `openDatabase` method initializes a new database or opens an existing one. It takes four parameters: – Name: The database name. – Version: The database version (used for schema changes). – Description: A brief description of the database. – Size: The estimated database size in bytes. – Creation Callback (optional): A function executed if the database is created.
• transaction – This method helps to control a transaction and performing either commit or rollback as per the requirement. The `transaction` method executes a series of SQL operations within a single transaction, ensuring data integrity. If any operation fails, the entire transaction is rolled back. Parameters: – Transaction Callback: A function containing SQL operations. – Error Callback (optional): Handles transaction errors. – Success Callback (optional): Executes upon successful completion.
• executeSql – This method is used to execute the SQL query. Parameters: – SQL Query: The SQL statement to execute. – Parameters (optional): An array of values for placeholders (`?`). – Success Callback (optional): Handles query results. – Error Callback (optional): Manages query errors.

Opening Database

The openDatabase method creates a database or helps in opening the existing database. To create and open a database we have to do the following:

var dbs = openDatabase('mydbs', '1.0', 'test1db', 2*1024*1024);

The above method has 5 parameters – database name, version number, text description, size of database, creation callback. The creation callback parameter will be called when the database is created.

Executing Queries

To execute a query the database.transaction () function is used. This function needs a single argument which is a function which executes the query as follows:

dbs.transaction (function(tq)) {
tq.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

The above query will create a table called LOGS in ‘mydbs’ database.

INSERT Operation

To create entries into the database table we add SQL queries as below:

var dbs = openDatabase('mydbs', '1.0', 'test1db', 2*1024*1024);
dbs.transaction (function(tq)) {
tq.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tq.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "Camera")');
tq.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "Konica")');
});

READ Operation

To read records from the database we use a callback to capture the results as shown below:

var dbs = openDatabase('mydbs', '1.0', 'test1db', 2*1024*1024);
dbs.transaction(function(tq)) {
tq.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tq.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "Camera")');
tq.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "Konica")');
});

dbs.transaction (function(tq)) {
tq.executeSql('SELECT * FROM LOGS', [ ], function(tq, result) {
var length = result.rows.length, i;
msg = "<p> Found rows: "+ length + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i=0; i<length; i++) {
alert (result.rows.item (i). log);
}
}, null);
});

Web SQL database in HTML5 vs IndexedDB

The Web SQL database is a deprecated specification since November 2010, the browser vendors are not encouraged to support this technology. The replacement is IndexedDB. It is a ‘NoSQL’ database and lets us create an Object Store for a type of data. Each Object Store can have a collection of Indexes that make it efficient to query and iterate across.

Some of the disadvantages of Web SQL are as follows:

• Web SQL is not object-driven.
• SQL language needs to be mastered and JavaScript objects has to be transformed into relational schema.
• Transaction creation is explicit, default is to rollback unless we call commit.

Advantages of IndexedDB over Web SQL:

• Allows fast indexing and searching of objects, so you can manage your data and read/write it fast.
• Indexing of JavaScript objects based on your application needs.
• Granular locking per transaction, which allows us to work inside the event-driven JavaScript module.

Conclusion

As Web SQL is deprecated, the web developers are recommended to stop using this technology in new projects, as the spec will not receive new updates. As a ‘NoSQL’ database, IndexedDB provides us a lot of power as it is different from relational database. Web Storage technique provides rich query abilities and is available both in offline and online mode, and can used to store large amount of data.

The post Using LocalStorage Objects vs Web SQL Database in HTML5 appeared first on OneStop Shop.

How it is for consecutive access of your webpages if the user don’t need to send a request to the server? Here I mean to say “we can keep a local copy in the client machine/browser so for consecutive accesses browser will take the data from the local Copy”. This is what HTML5 Application Cache do in HTML5. Advantages of using Application Cache are Offline Browsing, Speed & Reduced Server Load. Google Chrome 4.0, Internet Explorer 10.0, Mozilla Firefox 3.5, Safari 4.0, Opera 12 & all the above versions Supports HTML5 Application Cache.

What is a Manifest File?

Generally this file comes with the extension “.appcache”. To enable Application Cache for your page you need to declare manifest in html tag.

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Manifest file is simple text file. You can create this using Notepad. It has 3 sections Cache Manifest, Network & Fallback.

demo.appcache

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

Cache Manifest

File listed under this block will immediately cache after they downloaded for the first time. Generally images, Static HTML, Common used JS & CSS files we kept in Cache Manifest. This technique gives offline browsing as well better performance.

Network

File listed under this block will never Cache. For Consecutive requests these file required server connection.

Fallback

Files listed under this block specifies fallback pages if a page is inaccessible.

The post Using HTML5 Application Cache for Offline Storage appeared first on OneStop Shop.

You must remember during the age of HTML4 to implement drag and drop feature generally we do Scripting. This problem is addressed in HTML5. Using HTML5 you don’t need to depend upon Scripts. There are per-defined APIs using which we can easily implement HTML5 Drag and Drop feature. Drag and Drop makes life easier. It saves user Time. Operations like Copy, Reorder & Deletion can be more user friendly using Drag and Drop.

Let’s discuss about the scenario where I have 2 divs. In first div there is an image which I want to drag into the 2nd div. Here my 2nd div acts like a container. Look at the example in below:

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Example of HTML5 Drag n Drop</title>
<style type="text/css">
.container
{
border: 1px solid #aaaaaa;
height: 152px;
padding: 10px;
margin-right: 10px;
width: 150px;
float:left;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}

function dragImage(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function dropImage(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div class="container" ondrop="dropImg(event)" ondragover="allowDrop(event)"></div>
<div class="container">
<img id="dragimg" draggable="true" src="drag-pattern.png" ondragstart="dragImage(event)">
</div>
</body>
</html>

HTML5 Drag and Drop Events

HTML5 Drag and Drop API provides the following events.

dragstart: This event occurs when the user starts dragging the object. Generally we use this event to show errors. I mean if an user dragging object into an area where drop facility is not available using dragstart we can show the error message.

dragenter: Using mouse while you are dragging an object during that time this event occurs.

dragover: This event occurs as the mouse is moved over an element during dragging.

dragleave: This event occurs when the mouse leaves an element during dragging.

drag: This event occurs every time the mouse is moved during the object is being dragged.

drop: This event occurs at the end of the drag operation.

dragend: This event occurs when the user releases the mouse button during dragging.

HTML5 Drag and Drop feature was supported by all the major browsers like Google Chrome 4.0, Mozilla FireFox 3.5, Safari 6.0, Internet Explorer 9.0, Opera 12 & above versions.

The post Example to Implement HTML5 Drag and Drop with list of Events appeared first on OneStop Shop.

You must noticed about the execution of JavaScript in a HTML page. Unless until the execution get finish page act like unresponsive. Some time it also hang your browser where CPU utilization is high. To overtake this problem HTML5 Introduced Web Workers. Using HTML5 web workers we can execute any number of scripts independently in background without affecting the page performance. While a script is executing inside a Web Workers, it cannot access the properties of Document Object Model (DOM). Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions.

Example of Web Workers

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Example of HTML5 Web Worker</title>
</head>
<body>
<div>Count numbers: <output id="showResult"></output></div>
<button onclick="startWebWorker()">Start Web Worker</button>
<button onclick="stopWebWorker()">Stop Web Worker</button>

<p><strong>Note:</strong> IE 9 &amp; pervious versions don't support HTML5 Web Workers.</p>

<script type="text/javascript">
var w;

function startWebWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("web_workers.js");
}
w.onmessage = function(event) {
document.getElementById("showResult").innerHTML = event.data;
};
} else {
document.getElementById("showResult").innerHTML = "Sorry, Please update your Browser...";
}
}

function stopWebWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>

How Web Workers Work?

Using new keyword to initiate a web worker we required the path of a JavaScript file. Which file contains the actual code for operations. In your application if has multiple supporting javascript files, you can import them importScripts() method. Communication between web worker and its parent page is done using the postMessage() method. postMessage() can accept either a JSON object or string as the argument. Message passed by Web Worker is accessible in main page using onmessage event. To stop web worker you can use terminate() method.

How to Create a HTML5 Web Workers File?

Refer to the above example I have the web worker file is web_workers.js. Look at the below example how I created this js file. Normally we use web workers for more CPU intensive tasks not for simple scripts.

var i = 0;
function countDown() {
    i = i + 1;
    postMessage(i);
    setTimeout("countDown()",500);
}
countDown();

Which Browsers does it Supports?

HTML5 Web Workers supported by IE 10, Chrome 4.0, Mozilla Firefox 3.5, Safari 4.0, Opera 11.5 & above versions.

The post Introduction to HTML5 Web Workers with Example appeared first on OneStop Shop.

XML is a lightweight platform independent technology to describe data & HTML is responsible to display data as per the user demand. Let’s take a case where you have your employee’s data in a XML file. During development in a HTML page you want to display details of your employees in html table. Here JavaScript & XMLHttpRequest object comes into picture. Yes using JavaScript we can easily bind data from XML to HTML table.

Look at the below example here I have an xml file “employeeDetails.xml” which contain data related employees. In index.html I want to display these data’s in html table. To do show in index.html I implemented some JavaScript. In side script block first I am creating an object for XMLHttpRequest then using its open method fetching data from the xml file. Then from the response object to get each record I am using getElementsByTagName method. Where tag name is the employeeDetails attribute from XML file. After getting employee details executing a loop to fetch all the records. To create table using document.write method & inside the respective tr & td added XML node values.

xml-to-html-table.htm

<html>
<head>
<style>
table, th, td {
border: thin solid gray;
padding: 5px;
text-align: left;
border-collapse: collapse;
}
</style>
</head>
<body>
<script type="text/javascript">
if (window.XMLHttpRequest)
{
// for IE7+, Firefox, Google Chrome & Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// for IE6, IE5.
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","employeeDetails.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
&nbsp;
document.write("<table><tr><th>Name</th><th>Designation</th><th>Salary</th></tr>");
var records=xmlDoc.getElementsByTagName("employee");
for (i=0;i<records.length;i++)
{
document.write("<tr><td>");
document.write(records[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(records[i].getElementsByTagName("Designation")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(records[i].getElementsByTagName("Salary")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
&nbsp;
</body>
</html>
&nbsp;

employeeDetails.xml

<?xml version="1.0" encoding="UTF-8"?>
<company>
<employee>
<Name>Biswabhusan Panda</Name>
<Age>32</Age>
<Designation>Sr. Process Lead</Designation>
<Salary>56000</Salary>
</ employee>
< employee>
<Name>Shilpa Ghose</Name>
<Age>23</Age>
<Designation>HRM</Designation>
<Salary>26000</Salary>
</ employee>
< employee>
<Name>Jaya Mishra</Name>
<Age>35</Age>
<Designation>Sr. Technical Lead</Designation>
<Salary>76000</Salary>
</ employee>
</ company >

The post Using XMLHttpRequest How to Bind Data from XML to HTML Table? appeared first on OneStop Shop.

As we know HTML5 is rich with media elements. Using HTML5 media elements we can easily embed any Audio or Video to our web pages. HTML5 supports 2 kind of video and audio formats .ogg and .mpeg. If your video is in other formats you can use any online or offline tools to convert your video. In this example here I created a Video Player using HTML5 Video element. To operate the video in this player I did implemented play, forward, rewind and pause buttons functionalities using JavaScript functions. Logic I implemented is very simple. In HTML body I have a video element with source video file (laugh-vid.mp4) path. Including this 4 buttons are there Reload, Rewind, Play & Forward. On click of these buttons I am calling the respective js functions.

Play button behaves dynamically. Once you click on this video it starts playing. While running video the same button works like a pause button. You can stop you video in-between using pause functionality. Reload button is responsible to start video from beginning. About rewind & forward buttons I have a function forwardRewind(), it accepts param as parameter. In case user click on rewind button I am passing -7 to back the track. Similarly for forward button I am passing +7. You can change this value depending your video length. To play the video here in JS function I am using .play method.

HTML5 Video Player Demo App

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 video player with play, forward, rewind & pause buttons</title>
<!--Embed the below JS Script here-->
</head>
<body>
<video id="videoPlayer">
<source src="laugh-vid.mp4" type="video/mp4" />
</video>
<!--Buttons for Video Player-->
<div id="playerButtons">
<button id="btnReload" onclick="reloadVideo();">[]</button>
<button id="btnRewind" onclick="forwardRewind(-7)"><<</button>
<button id="btnPlay" onclick="play()">></button>
<button id="btnForward" onclick="forwardRewind(7)">>></button>
</div>
</body>
</html>

JS Functions for HTML5 Video Player

The major advantages of using HTML5 Video element is it is browser friendly and can be operate using the popular Client-side script Javascript. As we discussed above here for 4 buttons I am using few JS functions. Sharing the code below. While placing the above Code inside your HTML file use script tag.

/*Function for Play & Pause Buttons*/
function play() {
var videoPlayer = document.getElementById("videoPlayer");
var btnPlay = document.getElementById("btnPlay");
if (videoPlayer.paused) {
videoPlayer.play();
btnPlay.textContent = "||";
} else {
videoPlayer.pause();
btnPlay.textContent = ">";
}
}
/*Function to Reload video from Beginning*/
function reloadVideo() {
var videoPlayer = document.getElementById("videoPlayer");
videoPlayer.currentTime = 0;
}
/*Function to Forward & Rewind*/
function forwardRewind(param) {
var videoPlayer = document.getElementById("videoPlayer");
videoPlayer.currentTime += param;
}

HTML5 Video tag Attributes

autoplay: This is a boolean attribute. Using this you can play your video after the page loaded successfully. User don’t need to click on play button.

autobuffer: Using this attribute video will automatically begin buffering even if it’s not set to automatically play.

controls: Using controls attribute user can control video settings like playback, including decreasing or increasing volume, seeking, and pause or resume playback. If you don’t specify the controls attribute, the video won’t include the browser’s default controls.

height: This attribute helps to Set height of the video area using CSS pixels.

width: This attribute helps to Set width of the video area using CSS pixels.

loop: If you want your video need to play n number of times until or unless user toggle an event. You can set loop to “true”.

src: src stands for source. Here you need to place your video or audio link. In the place of URL you can use your local drive path or a link.

poster: Until your video start playing this attribute helps to show a static image in the player.

Using HTML5 video element you can use your youtube videos. Just place the link as a value to src attribute. As a technical tips for any resolution you are going to place your video player keep width 100%. Height varies from place to place.

Future of HTML5 Video Players

HTML5 video players have revolutionized the way we consume digital media, offering seamless playback across devices without requiring third-party plugins. As web technologies continue to advance, new features and APIs are shaping the future of video playback, making it more interactive, efficient, and user-friendly. Key innovations such as Picture-in-Picture (PiP) mode, the Media Session API, and WebCodecs are driving this evolution, ensuring that HTML5 video players remain at the forefront of online media delivery.

Picture-in-Picture (PiP) Mode

Picture-in-Picture (PiP) is a feature that allows users to watch a video in a small floating window while interacting with other applications or browsing the web. Initially popularized by desktop applications, PiP has now become a standard feature in modern browsers, enhancing multitasking capabilities.

Media Session API

The Media Session API allows web applications to provide a consistent media playback experience by integrating with the operating system’s media controls. This API enables metadata display (e.g., title, artist, album art) and playback controls (play, pause, seek) in system-level media interfaces, such as notification panels and lock screens.

WebCodecs

WebCodecs is a low-level API that provides direct access to media encoding and decoding capabilities, bypassing the need for high-level abstractions.

These innovations ensure HTML5 remains the dominant solution for web-based video playback.

Conclusion

The HTML5 video player has become the cornerstone of modern web media, offering a seamless, secure, and versatile way to deliver video content. Its native integration, customization options, and broad compatibility make it the preferred choice for developers and content creators. As web technologies advance, HTML5 video players will continue to set the standard for online video experiences.

The post HTML5 Video Player with Play, Forward, Rewind & Pause buttons appeared first on OneStop Shop.

To improve performance of a web application we need to reduce server & client communication as much as we can. This technique helps to improve performance of a web application. Always it’s wise for a programmer to store static data in client browser. Except for the first time but every time while user will request the same page from the serve we need to check whether the similar data exists in the client memory or not. If the similar data exist in the client memory we need to load this data to reduce server & client communication. In this way to achieve this we need to store our static data in the client browser memory. To make this process easier HTML5 introduced Local Storage. Which stores data in client browser for the unlimited time we want. Compare to session storage html5 local storage stored data after user interaction. I can say html5 local storage is like a offline data store.

During web application development we do integrate many images to our application to make our application more user attractive. Here images are static data. If the user is requesting the similar page 10 times from his/her browser we need to avoid server interaction for nine times rather then for the first one. So in this session let us know how to save image in html5 local storage.

In the below example I am storing an image to HTML5 local storage. In HTML body here I have 2 images imageToLoadInLocalStorage & imageToShowFromLocalStorage. The first image has a src attribute which loads a png image (global-img.png) from server. Second image is having blank src attribute. Using client script here I am storing the first image to local storage & fetching the similar image from local storage to my second image. The mechanism I used here is I am fetching the first image using DOM object method getElementById. Converting the image to Base 64 data url format & storing it to local storage using localStorage.setItem() method. Then fetching the image from local storage using localStorage.getItem() method & assign the image to my second image control.

To run the below example copy the codes into a notepad file. Save it as HTML. Then open the file using any browser which supports HTML5 storage. Before run the below app make sure you are with internet connectivity.

Example to save image using HTML5 Local Storage

<title>Demo app to save image using HTML5 Local Storage</title>
<!--CDN link of Jquery-->
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript"><br />
/* Function to Convert image into Base64 */<br />
function ConvertImageToBase64(imageToConvertBase64) {<br />
/* Creating a Canvas in HTML5 */<br />
var drawCanvas = document.createElement("canvas");<br />
/* Setting the Canvas width & height as refer to the Image */<br />
drawCanvas.width = imageToConvertBase64.width;<br />
drawCanvas.height = imageToConvertBase64.height;<br />
/* Copy the image to Canvas */<br />
var copyImageToCanvas = drawCanvas.getContext("2d");<br />
copyImageToCanvas.drawImage(imageToConvertBase64, 0, 0);<br />
/* Converting Image to Data URL */<br />
var dataUrlOfImage = drawCanvas.toDataURL("image/png");<br />
/* Returning Data URL of the Image */<br />
return dataUrlOfImage.replace(/^data:image\/(png|jpg);base64,/, "");<br />
}</p>
<p>$(document).ready(function() {<br />
/* Fetching the image using JavaScript getElementById */<br />
var imageToLoadInLocalStorage = document.getElementById('imageToLoadInLocalStorage');<br />
/* Calling the function ConvertImageToBase64 to convert the Image to Base 64 */<br />
var imageDataUrl = ConvertImageToBase64(imageToLoadInLocalStorage);<br />
/* Storing the image in Local Storage using setItem() method */<br />
localStorage.setItem("imageData", imageDataUrl);</p>
<p>/* Using getItem() fetching the image from Local Storage */<br />
var dataImageUrl = localStorage.getItem('imageData');<br />
/* Using getElementById to detect the image control for loading local storage image */<br />
var imageToShow = document.getElementById('imageToShowFromLocalStorage');<br />
/* Assigning source to a blank image with id imageToShowFromLocalStorage */<br />
imageToShow.src = "data:image/png;base64," + dataImageUrl;<br />
});<br />
</script>

<!--Image with Source-->
<img src="global-img.png" id="imageToLoadInLocalStorage" />
<!--Image with no Source to grab from Local Storage-->
<img src="" id="imageToShowFromLocalStorage" />

The post How to Save image Offline using HTML5 Local Storage? appeared first on OneStop Shop.

HTML5 is the 5th Revision of Hypertext Markup Language. By simply adding to our HTML file we can instruct the browser that this file is a HTML5 Document. Compare to older versions of HTML, HTML5 is rich with many new features. To design a web page more better HTML5 provides advanced Structural Elements. In form level HTML5 introduced 3 additional controls. HTML5 introduced several input types. In matter of Graphics & Media elements HTML5 is ultimate. To draw graphics HTML5 comes with Canvas & SVG. There are various media elements introduced in HTML5 to make Audio & Video integration easier.

Types and List of HTML5 new Tags

In below let us share the List of HTML5 new Tags.

Structural Tags in HTML5

header – While Designing a HTML file header tag helps to define page header in a separate block. Codes related to header pan you can keep inside this tag. Using structural tag is a best practice of HTML5 programmer.

main – In a HTML document main is the area in between header & footer. Main tag in HTML5 helps to design better structure of a HTML document.

footer – In a web page HTML footer tag helps to define page footer in a separate block. Codes for site footer panel you can keep inside footer tag. This programming practice makes debugging easier.

nav – Nav element in HTML5 helps to define navigation links under a single tab. This tag generally we use to create navigation menus in our apps. Using CSS we can optimize nav menus as per the need.

<nav>
  <a href="/photoshop/">Adobe Photoshop</a> |
  <a href="/ajax/">AJAX</a> |
  <a href="/ds/">Data Structure</a> |
  <a href="/python/">Python</a> | 
  <a href="/digitalmarketing/">Digital Marketing</a>
</nav>

progress – Progress tab act like an indication. If some job running in background using this control we can show how much work is in progress. It appears in percentage to end-user.

mark – Mark tag in HTML5 helps to Highlight text easily.

meter – Meter tag in HTML5 help to present scalar measurement within a known range.

<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="2" min="0" max="10">2/10</meter>

dialog – Using dialog tag we can show popup like window in HTML5. Dialog tag supports Chrome version 37+, Safari 6+ & Opera 24+. Using open property of dialog tag you can show the dialog after page load.

<dialog open>This is an open dialog window</dialog>

article – article tag defines an Article in the document. Using article tag we can categorized content area in a HTML file.

<article>
<h2>Digital Marketing</h2>
<p>Digital Marketing comes with SEM, SMM, Blog Commenting, Forum Posting and Link building.</p>
</article>

aside – aside tag defines content aside from body content. Normally we use this tag to place images or videos aside to text.

bdi – bdi tag helps to identify text that might be formatted in a different direction from normal text.

time – time tag helps to specify date & time part in a HTML file.

<time datetime="2009-01-01 20:00">New Year</time>

section – To identify a particular section in a HTML document section tag is useful.

wbr – Defines a possible line-break.

New Form Tags in HTML5

datalist – datalist tag helps to declare pre-defined options for HTML Input Control. Using this control you can make your textbox like auto-search option of google.

The `datalist` tag is a powerful yet simple feature that can significantly improve the usability of input forms on your website. By providing a predefined list of options, users can enjoy a more interactive and efficient input experience, akin to the smart search capabilities of major search engines. Whether you’re developing a small personal project or a large-scale web application, incorporating the `datalist` tag can enhance user satisfaction and streamline form interaction, ultimately leading to a more successful web presence. Embrace this HTML feature and take your forms to the next level!

Example shown below.

<input list="EmployeesName">
<datalist id="EmployeesName">
<option value="Biswabhusan Panda"></option>
<option value="Raghav Mishra"></option>
<option value="Rupak Srivastab"></option>
<option value="Binay Kumar Panda"></option>
<option value="Sonam Sinha">
<option value="Rani Mukharjee">
<option value="Muhmmad Abid">
<option value="Swapna Roy">
<option value="Megha Badajena">
</option></datalist>

keygen – Keygen helps to generate strong Secured key in HTML5. Look at the example below how to use Keygen as a form element in HTML5.

<form action="example_keygen.asp" method="get">
Employee Name: <input type="text" name="empName">
Encryption: <keygen name="passcode">
<input type="submit">
</form>

output – output form element helps to render dynamic result in real-time operation. Example shown below.

<form oninput="outputval.value=parseInt(txtrangle.value)+parseInt(txtnumber.value)">0
<input type="range" id="txtrangle" value="70">100 + <input type="number" id="txtnumber" value="50">= <output name="outputval" for="txtrangle txtnumber"></output>
</form>

New Input Type Tags in HTML5

The new input type tags in HTML5 represent a significant step forward in web development. By catering specifically to the needs of user input for various data types, these tags not only streamline the data entry process but also enhance the overall user experience. With HTML5, developers can create forms that are not only functional but also user-friendly, ensuring that websites are both accessible and efficient.

As web standards continue to evolve, embracing these input types will be essential for anyone looking to build modern, responsive web applications that meet user needs effectively. The versatility and convenience provided by HTML5’s new input types undoubtedly set a new benchmark for form design and data collection in the digital landscape.

Looking into the demand HTML5 comes with many new elements. From a telephone number to date and time all can be handeled using various types of HTML5 input tags. Some of them are preseting below.

<input type="color" id="txtColor">
<input type="date" id="txtDated">
<input type="range" id="txtRange">
<input type="search" id="txtSearch">
<input type="tel" id="txtTelephone">
<input type="datetime" id="txtDatetime">
<input type="datetime-local" id="txtLocal">
<input type="email" id="txtEmail">
<input type="time" id="txtTime">
<input type="url" id="txtUrl">
<input type="week" id="txtWeek">
<input type="month" id="txtMonth">
<input type="number" id="txtNumber">

HTML5 Graphics Elements

canvas – Canvas is a new HTML5 element to draw Graphics using Client Script. Read more about HTML5 Canvas.

Unlike traditional image formats that are static, the canvas element allows for dynamic rendering of graphics. Developers can manipulate the canvas in real-time, enabling the creation of animated graphics, interactive data visualizations, and engaging games. This dynamic capability is crucial for building applications that require constant updates based on user interactions or data changes.

The canvas API provides a comprehensive suite of functions that enable developers to draw shapes, manipulate colors, and even apply complex transformations. From lines and curves to gradients and patterns, the API is equipped with capabilities that help create intricate designs. Developers can also easily manage images and raster graphics, facilitating extensive visual customization.

<canvas id="demoCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
let canvas = document.getElementById("demoCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF6600";
ctx.fillRect(0, 0, 80, 80);
</script>

svg – HTML5 Supports SVG. svg tag helps to draw graphics using SVG.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Media Elements

audio – Using audio tag in HTML5 we can define music. HTML5 Audio tag supports ogg, mpeg audio formats. There are many option using which you can control your audio.

<audio src="jharaphula.wav" controls autoplay>
   Your browser does not support the HTML5 <audio> element.   
</audio>

video – Using video tag in HTML5 we can define movie. HTML5 Video tag supports ogg, mpeg video formats. Starting from play to rewind or forward you have several properties with HTML5 video tag, using which you can implement a video player if needed.

<video src = "jharaphula.mp4"  width="340" height="220" controls>
   Your browser does not support the HTML5 <video> element.   
</video>

embed – embed tag act like a plugin. Using embed tag we can integrate external application to HTML5 document. embed tag help to integrate youtube videos to our webpages.

source – source tag helps to declare file path for audio or video elements.

track – Defines tracks for video & audio.

drawing graphics on the web

When it comes to drawing graphics on the web, HTML5 provides two powerful tools: the Canvas API and Scalable Vector Graphics (SVG). Each of these has its own unique strengths, making them suitable for different types of graphic-rendering tasks.

The **Canvas API** is a raster-based approach that allows developers to create dynamic, pixel-based graphics. It provides a flexible and intuitive way to draw shapes, lines, images, and animations directly onto a web page. With JavaScript, developers can write code to manipulate these graphics in real-time, enabling them to create interactive visualizations, games, and captivating user interfaces. The Canvas element is especially powerful for applications that require frequent updates, such as gaming or real-time data visualization.

On the other hand, **SVG** caters to vector-based graphics, which are resolution-independent and easily scalable. SVG graphics are defined using XML, allowing developers to create intricate designs that maintain quality regardless of size. This is particularly beneficial for responsive web design since SVG images can adapt seamlessly to different screen sizes.

Conclusion

In conclusion, HTML5 represents a significant evolution in web technology. Its introduction of new structural elements, advanced form controls, and robust media capabilities empowers developers to create more engaging and interactive web applications. As the web continues to evolve, embracing the features of HTML5 will be crucial for creating the next generation of websites that are not only functional but also user-friendly.

The post List of HTML5 new Tags introduced in 5th revision of HTML appeared first on OneStop Shop.

In HTML5 Canvas is a newly introduced tag which consists of width & height attributes. It is specially designed to handle Graphics in HTML5. Canvas is a two-dimensional grid. We can draw graphs, animations, games & many other graphical shapes using JavaScript (Or any Client Side Scripts) on a Canvas. Canvas is the next generation of SVG. SVG supports vector based graphics where Canvas supports raster based graphics. SVG supports event handler while Canvas doesn’t supports event handling. Compare to SVG Canvas is less text rendering capability. Canvas renders pixel by pixel. Once we a draw a graphics in Canvas browser forget this. If we want to change or update some thing to the existing graphics on the canvas we need to re-draw the graphics once again.

How to declare a Canvas in HTML5?

Assume in your HTML page you want to draw a graph for area 300 x 250. In this case you can declare a canvas in HTML body part with width 300px & height 250px. Look at the sample below how to declare canvas element in a html document. Always practice to write “Your browser does not support HTML5 Canvas.” in between the canvas tag. This message will show if your browser not supports canvas.

<canvas id="mycanvas" width="300" height="250">
Your browser does not support HTML5 Canvas.
</canvas>

How to Draw a rectangle?

As we discussed above we can draw graphics on canvas using client scripts (JavaScript or Jquery). In the below example I used JavaScript to draw a rectangle. Here “mycanvas” is the id of HTML5 Canvas control. Using document object model (DOM) getElementById() method I am fetching the canvas control to my JavaScript code. Then using getContext(‘2d’) I am instructing my Canvas to draw 2D Graphs. To create a rectangle I used fillRect() method. Which accepts 4 parameters as x1, y1 & x2, y2 as the rectangle areas. To fill color to my Rectangle I am using fillStyle() method.

var mycanvas = document.getElementById('mycanvas');
var context = mycanvas.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(20, 20, 80, 80);

While drawing graphics on a html page if required you can have multiple <canvas> elements in a single HTML5 page. Using different ids you can render each individual canvas from Client Scripts.

How to Draw a line?

In the below example I am drawing a line from the point 0, 0 to 200, 100. The method I used to draw the line is lineTo(x, y). Like the above here c is a JavaScript variable which holds the Canvas. Using getContext(‘2d’) I am instructing the canvas to draw 2d graphs. Here line is a 2d graph. To draw the line initially I set my starting point using moveTo() method. Then applying lineTo() method. This mean from 0,0 to 200, 100 line will draw.

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

How to Draw a Circle?

To draw a circle using HTML5 Canvas element look at the below example. Here I used Arc() method to draw a circle. HTML5 Canvas Arc() method accepts 6 parameters. Initial 2 parameters are for x & y axis. Third parameter is the radius of Arc. From the below code 0 & 2*Math.PI are the starting & ending angles. Last parameter of a Arc() method is a optional parameter. This param says is the Arc is clockwise or anti-clock wise. This parameter accepts Boolean values.

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2*Math.PI, true);
ctx.stroke();

How to print text using HTML5 Canvas?

To draw a text or label using HTML5 Canvas here I used fillText() method. Using font we can set style for our text. In the below example I declared font as “20px Arial”. It means while rendering font-size will show 20px & the font-family is Arial. FillText() method accepts 3 parameters. First one is the text string, I mean which text you want to display on your canvas. Then the 2nd & 3rd parameters says the position of text on Canvas.

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Arial";
ctx.fillText("Your Name",20,90);

The post How to drawimage on HTML5 Canvas using Scripting? appeared first on OneStop Shop.