el_lenguage_html
Anuncio
EL LENGUAJE HTML ÍNDICE Primera parte: Los primeros pasos en HTML 1- INTRODUCCIÓN 2- ESTRUCTURA DE UN DOCUMENTO HTML 3- COLOR EN HTML 4- PÁRRAFOS 5- TÍTULOS 6- ALINEACIÓN DE LOS ELEMENTOS 7- LÍNEAS HORIZONTALES 8- FUENTE 9- INSERCIÓN DE IMÁGENES 10- CARÁCTERES ESPECIALES Segunda Parte: HTML intermedio 1012131415- LISTAS ENLACES TABLAS COMBINACÓN DE ELEMENTOS (Tablas, listas, enlaces e imágenes) ALGUNAS INDICACIONES SOBRE RUTAS Y DIRECTORIOS Tercera Parte: HTML avanzado 16171819202122- MULTIMEDIA CON HTML MARCOS IMÁGENES SENSIBLES (MAPAS DE IMÁGENES) FORMULARIOS HTML DINÁMICO TRUCOS EN HTML ALGUNOS TRUCOS EN JAVASCRIPT PRIMERA PARTE: PRIMEROS PASOS EN HTML 1- INTRODUCCIÓN El lenguaje HTML (Hyper Text Markup Language) es un lenguaje que describe el formato de un documento por medio de una etiquetas, esto es, palabras reservadas del lenguaje comprendidas entre los símbolos <>. Las etiquetas pueden ser de tres tipos: Pareadas: siempre aparece una etiqueta de inicio y una etiqueta de final. La etiqueta de final siempre es como la de inicio salvo que va precedida por el símbolo /. Por ejemplo: <H1> Esto es un título </H1> Sin parear: se utilizan para indicar la inserción de algún elemento como una imagen, salto de línea, etc. Opcionales: son etiquetas pareadas en las que no es necesario emplear la etiqueta de final, ya que el final de un elemento viene dado por el comienzo de otro, como ocurre en los párrafos, etc. Ejemplo: <P>Aquí comienza un párrafo.<P>Y aquí otro.</P> Las etiquetas pueden contener en su interior atributos, que modifican de alguna forma el comportamiento “por defecto” de la etiqueta. Los atributos no pueden en la etiquetas de final. A los atributos se le debe especificar un valor característico dentro de una lista de posibilidades que depende del atributo. Se le asigna como atributo=”valor”. Ejemplos: <P align=”left”> <IMG src=”foto.gif”> <HR noshade> Algunas etiquetas pueden llevar o no atributos, en otros casos, como la etiqueta de inserción de imagen, algunos atributos son obligatorios. HTML no distingue entre mayúsculas y minúsculas pero, por claridad a la hora de leer y entendernos, escribiremos los nombres de las etiquetas en mayúsculas y los atributos en minúsculas. 2- ESTRUCTURA DE UN DOCUMENTO HTML Un documento de HTML es un fichero de texto plano (sin formato), como los que escribimos con el bloc de notas que utiliza una serie de etiquetas para indicar la estructura y el formato de la información que contiene. Para que un navegador reconozca que un fichero contiene información HTML se le debe dar un nombre que termine con la extensión “.html” o “.htm”. Consta de dos partes, el encabezado y el cuerpo del documento y su estructura general es la siguiente: <HTML> <HEAD> ......................... </HEAD> <BODY> ......................... </BODY> </HTML> Toda la información va entre las etiquetas <HTML> de inicio y </HTML> de final. El encabezado se encuentra entre las etiquetas <HEAD> y </HEAD>, mientras que el cuerpo del documento va comprendido entre <BODY> y </BODY>. El encabezado En el encabezado del documento se puede incluir muchas cosas, pero nosotros sólo vamos a ver el título de la página. Cuando hablamos de título de la página nos referimos al que aparece en la barra azul del explorador (barra de título). Es muy importante no confundir este título con los títulos que pongamos en los textos que escribamos en nuestra página. La etiqueta que utilizaremos para poner títulos es una etiqueta pareada: <TITLE> ..... </TITLE> Por ejemplo, un encabezado podría ser: <HEAD> <TITLE> Mi primera Web </TITLE> </HEAD> La etiqueta <BODY> </BODY> Toda la información que queremos que aparezca en la página la debemos incluir en el cuerpo del documento. Este comienza con la etiqueta <BODY> y termina con </BODY>. La etiqueta <BODY> admite varios atributos entre los que destacan los siguientes: background: para poner una imagen de fondo. bgcolor: para poner un color de fondo. text: para elegir el color del texto. link, vlink y alink: para elegir el color de los enlaces, los enlaces visitados y los enlaces marcados. Con todo esto podemos escribir nuestra primera página Web. Sería algo así: <HTML> <HEAD> <TITLE> Mi primera Web </TITLE> </HEAD> <BODY> Aquí va el texto que queremos poner. </BODY> </HTML> 3- COLOR EN HTML Existen muchos elementos en una página Web para los que podemos especificar el color: fondo, texto, enlaces, etc. La forma más sencilla de especificar el color es mediante el nombre del color en inglés y entre comillas. Por ejemplo, si queremos que el anterior documento tenga el fondo azul y el texto blanco, cambiaremos la línea de <BODY> por: <BODY bgcolor=”blue” text=”white”> Este es el resultado: Con la segunda forma de especificar el color podemos dar cualquier color. Se basa en un código de 6 números o letras precedidos por el símbolo #, de los cuales el primer par nos dan la intensidad de rojo, el segundo par la intensidad de verde y el tercer par la intensidad de azul. Variando la cantidad de rojo, verde y azul podemos obtener cualquier color. Las intensidades siguen el orden: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Ejemplos: negro = #000000, blanco = #ffffff, rojo = #ff0000, verde = #00ff00, azul = #0000ff. Muestras: #ee7455 #2299ee #8877bb #555555 #553300 #eeee00 #997700 #777777 Si nos fijamos en los dos grises nos damos cuenta de que si queremos un color más oscuro debemos disminuir la numeración, mientras que si lo que queremos es un color más claro deberemos aumentarla. 4- PÁRRAFOS Para introducir texto en un documento HTML es suficiente, como vimos en el primer ejemplo, con escribirlo entre las etiquetas <BODY> y </BODY>. No obstante, si queremos que el texto se presente de una forma ordenada, hemos de utilizar párrafos. Para especificar el comienzo de un párrafo se utiliza la etiqueta pareada <P> ... </P>. Dado que el final de un párrafo suele coincidir con el inicio de otro, la etiqueta de final, en la mayoría de los casos, la podemos olvidar. El uso de la etiqueta <P> nos va a permitir alinear el texto a la derecha, izquierda o centrado. Esto se hace con el atributo align, que puede tomar los valores left, right, center. Por ejemplo, el documento: <HTML> <HEAD> <TITLE> Mi primera Web </TITLE> </HEAD> <BODY> <P>Aquí comienza el primer párrafo del documento que estoy escribiendo. <P align=center>Este otro párrafo está centrado <P align=right>Este está alineado a la derecha </BODY> </HTML> da el siguiente resultado: En algunos casos nos interesará separar los párrafos más de una línea. No podemos utilizar varias etiquetas <P> seguidas porque el navegador las interpreta como una sola. Para este caso hemos de utilizar la etiqueta de salto de línea <BR>. Por ejemplo: <HTML> <HEAD> <TITLE> Párrafos en HTML </TITLE> </HEAD> <BODY> <P>Aquí comienza el primer párrafo del documento que estoy escribiendo. <P align=center>Este otro párrafo está centrado. <P align=right><BR><BR>Este está alineado a la derecha y más separado. </BODY> </HTML> da el siguiente resultado: 5- TÍTULOS Cuando hablamos de títulos en HTML nos referimos a los encabezados del documento y las secciones que contiene. Los títulos se indican con la etiqueta pareada <Hn> ...... </Hn>. La n hemos de sustituirla por un número de 1 a 7 que nos indica la importancia del título. <H1> será el más importante y, por tanto, el de mayor tamaño y <H7> el menos importante y de menor tamaño. Los títulos admiten también el atributo align con los mismos valores que en el caso de los párrafos. Ejemplo: <HTML> <HEAD> <TITLE> Títulos en HTML </TITLE> </HEAD> <BODY> <H1 align=center>Este es el título principal centrado</H1> <H2 align=right> Este es el subtítulo alineado a la derecha</H2> <H3>Este es el segundo subtítulo</H3> </BODY> </HTML> Esto da el resultado: Es muy importante cerrar las etiquetas de título, ya que de lo contrario, todo lo que escribamos a continuación será interpretado como parte del título. Por ejemplo, el siguiente código en el que no hemos cerrado <H1>: <HTML> <HEAD> <TITLE> Títulos en HTML </TITLE> </HEAD> <BODY> <H1 align=center>Este es el título principal centrado <H2 align=right> Este es el subtítulo alineado a la derecha</H2> <P>Aquí escribiré el texto que deseo que aparezca en mi página Web. </BODY> </HTML> produce el siguiente resultado: Esto ocurre porque se ha interpretado el texto como parte del título. 6- ALINEACIÓN DE LOS ELEMENTOS Ya hemos visto cómo podemos alinear algunos elementos como párrafos y títulos mediante el atributo align. Este atributo también servirá para la alineación de otros elementos como imágenes y tablas. Para centrar elementos también existe la etiqueta paread <CENTER> ....... </CENTER>, que centra cualquier elemento que se encuentre entre la etiqueta de inicio y la de final. Por ejmplo: <HTML> <HEAD> <TITLE> Alineación en HTML </TITLE> </HEAD> <BODY> <CENTER> <H1>Título del Documento</H1> <H2> (subtítulo)</H2> <P>Aquí escribiré el texto que deseo que aparezca en mi página Web. No es necesario que, por el momento se excesivamente largo. </CENTER> </BODY> </HTML> produce el siguiente resultado: 7- LÍNEAS HORIZONTALES Las líneas horizontales nos sirven para separar secciones del documento y, con ello, dar un aspecto más profesional al mismo. Las líneas se introducen mediante la etiqueta <HR>, la cual admite los siguientes atributos: size: marca el grosor de la línea. El menor valor es 1 y el valor por defecto 2. width: marca la anchura horizontal de la línea en píxeles o en porcentaje de la página. Por defecto es todo el ancho de pantalla. align: igual que en en los casos anteriores especifica la alineación de la línea y puede ser left, right o center. Si no se especifica nada, las líneas están centradas. noshade: muestra una líneas sólida sin apariencia tridimensional. Ejemplo: <HTML> <HEAD> <TITLE> Líneas horizontales en HTML </TITLE> </HEAD> <BODY> <CENTER> <H1>Título del Documento</H1> <H2> (subtítulo)</H2> </CENTER> <HR size=4> <P>Aquí escribiré el texto que hemos separado de título y subtítulo por una línea horizontal que ocupa toda la pantalla y que es mas gruesa de lo normal.</P> <HR width=60% align=left> <P>Este segundo párrafo lo hemos separado del primero mediante una línea que sólo ocupa el 60% de la pantalla y está alineada a la izquierda. </BODY> </HTML> 8- FUENTE Hasta el momento, hemos estado utilizando el tipo, tamaño y color de letra que aparece en el navegador por defecto. Esta letra es Times New Roman de tamaño 12 y en negro. Ya vimos en el apartado del color cómo podemos modificar el color de la letra de TODO el documento. Lo hacíamos con el atributo text de la etiqueta <BODY>. Pero, ¿cómo modificamos solamente una troza de texto? Para modificar la letra de un documento utilizaremos la etiqueta pareada <FONT> .... </FONT> que alterará SÓLO el texto que se encuentre entre la etiqueta de inicio y de final. Esta etiqueta admite los atributos: color: especifica el color del texto. size: especifica el tamaño del texto de 1 (más pequeño) a 7. face: especifica el tipo de letra. Podemos utilizar cualquier tipo de letra que se encuentre en la carpeta WINDOWS/Fonts/ y que vaya marcada con una O. Por ejemplo: <HTML> <HEAD> <TITLE> Texto en HTML </TITLE> </HEAD> <BODY text=brown> <CENTER> <H1>Título del Documento</H1> <H2> (subtítulo)</H2> </CENTER> <P>Hasta este párrafo (incluido), el texto tiene el color que hemos especificado en la etiqueta BODY. </P> <FONT size=4><P>En este párrafo sigo con el mismo tipo de letra y el mismo color pero ahora un poco mayor.</FONT> <FONT color=red size=1><P>Este tercer párrafo tiene letra de color rojo y más pequeña.</FONT> <FONT color=cyan face="chiller" size=5><P>Este cuarto párrafo tiene otro tipo letra llamado chiller, color azul claro y es un poquito más grande.</FONT> </BODY> </HTML> Existen otras formas de modificar el texto: la letra negrita, cursiva (itálica), subrayado, etc. Esto siempre se consigue mediante etiquetas pareadas que resumimos en el siguiente cuadro: Etiqueta <B> </B> <I> </I> <U> </U> <SUB> </SUB> <SUP> </SUP> Texto Texto Texto Texto Texto Descripción en negrita en cursiva subrayado como subíndice como superíndice Por ejemplo, si queremos escribir: “El microprocesador es una de las partes fundamentales del ordenador” El fragmento de código sería: “El <B>microprocesador</B> es una de la partes fundamentales del ordenador” Si queremos combinar efectos como, por ejemplo: “Ayer terminé de leer Las aventuras de Huckelberry Finn” El fragmento de código sería: “Ayer terminé de leer <B>Las aventuras de <I>Huckelberry Finn</I></B>” Observemos el anidamiento de las etiquetas: la etiqueta <I> va dentro de la etiqueta <B>, es decir, se abre después y se cierra antes, de modo que la acción de la etiqueta <B> recae sobre todo el texto, incluido el que esta entre las etiquetas <I> de inicio y final, que actúan sólo sobre el texto que incluyen entre ellas. Más adelante, veremos más ejemplos de anidamiento. 9- INSERCIÓN DE IMÁGENES Existen dos formas de incluir imágenes en un documento HTML. La primera es mediante un enlace al fichero gráfico que contiene la imagen. Veremos más adelante cómo se realizan enlaces. La segunda forma que es la que va a hacer posible que la imagen forme parte de un documento con título, texto, etc., es mediante le etiqueta <IMG>. La etiqueta <IMG> presenta los siguientes atributos: src: contiene la ruta de acceso a la imagen, incluyendo su nombre. ES OBLIGATORIO. alt: asigna un texto descriptivo relacionado con la imagen. align: controla la alineación de la imagen height: especifica la altura de la imagen a insertar en píxeles o en porcentaje de pantalla (recomendado). width: especifica la anchura de la imagen a insertar en píxeles o en porcentaje de pantalla (recomendado). border: fija la anchura del borde que rodeará a la imagen. Por defecto no tiene (valor 0). hspace: fija la distancia horizontal en píxeles entre la imagen y cualquier otro elemento (texto, otra imagen, etc.). vspace: fija la distancia vertical en píxeles entre la imagen y cualquier otro elemento (texto, otra imagen, etc.). usemap: lo veremos más adelante. imap: lo veremos más adelante. Ejemplo: el código: <HTML> <HEAD> <TITLE> Imágenes en HTML </TITLE> </HEAD> <BODY > <CENTER> <H1>Título del Documento</H1> <H2> (subtítulo)</H2> </CENTER> <HR> <FONT size=5> <P><IMG src=”cortado.jpg” align=right width=30%> Este párrafo rodea a la foto del cortado que se alinea a la derecha con respecto al texto. El tamaño de la imagen ha sido reducido a una anchura del 30% de la pantalla para que no sea excesivamente grande. <p>He aumentado el tamaño de la letra del documento para no tener que estar inventándome tonterías a la hora de escribir. Cuando el texto sobre pasa la imagen, vuelve a ocupar toda la pantalla del navegador. </FONT> </BODY> </HTML> da el siguiente resultado: 10- CARÁCTERES ESPECIALES Para terminar esta primera parte vamos a ocuparnos de cómo introducir algunos símbolos en HTML. Estos símbolos son caracteres especiales que se introducen por medio de un código. Los más utilizados son los siguientes: Carácter < “ ó Ñ Código &lt; &quot; &oacute; &Ntilde; Carácter > á ú ® Código &gt; &aacute; &uacute; &reg; Carácter & é Á @ Código &amp; &eacute; &Aacute; &copy; Carácter # í ñ Espacio Código &#35; &iacute; &ntilde; &nbsp; SEGUNDA PARTE: HTML INTERMEDIO 11- LISTAS Las listas o listados nos sirven para enumerar opciones, crear índices o menús, presentar apartados de un documento, etc. En HTML existen 4 tipos de listas: listas desordenadas, listas ordenadas, menús y listas de elementos cortos. Veremos las dos primeras: Listas desordenadas: cada apartado de la lista incluye una marca (un punto grande, un cuadradito, etc.) y un margen. Las listas desordenadas se representan mediante la etiqueta <UL> ...... </UL>, que admite el atributo type. Este atributo indica la marca de párrafo que se utilizará y puede tomar los valores “circle”, “disc” o “square”. Listas ordenadas: cada apartado de la lista incluye un elemento de orden (un número o una letra.) y un margen. Las listas desordenadas se representan mediante la etiqueta <OL> ...... </OL>, que admite el atributo type. Este atributo indica la numeración que se utilizará y puede tomar los valores “A”, “a”, “I”, “i”, “1”. Para cualquier tipo de lista, cada uno de los apartados se indica con la etiqueta de tipo opcional <LI> ..... </LI>, Ejemplo: <HTML> <HEAD> <TITLE> Listas en HTML </TITLE> </HEAD> <BODY > Temario del curso (ordenado): <OL type=”a”> <LI>Tema 1</LI> <LI>Tema 2</LI> <LI>Tema 3</LI> <LI>Tema 4</LI> <LI>Tema 5</LI> </OL> Temario del curso (desordenado): <UL type=”square”> <LI>Tema 1</LI> <LI>Tema 2</LI> <LI>Tema 3</LI> <LI>Tema 4</LI> <LI>Tema 5</LI> </UL> </BODY> </HTML> Las listas pueden aparecer anidadas, esto es, una dentro de otra. Realmente, la sublista se encuentra dentro de uno de los apartados de la primera lista. Veamos un ejemplo en que anidamos una lista desordenada dentro de una ordenada: <HTML> <HEAD> <TITLE> Listas en HTML </TITLE> </HEAD> <BODY > Temario del curso (ordenado): <OL type=”1”> <LI>Tema 1</LI> <UL type=”circle”> <LI>apartado 1</LI> <LI>apartado 2</LI> <LI>apartado 3</LI> </UL> <LI>Tema 2</LI> <LI>Tema 3</LI> <LI>Tema 4</LI> <LI>Tema 5</LI> </OL> </BODY> </HTML> 12- ENLACES Los enlaces entre documentos son lo que hacen de HTML un lenguaje potente. Hasta el momento no hemos hecho nada que no pueda hacerse con un editor de texto ordinario. Pero los enlaces van a permitirnos conectar diferentes secciones de un mismo documento, documentos diferentes o, incluso ir de un documento a un apartado específico de otro. Además, los enlaces no tienen que ser sólo a documentos de texto, pueden relacionar también ficheros de imagen, sonido, vídeo. La etiqueta para establecer cualquier enlace es la etiqueta pareada <A> ..... </A>. Los atributos que incluye y su uso depende mucho del tipo de enlace, así que lo iremos viendo poco a poco. Comenzaremos por incluir en el documento un enlace a la dirección de correo electrónico. Un enlace al e-mail tiene la siguiente estructura: <ADDRESS><A href=”mailto:dirección de correo”>Enlace</A></ADDRESS> Por ejemplo: <HTML> <HEAD> <TITLE> Enlace a e-mail </TITLE> </HEAD> <BODY > Escribe un e-mail a: <ADDRESS><A href=”mailto:[email protected]”>Roberto Medrano</A></ADDRESS> </BODY> </HTML> Los enlaces a una página o dirección de la World Wide Web son más sencillos. En este caso no utilizamos la etiqueta <ADDRESS> ..... </ADDRESS>, sino que escribimos la dirección en el valor del atributo href. Por ejemplo: <HTML> <HEAD> <TITLE> Enlace a Web </TITLE> </HEAD> <BODY > Si quieres ir a Google haz click <A href=”http://www.google.com”>aquí</A>. </BODY> </HTML> El texto que escribimos entre la etiqueta <A> de inicio y la etiqueta </A> de final, es lo que aparece en nuestra página como elemento interactivo para pinchar y que nos lleve al enlace. Veremos más adelante que podemos utilizar también imágenes. Los enlaces a una sección del documento implican el uso de, al menos, dos etiquetas de enlace. Necesitamos una etiqueta para dar nombre a la sección y otra para enlazar con la sección. Por ejemplo, veamos este documento llamado “museos de cordoba.html”1: 1 Este documento es parte de un trabajo realizado por Ana María Campos Fernandez de 1º de E.S.O. del curso 2003-2004. En el documento, a cada sección se le ha puesto un nombre, justo delante del título de la sección: <a name="bellasartes"></a> EL MUSEO DE BELLAS ARTES <P>Situado en la bellísima plaza del Potro, el Museo de .... En la parte de arriba se escriben los enlaces a cada una de las secciones: <a href="#bellasartes">Museo Bellas Artes</a><br> <a href="#naranjasylimones">Museo Naranjas y Limones</a><br> <a href="#alcazardelosreyescristianos">Museo Alcázar de los Reyes Cristianos</a><br> <a href="#torrefortalezadelacalaorra">Museo Torre Fortaleza de la Calahorra</a><br> <a href="#madinat">Museo de Maninat Al-zahra</a><br> Vemos que el enlace tiene la misma estructura que un enlace a Web pero la “dirección” que escribimos en el atributo href es el nombre de la sección precedido del símbolo #, que indica que la dirección se refiere a un parte del documento en el que estamos trabajando. Para crear un enlace a una sección de otro documento procedemos de forma similar. Imaginemos que desde el documento llamado “Inicio.html” queremos ir a la sección del Museo de Bellas Artes dentro del documento “museos de cordoba.html”. Los pasos que hemos de realizar son los siguientes: Damos nombre a las secciones del documento “museos de cordoba.html”, si no lo tienen ya, tal y como vimos antes. En el documento “Inicio.html” creamos un enlace similar a los que creábamos antes para hacer referencia a una sección dentro del documento. La diferencia es que, ahora, hemos de especificar el nombre del archivo (y la ruta si no se encuentra en el mismo directorio, aunque eso lo veremos más adelante) “museos de cordoba.html” delante del símbolo #. Es decir, en el documento “Inicio.html” escribimos algo así: <HTML> <HEAD> <TITLE> Enlace a sección de otro documento</TITLE> </HEAD> <BODY > Vamos a ver la sección de museos de Córdoba que trata del <A href=”museos de cordoba.html#bellasartes”>Museo de Bella Artes</A>. </BODY> </HTML> El documento “Inicio.html” queda de la siguiente forma: Al pinchar en el enlace obtenemos: 13- TABLAS HTML nos permite crear tablas que nos van a servir no sólo para organizar el texto en filas y en columnas, si no que también nos va a permitir insertar imágenes y ordenarlas. Una tabla se define mediante la etiqueta pareada <TABLE> ..... </TABLE>, en cuyo interior se describen las filas y las columnas de la misma. Las filas se representan con la etiqueta opcional <TR> ..... </TR> y son los bloques básicos, es decir, que son lo primero que se especifica y las columnas se definen dentro de cada fila. Las columnas se definen, dentro de cada fila, mediante la etiqueta opcional <TD> ..... </TD>. Existe también un tipo de columna especial, la de encabezado (le de los títulos de las columnas) que se puede especificar con la etiqueta opcional <TH> ..... </TH>, que produce un formato especial. Además, se le puede poner un título o comentario de tabla mediante la etiqueta pareada <CAPTION> ..... </CAPTION>. Esta etiqueta sólo puede aparecer una vez dentro de cada tabla. Ejemplo: <HTML> <HEAD> <TITLE> Tablas en HTML </TITLE> </HEAD> <BODY > Esta tabla muestra algunos gastos de una familia de 4 miembros: <TABLE> <CAPTION>Gastos Mensuales</CAPTION> <TR> <TH>Mes</TH> <TH>Alimentación</TH> <TH>Luz/Gas/Agua</TH> <TH>Transporte</TH> </TR> <TR> <TD>Enero</TD> <TD>250</TD> <TD>120</TD> <TD>200</TD> </TR> <TR> <TD>Febrero</TD> <TD>230</TD> <TD>135</TD> <TD>190</TD> </TR> </TABLE> </BODY> </HTML> En el ejemplo anterior, la tabla no tiene ningún borde que la diferencie del resto del documento. Esto será útil en algunos casos. No obstante, si queremos que aparezca el borde, debemos utilizar el atributo border dentro de la etiqueta <TABLE>. El valor que puede tomar este atributo es 0 (si no aparece) o valores de 1 a 7 según el grosor que queramos. Por ejemplo, la tabla anterior con borde, sería igual pero la etiqueta <TABLE> quedaría: <TABLE border=1> lo que produce el resultado: Existen otros atributos, tanto de la etiqueta <TABLE> como de las etiquetas de fila y de columna, que nos permiten modificar la apariencia de la tabla: Etiqueta Atributo <TABLE> border cellpadding cellspacing width align <CAPTION> align <TR> align valign <TD> y <TH> align valign Función Fijar ancho del borde de la tabla Fija la distancia (en píxeles) entre el borde de la celda y su contenido Fija la anchura (en píxeles) de las líneas de división de la tabla Controla la anchura horizontal de la tabla, en píxeles o en porcentaje de pantalla Controla la alineación de la tabla con respecto a otros elementos de la página Fija la posición del título con respecto de la tabla Alineación horizontal del texto en la fila Alineación vertical del texto en la fila Alineación horizontal del texto en la columna Alineación vertical del texto en la columna colspan Indica el número de columnas que ocupará esta celda rowspan Indica el número de filas que ocupará esta celda nowrap Obliga al explorador a no romper las líneas de texto que contenga la celda width Determina el ancho de la celda, en píxeles o en porcentaje. Valores de 0 a 7 cualquier valor positivo cualquier valor positivo cualquier valor positivo (con % si indicamos porcentaje) left, right top (arriba) o bottom (abajo) left, center, right top, bottom, middle, baseline left, center, right top, bottom, middle, baseline cualquier valor positivo mayor que 2 y menor que el número total de columnas cualquier valor positivo mayor que 2 y menor que el número total de filas cualquier valor positivo (con % si indicamos porcentaje) Además, las etiquetas <TABLE>, <TR> y <TD> admiten el atributo bgcolor, que permite cambiar el fondo de la tabla, columna, fila, etc., según la etiqueta sobre la que se aplique. Lo mismo ocurre con el atributo background si queremos poner una imagen de fondo en la tabla o en algunas de sus celdas. Vamos a ver unos ejemplos: 1- En este primer ejemplo vamos a ver el color en las celdas y la alineación de tabla y de texto. <HTML> <HEAD> <TITLE> Tablas en HTML </TITLE> </HEAD> <BODY > Esta tabla muestra algunos gastos de una familia de 4 miembros: <BR><BR> <TABLE border=2 align=center> <CAPTION>Gastos Mensuales</CAPTION> <TR bgcolor=”#88aa88” align=center> <TH>Mes</TH> <TH>Alimentación</TH> <TH>Luz/Gas/Agua</TH> <TH>Transporte</TH> </TR> <TR bgcolor=cyan align=right> <TD align=left>Enero</TD> <TD bgcolor=red>250</TD> <TD>120</TD> <TD>200</TD> </TR> <TR bgcolor=cyan align=right> <TD align=left>Febrero</TD> <TD>230</TD> <TD>135</TD> <TD>190</TD> </TR> </TABLE> </BODY> </HTML> 2- En este ejemplo vamos a dejar la tabla alienada a la izquierda de un texto y le vamos a dejar espacio entre el borde de la celda y su contenido así como con respecto al texto de fuera. <HTML> <HEAD> <TITLE> Tablas en HTML </TITLE> </HEAD> <BODY > <font size=4> <p>Como la tabla esta alineada a la izquierda, el texto la pasará por la derecha. <TABLE border=2 bgcolor=cyan align=left cellpdding=8 cellspacing=4> <CAPTION align=bottom>Gastos Mensuales</CAPTION> <TR bgcolor=”#88aa88” align=center> <TH>Mes</TH> <TH>Alimentación</TH> <TH>Luz/Gas/Agua</TH> <TH>Transporte</TH> </TR> <TR align=right> <TD align=left>Enero</TD> <TD>250</TD> <TD>120</TD> <TD>200</TD> </TR> <TR align=right> <TD align=left>Febrero</TD> <TD>230</TD> <TD>135</TD> <TD>190</TD> </TR> </TABLE> <p>En cuanto escribamos detrás de la tabla. <P>Si nos fijamos, el cambio de tamaño del texto no ha afectado al texto dentro de la tablas, si no, sólamente, al texto de fuera.</font> </BODY> </HTML> 3- Por último, vamos a ver cómo cambiar el texto en una tabla y hacer que una columna (fila) ocupe el espacio de varias: <HTML> <HEAD> <TITLE> Tablas en HTML </TITLE> </HEAD> <BODY > <TABLE border=2 bgcolor=cyan align=left cellpdding=8> <CAPTION align=bottom>Gastos Mensuales</CAPTION> <TR bgcolor=”#88aa88” align=center> <TH><font size=4 face="verdana">Mes</TH> <TH>Alimentación</TH> <TH>Luz/Gas/Agua</TH> <TH>Transporte</TH> </TR> <TR align=right> <TD align=left>Enero</TD> <TD>250</TD> <TD colspan=2>320</TD> </TR> <TR align=right> <TD align=left>Febrero</TD> <TD>230</TD> <TD>135</TD> <TD>190</TD> </TR> </TABLE> </BODY> </HTML> 14- COMBINACIÓN DE ELEMENTOS Hemos aprendido ya mucha cosas sobre HTML: estructura y formato del texto, enlaces, imágenes, listas, tablas, etc. Por el momento cada cosa la hemos visto por separado. Sin embargo, lo interesante de HTML es la combinación de todos los elementos para producir documentos más vistosos e interesantes. Para combinar elementos es necesario insertar unas etiquetas dentro del campo de acción de otra, es decir, entre las etiquetas de inicio y final de la primera. Estudiaremos con más detenimiento este concepto de anidamiento de etiquetas. En este apartado veremos sólo algunos ejemplos, pero que ilustrarán las posibilidades que existen y que podemos explotar con un poquito de imaginación. 1. Menú de enlaces. En ocasiones, puede interesarnos tener un listado de opciones, es decir, un menú, que nos permita seleccionar el apartado de la página que queremos visitar o simplemente que nos presente un listado de enlaces a páginas de Internet. Esto se puede hacer creando una lista (ordenada o desordenada) en la que cada punto sea un enlace. Veamos un ejemplo: <HTML> <HEAD> <TITLE> Menú de opciones </TITLE> </HEAD> <BODY > Esta es una lista de buscadores en Internet: <UL type=disc> <LI><A href="http://www.google.com">Google</A></LI> <LI><A href="http://www.yahoo.com">Yahoo</A></LI> <LI><A href="http://www.altavista.com">Altavista</A></LI> <LI><A href="http://www.lycos.es">Lycos</A></LI> </UL> </BODY> </HTML> 2. Enlace con imagen. En muchas páginas de Internet encontramos imágenes que hacen la función de enlace, bien a la misma foto pero más grande, bien a cualquier otra página. Veamos un ejemplo: El documento que contiene el enlace sería: <HTML> <HEAD> <TITLE> Enlace con foto </TITLE> </HEAD> <BODY > Haz click sobre la imagen para verla en grande:<BR><BR> <center> <A href="fotogrande.html"><IMG src="doscafes.jpg" width=50></A> </center> </BODY> </HTML> Fijémonos que la foto aparece rodeada de un borde azul, lo cual indica que es un enlace. Cuando pinchamos sobre la foto, vamos al siguiente documento que contiene la imagen en grande: El código de este documento es el que sigue: <HTML> <HEAD> <TITLE> Enlace con foto </TITLE> </HEAD> <BODY > <center> <IMG src="doscafes.jpg" width=300></A> </center> </BODY> </HTML> Hemos fijado el tamaño de la imagen en píxeles para evitar que cambie de tamaño al hacer la ventana más grande. Podríamos haber hecho un enlace directo a la imagen, pero esto nos impediría controlar el tamaño y la alineación de la imagen. Es decir, si en el primer documento cambiamos la línea del enlace por: <A href="doscafes.jpg"><IMG src="doscafes.jpg" width=50></A> al pinchar en la foto enlace, nos lleva a lo siguiente: 3. Tablas de fotos. En una página Web en la que queremos mostrar fotos, es habitual hacerlo en forma de tabla para conseguir una mejor organización y un aspecto más elegante. Existen muchos programas que realizan automáticamente la tarea con indicar simplemente el número de filas y columnas y el tamaño de la tabla (Dreamweber, Frontpage, PhotoBase, etc.) pero todos ellos esconden un código HTML como el que nosotros vamos a ver ahora: Vamos a crear una tabla con cuatro fotos con el siguiente código: <HTML> <HEAD> <TITLE> Tabla con fotos </TITLE> </HEAD> <BODY > <H1 align=center>Álbum de Fotos<H1> <HR> <TABLE align=center border=1> <TR> <TD><IMG src="doscafes.jpg" width=100></TD> <TD><IMG src="cafe.jpg" width=100></TD> </TR> <TR> <TD><IMG src="movil.jpg" width=100></TD> <TD><IMG src="orejas.jpg" width=100></TD> </TR> </TABLE> </BODY> </HTML> Hemos fijado la anchura de las imágenes en píxeles, para evitar que cambien de tamaño al variar el tamaño de la ventana. Evidentemente, el problema es que si no todas las fotos tienen el mismo formato, en la tabla aparecen espacios en blanco para completar el espacio que queda en la celda al pertenecer a una fila en la que hay un imagen más alta. Para evitar esto tenemos dos soluciones: Reordenar “manualmente” las imágenes, es decir, cambiar el código anterior de forma que las fotos con el mismo formato estén en la misma fila: Podemos fijar también la altura de las imágenes, aunque esto nos deformará alguna o todas las fotos: <IMG src="doscafes.jpg" width=100 height=80> En el caso de que tengamos fotos cuyos formatos conocemos de antemano, lo mejot es planificar un poco y utilizar el primer método. En el caso que se tenga que preparar una tabla para fotos que van a venir después, es mejor el segundo método, ya que, como veremos en el siguiente apartado, podemos utilizar la tabla para poner pequeñas fotos-enlace que nos lleven a la imagen más grande. En este caso no importa un poco de deformación. En cualquier caso, si las fotos las va a hacer uno mismo, es bueno llevar en la cabeza que las vamos a poner en la Web y utilizar como máximo dos formatos, uno horizontal y otro vertical, a la hora de sacar las fotos. Esto nos simplifica mucho el trabajo después. 4. Tabla de fotos con enlace. Veamos como podemos convertir la tabla anterior en una tabla de pequeñas fotosenlace que nos lleven a una imagen mayor de la misma foto. Al pinchar, el navegador no irá a el fichero de imagen directamente, si no, tal como hicimos anteriormente, nos llevará a un fichero .html que contendrá la imagen correspondiente. Estos ficheros que contendrán las imágenes, llevarán el mismo nombre que la imagen que contienen salvo por la extensión .html en lugar de .jpg. El código para esta tabla (dejamos que las fotos se deformen), será: <HTML> <HEAD> <TITLE> Tabla con fotos </TITLE> </HEAD> <BODY > <H1 align=center>Álbum de Fotos<H1> <HR> <TABLE align=center border=1> <TR> <TD><A href="doscafes.html"><IMG src="doscafes.jpg" width=100 height=80></A> <TD><A href="cafe.html"><IMG src="cafe.jpg" width=100 height=80></A> </TR> <TR> <TD><A href="movil.html"><IMG src="movil.jpg" width=100 height=80></A> <TD><A href="orejas.html"><IMG src="orejas.jpg" width=100 height=80></A> </TR> </TABLE> </BODY> </HTML> Vemos como aparecen los bordes azules indicando que estamos ante una imagen que es un enlace: Vemos el código de uno de los archivos que contienen las imágenes (movil.html): <HTML> <BODY > <center> <IMG src="movil.jpg" width=300></A> </center> </BODY> </HTML> 15- ALGUNAS INDICACIONES SOBRE RUTAS Y DIRECTORIOS En ocasiones, al abrir una de nuestras páginas con el explorador, es posible que las imágenes que hemos insertado no se nos muestren y, en su lugar, aparece un cuadradito con una cruz como el de la figura: También es posible que los enlaces no funcionen correctamente, es decir, que cuando los pinchemos no aparezca la página que queremos sino un mensaje de error. Existen dos posibles razones para que esto ocurra: el nombre del archivo imagen o de destino del enlace por un lado; y la ruta de acceso al archivo por otro. En cuanto a los nombres de los archivos, son muy comunes los siguientes errores: No incluir la extensión del archivo. En Windows, todos los ficheros tienen una extensión (los de Word son .doc, los de bloc de notes .tex o .html, etc.). La extensión es como el apellido del archivo, nos indica a qué familia pertenece. Lo necesitamos para identificarlo ya que archivos de diferentes familias pueden tener el mismo nombre y diferenciarse solo en la extensión (apellido). Por ejemplo, si queremos poner un enlace a un archivo de nombre imágenes que hemos creado con bloc de notas y que hemos guardado como página Web (.html), no es suficiente con escribir: <A href=”imágenes”>Mis imágenes</A> Deberemos incluir la extensión (además de no dejarnos loas tildes): <A href=”imágenes.html”>Mis imágenes</A> Escribir incorrectamente la extensión (.html) del archivo al grabarlo. Cuando grabamos por primera vez un documento HTML con bloc de notas, nos aparece un cuadro de diálogo como el siguiente: Es importante no dejar espacios entre el nombre del archivo, el punto y la extensión, sobre todo entre el punto y la extensión (html) ya que de lo contrario, el explorador ni siquiera reconocerá el documento como una página Web. En cuanto a los archivos de imagen es corriente el hecho de confundir las extensiones (.jpg, .bmp, .gif) de los archivos. Para saber con seguridad la extensión de un archivo, si visualizamos los archivos con el explorador en modo mosaico, los archivos .jpg muestran un icono con un barquito en una puesta de sol, los archivos .bmp muestran un pincel y los archivos .gif muestran un cuadradito rojo, un circulito azul y un triangulito amarillo, tal y como en la siguiente figura: Cuando bajamos una imagen de Internet podemos cometer el error de escribir nombre y extensión. Esto es un error, ya que la imagen ya tiene su propio formato y la extensión que le demos no será sino parte del nombre. Es decir, si queremos bajar una imagen de un paisaje que se llama pj000103.gif y al guardarla le ponemos escribimos el nombre paisaje.jpg, la imagen que habremos guardado, incluida la extensión se llamará paisaje.jpg.gif. Esto nos producirá errores al insertarla en algún documento HTML. Si queremos cambiar la extensión, hemos de cambiar el formato, pero eso no está dentro del objetivo de estas notas. La segunda fuente de error más frecuente a la hora de incluir una imagen o un enlace, es la ruta de acceso al mismo. Hasta el momento, hemos trabajado suponiendo que todos los archivos que utilizamos (imágenes, archivos de texto, etc.) se encontraban localizados en la misma carpeta. ¿Qué ocurre si esto no es así? Lo normal es que, antes o después, nos aparezcan los citados errores con los enlaces y las imágenes. Para asegurarnos que un enlace funciona o que una imagen aparece en nuestra página Web, hemos de especificar la ruta de acceso al archivo. La ruta de acceso no es más que la estructura de carpetas (directorios) que hemos de seguir para llegar hasta el archivo que queremos incluir, ya directamente (imagen) o mediante un enlace. Para explicar de forma sencilla cómo funcionan las rutas vamos a suponer que estamos en la siguiente situación. Hemos creado una carpeta llamada “MisHTML” dentro de la carpeta “Mis Documentos”. Además, todas las imágenes con las que vamos a trabajar, están dentro de una carpeta que hemos creado dentro de “MisHTML” que hemos llamado “fotos”. Vamos a definir ahora que es una carpeta (o directorio) padre y una carpeta hijo (subdirectorio) Una carpeta padre es la carpeta que contiene a aquella en la que estamos trabajando. Así pues, la carpeta “Mis Documentos” es padre de nuestra carpeta “MisHTML”, al igual que lo es de otras carpetas (“Mis Imágenes”, “Mis vídeos”, etc.). Del mismo modo, la carpeta “MisHTML” es una carpeta padre de la carpeta “fotos”. Una carpeta hijo (o subdirectorio) es una carpeta que está incluida dentro de aquella con la que estamos trabajando. Así, “fotos” es carpeta hijo de “MisHTML” que, a su vez, es carpeta hijo de “Mis Documentos”. Una nota obvia pero importante: una carpeta puede tener muchos hijos (subcarpetas) pero sólo puede tener un padre. Bien, veamos ahora como hemos de utilizar las rutas para acceder a los documentos: En el caso en que estemos creando una página Web en “MisHTML” y queramos incluir en ella una imagen que se puede llamar paisaje1.jpg que se encuentre dentro de la carpeta hijo “fotos”, cambiaremos el valor del atributo src incluyendo el camino que hemos de seguir hasta llegar a ese archivo imagen, es decir, en lugar de escribir <IMG src=”paisaje1.jpg”>, deberemos poner: <IMG src=”fotos/paisaje1.jpg”> Si dentro de la carpeta “fotos” hubiésemos creado una carpeta hija llamada “paisajes”, dentro de la cual se encontrara nuestra imagen, deberíamos escribir: <IMG src=”fotos/paisajes/paisaje1.jpg”> Es decir, escribimos el nombre de las carpetas (separados por la barra “/”) en las que hay que ir entrando para llegar hasta el archivo imagen. Para los enlaces ocurre lo mismo. Imaginemos que creamos una carpeta hija dentro de “MisHTML” llamada “Gastronomía”. Creamos en ella una página Web llamada paella.html con la receta de la paella. Para establecer un enlace a este archivo desde otro que se encuentre en “MisHTML”, deberemos escribir la ruta: <A href=”Gastronomía/paella.html”>La paella</A> Si el archivo paella.html lo hemos creado dentro de una carpeta llamade “arroces” hija de la carpeta “Gastronomía”, para establecer el anterior enlace desde “MisHTML” deberemos escribir: <A href=”Gastronomía/arroces/paella.html”>La paella</A> Cuando queremos establecer un enlace a un archivo que se encuentra en el la carpeta padre debemos utilizar también la ruta adecuada. Por ejemplo, imaginemos que queremos insertar una imagen que se encuentra en “Mis Documentos” y que hemos llamado imagen1.jpg en un archivo que estamos creando en “MisHTML”. Hemos de indicar al explorador que debe buscar la imagen en le directorio (carpeta) padre del que nos encontramos. Esto se realiza mediante el símbolo “..”, es decir, escribiremos: <IMG src=”../imagen1.jpg”> Si, en lugar de encontrarse en “Mis Documentos”, el archivo imagen1.jpg se encuentra en un directorio hijo de “Mis Documentos” distinto a nuestro directorio de trabajo, hemos de indicárselo a continuación. Por ejemplo, si se encontrase dentro de “Mis Imágenes”, escribiríamos: <IMG src=”../Mis Imágenes/imagen1.jpg”> TERCERA PARTE: HTML AVANZADO 16- MULTIMEDIA CON HTML En la actualidad, existen herramientas para desarrollo multimedia de páginas Web (Flash, etc.) que consiguen resultados verdaderamente profesionales. Si bien los documentos HTML con características multimedia suelen implementarse con este tipo de herramientas, resulta interesante y, en cierto modo imprescindible, conocer cómo se realiza con HTML puro y duro. Por multimedia entendemos aquellos sistemas de comunicaciones que usan varios medios combinados para la difusión de la información. Estos medios pueden ser: hipertexto, imágenes, sonido, música, vídeo, etc. A continuación veremos los formatos de imagen, audio y vídeo utilizados más frecuentemente: Tipo Imagen Formato jpg gif bmp Sonido midi wav Real Audio au mp3 Vídeo avi mpeg Quick Times (MOV) Descripción Formato con compresión que permite buenas resoluciones. Utiliza como máximo 256 colores, idóneo para dibujos y animaciones. Imagen de mapa de bits, inconveniente de tamaño, pero óptimo para fotografía de alta definición. Formato de secuencia, dispone de canales para cada instrumento. Suelen crearse a partir de un sintetizador o un instrumento musical electrónico con salida MIDI Nativo de los SO Windows Utilizado por programas como Real Player, radio y emisiones diversas a través de Internet. Nativo de sistemas tipo Unix. Muy popular y utilizado por programas como WimAmp; se suele utilizar para distribuir música por la Red. Nativo de los SO Windows, también se conoce como Video for Windows. Formato estandarizado por la ISO y empleado en la distribuciópn de películas en CD, DVD, TV digital ... También conocido como QT, desarrollado por Apple para sus ordenadores Mac. Existen drivers para PC. REPRODUCCIÓN DE SONIDO En cuanto a la reproducción de sonidos en un navegador, podemos distinguir dos casos: 1. Fondos sonoros. 2. Sonidos activados por el usuario. Hasta ahora, habíamos visto cómo incluir color o imágenes en el fondo de pantalla. Vamos a ver ahora cómo podemos añadir un fondo musical a tus creaciones que haga la visita a tu página Web más agradable. Consejo: No conviene abusar de este recurso. Una página con fondo sonoro puede resultar cargante, e incluso irritante, si no se pone un poco de cuidado. Los fondos sonoros son considerados horteras por una buena parte de los usuarios de la Red. Si vas a utilizar un fondo sonoro en una página Web, procura que no sea excesivamente largo, ni repetitivo, sino más bien, como un elemento de entrada, un logotipo sonoro. El modo de implementar fondos depende del Navegador que estemos utilizando, aquí lo vamos a ver para el Internet Explorer. Fondos sonoros en Internet Explorer Internet Explorer utiliza la etiqueta <BGSOUND> para crear fondos sonoros, aunque, a partir de la versión 4.0 se reconoce también la etiqueta pareada <EMBED> ... </EMBED>, que se usa también en otros navegadores (Netscape) y tiende a convertirse en el estándar. La sintaxis básica de la etiqueta <BGSOUND> es la siguiente: <BGSOUND src=”nombredelfichero”> Donde nombredelfichero es el nombre (incluida la extensión) y la ruta completos del fichero de sonido a escuchar. El formato del fichero normalmente será MIDI (.mid), MP3 (.mp3) o WAVEFORM (.wav). Opcionalmente, la etiqueta <BGSOUND> admite el atributo loop que indica el número de veces que se desea repetir la pieza musical o el sonido. Puede tener un valor natural (entero positivo) o el valor infinite que repetirá el sonido mientras tengamos abierta la página Web. Fondo sonoro mixto Existe la posibilidad de combinar los dos tipos de etiquetas de modo que se pueda escuchar el fondo sonoro tanto si se utiliza Netscape, como si se utiliza Internet Explorer. Para ello, se puede hacer de la etiqueta pareada <NOEMBED> ... </NOMEBED>. Por ejemplo: <HTML> <HEAD> <TITLE> Ejemplo de fondo sonoro mixto </TITLE> </HEAD> <BODY> <H1> Fondo sonoro para Internet Explorer </H1> <EMBED src=”Blues.wav” height=60 width=135> <NOEMBED> <BGSOUND src=”Blues.wav” loop=infinite> </NOEMBED> </BODY> </HTML> Si este documento se visualiza con una versión anterior a la 4.0 de Internet Explorer, las etiquetas <EMBED>, <NOEMBED> y </NOEMBED> serán ignoradas y el fichero imagine.mp3 se podrá escuchar mediante el uso de <BGSOUND>. Para una versión posterior a la 4.0, la etiqueta <EMBED> será reconocida y todo aquello que se encuentre entre las etiquetas <NOEMBED> y </NOEMBED> se pasará por alto. Curiosamente, Internet Explorer 4.0 o superior mostrará una consola de sonido, como la de la figura. Sonidos activados por el usuario Para que el usuario pueda activar un sonido haciendo clic sobre un enlace, realizamos un enlace al archivo de sonido de la misma forma que hacíamos los enlaces a los archivos de imagen o de texto. Por ejemplo: <HTML> <HEAD> <TITLE> Sonido activado por enlace </TITLE> </HEAD> <BODY> <H1> Enlace a archivo de sonido </H1> <A href=”Imagine.mp3”>Escuchar Imagine</A> </BODY> </HTML> Al hacer clic sobre el enlace se comienza a reproducir el archivo: MARQUESINAS2 Las marquesinas nos permiten presentar texto en movimiento. Una marquesina no es otra cosa que una zona de pantalla que contiene texto, y este texto se desplaza de un lado a otro. Para definir marquesinas se utiliza la etiqueta pareada <MARQUEE> .... </MARQUEE>. La sintaxis básica de una marquesina es la siguiente: <MARQUEE> Texto que se desplaza </MARQUEE> 2 Las Marquesinas funcionan únicamente con Internet Explorer. En Netscape, el texto aparece fijo. La etiqueta <MARQUEE> admite los siguientes atributos: Atributo height, width align bgcolor behavior direction loop scrolldelay scrollmount Descripción Indican el tamaño de la marquesina, especificando la altura y la anchura en número de píxeles o bien en porcentaje de pantalla Indica la alineación del texto que rodea a la marquesina. Modifica el color de fondo de la marquesina. El color debe especificarse mediante el código #RRGGBB Especifica el comportamiento del texto de la marquesina, es decir, de qué formase va a desplazar. Sirve para especificar la dirección de desplazamiento del texto de la marquesina Indica el número de veces que el texto se desplazará de un lado a otro. El valor predeterminado es infinito Indica el tiempo que el texto emplea en desplazarse en cada movimiento, expresado en milisegundos Indica el número de píxeles recorridos por el texto en cada movimiento. Un valor de 20 indicará que el texto de la marquesina se irá desplazando de 20 en 20 píxeles hasta llegar al otro extremo de la marquesina. Valores Valor numérico o porcentaje top, bottom, middle Cualquier valor del código alternate, scroll, slide left, right Valor numérico, infinito Valor numérico entero Valor numérico entero VÍDEO EN INTERNET EXPLORER La inclusión de vídeo en Internet Explorer puede hacerse de forma sencilla: basta con utilizar la etiqueta <IMG> que ya conocemos. Lo único que cambia son los atributos que acompañan a dicha etiqueta. En lugar del atributo src, el atributo obligatorio ahora será dynsrc. Por ejemplo: <IMG dynsrc=”FichVideo”> Además, tenemos otros atributos opcionales: Loop Height, Width Controls: Muestra la consola de vídeo con los controles para parar, pausar, rebobinar, etc. Start: Puede adoptar dos valores: fileopen indica que el fichero de video comenzará a ejecutarse al cargarse la página Web donde se halle. mouseover indica que el fichero de vídeo se ejecutará cuando el usuario sitúe el puntero del ratón sobre el cuadro de vídeo. Por ejemplo: <HTML> <HEAD> <TITLE> Vídeo en HTML </TITLE> </HEAD> <BODY> <img dynsrc="PHTO0023.avi" start=mouseover width=240 height=200> </BODY> </HTML> Cuando cargamos la página Web, obtenemos: Al pasar el ratón sobre el cuadro de vídeo: 17- MARCOS Los marcos permiten dividir una página Web en varias páginas, de forma que cada una puede mostrar una página HTML distinta. Utilizaremos principalmente los marcos para ver el índice de un documento y desde él, mediante enlaces, cargar las diferentes secciones de ese índice en la parte principal de la ventana. Es decir, lo que realmente estamos haciendo es crear, no una página Web, sino un sitio Web. Un sitio Web es una colección de páginas que tratan sobre un tema común unidas entre sí mediante enlaces, un índice, etc. En la actualidad, casi todas las páginas que visitamos en Internet, son sitios Web más que páginas, ya que esta estructura de sitio Web permite presentar la información de una forma más ordenada que si ponemos todo en la misma página. Para crear los marcos, hemos de cambiar completamente la estructura general del documento HTML. La etiqueta <BODY> ... </BODY> desaparece y es sustituida por la etiqueta <FRAMESET> ... </FRAMESET>. La etiqueta <FRAMESET> admite dos atributos. El atributo rows especifica el número de marcos fila en los que se dividirá la página. El atributo cols especifica el número de marcos columna. Los valores que pueden tomar son número enteros, tantos por ciento y el valor “*”, que especifica que el marco sea tan grande como la ventana. Por ejemplo: <HTML> <HEAD> <TITLE> Marcos en HTML </TITLE> </HEAD> <FRAMESET cols="25%,75%"> <FRAME src="win.gif"> <FRAME src="linuxorg.gif"> </FRAMESET> </HTML> Como vemos, hemos utilizado, dentro de la etiqueta <FRAMESET>, una nueva etiqueta denominada <FRAME>. Esta etiqueta nos permite especificar el contenido de cada uno de los marcos. Admite los siguientes atributos: Atributo src name marginwidth marginheight scrolling noresize Descripción Nombre (y ruta si es necesario) del documento que se quiere colocar dentro del marco. Asigna un nombre al marco de forma que pueda ser el destino de enlaces situados en otros marcos. Especifica el margen lateral en píxeles. Especifica el margen superior e inferior en píxeles. Si un documento es más largo que el marco, aparecen unas barras de desplazamiento. Este atributo permite desactivar o automatizar su aparición. Evita que el tamaño de los marcos sea alterado Los marcos pueden anidarse, es decir, podemos definir, por ejemplo, unos marcos fila dentro de un marco columna y viceversa. No obstante, debe tenerse mucho cuidado con esto ya que puede complicar mucho la estructura de la página y dificultar su lectura. Ejemplo: <HTML> <HEAD> <TITLE> Marcos en HTML </TITLE> </HEAD> <FRAMESET cols="50%,50%"> <FRAMESET rows="50%,50%"> <FRAME src="linuxorg.gif"> <FRAME src="linuxorg.gif"> </FRAMESET> <FRAMESET rows="33%,33%,33%"> <FRAME src="win.gif"> <FRAME src="win.gif"> <FRAME src="win.gif"> </FRAMESET> </FRAMESET> </HTML> En el código anterior, en primer lugar, hemos dividido la página en dos columnas, cada una de las cuales ocupa el 50% de la misma. A continuación, hemos dividido la primera de las columnas en dos marcos fila, en cada uno de los cuales hemos insertado el archivo de imagen linuxorg.gif. La segunda columna, por el contrario, la hemos dividido en 3 marcos fila, cada uno de los cuales ocupa el 33% de la página y muestra el archivo de imagen win.gif. El resultado se muestra en la siguiente figura: Vamos a ver ahora cómo podemos utilizar los marcos para crear una página en la que tengamos un índice con el cual podamos cargar diferentes secciones (diferentes páginas) en un marco principal. Es decir, vamos a crear menús que actualizan un marco distinto al que se pulsa. Veámoslo con un ejemplo: En los ejemplos anteriores, los archivos que hemos cargado en los diferente marcos eran simplemente archivos de imagen que incluíamos dentro de la etiqueta <FRAME>, mediante el atributo src. Ahora vamos a crear una página con dos marcos en cada uno de los cuales se cargará una página Web: en la primera, que ocupará un 25% de la pantalla, aparecerá un menú con enlaces a los diferentes apartados; en la segunda página aparecerá una página principal y, al hacer clic sobre los enlaces del menú, las diferentes secciones se cargarán en este segundo marco. Por supuesto, para que las páginas se carguen, hay que crearlas previamente. Lo primero que haremos es crear el archivo indice.html que contiene los enlaces a los diferentes apartados. Es el siguiente: <html> <body bgcolor="#888899" link="#886600" vlink="#90FF00"> <br> <br> <br><br> <b> <font size=3 face="Chiller" color="#0077CC"> <a href="portada.html" target="principal">PORTADA</a><br><br> <a href="historia.html" target="principal">HISTORIA</a><br><br> <a href="museos.html" target="principal">MUSEOS</a><br><br> <a href="monumentos.html" target="principal">MONUMENTOS Y EDIFICIOS </a><br><br> <a href="personajes.html" target="principal">PERSONAJES ILUSTRES</a><br><br> <a href="gastronomia.html" target="principal">GASTRONOMIA</a><br><br> <a href="fotos.html" target="principal">&Aacute;LBUM DE FOTOS</a><br><br> </font> </b> </body> </html> De aquí, todo nos es conocido salvo el atributo target que explicaremos un poco más adelante. Fijémonos que para cada sección hemos puesto un enlace a un archivo que contendrá la información referente a ese apartado. Todos estos archivos (portada.html, historia.html, museos.html, etc.) hemos de crearlos independientemente. Veamos, por ejemplo, el código del fichero portada.html que será el que nos sirva de página principal: <html> <body bgcolor="#888899" text="white"> <br> <center><font face="Century Gothic" size=30>BIENVENIDOS A LA WEB DE VALENCIA</font> <br> <font face="Informal Roman" size=5>Por: Roberto Medrano San&iacute;a</font><br><br> <IMG SRC="../imagenes/hemisfericmuseo.jpg" width="60%" alt="ArtesyCiencias"></center> <br> <font face="Informal Roman" size=4> Bienvenidos! En esta p&aacute;gina intentaremos explicar mediante fotos y textos c&oacute;mo es y c&oacute;mo se vive en nuestra ciudad: su historia, sus monumentos m&aacute;s importantes, personajes importantes que nacieron o vivieron en ella y mucho m&aacute;s.... Gracias por su visita! </body> </html> Antes de pasar a la definición de los marcos veamos estas dos páginas por separado: Ahora, una vez creados los archivos de todos los apartados, hemos de crear el fichero que define los marcos, que llamamos marcos.html: <html> <head> <title>Valencia</title> </head> <FRAMESET COLS="25%,75%" border=0> <FRAME SRC="indice.html" scrolling=no noresize> <FRAME SRC="portada.html" NAME="principal" marginwidth=2 border=0 noresize> </FRAMESET> </html> Si visualizamos el archivo marcos.html obtenemos lo siguiente: Fijémonos en las novedades del código marcos.html: Hemos utilizado el atributo border, que ya conocíamos de las tablas, asignándole el valor 0 para que nuestra página tenga aspecto de continuidad, es decir, que no se muestren las líneas de separación entre los marcos. Esto da un aspecto más profesional a nuestra página. En la etiqueta <FRAME> que inserta el archivo del índice en el primer marco, hemos incluido los atributos scrolling=no y noresize, para evitar que aparezca la barra de desplazamiento cuando la ventana del navegador es demasiado pequeña para ver todo el índice (así obligamos al usuario a mantener un tamaño mínimo de ventana) e impedir que el tamaño del texto se haga más pequeño al disminuir la ventana. En la etiqueta <FRAME> que inserta el archivo de la portada en el segundo marco, hemos incluido el atributo marginwidth=2 que deja 2 píxeles de margen entre el límite del marco y el texto, evitando así que este se pueda juntar con el del primer marco. Además, en la etiqueta <FRAME> que inserta el archivo de la portada en el segundo marco, hemos incluido el atributo NAME=”principal”. Es decir, al segundo marco le hemos puesto un nombre que nos permite identificarlo. Esto es lo que permite realizar un enlace desde el archivo indice.html que se encuentra en el primer marco, de forma que podemos cargar cualquiera de los archivos de las secciones en este segundo marco. Esto lo hacíamos mediante el atributo target. Si recordamos uno de los enlaces del índice: <a href="historia.html" target="principal">HISTORIA</a> podemos observar que tenemos un enlace al apartado de Historia, que se cargará en el marco llamado principal (el segundo marco) cuando hagamos un clic sobre la palabra HISTORIA del primer marco. Veamos la página que aparece al cliquear sobre HISTORIA. Como vemos, en el segundo marco, aparece el nuevo archivo mientras que el índice se mantiene en el primero, lo cual nos permite seguir navegando por nuestro sitio Web con comodidad. La palabra HISTORIA en color distinto nos indica el apartado en que nos encontramos: 18- IMÁGENES SENSIBLES (MAPAS DE IMÁGENES) Las imágenes sensibles son imágenes que contienen zonas activas que actúan como enlaces, es decir, en función de la zona de la imagen en que se pinche, se activa un enlace a un documento u otro. Para crear un mapa de imagen, necesitamos una imagen (en el ejemplo que vamos a utilizar es la imagen mapa_sensible.bmp) sobre la que definiremos un mapa mediante el uso de la etiqueta pareada <MAP> ... </MAP>. Esta etiqueta, contiene como único atributo name=”nombre”, donde “nombre” indica el nombre del mapa que estamos creando. Cada una de las zonas activas de la imagen se definen entre las etiquetas <MAP> y </MAP> mediante el uso de la etiqueta sin parear <AREA>, cuyos atributos son: Atributo href alt shape coords Descripción Especifica el archivo que se cargará al pulsar sobre esa zona activa. Asigna un texto descriptivo relacionado con la zona Especifica la forma que tendra la zona activa, puede ser circle, rect, o poly Especifica las coordenadas de la zona. Su formato depende del valor de shape Según el valor del atributo shape, las coordenadas del atributo coords, se especifican como podemos ver en la tabla siguiente: shape circle rect poly coords x, y, R; donde (x, y) son las coordenadas del centro del círculo y R su radio x1, y1, x2, y2; (x1, y1) son las coordenadas del vértice superior izquierdo y (x2, y2) las coordenadas del vértice inferior derecho. X1, y1, x2, y2, .... , xn, yn; donde los pares de coordenadas (x, y) son las coordenadas de los vértices del polígono. Las coordenadas del último punto (xn, yn) deben ser las mismas que las del primero (x1, y1) para cerrar la figura. Para aclarar todo esto, es mejor verlo con un ejemplo: <HTML> <HEAD> <TITLE> Imágenes Sensibles en HTML </TITLE> </HEAD> <BODY> <MAP NAME="mapa1"> <AREA href="ing.html" ALT="square" SHAPE="rect" COORDS="30,39,128,96"> <AREA href="esp.html" ALT="círculo" SHAPE="circle" COORDS="206,71,42"> <AREA href="fra.html" ALT="triangle" SHAPE="poly" COORDS="138,126,192,203,74,202,138,126"> </MAP> <CENTER> <H1> Ejemplo de Enlaces con Mapa Sensible </H1> <IMG src="mapa_sensible.bmp" usemap="#mapa1" border=0> </CENTER> </BODY> </HTML> Entre las etiquetas <MAP> y </MAP> es dónde definimos las zonas activas y los archivos a que se cargarán al activar el enlace, creando el mapa que llamamos mapa1. Cuando insertamos la imagen, el uso del atributo usemap nos permite hacer actuar el mapa1 sobre la imagen que estamos insertando. Veamos el resultado: En el ejemplo que hemos puesto, la imagen elegida sobre la que actúa el mapa, mapa_sensible.bmp, es una imagen que hemos creado a partir de las imágenes de las banderas de las cuales disponíamos previamente (aunque hemos recortado la imagen de la bandera de España y de Francia). Podríamos haber creado los enlaces de una forma más sencilla, insertando las banderas en una tabla como imágenes-enlace, ahorrándonos así la complicación del mapa sensible: <HTML> <HEAD> <TITLE> Imágenes Sensibles en HTML </TITLE> </HEAD> <BODY> <CENTER> <H1> Ejemplo de Enlaces con Tabla </H1> </CENTER> <TABLE align=center> <TR> <TD><A href="inga.html"><IMG src="bandera_Inglaterra.gif" width=100 ALT="square"></A> <TD><A href="espa.html"><IMG src="bandera_espana.jpg" width=100 ALT="square"></A> <TR> <TD colspan=2 align=center><A href="fraa.html"><IMG src="francia2.gif"width=100 ALT="square"> </A> </TABLE> </BODY> </HTML> ¿Qué sentido tiene entonces utilizar un mapa sensible? La respuesta es que con una mapa de imagen podemos crear todos los enlaces con una sola imagen, mientras que si lo realizamos con enlaces-imagen, necesitamos una imagen para cada enlace, con el consiguiente consumo de memoria. En segundo lugar, con un mapa de imagen, podemos utilizar cualquier zona de cualquier imagen como zona activa con la forma que queramos darle. Sólo necesitamos paciencia. Por último, en algunos casos, no es posible simular el mapa de imagen con una tabla de enlaces. Esto ocurre cuando las distintas zonas que queremos activar están contenidas en una imagen global y, además tienen formas geométricas complicadas. Podemos ilustrar todo esto mediante el siguiente ejemplo3: <HTML> <body bgcolor="#000000" marginheight="8"> text="#733A1A" leftmargin="8" topmargin="8" marginwidth="8" <FONT size=4 color=white face="verdana"> Seleccione su idioma, select its language, choisissez sa langue. </FONT><br><br> <center> <MAP name="zona3paises"> <AREA href="fra.html" alt="Francia" shape="polygon" coords="106,162,103,166,103,176,100,178,91,178,91,183,87,187,80,186,75,181,72,184,75,191,71,19 6,64,197,58,192,57,192,55,193,45,195,46,198,50,200,51,202,54,205,69,214,71,216,72,223,74,224,79 ,229,80,236,79,239,77,241,77,247,76,248,76,260,74,270,74,264,78,267,83,270,88,272,95,270,104,27 3,115,275,116,273,116,266,121,263,140,263,147,266,154,259,153,253,152,251,150,244,148,244,148 ,241,151,241,151,227,148,226,146,228,143,229,144,224,151,215,151,211,157,211,159,199,159,193, 153,189,150,188,148,188,146,186,144,185,143,184,139,182,139,180,134,180,132,178,127,177,127,1 72,123,170,118,169,114,167,107,163"> <AREA href="ing.html" alt="Inglaterra" shape="polygon" coords="61,44,55,44,50,46,42,46,40,60,32,64,29,69,35,73,31,77,36,81,31,89,37,87,40,89,36,96,38,9 7,43,94,46,96,43,104,47,108,56,109,59,114,62,116,63,130,58,130,46,130,52,136,52,143,40,151,44,5 3,49,152,55,156,58,156,62,164,65,154,63,159,58,162,50,159,48,165,38,175,43,175,48,172,51,172,54 ,173,57,168,64,166,69,169,76,166,87,166,99,159,94,156,104,146,103,139,96,135,92,137,89,165,91,1 30,87,123,88,120,66,89,64,88,59,87,59,84,68,75,73,60,56,60,53,61,54,58,51,56,51,53,55,53,62,45"> <AREA href="esp.html" alt="España" shape="polygon" coords="73,264,65,264,63,264,56,264,55,265,49,265,47,264,41,261,24,260,27,260,16,262,15,265,49, 265,47,267,8,268,10,176,10,280,15,279,16,282,24,281,28,280,30,281,30,285,32,284,33,287,26,294,2 8,300,26,302,27,305,27,306,26,308,21,308,26,315,23,322,27,326,21,333,23,336,27,335,31,336,37,34 6,39,346,43,343,47,342,55,340,68,339,76,332,80,331,81,326,86,320,85,309,88,305,97,292,106,288,1 17,281,117,274,112,276,107,276,104,274,101,274,99,271,95,270,93,272,87,271,85,270,74,264"> <area shape="default" nohref> </map> <CENTER> <IMG src="mapa.jpg" usemap="#zona3paises"> </CENTER> </BODY> </HTML> 3 Este ejemplo, salvo algunas modificaciones para adaptarlo al texto, fue realizado por Javier Ibañez Cruz, 3º de E.S.O. del curso 2003-2004. 19- FORMULARIOS En el lenguaje HTML se define un mecanismo que permite un intercambio de información directo entre el cliente y el servidor, son los conocidos formularios o FORMS. Mediante estos formularios, el usuario puede introducir información seleccionando elementos, activando botones, escogiendo elementos de menús o introduciendo texto en cuadros de diálogo. Los formularios se crean mediante la etiquetas <FORM> ... </FORM>, siendo necesario introducir atributos especiales y otros códigos en el cuerpo del formulario. Los formularios se pueden dividir en dos tipos, según el método de procesamiento de la información recibida. Formularios dirigidos a una persona: en este tipo de formularios, la información es devuelta encapsulada en un mensaje de correo electrónico que se envía a una dirección personal, normalmente la del creador de la página Web. Formularios dirigidos a un servidor: estos formularios se caracterizan porque la información es retornada a un programa espacial, que se encuentra en el servidor de procedencia del documento HTML, y que procesa los datos del formulario. en este caso, el formulario ejecuta un programa o un script mediante el uso de CGI (Common Gateway Interface), el cual procesa el formulario y realiza la acción oportuna. Es el tipo de formulario que encontramos en las páginas de compra/venta electrónica. Nosotros nos centraremos en el primer tipo de formularios, ya que para el segundo tipo, es necesaria la creación del programa CGI, lo cual está fuera del objetivo de este curso. Los atributos de la etiqueta <FORM> son: action: especifica la ruta de acceso al programa CGI que debe procesar los datos que se envían o, si se envían por correo electrónico, se puede indicar con mailto:dirección de correo. method: especifica el método que se usa para enviar la información del formulario al programa CGI. Los métodos pueden ser GET y POST. enctype: este último atributo suele tomar siempre el valor TEXT/PLAIN, que indica el tipo de información que se va a recibir. En la mayoría de los casos, un fichero de texto simple en formato ASCII. Elementos de un formulario Un formulario puede constar de uno o varios elementos, tal y como se muestra en la siguiente tabla: Elemento Cuadro de texto Área de texto Lista de selección Descripción Cuadro con espacio para una línea de texto donde se pueden escribir cadenas de texto, con o sin desplazamiento lateral y/o cifrado mediante asteriscos (*). Es muy similar a los cuadros de texto, pero para la inserción de múltiples líneas. Se presentan diversas opciones en una lista permitiendo la selección de una o varias de ellas. Casilla de verificación Botón de radio Botón de envío Botón de borrado Permite la confirmación, mediante clic con el ratón sobre ella. Si existe más de una en el formulario, permite la selección de más de una simultáneamente. No son mutuamente excluyentes. Similar a las casillas de verificación, pero sólo permite la selección de una de ellas entre todas las demás. Son mutuamente excluyentes. Pulsando este botón se envían los datos del formulario al servidor o a la persona señalada. Con este botón se puede realizar la limpieza del formulario, borrando el contenido de cada elemento, para volver a introducir nuevos datos. La etiqueta <INPUT> sirve para insertar cuadros de texto, casillas de verificación, botones de radio, botones de envío y de borrado, mientras que las áreas de texto se insertan mediante la etiqueta pareada <TEXTAREA> ... </TEXTAREA> y las listas de selección mediante <SELECT> ... </SELECT>. La etiqueta <INPUT> puede llevar los siguientes atributos: Atributo type name value size maxlength checked src align text password checkbox radio submit reset file hidden image Descripción Selecciona el tipo de campo de entrada. Es obligatorio. Define el nombre del identificador cuyo contenido será enviado. Es obligatorio. Inicializa el valor del campo. Especifica el tamaño visible del texto. Especifica el número máximo de caracteres en un campo de entrada de tipo texto. Inicializa campos de entrada de tipo checkbox o radio buttons a su estado. Especifica el URL para la imagen a usar en el caso de un botón gráfico de envio de la información. Especifica el alineamiento , puede ser top, middle, bottom (por defecto), left o right. Valor por defecto. Muestra una línea de texto. Igual que text excepto que los caracteres introducidos son mostrados como *. Casilla de verificación con dos estados (marcada o no). Es obligatorio el uso de VALUE para especificar el nombre de la variable y el valor que toma esta. Elementos que operan conjuntamente, sólo puede estar activado uno de ellos. es obligatorio del uso de VALUE. Se puede indicar que un valor es por defecto utilizando el atributo checked de la etiqueta INPUT. Define un botón que inicializa los datos al programa CGI. Debe existir siempre uno en cualquier formulario. Define un botón que envía los datos del formulario al valor por defecto. Define un método para poder escoger un fichero cuyo contenido será enviado como los datos proporcionados por el formulario. No son visibles y proporcionan un método de enviar información sobre el estado, etc., al programa del CGI. Permite definir un botón gráfico. Vamos a ver como funcionan estos elementos más claramente utilizando el siguiente ejemplo: <HEAD> <TITLE> Formularios en HTML </TITLE> </HEAD> <BODY bgcolor="silver"> <CENTER> <H1> FICHA DEL ALUMNO </H1> </CENTER> <FORM method="post" action="mailto:[email protected]" enctype="TEXT/PLAIN"> Nombre: <INPUT type="text" name="nombre" size="14" maxlength="25"><BR> Primer apellido: <INPUT type="text" name="apellido1" size="14" maxlength="25"><BR> Segundo apellido: <INPUT type="text" name="apellido2" size="14" maxlength="25"><BR><BR> Curso:<BR> Primero<INPUT type="radio" name="curso" value="primero" CHECKED> Segundo<INPUT type="radio" name="curso" value="segundo"> Tercero<INPUT type="radio" name="curso" value="tercero"> Cuarto<INPUT type="radio" name="curso" value="cuerto"><BR><BR> Asignatura preferida:<BR> <INPUT type="checkbox" name="asignatura" <INPUT type="checkbox" name="asignatura" <INPUT type="checkbox" name="asignatura" <INPUT type="checkbox" name="asignatura" <INPUT type="checkbox" name="asignatura" <INPUT type="checkbox" name="asignatura" <INPUT type="checkbox" name="asignatura" <INPUT type="checkbox" name="asignatura" <INPUT type="checkbox" name="asignatura" <INPUT type="checkbox" name="asignatura" value="informatica" CHECKED>Informática value="tecno">Tecnología value="mate">Matemáticas value="caste">Castellano<BR> value="reli">Religión value="edufis">E. Física value="natu">Ciencias Naturales value="valen">Valenciano<BR> value="ingles">Inglés value="sociales">Ciencias Sociales<BR><BR> <CENTER> <INPUT type="submit" value="Enviar"> <INPUT type="reset" value="Borrar"> </CENTER> </FORM> </BODY> </HTML> El formulario que hemos creado es el siguiente: Hemos utilizado casillas de verificación para la selección de la asignatura preferida. En general, si las opciones son muchas, es preferible utilizar en su lugar las listas de selección, que se definen mediante la etiqueta <SELECT> ... </SELECT>. Esto es importante, sobre todo, cuando podemos elegir varias opciones. La etiqueta <SELECT> tiene los siguientes atributos: name. define el nombre del identificador cuyo contenido será enviado. Es obligatorio. size: define el número de elementos del menú desplegable que serán visibles al mismo tiempo. multiple: permite que se seleccionen más de un elemento del menú. Cada uno de los elementos de la lista de selección son especificados por la etiqueta pareada <OPTION> ... </OPTION>, que posee dos atributos: value: valor de la opción que se enviará si es seleccionado. selected: indica que es el valor seleccionado por defecto. Pueden existir varios si la opción multiple ha sido seleccionada en el menú. Veamos el mismo ejemplo de antes utilizando una lista de selección: <HTML> <HEAD> <TITLE> Formularios en HTML </TITLE> </HEAD> <BODY bgcolor="silver"> <CENTER> <H1> FICHA DEL ALUMNO</H1> </CENTER> <FORM method="post" action="mailto:[email protected]" enctype="TEXT/PLAIN"> Nombre: <INPUT type="text" name="nombre" size="14" maxlength="25"><BR> Primer apellido: <INPUT type="text" name="apellido1" size="14" maxlength="25"><BR> Segundo apellido: <INPUT type="text" name="apellido2" size="14" maxlength="25"><BR><BR> Curso:<BR> Primero<INPUT type="radio" name="curso" value="primero" CHECKED> Segundo<INPUT type="radio" name="curso" value="segundo"> Tercero<INPUT type="radio" name="curso" value="tercero"> Cuarto<INPUT type="radio" name="curso" value="cuerto"><BR><BR> Asignatura preferida:<BR> <SELECT NAME="asignatura" SIZE="1"> <OPTION value="informatica">Informática</OPTION> <OPTION value="tecno">Tecnología</OPTION> <OPTION value="mate">Matemáticas</OPTION> <OPTION value="caste">Castellano</OPTION> <OPTION value="reli">Religión</OPTION> <OPTION value="edufis">E. Física</OPTION> <OPTION value="natu">Ciencias Naturales</OPTION> <OPTION value="valen">Valenciano</OPTION> <OPTION value="ingles">Inglés</OPTION> <OPTION value="sociales">Ciencias Sociales</OPTION> </SELECT> <BR><BR> <CENTER> <INPUT type="submit" value="Enviar"> <INPUT type="reset" value="Borrar"> </CENTER> </FORM> </BODY> </HTML> Si queremos permitir que se seleccionen varias opciones, hemos de utilizar el atributo multiple de la etiqueta <SELECT>, es decir, si en el código anterior cambiamos la línea que contiene esta etiqueta por <SELECT NAME="asignatura" SIZE="6" MULTIPLE> obtenemos una lista de selección múltiple como la siguiente: En Internet Explorer, para seleccionar las diferentes opciones, hemos de mantener la tecla CONTROL presionada y pinchar en cada una de las opciones deseadas. Por último vamos a ver las áreas de texto, que es similar a un cuadro de texto pero con la posibilidad de escribir más de una línea. Las áreas de texto se definen utilizando la etiqueta pareada <TEXTAREA> ... </TEXTAREA>. Los atributos que usa esta etiqueta son distintos a los del resto de los elementos del formulario. Lo mejor es verlo con un ejemplo: añadimos el siguiente trozo de código al formulario anterior, después de la lista de selección: Comentarios: <TEXTAREA name="comenta" rows="5" cols="30"> </TEXTAREA> <BR><BR> Información recibida de un formulario Todavía no sabemos cómo se muestra la información cuando el usuario pulsa el botón de envío y lo recibimos en nuestra cuenta de correo electrónico, como si se tratase de un mensaje más. Presentación de formularios Los formularios que hemos ido creando hasta ahora son más o menos complejos, pero carecen de una presentación “profesional”. La mejor forma de presentar al usuario un formulario de modo que tenga un aspecto más elaborado es mediante la utilización de tablas. Este aspecto lo trataremos más adelante, pero veamos ahora un ejemplo: 20- DHTML Esta sección abandona lo que es propiamente el lenguaje HTML para ocuparse de una variante del mismo denominada DHTML (Dynamic Hypertext Markup Language). Existen textos completamente dedicados a esta variante del HTML así que no es posible entrar con detalle en las características del mismo en unas pocas páginas, de modo que sólo veremos los aspectos más generales para hacernos una idea de qué se trata y poder realizar algunas acciones con el mismo. 21- TRUCOS Y COMENTARIOS El principal consejo que se puede dar a un creador de páginas Web es que pase muchas horas navegando por Internet. Hay miles de millones de páginas Web en las que los autores combinan y recombinan las etiquetas de HTML para crear diferentes estilos, efectos, aspectos, etc. Lo mejor que puede hacer alguien que pretenda convertirse en un diseñador experto es visitar las páginas más relacionadas con los temas que le interesen y consultar los códigos (cuando son públicos) para ir aprendiendo los diferentes trucos que darán un aspecto más profesional a sus creaciones. Para ir abriendo boca, vamos a incluir a continuación una serie de trucos generales que nos permitan modificar el aspecto de nuestras páginas: Columnas En ocasiones nos interesará disponer el texto y las imágenes de nuestra página Web en forma de columnas, ya sea por el tipo de documento que estamos creando (revista, periódico electrónico) o, simplemente, por una cuestión de estilo. Aunque Netscape admite actualmente la etiqueta <MULTICOL>, si queremos que nuestro página se vea igual en otros navegadores debemos emplear otra forma de crear las columnas. La forma más sencilla de crear columnas es mediante el uso de tablas con una fila y varias columnas. Encabezamientos laterales Formularios con tablas anidadas Inclusión de guías Enlaces y ventanas Imágenes transparentes (¿?) 22- ALGNUOS TRUCOS JAVASCRIPT Alertas (Pop up windows) Redireccionamiento automático Scroll automático Botones Interactivos Efectos de ratón