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.
Agrega una 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.
Añade el alt atributo 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 utilizado por 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.
Especifique las dimensiones de la imagen en píxeles con el altura y ancho atributos. Si no especifica las dimensiones, el navegador no sabe cuánto espacio dejar para la imagen mientras se carga la página. Esto da como resultado una página que se carga 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 complete cuando haya terminado de cargarse.
Pruebe su código para asegurarse de que la imagen se muestre en la ubicación correcta abriendo su archivo HTML en un navegador.
Utilice CSS para mover una imagen al lado izquierdo o derecho de la pantalla o hacer que el texto se ajuste a su alrededor. Por ejemplo, puede usar style = "float: left;" o style = "float: right;" dentro de la etiqueta.
Si no conoce el alto y el ancho de una imagen, está bien usar solo el atributo alto o ancho. También puede utilizar CSS para especificar la altura y el ancho; por ejemplo, con una imagen de 100 x 100 píxeles, utilice el atributo de estilo: style = "height: 100px; ancho: 100px ".
Convierta la imagen en un enlace en el que se puede 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.
No utilice el atributo alt para intentar impulsar el SEO de su página. Los motores de búsqueda saben desde hace mucho 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.
