New Era of Effective Web Designing Technology Using HTML 5

Ashish P. Joshi¹, Chetan  R. Dudhagara², Hasamukh B. Patel² 

¹Computer Science Department, V.P. & R.P.T.P. Science College – Vallabh Vidyanagar, Gujarat,  India.

²Computer Science Department, N. V. Patel College of Pure And Applied Sciences – Vallabh Vidyanagar, Gujarat,  India.

ABSTRACT:

HTML 5 is scripting language which used primarily to designing web page. Earlier HTML 4 was used which is not more comfortable with the graphics, animations, audios, videos, mobile technology, cross browser independency, game development, etc. using in web page. Now a day HTML 5 becomes very popular for its methodology and efficiency in field of designing the web page with remove the above disability. Here, we discuss about the technology which is support by HTML-5 and conclude that how it is better than the previous.

KEYWORDS: HTML5; W3C; XHTML; Flash; DOM

Copy the following to cite this article: Joshi A. P, Dudhagara C. R, Patel H. B. New Era of Effective Web Designing Technology Using HTML 5. Orient.J. Comp. Sci. and Technol;8(2)

Copy the following to cite this URL: Joshi A. P, Dudhagara C. R, Patel H. B. New Era of Effective Web Designing Technology Using HTML 5. Orient. J. Comp. Sci. and Technol;8(2). Available from: http://www.computerscijournal.org/?p=1979

Introcution

Basically the HTML is standard markup language. It was developed for the designing a web page. In January 1997, HTML 3.2 was published as a W3C Recommendation. It was the first version developed and standardized exclusively by the W3C[1]. The HTML 4.0 was release in mid of 1998 and it comes with strict, transitional and frameset. Later on many modifications have been done in the HTML 4.0 and final version release on mid of 2001. The XHTML introduced in January 2000 which was no longer being developed as a separate standard.

Finally, HTML5 was published in 2014 as a W3C Recommendation [1]. Its core objectives have been to improve the language with support for the latest multimedia and making it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.).

HTML5 becomes popular than the not only HTML4, but also XHTML. HTML5 is intended to replace the above both languages and also DOM level 2.

Introduction to HTML 5

HTML 5 is the latest version of the hyper-text markup language used to build and development of websites. There are many features are available in previous versions but also several new features are available. However, some webmasters are skeptical of making the switch to HTML5, fearing it’s not worth their time or effort.

HTML5 provides developers with new, meaningful ways to organize content. Using new tags such as <header>, <footer>, <article> and <section>, pages can be organized more relevantly. It contains many new tags which makes it attractive and interactive.

The advantages of HTML5:

• Embedded with CSS (Cascading Style sheet) and JavaScript.
• Rich Internet Application
• Cross-browser compatibility
• Media playback(Audio/video)
• Mobile Optimization
• Gaming development
• Support Animations

Methodology

The HTML parser browser is used. It control and manage the HTML source code into web pages. The new HTML parser browser is very faster and compatible with HTML5. The new HTML parser browser functionality is as follow:

• Use of SVG and MathML in HTML5 pages without XML
• It improves overall browser responsiveness.
• Parser related bugs are fixed.

Application and Experiment

This experiment shows that how HTML5 can fulfilled the features of Animation software like Photoshop and flash.

Code of HTML5

This code describes HTML5, JavaScript and DOM can be used for do the same work that can be possible through only flash which is use action scripting. The designing of rectangle and circle in the rectangle is done through HTML5 using “Canvas”. This is previously possible through only any graphic software.

Another thing that it displays two buttons “hiden” and “shown” which can hide or show the canvas (it means rectangle and circle within rectangle). When hiden button press, it will hide. It will show when shown button press. This thing is can be possible through flash (“ActtionScripting”) before. But today it is possible through HTML5 also.

<!DOCTYPE HTML>

<html>

<head>

<style>

body

{ margin: 0px;

padding: 0px;   }

</style>

</head>

<body onload=”getTrue()”>

<center>

<canvas id=”myCanvas” width=”1366″ height=”100″></canvas>

</center>

<script>

var canvas = document.getElementById(‘myCanvas’);

var context = canvas.getContext(‘2d’);

var cir_context = canvas.getContext(‘2d’);

function drawRect(myRect, context)

{

context.beginPath();

context.rect(myRect.x, myRect.y, myRect.width, myRect.height);

context.fillStyle = ‘gray’;

context.fill();

context.lineWidth = myRect.borderWidth;

context.strokeStyle = ‘black’;

context.stroke();

context.fillStyle = ‘white’;

context.font = “20pt sans-serif”;

context.fillText(“Canvas Rocks!”, 600, 50);

}

function drawCircle(myCircle, cir_context)

{

cir_context.beginPath();

cir_context.arc(myCircle.x,myCircle.y,20,0,2*Math.PI,false);

cir_context.arc(myCircle.x+400,myCircle.y,20,0,2*Math.PI,false);

cir_context.fillStyle = ‘white’;

cir_context.fill();

cir_context.lineWidth = myCircle.borderWidth;

}

var myRect = {

x: 433,

y: 0,

width: 500,

height: 80,

borderWidth: 5           };

 

var myCircle = {

x: 483,

y: 40,

width: 100,

height: 50,

borderWidth: 0           };

function getFalse()

{

context.clearRect(0, 0, canvas.width, canvas.height);

}

function getTrue()

{

drawRect(myRect,context);

drawCircle(myCircle,cir_context);

}

</script>

<br>

<center>

<input type=”button” name=”hiden” value=”hiden” onclick=”getFalse()”>

<input type=”button” name=”shown” value=”shown” onclick=”getTrue()”>

</center>

</body>

</html>

Result

Figure 1  Click here to View figure

 

In the first example shown button is clicked (shown button activated), so the canvas is displayed. Second example hides the canvas because hide button is clicked (hiden button activated).

Process and Conclusion

It is conclude here that HTML5 is simple compare to the other graphic and animation software as well as interactive. In above practical example it is clearly seen that HTML5 code is comparatively understanding and easy. Here we are giving only one example rather than there is many tags available which makes it interactive and attractive. We have simply tries to encapsulate the HTML5, JavaScript and DOM. We think that it is smooth and easy to implement. We perceive the primary benefit of it over the older one.

References

1. https://en.wikipedia.org/wiki/HTML
2. http://www.html5canvastutorials.com/tutorials/
3. http://www.w3schools.com/
4. http://www.tutorialspoint.com//
5. Web Standards: Mastering HTML5, CSS3, and XML – by Leslie F. Sikos Ph.D.
6. HTML 5 Developer’s CookbookPaperback– by Chuck Hudson
7. Beginning HTML5 and CSS3: The Web Evolved – by Christopher Murphy, Richard Clark, Oli Studholme, Divya Manian.

---

This work is licensed under a Creative Commons Attribution 4.0 International License.