Descargar el PDF
Descargar el PDF
Si quieres añadir una imagen a una página web, todo lo que necesitas es HTML. Si quieres fijar una imagen de fondo en una página web, necesitarás usar tanto HTML como CSS. HTML proviene de las siglas en inglés "Hypertext Markup Language" (en español, "Lenguaje del marcado de hipertextos") y es el código que dice al navegador qué mostrar en una página web. [1] X Fuente de investigación CSS proviene también del inglés "Cascading Style Sheets" (en español, "Hojas de estilo en cascada") y se usa para cambiar la apariencia y el diseño de una página web. [2] X Fuente de investigación Necesitarás una imagen de fondo que quieras usar para la página web.
Pasos
-
Crea una carpeta para guardar el archivo HTML y la imagen de fondo. En la computadora, crea y da nombre a una carpeta que puedas encontrar fácilmente más tarde.
- Podrás darle el nombre que quieras a la carpeta, pero cuando trabajes con HTML, será mejor que adquieras el hábito de dar nombres a los archivos y las carpetas con nombres cortos y de una sola palabra que sean fácilmente reconocibles.
-
Coloca la imagen de fondo en la carpeta HTML. Guarda la imagen que quieras usar de fondo en la carpeta HTML.
- En caso de que no te preocupe asegurarte de que tu página web funcione bien en dispositivos antiguos con conexiones de Internet más lentas, podrás usar una imagen con alta resolución de fondo. Las imágenes sencillas, con patrones repetitivos también serán una buena opción a la hora de decantarte por una imagen de fondo en la que pueda leerse cualquier texto que haya en ella.
- Si no tienes una imagen, podrás descargar una imagen de fondo de forma gratuita. En caso de que descargues una, guárdala en la carpeta HTML que hayas creado.
-
Abre un editor de texto o editor de HTML. Podrás crear un archivo HTML usando un editor de texto básico como NotePad en Windows o TextEdit en Mac. También podrás usar un editor HTML WYSIWYG (del inglés "what-you-see-is-what-you-get", en español "lo que ves es lo que hay") como Adobe Dreamweaver.
- En caso de que uses un editor WYSIWYG, haz clic en la opción para abrir un archivo nuevo HTML en la página de inicio.
-
Haz clic en Archivo . Se encuentra en la barra de menú en la parte superior de la página.
-
Haz clic en Guardar como (Bloc de notas) o Guardar (TextEdit). Se encuentra en el menú de archivo inferior. En caso de que uses una computadora, haz clic en Guardar como en el menú desplegable "Archivo". Si usas una Mac, haz clic en Guardar en el menú desplegable.
-
Escribe un nombre para el documento HTML. Normalmente, la primera página de la página web se llamará "index" ("índice"), pero podrás ponerle el nombre que quieras. Escribe el nombre del archivo en el campo de texto al lado de "Nombre de archivo".
-
Cambia el tipo de archivo a un documento HTML. En caso de que uses un editor WYSIWYG, simplemente bastará con que guardes el archivo. Si usas NotePad o TextEdit para crear HTML, sigue los pasos descritos a continuación para guardar el documento en formato HTML.
- Bloc de notas : cambia la extensión ".txt" al final del nombre del archivo por ".html".
- TextEdit : usa el menú desplegable al lado de "Formato de texto" para seleccionar Página web (.html)
-
8Haz clic en Guardar . Se encuentra en la esquina inferior derecha de la ventana. Hacerlo guardará el documento de texto como un documento HTML.Anuncio
-
Escribe <!DOCTYPE html> en la parte superior del documento HTML . El código HTML está formado por etiquetas de apertura y cierre. Cada página HTML bien escrita debe comenzar con <!DOCTYPE html>. Esto le dirá al navegador web que el archivo HTML es un archivo HTML.
-
Escribe <html> en la línea siguiente. Esta será la etiqueta de apertura del código HTML. Le dirá al navegador que el código HTML comienza en este punto.
-
Escribe <head> en la línea siguiente. Esta será la etiqueta de apertura para el "Encabezado" del documento HTML. El encabezado contendrá meta información que no se mostrará en el navegador web. Albergará información como el título de la página, además del CSS ("Cascading Style Sheets", en español "Hojas de estilo en cascada") que dará formato al aspecto del código HTML.
-
Escribe <title>Título de la página</title> . Este es el código HTML que contendrá el título de la página para la página web. La etiqueta "<title>" es la etiqueta de apertura del código HTML "Título de la página". La etiqueta "</title>" es la etiqueta de cierre. Cambia el texto "Título de la página" por cualquier título que quieras usar como nombre para la página HTML. El texto aparecerá en la pestaña del navegador web en la parte superior del navegador.
-
Escribe </head> en la línea siguiente. Esta será la etiqueta que cerrará el encabezado del documento HTML. En caso de que quieras incluir cualquier otra información o página de estilo para el documento HTML, asegúrate de escribirlo después de la etiqueta de apertura "<head>", y antes de la etiqueta de cierre "</head>".
-
Escribe <body> en la línea siguiente. Esta será la etiqueta de apertura para el cuerpo del documento HTML. El cuerpo es el lugar donde irán todos los elementos visuales de la página web. Incluye texto, imágenes, botones, y otros elementos que serán visibles en la página web.
-
Escribe <div style="background-image: url('[URL de la imagen]');"> en la línea siguiente . Es la etiqueta HTML para fijar una imagen de fondo en la página web. Cambia "[URL de la imagen]" por la dirección URL real de la imagen que quieras fijar. Podrá ser la ubicación de una imagen que esté almacenada en un servidor en línea, o la ubicación local de una imagen en la computadora. [3] X Fuente de investigación
- Como alternativa, podrás usar CSS fijar una imagen de fondo.
- Cuando uses un nombre de archivo sin una ruta de archivo o URL (por ejemplo, background-image: url("imagenfondo.png"); ), el navegador web buscará en la carpeta de la página web la imagen con ese nombre. En caso de que el archivo se encuentre en otra carpeta del sistema de archivos, deberás añadir la ruta completa a ese archivo.
-
Escribe </body> en la última línea. Esta será la etiqueta que cerrará el cuerpo del documento HTML. Cuando termines de añadir todos los elementos HTML que quieras incluir en el documento, escribe esta etiqueta en la última línea.
-
Escribe </html> al final. Esta será la etiqueta que cerrará todo el documento HTML. Escribe esta etiqueta en la última línea.
-
Guarda el archivo HTML. Cuando termines todo el documento, haz clic en Archivo y luego en Guardar para guardar tu trabajo. El documento HTML al completo tendrá un aspecto similar al siguiente:
<!DOCTYPE html> < html > < head > < title > Título de página </ title > </ head > < body > < div style = "background-image: url('https://www.páginaweb.com/imágenes/imagen_fondo.jpg');" > </ body > </ html >
Anuncio
-
Crea un documento HTML. Sigue los pasos descritos en la Parte 2 para escribir un documento HTML. Este documento deberá tener una etiqueta de apertura y otra de cierre HTML, una etiqueta de apertura y otra de cierre para el encabezado, y una etiqueta de apertura y otra de cierre para el cuerpo. No será necesario incluir la etiqueta HTML para añadir la imagen de fondo. Esta parte te enseñará cómo fijar una imagen de fondo usando CSS en vez de HTML.
-
Escribe <style> en el encabezado del documento HTML. Esta será la etiqueta para el CSS ("Cascading Style Sheets", en español "Hojas de estilo en cascada"). Deberá situarse después de la etiqueta "<head>", y antes de la etiqueta "</head>".
- Como alternativa, podrás crear tu CSS en un documento CSS independiente y enlazarlo al documento HTML.
-
Escribe body { en la línea siguiente. Será la apertura del código CSS que que dará estilo al cuerpo del documento HTML.
-
Escribe background-image: url('[URL de la imagen]'); en la línea siguiente . Esta línea especificará qué imagen de fondo se usará. Cambia el texto "[URL de la imagen]" por la URL real de la imagen que quieras usar.
- Cuando uses un nombre de archivo sin una ruta de archivo o URL (por ejemplo, background-image: url("imagenfondo.png"); ), el navegador web buscará en la carpeta de la página web la imagen con ese nombre. En caso de que el archivo se encuentre en otra carpeta del sistema de archivos, deberás añadir la ruta completa a ese archivo.
-
Escribe background-repeat: no-repeat; en la línea siguiente . Esta línea le dirá al navegador web que muestre la imagen una única vez, en vez de repetir la imagen continuamente.
-
Escribe background-size: cover; en la línea siguiiente . Esta línea le dirá al navegador que cubra todo el fondo con la imagen.
-
Escribe } al final de la sección "Body" del HTML. En caso de que quieras añadir otras líneas CSS que modifiquen el cuerpo del documento HTML, asegúrate de incluirlas ahora. Escribe "}" en la última línea de la sección "Body" en el CSS para cerrar la sección del cuerpo.
-
Escribe </style> al final del CSS. Cuando termines de incluir todos los elementos CSS que quieras, escribe "</style>" al final. Esta etiqueta cerrará el CSS.
-
Guarda el archivo HTML. Cuando termines todo el documento, haz clic en Archivo y luego en Guardar para guardar tu trabajo. El documento HTML al completo tendrá un aspecto similar al siguiente:
<!DOCTYPE html> < html > < head > < title > Título de la página </ title > < style > body { background-image : url ( "https://www.páginaweb.com/imágenes/imagen_fondo.jpg" ); background-repeat : no-repeat ; background-size : cover ; } </ style > </ head > < body > </ body > </ html >
Anuncio
![Step 4 Escribe background-image: url('[URL de la imagen]'); en la línea siguiente](#/Imagen:2627945-22-2.jpg)
-
Haz clic derecho en el documento HTML. Hacerlo mostrará un menú emergente a su derecha.
-
Selecciona Abrir con . Hacerlo mostrará una lista de aplicaciones con las que podrás abrir el HTML.
-
Selecciona el navegador web que prefieras. Podrás abrir el HTML en cualquier navegador web.
-
Revisa el archivo HTML. Comprueba todo en el archivo y asegúrate de que todo esté correcto.
- En caso de que no aparezca la imagen cuando se abra el navegador, asegúrate de que el nombre de archivo de la imagen esté escrito correctamente en la ventana index.html del editor de texto.
- Si aparece un código HTML en vez de la imagen de fondo cuando abras el navegador, es posible que el archivo HTML se haya guardado como un archivo .txt o .rtf en vez de un documento HTML. Trata de editar el archivo HTML en un editor de texto diferente.
-
Haz cambios al archivo HTML. En la ventana del editor de texto, mueve el cursor entre las etiquetas <body> </body> y entonces escribe ¡Hola mundo! . Carga de nuevo la ventana del navegador para ver el texto en la parte superior de la imagen de fondo.Anuncio
Referencias
Anuncio
¡Suscríbete al boletín gratuito de wikiHow!
Encontrarás instructivos útiles en tu bandeja de entrada cada semana.
¡Suscríbeme!
