Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Manual HTML

    Încărcat de

    Jeisson Andres Cortes
    16 vizualizări63 pagini

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOC, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    16 vizualizări63 pagini

    Manual HTML

    Încărcat de

    Jeisson Andres Cortes

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 63

    1.

    Introduccin
    Captulo siguiente: 2 - Estructura de una pgina Web En principio, empecemos diciendo que HTML son las siglas de HyperText Markup Language (o Lenguaje de marcado de hipervnculos o hipertexto). Una pgina Web abunda en marcas de hipervnculos (enlaces). Generalmente, cuando movemos el Mouse sobre una lnea de texto, encontramos palabras o expresiones subrayadas, con color azul (aunque pueden tener otros colores). Cuando hacemos clic sobre alguna palabra o expresin de hipervnculo, el explorador de Internet nos remite a otro sitio o pgina Web. Cuando hablamos de pginas Web, nos referimos a las pginas que se utilizan en los exploradores de Internet, que, a primera vista, tiene las mismas propiedades. Cabe aclarar que actualmente se pueden crear pginas Web en muchos programas, en procesadores de texto como Microsoft Word, Excel, PowerPoint, Access, Corel Draw, Publisher, etc. Sin embargo, cuando se disea la estructura de una pgina Web en estos programas, el cdigo que permite dar forma a la pgina Web para ser accedida desde cualquier explorador, queda oculto a los ojos del diseador de la pgina. HTML es un lenguaje que utiliza los cdigos estandarizados para la creacin de pginas Web. Sin embargo, desde este punto no se utilizan objetos para colocar en pantalla, todo lo que se desee hacer y representar, debe ser pensado y previsto antes de codificar. Procedimientos iniciales para crear una pgina Web Antes de entrar en detalle acerca de la creacin de pginas Web, es necesario entender cmo se escribe el cdigo y en qu programa. El cdigo se puede escribir en cualquier procesador de textos, aunque es recomendable hacerlo en un programa que no maneje estilos de texto que pueden no ser reconocidos por el explorador de Internet; puede ser un programa como WordPad, el Bloc de notas o Microsoft Word.

    2. Estructura de una pgina Web


    Captulo anterior: 1 - Introduccin Captulo siguiente: 3 - Guardado del archivo como pgina Web Estructura de una pgina Web Toda pgina Web tiene una estructura que permite al programador saber de antemano qu tipo de informacin necesita introducir. Esto ayuda a que la pgina que disea sea claramente legible y se pueda modificar ms fcilmente. Si una pgina Web es complicada en su diseo, habr muy pocos que sepan dar el mantenimiento adecuado. Abajo se muestra la estructura lgica de una pgina Web. <HTML> <HEAD> <TITLE>Primera pgina</TITLE> </HEAD> <BODY> ...

    ... ... </BODY> </HTML> Estas lneas son permanentes en una pgina Web. Siempre van a estar presentes no importando qu tan corta o tan larga sea la pgina y el contenido. La primera instruccin <HTML> indica al explorador de Internet que ah comienza una pgina Web. La siguiente instruccin <HEAD> indica el encabezado de la pgina, es decir el rea de la barra de ttulo. <TITLE> indica el ttulo de la pgina propiamente dicho. <BODY> es una instruccin que indica al explorador de Internet que ah empieza el rea de contenido de la pgina (es decir el cuerpo de la pgina). En el lenguaje HTML, muchas instrucciones se cierran con el signo / (diagonal) para indicar al programa que las propiedades aplicadas con esa instruccin se terminan ah donde se pone el signo diagonal. Si el signo de cierre (/) no se aplica convenientemente, el programa seguir aplicando las propiedades de la instruccin anterior a todas las lneas inferiores, hasta que se encuentre otra instruccin que modifique las propiedades actuales.

    3. Guardado del archivo como pgina Web


    Captulo anterior: 2 - Estructura de una pgina Web Captulo siguiente: 4 - Modificacin de una pgina Web Guardado del archivo como pgina Web Cuando se haya escrito el cdigo de la pgina Web, es necesario guardar el archivo como una pgina Web. Una pgina Web tiene la extensin HTM, la cual se debe especificar en el momento de guardar la pgina. Una vez guardado el archivo con la extensin HTM, se puede crear un acceso directo para este archivo o se puede abrir directamente desde el sitio en el que se guard. Ejercicio Abre el Bloc de notas y copia el siguiente cdigo que se muestra. Cuando hayas terminado de capturar el cdigo, gurdalo como Primera.htm (si existe y pide reemplazar el archivo, responde afirmativamente).

    El resultado se muestra a continuacin.

    4. Modificacin de una pgina Web


    Captulo anterior: 3 - Guardado del archivo como pgina Web Captulo siguiente: 5 - Estilos de ttulo Una vez creada nuestra pgina Web, ser necesario modificarla. Para ello, necesitamos abrir el cdigo de la pgina. Si se abre la pgina en un procesador de textos como Microsoft Word, slo veremos el texto, pero el cdigo no es accesible para el usuario. Si deseamos obtener el cdigo, ser necesario abrir el bloc de notas y abrir la pgina desde ah, utilizando la opcin Abrir, y en el cuadro de dilogo Abrir, se elige Todos los archivos, en la lista Tipo (esto porque la pgina tiene una extensin diferente al filtro mostrado). Sin embargo, una manera ms cmoda y rpida, es acceder al cdigo desde la pgina Web abierta. Para ello, se hace lo siguiente: 1.- Se hace clic con el botn secundario en un rea que no sea un objeto (como una imagen, un hipervnculo, etc.) 2.- En el men contextual, se elige la opcin Ver cdigo fuente.

    5. Estilos de ttulo

    Captulo anterior: 4 - Modificacin de una pgina Web Captulo siguiente: 6 - Comandos bsicos de formateo de texto HTML maneja seis estilos de ttulo aplicables al texto. Cuando se aplica un estilo, el programa interpreta el estilo y lo aplica mientras no encuentre un signo de cierre. Los estilos de ttulo se enumeran de H1 a H6, siendo H1 el ms grande y H6 el ms pequeo. Aunque el programador tiene la opcin de utilizar un tamao diferente mediante la instruccin FontSize. A continuacin se muestra el cdigo y el resultado de la utilizacin de ttulos en una pgina Web.

    El resultado de este cdigo se muestra a continuacin.

    De aqu en adelante, slo se mostrar la ventana de resultados en los ejercicios. El alumno tiene la obligacin de usar las instrucciones que se van explicando para obtener los resultados requeridos en los ejercicios.

    6. Comandos bsicos de formateo de texto

    Captulo anterior: 5 - Estilos de ttulo Captulo siguiente: 7 - Marcador de prrafo Negrita, Cursiva, Subrayado Al igual que otros programas, en HTML puede aplicar el efecto Negrita, Cursiva o Subrayado al texto. Para el efecto negrita use <B>, para cursiva use <I>, para subrayado use <U> con su respectivo signo de cierre. Ejemplo: <B> Estilos Negrita</B><BR> <I> Estilo Cursiva</I><BR> <U>Estilo subrayado</U><BR> La instruccin <BR> de las lneas de arriba se utiliza para insertar un retorno de carro. Si no se incluye esta instruccin en cada lnea de texto, la pgina Web juntar las tres lneas de texto en una sola lnea. Esto significa que cada vez que deseemos insertar un salto de lnea, debemos incluir esta instruccin en el lugar donde se desee generar una nueva lnea. El resultado se muestra a continuacin.

    Existe una instruccin que permite remarcar partes de un prrafo, esta instruccin es la instruccin STRONG. Por ejemplo, este cdigo: Este es un ejemplo de <strong> instrucciones de formateo de texto </strong> Produce este resultado:

    La instruccin <EM> funciona de forma similar a <I>. Cuando se aplica <EM>, el texto afectado aparece siempre en estilo cursiva. Por ejemplo, el siguiente cdigo: Este es un ejemplo de instrucciones de <em>formateo de texto</em> Produce el siguiente resultado:

    Ejercicio Usando las instrucciones conocidas hasta este momento, debes disear la pgina que se muestra a continuacin.

    Se usa el estilo H1 para el ttulo principal, <B> o <STRONG> para el remarcado negrita y <U> para el subrayado. Doble salto de lnea <BR> para la separacin de un prrafo con otro.

    7. Marcador de prrafo
    Captulo anterior: 6 - Comandos bsicos de formateo de texto Captulo siguiente: 8 - Color e imagen de fondo de la pgina Cuando se desee indicar a HTML un inicio de prrafo y utilizar una alineacin junto con la instruccin, se debe utilizar <P>. Este comando se usa junto con las instrucciones de alineacin <Left>, <Center> o <Right> para modificar la posicin del texto en pantalla. Por ejemplo, la siguiente lnea de cdigo, centra el texto en la pantalla. <p align=center>Texto centrado en la pantalla </p> El siguiente cdigo:

    Produjo el resultado que se muestra a continuacin.

    Si se desea alinear texto a la derecha, debe introducir una expresin como sta: <p align=right>Texto justificado a la derecha</p> Para trazar una lnea de separacin utilice el comando <HR>. Esta instruccin sin modificadores, traza una lnea horizontal predeterminada. Si se incluyen modificadores, se podr personalizar la apariencia de la lnea. Ejemplo: <HR> Traza una lnea horizontal. Para modificar la apariencia predeterminada, haga esto:

    <HR Width=200> Traza una lnea de ancho de pantalla (en pxeles) de 200 pxeles. Esta lnea de cdigo producira una lnea como sta:

    Si se desea cambiar el color, es necesario incluir el modificador Color=Color. Ejemplo: <HR Color=Blue>

    8. Color e imagen de fondo de la pgina


    Captulo anterior: 7 - Marcador de prrafo Captulo siguiente: 9 - Color de texto e hipervnculos Color de fondo Puedes aplicar color de fondo a la pgina utilizando el siguiente modificador: bgcolor=Color Por ejemplo: <body bgcolor=cyan> Esta instruccin aplica el color CYAN al fondo de la pgina. La instruccin bgcolor se debe aplicar dentro de la instruccin <Body>. Para facilitar la utilizacin de colores de fondo mediante constantes de color, presentamos la siguiente tabla de colores: Color Negro Azul Verde Constante BLACK BLUE GREEN

    Rojo claro Rosa intenso Marrn Gris Rosa claro Amarillo Blanco Verde claro Rojo intenso Cin Claro

    RED MAGENTA FUCSIA GRAY PINK YELLOW WHITE GREEN+ BLUE+ BLUE/RED

    Adems de que se pueden aplicar combinaciones con modificadores (con el signo +) a cada constante de color, puede utilizar modificadores con el signo /. Por ejemplo, la combinacin MAGENTA/YELLOW, produce un color verde oliva claro. La forma ms extensa de obtener colores es utilizando la representacin hexadecimal del 0 a la F. Por ejemplo, la siguiente lnea de cdigo: <Body Bgcolor="#0FFFFF"> Produce un color azul aguamarina. Imagen de fondo Adems de aplicar colores de fondo usando combinaciones como las mencionadas anteriormente, puedes aplicar imgenes como fondo de la pgina. Para ello, utiliza el modificador Img Background=Imagen. Por ejemplo, la siguiente lnea de cdigo aplica una imagen de fondo a la pgina. <body img background=imagen.bmp>

    Para aplicar una imagen de fondo, debe ubicar la imagen en la misma ruta donde se encuentra la pgina, en su defecto, deber especificar la ruta completa en el parmetro IMG BACKGROUND. La imagen de esta pgina fue retocada con efecto relieve. Sin embargo, puede acceder a la galera de imgenes para encontrar alguna imagen que desee aplicar. Tambin puede utilizar una imagen animada de fondo. Para ello, debe buscar archivos con extensin GIF y verificar que sean animados.

    9. Color de texto e hipervnculos


    Captulo anterior: 8 - Color e imagen de fondo de la pgina Captulo siguiente: 10 - Manejo de prrafos Adems de modificar el fondo de la pgina aplicando color de fondo o imgenes, es posible cambiar el color del texto de toda la pgina, as como el color de los vnculos. Para cambiar el color del texto de toda la pgina, use el modificador TEXT=Color. Por ejemplo: <body bgcolor=cyan Text=Blue> Se utiliza para aplicar color de fondo cyan y color de texto azul a toda la pgina. Si se desea que los hipervnculos no visitados an tengan un color distinto al color azul predeterminado, debe hacer lo siguiente: <body bgcolor=cyan Text=Blue Link=Yellow Vlink=Gray> Esta instruccin aplica el color amarillo predeterminado para todos los hipervnculos de la pgina, y el color gris a los hipervnculos visitados. Ejercicio Debers disear la pgina que se muestra a continuacin, aplicando posteriormente, a solicitud del profesor, color de fondo o imagen de fondo, as como alineacin y lneas de separacin.

    La imagen de fondo es una diapositiva de Microsoft PowerPoint con una plantilla de fondo. Adems se aplic un relleno de textura a la diapositiva Despus se agregaron las dos imgenes que se muestran sobre la textura, y se modific el color negro en la opcin Volver a colorear, del men Formato/Imagen. Los estilos de ttulo utilizados para esta pgina fueron H1, H2, H3 y H5.

    10. Manejo de prrafos


    Captulo anterior: 9 - Color de texto e hipervnculos Captulo siguiente: 11 - Interlineados Al igual que otros programas, HTML permite al programador modificar la apariencia predeterminada de los prrafos aplicando sangras tanto de primera lnea como de prrafos, e interlineados. Sangras Para aplicar sangra de primera lnea se usa el modificar text-indent. Para aplicar sangra de prrafo se usa el comando Blockquote. Por ejemplo, la siguiente lnea de cdigo, aplica una sangra de 50 pxeles para la primera lnea de un prrafo. <p style="text-indent:50">Esta es la primera lnea de texto con sangra de cincuenta pxeles de distancia desde el borde izquierdo.</p> El resultado de aplicar esta lnea de cdigo, es el siguiente:

    Adems de la sangra de primera lnea que puede ser especificada con un nmero en pxeles, HTML permite utilizar una sangra automtica mediante el comando Blockquote. Por ejemplo, la siguiente instruccin muestra cmo se puede aplicar una sangra automtica mediante el comando Blockquote. <Blockquote> Texto y otras instrucciones </Blockquote>

    11. Interlineados
    Captulo anterior: 10 - Manejo de prrafos Captulo siguiente: 12 - Hipervnculos En un procesador de textos los interlineados se utilizan mediante opciones de mens que permiten cambiar el espacio entre lneas de un prrafo. En HTML, el interlineado se controla con el modificador Line-height. A diferencia de un procesador de textos como Microsoft Word que tiene unos interlineados predeterminados, HTML permite al usuario separar las lneas de un prrafo mediante porcentajes. Por ejemplo, la siguiente instruccin aplica un porcentaje de interlineado de 150%, equivalente a 1.5 lneas. <p align=justify style="line-height=150%"> El resultado se muestra en la siguiente ventana con dos prrafos, el prrafo modificado con interlineado y el prrafo normal.

    Cada vez que desees aumentar el interlineado, debers aumentar el porcentaje. En la lnea de cdigo anterior, se incluy un modificador de alineacin, align=justify, esto permite que el prrafo se justifique. Ejercicio Haciendo uso de los conocimiento adquiridos, utilizando prioritariamente los comandos de formateo de prrafos para sangras e interlineados, debers disear la pgina que a continuacin se muestra.

    12. Hipervnculos
    Captulo anterior: 11 - Interlineados Captulo siguiente: 13 - Hipervnculos externos

    Hipervnculos Un hipervnculo es un vnculo de una pgina Web o un archivo a otra pgina Web u otro archivo. Cuando un visitante hace clic en el hipervnculo, el destino se mostrar en un explorador Web, se abrir o se ejecutar, en funcin del tipo de destino. El destino es con frecuencia otra pgina Web, pero tambin puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, una direccin de correo electrnico o un programa. Por ejemplo, un hipervnculo a una pgina muestra la pgina en el explorador Web y un hipervnculo a un archivo .avi abre el archivo en un reproductor multimedia. Hipervnculos locales con marcadores Cuando se crea un hipervnculo local, lo que en realidad se hace es desplazarse hacia otro punto de la misma pgina Web. Para ello, primero debemos hacer referencia al marcador del hipervnculo con la instruccin href="#Marcador", donde Marcador es el marcador del hipervnculo. Posteriormente, cuando se desarrolle el marcador, se deber anotar el nombre del marcador con la instruccin name="#marcador", donde marcador es el identificador utilizado en la instruccin href. A continuacin se muestra un diagrama que ilustra el concepto de un hipervnculo local.

    En la siguiente pgina encontrar un ejemplo de una pgina Web que utiliza marcadores de hipervnculos dentro del mismo documento. Observe que los marcadores se inician con las palabras claves <A Name>, para indicar que en esa seccin inicia un marcador que podr ser accedido desde cualquier parte del mismo documento, y las referencias a estos marcadores se aplican con la expresin <A Ref=#marcador>, donde marcador, es el nombre del marcador al que se desee acceder.

    Ambas pginas fueron desarrolladas en la misma ventana, es decir el cdigo fue escrito de arriba hacia abajo. La mecnica de esta pgina fue aplicar varios espacios (BR) para as poder desplazarse hacia la siguiente pgina y que sta se ubique hasta arriba (TOP). En situaciones normales, no sera necesario dejar tantos espacios, bastara con escribir los temas uno tras otro en el orden deseado.

    La siguiente figura muestra el cdigo utilizado para obtener ambas pginas mostradas arriba. Por lo tanto, si quiere probar lo mismo, slo debe copiar este cdigo en el bloc de notas y guardarlo como MARCADORES.HTM, y obtendr un pgina Web con dos ventanas iguales a las que se muestran arriba. <html> <head><title>Pgina Web con marcadores</title></head> <body TextColor="blue"> <a name="#Inicio"><h1>Pgina principal</h1></A> <hr> <p align="justify" Style="text-indent:50">Esta pgina contiene marcadores o hipervnculos locales que permiten al usuario desplazarse a travs del documento mediante estos hipervnculos. El uso de marcadores proporciona una manera prctica y sencilla de seccionar el documento y encontrar informacin rpidamente. No podan faltar en un curso de pginas Web los enlaces o hipervnculos, que son la esencia misma de la Red. Los tambin llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otro archivo del mismo sitio de Internet o a otra pgina de Internet, entre otras funciones. Habamos dejado nuestra pgina en la leccin anterior diseada en una tabla que ocupaba todo el documento. En esta leccin vamos a insertar todos los hipervnculos que tiene que haber en nuestra pgina. <br><br> </p> <a "target="_top" href="#Marcadores">Haga clic para obtener ms informacin sobre marcadores</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br> <br><br><br><br><br><br> <A name="#Marcadores"><h1>Qu son los marcadores</h1></A> Los marcadores son hipervnculos o enlaces internos que permiten desplazarse a travs del mismo documento. Cuando el usuario hace clic sobre un enlace, la pgina se desplaza hasta la seccin donde se haya definido un marcador.

    <br> Para definir un marcador, debe empezar con la expresin <b><i>A Name="#Marcador"</i></b> en el sitio donde desee definir un marcador. Para hacer referencia al marcador definido, use la expresin <b><i>A Href="#Marcador"</i></b>, para acceder a dicho marcador. <br> Un hipervnculo con marcador es un enlace entre un hipertexto y una seccin de un documento. <br><br><br><br><br><br><br><br><br><br><br><br> <A href="#Inicio">Volver arriba</A> </body> </html>

    13. Hipervnculos externos


    Captulo anterior: 12 - Hipervnculos Captulo siguiente: 14 - A una URL Hipervnculos externos: A una pgina Web local Para organizar de forma ms inteligente la informacin de un sitio Web puede manejarse ms de una pgina. En cualquier momento ser necesario acceder a dicha pgina, entonces puede crear un hipervnculo que le permita dirigirse a esa pgina de la siguiente manera: <a ref="pginaweb.htm">Texto del hipervnculo</a> La siguiente grfica ilustra el concepto de relacionar pginas en un mismo sitio con acceso mediante hipervnculos.

    Cuando accede a una pgina relacionada, puede controlar la ventana donde se mostrar el contenido de esta. Por ejemplo, puede mostrar la siguiente pgina en una ventana diferente, en la misma venta o en el mismo marco (en el caso de que se manejen marcos). Para realizar esta operacin debe escribir una instruccin como la siguiente:

    <a target="_blank ref="paginaweb.htm">Texto del hipervnculo</a> Esta instruccin indica a HTML que la siguiente pgina que se abrir utilizar una ventana nueva para su contenido. El siguiente ejemplo ilustra el uso de hipervnculos que acceden a otros documentos externos a la pgina Web actual.

    El cdigo para realizar una pgina como la que se muestra en el ejemplo anterior, lo tiene a continuacin. <html> <head><Title>Pgina con hipervnculos externos</title></head> <body> <h1>Mi pgina con hipervnculos externos</h1> <hr> <a href="Primera.htm">Primer hipervnculo</a><br> <a href="Segunda.htm">Segundo hipervnculo</a><br> <a href="tercera.htm">Tercer hipervnculo</a><br> </body> </html> Las pginas a las que acceden los hipervnculos se disean de forma independiente de la pgina actual. Si necesita saber cmo relacionar estas pginas, haga lo siguiente: 1.- Una vez diseada la pgina principal, gurdela con el nombre Principal.htm. 2.- En el men Archivo, elija Nuevo. 3.- Disee una nueva pgina para el primer hipervnculo. Cuando termine gurdela con el nombre Primera.htm.

    4.- Repita estos pasos para las siguientes pginas (Segunda.htm, Tercera.htm). Cuando termine con todas las pginas, abra la pgina principal y pruebe haciendo clic en los hipervnculos de la pgina. Ejercicios Con los conocimientos adquiridos hasta este momento, disea la pgina que se muestra, utilizando los elementos de prrafos, alineacin, Negrita, cursiva y subrayado, estilo de ttulo e hipervnculos externos.

    El fondo de la pgina se obtuvo de usar una diapositiva de PowerPoint con fondo relleno con trama. Sin embargo, se usar la imagen o color de fondo que el profesor indique. Los hipervnculos son externos. Cuando el usuario haga clic en algn hipervnculo, ste se abrir en una ventana independiente.

    14. A una URL


    Captulo anterior: 13 - Hipervnculos externos Captulo siguiente: 15 - A un correo electrnico As como pueden vincularse pginas Web dentro del mismo sitio, tambin podemos crear un hipervnculo que nos lleve a un sitio Web. Para ello, debemos utilizar la siguiente sintaxis: <a ref="http://www.sitioweb.com">Texto del hipervnculo</a>

    Por ejemplo, la siguiente pgina muestra unos hipervnculos a sitios de Internet.

    El cdigo para obtener la pgina mostrada, es el siguiente: <html> <head><title>Uso de URL</title></head> <body> <h1>Uso de URL</h1> <hr> <a href="http://www.todito.com.mx"><h3>Quiero acceder a Todito.com</a> <a href="http://www.mp3.com"><h3>Sitio de msica MP3</a> <a href="http://www.1001juegos.com"><h3>Juegue como los mejores</a> </body> </html> Para poder acceder a dichos sitios, deber estar conectado a Internet. Si prueba estos vnculos con conexin a Internet, ver que el contenido del sitio visitado, reemplaza el contenido de nuestra pgina. Para evitar esto, escriba la siguiente sintaxis: <a target="_blank" ref="http://www.sitioweb.com">Texto del hipervnculo</a> En la siguiente grfica se muestra cmo el hipervnculo visitado muestra el contenido de Todito.com en una nueva ventana.

    Ejercicio Modifica la pgina anterior de manera que aparezca en el sitio que se indica, la pgina Web de la papelera.

    15. A un correo electrnico


    Captulo anterior: 14 - A una URL Captulo siguiente: 16 - Insercin de imgenes Un tipo de hipervnculo muy utilizado es a una direccin de correo electrnico. Muy a menudo nos topamos en Internet con expresiones que nos permiten pulsar un hipervnculo y nos remiten a un programa administrador de correos. Desde aqu

    podemos escribir un mensaje al usuario de correo que se especifique. Por ejemplo, observe la siguiente pgina.

    Esta pgina hace lo siguiente: Cuando el usuario hace clic en la expresin subrayada para enviar el e-mail, abrir un programa (en este caso propiamente), Outlook Express. La siguiente figura muestra las dos ventanas despus de haber hecho clic en el hipervnculo.

    En esta ventana podr escribir el comentario que desee escribir al propietario del e-mail. El cdigo para obtener el resultado mostrado arriba, lo ver a continuacin.

    Ejercicio Modifica la pgina anterior de manera que muestre la pgina con la siguiente vista.

    16. Insercin de imgenes


    Captulo anterior: 15 - A un correo electrnico Captulo siguiente: 17 - Tamao y alineacin de una imagen insertada En una pgina Web puede insertar cualquier imagen. Las imgenes deben ser de tipo JPG, BMP o GIF. Para insertar una imagen, debe utilizar la siguiente sintaxis: <img src="imagen.jpg"> En sta instruccin se da por defecto que la imagen que se inserta tiene la extensin JPG. Para insertar otro tipo de imagen slo deber especificar la extensin correspondiente. Las imgenes pueden ser adquiridas de la galera de imgenes de Microsoft, o de cualquier otra imagen digitalizada. Incluso se pueden crear iconos animados desde algn programa de animacin, y usarlos en una pgina Web. Observe la pgina anterior modificada.

    La imagen anterior fue insertada en una diapositiva de PowerPoint; posteriormente, se hizo clic con el botn derecho sobre la misma, se eligi la opcin Guardar como imagen, se escribi un nombre para la imagen y se puls guardar. El cdigo para insertar la imagen se muestra a continuacin.

    17. Tamao y alineacin de una imagen insertada


    Captulo anterior: 16 - Insercin de imgenes Captulo siguiente: 18 - Aplicacin de bordes a imgenes En algn momento ser necesario controlar la dimensin de la imagen insertada, sea para aumentarla o para disminuirla. En el ejemplo anterior se us la instruccin <align=right>, para alinear la imagen a la derecha; adems de esta instruccin, puede usar las instrucciones <center> y <align=Left> para ubicar la imagen al centro, o a la izquierda de la pantalla. Para controlar el tamao de las imgenes, use las instrucciones <height=valor> o <Width=valor> para controlar la altura y la anchura de la imagen. Tambin puede usar la instruccin <Border> con un valor mayor que 0, para aplicar un marco alrededor de la imagen.

    Por ejemplo, la pgina anterior fue modificada para mostrar dos imgenes, una a la izquierda y otra a la derecha con tamaos de 100 pxeles cada una.

    Para poder escribir alrededor del texto debe utilizar la instruccin <align=left> para la imagen insertada. No obstante que si no usa dicha instruccin la imagen se alinear a la izquierda, la instruccin <align=left> permite aplicar el efecto que se muestra en la pgina. El cdigo para aplicar obtener el diseo de la pgina mostrada arriba, se muestra a continuacin.

    18. Aplicacin de bordes a imgenes


    Captulo anterior: 17 - Tamao y alineacin de una imagen insertada Captulo siguiente: 19 - Imgenes como hipervnculos Se dijo anteriormente que a una imagen insertada en una pgina Web se le puede aplicar un marco o borde. Adems, si utiliza el modificador ALT, podr especificar un mensaje o pista, cuando seale con el Mouse a la imagen. Para hacer esto, debe incluir dentro de la instruccin para insertar una imagen, la siguiente sintaxis: <img src="imagen.jpg" Border=valor Alt="Estudio=Progreso">

    Un valor mayor que 0, aplicar un contorno a la imagen insertada. Si utiliza valor 0, ser como si omitiera el modificar Border. La pgina anterior fue modifica para aplicar contornos a las dos imgenes insertadas.

    Cuando el Mouse se ubica sobre la imagen del estudiante, despliega un mensaje instantneo aplicado en la instruccin ALT="cadena de mensaje". Si se desea aplicar espaciado horizontal o vertical, debe utilizar los modificadores hspace o vspace, con la instruccin de insercin de imgenes. Cuando se aplica espaciado horizontal, la siguiente imagen o texto se ajusta a la distancia indicada en hspace (en pxeles). Igual sucede cuando se aplica el modificar vspace, la siguiente imagen o prrafo insertado debajo de la imagen, se ajustar a la distancia indicada por hspace. Por ejemplo, observe la pgina anterior y se dar cuenta que el texto a la derecha de la imagen, est pegada del lado derecho de la misma. Ahora si observa la siguiente pantalla, ver que el texto tiene una separacin de 20 pxeles respecto al lado derecho de la imagen. Se debe entender que la separacin en orden horizontal aplicado a una imagen, afecta a ambos lados de la misma, es decir, si aplico 20 pxeles de separacin, se aplicarn 20 a la izquierda, y 20 a la derecha de la imagen.

    La siguiente pantalla muestra la pgina de productos de la papelera. Es un mosaico de imgenes insertadas controladas mediante los modificadores Height, Width, hspace y vspace.

    El cdigo para obtener la pgina mostrada arriba, se muestra a continuacin. <img Border=1 src="Agenda.gif" Alt="Agenda Escolar $50.00" Height=80 Width=60> <img Border=1 src="Agenda2.jpg" Alt="Agenda Ejecutiva $100.00" Height=80 Width=60 hspace=20> <img Border=1 src="AgendaElectronica.gif" Alt="Agenda Electrnica $800.00" Height=80 Width=60> <img Border=1 src="OrganizaDiscos.jpg" Alt="Organizador de discos $120.00" Height=80 Width=60 hspace=20> <img Border=1 src="OrganizaLapiz.jpg" Alt="Organizador de lpices $50.00" Height=80 Width=60>

    19. Imgenes como hipervnculos


    Captulo anterior: 18 - Aplicacin de bordes a imgenes Captulo siguiente: 20 - Pelculas Para utilizar imgenes como hipervnculos, se debe usar la misma instruccin que para los hipervnculos de texto, a excepcin de que a continuacin de la instruccin se debe incluir la instruccin de insercin de imgenes. La siguiente lnea de cdigo muestra el ejemplo de insercin de imgenes como hipervnculos. <a href="carrera.htm"><img border=0 src="carrera.jpg" ></A> La primera instruccin indica el nombre de la pgina a la que se desee acceder cuando se haga clic en el hipervnculo. La segunda instruccin inserta la imagen en la pgina Web. Ejercicios Con los conocimientos adquiridos hasta este momento, se deber disear la pgina que se muestra a continuacin.

    Los botones pueden ser creados en PowerPoint o Paint, o Corel Draw. Cada botn representa un hipervnculo, por lo tanto, se deber crear una pgina para cada hipervnculo. La ltima lnea de cdigo es una marquesina que se desplaza a travs de toda la pantalla.

    20. Pelculas

    Captulo anterior: 19 - Imgenes como hipervnculos Captulo siguiente: 21 - Numeracin y vietas De forma parecida a las imgenes, las pelculas pueden insertarse mediante dos formas, con la extensin .AVI o con la extensin .DAT. De ambas maneras, HTML interpretar que se trata de una pelcula y buscar reproducir el archivo en el explorador. La siguiente instruccin inserta una pelcula de tipo AVI, de las que se encuentran en la galera de imgenes de Office. <img border="0" dynsrc="COUNT8.AVI" start="fileopen" > La primera instruccin indica que se insertar una imagen; la instruccin dynsrc, significa dynamic source (origen dinmico) y prepara al explorador para reproducir un archivo de pelcula. La instruccin Start indica en qu momento iniciar la pelcula, si no tiene parmetros, la pelcula se iniciar automticamente al abrir la pgina. Puede buscar pelculas y guardarlas en una carpeta, posteriormente, inserte una lnea de cdigo en el sitio que desee. Para reproducir una pelcula al mover el Mouse sobre ella, agregue el parmetro mouseover al modificador start. Si desea que la pelcula se reproduzca de forma infinita, agregue el parmetro loop con la expresin infinite. El ejemplo siguiente muestra la forma como debe usar el parmetro loop. <img border="0" dynsrc="COUNT8.AVI" start="fileopen" loop="infinite"> Adems de insertar pelculas con formato .AVI, HTML le permite insertar pelculas con extensin .DAT. Por ejemplo, la siguiente instruccin reproduce una pelcula con extensin .DAT, llamada MUSIC01. Este archivo es un vdeo clip de Michael Jackson. Para reproducir correctamente el archivo de pelcula, la pgina deber estar en la misma ruta que el archivo a reproducir o en su defecto, hacer referencia correctamente al archivo. <img border="0" dynsrc="MUSIC01.DAT" start="fileopen"> Para ajustar el tamao de la pelcula, deber usar los modificadores Height y Width, junto con la instruccin de insercin de la pelcula. Por ejemplo: <img border="0" dynsrc="MUSIC01.DAT" start="fileopen" Width="300" Height="200">

    21. Numeracin y vietas


    Captulo anterior: 20 - Pelculas Captulo siguiente: 22 - Numeracin Al igual que en un procesador de textos u otros programas, el lenguaje HTML permite aplicar vietas, a excepcin de que se cuenta slo con tres tipos diferentes de vietas. Vietas

    Para aplicar vietas debe hacerse uso de la instruccin <UL>. Esta instruccin indica al explorador que lo que sigue a continuacin es una lista con vietas. Por cada smbolo utilizado debe usar la instruccin <LI>, la cual se corresponde con cada lnea de dato de la lista. Finalmente debe cerrar la lista de vietas con la instruccin </UL>. Las siguientes lneas de cdigo muestran la forma como debe introducirse cada expresin en la pgina Web para su correcta ejecucin. <ul> <li>Vieta 1</li> <li>Vieta 2</li> <li>Vieta 3</li> <li>Vieta 4</li> </ul> Si copia estas lneas de cdigo a una pgina Web, guarde los cambios y actualice la pgina para ver el resultado, debe mostrarse como la figura siguiente:

    Si se desea cambiar el tipo de vieta predeterminada, se debe incluir el parmetro TYPE junto con la instruccin <UL>. Por ejemplo, la siguiente lnea de cdigo, aplica el estilo crculo a la lista de vietas. <ul type="circle"> <li>Vieta 1</li> <li>Vieta 2</li> <li>Vieta 3</li> <li>Vieta 4</li> </ul> El resultado se muestra a continuacin:

    Otro tipo de vietas que puede usarse en una lista es el tipo cuadrado. Para ello, utilice el parmetro TYPE con la expresin square. El siguiente ejemplo aplica vieta de tipo cuadrado a la lista. <ul type="square"> <li>Vieta 1</li> <li>Vieta 2</li> <li>Vieta 3</li> <li>Vieta 4</li> </ul> El resultado se muestra abajo.

    Si se desea cambiar el color de la lista con vietas, se debe incluir el parmetro STYLE="Color: nombrecolor". Por ejemplo, la siguiente lnea de cdigo aplica una vieta de tipo cuadrada, con color de texto y vieta azul. <ul type="square" style="color: blue"> Asimismo puede usar la instruccin <Font Color=Color> para modificar el color del texto.

    22. Numeracin
    Captulo anterior: 21 - Numeracin y vietas Captulo siguiente: 23 - Trminos y definiciones

    Adems de aplicar vietas a una lista, puede sangrar una lista si usa una instruccin <UL> dentro de otra. Asimismo, puede usar numeracin automtica para genera listas de datos numeradas a partir de un valor. Para usar numeracin debe aplicar la instruccin <OL> al principio de la lista y las instrucciones <li> para cada lnea de dato; finalmente, debe cerrar la numeracin con la instruccin </OL>. El siguiente fragmento de cdigo es un ejemplo de cmo se debe ordenar una lista con numeracin. <ol> <li>Primer nmero</li> <li>Segundo nmero</li> <li>Tercer nmero</li> <li>Cuarto nmero</li> </ol> El resultado de este bloque de cdigo se muestra a continuacin.

    Para cambiar el tipo de numeracin por letras o en representacin romana, debe incluir el parmetro type con una expresin siguiente: Expresin I i A a Resultado Nmeros romanos con letras maysculas. Nmeros romanos con letras minsculas. Literales maysculas. Literales minsculas

    El siguiente bloque de cdigo muestra la forma correcta de utilizar las expresiones con el parmetro type, de manera que se puedan obtener diferentes tipos de vietas. <ol type="A">

    <li>Vieta 1</li> <li>Vieta 2</li> <li>Vieta 3</li> <li>Vieta 4</li> </ol> Resultado:

    Si se desea iniciar la numeracin desde un nmero mayor que 1, entonces debe incluir, junto con la instruccin <OL>, el parmetro start, que indica el nmero donde se desea iniciar la lista. El siguiente bloque de cdigo se usa para ilustrar el tema en cuestin. <ol start="5"> <li>Lnea 1</li> <li>Lnea 2</li> <li>Lnea 3</li> <li>Lnea 4</li> </ol> El resultado es el siguiente:

    Para iniciar con literales en un valor mayor que 1, se debe establecer el nmero correspondiente a la letra en que se desee iniciar. Por ejemplo, el siguiente bloque de texto, enumera una lista de temas iniciando desde la letra F. <ol type="A" start="6"> <li>Computadoras</li> <li>Impresoras</li> <li>Monitores</li> <li>Teclados</li> <li>Cmaras digitales</li> </ol> El resultado se muestra a continuacin.

    Ejercicio Haciendo uso de las instrucciones para insercin de pelculas, vietas y numeracin, debe disear la siguiente pgina.

    Para que los objetos se realicen correctamente debes ajustar la configuracin de la pgina al tamao deseado. Por ejemplo, para el ttulo principal, se us una diapositiva de tamao horizontal de 20cm y 3 cm. Para el globo se us una diapositiva de 20 cm. horizontal y 5 cm. vertical. Despus de se hayan ajustado las diapositivas, se debe disear el contenido. El procedimiento para obtener esta pgina es el siguiente: 1. Se busca una pelcula de tipo GIF la cual se inserta en el lugar donde se encuentra las dos imgenes de personas. 2. El ttulo se dise en PowerPoint y se guard como una imagen JPG. Se inserta en el lugar indicado. Asimismo, la imagen del globo junto con el texto alrededor suyo se dise en PowerPoint y se guard como imagen JPG. Posteriormente se insert en el lugar mostrado. 3. Las vietas se deben utilizar fuera de cualquier instruccin de manejo de imgenes.

    23. Trminos y definiciones


    Captulo anterior: 22 - Numeracin Captulo siguiente: 24 - Tablas Para facilitar el diseo de ndices, vocabularios, diccionarios, enciclopedias y temas afines, HTML cuenta con instrucciones que permiten utilizar una palabra como trmino definido y una seccin asociada que es la definicin del trmino. Es ideal para generar vocabularios, tablas de contenido, diccionarios, etc. La instruccin para iniciar la lista de expresiones o trminos es DL con su respectivo cierre. La sintaxis es la siguiente:

    <DL> <DT>Termino</DT> <DD>Definicin del trmino que puede ser tan largo como el usuario desee.</DD> </DL> DL significa Language Dictionary (Diccionario de Lenguaje) e indica la lista de trminos que se van a definir. DT significa Terms Dictionary (Diccionario de trminos) e indica propiamente el trmino que se va definir. La definicin del trmino se realiza con la instruccin DD (Dictionary Definition), y en esta instruccin se puede colocar cualquier cantidad de texto. El siguiente ejemplo muestra la forma correcta de utilizar las opciones descritas anteriormente.

    Para el ejercicio anterior se utiliz el estilo "negrita" para remarcar el trmino definido. Sin embargo, puede utilizar dichos trminos sin aadir estilos para realizar un ejercicio natural. El cdigo para obtener el resultado mostrado en la pgina anterior, se muestra a continuacin. <html> <body> <h1>Diccionario de informtica</h1>

    <hr> <dl> <dt><b>Informtica</b></dt> <dd>Ciencia que estudia el procesamiento, organizacin, almacenamiento y transferencia de la informacin de a travs de una computadora.

    <dt><b>Computadora</b></dt> <dd>Mquina electrnica capaz de realizar cualquier actividad con la ayuda del software.

    <dt><b>Hardware</b></dt> <dd>Son todos los componentes fsicos de una computadora, como el CPU, el Mouse, la impresora, los componentes internos, como la memoria, el microprocesador, etc.

    <dt><b>Software</b></dt>

    <dd>Es la parte inteligente de la computadora. Esta capacidad de la computadora de interpretar, calcular y analizar datos la obtiene mediante los programas diseados para este fin. Por ejemplo, para clculos financieros se utiliza Microsoft Excel; para pelculas Studio 3DMax y para animaciones, Flash, etc.

    </body> </html>

    Si omite las clusulas <b> y </b>, su ejercicio se ver de la siguiente manera.

    Esta es la forma predetermina de utilizar las herramientas citadas anteriormente. Ejercicio Usando los conocimientos adquiridos acerca del uso de trminos y definiciones, disee la siguiente pgina:

    El profesor podr aadir otros elementos como Fondo, color del texto, tamaos de texto y otras opciones segn la creatividad del profesor o del alumno. Tambin podr presentarse como un proyecto a manera de tarea para el alumno, de manera que ste

    mejore la apariencia del documento actual. Incluso podr cambiar el contenido de forma que cuando aparezcan palabras no conocidas, se utilice un hipervnculo que lleve hacia el significado de dicho trmino.

    24. Tablas
    Captulo anterior: 23 - Trminos y definiciones Captulo siguiente: 25 - Definicin de filas Una tabla est formada por filas y columnas de celdas en las que se puede insertar texto y grficos. Se pueden utilizar y personalizar las tablas de varias formas diferentes con el fin de hacerlas ms atractivas y fciles de leer. Se debe utilizar una tabla para presentar la informacin en formato de cuadrcula, por ejemplo horarios, informacin acerca de productos, tarifas, calificaciones de alumnos, etc. Creacin de una tabla Para crear una tabla se debe usar la instruccin Table, seguida de parmetros que indican la anchura, el color o imagen de fondo, etc. Ejemplo: <table> </table> Estas dos instrucciones indican al explorador de Internet que se en este lugar de la pgina se va a crear una tabla. Uso de encabezados de tabla Despus de que se haya indicado al explorador de Internet que se va a crear una tabla, es necesario definir cuntas columnas de tabla se desean utilizar. Para ello se deben utilizar las instrucciones <TH>, las cuales indican los encabezados de tabla. Ejemplo: <Table> <Th>Columna 1</th><TH>Columna 2><TH>Columna 3</TH> </table> Este segmento de cdigo le indica al explorador que usaremos una tabla de tres columnas. Cada identificador TH que utilice indica una columna de dato que desee

    representar en la tabla. Ms adelante se ver cmo no siempre se deben hacer coincidir las columnas con las filas.

    25. Definicin de filas


    Captulo anterior: 24 - Tablas Captulo siguiente: 26 - Control del ancho de la tabla Para utilizar filas en una tabla, se debe usar la instruccin TR y TD. TR identifica la fila de datos, y TD es la fila de los datos propiamente dicho. El siguiente ejemplo muestra la forma como se debe crear una tabla bsica basada en filas y columnas. <html> <head><Title>Mi primera tabla</title></head> <body> Este es una ejemplo de tablas.<br><br>

    <Table> <th>Columna 1</th><th>Columna 2</th><th>Columna 3</th> <tr> <td>Dato 1</td><td>Dato 2</td><td>Dato 3</td> </tr> </table>

    </body> </html> El resultado de este cdigo, se muestra en la siguiente grfica.

    Si se desea mostrar la cuadrcula de la tabla, slo debe usar el modificar Border, con un valor mayor que 0. Por ejemplo, la siguiente lnea cdigo, mostrar la cuadrcula de la tabla. <Table Border=1> El resultado se muestra a continuacin.

    26. Control del ancho de la tabla


    Captulo anterior: 25 - Definicin de filas Captulo siguiente: 27 - Control de celdas Cuando se crea una tabla sin parmetros, sta se ajusta al ancho de los campos escritos en los encabezados. Si se desea crear una tabla ms amplia, se debe usar el modificar Width con un valor de porcentaje. Por ejemplo, para crear una tabla a mitad de pantalla, se debe usar la siguiente instruccin: <Table Border=1 Width=50%> El resultado de esta lnea de cdigo se muestra en la siguiente grfica.

    Por lo tanto para crear una tabla que ocupe el ancho de la pantalla, se deber ajustar el porcentaje al 100%. El siguiente ejemplo, muestra la misma tabla anterior a toda la pantalla.

    Para aplicar color de fondo a la tabla use el modificar bgcolor seguido de una constante de color. Por ejemplo, para aplicar color de fondo cyan a la tabla, use la siguiente instruccin: <table Border=1 Width=100% bgcolor=cyan> Ejercicio Con los conocimientos adquiridos hasta este momento, se deber disear la siguiente tabla.

    Para aplicar una imagen de fondo a una tabla, deber usar la instruccin Img Background que usamos en el fondo de la pgina. La siguiente lnea de cdigo muestra la forma correcta de aplicar una imagen de fondo a una tabla. <table border=1 width=100% img background="imagen.jpg"> La siguiente grfica muestra una imagen de fondo aplicada a la tabla.

    El procedimiento para lograr este efecto es insertar una imagen en una diapositiva de PowerPoint; posteriormente aclararla un poco con la herramienta brillo; despus guardarla como imagen.

    27. Control de celdas


    Captulo anterior: 26 - Control del ancho de la tabla Captulo siguiente: 28 - Combinacin de celdas Lo ms importante de crear tablas es saber manipular las celdas respecto a la informacin que se desea mostrar. Esto requiere controlar el ancho, alto color de fondo de forma particular, combinar celdas, etc. Digamos que la celda es en s, una instruccin TD de la tabla. Es decir cada celda es un campo en particular dentro la tabla. Para ello, si queremos aplicar un color distinto a la celda de los nombres de los alumnos, el cdigo debe ser el siguiente: <td bgcolor="yellow">Ana Mariela Dominguez Vzquez </td> Esta lnea de cdigo debe repetirla para cada fila de registro de la tabla. El siguiente ejemplo muestra la misma tabla anterior con los encabezados en color gris oscuro.

    El cdigo completo de la tabla, se lo muestro a continuacin. <html> <head><Title>Mi primera tabla</title></head> <body> <h2><center>CAMBRIDGE ENGLISH CENTER</H2> <H3>REPORTE DE CALIFICACIONES</H3></center>

    <Table Border=1 width=100%> <th bgcolor="gray">No.</th><th bgcolor="gray">Nombre del alumno</th> <th bgcolor="gray">Calificacin</th> <tr> <td bgcolor="gray">1</td> <td bgcolor="yellow">Ana Mariela Dominguez Vzquez </td> <td bgcolor="cyan">10</td> </tr> <tr> <td bgcolor="gray">2</td> <td bgcolor="yellow">Marisela Cardozo Vega</td>

    <td bgcolor="cyan">9</td> </tr> <tr> <td bgcolor="gray">3</td> <td bgcolor="yellow">Emmanuel Rodrguez Velasco</td> <td bgcolor="cyan">10</td> </tr> <tr> <td bgcolor="gray">4</td> <td bgcolor="yellow">Jacinto Marin Dominguez</td> <td bgcolor="cyan">8</td> </tr> <tr> <td bgcolor="gray">5</td> <td bgcolor="yellow">Silvia Nayeli Amador Hdez.</td> <td bgcolor="cyan">9</td> </tr>

    </table>

    </body> </html>

    28. Combinacin de celdas


    Captulo anterior: 27 - Control de celdas Captulo siguiente: 29 - Marcos

    La combinacin de celdas permite obtener diseos de tablas ms sofisticados que pueden utilizarse para titulares, marcos de imagen, etc. Para combinar celdas se usa la instruccin Colspan o Rowspan, ya sea que se deseen combinar columnas o filas. Por ejemplo, la siguiente instruccin combina las tres columnas de la primera fila de una tabla. <td width="100%" colspan="3" height="34">Fila combinada</td> Para ilustrar mejor el uso de combinacin de celdas, a continuacin se muestra la siguiente tabla.

    El cdigo para obtener una tabla con este aspecto se muestra a continuacin. <html> <head><title>Mi tabla combinada</title></head> <body>

    <table Border=1 width=100%>

    <tr> <td width="100%" colspan="4">Primera fila combinada</td> </tr>

    <tr> <td width="25%">Columna 1</td> <td width="25%">Columna 2</td>

    <td width="25%">Columna 3</td> <td width="25%">Columna 4</td> </tr>

    </table> </body> </html> La expresin ColSpan indica cuntas columnas se van a combinar, en este indican cuatro columnas. Si se desean combinar filas se debe utilizar la expresin RowSpan. Por ejemplo RowSpan="4" indica que se van a combinar 4 filas. La siguiente tabla muestra un ejemplo de combinacin de columnas y filas.

    El cdigo para esta tabla es el siguiente: <html> <head> <title>Pagina nueva 1</title> </head> <body> <table border="1" width="100%"> <tr> <td width="100%" colspan="4">Fila combinada</td>

    </tr> <tr> <td width="25%" rowspan="4">rea RowSpan</td> <td width="25%">Celda 1</td> <td width="25%">Celda 2</td> <td width="25%">Celda 3</td> </tr> <tr> <td width="25%">Celda 4</td> <td width="25%">Celda 5</td> <td width="25%">Celda 6</td> </tr> <tr> <td width="25%">Celda 7</td> <td width="25%">Celda 8</td> <td width="25%">Celda 9</td> </tr> <tr> <td width="25%">Celda 10</td> <td width="25%">Celda 11</td> <td width="25%">Celda 12</td> </tr> </table> </body>

    </html> Ejercicio Con los conocimientos adquiridos acerca del uso de tablas, combinacin de celdas y temas anteriores como vietas, insercin de imgenes y pelculas, disea la pgina que se muestra a continuacin.

    29. Marcos
    Captulo anterior: 28 - Combinacin de celdas Captulo siguiente: 30 - Marcos II Una pgina de marcos es un tipo especial de pgina HTML que divide la ventana del explorador en distintas zonas denominadas marcos, cada una de las cuales puede mostrar una pgina diferente. Por ejemplo, la siguiente grfica muestra una pgina con tres marcos: Titular, Contenido y Marco principal.

    Una pgina de marcos no incluye contenido visible, es slo un contenedor que especifica el resto de las pginas que se van a mostrar y la forma de mostrarlas. Cuando hace clic en un hipervnculo de una pgina que aparece en un marco, la pgina a la que seala dicho hipervnculo aparece normalmente en otro marco, denominado Marco de destino. Por ejemplo, la pgina de marcos mostrada anteriormente, muestra realmente cuatro pginas al mismo tiempo en el explorador: la pgina de marcos, que es el contenedor y las tres pginas que aparecen en cada uno de los marcos. Las pginas de marcos normalmente se utilizan para los catlogos, las listas de artculos o cualquier otro tipo informacin ordenada en secciones de pantalla. Los autores utilizan pginas de marcos porque incluyen exploracin integrada y presentan una interfaz de usuario coherente (es decir, la estructura y el diseo de los marcos). Puede tambin crear pginas de dos marcos, como muestra la siguiente grfica.

    Para nuestro ejercicio, crearemos una pgina con dos marcos. El marco izquierdo servir como contenido, y el marco derecho como marco de destino. Para ello ser necesario crear tres pginas: la primera ser la que dividir la ventana del explorador en dos secciones (como lo muestra la grfica). La segunda ser la que se ubique en la seccin de contenido, y la tercera, ser la que se muestre inicialmente en el marco de destino.

    30. Marcos II
    Captulo anterior: 29 - Marcos Captulo siguiente: 31 - Marcos III

    Para generar marcos en una pgina Web se debe utilizar la instruccin FRAMESET. El cdigo de la primera pgina se muestra a continuacin.

    La instruccin Frameset indica al explorador que se van a utilizar marcos. Cols, identifica el nmero de columnas que se van a usar, la primera de 200 pxeles y la segunda con la parte restante de la pantalla. Name es una instruccin que se utilizan en este caso para nombrar las secciones del explorador, para poder hacer referencia posteriormente al manejar hipervnculos. Target, significa destino, y especifica el nombre del marco de destino donde se dirigir el contenido del hipervnculo. Src significa Source (origen), e identifica la pgina origen mostrada inicialmente en cada seccin. Noframes es una instruccin que se utiliza en caso de que el explorador de Internet no pudiese mostrar una pgina con marcos. En este caso, el Explorador enviar el mensaje que queda entre las lneas de <Body> y </Body>. Cuando se haya capturado el cdigo, debe guardar el archivo con un nombre que se relacione con la funcin del cdigo (por ejemplo, marco.htm) Si abre la pgina, observar algo como esto:

    Izquierda: Contenido. Derecha: Marco de destino. A continuacin, se debe crear la pgina de contenido. Puede ingresar nuevamente al bloc de notas o al programa donde se edita el cdigo y capturar el cdigo que muestra a continuacin. Cuando termine de capturar este cdigo, guarde el archivo como Contenido.htm, ya que con este nombre, se hizo referencia en la pgina anterior, en la instruccin SRC.

    Cuando haya capturado el cdigo y guardado el archivo, abra la pgina Marco, y observar lo siguiente:

    31. Marcos III


    Captulo anterior: 30 - Marcos II Captulo siguiente: 32 - Formularios La pgina tres, es en realidad una pgina de relleno, es decir esta pgina se mostrar inicialmente, aunque ser remplazada por la pgina correspondiente a cada hipervnculo del marco de contenido. Para cada hipervnculo se debe crear una pgina diferente, con la estructura que tiene la pgina inicial. El cdigo de esta pgina se muestra a continuacin.

    Cuando haya capturado el cdigo, guarde el archivo como Inicial.htm, que es el nombre con el que se hizo referencia a la pgina en el primer cdigo. Posteriormente, abra el archivo marco, y observar lo siguiente:

    Cuando haya hecho esto, habr comprendido cmo funcionan las pginas Web que manejan marcos. Ejercicio La pgina anterior contiene cuatro vietas. Usando las opciones de Hipervnculos debers convertir a las cuatro vietas en hipervnculos que permitan, al hacer clic en cada uno, desplazarse a una pgina correspondiente a la informacin de la vieta. Nota importante. Las pginas a las que se har referencia debern ser diseadas con la misma estructura de las cinco primeras lneas de cdigo de la pgina Inicial.htm, para que puedan aparecer en el marco derecho cada vez que se haga clic en un vnculo de la izquierda.

    32. Formularios
    Captulo anterior: 31 - Marcos III Captulo siguiente: 33 - Elementos para introducir los datos La manera general para que los lectores de nuestra pgina se puedan comunicar con nosotros es por medio de un enlace a nuestra direccin de e-mail, con lo que recibiramos un e-mail convencional. Pero puede ser que lo que necesitemos sea solamente una respuesta concreta a unas opciones que presentaremos nosotros mismos,

    o un comentario del usuario, para lo que le suministraremos un espacio en donde introducirlo. Se puede hacer todo esto, adems de otras cosas, utilizando los formularios, con los que se pueden confeccionar pginas que contengan los elementos necesarios para ello, tal como botones de radio, listas de seleccin, cajas de introduccin de texto y de control, etc. Los formularios permiten que los dems nos enven la informacin directamente a nosotros o bien a nuestro servidor, en donde hemos instalado un programa que procese esta informacin. Por ejemplo, vamos a suponer que queremos crear una lista de correo. Los usuarios pueden introducir sus nombres y direcciones de e-mail y pulsar un botn de envo. Esos datos los podemos recibir "en bruto" en nuestro correo, con los que haramos manualmente dicha lista de correo, sin necesitar ningn programa para ello. Este proceso es el que vamos a comentar en este captulo. La otra posibilidad, de la que nicamente se va a hacer esta mencin, es que hubiramos instalado en nuestro servidor un programa especial para procesar esos datos y aadirlos a la lista de correo, y que incluso pudiera devolver automticamente al usuario algn tipo de informacin. Para conseguir esto, los formularios necesitan ejecutar programas o scripts por medio del CGI (Common Gateway Interface). El CGI permite a los formularios ser procesados por programas escritos en cualquier lenguaje, aunque los ms usados en Internet son el Perl y el C. Estructura de un formulario La estructura general de un formulario es: 1. Etiqueta de inicio: <FORM ACTION="mailto:direccin_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 2. Cuerpo del formulario, con los distintos elementos para poder introducir los datos. 3. Botones de envo y de borrado. 4. Etiqueta de cierre </FORM> Etiqueta de inicio El atributo ACTION indica la accin que se debe efectuar y que es que los datos sean enviados por e-mail a la direccin indicada. (Si hiciramos uso del CGI, sera precisamente aqu donde indicaramos su localizacin en el servidor, que habitualmente es el directorio cgi-bin, para que procese los datos).

    El atributo METHOD=POST indica que los datos sean inmediatamente enviados por correo a la direccin de e-mail, cuando el usuario pulse el botn de envo. Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un fichero de texto, perfectamente legible y sin codificar.

    33. Elementos para introducir los datos


    Captulo anterior: 32 - Formularios Captulo siguiente: 34 - reas de texto Los vamos a dividir en tres clases: 1. Introduccin por medio de texto. 2. Introduccin por medio de mens. 3. Introduccin por medio de botones. La introduccin de los datos se consigue por medio de la etiqueta: <INPUT TYPE="xxx" NAME="yyy" VALUE="zzz"> En donde: xxx es la palabra que indica el tipo de introduccin. yyy es el nombre que le asignamos nosotros a la variable de introduccin del dato. zzz es la palabra asociada a un elemento. Ejemplo: <FORM ACTION="mailto:direccin_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> Escribe tu apellido: <BR><INPUT TYPE="text" NAME="Apellido"> </FORM> Este segmento de cdigo permite al usuario escribir su apellido mediante un cuadro de texto. Si el usuario introduce su apellido, recibiremos en nuestro e-mail, algo como esto: Apellido=Gonzlez

    La longitud de este campo es por defecto de 20 caracteres. Se puede modificar dicha longitud incluyendo en la etiqueta el atributo SIZE="nmero". Por otra parte, cualquiera que sea la longitud del formulario, si no se indica nada, el usuario puede introducir el nmero de caracteres que desee. Se puede limitar la longitud mxima, incluyendo en la etiqueta el atributo MAXLENGTH="nmero". Ejemplo: <INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12"> Esta instruccin limita el campo a 10 caracteres visibles y 12 caracteres de entrada mxima. Puede tambin convertir el texto introducido a caracteres comodines para simular una contrasea, ello convierte la expresin del cuadro de texto en una serie de asteriscos. Ejemplo: <INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12">

    34. reas de texto


    Captulo anterior: 33 - Elementos para introducir los datos Captulo siguiente: 35 - Ejemplo de formulario Cuando se necesite utilizar grandes reas de texto como comentarios, explicaciones de registro, contratos, licencias, etc., se debe utilizar un control de rea de texto. Esto se consigue con la etiqueta de inicio: <TEXTAREA NAME="yyy" ROWS="nmero" COLS="nmero"> ROWS representa el nmero de filas, y COLS el nmero de columnas. Se debe finalizar con la etiqueta de cierre </TEXTAREA> Botones de envo y borrado Un elemento muy importante que permiten manipular la informacin de los formularios son los botones de Envo y Borrado. Para aplica a un formulario un botn de envo, se deber introducir la siguiente instruccin. <INPUT TYPE="submit" VALUE="Texto del botn"> En donde Texto del botn es el texto que queremos que aparezca en el botn. Sin embargo, adems de colocar en nuestro formulario un botn de envo, deber aplicarse un botn que permita restablecer los cuadros de texto as como las opciones predeterminadas del formulario. Generalmente esto se consigue con la siguiente instruccin:

    <INPUT TYPE="reset" VALUE="Texto del botn">

    35. Ejemplo de formulario


    Captulo anterior: 34 - reas de texto Captulo siguiente: 36 - Opciones de mens Para ilustrar lo dicho hasta ahora, haremos un formulario que permita al usuario introducir alguna informacin mediante cajas de texto, reas de texto y botones.

    El cdigo para obtener el aspecto mostrado del formulario, es el siguiente: <html> <head><title>Formulario de registro</title></head> <body> <center> <h3>Cambridge English Center</h3> <h4>Formulario de Registro</h4> </center> <hr>

    Sea tan amable de rellenar el siguiente formulario. <br> <FORM ACTION="mailto:direccin_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> Nombre: <BR> <INPUT TYPE="text" NAME="Apellido"> <br> Direccin: <BR> <INPUT TYPE="text" NAME="Direccin"> <br> Telfono: <BR> <INPUT TYPE="text" NAME="Telefono"> <br> Comentarios:<br> <TEXTAREA NAME="comentario" ROWS="7" COLS="40"> </TEXTAREA> <INPUT TYPE="submit" VALUE="Enviar datos"> <INPUT TYPE="reset" VALUE="Borrar datos"> </FORM> </body> </html>

    36. Opciones de mens


    Captulo anterior: 35 - Ejemplo de formulario Captulo siguiente: 37 - Botones de radio Una forma muy comn de seleccionar opciones en un formulario es mediante las opciones de men (listas desplegables). Para incluir un men de opciones en un formulario, debemos hacer lo siguiente:

    <Select Name="Nombre"> <Option>Opcin 1 <Option>Opcin 2 <Option>Opcin 3 </Select> Donde Option indica cada una de las opciones del men. La siguiente figura muestra una forma real de la utilizacin de mens.

    El cdigo para obtener un men como el anterior, se muestra a continuacin. Estado civil:<br>

    <Select Name="EdoCivil"> <option>Casado (a) <option>Soltero (a) </select> <br> Si se desea crear una lista de seleccin con barras de desplazamiento, se debe introducir una instruccin como la siguiente: <SELECT NAME="Nombre" Multiple Size="nFilas"> Donde nFilas es el nmero de filas que se muestran en el control y que se podrn seleccionar arrastrando el control sobre ellas. La siguiente figura muestra un ejemplo de ello.

    El cdigo que permite obtener este mtodo es el siguiente: Materias de inters:<br> <Select Name="Materias" Multiple Size=4> <option>Office XP <option>Diseo grfico <option>Bases de datos <option>Redes Lan </select> Cuando la lista de opciones es ms larga que la altura predeterminada del control, se muestra automticamente la barra de desplazamiento. Ejemplo:

    37. Botones de radio


    Captulo anterior: 36 - Opciones de mens Captulo siguiente: 38 - Casillas de verificacin Los botones de radio permiten seleccionar una de varias opciones dentro de un formulario. Por ejemplo, en nuestro ejercicio, hemos incluido una expresin que solicita al usuario indicar su sexo, y muestra dos opciones de las cuales slo se podr elegir una.

    El usuario podr seleccionar cualquiera de las dos opciones mostradas. El cdigo para obtener estas opciones, se muestra a continuacin. Sexo:<br>

    <input type="radio" Name="M" Value="Hombre">Hombre <input type="radio" Name="F" Value="Mujer">Mujer <br> Segn el nmero de opciones que se desee aplicar, ser el nmero de veces que debe aparecer la instruccin en el cdigo.

    38. Casillas de verificacin


    Captulo anterior: 37 - Botones de radio Permiten al usuario seleccionar varias opciones dentro de un formulario. Por ejemplo, existen pginas en Internet que permiten suscribirse a algn boletn y nos dan la opcin de "marcar" qu tipo de informacin queremos recibir en nuestro correo. La instruccin para aplicar una casilla de verificacin es la siguiente: <input type="checkbox" name="Nombre">Texto de la opcin La siguiente figura muestra un ejemplo de una situacin real donde permitimos al usuario seleccionar las opciones que quiera.

    El cdigo se muestra a continuacin. Deseo informacin sobre:<br> <input type="checkbox" name="IniciosCursos">Inicios de cursos <input type="checkbox" name="Autocad">Diplomado de AutoCad <input type="checkbox" name="Ingles">Cursos de ingls <br> Si se desea que una casilla aparezca seleccionada de forma predeterminada, debemos usar la instruccin CHECKED en la lnea donde queramos seleccionar dicha opcin. Por ejemplo: <input type="checkbox" name="IniciosCursos">Inicios de cursos Dar un resultado como el que se muestra en la siguiente figura:

    Ejercicio Haciendo uso de las herramientas estudiadas hasta este momento, debe disear la siguiente pgina, utilizando campos de texto, listas de mens, botones de opciones, casillas de verificacin, etc. Asimismo debe utilizar una tabla para organizar los campos como los que se muestran en la pgina. El tipo de fuente utilizado es Arial.

    S-ar putea să vă placă și