9 - Listas I

[editar]
Tutorial creado por Indaya.com. Extraido de: http://www.indaya.com
11 de Septiembre de 2005
Las posibilidades que nos ofrece el HTML en cuestión de
tratamiento de texto son realmente notables. No se limitan a lo
visto hasta ahora, sino que van más lejos todavía. Varios ejemplos
de ello son las listas, que sirven para enumerar y definir elementos,
los textos preformateados y las cabeceras o títulos.
Las listas son utilizadas para citar, numerar y definir objetos.
También son utilizadas corrientemente para desplazar el comienzo de
línea hacia la derecha.
Podemos distinguir tres tipos de listas.
Las veremos detenidamente una a una.
Listas desordenadas
Son delimitadas por las etiquetas <ul> y </ul> (unordered list).
Cada uno de los elementos de la lista es citado por medio de una
etiqueta <li> (sin cierre, aunque no hay inconveniente en colocarlo).
La cosa queda así:
<p>Países del mundo</p>
<ul>
    <li>Argentina
    <li>Perú
    <li>Chile
</ul>
El resultado: 

Países del mundo




  • Argentina
  • Perú
  • Chile




Podemos definir el tipo de viñeta empleada para cada elemento.
Para ello debemos especificarlo por medio del atributo type incluido
dentro de la etiqueta de apertura <ul>, si queremos que el estilo
sea válido para toda la lista,o dentro le la etiqueta <li> si
queremos hacerlo específico de un solo elemento. La sintaxis es del
siguiente tipo:
<ul type="tipo de viñeta">
donde tipo de viñeta puede ser uno de los siguientes:
circle
disc
square 

|| Nota: En algunos navegadores no funciona la opción de cambiar el tipo de viñeta a
mostrar y por mucho que nos empeñemos, siempre saldrá el
redondel negro.
En caso de que no funcione siempre podemos construir la lista a
mano con la viñeta que queramos utilizando las tablas de HTML.
Veremos más adelante cómo trabajar con tablas. ||






Vamos a ver un ejemplo de lista con un cuadrado en lugar de un
redondel, y en el último elemento colocaremos un círculo. Para ello
vamos a colocar el atributo type en la etiqueta <ul>, con lo que
afectará a todos los elementos de la lista.
<ul type="square">
<li>Elemento 1
<li>Elemento 2
<li>Elemento 3
<li type="circle">Elemento 4
</ul>
Que tiene como resultado 



  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4

[editar]

30 opiniones

OCHOA

MUY BUENO
bastante buena

:D
mu weno

si señor esto si k mola
amilcar caamal

hasta que porfin alguien hace algo bien GGGGGGGGGG """"bravo""""
aza

muy bien
1 2 3 4 5 6 | siguiente >

Tutoriales relacionados con 'Completo tutorial de HTML'

Bienvenidos al manual de HTML de Indaya.A través de todos estos capítulos vamos a descubrir... Más »
En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque práctico... Más »
ASP (Active Server Pages) es la tecnología para la creación de páginas dinámicas del lado... Más »
Este documento describe cómo usar el sistema de spooling para impresoras de líneas que provee... Más »
Hace tiempo que terminé la traducción de un excelente artículo sobre kde-kiosk, la tecnología que... Más »

Autor y licencia de 'Completo tutorial de HTML'


Tutorial de Indaya.com. Extraido de: http://www.indaya.com CopyLeft
Licencia GNU Free Documentation License: http://www.gnu.org/copyleft/fdl.html
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.