Documentos de Académico
Documentos de Profesional
Documentos de Cultura
com/elprofediaz
HTML
HTML o Hypertex t Markup Language o Lenguaje de Diseño de Hipertextos es un lenguaje que
se u tiliza para crear páginas Web.
Preguntas Frecuentes:
- ¿Profe Díaz, qué software necesito para programar en HTML?
Sólo 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 Díaz, necesito estar conectado a In ternet para crear mi página Web?
No. Cuando programas tu página Web, puedes verla en el navegador sin necesidad de estar
conectado a Internet.
- ¿Profe Díaz 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 página Web como si lo estuvieras haciendo en
Word, pero detrás de ellos se esta escribiendo automá ticamente el código HTML. Y además
esos programitas no son 100% eficientes y siempre tendrás 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 Díaz, ¿Puede responderme o tra pregun ta?
¡Queeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!
- No se altere Profe Díaz, 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 básica de tu página Web en esos programitas y luego lo retoques usando
HTML. Personalmente es mejor usar Dreamweaver pues es más fácil añadir elementos de
Flash, Fireworks, etc., pero el más sencillo y no muy malo es el Fron tPage. Pero de eso
hablaremos o tro día.
- O tra pregun ta Profe Díaz, ¿Es fácil aprender HTML?
Claro que sí, pero ya no me hagas perder el tiempo y ¡empecemos el curso!.
- Pero quiero preguntar más.
¡Noooooooooo! ¡Toma! ¡Ja Ja Ja! ¡Toma o tra vez!
- ¡Auxiliooooooooooooooooooooooooooooooooooooo!
Por fin se callo, ahora empecemos. ¡Y presten a tención o ya saben lo que les espera! ☺
Nuestro código
</HEAD>
<BODY>
Nuestro código
</BODY>
</HTM L>
Profesor Carlos Díaz elprofediaz@hotmail.com
¿Separatas de computación? Conéctate 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 página Web que muestre el nombre del conocido Profe Díaz.
Primero: En el Bloc de no tas escriba el siguiente código.
<HTML>
<HEAD>
<TITLE>E jemplo 1</TITLE>
</HEAD>
<BODY>
Hola mi nombre es Carlos Díaz y no te olvides visitar mi página
www.lanzadera.com/elprofediaz
</BODY>
</HTML>
Segundo: En el Explorador de Windows crea una carpeta donde guardaras tus archivos.
Tercero: Guárdalo 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 página.
Encabezados
Los encabezados son utilizados para resaltar palabras o frases. Tenemos seis tamaños de
encabezado el más grande esta comp rendido en tre las etiquetas <H1> y </H1> y el más pequeño
esta comprendido entre las etiquetas <H6> y </H6>.
Si quiere alinear el encabezado utilicé el atributo ALIGN con la opción LEFT(izquierda),
CENTER(Centro), RIGHT(Derecha) o JUSTIFY(Justificado). Si no usa ALIGN el HTML
supondrá la alineación LEFT(Izquierda). En adelante no colocaré las traducciones, así que
mejor consígase un diccionario inglés/español.
<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 están las piedras.</H3>
<H4 ALIGN=RIGHT>Si piensas que puedes o no puedes, siempre tienes razón.</H4>
<H5 ALIGN=RIGHT>El conocimiento es poder.</H5>
<H6> Prohibido, prohibir.</H6>
Que bonitas frases.
</BODY>
</HTML>
Estilos de letra
Ejemplo 3: Crearemos una página Web que muestre el uso de los estilos de letra.
Primero: En el bloc de notas escriba el siguiente código.
<HTML>
<HEAD>
<TITLE>E jemplo 3</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER><U><FONT COLOR=BLUE>Fórmulas Conocidas</FONT></U></H1>
Las siguientes <I>Formulas</I> son muy conocidas y <B>peligrosas de usar</B>.
Por lo tan to <U><I><B>recomendamos</U></I></B> experimen tarlas en un labora torio
<S>super seguro</S> en lo más p rofundo de la <FONT COLOR=BROWN>tierra</FONT>.
Fórmula del <FONT COLOR=GREEN SIZE=+4>agua</FONT>:
H<SUB>2</SUB>O
Fórmula de la energía una <FONT SIZE=-2>partícula</FONT>:
E=mc<SUP>2</SUP>
</BODY>
</HTML>
Segundo: Guárdalo con el nombre "Ejemplo3.htm"
Tercero: En In ternet Explorer carga tu documen to Ejemplo3.htm y obtendrás lo siguiente.
Como habrá nota do en el ejemplo an terior, el HTML no hace caso a los retornos de carro (o
sea los ENTER) normales ni tampoco a múltiples 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 párrafo dejando una línea en blanco.
<BR> Inicia un nuevo párrafo sin dejar ninguna línea 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 más presen table.
Primero: En el bloc de notas modifique el código del ejemplo anterior, tal como se muestra.
<HTML>
<HEAD>
<TITLE>E jemplo 4</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER><U><FONT COLOR=BLUE>Fórmulas Conocidas</FONT></U></H1>
Las siguientes <I>Formulas</I> son muy conocidas y <B>peligrosas de usar</B>.<P>
Por lo tan to <U><I><B>recomendamos</U></I></B> experimen tarlas en un labora torio<BR>
<S>super seguro</S> en lo más p rofundo de la <FONT COLOR=BROWN>tierra</FONT>.<BR>
Fórmula &n bsp;   ; &n bsp; del
<FONT COLOR=GREEN SIZE=+4>agua</FONT>:
H<SUB>2</SUB>O<BR>
Fórmula de la energía una <FONT SIZE=-2>partícula</font>:E=mc<SUP>2</SUP>
</BODY>
</HTML>
Profesor Carlos Díaz elprofediaz@hotmail.com
¿Separatas de computación? Conéctate a: 6 www.lanzadera.com/elprofediaz
Segundo: Guárdalo con el nombre "Ejemplo4.htm"
Tercero: Abre el In ternet Explorer y mediante su menú Archivo/Abrir carga tu documento
Ejemplo4.htm el resulta do se muestra a con tinuación.
Líneas
Las líneas que se pueden insertar en HTML pueden tener distinto color, alineación, ancho
horizontal y espesor.
<HR> Dibuja una línea horizontal de lado a lado del documen to.
<HR COLOR=“Color” ALIGN=“Alineación” WIDTH=“Ancho” SIZE=“Espesor” >
“Color” es el color de la línea horizontal, “Alineación” puede ser
LEFT, RIGHT o CENTER, con un “Ancho” que puede estar en
píxeles o ser un porcentaje del ancho del documento y con un
grosor igual a “Espesor” píxeles.
<HTML>
<HEAD>
<TITLE>E jemplo 5</TITLE>
</HEAD>
<BODY>
Línea de lado a lado<HR>
Línea en el centro con un ancho de 50%<HR WIDTH=50%>
Línea a la derecha con un ancho de 25%<HR ALIGN=RIGHT WIDTH=25%>
Línea a la izquierda con un ancho de 75%<HR ALIGN=LEFT WIDTH=75%>
Línea azul a la izquierda con un ancho de 25%<HR COLOR=BLUE ALIGN=LEFT WIDTH=25%>
Línea verde en el centro con un ancho de 50% y un espesor de 10 píxeles
<HR COLOR=GREEN WIDTH=50% SIZE=10>
Línea roja a la derecha con un ancho de 25% y un espesor de 20 píxeles
<HR COLOR=RED ALIGN=RIGHT WIDTH=25% SIZE=20>
</BODY>
</HTML>
Profesor Carlos Díaz elprofediaz@hotmail.com
¿Separatas de computación? Conéctate a: 7 www.lanzadera.com/elprofediaz
El resultado se muestra a continuación:
Alineación de texto
<P ALIGN=“Alineación” > y </P> Alinea el texto según el valor que tome “Alineación” (LEFT,
CENTER, RIGHT o JUSTIFY)
<CENTER> y </CENTER> Centra el tex to. También puede usar <P ALIGN=CENTER> y </P>
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 numeración 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 viñetas. “Tipo” define el tipo de viñeta y
puede ser disk, square, circle escritas en minúsculas.
Cada elemento de la lista debe ir precedido por la etiqueta <LI>
<DL> y </DL> Lista de glosario o tipo índice. Los títulos principales deben ir
precedidos por la etiqueta <DT> y los títulos de párrafo sangrados
deben ir precedidos por las etiquetas <DD>
Ejemplo 6: Ahora combinemos todo lo aprendido para crear la página personal de Arturito el
niño Genio.
<HTML>
<HEAD>
<TITLE>E jemplo 6</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER><FONT COLOR=GREEN><B><I>Página Personal de Arturi to</I></B>
</FONT></H1>
Tablas
Las tablas son cuadrículas 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 más detalles, en el siguiente ejemplo crearemo s una tabla., verás que
facilísimo 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>
Vemos que a nuestra tabla le falta algo de decoración. Los siguientes a tributo s pueden
ayudarnos:
<HTML>
<HEAD>
<TITLE>E jemplo 8</TITLE>
Profesor Carlos Díaz elprofediaz@hotmail.com
¿Separatas de computación? Conéctate a: 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>Miércoles</TD><TD>Viernes</TD>
<TR>
<TD>8-10</TD><TD>Na tación</TD><TD>Natación</TD><TD>Computación</TD>
<TR>
<TD>10-12</TD><TD>Karate</TD><TD>Karate</TD><TD>Na tación</TD>
<TR>
<TD>12-14</TD><TD>Inglés</TD><TD>Compu tación</TD><TD>Karate</TD>
<TR>
<TD>14-16</TD><TD>Compu tación</TD><TD>Inglés</TD><TD>Inglés</TD>
</TABLE>
Otro modelo del horario escolar:
<TABLE ALIGN=CENTER BORDER CELLPADDING=10 CELLSPACING=20 BORDERCOLOR=RED>
<TD>Hora</TD><TD>Lunes</TD><TD>Miércoles</TD><TD>Viernes</TD>
<TR>
<TD>8-10</TD><TD>Na tación</TD><TD>Natación</TD><TD>Computación</TD>
<TR>
<TD>10-12</TD><TD>Karate</TD><TD>Karate</TD><TD>Na tación</TD>
<TR>
<TD>12-14</TD><TD>Inglés</TD><TD>Compu tación</TD><TD>Karate</TD>
<TR>
<TD>14-16</TD><TD>Compu tación</TD><TD>Inglés</TD><TD>Inglés</TD>
</TABLE>
</BODY>
</HTML>
El resultado se ve a continuación:
Todavía podemos mejorar la tabla usando los a tributos mostrados en la siguiente página:
El resultado es el
siguiente, mira bien:
Inserción de Imágenes
La inserción de una imagen dentro del documen to HTML se hace mediante la etiqueta:
<IMG SRC=“Archivo de imagen” ALT=“Nombre alterna tivo” ALIGN=“Alineación”
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. “Alineación” permite alinear la imagen en
la página puede ser LEFT o RIGHT o ta mbién para alinear el tex to
que viene a continuación de la imagen donde puede ser TOP,
MIDDLE o BOTTOM. “Borde” es un número que determina el
ancho del borde alrededor de la imagen. “Altura” y “Ancho” son
números que permi ten definir el tamaño 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 página 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 página.
Para centrar una imagen en la página use las etiquetas <CENTER> y </CENTER> alrededor
de la imagen. También para alinear puede usar <P ALIGN= “Alineación” y </P> donde
“Alineación” puede ser LE FT, CENTER o RIGHT.
Existen programas que pueden unir varias imágenes GIF en secuencia y formar un solo
archivo GIF, lo que dará una sensación de movimiento. Este archivo GIF resultante se
conoce como GIF ANIMADO y en Internet se puede conseguir muchos y gratis. En mi
página www.lanzadera.com/elprofediaz has visto algunas.
Ejemplo 10: Crearemos una página con muchas imágenes. Las imágenes que usaré están en la
carpeta que bajaste de mi página, búscalas y cópialas a tu carpeta.
<HTML>
<HEAD>
<TITLE>E jemplo 10</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTYELLOW>
<H1 ALIGN=CENTER>Mis GIF ANIMADOS Favoritos</H1>
El resultado es:
Los enlaces o hiperenlaces o hipervínculos más importantes son aquellos que nos permiten
conectarnos con otra de nuestras páginas o con una página cualquiera de Internet.
Todo enlace tiene la siguiente forma:
<A HREF=“Página Web”>HiperTexto o HiperImagen</A>
Donde “Página Web” es la dirección de la página
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 página deseada.
Profesor Carlos Díaz elprofediaz@hotmail.com
¿Separatas de computación? Conéctate a: 15 www.lanzadera.com/elprofediaz
Ejemplo 11: Ahora construiremos un documento que nos conectará con la página de Microsoft,
con la página del Profe Díaz y con una de las páginas creadas en esta hermosa separa ta.
Recuerde mi recomendación 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
<HTML>
<HEAD>
<TITLE>E jemplo 11</TITLE>
</HEAD>
<H1 ALIGN=CENTER>Mis Páginas Favoritos</H1>
Para obtener información de Windows has clic en
<A HREF="http ://www.microsoft.com">Microsoft</A><BR>
Para bajar separatas de compu tación has clic en
<A HREF="http ://www.lanzadera.com/elprofediaz">Separatas del Profe Díaz</A><BR>
Para ver el ejemplo 10 has clic en <A HRE F="ejemplo10.htm">GIF Animados</A><P>
Para obtener información de Windows has clic en
<A HREF="http ://www.microsoft.com"><IMG SRC=parlante.gif></A><P>
Para bajar separatas de compu tación has clic en
<A HREF="http ://www.lanzadera.com/elprofediaz">
<IMG SRC=estrella.gif ALT="Has clic para ir a la página del Profe Díaz"
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:
En este caso, haciendo clic en el enlace, no se inicia una nueva página, sino más bien se abre un
programa de correo elec trónico como, por ejemplo, el Ou tlook Express. La etiqueta utilizada
es la siguiente:
<A HREF= mailto:“Dirección de correo”>HiperTexto o HiperImagen</A>
Donde “Dirección de correo” es la dirección de correo
electrónico a la que deseamos escribir y el HiperTexto o
HiperImagen es cualquier tex to o imagen a la que se
deberá hacer clic para abrir el programa de correo
electrónico.
Ejemplo 12: Ahora construiremos un documento que nos permitirá enviar un saludo al Profe
Díaz.
<HTML>
<HEAD>
<TITLE>E jemplo 12</TITLE>
</HEAD>
<H1 ALIGN=CENTER>Envíe un saludo al Profe Díaz</H1>
Para enviar un mensaje al Profe Díaz has clic en
<A HREF= mailto:elprofediaz@hotmail.com>elprofediaz@hotmail.com</A><BR>
También 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:
Nota: Sin embargo está u tilidad sólo servirá si la computadora donde ve la página tiene un
servicio de correo electrónico proporcionado por algún proveedor de Internet. Si ese no es el
caso entonces esta u tilidad no servirá para nada y no se podrá enviar ningún correo.
En el caso que desees que el usuario pueda bajar archivos a su computadora, tal como lo
hiciste tú con esta bellísima 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 extensión) 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 computa dora un
lindo dibujo hecho en Paint.
<HTML>
<HEAD>
<TITLE>E jemplo 13</TITLE>
</HEAD>
<H1 ALIGN=CENTER>Baja un archivo a tu compu tadora</H1>
Has clic en el <A HREF=foto.bmp>Au torretra to del Profe Díaz</A><BR>
También puedes hacer clic en su computadora <A HRE F=foto.bmp >
<IMG SRC="la computadora.gif" ALIGN=MIDDLE BORDER></A><BR>
</BODY>
</HTML>
Aparecerá lo siguiente:
Música y sonido
Nuestra página Web puede tener sonidos incorporados, esto s sonidos deben ser archivos del
tipo MIDI, WAVE o AU. Y lo más importan te deben ser pequeños, un buen tamaño es 40 kb,
más 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.
<HTML>
<HEAD>
<TITLE>E jemplo 14</TITLE>
</HEAD>
<H1 ALIGN=CENTER>Música en Netscape Navigator</H1>
<EMBED SRC=bigcountry.mid WIDTH=300 HEIGHT=150 AUTOSTART=FALSE>
Canción: Big country<P>
<EMBED SRC=takeonme.mid WIDTH=300 HEIGHT=150 AUTOSTART=FALSE>
Canción: Take on me
</BODY>
</HTML>
Aparece lo siguiente:
Ejemplo 15: Ahora construiremos un documen to que nos permitirá escuchar el tema musical de
la página del Profe Díaz.
<HTML>
<HEAD>
<TITLE>E jemplo 15</TITLE>
</HEAD>
<H1 ALIGN=CENTER>Música en Internet Explorer</H1></CENTER>
Profesor Carlos Díaz elprofediaz@hotmail.com
¿Separatas de computación? Conéctate a: 20 www.lanzadera.com/elprofediaz
<BGSOUND SRC=takeonme.mid LOOP=INFINITE>
</BODY>
</HTML>
Para ello usamos las marquesinas que es un cuadro donde se desplaza el tex to (sólo es valido
para Internet Explorer).
La etiqueta es:
<MARQUEE WIDTH=“Ancho” BGCOLOR=“Color de fondo” DIRECTION=“Dirección”
SCROLLAMOUNT=“Avance” SCROLLDELAY=“Tiempo” BEHAVIOR=“Comportamiento”>Texto o
Imagen</MARQUEE>
Donde “Ancho” es el ancho en porcentaje o píxeles del cuadro que contiene la
marquesina. “Color de fondo” es el color de fondo del cuadro que contiene la
marquesina. “Dirección” es la dirección en la que se mueve la marquesina puede
ser LEFT o RIGHT. “Avance” es la cantidad de píxeles que salta el texto o
imagen en cada avance, cuanto mayor es, más rápido avanza. “Tiempo” define el
tiempo en milisegundos entre cada salto del tex to o imagen, cuanto mayor es,
más lento avanza. “Comportamiento” define el tipo de movimiento si toma el
valor de SCROLL entonces el tex to o imagen aparece por un lado y desaparece
por el o tro an tes de volver a aparecer, si toma el valor de SLIDE en tonces
aparece por un lado y se detiene en el o tro y si es ALTERNATE en tonces rebo ta
de un lado a o tro.
<HTML>
<HEAD>
<TITLE>E jemplo 16</TITLE>
</HEAD>
<H1 ALIGN=CENTER>Texto e imagen en movimiento</H1>
<MARQUEE>Hola amigos</MARQUEE>
<CENTER>
<MARQUEE WIDTH=50% BGCOLOR=YELLOW DIRECTION=RIGHT>de to do el mundo</MARQUEE>
</CENTER>
MultiVentanas
Significa crear varias ventanas independientes en un solo documento, ta mbién 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=“Página” NAME=“Nombre” MARGINWIDTH=“Márgenes horizontal”
MARGINHEIGHT= “Márgenes vertical” SCROLLING= “Desplazamiento” NORESIZE
FRAMEBORDER=“Borde”>
Coloca las páginas Web en los frames creados con FRAMESET. “Página” es la
dirección de la página que se colocará en el frame. “Nombre” es un nombre que
se usará para hacer referencia al frame. “Márgenes horizontal” es el margen
izquierdo y derecho del frame en píxeles. “Márgenes vertical” es el margen
superior e inferior del frame en píxeles. “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 tamaño
del frame. “Borde” permi te eliminar el borde del frame cuando toma el valor de
NO.
Profesor Carlos Díaz elprofediaz@hotmail.com
¿Separatas de computación? Conéctate a: 22 www.lanzadera.com/elprofediaz
Ejemplo 17: Crearemos 3 frames horizontales donde colocaremos algunas de las páginas que
hemos creado en esta súper 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%.
Ejemplo 18: Continuando con este curso magnifico de HTML crearemos unos frames muy
bonitos desde donde podremos apreciar todas nuestras páginas creadas.
<HTML>
<HEAD>
<TITLE>Título</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTYELLOW>
<H1><FONT COLOR=BLUE>
<MARQUEE>Bienvenidos a los ejemplos del Profe Díaz</MARQUEE>
</FONT></H1>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Lista</TITLE >
</HEAD>
<BODY BGCOLOR=LIGHTYELLOW>
<H4 ALIGN=CENTER>Lista de Ejemplos</H4>
<A HREF=ejemplo1.htm TARGET=PRINCIPAL>Ejemplo1</A><BR>
<A HREF=ejemplo2.htm TARGET=PRINCIPAL>Ejemplo2</A><BR>
<A HREF=ejemplo3.htm TARGET=PRINCIPAL>Ejemplo3</A><BR>
<A HREF=ejemplo4.htm TARGET=PRINCIPAL>Ejemplo4</A><BR>
<A HREF=ejemplo5.htm TARGET=PRINCIPAL>Ejemplo5</A><BR>
<A HREF=ejemplo6.htm TARGET=PRINCIPAL>Ejemplo6</A><BR>
<A HREF=ejemplo7.htm TARGET=PRINCIPAL>Ejemplo7</A><BR>
<A HREF=ejemplo8.htm TARGET=PRINCIPAL>Ejemplo8</A><BR>
<A HREF=ejemplo9.htm TARGET=PRINCIPAL>Ejemplo9</A><BR>
<A HREF=ejemplo10.htm TARGET=PRINCIPAL>Ejemplo10</A><BR>
<A HREF=ejemplo11.htm TARGET=PRINCIPAL>Ejemplo11</A><BR>
<A HREF=ejemplo12.htm TARGET=PRINCIPAL>Ejemplo12</A><BR>
<A HREF=ejemplo13.htm TARGET=PRINCIPAL>Ejemplo13</A><BR>
<A HREF=ejemplo14.htm TARGET=PRINCIPAL>Ejemplo14</A><BR>
<A HREF=ejemplo15.htm TARGET=PRINCIPAL>Ejemplo15</A><BR>
<A HREF=ejemplo16.htm TARGET=PRINCIPAL>Ejemplo16</A><BR>
<A HREF=ejemplo17.htm TARGET=PRINCIPAL>Ejemplo17</A><BR>
<A HREF= título.htm TARGET=PRINCIPAL>Título</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 página al frame que llamaremos PRINCIPAL, vea el siguiente
paso.
Tercero: Crearemos los frames en un documento que guardaremos como inicial.htm. Esta será
la página que iniciará toda nuestra presen tación:
<HTML>
<HEAD>
<TITLE>Inicial</TITLE>
</HEAD>
<FRAMESET COLS=20%,*>
<FRAME SRC=lista.htm>
<FRAMESET ROWS=15%,*>
<FRAME SRC=título.htm>
<FRAME NAME=PRINCIPAL>
</FRAMESET>
</FRAMESET>
</HTML>
<A NAME=“Marca”></A>
Ejemplo 19:
Crearemos una página
con un índice que salte
al tema indicado
dentro de la misma
página.
Al hacer clic en el
enlace Microsoft
Word, la página salta,
tal como se ve en la
figura.
En este caso queremos enlazarnos con otra página, pero queremos ir directamen te a un sitio
concreto de dicha página.
Ejemplo 20: Crearemos una página con un índice que salte directamente la descripción 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 página 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 también 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 país nos lleve a la página de dicho país.
Las imágenes a usar sólo pueden ser del tipo GIF o JPG, sino no funciona.
185,15
20,24
260,235
145,260
3. Con estos da tos procedemos a crear la página. Para ello usamos siguiente etiqueta:
<HTML>
<HEAD>
<TITLE>E jemplo 21</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>El Profe Díaz</H1>
<CENTER><IMG SRC="el profe díaz.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 parámetros Hight y Width pues cambiarían la forma de la figura
original y las coordenadas serían distintas.
K,L
M ,N I,J
Formularios
Hemos visto como hacer que el usuario pueda comunicarse con nosotros a través del correo
electrónico (vea el ejemplo 12), pero a veces quisiéramos 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 sólo servirá si la computadora donde ve la página tiene un
servicio de correo electrónico proporcionado por algún proveedor de Internet. Si ese no es el
caso entonces esta u tilidad no servirá para nada y no se podrá enviar ningún dato.
Estructura general de un formulario que envié los datos a un correo electrónico: Por ejemplo
enviemos los da tos al correo del Profe Díaz.
El cuerpo del formulario esta formado por tres clase de en trada que son: “Input”,
“Tex tarea” o “Selec t”
Los bo tones de opción son entradas del tipo “Input”
Input: Crea un cuadro de texto, una casilla de verificación, un círculo de opción o un botón.
<INPUT Type =“Text” Name=“Nombre” Value=“Valor” Size=“Tamaño” MaxLenght=“TamMáximo”>
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, “Tamaño” es el ta maño en
caracteres del cuadro de tex to y “TamMáximo” es el máximo número de
caracteres que puede escribir.
Si no usa Size el tamaño 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 electrónico.
Ejemplo 22: Crearemos una ficha de datos que el usuario deberá llenar y enviar
automá ticamente al correo elec trónico del Profe Díaz de Lima-Perú.
<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>
Select: Crea una lista desplegable desde la cual podemos escoger una o más opciones.
<SELECT Name=“Nombre” size=“Tamaño” Multiple>
Especificación de opciones
</SELECT>
El “Nombre” iden tifica a la lista desplegable, el “Ta maño” determina la altura
inicial de la lista en líneas de tex to. Si escribe Multiple el usuario podrá elegir
más de una opción.
La “Especificación de opciones” contiene la lista de elemen tos que aparecen en la lista y tiene
la siguiente estruc tura:
Ejemplo 23:
Crearemos un menú a
la carta de un
restaurante limeño,
donde el usuario
escogerá lo que desea
y lo enviará
automá ticamente al
correo del Profe Díaz.
TextArea: Crea un cuadro donde el usuario puede escribir un tex to tan largo como desee.
<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 opinión respecto a la contaminación es:<P>
<TEXTAREA Name="Opinión" 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>