PDF download Descargar el PDF PDF download 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] 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] Necesitarás una imagen de fondo que quieras usar para la página web.

Parte 1
Parte 1 de 4:

Configurar los archivos

PDF download Descargar el PDF
  1. 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.
  2. 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.
  3. 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.
  4. Se encuentra en la barra de menú en la parte superior de la página.
  5. 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.
  6. 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".
  7. 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)
  8. 8
    Haz clic en Guardar . Se encuentra en la esquina inferior derecha de la ventana. Hacerlo guardará el documento de texto como un documento HTML.
    Anuncio
Parte 2
Parte 2 de 4:

Escribir el archivo HTML

PDF download Descargar el PDF
  1. 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.
  2. Esta será la etiqueta de apertura del código HTML. Le dirá al navegador que el código HTML comienza en este punto.
  3. 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.
  4. 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.
  5. 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>".
  6. 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.
  7. . 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]
    • 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.
  8. Si quieres añadir cualquier otro elemento HTML a la página web, como un texto, imágenes , vídeos , enlaces, botones, etc., asegúrate de incluirlos en la sección "Body" del documento HTML.
  9. 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.
  10. Esta será la etiqueta que cerrará todo el documento HTML. Escribe esta etiqueta en la última línea.
  11. 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
Parte 3
Parte 3 de 4:

Usar CSS

PDF download Descargar el PDF
  1. 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.
  2. 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.
  3. Será la apertura del código CSS que que dará estilo al cuerpo del documento HTML.
  4. . 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.
  5. . Esta línea le dirá al navegador web que muestre la imagen una única vez, en vez de repetir la imagen continuamente.
  6. . Esta línea le dirá al navegador que cubra todo el fondo con la imagen.
  7. 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.
  8. Cuando termines de incluir todos los elementos CSS que quieras, escribe "</style>" al final. Esta etiqueta cerrará el CSS.
  9. 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
Parte 4
Parte 4 de 4:

Revisar el archivo HTML

PDF download Descargar el PDF
  1. Hacerlo mostrará un menú emergente a su derecha.
  2. Hacerlo mostrará una lista de aplicaciones con las que podrás abrir el HTML.
  3. Podrás abrir el HTML en cualquier navegador web.
  4. 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.
  5. 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

Acerca de este wikiHow

Esta página ha recibido 149 263 visitas.

¿Te ayudó este artículo?

Anuncio