Unidad 4. Ejercicio: Listas ordenadas



En este ejercicio practicaremos con listas. 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 1: Listas ordenadas

  1. Desde el editor Brackets abre el archivo excel1.html de la carpeta ejercicios/curso-excel, que creamos en los ejercicios anteriores .
  2. Debes ver el siguiente código:
  3. <!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>
      <p><a href="excel1.html">Atrás</a> <a href="index.html">Índice</a> <a href="excel2.html">Adelante</a></p>
      <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>.<br />
        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>
      <p><b>1.-</b> Nuevos tipos de gráficos.</p>
      <p><b>2.-</b> Mapas en tres dimensiones 3D.</p>
      <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>
      
  4. Tenemos dos párrrafos que simulan una lista:
    <p><b>1.-</b> Nuevos tipos de gráficos.</p>/>
    <p><b>2.-</b> Mapas en tres dimensiones 3D.</p>

    Y que producen este resultado:

    1.- Nuevos tipos de gráficos.

    2.- Mapas en tres dimensiones 3D.


    Ahora los vamos a sustituir por una lisa ordenada utilizando la etiqueta <ol> .
    <ol>
    <li> Nuevos tipos de gráficos.</li>
    <li> Mapas en tres dimensiones 3D.</li>
    </ol>

    Que produce este resultado:

    1. Nuevos tipos de gráficos.
    2. Mapas en tres dimensiones 3D.
    Aunque el resultado que obtenos es muy similar, utilizar una etiqueta <ol> tiene varias ventajas, como ya vimos en la teoria de esta unidad. Por ejemplo, una ventaja es que al insertar un nuevo elemento en medio de la lista, el resto de elementos se renumeran automáticamente.
  5. Para comprobarlo añade este elemento en la segunda posición de la lista: <li> Nuevos estilos predeterminados</li>
  6. El resultado será este:

    1. Nuevos tipos de gráficos.
    2. Nuevos estilos predeterminados
    3. Mapas en tres dimensiones 3D.
    Este será el 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> 
      <p><a href="excel1.html">Atrás</a> <a href="index.html">Índice</a> <a href="excel2.html">Adelante</a></p> 
      <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>.<br /> 
        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="http://www.aulaclic.es/index.htm" target="_blank"> &copy; aulaClic S.L.</a></p> 
      </body> 
      </html>
  7. Pulsa en el menú Archivo y elige Guardar. Visualiza la página web desde el editor Brackets con el botón
  8. 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)
Volver






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.