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="https://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="https://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)

Cursos Informática Gratuitos

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