Nolascosemana 2

Índice:
1. Formulario
2. Tablas
3. Graficos
4. Fodos
5. Animaciones
6. Marcos
7. Botones
8. Efectos multimedia
9. Contenido dinamico
Formularios:
Los formularios son posiblemente la herramineta más utilizada en Internet para

obtener datos e información acerca de la gente que navega nuestro sitio. La
idea de los formularios es recolectar información online en la interacción con el
usuario y luego ejecutar una determinada acción con la misma, que podría ser
por ejemplo, quizás el caso más utilizado, un formulario de venta que el usuario
completa y luego es enviado vía email al vendedor en forma encriptada.
Este tema a diferencia de los anteriores es bastante más complejo y oscuro,

aparecerán terminos como CGI scripts, Perl o bien lenguajes de programación
como C, que seguramente nos desalentarán al principio, pero que con el
tiempo asumiremos como familiares. La idea de esta sintética guía de
formularios es brindar al newbie o novato un pantallazo general de lo que es
posible hacer con simples formularios en nuestro sitio web.
¿Cómo los definimos?
Cinco son solamente las etiquetas que el código HTML posee para definir
todos los elementos interactivos que un formulario puede presentar: <FORM>,
<INPUT>, <SELECT>, <OPTION> y <TEXTAREA>. Estas etiquetas, junto a un
número de modificadores o atributos, son suficientes para indicarle al
navegador cliente cómo debe recolectar la información, cómo debe manejarla
una vez recolectada y cómo debe interactuar con el servidor.
Etiqueta <FORM>
Todo formulario debe estar encerrado entre el par de etiquetas <FORM> y

</FORM>, y debe ser ubicado en el cuerpo de cualquier documento HTML, es
decir, entre el par de etiquetas <BODY> y </BODY>. Esta etiqueta <FORM>
presenta tres atributos posibles:
1
Comando Descripción
el valor de este parámetro
es la URL del programa o
ACTION guión en el Servidor Web
utilizado para procesar la
información recolectada.
puede asumir el valor GET
o el valor POST, y definen
METHOD la manera en la cual los
datos son transferidos al
servidor.
este atributo está reservado
para que la información
ENCTYPE
viaje en forma encriptada a
través de Internet.
Los dos primeros atributos de la tabla son de uso obligatorio para cualquier
formulario que generemos, ya que establecen dónde enviar la información y
cómo enviarla. El atributo o parámetro ENCTYPE es optativo y no es realmente
importante.
Etiqueta <INPUT>
La etiqueta <INPUT> es la segunda etiqueta más importante de los formularios.

Se la puede definir como una etiqueta multifunción, ya que con la misma
podemos crear "push buttons", "radio buttons", "check boxes", y simples
recuadros para ingresar texto. Posee ocho posibles parámetros: ALIGN,
CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, y VALUE. Pero no se
asusten con tantos parámetros porque normalmente solo se utilizan a lo sumo
solo cinco. Los atributos cruciales para toda etiqueta <INPUT> son NAME, que
asocia un nombre con cada variable ingresada; y TYPE, que puede asumir los
valores TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, IMAGE,
and HIDDEN; de acuerdo al tipo de elemento que queramos representar. Más
adelante todo será más claro con los ejemplos.
Etiqueta <SELECT>
Este par de etiquetas define una lista de elementos de los cuales el usuario
debe seleccionar uno o varios, de acuerdo a los atributos que especifiquemos.
Etiqueta <OPTION>
Con esta etiqueta definimos cada elemento de las listas designadas con el par
<SELECT> y </SELECT>.
Etiqueta <TEXTAREA>
Este par de etiquetas nos permiten definir un área de dimensiones arbitrarias

que funciona como una suerte de editor, donde el usuario puede ingresar texto.
2
Tablas en HTML
Introducción a las tablas
Las tablas son una de las herramientas más útiles de que disponemos en
HTML, ya que nos van a permitir en cierto modo "maquetar" nuestro
documento, ayudándonos a situar dentro del mismo los diferentes elementos
que lo componen, siendo esta la única forma coherente que había antes de la
introducción de las Hojas de Estilo y de las etiquetas.
Es por esta facilidad a la hora de organizar con tablas nuestras páginas el que
el 99% de las que veamos en Internet las usen, aunque muchas veces no las
veamos directamente porque están "ocultas".
Estructura de una tabla
Las tablas están formadas por filas, columnas y celdas. Cada espacio
horizontal continuado es una fila y cada espacio vertical continuado esuna
columna, definiéndose una celda como el espacio formado por la intersección
de una fila y una columna.
columna 1 columna 2 columna 3

fila 1 celda(1,1) celda(1,2) celda(1,2)
fila 2
celda(2,1) celda(2,2) celda(2,3)
fila 3 celda(3,1) celda(3,2) celda(3,3)
Lo primero que tenemos que hacer cuando queremos introducir una tabla es
decirle al navegador dónde empieza y dónde acaba esta; esto se consigue
mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre
</TABLE>.
Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla,

cosa que hacemos con las etiqueta de inicio de fila <TR>> y su
correspondiente de cierre de fila</TR>, por lo que deberemos insertar una
pareja de etiquetas por cada fila que queramos que tenga la tabla.
Por último, dentro de cada fila deberemos indicar cuantas celdas va a haber,
que inicialmente deben corresponderse con el número de columnas que
deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas
<TD> y </TD>.
De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo , el esquema de

etiquetas sería el siguiente:
3
<TABLE>
<TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR>
</TABLE>
Este es el esquema general de toda tabla simple, que traducido a código HTML
quedaría de la forma:
<TABLE>
<TR>
<TD> celda(1,1) </TD>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
La cantidad de celdas debe ser el mismo en cada uno de las filas, para que la
tabla tenga la misma cantidad de columnas. Se debe definir la cantidad de
columnas que va a tener la tabla mediante el número de celdas que definamos
en la primera fila.
La visualización de una tabla se genera automáticamente a partir de las filas y

las columnas definidas. Sin embargo para un navegador no es fácil interpretar
a tiempo como debe aparecer la tabla. Primero tiene que leer la tabla completa
antes de poder visualizar alguna cosa. En caso de tablas muy grandes eso
puede conducir a que en la pantalla aparecen espacios vacios desagradables
mientras que la página se carga. HTML 4.0 ofrece una nueva sintaxis para
comunicarle al navegador al principio de la tabla cuantas columnas ella tiene.
De tal manera el navegador puede cargar la tabla mucho más rapido, o sea
que una parte de la tabla es visualizada antes de que la totalidad de la tabla
haya sido leída. Esto se debe implementar mediante el atributo COLGROUP.
Gráficos
Para incluir un gráfico en un documento HTML se utiliza la directiva <IMG>. En

dicha directiva debe incluirse un parámetro SRC="URL", con el cual se indica
dónde está el fichero con el gráfico concreto que se quiere para el documento.
4
Esto pone a disposición una gran flexibilidad, ya que se puede complementar el
contenido del documento tanto con gráficos que se encuentren disponibles en
el servidor de WWW, como con una foto situada en un servidor de la NASA o
del Ministerio de Cultura, por ejemplo, sin que el lector final tenga por qué
apreciar ninguna diferencia.
Existe alguna limitación respecto a los formatos gráficos que los programas
lectores de HTML puede interpretar sin problemas. El formato más utilizado es
el GIF, que cualquier programa con capacidades gráficas debería poder
mostrar directamente (Mosaic y Netscape pueden hacerlo).
Hay un parámetro optativo de la directiva <IMG> que sirve para proponer un

texto alternativo a un gráfico. Este texto aparecerá cuando se esté usando para
leer el HTML un programa sin capacidades gráficas (por ejemplo Lynx, que
sólo trabaja con texto). Se trata de alt="texto". Conviene utilizarlo cuando los
gráficos sirven como origen a hiperenlaces, porque si no los programas sin
capacidades gráficas no podrán mostrar los enlaces establecidos.
Para colocar en este punto del documento una imagen que está en el mismo
subdirectorio que este manual, en el fichero fotografia.gif, se escribe:
<IMG SRC="URL/fotografia.gif" ><P>
Los documentos de información gráfica deben optimizarse para la

visualización, es decir, hay que minimizar la tabla de colores con el fin de
disminuir el tamaño que ocupan las imágenes.
Tags adicionales.- Lo anterior es suficiente para producir documentos HTML

básicos. Para crear documentos mas complejos, el HTML tiene tags para
varios tipos de listas, secciones previamente creadas, citas extensas, tablas,
mapas, formularios y otras utilidades. Esto entraría dentro de un nivel más
elevado en el aprendizaje del lenguaje HTML.
Un ejemplo más largo
<HTML>
<HEAD>
<TITLE>Ejemplo mas largo </TITLE>
</HEAD>
<BODY>
<H1>Un ejemplo mas largo </H1>
Colocar un fondo en una página web
Para incluir un fondo en una página web necesitamos utilizar el atributo
5
background en la etiqueta <BODY>, al que le asignamos el nombre del archivo
que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio
distinto que la página web, necesitaremos incluir la ruta al archivo, teniendo en
cuenta siempre de utilizar una ruta relativa al archivo .html para que se
conserve la ruta en caso de que cambiemos el sitio web de localización.
<body background="fondo.gif">
Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la

página como fondo. Por defecto, la imagen de fondo aparece como un
mosaico, repitiéndose a lo largo de todo el espacio de la página.
Fondos
No solo la página puede tener un fondo, también lo podemos colocar a las
tablas o las celdas, por ejemplo. Se utiliza el mismo atributo background,
aunque aplicado a otras etiquetas.
<table background="fondo.gif">
<td background="fondo.gif">
Consejos para utilizar fondos
Veamos ahora algunos consejos que se deberían seguir para una correcta
utilización de los fondos de imagen.
1) Colocar un fondo de color parecido a la imagen

Cuando colocamos un fondo en una página debemos utilizar el atributo bgcolor
para asignar un color de fondo parecido al predominante en la imagen que
compone el mosaico. Posiblemente muchos de nosotros habremos accedido a
una página en la que no se ve nada y, cuando se carga el fondo, nos damos
cuenta que sí que había texto en la página, lo que ocurre es que no se veía
porque no contrastaba con el color de fondo blanco por defecto. Es posible que
en estos casos la imagen de fondo fuera oscura y que el texto fuera blanco y,
hasta que no se carga la imagen de fondo, no se puede ver nada. Este
problema se agrava si el fondo no se llega a cargar por un error en la
transferencia del archivo o porque la imagen ha sido borrada del servidor
accidentalmente.
2) Que se puedan leer bien los textos

Los fondos están para hacer más vistosa la página, no para molestar en la
lectura de los textos. Es un error muy común utilizar un fondo que luego
molesta al leer los textos. Ya es bastante difícil leer una Web en un monitor
como para que encima el texto no contraste bien con el fondo que se está
utilizando. En este caso cabe indicar también que es muy importante que las
combinaciones de color del texto y del fondo sean agradables, ya que hay
ciertos colores que, aunque contrastan bien, provocan unas combinaciones
difíciles de leer, por ejemplo un fondo con un color azul predominante y el texto
en rojo.
6
3) Los fondos de imagen de color homogéneo
Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se
utilicen colores de una misma gama. Si la imagen tiene partes oscuras y claras,
¿de qué color pondremos el texto para asegurarnos de que se lea bien
siempre? Si el texto es claro no contrastará bien con las partes del fondo que
también son claras. Igual pasará si colocamos el texto con un color oscuro, que
no contrastará bien con las partes oscuras del fondo.
4) Tener cuidado con las distintas definiciones de pantalla

Es importante saber que un visitante puede acceder a una página con un
tamaño de ventana variable. A veces un fondo se comporta bien con una
definición dada, pero no con otras mayores. Ocurre muy a menudo que se
utiliza un fondo y se ve el resultado en una ventana de 800x600 ó 1024x768.
Luego accede una persona con una definición de 1280x1024, o superior, y ve
la página incorrectamente porque se realiza un mosaico con el fondo que no
había tenido en cuenta el desarrollador.
5) Hacer un fondo suficientemente grande

Es importante que el tamaño del archivo que vamos a utilizar como fondo tenga
un cierto tamaño. Si utilizamos como fondo una imagen de unos pocos píxeles,
nuestro ordenador trabajará mucho para crear el mosaico repitiendo cientos o
miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un poco más
grande, para realizar el mosaico hubiera trabajado mucho menos.
En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto
que pueden dificultar mucho la presentación de la información en la página de
una manera clara.
Si deseamos utilizar un fondo que pudiera dar algún problema, una idea para
asegurarnos que los textos se visualicen correctamente es colocar todo el
contenido de la página dentro de una tabla y asignarle a la tabla un color de
fondo con el atributo bgcolor.
Animaciones
¿Cómo lo incluyo en una página?
Aquí tenemos una parte muy sencilla. Insértala y utilízala de la misma forma
que lo harías con cualquier imagen GIF en tu página web. No hay instrucciones
especiales ni etiquetas raras. <IMG SRC="name.gif">Así de sencillo!. Esto es
todo lo que se requiere. Por supuesto, hacerlo mejor requiere un poco más.
Trucos y Consejos
La única forma de hacer esto bajo HTML 2.0 era cargar la imagen. Esto
significaba esperar al menos por la cabecera de gráfico del GIF antes de
continuar. Para evitar esto, Netscape implementó los atributos ALTURA y
ANCHURA de la etiqueta IMG para reservar la cantidad de espacio en la
página para el gráfico, así el browser puede continuar inmediatamente
7
renderizando el texto HTML. Con esta información Netscape y otros browsers
pueden establecer la cantidad correcta de espacio y renderizar el texto
alrededor de ella sin tener que traerla. Cada imagen que insertas, NO
IMPORTA LO PEQUEÑA QUE SEA, debe tener un atributo de ALTURA y
ANCHURA que se corresponda con la cabecera de pantalla lógica. Quedaría
como esto:
<IMG SRC="name. if" ALT="Text-only display" WIDTH=59 HEIGHT=127>
Doblar la animación
prince@atlas.odyssee.net sugirió este truco. <IMG lowsrc="starroll.gif"
SRC="starroll.gif" ALT="rollin star..." width="59" height="59"> Mostrará una
única animación GIF dos veces. Esto puede utilizarse desde que Netscape
soporta un número finito de iteraciones en su looping. No se si esto funcionará
online. La operación offline (local en tu disco duro) funciona de forma diferente.
Offline tendrá el efecto deseado.
Animación por Demanda
Esta imagen linkada es un ejemplo de Animación por demanda. Esta página

HTML ha sido salvada dos veces. Una vez como GIFHTML.HTM: en esta copia
las animaciones son ensanchadas a la anchura indicada en GIFHTML1.HTM.
La página HTML es después salvada otra vez como GIFHTML1.HTM y todos
los links de GIFHTML1.HTM se cambian a GIFHTML.HTM. Esto quiere decir
que los links rebotarán entre idénticos hiperlinks en dos documentos idénticos,
esencialmente haciéndo un reload desde la caché. Esta es una manera más
elegante de decirle al usuario que pulse el botón de reload. También hace que
ciertas páginas sean mostradas en la posición correcta cuando son mostradas.
Esto es muy importante en páginas más grandes que el tamaño de la pantalla.
Muchos reloads colocan al usuario en la parte superior de la página, donde no
verán la animación que está más abajo. Aquí tenemos un ejemplo:
Como evitar que la Animación arruine el display de otros browsers
Estoy todavía investigando como hacer una imagen nítida en un browser que
no sea Netscape. La mayoría de los browsers mostrarán el primer fotograma
de tu animación. Los browsers de HotJava AOL y SUN muestran solamente el
último fotograma. Si este fotograma es presentable quedará bien (como en las
rolling stars). Pero si tu primer fotograma no es una imagen completa (Como la
primera versión de Interconnections) se verá mal. Aol solía mostrar sólo la frase
"forming links around the world" en una gran caja transparente para la
animación Interconnections. He arreglado esta animación.
8
El Truco LOWSRC One-Time
La primera posibilidad que vi era utilizar la animación GIF en una etiqueta

LOWSRC, y el fotograma estático del fichero en una etiqueta SRC como un
GIF separado. Solamente Netscape (que yo sepa) soporta la extensión
Netscape de LOWSRC, así sólo NN escogerá para mostrar la animación. La
SRC es mostrada por todos los browsers y debería ser un GIF estático normal.
EJEMPLO:
<IMG SRC="final_image.gif" LOWSRC="animated_gif.gif">
Utilizando Fotogramas
Glenn David de World Wide Web Design sugiere esta solución.
Puedes utilizar la etiqueta FOTOGRAMA (FRAME), que solamente es

reconocida por 2.0 o superiores, para enviar a los browsers páginas 2.0 y
páginas que no son 2.0. Esto significa que debes tener páginas dobles, una
animada y otra no. Si tienes espacio
Marcos
Para crear una página dividida en marcos, es necesario crear varios archivos
HTML referidos a un archivo principal, que es el que permite su gestión. Así
pues, antes de nada hace falta impostar este archivo "fuente", y,
posteriormente, los demás archivos que componen el marco.
Imaginemos que debemos crear una ventana dividida en marcos como la de la

figura, con un marco en la parte superior fijo (en el cual cargaremos el archivo
"top.htm", que deberemos crear aparte) y un marco central (en el cual
cargaremos el archivo "central.htm", que deberemos, asimismo, crear aparte)
que cambiará según cual sea la página que deba mostrar. Como hemos
señalado antes, la gestión de estos dos marcos correrá a cargo de un tercer
archivo, el cual deberá invocarlos asignándoles una parte de la página. He aquí
el código de esta página:
<FRAMESET rows="80,*">
<frame name="alto" src="top.htm">
<frame name="central" src="central.htm">
</FRAMESET>
Como podemos ver, el código del marco está encerrado entre las marcas
<FRAMESET></FRAMESET> que se comportan como las marcas usuales
<HTML></HTML>.
El tamaño de los marcos, o mejor dicho, el espacio que cada uno de ellos debe
ocupar en la página, queda establecido mediante la marca rows="80,*, que
significa que el marco alto (que en este caso es una fila, "row") debe tener 80
píxel, mientras que "*" significa que todo el resto debe asignarse al marco
9
central. Asimismo, habríamos podido expresar el tamaño de los marcos en
tantos por ciento de esta manera:
<FRAMESET rows="20%,*">
Una vez impostados los dos parámetros <FRAMESET></FRAMESET>, dentro

de ellos se definen los nombres y los archivos que deberán invocarse en los
dos marcos creados. Es necesario dar un nombre al marco (name="alto") e
indicar el archivo HTML que deberá cargarse dentro del marco
(SRC="top.htm"). Deben, por tanto, crearse previamente dos archivos de
nombre "top.htm" y "central.htm".
Fíjate bien en lo importante que es la colocación dentro del código para una
correcta interpretación por parte del navegador. Así, si se invirtiera el orden de
esta manera:
<FRAMESET rows="80,*">
</FRAMESET>
el navegador invertiría el orden de asignación y cargaría el archivo
"central.htm" en el marco superior, y el archivo "top.htm" en el marco central.
Para crear dos marcos verticales basta sustituir el término "rows" (filas) con el
término "cols" (columnas):
<FRAMESET cols="100,*">
<frame name="sx" src="sx.htm">

</FRAMESET>
Los antiguos navegadores no soportaban los marcos por lo cual, dada la

posibilidad de que se use uno de estos viejos programas para visualizar las
páginas, es útil insertar un código que advierta de la presencia de marcos y de
la imposibilidad de que el navegador los muestre. Éste es el código que debes
incluir:
<noframe>
<HTML>
10
<body>
Atención. Tu navegador no soporta la opción de los marcos.

Para ver estas páginas es necesario descargar un navegador
que soporte dicha opción. Te aconsejo Netscape 3.0 o
superior.
</body>
</html>
</noframe>
Es posible adoptar simultáneamente una división tanto en columnas como en

filas, de manera que se cree una ventana dividida en varios marcos. Veamos
cómo debemos intervenir en el código HTML del documento según el número y
la posición de los marcos que queremos crear.
<frameset rows="100,*">
<frameset cols="150,*">
<frame name="sx" src="sx.htm.htm">
</frameset>
</frameset>
<frameset rows="100,*">
</frameset>
</frameset>
<frameset rows="20%,60%,20%,*">
<frame name="bajo" src="basso.htm">
</frameset>
11
</frameset>
<frameset cols="75%,25%">
<frameset rows="20%,80%*">
</frameset>
<frame name="dx" src="dx.htm">
</frameset>
<frameset cols="20%,80%*">
</frameset> </frameset>
</frameset>
</frameset> <frameset rows="24%,76%">
<frame name="top" src="top2.htm"> <frame
name="dx" src="dx.htm">
</frameset> </frameset>
<frameset rows="80%,20%">
<frame name="bajo" src="basso.htm">
</frameset>
</frameset>
12
<frameset cols="20%,60%,20%">
</frameset>
Para eliminar el borde gris de los marcos, se debe insertar el siguiente código:
<frameset cols="20%,60%,20%" border=0>
Para impedir que los marcos sean redimensionados por el visitante:

<frame name="alto" src="top.htm" noresize>
Para eliminar siempre las barras de desplazamiento (scrollbars):

<frame name="alto" src="top.htm" scrolling="no">
Para mostrarlas siempre:

<frame name="alto" src="top.htm" scrolling="yes">
Para mostrarlas sólo cuando son necesarias:

<frame name="alto" src="top.htm" scrolling="auto">
Para regular la distancia del contenido del marco al margen superior

(marginheight) y a los márgenes izquierdo y derecho (marginwidth):
<frame name="alto" src="top.htm" marginheight=2 marginwidth=5>
Vamos a ver una etiqueta HTML que sirve para hacer botones, de la que no
habíamos hablado antes en nuestro manual de HTML . Esta etiqueta es
<button>, que permite la creación de botones más personalizados, por lo que
ofrece algunas ventajas, e igualmente unos inconvenientes que vamos a tratar
aquí. Antes que nada, deberíamos decir que en DesarrolloWeb.com ya
habíamos comentado acerca de otra etiqueta que servía para hacer botones, la
etiqueta <input>, que además tiene otros usos. Vamos a explicar también las
diferencias entre hacer botones con <button> e <input>.
Primero habría que conocer bien los usos de la etiqueta INPUT, que sirve para
hacer varias cosas, como campos de texto, campos ocultos, botones de enviar
formulario, borrar sus datos y botones normales. Veamos los usos de la
etiqueta INPUT antes de continuar.
BUTTON
13
La etiqueta BUTTON se utiliza con una apertura de etiqueta <BUTTON> y una
de cierre </BUTTON>. Entre las dos etiquetas, de apertura y cierre, se coloca
el contenido que irá dentro del botón.
Tiene la particularidad que se pueden colocar dentro del botón los contenidos
que se desee, es decir, entre la etiqueta de apertura y cierre se puede colocar
texto a voluntad, pero también otras etiquetas HTML, como imágenes, saltos
de línea, negritas o lo que podamos necesitar.
Veamos un ejemplo:
<button>
Hola esto es un <b>botón</b>
<br>
<br>
Puedo poner saltos de línea en él!
<hr>
Y otras cosas
<br>
<img src="http://www.desarrolloweb.com/images/logo_desarrollo_web.gif"
width="261" height="35" alt="">
</button>
Que tendría este aspecto:
Hola esto es un botón
Como se puede ver, permite aportar bastante creatividad a los botones que
incorporemos en páginas web, mucho más que la etiqueta INPUT, que sólo
permite colocar texto dentro del botón:
<input type="button" value="texto del botón">
Atributos de BUTTON
Ahora veamos rápidamente los atributos que podemos utilizar:
name: sirve para darle un nombre al botón. Al enviarse el formulario se

enviarán los datos del bot´n bajo este nombre.
type: sirve para indicar el tipo de botón, que podría ser: button para un
botón normal, reset para un botón de borrado de datos del formulario y
submit para un botón de envío de formulario.
value: para especificar el valor de un botón. El valor es lo que se enviará
por formulario, en el momento del submit. Pero ojo aquí porque puede
haber diferencias entre navegadores, que veremos a continuación.
disabled: este atributo sirve para hacer que el botón se encuentre
deshabilitado.
14
Incompatibilidades entre navegadores con la etiqueta BUTTON
Lamentablemente, la etiqueta BUTTON tiene diversas interpretaciones por

parte de los distintos navegadores del mercado. Desde desarrollo web .com
advertimos que se debe tener cuidado cuando la usemos, porque estas
incompatibilidades podrían perjudicar el buen funcionamiento de la página.
1. Por defecto, el atributo type de BUTTON tiene el valor "button" en todos

los navegadores, salvo Internet Explorer, al menos hasta la versión 7,
que le da por defecto valor "submit". Esto lo solucionamos simplemente
colocando siempre el atributo type con el valor que queramos.
2. Cuando se envía un formulario con un botón creado con la etiqueta
BUTTON, Internet Explorer envía como value del botón lo que hay
escrito en él, es decir, el texto que haya entre <BUTTON> y </BUTTON>
con todas las etiquetas que pueda haber dentro. Los demás
navegadores envían el atributo value que tenga el botón, aunque sólo
hacen esto cuando el botón es de type="submit" y si se ha enviado el
formulario pulsando ese botón.
De estas dos incompatibilidades, la segunda tiene más difícil solución, porque

deberíamos saber el navegador que está utilizando el usuario para poder saber
el comportamiento del BUTTON. Es por ello que lo más recomendable es no
basar el funcionamiento de scripts en formularios en esta etiqueta. Por lo
demás, tiene algunas funcionalidades interesantes que podrían venirnos bien el
algún momento.
multimedia
Multimedia con el Media Player de Windows

Se utiliza también el elemento <EMBED> y sus atributos son: TYPE, SRC,
AUTOSTART, LOOP, SHOWCONTROLS, SHOWSTATUSBAR,
CLICKTOPLAY, VOLUME, WIDTH, HEIGHT, HIDDEN. Todas las
instrucciones son válidas tanto para ficheros de sonido como para los de video
o video con sonido. Si algun tipo de fichero no es reconocido por el media
player, se puede instalar el "codec" adecuado.
Veamos para qué sirve cada uno:
TYPE efectua la llamada al Media Player. <EMBED TYPE="application/x-

mplayer2" >
SRC Indica dónde está el fichero multimedia, pero no puede utilizarse solo,
necesita la compañía de otros atributos del elemento, concretamente los que
definen el tamaño de la consola: <WIDTH> (largo) y <HEIGHT> (alto) Por
ejemplo:
<EMBED TYPE="application/x-mplayer2"
SRC="minueto.mid"
WIDTH=287
15
HEIGHT=65>
Hará aparecer el Media Player:
En caso de omitir los atributos WIDTH y HEIGHT, los tamaños por defecto no
permiten ver el reproductor multimedia entero.
Otro atributo de EMBED es AUTOSTART con dos posibles valores: 1 (por

defecto) y 0, y como ya habrás deducido, 1 hace que suene inmediatamente
después de cargar la página, y sin necesidad de pulsar el botón "start" de la
consola. Por ejemplo:
SRC="minueto.mid"
WIDTH=287
HEIGHT=65
AUTOSRART=0>
El siguiente atributo a analizar es HIDDEN que sólo tiene un valor: TRUE, y

hace invisible la consola, pero evidentemente, si es invisible no puedes
activarla, y por tanto lo hace él mismo, siempre que no hayas puesto
AUTOSTART=0, claro. Por ejemplo:
SRC="minueto.mid"
WIDTH=287
HEIGHT=65
AUTOSRART=1
HIDDEN=TRUE>
También disponemos de estos otros atributos:
SHOWCONTROLS que puede valer 1 (por defecto) o 0, y sirve para que la

consola muestre los botones de control, como start, pause stop, etc.
SHOWSTATUSBAR puede valer 0 (por defecto) o 1 para hacer que aparezca

la barra de estado.
CLICKTOPLAY con valores 1 (por defecto) o 0 que permiten iniciar o parar la

ejecución del fichero multimedia pulsando con el puntero del ratón en la
consola, en lugar de en los botones de la barra de controles. Fíjate que esto
funciona pulsando en el interior de la ventana superior del Media Player, no en
la barra de controles.
VOLUME Para definir el volumen de sonido que habrá al cargar el fichero

multimedia. Contra lo que cabría esperar el valor 0 establece el máximo
volumen y cualquier valor mayor que 0 establece volumen medio. Hay además
un atributo que no es propiamente del elemento <EMBED>: ALIGN= y sus
valores TOP, BOTTOM, CENTER, LEFT, RIGHT, MIDDLE y TEXTTOP que
funcionan igual que sus respectivos del elemento IMG, es decir, que no tiene
efectos sobre el sonido o la imagen, sino sobre la figura de la consola y su
16
alineación con el texto de la página. He aquí un ejemplo con todos ellos
excepto HIDDEN:
SRC="colon.avi"
WIDTH=350
HEIGHT=300
AUTOSTART=0
SHOWCONTROLS=1
SHOWSTATUSBAR=1
CLICKTOPLAY=1
VOLUME=0
ALIGN=TOP>
Hasta aquí hemos visto como presentar un fichero multimedia, pero solo uno.
En efecto, ¿qué hacer si tenemos un fichero de gran tamaño troceado en varias
partes? O simplemente, varios ficheros relacionados aunque no formen parte
de uno solo. Si el número de partes es relativamente elevado, puede ser muy
cargante presentarlos todos de la forma que ya conocemos, y lo que es peor,
puede suceder que el navegador se cuelgue.
Existe una forma de acceder a una lista de ficheros multimedia utilizando el

Media Player. Es decir, que escribiendo solamente un elemento <EMBED> se
puede ver o escuchar una serie de ficheros. Así:
SRC="lista.asx"
AUTOSTART=0
WIDTH=287
HEIGHT=65>
Como puedes ver, la sitaxis es la misma de siempre. La particularidad reside
en la extensión del fichero multimedia. No, no es un nuevo tipo de video super
comprimido, es simplemente un fichero de texto, editado con cualquier editor,
como el bloc de notas, que contiene la referencia a los ficheros que se desea
encadenar. Por ejemplo, para encadenar dos de los ficheros multimedia que se
han utilizado hasta ahora como ejemplos, el fichero .ASX necesario se escribe:
Fichero lista.asx
<ASX version = "3.0">

<ENTRY><REF HREF="minueto.mid"/></ENTRY>
<ENTRY><REF HREF="adagio.mid"/></ENTRY>
</ASX>
ATENCION: Todas las líneas de los ficheros .asx deben comenzar justo junto
al margen izquierdo, sin ningun espacio en blanco.
Desarrollando Contenido Dinámico
17
Además de posicionar elementos como se ha visto en el punto anterior, HTML
Dinámico se orienta a la modificación del contenido y el ajuste de los estilos en
linea (on the fly). Desafortunadamente, los dos browsers principales tienen
ideas muy diferentes de como hacer el contenido dinámico. En particular IE 4
deja disponible al código script mucho mas de cada elemento de los
documentos y el browser rehace el layount del contenido en pantalla
automaticamente para acomodar cualquier cambio hecho por el código. Las
capacidades de NN 4.0 son mucho mas limitadas en este sentido. En efecto, el
hecho que NN no redespliegue en forma automática los cambios en el
contenido, deja este browser en clara desventaja.
Escribiendo Contenido Variable
Mientras la página se esta cargando, se puede usar el método JavaScript

document.write() para generar contenido que no puede se almacenado como
parte del documento mismo. El ejemplo siguiente muestra un caso muy simple
en donde se combinan HTML estático y contenido dinámico correspondiente a
propiedades que solo el cliente y el browser pueden determinar.
<HTML>
<BODY>
<H1>Bienvenido</H1>
<P>Tu estas usando el browser <B>
<SCRIPT LANGUAGE="JavaScript">
document.write(navigator.appName)
document.write(", versión " + navigator.appVersion )
</SCRIPT>
</P>
</SCRIPT>
</HTML>
Se puede usar los métodos document.write() y document.writeln() en script

que se ejecutan mientras el documento se esta cargando, pero no se pueden
usar ninguno de esos dos métodos una vez que el documento se ha terminado
de cargar. En realidad, después que el documento se ha cargado se puede
invocar una sola vez uno de estos métodos, el que cambia completamente el
contenido de la página. El ejemplo siguiente muestra esta alternativa.
Escribiendo en otros Frames y Windows
También se puede usar el método document.write() para enviar contenido

dinámico a otra ventana o frame. En este caso no existe la limitación de enviar
todo de una vez, se puede seguir enviando contenido en todo momento hasta
que se cierra el canal de salida con documento.close().
Lo único que se necesita para llevar a cabo esto es una referencia valida a la
otra ventana o frame. Como se generan los frameset o la ventan secundaria
afecta la referencia.
18
Frameset y Frames
Un documento con frame típico define el layout fisico de como la ventana

principal del browser se debe dividir en panles separados. Los frameset
pueden se anidados en mucho niveles donde un frame carga un documento
que a su vez subdivide su espacio. La clave para tener un referencia valida a
un frame distante es saber la relación entre el frame que contiene el script que
escribe el contenido y el frame destino.
parent.resultados.document.write(contenido)
En caso de que se desee cargar otra página en dicho frame se requiere una
instrucción como esta:
parent.resultados.location.href = "nuevaPagina.html"
Reemplazo de Imagenes
Una de las primeras facilidades relativas a hacer el contenido dinámico fue el

reemplazo de imagenes.La base de esta técnica es un DOM que define una
imagen como un objeto cuyas propiedades pueden ser cambiadas en cualquier
momento (on the fly). Una de estas es la propiedad SRC que contiene el URL
de la imagen cargada inicialmente con lo especificado en el tag IMG. Cuando
se cambia esta propiedad se cambia la imagen desplegada en la ventana en el
mismo espacio rectangular definido por los atributos WIDTH y HEIGHT.
Navigator 3.0 y superiordefinen un objeto Image desde el cual nuevas

imagenes pueden ser creadas en memoria a través de script. Este tipo de
imagenes no aparecen en el documento, pero se pueden precargar, para asi
poder usarlas para intercambiarlas con otras de manera que el cambio sea
instantaneo y no se requiera esperar para que la carga se concrete.
19

Nolascosemana 2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Nolascosemana 2

Cargado por

Copyright:

Formatos disponibles

Índice:

Los formularios son posiblemente la herramineta más utilizada en Internet para

Este tema a diferencia de los anteriores es bastante más complejo y oscuro,

¿Cómo los definimos?

Todo formulario debe estar encerrado entre el par de etiquetas <FORM> y

La etiqueta <INPUT> es la segunda etiqueta más importante de los formularios.

Este par de etiquetas nos permiten definir un área de dimensiones arbitrarias

Introducción a las tablas

Estructura de una tabla

columna 1 columna 2 columna 3

Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla,

De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo , el esquema de

La visualización de una tabla se genera automáticamente a partir de las filas y

Para incluir un gráfico en un documento HTML se utiliza la directiva <IMG>. En

Hay un parámetro optativo de la directiva <IMG> que sirve para proponer un

<IMG SRC="URL/fotografia.gif" ><P>

Los documentos de información gráfica deben optimizarse para la

Tags adicionales.- Lo anterior es suficiente para producir documentos HTML

Un ejemplo más largo

<TITLE>Ejemplo mas largo </TITLE>

<H1>Un ejemplo mas largo </H1>

Colocar un fondo en una página web

Para incluir un fondo en una página web necesitamos utilizar el atributo

Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la

Consejos para utilizar fondos

1) Colocar un fondo de color parecido a la imagen

2) Que se puedan leer bien los textos

4) Tener cuidado con las distintas definiciones de pantalla

5) Hacer un fondo suficientemente grande

<IMG SRC="name. if" ALT="Text-only display" WIDTH=59 HEIGHT=127>

Animación por Demanda

Esta imagen linkada es un ejemplo de Animación por demanda. Esta página

Como evitar que la Animación arruine el display de otros browsers

La primera posibilidad que vi era utilizar la animación GIF en una etiqueta

<IMG SRC="final_image.gif" LOWSRC="animated_gif.gif">

Puedes utilizar la etiqueta FOTOGRAMA (FRAME), que solamente es

Imaginemos que debemos crear una ventana dividida en marcos como la de la

Una vez impostados los dos parámetros <FRAMESET></FRAMESET>, dentro

<frame name="sx" src="sx.htm">

Los antiguos navegadores no soportaban los marcos por lo cual, dada la

Atención. Tu navegador no soporta la opción de los marcos.

Es posible adoptar simultáneamente una división tanto en columnas como en

Para impedir que los marcos sean redimensionados por el visitante:

Para eliminar siempre las barras de desplazamiento (scrollbars):

Para mostrarlas siempre:

Para mostrarlas sólo cuando son necesarias:

Para regular la distancia del contenido del marco al margen superior

Que tendría este aspecto:

Hola esto es un botón

<input type="button" value="texto del botón">

Ahora veamos rápidamente los atributos que podemos utilizar:

name: sirve para darle un nombre al botón. Al enviarse el formulario se

Lamentablemente, la etiqueta BUTTON tiene diversas interpretaciones por

1. Por defecto, el atributo type de BUTTON tiene el valor "button" en todos

De estas dos incompatibilidades, la segunda tiene más difícil solución, porque

Multimedia con el Media Player de Windows

Veamos para qué sirve cada uno:

TYPE efectua la llamada al Media Player. <EMBED TYPE="application/x-

Otro atributo de EMBED es AUTOSTART con dos posibles valores: 1 (por

El siguiente atributo a analizar es HIDDEN que sólo tiene un valor: TRUE, y

También disponemos de estos otros atributos:

SHOWCONTROLS que puede valer 1 (por defecto) o 0, y sirve para que la

SHOWSTATUSBAR puede valer 0 (por defecto) o 1 para hacer que aparezca