mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-28 03:12:25 +00:00
427 lines
16 KiB
HTML
427 lines
16 KiB
HTML
<?xml version="1.0" encoding="iso-8859-1"?>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
<html lang="es-es" xmlns="http://www.w3.org/1999/xhtml" xml:lang=
|
||
"es-es">
|
||
<head>
|
||
<meta content="text/html; charset=iso-8859-1" http-equiv=
|
||
"content-type" />
|
||
<title>
|
||
Estructura general - Listas
|
||
</title>
|
||
<link rel="stylesheet" href="../nvu2005.css" type=
|
||
"text/css" /><!-- compliance patch for microsoft browsers -->
|
||
<!--[if lt IE 7]> <script src="../ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
|
||
</head>
|
||
<body>
|
||
|
||
<div id="localizador">
|
||
<p>Estructura general - Listas</p>
|
||
|
||
</div>
|
||
<div id="flechadcha">
|
||
<a href="texto5.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
||
</div>
|
||
<div id="flechaizq">
|
||
<a href="pag1.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
||
</div>
|
||
|
||
<h2>
|
||
Listas ordenadas (numeradas) y desordenadas (con viñetas)
|
||
</h2>
|
||
<p>
|
||
Avanzaremos ahora un paso más en la panorámica sobre los
|
||
recursos para organizar y dar formato visual al texto.
|
||
</p>
|
||
<p>
|
||
Las listas nos van a servir para ir organizando la
|
||
información de acuerdo con alguno de los siguientes
|
||
formatos:
|
||
</p>
|
||
<table border="1">
|
||
<tbody>
|
||
<tr>
|
||
<th bgcolor="#CCE3FF">
|
||
Listas ordenadas
|
||
</th>
|
||
<th>
|
||
Listas desordenadas
|
||
</th>
|
||
<th bgcolor="#CCE3FF">
|
||
Listas de definición
|
||
</th>
|
||
</tr>
|
||
<tr>
|
||
<th bgcolor="#CCE3FF">
|
||
<br />
|
||
Los elementos se presentan numerados
|
||
</th>
|
||
<th>
|
||
<br />
|
||
Los elementos van precedidos por un "boliche"
|
||
</th>
|
||
<th bgcolor="#CCE3FF">
|
||
<br />
|
||
Presentan términos y definiciones con diferente
|
||
tabulación
|
||
</th>
|
||
</tr>
|
||
<tr>
|
||
<td bgcolor="#CCE3FF">
|
||
<ol>
|
||
<li>Elemento nº 1
|
||
</li>
|
||
<li>Elemento nº 2
|
||
</li>
|
||
<li>...
|
||
</li>
|
||
</ol>
|
||
</td>
|
||
<td>
|
||
<ul>
|
||
<li>Elemento nº 1
|
||
</li>
|
||
<li>Elemento nº 2
|
||
</li>
|
||
<li>...
|
||
</li>
|
||
</ul>
|
||
</td>
|
||
<td bgcolor="#CCE3FF">
|
||
<dl>
|
||
<dt>
|
||
Término nº 1
|
||
</dt>
|
||
<dd>
|
||
Definición del término 1
|
||
</dd>
|
||
<dt>
|
||
Término nº 2
|
||
</dt>
|
||
<dd>
|
||
Definición del término 2
|
||
</dd>
|
||
</dl>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>
|
||
<span class="flotder"><img alt=
|
||
"Iconos de tipo de lista y nivel de tabulación en la barra de formato"
|
||
title=
|
||
"Iconos de tipo de lista y nivel de tabulación en la barra de formato"
|
||
src="img/listas.png" height="61" width="482" /></span>
|
||
</p>
|
||
<p>
|
||
Veremos en primer lugar los dos primeros tipos, cuya única
|
||
diferencia estriba en el símbolo que precede a cada
|
||
elemento. Para iniciar la creación de este tipo de listas
|
||
basta pulsar el botón que las identifica en la barra de
|
||
formato.
|
||
</p>
|
||
<p>
|
||
También en la misma barra, tras los iconos de alineación
|
||
del texto, aparecen otros dos iconos que nos van a permitir
|
||
ir aumentando o disminuyendo los niveles dentro de la
|
||
lista. Llamamos nivel a la tabulación que se aplica a cada
|
||
ítem de la lista y que nos va a permitir establecer
|
||
visualmente las categorías y las dependencias de unos
|
||
elementos respecto a los otros.
|
||
</p>
|
||
<p>
|
||
La forma de introducir nuevos elementos en la lista, una
|
||
vez que la hemos empezado consiste sencillamente en pulsar
|
||
la tecla <img class="imgcentr" style=
|
||
"width: 22px; height: 24px;" alt="Intro" title="Intro" src=
|
||
"../imagenes/teclaintro.png" />, con lo que se añade a la
|
||
lista otro ítem del mismo nivel que el precedente. <i>(Si
|
||
queremos variar el nivel, hacia la derecha o hacia la
|
||
izquierda pulsaremos el icono correspondiente</i>
|
||
<span class="imgcentr"><img alt=
|
||
"Iconos de nivel de tabulación en la barra de formato"
|
||
title=
|
||
"Iconos de nivel de tabulación en la barra de formato" src=
|
||
"img/listasnivel.png" height="29" width="46" /></span> ).
|
||
</p>
|
||
<p>
|
||
Una forma muy sencilla para obtener un nivel situado más a
|
||
la derecha es la pulsación de la tecla <span class=
|
||
"imgcentr"><img alt="Tabulador" title="Tabulador" src=
|
||
"../imagenes/teclatab.png" height="23" width=
|
||
"34" /></span>. Para retornar al nivel precedente bastará
|
||
con una doble pulsación sobre<img class="imgcentr" style=
|
||
"width: 22px; height: 24px;" alt="Intro" title="Intro" src=
|
||
"../imagenes/teclaintro.png" />. Cuando nos encontramos en
|
||
el primer nivel de la lista esta doble pulsación servirá
|
||
también para finalizar la introducción de elementos en la
|
||
misma. También podemos volver a pulsar el botón con el que
|
||
la iniciamos, que hasta ese momento habrá permanecido
|
||
"presionado".<br />
|
||
</p>
|
||
<div class="practicas">
|
||
<img class="numact" style=
|
||
"width: 29px; height: 29px; float: left;" alt=
|
||
"Actividad 10" title="Actividad 10" src=
|
||
"../imagenes/numeracion/diez.gif" />
|
||
<ul>
|
||
<li>Abre una nueva pestaña del editor utilizando la
|
||
opción <span class="refmenu">archivo</span> <img class=
|
||
"refmenu" alt="opción" style="width: 14px; height: 13px;"
|
||
src="../imagenes/flechamenu.png" /> <span class=
|
||
"refmenu">nuevo</span> o el icono <img style=
|
||
"width: 58px; height: 40px;" alt="nuevo" src=
|
||
"../imagenes/botonnuevo.png" />
|
||
</li>
|
||
<li>Crea una lista numerada que esté formada por dos
|
||
elementos del primer nivel, de uno de los cuales colgarán
|
||
dos elementos de segundo nivel. (<i>Llamamos primer nivel
|
||
al que está más próximo al margen izquierdo y 2º, 3º o
|
||
sucesivos a los que se encuentran más alejados, en la 2ª,
|
||
3ª y sucesivas tabulaciones)</i>
|
||
</li>
|
||
<li>Cierra la lista y escribe un renglón de texto normal.
|
||
</li>
|
||
<li>Guarda el trabajo pulsando en el icono que tiene el
|
||
disquete con el nombre <strong>actividad10.html</strong>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="practicas">
|
||
<img class="numact" style=
|
||
"width: 29px; height: 29px; float: left;" alt=
|
||
"Actividad 11" title="Actividad 11" src=
|
||
"../imagenes/numeracion/once.gif" />
|
||
<ul>
|
||
<li>Volvemos a la ventana del editor en la que teníamos
|
||
el documento que acabamos de crear y seleccionamos todo
|
||
el contenido con el ratón. Borramos para dejar la página
|
||
en blanco.
|
||
</li>
|
||
<li>Creamos ahora una lista de viñetas con
|
||
características semejantes a la anterior. (Dos elementos
|
||
de primer nivel de uno de los cuales cuelgan dos
|
||
elementos de segundo nivel)
|
||
</li>
|
||
<li>Guardamos el trabajo como
|
||
<strong>actividad11.html</strong>, para lo que usaremos
|
||
la opción <span class=
|
||
"refmenu">archivo </span><img class="refmenu" alt=
|
||
"opción" style="width: 14px; height: 13px;" src=
|
||
"../imagenes/flechamenu.png" /> <span class=
|
||
"refmenu">guardar como</span>, y comprobamos los
|
||
resultados.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<h2>
|
||
Listas de definiciones
|
||
</h2>
|
||
<p>
|
||
Las listas de definiciones no tienen un icono específico
|
||
para su creación, aunque podemos emplear un truco para no
|
||
tener que recurrir a escribir las etiquetas a mano. Para
|
||
ello...
|
||
</p>
|
||
<p>
|
||
Habrá que recurrir al menú <strong class=
|
||
"refmenu">formato</strong><span class="refmenu"><img class=
|
||
"imgcentr" style="width: 14px; height: 13px;" alt="submenú"
|
||
title="submenú" src=
|
||
"../estilos/flechamenu.png" /></span><span class=
|
||
"refmenu">lista </span><span class="refmenu"><img class=
|
||
"imgcentr" style="width: 14px; height: 13px;" alt="submenú"
|
||
title="submenú" src=
|
||
"../estilos/flechamenu.png" />término</span> para el
|
||
término que deseamos definir y <strong class=
|
||
"refmenu">formato</strong><span class="refmenu"><img class=
|
||
"imgcentr" style="width: 14px; height: 13px;" alt="submenú"
|
||
title="submenú" src=
|
||
"../estilos/flechamenu.png" /></span><span class=
|
||
"refmenu">lista </span><span class="refmenu"><img class=
|
||
"imgcentr" style="width: 14px; height: 13px;" alt="submenú"
|
||
title="submenú" src=
|
||
"../estilos/flechamenu.png" /></span><span class=
|
||
"refmenu">definición</span> para la definición del mismo.
|
||
Comprobaremos que mientras que el título permanece alineado
|
||
en el margen izquierdo el texto salta a la primera
|
||
tabulación.
|
||
</p>
|
||
<div class="avisos">
|
||
<p>
|
||
<img style="width: 28px; height: 25px; float: left;" alt=
|
||
"Atención" src="../imagenes/atencion.gif" />Realmente no
|
||
será necesario especificar el salto entre el término y la
|
||
definición, ya que al indicar que un texto es un término
|
||
de una lista de definiciones la pulsación de la
|
||
tecla <img class="imgcentr" style=
|
||
"width: 22px; height: 24px;" alt="Intro" title="Intro"
|
||
src="../imagenes/teclaintro.png" /> hace que
|
||
automáticamente se genere la etiqueta para la definición
|
||
del mismo. Si necesitamos que la definición esté
|
||
compuesta por varios párrafos habría que pulsar
|
||
<span class="imgcentr"><img alt="Mayúsculas" title=
|
||
"Mayúsculas" src="../imagenes/teclamayusc.png" height=
|
||
"26" width="36" /></span> + <img class="imgcentr" style=
|
||
"width: 22px; height: 24px;" alt="Intro" title="Intro"
|
||
src="../imagenes/teclaintro.png" />.
|
||
</p>
|
||
<p>
|
||
Para finalizar una lista de este tipo podremos hacerlo
|
||
seleccionando <span class="refmenu">ninguno</span>en el
|
||
menú <strong class="refmenu">formato</strong><span class=
|
||
"refmenu"><img class="imgcentr" style=
|
||
"width: 14px; height: 13px;" alt="submenú" title=
|
||
"submenú" src=
|
||
"../estilos/flechamenu.png" /></span><span class=
|
||
"refmenu">lista </span><span class="refmenu"><img class=
|
||
"imgcentr" style="width: 14px; height: 13px;" alt=
|
||
"submenú" title="submenú" src=
|
||
"../estilos/flechamenu.png" />término</span> o, más
|
||
sencillamente, con una doble pulsación de la
|
||
tecla <img class="imgcentr" style=
|
||
"width: 22px; height: 24px;" alt="Intro" title="Intro"
|
||
src="../imagenes/teclaintro.png" /> tras completar la
|
||
última definición de la lista.
|
||
</p>
|
||
</div>
|
||
<div class="practicas">
|
||
<img class="numact" style=
|
||
"width: 29px; height: 29px; float: left;" alt=
|
||
"Actividad 12" title="Actividad 12" src=
|
||
"../imagenes/numeracion/doce.gif" />
|
||
<ul>
|
||
<li>Crea un documento que contenga tres términos con sus
|
||
correspondientes definiciones, como por ejemplo la
|
||
definiciones de carnívoros, herbívoros y omnívoros.
|
||
</li>
|
||
<li>Resalta utilizando la negrita cada uno de los
|
||
términos
|
||
</li>
|
||
<li>Si los párrafos quedan demasiado ajustados al margen
|
||
izquierdo puedes utilizar los botones de salto de nivel
|
||
para modificar su posición.
|
||
</li>
|
||
<li>Guarda el documento
|
||
como <strong>actividad12.html</strong> y comprueba el
|
||
resultado.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<h2>
|
||
Profundizando en las listas
|
||
</h2>
|
||
<p>
|
||
Habrás comprobado que en las listas con viñetas iba
|
||
variando la viñeta que precedía a cada uno de los niveles.
|
||
Sin embargo, en las numeradas vemos que los diferentes
|
||
niveles se van alineando con un mayor grado de tabulación a
|
||
la derecha, pero no cambian el símbolo que los precede. Es
|
||
posible que nos resulte útil para presentar la información
|
||
con mayor claridad que dicho símbolo se modifique en cada
|
||
nivel.
|
||
</p>
|
||
<p>
|
||
Vamos a verlo con un ejemplo práctico.
|
||
</p>
|
||
<div class="practicas">
|
||
<img class="numact" style=
|
||
"width: 29px; height: 29px; float: left;" alt=
|
||
"Actividad 13" title="Actividad 13" src=
|
||
"../imagenes/numeracion/trece.gif" />
|
||
<ul>
|
||
<li>Iniciamos la creación de una lista ordenada en la que
|
||
incluiremos tres ítems del primer nivel. En dos de ellos
|
||
añadiremos dos ítems de segundo nivel y en uno de estos
|
||
añadiremos un ítem de tercer nivel.
|
||
</li>
|
||
<li>Pulsamos el icono <img style=
|
||
"width: 41px; height: 39px;" alt="Navegar" src=
|
||
"../imagenes/iconavegar.png" /> y cuando nos informe de
|
||
que debemos guardar el archivo aceptamos y le damos el
|
||
nombre <strong>actividad13.html</strong>
|
||
</li>
|
||
<li>Comprobamos en el navegador cómo todos los niveles
|
||
llevan el mismo tipo de numeración.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="practicas">
|
||
<img class="numact" style=
|
||
"width: 29px; height: 29px; float: left;" alt=
|
||
"Actividad 14" title="Actividad 14" src=
|
||
"../imagenes/numeracion/catorce.gif" />
|
||
<ul>
|
||
<li>Vuelve al editor para seguir trabajando con el
|
||
archivo <strong>actividad10.html</strong> si lo habías
|
||
cerrado.
|
||
</li>
|
||
<li>Pulsa con el botón derecho sobre uno de los párrafos
|
||
del segundo nivel (vale cualquiera).
|
||
</li>
|
||
<li>Elige <span class="refmenu">propiedades de
|
||
lista</span> y selecciona en el campo <span class=
|
||
"refmenu">estilo de número</span> las letras mayúsculas.
|
||
<i>(Comprueba cuáles son los niveles que se han visto
|
||
afectados por el cambio)</i>
|
||
</li>
|
||
<li>Modifica el tercer nivel eligiendo letras minúsculas
|
||
y salva el trabajo
|
||
como <strong>actividad14a.html</strong> para poder verlo
|
||
en el navegador.
|
||
</li>
|
||
<li>Acaba de modificar la lista para que todos los
|
||
elementos de segundo nivel aparezcan precedidos por
|
||
letras mayúsculas.
|
||
</li>
|
||
<li>Puedes realizar un trabajo similar con una lista de
|
||
viñetas y salvarlo
|
||
como<strong> </strong><strong>actividad14b.html</strong>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<p>
|
||
Es posible que la práctica anterior te haya suscitado
|
||
algunas dudas acerca del comportamiento de los cambios de
|
||
numeración cuando las condiciones de la lista se hacen algo
|
||
más complejas... ¡Ánimo, dale rienda a tu espíritu de
|
||
investigación!
|
||
</p>
|
||
<p>
|
||
Vamos a ver ahora otra posibilidad interesante: combinar
|
||
los diferentes tipos de listas entre sí.
|
||
</p>
|
||
<p>
|
||
No es muy habitual mezclar la lista de definiciones con los
|
||
otros tipos, pero sí puede resultar útil anidar listas
|
||
desordenadas dentro de otras ordenadas o viceversa.
|
||
</p>
|
||
<p>
|
||
Lo veremos con un ejercicio semejante al anterior.
|
||
</p>
|
||
<div class="practicas">
|
||
<img class="numact" style=
|
||
"width: 29px; height: 29px; float: left;" alt=
|
||
"Actividad 15" title="Actividad 15" src=
|
||
"../imagenes/numeracion/quince.gif" />
|
||
<ul>
|
||
<li>Crea un documento nuevo y construye una lista
|
||
ordenada suficientemente compleja.
|
||
</li>
|
||
<li>Elige el nivel que desees modificar y pulsa el botón
|
||
de las listas con viñetas.
|
||
</li>
|
||
<li>Guarda el documento
|
||
como <strong>actividad15.html</strong> y comprueba el
|
||
efecto obtenido.
|
||
</li>
|
||
<li>Podemos complicar algo más la situación combinando el
|
||
cambio de tipo de lista y el de tipo de numeración... A
|
||
estas alturas no te resultará difícil prever el resultado
|
||
final de las acciones que vayas realizando.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
</html>
|