Pero antes de comenzar me gustaría compartirles el tutorial anterior acerca de Color de texto en HTML, que es de mucha utilidad y le da un mejor aspecto a nuestra pagina web.
Entonces, comencemos con el tutorial.
Si queremos asignar a nuestra pagina web un color de fondo dentro de la etiqueta <body> utilizaremos el parámetro bgcolor, lo que hará que todo el contenido dentro de las etiquetas body contenga un color de fondo igual al que le asignemos:
<body bgcolor="color que queremos asignar de fondo">
Contenido del body
</body>
El color de fondo lo podemos asignar por nombre o por valor hexadecimal.
A continuación les comparto un ejemplo del color de fondo por nombre:
<html>
<head>
<title>
Color e imagen de fondo en HTML.
</title>
</head>
<body BGCOLOR="yellow">
Contenido de nuestra pagina web con BGCOLOR="yellow".
</body>
</html>
Y este seria el resultado que obtendríamos:
Ahora el ejemplo del color de fondo por valor hexadecimal.
<html>
<head>
<title>
Color e imagen de fondo en HTML.
</title>
</head>
<body BGCOLOR="#a8dba1">
Contenido de nuestra pagina web con valor Hexadecimal = "#a8dba1".
</body>
</html>
Y este seria el resultado obtenido con el código anterior:
Si queremos asignar una imagen de fondo a nuestra pagina web, utilizaremos la etiqueta <body> pero ahora utilizaremos el parámetro background, lo que asignara al fondo de la pagina web esa imagen que elegimos, si la imagen es de tamaño menor al tamaño de la ventana, la imagen se estará duplicando y mostrando varias veces formando una especie de tapiz de la misma imagen.
Tenemos dos opciones para acceder a la imagen que queremos de fondo para nuestra pagina web, una es cargarla desde el equipo y otra es cargarla directamente desde internet, a continuación les pondré un ejemplo de ambos casos.
Al cargar la imagen desde el equipo podemos acceder de manera distinta a ella, si la imagen se encuentra en la misma carpeta que nuestro archivo .html, podemos acceder directamente a ella con solo poner el nombre y extensión de dicha imagen y que el navegador sea capaz de soportar ese formato.
<html>
<head>
<title>
Color e imagen de fondo en HTML.
</title>
</head>
<body background="Color e Imagen de fondo en HTML3.png">
<font color="white">Contenido de nuestra pagina web con imagen de fondo desde la misma carpeta que el archivo .html.</font>
</body>
</html>
Y el resultado que obtendríamos seria el siguiente:
Como dato extra, la imagen utilizada como fondo de pantalla de la pagina web es: "Bosque de sueños" de Mario Rafael Lince Benavides.
Si se encuentra en una carpeta distinta a la de nuestro archivo .html tenemos que especificar toda la ruta para acceder a dicho archivo, Para obtener la ruta del archivo, abrimos la carpeta donde se encuentra el archivo, y en la parte superior de la carpeta, damos click sobre la barra blanca y aparecerá la ruta hasta la carpeta:
Una vez que tengamos dicha ruta, en mi caso:
C:\Users\Usuario\Desktop\Carpeta de ejemplo\carpeta de imagenes
Al final le agregamos una diagonal, seguida del nombre y extensión de nuestro archivo, en mi caso la ruta quedaría así:
C:\Users\Usuario\Desktop\Carpeta de ejemplo\carpeta de imagenes/Color e imagen de fondo en HTML3.png
Y esa ruta que obtuvimos es la que colocaremos en el background de nuestra etiqueta body, a continuación les comparto un código acerca de esto:
<html>
<head>
<title>
Color e imagen de fondo en HTML.
</title>
</head>
<body background="C:\Users\Usuario\Desktop\Carpeta de ejemplo\carpeta de imagenes/Color e imagen de fondo en HTML3.png">
<font color="white">Contenido de nuestra pagina web con imagen de fondo desde la misma carpeta que el archivo .html.</font>
</body>
</html>
Y el resultado que obtendríamos seria el siguiente:
Si cargamos la imagen desde internet, lo único que necesitamos poner en el background es el url de la imagen, que en mi caso seria el siguiente:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPeoAcJP2X3zEpQ80TqmBK7MXheTsEVC2npONsYvHdyNLzFL0VByI6gttUGDqMvOnoH0mNA-0flhrq2bY1uEY7iinxeiqJMBVii2KVFTgCEZQNR2tdEwJh8kx_0SzuzfbGJ4z_U251q4U/s1600/Forest-like-a-Dream.jpg
Y a continuación les comparto un un ejemplo donde cargo una imagen desde internet:
<html>
<head>
<title>
Color e imagen de fondo en HTML.
</title>
</head>
<body background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPeoAcJP2X3zEpQ80TqmBK7MXheTsEVC2npONsYvHdyNLzFL0VByI6gttUGDqMvOnoH0mNA-0flhrq2bY1uEY7iinxeiqJMBVii2KVFTgCEZQNR2tdEwJh8kx_0SzuzfbGJ4z_U251q4U/s1600/Forest-like-a-Dream.jpg">
<font color="white">Contenido de nuestra pagina web con imagen de fondo desde una pagina de internet.</font>
</body>
</html>
Y el resultado obtenido con el código anterior, seria el siguiente:
Como dato extra, la imagen utilizada como fondo de pantalla de la pagina web es: "Forest like a Dream" de Silviu Vlasceanu.
Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.
Fuente:
http://www.htmlpoint.com/guida/html_04.htm consultada el 11 de Julio del 2015.
No hay comentarios:
Publicar un comentario