Está en la página 1de 47

REPÚBLICA BOLIVARIANA DE VENEZUELA

MINISTERIO PARA LA ECONOMÍA POPULAR


INSTITUTO NACIONAL DE COOPERACIÓN EDUCATIVA

PROGRAMACIÓN EN HTML Y JAVA SCRIPT


MÓDULO DE APRENDIZAJE

CICLO DE FORMACIÓN: BÁSICO


COMPONENTE: GENERAL

CUADERNO DE ESTUDIO

VENEZUELA, 2006
REPÚBLICA BOLIVARIANA DE VENEZUELA
MINISTERIO PARA LA ECONOMÍA POPULAR
INSTITUTO NACIONAL DE COOPERACIÓN EDUCATIVA

Septiembre, 2006
Especialistas en Contenido
Edwin Hernández (T.S.U Informática - Gerencia Regional INCE Portuguesa)

Trascripción y Diagramación
Birley Carolina Escalona (Analista Productor de Medios – Gerencia Regional INCE Portuguesai)

Coordinación Técnica Estructural


División de Recursos para el Aprendizaje

Coordinación General
Gerencia General de Formación Profesional
Gerencia de Tecnología Educativa

1ra Edición 2006


Copyright INCE
ÍNDICE Estructuras de un Enlace..................................................39
TIPOS DE ENLACES.........................................................39
INTRODUCCIÓN.................................................................4 Enlaces de Página con Marco..........................................43
ENCABEZADO DE LA PÁGINA........................................3 Atributos de las Etiquetas (Frameset)..............................43
Título de la Página.............................................................3 JAVA SCRIPT......................................................................44
Descripción de Servidores.................................................3 Acceso de un Java Script en el cuerpo de la página o a
ESTRUCTURA DEL CUERPO DE LA PÁGINA ...............5 través de etiquetas............................................................45
Uso de Instrucciones Generales para Párrafos y Textos....5 Estructuración de Applets en java script..........................46
Estructuras del Cuerpo de la Página..................................5 REFERENCIAS BIBLIOGRÁFICAS...............................46
Diagramación Previa de la Página.....................................6
FUENTES..............................................................................7
Tipos de fuentes.................................................................7
Estructuras para la Personalización de las Fuentes ...........8
FONDOS ............................................................................10
Tipos de Fondos...............................................................10
TABLAS..............................................................................13
Determinación del Ancho................................................15
Espaciado entre Celdas....................................................15
Combinación ...................................................................16
IMÁGENES ........................................................................18
Estructuras de etiquetas para imágenes...........................18
Atributos..........................................................................19
Formatos a la Imagen......................................................19
Procedimiento Técnico para la Inserción de imágenes....20
CARACTERES ESPECIALES...........................................22
FORMULARIOS DE CONFIRMACIÓN Y ENVÍO.........25
MARQUESINAS................................................................27
INTRODUCCIÓN
Estructuras.......................................................................27
Formatos .........................................................................27
CONTADORES...................................................................29 El Cuaderno de Estudio PROGRAMACIÓN EN
Cómo Funcionan los Contadores.....................................29 HTML Y JAVA SCRIPT tiene como finalidad que el
Servicios Públicos para Contadores................................29
PUBLICACIÓN DE PÁGINA WEB..................................31 sujeto de aprendizaje adquiera los conocimientos,
Selección de Proveedor ..................................................31 necesarios para el desempeño eficiente en este tipo
Publicación de Páginas....................................................31
ENLACE.............................................................................39 de programación; teniendo como fin el establecer e
implementar métodos de trabajo, que faciliten al sujeto cliente – servidor dentro del ámbito de Internet. Los
su desarrollo en el campo laboral. programas Java Script, van instalados a los
documentos HTML y se encargan de realizar acciones
HTML (HyperText Markup Language) es un
en el cliente, como puede ser pedir datos,
lenguaje muy sencillo que permite describir hipertexto,
confirmaciones, mostrar mensajes, crear animaciones,
es decir, texto presentado de forma estructurada y
comprobar campos.
agradable, con enlaces (hyperlinks) que conducen a
otros documentos o fuentes de información
Es importante resaltar que el contenido
relacionadas, y con inserciones multimedia (gráficos,
presentado, se ajusta al programa de formación
sonido).
diseñado según los requerimientos de la Salida
Ocupacional, en donde los temas o puntos específicos
La descripción se basa en especificar en el texto
presentan ilustraciones y referencias bibliográficas,
la estructura lógica del contenido (títulos, párrafos de
que permitirán facilitar el aprendizaje. Seria
texto normal, enumeraciones, definiciones, citas), así
conveniente que investigue y comparta experiencias
como los diferentes efectos que se quieren dar
con sus compañeros y en otras fuentes de estudio, a
(especificar los lugares del documento donde se debe
fin de consolidar y enriquecer los conocimientos
poner cursiva, negrita, o un gráfico determinado) y
adquiridos.
dejar que luego la presentación final de dicho
hipertexto se realice por un programa especializado
(como Mosaic, o Netscape).

Buscando precisamente la interactividad con el


servidor (quien aloja las páginas), es así como nace
Java Script como una solución intermedia, diseñado
específicamente para el desarrollo e aplicaciones
Por ejemplo:
ENCABEZADO DE LA PÁGINA
<html>
<head>
Dentro del encabezamiento hay información del <title>
documento, que no se ve en la pantalla principal del Curso de HTML
</title>
BROWSER que es utilizado para visualizar el </head>
documento HTML, principalmente la información ...
</html>
encontrada en el encabezamiento es el título del
documento, comprendido entre las etiquetas <TITLE>
y </TITLE>. Descripción de Servidores

Sí una página trata sobre Internet, sus palabras claves


Título de la Página
pueden ser internet, computador, computadores, red,
El título de la página es el que aparecerá en la parte net, conexión, etc., y cuando alguien se inscribe a la
superior de la ventana del navegador, cuando la página para que los buscadores la reconozcan, toman
página esté cargada en él. estas palabras como las palabras clave. Por ejemplo,

Para asignar un título a una página es necesario si inscribimos nuestra página a Altavista

escribir el texto deseado entre las etiquetas <title> y <http://www.altavista.digital.com/>, revisará las

</title>. palabras claves, que están dentro de las etiquetas


<HEAD> y </HEAD> con la siguiente línea: <META
Estas etiquetas han de estar dentro de la cabecera,
HTTP-EQUIV="keywords" CONTENT="internet,
es decir, entre las etiquetas <head> y </head>.
computador, computadores, red, net, conexión">

Programamación en HTML y Java Script 3


Los buscadores son el medio por el cual una persona
busca información a su gusto y el buscador encuentra
páginas por categorías o por diversos otros criterios.
Estos buscadores contienen enlaces al web en
cualquier tema, por lo que si se necesita saber sobre
algo, lo encuentra.

Programación en HTML y Java Script


4
correspondiente de cierre). Con ella se obtiene una

ESTRUCTURA DEL CUERPO DE LA PÁGINA raya horizontal tan ancha como la pantalla, y con la

apariencia de estar embutida sobre el fondo, como se


Uso de Instrucciones Generales para Párrafos y puede observar a continuación:
Textos

Ejemplo práctico:
Antes de crear una página, se deben tomar algunas
consideraciones sobre el texto: Cuando se escribe en
En el procesador de texto copiamos lo siguiente:
el documento el texto que se quiere que aparezca en
<HTML>
la pantalla, se observa como éste se acomoda a ella,
<HEAD>
sin que se tenga que pulsar el retorno del carro. Si se
<TITLE> Mi página del Web - 1 </TITLE>
desea separar el texto en distintos párrafos se debe
</HEAD>
usar la etiqueta <P>, (que no tiene su correspondiente
<BODY>
etiqueta de cierre </P>)
<H1> <CENTER> Primera pagina </CENTER> </H1>
<HR>
El texto puede tener unas cabeceras, comprendidas
<P> Aquí va un segundo párrafo.
entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc.
</BODY>
(hasta el número 6), siendo el número indicativo del
</HTML>
tamaño.

Estructuras del Cuerpo de la Página


El tamaño mayor es el correspondiente al número 1.
Dentro del cuerpo está todo lo que queremos que
También están los separadores (horizontal rules), que
aparezca en la pantalla principal (texto, imágenes).
se consiguen con la etiqueta <HR> (no existe la
Programamación en HTML y Java Script 5
La estructura de un documento HTML queda de esta El documento en sí está dividido en dos zonas
manera:
principales:
<HTML> El encabezamiento, comprendido entre las
<HEAD>
etiquetas <HEAD> y </HEAD>
<TITLE> Título de la página </TITLE>
</HEAD> El cuerpo, comprendido entre las etiquetas
<BODY>
<BODY> y </BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY> Dentro del encabezamiento hay información del
</HTML>
documento, que no se ve en la pantalla principal,
principalmente el título del documento, comprendido
Diagramación Previa de la Página
entre las etiquetas <TITLE> y </TITLE>. El título debe
El principio esencial del lenguaje HTML (HyperText ser breve y descriptivo de su contenido, pues será lo

Markup Language) es el uso de las etiquetas (tags). que vean los demás cuando añadan nuestra página a
su bookmark (o agenda de direcciones).
Funcionan de la siguiente manera:

<XXX> Este es el inicio de una etiqueta.


</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en mayúsculas
o minúsculas, indiferentemente. Por claridad, se
usarán en este manual solamente las mayúsculas. Lo
que haya entre ambas etiquetas estará influenciada
por ellas. Por ejemplo, todo el documento HTML debe
estar entre las etiquetas <HTML> y </HTML>:
<HTML> [Todo el documento] </HTML>

Programación en HTML y Java Script


6
FUENTES Pero al confeccionar una página del Web, su autor
puede forzar a que el texto adopte un determinado
Es un conjunto de signos, observando todos ellos el
tipo de fuente, distinto del que tiene configurado el
mismo motivo básico de acuerdo al diseño, tamaño,
usuario. Pero, para que esto ocurra, el usuario debe
apariencia y otros atributos asociados a todo el
tener instalado en su disco duro ese tipo de fuentes
conjunto, y una asignación de signos abstractos por
(y además con el mismo nombre). Si no lo tiene
cada carácter.
instalado, entonces verá el texto con la fuente por
defecto de su navegador.
Esto se consigue con el atributo FACE="Nombre de la
Puede usar la etiqueta <FONT> para mejorar aún
fuente".
más el aspecto del texto. Por ejemplo, puede definir el
tipo de fuente, tamaño y color, todo ello con la etiqueta
Por ejemplo, para forzar a que el texto adopte la
FONT.
fuente Verdana, se pondría:

<FONT> [Atributos de fuente] </FONT> <FONT FACE="Verdana">Este texto se verá con la


fuente Verdana</FONT>
Tipos de fuentes Que resulta:
Este texto se verá con la fuente Verdana
Los navegadores utilizan por defecto un tipo de
(quien no tenga instalada esta fuente, no notará nada
fuentes, generalmente Times New Roman, y que el
de particular).
usuario puede cambiar por otro tipo en la
Se pueden indicar en el atributo varias fuentes
configuración de su navegador. Si así lo hace, todas
distintas, separadas por una coma. Si falla la primera,
las páginas que cargue tendrán el texto escrito en esa
entonces el texto adopta la forma de la segunda, y así
nueva fuente escogida.

Programamación en HTML y Java Script 7


sucesivamente. Si fallan todas, el texto adopta Atributo Significado Posibles valores
entonces la fuente por defecto. Así, por ejemplo: nombre de la fuente, o
face fuente
fuentes
<FONT FACE="Impact, Arial">Este texto se verá con
número hexadecimal o
la fuente Impact, o en su defecto con Arial</FONT> color color del texto
texto predefinido
Que resulta: valores del 1 al 7, siendo
Este texto se verá con la fuente Impact, o en su por defecto el 3,
o desplazamiento
defecto con Arial (quien no tenga instaladas ninguna size tamaño del texto respecto al tamaño por
de las dos fuentes, tampoco notará nada de defecto,
añadiendo + o - delante
particular). del valor
Es decir, que este atributo no es estándar y que
Por ejemplo, para insertar el texto:
depende además de las fuentes instaladas en el
ordenador del usuario, no es conveniente basar el Bienvenidos a www.aulaclic.com

diseño de una página exclusivamente en un tipo de Habría que escribir:


fuente. Hay que tener en cuenta que el tamaño de las
<font color="#993366" size="4" face="Comic Sans
letras varía mucho de una fuente a otra. MS, Arial, MS Sans Serif">Bienvenidos a
www.aulaclic.com</font>
Estructuras para la Personalización de las Fuentes
También es posible definir una fuente para todo el
Para personalizar las fuentes es necesario tener
documento. Para ello, hay que insertar la etiqueta
claro que las propiedades del texto pueden
<basefont> después de la etiqueta <body>.
modificarse a través de la etiqueta <font>. Para
ello, podemos insertar el texto entre las etiquetas La etiqueta <basefont> no necesita una etiqueta de
<font> y </font>, especificando algunos de los cierre, y permite modificar los mismos atributos del
atributos de la etiqueta: texto que la etiqueta <font>.

Programación en HTML y Java Script


8
Por ejemplo: Etiqueta Significado
<b> negrita
<body> <i> cursiva
<basefont color="#006699" size="4" face="Arial">
... <u> subrayado
<s> tachado
Este código haría que la fuente del documento fuera teletipo (máquina de
<tt>
por defecto de color azul, de tamaño 4 y Arial. escribir)
aumenta el tamaño de
Si después de indicar la etiqueta <basefont> o <big>
la fuente
<font>, el navegador encuentra otra etiqueta <font>,
disminuye el tamaño
la que prevalece es siempre la última que se <small>
de la fuente
encuentra.

Existen una serie de etiquetas que permiten aplicar


A continuación se muestran algunas etiquetas
diferentes estilos al texto que se encuentra entre ellas,
asociadas al tipo de información:
y generalmente se utilizan para resaltarlo. Estos
estilos pueden agruparse según vayan asociados al Etiqueta Significado
<cite> cita
tipo de letra o a la información que represente el texto.
<code> ejemplo de código
No hay que olvidar que todas estas etiquetas
<dfn> definición
necesitan una etiqueta de cierre, y que pueden <del> eliminado
aplicarse varias etiquetas al mismo texto. <em> énfasis
<ins> insertado
A continuación se muestran algunas etiquetas
<kbd> teclado
asociadas al tipo de letra: <samp> muestra
<strong> destacado
<sub> subíndice
Programamación en HTML y Java Script 9
<sup> superíndice
<var> variable

Las etiquetas más utilizadas son las asociadas al


tipo de letra, ya que son más fáciles de recordar, y
en muchos casos los resultados son los mismos que
los de aplicar una etiqueta diferente. Por ejemplo, el
resultado de aplicar las etiquetas <b> y <strong> es
el mismo. Incluso a veces algunos estilos asociados
al tipo de información pueden representarse de
forma distinta según el navegador.

FONDOS
Por ejemplo, para insertar el texto: Es donde se realiza el diseño que va identificar la
página o documento.
Bienvenidos a www.aulaclic.com
Tipos de Fondos
Habría que escribir:
Se puede presentar el fondo de dos maneras
<font color="#993366" size="4" face="Comic Sans
distintas:
MS, Arial, MS Sans Serif">Bienvenidos a
<b><u><tt>www.aulaclic.com</tt></u></b></font> • Uniformes

Programación en HTML y Java Script


10
Se consigue añadiendo el comando BGCOLOR a la #0000FF Azul
etiqueta <BODY> (situada al principio del documento),
de la siguiente manera:
Otros colores son:
<BODY BGCOLOR="#XXYYZZ"> #FFFFFF Blanco
#000000 Negro
#FFFF00 Amarillo
Es un número indicativo de la cantidad de
XX Para hacer un color más oscuro, se debe reducir el
color rojo
Es un número indicativo de la cantidad de número de su componente, dejando los otros dos
YY
color verde
invariables. Así, el rojo #FF0000 se puede hacer más
Es un número indicativo de la cantidad de
ZZ color azul oscuro con #AA0000, o aún más oscuro con #550000.
Para hacer que un color tenga un tono más suave
Estos números están en numeración hexadecimal. (más pastel), se deben variar los otros dos colores
Esta numeración se caracteriza por tener 16 dígitos haciéndolos más claros (número más alto), en una
(en lugar de los diez de la numeración decimal cantidad igual. Así, se convierte el rojo en rosa con
habitual). Estos dígitos son: #FF7070.
0123456789ABCDEF Veamos algunos ejemplos
Es decir, que en este caso, el número menor es el 00
Color Color Color
y el mayor el FF. Así, por ejemplo, el color rojo es el Valores Valores Valores
resultante resultante resultante
#FF0000, porque tiene el máximo de rojo y cero de los FF0000 00FF00 0000FF
otro dos colores. FFFF00 FF00FF 00FFFF
25A7BB ACB312 6047B6
Los colores primarios son:
#FF0000 Rojo
#00FF00 Verde • Con Imágenes
Programamación en HTML y Java Script 11
texto y los enlaces que no contrastan bien con ese
El fondo de una página puede ser también una
fondo gris. La solución a este problema es poner
imagen, ya sea en formato GIF o JPEG. Esta imagen
dentro de la etiqueta <BODY> los dos comandos
se repite por toda la página, de una manera análoga
BACKGROUND y BGCOLOR (en este orden),
al tapiz de Windows.
teniendo cuidado en escoger un color uniforme de
fondo parecido al de la imagen.
La estructura de la etiqueta puede ser:

Por ejemplo, se quiere poner como fondo la


<BODY BACKGROUND="imagen.gif">
<BODY BACKGROUND="imagen.jpg"> imagen nubes.jpg. Entonces se escoge un color
de fondo azul claro, #CCFFFF. La etiqueta
No todos los navegadores soportan este formato.
quedaría así:
Se pueden añadir también a esta etiqueta todos <BODY BACKGROUND="nubes.jpg"
los comandos para cambiar los colores del texto BGCOLOR="#CCFFFF">
y de los enlaces, vistos anteriormente. Esto es Esto tiene la ventaja adicional de que, incluso aunque
imprescindible a veces para conseguir que el no se deshabilite la carga automática de imágenes, al
texto sea legible, en contraste con el fondo. cargar la página, lo primero que se ve es ese fondo de
color uniforme, que luego es reemplazado por el de la
Hay que prever la posibilidad de que quien acceda imagen.
a la página haya deshabilitado la carga automática
de imágenes, en cuyo caso tampoco cargaría la
imagen que sirve como fondo y sólo vería el fondo
estándar de color gris. Esto podría ser muy
perjudicial si hemos escogido unos colores para el
Programación en HTML y Java Script
12
La etiqueta <TABLE> puede ser una poderosa
herramienta de formato. Se puede hacer por ejemplo,
no mostrar el borde de una tabla en absoluto. También
se puede hacer uso de la etiqueta <TABLE> para
ubicar texto e imágenes con precisión, en
prácticamente casi cualquier lugar de una página.

Asimismo, están formadas por celdas, que son los


recuadros que se obtienen como resultado de la
intersección entre una fila y una columna.

TABLAS

Son uno de los recursos más utilizados en HTML, ya Ejemplo:


que su uso a la hora de tabular y presentar contenido
es fundamental. Asimismo es una poderosa
herramienta, y no sólo para mostrar infinidad de datos
sino también para formatear los documentos.

Las tablas pueden parecer un modo sencillo de


imagen y texto COLUMNA
disponer el texto en columnas o quizás de añadir un
titular a una ilustración, pero hay modos de sacar un Texto dentro de
gran partido de una característica aparentemente una celda

sencilla.

FILA CELDA

Programamación en HTML y Java Script 13


Para crear una tabla no basta con especificar el
Para crear una tabla hay que insertar las número de filas, es necesario también especificar
etiquetas <table> y </table>. Entre dichas el número de columnas.
etiquetas habrá que especificar las filas y
Una celda es el resultado de la intersección entre
columnas que formarán la tabla.
una fila y una columna, por lo que podremos
DEFINICIÓN DE FILA <TR> especificar el número de celdas por fila, que
equivale a especificar el número de columnas por
Es necesario insertar las etiquetas <tr> y </tr>
fila.
por cada una de las filas de la tabla. Estas
etiquetas deberán insertarse entre las etiquetas Es necesario insertar las etiquetas <td> y </td>
<table> y </table>. por cada una de las celdas que compongan cada
una de las filas de la tabla. Por lo tanto, habrá que
Por ejemplo, para crear una tabla con cinco filas
insertar esas etiquetas entre las etiquetas <tr> y
escribiríamos:
</tr>.

<table> Entre las etiquetas <td> y </td> se podrá


<tr>...</tr>
<tr>...</tr> especificar el contenido de cada una de las
<tr>...</tr> celdas. Por ejemplo, para insertar la siguiente
<tr>...</tr>
<tr>...</tr> tabla:
</table>
Sábado Domingo
DEFINICIÓN DE COLUMNA O CELDA <TD> Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash

Habría que escribir:


Programación en HTML y Java Script
14
table border="1"> dentro de la etiqueta de la celda los siguientes
<tr>
atributos:
<td>Sabado</td>
<td>Domingo</td> <TD VALIGN=TOP> Arriba </TD>
</tr>
<TD VALIGN=BOTTOM> Abajo </TD>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td> Determinación del Ancho
</tr>
<tr> El navegador se encarga normalmente de
<td>Curso Frontpage</td>
dimensionar el tamaño total de la tabla de acuerdo
<td>Curso Flash</td>
</tr> con el número de filas, de columnas, por el contenido
</table>
de las celdas, espesor de los bordes, etc.
Alineación A veces puede convenir forzarle para que la tabla
tenga unas dimensiones totales mayores que las que
Normalmente, el contenido de una celda está alineado
le corresponden, tanto en anchura como en longitud.
a la izquierda. Pero se puede cambiar esto añadiendo
Esto se consigue añadiendo dentro de la etiqueta de
dentro de la etiqueta de la celda los siguientes
la tabla los atributos WIDTH y HEIGHT igual a un
atributos:
porcentaje de la dimensión de la pantalla, o a una cifra
que equivale al número de pixels.
<TD ALIGN=CENTER> Al centro </TD>
Por ejemplo, se coloca:
<TD ALIGN=RIGHT> A la derecha </TD>
<TH ALIGN=LEFT> Cabecera a la izquierda <TABLE WIDTH=60%>
</TH> O, por ejemplo:
<TABLE HEIGHT=200>
El alineamiento por defecto en el sentido vertical es en
el medio. También se puede cambiar, añadiendo Espaciado entre Celdas

Programamación en HTML y Java Script 15


Por defecto, la separación entre las distintas celdas de especifica el número de filas por las que se
una tabla es de dos pixels. Pero se puede variar esto extenderá la celda.
con el atributo CELLSPACING, que se pone dentro de
Para que quede más claro, vamos a ver un
la etiqueta TABLE.
ejemplo de su uso. Por ejemplo, para insertar la
Por ejemplo, para obtener una separación de 20
siguiente tabla:
pixels entre celdas:
<TABLE BORDER CELLSPACING=20>

A primera vista parece como si esto fuera lo mismo


que si se hubiera aumentado el espesor de los
bordes. Pero para comprobar que no es así, se hace DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE
que, tenga además unos bordes de 5 de espesor: PERRO
DIFERENCIAS HOMBRE
PEQUEÑO GRANDE
<TABLE BORDER=5 CELLSPACING=20>
Duración 18 a 24
10 meses 16 años
crecimiento meses
Combinación
Tiempo de
58 a 63 días 9 meses
gestación
Duración de vida
Para las etiquetas <td> y <th> existen los atributos 1 año 2 a 7 años
del pelo/cabello
colspan y rowspan, que se utilizan para combinar
celdas.
Habría que escribir el siguiente código:
A través del atributo colspan se especifica el
<table width="575" border="2" cellspacing="2">
número de columnas por las que se extenderá la <tr align="center" valign="middle">
celda, y a través del atributo rowspan se <th colspan="4">DIFERENCIAS ENTRE EL
PERRO Y EL HOMBRE</th>
Programación en HTML y Java Script
16
</tr> En primer lugar, tenemos que ver el número
<tr align="center" valign="middle">
máximo de columnas que ha de tener la tabla. En
<th rowspan="2">DIFERENCIAS</th>
<th colspan="2">PERRO</th> este caso serían cuatro columnas. Para saber el
<th rowspan="2">HOMBRE</th>
número de columnas total de la tabla, tenemos
</tr>
<tr align="center" valign="middle"> que fijarnos en el número total de celdas que
<th>PEQUE&Ntilde;O</th>
podemos obtener por fila al trazar las líneas
<th>GRANDE</th>
</tr> verticales que separan las columnas entre sí.
<tr align="center" valign="middle">
<td>Duraci&oacute;n crecimiento</td> En la primera fila, la línea <th
<td>10 meses</td>
<td>18 a 24 meses</td> colspan="4">DIFERENCIAS ENTRE EL
<td>16 a&ntilde;os</td> PERRO Y EL HOMBRE</th> indica que la celda
</tr>
<tr align="center" valign="middle"> ocupará cuatro columnas de la tabla (la columna
<td>Tiempo de gestaci&oacute;n</td> actual y las 3 siguientes). Como la tabla tiene
<td colspan="2">58 a 63 d&iacute;as</td>
<td>9 meses</td> como mucho cuatro columnas y el atributo
</tr> colspan de la celda vale cuatro, no hay que
<tr align="center" valign="middle">
<td>Duraci&oacute;n de vida del definir más celdas para esa misma fila.
pelo/cabello</td>
<td colspan="2">1 a&ntilde;o</td> En la segunda fila, la línea <th
<td>2 a 7 a&ntilde;os</td> rowspan="2">DIFERENCIAS</th> indica que la
</tr>
</table> celda ocupará dos filas de la tabla (la actual y la
siguiente). Lo mismo ocurre con la línea <th
Vamos a explicar un poco cómo funciona dicho
rowspan="2">HOMBRE</th>.
código, aunque sería conveniente que primero
intentaras entender el código comparándolo con Ya hemos definido dos celdas de la segunda
la tabla que de él se obtiene. fila. Sabemos que la tabla tiene como mucho
Programamación en HTML y Java Script 17
cuatro columnas, por lo que como en la línea <th
colspan="2">PERRO</th> el atributo colspan
vale dos, ya tenemos las cuatro celdas.

En la segunda fila hemos definido dos celdas


que se expanden por dos filas, por lo que en la
tercera fila habrá que definir solamente dos
celdas, y no cuatro, ya que dos de sus celdas se
corresponden con las definidas en la fila anterior.

Las dos nuevas celdas son: IMÁGENES


<th>PEQUE&Ntilde;O</th> y
<th>GRANDE</th>. A la hora de crear una página Web podemos introducir
gráficos de forma muy sencilla, sólo hay que tener en
El uso de los atributos colspan y rowspan
cuenta que las imágenes deben tener formato Gif o
puede resultar algo complicado al principio. Es
JPEG. La etiqueta que sirve para incluir imágenes en
cuestión de práctica.
páginas del WEB es muy similar a la de enlaces a
otras páginas, antes vistas. La única diferencia es
que, en lugar de indicar al programa navegador el
nombre y la localización de un documento de texto
HTML para que lo cargue, se le indica el nombre y la
localización de un archivo que contiene una imagen.

Estructuras de etiquetas para imágenes


La estructura de la etiqueta es:
Programación en HTML y Java Script
18
♦ Atributo ALT: Es un texto asociado a la imagen
<IMG SRC="imagen.gif">
muy conveniente para los que utilizan
Con el comando IMG SRC (image source, fuente de la navegadores en forma texto (Lynx, entre otros),
imagen) se indica que se quiere cargar una imagen o para los que usando navegadores gráficos,
llamada imagen.gif. (O el nombre que tenga). han inhabilitado la carga de imágenes para
Dentro de la etiqueta se pueden añadir otros ganar en velocidad.
comandos, tal como ALT ♦ Atributos WIDTH y HEIGHT: Es una indicación
<IMG SRC="imagen.gif" ALT="descripción"> de las dimensiones de la imagen (ancho y alto).
Con el comando ALT se introduce una descripción Es muy importante ponerlo en todas las
(una palabra o una frase breve) indicativa de la etiquetas de las imágenes (incluso de las más
imagen. Este comando, que en principio se puede pequeñas, iconos), pues facilita mucho la carga
omitir, es en beneficio de los que accedan a nuestra de la página, ya que primero se carga todo el
página con un programa navegador en forma de texto texto y posteriormente se van rellenando los
como el lynx. Ya que no son capaces de ver la espacios reservados a las imágenes.
imagen, por lo menos pueden hacerse una idea sobre
Con respecto a los GIFs animados, conviene no
ella.
abusar de ellos poniendo demasiados en una misma
Atributos página, no solamente por motivos estéticos, sino

Se deben incluir dentro de las etiquetas de las también porque esto puede provocar problemas en los

imágenes estos atributos, que aunque son opcionales ordenadores de algunos usuarios.

son muy convenientes:


Formatos a la Imagen

Programamación en HTML y Java Script 19


Las imágenes deben estar guardadas en un formato frecuencia. Por ejemplo, en los sistemas de rotación
de archivo especial llamado GIF. de rótulos publicitarios es necesario seleccionar de
(Hay también otro formato más avanzado JPG). Este forma aleatoria un único rótulo de una lista de posibles
formato GIF almacena las imágenes con un máximo rótulos y, después, mostrar dinámicamente la imagen
de 256 colores, en forma comprimida. del rótulo seleccionado cuando se solicite una página.
Un aspecto muy importante a tener en cuenta es el
Para insertar una imagen
tamaño de las imágenes, pues una imagen grande
supone un archivo grande, y esto puede resultar en un
1. Coloque el punto de inserción en el lugar de la
tiempo excesivo de carga, con el consiguiente riesgo
ventana de documento en el que desea que
de que quien esté intentando cargar nuestra página se
aparezca la imagen y, a continuación, siga uno
canse de esperar, y desista de ello.
de estos procedimientos:

Procedimiento Técnico para la Inserción de o En la categoría Común de la barra


imágenes Insertar, haga clic en el icono Imagen.

Al insertar una imagen en un documento de


Dreamweaver, el programa genera automáticamente
una referencia al archivo de imagen en el código o En la categoría Común de la barra
HTML. Para asegurarse de que esta referencia es Insertar, arrastre el icono Imagen a la
correcta, el archivo de imagen deberá estar en el sitio ventana de documento (o a la ventana de
actual. Si no lo está, Dreamweaver le preguntará si vista Código si está trabajando en el
desea copiar el archivo en el sitio. Asimismo, las código).
imágenes se pueden insertar de forma dinámica. Las o Seleccione Insertar > imagen.
imágenes dinámicas son aquellas que cambian con

Programación en HTML y Java Script


20
o Arrastre una imagen desde el panel Activos imagen. Al guardar el documento en cualquier
(Ventana > Activos) hasta la posición deseada lugar del sitio, Dreamweaver convierte la
de la ventana de documento. A continuación, referencia en una ruta relativa al documento.
siga con el paso 3.
4. Haga clic en Aceptar.
o Arrastre una imagen desde el panel Sitio
hasta la posición deseada de la ventana de
Aparece el cuadro Atributos de accesibilidad de la
documento. A continuación, siga con el paso
etiqueta de imagen si se ha activado el cuadro de
3.
diálogo en Preferencias (véase Optimización del
o Arrastre una imagen desde el escritorio hasta
espacio de trabajo para el diseño de páginas
la posición deseada de la ventana de accesibles).
documento. A continuación, siga con el paso
3.
2. En el cuadro de diálogo que aparece, siga uno
de estos procedimientos:
o Seleccione Sistema de archivos para elegir
un archivo gráfico.
o Seleccione Fuente de datos para elegir un
origen de imagen dinámica.
3. Busque y seleccione el origen de imagen o
contenido que desee insertar.

Si está trabajando en un documento que no


está guardado, Dreamweaver genera una
referencia de archivo: // para el archivo de
Programamación en HTML y Java Script 21
5. Introduzca los valores en los cuadros de texto
alternativo y Descripción larga y haga clic en
Aceptar.

6. Para más información, consulte Configuración


de las opciones del cuadro de diálogo Atributos
de accesibilidad de la etiqueta de imagen.
7. La imagen aparece en el documento.
8. En el inspector de propiedades (Ventana >
Propiedades), establezca las propiedades de la
imagen.

Para más información, consulte Configuración


de propiedades de imagen.

Para editar los atributos de accesibilidad de la


imagen, véase Edición de los atributos de CARACTERES ESPECIALES
accesibilidad de una imagen.
Existen algunas limitaciones para escribir el texto. Una
de ellas es debido a que las etiquetas, se forman
como un comando escrito entre los símbolos "<" y ">".
Por tanto, si se quisieran escribir estos caracteres
como parte normal del texto, daría esto lugar a una
ambigüedad, ya que el programa navegador podría
Programación en HTML y Java Script
22
interpretarlos como el comienzo o final de una &aacute; Para la á
etiqueta, en vez de un carácter más del texto. &eacute; Para la é
&iacute; Para la í
Para resolver este problema, existen unos códigos &oacute; Para la ó
para poder escribir estos caracteres y otros &uacute; Para la ú
&Aacute; Para la Á
relacionados con las etiquetas. &Eacute; Para la É
&Iacute; Para la Í
&Oacute; Para la Ó
&lt; para < (less than, menor que) &Uacute; Para la Ú
&gt; para > (greater than, mayor que)

&amp; para & (ampersand)


&quot; para " (double quotation)

Como se ve, estos códigos empiezan siempre con el


signo “&” y acaban siempre con “;” El resto de los códigos son:
De una manera similar, existen códigos para escribir
letras específicas de distintos idiomas. Hay muchos de &ntilde; Para la ñ
&Ntilde; Para la Ñ
ellos, pero, lógicamente, los que más nos interesan &uuml; Para la ü
son los propios del castellano (las vocales &Uuml; Para la Ü
&#191; Para ¿
acentuadas, la “ ñ ” y los signos “ ¿ ” y “ ¡ ” ). &#161; Para ¡
Los códigos de las vocales acentuadas se forman
Todo esto, que como se ve es muy laborioso, puede
comenzando con “&”, seguido de la vocal en cuestión,
parecer inútil ya que si se escribe el texto sin hacer
seguido de la palabra acute (aguda) y terminando con
ningún caso de estas convenciones, escribiendo las
el signo “;”.
letras acentuadas y demás signos directamente, es
muy posible que el resultado se vea correctamente en
Programamación en HTML y Java Script 23
dicho navegador, pero nunca se puede estar seguro
que le ocurra lo mismo a todos los que accedan a
estas páginas con navegadores distintos.

Por ejemplo, para insertar el texto:

¡Bienvenidos, esta es mi 1ª página!

Habría que escribir:

&iexcl;Bienvenidos, esta es
mi&nbsp;&nbsp;&nbsp;1&ordf;&nbsp;&nbsp;&nb
sp;p&aacute;gina!

Programación en HTML y Java Script


24
FORMULARIOS DE CONFIRMACIÓN Y ENVÍO Ejemplo:

Es un elemento que permite recoger datos


introducidos por el usuario.

Los formularios se utilizan para conocer las opiniones,


dudas, y otra serie de datos sobre los usuarios, para
introducir pedidos a través de la red, tienen multitud de
aplicaciones.

Un formulario está formado, entre otras cosas,


por etiquetas, campos de texto, menús
desplegables, y botones.

Es muy recomendable utilizar tablas para organizar


los elementos de los formularios. Utilizando tablas
se consigue una mejor distribución de los
elementos del formulario, lo que facilita su
comprensión y mejora su apariencia.

Programamación en HTML y Java Script 25


Esta marquesina ocupa el 50% del ancho de la
MARQUESINAS
pantalla y tiene una altura de 60 pixels
Una marquesina (en inglés, marquee) es una ventana
ALIGN
en la que se desplaza un texto. Sólo son válidas para
Modifica el alineamiento del texto que rodea a la
el Explorer de Microsoft (en el Netscape se verá como
marquesina, que puede ser TOP (arriba), MIDDLE (en
texto fijo).
medio) o BOTTOM (abajo). Ejemplo:
Estructuras <MARQUEE WIDTH=50% HEIGHT=60
La etiqueta básica es: ALIGN=BOTTOM>La palabra "¡Hola!" estará
<MARQUEE> Texto que se desplaza </MARQUEE> alineada con la parte inferior de la
Que resulta como: marquesina</MARQUEE> ¡Hola!
Texto que se desplaza Que resulta como:
La palabra "¡Hola!" estará alineada con la parte
Formatos
inferior de la marquesina ¡Hola!
WIDHT, HEIGHT
Ajustan la anchura y altura, respectivamente, de la

marquesina.

Pueden ser igual a un número de pixels, o a un

porcentaje de la pantalla. Ejemplo:

<MARQUEE WIDTH=50% HEIGHT=60> Esta


marquesina ocupa el 50% del ancho de la pantalla y
tiene una altura de 60 pixels </MARQUEE>
Que resulta como:
Programamación en HTML y Java Script 27
<IMG SRC="http://www.lander.es/cgi/nph-
CONTADORES
count?link=farocena&width=5">
Un contador de visitas no se crea simplemente con
Servicios Públicos para Contadores
una etiqueta del lenguaje HTML, sino que se genera
en un programa CGI especial residente en el servidor. Cuando se carece de un programa de contador, se
Puede tratarse del servidor donde esté alojada puede recurrir a otros servidores que dan este servicio
nuestra página si es que tiene instalado un programa de manera generalmente gratuita.
de este tipo, o en caso contrario se puede recurrir a El único inconveniente que puede tener esta solución
otros servidores distintos que den este servicio. es que al cargar el usuario la página, al llegar a la
etiqueta del contador, la solicitará a este otro servidor,
Cómo Funcionan los Contadores y puede ocurrir que esté inaccesible en ese momento,

Si se quiere instalar en la página un contador de o sea lento en dar la respuesta.

accesos, se debe colocar en el documento HTML una A continuación se sumistra los URLs de algunos de

etiqueta que haga una llamada a un programa estos servidores. En ellos se pueden encontrar las

instalado en un servidor que suministre este servicio. instrucciones para crear un contador.

Estas etiquetas no son un standard del lenguaje Servicio de contadores, de Pedro Hurtado (España)

HTML, sino que nos la tiene que suministrar quien nos Contador de Páginas WWW (Portugal, en portugués)

dé el servicio, ya que depende del programa que WebCounter (USA).

tengan instalado en el servidor. En La Agenda, de Manuel Barberán se puede

Por ejemplo, la etiqueta para el contador de encontrar más servidores. En el buscador Yahoo! Se

WebMaestro (instalado en la página de la portada de puede encontrar información (en inglés) sobre

este manual) es la siguiente: programas para crear contadores.

Programamación en HTML y Java Script 29


decir, un ordenador conectado permanentemente con
PUBLICACIÓN DE PÁGINA WEB
Internet y dotado de un programa específico, lo que
Selección de Proveedor supone una gran inversión económica y unos
elevados conocimientos técnicos.
Los proveedores comerciales de acceso a Internet, o
La solución es instalarla en un servidor conectado a la
ISPs (Internet Service Providers) que ceden
WWW (World Wide Web: la telaraña mundial), la red
frecuentemente a sus usuarios un espacio
de servidores interconectados entre sí que permite
determinado en sus servidores, para que puedan
acceder a cualquier página en cualquier parte del

mundo, y navegar a través de ellas.


colocar sus páginas personales, bien sea
Los distintos canales para colocar una página en la
gratuitamente o por una tarifa determinada.
red son:
Las empresas comerciales que, sin ser proveedores Los servidores de las instituciones oficiales y
de acceso a Internet, se dedican a alquilar espacio académicas a sus miembros, para la difusión de
para la colocación de páginas, de carácter personal o información relacionada con esos organismos.
comercial.

Publicación de Páginas

El propósito que se tiene al confeccionar una página

del Web es, por supuesto, el de publicarla y ponerla a

disposición de todo el mundo.

No puede colocar directamente en la red, pues se


necesitaría disponer para esto de un servidor, es

Programamación en HTML y Java Script 31


TIPOS DE ENLACES
ENLACE
• Dentro de una Misma Página
La característica que más ha influido en el
espectacular éxito del WEB ha sido, aparte la de su
A veces, en el caso de documentos (o páginas) muy
carácter multimedia, la posibilidad de unir los distintos
extensos, nos puede interesar dar un salto desde una
documentos repartidos por todo el mundo por medio
posición a otra determinada. En este caso, lo que
de enlaces hipertexto.
antes se ha llamado XXX, es decir, el destino del
enlace, en este caso el sitio dentro de la página a
Estructuras de un Enlace
donde se quiere saltar, se sustituye por #MARCA (la
En general, los enlaces tienen la siguiente estructura: palabra MARCA puede ser cualquier palabra que se
<A HREF="XXX"> YYY </A> quiera).
Donde XXX es el destino del enlace (Obsérvese las Lo que se ha llamado antes YYY es la palabra (o
comillas). YYY es el texto indicativo en la pantalla del palabras) que aparecerán en la pantalla en color (en
enlace (con un color especial y generalmente forma de hipertexto). Su estructura es, entonces:
subrayado) <A HREF="#MARCA"> YYY </A>
Y en el sitio exacto a donde queremos saltar,
debemos poner la siguiente etiqueta:
<A NAME="MARCA"> </A>

• Con otras Páginas


Puede ser que se tenga una sola página. Pero lo más
frecuente es que haya varias páginas, una inicial (o

Programamación en HTML y Java Script 39


principal) y otras conectadas a ella, e incluso entre Una observación importante: Pudiera ocurrir que el
ellas mismas. sitio del WEB estuviera organizado con un directorio
Por ejemplo se quiere enlazar con la página creada, la principal, y otros subdirectorios auxiliares. Si la página
cual se ha llamado mipag2.html. En este caso, a la que se desea accesar está, por ejemplo en el
simplemente se sustituye lo que se ha llamado XXX subdirectorio misubdir, entonces en la etiqueta tendría
(el destino del enlace) por el nombre del archivo: que colocarse "misubdir/mipag2.html".
<A HREF="mipag2.html"> Ejemplo de la segunda Y a la inversa, si se quiere saltar desde una página a
página </A> otra que está en un directorio anterior, en la etiqueta
tendría que haber puesto "./mipag2.html". Esos dos
Si se quiere que vaya a un sitio concreto de otra puntos hacen que se dirija al directorio anterior.
página en vez de ir al principio de la página, adonde Obsérvese que se debe utilizar el símbolo / para
va por defecto, en ese sitio se tiene que colocar una indicar los subdirectorios, y no este otro \, que es
marca (ver la Enlaces dentro de la misma página), y propio únicamente de Windows.
completar el enlace con la referencia a esa marca.
Si se desea evitar todas estas complicaciones, se
Se puede ver con el siguiente ejemplo: <A
puede tener todo junto en un único directorio, pero
NAME="MIMARCA"></A> es la marca que se coloca
esto tiene el inconveniente de que esté todo más
en la página, que deseamos accesar desde otra
desordenado, y sean más difíciles de hacer las futuras
nuestra. Entonces la etiqueta tiene que ser:
modificaciones.

<A HREF="mipag2.html#MIMARCA"> En mi otra


pagina </A>.

Programación en HTML y Java Script


40
• Con otras Direcciones Electrónicas <A HREF= “mailto: dirección de e-mail”> Texto del
enlace </A>
Si lo que se quiere es enlazar con una página que Un ejemplo podría ser:
esté fuera de nuestro sistema (es decir, que esté en <A HREF= “mailto: tzambran@delfos.ucla.edu.ve”>
un servidor distinto al que soporta la página), es Tom Zambrano</A>
necesario conocer su dirección completa, o URL Hay algunos navegadores que no subrayan el
(Uniform Resource Locator). El URL podría ser, comentario de este tipo de enlace.
además de la dirección de una página del WEB, una Una manera recomendable y más segura para
dirección de FTP, GOPHER, etc. conocer la dirección e-mail seria poner algo así como:
Una vez conocida la dirección (o URL), lo colocamos Comentarios a Tom Zambrano en <A HREF="mailto:
en vez de lo que hemos llamado anteriormente XXX tzambran@delfos.ucla.edu.ve">
(el destino del enlace). Si se quiere enlazar por tzambran@delfos.ucla.edu.ve </A>
ejemplo con la página de Netscape (cuyo URL es: Es decir, es conveniente, poner también en el texto
http://home.netscape.com/), la etiqueta sería: del enlace la dirección de e-mail.
Ejemplo:
<A HREF="http://home.netscape.com/"> Página inicial
de Netscape </A> <HTML>
<HEAD>
<TITLE> Mi pagina del Web - 3 </TITLE>
Es muy importante copiar estas direcciones </HEAD>
correctamente (respetando las mayúsculas y <BODY>
<CENTER>
minúsculas, pues los servidores UNIX sí las
distinguen). <H1> Mis paginas favoritas </H1>
</CENTER>
En este caso, se sustituye lo que se ha llamado antes <HR>
XXX (el destino del enlace) por mailto: seguido de la
Estas son mis páginas favoritas:
dirección de e-mail. La estructura de la etiqueta es:
Programamación en HTML y Java Script 41
<P><A HREF="http://home.netscape.com"> Netscape
</A>
<BR> <A HREF="http://www.microsoft.com">
Microsoft </A>
<BR> <A HREF="http://www.yahoo.com"> Yahoo!
</A>
</BODY>
</HTML>

MARCOS (FRAMES)

Programación en HTML y Java Script


42
Frames (en inglés, marcos o cuadros) es un TARGET="_top", con lo que al pulsar el enlace la
procedimiento del lenguaje HTML para dividir la nueva página se cargará a pantalla completa.
pantalla en diferentes zonas, o ventanas, que pueden
actuar independientemente unas de otras, como si se
Atributos de las Etiquetas (Frameset)
trataran de páginas diferentes, pues incluso cada una
de ellas pueden tener sus propias barras La etiqueta FRAMESET, es la que define la

deslizaderas. Los navegadores que lo implementan distribución, el número y tamaño de los frames. Tiene

son el Netscape 2.0, y el Explorer 2.0 en adelante. dos atributos: COLS (columnas) y ROWS (filas):

Enlaces de Página con Marco <FRAMESET COLS=“XX, YY, ZZ,">


<FRAMESET ROWS=“XX, YY, ZZ,">
A veces encontramos páginas con frames que
contienen enlaces a otros sitios del Web que al ser Define la distribución de los frames en columnas o en

pulsados se cargan dentro del mismo frame. Esto filas, según se use uno u otro atributo.

resulta generalmente molesto para el usuario, pues la Define el número de frames que habrá, pues, por

página cargada queda aprisionada dentro del reducido ejemplo:

espacio del frame (agravado aún más si la página


<FRAMESET COLS=“XX, (habrá dos frames en
cargada contiene ella misma sus propios frames).
YY”> columnas)
Además, el usuario puede tener la impresión de que el <FRAMESET COLS=“XX, (habrá tres frames en
autor de la página pretende impedirle que se "escape" YY, ZZ”> columnas)
a otras páginas.
Define el tamaño de los frames, según el valor que
La manera de evitar esto es poner, dentro de las
demos a XX, YY, ZZ.... Este valor se puede expresar
etiquetas de los enlaces en cuestión, el atributo
en:

Programamación en HTML y Java Script 43


Un porcentaje del ancho del pantalla (para las los que vamos a ver a continuación, para que se
columnas), o del alto de la pantalla (para las filas). ajuste el total a la pantalla del usuario
Así, por ejemplo: Un valor relativo que se consigue poniendo un
asterisco (*), en vez de un número. Esto se interpreta
<FRAMESET COLS="%20, %80"> (la columna de la
como que ese frame debe tener el espacio restante.
izquierda ocupará el 20% del ancho de la pantalla, y la
Por ejemplo:
de la derecha el 80% restante)

<FRAMESET ROWS="100,*,100"> (Habrá tres filas, la


<FRAMESET ROWS="%10, %70, %20"> (la fila
superior y la inferior de una altura fija de 100 pixels, y
superior ocupará el 10% del alto de la pantalla, la del
la del medio obtendrá el espacio restante).
medio el 70%, y la inferior el 20%)

Un número absoluto que representa el número de


pixels que ocupará cada frame a lo ancho o a lo alto
(según sean filas o columnas). Así, por ejemplo:

<FRAMESET COLS="40, 600"> (la columna de la


izquierda tendrá 40 pixels de ancho y la de la derecha
600). Pero es peligroso utilizar sólo valores absolutos,
pues el tamaño de la pantalla varía de un usuario a
otro. Si se va a usar algún valor absoluto para un JAVA SCRIPT
frame, es mejor mezclarlo con alguno relativo, como
Es un lenguaje de programación orientado a objetos
que ha sido desarrollado por la compañía Sun
Programación en HTML y Java Script
44
Microsystems, basándose en el lenguaje C++. Aunque
es también un lenguaje de carácter general, su
principal característica es la de ser independiente de Pero en este caso concreto, falta añadir los
cualquier plataforma, lo que le hace ser muy parámetros que personalizan el applet a gusto del
adecuado para ser utilizado en Internet, ya que puede usuario (sobre todo el texto que se quiere que
ejecutarse en cualquier ordenador que tenga un aparezca). Para ello se añaden etiquetas de este tipo:
navegador compatible con Java.
<PARAM NAME=nombre_del_parámetro
Acceso de un Java Script en el cuerpo de la
VALUE="contenido_del_parámetro">
página o a través de etiquetas
Para escoger el texto, será, por ejemplo:

Para colocar el applet en la página, se debe utilizar


las siguientes etiquetas (que se colocan donde <PARAM NAME=Text VALUE="¡Gracias por tu
queramos dentro del cuerpo del documento HTML, es visita!">
decir entre las etiquetas <BODY> y </BODY>): De momento no se va a definir más parámetros. El
resto de ellos serán los que ha escogido su autor por
<APPLET CODE=SineText.class WIDTH=500 defecto. Las etiquetas del applet quedan de momento
HEIGHT=100> </APPLET> así:

<APPLET CODE=SineText.class WIDTH=500


Con esto se le indica al navegador que cargue un
HEIGHT=100>
applet, cuyo código compilado es SineText.class, que
<PARAM NAME=Text VALUE="¡Gracias por tu
se encuentra en el mismo directorio que el propio
visita!">
documento HTML, y que le reserve un área de
</APPLET>
500x100 pixels.

Programamación en HTML y Java Script 45


Estructuración de Applets en java script

Con los applets se pueden conseguir efectos


visuales y sonoros (incluso ambos a la vez), textos en
movimiento, utilidades (por ejemplos: relojes),
pequeños programas educativos, juegos interactivos,
presentaciones multimedia, entre otros.
Lo primero de todo, es necesario tener el programa
del applet. El ejemplo de applet visto anteriormente, y
que vamos a examinar a continuación con detalle, se
llama SineText.class.

Se trata de un applet que hace que un texto (elegido

por el usuario) se desplace formando una onda

sinusoidal, en dirección reversible con un click del

ratón.

Se pueden escoger los colores del fondo y de las

letras, elegir entre algunos tipos de fuentes, su REFERENCIAS BIBLIOGRÁFICAS


tamaño, velocidad de desplazamiento.
Arocena, F (2006), Manual Html, Documentos en línea
http://www.ldc.usb.ve/~vtheok/webmaestro/

Programación en HTML y Java Script


46
[Consulta: 2006, Septiembre 20]

Curso de Html, Documentos en línea


http://www.aulaclic.es/html/f_html.htm
[Consulta: 2006, Septiembre 29]

Lora, V (2006), Un sitio en Internet La Web,


Documentos en línea
http://www.monografias.com/trabajos5/laweb/laweb.shtml
[Consulta: 2006, Septiembre 20]

Luna, R (1998), Curso de Iniciación Html, Documentos


en línea http://platea.pntic.mec.es/~rluna/CursoHTML
[Consulta: 2006, Septiembre 22]

Programamación en HTML y Java Script 47