Tag HTML img
Nota: Si no sabes lo que es un tag y/o cómo se debe utilizar, te recomendamos que leas nuestro tutorial "tags y atributos HTML" que puedes encontrar en nuestra sección de tutoriales HTML.
Descripción
El tag
HTML img inserta un archivo de imagen apuntado por el atributo "src", donde es definifo, aunque también puede ser declarado como "flotante". Es una mejor práctica lograr esto usando hojas de estilo en lugar del atributo desaprobado "align".
Atributos
El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en el documento y puede ser usado para referirse a ese elemento.
Ejemplo:
Code begin
<p id="parrafo1">Este es el primer párrafo nombrado parrafo1. Para cambiar dinámicamente las propiedades del mismo usa este identificador.</p>Code end
El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento está asociado. Una clase provee atributos visuales para los elementos.
Ejemplo:
Code begin
<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" por Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" por Jhon L. Brooks... y es más importante que el anterior.</p>Code end
Define un estilo visual para el elemento. Es una mejor práctica definir atributos en hojas de estilos externas agrupándolos en clases. Los atributos en el parámetro "style" deben preservar este orden "nombre : valor" y ser separados por un punto y coma.
Si estás escribiendo
código XHTML te recomendamos no utilizar este atributo y probar con las clases de hojas de estilo (con el atributo "class").
Ejemplo:
Code begin
<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido</p>
<p>Y este es otro texto sin estilo.</p>Code end
Indica un título para el elemento. Usado para dar una descripción acerca del elemento que es usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el elemento.
Ejemplo:
Código |
Visualización |
<a title="HTMLQuick.com" href="http://www.htmlquick.com">Código HTML</a> |
Código HTML |
Especifica el lenguaje del contenido de un elemento. El valor predeterminado es "desconocido".
Al escribir
código XHTML la sintaxis "xml:lang" representa una alternativa preferida en XHTML 1.0 y un reemplazo en XHTML 1.1 (por ejemeplo, xml:lang="en").
Ejemplo:
Code begin
<p lang="en">This is a paragraph in english.</p>
<p lang="es">Este es un párrafo en español.</p>Code end
dir
Especifica la dirección de texto del contenido y atributos del elemento, así como la direccionalidad de las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:
- RTL: Derecha a izquierda.
- LTR: Izquierda a derecha.
Ejemplo:
Code begin
<q lang="he" dir="rtl">...Una cita en Hebreo...</q>Code end
El atributo "alt" define un texto alternativo diseñado para servir como reemplazo textual para objetos que son usualmente no soportados por algunos navegadores. También sirve como información adicional para navegadores que si los soportan (imágenes, formularios y applets). Los navegadores pueden mostrar este texto en forma de "tool tip" cuando el mouse se encuentra sobre el objeto.
Este atributo es requerido al escribir
código XHTML.
Ejemplo:
Código |
Visualización |
<img width="88" height="31" src="http://www.htmlquick.com/es/img/links/button.jpg" alt="Botón de vínculo de HTMLQuick" /> |
 |
Especifica un nombre para el elemento, para referencias futuras (por ejemplo, hojas de estilos o JavaScript). Este atributo ha sido incluido por razones de compatibilidad y los autores deberían usar el atributo "id" en su lugar (especialmente para compatibilidad con
código XHTML).
ismap
Cuando este atributo booleano está presente, la imagen es definida como un mapa de imagen del lado servidor. La imagen también debe ser vinculada a un agente procesador (script) que manejará los datos enviados por el usuario. Cuando el usuario presiona el botón del mouse sobre la imagen, las coordenadas donde se ha presionado el botón son enviadas al agente procesador (funcionado como un formulario).
Recuerda que los atributos booleanos deben ser definidos en la forma nombre_atributo="nombre_atributo" para se compatibles con el
código XHTML.
usemap (uri)
Este atributo especifica el mapa de imagen al cual el elemento está relacionado. Para funcionar correctamente el atributo "usemap" de este elemento debe coincidir con el atributo "name" del
tag HTML map asociado.
Ejemplo:
Code begin
<img src="http://www.htmlquick.com/es/img/examples/nav1.jpg" usemap="#nav1" alt="Menú de navegación" /> Code end
align
Especifica la alineación del elemento. Estos tres valores establecen la posición del elemento respecto del texto circundante:
- bottom: Significa que el borde inferior del objeto debe alinearse verticalmente con la línea base actual. Este es el valor predeterminado.
- middle: Significa que el centro del objeto debe alinearse verticalmente con la línea base actual..
- top: Significa que el borde superior del objeto debe alinearse verticalmente con la línea base actual..
Estos dos valores establecen la posición de un elemento flotante:
- left: La imagen flota sobre el margen izquierdo.
- right: La imagen flota sobre el margen derecho.
Asigna un ancho al elemento.
Asigna una altura al elemento.
Especifica el ancho del borde del elemento.
Este atributo funciona como un margen para el elemento, definiendo la cantidad de espacio en blanco que debe insertarse a los lados derecho e izquierdo del elemento.
Este atributo funciona como un margen para el elemento, definiendo la cantidad de espacio en blanco que deberí ser insertado a los lados superior e inferior del elemento.
Eventos
- onclick
- ondblclick
- onmousedown
- onmouseup
- onmouseover
- onmousemove
- onmouseout
- onkeypress
- onkeydown
- onkeyup
Lista completa e información acerca de
eventos en HTML
Ejemplos
Uso común para el tag HTML img.
Código |
Visualización |
<p>Aquí hay una imagen que puedes utilizar para enlazarnos desde tu sitio:</p> <img src="../../img/links/button.jpg" alt="Logo de HTMLQuick.com" /> <p>Aquí hay un ejemplo de cómo utilizarla:</p> <a href="http://www.htmlquick.com"> <img width="88" height="31" src="../../img/links/button.jpg" alt="Aprende el código HTML" /></a> |
Aquí hay una imagen que puedes utilizar para enlazarnos desde tu sitio:
Aquí hay un ejemplo de cómo utilizarla:
 |