APÉNDICE A Tutorial de HTML - akus.net Diseño de páginas Web
Anuncio
Apéndice A: Tutorial de HTML APÉNDICE A Tutorial de HTML A continuación se presenta un tutorial que describirá paso a paso cómo podemos crear páginas web utilizando HTML. No pretende ser un manual donde se muestre de forma exhaustiva todas las posibilidades de HTML. El objetivo es introducir al lector de forma rápida y amena en las técnicas más importantes para la creación de documentos WWW. Para conseguir este objetivo se recubrirá de forma continua al ejemplo. Cada nuevo comando presentado será ilustrado con un ejemplo, donde podrá verse junto con el resultado conseguido en el navegador. En ningún caso se mostrará todas las opciones y parámetros posibles para cada comando, dejando esta misión a textos más extensos. A.1. ESTRUCTURA DE UN DOCUMENTO HTML El lenguaje HTML está basado en el uso de marcadores, que permitirá al navegador conocer cuando comienza un determinado comando <COMAMDO> y cuando termina </COMANDO>. Estos marcadores suelen conocerse con el nombre de Tags. En primer lugar vamos a describir la estructura que presenta todo fichero HTML: <html> <head> ........ </head> <body> ........ </body> </html> A-1 Desarrollo de Aplicaciones Web con Software Libre <html>..</html> <head>..</head> Indican el principio y el fin de la página web Delimitan la cabecera del documento. Esta sección se utiliza para indicar una serie de información referente a la página web, pero esta información no es visualizada; al menos dentro de la página. <title>..</title> Titulo que damos a la página. <body>..</body> Cuerpo del documento. En esta sección se introducirán los elementos necesarios para representar la página: textos, imágenes,.. A continuación se muestra una página web completa: <HTML> <HEAD> <TITLE> Título de la página Web </TITLE> </HEAD> <BODY> hola mundo </BODY> </HTML> NOTA: los saltos de línea o espacios en blanco entre tags no influyen en el resultado final. Sin embargo, su correcta utilización permiten obtener un código HTML estructurado y fácil de entender. A.2. DANDO FORMATO AL TEXTO Uno de los mayores atractivos de la páginas web es la gran variedad de posibilidades que nos proporciona HTML para dar formato a los textos. En esta sección trataremos de dar un repaso a los comandos más utilizados para este propósito: La mejor forma de entender como se utiliza HTML es por medio de un ejemplo. A continuación se muestra un fichero HTML con texto en varios formatos junto con su representación obtenida por el navegador: A-2 Apéndice A: Tutorial de HTML <HTML> <HEAD> <TITLE> Dando Formato al texto </TITLE> </HEAD> <BODY> <B> negrita </B> <BR> <I> itálica </I> <BR> <BIG> grande </BIG> <BR> <SMALL> pequeña </SMALL> <BR> línea de separación <HR> <CITE> cita </CITE> <BR> <STRONG> fuerte </STRONG> <BR> <STRIKE> tachado</STRIKE> <BR> nuevo párrafo <p> <BLINK>parpadeante</BLINK><BR> <EM> enfatizada </EM> <BR> <SUB>subindice </SUB> <BR> <SUP>superindice </SUP> <BR> </BODY> </HTML> <B>...</B> <I>...</I> <BIG>...</BIG> <SMALL>...</SMALL> <CITE>...</CITA> <STRONG>...</STRONG> <STRIKE>...</STRIKE > <BLINK>...</BLINK > <EM>...</EM> <SUB>...</SUB> <SUP>...</SUP> Texto en negrita. Texto en itálica Texto grande Texto pequeño Texto con formato cita Texto resaltado Texto tachado Texto parpadeante (solo con Netscape) Texto con formato enfatizado Texto subíndice Texto superíndice Como se ha indicado los saltos de línea dentro de un documento HTML son ignorados. Por esta razón si queremos continuar en la siguiente línea se introduce el tag <br>. En la siguiente tabla se muestran las posibilidades que HTML tiene para definir y separar párrafos. <BR> Salto de línea sin cambiar de párrafo. Indican el principio y el fin de un párrafo. A diferencia del comando <br>, se deja un poco de separación entre párrafos. <P>...</P> El final de comando </p> es opcional, se presupone al comenzar un nuevo párrafo. parámetros: ALIGN=LEFT | CENTER | RIGHT – Alineamiento de párrafo. <HR> Intercala una línea horizontal de separación. WIDTH=x% - Ancho de la línea en porcentaje. parámetros: SIZE=n - Grosor de la línea en pixels. ALIGN=LEFT | CENTER | RIGHT – Alineamiento A-3 Desarrollo de Aplicaciones Web con Software Libre Como se hemos comentado algunos tags tienen la posibilidad de ser modificados por medio de parámetros. En este caso se utiliza la siguiente sintaxis: <COMANDO parám1=valor espacios”...> texto </COMANDO> parám2=”valor con Nótese como cuando el valor que queremos asignar a un parámetro incluye espacios en blanco, resulta imprescindible el uso de comillas. En caso contrario las comillas son opcionales. En la siguiente figura se muestran algunos ejemplos de como se pueden introducir párrafos, indicando algunos parámetros de alineación: <HTML> <HEAD> <TITLE> Definiendo Párrafos </TITLE> </HEAD> <BODY> <P>Esto es un párrafo <p align=center> Otro centrado <P align=right> Otro a la derecha <BR>continuo en el mismo <HR> línea de separación <HR width=50% size=20> otra línea más gruesa </BODY> </HTML> En HTML también podemos introducir párrafos que sean considerados como un título o encabezado de una sección y por tanto sean visualizados con un tamaño de letra diferente. Disponemos de 6 niveles con diferentes tamaños A-4 Apéndice A: Tutorial de HTML <HTML> <HEAD> <TITLE> Encabezados </TITLE> </HEAD> <BODY> <H1>Encabezado <H2>Encabezado <H3>Encabezado <H4>Encabezado <H5>Encabezado <H6>Encabezado </BODY> </HTML> <Hn>...</Hn> 1</H1> 2</H2> 3</H3> 4</H4> 5</H5> 6</H6> Encabezado de nivel n. A partir de la versión 3.2 de HTML se dispone de la posibilidad de definir el tamaño, color y tipo de letra <FONT>..</FONT> Define el tipo de letra a utilizar. SIZE=n - Tamaño de la fuente (n=1..7). COLOR= Color - El color de la fuente se basa en la combinación de los colores básicos, rojo, verde y azul; parámetros: codificado mediante tres valores hexadecimales, llamado true color, o también con nombres de colores ya definidos. FACE= Fuente - Tipo de fuente. (solo funciona en Internet Explorer) Pasamos a ver este comando en acción: <HTML> <HEAD> <TITLE>Fuentes</TITLE> </HEAD> <BODY> <FONT size=5 color=#FF0000 face=Impact> Fuente de tamaño 5, en rojo y tipo ‘Impact’ </FONT> </BODY> </HTML> A-5 Desarrollo de Aplicaciones Web con Software Libre A.3. LISTAS Cuando queremos introducir datos en una página estructurados en forma de listas, HTML nos ofrece un mecanismo muy sencillo para conseguirlo. Disponemos de tres tipos de listas: Listas con viñetas <UL>, Listas numeradas <OL>, Listas de definición <DL> Dentro de las listas existen varios tag a tener en cuenta: <LI>...</LI> <DT> <DD> Define un item dentro de las listas, podemos utilizar </LI>, o no el resultado es el mismo. Lo utilizamos para poner el elemento a definir. Lo utilizamos para poner la definición del elemento anteriormente puesto. Un ejemplo nos mostrará lo fácil que resulta utilizar estas etiquetas. NOTA: Recordar que los espacios introducidos a la izquierda no tienen repercusión en la página, se han introducido para mayor claridad. A partir de ahora, para mayor claridad, los ejemplos se mostrarán sólo con el contenido del cuerpo de la página. <H3>Lista simple con viñetas</H3> <UL> <LI> Primer Item <LI> Segundo Item <LI> Tercer Item </UL> <H3>Hacer mañana:</H3> <OL> <LI> Ir al supermercado <UL> <LI> Leche <LI> huevos <LI> carne </UL> <LI> Lavar el coche <LI> Hacer mi página web </OL> <H3>Áreas de polígonos:</H3> <DL> <DT> Rectángulo <DD> Base por Altura <DT> Triángulo <DD> Base por Altura entre dos <DT> Círculo <DD> Pi por R al cuadrado </DL> A-6 Apéndice A: Tutorial de HTML A.4. LOS ENLACES Los enlaces (también conocidos como hipervínculos) constituyen uno de los elementos más importantes en una página HTML, dado que son la esencia misma de la aplicación WWW. Los hipervínculos nos permiten enlazar texto (o imágenes) de nuestra página con otras páginas, de maneara que cuando en un navegador se pulse sobre el hipervínculo, se pasará a visualizar la página a la que enlaza. <HTML> <HEAD> <TITLE>Ejemplo de Enlace</TITLE> </HEAD> <BODY> <A href=http://www.upv.es/ind.html> Saltar a página de la UPV </A> </BODY> </HTML> Como puede verse en el ejemplo, el navegador resalta de forma especial el texto correspondiente a un enlace. En el caso del Internet Explorer en azul y subrayado para los no enlaces visitados y violeta y subrayado para los que ya han sido visitados. Si con el ratón pulsáramos sobre este texto pasaríamos a visualizar la página cuya dirección es: “http://www.upv.es/ind.html” protocolo de acceso servidor fichero dentro del servidor No solamente podremos enlazar con otras páginas web, sino que podemos indicar cualquier información presente en Internet. Cada posible recurso es identificado por medio de una dirección, conocida como URL (Uniform Resource Location); Notación estándar para la locolización de recursos en Internet. No sólo hay más de dos millones de ordenadores conectados a los varios miles de redes que forman la Internet, sino que existen múltiples protocolos o formas diferentes de acceder a la información (ftp, gopher, http, news, etc.). Los URL aportan esos dos datos esenciales: dónde se encuentra un recurso y cómo se puede acceder a él. La sintaxis de los URL es la siguiente: <protocolo>:<parte-específica-del-protocolo> La parte específica del esquema informa sobre su localización en la red, de un modo que depende de cada método de acceso. En la actualidad existen esquemas definidos para los siguientes servicios: A-7 Desarrollo de Aplicaciones Web con Software Libre protocolo SINTAXIS http ftp http://<host>:<port>/<path>?<searchpart> ftp://user:password@host:port/path;type= <typecode> gopher://<host>:<port>/<gopher-path> mailto:<mail-address> news:<newsgroup-name> news:<article-id>@<newsgroup-name> telnet://user:password@<host>:<port> file://<path-file> gopher email news(grupos) news(articulo) telnet file Ejemplos de algunos URL’s http://www.upv.es Se direcciona el servidor WWW “www.upv.es”. En su directorio raíz ha de existir el fichero “index.html” que será visualizado http://www.eug.upv.es/bataller/fivh.html Se indica una página web en concreto de un servidor. ftp://ftp.upv.es URL correspondiente al servidor ftp “ftp.upv.es”. Se visualizará su directorio raiz. ftp://ftp.upv.es/directorio/fichero.doc Se direcciona un fichero determinado de este servidor. mailto:[email protected] Este URL posibilita el envío de un mensaje de correo electrónico a la dirección [email protected]) news:comp.infosystems.gopher Será visualizado en grupo de noticias “comp.infosystems.gopher” news:[email protected] Se accederá a un artículo en concreto de este grupo de noticias. Si queremos enlazar con una página que se encuentra en el mismo servidor es posible abreviar el principio de la dirección; lo mismo podemos hacer con los directorios, de igual forma como se puede abreviar el path cuando se trabaja con fichero. Por ejemplo, si quisiéramos introducir un link a otra página situado en nuestro mismo directorio, escribiríamos: <A href=página.html> Saltar a página situada en el mismo directorio </A> A-8 Apéndice A: Tutorial de HTML A.5. INSERTANDO IMÁGENES Una de las opciones que nos permiten realizar páginas más llamativas es la posibilidad de incorporar imágenes. Esto puede realizarse de forma muy sencilla tal y como se muestra en el siguiente ejemplo: <HTML> <HEAD> <TITLE>Imágenes </TITLE> </HEAD> <BODY> <img src=”imagen.gif”> </BODY> </HTML> El fichero imagen.gif ha de contener la imagen a representar y ha de estar almacenado en el mismo directorio de la página. <IMG> Inserta una imagen. SRC=imagen - URL donde se localiza la imagen. ALT=texto - Texto alternativo que se mostrará en caso de que el navegador no pueda representar imágenes. parámetros: ALING=TOP | MIDDLE | BOTTOM | LEFT | CENTER | RIGHT – Alineamiento arriba, en medio, abajo, izquierda, ... BORDER=n – Resalta la imagen con un borde de n pixels. Al igual que ocurría con los “links”, cuando se indique la ubicación de la imagen, no es necesario indicar la URL completa. Si por ejemplo el fichero se encuentra en la misma página donde está la página basta con indicar su nombre. En la actualidad existen dos formatos gráficos que son aceptados por todos los navegadores: Ficheros GIF, apropiados para representar dibujos de hasta 256 colores. Una característica muy interesante es que pueden ser animados, en este caso en lugar de una imagen se representarán una secuencia de imágenes formando una pequeña animación. Ficheros JPG, pensados para representar fotografías. En estos casos obtienen un alto nivel de compresión, aunque pueden perder algo de la información original. A-9 Desarrollo de Aplicaciones Web con Software Libre También es posible indicar una imagen que será utilizada como fondo de nuestra página. Para conseguirlo no tienes más que añadir el parámetro BACKGROUND a la etiqueta BODY. <BODY background=”fondo.gif”> A continuación se muestra un ejemplo. Nótese como la imagen se repite formando un mosaico: <HTML> <HEAD> <TITLE> Fondo </TITLE> </HEAD> <BODY background=”fondo.gif”> Ejemplo de página con fondo </BODY> </HTML> La inserción de imágenes con enlaces: Las imágenes, también se pueden utilizar como elemento de enlaces o hipervinculos, bien para ir a otra página de nuestra propia web, o para ir a una web ajena. Así mismo las podemos utilizar para poner los hipervinculos del correo electrónico. La forma de hacerlo sería: </A HREF=”documento.html><IMG SRC=”nombre imagen.gif” Atl=”texto alternativo”></A> A.6. TABLAS En este apartado se va a comentar la posibilidad de organizar los datos en forma de tablas. Las tablas resultan un recurso muy utilizado en HTML, no solamente cuando queremos por ejemplo introducir una tabla con valores numéricos, sino sobre todo para conseguir una apariencia vistosa y estructurada. Se utiliza entre otras muchas cosas para conseguir texto en varias columnas o para introducir un menú con iconos a la izquierda de una página. La estructura básica de una tabla se muestra a continuación: A-10 Apéndice A: Tutorial de HTML <TABLE> <TR> <TD> <TD> </TR> <TR> <TD> <TD> </TR> </TABLE> Sus valores serían: Fila=1,Col=1 </TD> Fila=1,Col=2 </TD> Fila=2,Col=1 </TD> Fila=2,Col=2 </TD> <TABLE>...</TABLE> <TR>...</TR> <TD>...</TD> Indica el comienzo y final de una tabla. Indica cada fila. Define cada celda de la fila. También podemos encontrarnos con tablas dentro de otras tablas, solo tenemos que observar donde empieza y termina cada tabla con el comando >TABLE>...</TABLE>. En las celdas de una tabla se pueden introducir datos, textos, hipervinculos, tablas como hemos indicado antes, imágenes, etc... Dentro de la estructura de una tabla tenemos algunos comandos para variar su forma, (como el que nos indica el tamaño del borde, ancho de la celda...) estos comandos son: borde=”n” width=”100%” width=”75” height=”100%” height=”75” cellpadding=”n” cellspacing=”n” bgcolor=”FFFF00” bgcolor=”yelow” aling=”right”/”center”/”lelft” valing=”top”/”bottom”/”middle” colspan=”n” rowspan=”n” Indica el tamaño que le queremos dar al borde de una tabla. Especifica el ancho de una tabla, este puede ser en porcentaje (100%) o bien en pixeles (75). Especifica el alto de la tabla, también este puede ser en porcentaje o en pixeles. Tanto el alto y el ancho valen para el total de una tabla, como para una celda. Nos permite dar el margen entre los bordes de cada celda y el texto incluido en ellas. Nos permite dar el espacio entre las celdas de una tablas. Define el color en las celdas o tablas. La diferencia de ambos ejemplos esta en la codificación, el primero es true color, se refiere a la combinación de los colores básicos y el segundo son colores predefinidos con nombre. Indica el alineamiento, si es derecha, centro o izquierda. Cuando el comando aling tiene una p delante indica que es de un párrafo. Indica el alineamiento del texto en posición vertical, arriba, inferior y medio. Define el número de columnas a combinar de cada celda. Define el número de celdas a combinar de una tabla. A-11 Desarrollo de Aplicaciones Web con Software Libre Un ejemplo de la estructura de una tabla podría ser el siguiente: <TABLE border=3 cellspacing=10 width=90%> <TR> <TD width=50% bgcolor=yellow height=50 align=center> <B>Nombre</B> </TD> <TD width=20% bgcolor=yellow height=50 align=center> <B>D.N.I.</B> </TD> <TD width=30% bgcolor=yellow height=50 align=center> <B>Convocatoria</B> </TD> </TR> <TR> <TD align=left> Juan Peiro Martínez </TD> <TD align=right> 20.407.315 </TD> <TD align=center> Primera </TD> </TR> <TR> <TD align=left> Felipe Alfonso Pérez </TD> <TD align=right> 19.204.712 </TD> <TD align=center> Segunda </TD> </TR> </TABLE> En el caso de la combinación de columnas y celdas de una tabla quedaría de la siguiente manera: <TABLE border=1 cellpadding=0 cellspacing=0 width=50%> <TR> <TD> width=100% colspan=2> <p align=center>Estado </p></TD> </TR> <TR> <TD width=50% align=center>Verdadero</TD> </TR> <TR> <TD width=50% align=center>Falso</TD> </TR> <TR> <TD width=50% rowspan=2> <p align=center>03/06/99</p></TD> </TR> <TR> <TD width=50% align=center>01/04/00</TD> </TR> </TABLE> A-12 Apéndice A: Tutorial de HTML A.7. FORMULARIOS Hasta la aparición de la versión 2 de HTML un usuario solo podía acceder a un servidor y leer las páginas web en este almacenadas. Con la aparición de los formularios un usuario podía además mandar información al servidor, lo que habría un amplio abanico de nuevas posibilidades a la WWW. Se podía ofrecer información personalizada, realizar pedidos por Internet, búsquedas, .. etc. Cuando los datos sean introducidos en un cuestionario y se pulse el botón “enviar”, el navegador mandará todos estos datos al servidor (utilizando el estándar CGI), el servidor pondrá en funcionamiento un programa (normalmente en C, PERL o ASP) y le pasará todos estos datos. Este programa, escrito específicamente para procesar este formulario, tras realizar su tarea escribirá como salida una página HTML, que será mandada al navegador. Para definir un formulario dentro de un documento HTML basta con introducir la etiqueta <FORM> y como es habitual, terminaremos con </FORM>. Esta etiqueta ha de incorporar necesariamente dos parámetros: ACTION, donde se indica el programa que procesará los datos del formulario y METHOD, forma como se le van a pasar los datos al programa (hay dos GET y POST). <FORM action=cgi-bin/programa.exe method=GET> ... </FORM> Este formulario mandará los datos introducidos a “programa.exe” utilizando el método “GET”. <FORM>..</FORM> Indicamos que queremos introducir un formulario ACTION=url – Programa que procesará los datos del formulario. parámetros: METHOD=GET/POST – Forma en la que se le pasarán los datos. Dentro del formulario podremos incluir texto, imágenes y cualquier etiqueta HTML, aunque lo que resulta imprescindible son las entradas de datos, esto lo conseguiremos con la etiqueta INPUT. <input> Definimos una entrada dentro de un formulario TYPE=TEXT/RADIO/ ... – Tipo de entrada. NAME=texto - Nombre de la variable a la que se asignará el parámetros: valor introducido. VALUE=valor – Valor asignado por defecto. Existe una gran variedad de tipos de entradas que pueden ser incluidas en un formulario. A continuación se muestra un ejemplo con todas ellas: A-13 Desarrollo de Aplicaciones Web con Software Libre <HTML> <HEAD> <TITLE> Formulario </TITLE> </HEAD> <BODY> <FORM action=prg.exe method=GET> Nombre:<input type=text name=nombre> DNI:<input type=pasword name=dni> Estado Civil: <BR> Soltero: <INPUT type=radio name=estado value=soltero> Casado: <INPUT type=radio name=estado value=casado> Viudo: <INPUT type=radio name=estado value=viudo> <INPUT type=checkbox name=vehiculo> Vehículo propio<BR> Curriculum:<BR> <TEXTAREA name=curric rows=3 cols=27> Escribe aquí lo que quieras </TEXTAREA><BR> Incluir fichero con fotografía:<BR> <INPUT type=file name=foto> <INPUT type=submit value="Enviar"> <INPUT type=reset value="Borrar"> </FORM> </BODY></HTML> 1.7.1 TIPOS DE ENTRADAS EN UN FORMULARIO Líneas de Texto (TEXT) Es el tipo de entrada más utilizada por lo que si no se indica el parámetro TYPE es la que se toma por defecto. Además de los parámetros NAME y VALUE comunes a todas las entradas, permite dos parámetros adicionales: SIZE con el que podemos indicar el tamaño del cuadro de texto que será visualizado (se realizará un desplazamiento cuando el número de caracteres introducidos sea mayor) y MAXLENGTH con el que podemos limitar el número máximo de caracteres que se pueden introducir. De no indicarse este último parámetro se podrán introducir un número ilimitado de caracteres. Ejemplo: <INPUT name=nombre value=”valor inicial” size=5 maxlength=20> No se ha introducido el parámetro “type” por lo que se sobreentiende que es de tipo texto. El valor introducido será asignado a la variable “nombre”. En un principio esta entrada de texto tendrá un valor introducido, “valor inicial”. En pantalla se visualizará un rectángulo donde solo se podrán visualizar 5 caracteres simultáneamente y el número máximo de caracteres que se podrán introducir es de 20. A-14 Apéndice A: Tutorial de HTML Entradas de Contraseñas (PASSWORD) En muchos servicios ofrecidos a través de www se requiere la identificación del usuario. Con este propósito es frecuente que se le pida la introducción de una palabra secreta que solo el conoce. Si esto se hiciera mediante un campo de texto, al introducir la contraseña podría ser descubierta por otros usuarios que pudieran estar mirando la pantalla del navegador. Para solucionar este inconveniente se ha definido el tipo de entrada PASSWORD, que actúa exactamente igual que el tipo TEXT, con la diferencia de que cuando el usuario escriba en esta entrada, en lugar de visualizarse los caracteres introducidos se visualizarán asteriscos. Casillas de Selección Simple (RADIO) Con este tipo de entrada se pueden crear una lista de casillas para que el usuario seleccione una (solo una) de entre estas opciones. El lector estará acostumbrado a trabajar con este tipo de entradas, tienen la característica de ser casillas redondas y cuando se selecciona una de ellas automáticamente si hubiera alguna activa se quitaría la selección. Soltero: <INPUT type=radio name=estado value=soltero> Casado: <INPUT type=radio name=estado value=casado> Viudo: <INPUT type=radio name=estado value=viudo> Como puede observarse en el ejemplo anterior, podemos indicar que las tres entradas de tipo “radio” corresponden a una misma lista de opciones, al tener todas el mismo nombre, “estado”. También es posible indicar el atributo CHECKED, si queremos que una de las opciones aparezca al principio seleccionada. Casillas de Selección Múltiple (CHECKBOX) Este tipo de entrada se utiliza para crear una o varias casillas que pueden ser seleccionadas libremente por el usuario, de manera que en un momento determinado cada una de ellas podrá estar seleccionada o no. Presentan el aspecto de una caja cuadrada. Extra de queso: <INPUT type=checkbox name=queso value=SI> Chanpiñones: <INPUT type=checkbox name=champi value=SI> Oregano: <INPUT type=checkbox name=oregano value=SI> Campos ocultos (HIDDEN) Una entrada de tipo “HIDDEN” no es realmente una entrada que pueda ser introducida por el usuario, si no un valor constante que nosotros queremos asignar a un variable. Puede parecer de poca utilidad la definición de una entrada cuyo valor no puede ser modificado e incluso que ni siquiera conoce de su existencia el usuario de la aplicación. Mediante un ejemplo quedará más claro en que casos puede resultar extremadamente útil: A-15 Desarrollo de Aplicaciones Web con Software Libre Imaginemos que estamos realizando un sitio web para hacer pedidos a una empresa suministradora de motores. Esta empresa dispone de tres tipos de motores A,B y C, por lo que se decide realizar tres formularios diferentes, uno para cada tipo de motor. Como la información a solicitar en los tres casos es muy parecida se ha creído conveniente implementar un único programa CGI para capturar los datos provenientes de cada uno de los formularios. El problema que surge a continuación es: ¿Cómo el programa puede diferenciar que los datos provienen del formulario A, B o C? La repuesta es sencilla, utilizando un campo oculto en cada uno de los cuestionarios, que identifique el tipo de motor que se está introduciendo. Por ejemplo en el cuestionario A se añadiría la siguiente entrada: <INPUT type=hidden name=tipo_motor value=A> De esta forma, tras rellenar el cuestionario, el programa que procesa la información tendrá definida la variable “tipo_motor” con el valor asignado “A”. Hay que volver a insistir en que el navegador no ha mostrado en pantalla esta entrada, por lo que el usuario desconoce su existencia. Botón para aceptar (SUBMIT) Cuando se introduzca este tipo de entrada en un formulario en navegador introducirá un botón, cuya función será mandar los datos al servidor, cuando este sea pulsado. <INPUT type=submit value=Enviar> Si definimos el parámetro “value”, en el botón aparece el texto indicado. Por el contrario, no tiene excesivo sentido la definición del parámetro “name”, dado que realmente no hay ninguna entrada de datos asociada a la entrada. Botón para borrar datos introducidos (RESET) Este botón se utiliza para restaurar en el formulario los datos introducidos por defecto. Cuando el usuario lo pulse todas las entradas tomarán los valores que tenía en un primer momento el cuestionario. <INPUT type=reset value=Borrar> Áreas de Texto (TEXTAREA) Esta entrada muestra un rectángulo donde el usuario puede escribir varias líneas de texto. A diferencia de las entradas anteriores no se utiliza la etiqueta “input”; la sintaxis a seguir se muestra a continuación: <TEXTAREA>.. </TEXTAREA > Indicamos que queremos introducir una entrada de tipo área de texto. Todo lo que escribamos hasta la etiqueta de final, será el valor visualizado inicialmente en el área. A-16 Apéndice A: Tutorial de HTML NAME=nombre – Variable donde se almacenará. parámetros: ROWN=n – Número de filas del área de texto. COLS=n – Número de columnas del área de texto. Ejemplo: <TEXTAREA name=nombre rown=8 cols=20> Introduce un texto </TEXTAREA> Selección en una lista (SELECT) La etiqueta SELECT permite definir una lista de elementos, para que el usuario pueda seleccionar uno de ellos. <SELECT>..</SELECT> Se introduce una lista de selección. NAME=nombre – Variable donde se almacenará. SIZE=n – Número de ítems que se visualizarán parámetros: simultáneamente. Si no se indica el parámetro, se considerará como una lista desplegable. MULTIPLE –Permite la selección de varios elementos. <option> Se indica un nuevo elemento de una lista. VALUE=valor – Valor que se dará a la variable si se parámetros: selecciona la opción. SELECTED – Elemento seleccionado por defecto. A continuación se muestran varios ejemplos: Ejemplo de lista desplegable, con una opción seleccionada por defecto: <SELECT name=provincia> <OPTION>Castellón <OPTION SELECTED>Valencia <OPTION>Alicante </SELECT> Ejemplo de lista con barra de desplazamiento, con selección múltiple: <SELECT name=provincia size=4 multiple> <OPTION> Primera <OPTION> Segunda <OPTION> Tercera <OPTION> Cuarta <OPTION> Quinta </SELECT> Mandar un formulario a una dirección de correo: Lo más habitual es que los datos introducidos en un formulario sean mandados a un programa CGI que se encargue de procesarlos (por ejemplo añadiéndolos en una A-17 Desarrollo de Aplicaciones Web con Software Libre base de datos). La escritura de este tipo de programas no está al alcance de cualquiera, requiere de conocimientos específicos y es imprescindible disponer de un servidor con permisos para loa ejecución de programas. Si no se dan estas circunstancias pero estamos interesados en incluir un formulario en una de nuestras páginas, disponemos de un pequeño truco para conseguirlo. Los datos introducidos pueden ser enviados a una dirección de correo electrónico. Vasta con escribir: <FORM action=mailto:[email protected] method=post enctype=text/plain> .. </FORM> De esta forma cada vez que cualquier persona rellene el cuestionario de nuestra página web y pulse el botón “SUBMIT”, su navegador enviará los datos a la URL indicada en “ACTION”; en este caso nuestra dirección de correo “[email protected]”. Y como consecuencia recibiremos un correo que tendrá una apariencia similar a: nombre: Juan Carlos Martínez dni: 22345678 estado: soltero curric: ... Si además queremos que el navegador incluya el campo “asunto” al mensaje, podríamos escribir: .. action=”mailto:[email protected]?subject=repuesta a formulario”.. A-18
