Tu pagina en HTML III

Hola Colegas informaticos, amigos y parientes. En esta oportunidad veremos la tercera parte de este manualillo de "Tu pagina en HTML", trataremos 2 temas en particular los cuales son de mucha importancia a la hora de presentar algun tipo de información o simplemente la división de nuestra pagina en varias secciones trabajando de forma independiente.

Contenidos:

• Creación de Tablas para información


• Creación de Marcos o Frames

Tablas en HTML

Sin ninguna duda las tablas en HTML son unas de los elementos más potentes de este, ya que se puede mostrar cualquier tipo de información como textos, imagenes, links, etc. Estas tablas tambien pueden ir adornadas en su borde, lo que significa que se puede controlar su grosor o colocarlos de forma invisible.

Las tablas tienen la particularidad de adaptarse por defecto a las dimenciones de su contenido, pero ovbiamnete tambien se pueden controlar.

Al igual que los otros elementos vistos en los manualillos, se rijen por una estructura.

<table>

<tr>
<td>Fila 1, Columna 1</td>
<td>Fila 1, Columna 2</td>
</tr>

<tr>
<td>Fila 2, Columna 1</td>
<td>Fila 2, Columna 2</td>
</tr>

</table>

Fila 1, columna 1	Fila 1, columna 2
Fila 2, columna 1	Fila 2, columna 2

Otro ejemplo:

A	B	C
D	E	F
G	H	I

Existen atributos para esta etiqueta loscuales pueden personalizarlas.

BORDER: Controla el grosor de los bordes, si se deja en 0, por defecto aparecera un border de 1. Si no se coloca este atributo no mostrara bordes nuestra tabla.

ROWSPAN: Permitira ingresar una línea expandida en nuestra tabla, asignandole un número para indicarle cuantas filas debe abarcar. rowspan="(Num)"

<table border="1">

<tr>
<td>Fila 1, Columna 1</td>
<td roespan=2>Fila 1, Columna 2</td>
<td>Fila 1, Columna 3</td>
</tr>

<tr>
<td>Fila 2, Columna 1</td>
<td>Fila 2, Columna 2</td>
</tr>

</table>

Fila 1, Columna 1	Fila 1, Columna 2	Fila 1, Columna 3
Fila 2, Columna 1		Fila 2, Columna 2

<TH> y </th> Sirve para mostrar cabeceras en nuestras tablas, colocando esta en Negrita.

COLSPAN: Permitira ingresar una fila extendida la cual mostrara este pero en 2 columnas. colspan="(Num)"

<table border="1">

<tr>
<td>Fila 1, Columna 1</td>
<td colspan=2>Fila 1, Columna 2</td>
</tr>

<tr>
<td>Fila 2, Columna 1</td>
<td>Fila 2, Columna 2</td>
<td>Fila 2, Columna 3</td>
</tr>

</table>

Fila 1, Columna 1	Fila 1, Columna 2
Fila 2, Columna 1	Fila 2, Columna 2	Fila 1, Columna 3

Ejemplo con TH (Cabecera)

Asignatura	Nota 1	Nota 2	Nota 3
Lenguaje	2.0	4.5	7.0
HTML	6.0	6.5	7.0

CELLPADDING: Agregara la dimención que tú deceas a las celdas. cellpadding="(Num)"

CELLSPACING: Establecera la distancia que hay entre celdas

<table border="1" cellpadding="10" cellspacing="0">

<tr>
<td>Fila 1, Columna 1</td>
<td>Fila 1, Columna 2</td>
</tr>

<tr>
<td>Fila 2, Columna 1</td>
<td>Fila 2, Columna 2</td>
</tr>

</table>

Fila 1, Columna 1	Fila 1, Columna 2
Fila 2, Columna 1	Fila 2, Columna 2

Ejemplo con Cellspacing="10"

Asignatura	Nota 1	Nota 2	Nota 3
Lenguaje	2.0	4.5	7.0
HTML	6.0	6.5	7.0

ALIGNcenter: Centrara la información que se encuentra dentro.

ALIGN=right: Alineación a la Derecha

Por Defecto: Se alinera a la izquierda

Asignatura	Nota 1	Nota 2	Nota 3
Lenguaje	2.0	4.5	7.0
HTML	6.0	6.5	7.0

FRAMES:

¿Qué son los Frames?

Los frames (en inglés frame = cuadro) es un elemento implementado por Netscape, que permite dividir la pantalla en varias áreas independientes unas de otras, y por tanto con contenidos distintos. No hay límites para el contenido de cada una de estas áreas: tienen las mismas propiedades que la pantalla completa normal, tal y como la conocemos. No hay que confundir los frames con las tablas. Su apariencia, a veces, puede ser similar, pero mientras el contenido de la celda de una tabla es fijo, en un área de pantalla creado por el elemento FRAME se dispone de todos los recursos del HTML.

Las páginas que contienen FRAME no pueden contener el elemento BODY ni ninguno de los elementos que habitualmente aparecen en el BODY antes del elemento FRAMESET que es el que define la creación del FRAME. Si esto no se cumple, el FRAME será ignorado.

Sintaxis:

<html>
<head>
<title>Conocimiento Libre</title>
</head>
<FRAMESET>
<frame src="pagina.html">
</FRAMESET>
</html>

Ejemplo:

<html>
<head>
<title>Conocimiento Libre</title>
</head>
<FRAMESET COLS=30%,20%,50%>
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="pagina3.html">
</FRAMESET>
</html>

En Resumen el Frame divide tu pagina html en 3 partes y en cada parte una pagina html (3 paginas en 1).

Atributos:

COLS: Gestionara la division del html en lineas verticales, debera ir acompañado del tamaño de cada parte o division de esta, 100% es el tamaño total.

ROWS: Gestionara la division en partes Hoprizontales, tambien debera ir acompañado de su tamaño en %.

<html>
<head>
<title>Conocimiento Libre</title>
</head>
<FRAMESET ROWS=30%,20%,50%>
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="pagina3.html">
</FRAMESET>
</html>

Combinación de Rows y Cols

<html>
<head>
<title>Conocimiento Libre</title>
</head>
<FRAMESET COLS=20%,*>
<frame src="pagina1.html">
<FRAMESET ROWS=50%,*>
<frame src="pagina2.html">
<frame src="pagina3.html">
</FRAMESET>
</html>

BORDER: Controlaras el tamaño de los bordes.

BORDERCOLOR: Controlara el color de los bordes.

SCROLLING: Controlara si el frame tendra barra desplazadora.

<html>
<head>
<title>Conocimiento Libre</title>
</head>
<FRAMESET COLS="20%,*" border="10">
<frame src="pagina1.html" bordercolor="red" scrolling="no">
<FRAMESET ROWS=50%,*>
<frame src="pagina2.html" border="blue" scrolling="no">
<frame src="pagina3.html">
</FRAMESET>
</html>