Guia de HMTL

Lenguaje de Programacin II
CAPITULO I
La base para realizar una pgina web con JSP es html,
lean la gua
Estructura bsica de un documento en HTML
El lenguaje html trabaja con etiquetas (tags) que tienen diferentes usos. Por ejemplo
<TITLE> </TITLE> sirve para colocar el nombre de la pgina en el marco superior del
navegador. Las mayora de las etiquetas necesitan cerrarse y modifican la informacin
contenida dentro de ellas. Algunas como <BR> no necesitan cerrarse. Despus se
explicar mejor el significado de stas y otras ms.
Todos los documentos en html deben tener la siguiente estructura:
<HTML>
<HEAD>
<TITLE>Mi pgina</TITLE>
</HEAD>
<BODY>
Aqu va todo el contenido del programa.
</BODY>
</HTML>
Este formato debe seguirse siempre como una regla. El uso de las dems etiquetas y el
contenido del programa ir dentro de la etiqueta <BODY> </BODY>. El ttulo va a ser
el nombre que le quieras dar a tu pgina.
Texto
A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la
manipulacin de texto en html est un tanto limitada y es necesario utilizar ciertas
etiquetas para modificar el texto a nuestro gusto. Enseguida se muestran algunas de las
etiquetas ms populares en el manej o de texto.
<PRE> </PRE>
Permite que el texto que se encuentre dentro de ella se visualice tal como se cre en la
pgina origen, respetando espaciado, salto de lnea, salto de prrafo, tabulacin, etc.
<BR>
Realiza un salto de lnea. Esta etiqueta no nec esita cerrarse.
<P>
Realiza un salto de prrafo. Tampoco necesita cerrarse.
Prof. Ing. Alberto Moreno C.
<CENTER> </CENTER>
Posiciona el texto seleccionado en el centro de la pgina. Tambin puede aplicarse a
grficos.
<Hx> </Hx>
Se utiliza para resaltar encabezados. La x son nmer os que van del 1 al 6, siendo el 1 el
encabezado ms grande y resaltado, el 2 un poco menos y as sucesivamente.
Ejem:
<H1>Encabezado</H1>
<H2>Encabezado</H2>
<H3>Encabezado</H3>
<H4>Encabezado</H4>
<FONT SIZE=x> </FONT>
Sirve para cambiar el tamao de las letras. La x es un nmero que indica el tamao de la
letra y va del 1 al 7. El nmero predeterminado es el 3.
Texto en <B>Negritas</B>
Texto en <I>Itlica</I>
Texto <U>subrayado</U>
<HR>
Se utiliza como lnea separadora. Tiene algunos atributos que la modifican. WIDTH
indica la longitud, SIZE indica la altura, ALIGN la colocacin de la lnea y NOSHADE
que no tenga relieve y adems le aade un color gris ms fuerte.
Ejem:
<HR>
<HR WIDTH=20% ALIGN=RIGHT SIZE=7>

<HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE>
Color
Con el fin de hacer un documento ms agradable y atractivo a la vista, es necesario en
algunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar al fondo, a un
enlace, al texto, a una palabra o a una letra.
Para poder representar un color en html, se deben utilizar 6 nmeros hexadecimales.

Ejem:
ROJO
VERDE
AZUL
MAGENTA
VIOLETA
ROSA CLARO
FF0000
00FF00
0000FF
FF00FF
9900DD
FFDDFF
Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer es

jugar con las combinaciones hasta que encuentres la que te gusta. Tomando los colores
bsicos de la tabla anterior puedes variar los nmeros (0 -9) o las letras (A-F) y ver cmo
cambian las tonalidades.
Html tambin acepta los nombres de los colores en lugar de los nmeros hexadecimales,
por ejemplo "RED" en lugar de "FF0000", o "BLUE" en lugar de "0000FF", pero tiene
la limitante de que solamente reconoce unos cuantos color es.
Se pueden seleccionar los colores deseados desde el inicio del documento en la etiqueta
<BODY> </BODY> por ejemplo:
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF">
donde:
BGCOLOR es el color del fondo.
TEXT es el color del texto.
LINK es el color del enlace.
Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo "#".
Tambin se puede cambiar el color slo para un segmento deseado como:

<FONT COLOR="#FF0000"> Texto</FONT>
Imgenes
Para agregar una imagen en un documento se utiliza la etiqueta <IMG>.
Ejem:
<IMG SRC="home2.jpg" ALT="Casa azul" Width=100 Height=120>
Donde:
IMG indica el deseo de cargar una imagen.
SRC indica la ruta en la que se encuentra nuestro grfico. Este puede estar en el mismo
directorio de nuestra pgina, en otro directorio, o incluso en un servidor en algn lugar
del mundo.
Ejem:
<IMG SRC="../web/imagen/home2.jpg" ALT="Casa azul">
ALT asigna un nombre a la imagen para que cuando alguien cargue nuestra pgina
desde un navegador que no despliegue gr ficos, pueda saber que en ese lugar existe una
imagen.
Existen una serie de atributos que modifican las imgenes de diferente forma, aqu estn
algunos:
ALIGN=left|right|top|middle|bottom
Las opciones para ALIGN sitan al grfico en diferentes posiciones con respecto al
texto.
BORDER=n
Le agrega un borde a la imagen y "n" indica el grosor.
WIDTH=n, HEIGHT=n
Enlaces (Links)
El enlace por definicin aparece en nuestras pginas subrayado y de color azul. Como
ya se vi anteriormente, el color del enlace puede cambiarse al gusto.
La etiqueta encargada de establecer un enlace es:
<A> </A>.
Dentro de esta etiqueta est la funcin HREF en la cual se debe indicar la direccin
donde est la informacin a enlazar y tambin el tipo de protocolo* utilizado. Con
HREF es posible tambin hacer enlaces directos hacia imgenes, sonidos, etc.
*El protocolo son las normas o reglas utilizadas para diferentes tipos de servicios como documentos
hipertexto, transferencia de archivos, correo electrnico, etc. Ejem: HTTP, FTP, MAIL TO, GOPHER,
etc.
Ejem:
<A HREF="http://www.usatoday.com"> Peridico USA Today</A>
Peridico USA Today
Dale un click al enlace creado y despus pulsa "Back" o "Atrs" para regresar.
Este ejemplo muestra un link hacia otra pgina fuera de la nuestra en otro servidor.
Ejem:
<A HREF="index.html">Pgina principal>/A>
Tambin es posible crear un enlace a travs de una imagen en lugar de utilizar un

segmento de texto. Esto se hace de la m isma manera que los ejemplos anteriores, slo
que en lugar de escribir texto entre las etiquetas se inserta una imagen como las que ya
hemos visto.
Ejem:
<A HREF="http://www.goto.com"><IMG SRC="logo.gif"></A>
FORMULARIOS (FORM).
Los formularios son plantillas que permiten la creacin de documentos HTML con
peticiones de datos. La principal utilidad de los formularios es la posibilidad de crear
cuestionarios, encuestas, pginas de comentarios o cualquier documento en la que se
desee una interaccin por parte del usuario.
Existe una instruccin HTML para la creacin de formularios esta es FORM, que
tiene la siguiente estructura:
< FORM ACTION="fichero que trata el formulario" METHOD= POST | GET >
...
Elementos que forman el formulario
...
< /FORM>
ACTION:
Indica el programa que se encargar de tratar los datos del formulario. Este programa
debe encontrarse en el servidor y estar escrito en algn lenguaje de programacin. A
este programa se pasar como parmetros los datos introd ucidos en el formulario y
retornar un cdigo HTML
METHOD:
Indica el protocolo usado para el envo de los datos. Con POST enva los datos en la
entrada estndar del programa que trata el formulario y con GET los datos se pasan por
parmetro, en la lnea de comandos, al programa
<INPUT> Entrada bsica de datos

La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de
entrada de datos. Por lo general sern entradas de texto corto (a lo sumo una frase) o
opciones. El formato bsico es el siguiente:
< INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN |
SUBMIT | IMAGE | RESET ) NAME = "Variable que toma el valor " VALUE =
"Valor de Inicializacin" >
El atributo TYPE se usa para determinar el tipo de r ecuadro de dialogo de entrada
que se est definiendo, a continuacin se explicarn por separado cada una de las
opciones. El atributo NAME especifica el nombre de la variable que se define. Este
nombre ser pasado al programa que trata el formulario junto con el valor que le asigno
el usuario del formulario. El atributo VALUE suele especificar el valor de
inicializacin, que ser el valor por defecto.
TEXT
Se mostrar un recuadro que ocupa una lnea y la que ser posible especificar este
texto. El formato de la instruccin es el siguiente:
< INPUT TYPE=TEXT NAME=" variable" VALUE="valor inicial"

SIZE="tamao" MAXLENGTH="longitud mxima" >
Ejemplos
Inst.
HTML
Nombre: <INPUT TYPE=TEXT NAME=variable>
Resul
tado
Nombre:
Explica
cin
Ser una introduccin de texto bsica.
Inst.
HTML
Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicializacin">
Resul
tado
Nombre:
Texto de In
Explica
cin
En este caso introduciremos un texto de inicializacin que ser el texto por defecto y es
editable por el usuario.
Inst.
HTML
Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicializacin" SIZE=50

MAXLENGHT=55>
Resul
tado
Nombre:
Explica
cin
Texto de Inicializacin
Ahora definimos con SIZE un mayor tamao del recuadro y con MAXLENGHT definimos el
nmero mximo de caracteres que se pueden introducir.
<INPUT TYPE=PASSWORD...> Palabras secretas

Es similar al anterior pero en este caso no se imprimen los caracteres segn se van
introduciendo, se muestra un asterisco en vez de los caracteres. Solo se puede ver el
nmero de caracteres, pero no valor. Se usa para la introduccin de claves de acceso
(passwords) y datos que no deban ser vistos al introducirlos. El formato es:
< INPUT TYPE=PASSWORD NAME=" variable" VALUE="valor inicial"
SIZE="tamao" MAXLENGTH="li>longitud mxima" >
Ejemplo
Inst.
HTML
Password: <INPUT TYPE=PASSWORD NAME=variable VALUE="password">
Resul
tado
Explica
cin
Password:
El texto introducido no puede ser visto, pero si es posible saber el nmero de caracteres que
se introducen.
<INPUT TYPE=CHECKBOX> Botones de seleccin

El checkbox es un botn que puede presentar dos estados activado o desactivado. El
formato es el siguiente:
< INPUT TYPE=CHECKBOX NAME=" variable" CHECKED>
Se requiere el atributo NAME. Los valores que tomar la variable sern on off,
dependiendo de su estado. Si el botn estaba activado cuando se envan los datos del
formulario se enviaran el nombre de la variable y el valor que indique su estado. Si se
incluye el atributo CHECKED el botn se encontrar activado en la inicializacin.
Si se indica el atributo VALUE,cuando se envian los datos con el botn activado se
mandar la variable con el valor indicado y en caso contrario no se mandar ningn
valor.
Ejemplo
Inst.
HTML
Resul
tado
Explica
cin
Inst.
HTML
Resul
tado
Explica
cin
<INPUT TYPE=CHECKBOX NAME= variable> Opcin
Opcin
En este caso esta desactivado por defecto y su utilizar en caso de los valores on y off para
definir su estado.
<INPUT TYPE=CHECKBOX NAME= variable CHECKED> Opcin
Opcin
Ahora se especifica CHECKED para indicar que por defecto debe estar activado.
<INPUT TYPE=RADIO...> Seleccin entre mltiples opciones
Se usa
cuando la opcin puede tomar un valor simple de una serie de alternativas. En este caso
se presentan unos valores opcionales de los que solo puede tomar un valor. Para
especificar cada uno de estos valores se incluir una etiq ueta RADIO por cada una de
las posibles alternativas, su estructura general ser:
< INPUT TYPE=RADIO NAME=" variable" VALUE="valor 1" CHECKED >
< INPUT TYPE=RADIO NAME=" variable" VALUE="valor 2" >
...
< INPUT TYPE=RADIO NAME=" variable" VALUE="valor n" >
Cada una de las etiquetas RADIO tendr el mismos atributo NAME, y con un distinto
atributo VALUE que ser el valor que tome si se selecciona esta opcin. Para
inicializarlo se usa el atributo CHECKED que se indicar solo en la opcin que se
quiera especificar por defecto.
Ejemplo
Inst.
HTML
<INPUT TYPE=RADIO NAME= variable VALUE=opcion1 >Opcin 1<BR>

<INPUT TYPE=RADIO NAME= variable VALUE=opcion2 CHECKED>Opcin 2<BR>
Opcin 1
Resul
tado
Opcin 2
Opcin 3
Opcin 4
Explica
cin
En este caso solo es posible seleccionar uno de los posibles valores, la opcin CHECKED indica
cual es la opcin activa por defecto.
<INPUT TYPE=HIDDEN...> Parmetros ocultos
En este caso no se
muestra ningn campo para la entrada de datos al usuario , pero el par variable valor
especificado es enviado junto con el formulario. Se suele usar para transmitir
informacin de estado control para enviar algn tipo de informacin que no debe ser
variada en el formulario, pero s debe ser enviada junto a e ste. El formato es:
< INPUT TYPE=HIDDEN NAME=" variable" VALUE="valor" >
Deber incluir tanto la variable como el valor.
<INPUT TYPE=SUBMIT...> Enviar Datos

Este botn se usa para enviar los datos del formulario, al pulsar el usuario este botn,
se acaba la introduccin del formulario y pasa el control al programa indicado en
ACTION. En todo formulario debe existir al menos un botn de SUBMIT, si solo
incluye un recuadro del tipo TEXT no ser necesario incluirlo. El formato es:
< INPUT TYPE=SUBMIT VALUE=" mensaje a mostrar" >
El atributo VALUE especifica una etiqueta no editable que se mostrar en el botn
de envo. Lo normal es que este botn no enve datos, pero si se indica el atributo
NAME con un nombre de variable ser enviada la variable con el valor de VALUE.
Esto puede ser til si se incluyen distintos botones de SUBMIT para distinguir cual fue
pulsado.
Ejemplo
Inst.
HTML
Resul
tado
Explica
cin
< INPUT TYPE=SUBMIT VALUE="Enviar Datos" >

Enviar Datos
El texto indicado en VALUE es el que etiqueta el botn, al pulsar sobre l se enviarn los datos
del formulario
<INPUT TYPE=IMAGE...> Botn de Envo grfico

Su funcionalidad es similar al botn de SUBMIT, se usa igualmente para enviar los
datos de un formulario, pero en este caso se presenta una imagen como botn.
Igualmente al pulsar sobre el botn se enviar el formulario. El formato es el siguiente:
< INPUT TYPE=IMAGE NAME=" variable" SRC="URL de la Imagen" >
El punto de la imagen en el que pulsa el usuario tambin es pasado al programa
interprete del formulario, de forma que la imagen igualmente podra ser un mapa
sensible. Se pasarn dos parmetros x e y con las coordenadas del punto donde pulso,
siendo el programa interprete el encargado de determinar la zona donde se puls, si se
desea.
Ejemplo
Inst.
HTML
<INPUT TYPE=IMAGE SRC="boton.gif">
Resul
tado
Explica
cin
Se muestra la imagen como botn de envo, sustituyendo al botn de SUBMIT.
<INPUT TYPE=RESET...> Borrar los datos
Este botn se usa para volver a

los valores por defecto todos los elementos del formulario, borrando todos los datos
introducidos por el usuario. Su formato es el siguiente:
< INPUT TYPE=RESET VALUE=" Etiqueta a mostrar" >
El atributo VALUE especifica la etiqueta que tendr el botn.
<TEXTAREA> Texto en mltiples lneas
Permite la introduccin de un texto que puede abarcar varias lneas, introduciendo

este en forma de prrafo. El formato general ser:
<TEXTAREA NAME="variable" ROWS=Filas COLS=Columnas>
Texto de Inicializaci& oacute;n que puede
incluir varias líneas.
</TEXTAREA>
En este caso se presenta una ventana del tamao especificado con los atributos
ROWS, filas, y COLS, columnas. El texto expresado entre la etiqueta de inicio y de
final sirve para indicar que texto aparecer ini cialmente en la ventana, en este texto se
podrn incluir las marcas del lenguaje HTML, pero solo se tendrn en cuenta para
incluir acentos y otro tipo de efectos. Los atributos ROWS y COLS determinan el
tamao de la ventana visible, el texto se podr extender ms all de estos limites.
Ejemplo
Inst.
HTML
<TEXTAREA NAME=variable ROWS=10 COLS=54>

Texto de Inicialización que puede
incluir varias líneas.
</TEXTAREA>
Texto de Inicializacin que puede
incluir varias lneas.
Resul
tado
Explica
cin
Se puede especificar el tamao de la ventana para introducir datos e indicar un texto de

inicializacin, aunque este ser opcional.
<SELECT> Eleccin entre mltiples opciones
Se usa para mens simple o

mltiples. Define mens de tipo pop -up (men de barras) y ofrece una alternativa ms
compacta al uso de botones RADIO o CHECKBOX. Su formato es el siguiente:
<SELECT NAME="variable">
< OPTION SELECTED VALUE= valor1> Opcin Primera
< OPTION VALUE=valor2> Opcin Segunda
...
< OPTION VALUE=valorn> Opcin Ensima
</SELECT>
Si se desea que sea un men mltiple se deber incluir el atributo MULTIPLE en la
etiqueta de SELECT, en este caso se mostrarn todas las opciones en forma de tabla, en
el otro caso se mostrar la opcin activa y un botn para poder modificar esta opcin.
En ambos casos solo podr seleccionarse una de las opciones. Cuando se enva el
resultado del formulario la variables NAME tomar el valor de la opcin que este
activa.
La etiqueta OPTION que contenga el atributo SELECTED ser considerada la
opcin por defecto, caso de no especificarse ninguna se considerar la primera de las
opciones.
Ejemplos
Inst.
HTML
Resul
tado
<SELECT NAME="variable">
<OPTION VALUE=1> Opcin Primera
<OPTION SELECTED VALUE=2> Opcin Segunda
<OPTION VALUE=3> Opcin Tercera
</SELECT>
Opcin Segunda
Explica
cin
Se muestra la opcin activa que puede ser cambiada, por defecto esta activada la segunda
opcin.
Inst.
HTML
<SELECT NAME="variable" MULTIPLE>

<OPTION VALUE=1> Opcin Primera
<OPTION SELECTED VALUE=2> Opcin Segunda
<OPTION VALUE=3> Opcin Tercera
</SELECT>
Resul
tado
Explica
cin
Opcin Primera
En este caso al ser mltiple se muestran todas las opciones posibles, de las que solo es posible
seleccionar una.

Guia de HMTL

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Guia de HMTL

Загружено:

Авторское право:

Доступные форматы

Lenguaje de Programacin II

Prof. Ing. Alberto Moreno C.

<HR WIDTH=20% ALIGN=RIGHT SIZE=7>

Prof. Ing. Alberto Moreno C.

Para poder representar un color en html, se deben utilizar 6 nmeros hexadecimales.

Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer es

Tambin se puede cambiar el color slo para un segmento deseado como:

Prof. Ing. Alberto Moreno C.

Tambin es posible crear un enlace a travs de una imagen en lugar de utilizar un

Prof. Ing. Alberto Moreno C.

<INPUT> Entrada bsica de datos

Prof. Ing. Alberto Moreno C.

< INPUT TYPE=TEXT NAME=" variable" VALUE="valor inicial"

Nombre: <INPUT TYPE=TEXT NAME=variable>

Ser una introduccin de texto bsica.

Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicializacin">

Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicializacin" SIZE=50

<INPUT TYPE=PASSWORD...> Palabras secretas

Password: <INPUT TYPE=PASSWORD NAME=variable VALUE="password">

Prof. Ing. Alberto Moreno C.

<INPUT TYPE=CHECKBOX> Botones de seleccin

<INPUT TYPE=CHECKBOX NAME= variable> Opcin

<INPUT TYPE=CHECKBOX NAME= variable CHECKED> Opcin

<INPUT TYPE=RADIO...> Seleccin entre mltiples opciones

<INPUT TYPE=RADIO NAME= variable VALUE=opcion1 >Opcin 1<BR>

<INPUT TYPE=HIDDEN...> Parmetros ocultos

<INPUT TYPE=SUBMIT...> Enviar Datos

Prof. Ing. Alberto Moreno C.

< INPUT TYPE=SUBMIT VALUE="Enviar Datos" >

<INPUT TYPE=IMAGE...> Botn de Envo grfico

<INPUT TYPE=IMAGE SRC="boton.gif">

Se muestra la imagen como botn de envo, sustituyendo al botn de SUBMIT.

<INPUT TYPE=RESET...> Borrar los datos

Este botn se usa para volver a

<TEXTAREA> Texto en mltiples lneas

Prof. Ing. Alberto Moreno C.

Permite la introduccin de un texto que puede abarcar varias lneas, introduciendo

<TEXTAREA NAME=variable ROWS=10 COLS=54>

Se puede especificar el tamao de la ventana para introducir datos e indicar un texto de

<SELECT> Eleccin entre mltiples opciones

Se usa para mens simple o

Prof. Ing. Alberto Moreno C.

<SELECT NAME="variable" MULTIPLE>

Prof. Ing. Alberto Moreno C.

Вам также может понравиться