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

Desde el editor Brackets abre el archivo excel1.html de la carpeta ejercicios/curso-excel, que creamos en los ejercicios anteriores .
Debes ver el siguiente 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>
  <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>

Tenemos dos párrafos que simulan una lista:
```
1.- Nuevos tipos de gráficos./>
2.- Mapas en tres dimensiones 3D.
```
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 obtenemos es muy similar, utilizar una etiqueta <ol> tiene varias ventajas, como ya vimos en la teoría 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.
Para comprobarlo añade este elemento en la segunda posición de la lista: <li> Nuevos estilos predeterminados</li>

El resultado será este:

Nuevos tipos de gráficos.
Nuevos estilos predeterminados
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="https://www.aulaclic.es/index.htm" target="_blank"> &copy; aulaClic S.L.</a></p> 
  </body> 
  </html>

Pulsa en el menú Archivo y elige Guardar. Visualiza la página web desde el editor Brackets con el botón
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.2)

Cursos Informática Gratuitos

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