Académique Documents
Professionnel Documents
Culture Documents
2.
3.
4.
5.
6.
7.
4.
5.
6.
7.
8. VBScript en el navegador
1. Cmo se escriben los scripts para el IE?
2. Los objetos del Internet Explorer
1. Window
1. Location
2. Document
1. Link
2. Form
1. Controles HTML
3. Los eventos en general
9. Los lenguajes JavaScript y Java en el navegador
<SCRIPT> <APPLET>
1. Cmo se escriben los JavaScript?
2. Funciones.
3. Operadores
4. Instrucciones.
5. Los objetos y funciones de JavaScript.
6. Los objetos del navegador
1. window
7. Ejemplos de JavaScript.
1. Poner en limpio de una vez por todas esas notas que tienes
desperdigadas, llenas de llamadas de unas a otras y que no
hay manera de encontrar?
2. Presentar tu coleccin de sellos con una imagen escaneada
de cada uno y un comentario sobre su tema, y organizado por
aos, valores, o lo que se te ocurra?
3. Idem de la coleccin de discos?
4. Montar el lbum de fotos de familia con un texto explicativo
de cada una?
5. Organizar tu biblioteca, incluyendo el ndice escaneado de
cada libro y haciendo links entre temas?
6. Las fotos del ltimo viaje de vacaciones, incluyendo llamadas
a los planos de las ciudades visitadas, y a todas las historias
que te contaron en cada sitio?
7. Si eres estudiante, presentar al "profe" tu prximo trabajo
lleno de diagramas, grficos, tablas, colores... en un CD o
cualquier otro soporte?
8. Organizar para siempre y poner al alcance de todos ese
catlogo o listn siempre perdido en la oficina?
9. Preparar los temas de legislacin, llenos de referencias
cruzadas, de esas oposiciones que te llevan de cabeza?
En fin, la lista puede ser infinita. Pero esto es bastante sencillo de
conseguir. Qu necesitas para empezar? pues solamente un editor
de texto cualquiera (desde Word al humilde "Bloc de notas" de
Windows), un visualizador WWW como el que ests usando ahora...
y haberte ledo esto.
Introduccin al HTML
Texto de prueba
Si olvidas poner </H1> todo el resto de la pgina tendr el mismo
tamao grande.
Elementos vacos
Por ejemplo, el elemento <A> que sirve para hacer un link (enlace)
con otro documento o con otra pgina del actual, se escribir:
<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba
</A>.
Texto de prueba
Los elementos, en HTML, los puedes escribir tanto en maysculas
como en minsculas. Funciona igual <P> que <p>. A la hora de revisar
el cdigo escrito, resulta ms claro si se escribieron en maysculas,
pero si en el futuro hay que convertir la pgina a otro estndar,
como el XHTML, no se admitirn las maysculas. Si no piensas
migrar a otras tecnologas, hazlo como ms cmodo te resulte.
Si escribes:
<!Tipo de documento>
<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>
<!-- Esto es un comentario-->
<BODY>
<H1> Esto es una "demo" de documento HTML </H1>
Esto es el ms sencillo de los documentos HTML.
</BODY>
</HTML>
.text
o .htm
Documento HTML. Contine texto e instrucciones HTML que
sern interpretadas.
o .txt
Contiene texto plano. El visualizador presentar todo el
fichero como si fuera un nico bloque de texto y no
interpretar ninguna instruccin HTML que pudiera llevar.
Esto lo har con cualquier fichero que lleve una extensin
desconocida o simplemente no lleve ninguna.
.gif
.xpm
.jpeg
.mpeg
.au
.mid
.exe
.Z
.doc
.rtf
.pdf
.ps
.doc
.xls
.ppt
.asx
.asx .avi .mp3 .mpg
.swf
.class .clas
.clas .class
.exe .com
.zip
audio/mpeg
audio/x-wav
audio/x-ms-wma
audio/x-midi
audio/x-ms-mp3
audio/x-mp3
audio/mpeg3
audio/x-mpeg-3
audio/x-pn-realaudio
.mp3 .mpg
.wav
.wma
.mid .midi
.mp3
.mp3
.mp3
.mp3 .mpeg
.rm
image/jpeg
image/gif
image/png
.jpg .jpeg
.gif
.png
text/html
.htm .html
text/plain
text/css
text/x-javascript
text/richtext
text/rtf
video/mpeg
video/avi
video/x-ms-wmv
video/x-msvideo
video/quicktime
video/x-ms-asf
.mpg .mpeg
.avi
.wmv
.wmv
.mov
.asf
</HEAD>
<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="keywords" CONTENT="HTML, internet
</HEAD>
">
Este otro sirve para que los buscadores puedan ofrecer un breve
resumen de los contenidos de tu pgina:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="description" CONTENT="Manual para escribir HTML.">
</HEAD>
content="text/html; charset=utf-8">
content="text/html; charset=iso-8859content="text/html; charset=utf-8 /
content="text/html; charset=iso-8859content="text/html; charset=windows-
tamao cero, con lo que siempre que veas una pgina, sta habr
sido solicitada al servidor independientemente de lo que digan las
instrucciones META.
Hay otros elementos que pueden aparecer en la HEAD, como
ISINDEX, NEXTID, LINK o BASE, pero son de uso muy
especializado y poco corriente, algunos ya en desuso, y ninguno
obligatorio (<TITLE> s lo es).
Texto
Texto
Texto
Texto
Texto
Texto
de
de
de
de
de
de
prueba
prueba
prueba
prueba
prueba
prueba
(H1)</H1>.
(H2)</H2>
(H3)</H3>
(H4)</H4>
(H5)</H5>
(H6)</H6>
se ver:
Texto en H1
Texto en H3
AAA
AAAAAA
ABcde
ABcde
Con la versin 3.0 de Netscape se ha implementado un nuevo
atributo del elemento <FONT> que permite elegir tipos de letra
entre los varios de que dispone por defecto Windows. Se trata del
atributo FACE. Este atributo permite forzar el tipo de letra que el
diseador de la pgina quiere que vea el cliente, sin importar el que
por defecto tenga establecido el visualizador.
Si escribes
<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW
ROMAN</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER
NEW</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL
FONTS</FONT>
Se ver:
Texto de prueba 12345 con tipo ARIAL
Texto de prueba 12345 con tipo TIMES NEW ROMAN
Texto de prueba 12345 con tipo COURIER NEW
Texto de prueba 12345 con tipo COURIER
Se ver:
Se ver:
Texto de prueba 12345 con tipos alternativos
Como puedes ver, se ha declarado como primer tipo de letra el
llamado "raro" que, por supuesto, no existe, y el navegador pasa a
utilizar el siguiente, "courier", que s es habitual.
Texto en color
Se puede controlar el color del texto utilizando el elemento
<FONT> con el atributo COLOR="xxx", donde "xxx" es el nombre
en ingls del color que se desea. Hay que tener presente que
algunos no se vern o se vern mal si la mquina no soporta, por lo
Se ver:
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto
ROJO
AZUL
AZUL MARINO
VERDE
OLIVA
AMARILLO
LIMA
MAGENTA
PURPURA
CYAN
MARRON
NEGRO
Texto GRIS
Texto TEAL
Texto BLANCO
He aqu una combinacin de colores y tamaos:
Si escribes:
<FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT>
<FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>
Resulta:
se ver:
Texto en H1
Texto en H3
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
Se escribir as:
<BLOCKQUOTE>
texto texto texto
texto texto texto
<BLOCKQUOTE>
texto texto texto
texto texto texto
</BLOCKQUOTE>
</BLOCKQUOTE>
El resultado es:
El elemento <HR> admite dos parmetros: WIDTH y SIZE. El
primero define la longitud de la lnea y el segundo su anchura. No es
obligado usar los dos a la vez
Por ejemplo, si escribes
<HR WIDTH=400 SIZE=5>
El resultado ser:
El valor del atributo WIDTH se puede expresar, como en el
ejemplo anterior, en nmero de puntos (pxels), o en tantos por
ciento referidos al ancho total de la ventana. As:
<HR WIDTH=80% SIZE=5>
El resultado ser:
El resultado ser:
O bien:
<HR WIDTH=80% SIZE=5 ALIGN=RIGHT>
El resultado ser:
Hay otro elemento, aparecido en la versin 6 de Netscape, que
permite rodear un texto con un marco, y opcionalmente ponerle una
etiqueta. Se trata del elemento: <FIELDSET>. Recuerda que si no
tienes la versin adecuada de navegador, en los siguientes ejemplos
slo vers el texto, pero no los enmarcados.
Si se escribe:
<FIELDSET>
Esto es una prueba de enmarcado
</FIELDSET>
Se obtiene:
Esto es una prueba de enmarcado
Se obtiene:
Esto es una etiquetaEsto es una prueba de enmarcado
Se obtiene:
Esto es una etiquetaEsto es una prueba de enmarcado
Textos preformateados
Posiblemente ya te habrs dado cuenta de que, cuando escribes un
texto con tu editor, a la hora de ver lo hecho con el visualizador,
algunas cosas no estn como t las pusiste... Como por ejemplo
poner dos o tres espacios en blanco entre palabras, o intentar
encolumnar los datos de una pequea tabla: acaba todo junto y en
la misma lnea!
Este efecto se puede eliminar con el elemento lleno <PRE> . Al
texto que va dentro del elemento PRE se le pueden aplicar todos los
elementos que se quiera, siempre que sean elementos que no alteren
la posicin del texto. Por ejemplo si utilizas el elemento <H>, se
rompera el preformateo pero no ocurrir lo mismo con <FONT
SIZE>. Por defecto, los textos preformateados se ven con tipo de
letra "curier", es decir de paso fijo y los no preformateados en
"Times New Roman". Estos tipos son configurables en el
visualizador.
Se escribir as:
<PRE>
1
9 10 11 12 13 14
15 16 17 18 19 20 21
</PRE>
9 10 11 12 13 14
15 16 17 18 19 20 21
Se ve as:
texto texto
texto texto
SIZE=35>
texto texto texto texto texto texto texto
SIZE=35>
texto texto texto texto texto texto texto
Y se ve as:
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto
Como puedes ver, con TYPE=horizontal deja espacio en blanco a la izquierda de la
primera linea. Es el valor por defecto. TYPE=vertical deja espacio en blanco por arriba
de la primera linea. Para ambos tipos el tamao del espacio se da en puntos (pixels) con
el atributo SIZE. El valor por defecto es 0.
Fjate en que entre las dos instrucciones con tipo horizontal hay un elemento <P>. En
efecto, es necesario indicarle a <SPACER> donde termina el prrafo para que ejecute la
siguiente instruccin del mismo tipo. Este elemento no funciona con el navegador de
Microsoft. Para conseguir columnas sin utilizar este elemento la nica solucin es
emplear tablas: <TABLE>
Se ver:
texto texto texto texto texto texto texto texto texto txto texto
texto texto texto texto texto texto
texto centrado texto centrado
texto texto texto texto texto texto texto texto texto txto texto
texto texto texto texto texto texto
Esto, adems de a texto slo, se puede aplicar a una tabla, una
imagen o cualquier otra cosa.
Quedan algunos otros elementos que modifican el aspecto del
texto. Algunos, aparentemente, hacen la misma cosa, y otros no
funcionan con el visualizador de Netscape, por lo que se omiten
aqu.
Texto en negrita:
<B>Texto en negrita</B>
Texto realzado:
<STRONG>Texto realzado</STRONG>
Texto en itlica:
<I>Texto en itlica</I>
Texto subrayado:
<U>Texto subrayado</U>
Texto tachado:
<STRIKE>Texto tachado</STRIKE>
Texto de direccin:
<ADDRESS>Texto de direccin</ADDRESS>
Texto intermitente
<BLINK>Texto intermitente</BLINK>
Texto superndice
Texto normal
<SUP>Texto Superndice</SUP>
Texto subndiceTexto
nomal
<SUB>Texto Subndice</SUB>
Texto grande
<BIG>Texto grande</BIG>
Texto pequeo
<SMALL>Texto pequeo</SMALL>
Listas y mens
Hay elementos que permiten crear texto con varios formatos de
listado: Estos pueden ser ordenados <OL> (se refiere a numerados,
no ordenados por algun criterio),desordenados <UL> (no
numerados), directorios <DIR>, menu <MENU> y listados de
definicin <DL>. Veamos cmo es la sintaxis bsica y apariencia de
estos elementos, a partir de los cuales, pueden hacerse
combinaciones muy complejas mediante anidamientos de unos con
otros, hasta conseguir prcticamente cualquier presentacin
deseada:
Esto es una lista ordenada (numerada):
1. Primera linea
2. Segunda linea
Se escribe:
<OL>
<LI>Primera linea
<LI>Segunda linea
</OL>
Primera linea
segunda linea
Se escribe:
<UL>
<LI>Primera linea
<LI>Segunda linea
</UL>
En este caso los nmeros han sido sustituidos por unos puntos
gruesos. Esa es la apariencia por defecto; se puede cambiar usando
el atributo TYPE con tres valores (el valor por defecto es DISC).
Con el valor CIRCLE se ver:
o
o
Primera linea
segunda linea
Se escribe:
<UL TYPE=CIRCLE>
<LI>Primera linea
<LI>Segunda linea
</UL>
Primera linea
segunda linea
Se escribe:
<UL TYPE=SQUARE>
<LI>Primera linea
<LI>Segunda linea
</UL>
Primera linea
Segunda linea
Tercera linea
Cuarta linea
Se escribe:
<OL TYPE=A>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
Primera linea
Segunda linea
Tercera linea
Cuarta linea
Se escribe:
<OL TYPE=a>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
Primera linea
Segunda linea
Tercera linea
Cuarta linea
Se escribe:
<OL TYPE=I>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
Primera linea
Segunda linea
Tercera linea
Cuarta linea
Se escribe:
<OL TYPE=i>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
Primera linea
Segunda linea
Tercera linea
Cuarta linea
Se escribe:
<OL TYPE=A START=5>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
Fjate que ahora en lugar del elemento <LI> se utiliza <DT> y <DD>, y
como tipo <DL>. Estos tres nuevos elementos tambin se pueden
usar con cualquiera de los anteriores tipos de lista, alterando por
completo su apariencia. Para hacerse una idea de la variedad de
aspectos que se pueden conseguir, lo mejor es ver la pgina
de ejemplos de listados.
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<DD>Linea de texto 1
<DD>Linea de texto 2
<DD>Linea de texto 3
</UL>
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<UL TYPE=DISC>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
</UL>
Linea de texto 1
Linea de texto 2
Linea de texto 3
o Linea de texto 3.1
o Linea de texto 3.2
Linea de texto 3.2.1
Linea de texto 3.2.2
Linea de texto 3.2.2.1
Linea de texto 3.2.2.2
Linea 4 de texto
Se escribe:
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<UL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<UL>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<UL>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</UL>
</UL>
</UL>
<LI>Linea 4 de texto
</UL>
Ordenadas
Ordenada simple
1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</OL>
<OL>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<OL>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</OL>
</OL>
</OL>
<LI>Linea de texto 4
</OL>
IV.
Linea de texto 1
Linea de texto 2
Linea de texto 3
i. Linea de texto 3.1
ii. Linea de texto 3.2
i. Linea de texto 3.2.1
ii. Linea de texto 3.2.2
i. Linea de texto 3.2.2.1
ii. Linea de texto 3.2.2.2
Linea de texto 4
Se escribe:
<OL TYPE=I>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL TYPE=i>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<OL TYPE=i>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<OL TYPE=i>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</OL>
</OL>
</OL>
<LI>Linea de texto 4
</OL>
1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
1. Linea de texto 3.1
2. Linea de texto 3.2
Linea de texto 3.2.1
Linea de texto 3.2.2
Linea de texto 3.2.2.1
Linea de texto 3.2.2.2
4. Linea de texto 4
Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<UL TYPE=SQUARE>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<UL TYPE=CIRCLE>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</UL>
</UL>
</OL>
<LI>Linea de texto 4
</OL>
Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<DL>
<DD>Linea de texto 3.2.1
<DD>Linea de texto 3.2.2
<DL>
<DD>Linea de texto 3.2.2.1
<DD>Linea de texto 3.2.2.2
</DL>
</DL>
</OL>
<LI>Linea de texto 4
</OL>
Tablas
Las tablas son sin duda uno de los elementos ms potentes del
HTML. Con pocos elementos se pueden conseguir efectos
espectaculares. En el interior de las celdas de una tabla, que
pueden ser con borde visible o invisible, se puede poner cualquier
cosa: texto de cualquier tamao y color, imgenes, links... Por
supuesto, adems de permitir cualquier contenido, tienen sus
propios atributos de alineacin tanto horizontal como vertical, y
atributos de dimensionado. Por defecto se autodimensionan, es
decir, se adaptan en tamao a su contenido, pero tambin es posible
definirlo de forma fija. Las tablas han sido utilizadas largo tiempo
para maquetar el contenido de las pginas, y aunque las nuevas
tendencias aconsejen hacer esto con bloques (capas XHTML), no es
un elemento que vaya a desaparecer, y es mucho ms sencillo de
utilizar.
El elemento bsico de definicin de tabla es <TABLE> </TABLE> y
en su interior se disponen los sub elementos <TR> para definir una
fila (Row) <TH> para definir una cabecera (Header) <TD> para
definir una celda de datos (Data). Estos sub elementos tambin han
de llevar sus correspondientes cierres: </TR> </TH> </TD>.
Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de
forma automtica el texto de su contenido recibe los atributos de
negrita y centrado. Slo es posible definirlas al principio de las
filas, de las columnas o de ambas a la vez.
He aqu una tabla-resumen de los elementos utilizados y los
atributos que admite cada uno:
TABLE TR TD
X
- BORDER
X
- BORDERCOLOR
- X
ROWSPAN
- X
COLSPAN
X X
ALIGN
- X
VALIGN
X
- X
WIDTH
X
- X
HEIGTH
X
- CELLPADDING
X
- CELLSPACING
- X
NOWRAP
X
X X
EVENTS
Resumen de tablas
TH CAPTION
X
X
X
X
X
-
Ejemplos de tablas
Tabla bsica de 3x2
ABC
DEF
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</TABLE>
Item 1
<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
Cabeceras laterales
Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9
<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
<TR><TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>
<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item
4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item
8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item
11</TD>
</TR>
</TABLE>
</TR>
<TR ALIGN=CENTER>
<TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
</TABLE>
</CENTER>
12
34
C D
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
</TR>
<TR>
</TR>
</TABLE>
3</TD>
</TR>
<TR>
</TR>
</TABLE>
Dimensionado de celdas
A
A B C
D E F
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
<TR>
Febrero
Celda 1 Celda 2
Celda 4
Marzo
Otra celda
Celda 3
y esta
Celda 6
es la celda 5
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD>Celda 4</TD>
<TD>y esta<br>es la celda 5</TD>
<TD>Celda 6</TD>
</TR>
</TABLE>
Febrero
Marzo
Otra celda
Todas alineadas al centro
Celda 2
Celda 3
Por defecto
Alineado a la derecha Alineado al centro
Alineado a la izquierda
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR ALIGN=center>
<TD>Todas alineadas al centro</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD ALIGN=right>Alineado a la derecha</TD>
<TD ALIGN=center>Alineado al centro</TD>
<TD>Por defecto<br>Alineado a la izquierdat</TD>
</TR>
</TABLE>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR VALIGN=top>
<TD>Todas alineadas arriba</TD>
<TD>Esta es la<br>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
<TR>
<TD VALIGN=top>Alineado arriba</TD>
<TD VALIGN=bottom>Alineado abajo</TD>
<TD>Por defecto<br>Alineado al centro</TD>
</TR>
</TABLE>
AB
CD
456
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 1 -->
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 2 -->
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <!-- ROW 2, TABLE 2 -->
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> <!-- ROW 2, TABLE 1 -->
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
Width=50%
Celda 4
2
4
</TR>
<TR><TD>Celda 3</TD><TD>4</TD>
</TR>
</TABLE>
Celda 2
Celda 4
B
E
C
F
<CENTER>
<TABLE BORDER WIDTH="50%">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</CENTER>
Item 2
Item B
Item 4
Item 2
4
</TABLE>
O de toda la fila:
<TABLE BORDER >
<TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR>
....
</TABLE>
C2L1
C3L1
C4L1
C5L1
C6L1
C7L1
C1L2
C2L2
C3L2
C4L2
C5L2
C6L2
C7L2
C1L3
C2L3
C3L3
C4L3
C5L3
C6L3
C7L3
C1L4
C2L4
C3L4
C4L4
C5L4
C6L4
C7L4
C1L5
C2L5
C3L5
C4L5
C5L5
C6L5
C7L5
C1L6
C2L6
C3L6
C4L6
C5L6
C6L6
C7L6
C1L7
C2L7
C3L7
C4L7
C5L7
C6L7
C7L7
que aparezcan las lneas, slo hay que "estirar" el punto contenido
en nuestro fichero grfico rojo.gif. Esto nos permite "dibujar" las
lneas que se quieran y donde se quieran, sin problemas de
compatibilidad, ya que estos atributos del elemento <IMG> son
completamente estandarizados (por lo menos de momento). Fjate
en que adems de atributos propios del elemento IMG tambin se
utiliza una instruccin de estilo: width="1px" para asegurar un
grosor mnimo de la lnea. Este es el aspecto de la misma tabla con
los bordes visibles:
Vertical
izquierda
Horizontal arriba
Ejemplo de recuadro
con ngulos rectos.
Horizontal abajo
Vertical
derecha
Como puedes ver, para que el efecto sea completo hay que dar el
mismo color que tienen los grficos como fondo de las celdas. Estos
son los cuatro grficos necesarios:
angulo1.gif
angulo2.gif
angullo4.gif
angulo3.gif
Puedes probar los diez primeros para hacerte una idea, o puedes
verlos todos desde aqu
White rgb=#FFFFFF
Red rgb=#FF0000
Green rgb=#00FF00
Blue rgb=#0000FF
Magenta rgb=#FF00FF
Cyan rgb=#00FFFF
Yellow rgb=#FFFF00
Black rgb=#000000
Aquamarine rgb=#70DB93
Bronze rgb=#8C7853
Bronze II rgb=#A67D3D
Firebrick rgb=#8E2323
Goldenrod rgb=#DBDB70
Grey rgb=#C0C0C0
Plum rgb=#EAADEA
Quartz rgb=#D9D9F3
Thistle rgb=#D8BFD8
Turquoise rgb=#ADEAEA
Control de colores
Este es un documento de ejemplo de control de color. El texto es gris claro sobre
negro, y los links son amarillos al principio, azul-verde cuando son activados, y
verdes despus de haber sido utilizados.
o bien Ñ
Esto habr que hacerlo con todos los caracteres que no sean las
letras del alfabeto (maysculas y minsculas), los nmeros y unos
pocos signos, como el punto, la coma, el guin y algunos otros. A
este conjunto de caracteres, comn para todos los sistemas, se le
denomina cdigo ASCII, y desde luego hay que codificar todas las
letras acentuadas, ees, cedillas, etc., etc.
En el ndice encontrars una tabla con todos los caracteres,
tambin estn las letras, pero stas slo te sern tiles en caso de
Caracter
Cdigo
!
!
"
"
#
#
$
$
%
%
‰
&
&
'
'
(
(
)
)
*
*
+
+
,
,
-
.
.
/
/
0-9
0 - 9
:
:
;
;
<
<
<
<
=
=
>
>
>
>
?
?
@
@
A - Z A - Z
[
[
\
\
]
]
^
^
_
_
`
`
a - z a - z
{
{
|
|
}
}
~
~
Descripcin
Cerrar exclamacin
Dobles comillas
Signo de nmero
Dlar
Tanto por ciento
Tanto por mil
Ampersand
Apstrofe
Cerrar parntesis
Abrir parntesis
Asterisco
Signo ms
Coma
Guin
Punto
Barra de divisin
Dgitos del al 0-9
Dos puntos
Punto y coma
Menor
Menor
Igual
Mayor
Mayor
Cerrar interrogacin
Arroba
Letras A-Z
Cerrar corchete (izquierdo)
Barra inversa
Abrir corchete
Circunflejo
Subrayado
Acento agudo
Letras a-z
Abrir llave
Barra vertical
Cerrar llave
Tilde
Alias
------amp
-------------lt
--gt
---------------
 
¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬
­
®
¯
°
±
²
³
´
µ
¶
·
¸
¹
º
»
¼
½
¾
⅛
⅜
⅝
⅞
¿
À
Á
Â
nbsp
iexcl
cent
pound
curren
yen
brvbar
sect
uml
copy
ordf
laquo
not
shy
reg
macr
deg
plusmn
sup2
sup3
acute
micro
para
middot
cedil
sup1
ordm
raquo
frac14
frac12
frac34
----iquest
Agrave
Aacute
Acirc
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
A mayscula, tilde
A mayscula, diresis
A mayscula, anillo
AE mayscula
C cedilla mayscula
E mayscula, acento grave
E mayscula, acento agudo
E mayscula, acento circunflejo
E mayscula, diresis
I mayscula, acento grave
I mayscula, acento agudo
I mayscula, acento circunflejo
I mayscula, diresis
Eth mayscula
Ee mayscula
O mayscula, acento grave
O mayscula, acento agudo
O mayscula, acento circunflejo
O mayscula, tilde
O mayscula, diresis
Signo de multiplicacin
O barrada mayscula
U mayscula, acento grave
U mayscula, acento agudo
U mayscula, acento circunflejo
U mayscula, diresis
Y mayscula, acento agudo
THORN mayscula
Beta minscula
a minscula, acento grave
a minscula, acento agudo
a minscula, acento circunflejo
a minscula, tilde
a minscula, diresis
a minscula, anillo
ae mnuscula
c cedilla minscula
e minscula, acento grave
e minscula, acento agudo
Atilde
Auml
Aring
AElig
Ccedil
Egrave
Eacute
Ecirc
Euml
Igrave
Iacute
Icirc
Iuml
ETH
Ntilde
Ograve
Oacute
Ocirc
Otilde
Ouml
times
Oslash
Ugrave
Uacute
Ucirc
Uuml
Yacute
THORN
szlig
agrave
aacute
acirc
atilde
auml
aring
aelig
ccedil
egrave
eacute
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ
€
≠
≤
≥
√
Ω
↑
↓
←
→
↔
№
▲
►
▼
◄
■
ecirc
euml
igrave
iacute
icirc
iuml
eth
ntilde
ograve
oacute
ocirc
otilde
ouml
divide
oslash
ugrave
uacute
ucirc
uuml
yacute
thorn
yuml
euro
ne
le
ge
radic
-uarr
darr
larr
rarr
harr
-------
□
▪
▫
●
○
◊
Cuadrdo vacio
Mini cuadrado lleno
Mini cuadrado vacio
Punto lleno
Punto vacio
Rombo vacio
-----loz
puede ser buena idea cambiarlo por otro tipo de efecto o indicacin
que facilite al lector el saber qu texto contiene un link, de lo
contrario, posiblemente, no llegue a utilizarlos nunca.
Generalmente, el visitante no se dedicar a "pasear" el ratn por
toda la pgina buscando enlaces ocultos.
Se escribir:
<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba
</A>.
puedes poner el texto junto con una imagen. Por ejemplo para hacer
un link que nos lleve al ndice desde una bola roja, se escribe:
Ir al ndice <A HREF="indice.htm"> <img src="bolaroja.gif"> </A>.
Ir al ndice
Ir al ndice
Descripcin
Servicios WWW
Servicios FTP
Servicios NEWS
Servicios E-mail
Fichero local
Ejemplo
<A HREF="http://www.uv.es/"> WWW</A>
<A HREF="ftp://ftp.uv.es/">FTP</A>
<A HREF="news://news.uv.es/">NEWS</A>
<A HREF="mailto:jac@uv.es/">E-mail</A>
<A HREF="indice.htm/">Fichero</A>
Efecto
WWW
FTP
NEWS
E-mail
Fichero
En el documento activo:
<A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto
1</A>
En el documento destino:
<A NAME="punto1"></A>
En la lnea de destino
<A NAME="punto1"></A>
Se obtiene: Tablas
Insertar imgenes
Insertar imgenes en un documento permite crear pginas mucho
ms atractivas. Segn el tipo de grficos utilizado se pueden
conseguir efectos realmente sorprendentes.
Se escribe as:
<MAP NAME="nombre1">
<AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm">
<AREA SHAPE="rect" COORDS="76,1,136,46" HREF="intro.htm">
</MAP>
<IMG SRC="sugeren.gif" USEMAP="#nombre1">
Imgenes de fondo
El fondo (background) de este documento es una imagen en formato GIF.
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Grficos animados
Una nueva propiedad de algunos visualizadores es la posibilidad de
presentar grficos con animacin. No hay que confundir los grficos
animados en formato GIF con los "movies" o vdeos en formato MPG
que no son tratados directamente por el visualizador, sino por una
herramienta auxiliar que hay que definirle.
Los visualizadores suelen presentar correctamente los formatos
GIF y JPG. Netscape ha implementado la posibilidad de mostrar un
tipo de grfico tipo GIF que incluye en su interior una secuencia,
que junto con instrucciones de repeticin (loop), espera (wait) y
controles de cabecera permiten reproducir una animacin. La
diferencia de tamao entre un GIF animado y un MPG es
considerable. Evidentemente, las animaciones GIF tienen peor
resolucin que las MPG, y slo estn pensadas para fines sencillos.
La forma de incluir una imagen animada en el documento es la misma
que una imagen fija. No se requiere ningun tipo de programa ni
script, todo est definido en la propia imagen. Existen en la red en
forma de shareware programas para hacer ficheros de imgenes
animadas. Su construccin es muy sencilla: slo necesitas tener la
serie de imgenes que quieres animar e ir ensamblndolas con algn
programa al efecto, definir el tiempo entre imagen, el ciclo de
repeticin... y listo.
Los visualizadores que no soportan este efecto, lo que hacen es
presentar solamente la primera o la ltima de las imgenes de la
secuencia. Hay que tener esto presente, y no comenzar o terminar
las secuencias con, por ejemplo, una imagen vaca.
Aqu tienes dos ejemplos sencillos de GIF animado:
Una bola que corre.
Cmo es un CGI?
SERVER_SOFTWARE
SERVER_NAME
GATEWAY_INTERFACE
SERVER_PROTOCOL
SERVER_PORT
REQUEST_METHOD
HTTP_ACCEPT
PATH_INFO
PATH_TRANSLATED
SCRIPT_NAME
QUERY_STRING
REMOTE_HOST
REMOTE_ADDR
REMOTE_USER
=
=
=
=
=
=
=
=
=
=
=
=
=
=
$SERVER_SOFTWARE
$SERVER_NAME
$GATEWAY_INTERFACE
$SERVER_PROTOCOL
$SERVER_PORT
$REQUEST_METHOD
$HTTP_ACCEPT
$PATH_INFO
$PATH_TRANSLATED
$SCRIPT_NAME
$QUERY_STRING
$REMOTE_HOST
$REMOTE_ADDR
$REMOTE_USER
echo
echo
echo
echo
echo
echo
echo
echo
echo
REMOTE_IDENT
AUTH_TYPE
CONTENT_TYPE
CONTENT_LENGTH
HTTP_USER_AGENT
HOME
HTTP_FROM
HTTP_REFERER
REFERER_URL
=
=
=
=
=
=
=
=
=
$REMOTE_IDENT
$AUTH_TYPE
$CONTENT_TYPE
$CONTENT_LENGTH
$HTTP_USER_AGENT
$HOME
$HTTP_FROM
$HTTP_REFERER
$REFERER_URL
LA INPUT:
exit 0
else
echo NO VIENE NADA POR LA INPUT
exit 0
fi
HTTP_FROM =
HTTP_REFERER = http://sestud.uv.es/manual.esp/prueba.htm
REFERER_URL =
ESTO VIENE POR LA INPUT:
CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios
<INPUT>
Campos de entrada por teclado.
Botones de seleccin.
Casillas de marca.
Botones de proceso.
Botones de inicializacin (reset).
Imgenes sensibles al ratn.
<SELECT>
Listas desplegables de valores.
Listas fijas de valores.
<TEXTAREA>
Ventanas de escritura libre.
El elemento INPUT
Se escribe:
Se escribe:
Se escribe:
<FORM> <INPUT TYPE="PASSWORD" VALUE="HOLA"> </FORM>
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="SUBMIT" VALUE="Procesar"></FORM>
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="BUTTON" VALUE="No hace nada"></FORM>
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="RESET" VALUE="Inicializar"></FORM>
Enviar fichero
<FORM enctype="multipart/form-data"
ACTION="ftp://miservidor/" METHOD="POST">
Enviar el fichero:
<INPUT NAME="mifichero" TYPE="FILE">
<INPUT TYPE="SUBMIT" VALUE="Enviar fichero"></FORM>
y escribir:
ACTION="ftp://miusuario@miservidor/" METHOD="POST">
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT TYPE=IMAGE NAME="imagen" SRC="sugeren.gif">
</FORM>
Procesar
Inicializar
Se escribe:
Clase A
Clase B
Inicializar
Se escribe:
Clase A
Clase B
El elemento SELECT
SELECT sin ningn atributo define por defecto una lista
desplegable de toda la pantalla de alto y una columna de ancho:
Se escribe:
<FORM> <SELECT> </SELECT>
</FORM>
Inicializar
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1">
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
</SELECT>
</FORM>
Procesar
Inicializar
Valor 1
Valor 2
Valor 3
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1" SIZE=3>
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION VALUE="Valor 5">Este es el Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>
Procesar
Inicializar
Valor 1
Valor 2
Valor 3
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1" MULTIPLE SIZE=3>
<OPTION>Valor 1
<OPTION SELECTED>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION>Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>
Y se escribe:
<select name="coches">
<option selected value="0">Ninguno
<optgroup label="Coches de lujo">
El elemento TEXTAREA
Este elemento, como su nombre indica, permite definir un rea de
texto en la pantalla en la que podemos escribir cualquier cosa. Se
debe escribir ya parametrizada en cuanto a dimensiones, con los
atributos ROWS (lneas) y COLS (COLUMNAS). No tiene otros
atributos o posibles variantes. Por supuesto, para que sea
operativo, deber ir acompaado de los componentes necesarios
para enviar e inicializar.
Procesar
Inicializar
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA>
</FORM>
Se escribe as:
<FORM METHOD="GET" ACTION="">
<INPUT TYPE="text" STYLE="background:yellow;color:red"
NAME="campo1">
<INPUT TYPE="text" STYLE="border:1;background:yellow;color:blue"
readonly
NAME="campo2" VALUE="Solo lectura">
Ejemplos de formularios
Juego de botones direccionados a pginas LOCALES.
Esto slo funciona abriendo la pgina como file:/// no como
servicio http://.
Indice
Notas
Cmo funciona?
<TABLE>
<TR>
<TD>
<FORM METHOD="GET" ACTION="indice.htm">
<INPUT TYPE="SUBMIT" VALUE="Indice">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="notas.htm">
<INPUT TYPE="SUBMIT" VALUE="Notas">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="como.htm">
<INPUT TYPE="SUBMIT" VALUE="Cmo funciona?">
</FORM>
</TD>
</TR>
</TABLE>
Notas
Cmo funciona?
<TABLE>
<TR>
<TD>
<FORM METHOD="GET" ACTION="http://www.uv.es/jac/guia/indice.htm">
<INPUT TYPE="SUBMIT" VALUE="Indice">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="http://www.uv.es/jac/guia/notas.htm">
<INPUT TYPE="SUBMIT" VALUE="Notas">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="http://www.uv.es/jac/guia/como.htm">
<INPUT TYPE="SUBMIT" VALUE="Cmo funciona?">
</FORM>
</TD>
</TR>
</TABLE>
Procesar
Inicializar
Procesar
************
Inicializar
Clase A
Procesar
Clase B
Inicializar
1
1
2
2
Clase A
Tipo 1
Procesar
Clase B
Tipo 2
Inicializar
<P>
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
</form>
Inicializar
Procesar
Inicializar
Procesar
Inicializar
F.Nac.:
DNI:
Apellidos:
Calle y nmero:
Cdigo Postal:
Ciudad:
Provincia:
Opcin:
Telfono:
Escoja una opcin
Comentarios
personales:
Pulse aqu:
Enviar datos
<FORM ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"
METHOD=POST>
<CENTER>
<TABLE BORDER>
<TR>
<TD>Nombre:</TD>
<TD> <INPUT TYPE="text" NAME="nombre" SIZE=18 MAXLENGTH=18> F.Nac.:
<INPUT TYPE="text" NAME="edad" SIZE=8 MAXLENGTH=8> DNI:
<INPUT TYPE="text" NAME="dni" SIZE=8 MAXLENGTH=8></TD>
<TR>
<TD>Apellidos:</TD>
<TD> <INPUT TYPE="text" NAME="apellidos" SIZE=48 MAXLENGTH=48></TD>
<TR>
<TD>Calle y nmero:</TD>
<TD> <INPUT TYPE="text" NAME="domicilio" SIZE=48 MAXLENGTH=48></TD>
<TR>
<TD>Cdigo Postal:</TD>
<TD> <INPUT TYPE="text" NAME="postal" SIZE=5 MAXLENGTH=5>Ciudad:
<INPUT TYPE="text" NAME="localidad" SIZE=36 MAXLENGTH=36></TD>
<TR>
<TD>Provincia: </TD>
<TD> <INPUT TYPE="text" NAME="provincia" SIZE=20 MAXLENGTH=20>
Telfono:
<INPUT TYPE="text" NAME="telefono" SIZE=19 MAXLENGTH=19></TD>
<TR>
<TD>Opcin:</TD>
<TD> <SELECT NAME="OPCION">
<OPTION>OPCION 1
<OPTION>OPCION 2
<OPTION>OPCION 3
<OPTION>OPCION 4
<OPTION>OPCION 5
</SELECT>Escoja una opcin</TD>
<TR>
<TD>Comentarios<BR> personales:</TD>
<TD> <TEXTAREA NAME="coment" ROWS=2 COLS=48></TEXTAREA></TD>
<TR>
<TD><B>Pulse aqu:</B></TD>
<TD ALIGN=CENTER>
<INPUT TYPE="submit" VALUE="Enviar datos ">
<INPUT TYPE="reset" VALUE="Borrar los datos"></TD>
</TABLE>
</CENTER>
</FORM>
Descripcin
Tabulador horizontal (TAB)
Salto de lnea (LF)
Retorno de carro (CR)
Cerrar exclamacin
Dobles comillas
Signo de nmero
Dlar
Tanto por ciento
Ampersand
Apstrofe
Cerrar parntesis
Abrir parntesis
Asterisco
Signo ms
Coma
Cod. hexadecimal
%09
%0A
%0D
%21
%22
%23
%24
%25
%26
%27
%28
%29
%2A
%2B
%2C
.
/
:
;
<
=
>
?
@
[
\
]
^
_
`
{
|
}
~
-
.
/
:
;
<
=
>
?
@
[
\
]
^
_
`
{
|
}
~
 
¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬
­
®
¯
°
±
²
Guin
Punto
Barra de divisin
Dos puntos
Punto y coma
Menor
Igual
Mayor
Cerrar interrogacin
Arroba
Cerrar corchete (izquierdo)
Barra de divisin inversa
Abrir corchete
Circunflejo
Subrayado
Acento agudo
Abrir llave
Barra vertical
Cerrar llave
Tilde
Espacio sin separacin
Abrir exclamacin
Centavo
Libra Esterlina
Signo de divisa general
Yen
Barra vertical partida (pipe)
Seccin
Diresis
Copyright
Doa
Abrir comillas francesas
No (smbolo lgico)
Guin dbil
Registrado
Macrn
Grados
Ms-menos
Dos superndice
%2D
%2E
%2F
%3A
%3B
%3C
%3D
%3E
%3F
%40
%5B
%5C
%5D
%5E
%5F
%60
%7B
%7C
%7D
%7E
%A0
%A1
%A2
%A3
%A4
%A5
%A6
%A7
%A8
%A9
%AA
%AB
%AC
%AD
%AE
%AF
%B0
%B1
%B2
³
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Tres superndice
Acento agudo
Micro
Fin de prrafo
Punto medio
Cedilla
Uno superndice
Gnero masculino
Cerrar comillas francesas
Un cuarto
Un medio
Tres cuartos
Abrir interrogacin
A mayscula, acento grave
A mayscula, acento agudo
A mayscula, acento circunflejo
A mayscula, tilde
A mayscula, diresis
A mayscula, anillo
AE mayscula
C cedilla mayscula
E mayscula, acento grave
E mayscula, acento agudo
E mayscula, acento circunflejo
E mayscula, diresis
I mayscula, acento grave
I mayscula, acento agudo
I mayscula, acento circunflejo
I mayscula, diresis
Eth mayscula
Ee mayscula
O mayscula, acento grave
O mayscula, acento agudo
O mayscula, acento circunflejo
O mayscula, tilde
O mayscula, diresis
Signo de multiplicacin
O barrada mayscula
U mayscula, acento grave
%B3
%B4
%B5
%B6
%B7
%B8
%B9
%BA
%BB
%BC
%BD
%BE
%BF
%C0
%C1
%C2
%C3
%C4
%C5
%C6
%C7
%C8
%C9
%CA
%CB
%CC
%CD
%CE
%CF
%D0
%D1
%D2
%D3
%D4
%D5
%D6
%D7
%D8
%D9
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ
%DA
%DB
%DC
%DD
%DE
%EF
%E0
%E1
%E2
%E3
%E4
%E5
%E6
%E7
%E8
%E9
%EA
%EB
%EC
%ED
%EE
%EF
%F0
%F1
%F2
%F3
%F4
%F5
%F6
%F7
%F8
%F9
%FA
%FB
%FC
%FD
%FE
%FF
Se vera as:
Y se escribira; as:
<FRAMESET COLS=30%,20%,50%>
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
Ejemplo real
Se vera as:
Y se escribira as:
<FRAMESET ROWS=25%,25%,50%>
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
A
B
C
Ejemplo real
Un frame combinado de un rea vertical y dos horizontales
Se vera as:
Y se escribira as:
<FRAMESET COLS=20%,*>
<FRAME SRC="a.htm">
<FRAMESET ROWS=40%,*>
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
</FRAMESET>
B
C
Ejemplo real
Un frame combinado de dos reas horizontales, la de abajo dividida en dos verticales
Se vera as:
A
B
Y se escribira as:
<FRAMESET ROWS=50%,*>
<FRAME SRC="a.htm">
<FRAMESET COLS=50%,*>
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
</FRAMESET>
Ejemplo real
Algo parecido ocurre con las barras de scrolling. Estn regidas por
el atributo SCROLLING, que puede valer YES NO o AUTO. Por
defecto es AUTO. Con esta opcin el visualizador decide, en
funcin del contenido, si son necesarias las barras o no. Con YES las
pondr siempre, aunque no sean necesarias, y con NO no las pondr
nunca, aunque sean necesarias.
<FRAME SCROLLING=YES ....>
Un frame con dos reas verticales. Una normal, la otra con mrgenes forzados para
el texto (MARGINWIDTH MARGINHEIGHT)
Se vera as:
AAAA
AA
AA
Y se escribira as:
<FRAMESET COLS=50%,50%>
<FRAME SRC="a.htm">
<FRAME SRC="a.htm"
MARGINWIDTH=50
MARGINHEIGHT=50>
</FRAMESET>
Ejemplo real
Se vera as:
Y se escribira as:
<FRAMESET COLS=50%,50%>
<FRAME SRC="aa.htm">
<FRAME SRC="bb.htm"
NAME="VENTANA">
</FRAMESET>
Ejemplo real
Contenido
<A HREF="cc.htm"
TARGET="VENTANA">
aa.htm
<A HREF="cc.htm">
bb.htm Esto es "VENTANA"
<A HREF="bb.htm"
TARGET="VENTANA">
cc.htm
<A HREF="aa.htm">
<FRAMESET>
<FRAME SRC="aa.htm">
cruzado.htm <FRAME SRC="bb.htm"
NAME="VENTANA">
</FRAMESET>
Accin
Pone CC en el frame derecho
Trae CC
No hace nada
Pone BB en el frame derecho porque se llama
"VENTANA"
Trae AA
Pone AA en el frame izqdo.
Pone BB en el frame derecho y le
da como nombre "VENTANA"
-
<FRAME SRC="c.htm">
</FRAMESET>
Hasta aqu hemos visto cmo hacer que los frames reciban sus
contenidos siempre mediante links. No es la nica forma; tambin
pueden utilizarse formularios para esta tarea. Los formularios,
adems, nos pueden permitir definir ciertas selecciones previas
para que el contenido invocado reuna determinados requisitos, as
como elegir el frame de destino. Lo malo de esta tcnica es que
requiere escribir algo de JavaScript, lo que complica bastante la
cosa. Veamos un ejemplo de pgina con cuatro frames. Por ejemplo,
como este:
Arriba
B
C
Y se escribira as:
<FRAMESET ROWS=30%,*>
<FRAME SRC="fraarriba.htm"
NAME="arriba">
<FRAMESET COLS=33%,33%,*>
<FRAME SRC="a.htm"
NAME="izquierda">
<FRAME SRC="b.htm"
NAME="centro">
<FRAME SRC="c.htm"
NAME="derecha">
</FRAMESET>
</FRAMESET>
Ejemplo real
<TD ALIGN=CENTER>
<FORM>
<SELECT NAME="list">
<OPTION VALUE="a.htm" >Contenido A
<OPTION VALUE="b.htm" >Contenido B
<OPTION VALUE="c.htm" >Contenido C
</SELECT>
<BR>
<INPUT TYPE=button VALUE="Frame central" onClick=
"parent.centro.location.href=
this.form.list.options[this.form.list.selectedIndex].value">
</FORM>
</TD>
<TD ALIGN=CENTER>
<FORM>
<SELECT NAME="list">
<OPTION VALUE="a.htm" >Contenido A
<OPTION VALUE="b.htm" >Contenido B
<OPTION VALUE="c.htm" >Contenido C
</SELECT>
<BR>
<INPUT TYPE=button VALUE="Frame derecho" onClick=
"parent.derecha.location.href=
this.form.list.options[this.form.list.selectedIndex].value">
</FORM>
</TD></TR>
</TABLE>
</BODY>
</HTML>
Frames incrustados
</OBJECT>
Este ltimo no funciona bien con Opera ni con las ltimas versiones
de Mozilla.
Hasta aqu hemos visto cmo presentar un fichero multimedia con
el Media Player de Windows, pero solo uno. En efecto, qu hacer si
tenemos un fichero de gran tamao troceado en varias partes? O
simplemente, varios ficheros relacionados aunque no formen parte
de uno solo. Si el nmero 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 una
definicin de consola se puede ver o escuchar una serie de
ficheros; hablamos de los ficheros .asx
La particularidad reside en la extensin 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 pequeos ficheros
multimedia de formato .mid se escribe:
Fichero lista.asx
<ASX version = "3.0">
<ENTRY><REF HREF="minueto.mid"/></ENTRY>
<ENTRY><REF HREF="adagio.mid"/></ENTRY>
</ASX>
Un plugin universal?
Hay que tener en cuenta que para que un determinado fichero
multimedia, por ejemplo un pequeo mp3, pueda oirse en tu pgina
(oirse, no descargarse) intervendr una cadena de elementos
compuesta por el sistema operativo de la mquina (SO), el
navegador y los plugins que haya cargados, si es que hay alguno. Y
puede que te preguntes por qu tantos eslabones para algo tan
simple. Del primero, del SO, depender que por defecto haya
herramientas ya instaladas que permitan reproducir el fichero, lo
que evitara la necesidad de un plugin. Del segundo, el navegador,
depender que por defecto sea capaz de reproducir el fichero o en
su defecto, llamar al recurso de sistema necesario para ello. Y por
fin, si todo lo anterior falla, el navegador deber tener cargado el
plugin necesario, que no olvidemos que para cada navegador ser
diferente, an cuando el fichero a reproducir sea el mismo.
Y cmo programar la pgina para asegurarnos que el mayor nmero
posible de visitantes pueda oir nuestro fichero sin necesidad de
hacer nada? Pues no es nada fcil. Lo ideal sera disponer de algo
<trackList>
<track>
<location>test.mp3</location>
<creator>Jean-Pierre Claris</creator>
<album>Exitos de siempre</album>
<title>Plaisir d'amour</title>
<annotation>I love this song</annotation>
<duration>30000</duration>
<image>autor.jpg</image>
<info>Info de pruebas</info>
<link>http://fr.wikipedia.org/wiki/Plaisir_d%E2%80%99amour</link>
</track>
</trackList>
</playlist>
Texto en movimiento
Este es un nuevo elemento que slo funciona con las ltimas
versiones de los navegadores. Hasta su implementacin sus efectos
solamente podan conseguirse con JavaScript. La ventaja de
hacerlo con JavaScript es que siempre funciona, incluso con
navegadores antiguos.
Se trata del elemento <MARQUEE> </MARQUEE> que sirve
para hacer que el contenido de un bloque se desplace
horizontalmente a lo ancho del mismo. Adems de texto el bloque
puede contener tambin imgenes. Tiene muchas
parametrizaciones:
Por ejemplo:
Se escribe:
<CENTER><MARQUEE BGCOLOR="cyan" HEIGHT="40" WIDTH="50%"
DIRECTION="RIGHT" BEHAVIOR="ALTERNATE" SCROLLDELAY=400>
texto1 <IMG SRC="bolaazul.gif"> texto2 </MARQUEE></CENTER>
Canales RSS
Qu son y para qu sirven?
Los ficheros xml, al igual que los html, se pueden escribir con
cualquier editor de texto "transparente", es decir, sin formato ni
caracteres extraos a la tabla ASCII. Todo lo que no sea as habr
que codificarlo, tambin como en html, pero mucho ms estricto. Un
solo error en el fichero har que ste no funcione. Por tanto, es
buena idea pasarlo por un validador xml antes de ponerlo en su sitio
de servicio. En internet hay muchas pginas y programas de
validacin xml, y tambin se puede utilizar el servicio de validacin
de la W3C.
Este es un modelo de fichero xml para un RSS:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<rss version="0.91">
<channel>
<title>Canal RSS</title>
<link>http://miservidor.com</link>
<description>Guía para escribir documentos HTML</description>
<language>es-ES</language>
<image>
<title>Canal RSS</title>
<url>http://miservidor.com/milogo.gif</url>
<link>http://miservidor.com/</link>
<width>128</width>
<height>128</height>
</image>
<item>
<title>Noticia 1</title>
<link>http://miservidor.com/noticia1.htm</link>
<pubDate>Wed, 10 Sep 2010 00:00:00 GMT</pubDate>
<description> Descripción de la noticia 1 </description>
</item>
<item>
<title>Noticia 2</title>
<link>http:/miservidor.com/contenidos.asp?nivel=18&cont=567</link>
<pubDate>Tue, 21 Sep 2010 00:00:00 +0200</pubDate>
<description> Emoción en el Bol d&:#39;Or </description>
</item>
</channel>
</rss>
signos < y >, y algunos otros. Todo esto deber ir codificado como
en html, pero no todo se puede codificar igual. Se puede utilizar
' & " < > pero no es vlido á Para no
confundir cuales se pueden codificar como en html y cuales no, lo
mejor es utilizar el formato numrico en todos ellos: á =
& = &
En esta gua tienes la tabla con los cdigos de los caracteres.
Otra cosa que hay que controlar para evitar problemas de
validacin es el formato de las fechas para la etiqueta <pubDate>
que tiene que ser el definido en la norma RFC 822, como puedes ver
en el ejemplo.
Ultimas innovaciones
El HTML, como cualquier otro lenguaje, no est terminado ni lo
estar nunca. Da a da se le van implementando nuevas utilidades
que le hacen, si cabe, ms atractivo y prctico. Hay que distinguir
entre lo que son elementos "oficiales" del lenguaje, y las
implementaciones que los creadores de cada visualizador le van
aadiendo a sus respectivos programas. Buena muestra de ello son
los CGI y los applets, plug-ins y JavaScripts de Netscape y los
ActiveX de Microsoft.
No hay que confundir los applets con los plug-ins o los CGI. En la
versin 2.0, Netscape introdujo extensiones al lenguaje HTML para
permitir incorporar un programa escrito en Java a un documento
HTML, del mismo modo que se puede insertar, por ejemplo, una
imagen. A estos programas, se les denomina "applets". Son
programas diseados para un fin concreto dentro de la pgina, como
producir una animacin o filtrar la entrada de informacin en un
formulario. Los JavaScripts no son applets, no tienen la entidad de
autnticos programas, y sus acciones son ms limitadas al estar
restringido su radio de accin a la ventana del navegador. En
realidad, y aunque no forma parte del HTML oficial, podra
considerarse el java interpretado, como una extensin del HTML,
igual que las tablas, o cualquier otro elemento, aunque un poco ms
Estilos
Un nuevo estndar?
Ejemplo de estilo
2.- Por clase de estilo. Esta tcnica consiste en definir una clase,
que es un conjunto de propiedades de estilo agrupadas bajo un
nombre. La clase creada se invoca desde un elemento <span>. Por
ejemplo, para definir la clase prueba_cl:
<html>
<head><TITLE>Estilos</TITLE>
<style type="text/css">
.prueba_cl{ font-size:20px; font-family:Courier;
color:green;}
</style>
</head>
<body>
<span class="prueba_cl">Ejemplo de estilo</span>
</body>
</html>
Ejemplo de estilo
Como puedes ver, los dos ejemplos anteriores son casi iguales. A
simple vista solamente cambia el caracter que hay delante del
nombre prueba_, que es un punto para la clase y
unaalmohadilla para el identificador, pero internamente, la
diferencia estriba en que la clase puede ser utilizada por todos los
bloques de texto que se quiera (generalmente solo contiene
instrucciones de estilo), mientras que el identificador solamente se
puede utilizar una vez, ya que es capaz de crear un bloque y no
puede haber dos bloques con el mismo nombre.
Ejemplo de estilo
Como puedes ver, es lo mismo que se escribi en los ejemplos
anteriores, pero ahora, en lugar de un nombre inventado por el
usuario, se indica el nombre de un elemento HTML al que se quiere
dar estilo propio, en este caso toda la pgina: BODY. Por supuesto,
en el fichero se pueden incluir todos los elementos HTML que se
quiera. Tambin se pueden incluir en el fichero nombres que no
coinciden con elementos HTML, tal como se ha hecho en los
Se obtiene:
Negrita verde
Parrafo 1
Negrita rojo
Parrafo 2
Pero simplemente poniendo una coma entre P y B:
BODY {color:green}
P, B {color:red}
Se obtiene:
Negrita verde
Parrafo 1
Negrita rojo
Parrafo 2
En el primer caso, queda claro que los dos elementos <P> del fichero
html heredan el color verde de <BODY>, y al no haber ninguna coma
entre P y B en la hoja de estilo, se est indicando que el color rojo
es slo para el texto en negrita cuando forme parte de P, pero en
el segundo caso, con una coma separando P de B, se le indica que el
color rojo es para el texto de ambos elementos, P y B, siempre,
est en el prrafo que est, e incluso aunque no est en un prrafo,
como es el caso del texto "Negrita verde"
Unidades CSS
Reglas especiales
Otras reglas que pueden considerarse especiales son las que hacen
referencia a los pseudo-elementos. En realidad se trata de
elementos existentes, pero con especiales funcionalidades distintas
de las que normalmente tiene el elemento base. Se escriben
poniendo el elemento de que se trate seguido de dos puntos y el
parmetro que se quiera utilizar:
:first-line Permite actuar sobre la primera lnea de un prrafo.
:first-letter Lo mismo que el anterior pero actuando solamente
sobre la primera letra.
:before
:after con estos dos pseudo-elementos se puede
insertar un contenido fijo por defecto antes o despus de un
elemento cualquiera.
Veamos algunos ejemplos:
P:first-line { text-transform: uppercase }
cursor
w-resize
Valor porcentual No aplicable
Se aplica a
Todos
Se hereda?:
Si
El selector universal
{color: red;}
Texto o contenido
Tamao del bloque
Color del fondo del bloque
Bordes de bloque
Estilo de los bordes
Color de los bordes
Mrgenes de bloque
Espaciado interno del bloque
text-transform:capitalize;
text-align:left;
text-indent:30px;
}
Se obtiene:
Texto fuera de prrafo.
Segunda lnea fuera de prrafo.
Texto De Prrafo.
Segunda Lnea De Prrafo
Fjate en la gran diferencia de estilo que hay entre las dos
primeras lneas y las dos siguientes. Analicemos cmo funciona: Las
dos primeras lneas de texto, en color verde, tienen todos sus
valores por defecto, excepto el color que lo reciben de la
etiqueta BODY definida en la css. Las dos siguientes, en rojo,
reciben todas sus caractersticas de la etiquetaP, tambin definida
en la css. Como puedes ver, hay una gran cantidad de atributos que
actan sobre el estilo de ese texto.
color:red; Este ya lo conocemos. Define el color del texto. El
color deseado puede escribirse directamente, en ingls, o puede
utilizarse el sistema RGB en hexadecimal. Por ejemplo, este mismo
color rojo en RGB sera: #FF0000; Ciertos valores, como el rojo,
pueden escribirse de forma abreviada: #F00; Otra forma de
declarar el color es mediante la funcin rgb() que puede
parametrizarse en decimal o en tantos por ciento. He aqu un
ejemplo con las cuatro formas del color rojo:
color:
color:
color:
color:
#ff0000
#f00
rgb(255,0,0)
rgb(100%, 0%, 0%)
alguno de los siguientes valores absolutos: xx-large xlarge large medium small x-small xx-small.
font-family:Courier; Indica el nombre (o nombres) del tipo de
letra que se va a emplear. En el ejemplo se ha utilizado el tipo
"Courier", pero pueden escribirse varios separados por comas, lo
que indica al navegador que si no existe en la mquina el primer
tipo, utilice el segundo, y si tampoco, el tercero, etc. Por
ejemplo: font-family:Courier,Verdana,Arial;
Cuando definas tipos de letra, recuerda que muchos programas y
algunos drivers de impresora instalan sus propias fuentes en el
sistema sin avisarte, y puede que en tu mquina haya tipos que no
son estndar en Windows. No se deben utilizar tipos extraos que
difcilmente se encontrarn en las mquinas de los clientes, es
decir, el tipo de fuente indicado en la hoja simplemente le indica al
navegador qu fuente debe usar, NO se la sirve. En la versin 3 de
CSS parece que se podr indicar al cliente dnde obtener una
fuente que no tenga instalada.
font-weight:bold; Aqu se especifica el peso o grosor de la
fuente. Pueden emplearse literales como lighter, normal (por
defecto) o bold. Tambin se pueden utilizar nmeros
entre 100 y 900, escritos de 100 en 100 (no sirve 190, pero s
200). Los pesos no tienen los mismos resultados en todas las
mquinas, ya que depende mucho de la calidad de su pantalla, de su
resolucin, del navegador que emplea... En cualquier caso, no deben
hacerse combinaciones extraas, como definir un size muy pequeo
y darle peso 900, ya que lo nico que conseguirs es un borrn
perfectamente ilegible.
font-style:italic; Solamente tiene dos posibilidades: normal (por
defecto) o italic que es el empleado en el ejemplo que estamos
analizando, y que hace que el texto tenga cierta inclinacin.
line-height:30px; Sirve para establecer la distancia entre lneas
consecutivas de un mismo prrafo. Adems de en pxels o alguna de
las unidades de medida que ya conocemos, puede indicarse con un
simple nmero que viene a indicar, aproximadamente, cuantas
Declaracin
font-size
font-family
font-weight
font-style
Valor por
defecto
medium
Definido por el
usuario
normal
normal
Absoluto, relativo,
porcentaje,
unidad de tamao
Familia de fuente
Windows
normal, lighter,
bolder,
un valor entre 100
y 900
normal, bold,
italic
Valor
porcentual
Se calcula respecto al
padre
No aplicable
No aplicable
No aplicable
Se aplica a
Todos
Todos
Todos
Todos
Se hereda?
Valores
posibles
Valores
posibles
normal
texttextdecoration transform
text-align
textindent
wordspacing
letterspacing
whitespace
none
left
normal
normal
normal
normal,
inherit,
medida
normal,
pre,
nowrap,
prewrap,
pre-line,
inherit
none,
nmero,
underline,
longitud,
lineporcentaje,
through,
normal
blink
none
capitalize,
uppercase,
lowercase,
none,
inherit
left, right,
normal,
center,
longitud,
inherit,
justify,
porcentaje
medida
none
Se calcula
respecto
al ancho
No
No
No
del
aplicable aplicable aplicable
elemento
padre
Se calcula
respecto al No
Valor
porcentual tamao de aplicable
la fuente
No
aplicable
No
aplicable
Elementos
Se aplica a a nivel de Todos
bloque
Todos
Elementos Elementos
a nivel de a nivel de Todos
bloque
bloque
Todos
Todos
Se hereda? S
No
p :before{
content:"Por ejemplo:";
}
Con css se pueden definir los bordes de un bloque, que por defecto
son invisibles. Por tanto, lo primero que hay que definir es el estilo
del borde. Adems del estilo, se puede definir su color y grosor, y
todo ello puede hacerse globalmente, sobre los cuatro lados del
bloque, o cada uno por separado. Las unidades de medida y los
nombres o cdigos de colores que pueden utilizarse, son los mismos
que ya se han visto anteriormente para los textos. Para definir el
grosor de los bordes tenemos:
border-width:2px;
border-color:blue;
border-style:solid;
}
Se obtiene:
Texto fuera de prrafo.
Segunda lnea fuera de prrafo.
Texto De Prrafo.
Segunda Lnea De Prrafo
Y este sera un resumen de su utilizacin:
Declaracin
border-left-width
border-right-width
border-top-width
border-style
border-bottom-width
border-width
Unidad de longitud,
thin, medium, thick
none
border-color
border-left-color
border-right-color
border-top-color
border-bottom-color
none
No aplicable
Se aplica a
Todos
Todos
Todos
Se hereda?
No
No
No
En resumen:
Declaracin
margin
margin-left
margin-right
margin-top
margin-bottom
padding
padding-left
padding-right
padding-top
padding-bottom
Longitud, porcentaje
Valor porcentual Se calcula respecto al ancho del padre Se calcula respecto al ancho del padre
Se aplica a
Todos
Todos
Se hereda?
No
No
auto
min-width
max-width
height
min-height
max-height
Incierto
none
auto
none
defecto
Valores
posibles
Longitud,
porcentaje,
auto, inherit
Se calcula
respecto al
Valor
porcentual ancho del
padre
Se aplica a
Todos
Se hereda? No
Longitud,
porcentaje,
inherit
Longitud,
porcentaje,
none, inherit
Longitud,
porcentaje,
auto, inherit
Longitud,
porcentaje,
inherit
Longitud,
porcentaje,
none, inherit
Se calcula
respecto al
ancho del
padre
Se calcula
respecto al
ancho del
padre
Se calcula
Se calcula
Se calcula
respecto al
respecto al
respecto al
alto del padre
alto del padre alto del padre
o auto
Todos
Todos
Todos
Todos
Todos
No
No
No
No
No
Y este texto:
<P>Esto es un ejemplo de bloque de reducidas dimensiones que
ocupa solamente 100 x 100 pixels</P>
Dependiendo del navegador utilizado, esta sintaxis provocar varios
resultados:
Internet Explorer
Opera
Netscape/Mocilla
border:2px;
border-color:blue;
border-style:solid;
width:100px;
height:100px;
overflow: scroll
}
Se obtiene:
border-style:solid;
width:200px;
height:100px;
background-image: url(fondo.jpg);
background-attachment: fixed;
background-repeat: repeat;
}
Esto es un ejemplo de bloque de reducidas dimensiones que ocupa solamente 200 x 100 pixels con
fondo grfico.
Se obtiene:
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
position
Todos
Se hereda?:
No
Declaraciones
top
right
bottom
left
Bloques posicionados
Se hereda?:
No
display
Todos
Se hereda?:
No
visibility
hidden
inherit
collapse
Valor porcentual No aplicable
Se aplica a
Bloques
Se hereda?:
No
CSS + JavaScript
a {text-decoration: none;}
a:link {color: #FF0000;}
a:visited {color: #00FF00;}
a:hover {color: #FF00FF;}
a:active {color: #0000FF;}
Borde dobl
Solo lectura
Se escribe as:
<FORM METHOD="GET" ACTION="">
<INPUT TYPE="text" STYLE="background:yellow;color:red"
NAME="campo1"
VALUE="Borde simple">
<INPUT TYPE="text"
STYLE="border:double;background:yellow;color:blue" NAME="campo2"
VALUE="Borde doble">
<INPUT TYPE="text" STYLE="border:0;background:yellow;color:blue"
readonly NAME="campo3"
VALUE="Solo lectura sin borde">
<INPUT TYPE="button" STYLE="background:transparent;color:red"
VALUE="Botn transparente">
</FORM>
TYPE="text" NAME="campo1"
VALUE="Borde
<INPUT CLASS="controles2"
doble">
TYPE="text" NAME="campo2"VALUE="Borde
Se obtiene:
Tablas
empty-cells
bordercollapse
border-spacing
table-layout white-space
top
show
separate
00
auto
normal
Valores posibles
top
bottom
show
hide
inherit
separate
collapse
cualquier
unidad
de medida
auto
fixed
normal
pre
nowrap
Valor porcentual
No
aplicable
No
aplicable
No aplicable
No aplicable
No
aplicable
No
aplicable
Se aplica a
table
td th
Todos
Todos
table
Todos
Se hereda?:
No
Si
Si
Si
No
No
Declaracin
Valor por
defecto
Como puedes ver, hay una sombra debajo de la pgina. Esta sombra
est producida por el siguiente grfico.
font-weight: normal;
letter-spacing: 3px;
margin: 0px auto;
margin-bottom: 15px;
text-align: center;
}
#pie {
margin: 0 auto;
padding: 10px 0 10px 0;
color: #fff;
background: #333 url(pie.gif);
width: 622px;
clear: both;
text-align: center;
}
Tambin tiene una instruccin nueva: clear, que sirve para cerrar el float de los dos bloques del
contenedor. Sin ella el pie se superpondra a los dos bloques anteriores, en lugar de ir debajo del
contenedor. clear tiene un parmetro: both (ambos) ya que tenemos dos float definidos, uno a cada lado.
En el caso de que solamente hubiese uno, se indicara slo el que exista; left o right.
Para terminar la hoja de estilos ya solamente falta definir los estilos del contenido de
cada bloque.
Aqu puedes ver la hoja CSS terminada, aqu el cdigo XHTML del blog y aqu
el blog listo para funcionar.
Qu es el XHTML?
}
</SCRIPT>
<del>
<dir>
<font>
<frame>
<frameset>
<iframe>
<ins>
<isindex>
<map>
<menu>
<noframes>
<s>
<strike>
<tbody>
<tfoot>
<thead>
<u>
Contina la evolucin: el html5
Un poco de historia
Cmo empezar?
Lo que necesitamos.
En primer lugar
definiremos
como cliente la mquina
remota, incluido su
navegador, que se va a
dirigir a nuestro servidor
para, a travs de una
aplicacin, realizar una
transaccin cualquiera,
que deber ser
almacenada. La idea
dilogo, de forma que nadie pueda interferir lo que circula por ese
tnel. El problema de esta tcnica es que el cliente tiene que
instalarse una pequea aplicacin que permita establecer esa
conexin especial, y aunque no es muy complicado, para algunos
usuarios puede ser problemtico (como casi siempre que se espera
alguna accin del cliente). Adems requiere del servidor ms
recursos para mantener las conexiones activas.
"'" &
<HTML>
<HEAD><TITLE>Pruebas de Seguridad</TITLE></HEAD>
<BODY>
<FORM ACTION="seguridad.asp" METHOD="POST">
Usuario: <INPUT TYPE="text" NAME="usuario" SIZE="15" maxlength="15">
Clave: <INPUT TYPE="text" NAME="clave" SIZE="15" maxlength="15">
<INPUT TYPE="submit" NAME="enviar" VALUE="enviar">
</FORM>
</BODY>
</HTML>
</HTML>
Como puedes ver, ahora s se han incluido las comillas que indican
que los campos son alfanumricos, para evitar el desastre
provocado por el cero del ejemplo anterior; pero nuestro hacker
sabe lo que hace, y escribe en el formulario:
Usuario:
prueba
Clave:
'or 1=1 --
final de la inyeccin son los dos guiones -- que son el smbolo del
comentario para SQL Server, y que evitan que se produzca un error
de sintaxis al resultar un nmero impar de comillas en la consulta.
Esto no habra ocurrido si, simplemente, escribimos la consulta as:
SQL="SELECT clave FROM usuarios WHERE (usuario = '" &
Request.Form("usuario") & _
"') And (clave = '" & Request.Form("clave") & "')"
Qu es el ODBC?
Open Data Base Conectivity
En el cuadro que
aparece
seleccionar la
etiqueta System
DSN, ya que
el IDC slo
trabaja con este
tipo. Pulsar el
botn Add
Seleccion
ar el
controlad
or de
Access
en la
lista.
Pulsar el
botn Fin
alizar
Aqu es donde
vamos a crear
realmente el
origen de
datos de la
aplicacin.
Pulsar el
botn Options
>> para ver el
cuadro entero.
Analicemos
cada campo:
el
primero, Da
ta Source
Name, nos
pide el
nombre del
origen de
datos que
vamos a crear, y que ser el utilizado por la aplicacin. Se puede poner
cualquier nombre, sin espacios en blanco ni smbolos, slo letras y nmeros,
como en el ejemplo: prueba2.
Este nombre no tiene por qu ser el mismo que el de la base de datos que
hay vinculada a l. Al facilitar este nombre al IDC, el ODBC se encargar de
que la aplicacin "entienda" lo que dice la base de datos.
El siguiente campo, Description es un breve comentario del origen de datos,
si te es necesario, sino, puedes dejarlo vacio.
A continuacin hay cuatro botones que sirven para seleccionar, crear,
reparar o compactar una base de datos de Access. Como ya debes de
saber, coinciden con otras tantas herramientas que tiene el paquete de
diseo de Access. Utiliza el de seleccin y localiza y selecciona una DB que
ya tengas preparada para esta prueba.
El siguiente recuadro, System Database, contine dos
interruptores: None y Database, y un botn: System Database y sirven
para definir si la base de datos tiene permisos especiales de usuario o no.
Como tambin se supone que sabes, Access gestiona los permisos de usuario
en una base de datos especial llamada system.mdw que habra que definir
aqu, pulsando el botn System Database y seleccionando una system.mdw,
Pulsar el
botn Aceptar p
ara cerrar el
administrador
de orgenes de
datos. En el caso
de que haya que
cambiar alguna
cosa, se
selecciona el
origen de datos
que proceda y se
pulsa el
botn Configure.
Como ya
debes de
saber, Access
es un paquete
que permite
disear aplicaciones y que integra un motor de base de datos. Debe quedar
claro que al crear un origen de datos para ODBC, estamos creando un
acceso slo a datos, es decir si tenemos una aplicacin completa en un
fichero de Access, el ODBC solamente conectar las tablas de datos con la
aplicacin internet, no pudiendo utilizar la parte aplicacin para el IDC ni
ningn otro recurso del IIS o del PWS. Con la aplicacin escrita en Access
seguir siendo posible acceder a las tablas slo en modo local.
Por ltimo, tener presente que el motor de Access es un motor pensado
para uso personal, que soporta aceptablemente un nmero reducido de
usuarios. En internet no es fcil saber cuantos usuarios simultneos se
pueden conectar en un momento dado, y el rendimiento puede caer
peligrosamente. Es buena idea disear las aplicaciones en modo distribuido:
es decir, en un fichero se escribe la parte aplicacin (formularios, rutinas
de control, etc.) y las tablas se utilizan vinculadas a otro fichero que slo
contine los datos. Esto, adems de mejorar algo el rendimiento, nos permite
trabajar incluso en el diseo de la aplicacin local, aunque esten siendo
accedidas las tablas desde internet. Si se espera que el nmero de usuarios
pueda ser importante, se debe utilizar un servidor de bases de datos como
SQL Server, que puede soportar cientos de usuarios simultneos.
Paso 1.- En el
cuadro que
aparece,
seleccionar la
etiqueta Syste
m DSN, ya que
el IDC slo
trabaja con
este tipo de
controladores.
Pulsar el
botn Add
Paso
2.Selecci
onar el
control
ador de
SQL
Server
en la
lista.
Pulsar
el
botn F
inalizar
Paso
3.Aqu es
donde
vamos a
crear
realmen
te el
origen
de
datos
de la
aplicaci
n.
Analic
emos
cada campo: el primero, Name, nos pide el nombre del origen de datos que
vamos a crear, y que ser el utilizado por la aplicacin. Se puede poner
cualquier nombre, sin espacios en blanco ni smbolos, slo letras y nmeros,
como en el ejemplo: pruebas.
Este nombre no tiene por qu ser el mismo que el de la base de datos que
hay vinculada a l. Al facilitar este nombre al IDC, el ODBC se encargar
de que la aplicacin "entienda" lo que dice la base de datos.
El siguiente campo, Description es un breve comentario del origen de
datos, si te es necesario, sino, puedes dejarlo vacio.
Paso
4.-En
este
paso
definire
mos
cmo se
har la
verifica
cin del
login y
el
passwor
d al
conecta
r con
SQL
Server.
A continuacin pulsar el
botn Add/Modify para
que aparezca la
correspondiente lnea en
la ventana Current
Entries
De la misma forma, si
alguno de ellos cambia de
nombre o de IP, slo hay
que seleccionar la lnea
correspondiente y pulsar
de nuevo al
botn Add/Modify para
modificar lo que proceda.
Pulsar el botn Done para
concluir la configuracin del cliente SQL Server y pasar a la siguiente
pantalla del ODBC.
Paso
5.-En
el paso
4 se
defini
al
usuario
web pa
ra
utilizar
la base
de
datos
de la
aplicaci
n.
Pero,
que ocurrir si el usuario web tiene permiso para utilizar ms de una base de datos?
Tambin se supone que ya sabes que en SQL Server, cuando se da de alta un usuario, es
obligatorio asignarle una base de datos por defecto, y los administradores suelen asignar
la que normalmente tiene ms uso.
habr que definir en cada ODBC cual es la DB por defecto. Esto se hace
marcando la casilla Change the dafault data base to y escogiendo a
continuacin de la lista que hay debajo la que proceda.
Lo que aparece en esa lista s son nombres de bases de datos y no de
orgenes de datos definidos para ODBC, aunque en este caso coincidan. En
la imagen puedes ver cmo marcar el resto. Fjate que, en general, se suele
dejar a SQL Server utilizar los valores ANSI para casi todo. Procura crear
los ODBC siempre igual, te evitars problemas inesperados, y dudas del
tipo "..dnde estar fallando..?". Recuerda que SQL Server trabaja
internamente con el lenguaje SQL ANSI que incluye un gran nmero
de funciones de todo tipo y desystem procedures, o procedimientos de
sistema, autnticos programas escritos en SQL, y con los que se administra
el servirdor, que trabajan mal con datos que no sean compatibles ANSI.
Siempre que haya que hacer una traslacin que sea fuera de las tablas.
Paso
6.-El
primer
campo
de este
paso
sirve
para
definir
el
idioma
que
SQL
Server
utilizar
para
emitir
los mensajes de error cuando algo no funcione bien. Dado que no hay versin en espaol de
este producto, hay que dejarlo como est: (Default), es decir: ingls.
Los siguientes son algo parecido a los que hay en la primera pantalla del
paso 4: el primero permite al ODBC elegir el mtodo de traslacin; el
segundo indica que no se debe utilizar ningn mtodo de traslacin; el
tercero fuerza la conversin del juego de caracteres, pero en lugar de
ANSI a OEM que se haca en el paso 4, aqu es de OEM a ANSI; el cuarto
es para utilizar un conversor propio del ODBC, que hay de definir, y no el
de SQL Server.
Hay una gran diferencia entre estos sistemas de traslacin y los del paso
4: Aqu la traslacin se realizadespus de extraer el dato de la tabla y
antes de presentarlo en pantalla, es decir, que son traslaciones slo a
efectos de visualizacin y no afectan a los datos. En el paso 4 la traslacin
se hace antes de guardar el dato en la tabla, y s afectan a los datos.
Y por fin el ltimo control sirve para definir cmo se presentarn las
fechas, nmeros y monedas en pantalla: si en formato ANSI o segn lo
especificado en la configuracin regional de la mquina
Pulsar el botn Siguiente despus de haber marcado lo que proceda.
Paso
7.Aqu se
definen
los
fichero
s de
logins,
que son
unos
fichero
s de
texto
donde
SQL
Server
y el
ODBC van escribiendo todo lo que hacen, tanto si acaba bien como si no, y que son muy
tiles cuando hay problemas, ya que permiten rastrear todo los procesos. Conviene
mantener sus nombres, ya que son utilizados por algunas herramientas de estadisticas y
rastreadores de errores. Puede que sea necesario cambiar la unidad de disco si no te
queda mucho espacio en la unidad C (por defecto), ya que crecen continuamente, y
peridicamente se deben vaciar; la frecuencia depender lgicamente de la actividad del
servidor.
Si el origen de datos no
funciona desde aqu no
funcionar desde ninguna
parte. Si la aplicacin da
problemas, y este test funciona correctamente, el fallo hay que buscarlo en
la aplicacin. Si un origen de datos que funcionaba deja de hacerlo, el
problema puede estar en la red, o en el SQL Server. Revisar si el usuario
todavia es vlido para esa DB, y si lo es, si se mantienen los permisos que
tena. Si todo es correcto, pero sigue sin funcionar, lo mejor es borrarlo y
crear uno nuevo. Lo nico que se prueba desde aqu es si el ODBC puede
llegar a la DB con el usuario definido en modo lectura, no si hay datos en la
DB, o si se puede escribir en ella.
Ya tenemos
listo el ODBC.
Pulsar el
botn Aceptar
para cerrar el
administrador
de orgenes de
datos. En el
caso de que
haya que
cambiar alguna
cosa, se
selecciona el
origen de datos
que proceda y
se pulsa el
botn Configur
e.
Qu es el IDC?
El Internet Database Conector
El IDC tan slo tiene unos pocos comandos, muy sencillos de usar,
pero que sabiamente explotados, y aprovechando todos los recursos
del HTML, nos permitirn escribir aplicaciones internet, si no
sofisticadas, s prcticas.
Los elementos del IDC
Desde un formulario:
<FORM METHOD="POST" NAME="ARTICULOS"
ACTION="/aplicaciones/articulos.idc">
<INPUT TYPE="SUBMIT" VALUE="Ver articulos">
</FORM>
Directamente:
http://Mi_server.mi_empresa.mi_pais/aplicaciones/articulos.idc
Para poder dar formato a los datos devueltos por la instruccin
SQL del fichero articulos.idc, disponemos de varias palabras clave
que se usarn en el fichero plantillaarticulos.htx (para mayor
claridad se recomienda dar el mismo nombre base a los dos
ficheros, aunque puede utilizarse el que se quiera):
<%begindetail%>
<%enddetail%> indican el comienzo y el
final, respectivamente, de la descarga de todas las lneas que
devuelva la instruccin SQL contenida enarticulos.idc. Las
instrucciones html que se escriban entre estos dos elementos se
repetirn con cada lnea devuelta por la DB junto con los datos de
cada registro. En esencia es un bucle que se repetir tantas veces
como registros devuelva la instruccin SQL.
Tambin tenemos un elemento de decisin bien conocido de todos
los programadores:
<%if%> <%else%> <%endif%>
Teniendo el elemento if evidentemente, nos faltan los
operadores: EQ para el igual (=), LT para menor que (<), GT para
mayor que (>) y CONTAINS para evaluar si un valor est contenido,
en cualquier posicin, en otro. No se pueden utilizar los smbolos
directamente, hay que escribir como se ha indicado, EQ, etc.
Como puedes ver es bastante sencillo. He aqu un esquema de
funcionamiento:
ocultos.
Supongamos que queremos crear una pgina web
llamada articulos.htm que contiene un botn de formulario que al
ser pulsado nos va a mostrar, en otra pantalla, una lista de artculos
de ferretera procedente de una tabla. Por ejemplo:
<HTML>
<HEAD><TITLE>Ferreteria </TITLE></HEAD>
<BODY>
<CENTER>
<H3>La ferreteria virtual</H3>
<FORM ACTION="/aplicaciones/articulos.idc" METHOD="POST">
<INPUT TYPE="SUBMIT" VALUE="Pulse aqui para ver nuestros articulos">
</FORM>
</CENTER>
</BODY>
</HTML>
Nombre articulo
HERRAMIENTAS Martillo
HERRAMIENTAS Alicates
MATERIAL
Clavos
MATERIAL
Tornillos
Paso 3 bis.- Aqu haremos una segunda versin del fichero .htx para
que puedas ver como se utiliza el comando de decisin del IDC: if.
Como ejemplo haremos que los artculos del tipo "MATERIAL" se
Nombre articulo
HERRAMIENTAS Martillo
HERRAMIENTAS Alicates
MATERIAL
Clavos
MATERIAL
Tornillos
articulos.HTX
<HTML>
<HEAD><TITLE>Lista de articulos </TITLE></HEAD>
<BODY>
<CENTER>
<H3>La ferreteria virtual</H3>
<TABLE BORDER=1>
<TR><TH>Tipo articulo</TH><TH>Nombre articulo</TH></TR>
<%begindetail%>
<TR><TD><%tipo%></TD><TD><%nombre%></TD></TR>
<%enddetail%>
</TABLE>
</CENTER>
</BODY>
</HTML>
Resultado
La ferreteria virtual
Tipo articulo
Nombre articulo
HERRAMIENTAS Martillo
HERRAMIENTAS Alicates
MATERIAL
Clavos
MATERIAL
Tornillos
Ejemplo 2.- Peticin con una condicin de dos campos de una tabla a
partir de una eleccin en una lista desplegable construida con datos
de la misma tabla.
articulos1.IDC
Datasource: pruebas
Username: web
Password:
Translationfile: C:\aplicaciones\translator.txt
Template: articulos1.htx
SQLStatement:
+SELECT tipo
+ FROM articulos
+ GROUP BY tipo
articulos1.HTX
<HTML>
<HEAD><TITLE>Lista de tipos </TITLE></HEAD>
<BODY>
<CENTER>
<H3>La ferreteria virtual</H3>
<FORM ACTION=/aplicaciones/articulos2.idc" METHOD="POST">
<SELECT NAME="LISTA_TIPOS">
<%begindetail%>
<OPTION VALUE="<%tipo%>"> <%tipo%>
<%enddetail%>
</SELECT><BR>
<INPUT TYPE="SUBMIT" VALUE="Elija el tipo de articulo y pulse aqui">
</FORM>
</CENTER>
</BODY>
</HTML>
Resultado 1
La ferreteria virtual
articulos2.IDC
Datasource: pruebas
Username: web
Password:
Translationfile: C:\aplicaciones\translator.txt
Template: articulos2.htx
SQLStatement:
+SELECT tipo, nombre
+ FROM articulos
+ WHERE tipo ='<%LISTA_TIPOS%>'
articulos2.HTX
<HTML>
<HEAD><TITLE>Lista de articulos </TITLE></HEAD>
<BODY>
<CENTER>
<H3>La ferreteria virtual</H3>
<TABLE BORDER=1>
<TR><TH>Tipo articulo</TH><TH>Nombre articulo</TH></TR>
<%begindetail%>
<TR><TD><%tipo%></TD><TD><%nombre%></TD></TR>
<%enddetail%>
</TABLE>
</CENTER>
</BODY>
</HTML>
del resultado 1)
La ferreteria virtual
Tipo articulo Nombre articulo
MATERIAL Clavos
MATERIAL Tornillos
<INPUT
<INPUT
<INPUT
<INPUT
TYPE=TEXT
TYPE=TEXT
TYPE=TEXT
TYPE=TEXT
Resultado 1
La ferreteria virtual
Qu es el ASP?
Un poco de retrica.
Una pgina ASP se escribe igual que una HTML normal, y es muy
parecida a las escritas para el IDC, ya que las secuencias de
comandos se escriben entre los smbolos <% y %>pero dando a
los ficheros la extensin .asp
<%@ LANGUAGE="VBScript" %>
<HTML>
<HEAD><TITLE>Prueba de ASP</TITLE></HEAD>
<BODY>
Bienvenidos al ASP. Son las <% Response.Write( Time() ) %>
</BODY>
</HTML>
El cdigo de arriba es una sencilla muestra de ASP. Como puedes
ver, salvo la primera y la quinta lneas no tiene nada que no
conozcamos ya. Analicemos esas dos lneas:
La primera es la definicin del lenguaje de comandos que vamos a
utilizar, en este caso VBScript; la arroba que hay al principio (@)
indica que la pgina se debe ejecutar en el servidor y no en el
navegador, que slo debe recibir el resultado.
En la quinta lnea ya tenemos un objeto (Response -respuesta-) con
uno de sus mtodos (Write -escribir-). El objeto Response es el que
gestiona la salida para el navegador, y su mtodo Write el
encargado de escribir esa salida, dicho de otro modo, el
conjunto Response.Write() escribir en la pantalla del cliente el
resultado generado por los comandos ASP, en este caso la hora
proporcionada por la funcin Time()
Fjate en que el valor real de la quinta lnea es compuesto: por una
parte est la frase "Bienvenidos al ASP. Son las " y por otro una
secuencia de comandos que da la hora del servidor. El motor ASP se
encargar de ejecutar los comandos y componer el texto final con
las dos cosas antes de enviarlas al navegador del cliente.
Response.Write() es muy utilizado en ASP, ya que cualquier
variable, valor o cadena de texto tiene que ser visualizada mediante
este objeto, para abreviar se puede usar el signo igual (=) con el
mismo resultado. En nuestro ejemplo de la quinta lnea podra ser:
Bienvenidos al ASP. Son las <% = Time() %>
Response.Write() no slo muestra el resultado de funciones
como Time() (hora), Date() (fecha), o cualquier otra; podemos
escribir cualquier valor para que sea visualizado, como cadenas de
texto puras, cadenas concatenadas con constantes, funciones
anidadas, variables de sesin, variables de aplicacin, respuestas de
strings que es muy larga, para evitar que el editor tenga que hacer
scroll (desplazarse) por la derecha, cosa que dificulta despus la
lectura y revisin del cdigo escrito, se puede utilizar el carcter
de subrayado para indicar a ASP que la lnea que viene justo debajo
debe ser considerada como una misma lnea. As
<%
Response.Write("Este es un string de muestra que hay que
concatener con otro, pero es demasiado largo y " & _
"recurriremos al carcter _ para que resulte ms legible")
%>
Recuerda que entre la primera y la segunda lnea no puede haber
ninguna en blanco, ni tampoco un comentario; tienen que estar
juntas. Se puede utilizar el truncamiento cuantas veces sea
necesario. Como ya habrs visto, siempre que se utilizan strings
(cadenas de texto), hay que escribirlas entre comillas dobles ("). Si
se trata de nmeros no hay que escribirlos entrecomillados, y si se
trata de fechas, se escriben entre smbolos #. En el siguiente
ejemplo se representan un string, un nmero y una fecha, por ese
orden:
<%
Response.Write( "Esto es un texto" )
Response.Write( 50 )
Response.Write( #02/28/2000# )
%>
Y a propsito de las fechas, en ASP y VBScript, el nico formato
reconocido es INGLES-ESTADOS UNIDOS, sin tener en cuenta la
configuracin regional del usuario. Es decir, el formato que se
reconoce es mm/dd/aaaa. As en el ejemplo de arriba, tenemos el
da 28 de Febrero de 2000. Lo que obliga a realizar las
conversiones necesarias para el formato europeo de dd/mm/aaaa.
Un poco de programacin
Nociones de ASP
Algunos conceptos previos
</SCRIPT>
Como puedes ver, no tiene ms que cuatro rutinas que sirven para
detectar cuando est activa la aplicacin y cuando un usuario abre o
termina una sesin, que aunque no lo parezca, son cuatro sucesos
clave para la buena marcha del servidor. En efecto: el suceso (o
evento, es lo mismo) Application_OnStart, slo se disparar cuando
el primer usuario solicite una pgina contenida en el directorio
virtual de la aplicacin (uno cualquiera, no importa cual), y a
continuacin se dispara Session_OnStart. Cuando otros usuarios
soliciten otras pginas, o la misma, ya no se disparar el primer
evento, sino slo el Session_OnStart, que se activar tantas veces
como usuarios haya conectados a la aplicacin. Cuando un usuario
cierra la aplicacin voluntariamente, o bien transcurre un tiempo
predefinido sin hacer ninguna transaccin, se
disparar Session_OnEnd, y cuando se haya desconectado el ltimo
usuario, lo har Application_OnEnd.
Las pginas ASP exigen mucho ms trabajo al servidor, y es
fundamental conocer cuantas sesiones hay abiertas, ya que hay que
asignarles recursos de sistema, y estos recursos son finitos.
Adems de los recursos, como memoria, tiempo de proceso, etc.,
que se asigna a cada sesin, el servidor necesita tener cierta
informacin de cada cliente, para, de forma inequvoca, poder
asegurar que los datos que envia son los de ese cliente y no los de
otro cualquiera. Recuerda que aqu, normalmente, no estamos
enviando pginas de contenido esttico, en cuyo caso no importara
si se dialoga con un cliente u otro, ya que todos reciben lo mismo,
sino que se trata de un dilogo personalizado, y cada transaccin
termir en una base de datos.
Adems de controlar las conexiones, el fichero global.asa puede
utilizarse para generar variables de sesin o de aplicacin que sern
invocadas en diversos momentos del proceso. Por ejemplo, si
queremos mostrar un mensaje de advertencia a los usuarios del
navegador IE 5.0, sobre su prestacin de memorizar el contenido
Application
ASPError
Session
Request
Response
Server
ObjectContext
El objeto Application
El objeto Application sirve para compartir, almacenar y recibir
informacin en respuesta a las llamadas recibidas desde los clientes
de los usuarios de la aplicacin. Cualquier informacin que se
almacene en este objeto estar disponible para TODOS los
usuarios de la aplicacin.
El objeto Application tiene 2 colecciones, 4 mtodos y 2 eventos:
COLECCIONES
Application.Contents()
Puede obtenerse una lista completa mediente un bucle del tipo For
Each item in ... Next. Veamos como funciona:
<%
Application("Variable") = "Esto no es un objeto"
Set Application("Objeto") = Server.CreateObject("ADODB.Connection")
For Each Item in Application.Contents
If IsObject(Application.Contents(Item)) Then
Response.Write Item & " = Esto es un objeto.<BR>"
Else
Response.Write Item & " = " & Application.Contents(Item) &
"<BR>"
End If
Next
%>
METODOS
Application.Contents.Remove()
Versin 3 o superior.
Este mtodo se utiliza para eliminar un item especfico de la
coleccin Application.Contents. El item que se desea eliminar puede
referenciarse de dos maneras: por su nombre o por su nmero
dentro de la coleccin, teniendo presente que la numeracin
comienza en el 1. Si se referencia por su nombre, ste deber
escribirse entre comillas dobles("). Por ejemplo:
<%
Application("Variable") = "Esto no es un objeto"
Set Application("Objeto") = Server.CreateObject("ADODB.Connection")
Application.Contents.Remove(1)
Application.Contents.Remove("Variable")
For Each Item in Application.Contents
If IsObject(Application.Contents(Item)) Then
Response.Write Item & " = Esto es un objeto.<BR>"
Else
Response.Write Item & " = " & Application.Contents(Item) &
"<BR>"
End If
Next
%>
Versin 3 o superior.
Application.Lock
Application.Unlock
EVENTOS
Application_OnStart
Application_OnEnd
Como puedes ver, contiene cuatro rutinas que sirven para detectar
cuando est activa la aplicacin y cuando un usuario abre o termina
una sesin. El suceso (o evento, es lo mismo)Application_OnStart,
slo se disparar cuando el primer usuario solicite una pgina
contenida en el directorio virtual de la aplicacin, y a continuacin
se dispara Session_OnStart. Cuando otros usuarios soliciten otras
pginas, o la misma, ya no se disparar el primer evento, sino slo
el Session_OnStart, que se activar tantas veces como usuarios
haya conectados a la aplicacin. Cuando un usuario cierra la
aplicacin voluntariamente, o bien transcurre un tiempo predefinido
sin hacer ninguna transaccin, se dispararSession_OnEnd, y
cuando se haya desconectado el ltimo usuario, lo
har Application_OnEnd.
Dentro de las rutinas que controlan los eventos del objeto
Application, Application_OnStart y Application_OnEnd puede
programarse cualquier accin que convenga realizar en ese
momento. Por ejemplo, asignar valores fijos para toda la aplicacin,
declarar el texto de algunos mensajes en funcin de la fecha o la
hora, etc., etc... o simplemente no hacer nada.
El objeto ASPError
Version 3 o superior.
El objeto ASPError sirve para obtener informacin detallada de
una condicin de error producida durante la ejecucin de la
aplicacin. Esta informacin se obtiene de 9 propiedades de slo
lectura, a las que solamente es posible acceder a travs del
objeto Server y su mtodo GetLastError
El objeto ASPError tiene 9 propiedades que pueden verse as:
<%
Dim objErrorInfo
Set objErrorInfo = Server.GetLastError
Response.Write("ASPCode = " & objErrorInfo.ASPCode)
Response.Write("ASPDescription = " & objErrorInfo.ASPDescription)
Response.Write("Category = " & objErrorInfo.Category)
Response.Write("Column = " & objErrorInfo.Column)
Response.Write("Description = " & objErrorInfo.Description)
Response.Write("File =
Response.Write("Line =
Response.Write("Number
Response.Write("Source
%>
"
"
=
=
&
&
"
"
objErrorInfo.File)
objErrorInfo.Line)
& objErrorInfo.Number)
& objErrorInfo.Source)
El objeto Session
Cuando un usuario invoca por primera vez cualquiera de los ficheros
de una aplicacin, un objeto Session le es asignado
automticamente. Este objeto ser utilizado por la aplicacin para
almacenar, compartir y recibir informacin del usuario. A
diferencia del objeto Application, la informacin almacenada
en Session solamente estar disponible para el usuario que lo tenga
asignado. Por defecto, el objeto ser destruido despus de 20
minutos de inactividad, pero puede configurarse un tiempo
diferente, y es buena idea reducirlo si el servidor tiene mucha
carga, a fin de que libere los recursos asignados al usuario cuanto
antes, pero calculando cuidadosamente el tiempo que el usuario
puede necesitar para llevar a cabo sus transacciones. Si se acorta
en exceso, el servidor puede cerrar la sesin antes que el usuario
termine lo que est haciendo.
Puede ocurrir que no sea necesario establecer sesion con los
usuarios, por ejemplo, si el contenido de la pgina es esttico o no
precisa enviar cookies. Para evitar que ASP abra una sesion basta
con escribir en la primera lnea de la pgina lo siguiente: <%@
EnableSessionState=False%>
Versin 3 o superior.
Esta propiedad especifica al servidor que pgina de cdigo de
caracteres debe utilizar para mostrar las pginas ASP invocadas
desde el cliente. Por defecto, y si no se define otro valor para esta
Session.LCID
es
es
es
es
el
el
el
el
Session.SessionID
Session.Timeout
COLECCIONES
Session.Contents()
METODOS
Session.Abandon
Session.Contents.Remove()
Versin 3 o superior.
Este mtodo se utiliza para eliminar un item especfico de la
coleccin Session.Contents. El item que se desea eliminar puede
referenciarse de dos maneras: por su nombre o por su nmero
dentro de la coleccin, teniendo presente que la numeracin
comienza en el 1. Si se referencia por su nombre, ste deber
escribirse entre comillas dobles("). Por ejemplo:
<%
'---Se crean dos items
Session("Variable") = "Esto no es un objeto"
Set Session("Objeto") = Server.CreateObject("ADODB.Connection")
Session.Contents.Remove(1)
Session.Contents.Remove("Variable")
For Each Item in Session.Contents
If IsObject(Session.Contents(Item)) Then
Response.Write Item & " Esto es un objeto.<BR>"
Else
Response.Write Item & " = " & Session.Contents(Item) & "<BR>"
End If
Next
%>
Versin 3 o superior.
Como su nombre indica, este mtodo elimina TODOS los items de la
coleccin Session.Contents().
En este caso no hay que referencia ningun nombre ni nmero.
<%
Session.Contents.RemoveAll( )
%>
EVENTOS
Session_OnStart
Session_OnEnd
Como puedes ver, contiene cuatro rutinas que sirven para detectar
cuando est activa la aplicacin y cuando un usuario abre o termina
una sesin. El suceso (o evento, es lo mismo)Application_OnStart,
slo se disparar cuando el primer usuario solicite una pgina
contenida en el directorio virtual de la aplicacin, y a continuacin
se dispara Session_OnStart. Cuando otros usuarios soliciten otras
pginas, o la misma, ya no se disparar el primer evento, sino slo
el Session_OnStart, que se activar tantas veces como usuarios
haya conectados a la aplicacin. Cuando un usuario cierra la
aplicacin voluntariamente, o bien transcurre un tiempo predefinido
sin hacer ninguna transaccin, se dispararSession_OnEnd, y
cuando se haya desconectado el ltimo usuario, lo
har Application_OnEnd.
Dentro de las rutinas que controlan los eventos del objeto
Application, Application_OnStart y Application_OnEnd puede
programarse cualquier accin que convenga realizar en ese
momento. Por ejemplo, asignar valores fijos para toda la aplicacin,
declarar el texto de algunos mensajes en funcin de la fecha o la
hora, etc., etc... o simplemente no hacer nada.
Request
El objeto Request
En ingls, request significa pedir, solicitar. En efecto, la accin de
escribir una direccin cualquiera en la lnea de URL de tu
navegador, se traduce en solicitar un determinado fichero a un
servidor, o dicho en la jerga tcnica, se le hace un request al
servidor. El protocolo que utiliza el navegador (por defecto salvo
que se indique otro, como el FTP) para dialogar con un servidor web
es el llamado HTTP, que como habrs visto figura al principio de
todas las direcciones web. No es necesario escribir el protocolo en
los navegadores modernos, simplemente escribimos la direccin de
la pgina solicitada, y el navegador aade delante de la misma su
protocolo por defecto. Por ejemplo, si escribes:
sestud.uv.es/manual.esp/ el navegador
compone http://sestud.uv.es/manual.esp/
El objeto Request permite el acceso a toda la informacin que pasa
desde el navegador del cliente al servidor. Al recibir esta
informacin, es repartida y almacenada entre cinco colecciones.
Cada coleccin es similar en estructura a una tabla de datos
(tambin llamada matriz de datos o array). Los datos, una vez
cargados, pueden ser accedidos individualmente en cada coleccin a
travs de una nica clave asignada a cada item.
Todas las variables pueden ser accedidas directamente mediante
una llamada del tipo Request(variable) sin mencionar el nombre de
la coleccin. En este caso, el servidor web busca entre todas las
colecciones la clave pedida (variable), buscando por este orden:
QueryString, Form, Cookies, ClientCertificate y
ServerVariables que son las cinco colecciones que tiene el objeto.
El objeto Request tiene 1 propiedad, 5 colecciones y 1 mtodo:
PROPIEDADES
Request.TotalBytes
COLECCIONES
Request.ClientCertificate(clave)
Request.Cookies(clave)
Request.Form("Elemento o indice")[.Count]
'---Fichero link.htm
<HTML><HEAD> <TITLE>Prueba1 ASP</TITLE> </HEAD>
<BODY>
<FORM ACTION="prueba2.asp" METHOD="POST">
Nombre1:<INPUT TYPE="text" NAME="Nombre" VALUE="Juan" ><br>
Nombre2:<INPUT TYPE="text" NAME="Nombre" VALUE="Maria" ><br>
Nombre3:<INPUT TYPE="text" NAME="Nombre" VALUE="Pedro" ><br>
Ciudad:<INPUT TYPE="text" NAME="Ciudad" VALUE="Guadalajara" ><br>
Postal:<INPUT TYPE="text" NAME="Postal" VALUE="12345"
><br>
<INPUT TYPE="Submit" VALUE="Enviar">
</FORM>
</BODY>
</HTML>
Request.QueryString("Elemento o indice")[.Count]
'---Fichero prueba.asp
<HTML><HEAD> <TITLE>Prueba2 ASP</TITLE> </HEAD>
<BODY>
<%
Response.Write "Nmero de elementos: " & Request.QueryString.Count &
"<BR>"
Response.Write "Nombre: " & Request.QueryString("Nombre") & "<BR>"
Response.Write "Ciudad: " & Request.QueryString("Ciudad") & "<BR>"
Response.Write "Postal: " & Request.QueryString("Postal") & "<BR>"
Response.Write "<P>"
Response.Write "Nombre: " & Request.QueryString(1) & "<BR>"
Response.Write "Ciudad: " & Request.QueryString(2) & "<BR>"
Response.Write "Postal: " & Request.QueryString(3) & "<BR>"
%>
</BODY>
</HTML>
Request. ServerVariables("Variable")
Por ejemplo:
<%
Response.Write Request.ServerVariables("REMOTE_ADDR")
%>
METODOS
Request.BinaryRead(Count)
Este mtodo recupera los datos que han sido enviados al servidor
desde el cliente formando parte de un request HTTP POST (por
ejemplo, con un formulario).
El argumento Count es obligatorio. Antes de que el mtodo sea
ejecutado, Count contiene el nmero de bytes que tienen que ser
leidos. Despus de la ejecucin contiene el actual nmero de bytes
leidos. Se utiliza poco, y su principal uso es cuando se enva (upload)
un fichero, para comprobar que lleg completo.
Response
El objeto Response
(por defecto)
proxy
Response.Charset("String")
Y despus de escribir
<% Response.Charset("MS_Windows") %>
Contendra:
content-type: text/html; charset = MS_Windows
Response.ContentType("String")
<BODY>
<TABLE>
<TR><TD>Valor
<TD>Valor
</TR>
<TR><TD>Valor
<TD>Valor
</TR>
</TABLE>
</BODY>
</HTML>
de la celda A1</TD>
de la celda B1</TD>
de la celda A2</TD>
de la celda B2</TD>
Response.Expires
Response.ExpiresAbsolute
Response.Status = "Status"
He aqu un ejemplo:
<%@ LANGUAGE="VBScript" %>
<%
Response.Cookies("test").Expires = "31/05/05"
Response.Cookies("test")("item1") = "prueba"
Response.Cookies("test")("Contador") =
Request.Cookies("test")("Contador") + 1
%>
<HTML>
<HEAD><TITLE>pruebas cookies</TITLE></HEAD>
<BODY>
Contador: <% = Request.Cookies("test")("Contador") %><BR>
Cookie: <% = Request.Cookies("test") %>
</BODY>
</HTML>
Response.AppendToLog("String")
Response.BinaryWrite(Data)
'---Fichero formulario.htm
<HTML><HEAD> <TITLE>Prueba1 ASP</TITLE> </HEAD>
<BODY>
<FORM ACTION="prueba2.asp" METHOD="POST">
Nombre:<INPUT TYPE="text" NAME="Nombre" VALUE="Juan" ><br>
Ciudad:<INPUT TYPE="text" NAME="Ciudad" VALUE="Guadalajara" ><br>
Postal:<INPUT TYPE="text" NAME="Postal" VALUE="12345"
><br>
<INPUT TYPE="Submit" NAME="Boton" VALUE="Enviar">
</FORM>
</BODY>
</HTML>
Response.Clear
Response.End
Response.Flush
Response.Redirect(URL)
Response.Write(Valores)
Server
El objeto Server
METODOS
Server.CreateObject("ObjectID")
Server.Execute("Ruta")
Permite llamar desde una pgina ASP a otra pgina ASP. Cuando la
pgina llamada concluye su proceso, el control vuelve a la pgina
llamadora. Es un efecto parecido al que se consigue con los ficheros
de inclusin, ya explicados en otro punto. Bsicamente se diferencia
de los include en que no pasa a formar parte del mismo fichero en
el momento de ser procesado, sino que se ejecuta un segundo
fichero por separado y con otro nombre.
Server.GetLastError( )
Server.MapPath("Ruta")
ruta
ruta
ruta
ruta
de
de
de
de
fichero1.asp
fichero2.asp
fichero3.asp
fichero4.asp
es:
es:
es:
es:
D:\Inetpub\wwwroot\fichero1.asp
D:\Inetpub\wwwroot\asp\fichero2.asp
D:\Inetpub\wwwroot\asp\fichero3.asp
D:\Inetpub\wwwroot
Server.Transfer("Ruta")
Permite llamar desde una pgina ASP a otra pgina ASP. Cuando la
pgina llamada concluye su proceso, el control no vuelve a la pgina
llamadora, y concluye en la pgina llamada.
No confundir con el mtodo Response.Redirect que funciona de
modo similar, pero partiendo de otro objeto. El proceso de
transferencia de una pgina a otra es completo, incluyendo todos
los objetos y variables que hayan sido creados en la pgina
El mtodo Server.CreateObject
Server.CreateObject("ADODB.Connection")
Server.CreateObject("ADODB.RecordSet")
Response.Write(RS(i).Name)
Response.Write("</TH><TD>")
Response.Write(RS(i))
Response.Write("</TD></TR>")
Next
Response.Write("</TABLE>")
End if
'---Se cierran los objetos, en orden inverso a como se abrieron, y se
liberan los
'---recursos que el servidor les habia asignado, con la instruccin
Nothing
RS.Close
Set RS = Nothing
DB.Close
Set DB = Nothing
%>
12345678Z
Apellidos Garcia
Nombre Juan
Postal
12345
El mtodo Server.CreateObject
Server.CreateObject("Scripting.FileSystemObject")
Hasta aqu vers que podemos crear un fichero nuevo o leer uno ya
existente, pero, qu hacer si tenemos que anexar nuevas lneas a
un fichero que ya tiene contenidos? La solucin la tenemos en el
mtodo OpenAsTextStream, que proporciona las mismas
<%
TS.Close
Set TS = Nothing
%>
El mtodo Server.CreateObject
Server.CreateObject("ADODB.Stream")
title, etc. Si las tuviese el fichero extraido llegara con ellas y por
tanto inutilizado.
Una cosa que no debes olvidar es que el programa tenga permiso de
lectura en el directorio donde estn los ficheros.
El mtodo Server.CreateObject
Server.CreateObject("Scripting.FileSystemObject")
el objeto ObjectContext
Este objeto se utiliza para controlar las transacciones de datos que
se realizan en ASP a travs del MTS... Aunque puede que no sepas
lo que es el MTS ni una transaccin.
Como transaccin entenderemos cualquier movimiento de datos que
se produzca entre el servidor web y el cliente que solicita los
datos, entendiendo este movimiento como un conjunto. Si ste
METODOS
ObjectContext.SetComplete - ObjectContext.SetAbort
</BODY>
</HTML>
Sub OnTransactionAborted()
Response.Write "La transaccin ha abortado por exceso de tiempo en su
ejecucin."
End Sub
ObjectContext.OnTransactionCommit()
Un ejemplo completo
Sub OnTransactionAborted()
Response.Write "Transaccin abortada. No se encontraron registros"
End Sub
Sub OnTransactionCommit()
Response.Write "Transaccin realizada."
End Sub
12345678Z
Apellidos Garcia
Nombre Juan
Postal
12345
Constantes
Variables
Operadores
Instrucciones
Funciones
<HTML>
<HEAD><TITLE>Prueba de ASP</TITLE></HEAD>
<BODY>
Bienvenidos al ASP. Son las <% Call(Rutina_hora) %>
</BODY>
</HTML>
VBScript no aporta procedimientos Sub propios, que debern ser
creados por el usuario, pero si posee gran cantidad de
procedimientos Function intrnsecos que se vern en el apartado
"Funciones".
Procedimientos Sub
Un procedimiento Sub es una serie de comandos VBScript, escritos
entre una instruccin Sub y otra End Sub, que ejecutan acciones
pero no devuelven ningn valor, cosa que si hacen las funciones, que
en cambio, no ejecutan acciones. Como puedes ver en el ejemplo
anterior, el procedimiento Rutina_hora no devuelve valor alguno; se
limita a llamar al objeto Response de ASP para presentar en
pantalla un valor que no produce l mismo, sino la funcin Time().
Un procedimiento Sub puede tener argumentos, es decir, unos
valores o parmetros iniciales necesarios para ejecutar sus
instrucciones. Estos valores pueden proceder de constantes,
variables o expresiones que a su vez podran obtener los datos por
una llamada a otro procedimiento. Por ejemplo, imagina un
procedimiento que busca un registro en una base de datos;
lgicamente necesitara, por lo menos, un argumento con el
identificador del registro a buscar.
Los procedimientos Sub, de forma predeterminada, son pblicos si
no se indica lo contrario. Para cambiar eso se escribe la
instruccion Public o Private delante del nombre del procedimiento.
Un procedimiento pblico es visible a todos los otros
procedimientos en la secuencia de comandos. El valor de las
variables locales en un procedimiento Sub no se mantiene entre
llamadas al procedimiento.
Procedimientos Function
Un procedimiento Function, o simplemente funcin, es una serie de
comandos VBScript, escritos entre una instruccin Function y
otra End Function, que devuelven un valor.
Los procedimientos Function, igual que los Sub, de forma
predeterminada, son pblicos si no se indica lo contrario. Para
cambiar su alcance se escribe la instruccion Public o Privatedelante
del nombre del procedimiento. Un procedimiento pblico es visible a
todos los otros procedimientos en la secuencia de comandos. El
Constantes y variables...
...y algunas instrucciones
Se puede definir una constante como un nombre significativo que
contiene un valor, numrico, texto o de cualquier tipo, y que una vez
definida, no cambia. Las constantes puede ser intrnsecas, es decir
con nombres y valores preestablecidos en VBScript, como por
ejemplo vbCrLf cuyo valor es equivalente a Chr(13) & Chr(10), o lo
que es lo mismo, retorno de carro y avance de lnea. Tambin
tenemos las constantes definidas por el usuario, que son aquellas
que reciben el nombre y valor que el usuario decida. Por supuesto,
no puedes crear una constante con el mismo nombre de una
intrnseca, ni dos cualesquiera con el mismo nombre, aunque s con
el mismo valor. Por ejemplo:
<%
Const xxMiConstante = "Esto es un string constante"
Const xxDia = 28
Const xxFecha = #02-28-2000#
%>
...
...
ReDim MiVariable(4)
Mivariable(0)
Mivariable(1)
Mivariable(2)
Mivariable(3)
Mivariable(4)
%>
=
=
=
=
=
10
20
30
40
50
....
....
ReDim MiVariable(4, 4, 5) %>
Operadores aritmticos.
Operadores de comparacin.
Operadores lgicos.
expresin: -3.
Multiplicacin (*). Multiplica dos nmeros: 3*2 = 6 .
Divisin (/). Divide dos nmeros, obteniendo un cociente de coma
1 . Ejemplo B: (-1)-(-2) = 1 .
Concatenacin de cadenas (&). "A"&"B" = AB . Si alguno de los
Como puedes ver, si, y slo si, ambas expresiones se evalan como
True, el resultado es True. Si cualquiera de las expresiones es
False, el resultado es False.
Disyuncin lgica (Or). Establece una disyuncin lgica de dos
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es False.
Y por ltimo, y aunque solo sea para ver los que hay y sus smbolos,
he aqu los de comparacin, ya que todos tienen el mismo orden de
prioridad, por lo que se evalan en el orden en que hayan sido
escritos, de izquierda a derecha:
Igualdad (=)
Desigualdad (<>)
Instrucciones condicionales
Aqu comenzaremos a ver las instrucciones de VBScript, y lo
haremos por las que seguramente son las ms utilizadas de todas
ellas: las instrucciones condicionales. En efecto, raro es el
programa, por pequeo y simple que sea, que no contenga una o
varias instrucciones If.. Then.. Else, que traducido viene a ser
algo as: Si llueve Entonces haces esto Si nohaces esto otro. Es
como el interruptor elctrico de tu lmpara: si est abierto la luz
se apaga, y si est cerrado, se enciende. Y expresndolo en la jerga
que entienden los ordenadores, la primera parte de la instruccin
( If) lo que hace es evaluar si la expresin propuesta (en este caso
si llueve o no) devuelve True o False. Si... de nuevo aparecen los
operadores lgicos. En las instrucciones condicionales pueden
utilizarse todos los operadores lgicos que ya conocemos.
Instrucciones de bucle
Otro tipo de instrucciones, tambin muy utilizadas en
programacin, son las de repeticin o instrucciones de bucle. Como
su nombre indica, sirven para repetir un grupo de comandos
cualesquiera un nmero determinado de veces, formando un bucle.
Siempre que se programan instrucciones de bucle hay que
[Step] incremento
Next
Se obtiene:
12345
Instruccin On Error
Puede ocurrir que se produzca un error mientras se ejecuta un
programa. Si esto sucede, ASP emite un mensaje de error y la
ejecucin se detiene. En algunos casos el error puede no ser
inesperado, como por ejemplo, si el usuario no ha realizado una
accin necesaria para que el programa continue sin problemas. En
estos casos, puede utilizarse la instruccinOn Error Resume Next,
que hace que el programa continue con la siguiente instruccin y sin
emitir ningun mensaje de error.
No es buena idea abusar de esta instruccin. Su uso puede estar
justificado en casos muy especiales, pero un buen programa debe
tener prevista cualquier omisin o accin que el usuario pueda
realizar indebidamente, reportando el mensaje de aviso
correspondiente (no de error de sistema) y obligando a repetir los
pasos que sean necesarios. Evidentemente, lo que no puedes tener
previsto es un fallo general del servidor o de la red, pero ante este
tipo de problemas, no hay solucin.
Secante
Sec(X) = 1 / Cos(X)
Cosecante
Cosec(X) = 1 / Sin(X)
Cotangente
Cotan(X) = 1 / Tan(X)
Seno inverso
Coseno inverso
Secante inversa
Cosecante inversa
Cotangente inversa
Seno hiperblico
Coseno hiperblico
Tangente hiperblica
Secante hiperblica
Cosecante hiperblica
Cotangente hiperblica
Tangente hiperblica
inversa
HArcsec(X) = Log((Sqr(-X * X + 1) + 1) / X)
Cosecante hiperblica
inversa
Cotangente hiperblica
inversa
Sgn(numero)
Devuelve un entero que indica el signo de un nmero o de cualquier
expresin numrica. Sgn() puede devolver tres valores:
Si numero vale 0, devulve 0. Si es mayor que 0 devuelve 1 y si es
menor que 0 devuelve -1.
Round(valor[, posiciones_decimales])
Redondea el nmero contenido en valor, que es obligatorio, y que
debe ser un nmero o una expresin que devuelva un tipo numrico.
El argumento [, posiciones_decimales] es opcional. Indica cuntas
posiciones decimales a la derecha del punto se van a incluir en el
redondeo. Si se omite, la funcin Round() devuelve un entero.
Sqr(valor)
Devuelve la raiz cuadrada de valor, que es obligatorio, y que debe
ser un nmero o una expresin que devuelva un tipo numrico de
valor 0 o mayor que 0.
Log(valor)
Devuelve el logaritmo natural de valor, que es obligatorio, y que
debe ser un nmero o una expresin que devuelva un tipo numrico
mayor que 0. El logaritmo natural es el logaritmo en base e. El valor
de la constante e es aproximadamente 2.718282.
Utilizando Log() se pueden calcular logaritmos en base-n para
cualquier nmero x, dividiendo el logaritmo natural de x por el
logaritmo natural de n. Veamos un ejemplo de funcin para calcular
logaritmos en base 10:
Function Log10(X)
Log10 = Log(X) / Log(10)
End Function
Rnd devuelve un valor menor que 1 y mayor o igual que 0, por lo que
si se quieren obtener nmeros enteros mayores que 1 hay que hacer
algunas operaciones.
Por ejemplo, si se utiliza Rnd de forma simple:
<%
Randomize
For x = 0 To 5
Response.Write(Rnd() & "<BR>")
Next
%>
Se obtiene:
12345,1299
12345,130
,130
0,130
-0,130
(0,130)
FormatPercent(Expresin [, Decimales, [Ceros, [Negativos,
[Grupos]]]])
Es muy similar a la anterior. Sirve para dar formato a un nmero o
expresin numrica, y adems lo multiplica por 100, aadindole a la
derecha el signo del tanto por ciento (%). El resultado
de FormatPercent() NO es de tipo numrico. Tiene los mismos
parmetros que FormatNumber().
Por ejemplo, si se escribe:
<%
Response.Write(0012345.1299 & "<BR>")
Response.Write(FormatNumber(0012345.129999, 3, 0, 0, 0) & "<BR>")
Response.Write(FormatNumber(0.129999, 3, 0, 0, 0) & "<BR>")
Response.Write(FormatNumber(0.129999, 3, -1, 0, 0) & "<BR>")
Response.Write(FormatNumber(-0.129999, 3, -1, 0, 0) & "<BR>")
Response.Write(FormatNumber(-0.129999, 3, -1, -1, 0) & "<BR>")
%>
Se obtiene:
12345,129999
1234513,000%
13,000%
13,000%
-13,000%
(13,000%)
Asc(string)
Devuelve el cdigo numrico (ANSI) del primer carcter de la
cadena string, que por lo menos debe tener uno. En caso contrario
se produce un error. Por ejemplo para obtener el cdigo de la
letra A:
<%
Response.Write( Asc("A") )
%>
Date()
Devuelve la fecha del servidor con formato mes, dia y ao:
<%
Response.Write( Date() )
%>
12
2003
Y lo mismo tenemos para las horas. En el caso de escribir
directamente la hora, se deber hacer en la forma: "10:05:18"
Hour(una_hora) - Minute(una_hora) - Second(una_hora)
<%
Response.Write( Time() )
Response.Write(Hour(Time()) & "<BR>")
Response.Write(Minute(Time()) & "<BR>")
Response.Write(Second(Time()) & "<BR>")
%>
1
2
3
4
5
6
7
Domingo
Lunes
Martes
Mircoles
Jueves
Viernes
Sbado
Descripcin
Ao
Trimestre
Mes
Da del ao
Da
Da de la semana
Semana
Hora
Minuto
Segundo
29/02/04
Como puedes ver, no ha sumado de forma absoluta dos meses (es
decir, al menos 60 dias), pero ha dado un resultado correcto desde
el punto de vista del calendario, incluso siendo el 2004 bisiesto. Si
en lugar de sumar, queremos restar, solamente hay que dar los
valores de cuantos en negativo:
<%
Response.Write(DateAdd("m", -2, "30-12-03"))
%>
Se obtiene:
30/01/04
Con esto se puede conseguir no tener que revisar los programas
cada ao, siempre que los procedimientos sean en los mismos dias y
meses, claro. Tambin pueden sumarse intervalos de tiempo ms
pequeos. Por ejemplo, dos segundos:
<%
Response.Write(DateAdd("s", 2, "31/12/03 23:59:59"))
%>
Se obtiene:
1/01/04 0:00:01
DateDiff(intervalo, fecha1, fecha2)
Descripcin
Ao
Trimestre
Mes
Da del ao
Da
Da de la semana
Semana
Hora
Minuto
Segundo
Se obtiene:
-12
Las valores obtenidos no indican que necesariamente hayan
transcurridos estos intervalos de tiempo. Asi, si por ejemplo, se
compara el 31 de diciembre con el 1 de enero del ao
inmediatamente posterior, DateDiff() devuelve 1 aunque solamente
haya transcurrido un da.
DatePart(intervalo, fecha)
Se obtiene:
12
IsDate(expresin)
Evala si expresin puede ser convertida a fecha, o lo que es lo
mismo, si tiene un formato vlido para representar una fecha. Por
ejemplo:
<%
Response.Write(IsDate("31/12/03 23:59:59"))
%>
Se obtiene:
Verdadero
CDate(expresin)
Convierte expresin a tipo fecha. Es conveniente examinar primero
la expresin para asegurarse de que la conversin es posible. Por
ejemplo:
<%
Response.Write(CDate("31/12/03 23:59:59"))
%>
Se obtiene:
31/12/03 23:59:59
DateSerial(ao, mes, dia)
Se obtiene:
14:30:00
14:30:00
2:30:00
LastDay(mes, ao)
Sirve para obtener el nmero correspondiente al ltimo da de un
mes/ao dados. Por ejemplo:
<%
Response.Write(LastDay(2, 2004))
%>
Se obtiene:
29
Funciones matriciales
Una matriz (o array) puede considerarse como un conjunto de
elementos ordenados secuencialmente, y con el mismo tipo de
datos. Imagina los casilleros que tienen los hoteles para depositar
las llaves de los clientes, o ms tcnicamente, como una tabla de
Mivariable(3) = 40
Mivariable(4) = 50
%>
B = Filter(A, "AA")
For X = 0 TO Ubound(B)
Response.Write(B(X) & "-")
Next
%>
Se obtiene:
Esto ha sido escrito por VBScript desde HEAD
Esto ha sido escrito por VBScript desde BODY
Esto ha sido escrito por HTML.
Procedimientos y funciones
End function
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Call Mensaje()
Document.Write("Esto ha sido escrito por un
procedimiento de VBScript")
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>
Hola
ATENCIN: en este caso el texto que ha de escribir el
objeto Document.Write() no va entre comillas dobles, sino comillas
simples.
Dos funciones nuevas
Estos son los valores que pueden utilizarse para calcular la suma
de botones. Fjate en que hay cuatro grupos de valores. Solamente
debes elegir uno (o ninguno) de cada grupo, de lo contrario se
produce un error.
Constante
Valor Descripcin
vbOKOnly
vbOKCancel
vbAbortRetryIgnore
vbYesNoCancel
vbYesNo
vbRetryCancel
vbCritical
16
vbQuestion
32
vbExclamation
48
vbInformation
64
vbDefaultButton1
vbDefaultButton2
256
vbDefaultButton3
512
vbDefaultButton4
768
vbApplicationModal
vbSystemModal
4096
Valor
1
Botn
Aceptar
vbCancel
Cancelar
vbAbort
Anular
vbRetry
Reintentar
vbIgnore
Ignorar
vbYes
vbNo
No
("Mensaje",
("Mensaje",
("Mensaje",
("Mensaje",
vbExclamation, "Titulo")
vbCritical, "Titulo")
vbIinformation, "Titulo")
vbQuestion, "Titulo")
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Document.Write "El nombre de esta ventana es: " &
Name
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>
Parent
Self
Top
Location
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Status = "Esto es una prueba"
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>
Frames
History
Navigator
Document
MTODOS
Muestra un mensaje de alerta. Es parecido a la funcin
MsgBox(), pero a diferencia de sta, no se puede parametrizar ni
devuelve valores. Por ejemplo:
Alert
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Alert "Esto es una prueba"
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Prueba de mensaje</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<INPUT TYPE="Text" NAME="Campo1">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-SetTimeout "Formulario1.Campo1.value = Time()", 2000"
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>
Navigate
ejemplo:
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Navigate "http://sestud.uv.es/manual.esp"
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>
EVENTOS
Como su nombre indica, se produce cuando el IE carga una
pgina. Por ejemplo:
OnLoad
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
Document.Write "Prueba de evento OnLoad"
End Sub
-->
</SCRIPT>
</HEAD>
<BODY OnLoad="Prueba">
</BODY>
</HTML>
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
Navigate "http://sestud.uv.es/manual.esp"
End Sub
-->
</SCRIPT>
</HEAD>
<BODY OnUnload="Prueba">
De esta pgina no es fcil salir.
</BODY>
</HTML>
El objeto Document
ALinkColor
VLinkColor
BGColor
FGColor
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
Document.Write Document.Title
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="Prueba">
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
Document.Write Document.Cookie
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="VBScript">
<!-Document.Cookie= "Prueba de control de cookie"
-->
</SCRIPT>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="Prueba">
</FORM>
</BODY>
</HTML>
MTODOS
Como su nombre indica, escribe un string dado. Al escribir
con este mtodo, hay que tener cuidado en dnde se pone la
instruccin, ya que al escribir puede borrar otros contenidos de la
pgina. En el siguiente ejemplo, al cargar la pgina aparece un botn
llamado Prueba y debajo la frase Prueba de escritura 1. Al pulsar
el botn, ste desaparece y la frase Prueba de escritura 2 pasa a
ocupar su lugar, quedando como nico contenido de la pgina. Esto
significa que Write sobreescribe toda la pantalla. As:
Write
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Escritura
Document.Write "Prueba de escritura 2."
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="Escritura">
</FORM>
<SCRIPT LANGUAGE="VBScript">
<!-Document.Write "Prueba de escritura 1."
-->
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE="VBScript">
<!-Document.WriteLn="Prueba de escritura 1."
Document.WriteLn="Prueba de escritura 2."
-->
</SCRIPT>
</PRE>
</BODY>
</HTML>
Se obtiene:
Prueba de escritura 1.
Prueba de escritura 2.
Open
Close
Clear
El objeto Link
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
MsgBox "Prueba de evento"
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="http://sestud.uv.es/manual.esp/vbscript/vb15.htm"
OnClick="Prueba">Link</A>
</BODY>
</HTML>
El objeto Form
<FORM NAME="Formulario1"
ACTION="http://sestud.uv.es/manual.esp/"
METHOD="POST"
TARGET="MiVentana">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="Propiedades">
</FORM>
</BODY>
</HTML>
Next
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1" >
<INPUT TYPE="Text" NAME="Campo1">
<INPUT TYPE="Text" NAME="Campo2">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="Elementos">
</FORM>
</BODY>
</HTML>
MTODO
Submit
</BODY>
</HTML>
EVENTO
OnSubmit
Reset
Select
Submit Text
TextArea
k
OnFocus
OnFocu
s
s
k
k
OnBlur k
OnBlur
OnBlur OnFocu OnFocu OnChang OnFocu OnSelect
s
s
e
s
OnChang
e
OnBlur
OnSelect
OnChang
e
Eventos de ratn
Eventos de teclado
Eventos de enfoque
Eventos de formulario
JavaScript y Java
Un poco de historia.
Java
El lenguaje Java es, posiblemente, el que tienen mayor portabilidad,
lo que permite escribir programas capaces de ejecutarse en
cualquier plataforma, sin realizar apenas ningun cambio. Esta
portabilidad propici que el HTML implementase la posibilidad de
incrustar programas escritos en Java, que pueden funcionar de
forma independiente del resto de la pgina. Estos programas
autnomos reciben el nombre de APPLETS, y se integran en el
cdigo HTML mediante el elemento <APPLET>. Se utiliza as:
<BODY>
<APPLET CODE="AnimText.class" WIDTH=600 HEIGHT=40>
<PARAM NAME=text VALUE="Esto es una prueba de Applet Java">
<PARAM NAME=font VALUE="TimesRoman">
<PARAM NAME=type VALUE=1>
<PARAM NAME=fgcolor VALUE="yellow">
<PARAM NAME=min VALUE=12>
<PARAM NAME=max VALUE=36>
<PARAM NAME=naptime VALUE=100>
<PARAM NAME=align VALUE=left>
</APPLET>
..
..
..
</BODY>
JavaScript
Para embeber un JavaScript en una pgina HTML, se utiliza el
elemento <SCRIPT>. Este elemento, habitualmente, va dentro del
HEAD de la pgina, y no en el BODY.
Por ejemplo si escribes:
<HTML>
<HEAD>
<TITLE> Prueba</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-document.write("<CENTER><H3>Mi primer JavaScript</H3></CENTER>")
// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
</BODY>
</HTML>
Se obtiene:
Esto ha sido escrito por JavaScript desde HEAD
Esto ha sido escrito por JavaScript desde BODY
Esto ha sido escrito por HTML.
<HTML>
<HEAD><TITLE>Capturar evento de boton</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick=javascript:alert("Mi mensaje")>
</FORM>
</BODY>
</HTML>
function sumar(a, b) {
sumar = a + b
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
Se obtiene:
undefined
// -->
</SCRIPT>
</BODY>
</HTML>
<!-function sumar(a, b) {
return a + b
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
<SCRIPT LANGUAGE=JavaScript>
<!-document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
Operadores de JavaScript
Tipos de operadores
Aritmticos
Lgicos
De comparacin
Binarios
De asignacin
Otros
Operadores aritmticos
++B
B++
--B
B--
Si la Expresin 1
resultado es Null.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es Null.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es Null.
Como puedes ver, si, y slo si, ambas expresiones se evalan como
True, el resultado es True. Si cualquiera de las expresiones es
False, el resultado es False.
Disyuncin lgica || (Or). Establece una disyuncin lgica de dos
resultado es True.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es Null.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es Null.
Si la Expresin 1
resultado es Null.
Operadores de comparacin
15 | 9 = 15
(1111 OR
15 ^ 9 = 6
1001 = 1111)
15 =
1
1
1
1
9 =
1
0
0
1
-----------------------------False True True False
o lo que es igual,
0110
Descripcin
. [] ()
++ -- - ~ !
delete new typeof void
* / %
+ - +
<<
>>
< <=
>>>
> >=
Bit shifting
menor que, menor que o igual, mayor que, mayor que o igual
== != === !==
&
AND
XOR
OR
&&
AND logico
||
OR logico
?:
Condicional
Asignacin
Evaluacin mltiple
Instrucciones de JavaScript
if( condicion [else] [instrucciones]) Esta es sin duda
la instruccin ms utilizada en programacin. En efecto, raro es el
programa, por pequeo que sea, que no la contenga al menos una vez.
Su funcionamiento es muy simple: es como un interruptor. Evalua un
expresin y si el resultado es true realiza las acciones que tenga
programadas, y si es false realiza otras acciones alternativas, o no
hace nada, segn convenga. Por ejemplo:
var x = 2
if (x == 3) {
document.write("x vale 3")
}
Y se obtiene:
x no vale 3
Si la accin a realizar es breve, tambin puede escribirse en una
sola lnea:
var x = 2
if (x == 3) document.write("x vale 3")
< 3)
(x == 2) document.write("x vale 2")
(x == 1) document.write("x vale 1")
(x == 3) document.write("x vale 3")
(x == 4) document.write("x vale 4")
(x == 5) document.write("x vale 5")
Y se obtiene:
x vale 4
Cuando escribas anidamientos, recuerda que si las instrucciones a
realizar tienen ms de una lnea, hay que escribir las
correspondientes llaves { } para cada grupo de instrucciones en
cada if, tal como se ve en el primer y segundo ejemplos.
for() Esta instruccin crea un bucle, controlado por tres
expresiones separadas por ; , y seguidas de un bloque de otras
instrucciones escritas dentro de un par de llaves { }que se
ejecutarn con cada ciclo del bucle. La sintaxis es:
for([contador;] [condicion;] [incremento]) {
.....
instrucciones
....
}
La primera expresin de los argumentos, contador, define el
contador del bucle y lo inicializa. La segunda, condicion, es donde se
declara la condicin o condiciones que se tienen que cumplir para
que el bucle termine. El bucle seguir ejecutndose hasta que la
expresin devuelva true. Y por ltimo, incremento indica el
incremento que se aplicar al contador en cada paso. Por ejemplo:
for(var x = 0; x < 5; x++) {
document.write(x)
}
Se obtiene: 01234 Analicemos el ejemplo. La primera expresin
de los argumentos, crea e inicializa a cero el contador x: var x =
0;. La segunda establece que el bucle rodar mientras x sea menor
de 5: x < 5;. Y la tercera incrementa en 1 el contador con cada
ciclo del bucle: x++. Como ya se ha dicho en el apartado de los
operadores de JavaScript,x++ es equivalente a x = x+1
Se obtiene:
x = 1
x = 2
x = 3
y = " + y + "<br>")
Se obtiene:
x
x
x
x
=
=
=
=
1
2
4
5
y
y
y
y
=
=
=
=
1
3
7
12
"<br>")
Se obtiene:
x = 1
x = 2
Como puedes ver, solamente se han completado dos ciclos del bucle
de los cinco previstos. Estas dos instrucciones pueden emplearse de
la misma forma con la instruccin for().
this Es una palabra reservada que se utiliza para referirse al
objeto actual en el que se est ejecutando el cdigo. Sea por
ejemplo un formulario en el que el cliente debe escribir un valor, y
para comprobar que el valor es el correcto escribimos una funcin
de verificacin:
<HTML>
<HEAD> <TITLE>Pruebas JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function validar(numero) {
if (numero.indexOf("2") != -1)
return true;
else {
alert('No has escrito un 2');
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario"
METHOD="GET" ACTION " "
onSubmit="return validar(this.campo1.value)">
Escribe un 2: <INPUT NAME="campo1" TYPE="text"><BR>
<INPUT TYPE="submit" VALUE="Validar">
</FORM>
</BODY>
</HTML>
Como puedes ver, hay que hacer referencia del objeto Math en
todas las instrucciones. En cambio, si se emplea with, simplemente
se escribe:
var a, b, c
var r=10
with (Math) {
a = PI * r * r
b = r * cos(PI)
c = r * sin(PI/2)
}
Mi_array[1] = "B"
Mi_array[2] =
Esta sintaxis sirve tanto para mover datos al array como para
extraerlos si ya estaban almacenados.
El sistema de utilizar el ndice, permite recorrer rpidamente el
array con una instruccin de bucle for. Como ya se ha dicho, en
cada celda de un array se puede poner cualquier cosa, incluso otro
array. Esto permite crear arrays complejos de ms de una
dimensin, ya que JavaScript no tiene instrucciones para crear
arrays multidimensionales como VBScript. El siguiente ejemplo crea
un array de dos dimensiones utilizando instrucciones de bucle para
recorrer los dos arrays:
Mi_array = new Array(1)
for (i=0; i < 2; i++) {
Mi_array[i] = new Array(2)
for (j=0; j < 2; j++) {
Mi_array[i][j] = "["+i+","+j+"]"
}
}
for (i=0; i < 2; i++) {
resultado = "Linea "+i+":"
for (j=0; j < 2; j++) {
resultado += Mi_array[i][j]
}
document.write(resultado,"<p>")
}
Se obtiene: 100,A,B
reverse() Se utiliza para transponer los elementos de un array de
forma inversa, es decir que el primer elemento pasar a ser el
ltimo y viceversa. No es una ordenacin, simplemente cambian de
sitio.
Mi_array = new Array("B", 100, "A")
document.write(Mi_array.reverse())
Se obtiene: A,100,B
Boolean Este objeto sirve para convertir cualquier valor a
booleano, es decir, false o true. Por ejemplo.
Mi_booleano = new Boolean("mi_valor")
document.write(Mi_booleano)
Se obtiene: true
Si el argumento "mi_valor" es omitido o su valor es cero, null,
false o empty ("") el objeto devuelve false. Cualquier otro valor,
incluso la cadena "false" devuelve true.
Mtodos
Tiene los tres mtodos comunes de todos los objetos JavaScript.
Date Trabaja con fechas y horas. Por ejemplo:
Mi_fecha = new Date([argumentos])
document.write(Mi_fecha)
Si se omite argumentos se obtiene: Mon, 25 Apr 2005
11:43:55 GMT+0200.
Los argumentos son opcionales y sirven para inicializar el objeto. Si
se omiten se inicializa con la fecha y hora del sistema (cliente).
Tambin pueden escribirse de diversas formas:
setDate
setHours
setMinutes
setMonth
setSeconds
setTime
setYear
setFullYear
toGMTString
toLocaleString
UTC
Mtodos
Los tres comunes de los objetos JavaScript.
Math Este objeto se utiliza para trabajar con constantes y
funciones matemticas. Esto hay que hacerlo mediante sus
propiedades y mtodos. Por ejemplo, la propiedad PI:
document.write(Math.PI)
Se obtiene: 3.141592653589793
Las propiedades devuelven valores constantes:
NaN
NEGATIVE_INFINITY
PO
Mtodos
Los tres comunes.
String Prctico objeto para trabajar con cadenas. Tiene una
propiedad: length. Por ejemplo:
var Mi_cadena = new String("Esto es una prueba" )
document.write(Mi_cadena.length)
Se obtiene: 18 que como ya habrs supuesto es la longitud de la
cadena dada.
Mtodos
Adems de los tres comunes hay un gran nmero de ellos.
Utilizando el mismo texto del ejemplo anterior, tendremos:
document.write(cadena2)
parseInt("FXX123", 16)
parseInt("1111", 2)
parseInt("15*3", 10)
Como puedes ver, si se encuentra un caracter que no puede ser
considerado nmero en la base establecida, se ignorarn todos los
caracteres siguientes, y se devolver el entero obtenido hasta ese
punto. Si el primer caracter de la cadena no puede ser considerado
como nmero, la funcin devuelve NaN. No se evaluan expresiones
dentro de la cadena, pero s expresiones numricas sin formato de
cadena (en realidad tampoco sirven, pero JavaScript primero las
evalua y despus las convierte en cadena).
parseFloat(string) De forma similar a la anterior, esta
funcin analiza un string pero en lugar de devolver un entero
devuelve un decimal de coma flotante. Si el primer caracter de la
cadena no puede ser convertido a nmero, devolver NaN. Los tres
ejemplos siguientes devuelven 3.14:
parseFloat("3.14")
parseFloat("314e-2")
parseFloat("0.0314E+2")
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Abrir"
onClick="window.open('http://sestud.uv.es/manual.esp/',
'Prueba',
'top=100, left=100, width=300, height=300,
location=no, status=yes, ' +
'toolbar=no, menubar=no, scrollbars=no,
resizable=no')">
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD><TITLE>Objetos del navegador</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario">
<INPUT TYPE="Button" NAME="Boton" VALUE="Prueba"
onClick="alert('Esto es una prueba')">
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Prueba de mensaje</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="this.form.Campo1.value=confirm('Quieres
continuar?')">>
<INPUT TYPE="Text" NAME="Campo1">
</FORM>
</BODY>
</HTML>
if confirm('Quieres continuar?') {
this.form.Campo1.value='Ha pulsado Aceptar'}
else {
this.form.Campo1.value='Ha pulsado Cancelar'}
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="this.form.Campo1.value=prompt('Escribir
un valor', '')">>
<INPUT TYPE="Text" NAME="Campo1">
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
alert('Esto es una prueba')
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="setTimeout('mensaje()', 2000)">
</FORM>
</BODY>
</HTML>
eval()
scroll()
toString()
moveTo(x,y)
<HTML>
<HEAD>
<TITLE>Ventanas en movimiento</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Mover()
{
Ventana.moveBy(5,5);
i++;
if (i<20)
setTimeout('Mover()',100);
else
Ventana.close();
}
</SCRIPT>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
var
dimensiones="left=100,top=100,width=100,height=100";
var i=0;
Ventana = window.open("","",dimensiones);
Ventana.document.write("Ventanas en movimiento");
Ventana.moveTo(400,100);
Mover();
</script>
</BODY>
</HTML>
EVENTOS
Mientras estas navegando por el ciberespacio, en la ventana de tu
navegador van ocurriendo ciertos sucesos o eventos que pueden ser
capturados. Por ejemplo, cuando el navegador carga una pgina se
est produciendo un evento, cuando carga la siguiente se producen
dos: uno al descargar la antigua y otro al cargar la nueva, etc. Cada
objeto tiene sus propios eventos. Para poder capturar un evento es
necesario un manejador de eventos. El objeto window tiene los
siguientes manejadores de eventos:
Como su nombre indica, se produce cuando el navegador
carga una pgina. Por ejemplo:
onLoad
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
document.write('Prueba de evento onLoad')
}
</SCRIPT>
</HEAD>
<BODY onLoad="mensaje()">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function abrir() {
window.open('http://sestud.uv.es/manual.esp/')
}
</SCRIPT>
</HEAD>
<BODY onUnload="abrir()">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function abrir() {
window.open('http://sestud.uv.es/manual.esp/')
}
</SCRIPT>
</HEAD>
<BODY onFocus="abrir()">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
mensaje('Se ha producido un error de carga')
}
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="noexiste.gif" onError="mensaje()">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Prueba de status</TITLE>
</HEAD>
<BODY onLoad="window.status='Esto es una prueba de
status'">
</BODY>
</HTML>
Se obtiene:
Esto funciona con todos los navegadores, excepto Firefox.
Funciona igual que el anterior, pero es el valor por
defecto de la lnea de estado inmediatamente despus de cargar la
pgina.
defaulStatus
<HTML>
<HEAD>
<TITLE>Prueba de status</TITLE>
</HEAD>
<BODY onLoad="window.defaultStatus='Esto es una prueba de
status por defecto'">
</BODY>
</HTML>
parent
self
top
opener
closed
length
Ejemplos JavaScript
Un reloj en pantalla
Un calendario completo
Dar el nombre del mes
Una calculadora
Una agenda-calendario
Control de contenido de campos Sin envo.
Control de contenido de campos Envo final.
Texto que se desplaza en la ventana de estado
Texto que se desplaza en la ventana de estado
opcionalmente
Formulario con lista de seleccin sin botn de submit
Imprimir desde una imagen
Texto que sigue al puntero en forma de cola de cometa
Ventana de texto que limita la longitud de la lnea
Listado con puntero grfico
Muestra de cdigos de color
Link que se activa slo pasando el ratn por encima
Rotacin de textos en pantalla
Ver cdigo fuente de una pgina cualquiera
Un men mvil
Bloquear botn derecho del ratn
Bloquear botn derecho del ratn 2
Automatizar el marcado de opciones en formularios.
Impedir que se hagan dos selecciones en formularios.
Jugar al Tetris (Excelente!!)
Al abrir una nueva ventana, que ocupe toda la pantalla
Zoom de pgina
Juego de palabras
Enlaces a ficheros de sonido
Consola dinmica con varios ficheros multimedia
Consola de diapositivas con varios ficheros grficos. Pase
manual.
Consola de diapositivas con varios ficheros grficos. Pase
automtico.
Y aqu hay muchos ms (en ingls):
Dinamic drive
JavaScript Source