Manual HTML

5/11/2018 Manual HTML - slidepdf.com

http://slidepdf.com/reader/full/manual-html-55a0cdcc23295 1/216

Indice del manual de HTML

El Lenguaje HTML

Introducción

1 - Etiquetas del lenguaje HTML s Las Etiquetas s Atributos de las Etiquetas s Etiquetas correctas

2 - Formato de las URL s Definición s Uso y Formato

3 - Estructura de un documento HTML s Estructura Básica s Comentarios

4 - Cabecera de un documento HTML s Introducción s <TITLE>: Título del documento s <BASE>: URL base del documento s <ISINDEX>: El documento es un índice s <META>: Indica refresco del documento

5 - Cuerpo de un documento HTML

s Introducción s Definición de colores s Paleta de colores del Netscape 3.0 s Atributos de <BODY> s Ejemplos

5.1 - Espaciados y saltos de línea s El espaciado en HTML s <P> Cambio de párrafo s <BR> Salto de línea s <HR> Regla Horizontal s <PRE> Texto preformateado

http://www2.uca.es/manual-html/indice.htm (1 de 5)30/08/2008 11:59:16 a.m.

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-




s <CENTER> Centrado de texto e imágenes s Espacios en blanco

5.2 - Caracteres latinos y especiales s Como representar caracteres especiales s Elementos del lenguaje HTML s Caracteres acentuados s Otros Simbolos

5.3 - Cabeceras s <H1> - <H6> Cabeceras de titulos s <Hn ALIGN=CENTER>: Alineación de la cabecera s Ejemplos

5.4 - Tamaño y Color de las fuentes de caracteres s Utilidad s <FONT SIZE=n> : Tamaño de la fuente s Ejemplos de tamaños de fuentes s <BASEFONT SIZE=n> : Fuente por defecto s <FONT COLOR=texto color ó rrvvaa> : Color de la fuente s Ejemplos de definición de colores de fuentes

5.5 - Estilos físicos y lógicos s Estilos físicos y Estilos lógicos s Estilos Físicos s

Estilos Lógicos 5.6 - Definición de listas s Las listas en HTML s <UL> Listas no ordenadas

s Ejemplos s <OL> Listas ordenadas

s Ejemplos s <DL> Listas de definiciones

s Ejemplos 5.7 - Hiperenlaces

s Hiperenlaces s <A HREF=...> Hiperenlace s URL absolutas y relativas

s Ejemplos s <A NAME=...> Elemento Ancla

5.8 - Imágenes s Imágenes en los documentos HTML s <IMG SRC=...> Inclusión de Imágenes s <IMG ... ALT=...> Texto alternativo


http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-




s <IMG .. ALIGN=...> Alineación de la imágen s <IMG .. BODER=...> Borde de la imágen s <IMG .. HEIGHT=... WIDTH=...> Tamaño de la imágen s <IMG .. HSPACE=... VSPACE=...> Espaciado de separación de la

imágen s Creación de imágenes GIF transparentes

5.9 - Imágenes Sensibles s Imágenes Sensibles

s Ejemplo s ISMAP como referenciar la imágen sensible

s Ejemplo s Imágenes sensibles definidas desde el cliente

s Ejemplo

5.10 - Insercción de elementos multimedia s ¿ Multimedia ? s Extensiones Multimedia de Internet Explorer s Plug-in's s <EMBED> Insertar Ficheros

5.11 - Tablas s Introducción s <TABLE> Definición de la Tabla s <CAPTION> Titulo de la tabla s <TR> Fila de la tabla s <TH> y <TD> Una celda de la tabla s Ejemplos de tablas

5.12 - Formularios s Introducción s <FORM> Definición de formularios s <INPUT> Entrada básica de datos

s <INPUT TYPE=TEXT...> Texto corto s <INPUT TYPE=PASSWORD...> Palabras secretas s <INPUT TYPE=CHECKBOX> Botones de selección s <INPUT TYPE=RADIO...> Selección entre multiples opciones s <INPUT TYPE=HIDDEN...> Parametros ocultos s <INPUT TYPE=SUBMIT...> Enviar Datos s <INPUT TYPE=IMAGE...> Boton de Envio gráfico s <INPUT TYPE=RESET...> Borrar los datos

s <TEXTAREA> Texto en multiples líneas s <SELECT> Elección entre multiples opciones

7 - CGI (Common Gateway Interface), ejecución de binarios.


http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-




s Definición s Variables de entorno s Entrada de datos al cgi-bin s Salida de datos del cgi-bin

8 - Documentos con frames. s Introducción s Definición s <FRAMESET ...> Definición de las frames s <FRAME ...> Definición de cada una de las frames s TARGET: Atributo para indicar la frame de destino

Disponible en un solo documento, apto para imprimir. En este documento no tendrán

funcionalidad los enlaces,Tambien esta disponible para obtenerlo y consultarlo de forma local: Obtener el fichero (man-html.zip).

Gestión de un espacio Web Departamental

1 - Como gestionar la cuenta Departamental s

Introducción s Ficheros a incluir s Estructura de directorios s Imagenes e Iconos s Fichero por defecto (default.htm) s Inclusión de información

Gestión de una cuenta departamental por FTP

2 - Conceptos básicos del diseño de documentos y espacios Web

(EN PREPARACIÓN) 3 - FAQ de la gestión de un espacio Web Departamental

Realizado por el: Servicio de Infraestructura Informática

Versión: 0.99Ultima Modificación: 9 de Septiembre de 1996URL: http://www2.uca.es/manual-html/indice.htmComentarios: [email protected]


http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://www2.uca.es/manual-html/man-html.zip


http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://www2.uca.es/serv/sii

http://www2.uca.es/taller-html/comenta.cgi?html



http://www2.uca.es/serv/sii/

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-



http://-/?-

http://-/?-

http://-/?-

http://-/?-



Introducción

Introducción

HTML es un lenguaje sencillo pensado para presentar información en la WWW. HTML(HyperText Markup Languaje), como su nombre indica es un lenguaje de marcas para la creación dehipertextos. Por hipertexto entenderemos texto con una presentación agradable, con inclusión deelementos multimedia (gráficos, video, audio) y con la presencia de hiperenlaces que permitenrelacionar otras fuentes de información en documentos hipertextos. Es el lenguaje utilizado pararepresentar documentos en la WWW (World Wide Web).

Como se ha dicho es un lenguaje de marcas ya que en el las instrucciones son trozos de textoresaltados convenientemente que definirán la estructura lógica del documento. Por tanto undocumento HTML constrará de texto que será el contenido y la información del documento y de

instrucciones HTML que resaltarán este contenido y le darán un formato facil y agradable de leer ycon la posiblidad de relacionar documentos y fuentes de información mediante hiperenlaces.

Las marcas del lenguaje HTML especifican:

q La estructura lógica del documento:r Cabeceras, tipos y tamaños de las fuentes.r Parrafos de texto.r Centrado.r Enumeraciones o listas.r Formularios.r Tablas.

q Distintos estilos que definen el texto:r Negrita.r Cursiva.r Diferentes efectos: (direcciones de correo, citas textuales, etc…).

q Inclusión de hipertextos para acceder a otros documentos relacionados

q Inclusión de imágenes y ficheros multimedia.

El lenguaje HTML actualmente está en su versión 2.0, aunque se encuentra en desarrollo la 3.0.En este estándar se definen las etiquetas básicas y las estructuras de datos que forman el lenguaje. Eneste manual explicaremos todas las estructuras definidas en la especificación 2.0 añadiendo lasextensiones incluidas por NetScape en su versión 2.0. La unión de ambos constituye la

especificación del lenguaje HTML más extendida en la actualidad.

Este manual tiene la voluntad de ser dinámico y por tanto irá incorporando las nuevasespecificaciones del lenguaje HTML que se vayan introduciendo.

http://www2.uca.es/manual-html/introduc.htm30/08/2008 11:59:17 a.m.



Etiquetas en HTML

1 - Etiquetas del lenguaje HTML

Las Etiquetas

El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado deuna forma especial que permiten la definición de las distintas instrucciones de HTML, tanto losefectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas lasdenominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será unfichero texto con etiquetas que variarán la forma de su presentación.

Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El texto

incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:

<B> Letra Negrita, del inglés Bold(negrita).

<TABLE> Definirá una tabla.

<IMG> Inclusión de una IMaGen.

Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que lade inicio añadiéndole al principio una barra inclinada / . El efecto que define la etiqueta tendrá validezpara todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetasHTML.

<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>

Por ejemplo, con la etiqueta siguiente:

<B>Texto que será en negrita</B>.

Obtendremos:

Texto que será en negrita

Algunas etiquetas no necesitarán la de fin, serán aquellas en las que el final este implícito, porejemplo <P> párrafo, <BR> salto de línea ó <IMG> inclusión de una imagen. Definen un efecto quese producirá en un punto determinado sin afectar a otros elementos.

http://www2.uca.es/manual-html/etiquet.htm (1 de 3)30/08/2008 11:59:18 a.m.



Etiquetas en HTML

El uso de mayúsculas o minúsculas en las etiquetas es indiferente, se interpretarán del mismomodo en ambos casos, pero lo normal es expresarlas en mayúsculas para que destaquen con másnitidez del texto normal.

Atributos de las Etiquetas

Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definirdiferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicioy consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo deigual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si seincluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisibledependiendo de como lo interprete el navegador. Cuando el valor que toma el atributo tiene más deuna palabra deberá expresarse entre comillas, en otro caso no será necesario.

Un ejemplo de atributo será:

<A HREF="http://www.uca.es">Pagina principal de la UCA</A>

En este caso la etiqueta A presenta un atributo HREF cuyo valor es http://www.uca.es.

Igualmente una etiqueta podría presentar varios atributos:

<HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%>

En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo NOSHADE es un casoespecial que no presenta valor. El orden en que se especifiquen los atributos no afectarán al resultadofinal.

Etiquetas correctas

Todo texto que se encuentre entre los caracteres < y > se considerará una etiqueta, si la etiqueta nofuera una de las validas del lenguaje HTML no será tenida en cuenta, sin causar ningún tipo de error.Dejándose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extraña. Cuandose comete un error sintáctico al expresar una etiqueta o un atributo no se producirá ningún error,simplemente no de obtendrá el efecto que deseábamos.

El lenguaje HTML es un lenguaje que evoluciona muy rápidamente y cada nueva versión de losprogramas navegadores presenta etiquetas nuevas que causan efectos más espectaculares o atributosnuevos de las etiquetas ya existentes. Esto causa que los programas más antiguos no entiendan estasnuevas etiquetas y por tanto las considere erróneas y no realice la acción que deseábamos. Dándose elcaso de atributos que son validos solo para un único navegador.

Cuando creemos código HTML hay que hacerlo lo más estándar posible para permitir que el




Etiquetas en HTML

documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas. Portanto debemos renunciar a efectos espectaculares que solo tienen validez en un navegador e intentarcomprobar como se ve el documento en una variedad de navegadores, ya que las personas que seconectan a nuestras páginas no tendrán en la mayoría de los casos el mismo que nosotros. Tambien esinteresante como se vería el documento en los distintos tamaños de la ventana del navegador,teniendo en cuenta que todos no tienen un monitor con la misma resolución.

En este manual se han tratado de incluir las características más estándar de HTML y en caso detratarse de instrucciones más particulares se indicará convenientemente.




Formato de las URL

2 - Formato de las URL

Definición

URL es el acrónimo de (U niform Resource Locator), localizador uniforme de recursos y permitelocalizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la WWW.

Con la WWW se pretende unificar el acceso a información de servicios que antes eranincompatibles entre sí, tratando de conseguir que todos los servicios de internet sean accesibles através de la WWW, de esta forma desde un mismo programa se puede tener acceso a todos losrecursos de una forma uniforme y permite que los documentos HTML incluyan enlaces a otras

fuentes de información en servicios como FTP, gopher, WAIS, etc ...

Uso y Formato

Las URL se utilizarán para definir el documento de destino de los hiperenlaces, para referenciarlos gráficos y cualquier otro fichero que se desee incluir dentro de un documento HTML. Cadaelemento de internet tendrá una URL que lo defina, ya se encuentre en un servidor de la WWW, FTP,gopher o las News.

El formato de una URL será:

servicio://maquina.dominio:puerto/camino/fichero

El servicio será alguno de los de internet, estos pueden ser:

http: (HyperText Transport Protocol), es el protocolo utilizado para transmitir hipertexto. Todaslas páginas HTML en servidores WWW deberán ser referenciadas mediante este servicio. Indicaráconexión a un servidor de la WWW.

https: (HyperText Transport Protocol Secure), es el protocolo para la conexión a servidores de laWWW seguros. Estos servidores son normalmente de ámbito comercial y utilizan encriptación paraevitar la intercepción de los datos enviados, usualmente numeros de tarjeta de credito, datospersonales, etc ..., realizará una conexión a un servidor de la WWW seguro.

ftp: (File Transfer Protocol), utilizará el protocolo FTP de transferencia de ficheros. Se utilizarácuando la información que se desee acceder se encuentre en un servidor de ftp. Por defecto seaccederá a un servidor anónimo (anonymous), si se desea indicar el nombre de usuario se usará: ftp://

maquina.dominio@usuario, y luego le pedirá la clave de acceso.

http://www2.uca.es/manual-html/url.htm (1 de 4)30/08/2008 11:59:21 a.m.



Formato de las URL

gopher, wais: Cualquiera de estos servicios de localización de información, se indicará eldirectorio para localizar el recurso concreto.

news: Accede al servicio de news, para ello el visualizador de la WWW debe ser capaz depresentar este servicio, todos no lo son. Se indicará el servidor de news y como camino el grupo de

noticias al que se desea acceder: news://news.cica.es/uca.es.

telnet: Emulación de terminal remota, para conectarse a maquina multiusuario, se utiliza paraacceder a cuentas públicas como por ejemplo la de biblioteca. Lo normal es llamar a una aplicaciónexterna que realice la conexión. En este caso se indicará la maquina y el login: telnet://maquina.

dominio@login.

mailto: Se utilizará para enviar correo electrónico, todos los navegadores no son capaces. En este

caso solo se indicará la dirección de correo electrónico del destino: mailto://alias. correo@domino.

La maquina.dominio indicará el servidor que nos proporciona el recurso, en este caso seutilizará el esquema IP para identificar la maquina será el nombre de la maquina y el dominio. En elcaso de nuestra Universidad el dominio siempre será uca.es. Por tanto un nombre valido de maquinaserá www2.uca.es.

Es muy importante indicar siempre el dominio, ya que debemos suponer que se conectarán anuestras páginas desde servidores externos a nuestra red local por tanto si no indicamos el dominio

las URL que especifiquemos no podrían ser seguidas por los navegadores externos. Si en vez dewww2.uca.es utilizamos www2 será perfectamente accesible por cualquier maquina de nuestra redlocal pero si se referenciara desde una red con distinto dominio la maquina www2 será la maquinallamada así en el dominio remoto si existiera, que no es la que deseamos referenciar.

El puerto TCP es opcional y lo normal es no ponerlo si el puerto es el mismo que se utilizanormalmente por el servicio. Solo se utilizará cuando el servidor utilice un puerto distinto al puertopor defecto.

El camino será la ruta de directorios que hay que seguir para encontrar el documento que sedesea referenciar. para separar los subdirectorios utilizaremos la barra de UNIX / , se usa porconvenio al ser este tipo de maquinas las más usadas como servidores. El nombre de lossubdirectorios y del fichero referenciado puede ser de más de ocho caracteres y se tendrá en cuenta ladiferencia entre mayúsculas y minúsculas en el nombre.

La extensión de los ficheros será también algo importante, ya que por ella sabe el servidor el tipode documento que se accede e indica al cliente (navegador) el modo en que debe tratarse ese

documento. Para definir los tipos de documentos se utiliza los tipos MIME. Las extensiones másnormales con sus tipos correspondientes son:




Formato de las URL

Tipo MIME Extensión Tipo de fichero

text/htmlhtml ó .htm,

documento HTML

text/plain .txt por defecto, texto plano

image/gif .gif imagen de formato GIF

image/jpeg jpg ó .jpegimagen de formatoJPEG

El navegador de la WWW, realiza una acción para cada tipo de fichero, solo los que sean del tipotext/html serán mostrados como documentos HTML. En el caso de que el tipo no sea conocido por elcliente se considerará por defecto como un documento de texto normal.

Si no se indica un fichero y solo referenciamos un directorio accederemos a la página html pordefecto de ese directorio. En el servidor están definidos unos ficheros para ser usados si no de indicaun fichero concreto, el nombre que debe tener este fichero es en nuestro caso default.htm ó default.

html. En caso que no exista este fichero se mostrará un listado de todos los documentos que forman eldirectorio. Este fichero es la página inicial (home page) del servidor o del espacio Web.

Algunos ejemplos de URL podrían ser:

URL Definición

http://www.uca.es

En este caso solo se indica el servicio y la maquina ydominio. El resto de los parámetros se toman por defecto,el puerto 80, el directorio, el raíz del servidor y eldocumento por defecto de ese directorio.

http://www.uca.es/internet/internet.htmlEsta URL está más completa en este caso se accede alfichero internet.html que se encuentra en el directoriointernet del servidor de la WWW, www.uca.es.

http://www2.uca.es/serv/siiSe accederá al fichero por defecto del directorio /serv/siidel servidor de la WWW, www2.uca.es

ftp://ftp.uca.es/imagenes/globo.gif En este caso se accederá a un servidor de FTP anónimo,ftp.uca.es por el protocolo FTP y se accederá al ficheroglobo.gif del directorio de imagenes.




Formato de las URL

news:uca.es

En este caso se accederá al grupo de news de la uca en elservidor de news definido por defecto en el navegador dela WWW, esta opción solo es soportada por losnavegadores más modernos.

mailto://[email protected]á un mail al equipo de la WWW de la UCA, estaopción solo es soportada por los navegadores más

modernos.


Estructura de un Documento HTML

3 - Estructura de un documento HTML

Estructura Básica

Un documento HTML está definido por una etiqueta de apertura <HTML> y una etiqueta decierre </HTML>. Dentro de este se dividen dos partes fundamentales la cabecera, delimitada por laetiqueta <HEAD> y el cuerpo, delimitado por la etiqueta <BODY>. Por tanto la estructura de undocumento HTML será:

<HTML><HEAD>

Definiciones de la cabecera </HEAD><BODY>

Instrucciones HTML </BODY>

</HTML>

Ninguno de estos elementos es obligatorio, pudiendo componer documentos HTML que semuestren sin ningún problema sin incluir estas etiquetas de identificación. Si se utilizan elementosque forzosamente deban ser incluidos en la cabecera (como la etiqueta de titulo), no seránreconocidos correctamente si no se incluyen entre las etiquetas de <HEAD>.

En los próximos apartados explicaremos de forma separada los componentes de la cabecera y delcuerpo de un documento HTML.

Comentarios

Para insertar comentarios dentro de un documento HTML utilizaremos la etiqueta especial 

Los comentarios son útiles para identificar el documento, pudiendo indicar al comienzo del

documento su titulo, autor y la fecha en el que fue realizado, esto se hace antes de la etiqueta<HTML>. También aunque ya con menos utilidad para comentar cualquier instrucción ocircunstancia del documento.

http://www2.uca.es/manual-html/dochtml.htm (1 de 2)30/08/2008 11:59:21 a.m.



Estructura de un Documento HTML

Los comentarios no se muestran en el documento HTML y el único modo de verlo es viendo elcódigo HTML fuente del documento, cosa que permiten algunos navegadores de la WWW.

http://www2.uca.es/manual-html/dochtml.htm (2 de 2)30/08/2008 11:59:21 a.m.



Cabecera de un Documento HTML

4 - Cabecera de un documento HTML

Introducción

La cabecera de un documento HTML está delimitado por las etiquetas <HEAD> y </HEAD>, enesta se incluirán las definiciones generales que afectarán a todo el documento. Todas sus etiquetasson opcionales y se utilizarán solo en casos muy determinados, solo la etiqueta TITLE tiene un usogeneral y aunque es opcional se recomienda incluirla en todos los documentos que creemos.

A continuación se citan los distintos componentes que pueden formar la cabecera de undocumento HTML.

<TITLE>: Título del documento

Especificará el título del documento HTML, todo documento HTML debe tener un titulo. El titulodebe guardar relación con el contenido del documento y definirlo de forma general, su tamaño no estálimitado aunque se recomienda que no sea excesivamente extenso. Dentro de esta etiqueta no sepodrá usar ninguna de las restantes etiquetas HTML.

El título no forma parte del documento en sí, y no se incluye ni se muestra dentro del documento,normalmente se muestra en la parte superior de la ventana del programa navegador.

Se utiliza principalmente para etiquetar e identificar la página en los bookmarks (marcadores) y lashistory list (lista de documentos accedidos) y también se utiliza por algunos servidores de búsquedacomo resultado de una busqueda para poder intuir el contenido del documento. El titulo deberáguardar relación con el contenido del documento y definirlo de forma general.

La etiqueta <TITLE>, debe ser usada dentro de las etiquetas que definen la cabecera de lasiguiente forma:

<HEAD><TITLE>Titulo del documento HTML</TITLE>

</HEAD>

<BASE>: URL base del documento.

Especificará la URL que se tomará como base del documento HTML, esta se utilizará para lasreferencias a URL relativas, que se encuentren en los hiperenlaces y en las referencias de lasimágenes. No tiene mucho uso y lo normal es utilizarlo en documentos, obtenidos de otros servidores

http://www2.uca.es/manual-html/head.htm (1 de 2)30/08/2008 11:59:22 a.m.



Cabecera de un Documento HTML

o directorios e incluidos fuera de contexto, de esta forma los enlaces siguen siendo validos.

Presenta un atributo HREF, que indicará la URL base del documento, el formato será el siguiente:

<BASE HREF="URL">

Por ejemplo:

<BASE HREF="http ://www.uca.es/docs/">

<ISINDEX>: El documento es un índice

Indica que el documento es un índice, y por tanto se deberá realizar una búsqueda en él. Presentaráun indicador preguntando la palabra clave de la búsqueda.

No se utiliza en documentos normales, sino en documentos realizados con cgi-bin para indicar queles debe pasar una palabra clave para realizar la búsqueda. Presenta dos atributos, PROMPT queindica el texto que aparecerá como inductor de la búsqueda y ACTION que especifica el fichero cgique trata la consulta, por defecto será el documento actual.

<META>: Indica refresco del documento

Aunque tiene más utilidades, la principal es indicar documentos con refresco automático. Seindicará un documento que debe sustituir al actual en un determinado número de segundos.

El formato es el siguiente:

<META HTTP-EQUIV="REFRESH" CONTENT=" número_segundos ;URL=URL_de_refresco">

Se indica el número de segundos que deben pasar antes del refresco y el documento HTML quesustituye al actual. Si se indica cero segundos la transición entre uno y otro documento seráinmediata. Si no se indica URL el documento actual se refrescará.

La utilidad puede ser para documentos que cambien con una gran frecuencia y transcurrido untiempo se actualizarán, o documentos que deban ser vistos de forma secuencial, se empieza por undocumento pasando a los siguientes transcurrido un período de tiempo sin necesidad de acción algunapor parte del lector.

http://www2.uca.es/manual-html/head.htm (2 de 2)30/08/2008 11:59:22 a.m.



Cuerpo de un documento HTML


Introducción

El cuerpo de un documento HTML estará delimitado por las etiquetas <BODY> y </BODY> y enel se incluirán todas las instrucciones HTML y el texto que forman el documento, es similar al

BEGIN ó { de un lenguaje de programación. Al igual que la cabecera (HEAD) es opcional, pero serecomienda para la buena identificación de las distintas zonas del documento. Si un documento nopresenta ninguna de las etiquetas de identificación de sus distintas partes (<HTML>, <HEAD> ó<BODY>) se considerará que todo lo que se defina pertenece al cuerpo del documento.

Definición de colores

Antes de especificar los atributos de la etiqueta BODY indicaremos, la forma de representar losdistintos colores. Se usa el siguiente formato:

#rrvvaa

Donde se indica en formato hexadecimal la proporción de rojo, verde y azul que forma el colordeseado. El símbolo # es opcional. Un número hexadecimal es un número en base 16, la base normalutilizada es base 10 o decimal del 0 al 9. En este caso los número validos serán del 0 al 9 añadiendodesde la a ó A a la f ó F. Por tanto el número 0F será el 15, 0E será 14.

En la especificación del color utilizaremos para definir la proporción de cada color un número del0 al FF (255), 0 indica nada de ese color y FF la mayor proporción del color.

Algunos ejemplos de colores serán:

#000000 Negro(Negro)

#FFFFFF Blanco(Blanco)

#FF0000 Rojo(Rojo)

#00FF00 Verde(Verde) #0000FF Azul(Azul)

http://www2.uca.es/manual-html/body.htm (1 de 3)30/08/2008 11:59:23 a.m.




Algunos colores están predefinidos y pueden ser referenciados por su nombre, estos solo seránvalidos para Netscape e Internet Explorer de Microsoft, estos colores predefinidos son:

Color Predefinido Muestra Color Predefinido Muestra

black negro olive oliva

teal teal red rojo

blue azul maroon marron

navy azul marino gray gris

lime lima fuchsia fucsia

white blanco green verde

purple purpura silver plata

yellow amarillo aqua agua

El Netscape 2.0 o superior soporta mayor cantidad de colores: paleta completa del Netscape 2.0.

Atributos de <BODY>

La etiqueta BODY presenta algunos atributos que son de definición global para todo eldocumento, estos definirán los colores y el fondo del documento HTML.

Los atributos de BODY son:

<BODY BACKGROUND="URL" BGCOLOR=#rrvvaa TEXT=#rrvvaa LINK=#rrvvaa

VLINK=#rrvvaa >

q BACKGROUND="URL":

Definirá la imagen que se utilizará de fondo del documento HTML, la URL definida será elcamino a una imagen. Esta se muestra debajo del texto y las imágenes del documento HTML. En elcaso de que la imagen no rellene todo el fondo del documento esta será reproducida tantas vecescomo sea necesario.

q BGCOLOR=#rrvvaa ó nombre del color:

Indicará el color del fondo del documento HTML, solo se utilizará si no se ha definido una imagen





de fondo, o si esta imagen no puede obtenerse.

q TEXT=#rrvvaa ó nombre del color:

Especificará el color del texto normal dentro del documento HTML. Por defecto será normalmentenegro.

q LINK=#rrvvaa ó nombre del color:

Indicará el color que tendrán los hiperenlaces que no han sido accedidos. Por defecto será azul.

q VLINK=#rrvvaa ó nombre del color:

Color de los enlaces que ya han sido visitados. Por defecto es un color azul más oscuro.

Ejemplos

Algunos ejemplos podrían ser:

<body background= "http://www2.uca.es/fondos1/ fondo15.gif">

El documento tendrá como fondo laimagen indicada en la URL

<body bgcolor=blue text=white link=red vlink=aqua>

En este caso el fondo será azul, el texto

blanco, los enlaces rojos y los enlacesvisitados color agua

<body bgcolor=0000FF text=FFFFFF link=FF0000vlink=008200>

Este caso es similar al anterior pero usandoel formato hexadecimal para definir loscolores, el fondo será azul, el texto blanco,los enlaces rojos y los enlaces visitadoscolor verde oscuro




Colores soportados por el Netscape

Colores soportados por el Netscape 2.0

Los colores que se muestran solo serán validos para el Netscape 2.0 o superior.

Para definir los colores puede utilizar el texto por el que se los define, Ej:

<BODY BGCOLOR="aliceblue">

aliceblue antiquewhite aqua aquamarine azure beige

bisque black blanchedalmond blue blueviolet brown

burlywood cadetblue chartreuse chocolate coral cornflowerblue

cornsilk crimson cyan darkblue darkcyan darkgoldenrod

darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange

darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray

darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue

firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite

gold goldenrod gray green greenyellow honeydew

hotpink indianred indigo ivory khaki lavender

lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan

lightgoldenrodyellow lightgreen lightgrey lightpink lightsalmon lightseagreen

lightskyblue lightslategray lightsteelblue lightyellow lime limegreenlinen magenta maroon mediumaquamarine mediumblue mediumorchid

mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred

midnightblue mintcream mistyrose moccasin navajowhite navy

oldlace olive olivedrab orange orangered orchid

palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff

peru pink plum powderblue purple red

rosybrown royalblue saddlebrown salmon sandybrown seagreen

seashell sienna silver skyblue slateblue slategray

snow springgreen steelblue tan teal thistle

tomato turquoise violet wheat white whitesmoke

yellow yellowgreen

http://www2.uca.es/manual-html/colorns3.htm30/08/2008 11:59:25 a.m.



Espaciados y Saltos de Línea

5.1 - Espaciados y saltos de línea

El espaciado en HTML

En HTML no está permitido más de un elemento blanco (espacios, tabuladores, saltos de línea)separando cualquier elemento o texto, todos estos son convertidos a un único espacio blanco y elresto se omiten en la representación del documento. En el documento fuente podremos usar elespaciado que deseemos, y no deberá estar bien formateado, este se conseguirá con las etiquetasHTML.

Existen unas etiquetas especiales HTML para definir estos elementos de control de texto. A

continuación se detallará cada una de ellas.

<P> Cambio de párrafo :

Definirá un párrafo, se usará al comienzo o al final de un párrafo de texto e introducirá unespaciado de separación (normalmente dos líneas) con el próximo texto que se exprese. Esta etiquetase puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo servirá paraseparar texto.

El efecto se conseguirá introduciendo la etiqueta <P> en el punto en el que deseemos que seproduzca el espaciado. La etiqueta de fin de párrafo </P> es opcional no siendo necesario incluirla.

Existen elementos HTML que ya introducen separaciones de líneas, tanto antes como despues, portanto en estos casos no es necesario, pero sí posible, introducir el elemento de nuevo párrafo. No esnecesario utilizar esta etiqueta ni antes ni después de cabeceras <H n>, después de <HR> (reglashorizontales), <ADDRESS>, <BLOCKQUOTE>, <PRE>. Tampoco es necesario dentro de listas

tras los elementos <LI>, <DT> ni <DD>, que se utilizan para separar los distintos elementos de unalista.

Ejemplo

Inst.HTML

Esta es una frase que forma un parrafo.<P>Este es el otro parrafo.

Resultado

Esta es una frase que forma un parrafo.

Este es el otro parrafo.

http://www2.uca.es/manual-html/saltlin.htm (1 de 5)30/08/2008 11:59:27 a.m.




Explicación

En el punto donde se ha introducido la instrucción HTML de nuevo parrafo se observa unaseparación de dos líneas.

<BR> Salto de línea :

Su utilidad es similar al anterior pero en este caso el espaciado del texto es menor, se pasará a lalínea siguiente, sin dejar una línea de separación. En este caso será un cambio de línea y no deparrafo. Igualmente no es necesario usarlo tras los elementos que llevan implícitos un salto de línea,ni tampoco es necesaria la etiqueta de fin </BR>.

Ejemplo

Inst.HTML Esta es una frase de la primera línea.<BR>Esta es la siguiente línea

Resultado

Esta es una frase de la primera línea.Esta es la siguiente línea

Explicación

En el punto donde se ha introducido la instrucción HTML de nueva línea se observa elcambio de línea.

<HR> Regla Horizontal :

<HR ALIGN= LEFT | RIGTH |CENTER NOSHADE SIZE= n WIDTH= n>

Se usa para dividir un documento en distintas secciones, mostrará una línea horizontal de tamañodeterminable. Se asemejará al salto de página dentro de un documento.

Si no se especifican atributos dibujará una línea que ocupe el ancho de la pantalla del navegador yintroduciendo una separación con el texto anterior y siguiente, equivalente a cambio de párrafo. No esnecesaria la etiqueta de fin </HR>. Con los atributos podemos especificar su forma y tamaño, estoatributos son:

q ALIGN=LEFT, RIGTH ó CENTER:

Indicará la forma en la que se alineará la regla en el caso de no ocupar todo el ancho de la pantalladel navegador, a la izquierda, derecha o centrada.

q NOSHADE:

No muestra la sombra de la barra, evitando el efecto en tres dimensiones.





q SIZE= n:

Indicará la altura de la regla en puntos de la pantalla.

q WIDTH= n ó n%:

Especificará el ancho de la regla, se puede especificar en tanto por ciento del ancho de la ventana<HR WIDTH=50%> o en valor absoluto <HR WIDTH=75> en puntos de la pantalla.

Ejemplos

Inst.HTML

<HR>

Resultado

Explicación

Mostrará un línea que ocupa todo el ancho disponible y de altura 1 con sombra.

Inst.HTML

<HR SIZE=5 NOSHADE>

Resultado

Explicación

Mostrará un línea que ocupa todo el ancho disponible, es de 5 de alto y no tiene sombra niefecto dimensional.

Inst.HTML

<HR SIZE=5 WIDTH=50% ALIGN=LEFT>

Resultado

Explicación

Mostrará un línea que ocupa el cincuenta por ciento del ancho disponible, es de 5 de alto yestá alineada a la izquierda.

<PRE> Texto preformateado :

Muestra un porción de texto en el que se respetan los saltos de línea, tabuladores y espacios enblanco. Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado semostrará tal y como se expresa en el fuente del documento html. Para mostrar este texto se utiliza una





fuente de espaciado fijo más pequeña que el texto normal.

Presenta un problema cuando la línea es demasiado larga, ya que no la corta el navegador y semostraría tal y como aparece en el fichero fuente. No se recomienda como forma rápida de convertirun documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtieneuna buena presentación.

Dentro de la etiqueta PRE no tendrán validez la mayoría de las instrucciones HTML, solo sepodrán utilizar <B>, <I> y los hiperenlaces. El resto de las etiquetas HTML son ignoradas.

Ejemplo

Inst.HTML

<PRE>Este texto se verátal y como seescribió. </PRE>

Resultado

Este texto se verá

tal y como se

escribió.

Explicación

Como se ve utiliza otra fuente de caracteres distintas de espaciado fijo y se respetan losespacios en blanco y los saltos de línea de la instrucción original.

<CENTER> Centrado de texto e imágenes :

Se utilizará para centrar líneas de texto, imágenes o cualquier otro elemento HTML (tablas, listas,etc ...). Todo lo que se encuentre entre las etiquetas de inicio y fin aparecerá centrado en elnavegador.

Ejemplo

Inst.HTML

<CENTER> Este texto se verá centrado </CENTER>

Resultado

Este texto se verá centrado

Explicación

El texto aparece centrado en el navegador. Se puede utilizar tanto para una línea como para unpárrafo, y para cualquiera de la instrucciones del lenguaje HTML.

Inst.HTML

<CENTER> El texto y la imagen se centran<BR> <IMG SRC="/iconos1/or_star.gif"> </ CENTER>





Resultado

El texto y la imagen se centran

Explicación

Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen ocualquier otra estructura del lenguaje HTML.

Espacios en blanco :

Con esta secuencia de caracteres conseguiremos espacios en blanco que se mostrarán de formaefectiva, pudiendo mostrar más de un espacio en blanco de separación. Se incluirán tantasexpresiones como espacios en blanco se desee conseguir.




Caracteres Latinos y especiales

5.2 - Caracteres latinos y especiales

Como representar caracteres especiales

Los caracteres acentuados y algunos caracteres especiales que usa el lenguaje HTML para definirsus etiquetas no se pueden incluir en un documento de manera normal, se deben utilizar una serie desecuencias de escape que al mostrar el documento se sustituyen por el carácter deseado.

Estas secuencias de escape comienzan todas con el símbolo ampersand (&), seguido de un texto(siempre en minúsculas) que define el carácter deseado y termina con el símbolo punto y coma (;). Elerror más común cuando se usan estas secuencias de escape es no utilizar el punto y coma final, en

cuyo caso se mostrará el literal que define la secuencia, en lugar del carácter deseado. No esnecesario dejar espacios en blanco ni antes ni después de los caracteres especiales, para que quedenperfectamente encuadrados en la palabra.

Elementos del lenguaje HTML

Si incluimos en el texto de un documento HTML el símbolo menor que (<) o mayor que (>) seinterpretará siempre como la definición de una etiqueta y por tanto no se mostrarán al interpretar eldocumento.

Para expresar estos símbolos y otros del lenguaje HTML usaremos las siguientes secuencias deescape:

Sec. Escape Simbolo

< Signo < (menor que)

> Signo > (mayor que)

& Signo & (ampersand)

" Se mostrará el signo de comillas "

Caracteres acentuados

Existen una serie de etiquetas que nos permite mostrar los caracteres acentuados y caractereslatinos (ñ). Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de

http://www2.uca.es/manual-html/latincha.htm (1 de 3)30/08/2008 11:59:28 a.m.




escape, se mostrarán correctamente. Usted en su ordenador con su navegador podrá leer estoscaracteres correctamente siempre y cuando tenga el mismo código (español) que el autor deldocumento.

Los primeros 127 caracteres del código ASCII son comunes para todos los países e incluyen todaslas letras del alfabeto, a partir del 128 son específicos para cada lenguaje, entre estos se incluyen loscaracteres acentuados y la letra ñ, por tanto si alguien desde otro país que tenga un códigoincompatible intenta leer su documento, probablemente encuentre caracteres extraños que no sepainterpretar y por tanto no será capaz de leer los caracteres acentuados.

Existen diversas secuencias que definen los distintos tipos de acentos: agudo, grave o circunflejo.Para el acento agudo usaremos el literal acute, tanto para las mayúsculas como para las minúsculas.Por tanto incluiremos el símbolo de ampersand (&) la vocal que deseamos acentuar, la palabra acute y el símbolo punto y coma (;). Representándose los acentos de la forma:

Sec. Escape Letra Sec.Escape Letra

á á Á Á

é é É É

í í Í Í

ó ó Ó Ó

ú ú Ú Ú

Para la letra ñ usaremos la secuencia tilde, del siguiente modo:


ñ ñ Ñ Ñ

Para el acento grave usaremos grave, siendo en este caso la representación:


à à À À

è è È È

ì ì Ì Ì





ò ò Ò Ò

ù ù Ù Ù

Otros Símbolos

Para expresar una carácter por su valor en el código ASCII, usaremos el símbolo # , seguido de suequivalente numérico.

Para el acento circunflejo utilizaremos el literal circ y para la diéresis utilizaremos el literal uml.

Para expresar los símbolos de apertura interrogación, apertura de exclamación y estos acentosusaremos:


¿ ¿ ¡ ¡

ü ü Ü Ü

î î Î Î

Algunos otros símbolos especiales serán los siguientes.

Sec. Escape Simbolo Sec.Escape Simbolo

ç ç Ç Ç

®

® Símbolo de

registrado © © Símbolo de Copyright.

&#nnn; Donde nnn es un número decimal, el carácter nnn del código ISO-8859-1(ASCII).




Cabeceras de resalte

5.3 - Cabeceras

<H1> - <H6> Cabeceras de títulos

En un documento HTML es posible definir seis tipos distintos de cabeceras que seránnormalmente el título del documento y los distintos subapartados que lo forman.

La etiquetas que definen las cabeceras serán <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. El textoindicado entre las etiquetas de inicio y de fin será el afectado por las cabeceras:

Para la instrucción:

<H1>Este texto aparecerá resaltado</H1>

el resultado será:

Este texto aparecerá resaltado

Lo normal es utilizar las cabeceras de forma consecutiva y descendente, es decir, comenzaremosel documento con la cabecera <H1> que definirá el titulo, luego para los apartados principalesutilizaremos la cabecera <H2>, para subapartados <H3>, etc ... Utilizándolas así de formaconsecutiva.

Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento pararesaltar cualquier texto. El modo en que se presentan las cabeceras pueden variar de un navegador aotro, y solo se puede asegurar que se mostrará de distinta forma en orden de importancia. Lo normales que la <H1> sea negrita y muy grande, <H2> negrita y grande, <H3> itálica y grande.

<H n ALIGN=CENTER>: Alineación de la cabecera

Puede presentar un atributo, que especificará que la cabecera se mostrará centrada.ALIGN=CENTER.

La forma de expresarlo será:

<H1 ALIGN=CENTER>Este texto aparecerá resaltado y centrado</H1>

Ejemplos de Cabeceras

http://www2.uca.es/manual-html/cabecer.htm30/08/2008 11:59:29 a.m.




Ejemplos de cabeceras

Cabecera de tamaño H1

<H1>Cabecera de tamaño H1 </H1>











Cabecera H1 centrada

<H1 ALIGN=CENTER>Cabecera H1 centrada</H1>



http://www2.uca.es/manual-html/ejemcabe.htm (1 de 2)30/08/2008 11:59:30 a.m.












http://www2.uca.es/manual-html/ejemcabe.htm (2 de 2)30/08/2008 11:59:30 a.m.



Tamaño y Color de la Fuentes de Caracteres

5.4 - Tamaño y Color de las fuentes de caracteres

Utilidad

En el apartado anterior se vio el modo de definir los distintos títulos de documento, mediantecabeceras. Estas son poco flexibles y predeterminadas.

Existe otra etiqueta HTML que permite una más sencilla adaptación del tamaño de las fuentes ypermite además modificar su color.

Con esta podremos incluir texto resaltado en medio de una frase, con las cabeceras no es posible

ya que estas introducen automáticamente un salto de línea detrás, y permitirá incluir párrafos dedistintos tamaños o colores, proporcionando una mayor versatilidad y pudiendo crear efectos másespectaculares.

La etiqueta que permite esto se llama FONT y presenta atributos que nos permiten modificar eltamaño y color del texto incluido entre la etiqueta de inicio y fin.

<FONT SIZE= n> : Tamaño de la fuente

El atributo SIZE permite indicar el tamaño de la fuente, su valor puede estar entre 1 y 7.Incrementándose de tamaño progresivamente desde 1, que es la fuente de menor tamaño, hasta 7 quela fuente de mayor tamaño. El texto normal equivale a la fuente de tamaño 3, por tanto los valoresmenores que 3 serán fuentes más pequeñas que el texto normal y las mayores que 3 serán de mayortamaño.

El tamaño también puede indicarse de forma relativa, indicando el incremento o detrimento a

partir de la fuente base. Por defecto la fuente base será 3, por tanto si se indica como valor +1 lafuente será de tamaño 4.

Existe una etiqueta que redefine la fuente por defecto, esta etiqueta es: <BASEFONT SIZE ...>

Los elementos de tamaño de fuentes pueden ser definidos para todo un documento, teniendovalidez dentro de elementos tales como listas y formularios, pero no tendrán validez global en lastablas, debiendo definir cada una de las celdas al tamaño de fuente deseado.

Ejemplos de tamaños de fuentes

http://www2.uca.es/manual-html/font.htm (1 de 4)30/08/2008 11:59:31 a.m.

http://-/?-

http://-/?-




Inst. HTML Muestra Explicación

<FONT SIZE=2>Muestra</FONT> MuestraObtendriamos en este caso texto de tamaño defuente 2

<FONT SIZE=6>Muestra</FONT> Muestra Este texto es de tamaño de fuente 6

<FONT SIZE=-1>Muestra</FONT> MuestraObtendriamos también en este caso texto detamaño de fuente 2, pero lo definiríamos deforma relativa: 3-1=2

<FONT SIZE=+2>Muestra</ FONT> Muestra

Así definiríamos fuente detamaño 6 de forma relativa: 3+2=5

<FONT SIZE=6> Muestra<FONT SIZE=1> Muestra </ FONT> Muestra </FONT>

Muestra Muestra Muestra

Se pueden combinar en unamisma frase varios tamañosde fuentes

<FONT SIZE=4> Muestra <B><I> < A HREF="http://www.uca.es"> Muestra </A> </I> Muestra

</B> </FONT>

Muestra Muestra MuestraSe pueden combinar conelementos de resalte ehiperenlaces

<BASEFONT SIZE= n> : Fuente por defecto

Definirá el tamaño de la fuente que se considerará como base para definir los tamaños de fuenterelativos.

Esta etiqueta no define el tamaño de la fuente por defecto, para el texto normal, y solo se usa para

cálculos de tamaño de fuente relativos. La utilidad no es muy amplia, y se podría utilizar cuando enun documento en el que todos los tamaños estén definidos de forma relativa y se desee cambiar deforma global el tamaño de las fuentes.

Si no incluye esta etiqueta el valor base para estos cálculos es 3, con esta se puede variar, como seve en el ejemplo.



http://www.uca.es/

http://www.uca.es/




<FONT SIZE=-2>Muestra</FONT>

<BASEFONT SIZE=5>


Muestra Muestra

El nuevo valor para el calculo del tamañorelativo será 6, notándose el efecto en eltamaño de las fuentes

<FONT COLOR= texto color ó rrvvaa> : Color de la fuente

El atributo COLOR nos permite definir el color que tendrá el texto incluido entre las etiquetas deinicio y fin. Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versión 2.0 o superior.

El modo de definir los colores es similar al explicado para los atributos de BODY, al que le

remitimos si no le quedo claro.

Este atributo puede ser definido de forma conjunta con el atributo SIZE, o de formaindependiente, siendo atributos de la misma etiqueta. Si se define el atributo SIZE solo, el color deltexto que define será el por defecto, si se define con la etiqueta COLOR solo, el tamaño será el de lafuente base.

Al igual que en el caso del tamaño de la fuente pueden ser utilizados junto con otros elementos del

lenguaje HTML como listas y formularios y pueden ser utilizados conjuntamente con los elementosde resalte

El cambio de color no afectará al texto o elementos incluidos en un hiperenlace, utilizándose paraestos el color por defecto definido en la etiqueta BODY.

Ejemplos de definición de colores de fuentes

Algunos ejemplos de la definición de colores de fuente podrían ser:


<FONT COLOR=FF00FF>Muestra</FONT> MuestraEl texto se mostrará deun color lila, al mezclarlos colores rojo y azul.

<FONT COLOR=AQUA>Muestra</FONT> Muestra

También se puede utilizar

uno de los colorespredefinidos.


http://www.uca.es/servicios/actuali-soft



http://-/?-

http://-/?-






<FONT SIZE=5 COLOR=red> Muestra </FONT> Muestra Se puede combinar con eltamaño de fuente

<FONT COLOR=NAVY> Mue<FONT SIZE=4COLOR=BLUE>str</FONT>a </FONT> Muestra

Se pueden combinarvarios colores en unamisma frase o palabra.

<H3> <FONT COLOR=81426E> Mu<I>es</I>tra </ FONT> </H3>

Mues traPueden ser utilizados junto con otros elementosde resalte comocabeceras, estilos físicosy lógicos, etc ...




Estilos Físicos y Lógicos

5.5 - Estilos físicos y lógicos

Estilos físicos y Estilos lógicos

Como estilos definiremos los distintos efectos que se pueden aplicar al texto normal. Estos efectosson los resaltes (negrita, cursiva, subrayado, etc ...) que se pueden usar.

En HTML existen dos grupos principales de estilos los lógicos y los físicos. Los físicos sonaquellos que siempre causan un mismo efecto (negrita, cursiva, ...) y los lógicos indicarán un tipo detexto (cita, nombre de persona) que por sus características tiene un modo de mostrarse propio.

Se pueden utilizar ambos estilos para especificar un mismo efecto, por ejemplo para obtener unafrase resaltada podemos usar el estilo físico (negrita) o el estilo lógico (STRONG) y en ambos casosel resultado puede ser el mismo.

Es más recomendado, sin embargo, utilizar el estilo lógico, ya que en este el modo en que se venlos distintos efectos puede ser definido por el usuario, de forma que se pueda obtener unapresentación personalizada. Además en un futuro los navegadores podrían añadir modos mássofisticados de presentar los distintos estilos y si están definidos de forma lógica la adaptación es mássencilla. Y por último y más importante, al utilizar estilos lógicos el modo de escribir HTML se haceindependiente de como se presentará finalmente el texto, se utilizará el estilo según el tipo de textoque sea y no según como se debe presentar.

La tendencia actual de los navegadores es el uso de los estilos físicos olvidando un poco laversatilidad de los estilos lógicos, pero sin embargo ambos estilos pueden ser usados indistintamente,sin ningún problema.

Estilos Físicos.

El efecto se aplicará al texto expresado entre la etiquetas de inicio y fin. Los estilos físicos son lossiguientes:

Etiqueta HTML Ejemplo Descripción

<B> Ejemplo Negrita.

<I> Ejemplo Cursiva.

http://www2.uca.es/manual-html/estilos.htm (1 de 3)30/08/2008 11:59:33 a.m.




<TT> EjemploMaquina de escribir, muestra una fuente de caracteres deespaciado fijo.

<BLINK> Ejemplo Parpadeo.

<SUB> Ejemplo Subíndice. Para Netscape 2.0+

<SUP> Ejemplo Superíndice. Para Netscape 2.0+

<BIG> EjemploTexto grande, se utilizará el mayor tamaño de fuente. ParaNetscape 2.0+

<SMALL> EjemploTexto pequeño, se utilizará la fuente de menor tamaño. ParaNetscape 2.0+

Los estilos se pueden combinar entre sí obteniendo cualquier efecto deseado.

Ejemplo

Inst.HTML

Este texto es <B>negrita, <I>cursiva y <BLINK>parpadeante </BLINK></I></B>

Resultado

Este texto es negrita, cursiva y parpadeante

Explicación

El texto es por tramos negrita, cursiva y parpadeante.

Estilos lógicos

En este caso se definen las situaciones o tipos de frases y estas tomarán la representación más

adecuada a cada caso. Estos estilos son:


<ADDRESS> EjemploSe utilizará para especificar direcciones decorreo electrónico.

<BLOCKQUOTE> Ejemplo

Introduce citas textuales o texto destacado, en

este caso el texto se separará del textocircundante y se ajustará a los márgenesderecho e izquierdo.





<CITE> Ejemplo Indica el titulo de una película o un libro.

<CODE> Ejemplo Código fuente de un lenguaje de programación.

<DFN> Ejemplo Especifica una definición.

<EM> Ejemplo Indicará enfasis.

<KBD> Ejemplo Texto introducido desde el teclado.

<SAMP> Ejemplo Mensajes de estado de la computadora.

<STRIKE> Ejemplo Texto desechado, tachado.

<STRONG> Ejemplo Especificará texto resaltado.

<VAR> Ejemplo Indicará una variable.




Listas

5.6 - Definición de Listas

Las listas en HTML

El lenguaje HTML proporciona un modo sencillo de representar elementos en forma de lista.Dentro de una lista de puede incluir cualquiera de los elementos HTML, e igualmente una lista puedeincluirse dentro de formularios, tablas, etc.

Existen principalmente tres tipos de listas: las listas no ordenadas, las listas ordenadas y las listasde definiciones.

<UL> Listas no ordenadas

Este tipo de lista se usan para enumerar elementos que no tengan un orden definido. Seespecificará con el elemento <UL>, todo lo que se incluya dentro de esta etiqueta y la de cierreformará la lista. Con los elementos <LI> se indicarán cada uno de los componentes de la lista. Elformato es el siguiente:

<UL TYPE = DISK ó CIRCLE ó SQUARE ><LH> Titulo de la lista </LH><LI> Elemento 1 <LI> Elemento 2

. . .<LI> Elemento n

</UL>

Para marcar los distintos elementos de la lista se usarán unos símbolos, que pueden ser un disco

(DISK), un circulo (CIRCLE) ó un cuadrado (SQUARE), seleccionables con el atributo TYPE.

Con la etiqueta <LH> definiremos el titulo de la lista, este es opcional y aparecerá en la partesuperior de esta.

Igualmente es posible definir listas de varios niveles, que será listas anidadas, listas dentro delistas. Y combinar este tipo de lista con las que se explicarán en los proximos apartados.

Ejemplos

http://www2.uca.es/manual-html/listas.htm (1 de 6)30/08/2008 11:59:36 a.m.



Listas

Inst.HTML

<UL ><LH> Titulo </LH><LI> Elemento 1<LI> Elemento 2<LI> Elemento 3</UL>

Resultado

Tituloq Elemento 1q Elemento 2q Elemento 3

Explicación

Este será el caso básico de lista no ordenada. Se podrán incluir tantos elementos como sedeseen y estos podrán ser texto normal, texto resaltado con alguno de los estilos, imágenes,etc ...

Inst.HTML

<UL TYPE=SQUARE><LI> Elemento 1<LI> Elemento 2<UL TYPE=CIRCLE>

<LI> Elemento 3.1<LI> Elemento 3.2

</UL><LI> Elemento 4

</UL>

Resultado

s Elemento 1s Elemento 2

r Elemento 3.1r Elemento 3.2

s Elemento 4

Explicación

Ahora definimos una lista anidada, es decir una lista dentro de una lista, basta con incluir elnuevo elemento UL dentro del elemento UL de la lista original. En este ejemplo tambiénusamos distintos elementos definibles con TYPE, para indicar los componentes de la lista.

<OL> Listas ordenadas

Estas listas serán similares al caso anterior pero en este se usa un número para indicar el orden decada elemento de la lista. El ser ordenada no significa que ordene los elementos alfabéticamente sinoque los elementos guardan un orden que es el número que indexa la lista.




Listas

<OL START = n TYPE = A ó a ó I ó i ó 0 ><LH> Titulo de la lista </LH><LI> Elemento 1 <LI> Elemento 2


</OL>

El punto de comienzo siempre será el 1 si no se indica en START con otro valor de comienzo y eltipo de numeración puede seleccionarse con el atributo TYPE. Sus posibles valores son:

q A : Letras mayúsculas.q a : Letras minúsculas.q I : Número romanos en mayúsculas.q i : Número romanos en minúsculas.q

0 : Números (es por defecto por tanto no hay que indicarlo).

Ejemplos

Inst.HTML

<OL ><LI> Elemento 1<LI> Elemento 2<LI> Elemento 3</OL>

Resultado

1. Elemento 12. Elemento 23. Elemento 3

Explicación

Este será el caso básico de lista ordenada.

Inst.HTML

<OL TYPE=I><LI> Elemento 1<LI> Elemento 2<OL TYPE=a>


</OL><LI> Elemento 4

</OL>




Listas

Resultado

I. Elemento 1II. Elemento 2

a. Elemento 3.1b. Elemento 3.2

III. Elemento 4

Explicación

Ahora definimos una lista anidada y usamos distintos elementos para la numeración de lasopciones.

<DL> Listas de definiciones

En esta lista existirán dos elementos la definición y el termino, se usará principalmente para listas

en las que se incluirán una palabra o frase y su definición (diccionario). El termino aparecerá pegadoen el borde izquierdo y la definición aparecerá ligeramente tabulada a partir del borde izquierdo.

Se puede usar de forma separada la definición y el termino, pudiendo por tanto incluir solodefiniciones o solo términos. El incluir solo términos podría usarse para sangrar el comienzo de unpárrafo.

<DL><LH>Titulo de la lista </LH>

<DT>Termino 1 <DD> Definición 1 <DT>Termino 2 <DD> Definición 2 . . .<DD>Termino N <DT> Definición N

</DL>

El titulo de las lista <LH> como en los casos anteriores es opcional.

Ejemplos

Inst.HTML

<DL ><DT> Coche<DD> Vehiculo de cuatro ruedas<DT> Moto

<DD> Vehiculo de dos ruedas</DL>




Listas

Resultado

CocheVehiculo de cuatro ruedas

MotoVehiculo de dos ruedas

Explicación Como se ve se coloca en una posición la definición y en otra el termino.

Ejemplos

Inst.HTML

<dl><dd><font SIZE=+1><img src="/servicios/iconos/confis.gif" align=middle border=0>Conexión a la Red.</font></A>

<dl><dd><A HREF="/servicios/conecfisica/Normativ.html"><img src="http:// www2.uca.es/iconos1/redstar.gif" align=middle border=0> Normativa deconexión a Red.</A><dd><A HREF="/servicios/conecfisica/software.htm"><img src="http:// www2.uca.es/iconos1/redstar.gif" align=middle border=0> Instalación deSoftware de Comunicaciones.</A><dd><A HREF="/servicios/solicitud.htm"><img src="http://www2.uca.es/ iconos1/redstar.gif" align=middle border=0> Solicitud de Servicios deComunicaciones.</A>

<dd><A HREF="/servicios/conecfisica/proxy.html"><img src="http://www2.uca.es/iconos1/redstar.gif" align=middle border=0> Servidores Proxy.</A>

</dl>

<dd><a href="/servicios/actuali-soft/software.html"><dd><font SIZE=+1><imgsrc="http://www2.uca.es/iconos/icono541.gif" align=middle border=0> Actualizacióndel Software de Comunicaciones.</font></a><p><dd><A NAME="correo"><dd><font SIZE=+1><a HREF="http://www.uca.es/ servicios/correo/correo.htm"><img src="/servicios/iconos/mail.gif" align=middleborder=0> Mensajería Electrónica.</a></font></A>

<dl><dd><A HREF="/servicios/correo/prac-eudora/portada.html"><imgsrc="http://www2.uca.es/iconos1/redstar.gif" align=middle border=0>ManualPráctico de Eudora.</A><dd><A HREF="/servicios/correo/mensaje_institu.html"><img src="http:// www2.uca.es/iconos1/redstar.gif" align=middle border=0>MensajeríaInstitucional.</A>

</dl>

</dl>




Listas

Resultado

Conexión a la Red. Normativa de conexión a Red.

Instalación de Software de Comunicaciones.

Solicitud de Servicios de Comunicaciones.

Servidores Proxy.

Actualización del Software de Comunicaciones.

Mensajería Electrónica. Manual Práctico de Eudora.

Mensajería Institucional.

Explicación

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu, en elque se incluyen tanto imágenes como texto. La lista de definiciones se utiliza para mostrar elmenu de forma correcta con sus correspondientes niveles y subniveles.

Es posible anidar cualquier tipo de lista entre sí, incluso listas de distinto tipo.


http://www.uca.es/servicios/conecfisica/Normativ.html

http://www.uca.es/servicios/conecfisica/software.htm

http://www.uca.es/servicios/solicitud.htm

http://www.uca.es/servicios/conecfisica/proxy.html

http://www.uca.es/servicios/actuali-soft/software.html

http://www.uca.es/servicios/correo/correo.htm

http://www.uca.es/servicios/correo/prac-eudora/portada.html

http://www.uca.es/servicios/correo/mensaje_institu.html



















Hiperenlaces

5.7 - Hiperenlaces

Hiperenlaces

Es la utilidad básica del hipertexto, permite indicar zonas de texto o imágenes que si sonseleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas deldocumento actual.

Para definir un hiperenlace podemos utilizar cualquier elemento HTML, no debe ser textonecesariamente, podemos usar, cabeceras (<Hn>), cualquiera de los estilos, una imagen, etc .... Unhiperenlace igualmente podrá definirse dentro de cualquier elemento HTML: listas, párrafos de texto,

tablas, formularios.

El texto del hiperenlace aparece normalmente resaltado sobre el texto normal, en azul ysubrayado, en el caso de las imágenes, si tienen definido un borde este aparecerá resaltado en colorazul. La mayoría de los navegadores cuando la zona por la que pasa el cursor es sensible, este cambiade aspecto indicándolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsaren esa zona. Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces.

El texto que define el hiperenlace debe ser clarificador sobre el documento al que referenciamos,debemos evitar referencias especificas que hagan al texto poco legible. Igualmente deberá concordarcon el texto del párrafo donde se englobe, se debe evitar el uso de pulse aquí.

Por ejemplo:

Puede encontrar mas información sobre vacas pulsando aquí

se podría sustituir por:

Disponible más información sobre vacas.

El usuario que lea el texto ya sabrá al verlo resaltado que puede pulsar ahí.

<A HREF=...> Hiperenlace

Son los enlaces con documentos externos al actual. En este caso se indicará una URL que definiráel documento al que se accede si se sigue el enlace. La forma de indicarlo será:

<A HREF="URL a la que se accede">Texto del Hiperenlace</A>

http://www2.uca.es/manual-html/enlaces.htm (1 de 5)30/08/2008 11:59:37 a.m.

http://-/?-

http://-/?-



Hiperenlaces

El texto indicado entre las etiquetas de comienzo y de fin se presentará de forma resaltada y en elcaso de seleccionar este texto el documento actual cambiará por el especificado en la URL.

Igualmente se puede indicar una imagen como enlace, en este caso entre las etiquetas delhiperenlace indicamos la inclusión de la imagen, también dentro de la etiqueta del hiperenlace sepueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del textoafectado por el hiperenlace. Un ejemplo sería:

<A HREF="URL a la que se accede"><IMG SRC="Imagen"> y también texto</ A>

En este caso aparecerá la imagen con el borde resaltado para indicar que es un hiperenlace.

Ademas de enlaces con el servicio http podremos utilizar cualquiera de los servicios de internetque se puede expresar en una URL. Es posible por tanto indicar enlaces a servidores FTP, servidoresGOPHER o de NEWS, indicando como URL aquella que identifica al servidor que queremosacceder.

Es importante indicar el nombre completo de la maquina a la que se accede, es decir el nombre yel dominio. Si se indica www, las maquinas de la red local si podrán localizarlo, pero para maquinasexternas la referencia podría ser a otra maquina. Por tanto se debe indicar www2.uca.es para asegurarque es accesible independientemente del lugar desde el que se conecte el cliente.

Utilizaremos los hiperenlaces para dividir de forma conveniente la información. Hay que evitar losdocumentos excesivamente largos, estos se pueden dividir en distintos documentos a los que accederpor hiperenlaces, a partir de un índice.

URL absolutas y relativas

Para definir la URL podemos utilizar direcciones absolutas o relativas. Por direcciones absolutas

entenderemos la URL completa, es decir, http://maquina.dominio/camino/fichero.html. En el casode las relativas todo lo que no pongamos de la URL se tomará de la URL del documento que contieneel hiperenlace, por ejemplo si no indicamos el servidor, se considerará el actual y si solo indicamosun fichero html se considerará que se encuentra en el servidor y directorio del documento que loreferencia.

Una URL relativa comenzará siempre por un nombre de directorio o por un fichero, ya que en estecaso se asume que el servicio y el servidor - (http://maquina.dominio) - es el mismo del documento

actual.

Puede comenzar de alguna de las siguientes formas:




Hiperenlaces

q Por una barra / , que indica que el camino del fichero se especifica desde el directorio raiz delservidor.

q Por dos puntos y una barra ../ , significa subir en la estructura del directorio. Se considerará apartir del directorio anterior.

q Por un nombre de fichero o directorio, considerandose este a partir del directorio actual.

Algunos ejemplos serían:

Ejemplos

Nos encontramos en el documento http://www.uca.es/visita/cadiz.html y en este se encuentran lossiguientes hiperenlaces.

URLrelativa

<A HREF="../internet/internet.html"> ..

URLque seactiva

http://www.uca.es/internet/internet.html

Explicación

En este caso se indica la URL completa, por tanto no es relativa y no se podrá utilizar ningúndato de la posición actual.

URLrelativa

<A HREF="/internet/internet.html"> ..

URLque seactiva


Explicación

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba elhiperenlace: www.uca.es y al comenzar la directorio por / se indica que este se toma desde laraíz del servidor, no siendo valido en este caso ningún dato del directorio actual.

URLrelativa

<A HREF="bahia/cadiz.html"> ...

URLque seactiva

http://www.uca.es/visita/bahia/cadiz.html




Hiperenlaces

Explicación

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra "/".Como comienza con un directorio, se considera que este se encuentra a partir del directoriodonde está el documento actual

URLrela

tiva

<A HREF="bahia.html"> ...

URLque seactiva

http://www.uca.es/visita/bahia.html

Explicación

En este caso solo se indica un fichero HTML, por tanto se considera que este fichero seencuentra en el mismo directorio del documento que los referencia. Considerando por tanto elmismo servidor y el mismo camino, pero distinto directorio.

Es una buena costumbre utilizar direcciones relativas, además de ahorrar escritura, permite que lapágina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces,haciendo por tanto al documento más portable.

Como se vio en el capitulo dedicado a la cabecera de un documento HTML, la etiqueta BASE indica la dirección por defecto en los enlaces, esto tendrá efecto en las URL relativas, caso deindicarse se considerará esta como dirección base y no la actual del documento.

<A NAME=...> Elemento Ancla

Sirve para indicar puntos de un documento que son accesibles directamente. Marcará las distintaszonas de un documento. La forma de indicarlo es:

<A NAME=" Id. del ancla">Texto del ancla</A>

A cada ancla se le dará un nombre distinto que será el que se utilice luego para referenciarlo. Eltexto que define a la etiqueta no tendrá ningún tipo de resalte, y solo se utiliza como punto de destinodel hiperenlace.

La forma de especificar un enlace que acceda a un punto determinado del mismo documento es:

<A HREF="# Id. del ancla">Texto del enlace al ancla</A>

Será un enlace a la zona del documento actual que se había marcado con la etiqueta indicada.También es posible acceder a un ancla de un documento externo de la forma:

<A HREF=" Dirección URL# Id. del ancla">Texto del enlace al ancla</A>




Hiperenlaces

De esta forma se podrá acceder a puntos determinados o secciones de un documento de formadirecta.

La utilidad principal es la creación de índices en documentos largos, al comienzo del documentose especifica el índice con enlaces a las distintas anclas y dentro del documento se indica el comienzode cada apartado con el ancla que lo define.




Imágenes

5.8 - Imágenes

Imágenes en los documentos HTML

Una de las características principales del lenguaje HTML y de la WWW es la introducción deelementos multimedia, en este apartado veremos como introducir gráficos y ficheros de imágenes enun documento HTML.

En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatosgráficos: GIF, JPEG ó XBM. El formato más extendido y practico es el GIF, todos los navegadoresgráficos de la Web soportan este formato, además existen gran cantidad de programas de tratamiento

de gráficos que permiten grabar los gráficos o convertir gráficos a GIF. Este formato, así mismo,utiliza algoritmos de compresión que hacen que sus ficheros sean de corto tamaño y apropiados parasu transmisión por la red.

El formato GIF es más recomendado para iconos, gráficas, ... y el formato JPEG es más útil paraimágenes reales como paisajes, personas, ...

Para poder utilizar otro formato gráfico, necesitará usar un enlace cuyo destino sea el fichero delgráfico. Al seguir el enlace se le pedirá que indique un programa externo que se encargue de mostrarlos ficheros de ese formato gráfico, por lo tanto no pueden insertarse dentro de documentos HTML..

Existe unos casos especiales en las imagenes GIF, que son las imágenes transparentes y las imágenes animadas.

<IMG SRC=...> Inclusión de Imágenes

La etiqueta encargada de mostrar imágenes en HTML es IMG y tiene el siguiente formato:

<IMG SRC="URL de la Imagen" ALT="Texto alternativo a la imagen">

En el punto del fichero HTML en el que queramos que se muestre la imagen incluimos estaetiqueta. Se puede mostrar la imagen, al comienzo del documento, al final o intercalada en el texto.Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTMLcomo listas, tablas o formularios. Esta etiqueta no necesita la etiqueta de fin, ya que el efecto de la

etiqueta no su produce sobre un texto o algún elemento HTML.

El atributo SRC indica el fichero de imagen que se incluirá en el documento. Se indicará elcamino hasta la imagen en formato URL, el fichero de la imagen deberá tener una extensión

http://www2.uca.es/manual-html/imagenes.htm (1 de 7)30/08/2008 11:59:41 a.m.



Imágenes

apropiada a su formato, por ejemplo si es GIF la extensión será .gif , si es JPEG la extensión será . jpg o .jpeg, si no se cumple esto la imagen no se mostrará de forma correcta.

Al definir la imagen como una URL, esta imagen no es necesario que se encuentre en el servidorlocal, pudiendo especificar el camino completo y el servidor donde se encuentra la imagen. En estecaso al igual que en los hiperenlaces es posible indicar direcciones de URL relativas al documentosactual, como se vio en el apartado anterior.

Lo normal es referenciar una imagen que se encuentre en el servidor local, ya que el acceso aimágenes en servidores externos puede ser más lento. Por tanto conviene copiar las imágenes eiconos que se usen al servidor local.

A continuación se explica la utilidad de cada unos de los atributos de la etiqueta IMG.

<IMG ... ALT=...> Texto alternativo

El atributo ALT, indicará un texto alternativo a mostrar si no fue posible mostrar la imagen. Seusa para navegadores que no permitan mostrar imágenes, sean solo texto o tenga inhabilitado elmostrar imágenes. Se recomienda cuando existan en el documento imágenes usadas como botones,para mostrar un texto en vez del botón en navegadores que no puedan mostrar gráficos, de esta formase consigue que todos los usuarios puedan consultar sus páginas.

<IMG .. ALIGN=...> Alineación de la imágen

Indica como se alinea el texto que sigue a la imágen con respecto a esta. Indicará si la primerafrase del texto se colocará en la parte alta de la imágen, TOP, en el punto medio de la imagen,MIDDLE, o en la parte de abajo de la imágen, BOTTOM.

Tambien se pueden utilizar alineaciones un poco más avanzada, TEXTTOP se alinea justo alcomienzo del texto más alto de la línea (TOP se alinea al tamaño del primer carácter de la línea).

ABSMIDDLE, es el centro real de la imagen, con MIDDLE se coloca el texto a partir del puntomedio, con ABSMIDDLE el texto aparece centrado con la imagen. ABSBOTTOM coloca el texto justo al final de la imagen. Se recomienda que se usen estos últimos al ser más precisa la alineación,aunque solo son validos para los navegadores más avanzados.

Ejemplos

Inst.

HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=TOP><B>Numero de Telefono<B>. En este

apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o preguntaque hacer sobre este manual.


http://-/?-

http://-/?-



Imágenes

Resultado

Numero de Teléfono. En este apartado se indica el número de teléfono

que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Explicación Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imágen.

Inst.HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=MIDDLE><B>Numero de Telefono<B>. En esteapartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o preguntaque hacer sobre este manual.

Resultado Numero de Teléfono. En este apartado se indica el número de teléfono


Explicación

En este caso el texto está alineado en la parte central de la imágen.

Inst.

HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=BOTTOM><B>Numero de Telefono<B>. En

este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda opregunta que hacer sobre este manual.

Resultado

Numero de Teléfono. En este apartado se indica el número de teléfonoque puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Explicación

El texto está alineado en la parte baja de la imágen.

Inst.HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=MIDDLE><IMG SRC="/iconos1/q__mark2.gif">

Resultado




Imágenes

Explicación

También es posible alinear imágenes entre sí y imágenes respecto a otros elementos HTML

En los casos anteriores solo se especifica donde se coloca la primera línea del texto y el resto seincluyen debajo de la imágen quedando un efecto muy feo cuando el texto tiene más de una línea.Existen otras alineaciones que incluirán a la imágen insertada dentro del texto. La imágen puedequedar a la izquierda, LEFT o a la derecha, RIGHT. No se podrá utilizar en combinación con lasanteriores alineaciones.

Ejemplos

Inst.HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=LEFT><B>Numero de Telefono<B>. En esteapartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o preguntaque hacer sobre este manual.

Resultado

Numero de Telefono. En este apartado se indica el número de teléfonoque puede utilizar si tiene cualquier duda o pregunta que hacer sobreeste manual.

Explicación

En este caso aparece la imágen insertada en el texto, de forma que esta se integra en párrafoque la rodea, al contrario que en los casos anteriores

Inst.HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=RIGHT><B>Numero de Telefono<B>. En esteapartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o preguntaque hacer sobre este manual.

Resultado

Numero de Telefono. En este apartado se indica el número de teléfonoque puede utilizar si tiene cualquier duda o pregunta que hacer sobreeste manual.

Explicación

En este ejemplo aparece la imágen alineada a la derecha.

<IMG .. BODER=...> Borde de la imágen

Indicará el tamaño del borde de la imagen, si la imagen se encuentra dentro de un hiperenlace el

borde de esta será del color apropiado para indicarlo, en caso contrario el borde será invisible. Si sedesea que no se muestre el borde cuando la imagen sea un enlace se usará BORDER=0.




Imágenes

Ejemplos

Inst.HTML

<A HREF="imagenes.htm"><IMG SRC="/iconos1/q_mark3.gif"></A>

Resultado

Explicación

Como se ve si no se indica nada se muestra un borde entorno a la imágen que activa elhiperenlace.

Inst.HTML

<A HREF="imagenes.htm"><IMG SRC="/iconos1/q_mark3.gif BORDER=0"></A>

Resul

tado

Explicación

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imágen, que sirvede hiperenlace.

<IMG .. HEIGHT=... WIDTH=...> Tamaño de la imágen

Es posible cambiar el tamaño de la imágen de forma que pueda ajustarse como se desee, pudiendoampliar o disminuir este.

El atributo HEIGHT Determina el alto de la imagen a mostrar, se especifica en puntos de lapantalla (pixeles) o en tanto por ciento sobre el tamaño del documento. En caso de que la imagen seamayor o menor se escalará a este tamaño.

El atributo WIDTH indica el ancho al que se mostrará la imagen, escalándola a este tamaño.También se expresará en pixeles o en tanto por ciento.

No es necesario indicar el ancho y el alto, se puede especificar solo uno de las dimensiones,ajustándose la otra a la proporción de la imagen. Es recomendable indicar solo uno de estosparámetros para que la imágen no se muestre deformada. Igualmente se debe usar el valor relativo entanto por ciento si se desea que la imágen guarde siempre una misma proporción con respecto altexto. Si se desea mostrar dos imágenes y queremos que una ocupe un cuarto de la pantalla y la otrael espacio restante, se indica en una el ancho (WIDTH) del 25% y en la otra del 74%, no indicandoen ningún caso el alto (HEIGHT), de esta forma independientemente como sea el tamaño de laventana del navegador e independientemente del monitor del cliente, siempre se podrán mostrarambas imágenes en la misma línea.




Imágenes

Ejemplos

Inst.HTML

<IMG SRC="/iconos1/world.gif" WIDTH=100 HEIGHT=25>

Resultado

Explicación

Si no se indican bien ambos valores, teniendo en cuenta la proporción de la imágen esta puedeaparecer deformada.

Inst.HTML

<IMG SRC="/iconos1/world.gif" WIDTH=75>

Resultado

Explicación

En este se ve como al indicar uno solo de los parámetros, el otro se ajusta apropiadamente a laproporción de la imágen.

Inst.HTML

<IMG SRC="imagenes/obra_ani.gif" ALIGN=MIDDLE WIDTH=9%> <IMG SRC="/ barras1/constr.gif" WIDTH=89%>

Resultado

Explica

ción

Si varia el tamaño de la ventana de su navegador, comprobará que el tamaño de las imágenes

cambia, pero guardan la misma proporción, el obrero ocupa un 9% de la ventana y la barra el86% restante. Y siempre se mostrarán ambas imágenes en la misma línea.

<IMG .. HSPACE=... VSPACE=...> Espaciado de separación de la imágen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto ocualquier otro elemento circundante. Se especificará en puntos. Es similar a BORDER pero en este

caso el margen no se destaca en el caso de los hiperenlaces y además es posible indicarseparadamente el margen horizontal y el vertical. Con el atributo VSPACE se indica el margenvertical.




Imágenes

Ejemplos

Inst.HTML

<IMG SRC="/iconos1/pr_star.gif"><IMG SRC="/iconos1/or__star.gif"><IMG SRC="/iconos1/pr_star.gif" HSPACE=100><IMG SRC="/iconos1/or__star.gif">

Resultado

Explicación

Como se ve en el segundo caso las imágenes aparecen separadas 100 puntos. El espaciado esigual a la derecha que a la izquierda, por tanto también aparece la imagen separada del borde.




Creación de una imagen GIF transparente


En una imagen GIF se puede definir un único color transparente, de forma que en la parte de laimágen que contenía ese color se verá el fondo definido para la página HTML.

Para seleccionar el color que queremos hacer transparente utilizaremos el programa Lview .

Antes de poder definir un color transparente debemos guardar la imagen como GIF89, ya que solo sepuede definir en este tipo de imagenes GIF. Luego seleccionamos Options -> Background Color, siesta opción no es accesible, entonces es que la imagen no se encuentra en un formato valido, una vezhecho esto nos aparecerá la siguiente pantalla:

Donde podremos elegir el color que deseamos hacer transparente. Una vez seleccionado el color

pulsaremosOK

y grabaremos la imágen.

La forma más comoda de seleccionar el color transparente es la opción Dropper , al

activarla nos permitirá seleccionar el color transparente directamente pulsando sobre un color de la

http://www2.uca.es/manual-html/giftrans.htm (1 de 2)30/08/2008 11:59:44 a.m.




imágen.

Sí no aparece esta ventana entonces tendrá que guardar la imágen como GIF89, y volver a cargar laimágen otra vez a fin de que se produzca el cambio de formato.

http://www2.uca.es/manual-html/giftrans.htm (2 de 2)30/08/2008 11:59:44 a.m.



Imágenes Sensibles

5.9 - Imágenes Sensibles

Imágenes Sensibles

Una de las características principales del lenguaje HTML es la posibilidad de crear imágenessensibles o mapeadas, que son imágenes en las que se definen diversas zonas que activan distintoshiperenlaces, al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que ladefine. La imágen se dividirá en distintas áreas que definirán documentos a los que es posibleacceder.

Para crear una imagen sensible será necesaria la especificación de las distintas áreas de la imagen

y los enlaces que activaran cada una de ellas. Esto se puede hacer a mano indicando las coordenadaso bien lo normal es utilizar algún programa. Existen programas que permiten la definición de lasimágenes sensibles, en estos se presentará la imagen en pantalla y mediante un puntero se podrán irindicando las distintas zonas. Estas zonas podrán ser: rectángulo, circulo, línea poligonal o un punto.A cada una de estas zonas le asignamos una URL que será la que se active cuando se pulse en esazona determinada. Con este programa crearemos un fichero con la extensión .map que será el quedefina el mapa de la imagen.

El contenido normal de este tipo de ficheros serán líneas del estilo:

figura_geométrica URL coord1 coord2 ... coordn

Donde figura_geométrica podrá ser una de:

q default: Indicará la acción a realizar si se pulsa en un lugar no definido en el mapeado.

q circle: Definirá un circulo. En un servidor del NCSA las coordenadas se definen el centro del

circulo y un punto externo (que es el caso de nuestro servidor), en uno del CERN se definirá elcentro del circulo y el radio.

q poly: Una línea poligonal de a lo sumo 100 vértices. Se definirá tantas coordenadas comovértices formen la línea poligonal y no será necesario cerrar la figura.

q rect: Definirá un rectángulo. Las coordenadas indicaremos el vértice de la esquina superiorizquierda y la esquina inferior derecha.

q point: Indicará un punto. Si en la figura se definen diversos puntos se activará el enlace delpunto más cercano al lugar donde se pulso en la imagen.

http://www2.uca.es/manual-html/imgsensi.htm (1 de 4)30/08/2008 11:59:45 a.m.



Imágenes Sensibles

La URL del enlace podrá ser una local, que debe empezar desde el directorio raíz, no vale relativa,o bien indicar la URL completa.

Las coordenadas serán pares x e y separados por comas.

Hay que tener en cuenta que las figuras que definen las zonas no deben solaparse ya que un punto

de las imágenes no puede activar dos enlaces. En caso que se solapen se utilizará la que estuvieradefinida en primer lugar en el fichero del mapa.

Si se utiliza la directiva point, no tiene sentido definir la URL por defecto, default, ya que siempreel lugar donde se pulse estará más próximo a un punto. En otro caso siempre será necesario indicar ladirección por defecto, salvo que el mapeado cubra toda la imagen, ya que si no se define en caso depulsar en un lugar sin mapear producirá un error.

Existen navegadores, los más antiguos, y programas de indexación, los robots de busqueda más

extendidos (lycos, excite, etc ...) que no pueden seguir los enlaces que se encuentran en una imagensensible. Por tanto se recomienda incluir en formato texto en la parte baja de la imágen los enlacesque se activan con la imagen sensible. De esta forma los documentos enlazados se pueden activar delas dos maneras.

Ejemplo

ISMAP como referenciar la imágen sensible

Una vez creado el fichero que mapeará la imagen solo queda referenciarlo en el documentoHTML. Para ello debemos definir la imagen y el enlace que se efectuará. Existe dos formas:

q En los antiguos servidores que no permiten soporte interno a imágenes sensibles:

<A HREF="http://www2.uca.es/cgi-bin/imagemap/camino_hasta- _el_mapa/fichero_mapa.map"><IMG SRC="camino_imagen_sensible.gif" ISMAP></A>

En el primer caso la parte primera define el programa que trata la imagen sensible http://www2.uca.es/cgi-bin/imagemap, la segunda parte especifica el fichero que mapea la imagen / camino_hasta_el_mapa/fichero_mapa.map. Dentro del hiperenlace se incluye la referencia de laimagen con el atributo ISMAP para indicar que se trata de una imagen sensible.

q En los servidores que poseen soporte interno de imágenes sensibles:

En este caso no es necesario poner el camino al programa imagemap sino solo la referencia alfichero del mapa. El mismo gráfico se referencia así:

<A HREF="/camino_hasta_el_mapa/fichero_mapa.map"><IMG




Imágenes Sensibles

SRC="camino_imagen_sensible.gif" ISMAP></A>

El atributo ISMAP en la imagen es importante al igual que la extensión .map del fichero quemapea la imagen.

El segundo caso es más rápido ya que es el servidor el que se encarga de determinar las distintaszonas del mapa e indicar el enlace que se debe seguir, en lugar de llamar al programa imagemap paraque lo trate. Dependiendo del servidor instalado usaremos uno u otro método, en nuestro casousaremos el segundo.

Ejemplo

Imágenes sensibles definidas desde el cliente

En el caso anterior la interpretación del mapa de la imagen sensible correspondía al servidor, portanto cuando el usuario pulsa sobre una imágen sensible, las coordenadas se pasan al servidor y estese encarga de comprobar usando el fichero que mapeaba la imágen. Por tanto para activar un enlaceharía falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace quese activa, lo cual hace la consulta un poco más lenta. Y además a priori no es posible saber que zonasson sensibles y cuales no ni tampoco que enlace se activa en cada zona.

Para solucionar esto se introdujo la posibilidad de crear imágenes sensibles definidas desde el

cliente, de esta forma es el cliente (su navegador de la WWW) el que interpreta la imágen sensible ypuede mostrar los enlaces que se activan en cada zona y que zonas son sensibles y cuales no. En estecaso no es necesario indicar el documento por defecto ya que solo se podrán activar las zonas útilesde la imágen.

Existe una nueva etiqueta HTML que permite definir estas imágenes sensibles interpretadas desdeel cliente, su formato es el siguiente:

<MAP NAME=" nombre">

<AREA SHAPE=RECT COORDS=" x11, y11, x12, y12" href="URL"><AREA SHAPE=RECT COORDS=" x21, y21, x22, y22" href="URL">

...<AREA SHAPE=RECT COORDS=" xn1, yn1, xn2, yn2" href="URL">

</MAP>

Cada una de las líneas con la etiqueta AREA, definen una zona sensible. Actualmente solo es

posible definir zonas sensibles delimitadas por rectángulos, no pudiendo definir otras. Con el atributoCOORDS se definen las coordenadas de la zona sensible, estas serán la coordenada del primervértice xi1, yi1 y la coordenada del vértice opuesto xi2, yi2. La etiqueta HREF indica la URL que seactiva con esta zona sensible.




Imágenes Sensibles

La forma de referenciarlo es utilizando el atributo USEMAP, indicando el mapa a usar, cuando sedefina la imágen la forma será:

<IMG SRC="..." USEMAP="#nombre" >

Como nombre utilizaremos el nombre que se le dio al mapa su definición.

Esta etiqueta solo es soportada por los navegadores más modernos, Internet Explorer de Microsoft y el Netscape 2.0, por tanto los navegadores antiguos no podrían interpretar este tipo de mapas, sinembargo es posible utilizar ambas formas de definición a la vez, permitiendo que el mapa seainterpretado por todos los navegadores la forma será:

<A HREF="mapa.map"><IMG SRC="..." ISMAP USEMAP="#nombre" ></A>

De esta forma si el navegador entiende la etiqueta USEMAP lo interpreta como un mapa sensibledefinido en el cliente, en caso contrario se interpreta como un mapa sensible normal y que debe serinterpretado por el servidor.

Ejemplo




Imagenes

Ejemplo de Imágen Sensible

Creación de una Imágen sensible

En este apartado se explicará paso a paso, la creación de una imágen sensible. Para ello se utilizaráel programa más básico para ello, mapedit, que se incluye en el Paquete Básico para la Creación de documentos HTML

Al iniciar el programa seleccionaremos File -> Open/Create, y aparecerá la ventana que semuestra en el grafico adjunto,. En esta indicaremos el nombre del fichero que definirá el mapa de laimágen ( Map File), que deberá tener la extensión .map, este será el fichero que habrá que transferir al

servidor para referenciar la imágen sensible, lo llameremos ejemplo.map, en el apartado siguienteindicaremos el fichero GIF sobre el que se aplicará la imágen sensible (GIF Filename).

Una vez cargada la imágen obtenemos la siguiente pantalla:

En la que se muestra la imágen y sobre la que será posible ya definir las zonas sensibles de la

imágen. en el menú Tools, estan expresadas todas las figuras que se pueden utilizar en la imágen,estas son: Polygon, para una línea poligonal, Circle, para definir un circulo y Rectangle, define unrectángulo.

http://www2.uca.es/manual-html/ejimgmap.htm (1 de 4)30/08/2008 11:59:48 a.m.



Imagenes

Para seleccionar cada una de las zonas del dibujo, seleccionaremos las figura correspondiente, ennuestro caso será Rectangle, una vez hecho esto nos situaremos en el primer vertice y pulsaremos elbotón izquierdo del ratón, fijando el primer vertice, luego arrastraremos hasta situarnos en el verticeopuesto, y ahí pulsaremos el botón derecho del ratón y obtendremos la siguiente ventana en la quenos será posible introducir al URL que activará esta zona.

Definir una linea poligonal será similar, pero en este caso marcaremos con el botón izquierdo del

ratón todos los puntos que forman el polígono y cuando lleguemos a su fin pulsaremos el botónderecho del ratón y podremos introducir la URL, la línea poligonal no será necesario terminarla,uniendose automáticamente el primer y último vertice.

Una vez que definamos todas las zonas sensibles de la imágen, podemos utilizar la opción Test

+Edit , que nos permirá probar y en su caso editar las distintas zonas de la imágen, obteniendo unmuestra de la zona activa como se ve en la imágen:




Imagenes

La opción para definir la URL por defecto, es decir, la que se activará cuando no se pulse sobreninguna de las zonas definidas será File -> Edit Default URL.

Una vez definidas todas las zonas de la imágen y la URL por defecto, podremos grabar el mapa dela imágen sensible con File -> Save.

Obteniendo una fichero .map con el siguiente contenido:

default http://www2.uca.es/manual-html/prueba/noimagen.htm

rect http://www2.uca.es/manual-html/prueba/boton1.htm 8,10 61,63



Este fichero se transferirá al servidor y como se vió en con anterioridad existirán dos formas dereferenciarlo:

Imágen sensible interpretada por el servidor

Inst.HTML

<A HREF="ejemplo.map"><IMG SRC="imgmap.gif" ISMAP> </A>

Resultado

Explicación

Como se ve pulsando en las distintas zonas de la imágen se activan los enlacescorrespondientes, pero no hay forma de saber que zonas son sensibles y que enlaces seactivan en cada zona.

Imágen sensible interpretada por el cliente


http://www2.uca.es/manual-html/ejemplo.map



Imagenes

Inst.HTML

<MAP NAME="ejemplo"><AREA SHAPE=RECT COORDS="8,10,61,63" HREF="http://www2.uca.es/manual-html/ prueba/boton1.htm" ><AREA SHAPE=RECT COORDS="62,10,134,36" HREF="http://www2.uca.es/manual-html/ prueba/boton2.htm" ><AREA SHAPE=RECT COORDS="62,36,134,64 " HREF="http://www2.uca.es/manual-html/prueba/boton3.htm" >

</MAP>

<CENTER><A HREF="ejemplo.map"><IMG SRC="imgmap.gif" ISMAP USEMAP="#ejemplo"> </A><P>[ <A HREF="http://www2.uca.es/manual-html/prueba/boton1.htm">boton 1 </A> |<A HREF="http://www2.uca.es/manual-html/prueba/boton2.htm">boton 2 </A> |<A HREF="http://www2.uca.es/manual-html/prueba/boton3.htm">boton 3 </A>]</CENTER>

Resultado

[boton 1 | boton 2 | boton 3]

Explicación

En este caso la definición es más larga, pero si su navegador es el Internet Explorer oel Netscape 2.0, notará que este es capaz de identificar las zonas sensibles de laimágen y muestra en la parte inferior de la ventana los enlaces que se activan cuandose pulsa en cada zona.Ademas es más rápida la identificación de que enlace se activa en cada zona.En este caso no hay que definir URL por defecto ya que siempre se pulsará en una delas zonas definidas.En la parte de abajo de la imágen se han incluido los enlaces que activa en formato

texto para el caso de que el navegador no soporte imágenes sensibles (o sea un robotde busqueda).




Insercción de elementos multimedia

5.10 - Inserción de elementos multimedia

¿ Multimedia ?

Como se ha explicado hasta ahora las posibilidades multimedia del lenguaje HTML se limita ainsertar imágenes dentro de un texto, mostrar un fondo en el documentos y modificar los colores quepresentarán los distintos textos. Con las instrucciones básicas de HTML que hemos visto hasta ahoraesto es lo máximo que se puede conseguir, la posibilidad de mostrar vídeo o sonido en un documentoHTML esta limitada a la capacidad y a la configuración del navegador.

La forma básica de incluir un fichero de un formato no reconocido por el navegador es incluirlo en

un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a unaaplicación externa que trate este tipo de ficheros. El navegador tendrá definida una lista aplicacionesque trabajarán con los formatos más comunes de fichero de vídeo, audio o imágenes. Esta opción espoco operativa ya que no podrían incluirse en el documento actual.

El Internet Explorer de Microsoft incluye una serie de etiquetas y atributos que permiten el uso deelementos multimedia, pero no es estándar y se puede asegurar que no será posible verlos enmaquinas distintas a los PC con windows, ni en navegadores distintos a este.

Otra aproximación la ha realizado Netscape con la inclusión de los Plug-ins, estos son programasque se añaden al navegador de Netscape versión 2.0 y permiten tratar diversos tipos de ficheros, deesta forma podrá insertarse estos tipos de ficheros dentro de una página HTML, permitiendo mostrarvídeo en distintos formatos (mpeg, avi, mov), interpretar sonido, en varios formatos (au, mid, ),incluir ficheros de Adobe Acrobat (pdf), mostrar ficheros VRML, etc... El principal problema es queestos plug-in no son estándar ni están realizados por el mismo fabricante, ni son todos de libredistribución, y además solo son validos hasta ahora en PC´s con windows. Además la correcta visióndel documento dependerá de que el usuario disponga del plug-in correspondiente instalado. En laúltima versión de Netscape (3.0 aunque todavía es beta), se incluyen por defecto plug-in´s para audio,vídeo y VRML, por lo tanto cuando se extienda el uso de este navegador se podría asegurar lareproducción de este tipo de ficheros.

Extensiones Multimedia de Internet Explorer

El Internet Explorer de Microsoft permite mostrar vídeo en formato AVI y reproducir sonido, deuna forma sencilla, para eso añade una nueva etiqueta y un atributo a la etiqueta de mostrar imágenes.

<BGSOUND ...> Reproducción de audio

<BGSOUND SRC=" fichero de sonido" LOOP= n ó INFINITE>

http://www2.uca.es/manual-html/multimed.htm (1 de 3)30/08/2008 11:59:49 a.m.




Incluiremos una única vez esta etiqueta en el fichero que deseemos tenga música de fondo, en elatributo SRC se indicará el fichero de audio que se debe reproducir, siendo la URL hasta este fichero.El fichero podrá ser de formato .wav, .au o MIDI (.mid). El atributo LOOP indica cuantas veces seejecutará la pieza musical, podrá indicarse un número o INFINITE que indicará de forma indefinida.

<IMG DYNSRC ...> Reproducción de vídeo

<IMG DYNSRC=" fichero de sonido" LOOP= n ó INFINITE CONTROLS START= FILEOPENó MOUSEOVER>

En este caso es un nuevo atributo para la etiqueta IMG, caso de existir este, en vez de mostrar unaimágen mostrará un vídeo en formato AVI (Vídeo for Windows), se puede utilizar todas los atributosnormales de IMG, pudiendo usar las distintas alineaciones y colocaciones respecto al texto, ademásse podrá variar el tamaño del vídeo con los atributos HEIGHT y WIDTH.

Se añaden otros atributos que solo se pueden aplicar al vídeo, el atributo IMGSRC indica la URLdel fichero que se mostrará, el atributo LOOP indica el número de veces que se mostrará el vídeo, elatributo CONTROLS indicará si se mostrarán los botones de control, que permitirán para, volver areproducir, rebobinar, .... El atributo START indica si la secuencia de vídeo empezará al abrir elfichero (FILEOPEN) o cuando pase el cursor del ratón encima (MOUSEOVER).

De no poder mostrar el vídeo por tratarse de otro navegador (por ejemplo Netscape), se podrá

indicar una imágen que se muestre de manera alternativa, incluyendo el atributo SRC.

Plug-in's

Plug-in es un programa que extiende las capacidades del navegador de Netscape en un modoespecifico, dado por ejemplo la capacidad de mostrar vídeo, audio, ficheros de un determinadoformato (ficheros PDF, presentaciones de ASAP, fichero VRML, etc ...).

No existe actualmente un conjunto estándar de plug-in´s para cada tipo de ficheros, sino queexisten diversas aplicaciones, realizadas por diversos fabricantes, y no todas de libre distribución. Sepuede asegurar que todas las aplicaciones serán compatibles y si por ejemplo se referencia un ficherode sonido en formato .wav en su página, este podrá ser oído por todos aquellos que tengan un plug-inpara este tipo de ficheros.

Para que un fichero multimedia que es incluido en una página sea visible por el usuario debecumplir dos condiciones: la primera es que posea el navegador de Netscape en su versión 2.0 y la

segunda es que tenga el plug-in correspondiente que trata el fichero deseado. Por tanto se recomiendaun uso moderado de los plug-in´s utilizando ficheros que sean de formatos comunes y un usocomplementario en una página, ya que muchos usuarios no podrán verlo. Es aconsejable incluir unenlace en el que se referencie el fichero, de esta forma un usuario podrá seguir el enlace y ver el





fichero en un visualizador externo si lo posee.

Existe una instrucción que permite incluir cualquier tipo de archivo dentro de un documentosHTML, pero se verá en el próximo apartado.

<EMBED> Insertar Ficheros

Esta instrucción permite la inclusión de cualquier tipo de fichero en la posición del documentoHTML donde se especifique. Su funcionalidad es similar a la IMG para incluir imágenes. En estecaso para que pueda mostrase el fichero deberá tener el plug-in adecuado que lo trata.


<EMBED SRC="URL del fichero" WIDTH= n ó n% HEIGHT= n ó n%>

En el atributo SRC se indicará el fichero que se desea mostrar, y los atributos WIDTH y HEIGHT se indicará el tamaño que tendrá en objeto insertado, siendo estos opcionales.

El fichero que podrá ser un fichero de vídeo, audio, imágen de algún tipo distinto a las pordefecto, fichero de presentaciones, etc... solo podrá ser visto por el usuario si este posee el plug-incorrespondiente que trata ese tipo de ficheros, en caso contrario mostrará un mensaje de errorindicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma

correcta.

En el caso que se pueda mostrar el plug-in se incluirá en la zona del documento que se indicópudiendo así de este modo insertar dentro de un documento HTML películas de vídeo o incluirsonido de fondo.

Se recomienda un uso limitado de esta posibilidad, ya que existirán muchas personas que noposean el Netscape 2.0, y no posean el plug-in correspondiente, y por lo tanto no podrán ver todo elesplendor de su página.


http://www2.uca.es/manual-html/imagenes.html




Tablas

5.11 - TABLAS

Introducción

Permite la representación de datos por filas y columnas, en forma tabular. La definición es muyflexible indicando solo los elementos que forman cada fila y columna, calculándose de formaautomática el tamaño que deben tener las celdas. En una tabla podemos introducir todo tipo deelementos del lenguaje HTML como imagenes, enlaces, texto, listas, cabeceras, formularios, etc.

No es necesario definir inicialmente el número de filas o columnas ya que estas se calculan segúnse va definiendo la tabla. En el caso que una fila tenga más columnas que otra, en las otras filas las

columnas se representarán vacias, no siendo necesario que todas las filas sean iguales.

<TABLE> Definición de la Tabla

Para definir una tabla usaremos la etiqueta <TABLE>, que tiene el siguiente formato:

<TABLE BORDER=" tamaño del borde" > ... Definición de la tabla ...

</TABLE>

En la etiqueta inicial TABLE definiremos los atributos que afectarán a toda la tabla, todos losatributos son opcionales. Todo lo que se incluya dentro de la instrucción de tabla se considerará comotal, pudiendo definir tablas anidadas (tablas dentro de tablas).

Ejemplo de tabla 1

Puede presentar los siguientes atributos:

q BORDER =n

Si se especifica se dibujará un borde alrededor de la tabla y separanado los distintos campos quepresenta. Indicaremos un número que especificará el tamaño del borde, por defecto será 0, es decir,no se dibujará ningún borde. Aunque no se dibuje el borde sí se mantendrá el espaciado los elementosde la tabla.

Ejemplo de tabla 4

http://www2.uca.es/manual-html/tablas.htm (1 de 5)30/08/2008 11:59:51 a.m.



Tablas

Ejemplo de tabla 5

q CELLSPACING=n

Indica el espacio que debe existir entre las distintas celdas de la tabla. Por defecto será 2. Si seindica 0 no habrá ningún espacio entre las celdas.

q CELLPADDING=n

Es la cantidad de espacio entre el borde de la celda y el contenido de esta, por defecto es 1. Si seindica 0 las celdas aparecerán sin separación.

Ejemplo de tabla 6

q WIDTH=valor o porcentaje%:

Será el ancho de la tabla, se puede indicar como valor absoluto o como porcentaje del ancho deldocumento. En el primer caso se definirá en puntos y en el segundo en función del tamaño deldocumento (tamaño de la ventana del visualizador). Se recomienda utilizar tamaños de tabla enporcentaje del documento, ya que de esta forma la tabla queda perfectamente ajustada para cualquiertamaño del documento.

Ejemplo de tabla 9

q HEIGHT=valor o porcentaje%

Definirá el alto de la tabla, a igual que WIDTH, se puede indicar en valor absoluto o enporcentaje. En este caso es más recomendado en valor absoluto ya que el alto es más dificil quepueda coincir con el tamaño de la ventana.

Dentro de la instrucción de la tabla se incluirán los diversas etiquetas que defininen el contenido de latabla.

<CAPTION> Titulo de la tabla

Especifica el titulo de la tabla, este se mostrará resaltado en la parte superior externa de la tabla.Siempre se mostrará centrado horizontalmente.

<CAPTION ALIGN=TOP|BOTTOM>Titulo de la tabla</CAPTION >

Con el atributo ALIGN indicaremos si el titulo debe aparecer arriba (TOP) o debajo (BOTTOM)de la tabla.




Tablas

<TR> Fila de la tabla

Definirá cada una de las filas de la tabla y especificará los parámetros que afectarán a todas lasceldas de la fila. Por cada elemento TR que se incluya se creará una fila de la tabla. No es necesarioindicar la etiqueta de cierre </TR>. En caso de tablas anidadas será necesario incluir la etiqueta decierre.

<TR ALIGN= LEFT ó CENTER ó RIGHT VALIGN= TOP ó MIDDLE ó BOTTOM >

Se podrá especificar por defecto la alineación que tendrán los elementos dentro de las celdas.

q ALIGN = LEFT ó CENTER ó RIGHT

Indica la alineación del elemento dentro de la celda, en este caso afectará a todos los valoressituados en la fila actual, tambien se podrá indicar individualmente en los elementos TD. Puede tomaruno de los siguientes valores:

s LEFT: Alineación a la izquierda de la celda. Este el valor que se toma pordefecto

s RIGHT: Alineación a la derecha.s CENTER: Indicará centrado.

q VALIGN = TOP ó MIDDLE ó BOTTOM:

Indicará la alineación vertical del dato dentro de la celda. Se podrá especificar donde se colocaránlos datos dentro de la celda. Afectarán a toda la fila. Los valores que puede tomar son:

s TOP: Parte superior de la celda.s MIDDLE: Centrado verticalmente dentro de la celda.s BOTTOM: En la parte baja de la celda.

q BGCOLOR:

Indicará el color de fondo que tendrán todas las celda de la fila de la tabla. El formato para definir los colores es el mismo al que se usa para los atributos de BODY. Esta etiqueta solo es valida para el

Internet Explorer de Microsoft y el Netscape 3.0 o superior.

Ejemplo de tabla 10

<TH> y <TD> Una celda de la tabla


http://-/?-

http://-/?-



http://-/?-

http://-/?-



Tablas

Define cada una de las celdas de una fila de la tabla, TH se usará para definir una celda de tipocabecera, en este caso se mostrarán destacados en negrita y TD para definir una celda de datos. Estoselementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila.Existirá una columna por cada elemento TD ó TH que se defina. Aunque se puede indicar la etiquetade cierre, no es necesario al tomarse implicitamente. Utilizaremos los elementos TH para los titulosde las filas o columnas y los elementos TD para los datos.

<TH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP |MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamaño BGCOLOR= color ROWSPAN=“ Filas

que debe contener la celda” COLSPAN= “Columnas que ocupa la celda” NOWRAP >

<TD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE |BOTTOM ) WIDTH=Tamaño BGCOLOR= color ROWSPAN=“ Filas que debe contener la

columna” COLSPAN= “Columnas que ocupa la celda” NOWRAP>

Ejemplo de tabla 3

Pueden presentar los siguientes atributos:

q ALIGN:

Indica la alineación horizontal del dato dentro de la celda, se especificará individualmente paracada una de las celdas. Su significado es igual que el expresado para la etiqueta TR.

Ejemplo de tabla 7

q VALIGN:

Indicará la alineación vertical del dato dentro de la celda. Se especifica individualmente para cadacelda, el formato es el mismo que el expresado para TR.

Ejemplo de tabla 8

q WIDTH:

Especifica el ancho que tendra la columna de la tabla, se puede especificar eln valor absoluto, enpuntos de la pantalla o en tanto por ciento del tamaño de la tabla.

q

BGCOLOR:

Indicará el color de fondo que tendrá la celda de la tabla. El color hay que indicarloindependientemente para cada una de las celdas de la columna. El formato para definir los colores es


http://-/?-

http://-/?-



Tablas

el mismo al que se usa para los atributos de BODY. Esta etiqueta solo es valida para el Internet

Explorer de Microsoft y el Netscape 3.0 o superior.

Ejemplo de tabla 10

q ROWSPAN:

Indicará el número de filas que ocupará está celda en la misma fila. En este caso la celda seexpandirá ocupando tantas celdas de la tabla inicial como se especifique. Esto permite definir porejemplo celdas de cabecera que afecten a varias celdas de la tabla, ó bien, crear una fila que ocupentoda la tabla.

Ejemplo de tabla 2

q COLSPAN:

Indicará el número de columnas que ocupará la celda actual, obtendremos una celda que ocupavarias columnas. Igual que el anterior pero para el caso de las columnas.

Ejemplo de tabla 2

q NOWRAP:

Se usará para que no se divida la línea por defecto. Si la usamos las líneas de texto no se dividirándentro de la celda en varias líneas. Por tanto si la linea es muy larga la columna de la tabla será tanancha como la línea, solo se dividirá si se usa el elemento.






Ejemplos de Tablas

Ejemplos de Tablas

Una Tabla Simple:

1 2 3

4 5 6

<TABLE BORDER><TR>

<TD>1 <TD> 2 <TD> 3<TR>

<TD>4 <TD> 5 <TD> 6</TABLE>

Demostración de TH, COLSPAN y ROWSPAN:

Numeros

Num 1 2 34 5 6

<TABLE BORDER><TR>

<TD><TH COLSPAN=3>Numeros<TR>

<TH ROWSPAN=2>Num<TD>1 <TD> 2 <TD> 3

<TR><TD>4 <TD> 5 <TD> 6</TABLE>

Demostración de Multiples Cabeceras:

Datos1 Datos2

Datos1.1 Datos1.2 Datos2.1 Datos2.21 2 3 4

5 6 7 8

http://www2.uca.es/manual-html/ejemptab.htm (1 de 7)30/08/2008 11:59:53 a.m.



Ejemplos de Tablas

<TABLE BORDER><TR>

<TH COLSPAN=2>Datos1 </TH><TH COLSPAN=2>Datos2 </TH></TR><TR>

<TH>Datos1.1 </TH><TH>Datos1.2 </TH><TH>Datos2.1 </TH><TH>Datos2.2 </

TH></TR><TR>

<TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR><TR>

<TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD></TR>

</TABLE>

Tabla sin Borde:

1 2 3

4 5 6

<TABLE><TR>

<TD>1 <TD> 2 <TD> 3<TR>


Tabla con Borde=15:

1 2 3

4 5 6

<TABLE BORDER=15><TR>

<TD>1 <TD> 2 <TD> 3<TR>





Ejemplos de Tablas

Ejemplos con CELLPADDING y CELLSPACING:

1 2 3

4 5 6

<TABLE BORDER CELLPADDING=10 CELLSPACING=0><TR>

<TD>1 <TD> 2 <TD> 3<TR>


1 2 3

4 5 6

<TABLE BORDER CELLPADDING=0 CELLSPACING=10>

<TR><TD>1 <TD> 2 <TD> 3

<TR><TD>4 <TD> 5 <TD> 6

</TABLE>

1 2 3

4 5 6


<TD>1 <TD> 2 <TD> 3

<TR><TD>4 <TD> 5 <TD> 6

</TABLE>




Ejemplos de Tablas

Ejemplos de alineaciones ALIGN:

Cabecera de Titulo1

Cabecera de Titulo2

Cabecera de Titulo3

Celda 1 Celda 2 Celda 3


<TABLE BORDER><TR>

<TH ALIGN=CENTER>Cabecera de Titulo 1 <TH ALIGN=CENTER> Cabecerade Titulo 2 <TH ALIGN=CENTER> Cabecera de Titulo 3

<TR><TD ALIGN=LEFT>Celda 1 <TD ALIGN=CENTER> Celda 2 <TD

ALIGN=RIGHT> Celda 3<TR><TD ALIGN=RIGHT>Celda 4 <TD ALIGN=CENTER> Celda 5 <TD

ALIGN=LEFT> Celda 6</TABLE>

Ejemplos de alineaciones verticales VALIGN:

Cabecera de Titulo1

Cabecera de Titulo2

Cabecera de Titulo3

Cabecera de Titulo4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7

Celda 8

Celda 9

Celda 10

Celda 12

<TABLE BORDER><TR>

<TH ALIGN=CENTER>Cabecera de Titulo 1<TH ALIGN=CENTER> Cabecera de Titulo 2<TH ALIGN=CENTER> Cabecera de Titulo 3<TH ALIGN=CENTER> Cabecera de Titulo 4




Ejemplos de Tablas

<TR><TD ALIGN=LEFT>Celda 1<TD ALIGN=CENTER> Celda 2<TD ALIGN=RIGHT> Celda 3<TD ALIGN=CENTER> Celda 4

<TR><TD ALIGN=LEFT VALIGN=TOP>Celda 5

<TD ALIGN=CENTER><IMG SRC="/imagenes/bibliog.gif"><TD ALIGN=RIGHT VALIGN=BOTTOM> Celda 7<TD ALIGN=CENTER VALIGN=MIDDLE> Celda 8

<TR><TD VALIGN=BOTTOM>Celda 9<TD VALIGN=MIDDLE> Celda 10<IMG SRC="/imagenes/mundog.gif"><TD VALIGN=TOP> Celda 12

</TABLE>

Ejemplos de colores de fondo de las celdas BGCOLOR: (Solo para el Netscape 3.0 e Internet Explorer)

Cabecera de Titulo1

Cabecera de Titulo2

Cabecera de Titulo3

Celda 1 Celda 2 Celda 3Celda 4 Celda 5 Celda 6

<TABLE BORDER><TR BGCOLOR=YELLOW>

<TH>Cabecera de Titulo 1 <TH> Cabecera de Titulo 2 <TH> Cabecera de Titulo 3<TR BGCOLOR=WHITE>

<TD>Celda 1 <TD> Celda 2 <TD> Celda 3<TR>

<TD BGCOLOR=RED>Celda 4 <TD BGCOLOR=WHITE> Celda 5 <TDBGCOLOR=GREEN> Celda 6</TABLE>

Distintos tamaños de tablas:

q WIDHT=10%




Ejemplos de Tablas

Esta esla celdanúmero1

Lados

y porúltimoesta eslaceldanúmero3

Celda 1segundafila

dos2fila

y porúltimoesta eslaceldanúmero3 de laúltima

fila

q WIDHT=50%

Esta es la celdanúmero 1

La dosy por último estaes la celdanúmero 3

Celda 1 segundafila

dos 2fila

y por último estaes la celdanúmero 3 de laúltima fila

q WIDHT=75%

Esta es la celda número1

La dosy por último esta es la celda número3

Celda 1 segunda filados 2fila

y por último esta es la celda número3 de la última fila

q WIDHT=100%

Esta es la celda número 1 La dos y por último esta es la celda número 3




Ejemplos de Tablas

Celda 1 segunda fila dos 2 fila y por último esta es la celda número 3 de la última fila




Formularios

5.12 - FORMULARIOS (FORM).

Introducción

Los formularios son plantillas que permiten la creación de documentos HTML con peticiones dedatos. La principal utilidad de los formularios es la posibilidad de crear cuestionarios, encuestas,páginas de comentarios o cualquier documento en la que se desee una interacción por parte delusuario.

Se podrán definir distintos tipos de recuadros de dialogo, botones de selección, menús demúltiples opciones, ... Para permitir obtener los datos de una manera más intuitiva.

<FORM> Definición de formularios

Existe una instrucción HTML para la creación de formularios esta es FORM, que tiene lasiguiente estructura:

< FORM ACTION="fichero que trata el formulario" METHOD= POST | GET >...

Elementos que forman el formulario ...< /FORM>

Dentro de la etiqueta de formulario se definirán los distintos elementos de petición de datos. Estasinstrucciones que se explicarán a continuación definirán los tipos de botones, cajas de dialogo yventanas para la introducción de datos. Y definirán las variables que almacenarán los datosintroducidos por el usuario. Estas etiquetas se incluirán entre la de definición del formulario y la

etiqueta de final de formulario.

Los atributos que presenta la etiqueta FORM son los siguientes:

ACTION:

Indica el programa que se encargará de tratar los datos del formulario. Este programa debeencontrarse en el servidor y estar escrito en algún lenguaje de programación. A este programa sepasará como parámetros los datos introducidos en el formulario y retornará un código HTML que semostrará tras procesar el formulario. A este tipo de programas se les llama cgi-bin, y se explican en elúltimo apartado de este manual: (CGI-BIN).

http://www2.uca.es/manual-html/form.htm (1 de 9)30/08/2008 11:59:58 a.m.



Formularios

METHOD:

Indica el protocolo usado para el envío de los datos. Con POST envía los datos en la entradaestándar del programa que trata el formulario y con GET los datos se pasan por parámetro, en la líneade comandos, al programa. El usar uno o otro método vendrá determinado por como son tratados losparámetros en el formulario en el (CGI-BIN). El método de uso más normal será POST.

Una vez definidas las características globales del formulario incluiremos los distintos botones ycajas de dialogo que lo constituyen. Dentro de la instrucción del formulario podrán incluirsecualquier texto o instrucción HTML, siendo recomendado a fin de poder etiquetar las opciones deentrada y especificar cualquier dato importante relacionado con el formulario. Igualmente unformulario puede ser incluido en algunas instrucciones HTML como las listas, tablas, etc ...

<INPUT> Entrada básica de datos

La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de entrada de datos.Por lo general serán entradas de texto corto (a lo sumo una frase) o opciones. El formato básico es elsiguiente:

< INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT |

IMAGE | RESET ) NAME = "Variable que toma el valor" VALUE = "Valor de Inicialización" >

El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se estádefiniendo, a continuación se explicarán por separado cada una de las opciones. El atributo NAME especifica el nombre de la variable que se define. Este nombre será pasado al programa que trata elformulario junto con el valor que le asigno el usuario del formulario. El atributo VALUE sueleespecificar el valor de inicialización, que será el valor por defecto.

A continuación se relatan los distintos tipos de instrucciones de entrada.

<INPUT TYPE=TEXT...> Texto corto

Se utiliza para la entrada de cadenas de texto corto, como por ejemplo nombre de personas,números, fechas o diversos datos que se puedan expresar en una línea de texto.

Se mostrará un recuadro que ocupa una línea y la que será posible especificar este texto. El

formato de la instrucción es el siguiente:

< INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial " SIZE=" tamaño"MAXLENGTH="longitud máxima" >




Formularios

El tamaño de la ventana de introducción de texto se fija con el atributo SIZE, que indica el tamañode la ventana en caracteres. Aquí solo se define la parte visible, pero el usuario podrá introducir mástexto si lo desea. Para indicar el máximo número de caracteres que se permiten en la entradausaremos: MAXLENGTH. El atributo NAME indica el nombre de la variable que toma el valor de laentrada y VALUE especifica el valor de inicialización del campo. De todos los atributos solo seráobligatorio NAME, siendo el resto opcionales. En la entrada se podrán usar cualquier tipo de

caracteres incluso los acentuados, en su formato normal.

Ejemplos

Inst.HTML

Nombre: <INPUT TYPE=TEXT NAME=variable>

Resultado Nombre:

Explicación

Será una introducción de texto básica.

Inst.HTML

Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicialización">

Resultado Nombre:

Explicación

En este caso introduciremos un texto de inicialización que será el texto por defecto y eseditable por el usuario.

Inst.HTML

Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicialización"SIZE=50 MAXLENGHT=55>

Resultado Nombre:

Explicación

Ahora definimos con SIZE un mayor tamaño del recuadro y con MAXLENGHT definimos elnúmero máximo de caracteres que se pueden introducir.

<INPUT TYPE=PASSWORD...> Palabras secretas

Es similar al anterior pero en este caso no se imprimen los caracteres según se van introduciendo,

se muestra un asterisco en vez de los caracteres. Solo se puede ver el número de caracteres, pero novalor. Se usa para la introducción de claves de acceso (passwords) y datos que no deban ser vistos alintroducirlos. El formato es:


Texto de Inicialización




Formularios

< INPUT TYPE=PASSWORD NAME="variable" VALUE="valor inicial " SIZE=" tamaño"MAXLENGTH="li>longitud máxima" >

Ejemplo

Inst.

HTMLPassword: <INPUT TYPE=PASSWORD NAME=variable VALUE="password">

Resultado Password:

Explicación

El texto introducido no puede ser visto, pero si es posible saber el número de caracteres que seintroducen.

<INPUT TYPE=CHECKBOX> Botones de selección

El checkbox es un botón que puede presentar dos estados activado o desactivado. El formato es elsiguiente:

< INPUT TYPE=CHECKBOX NAME="variable" CHECKED>

Se requiere el atributo NAME. Los valores que tomará la variable serán on ó off , dependiendo de

su estado. Si el botón estaba activado cuando se envían los datos del formulario se enviaran elnombre de la variable y el valor que indique su estado. Si se incluye el atributo CHECKED el botónse encontrará activado en la inicialización.Si se indica el atributo VALUE,cuando se envian los datos con el botón activado se mandará lavariable con el valor indicado y en caso contrario no se mandará ningún valor.

Ejemplo

Inst.HTML <INPUT TYPE=CHECKBOX NAME= variable> Opción

Resultado Opción

Explicación

En este caso esta desactivado por defecto y su utilizará en caso de los valores on y off paradefinir su estado.

Inst.HTML <INPUT TYPE=CHECKBOX NAME= variable CHECKED> Opción




Formularios

Resultado Opción

Explicación

Ahora se especifica CHECKED para indicar que por defecto debe estar activado.

<INPUT TYPE=RADIO...> Selección entre múltiples opciones

Se usa cuando la opción puede tomar un valor simple de una serie de alternativas. En este caso sepresentan unos valores opcionales de los que solo puede tomar un valor. Para especificar cada uno deestos valores se incluirá una etiqueta RADIO por cada una de las posibles alternativas, su estructurageneral será:

< INPUT TYPE=RADIO NAME="variable" VALUE="valor 1" CHECKED >< INPUT TYPE=RADIO NAME="variable" VALUE="valor 2" >

. . .< INPUT TYPE=RADIO NAME="variable" VALUE="valor n" >

Cada una de las etiquetas RADIO tendrá el mismos atributo NAME, y con un distinto atributoVALUE que será el valor que tome si se selecciona esta opción. Para inicializarlo se usa el atributoCHECKED que se indicará solo en la opción que se quiera especificar por defecto.

Ejemplo

Inst.HTML

<INPUT TYPE=RADIO NAME= variable VALUE=opcion1 >Opción 1<BR><INPUT TYPE=RADIO NAME= variable VALUE=opcion2 CHECKED>Opción 2<BR><INPUT TYPE=RADIO NAME= variable VALUE=opcion3 >Opción 3<BR><INPUT TYPE=RADIO NAME= variable VALUE=opcion4 >Opción 4<BR>

Resultado

Opción 1

Opción 2Opción 3

Opción 4

Explicación

En este caso solo es posible seleccionar uno de los posibles valores, la opción CHECKEDindica cual es la opción activa por defecto.

<INPUT TYPE=HIDDEN...> Parámetros ocultos

En este caso no se muestra ningún campo para la entrada de datos al usuario, pero el par variablevalor especificado es enviado junto con el formulario. Se suele usar para transmitir información de




Formularios

estado ó control ó para enviar algún tipo de información que no debe ser variada en el formulario,pero sí debe ser enviada junto a este. El formato es:

< INPUT TYPE=HIDDEN NAME="variable" VALUE="valor" >

Deberá incluir tanto la variable como el valor.

<INPUT TYPE=SUBMIT...> Enviar Datos

Este botón se usa para enviar los datos del formulario, al pulsar el usuario este botón, se acaba laintroducción del formulario y pasa el control al programa indicado en ACTION. En todo formulariodebe existir al menos un botón de SUBMIT, si solo incluye un recuadro del tipo TEXT no seránecesario incluirlo. El formato es:

< INPUT TYPE=SUBMIT VALUE=" mensaje a mostrar" >

El atributo VALUE especifica una etiqueta no editable que se mostrará en el botón de envío. Lonormal es que este botón no envíe datos, pero si se indica el atributo NAME con un nombre devariable será enviada la variable con el valor de VALUE. Esto puede ser útil si se incluyen distintosbotones de SUBMIT para distinguir cual fue pulsado.

Ejemplo

Inst.HTML

< INPUT TYPE=SUBMIT VALUE="Enviar Datos" >

Resultado

Explicación

El texto indicado en VALUE es el que etiqueta el botón, al pulsar sobre él se enviarán losdatos del formulario

<INPUT TYPE=IMAGE...> Botón de Envío gráfico

Su funcionalidad es similar al botón de SUBMIT, se usa igualmente para enviar los datos de unformulario, pero en este caso se presenta una imagen como botón. Igualmente al pulsar sobre el botónse enviará el formulario. El formato es el siguiente:

< INPUT TYPE=IMAGE NAME="variable" SRC="URL de la Imagen" >

El punto de la imagen en el que pulsa el usuario también es pasado al programa interprete delformulario, de forma que la imagen igualmente podría ser un mapa sensible. Se pasarán dos


Enviar Datos



Formularios

parámetros x e y con las coordenadas del punto donde pulso, siendo el programa interprete elencargado de determinar la zona donde se pulsó, si se desea.

Ejemplo

Inst.

HTML

<INPUT TYPE=IMAGE SRC="boton.gif">

Resultado

Explicación

Se muestra la imagen como botón de envío, sustituyendo al botón de SUBMIT.

<INPUT TYPE=RESET...> Borrar los datos

Este botón se usa para volver a los valores por defecto todos los elementos del formulario,borrando todos los datos introducidos por el usuario. Su formato es el siguiente:

< INPUT TYPE=RESET VALUE=" Etiqueta a mostrar" >

El atributo VALUE especifica la etiqueta que tendrá el botón.

<TEXTAREA> Texto en múltiples líneas

Permite la introducción de un texto que puede abarcar varias líneas, introduciendo este en formade párrafo. El formato general será:

<TEXTAREA NAME="variable" ROWS= Filas COLS=Columnas>Texto de Inicializaci& oacute;n que puede incluir varias líneas.

</TEXTAREA>

En este caso se presenta una ventana del tamaño especificado con los atributos ROWS, filas, yCOLS, columnas. El texto expresado entre la etiqueta de inicio y de final sirve para indicar que textoaparecerá inicialmente en la ventana, en este texto se podrán incluir las marcas del lenguaje HTML,pero solo se tendrán en cuenta para incluir acentos y otro tipo de efectos. Los atributos ROWS y

COLS determinan el tamaño de la ventana visible, el texto se podrá extender más allá de estoslimites.




Formularios

Ejemplo

Inst.HTML

<TEXTAREA NAME=variable ROWS=10 COLS=54>Texto de Inicialización que puedeincluir varias líneas.

</TEXTAREA>

Resultado

Explicación

Se puede especificar el tamaño de la ventana para introducir datos e indicar un texto deinicialización, aunque este será opcional.

<SELECT> Elección entre múltiples opciones

Se usa para menús simple o múltiples. Define menús de tipo pop-up (menú de barras) y ofrece una

alternativa más compacta al uso de botones RADIO o CHECKBOX. Su formato es el siguiente:

<SELECT NAME="variable">< OPTION SELECTED VALUE=valor1> Opción Primera < OPTION VALUE=valor2> Opción Segunda

. . .< OPTION VALUE=valorn> Opción Enésima </SELECT>

Si se desea que sea un menú múltiple se deberá incluir el atributo MULTIPLE en la etiqueta deSELECT, en este caso se mostrarán todas las opciones en forma de tabla, en el otro caso se mostrarála opción activa y un botón para poder modificar esta opción. En ambos casos solo podráseleccionarse una de las opciones. Cuando se envía el resultado del formulario la variables NAMEtomará el valor de la opción que este activa.

La etiqueta OPTION que contenga el atributo SELECTED será considerada la opción por defecto,caso de no especificarse ninguna se considerará la primera de las opciones.

Ejemplos


Texto de Inicialización que puede

incluir varias líneas.



Formularios

Inst.HTML

<SELECT NAME="variable"><OPTION VALUE=1> Opción Primera<OPTION SELECTED VALUE=2> Opción Segunda<OPTION VALUE=3> Opción Tercera</SELECT>

Resul

tado

Explicación

Se muestra la opción activa que puede ser cambiada, por defecto esta activada la segundaopción.

Inst.HTML

<SELECT NAME="variable" MULTIPLE><OPTION VALUE=1> Opción Primera<OPTION SELECTED VALUE=2> Opción Segunda<OPTION VALUE=3> Opción Tercera

</SELECT>

Resultado

Explicación

En este caso al ser múltiple se muestran todas las opciones posibles, de las que solo es posibleseleccionar una.


Opción Segund

Opción PrimeraOpción SegundOpción Tercer



CGI, ejecución de binarios


Definición

Los cgi-bin son programas que se ejecutan en el servidor, pueden servir para tratar información,como pasarela con una aplicación o base de datos o para generar documentos html de formaautomática.

Como se vió con anterioridad, una de las principales utilidades de los cgi-bin es tratar losresultados de un formulario (FORM).

Estos programas pueden ser escritos en cualquier tipo de lenguaje de programación y son ejecutadosen el servidor cuando se realiza su referencia. Algo importante es que el programa debe ser ejecutableen el servidor, por tanto al ser el servidor una maquina UNIX, no se puede utilizar por ejemplo loscompiladores de los PC, sino los del servidor.

Los lenguajes más comunes para escribir estos programas son el lenguaje perl, C ó bien un script escrito en cualquier shell (csh, sh, ksh ó zsh).

Algo importante es que los cgi-bin deben tener una extensión especial .cgi, o bien, encontarse enun directorio especial llamado cgi-bin. Cuando se referencie en una pagina html un binario, cualquierfichero con la extensión cgi, en el servidor se ejecutará este programa y la salida se enviará al clientede la WWW.

Para que sea posible ejecutar el binario (cgi-bin), será necesario que el fichero tenga los permisosde forma correcta, para ello tendrá que ejecutar en Unix el siguiente comando:

www2> chmod 755 programa.cgi

Con esto el programa será ejecutable por el servidor.

Los cgi-bin se podrán escribir con las instrucciones normales del lenguaje de programación perohay ciertos aspectos a tener en cuenta:

1. Variables de entorno 2. Entrada de datos al cgi-bin

3. Salida de datos del cgi-bin

Variables de entorno

http://www2.uca.es/manual-html/cgi-bin.htm (1 de 4)30/08/2008 11:59:59 a.m.

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-




Para pasar datos el servidor al cgi-bin utiliza una serie de variables de entorno, que quedandefinidas al ejecutar el script. Las variables de entorno más interesantes son:

q REQUEST_METHOD

El método por el que se realiza la llamada al script, este puede ser GET o POST como se explicóanteriormente cuando se habla de los formularios.

q PATH_INFO

El cgi-bin puede ser llamado directamente desde el cliente, en esta variable se incluirá toda lainformación que siga al nombre del cgi-bin, por ejemplo:

http://www2.uca.es/binarios/cgibin.cgi/camino/fichero

PATH_INFO = /camino/fichero

Será la información adicional que se añade tras el nombre de cgi-bin.

La información que se incluye será pasada de forma codificada al cgi-bin, de forma que losespacios se convierten en signos '+' y los caracteres especiales se codifican de la forma %xx, dondexx el código ASCII en hexadecimal del caracter. Esto debe ser tenido en cuenta cuando se interprete

la informació obtenida en formato URL.

q PATH_TRANSLATED

Una versión decodificada de PATH_INFO, obtiene el camino y lo convierte de camino virtual (enreferencia del servidor) a camino real (camino completo).

q SCRIPT_NAME

Nombre por el que fue llamado el cgi-bin.

q QUERY_STRING

La información que sigue al símbolo ? en la URL que referencia al cgi-bin. Será algún tipo deconsulta que se realice al cgi-bin. No necesita ser decodificada de ninguna manera.

Cuando se utiliza el método GET las variables del formulario se pueden interpretar con esta

variable de entorno.

El formato en que se envian estas variables es el siguiente:





?variable1=valor1&variable2=valor2& ... &variablen=valorn

q REMOTE_HOST

El ordenador desde el que se ejecuto el cgi-bin.

q

REMOTE_ADDR

Dirección IP del ordenador remoto que ejecuto el cgi-bin.

q CONTENT_LENGTH

El número de caracteres enviados por el cliente al cgi-bin.

q HTTP_USER_AGENT

El cliente de la WWW que ejecuta el cgi-bin, el formato general es:

programa/versión libreria/versión

El cgi-bin podría enviar un distinto código HTML según cada cliente.

Entrada de datos al cgi-bin

Para los formularios que utilizan el método POST, la información es enviada al cgi-bin por laentrada estándar (stdin).

El servidor envía las variables de entorno CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados. El servidor no esta obligado a enviar una marca definal de fichero tras los datos enviados, por tanto la variable CONTENT_LENGTH debe ser tenidaen cuenta para determinar la cantidad de datos enviados. CONTENT_TYPE suele contener el valorapplication/x-www-form-urlencoded , que indica que se trata de información con codificación URL.

En esta codificación como se vio antes los espacios se convierten en signos '+' y los caracteresespeciales se codifican de la forma %xx, donde xx el código ASCII en hexadecimal del carácter. Portanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario. Lasvariables del formulario se enviarán de la forma:

variable1=valor1&variable2=valor2& ... &variablen=valorn

Salida de datos del cgi-bin





El cgi-bin debe enviar sus datos a la salida estándar (stdout), esta salida puede ser un documentogenerado por el cgi-bin o instrucciones al servidor para obtener el documento correcto.

La salida del cgi-bin debe comenzar con una pequeña cabecera que identificará al documento. Lasdirectivas que definen esta cabecera serán:

q Content-type:

Es el tipo MIME del documento que se retorna. Si tuviera el valor text/html la salida seinterpretaría como código html. Por tanto la salida del cgi-bin podría contener instrucciones HTMLque serian interpretadas correctamente por el cliente. Otros valores que puede tomar son: text/plain para texto normal ó image/gif , la salida se interpreta como una imagen GIF.

Por ejemplo:

printf ( "Content-type: text/html\n\n" );

Sería el comienzo de la salida de cgi-bin escrito en C que comienza a generar código html.

q Location:

Indicará al servidor que se esta enviado la referencia a un documento en lugar del documento ensí. Si el valor es una URL, el servidor indicará al cliente que debe realizar un redireccionamiento a

esa dirección.

Esta permitido el uso de información adicional (PATH_INFO) y la directiva ?, pero no la directiva# para indicar un punto determinado dentro de un documento.

q Status:

Indicará un código de estado para indicar errores. El formato será nnn xxxxxxx, donde nnn esun número de tres dígitos y xxxxxxx es una cadena de caracteres.

Tras la cabecera se incluirán dos caracteres de retorno de carro (\n), siendo obligatorio para quesea bien interpretada la cabecera de cgi-bin, si no se respeta esto la salida del cgi-bin podríaindicarnos el error "Server Error 500".

Despues de definida la cabecera se podrá generar la salida del cgi-bin, que se interpretará segú elvalor dado a Content-type.




Documentos con Frames

8 - Documentos con Frames

Introducción

Con las frames es posible dividir la ventana del navegador en varias subregiones ( frames),permitiendo mostrar una URL distinta en cada una de ellas. En cada frame se nos permite:

q Mostar su propia URL, diferenciada del resto de las frames de la pantalla, de esta forma unhiperenlace puede tener como destino un documento y la frame en el que se mostrará.

q Tendrán asociado un nombre, que las distinguirán del resto de las frames de la pantalla y

permitirá usarlo en los hiperenlaces.

q En el caso que se cambie el tamaño de la ventana, se podrá determinar si la frame se ajusta aeste tamaño o mantiene su tamaño intacto.

Esto permite crear nuevos tipos de documentos, en los que por ejemplo se mantendrá una regiónestática (lista de enlaces, barra de botones, formulario) y otra zona dinámica en la que se mostrará elresultado. De esta forma una de las principales utilidades de las frames es la creación de páginas conun índice (por ejemplo un manual) o una cabecera estática, consiguiendo así una mejora de lanavegación al poder acceder al índice de una manera más rapida y efectiva.

El uso de las frames es útil para cierto tipo de documentos, pero puede llegar a dificultar lanavegación, dentro de un documento con frames no tendrá utilidad los botones de documento previo(back) ni documento siguiente (forward), ya que ambos nos trasladarán fuera del documento conframes. Para ver el documento previo en una de las frames debemos utilizar el botón derecho delratón sobre ella y seleccionar la opción volver en el frame (Back in Frame). Esto hace que cuando seutilicen frames haya que cuidar la correcta transición entre documentos.

No todos los navegadores pueden mostrar documentos con frames, solo son interpretables por elNetscape 2.0 o superior y el Internet Explorer 3.0. Por tanto en este caso si se quiere que eldocumento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otrosin ellas, usando la etiqueta NOFRAMES.

Definición

Un documento con frames se define de manera diferente a un documento normal, siendo laestructura del documento distinta, en este caso no se define la etiqueta BODY. Su estructura es lasiguiente:

http://www2.uca.es/manual-html/frames.htm (1 de 7)30/08/2008 12:00:02 p.m.




<HTML><HEAD>

Definiciones de la cabecera </HEAD><FRAMESET>

Definición de las frames que forman el documento y de los

fichero que incluye cada una. </FRAMESET><NOFRAMES>

Instrucciones HTML que se mostrará en los navegadores que nosoporten frames.

</NOFRAMES></HTML>

Dentro de la etiqueta NOFRAMES se podrá incluir una explicación de que el documento solo esvisible con el navegadores que soporten frames, o bien incluir una versión del documento que semuestre sin necesidad de frames.

<FRAMESET ...> Definición de las frames.

Con esta instrucción definiremos las frames que formarán el documento, su sintaxis es similar a la

de las tablas, permitiendo definir muy distintos tipos de frames. Su formato es el siguiente:

<FRAMESET ROWS= Lista de las Filas COLS= Lista de las Columnas><FRAME SRC=URL_1 NAME=" Nombre de la frame1"><FRAME SRC=URL_2 NAME=" Nombre de la frame1">. . .<FRAME SRC=URL_N NAME=" Nombre de la frameN ">

</FRAMESET>

Se definirá solo uno de los atributos, o la lista de filas (ROWS) o la lista de columnas (COLS).

q ROWS:

Se definirá separado por comas el tamaño de cada una de las frames. De esta forma se dividirá lapantalla de forma horizontal, según cada una de las filas definidas. El tamaño de la frame, puedeexpresarse de las siguientes formas:

q En valor absoluto, que indicará el tamaño en puntos de la pantalla. En este caso si todas lasframes se indican de este modo, los valores se ajustarán para que las frames ocupen latotalidad del espacio de la ventana del navegador, no guardando siempre la proporción con laque se definen las frames.





q En tanto por ciento sobre el tamaño de la ventana, en este caso si los porcentajes suman unvalor distinto del 100%, se ajustarán para que coincidan con el tamaño de la ventana. Se podrácombinar con el apartado anterior de forma que algunas frames se definan en valor absoluto yotras en porcentaje.

q De forma relativa con el símbolo * que indica el tamaño restante de la ventana. Si se indicauna frame como 2* y otra como *, la primera ocupará dos tercios del espacio restante y lasegunda un tercio del espacio restante. Se puede combinar con las definiciones anteriores.

Ejemplo

Inst. HTML Muestra

<FRAMESET ROWS="100, 50%, *"><FRAME SRC="frame1.htm" NAME="frame1"><FRAME SRC="frame2.htm" NAME="frame2"><FRAME SRC="frame3.htm" NAME="frame3"></FRAMESET>

Se definen tres frames horizontales, la primera (roja) ocupará 100 puntos de la pantalla, la segunda (azul)el 50% del tamaño de la ventana del navegador y la tercera (verde) el espacio restante, si se varía eltamaño de la ventana del navegador, cambiará el tamaño de las dos últimas.

q COLS:

Toma los mismos posibles valores que ROWS, pero en este caso para las columnas, se definiránlas frames de forma vertical.

Ejemplo

Inst. HTML Muestra





<FRAMESET COLS="100, 50%, *"><FRAME SRC="frame1.htm" NAME="frame1"><FRAME SRC="frame2.htm" NAME="frame2"><FRAME SRC="frame3.htm" NAME="frame3"></FRAMESET>

En este caso se definen las frames de forma vertical, guardando la misma proporción que en el casoanterior.

Una vez definida el número de frames por fila o por columna se definirá el contenido de cada unade estas con la etiqueta FRAME, pero igualmente se podría definir frames dentro de frames, deforma que cada una de las definidas anteriormente podría estar divida en varias frames, esto se haráincluyendo dentro de la instrucción FRAMESET, nuevas instrucciones FRAMESET que dividiránesta en las frames indicadas, como se ve en el siguiente ejemplo:

Ejemplo

Inst. HTML Muestra

<FRAMESET ROWS="100, 50%, *"><FRAME SRC="frame1.htm" NAME="frame1"><FRAMESET COLS="2*,*">

<FRAME SRC="frame2.htm"NAME="frame2"><FRAME SRC="frame3.htm"NAME="frame3">

</FRAMESET><FRAMESET COLS="50%, 30%, 20%">

<FRAME SRC="frame4.htm"NAME="frame4"><FRAME SRC="frame5.htm"NAME="frame5"><FRAME SRC="frame6.htm"NAME="frame6">

</FRAMESET></FRAMESET>

Tomando como base las frames que se definieron en un ejemplo anterior, hemos dividido dos de lasframes en nuevas frames, formando en este caso un documento con 6 frames, en cada una se muestra unfichero distinto y tienen un nombre distinto. Dentro de las frames definidas se podrían definir nuevasframes, pudiendo dividir la ventana, tantas veces como se desee.





<FRAME ...> Definición de cada una de las frames

Como se ha visto en el apartado anterior con la etiqueta FRAME definiremos el documento que semostrará en la frame y su nombre. Esta etiqueta presenta además algunos otros atributos:

<FRAME SRC="URL" NAME=" Nombre de la frame" MARGINWIDTH=" ancho del margen"MARGINHEIGHT=" alto del margen" SCROLLING=YES | NO | AUTO NORESIZE>

q URL:

Como su nombre indica, especifica el documento HTML o fichero que se mostrará en la framedefinida. Si no se especifica documento alguno se mostrará la frame vacía.

q NAME:

Indica el nombre de la frame, este nombre es importante ya que se usará en los hiperenlaces(normalmente en los documentos de las otras frames) para indicar la frame de destino del documento.Si no se indica el nombre solo se podrá mostrar el documento actual, sin que sea posible cambiarlomediante hiperenlaces.

q MARGINWIDTH:

Indica el ancho del margen, este atributo es opcional y normalmente el navegador ajusta todos losmárgenes al mismo tamaño, si se especifica se valor será en puntos de la pantalla.

q MARGINHEIGHT:

Igual que en el caso anterior pero para el alto de los márgenes. Lo normal es no especificarninguno de estos dos atributos.

q SCROLLING:

Indica si la frame tendrá o no una barra de scroll, la barra de scroll se muestra en el lateral ypermite desplazarse por el documento, pulsando con el ratón en ella. Si toma el valor YES, siemprese mostrará esta barra, para el valor AUTO solo se mostrará si el documento no cabe en la frame, sies necesaria. Y por último NO indica que en ningún caso se muestre la barra de scroll. Si no se indicanada se toma por defecto el valor AUTO.

q NORESIZE:

Indica que la frame no debe ser variada de tamaño por el usuario, se puede variar el tamaño de una





frame situando el cursor del ratón encima y arrastrando en la dirección deseada. Con este atributo elusuario no podrá cambiar el tamaño de la frame en ningún caso. Por defecto todas las frames puedenvariar su tamaño.

TARGET: Atributo para indicar la frame de destino

El uso de frames introduce un nuevo atributo a alguna de las etiquetas especificadas conanterioridad, este atributo es TARGET que indicará la frame de destino de la operación.Normalmente, en páginas sin frames, cuando se seguía un hiperenlaces este se mostraba en la ventanadel navegador sustituyendo el documento actual, con las frames se puede especificar que frame serála de destino, no siendo necesario que sea la frame del documento actual.

Como nombre de la frame su usará el nombre que se especifico en el atributo NAME de laetiqueta FRAME. Estas instrucciones se utilizarán normalmente en los documentos que se incluyen

dentro de las frames.

Las etiquetas que permiten el uso de TARGET son las siguientes:

q A:

En los hiperenlaces indicará la frames donde se mostrará el documento, una vez que se siga elhiperenlace.

<A HREF="url " TARGET=" frame">

q BASE:

Indicará la frame en la que se mostrará por defecto todos los hiperenlaces del documento actual.Se debe especificar en la cabecera del documento (HEAD).

<BASE TARGET=" frame">

q AREA:

En la definición de imágenes sensibles en el cliente, se indica la frame donde se verá el documentoque se activa en la zona correspondiente de la imagen.

<AREA SHAPE=RECT COORDS=" x,y,..." HREF="url " TARGET=" frame">

q FORM:

Indicará la frame de destino del resultado del formulario.


http://-/?-

http://-/?-




<FORM ACTION="url " TARGET=" frame">

Existen unos valores especiales de TARGET que nos permitirán definir destinos distintos a lasframes definidas. Estos valores son los siguientes:

q TARGET="_blank": Indica que se muestre en una nueva ventana vacía, para seguir el

enlace se lanza otra ventana distinta del navegador.

q TARGET="_self":Se mostrará en la misma ventana o frame que lo referencia, se puedeusar para modificar el valor dado por BASE.

q TARGET="_parent": Se muestra en la frame o estructura de frames que llamó aldocumento actual.

q TARGET="_top": Indica que se muestre en la ventana completa, eliminando la estructurade frames que tenga la ventana.





El Lenguaje HTML

1 - Etiquetas del lenguaje HTML s Las Etiquetas s Atributos de las Etiquetas s Etiquetas correctas

2 - Formato de las URL s Definición s Uso y Formato

3 - Estructura de un documento HTML s Estructura Básica s Comentarios


s Introducción s <TITLE>: Título del documento s <BASE>: URL base del documento s <ISINDEX>: El documento es un índice s <META>: Indica refresco del documento

5 - Cuerpo de un documento HTML s Introducción s Definición de colores

s Atributos de <BODY> s Ejemplos

5.1 - Espaciados y saltos de línea s El espaciado en HTML s <P> Cambio de párrafo s <BR> Salto de línea s <HR> Regla Horizontal s <PRE> Texto preformateado s <CENTER> Centrado de texto e imágenes s Espacios en blanco


http://www2.uca.es/manual-html/todoman.htm (1 de 85)30/08/2008 12:00:14 p.m.

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-




s Como representar caracteres especiales s Elementos del lenguaje HTML s Caracteres acentuados s Otros Simbolos

5.3 - Cabeceras s <H1> - <H6> Cabeceras de titulos

s <Hn ALIGN=CENTER>: Alineación de la cabecera s Ejemplos

5.4 - Tamaño y Color de las fuentes de caracteres s Utilidad s <FONT SIZE=n> : Tamaño de la fuente s Ejemplos de tamaños de fuentes s <BASEFONT SIZE=n> : Fuente por defecto s <FONT COLOR=texto color ó rrvvaa> : Color de la fuente s Ejemplos de definición de colores de fuentes

5.5 - Estilos físicos y lógicos s Estilos físicos y Estilos lógicos s Estilos Físicos s Estilos Lógicos

5.6 - Definición de listas s Las listas en HTML s <UL> Listas no ordenadas

s Ejemplos s <OL> Listas ordenadas

s Ejemplos s <DL> Listas de definiciones

s Ejemplos

5.7 - Hiperenlaces s Hiperenlaces s <A HREF=...> Hiperenlace s URL absolutas y relativas

s Ejemplos s <A NAME=...> Elemento Ancla

5.8 - Imágenes s Imágenes en los documentos HTML s <IMG SRC=...> Inclusión de Imágenes s <IMG ... ALT=...> Texto alternativo s <IMG .. ALIGN=...> Alineación de la imágen s <IMG .. BODER=...> Borde de la imágen s <IMG .. HEIGHT=... WIDTH=...> Tamaño de la imágen s <IMG .. HSPACE=... VSPACE=...> Espaciado de separación de la imágen


http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-




5.9 - Imágenes Sensibles s Imágenes Sensibles

s Ejemplo s ISMAP como referenciar la imágen sensible

s Ejemplo s Imágenes sensibles definidas desde el cliente

s Ejemplo 5.10 - Insercción de elementos multimedia

s ¿ Multimedia ? s Extensiones Multimedia de Internet Explorer s Plug-in's s <EMBED> Insertar Ficheros

5.11 - Tablas s Introducción s <TABLE> Definición de la Tabla s <CAPTION> Titulo de la tabla s <TR> Fila de la tabla s <TH> y <TD> Una celda de la tabla

5.12 - Formularios s Introducción s <FORM> Definición de formularios s <INPUT> Entrada básica de datos s <INPUT TYPE=TEXT...> Texto corto s <INPUT TYPE=PASSWORD...> Palabras secretas s <INPUT TYPE=CHECKBOX> Botones de selección s <INPUT TYPE=RADIO...> Selección entre multiples opciones s <INPUT TYPE=HIDDEN...> Parametros ocultos s <INPUT TYPE=SUBMIT...> Enviar Datos s <INPUT TYPE=IMAGE...> Boton de Envio gráfico s <INPUT TYPE=RESET...> Borrar los datos s <TEXTAREA> Texto en multiples líneas s <SELECT> Elección entre multiples opciones

7 - CGI (Common Gateway Interface), ejecucin de binarios. s Definicin s Variables de entorno s Entrada de datos al cgi-bin s Salida de datos del cgi-bin

8 - Documentos con frames. s Introduccin s Definicin s <FRAMESET ...> Definicin de las frames


http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-

http://-/?-




s <FRAME ...> Definicin de cada una de las frames s TARGET: Atributo para indicar la frame de destino

Gestión de un espacio Web Departamental

1 - Como gestionar la cuenta Departamental

(EN PREPARACIÓN) 2 - Conceptos básicos del diseño de documentos y espacios Web(EN PREPARACIÓN) 3 - FAQ de la gestión de un espacio Web Departamental

Realizado por el: Servicio de Infraestructura Informtica Versin: 0.99Ultima Modificacin: 9 de Septiembre de 1996URL: http://www2.uca.es/manual-html/indice.htmComentarios: [email protected]

1 - Etiquetas del lenguaje HTML

Las Etiquetas

El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado deuna forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectosa aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos

etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto conetiquetas que variarán la forma de su presentación.

Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El textoincluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:

<B> Letra Negrita, del inglés Bold(negrita).

<TABLE> Definirá una tabla.


http://www2.uca.es/FAq-www/faq.html






http://www2.uca.es/FAq-www/faq.html




<IMG> Inclusión de una IMaGen.

Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la deinicio añadiéndole al principio una barra inclinada / . El efecto que define la etiqueta tendrá validez paratodo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML.

<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>

Por ejemplo, con la etiqueta siguiente:

<B>Texto que será en negrita</B>.

Obtendremos:

Texto que será en negrita

Algunas etiquetas no necesitarán la de fin, serán aquellas en las que el final este implícito, porejemplo <P> párrafo, <BR> salto de línea ó <IMG> inclusión de una imagen. Definen un efecto quese producirá en un punto determinado sin afectar a otros elementos.

El uso de mayúsculas o minúsculas en las etiquetas es indiferente, se interpretarán del mismo modoen ambos casos, pero lo normal es expresarlas en mayúsculas para que destaquen con más nitidez del

texto normal.

Atributos de las Etiquetas

Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definirdiferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio yconsistirán normalmente en el nombre del atributo y el valor que toma separados por un signo de igual.El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias

veces el mismo atributo con distintos valores el resultado obtenido será imprevisible dependiendo decomo lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra deberáexpresarse entre comillas, en otro caso no será necesario.

Un ejemplo de atributo será:

<A HREF="http://www.uca.es">Pagina principal de la UCA</A>

En este caso la etiqueta A presenta un atributo HREF cuyo valor es http://www.uca.es.

Igualmente una etiqueta podría presentar varios atributos:





<HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%>

En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo NOSHADE es un casoespecial que no presenta valor. El orden en que se especifiquen los atributos no afectarán al resultadofinal.

Etiquetas correctas

Todo texto que se encuentre entre los caracteres < y > se considerará una etiqueta, si la etiqueta nofuera una de las validas del lenguaje HTML no será tenida en cuenta, sin causar ningún tipo de error.Dejándose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extraña. Cuando secomete un error sintáctico al expresar una etiqueta o un atributo no se producirá ningún error,simplemente no de obtendrá el efecto que deseábamos.

El lenguaje HTML es un lenguaje que evoluciona muy rápidamente y cada nueva versión de losprogramas navegadores presenta etiquetas nuevas que causan efectos más espectaculares o atributosnuevos de las etiquetas ya existentes. Esto causa que los programas más antiguos no entiendan estasnuevas etiquetas y por tanto las considere erróneas y no realice la acción que deseábamos. Dándose elcaso de atributos que son validos solo para un único navegador.

Cuando creemos código HTML hay que hacerlo lo más estándar posible para permitir que eldocumento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas. Por tantodebemos renunciar a efectos espectaculares que solo tienen validez en un navegador e intentar

comprobar como se ve el documento en una variedad de navegadores, ya que las personas que seconectan a nuestras páginas no tendrán en la mayoría de los casos el mismo que nosotros. Tambien esinteresante como se vería el documento en los distintos tamaños de la ventana del navegador, teniendoen cuenta que todos no tienen un monitor con la misma resolución.

En este manual se han tratado de incluir las características más estándar de HTML y en caso detratarse de instrucciones más particulares se indicará convenientemente.

2 - Formato de las URL

Definición

URL es el acrónimo de (U niform Resource Locator), localizador uniforme de recursos y permite

localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la WWW.

Con la WWW se pretende unificar el acceso a información de servicios que antes eranincompatibles entre sí, tratando de conseguir que todos los servicios de internet sean accesibles a través





de la WWW, de esta forma desde un mismo programa se puede tener acceso a todos los recursos deuna forma uniforme y permite que los documentos HTML incluyan enlaces a otras fuentes deinformación en servicios como FTP, gopher, WAIS, etc ...

Uso y Formato

Las URL se utilizarán para definir el documento de destino de los hiperenlaces, para referenciar losgráficos y cualquier otro fichero que se desee incluir dentro de un documento HTML. Cada elementode internet tendrá una URL que lo defina, ya se encuentre en un servidor de la WWW, FTP, gopher olas News.

El formato de una URL será:

servicio://maquina.dominio:puerto/camino/fichero

El servicio será alguno de los de internet, estos pueden ser:

http: (HyperText Transport Protocol), es el protocolo utilizado para transmitir hipertexto. Todaslas páginas HTML en servidores WWW deberán ser referenciadas mediante este servicio. Indicaráconexión a un servidor de la WWW.

https: (HyperText Transport Protocol Secure), es el protocolo para la conexión a servidores de la

WWW seguros. Estos servidores son normalmente de ámbito comercial y utilizan encriptación paraevitar la intercepción de los datos enviados, usualmente numeros de tarjeta de credito, datos personales,etc ..., realizará una conexión a un servidor de la WWW seguro.

ftp: (File Transfer Protocol), utilizará el protocolo FTP de transferencia de ficheros. Se utilizarácuando la información que se desee acceder se encuentre en un servidor de ftp. Por defecto se accederáa un servidor anónimo (anonymous), si se desea indicar el nombre de usuario se usará: ftp://maquina.

dominio@usuario, y luego le pedirá la clave de acceso.

gopher, wais: Cualquiera de estos servicios de localización de información, se indicará eldirectorio para localizar el recurso concreto.

news: Accede al servicio de news, para ello el visualizador de la WWW debe ser capaz depresentar este servicio, todos no lo son. Se indicará el servidor de news y como camino el grupo denoticias al que se desea acceder: news://news.cica.es/uca.es.

telnet: Emulación de terminal remota, para conectarse a maquina multiusuario, se utiliza para

acceder a cuentas públicas como por ejemplo la de biblioteca. Lo normal es llamar a una aplicaciónexterna que realice la conexión. En este caso se indicará la maquina y el login: telnet://maquina.

dominio@login.





mailto: Se utilizará para enviar correo electrónico, todos los navegadores no son capaces. En estecaso solo se indicará la dirección de correo electrónico del destino: mailto://alias. correo@domino.

La maquina.dominio indicará el servidor que nos proporciona el recurso, en este caso seutilizará el esquema IP para identificar la maquina será el nombre de la maquina y el dominio. En elcaso de nuestra Universidad el dominio siempre será uca.es. Por tanto un nombre valido de maquinaserá www2.uca.es.

Es muy importante indicar siempre el dominio, ya que debemos suponer que se conectarán anuestras páginas desde servidores externos a nuestra red local por tanto si no indicamos el dominio lasURL que especifiquemos no podrían ser seguidas por los navegadores externos. Si en vez de www2.uca.es utilizamos www2 será perfectamente accesible por cualquier maquina de nuestra red local perosi se referenciara desde una red con distinto dominio la maquina www2 será la maquina llamada así enel dominio remoto si existiera, que no es la que deseamos referenciar.

El puerto TCP es opcional y lo normal es no ponerlo si el puerto es el mismo que se utilizanormalmente por el servicio. Solo se utilizará cuando el servidor utilice un puerto distinto al puerto pordefecto.

El camino será la ruta de directorios que hay que seguir para encontrar el documento que se deseareferenciar. para separar los subdirectorios utilizaremos la barra de UNIX / , se usa por convenio al sereste tipo de maquinas las más usadas como servidores. El nombre de los subdirectorios y del ficheroreferenciado puede ser de más de ocho caracteres y se tendrá en cuenta la diferencia entre mayúsculas yminúsculas en el nombre.

La extensión de los ficheros será también algo importante, ya que por ella sabe el servidor el tipo dedocumento que se accede e indica al cliente (navegador) el modo en que debe tratarse ese documento.Para definir los tipos de documentos se utiliza los tipos MIME. Las extensiones más normales con sustipos correspondientes son:

Tipo MIME Extensión Tipo de fichero

text/html html ó .htm,

documento HTML

text/plain .txt por defecto, texto plano

image/gif .gif imagen de formato GIF

image/jpeg jpg ó .jpegimagen de formatoJPEG

El navegador de la WWW, realiza una acción para cada tipo de fichero, solo los que sean del tipotext/html serán mostrados como documentos HTML. En el caso de que el tipo no sea conocido por el





cliente se considerará por defecto como un documento de texto normal.

Si no se indica un fichero y solo referenciamos un directorio accederemos a la página html pordefecto de ese directorio. En el servidor están definidos unos ficheros para ser usados si no de indica unfichero concreto, el nombre que debe tener este fichero es en nuestro caso default.htm ó default.html.En caso que no exista este fichero se mostrará un listado de todos los documentos que forman eldirectorio. Este fichero es la página inicial (home page) del servidor o del espacio Web.

Algunos ejemplos de URL podrían ser:

URL Definición

http://www.uca.es

En este caso solo se indica el servicio y la maquina ydominio. El resto de los parámetros se toman por defecto, elpuerto 80, el directorio, el raíz del servidor y el documento

por defecto de ese directorio.

http://www.uca.es/internet/internet.htmlEsta URL está más completa en este caso se accede alfichero internet.html que se encuentra en el directoriointernet del servidor de la WWW, www.uca.es.

http://www2.uca.es/serv/siiSe accederá al fichero por defecto del directorio /serv/sii delservidor de la WWW, www2.uca.es

ftp://ftp.uca.es/imagenes/globo.gif

En este caso se accederá a un servidor de FTP anónimo, ftp.

uca.es por el protocolo FTP y se accederá al fichero globo.gif del directorio de imagenes.

news:uca.es

En este caso se accederá al grupo de news de la uca en elservidor de news definido por defecto en el navegador de laWWW, esta opción solo es soportada por los navegadoresmás modernos.

mailto://[email protected]á un mail al equipo de la WWW de la UCA, estaopción solo es soportada por los navegadores más

modernos.

3 - Estructura de un documento HTML

Estructura Básica

Un documento HTML está definido por una etiqueta de apertura <HTML> y una etiqueta de cierre</HTML>. Dentro de este se dividen dos partes fundamentales la cabecera, delimitada por la etiqueta<HEAD> y el cuerpo, delimitado por la etiqueta <BODY>. Por tanto la estructura de un documento


HTML será:

<HTML><HEAD>

Definiciones de la cabecera </HEAD>

<BODY>Instrucciones HTML </BODY>

</HTML>

Ninguno de estos elementos es obligatorio, pudiendo componer documentos HTML que semuestren sin ningún problema sin incluir estas etiquetas de identificación. Si se utilizan elementos queforzosamente deban ser incluidos en la cabecera (como la etiqueta de titulo), no serán reconocidos

correctamente si no se incluyen entre las etiquetas de <HEAD>.

En los próximos apartados explicaremos de forma separada los componentes de la cabecera y delcuerpo de un documento HTML.

Comentarios

Para insertar comentarios dentro de un documento HTML utilizaremos la etiqueta especial 

Los comentarios son útiles para identificar el documento, pudiendo indicar al comienzo deldocumento su titulo, autor y la fecha en el que fue realizado, esto se hace antes de la etiqueta<HTML>. También aunque ya con menos utilidad para comentar cualquier instrucción o circunstanciadel documento.

Los comentarios no se muestran en el documento HTML y el único modo de verlo es viendo elcódigo HTML fuente del documento, cosa que permiten algunos navegadores de la WWW.


Introducción

La cabecera de un documento HTML está delimitado por las etiquetas <HEAD> y </HEAD>, en




esta se incluirán las definiciones generales que afectarán a todo el documento. Todas sus etiquetas sonopcionales y se utilizarán solo en casos muy determinados, solo la etiqueta TITLE tiene un uso generaly aunque es opcional se recomienda incluirla en todos los documentos que creemos.

A continuación se citan los distintos componentes que pueden formar la cabecera de un documentoHTML.

<TITLE>: Título del documento

Especificará el título del documento HTML, todo documento HTML debe tener un titulo. El titulodebe guardar relación con el contenido del documento y definirlo de forma general, su tamaño no estálimitado aunque se recomienda que no sea excesivamente extenso. Dentro de esta etiqueta no se podráusar ninguna de las restantes etiquetas HTML.

El título no forma parte del documento en sí, y no se incluye ni se muestra dentro del documento,normalmente se muestra en la parte superior de la ventana del programa navegador.

Se utiliza principalmente para etiquetar e identificar la página en los bookmarks (marcadores) y lashistory list (lista de documentos accedidos) y también se utiliza por algunos servidores de búsquedacomo resultado de una busqueda para poder intuir el contenido del documento. El titulo deberá guardarrelación con el contenido del documento y definirlo de forma general.

La etiqueta <TITLE>, debe ser usada dentro de las etiquetas que definen la cabecera de la siguiente

forma:

<HEAD><TITLE>Titulo del documento HTML</TITLE>

</HEAD>

<BASE>: URL base del documento.

Especificará la URL que se tomará como base del documento HTML, esta se utilizará para lasreferencias a URL relativas, que se encuentren en los hiperenlaces y en las referencias de las imágenes.No tiene mucho uso y lo normal es utilizarlo en documentos, obtenidos de otros servidores odirectorios e incluidos fuera de contexto, de esta forma los enlaces siguen siendo validos.

Presenta un atributo HREF, que indicará la URL base del documento, el formato será el siguiente:

<BASE HREF="URL">

Por ejemplo:

<BASE HREF="http ://www.uca.es/docs/">





<ISINDEX>: El documento es un índice

Indica que el documento es un índice, y por tanto se deberá realizar una búsqueda en él. Presentaráun indicador preguntando la palabra clave de la búsqueda.

No se utiliza en documentos normales, sino en documentos realizados con cgi-bin para indicar queles debe pasar una palabra clave para realizar la búsqueda. Presenta dos atributos, PROMPT queindica el texto que aparecerá como inductor de la búsqueda y ACTION que especifica el fichero cgique trata la consulta, por defecto será el documento actual.

<META>: Indica refresco del documento

Aunque tiene más utilidades, la principal es indicar documentos con refresco automático. Se

indicará un documento que debe sustituir al actual en un determinado número de segundos.


<META HTTP-EQUIV="REFRESH" CONTENT=" número_segundos ;URL=URL_de_refresco">

Se indica el número de segundos que deben pasar antes del refresco y el documento HTML que

sustituye al actual. Si se indica cero segundos la transición entre uno y otro documento será inmediata.Si no se indica URL el documento actual se refrescará.

La utilidad puede ser para documentos que cambien con una gran frecuencia y transcurrido untiempo se actualizarán, o documentos que deban ser vistos de forma secuencial, se empieza por undocumento pasando a los siguientes transcurrido un período de tiempo sin necesidad de acción algunapor parte del lector.


Introducción

El cuerpo de un documento HTML estará delimitado por las etiquetas <BODY> y </BODY> y enel se incluirán todas las instrucciones HTML y el texto que forman el documento, es similar al BEGIN ó { de un lenguaje de programación. Al igual que la cabecera (HEAD) es opcional, pero se recomiendapara la buena identificación de las distintas zonas del documento. Si un documento no presenta ningunade las etiquetas de identificación de sus distintas partes (<HTML>, <HEAD> ó <BODY>) seconsiderará que todo lo que se defina pertenece al cuerpo del documento.





Definición de colores

Antes de especificar los atributos de la etiqueta BODY indicaremos, la forma de representar losdistintos colores. Se usa el siguiente formato:

#rrvvaa

Donde se indica en formato hexadecimal la proporción de rojo, verde y azul que forma el colordeseado. El símbolo # es opcional. Un número hexadecimal es un número en base 16, la base normalutilizada es base 10 o decimal del 0 al 9. En este caso los número validos serán del 0 al 9 añadiendodesde la a ó A a la f ó F. Por tanto el número 0F será el 15, 0E será 14.

En la especificación del color utilizaremos para definir la proporción de cada color un número del 0

al FF (255), 0 indica nada de ese color y FF la mayor proporción del color.

Algunos ejemplos de colores serán:

#000000 Negro(Negro)

#FFFFFF Blanco(Blanco)

#FF0000 Rojo(Rojo)

#00FF00 Verde(Verde)

#0000FF Azul(Azul)

Algunos colores están predefinidos y pueden ser referenciados por su nombre, estos solo seránvalidos para Netscape e Internet Explorer de Microsoft, estos colores predefinidos son:

Color Predefinido Muestra Color Predefinido Muestra

black negro olive oliva

teal teal red rojo

blue azul maroon marron

navy azul marino gray gris

lime lima fuchsia fucsia





white blanco green verde

purple purpura silver plata

yellow amarillo aqua agua

El Netscape 2.0 o superior soporta mayor cantidad de colores: paleta completa del Netscape 2.0.

Atributos de <BODY>

La etiqueta BODY presenta algunos atributos que son de definición global para todo el documento,estos definirán los colores y el fondo del documento HTML.

Los atributos de BODY son:

<BODY BACKGROUND="URL" BGCOLOR=#rrvvaa TEXT=#rrvvaa LINK=#rrvvaaVLINK=#rrvvaa >

q BACKGROUND="URL":

Definirá la imagen que se utilizará de fondo del documento HTML, la URL definida será el caminoa una imagen. Esta se muestra debajo del texto y las imágenes del documento HTML. En el caso de

que la imagen no rellene todo el fondo del documento esta será reproducida tantas veces como seanecesario.

q BGCOLOR=#rrvvaa ó nombre del color:

Indicará el color del fondo del documento HTML, solo se utilizará si no se ha definido una imagende fondo, o si esta imagen no puede obtenerse.

q

TEXT=#rrvvaa ó nombre del color:

Especificará el color del texto normal dentro del documento HTML. Por defecto será normalmentenegro.

q LINK=#rrvvaa ó nombre del color:

Indicará el color que tendrán los hiperenlaces que no han sido accedidos. Por defecto será azul.

q VLINK=#rrvvaa ó nombre del color:

Color de los enlaces que ya han sido visitados. Por defecto es un color azul más oscuro.





Ejemplos

Algunos ejemplos podrían ser:

<body background= "http://www2.uca.es/fondos1/ fondo15.gif">

El documento tendrá como fondo la imagenindicada en la URL

<body bgcolor=blue text=white link=red vlink=aqua>En este caso el fondo será azul, el textoblanco, los enlaces rojos y los enlacesvisitados color agua

<body bgcolor=0000FF text=FFFFFF link=FF0000vlink=008200>

Este caso es similar al anterior pero usandoel formato hexadecimal para definir loscolores, el fondo será azul, el texto blanco,los enlaces rojos y los enlaces visitadoscolor verde oscuro

5.1 - Espaciados y saltos de línea

El espaciado en HTML

En HTML no está permitido más de un elemento blanco (espacios, tabuladores, saltos de línea)separando cualquier elemento o texto, todos estos son convertidos a un único espacio blanco y el restose omiten en la representación del documento. En el documento fuente podremos usar el espaciado quedeseemos, y no deberá estar bien formateado, este se conseguirá con las etiquetas HTML.

Existen unas etiquetas especiales HTML para definir estos elementos de control de texto. Acontinuación se detallará cada una de ellas.

<P> Cambio de párrafo :

Definirá un párrafo, se usará al comienzo o al final de un párrafo de texto e introducirá un espaciadode separación (normalmente dos líneas) con el próximo texto que se exprese. Esta etiqueta se puedeutilizar para introducir un espaciado entre cualquier elemento HTML y no solo servirá para separartexto.

El efecto se conseguirá introduciendo la etiqueta <P> en el punto en el que deseemos que se

produzca el espaciado. La etiqueta de fin de párrafo </P> es opcional no siendo necesario incluirla.

Existen elementos HTML que ya introducen separaciones de líneas, tanto antes como despues, portanto en estos casos no es necesario, pero sí posible, introducir el elemento de nuevo párrafo. No es





necesario utilizar esta etiqueta ni antes ni después de cabeceras <H n>, después de <HR> (reglashorizontales), <ADDRESS>, <BLOCKQUOTE>, <PRE>. Tampoco es necesario dentro de listas traslos elementos <LI>, <DT> ni <DD>, que se utilizan para separar los distintos elementos de una lista.

Ejemplo

Inst.HTML Esta es una frase que forma un parrafo.<P>Este es el otro parrafo.

Resultado

Esta es una frase que forma un parrafo.

Este es el otro parrafo.

Explicación

En el punto donde se ha introducido la instrucción HTML de nuevo parrafo se observa unaseparación de dos líneas.

<BR> Salto de línea :

Su utilidad es similar al anterior pero en este caso el espaciado del texto es menor, se pasará a lalínea siguiente, sin dejar una línea de separación. En este caso será un cambio de línea y no de parrafo.Igualmente no es necesario usarlo tras los elementos que llevan implícitos un salto de línea, ni tampocoes necesaria la etiqueta de fin </BR>.

Ejemplo

Inst.HTML

Esta es una frase de la primera línea.<BR>Esta es la siguiente línea

Resultado

Esta es una frase de la primera línea.Esta es la siguiente línea

Explicación En el punto donde se ha introducido la instrucción HTML de nueva línea se observa el cambiode línea.

<HR> Regla Horizontal :

<HR ALIGN= LEFT | RIGTH |CENTER NOSHADE SIZE= n WIDTH= n>

Se usa para dividir un documento en distintas secciones, mostrará una línea horizontal de tamañodeterminable. Se asemejará al salto de página dentro de un documento.

Si no se especifican atributos dibujará una línea que ocupe el ancho de la pantalla del navegador y





introduciendo una separación con el texto anterior y siguiente, equivalente a cambio de párrafo. No esnecesaria la etiqueta de fin </HR>. Con los atributos podemos especificar su forma y tamaño, estoatributos son:

q ALIGN=LEFT, RIGTH ó CENTER:

Indicará la forma en la que se alineará la regla en el caso de no ocupar todo el ancho de la pantalladel navegador, a la izquierda, derecha o centrada.

q NOSHADE:

No muestra la sombra de la barra, evitando el efecto en tres dimensiones.

q SIZE= n:

Indicará la altura de la regla en puntos de la pantalla.

q WIDTH= n ó n%:

Especificará el ancho de la regla, se puede especificar en tanto por ciento del ancho de la ventana <HRWIDTH=50%> o en valor absoluto <HR WIDTH=75> en puntos de la pantalla.

Ejemplos

Inst.HTML

<HR>

Resultado

Explicación

Mostrará un línea que ocupa todo el ancho disponible y de altura 1 con sombra.

Inst.HTML

<HR SIZE=5 NOSHADE>

Resultado

Explicación

Mostrará un línea que ocupa todo el ancho disponible, es de 5 de alto y no tiene sombra niefecto dimensional.

Inst.HTML

<HR SIZE=5 WIDTH=50% ALIGN=LEFT>





Resultado

Explicación

Mostrará un línea que ocupa el cincuenta por ciento del ancho disponible, es de 5 de alto y estáalineada a la izquierda.

<PRE> Texto preformateado :

Muestra un porción de texto en el que se respetan los saltos de línea, tabuladores y espacios enblanco. Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostrarátal y como se expresa en el fuente del documento html. Para mostrar este texto se utiliza una fuente deespaciado fijo más pequeña que el texto normal.

Presenta un problema cuando la línea es demasiado larga, ya que no la corta el navegador y se

mostraría tal y como aparece en el fichero fuente. No se recomienda como forma rápida de convertir undocumento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene unabuena presentación.

Dentro de la etiqueta PRE no tendrán validez la mayoría de las instrucciones HTML, solo se podránutilizar <B>, <I> y los hiperenlaces. El resto de las etiquetas HTML son ignoradas.

Ejemplo

Inst.HTML

<PRE>Este texto se verátal y como seescribió. </PRE>

Resultado

Este texto se verá

tal y como se

escribió.

Explicación

Como se ve utiliza otra fuente de caracteres distintas de espaciado fijo y se respetan losespacios en blanco y los saltos de línea de la instrucción original.

<CENTER> Centrado de texto e imágenes :

Se utilizará para centrar líneas de texto, imágenes o cualquier otro elemento HTML (tablas, listas,

etc ...). Todo lo que se encuentre entre las etiquetas de inicio y fin aparecerá centrado en el navegador.

Ejemplo





Inst.HTML

<CENTER> Este texto se verá centrado </CENTER>

Resultado

Este texto se verá centrado

Explica

ción

El texto aparece centrado en el navegador. Se puede utilizar tanto para una línea como para un

párrafo, y para cualquiera de la instrucciones del lenguaje HTML.

Inst.HTML

<CENTER> El texto y la imagen se centran<BR> <IMG SRC="/iconos1/or_star.gif"> </ CENTER>

Resultado

El texto y la imagen se centran

Explica

ción

Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o

cualquier otra estructura del lenguaje HTML.

Espacios en blanco :

Con esta secuencia de caracteres conseguiremos espacios en blanco que se mostrarán de formaefectiva, pudiendo mostrar más de un espacio en blanco de separación. Se incluirán tantas expresiones como espacios en blanco se desee conseguir.


Como representar caracteres especiales

Los caracteres acentuados y algunos caracteres especiales que usa el lenguaje HTML para definirsus etiquetas no se pueden incluir en un documento de manera normal, se deben utilizar una serie desecuencias de escape que al mostrar el documento se sustituyen por el carácter deseado.

Estas secuencias de escape comienzan todas con el símbolo ampersand (&), seguido de un texto(siempre en minúsculas) que define el carácter deseado y termina con el símbolo punto y coma (;). Elerror más común cuando se usan estas secuencias de escape es no utilizar el punto y coma final, encuyo caso se mostrará el literal que define la secuencia, en lugar del carácter deseado. No es necesario

dejar espacios en blanco ni antes ni después de los caracteres especiales, para que quedenperfectamente encuadrados en la palabra.

Elementos del lenguaje HTML





Si incluimos en el texto de un documento HTML el símbolo menor que (<) o mayor que (>) seinterpretará siempre como la definición de una etiqueta y por tanto no se mostrarán al interpretar eldocumento.

Para expresar estos símbolos y otros del lenguaje HTML usaremos las siguientes secuencias de

escape:

Sec. Escape Simbolo

< Signo < (menor que)

> Signo > (mayor que)

& Signo & (ampersand)" Se mostrará el signo de comillas "

Caracteres acentuados

Existen una serie de etiquetas que nos permite mostrar los caracteres acentuados y caracteres latinos(ñ). Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de escape, semostrarán correctamente. Usted en su ordenador con su navegador podrá leer estos caracterescorrectamente siempre y cuando tenga el mismo código (español) que el autor del documento.

Los primeros 127 caracteres del código ASCII son comunes para todos los países e incluyen todaslas letras del alfabeto, a partir del 128 son específicos para cada lenguaje, entre estos se incluyen loscaracteres acentuados y la letra ñ, por tanto si alguien desde otro país que tenga un código incompatibleintenta leer su documento, probablemente encuentre caracteres extraños que no sepa interpretar y portanto no será capaz de leer los caracteres acentuados.

Existen diversas secuencias que definen los distintos tipos de acentos: agudo, grave o circunflejo.Para el acento agudo usaremos el literal acute, tanto para las mayúsculas como para las minúsculas. Portanto incluiremos el símbolo de ampersand (&) la vocal que deseamos acentuar, la palabra acute y elsímbolo punto y coma (;). Representándose los acentos de la forma:


á á Á Á

é é É É





í í Í Í

ó ó Ó Ó

ú ú Ú Ú

Para la letra ñ usaremos la secuencia tilde, del siguiente modo:


ñ ñ Ñ Ñ

Para el acento grave usaremos grave, siendo en este caso la representación:


à à À À

è è È È

ì ì Ì Ì

ò ò Ò Ò

ù ù Ù Ù

Otros Símbolos

Para expresar una carácter por su valor en el código ASCII, usaremos el símbolo # , seguido de su

equivalente numérico.

Para el acento circunflejo utilizaremos el literal circ y para la diéresis utilizaremos el literal uml.

Para expresar los símbolos de apertura interrogación, apertura de exclamación y estos acentosusaremos:


¿ ¿ ¡ ¡

ü ü Ü Ü





î î Î Î

Algunos otros símbolos especiales serán los siguientes.

Sec. Escape Simbolo Sec.Escape Simbolo

ç ç Ç Ç

® ® Símbolo de registrado © © Símbolo de Copyright.

&#nnn; Donde nnn es un número decimal, el carácter nnn del código ISO-8859-1(ASCII).

5.3 - Cabeceras

<H1> - <H6> Cabeceras de títulos

En un documento HTML es posible definir seis tipos distintos de cabeceras que serán normalmente

el título del documento y los distintos subapartados que lo forman.

La etiquetas que definen las cabeceras serán <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. El textoindicado entre las etiquetas de inicio y de fin será el afectado por las cabeceras:

Para la instrucción:

<H1>Este texto aparecerá resaltado</H1>

el resultado será:

Este texto aparecerá resaltado

Lo normal es utilizar las cabeceras de forma consecutiva y descendente, es decir, comenzaremos eldocumento con la cabecera <H1> que definirá el titulo, luego para los apartados principalesutilizaremos la cabecera <H2>, para subapartados <H3>, etc ... Utilizándolas así de forma consecutiva.

Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento pararesaltar cualquier texto. El modo en que se presentan las cabeceras pueden variar de un navegador aotro, y solo se puede asegurar que se mostrará de distinta forma en orden de importancia. Lo normal es





que la <H1> sea negrita y muy grande, <H2> negrita y grande, <H3> itálica y grande.

<H n ALIGN=CENTER>: Alineación de la cabecera

Puede presentar un atributo, que especificará que la cabecera se mostrará centrada.ALIGN=CENTER.

La forma de expresarlo será:

<H1 ALIGN=CENTER>Este texto aparecerá resaltado y centrado</H1>


5.4 - Tamaño y Color de las fuentes de caracteres

Utilidad

En el apartado anterior se vio el modo de definir los distintos títulos de documento, mediantecabeceras. Estas son poco flexibles y predeterminadas.

Existe otra etiqueta HTML que permite una más sencilla adaptación del tamaño de las fuentes ypermite además modificar su color.

Con esta podremos incluir texto resaltado en medio de una frase, con las cabeceras no es posible yaque estas introducen automáticamente un salto de línea detrás, y permitirá incluir párrafos de distintostamaños o colores, proporcionando una mayor versatilidad y pudiendo crear efectos másespectaculares.

La etiqueta que permite esto se llama FONT y presenta atributos que nos permiten modificar eltamaño y color del texto incluido entre la etiqueta de inicio y fin.

<FONT SIZE= n> : Tamaño de la fuente

El atributo SIZE permite indicar el tamaño de la fuente, su valor puede estar entre 1 y 7.Incrementándose de tamaño progresivamente desde 1, que es la fuente de menor tamaño, hasta 7 que lafuente de mayor tamaño. El texto normal equivale a la fuente de tamaño 3, por tanto los valoresmenores que 3 serán fuentes más pequeñas que el texto normal y las mayores que 3 serán de mayortamaño.





El tamaño también puede indicarse de forma relativa, indicando el incremento o detrimento a partirde la fuente base. Por defecto la fuente base será 3, por tanto si se indica como valor +1 la fuente seráde tamaño 4.

Existe una etiqueta que redefine la fuente por defecto, esta etiqueta es: <BASEFONT SIZE ...>

Los elementos de tamaño de fuentes pueden ser definidos para todo un documento, teniendo validezdentro de elementos tales como listas y formularios, pero no tendrán validez global en las tablas,debiendo definir cada una de las celdas al tamaño de fuente deseado.

Ejemplos de tamaños de fuentes


<FONT SIZE=2>Muestra</FONT> Muestra Obtendriamos en este caso texto de tamaño defuente 2

<FONT SIZE=6>Muestra</FONT> Muestra Este texto es de tamaño de fuente 6

<FONT SIZE=-1>Muestra</FONT> MuestraObtendriamos también en este caso texto detamaño de fuente 2, pero lo definiríamos deforma relativa: 3-1=2

<FONT SIZE=+2>Muestra</ FONT> Muestra

Así definiríamos fuente detamaño 6 de forma relativa: 3+2=5

<FONT SIZE=6> Muestra<FONT SIZE=1> Muestra </ FONT> Muestra </FONT>

Muestra Muestra Muestra

Se pueden combinar en unamisma frase varios tamañosde fuentes

<FONT SIZE=4> Muestra <B><I> < A HREF="http://www.uca.es"> Muestra </A> </I> Muestra

</B> </FONT>

Muestra Muestra Muestra Se pueden combinar conelementos de resalte ehiperenlaces

<BASEFONT SIZE= n> : Fuente por defecto

Definirá el tamaño de la fuente que se considerará como base para definir los tamaños de fuenterelativos.

Esta etiqueta no define el tamaño de la fuente por defecto, para el texto normal, y solo se usa paracálculos de tamaño de fuente relativos. La utilidad no es muy amplia, y se podría utilizar cuando en un


http://www.uca.es/

http://www.uca.es/




documento en el que todos los tamaños estén definidos de forma relativa y se desee cambiar de formaglobal el tamaño de las fuentes.

Si no incluye esta etiqueta el valor base para estos cálculos es 3, con esta se puede variar, como seve en el ejemplo.



<BASEFONT SIZE=5>


Muestra Muestra

El nuevo valor para el calculo del tamaño relativoserá 6, notándose el efecto en el tamaño de lasfuentes

<FONT COLOR= texto color ó rrvvaa> : Color de la fuente

El atributo COLOR nos permite definir el color que tendrá el texto incluido entre las etiquetas deinicio y fin. Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versión 2.0 o superior.

El modo de definir los colores es similar al explicado para los atributos de BODY, al que le

remitimos si no le quedo claro.

Este atributo puede ser definido de forma conjunta con el atributo SIZE, o de forma independiente,siendo atributos de la misma etiqueta. Si se define el atributo SIZE solo, el color del texto que defineserá el por defecto, si se define con la etiqueta COLOR solo, el tamaño será el de la fuente base.

Al igual que en el caso del tamaño de la fuente pueden ser utilizados junto con otros elementos dellenguaje HTML como listas y formularios y pueden ser utilizados conjuntamente con los elementos deresalte

El cambio de color no afectará al texto o elementos incluidos en un hiperenlace, utilizándose paraestos el color por defecto definido en la etiqueta BODY.

Ejemplos de definición de colores de fuentes

Algunos ejemplos de la definición de colores de fuente podrían ser:






http://-/?-

http://-/?-






<FONT COLOR=FF00FF>Muestra</FONT> MuestraEl texto se mostrará de uncolor lila, al mezclar loscolores rojo y azul.

<FONT COLOR=AQUA>Muestra</FONT> MuestraTambién se puede utilizaruno de los colorespredefinidos.

<FONT SIZE=5 COLOR=red> Muestra </FONT> Muestra Se puede combinar con eltamaño de fuente

<FONT COLOR=NAVY> Mue<FONT SIZE=4COLOR=BLUE>str</FONT>a </FONT> Muestra

Se pueden combinarvarios colores en unamisma frase o palabra.

<H3> <FONT COLOR=81426E> Mu<I>es</I>tra </ FONT> </H3> Mu

es

tra

Pueden ser utilizados junto con otros elementos

de resalte como cabeceras,estilos físicos y lógicos,etc ...

5.5 - Estilos físicos y lógicos

Estilos físicos y Estilos lógicos

Como estilos definiremos los distintos efectos que se pueden aplicar al texto normal. Estos efectosson los resaltes (negrita, cursiva, subrayado, etc ...) que se pueden usar.

En HTML existen dos grupos principales de estilos los lógicos y los físicos. Los físicos son aquellosque siempre causan un mismo efecto (negrita, cursiva, ...) y los lógicos indicarán un tipo de texto (cita,

nombre de persona) que por sus características tiene un modo de mostrarse propio.

Se pueden utilizar ambos estilos para especificar un mismo efecto, por ejemplo para obtener unafrase resaltada podemos usar el estilo físico (negrita) o el estilo lógico (STRONG) y en ambos casos elresultado puede ser el mismo.

Es más recomendado, sin embargo, utilizar el estilo lógico, ya que en este el modo en que se ven losdistintos efectos puede ser definido por el usuario, de forma que se pueda obtener una presentación

personalizada. Además en un futuro los navegadores podrían añadir modos más sofisticados depresentar los distintos estilos y si están definidos de forma lógica la adaptación es más sencilla. Y porúltimo y más importante, al utilizar estilos lógicos el modo de escribir HTML se hace independiente decomo se presentará finalmente el texto, se utilizará el estilo según el tipo de texto que sea y no segúncomo se debe presentar.





La tendencia actual de los navegadores es el uso de los estilos físicos olvidando un poco laversatilidad de los estilos lógicos, pero sin embargo ambos estilos pueden ser usados indistintamente,sin ningún problema.

Estilos Físicos.

El efecto se aplicará al texto expresado entre la etiquetas de inicio y fin. Los estilos físicos son lossiguientes:


<B> Ejemplo Negrita.

<I> Ejemplo Cursiva.

<TT> EjemploMaquina de escribir, muestra una fuente de caracteres deespaciado fijo.

<BLINK> Ejemplo Parpadeo.

<SUB> Ejemplo Subíndice. Para Netscape 2.0+

<SUP> Ejemplo

Superíndice. Para Netscape 2.0+

<BIG> EjemploTexto grande, se utilizará el mayor tamaño de fuente. ParaNetscape 2.0+

<SMALL> EjemploTexto pequeño, se utilizará la fuente de menor tamaño. ParaNetscape 2.0+

Los estilos se pueden combinar entre sí obteniendo cualquier efecto deseado.

Ejemplo

Inst.HTML

Este texto es <B>negrita, <I>cursiva y <BLINK>parpadeante </BLINK></I></B>

Resultado

Este texto es negrita, cursiva y parpadeante

Explicación

El texto es por tramos negrita, cursiva y parpadeante.





Estilos lógicos

En este caso se definen las situaciones o tipos de frases y estas tomarán la representación másadecuada a cada caso. Estos estilos son:


<ADDRESS> EjemploSe utilizará para especificar direcciones de correoelectrónico.

<BLOCKQUOTE> Ejemplo

Introduce citas textuales o texto destacado, eneste caso el texto se separará del textocircundante y se ajustará a los márgenes derechoe izquierdo.

<CITE> Ejemplo Indica el titulo de una película o un libro.

<CODE> Ejemplo Código fuente de un lenguaje de programación.

<DFN> Ejemplo Especifica una definición.

<EM> Ejemplo Indicará enfasis.

<KBD> Ejemplo Texto introducido desde el teclado.

<SAMP> Ejemplo Mensajes de estado de la computadora.

<STRIKE> Ejemplo Texto desechado, tachado.

<STRONG> Ejemplo Especificará texto resaltado.

<VAR> Ejemplo Indicará una variable.

5.6 - Definición de Listas

Las listas en HTML

El lenguaje HTML proporciona un modo sencillo de representar elementos en forma de lista.Dentro de una lista de puede incluir cualquiera de los elementos HTML, e igualmente una lista puedeincluirse dentro de formularios, tablas, etc.





Existen principalmente tres tipos de listas: las listas no ordenadas, las listas ordenadas y las listas dedefiniciones.

<UL> Listas no ordenadas

Este tipo de lista se usan para enumerar elementos que no tengan un orden definido. Se especificarácon el elemento <UL>, todo lo que se incluya dentro de esta etiqueta y la de cierre formará la lista. Conlos elementos <LI> se indicarán cada uno de los componentes de la lista. El formato es el siguiente:

<UL TYPE = DISK ó CIRCLE ó SQUARE ><LH> Titulo de la lista </LH><LI> Elemento 1 <LI> Elemento 2


</UL>

Para marcar los distintos elementos de la lista se usarán unos símbolos, que pueden ser un disco(DISK), un circulo (CIRCLE) ó un cuadrado (SQUARE), seleccionables con el atributo TYPE.

Con la etiqueta <LH> definiremos el titulo de la lista, este es opcional y aparecerá en la partesuperior de esta.

Igualmente es posible definir listas de varios niveles, que será listas anidadas, listas dentro de listas.Y combinar este tipo de lista con las que se explicarán en los proximos apartados.

Ejemplos

Inst.HTML

<UL ><LH> Titulo </LH><LI> Elemento 1<LI> Elemento 2<LI> Elemento 3</UL>

Resultado

Tituloq Elemento 1q Elemento 2q Elemento 3

Explicación

Este será el caso básico de lista no ordenada. Se podrán incluir tantos elementos como se deseeny estos podrán ser texto normal, texto resaltado con alguno de los estilos, imágenes, etc ...





Inst.HTML

<UL TYPE=SQUARE><LI> Elemento 1<LI> Elemento 2<UL TYPE=CIRCLE>


</UL>

<LI> Elemento 4</UL>

Resultado

s Elemento 1s Elemento 2

r Elemento 3.1r Elemento 3.2

s Elemento 4

Explicación

Ahora definimos una lista anidada, es decir una lista dentro de una lista, basta con incluir elnuevo elemento UL dentro del elemento UL de la lista original. En este ejemplo tambiénusamos distintos elementos definibles con TYPE, para indicar los componentes de la lista.

<OL> Listas ordenadas

Estas listas serán similares al caso anterior pero en este se usa un número para indicar el orden decada elemento de la lista. El ser ordenada no significa que ordene los elementos alfabéticamente sinoque los elementos guardan un orden que es el número que indexa la lista.

<OL START = n TYPE = A ó a ó I ó i ó 0 ><LH> Titulo de la lista </LH><LI> Elemento 1 <LI> Elemento 2


</OL>

El punto de comienzo siempre será el 1 si no se indica en START con otro valor de comienzo y eltipo de numeración puede seleccionarse con el atributo TYPE. Sus posibles valores son:

q A : Letras mayúsculas.q a : Letras minúsculas.q I : Número romanos en mayúsculas.q i : Número romanos en minúsculas.q 0 : Números (es por defecto por tanto no hay que indicarlo).





Ejemplos

Inst.HTML

<OL ><LI> Elemento 1<LI> Elemento 2<LI> Elemento 3</OL>

Resultado

1. Elemento 12. Elemento 23. Elemento 3

Explicación

Este será el caso básico de lista ordenada.

Inst.HTML

<OL TYPE=I><LI> Elemento 1<LI> Elemento 2<OL TYPE=a>


</OL><LI> Elemento 4

</OL>

Resultado

I. Elemento 1II. Elemento 2

a. Elemento 3.1b. Elemento 3.2

III. Elemento 4

Explicación Ahora definimos una lista anidada y usamos distintos elementos para la numeración de lasopciones.

<DL> Listas de definiciones

En esta lista existirán dos elementos la definición y el termino, se usará principalmente para listas enlas que se incluirán una palabra o frase y su definición (diccionario). El termino aparecerá pegado en el

borde izquierdo y la definición aparecerá ligeramente tabulada a partir del borde izquierdo.

Se puede usar de forma separada la definición y el termino, pudiendo por tanto incluir solodefiniciones o solo términos. El incluir solo términos podría usarse para sangrar el comienzo de un





párrafo.

<DL><LH>Titulo de la lista </LH><DT>Termino 1 <DD> Definición 1 <DT>Termino 2

<DD> Definición 2 . . .<DD>Termino N <DT> Definición N

</DL>

El titulo de las lista <LH> como en los casos anteriores es opcional.

Ejemplos

Inst.HTML

<DL ><DT> Coche<DD> Vehiculo de cuatro ruedas<DT> Moto<DD> Vehiculo de dos ruedas</DL>

Resultado

CocheVehiculo de cuatro ruedas

MotoVehiculo de dos ruedas

Explicación

Como se ve se coloca en una posición la definición y en otra el termino.

Ejemplos<dl>

<dd><font SIZE=+1><img src="/servicios/iconos/confis.gif" align=middle border=0>Conexión a la Red.</font></A>

<dl><dd><A HREF="/servicios/conecfisica/Normativ.html"><img src="http:// www2.uca.es/iconos1/redstar.gif" align=middle border=0> Normativa deconexión a Red.</A>

<dd><A HREF="/servicios/conecfisica/software.htm"><img src="http://www2.uca.es/iconos1/redstar.gif" align=middle border=0> Instalación de Software deComunicaciones.</A><dd><A HREF="/servicios/solicitud.htm"><img src="http://www2.uca.es/





Inst.HTML

iconos1/redstar.gif" align=middle border=0> Solicitud de Servicios deComunicaciones.</A><dd><A HREF="/servicios/conecfisica/proxy.html"><img src="http://www2.uca.es/iconos1/redstar.gif" align=middle border=0> Servidores Proxy.</A>

</dl>

<dd><a href="/servicios/actuali-soft/software.html"><dd><font SIZE=+1><imgsrc="http://www2.uca.es/iconos/icono541.gif" align=middle border=0> Actualización

del Software de Comunicaciones.</font></a><p><dd><A NAME="correo"><dd><font SIZE=+1><a HREF="http://www.uca.es/ servicios/correo/correo.htm"><img src="/servicios/iconos/mail.gif" align=middleborder=0> Mensajería Electrónica.</a></font></A><dl>

<dd><A HREF="/servicios/correo/prac-eudora/portada.html"><img src="http:// www2.uca.es/iconos1/redstar.gif" align=middle border=0>Manual Práctico deEudora.</A><dd><A HREF="/servicios/correo/mensaje_institu.html"><img src="http://

www2.uca.es/iconos1/redstar.gif" align=middle border=0>MensajeríaInstitucional.</A></dl>

</dl>

Resultado

Conexión a la Red. Normativa de conexión a Red.

Instalación de Software de Comunicaciones.

Solicitud de Servicios de Comunicaciones. Servidores Proxy.

Actualización del Software de Comunicaciones.

Mensajería Electrónica. Manual Práctico de Eudora.

Mensajería Institucional.

Explicación

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu, en elque se incluyen tanto imágenes como texto. La lista de definiciones se utiliza para mostrar elmenu de forma correcta con sus correspondientes niveles y subniveles.

Es posible anidar cualquier tipo de lista entre sí, incluso listas de distinto tipo.

5.7 - Hiperenlaces





























Hiperenlaces

Es la utilidad básica del hipertexto, permite indicar zonas de texto o imágenes que si sonseleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del

documento actual.

Para definir un hiperenlace podemos utilizar cualquier elemento HTML, no debe ser textonecesariamente, podemos usar, cabeceras (<Hn>), cualquiera de los estilos, una imagen, etc .... Unhiperenlace igualmente podrá definirse dentro de cualquier elemento HTML: listas, párrafos de texto,tablas, formularios.

El texto del hiperenlace aparece normalmente resaltado sobre el texto normal, en azul y subrayado,

en el caso de las imágenes, si tienen definido un borde este aparecerá resaltado en color azul. Lamayoría de los navegadores cuando la zona por la que pasa el cursor es sensible, este cambia deaspecto indicándolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar enesa zona. Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces.

El texto que define el hiperenlace debe ser clarificador sobre el documento al que referenciamos,debemos evitar referencias especificas que hagan al texto poco legible. Igualmente deberá concordarcon el texto del párrafo donde se englobe, se debe evitar el uso de pulse aquí.

Por ejemplo:

Puede encontrar mas información sobre vacas pulsando aquí

se podría sustituir por:

Disponible más información sobre vacas.

El usuario que lea el texto ya sabrá al verlo resaltado que puede pulsar ahí.

<A HREF=...> Hiperenlace

Son los enlaces con documentos externos al actual. En este caso se indicará una URL que definirá eldocumento al que se accede si se sigue el enlace. La forma de indicarlo será:

<A HREF="URL a la que se accede">Texto del Hiperenlace</A>

El texto indicado entre las etiquetas de comienzo y de fin se presentará de forma resaltada y en elcaso de seleccionar este texto el documento actual cambiará por el especificado en la URL.


http://-/?-

http://-/?-




Igualmente se puede indicar una imagen como enlace, en este caso entre las etiquetas delhiperenlace indicamos la inclusión de la imagen, también dentro de la etiqueta del hiperenlace sepueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del textoafectado por el hiperenlace. Un ejemplo sería:

<A HREF="URL a la que se accede"><IMG SRC="Imagen"> y también texto</A>

En este caso aparecerá la imagen con el borde resaltado para indicar que es un hiperenlace.

Ademas de enlaces con el servicio http podremos utilizar cualquiera de los servicios de internet quese puede expresar en una URL. Es posible por tanto indicar enlaces a servidores FTP, servidoresGOPHER o de NEWS, indicando como URL aquella que identifica al servidor que queremos acceder.

Es importante indicar el nombre completo de la maquina a la que se accede, es decir el nombre y eldominio. Si se indica www, las maquinas de la red local si podrán localizarlo, pero para maquinas

externas la referencia podría ser a otra maquina. Por tanto se debe indicar www2.uca.es para asegurarque es accesible independientemente del lugar desde el que se conecte el cliente.

Utilizaremos los hiperenlaces para dividir de forma conveniente la información. Hay que evitar losdocumentos excesivamente largos, estos se pueden dividir en distintos documentos a los que accederpor hiperenlaces, a partir de un índice.

URL absolutas y relativas

Para definir la URL podemos utilizar direcciones absolutas o relativas. Por direcciones absolutasentenderemos la URL completa, es decir, http://maquina.dominio/camino/fichero.html. En el casode las relativas todo lo que no pongamos de la URL se tomará de la URL del documento que contieneel hiperenlace, por ejemplo si no indicamos el servidor, se considerará el actual y si solo indicamos unfichero html se considerará que se encuentra en el servidor y directorio del documento que loreferencia.

Una URL relativa comenzará siempre por un nombre de directorio o por un fichero, ya que en estecaso se asume que el servicio y el servidor - (http://maquina.dominio) - es el mismo del documentoactual.

Puede comenzar de alguna de las siguientes formas:

q Por una barra / , que indica que el camino del fichero se especifica desde el directorio raiz delservidor.

q Por dos puntos y una barra ../ , significa subir en la estructura del directorio. Se considerará apartir del directorio anterior.

q Por un nombre de fichero o directorio, considerandose este a partir del directorio actual.





Algunos ejemplos serían:

Ejemplos

Nos encontramos en el documento http://www.uca.es/visita/cadiz.html y en este se encuentran los

siguientes hiperenlaces.URLrelativa

<A HREF="../internet/internet.html"> ..

URLque seactiva


Explicación En este caso se indica la URL completa, por tanto no es relativa y no se podrá utilizar ningúndato de la posición actual.

URLrelativa

<A HREF="/internet/internet.html"> ..

URLque seactiva


Explicación

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba elhiperenlace: www.uca.es y al comenzar la directorio por / se indica que este se toma desde laraíz del servidor, no siendo valido en este caso ningún dato del directorio actual.

URLrelativa

<A HREF="bahia/cadiz.html"> ...

URLque seactiva

http://www.uca.es/visita/bahia/cadiz.html

Explicación

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra "/".Como comienza con un directorio, se considera que este se encuentra a partir del directoriodonde está el documento actual

URL

relativa

<A HREF="bahia.html"> ...





URLque seactiva

http://www.uca.es/visita/bahia.html

Explicación

En este caso solo se indica un fichero HTML, por tanto se considera que este fichero seencuentra en el mismo directorio del documento que los referencia. Considerando por tanto elmismo servidor y el mismo camino, pero distinto directorio.

Es una buena costumbre utilizar direcciones relativas, además de ahorrar escritura, permite que lapágina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces,haciendo por tanto al documento más portable.

Como se vio en el capitulo dedicado a la cabecera de un documento HTML, la etiqueta BASE indica la dirección por defecto en los enlaces, esto tendrá efecto en las URL relativas, caso de indicarsese considerará esta como dirección base y no la actual del documento.

<A NAME=...> Elemento Ancla

Sirve para indicar puntos de un documento que son accesibles directamente. Marcará las distintaszonas de un documento. La forma de indicarlo es:

<A NAME=" Id. del ancla">Texto del ancla</A>

A cada ancla se le dará un nombre distinto que será el que se utilice luego para referenciarlo. Eltexto que define a la etiqueta no tendrá ningún tipo de resalte, y solo se utiliza como punto de destinodel hiperenlace.

La forma de especificar un enlace que acceda a un punto determinado del mismo documento es:

<A HREF="# Id. del ancla">Texto del enlace al ancla</A>

Será un enlace a la zona del documento actual que se había marcado con la etiqueta indicada.También es posible acceder a un ancla de un documento externo de la forma:

<A HREF=" Dirección URL# Id. del ancla">Texto del enlace al ancla</A>

De esta forma se podrá acceder a puntos determinados o secciones de un documento de formadirecta.

La utilidad principal es la creación de índices en documentos largos, al comienzo del documento seespecifica el índice con enlaces a las distintas anclas y dentro del documento se indica el comienzo decada apartado con el ancla que lo define.





5.8 - Imágenes

Imágenes en los documentos HTML

Una de las características principales del lenguaje HTML y de la WWW es la introducción deelementos multimedia, en este apartado veremos como introducir gráficos y ficheros de imágenes en undocumento HTML.

En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatosgráficos: GIF, JPEG ó XBM. El formato más extendido y practico es el GIF, todos los navegadoresgráficos de la Web soportan este formato, además existen gran cantidad de programas de tratamientode gráficos que permiten grabar los gráficos o convertir gráficos a GIF. Este formato, así mismo, utiliza

algoritmos de compresión que hacen que sus ficheros sean de corto tamaño y apropiados para sutransmisión por la red.

El formato GIF es más recomendado para iconos, gráficas, ... y el formato JPEG es más útil paraimágenes reales como paisajes, personas, ...

Para poder utilizar otro formato gráfico, necesitará usar un enlace cuyo destino sea el fichero delgráfico. Al seguir el enlace se le pedirá que indique un programa externo que se encargue de mostrar

los ficheros de ese formato gráfico, por lo tanto no pueden insertarse dentro de documentos HTML..

Existe unos casos especiales en las imagenes GIF, que son las imágenes transparentes y las imágenes animadas.

<IMG SRC=...> Inclusión de Imágenes

La etiqueta encargada de mostrar imágenes en HTML es IMG y tiene el siguiente formato:

<IMG SRC="URL de la Imagen" ALT="Texto alternativo a la imagen">

En el punto del fichero HTML en el que queramos que se muestre la imagen incluimos esta etiqueta.Se puede mostrar la imagen, al comienzo del documento, al final o intercalada en el texto. Igualmentese puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas,tablas o formularios. Esta etiqueta no necesita la etiqueta de fin, ya que el efecto de la etiqueta no suproduce sobre un texto o algún elemento HTML.

El atributo SRC indica el fichero de imagen que se incluirá en el documento. Se indicará el caminohasta la imagen en formato URL, el fichero de la imagen deberá tener una extensión apropiada a suformato, por ejemplo si es GIF la extensión será .gif , si es JPEG la extensión será .jpg o .jpeg, si no se





cumple esto la imagen no se mostrará de forma correcta.

Al definir la imagen como una URL, esta imagen no es necesario que se encuentre en el servidorlocal, pudiendo especificar el camino completo y el servidor donde se encuentra la imagen. En estecaso al igual que en los hiperenlaces es posible indicar direcciones de URL relativas al documentosactual, como se vio en el apartado anterior.

Lo normal es referenciar una imagen que se encuentre en el servidor local, ya que el acceso aimágenes en servidores externos puede ser más lento. Por tanto conviene copiar las imágenes e iconosque se usen al servidor local.

A continuación se explica la utilidad de cada unos de los atributos de la etiqueta IMG.

<IMG ... ALT=...> Texto alternativo

El atributo ALT, indicará un texto alternativo a mostrar si no fue posible mostrar la imagen. Se usapara navegadores que no permitan mostrar imágenes, sean solo texto o tenga inhabilitado el mostrarimágenes. Se recomienda cuando existan en el documento imágenes usadas como botones, paramostrar un texto en vez del botón en navegadores que no puedan mostrar gráficos, de esta forma seconsigue que todos los usuarios puedan consultar sus páginas.

<IMG .. ALIGN=...> Alineación de la imágen

Indica como se alinea el texto que sigue a la imágen con respecto a esta. Indicará si la primera frasedel texto se colocará en la parte alta de la imágen, TOP, en el punto medio de la imagen, MIDDLE, oen la parte de abajo de la imágen, BOTTOM.

Tambien se pueden utilizar alineaciones un poco más avanzada, TEXTTOP se alinea justo alcomienzo del texto más alto de la línea (TOP se alinea al tamaño del primer carácter de la línea).ABSMIDDLE, es el centro real de la imagen, con MIDDLE se coloca el texto a partir del puntomedio, con ABSMIDDLE el texto aparece centrado con la imagen. ABSBOTTOM coloca el texto

justo al final de la imagen. Se recomienda que se usen estos últimos al ser más precisa la alineación,aunque solo son validos para los navegadores más avanzados.

Ejemplos

Inst.HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=TOP><B>Numero de Telefono<B>. En esteapartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o preguntaque hacer sobre este manual.


http://-/?-

http://-/?-




Resultado



Explicación Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imágen.

Inst.HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=MIDDLE><B>Numero de Telefono<B>. En esteapartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o preguntaque hacer sobre este manual.

Resultado



Explicación

En este caso el texto está alineado en la parte central de la imágen.

Inst.

HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=BOTTOM><B>Numero de Telefono<B>. En esteapartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta

que hacer sobre este manual.

Resultado

Numero de Teléfono. En este apartado se indica el número de teléfonoque puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Explicación El texto está alineado en la parte baja de la imágen.

Inst.HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=MIDDLE><IMG SRC="/iconos1/q__mark2.gif">

Resultado

Explicación

También es posible alinear imágenes entre sí y imágenes respecto a otros elementos HTML





En los casos anteriores solo se especifica donde se coloca la primera línea del texto y el resto seincluyen debajo de la imágen quedando un efecto muy feo cuando el texto tiene más de una línea.Existen otras alineaciones que incluirán a la imágen insertada dentro del texto. La imágen puede quedara la izquierda, LEFT o a la derecha, RIGHT. No se podrá utilizar en combinación con las anterioresalineaciones.

Ejemplos

Inst.HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=LEFT><B>Numero de Telefono<B>. En esteapartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o preguntaque hacer sobre este manual.

Resul

tado

Numero de Telefono. En este apartado se indica el número de teléfonoque puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual.

Explicación

En este caso aparece la imágen insertada en el texto, de forma que esta se integra en párrafo quela rodea, al contrario que en los casos anteriores

Inst.HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=RIGHT><B>Numero de Telefono<B>. En esteapartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o preguntaque hacer sobre este manual.

Resultado

Numero de Telefono. En este apartado se indica el número de teléfonoque puede utilizar si tiene cualquier duda o pregunta que hacer sobre estemanual.

Explicación

En este ejemplo aparece la imágen alineada a la derecha.

<IMG .. BODER=...> Borde de la imágen

Indicará el tamaño del borde de la imagen, si la imagen se encuentra dentro de un hiperenlace elborde de esta será del color apropiado para indicarlo, en caso contrario el borde será invisible. Si sedesea que no se muestre el borde cuando la imagen sea un enlace se usará BORDER=0.

EjemplosInst.

HTML<A HREF="imagenes.htm"><IMG SRC="/iconos1/q_mark3.gif"></A>





Resultado

Explicación

Como se ve si no se indica nada se muestra un borde entorno a la imágen que activa elhiperenlace.

Inst.HTML

<A HREF="imagenes.htm"><IMG SRC="/iconos1/q_mark3.gif BORDER=0"></A>

Resultado

Explicación

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imágen, que sirve dehiperenlace.

<IMG .. HEIGHT=... WIDTH=...> Tamaño de la imágen

Es posible cambiar el tamaño de la imágen de forma que pueda ajustarse como se desee, pudiendoampliar o disminuir este.

El atributo HEIGHT Determina el alto de la imagen a mostrar, se especifica en puntos de lapantalla (pixeles) o en tanto por ciento sobre el tamaño del documento. En caso de que la imagen sea

mayor o menor se escalará a este tamaño.

El atributo WIDTH indica el ancho al que se mostrará la imagen, escalándola a este tamaño.También se expresará en pixeles o en tanto por ciento.

No es necesario indicar el ancho y el alto, se puede especificar solo uno de las dimensiones,ajustándose la otra a la proporción de la imagen. Es recomendable indicar solo uno de estos parámetrospara que la imágen no se muestre deformada. Igualmente se debe usar el valor relativo en tanto porciento si se desea que la imágen guarde siempre una misma proporción con respecto al texto. Si se

desea mostrar dos imágenes y queremos que una ocupe un cuarto de la pantalla y la otra el espaciorestante, se indica en una el ancho (WIDTH) del 25% y en la otra del 74%, no indicando en ningúncaso el alto (HEIGHT), de esta forma independientemente como sea el tamaño de la ventana delnavegador e independientemente del monitor del cliente, siempre se podrán mostrar ambas imágenesen la misma línea.

Ejemplos

Inst.HTML <IMG SRC="/iconos1/world.gif" WIDTH=100 HEIGHT=25>





Resultado

Explicación

Si no se indican bien ambos valores, teniendo en cuenta la proporción de la imágen esta puedeaparecer deformada.

Inst.HTML <IMG SRC="/iconos1/world.gif" WIDTH=75>

Resultado

Explicación

En este se ve como al indicar uno solo de los parámetros, el otro se ajusta apropiadamente a laproporción de la imágen.

Inst.HTML

<IMG SRC="imagenes/obra_ani.gif" ALIGN=MIDDLE WIDTH=9%> <IMG SRC="/ barras1/constr.gif" WIDTH=89%>

Resultado

Explicación

Si varia el tamaño de la ventana de su navegador, comprobará que el tamaño de las imágenescambia, pero guardan la misma proporción, el obrero ocupa un 9% de la ventana y la barra el86% restante. Y siempre se mostrarán ambas imágenes en la misma línea.

<IMG .. HSPACE=... VSPACE=...> Espaciado de separación de la imágen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto ocualquier otro elemento circundante. Se especificará en puntos. Es similar a BORDER pero en estecaso el margen no se destaca en el caso de los hiperenlaces y además es posible indicar separadamenteel margen horizontal y el vertical. Con el atributo VSPACE se indica el margen vertical.

Ejemplos

Inst.HTML

<IMG SRC="/iconos1/pr_star.gif"><IMG SRC="/iconos1/or__star.gif"><IMG SRC="/iconos1/pr_star.gif" HSPACE=100><IMG SRC="/iconos1/or__star.gif">





Resultado

Explicación

Como se ve en el segundo caso las imágenes aparecen separadas 100 puntos. El espaciado esigual a la derecha que a la izquierda, por tanto también aparece la imagen separada del borde.


En una imagen GIF se puede definir un único color transparente, de forma que en la parte de la imágenque contenía ese color se verá el fondo definido para la página HTML.

Para seleccionar el color que queremos hacer transparente utilizaremos el programa Lview .

Antes de poder definir un color transparente debemos guardar la imagen como GIF89, ya que solo sepuede definir en este tipo de imagenes GIF. Luego seleccionamos Options -> Background Color, siesta opción no es accesible, entonces es que la imagen no se encuentra en un formato valido, una vezhecho esto nos aparecerá la siguiente pantalla:





Donde podremos elegir el color que deseamos hacer transparente. Una vez seleccionado el colorpulsaremos OK y grabaremos la imágen.

La forma más comoda de seleccionar el color transparente es la opción Dropper , al

activarla nos permitirá seleccionar el color transparente directamente pulsando sobre un color de laimágen.

Sí no aparece esta ventana entonces tendrá que guardar la imágen como GIF89, y volver a cargar laimágen otra vez a fin de que se produzca el cambio de formato.

5.9 - Imágenes Sensibles

Imágenes Sensibles

Una de las características principales del lenguaje HTML es la posibilidad de crear imágenessensibles o mapeadas, que son imágenes en las que se definen diversas zonas que activan distintoshiperenlaces, al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define.La imágen se dividirá en distintas áreas que definirán documentos a los que es posible acceder.

Para crear una imagen sensible será necesaria la especificación de las distintas áreas de la imagen ylos enlaces que activaran cada una de ellas. Esto se puede hacer a mano indicando las coordenadas obien lo normal es utilizar algún programa. Existen programas que permiten la definición de lasimágenes sensibles, en estos se presentará la imagen en pantalla y mediante un puntero se podrán irindicando las distintas zonas. Estas zonas podrán ser: rectángulo, circulo, línea poligonal o un punto. Acada una de estas zonas le asignamos una URL que será la que se active cuando se pulse en esa zonadeterminada. Con este programa crearemos un fichero con la extensión .map que será el que defina elmapa de la imagen.

El contenido normal de este tipo de ficheros serán líneas del estilo:

figura_geométrica URL coord1 coord2 ... coordn

Donde figura_geométrica podrá ser una de:

q default: Indicará la acción a realizar si se pulsa en un lugar no definido en el mapeado.

q circle: Definirá un circulo. En un servidor del NCSA las coordenadas se definen el centro delcirculo y un punto externo (que es el caso de nuestro servidor), en uno del CERN se definirá elcentro del circulo y el radio.





q poly: Una línea poligonal de a lo sumo 100 vértices. Se definirá tantas coordenadas comovértices formen la línea poligonal y no será necesario cerrar la figura.

q rect: Definirá un rectángulo. Las coordenadas indicaremos el vértice de la esquina superiorizquierda y la esquina inferior derecha.

q point: Indicará un punto. Si en la figura se definen diversos puntos se activará el enlace delpunto más cercano al lugar donde se pulso en la imagen.

La URL del enlace podrá ser una local, que debe empezar desde el directorio raíz, no vale relativa, obien indicar la URL completa.

Las coordenadas serán pares x e y separados por comas.

Hay que tener en cuenta que las figuras que definen las zonas no deben solaparse ya que un punto

de las imágenes no puede activar dos enlaces. En caso que se solapen se utilizará la que estuvieradefinida en primer lugar en el fichero del mapa.

Si se utiliza la directiva point, no tiene sentido definir la URL por defecto, default, ya que siempreel lugar donde se pulse estará más próximo a un punto. En otro caso siempre será necesario indicar ladirección por defecto, salvo que el mapeado cubra toda la imagen, ya que si no se define en caso depulsar en un lugar sin mapear producirá un error.

Existen navegadores, los más antiguos, y programas de indexación, los robots de busqueda más

extendidos (lycos, excite, etc ...) que no pueden seguir los enlaces que se encuentran en una imagensensible. Por tanto se recomienda incluir en formato texto en la parte baja de la imágen los enlaces quese activan con la imagen sensible. De esta forma los documentos enlazados se pueden activar de las dosmaneras.

Ejemplo

ISMAP como referenciar la imágen sensible

Una vez creado el fichero que mapeará la imagen solo queda referenciarlo en el documento HTML.Para ello debemos definir la imagen y el enlace que se efectuará. Existe dos formas:

q En los antiguos servidores que no permiten soporte interno a imágenes sensibles:

<A HREF="http://www2.uca.es/cgi-bin/imagemap/camino_hasta- _el_mapa/fichero_mapa.map"><IMG SRC="camino_imagen_sensible.gif" ISMAP></A>

En el primer caso la parte primera define el programa que trata la imagen sensible http://www2.uca.es/cgi-bin/imagemap, la segunda parte especifica el fichero que mapea la imagen / camino_hasta_el_mapa/fichero_mapa.map . Dentro del hiperenlace se incluye la referencia de la





imagen con el atributo ISMAP para indicar que se trata de una imagen sensible.

q En los servidores que poseen soporte interno de imágenes sensibles:

En este caso no es necesario poner el camino al programa imagemap sino solo la referencia alfichero del mapa. El mismo gráfico se referencia así:

<A HREF="/camino_hasta_el_mapa/fichero_mapa.map"><IMGSRC="camino_imagen_sensible.gif" ISMAP></A>

El atributo ISMAP en la imagen es importante al igual que la extensión .map del fichero que mapeala imagen.

El segundo caso es más rápido ya que es el servidor el que se encarga de determinar las distintaszonas del mapa e indicar el enlace que se debe seguir, en lugar de llamar al programa imagemap para

que lo trate. Dependiendo del servidor instalado usaremos uno u otro método, en nuestro caso usaremosel segundo.

Ejemplo

Imágenes sensibles definidas desde el cliente

En el caso anterior la interpretación del mapa de la imagen sensible correspondía al servidor, portanto cuando el usuario pulsa sobre una imágen sensible, las coordenadas se pasan al servidor y este seencarga de comprobar usando el fichero que mapeaba la imágen. Por tanto para activar un enlace haríafalta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que seactiva, lo cual hace la consulta un poco más lenta. Y además a priori no es posible saber que zonas sonsensibles y cuales no ni tampoco que enlace se activa en cada zona.

Para solucionar esto se introdujo la posibilidad de crear imágenes sensibles definidas desde elcliente, de esta forma es el cliente (su navegador de la WWW) el que interpreta la imágen sensible y

puede mostrar los enlaces que se activan en cada zona y que zonas son sensibles y cuales no. En estecaso no es necesario indicar el documento por defecto ya que solo se podrán activar las zonas útiles dela imágen.

Existe una nueva etiqueta HTML que permite definir estas imágenes sensibles interpretadas desde elcliente, su formato es el siguiente:

<MAP NAME=" nombre">

<AREA SHAPE=RECT COORDS=" x11, y11, x12, y12" href="URL"><AREA SHAPE=RECT COORDS=" x21, y21, x22, y22" href="URL">...

<AREA SHAPE=RECT COORDS=" xn1, yn1, xn2, yn2" href="URL">





</MAP>

Cada una de las líneas con la etiqueta AREA, definen una zona sensible. Actualmente solo esposible definir zonas sensibles delimitadas por rectángulos, no pudiendo definir otras. Con el atributoCOORDS se definen las coordenadas de la zona sensible, estas serán la coordenada del primer vértice xi1, yi1 y la coordenada del vértice opuesto xi2, yi2. La etiqueta HREF indica la URL que se activa

con esta zona sensible.

La forma de referenciarlo es utilizando el atributo USEMAP, indicando el mapa a usar, cuando sedefina la imágen la forma será:

<IMG SRC="..." USEMAP="#nombre" >

Como nombre utilizaremos el nombre que se le dio al mapa su definición.

Esta etiqueta solo es soportada por los navegadores más modernos, Internet Explorer de Microsoft yel Netscape 2.0, por tanto los navegadores antiguos no podrían interpretar este tipo de mapas, sinembargo es posible utilizar ambas formas de definición a la vez, permitiendo que el mapa seainterpretado por todos los navegadores la forma será:

<A HREF="mapa.map"><IMG SRC="..." ISMAP USEMAP="#nombre" ></A>

De esta forma si el navegador entiende la etiqueta USEMAP lo interpreta como un mapa sensible

definido en el cliente, en caso contrario se interpreta como un mapa sensible normal y que debe serinterpretado por el servidor.

Ejemplo

Ejemplo de Imágen Sensible

Creación de una Imágen sensible

En este apartado se explicará paso a paso, la creación de una imágen sensible. Para ello se utilizaráel programa más básico para ello, mapedit, que se incluye en el Paquete Básico para la Creación de documentos HTML

Al iniciar el programa seleccionaremos File -> Open/Create, y aparecerá la ventana que se muestraen el grafico adjunto,. En esta indicaremos el nombre del fichero que definirá el mapa de la imágen( Map File), que deberá tener la extensión .map, este será el fichero que habrá que transferir al servidorpara referenciar la imágen sensible, lo llameremos ejemplo.map, en el apartado siguiente indicaremos





el fichero GIF sobre el que se aplicará la imágen sensible (GIF Filename).

Una vez cargada la imágen obtenemos la siguiente pantalla:

En la que se muestra la imágen y sobre la que será posible ya definir las zonas sensibles de laimágen. en el menú Tools, estan expresadas todas las figuras que se pueden utilizar en la imágen, estasson: Polygon, para una línea poligonal, Circle, para definir un circulo y Rectangle, define unrectángulo.

Para seleccionar cada una de las zonas del dibujo, seleccionaremos las figura correspondiente, ennuestro caso será Rectangle, una vez hecho esto nos situaremos en el primer vertice y pulsaremos elbotón izquierdo del ratón, fijando el primer vertice, luego arrastraremos hasta situarnos en el verticeopuesto, y ahí pulsaremos el botón derecho del ratón y obtendremos la siguiente ventana en la que nosserá posible introducir al URL que activará esta zona.





Definir una linea poligonal será similar, pero en este caso marcaremos con el botón izquierdo delratón todos los puntos que forman el polígono y cuando lleguemos a su fin pulsaremos el botónderecho del ratón y podremos introducir la URL, la línea poligonal no será necesario terminarla,uniendose automáticamente el primer y último vertice.

Una vez que definamos todas las zonas sensibles de la imágen, podemos utilizar la opción Test

+Edit , que nos permirá probar y en su caso editar las distintas zonas de la imágen, obteniendo unmuestra de la zona activa como se ve en la imágen:

La opción para definir la URL por defecto, es decir, la que se activará cuando no se pulse sobreninguna de las zonas definidas será File -> Edit Default URL.

Una vez definidas todas las zonas de la imágen y la URL por defecto, podremos grabar el mapa dela imágen sensible con File -> Save.

Obteniendo una fichero .map con el siguiente contenido:

default http://www2.uca.es/manual-html/prueba/noimagen.htm








Este fichero se transferirá al servidor y como se vió en con anterioridad existirán dos formas dereferenciarlo:

Imágen sensible interpretada por el servidor

Inst.HTML

<A HREF="ejemplo.map"><IMG SRC="imgmap.gif" ISMAP> </A>

Resultado

Explicación

Como se ve pulsando en las distintas zonas de la imágen se activan los enlaces

correspondientes, pero no hay forma de saber que zonas son sensibles y que enlaces seactivan en cada zona.

Imágen sensible interpretada por el cliente

Inst.HTML

<MAP NAME="ejemplo"><AREA SHAPE=RECT COORDS="8,10,61,63" HREF="http://www2.uca.es/manual-html/

prueba/boton1.htm" ><AREA SHAPE=RECT COORDS="62,10,134,36" HREF="http://www2.uca.es/manual-html/ prueba/boton2.htm" ><AREA SHAPE=RECT COORDS="62,36,134,64 " HREF="http://www2.uca.es/manual-html/ prueba/boton3.htm" ></MAP>

<CENTER><A HREF="ejemplo.map"><IMG SRC="imgmap.gif" ISMAP USEMAP="#ejemplo"> </A><P>

[ <A HREF="http://www2.uca.es/manual-html/prueba/boton1.htm">boton 1 </A> |<A HREF="http://www2.uca.es/manual-html/prueba/boton2.htm">boton 2 </A> |<A HREF="http://www2.uca.es/manual-html/prueba/boton3.htm">boton 3 </A>]</CENTER>

Resul

tado

[boton 1 | boton 2 | boton 3]


http://www2.uca.es/manual-html/ejemplo.map




Explicación

En este caso la definición es más larga, pero si su navegador es el Internet Explorer o elNetscape 2.0, notará que este es capaz de identificar las zonas sensibles de la imágen ymuestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa encada zona.Ademas es más rápida la identificación de que enlace se activa en cada zona.En este caso no hay que definir URL por defecto ya que siempre se pulsará en una de laszonas definidas.En la parte de abajo de la imágen se han incluido los enlaces que activa en formato textopara el caso de que el navegador no soporte imágenes sensibles (o sea un robot debusqueda).

5.10 - Inserción de elementos multimedia

¿ Multimedia ?

Como se ha explicado hasta ahora las posibilidades multimedia del lenguaje HTML se limita ainsertar imágenes dentro de un texto, mostrar un fondo en el documentos y modificar los colores quepresentarán los distintos textos. Con las instrucciones básicas de HTML que hemos visto hasta ahoraesto es lo máximo que se puede conseguir, la posibilidad de mostrar vídeo o sonido en un documentoHTML esta limitada a la capacidad y a la configuración del navegador.

La forma básica de incluir un fichero de un formato no reconocido por el navegador es incluirlo enun hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a unaaplicación externa que trate este tipo de ficheros. El navegador tendrá definida una lista aplicacionesque trabajarán con los formatos más comunes de fichero de vídeo, audio o imágenes. Esta opción espoco operativa ya que no podrían incluirse en el documento actual.

El Internet Explorer de Microsoft incluye una serie de etiquetas y atributos que permiten el uso deelementos multimedia, pero no es estándar y se puede asegurar que no será posible verlos en maquinas

distintas a los PC con windows, ni en navegadores distintos a este.

Otra aproximación la ha realizado Netscape con la inclusión de los Plug-ins, estos son programasque se añaden al navegador de Netscape versión 2.0 y permiten tratar diversos tipos de ficheros, de estaforma podrá insertarse estos tipos de ficheros dentro de una página HTML, permitiendo mostrar vídeoen distintos formatos (mpeg, avi, mov), interpretar sonido, en varios formatos (au, mid, ), incluirficheros de Adobe Acrobat (pdf), mostrar ficheros VRML, etc... El principal problema es que estosplug-in no son estándar ni están realizados por el mismo fabricante, ni son todos de libre distribución, yademás solo son validos hasta ahora en PC´s con windows. Además la correcta visión del documento

dependerá de que el usuario disponga del plug-in correspondiente instalado. En la última versión deNetscape (3.0 aunque todavía es beta), se incluyen por defecto plug-in´s para audio, vídeo y VRML,por lo tanto cuando se extienda el uso de este navegador se podría asegurar la reproducción de este tipode ficheros.





Extensiones Multimedia de Internet Explorer

El Internet Explorer de Microsoft permite mostrar vídeo en formato AVI y reproducir sonido, deuna forma sencilla, para eso añade una nueva etiqueta y un atributo a la etiqueta de mostrar imágenes.

<BGSOUND ...> Reproducción de audio

<BGSOUND SRC=" fichero de sonido" LOOP= n ó INFINITE>

Incluiremos una única vez esta etiqueta en el fichero que deseemos tenga música de fondo, en elatributo SRC se indicará el fichero de audio que se debe reproducir, siendo la URL hasta este fichero.El fichero podrá ser de formato .wav, .au o MIDI (.mid). El atributo LOOP indica cuantas veces seejecutará la pieza musical, podrá indicarse un número o INFINITE que indicará de forma indefinida.

<IMG DYNSRC ...> Reproducción de vídeo

<IMG DYNSRC=" fichero de sonido" LOOP= n ó INFINITE CONTROLS START= FILEOPEN óMOUSEOVER>

En este caso es un nuevo atributo para la etiqueta IMG, caso de existir este, en vez de mostrar unaimágen mostrará un vídeo en formato AVI (Vídeo for Windows), se puede utilizar todas los atributosnormales de IMG, pudiendo usar las distintas alineaciones y colocaciones respecto al texto, además sepodrá variar el tamaño del vídeo con los atributos HEIGHT y WIDTH.

Se añaden otros atributos que solo se pueden aplicar al vídeo, el atributo IMGSRC indica la URLdel fichero que se mostrará, el atributo LOOP indica el número de veces que se mostrará el vídeo, elatributo CONTROLS indicará si se mostrarán los botones de control, que permitirán para, volver areproducir, rebobinar, .... El atributo START indica si la secuencia de vídeo empezará al abrir elfichero (FILEOPEN) o cuando pase el cursor del ratón encima (MOUSEOVER).

De no poder mostrar el vídeo por tratarse de otro navegador (por ejemplo Netscape), se podráindicar una imágen que se muestre de manera alternativa, incluyendo el atributo SRC.

Plug-in's

Plug-in es un programa que extiende las capacidades del navegador de Netscape en un modoespecifico, dado por ejemplo la capacidad de mostrar vídeo, audio, ficheros de un determinado formato(ficheros PDF, presentaciones de ASAP, fichero VRML, etc ...).

No existe actualmente un conjunto estándar de plug-in´s para cada tipo de ficheros, sino que existendiversas aplicaciones, realizadas por diversos fabricantes, y no todas de libre distribución. Se puedeasegurar que todas las aplicaciones serán compatibles y si por ejemplo se referencia un fichero de





sonido en formato .wav en su página, este podrá ser oído por todos aquellos que tengan un plug-in paraeste tipo de ficheros.

Para que un fichero multimedia que es incluido en una página sea visible por el usuario debecumplir dos condiciones: la primera es que posea el navegador de Netscape en su versión 2.0 y lasegunda es que tenga el plug-in correspondiente que trata el fichero deseado. Por tanto se recomiendaun uso moderado de los plug-in´s utilizando ficheros que sean de formatos comunes y un uso

complementario en una página, ya que muchos usuarios no podrán verlo. Es aconsejable incluir unenlace en el que se referencie el fichero, de esta forma un usuario podrá seguir el enlace y ver el ficheroen un visualizador externo si lo posee.

Existe una instrucción que permite incluir cualquier tipo de archivo dentro de un documentosHTML, pero se verá en el próximo apartado.

<EMBED> Insertar Ficheros

Esta instrucción permite la inclusión de cualquier tipo de fichero en la posición del documentoHTML donde se especifique. Su funcionalidad es similar a la IMG para incluir imágenes. En este casopara que pueda mostrase el fichero deberá tener el plug-in adecuado que lo trata.


<EMBED SRC="URL del fichero" WIDTH= n ó n% HEIGHT= n ó n%>

En el atributo SRC se indicará el fichero que se desea mostrar, y los atributos WIDTH y HEIGHT se indicará el tamaño que tendrá en objeto insertado, siendo estos opcionales.

El fichero que podrá ser un fichero de vídeo, audio, imágen de algún tipo distinto a las por defecto,fichero de presentaciones, etc... solo podrá ser visto por el usuario si este posee el plug-incorrespondiente que trata ese tipo de ficheros, en caso contrario mostrará un mensaje de errorindicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de formacorrecta.

En el caso que se pueda mostrar el plug-in se incluirá en la zona del documento que se indicópudiendo así de este modo insertar dentro de un documento HTML películas de vídeo o incluir sonidode fondo.

Se recomienda un uso limitado de esta posibilidad, ya que existirán muchas personas que no poseanel Netscape 2.0, y no posean el plug-in correspondiente, y por lo tanto no podrán ver todo el esplendorde su página.

5.11 - TABLAS







Introducción

Permite la representación de datos por filas y columnas, en forma tabular. La definición es muyflexible indicando solo los elementos que forman cada fila y columna, calculándose de forma

automática el tamaño que deben tener las celdas. En una tabla podemos introducir todo tipo deelementos del lenguaje HTML como imagenes, enlaces, texto, listas, cabeceras, formularios, etc.

No es necesario definir inicialmente el número de filas o columnas ya que estas se calculan según seva definiendo la tabla. En el caso que una fila tenga más columnas que otra, en las otras filas lascolumnas se representarán vacias, no siendo necesario que todas las filas sean iguales.

<TABLE> Definición de la Tabla

Para definir una tabla usaremos la etiqueta <TABLE>, que tiene el siguiente formato:

<TABLE BORDER=" tamaño del borde" > ... Definición de la tabla ...

</TABLE>

En la etiqueta inicial TABLE definiremos los atributos que afectarán a toda la tabla, todos losatributos son opcionales. Todo lo que se incluya dentro de la instrucción de tabla se considerará comotal, pudiendo definir tablas anidadas (tablas dentro de tablas).

Ejemplo de tabla 1

Puede presentar los siguientes atributos:

q BORDER =n

Si se especifica se dibujará un borde alrededor de la tabla y separanado los distintos campos quepresenta. Indicaremos un número que especificará el tamaño del borde, por defecto será 0, es decir, nose dibujará ningún borde. Aunque no se dibuje el borde sí se mantendrá el espaciado los elementos dela tabla.

Ejemplo de tabla 4

Ejemplo de tabla 5

q CELLSPACING=n





Indica el espacio que debe existir entre las distintas celdas de la tabla. Por defecto será 2. Si seindica 0 no habrá ningún espacio entre las celdas.

q CELLPADDING=n

Es la cantidad de espacio entre el borde de la celda y el contenido de esta, por defecto es 1. Si seindica 0 las celdas aparecerán sin separación.

Ejemplo de tabla 6

q WIDTH=valor o porcentaje%:

Será el ancho de la tabla, se puede indicar como valor absoluto o como porcentaje del ancho deldocumento. En el primer caso se definirá en puntos y en el segundo en función del tamaño deldocumento (tamaño de la ventana del visualizador). Se recomienda utilizar tamaños de tabla enporcentaje del documento, ya que de esta forma la tabla queda perfectamente ajustada para cualquiertamaño del documento.

Ejemplo de tabla 9

q HEIGHT=valor o porcentaje%

Definirá el alto de la tabla, a igual que WIDTH, se puede indicar en valor absoluto o en porcentaje.

En este caso es más recomendado en valor absoluto ya que el alto es más dificil que pueda coincir conel tamaño de la ventana.

Dentro de la instrucción de la tabla se incluirán los diversas etiquetas que defininen el contenido de latabla.

<CAPTION> Titulo de la tabla

Especifica el titulo de la tabla, este se mostrará resaltado en la parte superior externa de la tabla.Siempre se mostrará centrado horizontalmente.

<CAPTION ALIGN=TOP|BOTTOM>Titulo de la tabla</CAPTION >

Con el atributo ALIGN indicaremos si el titulo debe aparecer arriba (TOP) o debajo (BOTTOM) dela tabla.

<TR> Fila de la tabla

Definirá cada una de las filas de la tabla y especificará los parámetros que afectarán a todas las





celdas de la fila. Por cada elemento TR que se incluya se creará una fila de la tabla. No es necesarioindicar la etiqueta de cierre </TR>. En caso de tablas anidadas será necesario incluir la etiqueta decierre.

<TR ALIGN= LEFT ó CENTER ó RIGHT VALIGN= TOP ó MIDDLE ó BOTTOM >

Se podrá especificar por defecto la alineación que tendrán los elementos dentro de las celdas.

q ALIGN = LEFT ó CENTER ó RIGHT

Indica la alineación del elemento dentro de la celda, en este caso afectará a todos los valoressituados en la fila actual, tambien se podrá indicar individualmente en los elementos TD. Puede tomaruno de los siguientes valores:

s LEFT: Alineación a la izquierda de la celda. Este el valor que se toma por

defectos RIGHT: Alineación a la derecha.s CENTER: Indicará centrado.

q VALIGN = TOP ó MIDDLE ó BOTTOM:

Indicará la alineación vertical del dato dentro de la celda. Se podrá especificar donde se colocaránlos datos dentro de la celda. Afectarán a toda la fila. Los valores que puede tomar son:

s TOP: Parte superior de la celda.s MIDDLE: Centrado verticalmente dentro de la celda.s BOTTOM: En la parte baja de la celda.

q BGCOLOR:

Indicará el color de fondo que tendrán todas las celda de la fila de la tabla. El formato para definir los colores es el mismo al que se usa para los atributos de BODY. Esta etiqueta solo es valida para el

Internet Explorer de Microsoft y el Netscape 3.0 o superior.

Ejemplo de tabla 10

<TH> y <TD> Una celda de la tabla

Define cada una de las celdas de una fila de la tabla, TH se usará para definir una celda de tipo

cabecera, en este caso se mostrarán destacados en negrita y TD para definir una celda de datos. Estoselementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila.Existirá una columna por cada elemento TD ó TH que se defina. Aunque se puede indicar la etiqueta decierre, no es necesario al tomarse implicitamente. Utilizaremos los elementos TH para los titulos de las


http://-/?-

http://-/?-



http://-/?-

http://-/?-




filas o columnas y los elementos TD para los datos.

<TH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP |MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamaño BGCOLOR= color ROWSPAN=“ Filas

que debe contener la celda” COLSPAN= “Columnas que ocupa la celda” NOWRAP >

<TD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE |

BOTTOM ) WIDTH=Tamaño BGCOLOR= color ROWSPAN=“ Filas que debe contener la

columna” COLSPAN= “Columnas que ocupa la celda” NOWRAP>

Ejemplo de tabla 3

Pueden presentar los siguientes atributos:

q ALIGN:

Indica la alineación horizontal del dato dentro de la celda, se especificará individualmente para cadauna de las celdas. Su significado es igual que el expresado para la etiqueta TR.

Ejemplo de tabla 7

q VALIGN:

Indicará la alineación vertical del dato dentro de la celda. Se especifica individualmente para cadacelda, el formato es el mismo que el expresado para TR.

Ejemplo de tabla 8

q WIDTH:

Especifica el ancho que tendra la columna de la tabla, se puede especificar eln valor absoluto, en

puntos de la pantalla o en tanto por ciento del tamaño de la tabla.

q BGCOLOR:

Indicará el color de fondo que tendrá la celda de la tabla. El color hay que indicarloindependientemente para cada una de las celdas de la columna. El formato para definir los colores es elmismo al que se usa para los atributos de BODY. Esta etiqueta solo es valida para el Internet Explorer

de Microsoft y el Netscape 3.0 o superior.

Ejemplo de tabla 10

q ROWSPAN:


http://-/?-



http://-/?-




Indicará el número de filas que ocupará está celda en la misma fila. En este caso la celda seexpandirá ocupando tantas celdas de la tabla inicial como se especifique. Esto permite definir porejemplo celdas de cabecera que afecten a varias celdas de la tabla, ó bien, crear una fila que ocupentoda la tabla.

Ejemplo de tabla 2

q COLSPAN:

Indicará el número de columnas que ocupará la celda actual, obtendremos una celda que ocupavarias columnas. Igual que el anterior pero para el caso de las columnas.

Ejemplo de tabla 2

q NOWRAP:

Se usará para que no se divida la línea por defecto. Si la usamos las líneas de texto no se dividirándentro de la celda en varias líneas. Por tanto si la linea es muy larga la columna de la tabla será tanancha como la línea, solo se dividirá si se usa el elemento.

Ejemplos de Tablas

Una Tabla Simple:

1 2 3

4 5 6

<TABLE BORDER><TR>

<TD>1 <TD> 2 <TD> 3<TR>


Demostración de TH, COLSPAN y ROWSPAN:





Numeros

Num1 2 3

4 5 6

<TABLE BORDER><TR>

<TD><TH COLSPAN=3>Numeros<TR>

<TH ROWSPAN=2>Num<TD>1 <TD> 2 <TD> 3<TR>


Demostración de Multiples Cabeceras:

Datos1 Datos2

Datos1.1 Datos1.2 Datos2.1 Datos2.2

1 2 3 4

5 6 7 8

<TABLE BORDER><TR>

<TH COLSPAN=2>Datos1 </TH><TH COLSPAN=2>Datos2 </TH></TR><TR>

<TH>Datos1.1 </TH><TH>Datos1.2 </TH><TH>Datos2.1 </TH><TH>Datos2.2 </ TH>

</TR><TR>

<TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR><TR>

<TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD></TR>

</TABLE>

Tabla sin Borde:

1 2 3





4 5 6

<TABLE><TR>

<TD>1 <TD> 2 <TD> 3<TR>


Tabla con Borde=15:

1 2 3

4 5 6

<TABLE BORDER=15><TR>

<TD>1 <TD> 2 <TD> 3<TR>


Ejemplos con CELLPADDING y CELLSPACING:

1 2 3

4 5 6


<TD>1 <TD> 2 <TD> 3<TR>


1 2 3





4 5 6


<TD>1 <TD> 2 <TD> 3

<TR><TD>4 <TD> 5 <TD> 6</TABLE>

1 2 3

4 5 6


<TD>1 <TD> 2 <TD> 3<TR>

<TD>4 <TD> 5 <TD> 6

</TABLE>

Ejemplos de alineaciones ALIGN:

Cabecera de Titulo1

Cabecera de Titulo2

Cabecera de Titulo3



<TABLE BORDER><TR>

<TH ALIGN=CENTER>Cabecera de Titulo 1 <TH ALIGN=CENTER> Cabecerade Titulo 2 <TH ALIGN=CENTER> Cabecera de Titulo 3

<TR><TD ALIGN=LEFT>Celda 1 <TD ALIGN=CENTER> Celda 2 <TD

ALIGN=RIGHT> Celda 3<TR><TD ALIGN=RIGHT>Celda 4 <TD ALIGN=CENTER> Celda 5 <TD

ALIGN=LEFT> Celda 6





</TABLE>

Ejemplos de alineaciones verticales VALIGN:

Cabecera de Titulo

1

Cabecera de Titulo

2

Cabecera de Titulo

3

Cabecera de Titulo

4Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7

Celda 8

Celda 9

Celda 10

Celda 12

<TABLE BORDER><TR>

<TH ALIGN=CENTER>Cabecera de Titulo 1<TH ALIGN=CENTER> Cabecera de Titulo 2<TH ALIGN=CENTER> Cabecera de Titulo 3<TH ALIGN=CENTER> Cabecera de Titulo 4

<TR><TD ALIGN=LEFT>Celda 1<TD ALIGN=CENTER> Celda 2<TD ALIGN=RIGHT> Celda 3<TD ALIGN=CENTER> Celda 4

<TR><TD ALIGN=LEFT VALIGN=TOP>Celda 5<TD ALIGN=CENTER><IMG SRC="/imagenes/bibliog.gif"><TD ALIGN=RIGHT VALIGN=BOTTOM> Celda 7<TD ALIGN=CENTER VALIGN=MIDDLE> Celda 8

<TR><TD VALIGN=BOTTOM>Celda 9<TD VALIGN=MIDDLE> Celda 10<IMG SRC="/imagenes/mundog.gif"><TD VALIGN=TOP> Celda 12

</TABLE>

Ejemplos de colores de fondo de las celdas BGCOLOR:





(Solo para el Netscape 3.0 e Internet Explorer)

Cabecera de Titulo1

Cabecera de Titulo2

Cabecera de Titulo3



<TABLE BORDER><TR BGCOLOR=YELLOW>

<TH>Cabecera de Titulo 1 <TH> Cabecera de Titulo 2 <TH> Cabecera de Titulo 3<TR BGCOLOR=WHITE>

<TD>Celda 1 <TD> Celda 2 <TD> Celda 3<TR>

<TD BGCOLOR=RED>Celda 4 <TD BGCOLOR=WHITE> Celda 5 <TD

BGCOLOR=GREEN> Celda 6</TABLE>

Distintos tamaños de tablas:

q WIDHT=10%

Esta esla celdanúmero1

Lados

y porúltimoesta eslaceldanúmero3

Celda 1segundafila

dos2fila

y por

últimoesta eslaceldanúmero3 de laúltimafila

q WIDHT=50%





Esta es la celdanúmero 1

La dosy por último estaes la celdanúmero 3

Celda 1 segundafila

dos 2fila

y por último estaes la celdanúmero 3 de la

última fila

q WIDHT=75%

Esta es la celda número1

La dosy por último esta es la celda número3

Celda 1 segunda fila dos 2fila y por último esta es la celda número3 de la última fila

q WIDHT=100%

Esta es la celda número 1 La dos y por último esta es la celda número 3

Celda 1 segunda fila dos 2 fila y por último esta es la celda número 3 de la última fila

5.12 - FORMULARIOS (FORM).

Introducción

Los formularios son plantillas que permiten la creación de documentos HTML con peticiones dedatos. La principal utilidad de los formularios es la posibilidad de crear cuestionarios, encuestas,páginas de comentarios o cualquier documento en la que se desee una interacción por parte del usuario.

Se podrán definir distintos tipos de recuadros de dialogo, botones de selección, menús de múltiplesopciones, ... Para permitir obtener los datos de una manera más intuitiva.

<FORM> Definición de formularios





Existe una instrucción HTML para la creación de formularios esta es FORM, que tiene la siguienteestructura:

< FORM ACTION="fichero que trata el formulario" METHOD= POST | GET >... Elementos que forman el formulario ...

< /FORM>

Dentro de la etiqueta de formulario se definirán los distintos elementos de petición de datos. Estasinstrucciones que se explicarán a continuación definirán los tipos de botones, cajas de dialogo yventanas para la introducción de datos. Y definirán las variables que almacenarán los datosintroducidos por el usuario. Estas etiquetas se incluirán entre la de definición del formulario y laetiqueta de final de formulario.

Los atributos que presenta la etiqueta FORM son los siguientes:

ACTION:

Indica el programa que se encargará de tratar los datos del formulario. Este programa debeencontrarse en el servidor y estar escrito en algún lenguaje de programación. A este programa se pasarácomo parámetros los datos introducidos en el formulario y retornará un código HTML que se mostrarátras procesar el formulario. A este tipo de programas se les llama cgi-bin, y se explican en el últimoapartado de este manual: (CGI-BIN).

METHOD:

Indica el protocolo usado para el envío de los datos. Con POST envía los datos en la entradaestándar del programa que trata el formulario y con GET los datos se pasan por parámetro, en la líneade comandos, al programa. El usar uno o otro método vendrá determinado por como son tratados losparámetros en el formulario en el (CGI-BIN). El método de uso más normal será POST.

Una vez definidas las características globales del formulario incluiremos los distintos botones ycajas de dialogo que lo constituyen. Dentro de la instrucción del formulario podrán incluirse cualquiertexto o instrucción HTML, siendo recomendado a fin de poder etiquetar las opciones de entrada yespecificar cualquier dato importante relacionado con el formulario. Igualmente un formulario puedeser incluido en algunas instrucciones HTML como las listas, tablas, etc ...

<INPUT> Entrada básica de datos

La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de entrada de datos. Porlo general serán entradas de texto corto (a lo sumo una frase) o opciones. El formato básico es el





siguiente:

< INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT |IMAGE | RESET ) NAME = "Variable que toma el valor" VALUE = "Valor de Inicialización" >

El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se está

definiendo, a continuación se explicarán por separado cada una de las opciones. El atributo NAME especifica el nombre de la variable que se define. Este nombre será pasado al programa que trata elformulario junto con el valor que le asigno el usuario del formulario. El atributo VALUE sueleespecificar el valor de inicialización, que será el valor por defecto.

A continuación se relatan los distintos tipos de instrucciones de entrada.

<INPUT TYPE=TEXT...> Texto corto

Se utiliza para la entrada de cadenas de texto corto, como por ejemplo nombre de personas,números, fechas o diversos datos que se puedan expresar en una línea de texto.

Se mostrará un recuadro que ocupa una línea y la que será posible especificar este texto. El formatode la instrucción es el siguiente:

< INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial " SIZE=" tamaño"MAXLENGTH="longitud máxima" >

El tamaño de la ventana de introducción de texto se fija con el atributo SIZE, que indica el tamañode la ventana en caracteres. Aquí solo se define la parte visible, pero el usuario podrá introducir mástexto si lo desea. Para indicar el máximo número de caracteres que se permiten en la entrada usaremos:MAXLENGTH. El atributo NAME indica el nombre de la variable que toma el valor de la entrada yVALUE especifica el valor de inicialización del campo. De todos los atributos solo será obligatorioNAME, siendo el resto opcionales. En la entrada se podrán usar cualquier tipo de caracteres incluso losacentuados, en su formato normal.

Ejemplos

Inst.HTML

Nombre: <INPUT TYPE=TEXT NAME=variable>

Resultado Nombre:

Explicación Será una introducción de texto básica.





Inst.HTML

Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicialización">

Resultado Nombre:

Explica

ción

En este caso introduciremos un texto de inicialización que será el texto por defecto y es editable

por el usuario.

Inst.HTML

Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicialización" SIZE=50MAXLENGHT=55>

Resultado Nombre:

Explica

ción

Ahora definimos con SIZE un mayor tamaño del recuadro y con MAXLENGHT definimos el

número máximo de caracteres que se pueden introducir.

<INPUT TYPE=PASSWORD...> Palabras secretas

Es similar al anterior pero en este caso no se imprimen los caracteres según se van introduciendo, semuestra un asterisco en vez de los caracteres. Solo se puede ver el número de caracteres, pero no valor.Se usa para la introducción de claves de acceso (passwords) y datos que no deban ser vistos al

introducirlos. El formato es:

< INPUT TYPE=PASSWORD NAME="variable" VALUE="valor inicial " SIZE=" tamaño"MAXLENGTH="li>longitud máxima" >

Ejemplo

Inst.

HTML

Password: <INPUT TYPE=PASSWORD NAME=variable VALUE="password">

Resultado Password:

Explicación

El texto introducido no puede ser visto, pero si es posible saber el número de caracteres que seintroducen.

<INPUT TYPE=CHECKBOX> Botones de selección

El checkbox es un botón que puede presentar dos estados activado o desactivado. El formato es elsiguiente:







< INPUT TYPE=CHECKBOX NAME="variable" CHECKED>

Se requiere el atributo NAME. Los valores que tomará la variable serán on ó off , dependiendo de suestado. Si el botón estaba activado cuando se envían los datos del formulario se enviaran el nombre dela variable y el valor que indique su estado. Si se incluye el atributo CHECKED el botón se encontraráactivado en la inicialización.

Si se indica el atributo VALUE,cuando se envian los datos con el botón activado se mandará lavariable con el valor indicado y en caso contrario no se mandará ningún valor.

Ejemplo

Inst.HTML

<INPUT TYPE=CHECKBOX NAME= variable> Opción

Resultado Opción

Explicación

En este caso esta desactivado por defecto y su utilizará en caso de los valores on y off paradefinir su estado.

Inst.HTML

<INPUT TYPE=CHECKBOX NAME= variable CHECKED> Opción

Resul

tado Opción

Explicación

Ahora se especifica CHECKED para indicar que por defecto debe estar activado.

<INPUT TYPE=RADIO...> Selección entre múltiples opciones

Se usa cuando la opción puede tomar un valor simple de una serie de alternativas. En este caso sepresentan unos valores opcionales de los que solo puede tomar un valor. Para especificar cada uno deestos valores se incluirá una etiqueta RADIO por cada una de las posibles alternativas, su estructurageneral será:

< INPUT TYPE=RADIO NAME="variable" VALUE="valor 1" CHECKED >< INPUT TYPE=RADIO NAME="variable" VALUE="valor 2" >

. . .< INPUT TYPE=RADIO NAME="variable" VALUE="valor n" >

Cada una de las etiquetas RADIO tendrá el mismos atributo NAME, y con un distinto atributo VALUE que será el valor que tome si se selecciona esta opción. Para inicializarlo se usa el atributo CHECKED que se indicará solo en la opción que se quiera especificar por defecto.





Ejemplo

Inst.HTML

<INPUT TYPE=RADIO NAME= variable VALUE=opcion1 >Opción 1<BR><INPUT TYPE=RADIO NAME= variable VALUE=opcion2 CHECKED>Opción 2<BR><INPUT TYPE=RADIO NAME= variable VALUE=opcion3 >Opción 3<BR><INPUT TYPE=RADIO NAME= variable VALUE=opcion4 >Opción 4<BR>

Resultado

Opción 1

Opción 2

Opción 3

Opción 4

Explicación

En este caso solo es posible seleccionar uno de los posibles valores, la opción CHECKEDindica cual es la opción activa por defecto.

<INPUT TYPE=HIDDEN...> Parámetros ocultos

En este caso no se muestra ningún campo para la entrada de datos al usuario, pero el par variablevalor especificado es enviado junto con el formulario. Se suele usar para transmitir información deestado ó control ó para enviar algún tipo de información que no debe ser variada en el formulario, perosí debe ser enviada junto a este. El formato es:

< INPUT TYPE=HIDDEN NAME="variable" VALUE="valor" >

Deberá incluir tanto la variable como el valor.

<INPUT TYPE=SUBMIT...> Enviar Datos

Este botón se usa para enviar los datos del formulario, al pulsar el usuario este botón, se acaba la

introducción del formulario y pasa el control al programa indicado en ACTION. En todo formulariodebe existir al menos un botón de SUBMIT, si solo incluye un recuadro del tipo TEXT no seránecesario incluirlo. El formato es:

< INPUT TYPE=SUBMIT VALUE=" mensaje a mostrar" >

El atributo VALUE especifica una etiqueta no editable que se mostrará en el botón de envío. Lonormal es que este botón no envíe datos, pero si se indica el atributo NAME con un nombre de variableserá enviada la variable con el valor de VALUE. Esto puede ser útil si se incluyen distintos botones deSUBMIT para distinguir cual fue pulsado.





Ejemplo

Inst.HTML

< INPUT TYPE=SUBMIT VALUE="Enviar Datos" >

Resultado

Explicación

El texto indicado en VALUE es el que etiqueta el botón, al pulsar sobre él se enviarán los datosdel formulario

<INPUT TYPE=IMAGE...> Botón de Envío gráfico

Su funcionalidad es similar al botón de SUBMIT, se usa igualmente para enviar los datos de un

formulario, pero en este caso se presenta una imagen como botón. Igualmente al pulsar sobre el botónse enviará el formulario. El formato es el siguiente:

< INPUT TYPE=IMAGE NAME="variable" SRC="URL de la Imagen" >

El punto de la imagen en el que pulsa el usuario también es pasado al programa interprete delformulario, de forma que la imagen igualmente podría ser un mapa sensible. Se pasarán dos parámetrosx e y con las coordenadas del punto donde pulso, siendo el programa interprete el encargado dedeterminar la zona donde se pulsó, si se desea.

Ejemplo

Inst.HTML

<INPUT TYPE=IMAGE SRC="boton.gif">

Resultado

Explicación

Se muestra la imagen como botón de envío, sustituyendo al botón de SUBMIT.

<INPUT TYPE=RESET...> Borrar los datos

Este botón se usa para volver a los valores por defecto todos los elementos del formulario, borrandotodos los datos introducidos por el usuario. Su formato es el siguiente:

< INPUT TYPE=RESET VALUE=" Etiqueta a mostrar" >


Enviar Datos




El atributo VALUE especifica la etiqueta que tendrá el botón.

<TEXTAREA> Texto en múltiples líneas

Permite la introducción de un texto que puede abarcar varias líneas, introduciendo este en forma de

párrafo. El formato general será:

<TEXTAREA NAME="variable" ROWS= Filas COLS=Columnas>Texto de Inicializaci& oacute;n que puede incluir varias líneas.

</TEXTAREA>

En este caso se presenta una ventana del tamaño especificado con los atributos ROWS, filas, yCOLS, columnas. El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto

aparecerá inicialmente en la ventana, en este texto se podrán incluir las marcas del lenguaje HTML,pero solo se tendrán en cuenta para incluir acentos y otro tipo de efectos. Los atributos ROWS y COLS determinan el tamaño de la ventana visible, el texto se podrá extender más allá de estos limites.

Ejemplo

Inst.HTML

<TEXTAREA NAME=variable ROWS=10 COLS=54>Texto de Inicialización que puedeincluir varias líneas.

</TEXTAREA>

Resultado

Explicación

Se puede especificar el tamaño de la ventana para introducir datos e indicar un texto deinicialización, aunque este será opcional.

<SELECT> Elección entre múltiples opciones

Se usa para menús simple o múltiples. Define menús de tipo pop-up (menú de barras) y ofrece unaalternativa más compacta al uso de botones RADIO o CHECKBOX. Su formato es el siguiente:


Texto de Inicialización que puede

incluir varias líneas.




<SELECT NAME="variable">< OPTION SELECTED VALUE=valor1> Opción Primera < OPTION VALUE=valor2> Opción Segunda

. . .< OPTION VALUE=valorn> Opción Enésima </SELECT>

Si se desea que sea un menú múltiple se deberá incluir el atributo MULTIPLE en la etiqueta deSELECT, en este caso se mostrarán todas las opciones en forma de tabla, en el otro caso se mostrará laopción activa y un botón para poder modificar esta opción. En ambos casos solo podrá seleccionarseuna de las opciones. Cuando se envía el resultado del formulario la variables NAME tomará el valor dela opción que este activa.

La etiqueta OPTION que contenga el atributo SELECTED será considerada la opción por defecto,caso de no especificarse ninguna se considerará la primera de las opciones.

Ejemplos

Inst.HTML

<SELECT NAME="variable"><OPTION VALUE=1> Opción Primera<OPTION SELECTED VALUE=2> Opción Segunda<OPTION VALUE=3> Opción Tercera</SELECT>

Resultado

Explicación

Se muestra la opción activa que puede ser cambiada, por defecto esta activada la segundaopción.

Inst.HTML

<SELECT NAME="variable" MULTIPLE><OPTION VALUE=1> Opción Primera<OPTION SELECTED VALUE=2> Opción Segunda<OPTION VALUE=3> Opción Tercera</SELECT>

Resultado

Explicación

En este caso al ser múltiple se muestran todas las opciones posibles, de las que solo es posibleseleccionar una.



Opción Segund

Opción PrimeraOpción SegundOpción Tercer




Definición

Los cgi-bin son programas que se ejecutan en el servidor, pueden servir para tratar información,

como pasarela con una aplicación o base de datos o para generar documentos html de formaautomática.

Como se vió con anterioridad, una de las principales utilidades de los cgi-bin es tratar los resultadosde un formulario (FORM).

Estos programas pueden ser escritos en cualquier tipo de lenguaje de programación y son ejecutados enel servidor cuando se realiza su referencia. Algo importante es que el programa debe ser ejecutable enel servidor, por tanto al ser el servidor una maquina UNIX, no se puede utilizar por ejemplo los

compiladores de los PC, sino los del servidor.

Los lenguajes más comunes para escribir estos programas son el lenguaje perl, C ó bien un script escrito en cualquier shell (csh, sh, ksh ó zsh).

Algo importante es que los cgi-bin deben tener una extensión especial .cgi, o bien, encontarse en undirectorio especial llamado cgi-bin. Cuando se referencie en una pagina html un binario, cualquierfichero con la extensión cgi, en el servidor se ejecutará este programa y la salida se enviará al cliente dela WWW.

Para que sea posible ejecutar el binario (cgi-bin), será necesario que el fichero tenga los permisos deforma correcta, para ello tendrá que ejecutar en Unix el siguiente comando:

www2> chmod 755 programa.cgi

Con esto el programa será ejecutable por el servidor.

Los cgi-bin se podrán escribir con las instrucciones normales del lenguaje de programación pero hayciertos aspectos a tener en cuenta:

1. Variables de entorno 2. Entrada de datos al cgi-bin 3. Salida de datos del cgi-bin

Variables de entorno

Para pasar datos el servidor al cgi-bin utiliza una serie de variables de entorno, que quedan definidasal ejecutar el script. Las variables de entorno más interesantes son:





q REQUEST_METHOD

El método por el que se realiza la llamada al script, este puede ser GET o POST como se explicóanteriormente cuando se habla de los formularios.

q PATH_INFO

El cgi-bin puede ser llamado directamente desde el cliente, en esta variable se incluirá toda lainformación que siga al nombre del cgi-bin, por ejemplo:

http://www2.uca.es/binarios/cgibin.cgi/camino/fichero

PATH_INFO = /camino/fichero

Será la información adicional que se añade tras el nombre de cgi-bin.

La información que se incluye será pasada de forma codificada al cgi-bin, de forma que los espaciosse convierten en signos '+' y los caracteres especiales se codifican de la forma %xx, donde xx el códigoASCII en hexadecimal del caracter. Esto debe ser tenido en cuenta cuando se interprete la informacióobtenida en formato URL.

q PATH_TRANSLATED

Una versión decodificada de PATH_INFO, obtiene el camino y lo convierte de camino virtual (enreferencia del servidor) a camino real (camino completo).

q SCRIPT_NAME

Nombre por el que fue llamado el cgi-bin.

q QUERY_STRING

La información que sigue al símbolo ? en la URL que referencia al cgi-bin. Será algún tipo deconsulta que se realice al cgi-bin. No necesita ser decodificada de ninguna manera.

Cuando se utiliza el método GET las variables del formulario se pueden interpretar con esta variablede entorno.

El formato en que se envian estas variables es el siguiente:

?variable1=valor1&variable2=valor2& ... &variablen=valorn

q REMOTE_HOST





El ordenador desde el que se ejecuto el cgi-bin.

q REMOTE_ADDR

Dirección IP del ordenador remoto que ejecuto el cgi-bin.

q CONTENT_LENGTH

El número de caracteres enviados por el cliente al cgi-bin.

q HTTP_USER_AGENT

El cliente de la WWW que ejecuta el cgi-bin, el formato general es:

programa/versión libreria/versión

El cgi-bin podría enviar un distinto código HTML según cada cliente.

Entrada de datos al cgi-bin

Para los formularios que utilizan el método POST, la información es enviada al cgi-bin por laentrada estándar (stdin).

El servidor envía las variables de entorno CONTENT_LENGTH y CONTENT_TYPE indicandola longitud y el tipo de datos enviados. El servidor no esta obligado a enviar una marca de final defichero tras los datos enviados, por tanto la variable CONTENT_LENGTH debe ser tenida en cuentapara determinar la cantidad de datos enviados. CONTENT_TYPE suele contener el valor application/

x-www-form-urlencoded , que indica que se trata de información con codificación URL.

En esta codificación como se vio antes los espacios se convierten en signos '+' y los caracteresespeciales se codifican de la forma %xx, donde xx el código ASCII en hexadecimal del carácter. Por

tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario. Lasvariables del formulario se enviarán de la forma:

variable1=valor1&variable2=valor2& ... &variablen=valorn

Salida de datos del cgi-bin

El cgi-bin debe enviar sus datos a la salida estándar (stdout), esta salida puede ser un documento

generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto.

La salida del cgi-bin debe comenzar con una pequeña cabecera que identificará al documento. Lasdirectivas que definen esta cabecera serán:





q Content-type:

Es el tipo MIME del documento que se retorna. Si tuviera el valor text/html la salida se interpretaríacomo código html. Por tanto la salida del cgi-bin podría contener instrucciones HTML que serianinterpretadas correctamente por el cliente. Otros valores que puede tomar son: text/plain para textonormal ó image/gif , la salida se interpreta como una imagen GIF.

Por ejemplo:

printf ( "Content-type: text/html\n\n" );

Sería el comienzo de la salida de cgi-bin escrito en C que comienza a generar código html.

q Location:

Indicará al servidor que se esta enviado la referencia a un documento en lugar del documento en sí.Si el valor es una URL, el servidor indicará al cliente que debe realizar un redireccionamiento a esadirección.

Esta permitido el uso de información adicional (PATH_INFO) y la directiva ?, pero no la directiva # para indicar un punto determinado dentro de un documento.

q Status:

Indicará un código de estado para indicar errores. El formato será nnn xxxxxxx, donde nnn esun número de tres dígitos y xxxxxxx es una cadena de caracteres.

Tras la cabecera se incluirán dos caracteres de retorno de carro (\n), siendo obligatorio para que seabien interpretada la cabecera de cgi-bin, si no se respeta esto la salida del cgi-bin podría indicarnos elerror "Server Error 500".

Despues de definida la cabecera se podrá generar la salida del cgi-bin, que se interpretará segú elvalor dado a Content-type.

8 - Documentos con Frames

Introducción

Con las frames es posible dividir la ventana del navegador en varias subregiones ( frames),permitiendo mostrar una URL distinta en cada una de ellas. En cada frame se nos permite:





q Mostar su propia URL, diferenciada del resto de las frames de la pantalla, de esta forma unhiperenlace puede tener como destino un documento y la frame en el que se mostrará.

q Tendrán asociado un nombre, que las distinguirán del resto de las frames de la pantalla ypermitirá usarlo en los hiperenlaces.

q En el caso que se cambie el tamaño de la ventana, se podrá determinar si la frame se ajusta aeste tamaño o mantiene su tamaño intacto.

Esto permite crear nuevos tipos de documentos, en los que por ejemplo se mantendrá una regiónestática (lista de enlaces, barra de botones, formulario) y otra zona dinámica en la que se mostrará elresultado. De esta forma una de las principales utilidades de las frames es la creación de páginas con uníndice (por ejemplo un manual) o una cabecera estática, consiguiendo así una mejora de la navegaciónal poder acceder al índice de una manera más rapida y efectiva.

El uso de las frames es útil para cierto tipo de documentos, pero puede llegar a dificultar lanavegación, dentro de un documento con frames no tendrá utilidad los botones de documento previo(back) ni documento siguiente (forward), ya que ambos nos trasladarán fuera del documento conframes. Para ver el documento previo en una de las frames debemos utilizar el botón derecho del ratónsobre ella y seleccionar la opción volver en el frame (Back in Frame). Esto hace que cuando se utilicenframes haya que cuidar la correcta transición entre documentos.

No todos los navegadores pueden mostrar documentos con frames, solo son interpretables por el

Netscape 2.0 o superior y el Internet Explorer 3.0. Por tanto en este caso si se quiere que el documentosea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas,usando la etiqueta NOFRAMES.

Definición

Un documento con frames se define de manera diferente a un documento normal, siendo laestructura del documento distinta, en este caso no se define la etiqueta BODY. Su estructura es la

siguiente:

<HTML><HEAD>

Definiciones de la cabecera </HEAD><FRAMESET>

Definición de las frames que forman el documento y de los fichero

que incluye cada una. </FRAMESET><NOFRAMES>





Instrucciones HTML que se mostrará en los navegadores que nosoporten frames.

</NOFRAMES></HTML>

Dentro de la etiqueta NOFRAMES se podrá incluir una explicación de que el documento solo es

visible con el navegadores que soporten frames, o bien incluir una versión del documento que semuestre sin necesidad de frames.

<FRAMESET ...> Definición de las frames.

Con esta instrucción definiremos las frames que formarán el documento, su sintaxis es similar a lade las tablas, permitiendo definir muy distintos tipos de frames. Su formato es el siguiente:

<FRAMESET ROWS= Lista de las Filas COLS= Lista de las Columnas><FRAME SRC=URL_1 NAME=" Nombre de la frame1"><FRAME SRC=URL_2 NAME=" Nombre de la frame1">. . .<FRAME SRC=URL_N NAME=" Nombre de la frameN ">

</FRAMESET>

Se definirá solo uno de los atributos, o la lista de filas (ROWS) o la lista de columnas (COLS).

q ROWS:

Se definirá separado por comas el tamaño de cada una de las frames. De esta forma se dividirá lapantalla de forma horizontal, según cada una de las filas definidas. El tamaño de la frame, puedeexpresarse de las siguientes formas:

q En valor absoluto, que indicará el tamaño en puntos de la pantalla. En este caso si todas lasframes se indican de este modo, los valores se ajustarán para que las frames ocupen la totalidad

del espacio de la ventana del navegador, no guardando siempre la proporción con la que sedefinen las frames.

q En tanto por ciento sobre el tamaño de la ventana, en este caso si los porcentajes suman un valordistinto del 100%, se ajustarán para que coincidan con el tamaño de la ventana. Se podrácombinar con el apartado anterior de forma que algunas frames se definan en valor absoluto yotras en porcentaje.

q De forma relativa con el símbolo * que indica el tamaño restante de la ventana. Si se indica una

frame como 2* y otra como *, la primera ocupará dos tercios del espacio restante y la segundaun tercio del espacio restante. Se puede combinar con las definiciones anteriores.





Ejemplo

Inst. HTML Muestra

<FRAMESET ROWS="100, 50%, *"><FRAME SRC="frame1.htm" NAME="frame1"><FRAME SRC="frame2.htm" NAME="frame2"><FRAME SRC="frame3.htm" NAME="frame3"></FRAMESET>

Se definen tres frames horizontales, la primera (roja) ocupará 100 puntos de la pantalla, la segunda (azul)el 50% del tamaño de la ventana del navegador y la tercera (verde) el espacio restante, si se varía el tamaño

de la ventana del navegador, cambiará el tamaño de las dos últimas.

q COLS:

Toma los mismos posibles valores que ROWS, pero en este caso para las columnas, se definirán lasframes de forma vertical.

Ejemplo

Inst. HTML Muestra

<FRAMESET COLS="100, 50%, *"><FRAME SRC="frame1.htm" NAME="frame1"><FRAME SRC="frame2.htm" NAME="frame2">

<FRAME SRC="frame3.htm" NAME="frame3"></FRAMESET>

En este caso se definen las frames de forma vertical, guardando la misma proporción que en el casoanterior.

Una vez definida el número de frames por fila o por columna se definirá el contenido de cada una deestas con la etiqueta FRAME, pero igualmente se podría definir frames dentro de frames, de forma quecada una de las definidas anteriormente podría estar divida en varias frames, esto se hará incluyendodentro de la instrucción FRAMESET, nuevas instrucciones FRAMESET que dividirán esta en lasframes indicadas, como se ve en el siguiente ejemplo:





Ejemplo

Inst. HTML Muestra

<FRAMESET ROWS="100, 50%, *">

<FRAME SRC="frame1.htm" NAME="frame1"><FRAMESET COLS="2*,*"><FRAME SRC="frame2.htm"NAME="frame2"><FRAME SRC="frame3.htm"NAME="frame3">

</FRAMESET><FRAMESET COLS="50%, 30%, 20%">

<FRAME SRC="frame4.htm"NAME="frame4">

<FRAME SRC="frame5.htm"NAME="frame5"><FRAME SRC="frame6.htm"NAME="frame6">

</FRAMESET></FRAMESET>

Tomando como base las frames que se definieron en un ejemplo anterior, hemos dividido dos de las framesen nuevas frames, formando en este caso un documento con 6 frames, en cada una se muestra un fichero

distinto y tienen un nombre distinto. Dentro de las frames definidas se podrían definir nuevas frames,pudiendo dividir la ventana, tantas veces como se desee.

<FRAME ...> Definición de cada una de las frames

Como se ha visto en el apartado anterior con la etiqueta FRAME definiremos el documento que semostrará en la frame y su nombre. Esta etiqueta presenta además algunos otros atributos:

<FRAME SRC="URL" NAME=" Nombre de la frame" MARGINWIDTH=" ancho del margen"MARGINHEIGHT=" alto del margen" SCROLLING=YES | NO | AUTO NORESIZE>

q URL:

Como su nombre indica, especifica el documento HTML o fichero que se mostrará en la framedefinida. Si no se especifica documento alguno se mostrará la frame vacía.

q NAME:

Indica el nombre de la frame, este nombre es importante ya que se usará en los hiperenlaces





(normalmente en los documentos de las otras frames) para indicar la frame de destino del documento.Si no se indica el nombre solo se podrá mostrar el documento actual, sin que sea posible cambiarlomediante hiperenlaces.

q MARGINWIDTH:

Indica el ancho del margen, este atributo es opcional y normalmente el navegador ajusta todos losmárgenes al mismo tamaño, si se especifica se valor será en puntos de la pantalla.

q MARGINHEIGHT:

Igual que en el caso anterior pero para el alto de los márgenes. Lo normal es no especificar ningunode estos dos atributos.

q SCROLLING:

Indica si la frame tendrá o no una barra de scroll, la barra de scroll se muestra en el lateral y permitedesplazarse por el documento, pulsando con el ratón en ella. Si toma el valor YES, siempre se mostraráesta barra, para el valor AUTO solo se mostrará si el documento no cabe en la frame, si es necesaria. Ypor último NO indica que en ningún caso se muestre la barra de scroll. Si no se indica nada se toma pordefecto el valor AUTO.

q NORESIZE:

Indica que la frame no debe ser variada de tamaño por el usuario, se puede variar el tamaño de unaframe situando el cursor del ratón encima y arrastrando en la dirección deseada. Con este atributo elusuario no podrá cambiar el tamaño de la frame en ningún caso. Por defecto todas las frames puedenvariar su tamaño.

TARGET: Atributo para indicar la frame de destino

El uso de frames introduce un nuevo atributo a alguna de las etiquetas especificadas conanterioridad, este atributo es TARGET que indicará la frame de destino de la operación. Normalmente,en páginas sin frames, cuando se seguía un hiperenlaces este se mostraba en la ventana del navegadorsustituyendo el documento actual, con las frames se puede especificar que frame será la de destino, nosiendo necesario que sea la frame del documento actual.

Como nombre de la frame su usará el nombre que se especifico en el atributo NAME de la etiquetaFRAME. Estas instrucciones se utilizarán normalmente en los documentos que se incluyen dentro delas frames.

Las etiquetas que permiten el uso de TARGET son las siguientes:





q A:

En los hiperenlaces indicará la frames donde se mostrará el documento, una vez que se siga elhiperenlace.

<A HREF="url " TARGET=" frame">

q BASE:

Indicará la frame en la que se mostrará por defecto todos los hiperenlaces del documento actual. Sedebe especificar en la cabecera del documento (HEAD).

<BASE TARGET=" frame">

q AREA:

En la definición de imágenes sensibles en el cliente, se indica la frame donde se verá el documentoque se activa en la zona correspondiente de la imagen.

<AREA SHAPE=RECT COORDS=" x,y,..." HREF="url " TARGET=" frame">

q FORM:

Indicará la frame de destino del resultado del formulario.

<FORM ACTION="url " TARGET=" frame">

Existen unos valores especiales de TARGET que nos permitirán definir destinos distintos a lasframes definidas. Estos valores son los siguientes:

q TARGET="_blank": Indica que se muestre en una nueva ventana vacía, para seguir el enlace

se lanza otra ventana distinta del navegador.

q TARGET="_self":Se mostrará en la misma ventana o frame que lo referencia, se puede usarpara modificar el valor dado por BASE.

q TARGET="_parent": Se muestra en la frame o estructura de frames que llamó al documentoactual.

q TARGET="_top": Indica que se muestre en la ventana completa, eliminando la estructura deframes que tenga la ventana.


http://-/?-

http://-/?-



Gestión de la cuenta Departamental

1 - Gestión de la cuenta Departamental.

Introducción

En este apartado se expondrá la formas en las que se puede gestionar la inclusión de documentosHTML en un espacio web departamental.

Para la gestión dispondrá de una cuenta en el servidor web departamental que en nuestro caso eswww2.uca.es. Esta cuenta será exclusiva para su gestión. En el directorio raíz de esta cuenta existiráun directorio llamado html , todos los ficheros que incluya en este directorio serán accesible desde elservidor de la WWW, a partir de la URL de su departamento.

Ficheros a incluir

En este directorio podrá incluir los ficheros escritos en HTML que forman su espacio Web, podráincluir las imágenes que se inserten en sus páginas y cualquier otro fichero que se referencie desdesus páginas html.

No se podrán incluir otro tipo de ficheros que no sean utilizables desde su espacio Web, tenga encuenta que su espacio de disco es limitado (5 MegaBytes) y por tanto no debería malgastarloincluyendo ficheros no necesarios.

Los nombres de los ficheros pueden tan largos como desee (dentro de un límite), pudiendo utilizarpara ellos tanto las mayúsculas como las minúsculas, que se diferenciarán al referenciar el fichero. Enel sistema operativo UNIX en los nombres de fichero sí se distinguen, y por tanto serán tenidas encuenta por el servidor.

Un aspecto importante es la extensión de los ficheros, esta extensión no puede ser arbitraria,deberá cumplir unos requisitos para la correcta identificación del documento. El servidor de la WWWindica el tipo de fichero al navegador según la extensión de este, por tanto cualquier fichero que en elservidor tenga la extensión .html al accederlo el servidor indicará que se trata de un fichero escrito enlenguaje HTML, si la extensión es desconocida para el servidor lo enviará como fichero texto.

Las extensiones más comunes serán: para documentos hipertexto (HTML) el fichero debe tenerla extensión .htm, ó bien, .html. Las imágenes, según cada caso deben tener la extensión .gif para elformato GIF, y .jpg ó .jpeg para imágenes en formato JPEG, ficheros de mapas de imágenes

sensibles .map. Para los programas que se ejecutan en el servidor (CGI_BIN) la extensión .cgi

Estructura de directorios

http://www2.uca.es/manual-html/gestcuen.htm (1 de 6)30/08/2008 12:00:19 p.m.




A partir del directorio html de su cuenta puede crear la estructura de directorios que desee. Serecomienda que se cree un directorio por cada sección que tenga su espacio Web, siempre que estaconste de varios ficheros html o de imágenes.

De esta forma será más compacto el acceso a la información, ya que la URL puede usarse paraidentificar la sección y la gestión al poder añadir y borrar de forma sencilla secciones. Si crea todoslos ficheros en el directorio principal, le será más complejo identificar los ficheros obsoletos y a quesección corresponde cada fichero.

Se recomienda la creación de un directorio de imágenes, uno de iconos y otro de fondos, aunque sino son muchos se pueden incluir todos en el directorio de imágenes. Estos elementos podránreferenciarse fácilmente y de manera uniforme en todos los documentos de su espacio Web

La estructura básica de su espacio web podría ser:

En el directorio de imágenes se incluirán todas las imágenes de ámbito general, por ejemplologotipo de su departamento, iconos de uso frecuente y las imágenes usadas por documentos deldirectorio principal. En el directorio de la sección, o en su directorio de imágenes, se podrán incluirlas imágenes que sean exclusivas de esa sección. De esta forma se conseguirá una mayor ordenaciónde su espacio web y las referencias a las imágenes podrían ser más consistentes desde cualquierdirectorio de su espacio web.





El nombre que se utilice como nombre de directorio será el que se utilice en la URL de la sección,por lo que debe ser descriptivo de su contenido.

Ejemplos

URL Definición

Nos encontramos en el fichero default.htm del directorio html

<A HREF= "imagenes/imagen.gif">Accederíamos al fichero imagen.gif que se encuentra en eldirectorio de imágenes que está a partir del directorio html.

<A HREF= "/imagenes/logouca.gif">Al comenzar por / accederíamos al directorio de imágenes delservidor, y no al de nuestro espacio Web.

<A HREF= "seccion1/indice.htm"> Accedemos al fichero de indice.htm de la seccion1

Nos encontramos en el fichero indice.htm del directorio seccion1

<A HREF= "fichero.htm">Se referencia el documento fichero.htm que se encuentra en eldirectorio seccion1

<A HREF= "../imagenes/imagen.gif">

El fichero indicado sería la imagen imagen.gif que seencontraría en el directorio de imágenes a partir del directoriohtml.

<A HREF= "/imagenes/logouca.gif">Al igual que antes al comenzar por / accederíamos al directoriode imágenes del servidor, y no al de nuestro espacio Web.

Nos encontramos en el fichero seccion2.htm del directorio seccion2

<A HREF= "imagenes/imgsec3.gif">En este caso la imagen se encontraría en el directorio deimagenes del directorio seccion2.

Existe un medio que permitirá la creación de secciones en su espacio web gestionadas por otraspersonas de su departamento, el modo de crearlas se especifica en la siguiente pregunta de la FAQ:Creación secciones dentro del espacio Web de un departamento que puedan ser gestionadas por

distintas personas.. De esta forma podrá descargar parte de la gestión de su espacio web en otraspersonas que deseen incluir información en formato electrónico.

Imagenes e Iconos

No se deben duplicar iconos ni imágenes ya existentes en el servidor, existen unos directorios deiconos, fondos e imagenes que contienen gran cantidad de estos elementos, si usa alguno de estos notiene que copiarlo en su espacio Web sino simplemente referenciarlo. Con esto se ahorrará espacio en





disco. Se aceptarán aportaciones de iconos e imágenes para aumentar el fondo común.

Si desee compartir una imagen, un icono, una barra o un fondo podrá enviarnoslo a la dirección decorreo electrónico [email protected] y será incluida en los directorios comunes.

Los directorios existentes en la actualidad son:

q http://www2.uca.es/imagenes

q http://www2.uca.es/iconos q http://www2.uca.es/iconos1 q http://www2.uca.es/iconos2

q http://www2.uca.es/barras q http://www2.uca.es/barras1

q http://www2.uca.es/fondos q http://www2.uca.es/fondos1 q http://www2.uca.es/fondos2 q http://www2.uca.es/fondos3

Fichero por defecto ( default.htm)

Existe un fichero especial que es el default.htm ó default.html que es el fichero de presentación.Cuando alguien referencia la URL de un directorio sin indicar un fichero concreto y no existe estefichero obtiene una lista de los ficheros que forman el directorio, de esta forma podrían ver todos losficheros que forman el directorio y acceder de forma no ordenada a sus fichero html. Para evitar estobastará con incluir un fichero con uno de este nombre y será el que se muestre por defecto.

El fichero que se muestra cuando se conectan a su espacio web será el default.htm que seencuentran en el directorio html de su cuenta. Por tanto este será el fichero de presentación.Inicialmente existirá en su cuenta este fichero y un fichero para enviar comentarios ( comenta.htm),sobre el fichero default.htm deberá hacer las primeras modificaciones para cambiar la presentaciónde su espacio Web. En el apartado siguiente se especifica lo que debe contener este fichero.

Este fichero debe contener los siguientes elementos:

q El escudo o logotipo de la UCA.


http://www2.uca.es/iconos1


http://www2.uca.es/barras


http://www2.uca.es/fondos

http://www2.uca.es/fondos1






http://www2.uca.es/fondos





q El nombre del Departamento, servicio o vicerrectorado.

q La Indicación "Universidad de Cádiz".

q La indicación del nombre y/o la dirección de correo del Webmanager y un buzón para recibirsugerencias, por ejemplo con el fichero comenta.htm.

q Un enlace a la página principal de la UCA, con un logotipo común mediante la siguienteinstrucción:

Inclusión de información

Hasta ahora hemos hablado de la estructura que debe tener su espacio Web y de los fichero quedebe contener, pero no hemos hablado del modo en el que se puede introducir la información, que esel objetivo de este apartado. Principalmente se presentan dos alternativas:

1. - Conectarse por telnet a la maquina UNIX y editar directamente los ficheros. 2. - Transferir los fichero mediante FTP.

Conectarse por telnet al servidor

Acceder al servidor mediante telnet y gestionar la información desde la cuenta de usuario delservidor. En este caso deberá tener conocimiento sobre el sistema operativo UNIX y el uso de suseditores (pico), ninguno apto para el uso del lenguaje HTML. Se desaconseja de modo general,siendo apto solo para casos extremos, como cambiar un fichero, etc ...

Transferir los ficheros por FTP

Tener una copia de la información en su PC ó ordenador personal. En este caso creará losdocumentos en su PC verificándolo en su navegador de la WWW como fichero local. Una vez creadoel documento, transferirlo por FTP a su cuenta de gestión del servidor. Con el programa de FTP sepodrá enviar los documentos HTML (en formato ascii) y de imágenes (en formato binario), crearsubdirectorios y borrar ficheros.

Esta segunda alternativa es la más cómoda ya que le permite crear los documentos desde su

ordenados personal, con su editor de HTML favorito. Una vez creado el documento enviarlo einmediatamente quedaría actualizado en el servidor. Sin necesidad de tener conocimiento del sistemaoperativo UNIX ni de sus editores.


http://-/?-

http://-/?-

http://-/?-

http://-/?-




En su PC tiene que mantener la misma estructura de directorios que en el servidor para asegurarque mediante direcciones relativas todos los documentos se puedan enlazar perfectamente.

Uso del programa de FTP




Gestión de una cuenta Departamental por FTP


En este caso guardaremos una copia de los ficheros que se desea publicar en el servidor, losmodificaremos en el PC y cuando queramos que las modificaciones tengan efecto los enviaremos porFTP al servidor.

De esta forma podremos mantener una copia de los ficheros sobre los que podremos trabajarlibremente, sin modificar directamente los que se publican en el servidor. En el PC podremos utilizarnuestro editor HTML favorito y utilizar el navegador de Netscape para verificar el documento enmodo local.

El programa que utilizaremos será el programa cliente de FTP , este programa nos permitirá

obtener y enviar ficheros desde el servidor.

Al iniciar el programa nos mostrará una pantalla en la que es posible indicar la maquina y lacuenta a la que deseamos conectarnos.

La pantalla que obtendríamos sería la siguiente:

Lo primero que haremos será crear una nueva sección, para ello escribiremos un nuevo nombre enel apartado Profile Name, Indicaremos un nombre como el que está especificado, "Servidor WebDepartamental", u otro que le ayude a identificar de que sesión de FTP se trata.

http://www2.uca.es/manual-html/gestftp.htm (1 de 4)30/08/2008 12:00:24 p.m.




Una vez que le hemos dado un nuevo nombre, indicaremos los datos de la cuenta departamental ala que deseamos conectarnos, El aspecto deberá ser similar al que se muestra en la imagen, comoHost Name, nombre del servidor, indicaremos el nombre del servidor, en nuestro caso: wwwdept.uca.es, como User ID, indicaremos el login, o nombre de usuario, de la cuenta departamental. En elapartado de Password indicaremos el password de acceso a esta cuenta.

En el apartado Local PC, podemos indicar el directorio donde están almacenados los ficheroshtml del PC, por ejemplo: C:\WWW\HTML, que se quieren enviar al servidor.

Una vez rellenados todos los datos pulsaremos el botón de grabar y ya no tendremos

que introducir los datos la próxima vez que nos conectemos. Esto solo hay que hacerlo la primeravez, las próximas bastará con buscar esta sesión dentro de Profile Name.

Una vez introducidos todos los datos pulsaremos el botón de OK , y nos

conectaremos al servidor. Una vez conectados obtendremos una pantalla del estilo:

Obtenemos una pantalla divida en dos partes, Local System y Remote System. La parte





etiquetada con Local System es su PC en ella podrá encontrar todos los directorio de su PC, y el laotra parte encontrará los directorios y ficheros del servidor. Cada una de las zonas está dividida endos partes, arriba es la zona de los directorios y abajo es la zona de los ficheros. Por último en la líneade debajo se puede indicar el modo en que serán transferidos los ficheros que puede ser ASCII paraficheros texto (este será el modo usado para ficheros HTML) y Binary para otro tipo de ficheros.

Para cambiar de directorio bastará con pulsar en dos ocasiones con el ratón en el directoriocorrespondiente, por tanto para gestionar la cuenta departamental lo primero que debemos hacer seráentrar en el directorio html del servidor. En el encontraremos todos los ficheros html e imágenes delespacio Web.

Luego en la zona del PC, Local System, iremos al directorio donde tenemos almacenados losficheros que queremos enviar al servidor. Lo ideal sería tener una copia de la misma estructura quetienen los ficheros en el servidos en el PC, así será más fácil saber que fichero hay que enviar y sepodrá modificar directamente sobre los ficheros del PC. Por tanto lo primero que haremos será crear

un directorio en el PC donde almacenar los ficheros, por ejemplo C:\WWW\HTML, una vez creadoeste obtendremos del servidor los ficheros default.htm y comenta.htm.

Con el programa de FTP se puede realizar una completa gestión de la cuenta, teniendo botonesque nos permite realizar muchas funciones, las principales son las siguientes:

Para los directorio:

Cambiar de Directorio

Crear Directorio

Borrar Directorio

Para los ficheros:

Muestra el contenido del fichero: Obtiene el fichero y muestra el contenido del

fichero en el Bloc de notas

Renombra el fichero: Cambia el nombre al fichero seleccionado.

Borrar Fichero: Borra el fichero o los ficheros que se encuentren seleccionados

Refresca directorio: Registra los cambios del directorio





Muestra Información de todos los ficheros: Muestra una información detallada de

todos los ficheros del directorio.

Para enviar y recibir ficheros existen dos flechas, si queremos enviar un fichero al servidor lo

seleccionaremos, pulsando sobre él una vez con el ratón y luego pulsaremos el botón de envío: ,

para obtener un fichero del servidor haremos lo contrario, marcaremos un fichero del servidor y

pulsaremos el botón de recepción .

Será posible marcar más de un fichero y especificar un filtro para que solo se muestren losficheros de un solo tipo. Entre la zona de directorios y ficheros existe un recuadro en el que es posibleindicar el filtro de mostrado de ficheros, si aquí indicamos *.htm, solo se mostrarán los ficheros deesta extensión. Para seleccionar muchos ficheros bastará con marcar el primero pulsando una vez conel ratón sobre él, y arrastrar el cursor mientras se pulsa, de esta forma todos los ficheros por los quepase el cursor del ratón quedarán seleccionados.




FAQ de la gestión de un espacio Web Departamental

FAQ de la gestión de un espacio Web Departamental

1. Cuestiones sobre HTML.

1. Incluyo una imagen en un fichero HTML, pero esta no se puede ver, ¿ cual es el problema ?. 2. Cuando escribo una instrucción HTML, me aparece el texto de la instrucción en vez de realizar la

instrucción HTML que representa. 3. Incluyo una instrucción HTML con varios atributos, pero no realizan el efecto que deseo, ¿Por

qué?. 4. Modifico una página y no se muestran los cambios. 5. Me gusta mucho una página, como podría ver su código HTML, y obtener sus imágenes.

6. ¿ Que formatos gráficos se pueden utilizar en los documentos HTML ?¿ Cual es mejor ?. 7. ¿ Qué es una imagen GIF entralazada ? ¿ Y una imagen GIF transparente ?. 8. Como crear un GIF Animado.

2. Sobre la gestión de un espacio Web departamental.

1. Como se puede incluir novedades en la página principal del UCA. 2. Introducción de un contador en una página HTML. 3. Como puedo dar publicidad a mis páginas HTML. 4. Creación secciones dentro del espacio Web de un departamento que puedan ser gestionadas por

distintas personas. 5. Como crear páginas HTML que solo puedan ser vistas desde determinadas maquinas o dominios. 6. Como crear páginas HTML que solo puedan ser vistas por determinadas personas.

Realizada por el: Servicio de Infraestructura Informática Versión: 1.0

Ultima Modificación: 14 de Junio de 1996URL: http://www2.uca.es/FAQ-www/faq.htmlComentarios: [email protected]

http://www2.uca.es/FAQ-www/faq.html30/08/2008 12:00:25 p.m.

http://www2.uca.es/FAQ-www/noimagen.html

http://www2.uca.es/FAQ-www/blaninst.html


http://www2.uca.es/FAQ-www/noefecto.html


http://www2.uca.es/FAQ-www/cache.html

http://www2.uca.es/FAQ-www/copiaimg.html

http://www2.uca.es/FAQ-www/formatos.html

http://www2.uca.es/FAQ-www/GIFinttrans.html

http://www2.uca.es/FAQ-www/novedades.html

http://www2.uca.es/FAQ-www/contador.html

http://www2.uca.es/FAQ-www/publicidad.html

http://www2.uca.es/FAQ-www/accesoporhost.html

http://www2.uca.es/FAQ-www/accessporlogin.html


http://www2.uca.es/taller-html/comenta.cgi?FAQ

http://www2.uca.es/taller-html/comenta.cgi?FAQ



http://www2.uca.es/FAQ-www/accessporlogin.html

http://www2.uca.es/FAQ-www/accesoporhost.html

http://www2.uca.es/FAQ-www/publicidad.html

http://www2.uca.es/FAQ-www/contador.html

http://www2.uca.es/FAQ-www/novedades.html

http://www2.uca.es/FAQ-www/GIFinttrans.html

http://www2.uca.es/FAQ-www/formatos.html

http://www2.uca.es/FAQ-www/copiaimg.html

http://www2.uca.es/FAQ-www/cache.html





http://www2.uca.es/FAQ-www/noimagen.html



FAQ: Como crear un GIF Animado

FAQ: Gestión de un espacio Web Departamental

Como crear un GIF Animado.

Existe un programa que permite crear GIF Animados, estos solo son visibles con el Netscape 2.0 osuperior. Un ejemplo de GIF Animado es el siguiente:

Si el perro no se mueve, necesita el Netscape 2.0

Un GIF animado consiste en un único fichero GIF que incluye varias imágenes que se van mostrando deforma sucesiva, formando de esta forma una animación. Se puede seleccionar si se desea que realice unbucle o solo se muestre una unica vez la animación.

Existe un programa que permite la creación de GIF Animados llamado GIF Construction Set. Acontinuación explicaremos como crear una imágen animada con este programa:

Para crear la imágen anterior del perro corriendo tenemos que crear un nuevo GIF, en el menú File seleccionamos la opción New y obtendremos lo siguiente:

Aqui se definirá el tamaño del GIF, por defecto esta especificado en 640x480, pulsando dos veces con elratón podemos cambiar el tamaño de la imagen que se mostrará, para el caso que nos ocupa:

http://www2.uca.es/FAQ-www/animaGIF.html (1 de 7)30/08/2008 12:00:34 p.m.






Estableceremos el tamaño en 397x35. Aqui se especificará igualmente el color de fondo de alguno de losde la paleta. Ninguna de las imagenes que formen la animación deberá ser mayor que estos valores, yaque en ese caso no se mostrará la imágen completa.

Luego incliremos un elemento Loop de la forma Insertar Loop y con

este modulo se ejecutará un bucle sucesivo de animación, sí se desea que la animación solo se ejecute unavez no deberá incluir este módulo. El Netscape no interpreta el parámetro Iterations, cuando se incluyeun elemento LOOP se ejecutará la animación de forma indefinida.

A continuación incluiremos cada una de las imagenes que formarán la animación, cada una iráacompañada de un módulo de control, por tanto para añadir cada una de las imágenes haremos lossiguiente:

1.- Incluiremos un modulo de control de la forma Insertar Control , si

pulsamos dos veces sobre el módulo de control obtendremos la siguiente pantalla:





Donde indicaremos el retardo de la animación, el tiempo en el que se mantendrá fija la visualización de la

imágen, será el parametro expresado en Delay y se expresa en threads por segundo. Cuanto mayor sea suvalor más lenta será la animación.

Sí queremos que la imágen tenga un fondo transparente deberemos marcar la opción Color Transparente , y posteriormente seleccionamos el color que se debe hacer transparente

en la imágen a la que corresponde este bloque de control. Habrá que hacer transparente

por este método a todas las imágenes que forman la animación de forma individual.

Cuando utilicemos una imágen transparente deberemos indicar en la opción Remove by: la opciónbackground , y de esta forma la imágen se sustituirá por el fondo

antes de dibujar la nueva imágen. Si no indicaramos esta opción las imágenes se dibujarían una sobre laotra creando un nulo efecto de animación, aunque podría ser util sí se desea lograr este efecto.

2.- Introduciremos la imagen que queremos que se muestre Insertar Image

. Una vez hecho esto debemos localizar el fichero de la imagen, soportando diversos

formatos de imagen. Le preguntará que paleta quiere, cuando se trate de la primera imagen, conviene queseleccione la opción Use this image as the global palette, en las siguientes imágenes seleccione laopción Dither this image to the global palette. De esta forma todas las imágenes utilizarán la mismapaleta, la de la primera imágen, y la animación se mostrará de forma correcta.





Una vez creada la imágen se incluirá un modulo de IMAGE, si pulsamos dos veces con el ratón sobre élpodremos editar la imagen de la forma:





Para formar la animación deseada, debemos crear un modulo de CONTROL indicando el tiempo quepermanecerá imagen y un modulo IMAGE para cada una de las imágenes que forman la animación, paraformar la animación anterior del perro se necesitan las siguientes imágenes:





Quedando de la siguiente manera el GIF Animado creado:




Software de HTML

Software y herramientas para la creación de documentos

HTML

Paquete Básico para la Creación de documentos HTML. Versión: Windows 3.1 Tamaño:1470303 Fichero: paqwww.exe

Descripción:

Incluye un editor de HTML (HTML Assistant Pro 2.0) , Un creador de mapas sensibles (mapedit)

, Un editor de colores (CMP) y Lview Pro para el tratamiento de imágenes.

Paquete Básico para la Creación de documentos HTML para Windows 95.

Versión: Windows 95 Tamaño:2166981 Fichero: paqwww95.exe

Descripción:

Incluye un editor de HTML (DerekWare HTML) , Un creador de mapas sensibles (Map this!)

, Un editor de colores (CMP) y Lview Pro para el tratamiento de imágenes.

DerekWare HTML para Windows 95.

Versión: Windows 95 Tamaño:732934 Fichero: dwhtml.exe

Descripción: Editor de HTML para Windows 95 muy sencillo de usar y con muchas opciones.

Software para el tratamiento de imágenes Lview Pro 16.

Versión: Windows 3.1 Tamaño:390638 Fichero: lviewpro.exe

Descripción: Utilidad para la conversión entre diversos formatos de imágenes y creación de imágenes GIF entrelazadas

y con fondo transparente.

http://www2.uca.es/taller-html/softw-html.html (1 de 3)30/08/2008 12:00:38 p.m.

http://www2.uca.es/taller-html/software/paqwww.exe

http://www2.uca.es/taller-html/software/paqwww95.exe


http://www2.uca.es/taller-html/software/dwhtml.exe

http://www2.uca.es/taller-html/software/lviewpro.exe

http://www2.uca.es/taller-html/software/lviewpro.exe

http://www2.uca.es/taller-html/software/dwhtml.exe



http://www2.uca.es/taller-html/software/paqwww.exe



Software de HTML

GIF Construction Set para Windows 3.1.

Versión: Windows 3.1 Tamaño:566189 Fichero: gifcon.exe

Descripción: Permite crear GIF Animados.

GIF Construction Set para Windows 95.

Versión: Windows 95 Tamaño:552603 Fichero: gifcon32.exe

Descripción: Permite crear GIF Animados.

Paint Shop Pro 32 bits. Versión: Windows 95 Tamaño:2334379 Fichero: psp32.exe

Descripción: Completa utilidad para el retoque de imagénes. Trabaja con gran cantidad de formatos de imágenes.Comparable con el Adobe Photoshop

Map This!

Versión: Windows 95 Tamaño:831695 Fichero: mapthis.exe

Descripción: Programa para la creación de imágenes sensibles, para windows 95.

Asistente para el MS Word 7.

Versión: Windows 95 Tamaño:1192960 Fichero: wrdia20z.exe

Descripción: Permite crear documentos HTML con el MS Word 7, funcionando como un editor WYSIWYG.

Asistente para el MS Power Point 7.

Versión: Windows 95 Tamaño:253440 Fichero: ia4ppt95.exe

Descripción: Permite crear documentos HTML con el MS Power Point 7, puede ver el documento de explicación.

Libreria de Referencia para HTML.


http://www2.uca.es/taller-html/software/gifcon.exe

http://www2.uca.es/taller-html/software/gifcon32.exe

http://www2.uca.es/taller-html/software/psp32.exe

http://www2.uca.es/taller-html/software/mapthis.exe

http://www2.uca.es/taller-html/software/wrdia20z.exe

http://www2.uca.es/taller-html/software/ia4ppt95.exe

http://www2.uca.es/taller-html/software/ia4ppt95.htm

http://www2.uca.es/taller-html/software/htmllib.zip

http://www2.uca.es/taller-html/software/htmllib.zip

http://www2.uca.es/taller-html/software/ia4ppt95.htm

http://www2.uca.es/taller-html/software/ia4ppt95.exe

http://www2.uca.es/taller-html/software/wrdia20z.exe

http://www2.uca.es/taller-html/software/mapthis.exe

http://www2.uca.es/taller-html/software/psp32.exe

http://www2.uca.es/taller-html/software/gifcon32.exe

http://www2.uca.es/taller-html/software/gifcon.exe



Software de HTML

Versión: Windows 3.1 Tamaño:213371 Fichero: htmllib.zip

Descripción: Fichero de ayuda para windows, que explica de forma extensa el uso de todas las etiquetas de HTML (eninglés).




http://www2.uca.es/manual-html/prueba/boton3.htm

PULSADO EL BOTON 3

http://www2.uca.es/manual-html/prueba/boton3.htm30/08/2008 12:00:38 p.m.




PULSADO EL BOTON 2





PULSADO EL BOTON 1




FAQ:Creación secciones dentro del espacio Web de un departamento que puedan ser gestionadas por distintas personas

FAQ: Gestión de un espacio Web Departamental

Creación secciones dentro del espacio Web de un departamento que puedanser gestionadas por distintas personas

Cuando alguién de su departamento desea publicar de forma electrónica un documento o dar publicidad asu actividad cientíifica, necesariamente tendrá que hablar con el gestor del espacio Web Departamental ycoordinarse con él. Esto puede crear diversos problemas ya que tendrían que conocer el password deldepartamento muchas personas y podrían modificarse los datos mutuamente.

Para solucionar esto y permitir que diversas personas de su departamento puedan publicar de formaelectrónica documentos, les ofrecemos la siguiente solución.

La persona deberá tener una cuenta en la maquina que actua como servidor (merlin), en su directorio raizcreará un directorio llamado html y le dará permiso para que pueda ser leido por todo el mundo, para quepueda ser accesible por el servidor, su directorio también debe poder ser accedido por todos los usuarios.El directorio podrá ser leido pero no modificado por todos los usuarios, ya que se incluirán documentos dedominio público.

La forma de hacerlo será:

1. Entrará en su cuenta de merlin por telnet (QVTNET), introduciendo su login y su password.

2. Creará un directorio llamado html y le asignará los permisos adecuados, de la forma:

Una vez hecho esto deberá enlazarlo desde el servidor, para ello desde el directorio de su espacio Web, eldirectorio html de su cuenta departamental. Creará un directorio que se enlace con el directorio de lapersona que desea crear la sección. La forma de hacerlo es la siguiente:

http://www2.uca.es/FAQ-www/secciones.html (1 de 2)30/08/2008 12:00:42 p.m.



FAQ:Creación secciones dentro del espacio Web de un departamento que puedan ser gestionadas por distintas personas

Donde login es el login de la persona que va a crear la sección y seccion es el nombre que tendrá lasección.

La URL que tendrá la sección será la de su estamento añadiendole el nombre de sección dadoanteriormente.

Como nombre de la sección no debe usar el nombre de la persona que la gestiona, sino deberá indicar untexto explicativo de su contenido, ya que este nombre será el que se utilice para referenciar la URL de las

páginas que se incluyan.

El gestor del espacio Web Departamental será el responsable de la información que se incluya en cadauna de las secciones, siendo el responsable del cumplimiento de la normativa que regula este servicio. Enel caso que no se incluyan los contenidos deseados en una sección podrá inhabilitarla del siguiente modo:

12:15 merlin> rm seccion

Desde el directorio donde fue creada la sección. Y de esta forma la sección dejara de ser accesible desdeel servidor Web.

Esto no se entiende como la creación de páginas personales, ya que la información que podrán añadirdeberá estar relacionado con la actividad del departamento, o con algún trabajo de investigación o interésque este realizando.

La persona que gestione esa porción del espacio Web departamental deberá cumplir la normativa, y portanto deberá ser informado de ello.

La responsabilidad de la información incluida será del departamento o servicio.

Tenga en cuenta que toda la información que se incluya en estas secciones estanrán asociadas en la URLal nombre del departamento, por tanto se recomienda que la información tenga relación con la actividadde este. Estará prohibido la inclusión de información de tipo: comercial, pornográfica, ocio, etc.

http://www2.uca.es/FAQ-www/secciones.html (2 de 2)30/08/2008 12:00:42 p.m.

http://www2.uca.es/infowebmanagers/normas-www.html

http://www2.uca.es/infowebmanagers/normas-www.html



Directorio de Imágenes

Directorio de Imagenes

q <img src="/imagenes/escuduca1.gif"> 283x437 q <img src="/imagenes/escuduca2.gif"> 259x400 q <img src="/imagenes/escuduca3.gif"> 194x300 q <img src="/imagenes/escuduca4.gif"> 129x200 q <img src="/imagenes/escuduca5.gif"> 65x100

q <img src="/imagenes/logouca.gif"> 560x250 q <img src="/imagenes/logouca1.gif"> 280x125

q <img src="/imagenes/ucacol1.gif"> 369x215 q <img src="/imagenes/ucacol2.gif"> 257x150 q <img src="/imagenes/ucacol3.gif"> 172x100 q <img src="/imagenes/ucacol4.gif"> 86x50

http://www2.uca.es/imagenes/ (1 de 2)30/08/2008 12:00:46 p.m.

http://www2.uca.es/imagenes/escuduca1.gif










http://www2.uca.es/imagenes/logouca.gif


http://www2.uca.es/imagenes/logouca1.gif


http://www2.uca.es/imagenes/ucacol1.gif





















Directorio de Imágenes

q <img src="/imagenes/ucasom1.gif"> 230x130 q <img src="/imagenes/ucasom2.gif"> 177x100

q <img src="/imagenes/ucasom3.gif"> 88x50

http://www2.uca.es/imagenes/ (2 de 2)30/08/2008 12:00:46 p.m.

http://www2.uca.es/imagenes/ucasom1.gif











Directorio de Iconos

Directoriode Iconos

<IMG SRC = "/ iconos/arrow.gif

">

<IMG SRC = "/ iconos/atomo.gif

">

<IMG SRC = "/iconos/ bolaamar.gif ">

<IMG SRC = "/iconos/bolaazul.gif ">

<IMG SRC = "/ iconos/bolacian.

gif ">

<IMG SRC = "/ iconos/bolaroja.

gif ">

<IMG SRC = "/iconos/ bolarosa.gif ">

<IMG SRC = "/iconos/ bolaverd.gif ">

<IMG SRC = "/ iconos/boton10.

gif ">


gif ">

<IMG SRC = "/iconos/boton12.gif ">


<IMG SRC = "/ iconos/boton14.gif ">

<IMG SRC = "/ iconos/boton15.gif ">


<IMG SRC = "/iconos/boton17.

gif ">


gif ">

<IMG SRC = "/

iconos/enobras.gif ">

http://www2.uca.es/iconos/?18

http://www2.uca.es/iconos/enobras.gif

http://www2.uca.es/iconos/boton18.gif









http://www2.uca.es/iconos/bolaverd.gif

http://www2.uca.es/iconos/bolarosa.gif

http://www2.uca.es/iconos/bolaroja.gif

http://www2.uca.es/iconos/bolacian.gif

http://www2.uca.es/iconos/bolaazul.gif

http://www2.uca.es/iconos/bolaamar.gif

http://www2.uca.es/iconos/atomo.gif

http://www2.uca.es/iconos/arrow.gif

Manual HTML

Documents

Transcript of Manual HTML