sábado, 14 de enero de 2012

CAPÍTULO 3! OTRAS INSTRUCCIONES IMPORTANTES

FORMULARIOS

Un formulario es una plantilla creada para que el usuario se co­munique con nuestro servidor Web de una forma fácil. Igualmente, nos puede enviar información de una forma ordenada, dependiendo de las etiquetas que suministremos en el formulario


El conjunto de datos es una secuencia de campos con pares nombre/valor. Por ejemplo, al configurar el formulario para uso con un programa CGI es necesario que el servidor tenga este programa para poder ejecutarlo.

Declaración del Formulario

La declaración del formulario se pone entre las marcas:

<FORM>…..</FORM>

En la definición del formula­rio se pueden incluir los siguien­tes atributos:

ACTION. Especifica el URI de la acción asociada al formulario. Si no se especifica, por defecto
se asume que el URI es el BASE del documento.


• METHOD. Indica el méto­do de acceso al URI de la acción.El conjunto de métodos aplica­bles es función del esquema del URI. Se pueden emplear los mé­todos GET y POST, que se des­cribirán más adelante.


ENCTYPE. Especifica el tipo de codificación para el transporte de los pares nombre/valor, excepto en los casos en los que el protocolo no imponga uno.
Campos de entrada (INPUT)

El elemento <INPUT> repre­senta un campo de entrada de da­tos. Los atributos posibles vienen dados por el valor del atributo TYPE, que determina el tipo de entrada.

Los tipos de entrada son:

• Texto: INPUT TYPE=TEXT

Como atributos opcionales puede tomar:

MAXLENGTH. Limita el máximo número de caracteresque pueden ser introducidos en el campo.

SIZE. Especifica la canti­dad de espacio reservado para este campo. El valor por defecto
depende del navegador.

VALUE. Indica el valor ini­cial del campo.

Password: INPUT TYPE = PASSWORD. Es un campo de texto como el anterior, pero el valor no se ve al escribirlo.

Casilla de verificación: INPUT TYPE=CHECKBOX. Representa una opción boo-leana (sí o no). Los elementos de este tipo, requieren los atributos NAME y VALUE, que indican el nombre del elemento o grupo de elementos y la parte del va­lor del campo aportada por el elemento, respectivamente. Opcionalmente, podemos incluir el atributo CHECKED, que indi­ca que el estado inicial es selec­cionado.

Botón de opción: INPUT TYPE=RADIO.Representa una opción boo-leana (sí o no). Un conjunto de varios elementos de este tipo con el mismo nombre representan un campo de selección múltiple Los elementos de este tipo requieren, al igual que en el caso anterior, los atri­butos NAME y VALUE.

Opcionalmente, podemos in­cluir el atributo CHECKED, que indica que el estado inicial es se leccionado

Botón de envío: INPUT TYPE=SUBMIT.Representa una opción, nor­malmente mediante un botón, que le indica al cliente que debe enviar el formulario.

Como atributos opcionales acepta:

NAME. Indica que este ele­mento constituye un campo cuyo valor es el del atributo VALUE.

VALUE. Indica la etiqueta para el botón.

Pixel de una imagen: INPUT TYPE=IMAGE .Especifica una imagen para que la muestre el navegador y permite la entrada de dos cam­pos, las coordenadas"x"e"y"

Los atributos NAME y SRC son necesarios, y el campo ALIGN es opcional (al igual que en el elemento <IMG>). El atributo SRC indica la ima­gen usada de fondo, y el atributo ALIGN indica la posición de la imagen.

Ejemplo:

<INPUT TYPE = IMAGE NAME = punto SRC ="enviar.gif">

Botón de reinicio: INPUT TYPE=RESET. Representa una opción de en­trada, generalmente mediante un botón, que le indica al cliente que debe reiniciar los valores de sus campos a los que tenían inicial-mente. El atributo VALUE, si exis­te, indica la etiqueta del botón.

Ejemplo :

<INPUT TYPE = RESET VALUE = "Volver a comenzar">

Campos de Selección (SELECT)

El elemento <SELECT> se em­plea parra reducir el campo a una lista de valores.

Los atributos del elemen­to son:

MÚLTIPLE. Indica que el valor puede incluir más de una opción.

NAME. Especifica el nom­bre del campo.

SIZE. Determina el núme­ro de ítems visibles.
Si se indica tamaño uno, se suelen presentar como listas desplegables, mien­tras que si el tamaño es mayor se suelen presentar como listas con barra de desplazamiento.El elemento <OPTION> sólo puede aparecer dentro de un ele­mento <SELECT>, y representa una posible elección. Puede to­mar los siguientes atributos:

SELECTED. Indica que esta opción está seleccionada inicialmente.

VALUE. Indica el valor a retornar si se selecciona la op­ción.

Área de Texto (TEXTAREA)


El elemento <TEXTAREA> re­presenta un campo de texto de múltiples líneas. Los atributos po­sibles son:

COLS. El número de co­lumnas visibles del área de tex­to, en caracteres.

NAME. Nombre del campo.

ROWS. El número de lí­neas visibles del área de texto


Envío de formularios

Al presentarse el formulario al usuario por primera vez, el contenido de los campos es el de sus valores por defecto, ya sea en blanco o con texto. Al terminar de rellenarlo, el usuario envía el formulario, y el navegador anali­za las entradas en función del método, acción y tipo de codifi­cación.

Tipo de Codificación de formularios

Al enviar un formulario, éste se codifica. El tipo de codificación por defecto es, según el esquema MIME

los datos obtenidos del for­mulario se representan del si­guiente modo:

1. Los nombres de campos y los valores son preprocesados:los espacios son reemplazados por el símbolo "+", y los carac­teres son sustituidos como en los URL. Es decir, los caracteres no alfanuméricos se representan con un signo de porcentaje y dos dígitos hexadecimales que indi­can el código ASCII del carác­ter (%HH). Los saltos de línea (empleados en campos de múl­tiples líneas), se representan con pares CRLF (sustituidos por %OD%OA).

2. Los campos se listan en el orden en el que aparecen en el documento, con los nombres separados del valor por el símbolo "=" y los pares separados entre sí por el símbolo "&". Los campos con valores nulos pueden ser omitidos, en particular, los cam­pos no seleccionados en entra­das booleanas no deben apare­cer en los datos, pero los campos ocultos que tengan el atributo VALUE, sí.


Método Get: METHOD=GET


El método de envío GET es un método de consulta. El servidor recibe los datos en una variable de entorno llamada QUERY-STRING. Un ejemplo de formularios que utilizan el método GET son las consultas a bases de datos, que no tienen efectos visibles en otros programas.

Al procesarse un formulario cuyo URL de acción es un URL de tipo HTTP, el navegador gene­ra un URI que comienza con el de la acción, al que se le añade un interrogante (?) y el conjunto de datos codificado con el forma­to application/x-www-form-ur-lencoded. Para acceder a la con­sulta, el navegador accede al URI de la misma manera que lo hace con cualquier dirección.

Método Post; METHOD=POST

El método de envío POST, se utiliza cuando los datos del for­mulario realiza una modifica­ción, por ejemplo, en la base de datos.

Al procesarse un formulario cuyo URL de acción es de tipo HTTP, el navegador realiza una transacción de tipo POST del protocolo HTTP, usando el URI de la acción y el cuerpo de un mensaje de tipo application/x-www-form-urlencoded. El nave­gador presentará la respuesta del HTTP POST del mismo modo que la respuesta obtenida con el método GET.

Presentamos ahora un ejem­plo completo de una página web con un formulario. Si utilizamos el método POST en un archivo ".txt", el resultado de los datos se presenta de la si­guiente manera.


MARCOS

Los marcos, o frames, nos brindan la posibilidad de dividir nuestras páginas Web en varias regiones, lo que nos permitirá presentar el contenido más es­tructurado.

Con los marcos podemos conseguir los siguientes efectos:

Los elementos como barras de control, copyrights o títulos gráficos, que nos interesa que aparezcan fijos, pueden ser situa­dos en marcos individuales está­ ticos.

Podemos crear marcos con índices de contenido

Del mismo modo, el dise­ño de una página con marcos pa­ralelos

Comandos para crear marcos

Los comandos utilizados en la creación de marcos son los si­guientes:

• FRAMESET define un con­junto de marcos.

<FRAMESET> </ FRAMESET >



FRAME describe las carac­terísticas concretas de un marco.

<FRAME>

NOFRAMES, que utilizare­mos para los navegadores que no soportan los comandos que ha­cen referencia a los marcos.

<NOFRAMES> </ NOFRAMES >

El comando FRAMESET.

El elemento <FRAMESET> nos permite definir el contenedor principal para otros marcos. . Este elemento incluye los atributos ROWS y COLS (filas y columnas).

Debemos tener en cuenta que una página con marcos no ten­drá cuerpo, por tanto, ni la mar­ca <BODY> ni ninguna de las marcas asociadas a ésta, pueden aparecer antes de la marca <FRAMESET>. En caso contrario, <FRAMESET> será ignorado.

Lógicamente, el número de fi­las será igual al número de ele­mentos que componen la lista.

Distintos tipos de valores que pueden tomar los atributos:

Valor. Un valor numérico simple es un tamaño fijo en pixe­les. Éste es el tipo de valor más crítico, ya que el tamaño de la ventana del cliente variará dependiendo de la resolución de la
pantalla. Al utilizar valores fijos,es conveniente combinarlos con valores relativos, puesto que, en
caso contrario, el navegador del usuario asignará los valores que crea conveniente hasta alcanzar
el tamaño de la ventana.

Valor%. Con este valor in­dicaremos un porcentaje del ta­maño de la ventana.

Valor*. El valor de este campo es relativo. Introducien­do un asterisco indicaremos que el marco ocupe el espacio que quede libre. Si creamos dos marcos especificando "2*,*", el resultado sería que el primer mar­co ocupará 2/3 del espacio y el segundo, el resto.

El comando FRAME. 

El comando o marca <FRA-ME> crea un marco dentro de un conjunto de marcos. Esta marca no contiene nada, por lo que no es necesario incluir la marca de cierre.

Los atributos que pueden acompañarla son los siguientes:

SRC="url". El atributo SRC indica el URL de la página Web que se debe mostrar en el marco.

NAME="nom_marco". Este atributo nos permite asignarle un nombre al marco actual, que podrá ser utilizado como referencia en otros documentos.

MARGINWIDTH="valor".Mediante este atributo podremos especificar el tamaño de los már­genes izquierdo y derecho de un marco. Este valor vendrá expre­sado en pixeles.

MARGINHEIGHT="valor". Mediante este atributo po­dremos especificar el tamaño de los márgenes superior e inferior de un marco. Este valor vendrá expresado en pixeles.

SCROLLING = "yes /no/auto". Utilizaremos este atributo para indicar si el marco tendrá barras de desplazamiento o no.Si queremos que el marco tenga barras de desplazamiento, indi­caremos "yes". En caso contra­rio, indicaremos "no".

NORESIZE. Atributo de tipo booleano, que indica si el marco podrá ser redimensionado o tendrá un tamaño fijo.

FRAMEBORDER=1/0. Este atributo indica si los marcos esta­rán separados por una línea (1) o no (0). El valor por defecto es 1.



El comando NOFRAMES


No todos los navegadores so­portan marcos y, por tanto, no mostrarán su contenido. También es posible que el navegador uti­lizado por el usuario tenga de­sactivada su visualización. La finalidad del elemento NOFRAMES es incluir una alter­nativa para estos navegadores.

Un navegador que sí soporte marcos ignoraría todas las mar­cas y datos entre <NOFRAMES> y </NOFRAMES>.


CAPÍTULO 2! INSTRUCCIONES BÁSICAS DE HTML

El COMANDO HTML

Este comando se utiliza para delimitar el documento. Las mar­cas de principio y fin son:
<HTML> </HTML>
EL COMANDO PARRAFO Este comando inserta automá­ticamente un salto de línea al fi­nal del párrafo, y crea el espacia­do adecuado entre los diferentes párrafos del documento.

EL COMANDO SALTO DE LÍNEA

Para insertar un salto de línea, tenemos que utilizar el comando <BR>
Puesto que en HTML, el texto puede flotar alrededor de las imá­genes, es necesario indicar dón­de se debe cortar el texto y dón­de debe comenzar de nuevo, tras una imagen. Para ello, utilizare­mos el atributo CLEAR que podrá tomar los valores: left, right y all

LOS COMANDOS DE ENCABEZAMIENTO

El texto en HTML, cuenta con seis niveles de encabezados. Hay que tener en cuenta que estos comandos insertan un salto de línea tras el texto que com­prenden.

APARIENCIA DEL TEXTO

Es una de las características que harán más atractivas nuestras páginas Web.

Para variar el aspecto del tex­to, disponemos de varios coman­dos. Realmente, al usar estos co­mandos, lo que hacemos es delimitar el texto afectado por los cambios. No debemos olvidar que estos comandos pueden ser utilizados conjuntamente.
Negrita:
<B>…..</B>
Cursiva:
<EM>….</EM>
Parpadeo:
<BLINK>….<BLINK>
Asignar un tamaño fijo y apariencia de caracteres:
<TT>….</TT>
Subrayado:
<U>….</U>


LISTAS    

En un documento HTML se pueden incluir dos tipos de lis­tas. Estas listas, sean del tipo que sean, pueden tener varios nive­les.
Listas no numeradas

Este tipo de listas son conoci­das también como listas no orde­nadas.
Para crear una lista no nume­rada, utilizaremos el comando:
<UL>…</UL>
Los elementos de la lista se in­dicarán con:
 <LI>…</LI>
Cada elemento de la lista, se separará del borde izquierdo y aparecerá acompañado por un símbolo que variará dependien­do del nivel de enlace.
Listas numeradas

Las listas ordenadas o nume­radas, se crean por medio del co­mando:
<OL> ... </OL>
Al igual que en las listas no numeradas, cada elemento de la lista se indicará mediante:
<LI> ... </LI>
De este modo, cada elemen­to se separará del borde iz­quierdo y, a su izquierda, apa­recerá un número.



Listas descriptivas


Para crear una lista descripti­va, usaremos el comando:
<DL> ... </DL>
Cada uno de los elementos de la lista tendrá un título, marcado como:
<DT> ... </DT>
Y un texto para cada título, que será indicado por el coman­do:
<DD> ... </DD>
Este tipo de lista está especial­mente indicada para crear índi­ces, referencias a otros documen­tos, glosarios, etc.



CENTRANDO TEXTO

Podemos centrar cualquier parte del documento por medio del comando:
<CENTER> ... </CENTER>

LINEAS HORIZONTALESLa línea horizontal, se inserta con el comando <HR>



ENLACES
Referencias en el mismo documento

Tenemos la posibilidad de crear enlaces que lleven al usuario de un lugar del documento a otro, dentro del mismo documento, por medio de un clic. Este tipo de enlaces, son conocidos como re­ferencias locales. Estas referen­cias se componen de dos partes:

La Referencia
Es la zona en la que el usua­rio hace clic, para desplazarse a otra parte del documento .Para crear una referencia lo­cal, delimitaremos la zona con el comando:
<A href= "#nombre"> Texto del enlace </A>
El nombre referenciado
Esta es la zona del documen­to a la que accede el usuario al hacer clic en la referencia corres­pondiente.
Para crear un nombre local, tendremos que delimitar la zona mediante el comando:

<A NAME= "nombre"> ... </A>

Referencias a otros documentos

Lógicamente, para crear un enlace a otro documento, es im­prescindible conocer la ubica­ción del documento al que que­remos hacer referencia.
Existen dos tipos de referen­cia a una ubicación:
Referencia relativa
Para indicar una referencia relativa, tendremos que especifi­car la posición del documento en la estructura de subdirectorios, a partir de la ubicación del docu­mento actual. Utilizaremos el comando:
<A href= "ubicación'^ Texto del enlace </A>

Referencia absoluta

Para crear una referencia ab­soluta, tendremos que especifi­car la dirección o URL de la pá­gina en cuestión Para enlazar un hypertexto, usaremos el comando:
<A "href= http//ordenador/dIrectorio/archivo">
En "ordenador", indicaremos el nombre de la máquina en la que se encuentre el documento. En "directorio" y "archivo", in­dicaremos la ubicación del do­cumento dentro del ordenador

Referencias a un lugar de otro documento

La creación de este tipo de re­ferencias utiliza una combina­ción de los dos modos vistos anteriormente. Para crear este tipo de enlaces, indicaremos el URL del documento asi que hace­mos referencia, escribiremos un signo # y finalmente introducire­mos el nombre de la zona a en­lazar.



Referencia a una dirección e-mail

Para ello, escribiremos:
<A href= "mailto: dirección de email"> Texto del enlace </A>





CAPÍTULO 1! EL LENGUAJE DE HTML

El lenguaje HTML (Hypertext Markup Language), es un sistema para definir tipos de documentos estructurados y lenguajes de mar­cas para representar esos mismos documentos. Este lenguaje es una aplicación del SGML (Standard Ceneralized Makup Language)

Caracteres

Toda cadena de caracteres imprimibles que no represente una marca, se visualizará en el navegador literalmente
Referencia por nombre: el carácter se representa con un & seguido del nombre del carácter y un punto y coma.
Referencia numérica: en lugar de dar la referencia por nombre, se escribe # seguido del número de carácter en el código de caracteres seleccionado.
Marcas

Las marcas delimitan los ele­mentos de un documento HTML, como cabeceras, párrafos, etc. Las marcas siempre constan de dos partes, una marca de inicio del elemento, y otra marca de fi­nalización del elemento. Es en la marca inicial donde se definen los atributos.

Las marcas iniciales se escri­ben entre los símbolos "<" y ">" y las finales entre "</" y ">"
Nombres

Los nombres se componen de una letra seguida de letras, dígi­tos o guiones La longitud de un nom­bre está limitada a 72 caracteres. Los nombres de elementos y atri­butos no distinguen entre mayús­culas y minúsculas, pero los nombres de entidades, tales como ficheros u otras páginas web referenciados, sí

En las marcas, el nombre del elemento debe comenzar direc­tamente después de "<".


Atributos

Cuando una marca inicial ad­mite atributos, éstos se escriben a continuación del nombre del elemento. nombre_atributo=valor_atributoLa longitud del valor de un atributo no puede superar los 1.024 caracteres
Comentarios

La manera de incluir comen­tarios en HTML, se realiza me­diante la marca de comentarios.Dentro de estas marcas es donde se incluyen los comenta­rios correspondientes.
Cada comentario comienza con "—" e incluye todo el texto hasta la siguiente aparición de "—" Dentro de una de­claración de comentarios, se pueden poner espacios en blan­co después de cada uno de ellos, pero no antes del primero.

Identificación del Nivel HTML de un Documento

El lenguaje HTML se compone por bloques, cada uno identificado por marcas, que se identifican mediante una instrucción de ini­cio y otra de final.
En el nivel más alto, nos encontramos el elemen­to HTML (marca inicial <HTML> y final </HTML>) que consta de dos partes: cabecera y cuerpo
En la cabecera se proporcio­na información acerca del docu­mento, mientras que el cuerpo contiene el texto de la página, es decir, la información que se va a presentar al usuario. En el cuer­po se pueden incluir todo tipo de elementos y marcas.

Cabecera

La cabecera es una informa­ción acerca de las características generales del documento. Las marcas de principio y fin del blo­que son:
<HEAD> </HEAD>
Puede contener los siguientes datos:
Título (TITLE). Indica el nombre del documento. Este campo es el único obligatorio en la cabecera.
Dirección de base (BASE). Proporciona una dirección de base para interpretar los enlaces relati­vos cuando el documento se lee fuera de su contexto
El documento es un índice Si se pone la palabra clave ISINDEX, el cliente inter­pretará que la página es un índi­ce y permitirá al usuario introdu­cir palabras clave para buscarlas.

El atributo NAME se refiere a nombres elegidos al azar por el usuario, mientras que HTTP-EQUIV significa que el valor tiene una cabecera equivalente real en el protocolo HTTP.
Cuerpo

El cuerpo contiene la parte más importante del documeno HTML. Es donde vamos a inser­tar todo el texto y los objetos que van a ser presentados al usuario. Las marcas de principio y fin del cuerpo son:
<BODY>
</BODY>