Cap III B PDF

LENGUAJES DE PROGRAMACIN II
HTML
Ing. Vinicio Ramos Valencia

vi_ramos@espoch.edu.ec
0984421066
2 TEMAS:
Frames
Formularios Y Cuadros dialogo
CSS
Ejemplos
Etiquetas para el trabajo con
Marcos
Los marcos (frames) permiten

dividir la pantalla en bloques de
diferente tamao, de modo que
la informacin queda organizada
de acuerdo con el gusto o las
necesidades de quien disee la
pgina Web.
Marcos
Una pantalla basada en marcos consta de varios
documentos HTML, lo cual contrasta con las pantallas
que hemos diseado hasta el momento.
Las pginas Web ms simples hacen corresponder un
solo documento HTML con la pantalla visualizada.
Esta concepcin se modifica con los marcos, ya que
son necesarios varios documentos HTML para generar
una pantalla en la ventana del navegador. Por ejemplo
consideremos la siguiente figura.
Marcos
Marcos
En el ejemplo anterior, cada zona es un

marco. Para definir un marco es
necesario disponer de una pgina HTML.
Por este motivo, en la figura anterior se
utilizan 3 documentos HTML para cada
marco, adems del documento HTML
que define el conjunto de marcos
Atributo TARGET
En particular nos interesa el atributo TARGET de la

etiqueta <A> empleada para la gestin de hipervnculos.
La sintaxis es la siguiente:
TARGET=nombre_de_la_ventana
El atributo TARGET le indica al navegador que debe
presentar una nueva ventana cuyo nombre es
nombre_de_la_ventana, y en cuyo interior se
despliega la informacin sealada por el hipervnculo.
Atributo TARGET
El nombre de la nueva ventana no debe

de comenzar con el signo subrayado
(_), debido a que este smbolo forma
parte de ciertas palabras reservadas
usadas con el comando TARGET.
Un ejemplo de la utilizacin de este

atributo es:
<A HREF=ventana2.html
TARGET=ventana_dos> Abrir </A>
Ejercicio:
Cree los siguientes archivos HTML,

como se muestra a continuacin:
Ejercicio:
A continuacin cree el siguiente archivo HTML:
La idea es que al click en el link abrir, se abra la

pgina en otra venta, posteriormente al hacer
click en cargar se abra sobre la ventana en el
Atributo Base
Es muy comn que varios hipervnculos apunten
a la misma pgina, en especial cuando se
trabaja con marcos.
Para esto, podemos utilizar el atributo <BASE>,
ya que con ste, se pueden definir globalmente
el destino de todos los hipervnculos de la
pgina Web. En especial si se coloca el atributo
<BASE> en la seccin <HEAD></HEAD> del
documento.
En el siguiente ejemplo, los hipervnculos

Productos y Servicios despliegan su contenido
en la ventana informacin.
Ejemplo del atributo Base
<HTML>
<HEAD>
<BASE TARGET=informacin>
</HEAD>
<BODY>
<A HREF=productos.html> Productos</A>
<A HREF=servicios.html> Servicios</A>
<A HREF=mantenimiento.html
TARGET=mantenimiento>Mantenimiento</A>
</BODY>
</HTML>
Etiqueta
<FRAMESET><FRAMESET>
La etiqueta <FRAMESET> se utiliza para crear el
documento de definicin de marco. Es
importante observar que esta etiqueta
reemplaza a la etiqueta <BODY>, lo cual
significa que ambas etiquetas son
incompatibles.
Un documento que contenga una etiqueta

<FRAMESET> es un documento de definicin de
marcos, y no debe contener ninguna otra
etiqueta de formato o hipervnculo, ni texto
informativo de ninguna naturaleza.
Etiqueta
La etiqueta <FRAMESET> posee dos atributos
esenciales, COLS y ROWS, utilizados para definir
el nmero de marcos verticales (COLS) y el
nmero de marcos horizontales (ROWS) que
sern visualizados en la pantalla del navegador.
El ancho de las columnas, o la altura de las filas

se puede expresar de tres maneras diferentes:
en pxeles, como porcentaje del ancho total, o
con una asterisco (*).
Cuando se usa el (*), el navegador asignar el

ancho posible al marco especificado.
Etiqueta
<FRAMESET COLS=80,50%,*>
La etiqueta mostrada crea una pantalla con tres marcos
verticales, el primero de 80 pxeles, el segundo ocupa el 50% del
ancho total de la ventana, y el ltimo ocupa el espacio
restante.
Etiqueta <FRAME>
Una vez definido el conjunto bsico de marcos, se requiere
asociar un documento HTML con cada marco del documento
de definicin de marcos. Esto se consigue con la etiqueta
<FRAME>, cuya sintaxis es la siguiente:
<FRAME SRC=URL del documento>
Etiqueta <FRAME>
Por cada marco definido con la etiqueta

<FRAMESET> debe utilizar la correspondiente
etiqueta <FRAME>. Para ilustrar el uso de estas
etiquetas vamos a escribir un documento HTML
que defina tres marcos horizontales, y en cada
uno de ellos vamos a presentar el contenido de
las pginas ventana1.html, ventana2.html y
ventana3.html creadas anteriormente.
Ejemplo
Cdigo del Ejemplo
<HTML>
<HEAD>
<TITLE>Marcos </TITLE>
</HEAD>
<FRAMESET ROWS="50%,20%,30%">
<FRAME SRC="ventana1.html" SCROLLING="NO">
</FRAMESET>
</HTML>
Atributos de la etiqueta Frame
SCROLLING=AUTO. Es el valor predeterminado. Con este
atributo se agregan barras de desplazamiento horizontal y
vertical.
SCROLLING=NO. Se desactivan las barras de desplazamiento
del marco, tanto la horizontal como la vertical.
NORESIZE. Con esta opcin se impide que el usuario pueda
modificar la posicin del marco dentro de la pantalla.
MARGINHEIGHT=pxeles. Permite ajustar el margen superior e
inferior del marco dentro del documento. Su valor debe de
darse en pxeles.
MARGIINWIDTH=pxeles. Permite ajustar el margen superior e
inferior del marco dentro del documento. Su valor debe de
darse en pxeles.
Los atributos FRAMEBORDER=YES | NO, y
BORDERCOLOR=uncolor de la etiqueta FRAME determinan si
un marco tiene o no borde y el color del mismo.
Atributos de la etiqueta Frame
<NOFRAMES> </NOFRAMES>
Con esta etiqueta se garantiza que aquellos browser que
no posean soporte para marcos, desplieguen una
informacin descriptiva en relacin con los marcos no
visualizados.
Ejemplo
<HTML>
<HEAD>
<TITLE> Ejemplo </TITLE>
</HEAD>
<FRAMESET ROWS=20%,*>
<FRAME SRC=menu.hml NAME=superior>
<FRAME SRC=inicio.hml NAME=principal>
</HTML>
Ejemplo
<HTML>
<HEAD>
<TITLE> Menu </TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>
<A HREF=inicio.html TARGET=principal>Inicio </A>
</TD>
<TD>
<A HREF=curriculum.html TARGET=principal>Curriculum </A>
</TD>
<TD>
<A HREF=cursos.html TARGET=principal>Cursos</A>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Formularios
La mayor parte de los elementos HTML de que disponemos
permite al visitante visualizar los contenidos de un sitio,
pero no interactuar con l. Dicho de otro modo, la
relacin usuario/pgina es unidireccional y esttica. Con
los formularios, por el contrario, el usuario puede
interactuar con el sitio enviando sus comentarios,
haciendo peticiones sin necesidad de escribir mensajes
por correo electrnico, firmando en el libro de visitas,
contestando a encuestas y sondeos, etc. Todo ello define
una relacin bidireccional, que es posible slo gracias a la
intervencin de programas residentes en servidores WWW:
se trata de los denominados CGI o Common Gateway
Interface (Interfaz Comn de Pasarela).
Formularios II
Los CGI hacen posible lo que no podra hacerse si se

actuara desde el lado del cliente. Es decir, la gestin de
los formularios depende, en realidad, ms del servidor
que de la programacin HTML. Para que un formulario
HTML funcione es necesario disponer de un CGI
residente en el propio servidor o en otro sitio.
Etiquetas
<FORM></FORM>
Esta etiqueta abre y cierra el formulario y recoge el
contenido de la misma, que puede variar segn una serie
de etiquetas que veremos ms adelante. No es posible
insertar un formulario dentro de otro. Dicho de otro
modo, en los formularios no se permiten anidamientos.
Mtodos GET/POST
La sintaxis usual, es la siguiente:
<FORM method="get|post"
action="http://www.tuosito.com/cgi-
bin/nome_script.cgi">
Si method utiliza GET, los datos se envan al servidor y
se separan en dos variables.
Para este mtodo el nmero mximo de caracteres
que puede contener el formulario es de 255.
Utilizando "method=post", el script CGI recibe
directamente los datos sin un proceso previo de
descodificacin. Esta caracterstica hace que el
script pueda leer una cantidad ilimitada de
caracteres.
Formularios
Una vez impostada la primera marca <FORM> de la plantilla, es

posible, siempre y cuando el script CGI lo permita, crear algunos
elementos que resultan de gran utilidad para una adecuada gestin
de los datos:
<INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT

VALUE="Asunto del formulario">
Este cdigo determina el asunto (subject) del mensaje que recibirs

por correo electrnico con el contenido del formulario. Es muy til
que los mensajes recibidos lleven especificado el asunto, no slo
para quienes usan filtros de seleccin del correo, sino tambin para
ordenar la correspondencia.
Formularios
<INPUT TYPE=HIDDEN
NAME=MAILFORM_URL
VALUE="http://www.tuosito.it">
Este cdigo es muy til ya que, una vez
rellenado y enviado correctamente, el
formulario responde con una pgina
HTML sucesiva, dentro de la cual es
posible incluir cualquier tipo de
comentario. Lo ms normal es visualizar
una pgina de confirmacin "Tu
formulario ha sido enviado
correctamente", pero se puede tambin
mandar directamente a la portada del
sitio. Se trata de comandos no estndar
que varan segn el CGI utilizado.
Etiqueta <INPUT>
La marca de base para la definicin de

los elementos de un formulario es
<INPUT>, que se utiliza para agregar
botones, mens de seleccin,
contraseas, etc. A <INPUT> se le
pueden asignar los 8 valores que
analizamos a continuacin.
<INPUT type=TEXT>
<INPUT type="TEXT" name="nombre"
maxlength="40" size="33" value="Tu nombre">
Este valor crea los tpicos campos de texto, en los que

generalmente se solicitan datos tales como el nombre o la
direccin de correo electrnico. TEXT tiene tres atributos
opcionales: maxlength (el nmero mximo de caracteres
que puede ser introducido en el campo y que no es
posible superar), size (la anchura de la cadena dentro de
la pgina) y value (visualiza un texto por defecto dentro
de la cadena).
<INPUT type=PASSWORD>
<INPUT type="PASSWORD" name="nombre" maxlength="40"
size="33">
Este campo de texto funciona como el anterior, pero con

una pequea diferencia que su propio nombre indica:
cuando se escribe dentro del cuadro de texto, no se ven
los caracteres sino los clsicos asteriscos de las
contraseas. En realidad, los datos no se codifican de
ningn modo por lo que esta marca no consigue eliminar
la inseguridad de fondo.
<INPUT type=CHECKBOX>
<INPUT type="CHECKBOX" name="edad" value="s"
checked>
Este atributo se utiliza para representar datos de tipo

"s/no" y "verdadero/falso". Crea pequeas casillas
cuadradas que hay que marcar o dejar en blanco. Si la
casilla est marcada, INPUT restituye un valor al CGI; en
caso contrario, no restituye ningn valor. Value impostado
en "s" significa que por defecto la casilla est marcada.
Checked controla el estado inicial de la casilla, en el
momento de cargar la pgina.
<INPUT type=RADIO>
<INPUT type="RADIO" name="calificacin"
value="suficiente">
<INPUT type="RADIO" name="calificacin" value="bueno">
<INPUT type="RADIO" name="calificacin"
value="excelente">
Este atributo tiene funciones similares al visto

anteriormente, pero contiene ms posibilidades de
seleccin. Seleccionando una de las presentes, y siempre
y cuando tengan todas un valor "name" idntico, las
restantes se deseleccionan automticamente.
<INPUT type=SUBMIT>
<INPUT type="SUBMIT" value="Enva">
El clsico botn de envo que remite el formulario con

todo su contenido. La dimensin del botn depende de
la longitud del texto.
<INPUT type=RESET>
<INPUT type="RESET" value="Reinicio">
Botn que vuelve a impostar todo el formulario

eliminando los datos introducidos.
<INPUT type=TEXTAREA>
<TEXTAREA cols=40 rows=5 WRAP="physical"
name="comentario"></textarea>
TEXTAREA se utiliza para introducir comentarios o campos

que prevn muchas lneas de texto. La anchura se
imposta con "cols" y la altura con "rows". WRAP="physical"
establece que, en el caso de que el texto introducido
supere la anchura de la ventana, salte de lnea
automticamente.
<INPUT type=SELECT>
<SELECT size=1 cols=4 NAME="calificacin">
<OPTION selected value=ninguna>
<OPTION value=bueno> Bueno
<OPTION value=suficiente> Suficiente
<OPTION value=excelente> Excelente
</select>
SELECT es un elemento que permite la creacin de listas

con varias posibilidades de seleccin. En nuestro ejemplo,
hemos solicitado una calificacin sobre un sitio web.
.
Gracias!!

Cap III B PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cap III B PDF

Uploaded by

Copyright:

Available Formats

LENGUAJES DE PROGRAMACIN II

Ing. Vinicio Ramos Valencia

Los marcos (frames) permiten

En el ejemplo anterior, cada zona es un

En particular nos interesa el atributo TARGET de la

El nombre de la nueva ventana no debe

Un ejemplo de la utilizacin de este

Cree los siguientes archivos HTML,

La idea es que al click en el link abrir, se abra la

En el siguiente ejemplo, los hipervnculos

Un documento que contenga una etiqueta

El ancho de las columnas, o la altura de las filas

Cuando se usa el (*), el navegador asignar el

Por cada marco definido con la etiqueta

Los CGI hacen posible lo que no podra hacerse si se

Una vez impostada la primera marca <FORM> de la plantilla, es

<INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT

Este cdigo determina el asunto (subject) del mensaje que recibirs

La marca de base para la definicin de

Este valor crea los tpicos campos de texto, en los que

Este campo de texto funciona como el anterior, pero con

Este atributo se utiliza para representar datos de tipo

Este atributo tiene funciones similares al visto

El clsico botn de envo que remite el formulario con

Botn que vuelve a impostar todo el formulario

TEXTAREA se utiliza para introducir comentarios o campos

SELECT es un elemento que permite la creacin de listas

You might also like