MANUAL DE HTML

HTML

Indice

CAPITULO 1. INTRODUCCIN AL HTML ...................................................................... 1.1. Introduccin al HTML ........................................................................................................ 1.2. Elementos de los documentos HTML ................................................................................. 1.3. El elemento HTML ............................................................................................................. 1.4. Un primer documento HTML ............................................................................................. 1.5. Esqeuma de denominacin para los documentos HTML .................................................... 1.5.1. Tipos de archivos MIME .......................................................................................

1 3 3 5 6 7 8

CAPITULO 2. ELEMENTOS Y DIRECTIVAS DEL LENGUAJE HTML ..................... 2.1. Cabecera de los documentos HTML ................................................................................... 2.1.1. Base ........................................................................................................................ 2.1.2. Isindex .................................................................................................................... 2.1.3. Link ........................................................................................................................ 2.1.4. Meta ....................................................................................................................... 2.1.5. NexTid ................................................................................................................... 2.1.6. Title ........................................................................................................................ 2.1.7. Script ...................................................................................................................... 2.1.8. Style ....................................................................................................................... 2.2. El cuerpo (body) de un documento HTML ......................................................................... 2.3. Organizacin de los elementos en el cuerpo ....................................................................... 2.3.1. Cabeceras (Hn)....................................................................................................... 2.3.2. Prrafos (P) ............................................................................................................ 2.3.3. El elemento Address .............................................................................................. 2.3.4. El elemento Blokquote(BQ)................................................................................... 2.3.5. Linea Horizontal (HR) ........................................................................................... 2.3.6. Texto Preformateado (PRE) ................................................................................... 2.3.7. Formularios (FORM) ............................................................................................. 2.3.8. Tablas (TABLE) .................................................................................................... 2.4. Listas ................................................................................................................................... 2.4.1. Listas de Glosario (DL) ......................................................................................... 2.4.2. Listas regulares sin nmero de secuencia .............................................................. 2.4.3. Listas regulares con nmero de secuencia ............................................................. 2.5. Enfatizacin de caracteres ................................................................................................... 2.5.1. Estilos lgicos ........................................................................................................ 2.5.2. Estilos Fsicos ........................................................................................................ 2.6. Anclas de Hipertexto ........................................................................................................... 2.7. Elementos a nivel de carcter .............................................................................................. 2.7.1. Saltos de lnea (BR) ............................................................................................... 2.7.2. Imgnes (IMG)....................................................................................................... 2.8. Extensiones de Netscape y Microsoft ................................................................................. 2.8.1. Center ..................................................................................................................... 2.8.2. Font ........................................................................................................................ 2.8.3. Basefont ................................................................................................................. 2.8.4. Applet..................................................................................................................... 2.8.5. Marquee ................................................................................................................. 2.8.6. Map ........................................................................................................................ 2.8.7. Frame ..................................................................................................................... 2.9. Hojas de estilo ..................................................................................................................... 2.9.1. Vision general ........................................................................................................ 2.9.2. Directivas dentro de una hoja de estilo .................................................................. 2.9.3. Enlazando hojas de estilo a los documentos ..........................................................

9 11 11 11 12 13 13 13 13 13 14 15 15 16 17 17 17 18 18 21 27 27 28 29 30 31 31 33 35 35 35 39 39 40 41 41 41 42 43 46 46 46 47

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

Indice

HTML

2.9.4. Notacin para los valores de las propiedades ms habituales ................................ 2.10. Sonido ................................................................................................................................ 2.11. Objetos empotrados ...........................................................................................................

49 50 50

CAPITULO 3. UNA GUA DE ESCRITURA DE DOCUMENTOS HTML ..................... 3.1.- Sobre la estructura general de un hipertexto ...................................................................... 3.2.- Sobre la estructura de un documento ................................................................................. 3.2.1. Indicar el estado de la informacin del documento ................................................ 3.2.2. Poner los enlaces en el contexto ............................................................................. 3.2.3. Dirmar el documento .............................................................................................. 3.2.4. Dar ttulo adecuado al documento .......................................................................... 3.2.5. Considerar un formato independiente del dispositivo ............................................ 3.2.6. No utilizar los enlaces como notas a pi de pgina ................................................ 3.2.7. Anotar adecuadamente las referencias que se hagan .............................................. 3.2.8. Escribir el documento para que pueda tambin ser impreso .................................. 3.2.9. Escribir texto que sea legible, aunque tenga enlaces.............................................. 3.2.10. No abusar de imgenes y grficos ........................................................................

51 53 54 54 55 55 55 55 56 56 56 56 56

CAPTULO 4. EL MODELO DE OBJETOS DE ACTIVEX-SCRIPT .............................. 4.1. Conceptos fundamentales de la programacin orientada a objetos ..................................... 4.2. Los objetos del entorno de programacin activeX-Script ................................................... 4.3. Ejemplos para la utilizacin de propiedades y mtodos ...................................................... 4.3.1. Creacin de cuadros de dilogo.............................................................................. 4.3.2. La barra de estado .................................................................................................. 4.3.3. Las configuraciones de color.................................................................................. 4.3.4. Presentacin del texto............................................................................................. 4.3.5. Hyperlinks .............................................................................................................. 4.3.6. Formularios ............................................................................................................ 4.4. El modelo de objetos ActiveX-Scripting ............................................................................. 4.4.1. El objeto Window................................................................................................... 4.4.2. El objeto Document ................................................................................................ 4.4.3. El objeto Form........................................................................................................ 4.4.4. El objeto Location .................................................................................................. 4.4.5. El objeto Link ......................................................................................................... 4.4.6. El objeto Anchor .................................................................................................... 4.4.7. El objeto Element ................................................................................................... 4.4.8. El objeto History .................................................................................................... 4.4.9. El objeto Navigator ................................................................................................

57 59 59 60 60 62 63 64 65 67 69 69 73 75 77 78 80 81 84 84

II

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 1

Captulo 1 INTRODUCCIN AL HTML

1.1.- INTRODUCCIN AL HTML
El HyperText Markup Language (HTML) es un lenguaje sencillo que permite describir documentos con estructura de hipertexto que son transportables a diferentes plataformas (PC, Macintosh, estaciones de trabajo,..). HTML se basa en el SGML (Standard Generalized Markuy Language). SGML se utiliza para describir la estructura general de diferentes clases de documentos, centrndose en su contenido y no en su apariencia. HTML no es un procesador de texto tipo WYSIWIG (What You See is What you Get: lo que ves es lo que tienes), ya que la presentacin de los documentos la llevan a cabo los visualizadores. Con HTML lo que se hace es especificar la estructura del documento (indicando cuales son los ttulos, prrafos, citas, definiciones, etc.) y los distintos efectos que se quieren dar a cada uno de ellos. La presentacin final del documento la realizan los visualizadores. Los documentos HTML son puro texto (ASCII) con las directivas (tags) incluidas en el propio texto. Estas directivas delimitan los distintos bloques de texto como diferentes elementos del documento. Por tanto hay que resaltar que los archivos de HTML contienen dos cosas: 1) El texto del documento que se desea visualizar. 2) Las directivas (tags) de HTML que estn incorporadas en el propio texto y que indican los bloques (o elementos) del documento, la estructura, el formato y los enlaces hipertextos a otros documentos o que insertan presentaciones de carcter multimedia La presentacin de un documento HTML utilizando diferentes visualizadores grficos es bsicamente similar. Las diferencias se reducen a pequeas modificaciones en la apariencia de los elementos. Por ejemplo, algunos elementos que aparecen en cursiva en un visualizador se interpretan en negrita en otros.

1.2.- ELEMENTOS DE LOS DOCUMENTOS HTML

Las directivas o instrucciones HTML, junto con el texto al que se aplican, se denominan un elemento HTML. A las directivas en HTML se las conoce tambin como tags y consisten en el nombre del elemento entre smbolos <y> (<nombre_tag>). Por ejemplo, un prrafo se pondra: <P> Esto es un prrafo. Generalmente los elementos HTML se identifican mediante una directiva de comienzo, en la que se pone el nombre del elemento y los atributos, seguido por el contenido y por una directiva de terminacin. Ejemplo: <H1> 1. Elementos de los documentos HTML </H1> Como se ve, el final se indica con una directiva de la forma </nombre_tag>, es decir, el nombre de la directiva entre los smbolos </y>.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

Captulo 1

HTML

Algunos elementos estn vacos, es decir, no afectan a ningn bloque del documento. Por ejemplo, un salto de lnea se crea con la directiva: <BR> Este elemento se considera includo dentro de la categora separadores mientras que los que se identifican con una directiva de comienzo y una directiva de terminacin estn incluidos en la categora de Contenedores. Los nombres de los elementos no son sensibles a maysculas/minsculas. El salto de lnea se puede poner equivalente de cualquiera de las formas siguientes: <BR>, <Br>, <br> Conviene advertir que segn el estandar HTML las vocales acentuadas y la letra se consideran caracteres especiales y se tienen que escribir mediante unas entidades que comienzan con el smbolo & y terminan con un punto y coma (;), entres estos smbolos se escribe un identificador del carcter especial deseado. : &aacute; : &Aacute; : &uuml; : &eacute; : &Eacute; : Uuml; : &iacute; : &Iacute; : &ntilde; : &oacute; : &Oacute; : &Ntilde; : &uacute; : &Uacute; : &#191;

: &#161;

1.2.1.- ATRIBUTOS DE LOS ELEMENTOS En una directiva de comienzo, entre el nombre del elemento y el delimitador que lo encierra (>) se permiten espacios en blanco y atributos. Un atributo consta de un nombre del atributo, un signo igual y un valor. El valor del atributo puede ser: 1) Una cadena de literales delimitados por comillas. 2) Un nombre simblico (una secuencia de letras, dgitos, puntos o rayas) Por ejemplo, el elemento ancla (A), que marca una regin de texto como el comienzo (o el final) de un enlace hipertexto, puede tener varios atributos. Uno de ellos, es HREF, que especifica el documento hipertexto que se enlaza con la parte de texto marcada. Para ello en la directiva de A se escribe: <A HREF=http://www.dia.uned.es/home.html>D.I.A.</A> En este caso el atributo HREF se le asigna el valor: http://www.dia.uned.es/home.html

Los tag de terminacin nunca tienen atributos. Los atributos de un elemento siempre se sitan en la directiva de comienzo.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 1

1.2.2.- COMENTARIOS En un documento HTML se pueden incluir comentarios para ayudar a describir el propio documento o proporcionar alguna clase de indicacin del estado del documento. Un comentario empieza con <!-- y termina con -->. Por ejemplo: <!-- Fichero: autom2. Creado el 20/10/1998 --> En cualquier documento HTML podemos distinguir bsicamente tres zonas: Identificacin: Se introducir la etiqueta <HTML> al principio del documento y se finalizar con la etiqueta </HTML> Encabezamiento: Comprendido entre las etiquetas <HEAD> y </HEAD>. Aqu se incluirn diversos elementos informativos, aunque la mayora de ellos sern totalmente ignorados por los navegadores. Dentro del encabezamiento hay informacin del documento, que no se ve en la pantalla principal, principalmente el ttulo del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El ttulo debe ser breve y descriptivo de su contenido pues ser lo que vean los dems usuarios cuando aadan nuestra pgina a sus favoritos. El ttulo a menudo se visualizar luego en alguna seccin especial de los narradores, por ejemplo, en EXPLORER aparece en la barra de ttulo de su ventana. Cuerpo: Comprendido entre las etiquetas <BODY> y </BODY>. Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal del navegador (texto, imgenes, sonidos, etctera). Antes de crear nuestra primera pgina, hagamos unas consideraciones sobre el texto: Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que ste se acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en distintos prrafos debemos usar la etiqueta <P>, que no tiene obligatoriamente por qu llevar etiqueta de cierre </P>, puesto que se trata de un separador y no un contenedor. Sin embargo se recomienda, y de hecho muchos programas editores lo hacen automticamente, poner siempre la etiqueta de cierre </P>. Por lo tanto sera correcto tambin poner la etiqueta <P> antes del texto y la etiqueta </P> al final del mismo. El texto puede tener unos encabezados, comprendidos entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc (hasta el nmero 6), siendo el nmero indicativo del tamao. El tamao mayor es el correspondiente al nmero 1. Puedes experimentar en el ejemplo que sigue, cambiando el nmero para comprobar el efecto que se logra. Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER>. Nos centra todo lo que est dentro de ella, ya sea texto, imgenes, etc. Tambin tenemos los separadores <HR> (horizontal rules), que como tales separadores no llevan etiqueta de cierre. Con esta etiqueta se consigue una raya horizontal tan ancha com2o la pantalla, y con la apariencia de estar embutida sobre el fondo.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

Captulo 1

HTML

1.3.- EL ELEMENTO HTML

La directiva HTML es el primer tag en cualquier documento HTML, ya que indica que se trata de un documento escrito en el formato HTML. Todo el texto y las directivas del documento deben ir entre las directivas HTML de comienzo y de terminacin. El elemento HTML tiene tres atributos opcionales: VERSIN: viene fijada por el DTD (Document Type Definition). Para la versin HTML 3.0 corresponde a la cadena -/W30//DTD W3 HTML 3.0//EN. URN: es el nombre universal del recurso para el documento (es un atributo opcional). ROLE: es una lista opcional separada por blancos de nombres simblicos SGML que definen el papel que juega este documento.

1.4.- UN PRIMER DOCUMENTO HTML

<HTML> <HEAD> <TITLE>Primera p&aacute;ina Web</TITLE> </HEAD> <BODY> <H1><CENTER>Bases de Datos con Visual Basic</CENTER></H1> <H3>Autor </H3>Jeffrey P. McManus <H3>Traducci&oacute;n </H3>In&eacute;s Moreno y Jos&eacute Arroyo <H3>Editorial </H3>Prentice Hall <HR> <H2><CENTER>Contenido</CENTER></H2> <P>Es el &uacute;nico libro que acerca el paradigma de objeto hacia los desarrollos distribu&iacute;dos mediante soluciones basadas en los componentes.</P> <BR> <P>Este libro trata de soluciones, no de tecnolog&iacute;a</P> </BODY> </HTML>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 1

1.5.- ESQUEMA DE HTML

DENOMINACIN PARA LOS DOCUMENTOS

Cuando un visualizador recibe un archivo debe conocer a qu tipos de datos est accediendo para saber que hacer con ellos. Los servidores de material con estructura de hipertexto (HTTP) le dicen al visualizador explcitamente el tipo de datos que le estn enviando. Pero en otros casos, como cuando el visualizador est usando FTP o est accediendo a archivos locales, el tipo de datos lo obtiene de la propia extensin del archivo.Por ejemplo, los archivos HTML se identifican de la forma siguiente: Nombre.html donde la extensin .html indica que se trata de un documeno HTML. Generalmente se utilizan cuatro letras para la extensin, lo que no es ningn problema para ordenadores Macintotsh, UNIX o basados en Windows 95, ya que en ellos no hay restricciones en el tamao de los nombres de los archivos. Sin embargo, en mquinas basadas en DOS o en Windows 9.1, el tamao de los nombres de los archivos est restringido y las extensiones solo pueden tener 3 letras. En la siguiente tabla, se muestran algunas de las extensiones ms comunes y su significado:

EXTENSION
.html (.htm) .txt .ps .eps .gif .xbm .xpm .jpeg (.jpg)

SIGNIFICADO
Documentos HTML, conteniendo texto e instrucciones HTML. Un archivo de slo texto. En este caso el visualizador presenta el contenido del archivo como un bloque de texto sin procesar las instrucciones que pueda contener. Por regla general los tipos desconocidos se tratan como archivos de texto. Archivo PostScript, que es un formato comn en muchas impresoras laser. Archivo en formato PostScript encapsulado. Este formato no es apropiado para enviar directamente a una impresora. Un archivo de imgenes en formato GIF. Un archivo de imgenes en formato X-bitmap (blanco y negro) Un archivo de imgenes en formato Xpixmap (en color) Un archivo de imgenes en formato JPEG.

.mpeg (.mpg o mpe) Un archivo de vdeo en formato MPEG. .qt .avi .au .z .gz Un archivo de vdeo en formato quick-time (Macintosh) Un archivo de vdeo en formato AVI (Microsoft) Un archivo de audio (sonido) en formato AIFF Un archivo comprimido utilizando el compresor Lempel-Zip. Este es un programa de compresin-descompresin comn en ordenadores UNIX. Un archivo comprimido utilizando el programa GNU gzip. Este programa es comn en ordenadores UNIX y est disponible tambin para PCs y Macintosh.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

Captulo 1

HTML

1.5.1.- TIPOS DE ARCHIVOS MIME

En el WWW se utilizan los tipos MIME para definir el tipo de datos que se transfieren. Cuando un servidor Web enva datos a un visualizador, primero consulta su lista de tipos de archivos MIME, y luego le dice al cliente que tipos de datos le va a enviar. Cada visualizador tiene una configuracin almacenada que asocia a cada tipo de datos una funcin determinada. Un visualizador puede manipular muchos tipos de datos (como documentos HTML, imgenes GIF, etc) pero otros tipos de datos se transfieren para su procesamiento a programas auxiliares, como son los visualizadores de imgenes, proyectores de vdeo, etc. Los servidores Web transfieren una cabecera inicial al visualizador con el tipo MIME de los datos que se le envan a continuacin. Por esta razn el servidor tiene que tener una forma de decir el tipo de datos que va a transmitir. Normalmente dispone de un archivo de configuracin que relaciona las extensiones de los nombres de los archivos con el tipo MIME apropiado. Por ejemplo, el tipo MIME para documentos HTML es text/html. De esta forma, si un visualizador que se le enve el archivo notas.html, el servidor mira cual es el tipo MIME correspondiente a la extensin .html y le enva un mensaje al visualizador dicindole que los datos que se le van a transferir inmediatamente son del tipo text/html.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

Captulo 2.- ELEMENTOS Y DIRECTIVAS DEL LENGUAJE HTML

PUNTUALIZACIONES PARA EL DISEO DE COLECCIONES DE DOCUMENTOS 1) Los documentos deben ser pequeos. Cada documento no debe de visualizar ms de dos o tres pantallas completas de datos. 2) Cada documento debe tener las herramientas de navegacin. Estas son enlaces que conectan el documento a otros documentos siguiendo una jerarqua y a determinados puntos de navegacin general dentro de la coleccin. As, cada pgina debe tener enlaces a los documentos siguiente y anterior y a una tabla o ndice de contenido. 3) Todos los documentos deben tener un estilo de presentacin consistente. Cada documento se debe de haber diseado con la misma estructura de cabecera, los mismos iconos de navegacin y una plantilla similar para el contenido.

2.1.- CABECERA DE LOS DOCUMENTOS HTML

La cabecera (HEAD) contiene informacin general, o meta-informacin. Sobre el documento y su contenido no se visualiza como parte del propio documento. El material que se visualiza se incorpora en el cuerpo (BODY) del documento. Por este motivo, slo se puede colocar dentro de HEAD los elementos citados a continuacin: BASE: es un registro del URL original del documento. ISINDEX: generalmente se introduce en la cabecera por el servidor o un programa del servicio para indicar que el documento es accesible mediante bsqueda. META: es un contenedor para la metainformacin del documento. NEXTID: es un parmetro utilizado por los editores que generan HTML de forma automtica para crear identificadores de los documentos. TITLE: es el ttulo del documento. Este elemento es obligatorio.

Adems de estos elementos, hay otros que no son oficiales . Estos elementos son los siguientes: SCRIPT: para incluir programas denominados scripts, escritos en Javascript o VBScript. STYLE: permite incluir informacin de las hojas de estilo.

2.1.1.- BASE
Permite recordar el URL original del documento en aquellas situaciones en la que su lectura se hace fuerza de contexto. Un ejemplo puede ser cuando el documento se mueve de su posicin original.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

Captulo 2

HTML

Los URLs dentro del documento pueden ser relativos a su direccin base, que por defecto es el URL utilizado para obtener el documento.

2.1.2.- ISINDEX
Informa al visualizador que se trata de un documento ndice, indicndole que cree un campo de entrada de usuario que pueda ser utilizado para escribir palabras claves para la bsqueda. El documento se puede consultar mediante una bsqueda de palabras claves aadiendo una interrogacin (?) al final de la direccin del documento, seguida por una lista de las palabras claves separadas por signos +. Si se aade de forma manual a un documento HTML, el visualizador supone que el servidor puede manipular una bsqueda en el documento.

NOTAS: obviamente, el servidor debe tener esta capacidad para poder trabajar. Simplemente aadiendo <ISINDEX> en el documento no es suficiente para poder hacer bsquedas si el servidor no dispone de un mecanismo para realizarlas.

2.1.3.- LINK
el elemento LINK indica una relacin entre el documento y algn otro objeto o documento. Por tanto, un documento puede tener cualquier nmero de elementos LINK para indicar todos los posibles enlaces entre el documento y los objetos o documentos relacionados. REL: indica las relaciones definidas por el enlace. REV: define la relacin inversa. Un enlace del documento A al B con REV=relacin expresa la misma relacin que un emlace de B a A con REL=relacin. HREF: nombra un documento utilizando la notacin URL.

Una utilizacin importante del elemento LINK es para definir barras de herramientas con botones de navegacin o un mecanismo equivalente como puede ser un men de opciones. Los valores de REL reservados para las barras de herramientas son: REL=Home: el enlace se refiere a un pgina home o al nivel superior de una jerarqua. REL=ToC: el enlace se refiere a un documento que sirve como un ndice de contenido. REL=index: el enlace se a un documento que proporciona un ndice para el documento actual. REL=Glosary: el enlace se refiere a un documento que proporciona un glosario de trminos relativos al documento actual. REL=Copyright: el enlace se refiere a una sentencia de copyright para el documento actual. REL=Up: cuando el documento forma parte de una jerarqua, este enlace hace referencia al ascendiente inmediato del documento actual. REL=Next: el enlace hace referencia al prximo documento que se visita en un recorrido guiado. REL=Previous: el enlace hace referencia al anterior documento que se visit en un recorrido guiado. REL=Help: hace referencia a un documento de ayuda.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

REL=Bookmark: se utilizan para proporcionar acceso directo a puntos claves en un documento extenso. El atributo TITLE se puede emplear para etiquetar el bookmark.

2.1.4 META
Meta se usa dentro de HEAD para incluir meta-informacin del documento que no se define con otros elementos HTML. Esta informacin la pueden extraer los servidores/clientes y utilizarla para identificar, indexar y catalogar. El elemento META tiene tres atributos: NAME: se usa para nombrar una propiedad como el autor, fecha de publicacin, etc. CONTENT: se emplea para dar un valor a la propiedad nombrada. HTTP-EQUIV: conecta el elemento a una cabecera de respuesta HTTP.

2.1.5.- NEXTID
Es un parmetro ledo y generado por los programas editores que producen cdigo HTML de forma automtica y crean identificadores nicos. Esta directiva tiene un slo atributo, el nmero del identificador alf-numrico.

2.1.6.- TITLE
Todo documento HTML debe contener el elemento TITLE, que le asigna un ttulo. El ttulo identificar el contenido del documento en un contexto global, y se puede utilizar en las listas de los ltimos documentos visitados y como etiqueta en la ventana que lo visualiza. Generalmente, los ltimos no se visualizan en el texto del propio documento. El elemento TITLE se sita en la cabecera del documento y su longitud es ilimitada, aunque en algunas aplicaciones los ttulos largos se pueden truncar. Por esta razn se recomienda que tengan menos de 64 caracteres.

2.1.7.- SCRIPT
Permite contener un script ejecutable escrito en JavaScript o VBSCript proporcionar una funcionalidad de programa dentro del propio documento. que puede

2.1.8.- STYLE
Se utiliza para dar instrucciones de formato de estilo que se pueden aplicar a un documento HTML. La forma de hacerlo es por alguno de estos dos medios: Encerrando la informacin entre <STYLE> Y </STYLE>. Referenciando una hoja de estilos externa mediante directivas de la forma: <STYLE HREF=yrl_to_stylesheet>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

Captulo 2

HTML

Ejemplo: Cabecera <HTML> <HEAD> <TITLE>CURSO DE INTERNET</TITLE> <BASE HREF=http://www.deltapc.es/cursos/internet.html> <LINK REL=Previous HREF=sec2.html> <LINK REL=Next HREF=sec3.html> <LINK REL=ToC HREF=indice.html> <META NAME=author CONTENT=DeltaPc> <META NAME=keywords CONTENT=internet html url> <TITLE>&Iacute;ndice del Curso de Internet </TITLE> </HEAD> <BODY> ........................... </BODY> </HTML>

2.2.- EL CUERPO (BODY) DE UN DOCUMENTO HTML

Dentro del elemento BODY est todo el contenido del documento. En el cuerpo se permiten distintas marcas de elementos para indicar cabeceras, prrafos, listas, enlaces de hipertexto, imgenes, etc. El elemento BODY permite los siguientes atributos opcionales: ID: Identificador SGML utilizado como el destino de los enlaces hipertexto o para nombrar elementos concretos en las hojas de estilo asociadas. LANG: Corresponde a las abreviaturas del estndar ISO para los idiomas. El atributo correspondiente se compone de dos letras del cdigo del idioma, seguido opcionalmente por un punto y dos letras del cdigo del pais. Por ejemplo, en.uk representa el ingls del Reino Unido. CLASS: Corresponde a una lista de nombres simblicos, utilizados como nombres de etiquetas de subclases. BACKGROUND: Especifica un archivo de una imagen utilizada como fondo del documento.

ATRIBUTOS PARA CONTROLAR EL COLOR DEL TEXTO BGCOLOR=#rrggbb: Indica el color RGB del fondo, rr gg y bb son los cdigos de color en hexadecimal para los niveles de rojo, verde y azul en el rango de 0 a 255 (de 00 a FF en hexadecimal). El color 000000 es el negro y FFFFFF es el blanco. TEXT=#rrggbb: Indica el color RGB utilizado por defecto para el texto. LINK=#rrggbb: Indica el color RGB utilizado por defecto para el texto de las anclas de los enlaces de hipertexto. VLINK=#rrggbb: Indica el color RGB utilizado por defecto para el texto de los enlaces hipertexto visitados.

2.3.- ORGANIZACIN DE LOS ELEMENTOS EN EL CUERPO

Como ya se ha indicado, en el elemento BODY est todo el contenido que se visualiza del documento. Estructuralmente, este contenido se organiza en bloques de texto tales como prrafos, listas, cabeceras, tablas, etc.. a los que se denominan elementos de bloques. Estos elementos pueden contener a su vez otros elementos. Entre los elementos a nivel de bloque se encuentran los siguientes:

10

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

2.3.1.- CABECERAS (Hn)

HTML permite seis niveles de cabeceras, indicadas como [H1, H2, H3, H4, H5, H6]. No se fuerza ninguna jerarqua entre estas cabeceras, aunque por consistencia se aconseja poner en el nivel superior H1 e ir bajando progresivamente. Los atributos permitidos en el elemento cabecera son: ID: Es un identificador SGML utilizado como el destino de los enlaces hipertexto o para nombrar elementos concretos en las hojas de estilo asociadas. LANG: Corresponde a las abreviaturas estndar ISO para los idiomas. El atributo del idioma se compone de dos letras del cdigo del idioma segn el estndar ISO 639, seguido opcionalmente por un punto y dos letras que designan el pas de acuerdo al estndar ISO 3166. Por ejemplo en.uk designa al ingls del Reino Unido. ALIGN: Las cabeceras se sitan generalmente a la izquierda. Con el atributo ALIGN se puede especificar explcitamente el alineamiento horizontal:

Align=left: la cabecera se ajusta a la izquierda (es el valor por defecto). Alng=center: la cabecera se coloca centrada. Aling=right: la cabecera se ajusta a la derecha. Aling=justifity: en los casos que sea posible hacerlo, las lneas de cabecera se justifican a los dos mrgenes. CLEAR: Es un atributo comn a todos los elementos a nivel de bloque. Cuando hay una figura o una tabla, el texto puede estar en el margen de las mismas, pero algunas veces se puede querer comenzar un elemento como una cabecera o un prrafo debajo de la figura mejor que a su lado, con esta finalidad se utiliza el atributo CLEAR, que permite mover hacia abajo sin condiciones:

Clear=left: se mueve hacia abajo hasta que el margen izquierdo est libre. Clear=right: se mueve hacia abajo hasta que el margen derecho est libre. Clear=all: se mueve hacia abajo hasta que ambos mrgenes estn libres. Tambin se puede querer situar el elemento en la lnea de la figura dejando un espacio entre la figura y el elemento. Clear=40 en: se mueve hasta que quedan 40 unidades libres. Clear=100 pixels: se mueve hasta que quedan 100 pixels libres. SRC: Especifica una imagen que aparece precediendo a la cabecera. La imagen se designa con un URI. Este atributo puede aparecer junto al atributo MD.

<HTML> <HEAD> <TITLE>Prueba de cabeceras </TITLE> </HEAD> <BODY> <H1> Esto es la primera cabecera </H1> <H2> Segunda cabecera </H2> <H3 align=right > Tercera cabecera </H3> <H4 align=center > Cuarta cabecera </H4> <H5> Quinta cabecera </H5> </BODY> </HTML>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

11

Captulo 2

HTML

2.3.2.- PRRAFOS (P)

El elemento P delimita un bloque de texto como un prrafo. La directiva <P> marca el comienzo del prrafo y </P> el final, aunque esta ltima es opcional, ya que un prrafo termina cuando comienza otro prrafo o una cabecera (H) o una lista o una tabla o un formulario.

2.3.3.- EL ELEMENTO ADDRESS

El elemento ADDRESS se utiliza para dar informacin del tipo de direccin, firma, autor, etc. Generalmente se sita en la parte superior o inferior del documento. La interpretacin depende del visualizador. Tambin se puede justificar a la derecha o estar sangrado. Un elemento ADDRESS no puede contener elementos P, BLOCKQUOTE, FORM u otros elementos de bloques, pero si puede contener texto, marcas de texto, elementos de ancla e incluso imgenes.

2.3.4.- EL ELEMENTO BLOCKQUOTE (BQ)

Define un bloque de cita que el visualizador interpretar de la forma adecuada, por ejemplo sangrando el texto o ponindolo en cursiva. BLOCKQUOTE tambin provoca un salto de prrafo y generalmente fuerza espacios en blanco tanto antes como despus de la cita. El elemento BLOCKQUOTE puede contener prrafos y otras marcas estndar, pero no puede contener cabeceras.

2.3.5.- LINEA HORIZONTAL (HR)

El elemento HR se emplea para dibujar una lnea horizontal que cruce completamente toda la pantalla. Este elemento est vaco, es decir, no se necesita un </HR>.

12

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

Los atributos que se pueden utilizar son: SRC: Especifica una imagen personalizada para la lnea horizontal. La imagen se referencia con un URL. Puede aparecer junto con el atributo MD. MD: Especifica un resumen del mensaje o una comprobacin criptogrfica para el grfico asociado especificado por el atributo SRC. SIZE=n: Especifica el ancho vertical, en pixels, de la lnea divisoria (n es un entero). WIDTH=n o n%: Especifica el ancho horizontal en pixels o como un porcentaje de la anchura del monitor (n es un entero). ALIGN= left, right o center: Especifica el alineamiento de la lnea en la pgina. Por defecto es centrado (center). NOSHADE: Dibuja como lnea divisoria una barra negra, el valor por omisin es una barra sombreada. SIZE=10 WIDTH=20%> SIZE=5 WIDTH=80> SIZE=15 WIDTH=50 ALIGN=CENTER> SIZE=10 WIDTH=40 NOSHADE>

<HR <HR <HR <HR

2.3.6.- TEXTO PREFORMATEADO (PRE)

Este elemento se utiliza para visualizar el texto con un tipo de letra como el de mquina de escribir con ancho fijo. Es til para presentar texto formateado para un teletipo, o para un monitor con caracteres de ancho fijo. Tambin es comn utilizarlo para presentar ejemplos de cdigos de ordenador. Dentro de PRE no se acepta la directiva <P>, pero por robustez, si se encuentra se trata como un salto de lnea. Tampoco se aceptan otros elementos a nivel de bloques como: cabeceras, listas, figuras o tablas. En cambio, si se pueden utilizar elementos ancla y los que enfatizan caracteres. WIDTH es un atributo opcional que especifica el nmero mximo de caracteres que pueden ser visualizados en una lnea. Generalmente se toma por defecto el valor de 80. <PRE> [K, Kout]=eigenas(A,B,C,D,E,Ev,OP); [Ep,Evp]=eig(A+B*K*C); </PRE>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

13

Captulo 2

HTML

2.3.7 FORMULARIOS (FORM)

HTML dispone de varios elementos que permiten entradas de los usuarios. El ms simple es ISINDEX, que toma una lnea se texto como una entrada del usuario. Ms sofisticado es el elemento FORM y los subelementos asociados al mismo INPUT, TEXTAREA y SELECT, que permiten especificar botones y campos de entrada de texto mediante INPUT, listas seleccionables mediante SELECT y regiones de entrada de texto mediante TEXTAREA. Los datos introducidos en FORM se transmiten a un servidor, y mediante el atributo ACTION se puede especificar el URL del servidor al que hay que enviar los datos. El mtodo GET significa que los datos se aaden al URL como una cadena de consulta, mientras que el mtodo POST significa que los datos se transmiten como el cuerpo de un mensaje, al igual que los datos enviados por el servidor al visualizar pero en el sentido opuesto. Los atributos permitidos en FORM son: ACTION: Permite indicar el URL donde se tienen que enviar los datos. Por defecto, el URL que se supone es el de documento. METHOD: Especifica las variaciones en el protocolo utilizado para enviar el contenido del formulario. Actualmente toma los valores GET, el contenido del formulario se aade al URL, despus del signo de interrogacin. Con el mtodo POST, el contenido se enva al servidor en el cuerpo del mensaje. ENCTYPE: Especifica el tipo MINE utilizado para codificar los contenidos del formulario. SCRIPT: Se puede utilizar para dar el URL de un script.

2.3.7.1.- El elemento INPUT

Es utilizado para especificar las entradas de un formulario. TYPE: Especifica el tipo de entrada. Sus posibles valores son: CHECKBOX, HIDDEN, RADIO, RESET, SUBMT, TEXT o IMAGE. NAME: Su valor es el nombre de este item. VALUE: Para un texto en su valor por defecto, para un botn de tipo RADIO o CHECKBOX es el valor enviado con el formulario; para botones de envo (SUBMIT) o de reset es la etiqueta del propio botn. SRC: Es el URL del archivo fuente de la imagen. CHECKED: Para botones de tipo RADIO o CHECKBOX, indica que han sido comprobados. SIZE: Es el tamao, en caracteres, del texto. MAXLENGTH: Es el nico mximo de caracteres que se pueden introducir en un texto. ALIGN: Indica como se alinea el texto o la imagen en los formularios.

2.3.7.2.- El elemento TEXTAREA

Representa la entrada de un texto de mltiples lneas. Los atributos que acepta son: NAME: Es el nombre tal como se pasa al programa (script). ROWS: Nmero de filas que se visualizan en el rea de este texto. COLS: Nmero de columnas.

14

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

2.3.7.3.- El elemento SELECT

Crea un men o lista desplegable de posibles items. Los atributos que acepta son: NAME: El nombre tal como se pasa al programa (script). SIZE: El nmero de elementos que se visualizan. Si se indica SIZE, la seleccin se convierte en una lista desplegable. Si no se indica, la seleccin es un men de tipo desplegable. MULTIPLE: Permite hacer una seleccin mltiple de una lista.

Dentro de este elemento se incluye el elemento OPTION.

2.3.7.4.- El elemento OPTION

Este elemento indica los posibles items dentro de SELECT. Los atributos que acepta son: SELECTED: Indica que por defecto se selecciona esta opcin. VALUE: Es el valor que se transmite al enviar el formulario, si se selecciona esta opcin.

Ejemplo:

<HTML> <HEAD> <TITLE> Formulario </TITLE> </HEAD> <BODY> <H1>Ficha del Departamento</H1> <H2>Delta Pc </H2> <HR> <P> Si est&aacute; matriculado en alguno de los cursos que la academia propone, por favor, rellene esta ficha: <HR> <FORM ACTION="http://www.ctv.es/" METHOD = POST> <P>Nombre(Apellidos, Nombre): <INPUT NAME=Nombre" MAXLENGTH=60 SIZE=80 TYPE =TEXT> <P>Direcci&iacute;n: <TEXTAREA NAME="Direccion" ROWS="3" COLS="80" ></TEXTAREA> <P> Cursos (seleccione en los que est&aacute; matriculado: <UL> <LI><INPUT TYPE =checkbox NAME=Autocad>Autocad <LI><INPUT TYPE =checkbox NAME=Ofimatica>Ofim&aacute;tica <LI><INPUT TYPE=checkbox NAME=Visual Basic>Visual Basic <LI><INPUT TYPE=checkbox NAME=WindowsNT>Windows NT <LI><INPUT TYPE=checkbox NAME=Linux>Linux <LI><INPUT TYPE=checkbox NAME=Secretariado>Secretariado <LI><INPUT TYPE=checkbox NAME=Diseo>Diseo </UL> <p>Centro asociado:
15

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

Captulo 2

HTML

<SELECT NAME=centro asociado> <OPTION VALUE=LaCorua>La Corua <OPTION VALUE=Madrid>Madrid <OPTION VALUE=Barcelona>Barcelona <OPTION VALUE=Sevilla>Sevilla <OPTION VALUE=Valencia>Valencia </SELECT> <p>Para enviar la ficha pulse: <INPUT TYPE=submit VALUE=Enviar ficha> </FORM> </BODY> </HTML>

2.3.8.- TABLAS (TABLE)

Las tablas comienzan con un pie de tabla opcional, que se define con elemento CAPTION, seguido por una o ms filas. Cada fila, definida por el elemento TR, est formada por una o ms celdas; de entre ellas se distinguen las celdas de cabecera, definidas por TH, y las celdas de datos, definidas por TD. El nmero de columnas en la tabla est definido por el nmero de elementos TD y TH. El nmero de filas lo define el nmero de elementos TR. Hay que resaltar varios puntos: Por defecto, el contenido de las celdas de las cabeceras se centra, mientras que el de las celdas de datos se ajusta a la izquierda. Esto se puede modificar con el atributo ALIGN para las

16

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

celdas, el atributo COLSPEC para el elemento TABLE o el atributo ALINGN para los elementos TR de las filas. Las celdas pueden estar vacas. Las celdas pueden ocupar varias filas. Si para una fila dada, el nmero de columnas de la tabla es mayor que el nmero de celdas definidas para sta fila (despus de incluir las celdas que ocupan varias filas), las celdas que faltan hasta llegar al nmero de columnas que tienen la tabla se consideran que estn en el lado derecho de la tabla y se interpretan como celdas vacas. No es vlido tener celdas que se solapen. Los elementos TD y TH no necesitan una directiva de terminacin. Sin embargo es conveniente ponerla. Por defecto, las tablas se dibujan sin bordes. Para dibujar las lneas de los bordes se tiene que poner el atributo BORDER. Las tablas se ajustan al margen izquierdo. Para centrar las tablas, se pueden poner del elemento CENTER.

Adems de los atributos ID, LANG, CLASS y CLEAR acepta: NOFLOW: el texto no se coloca en torno a la tabla. Evita utilizar CLEAR o NEEDS. ALIGN: especifica el alineamiento horizontal de la tabla (no de su contenido), los valores que acepta son:

BLEEDLEFT: se ajusta a la izquierda con el borde izquierdo de la ventana. LEFT: se ajusta a la izquierda con el margen izquierdo del texto. CENTER: se centra la tabla entre los mrgenes del texto y adems hace que el texto no se site en torno a la tabla. ste es el valor por defecto de ALIGN. RIGHT: se ajusta a la derecha con el margen derecho del texto. BLEEDRIGHT: se ajusta a la derecha con el borde derecho de la ventana. UNITS: especifica las unidades elegidas para el atributo COLSPEC: 1. Units=en: especifica unidades en (una unidad tipogrfica igual a la mitad del tamao de un punto). 2. Units=relative: se utiliza para definir un ancho relativo de las columnas. 3. Units=pixels: expresa que los valores se dan en pixels. COLSPEC: es una lista de las especificaciones del ancho de las columnas y del alineamiento. Las columnas se definen de izquierda a derecha con una letra mayscula seguida por un nmero, por ejemplo: COLSPEC=L20 C8 L40. Las letras utilizadas son. Para el alineamiento del contenido de la celda a la izquierda L, al centro C y ala derecha R. para justificar los dos mrgenes se emplea J y si no es posible justificar el efecto es el de alineamiento a la izquierda (L). D se usa para el alineamiento decimal (ver el atributo DP).

Se requieren las maysculas para evitar posibles errores como el confundir la L minscula con un uno. DP: especifica el carcter que con el atributo COLSPRC es utiliza para el punto decimal: DP= . o DP= ,. WIDTH: especifica el ancho de la tabla segn el atributo UNITS. Si UNITS=relaitve, la anchura se calcula como un porcentaje de la separacin entre los mrgenes izquierdo y derecho actuales. Si da un ancho menor al mnimo, entonces no se toma en consideracin. BORDER: indica que ponga bordes alrededor de al tabla.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

17

Captulo 2

HTML

NOWRAP: se utiliza cuando no se quiere que el visualizador ajuste las lneas automticamente. CELLPADDING define el espacio, en pixels, entre el contenido de las celdas y los bordes de las mismas. CELLSPACING define el espacio entre las celdas. WIDTH asigna el ancho de la tabla entera.

<TABLE BORDER> <TR><TH>Columna1<TH>Columna2</TR> <TR><TD>28.9<TD>754.7</TR> </TABLE>

<TABLE BORDER=8> <TR><TH>Columna1<TH>Columna2</TR> <TR><TD>80.2<TD>45.9</TR> </TABLE>

<TABLE BORDER WIDTH=80> <TR><TH>Columna1<TH>Columna2</TR> <TR><TD>78.9<TD>67.5</TR> </TABLE>

<TABLE BORDER WIDTH=80%> <TR><TH>Columna1<TH>Columna2</TR> <TR><TD>78.9<TD>67.5</TR> </TABLE>

<TABLE BORDER CELLPADDING=8> <TR><TH>Columna1<TH>Columna2</TR> <TR><TD>998.7<TD>668.3</TR> </TABLE>

18

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

<TABLE BORDER CELLSPACING=8> <TR><TH>Columna1<TH>Columna2</TR> <TR><TD>998.7<TD>668.3</TR> </TABLE>

2.3.8.1.- ATRIBUTOS DEL ELEMENTO TR

El elemento TR define una fila de la tabla. Puede tener los atributos siguientes: ALIG especifica el alineamiento horizontal del contenido de las celdas y puede tomar los valores: left, center y right. VALIGN especifica el alineamiento vertical del contenido de las celdas y ppuede tomar los valores: top, middle y bottom. Los valores por defecto son: ALIGN=left VALIGN= middle.

<TABLE BORDER WIDTH=80%> <TR><TH>Nombre</TH><TH>Direccion<BR>(personal)</TH></TR> <TR VALIGN=top><TH>Nombre y Apellidos</TH><TH>Calle<BR>N&uacute;mero, piso</TH></TR> <TR ALIGN=rigth><TD>Luis G&oacute;mez</TD><TD>Avda. Habana 3<BR>5A</TD></TR> <TR ALIGN=center><TD>Mar Salgado</TD><TD>Rosales 24<BR>7C</TD></TR> <TR VALIGN=bottom><TD>Miguel Vicente</TD><TD>Vega 123<BR>6D</TD></TR> </TABLE>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

19

Captulo 2

HTML

2.3.8.2.- ATRIBUTOS DE LOS ELEMENTOS TD (celdas de datos) Y TH (celdas de cabecera)

Los elementos TD y TH definen las celdas individuales. Estos elementos tambin pueden admitir atributos (iguales que los de TR) para especificar al alineamiento de las celdas. Cuando se especifican los alineamientos en TD y TH no se tienen en cuenta los especificados por TR. Los valores por defecto de TD son: VALIGN=middle. Pero TD y TH otros dos atributos que permitan que una celda ocupe ms de una dila de una columna. Estos atributos son: COLSPAN y ROWSPAN. COLSPAN indica cuantas columnas (contando hacia la derecha) estn ocupadas por la celda. ROWSPAN indica cuantas filas (hacia abajo) abarca la celda.

<TABLE BORDER> <CAPTION ALIGN=bottom>Ejemplo de tabla con celdas unidas y vac&iacute;as</CAPTION> <TR><TH ROWSPAN=2></TH><TH COLSPAN=2>Medidas</TH><TH ROWSPAN=2>Otros <BR> valores</TH></TR> <TR><TH>Cm.</TH><TH>metros</TH></TR> <TR><TH ALIGN=LEFT>Primera prueba</TH><TD>800</TD><TD>0.8</TD></TR> <TR><TH ALIGN=LEFT>Segunda prueba</TH><TD>7520</TD><TD>7,5</TD><TD>6780</TD></TR> </TABLE>

20

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

<TABLE BORDER> <CAPTION ALIGN="bottom">Ejemplo de tabla con celdas solapadas</CAPTION> <TR><TD ROWSPAN=2>Celda1<TD>Celda2<TD>Celda3<TD>Celda4</TR> <TR><TD COLSPAN=2>Celda5<TD>Celda6<TD>Celda7<TD>Celda8</TR> </TABLE>

TABLAS DENTRO DE TABLAS Se puede introducir tablas anidadas es decir tablas en las que el contenido de una celda puede ser otra tabla. Ejemplo: <TABLE BORDER WIDTH=80%> <TR><TD COLSPAN=3 ALIGN="center"><H3>Tabla Principal</H3></TD></TR> <TR><TD>Direcci&oacute;n</TD><TD>Nombre y Apellidos</TD><TD>Calificaciones</TD></TR> <TD ALIGN="center" VALIGN="center"> <TABLE BORDER=3 CELLSPACING=7> <TR><TD COLSPAN=2 ALIGN="center">Calle o Avenida</TD></TR> <TR><TD>N&uacute;mero</TD><TD>Piso</TD></TR> </TABLE> </TD> <TD></TD> <TD ALIGN="center" VALIGN="center"> <TABLE BORDER=3 CELLSPACING=7> <TR><TD COLSPAN=2 ALIGN="center">1Evaluaci&oacute;n</TD></TR> <TR><TD>Parcial 1</TD><TD>Parcial 2</TD></TR> </TABLE> </TD> </TR> </TABLE>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

21

Captulo 2

HTML

2.4.- LISTAS
HTML dispone de diferentes elementos para enmaquetar listas. Estas se pueden dividir en dos tipos: listas de glosario y listas regulares. Las listas de glosario se inician con el elemento <DL> y las listas regulares se expresan con los elementos <UL>, <OL>, <MENU> y <DIR>. Las listas se pueden anidar.

2.4.1.- LISTAS DE GLOSARIO (DL)

Este tipo de listas tambin se conoce como listas de definicin y son una relacin de trminos con sus correspondientes definiciones. La directiva que abre la lista es <DL>. Opcionalmente puede ir seguida por una cabecera de lista de la forma: <LH> cabecera de la lista </LH> Los tiempos que constituyen la lista introducen mediante los dos elementos siguientes: <DT>: los trminos del glosario. <DD>: la definicin.

Ejemplo: <DL> <LH>GLOSARIO DE TERMINOS</LH> <DT>ATRIBUTO <DD>UNA CUALIDAD CARACTERISTICA DEL ELEMENTO <DT>BROWSER <DD>UNA HERRAMIENTA </DL>

Las listas de definicin pueden tomar el atributo COMPACT, que sugiere que deben ser interpretadas en una forma fsicamente compacta.

22

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

2.4.2.- LISTAS REGULARES SIN NMERO DE SECUENCIA (UL, MENU, DIR)

Una lista regular es una secuencia de prrafos, cada uno de los cuales puede estar precedido por una marca especial, un numero de secuencia o nada. Las listas sin nmero de secuencia en los items corresponden a los elementos UL, MENU y DIR: UL: es una lista de prrafos de varias lneas, escritos separadamente y por lo general con una marca de un punto o smbolo similar. MENU: anlogo a UL pero formateado si es posible. Corresponde a prrafos ms pequeos y normalmente no llevan una marca en cada item de la lista. DIR: corresponde a listas de elementos cortos, normalmente de menos de 20 caracteres, que se pueden formatear en columnas a lo largo de la pgina, aunque sto depende del visualizador.

Los atributos permitidos para UL son: PLAIN: con este argumento se suprime la visualizacin de las marcas al inicio de los items del la lista. SRC: especifica una imagen para utilizarla como marca al inicio de cada item. La imagen se referencia con un URL. MD: especifica un resumen del mensaje o una comprobacin criptogrfica para el grfico asociado que viene especificado por el atributo. Se utiliza cuando se requiere asegurar que un objeto enlazado es el que quera el autor y no se ha modificado de ninguna manera. DINGBAT: especifica una imagen de un icono para utilizarlo como marca al inicio de cada item. El icono se especifica como un nombre de entidad. Por ejemplo: folder es el nombre de un entidad para un icono que representa un directorio o una carpeta. WRAP: utilizado para listas multicolumnas. Con wrap=vert los items se organizan hacia abajo antes se saltar a la siguiente columna. Con wrap=horiz se organizan a lo largo de la pgina, ste es el valor por defecto. COMPACT: indica que se debe reducir el espacio entre los items.

<UL> <LH>Estructura de un programa: <LI>Cuestiones de &aacute;mbito <LI>Formularios <LI>Propiedades <LI>Eventos y M&eacute;todos <LI>Funciones y Procedimientos <LI>Proyectos <LI>Programaci&oacute;n estructurada <LI>Clases y objetos <LI>Controles

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

23

Captulo 2

HTML

</UL>

2.4.3.- LISTAS REGULARES CON NMERO DE SECUENCIA (OL)

Son anlogas a las listas UL pero introduciendo un nmero de secuencia. Los atributos que acepta son: <OL> <LH>&Iacute;ndice <LI>Introducci&oacute; <LI>Estructura de un programa <LI>Constantes, variables y expresiones <LI>Controles est&aacute;ndar <LI>Uso del me&uacute; est&aacute;ndar <LI>Estructuras de Control <LI>Formularios y cuadros de di&aacute;logo <LI>Control de errores <LI>Depuraci&oacute; </OL> CONTINUE: la numeracin contina donde se qued en la lista anterior. SEQNUM: asigna un nmero de comienzo a la secuencia de items. COMPACT: indica que se debe reducir el espaciado entre los items.

24

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

<OL> <LH>&Iacute;ndice <LI>Introducci&oacute;n <LI>Estructura de un programa <LI>Constantes, variables y expresiones <OL> <LI>Tipos de datos <LI>Valores de inicializaci&oacute;n <LI>Operadores <OL> <LI>Operadores aritm&eacute;ticos <LI>Operadores relacionales <LI>Operadores l&oacute;gicos <LI>Operaciones entre bits </OL> </OL> <LI>Controles est&aacute;ndar <LI>Uso del men&uacute; est&aacute;ndar <LI>Estructuras de Control </OL>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

25

Captulo 2

HTML

2.5.- ENFATIZACIN DE CARACTERES

Los elementos a nivel de carcter se utilizan para especificar tanto el estilo lgico como fsico del texto marcado sin hacer un salto de prrafo. Generalmente estos elementos tienen una directiva de comienzo y una directiva de terminacin y slo se ven afectados los caracteres entre estas directivas. Por ejemplo, la especificacin de un estilo lgico para enfatizar una parte del texto es: Un texto <EM> enfatizado</EM> es este. Que se ver como: Un texto enfatizado es este. Se recomienda que se utilicen los estilos lgicos, porque se interpretan de manera ms consistente por los diferentes visualizadores. Hay algunos estilos lgicos que no se distinguen entre s, ya que se pueden interpretar de la misma forma. Tambin algunos visualizadores no soportan todos los estilos fsicos.

2.5.1.- ESTILOS LGICOS

EM: Proporciona nfasis tipogrfico, generalmente en cursivas. Con frecuencia <EM> e <I> tienen el mismo efecto. STRONG: Proporciona un nfasis tipogrfico ms fuerte. Generalmente en negrita. CODE: Indica un ejemplo de cdigo, normalmente interpretado con un tipo de carcter de ancho fijo. SAMP: Indica una secuencia de caracteres literales. KBD: Indica un texto escrito por el usuario. Por ejemplo, en un manual de instrucciones el texto que debe escribir el usuario. VAR: Indica un nombre de variable. CITE: Especifica una cita. Generalmente se interpreta en cursivas. DFN: definicin de un trmino. Q: Se utiliza para citas cortas. Generalmente se muestran entre marcas de cita apropiadas al contexto del idioma. Por ejemplo, con comillas y dobles comillas. LANG: Se emplea para modificar el contexto del idioma cuando no resulta apropiado hacerlo con otros elementos a nivel de carcter. AU: Indica el nombre de un autor. PERSON: Se usa para nombres de personas y permitir que sean extrados automticamente por programas de indexacin. ACRONYM: Se utiliza para marcar acrnimos. ABBREV: Permite marcar abreviaturas. INS: Se emplea para texto insertado, por ejemplo en los documentos legales. DEL: Se usa para texto borrado.

26

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

2.5.2.- ESTILOS FSICOS

TT : Indica que el texto que encierra se visualiza con un tipo de carcter de mquina de escribir de ancho fijo. B : Indica que el texto que encierra se visualiza en negrita. I : El texto que encierra se visualiza en cursiva. U: El texto que encierra debe ser visualizado en subrayado.

HTML 3: BIG: el texto que encierra debe visualizarse con un tipo de carcter ms grande que el actual. SMALL: El texto debe ser visualizado con un tipo de carcter ms pequeo que el actual. SUB: El texto debe visualizarse como subndice. SUP: El texto debe ser visualizado como un superndice

NETSCAPE Y MICROSOFT: FONT: Se utiliza en Netscape para controlar el tamao del tipo de carcter. Por ejemplo <FONT SIZE=-1>

El visualizador de Microsoft permite seleccionar el tipo de carcter. Por ejemplo <FONTFACE=arial>. Ejemplo: <H3>Estilos L&oacute;gicos</H3> <UL> <LI>Texto <EM>enfatizado</EM> <LI>Texto en <STRONG>negrita</STRONG> <LI>Esto es una secuencia de caracteres <SAMP>literales</SAMP> <LI>Texto escrito <CODE> en c&oacute;digo</CODE> <LI>Texto escrito <CITE> como una cita </CITE> </UL> <H3>Estilos F&iacute;sicos</H3> <UL> <LI>Esto encierra en <TT>Teletipo</TT> <LI>Texto <U>subrayado</U> <LI>Este texto es m&aacute;s <BIG>grande</BIG> <LI>Texto con caracteres m&aacute;s <SMALL>pequeo</SMALL> <LI>Texto visualizado como <SUB>sub&iacute;ndice</SUB> <LI>Texto con un tamao de <FONT SIZE=14>letra</FONT> <LI>Texto visualizado como <SUP>super&iacute;ndice</SUP> </UL>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

27

Captulo 2

HTML

2.6.- ANCLAS (A) DE HIPERTEXTO

Un ancla es una parte del texto o algn otro objeto que marca el comienzo y/o el final de un enlace de hipertexto. El elemento (A) se utiliza para marcar esta parte del texto y dar su relacin hipertextual con otros documentos. El texto entre las directivas de apertura <A> y terminacin </A> puede ser el comienzo o destino (o ambas cosas) de un enlace. Los atributos permitidos son: HREF: Marca el ancla como el comienzo de un enlace a otro documento o recurso o a un lugar determinado en otro documento. El destino se expresa con un URL absoluto o relativo.

Los ULRs parciales o relativos son comunes en conjuntos de documentos dentro de un servidor http, pero tambin pueden se pueden emplear para acceder a cualquier servidor. Ejemplos de valores dados a HREF son: <A HREF =http://www.ctv.es/USERS/delta pc> es un enlace al documento HTML especificado en el servidor indicado (www.ctv.es). Tambin se puede hacer referencia a lugares determinados de un documento. Estos puntos se pueden marcar como destinos de los enlaces hipertexto mediante el atributo NAME. Por ejemplo, un lugar en un documento se puede marcar como: <A NAME=Direccion>Direcci&oacute;n de correo</A> y un enlace a este lugar sera: <A HREF=#Direccion>Direcci&oaucte;n</A>

28

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

NAME: Este atributo marca al ancla como un posible destino de un enlace desde otro documento o desde algn otro lugar del mismo documento. El valor asignado a NAME debe ser un nombre simblico.

Un enlace a la ubicacin de <A NAME=Direccion>Direcci&oacute;n de correo</A> en el documento home.html desde otro documento es: <A HREF=home.hatml#Direccion>Direcci&oacute;n</A> SHAPE: Este atributo se utiliza con las figuras para definir la silueta de la zona caliente del enlace grfico de hipertexto. El valor que puede tomar es uno de los siguientes:

default: se utiliza para definir un enlace por defecto para el fondo de la figura. circle x, y, r: define un crculo, donde x e y es el centro y r el radio. rect x, y w, h: define un rectngulo, donde x e y es la esquina superior izquierda y w y h la anchura y la altura respectivamente. polygon x1, y1, x2, y2, ... con los n pares x , y de coordenadas se dibuja un polgono enlazando los n puntos. Si en algn caso se pulsa en una regin donde dos o ms siluetas se solapan, entonces se calcula la distancia de este punto a los centros de gravedad de cada una de las siluetas y se elige la ms cercana.

REL: Se emplea para describir la relacin del objeto destino del enlace al documento que contiene el ancla, por tanto, REL no se puede utilizar si no hay un HREF. El valor de REL es una lista, separada por espacios, de valores de relacin.

Enlazando a pginas con imgenes.

Si se necesita que en la pgina principal aparezca una imagen grande, se puede hacer un archivo pequeo con la imagen, por ejemplo en formatos comprimidos como son los formatos GIF y JPEG. Si se tienen imgenes grandes en otra pgina, es aconsejable que en el enlace a la misma indiques al usuario que es una pgina con grficos (por ejemplo, puedes indicar el tamao de los grficos de manera que el usuario sea consciente del coste que supone descargarla). Una forma prctica de enlazar a las imgenes es mediante un pequeo icono de la imagen real (es lo que en terminologa del Web se llama thumbnail). Al icono del thumbnail se le asocia un enlace a una pgina con la imagen en grande, indicando en el enlace el tamao de la imagen. Enlazando a otros tipos de datos

Las anclas no solo pueden indicar enlaces a documentos HTML, tambin pueden ser enlaces a otros documentos que no sean HTML o a imgenes de diferentes formatos. Por ello, es una buena

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

29

Captulo 2

HTML

idea indicar el formato de los archivos de datos, de forma que el usuario pueda evitar acceder a archivos que no pueda visualizar ni utilizar. Aplicaciones auxiliares

Cuando se hacen enlaces a archivos con un formato de datos distinto a los anteriores, por ejemplo de pelculas o de sonido, muchos visualizadores no podrn presentarlos. Para acceder a estos datos se utilizan programas auxiliares que permiten mostrar imgenes, pelculas o sonidos que el visualizador por s mismo no puede presentar. Los visualizadores conocen el tipo de datos que conectan por un mensaje especial que es enviado al cliente antes de los datos reales, este mensaje contiene una cabecera con el tipo de contenido MIME. Por ejemplo, para un archivo GIF la cabecera ser: Content-Type:image/gif Para una pelcula MPEG, ser: Content-Type: video/mpeg Cuando llega este mensaje al visualizador, y si el visualizador no puede presentar estos datos, mira en su base de datos de aplicaciones auxiliares para encontrar un programa que corresponda a este tipo MIME. Si los datos llegan desde un servidor FTP o desde la propia mquina local, entonces no hay un mensaje con el tipo MIME, en este caso el propio visualizador tiene que deducir el tipo de datos de que se trata. Para ello puede utilizar la extensin del archivo y acudir a una base de datos que tenga donde se relacionen las extensiones de los archivos con el tipo MIME de datos que puede contener. Por ejemplo, si la extensin es .gif el tipo MIME ser image/gif, o si la extensines .mpeg, .mpg o .mpe, el tipo MIME ser video/mpeg. Esta lista con los tipos MIME y las extensiones se tiene que actualizar si se aade un archivo con una nueva extensin. En muchos visualizadores, esta lista se puede editar desde un men desplegable. En resumen, tenemos que tener en cuenta: 1) Que cuando hagamos un enlace a un documento con una imagen grande, hay que poner algn tipo de aviso para el usuario, de forma que pueda estimar lo que tardar en descargar estos datos. 2) Listar el formato de los datos en los enlaces a imgenes grandes, archivos de audio, de pelculas o ficheros de archivos de datos en general, de forma que el usuario pueda estimar si el archivo est en un formato que puede utilizar. 3) Utilizar iconos para enlazar a imgenes grandes o archivos de pelculas. De esta forma el usuario conoce con que va a enlazar, resultando adems un buen complemento grfico para el documento.

2.7.- ELEMENTOS A NIVEL DE CARCTER

2.7.1.- SALTOS DE LINEA (BR)
El elemento salto de lnea (BR) indica que en un punto determinado comienza una nueva lnea. Se utiliza junto con el elemento de tabulacin para tener un mayor control como el visualizador interpreta el texto.

30

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

2.7.2.- IMGENES (IMG)

El elemento IMG se usa para insertar una imagen dentro de un documento HTML. El propsito es permitir que se incluyan dibujos, figuras y similares dentro de un documento y se presenten con el texto, sin que se tenga que tener un enlace hipertexto que recupere la imagen y la visualice en otra ventana. Para figuras grandes con pie de figura y texto en torno a la misma conviene utilizar el elemento FIG. Las imgenes se pueden incluir en un ancla de hipertexto, de esta forma se puede hacer que funcionen como botones de enlace a otros documentos o recursos. El elemento IMG no tiene la directiva de terminacin </IMG>. Permite varios atributos: SRC: este atributo especifica el URL del documento de la imagen. Su presencia es obligatoria. Su sintaxis es la mima que la del atributo HREF dela directiva <A>. ALT (texto alternativo): Algunos visualizadores no pueden mostrar imgenes. Con este atributo opcional se permite especificar un texto alternativo que se visualiza en entornos de slo texto. El texto alternativo puede contener entidades tales como caracteres acentuados o smbolos especiales, pero no puede contener marcas, que s son posibles con el elemento FIG. ALIGN: Este atributo opcional le indica al visualizador como alinear la imagen con el texto adyacente. Acepta los valores: ALIGN =bottom: alinea la parte inferior de la imagen con la lnea base de texto, es el valor por defecto. ALIGN =middle: alinea la imagen centrndola con la lnea base de texto. ALIGN =top: alinea la parte superior de la imagen con la lnea base de texto. En HTML 3 tambin se aceptan los valores left y right, en cuyo caso la imagen se desplaza al margen izquierdo o derecho respectivamente. El texto posterior envuelve el lado derecho de la imagen, para el valor de left y el lado izquierdo para el valor de right. Netscape tiene una extensin a este argumento, permitiendo tambin los valores: absmiddle, absbottom, texttop y baseline. Estos son similares adicional sobre la ubicacin de la imagen. HEIGHT: Es opcional e indica una altura para la imagen. Por defecto, su valor est en pixels. WIDTH: Anlogo a HEIGHT, representa una anchura para la imagen.

ISMAP: Este atributo identifica una imagen como un mapa, de forma que pulsando en distintas partes de la misma, las acciones son distintas. Conceptualmente esto se hace creando en el servidor HTTP una relacin entre ciertas regiones y las acciones correspondientes. Estas regiones se pueden especificar como cajas, crculos o polgonos. Cuando se pulsa sobre la imagen, las coordenadas de la pulsacin se envan a un programa del servidor que mira en la base de datos la accin asociada a estas coordenadas.

Netscape proporciona una extensin a IMG, permitiendo los siguientes atributos:

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

31

Captulo 2

HTML

BORDER: Si se utiliza ISMAP, la imagen es un enlace hipertexto y para indicarlo se rodea con un borde. BORDER especifica la anchura del borde. BORDER=0 indica que no se ponga ninguno. HSPACE: Especifica el espacio horizontal, en pixels, que hay que dejar entre la imagen y los elementos que la rodean. VSPACE: Define el espacio vertical, en pixels, que hay que dejar entre la imagen y los elementos que la rodean. LOWSRC: Indica que se trata de un servicio de imagen de baja resolucin.

Una imagen sin alineamiento: <IMG SRC=A:\Platinum.gif ALT=Ejemplo de alineaci&oacute;n de imagen > Bienvenido al servidor de Mike OldField.Esta es la p&aacute;gina principal dedicada a la discograf&iacute;a de este gran artista. Para entrar pulse en el siguiente enlace: <A HREF=http://www.mike.es>Discograf&iacute;a</A>

Con ALIGN=TOP: <IMG SRC=A:\Platinum.gif ALT=Ejemplo de alineaci&oacute;n de imagen ALIGN=top> Bienvenido al servidor de Mike OldField.Esta es la p&aacute;gina principal dedicada a la discograf&iacute;a de este gran artista. Para entrar pulse en el siguiente enlace: <A HREF=http://www.mike.es>Discograf&iacute;a</A>

32

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

Con ALIGN=MIDDLE:

<IMG SRC=A:\Platinum.gif ALT=Ejemplo de alineaci&oacute;n de imagen ALIGN=middle> Bienvenido al servidor de Mike OldField.Esta es la p&aacute;gina principal dedicada a la discograf&iacute;a de este gran artista. Para entrar pulse en el siguiente enlace: <A HREF=http://www.mike.es>Discograf&iacute;a</A>

Con ALIGN=LEFT:

<IMG SRC=A:\Platinum.gif ALT=Ejemplo de alineaci&oacute;n de imagen ALIGN=left> Bienvenido al servidor de Mike OldField.Esta es la p&aacute;gina principal dedicada a la discograf&iacute;a de este gran artista. Para entrar pulse en el siguiente enlace: <A HREF=http://www.mike.es>Discograf&iacute;a</A>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

33

Captulo 2

HTML

Con ALIGN=RIGHT:

<IMG SRC=A:\Platinum.gif ALT=Ejemplo de alineaci&oacute;n de imagen ALIGN=right> Bienvenido al servidor de Mike OldField.Esta es la p&aacute;gina principal dedicada a la discograf&iacute;a de este gran artista. Para entrar pulse en el siguiente enlace: <A HREF=http://www.mike.es>Discograf&iacute;a</A>

2.8.- EXTENSIONES DE NETSCAPE Y MICROSOFT

Netscape y Microsoft han introducido sus propias extensiones HTML. Algunas de estas extensiones ya se han visto, en particular las que hacen referencia a los nuevos atributos de elementos que ya existan. A continuacin se indican los cambios ms fundamentales. 1) CENTER: Centrado de bloques. 2) FONT: Cambia las propiedades y el tamao del tipo de carcter. 3) BASEFONT: Asigna un tipo de carcter por defecto. 4) APPLET: Permite incrustaciones de Java Applets. Slo con Netscape 2.0 y posteriores. 5) MARQUEE: Marca un texto como desplegable. Solo con Microsoft 2.0. y posteriores. 6) MAP: Mapa de imgenes en el cliente. 7) FRAME: Documentos FRAME.
34

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

Estos elementos no forman parte del HTML oficial y por tanto hay que tener ciertos reparos en su utilizacin, puesto que otros visualizadores no los interpretaran de la forma correcta.

2.8.1.- CENTER CENTER no es un tipo de prrafo ya que dentro de l se necesita poner elementos como <P>, <H1>, <BLOCKQUOTE>, <UL>, etc. CENTER no introduce espaciado vertical, se puede utilizar para centrar texto entre dos HRs cercanos. Tambin se puede emplear para centrar tablas. Ejemplo: <CENTER> <H2>AMAD&Iacute;S DE GAULA A DON QUIJOTE DE LA MANCHA</H2> <H3>SONETO</H3> <P> T&uacute;, que imitaste la llorosa vida<br> Que tuve ausente y desde&ntilde;ado sobre<br> El gran ribazo de la pe&ntilde;a Pobre<br> De alegre &aacute; penitencia reducida,<br> T&uacute; a; quien los ojos dieron la bebida<br> De abundante licor, aunque salobre,<br> Y alz&aacute;ndose la plata, esta&ntilde;o y cobre,<br> Te di&oacute; la tierra en tierra la comida. </P> </CENTER>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

35

Captulo 2

HTML

2.8.2.- FONT Este elemento lo introdujo Netscape para permitir controlar el tamao del tipo de carcter visualizado. Los tamaos de los tipos de caracteres se definen en un rango de 1 a 7 (el valor base por defecto es 3). Para ello se utiliza el atributo SIZE cuyo valor es el tamao que se quiere para el tipo de carcter, el rango de 1 a 7, o bien un valor relativo utilizando los caracteres + y -. <P> <FONT SIZE=1>Tipo de letra de tama&ntilde;o 1 </FONT><BR> <FONT SIZE=2>Tipo de letra de tama&ntilde;o 2 </FONT><BR> <FONT SIZE=3>Tipo de letra de tama&ntilde;o 3 </FONT><BR> <FONT SIZE=4>Tipo de letra de tama&ntilde;o 4 </FONT><BR> <FONT SIZE=5>Tipo de letra de tama&ntilde;o 5 </FONT><BR> <FONT SIZE=6>Tipo de letra de tama&ntilde;o 6 </FONT><BR> <FONT SIZE=7>Tipo de letra de tama&ntilde;o 7 </FONT><BR> <FONT SIZE=-1>Tipo de letra de tama&ntilde;o 1 menos que el que hab&iacute;a </FONT><BR> <FONT SIZE=+3>Tipo de letra de tama&ntilde;o 3 m&aacute;s que el que hab&iacute;a antes </FONT><BR> </P>

EXTENSIN DE MICROSOFT PARA FONT El visualizador de Microsoft soporta el atributo FACE para el elemento FONT. Con este atributo se especifica la norma del tipo de carcter. Por ejemplo FACE=arial.

2.8.3.- BASEFONT
Una vez que se ha introducido el elemento FONT, es necesario asignar un nivel base al tamao del tipo de carcter utilizado. Esto se hace mediante el elemento BASEFONT, de forma que <BASEFONT=3> indica que el tamao base del tipo de caracteres para el documento es 3.

36

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

2.8.4.- APPLET
Netscape 2.0 soporta applets incrustados. Los applets son programas escritos en el lenguaje Java, que pueden ser incrustados dentro de los documentos HTML y ejecutados. Esta incrustacin se hace con el elemento APPLET; los parmetros necesarios por applet se pasan con los elementos PARAM.

2.8.5.- MARQUEE
El elemento MARQUEE se soporta slo por Microsoft Internet Explorer 2.0 y versiones posteriores, y se emplea para crear un marco para el texto desplegable. Por ejemplo:

<MARQUEE ALIGN=top>Texto desplegable</MARQUEE>

2.8.6.- MAP
Especifica las regiones de una imagen proyectada y los URLs asociados mediante una estructura de la forma: <MAP NAME=un_nombre> <AREA SHAPE=rect COORDS=x1,y1,x2,y2 HREF=url_region> ...ms formas... </MAP> Dentro del elemento MAP estn los elementos AREA con los parmetros siguientes: SHAPE que indica la forma de las zonas calientes, COORDS donde (x1,y1) son las coordenadas de la esquina superior izquierda del rectngulo y (x2, y2) las coordenadas de la esquina inferior derecha. Otras formas posibles son: <AREA SHAPE=circle COORDS=x1, y1, rHREF=url_region> <AREA SHAPE=polygon COORDS=x1, y1, x2, y2, ... HREF=url_region Todas las coordenadas se dan en pixels. Para referenciar el mapa desde un elemento IMG se utiliza el nuevo atributo USEMAP. Por ejemplo: <IMG SRC=mapa.gif USEMAP=#un_nombre> hace referencia al mapa anterior llamado un_nombre. Es conveniente que en el elemento IMG se ponga un atributo ISMAP y un ancla apuntando a un servidor con un programa para proyeccin de imgenes. <BODY> <IMG USEMAP="#menu" SRC="a:\mapa.bmp" BORDER=0 WIDTH=800 HEIGTH=105 ALIGN=absmiddle> <map name="menu"> <area shape="rect" coords="0,0,85,85" href="documento1.html" >

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

37

Captulo 2

HTML

<area shape="rect" coords="709,34,785,63" href="documento2.html"> <area shape="rect" coords="102,0,693,44" href="documento3.html"> <area shape="rect" coords="102,58,206,91" href="documento4.html"> <area shape="rect" coords="221,58,444,91" href="documento3,html"> <area shape="default" nohref"> </map> </BODY>

2.8.7.- FRAME Con los documentos FRAME, la pantalla se divide en un nmero de marcos de divisin independientes, cada uno de los cuales contiene su propio documento HTML. <FRAMESET ROWS="15%,70%,15%"> <FRAME NAME="ventana1" SRC="documento.html"> <FRAMESET COLS="50%,50%"> <FRAME NAME="ventana2" SRC="documento2.html"> <FRAME NAME="ventana3" SRC="documento3.html"> </FRAMESET> <FRAME NAME="ventana2" SRC="documento4.html"> <NOFRAME> <BODY> .................... </NOFRAME> </FRAMESET> En este caso, primero se divide la pantalla en tres partes, la de arriba y la de abajo ms estrechas (del 15% de la altura de la pantalla), el resto es para el marco central. La parte de arriba se denomina ventanal e inicialmente se carga con el documento documento.html. El elemento FRAME indica el contenido inicial de la celda, que puede estar vaca. La segunda parte se divide, por columnas, en dos marcos, llamados ventana2 y ventana3. Y as el resto. Una vez que se han denominado los marcos, se puede indicar a las anclas de hipertexto que devuelvan los datos a un determinado marco. Para hacer esto se emplea un nuevo atributo (TARGET) para el elemento A. Por ejemplo, si un documento contiene el ancla: <A HREF=tudocumento.html TARGET=ventana3>enlace</A> Netscape coge los datos recibidos y los coloca en la ventana denominada ventana3, tal como se indic en el enlace. Si un visualizador no soporta marcos, entonces todos los elementos FRAMEs y visualiza el contenido de NOFRAMES. Por el contrario, si un vsualizador entiende los FRAMEs, entonces ignora el contenido de NOFRAMES. <FRAME SET COLS=def |ROW=def [FRAMEBORDER=yes | no] [BORDER==n] [BORDERCOLOR=color]> Define los frames. COLS y ROW indican si la pgina se debe dividir en columnas o en filas. Se pueden mezclar filas y columnas. def es una lista de alturas o anchuras de los marcos separados por comas. Se pueden dar en punto (n), porcentaje de la pgina (n%) o en formato auto (*). Para el resto de la pgina el formato es AUTO, po ejemplo, COLS=100,*. FRAMEBORDER muestra u oculta los divisores de los frames. BORDERCOLOR es un nombre de color o un valor RGB que asigna un color al borde. Esta directiva debe terminar con </FRAMESET>. <FRAME [ . . .]> Define un frame dentro de la directiva FRAMESET. Se pueden utilizar los siguientes parmetros:
38

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

NAME= text: nombre del frame, por ejemplo, es el utilizado en los parmetros de TARGET para referenciar a un frame en concreto. SRC=URL: es el URL de la pgina que se debe situar en la directiva. [ SCROLLING= yes | no| auto]: indica si el frame debe de tener barras de desplazamiento. Si se pone AUTO, las barras de desplazamiento se utilizan en caso necesario. [ MARGINHEIGT=n] [MARGINWIDTH]: asigna, en pixels, los mrgenes de los bordes del frame. [NORESIZE]: evita que el usuario cambie el tamao del frame. [FRAMEBORDER=yes |no] [BORDER = n] [BORDERCOLOR=color]: tiene las mismas propiedades que en la directiva FRAMESET.

<HTML> <HEAD><TITLE>Ejemplo de Frames</TITLE> </HEAD> <FRAMESET ROWS="30%,*"> <FRAME NAME="ventana1" SRC="primero.html"> <FRAMESET COLS="40%,60%"> <FRAME NAME="ventana2" SRC="izquierda.html"> <FRAME NAME="ventana3" SRC="derecha.html"> </FRAMESET> </FRAMESET> <NOFRAMES> <BODY> <P> No dispone de un visualizador con "frames". Puede perder algunas caracter&iacute;sticas e informaci&oacute; de estos documentos< <HR> Puede cargar el <A HREF="indice.html">indice</A> y navegar por el mismo. </BODY> </FRAMES> </HTML>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

39

Captulo 2

HTML

<html> <head></head> <body> <H1><CENTER> Delta PC </CENTER></H1> <H2><CENTER>Cursos de verano 99</CENTER><H2> </body> </html> <HTML> <HEAD> </HEAD> <BODY> <UL> <LI>Curso de Ofim&aacute;tica Office <LI>Curso de Windows NT <LI>Curso de Visual Basic <LI>Curso de Linux <LI>Curso de Autocad <LI>Curso de Diseo de p&aacute;ginas Web <LI>Curso de 3D Studio Max/Viz <LI>Curso de Diseo Gr&aacute;fico <LI>Curso de Contabilidad <LI>Curso de Asesor&iacute;a Laboral </UL> </BODY> </HTML> <HTML> <HEAD></HEAD> <BODY> <IMG SRC="A:\deltapc.jpg" BORDER=0 ALIGN="Middle"> <BR>
40

WIDTH=154

HEIGTH=71

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

<P>Web:<A HREF="http:www.ctv.es/USERS/deltapc">http:/www.ctv.es /USERS/deltapc</A> <P>E-mail: [email protected] </BODY> </HTML>

2.9.- HOJAS DE ESTILO

Las extensiones del lenguaje HTML3 incluyen las denominadas hojas de estilo que son soportadas por las versiones ms recientes de los navegadores Web. Mucho de lo que indica a continuacin es vlido slo para Microsoft Internet Explorer 3.0 o superior. Netscape Navigator 3.0 ha dado problemas con las hojas de estilo. Las hojas de estilo se refieren a definiciones de formatos de directivas (tags) que se pueden incluir tanto en el propio documento HTML como en un documento aparte de hoja de estilo. Su principal ventaja se refiere a la capacidad de homogeneizar y mejorar el mantenimiento de diseos de pginas HTML, de forma que la personalizacin de color, tipos y tamaos de fuentes, prrafos, fondos, etc., estn recogidas en un lugar concreto. De esta forma, cambiar la apariencia de todo un grupo de documentos ser tan simple como cambiar las definiciones de una o varias hojas de estilo.

2.9.1.- VISION GENERAL Una hoja de estilo es una definicin de atributos de cdigo HTML, que puede estar embebido (in-line) o en un archivo separado. La definicin de un estilo estar delimitado por los nuevos tributos <STYLE> . . . </STYLE>. El lugar natural para definir estilos, o hacer referencias a estilos contenidos en archivos externos, es en la cabecera de los documentos HTML, es decir, entre los tags <HEAD> . . . </HEAD>.

2.9.2.- DIRECTIVAS DENTRO DE UNA HOJA DE ESTILO En las hojas de estilo se utilizan directivas (tags) del lenguaje HTML, con la posibilidad de definir y declarar directivas personales, utilizables con posterioridad, de forma similar, dentro de un documento de marcas de hipertexto (HTML). Adems del elemento STYLE se ha aadido otro elemento SPAN y los siguientes atributos: CLASS, ID, STYLE soportados por todos los elementos dentro de BODY excepto AREA, CENTER, FONT, MAP, PARAM y SCRIPT. REL soportado por el elemento LINK. HTTP-EQUIV soportado por el elemento META. Las hojas de estilo permiten indicar como debe presentarse el texto sin que cambien en el documento las directivas y marcas de caracteres. Si quiere definir propiedades para un atributo estndar HTML, por ejemplo referente a cabeceras de primer nivel (<H1> . . . </H1>), deber realizar una especie de sobrecarga . as, un cdigo como el siguiente:

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

41

Captulo 2

HTML

<HEAD> <STYLE TYPE="text/css"> <!--H1 {color:#202060} A {color: #FF00FF; font-weight:bold} BODY {background:#0000FF} .resalte{color: #FF0000; text-align: center} - -> </STYLE> </HEAD> redefinir los atributos por defecto de la cabecera de primer nivel, con un color de texto #RRGGBB dado; los enlaces marcados por el atributo <A . . .> . . . </A> con n color #RRGGBB y en negrita; y el color de fondo de la pgina de color azul (segn el patrn #RRGGBB). Se pueden declarar propiedades particulares para la directiva BODY, dentro de une estilo que se encuentre en la cabecera de la pgina HTML.

2.9.3.- ENLAZANDO HOJAS DE ESTILO A LOS DOCUMENTOS Hay dos formas para incluir la informacin de las hojas de estilo en un documento: usando LINK para referenciar una hoja de estilo externa, o incluyendo la informacin de la misma dentro del elemento STYLE en el propio documento. Si se hace referencia a una hoja de estilo externa se pondr una marca de la forma:

LINK REL=stylesheet TYPE=mime/type HREF=url>

donde REL=stylesheet indica que el recurso fuente es una hoja de estilo, url es el URL que apunta al documento con hoja de estilo, y mime/type es el tipo MIME de la hoja de estilo, lo que permite tener distintos lenguajes de las hojas de estilo, cada uno con su propio tipo MIME. Las hojas de estilo tambin se pueden colocar dentro del elemento STYLE, en la cabecera (HEAD) del documento. Un ejemplo en el lenguaje CSS es: <STYLE> BODY{ Font-family:times,serif; Color:black; Margin-left:10%; Margin-rigth:10%; } A: link {color:black; text-decoration:underline} A:visited {color:black;text-decoration:none} </STYLE> Para ocultar la informacin de las hojas de estilo a los visualizadores que no las entienden, esta se puede poner dentro de un comentario, para el caso quedara: <STYLE> <!-BODY{ Font-family:times,serif; Color:black; Margin-left:10%;

42

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

Margin-rigth:10%; } A: link {color:black; text-decoration:underline} A:visited {color:black;text-decoration:none} - -> </STYLE> En el elemento STYLE no se indica el lenguaje que se utiliza para la hoja de estilo. En la actualidad se ha propuesto utilizar el elemento META para indicarlo. En este caso el lenguaje utilizado por defecto en un documento para las hojas de estilo quedara especificado de la forma: <META HTTP-EQUIV=contenedor del tipo de estilo CONTENT=tipo/subtipo> donde tipo/subtipo es el tipo de lenguaje para las hojas de estilo. Para CSS se escribir: <META HTTP-EQUIV=contenedor del tipo de estilo CONTENT=text/css> Por ltimo, el elemento nuevo SPAN permite que un formato se aplique a frases individuales, palabras o letras, independientemente del formato especificado para el elemento. Por ejemplo la marca:

<SPAN STYLE=color:red; text-decoration: line-throught> algn texto </SPAN> indica que el texto dentro de SPAN se escriba en rojo y cruzado por una lnea.

2.9.4.- NOTACIN PARA VALORES DE LAS PROPIEDADES MS HABITUALES

PROPIEDADES DE LOS FONTS Permite escoger familias genricas de fuentes del sistema Escoge una apariencia normal, italic u oblique Permite variar entre aspectos normal y small-caps. Este ltimo muestra las minsculas como pequeas maysculas. Aspecto de intensidad: normal, bold, bolder o lighter. Tambin pueden seleccionarse por valores numricos de 100,200,300,400,500,600,700,800 y 900. Tamao de la fuente, en valores absolutos (p.ej. 20pt) o relativos (p.ej. 150%) Modo general de asignacin de cualquiera de los anteriores.

Font-family Font-style Font-variant Font-weight

Font-size Font Color Background

PROPIEDADES COLOR Y BACKGROUND Color de texto. Puede especificarse en valores #RRGGBB, o por nemotcnicos, como red. Idem que el anterior para el color del fondo del cuerpo del texto de prrafos o de estilos de partes concretas.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

43

Captulo 2

HTML

PROPIEDADES TEXT Se puede definir una adicin al espaciado normal entre palabras. El valor ser positivo o negativo y se mide en em. Igual que el anterior, pero para el espaciado entre caracteres. Efecto adicional en los caracteres. Puede ser: overline, underline, line, througth o blinh. Posicionamiento vertical del elemento. Puede tomar los valores: baseline, sub, super, top, texttop, middle, bottom o text-bottom. Transformaciones de la apariencia en cuanto a mayusculas/minsculas lowercas, uppercase, capitalize o none. Alineamiento de elementos: left, right, center o justify. Sangrado de textos en unidades em. Porcentaje o relativo. Proporcin de la altura de la lnea respecto al normal.

Word-spacing Letter-spacing Text-decoration Vertical-align Text-transform Text-align Text-ident Line-height

PROPIEDADES BOX Posicionamiento de los mrgenes de una caja, medido en unidades em.

Margin-top, margin-right, margin-bottom, margin-left, margin Padding-top, Padding-right, Padding-bottom, Padding-left, padding Border-top, Border-right, Border-bottom, Border-left, Border Display List-style

Idem respecto al espaciado entre el borde y el contenido interior de la caja

Aspectos de los bordes: Ancho: thin, medium o thick. Estilo: none, dotted, dashed, solid, double, groove, rigde, insert y outset.

PROPIEDADES CLASSIFICATION Modo de mostrar informacin en un bloque. Los posibles valores son: block, inline, list-item y none. Modo de numerar listas. Posibles valores: decimal, lower-alpha, lower-roman,...

44

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 2

2.10.- SONIDO
<BGSOUND SRC=url [LOOP=n|INFINITE]> Reproduce un sonido de fondo mientras se visualiza la pgina. El sonido debe de estar en alguno de los siguientes formatos: .au, .waw o .mid. LOOP indica el nmero de veces que se repite el sonido, si es INFINITE se reproduce hasta que se cierra la pgina.

2.11.- OBJETOS EMPOTRADOS

<EMBED SRC=url [WIDTH=n][HEIGHT=n][...]> Esta directiva se utiliza para incluir objetos que requieren un plug-in. Por ejemplo, una pelcula QuickTime, una secuencia de msica MIDI, etc. Se necesitan diferentes parmetros dependiendo que tipo de objeto se utilice, pero la mayora de las veces se puede utilizar WIDTH y HEIGHT. <NOEMBED> Si el visualizador no soporta el plug-in, entonces se visualiza el texto que hay en la directiva <NOEMBED>. Con frecuencia se utiliza a continuacin de la directiva EMBED; <NOEMBED><A HREF=...>texto</A></NOEMBED>. Debe terminar con </NOEMBED>.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

45

Captulo 3

HTML

Captulo 3 UNA GUA DE ESCRITURA DE DOCUMENTOS HTML

3.1.- SOBRE LA ESTRUCTURA GENERAL DE UN HIPERTEXTO
Cuando se quiere poner a disposicin del pblico un conjunto de informacin, probablemente ya se tiene una estructura de la misma. Conviene tener siempre presente cul es la audiencia para la que se est escribiendo. No es lo mismo escribir para gente sin conocimientos previos del tema que para expertos en l. Si no tienen conocimientos del tema, la estructura que se les presente es la que aprendern, pero si tienen conocimientos del tema ya poseen una organizacin preconcebida de como ese configura la informacin del mismo, que puede ser diferente a la del escritor. Por ello es conveniente que se adopte la estructura de acuerdo con la audiencia a la que va destinada. Por ejemplo, se puede tener una estructura de tutorial para los lectores novatos y una estructura de anual de referencia para los expertos, pero la informacin base de las dos organizaciones es la misma. Otra cuestin a tener en cuenta es el tamao de la base de datos y de cada documento. Para evitar la prdida en el hiperespacio (que es frecuente cuando se visitan estructuras complejas), hay que indicar de alguna forma el tamao de la base de datos. Una forma de hacerlo es proporcionar un listado completo de las entradas (si no es adecuado darlo en la pgina inicial, se puede dar separadamente). En el ndice de nivel superior se debe anotar cada entrada con el nmero de documentos que se encuentran siguiendo esa entrada. Cuando sea posible, una representacin visual adecuada ser de gran ayuda al lector, al igual que lo son los visualizadores grficos, los monitores en color y las conexiones rpidas. Otro punto importante es el tamao de los documentos. El objeto es que cada documento cubra un concepto bien definido. No es bueno dividir arbitrariamente un concepto en varios para tener elementos de informacin ms pequeos. Ni tampoco lo es mezclar conceptos para hacer documentos ms grandes. Hay dos lmites sobre el tamao mximo de los documentos. Por un lado est el hecho de que un documento grande se tarda ms en transferir y el lector tarda ms de lo que piensa en saltarlo o volver atrs. Por otro lado, es ms difcil recorrerlos; si se tienen interfaces grficos se pueden desplegar los documentos, mediante una barra de desplazamiento que al moverla se desplaza tambin el documento en la pantalla, pero con interfaces textuales esto no es posible y slo se presentan algunas lneas. Adems, si el documento es muy grande, aunque se tengan interfaces grficos, se dificulta mucho su lectura, porque cualquier movimiento en la barra de desplazamiento causa que el documento se desplace, perdiendo el lector la orientacin de donde se encuentra. Las ventajas de un documento grande son que permite una lectura secuencial ms cmoda. Por otra parte, necesita menos enlaces, con lo que los problemas de hacerlos y mantenerlos son menores. Por ltimo, un comentario sobre los documentos que no son propios. Si se necesita hacer referencia a un documento externo, se puede hacer un enlace a l o mantener una copia del mismo. Hay razones tanto para hacer una cosa como la otra. Razones para no hacer copia del documento y hacer un enlace al mismo son las siguientes:

46

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 3

Cuando se actualiza el documento, si se tiene una copia hay que tener un mecanismo que garantice la actualizacin de la copia, de no ser as se tendrn copias desfasadas. Se puede pensar que la copia es ms fcil de acceder, pero esto es relativo. Puede haber lectores en otros sitios para los que el original est ms cerca y acceden ms fcilmente.

Entre las razones para copiarlo estn: Si es una informacin transitoria, como una noticia, es mejor tener una copia. Si se quiere hacer referencia a una determinada versin de algo, por ejemplo de un programa, es mejor mantener una copia que no cambie cuando se actualice el programa.

3.2.- SOBRE LA ESTRUCTURA DE UN DOCUMENTO

Cuando se escribe un documento de hipertexto es conveniente tener en consideracin una serie de cuestiones: Indicar el estado de la informacin del documento. Poner los enlaces en el contexto Firmar el documento. Dar un ttulo adecuado al documento. Considerar un formato independiente del dispositivo. No utilizar los enlaces como notas a pie de pgina. Anotar adecuadamente las referencias que se hagan Escribir el documento para que tambin pueda ser impreso Escribir el texto que sea legible, aunque tenga enlaces. Evitar comentarios excesivos sobre los mecanismos de informacin. No centrarse en discutir las pginas propias.

3.2.1. INDICAR EL ESTADO DE LA INFORMACIN DEL DOCUMENTO

Es normal encontrarse con documentos que no estn en su forma definitiva, sino que estn en revisin o an incompletos. Por ello es conveniente tener una informacin del estado del documento, indicando cuando fue su ltima actualizacin. No todos los documentos necesitan incluir este tipo de informacin; se puede tener una pgina de visin general en la que se da esta informacin para cada documento. En algunos casos puede ser til incluir la fecha de creacin o de la ltima modificacin, lo cual puede evitar que el lector siga leyendo una informacin ya caducada.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

47

Captulo 3

HTML

3.2.2.- PONER LOS ENLACES EN EL CONTEXTO

Para evitar que cualquier persona llegue a perderse cuando salta de un lugar a otro de la pgina tendremos que: Cuidar que el texto y el vocabulario se entienda por si mismo. Es decir, evitar comenzar los documentos con frases del tipo: La solucin al problema es... Hay palabras que se pueden enlazar a la informacin de fondo. Un ejemplo tpico es la documentacin del proyecto WWW, donde la primera aparicin de WWW se enlazaba al documento del proyecto central. Considerar tambin que se pueden dar punteros explcitos como puntos de navegacin en la parte superior e inferior del documento. Tener en cuenta la posible reutilizacin de parte del material en un futuro. Ello ayuda a escribir los documentos para su posible reutilizacin de forma separada.

Otro aspecto que conviene tener en cuenta es la inclusin de iconos para facilitar la navegacin. Esto puede ser muy efectivo si se utilizan los mismos iconos en todos los documentos. Con esto se consigue dar consistencia a toda la estructura de documentos de nuestro hipertexto, de manera que el lector sepa cuando est dentro de l y cuando est fuera, adems se tienen una forma rpida de ir hacia atrs.

3.2.3.- FIRMAR EL DOCUMENTO

El poder contactar con el autor tambin ayuda a tener actualizado el documento. Esto es fcil hacerlo, ya que solamente hay que poner un enlace a una pgina que contenga informacin del autor.

3.2.4.- DAR TTULO ADECUADO AL DOCUMENTO

El ttulo del documento se da en el elemento TITTLE en la cabecera (HEAD) del mismo. Hay un ttulo para cada documento (obligatoriamente), el cual debe dar informacin del documento en un contexto global.

3.2.5.- CONSIDERAR UN FORMATO INDEPENDIENTE DEL DISPOSITIVO El hipertexto escrito en HTML no contiene informacin sobre los tipos de letras, la forma y el espaciado de los prrafos que se den utilizar para visualizar el documento. Esto tiene la ventaja de que se puede interpretar adecuadamente en cualquier plataforma, incluso en terminales de slo texto. Conviene seguir algunas reglas sencillas: Utilizar siempre las cabeceras en orden, una cabecera H1 al inicio del documento, cabeceras de nivel 2 para marcar secciones, de nivel 3 subsecciones, etc... No aadir espacios y lneas en blanco, excepto en los elementos preformateados. No referirse a posibilidades que sean propias de un visualizador en particular. Por ejemplo, diciendo pulse aqui o seleccione el nmero del enlace. El usuario tendr las instrucciones de como seleccionar enlaces en su visualizador.

48

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 3

3.2.6.- NO UTILIZAR LOS ENLACES COMO NOTAS A PIE DE PGINA.

Las notas a pie de pgina distraen de la lnea argumental. Si el material que hay en una nota no se puede integrar en el cuerpo del texto, probablemente tampoco ser necesario en una nota.

3.2.7.- ANOTAR ADECUADAMENTE LAS REFERENCIAS QUE SE HAGAN.

Cuando se haga una lista de referencias es conveniente anotarlas y dar una pequea descripcin del contenido del destino de cada enlace, pero con discrecin, ya que muchos ttulos son autoexplicativos y no necesitan anotaciones adicionales. Una anotacin que no diga nada es tan malo como no tener ninguna.

3.2.8.- ESCRIBIR EL DOCUMENTO PARA QUE PUEDA TAMBIN SER IMPRESO

Si se tienen archivos HTML, es posible hacer una impresin del documento formatendolo para algn procesador de texto, pero al crear el texto del documento hay que tener en mente el que se pueda leer de forma impresa. Por ello, conviene evitar hacer referencias en el texto de la forma para ms informacin sobre HTML pulse aqu, en su lugar se puede intentar escribir algo como para ms informacin sobre HTML ver la seccin de referencia de HTML (donde referencia de HTML tiene un enlace al documento de referencia de HTML).

3.2.9.- ESCRIBIR TEXTO QUE SEA LEGIBLE, AUNQUE TENGA ENLACES

Un aspecto que ya han resaltado otros autores y que, desafortunadamente, est muy extendido, es lo que han denominado el sndrome del aqu. Es decir, un abuso haciendo enlaces en la palabra aqu. Por ejemplo: Para informacin sobre XXXX pulse aqu. que quedara mejor y mucho ms fcil de leer si se utiliza una frase del tipo: Se dispone de informacin sobre XXXX.

3.2.10.- NO ABUSAR DE IMGENES Y GRFICOS

Algunos autores llenan sus documentos de imgenes y grficos, que muchas veces no aportan ms informacin de la que se pueda dar con un simple texto, pero que sin embargo aumentan considerablemente el tiempo de transmisin; esto se hace ms patente en aquellos usuarios conectados mediante la lnea telefnica normal. Adems hay muchos usuarios que no disponen de un visualizador grfico o tienen desactivada la carga de imgenes. Por estos motivos es recomendable no abusar de ellas y si es necesario incluir una imagen utilice el atributo ALT en el elemento IMG.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

49

Captulo 4

HTML

Captulo 4.- EL MODELO DE OBJETOS DE ACTIVEX-SCRIPT

La realizacin de pginas Web interactivas fue uno de los objetivos centrales centrales en la elaboracin de las tecnologas ActiveX. En primer lugar fue necesario crear las posibilidades que permitieran al programador acceder a cada uno de los componentes de una pgina Web, consultarlos y modificarlos si fuera necesario. Para evitar incompatibilidades entre diferentes lenguajes Script, Microsoft se esforz en encontrar un concepto que trascendiera a todos ellos. Esto se consigui con el entorno ActiveXScripting. El concepto de ActiveX-Script se basa, en definitiva, en separar el lenguaje de programacin del modelo de objeto propiamente dicho. El modelo de objeto realizado en ActiveX se apoya considerablemente en el modelo de objeto realizado en Java-Script.

4.1.- CONCEPTOS FUNDAMENTALES DE LA PROGRAMACIN ORIENTADA A OBJETOS

Una de las tareas principales en el diseo de lenguajes de programacin modernos es la creacin de conceptos que permitan un desarrollo modular del programa. El esfuerzo global en la creacin de programas de ordenador complejos, significa varios aos de trabajo. La necesidad de determinar lugares de interseccin claros entre los programas parciales que sern creados por diferentes programadores es evidente. Esto resulta prcticamente imposible en el marco de lenguajes de programacin clsicos, que trabajan de manera procedural. En el marco de lenguajes de programacin orientada a objetos, los objetos se organizan jerrquicamente en una estructura de clases de objeto. Por lo tanto, un objeto puede tener subobjetos o un objeto superior. Los mtodos que han sido definidos para un objeto superior pueden heredarlos los objetos subordinados. Los mtodos de mismo nombre, al aplicarse a objetos diferentes, pueden producir efectos tambin diferentes. La relacin entre un mtodo y su objeto correspondiente se denomina enlace. Cuando existen enlaces entre objeto diferentes y mtodos diferentes, que sin embargo tienen nombres idnticos, se utiliza la denominacin polimorfismo. Herencia y polimorfismo son caractersticas especiales de los lenguajes de programacin orientados a objetos. En la realizacin de lenguajes de programacin Script para el diseo de pginas Web interactivas en cambio, estos trminos tienen un papel secundario. Por tanto, dichos conceptos no se han implementado en los lenguajes de programacin Script existentes en la actualidad. El procedimiento viene dado un sistema de objetos fijo que puede ser elaborado por un lenguaje de programacin especialmente adecuado para ello. Este sistema se llama modelo de objetos ActiveX-Script.

4.2.- LOS OBJETOS DEL ENTORNO DE PROGRAMACIN ACTIVEXSCRIPT

El modelo de objetos ActiveX-Script consiste esencialmente en una sola jerarqua de objetos. El objeto superior de esta jerarqua se llama Window. El objeto Window representa la ventana principal del Internet-Browser que se utiliza, as como sus mtodos y propiedades. Todos los dems objetos son subobjetos directos o indirectos del objeto Window. Al dar nombre a un objeto, que posee un objeto subordinado, al nombre de objeto se le antepone el nombre del objeto superior, separando mediante puntos los componentes de nombre y yuxtapuestos. Algunos de los objetos disponibles aparecen varias veces dentro de un entorno, es decir,

50

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

dentro del objeto superior. Se trata de los objetos Frame, Script, Link, Anchor, Form y Element. Por esta razn, se administran como variables de objeto indexadas. As, la denominacin de cada uno de los objetos se realiza indicando el ndice correspondiente entre parntesis o utilizando el nombre que se le asign al elemento HTML en cuestin, mediante el atributo HTML NAME.

4.3.- EJEMPLOS PARA LA UTILIZACIN DE PROPIEDADES Y METODOS

Con el sistema de nombres de objeto descrito en el apartado anterior puede accederse unvocamente a prcticamente todas las partes de un documento, que pueden ser consultadas o manipuladas por un programa Script. Los objetos disponen de propiedades que representan las variables pertenecientes al objeto y mtodos que corresponden a funciones especficas del objeto. La denominacin de las propiedades y los mtodos se produce de manera que cada nombre se agrega al nombre del objeto en cuestin, separando ambos componentes del nombre mediante un punto. Como puede comprobarse, no existe prcticamente ninguna diferencia entre la denominacin de un subobjeto y una propiedad de objeto o un mtodo de objeto. Efectivamente, con frecuencia los subobjetos se entienden como propiedades del correspondiente objeto superior.

4.3.1.- CREACIN DE CUADROS DE DILOGO En objeto Window posee tres mtodos que sirven para crear cuadros de dilogo, en concreto alert, confirm y prompt. Para activar estos mtodos, es suficiente indicar el nombre del mtodo, es decir, se puede prescindir del componente del nombre Window, al igual que los subobjetos del objeto Window. El siguiente documento HTML posee tres botones que se crean como elementos comunes de un formulario HTML. Cada uno de estos botones sirve para la activacin de uno de los cuadros de dilogo mencionados.
<HTML> <HEAD> <TITLE> Los cuadros de dilogo </TITLE> <SCRIPT LANGUAGE="VBS"> sub butt1 alert("Advertencia") end sub sub butt2 confirm("Confirmacin") end sub sub butt3 prompt("Entrada") end sub </SCRIPT> </HEAD> <BODY> <CENTER> <H1> ActiveX dispone de tres cuadros de dilogo diferentes </H1> <FORM NAME="Cuadros de dilogo"> <INPUT TYPE="button" VALUE="Advertencia" onClick="butt1"><BR> <INPUT TYPE="button" VALUE="Confirmacin" onClick="butt2"><BR> <INPUT TYPE="button" VALUE="Entrada" onClick="butt3">

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

51

Captulo 4

HTML

</FORM> </CENTER> </BODY> </HTML>

El mtodo alert crea una advertencia, que dentro del cuadro de dilogo se ilustra mediante un tringulo amarillo con un signo de exclamacin. La nica interaccin del usuario que se ha previsto en este cuadro de dilogo es la confirmacin mediante una pulsacin del ratn en el botn Aceptar.

El mtodo confirm produce la emisin de un cuadro de dilogo, que ofrece otro botn como alternativa a la confirmacin. El carcter interrogante de este cuadro de dilogo queda remarcado adicionalmente con un signo de interrogacin azul dentro de un bocadillo.

El mtodo prompt, finalmente, sirve para crear un cuadro de dilogo en el que el usuario puede introducir un texto.

52

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

A diferencia del mtodo alert, los mtodos confirm y prompt suministran valores al programa principal, como resultado de la ejecucin. En el caso del mtodo confirm, el valor de retorno es TRUE o FALSE, en funcin del botn que se utilice para salir del cuadro de dilogo. El mtodo prompt suministra la cadena de caracteres introducida por el usuario. 4.3.2.- LA BARRA DE ESTADO Una de las aplicaciones de los lenguajes Script en el marcode pginas HTML, que se utiliza con frecuencia en la WWW, es un texto dentro de la barra de estado de la venta del Browser. La base para la programacin de esta funcionalidad se encuentra en la propiedad Status del objeto Window. Mediante una simple asignacin de valor dentro de un programa Script, esta propiedad puede recibir un texto cualquiera, que se mostar despus en la barra de estado de Internet Explorer. Ejemplo: <HTML> <HEAD> <TITLE> La barra de estado </TITLE> <SCRIPT LANGUAGE="VBS"> sub butt1 status=document.Form1.statext.value end sub </SCRIPT> </HEAD> <BODY> <CENTER> <H1> Con ActiveX Script puede manipularse el contenido de la barra de estado </H1> <FORM NAME="Form1"> <INPUT TYPE="input" NAME="statext"> <INPUT TYPE="button" VALUE="mostrar como texto de la barra de estado" onClick="butt1"><BR> </FORM> </CENTER> </BODY> </HTML>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

53

Captulo 4

HTML

En el ejemplo anterior, las dos lneas del programa status=document.Form1.statext.value y status=document.Forms(0).elements(0=.value seran complementariamente equivalentes.

4.3.3.- LAS CONFIGURACIONES DE COLOR El diseo de color de una pgina WWW se controla a travs de un total de cinco propiedades, que pueden ser configurables como atributos del elemento BODY. Estos atributos se llaman ALINK, BGCOLOR, LINK, TEXT y VLINK. En el marco de ActiveX Script, estos mismos valores de color pueden consultarse o modificarse mediante las propiedades aLinkColor, bgColor, linkColor, fgColor y vLinkColor del objeto document. <HTML> <HEAD> <TITLE> Las configuraciones de color </TITLE> <SCRIPT LANGUAGE="VBS"> sub butt1 entre=document.bgColor document.bgColor=document.fgColor document.fgColor=entre end sub </SCRIPT> </HEAD> <BODY> <CENTER> <H1>

54

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

Con ActiveX Script pueden cambiarse los colores </H1> <FORM NAME="Form1"> <INPUT TYPE="button" VALUE="invertir colores" onClick="butt1"><BR> </FORM> </CENTER> </BODY> </HTML>

4.3.4.- PRESENTACION DEL TEXTO El mtodo wite del objeto documento sirve para la presentacin de texto. El tratamiento del texto se produce de manera totalmente anloga al tratamiento de texto, que es componente directo del documento HTML.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

55

Captulo 4

HTML

Ejemplo: <HTML> <HEAD> <TITLE> La presentacin del texto </TITLE> </HEAD> <BODY> <H1> Algunas informaciones acerca de su Browser: </H1> El nombre codificado de este programa es: <SCRIPT LANGUAGE="VBS"> document.write navigator.appCodeName </SCRIPT><BR> El nombre real de este programa es: <SCRIPT LANGUAGE="VBS"> document.write navigator.appName </SCRIPT><BR> La denominacin de la versin de este programa es: <SCRIPT LANGUAGE="VBS"> document.write navigator.appVersion </SCRIPT><BR> La propiedad UserAgent suministra: <SCRIPT LANGUAGE="VBS"> document.write navigator.userAgent </SCRIPT> </BODY> </HTML>

56

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

4.3.5.- HYPERLINKS Todos los Hyperlinks dentro de un documento HTML se introducen en la variable de objeto links(). Cada objeto de esta variable dispone de nueve propiedades. Estas propiedades se determinan con los atributos del Tag<A> y no pueden ser modificadas posteriormente. nicamente es posible elegir los valores de las propiedades. Tomemos el siguiente link como ejemplo: <A HREF=http://www.ctv.esTARGET=frameA> La tabla que figura a continuacin rene todas las propiedades del objeto Link correspondiente.

Propiedad href protocol host hostname port pathname search hash target

Valor de devolucin (ejemplo) http://www.ejemplo.de:8000/carpeta Todo el URL /archivo.html?clave#destino http: www.ejemplo.de:8000 www.ejemplo.de 8000 /carpeta/archivo.html Clave #destino FrameA

Significado

La parte del URL, que determina el protocolo de transmisin. El nombre del ordenador y el nmero de puerto. El nombre del ordenador (DNS) El nmero de puerto La indicacin de la ruta La cadena (string) de bsqueda (sin el interrogante!) El destino de salto dentro de la pgina HTML activada El nombre del Frame, en el que debe mostrarse el documento activado.

El siguiente listado representa una aplicacin sencilla de dos de los mtodos mencionados. <HTML> <HEAD> <TITLE> Los Hyperlinks </TITLE> </HEAD> <BODY> <H1> Algunos Links importantes: </H1> Por aqui se va a <A HREF="http://www.microsoft.com">Microsoft</A>.<BR> <A HREF="http://www.yahoo.com">Yahoo</A> es uno de los dispositivos de busqueda mas conocidos.<BR>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

57

Captulo 4

HTML

Pero <A HREF="http://www.altavista.digital.com">Altavista</A> es ms potente en bastantes aspectos.<BR> Y para finalizar, un <A HREF="http://www.fantasa.es/carpeta/home.htm" NAME="phant"> Link inventado.</A><BR> <BR> El Host de la direccin inventada se llama: <SCRIPT LANGUAGE="VBS"> document.write document.links(3).host </SCRIPT><BR> La ruta es: <SCRIPT LANGUAGE="VBS"> document.write phant.pathname </SCRIPT> </BODY> </HTML>

4.3.6.- FORMULARIOS Segn el concepto original de la WWW, los formularios HTMl sirven para recibir datos del usuario, que posteriormente se envan al servidor para su evaluacin. Gracias a los lenguajes Script, ahora es posible evaluar, total o parcialmente, los contenidos de formularios a travs del Browser. Normalmente, tambin se utiliza el formulario HTML para presentar los resultados de la evaluacin. Un formulario HTML se representa, en el marco del entorno ActiveX Scripting, mediante un sistema de objetos, que se resumen todos ellos en una variable de objeto de nombre elements(). Todos los formularios que aparecen en el contexto de un documento, se administran en la variable de objeto forms(). Al igual que en el caso de los elementos de la variable
58

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

de objeto links(), que ya hemos tratado, aqu tambin existen dos posibilidades para la denominacin de objetos. Puede accederse a cada objeto tanto a travs de su nombre o como elemento de variable indexado. Debido al hecho de que las propiedades de los elementos de formulario se administran como propiedades de objeto, dentro del modelo de objetos ActiveX-Script, se hace posible el diseo de formularios cuya representacin dependa de los datos que introduzca el usuario.

<HTML> <HEAD> <TITLE> Formularios </TITLE> <SCRIPT LANGUAGE="VBS"> sub rotular document.forms(1).elements(0).value=document.forms(0).elements(0).va lue document.forms(1).Boton2.value=document.Introduccion.Inscripc2.value Botones.Boton3.value=Introduccion.elements(2).value Botones.elements(3).value=document.forms(0).elements(3).value end sub </SCRIPT> </HEAD> <BODY> <H1> Introduccin de las inscripciones de botones: </H1> <FORM NAME="Introduccion"> <INPUT TYPE="text" NAME="Inscripc1" SIZE="30"><BR> <INPUT TYPE="text" NAME="Inscripc2" SIZE="30"><BR> <INPUT TYPE="text" NAME="Inscripc3" SIZE="30"><BR> <INPUT TYPE="text" NAME="Inscripc4" SIZE="30"><BR> <INPUT TYPE="button" VALUE="rotular" onClick="rotular"> </FORM><BR> <P> <H1> Los botones con sus inscripciones: </H1> <FORM Name="Botones"> <INPUT TYPE="button" 1............."> <INPUT TYPE="button" 2............."><BR> <INPUT TYPE="button" 3.............">

NAME="Boton1" NAME="Boton2" NAME="Boton3"

VALUE=".............Botn VALUE=".............Botn VALUE=".............Botn

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

59

Captulo 4

HTML

<INPUT TYPE="button" 4............."> </FORM> </BODY> </HTML>

NAME="Boton4"

VALUE=".............Botn

60

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

4.4.- EL MODELO DE OBJETOS ACTIVEX-SCRIPTING

4.4.1.-EL OBJETO WINDOW Es el objeto ms importante y se suta en la parte ms alta de la jerarqua de objetos JavaScript. Este objeto tiene tal relevancia que los mtodos hacen referencia a l de forma implcita. Por ejemplo, cada vez que se emplea la funcin alert(). Se est haciendo uso de uno de los mtodos del objeto window con la palabra self. As, las siguientes instrucciones son equivalentes: alert (Mensaje de prueba) window.alert (Mensaje de prueba) self.alert (Mensaje de prueba) Existen seis propiedades del objeto Window, que son: DefaultStatus Status Name Parent Self Top

1. window.defaultStatus y window.status Sirven para modificar el texto que se muestra en la barra de estado del Browser. La diferencia entre ambas propiedades consiste en que la propiedad defaultStatus ofrece un texto estndar, que puede ser sobrescrito temporalmente mediante la utilizacin de la propiedad status. 2. window.name Suministra el nombre de la ventana del Browser. La propiedad name devuelve una cadena vaca, si de aplica en el marco de un documento HTML corriente que no est subdividido en varios FRAMES. Cuando se utiliza dentro de un documento HTML, que se muestra como contenido de un FRAME, la propiedad name devuelve precisamente el nombre de esta subventana. Las lneas de programa Visual-Basic-Script nombre de ventana=name o nombre de ventana=window.name tienen ambas como consecuencia, que a la variable nombre de ventana se le asigne una cadena de caracteres vaca o bien el nombre del FRAME actual. 3. window.parent Remite a la ventana superior o al FRAME superior, respectivamente. 4. window.self Remite a aquella ventana, en la que se muestra el documento HTML en cuestin. 5. window.top Remite a la ventana superior de la jerarqua FRAME. Para ilustrar los efectos de las propiedades name, parent, self y top, servirn los tres documentos HTML siguientes:

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

61

Captulo 4

HTML

Se observa que los efectos de las propiedades name y sef.name siempre son equivalentes., en las dos ventanas parciales inferiores, tambin se muestra el nombre de un FRAME superior. No existe nombre para el primer FRAME de todos. Por ello, tanto la propiedad top.name, devuelven una cadena (string) vaca en cada caso. El objeto Window dispone de los siguientes mtodos: 1. alert, confirm y prompt sirven para crear pequeos cuadros de dilogo. 2. open y close la mayora de los programas de navegacin permiten tener varias ventanas abiertas simultneamente, cada una de ellas mostrando distintas pginas HTML. El objeto window siempre hace referencia a la ventana activa en ese momento, con lo que es necesario disponer de alguna forma de relacionarla con el resto de ventanas abiertas. Para hacer referencia a una ventana distinta es preciso que est creada o abierta empleando el mtodo open(). Este mtodo nos sirve para iniciar o crear una nueva ventana de navegacin. La sintaxis del mtodo open() es la siguiente: Open (URL, nombreventana, caractersticasventana) donde los tres parmetros son: URL: Una cadena conteniendo el URL a mostrar en la nueva ventana. Si colocamos una cadena vaca, se crea una nueva ventana a su vez vaca. Nombreventana: una cadena especificando el nombre de la ventana que podr ser utilizado por el atributo TARGET de algn formulario o de un hiperenlace. Caractersticasventana (opcional): es una cadena conteniendo una lista, separada por comas, de distintas caractersticas de la ventana que se deseen fijar. Las posibles caractersticas son:

62

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

Dependent: si se le asigna el valor yes, la nueva ventana es hija de la actual. Height: especifica, en pixels, la altura de la nueva ventana. InnerHeight: especifica, en pixels, la altura de la nueva ventana (para Navigator 4.0) InnerWidth: especifica, en pixels, el ancho del rea de contenido de la nueva ventana. Location: si se le asigna el valor yes, coloca en la ventana el campo de entrada de direccin. Menubar: si se le asigna el valor yes, coloca la barra de men en la nueva ventana OuterHeight: especifica, en pixels, el tamao vertical externo de la ventana. Resizable: si se le asigna el valor yes, el tamao de la nueva ventana puede ser modificado por el usuario. ScreenX: especifica la distancia, en pixels, de la nueva ventana al borde izquierdo de la pantalla. ScreenY: especifica la distancia, en pixels, de la nueva ventana al borde superior de la pantalla. Scrollbars: si se le asigna el valor yes, en la nueva ventana aparecen barras de desplazamiento cuando el documento sea ms grande que el tamao de la ventana. Status: si se le asigna el valor yes, coloca la barra de estado. Toolbar: si se le asigna el valor yes, coloca la barra de herramientas estndar. Width: especifica, en pixels, el ancho de la nueva ventana. Ejemplo:

<HTML> <HEAD> <TITLE>Ejemplo de mtodo Open</TITLE> <SCRIPT LANGUAGE="VBS"> Sub Crear Set ventana=window.open("","Nombre1", "height=100,width=400,menubar=yes,location=yes,toolbar=ye s") ventana.focus() texto="<HEAD><TITLE>Ventana Creada</TITLE></HEAD>" texto=texto & "<B>Esto el un mensaje de prueba en la nueva ventana" texto=texto & " creada por la funcin Crear.</B><BR>" ventana.document.write(texto) End Sub </SCRIPT> </HEAD> <BODY> <FORM> Pulsar este botn para crear una ventana nueva<BR> <INPUP TYPE="button" VALUE="Nueva Ventana" onClick="Crear"> </FORM> </BODY> </HTML>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

63

Captulo 4

HTML

3. setTimeout y clearTimeout Estos dos mtodos se desarrollaron para el control de procesos temporales. La sintaxis de la 1 es: setTimeout.(expresin, tiempo) donde expresin es una cadena que contienen el nombre de una funcin la cual es evaluada una vez que el perodo de tiempo especificado (en milisegundos) transcurre. 4. Navigate Tiene como consecuencia, que un archivo sea activado y mostrado mediante un URL nuevo. El objeto Window tiene asignados dos eventos cuya manifestacin puede ser comprobada y evaluada a travs de dos Event-Handler por parte del programa Script. Estos eventos tienen lugar cada vez que se carga un documento en la ventana en cuestin. Se llaman: onLoad onUnload

5. onLoad y onUnload el controlador de eventos del objeto Window se utiliza a modo de asignaciones de atributos en el Tag BODY>. Es necesaria una asignacin de atributos adicional para indicar que lenguaje Script debe utilizarse para evaluar el evento. Los dos documentos HTML cortos que se muestran a continuacin contienen Hyperlinks que remiten cada uno al otro documento. Al pulsar en estos vnculos puede conmutarse entre un documento y otro, de ida y vuelta por as decirlo.

4.4.2.- EL OBJETO DOCUMENT

El objeto Document es un subobjeto del objeto Window. Es la representacin de objeto del documento HTML que se representa dentro de la ventana. Todos los elementos de las variables de objeto Links, Anchors y Forms son subobjetos del objeto Document.

64

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

El objeto Documente dispone de un total de nueve propiedades. LinkColor, aLinkColor, vLinkColor, bgColor y fgColor Estas propiedades afectan a los colores con los que estn representados los diferentes elementos del documento HTML. LastModified Suministra la fecha, en la que se modific por ltima vez el documento en cuestin. Title Suministra el ttulo del documento, es decir, el texto que se encuentra dentro del elemento TITLE del texto HTML. Cookie La propiedad cooke est considerada como uno de los vacos de seguridad en la moderna WWW, porque sirve para guardar informaciones breves en el disco duro del sistema Browser. Adems, esto puede suceder de un modo nada transparente para el usuario. A cada documento, es decir, a cada URL se le puede asignar una cadena de caracteres que puede guardarse en el disco duro y leerse de nuevo cada vez que se activa esa misma pgina HTML. La lnea de programa. string 1 = document.cookie asigna a la variable string string 1 el texto que se guard como cookie durante una visita anterior de la pgina Web actual. La lnea document.cookie = string2 guarda como cookie una nueva cadena de caracteres, que en este caso se traspasa como contenido de la variable string 2. Referrer Suministra el URL de la pgina que contiene el Hyperlink a travs del que se ha activado la pgina.

El objeto document dispone de cinco mtodos documentados, que son: Write y writeLn La diferencia entre los mtodos write y weiteLn es tan insignificante que prcticamente pueden utilizarse de manera equivalente, y generalmente debera darse preferencia a la forma ms corta, write. writeLn, al contrario que el mtodo write, suministra al final de la cadena de caracteres devuelta, un carcter adicional de salto de lnea. Este tipo de caracteres de control, sin embargo, no suelen tener ningn efecto dentro de documentos HTML. En HTML los saltos de lnea se crean mediante Tags JTML especiales (<BR> o <P>). Open, close y clear Con los mtodos open y close se abre o se cierra, respectivamente, la ventana actual a modo de canal de salida para los mtodos write y writeLn. La utilizacin de los mtodos write en un entorno limitado por open y close, se diferencia en dos caractersticas de la utilizacin convencional de estos mtodos: 1. La salida de texto no se produce inmediatamente despus de haber elaborado el comando write, sino que lo hace en el instante en que se cierra el canal de salida mediante el mtodo close.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

65

Captulo 4

HTML

2. La salida de texto no se produce mediante un aadido al texto actual, sino por separado, en una ventana que anteriormente se ha borrado. Ejemplo: <HTML> <HEAD> <TITLE> Open, Close y Clear </TITLE> <SCRIPT LANGUAGE="VBS"> sub butt1 document.open document.write "Texto de prueba 1" document.close end sub sub butt2 document.open document.write "Texto de prueba 2" document.close end sub </SCRIPT> </HEAD> <BODY> Seleccione uno de los dos botones: <FORM> <INPUT TYPE="button" VALUE="Texto de prueba 1" onClick="butt1"><BR> <INPUT TYPE="button" VALUE="Texto de prueba 2" onClick="butt2"><BR> </BODY> </HTML>

66

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

4.4.3.- EL OBJETO FORM

Un objeto Form, un elemento de la varialbe de objetos Forms, es un subobjeto del documento que contiene el formulario HTML correspondiente. El objeto Form es el objeto superior de los elementos de formulario contenidos en el formulario en cuestin, que se administran como elementos de la variable de objeto Elements, en el marco del modelo de objetos ActiveX-Scripting. El objeto Form dispone de cinco propiedades, que son: Action Indica el URL bajo el que se puede activar, por ejemplo, el programa CGI responsable de la evaluacin del formulario. Esta propiedad normalmente recibe un valor a travs de la correspondiente asignacin de atributos dentro del Tag <FORM...>. Utilizando la propiedad action, puede sobreescribirse un URL dado. El efecto del atributo ACTION en la lnea de HTML <FORM ACTION= http://www.ctv.es/cqi/busqueda> es equivalente al efecto de la lnea de Visual-Basic.Script http://www.ctv.es/cgi/busqueda encoding la propiedad encodig se corresponde con el atributo ENCTYPE dentro de cada Tag <FORM...>, es decir, que la lnea de HTML <FORM ACTION=...ENCTYPE=text/html> equivale en su efecto a la lnea de VBS document.forms(0).enctype:text/html method Equivale al atributo de mismo nombre del Tag <FORM...>. De nuevo, la lnea de programa de HTML <FORM ACTION=...METHOD=GET> y su correspondencia en VBS document.forms(0).method=GET tienen efectos idnticos. Target Equivale al atributo TARGET dentro del correspondiente Tag <FORM...> METODOS: Submit El efecto de la activacin de este mtodo consiste en que se enva el contenido del formulario al URL que hay actualmente disponible como propiedad action. En el caso de formularios HTML puros, este mtodo se activa mediante una pulsacin del ratn en el botn que se cre con el Tag. <INPUT TYPE= submit...> si se utiliza VBS, tambin pueden tomarse otros eventos como causas de este efecto.

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

67

Captulo 4

HTML

OnSubmit Con el controlador de evento onSubmit puede evitarse un envo del contenido del formulario al activar el mtodo submit. Esta funcionalidad puede utilizarse, por ejemplo, para someter los datos del formulario a ciertos controles de aceptacin antes del envo definitivo. Mediante la lnea Script Formulario 1.onSubmit:return check() Se exige que antes del envo del contenido del formulario de nombre formulario!, se active la funcin check(). Si esta funcin suministra un valor de retorno diferente a TRUE, el contenido del formulario no se enva.

4.4.4.- EL OBJETO LOCATION Representa el URL del documento actual. Es un subojeto del objeto Window. El objeto Location dispone de ocho propiedades que se refieren todas al URL o a partes del URL, respectivamente. Estas propiedades se llaman: href: hace referencia al URL completo protocol: especifica el comienzo del URL, incluidos los dos puntos. host: especifica la direccin 1P o por dominios del host. hostname: especifica el conjunto host= port port: especifica el puerto de comunicaciones empleado por el servidor. pathname: especifica el nombre del archivo con el camino completo a l. hash: especifica el nombre del anchor o ancla.

Ejemplo: <HTML> <HEAD> <TITLE>Ejemplo con Navigator</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> function informa() { texto="<HTML><HEAD><TITLE>Informacin LOCATION</TITLE>"; texto+="<HEAD><BODY><B>Propiedades de 'location'</B><BR><BR>"; texto+="<B>Protocolo: </B>" + location.protocol + "<BR>"; texto+="<B>Host: </B> " + location.host + "<BR>"; texto+="<B>Port: </B>" + location.port + "<BR>"; texto+="<B>Hostname: </B>" + location.hostname + "<BR>"; texto+="<B>Pathname: </B>" + location.pathname + "<BR>"; texto+="<B>Hash: </B>" + location.hash + "<BR>"; texto+="<B>Href: </B>" + location.href + "<BR>"; texto+="</BODY>" ventana=window.open("","nombre","height=200,width=500"); ventana.document.write(texto); } </SCRIPT> <BODY> <A NAME ="Inicio"></A> <FORM> <INPUT TYPE="button" VALUE="INFORMACION" onClick="informa()">
68

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

</FORM> </BODY> </HTML>

4.4.5.-EL OBJETO LINK

Todos los Hyperlinks contenidos en un documento HTML se estructuran en la variable de objeto Links. Las propiedades de cada objeto Link, href protocol host hostname port pathname search hash target

ya se analizaron. A parte de ellas, existe la propiedad length, que no pertenece a cada uno de los objetos Link, sino ms bien a toda la variable de objeto Links. Length Suministra la longitud de la variable de objeto Links, es decir, un nmero entero, que corresponde al nmero de Hyperlinks existentes en el documento HTML. Ejemplo: <HTML> <HEAD> <TITLE> Los Hyperlinks </TITLE> </HEAD> <BODY> <H1> Algunos Links importantes: </H1> Por aqu se va a

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

69

Captulo 4

HTML

<A HREF="http://www.microsoft.com">Microsoft</A>.<BR> <A HREF="http://www.yahoo.com">Yahoo</A> es uno de los dispositivos de bsqueda ms importantes.<BR> Pero <A HREF="http://www.altavista.digital.com">Altavista</A> es ms potente en bastantes aspectos.<BR> Y para finalizar, un <A HREF="http://www.fantasa.es/carpeta/home.htm" NAME="phant"> Link inventado</A><BR> <BR> Lista de los nombres de Host:<BR> <SCRIPT LANGUAGE="VBS"> n=document.links.length document.write n document.write "<BR>" for i=0 to n-1 document.write document.links(i).host document.write "<BR>" next </SCRIPT><BR> </BODY> </HTML>

Los controladores de evento pertenecientes al objeto Link,son: MouseMove Registra cuando el puntero del ratn se mueve encima de un Hyperlink. El controlador de evento mouseMove posee cuanto argumentos, que se resumen en la siguiente tabla. Argumento Shift Button X Y Significado Estado de la tecla de maysculas Estado de los botones del ratn Posicin horizontal del puntero del ratn Posicin vertical del puntero del ratn

70

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

OnMouseOver La finalidad dle controlador de evento onMouseOver equivale esencialmente a la del controlador de evento mouseMove. Aunque, onMouseOver no posee ningn tipo de argumentos.

OnClick Es el ms importante del objeto Link y el nico que funciona tal y como se espera de l. Evala una pulsacin del ratn, con el botn izquierdo, en un Hyperlink, con la consecuencia de que se elabora la funcin VBS indicada en el atributo onClik del Tag <TAG>, antes de cargar el documento indicado en el atributo HRER. Con ello, tambin se puede desviar el proceso de carga o evitarlo del todo. <HTML> <HEAD> <TITLE> Hyperlinks </TITLE> <SCRIPT LANGUAGE="VBS"> sub Desviacion URLneu=prompt("Indique un URL") navigate (URLnuevo) end sub </SCRIPT> </HEAD> <BODY> Si desea activar otra pgina, pulse simplemente <A HREF="bsp5402.htm" NAME="Link1" onClick="Desviacion"> aqu</A>! </BODY> </HTML>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

71

Captulo 4

HTML

4.4.6.-EL OBJETO ANCHOR

La variable de objeto Anchors abarca todos los Tags <A> que se encuentran en el documento HTML en cuestin. Sobre todo aquellos Tags a los que al atributo opcional NAME se le asigna un valor. Si ste es el caso, los Tags correspondientes pueden utilizarse como destinos de salto internos. Un objeto Anchor posee una nica propiedad, name, que sirve para seleccionar o modificar, respectivamente, este atributo.

4.4.7.- EL OBJETO ELEMENT

La variable de objeto Elements recoge todos los elementos de introduccin dentro de un formulario HTML. Puede tratrarse de elementos que se crean con los Taqgs HTML <INPUT>, <TEXTAREA> Y <SELECT>. El objeto Element dispone de numerosas propiedades, mtodos y controladores de evento. No obstante, no todas estas caractersticas sintcticas pueden aplicarse a cada objeto Element concreto. Las propiedades existentes son: Form Utilizacin con: todos los elementos de formulario. La propiedad form remite al objeto form superior. Name Utilizacin con: todos los elementos de formulario. La propiedad name suministra el nombre del objeto Element que, por regla general, se determina mediante una asignacin de valor del atributo NAME dentro del Tag HTML que crea el elemento. La propiedad name tambin puede servir para sobrescribir el nombre de elemento con una nueva cadena (string) de caracteres. Value Utilizacin con: todos los elementos de formulario. Todos los elementos de formulario poseen una cadena de caracteres como valor, que puede ser elegido o determinado de nuevo con la propiedad value. DefaultValue Utilizacin con: password, text, textarea. Aquellos elementos de formulario que sirven para la introduccin de textos por parte del usuario, pueden recibir un texto predefinido. Checked Utilizacin con: chedkbox, radiobutton. El estado de los elementos de formulario checkbox (casilla de verificacin) o radiobutton (botn de opcin) se comprueba o se determina con la propiedad checked. El valor de esta propiedad es de tipo booleano. DefaultChecked Utilizacin con: checkbox. El estado predefinido de una casilla de verificacin, checkbos, puede comprobarse o definirse con la propiedad booleana defaultChecked. Enabled Utilizacin con: todos los elementos de formulario. La propiedad enabled decide si el elemento de formulario afectado est activo o no. Si el valor de esta propiedad es TRUE, el usuario puede utilizar el elemento correspondiente para introducir datos.

72

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

En cambio, si el valor es FALSE, el elemento en cuestin no responde a los datos introducidos por el usuario. ListCount, multiSelect y listltem Utilizacin con: combo. Length Utilizacin con select. La propiedad length de un elemento de introudccin del tipo select suminstra un nmero entero, que representa la cnatidad de opciones que se ofrecen en el cuandro de seleccin (Select-Box). Options Utilizacin con : select La variable options contiene todas las opciones de un elemento de introduccin de tipo select. Cada una de las opciones dispone de las propiedades value y text. Ejemplo: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <FORM NAME="selecttest"> <SELECT NAME="selA"> <OPTION VALUE="selA1">Seleccin A1 ................. <OPTION VALUE="selA2">Seleccin A2 <OPTION VALUE="selA3">Seleccin A3 <OPTION VALUE="selA4">Seleccin A4 <OPTION VALUE="selA5">Seleccin A5 </SELECT> <SELECT NAME="selB"> <OPTION VALUE="selB1">Seleccin B1 ................. <OPTION VALUE="selB2">Seleccin B2 <OPTION VALUE="selB3">Seleccin B3 </SELECT><BR> <SCRIPT LANGUAGE="VBS"> document.write "Nmero de opciones en el rea A: " document.write selecttest.selA.length document.write "<BR>" document.write "Nmero de opciones en el rea B: " document.write selecttest.selB.length document.write "<BR>" document.write "Valor de la cuarta opcin en el rea A: " document.write selecttest.selA.options(3).value document.write "<BR>" document.write "Texto de la segunda opcin en el rea B: " document.write selecttest.selB.options(1).text </SCRIPT> </FORM> </BODY> </HTML>

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

73

Captulo 4

HTML

SelectedIndex Utilizacin con: select. La propiedad selectedIndex suministra el ndice de la opcin que se ha seleccionado en un cuadro de seleccin. El objeto Element dispone de siete mtodos: Click Utilizacin con: button, reset, submit, checkbox, radio, combo. Focus Utilizacin con: todos los elementos. El mtodo focus establece el enfoque de introduccin sobre el elemento correspondiente. Blur Utilizacin con: password, text, textarea. El mtodo blur quita el enfoque de introduccin del elemento en cuestin. Select Utilizacin con: password, text, textarea. Removeltem, addltem y clear Utilizacin con: combo. Los mtodos removeLtem, addItem y clear se refieren al elemento de formulario comboBox, que no es un elemento HTML. Los cinco controladores de evento del objeto Element, son los siguientes: OnClick Utilizacin con: button, reset, submit, checkbox, radio, combo. El controlador de evento onClick reacciona a una pulsacin del ratn en el elemento formulario en cuestin. OnFocus Utilizacin con: todos los elementos. El controlador de evento onFocus reacciona cuando el elemento de formulario en cuestin recibe el enfoque de introduccin. OnBlur Utilizacin con: passeord, text, textarea. Si un elemento de formulario, que anteriormente estaba enfocado, pierde el enfoque de introduccin, el controlador de evento onBlur del elemento en cuestin registra este hecho.

74

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

OnChange Utilizacin con: text, textarea. El controlador de evento onChange reacciona a todos los cambios en un cuadro de texto. OnSelect Utilizacin con: text, textarea.

4.4.8.- EL OBJETO HISTORY

El objeto history es la lista de aquellos URLs que estaban cargados antes dle documento actual. Este objeto dispone de la propiedad: length: suministra el nmero de URLs que contiene la lista en cuestin. Y los mtodos: back: tienen en mismo efecto que la activacin del botn del Browser Atrs por parte del usuario. El ltimo documento mostrado se carga de nuevo. forward: equivale a accionar el botn del Browser Adelante. Mediante la indicacin de un argumento n positivo de nmero enteros pueden utilizarse los mtodos back y forward para realizar n saltos hacia atrs o hacia adelante, respectivamente. go: puede solicitarse un documento de la lista history determinado por un argumento positivo de nmeros enteros. History.go 1 tiene como consecuencia un salto atrs hacia el primer documento de la sesin, mientras que History.go history.length produce un salto hacia el ltimo documento de la lista.

4.4.9.- EL OBJETO NAVIGATOR

Este objeto es nico ya que corresponde al propio programa navegador y es independiente del n de ventanas que se encuentran abiertas. En l se aplican estas propiedades: appCodeName: especifica el cdigo del navegador. appName: especifica el nombre del navegador. appVersion: especifica la versin del navegador. lenguaje: especifica el lenguaje empleado en el navegador. mimeTypes: es un array con todos los tipos MIME del cliente. platform: indica el tipo de mquina para la que el navegador fue compilado. plugins: es un array con todos los plug-ins instalados en el cliente

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

75

Captulo 4

HTML

<HTML> <HEAD> <TITLE>Ejemplo con Navigator </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE=JavaScript> document.writeln (El valor de navigator.appCodeName es: <B> navigator.appCodeName + </B><BR>); document.writeln (El valor de navigator.appName es: <B> navigator.appName + </B><BR>); document.writeln (El valor de navigator.appVersion es: <B> navigator.appVersion + </B><BR>); document.writeln (El valor de navigator.language es: <B> navigator.language + </B><BR>); document.writeln (El valor de navigator.platform es: <B> navigator.platform + </B><BR>); document.writeln (El valor de navigator.mimeTypes.length es: <B> navigator.mimeTypes.length + </B><BR>); document.writeln (El valor de navigator.plugins.length es: <B> navigator.plugins.length + </B><BR>); document.writeln(<BR><B>LISTA DE PLUGINS</B><BR>); for (i=0; i<navigator.plugins.length; i++) { document.writeln(navigator.plugins[i].name + <BR>); } document.writeln(<BR><B>LISTA DE MIMETYPES</B><BR>); for (i=0; i<navigator.mimeTypes.length; i++) { document.writeln(navigator.mimeTypes[i].type + <BR>); } </SCRIPT> </BODY> </HTML>

+ + + + + + +

76

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

HTML

Captulo 4

Este manual ha sido desarrollado por el departamento tcnico de DELTA PC

77