Con el propósito de exponer un gráfico con
dimensiones diferentes al original, especificaremos con precisión el tamaño a
una imagen en un documento HTML, según las recomendaciones oficiales de este
lenguaje.
Por falta de dominio para
modificar el tamaño de una imagen en la presentación, en ocasiones el creador
de páginas web pasa largas horas en
editarlas, mediante un software profesional.
Por tal razón, aplicaremos las etiquetas de HTML para redimensionar imágenes,
procedimiento también utilizado para otros elementos.
Según el tipo de página web, es favorable tener la oportunidad
de cambiar el tamaño a las imágenes, para definir el área exacta a ocupar en la
pantalla del usuario, independientemente de las dimensiones originales. Cuando
se refiere a tamaño de imagen, existen dos definiciones:
- El ocupado
en la pantalla de un dispositivo, también denominado dimensión.
- El espacio
o número de bytes ocupado en la
memoria donde se encuentra almacenado.
Mediante width y height, es
posible especificar diferentes dimensiones a una imagen, independientemente de
su tamaño original. Para ello:
- Abrimos la
instrucción con la etiqueta img.
- Especificamos
la ubicación de la imagen con src.
- Delimitamos
el alto de la imagen en pantalla con width.
- Agregamos
el ancho de la imagen en pantalla con height.
En la siguiente imagen tenemos un
ejemplo:
061-01_1107_ilu01. Especificación de atributos
width y height
Un píxel es el punto más pequeño
de una imagen, la cual es mostrada por equipos digitales. La nomenclatura para
representarlo es px. En este sentido,
1000 píxeles es un megapíxel. Es importante conocer estos conceptos, a fin de
manejar y referirnos a una imagen adecuadamente.
Si la imagen original tiene una dimensión
de 225 px por 225 px, tal es el tamaño mostrado por el navegador web cuando se omiten los atributos width y height. Por este motivo, es importante saber las dimensiones de una
imagen, y para ello seguimos los siguientes pasos, correspondientes al sistema
operativo Windows:
- Hacemos clic
derecho en la imagen.
- Seleccionamos
la opción propiedades.
- Verificamos
el tamaño en disco.
- Ubicamos la
pestaña Details, para identificar cuántos
píxeles abarca la imagen.
061-01_1107_ilu02. Identificación del tamaño
de una imagen
Para ver la diferencia, en el
código HTML siguiente están especificadas dos imágenes, una sin width y height, y la otra con atributos de tamaño menor al de la imagen original,
previamente consultada. Mediante la vista del usuario, aunque las imágenes
originalmente tienen el mismo número de píxeles, notamos la segunda con un
menor tamaño, debido a los píxeles indicados en width y height.
061-01_1107_ilu03. Comparación de imagen
con y sin width y height
El tamaño y dimensión de una
imagen cambian su significado depende del concepto. Por tanto, es importante
tomar en consideración la referencia a dos aspectos diferentes, ocupación en el
disco o en la pantalla.
Keynotes
- Según el tipo de página web, es favorable tener la oportunidad de cambiar el tamaño a las
imágenes, para definir el área exacta a ocupar en la pantalla del usuario,
independientemente de las dimensiones originales.
- Cuando se refiere a tamaño de imagen,
existen dos definiciones: El ocupado en la pantalla de un dispositivo, también
denominado dimensión. El espacio o número de bytes ocupado en la memoria donde se encuentra almacenado.
- Mediante width y height, es posible
especificar diferentes dimensiones a una imagen, independientemente de su
tamaño original.
- Si la imagen original tiene una dimensión de
225 px por 225 px, tal es el tamaño mostrado por el navegador web cuando se omiten los atributos width y height. Por este motivo, es importante saber las dimensiones de una
imagen.
- El tamaño y dimensión de una imagen cambian
su significado depende del concepto. Por tanto, es importante tomar en
consideración la referencia a dos aspectos diferentes, ocupación en el disco o
en la pantalla.
RetoCrea una lista de pasos para especificar el tamaño
a una imagen en un documento HTML, sin afectar el original, según las
recomendaciones oficiales de este lenguaje.
¡Comparte el resultado final del reto en tu vPages y pide a tres compañeros un
comentario para optimizar tu lista de pasos!
Tiempo disponible: entre 15 y 30 minutos.
CierreA través de la especificación de tamaño a una
imagen en un documento HTML, según las recomendaciones oficiales de este
lenguaje, optimizamos el tiempo al momento de manipular gráficos, pues no
requeriremos de un software profesional de edición. Exponemos un gráfico con
dimensiones personalizadas sin afectar el original. Con paciencia, será un
trabajo sencillo la organización de información en una página web.
