Unidad 5. Ejercicio: Imágenes. Etiqueta PICTURE

En este ejercicio practicaremos con imágenes. Antes de realizar este ejercicio debes haber hecho los ejercicios paso a paso anteriores o copiar el código que se muestra a continuación del archivo excel1.html.

Ejercicio 2: Imágenes. Etiqueta <picture>

Desde el editor Brackets abre el archivo excel1.html de la carpeta ejercicios/curso-excel, que creamos en los ejercicios anteriores. Debes tener este código:

<!doctype html>
        <html>
        <head>
  <meta charset="utf-8" />
  <title>Curso de Excel 2016</title>
  <link rel="stylesheet" type="text/css" href="css/excel.css" />
  </head>
  <body>
  <ul>
  <li><a href="excel1.html">Atrás</a></li>
  <li><a href="index.html">Índice</a></li>
  <li><a href="excel2.html">Adelante</a></li>
  </ul>
  <h1 id ="top">Unidad 1. Introducción</h1>
  <p>Excel es un programa del tipo &nbsp;&nbsp;Hoja de Cálculo&nbsp;&nbsp; que permite realizar operaciones con números organizados en una <q>cuadrícula</q>.</p>
  <p><img src="graficos/logo-Excel.png" width="112" height="112" alt="Logotipo de Excel" title="Hoja de cálculo Excel"></p>
    <p> Es útil para realizar desde simples sumas hasta cálculos de préstamos hipotecarios.</p>
  <h2>1.1. Novedades de Excel</h2>
  <p>Esta versión de <strong>Excel 2016</strong> trae las siguientes novedades y mejoras.</p>
  <ol>
  <li> Nuevos tipos de gráficos.</li>
  <li> Nuevos estilos predeterminados.</li>
  <li> Mapas en tres dimensiones 3D.</li>
  </ol>
  <p>Iniciar Excel 2016</p>
  <p><a href="#top"><img src="graficos/icono_top.png"></a></p>
   <hr>
   <p><a href="https://www.aulaclic.es/index.htm" target="_blank"> &copy; aulaClic S.L.</a></p>
   </body>
   </html>

Que se verá así:
Detrás de la palabra hipotecarios escribimos " y facturas". A continuación vamos a incluir una imagen de una factura utilizando la etiqueta picture. Queremos incluir una imagen grande de una factura si el ancho de la ventana es mayor de 800 px., y que aparezca una imagen pequeña de la factura en otro caso, es decir cuando en ancho de la ventana es menor de 800 px. Las imágenes las tenemos en graficos/factura_grande.png y graficos/factura_pquena.png .El código será este:
```
<picture>
  <source media="(min-width: 800px)" srcset="graficos/factura_grande.png"/>
  <img src="graficos/factura_pequena.png"/>
</picture>
```
Pulsa en el menú Archivo y elige Guardar con el mismo nombre. Visualiza la página web desde el editor Brackets con el botón , observa como al hacer la ventana más pequeña de 800 px. aparece la imagen pequeña.
Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) 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