Crea tu Web: Indice de diseño

Ahora también
> HTML versión 5 <
  • Introducción al curso
    • Introducción
    • Requisitos
    • Agradecimiento
  • El HTML
    • Versiones de HTML
    • HTML 2.0
    • HTML 3.0 y 3.2
    • HTML 4.0
    • Estándares en este curso
  • Mi primera página
    • La primera página
    • El código
    • La explicación
    • El cuerpo del documento
  • El documento HTML
    • La página
    • La cabecera
    • El cuerpo
  • Formato del texto
    • Formato básico
    • Formato del párrafo
    • Las 6 cabeceras
    • Cambiando el tipo de letra
    • Formato de frase
    • Otros elemento
  • Tipos de letras
    • Formateo de texto
    • Cambio de color
    • Tamaños del texto
    • Tipo de letra
  • Caracteres especiales
    • Caracteres especiales
    • Caracteres extendidos
    • Caracteres de control
  • Enlaces web
    • Los enlaces
    • La etiqueta <A>
    • Las URLs
    • Anclas
  • Listas
    • Listas
    • Listas desordenadas
    • Listas ordenadas
    • Listas de definiciones
  • Imágenes
    • Imágenes
    • Imágenes y enlaces
    • Alineación respecto al texto
  • Formularios
    • Formularios
    • Cajas de texto
    • Opciones
    • Botones del formulario
    • Otros elemento
  • Formularios avanzados
    • Controles avanzados
    • Etiquetas
    • Agrupación de elementos
    • Desactivación de elementos
  • Mapas
    • Mapas
    • Mapas lado cliente
    • Cómo usar un mapa
  • Tablas
    • Tablas
    • Definir las filas
    • Definir las celdas
    • Título de la tabla
  • Marcos
    • Marcos
    • Etiqueta <FRAMESET>
    • Etiqueta <FRAME>
    • Acceso a otros marcos
  • Hojas de estilo (1)
    • Estilos CSS
    • Clases
    • Etiquetas <SPAN> y <DIV>
  • Hojas de estilo (2)
    • Referencia CSS
    • Propiedades de bloque
    • Propiedades de tipo de letra
    • Propiedades de formato del texto
    • Propiedades de color y fondo
    • Propiedades de clasificación
  • Los scripts
    • Los Scripts
    • Javascript
  • Capas
    • Las capas
    • Definición
    • Propiedades
  • Sonido
    • Sonido en la página
    • Sonido manual
    • Sonido de fondo
  • Trucos
    • Guía de estilo
      • Guía de estilo
      • Contenido
      • Navegación
      • Estructura de las páginas
      • Accesibilidad
      • Diseño
      • Mantenimiento y prueba
    • Enlaces de interés
      • Más HTML
      • Más JavaScript
      • HTML dinámico
      • Otras tecnologías
      Listas
      El formato listas

      El lenguaje HTML nos permite crear listas en las páginas web de una manera casi tan simple y efectiva como en un procesador de textos, para ello utiliza las etiquetas de listas, de las que existen varios tipos. Todas ellas se pueden anidar (meter unas dentro de otras) formando árboles más o menos complejos. Todos los tipos siguen el mismo formato:

      <tipo_lista>
        <LI>Primer elemento
        <LI>Segundo elemento
      </tipo_lista>

      tipo_lista puede ser una de las siguientes: UL, OL, DL.

      arriba


       Listas desordenadas

      La etiqueta <UL> significa unordered list, lista desordenada, y se corresponde con las viñetas en los procesadores de texto: son listas donde cada elemento está precedido de un símbolo como un putno o un disco. EL formato es el qeu sigue:

      <UL>
        <LI>Juan Pedro
      <LI>Luisa </UL>

      se verá como

      • Juan Pedro
      • Luisa

      A partir del HTML 3.2 la etiqueta <UL> admite estos parámetros:

      Parámetro Significado Resultado
      COMPACT Indica al navegador que debe representar la lista de la manera más compacta posible.
      • Primer elemento
      • Segundo elemento
      TYPE="disc", "circle", "square" Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.
      • Tipo disc
      • Tipo circle
      • Tipo square
      arriba


      Listas ordenadas

      La etiqueta <OL> responde a Ordered List, lista ordenada, y nos permite presentar listas como esquemas numerados de un solo nivel, o sea, que cada elemento de la lsita lleva un número de orden. Por ejemplo,

      <OL>
        <LI>Primer elemento
        <LI>Segundo elemento
      </OL>

      se verá como

      1. Primer elemento
      2. Segundo elemento

      El HTML 3.2 admite estos parámetros para la etiqueta <OL> :

      Parámetro Significado Resultado
      COMPACT Indica al navegador que debe representar la lista de la manera más compacta posible.
      1. Primer elemento
      2. Segundo elemento
      TYPE="1", "a", "A", "i", "I" Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.
      1. Tipo 1
      2. Tipo a
      3. Tipo A
      4. Tipo i
      5. Tipo I
      START="num" Indica al navegador el número por el que se empezará a contar los elementos de la lista.
      1. Primer elemento
      2. Segundo elemento
      VALUE="num" Atributo de <LI>, actúa como START pero a partir de un elemento predeterminado.
      1. Primer elemento
      2. Segundo elemento
      3. Tercer elemento

       

      arriba


      Listas de definiciones

      Este tipo de lista utiliza las etiquetas <DT>y <DD> en lugar de <LI>. En estas lista cada elemento tiene una entrada de texto indentada respecto a dicho elemento. Es como si tuvieramos una lista de conceptos y sus definiciones (el texto indentado). Para entenderlo lo mejor es verlas en marcha:

      <DL>
        <DT>HTML<DD>Es un lenguaje de definición de páginas web.
        <DT>Java<DD>Es un lenguaje de programación.
      </DL>

      se verá como

      HTML
      Es un lenguaje de definición de páginas web.
      Java
      Es un lenguaje de programación.

      La etiqueta <DL> sólo admite como parámetro el ya conocido COMPACT, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores. Un elemento <DT> puede contener varios elementos <DD>.

      arriba


      Comunidad Virtual. Alojamiento gratis