Introducción a HTML y Javascript Introducción a...

Adquisición y Tratamiento de Datos 1

Introducción a HTML y Javascript

Introducción a HTML• El HTML actual es el 4.01, que posee dos

especificaciones:– Transitorias: Más sencillas de usar pero difíciles de

mantener las webs.– Estrictas: Basadas en hojas de estilo, mayor

dificultad en diseñar una web pero mantenimiento muy sencillo.

• Usaremos las transitorias por sencillez.• http://validator.w3.org es una web que permite

validar la corrección de las páginas web.

http://validator.w3.org/



Etiquetas en HTML (I)• Las etiquetas en HTML son palabras reservadas

encerradas entre los símbolos < y >.• Existen tres tipos de etiquetas en HTML:

– Pareadas: Existe una etiqueta de inicio y final. <H1>Título</H1>

– Sin parear: La etiqueta representa la inserción de un elemento. <BR>, <IMG>

– Opcionales: Son pareadas en las cuales el final de la etiqueta puede indicarse por el comienzo de otra igual. <P>Aquí hay un párrafo<P>Y aquí otro...</P>



Etiquetas en HTML (II)• Las etiquetas pueden contener en su interior atributos

que modifican su comportamiento por defecto.• El formato es atributo=“valor”. Ejemplos:

<P ALIGN=left>

<IMG SRC="foto.gif">

<HR NOSHADE>• Las etiquetas pueden agruparse para “sumar” sus

efectos de presentación.

<B><I>Este texto saldrá en negrita e itálica</I></B>



Corrección sintáctica de los documentos• HTML tiene sus reglas sintácticas y todo

documento debería adaptarse a ellas. En caso de no hacerlo las reglas son:– Si se encuentra una etiqueta desconocida se ignora.– Si se encuentra un atributo con un valor erróneo o

fuera de rango, el atributo toma el valor por defecto.– Si se encuentra una combinación de etiquetas

anidadas no permitida, se presenta el efecto conjunto si es posible. En caso contrario, sólo se presentará la primera etiqueta procesada.



Estructura de un documento HTML (I)• Un documento HTML es un fichero plano que contiene

etiquetas y cuya extensión debe ser .html o .htm.• Aunque no es obligatoria, debe ponerse una primera

línea que indique que el documento es HTML, existiendo tres líneas distintas:– Si se cumple la sintaxis estricta del HTML 4.01. <!DOCTYPE

HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

– Si se cumple la sintaxis transitoria. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

– Si se definen marcos (frames) en la página. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">



Estructura de un documento HTML (II)

Con la sintaxis transitoria, la estructura de un documento HTML es:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML><HEAD>............</HEAD><BODY>............</BODY></HTML>



Estructura de un documento HTML (III)• Toda la información se encuentra entre las

etiquetas <HTML> y </HTML>.• Existen dos partes, el encabezado <HEAD> y el

cuerpo <BODY>.• El encabezado es opcional, y contiene

información sobre las características del documento.

• El cuerpo es obligatorio, excepto en los documentos que define marcos (frames), y es lo que se muestra en el navegador.



Estructura de un documento HTML (IV)• El encabezado, si existe, debe tener una etiqueta <TITLE>, que contiene el texto que se mostrará en la ventana del navegador.

• Además, puede contener etiquetas <META> que indican propiedades del documento como son el conjunto de caracteres que se usa:

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



Estructura de un documento HTML (V)

• El cuerpo se define con la etiqueta pareada <BODY>.

• Sus atributos principales son:

Atributo. Descripción. BACKGROUND Especifica la localización de una imagen que será el fondo del

cliente. BGCOLOR Especifica el color del fondo del cliente. TEXT Especifica el color del texto. LINK Especifica el color de un enlace. VLINK Especifica el color de un enlace visitado. ALINK Especifica el color de un enlace marcado.



Ejemplo de documento HTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Mi primera prueba en HTML</TITLE></HEAD><BODY>Aquí se pone el texto que se desea que tenga el documento...</BODY></HTML>



Párrafos y saltos de línea (I)

• El párrafo es el bloque básico de texto.

• Se indica mediante la etiqueta opcional <P>.– Su opción es ALIGN=(left, right, center) que indica si se alinea a la izquierda, derecha o centrado.

• El salto de línea se indica mediante la etiqueta no pareada <BR>.– Su opción es CLEAR=(left, right, center), que se utiliza para imágenes flotantes.



Párrafos y saltos de línea (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Formato de los párrafos en HTML</TITLE></HEAD><BODY><P>Aquí comienza un párrafo...que termina en la misma línea.<P>Sin embargo este párrafo...<BR>termina en otra línea.<P ALIGN=left>Este párrafo va a la izquierda...<P ALIGN=right>Este a la derecha...<P ALIGN=center><BR><BR>Y este centrado y separado...</BODY></HTML>



Títulos (I)

• Permiten dividir el documento en una jerarquía de secciones en que el tamaño se corresponde con su importancia.

• Se representan con las etiquetas pareadas <Hn>, donde n es un número de 1 a 6, de forma que el tamaño es más grande cuanto menor es n.– Poseen como opción ALIGN=(left, right, center) , que indica si se alinea a la izquierda, derecha o centrado



Títulos (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Títulos en HTML</TITLE></HEAD><BODY><H1>Este es el título 1</H1><H2>Y este el título 2</H2><H3 ALIGN=center>Y este el título 3 centrado</H3><H4>Y este es un título<BR>formado por varias líneas</H4><H4>Y por varios párrafos</H4></BODY></HTML>



Alineación de elementos (I)

• Se utilizan las etiquetas pareadas <CENTER> y <DIV>.– La etiqueta <CENTER> centra todos los elementos

que se encuentren entre su comienzo y fin.– La etiqueta <DIV> especifica la alineación de igual

forma que <CENTER>, solo que permite indicar que alineación se desea mediante ALIGN=(left, right, center).



Alineación de elementos (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Alineación en HTML</TITLE></HEAD><BODY><CENTER><P>Este párrafo aparece centrado.<P>Y este también.</CENTER><DIV ALIGN=right><P>Y este otro párrafo aparece a la derecha...<P>Junto con este.</DIV></BODY></HTML>



Líneas horizontales (I)• Permiten separar diferentes secciones en un

documento.• Se especifican mediante la etiqueta no pareada <HR>.

• Sus principales atributos son:Atributo. Descripción Valor por defecto.

SIZE= Marca el grosor de la línea. 2 WIDTH= Marca la anchura horizontal de la línea. Se

puede expresar en pixels o en porcentaje. El ancho de la pantalla.

ALIGN= Especifica la alineación de la línea, puede ser left, right o center.

Si no se especifica, las líneas están centradas.

NOSHADE Muestra una línea sólida sin apariencia tridimensional.

Línea con apariencia tridimensional.



Líneas horizontales (II)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Líneas horizontales en HTML</TITLE></HEAD><BODY><P>Entre este párrafo</P><HR SIZE=5 WIDTH="80%"><HR WIDTH="50%" ALIGN=left NOSHADE><P>Y este hemos introducido varias líneas horizontales</P></BODY></HTML>



Sangrado de bloques (I)

• Permite definir una sección del documento a la que se le aplica un “sangrado” mayor.

• Se realiza con la etiqueta pareada <BLOCKQUOTE>.

• Inserta automáticamente un salto de párrafo antes y después del sangrado.



Sangrado de bloques (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Sangrado de bloques en HTML</TITLE></HEAD><BODY><P>Este párrafo no esta sangrado</P><BLOCKQUOTE><P>Pero este párrafo si</P><BLOCKQUOTE><HR><P>Y este y la línea anterior más aún</P></BLOCKQUOTE></BLOCKQUOTE></BODY></HTML>



Texto preformateado (I)

• En general un documento se presenta como decide el cliente web.

• El texto preformateado permite especificar como debe mostrarse un texto, siempre que sea posible.

• Se realiza con la etiqueta pareada <PRE>.– Su único atributo es WIDTH=(40,80,132) que

indica el ancho de la línea a utilizar para mostrar el texto.



Texto preformateado (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Texto preformateado en HTML</TITLE></HEAD><BODY><PRE>Este párrafo es preformateadoy por tanto saldrá exactamenteasí.</PRE><BLOCKQUOTE><PRE WIDTH=40>Y este esta también preformateado y portanto también saldrá así...............</PRE></BLOCKQUOTE></BODY></HTML>



Direcciones (I)

• Permiten especificar datos sobre el autor de un documento, etc., resaltando los datos.

• Se indican con la etiqueta pareada <ADDRESS>.



Direcciones (II)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Direcciones en HTML</TITLE></HEAD><BODY><P>Este texto ha sido escrito por:</P><ADDRESS>Enrique Bonet (<A HREF="mailto:[email protected]">[email protected]</A>)</ADDRESS></BODY></HTML>



Color y tamaño del texto (I)• El color y el tamaño de un texto puede

especificarse mediante la etiqueta pareada <FONT>.

• Puede especificarse el color y/o el tamaño.

• Se realiza mediante los atributos:

A tr ib u to D escr ip c ió n C O L O R E sp ec ifica un co lo r p a ra e l tex to . S IZ E E sp ec ifica e l tam añ o d e la fu en te d e tex to , p u ed e ir de 1 a 7 y p u ed e

esp ec ifica rse co m o v a lo r ab so lu to “1 ” , “5 ” , e tc . o co m o v a lo r re la tiv o “+ 1 ” , “-3 ” .



Color y tamaño del texto (II)

• El color se puede especificar mediante:– El nombre del color: “red”, “green”, “blue”, etc.

– Mediante sus componentes RGB en el formato “#RRGGBB”. Así, un tono de morado sería, por ejemplo “#3C003C” (rojo=azul, verde=0).

• Para especificar el texto se parte de un tamaño base que se indica mediante la etiqueta no pareada <BASEFONT> con atributo SIZE=n, donde n es el tamaño por defecto del texto.



Color y tamaño del texto (III)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Color y tamaño del texto en HTML</TITLE></HEAD><BODY><BASEFONT SIZE=4><P><FONT COLOR="#FF0000">Este texto es rojo.<BR></FONT><FONT COLOR="#00FF00"> Y este es verde.<BR></FONT><FONT COLOR="#0000FF">Y este es azul.</FONT></P><P><FONT SIZE="+2">Sin embargo este texto es del color por defecto pero de mayor tamaño.</FONT></P></BODY></HTML>

Comentarios

• Permiten introducir notas, etc., dentro del HTML, las cuales serán ignoradas por el navegador.

• El bloque de notas se marca mediante los símbolos .



Etiquetas de formato

• Permiten especificar como se presentará el texto.

• Existen dos tipos de etiquetas:– De formato lógico: Clasifican el texto dentro de un

conjunto de tipos predefinidos.– De formato físico: Fijan el estilo a utilizar mediante

etiquetas.



Etiquetas de formato lógico (I)• Cada estilo lógico se muestra con una serie de atributos

predefinidos.• Su anidamiento es posible, aunque carece de sentido por

su propia definición.• Los estilos lógicos existentes son:

Estilo lógico. Descripción <CITE> </CITE> Cita literal de un texto. <CODE> </CODE> Presentación de código fuente. <EM> </EM> Aplica énfasis al texto. <KBD> </KBD> Secuencias de ordenes o comandos que debe introducir el

usuario. <SAMP> </SAMP> Insertar una secuencia de caracteres literales. <XMP> </XMP> Inserta una secuencia de caracteres literales pero ignora

todas las etiquetas HTML de su interior. <STRONG> </STRONG> Aplica énfasis al texto (mayor énfasis que <EM>).. <VAR> </VAR> Define el nombre de una variable.



Etiquetas de formato lógico (II)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Ejemplos de estilos lógicos HTML</TITLE></HEAD><BODY><P><CITE>Este párrafo es CITE</CITE><P><VAR>Este párrafo es VAR</VAR><P><STRONG>Y este párrafo está con mucho énfasis</STRONG></BODY></HTML>



Etiquetas de formato físico (I)• Fijan los atributos del texto de forma explicita.• Su anidamiento tiene sentido, pues podemos desear

combinar varios de esos atributos.• Los principales estilos físicos son:

Estilo físico. Explicación. <B> </B> Muestra el texto en negrita. <I> </I> Muestra el texto en itálica. <TT> </TT> Muestra el texto como una máquina de escribir. <U> </U> Subraya el texto marcado. <SUB> </SUB> Muestra el texto como un subíndice. <SUP> </SUP> Muestra el texto como un superíndice. <BIG> </BIG> Muestra el texto con un tamaño superior al por defecto. <SMALL> </SMALL> Muestra el texto con un tamaño inferior al por defecto. <BLINK> </BLINK> Muestra el texto parpadeante. <S> </S> Muestra el texto con una tachadura.



Etiquetas de formato físico (II)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Ejemplos de estilos físicos HTML</TITLE></HEAD><BODY><P><B><I>Este texto es negrita e itálica</I></B></P><P>Este es el elemento A<SUB>ij</SUB></P><P>Y esto es una potencia: 2<SUP>n</SUP></P></BODY></HTML>



Caracteres especiales (I)• Los documentos HTML usan por defecto el juego de

caracteres ISO-Latin-1.• Los carácteres no incluidos en ese juego por defecto, o

en cualquier otro juego que se especifique en la cabecera, no pueden representarse.

• Para poder representarlos se define la etiqueta “referencia a carácter” que se puede incluir de dos formas:– Por su número: &#nnn, donde nnn es el código decimal del

carácter.

– Por su mnemotécnico.



Caracteres especiales (II)• Los principales mnemotécnicos son:

Carácter Código Carácter Código Carácter Código Carácter Código < < > > & & # # “ " á á é é í í ó ó ú ú Á Á ñ ñ Ñ Ñ ® ® @ © Espacio

no divisible.

El carácter sirve para insertar un espacio pero que no pueda dividirse por ese punto el texto escrito.



Listas (I)• Las listas son conjuntos de párrafos a los que se les

aplica un formato de presentación común.• Existen cuatro tipos de listas:

– Listas desordenadas.– Listas ordenadas.– Menús.– Listas de elementos cortos.

• Los elementos que forman la lista se representan con la etiqueta opcional <LI>, que tiene como atributos:– VALUE= que altera el número de índice en una lista ordenada.– TYPE=(A, a, I, i, 1, circle, disc, square) que altera la marca del párrafo según la lista sea desordenada, etc.



Listas (II)• Las listas desordenadas se representan mediante

la etiqueta pareada <UL>.– Su único atributo es TYPE=(circle, disc, square) que indica el tipo de marca que indica cada elemento.

• Las listas ordenadas se representan mediante la etiqueta pareada <OL>. Sus atributos son:– START= que indica el número de orden del primer

elemento de la lista.– TYPE=(A, a, I, i, 1) que indica el tipo de

numeración a emplear.



Listas (III)• Los menús se representan mediante la etiqueta

pareada <MENU>.• Son equivalentes a las listas desordenadas solo

que se muestran de forma más compacta.• Las listas de elementos cortos se representan con

la etiqueta pareada <DIR>.• Permiten al cliente mostrar en paralelo los

elementos de la lista si es posible.• Estas dos opciones de listas deben ser sustituidas

siempre por listas desordenadas.



Listas (IV)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Listas en HTML</TITLE></HEAD><BODY><P><EM>Elige una opción:</EM></P><OL START=1 TYPE="A"><LI>Comprar un producto</LI><LI>Ver el estado de una compra</LI><LI><UL TYPE=circle><LI>De este mes</LI><LI>De otros meses</LI></UL></LI><LI VALUE=10>Salir</LI></OL></BODY></HTML>



Glosario de términos (I)

• Son listas especiales que permiten incluir un elemento junto con su definición.

• Se definen con la etiqueta pareada <DL>.

• Los elementos se definen con la etiqueta opcional <DT>.

• Las definiciones del elemento, que puede ocupar varias líneas, se define con la etiqueta opcional <DD>.



Glosario de términos (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Glosarios en HTML</TITLE></HEAD><BODY><DL><DT>Termino 1</DT><DD>Definición termino 1</DD><DT>Termino 2</DT><DD>Definición termino 2</DD></DL></BODY></HTML>



Enlaces entre páginas (I)• La posibilidad de enlazar diferentes páginas es la

principal aportación de la web.

• Esto se realiza mediante las URLs (Universal Resource Locator), que asigna una dirección a cualquier recurso disponible en Internet.

• Los enlaces pueden ser de dos tipos:– De destino: Indican puntos de un documento a los

que se puede hacer referencia.

– De origen. Elementos que al ser seleccionados activarán una URL o un enlace de destino.



Enlaces entre páginas (II)

• Los enlaces se indican con la etiqueta pareada <A>, que puede tener dos atributos incompatibles entre si:– NAME=, que especifica un enlace de destino. El enlace de

destino debe ser un nombre único que identificará este punto del documento.

– HREF=, que especifica un enlace de origen. El enlace de origen es una URL a la que se referencia desde este punto.

• Si el enlace es de origen puede tener un atributo más, TARGET=, que indica el nombre del marco (frame) en el que cargara el enlace.



Enlaces entre páginas (III)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Enlaces en HTML</TITLE></HEAD><BODY><P><A NAME="Capítulo1"><B>Capítulo 1</B></A></P><P>...<BR>...<BR>...<BR>...<BR>...<BR>...</P><A HREF="http://www.uv.es">Web de la UV</A><BR><BR><A HREF="#Capítulo1">Capítulo 1</A></BODY></HTML>



Inserción de imágenes (I)• HTML permite insertar imágenes mediante la

etiqueta no pareada <IMG>. Sus atributos son:Atributo Descripción

SRC=”...” Contiene la URL de la imagen a incluir. Este atributo es obligatorio. ALT=”...” Asigna un texto descriptivo relacionado con la imagen. ALIGN= Controla la alineación de la imagen con respecto al párrafo en que esta

insertada. Los valores que puede tomar son: top, middle, bottom, texttop, baseline, absmiddle y absbottom.

ALIGN= Control de la alineación de la imagen, puede tomar los valores left y right y permite que un párrafo fluya sobre el borde de una imagen, bloqueando ésta a la izquierda o derecha del margen. No puede utilizarse junto con la anterior.

HEIGHT= Informa al cliente web de la altura de la imagen a insertar. WIDTH= Informa al cliente web de la anchura de la imagen a insertar. ISMAP Informa al cliente web de que esta imagen es un mapa activo. USEMAP Informa al cliente web del archivo con el mapa activo de la imagen. BORDER= Fija la anchura del borde que rodeará a la imagen. Un valor de 0

desactiva el borde. HSPACE= Fija la anchura horizontal de los márgenes de la imagen (en pixels). VSPACE= Fija la anchura vertical de los márgenes de la imagen (en pixels).



Inserción de imágenes (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Imágenes en HTML</TITLE></HEAD><BODY><P>Vamos a insertar una imagen a continuación</P><P><IMG SRC="imagen.gif" ALT="logo" ALIGN=left>Todo el texto de este párrafose colocara a la derecha de la imagen al estar esta alineada a la izquierda<BR><BR><BR><BR><BR>Pero al sobrepasar la imagen continuara de forma normal</P></BODY></HTML>



Tablas (I)• Las tablas se definen con la etiqueta pareada <TABLE>.• La etiqueta pareada <CAPTION> permite especificar

un título de la tabla.

• Las filas se representan mediante la etiqueta pareada <TR>.

• Las celdas (columnas) dentro de cada fila se representan mediante la etiqueta pareada <TD>.

• Existe un tipo especial de celda, que se representa mediante la etiqueta pareada <TH> y que corresponde al encabezado.



Tablas (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Tablas en HTML</TITLE></HEAD><BODY><TABLE><CAPTION>Gastos del mes</CAPTION><TR><TH>Concepto</TH><TH>Importe</TH></TR><TR><TD>Alimentación</TD><TD>20.000</TD></TR><TR><TD>Vestido</TD><TD>50.000</TD></TR></TABLE></BODY></HTML>



Tablas (III)Etiqueta Atributos Descripción

BORDER= Fija el ancho del borde exterior de la tabla (en pixels).

CELLPADDING= Fija la distancia (en pixels) entre el borde de la celda y su contenido.

CELLSPACING= Fija la anchura (en pixels) de la líneas de división de la tabla.

WIDTH= Controla la anchura horizontal de la tabla. Se puede especificar en pixels o en porcentaje.

<TABLE>

ALIGN= Control de la alineación de la tabla, puede tomar los valores left y right y permite que un párrafo fluya sobre el borde de una tabla, bloqueando ésta a la izquierda o derecha del margen

<CAPTION> ALIGN= Fija la posición del título con respecto a la tabla. Puede ser top o bottom.

ALIGN= Especifica la alineación horizontal del texto en la fila, puede ser left, right o center.

<TR>

VALING= Especifica la alineación vertical del texto en la fila, pued e ser top, bottom, middle o baseline.

ALIGN= Especifica la alineación horizontal del texto en la celda, puede ser left, right o center.

VALIGN= Especifica la alineación vertical del texto en la celda, puede ser top, bottom, middle o baseline.

COL SPAN= Indica el número de columnas que ocupara esta celda.

ROWSPAN= Indica el número de filas que ocupara esta celda. NOWRAP= Obliga al cliente web a no romper las líneas de

texto que contenga la celda.

<TD>

WIDTH= Determina el ancho de la celda. Se puede especificar como un ancho en pixels o en porcentaje.

<TH> Igual que <TD> . Igual que los atributos de <TD> .



Tablas (IV)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Tablas en HTML</TITLE></HEAD><BODY><TABLE BORDER=2 BGCOLOR="green"><CAPTION ALIGN=bottom>Gastos del mes</CAPTION><TR ALIGN=center BGCOLOR="yellow"><TH>Concepto</TH><TH>Importe</TH><TH>Fecha</TH></TR><TR ALIGN=right><TD ALIGN=left>Alimentación</TD><TD>20.000</TD><TD>1/1/1990</TD></TR><TR ALIGN=right><TD ALIGN=left>Vestido</TD><TD>50.000</TD><TD>10/1/1990</TD></TR></TABLE></BODY></HTML>



Tablas (V)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Tablas en HTML</TITLE></HEAD><BODY><TABLE BORDER=2 BGCOLOR="blue"><CAPTION ALIGN=top>Calendario</CAPTION><TR ALIGN=center BGCOLOR="yellow"><TH>Octubre</TH></TR><TR ALIGN=right><TD></TD><TD><TABLE BORDER=1><TR ALIGN=center BGCOLOR="green"><TH>L</TH><TH>M</TH><TH>X</TH><TH>J</TH><TH>V</TH><TH>S</TH><TH>D</TH></TR><TR ALIGN=center BGCOLOR="pink"><TD></TD><TD></TD><TD></TD><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR><TR ALIGN=center BGCOLOR="pink"><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD><TD>9</TD><TD>10</TD><TD>11</TD></TR><TR ALIGN=center BGCOLOR="pink"><TD>12</TD><TD>13</TD><TD>14</TD><TD>15</TD><TD>16</TD><TD>17</TD><TD>18</TD></TR><TR ALIGN=center BGCOLOR="pink"><TD>19</TD><TD>20</TD><TD>21</TD><TD>22</TD><TD>23</TD><TD>24</TD><TD>25</TD></TR><TR ALIGN=center BGCOLOR="pink"><TD>26</TD><TD>27</TD><TD>28</TD><TD>29</TD><TD>30</TD></TR></TABLE></TD></TR><TR ALIGN=center BGCOLOR="yellow"><TH>Noviembre</TH></TR></TABLE></BODY></HTML>



Tablas (VI)



Marcos (I)• Permiten dividir una ventana de un cliente web en

varias ventanas.• Cada ventana puede mostrar una URL distinta.• La estructura general de una página web que define

marcos es:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd"><HTML><HEAD>....................</HEAD><FRAMESET>....................</FRAMESET></HTML>



Marcos (II)• Los marcos se definen mediante la etiqueta

pareada <FRAMESET>.

• Los atributos de <FRAMESET> son:– ROWS="lista" especifica las filas en que se

divide la ventana y el tamaño de cada fila.– COLS="lista" especifica las columnas en que se

divide la ventana y el tamaño de cada columna.– BORDER= especifica el tamaño del borde que indica

los distintos marcos. Puede tomar el valor cero (sin borde).



Marcos (III)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Marcos en HTML</TITLE></HEAD><FRAMESET COLS="30%,70%"><FRAME SRC="imagen.gif"><FRAME SRC="imagen.gif"></FRAMESET></HTML>



Marcos (IV)• La etiqueta sin parear <FRAME> permite especificar el

contenido de cada marco. Sus atributos son:Atributo Explicación

SRC= Nombre del documento que se quiere colocar dentro del marco.

NAME= Asigna un nombre a un marco de forma que pueda ser el destino de enlaces situados en otros marcos.

MARGINWIDTH= Especifica el margen lateral (en pixels). MARGINHEIGHT Especifica el margen superior e inferior (en pixels). SCROLLING=(yes, no, auto) Si un documento es más largo que el marco aparecen

unas barras de desplazamiento. Este atributo permite activar, desactivar o automatizar su aparición.

NORESIZE Evita que el tamaño de los marcos sea alterado.

• Existe una etiqueta pareada <NOFRAMES> que permite definir el contenido a mostrar si un navegador no permite usar marcos (frames).



Marcos (V)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Marcos en HTML</TITLE></HEAD><FRAMESET COLS="50%,50%"><FRAMESET ROWS="50%,50%"><FRAME SRC="imagen.gif"><FRAME SRC="imagen.gif"></FRAMESET><FRAMESET ROWS="33%,33%,34%"><FRAME SRC="imagen.gif"><FRAME SRC="imagen.gif"><FRAME SRC="imagen.gif"></FRAMESET><NOFRAMES>Su cliente no permite marcos</NOFRAMES></FRAMESET></HTML>



Marcos (VI)• Es posible hacer que el destino de un enlace sea

un marco distinto del actual.

• Para ello se utilizan las propiedades NAME de la etiqueta <FRAME> y TARGET de la etiqueta <A>.

• La propiedad TARGET="nombre" de la etiqueta <A> debe tener el mismo "nombre" que el asignado a la propiedad NAME="nombre" de la etiqueta <FRAME>.

Marcos (VII)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Marcos en HTML</TITLE></HEAD><FRAMESET COLS="30%,70%"><FRAME SRC="menu.html"><FRAME SRC="portada.html" NAME="principal"></FRAMESET></HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Marcos en HTML</TITLE></HEAD><BODY><A HREF="imagen.html" TARGET="principal">Cuando pulses aquí cambiara la otra ventana</A></BODY></HTML>

Marcos (VIII)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Marcos en HTML</TITLE></HEAD><BODY><P>Este es el fichero de la portada</P><P>Formado por algunos párrafos</P></BODY></HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Marcos en HTML</TITLE></HEAD><BODY><P>Y este es el fichero de la imagen <IMG SRC="imagen.gif"></P></BODY></HTML>



Marcos (IX)



Formularios (I)• Los formularios permiten enviar datos del cliente

al servidor.

• Se especifican mediante la etiqueta pareada <FORM>. Sus atributos son:

Atributo Descripción ACTION Especifica la URL del programa CGI que debe procesar los datos que

envía el formulario. Si se desea enviar correo electrónico se puede indicar con mailto:dirección de correo.

METHOD Especifica el método que se usa para enviar la información de los distintos elementos del formulario al programa CGI. Los métodos pueden ser GET (el programa CGI recibe los datos en la variable de entorno QUERY_STRING) y POST (el programa CGI recibe los datos por la entrada estándar).

NAME Permite especificar un nombre al formulario, es optativo.



Formularios (II)

• Existen tres tipos distintos de campos de entrada en el formulario:– Mediante la etiqueta no pareada <INPUT>.– Mediante la etiqueta pareada <SELECT>.– Mediante la etiqueta pareada <TEXTAREA>.



Formularios (III)• Los atributos de la etiqueta <INPUT> son:

Atributos Descripción TYPE Selecciona el tipo de campo de entrada. Es obligatorio NAME Define el nombre del identificador cuyo contenido será enviado. Es

obligatorio. VALUE Inicializa el valor del campo. SIZE Especifica el tamaño visible del texto. MAXLENGTH Especifica el número máximo de caracteres en un campo de entrada

de tipo texto. CHECKED Inicializa campos de entrada de tipo checkbox o radio buttons a su

estado. SRC Especifica el URL para la imagen a usar en el caso de un botón

gráfico de envío de la información. ALIGN Especifica el alineamiento, puede ser top, middle, bottom (por

defecto), left o right.



Formularios (IV)• El atributo TYPE de la etiqueta <INPUT> define el tipo

de campo de entrada. Sus valores son:Valor del atributo Descripción

TEXT Valor por defecto. Muestra una línea de texto. PASSWORD Igual que TEXT excepto que los caracteres introducidos son

mostrados como *. CHECKBOX Casilla de verificación con dos estados (marcada o no). Es

obligatorio el uso de VALUE para especificar el nombre de la variable y el valor que toma ésta.

RADIO Elementos que operan conjuntamente, solo puede estar activado uno de ellos. Es obligatorio el uso de VALUE. Se puede indicar que un valor es por defecto utilizando el atributo CHECKED de la etiqueta INPUT.

SUBMIT Define un botón que envía los datos al programa del CGI. Debe existir siempre uno en cualquier formulario.

RESET Define un botón que inicializa los valores del formulario al valor por defecto.

FILE Define un método para poder escoger un fichero cuyo contenido será enviado como los datos proporcionados por el formulario.

HIDDEN No son visibles y proporcionan un método de enviar información sobre el estado, etc. al programa del CGI.

IMAGE Permite definir un botón gráfico.



Formularios (V)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Formularios en HTML</TITLE></HEAD><BODY><FORM METHOD="POST" ACTION="http://pc.uv.es/cgi-bin/prueba.exe">Nombre: <INPUT TYPE="text" NAME="nombre" SIZE="10" MAXLENGTH="25"><BR>Primer apellido: <INPUT TYPE="text" NAME="apellido1" SIZE="10" MAXLENGTH="25"><BR>Segundo apellido: <INPUT TYPE="text" NAME="apellido2" SIZE="10" MAXLENGTH="25"><BR><BR>Curso: <BR>Primero<INPUT TYPE="radio" NAME="curso" VALUE="Primero" CHECKED>Segundo<INPUT TYPE="radio" NAME="curso" VALUE="Segundo">Tercero<INPUT TYPE="radio" NAME="curso" VALUE="Tercero">Cuarto<INPUT TYPE="radio" NAME="curso" VALUE="Cuarto">Quinto<INPUT TYPE="radio" NAME="curso" VALUE="Quinto"><BR><BR><INPUT TYPE="submit" VALUE="Enviar"><INPUT TYPE="reset" VALUE="Borrar"></FORM></BODY></HTML>



Formularios (VI)• Los atributos de la etiqueta <SELECT> son:

Atributo Descripción NAME Define el nombre del identificador cuyo contenido será enviado. Es

obligatorio. SIZE Define el número de elementos del menú desplegable que serán

visualizados a la vez. MULTIPLE Permite que se seleccionen más de un elemento del menú.

• Los elementos del menú se definen con la etiqueta pareada <OPTION> cuyos atributos son:

Atributo Descripción VALUE Valor de la opción que se enviará si es seleccionado. SELECTED Indica que este es el valor seleccionado por defecto. Pueden existir varios

si la opción MÚLTIPLE ha sido seleccionada en el menú.



Formularios (VII)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Formularios en HTML</TITLE></HEAD><BODY><FORM METHOD="POST" ACTION="http://pc.uv.es/cgi-bin/prueba.exe"><P>Procesador:<SELECT NAME="procesador" SIZE="1"><OPTION VALUE="486" SELECTED>486 o inferior</OPTION><OPTION VALUE="Pentium">Pentium</OPTION><OPTION VALUE="Pentium II">Pentium II</OPTION><OPTION VALUE="Pentium III">Pentium III</OPTION></SELECT></P><P>Sistema operativo:<SELECT NAME="sistema" SIZE="5" MULTIPLE><OPTION VALUE="dos">MS-DOS</OPTION><OPTION VALUE="Windows9x">Windows 95/98</OPTION><OPTION VALUE="WindowsNT">Windows NT</OPTION><OPTION VALUE="Windows2000">Windows 2000</OPTION><OPTION VALUE="WindowsXP" SELECTED >Windows XP</OPTION><OPTION VALUE="Linux" SELECTED>Linux</OPTION></SELECT></P><CENTER><INPUT TYPE="submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Borrar"></CENTER></FORM></BODY></HTML>



Formularios (VIII)



Formularios (IX)

• Los atributos de la etiqueta <TEXTAREA> son:

Atributo Descripción NAME Define el nombre del identificador cuyo contenido será enviado. Es

obligatorio. ROWS Define el número de filas del área de texto. COLS Define el número de columnas del área de texto.



Formularios (X)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Formularios en HTML</TITLE></HEAD><BODY><H1 ALIGN="center">Comentarios</H1><FORM METHOD="POST" ACTION="http://pc.uv.es/cgi-bin/prueba.exe"><P>A la asignatura:<TEXTAREA NAME="Asignatura" ROWS="5" COLS="40"></TEXTAREA></P><P>Al profesor:<TEXTAREA NAME="Profesor" ROWS="3" COLS="50">Enrique Bonet</TEXTAREA></P><CENTER><INPUT TYPE="submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Borrar"></CENTER></FORM></BODY></HTML>



Formularios (XI)• Los formularios son procesados por un programa

en el servidor, generalmente un CGI, cuya URL se ha especificado en el campo ACTION de la definición del formulario.– Si un CGI devuelve un documento generado por él,

el documento deberá ir precedido de:

Content-type: tipo/subtipo\n\n– Si un CGI devuelve una referencia a un documento

existente, deberá ir precedido de:

Location: URL\n\n



Formularios (XII)#include <stdio.h> #include <stdlib.h> #include <string.h> #define TAM 1000 void Error(char *msg) {

printf("Content-type: text/plain\n\n"); printf("Error: %s\n",msg); exit(EXIT_SUCCESS);

} int main(void) {

char buffer[TAM],*p; int longitud;

if ((p=getenv("REQUEST_METHOD"))==NULL)

Error("REQUEST METHOD no encontrado"); if (strncmp(p,"POST",strlen("POST"))==0) {

if ((p=getenv("CONTENT_LENGTH"))==NULL) Error("CONTENT_LENGTH no encontrado");

if ((longitud=atoi(p))>=(TAM-1)) Error("Longitud excesiva");

if (fgets(buffer,longitud+1,stdin)==NULL) Error("Leyendo los datos");

buffer[longitud]='\0'; } else {

if ((p=getenv("QUERY_STRING"))==NULL) Error("QUERY_STRING no encontrado");

if ((longitud=strlen(p))>=(TAM-1)) Error("Longitud excesiva");

strncpy(buffer,p,TAM); } /* Creamos ahora el mensaje de salida */ printf("Content-type: text/html\n\n"); printf("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"

\"http://www.w3.org/TR/html4/loose.dtd\">\n"); printf("<HTML>\n"); printf("<HEAD>\n"); printf("<META http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-

1\">"); printf("<TITLE>Salida del CGI</TITLE>\n”); printf(“</HEAD>\n"); printf("<BODY>Leidos %d carácteres<BR>\n",longitud); printf("%s</BODY>\n",buffer); printf("</HTML>\n"); return 0;

}



Formularios (XIII)



Imágenes sensibles (I)• Permiten definir zonas activas en imágenes que

actúan como enlaces a URLs.• Existen dos tipos:

– Procesadas en el servidor. La localización del mapa de la imagen se especifica mediante el atributo ISMAP de la etiqueta <IMG>.

– Procesadas en el cliente. La localización del mapa de la imagen se especifica mediante el atributo USEMAP de la etiqueta <IMG>.

• Es preferible utilizar las procesadas en el cliente pues liberan de “trabajo” al servidor.



Imágenes sensibles (II)

• El mapa de la imagen se especifica mediante la etiqueta pareada <MAP>, cuyo único atributo NAME especifica el nombre del mapa.

• Cada uno de los elementos del mapa se indica mediante la etiqueta sin parear <AREA>, cuyos atributos son:

Atributo Descripción HREF Especifica la URL del documento a cargar si se pulsa sobre esta zona. ALT Asigna un texto descriptivo relacionado con la zona. SHAPE Especifica el tipo de objeto que define la zona, puede ser “circle”, “rect” o

“poly” COORDS Especifica las coordenadas de la zona, su formato depende del valor de

SHAPE.



Imágenes sensibles (III)• Los valores de las coordenadas según los valores

que tome el atributo "SHAPE" se especifican como:

SHAPE Especificación de COORDS Circle x,y,radio (x,y) son el centro del circulo. Rects x1,y1,x2,y2 (x1,y1) son la coordenada superior izquierda y (x2,y2) la

coordenada inferior derecha del rectángulo. Poly x1,y1,x2,y2,...,xn,yn, (xi,yi) son las coordenadas de los vértices del polígono,

(xn,yn) deben ser igual a (x1,y1).

• Si dos zonas se solapan, solo se evalúa la primera que se encuentra en el mapa.

Imágenes sensibles (IV)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Imagenes sensibles en HTML</TITLE></HEAD><BODY><H1 ALIGN=center>!!!Has pulsado sobre el cuadrado!!!</H1></BODY></HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Imagenes sensibles en HTML</TITLE></HEAD><BODY><H1 ALIGN=center>!!!Has pulsado sobre el circulo!!!</H1></BODY></HTML>

Imágenes sensibles (V)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Imagenes sensibles en HTML</TITLE></HEAD><BODY><MAP NAME="mapa_sensible"><AREA HREF="cuadrado.html" ALT="cuadrado" SHAPE="rect" COORDS="10,10,70,70"><AREA HREF="circulo.html" ALT="circulo" SHAPE="circle" COORDS="100,100,30"></MAP><CENTER><IMG SRC="imagen.gif" ALT="mapa sensible" USEMAP="#mapa_sensible"></CENTER></BODY></HTML>



Javascript (I)

• Se inserta dentro de los documentos HTML mediante:– La etiqueta pareada <SCRIPT>, indicando el tipo de

script mediante TYPE="text/javascript".– Insertando, dentro de una etiqueta HTML, la acción a

realizar si sucede un evento.



Javascript (II)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Mi página de Javascript</TITLE></HEAD><BODY><CENTER><SCRIPT TYPE="text/javascript">document.write("Esta es mi primera prueba en Javascript");</SCRIPT></CENTER></BODY></HTML>



Javascript (III)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Mi página de Javascript</TITLE></HEAD><BODY><P onmouseover="this.style.color='#FF0000'" onmouseout="this.style.color='#000000'">Cuando el ratón este sobre este párrafo cambiara de color.</P><P>Pero no cuando este sobre este otro párrafo.</P></BODY></HTML>



Tipos de datos (I)

• Son similares a los existentes en C/C++, Java, etc.

• Las variables se declaran precedidas de la palabra var.

• No es necesario declarar el tipo de dato de las variables, pues estas “toman” el tipo de dato cuando se les asigna por primera vez un valor.



Tipos de datos (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Tipos de datos, operadores y estructuras de control</TITLE></HEAD><BODY><P><SCRIPT TYPE="text/javascript">var a,b; a=3;b="quique"; if (b!="quique")document.write("<FONT COLOR='#FF0000'>Hemos escrito la palabra "+b+"<\/FONT>");else{document.write("<FONT COLOR='#0000FF'>");var i; for(i=0;i<a;i++)document.write(b+"<BR>"); document.write("<\/FONT>");}</SCRIPT></P></BODY></HTML>



Tipos de datos (III)

Si la variable b tuviera, por ejemplo, el valor “ana”, la salida sería:

Las etiquetas HTML que tienen el símbolo /, debe precederse dicho símbolo de \.



Funciones en Javascript (I)• Se declaran como:

function nombre([argumentos]){código de la función

}

• No es necesario indicar el tipo de dato que devuelve la función.



Funciones en Javascript (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Funciones en Javascript</TITLE><SCRIPT TYPE="text/javascript">function Prueba(a){if (a%2==0)return "par";elsereturn "impar";}</SCRIPT></HEAD><BODY><P><SCRIPT TYPE="text/javascript">var a=Prueba(3); document.write("El número pasado es: "+a);</SCRIPT></P></BODY></HTML>



Jerarquía de objetos (I)

applet anchor area form

window

history location document

option

hidden password

radio button

checkbox

fileUpload

reset

select

submit

plugin link

frame

navigator

text

textarea

image



Jerarquía de objetos (II)Objeto de Javascript Etiqueta HTML

window frame <FRAME> document <BODY> form <FORM> button <INPUT TYPE="button"> checkbox <INPUT TYPE="checkbox"> hidden <INPUT TYPE="hidden"> fileUpload <INPUT TYPE="file"> password <INPUT TYPE="password"> radio <INPUT TYPE="radio"> reset <INPUT TYPE="reset"> select <SELECT> submit <INPUT TYPE="submit"> text <INPUT TYPE="text"> textarea <TEXTAREA> Link <A HREF=""> Anchor <A NAME=""> Applet <APPLET> Image <IMG> Plugin <EMBED> Area <MAP> History location navigator



Jerarquía de objetos (III)

• El acceso a los elementos se realiza mediante:– Su nombre: document.mi_formulario.mi_texto.

– Un índice que indica su posición dentro de un vector en el objeto que lo incluye: document.forms[0].elements[1].

• En ambos casos hemos supuesto que solo existe un objeto window, por lo que no es necesario especificarlo.



El objeto window (I)

• Es el más alto de la jerarquía, debiendo existir como mínimo un objeto window.

• Sus principales propiedades y métodos son:– frames: Vector con los marcos definidos.– length: Número de marcos existentes.– parent: Objeto window que define los marcos.– top: window de nivel más superior.– alert(): Muestra una ventana con el texto que se

indique.



El objeto window (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>El objeto window</TITLE></HEAD><BODY><P>El número de frames definidos en esta ventana es de: <SCRIPT TYPE="text/javascript">document.write(window.length);</SCRIPT></P></BODY></HTML>



El objeto frame (I)

• El objeto frame corresponde a cada marco en que puede dividirse una ventana (objeto window).

• Sus principales propiedades son:– frames: Vector con los marcos definidos.– name: Nombre del marco.– parent: Objeto window que define los marcos.– top: window de nivel más superior.



El objeto frame (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>El objeto frame</TITLE><SCRIPT TYPE="text/javascript"> function Escribir(){var i; top.MarcoSuperior.document.write("<CENTER>");top.MarcoSuperior.document.write("<H1>Algunos frames...<\/H1>");top.MarcoSuperior.document.write("<\/CENTER>"); for(i=0;i<top.length;i++){top.frames[i].document.write("<CENTER>");top.frames[i].document.write(top.frames[i].name);top.frames[i].document.write("<\/CENTER>");} return true;}</SCRIPT></HEAD><FRAMESET ROWS="50%,*" onload="javascript:Escribir();"><FRAME SRC="" NAME="MarcoSuperior"><FRAMESET COLS="50%,*"><FRAME SRC="" NAME="MarcoInferiorIzquierdo"><FRAME SRC="" NAME="MarcoInferiorDerecho"></FRAMESET></FRAMESET></HTML>



El objeto document

• Contiene el documento que se muestra en el navegador.

• Todas las acciones de un window suceden en su objeto document asociado.

• Sus principales propiedades y métodos son:– forms: Vector con los formularios (objetos form)

del documento.– write(): Escribe texto y HTML en el documento

actual.



El objeto form• El objeto form contiene todos los objetos

existentes en un formulario.

• Sus principales propiedades y métodos son:– action: Cadena con la URL donde se enviara la

información del formulario.– elements: Vector con los objetos del formulario.– target: Cadena con la ventana donde se enviaran

las respuestas al formulario.– reset(): Inicializa el formulario.– submit(): Envía el formulario.



Los objetos text, textarea y password (I)

• Permiten manejar campos de tipo texto en los formularios.

• Sus principales propiedades son:– defaultValue: Valor por defecto del objeto.– name: Nombre del objeto.– value: Valor actual del objeto.



Los objetos text, textarea y password (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Los objetos text, textarea y password</TITLE><SCRIPT TYPE="text/javascript"> function CambiarTexto(){document.formulario.texto.value = document.formulario.clave.value; return true;}</SCRIPT></HEAD><BODY><CENTER><P>Escribe la clave en la primera caja y pulsa el botón...</P><FORM NAME="formulario" ACTION=""><INPUT TYPE="password" NAME="clave" VALUE="" SIZE=20><INPUT TYPE="text" NAME="texto" VALUE="" SIZE=20><BR><INPUT TYPE="button" VALUE="Púlsame" onclick="Javascript:CambiarTexto();"></FORM></CENTER></BODY></HTML>



Los objetos button (I)

• Existen tres tipos de objetos button:– reset, que es un botón que inicializa el formulario.– submit, que es un botón que envía el formulario.– button, que es un botón sin acción especificada.

• Sus principales propiedades y métodos son:– name: Nombre del objeto.– value: Valor actual del objeto.– click(): Simula la acción de pulsar el botón.



Los objetos button (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Los objetos button</TITLE><SCRIPT TYPE="text/javascript"> function CambiarTexto(){document.formulario.texto2.value = document.formulario.texto1.value; return true;}*** AQUÍ VA LA FUNCIÓN QUE VEREMOS EN LA SIGUIENTE PÁGINA ***</SCRIPT></HEAD><BODY><CENTER><FORM NAME="formulario" ACTION="Javascript:Mensaje();"><INPUT TYPE="text" NAME="texto1" VALUE="" SIZE=20><INPUT TYPE="button" NAME="cambiar" VALUE="<-->" onclick="Javascript:CambiarTexto();"><INPUT TYPE="text" NAME="texto2" VALUE="" SIZE=20><BR><INPUT TYPE="submit" VALUE="Enviar"><INPUT TYPE="reset" VALUE="Borrar"></FORM></CENTER></BODY></HTML>



Los objetos button (III)function Mensaje(){var vocal,texto,i; vocal=0;texto="";texto=document.formulario.texto2.value; for(i=0;i<texto.length;i++)switch(texto.charAt(i)){case 'a':case 'A':case 'e':case 'E':case 'i':case 'I':case 'o':case 'O':case 'u':case 'U':vocal++;break;} texto='<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/html4\/loose.dtd">\n';texto+="<HTML>\n<HEAD>\n";texto+='<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n';texto+="<TITLE>Respuesta al formulario<\/TITLE>\n<\/HEAD>\n";texto+="<BODY><P>El texto tenía " +vocal+ " vocales<\/P><\/BODY><\/HTML>"; return texto;}



Los objetos button (IV)



El objeto checkbox (I)• El objeto permite seleccionar una opción dentro

de un formulario.

• Sus principales propiedades y métodos son:– checked: Valor booleano que indica si el objeto

está o no seleccionado.– defaultChecked: Valor booleano que indica si el

objeto debe estar seleccionado por defecto.– name: Nombre del objeto.– value: Valor del objeto.– click(): Simula la acción de pulsar el checkbox.



El objeto checkbox (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Los objetos checkbox</TITLE><SCRIPT TYPE="text/javascript"> function Mensaje(){var texto,i; texto="Las opciones seleccionadas son: \n";for(i=0;i<4;i++)if (document.formulario.elements[i].checked)texto+="\t * "+document.formulario.elements[i].value+"\n"; alert(texto);} </SCRIPT></HEAD><BODY><CENTER><FORM NAME="formulario" ACTION="Javascript:Mensaje();"><INPUT TYPE="checkbox" NAME="opcion1" VALUE="Uno" CHECKED>Opción 1<BR><INPUT TYPE="checkbox" NAME="opcion2" VALUE="Dos">Opción 2<BR><INPUT TYPE="checkbox" NAME="opcion3" VALUE="Tres" CHECKED>Opción 3<BR><INPUT TYPE="checkbox" NAME="opcion4" VALUE="Cuatro">Opción 4<BR><INPUT TYPE="submit" VALUE="Enviar"><INPUT TYPE="reset" VALUE="Borrar"></FORM></CENTER></BODY></HTML>



El objeto radio (I)• Permite seleccionar una opción de un conjunto

de opciones posibles.• Sus principales propiedades y métodos son:

– checked: Valor booleano que indica si el objeto está o no seleccionado.

– defaultChecked: Valor booleano que indica si el objeto debe estar seleccionado por defecto.

– length: Número de opciones del objeto.– name: Nombre del objeto.– value: Valor del objeto.– click(): Simula la acción de pulsar el radiobutton.



El objeto radio (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Los objetos radio</TITLE><SCRIPT TYPE="text/javascript">*** AQUÍ VA LA FUNCIÓN QUE VEREMOS EN LA SIGUIENTE PÁGINA ***</SCRIPT></HEAD><BODY><CENTER><FORM NAME="formulario" ACTION="Javascript:Mensaje();"><TABLE BORDER="1"><CAPTION ALIGN=top>Elección del ordenador</CAPTION><TR><TH>Procesador></TH><TH>Sistema operativo</TH></TR><TR ALIGN=left><TD><INPUT TYPE="radio" NAME="procesador" VALUE="P-I">Pentium I<BR><INPUT TYPE="radio" NAME="procesador" VALUE="P-II">Pentium II<BR><INPUT TYPE="radio" NAME="procesador" VALUE="P-III">Pentium III<BR><INPUT TYPE="radio" NAME="procesador" VALUE="P-IV" CHECKED>Pentium IV</TD><TD><INPUT TYPE="radio" NAME="sistema" VALUE="W-9x">Windows 9x<BR><INPUT TYPE="radio" NAME="sistema" VALUE="W-2000">Windows 2000<BR><INPUT TYPE="radio" NAME="sistema" VALUE="W-XP" CHECKED>Windows XP<BR><INPUT TYPE="radio" NAME="sistema" VALUE="Linux">Linux<BR></TD></TR></TABLE><INPUT TYPE="submit" VALUE="Enviar"><INPUT TYPE="reset" VALUE="Borrar"></FORM></CENTER></BODY></HTML>



El objeto radio (III)function Mensaje(){var texto,i; texto="Seleccionado procesador ";for(i=0;i<document.formulario.procesador.length;i++)if (document.formulario.procesador[i].checked)texto+=document.formulario.procesador[i].value; texto+="\nY sistema operativo ";for(i=0;i<document.formulario.sistema.length;i++)if (document.formulario.sistema[i].checked)texto+=document.formulario.sistema[i].value; alert(texto);}



El objeto select (I)• Permiten seleccionar una opción o un conjunto de

opciones.• Sus principales propiedades y métodos son:

– length: Número de opciones del objeto.– name: Nombre del objeto.– options: Vector con las opciones que aparecen en la lista

de selección. Esta propiedad tiene las sub-propiedades:• defaultSelected: Valor booleano que indica si la opción esta

seleccionada por defecto.• index: Posición de la opción dentro de la lista.• selected: Valor booleano que indica si la opción esta seleccionada.• text: Texto mostrado en la opción.• value: Valor de la opción.

– selectedIndex: Índice de la opción seleccionada.



El objeto select (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Los objetos checkbox</TITLE><SCRIPT TYPE="text/javascript">*** AQUÍ VA LA FUNCIÓN QUE VEREMOS EN LA SIGUIENTE PÁGINA ***</SCRIPT></HEAD><BODY><CENTER><FORM NAME="formulario" ACTION="Javascript:Mensaje();"><TABLE BORDER="1"><CAPTION ALIGN=top>Elección del ordenador</CAPTION><TR><TH>Procesador</TH><TH>Sistema operativo</TH></TR><TR ALIGN=left><TD><SELECT NAME="procesador" SIZE=1><OPTION VALUE="P-I">Pentium I</OPTION><OPTION VALUE="P-II">Pentium II</OPTION><OPTION VALUE="P-III">Pentium III</OPTION><OPTION VALUE="P-IV" SELECTED>Pentium IV</OPTION></SELECT></TD><TD><SELECT NAME="sistema" SIZE=4 MULTIPLE><OPTION VALUE="W-9x">Windows 9x</OPTION><OPTION VALUE="W-2000">Windows 2000</OPTION><OPTION VALUE="W-XP" SELECTED>Windows XP</OPTION><OPTION VALUE="Linux" SELECTED>Linux</OPTION></SELECT></TD></TR></TABLE><INPUT TYPE="submit" VALUE="Enviar"><INPUT TYPE="reset" VALUE="Borrar"></FORM></CENTER></BODY></HTML>



El objeto select (III)function Mensaje(){var texto,i; texto="Seleccionado procesador ";texto+=document.formulario.procesador.options[document.formulario.procesador.selectedIndex].value; texto+="\nY sistemas operativos\n";for(i=0;i<document.formulario.sistema.length;i++)if (document.formulario.sistema.options[i].selected)texto+="\t* "+ document.formulario.sistema.options[i].value+ "\n"; alert(texto);}



El objeto hidden

• Permite guardar información sin que esta sea visible.

• Es equivalente a un objeto de tipo text que no aparece.

• Sus principales propiedades son:– name: Nombre del objeto.– value: Valor del objeto.



Strings (I)

• Los strings son un objeto ya declarado en Javascript.• Su uso es tan sencillo como declarar una variable y

asignarle un string.

• Sobre los string podemos usar los operadores de comparación (==, !=, >, >=, <, <=), así como el operador +, que permite concatenar dos strings.

• Sus principales propiedades y métodos son:– length: Devuelve la longitud del string.– charAt(índice): Devuelve el carácter situado en la

posición indicada por índice.



Strings (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Strings en Javascript</TITLE></HEAD><BODY><SCRIPT TYPE="text/javascript">var c1,c2,c3; c1="0123456789";c2="01234";c3=c1+c2;if (c1<c2)document.write("<P>"+c1+" es menor que "+c2+"<\/P>");elsedocument.write("<P>"+c1+" es mayor o igual que "+c2+"<\/P>"); if (c1<c3)document.write("<P>"+c1+" es menor que "+c3+"<\/P>");elsedocument.write("<P>"+c1+" es mayor o igual que "+c3+"<\/P>");document.write("<P>La longitud de "+c3+" es de "+c3.length);</SCRIPT></BODY></HTML>



Strings (III)• Los strings poseen algunas funciones especiales

que son:Función Descripción

parseInt(string) Convierte la cadena pasada en número entero y devuelve el resultado. La conversión termina al concluir la cadena o al encontrar un carácter no numérico. Si la cadena no contiene un valor numérico se devuelve el valor NaN.

parseFloat(string) Convierte la cadena pasada en un número real en coma flotante de forma similar a parseInt().

isNaN(valor) Evalúa el valor pasado como parámetro, devolviendo true si el valor no es numérico y false en caso contrario.

eval(expresión) Evaluá la expresión pasada como parámetro y devuelve el resultado. Si la expresión no puede ser evaluada se produce un error de Javascript. Por ello debe usarse estando seguro de que la expresión puede ser evaluada correctamente.



Strings (IV)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Strings en Javascript</TITLE></HEAD><BODY><SCRIPT TYPE="text/javascript">var n1,n2,n3; n1="123";n2="1.67e-18JLK";n3="k23l"; document.write("<TABLE BORDER='1'>");document.write("<TR><TD>Valor<\/TD><TD>parseInt()<\/TD><TD>parseFloat()<\/TD><\/TR>");document.write("<TR><TD>"+n1+"<\/TD><TD>"+parseInt(n1)+"<\/TD><TD>"+parseFloat(n1)+"<\/TD><\/TR>");document.write("<TR><TD>"+n2+"<\/TD><TD>"+parseInt(n2)+"<\/TD><TD>"+parseFloat(n2)+"<\/TD><\/TR>");document.write("<TR><TD>"+n3+"<\/TD><TD>"+parseInt(n3)+"<\/TD><TD>"+parseFloat(n3)+"<\/TD><\/TR>");document.write("<\/TABLE><BR>"); n1="-0.7e3";n2="2+4*3"; document.write("<TABLE BORDER='1'>");document.write("<TR><TD>Valor<\/TD><TD>isNaN()<\/TD><TD>eval()<\/TD><\/TR>");document.write("<TR><TD>"+n1+"<\/TD><TD>"+isNaN(n1)+"<\/TD><TD>"+eval(n1)+"<\/TD><\/TR>");document.write("<TR><TD>"+n2+"<\/TD><TD>"+isNaN(n2)+"<\/TD><TD>"+eval(n2)+"<\/TD><\/TR>");document.write("<TR><TD>"+n3+"<\/TD><TD>"+isNaN(n3)+"<\/TD><TD>"+"Expresión no valida"+"<\/TD><\/TR>");document.write("<\/TABLE>");</SCRIPT></BODY></HTML>



Strings (V)



Eventos (I)• Evento es toda acción que se realiza sobre la página

Web.• Los eventos pueden ser:

– Externos: Generados por el usuario.– Internos: Generados por la propia página Web.

• La respuesta a un evento suele ser una serie de acciones, como son modificar la página Web o enviar un formulario.

• Todo evento tiene asociado un comportamiento por defecto, por lo que solo hemos de modificar el comportamiento de los eventos que nos interesen.



Eventos (II)• Los eventos más comunes son:

Evento Descripción onmousedown Se ha presionado (bajado) un botón del ratón. onmousemove Se ha movido el puntero del ratón. onmouseup Se ha levantado (subido) un botón del ratón. onclick Se ha realizado una pulsación completa (subida y bajada) del botón

izquierdo del ratón. ondblclick Se ha realizado una pulsación doble sobre el botón izquierdo del ratón. onmouseover El puntero del ratón se ha colocado sobre un elemento. onmouseout El puntero del ratón ha abandonado un elemento. ondragstart Se ha iniciado una operación de arrastre. onselectstart Se ha iniciado una nueva selección empleando el ratón. onselect Ha terminado una selección. onkeydown Se ha presionado (bajado) una tecla. onkeypress Se mantiene pulsada una tecla. onkeyup Se ha dejado de presionar una tecla. onblur Se ha abandonado el ámbito de un elemento. onfocus Se ha entrado en el ámbito de un elemento. onreset Se ha inicializado un formulario. onsubmit Se ha enviado un formulario. onload Se ha cargado una página. onunload Se ha descargado una página.



Eventos (III)• La modificación del comportamiento de los

eventos se suele realizar mediante funciones.• En la llamada a estas funciones se suelen

emplear referencias a elementos de HTML. Estas referencias se realizan mediante:– La palabra this, si se refieren al propio elemento

HTML que hace la llamada a la función.– El nombre que tiene el elemento HTML.– Un nombre asignado mediante el atributo ID="nombre", que especifica como será conocido ese elemento HTML.



Eventos (IV)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Eventos en Javascript</TITLE><SCRIPT TYPE="text/javascript">

function CambiarColor(elemento){

if (elemento.style.color=="red")elemento.style.color="blue";

elseif (elemento.style.color=="blue")

elemento.style.color="green";else

elemento.style.color="red";

return true;}

function Dentro(objeto){

objecto.style.color="white";

return true;}

function Fuera(objeto){

objecto.style.color="black";

return true;}

</SCRIPT></HEAD><BODY BGCOLOR="white"><P onclick="Javascript:CambiarColor(this);">Este texto cambiara de color</P><P onclick="Javascript:CambiarColor(this);">Y este otro tambien...</P><P onmouseover="Javascript:Dentro(document.getElementById('oculto'));" onmouseout="Javascript:Fuera(document.getElementById('oculto'));">Y si te pones sobre este otro...</P><P ID="oculto">!!! Desaparezco yo !!!</P></BODY></HTML>

Introducción a HTML y Javascript Introducción a...

Documents

Transcript of Introducción a HTML y Javascript Introducción a...