Al crear una página web usando HTML, la etiqueta de imagen se usa para insertar una foto o un gráfico en un lugar particular de la página. Hay muchas formas en que las imágenes se pueden usar en las páginas web, desde agregar interés hasta usarlas como una herramienta de navegación o para proporcionar información. También hay varios formatos diferentes de imágenes que se pueden utilizar. No importa cómo o qué imagen se agregue a la página web, la etiqueta de imagen siempre es necesaria.
Para agregar una imagen, la etiqueta de la imagen se incluye donde desea que aparezca la imagen dentro de su página. Por ejemplo, si se inserta una imagen después de este párrafo, la etiqueta de la imagen o , se agregaría al documento HTML después de este párrafo. La etiqueta define todas las imágenes en HTML. Se denomina etiqueta vacía, ya que contiene atributos y no tiene etiqueta de cierre. Los atributos son opciones que están disponibles para una etiqueta HTML específica.
si solo se agregaron a un documento HTML, no se mostraría nada ya que los atributos de la etiqueta no se han incluido. El atributo más importante para es «src», que significa fuente. El atributo src indica dónde se encuentra realmente el archivo de imagen, o es la dirección del archivo de imagen. A medida que la imagen se utiliza en una página web, la ubicación de la imagen se proporcionará como una URL. Dentro del documento HTML, la imagen se vería así: .
Específicamente, la URL apunta al lugar donde se almacena la imagen. Por ejemplo, si una imagen de una computadora con el nombre de archivo computer.jpg se almacenara en la carpeta de imágenes en www.Spiegato.com, la URL se reemplazaría por: . Cuando el navegador abre la página web, muestra la imagen donde se incluye la etiqueta de imagen.
La etiqueta de imagen tiene otros atributos diferentes. Permiten al usuario ajustar cómo se ve la imagen en la página. Los siguientes atributos se utilizan comúnmente para esta etiqueta: alt, border, size y align.
El atributo alt significa texto alternativo y se muestra si un navegador no puede mostrar una imagen. Además, se lee texto alternativo para aquellos usuarios que tienen problemas visuales y eligen mostrar texto sobre imágenes. Para el ejemplo anterior, el texto alternativo podría expresarse como alt = ”imagen de una computadora”.
El atributo de borde agrega un borde a la imagen con el grosor según la cantidad de píxeles indicada. Esto puede resultar especialmente útil cuando el fondo de la imagen y el fondo del sitio web son similares y se desea una distinción clara. Por ejemplo, border = ”10 ″ colocará un borde de 10 píxeles de grosor alrededor de una imagen.
Los atributos de tamaño también son importantes, ya que el ancho y el alto se pueden usar para especificar el tamaño exacto de una imagen. Estos atributos deben usarse con mucho cuidado, ya que cambiarlos puede afectar las proporciones o la calidad de la imagen mostrada. Los atributos de tamaño no cambian el archivo real, solo cómo lo muestra el navegador.
El atributo alinear especifica cómo se alinea la imagen en comparación con el texto de la página. Hay varias opciones diferentes para este atributo, incluyendo top, bottom, middle, left, right, absmiddle, absbottom, baseline y texttop. Estas etiquetas también ayudan a determinar cómo se alinea el texto de la página con la imagen.