Está en la página 1de 26

DAI5501-DISEÑO DE APLICACIONES PARA INTERNET

Experiencia 1- Controles Iniciales de HTML


y proceso de Formularios
Introducción al lenguaje HTML
• El World Wide Web (WWW) es un sistema que contiene una cantidad de
información casi infinita. Pero esta información debe estar ordenada de
alguna forma de manera que sea posible encontrar lo que se busca.
• La unidad básica donde está almacenada esta información son las páginas
Web. Estas páginas se caracterizan por contener texto, imágenes,
animaciones... e incluso sonido y video
• Una de las características más importantes de las páginas Web es que son
hipertexto. Esto quiere decir que las páginas no son elementos aislados,
sino que están unidas a otras mediante los links o enlaces hipertexto.
Gracias a estos enlaces el navegante de internet puede pulsar sobre un
texto (texto al que llamaremos de ahora en adelante activo) de una página
para navegar hasta otra página.
Características del lenguaje HTML

¿Cómo se hace una página Web?


Cuando los diseñadores del WWW se hicieron esta
pregunta decidieron que se debían cumplir, entre otras,
las siguientes características:
• El Web tenía que ser distribuido: La información repartida en páginas
no muy grandes enlazadas entre sí.
• El Web tenía que ser hipertexto y debía ser fácil navegar por él.
• Tenía que ser compatible con todo tipo de computador(PCs,
Macintosh, estaciones de trabajo...) y con todo tipo de sistemas
operativos (Windows, MS-DOS, UNIX, MAC-OS,...).
• Debía ser dinámico: el proceso de cambiar y actualizar la información
debía ser ágil y rápido.
Estas características son las que marcaron el diseño de todos los
elementos del WWW incluida la programación de páginas Web.
Como respuesta a todos estos requisitos se creo el lenguaje
HTML (HiperText Markup Language), cuyas siglas significan
"lenguaje hipertexto de marcas".

Este lenguaje será el encargado de convertir un inocente archivo


de texto inicial en una página web con diferentes tipos y
tamaños de letra, con imágenes impactantes, animaciones
sorprendentes, formularios interactivos, etc
Qué se necesita para crear una página web
• Una de las características de este lenguaje más importantes para el
programador es que no es necesario ningún programa especial para crear
una página Web.
• Gracias a ello se ha conseguido que se puedan crear páginas con cualquier
computador y sistema operativo. El código HTML, como hemos
adelantado en el párrafo anterior, no es más que texto y por tanto lo único
necesario para escribirlo es un editor de texto como el que acompañan a
todos los sistemas operativos: edit™ en MS-DOS, block de notas en
Windows,vi™en UNIX, etc.
• Por supuesto estos no son los únicos editores de texto que pueden ser
usados, sino cualquier otro como Notepad++, pero hay que tener cuidado
porque en ocasiones hacen traducciones automáticas del código HTML
que no siempre son deseadas. En estos dos últimos casos, también hay
que tener en cuenta que deberemos guardar el archivo en modo texto.
Una vez hemos escrito el código deberemos guardar el archivo (con formato
de texto) con la extensión .html
Los siguientes son nombres válidos de archivos que contengan código HTML:
index.html, index.htm,principal.html, PRINCIPAL.htm, etc
ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas
de las minúsculas. Es un error común llamar a un archivo index.html y luego
referirse a él como Index.html. Aunque en nuestro computador puede
funcionar al publicarlo seguramente no lo hará. Por esta razón es una norma
general usar siempre minúsculas para los nombres de los archivos html
Algunas razones para usar HTML

Todos estos editores HTML tipos pueden ser de gran


ayuda y tienen sus ventajas e inconvenientes, pero la
experiencia demuestra que conocer el lenguaje HTML
ofrece bastantes ventajas:
• Seremos capaces de aprovechar todas las características de este
lenguaje, incluso las más nuevas.
• No dependeremos de la disponibilidad de una herramienta concreta
para poder crear páginas web. Con un simple editor de textos será
suficiente
Las bases de HTML

• Las órdenes de este lenguaje estarán


formadas por unos comandos llamados
etiquetas que pueden tener o bien la siguiente
estructura:
<nombre_etiqueta>
O bien esta otra:
<nombre_etiqueta> Texto </nombre_etiqueta>
• Como vemos, la primera estructura está formada por
una única instrucción y la segunda por dos: una que
marca el inicio de la etiqueta y otra que marca el
final, con texto entre ambas.
• Por ejemplo, para indicarle al navegador que
queremos que pinte una línea horizontal debemos
escribir:
<hr>
• Así de sencillo. Como vemos, el nombre de la
etiqueta va delimitado por los símbolos menor que
(<) y mayor que(>), todas las instrucciones de HTML
deben ir encerradas entre estos dos símbolos.
Partes de un documento HTML
En primer lugar deberemos especificar que el archivo de texto que estamos
escribiendo es un documento HTML, para ello usamos las instrucciones de
inicio y fin de la etiqueta al principio y al final de la página respectivamente:
<html>
Código de la pagina
</html>
El código de la página esta formado a su vez por dos grandes bloques, la cabecera y
el cuerpo.
La cabecera de la página está delimitada por las instrucciones de inicio y fin de la
etiqueta head.
Estas instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera:
<html>
<head>
elementos de cabecera
</head>
</html>
En la cabecera de la página se introduce toda aquella
información que afectará a toda la página.
En un principio esta información se limitará al título.
Este título se indicará con la etiqueta title usando la siguiente
sintaxis:
<html>
<head>
<title> titulo de la pagina </title>
</head>
</html>
• El cuerpo es el siguiente gran bloque de nuestro
documento HTML, éste quedará delimitado por la
etiqueta body.
• En su interior introduciremos todos aquellos
elementos de los que queremos que conste nuestra
página como pueden ser testo, imágenes, tablas, etc.
• Conociendo la etiqueta body podemos ampliar el
ejemplo anterior para que incluya texto.
• Las mayúsculas o minúsculas son indiferentes al
escribir etiquetas
<html>
<head>
<title> titulo de la pagina </title>
</head>
<body>
texto que se quiere mostrar directamente
</body>
</html>
notar que las etiquetas pueden ser escritas con cualquier tipo de
combinación de mayúsculas y minúsculas.
<html>,<HTML> o <HtmL> son la misma etiqueta.
Resulta sin embargo aconsejable acostumbrarse a escribirlas en
minúscula ya que otras tecnologías que pueden convivir con nuestro
HTML (XML por ejemplo) no son tan permisivas.
• Como ejemplo tenemos

• Con el documento HTML creado, podemos ver el resultado obtenido a


partir de un navegador. Es conveniente, llegado a este punto, hacer
hincapié en el hecho de que no todos los navegadores son idénticos.
• Desgraciadamente, los resultados de nuestro código pueden cambiar de
uno a otro por lo que resulta aconsejable visualizar la página en varios.
• Puede revisar el listado asociado de etiquetas para complementar este
punto
Formularios HTML
• Hasta ahora hemos visto la forma en la que el HTML gestiona y muestra la
información, esencialmente mediante texto, imágenes y enlaces.
• Nos queda por ver de qué forma podemos intercambiar información con
nuestro visitante. Desde luego, este nuevo aspecto resulta primordial para
gran cantidad de acciones que se pueden llevar a cabo mediante el Web:
Comprar un articulo, rellenar una encuesta, etc.
• HTML propone una solución amplia: Los formularios.
Los formularios son cajas de texto y botones que podemos encontrar en
muchas páginas web.
• Son muy utilizados para realizar búsquedas o bien para introducir datos.
• Usando HTML podemos únicamente enviar el formulario. Si queremos
procesar el formulario mediante un programa la situación puede resultar
un poco más compleja ya que tendremos que emplear otros lenguajes.
• Los formularios son definidos por medio de las etiquetas
<form> y </form>
• Entre estas dos etiquetas colocaremos todos los campos y
botones que componen el formulario.
• Dentro de esta etiqueta <form>debemos especificar algunos
atributos:
– Action
– Method
– Name
<form name=“formEnvia” method=“post”
action=“ingreso.html”>
Elementos de Formularios.

• Campos de texto
• El HTML nos propone una gran diversidad de
alternativas a la hora de crear nuestros formularios.
• Estas van desde la clásica caja de texto hasta la lista
de opciones pasando por las cajas de validación.
• <input type=“text” name=“txtNomber”/>
Controles de ingreso de información

• Cajas de texto.
• Como resumen recordaremos que para insertar este
tipo de control en una página Web se usa la
etiqueta INPUT (esta misma etiqueta será la utilizada
para insertar la mayoría de controles),
con TYPE="text". Es decir:
• MAXLENGTH: Con este atributo limitamos el número máximo de
caracteres que pueden ser escritos en una caja de texto. El valor
de este atributo puede ser mayor o menor que el especificado
en SIZE, y que es totalmente independiente. Si es mayor cuando
lleguemos al final de la caja de texto los nuevos caracteres que
insertemos irán desplazando hacia la izquierda a los primeros,
que dejarán de estar a la vista (OJO, esto no quiere decir que
sean borrados).
• VALUE: Sirve para especificar un texto que debe
aparecer por defecto en la caja de texto, antes de
que el usuario escriba nada. Este texto suele ser, en
general, o bien instrucciones o bien la respuesta más
probable. Veamos un ejemplo que ilustra estos dos
casos:
Cajas de texto para claves.
• En ocasiones puede ser conveniente pedir al usuario algún
tipo de información confidencial como puede ser una clave de
acceso o password.
• El lenguaje HTML permite utilizar, en estos casos, una caja de
texto modificada en la que al escribir se mostrarán
únicamente asteriscos. Para ello debemos
usar TYPE="password" en la etiqueta INPUT.
Botones de elección.
• Estos controles reciben también el nombre de botones de radio, como
traducción directa de su denominación inglesa radio buttons y porque en
general los navegadores suelen darles una forma circular.
• Para insertar un botón de elección usaremos de nuevo la etiqueta INPUT,
pero esta vez el valor del atributo TYPE será radio:
• Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o
no seleccionado (OFF), estando inicialmente todos en la posición OFF.
También es posible especificar que un botón determinado esté
seleccionado inicialmente insertando el atributo CHECKED en la
etiqueta INPUT de la siguiente manera:
Cajas de selección.
• Las cajas de selección guardan ciertos parecidos con los botones
de radio, pero además permitirán seleccionar varias opciones en
una lista.
• Al igual que dichos botones tienen dos posiciones, seleccionados
o no seleccionados, estando en esta última posición
inicialmente, a no ser que hayamos usado el atributo CHECKED.
• Cada caja de selección es independiente del resto, y por tanto el
valor del atributo NAME debe ser diferente en cada una.
• Para insertar una caja de selección debemos usar de nuevo la
etiqueta INPUT, pero esta vez con TYPE="checkbox". Veamos un
ejemplo de uso de este tipo de controles:
Botón de borrado

• Este control recibe el nombre de botón de borrado o botón de


reseteado (reset button ). La creación de este control es muy
sencilla. De nuevo usaremos la etiqueta INPUT, esta vez
con TYPE="reset":
Botón genérico

• Para completar la colección de botones de los


formularios, nos encontramos con la posibilidad de
insertar un botón genérico, es decir, que no tiene
ninguna función definida, sino la que nosotros
queramos darle. Para insertar un botón genérico
usaremos la etiqueta INPUT con TYPE="button":
Campos ocultos

• Los campos ocultos son un tipo de control que únicamente


sirve para incluir información adicional entre los datos del
formulario.
• Este tipo de control es invisible, y por tanto el navegador no
muestra ningún tipo de gráfico para advertir de su existencia.
• ¿Para qué sirve entonces un control oculto? En general, los
campos ocultos se usan para enviar información específica al
programa del servidor Web que procesará los datos enviados