Follow Us

Advertising that works - yX Media

PÁGINA HTML CON COLORES DE FONDO O CON IMAGEN DE FONDO.

 

Para lograr esto es necesario recordar los atributos de la etiqueta body, que podemos observar en el siguiente enlace:

 https://developer.mozilla.org/es/docs/Web/HTML/Elemento/body

Página con un color de fondo

Para crear una página con un color de fondo vamos a usar el atributo bgcolor en la etiqueta body.

Los colores en HTML se asignan según el sistema RGB, con un sistema hexadecimal esto quiere decir que los valores numéricos que tienen son de 0 a F. para cada color se tiene 256 combinaciones desde el 00 al FF.

Los colores se organizan en pares el primer par es para el color rojo, el segundo para el color verde y el último para el color azul.

Para un color rojo se tiene la combinación FF0000

Para un color verde se tiene la combinación 00FF00

Para un color azul se tiene la combinación 0000FF

Para más colores utiliza la siguiente paleta de colores y toma el dato en hexadecimal del color seleccionado para colocarlo en el código.

https://html-color-codes.info/codigos-de-colores-hexadecimales/

http://htmlcolorcodes.com/es/selector-de-color/

 

Veamos un ejemplo de uso de estos códigos:

Código Página colorfondorojo.html

<html>

<head><title>Colores de fondo HTML</title></head>

<body bgcolor="#ff0000">

Esta página da un color de fondo rojo

</body></html>

----------------------------------------------------------------------------------

Código página fondomandarina.html

<html>

<head><title>Colores de fondo HTML</title></head>

<body bgcolor="FF9C33">

Esta pagina da un color de fondo mandarina

</body></html>

Página con una imagen de fondo

Las páginas con imagen de fondo se crean a partir del atributo background, para esto debes tener una imagen en formatos compatibles web como lo son: jpg, jpeg, gif, png.

En nuestro caso utilizaremos en el directorio de prueba una imagen llamada fondo.png, en este directorio debemos guardar el archivo de html, para este caso lo llamamos bodyfondo.html

Imagen archivo fondo.png

Para nuestro caso es una imagen pequeña, pero el navegador por defecto creará copias o reproducciones suficientes para llenar el tamaño de la página web, te recomendamos tener estas imágenes de fondo pequeñas para que el sitio web sea liviano al cargar y tener en cuenta que el color de texto que manejamos por el momento es negro así que una imagen de fondo oscura no nos permitirá ver ningún texto escrito, más adelante observaremos como cambiar las configuraciones de texto.

Se debe ingresar en el atributo el nombre exacto de la imagen en este caso fondo.png

<html>

<head><title>Imagen de fondo HTML</title></head>

<body background="fondo.png">

Tenemos la imagen seleccionada de fondo

</body></html>

 

 

 

 

 

 

 

 

 

 

 

Share This