HTML curso

PPáággiinnaass WWeebb

HTML

CSS

JAVASCRIPT

Ingº Roger E. Alarcón García

2013

PPáággiinnaass WWeebb

LENGUAJE HTML ............................................................................................................... 3

INTRODUCCIÓN .............................................................................................................. 3

¿QUE ES HMTL? .............................................................................................................. 3

ESTRUCTURA DE UNA PAGINA HTML...................................................................... 4

¿CÓMO SE UTILIZAN LOS COLORES EN HTML? ..................................................... 6

TRABAJANDO CON TEXTO .......................................................................................... 7

ENCABEZADOS ........................................................................................................... 7

FORMATO DEL TEXTO .............................................................................................. 7

ETIQUETA FONT Y SUS PARÁMETROS ................................................................. 8

CARACTERES ESPECIALES ...................................................................................... 8

CARACTERES DE CONTROL .................................................................................... 9

FORMATEO DE PARRAFOS .................................................................................... 10

ETIQUETA BARRA HORIZONTAL ......................................................................... 11

ENLACES Y ANCLAS ................................................................................................... 11

ANCLAS DE REFERENCIA. ..................................................................................... 12

ANCLAS NOMINALES .............................................................................................. 12

OBJETOS MULTIMEDIA .............................................................................................. 13

MANIPULACIÓN DE IMÁGENES ........................................................................... 13

MANIPULACIÓN DE AUDIO ................................................................................... 14

MANIPULACIÓN DE VIDEO.................................................................................... 15

MANIPULACIÓN DE TEXTO EN MOVIMIENTO ................................................. 16

MANIPULACION DE TABLAS .................................................................................... 17

MANIPULACION DE FRAMES(MARCOS) ................................................................ 23

MANIPULACION DE FORMULARIOS ....................................................................... 27

ESTRUCTURA DE UN FORMULARIO ................................................................... 27

OBJETOS DENTRO DEL FORMULARIO. ............................................................... 28

Lenguaje HTML

Tópicos Internet

LLEENNGGUUAAJJEE HHTTMMLL

IINNTTRROODDUUCCCCIIÓÓNN

El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi

infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea

posible encontrar lo que se busca. La unidad básica donde está almacenada esta

información son las páginas Web. Estas páginas se caracterizan por contener texto,

imágenes, animaciones... e incluso sonido y video.

Una de las características más importantes de las páginas Web es que son hipertexto. Esto

quiere decir que las páginas no son elementos aislados, sino que están unidas a otras

mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de Internet

puede pulsar sobre un texto de una página para navegar hasta otra página. Será cuestión del

programador de la página inicial decidir que palabras o frases serán las utilizadas para

enlazarse y a donde nos conducirá pulsar sobre ellas.

En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto

sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orígenes el

WWW constaba únicamente de texto en la actualidad es un sistema principalmente gráfico

y se puede hacer que las enlaces sean, no sólo texto, sino imágenes, videos, Botones,... en

definitiva cualquier elemento de una página.

¿¿QQUUEE EESS HHMMTTLL??

HTML es el acrónimo de HyperText Markup Language, esto quiere decir un Lenguaje de

Marcado de HiperTexto basado en etiquetas, el cual contiene enlaces que nos permiten

navegar entre los diferentes documentos y recursos web de nuestro u hacia otros servidores.

Los navegadores WWW leen estos archivos de texto e interpretan estas etiquetas para

determinar como desplegar la página Web.

Para utilizar etiquetas en HTML se deben encierran entre < y >, su estructura en la página

web es:

<NOMBRE_ETIQUETA>

o bien estas otras:

<NOMBRE_ETIQUETA> TEXTO </NOMBRE_ETIQUETA>

<NOMBRE_ETIQUETA atributo1=”valor1” atributo2=”valor2” .........> TEXTO

</NOMBRE_ETIQUETA>

La primera está formada por una sola instrucción, es decir, una sola etiqueta de apertura, en

cambio la segunda y tercera presentan una etiqueta de apertura y otra de cierre, todo el

texto escrito entre ambas es afectado por la etiqueta definida. La tercera aún especifica ciertos atributos que se pueden manipular de la etiqueta como se

verá posteriormente, se tendría que agregar el nombre del atributo, el signo igual y su valor

correspondiente, y pueden ser varios atributos los que se especifiquen en una etiqueta.

Lenguaje HTML

Tópicos Internet

EESSTTRRUUCCTTUURRAA DDEE UUNNAA PPAAGGIINNAA HHTTMMLL

Básicamente consta de cuatro pares de etiquetas:

<HTML>

<HEAD>

<TITLE>Nuestra primera página</TITLE>

</HEAD>

<BODY>

..........................

..........................

..........................

</BODY>

</HTML>

Lo que visualizará nuestra página

<HTML> <HEAD>

<TITLE>

<BODY>

</TITLE> </HEAD>

</BODY>

</HTML>

Lenguaje HTML

Tópicos Internet

Ejemplo 1:

<HTML>

<HEAD>

<TITLE>UNPRG – Universidad Nacional Pedro Ruiz Gallo</TITLE>

</HEAD>

<BODY>

Agregar imágenes, fondo y el menú de opciones.

</BODY>

</HTML>

Nota: Almacenar esta información con el nombre de ejemplo1.html o ejemplo1.htm

Etiqueta HTML

Esta etiqueta <HTML> y </HTML> especifican el inicio y el fin del documento web,

dentro de estas se incluyen todas las demás etiquetas necesarias para mostrar la información

que se requiera en la página.

Etiqueta HEAD

La etiqueta <HEAD> y </HEAD> especifican la cabecera de la página web, en la que se

incluye la etiqueta <TITLE> y </TITLE> para especificar el título de la página, pero

también se puede especificar otras etiquetas como por ejemplo <META> que permite

especificar palabras claves, fechas, autor, descripción, etc, que sirven para los buscadores.

Etiqueta BODY

La etiqueta <BODY> y </BODY> especifican el contenido de la página, el texto,

imágenes, y el formato visible al usuario se debe encontrar entre estas etiquetas.

Atributos de la etiqueta BODY

BGCOLOR=”#rrggbb” define el color del fondo de la página.

TEXT =”#rrggbb” define el color del texto de la página.

LINK=”#rrggbb” especifica el color de los enlaces o vínculos.

VLINK=”#rrggbb” especifica el color de los enlaces visitados.

ALINK=”#rrggbb” especifica el color de los enlaces al activarse.

BACKGROUND=”ruta\archivografico” especifica la imagen que será desplegado como

fondo.

BGSOUND=”ruta\archivosonido” especifica el archivo de audio que se escuchará en la

página.

BGPROPERTIES define el movimiento vertical del fondo.

Ejemplo 2:

<HTML>

<HEAD>

<TITLE>Atributos de Body</TITLE>

</HEAD>

Lenguaje HTML

Tópicos Internet

<BODY BGCOLOR=#00FFFF TEXT=#FF00FF LINK=#ff0000 VLINK=#00FF00

ALINK=#0000FF>

Este es un enlace <a href=”www.universia.edu.pe”>Pulsa aquí</a><br>

OTRO enlace <a href="http://www.usat.edu.pe">Pulsa aquí</a>

<BODY>

<HTML>

Esta página utiliza los atributos para la etiqueta BODY como son por ejemplo: se define el

color de fondo de la página como cyan (00FFFF), el color del texto como magenta

(FF00FF) y los colores de los enlaces.

¿¿CCÓÓMMOO SSEE UUTTIILLIIZZAANN LLOOSS CCOOLLOORREESS EENN HHTTMMLL??

Se pueden llegar a tener 16 millones de colores en una página web.

Existen dos formas para aplicar colores a una página web:

1. Se especifica el color deseado directamente con el nombre del color en ingles:

Ejemplo: blue, green, yellow.

2. Se especifica el color deseado mediante números hexadecimales mediante la

siguiente estructura:

#RRVVAA en inglés #rrggbb

El color tiene un signo de numeral # antecediendo a los 6 números.

Existen dos números para cada color principal: rojo, verde y azul.

Cada uno de los números varía hexadecimalmente {0,1,2....,9,A,B,...F}.

Ejemplos de Colores:

#RRVVAA Color #RRVVAA Color

#FFFFFF Blanco #000000 Negro

#FF0000 Rojo #00FF00 Verde

#0000FF Azul #FF00FF Magente

#00FFFF Cyan #FFFF00 Amarillo

#70DB93 Agua Marino #000080 Azul Marino

#FF7F00 Coral #A62A2A Café

#C0C0C0 Plomo #4F2F4F Violeta

Utilizando estos datos, haremos una página con fondo celeste y letras negras. Usaremos

para este efecto los atributos bgcolor y text. :

Ejemplo 3:

<HTML>

<HEAD> <TITLE>Curso de Lenguaje HTML</TITLE> </HEAD>

<BODY bgcolor=”#C0D9D9” text=”#000000” >

Bienvenidos al curso de Lenguaje HTML.

</BODY>

</HTML>

Lenguaje HTML

Tópicos Internet

TTRRAABBAAJJAANNDDOO CCOONN TTEEXXTTOO

ENCABEZADOS

Existen 6 diferentes niveles de encabezados:

<H1> </H1> Texto de mayor importancia (mas grande)

<H2> </H2> ....

<H3> </H3> ....

<H4> </H4> ....

<H5> </H5> ....

<H6> </H6> Texto de menor importancia (mas pequeño)

Ejemplo 4:

<HTML>

<HEAD>

<TITLE>Tratamiento de Texto</TITLE>

</HEAD>

<BODY>

<H1>TITULO DE LA PAGINA</H1><br>

<H2>SUBTITULO </H2><br>

<H3>NIVEL 3</H3><br>



<H6>Derechos Reservados</H6>

</BODY>

</HTML>

Esta página nos muestra los diferentes encabezados que se pueden definir en una página

HTML utilizando estas etiquetas.

FORMATO DEL TEXTO

<B> ..... </B> Negrita

<I> ..... </I> Cursiva

<U> …. </U> Subrayar

<S> .…. </S> Tachar

<SUP> … </SUP> Letra en superíndice

<SUB> ... </SUB> Letra en subíndice

<BIG> …. </BIG> Incrementa el tamaño del tipo de letra

<SMALL> … </SMALL> Disminuye el tamaño del tipo de letra

<BLINK> .... </BLINK> El texto parpadea. Solo en Netscape Navigator

Ejemplo 5:

<HTML>

<HEAD>

Lenguaje HTML

Tópicos Internet

<TITLE>Formato del Texto</TITLE>

</HEAD>

<BODY>

<B>TITULO DE LA PAGINA en negrita</B><br>

<I>SUBTITULO en cursiva </I><br>

<U>Texto subrayado</U><br>

<S>texto tachado</S><br>

Ecuaciones : <br>E=mc<SUP>2</SUP><br>

Química : H<SUB>2</SUB>O<br>

<BIG>Texto grande</BIG><br>

<SMALL>Texto pequeño</SMALL><br>

</BODY>

</HTML>

ETIQUETA FONT Y SUS PARÁMETROS

<FONT COLOR=”valor” FACE=”valor” SIZE=”valor”> ….... </FONT>

Manipula una o más características de un carácter o párrafo (obligatoriamente se debe

colocar un parámetro).

COLOR .- Especifica el color del texto que se puede escribir o reflejar en código

hexadecimal.

FACE .- Indica el tipo de fuente (tipo de letra)

SIZE .- Especifica el tamaño de la fuente dado en puntos.

Ejemplo:

<FONT COLOR=”#FF0000” FACE=”arial” SIZE =”2”>

Este texto aparecerá de color Rojo con letra Arial y de tamaño 2. </FONT>

Ejemplo 6:

<HTML>

<HEAD>


</HEAD>

<BODY TEXT="#0000ff">


<FONT COLOR="#FF0000" FACE="arial" SIZE ="2">

Este texto aparecerá de color Rojo con letra Arial y de tamaño 2. </FONT>

</BODY>

</HTML>

NOTA.- Si se desea se pueden especificar varios tipos de letras separadas por comas.

<FONT COLOR="#FF0000" FACE="arial,verdana" SIZE ="2">

CARACTERES ESPECIALES

Lenguaje HTML

Tópicos Internet

Estos caracteres especiales corresponden a los códigos de la tabla ASCII. Para la utilización

de estos caracteres se utiliza la forma siguiente:

&#valor;

el valor corresponde a un número superior a 127.

½ corresponde al (1/2), pero existen sinónimos como por ejemplo ½

Código Resultado

á é í ó ú

Á É Í Ó Ú

á é í ó ú

Á É Í Ó Ú

ñ Ñ ñ Ñ

¿ ¿

¡ ¡

º º

ª ª © ©

® ®

Espacio en blanco

CARACTERES DE CONTROL

Son caracteres especiales que se utilizan en el lenguaje HTML para formar las etiquetas, si

se necesitan se debe usar los siguientes códigos.

Código Resultado

< <

&lg; >

& &

" “

Ejemplo 7:

<HTML>

<HEAD>


</HEAD>



<FONT COLOR="#FF0000" FACE="arial" SIZE ="2">

Este texto aparecerá de color Rojo con letra Arial y de tamaño 2. </FONT><br>

½<br>

½<br>

á é í ó ú<br> Á É Í Ó Ú<br>

ñ Ñ<br>

¿<br>

Lenguaje HTML

Tópicos Internet

¡<br>

º<br>

ª<br>

©<br>

®<br>

CARACTERES ESPECIALES<br>

El signo menor ---- <<br>

El signo mayor ---- ><br>

El asperson ---- &<br>

La comilla ---- "<br>

</BODY>

</HTML>

FORMATEO DE PARRAFOS

<P ALIGN=”valor” > .... </P>

Esta etiqueta permite delimitar un párrafo, permitiendo alinear siendo sus valores: LEFT,

RIGHT, CENTER, JUSTIFY. Insertar una línea en blanco antes del texto, no requiere

etiqueta de cierre ni parámetros.

<CENTER> .... </CENTER>

Permite centrar todo el texto del párrafo.

<PRE WIDTH=”valor”> ….. </PRE>

Esta etiqueta es útil para representar código fuente. El parámetro WIDTH especifica el

número máximo de caracteres en una línea.

<DIV ALIGN=”valor”> ... </DIV>

Permite alinear el texto del párrafo, toma los mismos valores que la etiqueta <P>, pero no

inserta ninguna línea antes de él.

Ejemplo 8:

<HTML>

<HEAD>


</HEAD>


Esto es un párrafo <P align="LEFT">Permite cambiar las características de un conjunto de

líneas escrito en código HTML. Para esto se debe conocer etiquetas y parámetros, los

cuales no siempre son obligatorios, pero que permiten cambiar apariencias.</P>

Este texto esta justificado <P align="JUSTIFY">Permite cambiar las características de un

conjunto de líneas escrito en código HTML. Para esto se debe conocer etiquetas y

parámetros, los cuales no siempre son obligatorios, pero que permiten cambiar

apariencias.</P>

<PRE>El código <B><CENTER>Lenguaje HTML</CENTER></B>muestra el texto en

negrita, al centro y tal como está escrito</PRE>

Lenguaje HTML

Tópicos Internet

<DIV align="Justify">Este texto aparecerá justificado a ambos lados, izquierda y

derecha.</DIV>

<DIV align="RIGHT">Este texto aparecerá justificado a ambos lados, izquierda y derecha.

Este nuevo texto no está separado del anterior por un espacio.</DIV>

</BODY>

</HTML>

ETIQUETA BARRA HORIZONTAL

<HR NOSHADE ALIGN=”valor” WIDTH=”valor” SIZE=”valor”>

Permite insertar una barra horizontal.

NOSHADE especifica una línea sólida.

ALIGN permite alinear la barra tomando los mismos valores que la etiqueta <P>

WIDTH modifica el ancho, puede ser en porcentaje o en píxel.

SIZE especifica el grosor, dado en píxel.

Ejemplo:

- <hr noshade>

- <hr align="right" width=70%>

Ejemplo 9:

<HTML>

<HEAD>

<TITLE>Barras Horizontales </TITLE> </HEAD>

<BODY bgcolor="#C0D9D9" text="#000000">

<hr align=”center” width=50%><br>

<hr align=”left” width=25% size=5><br>

<hr align=”right” width=90%><br>

<hr align=”center” width=280 size=7><br>

</BODY>

</HTML>

EENNLLAACCEESS YY AANNCCLLAASS

Una de las propiedades mas interesantes del Lenguaje HTML es la capacidad de incorporar

enlaces hipertexto, permitiendo que los diferentes objetos de la página: texto, imágenes y

otros estén enlazados con otros documentos u objetos multimedia relacionados. El objeto

que constituye el enlace es resaltado por el navegador utilizando otro color al original y

subrayado.

Los enlaces hipertexto se incorporan en el documento HTML por medio de unas

construcciones llamadas “anclas”, de los cuales existen dos tipos:

- Anclas de referencia.- Contienen la referencia del destino del enlace hipertexto.

- Anclas nominales.- Son utilizados para definir puntos específicos de un documento

que pueden ser referenciados usando anclas de referencia.

Lenguaje HTML

Tópicos Internet

ANCLAS DE REFERENCIA.

Mediante las etiquetas <A> y </A> podemos indicar que una frase o texto o una imagen es

un enlace a otro punto. Debemos indicar el destino del enlace formando parte del código de

inicio de la etiqueta, es decir:

<A HREF=”nombrearchivo”>Texto que permite ir al enlace</A>

Por ejemplo:

<A HREF=”capitulo1/pagina.html”>Ir al capitulo 1</A>

ANCLAS NOMINALES

Especifican puntos de un documento a los que podemos hacer referencia usando enlaces

hipertexto. Su función es asignar un nombre o etiqueta al punto donde se encuentran según

la metodología que sigue:

<A NAME=”ETIQUETA”> Texto destino de otros enlaces </A>

Para hacer referencia ahora a este punto al que se le ha asignado una etiqueta mediante un

ancla nominal, utilizamos un ancla de referencia con la siguiente sintaxis:

<A HREF=”#ETIQUETA”>Texto del enlace</A>

Incluso podemos hacer referencia a un ancla nominal de otro documento.

<A HREF=”documento1.html#etiqueta1”>Texto de enlace</A>

URLS

Podemos incluir enlaces a otros documentos de otros servidores de la red, para ello

utilizamos una notación especial: URL la cual tiene la siguiente sintaxis:

servicio://nombre_servidor[:puerto]/ruta_acceso/nombrearchivo

Servicio: Especifica el tipo de servicio utilizado, los cuales son http, frp, news, gopher,

wais y telnet.

Puerto.- el puerto estándar es el 80, si un servidor tiene otro distinto, hay que indicarlo.

Ejemplo:

<A HREF=”http://www.usat.edu.pe”>USAT</A>

Es posible tener un enlace hipertexto que activará el programa de correo electrónico para

enviar un mensaje a un usuario determinado.

<A HREF=”mailto:[email protected]”>Contáctenos Cómputo</A>

Lenguaje HTML

Tópicos Internet

OOBBJJEETTOOSS MMUULLTTIIMMEEDDIIAA

MANIPULACIÓN DE IMÁGENES

Los formatos estándar de imágenes soportados por la web son:

JPG (Joint Photograhic Experts Group)

GIF (Graphic Interchange Format)

PNG (Portable Network Graphic)

Los formatos JPG permiten almacenar imágenes con una calidad de hasta 16.7 millones de

colores, mientras que los formatos GIF pueden manipular hasta 256 colores, siendo este

muy bueno para comprimir áreas monocolor.

En cuanto al tamaño es recomendable que el peso estándar de una imagen debe ser menor o

igual a 10 Kb. Existen varias maneras de minimizar el tamaño de los archivos de imagen, la

primera sería reducir el tamaño de la imagen mediante el uso de software gráfico, la

segunda incluiría la reducción del número de colores utilizados. Como referencia se debe

lograr trabajar con imágenes que no sobrepasen los 100 Kb.

Etiqueta para insertar imágenes y sus respectivos atributos

<IMG SRC=”archivográfico”>

Atributos

Dimensionamiento de imágenes utilizando los atributos WIDTH(ancho) y HEIGHT (alto), sus valores pueden ser representados en pixeles o en porcentaje.

Ejemplo :

<HTML>

<HEAD>

<TITLE>Manipulación de Imágenes</TITLE>

</HEAD>

<BODY>

<img src="pescados.jpg" width="150">

</BODY>

</HTML>

Alineación del texto que lo acompaña. ALIGN tiene los siguientes valores

- Top.- Coloca el punto más alto de la imagen coincidiendo con lo más alto de

la línea de texto actual.

- Middle.- Alinea el punto medio(en altura de la imagen con la base del texto.

- Bottom.- Alinea el punto más bajo de la imagen con la base del texto, es el

valor por defecto.

- Left.- Coloca la imagen a la izquierda del texto.

Lenguaje HTML

Tópicos Internet

- Right.- Colocal la imagen a la derecha del texto.

Se puede ingresar una descripción breve o frase indicativa de la imagen, esta se

mostrará en caso la imagen no se visualice en el navegador. El parámetro es ALT.

<img src="pescados.jpg" alt=”Imagen de pescados”>

Borde de la imagen utilizando para esto el parámetro BORDER, por defecto el valor es 0, se puede modificar el valor para variar el grosor en píxeles.

<img src="pescados.jpg" border=”1”>

Existe la posibilidad de definir un marco transparente tanto horizontal como vertical que rodea la imagen con el fin de separarla del texto circundante.

Ejemplo

<HTML>

<HEAD>

<TITLE>Manipulación de Imágenes</TITLE>

</HEAD>

<BODY>

<img src="pescados.jpg" align="Top">Este texto aparece en la parte superior<br><br>

<img src="pescados.jpg" align="Middle">Este texto aparece en la parte

central<br><br>

<img src="pescados.jpg" align="Bottom">Este texto aparece en la parte inferior de la

imagen<br><br>

<img src="pescados.jpg" align="left">Este texto aparece a la izquierda de la

imagen<br><br><br><br><br><br><br>

<img src="pescados.jpg" align="right">Este texto aparece a la derecha de la

imagen<br><br><br><br><br><br><br>

<img src="pescados.jpg" align="Texto alternativo Pescados">Aqui no aparece el texto

alternativo debido a que la imagen si se está mostrando en el

navegador.<br><br><br><br><br><br>

Esta es una imagen <img src="pescados.jpg" hspace="20" vspace="10" align="left">

referente a la vida marina.<br><br>

</BODY>

</HTML>

MANIPULACIÓN DE AUDIO

Se puede incorporar sonido a una página web, siendo posible que se ejecute

automáticamente como fondo sonoro de la página, o como una opción para que el usuario

lo active. Los archivos de sonidos pueden ser de tipo mid, wav o mp3.

Lenguaje HTML

Tópicos Internet

Fondo sonoro para Internet Explorer

<BGSOUND SRC=”Archivo_de_Audio” LOOP=n>

El atributo LOOP especifica el número de veces que se debe ejecutar el archivo de sonido.

Si desea que el sonido se ejecute indefinidamente debe colocar el valor de LOOP a –1 o

infinite. Si se omite este atributo el archivo solo se escuchará una sola vez.

Ejemplo:

<HTML>

<HEAD>

<TITLE>Manipulación de Sonidos</TITLE>

</HEAD>

<BODY>

<bgsound src="sonido.mid" loop=1>

</BODY>

</HTML>

Fondo sonoro para Netscape

<EMBED SRC=”Archivo_de_Audio” WIDTH=x HEIGHT=y>

Donde WIDTH y HEIGHT corresponden al ancho y alto de la consola que aparece, y que

tiene diferentes teclas como por ejemplo play, stop, pausa, etc.

Se pueden utilizar los siguientes atributos adicionales:

AUTOSTART =”true” ejecuta automáticamente

LOOP=”true” ejecuta ininterrumpidamente

HIDDEN=”true” crea una consola invisible

Ejemplo:

<embed src=”sonido.mid” width=”200” height=”55” autostart=”true” loop=”true”

hidden=”true”>

MANIPULACIÓN DE VIDEO

Para poder insertar secuencias de video en una página se puede utilizar la etiqueta <IMG>,

con los siguientes parámetros:

<IMG dynsrc=”archivo_de_video”>

Las extensiones generales para video son: avi, ram, mov, mpeg.

Lenguaje HTML

Tópicos Internet

Parámetros adicionales:

CONTROLS.- que especifica si se desean agregar los controles al video.

<IMG dynsrc=”video.avi” CONTROLS>

LOOP.- para indicar el número de veces que se visualiza.

<IMG dynsrc=”video.avi” LOOP=2>

Otra forma es utilizar la opción de colocar un enlace a un archivo de video, de esta manera,

el usuario al pulsarlo lo ejecutará.

<a ref.=”video.avi”> Clic aquí para Ver</A>

Ejemplo:

<HTML>

<HEAD>

<TITLE>Manipulación de Videos</TITLE>

</HEAD>

<BODY>

<IMG dynsrc="video.avi">

</BODY>

</HTML>

MANIPULACIÓN DE TEXTO EN MOVIMIENTO

Existen distintas soluciones para conseguir texto en movimiento haciendo uso del lenguaje

HTML (las marquesinas) con GIF animados, con JavaScript, etc.

Marquesinas

Es una ventana en la que se desplaza un texto. Solo son válidas para Internet Explorer.

<MARQUEE>Texto que se desplaza</MARQUEE>

Atributos adicionales:

- WIDHT y HEIGHT.- Ajustan el ancho y el alto, puede ser igual a un numero de

pixels o utilizar porcentajes.

- ALIGN.- Modifica la alineación del texto que lo rodea, puede ser TOP, MIDDLE o

BOTTOM.

- BEHAVIOR.- Sirve para definir de que manera se va a efectuar el desplazamiento

del texto, los valores son:

SCROLL.- Por defecto. Aparece en un lado y se desplaza hacia el

otro lado.

SLIDE.- Aparece por un lado y se desplaza hasta llegar al otro

extremo, y se detiene.

ALTERNATE.- Desplaza alternadamente hacia un lado y otro,

siempre dentro de los límites de la marquesina.

- BGCOLOR.- Se modifica el color de fondo de la marquesina.

Lenguaje HTML

Tópicos Internet

- DIRECTION.- Modifica la dirección hacia la que se dirige el texto. Puede ser LEFT

o RIGHT.

- SCROLLAMOUNT.- Define la cantidad de desplazamiento del texto en cada

movimiento de avance, expresado en píxeles. Cuanto mayor es el número, más

rápido avanza.

- SCROLLDELAY.- Define el tiempo entre cada movimiento de avance. Está

expresado en milisegundos. Cuanto mayor es el número más lento avanza.

- LOOP.- Especifica el número de veces que aparecerá el texto. Es indefinido por

defecto.

Ejemplo

<HTML>

<HEAD>

<TITLE>Manipulación de Marquesinas</TITLE>

</HEAD>

<BODY>

<marquee>Marquesina normal</marquee><br><br><br><br>

<marquee widht="20%" height="20%" bgcolor=blue>Marquesina con alto y ancho

definidos</marquee><br><br><br><br>

<marquee behavior="alternate">Marquesina</marquee><br><br><br><br>

<marquee DIRECTION="right">Marquesina que empieza en la

izquierda</marquee><br><br><br><br>

<marquee scrolldelay=200>Marquesina</marquee><br><br><br><br>

<marquee loop="2">Marquesina que se desplaza solo dos

veces</marquee><br><br><br><br>

</BODY>

</HTML>

MMAANNIIPPUULLAACCIIOONN DDEE TTAABBLLAASS

Una tabla es una estructura en forma de matriz, es decir, costa de filas y de columnas, cuya

intersección se le denomina celda; que permite representar cualquier elemento de la página

(texto, listas, imágenes, etc). Es una herramienta muy útil para organizar contenidos.

Estructura de una Tabla

<TABLE> <!- Define a la Tabla ->

<TR> <!- Define una fila ->

<TD>fila1 – celda1 </TD> <!- Define una columna ->

<TD>fila1 – celda2 </TD>


</TR>

<TR> <!- Define una nueva fila ->

<TD>fila2 – celda1 </TD> <!- Define una columna ->


Lenguaje HTML

Tópicos Internet


</TR>

</TABLE>

Ejemplo:

<HTML>

<HEAD>

<TITLE>Manipulación de Tablas</TITLE>

</HEAD>

<BODY>

<TABLE>

<TR>

<TD>Cena </TD>

<TD>Bebidas </TD>

<TD>Dulces </TD>

</TR>

<TR>

<TD>A </TD>

<TD>B </TD>

<TD>C </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Atributos

BORDER.- Especifica el grosor del borde que se dibujará alrededor de las celdas. Por defecto es 0, lo que significa que no dibujará borde alguno.

CELLSPACING.- Define el número de pixels que separarán las celdas.

CELLPADDING.- Define el número de pixels que habrá entre el borde de una celda y su contenido.

WIDTH.- Especifica la anchura de la tabla. Puede estar tanto en pixels como en porcentaje (100% equivale a toda la anchura de la ventana).

HEIGHT.- Especifica el alto de la tabla.

ALIGN.- Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER)

BGCOLOR.- Es código de color o nombre constante que indica el color de fondo de todas las celdas de la tabla. Si no se indica la tabal se torna transparente.

BACKGROUND.- Especifica un URL(referencia relativo) de un archivo de imagen, que se colocará como fondo de la tabla.

Ejemplo:

<HTML>

<HEAD>


Lenguaje HTML

Tópicos Internet

</HEAD>

<BODY>

<TABLE border="2" width="50%" align="center" cellspacing="5" cellpadding="10"

bgcolor="blue">

<TR>

<TD>Cena </TD>

<TD>Bebidas </TD>

<TD>Dulces </TD>

</TR>

<TR>

<TD>A </TD>

<TD>B </TD>

<TD>C </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Atributos que se pueden asignar a una Fila (TR)

ALIGN.- Alinea el contenido de las celdas de la columna horizontalmente a la izquierda(LEFT), derecha (RIGHT) o al centro (CENTER)

VALIGN.- Alinea el contenido de las celdas de la columna verticalmente

arriba(TOP), abajo (BOTTOM) o al centro (MIDDLE)

BGCOLOR.- Especifica un código de color o nombre constante que indica el color de fondo de todas las celdas de una fila especifica.

Ejemplo:

<HTML>

<HEAD>


</HEAD>

<BODY>

<TABLE border="2" width="50%" align="center">

<TR align="center" bgcolor="#00ff00">

<TD>Cena </TD>

<TD>Bebidas </TD>

<TD>Dulces </TD>

</TR>

<TR>

<TD>A </TD>

<TD>B </TD>

<TD>C </TD>

</TR>

</TABLE>

Lenguaje HTML

Tópicos Internet

</BODY>

</HTML>

Atributos que se pueden asignar a una Celda (TD)

ALIGN.- Alinea el contenido de las celdas de la columna horizontalmente a la

izquierda(LEFT), derecha (RIGHT) o al centro (CENTER)

VALIGN.- Alinea el contenido de las celdas de la columna verticalmente arriba(TOP), abajo (BOTTOM) o al centro (MIDDLE)

WIDTH.- Especifica la anchura de la celda con respecto a la anchura de la tabla. También se puede especificar tanto en pixels como en porcentaje.

COLSPAN.- Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a esta (incluyendo la celda en la que se declara este parámetro).

Es por defecto uno. Si se pone igual a 0, se unirán todas las celdas que quedan a la

derecha.

ROWSPAN.-Especifica el número de celdas de la columna situadas debajo de la

actual que se unen a ésta.

BGCOLOR.- Especifica un código de color o nombre constante que indica el color de fondo de una celda específica.

Ejemplo:

<HTML>

<HEAD>


</HEAD>

<BODY>


<TR>

<TD COLSPAN="3" ALIGN="center" BGCOLOR="#0099cc">

<FONT COLOR="#FFFFFF">COMIDAS</FONT>

</TD>

</TR>

<TR align="center">

<TD>Cena </TD>

<TD>Bebidas </TD>

<TD>Dulces </TD>

</TR>

<TR>

<TD>A </TD>

<TD>B </TD>

<TD>C </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Lenguaje HTML

Tópicos Internet

Ejemplo:

<HTML>

<HEAD>


</HEAD>

<BODY>


<TR>

<TD> </TD>

<TD COLSPAN="3" ALIGN="center" BGCOLOR="#0099cc">

<FONT COLOR="#FFFFFF">COMIDAS</FONT>

</TD>

</TR>

<TR align="center">

<TD ROWSPAN="2" VALIGN="bottom">Tipos</TD>

<TD>Cena </TD>

<TD>Bebidas </TD>

<TD>Dulces </TD>

</TR>

<TR>

<TD>A </TD>

<TD>B </TD>

<TD>C </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Existe un parámetro que permite definir el titulo de la tabla y es: <CAPTION>

<HTML>

<HEAD>


</HEAD>

<BODY>

<TABLE>

<CAPTION>Ejemplo de Tabla</CAPTION>

<TR>

<TD>Cena </TD>

<TD>Bebidas </TD>

<TD>Dulces </TD>

</TR>

<TR>

<TD>A </TD>

<TD>B </TD>

<TD>C </TD>

Lenguaje HTML

Tópicos Internet

</TR>

</TABLE>

</BODY>

</HTML>

Ejemplo completo:

<HTML>

<HEAD>


</HEAD>

<BODY>

<TABLE border="2" width="80%" bgcolor="#0000cc">

<CAPTION>Ejemplo de Tabla</CAPTION>

<TR>

<TD width="25%"><CENTER>

<TABLE BORDER="1" HEIGHT="90%" WIDTH="90%">

<TR>

<TD ALIGN="CENTER"><FONT COLOR="#FFFF00"

SIZE="5">I+D</FONT><BR></TD>

</TR>

<TR>

<TD ALIGN="CENTER"><FONT COLOR="#FFFF00" SIZE="2">Investigación

<BR> & Desarrollo</FONT></TD>

</TR>

</TABLE>

</CENTER>

</TD>

<TD WIDTH="75%"><CENTER>

<FONT COLOR="#FF9900"><B>Francisco José Rodríguez Valero<BR>Re-Ingeniería a

su alcance<BR>

</FONT>

<HR>

<TABLE>

<TR>

<TD><img src="imagenes/email1.gif"></TD>

<TD><B><A

href="mailto:[email protected]">[email protected]</A></B></TD>

</TR>

</TABLE></CENTER>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Lenguaje HTML

Tópicos Internet

MMAANNIIPPUULLAACCIIOONN DDEE FFRRAAMMEESS((MMAARRCCOOSS))

Los frames es una técnica del lenguaje HTML que consiste en dividir la pantalla del

navegador en diferentes zonas o ventanas, las cuales pueden actuar y ser manipuladas

independientemente unas de otras.

Una de las características más importantes es que pulsando un enlace situado en un frame,

se puede cargar en otro frame una página determinada.

Estructura de un Frame

Los frames cambian la estructura de la página HTML tradicional, eliminando la parte del

cuerpo (BODY) y sustituyéndola por el código <FRAMESET>. Así todos los códigos que

antes aparecían dentro del cuerpo aparecerán dentro del código <FRAMESET>. La

estructura típica a utilizar será.

<HTML>

<HEAD>

<TITLE>Título de la Ventana</TITLE>

</HEAD>

<FRAMESET> <!- Aquí se define el marco principal ->

</FRAMESET>

</HTML>

Atributos de la etiqueta FRAMESET

FRAMEBORDER.- especifica el borde.

FRAMESPACING.- Especifica el espaciado entre marcos.

ROWS.- Especifica las divisiones de la ventana principal en filas.

COLS.- Especifica las divisiones de la ventana principal en columnas.

Los valores utilizados para especificar el tamaño de cada una de ellas es:

Porcentaje.- Expresado en porcentaje como por ejemplo las tablas, 20%, 50%, etc.

Absolutos.- Expresado en pixels.

Sobre el espacio sobrante.- Se utiliza para esto el * , indicando que lo que sobra en ese espacio se lo asigne al frame.

Los valores se pueden ingresar separadas por comas.

Ejemplos:

<FRAMESET rows=”25%,50%,25%”>, esto crea tres sub ventanas horizontales, la primera

ocupará un 25% de la ventana principal, la segunda un 50% y la tercera 25% siempre de la

ventana principal.

<FRAMESET cols=”120,*,100”>, esto crea tres sub ventanas verticales, la primera y la

tercera tendrán un ancho fijo de 120 y 100 respectivamente, la segunda (*) ocupará el resto

de la ventana principal.

Lenguaje HTML

Tópicos Internet

<FRAMESET cols=”10%,*,200,2*”>, esto crea cuatro sub ventanas verticales, la primera

ocupará un 10% de la ventana principal, la tercera necesita 200 píxeles, la cuarta debe tener

el doble de espacio que la segunda, teniendo en cuenta como referencia el espacio sobrante.

Etiqueta FRAME

Esta etiqueta indica las propiedades de cada sub ventana. Es necesario indicar una etiqueta

<FRAME> para cada sub ventana creada. Los parámetros de <FRAME> son:

NAME.- Asigna un nombre a un frame para que después podamos referirnos a él.

SRC.- Indica la dirección del documento HTML que ocupará el frame.

SCROLLING.- Decide si se colocan o no barras de desplazamiento al frame para que podamos movernos por su contenido. Su valor por defecto es AUTO, que deja

al navegador la decisión. Las otras opciones son YES o NO.

NORESIZE.- Este atributo no permite que el usuario cambie el tamaño del frame.

FRAMEBORDER.- Si se iguala a cero se eliminará el borde.

MARGINWIDTH.- Permite cambiar los márgenes horizontales dentro de un marco. Se representa en píxels.

MARGINHEIGHT.- Permite cambiar los márgenes verticales dentro de un marco. Se representa en píxels

Si su navegador no reconoce los frameset y frame no se mostrará información de su página,

por esto se incluyen las etiquetas <NOFRAMES> y </NOFRAMES>, creando un

contenido alternativo que se visualizará en la página.

Ejemplo: Crea el archivo con el nombre de index.html

<HTML>

<HEAD>

<TITLE>Manipulación de Marcos o Frames</TITLE>

</HEAD>

<FRAMESET ROWS="15%,*,15%">

<!- Crea tres sub ventanas horizontales ->

<FRAME NAME="SUPERIOR" src="titulo.html" scrolling="no" noresize>

<FRAME NAME="CENTRO" src="contenido.html" noresize

marginwidth="20" marginheight="20">

<FRAME NAME="INFERIOR" src="menu.html" crolling="no">

<NOFRAMES>

<BODY>

Su navegador no muestra frames. Pulse <a href="menu.html">AQUI</A> par ir a la

página sin frames.

</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>

Lenguaje HTML

Tópicos Internet

El resultado de este código en el navegador es mostrar las tres zonas creadas pero en cada

uno de ellos aparecerá que no se puede mostrar la página. Esto implica que se debe crear

las páginas mencionadas en el contenido de esta archivo las cuales son: titulo.html,

contenido.html y menu.html.

Archivo: titulo.html

<HTML>

<HEAD>

<TITLE>Titulo</TITLE>

</HEAD>

<BODY>

<CENTER><H1><B>TITULO DE LA PAGINA PRINCIPAL</H1></B></CENTER>

</BODY>

</HTML>

Archivo: contenido.html

<HTML>

<HEAD>

<TITLE>Contenido</TITLE>

</HEAD>

<BODY>

Este es el contenido de la página

</BODY>

</HTML>

Archivo: menu.html

<HTML>

<HEAD>

<TITLE>Menu</TITLE>

</HEAD>

<BODY>

<table>

<tr>

<td>Opción 1 </td>

<td>Opción 2 </td>

<td>Opción 3 </td>

<td>Opción 4 </td>

<td>Opción 5 </td>

</tr>

</table>

</BODY>

</HTML>

Presentación de información

Por defecto, cuando se pulsa un enlace situado dentro de un frame, la nueva página a la que

se desea acceder se presenta en ese mismo frame, sin embargo, es posible que se desee que

Lenguaje HTML

Tópicos Internet

esto no ocurra. Pro ejemplo, si se tiene un frame que sirve de índice y otro donde se

muestra los contenidos, sería deseable que los enlaces del frame índice se abrieran en el

otro frame. Esto es posible mediante a utilización del parámetro TARGET.

Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>.

Este parámetro tiene los siguientes valores:

TARGET=”nombre_ventana”.- Muestra la nueva página en la ventana (frame) cuyo

nombre se indica.

TARGET=”_top”.- Elimina todos los marcos existentes y muestra la nueva página en la ventana original sin marcos.

TARGET=”_blank”.- Carga la página en una nueva ventana.

TARGET=”_self”.- Muestra la nueva página en el marco donde está declarado el enlace.

TARGET=”_parent”.- El enlace se muestra en el <FRAMESET> definido

anteriormente al actual. Si no hay ningún <FRAMESET> anterior se muestra a

pantalla completa suprimiendo todas las sub ventanas de la pantalla.

Ejemplo: Modificando el archivo menu.html

<HTML>

<HEAD>

<TITLE>Menu</TITLE>

</HEAD>

<BODY>

<table>

<tr>

<td><a href="http:/www.microsoft.com" target="_blank">Microsoft</a></td>

<td><a href="reseña.html" target="CENTRO">Reseña</a></td>

<td><a href="http:/www.usat.edu.pe" target="_top">Pagina Usat</a></td>

<td>Opción 4</td>

<td>Opción 5</td>

</tr>

</table>

</BODY>

</HTML>

Implementación de Frame Anidados.

La etiqueta <FRAMESET> puede ser utilizada en forma anidada con el objeto de

subdividir una subdivisión. Esto se realiza colocando otro <FRAMESET> donde

normalmente colocamos las etiquetas <FRAME>, del siguiente modo:

Ejemplo:

<HTML>

<HEAD>

<TITLE>Manipulación de Marcos o Frames ANIDADOS</TITLE>

</HEAD>

Lenguaje HTML

Tópicos Internet

<FRAMESET COLS="25%,*">

<!- Crea dos sub ventanas verticales ->

<FRAME NAME="INDICE" src="indice.html">

<FRAMESET ROWS="*,60">

<FRAME NAME="PRINCIPAL" src="contenido.html">

<FRAME NAME="EJEMPLOS" src="enlaces.html">

</FRAMESET>

<NOFRAMES>

<BODY>

Su navegador no muestra frames. Pulse <a href="menu.html">AQUI</A> par ir a la

página sin frames.

</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>

MMAANNIIPPUULLAACCIIOONN DDEE FFOORRMMUULLAARRIIOOSS

La habilidad de interactuar con los usuarios es una de las principales características de los

ordenadores y las redes informáticas. La posibilidad de realizar preguntas y recibir

respuestas es una de las formas fundamentales de conseguir esta interactividad y el lenguaje

HTML proporciona la habilidad de crear formularios e insertar cajas de texto, botones de

opción y otros controles que nos permitirán aprovechar esa posibilidad de interactividad en

nuestras páginas Web.

El lenguaje HTML consta de una serie de etiquetas que permitirán crear de forma rápida y

sencilla numerosos elementos de entrada de datos. Estos elementos, que reciben el nombre

de controles, serán gráficos en la mayoría de navegadores. Un formulario no es más que un

conjunto de estos controles cuya información será enviada conjuntamente cuando el usuario

pulse sobre el botón de envío.

ESTRUCTURA DE UN FORMULARIO

Las etiqueta que permiten la creación de un formulario son <FORM> ... </FORM>,

acompañados de atributos especiales.

<FORM ACTION=”” METHOD=”” ENCTYPE=”text/plain” NAME=”identificación”>

…. Cuerpo del formulario

…. Botones de envío y de borrado.

</FORM>

Parámetros

ACTION.- Indica la acción que se debe efectuar. Esta puede ser, que los datos sean enviados por email a una dirección indicada como por ejemplo:

ACTION=”mailto:dirección de email”

mailto:dirección%20de%20email

Lenguaje HTML

Tópicos Internet

O también, se puede indicar el URL de un programa (CGI) que se encargará de

tratar los datos del formulario, que debe encontrarse en el servidor y estar escrito en

algún lenguaje de programación.

METHOD.- Especifica el método usado para el envío de los datos. Con POST envía

datos en la entrada estándar del programa que trata el formulario y con GET los

datos se pasan por parámetro, en la línea de comandos, al programa. El método de

uso más normal será POST.

ENCTYPE=”text/plain” indica que los valores de los campos serán enviados como un archivo de texto, perfectamente legible y sin codificar.

NAME.- Permite colocar una identificación al formulario, puesto que es posible tener varios formularios en la misma página.

OBJETOS DENTRO DEL FORMULARIO.

A. Cuadro de Texto

Existen tres formas de conseguir que el usuario introduzca texto en el formulario:

- Texto Corto(Una Línea)

<INPUT TYPE=”text” NAME=”nombre_objeto” VALUE=”valor_inicial”>

Atributos

VALUE.- Texto que contendrá la caja por defecto.

SIZE.-La longitud de este campo es por defecto de 20 caracteres, con este atributo

se puede variar el tamaño de la caja.

MAXLENGTH.-Especifica el número máximo de caracteres que puede introducir el

usuario. Por defecto no tiene límites.

- Palabras Secretas

<INPUT TYPE=”password” NAME=”nombre_objeto” VALUE=”valor_inicial”>

Es similar al anterior, pero en este caso no se imprimen los caracteres según se van

introduciendo, se muestra un * en lugar del carácter pulsado.

- Texto en múltiples líneas

<TEXTAREA NAME=”nombre_objeto” ROWS=”numero” COLS=”numero”>

Texto por defecto </TEXTAREA>

ROWS.- Representa el número de filas

COLS.- Representa el número de columnas que ocupará la caja de texto.

Permite el ingreso de texto que puede abarcar varias líneas, introduciéndolo en

forma de párrafo.

Ejemplo:

<HTML>

<HEAD>

<TITLE>Formulario</TITLE>

</HEAD> <BODY>

Lenguaje HTML

Tópicos Internet

<B>Pagina HTML con un formulario</B><br>

<FORM>

Cuadro de Texto : <INPUT TYPE="text" NAME="TEXTO"><br>

Clave de acceso : <INPUT TYPE="password" NAME="CLAVE"><br>

Sugerencia : <TEXTAREA NAME="SUGERENCIA" ROWS="6"

COLS="40">Escriba su Sugerencia</TEXTAREA>

</FORM> </BODY> </HTML>

B. Casillas de Verificación

Aparecerá una casilla en la página que permite marcarla o desmarcarla, teniendo dos

estados los cuales son ON y OFF. En este caso de debe especificar como tipo

CHECKBOX.

<INPUT TYPE=”checkbox” NAME=”nombre_objeto”>

Atributos adicionales

VALUE=”valor”.- Si se indica el atributo value, cuando se envían los datos con el

botón activado, se enviará el objeto con el valor indicado, en caso contrario no se

enviará ningún valor.

CHECKED.- Es un parámetro que permite activar un control por defecto, es decir,

aparezca marcado.

C. Botones de Opción

Se usa cuando la opción debe tomar un único valor simple de una serie de

alternativas. En este caso se presentan unos valores opcionales de los que solo se

puede seleccionar uno. En este caso se utiliza como tipo la palabra RADIO. Tiene los

mismos atributos adicionales que el Checkbox.

<INPUT TYPE=”radio” NAME=”nombre_objeto”>

Para indicar un grupo de botones de opción se debe asignar a todos ellos el mismo

NAME.

Ejemplo: <HTML> <HEAD>


</HEAD> <BODY> <B>Pagina HTML con un formulario</B><br>

Utilizando controles radio y checkbox

<FORM>

Controles Radio<br> <INPUT TYPE="radio" NAME="estadocivil" VALUE="Soltero" checked>Soltero

<INPUT TYPE="radio" NAME="estadocivil" VALUE="Casado">Casado

<INPUT TYPE="radio" NAME="estadocivil" VALUE="Viudo">Viudo

Lenguaje HTML

Tópicos Internet

<INPUT TYPE="radio" NAME="estadocivil" VALUE="Divorciado">Divorciado

<br><br>Controles Checkbox<br>HOBBIES<br><br>

<INPUT TYPE="checkbox" NAME="Futbol" VALUE="Futbol" checked>Futbol

<INPUT TYPE="checkbox" NAME="Voley" VALUE="Voley">Voley

<INPUT TYPE="checkbox" NAME="Basket" VALUE="Basket">Basket

</FORM> </BODY> </HTML>

D. Elección entre múltiples opciones

Se usa para menús simples o múltiples.

Formato:

<SELECT NAME=”nombre_objeto”>

<OPTION> Primera Opción

<OPTION> Segunda Opción

........

<OPTION>Enésima Opción

</SELECT>

Atributos adicionales

SIZE=valor .- Especifica el número de opciones que se pueden visualizar. Si es mayor

que 1 se observa una lista de selección y, si no, se ve una lista desplegable.

MÚLTIPLE.- Si lo indicamos podremos seleccionar más de una opción a la vez.

Ejemplo:

<HTML>

<HEAD>


</HEAD>

<BODY>


Utilizando Cuadro de Selección (ComboBox)

<FORM>

Colores (solo permite elegir uno)<br>

<SELECT NAME="COLOR">

<OPTION>Azul

<OPTION>Rojo

<OPTION>Verde

<OPTION>Amarillo

<OPTION>Blanco

</SELECT>

<BR><BR>Otro de Colores (este permite seleccionar mas de uno)<br>

<SELECT NAME="COLORES" MULTIPLE SIZE=3>

<OPTION>Azul

<OPTION>Rojo

<OPTION>Verde

Lenguaje HTML

Tópicos Internet

<OPTION>Amarillo

<OPTION>Blanco

</SELECT>

</FORM>

</BODY>

</HTML>

E. Botones de Envío y Borrado

Existen dos botones esenciales en un formulario, el que permita enviar los datos que

se encuentran en los controles y otro que permita limpiar su contenido.

En todo formulario debe existir al menos un botón de envío.

Botón de Envío

<INPUT TYPE=”submit” VALUE=”mensaje a mostrar”>

El atributo VALUE muestra una etiqueta no editable que aparecerá sobre el botón.

Botón de Borrado

<INPUT TYPE=”reset” VALUE=”mensaje a mostrar”>

Ejemplo:

<HTML>

<HEAD>


</HEAD>

<BODY>


Utilizando Botones de Enviar y Borrado<br>

<FORM ACTION="mailto:[email protected]" METHOD="POST">

Texto : <INPUT TYPE="TEXT" NAME="txtTexto"><br><br>

<INPUT TYPE="submit" VALUE="Enviar">

<INPUT TYPE="reset" VALUE="Borrar">

</FORM>

</BODY>

</HTML>

Lenguaje Java Script

Topicos Internet

Documents

HTML curso