En HTML, ¿qué es una etiqueta de imagen?

Al crear una página web usando HTML, la etiqueta de imagen se usa para insertar una foto o gráfico en un lugar particular de la página. Hay muchas formas en que las imágenes se pueden usar en páginas web, desde agregar interés hasta ser utilizadas como una herramienta de navegación o para proporcionar información. También hay varios formatos diferentes de imágenes que se pueden usar. No importa cómo o qué imagen se agregue a la página web, siempre se requiere la etiqueta de imagen.

Para agregar una imagen, la etiqueta de la imagen se incluye donde desea que la imagen aparezca dentro de su página. Por ejemplo, si se insertara una imagen después de este párrafo, la etiqueta de imagen, o <img>, se agregaría al documento HTML después de este párrafo. La etiqueta <img> define todas las imágenes en HTML. Se conoce como una 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 agregara <img> 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 <img> 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. Como la imagen se está utilizando 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í: <img src = "URL" />.

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.wisegeek.com, la URL se reemplazaría con: <img src = "www.wisegeek.com/images/computer. jpg "/>. Cuando el navegador abre la página web, muestra la imagen donde se incluye la etiqueta de imagen.

La etiqueta de la imagen tiene otros atributos diferentes. Permiten al usuario ajustar el aspecto de la imagen en la página. Los siguientes atributos se usan 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, el texto alternativo se lee 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 un grosor que depende del número de píxeles indicado. Esto puede ser 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 la altura 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 arriba, abajo, medio, izquierda, derecha, 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.