Cómo insertar una imagen con HTML

Dale vida a tus sitios web agregándoles imágenes. Puede insertar imágenes en archivos HTML usando el etiqueta, que utiliza para especificar la ubicación de la imagen en Internet, el alto y el ancho de la imagen y el texto alternativo que aparece si la imagen no se carga o si alguien usa un lector de pantalla para ver la página. Los tres tipos de archivos de imagen comunes que se usan en la Web son GIF, PNG y JPEG.

Paso 1

Abra el archivo HTML de la página web a la que desea agregar una imagen en un editor de texto como el Bloc de notas o un software de desarrollo web.

Paso 2

Agregar un etiqueta al archivo. Coloque la etiqueta después del elemento bajo el que desea que aparezca una imagen cuando se abra el archivo HTML en un navegador. La etiqueta no tiene una etiqueta de cierre separada. Dentro de la etiqueta, debe especificar la fuente de la imagen que desea mostrar escribiendo la ubicación de la imagen en Internet con el src atributo. Si la imagen está almacenada en la misma carpeta que el archivo HTML, escriba el nombre y la extensión de la imagen. Si la imagen está almacenada en otro lugar, escriba la URL completa de la imagen.

Paso 3

Agrega el alt atribuya a su etiqueta. En HTML5, se requiere el atributo alt. Utilice este atributo para describir la imagen en caso de que no se pueda cargar. Si una imagen no se puede cargar, el navegador muestra el texto que ingresa después del atributo alt. Además, el atributo alt es importante para el software de lectura de pantalla que utilizan las personas con discapacidades visuales. El software lee el texto en el atributo alt para que la persona con una discapacidad visual que ve su sitio web pueda escuchar lo que hay en la imagen aunque no pueda verlo.

Paso 4

Especifique las dimensiones de la imagen en píxeles con la altura y ancho atributos Si no especifica las dimensiones, el navegador no sabe cuánto espacio dejar para la imagen a medida que se carga la página. Esto da como resultado que una página se cargue entrecortadamente, ya que el texto se carga primero, dejando un pequeño espacio para la imagen, luego se separa cuando la imagen se carga y hace que el espacio se expanda. Con las dimensiones especificadas, el navegador deja exactamente la cantidad correcta de espacio entre los otros elementos de la página para que la imagen se rellene cuando haya terminado de cargarse.

Paso 5

Pruebe su código para asegurarse de que la imagen se muestre en la ubicación correcta abriendo su archivo HTML en un navegador.

Consejo

Usa CSS para mover una imagen hacia el lado izquierdo o derecho de la pantalla o hacer que el texto la rodee. Por ejemplo, puede usar style="float:left;" o estilo ="flotador:derecho;" dentro de la etiqueta.

Si no conoce tanto el alto como el ancho de una imagen, está bien usar solo el atributo de alto o ancho. También puede usar CSS para especificar la altura y el ancho; por ejemplo, con una imagen de 100 por 100 píxeles, use el atributo de estilo:estilo="alto:100px;ancho:100px".

Convierta la imagen en un enlace en el que se pueda hacer clic colocando la etiqueta dentro de un par de etiquetas "a href". Por ejemplo, si desea que una imagen se vincule a Facebook, escriba lo siguiente.

Advertencia

No uses el atributo alt para intentar impulsar el SEO de tu página. Los motores de búsqueda saben desde hace tiempo que algunos diseñadores web intentan rellenar el atributo alt con palabras clave adicionales y, por lo tanto, ignoran el texto del atributo alt.