Podemos usar diferentes fuentes y listas en un documento HTML. Del mismo modo, podemos agregar gráficos para que el documento se vea más atractivo. Los navegadores web admiten una serie de formatos gráficos. Algunos de los formatos más utilizados son:
- Formato de intercambio de gráficos (GIF): GIF es el mejor formato para mostrar imágenes diseñadas con un programa de gráficos. Este formato utiliza un máximo de 256 colores y una combinación de estos para crear más colores.
- Grupo de expertos fotográficos conjuntos (JPEG): JPEG es el mejor formato para fotografías, ya que contiene 1 millón de colores.
- Gráficos de red portátiles (PNG): el formato es mejor para imágenes con transparencia o con poca cantidad de colores.
Uso de la etiqueta <img>
La etiqueta <img> especifica una imagen que se mostrará en un documento HTML. Es un elemento ya que no tiene etiqueta OFF.
La etiqueta de imagen tiene los siguientes atributos en la tabla:
| Atributo | Descripción | Valores | Ejemplo |
| origen | Especifica la imagen de URL | URL | <img src=”pic1.jpg”> |
| alternativa |
Especifica el texto alternativo para una imagen. Esto se muestra cuando la función de gráficos está desactivada en el navegador o mientras La imagen se está descargando. En algunos navegadores, el texto ALT se muestra como información sobre herramientas para la imagen. |
texto | <img src=”pic1.jpg” alt=”Imagen no disponible> |
| altura | Especifica la altura de una imagen. | valor en píxeles | <img src=”pic1.jpg” height=”100″> |
| ancho | Especifica el ancho de una imagen. | Valor en píxeles | <img src=”pic1.jpg” ancho=”90″> |
El siguiente código HTML lo ayudará a comprender mejor la etiqueta <img>. La página web resultante se muestra en la salida.
Método 1: Insertar una imagen con CSS
HTML
<!DOCTYPE html>
<html>
<style>
image{border:4px solid orange; width: 120px;height: 100px;}
h1{text-transform:uppercase}
</style>
<head>
<title>
HTML frame scrolling Attribute
</title>
</head>
<body>
<h1>INSERTING IMAGE</h1>
<img src="5.png" alt="image is not available">
</body>
</html>
Producción:
Método 2: Insertar imagen sin el CSS
HTML
<!DOCTYPE html> <html> <head> <title> HTML frame scrolling Attribute </title> </head> <body> <h1>INSERTING IMAGE</h1> <img src="5.png" alt="image is not available" width="120px" height="100px"> </body> </html>
Producción:
Los navegadores compatibles son:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ysachin2314 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA