Imágenes HTML
Imágenes HTML
Imágenes JPG
GIF Images
Imágenes PNG
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View"style="width:304px;height:228px;">
</body>
</html>
HTML Imágenes Syntax
En HTML, las imágenes se definen con la etiqueta ![]()
.
La etiqueta ![]()
está vacía, contiene solo atributos y no tiene una etiqueta de cierre.
El atributo src especifica la URL (dirección web) de la imagen:
<img src="url" alt="some_text"style="width:width;height:height;">
El atributo Alt
El atributo alt proporciona un texto alternativo para una imagen, si el usuario por algún motivo no puede verla (debido a una conexión lenta, un error en el atributo src o si el usuario usa un lector de pantalla).
Si un navegador no puede encontrar una imagen, mostrará el valor del atributo alt:
Ejemplo
<img src="wrongname.gif" alt="HTML5 Icon"style="width:128px;height:128px;">
El atributo alt es obligatorio. Una página web no se validará correctamente sin ella.
Lectores de pantalla HTML
Un lector de pantalla es un programa de software que lee el código HTML, convierte el texto y permite que el usuario "escuche" el contenido. Los lectores de pantalla son útiles para personas ciegas, con discapacidad visual o discapacidades de aprendizaje.
Tamaño de la imagen: ancho y alto
Puede usar el atributo de estilo para especificar el ancho y el alto de una imagen.
Los valores se especifican en píxeles (use px después del valor):
Ejemplo
<img src="html5.gif" alt="HTML5 Icon"style="width:128px;height:128px;">
Alternativamente, puede usar los atributos de ancho y alto . Aquí, los valores se especifican en píxeles de forma predeterminada:
Ejemplo
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Nota: especifique siempre el ancho y el alto de una imagen. Si no se especifican el ancho y el alto, la página parpadeará mientras se carga la imagen.
Ancho y alto, o estilo?
Los atributos de ancho, alto y estilo son válidos en HTML5.
Sin embargo, sugerimos usar el atributo de estilo. Evita que las hojas de estilos internas o externas cambien el tamaño original de las imágenes:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%; }</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon"style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Imágenes en otra carpeta
Si no se especifica, el navegador espera encontrar la imagen en la misma carpeta que la página web.
Sin embargo, es común almacenar imágenes en una subcarpeta. A continuación, debe incluir el nombre de la carpeta en el atributo src:
Ejemplo
<img src="/images/html5.gif" alt="HTML5 Icon"style="width:128px;height:128px;">
Imágenes en otro servidor
Algunos sitios web almacenan sus imágenes en servidores de imágenes.
En realidad, puede acceder a las imágenes desde cualquier dirección web del mundo:
Ejemplo
<img src="https://www.w3schools.com/images/w3schools_green.jpg"alt="W3Schools.com">
Imágenes animadas
El estándar GIF permite imágenes animadas:
Ejemplo
<img src="programming.gif" alt="Computer Man"style="width:48px;height:48px;">
Tenga en cuenta que la sintaxis de insertar imágenes animadas no es diferente de las imágenes no animadas.
Usando una imagen como un enlace
Para usar una imagen como enlace, simplemente anide la etiqueta ![]()
dentro de la etiqueta :
Ejemplo
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"style="width:42px;height:42px;border:0;">
</a>
Nota: borde: 0; se agrega para evitar que IE9 (y anterior) muestre un borde alrededor de la imagen (cuando la imagen es un enlace).
Flotación de la imagen
Utilice la propiedad de flotación de CSS para dejar que la imagen flote a la derecha o a la izquierda de un texto:
Ejemplo
<p><img src="smiley.gif" alt="Smiley face"style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face"style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Mapas de imágenes
Use la etiqueta Un mapa de imagen es una imagen con áreas seleccionables.
El atributo de nombre de la etiqueta
La etiqueta
Ejemplo
<img src="planets.gif" alt="Planets" usemap="#planetmap"style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury"href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus"href="venus.htm">
</map>
Resumen del capítulo
- Use el elemento HTML
para definir una imagen
- Use el atributo HTML src para definir la URL de la imagen
- Use el atributo HTML alt para definir un texto alternativo para una imagen, si no se puede mostrar
- Use los atributos HTML de ancho y alto para definir el tamaño de la imagen
- Utilice las propiedades de ancho y alto de CSS para definir el tamaño de la imagen (alternativamente)
- Utilice la propiedad de flotación de CSS para dejar flotar la imagen
- Use el elemento HTML para definir un mapa de imágenes
- Utilice el elemento HTML para definir las áreas clicables en el mapa de la imagen
- Utilice el atributo de uso de elementos HTML
para apuntar a un mapa de imágenes
Nota: cargar imágenes lleva tiempo. Las imágenes grandes pueden ralentizar su página. Usa imágenes cuidadosamente
Ponte a prueba con ejercicios!
Etiquetas de imagen HTML
| Tag | Description |
|---|---|
| Defines an image | |
| Defines an image-map | |
| Defines a clickable area inside an image-map |
Entradas más populares de este blog
Listado pasaporte y cedulas SAIME 2018
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime www.saime.gob.ve y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa da cumplimiento a la sép...
Etiqueta HTML < abbr >
Etiqueta HTML <abbr> ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The < abbr title ="World Health Organization" > WHO < /abbr > was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia: una abreviatura y un acrónimo son versiones abreviadas de otra cosa. Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo: El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere...
HTML < a > tag
HTML <a> día ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Un enlace a W3Schools.com: < a href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia: los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo: Normalmente,...