Buscar Más buscado
Capitulos de este wiki
  1. 1 Introducción al lenguaje HTML
  2. 2 Primeros pasos con HTML
  3. 3 Parrafos en HTML
  4. 4 Cómo insertar imagenes en una pagina
  5. 5 Cómo crear enlaces hipertexto
  6. 6 PRÁCTICA 1: La pagina web de "La chistera"
  7. 7 Anclas (I)
  8. 8 Anclas (II)
  9. 9 Formato de texto
  10. 10 La etiqueta FONT
  11. 11 Texto preformateado
  12. 12 Acentos y otros caracteres especiales
  13. 13 Listas en HTML (I)
  14. 14 Listas en HTML (II)
  15. 15 Comentarios en HTML
  16. 16 Practica 2: Un sitio web completo
  17. 17 Usando color en el WWW
  18. 18 Cómo cambiar la apariencia de una pagina
  19. 19 Imagenes en las paginas Web (I)
  20. 20 Imagenes en las paginas Web (II)
  21. 21 Imagenes en las paginas Web (III)
  22. 22 Cómo cambiar la apariencia de las imagenes
  23. 23 Alternativas a las imagenes inline (I)
  24. 24 Alternativas a las imagenes inline (II)
  25. 25 Mejoras en las imagenes
  26. 26 Cómo se crea una tabla HTML (I)
  27. 27 Cómo se crea una tabla HTML (II)
  28. 28 Alineamiento de tablas
  29. 29 Alineamiento de celdas y filas
  30. 30 Ancho de tablas y celdas
  31. 31 Celdas que abarcan varias filas o columnas
  32. 32 Margenes y separación de celdas
  33. 33 Anidamiento
  34. 34 Practica 3 - Tabla de Datos
  35. 35 Practica 4 - Pagina Web con una estructura creada con tablas
  36. 36 Practica 4 - Pagina Web con una estructura creada con tablas
  37. 37 Practica 4 - Pagina Web con una estructura creada con tablas
  38. 38 Estandares y extensiones del lenguaje HTML (I)
  39. 39 Estandares y extensiones del lenguaje HTML (II)
  40. 40 Extensiones a las listas (I)
  41. 41 Extensiones a las listas (II)
  42. 42 Alineamiento
  43. 43 La etiqueta META
  44. 44 Otras etiquetas del lenguaje HTML 3.2
  45. 45 El atributo TARGET
  46. 46 La etiqueta BASE
  47. 47 Creación de paginas con frames
  48. 48 Creación del documento de definición de frames (I)
  49. 49 Creación del documento de definición de frames (II)
  50. 50 Pagina completa con frames
  51. 51 Atributos de la etiqueta FRAME
  52. 52 Compatibilidad: NOFRAME
  53. 53 Anidamiento de framesets
  54. 54 Bordes de los frames
  55. 55 Valores especiales del atributo TARGET
  56. 56 Practica 5: Web de Los Alpes con frames
  57. 57 Frames flotantes
  58. 58 Sonido vídeo y otros ficheros externos
  59. 59 Multimedia Inline (I)
  60. 60 Multimedia Inline (I)
  61. 61 Plug-ins y objetos incrustados
  62. 62 Java en las Paginas Web
  63. 63 Inserción de Applets Java (I)
  64. 64 Inserción de Applets Java (II)
  65. 65 Inserción de Applets Java (III)
  66. 66 ActiveX, la tecnología del futuro
  67. 67 Formularios en HTML
  68. 68 Controles de Formularios (I)
  69. 69 Controles de Formularios (II)
  70. 70 Controles de Formularios (III)
  71. 71 Controles de Formularios (IV)
  72. 72 Otros controles
  73. 73 Practica 6-Formulario para "Los Alpes"
  74. 74 Como usar los datos de un formulario
  75. 75 Envío De Ficheros Usando Formularios

Curso completo de HTML - Extensiones a las listas (I)

40 - Extensiones a las listas (I)

[editar]
Curso gratis creado por Jorge Ferrer, Víctor García y Rodrigo García. Extraido de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/
23 de Febrero de 2006
< anterior | 1 ... 38 39 40 41 42 43 44 ... 75 | siguiente >

Las etiquetas y atributos que aprendimos a crear en el capítulo 4 pertenecen al estándar HTML 2.0. Con ellas podíamos crear listas de diferentes tipos y anidarlas para crear interesantes efectos. Sin embargo tras unos años trabajando con estas etiquetas los programadores de HTML empezaron a sugerir algunas ideas para conseguir un mayor control sobre las listas.

El primer paso para satisfacer estas ideas fue la inserción de nuevos atributos en el estándar HTML 3.2 y estos son los que veremos a continuación.

El siguiente paso se ha dado con la creación de las hojas de estilo. Estas no son más que un método nuevo con el que se nos ofrece a los programadores la posibilidad de especificar las características de cada uno de los elementos de nuestras páginas web. En lo que a listas se refiere podemos indicar que la viñeta de una lista no numerada sea de una manera determinada, que el tamaño de los elementos de la lista vayan decreciendo, etc. O incluso podemos crear diferentes subtipos de listas. Las hojas de estilo son de reciente aparición y por tanto no están bien soportadas por los navegadores aunque ya podemos aprovechar gran parte de sus ventajas y por ello serán adecuadamente cubiertas en un capítulo posterior.

Las novedades que esta nueva versión del estándar introdujo se refieren a las listas ordenadas, OL, y a las listas no ordenadas, UL, que son en definitiva las más usadas. Estas novedades afectan también a la subetiqueta LI.

Listas no ordenadas

Para aumentar el control sobre la apariencia de las listas no numeradas o no ordenadas se introdujo un nuevo atributo: TYPE. Con él podremos cambiar el tipo de viñeta de los elementos de la lista. Los tipos de viñetas disponibles son:

  • TYPE="Circle": El símbolo es un círculo, es decir, una circunferencia no rellena.

  • TYPE="Square": La viñeta es un cuadrado.

  • TYPE="Disk": Similar a Circle, pero ahora la circunferencia si está rellena. Este tipo es el que aparecía por defecto cuando no usábamos el atributo TYPE.

Quizá al lector que haya practicado con anidamiento de listas le resulten familiares estos tipos de viñetas. Si recordamos al anidar listas el tipo de viñeta de cada nivel de anidamiento era distinto. Pero ahora nosotros tendremos libertad para elegir cuando debe usarse cada uno.

Veamos algunos ejemplos. El primero de ellos será una lista de tipo Disk. En él se muestra un listado de algunos de los principales navegadores, y el código usado es: 

 <UL TYPE="circle">
 
  <LI>
  Ms Internet Explorer
  <LI>
  Netscape Navigator
  <LI>
  Opera
  <LI>
  Lynx
 
  </UL>

Si queremos hacer esta misma lista pero con viñetas cuadradas tendremos que escribir: 

 <UL TYPE="square">
 
  <LI>
  Ms Internet Explorer
  <LI>
  Netscape Navigator
  <LI>
  Opera
  <LI>
  Lynx
 
  </UL>

En la figura 7.7 podemos ver ambos ejemplos junto con un tercero que se obtiene no usando el atributo TYPE o usándolo con el valor TYPE="disc".

Figura 7.7. En HTML 3.2 existen 3 tipos de viñetas para las listas no ordenadas. Con el atributo TYPE podemos elegir entre ellos.

En la figura 7.8 vemos estos tres ejemplos de nuevo, pero esta vez visualizándolos con Netscape Navigator.

Figura 7.8. Comparando esta figura con la anterior vemos la similitud entre las distintas viñetas de los elementos de las listas usadas por Netscape Navigator e Internet Explorer.

Es importante apreciar que no existen prácticamente diferencias, quizá la única sea la variación de tamaño de los símbolos de algunas viñetas.

Hasta ahora hemos usado el atributo TYPE en la etiqueta que definía el tipo de lista, es decir, en la etiqueta UL. De esta forma el cambio en el tipo de viñeta afectaba a todos los elementos de lista. Sin embargo también puede usarse en la etiqueta LI, y de esta forma conseguimos que el cambio de viñeta sólo afecte a un elemento de lista concreto. La mejor manera de ver este efecto es con un ejemplo y por ello vamos a retomar el primero de los tres vistos antes pero cambiando el tipo de viñeta del navegador Lynx. Esto podría servirnos en un ejemplo real para indicar que este navegador es un navegador en modo texto, mientras que los demás son navegadores gráficos. El código que debemos usar es: 

 <UL TYPE="circle">
 
  <LI>
  Ms Internet Explorer
  <LI>
  Netscape Navigator
  <LI>
  Opera
  <LI TYPE="disc">
  Lynx
 
  </UL>

En la figura 7.9 podemos ver el resultado.

Figura 7.9. Usando el atributo TYPE en una etiqueta LI podemos cambiar la viñeta de un único elemento de lista sin afectar a los demás.

Con esto podemos dar por terminadas las novedades de las listas no ordenadas, pasemos a las ordenadas.

[editar]
< anterior | 1 ... 38 39 40 41 42 43 44 ... 75 | siguiente >

Opinar
192 opiniones

sara

deberian poner como hacer un enlace a otra pagina desde un boton
luis

este tutorial esta fabuloso!
esta chivo

gracias por publicar cosas buenas
OCHOA

BUENO
OCHOA

El comentario de algo asi me interesa a mi tambien.
1 2 3 4 5 6 7 ... 39 | siguiente >

Cursos gratis relacionados con 'Curso completo de HTML'

Curso completo de HTML
Este es un curso tremendamente completo, guiado y con ejemplos y prácticas pensadas para convertirlo... Más »
Curso de Ada
El objetivo de este curso es aprender a programar en el lenguaje Ada, desde sus... Más »
Curso de hacking
Práctico y completo curso de hacking.
Curso de Linux
Completo curso de Linux, un sistema operativo gratuito y de libre distribución inspirado en el... Más »
El fascinante mundo de los virus informáticos
Completo curso acerca de los virus informáticos, historia, clasificación, protección...

Anuncios Google

Autor y licencia de 'Curso completo de HTML'


Curso gratis de Jorge Ferrer, Víctor García y Rodrigo García. Extraido de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/ 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.