HTML Editor By TechnoClouds

HTML is a language for describing Web pages.It stands for Hyper Text Markup Language.HTML documents are also called Web Pages.The biggest problem faced by majority of newbie bloggers and web developers  is editing their templates. And the reason for this is lack of awareness with browser languages like CSS, XML, HTML, JavaScript etc.Well fortunately after some trial and error we could successfully create a online HTML editor tool entitled as “TechnoClouds HTML Editor” This is the first time all bloggers are having a chance to have fun playing with important codes like CSS, HTML and JavaScript and learn important coding in a more interesting way! Now you can actually test a code before adding them to blogger.

Link to HTML editor: http://technocloudslab.blogspot.in/



Instructions For Using "TechnoClouds HTML Editor" 

This tool consists of two panes i.e left pane and right pane. See a screen shot below,

The left pane is the area where you add your code and the right pane is the area responsible for displaying a visual view of the code. The CSS code is added just between <style> and </style>  and the HTML code is added just below </style>

Playing With a Code:

Lets now play with a code using our HTML Editor. I am using the Image Opacity Effect Trick here as an example.

The CSS code for Opacity Effect looks like this,

img { 

filter:alpha(opacity=100); 

-moz-opacity: 1.0; 

opacity: 1.0; 

border:0; 

} 

img:hover { 

filter:alpha(opacity=30); 

-moz-opacity: 0.30; 

opacity: 0.30; 

border:0; 

}

Now to apply this effect to an image we will need an HTML code as shared below,

<img  class="Fadein"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrHySyVX1sYre08H771gOooD7a4SmAQ2U8qvcb84Su2-vjO70ZdJ3CINYVdeUY2OEbcpWvP54hqJ6Qiu1CNlFm8QDWCXIq_2DcPbkqY7EfjG8Rd-pvKm8c9qUtWMXu1RPdDN5VF5VEpCoM/s400/DIGG.png">

Now The best part, add the CSS code just between <style> and </style> and the HTML code just below </style>. Hit the Preview button and watch the dancing code in action in front of your eyes. You can now start the play!


See this screen shot,

Some Important Tips:-

• To go backward to previous changes, click Ctrl + Z
• To go forward to last changes made, click Ctrl + Y
• Once you are happy with the code that you prepared then simply paste the CSS code just above ]]></b:skin> inside your blogger template and the HTML code where you want the effect to be seen i.e post or sidebar

Hope this Tool will be of great use to bloggers and web developers across the globe. I hope you may find it easy to better understand and learn browser languages and implement them to invent new codes with new creativities. Do let me know how useful you find it. We played our part and now its your turn to spread the message!