Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Conctate a:
www.lanzadera.com/elprofediaz
HTML
HTML o Hypertex t Markup Language o Lenguaje de Diseo de Hipertextos es un lenguaje que
se u tiliza 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 In ternet
Explorer. En realidad puedes usar cualquier editor de texto s y cualquier navegador.
- Profe Daz, necesito estar conectado a In ternet 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 u sar el Fron tPage 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 autom ticamente 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 o tra pregun ta?
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 Fron tPage. Pero de eso
hablaremos o tro da.
- O tra pregun ta 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 o tra vez!
- Auxiliooooooooooooooooooooooooooooooooooooo!
Por fin se callo, ahora empecemos. Y presten a tencin o ya saben lo que les espera!
elprofediaz@hotmail.com
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 no tas escriba el siguiente cdigo.
<HTML>
<HEAD>
<TITLE>E jemplo 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 "E jemplo1.htm" y recuerda colocar las comillas.
Cuarto: Abre el In ternet Explorer y mediante su men Archivo/Abrir carga tu documen to
Ejemplo1.htm el resulta do 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>.
Recomendacin Sper Importante:
Es
mejor
colocar
todo s
los
elemen tos 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:\Separa tas del ProfeDiaz\HTML
Encabezados
Los encabezados son utilizados para resaltar palabras o frases. Tenemos seis tamaos de
encabezado el ms grande esta comp rendido en tre 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.
elprofediaz@hotmail.com
www.lanzadera.com/elprofediaz
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>
<TITLE>E jemplo 2</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER >Frases Famosas</H1>
<H2>Ganar no es to do, es lo nico.</H2>
<H3>El secreto de andar so bre 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 In ternet Explorer y mediante su men Archivo/Abrir carga tu documento
Ejemplo2.htm el resulta do 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.
elprofediaz@hotmail.com
www.lanzadera.com/elprofediaz
elprofediaz@hotmail.com
www.lanzadera.com/elprofediaz
Aqua
Blue
Coral
Darkgol denr
Darkorchi d
Darkvi olet
Forestgr een
Green
Khaki
Li ghtcyan
Li ghtskyblue
Magenta
Medi umslateb
Moccasi n
Orangered
Peachpuff
Rosybrow n
Si enne
Steelblue
Wheat
Aquamari ne
Bluevi olet
Cornflow er
Darkgray
Darkred
Deeppi nk
Fuchsi a
Greeyellow
Lavender
Li ghtgolden
Li ghtslategr
Maroon
Medi umspri ng
Navajow hi te
Orchi d
Peru
Royal blue
Silver
Tan
Whi te
Azure
Brow n
Cornsi lk
Darkgreen
Darksalmon
Deepskyblue
Gai nsboro
Honeydew
Lavenderblue
Li ghtgray
Li ghts teelbl
Medi umaquam
Medi umturqu
Navy
Palegol denr
Pi nk
Saddlebrow n
Skyblue
Teal
Whi tesmoke
Bei ge
Burlyw ood
Crimson
Darkkhaki
Darkseagr een
Di mgray
Ghostw hi te
Hotpi nk
Law ngreen
Li ghtgr een
Li ghtyellow
Medi umblue
Medi umvi olet
Oldlace
Palegreen
Plum
Salmon
Slateblue
Thi stle
Yellow
Bi sque
Cadetblue
Cyan
Darkmagent
Darkslatebl
Dodger blue
Gold
Indi anred
Lemonchi llon
Li ghtpi nk
Li me
Medi umorchi d
Mi dni ghtblue
Olive
Paleturquoi se
Pow derblue
Sandybrow n
Slategray
Tomato
Yellow green
Black
Chartr euse
Darkblue
Darkoli vegre
Darkslategr
Fi rebri ck
Goldenrod
Indi go
Li ghtblue
Li ghtsalmon
Li megreen
Medi umpurp
Mi ntcream
Olivedrab
Palevi oletr
Purple
Seagreen
Snow
Turquoi se
elprofediaz@hotmail.com
www.lanzadera.com/elprofediaz
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 documen to.
<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: Dibujemo s algunas lneas.
<HTML>
<HEAD>
<TITLE>E jemplo 5</TITLE>
</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>
elprofediaz@hotmail.com
www.lanzadera.com/elprofediaz
Alineacin de texto
<P ALIGN=Alineacin > y </P>
<CENTER> y </CENTER>
Lista de elementos
HTML permite crear tres tipos de listas de elemen tos. 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>
<TITLE>E jemplo 6</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER><FONT COLOR=GREEN><B><I>Pgina Personal de Arturi to</I></B>
</FONT></H1>
elprofediaz@hotmail.com
www.lanzadera.com/elprofediaz
Computacin e Informtica
Fsica y Matem ticas
Anlisis y Diseo de Sistemas
Asesora e Instalacin de Software
Asesora y Ensamblaje de Computa doras
Telefs:
E-mail:
Website:
485-4698 9726-6306
elprofediaz@hotmail.com
www.lanzadera.com/elprofediaz
elprofediaz@hotmail.com
www.lanzadera.com/elprofediaz
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 en trar en ms detalles, en el siguiente ejemplo crearemo s una tabla., vers que
facilsimo es.
Ejemplo 7: En este ejemplo crearemo s nuestro horario escolar de vacaciones tiles. Ser una
tabla de 5 filas por 4 columnas.
<HTML>
<HEAD>
<TITLE>E jemplo 7</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Horario Escolar</H1>
elprofediaz@hotmail.com
10
www.lanzadera.com/elprofediaz
<TABLE>
<TD>Hora</TD><TD>Lunes</TD><TD>Mircoles</TD><TD>Viernes</TD>
<TR>
<TD>8-10</TD><TD>Na tacin</TD><TD>Natacin</TD><TD>Computacin</TD>
<TR>
<TD>10-12</TD><TD>Karate</TD><TD>Karate</TD><TD>Na tacin</TD>
<TR>
<TD>12-14</TD><TD>Ingls</TD><TD>Compu tacin</TD><TD>Karate</TD>
<TR>
<TD>14-16</TD><TD>Compu tacin</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 a tributo s 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 ta bla.
Margen interior indica el margen entre el bo rde 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 ta bla en porcentaje, donde 100% es el ancho de to da la pgina.
Ejemplo 8: Ahora modificaremos nuestro horario escolar creado en el ejemplo an terior.
<HTML>
<HEAD>
<TITLE>E jemplo 8</TITLE>
elprofediaz@hotmail.com
11
www.lanzadera.com/elprofediaz
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Horario Escolar</H1>
<TABLE ALIGN=CENTER BGCOLOR=LIGHTYELLOW BORDER=12 BORDERCOLOR=BLUE width=90%>
<TD>Hora</TD><TD>Lunes</TD><TD>Mircoles</TD><TD>Viernes</TD>
<TR>
<TD>8-10</TD><TD>Na tacin</TD><TD>Natacin</TD><TD>Computacin</TD>
<TR>
<TD>10-12</TD><TD>Karate</TD><TD>Karate</TD><TD>Na tacin</TD>
<TR>
<TD>12-14</TD><TD>Ingls</TD><TD>Compu tacin</TD><TD>Karate</TD>
<TR>
<TD>14-16</TD><TD>Compu tacin</TD><TD>Ingls</TD><TD>Ingls</TD>
</TABLE>
Otro modelo del horario escolar:
<TABLE ALIGN=CENTER BORDER CELLPADDING=10 CELLSPACING=20 BORDERCOLOR=RED>
<TD>Hora</TD><TD>Lunes</TD><TD>Mircoles</TD><TD>Viernes</TD>
<TR>
<TD>8-10</TD><TD>Na tacin</TD><TD>Natacin</TD><TD>Computacin</TD>
<TR>
<TD>10-12</TD><TD>Karate</TD><TD>Karate</TD><TD>Na tacin</TD>
<TR>
<TD>12-14</TD><TD>Ingls</TD><TD>Compu tacin</TD><TD>Karate</TD>
<TR>
<TD>14-16</TD><TD>Compu tacin</TD><TD>Ingls</TD><TD>Ingls</TD>
</TABLE>
</BODY>
</HTML>
El resultado se ve a continuacin:
Todava podemos mejorar la tabla usando los a tributos mostrados en la siguiente pgina:
elprofediaz@hotmail.com
12
www.lanzadera.com/elprofediaz
El
resultado
es
siguiente, mira bien:
el
elprofediaz@hotmail.com
13
www.lanzadera.com/elprofediaz
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 ta mao 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 documen to HTML se hace mediante la etiqueta:
<IMG
SRC=Archivo de imagen ALT=Nombre alterna tivo 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 to do. Nombre alternativo
es un tex to 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 ta mbin para alinear el tex to
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 permi ten 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 a tribu tos 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 LE FT, 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>
<TITLE>E jemplo 10</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTYELLOW>
<H1 ALIGN=CENTER>Mis GIF ANIMADOS Favoritos</H1>
elprofediaz@hotmail.com
14
www.lanzadera.com/elprofediaz
elprofediaz@hotmail.com
15
www.lanzadera.com/elprofediaz
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 separa ta.
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>
<TITLE>E jemplo 11</TITLE>
</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 compu tacin 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 HRE F="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 compu tacin 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:
elprofediaz@hotmail.com
16
www.lanzadera.com/elprofediaz
elprofediaz@hotmail.com
17
www.lanzadera.com/elprofediaz
Nota: Sin embargo est u tilidad 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 u tilidad no servir para nada y no se podr enviar ningn correo.
elprofediaz@hotmail.com
18
www.lanzadera.com/elprofediaz
Msica y sonido
Nuestra pgina Web puede tener sonidos incorporados, esto s sonidos deben ser archivos del
tipo MIDI, WAVE o AU. Y lo ms importan te deben ser pequeos, un buen tamao es 40 kb,
ms de 500 kb es una salvajidad super animalesca.
Desde In ternet puede bajarse gra tuitamen te 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
autom tico 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 autom tico indica si el sonido empieza
autom ticamente (toma el valor de true) o no (to ma 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.
elprofediaz@hotmail.com
19
www.lanzadera.com/elprofediaz
Ejemplo 14: Ahora construiremos un documento que nos permitir escuchar dos famosas
canciones.
<HTML>
<HEAD>
<TITLE>E jemplo 14</TITLE>
</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:
elprofediaz@hotmail.com
20
www.lanzadera.com/elprofediaz
elprofediaz@hotmail.com
21
www.lanzadera.com/elprofediaz
MultiVentanas
Significa crear varias ventanas independientes en un solo documento, ta mbin se les conoce
como FRAMES, es decir cada ventana es un frame.
Esto se hace con las siguientes etiquetas (esta s etiquetas reemplazaran a las etiquetas
<BODY> y </BODY> de un documen to normal.).
<FRAMESET COLS=Columnas ROWS=Filas> y </FRAMESET>
Crea los frames, donde Columnas da las dimensiones de los fra mes 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 au to o
sea que las colocar si es necesario. NORESIZE no permite cambiar el tamao
del frame. Borde permi te eliminar el borde del frame cuando toma el valor de
NO.
elprofediaz@hotmail.com
22
www.lanzadera.com/elprofediaz
Ejemplo 17: Crearemos 3 frames horizontales donde colocaremos algunas de las pginas que
hemos creado en esta sper separa ta.
<HTML>
<HEAD>
<TITLE>E jemplo 17</TITLE>
</HEAD>
<FRAMESET COLS=28%,*,40%>
<FRAME SRC=ejemplo1.htm>
<FRAME SRC=ejemplo2.htm>
<FRAME SRC=ejemplo3.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>
<BODY BGCOLOR=LIGHTYELLOW>
<H1><FONT COLOR=BLUE>
<MARQUEE>Bienvenidos a los ejemplos del Profe Daz</MARQUEE>
</FONT></H1>
</BODY>
</HTML>
elprofediaz@hotmail.com
23
www.lanzadera.com/elprofediaz
elprofediaz@hotmail.com
24
www.lanzadera.com/elprofediaz
Computacin e Informtica
Fsica y Matem ticas
Anlisis y Diseo de Sistemas
Asesora e Instalacin de Software
Asesora y Ensamblaje de Computa doras
Telefs:
E-mail:
Website:
485-4698 9726-6306
elprofediaz@hotmail.com
www.lanzadera.com/elprofediaz
elprofediaz@hotmail.com
25
www.lanzadera.com/elprofediaz
elprofediaz@hotmail.com
26
www.lanzadera.com/elprofediaz
Al hacer clic en el
enlace
Microsoft
Word, la pgina salta,
tal como se ve en la
figura.
elprofediaz@hotmail.com
27
www.lanzadera.com/elprofediaz
<HEAD>
<TITLE>E jemplo 19</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Lista de Separatas del Profe Daz</H1>
El siguiente listado se muestra todas las separa tas 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 Opera tivo
que se encarga de la administracin bsica de la computadora. Es lo primero que se debe
aprender antes de usar cualquier otro p rograma de compu tadora. La ltima versin de
Windows es la 2002 XP<P>
<A NAME="Word"></A><U>Microsoft Word XP</U>: Es un programa Procesador de Tex tos que
se u tiliza para escribir todo tipo de documen tos. Con este programa podr escribir desde
documentos tan sencillos como una carta hasta documento s 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 cuen ta
adems con utilidades para manejar bases de da tos y resolver pro blemas avanzados como los
tra tado s 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 u tiliza
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>
elprofediaz@hotmail.com
28
www.lanzadera.com/elprofediaz
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>
<TITLE>E jemplo 20</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Windows XP y PowerPoint XP</H1>
<H3>
Haga clic para ver las descripciones de esto s do s 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 tex to o
por medio de una imagen. En este ltimo caso se usa ba 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.
elprofediaz@hotmail.com
29
www.lanzadera.com/elprofediaz
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 Pho toshop 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.
elprofediaz@hotmail.com
30
www.lanzadera.com/elprofediaz
2. Ahora usando la herramienta Seleccin determine las coordenadas del profesor y del
esqueleto. Obten dr algo parecido a lo que muestra la siguiente figura:
20,24
185,15
260,235
145,260
3. Con estos da tos 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>
<TITLE>E jemplo 21</TITLE>
</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 rec tangular (shape=rec t) tambin
podemos usar una forma circular (shape=circle ) slo que en este
caso debemo s usar las coordenadas del cen tro y el radio, por
ejemplo se escribira as:
coords=A,B,R.
R
A,B
elprofediaz@hotmail.com
31
www.lanzadera.com/elprofediaz
A,B
P,Q
C,D
R,S
E,F
G,H
,O
K,L
M ,N
I,J
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.
Lamentablemen te 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 u tilidad 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 da tos 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 en trada que son: Input,
Tex tarea o Selec t
Los bo tones de opcin son entradas del tipo Input
Describamos estos elemen tos:
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 tex to, Valor es
el texto por defec to que aparece en el cuadro, Tamao es el ta mao en
caracteres del cuadro de tex to 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 tex to, este tex to 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.
elprofediaz@hotmail.com
32
www.lanzadera.com/elprofediaz
<HTML>
<HEAD>
<TITLE>E jemplo 22</TITLE>
</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>
elprofediaz@hotmail.com
33
www.lanzadera.com/elprofediaz
Segundo Apellido:
<INPUT Type="Text" Name="Segundo Apellido" MaxLenght=15><P>
Domicilio:
<INPUT Type="Text" Name="Domicilio" Size=40 MaxLenght=30><P>
Sexo:            
Hombre: <INPUT Type="Radio" Name="Sexo" Value="Hombre">
Mujer: <INPUT Type="Radio" Name="Sexo" Value="Mujer"><P>
Pelcula favorita:   &n bsp &n bsp &n bsp &n bsp &n bsp
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 iden tifica a la lista desplegable, el Ta mao determina la altura
inicial de la lista en lneas de tex to. Si escribe Multiple el usuario podr elegir
ms de una opcin.
La Especificacin de opciones contiene la lista de elemen tos que aparecen en la lista y tiene
la siguiente estruc tura:
<OPTION Value=Valor Selected>Descripcin</OPTION>
Valor es el da to 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
autom ticamente
al
correo del Profe Daz.
elprofediaz@hotmail.com
34
www.lanzadera.com/elprofediaz
<HTML>
<HEAD>
<TITLE>E jemplo 23</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Restaurante Limeo "El Paisano"</H1>
<FORM ACTION="mailto:elprofediaz@hotmail.com" METHOD="post" ENCTYPE="Text/Plain">
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 tex to tan largo como desee.
<TEXTAREA Name=Nombre Cols=Columnas Rows=Filas Wrap=Valor>
Texto que aparece por defec to (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 autom tico, por defecto es virtual.
elprofediaz@hotmail.com
35
www.lanzadera.com/elprofediaz
Ejemplo 24: Crearemos una pgina donde el usuario escribir un comentario u opinin acerca
de La contaminacin en nuestro planeta Jpiter y lo enviar autom ticamente al correo del
Profe Daz.
<HTML>
<HEAD>
<TITLE>E jemplo 24</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Cuidemos Nuestro Planeta</H1>
<FORM ACTION="mailto:elprofediaz@hotmail.com" METHOD="post" ENCTYPE="Text/Plain">
Mi opinin respecto a la contaminacin es:<P>
<TEXTAREA Name="Opinin" Cols=30 Rows=5>
No olvides firmar tu comen tario.
</TEXTAREA><P>
<INPUT Type="Submit" Value="Enviar datos">
<INPUT Type="Reset" Value="Borrar datos">
</FORM>
</BODY>
</HTML>
Computacin e Informtica
Fsica y Matem ticas
Anlisis y Diseo de Sistemas
Asesora e Instalacin de Software
Asesora y Ensamblaje de Computa doras
Telefs:
E-mail:
Website:
485-4698 9726-6306
elprofediaz@hotmail.com
www.lanzadera.com/elprofediaz
elprofediaz@hotmail.com