Antes de empezar, asegúrate de copiar nuestras imágenes más pequeñas en tu york_images carpeta de imágenes, como se explicó anteriormente. Debería haber ser 5 de estos en los archivos que descargaste para este curso: (Si no tienes los archivos extra aún, la ubicación de la descarga está aquí, bajo el título Web Diseño - Nuevo Curso : Descargue el Archivos extra necesarios para este curso (No necesitas las descargas para el curso antiguo.)

york_minster.jpg
york_minster_2.gif
york_minster_3.gif
york_minster_4.gif
york_minster_5.gif

Las más pequeñas son todas imágenes GIF.

En HTML5, la alineación de la imagen se hace usando CSS. Sin embargo, si sólo quieres una básica la alineación izquierda, derecha o central, entonces la etiqueta DIV es bastante útil. La etiqueta DIV es una etiqueta de uso múltiple. Es algo así como la etiqueta P en la que obtienes un salto de línea después de que lo uses.

Para ver la etiqueta DIV en acción, modifica tu código HTML a esto (nos hemos perdido la etiqueta DOCTYPE en la parte superior):

Imágenes y CSS

Aquí, estamos usando un par de etiquetas DIV. Después de un espacio, hemos añadido el atributo ALIGN="correcto". Esto se aplicará a cualquier cosa entre la apertura y el cierre de las etiquetas del DIV. Para nosotros, este es el segundo de los Imágenes GIF de la catedral de York.

Guarda tu trabajo y recarga la página web en tu navegador. Deberías ver esto:

Imágenes y CSS

Los otros dos valores horizontales para el atributo ALIGN son la izquierda y el centro (Ortografía americana). Pruébelos borrando "correcto" y reemplazando primero con la izquierda, luego con el centro. Guarda tu trabajo y mira los resultados en tu navegador. (Si sólo quieres la alineación a la izquierda entonces no necesitas las etiquetas DIV en absoluto, porque la izquierda es la alineación por defecto).

El atributo ALIGN también puede ser usado con la etiqueta P:

P ALIGN ="centro"=;

img src="https://www.homeandlearn.co.uk/WD/york_images/york_minster.jpg">

De nuevo, esto se aplicará a cualquier cosa entre las dos etiquetas, incluyendo el texto.

Ahora agrega un poco de texto arriba y abajo de las dos etiquetas DIV:

Imágenes y CSS

Cuando guardes tu trabajo y veas los resultados, deberías ver esto con una izquierda imagen alineada:

Imágenes y CSS

Fíjate que las etiquetas del DIV han puesto algo de espacio encima y debajo de sí mismo: no necesitan añadir una etiqueta P para el texto. Pero puedes si quieres, siempre es bueno... practica para tener tu texto entre las etiquetas P.

En la próxima lección, verás cómo envolver el texto alrededor de una imagen con CSS.

Atributos de las imágenes | Envoltura de texto con CSS;