Informe Multimedia by sebastian andres

CONCEPTOS BÁSICOS World Wide Web (WWW): Digamos, simplemente, que es un sistema de información, el sistema de información propio de Internet. Sus características son: Información por hipertexto: Diversos elementos (texto o imágenes) de la información que se nos muestra en la pantalla están vinculados con otras informaciones que pueden ser de otras fuentes. Para mostrar en pantalla esta otra información bastará con hacer clic sobre ellos. Gráfico: En la pantalla aparece simultáneamente texto, imágenes e incluso sonidos. Global: Se puede acceder a él desde cualquier tipo de plataforma, usando cualquier navegador y desde cualquier parte del mundo. Pública: Toda su información está distribuida en miles de ordenadores que ofrecen su espacio para almacenarla. Toda esta información es pública y toda puede ser obtenida por el usuario. Dinámica: La información, aunque esta almacenada, puede ser actualizada por el que la publico sin que el usuario deba actualizar su soporte técnico. Independiente: Dada la inmensa cantidad de fuentes, es independiente y libre. Navegador: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse con un servidor y comprender el lenguaje de todas las herramientas que manejan la información de Web. Puede decirse que cada casa de software podría tener su navegador propio, aunque los más populares sean Netscape e Internet Explorer. Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador. HTTP: Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los servidores de World Wde Web utilizan para mandar documentos HTML a través de Internet. URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la dirección que localiza una información dentro de Internet. HTML: De momento, le basta saber que estas siglas se corresponden con la definición “Lenguaje para marcado de hipertexto”. Más claro aún, se trata de un lenguaje para estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en tags (instrucciones que le dicen al texto como deben mostrarse) y atributos (parámetros que dan valor al tag). JAVASCRIPT: Se trata de un lenguaje de tipo script compacto, basado en objetos y guiado por eventos diseñado específicamente para el desarrollo de aplicaciones cliente-servidor dentro del ámbito de Internet. DNS (Domain Name System ): Es una base de datos distribuida, con información que se usa para traducir los nombres de dominio, fáciles de recordar y usar por las personas, en números de protocolo de Internet (IP) que es la forma en la que las máquinas pueden encontrarse en Internet. W3C (Consorcio World Wide Web ): Es un consorcio internacional donde las organizaciones miembro, personal a tiempo completo y el público en general, trabajan conjuntamente para desarrollar

estándares Web. La misión del W3C es: Guiar la Web hacia su máximo potencial a través del desarrollo de protocolos y pautas que aseguren el crecimiento futuro de la Web. ASP: Es una tecnología desarrollada por MS para crear páginas web de contenido dinámico apoyándose en scripts ejecutados en el servidor. Básicamente una página ASP es una mezcla entre una página HTML y un programa que da como resultado una página HTML que es enviada al cliente (navegador).

EL LENGUAJE HTML Como ya se ha dicho, este lenguaje estructura documentos. La mayoría de los documentos tienen estructuras comunes (títulos, párrafos, listas...) que van a ser definidas por este lenguaje mediante tags. Cualquier cosa que no sea una tag es parte del documento mismo. Este lenguaje no describe la apariencia del diseño de un documento sino que ofrece a cada plataforma que le de formato según su capacidad y la de su navegador (tamaño de la pantalla, fuentes que tiene instaladas...). Por ello y para no frustrarnos, no debemos diseñar los documentos basándonos en como lucen en nuestro navegador sino que debemos centrarnos en proporcionar un contenido claro y bien estructurado que resulte fácil de leer y entender. No se desespere por lo que acaba de leer. HTML tiene dos ventajas que lo hacen prácticamente imprescindibles a la hora de diseñar una presentación web: Su compatibilidad y su facilidad de aprendizaje debido al reducido número de tags que usa. Básicamente, los documentos escritos en HTML constan del texto mismo del documento y las tags que pueden llevar atributos. Esto llevado a la práctica, vendría a ser: <tag> texto afectado </tag> La tag del principio activa la orden y la última (que será la del principio precedida del signo /) la desactiva. No todas las tags tienen principio y final pero esto lo veremos más adelante.

DOCUMENTO HTML <HTML> <HEAD> <TITLE> <BODY> Estructura básica de un documento HTML: Cabecera y cuerpo del documento Tres son las tags que describen la estructura general de un documento y dan una información sencilla sobre él. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML. 1.<HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje. 2.<HEAD>: Especifica el prólogo del resto del archivo. Son pocas las tags que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras tags dentro de él. En head no hay que colocar nada del texto del documento.

3.<BODY>: Encierra el resto del documento, el contenido. <HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> </HEAD> <BODY> Hola mundo </BODY> </HTML>

PRIMEROS PASOS <H1> <P> <BR> Tres son la tags que describen la estructura general de un documento y dan una información sencilla sobre él. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML. 1.<H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se pueden definir seis niveles de titulares, el texto que deseamos que sea un titular se pone entre las tags <H1> Titular </H1>. Se definen mediante las tags <H1>.....</H1> hasta <H6>.....</H6> 2.<P>: Párrafos. En principio, sin entrar en detalles de alineación u otras características, digamos que se definen por las tags <P>.....<P>. Esta tag, en un principio, se diseñó para saltar de párrafo por lo que puede ir sola “<P>” al final de un texto indicando que a continuación se quiere una línea en blanco aunque le recomendamos que se acostumbre a utilizarla abriéndola y cerrándola. 3.<BR>: Saltos de línea. Esta tag sirve para realizar un salto de linea, puede poner tantas como desee y realizará un salto de línea por cada una de ellas. 4.: Comentarios. Son directivas que nunca se mostrarán a través del navegador y que le servirán para recordatorios en futuras revisiones del documento. Bien, recuperemos nuestro ejemplo y agreguemos nuestros nuevos conocimientos. <HTML> <HEAD> <TITLE>Ejemplo 2</TITLE> </HEAD> <BODY> <H1>Mi primera página</H1>  <P>Hola mundo, esta es un página con titular, que tiene también un párrafo y unos cuantos saltos de línea.</P> Uno<br> Dos<br> Tres<br> </BODY> </HTML>

CREACIÓN DE ENLACES <A> Lo característico del lenguaje HTML es el poder generar vínculos de hipertexto para enlazar con ellos todos sus documentos en web. Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su dirección URL) y el texto que servirá de punto de activación del otro documento. Este segundo elemento será el que veamos en pantalla y que se servirá del primero para saltar de documento. Los enlaces se generan mediante la tag <A>.....</A> y, a diferencia de los vistos anteriormente, llevará siempre dentro de la tag un atributo ya sea <A HREF=””> o <A NAME=””>. 1.<A HREF=”URL”>.....</A>: Es el más habitual de los atributos y sirve para saltar entre diferentes URLs. De momento veremos: - Saltar en una presentación del archivo 1 al archivo 2: En el archivo 1 incluiremos la directiva <A HREF=”archivo2.html”>Siguiente página</a> - Saltar de nuestra presentación a otra presentación web llamada www.bienvenidos.es: <A HREF=”http://www.bienvenidos.es”>Visita esta página</A> 2.<A NAME=”parte1”>Primera parte</A>: Utilizamos el atributo name para dar nombre a una sección de nuestro documento. Posteriormente, cuando en nuestro documento queramos incluir un vínculo a dicha sección escribiremos: <A HREF=”#parte1”>Ir a la primera parte</A> <HTML> <HEAD> <TITLE>Ejemplo 3</TITLE> </HEAD> <BODY> <A NAME=”arriba”><H1>Página de enlaces</H1></A> <A HREF=”#abajo”>Ir abajo</A><br> <A HREF=”ej4.html”>Ir a ejemplo 4</A><br><br> <A HREF=”http://www.webestilo.com/”>Ir a WebEstilo</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><br><br><br><br><br><br> <br><br><br>.<br>.<br>.<br>.<br>.<br> <A NAME=”abajo”><br></A> <A HREF=”#arriba”>Ir arriba</A> </BODY> </HTML>

URLS URL: Localizador Universal de Recursos Los URL son las direcciones de las informaciones que buscamos en Internet. Los URL constan de tres partes: 1.Protocolo: Es el programa que utilizará el navegador para obtener el archivo elegido. Les suena HTTP, FTP, Gopher... 2.Nombre del host: Se trata del sistema donde se encuentra almacenada la información que buscamos.

3.Ruta del fichero: Se trata de la ubicación del archivo dentro del host. http://www.bienvenidos.es/publico/saludos.html 1

Entre los principales tipos de URL destacan: 1.HTTP: Son los más populares ya que son los utilizados por los servidores de WWW para mandar documentos a través de Internet. 2.FTP: Se utilizan para apuntar hacia los archivos que estén en servidores que usan el protocolo FTP (File Transfer Protocol). Este protocolo es normalmente utilizado para enviar y recibir ficheros. Es el protocolo que se usa para enviar nuestras páginas al servidor de internet. Como ya se puede imaginar en estos servidores se almacenan los archivos que forman parte de nuestra presentación web. 3.File: Apuntan hacia archivos contenidos en el mismo disco que se encuentra el navegador. No resulta muy interesante poner estos URL en nuestras presentaciones puesto que otra persona que desde otro sistema apunte hacia este URL, generalmente fallará en su intento y no podrá tener acceso a él. 4.Mailto: Se usa para mandar correos electrónicos. Cuando seleccionamos este tipo de URL se abre la aplicación de correo electrónico de nuestro ordenador para enviar un correo a la dirección hacia la que apunta el URL. La forma estandar es: mailto:webmaster@bienvenidos.es 5.News: Son URL de grupos de noticias, en estos servidores se almacenan mensajes el los que se discuten sobre diferentes temas. <HTML> <HEAD> <TITLE>Ejemplo 5</TITLE> </HEAD> <BODY> <H1>Diferentes tipos de URLs</H1> Enlace a <A HREF=”http://www.webestilo.com”>WebEstilo</A>. <br> Enlace al servidor de FTP de <A HREF=”ftp://ftp.mozilla.org/pub/mozilla/”>Mozilla</A>. <br> Enlace a <A HREF=”file:///C:”>la unidad C de su ordenador</A>. <br> Enlace a <a href=”mailto:webmaster@bienvenidos.es”> mailto:webmaster@bienvenidos.es</a>. <br> Enlace a las <A HREF=”news://msnews.microsoft.com”>News de Microsoft</A>. <br> </BODY> </HTML>

LISTAS <UL> <OL> <LI> Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con alguna en común:

1. Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estará encabezado por la tag <li> que puede o no llevar la tag de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones. 2. Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento. 3. Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser, prácticamente, idéntico al de las listas con viñetas. - Menú: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la tag <li>. - Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la tag <li>. 4. Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags <dl>.....</dl>. Para el término se usa la tag <dt> y para la definición la tag <dd>. Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la tag de apertura el atributo compact: <dl compact>. 5. Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML. <HTML> <HEAD> <TITLE>Ejemplo 6</TITLE> </HEAD> <BODY> <H1>Listas</H1> Una lista ordenada <ol> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ol> <br><br> Una lista sin ordenar <ul> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ul> <br><br> Una lista de glosario <dl> <dt>T&eacute;mino 1</dt> <dd>Definici&oacute;n 1</dd>

<dt>T&eacute;mino 2</dt> <dd>Definici&oacute;n 2</dd> </dl> <br><br> Listas anidadas <ul> <li>Uno <ul> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ul> </li> <li>Dos</li> <li>Tres</li> </ul> </BODY> </HTML>

ESTILOS DE CARACTER <B> <U> <I> Estos estilo son tags que afectan a palabras o caracteres dentro de otras entidades de HTML modificando el aspecto de ese texto para que sea diferente del texto que lo rodea. Existen dos tipos de estilos: 1. Estilos lógicos: Indican como se va a emplear el texto que realzamos, no el como se va a formatear. <em>.....</em>: Indica que los caracteres estarán enfatizados de alguna manera, generalmente en cursiva aunque dependerá del navegador. <strong>.....</strong>: Los caracteres tendrán mayor énfasis, generalmente en negrita. <code>.....</code>: Muestra como una fuente monoespaciada, generalmente Courier. <samp>.....</samp>: Muy similar a code. <kdb>.....</kdb>: Texto que el usuario debe escribir. <var>.....</var>: Nombre de una variable que deba ser reemplazada por su valor real. Generalmente en cursiva o subrayada. <dfn>.....</dfn>: Se usa para resaltar una palabra que se va a definir. <cite>.....</cite>: Se usa para citas cortas. 2. Estilos físicos: Modifican la presentación real del texto. <b>.....</b>: Pone el texto en negrita. <i>.....</i>: Pone el texto en cursiva. <tt>.....</tt>: Pone el texto en fuente monoespaciada. <u>.....</u>: Subraya el texto afectado. <HTML> <HEAD> <TITLE>Ejemplo 7</TITLE> </HEAD> <BODY>

<H1>Estilos de caracter</H1> Un ejemplo de texto de <EM>realzado</EM>.<br> Un ejemplo de texto de <STRONG>realzado</STRONG>.<br> Un ejemplo de texto de <CODE>realzado</CODE>.<br> Un ejemplo de texto de <SAMP>realzado</SAMP>.<br> Un ejemplo de texto de <KDB>realzado</KDB>.<br> Un ejemplo de texto de <VAR>realzado</VAR>.<br> Un ejemplo de texto de <DFN>realzado</DFN>.<br> Un ejemplo de texto de <CITE>realzado</CITE>.<br> <br> Un ejemplo de texto de <B>realzado</B>.<br> Un ejemplo de texto de <I>realzado</I>.<br> Un ejemplo de texto de <U>realzado</U>.<br> Un ejemplo de texto de <TT>realzado</TT>.<br> </BODY> </HTML>

TEXTO PREFORMATEADO <PRE> Ya dijimos que HTML elimina cualquier espacio en blanco adicional que se inserte pero nos encontramos con una excepciรณn a esta regla cuando utilizamos las tags <pre>.....</pre>. Sin embargo esta tag convertirรก el texto afectado a fuente monoespaciada (posiblemente Courier). Esta tag se usaba para hacer tablas en versiones anteriores del lenguaje HTML ahora su utilidad puede reducirse a convertir a HTML, rรกpida y fรกcilmente, archivos de correo electrรณnico y publicaciones de grupos Usenet. <HTML> <HEAD> <TITLE>Ejemplo 8</TITLE> </HEAD> <BODY> <H1>Texto preformateado</H1> Diferencia entre un texto normal y un texto preformateado. En el texto preformateado, se respetan los car&aacute;cteres y los espacios.<br> iiiiii<br> wwwwww<br> <PRE> Diferencia entre un texto normal y un texto preformateado. En el texto preformateado, se respetan los car&aacute;cteres y los espacios.<br> iiiiii<br>

wwwwww<br> </PRE> </BODY> </HTML>

SALTOS Y LÍNEAS <HR> <BR> 1. Líneas divisorias: Se crean con la tag <hr> que no tiene tag de cierre ni lleva texto asociado. Se puede especificar el ancho de la línea con el siguiente atributo <hr width=”80%”>. 2. Saltos de línea: La tag <br> inserta un salto de línea donde se coloque. Puede colocar tantas como desee y se insertará un salto de línea por cada una de ellas. <HTML> <HEAD> <TITLE>Ejemplo 9</TITLE> </HEAD> <BODY> <H1>Saltos y lineas</H1> <HR> <HR width=”80%”> <HR width=”60%”> <HR width=”40%”> <HR width=”20%”> ---<br><br><br> ---</BODY> </HTML>

CARACTERES ESPECIALES Es posible que en un momento dado deseemos insertar un carácter que no sea ASCII en nuestro documento HTML. Muy probablemente, si lo creamos nosotros con las combinaciones de teclas habituales no llegue a poder ser leído por otra plataforma una vez publicado en Internet. Para solventar este conflicto, HTML ofrece la posibilidad de insertar unas entidades de carácter que podrán ser interpretados por todas las plataformas. Estas entidades pueden ser: 1. Nombradas: Se suelen construir con el signo &, la abreviatura del carácter y acabado con el signo punto y coma. El símbolo de registrado se construiría: &reg; 2. Numeradas: Se construyen con los signos &#, el número correspondiente a la posición del carácter en el conjunto ISO-Latin-1 (ISO-8859-1). El mismo símbolo de registrado, sería ahora: &#174;

3. Existen unas entidades reservadas, exclusivamente, para carácteres usados en tags pero que nosotros no los pretendemos usar dentro de ninguna de ellas. Estos son: signo <, entidad &lt; signo >, entidad &gt; signo &, entidad &amp; signo “, entidad &quot;

TABLAS <TABLE> <TR> <TD> Las tablas surgieron con la versión HTML 3.0. Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente. El contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table>. Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila. Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y <td> con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes. <HTML> <HEAD> <TITLE>Ejemplo 10</TITLE> </HEAD> <BODY> <H1>Tablas b&aacute;sicas</H1> <TABLE BORDER=”1”> <TR> <TH>Cabereca 1</TH> <TH>Cabereca 2</TH> <TH>Cabereca 3</TH> </TR> <TR> <TD>Dato 1</TD> <TD>Dato 2</TD> <TD>Dato 3</TD> </TR> <TR> <TD>Dato 4</TD> <TD>Dato 5</TD> <TD>Dato 6</TD> </TR> </TABLE> </BODY> </HTML>

ACCESORIOS TÍTULO

Cuando queramos titular una tabla, podemos escribirlo como texto normal o usando las tags <caption>.....</caption>. Las tags de título van dentro de las tags de la tabla y son opcionales, el título no es obligatorio. La tag de apertura puede llevar consigo el atributo align que indicará si el título va encima o debajo de la tabla. align=”top” indicaría encima de la tabla y align=”bottom” indicaría en la parte de abajo. Alineación de celdas Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda. Así, dentro de cada tag de celda podemos encontrar: 1. El atributo align= define horizontalmente los datos al margen izquierdo (left), al derecho (right) o centrado (center). 2. El atributo valign= define verticalmente los datos en la parte superior (top), en la parte inferior (bottom) o centrado (middle). Celdas extendidas Para crear una celda que abarque varias filas o columnas, debemos colocar en las tags <th> o <td> los atributos: 1. rowspan= más un valor para indicar el número de filas que se quiere abarcar. 2. colspan= más un valor para indicar el número de columnas que se quiere abarcar. Si opta por poner celdas extendidas en su presentación web, la cosa se complica bastante. Nuestra recomendación: Coja lápiz y papel y dibuje la tabla con todas las filas y columnas que se quieren formar porque así tendrá mucho más claro los valores que debe asignar a los atributos rowspan y colspan y las tags a las que hay que asignarlos.

ESPACIADO Podemos modificar el aspecto de la tabla cambiando el ancho de los bordes, el espaciado entre celdas y el ancho de las mismas. 1. width= Acompaña a <table> y especifica el ancho de la tabla, tanto en número de pixeles como en porcentaje respecto al ancho de la pantalla. También puede acompañar a las tags <th> o <td> para especificar el ancho de las columnas. 2. Border= Anteriormente, ya hemos hablado de este atributo. Ahora le diremos que puede darle un valor que indicará el ancho del borde en pixeles. Border=”0” indicaría la ausencia de borde. 3. Cellspacing= Suele acompañar a la tag <table>. Indica el número de pixeles que separan cada celda. El valor predeterminado suele ser 2. 4. Cellpadding= También acompaña a la tag <table>. Indica el espacio en pixeles entre el borde de la celda y su contenido. El valor predeterminado suele ser 1. <HTML> <HEAD> <TITLE>Ejemplo 11</TITLE> </HEAD> <BODY> <H1>Tablas avanzadas</H1> <TABLE WIDTH=”50%” BORDER=”1” CELLSPACING=”3” CELLPADDING=”2”> <TR>

<TD COLSPAN=”2” ALIGN=”right”>Dato 1</TD> <TD>Un texto cualquiera</TD> <TD ROWSPAN=”2”>Dato 3</TD> </TR> <TR> <TD>Dato 4</TD> <TD>Dato 4</TD> <TD ALIGN=”center”>Dato 5</TD> </TR> </TABLE> </BODY> </HTML>

IMÁGENES <IMG> El uso de imágenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imágenes en una presentación web es muy sencillo, solo debe de tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o PNG. Las imágenes en línea, se especifican a partir de la tag <img> que no tiene una tag correspondiente de cierre pero que puede acompañarse de los siguientes atributos: 1. src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar. 2. Align= Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom. 3. Alt= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima. 4. WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar. 5. HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen. 6. BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen. <IMG SRC=”/graficos/bebe1.jpg” WIDTH=140 HEIGHT=210 BORDER=0 ALT=”Un bebé”>

<HTML> <HEAD> <TITLE>Ejemplo 12</TITLE> </HEAD> <BODY>

<H1>Im&aacute;genes</H1> <IMG SRC=”/graficos/bebe1.jpg” WIDTH=140 HEIGHT=210 BORDER=0 ALT=”Un beb&eacute;” ALIGN=”RIGHT”> <IMG SRC=”/graficos/bebe1.jpg” WIDTH=140 HEIGHT=210 BORDER=3 ALT=”Un beb&eacute;” ALIGN=”LEFT”> Un texto cualquiera. </BODY> </HTML>

MAPAS DE IMÁGENES

<MAP> <AREA> Puede hacer que parte de la imagen sea un enlace a otra página, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. Las tags usadas para esto son: 1. Las tags <map>.....</map> identifican que vamos a crear un mapa de imágenes. Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa. 2. La tag <area> define las áreas que vamos a poder activar en esa imagen. A esta tag le acompañan los siguientes atributos: shape= Entre comillas estableceremos el tipo de área a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular). Coords= Entre comillas indicaremos los pares de coordenadas de cada punto del área a activar. Estas coordenadas las podemos averiguar utilizando un programa de edición de imágenes. En las áreas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vértices del área. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio. Href= Como ya sabe, indica la dirección, entre comillas, de la página web a la que accede si pinchamos en un área determinada. Finalmente, debe saber que para que una imagen sea tratada como un mapa, además de el código anteriormente descrito, debe incluir en la tag de imagen correspondiente a la imagen a mapear el atributo usemap=”#nombre del mapa”. <IMG SRC=”/graficos/bebe1.jpg” WIDTH=140 HEIGHT=210 BORDER=0 ALT=”Un bebé” USEMAP=”#bebe1”> <MAP NAME=”bebe1”> <AREA SHAPE=CIRCLE COORDS=”60,56,47” HREF=”#” ALT=”Cabeza”> <AREA SHAPE=POLY COORDS=”3,182,36,178, 44,165,60,169,66,184,62,196, 43,201,35,190,0,193,0,183” HREF=”#” ALT=”Sonajero”> </MAP>

<HTML> <HEAD> <TITLE>Ejemplo 13</TITLE> </HEAD> <BODY> <H1>Mapas de im&aacute;genes</H1> <IMG SRC=”/graficos/bebe1.jpg” WIDTH=140 HEIGHT=210 BORDER=0 ALT=”Un beb&eacute;” USEMAP=”#bebe1”> <MAP NAME=”bebe1”> <AREA SHAPE=CIRCLE COORDS=”60,56,47” HREF=”#” ALT=”Cabeza”> <AREA SHAPE=POLY COORDS=”3,182,36, 178,44,165, 60,169,66, 184,62,196, 43,201,35, 190,0,193,0,183” HREF=”#” ALT=”Sonajero”> </MAP> </BODY> </HTML>

FORMULARIOS <FORM> La Web se ha convertido en una poderosa arma para las empresas que se dedican a realizar encuestas y, los formularios han sido una de las herramientas que han ayudado a este auge. Los formularios nos van a permitir, desde dentro de una presentación web, solicitar información al visitante. Estos formularios estarán compuestos por tantos campos como informaciones queramos obtener. Una vez introducidos los valores en estos campos serán enviados a una URL donde se procesará toda esta información. Un formulario sigue siendo lenguaje html y por lo tanto necesita de unas tags que lo especifiquen. La declaración de formulario queda recogida por las tags <form>.....</form> y dentro de ellas se recogerán todas las variables de entrada. A la tag de apertura <form> le acompañarán estos atributos: 1. action=”” Entre comillas se indica el programa que va a tratar las variables enviadas con el formulario, un guión CGI o la URL mailto. 2. Method=”” Indica el método de transferencia de las variables. Post, si se envía a través del STDIO. Get, si se envía a través de la URL. <HTML> <HEAD> <TITLE>Ejemplo 14</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION=”mailto:unaprueba” METHOD=”POST”> <INPUT TYPE=”text” NAME=”nombre”><BR> <INPUT TYPE=”submit”><INPUT TYPE=”Reset”> </FORM>

</BODY> </HTML>

CAMPOS DE ENTRADA <INPUT> La tag <input> define la introducción de variables. Junto a esta tag encontraremos los siguientes atributos: 1. type=”” Indicará el tipo de variable a introducir. text Indica que el campo a introducir será un texto. Sus atributos: maxlenght=”” Seguido de un valor que limitará el número máximo de caracteres a introducir en ese campo. size=”” Seguido de un valor que limitará el numero de caracteres a mostrar en pantalla. value=”” Indica que no hay valor inicial del campo. Password Indica que el campo a introducir será una palabra de paso. Mostrará asteriscos en lugar de letras escritas. Sus atributos serán los mismos que para text. Checkbox El campo se elegirá marcando de entre varias opciones una casilla cuadrada. value=”” Entre comillas se indicará el valor de la casilla. checked La casilla aparecerá marcada por defecto. Radio El campo se elegirá marcando de entre varias opciones una casilla circular. value=”” Entre comillas se indicará el valor de la casilla. Image El campo contendrá el valor en coordenadas del punto de la imagen que haya pinchado. Atributo obligatorio: src=”” Entre comillas escribiremos el nombre del archivo de imagen. hidden El visitante no puede modificar su valor ya que no está visible. Se manda siempre junto al atributo value= seguido de su valor entre comillas. 2. Name=”” Indicará el nombre que se asigna a un determinado campo. <HTML> <HEAD> <TITLE>Ejemplo 15</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION=”mailto:unaprueba” METHOD=”POST”> Texto: <INPUT TYPE=”text” NAME=”nombre”><BR> Password: <INPUT TYPE=”password” NAME=”contra”><BR> Sexo:<INPUT TYPE=”radio” NAME=”boton1” VALUE=”1”> Hombre <INPUT TYPE=”radio” NAME=”boton1” VALUE=”2”>Mujer<BR> Vehiculo:<INPUT TYPE=”checkbox” NAME=”Moto” VALUE=”Si”>Moto <INPUT TYPE=”checkbox” NAME=”Coche” VALUE=”” CHECKED>Coche <BR><BR> <INPUT TYPE=”submit”><INPUT TYPE=”Reset”> </FORM>

</BODY> </HTML>

CAMPOS DE SELECCIÓN <SELECT> Las tags <select>.....</select> encierran los valores que podremos elegir a partir de una lista. Los atributos que acompañan a la tag de apertura son: 1. name=”” Indicará el nombre del campo de selección. 2. Size=”” Indicará el número de opciones visibles. Si le asignamos 1, la selección se presentará como un menú desplegable. Si le asignamos un valor mayor se presentará como una lista con barra de desplazamiento. 3. multiple Indica si se pueden realizar múltiples selecciones. Las diferentes opciones de la lista se indicarán mediante la tag <option> que puede acompañarse del atributo selected para indicar cual es la opción que aparecerá por defecto. Si no lo especificamos, siempre será la primera de la lista. <HTML> <HEAD> <TITLE>Ejemplo 16</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION=”mailto:unaprueba” METHOD=”POST”> <SELECT NAME=”Colores” MULTIPLE> <OPTION VALUE=”r”>Rojo</OPTION> <OPTION VALUE=”g”>Verde</OPTION> <OPTION VALUE=”b”>Azul</OPTION> </SELECT> <BR><BR> <SELECT NAME=”Colores” SIZE=”1”> <OPTION VALUE=”r”>Rojo</OPTION> <OPTION VALUE=”g”>Verde</OPTION> <OPTION VALUE=”b”>Azul</OPTION> </SELECT> <BR><BR> <INPUT TYPE=”submit”><INPUT TYPE=”Reset”> </FORM> </BODY> </HTML>

AREAS DE TEXTO <TEXTAREA> Con las tags <textarea>;.....</textarea> definimos un texto de múltiples líneas para que el visitante pueda incluir un comentario junto a sus datos.

Junto a la tag de apertura pueden aparecer los siguientes atributos: 1. name=”” Nombre del campo. 2. Cols=”” Numero de columnas de texto visible. 3. Rows=”” Numero de filas de texto visible. <HTML> <HEAD> <TITLE>Ejemplo 16</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION=”mailto:unaprueba” METHOD=”POST”> <TEXTAREA COLS=20 ROWS=10 NAME=”Texto”> </TEXTAREA> <BR><BR> <INPUT TYPE=”submit”><INPUT TYPE=”Reset”> </FORM> </BODY> </HTML>

BOTONES Se definen mediante la tag <input> a la que le acompañan los atributos: 1. type=”” Seguido de submit para enviar los datos del formulario y seguido de reset para borrar los datos que se han introducido. 2. Value=”” Indica el texto que incorporaran los botones. Normalmente, enviar y borrar. <HTML> <HEAD> <TITLE>Ejemplo 16</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION=”mailto:unaprueba” METHOD=”POST”> <TEXTAREA COLS=20 ROWS=10 NAME=”Texto”> </TEXTAREA> <BR><BR> <INPUT TYPE=”submit”><INPUT TYPE=”Reset”> </FORM> </BODY> </HTML>

JAVASCRIPT Todos los que hasta ahora hayan seguido el curso de HTML, se habrán dado cuenta de una cosa: crear un documento HTML es crear algo de caracter estático, inmutable con el paso del tiempo. La página se carga, y ahí termina la historia. Tenemos ante nosotros la información que buscábamos, pero no podemos INTERACTUAR con ella. Así pues, como solución a este problema, nace JavaScript. ¿Y qué es JavaScript? Se trata de un lenguaje de tipo script compacto, basado en objetos y guiado por eventos diseñado específicamente para el desarrollo de aplicaciones cliente-servidor dentro del ámbito de Internet. Los programas JavaScript van incrustados en los documentos HMTL, y se encargan de realizar acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear animaciones, comprobar campos...

VERSIONES El programa que va a interpretar los programas JavaScript es el propio navegador, lo que significa que si el nuestro no soporta JavaScript, no podremos ejecutar las funciones que programemos. Desde luego, Netscape y Explorer lo soportan, el primero desde la versión 2 y el segundo desde la versión 3. Navegador Version de JavaScript Soporte ECMA Nestcape 2 Javascript 1.0 -Internet Explorer 2 No soporta JavaScript -Nestcape 3 Javascript 1.1 -Internet Explorer 3 Javascript 1.0 -Nestcape 4 Javascript 1.2 - 1.3 incompleta ECMA-262-com pliant hasta la version 4.5 Internet Explorer 4 Javascript 1.2 ECMA-262-compliant Nestcape 6 ECMA compliant Javascript 1.4 Full ECMAScript-262 Internet Explorer 5 ECMA compliant Javascript 1.3 Full ECMAScript-262 Las diferentes versiones de JavaScript han sido finalmente integradas en un estándar denominado ECMAScript-262. Dicho estándar ha sido realizado por la organización ECMA dedicada a la estandarización de información y sistemas de comunicación. Las versiones actuales de los navegadores soportan este estándar, así que basaremos el curso sobre él.

DÓNDE Y CÓMO INCLUIR JAVASCRIPT Existen distintos modos de incluir lenguaje JavaScript en una página. La forma mas frecuente de hacerlo es utilizando la directiva <script> en un documento HTML (se pueden incluir tantas directivas <script> como se quiera en un documento). El formato es el siguiente: <script language=”Javascript 1.3”> El atributo lenguaje hace referencia a la versión de JavaScript que se va a utilizar en dicho script. Otro atributo de la directiva script es src, que puede usarse para incluir un archivo externo que contiene JavaScript y que quiere incluirse en el código HTML. <script language=”JavaScript” src =”archivo.js”> </script> El archivo externo simplemente es un archivo del texto que contiene código JavaScript, y cuyo nombre acaba con la extensión js. Puede incluirse también código JavaScript como respuesta a algún evento:

˙˙

Nota: Los scripts pueden incluirse como comentarios para asegurar que su código no es “visto” por navegadores viejos que no reconocen JavaScript y así evitar errores. <script ....> <!Código JavaScript //--> </script>

GRAMÁTICA Si conoce algún otro lenguaje de programación ya estará familiarizado con el uso de variables, operadores, declaraciones... Lo que se resume en la tabla siguiente son los elementos principales de la gramática de JavaScript. Cada uno de los elementos se verá en detalle a lo largo del manual. Nota importante: JavaScript es sensible a mayúsculas y minúsculas, todos los elementos de JavaScript deben referenciarse cómo se definieron, no es lo mismo “Salto” que “salto”. Variables Etiquetas que se refieren a un valor cambiante. Operadores Pueden usarse para calcular o comparar valores. Ejemplo: pueden sumarse dos valores, pueden compararse dos valores... Expresiones Cualquier combinación de variables, operadores, y declaraciones que evalúan a algún resultado. Ejemplo: intTotal=100; intTotal > 100 Sentencias Una sentencia puede incluir cualquier elemento de la grámatica de JavaScript. Las sentencias de JavaScript pueden tomar la forma de condicional, bucle, o manipulaciones del objeto. La forma correcta para separarlas es por punto y coma, esto sólo es obligatorio si las declaraciones múltiples residen en la misma línea. Aunque es recomedable que se acostumbre a terminar cada instrucción con un punto y coma, se ahorrará problemas.

Objetos Estructura “contenedora” de valores, procedimientos y funciones, cada valor refleja una propiedad individual de ese objeto. Funciones y Métodos Una función de JavaScript es bastante similar a un” procedimiento” o” subprograma” en otro lenguaje de programación. Una función es un conjunto que realizan alguna acción. Puede aceptar los valores entrantes (los parámetros), y puede devolver un valor saliente. Un método simplemente es una función contenida en un objeto.

VARIABLES 20

Las variables almacenan y recuperan datos, también conocidos como “valores”. Una variable puede referirse a un valor que cambia o se cambia. Las variables son referenciadas por su nombre, y el nombre que les es asignado debe ser conforme a ciertas reglas (debe empezar con una letra o (“_”); los caracteres siguientes pueden ser números (0-9), letras mayúsculas o letras minúsculas). Ejemplos de definiciones erróneas: var Mi Variable, 123Probando, $Variable, for, while; Ejemplos de definiciones correctas: var _Una_Variable, P123robando, _123, mi_carrooo; Por supuesto, podemos inicializar una variable al declararla: var Una_Variable=”Esta Cadenita de texto”; Las variables en JavaScript pueden ser de alcance global o local. Una variable global es accesible desde cualquier <script> de la página mientras que una variable local sólo lo es desde la función en la que fue declarada. Normalmente, usted crea una nueva variable global asignándole simplemente un valor: globalVariable=5; Sin embargo, si usted está codificando dentro de una función y usted quiere crear una variable local que sólo tenga alcance dentro de esa función, debe declarar la nueva variable haciendo uso de var: function newFunction() { var localVariable=1; globalVariable=0; ... }

TIPOS DE DATOS

Javascript reconoce seis tipos de valores diferentes: numéricos, lógicos, objetos, cadenas, nulos e indefinidos. JavaScript tiene la peculiaridad de ser un lenguaje débilmente tipado, esto es, una variable puede cambiar de tipo durante su vida, por ejemplo uno puede declarar una variable que ahora sea un entero y más adelante una cadena. MiVariable=4; y después: MiVariable=”Una_Cadena”; A diferencia de otros lenguajes y como ya hemos visto, en Javascript no es necesario declarar las variables especificando el tipo de dato que contendrán, será el propio interprete el que le asignará el tipo apropiado. (Esto es así para seguir la filosofía de diseño de Javascript que indica que se realizan programas pequeños y que la idea es lograr que el programador realice los scripts de la manera más rápida posible). Tipos de Datos: Números Enteros o coma flotante. Boleanos True o False. Cadenas Los tipos de datos cadena deben ir delimitados por comillas simples o dobles. Objetos Obj = new Object(); Nulos Null Indefinidos Un valor indefinido es el que corresponde a una variable que ha sido creada pero no le

ha sido asignado un valor.

OBJETOS DEL NAVEGADOR JERARQUÍA

Con esta entrega comienza la descripción de las propiedades y los métodos de los objetos del navegador. No es mi intención hacer una descripción exhaustiva de todas y cada una de las propiedades y métodos, objeto por objeto, con todo detalle. Mi intención es hacer una descripción más o menos detallada de las propiedades y métodos que tienen más posibilidad de ser usados. Es decir, que si me dejo alguna propiedad y/o método por comentar, siempre puedes buscar los manuales de referencia de los respectivos navegadores. En este capítulo vamos a estudiar la jerarquía que presentan los objetos del navegador, atendiendo a una relación “contenedor - contenido” que se da entre estos objetos. De forma esquemática, esta jerarquía podemos representarla de esta manera (al lado está la directiva HTML con que se incluyen en el documento objetos de este tipo, cuando exista esta directiva): * window + history + location + document <BODY> ... </BODY> - anchor <A NAME=”...”> ... </A> - applet <APPLET> ... </APPLET> - area <MAP> ... </MAP> - form <FORM> ... </FORM> + button <INPUT TYPE=”button”> + checkbox <INPUT TYPE=”checkbox”> + fileUpload <INPUT TYPE=”file”> + hidden <INPUT TYPE=”hidden”> + password <INPUT TYPE=”password”> + radio <INPUT TYPE=”radio”> + reset <INPUT TYPE=”reset”> + select <SELECT> ... </SELECT> - options <INPUT TYPE=”option”> + submit <INPUT TYPE=”submit”> + text <INPUT TYPE=”text”> + textarea <TEXTAREA> ... </TEXTAREA> - image <IMG SRC=”...”> - link <A HREF=”...”> ... </A> - plugin <EMBED SRC=”...”> + frame <FRAME> * navigator Según esta jerarquía, podemos entender el objeto area (por poner un ejemplo) como un objeto dentro del objeto document que a su vez está dentro del objeto window. Hay que decir que la notación ‘.’ también se usa para denotar a un objeto que está dentro de un objeto. Por ejemplo, si queremos hacer referencia a una caja de texto, tendremos que escribir ventana.documento.formulario.caja_de_texto Donde ventana es el nombre del objeto window (su nombre por defecto es window), documento es el nombre del objeto document (cuyo nombre por defecto es document), formulario es el nombre del objeto forms (veremos que forms es un array) y caja_de_texto es el nombre del objeto textarea (cuyo

nombre por defecto es textarea). En la mayoría de los casos podemos ignorar la referencia a la ventana actual (window), pero será necesaria esta referencia cuando estemos utilizando múltiples ventanas, o cuando usemos frames. Cuando estemos usando un único frame, podemos pues ignorar explícitamente la referencia al objeto window, ya que JS asumirá que la referencia es de la ventana actual. También podemos utilizar la notación de array para referirnos a algún objeto, por ejemplo, cuando los objetos a usar no tienen nombre, como en este caso: document.forms[0].elements[1]; hace referencia al segundo elemento del primer formulario del documento; este elemento será el segundo que se haya creado en la página HTML.

EL OBJETO WINDOW Se trata del objeto más alto en la jerarquía del navegador (navigator es un objeto independiente de todos en la jerarquía), pues todos los componentes de una página web están situados dentro de una ventana. El objeto window hace referencia a la ventana actual. Veamos a continuación sus propiedades y sus métodos.

PROPIEDADES • • • • • • • • • • • • •

closed. Válida a partir de Netscape 3 en adelante y MSIE 4 en adelante. Es un booleano que nos dice si la ventana está cerrada ( closed = true ) o no ( closed = false ). defaultStatus. Cadena que contiene el texto por defecto que aparece en la barra de estado (status bar) del navegador. frames. Es un array: cada elemento de este array (frames[0], frames[1], ...) es uno de los frames que contiene la ventana. Su orden se asigna según se definen en el documento HTML. history. Se trata de un array que representa las URLS visitadas por la ventana (están almacenadas en su historial). length. Variable que nos indica cuántos frames tiene la ventana actual. location. Cadena con la URL de la barra de dirección. name. Contiene el nombre de la ventana, o del frame actual. opener. Es una referencia al objeto window que lo abrió, si la ventana fue abierta usando el método open() que veremos cuando estudiemos los métodos. parent. Referencia al objeto window que contiene el frameset. self. Es un nombre alternativo del window actual. status. String con el mensaje que tiene la barra de estado. top. Nombre alternativo de la ventana del nivel superior. window. Igual que self: nombre alternativo del objeto window actual.

MÉTODOS

• • • • • •

alert(mensaje). Muestra el mensaje ‘mensaje’ en un cuadro de diálogo blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4. clearInterval(id). Elimina el intervalo referenciado por ‘id’ (ver el método setInterval(), también del objeto window). A partir de NS 4, IE 4. clearTimeout(nombre). Cancela el intervalo referenciado por ‘nombre’ (ver el método setTimeout(), también del objeto window). close(). Cierra el objeto window actual. confirm(mensaje). Muestra un cuadro de diálogo con el mensaje ‘mensaje’ y dos botones, uno

de aceptar y otro de cancelar. Devuelve true si se pulsa aceptar y devuelve false si se pulsa cancelar. • focus(). Captura el foco del ratón sobre el objeto window actual. A partir de NS 3, IE 4. • moveBy(x,y). Mueve el objeto window actual el número de pixels especificados por (x,y). A partir de NS 4. • moveTo(x,y). Mueve el objeto window actual a las coordenadas (x,y). A partir de NS 4. • open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer parámetro en una ventana de nombre ‘nombre’. Si esta ventana no existe, abrirá una ventana nueva en la que mostrará el contenido con las características especificadas. Las características que podemos elegir para la ventana que queramos abrir son las siguientes: toolbar = [yes|no|1|0]. Nos dice si la ventana tendrá barra de herramientas (yes,1) o no la tendrá (no,0). location = [yes|no|1|0]. Nos dice si la ventana tendrá campo de localización o no. directories = [yes|no|1|0]. Nos dice si la nueva ventana tendrá botones de dirección o no. status = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de estado o no. menubar = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de menús o no. scrollbars = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barras de desplazamiento o no. resizable = [yes|no|1|0]. Nos dice si la nueva ventana podrá ser cambiada de tamaño (con el ratón) o no. • width = px. Nos dice el ancho de la ventana en pixels. • height = px. Nos dice el alto de la ventana en pixels. • outerWidth = px. Nos dice el ancho *total* de la ventana en pixels. A partir de NS 4. • outerHeight = px. Nos dice el alto *total* de la ventana el pixels. A partir de NS 4 • left = px. Nos dice la distancia en pixels desde el lado izquierdo de la pantalla a la que se debe colocar la ventana. • top = px. Nos dice la distancia en pixels desde el lado superior de la pantalla a la que se debe colocar la ventana. • prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de diálogo que contiene una caja de texto en la cual podremos escribir una respuesta a lo que nos pregunte en ‘mensaje’. El parámetro ‘respuesta_por_defecto’ es opcional, y mostrará la respuesta por defecto indicada al abrirse el cuadro de diálogo. El método retorna una cadena de caracteres con la respuesta introducida. • scroll(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir de NS3, IE4. • scrollBy(x,y). Desplaza el objeto window actual el número de pixels especificado por (x,y). A partir de NS4. • scrollTo(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir de NS4. • setInterval(expresion,tiempo). Evalua la expresión especificada después de que hayan pasado el número de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearInterval(). A partir de NS4, IE4. • setTimeout(expresion,tiempo). Evalua la expresión especificada después de que hayan pasado el número de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearTimeout(). A partir de NS4, IE4. Me dejo en el tintero otras propiedades y métodos como innerHeight, innerWidth, outerHeight, outerWidth, pageXOffset, pageYOffset, personalbar, scrollbars, back(), find([“cadena”],[caso,bkwd]), forward(), home(), print(), stop()... todas ellas disponibles a partir de NS 4 y cuya explicación remito como ejercicio al lector interesado en saber más sobre el objeto window.  <HTML> <HEAD>

<title>Ejemplo de JavaScript</title> <script LANGUAGE=”JavaScript”> <!-function moverVentana() { mi_ventana.moveBy(5,5); i++; if (i<20) setTimeout(‘moverVentana()’,100); else mi_ventana.close(); } //--> </script> </HEAD> <BODY> <script LANGUAGE=”JavaScript”> <!-var opciones=”left=100,top=100,width=250,height=150”, i= 0; mi_ventana = window.open(“”,””,opciones); mi_ventana.document.write(“Una prueba de abrir ventanas”); mi_ventana.moveTo(400,100); moverVentana(); //--> </script> </BODY> </HTML>

EL OBJETO FRAME Todos sabemos que la ventana del navegador puede ser dividida en varios frames que contengan cada uno de ellos un documento en el que mostrar contenidos diferentes. Al igual que con las ventanas, cada uno de estos frames puede ser nombrado y referenciado, lo que nos permite cargar documentos en un marco sin que esto afecte al resto. Realmente cada frame se representa con un objeto window, esto quiere decir que el objeto frame tiene todas las propiedades y métodos del objeto window.

PROPIEDADES • • • •

• • • • • • • • •

length. Variable que nos indica cuántos frames tiene la ventana actual. location. Cadena con la URL de la barra de dirección. name. Contiene el nombre de la ventana, o del frame actual. opener. Es una referencia al objeto window que lo abrió, si la ventana fue abierta usando el método open() que veremos cuando estudiemos los métodos. parent. Referencia al objeto window que contiene el frameset. self. Es un nombre alternativo del window actual. status. String con el mensaje que tiene la barra de estado. top. Nombre alternativo de la ventana del nivel superior. window. Igual que self: nombre alternativo del objeto window actual.

MÉTODOS • alert(mensaje). Muestra el mensaje ‘mensaje’ en un cuadro de diálogo • blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4. • clearInterval(id). Elimina el intervalo referenciado por ‘id’ (ver el método setInterval(), también del objeto window). A partir de NS 4, IE 4. • clearTimeout(nombre). Cancela el intervalo referenciado por ‘nombre’ (ver el método setTimeout(), también del objeto window). • confirm(mensaje). Muestra un cuadro de diálogo con el mensaje ‘mensaje’ y dos botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa aceptar y devuelve false si se pulsa cancelar. • focus(). Captura el foco del ratón sobre el objeto window actual. A partir de NS 3, IE 4. • open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer parámetro en una ventana de nombre ‘nombre’. Si esta ventana no existe, abrirá una ventana nueva en la que mostrará el contenido con las características especificadas. Las características que podemos elegir para la ventana que queramos abrir son las siguientes: • prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de diálogo que contiene una caja de texto en la cual podremos escribir una respuesta a lo que nos pregunte en ‘mensaje’. El parámetro ‘respuesta_por_defecto’ es opcional, y mostrará la respuesta por defecto indicada al abrirse el cuadro de diálogo. El método retorna una cadena de caracteres con la respuesta introducida. • scroll(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir de NS3, IE4. • scrollBy(x,y). Desplaza el objeto window actual el número de pixels especificado por (x,y). A partir de NS4. • scrollTo(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir de NS4. • setInterval(expresion,tiempo). Evalua la expresión especificada después de que hayan pasado el número de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearInterval(). A partir de NS4, IE4. • setTimeout(expresion,tiempo). Evalua la expresión especificada después de que hayan pasado el número de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearTimeout(). A partir de NS4, IE4. En este ejemplo mostramos como acceder a los frames y cómo se pueden cambiar propiedades de un frame en otro.  <HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD>

<frameset cols=”50%,*”> <frame name=”izq” src=”ejem09a.html” scrolling=”auto”> <frameset rows=”50%,*”> <frame name=”der1” src=”ejem09b.html” crolling=”auto”> <frame name=”der2” src=”ejem09b.html” scrolling=”auto”> </frameset> </frameset> </HTML> ejem09a.html  </script> </HEAD> <BODY> <script LANGUAGE=”JavaScript”> <!-var i=0; document.write(‘<h1>Soy el frame: ‘ + window.name + “</h1><br>”); for (i=0;i<top.frames.length;i++) document.write(‘Nombre del frame ‘ + i + ‘: ‘ + top.frames[i].name + “<br>”); //--> </script> <br><br> <a href=”javascript:color()”>Cambia el color del frame <b>der1</b></a><br><br><br> <a href=”javascript:cargarYahoo()”>Cargar Yahoo!! en el frame <b>der2</b></a><br> </BODY> </HTML> ejem09b.html  <HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY>

EL OBJETO LOCATION Este objeto contiene la URL actual así como algunos datos de interés respecto a esta URL. Su finalidad principal es, por una parte, modificar el objeto location para cambiar a una nueva URL, y extraer los componentes de dicha URL de forma separada para poder trabajar con ellos de forma individual si es el caso. Recordemos que la sintaxis de una URL era: protocolo://maquina_host[:puerto]/camino_al_recurso

PROPIEDADES • • • • • • • •

hash. Cadena que contiene el nombre del enlace, dentro de la URL. host. Cadena que contiene el nombre del servidor y el número del puerto, dentro de la URL. hostname. Cadena que contiene el nombre de dominio del servidor (o la dirección IP), dentro de la URL. href. Cadena que contiene la URL completa. pathname. Cadena que contiene el camino al recurso, dentro de la URL. port. Cadena que contiene el número de puerto del servidor, dentro de la URL. protocol. Cadena que contiene el protocolo utilizado (incluyendo los dos puntos), dentro de la URL. search. Cadena que contiene la información pasada en una llamada a un script, dentro de la URL.

MÉTODOS • reload(). Vuelve a cargar la URL especificada en la propiedad href del objeto location. • replace(cadenaURL). Reemplaza el historial actual mientras carga la URL especificada en cadenaURL.  <HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY> <script LANGUAGE=”JavaScript”> <!-document.write(“Location <b>href</b>: “ + location.href + “<br>”); document.write(“Location <b>host</b>: “ + location.host + “<br>”); document.write(“Location <b>hostname</b>: “ + location.hostname + “<br>”); document.write(“Location <b>pathname</b>: “ + location.pathname + “<br>”);

document.write(“Location <b>port</b>: “ + location.port + “<br>”); document.write(“Location <b>protocol</b>: “ + location.protocol + “<br>”); //--> </script> </BODY> </HTML>

EL OBJETO HISTORY Este objeto se encarga de almacenar una lista con los sitios por los que se ha estado navegando, es decir, guarda las referencias de los lugares visitados. Se utiliza, sobre todo, para movernos hacia delante o hacia atrás en dicha lista. Propiedades • current. Cadena que contiene la URL completa de la entrada actual en el historial. • next. Cadena que contiene la URL completa de la siguiente entrada en el historial. • length. Entero que contiene el número de entradas del historial (i.e., cuántas direcciones han sido visitadas). • previous. Cadena que contiene la URL completa de la anterior entrada en el historial. Métodos • back(). Vuelve a cargar la URL del documento anterior dentro del historial. • forward(). Vuelve a cargar la URL del documento siguiente dentro del historial. • go(posicion). Vuelve a cargar la URL del documento especificado por posicion dentro del historial. posicion puede ser un entero, en cuyo caso indica la posición relativa del documento dentro del historial; o puede ser una cadena de caracteres, en cuyo caso representa toda o parte de una URL que esté en el historial.

EL OBJETO NAVIGATOR Este objeto simplemente nos da información relativa al navegador que esté utilizando el usuario.

PROPIEDADES • • • • • • • •

appCodeName. Cadena que contiene el nombre del código del cliente. appName. Cadena que contiene el nombre del cliente. appVersion. Cadena que contiene información sobre la versión del cliente. language. Cadena de dos caracteres que contiene información sobre el idioma de la versión del cliente. mimeTypes. Array que contiene todos los tipos MIME soportados por el cliente. A partir de NS 3. platform. Cadena con la plataforma sobre la que se está ejecutando el programa cliente. plugins. Array que contiene todos los plug-ins soportados por el cliente. A partir de NS 3. userAgent. Cadena que contiene la cabecera completa del agente enviada en una petición HTTP. Contiene la información de las propiedades appCodeName y appVersion.

MÉTODOS •

javaEnabled(). Devuelve true si el cliente permite la utilización de Java, en caso contrario, devuelve false.

<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY> <script LANGUAGE=”JavaScript”> <!-document.write(“Navigator <b>appCodeName</b>: “ + navigator.appCodeName + “<br>”); document.write(“Navigator <b>appName</b>: “ + navigator.appName + “<br>”); document.write(“Navigator <b>appVersion</b>: “ + navigator.appVersion + “<br>”); document.write(“Navigator <b>language</b>: “ + navigator.language + “<br>”); document.write(“Navigator <b>platform</b>: “ + navigator.platform + “<br>”); document.write(“Navigator <b>userAgent</b>: “ + navigator.userAgent + “<br>”); //--> </script> </BODY> </HTML>

EL OBJETO DOCUMENT El objeto document es el que tiene el contenido de toda la página que se está visualizando. Esto incluye el texto, imágenes, enlaces, formularios, ... Gracias a este objeto vamos a poder añadir dinámicamente contenido a la página, o hacer cambios, según nos convenga.

PROPIEDADES • • • • • • • • • • • • • • • • •

alinkColor. Esta propiedad tiene almacenado el color de los enlaces activos anchors. Se trata de un array con los enlaces internos existentes en el documento applets. Es un array con los applets existentes en el documento bgColor. Propiedad que almacena el color de fondo del documento cookie. Es una cadena con los valores de las cookies del documento actual domain. Guarda el nombre del servidor que ha servido el documento embeds. Es un array con todos los EMBED del documento fgColor. En esta propiedad tenemos el color del primer plano forms. Se trata de un array con todos los formularios del documento. Los formularios tienen a su vez elementos (cajas de texto, botones, etc) que tienen sus propias propiedades y métodos, y serán tratados en el siguiente capítulo. images. Array con todas las imágenes del documento lastModified. Es una cadena con la fecha de la última modificación del documento linkColor. Propiedad que almacena el color de los enlaces links. Es un array con los enlaces externos location. Cadena con la URL del documento actual referrer. Cadena con la URL del documento que llamó al actual, en caso de usar un enlace. title. Cadena con el título del documento actual vlinkColor. Propiedad en la que se guarda el color de los enlaces visitados

MÉTODOS • clear(). Limpia la ventana del documento • open(). Abre la escritura sobre un documento. • close(). Cierra la escritura sobre el documento actual • write(). Escribe texto en el documento. • writeln(). Escribe texto en el documento, y además lo finaliza con un salto de línea  <HTML> <HEAD> <title>Ejemplo de JavaScript</title> <script LANGUAGE=”JavaScript”> <!-var i=1; var titulooriginal = document.title; function cambiarTitulo() { document.title = titulooriginal.substring(0,i); i++; if (i>titulooriginal.length) i=0; setTimeout(‘cambiarTitulo()’,100); } cambiarTitulo(); //--> </script> </HEAD> <BODY> <script LANGUAGE=”JavaScript”> <!-document.write(“Navigator <b>alinkColor </b>: “ + document.alinkColor + “<br>”); document.write(“Navigator <b>lastModified</b>: “ +document.lastModified + “<br>”); document.write(“Document <b>bgColor</b>: “ + document.bgColor + “<br>”); document.write(“Document <b>fgColor</b>: “ + document.fgColor + “<br>”); document.write(“Document <b>referrer</b>: “ + document.referrer + “<br>”); //--> </script> </BODY> </HTML>

EL OBJETO LINK Este objeto engloba todas las propiedades que tienen los enlaces externos al documento actual. Propiedades • target. Es una cadena que tiene el nombre de la ventana o del frame especificado en el parámetro TARGET • hash. Es una cadena con el nombre del enlace, dentro de la URL • host. Es una cadena con el nombre del servidor y número de puerto, dentro de la URL • hostname. Es una cadena con el nombre de dominio del servidor (o la dirección IP) dentro de

la URL • href. Es una cadena con la URL completa • pathname. Es una cadena con el camino al recurso, dentro de la URL • port. Es una cadena con el número de puerto, dentro de la URL • protocol. Es una cadena con el protocolo usado, incluyendo los : (los dos puntos), dentro de la URL • search. Es una cadena que tiene la información pasada en una llamada a un script, dentro de la URL  <HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY> <a href=”http://www.yahoo.com” target=”_blank”>Yahoo!!</a><br><br> <a href=”http://www.google.com/search?q=crear+paginas+web”>Google!</a><br><br> <script LANGUAGE=”JavaScript”> <!-var i; for (i=0;i<document.links.length;i++) { document.write(“Target : “ + document.links[i].target + “<br>”); document.write(“Host : “ + document.links[i].host + “<br>”); document.write(“Href : “ + document.links[i].href + “<br>”); document.write(“Search : “ + document.links[i].search + “<br>”); document.write(“<br><br>”); } //--> </script> </BODY> </HTML>

EL OBJETO ANCHOR Este objeto engloba todas las propiedades que tienen los enlaces internos al documento actual.

PROPIEDADES • name. Nombre del ancla. • target. Es una cadena que tiene el nombre de la ventana o del frame especificado en el parámetro TARGET  <HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY>

<a name=”arriba” target=”_top”>Inicio</a><br><br> <script LANGUAGE=”JavaScript”> <!-var i; for (i=0;i<document.anchors.length;i++) { document.write(“Name : “ + document.anchors[i].name + “<br>”); document.write(“Target : “ + document.anchors[i].target + “<br>”); document.write(“<br><br>”); } //--> </script> <a href=”#arriba”>Subir</a> </BODY> </HTML>

EL OBJETO IMAGE Gracias a este objeto (disponible a partir de la versión 3 de Netscape, aunque Microsoft lo adoptó en la versión 4 de su navegador) vamos a poder manipular las imágenes del documento, pudiendo conseguir efectos como el conocido rollover (cambio de imágenes al pasar el ratón sobre la imagen).

PROPIEDADES • border. Contiene el valor del parámetro ‘border’ de la imagen. • complete. Es un valor booleano que nos dice si la imagen se ha descargado completamente o no. • height. Contiene el valor del parámetro ‘height’ de la imagen. • hspace. Contiene el valor del parámetro ‘hspace’ de la imagen. • lowsrc. Contiene el valor del parámetro ‘lowsrc’ de la imagen. • name. Contiene el valor del parámetro ‘name’ de la imagen. • src. Contiene el valor del parámetro ‘src’ de la imagen. • vspace. Contiene el valor del parámetro ‘vspace’ de la imagen. • width. Contiene el valor del parámetro ‘width’ de la imagen.  <HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE=”JavaScript”> <!-img1 = new Image(); img1.src = “/graficos/nni1b.gif”; img2 = new Image(); img2.src = “/graficos/nni1a.gif”;

FORMULARIOS En este capítulo finalizamos el estudio de los objetos del navegador viendo cómo manipular formularios. Este punto es especialmente importante: si aprendemos correctamente a manipular todos los objetos de un formulario, podremos hacer funciones que nos permitan validarlo antes de enviar estos datos a un servidor, ahorrándole la faena de tener que verificar la corrección de los datos enviados.

EL OBJETO FORM Este objeto es el contenedor de todos los elementos del formulario. Como ya vimos al tratar el objeto document, los formularios se agrupan en un array dentro de document. Cada elemento de este array es un objeto de tipo form.

PROPIEDADES •

action. Es una cadena que contiene la URL del parámetro ACTION del form, es decir, la

• • •

dirección en la que los datos del formulario serán procesados. elements. Es un array que contiene todos los elementos del formulario, en el mismo orden en el que se definen en el documento HTML. Por ejemplo, si en el formulario hemos puesto, en este orden, una caja de texto, un checkbox y una lista de selección, la caja de texto será elements[0], el checkbox será elements[1] y la lista de selección será elements[2]. encoding. Es una cadena que tiene la codificación mime especificada en el parámetro ENCTYPE del form. method. Es una cadena que tiene el nombre del método con el que se va a recibir/procesar la información del formulario (GET/POST).

MÉTODOS • •

reset(). Resetea el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo RESET dispuesto en el form. submit(). Envía el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo SUBMIT dispuesto en el form. Vistas ahora las propiedades y métodos del objeto form, pasamos a estudiar, uno por uno, todos los objetos contenidos en el formulario.

LOS OBJETOS TEXT, TEXTAREA Y PASSWORD Estos objetos representan los campos de texto dentro de un formulario. Además, el objeto password es exactamente igual que el text salvo en que no muestra los caracteres introducidos por el usuario, poniendo asteriscos (*) en su lugar.

PROPIEDADES • • • •

dafaultValue. Es una cadena que contiene el valor por defecto que se le ha dado a uno de estos objetos por defecto. name. Es una cadena que contiene el valor del parámetro NAME. value. Es una cadena que contiene el valor del parámetro VALUE. maxlength. Número máximo de caracteres que puede contener el campo de texto.

MÉTODOS • • •

blur(). Pierde el foco del ratón sobre el objeto especificado. focus(). Obtiene el foco del ratón sobre el objeto especificado. select(). Selecciona el texto dentro del objeto dado.

<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE=”JavaScript”> <!-function Mostrar() { alert(‘Su nombre: ‘ + formulario.nombre.value);

alert(‘El password: ‘ + formulario.pass.value);

} //--> </script> <BODY> <form action=”procesa.phtml” name=”formulario” id=”formulario” method=”GET”> Nombre: <input type=”text” name=”nombre” value=”Tu nombre” maxlength=”15”><br> Password: <input type=”password” name=”pass” maxlength=”10”><br> </form> <a href=”javascript:Mostrar();”>Mostrar datos</a><br> </BODY> </HTML>

EL OBJETO BUTTON Tenemos tres tipos de botones: un botón genérico, ‘button’, que no tiene acción asignada, y dos botones específicos, ‘submit’ y ‘reset’. Estos dos últimos sí que tienen una acción asignada al ser pulsados: el primero envía el formulario y el segundo limpia los valores del formulario.

PROPIEDADES • •

name. Es una cadena que contiene el valor del parámetro NAME. value. Es una cadena que contiene el valor del parámetro VALUE.

MÉTODOS •

click(). Realiza la acción de pulsado del botón

<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE=”JavaScript”> <!-function Mostrar(boton) { alert(‘Ha hecho click sobre el boton: ‘ + boton.name+’, de valor:’+boton.value); return true; } //--> </script> <BODY> <form action=”procesa.phtml” name=”formulario” id=”formulario” method=”GET”> Un boton: <input type=”button” name=”Boton1” value=”El boton 1” OnClick=”Mostrar(this);”><br> <br>

Un boton: <input type=”button” name=”Boton2” value=”El boton 2” OnClick=”Mostrar(this);”><br> <br> Un boton: <input type=”button” name=”Boton3” value=”El boton 3” OnClick=”Mostrar(this);”><br> </form> </BODY> </HTML>

EL OBJETO CHECKBOX Las “checkboxes” nos permiten seleccionar varias opciones marcando el cuadrito que aparece a su izquierda. El cuadrito pulsado equivale a un “sí” y sin pulsar a un “no” o, lo que es lo mismo, a “true” o “false”.

PROPIEDADES • • • •

checked. Valor booleano que nos dice si el checkbox está pulsado o no defaultChecked. Valor booleano que nos dice si el checkbox debe estar seleccionado por defecto o no name. Es una cadena que contiene el valor del parámetro NAME. value. Es una cadena que contiene el valor del parámetro VALUE.

MÉTODOS •

click(). Realiza la acción de pulsado del botón

<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE=”JavaScript”> <!-function Mostrar(boton) { msg=”Opcion 1:”+formulario.check1.checked+”\n” msg+=”Opcion 2:”+formulario.check2.checked+”\n” msg+=”Opcion 3:”+formulario.check3.checked+”\n” alert(msg); } //--> </script> <BODY> <form action=”procesa.phtml” name=”formulario” id=”formulario” method=”GET”> <input type=”checkbox” name=”check1” checked> Opcion 1<br> <input type=”checkbox” name=”check2”> Opcion 2<br> <input type=”checkbox” name=”check3” checked> Opcion 3<br>

</form> <A href=”javascript:Mostrar()”>Ver valores</A> </BODY> </HTML>

EL OBJETO RADIO Al contrario que con los checkbox, que nos permiten elegir varias posibilidades entre las dadas, los objetos radio sólo nos permiten elegir una de entre todas las que hay. Están pensados para posibilidades mútuamente excluyentes (no se puede ser a la vez mayor de 18 años y menor de 18 años, no se puede estar a la vez soltero y casado, etc.).

PROPIEDADES • • • • •

checked. Valor booleano que nos dice si el radio está seleccionado o no. defaultChecked. Valor booleano que nos dice si el radio debe estar seleccionado por defecto o no. length. Valor numérico que nos dice el número de opciones dentro de un grupo de elementos radio. name. Es una cadena que contiene el valor del parámetro NAME. value. Es una cadena que contiene el valor del parámetro VALUE. Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben tener el mismo valor en NAME.

MÉTODOS •

click(). Realiza la acción de pulsado del botón.

<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE=”JavaScript”> <!-function Mostrar(boton) { msg=”Elementos:”+formulario.edad.length+”\n”; msg+=”Menor de 18 años:”+formulario.edad[0].checked+”\n”; msg+=”Entre 18 y 60 años:”+formulario.edad[1].checked+”\n”; msg+=”Mayor de 60 años:”+formulario.edad[2].checked+”\n”; alert(msg); } //--> </script> <BODY> <form action=”procesa.phtml” name=”formulario” id=”formulario” method=”GET”>

Edad:<br> <input type=”radio” name=”edad” value=”<18”> Menor de 18 años.<br> <input type=”radio” name=”edad” value=”>18 y <60” checked> Entre 18 y 60 años.<br> <input type=”radio” name=”edad” value=”>60”> Mayor de 60 años.<br> </form> <A href=”javascript:Mostrar()”>Ver valores</A> </BODY> </HTML>

EL OBJETO SELECT Este objeto representa una lista de opciones dentro de un formulario. Puede tratarse de una lista desplegable de la que podremos escoger alguna (o algunas) de sus opciones.

PROPIEDADES

Objeto select • length. Valor numérico que nos indica cuántas opciones tiene la lista • name. Es una cadena que contiene el valor del parámetro NAME • options. Se trata de un array que contiene cada una de las opciones de la lista. Este array tiene, a su vez, las siguientes propiedades: • defaultSelected. Valor booleano que nos indica si la opción está seleccionada por defecto. • index. Valor numérico que nos da la posición de la opción dentro de la lista. • length. Valor numérico que nos dice cuántas opciones tiene la lista. • options. Cadena con todo el código HTML de la lista. • selected. Valor booleano que nos dice si la opción está actualmente seleccionada o no. • text. Cadena con el texto mostrado en la lista de una opción concreta. • value. Es una cadena que contiene el valor del parámetro VALUE de la opción concreta de la lista. • selectedIndex. Valor numérico que nos dice cuál de todas las opciones disponibles está actualmente seleccionada.  <HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE=”JavaScript”> <!-function Mostrar(boton) { msg=”Elementos:”+formulario.edad.length+”\n”; msg+=”Edad: “+formulario.edad.options[formulario.edad.selectedIndex].value+”\n”; alert(msg);

} //--> </script>

<BODY> <form action=”procesa.phtml” name=”formulario” id=”formulario” method=”GET”> Edad:<br> <select name=”edad”> <option value=”<18” SELECTED>Menor de 18 años</option> <option value=”>18 y <60”>Entre 18 y 60 años</option> <option value=”>60”>Mayor de 60 años</option> </select> </form> <A href=”javascript:Mostrar()”>Ver valores</A> </BODY> </HTML>

EL OBJETO HIDDEN Gracias a este objeto podemos almacenar información extra en el formulario de forma completamente transparente para el usuario, pues no se verá en ningún momento que tenemos estos campos en el documento. Es parecido a un campo de texto (objeto text) salvo que no tiene valor por defecto (no tiene sentido pues el usuario no va a modificarlo) y que no se puede editar.

PROPIEDADES • •

name. Es una cadena que contiene el valor del parámetro NAME. value. Es una cadena que contiene el valor del parámetro VALUE.

CSS CONCEPTOS BÁSICOS ¿Por qué?

Las hojas de estilo vienen a intentar volver a separar en un documento el estilo lógico del estilo físico, dejando este último en bloques de definición de estilos separados de la estructura del documento. CSS son las siglas de “Cascade StyleSheet”. Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML, y trata de dar la separación definitiva de la lógica (estructura) y el físico (presentación) del documento.

ESTILOS

El estilo lógico se refiere a la lógica del documento: cabeceras, párrafos, ... no se preocupa de la apariencia final, sino de la estructura del documento. Por el contrario, el estilo físico no se preocupa de la estructura del documento, sino por la apariencia final: párrafos con un cierto tipo de letra, tablas con un determinado color de fondo, ... La finalidad de las hojas de estilo es crear unos estilos físicos, separados de las etiquetas HTML (en lugar de como parámetros de las etiquetas), y aplicarlos en los bloques de texto en los que se quieran aplicar. Estos estilos podrán ser modificados en algunas ocasiones desde JavaScript, y esto empieza a darnos un poco más de interactividad.

CAPAS

Por otra parte, tenemos las capas, que vienen a darnos la solución al problema de poner elementos justo en la posición que queramos, evitándonos tener que hacer artificios para obtener el resultado buscado. Una capa será una parte más del documento que puede ser situada en cualquier posición del mismo, consiguiendo que se solape sobre algunos elementos si es lo que necesitamos, adecuando sus márgenes y otras propiedades a lo que queramos hacer...

APLICACIÓN DIRECTA EN ETIQUETAS Tenemos varias posibilidades para definir un estilo: especificarlo directamente en la etiqueta en la que queremos usarlo, definirlo aparte y aplicarlo en las etiquetas que queramos, o definir estilos globales para las etiquetas (que podrán ser cambiados en las que no se desee aplicarlos). Para aplicar un estilo a una etiqueta concreta, usaremos la sintaxis: <etiqueta STYLE=”propiedad1:valor;...;propiedadN:valor”> ... </etiqueta> Etiqueta es la etiqueta de HTML en la que queremos dar una apariencia concreta (<P>, <B>, <I>, ...). STYLE es el parámetro que indica que vamos a aplicar el estilo definido a continuación a la etiqueta en la que se encuentra. La definición del estilo son pares propiedad:valor separados por punto y coma. Propiedad será la característica de la etiqueta que queramos modificar (el color, el tamaño de la fuente, el tipo de letra, ...) y valor es el valor que queremos darle (color negro, 8 puntos de tamaño de letra, ...). Por ejemplo, si tenemos un texto en negrita y queremos que salga con un tamaño de letra 14 y en color rojo, haremos: La negrita que vemos <B STYLE=”font-size:14pt;color:red”>es más grande y está en rojo</B>. cuyo efecto es:

La negrita que vemos es más grande y está en ROJO.

SEPARAR HTML DE CSS

Como sabemos definir estilos globales, sería interesante tenerlos definidos en un archivo aparte, pues si queremos dotar a todas las páginas de los mismos estilos, no es tarea grata copiar y pegar la definición de los estilos en cada una de las páginas. Afortunadamente, sí podemos definir los estilos en un fichero distinto al documento HTML, y después referenciarlo desde el propio documento HTML. Esto lo haremos con la siguiente etiqueta, dentro de la cabecera del documento (entre <HEAD> ... </HEAD>): <LINK REL=”stylesheet” TYPE=”text/css” HREF=”URL_Hoja.css”> Veamos un ejemplo:  <HTML> <HEAD> <TITLE> Ejemplo con hoja de estilo externa </TITLE> <LINK REL=”stylesheet” TYPE=”text/css” HREF=”ejemplo.css”> </HEAD> <BODY BGCOLOR=white> <H2>Prueba de definición de estilos en una hoja de estilo externa</H2> Como puede verse, la apariencia de esta página queda completamente definida por los estilos que hemos especificado en el bloque STYLE en la cabecera del documento. Los márgenes son más amplios de lo habitual, la <B>negrita</B> tiene un tamaño y un color fijos, los trozos de texto en teletipo como <TT>este fragmento</TT> también tienen definida su fuente, tamaño y color, y vamos a ver cómo quedan las tablas, para finalizar el ejemplo: <P> <CENTER> <TABLE BORDER=1 CELLSPACING=2 CELLPADDING=2> <TR> <TH>Cabecera 1</TH> <TH>Cabecera 2</TH> </TR> <TR> <TD>Celda (1,1)</TD> <TD>Celda (1,2)</TD> </TR> </TABLE> </CENTER> </BODY> </HTML> Si quisiéramos que otros documentos tuvieran el mismo estilo, sólo tendríamos que usar la etiqueta LINK para aplicarlos. Esa es la ventaja de las hojas de estilo externas. ejemplo.css /* Manual de CSS de WebEstilo.com */ /* Definición de estilos en un archivo aparte */ /* Estilo para el documento */

BODY {font-family:Verdana,sans-serif;font-size:x-small; margin-left:0.25in; margin-right:0.25in} /* Estilo para la cabecera de nivel 2 */ H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red} /* Estilos para otras etiquetas */ B, TD {font-family:Verdana,sans-serif;font-size:x-small; color:olive} TH {font-family:Verdana,sans-serif;font-size:x-small; color:white;background-color:#0080C0} PRE, TT, CODE {font-family:Courier New,Courier; font-size:9pt;color:maroon}

HERENCIA DE ESTILO En el conjunto de las etiquetas HTML podemos establecer una jerarquía de etiquetas que contienen a otras, para darnos una relación de herencia. En primer lugar, tendríamos la etiqueta <BODY> ... </ BODY>, que hace referencia a todo el documento, y podemos considerarla como la etiqueta “padre” de todas las demás etiquetas de formato, puesto que todas ellas se encuentran contenidas en el cuerpo (body) del documento. Después, tenemos las etiquetas de párrafo (<P>...</P>, <DIV>...</DIV>, cabeceras, ...) y etiquetas de elementos insertados en línea (<B>...</B>, <I>...</I>, <SPAN>...</SPAN>, ...). Las etiquetas de párrafo serán contenedoras de las etiquetas de elementos insertados en línea (en el sentido que les estamos dando), estableciéndose así una nueva relación “padre-hijo”. Esto es interesante porque la mayoría de los estilos que se definen se heredan, es decir, si definimos un cierto estilo para una etiqueta, este estilo será heredado por las etiquetas “hijas”, con lo que no tendremos que volver a definirlo para ellas. Por ejemplo, si definimos un tipo de letra y un color para la fuente para la etiqueta <BODY> ... </BODY>,este estilo será heredado por todas las etiquetas del documento y no tendremos que definirlo para las otras etiquetas. Sin embargo, si tenemos definido un estilo para una etiqueta “padre”, podremos definir un estilo distinto para una etiqueta “hija”, es decir, un estilo heredable se hereda a no ser que especifiquemos lo contrario. Se heredarán aquellas características que no pongamos, y se aplicarán aquellas que definamos para la etiqueta que no tenga la etiqueta “padre”. Veamos un ejemplo:  <HTML> <HEAD> <TITLE> Ejemplo 1 de herencia </TITLE> <LINK REL=”stylesheet” TYPE=”text/css” HREF=”ejemplo.css”> </HEAD> <BODY BGCOLOR=white> Todo el texto tiene definido el estilo Fuente:Verdana, Tamaño:x-small, Margen izquierdo:0.25in, Margen derecho:0.25in, <SPAN STYLE=”color:red”>pero este trozo de línea es de un color distinto, conservando el resto de propiedades</SPAN>, y

eso hace interesante la herencia y la posibilidad de cambiar en partes concretas los estilos heredados. </BODY> </HTML> ejemplo.css /* Manual de CSS de style.com */ /* Definición de estilos en un archivo aparte */ /* Estilo para el documento */ BODY {font-family:Verdana,sans-serif;font-size:x-small; margin-left:0.25in; margin-right:0.25in} /* Estilo para la cabecera de nivel 2 */ H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red} /* Estilos para otras etiquetas */ B, TD {font-family:Verdana,sans-serif;font-size:x-small; color:olive} TH {font-family:Verdana,sans-serif;font-size:x-small; color:white;background-color:#0080C0} PRE, TT, CODE {font-family:Courier New,Courier; font-size:9pt;color:maroon}

ESTILO EN FUNCIÓN DEL CONTEXTO Otro tema a comentar aquí es la posibilidad de definir, en lugar de un estilo para una etiqueta, sin más, es definir un estilo en función del contexto. Por ejemplo, es posible que solamente queramos que el texto en negrita sea de color verde cuando se encuentre en una celda de una tabla, o que sea de color púrpura cuando forme parte de una lista. Esto lo definiríamos como sigue:  <HTML> <HEAD> <TITLE> Ejemplo de estilos según el contexto </TITLE> <LINK REL=”stylesheet” TYPE=”text/css” HREF=”ejemplo.css”> <STYLE TYPE=”text/css”> <!-TD B {color:green} UL B {color:purple} //--> </STYLE> </HEAD> <BODY BGCOLOR=white> En este ejemplo, seguimos con los estilos de la hoja externa, pero vamos a comprobar que se verifican los estilos definidos en función del contexto: la negrita

de una celda cualquiera de una tabla debe ser de color verde, y la negrita de una lista debe ser de color púrpura. <P> <UL TYPE=DISC> <LI>Un elemento cualquiera</LI> <LI>Un elemento con una palabra en <B>negrita</B></LI> <LI>Otro elemento cualquiera</LI> </UL><P> <CENTER> <TABLE BORDER=1 CELLSPACING=2 CELLPADDING=2> <TR><TH>Cabecera 1</TH><TH>Cabecera 2</TH></TR> <TR><TD>Celda (1,1)</TD><TD>Celda (1,2)</TD></TR> <TR><TD><B>Celda (2,1) en negrita</B></TD><TD>Celda (2,2)</TD></TR> </TABLE> </CENTER> </BODY> </HTML> ejemplo.css /* Manual de CSS de style.com */ /* Definición de estilos en un archivo aparte */ /* Estilo para el documento */ BODY {font-family:Verdana,sans-serif;font-size:x-small; margin-left:0.25in; margin-right:0.25in} /* Estilo para la cabecera de nivel 2 */ H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red} /* Estilos para otras etiquetas */ B, TD {font-family:Verdana,sans-serif;font-size:x-small; color:olive} TH {font-family:Verdana,sans-serif;font-size:x-small; color:white;background-color:#0080C0} PRE, TT, CODE {font-family:Courier New,Courier; font-size:9pt;color:maroon}

CLASES Es normal querer definir unos estilos globales en hojas externas que homogeneicen el aspecto de nuestras páginas, y luego, en una página concreta querer variar el estilo en alguna etiqueta concreta. Como ya sabemos, esto podemos hacerlo definiendo el estilo localmente en esa etiqueta. Pero también puede suceder que esta definición de un estilo concreto queramos aplicarla a otra etiqueta. Lo primero que se nos ocurre es copiar esta definición del estilo a la otra etiqueta en la que también queremos aplicarlo. Sin embargo, este estilo concreto que queremos aplicar a algunas

etiquetas concretas puede ser definido en un bloque de estilo global o, incluso, en la hoja externa, y aplicarlo, gracias a un identificador, a las etiquetas concretas en las que queramos que se aplique dicho estilo. Con este fin se definen las clases. Una clase es una definición de un estilo que en principio no está asociado a alguna etiqueta HTML, pero que podemos asociar, en el documento, a etiquetas concretas. Para ello, en primer lugar definimos la clase (en el bloque de estilos o en la hoja externa) como un estilo más, de esta forma: .Nombre_de_la_Clase {propiedad1:valor;...;propiedadN:valor} Es decir, escribiendo un punto seguido del nombre que le queramos dar a la clase, y definiendo el estilo como lo definimos para cualquier otra etiqueta: pares propiedad:valor separados por punto y coma y encerrados entre llaves. Además, podremos definir cuantas clases necesitemos. Ahora, para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos el parámetro CLASS como sigue: <etiqueta CLASS=”Nombre_de_la_Clase”> ... </etiqueta> donde Nombre_de_la_Clase es el nombre que le hemos dado a la clase, sin el punto.  <HTML> <HEAD> <TITLE> Ejemplo de uso de clases </TITLE> <STYLE TYPE=”text/css”> <!-BODY {font-family:Verdana,sans-serif;font-size:x-small} P,A,B {color:red} .BAzul {color:blue} //--> </STYLE> </HEAD> <BODY BGCOLOR=white> En este ejemplo vamos a ver cómo se aplican las clases. Por ejemplo, <B>esta negrita</B> utiliza el estilo definido en el bloque, pero <B CLASS=”BAzul”>esta otra negrita</B> tiene un color distinto. Y no sólo podemos usar la clase para la negrita. Por ejemplo, <SPAN CLASS=”BAzul”>este trozo de línea también utiliza la clase para su estilo particular</SPAN>. </BODY> </HTML>

ETIQUETAS Vamos ahora a estudiar el atributo ID de una etiqueta HTML en relación a la definición de estilos. Cualquier etiqueta HTML puede tener como parámetro la etiqueta ID seguida de un nombre, por ejemplo: <etiqueta ID=”NombreReferencia”> ... </etiqueta>

Este “NombreReferencia” debe ser único en el documento HTML (es decir, no debe haber dos etiquetas con el mismo ID), puesto que nos servirá para tratarla (si lo necesitamos) desde JavaScript, y por esto no debe haber confusión con el nombre como referencia. Para definir un estilo mediante un ID, usaremos la siguiente notación (en un bloque de estilo o en la hoja externa): #Nombre_del_ID {propiedad1:valor;...;propiedadN:valor} Es decir, escribiendo # seguido del nombre que le queramos dar al ID, y definiendo el estilo como ya sabemos: pares propiedad:valor separados por punto y coma y encerrados entre llaves. Podremos definir todos los ID que queramos, pero cada ID sólo debe ser asociado a una única etiqueta concreta de la siguiente forma: <etiqueta ID=”Nombre_del_ID”> ... </etiqueta> Así identificaremos de forma unívoca a esa etiqueta concreta, asignándole la definición del estilo hecha en el bloque o en la hoja para ese ID, y además nos permitirá tratarlo (por ejemplo, cambiando algunas características del estilo definido) desde JavaScript, que usará ese identificador para saber sobre quién ha de actuar, suponiendo que quisiéramos hacerlo.

PSEUDOCLASES Hay ocasiones en las que HTML da a algunas etiquetas un estilo propio: por ejemplo, los enlaces aparecen por defecto de otro color y subrayados. Estos elementos son las pseudoclases. Por ahora, sólo están definidas para la etiqueta <A>. La forma de definir un estilo para una pseudoclase es la siguiente: etiqueta:pseudoclase {propiedad1:valor;...;propiedadN:valor} y las pseudoclases de que disponemos son: link

Nos dice el estilo de un enlace que no ha sido visitado.

visited Nos dice el estilo de un enlace que ha sido visitado. active Nos dice el estilo de un enlace que está siendo pulsado. hover Nos dice el estilo de un enlace sobre el que está pasando el ratón. Por ejemplo, si deseásemos que apareciesen todos los enlaces sin subrayar, definiríamos los siguientes estilos: A:link,A:visited,A:active {text-decoration:none} Las pseudoclases pueden usarse de forma conjunta con las clases, para aplicar ese estilo sólo en casos concretos, siguiendo la notación: A.NombreClase:pseudoclase y también se pueden usar en función del contexto.

PROPIEDADES Ahora que ya hemos visto cómo se definen estilos en un documento HTML, así como todas las posibilidades en cuanto a jerarquías, clases, ..., nos vamos a centrar en qué es lo que podemos poner en cada una de esas parejas propiedad:valor que decíamos que definen un estilo. Para facilitar su identificación, los vamos a dividir en las siguientes categorías: Propiedades: •

FORMATO DE BLOQUE

•

LAS FUENTES

•

TEXTO

•

COLOR Y FONDO

•

LISTAS

Hay propiedades en las que necesitaremos especificar alguna longitud (por ejemplo, en los márgenes). Para ello, usaremos esta notación: [-]NNtipo - es el signo, y es opcional (es lo que quieren decir los corchetes, que se trata de algo opcional, los corchetes no hay que ponerlos). NN es la cantidad, y tipo es la magnitud. Esta última puede ser relativa o absoluta. Las magnitudes relativas son em (el alto de la M mayúscula), ex (la mitad de la altura de la M mayúscula, que viene a ser aproximadamente la altura de la x minúscula), px (píxel). Las magnitudes absolutas son pt (puntos), pc(picas), in (inches, es decir, pulgadas), mm (milímetros), cm (centímetros). Hay otras propiedades en las que tendremos que especificar un color; para ello hay tres posibilidades: escribiéndolo de la misma forma que en HTML, con la notación #RRGGBB, siendo RR, GG, BB los valores en hexadecimal de las componentes roja, verde y azul del color, usando algún nombre predefinido, o usando la función rgb(R,G,B), donde R, G, B son los valores en decimal de las componentes roja, verde y azul del color. Un último detalle a comentar antes de pasar al estudio de las propiedades y sus posibles valores, es el siguiente: desde el punto de vista de las hojas de estilo, existen tres tipos de elementos HTML: de bloque (que son los que hacen empezar línea nueva, como <P>, las cabeceras, ...), incrustados en línea (que no alteran la línea en la que se encuentran, como <B>, <I>, ...) y de lista (que son los elementos de una lista delimitados por <LI>). Todo elemento de bloque se considera rodeado por una caja, con propiedades de márgenes, borde, padding y fondo. Además, la caja que lo rodea tiene un cierto ancho, y una cierta alineación con respecto al documento.

BLOQUE Nombre

margin-left, margin-right, margin-top, marginbottom, margin longitud, porcentaje, auto

padding-left, padding-right, padding-top, padding-bottom, padding longitud, porcentaje

border-left-width, border-right-width, border-top-width, border-bottom-width, border-width longitud

Valores posibles

none, solid, double, inset, outset, groove, ridge none

todos No Relativo al ancho del padre

todos No -

Nombre

border-color

width

float

clear

Valores posibles Valor por defecto Aplica a

none, color

longitud, porcentaje, auto auto

left, right, none

none, left, right, both

none

todos

Heredado Valor porcentual

No -

elementos a nivel de bloque No Relativo al ancho del padre

No -

Valor por defecto Aplica a Heredado Valor porcentual

none todos

border-style

Aclaraciones sobre algunos valores: Longitud: Debe ser un número seguido de una unidad de medida, tal y como se comentaba unos párrafos más arriba. Por ejemplo, un valor posible es 12pt, ó 0.2in. Porcentaje: Fija el tamaño en valor porcentual respecto al padre.

FUENTES Nombre

font-size

Valores posibles

absoluto, relativo, familia bolder, lighter, 100- normal, bold, italic porcentaje, longi900 tud medium user preferences normal normal

Valor por defecto Aplica a Heredado Valor porcentual

todos Sí Relativo al padre

font-family

todos Sí -

font-weight

todos Sí -

font-style

todos Sí -

Aclaraciones sobre algunos valores: En font-size hemos dicho que puede tomar un valor absoluto; los posibles valores absolutos son: xxlarge, x-large, large, medium, small, x-small, xx-small. En font-family hemos dicho que el valor será family; esto hace referencia a una lista de nombres de familias de fuentes, separadas por comas. El navegador buscará por orden cada una de las fuentes especificadas, y usará la primera que encuentre instalada en el sistema. Por ejemplo, podemos poner font-family:Verdana,Arial; esto significará que el navegador buscará la fuente Verdana, y si no está instalada en el ordenador de quien ve la página, buscará la fuente Arial, por ser la siguiente en la lista. Así continuaríamos si hubiera más fuentes en la lista. Si no encuentra ninguna, usará la fuente por defecto. Es importante saber que existen unas familias de fuentes genéricas que están en todos los ordenadores, a fin de ponerlas como última alternativa en la lista. Estas familias son: serif, sans-serif, monospace, cursive, fantasy. En font-weight teníamos las posibilidades bolder, lighter y 100-900. Las dos primeras son relativas al valor actual. 100-900 quiere decir que podemos especificar un valor numérico entre 100 y 900. 100 será el más ligero y 900 el más pesado.

TEXTO Nombre

line-height

Valores posibles Valor por defecto Aplica a Heredado Valor porcentual

text-decoration

text-transform

text-align

text-indent

número, longitud, none, underline, porcentaje, normal line-through, blink normal none

capitalize, uppercase, lowercase none

left, right, center, justify, none left

longitud, porcentaje

elementos a nivel de bloque

todos

Sí Relativo al tamaño de la fuente

No -

Sí -

elementos a ni- elementos vel de bloque a nivel de bloque Sí Sí Relativo al ancho del elemento padre

Aclaraciones sobre algunos valores: El line-height sólo se aplica a elementos a nivel de bloque. Si se indica un número o porcentaje, esta distancia será el producto de este número por el tamaño de la fuente del elemento actual. La diferencia está en que, al indicar un número, los elementos hijos heredan el factor, mientras que, en otro caso, heredan el tamaño de la separación.

COLOR Y FONDO Nombre

color

Valores posibles Valor por defecto Aplica a Heredado Valor porcentual

color

backgroundcolor color

black

ninguno

backgroundimage URL entre paréntesis ninguno

todos Sí -

todos No -

Aclaraciones sobre algunos valores: Para especificar un color hay tres posibilidades: • Escribiéndolo de la misma forma que en HTML, con la notación #RRGGBB, siendo RR, GG, BB los valores en hexadecimal de las componentes roja, verde y azul del color. • Usando algún nombre predefinido. • Usando la función rgb(R,G,B), donde R, G, B son los valores en decimal de las componentes roja, verde y azul del color.

LISTAS Nombre

display

list-style-type

Valores posibles

block, inline, listitem, none

Valor por defecto Aplica a

según HTML

disc, circle, normal, pre, square, decimal, none upper-roman, lower-roman, upper-alpha, lower-alpha disc según HTML

Heredado Valor porcentual

No -

todos

elementos cuya propiedad display es list-item Sí -

white-space

elementos a nivel de bloque Sí -

Aclaraciones sobre algunos valores: En display se indica si un elemento es de nivel de bloque (block), incrustado (inline) o de nivel de lista (list-item). Si se ajusta el valor a none, el elemento no será mostrado, lo que se extiende a sus “hijos” y la caja que lo rodea. Los elementos de bloque no responden si se les ajusta como inline. Son muchas las posibilidades que tenemos para variar propiedades, pero al final terminaremos aprendiéndonos las seis o siete que más usemos. Es un interesante ejercicio practicar aplicando los posibles estilos en trozos del documento para ir adquiriendo más práctica.