Imagenes de fondo
Configurar los archivos
-
1Crea una carpeta para guardar tu archivo HTML y la imagen de fondo. Crea una carpeta en tu computadora y ponle un nombre que te permita identificarla fácilmente.
- Puedes ponerle el nombre que quieras, pero como vas a trabajar con HTML, es mejor que te acostumbres a elegir nombres cortos y de una sola palabra a tus archivos y carpetas.
-
2Coloca la imagen de fondo en la carpeta HTML. Busca la imagen que quieras usar como fondo y guárdala en tu carpeta HTML.
- .
-
3Crea un archivo HTML. Abre un editor de texto y crea un nuevo archivo. Guarda ese archivo con el nombre index.html.
-
1Copia y pega el siguiente código HTML estándar. Selecciona y copia el código que se muestra a continuación y luego pégalo en el archivo index.html abierto.
<!DOCTYPE html> <html> <head> <title>Título de la página</title> <style> body { background-image: url(" "); } </style> </head> <body> </body> </html>
-
2Agrega la dirección URL de la imagen. Busca en el archivo index.html la línea background-image: url(" ");. Coloca el cursor entre los paréntesis y escribe el nombre del archivo que contiene la imagen de fondo. Asegúrate de incluir la extensión del archivo de imagen.Cuando termines, deberá quedarte parecido a esto:
background-image: url("imagendefondo.png");Cada vez que uses un nombre de archivo sin la ruta o dirección URL, el navegador web buscará la imagen en la carpeta donde está guardada la página web. Si el archivo está en otra carpeta del sistema, tendrás que agregar la ruta completa del archivo.[3] -
3Guarda el archivo HTML.
-
1Abre el archivo HTML en un servidor web. Haz clic derecho en el archivo index.html y selecciona la opción de abrirlo usando el navegador web que quieras.
- Si al abrir el navegador no aparece la imagen, asegúrate de que el nombre de la imagen esté escrito correctamente en la ventana del editor de texto donde creaste index.html.
- Si al abrir el navegador en vez de aparecer la imagen aparece el código HTML, significa que el archivo index.html se guardó como un documento de texto enriquecido. Prueba editar el código HTML con otro editor de texto.
-
2Edita el archivo HTML. En la ventana del editor de texto, coloca el cursor entre las etiquetas <body> y </body> y luego escribe "¡Hola mundo!". Actualiza la ventana del navegador para ver si aparece el texto encima de la imagen de fondo.
-
1Aprende a usar las etiquetas de HTML y CSS. El código HTML se compone de etiquetas de apertura y de cierre. La etiqueta <body> es la etiqueta de apertura del cuerpo de la página y </body> es la etiqueta de cierre. En HTML, todas las etiquetas de apertura tienen que tener su correspondiente etiqueta de cierre para que la página se muestre correctamente.
-
2Aprende qué significa la etiqueta DOCTYPE. Todas las páginas de HTML bien escritas deben comenzar por <!DOCTYPE html>. Esto es lo que le indica al navegador que el archivo HTML es un archivo HTML.
-
3Edita el archivo HTML. En la ventana del editor de texto, coloca el cursor entre las etiquetas <body> y </body> y luego escribe "¡Hola mundo!". Actualiza la ventana del navegador para ver si aparece el texto encima de la imagen de fondo.
-
4Aprende a usar las etiquetas HTML y CSS. El código HTML se compone de etiquetas de apertura y de cierre. La etiqueta <body> es la etiqueta de apertura del cuerpo de la página y </body> es la etiqueta de cierre. En HTML, todas las etiquetas de apertura tienen que tener su correspondiente etiqueta de cierre para que la página se muestre correctamente.
-
5Aprende a usar la etiqueta de título. La etiqueta <title> aparece en la barra de título de la ventana del navegador y también se muestra en las pestañas del navegador.
-
6Aprende a usar la etiqueta de estilo. La etiqueta <style> indica la presencia de código CSS. Todo lo que se encuentre entre dos etiquetas <style>, es código CSS.
-
7Aprende a usar la etiqueta de cuerpo. Todo el texto que aparezca escrito entre las etiquetas <body> aparecerá tal como esté escrito, a menos que sea código HTML o CSS.
-
8Edita el archivo HTML. En la ventana del editor de texto, coloca el cursor entre las etiquetas <body> y </body> y luego escribe "¡Hola mundo!". Actualiza la ventana del navegador para ver si aparece el texto encima de la imagen de fondo.
-
1Aprende a usar el código CSS. En el archivo index.html, todo el código CSS que se encuentra entre las etiquetas <style> le indica al navegador que debe agregar una imagen de fondo con un nombre específico en la etiqueta <body> al mostrar la página web.
-
2Observa el siguiente código CSS.
body { background-image: url("imagendefondo.png"); }
-
3Aprende a identificar las partes del código CSS. Las hojas de estilo CSS están compuestas por dos partes: un selector y una declaración.[4]En el ejemplo, <body> es el selector y background-image: url("imagendefondo.png") es la declaración.Los selectores pueden ser etiquetas HTML.Las declaraciones siempre van entre llaves ({ }).
-
4Comprende las declaraciones CSS. Las declaraciones CSS, a su vez, se dividen en dos partes: una propiedad y un valor. En el ejemplo anterior, dentro de lo que está entre las llaves, background-image es la propiedad y url("imagendefondo.png") es el valor.
Comentarios
Publicar un comentario