HTML significa lenguaje de marcado de hipertexto. El hipertexto define el vínculo entre las páginas en línea. Se utiliza para definir el documento de texto dentro de la etiqueta que define la estructura de los sitios web. Este lenguaje se usa para anotar texto para que una máquina pueda conocerlo y manipular el texto en consecuencia. La mayoría de los lenguajes de marcado (por ejemplo, HTML) son legibles por humanos. El lenguaje usa etiquetas para definir qué manipulación se debe hacer en el texto.
Para agregar una imagen en una página HTML, se usa la etiqueta <img> . Con eso, necesitamos usar el ancho y el alto del atributo de la imagen en píxeles. Especifique ambos atributos.
Sintaxis:
<img src="url" alt="some_text">
Atributo:
- src: El src significa fuente. Cada imagen tiene un atributo src que le dice al navegador dónde encontrar la imagen que desea mostrar. La URL de la imagen proporcionada apunta a la ubicación donde se almacena la imagen.
- alt: si la imagen no se puede mostrar, el atributo alt actúa como una descripción alternativa para la imagen. El valor del atributo alt es un texto definido por el usuario.
Configuración del ancho y el alto de la imagen: los atributos de ancho y alto se utilizan para especificar el ancho y el alto de una imagen. Los valores de los atributos se especifican en píxeles de forma predeterminada.
Sintaxis:
<img src="url" alt="some_text" width="" height="">
Nota:
- px: píxeles – píxeles (1px = 1/96 de 1 pulgada)
- en: pulgadas – pulgadas (1in = 96px = 2.54cm)
- pt: puntos – puntos (1pt = 1/72 de 1in)
Ejemplo 1: una imagen con una altura de 600 píxeles y un ancho de 500 píxeles. El atributo ancho especifica el ancho de una imagen, en puntos.
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GFG</h2> <p>Image with width and height in points</p> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png" alt="Welcome To GFG" width="60pt" height="80pt"> </body> </html>
Producción:
Ejemplo 2: Otro ejemplo para mostrar el uso de los atributos de ancho y alto . Hemos mencionado el ancho como 450 píxeles y la altura como 220 píxeles.
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GFG</h2> <h3>img tag with width and height attribute</h3> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png" alt="Welcome To GFG" width="450" height="220"> </body> </html>
Producción:
Ejemplo 3: Otro programa HTML para mostrar el uso de la etiqueta <img> con atributo de ancho y alto . En este código, hemos tomado el valor de alto y ancho como 250 píxeles.
HTML
<!DOCTYPE html> <html> <head> <title> Setting width and height attribute of image </title> </head> <body> <p> Image is inserted using width and height attribute in pixels. </p> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="GeeksforGeeks logo" width="250" height="250"> <p>Height of this image is 250 pixels</p> <p>Width of this image is 250 pixels</p> <p> Image is inserted using width and height attribute in points. </p> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="GeeksforGeeks logo" width="50pt" height="35pt"> <p>Height of this image is 50 points</p> <p>Width of this image is 35 points</p> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhi0709singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA