Ayuda ejercicios unidad 5: Imágenes



Ejercicio 1: Practicar con imágenes

El archivo index.html debe quedar con el código que ves a continuación:

<!doctype html>
	  <html lang="es">
	  <head>
	  <meta charset="utf-8" />
	  <title>aulaClic. Cursos gratis</title>
	  <link rel="stylesheet" type="text/css" href="css/aulaclic.css" />
	  </head>
	  <body>
	  <a href="http://www.aulaclic.es">
	  <picture>
	  <source media="(orientation: portrait) and  (max-width: 500px)" srcset="graficos/logo_aulaclic_pequeno.png" >
	  <img src="graficos/logo_aulaclic.png" alt="logo aulaClic">
</picture> </a> <p>La primera web en español sobre cursos de informática gratis on-line.</p> <ul> <li><h2>Cursos de aulaClic</h2></li> <ol> <li>Access 2016</li> <li>Excel 2016</li> <li>Internet</li> <li>Windows</li> </ol> <li><h2>Cursos de colaboradores</h2></li> <ol start="5"> <li>autoCAD 2015</li> <li>Estadística con Excel</li> <li>Joomla</li> </ol> </ul> <hr> <p><a href="http://www.aulaclic.es/portada/Política_cookies.html" target="_blank"> <b>Política de cookies</b></a> </p>
</body> </html>

Observa que hemos sustituido la etiqueta img por la etiqueta picture con la condición (orientation: portrait) and (max-width: 500px) que indica que la orientación ha de ser portait (vertical) y el ancho de la ventada como máximo de 500 px, en ese caso se mostrará la imagen logo_aulaclic_pequeno.png.

Puedes ver el resultado en este enlace, comprueba como cambia la imagen al hacer pequeña la ventana: index.html

También puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.


Enero-2019 (V 2.0)
Atrás Volver Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.