Unidad 4. Ejercicio: Listas desordenadas

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 2: Listas desordenadas

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> 
  <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>

Vamos a sustituir este primer párrafo por una lista desordenada: <p><a href="excel1.html">Atrás</a> <a href="index.html">Índice</a> <a href="excel2.html">Adelante</a></p>
Para ello escribimos el siguiente código:

<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>

Vemos que, por defecto, delante de cada elemento se pone un disco o punto negro. Podemos cambiar este marcador modificando la propiedad list-style-type . Para ello modificaremos la hoja de estilos que creamos en el archivo excel.css de la carpeta ejercicios/curso-excel/css, este es el código que contiene:

/* CSS Hoja de estilo. excel.css */
a:link {
    color:darkgreen;
    text-decoration: none }
a.:visited {
    color: red }
a:hover { 
    color: darkviolet;
    font-weight: bold }
a:active { 
    color: yellowgreen; }

Ahora añadiremos el selector <ul> e indicaremos que no queremos que aparezca nada delante de cada elemento de la lista con este código: ul {list-style-type: none }

Por lo tanto el archivo excel.css queda con este código:

/* CSS Hoja de estilo. excel.css */
a:link {
    color:darkgreen;
    text-decoration: none }
a.:visited {
    color: red }
a:hover { 
    color: darkviolet;
    font-weight: bold }
a:active { 
    color: yellowgreen; }
ul {
    list-style-type: none
}

Pulsa en el menú Archivo y elige Guardar para los dos archivos que hemos modificado. 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