Manual Instructivo de HTML

CURSO: TECNOLOGIA DE PROGRAMACION
MANUAL INSTRUCTIVO DE HTML VS 4.0

HTML.(HyperText Markup Languaje), es un lenguaje que todos los programas
navegadores usan para presentar informacin en la World Wide Web(WWW).
Para su construccin hace uso de etiquetas encerrados en un par de parntesis angulares; el
texto incluido dentro de los parntesis nos da una explicacin de la utilidad de la etiqueta.
As por ejemplo la etiqueta <TABLE>, nos permite definir una tabla.
Las etiquetas pueden incluir una serie de atributos o paramentos, en su mayora opcionales,
que nos permitirn definir diferentes posibilidades o caractersticas de la misma, por
ejemplo la etiqueta <TABLE border =2 > nos permitir definir una tabla con borde de
tamao 2.
El manejo de etiquetas nos permitir definir la estructura lgica del documento HTML.
Para crear documentos HTML necesitamos el siguiente.
Un procesador de texto, para escribir y editar el cdigo HTML.
Ejemplo el Bloc de Notas o el EditPLus
Un navegador feb, el cual se encargara de interpretar el cdigo HTML de nuestro
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
ESTRUCTURA DE UN DOCUMENTO HTML

La estructura bsica de un documento HTML es el siguiente.
<HTML>indica el inicio del documento
<HEAD>indica el inicio de la cabecera
<TITLE> indica el inicio del titulo del documento
ING.AlejandroRomero Huayta
Pgina 1
</TTTLE> indica el final del titulo del documento

</HEAD> indica el final de la cabecera
<BODY> indica el inicio del cuerpo del documento, es donde incluiremos las distintas
instrucciones del lenguaje junto con el contenido en si de nuestra pagina Web
</BODY> indica el final del cuerpo del documento
</HTML>
Atributos de <BODY>.
El atributo background, nos permite mostrar una imagen como fondo de nuestro
documento HTML; si la imagen no rellena todo el fondo del documento, esta ser
reproducida tantes veces como sea necesario hasta completar todo el fondo.
El atributo bgcolor=, nos permite definir un color de fondo para nuestro documento
HTML.
El atributo bgcolor va acompaado del atributo text=, permite dar un color de texto del
documento HTML.
DEFINICIN DE ETIQUETAS UTILIZADOS EN HTML.
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>
Pgina 2
<H4>cuerpo</H4>
<H3>Elementos del lenguaje II </H3>
<H4>Listas</H4>
<H4>Hiperenlaces</H4>
<H2>Apndice</H2>
</BODY>
</HTML>
LOS PARRAFOS. Los prrafos se representan mediante la etiqueta prrafo que
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>
LAS LISTAS. Nos permiten representar elementos en forma de lista dentro de
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>
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>
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:
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
CDIGOS DE LOS DIFERENTES COLORES USADOS EN HTML

NOMBRE
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
CREACION DE VINCULOS EN HTML

I. CREANDO VINCULOS ENTRE UN TEXTO Y UN DOCUMENTO
Pgina 6
El vnculo, nos permite enlazar un determinado documento al documento principal de

HTML. Para poder crear vnculos necesitamos tener en cuenta lo siguiente.
a) El nombre del archivo con el que se quiere establecer vnculos
b) El texto que servir de punto de activacin; es decir, el texto que en el navegador ira
resaltado y el que seleccionan los electores para ejecutar el vinculo.
La sintaxis es el siguiente.
<A href. =nombre del documento>nombre de texto y/o imagen</A>
Donde.
La etiqueta<A></A>, permite crea vnculos entre un texto, imagen y un documento
HTML.
href es el atributo de la etiqueta A, el cual permite especificar el nombre del documento
con el que queremos vincular un determinado texto.
nombre de texto, es el texto descriptivo y/o imagen que se visualizara en el documento en
creacin.
Ejemplo.
Creando el primer documento HTML llamado Primera.html
<HTML>
<HEAD>
<TITLE>HISTORIA DELAS COMPUTADORAS: PRIMERA GENERACIN</TITLE>
</HEAD>
<BODY>
<H1>PRIMERA GENERACIN</H1>
<P>En esta generacin haba un gran desconocimiento de las capacidades
de las computadoras, puesto que se realizaban un estudio en esta poca que
determin que con veinte computadoras se saturar el mercado de los Estados
Unidos en el campo de procesamiento de datos.</P>
<H1>SEGUNDA GENERACIN</H1>
<P>Cerca de la dcada de 1960, las computadoras seguan
evolucionando, se reduca su tamao y creca su capacidad de
procesamiento. Tambin en esta poca se empez a definir la
forma de comunicarse con las computadoras, que reciba el
nombre de programacin de sistemas.</P>
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
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
ESTILOS LOGICOS EN HTML

Las etiquetas de estilos lgicos indican como se usa el texto determinado; estas etiquetas son
similares a las etique tas de elementos comunes de prrafos y encabezados.
Las etiquetas de estilo lgico no indican como formatear el texto, si no como se va usar en el
documento. Por lo tanto las etiquetas de estilo lgico indica la forma como se usa el texto
(resaltado, citas, definicin). Las etiquetas de estilo lgico son los siguientes.
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.
Pgina 10
La etiqueta <S>, establece el tachado a un texto.

La etiqueta <BIG>, establece el tamao ms grande a un texto
La etiqueta <SMALL>, permite establecer un tamao mas pequeo a un texto.
La etiqueta <SUB>, establece un subndice a un texto.
LA etiqueta <SUP>, permite establecer un exponente sobre un texto. A continuacin se
presenta un ejercicio de aplicacin referente a estilos fsicos.
<HTML>
<HEAD>
<TITLE> Estilos fisicos </TITLE>
</HEAD>
<BODY>
<P>La <I>fuente de alimentacin</I> convierte la AC a DC. </P>
<P>La <B>fuente de alimentacin</B> convierte la AC a DC. </P>
<P>La <TT>fuente de alimentacin</TT> convierte la AC a DC. </P>
<P>La <U>fuente de alimentacin</U> convierte la AC a DC. </P>
<P>La <S>fuente de alimentacin</S> convierte la AC a DC. </P>
<P>La <BIG>fuente de alimentacin</BIG> convierte la AC a DC. </P>
<P>La <SMALL>fuente de alimentacin</SMALL> convierte la AC a DC. </P>
<P>La fuente de alimentacin DE <SUP>1</SUP>/<SUB>4</SUB> de watt convierte la
AC a DC. </P>
</BODY>
</HTML>
la etiqueta <ADDRESS></ADDRESS>,permite asignar una direccin a un documento
html, por lo general estas etiquetas van en la parte inferior de la pagina e indican quien la
escribi, con quien ponerse en contacto para tener mayor informacin, la fecha, cualquier
nota de derechos de autor y otras advertencias, por lo general la direccin va precedido de
una lnea horizontal que para este caso se usa la etiqueta <HR> y puede usarse la
etiqueta<BR> para separa las lneas. Firmar cada una de las pginas Web con la etiqueta
<ADDRESS> es una excelente forma de asegurarse que la gente que desea ponerse en
contacto con usted podr hacerlo.
Ejemplo.
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
DIAMETRO DISTANCIA TIEMPO DE ROTACION
.....................................................................................................................
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: &nbsp, 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
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>
Pgina 13
<P>Librera el SATELITE S.A<BR>

Ubicado en el Jr. Simon Bolivar N 548 <BR>
Telf. 4592725<BR>
</P>
</DIV>
<P>Desde 1980 la librera ofrece una gama de libros en todas las especialidades las cuales
en la actualidad por cumplir su 27 aniversario esta ofreciendo un descuento del 40% por la
compra de cualquier tipo de libro</P>
</BODY>
</HTML>
IMGENES Y FONDOS
Las imgenes en los sitios web se clasifican en dos categoras que son: Imgenes en lnea e
imgenes externas.
Las imgenes en lnea aparecen directamente en la pgina web junto al texto y los vnculos,
su visualizacin es de manera automtica junto con la misma pgina web.
Las imgenes externas, no se visualizan de manera automtica cuando se visualiza la pagina
web; solo se transfieren a solicitud del lector, por lo general cuando este hace clic en el
vinculo.
Las imgenes externas o en lnea deben estar en un formato especfico. Las imgenes en
lnea deben estar en uno de estos dos formatos: gif o jpeg. De hecho gif, es la norma mas
popular y hay mas navegadores que pueden manejar imgenes en lnea con formato GIF que
con el formato jpeg la segunda diferencia es que las imgenes con formato gif pueden ser
visualizados de manera mas amplio posible dentro de la pagina web.
Para insertar imgenes en un documento de HTML se utiliza la siguiente etiqueta.
La etiqueta <IMG> permite insertar una determinada imagen en un documento de HTML,
para cuyo fin utiliza los siguientes atributos.
El atributo SRC; indica el nombre o URL de la imagen que deseamos incluir en lnea escrito
entre comillas..
Ejemplo. vamos a insertar un archivo de imagen llamado imagen.gifen lnea, que se
encuentra en el mismo directorio que el documento de HTML.
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>
Pgina 15
AUTOR: Romero Huayta Nivardo<BR>

Huaraz-Peru</P>
</BODY>
</HTML>
Observaciones.
En este caso hemos insertado el archivo de imagen llamado Hdd.jpg el cual se encuentra
en mismo directorio del documento HTML. El archivo de imgenes que se usa en este
manual debe descargarlo de la pgina web del docente, en el enlace llamado imgenes
INSERTANDO IMAGEN EN LNEA JUNTO AL TEXTO.

En el ejemplo anterior insertamos una imagen en linea en su propio parrafo, con el texto
debajo de la imagen. Pues ahora vamos a insertar una imagen dentro de un alinea de texto.
Ejemplo de aplicacin.
Estableciendo la etiqueta <IMG> dentro de las etiquetas (<H1>,<P>,<ADDRESS>).observe
la siguiente codificacin
HTML>
<HEAD>
<TITLE>PASOS PARA CONECTAR UN DISCO DURO </TITLE>
</HEAD>
<BODY>
<P><H1><IMG SRC=Hdd.jpg>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>
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
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)
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>
Pgina 18
<P><IMG ALIGN=LEFT SRC=HDD.jpg VSPACE=30 HSPACE=30 ALIGN= LEFT

<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>
alineado con el conector N 1 del disco duro.Si vamos a conectar dos dispositivos dos discos
duros o un disco duro y un CD-ROM), debemos elegir uno de ellos comEste 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 dos discos duros o un disco duro y
un CD-ROM), 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. </P>
</BODY>
</HTML>
ASIGNANDO BORDES A LAS IMGENES.
Pa tal fin usaremos el atributo BORDER de la etiqueta <IMG>.
Observe el siguiente ejemplo.
<HTML>
<HEAD>
<TITLE>DELFIN </TITLE>
</HEAD>
<BODY>
<H1>VISUALIZACION DE UN DELFIN </H1>
<P>Recuadro en torno de la imagen <IMG SRC=delfin.gif BORDER = 5></P>
</BODY>
</HTML>
Observacin. El valor del atributo BORDER puede variar de acuerda a las necesidades del
usuario
ASIGNANDO IMGENES COMO FONDO DE UN DOCUMENTO DE HTML
Para lograr tal objetivo se debe usar el atributo background de la etiqueta <BODY>, donde
el, valor de background ser un nombre de archivo o URL que especifique a una imagen.
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>
Pgina 20
<A HREF =clouse.wav>Accin de windows </A>

(Archivo Windows Media Player de 132K)
</BODY>
</HTML>
Insertando archivo de sonido en lnea.
Estos archivos se ejecutan junto con la pgina sin que el navegante tenga que oprimir
ningn botn o hipervnculo. Para ello se utilizara la etiqueta <BGSOUND> para incrustar
archivos de sonido como fondo a una pagina web.
Observe el siguiente cdigo
<HTML>
<HEAD>
<TITLE> Ejemplo de archivo de sonido incrustado </TITLE>
</HEAD>
<BODY>
<H1>Ejemplo con sonido en formato WAV incrustado como fondo</H1>
<BGSOUND SRC=clouse.wav>
</BODY>
</HTML>.
Insercin de archivos de video con media placer de windows a una pagina web.
Los archivos de video, al igual de los de sonido, deben tener una extensin adecuada de tal
manera que los diversos navegadores web los puedan leer estas extensiones debe ser:
mpeg,avi,mp3,wav etc. Para tal fin se usara la etiqueta <EMBED> y sus atributos tales
como TYPE,SRC, AUTOSTART,LOOP,SHOWCONTROLS, SHOWSTATUSBAR,
CLICKTOPLAY, VOLUME, WIDTH, HEIGHT, HIDDEN. Todos estos atributos son
validos para archivos de sonido como para los de video o video con sonido. Si algn tipo de
archivo no es reconocido por le media placer, se puede instalar el codec adecuado.
Vamos a describir los atributos de la etiqueta <EMBED>.
TYPE: efecta la llamada al media player as por ejemplo.
<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
Pgina 21
omitir los atributos WIDTH y HEIGHT, har que se visualice el reproductor de Windows
media de manera completa
AUTOSTART. Puede asumir el valor de 1 para permitir que suene inmediatamente
despus de ejecutarse la pgina sin necesidad de pulsar el botn start de la consola.

El valor 0(por defecto), permite que la consola reproduzca el archivo cuando el
navegando pulsa sobre el botn start
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.
SHOWCONTROLS: que siempre asume el valor 1 (por defecto) o 0 y sirve para
que la consola muestre los botones de control tales como Stara, pause, stop, etc.
SHOWSTATUSBAR: asume el valor de 0(por defecto) o 1 y sirve para hacer que
aparezca la barra de estado de la consola(Windows media).
CLICKTOPLA: con valores 1(por defecto) o 0 que permite iniciar o parar la
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
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
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
Pgina 24
<TABLE>
<CAPTION> prximo campen</CAPTION>
<TR>
<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>
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>
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>
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>
Pgina 28
He aqu un ejemplo completo

<HTML>
<HEAD>
<TITLE>ALINEACION_DE_CELDAS</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH></TH>
<TH>Izquierda</TH>
<TH>Centro</TH>
<TH>Derecha</TH>
</TR>
<TR>
<TH>Arriba</TH>
<TD ALIGN=LEFT VALIGN=TOP>*</TD>
<TD ALIGN=CENTER VALIGN=TOP>*</TD>
<TD ALIGN=RIGHT VALIGN=TOP>*</TD>
</TR>
<TR>
<TH>Centro</TH>
<TD ALIGN=LEFT VALIGN=MIDDLE>*</TD>
<TD ALIGN=CENTER VALIGN=MIDDLE>*</TD>
<TD ALIGN=RIGHT VALIGN=MIDDLE>*</TD>
</TR>
<TR>
<TH>Abajo</TH>
<TD ALIGN=LEFT VALIGN=BOTTOM>*</TD>
<TD ALIGN=CENTER VALIGN=BOTTOM>*</TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM>*</TD>
</TR>
</TABLE>
Pgina 29
</BODY>
</HTML>
El siguiente ejemplo enlaza imgenes en las celdas de datos.
<HTML>
<HEAD>
</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>
\DRAGON.gif></TD>
Pgina 30

\asmarble1.gif></TD>
</TR>
</TABLE>
</BODY>
</HTML>
El resultado debe ser igual a:
CELDAS QUE ABARCAN VARIAS FILAS O COLUMNAS

Todas las tablas que hemos creado hasta ahora han tenido un valor en cada celda y
ocasionalmente una celda vacia. Pero tambin pueden crearse celdas que abarquen varias
filas o columnas dentro de la tabla. Estas celdas mltiples pueden contener encabezados que
a su vez tengan encabezados que vayan en la siguiente fila o columna; tambin pueden crear
otros efectos especiales dentro del disee de la tabla. Para crear una celda que abraque varias
filas o columnas se usan los atributos ROWSPAN(para filas) o COLSPAN(para columnas)
en las etiquetas <TH> o <TD>, junto con el numero de filas o columnas que queremos que
abraque la celda. Entonces los datos de esa celda llenan toda la anchura o altura de las celdas
combinadas, veamos un ejemplo.
<HTML>
<HEAD>
Pgina 31
</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>
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
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>
Pgina 33
<TD>NORMAL</TD>
<TD>AGRESIVO</TD>
<TD>SUPER-AGRESIVO</TD>
</TR>
</TABLE>
</BODY>
</HTML>
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>
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>
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(_).
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>
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:
Usando la etiqueta <BASE>

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>
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
VALOR
AUTO(valor
DESCRIPCION
En forma predeterminada el
Pgina 39
predeterminado)
navegador coloca una barra

de desplazamiento ya sea
vertical u horizontal para que
los usuarios puedan
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
usuarios pueden modificar la

posicin del borde del
marco, para bloquear e
impedir que se mueva se
establecer el atributo
MARGINHEIGHT
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
CREACION DE MARCOS COMPLEJOS.

El conjunto de marcos que hemos visto hasta ahora representan el tipo bsico que se puede
desplegar. Pero en el uso cotidiano rara vez vera estos diseos bsicos de marcos.
He aqu un ejemplo completo de la creacin de marcos complejos, el cual contiene
documentos que poseen vinculos, imgenes
Primeramente vamos a crear el marco principal llamado index.html
<HTML>
<HEAD>
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>
</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>
Pgina 41
<img ALIGN="Center"SRC="..\ marco\spotting.gif" Width=20 Height=20><A HREF="..\

marco \Nosotros.htm" TARGET="Presentaciones">Quienes somos</A></P>
</BODY>
</HTML>
Creando el documento llamado bienvenida.html
<HTML>
<HEAD>
</HEAD>
<BODY background="..\marco\plasma.jpg">
<P>Somos una tienda virtual dedicados a la venta de imgenes en diversas categoras, entre
las cuales podemos encontrar paisajes, fondos para pginas Web, entre otras.</P>
<P>Lo invitamos que vea nuestro catlogo de ventas, y si encuentra algo que le guste,
contactenos.</P>
</BODY>
</HTML>
Finalmente creando el documento llamado advertencia.html
<HTML>
<HEAD>
<TITLE>Tienda virtual_Catalogo</TITLE>
</HEAD>
<BODY background="..\marco\fondo_66.jpg">
<P><IMG ALIGN="Center" SRC="..\marco\exclam.gif" width=35 Height=35>Todas las
imgenes aqui presentadas estan patentadas por esta empresa, se prohibe su uso sin
autorizacin.</P>
</BODY>
</HTML>
Los valores del atributo TARGET se describe en la siguiente tabla
NOMBRE TARGET
TARGET=_blank
DESCRIPCION
Obliga aque el docuemneto referido en la
etiqueta <A> se cargue en una nueva
TARGET=_self
ventana sin nombre

Permite que el documento referido en la
Pgina 42
etiqueta <A> se cargue en la ventana o en

marco que contiene esa etiqueta<A>, esto
pude ser til cuando la etiqueta<BASE>
establece otro marco como destino, pero un
vinculo especifico necesita cargarse en la
pagina actual
Obliga a que el documento vinculado se
TARGET=_parent
cargue en le <FRAMESET> padre del

documento actual. Sin embargo, si el
documento actual no tiene padre se usa
TARGET=_self
Exige que el documento vinculado se cargue
TARGET=_top
en la ventana completa del navegador,

reemplazando por completo al actual
<FRAMESET>. Sin embargo, si el
documento actual ya esta en el nivel
superior se usa TARGET=_self
MARCOS FLOTANTES
Los marcos flotantes se crean con la etiqueta <IFRAME>. Al igual que las imgenes, los
marcos flotantes aparecen en linea, medio del cuerpo del documento HTML (de hecho la I
de <IFRAME> significa en linea).
La etiqueta <IFRAME> acepta los atributos como:
WIDTH, que especifica el ancho en pixeles del marco flotante que contendra el
documento flotante.
HEIGHT: Especifica la altura en pixeles el amrco flotante, que contendra el documento
HTML.
SRC: Especifica la direccin del documento HTML
NAME: Especifica el nombre del marco.
FRAMEBORDER: Indica si el marco despliega un borde, donde el borde igual a 1
indica la presencia del borde y un valor 0 indica que no debe desplegarse el borde.
BORDER: Especifica el ancho del borde en pxeles.
BORDERCOLOR: Especifica el color del borde.
Pgina 43
FRAMESPACING: Especifica el numerote pxeles adicionales entre los bordes del

marco.
MARGINWIDTH: Especifica el ancho del margen en pxeles.
MARGINHEIGHT: Especifica la altura del margen en pxeles.
NORESIZE: Indica si el usuario puede cambiar de tamao el marco.
SCROLLING: Indica si el marco en lnea tendr o no barra de desplazamiento este
atributo puede asumir los valores de YES; NO o AUTO, el predeterminado es AUTO.
VSPACE: Especifica la altura del margen.
HSPACE: Especifica el ancho del margen.
ALIGN: Especifica la ubicacin del marco con respecto de la lnea de texto donde se
encuentra. Los valores posibles son: LEFT, MIDDLE, RIGHT, TOP y BOTTOM..
He a qui un ejemplo.
<HTML>
<HEAD>
<TITLE>Ejemplo de IFRAME</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Un marco flotante</H1>
<P ALIGN=RIGHT>
<IFRAME SRC="..\marco\ index.html " WIDTH=400 HEIGHT=300
FRAMEBORDER=1>
</P>
</BODY>
</HTML>
Observacion.
El documento llamado index.html, lineas arriba habamos creado, lo que indica que dicho
documento deber estar en la carpeta llamado marco para poder enlazarlo al marco flotante.
FORMULARIOS EN HTML
Los formularios permiten transformar paginas web, para dejen de ser texto, grficos que el
lector examina pasivamente y se convierten en juguetes interactivos, sondeos y
presentaciones que ofrecen opciones diferentes, segn lo introdujo el lector.
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.
Pgina 45
Si omite el atributo TYPE, el elemento ser un campo de entrada de texto.

El atributo NAME: Asigna nombre al elemento, cuando el formulario se enva al
servidor.
El atributo VALUE: permite asignar un nombre a un elemento, el cual ser visualizado
por el usuario.
He aqu un ejemplo, donde se crea dos formularios con botones de envi cada uno
<HTML>
<HEAD>
<TITLE>Formulario con dos botones de envi</TITLE>
</HEAD>
<BODY>
<H2>Ejemplo de dos botones</H2>
<FORM METHOD=POST ACTION="htttp://www.mcp.com/script/miscript">
<P><INPUT TYPE="submit"></P>
</FORM>
<UL>
<P><INPUT TYPE="submit" VALUE="Presione aqui"></P>
</FORM>
</BODY>
</HTML>
En la etiqueta <INPUT> tambin se pueden usar los atributos como:
El atributo SIZE: indica la longitud en caracteres del campo texto, el tamao
predeterminado es de 20 caracteres, el usuario puede escribir todos los caracteres que
desee, pero el texto se ira desplazando en forma horizontal conforme se vaya
escribiendo, trate de que el valor de SIZE no exceda ala valor de 50 caracteres.
por ejemplo.
<INPUT TYPE=text NAME=textolargo SIZE=50>.
El atributo MAXLENGTH: permite limitar el numero de caracteres que el lector puede
escribir en el campo de texto(recordar que se descartan todos los caracteres adicionales.
Los campos de contrasea son iguales que los campos de texto.
He aqu un ejemplo.
<HTML>
Pgina 46
<HEAD>
<TITLE>Formulario_entrada_de _texto</TITLE>
</HEAD>
<BODY>
<H2>Ejemplo de entrada de texto</H2>
<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>
<OL>
<LI><INPUT TYPE="radio" NAME ="Tipo" VALUE="Animal" CHECKED>Animal<br>
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>
<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>
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
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>
<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>
Pgina 50
<H1 ALIGN=CENTER><U>Ejemplo de selecciones</U></H1>

<P>Seleccione que cosas desea comprar</P>
<SELECT NAME="Compras" MULTIPLE SIZE="4">
<OPTION>Arroz
<OPTION>Gaseosa
<OPTION>Embutidos
<OPTION>Carnes
<OPTION>Huevos
<OPTION>Licores
<OPTION>Otros
</SELECT></P>
</FORM>
</BODY>
</HTML>
AREAS DE TEXTO
Las reas de texto son campos de entrada en donde el usuario puede escribir, pero a
diferencia de los campos de texto normales (<IMPUT TYPE=text>), las reas de texto
pueden contener muchas lneas, lo que las hace muy tiles para formularios que requieren
entrada externa. Por ejemplo, si quisiera crear u formulario que permitiera a los electores
redactar mensajes de correo electrnico, podra usar un rea de texto para el cuerpo del
mensaje. Para incluir un rea de texto en el formulario se usa la etiqueta <TEXAREA>, que
cuenta con tres atributos que son:
El atributo NAME: indica el nombre que se enviara cuan se enva los datos a travs del
formulario.
El atributo ROWS: Indica la altura del rea de texto en filas o texto
El atributo COLS: Indica el ancho del rea de texto en columnas(caracteres).

Por ejemplo si quisiramos que un determinado mensaje aparezca dentro del texto de rea la
codificacin seria igual alo siguientes.
<TEXTAREA AREA=mensaje ROWS=14 COLS=50> Escriba aqu su
mensaje</TEXTAREA>
<HTML>
Pgina 51
<HEAD>
<TITLE>Formulario_con_areas_de_texto</TITLE>
<H1 ALIGN=CENTER><U>Ejemplo de Areas de texto</U></H1>
<P>Escriba su comentario</P>
<TEXTAREA NAME="Comentario" ROWS="10" COLS="40">
</TEXTAREA>
</FORM>
</BODY>
</HTML>
Nombre del color
Cdigo hex
Color "seguro para

web" ms cercano
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
AMARILLO ALAMBRE DORADO CLARO #FAFAD2
#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
Pgina 52
GAINSBORO
#DCDCDC
#CCCCCC
SOPLIDO MELOCOTN
#FFDAB9
#FFCCCC
BLANCO NAVAJO
#FFDEAD
#FFCC99
DORADO ALAMBRE PLIDO
#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
AZUL CIELO CLARO
#87CEFA
#99CCFF
VERDE PLIDO
#98FB98
#99FF99
AZUL ACERO CLARO
#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
VERDE MAR INTENSO
#8FBC8F
#99CC99
AZUL CIELO INTENSO
#00BFFF
#00CCFF
MARRN ARENA
#F4A460
#FF9966
DORADO
#FFD700
#FFCC00
VERDE PRIMAVERA MEDIO
#00FA9A
#00FF99
CAQUI OSCURO
#BDB76B
#CCCC66
ACIANO AZUL
#6495ED
#6699FF
ROSA CALIENTE
#FF69B4
#FF66CC
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
VIOLETA ROJO PLIDO
#DB7093
#CC6699
AZUL PIZARRA MEDIO
#7B68EE
#6666FF
ORQUDEA MEDIO
#BA55D3
#CC66CC
CORAL
#FF7F50
#FF6666
AZUL CADETE
#5F9EA0
#669999
VERDE MAR CLARO
#20B2AA
#339999
DORADO ALAMBRE
#DAA520
#CC9933
NARANJA
#FFA500
#FF9900
GRIS PIZARRA CLARO
#778899
#669999
FUCSIA
#FF00FF
#FF00FF
MAGENTA
#FF00FF
#FF00FF
VERDE MAR MEDIO
#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
DORADO ALAMBRE OSCURO
#B8860B
#CC9900
CHOCOLATE
#D2691E
#CC6633
CIAN OSCURO
#008B8B
#009999
GRIS DIFUSO
#696969
#666666
GRIS ACEITUNA
#6B8E23
#669933
VERDE MAR
#2E8B57
#339966
Pgina 54
VERDE CERCETA
#008080
#009999
VIOLETA OSCURO
#9400D3
#9900CC
VIOLETA ROJO MEDIO
#C71585
#CC0066
NARANJA ROJO
#FF4500
#FF3300
ACEITUNA
#808000
#999900
SIENA
#A0522D
#996633
AZUL PIZARRA OSCURO
#483D8B
#333399
VERDE ACEITUNA OSCURO
#556B2F
#666633
VERDE BOSQUE
#228B22
#339933
CARMES
#DC143C
#CC0033
AZUL
#0000FF
#0000FF
MAGENTA OSCURO
#8B008B
#990099
GRIS PIZARRA OSCURO
#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
FIN DEL MANUAL INSTRUCTIVOB DEL ALENGUAJE HTML.
Pgina 55
Pgina 56

Manual Instructivo de HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Manual Instructivo de HTML

Transféré par

Droits d'auteur :

Formats disponibles

CURSO: TECNOLOGIA DE PROGRAMACION