Con la finalidad de especificar el lugar exacto para mostrar una ilustración,
posicionaremos una imagen con respecto al texto en un documento HTML, en base a
las recomendaciones oficiales de este lenguaje.
En algunos casos, los creadores de páginas web pasan largas horas en agregar de
forma ordenada, una imagen a una página web,
debido al desconocimiento de cómo ubicarla en una posición exacta. Por tal
razón, mediante etiquetas del lenguaje HTML, manipularemos imágenes y texto en
diferentes ubicaciones de la página web.
Cuando accedemos a diferentes
páginas desde un navegador web, las
imágenes incluidas son mostradas en diferentes posiciones y de forma ordenada, lo
cual se logra mediante instrucciones de los lenguajes HTML y CSS. Sin embargo,
es preciso tener presente la importancia de marcar la estructura de un
documento con el lenguaje HTML, y la presentación con el lenguaje CSS.
061-01_1105_ilu01. Diferentes posiciones de una imagen
Las etiquetas de HTML son de
bloque y lineales, y la imagen es de tipo lineal, por lo cual el navegador web la muestra en la misma línea del
texto. En el ejemplo, fue incrustada a mitad de este, y en el mismo lugar es
mostrada al usuario, como observamos en la ilustración.
061-01_1105_ilu02. Visualización de imagen
lineal
La etiqueta figure es estandarizada en la quinta versión de HTML, para agrupar
contenido gráfico, separándolo del resto de la información. En el siguiente
caso, envolvemos la imagen en la etiqueta figure
y, por este motivo, el texto se separa de la imagen. Visualmente, existen tres
bloques, los cuales marcamos en rojo; dos para el texto y uno para la imagen.
061-01_1105_ilu03. Visualización de
imagen con figure
Ahora bien, para mostrar la imagen
en la derecha de la pantalla, en el código HTML:
- Agregamos
la etiqueta img en el documento HTML,
con la ruta de la imagen.
- Creamos el
selector de imagen, con la etiqueta img
en el documento CSS.
- Definimos,
entre corchetes, la palabra float, la
cual en español es flotante.
- Agregamos,
como valor, right, cuyo significado
en español es derecho.
En la siguiente vista del usuario,
observamos cómo la imagen se muestra a la derecha de la pantalla, y a la
izquierda, el texto mostrado debajo de ella anteriormente.
061-01_1105_ilu04. Posicionamiento de imagen
a la derecha
Para mostrar la imagen a la
izquierda en el mismo ejemplo, modificamos la declaración realizada en el
documento CSS y, como valor flotante, definimos left, es decir, izquierdo en español. En la siguiente ilustración,
observaremos cómo la imagen se muestra en el lado izquierdo y el texto a la derecha.
061-01_1105_ilu05. Posicionamiento de
imagen a la izquierda
Debemos utilizar la etiqueta figure de HTML con el sentido semántico
para el cual fue creada. A los efectos del diseño visual, es posible crear el
selector de imagen en el documento CSS, agregar la propiedad display y, como valor, block, para luego posicionarlo en el
lugar deseado.
061-01_1105_ilu06. Especificación de propiedad display
Keynotes
- Es preciso tener presente la importancia de
marcar la estructura de un documento con el lenguaje HTML, y la presentación
con el lenguaje CSS.
- Las etiquetas de HTML son de bloque y
lineales, y la imagen es de tipo lineal, por lo cual el navegador la muestra en
la misma línea del texto.
- La etiqueta figure es estandarizada en la 5ta versión de HTML, para agrupar
contenido gráfico, separándolo del resto de la información.
- Debemos utilizar la etiqueta figure de HTML con el sentido semántico
para el cual fue creada. A los efectos del diseño visual, es posible crear el
selector de imagen en el documento CSS, agregar la propiedad display y, como valor, block, para luego posicionarlo en el
lugar deseado.
Misión
A fin de especificar con excelencia el lugar exacto
para mostrar una ilustración, posiciona una imagen con respecto al texto en un
documento HTML, en base a las recomendaciones oficiales de este lenguaje.
Pasos a seguir:
- Ubica el estándar oficial de HTML, y
lee las recomendaciones de la etiqueta figure.
- Ubica las recomendaciones de CSS, y
lee las recomendaciones de la propiedad display.
- Posiciona dos imágenes en un proyecto
llamado proyectoprueba.
- Muestra el proyecto a un experto mediante
vPages y toma nota de sus
sugerencias.
Sabrás que has tenido éxito cuando
el resultado de la ejecución del código en el navegador web este acorde con las especificaciones realizadas.
Modifica el código luego de las
recomendaciones y compártelo en tu vProfile.
Tiempo disponible: 3 horas.
Cierro
Gracias al posicionamiento de imágenes con respecto al texto en un documento HTML, optimizamos
el tiempo al momento de agregar, de forma ordenada, gráficos a una página web. Al seguir las recomendaciones
oficiales de este lenguaje, especificamos con excelencia el lugar exacto para
mostrar una ilustración. La paciencia y la organización son determinantes para
lograr armonía entre gráficos y textos, de forma profesional.
