March 25, 2014

Online HTML, CSS editor and previewer for blog spot and websites

Dear friends,

Today is the day for experimentation for me. I had edited the HTML code editor and previewer for blog-spot blog. You just add HTML codes to the first box and get the preview in the second box. I think this will help you for coding blogger templates, editing and solving errors in blog-spot template issues including parsing errors. So use it and comment below about this tool.

About  HTML


            HTML is defined as Hyper text mark up language. It has become a relatively powerful markup language in the field of development of web sites and templates. HTML combined with JavaScript and CSS is used to create stunning and interactive visuals, Web sites and applications.  In order to be familiar with HTML you need to be aware of what is what an HTML element or tag is and the meaning of an attribute, the general structure of a Web page and the basic syntax of HTML.

HTML5

The new specification  of HTML is HTML5 which is not accepted as a standard specification but it will be in future. The CSS3 combined with HTML5 is aim to remove the need for these additional browser components to facilitate 2D drawing, animations and effects and to reduce the amount of JavaScript required to add features like video playback and drag-and-drop.

The main semantic elements that HTML5 are:

<header> used to define a header for some part of a Web page, specific page, an <article> element, or a <section> element.
<footer> used to define footer for some part of page.
<nav>A container for the primary navigation links on a Web page

The basic HTML5 page structure

The doctype for HTML5 is very simple: <!doctype html> which should be at the top.



<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Demo</title>
<link rel="stylesheet" href="styles.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
There is no need to add xmlns or xml:lang attributes, and the lang attribute alone suffices.The meta charset is shortened by removing http-equiv="Content-Type" content="text/html. Also the <link> element doesn't feature a type attribute.

Just paste the HTML code to box 1 and click preview button. After that edit your TML codes  in the box and again click the preview button to generate preview. You can add CSS codes inside style tags, HTML tags and Javascript codes for previewing. To clear all the data including preview, select clear.

                         BOX 1                                                                             BOX 2

View Video for Help