Unidad I

Introduccin a las tecnologas Web.

1.1 Perspectiva histrica del Internet . La historia de Internet se remonta al desarrollo de las redes de comunicacin. La idea de una red de computadoras diseada para permitir la comunicacin general entre usuarios de varias computadoras sea tanto desarrollos tecnolgicos como la fusin de la infraestructura de la red ya existente y los sistemas de telecomunicaciones.

En los aos cincuenta, el proyecto RAND utilizaba el mtodo de conectar computadoras, por medio de una computadora central o unidad principal, que simplemente consista en permitir a sus terminales conectarse a travs de largas lneas alquiladas y se utilizaba para apoyar a investigadores (p.e. Inteligencia artificial).

En 1960 surge un pionero fundamental en lo que se refiere a una red mundial, J.C.R. Licklider, cque lanza undocumento donde plantea la necesidad de una red mundial. "una red de muchos [ordenadores], conectados mediante lneas de comunicacin de banda ancha"

En octubre de 1962, Licklider fue nombrado jefe de la oficina de procesado de informacin DARPA, y form un grupo informal dentro del DARPA del Departamento de Defensa de los Estados Unidos para investigaciones sobre ordenadores ms avanzadas. Con una instalaron de tres terminales de redes: una para la System Development Corporation en Santa Monica, otra para el Proyecto Genie en la Universidad de California (Berkeley) y otra para el proyecto Multics en el Instituto Tecnolgico de Massachusetts.

Arpanet al tener problemas con tres terminales con comandos diferentes propus: debera haber una terminal que fuese a donde sea que quisieras ir y en donde tengas interactividad.

Durante los aos 60, varios grupos trabajaron en el concepto de la conmutacin de paquetes.La conmutacin es una tcnica que nos sirve para hacer un uso eficiente de los enlaces fsicos en una red de computadoras.

Un Paquete es un grupo de informacin que consta de dos partes: los datos propiamente dichos y la informacin de control, en la que est especificado la ruta a seguir a lo largo de la red hasta el destino del paquete. Mil octetos es el lmite de longitud superior de los paquetes, y si la longitud es mayor el mensaje se fragmenta en otros paquetes.

La red ARPANET se cre en 1969. En principio, la red contaba con 4 ordenadores distribuidos entre distintas universidades de Estados Unidos. Tanto fue el crecimiento de la red que su sistema de comunicacin se qued obsoleto. Entonces los investigadores crearon el Protocolo TCP/IP, que se convirti en el estndar de comunicaciones dentro de las redes informticas (actualmente seguimos utilizando dicho protocolo).

Las funciones militares se desligaron de ARPANET y crearon MILNET. La NSF (National Science Fundation) crea su propia red informtica llamada NSFNET, que ms tarde absorbe a ARPANET, creando as una gran red con propsitos cientficos y acadmicos

En 1973, en Norsar, Noruega, se realiz la primera conexin ARPANET fuera de los Estados Unidos En 1982, todas estas conexiones se convirtieron en TCP/IP, al mismo tiempo que el resto de las ARPANET.

En 1984 Amrica empez a avanzar hacia un uso ms general del TCP/IP, integrandos CERNET, pero permaneci aislado del resto de Internet, formando una pequea Internet interna.

En 1985 la Internet ya era una tecnologa establecida, aunque poco conocida. Surge el trmino "ciberespacio". En ese tiempo la red era bsicamente textual. Con el tiempo la palabra "ciberespacio" termin por ser sinnimo de Internet. El desarrollo de NSFNET fue tal que hacia el ao 1990 ya contaba con alrededor de 100.000 servidores.

En 1987, la pequea compaa Cisco que operaba sobre routers TCP/IP, introduj el hardware apropiado para ste protocolo, logrando expandir a la porcin asitica de Internet sobre las redes UUCP existentes,

En 1988 se busc la transicin del lado europeo de la UUCP (Unix to Unix copy) Usenet network (de la cual la mayor parte funcionaba sobre enlaces X.25) a TCP/IP.

En 1989 CERN abri su primera conexin TCP/IP externa En 1990 un proyecto llamado "Xanad" comienza el uso de los hipervnculos. Robert Caillau quien cooper con el proyecto, le pone nombre al sistema y lo llamarn World Wide Web (WWW) o telaraa mundial.

El contenido se programaba en un lenguaje de hipertexto con "etquetas" que asignaban una funcin a cada parte del contenido. Luego, un programa de computacin, un intrprete, era capaz de leer esas etiquetas para despeglar la informacin. Ese intrprete sera conocido como "navegador" o "browser".

En 1993 Marc Andreesen produjo la primera versin del navegador "Mosaic", que permiti acceder con mayor naturalidad a la WWW con la utilizacin de una interfaz grfica iba ms all de lo previsto y y presentaba la facilidad con que poda manejarse el programa. Poco despus, Andreesen encabez la creacin del programa Netscape.

A partir de entonces, Internet comenz a crecer ms rpido que otro medio de comunicacin, convirtindose en lo que hoy todos conocemos.

Algunos de los servicios disponibles en Internet aparte de la WEB son el acceso remoto a otras mquinas (SSH y telnet), transferencia de archivos (FTP), correo electrnico (SMTP), conversaciones en lnea (IMSN MESSENGER, ICQ, YIM, AOL, jabber), transmisin de archivos (P2P, P2M, descarga directa), etc.

Podemos definir a Internet como una "red de redes", es decir, una red que no slo interconecta computadoras, sino que interconecta redes de computadoras entre s. Una red de computadoras es un conjunto de mquinas que se comunican a travs de algn medio (cable coaxial, fibra ptica, radiofrecuencia, lneas telefnicas, etc.) con el objeto de compartir recursos.

Internet es un acrnimo de INTERconected NETworks (Redes interconectadas). Para otros, Internet es un acrnimo del ingls INTERnational NET, que traducido al espaol sera Red Mundial. Internet utiliza TCP/IP como su protocolo de comunicacin.

En 1994, Mosaic fue finalmente suplantado por Netscape Navigator de Andreessen, que reemplaz a Mosaic como el navegador web ms popular en el mundo. La competencia de Internet Explorer y una variedad de otros navegadores casi lo han sustituido completamente

1.2 Protocolo http (protocolo de transferencia de hipertexto). HTTP (Protocolo de Transferencia de HiperTexto) es el protocolo usado en cada transaccin de la World Wide Web. HTTP fue desarrollado por el World Wide Web Consortium y la Internet Engineering Task Force, colaboracin que culmin en 1999 con la publicacin de la versin 1.1.

HTTP define la sintaxis y la semntica que utilizan los elementos de software de la arquitectura web (clientes, servidores, proxies) para comunicarse. Es un protocolo orientado a transacciones y sigue el esquema peticinrespuesta entre un cliente y un servidor. Al cliente que efecta la peticin (un navegador web o un spider) se lo conoce como "user agent" (agente del usuario).

La semantica dentro del entorno web es un termino que describe un conjunto de tecnologias (algunas de ellas ya disponibles y otras an no realizadas) para integrar pistas sobre el significado y la estructura de la informacion en la web.

1.2.1 Arquitectura del WWW.

Los organismo oficiales que tiene vigencia en la actualidad estn formados por importantes empresas propulsoras de la creacin, el mantenimiento y la ampliacin delos estndares, entre stas estn la W3C (World Wide Web Consortium) y la ECMA (European Computer Manufacturers Association)

La gran mayora de las tecnolgias que componen los estndares web es de uso libre y gratuito. Las herramientas seleccionadas han sido probadas durante largos periodos (como CSS y JavaScript) y las nuevas responden a las necesidades surgidas en los ltimos tiempos (como AJAX, XML y JSON), pero ninguna de ellas es propietaria.

Los estndares determinan de manera real y tangible la calidad de una aplicacin. Los organismos internacionales que mantienen las tecnolgias brindan la posibilidad de comparar el cdigo contra aplicaciones que se encargan de procesarlo y hacer saber si ste es vlido o no.

1.2.2 URLs. A la informacin transmitida se la llama recurso y se la identifica mediante un localizador uniforme de recursos (URL). Los recursos pueden ser archivos, el resultado de la ejecucin de un programa, una consulta a una base de datos, la traduccin automtica de un documento, etc.

Una transaccin HTTP est formada por un encabezado seguido, opcionalmente, por una lnea en blanco y algn dato. El encabezado especificar cosas como la accin requerida del servidor, o el tipo de dato retornado, o el cdigo de estado.

El uso de campos de encabezados enviados en las transacciones HTTP le dan gran flexibilidad al protocolo. Estos campos permiten que se enve informacin descriptiva en la transaccin, permitiendo as la autenticacin, cifrado e identificacin de usuario.

Un encabezado es un bloque de datos que precede a la informacin propiamente dicha, por lo que muchas veces se hace referencia a l como metadato porque tiene datos sobre los datos

Si se reciben lneas de encabezado del cliente, el servidor las coloca en las variables de ambiente de CGI con el prefijo HTTP_ seguido del nombre del encabezado. Cualquier carcter guion ( - ) del nombre del encabezado se convierte a caracteres "_".

CGI

Interfaz de entrada comn (Common Gateway Interface, CGI) es una importante tecnologa de la World Wide Web que permite a un cliente (navegador web) solicitar datos de un programa ejecutado en un servidor web.

CGI especifica un estndar para transferir datos entre el cliente y el programa. Es un mecanismo de comunicacin entre el servidor web y una aplicacin externa cuyo resultado final de la ejecucin son objetos MIME.

Las aplicaciones que se ejecutan en el servidor reciben el nombre de CGIs. Las aplicaciones CGI fueron una de las primeras prcticas de crear contenido dinmico para las pginas web. En una aplicacin CGI, el servidor web pasa las solicitudes del cliente a un programa externo.

Este programa puede estar escrito en cualquier lenguaje que soporte el servidor, aunque por razones de portabilidad se suelen usar lenguajes de script. La salida de dicho programa es enviada al cliente en lugar del archivo esttico tradicional.

CGI ha hecho posible la implementacin de funciones nuevas y variadas en las pginas web, de tal manera que esta interfaz rpidamente se volvi un estndar, siendo implementada en todo tipo de servidores web Un programa CGI puede ser escrito en cualquier lenguaje de programacin que produzca un fichero ejecutable.

Entre los lenguajes ms habituales se encuentran: C, C++, Perl, Java, Visual Basic... No obstante, debido a que el CGI recibe los parmetros en forma de texto ser til un lenguaje que permita realizar manipulaciones de las cadenas de caracteres de una forma sencilla, como por ejemplo Perl.

Perl es un lenguaje interpretado que permite manipulaciones sencillas de ficheros y textos, as como la extraccin y manipulacin de cadenas de caracteres, unidas a unas bsquedas rpidas y fciles.

1.3.1 SGML
SGML son las siglas de Standard Generalized Markup Language o "Estndar de Lenguaje de Marcado Generalizado". Consiste en un sistema para la organizacin y etiquetado de documentos. La Organizacin Internacional de Estndares (ISO) normaliz este lenguaje ISO 8879:1986, Information processing Text and office systems Standard Generalized Markup Language (SGML).

El lenguaje SGML sirve para especificar las reglas de etiquetado de documentos y no impone en s ningn conjunto de etiquetas en especial.

El lenguaje HTML est definido en trminos del SGML. XML es un estndar de creacin posterior, que incorpora un subconjunto de la funcionalidad del SGML (suficiente para las necesidades comunes), y resulta ms sencillo de implementar pues evita algunas caractersticas avanzadas de SGML.

1.2.3 Persistencia en http Cookies

HTTP es un protocolo sin estado, es decir, que no guarda ninguna informacin sobre conexiones anteriores. El desarrollo de aplicaciones web necesita frecuentemente mantener estado. Para esto se usan las cookies, que es informacin que un servidor puede almacenar en el sistema cliente.

El API de almacenamiento web, que es similar a una cookie, permite que un CMS guarde la entrada de datos a intervalos regulares, en un hilo obrero ejecutado en segundo plano para no bloquear al navegador. si el navegador se bloquea antes de enviar los datos, la informacion sigue estando disponible en el lado del cliente.

Sistema de gestion de contenidos CMS facilitabel trabajo relacionado con la informacin que reside en un sitio particular. Aplicacion que permite, organiza y flexibiliza el trabajo en comun de manera coloborativa de textos o documentos multimedia. Plone (Python), Wordpress, Joomla, Drupal (PHP), SilverStrip, Movable Type, Expression Engine

1.2.3 Mtodos http.

HTTP define 8 mtodos (algunas veces referido como "verbos") que indica la accin que desea que se efecte sobre el recurso identificado. Lo que este recurso representa, si los datos pre-existentes o datos que se generan de forma dinmica, depende de la aplicacin del servidor. A menudo, el recurso corresponde a un archivo o la salida de un ejecutable que residen en el servidor.

Pide una respuesta idntica a la que correspondera a una peticin GET, pero sin el cuerpo de la respuesta. Esto es til para la recuperacin de meta-informacin escrita en los encabezados de respuesta, sin tener que transportar todo el contenido.

HEAD

GET
Pide una representacin del recurso especificado. Por seguridad no debera ser usado por aplicaciones que causen efectos ya que transmite informacin a travs de la URI agregando parmetros a la URL. Ejemplo: GET /images/logo.png HTTP/1.1 obtiene un recurso llamado logo.png Ejemplo con parmetros: /index.php?page=main&lang=es

POST
Somete los datos a que sean procesados para el recurso identificado. Los datos se incluirn en el cuerpo de la peticin. Esto puede resultar en la creacin de un nuevo recurso o de las actualizaciones de los recursos existentes o ambas cosas.

PUT
Sube, carga o realiza un upload de un recurso especificado (archivo), es el camino ms eficiente para subir archivos a un servidor, esto es porque en POST utiliza un mensaje multiparte y el mensaje es decodificado por el servidor. En contraste, el mtodo PUT te permite escribir un archivo en una conexin socket establecida con el servidor.

La desventaja del mtodo PUT es que los servidores de hosting compartido no lo tienen habilitado. Ejemplo: PUT /path/filename.html HTTP/1.1

DELETE Borra el recurso especificado. TRACE Este mtodo solicita al servidor que enve de vuelta en un mensaje de respuesta, en la seccin del cuerpo de entidad, toda la data que reciba del mensaje de solicitud. Se utiliza con fines de comprobacin y diagnostico.

OPTIONS Devuelve los mtodos HTTP que el servidor soporta para un URL especifico.Esto puede ser utilizado para comprobar la funcionalidad de un servidor web mediante peticin en lugar de un recurso especifico CONNECT

1.3 Introduccin al HTML. Lenguaje de despliegue del web

XHTML (eXtensible Hyper Text Markup Language). Es el lenguaje de marcas creado para substituir al lenguaje HTML (Hyper Text Markup Language). Se podra decir que XHTML es la versin XML de HTML, ya que cumple las especificaciones ms estrictas de XML.

Su objetivo es avanzar en el proyecto del W3C (World Wide Web Consortium), de lograr pginas web donde lainformacin y la forma de presentarla estn claramente separadas. Se dice que XHTML es un lenguaje semntico, que quiere decir que no definimos el aspecto de las cosas sino lo que significan.

Sirve para transmitir la informacin que contiene un documento, dejando el aspecto y el diseo a las hojas de estilo (CSS), y la interactividad y funcionalidad para JavaScript,

La diferencia entre HTML y XHTML es principalmente un cambio en el concepto y forma de estructuracin del documento, donde los distintos elementos deben estar correctamente anidados, todas las etiquetas (marcas) en minsculas, los elementos cerrados correctamente, los valores de los atributos entrecomillados, etc. De sta forma, se evita la anarqua existente en muchos cdigos web

Reglas del XHTML: 1. No puede tener etiquetas abiertas. Hay que dejar un espacio en blanco entre el nombre de la etiqueta y la barra / para que los navegadores antiguos mantengan la compatibilidad con XHTML.

2. Los elementos deben estar anidados de forma lgica, por lo tanto deben cerrarse en el orden inverso al que fueron abiertos.

3. Todas las etiquetas y sus atributos deben escribirse siempre en minsculas. El valor del atributo, si puiede contener maysculas.

4. Todos los valores de los atributos de las etiquetas deben estar siempre entrecomillados. 5. El primer elemento del documento siempre ser <html> y se debe colocar el <head> y <body> en el orden correcto, cerrandolosal final del documento. El uso del elemento <title> es obligatorio y se pone justo despues de <head>.

6. El atributo id reemplaza al atributo name. Slo en casos de compatibilidad con navegadores antiguos est permitido con XHTML transicional.

7. Por ser semntico, en el desarrollo del documento habra que organizarlo y estructurarlo mas que su maquetacin. Utilizar las etiquetas para lo que fueron opensadas, por lo tanto, es recomendable usar para un ttulo la etiqueta <h1> en vez de un <span> con una clase asociada.

HTML HTML, siglas de HyperText Markup Language (lenguaje de marcado de hipertexto), es el lenguaje de marcado predominante para la elaboracin de pginas web. Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes.

HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>). HTML tambin puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

Estructura de un documento XHTML

Para escribir un cdigo XHTML valido, se debe indicar al navegador el tipo de documento que va a abrir. La declaracin del tipo de documento XHTML es obligatoria (DTD). Los DTD son de tres tipos:

1) XHTML 1.0 Strict (estricto), se utiliza cuando se quiere obtener una estructura limpia y clara dejando el aspecto y la maquetacin a las CSS (hojas de estilo). No esta permitida la utilizacin de etiquetas tipo bgcolor o center, Una de sus principales ventajas es conseguir pginas bien estructuradas y facilmente configurables mediante CSS, pero existen an demasiados problemas de compatibilidad con ciertos navegadores.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1 -strict.dtd">

2) XHTML 1.0 Transitional. Se utiliza cuando se describe la presentacxin de los documentos por medio de etiquetas. Es el sistema adecuado cuando se desea facilitar el acceso a usuarios con navegadores sin posibilidades de tratamiento de CSS. Esta opcin incluye todas las caractersticas de XHTML Strict, pero aade caractersticas orientadas a la presentacin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1 -transitional.dtd">

3) XHTML 1.0 Frameset, es una variante de la opcin transitional, que permite que el contenido del documento est estructurado con marcos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1 -frameset.dtd">

La codificacin por defecto de un documento es Unicode UTF-8. Para evitar conflictos con algunos caraters del castellano, en la definicin de sitios estrictos se recoeminda usar la codificacin ISO-8859-1
<?xml version="1.0" encoding="iso-8859-1"?>

Si el DTD no es estricto, es recomendable incluir el correspondiente comando meta en vez de la instruccin anterior.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">

A la etiqueta html se debe indicar el lenguaje en que esta escrito el documento, si es en castellano, el cdigo sera:

La cabecera Limitada por la etiquetas <head> y </head> y contiene informacin sobre el documento como el ttulo, vnculos a hojas de estilo o scripts, instrucciones meta, etc. La etiqueta title es obligatoria que especifica el y ttulo del documento, ste tambin es utilizado como identificador en las listas de favoritos, tambien llamadas bookmarks.

<meta />, usada para incluir cualquier informacin relevante sobre la pgina, donde la informacin se escribe usando pares nombre/valor. Los motores de busqueda utilizan dicha informacin en los resultados de sus bsquedas para ofrecer un resumen del contenido de la pgina web, su buena utilizacin permitira que el documento tenga un mejor posicionamiento gracias a la informacin que obtendrn de ellas, los diferentes robots de los buscadores.

<meta http-equiv="refresh" content="segundos" url="http://www.miweb.com"/>

Normalmente no se usa a no ser que se quiera redireccionar de forma automatica a otra URL transcurridos unos segundos. Por ejemplo cuando se cambia de dominio un portal y queremos que los visitantes lleguen all de forma automtica.

Encargada de facilitar la descripcin de la web mediante frases y deben ser descriptivas con sentido y sin abusar de la repeticin de las palabras.
<meta name="description" content="description clave" />

Relaciona los motores de bsqueda de los diferentes navegadores con la web y deben ser palabras sueltas, con repeticin mnima y separadas por comas. <meta name="keywords" content="palabras clave" />

Indica el idioma en el que est escrita la pgina web. Muy importante porque los motores de busqueda seleccionan los resultados en funcin del idioma que el usuario ha indicado en la peticin de bsqueda.
<meta name="language" content="es" />

Indica al motor de bsqueda el periodo de tiempo tras el cual debe revisar nuestra pgina. Lo normal es indicar entre 15 y 30 das.
<meta name="revisit-after" content="tiempo" />

Hace referencia a la clasificacin del contenido de la pgina web. Si se especifica como general el motor interpreta que el contenido es para todos los pblicos.Si se marca como adultos los motores de bsqueda no la ofreceran en sus resultados cuando haya filtros para menores de edad.
<meta name="rating" content="General" />

Indica el nombre de la persona o empresa que ha desarrollado el sitio web.

<meta name="author" content="autor" />

<meta name="owner" content="Titula" />

Se rtefiere a la persona, empresa o sociedad propietaria del sitio web.

Indica a los motores de bsqueda se deben ofrecer o no esa pagina como parte de sus resultados y si debn o no incluir en sus registros los enlaces de dicha pgina. Si sustituimos index por noindex la pgina no ser indexada por los motores de bsqueda. Al sustituir follow por nofollow el motor de bsqueda no seguir los enlaces internos.

<meta name="robot" content="index, follow" />

Cuerpo de documento. Contiene el texto de la pgina que se va a presentar al usuario. Las etiquetas son: <body> y </body>, </body> y entre ellas se situa el cdigo fuente del documento. (Los atributos de body han sido desaprobados en XHTML Strict siendo vlidos nicamente en la definicin DTD Transitional. Tomarlo en cuenta para evitar errores de validacin en los documentos.

Los atributos de body en su declaracin Transitional permiten definir el fondo de la pantalla y los colores bsicos de texto.

Los colores se pueden indicar de dos maneras: Formato hexadecimal o referenciados por su nombre preestablecido. En hexadecimal para los colores RGB se deben representar por RR,GG y BB, con valores de 0 y FF, por ejemplo Negro: "#000000", Rojo:#FF0000", Azul: #0000FF".

Se puede indicar el color en ingles: black,teal, blue, navy, lime, purple, yellow, olive, red, marron, gray, fuchsia, green, silver, aqua, etc.

Los atributos vlidos para body son: bgcolor="#rrggbb o nombre del color" para indicar el color de fondo del documento. text="#rrggbb o nombre del color" para especificar el color general del texto. link="#rrggbb o nombre del color" para especificar el color de texto de los enlaces.

vlink="#rrggbb o nombre del color" para indicar el color de texto de los enlaces ya visitados. alink="#rrggbb o nombre del color" para indicar el color en que se pondr el texto del enlace en el momento de su activacin. background="#nombre del archivo grfico" para indicar el grfico de fondo

Comentarios. Para incluir comentarios dentro del cdigo fuente, se puede utilizar la etiqueta <!--comentarios-->. <!--comentarios--> Recomendable en documentos extensos. Si el comentario es incorrecto, en XHTML, da lugar a que el documento no sea mostrado.

XHTML no reconoce ms de un espacio en blanco separando cualquier elemento o texto, es decir, los saltos de lnea, tabulaciones y dems separadores son convertidos a un nico espacio en blanco.

Estructuracin del texto.

Tambin no se debe escribir directamente caracteres especiales tales como comillas, ees, acentos o smbolos, utilizar las secuencias de escape propias de XHTML, por ejemplo:

< > & "

caracter S. Escape &lt &gt &amp &quot &aacute &eacute &ntilde

La etiqueta <p></p> es la encargada de separar prrafos de texto. La etiqueta <br /> slo tiene marca inicial y se usa para cambiar de lnea.

Prrafos y saltos de lnea.

Cabeceras y separadores Las cabeceras se emplean para dividir los documentos en secciones, es decir, para marcar ttulos de estas secciones. La etiqueta es <hn> y </hn>, donde n varia de 1 a 6, donde uno es letra muy grande y 6 muy pequea.Los elementos de encabezado deben guardar un orden lgico y no se deb saltar ninguno de los niveles.

La utilizacin de esta etiqueta genera automaticamente un salto de lnea similar a <p> Si se agrupa la informacin mediante el uso de ttulos, diferentes secciones de una pgina podran disponer de subttulos o incluso subcategorias dentro de una misma seccin.

Se deben utilizar los prrafos para estructurar el contenido, los saltos de lnea para forzar saltos dentro de un prrafo y los ttulos para agrupar y ordenar la informacin.

Tomar en cuenta que XHTML utiliza un lenguaje semntico, es decir, lo importante para que este bien estructurado es el significado de la etiquetas que se utilizan y no el efecto esttico que generen.

La etiqueta <hr /> dibuja una barra horizontal que divide la pantalla y as poder separar partes del docuemnto. El atributo size permite especificar el grosor de la barra, width determina la longitud o el porcentaje relativo con respecto al ancho de la pgina.

La alineacin de la barra se ajusta con el atributo align con los valores left, rigth o center, por ejemplo: <hr align="center" size="10" width="50" />

Tambin todos los atributos de la etiqueta <hr/> han sido desaprobados en DTD Strict, slo se permite el uso de la etiqueta sin atributos, para utilizarlos debe ser en un documento Transitional.

La etiqueta <em> y </em>, se utilizan para dar enfasis a un texto que se representa en cursiva en los navegadores. La etiqueta <strong> Y </strong> para dar enfasis de efecto de negritas.

Para poder mostrar los espacios y tabuladores del cdigo fuente de un programa, se debe utilizar la etiqueta <pre> y </pre>. Para incluir espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el texto &nbsp;

Citas La etiqueta <blockquote> y </blockquote> se utiliza para mostrar las citas de prrafos largos, donde muchos navegadores lo presentan como un sangrado. Para escribir citas cortas en una linea de un parrafo, se utiliza la etiqueta <q> y </q> y se muestra en los navegadores el texto entrecomillado.

Para definir una cita refirindose al autor de la misma, se utiliza la etiqueta <cite> y </cite> Las etiquetas para definir estilos de texto que cumplen con la DTD Strict son: - <b></b> muestra un bloque de texto en negrita.

negrita. - <strong></strong> marca contenido al que se le quiere dar mas fuerza o importancia que el resto. Se presenta en los navegadores en negrita. - <i></i> pone texto en cursiva. - <tt></tt> el texto tendra un tamao menor y los caracteres sern similares a los de una mquina de escribir (teletipo).

- <b></b> muestra

un bloque de texto en

- <big></big> texto grande, el mayor tamao de fuente. - <small></small> texto pequeo, el menor tamao de la fuente. -  superndice. -  subndice - <address></address> muestra un bloque de texto en cursiva, se utiliza generalmente para marcar una direccin o firma. - <code></code> se utiliza para representar una etiqueta xhtml o cdigo de programa

Acrnimos y abreviaturas Para definir en un documento el significado de un acrnimo o de una abreviatura, se utilizan las etiquetas <acronym></acronym> y <abbr></abbr> respectivamente. El valor del acrnimo o de la abreviatura hay que indicarlo mediante el atributu title.

Las Fuentes La etiqueta <font> permite controlar casi totalmente el estilo de un bloque de texto. Se puede establecer el tamao de la fuente mediante el atributo size, la fuente de texto a usar mediante face y el color de la misma con el atributo color, se cierra con </font>

Para poner todo el texto con un mismo tamao , se utiliza la etiqueta <basefont></basefont>

Otra funcin que caracterica al lenguaje XHTML es el hipertexto, que consiste en poder moverse a travs de un documento o varios, seleccionando zonas de texto o imagenes programadas para tal fin. Los enlaces pueden apuntar a una pgina web o imgenes, o a un servidor ftp, o a un archivo, o a un e-mail, etc. Cualquier elemento de un documento XHTML puede ser definido como enlace. Por tanto, imgenes, prrafos de texto o bloques pueden especificarse como enlaces.

Los Enlaces

La extructura general de un enlace est formada por la etiqueta <a> seguida de determinados atributos. <a href="destino del enlace" title="descripcin del enlace">texto indicativo del enlace </a> El atributo href contiene la URL de la pgina a visitar o la direccin del elemento a enlazar, mientras que title mostrar una descripcin del sitio (opcional).

Enlaces a pginas o documentos externos <!--enlace a un url--> <a href="http://www.rama.es/"title="Editorial RaMa">P&aacute;gina principal de la Editorial Ra-Ma </a>

<!--enlace a una direccin de correo--> <a href="mailito.wemaster@roberto.com"titl e="Env&iacute;ame un mail">Mail del autor</a>

<!--enlace a una imagen--> <a href="http://www.rama.es/imagen.jpg"title="Foto">Mira mi fotografiacute;a </a>

Enlace a un punto de la misma pgina (anclas) Son tiles cuando se trabaja con documentos muy extensos o ndices suelen ponerse enlaces desde el principio del documento al final del mismo y viceversa, asi se agiliza la tarea del usuario examinando el docuemnto.

Se debe marcar las distintas zonas del docuemnto a las que se desea acceder de manera inmediata. Al principio del documento: <a id="inicio_doc"> Al final del docuemnto: <a id="final_doc">

Una vez marcadas las distintas zonas del documento (ancladas), se situan en el mismo los enlaces que nos permitiran ir de arriba abajo de la pgina con una sola pulsacin del ratn y viceversa. En el inicio y final del documento se aaden las siguientes lneas:

<!--Esta lnea debe situarse al comienzo del cuerpo del documento--> <a href="#final_doc">Pulse Aqu&iacute; para ir al final de esta p&aacute;gina</a> <!--Esta lnea debe situarse al final del cuerpo del documento--> <a href="#inicio_doc">Pulse Aqu&iacute; para ir al inicio de esta p&aacute;gina</a>

Enlaces a otras pginas locales Cuando en un sitio existen varias pginas, se puede acceder de una a otra , estas se pueden enlazar usando referencias Relativa o Absoluta.

-Relativo es un enlace que depende de la posicin de la pgina origen y de la pgina destino, se suprime el protocolo y el nombre del servidor. -Absoluto No necesita informacin adicional para localizar el recurso enlazado. Es la ruta completa hacia dicho recurso.

Cuando el origen de la pgina esta en el mismo directorio que la pgina destino <a href="noticias.html" title="Ultimas noticias">Actualidad</a>

Si el destino estuviera en un subdirectorio inferior: <a href="imagen/robert/liky.html" title="Reportajes y Fotos">Las fotos de Robert</a>

Si el destino se encuentra en un subdirectorio superior: <a href="../Bienvenido.html" title="Home web">Volver al inicio</a>

Un enlace absoluto: <a href="http://www.likihard.com/Bienv enido.html" title="Inicio">Home</a>

Los DTD Strict no permite la colocacin de una etiqueta dentro de <body> directamente. Deber anidarse dentro de otras como: <p>, <cite>, etc.

Listas Se emplean para presentar de forma ordenada una serie de lneas. Estas pueden ser ordenadas <ol>, <ol> desordenadas <ul> y de definicin <dl>. <dl>

Lista desordenadas Se utilizan para relacionar elementos sin orden especifico, mientras que <li></li> se encarga de indicar las entradas de la lista.

El atributo type (XHTML Transitional) puede tomar el valor de circle (crculo sin relleno), disc (crculo con relleno) y square (cuadrado).

Si se aplica a la etiqueta <ul></ul>, <ul></ul> toda la lista usar el smbolo indicado, si se aplica a la etiqueta <li></li> que seala los distintos elementos de una lista, el cambio slo afectara al elemento actual y a los siguientes hasta nueva indicacin.

Se utiliza para relacionar elementos con un orden determinado precedido de un nmero o letra que se incrementa automaticamente <ol></ol>, <ol></ol> e igualmente se utiliza <li></li>. <li></li> Comienzan siempre con 1, pero puede controlarse con los atributos type y start en un documento DTD Transitional.

Lista ordenadas

Con el atributo type determina el formato de la marca de numeracin en base a letras (type=A) type=A o numeracin romana(I,i) I,i o decimal (1).

El atributo start especifica el nmero del primer elemnto de la lista para valores distintos de 1. Lista de definicin, se utilizan para glosarios, catalogos, etc. <dl></dl>, <dl></dl> su primir elemento, se le llama trmino o ttulo <dt>,/dt>, <dt>,/dt> y un segundo se le llama descripcin <dd></dd>. <dd></dd>

Las imgenes que se pueden incluir en una pgina XHTM son de dos tipos: las imgenes de contenido y las imgenes de adorno y estilo. estilo Las imgenes de contenido son las que proporcionan informacin y complementan la informacin. Las imgenes de estilo son las que se utilizan para hacer bordes redondeados, sombras, mostrar iconos, fondos de pgina, etc.

Las imgenes de contenido se incluyen directamente en el cdigo XHTML mediante la etiqueta <img /> mientras que imgenes de estilo no se deberian incluir en el cdigo XHTML, se deberian emplear hojas de estilo CSS.

Para incluir las imagenes (GIF, JPEG o PNG) se utiliza la etiqueta <img /> junto con los atributos imprescindibles y obligatorios: src para definir la imagen a mostrar y alt encargado de mostrar una breve descripcin de la imagen al pasar el cursor sobre ella: <imag src="nombre o ruta del archivo imagen" alt="descripcin de la imagen" />

Hay dos atributos ms, importantes para las imgenes: width y height. height Para redimensionar las imgenes. <img src="img/amanecer.jpg" alt="Cuadro sobre el amanecer" width="32" height="32" />

Por ejemplo, width="150" muestra imagen con 150 pixeles de ancho y width="50%" reduce la imagen al 50%

Para hacer que una imgen sea un enlace a otra pgina se utiliza la etiqueta <a>. <a> Las imgenes que contienen enlaces presentan un borde y el cursor cambia al pasar sobre ellas. Las hojas de estilo pueden modificar esta presentacin.

Una imgen puede ser un enlace.

<p> <a href="http://www.likihard.com" title="Acceso a la web de LikihHard"> <img src="foto.jpg" alt="Foto Perfil" width="32" height="32" /> </a> </p>

El atributo align permite alinear la imagen respecto al texto en funcion de los valores: left, right, bottom, middle, y los atributos vspace y hspace, se encargan de definir los espacios en blanco arriba-bajo o izquierda-dererecha respectivamente. stos son vlidos en DTD Transitional.

Imgenes mapeadas En stas se definen diversas zonas qua activan distintos enlaces cuando son seleccionadas. Se utilizan para enlazar con otras pginas. Si se pulsa sobre dichas zonas, el navegador realizar la tarea programada, como acceder a un enlace determinado o ejecutar un script.

1. realizar la imagen por medio de un programa grfico o una ya existente. 2. Definir zonas de la imagen. 3. Conocer las coordenadas que delimitan las reas de la imgen que se desea sensibilizar por medio de un programa de dibujo. 4. Asignar a cada zona su correspondiente enlace o accin.

Programacin de cdigo 1. Definir la imgen mediante la etiqueta <imag /> y asignarle un nombre al mapa resultante mediante el atributo usemap. Al nombre habr que anteponerle el smbolo #.

2. Se abre el mapa en cuestin mediante la etiqueta <map>. <map> <img src="Arbol.jpg" usemap="#partes_&Aacute;rbol" border="0" width="489" height="833" alt="Soy un &Aacute;rbol"/>

3. Asignar a cada parte de la imgen la accin deseada. Por ejemplo, que se realice una sencilla rutina en JavaScript que facilita informacin del rea seleccionada sin necesidad de pulsar el ratn mediante una ventana alert.

La etiqueta <area /> se encarga de gestionar las distintas eras del mapa con la ayuda de los atributos shape, shape coords y href. href El atributo shape se encarga de delimitar las distintas zonas del mapa segn los siguientes valores:

- Rect. Rect Usada para delimitar una superficie rectangular por medio de las coordenadas del vrtice superior izquierdo e inferior derecho.

- Circle. Circle Delimita una circunferencia mediante la coordenada del centro de la misma y el valor del radio. - Poly. Poly Polgono definido mediante un conjunto de lneas. Se deben definir las coordenadas de los distintos vrtices de polilneas.

Se aade nohref="nohref" para las reas que no son seleccionables. El atributo coords se utiliza para introducir las coordenadas junto con la URL a la que se debe acceder.

1.3.3 Tablas: Elemento principal del HTML hasta la aparicin de las hojas de estilo ya que con ellas, el tema de tabulaciones y alineaciones se resolvia de manera sencilla. Su finalidad es mostrar tablas de datos en la web.

Pueden contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras mltiples y otros elementos complejos. Estn divididas en celdas que pueden contener texto, listas, imgenes, enlaces, formularios, etc.

Las etiquetas <table></table> definen el principio y el final de una tabla. El atributo width determina la anchura de la tabla mediante un porcentaje de la dimensin de la pantalla o un determinado nmero de pixeles. las etiquetas <caption></caption> ponen ttulo a la tabla.

Las etiquetas <tr></tr> crean una fila. <td></td> crea una celda. <th></th> cran una celda de encabezameinto.

Cuando el contenido de una celda debe ser vacio, vacio se emplear el caracter de escape &nbsp. &nbsp Para alinear el texto horizontalmente dentro de la celda se utiliza el atributo align que puede tener los valores: left, left center, center right y justify. justify

Para alinear el texto verticalmente dentro de la celda se utiliza el atributo align que puede tener los valores: top, top middle, middle bottom y baseline (alineado base celda).

Se pueden agrupar celdas de forma horizontal o vertical para maquetar una tabla. Los atributos colspan y rowspan permiten que una celda ocupe el espacio de varias, expandindose hacia a la derecha o hacia la siguiente fila.

Tablas complejas Formadas por ms elementos que filas y celdas de datos como una hoja de calculo de contabilidad. Cuentan con una seccin de cabecera, uina seccin de pie y varias secciones de datos sin importar el lugar donde se ubiquen las celdas que se determinen para dichas estructuras. Tambin se pueden agrupar de forma lgica diferentes columnas para aplicar estilos similares varias de ellas.

Las etiquetas <thead> y </thead> sirven para definir el grupo de cabeceras que saldrn en la primera lnea de la tabla. <tbody> y </tbody> se encargarn de agrupar el cuerpo principal de los datos en secciones. <tfoot></tfoot> definirn el pie de la tabla.

Las filas o celdas encuadradas en <thead> suelen contener elementos th que asocian esa informacin co los datos o cuerpos de seccin. Una tabla solo puede contener una cabecera y un pie, pero pueden incluir las secciones que sean necesarias.

Las etiquetas <thead> y <tfoot> deben colocarse inmediatamente antes que cualquier etiqueta <tbody>. <tbody> Las etiquetas <col> y </col> usadas para marcar una columna; y <colgroup> y </colgroup> marcan un grupo de colomnas mediante el atributo span. span

Con este par de duetos de etiquetas se pueden crear divisiones estructurales dentro de una tabla y que deben situarse detrs de la etiqueta <table> o detrs de la etiqueta <caption> si es empleada.

El atributo scope se utiliza para vncular la informacin contenida en las diferentes celdas de una tabla. Sus valores que puede tomar son:

- row. row La celda se refiere al resto de las celdas que componen su fila. - col. col La celda se refiere al resto de las celdas que componen su columna. - rowgroup. rowgroup La celda se refiere al resto de las celdas que componen su grupo de filas. - colgroup. colgroup La celda se refiere al resto de las celdas que componen su grupo de columnas.

La caracterstica principal de scope es que va dirigido a personas con discapacidad visual y al uso que stas hacen de navegadores no visuales.

Otros atributos Relacin de atributos desaprobados por la DTD Strict del XHTML para su aplicacin en las tablas, pero permitidos por la Transitional. align. Alinea horizontalmente la tabla respecto a su entorno. background. background Permite colocar un fondo para la tabla a partir de un enlace a una imgen.

bgcolor. bgcolor Da color de fondo a una tabla. border. border Define el nmero de pixeles del borde principal. bordercolor. bordercolor Define el color del borde. cellpadding. cellpadding Define en pixeles el espacio entre los bordes de la celda y el contenido de la misma. cellspacing. cellspacing Define en pixeles el espacio entre bordes de celdas.

height. height Define la altura de la celda en pixeles o porcentaje. width. width Define la anchura de la celda en pixeles o porcentaje. Se pronostica que en poco tiempo ya no sern reconocidos por los navegadores por llegar a ser obsoletas, por lo tanto, se aconseja dejar de usarlas, en su lugar utilizar hojas de estilo para maquetar tablas.

Frames

Es un marco que divide la pantalla en filas y columnas, representando ventanas. Para usarlos la declaracin DOCTYPE del documento deber ser frameset.

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD /xhtml1-frameset.dtd">

Aunque ya no es aconsejable su empleo ya que el W3C desaconsej en su momento su uso por los consiguientes inconvenientes: - Mezclan la presentacin con el contenido. - mantienen siempre la misma URL del navegador, motivo por el cual las pantallas del sitio web siempre tendran la misma URL y el mismo ttulo, provocando un deteriodo del uso de cara al posicionamiento.

- Por el motivo anterior, la opcin de favoritos queda desvirtuada ya que el navegador guardar siempre la misma URL independientemente de la pgina donde nos encontramos en el portal. - El cdigo fuente que define el frameset no tiene contenido, situacin que implica que de cara al posicionamiento, no hay informacin.

El primer paso es conocer las caractersticas del atributo target, que determina la zona de la pantalla donde se mostrarn los elementos del enlace seleccionado.

Si por ejemplo se divide la pantalla en dos partes, una superior y otra inferior: <--Cdigo para la parte superior--> <a href="top.html"target="superior">Pul se aqui para ir a la ventana superior</a>

<--Cdigo para la parte inferior--> <a href="down.html"target="inferior">P ulse aqui para ir a la ventana inferior</a>

Los valores del atributo target son: target="_blank". _blank El enlace siempre se carga en una nueva ventana. target="_selft". _selft El enlace se carga en la misma ventana en que se encuentra. target="_parent". _parent El enlace siempre se carga en el frameset inmediatamente superior. target="_top". _top El enlace siempre se carga en la totalidad de la ventana.

Una de las configuraciones tpicas es la de disear ventanas paralelas para realizar consultas desde una de ellas y ver los resultados en la otra. La sintaxis de las vistas es muy similar a la de las tablas y estn diseadas para ser procesadas rapidamente por los navegadores.

El cdigo principal de una pgina con marcos no presenta las etiquetas <body></body>,y <body></body> ste ser incluido entre las etiquetas <head></head>

Las etiquetas bsicas de los frames son: <frameset> Permite dividir la pantalla en ventanas horizontales o verticales, con los atributos: - row define el nmero de divisiones verticales en pixeles (n), porcentajes (%) o de escala relativos (*). - col define el nmero de divisiones horizontales en pixeles (n), porcentajes (%) o de escala relativos (*).

<frame> es la que llama al documento XHTML que se debe cargar una ventana y deben ser tantos como ventanas se hayan creado. Puede tener los siqguientes atributos: - src="url" Toma como valor el URL src del documento que se debe mostrar en esa ventana, si no se incluye , la ventana queda vaca.

- name="nombre ventana", da name nombre a la ventana para que pueda ser el destino de cualquier enlace. - marginwidth="valor", precisa marginwidth un nmero de pixeles entre los borde izquierdo y derecho de la ventana.

- marginheigth="valor", precisa marginheigth un nmero de pixeles entre los borde superior e inferior de la ventana. - scrolling="yes|no|auto", muestra scrolling las barras de desplazamiento o no , auto hace que el navegador decida si son necesarias o no en funcin del contenido de las mismas. - onresize, onresize cuando la ventana no puede ser redimensionada por el usuario.

<noframe> Se emplea cuando los navegadores no puedan gestionar frames y se emplea para incluir una pgina alternativa.

1.3.4 Formularios

Se utilizan para que las pginas interactuen con el usuario y asi ste pueda enviar y recibir informacin, como por ejemplo, un formulario en que los visitantes faciliten sus datos personales y recibir una determinada informacin.

Estos se pueden introducir en cualquier parte del documento, es decir, en tablas, dentro de un texto preformateado, etc. Adems, puede contener en su interior listas, imgenes, etc.

<form> </form> se utilizan para definir los formularios. Etiquetas que definen los campos de entrada: <input> </input> define botones y cuadros de texto. <select /> define campos de seleccin. <textarea> y </textarea> define las reas de texto.

- action Determina la accin que debe realizarse al pulsar el botn de ejecucin. Indica la direccin URL de la aplicacin del servidor que se encargar de procesar los datos introducidos en los formularios.

Atributos

- method Indica el mtodo de transferencia de la informacin introducida en el formulario. Pueden emplearse los mtodos get cuando se trate de scripts (cgi o php, por ejemplo) y post si la informacin va a ser enviada por correo. - enctype Determina la forma de codificar empleada para el transporte del contenido del formulario

Definicin de campos de entrada <input /> Se emplea para definir muchos elementos del formulario, como botones, cajas de texto, casillas de verificacin, etc. El atributo que determina el tipo de elemento es type.

Los distintos tipos de entrada son: - text. Entrada de textos. Es el valor por defecto del atributo type en los campos input. - password. Introduccin de texto visualizndose por cada carcter un asterisco. - hidden. Se utiliza para pasar los datos adquiridos e un formulario a otro sin que se visualice nada en pantalla. - checkbox. Cuadro vaco de seleccin. Permite selecciones multiples.

- radio. Crculo vaco de seleccin. Slo permite una opcin entre varias. - reset. Borra todos los datos introducidos en el formulario. - submit. Enva la informacin del formulario. - file. Permite adjuntar un archivo para subirlo al servidor. - button. Genera un botn genrico. - image. Permite usar una imgen como botn.

Text Ejemplos: <input type="text" id="nombre" name="nombre" size="30"/> type="text". indica campo de texto. size. determina el nmero de caracteres visibles de la casilla. id. es el identificador del elemento para impedir que haya dos elementos con el mismo nombre.

name. asigna nombre a la variable de campo. maxlength. delimita el nmero mximo de caracteres que puede ser introducidos. value. permite poner un valor inicial para la casilla. title. muestra una leyenda al situar el cursosr sobre el campo.

Se puede completar la definicin del campo asociando un texto al mismo, con la finalidad de informar al usuario, por medio de la etiqueta <label></label> que asocia un texto con un determinado elemento del formulario.

<label for="sugerencia"> Introduzca una sugerencia </label>

<input name="sugerencia" id="sugerencia" type="texto" title="introduzca una sugerencia" value="Escriba aqui.." size="20" maxlength="180" />

Password Ejemplo: <input name="clave" id="clave" type="password" title="introduzca la clave de acceso" value="" size="8" maxlength="8" />

Hidden Son como los campos de texto pero stos estan ocultos para el usuario. <input name="Server" id="Server" type="hidden" value="Jimmy" />

Checkbox Aunque se muestren varios checkbox juntos, cada uno de ellos es independiente del resto. El usuario puede activar y desactivar varias opciones relacionadas pero no excluyentes. Requieren de los atributos name, value e id., que indica el nombre de la variable de campo, el valor del campo y el identificador respectivamente.

Por regla general, para el atributo id y name siempre tendrn el mismo valor. El atributo checked debe ir cuando el checkbox aperezca seleccionado por defecto.

Ejemplo:

<input name="publicidad" type="checkbox" value="Info" checked="checked"/>Acepto recibir informacin</br> <input name="publicidad" type="checkbox" value="Msica" />Msica</br> <input name="publicidad" type="checkbox" value="Dibujo" />Dibujo</br> <input name="publicidad" type="checkbox" value="Deporte" />Deporte</br> <input name="publicidad" type="checkbox" value="Cine" />Cine</br>

Radio Permite elegir una opcin entre varias. Cada vez que se selecciona una de ellas automticamente se deselcciona la otra opcin que estaba seleccionada.

Requieren los atributos name, value e id que indica el nombre de la variable de campo, el valor del campo y el identificador respectivamente.

Para stos es muy importante que el identicador y el nombre no sean idnticos. El atributo checked determina que opcin de las disponibles aparecera seleccionada por defecto.

Ejemplo: <p> <input type="radio" name="edad" id="<18" value="-18" /> <label for="name"> Menos de 18 a&ntilde;os</label></br> <input type="radio" name="edad" id="1<>25" value="18-25" /> <label for="name">Entre 18 y 25 a&ntilde;os</label></br> <input type="radio" name="edad" id="25<>35" value="25-35" checked="checked" />

<label for="name"> Entre 25 y 35 a&ntilde;os</label></br> <input type="radio" name="edad" id="35<>50" value="35-50" /> <label for="name">Entre 35 y 50 a&ntilde;os</label></br> <input type="radio" name="edad" id="+50" value="+50" /> <label for="name"> Mayor de 50 a&ntilde;os</label></br> </p>

Reset Se usa para cambiar el contenido del formulario. Su aspecto es de un botn y su nombre se especifica con el atributo value.

Cuando se oprime ste botn , el navegador borra toda la informacin introducida y muestra el formulario en su estado original. <input type="reset" value="Borrar datos del formulario" />

Submit Botn que se encarga de enviar el formulario y se determina por el atributo value. <input type="submit" value="pulsa aqu&iacute; para enviar el formulario" />

File Muestra un cuadro de texto donde aparece el archivo seleccionado y un botn (examinar...) que permite seleccionar dicho archivo de un directorio del sistema de archivo del usuario.

Es obligatorio utilizar el atributo enctype en la etiqueta form del formulario con el valor multipart/form-data. <form accion="..." method="post" enctype="multipart/form-data"> <input type="file" name="subir" />

Button Son utiles si se utilizan junto con el javascript, pues mediante cdigo se le pueden asignar tareas complejas. <input type="button" name="cerrar_navegador" value="Cerrar" />

Image Con l se pueden personalizar por completo el aspecto de los diferentes botones de un formulario.

El atributo src indica la URL de la imgen que debe mostrar el navegador en vez del botn clsico. <input type="image" name="envio" src="enviar.gif"/>

Definicin de los campos de seleccin <select></select>. Permite al usuario seleccionar una nica opcin de un conjunto de elementos mostrados como una lista desplegable. Las distintas opciones del campo de seleccin se introducen mediante el elemento <option></option>. Con el atributo selected se puede visualizar por defecto una determinada opcin de la lista.

Otros atributos son:

- multiple.Permite seleccionar mas de una opcin, pulsando la tecla CTRL o Cmd (Win/Mac) junto con la opcin deseada.

- name. Especifica el nombre de la lista de seleccin. - size.Determina el nmero de tems visibles superior a 1, mostrando una barra de desplazamiento horizontal.

Ejemplos de dos formas diferentes para mostrar el mismo contenido seleccionable: 1. <select id="marca" name="marca"> <option value="" selected="selected">seleciona-</option> <option value="Renault">Renault</option> <option value="Seat">Seat</option> <option value="Peugeot">Peugeot</option> <option value="Mercedes">Mercedes</option> <option value="Porche">Porche</option> </select>

2. <select id="marca2" name="marca2" size="5"> <option value="" selected="selected">seleciona-</option> <option value="Renault">Renault</option> <option value="Seat">Seat</option> <option value="Peugeot">Peugeot</option> <option value="Mercedes">Mercedes</option> <option value="Porche">Porche</option> </select>

rea de texto Para definir un rea de texto de mltiples lneas, se utiliza <textarea></textarea>, que requiere los atributos name, title e id.

Para definir las dimensiones del rea, se tiene: - cols. determina el nmero de caracteres de ancho de la ventana de texto. - rows. determina el nmero de lneas visibles del rea de texto, en caracteres.

Ejemplo: <textarea name="quejas" id="quejas" rows="8"cols="60"> Aproveche este espacio para mostrar sus quejas </textarea>

Legend y Fieldset <filedset></fieldset> agrupa los campos de un formulario mostrando un rectngulo alrededor de los mismos mientras que la etiqueta <legend> y </legend> asigna un nombre a cada grupo. Con stas se estructura mejor un formulario.

Ejemplo: <fieldset> <legend>Datos Personales</legend> <label for="nombre">Nombre</label><br/> <input type="text"name="nombre"id="nombre"s ize="40"maxlength="100"/><br/> </fieldset>