Cómo agregar una imagen en HTML
Agregar una imagen en una página HTML es una tarea relativamente sencilla. Esto hará una gran diferencia en los resultados de la página (en términos de atractivo) y es una extensión necesaria del código HTML.
Cómo agregar una imagen HTML
Uno puede agregar una imagen a una página HTML mediante el uso de la etiqueta
De modo que el elemento src recibe como valor el nombre y extensión de la imagen a agregar.
Usar atributos
Además de la etiqueta
alt– Un valor de texto a ser mostrado si la imagen no puede ser mostrada.height– Un valor numérico que especifica la altura de la imagen.width– Un valor numérico que especifica el ancho de la imagen.style– Una etiqueta de estilo cuyo valor es una cadena con reglas de estilo CSS.
Tener estos atributos en cuenta ayudará a crear una página web atractiva e intuitiva con la información pertinente a la imagen.
Además, el uso de atributos y etiquetas en HTML para agregar imágenes es Cómputo Web recomendable para cumplir con los estándares de accesibilidad.
Cómo Agregar una Imagen en HTML
1. Cree una imagen en formato web.
Para que una imagen se pueda cargar en una página web, primero debe estar en uno de los formatos web comunes, como se muestra a continuación: JPEG, GIF, PNG. Si la imagen no se encuentra en uno de estos formatos, necesitas convertirla.
2. Suba el archivo de imagen a un servidor web.
Una vez que tengas la imagen lista en alguno de los formatos aceptables, necesitas subirla a un servidor web. Un servidor web es una computadora que hospeda archivos para que otros usuarios los descarguen. Puedes alojar tus propias imágenes en un servidor web que hayas creado o contratar a un tercero para alojarlas.
3. Inserte el código necesario para la imagen en una página web.
Una vez que hayas subido la imagen a un servidor web, debes insertar el código HTML necesario para cargar la imagen en la página web a través de un navegador. El código básico para mostrar una imagen es el siguiente:
4. Altere los atributos de la imagen según sea necesario.
Además de añadir el código básico mencionado anteriormente, también puedes modificar los atributos de la imagen para ajustar los bordes, el tamaño, etc. algunos de los atributos modificadores más comunes son los siguientes:
- border: Establece el ancho del borde alrededor de la imagen (en píxeles)
- hspace: Establece el espacio horizontal entre los bordes de la imagen y el resto del contenido de la página (en píxeles)
- vspace: Establece el espacio vertical entre los bordes de la imagen y el contenido de la página (en píxeles)
- align: Establece la alineación de la imagen con respecto a otros elementos de la página
5. Guarde y actualice la página web.
Una vez que hayas hecho los cambios, guárdalos y actualiza la página web para ver cómo se carga la imagen.
Si hay algún problema con la carga de la imagen, el código HTML o el servidor web, puedes modificar tus cambios o contactar al proveedor de hosting para ver qué pueden hacer para ayudar.
Cómo agregar una imagen en HTML
Agregar imágenes en HTML es relativamente sencillo, lo primero es tener la imagen y saber su ubicación (url).
Pasos a seguir para insertar una imagen en un documento HTML
- Abra el editor de código fuente: Esto significa que tenemos que iniciar un editor de código HTML como «Notepad», «Dreamweaver» o «Text Wrangler».
- Identifique la ubicación de la imagen: La ubicación de la imagen puede ser una url (uniform resource locator) o una dirección en un servidor web. La ubicación puede ser absoluta o relativa.
- Escriba el código: Necesitamos añadir la etiqueta img en el código HTML. Esta etiqueta se escribe de la siguiente manera:
- Guarde el archivo: Guarde el archivo con la extensión «.html», para que el navegador reconozca el contenido y lo muestre correctamente en la página web.
Ahora la imagen ya está lista para ser vista. Un ejemplo de cómo quedaría el código en HTML es el siguiente:
Esperamos que con esta pequeña guía aprenda a cómo insertar una imagen utilizando el lenguaje de programación HTML. Cualquier duda puede ponerse en contácto en nombre@dominio.com.