Saltar al contenido
14 enero, 2019 - Actualizado enero 2, 2019 a las 13:15

Hoy nos encontramos frente al “HTML” el cual se considera como un tipo de lenguaje de marcado que es muy usado para lograr el desarrollo de sitios web, que a su vez cuenta con las siglas correspondidas de “Hyper Text Markup Language”, que se traduciría a “Lenguaje de Formato de Documentos Hipertexto”

Así mismo, este lenguaje se ha llevado a cabo como un estilo de formato abierto que ha surgido partiendo de las etiquetas de “Estándar Generalized Markup Language”, que se traduce a “Estándar de lenguaje de marcado generalizado”, y que refleja un sistema que ordena y etiqueta distintos documentos en una lista.

No obstante, si te llegáramos a comentar que con este peculiar artículo los usuarios van a poder aprender a insertar una imagen en HTML ¿Nos llegarías a creer? Pues quédate con nosotros, presta mucha atención y averígualo tú mismo.

¿Como insertar una imagen en HTML?

HTML 1
Lo mas recomendable es que en este punto, utilices una imagen llamativa y que no sea tan común,

El HTML se usa mayormente para poder especificar todo nombre de etiqueta que se use al momento de ordenar, por lo que no van a existir reglas para dicho organizado y es por eso que se piensa que es un sistema con un formato abierto.

Por lo tanto, este será el que se encargue de llevar a cabo toda descripción acerca de los contenidos que se reflejen, tales como los textos y sobre sus estructuras, complementado el mismo texto con diferentes objetos, bien sean animaciones, fotografías e imágenes, entre otros.

Pasos a seguir por los usuarios para que logren insertar una imagen en HTML

  1. Lo primero a realizar por los usuarios va a ser subir su imagen determinada, por lo que existen varios servicios para alojamiento de imágenes de manera gratuita, tales como “Picasa Web”, “Photobucket” o “Imgur”

Por lo tanto, el usuario debe tener mucho cuidado, debido a que algunos de estos servicios van a disminuir la calidad de la imagen o incluso llegarían a eliminarla, además hay servicios de alojamiento de blog que le permitirán a los usuarios que publiquen sus imágenes utilizando sus herramientas de administradores de blogs.

Cabe destacar que, el usuario en caso de querer utilizar una imagen de alguna otra página, va a tener que pedirle una autorización al creador de la misma, sin embargo, si al usuario se le permite utilizar la imagen, tendrá que descargarla y después subirla al sitio de alojamiento de las imágenes o fotos.

  1. Luego, el usuario tiene que abrir su archivo de HTML en el sitio web donde se va a demostrar la imagen.
  2. Seguidamente, el usuario tiene que comenzar con la etiqueta de su imagen seleccionada, para eso tendrá que encontrar el punto en el cuerpo del HTML en donde se desea insertar la imagen, por lo que se deberá escribir la etiqueta de “Img”, la cual es una etiqueta que se encuentra sola sin una etiqueta de cierre.

Por lo tanto, todo lo que el usuario va a necesitar para poder reflejar su imagen va a estar dentro de los “2 paréntesis angulares”.

  1. Se debe conseguir el URL de la imagen determinada, para eso se debe visitar el sitio web donde se encontraba ubicada la imagen, y luego se realiza un clic con el botón derecho del ratón en la parte de “Ver imagen” y así después poder copiar el URL en la barra de direcciones del usuario.

Se debe expresar que en caso de que el usuario haya publicado su imagen a un directorio de imagen en su propia página web, deberá enlazarla con “Imágenes/ El nombre del archivo”, y en caso de que no funcione, es porque el directorio puede ser que se encuentre dentro de otra carpeta, por lo que se tiene que buscar.

  1. Después, el usuario tiene que colocar su URL en un atributo de “SRC”, debido a que todo HTML debe ir dentro de una etiqueta para poder realizar modificaciones y para que así se le indique al navegador en donde podría buscar para conseguir la imagen.
  2. Se tiene que añadir un atributo “Alt” para que se le indique al navegador cual será el texto que se muestre al momento en el que la imagen pueda fallar cuando esté cargando.
  3. Posteriormente, el usuario va a tener que guardar todos sus cambios realizados en el sitio web, y eso lo hará visitando la página que este ya editó o también podría actualizar la página en caso de que la tenga abierta, y luego se observa la imagen.

¿Como insertar una imagen en HTML de fondo?

HTML 2.
Lo mas difícil al momento de querer insertar una imagen en HTML de fondo, es encontrar una que sea original y única.

Se puede decir con gran facilidad que este es un tipo de lenguaje bastante simple y general que sirve para que los usuarios logren definir otros lenguajes que tengan que ver con los formatos del documento determinado, y de todo el texto que se crea partiendo de los tags, que interconectan los conceptos y todos los formatos.

Cabe destacar que, las siglas de CSS significan “Hojas de estilo en cascada”, y se usan para lograr modificar toda apariencia y a su vez todo el diseño de una página o sitio web; no obstante, a continuación se van a demostrar una serie de pasos a seguir en caso de querer insertar una imagen HTML de fondo

¿Qué pasos podría seguir un usuario para poder insertar una imagen en su respectivo fondo?

  1. El usuario va a tener que crear una carpeta para lograr guardar su archivo de HTML y a su vez guardar la imagen de fondo, para luego crear una carpeta en su PC y asignarle un nombre que le permita identificarla de forma sencilla.

Por lo que, el usuario va a lograr asignarle el nombre que mejor le parezca, pero como se debe trabajar con HTML, se recomienda que se le asigne un nombre corto y de preferiblemente una sola palabra para observar de mejor forma las carpetas y todo archivo.

  1. Se debe colocar la imagen de fondo en la carpeta de HTML, y para realizar esto se debe conseguir la imagen que se desea utilizar como fondo y seguidamente se guarda en la carpeta de HTML.

Es mejor que los usuarios utilicen imágenes sencillas con patrones suaves y repetitivos, tales como imágenes de fondo para que con eso el texto se encuentre sobre el fondo y así se logre ver de manera fácil.

Sin embargo, en caso de que el usuario no cuente con una imagen, va a poder descargar una de fondo de manera gratuita directamente del internet, por lo que si se descarga una imagen, el usuario tendrá que asegurarse de guardarla en su carpeta llamada HTML.

  1. Seguidamente, se tiene que crear un archivo HTML abriendo un editor de texto y con eso se logre crear el nuevo archivo, para que después se pueda guardar el archivo pero esta vez contará con el nombre de “Index, Html”.

En este paso el usuario va a poder utilizar el editor de texto que mejor le parezca, incluso cada editor de texto que venga con su sistema operativo, bien sea el bloc de notas en caso de ser una PC con Windows, o el de “TextEdit” en caso de ser una PC Mac

Por lo tanto, en caso de que se vaya a utilizar “TextEdit” antes de empezar a escribir en el archivo, se deberá realizar un clic sobre el menú de “Formato”, para seguidamente tener que seleccionar la parte de “Convertir en texto normal” o “Convertir a texto sin formato”.

Con esto el usuario se estaría asegurando de que el archivo de HTML se logrará cargar de manera correcta en el navegador del equipo.

  1. Posteriormente, se tiene que escribir el archivo HTML, y así poder copiar y a su vez pegar el siguiente código HTML estándar que se le vaya a aparecer al usuario, para seguidamente tener que seleccionar y copiar el mismo código que se demuestre y así pegarlo en el archivo de “Index, Html”
  2. Se debe asignar la dirección de URL de la imagen, para eso el usuario tiene que buscar en su archivo de Index una línea de “Background”, y con esto tendrá que colocar su cursor entre los paréntesis y así escribir el nombre del archivo que contendrá la imagen de fondo determinada.

Se le recomienda al usuario que incluya la extensión de su archivo de imagen, y cuando ya haya terminado deberá observar lo siguiente “Background- Image”: URL.

Así mismo, cada vez que el usuario tienda a usar su nombre de archivo sin la ruta asignada, o la dirección de URL, el mismo navegador de la web va a buscar la imagen en la carpeta en donde se encuentre guardado el sitio web.

Sin embargo, en caso de que el archivo esté ubicado en otra carpeta del sistema del equipo, se va a tener que agregar la ruta de forma completa del archivo.

  1. Por último, sólo queda guardar el archivo HTML, y listo.

Sin embargo, existe otro aspecto de dicho procedimiento, y este se representa cuando el usuario desea visualizar el archivo HTML, por lo que deberá abrirlo en un servidor de web haciendo clic con su botón del ratón derecho sobre el archivo de Index Html y así seleccionar la opción de abrir utilizando el navegador de web que se desea.

Así mismo, si cuando el usuario ha abierto su navegador la imagen no se observa, el usuario tiene que asegurarse de que el nombre de la imagen se encuentre escrito de forma correcta en la ventana del editor de texto en donde se ha creado el Index.

No obstante, si al momento de haber abierto el navegador en vez de reflejarse la imagen seleccionada se observa el código de HTML, esto significa que el archivo de Index se ha guardado como un tipo de documento de texto que está enriquecido, por lo que tiene que probar el editar el código HTML con otro editor

  1. Se deberá editar el archivo, en la ventana del editor de texto, para esto se coloca el cursos en las etiquetas que se reflejen y seguidamente el usuario va a tener que actualizar su ventana de navegador para que logre ver si se refleja el texto por encima de la imagen de fondo.
  2. El usuario tiene que utilizar las etiquetas de CSS y HTML, debido a que HTML se compone de distintas etiquetas de cierre y apertura, que se representan por las de “Body” la cual es la etiqueta de apertura del cuerpo de la página y la segunda “/Body” que representa la etiqueta del cierre.

En Html toda etiqueta de apertura cuenta con sus correspondientes etiquetas de cierre para que así la página se logre demostrar de forma correcta.

  1. El usuario va a tener que utilizar cada etiqueta de título, por lo que la primera etiqueta se puede observar de forma “Title” ya que aparece en la barra de título en la ventana del navegador del usuario y a su vez se podría llegar a demostrar en toda pestaña del navegador que se esté utilizando.
  2. Posteriormente, el usuario tendrá que aprender a utilizar su etiqueta de estilo, debido a que esta es la segunda etiqueta que se representa como “Style” y que a su vez logra indicar la presencia del código de CSS, por lo que todo lo que se encuentre ubicado entre 2 etiquetas de Style se podría decir que es un código de CSS.

¿Cómo insertar Gráficos?

Esto es algo sencillo, debido a que para que los usuarios logren incluir un tipo de grafico en su documento de HTML, deberán usar la directa de “IMG” en donde se deberá incluir un parámetro del URL, por lo que se le indicará al usuario donde se encuentra el fichero con el grafico concreto que se desea para el documento.

No obstante, existe un tipo de parámetro optativo de la misma directiva de IMG que podría llegar a servir para lograr proponer un peculiar texto alternativo a otro grafico, por lo que el texto aparecería cuando se encuentre en uso para leer el HTML que seria un programa sin capacidad grafica alguna.