Html

589 views
549 views

Published on

Descripcion a cerca de la creación de un archivo, que expone la creación de una pagina Web

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
589
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html

  1. 1. ¿Separatas de computación? Conéctate a: 1 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com HTML HTML o Hypertext Markup Language o Lenguaje de Diseño de Hipertextos es un lenguaje que se utiliza 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 Internet Explorer. En realidad puedes usar cualquier editor de textos y cualquier navegador. - ¿Profe Díaz, necesito estar conectado a Internet 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 usar el FrontPage 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 otra pregunta? ¡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 FrontPage. Pero de eso hablaremos otro día. - Otra pregunta 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 otra vez! - ¡Auxiliooooooooooooooooooooooooooooooooooooo! Por fin se callo, ahora empecemos. ¡Y presten atención o ya saben lo que les espera! ☺ Estructura básica del documento HTML Se compone básicamente de dos partes: Una cabecera y un cuerpo. <HTML> <HEAD> Nuestro código </HEAD> <BODY> Nuestro código </BODY> </HTML>
  2. 2. ¿Separatas de computación? Conéctate a: 2 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com 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 notas escriba el siguiente código. <HTML> <HEAD> <TITLE>Ejemplo 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 "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 página. Observa que el título de la ventana es lo que pusiste entre las etiquetas <TITLE> y </TITLE>. Observa que lo que aparece en la página es lo que pusiste dentro de las etiquetas <BODY> y </BODY>. Encabezados Los encabezados son utilizados para resaltar palabras o frases. Tenemos seis tamaños de encabezado el más grande esta comprendido entre 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. Recomendación Súper Importante: Es mejor colocar todos los elementos de tu página 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 ProfeDiazHTML
  3. 3. ¿Separatas de computación? Conéctate a: 3 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Ejemplo 2: Crearemos una página Web que muestre el uso de los encabezados. Primero: En el bloc de notas escriba el siguiente código. <HTML> <HEAD> <TITLE>Ejemplo 2</TITLE> </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 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> Segundo: Guárdalo 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 página. Estilos de letra Los estilos más conocidos utilizan las siguientes etiquetas: <B> y </B> Letra negrita. <I> y </I> Letra cursiva o itálica. <U> y </U> Letra subrayada. <S> y </S> Letra tachada. <TT> y </TT> Letra tipo mecanografiado. O sea tipo máquina de escribir.
  4. 4. ¿Separatas de computación? Conéctate a: 4 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com <FONT COLOR=“Color” SIZE=“Tamaño”> y </FONT> “Color” es el color de la letra (escrita en inglés), “Tamaño” es el tamaño de la letra y puede tener un valor entre 1 y 7, aunque si le coloca otro número no mandará error, pero tampoco le hará caso. Por defecto el tamaño es 3. <FONT COLOR=“Color” SIZE=+“T”> y </FONT> +“T” indica que la letra saldrá T puntos más grande del tamaño que tiene actualmente. <FONT COLOR=“Color” SIZE=-“T”> y </FONT> -“T” indica que la letra saldrá T puntos más pequeño del tamaño que tiene actualmente. <SUB> y </SUB> Letra tipo subíndice. <SUP> Y </SUP> Letra tipo superíndice. 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>Ejemplo 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 tanto <U><I><B>recomendamos</U></I></B> experimentarlas en un laboratorio <S>super seguro</S> en lo más profundo 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 Internet Explorer carga tu documento Ejemplo3.htm y obtendrás lo siguiente.
  5. 5. ¿Separatas de computación? Conéctate a: 5 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Por si acaso si no sabes inglés 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 Párrafos 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 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. &nbsp; 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 presentable. Primero: En el bloc de notas modifique el código del ejemplo anterior, tal como se muestra. <HTML> <HEAD> <TITLE>Ejemplo 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 tanto <U><I><B>recomendamos</U></I></B> experimentarlas en un laboratorio<BR> <S>super seguro</S> en lo más profundo de la <FONT COLOR=BROWN>tierra</FONT>.<BR> Fórmula &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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>
  6. 6. ¿Separatas de computación? Conéctate a: 6 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Segundo: Guárdalo con el nombre "Ejemplo4.htm" Tercero: Abre el Internet Explorer y mediante su menú Archivo/Abrir carga tu documento Ejemplo4.htm el resultado se muestra a continuació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 documento. <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. Ejemplo 5: Dibujemos algunas líneas. <HTML> <HEAD> <TITLE>Ejemplo 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>
  7. 7. ¿Separatas de computación? Conéctate a: 7 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com 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 texto. También 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 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>Ejemplo 6</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER><FONT COLOR=GREEN><B><I>Página Personal de Arturi to</I></B> </FONT></H1>
  8. 8. ¿Separatas de computación? Conéctate a: 8 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Profesor: Carlos Díaz Profesor de Computación e Informática Física y Matemáticas Análisis y Diseño de Sistemas Asesoría e Instalación de Software Asesoría 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, más conocido como el niño<FONT SIZE=+3> genio de las matemáticas</FONT>. Actualmente estoy de vacaciones y la estoy pasando muy bien en mi mansión de la isla Tortuga, que a propósito también es mi isla, mi tío, El Profe Díaz, me la regaló el día de mi cumpleaños. Casi todos los días me la paso paseando en mi yate cerca al <FONT COLOR=RED>Triangulo de las Bermudas</FONT> ¿Has oído hablar de él?, supongo que si.</P> Después, al atardecer regreso a mi mansión y voy con mi jeep a mi habitación donde se encuentra mi supercomputadora que me costo un millón de dólares, me la compre juntando mis propinas del mes pasado. En mi computadora tengo muchos juegos, te daré una lista de los más 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 Arturi to el niño Genio” y tendrá más o menos los siguientes temas:</H4><P> <DL> <DT>Capítulo I: Los viajes de Arturito. <DD>La fiesta de cumpleaños de Arturito. <DD>El paseo campestre de Arturito. <DD>Arturito en las playas de Hawai. <DT>Capítulo 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>
  9. 9. ¿Separatas de computación? Conéctate a: 9 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com El resultado es el siguiente: 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 entrar en más detalles, en el siguiente ejemplo crearemos una tabla., verás que facilísimo es. Ejemplo 7: En este ejemplo crearemos nuestro horario escolar de vacaciones útiles. Será una tabla de 5 filas por 4 columnas. <HTML> <HEAD> <TITLE>Ejemplo 7</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Horario Escolar</H1>
  10. 10. ¿Separatas de computación? Conéctate a: 10 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com <TABLE> <TD>Hora</TD><TD>Lunes</TD><TD>Miércoles</TD><TD>Viernes</TD> <TR> <TD>8-10</TD><TD>Natación</TD><TD>Natación</TD><TD>Computación</TD> <TR> <TD>10-12</TD><TD>Karate</TD><TD>Karate</TD><TD>Natación</TD> <TR> <TD>12-14</TD><TD>Inglés</TD><TD>Computación</TD><TD>Karate</TD> <TR> <TD>14-16</TD><TD>Computación</TD><TD>Inglés</TD><TD>Inglés</TD> </TABLE> </BODY> </HTML> El resultado se muestra a continuación. Vemos que a nuestra tabla le falta algo de decoración. Los siguientes atributos pueden ayudarnos: <TABLE ALIGN=“Alineación” BGCOLOR=“Color de Fondo” BORDER=“Borde” BORDERCOLOR=“Color de Borde” CELLPADDING=“Margén Interior” CELLSPACING=“Espacio Entre Celdas” WIDTH=“Ancho” > y </TABLE> “Alineación” determina la alineación 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 líneas 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 separación entre las celdas y WIDTH es el ancho de toda la tabla en porcentaje, donde 100% es el ancho de toda la página. Ejemplo 8: Ahora modificaremos nuestro horario escolar creado en el ejemplo anterior. <HTML> <HEAD> <TITLE>Ejemplo 8</TITLE>
  11. 11. ¿Separatas de computación? Conéctate a: 11 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com </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>Natación</TD><TD>Natación</TD><TD>Computación</TD> <TR> <TD>10-12</TD><TD>Karate</TD><TD>Karate</TD><TD>Natación</TD> <TR> <TD>12-14</TD><TD>Inglés</TD><TD>Computación</TD><TD>Karate</TD> <TR> <TD>14-16</TD><TD>Computació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>Natación</TD><TD>Natación</TD><TD>Computación</TD> <TR> <TD>10-12</TD><TD>Karate</TD><TD>Karate</TD><TD>Natación</TD> <TR> <TD>12-14</TD><TD>Inglés</TD><TD>Computación</TD><TD>Karate</TD> <TR> <TD>14-16</TD><TD>Computació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 atributos mostrados en la siguiente página:
  12. 12. ¿Separatas de computación? Conéctate a: 12 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com <TH ALIGN=“Alineación” BGCOLOR=“Color de Fondo” COLSPAN=“Combinar Columnas” ROWSPAN=“Combinar Filas” VALIGN=“Alineación Vertical”> y </TH> Define las cabeceras de las columnas. “Alineación” es la alineación 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. ”Alineación Vertical” determina la orientación vertical dentro de la celda, puede ser BOTTOM, CENTER, TOP o BASELINE. <TD ALIGN=“Alineación” BGCOLOR=“Color de Fondo” COLSPAN=“Combinar Columnas” ROWSPAN=“Combinar Filas” VALIGN=“Alineación Vertical”> y </TD> Define una celda de la tabla. La descripción de los atributos son iguales a la etiqueta anterior. Ejemplo 9: Continuemos modificando nuestro horario. <HTML> <HEAD> <TITLE>Ejemplo 9</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Horario Escolar</H1> <TABLE ALIGN=CENTER BORDER=4 CELLPADDING=10 CELLSPACING=20 BORDERCOLOR=PURPLE> <TH BGCOLOR=YELLOW>Hora</TH><TH>Lunes</TH><TH>Miércoles</TH><TH>Viernes</TH> <TR> <TD>8-10</TD><TD ALIGN=CENTER COLSPAN=2>Natación</TD><TD>Computación</TD> <TR> <TD>10-12</TD><TD>Karate</TD><TD>Karate</TD><TD>Natación</TD> <TR> <TD>12-14</TD><TD>Inglés</TD> <TD ALIGN=CENTER ROWSPAN=2 VALIGN=TOP>Computación<br>e<br> Inglés</TD><TD>Karate</TD> <TR> <TD>14-16</TD><TD>Computación</TD><TD>Inglés</TD> </TABLE> </BODY> </HTML> El resultado es el siguiente, mira bien:
  13. 13. ¿Separatas de computación? Conéctate a: 13 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com El Fondo de la Página <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 inglés, en la página 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 tamaño que un GIF. JPG suele utilizarse para fotografías e imágenes grandes y GIF para imágenes pequeñas. Como recomendamos al principio del curso es conveniente tener las imágenes en el mismo lugar donde estas guardando los documentos HTML, y así evitaras la molestia de colocar la ruta del archivo de imagen. Inserción de Imágenes La inserción de una imagen dentro del documento HTML se hace mediante la etiqueta: <IMG SRC=“Archivo de imagen” ALT=“Nombre alternativo” 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 todo. “Nombre alternativo” es un texto 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 también para alinear el texto 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 atributos 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 LEFT, 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>Ejemplo 10</TITLE> </HEAD> <BODY BGCOLOR=LIGHTYELLOW> <H1 ALIGN=CENTER>Mis GIF ANIMADOS Favoritos</H1>
  14. 14. ¿Separatas de computación? Conéctate a: 14 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com <IMG SRC="la computadora.gif" ALT="La supercomputadora" ALIGN=LEFT HEIGHT=150 WIDTH=150> <BR><BR>Esta es la computadora del Profe Díaz donde se la pasa jugando y escribiendo separatas para publicarlas en su página Web <B>www.lanzadera.com/elprofediaz</B>. Si quieres bajar a tu computadora estos GIF animados, visita mi página y coloca el puntero sobre la imagen, luego haces clic con el botón derecho del mouse y finalmente haces clic en <B>Guardar imagen como...</B> <P ALIGN=RIGHT>Esta es la pizarra del Profe Díaz <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 páginas 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.
  15. 15. ¿Separatas de computación? Conéctate a: 15 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com 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 separata. 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 ProfeDiazHTML ¡Hazme caso o te rompo la cabeza! <HTML> <HEAD> <TITLE>Ejemplo 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 computació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 HREF="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 computació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:
  16. 16. ¿Separatas de computación? Conéctate a: 16 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Enlace con direcciones de correo electrónico 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 electrónico como, por ejemplo, el Outlook 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 texto 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>Ejemplo 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: Al hacer clic en el hipertexto o hiperimagen se abre el programa de correo electrónico, tal como muestra la figura de la siguiente página:
  17. 17. ¿Separatas de computación? Conéctate a: 17 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Nota: Sin embargo 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 utilidad no servirá para nada y no se podrá enviar ningún correo. Bajar archivos desde tu página 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 computadora un lindo dibujo hecho en Paint. Primero: Dibuja en Paint un autorretrato y guárdalo con el nombre de Foto en el mismo lugar donde estas guardando todo, esto es muy importante.
  18. 18. ¿Separatas de computación? Conéctate a: 18 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Segundo: Escribe el siguiente código en el bloc de notas y guárdalo con el nombre Ejemplo13.htm <HTML> <HEAD> <TITLE>Ejemplo 13</TITLE> </HEAD> <H1 ALIGN=CENTER>Baja un archivo a tu computadora</H1> Has clic en el <A HREF=foto.bmp>Autorretrato del Profe Díaz</A><BR> También 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: Música y sonido Nuestra página Web puede tener sonidos incorporados, estos sonidos deben ser archivos del tipo MIDI, WAVE o AU. Y lo más importante deben ser pequeños, un buen tamaño es 40 kb, más 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 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 (toma el valor de false). “Repetir” es el número de veces que se ejecutar el archivo de sonido, si es igual a true el sonido se repetirá indefinidamente.
  19. 19. ¿Separatas de computación? Conéctate a: 19 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Ejemplo 14: Ahora construiremos un documento que nos permitirá escuchar dos famosas canciones. <HTML> <HEAD> <TITLE>Ejemplo 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: 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 número de veces que se ejecutar el archivo de sonido, si es igual a INFINITE el sonido se ejecutara indefinidamente. Además 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 página del Profe Díaz. <HTML> <HEAD> <TITLE>Ejemplo 15</TITLE> </HEAD> <H1 ALIGN=CENTER>Música en Internet Explorer</H1></CENTER>
  20. 20. ¿Separatas de computación? Conéctate a: 20 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com <BGSOUND SRC=takeonme.mid LOOP=INFINITE> </BODY> </HTML> Como puedes observar, ya no aparece ninguna consola de manejo de sonido, pero la música si se escucha. Texto e imagen en movimiento Para ello usamos las marquesinas que es un cuadro donde se desplaza el texto (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 texto o imagen, cuanto mayor es, más 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> <TITLE>Ejemplo 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 todo el mundo</MARQUEE> </CENTER>
  21. 21. ¿Separatas de computación? Conéctate a: 21 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com <MARQUEE SCROLLAMOUNT=10>bienvenidos a mi página</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, también 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=“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 auto 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.
  22. 22. ¿Separatas de computación? Conéctate a: 22 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Ejemplo 17: Crearemos 3 frames horizontales donde colocaremos algunas de las páginas que hemos creado en esta súper separata. <HTML> <HEAD> <TITLE>Ejemplo 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 página resultante es: Ejemplo 18: Continuando con este curso magnifico de HTML crearemos unos frames muy bonitos desde donde podremos apreciar todas nuestras páginas creadas. Primero: Cree la página título.htm <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>
  23. 23. ¿Separatas de computación? Conéctate a: 23 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Segundo: Cree la página lista.htm <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 presentació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>
  24. 24. ¿Separatas de computación? Conéctate a: 24 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Profesor: Carlos Díaz Profesor de Computación e Informática Física y Matemáticas Análisis y Diseño de Sistemas Asesoría e Instalación de Software Asesoría y Ensamblaje de Computadoras Telefs: 485-4698 ó 9726-6306 E-mail: elprofediaz@hotmail.com Website: www.lanzadera.com/elprofediaz El resultado final es: La hacer clic en el hipervínculo Ejemplo12, verá lo siguiente:
  25. 25. ¿Separatas de computación? Conéctate a: 25 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Colocar tu página en Internet Si deseas subir o colocar tu página en Internet puedes conectarte con www.geocities.com Por ejemplo la página del Profe Díaz esta alojada en www.geocities.com, lo malo es que la dirección que te dan es demasiada larga, por ejemplo mi página tiene la dirección www.geocities.com/separataselprofe diaz/Elprofediaz.htm Ahora, si deseas una dirección más corta puedes conectarte a www.lanzadera.com Esta página es un redireccionador, es decir te dan una dirección más corta que se conecta con la dirección más larga. Por ejemplo mi dirección más corta es www.lanzadera.com/elprofediaz Además de GEOCITIES, en Internet existen muchos lugares donde puedes alojar gratuitamente tu página, también además de LANZADERA existen muchas páginas redireccionadoras. Bueno amiguitos hasta este punto ya pueden crear y publicar en Internet páginas Web más o menos decentes, si quieres crear páginas más completas, continúa leyendo mi separata.
  26. 26. ¿Separatas de computación? Conéctate a: 26 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Enlace dentro de la misma página Cuando nuestra página es muy extensa a veces nos conviene saltar de una posición 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 posición 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 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.
  27. 27. ¿Separatas de computación? Conéctate a: 27 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com <HEAD> <TITLE>Ejemplo 19</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Lista de Separatas del Profe Díaz</H1> El siguiente listado se muestra todas las separatas publicadas por el profe Díaz:<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 administración básica de la computadora. Es lo primero que se debe aprender antes de usar cualquier otro programa de computadora. La última versión 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 versión de Word es la 2002 ó XP<P> <A NAME="Excel"></A><U>Microsoft Excel XP</U>: Es una Hoja de Cálculo que se utiliza para manipular datos numéricos y expresarlos también en forma gráfica. Este programa cuenta además con utilidades para manejar bases de datos y resolver problemas avanzados como los tratados en la Programación Lineal. La última versión 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 imágenes, sonido y video. Se recomienda usarlo con un Proyector para que la audiencia pueda ver la presentación con todo detalle. La última versión de PowerPoint es la 2002 ó XP </H1> </BODY> </HTML> Enlace con un punto específico dentro de otra página En este caso queremos enlazarnos con otra página, pero queremos ir directamente a un sitio concreto de dicha página. Este enlace tiene la siguiente forma: <A HREF=“Página#Marca”>HiperTexto o HiperImagen</A> Donde “Página” es el nombre de la página 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 posición deseada.
  28. 28. ¿Separatas de computación? Conéctate a: 28 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com 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 página con un índice que salte directamente la descripción de Windows XP y PowerPoint XP del ejemplo19.htm. <HTML> <HEAD> <TITLE>Ejemplo 20</TITLE> </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 página 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 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.
  29. 29. ¿Separatas de computación? Conéctate a: 29 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Ejemplo 21: Crearemos una página 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 imágenes a usar sólo pueden ser del tipo GIF o JPG, sino no funciona. Primero: Averigüemos 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 Díaz.gif”.
  30. 30. ¿Separatas de computación? Conéctate a: 30 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com 2. Ahora usando la herramienta “Selección” 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 página. Para ello usamos siguiente etiqueta: <IMG SRC="el profe díaz.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>Ejemplo 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. Además de usar una forma rectangular (shape=“rect”) también podemos usar una forma circular (shape=“circle” ) sólo que en este caso debemos usar las coordenadas del centro y el radio, por ejemplo se escribiría así: coords=“A,B,R”. 20,24 145,260 260,235 185,15 A , B R
  31. 31. ¿Separatas de computación? Conéctate a: 31 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com A , B C , D E , F G , H I , J K , L M , N Ñ , O P , Q R , S Además de usar una forma rectangular (shape=“rect”) también podemos usar una forma poligonal (shape=“poly”) sólo que en este caso debemos usar las coordenadas de cada vértice del polígono hasta cerrar el polígono, por ejemplo si queremos un área en forma de estrella sería 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 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. Lamentablemente 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 utilidad 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 datos al correo del Profe Díaz. <FORM ACTION=“mailto:elprofediaz@hotmail.com” METHOD=“post” ENCTYPE=“text/plain”> Cuerpo del formulario Botones de envío y borrado. </FORM> El cuerpo del formulario esta formado por tres clase de entrada que son: “Input”, “Textarea” o “Select” Los botones de opción son entradas del tipo “Input” Describamos estos elementos: 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 texto, “Valor” es el texto por defecto que aparece en el cuadro, “Tamaño” es el tamaño en caracteres del cuadro de texto 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 texto, este texto es almacenado en la variable “Nombre”, la cual será enviada al correo electrónico. <INPUT Type =“Password” Name=“Nombre” Value=“Valor” Size=“Tamaño” MaxLenght=“TamMáximo”> En lugar de letras aparecerán asteriscos en el cuadro de texto. <INPUT Type =“Hidden” Name=“Nombre” Value=“Valor” Size=“Tamaño” MaxLenght=“TamMáximo”> Ni siquiera aparecerá lo que escriba.
  32. 32. ¿Separatas de computación? Conéctate a: 32 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com <INPUT Type =“Checkbox” Name=“Nombre” Value=“Valor” Checked> Crea una casilla de verificación, 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 círculo pequeño de opción, que el usuario puede activar o desactivar con un clic. Si escribe Checked el círculo aparece activado . <INPUT Type =“Submi t” Name=“Nombre” Value=“Valor”> Crea un botón que provoca el envío del formulario al correo electrónico. “Valor” es el texto que aparece en el interior del botón. <INPUT Type =“Reset” Name=“Nombre” Value=“Valor”> Crea un botón 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 automáticamente al correo electrónico del Profe Díaz de Lima-Perú. <HTML> <HEAD> <TITLE>Ejemplo 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>
  33. 33. ¿Separatas de computación? Conéctate a: 33 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com 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> Película 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 más opciones. <SELECT Name=“Nombre” size=“Tamaño” Multiple> Especificación de opciones </SELECT> El “Nombre” identifica a la lista desplegable, el “Tamaño” determina la altura inicial de la lista en líneas de texto. Si escribe Multiple el usuario podrá elegir más de una opción. La “Especificación de opciones” contiene la lista de elementos que aparecen en la lista y tiene la siguiente estructura: <OPTION Value=“Valor” Selected>Descripción</OPTION> “Valor” es el dato que se almacenará en “Nombre” cuando se seleccione esta opción y será enviada al correo electrónico. Si escribe Selected está opción aparece seleccionada por defecto. 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.
  34. 34. ¿Separatas de computación? Conéctate a: 34 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com <HTML> <HEAD> <TITLE>Ejemplo 23</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Restaurante Limeño "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 huancaína">Papa a la huancaína</OPTION> <OPTION Value="Sopa del día">Sopa del día</OPTION> </SELECT><P> Segundo (puede elegir más 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="Chicharrón de pescado">Chicharrón de pescado</OPTION> <OPTION Value="Lomo saltado">Lomo saltado</OPTION> <OPTION Value="Tallarin saltado">Tallarín 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 uña de gato" Selected>Refresco de uña 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 línea en cambio si “Valor” es igual a “virtual” el cambio de línea es automático, por defecto es “virtual”.
  35. 35. ¿Separatas de computación? Conéctate a: 35 www.lanzadera.com/elprofediaz Profesor Carlos Díaz elprofediaz@hotmail.com Ejemplo 24: Crearemos una página donde el usuario escribirá un comentario u opinión acerca de “La contaminación en nuestro planeta Júpiter” y lo enviará automáticamente al correo del Profe Díaz. <HTML> <HEAD> <TITLE>Ejemplo 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 comentario. </TEXTAREA><P> <INPUT Type="Submit" Value="Enviar datos"> <INPUT Type="Reset" Value="Borrar datos"> </FORM> </BODY> </HTML> Si deseas saber más sobre la creación de páginas Web entonces baja mi separata de Javascript, DHTML, Flash, etc. Profesor: Carlos Díaz Profesor de Computación e Informática Física y Matemáticas Análisis y Diseño de Sistemas Asesoría e Instalación de Software Asesoría y Ensamblaje de Computadoras Telefs: 485-4698 ó 9726-6306 E-mail: elprofediaz@hotmail.com Website: www.lanzadera.com/elprofediaz

×