Capítulo 1 - Páginas estáticas (Parte 02 de 09)

 2.4 Listas

Las listas permiten ordenar información. Se tienen varios tipos, entre los que destacan los siguientes:

• Listas desordenadas con los tags <ul>, <li>

• Listas ordenadas con los tags <ol>, <li>

• Lista de definiciones con los tags <dd>, <dt>, <dd>

Combinaciones de listas y números

<ol>

    <li>Mamíferos

    <ul>

    <li> Propio de climas cálidos

    <li> De climas fríos

    </ul>

    <li> Pájaros

    <li> Reptiles

    <li> Peces

    <ul>

    <li> De agua dulce

    <ol>

    <li> De la selva

    <li> De la sierra

    </ol>

    <li> De agua salada

    <li> En agua salada y dulce

    </ul>

</ol>

2.5 Tablas

Las tablas son elementos muy importantes para la presentación de consultas y otras presentaciones de información. El tag para construir una tabla es <table>, el cual tiene elementos como las filas <tr> y las celdas <td> en las filas. A continuación, se presentan algunas etiquetas adicionales relacionadas con tablas.

Un ejemplo sencillo es el siguiente:

La salida en el navegador sería la siguiente:

El tag caption permite agregar un título a la tabla.

La propiedad colspan permite que una celda sea de varias columnas, así como, rowspan que sea de varias filas.

2.6 Enlaces

Para navegar entre los diversos documentos web, se utiliza la etiqueta <a>. El siguiente cuadro muestra algunas de sus propiedades:

Utilizado para navegar entre documentos

Atributos específicos

• name = "texto" – Etiqueta de enlace a la que se puede llegar desde otro enlace.
• href = "url" – Dirección a navegar

Tipo de elemento

• En línea

El atributo href se utiliza para indicar la URL a la que navegará el enlace, cuando el usuario hace clic sobre texto de enlace.

El siguiente ejemplo permite navegar a Google:

        <a href="http://www.google.com">Página principal de Google</a>

Otro ejemplo:

Si se tuviesen los documentos index.jsp y doc.jsp, como muestra la figura adjunta, entonces para viajar de index a doc, se tendría que poner el siguiente código en index:

        <a href=”view/doc.jsp”>Ir a doc.jsp</a>

Para viajar de doc a index, en doc se tendría que poner el siguiente código:

        <a href=” ../index.jsp”>Ir a index.jsp</a>

Se puede deducir que, para ingresar a una carpeta, se deberá poner el nombre de la carpeta seguido de slash; por ejemplo:

        <a href=”carpeta1/carpeta2/otrodoc.jsp”>..</a>

        <a href=”x/y/z/doc.jsp”>..</a>

Si se desea salir de una carpeta, se escribirá la siguiente línea:

        <a href=”../index.jsp”>..</a>

Además, si se quiere salir de una tercera carpeta interna, se escribirá la siguiente línea:

        <a href=”../../../index.jsp”>..</a>

2.7 Divisiones

En un documento HTML el elemento "div" permite crear divisiones, también llamadas secciones o zonas. Las divisiones se utilizan para agrupar elementos y aplicarles estilos.

Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no muestran nada especial cuando se crea una división, salvo que se dé formato a la división con la hoja de estilo.

La etiqueta <div> se puede anidar (es decir, que una división puede contener otras divisiones), por lo que se utiliza para estructurar en bloques el contenido de la página web.

Las etiquetas “div“ y “span“ no tienen ninguna diferencia especial, solo que la primera se define como un elemento bloque y la segunda es un elemento de línea.

Esos nombres son debido a la forma en que ocupan espacio dentro del documento que se está creando. Un elemento en bloque significa que el elemento ocupa todo el ancho del documento disponible, produciendo un retorno de línea al final del mismo. Si en un documento se visualizarán los bordes alrededor del elemento, el elemento en bloque quedaría de la siguiente forma.