Elementos, Atributos y Estructura del Lenguaje HTML: Tutorial Completo

1. Elementos del Lenguaje HTML

A las instrucciones que forman el lenguaje HTML las denominaremos elementos. Se distinguen dos tipos:

Elementos llenos: Estos elementos se forman mediante una marca de inicio y otra de final. En HTML, las marcas se delimitan con los signos < (menor que) y > (mayor que). La marca de fin es idéntica a la inicial, pero con el añadido de la barra inclinada (/) justo antes del nombre.

Ejemplo:

…texto normal <marca> texto afectado por la marca </marca> resto del texto…

Para resaltar un texto en negrita, se emplea la marca de la siguiente forma:

…texto normal texto en negrita resto del texto…

Si en este ejemplo nos hubiésemos olvidado de la marca de final, el resto de la página estaría también en negrita.

Elementos vacíos: Estos elementos no requieren de la marca final, ya que normalmente no producen un efecto sobre el texto en sí, sino que definen separadores.

Por ejemplo, el elemento <HR>, que sirve para mostrar una línea horizontal en la pantalla, se escribirá:

<HR>

Elementos con argumentos: Algunos elementos tienen argumentos, los cuales son denominados atributos. Cada uno de estos atributos podrá tener un valor, el cual irá entre comillas si es alfanumérico.

Ejemplo:

<marca atributo1 atributo2=numérico atributo3=»alfanumérico»>

Ejemplos de código:

Si se quieren utilizar caracteres como < o > en el texto normal, habrá que acudir a un artificio para que el navegador no intente interpretarlos como marca. Estos caracteres, así como otros símbolos utilizados en el código HTML, se reemplazarán por los siguientes grupos de caracteres:

El carácter < será reemplazado por <
El carácter > será reemplazado por >

2. Separadores de Bloques de Texto

Para definir y separar bloques de texto, se emplean una serie de marcas que definen párrafos, texto preformateado o bloques con significado especial, como direcciones o citas.

Marcas de bloques:

Párrafos:
Saltos de línea:
Bloques tabulados: <BLOCKQUOTE>
Línea horizontal: <HR>
Divisiones: <DIV>
Texto preformateado: <PRE>
Direcciones: <ADDRESS>
Centrado de bloques: <CENTER>

se utiliza para separar párrafos. Dado que para el HTML todo el texto es continuo, necesitamos algún mecanismo para indicar el principio y el fin de un párrafo. Las marcas inicial y final son y .

Ejemplo de código:

Este texto está contenido dentro del primer párrafo, así que lo denominaremos: párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1.

Este otro texto está contenido dentro del párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2.

Esto dará como resultado:

Este texto está contenido dentro del primer párrafo, así que lo denominaremos: párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1.

Este otro texto está contenido dentro del párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2.

Normalmente no suele utilizarse la marca de fin de párrafo, , ya que el texto continuará hasta que encuentre otro comienzo de párrafo .

Este elemento admite el atributo ALIGN, que puede tomar uno de los siguientes valores:

LEFT: Justifica el texto a la izquierda (por defecto).
RIGHT: Justifica el texto a la derecha.
CENTER: El texto aparece centrado.

Ejemplo de código:

Texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda.

Texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha.

Texto centrado, texto centrado, texto centrado, texto centrado, texto centrado, texto centrado.

Esto dará como resultado:

Texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda.

Texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha.

Texto centrado, texto centrado, texto centrado, texto centrado, texto centrado, texto centrado

El elemento es vacío, por lo que solo tiene marca inicial. Indica un salto de línea.

Ejemplo de código:

Texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1. Texto 2, texto 2, texto 2, texto 2, texto 2.

Con esto tendremos como resultado:

Texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1.
Texto 2, texto 2, texto 2, texto 2, texto 2.

El elemento <BLOCKQUOTE> sirve para representar párrafos tabulados, por la izquierda y la derecha.

Ejemplo de código:

Texto 1, texto 1, texto 1, texto 1, texto 1.<BLOCKQUOTE>Texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2.</BLOCKQUOTE>

El resultado será:

Texto 1, texto 1, texto 1, texto 1, texto 1.

Texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2.

<HR> es un elemento vacío, por lo que solo tiene marca inicial. Se emplea para separar bloques de texto representando una línea horizontal.

Se puede cambiar la apariencia de dicha línea mediante los siguientes atributos:

NOSHADE: Elimina el efecto de sombra de la línea.
WIDTH: Permite definir la longitud de la línea.
SIZE: Permite definir el grosor de la línea.

Ejemplos de código:

Este elemento se comporta de forma muy parecida al salto de línea, , y a su vez admite los mismos atributos que : ALIGN (LEFT, RIGHT, CENTER); o sea, permite definir un bloque con los atributos de , pero dejando tan solo un salto de línea entre un bloque y otro.

Ejemplos de código:

<DIV ALIGN=LEFT>Texto justificado a la izquierda.</DIV>

<DIV ALIGN=RIGHT>Texto justificado a la derecha.</DIV>

<DIV ALIGN=CENTER>Texto centrado.</DIV>

Esto dará como resultado:

Texto justificado a la izquierda.

Texto justificado a la derecha.

Texto centrado.

El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el navegador, respetando el formato tal como haya sido entrado en el fichero fuente HTML, o sea, respetando los espacios y los saltos de carro.

Ejemplo de código:

<PRE>Esto es un texto preformateado, por tanto, se respetan los espacios y los saltos de carro, como podrán observar.</PRE>

Resultado:

Esto es un texto preformateado, por tanto, se
respetan los espacios y los saltos de
carro,
como podrán observar.

El elemento <ADDRESS> se emplea para indicar que un texto representa una dirección o una firma, mostrándolo, generalmente, en letra cursiva. Es muy utilizado para indicar toda la información respecto al autor del documento (dirección, teléfono, correo electrónico…). Puede insertarse en cualquier lugar del documento; lo habitual en la WWW es incluir esta zona de dirección al final del documento.

Ejemplo de código:

<ADDRESS>Tekin Tontu 77A Wellington Rd Auburn 2144, NSW Australia e-mail tekin@cis.com </ADDRESS>

Esto dará como resultado:

Tekin Tontu
77A Wellington Rd
Auburn 2144, NSW
Australia
e-mail tekin@cis.com

El elemento <CENTER> no es del HTML 2, sino del Netscape. Centra los elementos situados entre sus marcas de apertura y cierre. Dichos elementos podrán ser: bloques de texto, tablas, enlaces, imágenes, formularios, etc.

Ejemplo de código:

<CENTER><TABLE BORDER><CAPTION ALIGN=bottom>Tabla centrada</CAPTION><TR><TD>Celda 1<TD>Celda 2</TR><TR><TD>Celda 3<TD>Celda 4</TR></TABLE></CENTER>

El resultado es una tabla centrada.

Ejemplo de código:

El resultado es una imagen centrada.

Ejemplo de código:

<CENTER>Este último ejemplo es un párrafo de texto centrado mediante el elemento CENTER. Como pueden observar, cada una de las líneas del párrafo aparecerá centrada.</CENTER>

Da como resultado:

Este último ejemplo es un párrafo de texto centrado mediante el elemento CENTER. Como pueden observar, cada una de las líneas del párrafo aparecerá centrada.

3. Tipos de Letra

En este apartado se indica cómo definir cabeceras mediante el elemento <Hn> y cómo modificar el tamaño y color de algún grupo de caracteres mediante el elemento y sus atributos SIZE y COLOR.

Se puede también cambiar el tamaño de letra por defecto (3) de toda la página mediante el elemento vacío <BASEFONT>.

Finalmente, se definen los estilos de caracteres disponibles, distinguiendo entre los estilos físicos (negrita, cursiva, …) y los lógicos (variables, citas, ejemplos, …).

3.1. <Hn>

El elemento <Hn> se utiliza fundamentalmente para escribir encabezamientos. Asigna un tamaño a los caracteres, dependiendo del valor n, el cual varía de 1 a 6. Los más grandes tienen valor 1 y los más pequeños valor 6. El texto entre estas marcas se trata en negrita. Se inserta automáticamente un salto de párrafo, como puede comprobar en el siguiente ejemplo:

Ejemplo de código:

Texto antes de la cabecera. <H3>Cabecera</H3> Más texto.

Dará como resultado lo siguiente:

Texto antes de la cabecera.
Cabecera
Más texto

3.2.

El elemento permite definir el tamaño, color y tipo de letra de un conjunto de caracteres mediante los siguientes atributos:

El atributo SIZE: Regula el tamaño de los caracteres (1 – 7).
El atributo COLOR: Especifica el color de los caracteres. Para consultar los códigos de los colores que le interesen, puede consultar la tabla de códigos de colores.
El atributo FACE: Permite definir el tipo de letra: Algerian, Arial, Times New Roman, Courier, MS Serif, Symbol, System, Times New Roman, Windsort, … Este comando no lo reconocen todos los navegadores (Netscape no lo reconoce).

Ejemplos de código:

Texto de color verde y tamaño 4.

Dará como resultado:

Texto de color verde y tamaño 4.

Ejemplo de código:

Texto de color rojo y tamaño 6.

Dará como resultado:

Texto de color rojo y tamaño 6.

El atributo SIZE del elemento tiene la peculiaridad de poder indicar el tamaño de letra deseado en función del tamaño definido por defecto para el documento.

Ejemplo de código:

Este texto tiene el tamaño por defecto (3). Este texto es del tamaño 3-1=2. Este texto es del tamaño 3+2=5.

Teniendo en cuenta que el valor por defecto definido inicialmente para un documento es 3, el resultado será:

Este texto tiene el tamaño por defecto (3).
Este texto es del tamaño 3-1=2.
Este texto es del tamaño 3+2=5.

3.3. <BASEFONT>

El elemento <BASEFONT> permite cambiar el tamaño por defecto de toda la página mediante el atributo SIZE.

Ejemplo de código:

Con esta sentencia, se conseguirá que el tamaño de letra por defecto del documento pase a ser 5, hasta que aparezca otro elemento <BASEFONT> que lo restaure o lo cambie por otro valor diferente.

Ejemplo de uso de y <BASEFONT>:

Ejemplo de código:

Inicialmente el tamaño por defecto es 3. Por tanto, este texto está en 3+2=5 <BASEFONT SIZE=6> Ahora el tamaño por defecto es 6. Este texto está en 6-2=4

El resultado es:

Inicialmente el tamaño por defecto es 3
Por tanto, este texto está en 3+2=5
Ahora el tamaño por defecto es 6
Este texto está en 6-2=4

3.4. Estilos de Caracteres

Los siguientes elementos llenos permitirán definir distintos estilos para el grupo de caracteres que se defina entre sus marcas de inicio y cierre.

Ejemplo de código:

Texto en cursiva (itálica)

Así queda:

Texto en cursiva (itálica)

Ejemplo de código:

Este es el texto normal Este es el texto Negrilla

Y el resultado es:

Este es el texto normal
Este es el texto Negrilla

Ejemplo de código:

Texto Subrayado

Texto Subrayado

Ejemplo de código:

<strike>Este es el texto Tachado</strike>

~~Este es el texto Tachado~~

Ejemplo de código:

Texto Normal Texto de Superíndice

Texto Normal ^{Texto de Superíndice}

Ejemplo de código:

Texto Normal Texto Subíndice

Texto Normal _{Texto Subíndice}

Ejemplo de código:

Texto Normal <tt>Texto de Máquina de Escribir</tt>

Texto Normal Texto de Máquina de Escribir

Los estilos físicos indican explícitamente el tipo de caracteres a utilizar. Se pueden anidar distintos estilos, obteniendo resultados como estos:

Ejemplo de código:

Negrita y cursiva

Resultado:

Negrita y cursiva

Ejemplo de código:

<strike>Negrita y tachado</strike>

Resultado:

~~Negrita y tachado~~

4. Colores

Los colores se identifican mediante el nombre del color en inglés o bien mediante un código del tipo #rrggbb, donde «rr», «gg» y «bb» son valores hexadecimales comprendidos entre 00 y FF que especifican el grado de saturación de los colores rojo, verde y azul.

Ha de tener en cuenta que algunos colores no se verán o se verán mal si la máquina no soporta 256 colores.

4.1. Color del Texto

En este apartado, se indicará cómo cambiar el color de un grupo definido de caracteres en un texto mediante el elemento .

4.2. Colores del Entorno

Aquí se verá cómo cambiar los colores definidos por defecto para el fondo, el texto normal y los enlaces mediante el elemento <BODY>. Este elemento también permite utilizar una imagen como fondo de página.

4.3. Color del Texto

Se puede controlar el color del texto utilizando el elemento con el atributo COLOR.

A continuación, se muestran algunos ejemplos:

Ejemplo de código:

ROJO AZUL AZUL MARINO VERDE OLIVA AMARILLO LIMA MAGENTA PÚRPURA CYAN MARRÓN NEGRO GRIS TEAL BLANCO

Resulta:

ROJO

AZUL
AZUL MARINO
VERDE
OLIVA
AMARILLO
LIMA
MAGENTA
PÚRPURA
CYAN
MARRÓN
NEGRO
GRIS
TEAL
BLANCO

Como se comentó en la introducción, el color se puede indicar tanto mediante su nombre en inglés como por determinados códigos hexadecimales.

4.4. Colores del Entorno

Un cierto número de atributos de la marca BODY permite controlar el color del fondo de la ventana del navegador, el color de los caracteres del texto y, finalmente, el color de los enlaces:

Ejemplo de código:

4.4.1. El Atributo BGCOLOR

Este atributo permite establecer un color de fondo para el documento.

Ejemplo de código:

Este ejemplo establecerá el color gris claro (#C0C0C0) como color de fondo de página.

4.4.2. El Atributo BACKGROUND

Este atributo permitirá que se utilice una imagen residente en el servidor, o en un fichero local, como fondo de página.

Ejemplo de código:

4.4.3. El Atributo Text

Permite controlar el color del texto estándar, es decir, todo texto que no especifique un enlace.

Ejemplo de código:

Este ejemplo hará que, por defecto, el texto del documento aparezca de color azul oscuro.

4.4.4. Los Atributos LINK, VLINK y ALINK

Controlan el color de los enlaces:

LINK: es el color de un enlace que aún no ha sido visitado.
ALINK: es un color muy fugaz que aparece cuando se hace clic sobre el enlace.
VLINK: es el color de un enlace que ya ha sido visitado.

Ejemplo de código:

5. Frames

Los frames (en inglés, frame = cuadro, bastidor, marco o panel) son un elemento implementado por Netscape que permite dividir la pantalla en varias áreas independientes unas de otras y, por tanto, con contenidos distintos, aunque puedan estar relacionados. Cada una de estas zonas es capaz de mostrar código HTML, como en las celdas de una tabla. Sin embargo, no hay que confundir paneles con tablas, ya que existe una gran diferencia: en el caso de una tabla, todas las celdas forman parte del mismo documento HTML, mientras que en el caso de los frames, cada zona de la pantalla es un documento HTML propio. Se ve, pues, simultáneamente, en la misma ventana de un navegador, la página correspondiente a varios ficheros.

El concepto de frame elimina una de las limitaciones de la Web, ya que hasta ahora, cada nuevo documento destruía el anterior y obligaba al usuario a usar demasiado el comando «Back» de los navegadores. Ahora es posible dedicar ciertas zonas a tareas bien definidas, como por ejemplo tener en una zona un menú que casi nunca será necesario recargar.

La estructura general de un documento dividido en varios paneles difiere de la de un documento clásico, ya que en estos el cuerpo se inserta en las marcas <BODY> y </BODY>, mientras que en los paneles, el cuerpo del documento se inserta entre las marcas <FRAMESET> y </FRAMESET>.

El elemento <FRAMESET> permitirá precisar la forma de los diferentes paneles por medio de dos atributos: ROWS y COLS. <FRAME> es la marca de definición de los paneles creados con FRAMESET.

La mayoría de los visualizadores no soportan los frames. Para que nuestra página con frame no resulte opaca a ellos, se utilizará el elemento <NOFRAMES>, que permite ofrecer un texto alternativo en entorno normal.

Los paneles pueden estar relacionados y tener enlaces de unos a otros. Para ello, se utiliza el atributo TARGET, que indica en qué panel debe mostrarse el documento asociado a un enlace de hipertexto.

Al final de esta página, se muestran diversos ejemplos de frames.

5.1. FRAMESET

Este elemento sustituye al elemento <BODY> y permite dividir una zona en subzonas, bien verticalmente, bien horizontalmente. Si no hay ninguna zona todavía, las divisiones se aplican a la zona inicial formada por el conjunto de la ventana del navegador. Esta marca posee dos atributos:

ROWS: Se utiliza para dividir la zona en subzonas horizontales. La sintaxis es:

ROWS=»altura_zona_1, altura_zona_2,…,altura_zona_n»

ROWS es una lista de valores enteros separados por comas. El número de elementos de la lista corresponde al número de subzonas horizontales a crear. Cada uno de los valores de la lista puede darse según uno de los tres formatos siguientes, donde n es un entero:

A. n: indica la altura de la subzona en píxeles.

B. n%: indica la altura de la subzona expresada en porcentajes del tamaño de la zona madre.

C. n*: n es opcional. El carácter * indica al navegador que debe dar a la zona todo el espacio aún disponible.

COLS: Se utiliza para dividir la zona en subzonas verticales. La sintaxis es igual que en el atributo ROWS.

ROWS=»altura_zona_1, altura_zona_2,…,altura_zona_n»

Ejemplo: A continuación se muestra dos maneras idénticas de dividir una zona en tres. Las dos subzonas superiores son de tamaño idéntico y la última es el doble de las anteriores.
Código:

…
…

FRAME

Es la marca utilizada para caracterizar las subzonas definidas mediante la marca

. Esta caracterización se realiza mediante los siguientes atributos:

1. SCR: Indica el URL del documento que debe mostrarse en esa zona. Si el atributo no se indica, entonces la zona estará vacía.

SCR=»url»

2. NAME: Se utiliza para nombrar la zona a fin de que pueda convertirse en el destino de cualquier enlace de hipertexto. La sintaxis del atributo es:

NAME=»nombre_de_la_zona»

3. MARGINWIDTH: Se utiliza para precisar el número de píxels entre los bordes izquierdo y derecho de la zona y el documento HTML a visualizar, en definitiva marca el margen izquierdo. La sintaxis es :
MARGINWIDTH=»n»

4. MARGINHEIGHT: Se utiliza para precisar el número de pixels entre los bodes superior e inferior de la zona y el documento HTML a visualizar. La sintaxis es:
MARGINHEIGHT=»n»

5. SCROLLING: Indica si la zona debe poseer una barra de desplazamiento (SCROLLING=»yes»), si no debe contar con ella (SCROLLING=»no») o si esta elección se deja en manos del browser (SCROLLING=»auto»). La sintaxis es:
SCROLLING=»yes/no/auto»

6. NORESIZE: Indica al browser que no debe permitir que el usuario modifique el tamaño de la zona. Cuando este atributo no se precisa es posible deformar una zona desplazando su frontera mediante el ratón.
NOFRAMES

Esta marca indica a todo browser incapaz de gestionar los frames el texto que debe presentar al usuario en lugar de los paneles. Dicho texto irá entre las marcas y . En realidad dichos browsers ignorarán las marcas FRAMESET y NOFRAMES pero casualmente no el texto comprendido entre éstas últimas. Por el contrario un browser capaz de gestionar paneles interpretará las marcas y y sabrá que debe ignorar el texto comprendido entre ellas.
El atributo TARGET

Este nuevo atributo afecta a las marcas que caracterizan los enlaces de hipertexto, en particular a las marcas y. TARGET permite precisar el nombre de la zona que debe recibir el documento correspondiente al enlace. Por ejemplo:
Código:

El atributo TARGET existe para indicar al browser que, en respuesta a un clic, debe mostrar el documento dossier.html en el panel cuyo nombre es «zonadossier». De igual modo, el formulario definido por:
Código:

…

Mostrará sus resultados en el panel cuyo nombre es «zonascript».
El atributo TARGET puede tener tres valores diferentes:

* Un valor que corresponde al nombre de un panel existente.El documento asociado al enlace de hipertexto se muestra entonces en el panel en cuestión.

* Un valor que no corresponde a ninguno de los paneles existentes. El browser crea entonces una nueva ventana y muestra el documento. Esta nueva ventana se considera como un panel con el atributo TARGET del origen de su creación.

* TARGET puede tomar uno de los siguientes cuatro valores:

_blank, indica al browser que debe crear una nueva ventana con el fin de mostrar el documento. La nueva ventana es un panel que no tiene nombre y no puede ser por tanto el destino de otro enlace de hipertexto.

_self, indica que el documento se cargará en la misma zona donde se encuentra el enlace de hipertexto. Se trata del valor predeterminado cuando no se indica el atributo TARGET.

_top, indica al browser que suprima todos los paneles existentes y visualice el documento de modo normal.

_parent, indica al browser que visualice el documento ocupando toda la superficie de la zona en la que se ha visualizado el documento que contiene el enlace. Esta noción solo tiene sentido cuando los diferentes niveles de paneles provienen del anidamiento de documentos y no del anidamiento de marcas

A continuación se expondrán algunos ejemplos para que queden claros todos los conceptos aprendidos.
Ejemplos

Un frame básico. Sintaxis general: En general, todas las páginas que contengan un frame deberán ser más o menos así:
Código:

Mi titulo >

Un frame de 3 áreas verticales (COLS)
Código:

Un frame de 3 áreas horizontales (ROWS)
Código:

Un frame combinado de un área vertical y dos horizontales.
El frame A, no podrá ser redimensionado (NORESIZE).
Código:

Un frame con dos áreas verticales. Una normal, la otra con márgenes forzados para el texto (MARGINWIDTH MARGINHEIGHT)

Y se escribiría así:
Código:

MARGINWIDTH=50
MARGINHEIGHT=50>

Un frame con referencias cruzadas (NAME TARGET)
Código:

10. Formularios

Los formularios generan en la pantalla cuadros de diálogo con el lector permitiendo así la interacción con el usuario para consultas de bases de datos, solicitudes de documentación, …
Como en un formulario en papel, se podrán tener zonas en las que se introducirá un texto, casillas de verificación, listas de selección, etc… El usuario rellenará estas zonas en su formulario las cuales se identifican con un nombre simbólico. Cuando el formulario se envía al programa que lo va a tratar, éste recibe el identificador de cada zona y el valor introducido. A dichos programas se les suele denominar scripts, y se han de ejecutar en un espacio del servidor reservado a este efecto: el CGI o Common Gateway Interface.
El tratamiento de los datos recibidos en el servidor desde los formularios requiere conocer la tabla de conversión hexadecimal que utilizan la mayoría de los visualizadores. Dentro de un mismo parámetro las palabras aparecerán, en el destino, separadas por el signo +, y los parámetros entre sí por el símbolo&. Las letras acentuadas y otros caracteres especiales serán valores hexadecimales precedidos del símbolo %, como se muestran en la tabla de códigos hexadecimales del Netscape para Windows .
Para la creación de formularios se utilizarán las siguientes marcas, que permiten generar una interfaz de edición, sin hacer referencia aún a la programación de scripts de CGI:

* la marca FORM que delimita el comienzo y fin de la definición del formulario.

* la marca INPUT que permite crear diferentes tipos de entradas: campos de edición y diversos tipos de botones;

* la marca SELECT que permite crear listas: menús despegables y listas con barras de desplazamiento;

* la marca TEXTAREA que genera una zona de edición de texto libre.
Atributos comunes

Los siguientes atributos son comunes a las marcas que se definen en este apartado para generar formularios:

* El atributo NAME define el nombre que permitirá al script identificar el origen de los datos. Este nombre debe ser único.

NAME=nombre_de_la_variable_asociada

* El atributo VALUE puede ser definido para un campo de:

Texto: permite definir el contenido del campo.

Botón SUBMIT: indica el texto a escribir en el botón.

Botón RADIO, Botón CHECKBOX: valor que se le asocia al botón cuando éste
está pulsado. El valor especificado por NAME identifica el bloque de botones.
FORM

La marca

y definen un formulario y entre ellas se situarán todas las marcas que generan los diversos elementos que componen un formulario. Esta marca debe ir acompañada obligatoriamente por dos atributos:

* El atributo METHOD está dirigido al programador que codifica el script. Al que puede darse el valor POST o el valor GET que define el modo de transferencia de los datos hacia el script. El optar por uno u otro obedece a complejas cuestiones de programación basadas en la máxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta más longitud es POST, y será el que utilicemos en casi todos los ejemplos.

* El atributo ACTION define la acción a ejecutar cuando se pulse el botón de sumisión, indicando el URL del programa (script) encargado de tratar los datos adquiridos desde el formulario.

Input

La marca servirá para definir campos para entrar un texto y botones que permiten escoger opciones.

Permite varios atributos además de los ya comentados de modo general:

A. El atributo SIZE define la longitud de la ventana de texto.

B. El atributo MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la ventana.

Ejemplo:
Código:

Como se puede observar en este ejemplo, el número máximo de caracteres puede ser mayor que el tamaño de la ventana y viceversa

C. El atributo TYPE asociado a la marca INPUT permite la selección del elemento de entrada. Puede tomar los siguientes valores:

* TEXT: es la opción seleccionada por defecto. Define una zona de entrada de texto simple. El texto definido en VALUE aparecerá en dicha zona, para poder ser completado o modificado por el usuario.
Código:

* SUBMIT: desencadena el envío del formulario hacia el script; el texto definido en VALUE se escribirá en el botón:
Código:

* RESET: permite borrar los datos ya entrados:
Código:

* PASSWORD: permite entrar una palabra clave de forma confidencial:
Código:

* CHEKBOX: crea un bloque de botones que permiten una selección múltiple de opciones:
Código:

Macintosh
PC

* RADIO: crea un bloque de botones que permiten una selección exclusiva entre varias opciones
Código:

CD-ROM
Disquete

* HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada en la pantalla.
Código:

* IMAGE: hace que el visualizador presente una imagen que es sensible al ratón. Lo que el formato envía al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parámetros .x=n y .y=m donde n y m son los números de las coordenadas x,y del punto en el que estaba el ratón en el momento del envío. Para representar la imagen se utiliza el atributo SRC del elemento IMG. Por ejemplo:
Código:

http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi«>

Una posible respuesta podría ser:
Código:
imagen.x=7 & imagen.y=38

Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya que el formulario se cierra con la imagen.
SELECT

La marca permite generar listas de selección simple o de selección variable. Se programa con una lista en la que los items se especifican mediante la marca. La presentación de la lista depende del atributo SIZE; si su valor es inferior a 2 o está ausente, la lista se interpreta como un menu desplegable (pop-list). En caso contrario la lista se visualiza en una ventana con barra de desplazamiento. El valor dado entonces al atributo SIZE da entonces el número de líneas visibles en la ventana. La opción de seleción multiple se deriva de la presencia del atributo MULTIPLE.
Ejemplos:

Menú despegable:
Código:

Entrada indirecta
Entrada lateral
Entrada directa

Ventana con barra de desplazamiento: ( con opción de selección múltiple )
Código:

Ada
C++
Cliper
Pascal
Fortran
Cobol

La longitud de la ventana de selección se autoajusta al valor más largo de la lista. Se debe de procurar que los contenidos de los campos sean lo más cortos posibles; una excesiva longitud implica mayor tráfico por la red, pero se deben contruir las listas de forma clara, y que resulten de fácil lectura al usuario, lo que puede aumentar la longitud de los valores. Para solventar este dilema se utiliza el parámetro VALUE asociado al atributo OPTION, el cual permite enviar un valor diferente al que aparece en la lista.

Ejemplo:

A continuación se muestra una lista contenida en una ventana con barras de desplazamiento.
Código:

Pista 1
Pista 2
Pista 3
Pista 4 (para novatos)
Pista 5
Pista 6

TEXTAREA

La marca permite crear una ventana con barras de desplazamiento horizontales y verticales en la que se podrá escribir texto. El valor dado a los atributos ROWS (líneas) y COLS (columnas) delimita el tamaño de esta ventana.

Es posible predefinir un texto (entre las marcas y ) que el usuario podrá reemplazar o completar con su propio texto.

Ejemplo:
Código:

Introduzca aquí sus comentarios

Ejemplo:

A continuación se muestra un típico y complejo formulario que contiene cada uno de los elementos estudiados anteriormente organizados mediante el uso de una tabla.
Código:

http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi» METHOD=POST>

Nombre: F.Nac.:
DNI:
Apellidos:Calle y número:Código Postal: Ciudad:
Provincia: Teléfono:
Estado Civil:
Soltero
Casado
Divorciado
Otro

Hombre
MujerIdiomas: Español
Alemán
Frances
InglésComentarios
personales:Pulse aquí:

10. Formularios

* la marca FORM que delimita el comienzo y fin de la definición del formulario.

* la marca INPUT que permite crear diferentes tipos de entradas: campos de edición y diversos tipos de botones;

* la marca SELECT que permite crear listas: menús despegables y listas con barras de desplazamiento;

* la marca TEXTAREA que genera una zona de edición de texto libre.
Atributos comunes

Los siguientes atributos son comunes a las marcas que se definen en este apartado para generar formularios:

* El atributo NAME define el nombre que permitirá al script identificar el origen de los datos. Este nombre debe ser único.

NAME=nombre_de_la_variable_asociada

* El atributo VALUE puede ser definido para un campo de:

Texto: permite definir el contenido del campo.

Botón SUBMIT: indica el texto a escribir en el botón.

Botón RADIO, Botón CHECKBOX: valor que se le asocia al botón cuando éste
está pulsado. El valor especificado por NAME identifica el bloque de botones.
FORM

La marca

y definen un formulario y entre ellas se situarán todas las marcas que generan los diversos elementos que componen un formulario. Esta marca debe ir acompañada obligatoriamente por dos atributos:

* El atributo ACTION define la acción a ejecutar cuando se pulse el botón de sumisión, indicando el URL del programa (script) encargado de tratar los datos adquiridos desde el formulario.

Input

La marca servirá para definir campos para entrar un texto y botones que permiten escoger opciones.

Permite varios atributos además de los ya comentados de modo general:

A. El atributo SIZE define la longitud de la ventana de texto.

B. El atributo MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la ventana.

Ejemplo:
Código:

Como se puede observar en este ejemplo, el número máximo de caracteres puede ser mayor que el tamaño de la ventana y viceversa

C. El atributo TYPE asociado a la marca INPUT permite la selección del elemento de entrada. Puede tomar los siguientes valores:

* SUBMIT: desencadena el envío del formulario hacia el script; el texto definido en VALUE se escribirá en el botón:
Código:

* RESET: permite borrar los datos ya entrados:
Código:

* PASSWORD: permite entrar una palabra clave de forma confidencial:
Código:

* CHEKBOX: crea un bloque de botones que permiten una selección múltiple de opciones:
Código:

Macintosh
PC

* RADIO: crea un bloque de botones que permiten una selección exclusiva entre varias opciones
Código:

CD-ROM
Disquete

* HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada en la pantalla.
Código:

http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi«>

Una posible respuesta podría ser:
Código:
imagen.x=7 & imagen.y=38

Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya que el formulario se cierra con la imagen.
SELECT

Menú despegable:
Código:

Entrada indirecta
Entrada lateral
Entrada directa

Ventana con barra de desplazamiento: ( con opción de selección múltiple )
Código:

Ada
C++
Cliper
Pascal
Fortran
Cobol

Ejemplo:

A continuación se muestra una lista contenida en una ventana con barras de desplazamiento.
Código:

Pista 1
Pista 2
Pista 3
Pista 4 (para novatos)
Pista 5
Pista 6

TEXTAREA

Es posible predefinir un texto (entre las marcas y ) que el usuario podrá reemplazar o completar con su propio texto.

Ejemplo:
Código:

Introduzca aquí sus comentarios

Ejemplo:

A continuación se muestra un típico y complejo formulario que contiene cada uno de los elementos estudiados anteriormente organizados mediante el uso de una tabla.
Código:

http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi» METHOD=POST>

Elementos, Atributos y Estructura del Lenguaje HTML: Tutorial Completo

1. Elementos del Lenguaje HTML

2. Separadores de Bloques de Texto

3. Tipos de Letra

3.1. <Hn>

Cabecera

3.2. <FONT>

3.3. <BASEFONT>

3.4. Estilos de Caracteres

4. Colores

4.1. Color del Texto

4.2. Colores del Entorno

4.3. Color del Texto

4.4. Colores del Entorno

4.4.1. El Atributo BGCOLOR

4.4.2. El Atributo BACKGROUND

4.4.3. El Atributo Text

4.4.4. Los Atributos LINK, VLINK y ALINK

5. Frames

5.1. FRAMESET

Dejar un Comentario Cancelar la respuesta