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

martes, 7 de junio de 2016

HTML: Cuadro de texto con color de fondo


En HTML, con este código podrá hacer un cuadro de texto con texto adentro y un color de fondo.


<div style="background-color: orange; border: 1px solid black; margin: 0px auto; padding: 10px; text-align: left; width: 200px;">
texto que irá dentro del cuadro...</div>


texto que irá dentro del cuadro...


Podemos personalizarlo a nuestro gusto cambiando:


background-color para el color de fondo. Podemos poner el color que queramos con código hexadecimal.
Ejemplo: #FFFFFF o también con el nombre del color.

border: El grosor del borde del cuadro de texto y el color del borde.

text-align: Alineación del texto dentro del cuadro.

width: Tamaño horizontal del cuadro (a lo largo).


<div style="background-color: #fbfbfb; border: 5px solid #FF0000; margin: 0px auto; padding: 10px; text-align: center; width: 400px;">
<span style="color: #0080ff;">texto que irá dentro del cuadro... Esto es un ejemplo del texto que puede ir dentro del cuadro de texto con un color de fondo cambiando algunos parámetros.</span></div>

texto que irá dentro del cuadro... Esto es un ejemplo del texto que puede ir dentro del cuadro de texto con un color de fondo cambiando algunos parámetros.


En este segundo ejemplo se cambió el background-color, el tamaño del border y el color, el texto se puso centralizado, el width se cambió a 400px (más grande), se agregó más texto y se introdujo el elemento <span style="color: #0080ff">...</span> para cambiar el color de texto y ponerlo azul.

En el primer ejemplo al no especificarse un color de fuente, toma la predeterminada o la establecida por la plantilla.

miércoles, 1 de junio de 2016

Para que las imágenes en Blogger no se abran o "amplíen" al hacer click

En esta entrada verás cómo evitar que las imágenes se abran en la misma ventana al hacerles clic, pues para algunos resulta molestoso. Véase aquí un ejemplo:

Imagen clickeable

Para evitar esto, tres pasos a seguir: