Noveno Grado 2013: mayo 2013

miércoles, 22 de mayo de 2013

Vídeos en páginas Web

Etiqueta Embed: Nos permite mostrar un vídeo en una página web.
Atributos:
src: Este atributo permite mostrar el vídeo, debe asignar el nombre del archivo, los tipos de archivos son AVI, el MPEG y el MOV, Tambien acepta MP4.

A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.
Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributos autostart y loop.
El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y puede tomar los valores true o false.
El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los valores true o false.

Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la consola de control de vídeo. Estos atributos pueden tomar como valor un número, que indica el tamaño en píxeles. Si no se especifican estos atributos, la consola de control de vídeo se mostrará con el tamaño más adecuado al tamaño del vídeo.

Ejemplo para mostrar vídeos en una tabla:

<HTML>
<HEAD><TITLE> TABLAS </TITLE></HEAD>
<BODY background="fondo3.jpg">

<table border="3" align="Center">
<tr>
<th colspan="3"> <font face="Segoe Print" size="5" color="Red"> Tema a Tratar Español / Ingles </font> </th>
</tr>
<td align="Center"> <font face="Segoe Print" size="4" color="Red"> Tema </font> </td>
<td align="Center"> <font face="Segoe Print" size="4" color="Red"> Video </font> </td>
<td align="Center"> <font face="Segoe Print" size="4" color="Red"> Imagen </font> </td>
</tr>
<tr>
<td align="Center"> <font face="Segoe Print" size="3" color="Red">
Tema Español / Ingles
</font>
</td>
<td> <embed src="Video1.avi" autostart="false" loop="False" width="200" height="200" > </td>
<td> <img src="imagen1.gif" width="200" height="200"> </td>
</tr>
<tr>
<td align="Center"> <font face="Segoe Print" size="3" color="Red">
Tema Español<br>
Tema Ingles <br>
</font>
</td>
<td> <embed src="Video2.avi" autostart="false" loop="False" width="200" height="200" > </td>
<td> <img src="imagen2.gif" width="200" height="200"> </td>
</tr>
<tr>
<td align="Center"> <font face="Segoe Print" size="3" color="Red">
Tema Español<br>
Tema Ingles <br>
</font>
</td>
<td> <embed src="Video3.avi" autostart="false" loop="False" width="200" height="200" > </td>
<td> <img src="imagen3.gif" width="200" height="200"> </td>
</tr>
<tr>
<td align="Center"> <font face="Segoe Print" size="3" color="Red">
Tema Español<br>
Tema Ingles <br>
</font>
</td>
<td> <embed src="Video4.avi" autostart="false" loop="False" width="200" height="200" > </td>
<td> <img src="imagen4.gif" width="200" height="200"> </td>
</tr>
</table>

</BODY>
</HTML>

RESULTADO:

jueves, 9 de mayo de 2013

Diseño de Páginas Web con Tablas

Tabla <table>, Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse.

Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.

Fila <tr>, Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>.

Por ejemplo, para crear una tabla con dos filas escribiríamos: <table>
<tr>...</tr>
<tr>...</tr>
</table>

Columna o celda <td>, Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas.
Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila. Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>. Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla:

Debe escribir copiar el siguiente código al bloc de Notas:

<HTML>

<HEAD><TITLE> TABLAS </TITLE></HEAD>

<BODY>

<caption align="right" valign="top">Titulo de la tabla<tr>

<tr>

<th colspan="4"> PROMOCION DEL MES EN COMPUTADOR</th>

</tr>

<th rowspan="6">COMPUTADOR PERSONAL <BR> <img src="PC.jpg" width="200" height="200"> </th>

<tr>

<td align="Center"> Articulo </td>

<td> Imagen </td>

<td> Valor </td>

</tr>

<tr>

<td> Torre <br>

Contiene: <br>

Disco Duro de 1.000 Gigas <br>

4 Gigas en RAM <br>

1 Unidad de DVD <br>

Procesador de 3.5 GZ <br>

</td>

</tr>

<tr>

<td> Pantalla <br>

Tamaño 20 Pulgadas <br>

Conexiones de Alta definición <br>

</td>

</tr>

<tr>

<td> Teclado <br>

Configuración en Español <br>

</td>

</tr>

<tr>

<td> Mouse <br>

Tres Teclas <br>

Rodillo <br>

</td>

</tr>

</table>

</BODY>

</HTML>

Descargue las siguientes imágenes a la carpeta que contiene el código HTML (Bloc de Notas).

border: Adiciona un borde a la tabla.
colspan: Combina columnas formando una celda.

rowspan: Combina filas formando una celda.