Enlaces, listas, tablas

Desarrollo de Aplicaciones Web

Enlaces y listas en HTML

Contenido:


  1. Enlaces
  2. Listas
  3. Tablas

Enlaces en HTML

Enlaces en HTML (links)

Los enlaces permiten la conexión con:


  • Una imagen


  • Un vídeo


  • Un archivo de sonido


  • Sitios en la web (u otra página web)


  • Acceso a un programa de e-mail


  • Enlaces en HTML (links)

    Atributos:

    <a atributo="valor">Texto del enlace</a>
    <body>
    <a href="http://www.escepticos.org"> ARP-SAPC</a>
    </body>

    Enlaces en HTML (links)

    Atributos:


    target: indica el lugar donde se abre el enlace
    name: indica un lugar dentro de una página

    <a href="http://www.um.es" target="_blank"> Sitio de la UMU</a>

    <a name="apartado1"> Apartado 1</a> <!-- Se define un destino en el apartado 1,  que se dirige, por ejemplo, a:-->
    <a href="http://www.um.es/index.html#apartado1">Ir al Apartado 1</a> 

    Enlaces en HTML (links)

    Enlace para enviar un email:

    <body>
                <a href="mailto:atencioncliente@empresa.es">Mandar email</a>
    </body> 

    Enlace a través de una imagen:

    <body>
                    <a href="http://www.escepticismo.es"> <img src="img/demonio.gif"></a>
    </body> 

    Enlaces en HTML (links)

    Etiquetas y atributos de los enlaces:

    Etiquetas Atributos Valor Descripción
    <a> Define un vínculo
    href URL Dirección URL a conectar.
    hreflang código leng Especifica el lenguaje de la URL
    name nombre sección Para crear un marcapáginas dentro de un documento
    rel alternate Indica la relación entre el documento actual y el destino del vínculo
    designates
    stylesheet
    start
    next
    prev
    contents
    index
    glossary
    copyright
    chapter
    section
    subsection
    apendix
    help
    bookmark
    nofollow

    Enlaces en HTML (links)

    Etiquetas y atributos de los enlaces:

    Etiquetas Atributos Valor Descripción
    rev alternate Especifica la relación entre el destino del vínculo y el documento actual (vínculo inverso)
    designates
    stylesheet
    start
    next
    prev
    contents
    index
    glossary
    copyright
    chapter
    section
    subsection
    apendix
    help
    bookmark

    Enlaces en HTML (links)

    Etiquetas y atributos de los enlaces:

    Etiquetas Atributos Valor Descripción
    coords coordenadas Especifica las coordenadas de la superficie que contiene el enlace
    shape Define la forma del área
    rect Usamos coords="izquierda, arriba, derecha, abajo"
    rectangle
    circ Usamos coords="centro x, centro y, radio"
    circle
    poly Usamos coords="x1, y1, x2, y2, .., xn, yn"
    polygon
    target Indica donde abrir el URL
    _blank URL se abrirá en una nueva ventana.
    _parent URL se abrirá en la ventana padre
    _self URL se abrirá en la misma ventana donde fue pulsado
    _top URL se abrirá en una ventana de tamaño completo
    type Contenido Especifica el tipo de contenido a conectar

    Listas

    Listas en HTML

    En ocasiones, es posible agrupar determinadas entidades en un conjunto de elementos que tienen más significado de forma conjunta. El menú de navegación por ejemplo está formado por un grupo de palabras. Aunque cada palabra por separado tiene sentido, de forma conjunta forman el menú de navegación de la página, por lo que su significado conjunto es mayor que por separado.

    HTML define tres tipos diferentes de listas para agrupar los elementos:

  • Listas no ordenadas


  • Listas ordenadas


  • Listas de definición


  • Listas en HTML

    Listas ordenadas:

  • Ordenan la lista anteponiendo números, letras o signos


  • Comienzan con la etiqueta <ol>


  • Para cada uno de los elementos se utiliza la etiqueta <li>

    Ejemplo:

    Ciencias más importantes:
    <ol>
    	<li>Física</li>
    	<li>Química</li>
    	<li>Biología</li>
    </ol>
  • Listas en HTML

    Listas desordenadas:

  • Muestran la lista anteponiendo un punto, cuadrado o triángulo a cada elemento

  • Comienzan con la etiqueta <ul> (la <dir> no es recomendada)

  • Para cada uno de los elementos de la misma se emplea la etiqueta <li>

  • Ejemplo:

    Pseudomedicinas que son una estafa:
    <ul>
    	<li>Homeopatía</li>
    	<li>Flores de Bach</li>
    	<li>Quiropráctica</li>
    </ul>

    Listas en HTML

    Listas de definición:

  • Se emplean para definir términos

  • Se marcan con la etiqueta <dl>

  • Los términos de las mismas con <dt>

  • La definición de los términos comienza con <dd>

  • Ejemplo:

                  <dl>
    <dt>Carbohidratos</dt>
    	<dd>Glúcidos, carbohidratos, hidratos de carbono o sacáridos son moléculas compuestas por carbono, hidrógeno y oxígeno, cuyas funciones en los seres vivos son el prestar energía inmediata y estructural.</dd>
    <dt>Grasas</dt>
    	<dd>En bioquímica, grasa es un término genérico para designar varias clases de lípidos, aunque generalmente se refiere a los acilglicéridos, ésteres en los que uno, dos o tres ácidos grasos se unen a una molécula de glicerina, formando monoglicéridos, diglicéridos y triglicéridos respectivamente.</dt>
    </dl>
    

    Tablas

    Tablas

  • Utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno


  • Pueden contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos


  • No siempre se utilizan adecuadamente


  • Tablas

    Tablas básicas

    Etiqueta Descripción
    <table> Etiqueta que tendrá en su interior la tabla
    <tr> Table Row. Etiqueta contenedora de cada fila de la tabla
    <td> Table Data. Cada una de las celdas de la tabla
    <th> Table Header. Cada una de las celdas de cabecera de la tabla

    Tablas

    Ejemplo tabla básica

    <table>
      <!-- Cabecera -->
      <tr>
        <th>Título columna 1</th>   <!-- Celda de cabecera de la columna 1 -->
        <th>Título columna 2</th>   <!-- Celda de cabecera de la columna 2 -->
        <th>Título columna 3</th>   <!-- Celda de cabecera de la columna 3 -->
      </tr>
      <!-- Primera fila -->
      <tr>
        <td>Celda 1x1</td>    <!-- Primera celda de la primera fila -->
        <td>Celda 2x1</td>    <!-- Segunda celda de la primera fila -->
        <td>Celda 3x1</td>    <!-- Tercera celda de la primera fila -->
      </tr>
      <!-- Segunda fila -->
      <tr>
        <td>Celda 1x2</td>    <!-- Primera celda de la segunda fila -->
        <td>Celda 2x2</td>    <!-- Segunda celda de la segunda fila -->
        <td>Celda 3x2</td>    <!-- Tercera celda de la segunda fila -->
      </tr>
    </table>

    Tablas

    Combinación de celdas de una tabla

    Atributo Valor Descripción
    colspan número Número de columnas que la celda abarcará
    rowspan número Número de filas que la celda abarcará
    headers ids Id de los elementos <th> con los que tiene relación la celda
    scope (th) row La cabecera se aplica a alguna de las filas adyacentes
    col La cabecera se aplica a alguna de las columnas adyacentes
    rowgroup La cabecera se aplica a todas las celdas restantes de la fila
    colgroup La cabecera se aplica a todas las celdas restantes de la columna
    auto La cabecera se aplica a las celdas de forma automática
    abbr (th) nombre Abreviatura o información alternativa sobre la cabecera

    Tablas

    Ejemplo tabla con colspan

    Al código de la tabla anterior, se le añade antes de la primera fila de <td>, una fila con una sola celda <td> con un atributo colspan a 3. Se indica que esa nueva fila (originalmente, de 3 celdas) va a abarcar las 3 celdas de espacio con una sola celda:

    <table>
      <!-- ... -->
      <tr>
        <td colspan="3">Datos adicionales</td> <!-- Abarca 3 celdas -->
      </tr>
      <!-- Primera fila -->
      <tr>
        <td>Celda 1x1</td>    <!-- Primera celda de la primera fila -->
        <td>Celda 2x1</td>    <!-- Segunda celda de la primera fila -->
        <td>Celda 3x1</td>    <!-- Tercera celda de la primera fila -->
      </tr>
      <!-- ... -->
    </table>

    Tablas

    Etiquetas de organización de tablas

    Al interpretar una tabla, el navegador la muestra conforme va leyendo las etiquetas, por lo que se crea en el orden que se han especificado sus elementos, de arriba a abajo. Se pueden utilizar una serie de etiquetas contenedoras que establecerán la zona de la tabla donde deben aparecer su contenido.
    Etiqueta Descripción
    <thead> Etiqueta contenedora de la cabecera de la tabla. Parte superior de la tabla.
    <tbody> Etiqueta contenedora del cuerpo de la tabla. Parte central de la tabla.
    <tfoot> Etiqueta contenedora del pie de la tabla. Parte inferior de la tabla.
    <caption> Establece un título de la tabla, independientemente de su posición.

    Tablas

    Ejemplo tabla

    A las etiquetas de tabla ya vistas, se pueden añadir estas etiquetas, pudiendo definir la zona donde aparecerán sin que, necesariamente tengan el orden correcto.

    <table>   <!-- Table footer: pie de la tabla (tfoot) -->
      <tfoot>
        <tr>
          <td>Pie de tabla 1</td>
          <td>Pie de tabla 2</td>
        </tr>
      </tfoot>   <!-- Table header: cabecera de la tabla (thead) -->
      <thead>
        <tr>
          <th>Columna 1</th>
          <th>Columna 2</th>
        </tr>
      </thead>   <!-- Table body: cuerpo de la tabla (tbody) -->
      <tbody>
        <tr>
          <td>Celda 1</td>
          <td>Celda 2</td>
        </tr>
      </tbody>   <!-- Leyenda o título de la tabla -->
      <caption>Título de la tabla</caption>
    </table>
    A pesar de seguir el orden tfoot, thead, tbody, caption definido en el HTML, el navegador lee la tabla y la redistribuye según su significado semántico, de modo que lo organiza dejándolo con el orden caption, thead, tbody, tfoot. De esta forma, estas etiquetas nos pueden servir para indicar secciones concretas de la tabla, independientemente del lugar donde estemos escribiendo, algo que puede ser muy útil si estamos creando la tabla de forma dinámica mediante algún lenguaje de programación.

    Tablas

    Agrupación de columnas en una tabla

    Existen etiquetas para agrupar o seleccionar columnas y así poder realizar tareas sobre el conjunto, como por ejemplo, asociarle una clase específica o darle estilos CSS a una columna concreta de la tabla.
    Etiqueta Descripción
    <colgroup> Etiqueta contenedora de columnas. Crea una agrupación de columnas.
    <col> Etiqueta que representa a una columna de la tabla.

    Tablas

    Ejemplo tabla

    <table>
      <tr>
        <th>Columna 1</th>
        <th>Columna 2</th>
        <th>Columna 3</th>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
      </tr>
      <colgroup>
        <col style="background:red">
        <col span="2" style="background:yellow">
      </colgroup>
    </table>

    En el ejemplo se está aplicando un color de fondo rojo a la primera columna, mientras que a las dos siguientes un color de fondo amarillo, ya que tiene indicado el atributo span a 2 y se aplica a las dos siguientes columnas.

    Tablas

    Atributos obsoletos en tablas

    Hay atributos de etiquetas relacionadas con las tablas que están obsoletos y que no se recomienda su empleo:
    Atributo obsoleto Descripción
    bgcolor Indica el color de fondo de la página.
    align, valign Indica la alineación vertical y horizontal.
    hspace, vspace Indica los espacios en la tabla o marco.
    align, border Indica que alineación o borde utilizar.
    cellpadding, cellspacing Indica espacios entre celdas en una tabla.
    nowrap Establece fijo el tamaño de una celda.