Consulte el siguiente material para aprender el funcionamiento de nuevos atributos para manipular las imágenes en una página web. Realice los apuntes respectivos en su cuaderno:
https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
Cree una carpeta Taller 4 y guarde en ella 3 imágenes descargadas de internet a su gusto, de un tamaño aproximado por dimensiones a 1000 pixeles. Cambie el nombre a las imágenes de ser necesario, para facilitar su trabajo.
Inicie un código en HTML5 desde cero, en el bloc de notas, para el tema Imágenes con HTML, que lleve un título principal como este, algo similar en el <title> para el texto de la pestaña y un subtítulo de segundo nivel que diga: Texto alternativo.
Aquí sería bueno guardar y verificar el funcionamiento del código. No olvide digitar al final las etiquetas de cierre de cuerpo y cierre de código de una vez. El nombre del archivo será Taller 3 de HTML (no olvide digitar también la extensión html).
Trabaje una de las imágenes para ejemplificar el uso del atributo "alt" así: con un subtítulos de tercer nivel que diga: Imagen normal (e inserte la imagen sin el atributo "alt") y luego otro subtítulo de tercer nivel que diga: Ejemplo de imagen con texto alterno (e inserte la imagen con el uso del atributo "alt" pero digitando mal el nombre de la imagen, para que la imagen no se cargue, pero si muestre el texto alternativo asignado - como lo explica la lectura que se realizó al comienzo de la clase).
Ahora trabaje otro subtítulo de segundo nivel que diga: Atributos Height y width para las dimesiones de la imagen.
Trabaje la segunda de las imágenes para utilizar y ejemplificar el uso de los atributos "height" y "width". Use subtítulos de tercer nivel que digan: Imagen normal (e inserte la imagen sin modificar su tamaño), Primer cambio de tamaño (inserte la misma imagen, pero disminuyendo sus dimensiones a la mitad), Segundo cambio de tamaño (la misma imagen, pero reduciendo nuevamente sus dimensiones a la mitad). Debajo de cada imagen debe ir sus dimensiones en pixeles, Ancho y Alto.
Ejemplo: si la imagen es de dimensiones 1300 x 100, la primera imagen reducida quedaría en 650 x 500 y la tercera imagen quedaría en 325 x 250.
El siguiente subtítulo de segundo nivel dirá: Uso del atributo Title para imagen.
Trabaje la tercera imagen de tal forma que quede un texto que la identifique sobre ella. Ese texto se hace visible en la página cuando mueve el cursor de ratón sobre la imagen.
Para finalizar marque su trabajo con nombre completo y curso, como se ha venido haciendo en los talleres anteriores.
Cuando termine y verifique que todo funciona bien, envíe al correo de la asignatura, la página web creada y las 3 imágenes adjuntas.
No hay comentarios:
Publicar un comentario
Regístrate y realiza tu comentario