Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Manual HTML
Autor: Silvestre Goxcon Blas
1. Introduccin
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.
5. Estilos de ttulo
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.
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.
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:
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
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:
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:
10
Si se desea cambiar el color, es necesario incluir el modificador Color=Color. Ejemplo: <HR Color=Blue>
11
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
12
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.
13
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
14
15
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>
16
11. Interlineados
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.
17
18
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.
19
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>
20
21
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>
22
23
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.
24
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.
25
Ejercicio Modifica la pgina anterior de manera que aparezca en el sitio que se indica, la pgina Web de la papelera.
26
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.
27
Ejercicio Modifica la pgina anterior de manera que muestre la pgina con la siguiente vista.
28
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.
29
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.
30
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.
31
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>
32
33
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.
34
20. Pelculas
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">
35
Si se desea cambiar el tipo de vieta predeterminada, se debe incluir el parmetro TYPE junto con la instruccin < U L >. 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>
36
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.
37
22. Numeracin
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>
38
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>
39
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:
40
41
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
42
<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>
43
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.
44
45
24. Tablas
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.
46
<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>
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>
47
48
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.
49
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.
50
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>
51
</table>
</body> </html>
52
El cdigo para obtener una tabla con este aspecto se muestra a continuacin. <html> <head><title>Mi tabla combinada</title></head> <body>
<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>
53
</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>
54
</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.
55
56
29. Marcos
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
57
58
30. Marcos II
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:
59
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.
60
61
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:
62
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.
63
32. Formularios
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).
64
65
66
67
68
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>
69
70
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.
71
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:
72
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.
73
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.
74
75