Manual de Paginas HTML

Manual de Paginas HTML (HyperText Markup Language)
Introduccin a Programacion Web

Todo documento HTML est compuesto por etiquetas (tags). Este es el nombre que se le da a los comandos HTML. Debes comenzar tu pgina con la etiqueta <HTML>, en el primer rengln del cdigo, y terminar con </HTML> en el ltimo rengln del documento. Fjate que la barra "/" seala el cierre de la etiqueta. Este cierre es necesario para que pueda ser interpretada por el navegador. La estructura de las etiquetas se codifica de la siguiente forma: <HTML> <HEAD> <TITLE> Mi documento HTML </TITLE> </HEAD> <BODY> Aqu van los comandos HTML. </BODY> </HTML> <BODY BGCOLOR="color" TEXT="color" LINK="color" ALINK="color" VLINK="color" BACKGROUND="imagen que va a aparecer"> Donde: - BGCOLOR Color de fondo (padrn: gris o blanco) - TEXT Color de los textos de la pgina (padrn: negro) - LINK Color de los enlaces (padrn: azul) - ALINK Color de los enlaces al accionarse (padrn: rojo) - VLINK Color de los enlaces despus de visitados (padrn: azul oscuro o bord) - BACKGROUND Imagen de fondo. En "color", puedes colocar los valores de colores en ingls, como: Negro = black Blanco = white Azul = blue Amarillo = yellow Rojo = red
<Cmo incluir textos>

Etiquetas de ttulo <H> - "Headings" Con ellas puedes definir solamente el tamao de las letras, pero no el tipo de fuente. Mira como quedan las etiquetas de ttulo, "headings", para encabezamientos que van desde el tamao 1 al 6. <H1> Este es el primer nivel </H1> <H2> Este es el segundo nivel </H2> <H3> Este es el tercer nivel </H3> <H4> Este es el cuarto nivel </H4> <H5> Este es el quinto nivel </H5> <H6> Este es el sexto nivel </H6>
Este es el primer nivel

Este es el segundo nvel
Este es el tercer nvel
Este es el cuarto nvel
Este es el quinto nvel
Este es el sexto nvel
La etiqueta es <FONT> dentro de ella puedes definir varios parmetros, como color, tamao y tipo de letra. Las etiquetas de fuentes se utilizan de la siguiente manera:
FACE: Esta opcin te permite seleccionar la fuente (tipo de letra) para los textos, la etiqueta se realiza como sigue: <FONT FACE=fuente_de_letra>Texto</FONT> Ejemplo: <FONT FACE=Times>Fuente Times New Roman </FONT>
Fuente Times New Roman

COLOR y SIZE: Atributos de color y tamao: <font size="3"> La palabra tendr tamao 3</font>
La palabra tendr tamao 3

<font color="red"> A palavra ter a color rojo</font>
La palabra tendr color rojo .

Tambin podemos combinar las etiquetas de arriba: <font face="Arial" size="2" color="red">Palabra con tamao 3 y en rojo </font>
<Formatear textos>
<B> Texto </B> - Texto queda en Negrita. <U> Texto </U> - Texto Subrayado. <I> Texto </I> - Texto en Cursiva. <CENTER> Texto </CENTER> Texto centrado
Los cdigos tambin se pueden escribir unos sobre otros, acumulando sus efectos, como por ejemplo:

<CENTER><B><U>Prueba 1</U> <I>y</I> Prueba 2</B></CENTER> Para comenzar un nuevo prrafo, basta colocar la etiqueta <P>. Por ejemplo, escribe en el editor lo siguiente, de esta forma: Prrafo 1<P>Prrafo 2. El resultado ser el siguiente: Prrafo 1 Prrafo 2
Como puedes ver, el navegador, por si mismo, comienza un nuevo prrafo cada vez que agregas esta etiqueta. En caso de que quieras simplemente cambiar de rengln, en lugar de cambiar de prrafo, debes colocar la etiqueta <BR>. Por ejemplo, debes escribir: Prrafo 1<BR>Rengln 1<P>Prrafo 2<BR>Rengln 2. El resultado ser el siguiente: Prrafo 1 Rengln 1 Prrafo 2 Rengln 2 Los prrafos tambin pueden tener atributos para alinear los textos. No hay ms que incluir, despus de "P", el parmetro "align=tipo de alineacin". Los atributos son: - Left: Alineacin a la izquierda - Rigth: Alineacin a la derecha - Center: Centrado - Justify: Texto justificado (Funciona nicamente con navegadores versin 4 o superior) Incluir uno de estos atributos es fcil. Mira los ejemplos: <p align="left">Texto alineado a la izquierda</p> <p align="right">Texto alineado a la derecha</p> <p align="center">Texto centrado</p> <p align="justify">Texto justificado</p>
<Cmo incluir imgenes>

Los formatos ideales para homepages son GIF y JPG. No se puede usar el formato BMP. La etiqueta para insertar una imagen en tu pgina es la siguiente: <img src="nombre del archivo de imagen que va a aparecer">
<Cmo alinear imgenes>

Existen muchos recursos que puedes usar para alinear los textos e imgenes en tu pgina, y darles una organizacin y una apariencia diferentes. Para las alineaciones, debes incluir los parmetros dentro de la etiqueta de imagen, como sigue:
Puedes ver cmo queda el texto en la imagen. Este es un ejemplo de alineacin padrn; no es necesario incluir ninguna etiqueta.
Ahora puedes ver cmo queda el texto en la parte superior de la imagen. Este es un ejemplo de alineacin al borde superior de la imagen. Para lograr esta alineacin, la etiqueta de imagen debe quedar as: <img src="nombre de la imagen" align="top"> Fjate que solamente incluimos align="top" en la etiqueta de imagen.
Observa ahora cmo queda el texto en mitad de la imagen. Este es un ejemplo de alineacin al medio de la imagen. Para lograr este efecto, la etiqueta de imagen debe quedar as: <img src="nombre de la imagen" align="middle"> Fjate que solamente incluimos align="middle" en la etiqueta de imagen.
El texto tambin puede quedar alrededor de las imgenes, como es comn en los peridicos. Este es un excelente recurso cuando deseas colocar un texto al lado de una fotografa que destaca el tema del texto. La etiqueta para esta alineacin es: <img src="nombre de la imagen" align="left">
En el siguiente ejemplo, la imagen est alineada al lado derecho, y el texto queda alrededor. Es exactamente lo opuesto a la alineacin a la izquierda. La etiqueta para esta alineacin es: <img src="nombre de la imagen" align="right">
- Para lograr una imagen centrada: <CENTER><img src="nombre de la imagen"></CENTER>

El resultado ser:
<Cmo crear enlaces>

Los enlaces son los puntos del documento HTML que, al hacer clic en ellos, nos llevan a cualquier otro documento de tu pgina o sitio en Internet. <a href="nombre-del-lugar-a-ser-llevado">descripcin</a> "Nombre-del-lugar-a-ser-llevado" aqu colocas el archivo que quiere que sea visitado, por ejemplo datos.htm, o un URL como http://www.starmedia.com. - "Descripcin" es lo que aparecer subrayado en la homepage indicando que se puede hacer clic ah. Por ejemplo, si la descripcin fuese "Haz clic aqu para visitar StarMedia", tendras que colocar este cdigo: <a href="http://www.starmedia.com">Haz clic aqu para visitar StarMedia </a>
<Listas>
Las listas se hacen para crear mens simples u organizar temas y textos en tu pgina. En las listas ordenadas, el navegador se encarga de colocar los nmeros de referencia de cada lista. Una lista ordenada va enmarcada por el par <OL> ... </OL>. Ejemplo 1: <OL> <LI> Primer elemento de una lista ordenada <LI> Segundo elemento de una lista ordenada <LI> Tercer elemento de una lista ordenada </OL> El resultado sera el siguiente: 1. Primer elemento de una lista ordenada 2. Segundo elemento de una lista ordenada 3. Tercer elemento de una lista ordenada En listas no ordenadas se utiliza algn smbolo grfico. Este tipo de lista va enmarcada por el par <UL> ... </UL>. Para que el interpretador distinga un fragmento de texto de una lista, se deber colocar en el inicio de cada lnea el comando <LI>, no hay necesidad de cerrar esta etiqueta con </LI>. Algunos ejemplos: Ejemplo 2: <UL> <LI> Primer elemento de una lista sin orden <LI> Segundo elemento de una lista sin orden <LI> Tercer elemento de una lista sin orden </UL> El resultado ser el siguiente:
Primer elemento de una lista sin orden Segundo elemento de una lista sin orden Tercer elemento de una lista sin orden
<Insertar imagen de fondo>

As como se puede definir un color de fondo diferente para las pginas, tambin es posible colocar una imagen como tapiz. La imagen de fondo es un atributo que colocamos dentro de la etiqueta <BODY> sobre la que aprendiste al principio de este Tutorial. Mira como queda: <BODY BACKGROUND="nombre de la imagen"> En "nombre de la imagen" debes colocar el nombre del archivo de imagen que deseas poner de fondo. Puede ser un archivo GIF o JPG.
<Letreros y lneas>
Existen ms recursos para usar en tu sitio. Uno de ellos es el letrero, mediante el cual la imagen permanece "desplazndose" por la pantalla. Se logra con la etiqueta "<MARQUEE>", pero este recurso funciona solamente con Internet Explorer. En Netscape, el texto permanecer inmvil, por lo que debes pensar si realmente valdr la pena usarlo. Para usar este recurso: <MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE> - En "BEHAVIOR" colocas el tipo de efecto, que puede ser "SCROLL" o "SLIDE". - En "WIDTH" puedes definir el tamao que el letrero tendr en la pantalla. Mira: <MARQUEE BEHAVIOR=SCROLL WIDTH=100%>Texto</MARQUEE>
<Tablas>
Las tablas fueron una gran conquista para los autores de los documentos Web. Con ellas es posible, por ejemplo, tener las pginas de este manual organizadas en columnas, quedando una de ellas dedicada exclusivamente a los enlaces de navegacin y observaciones. Las tablas implementan un importante concepto de diseo, las grades de acuerdo con las cuales organizamos textos e ilustraciones de forma organizada. El formato de las tablas forma parte de la versin 3.0 del lenguaje HTML. Manipular las tablas en HTML cuesta trabajo y se necesita paciencia. La etiqueta para crear una tabla es <TABLE>, y dentro de ella colocas atributos importantes para el correcto formato de la tabla. No olvides cerrar la etiqueta con </TABLE>. <TABLE BORDER> Este elemento delimita la tabla y el espesor de sus bordes: <TABLE BORDER=valor del espesor> ... </TABLE> - WIDTH y HEIGHT Con estos atributos, puedes definir el tamao que la tabla va a ocupar en la pantalla. WIDTH (ancho), HEIGHT (altura). Pueden ser en pxeles o en porcentaje. HEIGHT, altura, no es prcticamente usado, pero el valor del ancho es muy til. Lo usas de la siguiente manera: <TABLE BORDER=valor da borda WIDTH="valor del borde>

Un ejemplo de tabla cuyo ancho es el 75% de la pantalla (WIDTH="75%"): Columna 1 Columna 2
fila 1, columna 1 fila 1, columna 2 fila 2, columna 1 fila 2, columna 2 - Colores de Fondo: Cuando creas una tabla, su fondo es transparente, por lo tanto, siempre va a adoptar el color de fondo o la imagen de fondo de la pgina. Pero es posible definir el color de fondo para cada celda, fila y columna de una tabla. Para ello debes incluir el atributo "BGCOLOR". Quedara as: <table border=2> <th bgcolor="#FF0000">Columna 1</th> <th bgcolor="#009900">Columna 2</th> <tr> <td>fila 1, columna 1</td> <td>fila 1, columna 2</td> </tr> <tr> <td>fila 2, columna 1</td> <td>fila 2, columna 2</td> </tr> </table> Resultado: Columna 1 Columna 2
fila1, columna 1 fila 1, columna 2 fila 2, columna 1 fila 2, columna 2
<Cmo agregar sonidos>

Los archivos de sonido ideales para insertar en una homepage son los que estn en formato MIDI (.MID), pero tambin se pueden incluir sonidos tipo WAVE (.WAV). Netscape e Internet Explorer tienen algunas diferencias en su sistema y, por lo tanto, en algunas versiones de Netscape el sonido no se escucha correctamente. La etiqueta debe ser <EMBED>. Por ejemplo: <embed src="nombre del tema" loop="2" autostart="true">
En "nombre del tema" colocas el nombre del tema mid o wav. - En "loop" colocas el nmero de veces que quieres que se repita. - En "autostart" defines si quieres que la msica comience a tocar sola (atributo TRUE). Si colocas "FALSE" el usuario tendr que hacer clic en el botn"play" para escucharla. Si quieres que se repita infinitamente, basta colocar "infinity" en lugar de un nmero. No es necesario colocar "</embed>" en ese caso.
<Marcos >
Los marcos son divisiones de la pantalla del navegador en varias pantallas (o "marcos"). De esta forma se puede presentar ms de una pgina por vez; por ejemplo, un ndice principal en una parte pequea de la pantalla y los textos relacionados con el ndice en otra parte. Se trata de un recurso muy usado para crear mens de navegacin que se mantienen fijos, cambiando solamente otro marco en el que aparecen las pginas.
Para crear una pgina con dos marcos, tendrs que crear por lo menos 3 pginas, que resultarn en una. Esto se debe a que cada marco es una pgina HTML (2 marcos) y hay una tercera pgina principal dentro de ella. Para crear un marco, primero debes crear dos pginas simples y guardarlas en el mismo directorio. Luego creas una tercera pgina con la siguiente etiqueta: <HTML> <HEAD> <TITLE> Coloca el Ttulo aqu </TITLE> </HEAD> <FRAMESET COLS=20%,80%> <FRAME SRC="a.html"> <FRAME SRC="b.html"> </FRAMESET> <BODY> </BODY> </HTML> Recuerda siempre colocar el cdigo para los marcos despus de la etiqueta </head> y antes de la etiqueta <body>. La parte FRAMESET define la divisin de la pgina en "marcos". En este ejemplo, la pgina se dividir en dos columnas (Atributo COLS), la primera ocupar 20% del tamao de la pantalla, y la segunda el restante 80%. Dentro del formato FRAMESET, tenemos los FRAME SRC, , tenemos los FRAME SRC, que son referencias a las pginas que sern mostradas en los marcos definidos. Aqu vemos la pgina "a.html" mostrada en la primera columna (que ocupar 20% de la pantalla), y "b.html" en la segunda (ocupando 80% de la pantalla). Substituye "a.htm" para la primera pgina que has creado por "b.htm" en la segunda. Guarda y observa el resultado. Este es el comando bsico para hacer una pgina con marcos. Veamos los tipos de marcos que es posible crear. En la seccin "Descarga de ejemplos" podrs bajar archivos con ejemplos de marcos que te facilitarn la construccin de pginas.
Creando Framesets
Como probablemente hayas observado, FRAMESET tiene atributos que definen la divisin de la ventana del navegador en columnas; esta divisin tambin puede hacerse en filas, y utilizando una combinacin de "framesets" para diversas presentaciones. Recuerda siempre colocar el cdigo para los marcos despus de la etiqueta </head> y antes de la etiqueta <body>. Verifica los tipos de divisiones ms comunes que puedes hacer. Podrs hacer la descarga de los archivos de ejemplos en este manual. <FRAMESET COLS="20%, 80%"> <FRAME SRC="columna1.html"> <FRAME SRC="columna2.html"> </FRAMESET> <FRAMESET ROWS="20%, 80%"> <FRAME SRC="fila1.html"> <FRAME SRC="fila2.html"> </FRAMESET> <FRAMESET COLS="20%, 80%"> <FRAME SRC="columna1.html"> <FRAMESET ROWS="20%, 80%"> <FRAME SRC="fila1.html">

<FRAME SRC="fila2.html"> </FRAMESET> </FRAMESET> <FRAMESET ROWS="20%, 80%"> <FRAME SRC="fila1.html"> <FRAMESET COLS="20%, 80%"> <FRAME SRC="columna1.html"> <FRAME SRC="columna2.html"> </FRAMESET> </FRAMESET> Recuerda que los marcos fijos no necesitan nombre, pero aquellos que tendrn textos, s lo necesitan. El sencillo ejemplo que hemos visto hasta ahora sigue el modelo de la primera composicin (en columnas). Las composiciones con ms de un frameset necesitan planificarse cuidadosamente para que funcionen bien. Los valores de los atributos COLS y ROWS pueden ser alterados conforme a tus necesidades.
- Atributos Especiales: Hasta aqu hemos visto los atributos COLS y ROWS (para FRAMESET), SRC y NAME (para FRAME). Existen otros que te permiten un mayor control de la presentacin: - FRAMEBORDER="NO" Eliminacin de bordes de los marcos: "NO" sin bordes, "YES" con bordes. - BORDER="valor del espacio" Eliminacin del espacio entre los marcos. - SCROLLING="NO" Marco sin barra de desplazamiento. La opcin "YES" define la existencia de la barra de desplazamiento. Combinando estos atributos en una etiqueta de marcos simple tendramos: <FRAMESET COLS="20%, 80%" FRAMEBORDER="NO" BORDER="0" SCROLLING="NO"> <FRAME SRC="col1.html"> <FRAME SRC="col2.html"> </FRAMESET>
<Formularios - Parte 1>

Un formulario es un modelo para la entrada de un conjunto de datos. Se usan mucho en registros electrnicos o para el envo de emails a pginas sin necesidad de abrir un programa de email o escribir direcciones, y ofrece la ventaja de tener campos para cada tipo de informacin. El primer paso para hacer formularios es aprender cules son las etiquetas que hacen los campos de entrada de datos. El elemento <FORM> inicia un formulario y contiene una secuencia de elementos de entrada y de formato del documento. <FORM ACTION="URL_de_script" METHOD=mtodo>...</FORM> - Atributos de la etiqueta <FORM> - ACTION Especifica el URL del "script" al que se enviarn los datos del formularios.
- METHOD
10
Selecciona un mtodo para acceder a los URL de accin. Los mtodos empleados actualmente son GET y POST. Ambos mtodos transfieren datos del navegador al servidor, con una diferencia bsica:
POST Los datos insertados hacen parte del cuerpo del mensaje enviado al servidor; transfiere gran cantidad de datos. GET Los datos insertados hacen parte del URL asociado a la consulta enviada al servidor; soporta hasta 128 caracteres.
FORMULARIOS
Los formularios pueden contener formatos de todo tipo: prrafos, listas, tablas, imgenes, a excepcin de otros formularios. En particular, colocamos dentro de la marca de <FORM> los formatos para campos de entrada de datos, que son tres: <INPUT>, <SELECT> y <TEXTAREA>. Todos los campos de entrada de datos tienen un atributo NAME, al que se asocia un nombre usado posteriormente por el sistema para enviar los datos. Normalmente se utilizan "scripts". Los "scripts" organizan estos datos de entrada de todos los campos en un conjunto de informaciones y realizan una tarea programada, como por ejemplo enviar los datos del formulario a tu email. El lenguaje HTML no tiene condiciones de hacerlo, por lo que es preciso utilizar scripts CGI, PERL o ASP para ejecutar estas tareas. Sin embargo, estos tipos de scripts requieren mayor tiempo de aprendizaje y son mucho ms complejos que el HTML, pues procesan informacin. Puedes utilizar scripts ya elaborados en tus formularios, pero de momento todava no es posible que miembros de Orbita ejecuten los scripts en los servidores.
<Formularios - Parte 2> Cmo crear los campos de entrada de datos.

Es necesario crear los campos donde los usuarios ingresarn los datos y seleccionarn las opciones. Estos campos se incluyen dentro de la etiqueta <FORM>. Te explicaremos qu funcin cumple cada uno y cmo crearlos:
<INPUT> Esta es la etiqueta para iniciar la creacin de campos de datos. Existen varios atributos que permiten crear diferentes campos de entrada de datos. Veamos:
- Campo de datos de texto Cuando INPUT no presenta atributos, se adopta TYPE=TEXT como padrn de formato: <FORM> Nombre: <INPUT TYPE=TEXT NAME="Nombre"> </FORM> O solamente: <FORM> Nombre: <INPUT NAME="Nombre"> </FORM> Resultado:
Nombre:
11
- Campo de datos de texto en formato clave Se trata de un ingreso de texto cuyos caracteres aparecen disimulados por asteriscos. Se utiliza mucho para el ingreso de claves, como puede verse en el ejemplo. <FORM> Usuario: <INPUT TYPE=TEXT NAME="login"><br> Clave: <INPUT TYPE=PASSWORD NAME="clave"> </FORM> Resultado:
Usuario:
Clave:
- Atributo NAME Existe especialmente para que le des un nombre al campo, no aparece en la pgina, pero sirve para identificar el campo y el valor ingresado en el email que t recibas. Nunca dejes de definir el nombre de los campos, slo as podrs saber cmo complet cada usuario determinado campo. Si tienes, por ejemplo, varios campos de texto, cada uno para un tipo de informacin diferente, utilizars el nombre para identificar el campo. Siempre vers que en todas las etiquetas INPUT este atributo est presente. Unicamente tienes que incluirlo como sigue: <INPUT TYPE=TEXT NAME="coloca el nombre del campo"> - Atributo VALUE - VALUE Puede usarse para dar un valor inicial a un campo de tipo texto o clave. De este modo, si el usuario no completa este campo, se adoptar un valor padrn. Si el usuario quiere ingresar datos, slo tendr que borrar lo que ya est escrito. Nombre: <INPUT TYPE=TEXT NAME="nombre" VALUE="Tu nombre"> Resultado:
Nombre:
- Atributo SIZE - SIZE Especifica el tamao del espacio en el video para el campo del formulario. No es vlido ms que para los campos TEXT y PASSWORD. El valor padrn es 20. <FORM> Direccin: <INPUT TYPE=TEXT SIZE=35> </FORM> Resultado:
12
Direccin: - Atributo MAXLENGTH - MAXLENGTH Es el nmero de caracteres aceptados en un campo de datos; este atributo es vlido solamente para campos de entrada TEXT y PASSWORD. <FORM>Da del mes: <INPUT TYPE=TEXT NAME="ex" MAXLENGTH=2> </FORM> Resultado:
Da del mes: Slo dos caracteres sern ledos por el formulario, sin importar cunto se escriba en ese campo. - Campo de Datos Oculto (Hidden) Este tipo de campo funciona como un campo de texto, pero sin aparecer en el formulario para el visitante. Est en el cdigo, pero el visitante no lo puede ver ni cambiar. Es muy til para incluir informaciones importantes que no deben ser modificadas por el visitante. Observa un ejemplo: <FORM> <INPUT TYPE=HIDDEN NAME=Oculto Value=Si> </FORM> Aqu el campo est oculto. El visitante no lo ve, pero el mismo ser procesado por el formulario. Puedes incluirlo sin ningn problema junto con los dems elementos. Por ejemplo: <FORM> Usuario: <INPUT TYPE=TEXT NAME=login><br> Clave: <INPUT TYPE=PASSWORD NAME="clave"> <INPUT TYPE=HIDDEN NAME=Oculto Value=Si> <FORM> - Mltiple opcin Tambin puedes crear un campo donde el usuario precise solamente seleccionar las opciones, sin escribir nada. Hay dos tipos de seleccin bsicos: - CHECKBOX Inserta un botn para elegir valores para diferentes opciones.
<INPUT TYPE=CHECKBOX NAME="deporte" VALUE="bsquebol">Bsquebol <br > <INPUT TYPE=CHECKBOX NAME=deporte VALUE=bochas>Bochas
Un atributo "CHECKED" marca una eleccin inicial, es decir, si el usuario no escoge ninguna opcin, el formulario considerar la alternativa "pre-seleccionada":
<INPUT TYPE=CHECKBOX NAME="deporte" VALUE="voleibol" CHECKED& gt;Voleibol <br> <INPUT TYPE=CHECKBOX NAME="deporte" VALUE="futbol">Ftbol

Resultado: Deportes que practicas: Ftbol Voleibol Natacin Bsquetbol Tenis Bochas - Opcin nica - RADIO Inserta un botn de seleccin de valores para una opcin, es decir, solamente se puede elegir una alternativa.
13
<INPUT TYPE=RADIO NAME="time" VALUE="palm">Palmeiras <br> <INPUT TYPE=RADIO NAME="time" VALUE="inte">Internacional

Un comando CHECKED marca una eleccin inicial, si el usuario no elige ninguna opcin, el formulario considerar la alternativa "pre-seleccionada":
<INPUT TYPE=RADIO NAME="time" VALUE="aea" CHECKED>Cruzeiro <br> <INPUT TYPE=RADIO NAME="time" VALUE="naut">Nutico
Resultado: El cuadrodel que eres hincha: Palmeiras Internacional - Botones de accin Cruzeiro
Se usan para ejecutar acciones dentro del formulario, como enviar los datos o limpiar los campos. - SUBMIT Presenta el botn que activa el envo de los datos de ingreso al servidor.
<FORM> <INPUT TYPE=SUBMIT> </FORM>

Resultado:
Enviar consulta
Es posible modificar el mensaje de ese botn a travs del atributo VALUE.
<FORM> <INPUT TYPE=SUBMIT VALUE="Enviar mensaje"> </FORM>

Enviar mensaje
- RESET Restaura los valores iniciales de las entradas de datos.
<FORM> <INPUT TYPE=RESET> </FORM>

Resultado:
Restablecer

Es posible modificar el mensaje de ese botn a travs del atributo VALUE
14
<FORM> <INPUT TYPE=RESET VALUE="Borrar todo!"> /span> </FORM>

Borrar todo!
- Ejercicios Ahora vamos a practicar. Crea un formulario con un campo para el nombre, otro para el email, otro para escoger el sexo, y los botones de enviar y limpiar. - Observa aqu cmo debe quedar, despus trata de hacer lo mismo.
Limpiar
Al hacer clic en visualizar, se abrir una nueva ventana donde podrs verificar si has utilizado los cdigos correctamente. Si tienes alguna duda, haz clic en el botn "Quiero Ayuda".
<Formularios - Parte 3> Cmo crear los campos Select y TextArea

- <SELECT> Presenta una lista de valores en un men desplegable. Es ptimo para crear opciones que el usuario puede seleccionar sin necesidad de escribir en los campos <OPTION>. Se hace de la siguiente manera:
<SELECT NAME="sabor"> <OPTION>Anan <OPTION>Crema <OPTION>Frutilla <OPTION>Chocolate </SELECT>

Resultado:
- Atributo SELECTED Tambin es posible establecer una opcin padrn, mediante el atributo SELECTED
<SELECT NAME="sabor"> <OPTION>Anan <OPTION SELECTED>Crema <OPTION>Frutilla <OPTION>Chocolate </SELECT>

Resultado:
15
Aqu, Crema ya aparece previamente seleccionado.
- Atributo SIZE Con el atributo SIZE, se eligen cuntos tems de la lista se mostrarn (en el ejemplo, SIZE=4):
- <TEXTAREA> Abre un rea para la entrada de texto de acuerdo con los atributos para nmeros de columnas, filas, y, si corresponde, un valor inicial. Es un campo donde las personas podrn escribir ms que en los campos de texto que vimos en la parte 2. Adems, el usuario puede ver lo que est escribiendo. La etiqueta queda as:
<TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deje su comentario </TEXTAREA>

Resultado:
Fjate que, en el atributo "COLS", definimos el nmero de columnas para el ancho del campo de texto y en "ROWS", el nmero de filas. Si el usuario escribe ms de cinco lneas, surgir una barra de desplazamiento para que pueda cortar el texto si lo desea. Los valores de estos atributos pueden modificarse a voluntad, de acuerdo con tus necesidades.
- Ejercicios Crea un formulario con ms recursos. Adems del campo para el nombre y el email, intenta ahora incluir un men desplegable con algunas opciones y un cuadro de texto con 30 columnas y seis lneas. No olvides los botones para enviar y limpiar. - Observa
aqu cmo debe quedar, y despus trata de hacer lo mismo.
16
Limpiar
Al hacer clic en visualizar, se abrir una nueva ventana donde podrs verificar si has utilizado los cdigos correctamente. Si tienes alguna duda, haz clic en el botn "Quiero Ayuda".

Manual de Paginas HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Manual de Paginas HTML

Caricato da

Copyright:

Formati disponibili

Manual de Paginas HTML (HyperText Markup Language)

Introduccin a Programacion Web

<Cmo incluir textos>