Editor de HTML online

Seguramente te ha pasado que ves un gadget y lo quieres para tu blog, pero no sabes cómo se verá el gadget o si realmente funciona. Lo mismo cuando queremos probar nuevos códigos, dar formato a un texto, crear tablas, etc. suele ser cansado tener que entrar al blog, hacer pruebas, guardar, ver el blog cómo quedó, regresar a editar, volver a probar... en fin, es un procedimiento que puede ser muy agotador.

Para estos casos es muy útil usar un editor de HTML online que nos muestre cómo se ven las cosas que queremos hacer en tiempo real.

¿Para que sirve? Para escribir los códigos HTML que queremos usar y obtener la muestra inmediata del código en cuestión, así no tenemos que estar entrando al blog cientos de veces para probar algún código, simplemente lo escribirmos en el editor online y veremos los resultados inmediatos de lo que estamos haciendo.

Para hacer la prueba de ver cómo funciona entra a Real-time HTML Editor y en la parte de arriba borra las letras que hay y en su lugar pega el siguiente código:

<style type="text/css">
body {margin:0; padding:0;
font-family:Verdana, Arial, sans-serif;
font-size:small;}
#header {
padding:20px;
background:#333;
border-bottom:1px solid #fff;}
#header h1 {
padding:0; margin:0;
color:#ccc;
font-family:Verdana, serif;
font-weight:bold;
font-size:190%;}
#nav {
float:left;
width:100%;
margin:0; padding:0;
list-style:none;
background:#ccc;
border-bottom:1px solid #999;}
#nav li {
float:left; margin:0; padding:0;}
#nav a {
float:left;
display:block;
padding:6px 30px 6px 5px;
text-decoration:none;
font-weight:bold;
font-size:90%;
color:#666;
background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMC9t1JJ9VQh9PcT3NxL76FNAq90Rl3dAAYL-O7whUSiDdLgLO-Hc9aoOQGZaEt5qd8SOQfcZ-W7pr4AsfE1hYFRPz4C8DD4EzL8Woczvy7Yf-REthjPdh_rFhaABaZFbEKn7OrD_RtNs/s400/nav_slant.gif)no-repeat top right;
}
#nav #nav-1 a {padding-left:20px;}
#nav a:hover {color:#000;}
</style>

<div id="header">
<h1>Ciudad Blogger</h1>
</div>
<ul id="nav">
<li id="nav-1"><a href="#">Inicio</a></li>
<li id="nav-2"><a href="#">Directorio</a></li>
<li id="nav-3"><a href="#">Contacto</a></li>
<li id="nav-4"><a href="#">Acerca de</a></li>
</ul>

¿Lo ves? No tuviste que entrar a Blogger para probar cómo se ve el menú, con lo cual ya te ahorraste bastante tiempo.

Lo mismo puedes hacer con cualquier otro código que quieras probar como una imagen, una tabla, o hasta el diseño de una página web completa.

Enlace | Real-time HTML Editor

Imprimir artículo