mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-28 03:12:25 +00:00
577 lines
16 KiB
HTML
577 lines
16 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html lang="es-es">
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<TITLE></TITLE>
|
|
<link rel="stylesheet" href="../nvu2005.css" type="text/css">
|
|
<link rel="stylesheet" href="../multi2.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]-->
|
|
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
|
|
<META NAME="GENERATOR" CONTENT="OpenOffice.org 1.9.130 (Win32)">
|
|
<META NAME="AUTHOR" CONTENT="Antonio Paniagua Navarro">
|
|
<META NAME="CREATED" CONTENT="20051002;16421100">
|
|
<META NAME="CHANGEDBY" CONTENT="Antonio Paniagua Navarro">
|
|
<META NAME="CHANGED" CONTENT="20051005;12320400">
|
|
<STYLE>
|
|
<!--
|
|
@page { size: 21cm 29.7cm; margin: 2cm }
|
|
P { margin-bottom: 0.21cm }
|
|
P.western { font-size: 10pt; so-language: es-ES }
|
|
-->
|
|
</STYLE>
|
|
</head>
|
|
|
|
|
|
<body dir="LTR">
|
|
<div id="localizador">
|
|
<p>La base>>Texto - Listas</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="pag1.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="texto5.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
<div class="solapas">
|
|
<ul>
|
|
|
|
|
|
<li><a href="texto1.html">Tipos
|
|
y cuerpos</a></li>
|
|
|
|
|
|
<li><a href="texto2.html">Enfatización</a></li>
|
|
|
|
|
|
|
|
<li><a href="texto3.html">Marcado
|
|
por contenido</a></li>
|
|
|
|
<li><a href="texto4.html">Justificación</a></li>
|
|
|
|
<li><a href="texto5.html">Títulos
|
|
o cabeceras</a></li>
|
|
|
|
<li class="activo"><a href="texto6.html">Listas</a></li>
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="principal">
|
|
|
|
<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:
|
|
<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"><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>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<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.
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|
</p>
|
|
|
|
|
|
|
|
<P LANG="es-ES" CLASS="western" STYLE="font-style: normal">Una forma alternativa
|
|
para crear una lista consiste en tomar una serie de líneas que ya estén
|
|
escritas, seleccionarlas y hacer clic en uno de los botones de listas. De este
|
|
modo, cada párrafo se convierte automáticamente en un elemento
|
|
de la lista. Posteriormente se pueden modificar los niveles de la lista a nuestro
|
|
gusto.</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"></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><strong>
|
|
</strong>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><strong> </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>actividad13.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>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|