Espera por favor...

Enlaces en HTML (links)
¿Para qué sirven

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)
Sintaxis 

<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="https://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="https://www.um.es/index.html#apartado1">Ir al Apartado 1</a>

Enlaces en HTML (links)
e-mail e imagen

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

Etiqueta Atributos Valor Descripción
<a> Define un vínculo
href URL Dirección URL a conectar.
hreflang código leng Especifica el lenguaje del 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

Etiqueta 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

Etiqueta 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 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
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
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
Introducción

  • 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
Básicas

Etiqueta Descripción
<table> Etiqueta que contendrá 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 sencilla 

<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

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

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 de 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.

Búsquedas en UMU

Búsquedas sobre informática