Html
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Html as PDF for free.
More details
- Words: 5,407
- Pages: 27
1. Directivas Las directiva (tags) en HTML proporcionan información adicional al cliente que visualiza el documento. Un documento sin ninguna directiva no resaltará ninguna parte del texto. Las directivas en HTML son códigos especiales que estan contenidos en un documento. Se usan caracteres especiales para delimitarlas. La directiva para iniciar el enfatizado de texto se muestra a continuación: <EM> Las directivas, por lo general, se agrupan por pares: uno inicia la acción, mientras su par la finaliza. La directiva para finalizar el enfatizado es: Como se puede ver, el par de final de acción es el mismo que el de inicio incluyendo el caracter / HTML no es sensible a mayúsculas; esto es, la directiva puede escribirse como <em> y , o como <Em> y . Los caracteres < y > son códigos reservados. Si se quieren mostrar dichos caracteres dentro del texto, se debe utilizar el concepto de entidades que se verá en el siguiente punto.
2. Entidades Las entidades proporcionan un método para incluir caracteres especiales o reservados dentro de un documento: • • •
Caracteres internacionales (ej. caracteres acentuados) Símbolos tipográficos Símbolos especiales para HTML
Las entidades son especificadas utilizando el siguiente formato: el inicio de la entidad se marca con el caracter `&', mientras que el final de la entidad se marca con el caracter `;'. Entre los dos caracteres citados se especificará el nombre de una entidad. Algunas de las entidades más comunes son:
CARACTER ENTIDAD DESCRIPCION --------------------------------------------------------< < Menor que > > Mayor que & & Ampersan á Á â Â à À å Å ñ Ñ
á Á â Â à À å Å ñ Ñ
a A a A a A a A n N
agudo agudo circunflejo circunflejo grave grave tilde tilde
3. Estructura de un documento HTML Los documentos HTML se dividen en tres partes bien diferenciadas: 1. La Cabecera de tipo de documento La usa el software para saber la versión de HTML que se está usando (no visible). 2. La Cabecera del documento (document HEADer) Usada para dar información sobre el documento (no visible). 3. El Cuerpo del documento (document BODY) Es la parte principal del documento, la parte que el usuario ve. Estas tres partes pueden verse en la plantilla mostrada a continuación.
La primera linea indica que es un documento HTML: La segunda y tercera linea delimitan la cabecera del documento: La cuarta y quinta linea delimitan el cuerpo del documento:
La última linea indica que finaliza el documento HTML:
4.1. Título El título del documento se almacena en la cabecera (HEAD) del documento. No es visible dentro de la página web, pero muchos visualizadores lo muestran en alguna parte. Tambien es usado como el título por defecto para las entradas de las ``hotlist'' o ``bookmark'' que el usuario va almacenando. Para definir el título, se hará dentro de la directiva HEAD y utilizando la directiva <TITLE>... ... <TITLE>Introduccion a HTML ...
La apariencia del título del documento será: <TITLE>Introduccion a HTML
4.2. Cabeceras Las cabeceras permiten dividir lógicamente el documento en secciones, subsecciones, etc. HTML prevee hasta seis niveles de cabeceras. Las cabeceras aparecen solamente en el cuerpo del documento (directiva BODY, no confundir con la cabecera de documento -document HEADer-). Para especificar un texto cabecera de nivel requerido se hará: ...Cabecera
de nivel 2 de nivel 3 de nivel 6
Más general . . . Más especifico
Lo descrito anteriormente aparecería de la siguiente forma:
Cabecera de nivel 1
Cabecera de nivel 2 Cabecera de nivel 3 Cabecera de nivel 6
4.3. Párrafos La mayor parte del texto que se escribe forma parte de un párrafo de texto. Para establecer una separación de párrafos, las dos porciones de texto que pertenecen a párrafos diferentes deben formar parte de distintas secciones dentro de un documento HTML. La simple escritura de un retorno de carro no es suficiente (uno o más retornos de carro son tratados como un simple espacio en blanco). Para crear un párrafo, basta con escribir el texto que lo forma dentro de la directiva
El usuario verá: Este es mi primer párrafo. aunque escriba este texto en otra linea, seguirá perteneciendo al mismo párrafo. Este es mi segundo párrafo. Mira como se ha creado una separación entre párrafos.
4.4. Finales de linea En numerosas ocasiones es necesario forzar un final de linea en el documento formateado (un simple retorno de carro no es suficiente). Para ello, es suficiente con el uso de la directiva simple
(no necesita la directiva homóloga de cierre): ...
El usuario verá: Yo realmente veré la siguiente linea en otra linea.
4.5. Centrado y Parpadeo Dos directivas muy interesantes, aunque no soportadas por todos los visualizadores, son las de centrado de texto y parpadeo de texto: Para centrar un texto (u otro objeto, imagen, tabla, ...) se utiliza la directiva ... Ej. Con Esta linea la hemos centrado , el usuario visualizará: Esta linea la hemos centrado De la misma forma, para que un texto parpadee se utiliza la directiva Ej. Con , el usuario visualizará: Esta linea la hacemos parpadear
5. Texto enfatizado Dentro de un documento HTML se puede indicar que un texto tenga un estilo o tipografía especial. Hay 2 tipos de estilos: lógicos y físicos.Con estilos lógicos se formatea el texto de acuerdo con su significado, mientras que las de estilo físico indican la apariencia específica. Por ejemplo, en la anterior frase las palabras ``estilos lógicos'' fue marcado como una ``definición.'' El mismo efecto (enfatizar esas palabras con italics), podría haber sido alcanzado uti lizando otra directiva que indica "pon esas palabras en italics".
Físico frente a Lógico: Usa el estilo Lógico cuando sea posible Si un estilo físico y Lógico producen el mismo resultado ¿Cuál utilizo? En un documento HTML, el contenido está separado de la presentación. De ese modo las directivas que indican un nivel uno de encabezamiento son interpretadas como un nivel uno de encabezamiento, pero no especifica cómo es ese encabezamiento. Por ejemplo, letra tipo Times, negrita, de tamaño 24 puntos, centrado en la parte superior de la página. La ventaja es que el usuario decide la presentación de la cabecera en el dispositivo de presentación (el visualizador World Wide Web) Además, directivas Lógicas refuerzan la consistencia del documento. Es más sencillo marcar algo como que recordar que eso significa:letra tipo Times, negrita, de tamaño 24 puntos.
2. Entidades Las entidades proporcionan un método para incluir caracteres especiales o reservados dentro de un documento: • • •
Caracteres internacionales (ej. caracteres acentuados) Símbolos tipográficos Símbolos especiales para HTML
Las entidades son especificadas utilizando el siguiente formato: el inicio de la entidad se marca con el caracter `&', mientras que el final de la entidad se marca con el caracter `;'. Entre los dos caracteres citados se especificará el nombre de una entidad. Algunas de las entidades más comunes son:
CARACTER ENTIDAD DESCRIPCION --------------------------------------------------------< < Menor que > > Mayor que & & Ampersan á Á â Â à À å Å ñ Ñ
á Á â Â à À å Å ñ Ñ
a A a A a A a A n N
agudo agudo circunflejo circunflejo grave grave tilde tilde
3. Estructura de un documento HTML Los documentos HTML se dividen en tres partes bien diferenciadas: 1. La Cabecera de tipo de documento La usa el software para saber la versión de HTML que se está usando (no visible). 2. La Cabecera del documento (document HEADer) Usada para dar información sobre el documento (no visible). 3. El Cuerpo del documento (document BODY) Es la parte principal del documento, la parte que el usuario ve. Estas tres partes pueden verse en la plantilla mostrada a continuación.
La primera linea indica que es un documento HTML: La segunda y tercera linea delimitan la cabecera del documento: La cuarta y quinta linea delimitan el cuerpo del documento:
La última linea indica que finaliza el documento HTML:
4.1. Título El título del documento se almacena en la cabecera (HEAD) del documento. No es visible dentro de la página web, pero muchos visualizadores lo muestran en alguna parte. Tambien es usado como el título por defecto para las entradas de las ``hotlist'' o ``bookmark'' que el usuario va almacenando. Para definir el título, se hará dentro de la directiva HEAD y utilizando la directiva <TITLE>... ... <TITLE>Introduccion a HTML ...
La apariencia del título del documento será: <TITLE>Introduccion a HTML
4.2. Cabeceras Las cabeceras permiten dividir lógicamente el documento en secciones, subsecciones, etc. HTML prevee hasta seis niveles de cabeceras. Las cabeceras aparecen solamente en el cuerpo del documento (directiva BODY, no confundir con la cabecera de documento -document HEADer-). Para especificar un texto cabecera de nivel requerido se hará: ...
Cabecera Cabecera Cabecera ... Cabecera
de nivel 1
de nivel 2 de nivel 3 de nivel 6Cabecera ... Cabecera
de nivel 1
de nivel 1
Más general . . . Más especifico
Lo descrito anteriormente aparecería de la siguiente forma:
Cabecera de nivel 1
Cabecera de nivel 2 Cabecera de nivel 3 Cabecera de nivel 6
4.3. Párrafos La mayor parte del texto que se escribe forma parte de un párrafo de texto. Para establecer una separación de párrafos, las dos porciones de texto que pertenecen a párrafos diferentes deben formar parte de distintas secciones dentro de un documento HTML. La simple escritura de un retorno de carro no es suficiente (uno o más retornos de carro son tratados como un simple espacio en blanco). Para crear un párrafo, basta con escribir el texto que lo forma dentro de la directiva
...
: ...Este es mi primer párrafo. aunque escriba este texto en otra linea, seguirá perteneciendo al mismo párrafo.
Este es mi segundo párrafo. Mira como se ha creado una separación entre párrafos.
El usuario verá: Este es mi primer párrafo. aunque escriba este texto en otra linea, seguirá perteneciendo al mismo párrafo. Este es mi segundo párrafo. Mira como se ha creado una separación entre párrafos.
4.4. Finales de linea En numerosas ocasiones es necesario forzar un final de linea en el documento formateado (un simple retorno de carro no es suficiente). Para ello, es suficiente con el uso de la directiva simple
(no necesita la directiva homóloga de cierre): ...
Yo realmente veré la siguiente linea
en otra linea.
El usuario verá: Yo realmente veré la siguiente linea en otra linea.
4.5. Centrado y Parpadeo Dos directivas muy interesantes, aunque no soportadas por todos los visualizadores, son las de centrado de texto y parpadeo de texto: Para centrar un texto (u otro objeto, imagen, tabla, ...) se utiliza la directiva
5. Texto enfatizado Dentro de un documento HTML se puede indicar que un texto tenga un estilo o tipografía especial. Hay 2 tipos de estilos: lógicos y físicos.Con estilos lógicos se formatea el texto de acuerdo con su significado, mientras que las de estilo físico indican la apariencia específica. Por ejemplo, en la anterior frase las palabras ``estilos lógicos'' fue marcado como una ``definición.'' El mismo efecto (enfatizar esas palabras con italics), podría haber sido alcanzado uti lizando otra directiva que indica "pon esas palabras en italics".
Físico frente a Lógico: Usa el estilo Lógico cuando sea posible Si un estilo físico y Lógico producen el mismo resultado ¿Cuál utilizo? En un documento HTML, el contenido está separado de la presentación. De ese modo las directivas que indican un nivel uno de encabezamiento son interpretadas como un nivel uno de encabezamiento, pero no especifica cómo es ese encabezamiento. Por ejemplo, letra tipo Times, negrita, de tamaño 24 puntos, centrado en la parte superior de la página. La ventaja es que el usuario decide la presentación de la cabecera en el dispositivo de presentación (el visualizador World Wide Web) Además, directivas Lógicas refuerzan la consistencia del documento. Es más sencillo marcar algo como
que recordar que eso significa:letra tipo Times, negrita, de tamaño 24 puntos.
5.1. Estilos Lógicos para una palabra que está siendo definida. Normalmente aparece en italics. (NCSA Mosaic es un visualizador World Wide Web) <EM> para dar énfasis. Usualmente aparece en italics (¡Cuuidado con el perro!) para títulos de libros, películas, etc. Normalmente aparece en italics. (El Silencio de los Corderos) Para códigos de computador. Aparece con un formato fijo (El fichero cabecera <stdio.h>) para entradas desde el teclado. Aparecerá en un formato fijo y en negrita, pero muchos visualizadores lo escriben en otro formato (Introduce passwd para cambiar tu password) <SAMP> para mensajes estándar de computadores. Se ve en formato fijo. (Segmentation fault: Core dumped.) <STRONG> para mayor énfasis. Normalmente aparece en negrita. (Importante) para una variable``metasintáctica'', donde el usuario debe reemplazarlo por un elemento específico (rm filename borra el fichero.)
5.2. Estilos físicos texto en negrita texto en italica
6.1. Direcciones En muchas ocasiones, se necesitan poner direcciones dentro de un texto: • • •
Una dirección de correo Una dirección de correo electrónico Los nombres de autores
Para especificar direcciones en un documento HTML, se utilizará la directiva .... C/ Miguel Iscar, 10
El lector verá: C/ Miguel Iscar, 10
6.2. Citas Cuando se referencia el nombre o título de un trabajo, se debe dejar bien claro que es una cita. Para especificar una cita, se utilizará la directiva ... tags: Para más ilustración leer El Principito. El lector lo verá así Para más ilustración leer El Principito.
6.3 Ejemplos Cuando se documenta un programa de ordenador, a menudo es necesario dar ejemplos de aquello que aparecerá en pantalla, y que debe el usuario introducir. La directiva <SAMP> es usada para mostrar el texto que se visualizará, mientras que mostrará el texto que el usuario debe introducir. Un breve ejemplo (usando el formato del comando Unix man) podría ser: ejemplo% lpr -Pbabel HTML.ps La tercera directiva, se utilizará para documentar los parámetros de un programa: -Pprinter -#num -C class -J job
lpr
7. Texto preformateado A menudo se hace necesario que algún texto aparezca exactamente como lo escribimos: • • •
Mostrando una pantalla tal y como aparecerá Haciendo ``tablas'' Que un texto contenga varios espacios o lineas en blanco consecutivas
La directiva es usada para englobar todo aquel texto que se quiere formatear exactamente.
Este es un ejemplo de texto preformateado. Como puede ver, se controla donde empiezan las nuevas lineas y el texto Pero solo se puede ver en una fuente fija :-(
El lector verá: Este es un ejemplo de texto preformateado. Como puede ver, se controla donde empiezan las nuevas lineas y el texto Pero solo se puede ver en una fuente fija :-(
8. Texto citado En alguna ocasión es necesario copiar un pasage de texto. Por ejemplo: To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take arms against a sea of troubles, And by opposing end them? (Por supuesto, se debe dar una atribución al texto con ) William Shakespeare Para encomillar un area de texto se usará la directiva ...: To be, or not to be: that is the question:
Whether 'tis nobler...
El lector verá: To be, or not to be: that is the question: Whether 'tis nobler...
9. Divisiones Horizontales Las divisiones horizontales son usadas para formatear un documento en secciones. Se debe evitar el uso de imágenes para crear el efecto de divisiones horizontales: • • •
No se puede garantizar que el ancho de una imagen sea el correcto. Las divisiones horizontales dependen del ancho de la ventana del visualiazor. No se puude garantizar que el usuario vea la imagen. Las divisiones horizontales suelen funcionar tanto en visualizadores en formato texto como gráfico. Una página con texto e imagen puede no formatearse correctamente.
La inserción de una división horizontal es muy simple. Se realizará insertando la directiva
en el lugar donde se desee que aparezca la linea horizontal (esta directiva no necesita su homóloga de cierre). Un ejemplo puede verse en la linea que aparece antes de este párrafo.
10. Listas Una lista para HTML no es más que un agrupamiento o enumeración de elementos de información. HTML soporta tres tipos de listas: 1. Listas marcadas 2. Listas enumeradas 3. Listas de definiciones
10.1. Listas marcadas Las listas marcadas sirven para mostrar información agrupada y sin ningún orden particular: Los miembros de la mesa de trabajo son: • • • •
Sr. Chema Pamundi Sr. German Tequilla Sr. Carmelo Coton Sra. Carmen Tirosa
Para hacer una lista, se debe utilizar la directiva ...
; mientras que, para cada elemento de la lista debe utilizarse la directiva ... :
- Sr. Chema Pamundi
- Sr. German Tequilla
- Sr. Carmelo Coton
- Sra. Carmen Tirosa
10.2. Listas enumeradas Las listas enumeradas u ordenadas se usarán para agrupar información en un orden específico. Si el ordenador parece que no funciona: 1. 2. 3. 4.
¿Está conectado a la corriente? ¿Está el interruptor a ON? ¿Está la pantalla encendida? ¿Está la linea de alimentación caida?
Para hacer una lista enumerada, se deberá especificar con la directiva ...
. Cada elemento de la lista estará contenida entre ... : - Está conectado a la corriente?
- Está el interruptor a ON?
- Está la pantalla encendida?
- Está la linea de alimentación caida?
10.3. Listas de definiciones Las listas de de definiciones se usan para formatear un conjunto de palabras con sus correspondientes descripciones. Negrita (bold). Cursiva (italic). Para formatear una lista de descripciones se usarán las directivas ...
. Cada elemento debe especificarse entre ... . Cada definición debe especificarse entre ... .
- Negrita (bold).
- Cursiva (italic).
Listas anidadas Dentro de un elemento de una lista se puede especificar otra lista.
11. Enlaces. Documentos hipertexto. Llegado a este punto, nos falta por introducir el concepto de hipertexto; es decir, la capacidad de ``saltar'' de un documento a otro, lo que se ha dado en llamar ``navegación''. Las funcionalidades del hipertexto están basadas en los enlaces. Un enlace es una referencia a otro documento HTML o a cualquier otro objeto, expresada por un formato universalmente aceptado denominado URL (Universal Resource Locator). Los puntos a tratar son: 1. 2. 3. 4. 5.
Texto del enlace (anchor) Creando enlaces Enlaces absolutos y relativos Referencias locales Enlaces a referencias locales
11.1. Texto del enlace (anchor) Cuando se quiere especificar un enlace, es necesario asociarle un texto o una imagen (anchors). Ahora se considerará la asociación de un texto, las imágenes se tratarán en la siguiente sección. Para especificar un texto de enlace, simplemente se utilizará la directiva ...: Texto de enlace El usuario verá: Texto de enlace
11.2. Creando enlaces Un atributo es un código que está ubicado dentro de una directiva de apertura. Para especificar un enlace, es necesario utilizar el atributo HREF. El atributo HREF (hypertext reference) es un enlace a otro objeto. Puede ser desde un enlace a otra parte del documento (referencias locales) hasta un enlace a un documento en otra máquina diferente. Para crear un enlace o referencia hipertexto, se utilizará la siguiente plantilla: Texto de enlace. Indice El usuario verá: Texto de enlace. Indice
11.3. Enlaces absolutos y relativos Los enlaces absolutos son aquellos que contienen la dirección completa de un documento. Si el documento reside en otra máquina, o si se necesita utilizar otro protocolo (ej. wais, ftp), se deberá utilizar un enlace absoluto. Si el otro documento reside en la misma máquina, y se usa el mismo protocolo, entonces se recomienda el uso de enlace relativo.
Enlaces absolutos Para crear un enlace absoluto, basta con especificar la dirección en el atributo HREF de la directiva anchor: World Wide Web El lector verá: World Wide Web
Enlaces relativos Para crear un enlace relativo, basta con especificar la dirección relativa en el atributo HREF de la directiva anchor: Página inicial El usuario verá: Página inicial
Si el documento está en la misma máquina se puede especificar el camino entero del documento. Por ejemplo: Búsqueda en Internet
11.4. Referencias locales Las referencias locales (named anchors) son usadas como un destino opcional de un enlace. Permiten poner nombre a un punto particular dentro del mismo documento. Para crear una referencia local se usará el atributo NAME de la directiva anchor. Para crear una referencia local llamada ejemplo se hará de la siguiente forma: ejemplo El usuario verá: ejemplo Como se puede apreciar, la referencia local es, probablemente, la misma que el resto del texto. Recordar que puede ser el destino de un enlace.
11.5. Enlaces a referencias locales Si en el documento existen referencias locales, se podrán especificar enlaces directos a esos puntos. Las referencias locales han sido utilizadas en esta guía para indexar el contenido de la misma. Para enlazar a una referencia local, simplemente se añade la referencia local a la dirección: #ejemplo (donde ejemplo es el nombre de la referencia local) Para enlazar a la sección de párrafos en el capítulo Un documento inicial, se usará el siguiente enlace: Párrafos El usuario verá: Párrafos Lo arriba indicado se leería como `la referencia local parrafos en el documento docuini'. El enlazado a una subsección dentro del mismo documento se haría: Referencias locales
El usuario verá: Referencias locales
12. Imágenes 1. Imágenes inline 2. Alineado de texto e imagen
12.1. Imágenes inline Una de las funcionalidades más llamativas en HTML es la posibilidad de incluir imágenes dentro de un documento. Algunos formatos gráficos tienen soporte en modo nativo (son visualizados directamente por el browser), mientras que otros requieren del concurso de programas externos. No todos los ficheros que contienen gráficos siguen la misma convención de almacenamiento. Existen varios formatos que permiten, entre otras cosas, comprimir en distinto grado la información. Los formatos más extendidos son: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group bitmap) y sus variantes (JPG,BMP,XMP,XBM), TIFF (Tagged Image File Format), EPS ( Encapsulated PostScript), o PCX (de Paintbrush). Solo el formato GIF es soportado directamente por todos los visualizadores, mientras que el JPEG lo es por bastantes. Ante esta situación, ¿Cual de los dos debemos utilizar? El formato GIF se basa en el sistema de compresión LZW, un algoritmo muy simple y que, por ello, no alcanza unas altas cotas de reducción. Este formato trabaja con un máximo de 256 colores (8 bits); para simular colores fuera de la paleta utiliza la técnica de dithering (aproximación del color por los vecinos más próximos). El formato JPEG utiliza un algoritmo de compresión muchos más complicado que el utilizado por el GIF: los ficheros resultantes son más pequeños, pero necesitan más tiempo para su descompresión. A diferencia del anterior formato, JPEG trabaja con 16.7 millones de colores (24 bits). Como norma general, diremos que se utilizará el formato GIF para iconos e imágenes pequeñas y JPEG para imágenes grandes o de calidad. Para insertar una imagen en un documento HTML se utilizará la directiva simple ![]()
El usuario lo verá:
12.2. Alineado de texto e imagen La directiva IMG dispone de un atributo cuyo cometido es permitir la alineación vertical de la imagen y el texto que la sucede. El atributo es align y tiene tres valores posibles: TOP El texto coincide con la parte superior de la imagen. MIDDLE El texto aparece centrado en la imagen. BOTTOM El texto coincide con la parte inferior de la imagen. Alineado TOP Alineado MIDDLE Alineado BOTTOM El usuario verá: Alineado TOP Alineado MIDDLE Alineado BOTTOM Con los valores mostrados, la alineación se restringe a una linea de texto, pues si se rebasa, la linea siguiente aparecerá debajo de la imagen. Para solucionarlo, se introducen dos nuevos valores como son LEFT (izquierda) y RIGHT (derecha). La imagen anterior se ha especificado con
13. Tablas Al igual que las listas, las tablas son componentes dedicados a mejorar la visualización de datos tabulados:
1. 2. 3. 4.
Tablas Básicas Títulos y bordes Tablas con celdas multicolumna Tablas con celdas multifila
13.1. Tablas Básicas Las tablas se especificarán siempre por filas; es decir, primero se escribirá la fila 1, despues la fila 2, etc. La directiva que se utiliza para delimitar una tabla es ...
. Cada fila se especifica con la directiva ... y, dentro de ella, cada celda se especifica con la directiva ... 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1
El usuario verá: 100,3 22,7 8100,3 2,6
1,8 313,1 200,8 23,1 1300,5 4100,1 81,8 8,1
Las directivas TR, TD y TH (ver más adelante) admiten dos atributos de centrado: VALIGN para el centrado vertical y ALIGN para el horizontal; donde los valores que pueden tomar son, TOP (superior), BOTTOM (inferior), MIDDLE (centrado vertical), RIGHT (derecha), LEFT (izquierda) y CENTER (centrado horizontal).
13.2. Títulos y bordes La presencia de bordes en la tabla se especifica con el atributo border en la directiva . Con ello, se logrará un borde de dimensión la unidad; si deseamos hacer el borde más espeso deberemos dar un valor numérico al atributo: border=espesor El título de la tabla es un literal delimitado por la directiva ... . Por último, cada cabecera de columna se especifica con la directiva ... Podemos ir mejorando la tabla del apartado anterior:
Ejemplo de tabla Primera columna Segunda columna Tercera columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1
El usuario verá: Ejemplo de tabla Primera columna Segunda columna Tercera columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1
13.3. Tablas con celdas multicolumna En ocasiones es necesario que una celda se extienda sobre varias columnas, para ello utilizaremos el atributo colspan de la directiva o : Ejemplo de tabla con celdas multicolumna Dos columnas Primera columna Segunda columna Tercera columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1
El usuario verá: Ejemplo de tabla con celdas multicolumna Dos columnas Primera columna Segunda columna Tercera columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1
2,6
81,8
8,1
13.4. Tablas con celdas multifila Como vemos en el ejemplo anterior, cada una de las celdas ocupa únicamente una fila, si deseamos que una celda ocupe varias filas lo especificaremos con el atributo rowspan de la directiva o . Vamos ha especificar que la cabecera de la tercera columna se espanda a dos filas: Ejemplo de tabla con celdas multifila Dos columnas Tercera columna Primera columna Segunda columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1
El usuario verá: Ejemplo de tabla con celdas multifila Dos columnas Tercera columna Primera columna Segunda columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1 Ejemplo de la utilización de celdas multicolumna y celdas multifila combinadas: Ejemplo combinado Valores Precio Peso Potencia Modelo 1 890 70 995 Modelo 2 1200 110 2245
El usuario verá: Ejemplo combinado Valores Precio Peso Potencia Modelo 1 890 70 995 Modelo 2 1200 110 2245
14. Colores y Fondos Además de las imágenes, el otro concepto que permite dar vistosidad a las páginas web son los colores. Para especificar colores dentro de una página, se utiliza el código RGB (rojoverde-azul) con el cual podemos especificar distintas tonalidades de colores. Para especificar un color se utiliza el carácter # seguido de un valor hexadecimal de 6 dígitos; los dos primeros para el rojo, los dos centrales para el verde y los dos finales para el azul. Podemos ver algunos ejemplos: Código #FF0000 #0000FF #00FF00 #FFFF00 #9933CC #FFFFFF #666666 #000000 Color Rojo Azul Verde Amarillo Morado Blanco Gris Negro
¿Dónde podemos especificar colores? Existen tres características a las que podemos aplicar color: el fondo de un documento, al texto de un documento y a texto específico dentro del documento: Fondo de un documento: Se especificará con el atributo BGCOLOR de la directiva BODY. Ej. Veremos el fondo de color morado Texto de un documento: Se especificará con el atributo TEXT de la directiva BODY. Ej. Veremos el texto de color verde, por defecto Texto específico: Se especificará con el atributo COLOR de la directiva FONT. Es una extensión propuesta por Netscape a HTML 2.0. Ej. Con Este texto se verá rojo el usuario verá: Este texto se verá rojo.
Hemos visto que podemos cambiar el color del fondo de un documento. Además, podemos insertar una imagen como fondo del documento. Para ello, utilizaremos el atributo BACKGROUND de la directiva BODY. Ejemplo: Vamos a suponer que tenemos la imagen fondo-etsii.gif:
Si en esta misma página sustituimos por El resultado será: pulsar aquí
15. Formularios 1. 2. 3. 4.
La directiva FORM La directiva INPUT La directiva SELECT La directiva TEXTAREA
Hasta el momento se han presentado características de HTML que permiten al lector visualizar en su browser documentos multimedia y navegar por ellos, aunque el lector no tenia posibilidad de interactuar con ellos. El siguiente paso consiste en definir dicha posibilidad: Los formularios. El principio del formulario es bien sencillo: el usuario rellena una serie de campos y los envia a un programa de tratamiento, denominado genéricamente CGI (Common Gateway Interface). Los campos pueden ser de diversa naturaleza, como campos de edición, menús desplegables, listas de opciones, texto, etc.
Para iniciar un formulario en HTML se utilizará la directiva . Dentro de ella especificaremos todos los campos que intervienen en el formulario:
15.1. La directiva FORM Con esta directiva especificaremos el tratamiento que se realizará con los campos introducidos por el usuario. Para ello existen dos atributos: El atributo METHOD Se especifica la forma de pasar los valores de los campos al programa de tratamiento. Admite los valores GET y POST. El atributo ACTION Indicaremos el nombre del programa de tratamiento. Ej.
15.2. La directiva INPUT Es una de las directivas que permite especificar algunas clases de campos de entrada, dependiendo de los atributos asociados: El atributo NAME Indicaremos el nombre asociado al campo de entrada, debe ser único dentro de un mismo formulario. El atributo VALUE Dependiendo del tipo o clase de campo indicará una cosa u otra: • • •
Campo de texto: Predefine el contenido del campo. Campo submit o reset: Texto que aparecerá en el botón. Campo checkbox o radio: Valor asociado a la opción.
El atributo TYPE Indicaremos el tipo o clase de campo. Los valores que puede tomar son: Texto no específico Cuando a la directiva INPUT no le asociamos ningún tipo, estamos indicando una entrada de texto simple con desplazamineto horizontal. Podemos especificar el tamaño de visualización en número de caracteres; para ello utilizaremos el atributo SIZE . Se visualizará: SUBMIT Es el botón que realiza el envio de la información al programa de tratamiento. Ejemplo: Todo este capítulo es un formulario, si hacemos click en enviar, ejecutará un programa de tratamiento que mostrará los valores de todos los campos de este formulario.
Se visualizará: enviar
RESET Botón de borrado de todos los datos introducidos en el formulario. Ejemplo: Se visualizará: borrar
CHECKBOX Es un campo multivalor ya que permite asignar uno o varios valores a una misma variable. Ejemplo: Se visualizará: MS-DOS OS/2 Unix RADIO Es un campo multivalor excluyente, permite escoger una y sólo una opción de un conjunto de valores. Ejemplo: Se visualizará:
Hombre
Mujer
PASSWORD Es una zona de texto donde los caracteres se reemplazan por asteriscos.Ejemplo: Se visualizará: HIDDEN Permite ocultar al usuario un campo en el formulario dando un valor a la variable asociada.
15.3. La directiva SELECT Se utiliza para definir listas de opciones dentro de un formulario. El atributo NAME, comentado en la directiva INPUT, se utiliza de la misma forma. Para especificar cada elemento de la lista u opción se utiliza la directiva
5.2. Estilos físicos texto en negrita texto en italica
6.1. Direcciones En muchas ocasiones, se necesitan poner direcciones dentro de un texto: • • •
Una dirección de correo Una dirección de correo electrónico Los nombres de autores
Para especificar direcciones en un documento HTML, se utilizará la directiva .... C/ Miguel Iscar, 10
El lector verá: C/ Miguel Iscar, 10
6.2. Citas Cuando se referencia el nombre o título de un trabajo, se debe dejar bien claro que es una cita. Para especificar una cita, se utilizará la directiva ... tags: Para más ilustración leer El Principito. El lector lo verá así Para más ilustración leer El Principito.
6.3 Ejemplos Cuando se documenta un programa de ordenador, a menudo es necesario dar ejemplos de aquello que aparecerá en pantalla, y que debe el usuario introducir. La directiva <SAMP> es usada para mostrar el texto que se visualizará, mientras que mostrará el texto que el usuario debe introducir. Un breve ejemplo (usando el formato del comando Unix man) podría ser: ejemplo% lpr -Pbabel HTML.ps La tercera directiva, se utilizará para documentar los parámetros de un programa: -Pprinter -#num -C class -J job
lpr
7. Texto preformateado A menudo se hace necesario que algún texto aparezca exactamente como lo escribimos: • • •
Mostrando una pantalla tal y como aparecerá Haciendo ``tablas'' Que un texto contenga varios espacios o lineas en blanco consecutivas
La directiva
es usada para englobar todo aquel texto que se quiere formatear exactamente.
Este es un ejemplo de texto preformateado. Como puede ver, se controla donde empiezan las nuevas lineas y el texto Pero solo se puede ver en una fuente fija :-(
El lector verá: Este es un ejemplo de texto preformateado. Como puede ver, se controla donde empiezan las nuevas lineas y el texto Pero solo se puede ver en una fuente fija :-(
8. Texto citado En alguna ocasión es necesario copiar un pasage de texto. Por ejemplo: To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take arms against a sea of troubles, And by opposing end them? (Por supuesto, se debe dar una atribución al texto con ) William Shakespeare Para encomillar un area de texto se usará la directiva...:To be, or not to be: that is the question:
Whether 'tis nobler...El lector verá: To be, or not to be: that is the question: Whether 'tis nobler...
9. Divisiones Horizontales Las divisiones horizontales son usadas para formatear un documento en secciones. Se debe evitar el uso de imágenes para crear el efecto de divisiones horizontales: • • •
No se puede garantizar que el ancho de una imagen sea el correcto. Las divisiones horizontales dependen del ancho de la ventana del visualiazor. No se puude garantizar que el usuario vea la imagen. Las divisiones horizontales suelen funcionar tanto en visualizadores en formato texto como gráfico. Una página con texto e imagen puede no formatearse correctamente.
La inserción de una división horizontal es muy simple. Se realizará insertando la directiva
en el lugar donde se desee que aparezca la linea horizontal (esta directiva no necesita su homóloga de cierre). Un ejemplo puede verse en la linea que aparece antes de este párrafo.
10. Listas Una lista para HTML no es más que un agrupamiento o enumeración de elementos de información. HTML soporta tres tipos de listas: 1. Listas marcadas 2. Listas enumeradas 3. Listas de definiciones
10.1. Listas marcadas Las listas marcadas sirven para mostrar información agrupada y sin ningún orden particular: Los miembros de la mesa de trabajo son: • • • •
Sr. Chema Pamundi Sr. German Tequilla Sr. Carmelo Coton Sra. Carmen Tirosa
Para hacer una lista, se debe utilizar la directiva...
; mientras que, para cada elemento de la lista debe utilizarse la directiva... :
- Sr. Chema Pamundi
- Sr. German Tequilla
- Sr. Carmelo Coton
- Sra. Carmen Tirosa
10.2. Listas enumeradas Las listas enumeradas u ordenadas se usarán para agrupar información en un orden específico. Si el ordenador parece que no funciona: 1. 2. 3. 4.
¿Está conectado a la corriente? ¿Está el interruptor a ON? ¿Está la pantalla encendida? ¿Está la linea de alimentación caida?
Para hacer una lista enumerada, se deberá especificar con la directiva...
. Cada elemento de la lista estará contenida entre... :
- Está conectado a la corriente?
- Está el interruptor a ON?
- Está la pantalla encendida?
- Está la linea de alimentación caida?
10.3. Listas de definiciones Las listas de de definiciones se usan para formatear un conjunto de palabras con sus correspondientes descripciones. Negrita (bold). Cursiva (italic). Para formatear una lista de descripciones se usarán las directivas...
. Cada elemento debe especificarse entre... . Cada definición debe especificarse entre... .
- Negrita (bold).
- Cursiva (italic).
Listas anidadas Dentro de un elemento de una lista se puede especificar otra lista.
11. Enlaces. Documentos hipertexto. Llegado a este punto, nos falta por introducir el concepto de hipertexto; es decir, la capacidad de ``saltar'' de un documento a otro, lo que se ha dado en llamar ``navegación''. Las funcionalidades del hipertexto están basadas en los enlaces. Un enlace es una referencia a otro documento HTML o a cualquier otro objeto, expresada por un formato universalmente aceptado denominado URL (Universal Resource Locator). Los puntos a tratar son: 1. 2. 3. 4. 5.
Texto del enlace (anchor) Creando enlaces Enlaces absolutos y relativos Referencias locales Enlaces a referencias locales
11.1. Texto del enlace (anchor) Cuando se quiere especificar un enlace, es necesario asociarle un texto o una imagen (anchors). Ahora se considerará la asociación de un texto, las imágenes se tratarán en la siguiente sección. Para especificar un texto de enlace, simplemente se utilizará la directiva ...: Texto de enlace El usuario verá: Texto de enlace
11.2. Creando enlaces Un atributo es un código que está ubicado dentro de una directiva de apertura. Para especificar un enlace, es necesario utilizar el atributo HREF. El atributo HREF (hypertext reference) es un enlace a otro objeto. Puede ser desde un enlace a otra parte del documento (referencias locales) hasta un enlace a un documento en otra máquina diferente. Para crear un enlace o referencia hipertexto, se utilizará la siguiente plantilla: Texto de enlace. Indice El usuario verá: Texto de enlace. Indice
11.3. Enlaces absolutos y relativos Los enlaces absolutos son aquellos que contienen la dirección completa de un documento. Si el documento reside en otra máquina, o si se necesita utilizar otro protocolo (ej. wais, ftp), se deberá utilizar un enlace absoluto. Si el otro documento reside en la misma máquina, y se usa el mismo protocolo, entonces se recomienda el uso de enlace relativo.
Enlaces absolutos Para crear un enlace absoluto, basta con especificar la dirección en el atributo HREF de la directiva anchor: World Wide Web El lector verá: World Wide Web
Enlaces relativos Para crear un enlace relativo, basta con especificar la dirección relativa en el atributo HREF de la directiva anchor: Página inicial El usuario verá: Página inicial
Si el documento está en la misma máquina se puede especificar el camino entero del documento. Por ejemplo: Búsqueda en Internet
11.4. Referencias locales Las referencias locales (named anchors) son usadas como un destino opcional de un enlace. Permiten poner nombre a un punto particular dentro del mismo documento. Para crear una referencia local se usará el atributo NAME de la directiva anchor. Para crear una referencia local llamada ejemplo se hará de la siguiente forma: ejemplo El usuario verá: ejemplo Como se puede apreciar, la referencia local es, probablemente, la misma que el resto del texto. Recordar que puede ser el destino de un enlace.
11.5. Enlaces a referencias locales Si en el documento existen referencias locales, se podrán especificar enlaces directos a esos puntos. Las referencias locales han sido utilizadas en esta guía para indexar el contenido de la misma. Para enlazar a una referencia local, simplemente se añade la referencia local a la dirección: #ejemplo (donde ejemplo es el nombre de la referencia local) Para enlazar a la sección de párrafos en el capítulo Un documento inicial, se usará el siguiente enlace: Párrafos El usuario verá: Párrafos Lo arriba indicado se leería como `la referencia local parrafos en el documento docuini'. El enlazado a una subsección dentro del mismo documento se haría: Referencias locales
El usuario verá: Referencias locales
12. Imágenes 1. Imágenes inline 2. Alineado de texto e imagen
12.1. Imágenes inline Una de las funcionalidades más llamativas en HTML es la posibilidad de incluir imágenes dentro de un documento. Algunos formatos gráficos tienen soporte en modo nativo (son visualizados directamente por el browser), mientras que otros requieren del concurso de programas externos. No todos los ficheros que contienen gráficos siguen la misma convención de almacenamiento. Existen varios formatos que permiten, entre otras cosas, comprimir en distinto grado la información. Los formatos más extendidos son: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group bitmap) y sus variantes (JPG,BMP,XMP,XBM), TIFF (Tagged Image File Format), EPS ( Encapsulated PostScript), o PCX (de Paintbrush). Solo el formato GIF es soportado directamente por todos los visualizadores, mientras que el JPEG lo es por bastantes. Ante esta situación, ¿Cual de los dos debemos utilizar? El formato GIF se basa en el sistema de compresión LZW, un algoritmo muy simple y que, por ello, no alcanza unas altas cotas de reducción. Este formato trabaja con un máximo de 256 colores (8 bits); para simular colores fuera de la paleta utiliza la técnica de dithering (aproximación del color por los vecinos más próximos). El formato JPEG utiliza un algoritmo de compresión muchos más complicado que el utilizado por el GIF: los ficheros resultantes son más pequeños, pero necesitan más tiempo para su descompresión. A diferencia del anterior formato, JPEG trabaja con 16.7 millones de colores (24 bits). Como norma general, diremos que se utilizará el formato GIF para iconos e imágenes pequeñas y JPEG para imágenes grandes o de calidad. Para insertar una imagen en un documento HTML se utilizará la directiva simple![]()
El usuario lo verá:
12.2. Alineado de texto e imagen La directiva IMG dispone de un atributo cuyo cometido es permitir la alineación vertical de la imagen y el texto que la sucede. El atributo es align y tiene tres valores posibles: TOP El texto coincide con la parte superior de la imagen. MIDDLE El texto aparece centrado en la imagen. BOTTOM El texto coincide con la parte inferior de la imagen.
13. Tablas Al igual que las listas, las tablas son componentes dedicados a mejorar la visualización de datos tabulados:
1. 2. 3. 4.
Tablas Básicas Títulos y bordes Tablas con celdas multicolumna Tablas con celdas multifila
13.1. Tablas Básicas Las tablas se especificarán siempre por filas; es decir, primero se escribirá la fila 1, despues la fila 2, etc. La directiva que se utiliza para delimitar una tabla es...
. Cada fila se especifica con la directiva... y, dentro de ella, cada celda se especifica con la directiva... El usuario verá: 100,3 22,7 8100,3 2,6
100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1
1,8 313,1 200,8 23,1 1300,5 4100,1 81,8 8,1
Las directivas TR, TD y TH (ver más adelante) admiten dos atributos de centrado: VALIGN para el centrado vertical y ALIGN para el horizontal; donde los valores que pueden tomar son, TOP (superior), BOTTOM (inferior), MIDDLE (centrado vertical), RIGHT (derecha), LEFT (izquierda) y CENTER (centrado horizontal).
13.2. Títulos y bordes La presencia de bordes en la tabla se especifica con el atributo border en la directiva. Con ello, se logrará un borde de dimensión la unidad; si deseamos hacer el borde más espeso deberemos dar un valor numérico al atributo: border=espesor El título de la tabla es un literal delimitado por la directiva
... . Por último, cada cabecera de columna se especifica con la directiva... Podemos ir mejorando la tabla del apartado anterior:
El usuario verá: Ejemplo de tabla Primera columna Segunda columna Tercera columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1
Ejemplo de tabla Primera columna Segunda columna Tercera columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1
13.3. Tablas con celdas multicolumna En ocasiones es necesario que una celda se extienda sobre varias columnas, para ello utilizaremos el atributo colspan de la directivao : El usuario verá: Ejemplo de tabla con celdas multicolumna Dos columnas Primera columna Segunda columna Tercera columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1
Ejemplo de tabla con celdas multicolumna Dos columnas Primera columna Segunda columna Tercera columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1
2,6
81,8
8,1
13.4. Tablas con celdas multifila Como vemos en el ejemplo anterior, cada una de las celdas ocupa únicamente una fila, si deseamos que una celda ocupe varias filas lo especificaremos con el atributo rowspan de la directivao . Vamos ha especificar que la cabecera de la tercera columna se espanda a dos filas: El usuario verá: Ejemplo de tabla con celdas multifila Dos columnas Tercera columna Primera columna Segunda columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1 Ejemplo de la utilización de celdas multicolumna y celdas multifila combinadas:
Ejemplo de tabla con celdas multifila Dos columnas Tercera columna Primera columna Segunda columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1
Ejemplo combinado Valores Precio Peso Potencia Modelo 1 890 70 995 Modelo 2 1200 110 2245
El usuario verá: Ejemplo combinado Valores Precio Peso Potencia Modelo 1 890 70 995 Modelo 2 1200 110 2245
14. Colores y Fondos Además de las imágenes, el otro concepto que permite dar vistosidad a las páginas web son los colores. Para especificar colores dentro de una página, se utiliza el código RGB (rojoverde-azul) con el cual podemos especificar distintas tonalidades de colores. Para especificar un color se utiliza el carácter # seguido de un valor hexadecimal de 6 dígitos; los dos primeros para el rojo, los dos centrales para el verde y los dos finales para el azul. Podemos ver algunos ejemplos: Código #FF0000 #0000FF #00FF00 #FFFF00 #9933CC #FFFFFF #666666 #000000 Color Rojo Azul Verde Amarillo Morado Blanco Gris Negro
¿Dónde podemos especificar colores? Existen tres características a las que podemos aplicar color: el fondo de un documento, al texto de un documento y a texto específico dentro del documento: Fondo de un documento: Se especificará con el atributo BGCOLOR de la directiva BODY. Ej. Veremos el fondo de color morado Texto de un documento: Se especificará con el atributo TEXT de la directiva BODY. Ej. Veremos el texto de color verde, por defecto Texto específico: Se especificará con el atributo COLOR de la directiva FONT. Es una extensión propuesta por Netscape a HTML 2.0. Ej. Con Este texto se verá rojo el usuario verá: Este texto se verá rojo.
Hemos visto que podemos cambiar el color del fondo de un documento. Además, podemos insertar una imagen como fondo del documento. Para ello, utilizaremos el atributo BACKGROUND de la directiva BODY. Ejemplo: Vamos a suponer que tenemos la imagen fondo-etsii.gif:
Si en esta misma página sustituimos por El resultado será: pulsar aquí
15. Formularios 1. 2. 3. 4.
La directiva FORM La directiva INPUT La directiva SELECT La directiva TEXTAREA
Hasta el momento se han presentado características de HTML que permiten al lector visualizar en su browser documentos multimedia y navegar por ellos, aunque el lector no tenia posibilidad de interactuar con ellos. El siguiente paso consiste en definir dicha posibilidad: Los formularios. El principio del formulario es bien sencillo: el usuario rellena una serie de campos y los envia a un programa de tratamiento, denominado genéricamente CGI (Common Gateway Interface). Los campos pueden ser de diversa naturaleza, como campos de edición, menús desplegables, listas de opciones, texto, etc.
Para iniciar un formulario en HTML se utilizará la directiva . Dentro de ella especificaremos todos los campos que intervienen en el formulario:
15.1. La directiva FORM Con esta directiva especificaremos el tratamiento que se realizará con los campos introducidos por el usuario. Para ello existen dos atributos: El atributo METHOD Se especifica la forma de pasar los valores de los campos al programa de tratamiento. Admite los valores GET y POST. El atributo ACTION Indicaremos el nombre del programa de tratamiento. Ej.
15.2. La directiva INPUT Es una de las directivas que permite especificar algunas clases de campos de entrada, dependiendo de los atributos asociados: El atributo NAME Indicaremos el nombre asociado al campo de entrada, debe ser único dentro de un mismo formulario. El atributo VALUE Dependiendo del tipo o clase de campo indicará una cosa u otra: • • •
Campo de texto: Predefine el contenido del campo. Campo submit o reset: Texto que aparecerá en el botón. Campo checkbox o radio: Valor asociado a la opción.
El atributo TYPE Indicaremos el tipo o clase de campo. Los valores que puede tomar son: Texto no específico Cuando a la directiva INPUT no le asociamos ningún tipo, estamos indicando una entrada de texto simple con desplazamineto horizontal. Podemos especificar el tamaño de visualización en número de caracteres; para ello utilizaremos el atributo SIZE . Se visualizará: SUBMIT Es el botón que realiza el envio de la información al programa de tratamiento. Ejemplo: Todo este capítulo es un formulario, si hacemos click en enviar, ejecutará un programa de tratamiento que mostrará los valores de todos los campos de este formulario.
Se visualizará: enviar
RESET Botón de borrado de todos los datos introducidos en el formulario. Ejemplo: Se visualizará: borrar
CHECKBOX Es un campo multivalor ya que permite asignar uno o varios valores a una misma variable. Ejemplo: Se visualizará: MS-DOS OS/2 Unix RADIO Es un campo multivalor excluyente, permite escoger una y sólo una opción de un conjunto de valores. Ejemplo: Se visualizará:
Hombre
Mujer
PASSWORD Es una zona de texto donde los caracteres se reemplazan por asteriscos.Ejemplo: Se visualizará: HIDDEN Permite ocultar al usuario un campo en el formulario dando un valor a la variable asociada.
15.3. La directiva SELECT Se utiliza para definir listas de opciones dentro de un formulario. El atributo NAME, comentado en la directiva INPUT, se utiliza de la misma forma. Para especificar cada elemento de la lista u opción se utiliza la directiva