Está en la página 1de 4

DOCUMENTOS HTML HTML es el formato en el que se elaboran las pginas web.

Pueden crearse documentos HTML con cualquier tratamiento de textos y visualizarse posteriormente con un navegador de internet. Un documento en formato HTML puede incluir adems de texto e ilustraciones otros elementos dinmicos. En particular podemos incluir pequeos programas que realicen algn clculo y nos permitan resolver algunos problemas matemticos. Ese es nuestro propsito. Un documento HTML contiene junto al contenido visualizable ciertos elementos de control llamados etiquetas que aparecen entre los signos < > . CREACIN DE UN DOCUMENTO HTML Un programa de tratamiento de textos como Word oculta los elementos de control y aade otros por su cuenta. Por ello es preferible utilizar un procesador de textos simple como el Bloc de notas. Para hacerlo pulsa el botn Inicio, elige la opcin Ejecutar y escribe Notepad. Vamos a crear un primer documento simple. Para empezar introduce lo siguiente <html> <head> <title>prueba</title> </head> <body> Hola. Esto es un ejemplo de documento HTML. </body> </html> La nica lnea que veremos ser Hola. Esto es..... .El resto son elementos de control. Observa la estructura del documento y repara en los siguientes aspectos: Todo documento HTML debe empezar por <html> y acabar con </html>. El documento tiene dos partes: Cabecera (entre <head> y </head>): Donde se incluye el ttulo del documento (entre <title> y </title>). Ms adelante incluiremos otros elementos como definiciones de funciones a utilizar. Cuerpo (entre <body> y </body>): Donde se incluye el texto y otros elementos que constituyen el contenido real del documento. No incluyas saltos de lnea o formatos (tipos de letra, tamao, negrita...) porque en html precisan sus cdigos especiales. Los saltos de lnea y sangrados no tienen ningn efecto pero ayudan a introducir el documento y facilitan su modificacin. Guarda el archivo creado en formato texto y con extensin .htm. Para ello abre el men Archivo y elige la opcin Guardar como... (evita Guardar y el icono correspondiente de la barra de herramientas para poder especificar el formato). Asegrate que el apartado del tipo de archivo figura Documentos de texto. En el campo Nombre del archivo introduce prueba.htm. La extensin .htm o .html es necesaria para que se interprete como un documento en lenguaje HTML. Antes de abandonar vuelve a guardarlo con el nombre plantilla (sin extensin htm). No ser visualizable en un navegador pero servir como plantilla para futuras modificaciones. Tras cerrar el bloc de notas localiza el archivo prueba y brelo con un doble clic. Observa que se visualiza con el navegador (Explorer o similar). Tambin puedes abrirlo con Word pero no podrs incluir ciertos elementos. Accede al Bloc de notas (notepad) y abre el archivo prueba.htm. Modifica <body> para incluir un color de fondo (background). Para ello escribe <body bgcolor=cyan> y gurdalo de nuevo. Comprueba el efecto.

JAVASCRIPT JavaScript es la forma ms sencilla de introducir pequeos programas en una pgina HTLM. Sin las dificultades de un lenguaje de programacin como Java podemos incorporar en el cdigo de una pgina HTLM secuencias de comandos que realicen tareas auxiliares. La secuencia a introducir tiene la forma siguiente: <SCRIPT LANGUAJE="JavaScript"> ..................... ..................... ..................... </SCRIPT> En el cuerpo de la estructura anterior podemos definir variables y funciones que se ejecuten o muestren resultados en la forma que se determine. Por ejemplo para hallar el rea de un tringulo podemos incorporar la siguiente secuencia en la cabecera (entre <head> y </head>)de la pgina: <SCRIPT LANGUAJE="JavaScript"> function area(base,altura) { return base*altura/2 } </SCRIPT> Para que mostrara un resultado incluiremos en el cuerpo de la pgina (entre <body> y </body>) otra secuencia javascript como: <SCRIPT LANGUAJE="JavaScript"> document.write("el rea es "+ area(3,7)) </SCRIPT> CREACIN DE FORMULARIOS Entre los elementos que podemos incluir en un documento HTML estn los formularios o tablas con campos para introducir datos o visualizar resultados, botones para realizar acciones, etc. Un formulario se define entre los cdigos <form> y </form>. Puede incluir campos para introducir datos con el cdigo INPUT TYPE. Observa el siguiente ejemplo: <form name="triangulo"> base <input type="text" name="b" > altura <input type="text" name="h"> area del tringulo=<input type="text" name="s"> <input type="button" value="Hallar rea" OnClick=area(b,h)> </form> NOTA: Puedes Copiar los ejemplos propuestos aqu y Pegarlos en un documento nuevo del Bloc de notas.

UN EJEMPLO: REA DE UN TRINGULO. Crea ( con el Bloc de notas Notepad ) el siguiente documento: <html> <head> <title>triangulo</title> <script languaje="JavaScript"> function area() { b=document.datos.b.value; h=document.datos.h.value; document.datos.s.value=b*h/2; } </script> </head> <body bgcolor=cyan> <form name="datos"> base<input type="text" name="b">altura<input type="text" name="h"><BR> area=<input type="text" name="s"> <input type="button" value="Hallar rea" OnClick="area()"> </form> </body> </html> Descripcin: En la cabecera (head) se ha incluido una funcin area(). No necesita argumentos pues toma los datos base y altura del formulario datos y escribe el resultado en el campo s del mismo formulario. Observa que la referencia document.datos.b significa que la base figura en el campo b del formulario datos del presente document. Se aade .value para especificar que asignamos el valor de ese campo. La construccin de la funcin debe incluirse entre { y } . Cada instruccin debe finalizar con ; . El cdigo <BR> se aade para provocar un salto de lnea. Es evidente que el clculo del rea de un tringulo poda obtenerse con un documento ms simple o ms eficiente, pero este ejemplo puede adoptarse como plantilla para futuros ejemplos. Por ello es conviente que lo guardes como plantilla.txt y como area.htm. Esta ltima versin puedes comprobarla con un navegador. Al hacerlo aparecer en pantalla el formulario donde debes introducir los valores de la base y la altura; al pulsar el botn Hallar rea aparecer el resultado en el campo area. OBSERVACIN: Al intentar guardar el documento en un procesador de textos como Word puede aparecer la opcin de hacerlo en formato HTML. Esta opcin est prevista para introducir exclusivamente el contenido textual y el tratamiento de textos se ocupa de aadir automticamente las etiquetas. Es preferible no utilizar esta opcin porque pretendemos incluir otros elementos no textuales (un formulario y un programa en JavaScript) que no seran bien interpretados. A cambio deberemos introducir manualmente las etiquetas. Por tanto elegiremos el formato de texto normal y aadiremos la terminacin .html o .htm al nombre del archivo para que sea interpretado como un documento HTML.

OTRO EJEMPLO: CALCULADORA DE EXPRESIONES. Elabora con el Bloc de notas el siguiente documento y gurdalo en formato texto con nombre calculadora.htm <html> <head> <title>calculador</title> <script > function computar(f) { var variable=document.datos.a.value x=parseFloat(variable) f.result.value=eval(f.expr.value); } </script> </head> <body bgcolor=cyan> <form name=datos> variable x:<input type="text" name="a"><BR> </form> <form name=expresion> expresin a evaluar:<BR><input type="text" name="expr"size=75><BR> <input type="button" value="Calcular" OnClick="computar(expresion)"><BR> resultado:<input type="text" name="result"> </form> </body> </html> Descripcin: En el formulario expresion se puede incluir una expresin como 3+5, (2+7)/3 , etc. Al pulsar el botn Calcular se efectuan las operaciones pues la funcin computar aplica eval (es decir evaluar) al valor del campo expr del formulario f ( en este caso formulario expresion ). Se aade un formulario datos para definir una variable x y poder incluir expresiones en x como (3*x-5)/ (x+1). Se ha especificado parseFloat para indicar que x es un nmero en coma flotante y no un texto. De esta forma si x=3, 2+x se interpreta como 5 y no como 23. En la expresin se pueden incluir funciones como seno, abs, etc pero debe anteponerse el prefijo Math para que se interpreten como objetos matemticos. A continuacin se muestra una lista de funciones y constantes posibles: Math.E Math.sin(x) Math.asin(x) Math.pow(x,y) Math.abs(x) Math.round(x) de x,y,... Math.floor(x) x,y,... Math.ceil(x) nmero e Math.PI (3,1415...) seno Math.cos(x) coseno arco seno Math.acos arco coseno potencia xy Math.exp(x) ex valor absoluto redondeo al entero ms cercano redondeo al entero inferior redondeo al entero superior Math.sqrt(x) raz cuadrada Math.tan(x) tangente Math.atan(x) arco tangente Math.log(x) logartmo Math.random(x) nmero aleatorio Math.max(x,y,...) mximo Math.min(x,y,...) mnimo de

Prubalo con varios valores de x y expresiones como x*Math.PI/180 , Math.sqrt(x*x-2*x+1), etc NOTA: No se pretende dominar JavaScript sino elaborar documentos sencillos que ayuden a ilustrar y/o comprender cuestiones de Matemticas.

También podría gustarte