Guia de Hmtl

Lenguaje de Programacin II

Prof. Ing. Alberto Moreno C.

CAPITULO I

La base para realizar una pgina web con JSP es html,lean la gua

Estructura bsica de un documento en HTMLEl lenguaje html trabaja con etiquetas (tags) que tienen diferentes usos. Por ejemplo sirve para colocar el nombre de la pgina en el marco superior delnavegador. Las mayora de las etiquetas necesitan cerrarse y modifican la informacincontenida dentro de ellas. Algunas como no necesitan cerrarse. Despus seexplicar mejor el significado de stas y otras ms.

Todos los documentos en html deben tener la siguiente estructura:

Mi pgina

Aqu va todo el contenido del programa.

Este formato debe seguirse siempre como una regla. El uso de las dems etiquetas y elcontenido del programa ir dentro de la etiqueta . El ttulo va a serel nombre que le quieras dar a tu pgina.

TextoA diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), lamanipulacin de texto en html est un tanto limitada y es necesario utilizar ciertasetiquetas para modificar el texto a nuestro gusto. Enseguida se muestran algunas de lasetiquetas ms populares en el manej o de texto.

Permite que el texto que se encuentre dentro de ella se visualice tal como se cre en lapgina origen, respetando espaciado, salto de lnea, salto de prrafo, tabulacin, etc.

Realiza un salto de lnea. Esta etiqueta no nec esita cerrarse.

Realiza un salto de prrafo. Tampoco necesita cerrarse.



Posiciona el texto seleccionado en el centro de la pgina. Tambin puede aplicarse agrficos.

Se utiliza para resaltar encabezados. La x son nmer os que van del 1 al 6, siendo el 1 elencabezado ms grande y resaltado, el 2 un poco menos y as sucesivamente.Ejem:

EncabezadoEncabezadoEncabezado

Encabezado

Sirve para cambiar el tamao de las letras. La x es un nmero que indica el tamao de laletra y va del 1 al 7. El nmero predeterminado es el 3.

Texto en Negritas

Texto en Itlica

Texto subrayado

Se utiliza como lnea separadora. Tiene algunos atributos que la modifican. WIDTHindica la longitud, SIZE indica la altura, ALIGN la colocacin de la lnea y NOSHADEque no tenga relieve y adems le aade un color gris ms fuerte.Ejem:

ColorCon el fin de hacer un documento ms agradable y atractivo a la vista, es necesario enalgunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar al fondo, a unenlace, al texto, a una palabra o a una letra.



Para poder representar un color en html, se deben utilizar 6 nmeros hexadecimales.Ejem:ROJO FF0000VERDE 00FF00AZUL 0000FFMAGENTA FF00FFVIOLETA 9900DDROSA CLARO FFDDFFAunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer esjugar con las combinaciones hasta que encuentres la que te gusta. Tomando los coloresbsicos de la tabla anterior puedes variar los nmeros (0 -9) o las letras (A-F) y ver cmocambian 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 tienela limitante de que solamente reconoce unos cuantos color es.

Se pueden seleccionar los colores deseados desde el inicio del documento en la etiqueta por ejemplo:

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:Texto

ImgenesPara agregar una imagen en un documento se utiliza la etiqueta .Ejem:

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 mismodirectorio de nuestra pgina, en otro directorio, o incluso en un servidor en algn lugardel mundo.Ejem:

ALT asigna un nombre a la imagen para que cuando alguien cargue nuestra pginadesde un navegador que no despliegue gr ficos, pueda saber que en ese lugar existe unaimagen.



Existen una serie de atributos que modifican las imgenes de diferente forma, aqu estnalgunos:ALIGN=left|right|top|middle|bottomLas opciones para ALIGN sitan al grfico en diferentes posiciones con respecto altexto.BORDER=nLe agrega un borde a la imagen y "n" indica el grosor.WIDTH=n, HEIGHT=nEnlaces (Links)El enlace por definicin aparece en nuestras pginas subrayado y de color azul. Comoya se vi anteriormente, el color del enlace puede cambiarse al gusto.

La etiqueta encargada de establecer un enlace es: .Dentro de esta etiqueta est la funcin HREF en la cual se debe indicar la direccindonde est la informacin a enlazar y tambin el tipo de protocolo* utilizado. ConHREF es posible tambin hacer enlaces directos hacia imgenes, sonidos, etc.*El protocolo son las normas o reglas utilizadas para diferentes tipos de servicios como documentoshipertexto, transferencia de archivos, correo electrnico, etc. Ejem: HTTP, FTP, MAIL TO, GOPHER,etc.

Ejem: Peridico USA TodayPeridico USA TodayDale 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:Pgina principal>/A>

Tambin es posible crear un enlace a travs de una imagen en lugar de utilizar unsegmento de texto. Esto se hace de la m isma manera que los ejemplos anteriores, sloque en lugar de escribir texto entre las etiquetas se inserta una imagen como las que yahemos visto.

Ejem:



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 crearcuestionarios, encuestas, pginas de comentarios o cualquier documento en la que sedesee una interaccin por parte del usuario.

Existe una instruccin HTML para la creacin de formularios esta es FORM, quetiene 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 programadebe encontrarse en el servidor y estar escrito en algn lenguaje de programacin. Aeste programa se pasar como parmetros los datos introd ucidos en el formulario yretornar un cdigo HTML

METHOD:

Indica el protocolo usado para el envo de los datos. Con POST enva los datos en laentrada estndar del programa que trata el formulario y con GET los datos se pasan porparmetro, en la lnea de comandos, al programa

Entrada bsica de datosLa 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) oopciones. 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 entradaque se est definiendo, a continuacin se explicarn por separado cada una de lasopciones. El atributo NAME especifica el nombre de la variable que se define. Estenombre ser pasado al programa que trata el formulario junto con el valor que le asignoel usuario del formulario. El atributo VALUE suele especificar el valor deinicializacin, que ser el valor por defecto.

TEXT

Se mostrar un recuadro que ocupa una lnea y la que ser posible especificar estetexto. El formato de la instruccin es el siguiente:



< INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial"SIZE="tamao" MAXLENGTH="longitud mxima" >

EjemplosInst.HTML Nombre:

Resultado Nombre:

Explicacin Ser una introduccin de texto bsica.

Inst.HTML Nombre:

Resultado Nombre:

Texto de In

Explicacin

En este caso introduciremos un texto de inicializacin que ser el texto por defecto y eseditable por el usuario.

Inst.HTML

Nombre:

Resultado Nombre:

Texto de Inicializacin

Explicacin

Ahora definimos con SIZE un mayor tamao del recuadro y con MAXLENGHT definimos elnmero mximo de caracteres que se pueden introducir.

Palabras secretas

Es similar al anterior pero en este caso no se imprimen los caracteres segn se vanintroduciendo, se muestra un asterisco en vez de los caracteres. Solo se puede ver elnmero 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" >

EjemploInst.HTML Password:



Resultado Password:

Explicacin

El texto introducido no puede ser visto, pero si es posible saber el nmero de caracteres quese introducen.

Botones de seleccinEl 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 delformulario se enviaran el nombre de la variable y el valor que indique su estado. Si seincluye 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 semandar la variable con el valor indicado y en caso contrario no se mandar ningnvalor.

EjemploInst.HTML Opcin

Resultado Opcin

Explicacin

En este caso esta desactivado por defecto y su utilizar en caso de los valores on y off paradefinir su estado.

Inst.HTML Opcin

Resultado Opcin

Explicacin Ahora se especifica CHECKED para indicar que por defecto debe estar activado.

Seleccin entre mltiples opciones Se usacuando la opcin puede tomar un valor simple de una serie de alternativas. En este casose presentan unos valores opcionales de los que solo puede tomar un valor. Paraespecificar cada uno de estos valores se incluir una etiq ueta RADIO por cada una delas 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 distintoatributo VALUE que ser el valor que tome si se selecciona esta opcin. Parainicializarlo se usa el atributo CHECKED que se indicar solo en la opcin que sequiera especificar por defecto.

Ejemplo

Inst.HTML

Opcin 1Opcin 2Opcin 3Opcin 4

Resultado

Opcin 1Opcin 2Opcin 3Opcin 4

Explicacin

En este caso solo es posible seleccionar uno de los posibles valores, la opcin CHECKED indicacual es la opcin activa por defecto.

Parmetros ocultos En este caso no semuestra ningn campo para la entrada de datos al usuario , pero el par variable valorespecificado es enviado junto con el formulario. Se suele usar para transmitirinformacin de estado control para enviar algn tipo de informacin que no debe servariada 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.

Enviar DatosEste 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 enACTION. En todo formulario debe existir al menos un botn de SUBMIT, si soloincluye un recuadro del t ipo 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 botnde envo. Lo normal es que este botn no enve datos, pero si se indica el atributoNAME 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 fuepulsado.



EjemploInst.HTML < INPUT TYPE=SUBMIT VALUE="Enviar Datos" >

Resultado

Enviar Datos

Explicacin

El texto indicado en VALUE es el que etiqueta el botn, al pulsar sobre l se enviarn los datosdel formulario

Botn de Envo grfico

Su funcionalidad es similar al botn de SUBMIT, se usa igualmente para enviar losdatos 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 programainterprete del formulario, de forma que la imagen igualmente podra ser un mapasensible. 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 sedesea.

EjemploInst.HTML

Resultado

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

Borrar los datos Este botn se usa para volver alos valores por defecto todos los elementos del formulario, borrando todos los datosintroducidos 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.

Texto en mltiples lneas



Permite la introduccin de un texto que puede abarcar varias lneas, introduciendoeste en forma de prrafo. El formato general ser:

Texto de Inicializaci& oacute;n que puedeincluir varias lneas.

En este caso se presenta una ventana del tamao especificado con los atributosROWS, filas, y COLS, columnas. El texto expresado entre la etiqueta de inicio y definal sirve para indicar que texto aparecer ini cialmente en la ventana, en este texto sepodrn incluir las marcas del lenguaje HTML, pero solo se tendrn en cuenta paraincluir acentos y otro tipo de efectos. Los atributos ROWS y COLS determinan eltamao de la ventana visible, el texto se podr extender ms all de estos limites.

Ejemplo

Inst.HTML

Texto de Inicializacin que puedeincluir varias lneas.

Resultado

Texto de Inicializacin que puede incluir varias lneas.

Explicacin

Se puede especificar el tamao de la ventana para introducir datos e indicar un texto deinicializacin, aunque este ser opcional.

Eleccin entre mltiples opciones Se usa para mens simple omltiples. Define mens de tipo pop -up (men de barras) y ofrece una alternativa mscompacta al uso de botones RADIO o CHECKBOX. Su formato es el siguiente:

< OPTION SELECTED VALUE= valor1> Opcin Primera< OPTION VALUE=valor2> Opcin Segunda

. . .

< OPTION VALUE=valorn> Opcin Ensima

Si se desea que sea un men mltiple se deber incluir el atributo MULTIPLE en laetiqueta de SELECT, en este caso se mostrarn todas las opciones en forma de tabla, enel 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 elresultado del formulario la variables NAME tomar el valor de la opcin que esteactiva.

La etiqueta OPTION que contenga el atributo SELECTED ser considerada laopcin por defecto, caso de no especificarse ninguna se considerar la primera de lasopciones.

Ejemplos

Inst.HTML

Opcin Primera Opcin Segunda Opcin Tercera

Resultado

Opcin Segunda

Explicacin

Se muestra la opcin activa que puede ser cambiada, por defecto esta activada la segundaopcin.

Inst.HTML

Opcin Primera Opcin Segunda Opcin Tercera

Resultado

Opcin Primera

Explicacin

En este caso al ser mltiple se muestran todas las opciones posibles, de las que solo es posibleseleccionar una.

Guia de Hmtl

Documents

Transcript of Guia de Hmtl