15
El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Embed Size (px)

Citation preview

Page 1: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

El lenguaje HTML:Programación avanzada

Juan Alberto SigüenzaEscuela Técnica Superior de InformáticaUniversidad Autónoma de Madrid

Page 2: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Tablas (elementos básicos)

Creación de una Tabla: <TABLE></TABLE>

Asignación de filas <TR></TR>

Asignación de columnas <TD>>/TD>

Ejemplos 11, 12 y 13

Page 3: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

HTML con Netscape Composer

Page 4: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Marcos (frames)

Permiten subdividir el área de visualización del browser con diferentes páginas HTML.

Puede haber una división: Horizontal: <FRAMESET COLS=30%,70%> Vertical: <FRAMESET ROWS:40%,60%> Mixta

Ejemplos 14, 15 y 16

Page 5: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Mapas gráficos (I)

Son imágenes sensibles al ratón.Se definen mediante coordenadas.Envian a diferentes páginas HTML al

pulsar sobre áreas distintas.Se pueden configurar utilizando

tablas.

Page 6: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Mapas gráficos (II)

<MAP NAME = Colores><AREA SHAPE = “POLY” COORDS =“x1y1x2y2x3y3” HREF=“pag1.html”><AREA SHAPE = “RECT” COORDS =“x1y1x2y2” HREF=“pag2.html”><AREA SHAPE = “CIRCLE” COORDS =“x1y1r” HREF=“pag1.html”></MAP><IMG SRC = “colores.gif” USEMAPS = “#colores”>

Page 7: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Formularios I

Equivalentes a los formularios de papel.

Permite la comunicación con Bases de Datos.

Son la base de las Intranets.

Page 8: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Formularios II

Especificaciones iniciales: <FORM METHOD=“POST”

ACTION=“MAILTO:[email protected]”> </FORM>

Page 9: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Formularios III

Campo de entrada TEXTO <INPUT NAME=“nombre” SIZE=“20”>

Campo de entrada elección múltiple <INPUT NAME=“nombre”

TYPE=“radio”>Campo de entrada selección múltiple

<INPUT NAME=“nombre” TYPE=“checkbox”>

Page 10: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Formularios IV

Lista desplegable de selección <SELECT NAME=“nombre” SIZE=“1”> <OPTION>nombre1 <OPTION>nombre2 </SELECT>

Page 11: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Formularios V

Campo Área de Texto <TEXTAREA NAME=“nombre” SIZE=“2”

COLS=“50” ROWS=“2” </TEXTAREA>

Page 12: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Formulario VI

Botones de envio y borrado de formulario <INPUT TYPE=“submit”

VALUE=“Enviar”> <INPUT TYPE=“reset”

VALUE=“Borrar”>

Page 13: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Programas CGI

Common Gateway InterfaceSon una especificación para los

programas que el usuario puede especificar en la WWW.

Se ejecutan en el servidor.Los lenguajes mas comunes son

PERL y C.

Page 14: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Funcionamiento de los CGI

Se ejecutan por el usuario de forma semejante a como se va a una página HTML, al pulsar sobre un enlace.

El explorador usa la dirección URL del programa CGI para contactar con el servidor web donde se instaló el programa, y el servidor lo ejecuta.

Page 15: El lenguaje HTML: Programación avanzada Juan Alberto Sigüenza Escuela Técnica Superior de Informática Universidad Autónoma de Madrid

Recepción y descodificación de un formulario

Elegir el método POST o GET.Los formularios se basan en una

serie de parejas Nombre del Campo-Valor del campo, lo primero es separar todas las parejas del formulario por lo que hay que detectar los símbolos de separación, p.e. &.