Enmarcar texto o codigo en Blogger

Escribir un articulo lo mas claro posible puede mejorar la calidad de nuestro trafico, para ello escribo este articulo de como enmarcar texto o codigo en Blogger utilizando la etiqueta "fieldset" .

Empecemos viendo los diferentes formatos y estilos  de "fieldset":
Fieldset básico, este se ensanchará al 100% de la anchura de la página, veamos el código y su ejemplo:

<fieldset>
Aquí el texto que quieres enmarcar
</fieldset>

Ejemplo:
Ejemplo de un fieldset básico

Fieldset básico con estilos, también podemos agregarle color y borde a un fieldset añadiendo la etiqueta style, el borde le podemos poner la anchura en pixeles que veamos conveniente, veamos el código y su ejemplo:
<fieldset style="border: 1px solid #8A0808;">
Aquí el texto que quieres enmarcar
</fieldset>

Ejemplo:
Ejemplo de un fieldset básico con estilo

Fieldset dentro de una tabla, ahora le daremos una anchura predeterminada limitando su expanción, para ello añadiremos el código fieldset dentro de una tabla, le daremos una anchura del 60% y la alinearemos al cetro. Veamos el código y su ejemplo:
<table width="60%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<fieldset>
Aquí el texto que quieres enmarcar
</fieldset>
</td>
</tr>
</table>

Ejemplo:

Ejemplo de un fieldset dentro de una tabla

Fieldset dentro de una tabla con estilos, como vimos en el anterior ejemplo también añadiremos la etiqueta style, para añadirle borde y color, el borde le podemos poner a la anchura de pixeles que veamos conveniente, veamos el código y su ejemplo:
<table width="60%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<fieldset style="border: 1px solid #088A85;">
Aquí el texto que quieres enmarcar
</fieldset>
</td>
</tr>
</table>

Ejemplo:

fieldset dentro de una tabla con estilo

Fieldset y Legend, por último agregaremos la etiqueta "legend"dentro de fieldset para titular un campo, que este incluido dentro de legend. También podemos alinear dicho título donde queramos utilizando el parametro "align" en este ejemplo veremos un fieldset alineado al centro:
<fieldset>
<legend align= "center">legend alineado al centro</legend>
Aquí el texto que quieres enmarcar
</fieldset>

Ejemplo:

legend alineado al centro
fieldset y legend alineado al centro

Para alinearlo a la izquierda cambia donde dice "center" por "left" y para la alinearlo a la derecha cambia "center" por "right". Puedes darle estilo cambiando <fieldset> por <fieldset style="border: 1px solid #8A0808;">.



Asi que a que esperas para mejor tus articulos?

Comentarios

Entradas populares de este blog

5 alternativas open source a Loquendo

Que es microsoft silverlight