Embed Size (px)
Citation preview
IPN
CECyT 9
1
INSTITUTO POLITÉCNICO NACIONAL
Centro de Estudios Científicos y
Tecnológicos nº9
Juan de Dios Bátiz
Manual de HTML (Hyper Text Markup Language)
Recopilado por
Ing. Jesús Gutiérrez Castillo
IPN
CECyT 9
2
INDICE
Unidad 1.Introducción a HTML
Unidad 2. Estructura de una página Web
Unidad 3. Guardado del archivo como página Web
Unidad 4. Modificación de una página Web
Unidad 5. Estilos de título
Unidad 6. Comandos básicos de formateo de texto
Unidad 7. Marcador de párrafo
Unidad 8. Color e imagen de fondo de la página
Unidad 9. Color de texto e hipervínculos
Unidad 10. Manejo de párrafos
Unidad 11. Interlineados
Unidad 12. Hipervínculos
Unidad 13. Hipervínculos externos
Unidad 14. A una URL
Unidad 15. A un correo electrónico
Unidad 16. Inserción de imágenes
Unidad 17. Tamaño y alineación de una imagen insertada
Unidad 18. Aplicación de bordes a imágenes
Unidad 19. Imágenes como hipervínculos
Unidad 20. Películas
Unidad 21. Numeración y viñetas
Unidad 22. Numeración
Unidad 23. Términos y definiciones
Unidad 24. Tablas
Unidad 25. Definición de filas
Unidad 26. Control del ancho de la tabla
IPN
CECyT 9
3
Unidad 27. Control de celdas
Unidad 28. Combinación de celdas
Unidad 29. Marcos
Unidad 30. Marcos II
Unidad 31. Marcos III
Unidad 32. Formularios
Unidad 33. Elementos para introducir los datos
Unidad 34. Áreas de texto
Unidad 35. Ejemplo de formulario
Unidad 36. Opciones de menús
Unidad 37. Botones de radio
Unidad 38. Casillas de verificación
IPN
CECyT 9
4
Unidad 1.Introducción a HTML
Qué es HTML Introducción En principio, empecemos diciendo que HTML son las siglas de HyperText Markup Language (o Lenguaje de marcado de hipervínculos o hipertexto). Una página Web abunda en marcas de hipervínculos (enlaces). Generalmente, cuando movemos el Mouse sobre una línea de texto, encontramos palabras o expresiones subrayadas, con color azul (aunque pueden tener otros colores). Cuando hacemos clic sobre alguna palabra o expresión de hipervínculo, el explorador de Internet nos remite a otro sitio o página Web. Cuando hablamos de páginas Web, nos referimos a las páginas que se utilizan en los exploradores de Internet, que, a primera vista, tiene las mismas propiedades. Cabe aclarar que actualmente se pueden crear páginas Web en muchos programas, en procesadores de texto como Microsoft Word, Excel, PowerPoint, Access, Corel Draw, Publisher, etc. Sin embargo, cuando se diseña la estructura de una página Web en estos programas, el código que permite dar forma a la página Web para ser accedida desde cualquier explorador, queda oculto a los ojos del diseñador de la página. HTML es un lenguaje que utiliza los códigos estandarizados para la creación de páginas 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 página Web Antes de entrar en detalle acerca de la creación de páginas Web, es necesario entender cómo se escribe el código y en qué programa. El código 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.
Unidad 2. Estructura de una página Web
Estructura de una página Web Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo de información necesita introducir. Esto ayuda a que la página que diseña sea claramente legible y se pueda modificar más fácilmente. Si una página Web es complicada en su diseño, habrá muy pocos que sepan dar el mantenimiento adecuado. Abajo se muestra la estructura lógica de una página Web. <HTML> <HEAD> <TITLE>Primer página</TITLE> </HEAD> <BODY> ...... </BODY> </HTML>
IPN
CECyT 9
5
Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea la página y el contenido. La primera instrucción <HTML> indica al explorador de Internet que ahí comienza una página Web. La siguiente instrucción <HEAD> indica el encabezado de la página, es decir el área de la barra de título. <TITLE> indica el título de la página propiamente dicho. <BODY> es una instrucción que indica al explorador de Internet que ahí empieza el área de contenido de la página (es decir el cuerpo de la página). En el lenguaje HTML, muchas instrucciones se cierran con el signo / (diagonal) para indicar al programa que las propiedades aplicadas con esa instrucción 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 instrucción anterior a todas las líneas inferiores, hasta que se encuentre otra instrucción que modifique las propiedades actuales.
Unidad 3. Guardado del archivo como página Web
Guardado del archivo como página Web Cuando se haya escrito el código de la página Web, es necesario guardar el archivo como una página Web. Una página Web tiene la extensión HTM, la cual se debe especificar en el momento de guardar la página. Una vez guardado el archivo con la extensión 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 código que se muestra. Cuando hayas terminado de capturar el código, guárdalo como Primera.htm (si existe y pide reemplazar el archivo, responde afirmativamente).
El resultado se muestra a continuación.
IPN
CECyT 9
6
Unidad 4. Modificación de una página Web Una vez creada nuestra página Web, será necesario modificarla. Para ello, necesitamos abrir el código de la página. Si se abre la página en un procesador de textos como Microsoft Word, sólo veremos el texto, pero el código no es accesible para el usuario. Si deseamos obtener el código, será necesario abrir el bloc de notas y abrir la página desde ahí, utilizando la opción Abrir, y en el cuadro de diálogo Abrir, se elige Todos los archivos, en la lista Tipo (esto porque la página tiene una extensión diferente al filtro mostrado). Sin embargo, una manera más cómoda y rápida, es acceder al código desde la página Web abierta. Para ello, se hace lo siguiente: 1.- Se hace clic con el botón secundario en un área que no sea un objeto (como una imagen, un hipervínculo, etc.) 2.- En el menú contextual, se elige la opción Ver código fuente.
Unidad 5. Estilos de título HTML maneja seis estilos de título 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 título se enumeran de H1 a H6, siendo H1 el más grande y H6 el más pequeño. Aunque el programador tiene la opción de utilizar un tamaño diferente mediante la instrucción FontSize. A continuación se muestra el código y el resultado de la utilización de títulos en una página Web.
IPN
CECyT 9
7
El resultado de este código se muestra a continuación.
De aquí en adelante, sólo se mostrará la ventana de resultados en los ejercicios. El alumno tiene la obligación de usar las instrucciones que se van explicando para obtener los resultados requeridos en los ejercicios.
Unidad 6. Comandos básicos de formateo de texto
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 instrucción <BR> de las líneas de arriba se utiliza para insertar un retorno de carro. Si no se incluye esta instrucción en cada línea de texto, la página Web juntará las tres líneas de texto en una sola línea. Esto significa que cada vez que deseemos insertar un salto de línea, debemos incluir esta instrucción en el lugar donde se desee generar una nueva línea. El resultado se muestra a continuación.
IPN
CECyT 9
8
Existe una instrucción que permite remarcar partes de un párrafo, esta instrucción es la instrucción STRONG. Por ejemplo, este código: Este es un ejemplo de <strong> instrucciones de formateo de texto </strong> Produce este resultado:
La instrucción <EM> funciona de forma similar a <I>. Cuando se aplica <EM>, el texto afectado aparece siempre en estilo cursiva. Por ejemplo, el siguiente código: 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 diseñar la página que se muestra a continuación.
IPN
CECyT 9
9
Se usa el estilo H1 para el título principal, <B> o <STRONG> para el remarcado negrita y <U> para el subrayado. Doble salto de línea <BR> para la separación de un párrafo con otro.
Unidad 7. Marcador de párrafo Cuando se desee indicar a HTML un inicio de párrafo y utilizar una alineación junto con la instrucción, se debe utilizar <P>. Este comando se usa junto con las instrucciones de alineación <Left>, <Center> o <Right> para modificar la posición del texto en pantalla. Por ejemplo, la siguiente línea de código, centra el texto en la pantalla. <p align=center>Texto centrado en la pantalla </p> El siguiente código:
Produjo el resultado que se muestra a continuación.
IPN
CECyT 9
10
Si se desea alinear texto a la derecha, debe introducir una expresión como ésta: <p align=right>Texto justificado a la derecha</p> Para trazar una línea de separación utilice el comando <HR>. Esta instrucción sin modificadores, traza una línea horizontal predeterminada. Si se incluyen modificadores, se podrá personalizar la apariencia de la línea. Ejemplo: <HR> Traza una línea horizontal. Para modificar la apariencia predeterminada, haga esto: <HR Width=200> Traza una línea de ancho de pantalla (en píxeles) de 200 píxeles. Esta línea de código produciría una línea como ésta:
Si se desea cambiar el color, es necesario incluir el modificador Color=Color. Ejemplo: <HR Color=Blue>
Unidad 8. Color e imagen de fondo de la página
Color de fondo Puedes aplicar color de fondo a la página utilizando el siguiente modificador: bgcolor=Color Por ejemplo: <body bgcolor=cyan> Esta instrucción aplica el color CYAN al fondo de la página. La instrucción bgcolor se debe aplicar dentro de la instrucción <Body>. Para facilitar la utilización de colores de fondo mediante constantes de color, presentamos la siguiente tabla de colores: Color Constante Negro BLACK Azul BLUE Verde GREEN Rojo claro RED
IPN
CECyT 9
11
Rosa intenso MAGENTA Marrón FUCSIA Gris GRAY Rosa claro PINK Amarillo YELLOW Blanco WHITE Verde claro GREEN+ Rojo intenso BLUE+ Cián Claro BLUE/RED Además 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 combinación MAGENTA/YELLOW, produce un color verde oliva claro. La forma más extensa de obtener colores es utilizando la representación hexadecimal del 0 a la F. Por ejemplo, la siguiente línea de código: <Body Bgcolor="#0FFFFF"> Produce un color azul aguamarina.
Imagen de fondo Además de aplicar colores de fondo usando combinaciones como las mencionadas anteriormente, puedes aplicar imágenes como fondo de la página. Para ello, utiliza el modificador Img Background=Imagen. Por ejemplo, la siguiente línea de código aplica una imagen de fondo a la página. <body img background=imagen.bmp>
Para aplicar una imagen de fondo, debe ubicar la imagen en la misma ruta donde se encuentra la página, en su defecto, deberá especificar la ruta completa en el parámetro IMG BACKGROUND. La imagen de esta página fue retocada con efecto relieve. Sin embargo, puede acceder a la galería de imágenes para encontrar alguna imagen que desee aplicar. También puede utilizar una imagen animada de fondo. Para ello, debe buscar archivos con extensión GIF y verificar que sean animados.
IPN
CECyT 9
12
Unidad 9. Color de texto e hipervínculos Además de modificar el fondo de la página aplicando color de fondo o imágenes, es posible cambiar el color del texto de toda la página, así como el color de los vínculos. Para cambiar el color del texto de toda la página, 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 página. Si se desea que los hipervínculos no visitados aún tengan un color distinto al color azul predeterminado, debe hacer lo siguiente: <body bgcolor=cyan Text=Blue Link=Yellow Vlink=Gray> Esta instrucción aplica el color amarillo predeterminado para todos los hipervínculos de la página, y el color gris a los hipervínculos visitados. Ejercicio Deberás diseñar la página que se muestra a continuación, aplicando posteriormente, a solicitud del profesor, color de fondo o imagen de fondo, así como alineación y líneas de separación.
La imagen de fondo es una diapositiva de Microsoft PowerPoint con una plantilla de fondo. Además se aplicó un relleno de textura a la diapositiva Después se agregaron las dos imágenes que se muestran sobre la textura, y se modificó el color negro en la opción Volver a colorear, del menú Formato/Imagen. Los estilos de título utilizados para esta página fueron H1, H2, H3 y H5.
REGRESO AL INDICE
IPN
CECyT 9
13
Unidad 10. Manejo de párrafos Al igual que otros programas, HTML permite al programador modificar la apariencia predeterminada de los párrafos aplicando sangrías tanto de primera línea como de párrafos, e interlineados.
Sangrías Para aplicar sangría de primera línea se usa el modificar text-indent. Para aplicar sangría de párrafo se usa el comando Blockquote. Por ejemplo, la siguiente línea de código, aplica una sangría de 50 píxeles para la primera línea de un párrafo. <p style="text-indent:50">Esta es la primera línea de texto con sangría de cincuenta píxeles de distancia desde el borde izquierdo.</p> El resultado de aplicar esta línea de código, es el siguiente:
Además de la sangría de primera línea que puede ser especificada con un número en píxeles, HTML permite utilizar una sangría automática mediante el comando Blockquote. Por ejemplo, la siguiente instrucción muestra cómo se puede aplicar una sangría automática mediante el comando Blockquote. <Blockquote>
Texto y otras instrucciones </Blockquote>
IPN
CECyT 9
14
Unidad 11. Interlineados En un procesador de textos los interlineados se utilizan mediante opciones de menús que permiten cambiar el espacio entre líneas de un párrafo. 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 líneas de un párrafo mediante porcentajes. Por ejemplo, la siguiente instrucción aplica un porcentaje de interlineado de 150%, equivalente a 1.5 líneas. <p align=justify style="line-height=150%"> El resultado se muestra en la siguiente ventana con dos párrafos, el párrafo modificado con interlineado y el párrafo normal.
Cada vez que desees aumentar el interlineado, deberás aumentar el porcentaje. En la línea de código anterior, se incluyó un modificador de alineación, align=justify, esto permite que el párrafo se justifique. Ejercicio Haciendo uso de los conocimiento adquiridos, utilizando prioritariamente los comandos de formateo de párrafos para sangrías e interlineados, deberás diseñar la página que a continuación se muestra.
IPN
CECyT 9
15
Unidad 12. Hipervínculos
Hipervínculos Un hipervínculo es un vínculo de una página Web o un archivo a otra página Web u otro archivo. Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en un explorador Web, se abrirá o se ejecutará, en función del tipo de destino. El destino es con frecuencia otra página Web, pero también puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, una dirección de correo electrónico o un programa. Por ejemplo, un hipervínculo a una página muestra la página en el explorador Web y un hipervínculo a un archivo .avi abre el archivo en un reproductor multimedia. Hipervínculos locales con marcadores Cuando se crea un hipervínculo local, lo que en realidad se hace es desplazarse hacia otro punto de la misma página Web. Para ello, primero debemos hacer referencia al marcador del hipervínculo con la instrucción href="#Marcador", donde Marcador es el marcador del hipervínculo. Posteriormente, cuando se desarrolle el marcador, se deberá anotar el nombre del marcador con la instrucción name="#marcador", donde marcador es el identificador utilizado en la instrucción href. A continuación se muestra un diagrama que ilustra el concepto de un hipervínculo local.
IPN
CECyT 9
16
En la siguiente página encontrará un ejemplo de una página Web que utiliza marcadores de hipervínculos dentro del mismo documento. Observe que los marcadores se inician con las palabras claves <A Name>, para indicar que en esa sección inicia un marcador que podrá ser accedido desde cualquier parte del mismo documento, y las referencias a estos marcadores se aplican con la expresión <A Ref=#marcador>, donde marcador, es el nombre del marcador al que se desee acceder.
IPN
CECyT 9
17
Ambas páginas fueron desarrolladas en la misma ventana, es decir el código fue escrito de arriba hacia abajo. La mecánica de esta página fue aplicar varios espacios (BR) para así poder desplazarse hacia la siguiente página y que ésta se ubique hasta arriba (TOP). En situaciones normales, no sería necesario dejar tantos espacios, bastaría con escribir los temas uno tras otro en el orden deseado. La siguiente figura muestra el código utilizado para obtener ambas páginas mostradas arriba. Por lo tanto, si quiere probar lo mismo, sólo debe copiar este código en el bloc de notas y guardarlo como MARCADORES.HTM, y obtendrá un página Web con dos ventanas iguales a las que se muestran arriba. <html> <head><title>Página Web con marcadores</title></head> <body TextColor="blue"> <a name="#Inicio"><h1>Página principal</h1></A> <hr> <p align="justify" Style="text-indent:50">Esta página contiene marcadores o hipervínculos locales que permiten al usuario desplazarse a través del documento mediante estos hipervínculos. El uso de marcadores proporciona una manera práctica y sencilla de seccionar el documento y encontrar información rápidamente. No podían faltar en un curso de páginas Web los enlaces o hipervínculos, que son la esencia misma de la Red. Los también 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 página de Internet, entre otras funciones. Habíamos dejado nuestra página en la lección anterior diseñada en una tabla que ocupaba todo el documento. En esta lección vamos a insertar todos los hipervínculos que tiene que haber en nuestra página.
IPN
CECyT 9
18
<br><br> </p> <a "target="_top" href="#Marcadores">Haga clic para obtener más información 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 hipervínculos o enlaces internos que permiten desplazarse a través del mismo documento. Cuando el usuario hace clic sobre un enlace, la página se desplaza hasta la sección donde se haya definido un marcador. <br> Para definir un marcador, debe empezar con la expresión <b><i>A Name="#Marcador"</i></b> en el sitio donde desee definir un marcador. Para hacer referencia al marcador definido, use la expresión <b><i>A Href="#Marcador"</i></b>, para acceder a dicho marcador. <br> Un hipervínculo con marcador es un enlace entre un hipertexto y una sección de un documento. <br><br><br><br><br><br><br><br><br><br><br><br> <A href="#Inicio">Volver arriba</A> </body> </html>
Unidad 13. Hipervínculos externos
Hipervínculos externos: A una página Web local Para organizar de forma más inteligente la información de un sitio Web puede manejarse más de una página. En cualquier momento será necesario acceder a dicha página, entonces puede crear un hipervínculo que le permita dirigirse a esa página de la siguiente manera: <a ref="páginaweb.htm">Texto del hipervínculo</a> La siguiente gráfica ilustra el concepto de relacionar páginas en un mismo sitio con acceso mediante hipervínculos.
Cuando accede a una página relacionada, puede controlar la ventana donde se mostrará el contenido de esta. Por ejemplo, puede mostrar la siguiente página en una ventana diferente, en la misma venta o en el mismo marco (en el caso de que se manejen marcos). Para realizar esta operación debe escribir una instrucción como la siguiente:
IPN
CECyT 9
19
<a target="_blank ref="paginaweb.htm">Texto del hipervínculo</a> Esta instrucción indica a HTML que la siguiente página que se abrirá utilizará una ventana nueva para su contenido. El siguiente ejemplo ilustra el uso de hipervínculos que acceden a otros documentos externos a la página Web actual.
El código para realizar una página como la que se muestra en el ejemplo anterior, lo tiene a continuación. <html> <head><Title>Página con hipervínculos externos</title></head> <body> <h1>Mi página con hipervínculos externos</h1> <hr> <a href="Primera.htm">Primer hipervínculo</a><br> <a href="Segunda.htm">Segundo hipervínculo</a><br> <a href="tercera.htm">Tercer hipervínculo</a><br> </body> </html> Las páginas a las que acceden los hipervínculos se diseñan de forma independiente de la página actual. Si necesita saber cómo relacionar estas páginas, haga lo siguiente: 1.- Una vez diseñada la página principal, guárdela con el nombre Principal.htm. 2.- En el menú Archivo, elija Nuevo. 3.- Diseñe una nueva página para el primer hipervínculo. Cuando termine guárdela con el nombre Primera.htm. 4.- Repita estos pasos para las siguientes páginas (Segunda.htm, Tercera.htm). Cuando termine con todas las páginas, abra la página principal y pruebe haciendo clic en los hipervínculos de la página. Ejercicios Con los conocimientos adquiridos hasta este momento, diseña la página que se muestra, utilizando los elementos de párrafos, alineación, Negrita, cursiva y subrayado, estilo de título e hipervínculos externos.
IPN
CECyT 9
20
El fondo de la página 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 hipervínculos son externos. Cuando el usuario haga clic en algún hipervínculo, éste se abrirá en una ventana independiente.
Unidad 14. A una URL Así como pueden vincularse páginas Web dentro del mismo sitio, también podemos crear un hipervínculo que nos lleve a un sitio Web. Para ello, debemos utilizar la siguiente sintaxis: <a ref="http://www.sitioweb.com">Texto del hipervínculo</a> Por ejemplo, la siguiente página muestra unos hipervínculos a sitios de Internet.
El código para obtener la página mostrada, es el siguiente:
IPN
CECyT 9
21
<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 música 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 vínculos con conexión a Internet, verá que el contenido del sitio visitado, reemplaza el contenido de nuestra página. Para evitar esto, escriba la siguiente sintaxis: <a target="_blank" ref="http://www.sitioweb.com">Texto del hipervínculo</a> En la siguiente gráfica se muestra cómo el hipervínculo visitado muestra el contenido de Todito.com en una nueva ventana.
Ejercicio Modifica la página anterior de manera que aparezca en el sitio que se indica, la página Web de la papelería.
IPN
CECyT 9
22
Unidad 15. A un correo electrónico Un tipo de hipervínculo muy utilizado es a una dirección de correo electrónico. Muy a menudo nos topamos en Internet con expresiones que nos permiten pulsar un hipervínculo 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 página.
Esta página hace lo siguiente: Cuando el usuario hace clic en la expresión subrayada para enviar el e-mail, abrirá un programa (en este caso propiamente), Outlook Express. La siguiente figura muestra las dos ventanas después de haber hecho clic en el hipervínculo.
IPN
CECyT 9
23
En esta ventana podrá escribir el comentario que desee escribir al propietario del e-mail. El código para obtener el resultado mostrado arriba, lo verá a continuación.
Ejercicio Modifica la página anterior de manera que muestre la página con la siguiente vista.
IPN
CECyT 9
24
Unidad 16. Inserción de imágenes En una página Web puede insertar cualquier imagen. Las imágenes deben ser de tipo JPG, BMP o GIF. Para insertar una imagen, debe utilizar la siguiente sintaxis: <img src="imagen.jpg"> En ésta instrucción se da por defecto que la imagen que se inserta tiene la extensión JPG. Para insertar otro tipo de imagen sólo deberá especificar la extensión correspondiente. Las imágenes pueden ser adquiridas de la galería de imágenes de Microsoft, o de cualquier otra imagen digitalizada. Incluso se pueden crear iconos animados desde algún programa de animación, y usarlos en una página Web. Observe la página anterior modificada.
La imagen anterior fue insertada en una diapositiva de PowerPoint; posteriormente, se hizo clic con el botón derecho sobre la misma, se eligió la opción Guardar como imagen, se escribió un nombre para la imagen y se pulsó guardar. El código para insertar la imagen se muestra a continuación.
IPN
CECyT 9
25
Unidad 17. Tamaño y alineación de una imagen insertada En algún momento será necesario controlar la dimensión de la imagen insertada, sea para aumentarla o para disminuirla. En el ejemplo anterior se usó la instrucción <align=right>, para alinear la imagen a la derecha; además de esta instrucción, puede usar las instrucciones <center> y <align=Left> para ubicar la imagen al centro, o a la izquierda de la pantalla. Para controlar el tamaño de las imágenes, use las instrucciones <height=valor> o <Width=valor> para controlar la altura y la anchura de la imagen. También puede usar la instrucción <Border> con un valor mayor que 0, para aplicar un marco alrededor de la imagen. Por ejemplo, la página anterior fue modificada para mostrar dos imágenes, una a la izquierda y otra a la derecha con tamaños de 100 píxeles cada una.
Para poder escribir alrededor del texto debe utilizar la instrucción <align=left> para la imagen insertada. No obstante que si no usa dicha instrucción la imagen se alineará a la izquierda, la instrucción <align=left> permite aplicar el efecto que se muestra en la página. El código para aplicar obtener el diseño de la página mostrada arriba, se muestra a continuación.
IPN
CECyT 9
26
Unidad 18. Aplicación de bordes a imágenes Se dijo anteriormente que a una imagen insertada en una página Web se le puede aplicar un marco o borde. Además, si utiliza el modificador ALT, podrá especificar un mensaje o pista, cuando señale con el Mouse a la imagen. Para hacer esto, debe incluir dentro de la instrucción 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 página anterior fue modifica para aplicar contornos a las dos imágenes insertadas.
Cuando el Mouse se ubica sobre la imagen del estudiante, despliega un mensaje instantáneo aplicado en la instrucción ALT="cadena de mensaje". Si se desea aplicar espaciado horizontal o vertical, debe utilizar los modificadores hspace o vspace, con la instrucción de inserción de imágenes. Cuando se aplica espaciado horizontal, la siguiente imagen o texto se ajusta a la distancia indicada en hspace (en píxeles). Igual sucede cuando se aplica el modificar vspace, la siguiente imagen o párrafo insertado debajo de la imagen, se ajustará a la distancia indicada por hspace. Por ejemplo, observe la página 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 separación de 20 píxeles respecto al lado derecho de la imagen. Se debe entender que la separación en orden horizontal aplicado a una imagen, afecta a ambos lados de la misma, es decir, si aplico 20 píxeles de separación, se aplicarán 20 a la izquierda, y 20 a la derecha de la imagen.
IPN
CECyT 9
27
La siguiente pantalla muestra la página de productos de la papelería. Es un mosaico de imágenes insertadas controladas mediante los modificadores Height, Width, hspace y vspace.
El código para obtener la página mostrada arriba, se muestra a continuación. <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 Electrónica $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 lápices $50.00" Height=80 Width=60>
IPN
CECyT 9
28
Unidad 19. Imágenes como hipervínculos Para utilizar imágenes como hipervínculos, se debe usar la misma instrucción que para los hipervínculos de texto, a excepción de que a continuación de la instrucción se debe incluir la instrucción de inserción de imágenes. La siguiente línea de código muestra el ejemplo de inserción de imágenes como hipervínculos. <a href="carrera.htm"><img border=0 src="carrera.jpg" ></A> La primera instrucción indica el nombre de la página a la que se desee acceder cuando se haga clic en el hipervínculo. La segunda instrucción inserta la imagen en la página Web. Ejercicios Con los conocimientos adquiridos hasta este momento, se deberá diseñar la página que se muestra a continuación.
Los botones pueden ser creados en PowerPoint o Paint, o Corel Draw. Cada botón representa un hipervínculo, por lo tanto, se deberá crear una página para cada hipervínculo. La última línea de código es una marquesina que se desplaza a través de toda la pantalla.
REGRESO AL INDICE
Unidad 20. Películas De forma parecida a las imágenes, las películas pueden insertarse mediante dos formas, con la extensión .AVI o con la extensión .DAT. De ambas maneras, HTML interpretará que se trata de una película y buscará reproducir el archivo en el explorador. La siguiente instrucción inserta una película de tipo AVI, de las que se encuentran en la galería de imágenes de Office. <img border="0" dynsrc="COUNT8.AVI" start="fileopen" >
IPN
CECyT 9
29
La primera instrucción indica que se insertará una imagen; la instrucción dynsrc, significa dynamic source (origen dinámico) y prepara al explorador para reproducir un archivo de película. La instrucción Start indica en qué momento iniciará la película, si no tiene parámetros, la película se iniciará automáticamente al abrir la página. Puede buscar películas y guardarlas en una carpeta, posteriormente, inserte una línea de código en el sitio que desee. Para reproducir una película al mover el Mouse sobre ella, agregue el parámetro mouseover al modificador start. Si desea que la película se reproduzca de forma infinita, agregue el parámetro loop con la expresión infinite. El ejemplo siguiente muestra la forma como debe usar el parámetro loop. <img border="0" dynsrc="COUNT8.AVI" start="fileopen" loop="infinite"> Además de insertar películas con formato .AVI, HTML le permite insertar películas con extensión .DAT. Por ejemplo, la siguiente instrucción reproduce una película con extensión .DAT, llamada MUSIC01. Este archivo es un vídeo clip de Michael Jackson. Para reproducir correctamente el archivo de película, la página 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 tamaño de la película, deberá usar los modificadores Height y Width, junto con la instrucción de inserción de la película. Por ejemplo: <img border="0" dynsrc="MUSIC01.DAT" start="fileopen" Width="300" Height="200">
Unidad 21. Numeración y viñetas Al igual que en un procesador de textos u otros programas, el lenguaje HTML permite aplicar viñetas, a excepción de que se cuenta sólo con tres tipos diferentes de viñetas. Viñetas Para aplicar viñetas debe hacerse uso de la instrucción <UL>. Esta instrucción indica al explorador que lo que sigue a continuación es una lista con viñetas. Por cada símbolo utilizado debe usar la instrucción <LI>, la cual se corresponde con cada línea de dato de la lista. Finalmente debe cerrar la lista de viñetas con la instrucción </UL>. Las siguientes líneas de código muestran la forma como debe introducirse cada expresión en la página Web para su correcta ejecución. <ul> <li>Viñeta 1</li> <li>Viñeta 2</li> <li>Viñeta 3</li> <li>Viñeta 4</li> </ul> Si copia estas líneas de código a una página Web, guarde los cambios y actualice la página para ver el resultado, debe mostrarse como la figura siguiente:
IPN
CECyT 9
30
Si se desea cambiar el tipo de viñeta predeterminada, se debe incluir el parámetro TYPE junto con la instrucción <UL>. Por ejemplo, la siguiente línea de código, aplica el estilo círculo a la lista de viñetas. <ul type="circle"> <li>Viñeta 1</li> <li>Viñeta 2</li> <li>Viñeta 3</li> <li>Viñeta 4</li> </ul> El resultado se muestra a continuación:
Otro tipo de viñetas que puede usarse en una lista es el tipo cuadrado. Para ello, utilice el parámetro TYPE con la expresión square. El siguiente ejemplo aplica viñeta de tipo cuadrado a la lista. <ul type="square"> <li>Viñeta 1</li> <li>Viñeta 2</li> <li>Viñeta 3</li> <li>Viñeta 4</li> </ul> El resultado se muestra abajo.
IPN
CECyT 9
31
Si se desea cambiar el color de la lista con viñetas, se debe incluir el parámetro STYLE="Color: nombrecolor". Por ejemplo, la siguiente línea de código aplica una viñeta de tipo cuadrada, con color de texto y viñeta azul. <ul type="square" style="color: blue"> Asimismo puede usar la instrucción <Font Color=Color> para modificar el color del texto.
Unidad 22. Numeración Además de aplicar viñetas a una lista, puede sangrar una lista si usa una instrucción <UL> dentro de otra. Asimismo, puede usar numeración automática para genera listas de datos numeradas a partir de un valor. Para usar numeración debe aplicar la instrucción <OL> al principio de la lista y las instrucciones <li> para cada línea de dato; finalmente, debe cerrar la numeración con la instrucción </OL>. El siguiente fragmento de código es un ejemplo de cómo se debe ordenar una lista con numeración. <ol> <li>Primer número</li> <li>Segundo número</li> <li>Tercer número</li> <Li>Cuarto número</li> </ol> El resultado de este bloque de código se muestra a continuación.
Para cambiar el tipo de numeración por letras o en representación romana, debe incluir el parámetro type con una expresión siguiente: Expresión Resultado I Números romanos con letras mayúsculas. i Números romanos con letras minúsculas. A Literales mayúsculas. a Literales minúsculas El siguiente bloque de código muestra la forma correcta de utilizar las expresiones con el parámetro type, de manera que se puedan obtener diferentes tipos de viñetas. <ol type="A"> <li>Viñeta 1</li> <li>Viñeta 2</li> <li>Viñeta 3</li> <li>Viñeta 4</li> </ol>
IPN
CECyT 9
32
Resultado:
Si se desea iniciar la numeración desde un número mayor que 1, entonces debe incluir, junto con la instrucción <OL>, el parámetro start, que indica el número donde se desea iniciar la lista. El siguiente bloque de código se usa para ilustrar el tema en cuestión. <ol start="5"> <li>Línea 1</li> <li>Línea 2</li> <li>Línea 3</li> <li>Línea 4</li> </ol> El resultado es el siguiente:
Para iniciar con literales en un valor mayor que 1, se debe establecer el número 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>Cámaras digitales</li> </ol> El resultado se muestra a continuación.
IPN
CECyT 9
33
Ejercicio Haciendo uso de las instrucciones para inserción de películas, viñetas y numeración, debe diseñar la siguiente página.
Para que los objetos se realicen correctamente debes ajustar la configuración de la página al tamaño deseado. Por ejemplo, para el título principal, se usó una diapositiva de tamaño horizontal de 20cm y 3 cm. Para el globo se usó una diapositiva de 20 cm. horizontal y 5 cm. vertical. Después de se hayan ajustado las diapositivas, se debe diseñar el contenido. El procedimiento para obtener esta página es el siguiente: 1. Se busca una película de tipo GIF la cual se inserta en el lugar donde se encuentra las dos imágenes de personas. 2. El título 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 viñetas se deben utilizar fuera de cualquier instrucción de manejo de imágenes.
IPN
CECyT 9
34
Unidad 23. Términos y definiciones Para facilitar el diseño de índices, vocabularios, diccionarios, enciclopedias y temas afines, HTML cuenta con instrucciones que permiten utilizar una palabra como término definido y una sección asociada que es la definición del término. Es ideal para generar vocabularios, tablas de contenido, diccionarios, etc. La instrucción para iniciar la lista de expresiones o términos es DL con su respectivo cierre. La sintaxis es la siguiente: <DL> <DT>Termino</DT> <DD>Definición del término que puede ser tan largo como el usuario desee.</DD> </DL> DL significa Language Dictionary (Diccionario de Lenguaje) e indica la lista de términos que se van a definir. DT significa Terms Dictionary (Diccionario de términos) e indica propiamente el término que se va definir. La definición del término se realiza con la instrucción DD (Dictionary Definition), y en esta instrucción 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 término definido. Sin embargo, puede utilizar dichos términos sin añadir estilos para realizar un ejercicio natural. El código para obtener el resultado mostrado en la página anterior, se muestra a continuación.
IPN
CECyT 9
35
<html> <body> <h1>Diccionario de informática</h1> <hr> <dl> <dt><b>Informática</b></dt> <dd>Ciencia que estudia el procesamiento, organización, almacenamiento y transferencia de la información de a través de una computadora. <dt><b>Computadora</b></dt> <dd>Máquina electrónica capaz de realizar cualquier actividad con la ayuda del software. <dt><b>Hardware</b></dt> <dd>Son todos los componentes físicos 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 diseñados para este fin. Por ejemplo, para cálculos financieros se utiliza Microsoft Excel; para películas Studio 3DMax y para animaciones, Flash, etc. </body> </html> Si omite las cláusulas <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 términos y definiciones, diseñe la siguiente página:
IPN
CECyT 9
36
Se podrá añadir otros elementos como Fondo, color del texto, tamaños de texto y otras opciones según la creatividad del alumno. También 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 hipervínculo que lleve hacia el significado de dicho término.
Unidad 24. Tablas Una tabla está formada por filas y columnas de celdas en las que se puede insertar texto y gráficos. Se pueden utilizar y personalizar las tablas de varias formas diferentes con el fin de hacerlas más atractivas y fáciles de leer. Se debe utilizar una tabla para presentar la información en formato de cuadrícula, por ejemplo horarios, información acerca de productos, tarifas, calificaciones de alumnos, etc.
Creación de una tabla Para crear una tabla se debe usar la instrucción Table, seguida de parámetros que indican la anchura, el color o imagen de fondo, etc. Ejemplo: <table> </table>
IPN
CECyT 9
37
Estas dos instrucciones indican al explorador de Internet que se en este lugar de la página se va a crear una tabla.
Uso de encabezados de tabla Después de que se haya indicado al explorador de Internet que se va a crear una tabla, es necesario definir cuántas 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 código 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. Más adelante se verá cómo no siempre se deben hacer coincidir las columnas con las filas.
Unidad 25. Definición de filas Para utilizar filas en una tabla, se debe usar la instrucción 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 básica 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 código, se muestra en la siguiente gráfica.
IPN
CECyT 9
38
Si se desea mostrar la cuadrícula de la tabla, sólo debe usar el modificar Border, con un valor mayor que 0. Por ejemplo, la siguiente línea código, mostrará la cuadrícula de la tabla. <Table Border=1> El resultado se muestra a continuación.
Unidad 26. Control del ancho de la tabla Cuando se crea una tabla sin parámetros, ésta se ajusta al ancho de los campos escritos en los encabezados. Si se desea crear una tabla más 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 instrucción: <Table Border=1 Width=50%> El resultado de esta línea de código se muestra en la siguiente gráfica.
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.
IPN
CECyT 9
39
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 instrucción: <table Border=1 Width=100% bgcolor=cyan> Ejercicio Con los conocimientos adquiridos hasta este momento, se deberá diseñar la siguiente tabla.
Para aplicar una imagen de fondo a una tabla, deberá usar la instrucción Img Background que usamos en el fondo de la página. La siguiente línea de código muestra la forma correcta de aplicar una imagen de fondo a una tabla. <table border=1 width=100% img background="imagen.jpg"> La siguiente gráfica muestra una imagen de fondo aplicada a la tabla.
IPN
CECyT 9
40
El procedimiento para lograr este efecto es insertar una imagen en una diapositiva de PowerPoint; posteriormente aclararla un poco con la herramienta brillo; después guardarla como imagen.
Unidad 27. Control de celdas Lo más importante de crear tablas es saber manipular las celdas respecto a la información 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 instrucción 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 código debe ser el siguiente: <td bgcolor="yellow">Ana Mariela Dominguez Vázquez </td> Esta línea de código 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 código completo de la tabla, se lo muestro a continuación.
IPN
CECyT 9
41
<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">Calificación</th> <tr> <td bgcolor="gray">1</td> <td bgcolor="yellow">Ana Mariela Dominguez Vázquez </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 Rodríguez 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>
Unidad 28. Combinación de celdas La combinación de celdas permite obtener diseños de tablas más sofisticados que pueden utilizarse para titulares, marcos de imagen, etc. Para combinar celdas se usa la instrucción Colspan o Rowspan, ya sea que se deseen combinar columnas o filas. Por ejemplo, la siguiente instrucción 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 combinación de celdas, a continuación se muestra la siguiente tabla.
IPN
CECyT 9
42
El código para obtener una tabla con este aspecto se muestra a continuación. <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 expresión ColSpan indica cuántas columnas se van a combinar, en este indican cuatro columnas. Si se desean combinar filas se debe utilizar la expresión RowSpan. Por ejemplo RowSpan="4" indica que se van a combinar 4 filas. La siguiente tabla muestra un ejemplo de combinación de columnas y filas.
El código para esta tabla es el siguiente:
IPN
CECyT 9
43
<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, combinación de celdas y temas anteriores como viñetas, inserción de imágenes y películas, diseña la página que se muestra a continuación.
IPN
CECyT 9
44
Unidad 29. Marcos Una página de marcos es un tipo especial de página HTML que divide la ventana del explorador en distintas zonas denominadas marcos, cada una de las cuales puede mostrar una página diferente. Por ejemplo, la siguiente gráfica muestra una página con tres marcos: Titular, Contenido y Marco principal.
Una página de marcos no incluye contenido visible, es sólo un contenedor que especifica el resto de las páginas que se van a mostrar y la forma de mostrarlas. Cuando hace clic en un hipervínculo de una página que aparece en un marco, la página a la que señala dicho hipervínculo aparece normalmente en otro marco, denominado Marco de destino. Por ejemplo, la página de marcos mostrada anteriormente, muestra realmente cuatro páginas al mismo tiempo en el explorador: la
IPN
CECyT 9
45
página de marcos, que es el contenedor y las tres páginas que aparecen en cada uno de los marcos. Las páginas de marcos normalmente se utilizan para los catálogos, las listas de artículos o cualquier otro tipo información ordenada en secciones de pantalla. Los autores utilizan páginas de marcos porque incluyen exploración integrada y presentan una interfaz de usuario coherente (es decir, la estructura y el diseño de los marcos). Puede también crear páginas de dos marcos, como muestra la siguiente gráfica.
Para nuestro ejercicio, crearemos una página con dos marcos. El marco izquierdo servirá como contenido, y el marco derecho como marco de destino. Para ello será necesario crear tres páginas: la primera será la que dividirá la ventana del explorador en dos secciones (como lo muestra la gráfica). La segunda será la que se ubique en la sección de contenido, y la tercera, será la que se muestre inicialmente en el marco de destino.
REGRESO AL INDICE
Unidad 30. Marcos II Para generar marcos en una página Web se debe utilizar la instrucción FRAMESET. El código de la primera página se muestra a continuación.
La instrucción Frameset indica al explorador que se van a utilizar marcos. Cols, identifica el número de columnas que se van a usar, la primera de 200 píxeles y la segunda con la parte restante de la pantalla. Name es una instrucción que se utilizan en este caso para nombrar las secciones del explorador, para poder hacer referencia posteriormente al manejar hipervínculos. Target, significa destino, y especifica el nombre del marco de destino donde se dirigirá el contenido del hipervínculo. Src significa Source (origen), e identifica la página origen mostrada inicialmente en cada
IPN
CECyT 9
46
sección. Noframes es una instrucción que se utiliza en caso de que el explorador de Internet no pudiese mostrar una página con marcos. En este caso, el Explorador enviará el mensaje que queda entre las líneas de <Body> y </Body>. Cuando se haya capturado el código, debe guardar el archivo con un nombre que se relacione con la función del código (por ejemplo, marco.htm) Si abre la página, observará algo como esto:
Izquierda: Contenido. Derecha: Marco de destino. A continuación, se debe crear la página de contenido. Puede ingresar nuevamente al bloc de notas o al programa donde se edita el código y capturar el código que muestra a continuación. Cuando termine de capturar este código, guarde el archivo como Contenido.htm, ya que con este nombre, se hizo referencia en la página anterior, en la instrucción SRC.
IPN
CECyT 9
47
Cuando haya capturado el código y guardado el archivo, abra la página Marco, y observará lo siguiente:
Unidad 31. Marcos III La página tres, es en realidad una página de relleno, es decir esta página se mostrará inicialmente, aunque será remplazada por la página correspondiente a cada hipervínculo del marco de contenido. Para cada hipervínculo se debe crear una página diferente, con la estructura que tiene la página inicial. El código de esta página se muestra a continuación.
IPN
CECyT 9
48
Cuando haya capturado el código, guarde el archivo como Inicial.htm, que es el nombre con el que se hizo referencia a la página en el primer código. Posteriormente, abra el archivo marco, y observará lo siguiente:
Cuando haya hecho esto, habrá comprendido cómo funcionan las páginas Web que manejan marcos. Ejercicio La página anterior contiene cuatro viñetas. Usando las opciones de Hipervínculos deberás convertir a las cuatro viñetas en hipervínculos que permitan, al hacer clic en cada uno, desplazarse a una página correspondiente a la información de la viñeta.
IPN
CECyT 9
49
Nota importante. Las páginas a las que se hará referencia deberán ser diseñadas con la misma estructura de las cinco primeras líneas de código de la página Inicial.htm, para que puedan aparecer en el marco derecho cada vez que se haga clic en un vínculo de la izquierda.
Unidad 32. Formularios La manera general para que los lectores de nuestra página se puedan comunicar con nosotros es por medio de un enlace a nuestra dirección de e-mail, con lo que recibiríamos 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, además de otras cosas, utilizando los formularios, con los que se pueden confeccionar páginas que contengan los elementos necesarios para ello, tal como botones de radio, listas de selección, cajas de introducción de texto y de control, etc. Los formularios permiten que los demás nos envíen la información directamente a nosotros o bien a nuestro servidor, en donde hemos instalado un programa que procese esta información. 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 botón de envío. Esos datos los podemos recibir "en bruto" en nuestro correo, con los que haríamos manualmente dicha lista de correo, sin necesitar ningún programa para ello. Este proceso es el que vamos a comentar en este capítulo. La otra posibilidad, de la que únicamente se va a hacer esta mención, es que hubiéramos instalado en nuestro servidor un programa especial para procesar esos datos y añadirlos a la lista de correo, y que incluso pudiera devolver automáticamente al usuario algún tipo de información. 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 más 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:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 2. Cuerpo del formulario, con los distintos elementos para poder introducir los datos. 3. Botones de envío y de borrado. 4. Etiqueta de cierre </FORM>
Etiqueta de inicio El atributo ACTION indica la acción que se debe efectuar y que es que los datos sean enviados por e-mail a la dirección indicada. (Si hiciéramos uso del CGI, sería precisamente aquí donde indicaríamos su localización en el servidor, que habitualmente es el directorio cgi-bin, para que procese los datos).
IPN
CECyT 9
50
El atributo METHOD=POST indica que los datos sean inmediatamente enviados por correo a la dirección de e-mail, cuando el usuario pulse el botón de envío. Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un fichero de texto, perfectamente legible y sin codificar.
Unidad 33. Elementos para introducir los datos Los vamos a dividir en tres clases: 1. Introducción por medio de texto. 2. Introducción por medio de menús. 3. Introducción por medio de botones. La introducción 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 introducción. yyy es el nombre que le asignamos nosotros a la variable de introducción del dato. zzz es la palabra asociada a un elemento. Ejemplo: <FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> Escribe tu apellido: <BR><INPUT TYPE="text" NAME="Apellido"> </FORM> Este segmento de código 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=González La longitud de este campo es por defecto de 20 caracteres. Se puede modificar dicha longitud incluyendo en la etiqueta el atributo SIZE="número". Por otra parte, cualquiera que sea la longitud del formulario, si no se indica nada, el usuario puede introducir el número de caracteres que desee. Se puede limitar la longitud máxima, incluyendo en la etiqueta el atributo MAXLENGTH="número". Ejemplo: <INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12"> Esta instrucción limita el campo a 10 caracteres visibles y 12 caracteres de entrada máxima. Puede también convertir el texto introducido a caracteres comodines para simular una contraseña, ello convierte la expresión del cuadro de texto en una serie de asteriscos.
IPN
CECyT 9
51
Ejemplo: <INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12">
Unidad 34. Áreas de texto 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="número" COLS="número"> ROWS representa el número de filas, y COLS el número de columnas. Se debe finalizar con la etiqueta de cierre </TEXTAREA>
Botones de envío y borrado Un elemento muy importante que permiten manipular la información de los formularios son los botones de Envío y Borrado. Para aplica a un formulario un botón de envío, se deberá introducir la siguiente instrucción. <INPUT TYPE="submit" VALUE="Texto del botón"> En donde Texto del botón es el texto que queremos que aparezca en el botón. Sin embargo, además de colocar en nuestro formulario un botón de envío, deberá aplicarse un botón que permita restablecer los cuadros de texto así como las opciones predeterminadas del formulario. Generalmente esto se consigue con la siguiente instrucción: <INPUT TYPE="reset" VALUE="Texto del botón">
Unidad 35. Ejemplo de formulario Para ilustrar lo dicho hasta ahora, haremos un formulario que permita al usuario introducir alguna información mediante cajas de texto, áreas de texto y botones.
IPN
CECyT 9
52
El código 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:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> Nombre: <BR> <INPUT TYPE="text" NAME="Apellido"> <br> Dirección: <BR> <INPUT TYPE="text" NAME="Dirección"> <br> Teléfono: <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>
IPN
CECyT 9
53
Unidad 36. Opciones de menús Una forma muy común 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>Opción 1 <Option>Opción 2 <Option>Opción 3 </Select> Donde Option indica cada una de las opciones del menú. La siguiente figura muestra una forma real de la utilización de menús.
El código para obtener un menú como el anterior, se muestra a continuación. Estado civil:<br> <Select Name="EdoCivil"> <option>Casado (a) <option>Soltero (a) </select> <br> Si se desea crear una lista de selección con barras de desplazamiento, se debe introducir una instrucción como la siguiente: <SELECT NAME="Nombre" Multiple Size="nFilas"> Donde nFilas es el número de filas que se muestran en el control y que se podrán seleccionar arrastrando el control sobre ellas. La siguiente figura muestra un ejemplo de ello.
El código que permite obtener este método es el siguiente: Materias de interés:<br> <Select Name="Materias" Multiple Size=4> <option>Office XP
IPN
CECyT 9
54
<option>Diseño gráfico <option>Bases de datos <option>Redes Lan </select> Cuando la lista de opciones es más larga que la altura predeterminada del control, se muestra automáticamente la barra de desplazamiento. Ejemplo:
Unidad 37. Botones de radio Los botones de radio permiten seleccionar una de varias opciones dentro de un formulario. Por ejemplo, en nuestro ejercicio, hemos incluido una expresión que solicita al usuario indicar su sexo, y muestra dos opciones de las cuales sólo se podrá elegir una.
El usuario podrá seleccionar cualquiera de las dos opciones mostradas. El código para obtener estas opciones, se muestra a continuación. Sexo:<br> <input type="radio" Name="M" Value="Hombre">Hombre <input type="radio" Name="F" Value="Mujer">Mujer <br> Según el número de opciones que se desee aplicar, será el número de veces que debe aparecer la instrucción en el código.
Unidad 38. Casillas de verificación Permiten al usuario seleccionar varias opciones dentro de un formulario. Por ejemplo, existen páginas en Internet que permiten suscribirse a algún boletín y nos dan la opción de "marcar" qué tipo de información queremos recibir en nuestro correo. La instrucción para aplicar una casilla de verificación es la siguiente: <input type="checkbox" name="Nombre">Texto de la opción La siguiente figura muestra un ejemplo de una situación real donde permitimos al usuario seleccionar las opciones que quiera.
IPN
CECyT 9
55
El código se muestra a continuación. Deseo información 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 inglés <br> Si se desea que una casilla aparezca seleccionada de forma predeterminada, debemos usar la instrucción CHECKED en la línea donde queramos seleccionar dicha opción. 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 diseñar la siguiente página, utilizando campos de texto, listas de menús, botones de opciones, casillas de verificación, etc. Asimismo debe utilizar una tabla para organizar los campos como los que se muestran en la página. El tipo de fuente utilizado es Arial.
REGRESO AL INDICE
