0% encontró este documento útil (0 votos)

124 vistas

Manual HTML

Este documento describe las etiquetas básicas del lenguaje HTML y sus atributos. Explica que HTML es un lenguaje de marcas donde las etiquetas definen la estructura y formato del contenido.

Cargado por

Diego Feliz

Derechos de autor

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

124 vistas

Manual HTML

Este documento describe las etiquetas básicas del lenguaje HTML y sus atributos. Explica que HTML es un lenguaje de marcas donde las etiquetas definen la estructura y formato del contenido.

Cargado por

Diego Feliz

Derechos de autor

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 216

Indice del manual de HTML

El Lenguaje HTML
Introduccin 1 - Etiquetas del lenguaje HTML
s s s

Las Etiquetas Atributos de las Etiquetas Etiquetas correctas Definicin Uso y Formato Estructura Bsica Comentarios Introduccin <TITLE>: Ttulo del documento <BASE>: URL base del documento <ISINDEX>: El documento es un ndice <META>: Indica refresco del documento Introduccin Definicin de colores Paleta de colores del Netscape 3.0 Atributos de <BODY> Ejemplos
s s s s s

2 - Formato de las URL

s s

3 - Estructura de un documento HTML

s s

4 - Cabecera de un documento HTML

s s s s s

5 - Cuerpo de un documento HTML

s s s s s

5.1 - Espaciados y saltos de lnea

El espaciado en HTML <P> Cambio de prrafo <BR> Salto de lnea <HR> Regla Horizontal <PRE> Texto preformateado

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

Indice del manual de HTML

s s

<CENTER> Centrado de texto e imgenes   Espacios en blanco Como representar caracteres especiales Elementos del lenguaje HTML Caracteres acentuados Otros Simbolos <H1> - <H6> Cabeceras de titulos <Hn ALIGN=CENTER>: Alineacin de la cabecera Ejemplos Utilidad <FONT SIZE=n> : Tamao de la fuente Ejemplos de tamaos de fuentes <BASEFONT SIZE=n> : Fuente por defecto <FONT COLOR=texto color rrvvaa> : Color de la fuente Ejemplos de definicin de colores de fuentes Estilos fsicos y Estilos lgicos Estilos Fsicos Estilos Lgicos Las listas en HTML <UL> Listas no ordenadas s Ejemplos <OL> Listas ordenadas s Ejemplos <DL> Listas de definiciones s Ejemplos Hiperenlaces <A HREF=...> Hiperenlace URL absolutas y relativas s Ejemplos <A NAME=...> Elemento Ancla Imgenes en los documentos HTML <IMG SRC=...> Inclusin de Imgenes <IMG ... ALT=...> Texto alternativo

5.2 - Caracteres latinos y especiales

s s s s

5.3 - Cabeceras
s s s

5.4 - Tamao y Color de las fuentes de caracteres

s s s s s s

5.5 - Estilos fsicos y lgicos

s s s

5.6 - Definicin de listas

s s

5.7 - Hiperenlaces
s s s

5.8 - Imgenes
s s s

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

Indice del manual de HTML

s s s s

<IMG .. ALIGN=...> Alineacin de la imgen <IMG .. BODER=...> Borde de la imgen <IMG .. HEIGHT=... WIDTH=...> Tamao de la imgen <IMG .. HSPACE=... VSPACE=...> Espaciado de separacin de la imgen Creacin de imgenes GIF transparentes Imgenes Sensibles s Ejemplo ISMAP como referenciar la imgen sensible s Ejemplo Imgenes sensibles definidas desde el cliente s Ejemplo Multimedia ? Extensiones Multimedia de Internet Explorer Plug-in's <EMBED> Insertar Ficheros Introduccin <TABLE> Definicin de la Tabla <CAPTION> Titulo de la tabla <TR> Fila de la tabla <TH> y <TD> Una celda de la tabla Ejemplos de tablas Introduccin <FORM> Definicin de formularios <INPUT> Entrada bsica de datos <INPUT TYPE=TEXT...> Texto corto <INPUT TYPE=PASSWORD...> Palabras secretas <INPUT TYPE=CHECKBOX> Botones de seleccin <INPUT TYPE=RADIO...> Seleccin entre multiples opciones <INPUT TYPE=HIDDEN...> Parametros ocultos <INPUT TYPE=SUBMIT...> Enviar Datos <INPUT TYPE=IMAGE...> Boton de Envio grfico <INPUT TYPE=RESET...> Borrar los datos <TEXTAREA> Texto en multiples lneas <SELECT> Eleccin entre multiples opciones

5.9 - Imgenes Sensibles

5.10 - Inserccin de elementos multimedia

s s s s

5.11 - Tablas
s s s s s s

5.12 - Formularios
s s s s s s s s s s s s s

7 - CGI (Common Gateway Interface), ejecucin de binarios.

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

Indice del manual de HTML

s s s s

Definicin Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin Introduccin Definicin <FRAMESET ...> Definicin de las frames <FRAME ...> Definicin de cada una de las frames TARGET: Atributo para indicar la frame de destino

8 - Documentos con frames.

s s s s s

Disponible en un solo documento, apto para imprimir. En este documento no tendrn funcionalidad los enlaces, Tambien esta disponible para obtenerlo y consultarlo de forma local: Obtener el fichero (man-html.zip).

Gestin de un espacio Web Departamental

1 - Como gestionar la cuenta Departamental
s s s s s s

Introduccin Ficheros a incluir Estructura de directorios Imagenes e Iconos Fichero por defecto (default.htm) Inclusin de informacin

Gestin de una cuenta departamental por FTP 2 - Conceptos bsicos del diseo de documentos y espacios Web (EN PREPARACIN) 3 - FAQ de la gestin de un espacio Web Departamental

Realizado por el: Servicio de Infraestructura Informtica Versin: 0.99 Ultima Modificacin: 9 de Septiembre de 1996 URL: http://www2.uca.es/manual-html/indice.htm Comentarios: [email protected]
http://www2.uca.es/manual-html/indice.htm (4 de 5)30/08/2008 11:59:16 a.m.

Indice del manual de HTML

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

Introduccin

Introduccin
HTML es un lenguaje sencillo pensado para presentar informacin en la WWW. HTML (HyperText Markup Languaje), como su nombre indica es un lenguaje de marcas para la creacin de hipertextos. Por hipertexto entenderemos texto con una presentacin agradable, con inclusin de elementos multimedia (grficos, video, audio) y con la presencia de hiperenlaces que permiten relacionar otras fuentes de informacin en documentos hipertextos. Es el lenguaje utilizado para representar 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 texto resaltados convenientemente que definirn la estructura lgica del documento. Por tanto un documento HTML constrar de texto que ser el contenido y la informacin del documento y de instrucciones HTML que resaltarn este contenido y le darn un formato facil y agradable de leer y con la posiblidad de relacionar documentos y fuentes de informacin mediante hiperenlaces. Las marcas del lenguaje HTML especifican:
q

La estructura lgica del documento: r Cabeceras, tipos y tamaos de las fuentes. r Parrafos de texto. r Centrado. r Enumeraciones o listas. r Formularios. r Tablas. Distintos estilos que definen el texto: r Negrita. r Cursiva. r Diferentes efectos: (direcciones de correo, citas textuales, etc). Inclusin de hipertextos para acceder a otros documentos relacionados Inclusin de imgenes y ficheros multimedia.

El lenguaje HTML actualmente est en su versin 2.0, aunque se encuentra en desarrollo la 3.0. En este estndar se definen las etiquetas bsicas y las estructuras de datos que forman el lenguaje. En este manual explicaremos todas las estructuras definidas en la especificacin 2.0 aadiendo las extensiones incluidas por NetScape en su versin 2.0. La unin de ambos constituye la especificacin del lenguaje HTML ms extendida en la actualidad. Este manual tiene la voluntad de ser dinmico y por tanto ir incorporando las nuevas especificaciones 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 sern fragmentos de texto destacado de una forma especial que permiten la definicin de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y sern la base principal del lenguaje HTML. En documento HTML ser un fichero texto con etiquetas que variarn la forma de su presentacin. Una etiqueta ser un texto incluido entre los smbolos menor que < y mayor que >.. El texto incluido dentro de los smbolos ser explicativo de la utilidad de la etiqueta. Por ejemplo:

<B> <TABLE> <IMG>

Letra Negrita, del ingls Bold (negrita). Definir una tabla. Inclusin de una IMaGen.

Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendr el mismo texto que la de inicio aadindole al principio una barra inclinada /. El efecto que define la etiqueta tendr validez para todo 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 necesitarn la de fin, sern aquellas en las que el final este implcito, por ejemplo <P> prrafo, <BR> salto de lnea <IMG> inclusin de una imagen. Definen un efecto que se 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 maysculas o minsculas en las etiquetas es indiferente, se interpretarn del mismo modo en ambos casos, pero lo normal es expresarlas en maysculas para que destaquen con ms nitidez del texto normal.

Atributos de las Etiquetas

Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirn definir diferentes posibilidades de la instruccin HTML. Estos atributos se definirn en la etiqueta de inicio y consistirn 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 de como lo interprete el navegador. Cuando el valor que toma el atributo tiene ms 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 podra 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 caso especial que no presenta valor. El orden en que se especifiquen los atributos no afectarn al resultado final.

Etiquetas en HTML

documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas. Por tanto debemos 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 se conectan a nuestras pginas no tendrn en la mayora de los casos el mismo que nosotros. Tambien es interesante como se vera el documento en los distintos tamaos de la ventana del navegador, teniendo en cuenta que todos no tienen un monitor con la misma resolucin. En este manual se han tratado de incluir las caractersticas ms estndar de HTML y en caso de tratarse de instrucciones ms particulares se indicar convenientemente.

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

Formato de las URL

2 - Formato de las URL

Definicin
URL es el acrnimo de (Uniform 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 informacin de servicios que antes eran incompatibles entre s, tratando de conseguir que todos los servicios de internet sean accesibles a travs de la WWW, de esta forma desde un mismo programa se puede tener acceso a todos los recursos de una forma uniforme y permite que los documentos HTML incluyan enlaces a otras fuentes de informacin en servicios como FTP, gopher, WAIS, etc ...

Uso y Formato
Las URL se utilizarn para definir el documento de destino de los hiperenlaces, para referenciar los grficos y cualquier otro fichero que se desee incluir dentro de un documento HTML. Cada elemento 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. Todas
las pginas HTML en servidores WWW debern ser referenciadas mediante este servicio. Indicar conexin a un servidor de la WWW.

https: (HyperText Transport Protocol Secure), es el protocolo para la conexin a servidores de la

WWW seguros. Estos servidores son normalmente de mbito comercial y utilizan encriptacin para evitar la intercepcin de los datos enviados, usualmente numeros de tarjeta de credito, datos personales, etc ..., realizar una conexin a un servidor de la WWW seguro.

ftp: (File Transfer Protocol), utilizar el protocolo FTP de transferencia de ficheros. Se utilizar
cuando la informacin que se desee acceder se encuentre en un servidor de ftp. Por defecto se acceder a un servidor annimo (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 localizacin de informacin, se indicar el

directorio para localizar el recurso concreto.

news: Accede al servicio de news, para ello el visualizador de la WWW debe ser capaz de
presentar 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: Emulacin de terminal remota, para conectarse a maquina multiusuario, se utiliza para
acceder a cuentas pblicas como por ejemplo la de biblioteca. Lo normal es llamar a una aplicacin externa que realice la conexin. En este caso se indicar la maquina y el login: telnet://maquina. dominio@login.

mailto: Se utilizar para enviar correo electrnico, todos los navegadores no son capaces. En este
caso solo se indicar la direccin de correo electrnico del destino: mailto://alias. correo@domino. La maquina.dominio indicar el servidor que nos proporciona el recurso, en este caso se utilizar el esquema IP para identificar la maquina ser el nombre de la maquina y el dominio. En el caso de nuestra Universidad el dominio siempre ser uca.es. Por tanto un nombre valido de maquina ser www2.uca.es. Es muy importante indicar siempre el dominio, ya que debemos suponer que se conectarn a nuestras pginas desde servidores externos a nuestra red local por tanto si no indicamos el dominio las URL que especifiquemos no podran 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 pero si se referenciara desde una red con distinto dominio la maquina www2 ser la maquina llamada 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 utiliza normalmente por el servicio. Solo se utilizar cuando el servidor utilice un puerto distinto al puerto por defecto. El camino ser la ruta de directorios que hay que seguir para encontrar el documento que se desea referenciar. para separar los subdirectorios utilizaremos la barra de UNIX /, se usa por convenio al ser este tipo de maquinas las ms usadas como servidores. El nombre de los subdirectorios y del fichero referenciado puede ser de ms de ocho caracteres y se tendr en cuenta la diferencia entre maysculas y minsculas en el nombre. La extensin de los ficheros ser tambin algo importante, ya que por ella sabe el servidor el tipo de 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 ms normales con sus tipos correspondientes son:

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

Formato de las URL

Tipo MIME text/html text/plain image/gif image/jpeg

Extensin html . htm, .txt .gif jpg .jpeg

Tipo de fichero documento HTML por defecto, texto plano imagen de formato GIF imagen de formato JPEG

El navegador de la WWW, realiza una accin para cada tipo de fichero, solo los que sean del tipo text/html sern 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 pgina html por defecto de ese directorio. En el servidor estn definidos unos ficheros para ser usados si no de indica un 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 el directorio. Este fichero es la pgina inicial (home page) del servidor o del espacio Web. Algunos ejemplos de URL podran ser:

URL

http://www.uca.es

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

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

ftp://ftp.uca.es/imagenes/globo.gif

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

Formato de las URL

news:uca.es

En este caso se acceder al grupo de news de la uca en el servidor de news definido por defecto en el navegador de la WWW, esta opcin solo es soportada por los navegadores ms modernos. Enviar un mail al equipo de la WWW de la UCA, esta opcin solo es soportada por los navegadores ms modernos.

mailto://[email protected]

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

Estructura de un Documento HTML

3 - Estructura de un documento HTML

Estructura Bsica
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 se muestren sin ningn problema sin incluir estas etiquetas de identificacin. Si se utilizan elementos que forzosamente deban ser incluidos en la cabecera (como la etiqueta de titulo), no sern reconocidos correctamente si no se incluyen entre las etiquetas de <HEAD>. En los prximos apartados explicaremos de forma separada los componentes de la cabecera y del cuerpo 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>. Tambin aunque ya con menos utilidad para comentar cualquier instruccin o circunstancia 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 el cdigo 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

Introduccin
La cabecera de un documento HTML est delimitado por las etiquetas <HEAD> y </HEAD>, en esta se incluirn las definiciones generales que afectarn a todo el documento. Todas sus etiquetas son opcionales y se utilizarn solo en casos muy determinados, solo la etiqueta TITLE tiene un uso general y aunque es opcional se recomienda incluirla en todos los documentos que creemos. A continuacin se citan los distintos componentes que pueden formar la cabecera de un documento HTML.

<TITLE>: Ttulo del documento

Especificar el ttulo del documento HTML, todo documento HTML debe tener un titulo. El titulo debe guardar relacin con el contenido del documento y definirlo de forma general, su tamao 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 ttulo 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 pgina en los bookmarks (marcadores) y las history list (lista de documentos accedidos) y tambin se utiliza por algunos servidores de bsqueda como resultado de una busqueda para poder intuir el contenido del documento. El titulo deber guardar relacin 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.

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 bsqueda en l. Presentar un indicador preguntando la palabra clave de la bsqueda. No se utiliza en documentos normales, sino en documentos realizados con cgi-bin para indicar que les debe pasar una palabra clave para realizar la bsqueda. Presenta dos atributos, PROMPT que indica el texto que aparecer como inductor de la bsqueda y ACTION que especifica el fichero cgi que trata la consulta, por defecto ser el documento actual.

<META>: Indica refresco del documento

Aunque tiene ms utilidades, la principal es indicar documentos con refresco automtico. Se indicar un documento que debe sustituir al actual en un determinado nmero de segundos. El formato es el siguiente: <META HTTP-EQUIV="REFRESH" CONTENT="nmero_segundos ; URL=URL_de_refresco"> Se indica el nmero de segundos que deben pasar antes del refresco y el documento HTML que sustituye al actual. Si se indica cero segundos la transicin 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 un tiempo se actualizarn, o documentos que deban ser vistos de forma secuencial, se empieza por un documento pasando a los siguientes transcurrido un perodo de tiempo sin necesidad de accin alguna por 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

5 - Cuerpo de un documento HTML

Introduccin
El cuerpo de un documento HTML estar delimitado por las etiquetas <BODY> y </BODY> y en el se incluirn todas las instrucciones HTML y el texto que forman el documento, es similar al BEGIN { de un lenguaje de programacin. Al igual que la cabecera (HEAD) es opcional, pero se recomienda para la buena identificacin de las distintas zonas del documento. Si un documento no presenta ninguna de las etiquetas de identificacin de sus distintas partes (<HTML>, <HEAD> <BODY>) se considerar que todo lo que se defina pertenece al cuerpo del documento.

Definicin de colores
Antes de especificar los atributos de la etiqueta BODY indicaremos, la forma de representar los distintos colores. Se usa el siguiente formato: #rrvvaa Donde se indica en formato hexadecimal la proporcin de rojo, verde y azul que forma el color deseado. El smbolo # es opcional. Un nmero hexadecimal es un nmero en base 16, la base normal utilizada es base 10 o decimal del 0 al 9. En este caso los nmero validos sern del 0 al 9 aadiendo desde la a A a la f F. Por tanto el nmero 0F ser el 15, 0E ser 14. En la especificacin del color utilizaremos para definir la proporcin de cada color un nmero del 0 al FF (255), 0 indica nada de ese color y FF la mayor proporcin del color. Algunos ejemplos de colores sern:

#000000 #FFFFFF #FF0000 #00FF00 #0000FF

Negro(Negro) Blanco
(Blanco)

Rojo(Rojo) Verde(Verde) Azul(Azul)

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

Cuerpo de un documento HTML

Algunos colores estn predefinidos y pueden ser referenciados por su nombre, estos solo sern validos para Netscape e Internet Explorer de Microsoft, estos colores predefinidos son:

Color Predefinido black teal blue navy lime white purple yellow

Muestra negro teal azul azul marino lima blanco purpura amarillo

Color Predefinido olive red maroon gray fuchsia green silver aqua

Muestra oliva rojo marron gris fucsia verde plata 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 definicin global para todo el documento, estos definirn 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 el camino a una imagen. Esta se muestra debajo del texto y las imgenes del documento HTML. En el caso de que la imagen no rellene todo el fondo del documento esta ser reproducida tantas veces como 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

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

Cuerpo de un documento HTML

de fondo, o si esta imagen no puede obtenerse.

TEXT=#rrvvaa nombre del color:

Especificar el color del texto normal dentro del documento HTML. Por defecto ser normalmente negro.
q

LINK=#rrvvaa nombre del color:

Indicar el color que tendrn 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 ms oscuro.

Ejemplos
Algunos ejemplos podran ser: <body background= "http://www2.uca.es/fondos1/ fondo15.gif"> <body bgcolor=blue text=white link=red vlink=aqua>
El documento tendr como fondo la imagen indicada en la URL En este caso el fondo ser azul, el texto blanco, los enlaces rojos y los enlaces visitados color agua Este caso es similar al anterior pero usando el formato hexadecimal para definir los colores, el fondo ser azul, el texto blanco, los enlaces rojos y los enlaces visitados color verde oscuro

<body bgcolor=0000FF text=FFFFFF link=FF0000 vlink=008200>

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

Colores soportados por el Netscape

Colores soportados por el Netscape 2.0

Los colores que se muestran solo sern 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 bisque burlywood cornsilk darkgray darkorchid darkturquoise firebrick gold hotpink lavenderblush lightskyblue linen mediumpurple midnightblue oldlace palegoldenrod peru rosybrown seashell snow tomato yellow antiquewhite black cadetblue crimson darkgreen darkred darkviolet floralwhite goldenrod indianred lawngreen lightslategray magenta mintcream olive palegreen pink royalblue sienna springgreen turquoise yellowgreen aqua chartreuse cyan darkkhaki darksalmon deeppink forestgreen gray indigo lemonchiffon lightgrey lightsteelblue maroon mistyrose olivedrab paleturquoise plum saddlebrown silver steelblue violet aquamarine chocolate darkblue darkmagenta darkseagreen deepskyblue fuchsia green ivory lightblue lightpink lightyellow azure blueviolet coral darkcyan darkolivegreen darkslateblue dimgray gainsboro greenyellow khaki lightcoral lightsalmon lime beige brown cornflowerblue darkgoldenrod darkorange darkslategray dodgerblue ghostwhite honeydew lavender lightcyan lightseagreen limegreen mediumorchid navy orchid peachpuff red seagreen slategray thistle whitesmoke

blanchedalmond blue

lightgoldenrodyellow lightgreen

mediumaquamarine mediumblue moccasin orange palevioletred powderblue salmon skyblue tan wheat navajowhite orangered papayawhip purple sandybrown slateblue teal white

mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred

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

Espaciados y Saltos de Lnea

5.1 - Espaciados y saltos de lnea

El espaciado en HTML
En HTML no est permitido ms de un elemento blanco (espacios, tabuladores, saltos de lnea) separando cualquier elemento o texto, todos estos son convertidos a un nico espacio blanco y el resto se omiten en la representacin del documento. En el documento fuente podremos usar el espaciado que deseemos, 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. A continuacin se detallar cada una de ellas.

<P> Cambio de prrafo :

Definir un prrafo, se usar al comienzo o al final de un prrafo de texto e introducir un espaciado de separacin (normalmente dos lneas) con el prximo texto que se exprese. Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo servir para separar texto. 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 prrafo </P> es opcional no siendo necesario incluirla. Existen elementos HTML que ya introducen separaciones de lneas, tanto antes como despues, por tanto en estos casos no es necesario, pero s posible, introducir el elemento de nuevo prrafo. No es necesario utilizar esta etiqueta ni antes ni despus de cabeceras <Hn>, despus de <HR> (reglas horizontales), <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 una lista.

Ejemplo
Inst. HTML Resul tado Esta es una frase que forma un parrafo.<P>Este es el otro parrafo.

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.

Espaciados y Saltos de Lnea

Explica cin

En el punto donde se ha introducido la instruccin HTML de nuevo parrafo se observa una separacin de dos lneas.

<BR> Salto de lnea :

Su utilidad es similar al anterior pero en este caso el espaciado del texto es menor, se pasar a la lnea siguiente, sin dejar una lnea de separacin. En este caso ser un cambio de lnea y no de parrafo. Igualmente no es necesario usarlo tras los elementos que llevan implcitos un salto de lnea, ni tampoco es necesaria la etiqueta de fin </BR>.

Ejemplo
Inst. HTML Resul tado Explica cin Esta es una frase de la primera lnea.<BR>Esta es la siguiente lnea

Esta es una frase de la primera lnea. Esta es la siguiente lnea

En el punto donde se ha introducido la instruccin HTML de nueva lnea se observa el cambio de lnea.

<HR> Regla Horizontal :

<HR ALIGN=LEFT|RIGTH|CENTER NOSHADE SIZE=n WIDTH=n> Se usa para dividir un documento en distintas secciones, mostrar una lnea horizontal de tamao determinable. Se asemejar al salto de pgina dentro de un documento. Si no se especifican atributos dibujar una lnea que ocupe el ancho de la pantalla del navegador y introduciendo una separacin con el texto anterior y siguiente, equivalente a cambio de prrafo. No es necesaria la etiqueta de fin </HR>. Con los atributos podemos especificar su forma y tamao, esto atributos 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 pantalla del navegador, a la izquierda, derecha o centrada.
q

NOSHADE:

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

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

Espaciados y Saltos de Lnea

SIZE=n:

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

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 Resul tado Explica cin Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin Mostrar un lnea que ocupa el cincuenta por ciento del ancho disponible, es de 5 de alto y est alineada a la izquierda. Mostrar un lnea que ocupa todo el ancho disponible, es de 5 de alto y no tiene sombra ni efecto dimensional. Mostrar un lnea que ocupa todo el ancho disponible y de altura 1 con sombra. <HR>

<HR SIZE=5 NOSHADE>

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

<PRE> Texto preformateado :

Espaciados y Saltos de Lnea

fuente de espaciado fijo ms pequea que el texto normal. Presenta un problema cuando la lnea es demasiado larga, ya que no la corta el navegador y se mostrara tal y como aparece en el fichero fuente. No se recomienda como forma rpida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacin. Dentro de la etiqueta PRE no tendrn validez la mayora de las instrucciones HTML, solo se podrn 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 se escribi. </PRE>

Resul tado

Este texto se ver tal y como se escribi.

Explica cin

Como se ve utiliza otra fuente de caracteres distintas de espaciado fijo y se respetan los espacios en blanco y los saltos de lnea de la instruccin original.

<CENTER> Centrado de texto e imgenes :

Se utilizar para centrar lneas de texto, imgenes 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 Resul tado Explica cin Inst. HTML <CENTER> Este texto se ver centrado </CENTER>

Este texto se ver centrado

El texto aparece centrado en el navegador. Se puede utilizar tanto para una lnea como para un prrafo, y para cualquiera de la instrucciones del lenguaje HTML. <CENTER> El texto y la imagen se centran<BR> <IMG SRC="/iconos1/or_star.gif"> </ CENTER>

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

Espaciados y Saltos de Lnea

Resul tado Explica cin

El texto y la imagen se centran

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 mostrarn de forma efectiva, pudiendo mostrar ms de un espacio en blanco de separacin. Se incluirn tantas expresiones   como espacios en blanco se desee conseguir.

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

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 definir sus etiquetas no se pueden incluir en un documento de manera normal, se deben utilizar una serie de secuencias de escape que al mostrar el documento se sustituyen por el carcter deseado. Estas secuencias de escape comienzan todas con el smbolo ampersand (&), seguido de un texto (siempre en minsculas) que define el carcter deseado y termina con el smbolo punto y coma (;). El error ms comn 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 carcter deseado. No es necesario dejar espacios en blanco ni antes ni despus de los caracteres especiales, para que queden perfectamente encuadrados en la palabra.

Elementos del lenguaje HTML

Si incluimos en el texto de un documento HTML el smbolo menor que (<) o mayor que (>) se interpretar siempre como la definicin de una etiqueta y por tanto no se mostrarn al interpretar el documento. Para expresar estos smbolos y otros del lenguaje HTML usaremos las siguientes secuencias de escape:

Sec. Escape < > & " Signo < (menor que) Signo > (mayor que) Signo & (ampersand)

Simbolo

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
http://www2.uca.es/manual-html/latincha.htm (1 de 3)30/08/2008 11:59:28 a.m.

Caracteres Latinos y especiales

escape, se mostrarn correctamente. Usted en su ordenador con su navegador podr leer estos caracteres correctamente siempre y cuando tenga el mismo cdigo (espaol) que el autor del documento. Los primeros 127 caracteres del cdigo ASCII son comunes para todos los pases e incluyen todas las letras del alfabeto, a partir del 128 son especficos para cada lenguaje, entre estos se incluyen los caracteres acentuados y la letra , por tanto si alguien desde otro pas que tenga un cdigo incompatible intenta leer su documento, probablemente encuentre caracteres extraos que no sepa interpretar 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 maysculas como para las minsculas. Por tanto incluiremos el smbolo de ampersand (&) la vocal que deseamos acentuar, la palabra acute y el smbolo punto y coma (;). Representndose los acentos de la forma:

Sec. Escape á é í ó ú

Letra

Sec.Escape Á É Í Ó Ú

Letra

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

Sec. Escape ñ

Letra

Sec.Escape Ñ

Letra

Para el acento grave usaremos grave, siendo en este caso la representacin:

Sec. Escape à è ì

Letra

Sec.Escape À È Ì

Letra

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

Caracteres Latinos y especiales

ò ù

Ò Ù

Otros Smbolos
Para expresar una carcter por su valor en el cdigo ASCII, usaremos el smbolo #, seguido de su equivalente numrico. Para el acento circunflejo utilizaremos el literal circ y para la diresis utilizaremos el literal uml. Para expresar los smbolos de apertura interrogacin, apertura de exclamacin y estos acentos usaremos:

Sec. Escape ¿ ü î

Letra

Sec.Escape ¡ Ü Î

Letra

Algunos otros smbolos especiales sern los siguientes.

Sec. Escape ç ® &#nnn;

Simbolo

Sec.Escape Ç ©

Simbolo

Smbolo de registrado

Smbolo de Copyright.

Donde nnn es un nmero decimal, el carcter nnn del cdigo ISO-8859-1 (ASCII).

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

Cabeceras de resalte

5.3 - Cabeceras
<H1> - <H6> Cabeceras de ttulos
En un documento HTML es posible definir seis tipos distintos de cabeceras que sern normalmente el ttulo del documento y los distintos subapartados que lo forman. La etiquetas que definen las cabeceras sern <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. El texto indicado entre las etiquetas de inicio y de fin ser el afectado por las cabeceras: Para la instruccin: <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 el documento con la cabecera <H1> que definir el titulo, luego para los apartados principales utilizaremos la cabecera <H2>, para subapartados <H3>, etc ... Utilizndolas as de forma consecutiva. Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto. El modo en que se presentan las cabeceras pueden variar de un navegador a otro, 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> itlica y grande.

<Hn ALIGN=CENTER>: Alineacin 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

Ejemplos de cabeceras

Cabecera de tamao H1
<H1>Cabecera de tamao H1 </H1>

Cabecera de tamao H2
<H2>Cabecera de tamao H2 </H2>

Cabecera de tamao H3
<H3>Cabecera de tamao H3 </H3>

Cabecera de tamao H4 <H4>Cabecera de tamao H4 </H4>

Cabecera de tamao H5

<H5>Cabecera de tamao H5 </H5>

Cabecera de tamao H6

<H6>Cabecera de tamao H6 </H6>

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

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

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

Ejemplos de Cabeceras

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

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

Cabecera H5 centrada

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

Cabecera H6 centrada

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

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

Tamao y Color de la Fuentes de Caracteres

5.4 - Tamao y Color de las fuentes de caracteres

Utilidad
En el apartado anterior se vio el modo de definir los distintos ttulos de documento, mediante cabeceras. Estas son poco flexibles y predeterminadas. Existe otra etiqueta HTML que permite una ms sencilla adaptacin del tamao de las fuentes y permite adems modificar su color. Con esta podremos incluir texto resaltado en medio de una frase, con las cabeceras no es posible ya que estas introducen automticamente un salto de lnea detrs, y permitir incluir prrafos de distintos tamaos o colores, proporcionando una mayor versatilidad y pudiendo crear efectos ms espectaculares. La etiqueta que permite esto se llama FONT y presenta atributos que nos permiten modificar el tamao y color del texto incluido entre la etiqueta de inicio y fin.

<FONT SIZE=n> : Tamao de la fuente

El atributo SIZE permite indicar el tamao de la fuente, su valor puede estar entre 1 y 7. Incrementndose de tamao progresivamente desde 1, que es la fuente de menor tamao, hasta 7 que la fuente de mayor tamao. El texto normal equivale a la fuente de tamao 3, por tanto los valores menores que 3 sern fuentes ms pequeas que el texto normal y las mayores que 3 sern de mayor tamao. El tamao tambin 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 la fuente ser de tamao 4. Existe una etiqueta que redefine la fuente por defecto, esta etiqueta es: <BASEFONT SIZE ...> Los elementos de tamao de fuentes pueden ser definidos para todo un documento, teniendo validez dentro de elementos tales como listas y formularios, pero no tendrn validez global en las tablas, debiendo definir cada una de las celdas al tamao de fuente deseado.

Ejemplos de tamaos de fuentes

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

Tamao y Color de la Fuentes de Caracteres

Inst. HTML
<FONT SIZE=2>Muestra</FONT>

Muestra
Muestra

Explicacin
Obtendriamos en este caso texto de tamao de fuente 2 Este texto es de tamao de fuente 6 Obtendriamos tambin en este caso texto de tamao de fuente 2, pero lo definiramos de forma relativa: 3-1=2 As definiramos fuente de tamao 6 de forma relativa: 3 +2=5 Se pueden combinar en una misma frase varios tamaos de fuentes Se pueden combinar con elementos de resalte e hiperenlaces

<FONT SIZE=6>Muestra</FONT>

Muestra
Muestra

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

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

Muestra

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

Muestra Muestra Muestra

<BASEFONT SIZE=n> : Fuente por defecto

Definir el tamao de la fuente que se considerar como base para definir los tamaos de fuente relativos. Esta etiqueta no define el tamao de la fuente por defecto, para el texto normal, y solo se usa para clculos de tamao de fuente relativos. La utilidad no es muy amplia, y se podra utilizar cuando en un documento en el que todos los tamaos estn definidos de forma relativa y se desee cambiar de forma global el tamao de las fuentes. Si no incluye esta etiqueta el valor base para estos clculos es 3, con esta se puede variar, como se ve en el ejemplo.

Inst. HTML

Muestra

Explicacin

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

Tamao y Color de la Fuentes de Caracteres

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

Muestra Muestra

El nuevo valor para el calculo del tamao relativo ser 6, notndose el efecto en el tamao 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 de inicio y fin. Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versin 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 define ser el por defecto, si se define con la etiqueta COLOR solo, el tamao ser el de la fuente base. Al igual que en el caso del tamao de la fuente pueden ser utilizados junto con otros elementos del lenguaje HTML como listas y formularios y pueden ser utilizados conjuntamente con los elementos de resalte El cambio de color no afectar al texto o elementos incluidos en un hiperenlace, utilizndose para estos el color por defecto definido en la etiqueta BODY.

Ejemplos de definicin de colores de fuentes

Algunos ejemplos de la definicin de colores de fuente podran ser:

Inst. HTML

Muestra

Explicacin
El texto se mostrar de un color lila, al mezclar los colores rojo y azul. Tambin se puede utilizar uno de los colores predefinidos.

<FONT COLOR=FF00FF>Muestra</FONT>

Muestra

<FONT COLOR=AQUA>Muestra</FONT>

Muestra

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

Tamao y Color de la Fuentes de Caracteres

<FONT SIZE=5 COLOR=red> Muestra </FONT>

Muestra
Muestra

Se puede combinar con el tamao de fuente Se pueden combinar varios colores en una misma frase o palabra. Pueden ser utilizados junto con otros elementos de resalte como cabeceras, estilos fsicos y lgicos, etc ...

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

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

Muestra

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

Estilos Fsicos y Lgicos

5.5 - Estilos fsicos y lgicos

Estilos fsicos y Estilos lgicos
Como estilos definiremos los distintos efectos que se pueden aplicar al texto normal. Estos efectos son los resaltes (negrita, cursiva, subrayado, etc ...) que se pueden usar. En HTML existen dos grupos principales de estilos los lgicos y los fsicos. Los fsicos son aquellos que siempre causan un mismo efecto (negrita, cursiva, ...) y los lgicos indicarn un tipo de texto (cita, nombre de persona) que por sus caractersticas tiene un modo de mostrarse propio. Se pueden utilizar ambos estilos para especificar un mismo efecto, por ejemplo para obtener una frase resaltada podemos usar el estilo fsico (negrita) o el estilo lgico (STRONG) y en ambos casos el resultado puede ser el mismo. Es ms recomendado, sin embargo, utilizar el estilo lgico, ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario, de forma que se pueda obtener una presentacin personalizada. Adems en un futuro los navegadores podran aadir modos ms sofisticados de presentar los distintos estilos y si estn definidos de forma lgica la adaptacin es ms sencilla. Y por ltimo y ms importante, al utilizar estilos lgicos el modo de escribir HTML se hace independiente de como se presentar finalmente el texto, se utilizar el estilo segn el tipo de texto que sea y no segn como se debe presentar. La tendencia actual de los navegadores es el uso de los estilos fsicos olvidando un poco la versatilidad de los estilos lgicos, pero sin embargo ambos estilos pueden ser usados indistintamente, sin ningn problema.

Estilos Fsicos.
El efecto se aplicar al texto expresado entre la etiquetas de inicio y fin. Los estilos fsicos son los siguientes:

Etiqueta HTML <B> <I>

Ejemplo Ejemplo Ejemplo Negrita. Cursiva.

Descripcin

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

Estilos Fsicos y Lgicos

<TT> <BLINK> <SUB> <SUP> <BIG> <SMALL>

Ejemplo Ejemplo
Ejemplo Ejemplo

Maquina de escribir, muestra una fuente de caracteres de espaciado fijo. Parpadeo. Subndice. Para Netscape 2.0+ Superndice. Para Netscape 2.0+ Texto grande, se utilizar el mayor tamao de fuente. Para Netscape 2.0+ Texto pequeo, se utilizar la fuente de menor tamao. Para Netscape 2.0+

Ejemplo
Ejemplo

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

Ejemplo
Inst. HTML Resul tado Explica cin Este texto es <B>negrita, <I>cursiva y <BLINK>parpadeante </BLINK></I></B>

Este texto es negrita, cursiva y parpadeante

El texto es por tramos negrita, cursiva y parpadeante.

Estilos lgicos
En este caso se definen las situaciones o tipos de frases y estas tomarn la representacin ms adecuada a cada caso. Estos estilos son:

Etiqueta HTML <ADDRESS>

Ejemplo Ejemplo

Ejemplo

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

Estilos Fsicos y Lgicos

<CITE> <CODE> <DFN> <EM> <KBD> <SAMP> <STRIKE> <STRONG> <VAR>

Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo

Indica el titulo de una pelcula o un libro. Cdigo fuente de un lenguaje de programacin. Especifica una definicin. Indicar enfasis. Texto introducido desde el teclado. Mensajes de estado de la computadora. Texto desechado, tachado. Especificar texto resaltado. Indicar una variable.

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

Listas

5.6 - Definicin 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 puede incluirse dentro de formularios, tablas, etc. Existen principalmente tres tipos de listas: las listas no ordenadas, las listas ordenadas y las listas de definiciones.

<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. Con los elementos <LI> se indicarn 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 ... <LI> Elemento n </UL> Para marcar los distintos elementos de la lista se usarn unos smbolos, 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 parte superior 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 explicarn 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>

Resul tado

q q

Titulo Elemento 1 Elemento 2 Elemento 3

Explica cin

Este ser el caso bsico de lista no ordenada. Se podrn incluir tantos elementos como se deseen y estos podrn ser texto normal, texto resaltado con alguno de los estilos, imgenes, etc ... <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>

Inst. HTML

s s

Resul tado
s

Elemento 1 Elemento 2 r Elemento 3.1 r Elemento 3.2 Elemento 4

Explica cin

Ahora definimos una lista anidada, es decir una lista dentro de una lista, basta con incluir el nuevo elemento UL dentro del elemento UL de la lista original. En este ejemplo tambin usamos distintos elementos definibles con TYPE, para indicar los componentes de la lista.

<OL> Listas ordenadas

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

Listas

<OL START = n TYPE = A a I i 0 > <LH> Titulo de la lista </LH> <LI> Elemento 1 <LI> Elemento 2 ... <LI> Elemento n </OL> El punto de comienzo siempre ser el 1 si no se indica en START con otro valor de comienzo y el tipo de numeracin puede seleccionarse con el atributo TYPE. Sus posibles valores son:
q q q q q

A : Letras maysculas. a : Letras minsculas. I : Nmero romanos en maysculas. i : Nmero romanos en minsculas. 0 : Nmeros (es por defecto por tanto no hay que indicarlo).

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

Inst. HTML

Resul tado

1. Elemento 1 2. Elemento 2 3. Elemento 3

Explica cin

Este ser el caso bsico de lista ordenada.

Inst. HTML

<OL TYPE=I> <LI> Elemento 1 <LI> Elemento 2 <OL TYPE=a> <LI> Elemento 3.1 <LI> Elemento 3.2 </OL> <LI> Elemento 4 </OL>

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

Listas

Resul tado

I. Elemento 1 II. Elemento 2 a. Elemento 3.1 b. Elemento 3.2 III. Elemento 4

Explica cin

Ahora definimos una lista anidada y usamos distintos elementos para la numeracin de las opciones.

<DL> Listas de definiciones

En esta lista existirn dos elementos la definicin y el termino, se usar principalmente para listas en las que se incluirn una palabra o frase y su definicin (diccionario). El termino aparecer pegado en el borde izquierdo y la definicin aparecer ligeramente tabulada a partir del borde izquierdo. Se puede usar de forma separada la definicin y el termino, pudiendo por tanto incluir solo definiciones o solo trminos. El incluir solo trminos podra usarse para sangrar el comienzo de un prrafo. <DL> <LH>Titulo de la lista </LH> <DT>Termino 1 <DD>Definicin 1 <DT>Termino 2 <DD>Definicin 2 ... <DD>Termino N <DT>Definicin N </DL> El titulo de las lista <LH> como en los casos anteriores es opcional.

Ejemplos
<DL > <DT> Coche <DD> Vehiculo de cuatro ruedas <DT> Moto <DD> Vehiculo de dos ruedas </DL>

Inst. HTML

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

Listas

Coche
Resul tado

Vehiculo de cuatro ruedas Moto Vehiculo de dos ruedas

Explica cin

Como se ve se coloca en una posicin la definicin y en otra el termino.

Ejemplos
<dl> <dd><font SIZE=+1><img src="/servicios/iconos/confis.gif" align=middle border=0> Conexin 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 de conexin a Red.</A> <dd><A HREF="/servicios/conecfisica/software.htm"><img src="http:// www2.uca.es/iconos1/redstar.gif" align=middle border=0> Instalacin de Software 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 de Comunicaciones.</A> <dd><A HREF="/servicios/conecfisica/proxy.html"><img src="http://www2. uca.es/iconos1/redstar.gif" align=middle border=0> Servidores Proxy.</A> Inst. HTML </dl> <dd><a href="/servicios/actuali-soft/software.html"><dd><font SIZE=+1><img src="http://www2.uca.es/iconos/icono541.gif" align=middle border=0> Actualizacin 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=middle border=0> Mensajera Electrnica.</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 Prctico de Eudora.</A> <dd><A HREF="/servicios/correo/mensaje_institu.html"><img src="http:// www2.uca.es/iconos1/redstar.gif" align=middle border=0>Mensajera Institucional.</A> </dl> </dl>

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

Listas

Conexin a la Red.
Normativa de conexin a Red. Instalacin de Software de Comunicaciones. Solicitud de Servicios de Comunicaciones. Servidores Proxy.
Resul tado

Actualizacin del Software de Comunicaciones. Mensajera Electrnica.

Manual Prctico de Eudora. Mensajera Institucional.

Explica cin

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

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

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

Hiperenlaces

5.7 - Hiperenlaces
Hiperenlaces
Es la utilidad bsica del hipertexto, permite indicar zonas de texto o imgenes que si son seleccionados 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 texto necesariamente, podemos usar, cabeceras (<Hn>), cualquiera de los estilos, una imagen, etc .... Un hiperenlace igualmente podr definirse dentro de cualquier elemento HTML: listas, prrafos de texto, tablas, formularios. El texto del hiperenlace aparece normalmente resaltado sobre el texto normal, en azul y subrayado, en el caso de las imgenes, si tienen definido un borde este aparecer resaltado en color azul. La mayora de los navegadores cuando la zona por la que pasa el cursor es sensible, este cambia de aspecto indicndolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en 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 concordar con el texto del prrafo donde se englobe, se debe evitar el uso de pulse aqu. Por ejemplo: Puede encontrar mas informacin sobre vacas pulsando aqu se podra sustituir por: Disponible ms informacin 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.

Hiperenlaces

El texto indicado entre las etiquetas de comienzo y de fin se presentar de forma resaltada y en el caso 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 del hiperenlace indicamos la inclusin de la imagen, tambin dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace. Un ejemplo sera:

<A HREF="URL a la que se accede"><IMG SRC="Imagen"> y tambin 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 que se puede expresar en una URL. Es posible por tanto indicar enlaces a servidores FTP, servidores GOPHER 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 el dominio. Si se indica www, las maquinas de la red local si podrn localizarlo, pero para maquinas externas la referencia podra ser a otra maquina. Por tanto se debe indicar www2.uca.es para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente. Utilizaremos los hiperenlaces para dividir de forma conveniente la informacin. Hay que evitar los documentos excesivamente largos, estos se pueden dividir en distintos documentos a los que acceder por 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 caso de las relativas todo lo que no pongamos de la URL se tomar de la URL del documento que contiene el hiperenlace, por ejemplo si no indicamos el servidor, se considerar el actual y si solo indicamos un fichero html se considerar que se encuentra en el servidor y directorio del documento que lo referencia. Una URL relativa comenzar siempre por un nombre de directorio o por un fichero, ya que en este caso 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:

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

Hiperenlaces
q

Por una barra /, que indica que el camino del fichero se especifica desde el directorio raiz del servidor. Por dos puntos y una barra ../, significa subir en la estructura del directorio. Se considerar a partir del directorio anterior. Por un nombre de fichero o directorio, considerandose este a partir del directorio actual.

Algunos ejemplos seran:

Ejemplos
Nos encontramos en el documento http://www.uca.es/visita/cadiz.html y en este se encuentran los siguientes hiperenlaces. URL rela tiva URL que se activa Explica cin URL rela tiva URL que se activa Explica cin

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

http://www.uca.es/internet/internet.html
En este caso se indica la URL completa, por tanto no es relativa y no se podr utilizar ningn dato de la posicin actual.

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

http://www.uca.es/internet/internet.html
En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace: www.uca.es y al comenzar la directorio por / se indica que este se toma desde la raz del servidor, no siendo valido en este caso ningn dato del directorio actual.

URL rela tiva URL que se activa

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

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

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

Hiperenlaces

Explica cin

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 directorio donde est el documento actual

URL rela tiva URL que se activa Explica cin

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

http://www.uca.es/visita/bahia.html
En este caso solo se indica un fichero HTML, por tanto se considera que este fichero se encuentra en el mismo directorio del documento que los referencia. Considerando por tanto el mismo servidor y el mismo camino, pero distinto directorio.

Es una buena costumbre utilizar direcciones relativas, adems de ahorrar escritura, permite que la pgina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces, haciendo por tanto al documento ms portable. Como se vio en el capitulo dedicado a la cabecera de un documento HTML, la etiqueta BASE indica la direccin por defecto en los enlaces, esto tendr efecto en las URL relativas, caso de indicarse se considerar esta como direccin base y no la actual del documento.

<A NAME=...> Elemento Ancla

Sirve para indicar puntos de un documento que son accesibles directamente. Marcar las distintas zonas 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. El texto que define a la etiqueta no tendr ningn tipo de resalte, y solo se utiliza como punto de destino del 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 haba marcado con la etiqueta indicada. Tambin es posible acceder a un ancla de un documento externo de la forma:

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

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

Hiperenlaces

De esta forma se podr acceder a puntos determinados o secciones de un documento de forma directa. La utilidad principal es la creacin de ndices en documentos largos, al comienzo del documento se especifica el ndice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define.

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

Imgenes

5.8 - Imgenes
Imgenes en los documentos HTML
Una de las caractersticas principales del lenguaje HTML y de la WWW es la introduccin de elementos multimedia, en este apartado veremos como introducir grficos y ficheros de imgenes en un documento HTML. En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatos grficos: GIF, JPEG XBM. El formato ms extendido y practico es el GIF, todos los navegadores grficos de la Web soportan este formato, adems existen gran cantidad de programas de tratamiento de grficos que permiten grabar los grficos o convertir grficos a GIF. Este formato, as mismo, utiliza algoritmos de compresin que hacen que sus ficheros sean de corto tamao y apropiados para su transmisin por la red. El formato GIF es ms recomendado para iconos, grficas, ... y el formato JPEG es ms til para imgenes reales como paisajes, personas, ... Para poder utilizar otro formato grfico, necesitar usar un enlace cuyo destino sea el fichero del grfico. Al seguir el enlace se le pedir que indique un programa externo que se encargue de mostrar los ficheros de ese formato grfico, por lo tanto no pueden insertarse dentro de documentos HTML.. Existe unos casos especiales en las imagenes GIF, que son las imgenes transparentes y las imgenes animadas.

<IMG SRC=...> Inclusin de Imgenes

La etiqueta encargada de mostrar imgenes 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. Igualmente se 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 su produce sobre un texto o algn elemento HTML. El atributo SRC indica el fichero de imagen que se incluir en el documento. Se indicar el camino hasta la imagen en formato URL, el fichero de la imagen deber tener una extensin
http://www2.uca.es/manual-html/imagenes.htm (1 de 7)30/08/2008 11:59:41 a.m.

Imgenes

apropiada a su formato, por ejemplo si es GIF la extensin ser .gif, si es JPEG la extensin 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 servidor local, pudiendo especificar el camino completo y el servidor donde se encuentra la imagen. En este caso al igual que en los hiperenlaces es posible indicar direcciones de URL relativas al documentos actual, como se vio en el apartado anterior. Lo normal es referenciar una imagen que se encuentre en el servidor local, ya que el acceso a imgenes en servidores externos puede ser ms lento. Por tanto conviene copiar las imgenes e iconos que se usen al servidor local. A continuacin 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 usa para navegadores que no permitan mostrar imgenes, sean solo texto o tenga inhabilitado el mostrar imgenes. Se recomienda cuando existan en el documento imgenes usadas como botones, para mostrar un texto en vez del botn en navegadores que no puedan mostrar grficos, de esta forma se consigue que todos los usuarios puedan consultar sus pginas.

<IMG .. ALIGN=...> Alineacin de la imgen

Indica como se alinea el texto que sigue a la imgen con respecto a esta. Indicar si la primera frase del texto se colocar en la parte alta de la imgen, TOP, en el punto medio de la imagen, MIDDLE, o en la parte de abajo de la imgen, BOTTOM. Tambien se pueden utilizar alineaciones un poco ms avanzada, TEXTTOP se alinea justo al comienzo del texto ms alto de la lnea (TOP se alinea al tamao del primer carcter de la lnea). ABSMIDDLE, es el centro real de la imagen, con MIDDLE se coloca el texto a partir del punto medio, 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 ms precisa la alineacin, aunque solo son validos para los navegadores ms avanzados.

Ejemplos
Inst. HTML <IMG SRC="/iconos1/phone5.gif" ALIGN=TOP><B>Numero de Telefono<B>. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

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

Imgenes

Numero de Telfono. En este apartado se indica el nmero de telfono

Resul tado

que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica cin Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imgen.

Inst. HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=MIDDLE><B>Numero de Telefono<B>. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Resul tado

Numero de Telfono. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Explica cin

En este caso el texto est alineado en la parte central de la imgen.

Inst. HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=BOTTOM><B>Numero de Telefono<B>. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Resul tado

Numero de Telfono. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica cin Inst. HTML El texto est alineado en la parte baja de la imgen.

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

Resul tado

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

Imgenes

Explica cin

Tambin es posible alinear imgenes entre s y imgenes respecto a otros elementos HTML

En los casos anteriores solo se especifica donde se coloca la primera lnea del texto y el resto se incluyen debajo de la imgen quedando un efecto muy feo cuando el texto tiene ms de una lnea. Existen otras alineaciones que incluirn a la imgen insertada dentro del texto. La imgen puede quedar a la izquierda, LEFT o a la derecha, RIGHT. No se podr utilizar en combinacin con las anteriores alineaciones.

Ejemplos
Inst. HTML <IMG SRC="/iconos1/phone5.gif" ALIGN=LEFT><B>Numero de Telefono<B>. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Resul tado

Numero de Telefono. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Explica cin

En este caso aparece la imgen insertada en el texto, de forma que esta se integra en prrafo que la rodea, al contrario que en los casos anteriores <IMG SRC="/iconos1/phone5.gif" ALIGN=RIGHT><B>Numero de Telefono<B>. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Inst. HTML

Resul tado

Numero de Telefono. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Explica cin

En este ejemplo aparece la imgen alineada a la derecha.

<IMG .. BODER=...> Borde de la imgen

Indicar el tamao 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 se desea que no se muestre el borde cuando la imagen sea un enlace se usar BORDER=0.

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

Imgenes

Ejemplos
Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imgen, que sirve de hiperenlace. Como se ve si no se indica nada se muestra un borde entorno a la imgen que activa el hiperenlace. <A HREF="imagenes.htm"><IMG SRC="/iconos1/q_mark3.gif"></A>

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

<IMG .. HEIGHT=... WIDTH=...> Tamao de la imgen

Es posible cambiar el tamao de la imgen de forma que pueda ajustarse como se desee, pudiendo ampliar o disminuir este. El atributo HEIGHT Determina el alto de la imagen a mostrar, se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamao del documento. En caso de que la imagen sea mayor o menor se escalar a este tamao. El atributo WIDTH indica el ancho al que se mostrar la imagen, escalndola a este tamao. Tambin 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, ajustndose la otra a la proporcin de la imagen. Es recomendable indicar solo uno de estos parmetros para que la imgen no se muestre deformada. Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imgen guarde siempre una misma proporcin con respecto al texto. Si se desea mostrar dos imgenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante, se indica en una el ancho (WIDTH) del 25% y en la otra del 74%, no indicando en ningn caso el alto (HEIGHT), de esta forma independientemente como sea el tamao de la ventana del navegador e independientemente del monitor del cliente, siempre se podrn mostrar ambas imgenes en la misma lnea.

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

Imgenes

Ejemplos
Inst. HTML Resul tado Explica cin Inst. HTML Si no se indican bien ambos valores, teniendo en cuenta la proporcin de la imgen esta puede aparecer deformada. <IMG SRC="/iconos1/world.gif" WIDTH=100 HEIGHT=25>

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

Resul tado

Explica cin Inst. HTML

En este se ve como al indicar uno solo de los parmetros, el otro se ajusta apropiadamente a la proporcin de la imgen. <IMG SRC="imagenes/obra_ani.gif" ALIGN=MIDDLE WIDTH=9%> <IMG SRC="/ barras1/constr.gif" WIDTH=89%> Resultado

Explica cin

Si varia el tamao de la ventana de su navegador, comprobar que el tamao de las imgenes cambia, pero guardan la misma proporcin, el obrero ocupa un 9% de la ventana y la barra el 86% restante. Y siempre se mostrarn ambas imgenes en la misma lnea.

<IMG .. HSPACE=... VSPACE=...> Espaciado de separacin de la imgen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier 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 adems es posible indicar separadamente el margen horizontal y el vertical. Con el atributo VSPACE se indica el margen vertical.

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

Imgenes

Ejemplos
Inst. HTML Resul tado Explica cin Como se ve en el segundo caso las imgenes aparecen separadas 100 puntos. El espaciado es igual a la derecha que a la izquierda, por tanto tambin aparece la imagen separada del borde. <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">

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

Creacin de una imagen GIF transparente

En una imagen GIF se puede definir un nico color transparente, de forma que en la parte de la imgen que contena ese color se ver el fondo definido para la pgina 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 se puede definir en este tipo de imagenes GIF. Luego seleccionamos Options -> Background Color, si esta opcin no es accesible, entonces es que la imagen no se encuentra en un formato valido, una vez hecho esto nos aparecer la siguiente pantalla:

Donde podremos elegir el color que deseamos hacer transparente. Una vez seleccionado el color pulsaremos OK y grabaremos la imgen. La forma ms comoda de seleccionar el color transparente es la opcin 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.

Creacin de una imagen GIF transparente

imgen. S no aparece esta ventana entonces tendr que guardar la imgen como GIF89, y volver a cargar la imgen 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.

Imgenes Sensibles

5.9 - Imgenes Sensibles

Imgenes Sensibles
Una de las caractersticas principales del lenguaje HTML es la posibilidad de crear imgenes sensibles o mapeadas, que son imgenes en las que se definen diversas zonas que activan distintos hiperenlaces, al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define. La imgen se dividir en distintas reas que definirn documentos a los que es posible acceder. Para crear una imagen sensible ser necesaria la especificacin de las distintas reas de la imagen y los enlaces que activaran cada una de ellas. Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar algn programa. Existen programas que permiten la definicin de las imgenes sensibles, en estos se presentar la imagen en pantalla y mediante un puntero se podrn ir indicando las distintas zonas. Estas zonas podrn ser: rectngulo, circulo, lnea poligonal o un punto. A cada una de estas zonas le asignamos una URL que ser la que se active cuando se pulse en esa zona determinada. Con este programa crearemos un fichero con la extensin .map que ser el que defina el mapa de la imagen. El contenido normal de este tipo de ficheros sern lneas del estilo: figura_geomtrica URL coord1 coord2 ... coordn Donde figura_geomtrica podr ser una de:
q

default: Indicar la accin a realizar si se pulsa en un lugar no definido en el mapeado. 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 el centro del circulo y el radio. poly: Una lnea poligonal de a lo sumo 100 vrtices. Se definir tantas coordenadas como vrtices formen la lnea poligonal y no ser necesario cerrar la figura. rect: Definir un rectngulo. Las coordenadas indicaremos el vrtice de la esquina superior izquierda y la esquina inferior derecha. point: Indicar un punto. Si en la figura se definen diversos puntos se activar el enlace del punto ms 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.

Imgenes Sensibles

La URL del enlace podr ser una local, que debe empezar desde el directorio raz, no vale relativa, o bien indicar la URL completa. Las coordenadas sern 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 imgenes no puede activar dos enlaces. En caso que se solapen se utilizar la que estuviera definida 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 siempre el lugar donde se pulse estar ms prximo a un punto. En otro caso siempre ser necesario indicar la direccin por defecto, salvo que el mapeado cubra toda la imagen, ya que si no se define en caso de pulsar en un lugar sin mapear producir un error. Existen navegadores, los ms antiguos, y programas de indexacin, los robots de busqueda ms extendidos (lycos, excite, etc ...) que no pueden seguir los enlaces que se encuentran en una imagen sensible. Por tanto se recomienda incluir en formato texto en la parte baja de la imgen los enlaces que se activan con la imagen sensible. De esta forma los documentos enlazados se pueden activar de las dos maneras.

Ejemplo ISMAP como referenciar la imgen 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 imgenes 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 imgenes sensibles:

Imgenes Sensibles

SRC="camino_imagen_sensible.gif" ISMAP></A> El atributo ISMAP en la imagen es importante al igual que la extensin .map del fichero que mapea la imagen. El segundo caso es ms rpido ya que es el servidor el que se encarga de determinar las distintas zonas 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 mtodo, en nuestro caso usaremos el segundo.

Ejemplo Imgenes sensibles definidas desde el cliente

En el caso anterior la interpretacin del mapa de la imagen sensible corresponda al servidor, por tanto cuando el usuario pulsa sobre una imgen sensible, las coordenadas se pasan al servidor y este se encarga de comprobar usando el fichero que mapeaba la imgen. Por tanto para activar un enlace hara falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa, lo cual hace la consulta un poco ms lenta. Y adems a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona. Para solucionar esto se introdujo la posibilidad de crear imgenes sensibles definidas desde el cliente, de esta forma es el cliente (su navegador de la WWW) el que interpreta la imgen sensible y puede mostrar los enlaces que se activan en cada zona y que zonas son sensibles y cuales no. En este caso no es necesario indicar el documento por defecto ya que solo se podrn activar las zonas tiles de la imgen. Existe una nueva etiqueta HTML que permite definir estas imgenes sensibles interpretadas desde el 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 lneas con la etiqueta AREA, definen una zona sensible. Actualmente solo es posible definir zonas sensibles delimitadas por rectngulos, no pudiendo definir otras. Con el atributo COORDS se definen las coordenadas de la zona sensible, estas sern la coordenada del primer vrtice xi1, yi1 y la coordenada del vrtice opuesto xi2, yi2. La etiqueta HREF indica la URL que se activa con esta zona sensible.
http://www2.uca.es/manual-html/imgsensi.htm (3 de 4)30/08/2008 11:59:45 a.m.

Imgenes Sensibles

La forma de referenciarlo es utilizando el atributo USEMAP, indicando el mapa a usar, cuando se defina la imgen la forma ser: <IMG SRC="..." USEMAP="#nombre" > Como nombre utilizaremos el nombre que se le dio al mapa su definicin. Esta etiqueta solo es soportada por los navegadores ms modernos, Internet Explorer de Microsoft y el Netscape 2.0, por tanto los navegadores antiguos no podran interpretar este tipo de mapas, sin embargo es posible utilizar ambas formas de definicin a la vez, permitiendo que el mapa sea interpretado 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 ser interpretado por el servidor.

Ejemplo

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

Imagenes

Ejemplo de Imgen Sensible

Creacin de una Imgen sensible
En este apartado se explicar paso a paso, la creacin de una imgen sensible. Para ello se utilizar el programa ms bsico para ello, mapedit, que se incluye en el Paquete Bsico para la Creacin de documentos HTML Al iniciar el programa seleccionaremos File -> Open/Create, y aparecer la ventana que se muestra en el grafico adjunto,. En esta indicaremos el nombre del fichero que definir el mapa de la imgen (Map File), que deber tener la extensin .map, este ser el fichero que habr que transferir al servidor para referenciar la imgen sensible, lo llameremos ejemplo.map, en el apartado siguiente indicaremos el fichero GIF sobre el que se aplicar la imgen sensible (GIF Filename).

Una vez cargada la imgen obtenemos la siguiente pantalla:

En la que se muestra la imgen y sobre la que ser posible ya definir las zonas sensibles de la imgen. en el men Tools, estan expresadas todas las figuras que se pueden utilizar en la imgen, estas son: Polygon, para una lnea poligonal, Circle, para definir un circulo y Rectangle, define un rectngulo.

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, en nuestro caso ser Rectangle, una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botn izquierdo del ratn, fijando el primer vertice, luego arrastraremos hasta situarnos en el vertice opuesto, y ah pulsaremos el botn derecho del ratn y obtendremos la siguiente ventana en la que nos ser posible introducir al URL que activar esta zona.

Definir una linea poligonal ser similar, pero en este caso marcaremos con el botn izquierdo del ratn todos los puntos que forman el polgono y cuando lleguemos a su fin pulsaremos el botn derecho del ratn y podremos introducir la URL, la lnea poligonal no ser necesario terminarla, uniendose automticamente el primer y ltimo vertice. Una vez que definamos todas las zonas sensibles de la imgen, podemos utilizar la opcin Test +Edit, que nos permir probar y en su caso editar las distintas zonas de la imgen, obteniendo un muestra de la zona activa como se ve en la imgen:

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

Imagenes

La opcin para definir la URL por defecto, es decir, la que se activar cuando no se pulse sobre ninguna de las zonas definidas ser File -> Edit Default URL. Una vez definidas todas las zonas de la imgen y la URL por defecto, podremos grabar el mapa de la imgen 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 rect http://www2.uca.es/manual-html/prueba/boton2.htm 62,10 134,36 rect http://www2.uca.es/manual-html/prueba/boton3.htm 62,36 134,64 Este fichero se transferir al servidor y como se vi en con anterioridad existirn dos formas de referenciarlo:

Imgen sensible interpretada por el servidor

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

Resul tado

Explica cin

Como se ve pulsando en las distintas zonas de la imgen se activan los enlaces correspondientes, pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona.

Imgen sensible interpretada por el cliente

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

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/manualhtml/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]

Explica cin

En este caso la definicin es ms larga, pero si su navegador es el Internet Explorer o el Netscape 2.0, notar que este es capaz de identificar las zonas sensibles de la imgen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona. Ademas es ms rpida la identificacin 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 las zonas definidas. En la parte de abajo de la imgen se han incluido los enlaces que activa en formato texto para el caso de que el navegador no soporte imgenes sensibles (o sea un robot de busqueda).

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

Inserccin de elementos multimedia

5.10 - Insercin de elementos multimedia

Multimedia ?
Como se ha explicado hasta ahora las posibilidades multimedia del lenguaje HTML se limita a insertar imgenes dentro de un texto, mostrar un fondo en el documentos y modificar los colores que presentarn los distintos textos. Con las instrucciones bsicas de HTML que hemos visto hasta ahora esto es lo mximo que se puede conseguir, la posibilidad de mostrar vdeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracin del navegador. La forma bsica 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 una aplicacin externa que trate este tipo de ficheros. El navegador tendr definida una lista aplicaciones que trabajarn con los formatos ms comunes de fichero de vdeo, audio o imgenes. Esta opcin es poco operativa ya que no podran incluirse en el documento actual. El Internet Explorer de Microsoft incluye una serie de etiquetas y atributos que permiten el uso de elementos multimedia, pero no es estndar y se puede asegurar que no ser posible verlos en maquinas distintas a los PC con windows, ni en navegadores distintos a este. Otra aproximacin la ha realizado Netscape con la inclusin de los Plug-ins, estos son programas que se aaden al navegador de Netscape versin 2.0 y permiten tratar diversos tipos de ficheros, de esta forma podr insertarse estos tipos de ficheros dentro de una pgina HTML, permitiendo mostrar vdeo 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 que estos plug-in no son estndar ni estn realizados por el mismo fabricante, ni son todos de libre distribucin, y adems solo son validos hasta ahora en PCs con windows. Adems la correcta visin del documento depender de que el usuario disponga del plug-in correspondiente instalado. En la ltima versin de Netscape (3.0 aunque todava es beta), se incluyen por defecto plug-ins para audio, vdeo y VRML, por lo tanto cuando se extienda el uso de este navegador se podra asegurar la reproduccin de este tipo de ficheros.

Extensiones Multimedia de Internet Explorer

El Internet Explorer de Microsoft permite mostrar vdeo en formato AVI y reproducir sonido, de una forma sencilla, para eso aade una nueva etiqueta y un atributo a la etiqueta de mostrar imgenes.

<BGSOUND ...> Reproduccin 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.

Inserccin de elementos multimedia

Incluiremos una nica vez esta etiqueta en el fichero que deseemos tenga msica de fondo, en el atributo 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 se ejecutar la pieza musical, podr indicarse un nmero o INFINITE que indicar de forma indefinida.

<IMG DYNSRC ...> Reproduccin de vdeo

<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 una imgen mostrar un vdeo en formato AVI (Vdeo for Windows), se puede utilizar todas los atributos normales de IMG, pudiendo usar las distintas alineaciones y colocaciones respecto al texto, adems se podr variar el tamao del vdeo con los atributos HEIGHT y WIDTH. Se aaden otros atributos que solo se pueden aplicar al vdeo, el atributo IMGSRC indica la URL del fichero que se mostrar, el atributo LOOP indica el nmero de veces que se mostrar el vdeo, el atributo CONTROLS indicar si se mostrarn los botones de control, que permitirn para, volver a reproducir, rebobinar, .... El atributo START indica si la secuencia de vdeo empezar al abrir el fichero (FILEOPEN) o cuando pase el cursor del ratn encima (MOUSEOVER). De no poder mostrar el vdeo por tratarse de otro navegador (por ejemplo Netscape), se podr indicar una imgen 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 modo especifico, dado por ejemplo la capacidad de mostrar vdeo, audio, ficheros de un determinado formato (ficheros PDF, presentaciones de ASAP, fichero VRML, etc ...). No existe actualmente un conjunto estndar de plug-ins para cada tipo de ficheros, sino que existen diversas aplicaciones, realizadas por diversos fabricantes, y no todas de libre distribucin. Se puede asegurar que todas las aplicaciones sern compatibles y si por ejemplo se referencia un fichero de sonido en formato .wav en su pgina, este podr ser odo por todos aquellos que tengan un plug-in para este tipo de ficheros. Para que un fichero multimedia que es incluido en una pgina sea visible por el usuario debe cumplir dos condiciones: la primera es que posea el navegador de Netscape en su versin 2.0 y la segunda es que tenga el plug-in correspondiente que trata el fichero deseado. Por tanto se recomienda un uso moderado de los plug-ins utilizando ficheros que sean de formatos comunes y un uso complementario en una pgina, ya que muchos usuarios no podrn verlo. Es aconsejable incluir un enlace en el que se referencie el fichero, de esta forma un usuario podr seguir el enlace y ver el
http://www2.uca.es/manual-html/multimed.htm (2 de 3)30/08/2008 11:59:49 a.m.

Inserccin de elementos multimedia

fichero en un visualizador externo si lo posee. Existe una instruccin que permite incluir cualquier tipo de archivo dentro de un documentos HTML, pero se ver en el prximo apartado.

<EMBED> Insertar Ficheros

Esta instruccin permite la inclusin de cualquier tipo de fichero en la posicin del documento HTML donde se especifique. Su funcionalidad es similar a la IMG para incluir imgenes. En este caso para que pueda mostrase el fichero deber tener el plug-in adecuado que lo trata. El formato es el siguiente: <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 tamao que tendr en objeto insertado, siendo estos opcionales. El fichero que podr ser un fichero de vdeo, audio, imgen de algn tipo distinto a las por defecto, fichero de presentaciones, etc... solo podr ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de ficheros, en caso contrario mostrar un mensaje de error indicando 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 pelculas de vdeo o incluir sonido de fondo. Se recomienda un uso limitado de esta posibilidad, ya que existirn muchas personas que no posean el Netscape 2.0, y no posean el plug-in correspondiente, y por lo tanto no podrn ver todo el esplendor de su pgina.

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

Tablas

5.11 - TABLAS
Introduccin
Permite la representacin de datos por filas y columnas, en forma tabular. La definicin es muy flexible indicando solo los elementos que forman cada fila y columna, calculndose de forma automtica el tamao que deben tener las celdas. En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes, enlaces, texto, listas, cabeceras, formularios, etc. No es necesario definir inicialmente el nmero de filas o columnas ya que estas se calculan segn se va definiendo la tabla. En el caso que una fila tenga ms columnas que otra, en las otras filas las columnas se representarn vacias, no siendo necesario que todas las filas sean iguales.

<TABLE> Definicin de la Tabla

Para definir una tabla usaremos la etiqueta <TABLE>, que tiene el siguiente formato: <TABLE BORDER="tamao del borde" > ... Definicin de la tabla ... </TABLE> En la etiqueta inicial TABLE definiremos los atributos que afectarn a toda la tabla, todos los atributos son opcionales. Todo lo que se incluya dentro de la instruccin de tabla se considerar como tal, 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 que presenta. Indicaremos un nmero que especificar el tamao del borde, por defecto ser 0, es decir, no se dibujar ningn borde. Aunque no se dibuje el borde s se mantendr el espaciado los elementos de 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 se indica 0 no habr ningn 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 se indica 0 las celdas aparecern sin separacin.

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 del documento. En el primer caso se definir en puntos y en el segundo en funcin del tamao del documento (tamao de la ventana del visualizador). Se recomienda utilizar tamaos de tabla en porcentaje del documento, ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamao 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 ms recomendado en valor absoluto ya que el alto es ms dificil que pueda coincir con el tamao de la ventana. Dentro de la instruccin de la tabla se incluirn los diversas etiquetas que defininen el contenido de la tabla.

<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.
http://www2.uca.es/manual-html/tablas.htm (2 de 5)30/08/2008 11:59:51 a.m.

Tablas

<TR> Fila de la tabla

Definir cada una de las filas de la tabla y especificar los parmetros que afectarn a todas las celdas de la fila. Por cada elemento TR que se incluya se crear una fila de la tabla. No es necesario indicar la etiqueta de cierre </TR>. En caso de tablas anidadas ser necesario incluir la etiqueta de cierre. <TR ALIGN= LEFT CENTER RIGHT VALIGN= TOP MIDDLE BOTTOM > Se podr especificar por defecto la alineacin que tendrn los elementos dentro de las celdas.
q

ALIGN = LEFT CENTER RIGHT

Indica la alineacin del elemento dentro de la celda, en este caso afectar a todos los valores situados en la fila actual, tambien se podr indicar individualmente en los elementos TD. Puede tomar uno de los siguientes valores:
s

s s

LEFT: Alineacin a la izquierda de la celda. Este el valor que se toma por defecto RIGHT: Alineacin a la derecha. CENTER: Indicar centrado.

VALIGN = TOP MIDDLE BOTTOM:

Indicar la alineacin vertical del dato dentro de la celda. Se podr especificar donde se colocarn los datos dentro de la celda. Afectarn a toda la fila. Los valores que puede tomar son:
s s s

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

BGCOLOR:

Indicar el color de fondo que tendrn 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://www2.uca.es/manual-html/tablas.htm (3 de 5)30/08/2008 11:59:51 a.m.

Tablas

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 mostrarn destacados en negrita y TD para definir una celda de datos. Estos elementos 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 de cierre, no es necesario al tomarse implicitamente. Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos. <TH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamao 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=Tamao 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 alineacin horizontal del dato dentro de la celda, se especificar individualmente para cada una de las celdas. Su significado es igual que el expresado para la etiqueta TR.

Ejemplo de tabla 7
q

VALIGN:

Indicar la alineacin vertical del dato dentro de la celda. Se especifica individualmente para cada celda, 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 tamao de la tabla.
q

BGCOLOR:

Indicar el color de fondo que tendr la celda de la tabla. El color hay que indicarlo independientemente para cada una de las celdas de la columna. El formato para definir los colores es
http://www2.uca.es/manual-html/tablas.htm (4 de 5)30/08/2008 11:59:51 a.m.

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 nmero de filas que ocupar est celda en la misma fila. En este caso la celda se expandir ocupando tantas celdas de la tabla inicial como se especifique. Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla, bien, crear una fila que ocupen toda la tabla.

Ejemplo de tabla 2
q

COLSPAN:

Indicar el nmero de columnas que ocupar la celda actual, obtendremos una celda que ocupa varias 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 lnea por defecto. Si la usamos las lneas de texto no se dividirn dentro de la celda en varias lneas. Por tanto si la linea es muy larga la columna de la tabla ser tan ancha como la lnea, solo se dividir si se usa el elemento .

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

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>

Demostracin de TH, COLSPAN y ROWSPAN:

Numeros Num 1 4 2 5 3 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>

Demostracin de Multiples Cabeceras:

Datos1 1 5 2 6 3 7 Datos2 4 8

Datos1.1 Datos1.2 Datos2.1 Datos2.2

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:

123 456 <TABLE> <TR> <TD>1 <TD> 2 <TD> 3 <TR> <TD>4 <TD> 5 <TD> 6 </TABLE>

Tabla con Borde=15:

1 2 3 4 5 6

<TABLE BORDER=15> <TR> <TD>1 <TD> 2 <TD> 3 <TR> <TD>4 <TD> 5 <TD> 6 </TABLE>
http://www2.uca.es/manual-html/ejemptab.htm (2 de 7)30/08/2008 11:59:53 a.m.

Ejemplos de Tablas

Ejemplos con CELLPADDING y CELLSPACING:

1 4 2 5 3 6

1 4

2 5

3 6

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

Ejemplos de Tablas

Ejemplos de alineaciones ALIGN:

Cabecera de Titulo 1 Celda 1 Celda 4 Cabecera de Titulo 2 Celda 2 Celda 5 Celda 6 Cabecera de Titulo 3 Celda 3

<TABLE BORDER> <TR> <TH ALIGN=CENTER>Cabecera de Titulo 1 <TH ALIGN=CENTER> Cabecera de 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 Celda 1 Celda 5 Celda 8 Celda 7 Celda 12 Celda 10 Celda 9 <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
http://www2.uca.es/manual-html/ejemptab.htm (4 de 7)30/08/2008 11:59:53 a.m.

Cabecera de Titulo 2 Celda 2

Cabecera de Titulo 3 Celda 3

Cabecera de Titulo 4 Celda 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 Titulo 1 Celda 1 Celda 4 Cabecera de Titulo 2 Celda 2 Celda 5 Cabecera de Titulo 3 Celda 3 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 <TD BGCOLOR=GREEN> Celda 6 </TABLE>

Distintos tamaos de tablas:

WIDHT=10%

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

Ejemplos de Tablas

y por ltimo Esta es esta es la celda La la nmero dos celda 1 nmero 3 y por ltimo esta es Celda 1 dos la segunda 2 celda fila fila nmero 3 de la ltima fila

WIDHT=50%
y por ltimo esta es la celda nmero 3 y por ltimo esta es la celda nmero 3 de la ltima fila

Esta es la celda nmero 1

La dos

Celda 1 segunda fila

dos 2 fila

WIDHT=75%
La dos dos 2 fila y por ltimo esta es la celda nmero 3 y por ltimo esta es la celda nmero 3 de la ltima fila

Esta es la celda nmero 1 Celda 1 segunda fila

WIDHT=100%
La dos y por ltimo esta es la celda nmero 3

Esta es la celda nmero 1

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

Ejemplos de Tablas

Celda 1 segunda fila

dos 2 fila y por ltimo esta es la celda nmero 3 de la ltima fila

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

Formularios

5.12 - FORMULARIOS (FORM).

Introduccin
Los formularios son plantillas que permiten la creacin de documentos HTML con peticiones de datos. La principal utilidad de los formularios es la posibilidad de crear cuestionarios, encuestas, pginas de comentarios o cualquier documento en la que se desee una interaccin por parte del usuario. Se podrn definir distintos tipos de recuadros de dialogo, botones de seleccin, mens de mltiples opciones, ... Para permitir obtener los datos de una manera ms intuitiva.

<FORM> Definicin de formularios

Existe una instruccin HTML para la creacin de formularios esta es FORM, que tiene la siguiente estructura: < FORM ACTION="fichero que trata el formulario" METHOD= POST | GET > ... Elementos que forman el formulario ... < /FORM> Dentro de la etiqueta de formulario se definirn los distintos elementos de peticin de datos. Estas instrucciones que se explicarn a continuacin definirn los tipos de botones, cajas de dialogo y ventanas para la introduccin de datos. Y definirn las variables que almacenarn los datos introducidos por el usuario. Estas etiquetas se incluirn entre la de definicin 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 debe encontrarse en el servidor y estar escrito en algn lenguaje de programacin. A este programa se pasar como parmetros los datos introducidos en el formulario y retornar un cdigo HTML que se mostrar 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 envo de los datos. Con POST enva los datos en la entrada estndar del programa que trata el formulario y con GET los datos se pasan por parmetro, en la lnea de comandos, al programa. El usar uno o otro mtodo vendr determinado por como son tratados los parmetros en el formulario en el (CGI-BIN). El mtodo de uso ms normal ser POST.

Una vez definidas las caractersticas globales del formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen. Dentro de la instruccin del formulario podrn incluirse cualquier texto o instruccin HTML, siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario. Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas, tablas, etc ...

<INPUT> Entrada bsica de datos

La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de entrada de datos. Por lo general sern entradas de texto corto (a lo sumo una frase) o opciones. El formato bsico es el siguiente: < INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = "Variable que toma el valor" VALUE = "Valor de Inicializacin" > El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se est definiendo, a continuacin se explicarn 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 el formulario junto con el valor que le asigno el usuario del formulario. El atributo VALUE suele especificar el valor de inicializacin, que ser el valor por defecto. A continuacin se relatan los distintos tipos de instrucciones de entrada.

<INPUT TYPE=TEXT...> Texto corto

Formularios

El tamao de la ventana de introduccin de texto se fija con el atributo SIZE, que indica el tamao de la ventana en caracteres. Aqu solo se define la parte visible, pero el usuario podr introducir ms texto si lo desea. Para indicar el mximo nmero 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 y VALUE especifica el valor de inicializacin del campo. De todos los atributos solo ser obligatorio NAME, siendo el resto opcionales. En la entrada se podrn usar cualquier tipo de caracteres incluso los acentuados, en su formato normal.

Ejemplos
Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin Nombre: <INPUT TYPE=TEXT NAME=variable>

Nombre:
Ser una introduccin de texto bsica.

Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicializacin">

Nombre: Texto de Inicializacin

En este caso introduciremos un texto de inicializacin que ser el texto por defecto y es editable por el usuario. Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicializacin" SIZE=50 MAXLENGHT=55>

Nombre: Texto de Inicializacin

Ahora definimos con SIZE un mayor tamao del recuadro y con MAXLENGHT definimos el nmero mximo de caracteres que se pueden introducir.

<INPUT TYPE=PASSWORD...> Palabras secretas

Es similar al anterior pero en este caso no se imprimen los caracteres segn se van introduciendo, se muestra un asterisco en vez de los caracteres. Solo se puede ver el nmero de caracteres, pero no valor. Se usa para la introduccin de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos. El formato es:

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

Formularios

< INPUT TYPE=PASSWORD NAME="variable" VALUE="valor inicial" SIZE="tamao" MAXLENGTH="li>longitud mxima" >

Ejemplo
Inst. HTML Resul tado Explica cin Password: <INPUT TYPE=PASSWORD NAME=variable VALUE="password">

Password:
El texto introducido no puede ser visto, pero si es posible saber el nmero de caracteres que se introducen.

<INPUT TYPE=CHECKBOX> Botones de seleccin

El checkbox es un botn que puede presentar dos estados activado o desactivado. El formato es el siguiente: < INPUT TYPE=CHECKBOX NAME="variable" CHECKED> Se requiere el atributo NAME. Los valores que tomar la variable sern on off, dependiendo de su estado. Si el botn estaba activado cuando se envan los datos del formulario se enviaran el nombre de la variable y el valor que indique su estado. Si se incluye el atributo CHECKED el botn se encontrar activado en la inicializacin. Si se indica el atributo VALUE,cuando se envian los datos con el botn activado se mandar la variable con el valor indicado y en caso contrario no se mandar ningn valor.

Ejemplo
Inst. HTML Resul tado Explica cin Inst. HTML <INPUT TYPE=CHECKBOX NAME= variable> Opcin

Opcin
En este caso esta desactivado por defecto y su utilizar en caso de los valores on y off para definir su estado.

<INPUT TYPE=CHECKBOX NAME= variable CHECKED> Opcin

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

Formularios

Resul tado Explica cin

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

<INPUT TYPE=RADIO...> Seleccin entre mltiples opciones

Se usa cuando la opcin puede tomar un valor simple de una serie de alternativas. En este caso se presentan unos valores opcionales de los que solo puede tomar un valor. Para especificar cada uno de estos valores se incluir una etiqueta RADIO por cada una de las posibles alternativas, su estructura general 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 opcin. Para inicializarlo se usa el atributo CHECKED que se indicar solo en la opcin que se quiera especificar por defecto.

Ejemplo
Inst. HTML <INPUT TYPE=RADIO NAME= variable VALUE=opcion1 >Opcin 1<BR> <INPUT TYPE=RADIO NAME= variable VALUE=opcion2 CHECKED>Opcin 2<BR> <INPUT TYPE=RADIO NAME= variable VALUE=opcion3 >Opcin 3<BR> <INPUT TYPE=RADIO NAME= variable VALUE=opcion4 >Opcin 4<BR>

Resul tado

Opcin 1 Opcin 2 Opcin 3 Opcin 4

En este caso solo es posible seleccionar uno de los posibles valores, la opcin CHECKED indica cual es la opcin activa por defecto.

Explica cin

<INPUT TYPE=HIDDEN...> Parmetros ocultos

Formularios

estado control para enviar algn tipo de informacin 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 botn se usa para enviar los datos del formulario, al pulsar el usuario este botn, se acaba la introduccin del formulario y pasa el control al programa indicado en ACTION. En todo formulario debe existir al menos un botn 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 botn de envo. Lo normal es que este botn no enve datos, pero si se indica el atributo NAME con un nombre de variable ser enviada la variable con el valor de VALUE. Esto puede ser til si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado.

Ejemplo
Inst. HTML Resul tado Explica cin < INPUT TYPE=SUBMIT VALUE="Enviar Datos" >

Enviar Datos
El texto indicado en VALUE es el que etiqueta el botn, al pulsar sobre l se enviarn los datos del formulario

<INPUT TYPE=IMAGE...> Botn de Envo grfico

Su funcionalidad es similar al botn de SUBMIT, se usa igualmente para enviar los datos de un formulario, pero en este caso se presenta una imagen como botn. Igualmente al pulsar sobre el botn se 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 tambin es pasado al programa interprete del formulario, de forma que la imagen igualmente podra ser un mapa sensible. Se pasarn dos
http://www2.uca.es/manual-html/form.htm (6 de 9)30/08/2008 11:59:58 a.m.

Formularios

parmetros x e y con las coordenadas del punto donde pulso, siendo el programa interprete el encargado de determinar la zona donde se puls, si se desea.

Ejemplo
Inst. HTML Resul tado Explica cin <INPUT TYPE=IMAGE SRC="boton.gif">

Se muestra la imagen como botn de envo, sustituyendo al botn de SUBMIT.

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

Este botn 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 botn.

<TEXTAREA> Texto en mltiples lneas

Permite la introduccin de un texto que puede abarcar varias lneas, introduciendo este en forma de prrafo. 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 tamao especificado con los atributos ROWS, filas, y COLS, 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 podrn incluir las marcas del lenguaje HTML, pero solo se tendrn en cuenta para incluir acentos y otro tipo de efectos. Los atributos ROWS y COLS determinan el tamao de la ventana visible, el texto se podr extender ms all de estos limites.

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

Formularios

Ejemplo
Inst. HTML <TEXTAREA NAME=variable ROWS=10 COLS=54> Texto de Inicialización que puede incluir varias líneas. </TEXTAREA>

Texto de Inicializacin que puede incluir varias lneas.

Resul tado

Explica cin

Se puede especificar el tamao de la ventana para introducir datos e indicar un texto de inicializacin, aunque este ser opcional.

<SELECT> Eleccin entre mltiples opciones

Se usa para mens simple o mltiples. Define mens de tipo pop-up (men de barras) y ofrece una alternativa ms compacta al uso de botones RADIO o CHECKBOX. Su formato es el siguiente: <SELECT NAME="variable"> < OPTION SELECTED VALUE=valor1> Opcin Primera < OPTION VALUE=valor2> Opcin Segunda ... < OPTION VALUE=valorn> Opcin Ensima </SELECT> Si se desea que sea un men mltiple se deber incluir el atributo MULTIPLE en la etiqueta de SELECT, en este caso se mostrarn todas las opciones en forma de tabla, en el otro caso se mostrar la opcin activa y un botn para poder modificar esta opcin. En ambos casos solo podr seleccionarse una de las opciones. Cuando se enva el resultado del formulario la variables NAME tomar el valor de la opcin que este activa. La etiqueta OPTION que contenga el atributo SELECTED ser considerada la opcin por defecto, caso de no especificarse ninguna se considerar la primera de las opciones.

Ejemplos

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

Formularios

Inst. HTML

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

Resul tado Explica cin

Opcin Segunda
Se muestra la opcin activa que puede ser cambiada, por defecto esta activada la segunda opcin. <SELECT NAME="variable" MULTIPLE> <OPTION VALUE=1> Opcin Primera <OPTION SELECTED VALUE=2> Opcin Segunda <OPTION VALUE=3> Opcin Tercera </SELECT>

Inst. HTML

Resul tado

Opcin Primera Opcin Segunda Opcin Tercer

En este caso al ser mltiple se muestran todas las opciones posibles, de las que solo es posible seleccionar una.

Explica cin

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

CGI, ejecucin de binarios

7 - CGI (Common Gateway Interface), ejecucin de binarios.

Definicin
Los cgi-bin son programas que se ejecutan en el servidor, pueden servir para tratar informacin, como pasarela con una aplicacin o base de datos o para generar documentos html de forma automtica. Como se vi con anterioridad, una de las principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM). Estos programas pueden ser escritos en cualquier tipo de lenguaje de programacin y son ejecutados en el servidor cuando se realiza su referencia. Algo importante es que el programa debe ser ejecutable en el 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 ms 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 extensin especial .cgi, o bien, encontarse en un directorio especial llamado cgi-bin. Cuando se referencie en una pagina html un binario, cualquier fichero con la extensin cgi, en el servidor se ejecutar este programa y la salida se enviar al cliente de la WWW. Para que sea posible ejecutar el binario (cgi-bin), ser necesario que el fichero tenga los permisos de 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 podrn escribir con las instrucciones normales del lenguaje de programacin pero hay 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.

CGI, ejecucin de binarios

Para pasar datos el servidor al cgi-bin utiliza una serie de variables de entorno, que quedan definidas al ejecutar el script. Las variables de entorno ms interesantes son:
q

REQUEST_METHOD

El mtodo 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 la informacin que siga al nombre del cgi-bin, por ejemplo: http://www2.uca.es/binarios/cgibin.cgi/camino/fichero PATH_INFO = /camino/fichero Ser la informacin adicional que se aade tras el nombre de cgi-bin. La informacin que se incluye ser pasada de forma codificada al cgi-bin, de forma que los espacios se convierten en signos '+' y los caracteres especiales se codifican de la forma %xx, donde xx el cdigo ASCII en hexadecimal del caracter. Esto debe ser tenido en cuenta cuando se interprete la informaci obtenida en formato URL.
q

PATH_TRANSLATED

Una versin decodificada de PATH_INFO, obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo).
q

SCRIPT_NAME

Nombre por el que fue llamado el cgi-bin.

QUERY_STRING

La informacin que sigue al smbolo ? en la URL que referencia al cgi-bin. Ser algn tipo de consulta que se realice al cgi-bin. No necesita ser decodificada de ninguna manera. Cuando se utiliza el mtodo GET las variables del formulario se pueden interpretar con esta variable de entorno. El formato en que se envian estas variables es el siguiente:

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

CGI, ejecucin de binarios

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

REMOTE_HOST

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

REMOTE_ADDR

Direccin IP del ordenador remoto que ejecuto el cgi-bin.

CONTENT_LENGTH

El nmero de caracteres enviados por el cliente al cgi-bin.

HTTP_USER_AGENT

El cliente de la WWW que ejecuta el cgi-bin, el formato general es: programa/versin libreria/versin El cgi-bin podra enviar un distinto cdigo HTML segn cada cliente.

Entrada de datos al cgi-bin

Para los formularios que utilizan el mtodo POST, la informacin es enviada al cgi-bin por la entrada estndar (stdin). El servidor enva 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 de final de fichero tras los datos enviados, por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados. CONTENT_TYPE suele contener el valor application/x-www-form-urlencoded, que indica que se trata de informacin con codificacin URL. En esta codificacin como se vio antes los espacios se convierten en signos '+' y los caracteres especiales se codifican de la forma %xx, donde xx el cdigo ASCII en hexadecimal del carcter. Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario. Las variables del formulario se enviarn de la forma: variable1=valor1&variable2=valor2& ... &variablen=valorn

Salida de datos del cgi-bin

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

CGI, ejecucin de binarios

El cgi-bin debe enviar sus datos a la salida estndar (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 pequea cabecera que identificar al documento. Las directivas que definen esta cabecera sern:
q

Content-type:

Es el tipo MIME del documento que se retorna. Si tuviera el valor text/html la salida se interpretara como cdigo html. Por tanto la salida del cgi-bin podra contener instrucciones HTML que 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" ); Sera el comienzo de la salida de cgi-bin escrito en C que comienza a generar cdigo 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 esa direccin. Esta permitido el uso de informacin adicional (PATH_INFO) y la directiva ?, pero no la directiva # para indicar un punto determinado dentro de un documento.
q

Status:

Indicar un cdigo de estado para indicar errores. El formato ser nnn xxxxxxx, donde nnn es un nmero de tres dgitos y xxxxxxx es una cadena de caracteres. Tras la cabecera se incluirn dos caracteres de retorno de carro (\n), siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin, si no se respeta esto la salida del cgi-bin podra indicarnos el error "Server Error 500". Despues de definida la cabecera se podr generar la salida del cgi-bin, que se interpretar seg el valor dado a Content-type.

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

Documentos con Frames

8 - Documentos con Frames

Introduccin
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 un hiperenlace puede tener como destino un documento y la frame en el que se mostrar. Tendrn asociado un nombre, que las distinguirn del resto de las frames de la pantalla y permitir usarlo en los hiperenlaces. En el caso que se cambie el tamao de la ventana, se podr determinar si la frame se ajusta a este tamao o mantiene su tamao intacto.

Esto permite crear nuevos tipos de documentos, en los que por ejemplo se mantendr una regin esttica (lista de enlaces, barra de botones, formulario) y otra zona dinmica en la que se mostrar el resultado. De esta forma una de las principales utilidades de las frames es la creacin de pginas con un ndice (por ejemplo un manual) o una cabecera esttica, consiguiendo as una mejora de la navegacin al poder acceder al ndice de una manera ms rapida y efectiva. El uso de las frames es til para cierto tipo de documentos, pero puede llegar a dificultar la navegacin, dentro de un documento con frames no tendr utilidad los botones de documento previo (back) ni documento siguiente (forward), ya que ambos nos trasladarn fuera del documento con frames. Para ver el documento previo en una de las frames debemos utilizar el botn derecho del ratn sobre ella y seleccionar la opcin volver en el frame (Back in Frame). Esto hace que cuando se utilicen frames haya que cuidar la correcta transicin 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 documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas, usando la etiqueta NOFRAMES.

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

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

Documentos con Frames

<HTML> <HEAD> Definiciones de la cabecera </HEAD> <FRAMESET> Definicin 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 no soporten frames. </NOFRAMES> </HTML>
Dentro de la etiqueta NOFRAMES se podr incluir una explicacin de que el documento solo es visible con el navegadores que soporten frames, o bien incluir una versin del documento que se muestre sin necesidad de frames.

<FRAMESET ...> Definicin de las frames.

Con esta instruccin definiremos las frames que formarn 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 tamao de cada una de las frames. De esta forma se dividir la pantalla de forma horizontal, segn cada una de las filas definidas. El tamao de la frame, puede expresarse de las siguientes formas:
q

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

Documentos con Frames

En tanto por ciento sobre el tamao de la ventana, en este caso si los porcentajes suman un valor distinto del 100%, se ajustarn para que coincidan con el tamao de la ventana. Se podr combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje. De forma relativa con el smbolo * que indica el tamao restante de la ventana. Si se indica una frame como 2* y otra como *, la primera ocupar dos tercios del espacio restante y la segunda un tercio del espacio restante. Se puede combinar con las definiciones anteriores.

Ejemplo Inst. HTML Muestra

Se definen tres frames horizontales, la primera (roja) ocupar 100 puntos de la pantalla, la segunda (azul) el 50% del tamao de la ventana del navegador y la tercera (verde) el espacio restante, si se vara el tamao de la ventana del navegador, cambiar el tamao de las dos ltimas.

COLS:

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

Ejemplo Inst. HTML Muestra

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

Documentos con Frames

En este caso se definen las frames de forma vertical, guardando la misma proporcin que en el caso anterior.

Una vez definida el nmero de frames por fila o por columna se definir el contenido de cada una de estas con la etiqueta FRAME, pero igualmente se podra definir frames dentro de frames, de forma que cada una de las definidas anteriormente podra estar divida en varias frames, esto se har incluyendo dentro de la instruccin FRAMESET, nuevas instrucciones FRAMESET que dividirn esta en las frames indicadas, como se ve en el siguiente ejemplo:

Ejemplo Inst. HTML

Muestra

Tomando como base las frames que se definieron en un ejemplo anterior, hemos dividido dos de las frames en 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 podran definir nuevas frames, pudiendo dividir la ventana, tantas veces como se desee.
http://www2.uca.es/manual-html/frames.htm (4 de 7)30/08/2008 12:00:02 p.m.

Documentos con Frames

<FRAME ...> Definicin de cada una de las frames

Como se ha visto en el apartado anterior con la etiqueta FRAME definiremos el documento que se mostrar en la frame y su nombre. Esta etiqueta presenta adems 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 frame definida. Si no se especifica documento alguno se mostrar la frame vaca.
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 cambiarlo mediante hiperenlaces.
q

MARGINWIDTH:

Indica el ancho del margen, este atributo es opcional y normalmente el navegador ajusta todos los mrgenes al mismo tamao, 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 mrgenes. Lo normal es no especificar ninguno 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 y permite desplazarse por el documento, pulsando con el ratn 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. Y por ltimo NO indica que en ningn caso se muestre la barra de scroll. Si no se indica nada se toma por defecto el valor AUTO.
q

NORESIZE:

Indica que la frame no debe ser variada de tamao por el usuario, se puede variar el tamao de una
http://www2.uca.es/manual-html/frames.htm (5 de 7)30/08/2008 12:00:02 p.m.

Documentos con Frames

frame situando el cursor del ratn encima y arrastrando en la direccin deseada. Con este atributo el usuario no podr cambiar el tamao de la frame en ningn caso. Por defecto todas las frames pueden variar su tamao.

TARGET: Atributo para indicar la frame de destino

El uso de frames introduce un nuevo atributo a alguna de las etiquetas especificadas con anterioridad, este atributo es TARGET que indicar la frame de destino de la operacin. Normalmente, en pginas sin frames, cuando se segua un hiperenlaces este se mostraba en la ventana del 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 la etiqueta FRAME. Estas instrucciones se utilizarn normalmente en los documentos que se incluyen dentro de las frames. Las etiquetas que permiten el uso de TARGET son las siguientes:
q

En los hiperenlaces indicar la frames donde se mostrar el documento, una vez que se siga el hiperenlace. <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 definicin de imgenes sensibles en el cliente, se indica la frame donde se ver el documento que 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://www2.uca.es/manual-html/frames.htm (6 de 7)30/08/2008 12:00:02 p.m.

Documentos con Frames

<FORM ACTION="url" TARGET="frame"> Existen unos valores especiales de TARGET que nos permitirn definir destinos distintos a las frames definidas. Estos valores son los siguientes:
q

TARGET="_blank": Indica que se muestre en una nueva ventana vaca, para seguir el
enlace se lanza otra ventana distinta del navegador.

TARGET="_self":Se mostrar en la misma ventana o frame que lo referencia, se puede

usar para modificar el valor dado por BASE.

TARGET="_parent": Se muestra en la frame o estructura de frames que llam al

documento actual.

TARGET="_top": Indica que se muestre en la ventana completa, eliminando la estructura

de frames que tenga la ventana.

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

Indice del manual de HTML

El Lenguaje HTML 1 - Etiquetas del lenguaje HTML

s s s

2 - Formato de las URL

s s

3 - Estructura de un documento HTML

s s

4 - Cabecera de un documento HTML

s s s s s

5 - Cuerpo de un documento HTML

s s s s

5.1 - Espaciados y saltos de lnea

El espaciado en HTML <P> Cambio de prrafo <BR> Salto de lnea <HR> Regla Horizontal <PRE> Texto preformateado <CENTER> Centrado de texto e imgenes   Espacios en blanco

5.2 - Caracteres latinos y especiales

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

Indice del manual de HTML

s s s s

Como representar caracteres especiales Elementos del lenguaje HTML Caracteres acentuados Otros Simbolos <H1> - <H6> Cabeceras de titulos <Hn ALIGN=CENTER>: Alineacin de la cabecera Ejemplos Utilidad <FONT SIZE=n> : Tamao de la fuente Ejemplos de tamaos de fuentes <BASEFONT SIZE=n> : Fuente por defecto <FONT COLOR=texto color rrvvaa> : Color de la fuente Ejemplos de definicin de colores de fuentes Estilos fsicos y Estilos lgicos Estilos Fsicos Estilos Lgicos Las listas en HTML <UL> Listas no ordenadas s Ejemplos <OL> Listas ordenadas s Ejemplos <DL> Listas de definiciones s Ejemplos Hiperenlaces <A HREF=...> Hiperenlace URL absolutas y relativas s Ejemplos <A NAME=...> Elemento Ancla Imgenes en los documentos HTML <IMG SRC=...> Inclusin de Imgenes <IMG ... ALT=...> Texto alternativo <IMG .. ALIGN=...> Alineacin de la imgen <IMG .. BODER=...> Borde de la imgen <IMG .. HEIGHT=... WIDTH=...> Tamao de la imgen <IMG .. HSPACE=... VSPACE=...> Espaciado de separacin de la imgen

5.3 - Cabeceras
s s s

5.4 - Tamao y Color de las fuentes de caracteres

s s s s s s

5.5 - Estilos fsicos y lgicos

s s s

5.6 - Definicin de listas

s s

5.7 - Hiperenlaces
s s s

5.8 - Imgenes
s s s s s s s

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

Indice del manual de HTML

5.9 - Imgenes Sensibles

Imgenes Sensibles s Ejemplo ISMAP como referenciar la imgen sensible s Ejemplo Imgenes sensibles definidas desde el cliente s Ejemplo Multimedia ? Extensiones Multimedia de Internet Explorer Plug-in's <EMBED> Insertar Ficheros Introduccin <TABLE> Definicin de la Tabla <CAPTION> Titulo de la tabla <TR> Fila de la tabla <TH> y <TD> Una celda de la tabla Introduccin <FORM> Definicin de formularios <INPUT> Entrada bsica de datos <INPUT TYPE=TEXT...> Texto corto <INPUT TYPE=PASSWORD...> Palabras secretas <INPUT TYPE=CHECKBOX> Botones de seleccin <INPUT TYPE=RADIO...> Seleccin entre multiples opciones <INPUT TYPE=HIDDEN...> Parametros ocultos <INPUT TYPE=SUBMIT...> Enviar Datos <INPUT TYPE=IMAGE...> Boton de Envio grfico <INPUT TYPE=RESET...> Borrar los datos <TEXTAREA> Texto en multiples lneas <SELECT> Eleccin entre multiples opciones

5.10 - Inserccin de elementos multimedia

s s s s

5.11 - Tablas
s s s s s

5.12 - Formularios
s s s s s s s s s s s s s

7 - CGI (Common Gateway Interface), ejecucin de binarios.

s s s s

Definicin Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin Introduccin Definicin <FRAMESET ...> Definicin de las frames

8 - Documentos con frames.

s s s

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

Indice del manual de HTML

s s

<FRAME ...> Definicin de cada una de las frames TARGET: Atributo para indicar la frame de destino

Gestin de un espacio Web Departamental 1 - Como gestionar la cuenta Departamental (EN PREPARACIN) 2 - Conceptos bsicos del diseo de documentos y espacios Web (EN PREPARACIN) 3 - FAQ de la gestin de un espacio Web Departamental

1 - Etiquetas del lenguaje HTML

Letra Negrita, del ingls Bold (negrita). Definir una tabla.

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

Indice del manual de HTML

<IMG>

Inclusin de una IMaGen.

Atributos de las Etiquetas

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

Indice del manual de HTML

<HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%> En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo NOSHADE es un caso especial que no presenta valor. El orden en que se especifiquen los atributos no afectarn al resultado final.

Etiquetas correctas
Todo texto que se encuentre entre los caracteres < y > se considerar una etiqueta, si la etiqueta no fuera una de las validas del lenguaje HTML no ser tenida en cuenta, sin causar ningn tipo de error. Dejndose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extraa. Cuando se comete un error sintctico al expresar una etiqueta o un atributo no se producir ningn error, simplemente no de obtendr el efecto que desebamos. El lenguaje HTML es un lenguaje que evoluciona muy rpidamente y cada nueva versin de los programas navegadores presenta etiquetas nuevas que causan efectos ms espectaculares o atributos nuevos de las etiquetas ya existentes. Esto causa que los programas ms antiguos no entiendan estas nuevas etiquetas y por tanto las considere errneas y no realice la accin que desebamos. Dndose el caso de atributos que son validos solo para un nico navegador. Cuando creemos cdigo HTML hay que hacerlo lo ms estndar posible para permitir que el documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas. Por tanto debemos 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 se conectan a nuestras pginas no tendrn en la mayora de los casos el mismo que nosotros. Tambien es interesante como se vera el documento en los distintos tamaos de la ventana del navegador, teniendo en cuenta que todos no tienen un monitor con la misma resolucin. En este manual se han tratado de incluir las caractersticas ms estndar de HTML y en caso de tratarse de instrucciones ms particulares se indicar convenientemente.

2 - Formato de las URL

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

Indice del manual de HTML

de la WWW, de esta forma desde un mismo programa se puede tener acceso a todos los recursos de una forma uniforme y permite que los documentos HTML incluyan enlaces a otras fuentes de informacin en servicios como FTP, gopher, WAIS, etc ...

servicio://maquina.dominio:puerto/camino/fichero
El servicio ser alguno de los de internet, estos pueden ser:

https: (HyperText Transport Protocol Secure), es el protocolo para la conexin a servidores de la

ftp: (File Transfer Protocol), utilizar el protocolo FTP de transferencia de ficheros. Se utilizar
cuando la informacin que se desee acceder se encuentre en un servidor de ftp. Por defecto se acceder a un servidor annimo (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 localizacin de informacin, se indicar el

directorio para localizar el recurso concreto.

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

Indice del manual de HTML

mailto: Se utilizar para enviar correo electrnico, todos los navegadores no son capaces. En este
caso solo se indicar la direccin de correo electrnico del destino: mailto://alias. correo@domino. La maquina.dominio indicar el servidor que nos proporciona el recurso, en este caso se utilizar el esquema IP para identificar la maquina ser el nombre de la maquina y el dominio. En el caso de nuestra Universidad el dominio siempre ser uca.es. Por tanto un nombre valido de maquina ser www2.uca.es. Es muy importante indicar siempre el dominio, ya que debemos suponer que se conectarn a nuestras pginas desde servidores externos a nuestra red local por tanto si no indicamos el dominio las URL que especifiquemos no podran 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 pero si se referenciara desde una red con distinto dominio la maquina www2 ser la maquina llamada 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 utiliza normalmente por el servicio. Solo se utilizar cuando el servidor utilice un puerto distinto al puerto por defecto. El camino ser la ruta de directorios que hay que seguir para encontrar el documento que se desea referenciar. para separar los subdirectorios utilizaremos la barra de UNIX /, se usa por convenio al ser este tipo de maquinas las ms usadas como servidores. El nombre de los subdirectorios y del fichero referenciado puede ser de ms de ocho caracteres y se tendr en cuenta la diferencia entre maysculas y minsculas en el nombre. La extensin de los ficheros ser tambin algo importante, ya que por ella sabe el servidor el tipo de 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 ms normales con sus tipos correspondientes son:

Tipo MIME text/html text/plain image/gif image/jpeg

Extensin html . htm, .txt .gif jpg .jpeg

Tipo de fichero documento HTML por defecto, texto plano imagen de formato GIF imagen de formato JPEG

El navegador de la WWW, realiza una accin para cada tipo de fichero, solo los que sean del tipo text/html sern mostrados como documentos HTML. En el caso de que el tipo no sea conocido por el

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

Indice del manual de HTML

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 pgina html por defecto de ese directorio. En el servidor estn definidos unos ficheros para ser usados si no de indica un 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 el directorio. Este fichero es la pgina inicial (home page) del servidor o del espacio Web. Algunos ejemplos de URL podran ser:

URL

Definicin
En este caso solo se indica el servicio y la maquina y dominio. El resto de los parmetros se toman por defecto, el puerto 80, el directorio, el raz del servidor y el documento por defecto de ese directorio. Esta URL est ms completa en este caso se accede al fichero internet.html que se encuentra en el directorio internet del servidor de la WWW, www.uca.es. Se acceder al fichero por defecto del directorio /serv/sii del servidor de la WWW, www2.uca.es En este caso se acceder a un servidor de FTP annimo, ftp. uca.es por el protocolo FTP y se acceder al fichero globo. gif del directorio de imagenes. En este caso se acceder al grupo de news de la uca en el servidor de news definido por defecto en el navegador de la WWW, esta opcin solo es soportada por los navegadores ms modernos. Enviar un mail al equipo de la WWW de la UCA, esta opcin solo es soportada por los navegadores ms modernos.

http://www.uca.es

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

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

ftp://ftp.uca.es/imagenes/globo.gif

news:uca.es

mailto://[email protected]

3 - Estructura de un documento HTML

Indice del manual de HTML

HTML ser:

4 - Cabecera de un documento HTML

Introduccin
La cabecera de un documento HTML est delimitado por las etiquetas <HEAD> y </HEAD>, en
http://www2.uca.es/manual-html/todoman.htm (10 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

esta se incluirn las definiciones generales que afectarn a todo el documento. Todas sus etiquetas son opcionales y se utilizarn solo en casos muy determinados, solo la etiqueta TITLE tiene un uso general y aunque es opcional se recomienda incluirla en todos los documentos que creemos. A continuacin se citan los distintos componentes que pueden formar la cabecera de un documento HTML.

<TITLE>: Ttulo del documento

<BASE>: URL base del documento.

Especificar la URL que se tomar como base del documento HTML, esta se utilizar para las referencias a URL relativas, que se encuentren en los hiperenlaces y en las referencias de las imgenes. No tiene mucho uso y lo normal es utilizarlo en documentos, obtenidos de otros servidores 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/">
http://www2.uca.es/manual-html/todoman.htm (11 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

<ISINDEX>: El documento es un ndice

<META>: Indica refresco del documento

5 - Cuerpo de un documento HTML

Indice del manual de HTML

#000000 #FFFFFF #FF0000 #00FF00 #0000FF

Negro(Negro) Blanco
(Blanco)

Rojo(Rojo) Verde(Verde) Azul(Azul)

Algunos colores estn predefinidos y pueden ser referenciados por su nombre, estos solo sern validos para Netscape e Internet Explorer de Microsoft, estos colores predefinidos son:

Color Predefinido black teal blue navy lime

Muestra negro teal azul azul marino lima

Color Predefinido olive red maroon gray fuchsia

Muestra oliva rojo marron gris fucsia

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

Indice del manual de HTML

white purple yellow

blanco purpura amarillo

green silver aqua

verde plata agua

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

BACKGROUND="URL":

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 normalmente negro.
q

LINK=#rrvvaa nombre del color:

Indicar el color que tendrn 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 ms oscuro.

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

Indice del manual de HTML

<body bgcolor=0000FF text=FFFFFF link=FF0000 vlink=008200>

5.1 - Espaciados y saltos de lnea

<P> Cambio de prrafo :

Definir un prrafo, se usar al comienzo o al final de un prrafo de texto e introducir un espaciado de separacin (normalmente dos lneas) con el prximo texto que se exprese. Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo servir para separar texto. 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 prrafo </P> es opcional no siendo necesario incluirla. Existen elementos HTML que ya introducen separaciones de lneas, tanto antes como despues, por tanto en estos casos no es necesario, pero s posible, introducir el elemento de nuevo prrafo. No es
http://www2.uca.es/manual-html/todoman.htm (15 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

necesario utilizar esta etiqueta ni antes ni despus de cabeceras <Hn>, despus de <HR> (reglas horizontales), <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 una lista.

Ejemplo
Inst. HTML Resul tado Explica cin Esta es una frase que forma un parrafo.<P>Este es el otro parrafo.

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

En el punto donde se ha introducido la instruccin HTML de nuevo parrafo se observa una separacin de dos lneas.

<BR> Salto de lnea :

Ejemplo
Inst. HTML Resul tado Explica cin Esta es una frase de la primera lnea.<BR>Esta es la siguiente lnea

Esta es una frase de la primera lnea. Esta es la siguiente lnea

En el punto donde se ha introducido la instruccin HTML de nueva lnea se observa el cambio de lnea.

<HR> Regla Horizontal :

<HR ALIGN=LEFT|RIGTH|CENTER NOSHADE SIZE=n WIDTH=n> Se usa para dividir un documento en distintas secciones, mostrar una lnea horizontal de tamao determinable. Se asemejar al salto de pgina dentro de un documento. Si no se especifican atributos dibujar una lnea que ocupe el ancho de la pantalla del navegador y
http://www2.uca.es/manual-html/todoman.htm (16 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

introduciendo una separacin con el texto anterior y siguiente, equivalente a cambio de prrafo. No es necesaria la etiqueta de fin </HR>. Con los atributos podemos especificar su forma y tamao, esto atributos 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 pantalla del navegador, a la izquierda, derecha o centrada.
q

NOSHADE:

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

SIZE=n:

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

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 Resul tado Explica cin Inst. HTML Resul tado Explica cin Inst. HTML Mostrar un lnea que ocupa todo el ancho disponible, es de 5 de alto y no tiene sombra ni efecto dimensional. Mostrar un lnea que ocupa todo el ancho disponible y de altura 1 con sombra. <HR>

<HR SIZE=5 NOSHADE>

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

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

Indice del manual de HTML

Resul tado Explica cin Mostrar un lnea 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 porcin de texto en el que se respetan los saltos de lnea, tabuladores y espacios en blanco. 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 de espaciado fijo ms pequea que el texto normal. Presenta un problema cuando la lnea es demasiado larga, ya que no la corta el navegador y se mostrara tal y como aparece en el fichero fuente. No se recomienda como forma rpida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacin. Dentro de la etiqueta PRE no tendrn validez la mayora de las instrucciones HTML, solo se podrn utilizar <B>, <I> y los hiperenlaces. El resto de las etiquetas HTML son ignoradas.

Ejemplo
Inst. HTML <PRE>Este texto tal y como se escribi. </PRE> se ver

Resul tado

Este texto se ver tal y como se escribi.

Explica cin

Como se ve utiliza otra fuente de caracteres distintas de espaciado fijo y se respetan los espacios en blanco y los saltos de lnea de la instruccin original.

<CENTER> Centrado de texto e imgenes :

Ejemplo

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

Indice del manual de HTML

Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin

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

Este texto se ver centrado

El texto y la imagen se centran

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 :

5.2 - Caracteres latinos y especiales

Elementos del lenguaje HTML

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

Indice del manual de HTML

Sec. Escape < > & " Signo < (menor que) Signo > (mayor que) Signo & (ampersand)

Simbolo

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, se mostrarn correctamente. Usted en su ordenador con su navegador podr leer estos caracteres correctamente siempre y cuando tenga el mismo cdigo (espaol) que el autor del documento. Los primeros 127 caracteres del cdigo ASCII son comunes para todos los pases e incluyen todas las letras del alfabeto, a partir del 128 son especficos para cada lenguaje, entre estos se incluyen los caracteres acentuados y la letra , por tanto si alguien desde otro pas que tenga un cdigo incompatible intenta leer su documento, probablemente encuentre caracteres extraos que no sepa interpretar 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 maysculas como para las minsculas. Por tanto incluiremos el smbolo de ampersand (&) la vocal que deseamos acentuar, la palabra acute y el smbolo punto y coma (;). Representndose los acentos de la forma:

Sec. Escape á é

Letra

Sec.Escape Á É

Letra

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

Indice del manual de HTML

í ó ú

Í Ó Ú

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

Sec. Escape ñ

Letra

Sec.Escape Ñ

Letra

Para el acento grave usaremos grave, siendo en este caso la representacin:

Sec. Escape à è ì ò ù

Letra

Sec.Escape À È Ì Ò Ù

Letra

Sec. Escape ¿ ü

Letra

Sec.Escape ¡ Ü

Letra

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

Indice del manual de HTML

Algunos otros smbolos especiales sern los siguientes.

Sec. Escape ç ® &#nnn;

Simbolo

Sec.Escape Ç ©

Simbolo

Smbolo de registrado

Smbolo de Copyright.

Donde nnn es un nmero decimal, el carcter nnn del cdigo ISO-8859-1 (ASCII).

Este texto aparecer resaltado

Lo normal es utilizar las cabeceras de forma consecutiva y descendente, es decir, comenzaremos el documento con la cabecera <H1> que definir el titulo, luego para los apartados principales utilizaremos la cabecera <H2>, para subapartados <H3>, etc ... Utilizndolas as de forma consecutiva. Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto. El modo en que se presentan las cabeceras pueden variar de un navegador a otro, y solo se puede asegurar que se mostrar de distinta forma en orden de importancia. Lo normal es
http://www2.uca.es/manual-html/todoman.htm (22 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

que la <H1> sea negrita y muy grande, <H2> negrita y grande, <H3> itlica y grande.

<Hn ALIGN=CENTER>: Alineacin 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

5.4 - Tamao y Color de las fuentes de caracteres

<FONT SIZE=n> : Tamao de la fuente

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

Indice del manual de HTML

El tamao tambin 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 la fuente ser de tamao 4. Existe una etiqueta que redefine la fuente por defecto, esta etiqueta es: <BASEFONT SIZE ...> Los elementos de tamao de fuentes pueden ser definidos para todo un documento, teniendo validez dentro de elementos tales como listas y formularios, pero no tendrn validez global en las tablas, debiendo definir cada una de las celdas al tamao de fuente deseado.

Ejemplos de tamaos de fuentes

Inst. HTML
<FONT SIZE=2>Muestra</FONT>

Muestra
Muestra

<FONT SIZE=6>Muestra</FONT>

Muestra
Muestra

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

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

Muestra

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

Muestra Muestra Muestra

<BASEFONT SIZE=n> : Fuente por defecto

Definir el tamao de la fuente que se considerar como base para definir los tamaos de fuente relativos. Esta etiqueta no define el tamao de la fuente por defecto, para el texto normal, y solo se usa para clculos de tamao de fuente relativos. La utilidad no es muy amplia, y se podra utilizar cuando en un
http://www2.uca.es/manual-html/todoman.htm (24 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

documento en el que todos los tamaos estn definidos de forma relativa y se desee cambiar de forma global el tamao de las fuentes. Si no incluye esta etiqueta el valor base para estos clculos es 3, con esta se puede variar, como se ve en el ejemplo.

Inst. HTML
<FONT SIZE=-2>Muestra</FONT> <BASEFONT SIZE=5> <FONT SIZE=-2>Muestra</FONT>

Muestra

Explicacin

Muestra Muestra

El nuevo valor para el calculo del tamao relativo ser 6, notndose el efecto en el tamao de las fuentes

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

Ejemplos de definicin de colores de fuentes

Algunos ejemplos de la definicin de colores de fuente podran ser:

Inst. HTML

Muestra

Explicacin

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

Indice del manual de HTML

<FONT COLOR=FF00FF>Muestra</FONT>

Muestra

El texto se mostrar de un color lila, al mezclar los colores rojo y azul. Tambin se puede utilizar uno de los colores predefinidos. Se puede combinar con el tamao de fuente Se pueden combinar varios colores en una misma frase o palabra. Pueden ser utilizados junto con otros elementos de resalte como cabeceras, estilos fsicos y lgicos, etc ...

<FONT COLOR=AQUA>Muestra</FONT>

Muestra

<FONT SIZE=5 COLOR=red> Muestra </FONT>

Muestra
Muestra

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

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

Muestra

5.5 - Estilos fsicos y lgicos

Estilos fsicos y Estilos lgicos
Como estilos definiremos los distintos efectos que se pueden aplicar al texto normal. Estos efectos son los resaltes (negrita, cursiva, subrayado, etc ...) que se pueden usar. En HTML existen dos grupos principales de estilos los lgicos y los fsicos. Los fsicos son aquellos que siempre causan un mismo efecto (negrita, cursiva, ...) y los lgicos indicarn un tipo de texto (cita, nombre de persona) que por sus caractersticas tiene un modo de mostrarse propio. Se pueden utilizar ambos estilos para especificar un mismo efecto, por ejemplo para obtener una frase resaltada podemos usar el estilo fsico (negrita) o el estilo lgico (STRONG) y en ambos casos el resultado puede ser el mismo. Es ms recomendado, sin embargo, utilizar el estilo lgico, ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario, de forma que se pueda obtener una presentacin personalizada. Adems en un futuro los navegadores podran aadir modos ms sofisticados de presentar los distintos estilos y si estn definidos de forma lgica la adaptacin es ms sencilla. Y por ltimo y ms importante, al utilizar estilos lgicos el modo de escribir HTML se hace independiente de como se presentar finalmente el texto, se utilizar el estilo segn el tipo de texto que sea y no segn como se debe presentar.
http://www2.uca.es/manual-html/todoman.htm (26 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

La tendencia actual de los navegadores es el uso de los estilos fsicos olvidando un poco la versatilidad de los estilos lgicos, pero sin embargo ambos estilos pueden ser usados indistintamente, sin ningn problema.

Estilos Fsicos.
El efecto se aplicar al texto expresado entre la etiquetas de inicio y fin. Los estilos fsicos son los siguientes:

Etiqueta HTML <B> <I> <TT> <BLINK> <SUB> <SUP> <BIG>

Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo

Ejemplo Ejemplo

Descripcin Negrita. Cursiva. Maquina de escribir, muestra una fuente de caracteres de espaciado fijo. Parpadeo. Subndice. Para Netscape 2.0+ Superndice. Para Netscape 2.0+ Texto grande, se utilizar el mayor tamao de fuente. Para Netscape 2.0+ Texto pequeo, se utilizar la fuente de menor tamao. Para Netscape 2.0+

Ejemplo
Ejemplo

<SMALL>

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

Ejemplo
Inst. HTML Resul tado Explica cin Este texto es <B>negrita, <I>cursiva y <BLINK>parpadeante </BLINK></I></B>

Este texto es negrita, cursiva y parpadeante

El texto es por tramos negrita, cursiva y parpadeante.

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

Indice del manual de HTML

Estilos lgicos
En este caso se definen las situaciones o tipos de frases y estas tomarn la representacin ms adecuada a cada caso. Estos estilos son:

Etiqueta HTML <ADDRESS>

Ejemplo Ejemplo

Descripcin Se utilizar para especificar direcciones de correo electrnico. Introduce citas textuales o texto destacado, en este caso el texto se separar del texto circundante y se ajustar a los mrgenes derecho e izquierdo. Indica el titulo de una pelcula o un libro. Cdigo fuente de un lenguaje de programacin. Especifica una definicin. Indicar enfasis. Texto introducido desde el teclado. Mensajes de estado de la computadora. Texto desechado, tachado. Especificar texto resaltado. Indicar una variable.

Ejemplo

<CITE> <CODE> <DFN> <EM> <KBD> <SAMP> <STRIKE> <STRONG> <VAR>

Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo

5.6 - Definicin de Listas

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

Indice del manual de HTML

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

<UL> Listas no ordenadas

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

Inst. HTML

Resul tado

q q

Titulo Elemento 1 Elemento 2 Elemento 3

Explica cin

Este ser el caso bsico de lista no ordenada. Se podrn incluir tantos elementos como se deseen y estos podrn ser texto normal, texto resaltado con alguno de los estilos, imgenes, etc ...

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

Indice del manual de HTML

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>

s s

Resul tado
s

Elemento 1 Elemento 2 r Elemento 3.1 r Elemento 3.2 Elemento 4

Explica cin

<OL> Listas ordenadas

Estas listas sern similares al caso anterior pero en este se usa un nmero para indicar el orden de cada elemento de la lista. El ser ordenada no significa que ordene los elementos alfabticamente sino que los elementos guardan un orden que es el nmero 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 ... <LI> Elemento n </OL> El punto de comienzo siempre ser el 1 si no se indica en START con otro valor de comienzo y el tipo de numeracin puede seleccionarse con el atributo TYPE. Sus posibles valores son:
q q q q q

A : Letras maysculas. a : Letras minsculas. I : Nmero romanos en maysculas. i : Nmero romanos en minsculas. 0 : Nmeros (es por defecto por tanto no hay que indicarlo).

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

Indice del manual de HTML

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

Inst. HTML

Resul tado

1. Elemento 1 2. Elemento 2 3. Elemento 3

Explica cin

Este ser el caso bsico de lista ordenada.

Inst. HTML

<OL TYPE=I> <LI> Elemento 1 <LI> Elemento 2 <OL TYPE=a> <LI> Elemento 3.1 <LI> Elemento 3.2 </OL> <LI> Elemento 4 </OL>

Resul tado

I. Elemento 1 II. Elemento 2 a. Elemento 3.1 b. Elemento 3.2 III. Elemento 4

Explica cin

Ahora definimos una lista anidada y usamos distintos elementos para la numeracin de las opciones.

<DL> Listas de definiciones

En esta lista existirn dos elementos la definicin y el termino, se usar principalmente para listas en las que se incluirn una palabra o frase y su definicin (diccionario). El termino aparecer pegado en el borde izquierdo y la definicin aparecer ligeramente tabulada a partir del borde izquierdo. Se puede usar de forma separada la definicin y el termino, pudiendo por tanto incluir solo definiciones o solo trminos. El incluir solo trminos podra usarse para sangrar el comienzo de un
http://www2.uca.es/manual-html/todoman.htm (31 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

prrafo. <DL> <LH>Titulo de la lista </LH> <DT>Termino 1 <DD>Definicin 1 <DT>Termino 2 <DD>Definicin 2 ... <DD>Termino N <DT>Definicin N </DL> El titulo de las lista <LH> como en los casos anteriores es opcional.

Ejemplos
<DL > <DT> Coche <DD> Vehiculo de cuatro ruedas <DT> Moto <DD> Vehiculo de dos ruedas </DL>

Inst. HTML

Coche
Resul tado

Vehiculo de cuatro ruedas Moto Vehiculo de dos ruedas

Explica cin

Como se ve se coloca en una posicin la definicin y en otra el termino.

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

Indice del manual de HTML

Inst. HTML

iconos1/redstar.gif" align=middle border=0> Solicitud de Servicios de Comunicaciones.</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><img src="http://www2.uca.es/iconos/icono541.gif" align=middle border=0> Actualizacin 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=middle border=0> Mensajera Electrnica.</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 Prctico de Eudora.</A> <dd><A HREF="/servicios/correo/mensaje_institu.html"><img src="http:// www2.uca.es/iconos1/redstar.gif" align=middle border=0>Mensajera Institucional.</A> </dl> </dl>

Conexin a la Red.
Normativa de conexin a Red. Instalacin de Software de Comunicaciones. Solicitud de Servicios de Comunicaciones. Servidores Proxy.
Resul tado

Actualizacin del Software de Comunicaciones. Mensajera Electrnica.

Manual Prctico de Eudora. Mensajera Institucional.

Explica cin

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

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

Indice del manual de HTML

Hiperenlaces
Es la utilidad bsica del hipertexto, permite indicar zonas de texto o imgenes que si son seleccionados 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 texto necesariamente, podemos usar, cabeceras (<Hn>), cualquiera de los estilos, una imagen, etc .... Un hiperenlace igualmente podr definirse dentro de cualquier elemento HTML: listas, prrafos de texto, tablas, formularios. El texto del hiperenlace aparece normalmente resaltado sobre el texto normal, en azul y subrayado, en el caso de las imgenes, si tienen definido un borde este aparecer resaltado en color azul. La mayora de los navegadores cuando la zona por la que pasa el cursor es sensible, este cambia de aspecto indicndolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en 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 concordar con el texto del prrafo donde se englobe, se debe evitar el uso de pulse aqu. Por ejemplo: Puede encontrar mas informacin sobre vacas pulsando aqu se podra sustituir por: Disponible ms informacin 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>

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

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

Indice del manual de HTML

Igualmente se puede indicar una imagen como enlace, en este caso entre las etiquetas del hiperenlace indicamos la inclusin de la imagen, tambin dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace. Un ejemplo sera:

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

URL absolutas y relativas

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

Indice del manual de HTML

Algunos ejemplos seran:

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

http://www.uca.es/internet/internet.html
En este caso se indica la URL completa, por tanto no es relativa y no se podr utilizar ningn dato de la posicin actual.

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

URL rela tiva URL que se activa Explica cin

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

http://www.uca.es/visita/bahia/cadiz.html
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 directorio donde est el documento actual

URL rela tiva

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

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

Indice del manual de HTML

URL que se activa Explica cin

<A NAME=...> Elemento Ancla

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

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

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

Ser un enlace a la zona del documento actual que se haba marcado con la etiqueta indicada. Tambin es posible acceder a un ancla de un documento externo de la forma:

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

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

Indice del manual de HTML

<IMG SRC=...> Inclusin de Imgenes

La etiqueta encargada de mostrar imgenes 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. Igualmente se 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 su produce sobre un texto o algn elemento HTML. El atributo SRC indica el fichero de imagen que se incluir en el documento. Se indicar el camino hasta la imagen en formato URL, el fichero de la imagen deber tener una extensin apropiada a su formato, por ejemplo si es GIF la extensin ser .gif, si es JPEG la extensin ser .jpg o .jpeg, si no se
http://www2.uca.es/manual-html/todoman.htm (38 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

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 servidor local, pudiendo especificar el camino completo y el servidor donde se encuentra la imagen. En este caso al igual que en los hiperenlaces es posible indicar direcciones de URL relativas al documentos actual, como se vio en el apartado anterior. Lo normal es referenciar una imagen que se encuentre en el servidor local, ya que el acceso a imgenes en servidores externos puede ser ms lento. Por tanto conviene copiar las imgenes e iconos que se usen al servidor local. A continuacin se explica la utilidad de cada unos de los atributos de la etiqueta IMG.

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

<IMG .. ALIGN=...> Alineacin de la imgen

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

Indice del manual de HTML

Numero de Telfono. En este apartado se indica el nmero de telfono

Resul tado

que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica cin Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imgen.

Inst. HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=MIDDLE><B>Numero de Telefono<B>. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Resul tado

Numero de Telfono. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Explica cin

En este caso el texto est alineado en la parte central de la imgen.

Inst. HTML

<IMG SRC="/iconos1/phone5.gif" ALIGN=BOTTOM><B>Numero de Telefono<B>. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Resul tado

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

Resul tado

Explica cin

Tambin es posible alinear imgenes entre s y imgenes respecto a otros elementos HTML

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

Indice del manual de HTML

Resul tado

Numero de Telefono. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Explica cin

Inst. HTML

Resul tado

Numero de Telefono. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.

Explica cin

En este ejemplo aparece la imgen alineada a la derecha.

<IMG .. BODER=...> Borde de la imgen

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

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

Indice del manual de HTML

Resul tado Explica cin Inst. HTML Resul tado Explica cin Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imgen, que sirve de hiperenlace. Como se ve si no se indica nada se muestra un borde entorno a la imgen que activa el hiperenlace.

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

<IMG .. HEIGHT=... WIDTH=...> Tamao de la imgen

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

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

Indice del manual de HTML

Resul tado Explica cin Inst. HTML Si no se indican bien ambos valores, teniendo en cuenta la proporcin de la imgen esta puede aparecer deformada.

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

Resul tado

Explica cin Inst. HTML

Explica cin

<IMG .. HSPACE=... VSPACE=...> Espaciado de separacin de la imgen

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

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

Indice del manual de HTML

Resul tado Explica cin Como se ve en el segundo caso las imgenes aparecen separadas 100 puntos. El espaciado es igual a la derecha que a la izquierda, por tanto tambin aparece la imagen separada del borde.

Creacin de una imagen GIF transparente

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

Indice del manual de HTML

activarla nos permitir seleccionar el color transparente directamente pulsando sobre un color de la imgen. S no aparece esta ventana entonces tendr que guardar la imgen como GIF89, y volver a cargar la imgen otra vez a fin de que se produzca el cambio de formato.

5.9 - Imgenes Sensibles

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

Indice del manual de HTML

poly: Una lnea poligonal de a lo sumo 100 vrtices. Se definir tantas coordenadas como vrtices formen la lnea poligonal y no ser necesario cerrar la figura. rect: Definir un rectngulo. Las coordenadas indicaremos el vrtice de la esquina superior izquierda y la esquina inferior derecha. point: Indicar un punto. Si en la figura se definen diversos puntos se activar el enlace del punto ms cercano al lugar donde se pulso en la imagen.

Ejemplo ISMAP como referenciar la imgen 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 imgenes 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
http://www2.uca.es/manual-html/todoman.htm (46 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

imagen con el atributo ISMAP para indicar que se trata de una imagen sensible.
q

En los servidores que poseen soporte interno de imgenes sensibles:

En este caso no es necesario poner el camino al programa imagemap sino solo la referencia al fichero del mapa. El mismo grfico se referencia as: <A HREF="/camino_hasta_el_mapa/fichero_mapa.map"><IMG SRC="camino_imagen_sensible.gif" ISMAP></A> El atributo ISMAP en la imagen es importante al igual que la extensin .map del fichero que mapea la imagen. El segundo caso es ms rpido ya que es el servidor el que se encarga de determinar las distintas zonas 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 mtodo, en nuestro caso usaremos el segundo.

Ejemplo Imgenes sensibles definidas desde el cliente

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

Indice del manual de HTML

</MAP> Cada una de las lneas con la etiqueta AREA, definen una zona sensible. Actualmente solo es posible definir zonas sensibles delimitadas por rectngulos, no pudiendo definir otras. Con el atributo COORDS se definen las coordenadas de la zona sensible, estas sern la coordenada del primer vrtice xi1, yi1 y la coordenada del vrtice 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 se defina la imgen la forma ser: <IMG SRC="..." USEMAP="#nombre" > Como nombre utilizaremos el nombre que se le dio al mapa su definicin. Esta etiqueta solo es soportada por los navegadores ms modernos, Internet Explorer de Microsoft y el Netscape 2.0, por tanto los navegadores antiguos no podran interpretar este tipo de mapas, sin embargo es posible utilizar ambas formas de definicin a la vez, permitiendo que el mapa sea interpretado 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 ser interpretado por el servidor.

Ejemplo

Ejemplo de Imgen Sensible

Creacin de una Imgen sensible
En este apartado se explicar paso a paso, la creacin de una imgen sensible. Para ello se utilizar el programa ms bsico para ello, mapedit, que se incluye en el Paquete Bsico para la Creacin de documentos HTML Al iniciar el programa seleccionaremos File -> Open/Create, y aparecer la ventana que se muestra en el grafico adjunto,. En esta indicaremos el nombre del fichero que definir el mapa de la imgen (Map File), que deber tener la extensin .map, este ser el fichero que habr que transferir al servidor para referenciar la imgen sensible, lo llameremos ejemplo.map, en el apartado siguiente indicaremos
http://www2.uca.es/manual-html/todoman.htm (48 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

el fichero GIF sobre el que se aplicar la imgen sensible (GIF Filename).

Una vez cargada la imgen obtenemos la siguiente pantalla:

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

Indice del manual de HTML

La opcin para definir la URL por defecto, es decir, la que se activar cuando no se pulse sobre ninguna de las zonas definidas ser File -> Edit Default URL. Una vez definidas todas las zonas de la imgen y la URL por defecto, podremos grabar el mapa de la imgen 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 rect http://www2.uca.es/manual-html/prueba/boton2.htm 62,10 134,36 rect http://www2.uca.es/manual-html/prueba/boton3.htm 62,36 134,64
http://www2.uca.es/manual-html/todoman.htm (50 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

Este fichero se transferir al servidor y como se vi en con anterioridad existirn dos formas de referenciarlo:

Imgen sensible interpretada por el servidor

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

Resul tado

Explica cin

Como se ve pulsando en las distintas zonas de la imgen se activan los enlaces correspondientes, pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona.

Imgen sensible interpretada por el cliente

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

Inst. HTML

Resul tado

[boton 1 | boton 2 | boton 3]

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

Indice del manual de HTML

Explica cin

5.10 - Insercin de elementos multimedia

Indice del manual de HTML

Extensiones Multimedia de Internet Explorer

El Internet Explorer de Microsoft permite mostrar vdeo en formato AVI y reproducir sonido, de una forma sencilla, para eso aade una nueva etiqueta y un atributo a la etiqueta de mostrar imgenes.

<BGSOUND ...> Reproduccin de audio

<BGSOUND SRC="fichero de sonido" LOOP= n INFINITE> Incluiremos una nica vez esta etiqueta en el fichero que deseemos tenga msica de fondo, en el atributo 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 se ejecutar la pieza musical, podr indicarse un nmero o INFINITE que indicar de forma indefinida.

<IMG DYNSRC ...> Reproduccin de vdeo

Indice del manual de HTML

sonido en formato .wav en su pgina, este podr ser odo por todos aquellos que tengan un plug-in para este tipo de ficheros. Para que un fichero multimedia que es incluido en una pgina sea visible por el usuario debe cumplir dos condiciones: la primera es que posea el navegador de Netscape en su versin 2.0 y la segunda es que tenga el plug-in correspondiente que trata el fichero deseado. Por tanto se recomienda un uso moderado de los plug-ins utilizando ficheros que sean de formatos comunes y un uso complementario en una pgina, ya que muchos usuarios no podrn verlo. Es aconsejable incluir un enlace 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 instruccin que permite incluir cualquier tipo de archivo dentro de un documentos HTML, pero se ver en el prximo apartado.

<EMBED> Insertar Ficheros

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

Indice del manual de HTML

Introduccin
Permite la representacin de datos por filas y columnas, en forma tabular. La definicin es muy flexible indicando solo los elementos que forman cada fila y columna, calculndose de forma automtica el tamao que deben tener las celdas. En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes, enlaces, texto, listas, cabeceras, formularios, etc. No es necesario definir inicialmente el nmero de filas o columnas ya que estas se calculan segn se va definiendo la tabla. En el caso que una fila tenga ms columnas que otra, en las otras filas las columnas se representarn vacias, no siendo necesario que todas las filas sean iguales.

<TABLE> Definicin de la Tabla

Ejemplo de tabla 1
Puede presentar los siguientes atributos:
q

BORDER =n

Ejemplo de tabla 4 Ejemplo de tabla 5

CELLSPACING=n

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

Indice del manual de HTML

Indica el espacio que debe existir entre las distintas celdas de la tabla. Por defecto ser 2. Si se indica 0 no habr ningn 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 se indica 0 las celdas aparecern sin separacin.

Ejemplo de tabla 6
q

WIDTH=valor o porcentaje%:

Ejemplo de tabla 9
q

HEIGHT=valor o porcentaje%

<CAPTION> Titulo de la tabla

<TR> Fila de la tabla

Definir cada una de las filas de la tabla y especificar los parmetros que afectarn a todas las
http://www2.uca.es/manual-html/todoman.htm (56 de 85)30/08/2008 12:00:14 p.m.

Indice del manual de HTML

celdas de la fila. Por cada elemento TR que se incluya se crear una fila de la tabla. No es necesario indicar la etiqueta de cierre </TR>. En caso de tablas anidadas ser necesario incluir la etiqueta de cierre. <TR ALIGN= LEFT CENTER RIGHT VALIGN= TOP MIDDLE BOTTOM > Se podr especificar por defecto la alineacin que tendrn los elementos dentro de las celdas.
q

ALIGN = LEFT CENTER RIGHT

s s

LEFT: Alineacin a la izquierda de la celda. Este el valor que se toma por defecto RIGHT: Alineacin a la derecha. CENTER: Indicar centrado.

VALIGN = TOP MIDDLE BOTTOM:

Indicar la alineacin vertical del dato dentro de la celda. Se podr especificar donde se colocarn los datos dentro de la celda. Afectarn a toda la fila. Los valores que puede tomar son:
s s s

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

BGCOLOR:

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

Indice del manual de HTML

Ejemplo de tabla 3
Pueden presentar los siguientes atributos:
q

ALIGN:

Indica la alineacin horizontal del dato dentro de la celda, se especificar individualmente para cada una de las celdas. Su significado es igual que el expresado para la etiqueta TR.

Ejemplo de tabla 7
q

VALIGN:

Indicar la alineacin vertical del dato dentro de la celda. Se especifica individualmente para cada celda, 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 tamao de la tabla.
q

BGCOLOR:

Indicar el color de fondo que tendr la celda de la tabla. El color hay que indicarlo independientemente para cada una de las celdas de la columna. 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
q

ROWSPAN:

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

Indice del manual de HTML

Ejemplo de tabla 2
q

COLSPAN:

Indicar el nmero de columnas que ocupar la celda actual, obtendremos una celda que ocupa varias columnas. Igual que el anterior pero para el caso de las columnas.

Ejemplo de tabla 2
q

NOWRAP:

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>

Demostracin de TH, COLSPAN y ROWSPAN:

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

Indice del manual de HTML

Numeros Num 1 4 2 5 3 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>

Demostracin de Multiples Cabeceras:

Datos1 1 5 2 6 3 7 Datos2 4 8

Datos1.1 Datos1.2 Datos2.1 Datos2.2

Tabla sin Borde:

123

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

Indice del manual de HTML

456 <TABLE> <TR> <TD>1 <TD> 2 <TD> 3 <TR> <TD>4 <TD> 5 <TD> 6 </TABLE>

Tabla con Borde=15:

1 2 3 4 5 6

Ejemplos con CELLPADDING y CELLSPACING:

1 4 2 5 3 6

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

Indice del manual de HTML

Ejemplos de alineaciones ALIGN:

Cabecera de Titulo 1 Celda 1 Celda 4 Cabecera de Titulo 2 Celda 2 Celda 5 Celda 6 Cabecera de Titulo 3 Celda 3

Indice del manual de HTML

</TABLE>

Ejemplos de alineaciones verticales VALIGN:

Cabecera de Titulo 1 Celda 1 Celda 5 Celda 8 Celda 7 Celda 12 Celda 10 Celda 9 <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> Cabecera de Titulo 2 Celda 2 Cabecera de Titulo 3 Celda 3 Cabecera de Titulo 4 Celda 4

Ejemplos de colores de fondo de las celdas BGCOLOR:

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

Indice del manual de HTML

(Solo para el Netscape 3.0 e Internet Explorer) Cabecera de Titulo 1 Celda 1 Celda 4 Cabecera de Titulo 2 Celda 2 Celda 5 Cabecera de Titulo 3 Celda 3 Celda 6

Distintos tamaos de tablas:

WIDHT=10%

y por ltimo Esta es esta es la celda La la nmero dos celda 1 nmero 3 y por ltimo esta es Celda 1 dos la segunda 2 celda fila fila nmero 3 de la ltima fila

WIDHT=50%

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

Indice del manual de HTML

Esta es la celda nmero 1

La dos

y por ltimo esta es la celda nmero 3 y por ltimo esta es la celda nmero 3 de la ltima fila

Celda 1 segunda fila

dos 2 fila

WIDHT=75%
La dos dos 2 fila y por ltimo esta es la celda nmero 3 y por ltimo esta es la celda nmero 3 de la ltima fila

Esta es la celda nmero 1 Celda 1 segunda fila

WIDHT=100%
La dos y por ltimo esta es la celda nmero 3

Esta es la celda nmero 1 Celda 1 segunda fila

dos 2 fila y por ltimo esta es la celda nmero 3 de la ltima fila

5.12 - FORMULARIOS (FORM).

<FORM> Definicin de formularios

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

Indice del manual de HTML

<INPUT> Entrada bsica de datos

Indice del manual de HTML

siguiente: < INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = "Variable que toma el valor" VALUE = "Valor de Inicializacin" > El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se est definiendo, a continuacin se explicarn 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 el formulario junto con el valor que le asigno el usuario del formulario. El atributo VALUE suele especificar el valor de inicializacin, que ser el valor por defecto. A continuacin 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, nmeros, fechas o diversos datos que se puedan expresar en una lnea de texto. Se mostrar un recuadro que ocupa una lnea y la que ser posible especificar este texto. El formato de la instruccin es el siguiente: < INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial" SIZE="tamao" MAXLENGTH="longitud mxima" > El tamao de la ventana de introduccin de texto se fija con el atributo SIZE, que indica el tamao de la ventana en caracteres. Aqu solo se define la parte visible, pero el usuario podr introducir ms texto si lo desea. Para indicar el mximo nmero 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 y VALUE especifica el valor de inicializacin del campo. De todos los atributos solo ser obligatorio NAME, siendo el resto opcionales. En la entrada se podrn usar cualquier tipo de caracteres incluso los acentuados, en su formato normal.

Ejemplos
Inst. HTML Resul tado Explica cin Nombre: <INPUT TYPE=TEXT NAME=variable>

Nombre:
Ser una introduccin de texto bsica.

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

Indice del manual de HTML

Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin

Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicializacin">

Nombre: Texto de Inicializacin

Ahora definimos con SIZE un mayor tamao del recuadro y con MAXLENGHT definimos el nmero mximo de caracteres que se pueden introducir.

<INPUT TYPE=PASSWORD...> Palabras secretas

Ejemplo
Inst. HTML Resul tado Explica cin Password: <INPUT TYPE=PASSWORD NAME=variable VALUE="password">

Password:
El texto introducido no puede ser visto, pero si es posible saber el nmero de caracteres que se introducen.

<INPUT TYPE=CHECKBOX> Botones de seleccin

El checkbox es un botn que puede presentar dos estados activado o desactivado. El formato es el siguiente:
http://www2.uca.es/manual-html/todoman.htm (68 de 85)30/08/2008 12:00:15 p.m.

Indice del manual de HTML

< INPUT TYPE=CHECKBOX NAME="variable" CHECKED> Se requiere el atributo NAME. Los valores que tomar la variable sern on off, dependiendo de su estado. Si el botn estaba activado cuando se envan los datos del formulario se enviaran el nombre de la variable y el valor que indique su estado. Si se incluye el atributo CHECKED el botn se encontrar activado en la inicializacin. Si se indica el atributo VALUE,cuando se envian los datos con el botn activado se mandar la variable con el valor indicado y en caso contrario no se mandar ningn valor.

Ejemplo
Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin <INPUT TYPE=CHECKBOX NAME= variable> Opcin

Opcin
En este caso esta desactivado por defecto y su utilizar en caso de los valores on y off para definir su estado.

<INPUT TYPE=CHECKBOX NAME= variable CHECKED> Opcin

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

<INPUT TYPE=RADIO...> Seleccin entre mltiples opciones

Indice del manual de HTML

Resul tado

Opcin 1 Opcin 2 Opcin 3 Opcin 4

En este caso solo es posible seleccionar uno de los posibles valores, la opcin CHECKED indica cual es la opcin activa por defecto.

Explica cin

<INPUT TYPE=HIDDEN...> Parmetros ocultos

En este caso no se muestra ningn campo para la entrada de datos al usuario, pero el par variable valor especificado es enviado junto con el formulario. Se suele usar para transmitir informacin de estado control para enviar algn tipo de informacin 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

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

Indice del manual de HTML

Ejemplo
Inst. HTML Resul tado Explica cin < INPUT TYPE=SUBMIT VALUE="Enviar Datos" >

Enviar Datos
El texto indicado en VALUE es el que etiqueta el botn, al pulsar sobre l se enviarn los datos del formulario

<INPUT TYPE=IMAGE...> Botn de Envo grfico

Su funcionalidad es similar al botn de SUBMIT, se usa igualmente para enviar los datos de un formulario, pero en este caso se presenta una imagen como botn. Igualmente al pulsar sobre el botn se 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 tambin es pasado al programa interprete del formulario, de forma que la imagen igualmente podra ser un mapa sensible. Se pasarn dos parmetros x e y con las coordenadas del punto donde pulso, siendo el programa interprete el encargado de determinar la zona donde se puls, si se desea.

Ejemplo
Inst. HTML Resul tado Explica cin <INPUT TYPE=IMAGE SRC="boton.gif">

Se muestra la imagen como botn de envo, sustituyendo al botn de SUBMIT.

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

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

Indice del manual de HTML

El atributo VALUE especifica la etiqueta que tendr el botn.

<TEXTAREA> Texto en mltiples lneas

Ejemplo
Inst. HTML <TEXTAREA NAME=variable ROWS=10 COLS=54> Texto de Inicialización que puede incluir varias líneas. </TEXTAREA>

Texto de Inicializacin que puede incluir varias lneas.

Resul tado

Explica cin

Se puede especificar el tamao de la ventana para introducir datos e indicar un texto de inicializacin, aunque este ser opcional.

<SELECT> Eleccin entre mltiples opciones

Se usa para mens simple o mltiples. Define mens de tipo pop-up (men de barras) y ofrece una alternativa ms compacta al uso de botones RADIO o CHECKBOX. Su formato es el siguiente:

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

Indice del manual de HTML

<SELECT NAME="variable"> < OPTION SELECTED VALUE=valor1> Opcin Primera < OPTION VALUE=valor2> Opcin Segunda ... < OPTION VALUE=valorn> Opcin Ensima </SELECT> Si se desea que sea un men mltiple se deber incluir el atributo MULTIPLE en la etiqueta de SELECT, en este caso se mostrarn todas las opciones en forma de tabla, en el otro caso se mostrar la opcin activa y un botn para poder modificar esta opcin. En ambos casos solo podr seleccionarse una de las opciones. Cuando se enva el resultado del formulario la variables NAME tomar el valor de la opcin que este activa. La etiqueta OPTION que contenga el atributo SELECTED ser considerada la opcin por defecto, caso de no especificarse ninguna se considerar la primera de las opciones.

Ejemplos
<SELECT NAME="variable"> <OPTION VALUE=1> Opcin Primera <OPTION SELECTED VALUE=2> Opcin Segunda <OPTION VALUE=3> Opcin Tercera </SELECT>

Inst. HTML

Resul tado Explica cin

Inst. HTML

Resul tado

Opcin Primera Opcin Segunda Opcin Tercer

En este caso al ser mltiple se muestran todas las opciones posibles, de las que solo es posible seleccionar una.

Explica cin

7 - CGI (Common Gateway Interface), ejecucin de binarios.

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

Indice del manual de HTML

Variables de entorno
Para pasar datos el servidor al cgi-bin utiliza una serie de variables de entorno, que quedan definidas al ejecutar el script. Las variables de entorno ms interesantes son:

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

Indice del manual de HTML

REQUEST_METHOD

El mtodo 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

PATH_TRANSLATED

Una versin decodificada de PATH_INFO, obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo).
q

SCRIPT_NAME

Nombre por el que fue llamado el cgi-bin.

QUERY_STRING

REMOTE_HOST

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

Indice del manual de HTML

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

REMOTE_ADDR

Direccin IP del ordenador remoto que ejecuto el cgi-bin.

CONTENT_LENGTH

El nmero de caracteres enviados por el cliente al cgi-bin.

HTTP_USER_AGENT

El cliente de la WWW que ejecuta el cgi-bin, el formato general es: programa/versin libreria/versin El cgi-bin podra enviar un distinto cdigo HTML segn cada cliente.

Entrada de datos al cgi-bin

Para los formularios que utilizan el mtodo POST, la informacin es enviada al cgi-bin por la entrada estndar (stdin). El servidor enva 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 de final de fichero tras los datos enviados, por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados. CONTENT_TYPE suele contener el valor application/ x-www-form-urlencoded, que indica que se trata de informacin con codificacin URL. En esta codificacin como se vio antes los espacios se convierten en signos '+' y los caracteres especiales se codifican de la forma %xx, donde xx el cdigo ASCII en hexadecimal del carcter. Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario. Las variables del formulario se enviarn de la forma: variable1=valor1&variable2=valor2& ... &variablen=valorn

Salida de datos del cgi-bin

Indice del manual de HTML

Content-type:

Location:

Status:

8 - Documentos con Frames

Introduccin
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:
http://www2.uca.es/manual-html/todoman.htm (77 de 85)30/08/2008 12:00:15 p.m.

Indice del manual de HTML

<HTML> <HEAD> Definiciones de la cabecera </HEAD> <FRAMESET> Definicin de las frames que forman el documento y de los fichero que incluye cada una. </FRAMESET> <NOFRAMES>
http://www2.uca.es/manual-html/todoman.htm (78 de 85)30/08/2008 12:00:15 p.m.

Indice del manual de HTML

Instrucciones HTML que se mostrar en los navegadores que no soporten frames. </NOFRAMES> </HTML>
Dentro de la etiqueta NOFRAMES se podr incluir una explicacin de que el documento solo es visible con el navegadores que soporten frames, o bien incluir una versin del documento que se muestre sin necesidad de frames.

<FRAMESET ...> Definicin de las frames.

ROWS:

En valor absoluto, que indicar el tamao en puntos de la pantalla. En este caso si todas las frames se indican de este modo, los valores se ajustarn para que las frames ocupen la totalidad del espacio de la ventana del navegador, no guardando siempre la proporcin con la que se definen las frames. En tanto por ciento sobre el tamao de la ventana, en este caso si los porcentajes suman un valor distinto del 100%, se ajustarn para que coincidan con el tamao de la ventana. Se podr combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje. De forma relativa con el smbolo * que indica el tamao restante de la ventana. Si se indica una frame como 2* y otra como *, la primera ocupar dos tercios del espacio restante y la segunda un tercio del espacio restante. Se puede combinar con las definiciones anteriores.

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

Indice del manual de HTML

Ejemplo Inst. HTML Muestra

COLS:

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

Ejemplo Inst. HTML Muestra

En este caso se definen las frames de forma vertical, guardando la misma proporcin que en el caso anterior.

Indice del manual de HTML

Ejemplo Inst. HTML

Muestra

<FRAME ...> Definicin de cada una de las frames

URL:

Como su nombre indica, especifica el documento HTML o fichero que se mostrar en la frame definida. Si no se especifica documento alguno se mostrar la frame vaca.
q

NAME:

Indica el nombre de la frame, este nombre es importante ya que se usar en los hiperenlaces
http://www2.uca.es/manual-html/todoman.htm (81 de 85)30/08/2008 12:00:15 p.m.

Indice del manual de HTML

(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 cambiarlo mediante hiperenlaces.
q

MARGINWIDTH:

Indica el ancho del margen, este atributo es opcional y normalmente el navegador ajusta todos los mrgenes al mismo tamao, 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 mrgenes. Lo normal es no especificar ninguno de estos dos atributos.
q

SCROLLING:

NORESIZE:

Indica que la frame no debe ser variada de tamao por el usuario, se puede variar el tamao de una frame situando el cursor del ratn encima y arrastrando en la direccin deseada. Con este atributo el usuario no podr cambiar el tamao de la frame en ningn caso. Por defecto todas las frames pueden variar su tamao.

TARGET: Atributo para indicar la frame de destino

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

Indice del manual de HTML

En los hiperenlaces indicar la frames donde se mostrar el documento, una vez que se siga el hiperenlace. <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:

FORM:

Indicar la frame de destino del resultado del formulario. <FORM ACTION="url" TARGET="frame"> Existen unos valores especiales de TARGET que nos permitirn definir destinos distintos a las frames definidas. Estos valores son los siguientes:
q

TARGET="_blank": Indica que se muestre en una nueva ventana vaca, para seguir el enlace
se lanza otra ventana distinta del navegador.

TARGET="_self":Se mostrar en la misma ventana o frame que lo referencia, se puede usar

para modificar el valor dado por BASE.

TARGET="_parent": Se muestra en la frame o estructura de frames que llam al documento

actual.

TARGET="_top": Indica que se muestre en la ventana completa, eliminando la estructura de

frames que tenga la ventana.

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

Indice del manual de HTML

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

Indice del manual de HTML

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

Gestin de la cuenta Departamental

1 - Gestin de la cuenta Departamental.

Introduccin
En este apartado se expondr la formas en las que se puede gestionar la inclusin de documentos HTML en un espacio web departamental. Para la gestin dispondr de una cuenta en el servidor web departamental que en nuestro caso es www2.uca.es. Esta cuenta ser exclusiva para su gestin. En el directorio raz de esta cuenta existir un directorio llamado html, todos los ficheros que incluya en este directorio sern accesible desde el servidor 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 imgenes que se inserten en sus pginas y cualquier otro fichero que se referencie desde sus pginas html. No se podrn incluir otro tipo de ficheros que no sean utilizables desde su espacio Web, tenga en cuenta que su espacio de disco es limitado (5 MegaBytes) y por tanto no debera malgastarlo incluyendo ficheros no necesarios. Los nombres de los ficheros pueden tan largos como desee (dentro de un lmite), pudiendo utilizar para ellos tanto las maysculas como las minsculas, que se diferenciarn al referenciar el fichero. En el sistema operativo UNIX en los nombres de fichero s se distinguen, y por tanto sern tenidas en cuenta por el servidor. Un aspecto importante es la extensin de los ficheros, esta extensin no puede ser arbitraria, deber cumplir unos requisitos para la correcta identificacin del documento. El servidor de la WWW indica el tipo de fichero al navegador segn la extensin de este, por tanto cualquier fichero que en el servidor tenga la extensin .html al accederlo el servidor indicar que se trata de un fichero escrito en lenguaje HTML, si la extensin es desconocida para el servidor lo enviar como fichero texto. Las extensiones ms comunes sern: para documentos hipertexto (HTML) el fichero debe tener la extensin .htm, bien, .html. Las imgenes, segn cada caso deben tener la extensin .gif para el formato GIF, y .jpg .jpeg para imgenes en formato JPEG, ficheros de mapas de imgenes sensibles .map. Para los programas que se ejecutan en el servidor (CGI_BIN) la extensin .cgi

Estructura de directorios
http://www2.uca.es/manual-html/gestcuen.htm (1 de 6)30/08/2008 12:00:19 p.m.

Gestin de la cuenta Departamental

A partir del directorio html de su cuenta puede crear la estructura de directorios que desee. Se recomienda que se cree un directorio por cada seccin que tenga su espacio Web, siempre que esta conste de varios ficheros html o de imgenes. De esta forma ser ms compacto el acceso a la informacin, ya que la URL puede usarse para identificar la seccin y la gestin al poder aadir y borrar de forma sencilla secciones. Si crea todos los ficheros en el directorio principal, le ser ms complejo identificar los ficheros obsoletos y a que seccin corresponde cada fichero. Se recomienda la creacin de un directorio de imgenes, uno de iconos y otro de fondos, aunque si no son muchos se pueden incluir todos en el directorio de imgenes. Estos elementos podrn referenciarse fcilmente y de manera uniforme en todos los documentos de su espacio Web La estructura bsica de su espacio web podra ser:

En el directorio de imgenes se incluirn todas las imgenes de mbito general, por ejemplo logotipo de su departamento, iconos de uso frecuente y las imgenes usadas por documentos del directorio principal. En el directorio de la seccin, o en su directorio de imgenes, se podrn incluir las imgenes que sean exclusivas de esa seccin. De esta forma se conseguir una mayor ordenacin de su espacio web y las referencias a las imgenes podran ser ms consistentes desde cualquier directorio de su espacio web.

http://www2.uca.es/manual-html/gestcuen.htm (2 de 6)30/08/2008 12:00:19 p.m.

Gestin de la cuenta Departamental

El nombre que se utilice como nombre de directorio ser el que se utilice en la URL de la seccin, por lo que debe ser descriptivo de su contenido.

Ejemplos URL Definicin

Nos encontramos en el fichero default.htm del directorio html

<A HREF= "imagenes/imagen.gif"> Accederamos al fichero imagen.gif que se encuentra en el directorio de imgenes que est a partir del directorio html. Al comenzar por / accederamos al directorio de imgenes del servidor, y no al de nuestro espacio Web. Accedemos al fichero de indice.htm de la seccion1

<A HREF= "/imagenes/logouca.gif"> <A HREF= "seccion1/indice.htm">

Nos encontramos en el fichero indice.htm del directorio seccion1

<A HREF= "fichero.htm"> Se referencia el documento fichero.htm que se encuentra en el directorio seccion1 El fichero indicado sera la imagen imagen.gif que se encontrara en el directorio de imgenes a partir del directorio html. Al igual que antes al comenzar por / accederamos al directorio de imgenes del servidor, y no al de nuestro espacio Web.

<A HREF= "../imagenes/imagen. gif">

<A HREF= "/imagenes/logouca.gif">

Nos encontramos en el fichero seccion2.htm del directorio seccion2

<A HREF= "imagenes/imgsec3.gif"> En este caso la imagen se encontrara en el directorio de imagenes del directorio seccion2.

Existe un medio que permitir la creacin de secciones en su espacio web gestionadas por otras personas de su departamento, el modo de crearlas se especifica en la siguiente pregunta de la FAQ: Creacin secciones dentro del espacio Web de un departamento que puedan ser gestionadas por distintas personas.. De esta forma podr descargar parte de la gestin de su espacio web en otras personas que deseen incluir informacin en formato electrnico.

Imagenes e Iconos
No se deben duplicar iconos ni imgenes ya existentes en el servidor, existen unos directorios de iconos, fondos e imagenes que contienen gran cantidad de estos elementos, si usa alguno de estos no tiene que copiarlo en su espacio Web sino simplemente referenciarlo. Con esto se ahorrar espacio en
http://www2.uca.es/manual-html/gestcuen.htm (3 de 6)30/08/2008 12:00:19 p.m.

Gestin de la cuenta Departamental

disco. Se aceptarn aportaciones de iconos e imgenes para aumentar el fondo comn. Si desee compartir una imagen, un icono, una barra o un fondo podr enviarnoslo a la direccin de correo electrnico [email protected] y ser incluida en los directorios comunes. Los directorios existentes en la actualidad son:

http://www2.uca.es/imagenes http://www2.uca.es/iconos http://www2.uca.es/iconos1 http://www2.uca.es/iconos2 http://www2.uca.es/barras http://www2.uca.es/barras1 http://www2.uca.es/fondos http://www2.uca.es/fondos1 http://www2.uca.es/fondos2 http://www2.uca.es/fondos3

q q q

q q

q q q q

Fichero por defecto (default.htm)

Existe un fichero especial que es el default.htm default.html que es el fichero de presentacin. Cuando alguien referencia la URL de un directorio sin indicar un fichero concreto y no existe este fichero obtiene una lista de los ficheros que forman el directorio, de esta forma podran ver todos los ficheros que forman el directorio y acceder de forma no ordenada a sus fichero html. Para evitar esto bastar 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 se encuentran en el directorio html de su cuenta. Por tanto este ser el fichero de presentacin. 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 presentacin de 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/manual-html/gestcuen.htm (4 de 6)30/08/2008 12:00:19 p.m.

Gestin de la cuenta Departamental

El nombre del Departamento, servicio o vicerrectorado. La Indicacin "Universidad de Cdiz". La indicacin del nombre y/o la direccin de correo del Webmanager y un buzn para recibir sugerencias, por ejemplo con el fichero comenta.htm. Un enlace a la pgina principal de la UCA, con un logotipo comn mediante la siguiente instruccin:

Inclusin de informacin
Hasta ahora hemos hablado de la estructura que debe tener su espacio Web y de los fichero que debe contener, pero no hemos hablado del modo en el que se puede introducir la informacin, que es el 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 informacin desde la cuenta de usuario del servidor. En este caso deber tener conocimiento sobre el sistema operativo UNIX y el uso de sus editores (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 informacin en su PC ordenador personal. En este caso crear los documentos en su PC verificndolo en su navegador de la WWW como fichero local. Una vez creado el documento, transferirlo por FTP a su cuenta de gestin del servidor. Con el programa de FTP se podr enviar los documentos HTML (en formato ascii) y de imgenes (en formato binario), crear subdirectorios y borrar ficheros. Esta segunda alternativa es la ms cmoda ya que le permite crear los documentos desde su ordenados personal, con su editor de HTML favorito. Una vez creado el documento enviarlo e inmediatamente quedara actualizado en el servidor. Sin necesidad de tener conocimiento del sistema operativo UNIX ni de sus editores.

http://www2.uca.es/manual-html/gestcuen.htm (5 de 6)30/08/2008 12:00:19 p.m.

Gestin de la cuenta Departamental

En su PC tiene que mantener la misma estructura de directorios que en el servidor para asegurar que mediante direcciones relativas todos los documentos se puedan enlazar perfectamente.

Uso del programa de FTP

http://www2.uca.es/manual-html/gestcuen.htm (6 de 6)30/08/2008 12:00:19 p.m.

Gestin de una cuenta Departamental por FTP

En este caso guardaremos una copia de los ficheros que se desea publicar en el servidor, los modificaremos en el PC y cuando queramos que las modificaciones tengan efecto los enviaremos por FTP al servidor. De esta forma podremos mantener una copia de los ficheros sobre los que podremos trabajar libremente, sin modificar directamente los que se publican en el servidor. En el PC podremos utilizar nuestro editor HTML favorito y utilizar el navegador de Netscape para verificar el documento en modo local. El programa que utilizaremos ser el programa cliente de FTP obtener y enviar ficheros desde el servidor. , este programa nos permitir

Al iniciar el programa nos mostrar una pantalla en la que es posible indicar la maquina y la cuenta a la que deseamos conectarnos. La pantalla que obtendramos sera la siguiente:

Lo primero que haremos ser crear una nueva seccin, para ello escribiremos un nuevo nombre en el apartado Profile Name, Indicaremos un nombre como el que est especificado, "Servidor Web Departamental", u otro que le ayude a identificar de que sesin de FTP se trata.
http://www2.uca.es/manual-html/gestftp.htm (1 de 4)30/08/2008 12:00:24 p.m.

Gestin de una cuenta Departamental por FTP

Una vez que le hemos dado un nuevo nombre, indicaremos los datos de la cuenta departamental a la que deseamos conectarnos, El aspecto deber ser similar al que se muestra en la imagen, como Host 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 el apartado de Password indicaremos el password de acceso a esta cuenta. En el apartado Local PC, podemos indicar el directorio donde estn almacenados los ficheros html del PC, por ejemplo: C:\WWW\HTML, que se quieren enviar al servidor. Una vez rellenados todos los datos pulsaremos el botn de grabar y ya no tendremos

que introducir los datos la prxima vez que nos conectemos. Esto solo hay que hacerlo la primera vez, las prximas bastar con buscar esta sesin dentro de Profile Name. Una vez introducidos todos los datos pulsaremos el botn 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
http://www2.uca.es/manual-html/gestftp.htm (2 de 4)30/08/2008 12:00:24 p.m.

Gestin de una cuenta Departamental por FTP

etiquetada con Local System es su PC en ella podr encontrar todos los directorio de su PC, y el la otra parte encontrar los directorios y ficheros del servidor. Cada una de las zonas est dividida en dos partes, arriba es la zona de los directorios y abajo es la zona de los ficheros. Por ltimo en la lnea de debajo se puede indicar el modo en que sern transferidos los ficheros que puede ser ASCII para ficheros 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 ratn en el directorio correspondiente, 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 imgenes del espacio Web. Luego en la zona del PC, Local System, iremos al directorio donde tenemos almacenados los ficheros que queremos enviar al servidor. Lo ideal sera tener una copia de la misma estructura que tienen los ficheros en el servidos en el PC, as ser ms fcil saber que fichero hay que enviar y se podr 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 creado este obtendremos del servidor los ficheros default.htm y comenta.htm. Con el programa de FTP se puede realizar una completa gestin de la cuenta, teniendo botones que 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

http://www2.uca.es/manual-html/gestftp.htm (3 de 4)30/08/2008 12:00:24 p.m.

Gestin de una cuenta Departamental por FTP

Muestra Informacin de todos los ficheros: Muestra una informacin 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 ratn y luego pulsaremos el botn de envo: para obtener un fichero del servidor haremos lo contrario, marcaremos un fichero del servidor y pulsaremos el botn de recepcin . ,

Ser posible marcar ms de un fichero y especificar un filtro para que solo se muestren los ficheros de un solo tipo. Entre la zona de directorios y ficheros existe un recuadro en el que es posible indicar el filtro de mostrado de ficheros, si aqu indicamos *.htm, solo se mostrarn los ficheros de esta extensin. Para seleccionar muchos ficheros bastar con marcar el primero pulsando una vez con el ratn sobre l, y arrastrar el cursor mientras se pulsa, de esta forma todos los ficheros por los que pase el cursor del ratn quedarn seleccionados.

http://www2.uca.es/manual-html/gestftp.htm (4 de 4)30/08/2008 12:00:24 p.m.

FAQ de la gestin 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 instruccin HTML, me aparece el texto de la instruccin en vez de realizar la instruccin HTML que representa. 3. Incluyo una instruccin HTML con varios atributos, pero no realizan el efecto que deseo, Por qu?. 4. Modifico una pgina y no se muestran los cambios. 5. Me gusta mucho una pgina, como podra ver su cdigo HTML, y obtener sus imgenes. 6. Que formatos grficos 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 gestin de un espacio Web departamental.

1. 2. 3. 4. Como se puede incluir novedades en la pgina principal del UCA. Introduccin de un contador en una pgina HTML. Como puedo dar publicidad a mis pginas HTML. Creacin secciones dentro del espacio Web de un departamento que puedan ser gestionadas por distintas personas. 5. Como crear pginas HTML que solo puedan ser vistas desde determinadas maquinas o dominios. 6. Como crear pginas HTML que solo puedan ser vistas por determinadas personas.

Realizada por el: Servicio de Infraestructura Informtica Versin: 1.0 Ultima Modificacin: 14 de Junio de 1996 URL: http://www2.uca.es/FAQ-www/faq.html Comentarios: [email protected]

http://www2.uca.es/FAQ-www/faq.html30/08/2008 12:00:25 p.m.

FAQ: Como crear un GIF Animado

FAQ: Gestin 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 o superior. 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 imgenes que se van mostrando de forma sucesiva, formando de esta forma una animacin. Se puede seleccionar si se desea que realice un bucle o solo se muestre una unica vez la animacin. Existe un programa que permite la creacin de GIF Animados llamado GIF Construction Set. A continuacin explicaremos como crear una imgen animada con este programa: Para crear la imgen anterior del perro corriendo tenemos que crear un nuevo GIF, en el men File seleccionamos la opcin New y obtendremos lo siguiente:

Aqui se definir el tamao del GIF, por defecto esta especificado en 640x480, pulsando dos veces con el ratn podemos cambiar el tamao 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.

FAQ: Como crear un GIF Animado

Estableceremos el tamao en 397x35. Aqui se especificar igualmente el color de fondo de alguno de los de la paleta. Ninguna de las imagenes que formen la animacin deber ser mayor que estos valores, ya que en ese caso no se mostrar la imgen completa. Luego incliremos un elemento Loop de la forma Insertar Loop y con

este modulo se ejecutar un bucle sucesivo de animacin, s se desea que la animacin solo se ejecute una vez no deber incluir este mdulo. El Netscape no interpreta el parmetro Iterations, cuando se incluye un elemento LOOP se ejecutar la animacin de forma indefinida. A continuacin incluiremos cada una de las imagenes que formarn la animacin, cada una ir acompaada de un mdulo de control, por tanto para aadir cada una de las imgenes haremos los siguiente: 1.- Incluiremos un modulo de control de la forma Insertar Control , si

pulsamos dos veces sobre el mdulo de control obtendremos la siguiente pantalla:

http://www2.uca.es/FAQ-www/animaGIF.html (2 de 7)30/08/2008 12:00:34 p.m.

FAQ: Como crear un GIF Animado

Donde indicaremos el retardo de la animacin, el tiempo en el que se mantendr fija la visualizacin de la imgen, ser el parametro expresado en Delay y se expresa en threads por segundo. Cuanto mayor sea su valor ms lenta ser la animacin. S queremos que la imgen tenga un fondo transparente deberemos marcar la opcin Color Transparente , y posteriormente seleccionamos el color que se debe hacer transparente en la imgen a la que corresponde este bloque de control. Habr que hacer transparente por este mtodo a todas las imgenes que forman la animacin de forma individual. Cuando utilicemos una imgen transparente deberemos indicar en la opcin Remove by: la opcin background , y de esta forma la imgen se sustituir por el fondo

antes de dibujar la nueva imgen. Si no indicaramos esta opcin las imgenes se dibujaran una sobre la otra creando un nulo efecto de animacin, aunque podra 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 que seleccione la opcin Use this image as the global palette, en las siguientes imgenes seleccione la opcin Dither this image to the global palette. De esta forma todas las imgenes utilizarn la misma paleta, la de la primera imgen, y la animacin se mostrar de forma correcta.

http://www2.uca.es/FAQ-www/animaGIF.html (3 de 7)30/08/2008 12:00:34 p.m.

FAQ: Como crear un GIF Animado

Una vez creada la imgen se incluir un modulo de IMAGE, si pulsamos dos veces con el ratn sobre l podremos editar la imagen de la forma:

http://www2.uca.es/FAQ-www/animaGIF.html (4 de 7)30/08/2008 12:00:34 p.m.

FAQ: Como crear un GIF Animado

Para formar la animacin deseada, debemos crear un modulo de CONTROL indicando el tiempo que permanecer imagen y un modulo IMAGE para cada una de las imgenes que forman la animacin, para formar la animacin anterior del perro se necesitan las siguientes imgenes:

http://www2.uca.es/FAQ-www/animaGIF.html (5 de 7)30/08/2008 12:00:34 p.m.

FAQ: Como crear un GIF Animado

Quedando de la siguiente manera el GIF Animado creado:

http://www2.uca.es/FAQ-www/animaGIF.html (6 de 7)30/08/2008 12:00:34 p.m.

FAQ: Como crear un GIF Animado

http://www2.uca.es/FAQ-www/animaGIF.html (7 de 7)30/08/2008 12:00:34 p.m.

Software de HTML

Software y herramientas para la creacin de documentos

HTML
Paquete Bsico para la Creacin de documentos HTML.
Versin: Windows 3.1 Descripcin:
Incluye un editor de HTML (HTML Assistant Pro 2.0) , Un editor de colores (CMP) y Lview Pro , Un creador de mapas sensibles (mapedit) para el tratamiento de imgenes.

Tamao:1470303 Fichero: paqwww.exe

Paquete Bsico para la Creacin de documentos HTML para Windows 95.

Versin: Windows 95 Descripcin:
Incluye un editor de HTML (DerekWare HTML) , Un editor de colores (CMP) , Un creador de mapas sensibles (Map this!) para el tratamiento de imgenes.

Tamao:2166981 Fichero: paqwww95.exe

y Lview Pro

DerekWare HTML para Windows 95.

Versin: Windows 95 Descripcin:
Editor de HTML para Windows 95 muy sencillo de usar y con muchas opciones.

Tamao:732934

Fichero: dwhtml.exe

Software para el tratamiento de imgenes Lview Pro 16.

Versin: Windows 3.1 Descripcin:
Utilidad para la conversin entre diversos formatos de imgenes y creacin de imgenes GIF entrelazadas y con fondo transparente.

Tamao:390638 Fichero: lviewpro.exe

http://www2.uca.es/taller-html/softw-html.html (1 de 3)30/08/2008 12:00:38 p.m.

Software de HTML

GIF Construction Set para Windows 3.1.

Versin: Windows 3.1 Descripcin:
Permite crear GIF Animados.

Tamao:566189

Fichero: gifcon.exe

GIF Construction Set para Windows 95.

Versin: Windows 95 Descripcin:
Permite crear GIF Animados.

Tamao:552603

Fichero: gifcon32.exe

Paint Shop Pro 32 bits.

Versin: Windows 95 Descripcin:
Completa utilidad para el retoque de imagnes. Trabaja con gran cantidad de formatos de imgenes. Comparable con el Adobe Photoshop

Tamao:2334379 Fichero: psp32.exe

Map This!
Versin: Windows 95 Tamao:831695 Fichero: mapthis.exe Descripcin: Programa para la creacin de imgenes sensibles, para windows 95.

Asistente para el MS Word 7.

Versin: Windows 95 Descripcin:
Permite crear documentos HTML con el MS Word 7, funcionando como un editor WYSIWYG.

Tamao:1192960

Fichero: wrdia20z.exe

Asistente para el MS Power Point 7.

Versin: Windows 95 Descripcin:
Permite crear documentos HTML con el MS Power Point 7, puede ver el documento de explicacin.

Tamao:253440 Fichero: ia4ppt95.exe

Libreria de Referencia para HTML.

http://www2.uca.es/taller-html/softw-html.html (2 de 3)30/08/2008 12:00:38 p.m.

Software de HTML

Versin: Windows 3.1 Descripcin:

Tamao:213371 Fichero: htmllib.zip

Fichero de ayuda para windows, que explica de forma extensa el uso de todas las etiquetas de HTML (en ingls).

http://www2.uca.es/taller-html/softw-html.html (3 de 3)30/08/2008 12:00:38 p.m.

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.

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

PULSADO EL BOTON 2

http://www2.uca.es/manual-html/prueba/boton2.htm30/08/2008 12:00:39 p.m.

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

PULSADO EL BOTON 1

http://www2.uca.es/manual-html/prueba/boton1.htm30/08/2008 12:00:39 p.m.

FAQ:Creacin secciones dentro del espacio Web de un departamento que puedan ser gestionadas por distintas personas

FAQ: Gestin de un espacio Web Departamental

Creacin secciones dentro del espacio Web de un departamento que puedan ser gestionadas por distintas personas

Cuando alguin de su departamento desea publicar de forma electrnica un documento o dar publicidad a su actividad cientifica, necesariamente tendr que hablar con el gestor del espacio Web Departamental y coordinarse con l. Esto puede crear diversos problemas ya que tendran que conocer el password del departamento muchas personas y podran modificarse los datos mutuamente. Para solucionar esto y permitir que diversas personas de su departamento puedan publicar de forma electrnica documentos, les ofrecemos la siguiente solucin. La persona deber tener una cuenta en la maquina que actua como servidor (merlin), en su directorio raiz crear un directorio llamado html y le dar permiso para que pueda ser leido por todo el mundo, para que pueda ser accesible por el servidor, su directorio tambin debe poder ser accedido por todos los usuarios. El directorio podr ser leido pero no modificado por todos los usuarios, ya que se incluirn documentos de dominio pblico. 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, el directorio html de su cuenta departamental. Crear un directorio que se enlace con el directorio de la persona que desea crear la seccin. 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:Creacin 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 seccin y seccion es el nombre que tendr la seccin. La URL que tendr la seccin ser la de su estamento aadiendole el nombre de seccin dado anteriormente. Como nombre de la seccin no debe usar el nombre de la persona que la gestiona, sino deber indicar un texto explicativo de su contenido, ya que este nombre ser el que se utilice para referenciar la URL de las pginas que se incluyan. El gestor del espacio Web Departamental ser el responsable de la informacin que se incluya en cada una de las secciones, siendo el responsable del cumplimiento de la normativa que regula este servicio. En el caso que no se incluyan los contenidos deseados en una seccin podr inhabilitarla del siguiente modo: 12:15 merlin> rm seccion Desde el directorio donde fue creada la seccin. Y de esta forma la seccin dejara de ser accesible desde el servidor Web. Esto no se entiende como la creacin de pginas personales, ya que la informacin que podrn aadir deber estar relacionado con la actividad del departamento, o con algn trabajo de investigacin o inters que este realizando. La persona que gestione esa porcin del espacio Web departamental deber cumplir la normativa, y por tanto deber ser informado de ello. La responsabilidad de la informacin incluida ser del departamento o servicio. Tenga en cuenta que toda la informacin que se incluya en estas secciones estanrn asociadas en la URL al nombre del departamento, por tanto se recomienda que la informacin tenga relacin con la actividad de este. Estar prohibido la inclusin de informacin de tipo: comercial, pornogrfica, ocio, etc.

http://www2.uca.es/FAQ-www/secciones.html (2 de 2)30/08/2008 12:00:42 p.m.

Directorio de Imgenes

Directorio de Imagenes

q q q q q

<img src="/imagenes/escuduca1.gif"> 283x437 <img src="/imagenes/escuduca2.gif"> 259x400 <img src="/imagenes/escuduca3.gif"> 194x300 <img src="/imagenes/escuduca4.gif"> 129x200 <img src="/imagenes/escuduca5.gif"> 65x100

q q

<img src="/imagenes/logouca.gif"> 560x250 <img src="/imagenes/logouca1.gif"> 280x125

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

http://www2.uca.es/imagenes/ (1 de 2)30/08/2008 12:00:46 p.m.

Directorio de Imgenes

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

Directorio de Iconos

Directorio de Iconos
<IMG SRC = "/ iconos/arrow.gif "> <IMG SRC = "/ iconos/atomo.gif "> <IMG SRC = "/iconos/ bolaamar.gif ">

<IMG SRC = "/ iconos/bolaroja. gif ">

<IMG SRC = "/iconos/ bolarosa.gif ">

<IMG SRC = "/iconos/ bolaverd.gif ">

<IMG SRC = "/ iconos/boton10. gif ">

<IMG SRC = "/ iconos/boton11. gif ">

<IMG SRC = "/iconos/boton12. gif ">

<IMG SRC = "/ iconos/boton15. gif ">

<IMG SRC = "/iconos/boton16. gif ">

<IMG SRC = "/ iconos/enobras. gif ">

http://www2.uca.es/iconos/30/08/2008 12:00:50 p.m.

También podría gustarte

Conceptos HTML y JavaScript Bloque 1 HTML
Aún no hay calificaciones
Conceptos HTML y JavaScript Bloque 1 HTML
18 páginas
Capitulo Del o Al 7
100% (2)
Capitulo Del o Al 7
84 páginas
HTML, XML y CSS
100% (4)
HTML, XML y CSS
79 páginas
Arquitectura y Estructura de Una Página Web Actividad Semana 2
Aún no hay calificaciones
Arquitectura y Estructura de Una Página Web Actividad Semana 2
7 páginas
Actividad Tarea No.1 Inf-435
Aún no hay calificaciones
Actividad Tarea No.1 Inf-435
25 páginas
Etiquetas HTML
Aún no hay calificaciones
Etiquetas HTML
12 páginas
2 Estructura Básica de Un Documento HTML
Aún no hay calificaciones
2 Estructura Básica de Un Documento HTML
23 páginas
CSID2324 Seminario 1 HTML-CSS
Aún no hay calificaciones
CSID2324 Seminario 1 HTML-CSS
49 páginas
HTML5 1
Aún no hay calificaciones
HTML5 1
15 páginas
Lenguaje de Marcas y Sistemas
Aún no hay calificaciones
Lenguaje de Marcas y Sistemas
17 páginas
Laboratorio 7
Aún no hay calificaciones
Laboratorio 7
5 páginas
LM UT2 HTML Basico
Aún no hay calificaciones
LM UT2 HTML Basico
17 páginas
Libro de Texto de Tecnologias Web PDF
Aún no hay calificaciones
Libro de Texto de Tecnologias Web PDF
119 páginas
Programación iii 6to. perito contador
Aún no hay calificaciones
Programación iii 6to. perito contador
174 páginas
BII-PB-Tema 9-Lenguajes de Marca o Etiqueta
Aún no hay calificaciones
BII-PB-Tema 9-Lenguajes de Marca o Etiqueta
12 páginas
Actividad2 - Desarrollo de Pag Web Sem 2
Aún no hay calificaciones
Actividad2 - Desarrollo de Pag Web Sem 2
7 páginas
HTML
Aún no hay calificaciones
HTML
9 páginas
Intro HTML PDF
Aún no hay calificaciones
Intro HTML PDF
53 páginas
U3 - Aplicaciones Web
Aún no hay calificaciones
U3 - Aplicaciones Web
8 páginas
Manual Instructivo de HTML
Aún no hay calificaciones
Manual Instructivo de HTML
56 páginas
HTML Basico Presentacion
Aún no hay calificaciones
HTML Basico Presentacion
14 páginas
Manual HTML PDF
Aún no hay calificaciones
Manual HTML PDF
31 páginas
Lenguaje de Marcas Multimedia
Aún no hay calificaciones
Lenguaje de Marcas Multimedia
34 páginas
Investigacion HTML
Aún no hay calificaciones
Investigacion HTML
12 páginas
01 - Unidad 1-1-HTML
Aún no hay calificaciones
01 - Unidad 1-1-HTML
63 páginas
Ejemplos y Etiquetas Básicas de HTML
Aún no hay calificaciones
Ejemplos y Etiquetas Básicas de HTML
4 páginas
Tema2 - Lenguajes para La Visualización de Información
Aún no hay calificaciones
Tema2 - Lenguajes para La Visualización de Información
142 páginas
Lenguaje de Marcas Resumen
100% (1)
Lenguaje de Marcas Resumen
11 páginas
Guia de Aprendizaje 2
Aún no hay calificaciones
Guia de Aprendizaje 2
10 páginas
Tema2 HTML
Aún no hay calificaciones
Tema2 HTML
24 páginas
Computacion
Aún no hay calificaciones
Computacion
32 páginas
Diseño Web
Aún no hay calificaciones
Diseño Web
20 páginas
Computacion en El Cliente Web
Aún no hay calificaciones
Computacion en El Cliente Web
29 páginas
Instituto San Andrés-Introducción al Diseño Web MODULO II - 2024
Aún no hay calificaciones
Instituto San Andrés-Introducción al Diseño Web MODULO II - 2024
14 páginas
HTML 141125204454 Conversion Gate01
Aún no hay calificaciones
HTML 141125204454 Conversion Gate01
67 páginas
HTML 5 - CSS 3
Aún no hay calificaciones
HTML 5 - CSS 3
50 páginas
Lab Programacion Web Practica01
Aún no hay calificaciones
Lab Programacion Web Practica01
11 páginas
HTML: Etiquetas
100% (1)
HTML: Etiquetas
48 páginas
Basico-HTML
Aún no hay calificaciones
Basico-HTML
15 páginas
Temario LM
Aún no hay calificaciones
Temario LM
8 páginas
lenguaje HTML facilita la generación de páginas web
Aún no hay calificaciones
lenguaje HTML facilita la generación de páginas web
5 páginas
HTML
Aún no hay calificaciones
HTML
15 páginas
1.2.3 HTML5
Aún no hay calificaciones
1.2.3 HTML5
21 páginas
Introduccion HTML
Aún no hay calificaciones
Introduccion HTML
6 páginas
UT01 Introducción A Los Lenguajes de Marcas
Aún no hay calificaciones
UT01 Introducción A Los Lenguajes de Marcas
13 páginas
Gestiforma Modulo4 2
Aún no hay calificaciones
Gestiforma Modulo4 2
85 páginas
HTML5 (Parte1)
Aún no hay calificaciones
HTML5 (Parte1)
23 páginas
Diseño Web Con HTML5 + CSS
100% (2)
Diseño Web Con HTML5 + CSS
3 páginas
Tema2 Lenguajes de Marcas Css y Scripts Alumnos Primera Parte
100% (1)
Tema2 Lenguajes de Marcas Css y Scripts Alumnos Primera Parte
57 páginas
Introducción A Los Lenguajes de Marcas2
Aún no hay calificaciones
Introducción A Los Lenguajes de Marcas2
27 páginas
Introduccion Al Desarrollo Web
Aún no hay calificaciones
Introduccion Al Desarrollo Web
27 páginas
Tema 1
Aún no hay calificaciones
Tema 1
10 páginas
Construcción de Servicios Mocks y Maquetas Web Del Front-End. GA5 220501123 AA2 EV02.
Aún no hay calificaciones
Construcción de Servicios Mocks y Maquetas Web Del Front-End. GA5 220501123 AA2 EV02.
9 páginas
Leccion 1
Aún no hay calificaciones
Leccion 1
42 páginas
UT2. Utilización de Lenguajes de Marcas en Entornos Web
Aún no hay calificaciones
UT2. Utilización de Lenguajes de Marcas en Entornos Web
24 páginas
Página Web Básica HTML (Plantilla) - HTML. Páginas Web HTML y Hojas de Estilo CSS. Bartolomé Sintes Marco.
Aún no hay calificaciones
Página Web Básica HTML (Plantilla) - HTML. Páginas Web HTML y Hojas de Estilo CSS. Bartolomé Sintes Marco.
2 páginas
Tarea WTL No.2
Aún no hay calificaciones
Tarea WTL No.2
8 páginas
trabajo html 2025
Aún no hay calificaciones
trabajo html 2025
14 páginas
Presentación HTML
Aún no hay calificaciones
Presentación HTML
7 páginas
Elementos Basicos de HTML y CSS, Herramientas para Epubs
De Everand
Elementos Basicos de HTML y CSS, Herramientas para Epubs
Luis Brito
Aún no hay calificaciones
Creación de páginas web con el lenguaje de marcas. IFCD0110
De Everand
Creación de páginas web con el lenguaje de marcas. IFCD0110
Ramón Guerrero Pérez
Aún no hay calificaciones
ManualMagnoliaBibliotecas Junio2022
Aún no hay calificaciones
ManualMagnoliaBibliotecas Junio2022
79 páginas
Desarrollo de Un Libro Electrónico para El Aprendizaje de Patrones
Aún no hay calificaciones
Desarrollo de Un Libro Electrónico para El Aprendizaje de Patrones
85 páginas
Internet
Aún no hay calificaciones
Internet
32 páginas
Crear Un Hipervínculo
Aún no hay calificaciones
Crear Un Hipervínculo
4 páginas
Aprende HTML - Tutorial para Principiantes - IONOS
Aún no hay calificaciones
Aprende HTML - Tutorial para Principiantes - IONOS
1 página
Manual de Excel Avanzado 2013
100% (1)
Manual de Excel Avanzado 2013
45 páginas
Google Sites E-3
Aún no hay calificaciones
Google Sites E-3
2 páginas
HIPERTEXTO
Aún no hay calificaciones
HIPERTEXTO
5 páginas
Ga5 220501123 Aa2 Ev02
Aún no hay calificaciones
Ga5 220501123 Aa2 Ev02
8 páginas
Guía de Actividades y Rúbrica de Evaluación - Fase 5 - Propuesta Del Recurso Educativo Multimedia
Aún no hay calificaciones
Guía de Actividades y Rúbrica de Evaluación - Fase 5 - Propuesta Del Recurso Educativo Multimedia
8 páginas
Manual Plataforma Red Empleo
100% (1)
Manual Plataforma Red Empleo
37 páginas
Patrones de Diseño Web y Movil
Aún no hay calificaciones
Patrones de Diseño Web y Movil
176 páginas
3 Claroline Manual
Aún no hay calificaciones
3 Claroline Manual
62 páginas
4 Comentario de Los Antecedentes de La Biblia Ilustrada de Zondervan Deuteronomio
Aún no hay calificaciones
4 Comentario de Los Antecedentes de La Biblia Ilustrada de Zondervan Deuteronomio
363 páginas
Guia HTML
Aún no hay calificaciones
Guia HTML
5 páginas
TEMA 1 AOF, Power Point
Aún no hay calificaciones
TEMA 1 AOF, Power Point
11 páginas
Pandoc
Aún no hay calificaciones
Pandoc
22 páginas
Ejer Cici Os Javascript
Aún no hay calificaciones
Ejer Cici Os Javascript
26 páginas
Actividad 4 - 4to Grado de Primaria AB - Compartir y Trabajo Colaborativo
Aún no hay calificaciones
Actividad 4 - 4to Grado de Primaria AB - Compartir y Trabajo Colaborativo
8 páginas
Hipervinculos
Aún no hay calificaciones
Hipervinculos
3 páginas
Libro Nuevo-Lengua Española 2do
Aún no hay calificaciones
Libro Nuevo-Lengua Española 2do
208 páginas
Codigos HTML
Aún no hay calificaciones
Codigos HTML
29 páginas
Infografía Conceptos
Aún no hay calificaciones
Infografía Conceptos
1 página
04 Isc 154 Capitulo - II
Aún no hay calificaciones
04 Isc 154 Capitulo - II
34 páginas
SM3 1 AplicacionesWeb
Aún no hay calificaciones
SM3 1 AplicacionesWeb
16 páginas
1 Manual de HTML
Aún no hay calificaciones
1 Manual de HTML
50 páginas
Cuál Es El Proceso para Crear Un Documento Nuevo A Partir de Una Plantilla Predeterminada
Aún no hay calificaciones
Cuál Es El Proceso para Crear Un Documento Nuevo A Partir de Una Plantilla Predeterminada
12 páginas
Qué Es Un Hipervínculo
Aún no hay calificaciones
Qué Es Un Hipervínculo
4 páginas