Manual de HTML (Imprimir)

Separatas de computacin? Conctate a: 1 www.lanzadera.
com/elprofediaz
Profesor Carlos Daz elprofediaz@hotmail.com
HTML

HTML o Hypertext Markup Language o Lenguaje de Diseo de Hipertextos es un lenguaje que
se utiliza para crear pginas Web.
Preguntas Frecuentes:
- Profe Daz, qu software necesito para programar en HTML?
Slo necesitas el Bloc de notas de Windows y un navegador como Microsoft Internet
Explorer. En realidad puedes usar cualquier editor de textos y cualquier navegador.
- Profe Daz, necesito estar conectado a Internet para crear mi pgina Web?
No. Cuando programas tu pgina Web, puedes verla en el navegador sin necesidad de estar
conectado a Internet.
- Profe Daz me han dicho que el HTML no sirve y que es mejor usar el FrontPage o
Dreamweaver?.
No seas tarado!, en esos programitas creas tu pgina Web como si lo estuvieras haciendo en
Word, pero detrs de ellos se esta escribiendo automticamente el cdigo HTML. Y adems
esos programitas no son 100% eficientes y siempre tendrs que hacer tus propias
modificaciones Y como diablos piensas hacer esas modificaciones si no sabes HTML? Dime!
Habla! No te quedes callado! Estoy perdiendo el controoooooooooooooooooool!.
- Calma Profe Daz, Puede responderme otra pregunta?
Queeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!
- No se altere Profe Daz, suelte esa silla, solo quiero saber por qu se promociona tanto los
programitas FrontPage y Dreamweaver?.
Ahhhhhhhhhhhhhhhhhhhhhhh! Esta bien no te atacar, te responder. La idea es que tu
construyas la forma bsica de tu pgina Web en esos programitas y luego lo retoques usando
HTML. Personalmente es mejor usar Dreamweaver pues es ms fcil aadir elementos de
Flash, Fireworks, etc., pero el ms sencillo y no muy malo es el FrontPage. Pero de eso
hablaremos otro da.
- Otra pregunta Profe Daz, Es fcil aprender HTML?
Claro que s, pero ya no me hagas perder el tiempo y empecemos el curso!.
- Pero quiero preguntar ms.
Noooooooooo! Toma! Ja Ja Ja! Toma otra vez!
- Auxiliooooooooooooooooooooooooooooooooooooo!
Por fin se callo, ahora empecemos. Y presten atencin o ya saben lo que les espera!

Estructura bsica del documento HTML

Se compone bsicamente de dos partes: Una cabecera y un cuerpo.
<HTML>
<HEAD>

Nuestro cdigo

</HEAD>
<BODY>

Nuestro cdigo

</BODY>
</HTML>
Separatas de computacin? Conctate a: 2 www.lanzadera.com/elprofediaz
Las etiquetas <HTML> y </HTML> identifican el principio y el final del documento HTML.
Las etiquetas <HEAD> y </HEAD> limitan la cabecera del documento.
Las etiquetas <BODY> y </BODY> limitan el cuerpo del documento.

Ejemplo 1: Crearemos una pgina Web que muestre el nombre del conocido Profe Daz.
Primero: En el Bloc de notas escriba el siguiente cdigo.

<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola mi nombre es Carlos Daz y no te olvides visitar mi pgina
www.lanzadera.com/elprofediaz
</BODY>
</HTML>

Segundo: En el Explorador de Windows crea una carpeta donde guardaras tus archivos.
Tercero: Gurdalo con el nombre "Ejemplo1.htm" y recuerda colocar las comillas.
Cuarto: Abre el Internet Explorer y mediante su men Archivo/Abrir carga tu documento
Ejemplo1.htm el resultado se muestra en la siguiente pgina.

Observa que el ttulo de la
ventana es lo que pusiste entre
las etiquetas <TITLE> y
</TITLE>.
Observa que lo que aparece en
la pgina es lo que pusiste
dentro de las etiquetas <BODY>
y </BODY>.

Encabezados

Los encabezados son utilizados para resaltar palabras o frases. Tenemos seis tamaos de
encabezado el ms grande esta comprendido entre las etiquetas <H1> y </H1> y el ms pequeo
esta comprendido entre las etiquetas <H6> y </H6>.
Si quiere alinear el encabezado utilic el atributo ALIGN con la opcin LEFT(izquierda),
CENTER(Centro), RIGHT(Derecha) o JUSTIFY(Justificado). Si no usa ALIGN el HTML
supondr la alineacin LEFT(Izquierda). En adelante no colocar las traducciones, as que
mejor consgase un diccionario ingls/espaol.
Recomendacin Sper Importante:
Es mejor colocar todos los
elementos de tu pgina Web en una
sola carpeta, para que el HTML no
tenga problemas al ubicar los
archivos, por ejemplo yo lo estoy
guardando todo en la carpeta:
C:\Separatas del ProfeDiaz\HTML
Ejemplo 2: Crearemos una pgina Web que muestre el uso de los encabezados.
Primero: En el bloc de notas escriba el siguiente cdigo.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER >Frases Famosas</H1>
<H2>Ganar no es todo, es lo nico.</H2>
<H3>El secreto de andar sobre las aguas, es saber donde estn las piedras.</H3>
<H4 ALIGN=RIGHT>Si piensas que puedes o no puedes, siempre tienes razn.</H4>
<H5 ALIGN=RIGHT>El conocimiento es poder.</H5>
<H6> Prohibido, prohibir.</H6>
Que bonitas frases.
</BODY>
</HTML>

Segundo: Gurdalo con el nombre "Ejemplo2.htm"
Tercero: Abre el Internet Explorer y mediante su men Archivo/Abrir carga tu documento
Ejemplo2.htm el resultado se muestra en la siguiente pgina.

Estilos de letra

Los estilos ms conocidos utilizan las siguientes etiquetas:
<B> y </B> Letra negrita.
<I> y </I> Letra cursiva o itlica.
<U> y </U> Letra subrayada.
<S> y </S> Letra tachada.
<TT> y </TT> Letra tipo mecanografiado. O sea tipo mquina de escribir.
<FONT COLOR=Color SIZE=Tamao> y </FONT>
Color es el color de la letra (escrita en ingls), Tamao
es el tamao de la letra y puede tener un valor entre 1 y 7,
aunque si le coloca otro nmero no mandar error, pero
tampoco le har caso. Por defecto el tamao es 3.
<FONT COLOR=Color SIZE=+T> y </FONT>
+T indica que la letra saldr T puntos ms grande del
tamao que tiene actualmente.
<FONT COLOR=Color SIZE=-T> y </FONT>
-T indica que la letra saldr T puntos ms pequeo del
tamao que tiene actualmente.
<SUB> y </SUB> Letra tipo subndice.
<SUP> Y </SUP> Letra tipo superndice.

Ejemplo 3: Crearemos una pgina Web que muestre el uso de los estilos de letra.
Primero: En el bloc de notas escriba el siguiente cdigo.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER><U><FONT COLOR=BLUE>Frmulas Conocidas</FONT></U></H1>
Las siguientes <I>Formulas</I> son muy conocidas y <B>peligrosas de usar</B>.
Por lo tanto <U><I><B>recomendamos</U></I></B> experimentarlas en un laboratorio
<S>super seguro</S> en lo ms profundo de la <FONT COLOR=BROWN>tierra</FONT>.
Frmula del <FONT COLOR=GREEN SIZE=+4>agua</FONT>:
H<SUB>2</SUB>O
Frmula de la energa una <FONT SIZE=-2>partcula</FONT>:
E=mc<SUP>2</SUP>
</BODY>
</HTML>
Tercero: En Internet Explorer carga tu documento Ejemplo3.htm y obtendrs lo siguiente.

Por si acaso si no sabes ingls aqu te doy unos colores:

Antiquewhite Aqua Aquamarine Azure Beige Bisque Black
Blanched Blue Blueviolet Brown Burlywood Cadetblue Chartreuse
Chocolate Coral Cornflower Cornsilk Crimson Cyan Darkblue
Darkcyan Darkgoldenr Darkgray Darkgreen Darkkhaki Darkmagent Darkolivegre
Darkorange Darkorchid Darkred Darksalmon Darkseagreen Darkslatebl Darkslategr
Darkturquoi Darkviolet Deeppink Deepskyblue Dimgray Dodgerblue Firebrick
Floralwhite Forestgreen Fuchsia Gainsboro Ghostwhite Gold Goldenrod
Gray Green Greeyellow Honeydew Hotpink Indianred Indigo
Ivory Khaki Lavender Lavenderblue Lawngreen Lemonchillon Lightblue
Lightcoral Lightcyan Lightgolden Lightgray Lightgreen Lightpink Lightsalmon
Lightseagree Lightskyblue Lightslategr Lightsteelbl Lightyellow Lime Limegreen
Linen Magenta Maroon Mediumaquam Mediumblue Mediumorchid Mediumpurp
Mediumseagr Mediumslateb Mediumspring Mediumturqu Mediumviolet Midnightblue Mintcream
Mistyrose Moccasin Navajowhite Navy Oldlace Olive Olivedrab
Orange Orangered Orchid Palegoldenr Palegreen Paleturquoise Palevioletr
Papayawhip Peachpuff Peru Pink Plum Powderblue Purple
Red Rosybrown Royalblue Saddlebrown Salmon Sandybrown Seagreen
seashell Sienne Silver Skyblue Slateblue Slategray Snow
Springgreen Steelblue Tan Teal Thistle Tomato Turquoise
Violet Wheat White Whitesmoke Yellow Yellowgreen

Prrafos y espacios en blanco

Como habr notado en el ejemplo anterior, el HTML no hace caso a los retornos de carro (o
sea los ENTER) normales ni tampoco a mltiples espacios en blanco de la barra espaciadora.
Las siguientes etiquetas permiten manipular los retornos de carro y los espacios en blanco,
note que ninguna tiene etiqueta de cierre:
<P> Inicia un nuevo prrafo dejando una lnea en blanco.
<BR> Inicia un nuevo prrafo sin dejar ninguna lnea en blanco.
Produce un espacio en blanco. En realidad no es una etiqueta sino el caracter de
espacio en blanco.

Ejemplo 4: Modifique el ejemplo anterior para que se vea ms presentable.
Primero: En el bloc de notas modifique el cdigo del ejemplo anterior, tal como se muestra.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER><U><FONT COLOR=BLUE>Frmulas Conocidas</FONT></U></H1>
Las siguientes <I>Formulas</I> son muy conocidas y <B>peligrosas de usar</B>.<P>
Por lo tanto <U><I><B>recomendamos</U></I></B> experimentarlas en un laboratorio<BR>
<S>super seguro</S> en lo ms profundo de la <FONT COLOR=BROWN>tierra</FONT>.<BR>
Frmula del
<FONT COLOR=GREEN SIZE=+4>agua</FONT>:
H<SUB>2</SUB>O<BR>
Frmula de la energa una <FONT SIZE=-2>partcula</font>:E=mc<SUP>2</SUP>
</BODY>
</HTML>
Tercero: Abre el Internet Explorer y mediante su men Archivo/Abrir carga tu documento
Ejemplo4.htm el resultado se muestra a continuacin.

Lneas

Las lneas que se pueden insertar en HTML pueden tener distinto color, alineacin, ancho
horizontal y espesor.
<HR> Dibuja una lnea horizontal de lado a lado del documento.
<HR COLOR=Color ALIGN=Alineacin WIDTH=Ancho SIZE=Espesor >
Color es el color de la lnea horizontal, Alineacin puede ser
LEFT, RIGHT o CENTER, con un Ancho que puede estar en
pxeles o ser un porcentaje del ancho del documento y con un
grosor igual a Espesor pxeles.

Ejemplo 5: Dibujemos algunas lneas.

<HTML>
<HEAD>
</HEAD>
<BODY>
Lnea de lado a lado<HR>
Lnea en el centro con un ancho de 50%<HR WIDTH=50%>
Lnea a la derecha con un ancho de 25%<HR ALIGN=RIGHT WIDTH=25%>
Lnea a la izquierda con un ancho de 75%<HR ALIGN=LEFT WIDTH=75%>
Lnea azul a la izquierda con un ancho de 25%<HR COLOR=BLUE ALIGN=LEFT WIDTH=25%>
Lnea verde en el centro con un ancho de 50% y un espesor de 10 pxeles
<HR COLOR=GREEN WIDTH=50% SIZE=10>
Lnea roja a la derecha con un ancho de 25% y un espesor de 20 pxeles
<HR COLOR=RED ALIGN=RIGHT WIDTH=25% SIZE=20>
</BODY>
</HTML>
El resultado se muestra a continuacin:

Alineacin de texto

<P ALIGN=Alineacin > y </P> Alinea el texto segn el valor que tome Alineacin (LEFT,
CENTER, RIGHT o JUSTIFY)
<CENTER> y </CENTER> Centra el texto. Tambin puede usar <P ALIGN=CENTER> y </P>

Lista de elementos

HTML permite crear tres tipos de listas de elementos. Las etiquetas son las siguientes:
<OL TYPE=Tipo > y </OL> Lista ordenada o numerada. Tipo define el tipo de numeracin y
puede ser 1, a, A, i, I.
Cada elemento de la lista debe ir precedido por la etiqueta <LI>
<UL TYPE=Tipo > y </UL> Lista desordenada o de vietas. Tipo define el tipo de vieta y
puede ser disk, square, circle escritas en minsculas.
Cada elemento de la lista debe ir precedido por la etiqueta <LI>
<DL> y </DL> Lista de glosario o tipo ndice. Los ttulos principales deben ir
precedidos por la etiqueta <DT> y los ttulos de prrafo sangrados
deben ir precedidos por las etiquetas <DD>

Ejemplo 6: Ahora combinemos todo lo aprendido para crear la pgina personal de Arturito el
nio Genio.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER><FONT COLOR=GREEN><B><I>Pgina Personal de Arturito</I></B>
</FONT></H1>
Profesor: Carlos Daz

Profesor de Computacin e Informtica
Fsica y Matemticas
Anlisis y Diseo de Sistemas
Asesora e Instalacin de Software
Asesora y Ensamblaje de Computadoras

Telefs: 485-4698 9726-6306
E-mail: elprofediaz@hotmail.com
Website: www.lanzadera.com/elprofediaz
<HR COLOR=BLUE WIDTH=80% SIZE=5>
<P ALIGN=JUSTIFY>Hola, mi nombre es Arturito, ms conocido como el nio<FONT SIZE=+3>
genio de las matemticas</FONT>. Actualmente estoy de vacaciones y la estoy pasando muy
bien en mi mansin de la isla Tortuga, que a propsito tambin es mi isla, mi to, El Profe Daz,
me la regal el da de mi cumpleaos. Casi todos los das me la paso paseando en mi yate cerca
al <FONT COLOR=RED>Triangulo de las Bermudas</FONT> Has odo hablar de l?, supongo
que si.</P>
Despus, al atardecer regreso a mi mansin y voy con mi jeep a mi habitacin donde se
encuentra mi supercomputadora que me costo un milln de dlares, me la compre juntando mis
propinas del mes pasado. En mi computadora tengo muchos juegos, te dar una lista de los ms
emocionantes:
<OL>
<LI>Age of empires
<LI>Black & White
<LI>Quake III Arena
</OL>
<H2 ALIGN=CENTER><U>Otros juegos importantes</U></H2>
<UL TYPE=circle>
<LI>Midtown Madness 2
<LI>Delta Force Land Warriors
<LI>Unreal Tournament
</UL>
<H4>Muy pronto escribir mi libro Las Aventuras de Arturito el nio Genio y tendr ms o
menos los siguientes temas:</H4><P>
<DL>
<DT>Captulo I: Los viajes de Arturito.
<DD>La fiesta de cumpleaos de Arturito.
<DD>El paseo campestre de Arturito.
<DD>Arturito en las playas de Hawai.
<DT>Captulo II: Los juguetes de Arturito.
<DD>El auto de carreras de Arturito.
<DD>La supercomputadora de Arturito.
<DD>El yoyo de Arturito.
</DL>
</BODY>
</HTML>

El resultado es el siguiente:

Tablas

Las tablas son cuadrculas que uno crea por ejemplo para colocar un horario escolar o un
modelo de factura o recibo.
Las tablas se crean con la etiqueta <TABLE> para indicar donde comienza y </TABLE> para
indicar donde termina.
Las tablas se construyen especificando, fila a fila, el contenido de cada celda mediante las
etiquetas <TD> y </TD>. Para cambiar de fila usamos la etiqueta <TR>.
Ante de entrar en ms detalles, en el siguiente ejemplo crearemos una tabla., vers que
facilsimo es.

Ejemplo 7: En este ejemplo crearemos nuestro horario escolar de vacaciones tiles. Ser una
tabla de 5 filas por 4 columnas.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Horario Escolar</H1>
<TABLE>
<TD>Hora</TD><TD>Lunes</TD><TD>Mircoles</TD><TD>Viernes</TD>
<TR>
<TD>8-10</TD><TD>Natacin</TD><TD>Natacin</TD><TD>Computacin</TD>
<TR>
<TD>10-12</TD><TD>Karate</TD><TD>Karate</TD><TD>Natacin</TD>
<TR>
<TD>12-14</TD><TD>Ingls</TD><TD>Computacin</TD><TD>Karate</TD>
<TR>
<TD>14-16</TD><TD>Computacin</TD><TD>Ingls</TD><TD>Ingls</TD>
</TABLE>
</BODY>
</HTML>

El resultado se muestra a continuacin.

Vemos que a nuestra tabla le falta algo de decoracin. Los siguientes atributos pueden
ayudarnos:

<TABLE ALIGN=Alineacin BGCOLOR=Color de Fondo BORDER=Borde
BORDERCOLOR=Color de Borde CELLPADDING=Margn Interior
CELLSPACING=Espacio Entre Celdas WIDTH=Ancho > y </TABLE>
Alineacin determina la alineacin de la tabla (LEFT, CENTER o RIGHT). Color de
Fondo determina el color del fondo de la tabla. Borde determina el ancho del borde
exterior de la tabla. Color de Borde es el color de todas las lneas de la tabla.
Margen interior indica el margen entre el borde de la celda y el contenido de la celda.
Espacio Entre Celdas indica la separacin entre las celdas y WIDTH es el ancho de
toda la tabla en porcentaje, donde 100% es el ancho de toda la pgina.

Ejemplo 8: Ahora modificaremos nuestro horario escolar creado en el ejemplo anterior.

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BGCOLOR=LIGHTYELLOW BORDER=12 BORDERCOLOR=BLUE width=90%>
<TR>
<TR>
<TR>
<TR>
</TABLE>
Otro modelo del horario escolar:
<TABLE ALIGN=CENTER BORDER CELLPADDING=10 CELLSPACING=20 BORDERCOLOR=RED>
<TR>
<TR>
<TR>
<TR>
</TABLE>
</BODY>
</HTML>

El resultado se ve a continuacin:

Todava podemos mejorar la tabla usando los atributos mostrados en la siguiente pgina:
<TH ALIGN=Alineacin BGCOLOR=Color de Fondo COLSPAN=Combinar Columnas
ROWSPAN=Combinar Filas VALIGN=Alineacin Vertical> y </TH>
Define las cabeceras de las columnas. Alineacin es la alineacin horizontal
dentro de la celda, puede ser LEFT, CENTER, RIGHT, JUSTIFY o DECIMAL.
Color de Fondo es el color de fondo dicha celda. Combinar Columnas indica
cuantas celdas horizontales se van a unir. Combinar Filas indica cuantas celdas
verticales se van a unir. Alineacin Vertical determina la orientacin vertical
dentro de la celda, puede ser BOTTOM, CENTER, TOP o BASELINE.
<TD ALIGN=Alineacin BGCOLOR=Color de Fondo COLSPAN=Combinar Columnas
ROWSPAN=Combinar Filas VALIGN=Alineacin Vertical> y </TD>
Define una celda de la tabla. La descripcin de los atributos son iguales a la
etiqueta anterior.

Ejemplo 9: Continuemos modificando nuestro horario.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=4 CELLPADDING=10 CELLSPACING=20 BORDERCOLOR=PURPLE>
<TH BGCOLOR=YELLOW>Hora</TH><TH>Lunes</TH><TH>Mircoles</TH><TH>Viernes</TH>
<TR>
<TD>8-10</TD><TD ALIGN=CENTER COLSPAN=2>Natacin</TD><TD>Computacin</TD>
<TR>
<TR>
<TD>12-14</TD><TD>Ingls</TD>
<TD ALIGN=CENTER ROWSPAN=2 VALIGN=TOP>Computacin<br>e<br> Ingls</TD><TD>Karate</TD>
<TR>
<TD>14-16</TD><TD>Computacin</TD><TD>Ingls</TD>
</TABLE>
</BODY>
</HTML>

El resultado es el
siguiente, mira bien:

El Fondo de la Pgina

<BODY BACKGROUND=Imagen de fondo BGCOLOR=Color de fondo> y </BODY>
Imagen de fondo es el nombre del archivo que contiene la
imagen, debe estar en la misma carpeta donde estas guardando
todo. Color de fondo es el color escrito en ingls, en la pgina 5
te di una lista de colores.
Los archivos de imagen que soporta el HTML son de formato JPG o GIF.
JPG es de menor tamao que un GIF. JPG suele utilizarse para fotografas e imgenes
grandes y GIF para imgenes pequeas.
Como recomendamos al principio del curso es conveniente tener las imgenes en el mismo
lugar donde estas guardando los documentos HTML, y as evitaras la molestia de colocar la
ruta del archivo de imagen.

Insercin de Imgenes

La insercin de una imagen dentro del documento HTML se hace mediante la etiqueta:
<IMG SRC=Archivo de imagen ALT=Nombre alternativo ALIGN=Alineacin
BORDER=Borde HEIGHT=Altura WIDTH=Ancho>
Archivo es el nombre del archivo de imagen, debe estar en la
misma carpeta donde estas guardando todo. Nombre alternativo
es un texto que aparecer debajo de la imagen cuando coloque el
puntero sobre la imagen. Alineacin permite alinear la imagen en
la pgina puede ser LEFT o RIGHT o tambin para alinear el texto
que viene a continuacin de la imagen donde puede ser TOP,
MIDDLE o BOTTOM. Borde es un nmero que determina el
ancho del borde alrededor de la imagen. Altura y Ancho son
nmeros que permiten definir el tamao de la imagen.
Se recomienda usar siempre los atributos HEIGHT y WIDTH ya que esto permite que el
navegador reserve un espacio para la imagen y continu cargando la pgina mientras va
cargando la imagen. Si no usa estos atributos el navegador esperar a terminar de cargar
la imagen para luego continuar con la carga del resto de la pgina.
Para centrar una imagen en la pgina use las etiquetas <CENTER> y </CENTER> alrededor
de la imagen. Tambin para alinear puede usar <P ALIGN= Alineacin y </P> donde
Alineacin puede ser LEFT, CENTER o RIGHT.
Existen programas que pueden unir varias imgenes GIF en secuencia y formar un solo
archivo GIF, lo que dar una sensacin de movimiento. Este archivo GIF resultante se
conoce como GIF ANIMADO y en Internet se puede conseguir muchos y gratis. En mi
pgina www.lanzadera.com/elprofediaz has visto algunas.

Ejemplo 10: Crearemos una pgina con muchas imgenes. Las imgenes que usar estn en la
carpeta que bajaste de mi pgina, bscalas y cpialas a tu carpeta.

<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=LIGHTYELLOW>
<H1 ALIGN=CENTER>Mis GIF ANIMADOS Favoritos</H1>
<IMG SRC="la computadora.gif" ALT="La supercomputadora" ALIGN=LEFT HEIGHT=150
WIDTH=150>
<BR><BR>Esta es la computadora del Profe Daz donde se la pasa jugando y escribiendo
separatas para publicarlas en su pgina Web <B>www.lanzadera.com/elprofediaz</B>. Si
quieres bajar a tu computadora estos GIF animados, visita mi pgina y coloca el puntero sobre
la imagen, luego haces clic con el botn derecho del mouse y finalmente haces clic en
<B>Guardar imagen como...</B>
<P ALIGN=RIGHT>Esta es la pizarra del Profe Daz <IMG SRC=pizarra.gif ALT="La pizarra"
align=middle HEIGHT=120 WIDTH=150><BR>
<CENTER><U>Otros GIF animados<U></CENTER><BR>
<IMG SRC=trabajador.gif ALT="Trabajador" ALIGN=LEFT BORDER=3 HEIGHT=130
WIDTH=120>
<IMG SRC=perrito.gif ALT="Corre Firulais" ALIGN=RIGHT HEIGHT=150 WIDTH=80></P>
</BODY>
</HTML>

El resultado es:

Enlace con otras pginas

Los enlaces o hiperenlaces o hipervnculos ms importantes son aquellos que nos permiten
conectarnos con otra de nuestras pginas o con una pgina cualquiera de Internet.
Todo enlace tiene la siguiente forma:
<A HREF=Pgina Web>HiperTexto o HiperImagen</A>
Donde Pgina Web es la direccin de la pgina
Web a la que deseamos conectarnos y el
HiperTexto o HiperImagen es cualquier texto o
imagen a la que se deber hacer clic para saltar a
la pgina deseada.
Ejemplo 11: Ahora construiremos un documento que nos conectar con la pgina de Microsoft,
con la pgina del Profe Daz y con una de las pginas creadas en esta hermosa separata.
Recuerde mi recomendacin al principio del curso: Para que no tengas problemas con las rutas,
guarda todo en una sola carpeta. Por ejemplo yo lo he guardado todo en la carpeta
C:\Separatas del ProfeDiaz\HTML

Hazme caso o te rompo la cabeza!

<HTML>
<HEAD>
</HEAD>
<H1 ALIGN=CENTER>Mis Pginas Favoritos</H1>
Para obtener informacin de Windows has clic en
<A HREF="http://www.microsoft.com">Microsoft</A><BR>
Para bajar separatas de computacin has clic en
<A HREF="http://www.lanzadera.com/elprofediaz">Separatas del Profe Daz</A><BR>
Para ver el ejemplo 10 has clic en <A HREF="ejemplo10.htm">GIF Animados</A><P>
Para obtener informacin de Windows has clic en
<A HREF="http://www.microsoft.com"><IMG SRC=parlante.gif></A><P>
Para bajar separatas de computacin has clic en
<A HREF="http://www.lanzadera.com/elprofediaz">
<IMG SRC=estrella.gif ALT="Has clic para ir a la pgina del Profe Daz"
BORDER ALIGN=MIDDLE HEIGHT=80 WIDTH=80></A><P>
Para ver el ejemplo 10 has clic en
<A HREF="ejemplo10.htm"><IMG SRC=perrito.gif ALIGN=TOP BORDER></A>
</BODY>
</HTML>

El resultado es:

Enlace con direcciones de correo electrnico

En este caso, haciendo clic en el enlace, no se inicia una nueva pgina, sino ms bien se abre un
programa de correo electrnico como, por ejemplo, el Outlook Express. La etiqueta utilizada
es la siguiente:
<A HREF=mailto:Direccin de correo>HiperTexto o HiperImagen</A>
Donde Direccin de correo es la direccin de correo
electrnico a la que deseamos escribir y el HiperTexto o
HiperImagen es cualquier texto o imagen a la que se
deber hacer clic para abrir el programa de correo
electrnico.

Ejemplo 12: Ahora construiremos un documento que nos permitir enviar un saludo al Profe
Daz.

<HTML>
<HEAD>
</HEAD>
<H1 ALIGN=CENTER>Enve un saludo al Profe Daz</H1>
Para enviar un mensaje al Profe Daz has clic en
<A HREF=mailto:elprofediaz@hotmail.com>elprofediaz@hotmail.com</A><BR>
Tambin puedes hacer clic en su pizarra
<A HREF=mailto:elprofediaz@hotmail.com>
<IMG SRC=pizarra.gif ALIGN=MIDDLE></A><BR>
</BODY>
</HTML>

El resultado es el siguiente:

Al hacer clic en el hipertexto o hiperimagen se abre el programa de correo electrnico, tal
como muestra la figura de la siguiente pgina:

Nota: Sin embargo est utilidad slo servir si la computadora donde ve la pgina tiene un
servicio de correo electrnico proporcionado por algn proveedor de Internet. Si ese no es el
caso entonces esta utilidad no servir para nada y no se podr enviar ningn correo.

Bajar archivos desde tu pgina

En el caso que desees que el usuario pueda bajar archivos a su computadora, tal como lo
hiciste t con esta bellsima separata debes usar la siguiente etiqueta:
<A HREF=Nombre del archivo>HiperTexto o HiperImagen</A>
Donde Nombre del archivo es el nombre del
archivo (con su extensin) que deseas bajar y el
HiperTexto o HiperImagen es cualquier texto o
imagen a la que se deber hacer clic para bajar el
archivo a la computadora.

Ejemplo 13: Ahora construiremos un documento que nos permitir bajar a la computadora un
lindo dibujo hecho en Paint.

Primero: Dibuja en Paint un
autorretrato y gurdalo con el
nombre de Foto en el mismo lugar
donde estas guardando todo, esto es
muy importante.

Segundo: Escribe el siguiente cdigo en el bloc de notas y gurdalo con el nombre
Ejemplo13.htm

<HTML>
<HEAD>
</HEAD>
<H1 ALIGN=CENTER>Baja un archivo a tu computadora</H1>
Has clic en el <A HREF=foto.bmp>Autorretrato del Profe Daz</A><BR>
Tambin puedes hacer clic en su computadora <A HREF=foto.bmp>
<IMG SRC="la computadora.gif" ALIGN=MIDDLE BORDER></A><BR>
</BODY>
</HTML>

Aparecer lo siguiente:

Msica y sonido

Nuestra pgina Web puede tener sonidos incorporados, estos sonidos deben ser archivos del
tipo MIDI, WAVE o AU. Y lo ms importante deben ser pequeos, un buen tamao es 40 kb,
ms de 500 kb es una salvajidad super animalesca.
Desde Internet puede bajarse gratuitamente muchos archivos de sonido MIDI, WAVE o AU.
Las etiquetas para Nestscape Navigator y Microsoft Internet Explorer son diferentes.

Para Nestscape Navigator tenemos:

<EMBED SRC=Archivo de sonido WIDTH=Ancho HEIGHT=Altura AUTOSTART= Inicio
automtico LOOP=Repetir>
Donde Archivo de sonido es el nombre del archivo de sonido,
Ancho y Altura son las dimensiones de la consola que permite
manejar el sonido. Inicio automtico indica si el sonido empieza
automticamente (toma el valor de true) o no (toma el valor de
false). Repetir es el nmero de veces que se ejecutar el archivo
de sonido, si es igual a true el sonido se repetir indefinidamente.
Ejemplo 14: Ahora construiremos un documento que nos permitir escuchar dos famosas
canciones.

<HTML>
<HEAD>
</HEAD>
<H1 ALIGN=CENTER>Msica en Netscape Navigator</H1>
<EMBED SRC=bigcountry.mid WIDTH=300 HEIGHT=150 AUTOSTART=FALSE>
Cancin: Big country<P>
<EMBED SRC=takeonme.mid WIDTH=300 HEIGHT=150 AUTOSTART=FALSE>
Cancin: Take on me
</BODY>
</HTML>

Aparece lo siguiente:

Para Internet Explorer tenemos:

<BGSOUND SRC=Archivo de sonido LOOP=Repetir>
Donde Archivo de sonido es el nombre del archivo de
sonido y Repetir es el nmero de veces que se ejecutar el
archivo de sonido, si es igual a INFINITE el sonido se
ejecutara indefinidamente.
Adems a diferencia del ejemplo anterior, aqu no se ver
ninguna consola de manejo de sonido.

Ejemplo 15: Ahora construiremos un documento que nos permitir escuchar el tema musical de
la pgina del Profe Daz.
<HTML>
<HEAD>
</HEAD>
<H1 ALIGN=CENTER>Msica en Internet Explorer</H1></CENTER>
<BGSOUND SRC=takeonme.mid LOOP=INFINITE>
</BODY>
</HTML>

Como puedes observar, ya no aparece
ninguna consola de manejo de sonido,
pero la msica si se escucha.

Texto e imagen en movimiento

Para ello usamos las marquesinas que es un cuadro donde se desplaza el texto (slo es valido
para Internet Explorer).
La etiqueta es:
<MARQUEE WIDTH=Ancho BGCOLOR=Color de fondo DIRECTION=Direccin
SCROLLAMOUNT=Avance SCROLLDELAY=Tiempo BEHAVIOR=Comportamiento>Texto o
Imagen</MARQUEE>
Donde Ancho es el ancho en porcentaje o pxeles del cuadro que contiene la
marquesina. Color de fondo es el color de fondo del cuadro que contiene la
marquesina. Direccin es la direccin en la que se mueve la marquesina puede
ser LEFT o RIGHT. Avance es la cantidad de pxeles que salta el texto o
imagen en cada avance, cuanto mayor es, ms rpido avanza. Tiempo define el
tiempo en milisegundos entre cada salto del texto o imagen, cuanto mayor es,
ms lento avanza. Comportamiento define el tipo de movimiento si toma el
valor de SCROLL entonces el texto o imagen aparece por un lado y desaparece
por el otro antes de volver a aparecer, si toma el valor de SLIDE entonces
aparece por un lado y se detiene en el otro y si es ALTERNATE entonces rebota
de un lado a otro.

Ejemplo 16: Crearemos algunos textos e imagen en movimiento.

<HTML>
<HEAD>
</HEAD>
<H1 ALIGN=CENTER>Texto e imagen en movimiento</H1>
<MARQUEE>Hola amigos</MARQUEE>
<CENTER>
<MARQUEE WIDTH=50% BGCOLOR=YELLOW DIRECTION=RIGHT>de todo el mundo</MARQUEE>
</CENTER>
<MARQUEE SCROLLAMOUNT=10>bienvenidos a mi pgina</MARQUEE>
<MARQUEE SCROLLDELAY=200>regresa pronto</MARQUEE>
<MARQUEE BEHAVIOR=SLIDE>no te olvides</MARQUEE>
<MARQUEE BEHAVIOR=ALTERNATE>que siempre publicamos novedades.</MARQUEE>
<MARQUEE BEHAVIOR=ALTERNATE>
<IMG SRC=foto.bmp WIDTH=200 HEIGHT=200></MARQUEE>
</BODY>
</HTML>

El resultado final es todo en movimiento:

MultiVentanas

Significa crear varias ventanas independientes en un solo documento, tambin se les conoce
como FRAMES, es decir cada ventana es un frame.
Esto se hace con las siguientes etiquetas (estas etiquetas reemplazaran a las etiquetas
<BODY> y </BODY> de un documento normal.).
<FRAMESET COLS=Columnas ROWS=Filas> y </FRAMESET>
Crea los frames, donde Columnas da las dimensiones de los frames verticales y
Filas da las dimensiones de los frames horizontales. COLS y ROWS no pueden
ser usados al mismo tiempo en la misma etiqueta FRAMESET.
<FRAME SRC=Pgina NAME=Nombre MARGINWIDTH=Mrgenes horizontal
MARGINHEIGHT= Mrgenes vertical SCROLLING= Desplazamiento NORESIZE
FRAMEBORDER=Borde>
Coloca las pginas Web en los frames creados con FRAMESET. Pgina es la
direccin de la pgina que se colocar en el frame. Nombre es un nombre que
se usar para hacer referencia al frame. Mrgenes horizontal es el margen
izquierdo y derecho del frame en pxeles. Mrgenes vertical es el margen
superior e inferior del frame en pxeles. Desplazamiento permite colocar o no
barras de desplazamiento puede ser YES, NO o AUTO, por defecto es auto o
sea que las colocar si es necesario. NORESIZE no permite cambiar el tamao
del frame. Borde permite eliminar el borde del frame cuando toma el valor de
NO.
Ejemplo 17: Crearemos 3 frames horizontales donde colocaremos algunas de las pginas que
hemos creado en esta sper separata.

<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS=28%,*,40%>
<FRAME SRC=ejemplo1.htm>
</FRAMESET>
</HTML>

El asterisco (*) en la cadena 28%,*,40% significa que dejamos que HTML coloque el
porcentaje que falta para completar el 100%.

La pgina resultante es:

Ejemplo 18: Continuando con este curso magnifico de HTML crearemos unos frames muy
bonitos desde donde podremos apreciar todas nuestras pginas creadas.

Primero: Cree la pgina ttulo.htm

<HTML>
<HEAD>
<TITLE>Ttulo</TITLE>
</HEAD>
<H1><FONT COLOR=BLUE>
<MARQUEE>Bienvenidos a los ejemplos del Profe Daz</MARQUEE>
</FONT></H1>
</BODY>
</HTML>
Segundo: Cree la pgina lista.htm

<HTML>
<HEAD>
<TITLE>Lista</TITLE>
</HEAD>
<H4 ALIGN=CENTER>Lista de Ejemplos</H4>
<A HREF=ejemplo1.htm TARGET=PRINCIPAL>Ejemplo1</A><BR>
<A HREF=ttulo.htm TARGET=PRINCIPAL>Ttulo</A><BR>
<A HREF=lista.htm TARGET=PRINCIPAL>Lista</A><BR>
<A HREF=inicial.htm TARGET=PRINCIPAL>Inicial</A>
</BODY>
</HTML>
TARGET permite enviar la pgina al frame que llamaremos PRINCIPAL, vea el siguiente
paso.

Tercero: Crearemos los frames en un documento que guardaremos como inicial.htm. Esta ser
la pgina que iniciar toda nuestra presentacin:

<HTML>
<HEAD>
<TITLE>Inicial</TITLE>
</HEAD>
<FRAMESET COLS=20%,*>
<FRAME SRC=lista.htm>
<FRAMESET ROWS=15%,*>
<FRAME SRC=ttulo.htm>
<FRAME NAME=PRINCIPAL>
</FRAMESET>
</FRAMESET>
</HTML>

Fsica y Matemticas

Telefs: 485-4698 9726-6306
El resultado final es:

La hacer clic en el hipervnculo Ejemplo12, ver lo siguiente:

Colocar tu pgina en Internet

Si deseas subir o colocar tu pgina
en Internet puedes conectarte con
www.geocities.com
Por ejemplo la pgina del Profe Daz
esta alojada en www.geocities.com,
lo malo es que la direccin que te
dan es demasiada larga, por ejemplo
mi pgina tiene la direccin
www.geocities.com/separataselprofe
diaz/Elprofediaz.htm

Ahora, si deseas una direccin ms
corta puedes conectarte a
www.lanzadera.com
Esta pgina es un redireccionador,
es decir te dan una direccin ms
corta que se conecta con la
direccin ms larga. Por ejemplo mi
direccin ms corta es
www.lanzadera.com/elprofediaz

Adems de GEOCITIES, en Internet existen muchos lugares donde puedes alojar
gratuitamente tu pgina, tambin adems de LANZADERA existen muchas pginas
redireccionadoras.

Bueno amiguitos hasta este
punto ya pueden crear y
publicar en Internet pginas
Web ms o menos decentes, si
quieres crear pginas ms
completas, contina leyendo mi
separata.
Enlace dentro de la misma pgina

Cuando nuestra pgina es muy extensa a veces nos conviene saltar de una posicin a otra para
no perder tiempo usando las barras de desplazamiento o la ruedita.
Este enlace tiene la siguiente forma:

<A HREF=#Marca>HiperTexto o HiperImagen</A>
Donde Marca indica el sitio donde
queremos saltar y el HiperTexto o
HiperImagen es cualquier texto o imagen a
la que se deber hacer clic para saltar a la
posicin deseada.
Para que esto funcione es necesario colocar la Marca en el lugar exacto donde se saltar, de la
siguiente forma:

<A NAME=Marca></A>

Ejemplo 19:
Crearemos una pgina
con un ndice que salte
al tema indicado
dentro de la misma
pgina.

Al hacer clic en el
enlace Microsoft
Word, la pgina salta,
tal como se ve en la
figura.

<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Lista de Separatas del Profe Daz</H1>
El siguiente listado se muestra todas las separatas publicadas por el profe Daz:<br>
<A HREF="#Windows">Microsoft Windows XP</A><BR>
<A HREF="#Word">Microsoft Word XP</A><BR>
Microsoft Excel XP
<A HREF="#Excel"><IMG SRC="la computadora.gif"></A><P>
Microsoft PowerPoint XP
<A HREF="#PowerPoint"><IMG SRC=estrella.gif ALT="Has clic para ir a PowerPoint XP"
BORDER ALIGN=MIDDLE HEIGHT=80 WIDTH=80></A><P>
<HR>
<H1>
<A NAME="Windows"></A><U>Microsoft Windows XP</U>: Es un programa Sistema Operativo
que se encarga de la administracin bsica de la computadora. Es lo primero que se debe
aprender antes de usar cualquier otro programa de computadora. La ltima versin de
Windows es la 2002 XP<P>
<A NAME="Word"></A><U>Microsoft Word XP</U>: Es un programa Procesador de Textos que
se utiliza para escribir todo tipo de documentos. Con este programa podr escribir desde
documentos tan sencillos como una carta hasta documentos tan avanzados como un libro. La
ltima versin de Word es la 2002 XP<P>
<A NAME="Excel"></A><U>Microsoft Excel XP</U>: Es una Hoja de Clculo que se utiliza para
manipular datos numricos y expresarlos tambin en forma grfica. Este programa cuenta
adems con utilidades para manejar bases de datos y resolver problemas avanzados como los
tratados en la Programacin Lineal. La ltima versin de Excel es la 2002 XP<P>
<A NAME="Powerpoint"></A><U>Microsoft PowerPoint XP</U>: Es un programa que se utiliza
para realizar presentaciones tipo multimedia, o sea que incluyan imgenes, sonido y video. Se
recomienda usarlo con un Proyector para que la audiencia pueda ver la presentacin con todo
detalle. La ltima versin de PowerPoint es la 2002 XP
</H1>
</BODY>
</HTML>

Enlace con un punto especfico dentro de otra pgina

En este caso queremos enlazarnos con otra pgina, pero queremos ir directamente a un sitio
concreto de dicha pgina.

Este enlace tiene la siguiente forma:

<A HREF=Pgina#Marca>HiperTexto o HiperImagen</A>
Donde Pgina es el nombre de la pgina a la
que queremos ir y Marca indica el sitio
donde queremos saltar. HiperTexto o
HiperImagen es cualquier texto o imagen a
la que se deber hacer clic para saltar a la
posicin deseada.
Para que esto funcione es necesario colocar la Marca en el lugar exacto donde se saltar, de la
siguiente forma:

<A NAME= Marca></A>

Ejemplo 20: Crearemos una pgina con un ndice que salte directamente la descripcin de
Windows XP y PowerPoint XP del ejemplo19.htm.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Windows XP y PowerPoint XP</H1>
<H3>
Haga clic para ver las descripciones de estos dos conocidos programas:<p>
<A HREF="ejemplo19.htm#Windows">Microsoft Windows XP</A><BR>
Microsoft PowerPoint XP
<A HREF="ejemplo19.htm#PowerPoint"><IMG SRC=estrella.gif ALT="Has clic para ir a
PowerPoint XP"
BORDER ALIGN=MIDDLE HEIGHT=80 WIDTH=80></A>
</H3>
</BODY>
</HTML>

Mapas

Hemos visto varias formas de enlazar una pgina con otra, por medio de un enlace de texto o
por medio de una imagen. En este ltimo caso se usaba toda la imagen para enlazar.
En los mapas tambin se utiliza una imagen, pero aqu se divide la imagen, de tal forma que
cada parte de la imagen nos lleve a un enlace distinto. Imagine una imagen del mundo, donde al
hacer un clic en cada pas nos lleve a la pgina de dicho pas.
Ejemplo 21: Crearemos una pgina tal que al hacer clic al profesor nos enlacemos con el
ejemplo 16 y al hacer clic al esqueleto nos enlacemos con el ejemplo 17.

Las imgenes a usar slo pueden ser del tipo GIF o JPG, sino no funciona.

Primero: Averigemos las coordenadas en nuestra imagen
Podemos usar Photoshop o Paint para saber las coordenadas de nuestra imagen. En este caso
para no complicarnos usemos Paint.

1. Abra el Paint y cargue el archivo El Profe Daz.gif.

2. Ahora usando la herramienta Seleccin determine las coordenadas del profesor y del
esqueleto. Obtendr algo parecido a lo que muestra la siguiente figura:

3. Con estos datos procedemos a crear la pgina. Para ello usamos siguiente etiqueta:

<IMG SRC="el profe daz.gif" usemap="#elprofe">
<MAP name="elprofe">
<AREA shape="rect" coords="20,24,145,260" ALT=Hola HREF="ejemplo16.htm">
<AREA shape="rect" coords="185,15,260,235" HREF="ejemplo17.htm">
</MAP>

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>El Profe Daz</H1>
<CENTER><IMG SRC="el profe daz.gif" usemap="#elprofe"></CENTER>
<MAP name="elprofe">
<AREA shape="rect" coords="20,24,145,260 "ALT="Hola" HREF="ejemplo16.htm">
<AREA shape="rect" coords="185,15,260,235" HREF="ejemplo17.htm">
</MAP>
</BODY>
</HTML>

No conviene usar los parmetros Hight y Width pues cambiaran la forma de la figura
original y las coordenadas seran distintas.

Adems de usar una forma rectangular (shape=rect) tambin
podemos usar una forma circular (shape=circle ) slo que en este
caso debemos usar las coordenadas del centro y el radio, por
ejemplo se escribira as:
coords=A,B,R.
20,24
145,260
260,235
185,15
A , B
R
A , B
C , D
E , F
G , H
I , J
K , L
M , N
, O
P , Q
R , S
Adems de usar una forma rectangular (shape=rect)
tambin podemos usar una forma poligonal
(shape=poly) slo que en este caso debemos usar las
coordenadas de cada vrtice del polgono hasta cerrar
el polgono, por ejemplo si queremos un rea en forma
de estrella sera as:
coords=A,B,C,D,E,F,G,H,I,J,K,L,M,N,,O,P,Q,R,S,A,B

Formularios

Hemos visto como hacer que el usuario pueda comunicarse con nosotros a travs del correo
electrnico (vea el ejemplo 12), pero a veces quisiramos que el usuario respondas a ciertas
preguntas o nos d algunos comentarios como en una encuesta, en este caso usamos los
formularios.
Lamentablemente est utilidad slo servir si la computadora donde ve la pgina tiene un
servicio de correo electrnico proporcionado por algn proveedor de Internet. Si ese no es el
caso entonces esta utilidad no servir para nada y no se podr enviar ningn dato.

Estructura general de un formulario que envi los datos a un correo electrnico: Por ejemplo
enviemos los datos al correo del Profe Daz.

<FORM ACTION=mailto:elprofediaz@hotmail.com METHOD=post ENCTYPE=text/plain>
Cuerpo del formulario
Botones de envo y borrado.
</FORM>

El cuerpo del formulario esta formado por tres clase de entrada que son: Input,
Textarea o Select
Los botones de opcin son entradas del tipo Input

Describamos estos elementos:

Input: Crea un cuadro de texto, una casilla de verificacin, un crculo de opcin o un botn.

<INPUT Type =Text Name=Nombre Value=Valor Size=Tamao MaxLenght=TamMximo>
Crea un cuadro de texto. El Nombre identifica al cuadro de texto, Valor es
el texto por defecto que aparece en el cuadro, Tamao es el tamao en
caracteres del cuadro de texto y TamMximo es el mximo nmero de
caracteres que puede escribir.
Si no usa Size el tamao por defecto ser 20.
Al terminar de escribir en el cuadro de texto, este texto es almacenado en la
variable Nombre, la cual ser enviada al correo electrnico.

<INPUT Type =Password Name=Nombre Value=Valor Size=Tamao MaxLenght=TamMximo>
En lugar de letras aparecern asteriscos en el cuadro de texto.

<INPUT Type =Hidden Name=Nombre Value=Valor Size=Tamao MaxLenght=TamMximo>
Ni siquiera aparecer lo que escriba.
<INPUT Type =Checkbox Name=Nombre Value=Valor Checked>
Crea una casilla de verificacin, que el usuario puede activarla o desactivarla con
un clic. Valor es el dato que se almacenar en la variable Nombre cuando la
casilla es activada. Si escribe Checked la casilla aparece activada .

<INPUT Type =Radio Name=Nombre Value=Valor Checked>
Crea un crculo pequeo de opcin, que el usuario puede activar o desactivar con
un clic. Si escribe Checked el crculo aparece activado .

<INPUT Type =Submit Name=Nombre Value=Valor>
Crea un botn que provoca el envo del formulario al correo electrnico. Valor
es el texto que aparece en el interior del botn.

<INPUT Type =Reset Name=Nombre Value=Valor>
Crea un botn que provoca el borrado de todos los datos ingresados al
formulario, regresando todo a su forma por defecto.

Ejemplo 22: Crearemos una ficha de datos que el usuario deber llenar y enviar
automticamente al correo electrnico del Profe Daz de Lima-Per.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Ficha de datos</H1>
<FORM ACTION="mailto:elprofediaz@hotmail.com" METHOD="post" ENCTYPE="Text/Plain">
Nombre:
<INPUT Type="Text" Name="Nombre" MaxLenght=15><P>
Primer Apellido:
<INPUT Type="Text" Name="Primer Apellido" MaxLenght=15>
Segundo Apellido:
<INPUT Type="Text" Name="Segundo Apellido" MaxLenght=15><P>
Domicilio:
<INPUT Type="Text" Name="Domicilio" Size=40 MaxLenght=30><P>
Sexo: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
Hombre: <INPUT Type="Radio" Name="Sexo" Value="Hombre">
Mujer: <INPUT Type="Radio" Name="Sexo" Value="Mujer"><P>
Pelcula favorita: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
Terminator: <INPUT Type="Checkbox" Name="Terminator" Value="Si">
El Barco Fantasma: <INPUT Type="Checkbox" Name="El Barco Fantasma" Value="Si">
Robocop: <INPUT Type="Checkbox" Name="Robocop" Value="Si"><P>
<INPUT Type="Submit" Value="Enviar datos">
<INPUT Type="Reset" Value="Borrar datos">
</FORM>
</BODY>
</HTML>

Select: Crea una lista desplegable desde la cual podemos escoger una o ms opciones.

<SELECT Name=Nombre size=Tamao Multiple>
Especificacin de opciones
</SELECT>
El Nombre identifica a la lista desplegable, el Tamao determina la altura
inicial de la lista en lneas de texto. Si escribe Multiple el usuario podr elegir
ms de una opcin.

La Especificacin de opciones contiene la lista de elementos que aparecen en la lista y tiene
la siguiente estructura:

<OPTION Value=Valor Selected>Descripcin</OPTION>
Valor es el dato que se almacenar en Nombre cuando se seleccione esta
opcin y ser enviada al correo electrnico. Si escribe Selected est opcin
aparece seleccionada por defecto.

Ejemplo 23:
Crearemos un men a
la carta de un
restaurante limeo,
donde el usuario
escoger lo que desea
y lo enviar
automticamente al
correo del Profe Daz.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Restaurante Limeo "El Paisano"</H1>
Entrada (elija solo uno):<BR>
<SELECT Name="Entrada" size=1>
<OPTION Value="Ninguna">Ninguna</OPTION>
<OPTION Value="Cebiche">Cebiche</OPTION>
<OPTION Value="Ocopa">Ocopa</OPTION>
<OPTION Value="Leche de tigre">Leche de tigre</OPTION>
<OPTION Value="Papa a la huancana">Papa a la huancana</OPTION>
<OPTION Value="Sopa del da">Sopa del da</OPTION>
</SELECT><P>
Segundo (puede elegir ms de uno):<BR>
<SELECT Name="Segundo" size=4 Multiple>
<OPTION Value="Ninguno">Ninguno</OPTION>
<OPTION Value="Adobo de chancho">Adobo de chancho</OPTION>
<OPTION Value="Arroz chaufa">Arroz chaufa</OPTION>
<OPTION Value="Arroz con pato">Arroz con pato</OPTION>
<OPTION Value="Bistec con papas">Bistec con papas</OPTION>
<OPTION Value="Chicharrn de pescado">Chicharrn de pescado</OPTION>
<OPTION Value="Lomo saltado">Lomo saltado</OPTION>
<OPTION Value="Tallarin saltado">Tallarn saltado</OPTION>
</SELECT><P>
Refresco (elija solo uno):<BR>
<SELECT Name="Refresco" size=1>
<OPTION Value="Ninguna">Ninguna</OPTION>
<OPTION Value="Inca Kola">Inca Kola</OPTION>
<OPTION Value="Mansanilla">Mansanilla</OPTION>
<OPTION Value="Refresco de maca">Refresco de maca</OPTION>
<OPTION Value="Refresco de ua de gato" Selected>Refresco de ua de gato</OPTION>
</SELECT><P>
<INPUT Type="Submit" Value="Enviar datos"> <INPUT Type="Reset" Value="Borrar datos">
</FORM>
</BODY>
</HTML>

TextArea: Crea un cuadro donde el usuario puede escribir un texto tan largo como desee.

<TEXTAREA Name=Nombre Cols=Columnas Rows=Filas Wrap=Valor>
Texto que aparece por defecto (si desea puede dejarlo en blanco)
</TEXTAREA>
El Nombre identifica al cuadro, Columnas determina el ancho del cuadro,
Filas determina la altura del cuadro. Cuando Valor es igual a off el usuario
tendr que presionar ENTER para cambiar de lnea en cambio si Valor es igual
a virtual el cambio de lnea es automtico, por defecto es virtual.
Ejemplo 24: Crearemos una pgina donde el usuario escribir un comentario u opinin acerca
de La contaminacin en nuestro planeta Jpiter y lo enviar automticamente al correo del
Profe Daz.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Cuidemos Nuestro Planeta</H1>
Mi opinin respecto a la contaminacin es:<P>
<TEXTAREA Name="Opinin" Cols=30 Rows=5>
No olvides firmar tu comentario.
</TEXTAREA><P>
<INPUT Type="Submit" Value="Enviar datos">
<INPUT Type="Reset" Value="Borrar datos">
</FORM>
</BODY>
</HTML>

Si deseas saber ms sobre la creacin
de pginas Web entonces baja mi
separata de Javascript, DHTML,
Flash, etc.


Fsica y Matemticas

Telefs: 485-4698 9726-6306

Manual de HTML (Imprimir)

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual de HTML (Imprimir)

Cargado por

Copyright:

Formatos disponibles

Separatas de computacin? Conctate a: 1 www.lanzadera.

También podría gustarte