Taller
1)
Formularios en html 4.0
2)
Formularios es html 5.0
3)
Etiquetas en input typem html 4.0
4)
Etiquetas en input typem html 5.0
Lista
Tipos de letras
Botones de radio
Tipos de botones
JavaScript
a)
Definicion
b) Denominación de variables
c) Funciones
d) funciones con parámetros
e) Formas de uso en
JavaScript
Desarrollo
1 Un formulario HTML es una
sección de un documento que contiene contenido normal, código, elementos
especiales llamados controles (casillas de verificación (checkboxes),
radiobotones (radio buttons), menúes, etc.), y rótulos (labels) en esos
controles. Los usuarios normalmente "completan" un formulario
modificando sus controles (introduciendo texto, seleccionando objetos de un
menú, etc.), antes de enviar el formulario a un agente para que lo procese
(p.ej., a un servidor web, a un servidor de correo, etc.)
Aquí se muestra un ejemplo de
un formulario simple que incluye rótulos, radiobotones y botones para
reinicializar el formulario o para enviarlo:
<FORM
action="http://algunsitio.com/prog/usuarionuevo"
method="post">
<P>
<LABEL
for="nombre">Nombre: </LABEL>
<INPUT type="text" id="nombre"><BR>
<LABEL
for="apellido">Apellido: </LABEL>
<INPUT type="text" id="apellido"><BR>
<LABEL
for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT
type="radio" name="sexo" value="Varón">
Varón<BR>
<INPUT
type="radio" name="sexo" value="Mujer">
Mujer<BR>
<INPUT
type="submit" value="Enviar"> <INPUT
type="reset">
</P>
</FORM>
2 Los formularios pueden ubicarse en una página
usando tablas (algo recomendable para una presentación profesional). Este es un
ejemplo que resume los puntos precedentes, mostrándole cómo disponer un formulario
en una página Web mediante una tabla:
<FORM
method=post action="cgi-bin/script.pl">
Registro de un usuario
<TABLE BORDER=0>
<TR>
<TD>Apellido</TD>
<TD>
<INPUT type=text
name="apellido">
</TD>
</TR>
<TR>
<TD>Nombre</TD>
<TD>
<INPUT type=text
name="nombre">
</TD>
</TR>
<TR>
<TD>Género</TD>
<TD>
Hombre:
Mujer:
<INPUT type=radio name="género" value="M">
<br>Mujer: <INPUT
type=radio name="género" value="F">
</TD>
</TR>
<TR>
<TD>Ocupación</TD>
<TD>
<SELECT
name="ocupación">
<OPTION
VALUE="profesor">Profesor</OPTION>
<OPTION
VALUE="estudiante">Estudiante</OPTION>
<OPTION
VALUE="ingeniero">Ingeniero</OPTION>
<OPTION
VALUE="jubilado">Jubilado</OPTION>
<OPTION
VALUE="otro">Otro</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Comentarios</TD>
<TD>
<TEXTAREA
rows="3" name="comentarios">
Escriba
aquí sus comentarios</TEXTAREA>
Enviar
</TD>
</TR>
<TR>
<TD
COLSPAN=2>
<INPUT type="submit"
value="Enviar">
</TD>
</TR>
</TABLE>
</FORM>
3 <INPUT TYPE="tipo" NAME="nombre" VALUE="valor" SIZE="tamaño"
MAXLENGTH="max_longitud" CHECKED>
<html>...</html>
Es
la etiqueta principal de HTML. Dentro de ella está todo el contenido dela
página web. <head>...</head>
Es
el encabezado de la web. En ella aparece el título de la página y las
propiedades
de
la página.
<body>...</body>
Es
el cuerpo de la página web. Es donde está todo lo que aparecera en la web.
<tittle>...</tittle> Dentro de
ella se introduce el título de la página web. Está situada dentro del
encabezado.
<center>...</center> Permite
centrar todo el texto del párrafo.
<font color...>...</font> Sirve para escoger el color de la letra.
4 <input type=“search” name=“busqueda”>: Al ingresar texto en el campo, el navegador
muestra una cruz a la derecha para borrar todo lo que hemos escrito.
<input type=“tel” name=“telefono”>: A la hora de completar un input de tipo tel,
un smartphone como el iPhone convierte su teclado a números de teléfono
<input type=“url” name=“url”>: En este campo, el teclado del iPhone es qwerty
pero en modo “url”, ya que ofrece teclas fundamentales para escribir una
dirección web como son el punto, la barra “/” o la tecla “.com”.
<input type=“email” name=“correo”>: Esta vez, el teclado del smartphone es qwerty
pero también tenemos la tecla “@”.
<input type=“datetime” name=“fechahora”>: Si estás viendo esta página con la última
versión de Opera, al cliquear en el campo verás un calendario muy completo que
el navegador dispone de forma totalmente nativa
<input type="month"
name="mes">: El calendario aquí permite seleccionar el número de mes.
<input type="week"
name="semana">: El calendario que nos muestra Opera para el campo de semana, nos
permite elegir el número de semana del año.
<input type="time"
name="hora">: Aquí el input está con el formato de hora, con los dos puntos “:”
correspondientes y las flechas para subir o bajar el horario.
<input type="color"
name="color">: Si estás viendo este campo con la última versión de
Opera te vas a sorprender, porque el navegador presenta de forma nativa un
selector de color… otra funcionalidad que comunmente tendríamos que hacer con
javascript.
Desarrollo
java
Las variables son nombres simbólicos que
sirven para individuar locaciones de memoria en las que puede haber valores
colocados. Metafóricamente, podemos considerar estas ubicaciones como cajas con
un nombre en las cuales insertar dichos valores.En Javascript las variables se
crean con la declaración var, atribuyéndole incluso ningún valor, o simplemente
en el acto de asignación de un valor (por ejemplo, x=15 crea automáticamente
una variable numérica). La declaración var en más variables se debe repetir
para cada una, o bien debe efectuarse con una interrupción de línea:var
micarácter,
mivariable;Las variables que se declaran y se inicializan sin darles un
particular valor reciben el valor null. Este valor puede parecer poco
importante, pero se vuelve esencial si se quiere verificar la subida en memoria
de una variable. Por ejemplo, si se declara una variable
se puede verificar si esta variable ha tenido
un uso o si está vacía. Un uso muy práctico es el de la aplicación a las
ventanas popup para comprobar si se han quedado abiertas.Otro valor que se
asigna a las variables cuando éstas se han declarado sin asignación es
undefined. Este valor se introdujo con Javascript 1.3 y está aceptado por las
normas ECMA.De este modo, la declaración:var Verifica;
uando se desarrolla una aplicación compleja,
es muy habitual utilizar una y otra vez las mismas instrucciones. Un script
para una tienda de comercio electrónico por ejemplo, tiene que calcular el
precio total de los productos varias veces, para añadir los impuestos y los
gastos de envío.
Cuando una serie de instrucciones se repiten
una y otra vez, se complica demasiado el código fuente de la aplicación, ya
que:
El código de la aplicación es mucho más largo
porque muchas instrucciones están repetidas.
Si se quiere modificar alguna de las
instrucciones repetidas, se deben hacer tantas modificaciones como veces se
haya escrito esa instrucción, lo que se convierte en un trabajo muy pesado y
muy propenso a cometer errores.
Las funciones son la solución a todos estos
problemas, tanto en JavaScript como en el resto de lenguajes de programación.
Una función es un conjunto de instrucciones que se agrupan para realizar una
tarea concreta y que se pueden reutilizar fácilmente.
En el siguiente ejemplo, las instrucciones que
suman los dos números y muestran un mensaje con el resultado se repiten una y
otra vez:
Los parámetros se usan para mandar valores a
las funciones. Una función trabajará con los parámetros para realizar las
acciones. Por decirlo de otra manera, los parámetros son los valores de entrada
que recibe una función.
Por poner un ejemplo sencillo de entender, una
función que realizase una suma de dos números tendría como parámetros a esos
dos números. Los dos números son la entrada, así como la salida sería el
resultado de la suma, pero eso lo veremos más tarde.
Veamos un ejemplo anterior en el que creábamos
una función para mostrar un mensaje de bienvenida en la página web, pero al que
ahora le vamos a pasar un parámetro que contendrá el nombre de la persona a la
que hay que saludar.
function escribirBienvenida(nombre){
document.write("<H1>Hola
" + nombre + "</H1>")
}
Pocos desarrolladores hay que no les haya
tocado trabajar en algún momento con Javascript. Javascript como lenguaje
siempre parece muy sencillo cuando uno empieza a trabajar con él. La situación real
es que según avanzamos cada vez nos damos cuenta de que es más complejo de lo
que parece y las dudas aparecen. Vamos a hablar hoy un poco de algo que en
principio parece elemental en Javascript: El uso de funciones. Javascript
soporta varios tipos de declaraciones de funciones, vamos a ver la más
sencilla.
<html>
<head>
<script
type="text/javascript">
function
suma (a,b) {
return a+b;
}
console.log(suma(2,2));
</script>
</head>
<body>
</body>
</html>
Como vemos es una función de suma, la cual
invocamos e imprimimos por la consola el resultado
HTML ofrece a los autores varios mecanismos
para especificar listas de información. Todas las listas deben contener uno o
más objetos de lista. Las listas pueden contener:
Información no ordenada.
Información ordenada.
Definiciones.
La lista anterior, por ejemplo, es una lista
no ordenada, creada con el elemento UL:
<UL>
<LI>Información no ordenada.
<LI>Información ordenada.
<LI>Definiciones.
</UL>
Una lista ordenada, creada por medio del
elemento OL, debería contener información para la cual debe ponerse énfasis en
el orden, como en una receta de cocina:
Mezcle los ingredientes secos íntimamente.
Vierta los ingredientes líquidos.
Remueva durante 10 minutos.
Hornee durante una hora a 300 grados.
Las listas de definiciones, creadas por medio
del elemento DL, consisten generalmente en una serie de parejas
término/definición (si bien las listas de definiciones pueden tener otras
aplicaciones). Por ejemplo, se podría usar una lista de definiciones en la publicidad
de un producto:
Tipos de letras <H1>Tu TEXTO </H1>
<H2>Tu TEXTO </H2>
<H3>Tu TEXTO </H3>
<H4>Tu TEXTO </H4>
<H5>Tu TEXTO </H5>
<H6>Tu TEXTO </H6>
<H2>Tu TEXTO </H2>
<H3>Tu TEXTO </H3>
<H4>Tu TEXTO </H4>
<H5>Tu TEXTO </H5>
<H6>Tu TEXTO </H6>
Botones de radio: <HTML>
<BODY>
<H2>Casillas de verificación</H2>
<P>Indique qué sistemas operativos conoce:</P>
<FORM name="checkbox" action="http://www.tecnun.es/cgi-bin/ii/CGI0.exe" method="POST" target="resultado">
<P>
<INPUT type="checkbox" name="sistoper" value="Unix" checked>Unix<BR>
<INPUT type="checkbox" name="sistoper" value="OS/2">OS/2<BR>
<INPUT type="checkbox" name="sistoper" value="MacOS">MacOS<BR>
<INPUT type="checkbox" name="sistoper" value="DOS" checked>DOS<BR>
<INPUT type="checkbox" name="sistoper" value="WinNT" checked>WinNT
</P>
<INPUT type="submit" value="Enviar"> <INPUT type="reset" value="Borrar">
</FORM>
<HR>
<H2>Botones de radio</H2>
<P>Indique su estado civil:</P>
<FORM name="radio_buttons" action="http://www.tecnun.es/cgi-bin/ii/CGI0.exe" method="POST" target="resultado">
<P>
<INPUT type="radio" name="estado" value="Soltero">Soltero/a<BR>
<INPUT type="radio" name="estado" value="Casado" checked>Casado/a<BR>
<INPUT type="radio" name="estado" value="Viudo">Viudo/a<BR>
<INPUT type="radio" name="estado" value="Otros">Otros
</P>
<INPUT type="submit" value="Enviar"> <INPUT type="reset" value="Borrar">
</P>
</FORM>
</BODY>
</HTML>
Indique su estado civil:
Soltero/a
Casado/a
Viudo/a
Otros
Casado/a
Viudo/a
Otros
No hay comentarios.:
Publicar un comentario