Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

La bandera Nacional Mexicana en HTML

Muy sencillo de realizar el siguiente truco y se lleva acabo por medio de una tabla:

Ejemplo:






<table border="2" width="350" height="200"><tr height="80">
<td width="200"  bgcolor="#009900">&nbsp;</td>
<td bgcolor="#FFFFFF"><img src="Url-de-tu-imagen" /></td>
<td width="200"  bgcolor="#FF0000">&nbsp;</td>
</table>

Observaste bien, es una imagen el escudo.
Solo cambia el valor 400 de la url de la imagen por 98:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Ef7uM6PV7q5yBg5Nczq6Rh3Id61url8idVKAVF-QvG6LBrL8gq6iSokyIGsdwMG-XGYjP7xfRGVouLRTGw0OGwFOus4zjC02Pb_-ahJJr1woo9IHEKOKNbNUlVVc1ovQ9k4bAni6smYM/98/579px-Coat_of_arms_of_Mexico_svg.png

Como vez los experimentos del HTML, sencillos o no!

p1

Una Imagen

Como todos sabemos que para incluir una imagen se utiliza la etiqueta <img>.

Ejemplo:
Texto
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<img src="Url-de-tu-imagen" alt="Texto" border="3" align="left" height="200" width="400" hspace="5" vspace="5" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Pero si observaron el ejemplo, la etiqueta cuenta con distintos parámetros:
src="Url-de-tu-imagen" |indica la dirección de la imagen
alt="Texto" |muestra el texto al pasar el cursor sobre la imagen
border="2" |establece un borde alrededor de la imagen
align="left" |especifica la alineación de la imagen

Estos son algunos valores:
left: alinea la imagen hacia la izquierda con texto hacia la derecha
right: alinea la imagen hacia la derecha con texto hacia la izquierda
top: alinea texto hacia arriba respecto de la imagen
bottom: alinea texto hacia abajo respecto de la imagen
absbottom: alinea texto hacia abajo mas junto respecto de la imagen
middle: alinea texto en el medio de la imagen
absmiddle: alinea texto aun mas en el medio de la imagen

height="200" |establece la altura de la imagen
width="400" |establece la anchura de la imagen
hspace="5" |indica el espacio horizontal entre la imagen y el texto
vspace="5" |indica el espacio vertical entre la imagen y el texto

Ahora si le incluimos un poco de CSS:
Veremos una imagen con un borde distinto:
Texto
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<img style="border:3px inset #FF8000;" src="Url-de-tu-imagen" alt="Texto" border="0" align="left" height="200" width="400" hspace="5" vspace="5" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Saliéndonos un poco de la <img> y colocando una imagen dentro de un <div>, veremos un texto sobre una imagen:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:200px; width:400px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

O que tal una imagen sobre otra y otra:

<div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:200px; width:400px;"><div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:100px; width:300px; margin:45px;"><div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:50px; width:250px; margin:20px;"></div></div></div>

Y como vez, también le podrás poner enlaces como tu quieras:
<a href="Url-de-tu-sitio">Abrir aqui mismo</a>
<a href="Url-de-tu-sitio" target="_blank">Abrir en una ventana nueva</a>

La imagen que se muestra en los ejemplos pertenece a Sareni

p1

Un sitio dentro de otro

Si necesitas un sitio incrustado dentro de otro en esta entrada sabrás como hacerlo.
Para ello es necesario utilizar la etiqueta <iframe>.
A continuación les muestro los siguientes ejemplos:

Sitio incrustado con bordes y barras de desplazamiento:


Para personalizarlo cambia el tamaño del borde, tipo y color, si lo quieres con barras de desplazamiento(yes/no), ancho y alto de la ventana y alineado hacia la izquierda(left) de un texto, dereche(right), hacia arriba(top), hacia abajo(bottom) o en medio(middle).
<iframe name="window" style="border:5px inset #009900;" src="Url-de-tu-sitio-o-imagen" scrolling="yes" width="300" height="100" align="left"></iframe>



Sitio incrustado sin bordes ni barras de desplazamiento:



Ahora ejemplos con imagenes:





p1

Colocar música de fondo

Tal vez para algunos es molesto ir a un blog y escuchar música sin pedirlo pero si tu deseas ponerle música de fondo que se escuche automáticamente, coloca después de la etiqueta <body> los siguientes códigos:
Escuchar la canción solo en IE:
<bgsound src="Url-de-tu-cancion-mp3" loop="-1"></bgsound>

La canción se repetira varias veces pero si quieres que se escuche una sola vez, coloca 0 en lugar de -1.
Escuchar la canción solo en firefox:
<embed src="Url-de-tu-cancion-mp3" width="0" height="0" autostart="true" loop="true" hidden="true"/>

Para alojar un archivo mp3 acude a dropbox, un servicio totalmente gratuito. El potro de ciudad blogger te explica con un video tutorial como utilizarlo.
Otro truco o manera de colocar musica de fondo es incluyendo una Url de un video de youtube dentro de un <iframe>:
<iframe frameborder='0' height='0' id='window' name='window' scrolling='no' src='Url-de-tu-video' width='0'/>

Escuchar una cancion en este blog de pruebas.

p1

Separadores con HTML

Los separadores son líneas que se utilizan para separar contenidos de texto dándole una elegancia diferente.

A continuación te dejo los ejemplos:
Separador básico:


<hr>


Separador con anchura:


<hr width="50%"/>


Separador con anchura y alineado a la derecha:


Coloca en lugar de right, center si lo quieres al centro o left si es a la izquierda.
<hr width="50%" align="right"/>


Separador con tamaño:


<hr size="20"/>


Separador con color:


<hr color="#FF0000"/>


Separador con sombra:


<hr noshade="noshade"/>


También personalizándolo un poco más, le colocamos un poco de CSS:


Le podrás cambiar color de fondo del separador
El tamaño de cada uno de los bordes, estilos y colores
Lo alto del separador y lo ancho, así como la alineación del mismo.
<hr style="background-color:#333333; border-left:5px solid #009900; border-right:5px solid #FF0000; border-top:5px solid #FFCC00; border-bottom:5px solid #003366; height:10px; width:100%; align:center;" />

O si prefieres colocarle una imagen de fondo:


<hr style=" background-image:url(Url-de-tu-imagen); border-left:5px solid #003300; border-right:5px solid #FF0000; border-top:5px solid #FFCC00; border-bottom:5px solid #088A85; height:10px; width:100%; align:center;" />

Si necesitas otros estilos de bordes los puedes verlos en esta entrada.

Espero te sirvan en algo.

p1

2 Columnas de texto

De vez en cuando queremos ver elegante nuestro texto en dos columnas y hasta con imagenes. Y de verdad, se miran elegantes para los que tienen un blog de historia, poemas o cuentos y para los que no también.


2 columnas de texto alineado a la izquierda:

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="float: left; width: 45%; text-align: left;">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="float: right; width: 45%; text-align: left;">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="clear: both"></div>

2 columnas de texto alineado a la derecha:

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="float: left; width: 45%; text-align: right;">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="float: right; width: 45%; text-align: right;">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="clear: both"></div>

2 columnas de texto alineado al centro:

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="float: left; width: 45%; text-align: center;">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="float: right; width: 45%; text-align: center;">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="clear: both"></div>

2 columnas de texto justificado:

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="float: left; width: 45%; border: 0px solid #00529B; text-align: justify;">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="float: right; width: 45%; text-align: justify;">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="clear: both"></div>



Ahora 2 columnas de texto justificado pero con imagenes a la izquierda incluyendole la propiedad float:

imagen
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

imagen
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="float: left; width: 45%; text-align: justify;">
<img style="float: left;" src="Url-de-tu-imagen" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="float: right; width: 45%; text-align: justify;">
<img style="float: left;" src="Url-de-tu-imagen" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="clear: both"></div>

Ahora 2 columnas de texto justificado pero con imagenes hacia a la derecha:

imagen
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

imagen
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="float: left; width: 45%; text-align: justify;">
<img style="float: right;" src="Url-de-tu-imagen" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="float: right; width: 45%; text-align: justify;">
<img style="float: right;" src="Url-de-tu-imagen" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="clear: both"></div>



También le puedes colocar a las 2 columnas un color de fondo:

imagen
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

imagen
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="background-color: #770000; float: left; width: 45%; text-align: justify;">
<img style="float: left;" src="Url-de-tu-imagen" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="background-color: #770000; float: right; width: 45%; text-align: justify;">
<img style="float: left;" src="Url-de-tu-imagen" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="clear: both"></div>

O también que te parece, una imagen:

imagen
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

imagen
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="background-image: url(Url-de-tu-imagen); float: left; width: 45%; text-align: justify;">
<img style="float: left;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWs5zQ93py-0dfvSRh7DdN8U0MIAQKJ5DLq4I41dtLfUpx0kghHigTb0qBgHsFFNqXJ8f9MZl4049IKWz2RFmeoc_zq9lqN41_Mar62zgPDXxboG3n-GNbtm5Iy1DOlaF6YvnB3-6-83IP/s80/Carretera+rodeando+a+la+tierra.jpg" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="background-image: url(Url-de-tu-imagen); float: right; width: 45%; text-align: justify;">
<img style="float: left;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWs5zQ93py-0dfvSRh7DdN8U0MIAQKJ5DLq4I41dtLfUpx0kghHigTb0qBgHsFFNqXJ8f9MZl4049IKWz2RFmeoc_zq9lqN41_Mar62zgPDXxboG3n-GNbtm5Iy1DOlaF6YvnB3-6-83IP/s80/Carretera+rodeando+a+la+tierra.jpg" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="clear: both"></div>



Al ultimo si prefieres, le podras poner un color de texto, tamaño, asi como tipo de letra y un borde ya sea en las columnas o a las imagenes:

imagen
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

imagen
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="background-image: url(Url-de-tu-imagen); float: left; color: #CCCCCC; border: 2px solid #006699; font-family:Broadway; font-size: 14pt; width: 45%; text-align: justify;">
<img style="float: left; border: 2px solid #006699" src="Url-de-tu-imagen" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="background-image: url(Url-de-tu-imagen); float: right; color: #CCCCCC; border: 2px solid #006699; font-family:Broadway; font-size: 14pt; width: 45%; text-align: justify;">
<img style="float: left; border: 2px solid #006699" src="Url-de-tu-imagen" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><div style="clear: both"></div>

Espero y te ayude en algo.

p1

Formato de texto

Algunos de nosotros creemos que el formato de texto es básico, pero es fundamental para darle un toque distinto a nuestro texto, ya sea resaltando palabras con color, subrayado, tamaño, tipo de letra etc., para lo cual en esta entrada, vamos a ver diferentes ejemplos de formato de texto.

Texto teletipo
<tt>Texto teletipo</tt>



Texto especial
<var>Texto especial</var>

Si vemos el texto con fondo azul, es porque lo estoy utilizando para los codigos fuera del recuadro.


Texto normalTexto Superíndice
Texto normal<b>Texto Superíndice</b>



Texto normalTexto Subíndice
Texto normal<b>Texto Subíndice</b>



Texto en negrita
<b>Texto en negrita</b>



Texto en cursiva
<i>Texto en cursiva</i>



Texto subrayado
<u>Texto subrayado</u>



Texto con línea arriba
Este resultado generado, es por medio de la etiqueta <span>:
<span style="text-decoration: overline;">
Texto con línea arriba
</span>



Texto con línea arriba y abajo
Si checas, están fusionados los dos códigos anteriores, la etiqueta <u> con <span>:
<span style="text-decoration: overline;"><u>
Texto con línea arriba y abajo
</u></span>



Texto tachado
<s>Texto tachado</s>



El siguiente formato de texto se lleva a cabo con la etiqueta <h1,2,3,4,5,6>:
Texto
<h6>Texto</h6>

Texto
<h5>Texto</h5>

Texto

<h4>Texto</h4>

Este texto se mira asi por que es el que estoy utilizando en la sidebar el blog:

Texto

<h3>Texto</h3>

Texto

<h2>Texto</h2>

Texto

<h1>Texto</h1>



Ahora estos son con las etiquetas: <small>, <strong> y <big>:
Pequeñita
<small>Pequeñita</small>

Grande
<strong>Grande</strong>

Mas grande
<big>Mas grande</big>

Mas grande aun
Aquí se duplica el código anterior:
<big><big>Mas grande aun</big></big>



Pero no conformes necesitamos otro tipo de letra, con color y más grande, para ello a continuación te muestro los siguientes ejemplos hechos con la etiqueta <span>:
Texto mas grande.
En este ejemplo, solo modifica el
tamaño de la letra:

<span style=' font-size:30pt;'>Texto mas grande.</span>



Texto mas grande, con color.
Ahora el mismo ejemplo anterior pero con color:
<span style='font-size:30pt; color:#FFCC00;'>
Texto mas grande, con color.
</span>



Texto mas grande, con color y tipo de letra.
A este le sumamos el tipo de letra:
<span style=' font-family:Forte; font-size:30pt; color:#FFCC00;'>
Texto mas grande, con color y tipo de letra.
</span>



Texto mas grande, con color, tipo de letra y bordes.
y a este le sumamos un borde y colocamos la propiedad line-height para el segundo renglon:
<span style='font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>
Texto mas grande, con color, tipo de letra y bordes.
</span>



Texto mas grande, con color, tipo de letra, bordes y color de fondo:
Como ves en este ejemplo, le agregamos un color de fondo.
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>
Texto mas grande, con color, tipo de letra, bordes y color de fondo.
</span>



Texto mas grande, con color, tipo de letra, bordes e imagen de fondo.
Para ponerle una imagen, solo cambia:
<span style=' background-image: url(Url-de-tu-imagen); font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>
Texto mas grande, con color, tipo de letra, bordes e imagen de fondo.
</span>



Te dejo un último ejemplo pero ahora con palabras, bordes, tipos de letra y fondos coloridos o con imágenes diferentes:
Textoconpalabras,bordes,tiposdeletrayfondoscoloridosoconimagenesdiferentes.
Este seria el código del ejemplo:
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>Texto</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>con</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt;color:#CCCCCC;border: 2px solid #660000; line-height: 1.3em;'>palabras,</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00;border: 2px solid #006699; line-height: 1.3em;'>bordes,</span>
<span style='background-color:#003300; font-family:Stencil; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>tipos</span>
<span style='background-color:#003300; font-family:Stencil; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>de</span>
<span style='background-color:#003300; font-family:Stencil; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>letra</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>y</span>
<span style='background-color:#5a3100; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>fondos</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>coloridos</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>o</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>con</span>
<span style='background-image:url(Url-de-tu-imagen); font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>imagenes</span>
<span style='background-color:#003300; font-family:Forte; font-size:30pt; color:#FFCC00; border: 2px solid #660000; line-height: 1.3em;'>diferentes.</span>

Lo único que queda, es personalizarlos a nuestro gusto.
Ojala y te sean de gran utilidad.

p1