Professional Documents
Culture Documents
documento
Ejemplo el Internet Explorer
La secuencia de trabajo para crear un documento HTML.
Con el procesador de texto creamos (Bloc de Notas) creamos el documento HTML y lo
guardamos con el nombre que deseamos, a excepcin de la extensin que deber ser
necesariamente.html
Finalmente para visualizar nuestro documento HTML abriremos el documento con un
programa navegador en este caso el Internet Explorer de Microsoft
ING.AlejandroRomero Huayta
Pgina 1
La etiqueta salto de lnea <BR> ,se utiliza para realizar saltos de lneas de un
prrafo.
LOS ENCABEZADOS. Se utilizan para dividir secciones de texto, tal como utilizar
un titulo luego un subtitulo. En HTML se definen seis niveles de encabezados de (H1 a H6)
El encabezado se representa con la etiqueta <H1>de apertura y de cierre como</H1>
Ejemplo <H1> instalacin de una tarjeta de sonido</H1>. Por ejemplo
<HTML>
<HEAD>
<TITLE>UTILIZANDO ENCABEZADOS</TITLE>
</HEAD>
<BODY>
<H1> instalacin de una tarjeta de sonido </H1>
<H2>Introduccin</H2>
<H3>Cabeceras y cuerpo</H3>
<H4>Cabeceras</H4>
ING.AlejandroRomero Huayta
Pgina 2
<H4>cuerpo</H4>
<H3>Elementos del lenguaje II </H3>
<H4>Listas</H4>
<H4>Hiperenlaces</H4>
<H2>Apndice</H2>
</BODY>
</HTML>
sirve para escribir lneas de prrafos dentro de cada encabezado del documento HTML. Se
representa con <P> de apertura y de cierre como </P>.
Ejemplo
<HTML>
<HEAD>
<TITLE>USANDO PARRAFOS</TITLE>
</HEAD>
<BODY>
<P>Las pruebas que se le aplican para determinar la calidad del software, son diferentes y
generalmente dependen del tipo de problema que se est resolviendo </P>
</BODY>
</HTML>
nuestros documentos de una forma muy sencilla y con una gran versatilidad. En HTML, se
puede definir listas anidadas, es decir, listas dentro de listas. HTM, nos permite crear tres
tipos distintos de listas:
Listas no numeradas <UL>. Con este tipo de lista podemos especificar una serie de
elementos sin un orden predeterminado, precedidos de una marca o vieta que nosotros
podemos definir. Para definir los limites de la lista utilizaremos la etiqueta <UL></UL> y
para determinar cada uno de los elementos que lo componen usaremos la etiqueta <LI>.
Ejemplo
<HTML>
<HEAD>
<TITLE>LISTAS NO NUMERADAS</TITLE>
</HEAD>
ING.AlejandroRomero Huayta
Pgina 3
<BODY>
<UL type=disk o circle o square>
Ttulo de la lista
<LI ALIGN=CENTER o LEFT o RIGHT> Elemento 1
<Li> Elemento 2
<LI> Elemento n
</UL>
</BODY>
</HTML>
Donde:
disk Muestra una marca de tipo circulo con color de fondo negro
circle: Muestra una marca de tipo circulo.
square: Muestra una marca de tipo cuadrado de fondo negro..
En este caso solo el primer tipo se mostrara en el documento (disk), dado que los tres no
pueden mostrarse al mismo tiempo.
Listas numeradas <OL>. Con este tipo de lista podemos especificar una serie de
elementos numerados segn el lugar que ocupan en la lista. Para la definicin de los limites
de la lista utilizaremos la etiqueta <OL></OL>, y para determinar cada uno de los
elementos que lo componen usaremos la etiqueta <LI>.
Ejemplo
<HTML>
<HEAD>
<TITLE>LISTAS NO NUMERADAS</TITLE>
</HEAD>
<BODY>
<OL start=n type=tipo de lista>
Ttulo de la lista
<LI> Elemento 1
<LI> Elemento 2
...
<LI> Elemento n
</UL>
</BODY>
ING.AlejandroRomero Huayta
Pgina 4
</HTML>
Listas de definiciones <DL>. Estas listas sirven para especificar una serie de trminos y
sus definiciones correspondientes. Para la definicin de la lista usaremos la etiqueta
<DL></DL>, para especificar los trminos usaremos la etiqueta <DT>, y para especificar
la definicin correspondiente a cada termino usaremos la etiqueta <DD>.
Ejemplo
<HTML>
<HEAD>
<TITLE>Lists de definitions</TITLE>
</HEAD>
<BODY>
<DL>
<LH>Ttulo de la lista</LH>
<DT>Trmino 1
<DD>Definicin 1
<DT>Trmino 2
<DD>Definicin 2
....
<DT>Trmino n
<DD>Definicin n
</DL>
</BODY>
</HTML>
La etiqueta <FONT>, permite dar formato a un determinado texto en funcin al tamao,
alineacin, el color y el tipo de letra del texto, por medio de sus atributos size, color, align y
face.
Sintaxis.
<FONT size =n color = #rrgggbb o name face= nombre de font o tipos de letras
align=center >BIENVENIDOS AL CURSO </FONT>
Donde:
ING.AlejandroRomero Huayta
Pgina 5
El atributo size, permite especificar un tamao para la fuente del texto, el cual puede estar
entre 1 y 7. El texto de tamao normal equivale a la fuente de tamao 3 (fuente base).
Por lo tanto si especificamos size = +2, el tamao de la fuente ser 5; y si especificamos
size = -1, el tamao de la fuente ser 2.
El atributo color, permite definir el color que tendr el texto incluido entre la etiqueta
<FONT>.
El atributo face, permite escribir texto con el tipo de letra que le especifiquemos.
EL atributo align, permite asignar la alineacin del texto, ya sea alineacin derecha,
izquierda o centro
TABLA QUE ESPECIFICA LOS ATRIBUTOS DEL TEXTO
ATRIBUTO
Negrita
Cursiva
Subrayado
Centrado
Tachado
Subndice
ETIQUETA
<B></B>
<I></I>
<U></U>
<CENTER></CENTER>
<S></S>
<SUB> </SUB>
EJEMPLO
<B>Hola</B>
<I>Hola</I>
<U>Hola</U>
<CENTER>Hola</CENTER>
<S>Hola</S>
<SUB> Hola</SUB>
RESULTADO
Hola en negrita
Hola en cursiva
Hola subrayado
Hola centrado
Hola
Hola
CODIGO DE COLOR
COLOR MOSTRADO
Black
Teal
Blue
Navy
Lime
White
Purple
Yellow
Olive
Red
maroon
gray
fuchsia
green
silver
aqua
#000000
#008080
#0000FF
#000080
#00FF00
#FFFFFF
#800080
#FFFF00
#808000
#FF0000
#800000
#808080
#FF00FF
#008000
#C0C0C0
#00FFFF
Negro
Teal
Azul
Azul marino
Lima
Blanco
Prpura
Amarillo
Oliva
Rojo
Marron
Gris
Fucsia
Verde
Plata
Agua
Pgina 6
ING.AlejandroRomero Huayta
Pgina 7
<H1>TERCERA GENERACIN</H1>
<P>Con los progresos de la electrnica y los avances de
comunicacin con las computadoras en la dcada de los 1960,
surge la tercera generacin de las computadoras. Se inaugura
con la IBM 360 en abril de 1964.</P>
<H1>CUARTA GENERACIN</H1>
<P>Aqu aparecen los microprocesadores que es un gran adelanto de la microelectrnica,
son circuitos integrados de alta densidad y con una velocidad impresionante. Las
microcomputadoras con base en estos circuitos son extremadamente pequeas y baratas, por
lo que su uso se extiende al mercado industrial. Aqu nacen las computadoras personales que
han adquirido proporciones enormes y que han influido en la sociedad en general sobre la
llamada revolucin informtica.</P>
<H1>QUINTA GENERACIN</H1>
<P>En vista de la acelerada marcha de la microelectrnica, la sociedad industrial se ha dado
a la tarea de poner tambin a esa altura el desarrollo del software y los sistemas con que se
manejan las computadoras. Surge la competencia internacional por el dominio del
mercado de la computacin, en la que se perfilan dos lderes que, sin embargo, no han
podido alcanzar el nivel que se desea: la capacidad de comunicarse con la computadora en
un lenguaje ms cotidiano y no a travs de cdigos o lenguajes de control
especializados.</P>
<P>IR AL MEN PRINCIPAL</P>
</BODY>
</HTML>
Creando un segundo documento en HTML llamado, Indice.html
<HTML>
<HEAD>
<TITLE>HISTORIA DELAS COMPUTADORAS</TITLE>
</HEAD>
<BODY>
<H1>GENERACIONES DE LAS COMPUTADORAS</H1>
<P>Uno de los primeros dispositivos mecnicos para contar fue el baco, cuya historia se
remonta a las antiguas civilizaciones griega y romana. Este dispositivo es muy sencillo,
consta de cuentas ensartadas en varillas que a su vez estn montadas
ING.AlejandroRomero Huayta
Pgina 8
en un marco rectangular. Al desplazar las cuentas sobre varillas, sus posiciones representan
valores almacenados, y es mediante dichas posiciones que
este representa y almacena datos.</P>
<OL>
<LI><a href = Primera.html> PRIMERA GENERACIN</a>
<LI>SEGUNDA GENERACIN
<LI>TERCERA GENERACIN
<LI>CUARTA GENERACIN
<LI>QUINTA GENERACIN
</OL>
</BODY>
</HTML>
En este documento hemos creado un vinculo con el documento llamadoPrimera.html y el
texto descriptivo a mostrarse en el documento ser PRIMERA GENERACION que estar
subrayada, cuando se seleccione este texto, deber mostrarse el documento llamado
Primera.html
II. CREANDO VINCULOS CON SITIOS WEB
Para crear vnculos con pginas remotas de cdigo HTML, lo que debe hacer es establecer
la misma sintaxis de la creacin de vnculos entre un texto y un documento, visto lneas
arriba. Por ejemplo la siguiente sintaxis permite establecer el vinculo con la pagina Web
yahoo.com.
<A href=http://www.yahoo.com/ ><img src=yahoo.gif></A>
El resultado despus de haber ejecuta deber ser igual a:
YAHOO!, cuando seleccione este icono deber mostrarse la pagina web yahoo.com
ING.AlejandroRomero Huayta
Pgina 9
La etiqueta <STRONG>, con esta etiqueta los caracteres tendrn un mayor resaltado, es
decir en negritas.
Ejemplo
<P>Usted <STRONG>Precaucin</STRONG> debe saluda antes de ingresar a la oficina
</P>.
La etiqueta <CODE> esta etiqueta indica una muestra de cdigo.
Ejemplo
<P><CODE>include </CODE></P>
La etiqueta <SAMP>, esta etiqueta indica texto de muestra y es similar a la etiqueta
<CODE>
Ejemplo.
<P>este url es de nivardo <SAMP>http://www.nirohasystem.net.tc</SAMP></P>
La etiqueta <VAR> esta etiqueta indica el nombre de una variable o entidad que se
reemplazara por un valor real.Por lo general van en cursivas como en el ejemplo
<P><CODE>Radio </CODE><VAR>STUDIO 92</VAR></P>
La etiqueta <DFN>, esta etiqueta indica una definicin, se usa para destacar una palabra
que se definir o que acaba de ser definida.
Ejemplo.
<P>estos son los estilos que se nombran <DFN>estilo de carcter lgico</DFN></P>
La etiqueta <CITE>, esta etiqueta indica una cita breve.
Ejemplo.
<P>Este manual es realizado por Romero Huayta Nivardo<CITE>(Mayo 2007)
</CITE></P>
ESTILOS FISICOS EN HTML
Las etiquetas de estilos fsicos indican exactamente la manera como se debe formatear el
texto (negritas, subrayado, etc), a continuacin se define las etiquetas de estilo fsico
La etiqueta <B>, permite establecer en negrita un texto.
La etiqueta <I>, permite establecer en cursiva un texto.
La etiqueta <U>, establece el subrayado a un texto.
ING.AlejandroRomero Huayta
Pgina 10
ING.AlejandroRomero Huayta
Pgina 11
<html>
<head>
<title>firma de un documento</title>
<body>
<hr>
<ADDRESS>
narh5@hotmail.com editorial creadores
</ADDRESS>
</BODY>
</HTML>
La etiqueta <PRE></PRE>, permite dar formato a un determinado texto y al mismo
tiempo hace que no cambie de tamao el contenido de un documento HTML.
Ejemplo
<HTML>
<HEAD>
<TITLE>texto preformateado</TITLE>
</HEAD>
<BODY>
<PRE>
PLANETA
.....................................................................................................................
MERCURIO
3100
36
59 DIAS
VENUS
7700
67
244 DIAS
MARTE
4200
141
24 HRS
JUPITER
88640
483
24 HRS 24 MINS
SATURNO
74500
886
10 HRS 39 MINS
</PRE>
</BODY>
</HTML>
TIP el carcter:  , establece el espacio entre textos.
Alineacin de bloques de elementos.
Una forma ms flexible de alinear elementos de texto es con la etiqueta <DIV>, que
significa divisin y cuenta con el atributo ALIGN, al igual que los encabezados y prrafos
ING.AlejandroRomero Huayta
Pgina 12
Sin embargo a diferencia de alinear elemento por elemento, se usa <DIV> para definir un
bloque de etiquetas HTML, de cualquier tipo y afectar todo aquello, es decie etiquetas y
textos que este entre las etiquetas de apertura y de cierre.
Ventajas de la etiqueta <DIV> frente al atributo ALIGN.
DIV solo necesita usarse una sola vez, en lugar de que se incluya ALIGN varias veces
en cada etiqueta.
DIV puede usarse para linear cualquier cosa (encabezado, prrafos, imgenes, tablas ,
etc).
Ejemplo.
<H1 ALIGN=LEFT o CENTER o RIGHT> Editorial Creadores</H1>
<DIV ALIGN=RIGHT>
<H2><a href=editorial.html>Quienes somos</a></H2>
<H2><a href=ediciones.html>Titulos Publicados</a></H2> </DIV>
Todo el HTML que aya entre la dos etiquetas <DIV> se alineara de acuerdo al valor del
atributo ALIGN. Si dentro de las etiquetas <DIV> aparece el atributo ALIGN en
encabezados o prrafos especficos. Estos valores anularan la configuracin global de DIV
La etiqueta <BLOCKQUOTE> </BLOCKQUOTE>, establece la alineacin del texto en la
parte cntrica del documento con doble espacio.
Ejemplo
<html>
<head>
<title> doble espacio</title>
</head>
<body>
<DIV ALIGN=CENTER>
<H1> CADENA DE LIBRERIAS</H1>
<H1>EL SATELITE S.A </H1>
<BLOCKQUOTE>
este es un sitio de libreras <BR>
que se distribuyen<BR>
claro<CITE> los libros son el mejor amigo del hombre</CITE>
</BLOCKQUOTE>
ING.AlejandroRomero Huayta
Pgina 13
ING.AlejandroRomero Huayta
Pgina 14
<IMG SRC:imagen.gif>
En caso de que el archivo de imagen llamado imagen.gif se encuentra en otro directorio
con respecto al directorio del documento HTML usar la ruta relativa.
Ejemplo. Vamos a insertar un archivo de imagen llamado imagen.gif en lnea, que se
encuentra en otro directorio.
<IMG SRC:../imagen.gif>. Tener en cuenta que la etiqueta <IMG> no tiene parte de
cierre as como las etiquetas <HR>, <BR> que tampoco los tienen.
He aqu algunos ejemplos de aplicacin.
<HTML>
<HEAD>
<TITLE>PASOS PARA CONECTAR UN DISCO DURO </TITLE>
</HEAD>
<BODY>
<P><IMG SRC=Hdd.jpg></P>
<H1>CONEXION DE UN DISCO DURO</H1>
<HR>
<P>
Para instalar un nuevo disco duro, debemos primero conocer el tipo de cable o manguera al
que va conectado. Se trata de una manguera del tipo IDE con tres conectores;
uno en cada extremo y el otro entre ambos, pero no en medio.</P>
<P>Este cable tiene el conector N 1 marcado por una lnea roja que es el que deber estar
alineado con el conector N 1 del disco duro.Si vamos a conectar dos dispositivos <EM>dos
discos duros o un disco duro y un CD-ROM),</EM> debemos elegir uno de ellos como el
Master y el otro como el Esclavo. Esto podemos hacerlo mediante el conector que viene en
la parte posterior del disco duro. NO OLVIDE LOS SIGUIENTES PASOS </P>
<UL>
<LI>CONECTAR CABLE DE DATOS(FLAT DE DATOS)
<LI>CONECTAR CABLE DE FUENTE
<LI>COLOCAR SUS TORNILLOS PARA SUJETAR EN EL CASE
</UL>
<P> <font size=1>CONEXION DE UN DISCO DURO<BR>
ENSAMBLE Y REPARE PENTIUM I II III y IV<BR>
ING.AlejandroRomero Huayta
Pgina 15
ING.AlejandroRomero Huayta
Pgina 16
Master y el otro como el Esclavo. Esto podemos hacerlo mediante el conector que viene en
la parte posterior del disco duro. NO OLVIDE LOS SIGUIENTES PASOS </P>
<UL>
<LI>CONECTAR CABLE DE DATOS(FLAT DE DATOS)
<LI>CONECTAR CABLE DE FUENTE
<LI>COLOCAR SUS TORNILLOS PARA SUJETAR EN EL CASE
</UL>
<P> <font size=1>CONEXION DE UN DISCO DURO<BR>
ENSAMBLE Y REPARE PENTIUM I II III y IV<BR>
AUTOR: Romero Huayta Nivardo<BR>
Huaraz-Per</P>
</BODY>
</HTML>.
ALINEACION DE IMGENES CON RESPECTO AL TEXTO
El objetivo en este caso es permitir que la imagen se deba desplegar de modo que coincidan
la parte inferior de la imagen y la del texto. Para ello utilizaremos el atributo ALIGN de la
etiqueta <IMG> que nos permitir alinear la imagen hacia arriba o hacia abajo con respecto
al texto circundante o de otras imgenes en la misma lnea.
Los valores del atributo ALIGN son
ALIGN=TOP; alinea la parte superior de la imagen con la parte superior de la lnea de un
texto o una imagen
ALIGN=MIDDLE; alinea el centro de la imagen con el centro de la lnea del texto
ALIGN=BOTTOM; alinea la parte inferior de la imagen con la parte inferior de la lnea de
texto
ALIGN=TEXTTOP; alinea la parte superior de la imagen con la parte superior del texto mas
alto de la lnea (en tanto que ALIGN=TOP alinea la imagen con el elemento mas alto de la
lnea)
ALIGN=ABSMIDDLE; alinea el centro de la imagen con el centro del elemento mas grande
de la lnea(ALIGN=MIDDLE; por lo general alinea el centro de la imagen con la lnea base
del texto, no con el centro real)
ING.AlejandroRomero Huayta
Pgina 17
ALIGN=BASELINE; alinea la parte inferior de la imagen con la linea base del texto.
Aunque realiza la misma funcion que ALIGN=BOTTOM, ALIGN=BASELINE es un
nombre mas descriptivo.
ALIGN=ABSBOTTOM; alinea la parte inferior del total de la imagen con el elemento mas
bajo de la linea(que puede estar por debajo de la linea base del texto)
He aqu unos ejemplos de aplicacin.
<HTML>
<HEAD>
<TITLE>ALINEACION DE TEXTOS </TITLE>
</HEAD>
<BODY>
<P><IMG ALIGN=TOP SRC=CDROM.GIF> ALIGN=TOP</P>
<P><IMG ALIGN=MIDDLE SRC=CDROM.GIF>ALIGN=MIDDLE</P>
<P><IMG ALIGN=BOTTOM SRC=CDROM.GIF>ALIGN=BOTTOM</P>
<P><IMG ALIGN=TEXTTOP SRC=CDROM.GIF>ALIGN=TEXTTOP</P>
<P><IMG ALIGN=ABSMIDDLE SRC=CDROM.GIF>ALIGN=ABSMIDDLE</P>
<P><IMG ALIGN=BASELINE SRC=CDROM.GIF>ALIGN=BASELINE</P>
<P><IMG ALIGN=ABSBOTTOM SRC=CDROM.GIF>ALIGN=ABSBOTTOM </P>
</BODY>
</HTML>
CONTROL DEL ESPACIO CON RESPECTO A LAS IMGENES
Con la finalidad de ajustar al texto en torno de las imgenes y tambin ajustar el espacio en
blanco alrededor de esa imagen. Para ello utilizaremos los atributos VSPACE y HSPACE
que permiten hacer esos ajustes, ambos toman valores en pxeles.
VSPACE: controla el espacio por arriba y por debajo de la imagen.
HSPACE: controla el espacio a la izquierda y ala derecha..
He aqu un ejemplo.
<HTML>
<HEAD>
<TITLE>ALINEACION DE TEXTOS </TITLE>
</HEAD>
<BODY>
<H1>INSTALACION DE UN DISCO DURO </P> </H1>
ING.AlejandroRomero Huayta
Pgina 18
ING.AlejandroRomero Huayta
Pgina 19
Por ejemplo.
<HTML>
<HEAD>
<TITLE>DELFIN </TITLE>
</HEAD>
<BODY>
<H1>VISUALIZACION DE UN DELFIN </H1>
<BODY background=arroba.jpg
</BODY>
</HTML>
Observacin. En este caso estamos usando el archivo de imagen llamado arroba.jpg como
imagen de fondo del documento.
ARCHIVOS DE SONIDO, VIDEOS Y OTROS ARCHIVOS
Los archivos de sonido y de video son ideales como medios externos en pginas web.
En su pgina web puede usar sonido para hacer anotaciones adicionales al texto, dar un
mensaje de bienvenida de alguien importante en la organizacin o cualquier informacin
extra que no pueda transmitirse mediante palabras o imgenes.
Por otra parte el video puede usarse para ofrecer aun mas informacin que no puedan
transmitir las imgenes fijas(donde la palabra video se refiere a cualquier imagen en
movimiento, codificada en forma digital, tanto de animacin como de archivos de video
reales)
Insercin de archivos de sonido a una pagina web.
Para tal fin se debe tener en cuenta que el archivo de sonido a insertar debe tener la
siguiente extensin tales como: au, aif, wav o mp3, estas extensiones son compatibles con
los diversos navegadores Web
He aqu un ejemplo.
<HTML>
<HEAD>
<TITLE>sonido </TITLE>
</HEAD>
<BODY>
<H1>PROBANDO TIPO DE SONIDO </H1>
ING.AlejandroRomero Huayta
Pgina 20
<EMBED TYPE=application/x-mplayer2>
SRC: indica donde se encuentra el archivo, pero no puede utilizarse solo, necesita la
compaa de otros atributos, concretamente los que definen el tamao de la consola tales
como <WIDTH> que determina el ancho y <HEIGHT> que determina el alto. En caso de
ING.AlejandroRomero Huayta
Pgina 21
omitir los atributos WIDTH y HEIGHT, har que se visualice el reproductor de Windows
media de manera completa
HIDDEN: asume dos valores tales como TRUE, que hace invisible a la consola y el
valor FALSE permite que se visualice la consola, este siempre debe ser el valor por defecto
para este atributo.
que la consola muestre los botones de control tales como Stara, pause, stop, etc.
ejecucin del archivo pulsando con el puntero del ratn en la consola, en lugar de los
botones de la barra de controles Fjate que esto funciona pulsando en el interior de la
ventana superior del Media Player, no en la barra de controles..
VOLUME: sirve para definir el volumen de sonido que habra al ejecutar el archivo,
puede asumir el valor 0 para establecer el mximo volumen y cualquier valor mayor que 0
establece volumen medio.
Tambien se debe tener en cuenta el atributo ALIGN con sus valores TOP, BOTTOM,
CENTER, LEFT, RIGHT, MIDDLE y funcionan igual que con la etiqueta <IMG>, es decir
que no tiene efectos sobre el sonido o la imagen, sino sobre la figura de la consola y su
alineacin con el texto de la pgina.
He aqu un ejemplo completo.
<EMBED TYPE=application/x-mplayer2
SRC=colon.avi
WIDTH=350
HEIGHT=300
AUTOSTART=0
SHOWCONTROLS=1
SHOWSTATUSBAR=1
ING.AlejandroRomero Huayta
Pgina 22
CLICKTOPLAY=1
VOLUME=0
ALIGN=TOP>
CREANDO UNA APLICACIN USANDO IMGENES EXTERNAS, SONIDO Y
VIDEOS CON DIFERENTES EXTENCIONES.
He aqu el ejemplo.
<HTML>
<HEAD>
<TITLE> Ejemplo de archivos de medios </TITLE>
</HEAD>
<BODY>
<H1>Ejemplo de uso de imagenes sonido y videos con diferente formato </H1>
<P><A HREF=..\imagenes\eagle11.gif>
<IMG SRC=..\imagenes\eagle11_small.gif ALT=Haga clic aqui></A> Ejemplo de gif
animado</P>
<p><A HREF=..\imagenes\chpstar5.jpg>
<IMG SRC=..\imagenes\chpstar5_small.gif ALT=De un clic aqui> </A> Ejemplo de
archivo de imagen con formato jpg</p>
<p><A HREF=..\imagenes\dactime.au>
<IMG SRC=..\imagenes\boton_audio.gif ALT=haga clic aqui> </A> Ejemplo de
archivo de sonido con formato AU</p>
<p><A HREF=..\imagenes\Autenticos Decadentes - El Murguero.mp3>
<IMG SRC=..\imagenes\cdrom.gif ALT=De un clic aqui> </A> Ejemplo de archivo de
sonido con formato mp3</p>
<p><A HREF=..\imagenes\THE CRAMBERRIES - DREAMS.mpg>
<IMG SRC=..\imagenes\action.gif ALT=Haga clic aqui> </A> Ejemplo de archivo de
video</p>
</BODY>
</HTML>
CREACION DE TABLAS EN HTML
ING.AlejandroRomero Huayta
Pgina 23
Las tablas constituyen un elemento avanzado de HTML, que permite disponer texto,
imgenes, y otro contenido en filas y columnas, con o sin borde..
Para crea una tabla se usa la etiqueta <TABLE></TABLE> los cuales contienen el cdigo
de la leyenda y despus el contenido de la tabla en si. El atributo mas comn de la etiqueta
<TABLE> son BORDER, ALIGN, etc en caso que no se especifica el valor de BORDER,
entonces por defecto asumir un valor igual a cero.Para crear una tabla se debe tener en
cuenta que toda tabla esta conformado por filas y columnas. Asi por ejemplo para crear una
tabla se empieza por la definicin de la primera fila y sus celdas, despus la segunda fila con
sus celdas y as sucesivamente, las columnas se calculan de manera automtica, segn las
celdas que haya en cada fila.
La creacin de la tabla tiene la siguiente estructura.
<TABLE>
<TR> esta etiqueta permite crear una fila con su respectivo cierre </TR>
<TH>crea una celda de encabezado (permite crear cierto numero de celda) con su respectivo
cierre</TH>
<TD> esta etiqueta permite crear una celda de datos con su respectivo cierre</TD>
Usted puede tener tantas filas como desee y tantas celdas en cada fila como necesite para las
columnas.
He aqu un ejemplo.
<TABLE>
<TR>
<TH>Encabezado</TH>
<TD>datos</TD>
<TD>Datos</TD>
<TD>datos</TD>
</TR>
</TABLE>
Donde la etiqueta <TH> indica una celda de encabezado y la etiqueta<TD> es para la celda
normal dentro de la tabla (TD que significa celda de datos).
La etiqueta <CAPTION> va dentro de la etiqueta <TABLE> justo antes de las filas y
contiene el rotulo de la tabla, finalmente debe tener un cierre que es </CAPTION>.
Ejemplo
ING.AlejandroRomero Huayta
Pgina 24
<TABLE>
<CAPTION> prximo campen</CAPTION>
<TR>
He aqu un ejemplo completo.
<HTML>
<HEAD>
<TITLE>TABLA DE MULTIPLICAR</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION><B>Multiplicacin</b></CAPTION>
<TR>
<TH><BR></TH>
<TH>1</TH>
<TH>2</TH>
<TH>3</TH>
<TH>4</TH>
</TR>
<TR>
<TH>1</TH>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TH>2</TH>
<TD>2</TD>
<TD>4</TD>
<TD>6</TD>
<TD>8</TD>
</TR>
<TR>
ING.AlejandroRomero Huayta
Pgina 25
<TH>3</TH>
<TD>3</TD>
<TD>6</TD>
<TD>9</TD>
<TD>12</TD>
</TR>
<TR>
<TH>4</TH>
<TD>4</TD>
<TD>8</TD>
<TD>12</TD>
<TD>16</TD>
</TR>
</TABLE>
</BODY>
</HTML>
ALINEACION DE TABLAS Y CELDAS
Una vez que ya tenga el diseo bsico de una tabla, es decir con filas, encabezados y datos,
pues puede empezar a refinar el aspecto. La manera de hacerlo es alinear tanto la tabla de la
pgina, como el contenido de las celdas en la tabla.
ALINEACION DE TABLAS.
En forma predeterminada las tablas se despliegan en una lnea aparte, hacia el lado
izquierdo de la pagina y cualquier texto aparece por arriba y por debajo de la tabla.
Sin embargo, mediante el atributo ALIGN se pueden alinear las tablas hacia la derecha o la
izquierda y ajustar el texto a un lado, del mismo modo que se hace con las imgenes.
Con ALIGN=LEFT la tabla se alinea al lado izquierdo y el texto que va despus de la tabla
se alinea entre la tabla y el borde derecho de la pagina con ALIGN=RIGHT se hace lo
mismo pero en orden inverso. Observe la siguiente codificacin
<HTML>
ING.AlejandroRomero Huayta
Pgina 26
<HEAD>
<TITLE>TABLA DE MULTIPLICAR</TITLE>
</HEAD>
<BODY>
<TABLE BORDER ALIGN=RIGHT>
<CAPTION><B>Multiplicacin</b></CAPTION>
<TR>
<TH><BR></TH>
<TH>1</TH>
<TH>2</TH>
<TH>3</TH>
<TH>4</TH>
</TR>
<TR>
<TH>1</TH>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TH>2</TH>
<TD>2</TD>
<TD>4</TD>
<TD>6</TD>
<TD>8</TD>
</TR>
<TR>
<TH>3</TH>
<TD>3</TD>
<TD>6</TD>
<TD>9</TD>
<TD>12</TD>
</TR>
ING.AlejandroRomero Huayta
Pgina 27
<TR>
<TH>4</TH>
<TD>4</TD>
<TD>8</TD>
<TD>12</TD>
<TD>16</TD>
</TR>
</TABLE>
<H1>Tabla con alineacin</H1>
<P>Este es un pequeo ejemplo de una tabla con texto, donde la tabla se alinea a la
izquierda y el texto a la derecha de la pgina</P>
</BODY>
</HTML>
ALINEACION DE CELDAS.
Una vez que tenga las filas , las celdas en su lugar y la tabla en su lugar debidamente
alineada en la pagina, puede alinear los datos de cada celda, para lograr el mejor efecto
segun el contenido de la tabla, para esto debemos asignar los siguientes valores al atributo
ALIGN, tales como LEFT(define si los datos de la celda van alineados con el margen
izquierdo de la celda),RIGHT(alinea los datos de la celda con el margen derecho de la
celda), CENTER(alinea los datos al centro de la celda ).
El atributo VALIGN define la alineacin vertical de los datos dentro de la celda, lo que
significa que los datos se alinean hacia la parte superior de la celda, para esto el atributo
VALIGN asumir los siguientes valores de acuerdo a la circunstancias(TOP, BOTTOM,
MIDDLE).
De forma predeterminada, el contenido de las celdas de encabezado va centrado tanto en
sentido horizontal como vertical; las celdas de datos se alinean a la izquierda en lo
horizontal y centrado en lo vertical.
Se puede anular los valores predeterminados de toda una fila, mediante el atributo ALIGN o
VALIGN de la etiqueta <TR> como en este ejemplo.
<TR ALIGN=CENTER VALIGN=TOP>
la alineacion global de una fila en celdas individuales se puede anular con el atributo
ALIGN en la etiqueta <TD> o <TH>
ING.AlejandroRomero Huayta
Pgina 28
ING.AlejandroRomero Huayta
Pgina 29
</BODY>
</HTML>
El siguiente ejemplo enlaza imgenes en las celdas de datos.
<HTML>
<HEAD>
<TITLE>ALINEACION_DE_CELDAS</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH>Gente</TH>
<TH>Animales</TH>
<TH>Otros</TH>
</TR>
<TR>
<TD ALIGN=CENTER VALIGN=CENTER><IMG SRC=..\Ejemplo48\bevis.gif></TD>
<TD ALIGN=CENTER VALIGN=CENTER><IMG
SRC=..\Ejemplo48\conejo.gif></TD>
<TD ALIGN=CENTER VALIGN=CENTER><IMG SRC=..\tabla\asmarble2.gif></TD>
</TR>
<TR>
<TD ALIGN=CENTER VALIGN=CENTER><IMG SRC=..\ tabla \BILLY.gif></TD>
<TD ALIGN=CENTER VALIGN=CENTER><IMG SRC=..\ tabla \DELFIN.gif></TD>
<TD ALIGN=CENTER VALIGN=CENTER><IMG SRC=..\ tabla
\asmarble4.gif></TD>
</TR>
<TR>
<TD ALIGN=CENTER VALIGN=CENTER><IMG SRC=..\ tabla \BOBO.gif></TD>
<TD ALIGN=CENTER VALIGN=CENTER><IMG SRC=..\ tabla
\DRAGON.gif></TD>
ING.AlejandroRomero Huayta
Pgina 30
ING.AlejandroRomero Huayta
Pgina 31
<TITLE>ALINEACION_DE_CELDAS</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Puntaje</TH>
</TR>
<TR>
<TH>JUlIO</TH>
<TH>ERICK</TH>
</TR>
<TR>
<TD ALIGN=CENTER>32</TD>
<TD ALIGN=CENTER>37</TD>
</TR>
</TABLE>
</BODY>
</HTML>
El resultado debe ser igual a:
Las celdas siempre abarcan hacia abajo y a la derecha. Asi para crear una celda que abarque
varias columnas, coloque el atributo COLSPAN en la celda del extremo izquierdo y asi la
celda va a abarcar varias filas, coloque el atributo ROWSPAN en la celda superior. El
siguiente ejemplo muestra una celda que abarca varias filas
El resultado debe ser igual a:
ING.AlejandroRomero Huayta
Pgina 32
Ahora realicemos un ejercicio un poco mas complicado, la informacin que contiene la tabla
es referente al informe de ventas de un determinado software llamado INFOSOFT
La codificacin es el siguiente.
<HTML>
<HEAD>
<TITLE>celdas_combinadas</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION><B> INFOSOFT.</B></CAPTION>
<TR ALIGN=CENTER>
<TH ROWSPAN=2 COLSPAN=2></TH>
<TH COLSPAN=2>VERSIONES ANTERIORES</TH>
<TH ROWSPAN=2>NUEVA VERSION</TH>
</TR>
<TR ALIGN=CENTER>
<TH>V 1.0</TH>
<TH>V 2.0</TH>
</TR>
<TR ALIGN=CENTER>
<TH ROWSPAN=2>MODELOS</TH>
<TD>A1-XTREME</TD>
<TD>10</TD>
<TD>12</TD>
<TD ROWSPAN=2>6</TD>
</TR>
<TR ALIGN=CENTER>
<TD>A2-BASIC</TD>
<TD>8</TD>
<TD>13
</TD>
</TR>
<TR ALIGN=CENTER>
<TH COLSPAN=2>NIVEL</TH>
ING.AlejandroRomero Huayta
Pgina 33
<TD>NORMAL</TD>
<TD>AGRESIVO</TD>
<TD>SUPER-AGRESIVO</TD>
</TR>
</TABLE>
</BODY>
</HTML>
El resultado debe ser igual a:
He aqu otro ejemplo con color de fondo e imgenes para cada celda
<HTML>
<HEAD>
<TITLE>TABLERO</TITLE>
</HEAD>
<BODY>
<TABLE BGCOLOR=#FFFFF WIDTH=50%>
<TR ALIGN=CENTER>
<TD BGCOLOR=#00000 WIDTH=33%><IMG SRC=..\tablas\circulorojo.gif></TD>
<TD WIDTH=33%><IMG SRC=..\ tablas\circulorojo.gif></TD>
<TD BGCOLOR=#00000 WIDTH=33%><BR></TD>
<TD WIDTH=33%><IMG SRC=..\tablas\circulorojo.gif></TD>
</TR>
<TR ALIGN=CENTER>
<TD><IMG SRC=..\tablas\circulonegro.gif></TD>
<TD BGCOLOR=#00000><BR></TD>
<TD><IMG SRC=..\tablas\circulorojo.gif></TD>
<TD BGCOLOR=#00000><IMG SRC=..\tablas\circulonegro.gif></TD>
ING.AlejandroRomero Huayta
Pgina 34
</TR>
<TR ALIGN=CENTER>
<TD BGCOLOR=#00000><BR></TD>
<TD><IMG SRC=..\tablas\circulonegro.gif><BR></TD>
<TD BGCOLOR=#00000><IMG SRC=..\tablas\circulonegro.gif></TD>
<TD><BR></TD>
</TR>
</TABLE>
</BODY>
</HTML>
El resultado debe ser igual a:
Recordar que el atributo CELLPADDING de la etiqueta table permite asignar el espacio que
hay entre el borde de la celda y su contenido
El atributo CELLSPACING, asigna el espacio a toda la tabla, el espaciado de celda
predeterminado es 2.
Para asignar el color de fonde de una tabla, de una fila o de una celda use el atributo
BGCOLOR en las etiquetas <TABLE>, <TR>,<TH>o <TD> al igual que en <BODY> el
color BGCOLOR es un color especificado.
VENTANAS VINCULADAS
Para lograr tal objetivo se debe utilizar el atributo TARGET de la etiqueta <A> y se usa en
siguiente forma:
TARGET=nombre_de_la_ventana
Por lo general, cuando selecciona un vinculo, el contenido de la nueva pagina reemplaza a la
que se encuentra en la ventana del navegador. Entonces el atributo TARGET, permite
indicar al navegador Web que desplegue la informacin sealada por el hipervnculo en una
ventana llamada nombre_de_la_ventana, bsicamente puede darle a la ventana el nombre
que desee, con la salvedad de que el nombre no empiece con subrayado(_).
ING.AlejandroRomero Huayta
Pgina 35
He aqu un ejemplo que consta de cuatro documentos los cuales estan enlazados al primer
docuemneto que a continuacin se describe la codificacion.
Codificacin del primer documento llamado Target1.htm
<HTML>
<HEAD>
<TITLE>USO DE TARGET</TITLE>
</HEAD>
<BODY>
<H1>USO DEL ATRIBUTO TARGET</H1>
<P>
<A HREF=..\tabla\Target2.htm target=Primera ventana>Abrir</A>
una nueva ventana llamada Primera ventana.<BR>
<A HREF=..\ tabla \Target3.htm target=segunda ventana>Abrir</A>
una nueva ventana llamada Segunda ventana.</P>
<P>
<A HREF=..\ tabla \Target4.htm target=Primera ventana>Cargar</A>
un nuevo texto dentro de Primera ventana.</P>
</P>
</BODY>
</HTML>
La codificacion del segundo documento llamado Target2.htm es :
<HTML>
<HEAD>
<TITLE>PRIMERA VENTANA</TITLE>
</HEAD>
<BODY>
<H1>PRIMERA VENTANA</H1>
</BODY>
</HTML>
La codificacin del tercer documento llamado Target.htm es:
<HTML>
<HEAD>
<TITLE>SEGUNDA VENTANA</TITLE>
ING.AlejandroRomero Huayta
Pgina 36
</HEAD>
<BODY>
<H1>SEGUNDA VENTANA</H1>
</BODY>
</HTML>
la codificacin del cuarto documento llamado Target4.htm
<HTML>
<HEAD>
<TITLE>PRIMERA VENTANA</TITLE>
</HEAD>
<BODY>
<H1>PRIMERA VENTANA</H1>
<P>Es tiempo de ver algo de texto....</P>
</BODY>
</HTML>
El resultado final a mostrarse debe ser igual a:
Pgina 37
Cuando se usa TERGET con vnculos se encontrara con una situacin donde todos los
hipervnculos o la mayora a puntan a la misma ventana; en especial cuando se usan marcos.
En tales casos, en lugar de insertar el atributo TARGET en cada etiqueta<A> puede usar la
etiqueta<BASE> para definir globalmente el destino de los vnculos de esa pgina web.
La etiqueta <BASE> se usa en la siguiente forma:
<BASE TARGET=nombre_de_la_ventana>
MARCOS EN HTML
Con los marcos puede crear pginas web que se sientan y se vean por completo diferentes de
otras pginas con tablas de contenido, cintillos, notas al pie y recuadros.
Cuando se crean sitios web con marcos, de hecho una sola pantalla consta de varios
documentos, que interactan entre si. Para crear el documento de definicin de marcos se
usa la etiqueta <FRAMESET>, cuando en un documento HTML se usa esta etiqueta yo no
se debe utilizar la etiqueta<BODY> ambos son mutuamente excluyentes. Ademas el
documento de definicin de marcos no deben contener ninguna otra etiqueta, ni de formato
o hipervnculos, ni ningn otro texto.
La etiqueta <FRAMESET> permite crear marcos haciendo uso de los atributos que son:
COLS y ROWS.El primero de estos tiene el siguiente formato.
<FRAMESET COLS =ancho de columna, ancho de columna, ancho de columna,>
El atributo COLS, le indica al navegador que divida la pantalla en una serie de marcos
verticales, cuyo ancho esta definido por el valor de ancho de columna, separado por comas.
El ancho de cada marco puede definirse en tres formas: explcitamente en nmeros de
pxeles, como porcentaje del ancho total o con un asterisco(*). Cuando se usa el asterisco, el
navegador asigna todo el espacio posible al marco especificado.
La etiqueta <FRAME> permite asociar un documento HTML con cada uno de los marcos
creados y tiene la siguiente forma.
<FRAME SRC=nombre_documento>, para cada marco creado en la etiqueta
<FRAMESET> se debe usar la correspondiente etiqueta<FRAME> como se muestra en los
siguientes ejemplos.
Por ejemplo la etiqueta <FRAMESET> crea un documento HTML con 3 marcos verticales.
<HTML>
ING.AlejandroRomero Huayta
Pgina 38
<head>
<title>marcos</TITLE>
</head>
<FRAMESET COLS=100,50%,*>
<FRAME SRC=>
<FRAME SRC=>
<FRAME SRC=>
</FRAMESET>
</HTML>
Donde el primer marco vertical es de100 pxeles de ancho, el segundo es de 50% del ancho
de la pantalla y el tercero ocupa todo el espacio restante.
Cuando disee paginas web que se vern en pantallas de diferentes tamaos, tenga cuidado
con el uso de la definicin de tamao absoluto de los marcos .Siempre que use un tamao
absoluto, asegurese que uno de los otros marcos este definido con el asterisco, para que no
ocupe todo el espacio restante en la pantalla.
El atributo ROWS, funciona del mismo modo que COLS, solo que divide la pantalla en
marcos horizontales, en lugar de verticales, por ejemplo para dividir la pantalla en dos
marcos de la misma altura se debe codificar de la siguiente manera.
<thml>
<head>
<title>marcos</TITLE>
</head>
<frameset ROWS=*,*,*>
<FRAME MARGINHEIGHT=12 NORESIZE=YES SRC= DOCUMENTO 1>
<FRAME SRC=DOCUMENTO 2>
<FRAME SRC=DOCUMENTO 2>
</FRAMESET>
</html>
En este ejemplo hemos creado un conjunto de marcos horizontales de la misma altura
La siguiente tabla muestra los atributos de la etiqueta <FRAME>
ATRIBUTOS
SCROLLING
ING.AlejandroRomero Huayta
VALOR
AUTO(valor
DESCRIPCION
En forma predeterminada el
Pgina 39
predeterminado)
SCROLLING
NO
desplazar el documento
Esto hace que se desactiven
las barras de desplazamiento
SCROLLING
YES
del marco
Esto indica que se crean las
barras de desplazamiento ya
sea que se necesite o no
En forma predeterminada los
NORESIZE
PIXELES
NORESIZE
Permite ajustar el margen el
en la parte superior e inferior
del documento dentro del
MARGINWIDTH
PIXELES
marco
Permite ajustar el margen
izquierdo y derecho del
marco en un numero
indicado de pxeles
ING.AlejandroRomero Huayta
Pgina 40
<TITLE>Marcos_complejos</TITLE>
</HEAD>
<FRAMESET ROWS="120,*,65">
<FRAME SRC="..\marco\encabezado.html">
<FRAMESET COLs="160,*">
<FRAME SRC="..\ marco \inicio.html" NAME="Indice">
<FRAME SRC="..\ marco \bienvenida.html" NAME="Presentaciones">
</FRAMESET>
<FRAME SRC="..\ marco \advertencia.html">
</FRAMESET>
</HTML>
Seguidamente creamos el documento llamado encabezado.html
<HTML>
<HEAD>
<TITLE>Tienda virtual</TITLE>
</HEAD>
<BODY background="..\marco\plasma.jpg">
<H1 ALIGN="Center"><IMG ALIGN="Center" SRC="..\Ejemplo48\billy.gif">Grafos
Virtual<IMG ALIGN="Center" SRC="..\marco\bevis.gif" Width=60 Height=95></H1>
</BODY>
</HTML>
Creando el documento llamado inicio.html
<HTML>
<HEAD>
<TITLE>Tienda virtual</TITLE>
</HEAD>
<BODY background="..\Ejemplo48\plasma.jpg">
<H3 ALIGN="CENTER">Indice</H3>
<hr>
<P><img ALIGN="Center"SRC="..\marco\spotting.gif" Width=20 Height=20><A
HREF="..\ marco \Catalogo.htm" TARGET="Presentaciones">Ver catlogo</A><br>
<img ALIGN="Center"SRC="..\ marco\spotting.gif" Width=20 Height=20><A HREF="..\
marco \Ordenar.htm" TARGET="Presentaciones">Ordenar</A><br>
ING.AlejandroRomero Huayta
Pgina 41
DESCRIPCION
Obliga aque el docuemneto referido en la
etiqueta <A> se cargue en una nueva
TARGET=_self
ING.AlejandroRomero Huayta
Pgina 42
TARGET=_parent
TARGET=_top
ING.AlejandroRomero Huayta
Pgina 43
ING.AlejandroRomero Huayta
Pgina 44
Desde ya entindase, que los formularios no permiten enviar informacin a lado del
servidor.
Para crear un formulario se utiliza la etiqueta <FORM></FORM>,dentro de las partes de
apertura y cierre del formulario se encuentran cada uno de los elementos de los formularios,
ademas de cualquier otro contenido como(parrafos,encabezados, tablas, etc). Usted puede
colocar en un misma documento de HTML tantos formularios como desee, pero no los
puede anidar, esto es no puede insertar una etiqueta<FORM> dentro de otra.
La parte de apertura de FORM por lo general incluye dos atributos que son:
ACTION: Indica que procesara el formulario del lado del servidor(Visualizar un
determinado documento)
METHOD: Establece un mtodo de envi de datos del formulario .
He aqu un pequeo ejemplo.
<HTML>
<HEAD>
<TITLE>Formulario_1</TITLE>
</HEAD>
<BODY>
<H2>Quin es usted?</H2>
<FORM METHOD="POST" ACTION="..\ formularios\miscript.cgi">
<P>Ingrese su nombre: <INPUT NAME="Nombre"></P>
<P><INPUT TYPE="submit"></P>
</FORM>
</BODY>
</HTML>
Observaciones.
En la codificacin se observa la etiqueta <INPUT>, que permite establece un elemento para
el formulario por lo general lleva dos atributos.
El atributo TYPE: Indica el tipo de elemento para el formulario,dado que existen varios
tipos como por ejemplo text, para campos de texto,radio, para botones de accion,
checkbox, para casillas de verificacin, Password, para campos con contrasea,
reset, que crea un botn de comando que permite borrar las cajas de texto del
formulario, submit, que crea un botn de comando de envi de datos, cuyo nombre
por defecto es enviar consulta.
ING.AlejandroRomero Huayta
Pgina 45
ING.AlejandroRomero Huayta
Pgina 46
<HEAD>
<TITLE>Formulario_entrada_de _texto</TITLE>
</HEAD>
<BODY>
<H2>Ejemplo de entrada de texto</H2>
<FORM METHOD=POST ACTION="htttp://www.mcp.com/script/miscript">
<P>Ingrese su nombre: <INPUT TYPE="TEXT" NAME="nombre"><br>
<P>Ingrese su edad: <INPUT TYPE="TEXT" NAME="edad" SIZE="3"
MAXLENGTH="3"><br>
<P>Ingrese su direcccin: <INPUT TYPE="TEXT" NAME="direccion" SIZE="70">
<P>Ingrese su clave: <INPUT TYPE=password NAME="clave">
</P>
</FORM>
</BODY>
</HTML>
Observacin: En este ejemplo no hemos creado los botones de envi eso significa que
despus de ingresar la clave de usuario deber pulsar la tecla enter para enviar los datos.
BOTON DE OPCIONES
Los botones de opcin indican una lista de elementos de los cuales solo puede seleccionar se
uno, esto es al seleccionar una de las opciones se selecciona la que estubo activado antes.
Para crear los botones de opciones se debe establecer radio como valor del atributo TYPE,
antes de establecer la etiqueta <INPUT> debe establecer el <OL>.
En forma predeterminada, los botones de opcion no estan seleccionados, pero usted puede
determinar el boton predeterminado con el atributo CHECKED.
He aqu un ejemplo.
<HTML>
<HEAD>
<TITLE>Formulario_con_opciones</TITLE>
</HEAD>
<BODY>
<H2>Ejemplo de botones de opcin</H2>
<FORM METHOD=POST ACTION="htttp://www.mcp.com/script/miscript">
<OL>
<LI><INPUT TYPE="radio" NAME ="Tipo" VALUE="Animal" CHECKED>Animal<br>
ING.AlejandroRomero Huayta
Pgina 47
<OL>
<LI><INPUT TYPE="radio" NAME ="Animal" VALUE="Perro"> Perro
<LI><INPUT TYPE="radio" NAME ="Animal" VALUE="Conejo" CHECKED> Conejo
<LI><INPUT TYPE="radio" NAME ="Animal" VALUE="Loro"> Loro
</OL>
<LI><INPUT TYPE="radio" NAME ="tipo" VALUE="vegetal" >Vegetal
<LI><INPUT TYPE="radio" NAME ="tipo" VALUE="mineral"> Mineral
</OL>
</FORM>
</BODY>
</HTML>
CASILLAS DE VERIFICACION
Las casillas de verificacin permiten elegir varios elementos de una lista. Cada casilla puede
estar activado o desactivado (el valor predeterminado es desactivado). Para crear casillas de
verificacin se usa checkbox, como valor del atributo TYPE. Para activar las casillas de
manera automatica, se debe usar el atributo CHECKED.
Por ejemplo tenemos la siguiente codificacin usando los botones de opcion , seleccin y
botones de envio de datos.
<HTML>
<HEAD>
<TITLE>Formulario_complejo</TITLE>
<BODY BACKGROUND="..\Graficos\Papel.jpg">
<H1 ALIGN=CENTER><U>CENSUS S.A.</U></H1>
<P>Bienvenidos al primer censo de Preferencias de la TV</P>
<P>Pulse sobre el botn <STRONG>Enviar</STRONG> al terminar el censo</P>
<HR>
<FORM METHOD=POST ACTION="htttp://www.mcp.com/script/miscript">
<P><STRONG>Nombre: </STRONG><INPUT TYPE="TEXT" NAME="Nombres"></P>
<P><STRONG>Apellidos: </STRONG><INPUT TYPE="TEXT"
NAME="Apellidos"></P>
<P><STRONG>Edad: </STRONG><INPUT TYPE="TEXT" NAME="Edad"></P>
<P><STRONG>Ciudad de residencia: </STRONG><INPUT TYPE="TEXT"
NAME="Ciudad"></P>
<br>
ING.AlejandroRomero Huayta
Pgina 48
<P><STRONG>Sexo:</STRONG>
<INPUT TYPE="radio" NAME="Sexo" VALUE="Femenino"> Femenino
<INPUT TYPE="radio" NAME="Sexo" VALUE="Masculino"> Masculino
</P>
<P><STRONG>Programas de su preferencia:</STRONG><br>
<INPUT TYPE="checkbox" NAME="P1">La alegra del medio da<br>
<INPUT TYPE="checkbox" NAME="P2">Buenos das Per<br>
<INPUT TYPE="checkbox" NAME="P3">America noticias<br>
<INPUT TYPE="checkbox" NAME="P4">Utilsima<br>
<INPUT TYPE="checkbox" NAME="P5">1000 Oficios<br>
<INPUT TYPE="checkbox" NAME="P6">Pedro el escamoso<br>
<INPUT TYPE="checkbox" NAME="P7">Magaly TV<br>
<INPUT TYPE="checkbox" NAME="P8">Mil disculpas<br>
<INPUT TYPE="checkbox" NAME="P9">Vale la pena soar<br>
<INPUT TYPE="checkbox" NAME="P10">Quien quiere ser millonario<br>
</P>
<P ALIGN=CENTER>
<INPUT TYPE="SUBMIT" VALUE="Enviar sus preferencias">
<INPUT TYPE="RESET" VALUE="Limpiar el formulario">
</P>
</FORM>
<HR>
</BODY>
</HTML>.
INSERCIN DE IMAGENES
Las imgenes en los formularios se comportan del mismo modo que las mapas de imgenes,
cuando se hace clic en alguna arte de la imagen el formulario se enva al servidor. Entonces
para lograr tal objetivo se debe asignar el valor IMAGE al atributo TYPE junto con el
atributo SRC, este permite establecer la direccin donde se encuentra la imagen por
ejemplo.
<INPUT TYPE=IMAGE SRC=grafico.gif NAME=map>
BOTON DE SELECION
ING.AlejandroRomero Huayta
Pgina 49
Los botones de selecciones permiten al usuario eligir uno o varios elementos de un menu o
lista desplegable. Son similares a los botones de opcion y las casillas de verificacin, pero
en otro formato.
Para crear los botones de seleccin se utiliza la etiqueta <SELECT> y cada opcin de la lista
se establece con la etiqueta <OPTION>. La etiqueta <SELECT > lleva el atributo NAME
para contener su valor cuando se enva los datos del formulario. Recordar que la etiqueta
<SELECT> y <OPTION>funcionan en forma semejante a las listas, ya que todas las
opciones se encuentran entre las partes de apertura y cierre de la etiqueta <SELECT> donde
cada etiqueta empieza con una etiqueta <OPTION> que no tiene cierre. Por ejemplo observe
la siguiente codificacin.
<HTML>
<HEAD>
<TITLE>Formulario_con_selecciones</TITLE>
<H1 ALIGN=CENTER><U>Ejemplo de selecciones</U></H1>
<FORM METHOD=POST ACTION="htttp://www.mcp.com/script/miscript">
<P>Seleccione un color</P>
<SELECT NAME=colores>
<OPTION>Negro
<OPTION>Amarillo
<OPTION>Azul
<OPTION>Blanco
<OPTION>Rojo
</SELECT></P>
</FORM>
</BODY>
</HTML>
Tambin podemos hacer que algn elemento de la lista este seleccionado automticamente
para esto se debe de establecer el atributo SELECTED que es parte de la etiquete
<OPTION>. En forma predeterminada, las selecciones actuan como botones de opcion, solo
puede heber un elemento seleccionado a la vez . Pero este comportamiento se puede cambiar
con el atributo MULTILPE, que es parte de la etiqueta <SELECT>. Por ejemplo
<HTML>
<HEAD>
<TITLE>Formulario_con_selecciones</TITLE>
ING.AlejandroRomero Huayta
Pgina 50
El atributo NAME: indica el nombre que se enviara cuan se enva los datos a travs del
formulario.
ING.AlejandroRomero Huayta
Pgina 51
<HEAD>
<TITLE>Formulario_con_areas_de_texto</TITLE>
<H1 ALIGN=CENTER><U>Ejemplo de Areas de texto</U></H1>
<FORM METHOD=POST ACTION="htttp://www.mcp.com/script/miscript">
<P>Escriba su comentario</P>
<TEXTAREA NAME="Comentario" ROWS="10" COLS="40">
</TEXTAREA>
</FORM>
</BODY>
</HTML>
Nombre del color
Cdigo hex
BLANCO
#FFFFFF
#FFFFFF
AZUR
#F0FFFF
#FFFFFF
CREMA
#F5FFFA
#FFFFFF
NIEVE
#FFFAFA
#FFFFFF
MARFIL
#FFFFF0
#FFFFFF
BLANCO FANTASMA
#F8F8FF
#FFFFFF
BLANCO FLORAL
#FFFAF0
#FFFFFF
AZUL ALICIA
#F0F8FF
#FFFFFF
CIAN CLARO
#E0FFFF
#CCFFFF
MELN VERDE
#F0FFF0
#FFFFFF
AMARILLO CLARO
#FFFFE0
#FFFFFF
CONCHA
#FFF5EE
#FFFFFF
SONROJO LAVANDA
#FFF0F5
#FFFFFF
HUMO BLANCO
#F5F5F5
#FFFFFF
ENCAJE ANTIGUO
#FDF5E6
#FFFFFF
SEDA DE MAZ
#FFF8DC
#FFFFCC
LINO
#FAF0E6
#FFFFFF
#FFFFCC
GASA LIMN
#FFFACD
#FFFFCC
BEIGE
#F5F5DC
#FFFFCC
LAVANDA
#E6E6FA
#CCCCFF
BATIDO DE PAPAYA
#FFEFD5
#FFFFCC
ROSA BRUMOSA
#FFE4E1
#FFCCCC
BLANCO ANTIGUO
#FAEBD7
#FFFFCC
BLANCO ALMENDRA
#FFEBCD
#FFFFCC
SOPA
#FFE4C4
#FFFFCC
TURQUESA PLIDO
#AFEEEE
#99FFFF
MOCASN
#FFE4B5
#FFCCCC
ING.AlejandroRomero Huayta
Pgina 52
GAINSBORO
#DCDCDC
#CCCCCC
SOPLIDO MELOCOTN
#FFDAB9
#FFCCCC
BLANCO NAVAJO
#FFDEAD
#FFCC99
#EEE8AA
#FFFF99
TRIGO
#F5DEB3
#FFCCCC
POLVO AZUL
#B0E0E6
#CCCCFF
AGUAMARINA
#7FFFD4
#66FFCC
GRIS CLARO
#D3D3D3
#CCCCCC
ROSA
#FFC0CB
#FFCCCC
AZUL CLARO
#ADD8E6
#99CCFF
CARDO
#D8BFD8
#CCCCCC
ROSA CLARO
#FFB6C1
#FFCCCC
#87CEFA
#99CCFF
VERDE PLIDO
#98FB98
#99FF99
#B0C4DE
#99CCCC
CAQUI
#F0D58C
#FFCC99
AZUL CIELO
#87CEEB
#99CCFF
AGUA
#00FFFF
#00FFFF
CIAN
#00FFFF
#00FFFF
PLATA
#C0C0C0
#CCCCCC
CIRUELA
#DDA0DD
#CC99CC
GRIS
#BEBEBE
#CCCCCC
VERDE CLARO
#90EE90
#99FF99
VIOLETA
#EE82EE
#FF99FF
AMARILLO
#FFFF00
#FFFF00
TURQUESA
#40E0D0
#33CCCC
MADERA FORNIDA
#DEB887
#CCCC99
AMARILLO VERDE
#ADFF2F
#99FF33
BRONCEADO
#D2B48C
#CCCC99
TURQUESA MEDIO
#48D1CC
#33CCCC
SALMN CLARO
#FFA07A
#FF9966
AGUAMARINA MEDIO
#66CDAA
#66CC99
GRIS OSCURO
#A9A9A9
#999999
ORQUDEA
#DA70D6
#CC66CC
#8FBC8F
#99CC99
#00BFFF
#00CCFF
MARRN ARENA
#F4A460
#FF9966
DORADO
#FFD700
#FFCC00
#00FA9A
#00FF99
CAQUI OSCURO
#BDB76B
#CCCC66
ACIANO AZUL
#6495ED
#6699FF
ROSA CALIENTE
#FF69B4
#FF66CC
ING.AlejandroRomero Huayta
Pgina 53
SALMN OSCURO
#E9967A
#FF9966
TURQUESA OSCURO
#00CED1
#00CCCC
VERDE PRIMAVERA
#00FF7F
#00FF66
CORAL CLARO
#F08080
#FF9999
MARRN ROSADO
#BC8F8F
#CC9999
SALMN
#FA8072
#FF9966
CHARTREUSE
#7FFF00
#66FF00
PRPURA MEDIO
#9370DB
#9966CC
VERDE CSPED
#7CFC00
#66FF00
AZUL DODGER
#1E90FF
#3399FF
VERDE AMARILLO
#9ACD32
#99CC33
#DB7093
#CC6699
#7B68EE
#6666FF
ORQUDEA MEDIO
#BA55D3
#CC66CC
CORAL
#FF7F50
#FF6666
AZUL CADETE
#5F9EA0
#669999
#20B2AA
#339999
DORADO ALAMBRE
#DAA520
#CC9933
NARANJA
#FFA500
#FF9900
#778899
#669999
FUCSIA
#FF00FF
#FF00FF
MAGENTA
#FF00FF
#FF00FF
#3CB371
#33CC66
PER
#CD853F
#CC9933
AZUL ACERO
#4682B4
#3399CC
AZUL REAL
#4169E1
#3366CC
GRIS PIZARRA
#708090
#669999
TOMATE
#FF6347
#FF6633
NARANJA OSCURO
#FF8C00
#FF9900
AZUL PIZARRA
#6A5ACD
#6666CC
VERDE LIMA
#32CD32
#33CC33
LIMA
#00FF00
#00FF00
ROJO INDIO
#CD5C5C
#CC6666
ORQUDEA OSCURO
#9932CC
#9933CC
AZUL VIOLETA
#8A2BE2
#9933FF
ROSA INTENSO
#FF1493
#FF0099
#B8860B
#CC9900
CHOCOLATE
#D2691E
#CC6633
CIAN OSCURO
#008B8B
#009999
GRIS DIFUSO
#696969
#666666
GRIS ACEITUNA
#6B8E23
#669933
VERDE MAR
#2E8B57
#339966
ING.AlejandroRomero Huayta
Pgina 54
VERDE CERCETA
#008080
#009999
VIOLETA OSCURO
#9400D3
#9900CC
#C71585
#CC0066
NARANJA ROJO
#FF4500
#FF3300
ACEITUNA
#808000
#999900
SIENA
#A0522D
#996633
#483D8B
#333399
#556B2F
#666633
VERDE BOSQUE
#228B22
#339933
CARMES
#DC143C
#CC0033
AZUL
#0000FF
#0000FF
MAGENTA OSCURO
#8B008B
#990099
#2F4F4F
#336666
MARRN MONTURA
#8B4513
#993300
MARRN
#A52A2A
#993333
LADRILLO REFRACTARIO
#B22222
#993333
PRPURA
#800080
#990099
VERDE
#008000
#009900
ROJO
#FF0000
#FF0000
AZUL MEDIO
#0000CD
#0000CC
NDIGO
#4B0082
#330099
AZUL MEDIANOCHE
#191970
#000066
VERDE OSCURO
#006400
#006600
AZUL OSCURO
#00008B
#000099
AZUL MARINO
#000080
#000099
ROJO OSCURO
#8B0000
#990000
GRANATE
#800000
#990000
NEGRO
#000000
#000000
ING.AlejandroRomero Huayta
Pgina 55
ING.AlejandroRomero Huayta
Pgina 56