10

Click here to load reader

Clase tres de xhtml

Embed Size (px)

DESCRIPTION

Uso de las etiquetas de enlaces, imagenes y tabla

Citation preview

Page 1: Clase tres de xhtml
Page 2: Clase tres de xhtml

La etiqueta <img> define una imagen en una página HTML. La etiqueta <img>

tiene dos atributos requeridos: src y alt. Nota: Las imágenes no están

técnicamente insertado en una página HTML, las imágenes están vinculadas a

las páginas HTML. La etiqueta <img> crea un espacio para la custodia de la

imagen de referencia.

Ejemplo del uso de la etiqueta:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

El atributo src indica la ruta de la imagen, puede ser enlace interno o externo.

El atributo alt es un texto alternativo que se colocara si el enlace esta roto.

El atributo height y width sirve para cambiar el tamaño de la imagen.

El atributo align sirve para alinear la imagen.

Page 3: Clase tres de xhtml

La etiqueta <a> define un hipervínculo, que se utiliza para vincular de una

página a otra. El atributo más importante del elemento <a> es el atributo href,

que indica el destino del vínculo.

De forma predeterminada, los enlaces aparecerán de la siguiente manera en

todos los navegadores:

Un enlace no visitado está subrayado y azul

Un enlace visitado está subrayado y púrpura

Un vínculo activo está subrayado y el rojo

Otros atributos que existe es el target que permite abrir el enlace en una nueva

pestaña. Ejemplo:

<a href="http://www.google.com">Entrar</a>

Page 4: Clase tres de xhtml

La etiqueta <table> define una tabla HTML. Una tabla HTML

consiste en el elemento <table> y <tr> uno o más, <th> y

elementos <td>. El elemento <tr> define una fila de la tabla, el

elemento <th> define un encabezado de la tabla, y el elemento

<td> define una celda de tabla.

Una tabla HTML más complejos pueden incluir también

<caption>, <col>, <colgroup>, <thead>, <tfoot> y elementos

<tbody>.

Page 5: Clase tres de xhtml

<table border="1">

<tr>

<th>Mes</th>

<th>Monto</th>

</tr>

<tr>

<td>Enero</td>

<td>100</td>

</tr>

</table>

Ejemplo de uso de

la etiqueta table,

donde las etiquetas

tr permite apertura

una fila y las

etiquetas td o th

apertura una

columna.

Page 6: Clase tres de xhtml

La etiqueta <tbody> se utiliza para agrupar el contenido del cuerpo en una

tabla HTML. El elemento <tbody> se utiliza en conjunción con los

elementos <thead> y <tfoot> para especificar cada parte de una tabla

(cuerpo, encabezado, pie de página).

Los navegadores pueden usar estos elementos para habilitar el

desplazamiento del cuerpo de la tabla independientemente de la cabecera y el

pie de página. Además, al imprimir una tabla grande que abarca varias

páginas, estos elementos pueden permitir a la cabecera de la tabla y pie de

página que se imprimirá en la parte superior e inferior de cada página.

Page 7: Clase tres de xhtml

<table border="1">

<thead>

<tr>

<th>Mes</th>

<th>Monto</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Suma</td>

<td>180</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>Enero</td>

<td>100</td>

</tr>

<tr>

<td>Febrero</td>

<td>80</td>

</tr>

</tbody>

</table>

Page 8: Clase tres de xhtml

La etiqueta <td> define un estándar de celda en una tabla HTML.

Una tabla HTML tiene dos tipos de celdas:

Celdas de encabezado - contiene información del

encabezado (creada con el elemento <th>)

Las celdas estándar - contiene datos (creada con el elemento

<td>).

Dentro de las columnas tenemos los atributos rowspan y colspan.

Estos atributos permite realizar combinaciones de celdas.

Page 9: Clase tres de xhtml

El atributo colspan

especifica el número de

columnas de una celda

debe combinar. Ejemplo:

<table border="1">

<tr>

<td>Enero</td>

<td>100</td>

</tr>

<tr>

<td>Febrero</td>

<td>80</td>

</tr>

<tr>

<td colspan="2">Total:

180</td>

</tr>

</table>

Enero 100

Febrero 80

Total 180

Page 10: Clase tres de xhtml

El atributo rowspan

especifica el número de

filas de una celda debe

combinar. Ejemplo:

<table border="1">

<tr>

<td>Enero</td>

<td rowspan="2"> 100</td>

</tr>

<tr>

<td>Febrero</td>

</tr>

<tr>

<td>Marzo</td>

<td>80</td>

</tr>

</table>

Enero

100 Febrero

Marzo 80