manual de html

MANUAL DE

HTML

HTML Indice

IEste manual ha sido desarrollado por el departamento técnico de DELTA PC

CAPITULO 1. INTRODUCCIÓN AL HTML ...................................................................... 1 1.1. Introducción al HTML ........................................................................................................ 3 1.2. Elementos de los documentos HTML ................................................................................. 3 1.3. El elemento HTML ............................................................................................................. 5 1.4. Un primer documento HTML ............................................................................................. 6 1.5. Esqeuma de denominación para los documentos HTML .................................................... 7 1.5.1. Tipos de archivos MIME ....................................................................................... 8 CAPITULO 2. ELEMENTOS Y DIRECTIVAS DEL LENGUAJE HTML ..................... 9 2.1. Cabecera de los documentos HTML ................................................................................... 11 2.1.1. Base ........................................................................................................................ 11 2.1.2. Isindex .................................................................................................................... 11 2.1.3. Link ........................................................................................................................ 12 2.1.4. Meta ....................................................................................................................... 13 2.1.5. NexTid ................................................................................................................... 13 2.1.6. Title ........................................................................................................................ 13 2.1.7. Script ...................................................................................................................... 13 2.1.8. Style ....................................................................................................................... 13 2.2. El cuerpo (body) de un documento HTML ......................................................................... 14 2.3. Organización de los elementos en el cuerpo ....................................................................... 15 2.3.1. Cabeceras (Hn) ....................................................................................................... 15 2.3.2. Párrafos (P) ............................................................................................................ 16 2.3.3. El elemento Address .............................................................................................. 17 2.3.4. El elemento Blokquote(BQ)................................................................................... 17 2.3.5. Linea Horizontal (HR) ........................................................................................... 17 2.3.6. Texto Preformateado (PRE) ................................................................................... 18 2.3.7. Formularios (FORM) ............................................................................................. 18 2.3.8. Tablas (TABLE) .................................................................................................... 21 2.4. Listas ................................................................................................................................... 27 2.4.1. Listas de Glosario (DL) ......................................................................................... 27 2.4.2. Listas regulares sin número de secuencia .............................................................. 28 2.4.3. Listas regulares con número de secuencia ............................................................. 29 2.5. Enfatización de caracteres ................................................................................................... 30 2.5.1. Estilos lógicos ........................................................................................................ 31 2.5.2. Estilos Físicos ........................................................................................................ 31 2.6. Anclas de Hipertexto ........................................................................................................... 33 2.7. Elementos a nivel de carácter .............................................................................................. 35 2.7.1. Saltos de línea (BR) ............................................................................................... 35 2.7.2. Imágnes (IMG) ....................................................................................................... 35 2.8. Extensiones de Netscape y Microsoft ................................................................................. 39 2.8.1. Center ..................................................................................................................... 39 2.8.2. Font ........................................................................................................................ 40 2.8.3. Basefont ................................................................................................................. 41 2.8.4. Applet ..................................................................................................................... 41 2.8.5. Marquee ................................................................................................................. 41 2.8.6. Map ........................................................................................................................ 42 2.8.7. Frame ..................................................................................................................... 43 2.9. Hojas de estilo ..................................................................................................................... 46 2.9.1. Vision general ........................................................................................................ 46 2.9.2. Directivas dentro de una hoja de estilo .................................................................. 46 2.9.3. Enlazando hojas de estilo a los documentos .......................................................... 47

Indice HTML

II Este manual ha sido desarrollado por el departamento técnico de DELTA PC

2.9.4. Notación para los valores de las propiedades más habituales ................................ 49 2.10. Sonido ................................................................................................................................ 50 2.11. Objetos empotrados ........................................................................................................... 50 CAPITULO 3. UNA GUÍA DE ESCRITURA DE DOCUMENTOS HTML ..................... 51 3.1.- Sobre la estructura general de un hipertexto ...................................................................... 53 3.2.- Sobre la estructura de un documento ................................................................................. 54 3.2.1. Indicar el estado de la información del documento ................................................ 54 3.2.2. Poner los enlaces en el contexto ............................................................................. 55 3.2.3. Dirmar el documento .............................................................................................. 55 3.2.4. Dar título adecuado al documento .......................................................................... 55 3.2.5. Considerar un formato independiente del dispositivo ............................................ 55 3.2.6. No utilizar los enlaces como notas a pié de página ................................................ 56 3.2.7. Anotar adecuadamente las referencias que se hagan .............................................. 56 3.2.8. Escribir el documento para que pueda también ser impreso .................................. 56 3.2.9. Escribir texto que sea legible, aunque tenga enlaces .............................................. 56 3.2.10. No abusar de imágenes y gráficos ........................................................................ 56 CAPÍTULO 4. EL MODELO DE OBJETOS DE ACTIVEX-SCRIPT .............................. 57 4.1. Conceptos fundamentales de la programación orientada a objetos ..................................... 59 4.2. Los objetos del entorno de programación activeX-Script ................................................... 59 4.3. Ejemplos para la utilización de propiedades y métodos ...................................................... 60 4.3.1. Creación de cuadros de diálogo .............................................................................. 60 4.3.2. La barra de estado .................................................................................................. 62 4.3.3. Las configuraciones de color .................................................................................. 63 4.3.4. Presentación del texto ............................................................................................. 64 4.3.5. Hyperlinks .............................................................................................................. 65 4.3.6. Formularios ............................................................................................................ 67 4.4. El modelo de objetos ActiveX-Scripting ............................................................................. 69 4.4.1. El objeto Window ................................................................................................... 69 4.4.2. El objeto Document ................................................................................................ 73 4.4.3. El objeto Form ........................................................................................................ 75 4.4.4. El objeto Location .................................................................................................. 77 4.4.5. El objeto Link ......................................................................................................... 78 4.4.6. El objeto Anchor .................................................................................................... 80 4.4.7. El objeto Element ................................................................................................... 81 4.4.8. El objeto History .................................................................................................... 84 4.4.9. El objeto Navigator ................................................................................................ 84

HTML Capítulo 1

1 Este manual ha sido desarrollado por el departamento técnico de DELTA PC

Capítulo 1 INTRODUCCIÓN AL HTML

1.1.- INTRODUCCIÓN 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, centrándose 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 presentación 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 títulos, párrafos, citas, definiciones, etc.) y los distintos efectos que se quieren dar a cada uno de ellos. La presentación 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 están 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 carácter multimedia

La presentación de un documento HTML utilizando diferentes visualizadores gráficos es

básicamente similar. Las diferencias se reducen a pequeñas 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 también como tags y consisten en el nombre del elemento entre símbolos <y> (<nombre_tag>). Por ejemplo, un párrafo se pondría: <P> Esto es un párrafo. 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 terminación. 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 símbolos </y>.

Capítulo 1 HTML


Algunos elementos están vacíos, es decir, no afectan a ningún bloque del documento. Por ejemplo, un salto de línea se crea con la directiva: <BR> Este elemento se considera incluído dentro de la categoría separadores mientras que los que se identifican con una directiva de comienzo y una directiva de terminación están incluidos en la categoría de Contenedores. Los nombres de los elementos no son sensibles a mayúsculas/minúsculas. El salto de línea se puede poner equivalente de cualquiera de las formas siguientes:

<BR>, <Br>, <br>

Conviene advertir que según 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 símbolo & y terminan con un punto y coma (;), entres estos símbolos se escribe un identificador del carácter especial deseado. á: á é: é í: í ó: ó ú: ú Á: Á É: É Í: Í Ó: Ó Ü: Ú ü: ü Ü: Uuml; ñ: ñ Ñ: Ñ ¿: ¿ ¡: ¡ 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 simbólico (una secuencia de letras, dígitos, puntos o rayas)

Por ejemplo, el elemento ancla (A), que marca una región 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 terminación nunca tienen atributos. Los atributos de un elemento siempre se sitúan en la directiva de comienzo.

HTML Capítulo 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 indicación del estado del documento. Un comentario empieza con . Por ejemplo: 

En cualquier documento HTML podemos distinguir básicamente tres zonas: � Identificación: 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 incluirán

diversos elementos informativos, aunque la mayoría de ellos serán totalmente ignorados por los navegadores. Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, principalmente el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido pues será lo que vean los demás usuarios cuando añadan nuestra página a sus favoritos. El título a menudo se visualizar luego en alguna sección especial de los narradores, por ejemplo, en EXPLORER aparece en la barra de título 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, imágenes, sonidos, etcétera).

Antes de crear nuestra primera página, 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 párrafos 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 automáticamente, poner siempre la etiqueta de cierre </P>. Por lo tanto sería correcto también 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 número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. Puedes experimentar en el ejemplo que sigue, cambiando el número 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, imágenes, etc. � También 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.

Capítulo 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 terminación. El elemento HTML tiene tres atributos opcionales: VERSIÓN: viene fijada por el DTD (Document Type Definition). Para la versión 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 simbólicos SGML que definen el papel que juega este documento. 1.4.- UN PRIMER DOCUMENTO HTML <HTML> <HEAD> <TITLE>Primera páina Web</TITLE> </HEAD> <BODY> <H1><CENTER>Bases de Datos con Visual Basic</CENTER ></H1> <H3>Autor </H3>Jeffrey P. McManus <H3>Traducción </H3>Inés Moreno y Jos &eacute Arroyo <H3>Editorial </H3>Prentice Hall <HR> <H2><CENTER>Contenido</CENTER></H2> <P>Es el único libro que acerca el paradigma de objeto hacia los desarrollos distribuídos mediante soluci ones basadas en los componentes.</P> <BR> <P>Este libro trata de soluciones, no de tecnolog&i acute;a</P> </BODY> </HTML>

HTML Capítulo 1


1.5.- ESQUEMA DE DENOMINACIÓN PARA LOS DOCUMENTOS HTML 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 explícitamente el tipo de datos que le están 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 extensión del archivo.Por ejemplo, los archivos HTML se identifican de la forma siguiente:

Nombre.html

donde la extensión .html indica que se trata de un documeno HTML. Generalmente se utilizan cuatro letras para la extensión, lo que no es ningún problema para ordenadores Macintotsh, UNIX o basados en Windows 95, ya que en ellos no hay restricciones en el tamaño de los nombres de los archivos. Sin embargo, en máquinas basadas en DOS o en Windows 9.1, el tamaño 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 más comunes y su significado:

EXTENSION SIGNIFICADO

.html (.htm) Documentos HTML, conteniendo texto e instrucciones HTML.

.txt

Un archivo de sólo 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.

.ps Archivo PostScript, que es un formato común en muchas impresoras laser.

.eps Archivo en formato PostScript encapsulado. Este formato no es apropiado para enviar directamente a una impresora.

.gif Un archivo de imágenes en formato GIF.

.xbm Un archivo de imágenes en formato X-bitmap (blanco y negro)

.xpm Un archivo de imágenes en formato Xpixmap (en color)

.jpeg (.jpg) Un archivo de imágenes en formato JPEG.

.mpeg (.mpg o mpe) Un archivo de vídeo en formato MPEG.

.qt Un archivo de vídeo en formato quick-time (Macintosh)

.avi Un archivo de vídeo en formato AVI (Microsoft)

.au Un archivo de audio (sonido) en formato AIFF

.z Un archivo comprimido utilizando el compresor Lempel-Zip. Este es un programa de compresión-descompresión común en ordenadores UNIX.

.gz Un archivo comprimido utilizando el programa GNU gzip. Este programa es común en ordenadores UNIX y está disponible también para PCs y Macintosh.

Capítulo 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 envía 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 configuración almacenada que asocia a cada tipo de datos una función determinada. Un visualizador puede manipular muchos tipos de datos (como documentos HTML, imágenes GIF, etc) pero otros tipos de datos se transfieren para su procesamiento a programas auxiliares, como son los visualizadores de imágenes, proyectores de vídeo, etc. Los servidores Web transfieren una cabecera inicial al visualizador con el tipo MIME de los datos que se le envían a continuación. Por esta razón el servidor tiene que tener una forma de decir el tipo de datos que va a transmitir. Normalmente dispone de un archivo de configuración 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 envíe el archivo notas.html, el servidor mira cual es el tipo MIME correspondiente a la extensión .html y le envía un mensaje al visualizador diciéndole que los datos que se le van a transferir inmediatamente son del tipo text/html.

HTML Capítulo 2


Capítulo 2.- ELEMENTOS Y DIRECTIVAS DEL LENGUAJE HTML

PUNTUALIZACIONES PARA EL DISEÑO DE COLECCIONES DE DOCUMENTOS

1) Los documentos deben ser pequeños. Cada documento no debe de visualizar más de dos o tres

pantallas completas de datos.

2) Cada documento debe tener las herramientas de navegación. Estas son enlaces que conectan el documento a otros documentos siguiendo una jerarquía y a determinados puntos de navegación general dentro de la colección. Así, cada página 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 presentación consistente. Cada documento se debe de haber diseñado con la misma estructura de cabecera, los mismos iconos de navegación y una plantilla similar para el contenido. 2.1.- CABECERA DE LOS DOCUMENTOS HTML

La cabecera (HEAD) contiene información general, o meta-información. 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, sólo se puede colocar dentro de HEAD los elementos citados a continuación:

•••• 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 búsqueda.

•••• META: es un contenedor para la metainformación del documento.

•••• NEXTID: es un parámetro utilizado por los editores que generan HTML de forma automática para crear identificadores de los documentos.

•••• TITLE: es el título del documento. Este elemento es obligatorio.

Además 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 información 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 posición original.

Capítulo 2 HTML


Los URL’s dentro del documento pueden ser relativos a su dirección 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, indicándole que cree un campo de entrada de usuario que pueda ser utilizado para escribir palabras claves para la búsqueda. El documento se puede consultar mediante una búsqueda de palabras claves añadiendo una interrogación (?) al final de la dirección del documento, seguida por una lista de las palabras claves separadas por signos +. Si se añade de forma manual a un documento HTML, el visualizador supone que el servidor puede manipular una búsqueda en el documento. NOTAS: obviamente, el servidor debe tener esta capacidad para poder trabajar. Simplemente añadiendo <ISINDEX> en el documento no es suficiente para poder hacer búsquedas si el servidor no dispone de un mecanismo para realizarlas. 2.1.3.- LINK el elemento LINK indica una relación entre el documento y algún otro objeto o documento. Por tanto, un documento puede tener cualquier número 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 relación inversa. Un enlace del documento A al B con REV=relación expresa

la misma relación que un emlace de B a A con REL=relación.

•••• HREF: nombra un documento utilizando la notación URL.

Una utilización importante del elemento LINK es para definir barras de herramientas con botones de navegación 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 página “home” o al nivel superior de una jerarquía. •••• 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 términos

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 jerarquía, este enlace hace referencia al

ascendiente inmediato del documento actual. •••• REL=Next: el enlace hace referencia al próximo 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.

HTML Capítulo 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-información del documento que no se define con otros elementos HTML. Esta información 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 publicación, 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 parámetro leído y generado por los programas editores que producen código HTML de forma automática y crean identificadores únicos. Esta directiva tiene un sólo atributo, el número del identificador alf-numérico. 2.1.6.- TITLE Todo documento HTML debe contener el elemento TITLE, que le asigna un título. El título 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 sitúa en la cabecera del documento y su longitud es ilimitada, aunque en algunas aplicaciones los títulos largos se pueden truncar. Por esta razón se recomienda que tengan menos de 64 caracteres. 2.1.7.- SCRIPT Permite contener un “script” ejecutable escrito en JavaScript o VBSCript que puede proporcionar una funcionalidad de programa dentro del propio documento. 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 información entre <STYLE> Y </STYLE>. •••• Referenciando una hoja de estilos externa mediante directivas de la forma:

<STYLE HREF=”yrl_to_stylesheet”>

Capítulo 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=”intern et html url”> <TITLE>Í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, párrafos, listas, enlaces de hipertexto, imágenes, 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 estándar ISO para los idiomas. El atributo correspondiente se compone de dos letras del código del idioma, seguido opcionalmente por un punto y dos letras del código del pais. Por ejemplo, “en.uk” representa el inglés del Reino Unido.

•••• CLASS: Corresponde a una lista de nombres simbólicos, 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 códigos 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.- ORGANIZACIÓN 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 párrafos, 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:

HTML Capítulo 2


2.3.1.- CABECERAS (Hn) HTML permite seis niveles de cabeceras, indicadas como [H1, H2, H3, H4, H5, H6]. No se fuerza ninguna jerarquía 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 estándar ISO para los idiomas. El atributo del idioma se compone de dos letras del código del idioma según el estándar ISO 639, seguido opcionalmente por un punto y dos letras que designan el país de acuerdo al estándar ISO 3166. Por ejemplo “en.uk” designa al inglés del Reino Unido.

•••• ALIGN: Las cabeceras se sitúan generalmente a la izquierda. Con el atributo ALIGN se puede especificar explícitamente 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 líneas de cabecera se justifican a los dos márgenes.

•••• CLEAR: Es un atributo común 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 párrafo 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 márgenes estén libres.

También se puede querer situar el elemento en la línea 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>

Capítulo 2 HTML


2.3.2.- PÁRRAFOS (P) El elemento P delimita un bloque de texto como un párrafo. La directiva <P> marca el comienzo del párrafo y </P> el final, aunque esta última es opcional, ya que un párrafo termina cuando comienza otro párrafo 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 información del tipo de dirección, firma, autor, etc. Generalmente se sitúa en la parte superior o inferior del documento. La interpretación depende del visualizador. También 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 imágenes. 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 poniéndolo en cursiva. BLOCKQUOTE también provoca un salto de párrafo y generalmente fuerza espacios en blanco tanto antes como después de la cita. El elemento BLOCKQUOTE puede contener párrafos y otras marcas estándar, pero no puede contener cabeceras. 2.3.5.- LINEA HORIZONTAL (HR) El elemento HR se emplea para dibujar una línea horizontal que cruce completamente toda la pantalla. Este elemento está vacío, es decir, no se necesita un </HR>.

HTML Capítulo 2


Los atributos que se pueden utilizar son:

•••• SRC: Especifica una imagen personalizada para la línea horizontal. La imagen se referencia con un URL. Puede aparecer junto con el atributo MD.

•••• MD: Especifica un resumen del mensaje o una comprobación criptográfica para el gráfico asociado especificado por el atributo SRC.

•••• SIZE=”n”: Especifica el ancho vertical, en pixels, de la línea 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 línea en la página. Por

defecto es centrado (center). •••• NOSHADE: Dibuja como línea divisoria una barra negra, el valor por omisión es una barra

sombreada.

<HR SIZE=10 WIDTH=20%> <HR SIZE=5 WIDTH=80> <HR SIZE=15 WIDTH=50 ALIGN=”CENTER”> <HR SIZE=10 WIDTH=40 NOSHADE>

2.3.6.- TEXTO PREFORMATEADO (PRE) Este elemento se utiliza para visualizar el texto con un tipo de letra como el de máquina de escribir con ancho fijo. Es útil para presentar texto formateado para un teletipo, o para un monitor con caracteres de ancho fijo. También es común utilizarlo para presentar ejemplos de códigos de ordenador. Dentro de PRE no se acepta la directiva <P>, pero por robustez, si se encuentra se trata como un salto de línea. 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 número máximo de caracteres que pueden ser visualizados en una línea. 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>

Capítulo 2 HTML


2.3.7 FORMULARIOS (FORM) HTML dispone de varios elementos que permiten entradas de los usuarios. El más simple es ISINDEX, que toma una línea se texto como una entrada del usuario. Más 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 método GET significa que los datos se añaden al URL como una cadena de consulta, mientras que el método 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 añade al URL, después del signo de interrogación. Con el método POST, el contenido se envía 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 botón de tipo RADIO o CHECKBOX

es el valor enviado con el formulario; para botones de envío (SUBMIT) o de “reset” es la etiqueta del propio botón.

•••• 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 tamaño, en caracteres, del texto. •••• MAXLENGTH: Es el único máximo 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 múltiples líneas. Los atributos que acepta son:

•••• NAME: Es el nombre tal como se pasa al programa (“script”). •••• ROWS: Número de filas que se visualizan en el área de este texto. •••• COLS: Número de columnas.

HTML Capítulo 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 número de elementos que se visualizan. Si se indica SIZE, la selección se convierte

en una lista desplegable. Si no se indica, la selección es un menú de tipo desplegable. •••• MULTIPLE: Permite hacer una selección múltiple 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 opción. •••• VALUE: Es el valor que se transmite al enviar el formulario, si se selecciona esta opción.

Ejemplo: <HTML> <HEAD> <TITLE> Formulario </TITLE> </HEAD> <BODY> <H1>Ficha del Departamento</H1> <H2>Delta Pc </H2> <HR> <P> Si está matriculado en alguno de los cur sos 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" M AXLENGTH=60 SIZE=80 TYPE =TEXT> <P>Direcciín: <TEXTAREA NAME="Direccion" ROW S="3" COLS="80" ></TEXTAREA> <P> Cursos (seleccione en los que está matri culado: <UL> <LI><INPUT TYPE =”checkbox” NAME=”Autocad”>Au tocad <LI><INPUT TYPE =”checkbox” NAME=”Ofimatica”> Ofimática <LI><INPUT TYPE=”checkbox” NAME=”Visual Basic ”>Visual Basic <LI><INPUT TYPE=”checkbox” NAME=”WindowsNT”>W indows NT <LI><INPUT TYPE=”checkbox” NAME=”Linux”>Linux <LI><INPUT TYPE=”checkbox” NAME=”Secretariado ”>Secretariado <LI><INPUT TYPE=”checkbox” NAME=”Diseño”>Dise ño </UL> <p>Centro asociado:

Capítulo 2 HTML


<SELECT NAME=”centro asociado”> <OPTION VALUE=”LaCoruña”>La Coruña <OPTION VALUE=”Madrid”>Madrid <OPTION VALUE=”Barcelona”>Barcelon a <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 más filas. Cada fila, definida por el elemento TR, está formada por una o más celdas; de entre ellas se distinguen las celdas de cabecera, definidas por TH, y las celdas de datos, definidas por TD. El número de columnas en la tabla está definido por el número de elementos TD y TH. El número de filas lo define el número 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

HTML Capítulo 2


celdas, el atributo COLSPEC para el elemento TABLE o el atributo ALINGN para los elementos TR de las filas.

•••• Las celdas pueden estar vacías. •••• Las celdas pueden ocupar varias filas. •••• Si para una fila dada, el número de columnas de la tabla es mayor que el número de celdas

definidas para ésta fila (después de incluir las celdas que ocupan varias filas), las celdas que faltan hasta llegar al número de columnas que tienen la tabla se consideran que están en el lado derecho de la tabla y se interpretan como celdas vacías.

•••• No es válido tener celdas que se solapen. •••• Los elementos TD y TH no necesitan una directiva de terminación. Sin embargo es

conveniente ponerla. •••• Por defecto, las tablas se dibujan sin bordes. Para dibujar las líneas 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.

Además 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 márgenes del texto y además hace que el texto no se sitúe 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 tipográfica igual a la mitad del tamaño 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 mayúscula seguida por un número, 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 márgenes 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 mayúsculas para evitar posibles errores como el confundir la L minúscula con un uno. •••• DP: especifica el carácter que con el atributo COLSPRC es utiliza para el punto decimal:

DP= “.” o DP= “,”. •••• WIDTH: especifica el ancho de la tabla según el atributo UNITS. Si UNITS=relaitve, la

anchura se calcula como un porcentaje de la separación entre los márgenes izquierdo y derecho actuales. Si da un ancho menor al mínimo, entonces no se toma en consideración.

•••• BORDER: indica que ponga bordes alrededor de al tabla.

Capítulo 2 HTML


•••• NOWRAP: se utiliza cuando no se quiere que el visualizador ajuste las líneas automáticamente.

•••• 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>

HTML Capítulo 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úmero, piso</TH> </TR> <TR ALIGN=rigth><TD>Luis Gó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>

Capítulo 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 también 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 más de una dila de una columna. Estos atributos son: COLSPAN y ROWSPAN.

•••• COLSPAN indica cuantas columnas (contando hacia la derecha) están 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í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>

HTML Capítulo 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ó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ú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">1ªEvaluación</TD></TR> <TR><TD>Parcial 1</TD><TD>Parcial 2< /TD></TR> </TABLE> </TD> </TR> </TABLE>

Capítulo 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 también se conoce como listas de definición y son una relación de términos 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 términos del glosario. •••• <DD>: la definición.

Ejemplo:

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

Las listas de definición pueden tomar el atributo COMPACT, que sugiere que deben ser interpretadas en una forma físicamente compacta.

HTML Capítulo 2


2.4.2.- LISTAS REGULARES SIN NÚMERO DE SECUENCIA (UL, MENU, DIR) Una lista regular es una secuencia de párrafos, cada uno de los cuales puede estar precedido por una marca especial, un numero de secuencia o nada. Las listas sin número de secuencia en los items corresponden a los elementos UL, MENU y DIR:

•••• UL: es una lista de párrafos de varias líneas, escritos separadamente y por lo general con una marca de un punto o símbolo similar.

•••• MENU: análogo a UL pero formateado si es posible. Corresponde a párrafos más pequeños 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 página, aunque ésto depende del visualizador.

Los atributos permitidos para UL son:

•••• PLAIN: con este argumento se suprime la visualización 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 comprobación criptográfica para el gráfico asociado que viene especificado por el atributo. Se utiliza cuando se requiere asegurar que un objeto enlazado es el que quería 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 página, é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 ámbito <LI>Formularios <LI>Propiedades <LI>Eventos y Métodos <LI>Funciones y Procedimientos <LI>Proyectos <LI>Programación estructurada <LI>Clases y objetos <LI>Controles

Capítulo 2 HTML


</UL>

2.4.3.- LISTAS REGULARES CON NÚMERO DE SECUENCIA (OL) Son análogas a las listas UL pero introduciendo un número de secuencia. Los atributos que acepta son:

•••• CONTINUE: la numeración continúa donde se quedó en la lista anterior. •••• SEQNUM: asigna un número de comienzo a la secuencia de items.

•••• COMPACT: indica que se debe reducir el espaciado entre los items.

<OL> <LH>Índice <LI>Introducció <LI>Estructura de un programa <LI>Constantes, variables y expresiones <LI>Controles estándar <LI>Uso del meú estándar <LI>Estructuras de Control <LI>Formularios y cuadros de diálogo <LI>Control de errores <LI>Depuració </OL>

HTML Capítulo 2


<OL> <LH>Índice <LI>Introducción <LI>Estructura de un programa <LI>Constantes, variables y expresiones <OL> <LI>Tipos de datos <LI>Valores de inicialización <LI>Operadores <OL> <LI>Operadores aritméticos <LI>Operadores relacionales <LI>Operadores lógicos <LI>Operaciones entre bits </OL> </OL> <LI>Controles estándar <LI>Uso del menú estándar <LI>Estructuras de Control </OL>

Capítulo 2 HTML


2.5.- ENFATIZACIÓN DE CARACTERES Los elementos a nivel de carácter se utilizan para especificar tanto el estilo lógico como físico del texto marcado sin hacer un salto de párrafo. Generalmente estos elementos tienen una directiva de comienzo y una directiva de terminación y sólo se ven afectados los caracteres entre estas directivas. Por ejemplo, la especificación de un estilo lógico 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 lógicos, porque se interpretan de manera más consistente por los diferentes visualizadores. Hay algunos estilos lógicos que no se distinguen entre sí, ya que se pueden interpretar de la misma forma. También algunos visualizadores no soportan todos los estilos físicos. 2.5.1.- ESTILOS LÓGICOS

•••• EM: Proporciona énfasis tipográfico, generalmente en cursivas. Con frecuencia <EM> e <I> tienen el mismo efecto.

•••• STRONG: Proporciona un énfasis tipográfico más fuerte. Generalmente en negrita. •••• CODE: Indica un ejemplo de código, normalmente interpretado con un tipo de carácter 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: definición de un término. •••• 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 carácter. •••• AU: Indica el nombre de un autor. •••• PERSON: Se usa para nombres de personas y permitir que sean extraídos automáticamente

por programas de indexación. •••• ACRONYM: Se utiliza para marcar acrónimos. •••• ABBREV: Permite marcar abreviaturas. •••• INS: Se emplea para texto insertado, por ejemplo en los documentos legales. •••• DEL: Se usa para texto borrado.

HTML Capítulo 2


2.5.2.- ESTILOS FÍSICOS

•••• TT : Indica que el texto que encierra se visualiza con un tipo de carácter de máquina 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 carácter más grande que el actual. •••• SMALL: El texto debe ser visualizado con un tipo de carácter más pequeño que el actual. •••• SUB: El texto debe visualizarse como subíndice. •••• SUP: El texto debe ser visualizado como un superíndice

NETSCAPE Y MICROSOFT:

•••• FONT: Se utiliza en Netscape para controlar el tamaño del tipo de carácter. Por ejemplo <FONT SIZE=”-1”>

El visualizador de Microsoft permite seleccionar el tipo de carácter. Por ejemplo <FONTFACE=’arial”>. Ejemplo:

<H3>Estilos Lógicos</H3> <UL> <LI>Texto <EM>enfatizado</EM> <LI>Texto en <STRONG>negrita</STRONG> <LI>Esto es una secuencia de caracteres <SAMP>liter ales</SAMP> <LI>Texto escrito <CODE> en código</CODE> <LI>Texto escrito <CITE> como una cita </CITE> </UL> <H3>Estilos Físicos</H3> <UL> <LI>Esto encierra en <TT>Teletipo</TT> <LI>Texto <U>subrayado</U> <LI>Este texto es más <BIG>grande</BIG> <LI>Texto con caracteres más <SMALL>pequeño< /SMALL> <LI>Texto visualizado como <SUB>subíndice</S UB> <LI>Texto con un tamaño de <FONT SIZE=14>letra</FON T> <LI>Texto visualizado como <SUP>superíndice< /SUP> </UL>

Capítulo 2 HTML


2.6.- ANCLAS (A) DE HIPERTEXTO Un ancla es una parte del texto o algún 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 relación hipertextual con otros documentos. El texto entre las directivas de apertura <A> y terminación </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 ULR’s parciales o relativos son comunes en conjuntos de documentos dentro de un servidor http, pero también 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). También 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ón de correo</A>

y un enlace a este lugar sería:

<A HREF=”#Direccion”>Direcci&oaucte;n</A>

HTML Capítulo 2


•••• NAME: Este atributo marca al ancla como un posible destino de un enlace desde otro

documento o desde algún otro lugar del mismo documento. El valor asignado a NAME debe ser un nombre simbólico.

Un enlace a la ubicación de

<A NAME=”Direccion”>Dirección de correo</A>

en el documento home.html desde otro documento es:

<A HREF=home.hatml#Direccion>Dirección</A>

•••• SHAPE: Este atributo se utiliza con las figuras para definir la silueta de la zona caliente del enlace gráfico 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 círculo, donde x e y es el centro y r el radio. “rect x, y w, h”: define un rectángulo, 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 polígono enlazando los n puntos. Si en algún caso se pulsa en una región donde dos o más 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 más cercana. •••• REL: Se emplea para describir la relación 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 relación.

•••• Enlazando a páginas con imágenes.

Si se necesita que en la página principal aparezca una imagen grande, se puede hacer un archivo pequeño con la imagen, por ejemplo en formatos comprimidos como son los formatos GIF y JPEG. Si se tienen imágenes grandes en otra página, es aconsejable que en el enlace a la misma indiques al usuario que es una página con gráficos (por ejemplo, puedes indicar el tamaño de los gráficos de manera que el usuario sea consciente del coste que supone descargarla). Una forma práctica de enlazar a las imágenes es mediante un pequeño icono de la imagen real (es lo que en terminología del Web se llama thumbnail). Al icono del thumbnail se le asocia un enlace a una página con la imagen en grande, indicando en el enlace el tamaño de la imagen. •••• Enlazando a otros tipos de datos

Las anclas no solo pueden indicar enlaces a documentos HTML, también pueden ser enlaces a otros documentos que no sean HTML o a imágenes de diferentes formatos. Por ello, es una buena

Capítulo 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 películas o de sonido, muchos visualizadores no podrán presentarlos. Para acceder a estos datos se utilizan programas auxiliares que permiten mostrar imágenes, películas 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 película 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 máquina 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 extensión 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 extensión es .gif el tipo MIME será image/gif, o si la extensiónes .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 añade un archivo con una nueva extensión. 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 algún 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 imágenes grandes, archivos de audio, de películas 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 imágenes grandes o archivos de películas. De esta forma el usuario conoce con que va a enlazar, resultando además un buen complemento gráfico para el documento.

2.7.- ELEMENTOS A NIVEL DE CARÁCTER 2.7.1.- SALTOS DE LINEA (BR) El elemento salto de línea (BR) indica que en un punto determinado comienza una nueva línea. Se utiliza junto con el elemento de tabulación para tener un mayor control como el visualizador interpreta el texto.

HTML Capítulo 2


2.7.2.- IMÁGENES (IMG) El elemento IMG se usa para insertar una imagen dentro de un documento HTML. El propósito 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 imágenes 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 terminación </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 imágenes. Con este

atributo opcional se permite especificar un texto alternativo que se visualiza en entornos de sólo texto. El texto alternativo puede contener entidades tales como caracteres acentuados o símbolos 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 línea base de texto, es el valor por defecto. ALIGN =”middle”: alinea la imagen centrándola con la línea base de texto. ALIGN =”top”: alinea la parte superior de la imagen con la línea base de texto.

En HTML 3 también 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 extensión a este argumento, permitiendo también los valores: “absmiddle”, “absbottom”, “texttop” y “baseline”. Estos son similares adicional sobre la ubicación de la imagen.

•••• HEIGHT: Es opcional e indica una altura para la imagen. Por defecto, su valor está en pixels. •••• WIDTH: Análogo 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 relación entre ciertas regiones y las acciones correspondientes. Estas regiones se pueden especificar como cajas, círculos o polígonos. Cuando se pulsa sobre la imagen, las coordenadas de la pulsación se envían a un programa del servidor que mira en la base de datos la acción asociada a estas coordenadas.

Netscape proporciona una extensión a IMG, permitiendo los siguientes atributos:

Capítulo 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 resolución.

Una imagen sin alineamiento:

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

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

HTML Capítulo 2


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

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

Capítulo 2 HTML


Con ALIGN=RIGHT: <IMG SRC=”A:\Platinum.gif” ALT=”Ejemplo de alineaci ón de imagen” ALIGN=”right”> Bienvenido al servidor de Mike OldField.Esta es la página principal dedicada a la discografía de este gran artista. Para entrar pulse en el siguiente enlace: <A HREF=” http://www.mike.es ”>Discografí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 existían. A continuación se indican los cambios más fundamentales.

1) CENTER: Centrado de bloques.

2) FONT: Cambia las propiedades y el tamaño del tipo de carácter.

3) BASEFONT: Asigna un tipo de carácter por defecto.

4) APPLET: Permite incrustaciones de “Java Applets”. Sólo con Netscape 2.0 y posteriores.

5) MARQUEE: Marca un texto como desplegable. Solo con Microsoft 2.0. y posteriores.

6) MAP: Mapa de imágenes en el cliente.

7) FRAME: Documentos FRAME.

HTML Capítulo 2


Estos elementos no forman parte del HTML “oficial” y por tanto hay que tener ciertos reparos en su utilización, puesto que otros visualizadores no los interpretarían de la forma correcta. 2.8.1.- CENTER CENTER no es un tipo de párrafo 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 HR’s cercanos. También se puede emplear para centrar tablas. Ejemplo: <CENTER> <H2>AMADÍS DE GAULA A DON QUIJOTE DE LA MANC HA</H2> <H3>SONETO</H3> <P> Tú, que imitaste la llorosa vida<br> Que tuve ausente y desdeñado sobre<br> El gran ribazo de la peña Pobre<br> De alegre á penitencia reducida,<br> Tú a; quien los ojos dieron la bebida<br> De abundante licor, aunque salobre,<br> Y alzándose la plata, estaño y cobr e,<br> Te dió la tierra en tierra la comida. </P> </CENTER>

Capítulo 2 HTML


2.8.2.- FONT Este elemento lo introdujo Netscape para permitir controlar el tamaño del tipo de carácter visualizado. Los tamaños 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 tamaño que se quiere para el tipo de carácter, el rango de 1 a 7, o bien un valor relativo utilizando los caracteres + y -. <P> <FONT SIZE=1>Tipo de letra de tamaño 1 </FON T><BR> <FONT SIZE=2>Tipo de letra de tamaño 2 </FON T><BR> <FONT SIZE=3>Tipo de letra de tamaño 3 </FON T><BR> <FONT SIZE=4>Tipo de letra de tamaño 4 </FON T><BR> <FONT SIZE=5>Tipo de letra de tamaño 5 </FON T><BR> <FONT SIZE=6>Tipo de letra de tamaño 6 </FON T><BR> <FONT SIZE=7>Tipo de letra de tamaño 7 </FON T><BR> <FONT SIZE=-1>Tipo de letra de tamaño 1 meno s que el que había </FONT><BR> <FONT SIZE=+3>Tipo de letra de tamaño 3 m&aa cute;s que el que había antes </FONT><BR> </P>

EXTENSIÓN 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 carácter. Por ejemplo FACE=”arial”. 2.8.3.- BASEFONT Una vez que se ha introducido el elemento FONT, es necesario asignar un nivel base al tamaño del tipo de carácter utilizado. Esto se hace mediante el elemento BASEFONT, de forma que <BASEFONT=3> indica que el tamaño base del tipo de caracteres para el documento es 3.

HTML Capítulo 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 incrustación se hace con el elemento APPLET; los parámetros necesarios por “applet” se pasan con los elementos PARAM. 2.8.5.- MARQUEE El elemento MARQUEE se soporta sólo 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 URL’s asociados mediante una estructura de la forma: <MAP NAME=”un_nombre”> <AREA SHAPE=”rect” COORDS=”x1,y1,x2,y2” HREF=”url _region> ...más formas... </MAP> Dentro del elemento MAP están los elementos AREA con los parámetros siguientes: SHAPE que indica la forma de las zonas “calientes”, COORDS donde (x1,y1) son las coordenadas de la esquina superior izquierda del rectángulo y (x2, y2) las coordenadas de la esquina inferior derecha. Otras formas posibles son: <AREA SHAPE=”circle” COORDS=”x1, y1, r”HREF=”url_re gion”> <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 proyección de imágenes. <BODY> <IMG USEMAP="#menu" SRC="a:\mapa.bmp" BORDER=0 WIDT H=800 HEIGTH=105 ALIGN=absmiddle> <map name="menu"> <area shape="rect" coords="0,0,85,85" href="documen to1.html" >

Capítulo 2 HTML


<area shape="rect" coords="709,34,785,63" href="doc umento2.html"> <area shape="rect" coords="102,0,693,44" href="docu mento3.html"> <area shape="rect" coords="102,58,206,91" href="doc umento4.html"> <area shape="rect" coords="221,58,444,91" href="doc umento3,html"> <area shape="default" nohref"> </map> </BODY> 2.8.7.- FRAME Con los documentos FRAME, la pantalla se divide en un número de “ marcos de división” 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 más 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 vacía. 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 FRAME’s y visualiza el contenido de NOFRAMES. Por el contrario, si un vsualizador entiende los FRAME’s, 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 página 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 página (n%) o en formato auto (*). Para el resto de la página 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 parámetros:

HTML Capítulo 2


•••• NAME= “text”: nombre del “frame”, por ejemplo, es el utilizado en los parámetros de

TARGET para referenciar a un “frame” en concreto. •••• SRC=URL: es el URL de la página 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 márgenes de los bordes del “frame”.

•••• [NORESIZE]: evita que el usuario cambie el tamaño 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 "fra mes". Puede perder algunas características e informaci&o acute; de estos documentos< <HR> Puede cargar el <A HREF="indice.html">in dice</A> y navegar por el mismo. </BODY> </FRAMES> </HTML>

Capítulo 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ática Office <LI>Curso de Windows NT <LI>Curso de Visual Basic <LI>Curso de Linux <LI>Curso de Autocad <LI>Curso de Diseño de páginas Web <LI>Curso de 3D Studio Max/Viz <LI>Curso de Diseño Gráfico <LI>Curso de Contabilidad <LI>Curso de Asesoría Laboral </UL> </BODY> </HTML> <HTML> <HEAD></HEAD> <BODY> <IMG SRC="A:\deltapc.jpg" BORDER=0 WIDTH=154 HEIGTH =71 ALIGN="Middle"> <BR>

HTML Capítulo 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 más recientes de los navegadores Web. Mucho de lo que indica a continuación es válido sólo 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 diseños de páginas HTML, de forma que la personalización de color, tipos y tamaños de fuentes, párrafos, fondos, etc., estén 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 definición de atributos de código HTML, que puede estar embebido (in-line) o en un archivo separado. La definición 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). Además del elemento STYLE se ha añadido 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 estándar HTML, por ejemplo referente a cabeceras de primer nivel (<H1> . . . </H1>), deberá realizar una especie de sobrecarga . así, un código como el siguiente:

Capítulo 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 página de color azul (según el patrón #RRGGBB). Se pueden declarar propiedades particulares para la directiva BODY, dentro de une estilo que se encuentre en la cabecera de la página HTML. 2.9.3.- ENLAZANDO HOJAS DE ESTILO A LOS DOCUMENTOS Hay dos formas para incluir la información de las hojas de estilo en un documento: usando LINK para referenciar una hoja de estilo externa, o incluyendo la información 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 también 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 información de las hojas de estilo a los visualizadores que no las entienden, esta se puede poner dentro de un comentario, para el caso quedaría: <STYLE> <!-- BODY{ Font-family:times,serif; Color:black; Margin-left:10%;

HTML Capítulo 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 quedaría 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-throu ght”> algún texto </SPAN>

indica que el texto dentro de SPAN se escriba en rojo y cruzado por una línea. 2.9.4.- NOTACIÓN PARA VALORES DE LAS PROPIEDADES MÁS HABITUALES

•••• PROPIEDADES DE LOS “FONTS” Font-family Permite escoger familias genéricas de fuentes del sistema

Font-style Escoge una apariencia normal, italic u oblique

Font-variant Permite variar entre aspectos normal y small-caps. Este último muestra las minúsculas como pequeñas mayúsculas.

Font-weight Aspecto de intensidad: normal, “bold”, “bolder” o “lighter”. También pueden seleccionarse por valores numéricos de 100,200,300,400,500,600,700,800 y 900.

Font-size Tamaño de la fuente, en valores absolutos (p.ej. 20pt) o relativos (p.ej. 150%) Font Modo general de asignación de cualquiera de los anteriores.

•••• PROPIEDADES COLOR Y BACKGROUND Color Color de texto. Puede especificarse en valores #RRGGBB, o por nemotécnicos,

como red. Background Idem que el anterior para el color del fondo del cuerpo del texto de párrafos o

de estilos de partes concretas.

Capítulo 2 HTML


•••• PROPIEDADES TEXT

Word-spacing Se puede definir una adición al espaciado normal entre palabras. El valor será positivo o negativo y se mide en em.

Letter-spacing Igual que el anterior, pero para el espaciado entre caracteres.

Text-decoration Efecto adicional en los caracteres. Puede ser: “overline”, “underline”, “line”, “througth” o “blinh”.

Vertical-align Posicionamiento vertical del elemento. Puede tomar los valores: “baseline”, “sub”, “super”, “top”, “texttop”, “middle”, “bottom” o “text-bottom”.

Text-transform Transformaciones de la apariencia en cuanto a mayusculas/minúsculas “lowercas”, “uppercase”, “capitalize” o “none”.

Text-align Alineamiento de elementos: “left”, “right”, “center” o “justify”.

Text-ident Sangrado de textos en unidades em.

Line-height Porcentaje o relativo. Proporción de la altura de la línea respecto al normal.

•••• PROPIEDADES BOX Margin-top, margin-right, margin-bottom, margin-left, margin

Posicionamiento de los márgenes de una caja, medido en unidades em.

Padding-top, Padding-right, Padding-bottom, Padding-left, padding

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

Border-top, Border-right, Border-bottom, Border-left, Border

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

•••• PROPIEDADES CLASSIFICATION Display Modo de mostrar información en un bloque. Los posibles valores son:

“block”, “inline”, “list-item” y “none”.

List-style Modo de numerar listas. Posibles valores: “decimal”, “lower-alpha”, “lower-roman”,...

HTML Capítulo 2


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

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 película QuickTime, una secuencia de música MIDI, etc. Se necesitan diferentes parámetros dependiendo que tipo de objeto se utilice, pero la mayoría 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 continuación de la directiva EMBED; <NOEMBED><A HREF=...>texto</A></NOEMBED>. Debe terminar con </NOEMBED>.

Capítulo 3 HTML


Capítulo 3 UNA GUÍA DE ESCRITURA DE DOCUMENTOS HTML

3.1.- SOBRE LA ESTRUCTURA GENERAL DE UN HIPERTEXTO Cuando se quiere poner a disposición del público un conjunto de información, probablemente ya se tiene una estructura de la misma. Conviene tener siempre presente cuál 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 aprenderán, pero si tienen conocimientos del tema ya poseen una organización preconcebida de como ese configura la información 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 información base de las dos organizaciones es la misma. Otra cuestión a tener en cuenta es el tamaño de la base de datos y de cada documento. Para evitar la “pérdida en el hiperespacio” (que es frecuente cuando se visitan estructuras complejas), hay que indicar de alguna forma el tamaño de la base de datos. Una forma de hacerlo es proporcionar un listado completo de las entradas (si no es adecuado darlo en la página inicial, se puede dar separadamente). En el índice de nivel superior se debe anotar cada entrada con el número de documentos que se encuentran siguiendo esa entrada. Cuando sea posible, una representación visual adecuada será de gran ayuda al lector, al igual que lo son los visualizadores gráficos, los monitores en color y las conexiones rápidas. Otro punto importante es el tamaño 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 información más pequeños. Ni tampoco lo es mezclar conceptos para hacer documentos más grandes. Hay dos límites sobre el tamaño máximo de los documentos. Por un lado está el hecho de que un documento grande se tarda más en transferir y el lector tarda más de lo que piensa en saltarlo o volver atrás. Por otro lado, es más difícil recorrerlos; si se tienen interfaces gráficos se pueden desplegar los documentos, mediante una barra de desplazamiento que al moverla se desplaza también el documento en la pantalla, pero con interfaces textuales esto no es posible y sólo se presentan algunas líneas. Además, si el documento es muy grande, aunque se tengan interfaces gráficos, se dificulta mucho su lectura, porque cualquier movimiento en la barra de desplazamiento causa que el documento se desplace, perdiendo el lector la orientación de donde se encuentra. Las ventajas de un documento grande son que permite una lectura secuencial más cómoda. 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:

HTML Capítulo 3


• Cuando se actualiza el documento, si se tiene una copia hay que tener un mecanismo que garantice la actualización de la copia, de no ser así se tendrán copias desfasadas.

• Se puede pensar que la copia es más fácil de acceder, pero esto es relativo. Puede haber

lectores en otros sitios para los que el original está más cerca y acceden más fácilmente. Entre las razones para copiarlo están:

• Si es una información transitoria, como una noticia, es mejor tener una copia.

• Si se quiere hacer referencia a una determinada versión 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 consideración una serie de cuestiones:

• Indicar el estado de la información del documento.

• Poner los enlaces en el contexto

• Firmar el documento.

• Dar un título adecuado al documento.

• Considerar un formato independiente del dispositivo.

• No utilizar los enlaces como notas a pie de página.

• Anotar adecuadamente las referencias que se hagan

• Escribir el documento para que también pueda ser impreso

• Escribir el texto que sea legible, aunque tenga enlaces.

• Evitar comentarios excesivos sobre los mecanismos de información.

• No centrarse en discutir las páginas propias. 3.2.1. INDICAR EL ESTADO DE LA INFORMACIÓN DEL DOCUMENTO Es normal encontrarse con documentos que no están en su forma definitiva, sino que están en revisión o aún incompletos. Por ello es conveniente tener una información del estado del documento, indicando cuando fue su última actualización. No todos los documentos necesitan incluir este tipo de información; se puede tener una página de visión general en la que se da esta información para cada documento. En algunos casos puede ser útil incluir la fecha de creación o de la última modificación, lo cual puede evitar que el lector siga leyendo una información ya caducada.

Capítulo 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 página 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 solución al problema es...”

• Hay palabras que se pueden enlazar a la información de fondo. Un ejemplo típico es la

documentación del proyecto WWW, donde la primera aparición de WWW se enlazaba al documento del proyecto central.

• Considerar también que se pueden dar punteros explícitos como puntos de navegación en

la parte superior e inferior del documento.

• Tener en cuenta la posible reutilización de parte del material en un futuro. Ello ayuda a escribir los documentos para su posible reutilización de forma separada.

Otro aspecto que conviene tener en cuenta es la inclusión de iconos para facilitar la navegación. 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, además se tienen una forma rápida de ir hacia atrás. 3.2.3.- FIRMAR EL DOCUMENTO El poder contactar con el autor también ayuda a tener actualizado el documento. Esto es fácil hacerlo, ya que solamente hay que poner un enlace a una página que contenga información del autor. 3.2.4.- DAR TÍTULO ADECUADO AL DOCUMENTO El título del documento se da en el elemento TITTLE en la cabecera (HEAD) del mismo. Hay un título para cada documento (obligatoriamente), el cual debe dar información del documento en un contexto global. 3.2.5.- CONSIDERAR UN FORMATO INDEPENDIENTE DEL DISPOSITIVO El hipertexto escrito en HTML no contiene información sobre los tipos de letras, la forma y el espaciado de los párrafos 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 sólo 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 añadir espacios y líneas 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 número del enlace”. El usuario tendrá las instrucciones de como seleccionar enlaces en su visualizador.

HTML Capítulo 3


3.2.6.- NO UTILIZAR LOS ENLACES COMO NOTAS A PIE DE PÁGINA. Las notas a pie de página distraen de la línea 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 pequeña descripción del contenido del destino de cada enlace, pero con discreción, ya que muchos títulos son autoexplicativos y no necesitan anotaciones adicionales. Una anotación que no diga nada es tan malo como no tener ninguna. 3.2.8.- ESCRIBIR EL DOCUMENTO PARA QUE PUEDA TAMBIÉN SER IMPRESO Si se tienen archivos HTML, es posible hacer una impresión del documento formateándolo para algún 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 más información sobre HTML pulse aquí”, en su lugar se puede intentar escribir algo como “para más información sobre HTML ver la sección 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 síndrome del “aquí”. Es decir, un abuso haciendo enlaces en la palabra “aquí”. Por ejemplo: Para información sobre XXXX pulse aquí . que quedaría mejor y mucho más fácil de leer si se utiliza una frase del tipo: Se dispone de información sobre XXXX . 3.2.10.- NO ABUSAR DE IMÁGENES Y GRÁFICOS Algunos autores llenan sus documentos de imágenes y gráficos, que muchas veces no aportan más información de la que se pueda dar con un simple texto, pero que sin embargo aumentan considerablemente el tiempo de transmisión; esto se hace más patente en aquellos usuarios conectados mediante la línea telefónica normal. Además hay muchos usuarios que no disponen de un visualizador gráfico o tienen desactivada la carga de imágenes. Por estos motivos es recomendable no abusar de ellas y si es necesario incluir una imagen utilice el atributo ALT en el elemento IMG.

Capítulo 4 HTML


Capítulo 4.- EL MODELO DE OBJETOS DE ACTIVEX-SCRIPT La realización de páginas Web interactivas fue uno de los objetivos centrales centrales en la elaboración de las tecnologías ActiveX. En primer lugar fue necesario crear las posibilidades que permitieran al programador acceder a cada uno de los componentes de una página 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 ActiveX-Scripting. El concepto de ActiveX-Script se basa, en definitiva, en separar el lenguaje de programación 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 PROGRAMACIÓN ORIENTADA A OBJETOS Una de las tareas principales en el diseño de lenguajes de programación modernos es la creación de conceptos que permitan un desarrollo modular del programa. El esfuerzo global en la creación de programas de ordenador complejos, significa varios años de trabajo. La necesidad de determinar lugares de intersección claros entre los programas parciales que serán creados por diferentes programadores es evidente. Esto resulta prácticamente imposible en el marco de lenguajes de programación clásicos, que trabajan de manera procedural. En el marco de lenguajes de programación orientada a objetos, los objetos se organizan jerárquicamente en una estructura de clases de objeto. Por lo tanto, un objeto puede tener subobjetos o un objeto superior. Los métodos que han sido definidos para un objeto superior pueden heredarlos los objetos subordinados. Los métodos de mismo nombre, al aplicarse a objetos diferentes, pueden producir efectos también diferentes. La relación entre un método y su objeto correspondiente se denomina enlace. Cuando existen enlaces entre objeto diferentes y métodos diferentes, que sin embargo tienen nombres idénticos, se utiliza la denominación polimorfismo. Herencia y polimorfismo son características especiales de los lenguajes de programación orientados a objetos. En la realización de lenguajes de programación Script para el diseño de páginas Web interactivas en cambio, estos términos tienen un papel secundario. Por tanto, dichos conceptos no se han implementado en los lenguajes de programación Script existentes en la actualidad. El procedimiento viene dado un sistema de objetos fijo que puede ser elaborado por un lenguaje de programación especialmente adecuado para ello. Este sistema se llama modelo de objetos ActiveX-Script.

4.2.- LOS OBJETOS DEL ENTORNO DE PROGRAMACIÓN ACTIVEX-SCRIPT El modelo de objetos ActiveX-Script consiste esencialmente en una sola jerarquía de objetos. El objeto superior de esta jerarquía se llama “Window”. El objeto Window representa la ventana principal del Internet-Browser que se utiliza, así como sus métodos y propiedades. Todos los demás 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,

HTML Capítulo 4


dentro del objeto superior. Se trata de los objetos “Frame”, “Script”, “Link”, “Anchor”, “Form” y “Element”. Por esta razón, se administran como variables de objeto indexadas. Así, la denominación de cada uno de los objetos se realiza indicando el índice correspondiente entre paréntesis o utilizando el nombre que se le asignó al elemento HTML en cuestión, mediante el atributo HTML NAME.

4.3.- EJEMPLOS PARA LA UTILIZACIÓN DE PROPIEDADES Y METODOS Con el sistema de nombres de objeto descrito en el apartado anterior puede accederse unívocamente a prácticamente 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 métodos que corresponden a funciones específicas del objeto. La denominación de las propiedades y los métodos se produce de manera que cada nombre se agrega al nombre del objeto en cuestión, separando ambos componentes del nombre mediante un punto. Como puede comprobarse, no existe prácticamente ninguna diferencia entre la denominación de un subobjeto y una propiedad de objeto o un método de objeto. Efectivamente, con frecuencia los subobjetos se entienden como “propiedades” del correspondiente objeto superior. 4.3.1.- CREACIÓN DE CUADROS DE DIÁLOGO En objeto Window posee tres métodos que sirven para crear cuadros de diálogo, en concreto “alert”, “confirm” y “prompt”. Para activar estos métodos, es suficiente indicar el nombre del método, 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 activación de uno de los cuadros de diálogo mencionados. <HTML> <HEAD> <TITLE> Los cuadros de diálogo </TITLE> <SCRIPT LANGUAGE="VBS"> sub butt1 alert("Advertencia") end sub sub butt2 confirm("Confirmación") end sub sub butt3 prompt("Entrada") end sub </SCRIPT> </HEAD> <BODY> <CENTER> <H1> ActiveX dispone de tres cuadros de diálogo diferent es </H1> <FORM NAME="Cuadros de diálogo"> <INPUT TYPE="button" VALUE="Advertencia" onClick="b utt1"><BR> <INPUT TYPE="button" VALUE="Confirmación" onClick=" butt2"><BR> <INPUT TYPE="button" VALUE="Entrada" onClick="butt3 ">

Capítulo 4 HTML


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

El método “alert” crea una advertencia, que dentro del cuadro de diálogo se ilustra mediante un triángulo amarillo con un signo de exclamación. La única interacción del usuario que se ha previsto en este cuadro de diálogo es la confirmación mediante una pulsación del ratón en el botón Aceptar.

El método “confirm” produce la emisión de un cuadro de diálogo, que ofrece otro botón como alternativa a la confirmación. El carácter interrogante de este cuadro de diálogo queda remarcado adicionalmente con un signo de interrogación azul dentro de un “bocadillo”.

El método “prompt”, finalmente, sirve para crear un cuadro de diálogo en el que el usuario puede introducir un texto.

HTML Capítulo 4


A diferencia del método “alert”, los métodos “confirm” y “prompt” suministran valores al programa principal, como resultado de la ejecución. En el caso del método “confirm”, el valor de retorno es TRUE o FALSE, en función del botón que se utilice para salir del cuadro de diálogo. El método “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 páginas 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 programación de esta funcionalidad se encuentra en la propiedad “Status” del objeto “Window”. Mediante una simple asignación de valor dentro de un programa Script, esta propiedad puede recibir un texto cualquiera, que se mostará después 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 d e la barra de estado </H1> <FORM NAME="Form1"> <INPUT TYPE="input" NAME="statext"> <INPUT TYPE="button" VALUE="mostrar como texto de l a barra de estado" onClick="butt1"><BR> </FORM> </CENTER> </BODY> </HTML>

Capítulo 4 HTML


En el ejemplo anterior, las dos líneas del programa status=document.Form1.statext.value

y status=document.Forms(0).elements(0=.value

serían complementariamente equivalentes. 4.3.3.- LAS CONFIGURACIONES DE COLOR El diseño de color de una página WWW se controla a través 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>

HTML Capítulo 4


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

4.3.4.- PRESENTACION DEL TEXTO El método “wite” del objeto documento sirve para la presentación de texto. El tratamiento del texto se produce de manera totalmente análoga al tratamiento de texto, que es componente directo del documento HTML.

Capítulo 4 HTML


Ejemplo: <HTML> <HEAD> <TITLE> La presentación 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 denominación de la versión 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>

HTML Capítulo 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 continuación reúne todas las propiedades del objeto Link correspondiente.

Propiedad Valor de devolución (ejemplo) Significado

href http://www.ejemplo.de:8000/carpeta/archivo.html?clave#destino

Todo el URL

protocol http: La parte del URL, que determina el protocolo de transmisión.

host www.ejemplo.de:8000 El nombre del ordenador y el número de puerto.

hostname www.ejemplo.de El nombre del ordenador (DNS)

port 8000 El número de puerto

pathname /carpeta/archivo.html La indicación de la ruta

search Clave La cadena (string) de búsqueda (¡sin el interrogante!)

hash #destino El destino de salto dentro de la página HTML activada

target FrameA El nombre del “Frame”, en el que debe mostrarse el documento activado.

El siguiente listado representa una aplicación sencilla de dos de los métodos 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>.<B R> <A HREF="http://www.yahoo.com">Yahoo</A> es uno de los dispositivos de busqueda mas conocidos.<BR>

Capítulo 4 HTML


Pero <A HREF="http://www.altavista.digital.com">Altavista</A> es más potente en bastantes aspectos.<BR> Y para finalizar, un <A HREF="http://www.fantasía.es/carpeta/home.htm" N AME="phant"> Link inventado.</A><BR> <BR> El Host de la dirección 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 Según el concepto original de la WWW, los formularios HTMl sirven para recibir datos del usuario, que posteriormente se envían al servidor para su evaluación. Gracias a los lenguajes Script, ahora es posible evaluar, total o parcialmente, los contenidos de formularios a través del Browser. Normalmente, también se utiliza el formulario HTML para presentar los resultados de la evaluación. 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

HTML Capítulo 4


de objeto “links()”, que ya hemos tratado, aquí también existen dos posibilidades para la denominación de objetos. Puede accederse a cada objeto tanto a través 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 diseño de formularios cuya representación 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).value document.forms(1).Boton2.value=document.Introduccio n.Inscripc2.value Botones.Boton3.value=Introduccion.elements(2).v alue Botones.elements(3).value=document.forms(0).ele ments(3).value end sub </SCRIPT> </HEAD> <BODY> <H1> Introducción 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="rotul ar"> </FORM><BR> <P> <H1> Los botones con sus inscripciones: </H1> <FORM Name="Botones"> <INPUT TYPE="button" NAME="Boton1" VALUE="......... ....Botón 1............."> <INPUT TYPE="button" NAME="Boton2" VALUE="......... ....Botón 2............."><BR> <INPUT TYPE="button" NAME="Boton3" VALUE="......... ....Botón 3.............">

Capítulo 4 HTML


<INPUT TYPE="button" NAME="Boton4" VALUE="......... ....Botón 4............."> </FORM> </BODY> </HTML>

HTML Capítulo 4


4.4.- EL MODELO DE OBJETOS ACTIVEX-SCRIPTING 4.4.1.-EL OBJETO “WINDOW”

Es el objeto más importante y se sutúa en la parte más alta de la jerarquía de objetos JavaScript. Este objeto tiene tal relevancia que los métodos hacen referencia a él de forma implícita. Por ejemplo, cada vez que se emplea la función alert(). Se está haciendo uso de uno de los métodos 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 estándar, que puede ser sobrescrito temporalmente mediante la utilización de la propiedad “status”. 2. window.name Suministra el nombre de la ventana del Browser. La propiedad “name” devuelve una cadena vacía, 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 líneas 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 vacía 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 cuestión. 5. window.top Remite a la ventana superior de la jerarquía FRAME. Para ilustrar los efectos de las propiedades “name”, “parent”, “self” y “top”, servirán los tres documentos HTML siguientes:

Capítulo 4 HTML


Se observa que los efectos de las propiedades “name” y “sef.name” siempre son equivalentes., en las dos ventanas parciales inferiores, también 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) vacía en cada caso. El objeto Window dispone de los siguientes métodos: 1. alert, confirm y prompt

sirven para crear pequeños cuadros de diálogo. 2. open y close

la mayoría de los programas de navegación permiten tener varias ventanas abiertas simultáneamente, cada una de ellas mostrando distintas páginas 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 método open(). Este método nos sirve para iniciar o crear una nueva ventana de navegación. La sintaxis del método open() es la siguiente: Open (URL, nombreventana, característicasventana) donde los tres parámetros son: • URL: Una cadena conteniendo el URL a mostrar en la nueva ventana. Si colocamos una

cadena vacía, se crea una nueva ventana a su vez vacía.

• Nombreventana: una cadena especificando el nombre de la ventana que podrá ser utilizado por el atributo TARGET de algún formulario o de un hiperenlace.

• Característicasventana (opcional): es una cadena conteniendo una lista, separada por comas,

de distintas características de la ventana que se deseen fijar. Las posibles características son:

HTML Capítulo 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

dirección. � Menubar: si se le asigna el valor yes, coloca la barra de menú en la nueva

ventana � OuterHeight: especifica, en pixels, el tamaño vertical externo de la ventana. � Resizable: si se le asigna el valor yes, el tamaño 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 más grande que el tamaño 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 estándar. � Width: especifica, en pixels, el ancho de la nueva ventana. Ejemplo:

<HTML> <HEAD> <TITLE>Ejemplo de método Open</TITLE> <SCRIPT LANGUAGE="VBS"> Sub Crear Set ventana=window.open("","Nombre1", "height=100,width=400,menubar=yes,location=yes,too lbar=yes") ventana.focus() texto="<HEAD><TITLE>Ventana Creada</TITLE></HEAD>" texto=texto & "<B>Esto el un mensaje de prueba en l a nueva ventana" texto=texto & " creada por la función Crear.</B><BR >" ventana.document.write(texto) End Sub </SCRIPT> </HEAD> <BODY> <FORM> Pulsar este botón para crear una ventana nueva<BR> <INPUP TYPE="button" VALUE="Nueva Ventana" onClick= "Crear"> </FORM> </BODY> </HTML>

Capítulo 4 HTML


3. setTimeout y clearTimeout

Estos dos métodos se desarrollaron para el control de procesos temporales. La sintaxis de la 1ª es: setTimeout.(expresión, tiempo) donde expresión es una cadena que contienen el nombre de una función la cual es evaluada una vez que el período 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 manifestación puede ser comprobada y evaluada a través de dos “Event-Handler” por parte del programa Script. Estos eventos tienen lugar cada vez que se carga un documento en la ventana en cuestión. 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 asignación de atributos adicional para indicar que lenguaje Script debe utilizarse para evaluar el evento. Los dos documentos HTML cortos que se muestran a continuación contienen Hyperlinks que remiten cada uno al otro documento. Al pulsar en estos vínculos 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 representación 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.

HTML Capítulo 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 están representados los diferentes elementos del documento HTML. LastModified Suministra la fecha, en la que se modificó por última vez el documento en cuestión. Title Suministra el título 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 vacíos de seguridad en la moderna WWW, porque sirve para guardar informaciones breves en el disco duro del sistema Browser. Además, 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 página HTML. La línea 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 página Web actual. La línea 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 página que contiene el Hyperlink a través del que se ha activado la página. El objeto “document” dispone de cinco métodos documentados, que son: Write y writeLn La diferencia entre los métodos “write” y “weiteLn” es tan insignificante que prácticamente pueden utilizarse de manera equivalente, y generalmente debería darse preferencia a la forma más corta, “write”. “writeLn”, al contrario que el método “write”, suministra al final de la cadena de caracteres devuelta, un carácter adicional de salto de línea. Este tipo de caracteres de control, sin embargo, no suelen tener ningún efecto dentro de documentos HTML. En HTML los saltos de línea se crean mediante Tags JTML especiales (<BR> o <P>). Open, close y clear Con los métodos “open” y “close” se abre o se cierra, respectivamente, la ventana actual a modo de canal de salida para los métodos “write” y “writeLn”. La utilización de los métodos “write” en un entorno limitado por “open” y “close”, se diferencia en dos características de la utilización convencional de estos métodos:

1. La salida de texto no se produce inmediatamente después de haber elaborado el comando

“write”, sino que lo hace en el instante en que se cierra el canal de salida mediante el método “close”.

Capítulo 4 HTML


2. La salida de texto no se produce mediante un añadido 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" onCl ick="butt1"><BR> <INPUT TYPE="button" VALUE="Texto de prueba 2" onCl ick="butt2"><BR> </BODY> </HTML>

HTML Capítulo 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 cuestión, 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 evaluación del formulario. Esta propiedad normalmente recibe un valor a través de la correspondiente asignación de atributos dentro del Tag <FORM...>. Utilizando la propiedad “action”, puede sobreescribirse un URL dado. El efecto del atributo ACTION en la línea de HTML <FORM ACTION= http://www.ctv.es/cqi/busqueda> es equivalente al efecto de la línea 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 línea de HTML <FORM ACTION=”...”ENCTYPE=”text/html”> equivale en su efecto a la línea de VBS document.forms(0).enctype:”text/html” method Equivale al atributo de mismo nombre del Tag <FORM...>. De nuevo, la línea de programa de HTML <FORM ACTION=”...”METHOD=”GET”> y su correspondencia en VBS document.forms(0).method=”GET” tienen efectos idénticos. Target Equivale al atributo TARGET dentro del correspondiente Tag <FORM...> METODOS: Submit El efecto de la activación de este método consiste en que se envía el contenido del formulario al U¨RL que hay actualmente disponible como propiedad “action”. En el caso de formularios HTML puros, este método se activa mediante una pulsación del ratón en el botón que se creó con el Tag. <INPUT TYPE= “submit”...> si se utiliza VBS, también pueden tomarse otros eventos como causas de este efecto.

Capítulo 4 HTML


OnSubmit Con el controlador de evento “onSubmit” puede evitarse un envío del contenido del formulario al activar el método “submit”. Esta funcionalidad puede utilizarse, por ejemplo, para someter los datos del formulario a ciertos controles de aceptación antes del envío definitivo. Mediante la línea Script Formulario 1.onSubmit:”return check()” Se exige que antes del envío del contenido del formulario de nombre “formulario!”, se active la función “check()”. Si esta función suministra un valor de retorno diferente a “TRUE”, el contenido del formulario no se envía. 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 dirección 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>Información LOCATION</TIT LE>"; 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=5 00"); ventana.document.write(texto); } </SCRIPT> <BODY> <A NAME ="Inicio"></A> <FORM> <INPUT TYPE="button" VALUE="INFORMACION" onClick="i nforma()">

HTML Capítulo 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 más bien a toda la variable de objeto “Links”. Length Suministra la longitud de la variable de objeto “Links”, es decir, un número entero, que corresponde al número 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

Capítulo 4 HTML


<A HREF="http://www.microsoft.com">Microsoft</A>.<B R> <A HREF="http://www.yahoo.com">Yahoo</A> es uno de los dispositivos de búsqueda más importantes.<BR> Pero <A HREF="http://www.altavista.digital.com">Alt avista</A> es más potente en bastantes aspectos.<BR> Y para finalizar, un <A HREF="http://www.fantasía.es/carpeta/home.htm" N AME="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 ratón se mueve encima de un Hyperlink. El controlador de evento “mouseMove” posee cuanto argumentos, que se resumen en la siguiente tabla. Argumento Significado Shift Estado de la tecla de mayúsculas Button Estado de los botones del ratón X Posición horizontal del puntero del ratón Y Posición vertical del puntero del ratón

HTML Capítulo 4


OnMouseOver La finalidad dle controlador de evento “onMouseOver” equivale esencialmente a la del controlador de evento “mouseMove”. Aunque, “onMouseOver” no posee ningún tipo de argumentos. OnClick Es el más importante del objeto Link y el único que funciona tal y como se espera de él. Evalúa una pulsación del ratón, con el botón izquierdo, en un Hyperlink, con la consecuencia de que se elabora la función VBS indicada en el atributo onClik del Tag <TAG>, antes de cargar el documento indicado en el atributo HRER. Con ello, también 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 página, pulse simplemente <A HREF="bsp5402.htm" NAME="Link1" onClick="Desviac ion"> aquí</A>! </BODY> </HTML>

Capítulo 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 cuestión. 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 introducción 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, métodos y controladores de evento. No obstante, no todas estas características sintácticas pueden aplicarse a cada objeto “Element” concreto. Las propiedades existentes son: Form Utilización con: todos los elementos de formulario. La propiedad “form” remite al objeto “form” superior. Name Utilización con: todos los elementos de formulario. La propiedad “name” suministra el nombre del objeto “Element” que, por regla general, se determina mediante una asignación de valor del atributo NAME dentro del Tag HTML que crea el elemento. La propiedad “name” también puede servir para sobrescribir el nombre de elemento con una nueva cadena (string) de caracteres. Value Utilización 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 Utilización con: password, text, textarea. Aquellos elementos de formulario que sirven para la introducción de textos por parte del usuario, pueden recibir un texto predefinido. Checked Utilización con: chedkbox, radiobutton. El estado de los elementos de formulario “checkbox” (casilla de verificación) o “radiobutton” (botón de opción) se comprueba o se determina con la propiedad “checked”. El valor de esta propiedad es de tipo booleano. DefaultChecked Utilización con: checkbox. El estado predefinido de una casilla de verificación, “checkbos”, puede comprobarse o definirse con la propiedad booleana “defaultChecked”. Enabled Utilización 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.

HTML Capítulo 4


En cambio, si el valor es “FALSE”, el elemento en cuestión no responde a los datos introducidos por el usuario. ListCount, multiSelect y listltem Utilización con: combo. Length Utilización con select. La propiedad “length” de un elemento de introudcción del tipo “select” suminstra un número entero, que representa la cnatidad de opciones que se ofrecen en el cuandro de selección (Select-Box). Options Utilización con : select La variable “options” contiene todas las opciones de un elemento de introducción 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">Selección A1 ................ . <OPTION VALUE="selA2">Selección A2 <OPTION VALUE="selA3">Selección A3 <OPTION VALUE="selA4">Selección A4 <OPTION VALUE="selA5">Selección A5 </SELECT> <SELECT NAME="selB"> <OPTION VALUE="selB1">Selección B1 ................ . <OPTION VALUE="selB2">Selección B2 <OPTION VALUE="selB3">Selección B3 </SELECT><BR> <SCRIPT LANGUAGE="VBS"> document.write "Número de opciones en el área A: " document.write selecttest.selA.length document.write "<BR>" document.write "Número de opciones en el área B: " document.write selecttest.selB.length document.write "<BR>" document.write "Valor de la cuarta opción en el áre a A: " document.write selecttest.selA.options(3).value document.write "<BR>" document.write "Texto de la segunda opción en el ár ea B: " document.write selecttest.selB.options(1).text </SCRIPT> </FORM> </BODY> </HTML>

Capítulo 4 HTML


SelectedIndex Utilización con: select. La propiedad “selectedIndex” suministra el índice de la opción que se ha seleccionado en un cuadro de selección. El objeto “Element” dispone de siete métodos: Click Utilización con: button, reset, submit, checkbox, radio, combo. Focus Utilización con: todos los elementos. El método “focus” establece el enfoque de introducción sobre el elemento correspondiente. Blur Utilización con: password, text, textarea. El método “blur” quita el enfoque de introducción del elemento en cuestión. Select Utilización con: password, text, textarea. Removeltem, addltem y clear Utilización con: combo.

Los métodos “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 Utilización con: button, reset, submit, checkbox, radio, combo. El controlador de evento “onClick” reacciona a una pulsación del ratón en el elemento formulario en cuestión. OnFocus Utilización con: todos los elementos. El controlador de evento “onFocus” reacciona cuando el elemento de formulario en cuestión recibe el enfoque de introducción. OnBlur Utilización con: passeord, text, textarea. Si un elemento de formulario, que anteriormente estaba enfocado, pierde el enfoque de introducción, el controlador de evento “onBlur” del elemento en cuestión registra este hecho.

HTML Capítulo 4


OnChange Utilización con: text, textarea. El controlador de evento “onChange” reacciona a todos los cambios en un cuadro de texto. OnSelect Utilización 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 número de URLs que contiene la lista en cuestión. Y los métodos:

back: tienen en mismo efecto que la activación del botón del Browser Atrás por parte del usuario. El último documento mostrado se carga de nuevo. forward: equivale a accionar el botón del Browser Adelante. Mediante la indicación de un argumento “n” positivo de número enteros pueden utilizarse los métodos “back” y “forward” para realizar “n” saltos hacia atrás o hacia adelante, respectivamente. go: puede solicitarse un documento de la lista “history” determinado por un argumento positivo de números enteros. History.go 1 tiene como consecuencia un salto atrás hacia el primer documento de la sesión, 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 código del navegador. • appName: especifica el nombre del navegador. • appVersion: especifica la versión 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 máquina para la que el navegador fue compilado. • plugins: es un array con todos los plug-ins instalados en el cliente

Capítulo 4 HTML


<HTML> <HEAD> <TITLE>Ejemplo con Navigator </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE=”JavaScript”> document.writeln (“El valor de navigator.appCodeNam e 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 e s: <B>” + navigator.language + “</B><BR>”); document.writeln (“El valor de navigator.platform e s: <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.le ngth 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>

HTML Capítulo 4


manual de html

Documents