html curso
DESCRIPTION
HTMLTRANSCRIPT
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>
<H4>NIVEL 4</H4><br>
<H5>NIVEL 5</H5><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>
<TITLE>Formato del Texto</TITLE>
</HEAD>
<BODY TEXT="#0000ff">
<B>TITULO DE LA PAGINA en negrita</B><br>
<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
< <
≶ >
& &
" “
Ejemplo 7:
<HTML>
<HEAD>
<TITLE>Formato del Texto</TITLE>
</HEAD>
<BODY TEXT="#0000ff">
<B>TITULO DE LA PAGINA en negrita</B><br>
<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>
<TITLE>Formato del Texto</TITLE>
</HEAD>
<BODY TEXT="#0000ff">
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>
<TD>fila1 – celda3 </TD>
</TR>
<TR> <!- Define una nueva fila ->
<TD>fila2 – celda1 </TD> <!- Define una columna ->
<TD>fila2 – celda2 </TD>
Lenguaje HTML
Tópicos Internet
<TD>fila2 – celda3 </TD>
</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>
<TITLE>Manipulación de Tablas</TITLE>
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>
<TITLE>Manipulación de Tablas</TITLE>
</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>
<TITLE>Manipulación de Tablas</TITLE>
</HEAD>
<BODY>
<TABLE border="2" width="50%" align="center">
<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>
<TITLE>Manipulación de Tablas</TITLE>
</HEAD>
<BODY>
<TABLE border="2" width="50%" align="center">
<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>
<TITLE>Manipulación de Tablas</TITLE>
</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>
<TITLE>Manipulación de Tablas</TITLE>
</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”
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>
<TITLE>Formulario</TITLE>
</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>
<TITLE>Formulario</TITLE>
</HEAD>
<BODY>
<B>Pagina HTML con un formulario</B><br>
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>
<TITLE>Formulario</TITLE>
</HEAD>
<BODY>
<B>Pagina HTML con un formulario</B><br>
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