13
I.16.- Tablas.
Las tablas surgieron con la versión HTML 3.0. Las tablas nos permiten representar y ordenar cualquier elemento
de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de
información de una manera que puede representarse rápida y fácilmente.
El contenido de una tabla lo debemos desarrollar entre las tags (etiquetas) <table>...</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se
calcularán automáticamente según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las tags (etiquetas) <tr>...</tr>. Las tags <th> y <td> con sus
correspondientes tags (etiquetas) de cierre, sirven para indicar las filas individuales dentro de cada fila. Las tags
(etiquetas) <th>...</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en
negrita. Las tags <td>...</td> indican que se trata de celdas comunes. Ejemplo:
Programa #6. Copie el código que se encuentra en el rectángulo de la derecha y guárdelo con el nombre de
(prog_06.htm). Objetivo: conocer las partes principales del código para crear una tabla. Ejecute el programa y observe
que se imprimirá la imagen que se encuentra en el rectángulo de la izquierda. Coloque sus datos personales al inicio
del Programa, entre title debe colocar el nombre del programa. Coloque un hipervínculo en [Link] para leer el
programa 6.
Tablas básicas <html>
<head>
Cabecera 1 Cabecera 2 Cabecera 3 <TITLE>Texto recomendado</TITLE>
</head>
Dato 1 Dato 2 Dato 3 <body>
Dato 4 Dato 5 Dato 6 <H1>Tablas básicas</H1>
<TABLE BORDER="1">
<TR>
<TH>Cabecera 1</TH>
<TH>Cabecera 2</TH>
<TH>Cabecera 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>
</BODY>
</html>
BORDER="1" le da un grosor a la línea que forma la tabla.
<table>...</table> (apertura y cierre de una tabla).
<tr>..</tr> (crea una fila, renglón o línea "t de table=tabla y r de row=renglón, fila o línea").
<td>..</td> (creación de una columna "d data").
<th>..</th> (crea una columna; el texto se imprime en negritas. Se le conoce como encabezado "h de cabeza,
cabecera, encabezado").
14
============= Pasos para crear una Tabla: =============
1.- En primer lugar, entre las etiquetas del cuerpo del documento en html, escribimos la instrucción de inicio y fin
de la etiqueta TABLE dejando un espacio entre ellas para insertar posteriormente el resto de las etiquetas y demás
instrucciones, así como más tablas dentro de la primera o fuera de ella:
<TABLE>
...Otras etiquetas, incluyendo más de tablas e instrucciones...
</TABLE>
2.- A continuación insertamos las filas. La tabla que nos hemos propuesto crear consta de dos filas. Por lo tanto
debemos usar la etiqueta TR dos veces. Lo que insertemos en la primera (entre la instrucción de inicio y la instrucción
de fin) será el contenido de la primera fila y lo que insertemos en la segunda será el contenido de la segunda fila:
<TABLE> <!-- Esta es una de las más sencillas representaciones de una tabla. -->
<TR> </TR> <!-- A medida que avancemos será posible que tenga mejor aspecto en el -->
<TR> </TR> <!-- momento de imprimirse en pantalla. Le hace falta la visibilidad del contorno-->
</TABLE> <!-- el párrafo, color, espaciamiento, alineación entre otros argumentos-->
3.- El tercer paso será definir el contenido de cada fila. En este caso sólo existe una fila y dos columnas. Como
hemos explicado antes, para crear una celda debemos usar la etiqueta TD. Entre la instrucción de inicio y la instrucción
de fin de esta etiqueta será donde insertaremos el verdadero contenido de la tabla. En este primer ejemplo sencillo será
simplemente texto, pero puede ser cualquier otro elemento web como imágenes, listas, etc. Volviendo a nuestro
ejemplo, para cada fila debemos escribir el siguiente código:
<table>
<TR>
<TD>
Columna1
</TD>
<TD>
Columna2
</TD>
</TR>
</table>
Si no se le coloca el atributo border y con un valor mayor que cero, no aparecerán las líneas. Por lo que se
imprimirá lo siguiente: Columna1 Columna2
4.- El cuarto paso, es ponerlo todo junto repitiendo el código anterior para cada fila. El código final de la tabla
será:
<TABLE>
<TR>
<TD>
<font size="5">Fila1,Columna1 </font>
</TD>
<TD>
<font size="5">Fila1,Columna2 </font>
</TD>
</TR>
<TR>
<TD>
15
<font size="5">Fila2,Columna1 </font>
</TD>
<TD>
<font size="5">Fila2,Columna2 </font>
</TD>
</TR>
</TABLE>
Recuerde que si sólo colocamos <table> se mostrará como sigue, pero si colocamos la orden de border, las
cosas cambian. Como es el ejemplo inicial y el primero del subtema Encabezado de la tabla.
Fila1,Columna1 Fila1,Columna2
Fila2,Columna1 Fila2,Columna2
Si a la apertura de la tabla le agregamos border, bordercolor, tamaño y color del texto, color al fondo de la tablita
y a una celda, quedaría de la siguiente manera:
Fila1,Columna1 Fila1,Columna2
Fila2,Columna1 Fila2,Columna2
El código sería el siguiente:
Programa #7. Copie el siguiente código html y guárdelo con el nombre de prog_07.htm, haga algunos cambios
para que observe las variaciones en la creación de tabla. Objetivo: conocer los pasos básicos en la creación de una
tabla. Coloque sus datos personales al inicio del Programa, entre title debe colocar el nombre del programa.
Coloque un hipervínculo en [Link] para leer el programa 7.
<html>
<head>
<title> Texto recomendado</title>
</head>
<body>
<TABLE BORDER="5" bordercolor="#006600" bgcolor="#00ccff"> <!-- se asigna al bordo de la tablita un valor de 5
pixeles, un color verde y al fondo de la tabla un color común a excepción de la última celda -->
<TR>
<TD>
<font size="7">Fila1,Columna1 </font> <!-- Por defecto sólo aparece lo negro en la letra-->
</TD>
<TD>
<font size="7" color="#0000ff">Fila1,Columna2 </font> <!-- Se le asigna color a la letra -->
</TD>
</TR>
<TR>
<TD>
<font size="7" color="#00ff00">Fila2,Columna1 </font> <!-- Se le asigna color a la letra -->
</TD>
<TD bgcolor="#0055aa"> <!-- Se le asigna color al fondo de la celda-->
<font size="7" color="#ff0000">Fila2,Columna2 </font> <!-- Se le asigna color a la letra de la celda -->
</TD>
</TR>
</TABLE>
16
</body>
</html>
En programas anteriores, en <Body> se aplicó bgcolor para colocar color al fondo, en el caso de las tablas será
sólo al inicio de la tabla en la etiqueta correspondiente <table>. De la misa forma si se desea color a una sola celda se
aplica el código en <TD> y si lo fuera en toda una fila, entonces se aplicaría en <TR>
El gráfico es similar al de Excel: se crea una celda formada por el cruce de una fila por el de una columna.
============= Encabezado de la Tabla =============
Este encabezado se crea mediante el atributo caption mostrado en el código siguiente:
<caption><font color="#800080" size="4">Mi Tablita. Texto arriba.</font></caption>. Que se colocaría después
de la etiqueta <table> como inicio.
El gráfico sería el siguiente:
Mi Tablita. Texto arriba.
Fila1,Columna1 Fila1,Columna2
Fila2,Columna1 Fila2,Columna2
Caption tiene dos opciones: arriba de la tabla: <caption align="top"> arriba o abajo <caption
align="bottom">. Sin ninguna instrucción, la información se coloca en la parte superior de la tabla.
Si colocamos <caption align="bottom">, la modificación estaría así:
<caption align="bottom”><font color="#800080" size="4">Mi Tablita. Texto abajo.</font></caption>.
No olvide que debe colocarse después de la etiqueta <table> con el código apropiado para que se imprima texto
en la parte superior o inferior de la tablita.
Programa #8. Organice el código html para que cumpla el objetivo del programa y guárdelo con el nombre de
prog_08.htm. Objetivo: demostrar el uso de caption para imprimir texto arriba o debajo de la tabla: debe usar código
para que imprima dos tablas; una con texto arriba y la otra con texto abajo. Coloque sus datos personales al inicio del
Programa, entre title colocar el nombre del programa. Coloque un hipervínculo en [Link] para leer el programa 8.
Fila1,Columna1 Fila1,Columna2
Fila2,Columna1 Fila2,Columna2
Mi Tablita. Texto abajo.
Alineación de la Tabla: Para alinearse al centro: En este caso sólo se escribe la orden dentro de <table>
incluyendo las que tiene, como sigue:
<table align="center" BORDER="5" bordercolor="#006600" bgcolor="#00ccff" width=30%>>.
Observe que la imagen o tabla se ha centrado:
Fila1,Columna1 Fila1,Columna2
Fila2,Columna1 Fila2,Columna2
Mi Tablita. Texto abajo.
Para alinearse a la izquierda: En este caso sólo se escribe la orden dentro de <table> incluyendo las que
tiene, como sigue:
17
<table align="left" BORDER="5" bordercolor="#006600" bgcolor="#00ccff">. Esta opción no es necesaria, pues
si no se indica se carga a la izquierda. Como podrá observar en figuras anteriores a la centrada.
Para alinearse a la derecha: En este caso sólo se escribe la orden dentro de <table> incluyendo las que tiene,
como sigue:
<table align="right" BORDER="5" bordercolor="#006600" bgcolor="#00ccff">. Si se colocara la imagen de arriba
alineada a la derecha, simplemente estaría cargada a ese lado, creo que no hay necesidad de demostrarlo.
============= Anchura de la tabla =============
En los ejemplos anteriores, las tablas se encuentran al tamaño justo para que el texto aparezca, esto ocurre
cuando no se le indica el lugar o espacio que deseamos siempre que no sea menor al necesario de la información
escrita, pero en el siguiente ejemplo ocurre algo diferente. Se le especifica su anchura, siendo todo lo ancho de la
pantalla. El valor de la anchura puede estar entre comillas o no.
<TABLE BORDER="5" bordercolor="#006600" bgcolor="#00ccff" width=100%>
Fila1,Columna1 Fila1,Columna2
Fila2,Columna1 Fila2,Columna2
Tablita a lo ancho de la pantalla
Con las características anteriores, pero al 50%, el código sería como sigue:
<TABLE align="center" BORDER="5" bordercolor="#006600" bgcolor="#00ccff" width=50%>
Tablita al 50% de anchura y centrada
Fila1,Columna1 Fila1,Columna2
Fila2,Columna1 Fila2,Columna2
También es posible alinear, con cualquier de las tres opciones, el dato encontrado en una celda. En el siguiente
ejemplo se alínea la tablita a la derecha y en la primera celda de la primera columna se centra el dato y en la segunda
celda de la primera columna se alínea a la derecha el texto:
<TABLE align="right" BORDER="5" bordercolor="#006600" bgcolor="#00ccff" width=50%>
Tablita al 60% de ancho y alineada a la derecha
Fila1,Columna1 Fila1,Columna2
Fila2,Columna1 Fila2,Columna2
He aquí el código completo en el siguiente Programa:
Programa #9. Copie el siguiente código html y guárdelo con el nombre de prog_09.htm, haga algunos cambios
para que observe las variaciones en la alineación y anchura de la tabla. Reproducir tres tablas para que las coloque;
una a la izquierda, otra al centro y la otra a la derecha. Objetivo: conocer el código para alinear y darle anchura a la
tabla. Coloque sus datos personales al inicio del Programa, entre title debe colocar el nombre del programa.
Coloque un hipervínculo en [Link] para leer el programa 9.
<html>
<head>
<title> Texto recomendado </title>
</head>
<body>
18
<TABLE align="right" BORDER="5" bordercolor="#006600" bgcolor="#00ccff" width=60%> <!-- se alínea la tablita a la
derecha -->
<TR>
<TD><p align="center"> <!-- se alínea el contenido de la celda al centro -->
<font size="3">Fila1,Columna1 </font>
</TD>
<TD>
<font size="5" color="#0000ff">Fila1,Columna2 </font>
</TD>
</TR>
<TR>
<TD><p align="right"> <!-- se alínea el contenido de la celda a la derecha -->
<font size="3" color="#00ff00">Fila2,Columna1 </font>
</TD>
<TD bgcolor="#0055aa">
<font size="5" color="#ff0000">Fila2,Columna2 </font>
</TD>
</TR>
</TABLE>
</body>
</html>
============= Ancho y Alto de la celda =============
Width es para lo ancho de una celda en pixeles o en tanto por ciento %. height es para alto de una celda en
pixeles.
Dimensiones de la celda, Fila1, Columna2. Lo ancho es el 70% del 75% total de la tabla y con 400 pixeles de
alto. La apertura de la celda quedaría así: <TD width=70% height=400>.
Las Instrucciones width y height se usan para darle forma a una imagen; mediante su determinación de lo ancho
y lo alto. Width se usó para crear líneas. Tal vez se vea en posteriores creaciones de diseños en la web.
Si se amplía lo alto afecta lo alto de la siguiente celda (Fila1,Columna1). Pero si se cambia lo ancho de esta
celda afecta la anchura de la celda de la izquierda hasta cubrir lo que tiene respetando el espacio reservado para su
información. Si se aplican valores mayores a los permitidos en una celda, no se hará más ancha la tabla.
Alineando la imagen.
Quizás te hayas dado cuenta de que el navegador, si no tiene otras instrucciones y la imagen no está insertada
en un párrafo de texto, la coloca a la izquierda y si está dentro de un texto. Con el atributo align [¡en desuso!] podemos
cambiar esto, especificando la colocación de la imagen respecto del texto:
<img src="../jpg/[Link]" align="right" width="168" height="180" alt="Alineada a la derecha">
La imagen se alínea a la derecha del lugar en que se encuentre; ya sea texto o espacio sin texto.
<img src="../jpg/[Link]" align="left" width="168" height="180" alt="Alineación a la izquierda" >
Aquí indicamos que la imagen se sitúe a la izquierda.
Para colocar texto a la imagen se procede de la siguiente manera, la característica del atributo puede contener
o no comillas:
19
Insertando align="top" en la etiqueta, el texto se alínea en la parte superior del gráfico.
Insertando align=middle en la etiqueta, el texto se coloca en el centro del gráfico.
Insertando align="bottom" en la etiqueta, el texto se coloca en la base del gráfico.
Cuando la orden align es para el contenido de un renglón o celda y si en determinada celda colocamos una
imagen a la que se le coloca un texto con las instrucciones anteriores; la primera orden (align) es para la imagen y sus
características son (left, center o right) y para el texto que identifique la imagen será valign con las características (top,
middle o bottom). La instrucción de valign es aplicable dentro de una celda.
Las posibilidades son bastantes sencillas. Por eso es frecuente acudir a un truco: incluir tanto el gráfico como el
texto dentro de tablas. Es muy importante aprender el manejos de gráficos; de esto depende la buena presentación de
la web, más exigente es cuando se trata de una web comercial, donde se necesita llegar a al gusto de cada cliente;
provocando el objetivo de dicho sitio, como es el vender.
Alineando imágenes... con estilo.
Como align ha sido marcado como elemento en desuso sí se utiliza con ciertas etiquetas, entre ellas img,
hemos de acudir de nuevo a las hojas de estilo en cascada (CSS) para alinear nuestras imágenes.
Existen varias formas de hacerlo, quizás la más versátil sea convertir la imagen en objeto flotante con float:
<img src="../jpg/[Link]" style="float:right" width="168" height="180" alt="Derecha">
La imagen se coloca a la derecha, aunque lo hayamos escrito a su izquierda y derecha.
<img src="../jpg/[Link]" style="float:left" width="168" height="180" alt="Izquierda">
Aquí decimos que la imagen se sitúe a la izquierda, el texto a la derecha, si lo hubiera.
<img src="../jpg/[Link]" style="float:center" width="168" height="180" alt="Centrado"> Aquí indicamos que la
imagen se sitúe al centro.
======= Alineamiento de imagen en una celda y texto en dicha imagen =======
Align=top, middle o bottom se usa para alinear texto a la derecha de la imagen arriba, en medio o al pie.
Siempre que vaya en <td>...</td> y a la derecha del llamado de la imagen, pues se trata de que el texto se
encuentra en una celda y que acompaña a una imagen, como el caso del diablillo. Observemos la imagen y su código:
Fila1,Columna1
Programa #10. Copie el siguiente código html y guárdelo con el nombre de prog_10.htm. Haga algunos
cambios para que observe las variaciones en la impresión de la imagen en la celda y del texto a la derecha de la
imagen. Objetivo: Conocer las variables width, height para graficar una celda con determinada anchura y altura.
Conocer las instrucciones para que una imagen pueda imprimirse en las 9 posiciones dentro de una celda y su
respectivo texto a la derecha. Además la alineación de imágenes. Coloque sus datos personales al inicio del Programa y
20
en una tabla, entre title debe colocar el nombre del programa. Coloque un hipervínculo en [Link] para leer el
programa 10.
<html>
<head>
<title> Texto recomendado</title>
</head>
<body>
<TABLE align="center" BORDER="5" bordercolor="#006600" bgcolor="#00ccff" width=80%>
<TR valign=middle align=center> <!-- valign coloca la imagen top, middle o bottom -->
<!-- align coloca la imagen a la left, center o right -->
<TD><p align="center"><font size="3">Fila1,Columna1</font>
</TD>
<TD width=70% height=400>
<p><font size="4"><img border="0" src="[Link]" width="180" height="190" align="bottom">Diablito</font></p>
<!-- align coloca el texto top, middle o bottom de la imagen -->
</TD> <!—Solo align aplica a top, middle, bottom, left, center o right para el texto -->
</TR> <!— Valign y align deben estar unidos para mover la imagen en una celda en sus 9 posiciones -->
<TR>
<TD><p align="right">
<font size="3" color="#ff2200">Fila2,Columna1</font>
</TD>
<TD bgcolor="#0055aa">
<font size="5" color="#ffffff">Fila2,Columna2</font>
</TD>
</TR>
</TABLE>
</body>
</html>
Coloque una imagen debajo de la tabla y a la derecha.
Si sólo hubiera texto en la celda, el efecto sería el mismo. Valign=middle align=center está colocado en un <tr>,
en este caso los efectos son para toda la línea. Si se colocaran en un <td>, sólo se aplicaría en esa celda.
Valign=middle align=center se ha colocado, como lo observa en el código, dentro de la apertura de <tr> para
que la imagen esté a la mitad de altura y centrada; sus variantes son las siguientes:
Valign=top align=left Imagen arriba y a la izquierda.
Valign=middle align=left Imagen en medio y a la izquierda.
Valign=bottom align=left Imagen abajo y a la izquierda.
Valign=top align=center Imagen arriba y centrada.
Valign=middle align=center Imagen en medio y centrada.
Valign=bottom align=center Imagen abajo y centrada.
Valign=top align=right Imagen arriba y a la derecha.
Valign=middle align= right Imagen en medio y a la derecha.
Valign=bottom align= right Imagen abajo y a la derecha.
=========== Celdas que abarcan varias filas o columnas ===========
Celda de dos columnas
Fila2,Columna2
Celda de dos filas
Fila3,Columna2
21
Programa #11. Copie el siguiente código guárdelo con el nombre de prog_11.htm y realice algunos cambios para que
observe la aplicación del objetivo. Objetivo: conocimiento de las instrucciones para entender el tema de las Celdas que
abarcan varias filas o columnas. Coloque sus datos personales al inicio del Programa, entre title debe colocar el nombre
del programa. Coloque un hipervínculo en [Link] para leer el programa 11.
<html>
<head>
<title>Texto recomendado</title>*
</head>
<body>
<table BORDER="1">
<tr>
<th COLSPAN="2">Celda de dos columnas</th>
</tr>
<tr>
<td ROWSPAN="2">Celda de dos filas</td>
<td>Fila2,Columna2 </td>
</tr>
<tr>
<td>Fila3,Columna2 </td>
</tr>
</table>
</body>
</html>
<th COLSPAN="2">Celda de dos columnas</th> Expande o se recorre a 2 columnas.
<th ROWSPAN="2">Celda de dos renglones</th> Expande o se recorre a 2 renglones.
============= Separación o distancia de Celdas =============
<table cellspacing="10" border="1"> Debe colocarse siempre en la etiqueta de inicio de la tabla. La orden de
separación entre celdas será de 10 pixeles y con border=1. Observe el código colocado en Body y su gráfica.
Programa #12. Copie el siguiente código y guárdelo con el nombre de prog_12.htm, agregue lo que falte para
completar éste programa y realice algunos cambios para que observe la aplicación del objetivo. Objetivo: El alumno
conocerá las instrucciones para darle distancia a las celdas entre sí y del borde de la tabla. Coloque sus datos
personales al inicio del Programa, entre title debe colocar el nombre del programa. Coloque un hipervínculo en
[Link] para leer el programa 12.
<table CELLSPACING="10" BORDER="4" bordercolor="#0000FF">
<tr>
<th COLSPAN="2"><font size="4">Celda de dos columnas </font> </th>
</tr>
<tr>
<td ROWSPAN="2"><font size="4">Celda de dos filas </font> </td>
<td><font size="4">Fila2,Columna2 </font> </td>
</tr>
<tr>
<td><font size="4">Fila3,Columna2 </font> </td>
</tr>
</table>
22
Así quedaría la gráfica de la tabla usando cellspacing.
Celda de dos columnas
Fila2,Columna2
Celda de dos filas
Fila3,Columna2
============= Márgenes de Celdas =============
<table CELLPADDING="10" BORDER="1"> Distancia del texto a las líneas que forman la celda o márgenes de
celdas. Debe colocarse siempre en la etiqueta de inicio de la tabla. Observe el código que debe colocarse en body y la
gráfica que se encuentra en seguida.
Programa #13. Copie el siguiente código y guárdelo con el nombre de prog_13.htm, agregue lo que falte para
completar éste programa y realice algunos cambios para que observe la aplicación del objetivo. Objetivo: El alumno
conocerá las instrucciones para darle márgenes a las celdas o distancia del texto de las líneas de la celda. Coloque sus
datos personales al inicio del Programa, entre title debe colocar el nombre del programa. Coloque un hipervínculo en
[Link] para leer el programa 13.
<table CELLPADDING="10" BORDER="3" bordercolor="#0000FF">
<tr>
<th COLSPAN="2"><font size="4">Celda de dos columnas </font> </th>
</tr>
<tr>
<td ROWSPAN="2"><font size="4">Celda de dos filas </font> </td>
<td><font size="4">Fila2,Columna2 </font> </td>
</tr>
<tr>
<td><font size="4">Fila3,Columna2 </font> </td>
</tr>
</table>
Así quedaría la gráfica de la tabla usando cellpadding.
Celda de dos columnas
Fila2,Columna2
Celda de dos filas
Fila3,Columna2
Es posible combinar las dos opciones; CELLSPACING y CELLPADDING
============= Anidamiento de Tablas =============
Un anidamiento de Tablas es, como su palabra indica, una tabla dentro de otra. Es posible realizar los
anidamientos de acuerdo a nuestra necesidad, no hay límite. O al menos no se ha conocido a alguien que haya llegado
a un fin. Usando el atributo <td NOWRAP> evitamos que el texto sea partido en varias líneas en la misma celda, sin
embargo no es recomendable usarlo en líneas muy largas, pues la ventana tomará más anchura.
Programa #14. Copie el siguiente código y guárdelo con el nombre de prog_14.htm. Realice algunos
cambios para que observe la aplicación del objetivo. Objetivo: El alumno conocerá las instrucciones para conocer el
23
anidamiento de tablas. Coloque sus datos personales al inicio del Programa. Coloque un hipervínculo en [Link] para
leer el programa 14.
.
<html>
<head>
<title>Anidamiento de Tablas</title>
</head>
<body>
<table BORDER="5" bordercolor="#0000FF">
<tr>
<td>
<table BORDER="4" bordercolor="#006400"> <!-- TABLA ANIDADA DENTRO DE OTRA-->
<tr>
<td NOWRAP> <!-- No permite el corte de información -->
<p align="center"><b><font size="4" color="#008000">Visite mi Espacio</font></b>
</td>
</tr>
<tr>
<td><a HREF="[Link] 226</a>
</td>
</tr>
<tr>
<td><a HREF="[Link]">Web del Profesor Sebastián</a>
</td>
</tr>
<tr>
<td><a HREF="[Link]">Sitio Youtube</a></td>
</tr>
</table>
</td> <!-- FIN TABLA ANIDADA -->
<td><img SRC="[Link]" width="400" height="232">
</td>
</tr>
</table>
</body>
</html>
Así quedaría la gráfica.
Visite mi Espacio
CBTis 226
Web del Profesor Sebastián
Sitio Youtube
24
I.17.- Listas (desordenadas y ordenadas).
Las posibilidades que nos ofrece HTML en cuestión de tratamiento de texto son realmente notables. No se
limitan a lo visto hasta ahora, sino que van más lejos todavía. Varios ejemplos de ello son las listas, que sirven para
enumerar y definir elementos, los textos preformateados y las cabeceras o títulos.
Las listas son utilizadas para citar, numerar y definir objetos. También son utilizadas corrientemente para
desplazar el comienzo de línea hacia la derecha.
Podemos distinguir tres tipos de listas:
* Listas desordenadas
* Listas ordenadas
* Listas de definición
********* Listas Desordenadas *********
Son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista es citado
por medio de una etiqueta <li> (sin cierre, aunque no hay inconveniente en colocarlo).
Ejemplo de listas Desordenadas:
<p>Países del mundo</p>
<ul>
<li>Argentina
<li>Perú
<li>Chile
</ul>
Se imprime:
Países del mundo
Argentina
Perú
Chile
Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del
atributo type incluido dentro de la etiqueta de apertura <ul>, si queremos que el estilo sea válido para toda la
lista, o dentro de la etiqueta <li> si queremos hacerlo específico de un sólo elemento.
La sintaxis es del siguiente tipo:
<ul type="tipo de viñeta"> donde tipo de viñeta puede ser uno de los siguientes:
circle = Círculo ○
disc = Punto ●
square = Cuadrado ▄
Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel y en el último elemento colocaremos un
círculo. Para ello vamos a colocar el atributo type en la etiqueta <ul>, con lo que afectará a todos los elementos de la
lista. Si no se le coloca el atributo para un elemento o para todos, por defecto se imprime el correspondiente a disc,
siendo un punto. En el siguiente ejemplo, en la etiqueta <ul> se aplica el tipo de lista square, pero podemos variar con
los otros dos tipos en la forma que queramos.
Ejemplo de combinación de tipos de elementos:
<ul type="square">
<li>Elemento 1
<li>Elemento 2
<li>Elemento 3
<li type="circle">Elemento 4
</ul>
25
Se imprime:
Elemento 1
Elemento 2
Elemento 3
o Elemento 4
********* Listas Ordenadas *********
En este caso usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento será igualmente precedido de su
etiqueta <li>.
Ejemplo de listas Ordenadas:
<p>Reglas de comportamiento en el trabajo</p>
<ol>
<li>El jefe siempre tiene la razón
<li>En caso de duda, aplicar regla 1
</ol>
Se imprime:
Reglas de comportamiento en el trabajo.
1. El jefe siempre tiene la razón
2. En caso de duda, aplicar regla 1
Del mismo modo que para las listas desordenadas con sus atributos únicos de square, disc y a circle, las listas
ordenadas ofrecen la posibilidad de modificar el estilo, sustituyendo a square, disc y a circle por cinco diferentes. En
concreto, nos es posible especificar el tipo de numeración empleado eligiendo entre números (1, 2, 3...), letras (a, b, c...)
y sus mayúsculas (A, B, C,...) y números romanos en sus versiones mayúsculas (I, II, III,...) y minúsculas (i, ii, iii,...). Esta
forma de usar las listas es para los elementos que constituyen o forman un procedimiento en orden lógico. Esta
modificación no es posible en las listas desordenadas, su mismo nombre y su estilo lo aclara.
Para realizar dicha selección debemos utilizar, como para el caso precedente, el atributo type, el cual será situado
dentro de la etiqueta <ol>. Los valores que puede tomar el atributo son:
1 Para ordenar por números.
a Por letras del alfabeto minúsculas.
A Por letras del alfabeto mayúsculas.
i Ordenación por números romanos en minúsculas.
I Ordenación por números romanos en mayúsculas.
Puede que en algún caso deseemos comenzar nuestra enumeración por un número o letra que no tiene por qué
ser necesariamente el primero de todos. Para solventar esta situación, podemos utilizar un segundo atributo, start, que
tendrá como valor un número. Este número, que por defecto es 1, corresponde al valor a partir del cual comenzamos a
definir nuestra lista. Para el caso de las letras o los números romanos, el navegador se encarga de hacer la traducción
del número a la letra correspondiente.
Ejemplo de Ordenamiento por números:
<p>Ordenamos por números</p> <!.. Sin el atributo “star” ..>
<ol type="1">
<li>Elemento 1
<li> Elemento 2
</ol>
26
Se imprime:
1. Elemento 1
2. Elemento 2
Ejemplo de Ordenamiento por letras minúsculas:
<p>Ordenamos por letras</p> <!.. Sin el atributo “star” ..>
<ol type="a">
<li>Elemento a
<li> Elemento b
</ol>
Se imprime: Elemento a
a. Elemento b
Ejemplo de Ordenamiento por letras mayúsculas:
<p>Ordenamos por letras</p> <!.. Sin el atributo “star” ..>
<ol type="A">
<li>Elemento a
<li> Elemento b
</ol>
Se imprime:
A. Elemento a
B. Elemento b
Ejemplo de Ordenamiento por números romanos iniciando desde el 10:
<p>Ordenamos por números romanos empezando por el 10</p>
<ol type="i" start="10">
<li>Elemento x
<li> Elemento xi
</ol>
Se imprime:
Ordenamos por números romanos empezando por el 10
x. Elemento x
xi. Elemento xi
Así es posible aplicar un inicio distinto en las demás formas de enumerar elementos en estas listas Ordenadas (para
1, a, A e i).
I.18.- Sonido.
Podemos disfrutar de tres formas los sonidos o música en nuestra Página Web, veamos:
1.- Sonido o Música en línea:
Microsoft Internet Explorer también ha introducido una nueva etiqueta para posibilitar la inclusión de sonido en
las Páginas Web. Este sonido será cargado junto con la página y empezará a ser tocado sin requerir ninguna acción por
27
parte del usuario. Para incluir un sonido de fondo como éste debemos usar la etiqueta BGSOUND, éste atributo
proviene de BackGround.
Veamos un ejemplo:
<BGSOUND SRC="[Link]" loop='-1'>. Hay otros atributos para el sonido, pero sólo usaremos el
anterior, donde su función es reproducirse repetidamente hasta que el navegante abandone la página o archivo HTML
de su propio sitio de determinado directorio o carpeta.
2).- Sonidos para Guardar. En esta actividad sólo necesitamos colocar un hipervínculo dirigido al archivo de
nuestra elección, por ejemplo:
Si deseamos guardar la melodía Canta Corazón de Alejandro Fernández y que tiene el nombre, af-
cantacorazon.mp3. Se considera que dicha melodía se encontrará en el mismo lugar donde está el archivo html en
donde se encuentra el enlace de su llamado, la forma de escribir el código sería la siguiente:
<a href="af-cantacorazon.mp3">Canta Corazón</a>
No olvide que si se encuentra el archivo de música o sonido en algún directorio de su sitio, deberá colocar la
dirección exacta. Lo mismo ocurriría si se encuentra en otros sitios suyos o ajenos, en donde deberá acompañar el
hipervínculo con http, nombre de la URL, usuario y directorio(s), como se muestra en el siguiente ejemplo:
<a href="[Link] Corazón</a>
Al estar bien nuestro enlace y al aplicar clic, se nos presentará la común ventana para elegir, en este caso,
aplicamos dando clic en guardar, como se muestra en la imagen siguiente. Si no apareciera la ventana, significa que el
archivo se ejecutaría de inmediato o no estaría bien el enlace; si es lo primero y desea guardar el archivo en su unidad
destino, coloque el mouse en el enlace y elija guardar destino como.
3).- Para Abrir. Esta opción se aplica al aparecer la
ventana de la derecha y que deseemos escuchar la melodía. Al
aplicar clic en Abrir, el navegador activará el lector primario
instalado para la lectura de la melodía o sonido, en este caso
se trata de WinAmp, en otros casos podría tratarse Windows
Media Player, etc. La desventaja de este servicio, es que
debemos esperar a que se baje todo el archivo a la memoria
RAM de la computadora para luego el lector proceder a
reproducir el contenido.
Programa #15. Objetivo: El alumno tendrá conocimientos para el uso de Listas desordenadas, Listas
ordenadas, Sonido y el uso de las tablas para colocar los hipervínculos. En una tabla y al inicio del programa deberá
colocar el nombre de la escuela, nombre del alumno, fecha y objetivo del programa. Debe guardarlo con el nombre de
prog_15.htm
1.- Listas desordenadas. 2.- Listas Ordenadas.
Para comprobar los 2 tipos de Listas podrá colocar un Hipervínculo en [Link] de donde leerá el archivo que
contendrá los 2 tipos de Listas. También puede crear un archivo para cada tipo de Lista, los que se deben leer desde
[Link] con su enlace correspondiente. Los archivos usados en este programa #15 pueden estar en la carpeta de
programas, en donde depositará todos los archivos que se vayan a utilizar en el programa #15, no importa que sean
distintos. Esto es para facilitarte la terminación de esta actividad.
3.- Sonido. Debe colocar un sonido de fondo en el programa #15.
4.- Debe colocar un hipervínculo en el programa #15 para bajar el sonido.
28
5.- En [Link] debe colocar los hipervínculos en tablas para leer los programas que se han elaborado; del
Prog. #1 al #15.
Tema I.19. Dreamweaver.
Dreamweaver creará su propio [Link], por lo que el que ha tenido hasta el Programa #15, lo debe guardar
como index.htm1 para que haya espacio para el que organizará la nueva presentación. El alumno debe estar muy
atento para entender el funcionamiento de este Software en la creación de páginas Web. Es muy útil y se frecuentan los
errores o malos procedimientos cuanto se tiene poca concentración para entender lo que se está explicando.
La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto
que en este programa, sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están
hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias.
Características: Ofrece la posibilidad de crear botones flash, formularios, JavaScripts, y más, es de gran
ayuda. Además de poder insertar elementos web, encontramos una gran precisión en la importación de información de
Word y Excel, con las funciones de copiar y pegar.
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como
paneles (ventanas) o inspectores.
A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o
inspectores.
Dreamweaver es un software de Adobe para desarrollar y manejar sitios web tanto en sistemas operativos
MAC como en Windows.
Dreamweaver es una herramienta amigable con el usuario que le permite aún a los novatos crear contenido
Web. La aplicación despliega múltiples ventanas y paneles, que pueden ser personalizados.
Herramientas de DreamWeaver
1.- Barra de menú.
2.- Barra de herramientas de documentos.
3.- Ventana de documentos.
4.- Conmutador de espacios de trabajo.
5.- Grupo de paneles.
6.- Selector de etiquetas.
7.- Inspector de propiedades.
8.- Panel de archivos.
Los cuadros o frame(s), es una de las características de Dreamweaver. En la parte superior y en tablas se crea
un frame donde se coloca a la izquierda el logo de la Web o empresa, título de la Web y otros datos al gusto del
Programador.
En la parte izquierda por lo general es el frame donde se colocan los hipervínculos en tablas para el llamado de
la información de todo tipo contenida en la Web.
En el centro se encuentra el Frame para para la publicidad.
Actividad #16. Al lograr el gráfico creado con el Dreamweaver proceda a desarrollar los siguientes puntos:
1.- En la parte superior debe crear una tabla de un renglón y tres columnas para que coloque en las tres celdas
creadas el logo de la escuela, sus datos personales y en la tercera lo que el alumno quiera; logo, dato de la escuela o
personales.
2.- En el frame de la izquierda y en una tabla colocar los hipervínculos con botones flash para leer los
programas que se han elaborado; el Prog. #1 hasta el Prog. #15
3.- Colocar enlace para leer la galería fotográfica hecha con Dreamweaver, mínimo 12 Fotografías.
4.- En la parte superior, en tabla, tendrá el Logo, su nombre y el de la escuela.
5.- A la derecha y al centro contendrá un mensaje por el día de la Madre, con sustitución de imágenes.
6.- Cuando se lea un Hipervínculo de la izquierda, su contenido se colocará en donde deben colocarse el
mensaje a la Madre con sus imágenes de sustitución.
