Manual Extenxo HTML

2007
GUIA DETALLADA DE HTML
Elementos del lenguaje HTML
A las instrucciones que forman el lenguaje HTML las denominaremos

elementos. Se distinguen dos tipos de elementos:
Elementos llenos:
Estos elementos se forman mediante una marca de inicio y otra de final.
En HTML las marcas se demilitan con los signos < (inferior a) y >
(superior a). La marca de fin es idntica a la inicial pero con el aadido
de la barra inclinada, /, justo antes del nombre de la misma. Un texto
marcado tendr por tanto este aspecto:
...texto normal <marca> texto afectado por la marca </marca> resto
del texto...
Por ejemplo, para resaltar un texto en negrita, se emplea la marca <B>
de la siguiente forma:
...texto normal <B> texto en negrita </B> resto del texto...
Si en este ejemplo nos hubiesemos olvidado de la marca de final, el
resto de la pgina estara tambin en negrita.
Elementos vacos:
Estos elementos no requieren de la marca final, ya que normalmente no
producen un efecto sobre el texto en s, sino que definen separadores.
Por ejemplo el elemento <HR> que sirve para mostrar una lnea
horizontal en la pantalla, se escribir:
<HR>
Elementos con argumentos:
Algunos elementos tienen argumentos, los cuales son denominados
atributos. Cada uno de estos atributos podr tener un valor el cual ir
entre comillas, si es alfanumrico:
<marca
atributo1
atributo2=numerico
atributo3="alfanumetrico">
Ejemplos:
<HR NOSHADE>
<TABLE WIDTH=300> ... </TABLE>
<A HREF="/home/default.html"> ... </A>
SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES
Si se quieren utilizar caracteres como < o > en el texto normal, habr que
acudir a un artificio para que el browser no intente interpretarlos como marca.
Estos caracteres as como otros smbolos utilizados en el cdigo HTML se
reemplazarn por los siguientes grupos de caracteres :
El caracter < ser reemplazado por < el caracter > ser reemplazado
por >
Estructura de un documento HTML
Los documentos escritos en HTML empezarn por la marca <HTML> y

finalizarn con la marca </HTML>. Esta marca tan solo sirve como
identificacin del contenido del fichero para ciertos programas que
realizan cambios masivos en muchas pginas a la vez.
Los documentos escritos en HTML estn estructurados en dos partes
diferenciadas: la cabecera (<HEAD>) y el cuerpo (<BODY>).
Entre las marcas del elemento <HEAD> se podrn utilizar los siguientes
elementos:
<TITLE> para dar nombre al documento;
<META> para forzar a la pgina activa a ser cargada cada cierto
tiempo.
<BASE> para prefijar la direccin base de los documentos referenciados
mediante un URL relativo.
El fichero fuente de un documento HTML podr contener comentarios
explicativos que sern ignorados por el browser.
HEAD, TITLE, META, BASE

La cabecera se emplea para facilitar informacin acerca del documento y est
delimitada por <HEAD> prlogo </HEAD>. Normalmente esta informacin no
se ve cuando se navega por el documento.
Dentro de la cabecera se podr definir una breve descripcin que identifica el
documento mediante las marcas <TITLE> y </TITLE>. El uso de TITLE es
obligatorio ya que adems de un carcter informativo tiene otras razones
para existir:
Es el texto que el browser almacenar en el fichero hotlist o bookmark.
Es lo que se indica en la lista que aparece en la orden Go de la barra de menu.
Es lo que aparece en la esquina superior izquierda cuando se imprime el

documento.
En un contexto Xwindow, cuando se minimiza la ventana, el ttulo ser tomado
como nombre por el icono.
A continuacin se muestra un ejemplo del formato mnimo de la cabecera.
<HTML>
<HEAD>
<TITLE> Aqui va el nombre del documento </TITLE>
</HEAD>
Cuerpo del documento
...</HTML>
El ttulo del documento que est usted leyendo ahora mismo se encuentra en
la parte superior de esta ventana y es "Estructura de un documento HTML",
como usted mismo podr comprobar.
En la cabecera puede utilizarse tambin el elemento <META> que puede forzar
a que la pgina activa se cargue cada cierto tiempo (indicado en segundos
mediante el atributo CONTENT).
<HEAD>
<TITLE> Ttulo de la pgina </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10">
</HEAD>
Este ejemplo hace que el browser vuelva a cargar la pgina cada 10 segundos.
Tambin puede hacerse a un servidor, as:
<HEAD>
<TITLE> Ttulo de la pgina </TITLE>
<META
HTTP-EQUIV="Refresh"
CONTENT="10;
URL=http://miservidor/mipagina.htm">
</HEAD>
Esto ha de ser utilizado con mucha precaucin ya que podr sobrecargar el
servidor. Si el contenido de la pgina no va a cambiar es intil hacerlo, de
hecho, solo tendr utilidad en casos muy especiales.
El elemento <BASE HREF="URL"> define la informacin a prefijar a todo URL
incompleto en el documento. Por ejemplo, el URL relativo "/html/test.html"
corresponder de hecho a "URL/html/test.html".
BODY
El resto del documento, o sea, todo aquello que no pertenezca a la cabecera,
residir entre <BODY> y </BODY>.
Esta es la estructura mnima que debe poseer todo documento HTML:
<HTML>
<HEAD>
<TITLE>Estructura mnima de un documento HTML</TITLE>

</HEAD>
<BODY>
Documento
</BODY>
</HTML>
Comentarios
En el cdigo fuente de una pgina HTM, los comentarios se introducirn entre
las marcas: . Todo texto situado entre dichas marcas ser ignorado
por el browser, y por tanto no ser visible.
Ejemplo:

Separadores de bloques de texto
Para definir y separar bloques de texto se emplean una serie de marcas que
definen prrafos, texto preformateado o bloques con significado especial como
direcciones o citas.
Marcas de bloques:
Prrafos. <P>
Saltos de lnea. <BR>
Bloques tabulados. <BLOCKQUOTE>
Lnea horizontal. <HR>
Divisiones. <DIV>
Texto preformateado. <PRE>
Direcciones. <ADDRESS>
Centrado de bloques. <CENTER>
<P> se utiliza para separar prrafos. Dado que para el HTML todo el texto es
continuo, necesitamos algn mecanismo para indicar el principio y el fin de un
prrafo. Las marcas inicial y final son <P> y </P>.
Ejemplo:
<P>
Este texto est contenido dentro del primer prrafo,
as que lo denominaremos: parrafo 1, prrafo 1, prrafo 1,
prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1.
</P>
<P>
Este otro texto est contenido dentro del prrafo 2,
prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2,

prrafo 2, prrafo 2.
</P>
Esto dar como resultado:

Este texto est contenido dentro del primer prrafo, as que lo denominaremos: parrafo
1, prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1.
Este otro texto est contenido dentro del prrafo 2, prrafo 2, prrafo 2, prrafo 2,
prrafo 2, prrafo 2, prrafo 2, prrafo 2.
Este elemento admite el atributo ALIGN, que puede tomar uno de los
siguientes valores:
LEFT: Justifica el texto a la izquierda. (por defecto)
RIGHT: Justifica el texto a la derecha.
CENTER: El texto aparece centrado.
Ejemplo:
<P ALIGN=LEFT>
Texto justificado a la izquierda, texto justificado
a la izquierda, texto justificado a la izquierda,
texto justificado a la izquierda.
</P>
<P ALIGN=RIGHT>
Texto justificado a la derecha, texto justificado

a la derecha, texto justificado a la derecha,
texto justificado a la derecha.
</P>
<P ALIGN=CENTER>
Texto centrado, texto centrado, texto centrado,
texto centrado, texto centrado, texto centrado.
</P>
Texto justificado a la izquierda, texto justificado a la izquierda,
texto justificado a la izquierda, texto justificado a la izquierda.
Texto justificado a la derecha, texto justificado a la derecha,
texto justificado a la derecha, texto justificado a la derecha.
Texto centrado, texto centrado, texto centrado, texto centrado,
texto centrado, texto centrado.
BR
El elemento <BR> es vaco por lo que slo tiene marca inicial. Indica un salto
de lnea.
Ejemplo:
Texto 1, texto 1, texto 1, texto 1, texto 1, texto 1,
texto 1, texto 1, texto 1, texto 1, texto 1, texto 1. <BR>
Texto 2, texto 2, texto 2, texto 2, texto 2.
Con esto tendremos como resultado:
Texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1,
texto 1, texto 1, texto 1.
BLOCKQUOTE
El elemento <BLOCKQUOTE> sirve para representar prrafos tabulados, por la
izquierda y la derecha.
Ejemplo:
<BLOCKQUOTE>
Texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2,
texto 2, texto 2, texto 2,
texto 2, texto 2.
</BLOCKQUOTE>
El resultado ser:
Texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2,
texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2.
HR
Es un elemento vaco por lo que solo tiene marca inicial. Se emplea para
separar bloques de texto representando una lnea horizontal.
Se puede cambiar la apariencia de dicha lnea mediante los siguientes
atributos:
NOSHADE: Elimina el efecto de sombra de la lnea.
WIDTH: Permite definir la longitud de la lnea.
SIZE: Permite definir el grosor de la lnea.
Ejemplos:
<HR NOSHADE>
<HR WIDTH=250 SIZE=3>

<HR WIDTH=250 SIZE=6>
<HR NOSHADE WIDTH=400 SIZE=4>
PRE
El texto insertado entre las marcas <PRE> y </PRE> ser visualizado por el browser,
respetando el formateo tal como haya sido entrado en el fichero fuente HTML, o sea,
respetando los espacios y los saltos de carro.
Ejemplo:
<PRE>
Esto es un texto preformateado, por tanto se respetan los espacios
de
carro,como podrn observar.
</PRE>
y los saltos
El resultado ser:
Esto es un texto preformateado, por tanto se
respetan los espacios
y los saltos de
carro,
como podrn observar.
ADDRESS
El elemento <ADDRESS> se emplea para indicar que un texto representa una direccin
o una firma mostrndolo, generalmente, en letra cursiva. Es muy utilizado para indicar
toda la informacin respecto al autor del documento (direccin, telfono, e-mail,...).
Puede insertarse en cualquier lugar del documento; lo habitual en WWW es incluir esta
zona de direccin al final del documento.
Ejemplo:
<ADDRESS>
Tekin Tontu <BR>

77A Wellington Rd <BR>
Auburn 2144, NSW <BR>
Australia <BR>
e-mail tekin@cis.com <BR>
</ADDRESS>
Tekin Tontu
77A Wellington Rd
Auburn 2144, NSW
Australia
e-mail tekin@cis.com
CENTER
El elemento <CENTER> no es del HTML 2, sino del Netscape. Centra los
elementos situados entre sus marcas de apertura y cierre. Dichos elementos
podrn ser: bloques de texto, tablas, enlaces, imgenes, formularios, ...
Ejemplos:
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Tabla centrada</CAPTION>
<TR> <TD> Celda 1 <TD> Celda 2 </TR>
<TR> <TD> Celda 3 <TD> Celda 4 </TR>
</TABLE>
</CENTER>
Celda 1
Celda 2
Celda 3
Celda 4
Tabla centrada
<CENTER>
<IMG SRC="images/bgfun02.gif">
</CENTER>
<CENTER>
<P>Este ltimo ejemplo es un prrafo de texto centrado
mediante el elemento CENTER. Como pueden observar
cada una de las lneas del prrafo aparecer centrada.<P>
</CENTER>
Este ltimo ejemplo es un prrafo de texto centrado mediante el

elemento CENTER. Como pueden observar cada una de las lneas del
prrafo aparecer centrada.
Tipos de letra
En este apartado se indica cmo definir cabeceras mediante el elemento

<Hn>, y cmo modificar el tamao y color de algn grupo de caracteres
mediante el elemento <FONT> y sus atributos SIZE y COLOR.
Se puede tambin cambiar el tamao de letra por defecto (3) de toda la pgina
mediante el elemento vaco <BASEFONT>.
Finalmente se definen los estilos de caracteres disponibles distinguiendo entre
los estilos fsicos (negrita, cursiva, ...) y los lgicos (variables, citas,
ejemplos, ...).
Hn
El elemento <Hn> se utiliza fundamentalmente para escribir encabezamientos.

Asigna un tamao a los caracteres, dependiendo del valor n, el cual vara de 1
a 6. Los ms grandes tienen valor 1 y los ms pequeos valor 6. El texto entre
estas marcas se trata en negrita. Se inserta automticamente un salto de
prrafo, como puede comprobar en el siguiente ejemplo:
Ejemplo:
Texto antes de la cabecera. <H3>Cabecera</H3> Ms texto.
Esto dar el siguiente resultado:
Texto antes de la cabecera.
Cabecera
Ms texto.
En la siguiente tabla tiene una muestra del tamao de letra de cada una de las
cabeceras.
<H1>Cabecera H1</H1>
Cabecera H1
Cabecera H2
Cabecera H3
Cabecera H4
Cabecera H5
Cabecera H6
FONT
El elemento <FONT> permite definir el tamao, color y tipo de letra de un
conjunto de caracteres mediante los siguientes atributos:
El atributo SIZE: Regula el tamao de los caracteres (1 - 7).
El atributo COLOR: Especifica el color de los caracteres. Para consultar los
cdigos de los colores que le interesen puede consultar la tabla de cdigos de
colores.
El atributo FACE: permite definir el tipo de letra: Algerian, Arial, Times New
Roman, Courier, MS Serif, Symbol, System, Times New Roman, Windsort, ...
Este atributo es soportado tan solo por algunos browsers. (El Netscape no lo
reconoce)
Ejemplos:
Tamaos
1234567654321
(Ver cdigo fuente)
Colores
CO LO RE S DE L ET RA S
(Ver cdigo fuente)
<FONT SIZE=4 COLOR=#008000> Texto de color verde y tamao 4.<FONT>

Texto de color verde y tamao 4.
<FONT SIZE=6 COLOR=#FF0000> Texto de color rojo y tamao 6.<FONT>
Texto de color rojo y tamao 6.
El atributo SIZE del elemento <FONT> tiene la peculiaridad de poder indicar
el tamao de letra deseado en funcin del tamao definido por defecto para el
documento.
Ejemplo:
Este texto tiene el tamao por defecto (3). <BR>
<FONT SIZE=-1>Este texto es del tamao 3-1=2.</FONT> <BR>
10
<FONT SIZE=+2>Este texto es del tamao 3+2=5.</FONT>

Teniendo en cuenta que el valor por defecto definido inicialmente para un
documento es 3, el resultado ser:
Este texto tiene el tamao por defecto (3).
Este texto es del tamao 3-1=2.
Este texto es del tamao 3+2=5.
El valor del tamao por defecto puede ser modificado mediante el elemento
<BASEFONT> que se explica a continuacin.
BASEFONT
El elemento <BASEFONT> permite cambiar el tamao por defecto de toda la
pgina mediante el atributo SIZE.
Ejemplo:
<BASEFONT SIZE=5>
Con esta sentencia se conseguir que el tamao de letra por defecto del
documento pase a ser 5, hasta que aparezca otro elemento <BASEFONT> que
lo restaure o lo cambie por otro valor diferente.
Ejemplo de uso de <FONT> y <BASEFONT>:
Inicialmente el tamao por defecto es 3.<BR>
<FONT SIZE=+2>Por tanto este texto est en 3+2=5</FONT><BR>
<BASEFONT SIZE=6>
Ahora el tamao por defecto es 6.<BR>
<FONT SIZE=-2>Este texto est en 6-2=4</FONT><BR>
Inicialmente el tamao por defecto es 3.
Por tanto este texto est en 3+2=5
Ahora el tamao por defecto es 6.
Este texto est en 6-2=4
Estilos de Caracteres
Los siguientes elementos llenos permitirn definir distintos estilos para el
grupo de caracteres que se defina entre sus marcas de inicio y cierre.
Ejemplo:
<i> Texto en cursiva (itlica) </i>
Texto en cursiva (itlica)
Los estilos fsicos indican explcitamente el tipo de caracteres a utilizar.
Estilos fsicos
Negrita
Cursiva
Subrayado
Tachado
ASuperndice
BSubndice
Parpadeo
Mquina de
(Teletipo)
Texto grande
Texto pequeo
<b>
<i>
<u>
<strike>
<sup>
<sub>
<blink>
escribir
<tt>
<big>
<small>
11
Los estilos lgicos estn pensados para caracterizar determinadas

porciones de texto, pero su interpretacin es totalmente dependiente del
browser.
Estilos lgicos
nfasis
Texto destacado
Cdigo
Citas
Entrada por teclado
Ejemplos
Variables
<em>
<strong>
<code>
<cite>
<kbd>
<samp>
<var>
Se pueden anidar distintos estilos obteniendo resultados como estos:

Negrita y cursiva
<b><i> Negrita y cursiva </i></b>
Negrita y tachado
<b><strike> Negrita y tachado </strike></b>
Parpadeo, tachado y tipo cdigo
<blink><strike><code>
Parpadeo,tachado y tipo cdigo
</code></strike></blink>
Colores
Los colores se identifican mediante el nombre del color en ingls o bien

mediante un cdigo del tipo #rrggbb donde "rr" "gg" y "bb" son valores
hexadecimales comprendidos entre 00 y FF que especifican el grado de
saturacin
de
los
colores
rojo,
verde
y
azul.
Para buscar el cdigo de algn color determinado puede consultar la
tabla de cdigos de colores.
Ha de tener en cuenta que algunos colores no se vern o se vern mal si
la mquina no soporta 256 colores.
Color del texto
En este apartado se indicar cmo cambiar el color de un grupo definido
de caracteres en un texto mediante el elemento <FONT>.
12
Colores del entorno

Aqu se ver cmo cambiar los colores definidos por defecto para el
fondo, el texto normal y los enlaces mediante el elemento <BODY>.
Este elemento tambin permite utilizar una imagen como fondo de
pgina.
Color del texto

Se puede controlar el color del texto utilizando el elemento <FONT> con
el
atributo
COLOR.
A continuacin se muestran algunos ejemplos:
<FONT COLOR="red"> ROJO </FONT>
<FONT COLOR="blue"> AZUL </FONT>
<FONT COLOR="navy"> AZUL MARINO </FONT>
<FONT COLOR="green"> VERDE </FONT>
<FONT COLOR="olive"> OLIVA </FONT>
<FONT COLOR="yellow"> AMARILLO </FONT>
<FONT COLOR="lime"> LIMA </FONT>
<FONT COLOR="magenta"> MAGENTA </FONT>
<FONT COLOR="purple"> PURPURA </FONT>
<FONT COLOR="cyan"> CYAN </FONT>
<FONT COLOR="brown"> MARRON </FONT>
<FONT COLOR="black"> NEGRO </FONT>
<FONT COLOR="gray"> GRIS </FONT>
<FONT COLOR="teal"> TEAL </FONT>
<FONT COLOR="white"> BLANCO </FONT>
ROJO
AZUL
AZUL MARINO
VERDE
OLIVA
AMARILLO
LIMA
MAGENTA
PURPURA
CYAN
MARRON
NEGRO
GRIS
TEAL
BLANCO
Como se coment en la introduccin el color se puede indicar tanto mediante

su nombre en ingls como por determinados cdigos hexadecimales. (Ver tabla
de cdigos de colores)
En el siguiente ejemplo se muestra una combinacin de colores y tamaos de
letra:
(Para mayor detalle ver <FONT>)
<FONT SIZE=6 COLOR="navy">C</FONT><FONT SIZE=4>aptulo </FONT>
<BR>
<FONT SIZE=5 COLOR="red">E</FONT><FONT SIZE=3>rase una vez un
...</FONT>
Resulta:
Captulo
I
Erase una vez un ...
Colores del entorno

Un cierto nmero de atributos de la marca BODY permite controlar el color del
fondo de la ventana del browser, el color de los caracteres del texto y,
finalmente, el color de los enlaces:
< BODY atributo1 atributo2 atributo3 ... atributoN >
El atributo BGCOLOR
Este atributo permite establecer un color de fondo para el documento.
<BODY BGCOLOR="#C0C0C0">
13
Este ejemplo establecer el colos gris claro (#C0C0C0) como color de fondo de
pgina.
El atributo BACKGROUND
Este atributo permitir se utilice una imagen residente en el servidor, o en un
fichero local, como fondo de pgina.
<BODY BACKGROUND="fichero_grfico.gif">
El atributo TEXT
Permite controlar el color del texto estndar, es decir, todo texto que no
especifique un enlace.
<BODY TEXT="darkblue">
Este ejemplo har que, por defecto, el texto del documento aparezca de color
azul oscuro.
Los atributos LINK, VLINK y ALINK
Controlan el color de los enlaces:
LINK es el color de un enlace que an no ha sido visitado.
ALINK es un color muy fugaz que aparece cuando se hace clic sobre el enlace.
VLINK es el color de un enlace que ya ha sido visitado.
<BODY LINK="blue" ALINK="red" VLINK="navy">
Cdigos de colores
Color
Cdigo
nmerico
Ejemplo
Lime Green
rgb=#32CD32 TEXTO
Mandarian Orange
White
rgb=#FFFFFF
rgb=#E47833 TEXTO
TEXTO
Red
Maroon
rgb=#8E236B TEXTO
rgb=#FF0000
TEXTO
Medium Aquamarine rgb=#32CD99 TEXTO
Green
rgb=#00FF00
TEXTO
Medium Blue
Blue
rgb=#0000FF
TEXTO
Magenta
rgb=#FF00FF
TEXTO
Medium
Green
Cyan
rgb=#00FFFF
TEXTO
Medium Goldenrod
rgb=#EAEAAE TEXTO
Yellow
rgb=#FFFF00
TEXTO
Medium Orchid
rgb=#9370DB TEXTO
Black
rgb=#000000
TEXTO
Medium Sea Green
rgb=#426F42 TEXTO
Aquamarine
rgb=#70DB93
TEXTO
Medium Slate Blue
rgb=#7F00FF TEXTO
Baker's Chocolate rgb=#5C3317
TEXTO
Blue Violet
rgb=#9F5F9F
TEXTO
Medium
Green
rgb=#7FFF00 TEXTO
Brass
rgb=#B5A642
TEXTO
Medium Turquoise
Bright Gold
rgb=#D9D919
TEXTO
rgb=#70DBD
TEXTO
B
Brown
rgb=#A62A2A
TEXTO
Medium Violet Red
rgb=#DB7093 TEXTO
Bronze
rgb=#8C7853
TEXTO
Medium Wood
rgb=#A68064 TEXTO
rgb=#3232CD TEXTO
Forest
Spring
rgb=#6B8E23 TEXTO
14
Midnight Blue
rgb=#2F2F4F TEXTO
Navy Blue
rgb=#23238E TEXTO
Bronze II
rgb=#A67D3D
TEXTO
Neon Blue
rgb=#4D4DFF TEXTO
Cadet Blue
rgb=#5F9F9F
TEXTO
Neon Pink
rgb=#FF6EC7 TEXTO
Cool Copper
rgb=#D98719
TEXTO
New Midnight Blue
rgb=#00009C TEXTO
Copper
rgb=#B87333
TEXTO
New Tan
rgb=#EBC79E TEXTO
Coral
rgb=#FF7F00
TEXTO
Old Gold
rgb=#CFB53B TEXTO
Corn Flower Blue rgb=#42426F
TEXTO
Orange
rgb=#FF7F00 TEXTO
Dark Brown
rgb=#5C4033
TEXTO
Orange Red
rgb=#FF2400 TEXTO
Dark Green
rgb=#2F4F2F
TEXTO
Orchid
rgb=#4A766E
TEXTO
rgb=#DB70D
TEXTO
B
Pale Green
rgb=#8FBC8F TEXTO
Dark Olive Green rgb=#4F4F2F
TEXTO
Pink
rgb=#BC8F8F TEXTO
Dark Orchid
rgb=#9932CD
TEXTO
Plum
rgb=#EAADEA TEXTO
Dark Purple
rgb=#871F78
TEXTO
Quartz
rgb=#D9D9F3 TEXTO
Dark Slate Blue
rgb=#6B238E
TEXTO
Rich Blue
rgb=#5959AB TEXTO
Dark Slate Grey
rgb=#2F4F4F
TEXTO
Salmon
rgb=#6F4242 TEXTO
Dark Tan
rgb=#97694F
TEXTO
Scarlet
rgb=#8C1717 TEXTO
Dark Turquoise
rgb=#7093DB
TEXTO
Sea Green
rgb=#238E68 TEXTO
Dark Wood
rgb=#855E42
TEXTO
Dim Grey
rgb=#545454
TEXTO
Semi-Sweet
Chocolate
rgb=#6B4226 TEXTO
Dusty Rose
rgb=#856363
TEXTO
Sienna
rgb=#8E6B23 TEXTO
Feldspar
rgb=#D19275
TEXTO
Silver
rgb=#E6E8FA TEXTO
Firebrick
rgb=#8E2323
TEXTO
Sky Blue
rgb=#3299CC TEXTO
Forest Green
rgb=#238E23
TEXTO
Slate Blue
rgb=#007FFF TEXTO
Gold
rgb=#CD7F32
TEXTO
Spicy Pink
rgb=#FF1CAE TEXTO
Goldenrod
rgb=#DBDB70 TEXTO
Spring Green
rgb=#00FF7F TEXTO
Grey
rgb=#C0C0C0
TEXTO
Steel Blue
rgb=#236B8E TEXTO
Green Copper
rgb=#527F76
TEXTO
Summer Sky
rgb=#38B0DE TEXTO
Green Yellow
rgb=#93DB70
TEXTO
Tan
rgb=#DB9370 TEXTO
Hunter Green
rgb=#215E21
TEXTO
Thistle
rgb=#D8BFD8 TEXTO
Indian Red
rgb=#4E2F2F
TEXTO
Turquoise
rgb=#ADEAEA TEXTO
Khaki
rgb=#9F9F5F
TEXTO
Very Dark Brown
rgb=#5C4033 TEXTO
Light Blue
rgb=#C0D9D9
TEXTO
Light Grey
rgb=#A8A8A8
TEXTO
Very Light Grey
rgb=#CDCDC
TEXTO
D
Light Steel Blue
rgb=#8F8FBD
TEXTO
Violet
rgb=#4F2F4F TEXTO
Light Wood
rgb=#E9C2A6
TEXTO
Violet Red
rgb=#CC3299 TEXTO
Wheat
rgb=#D8D8BF TEXTO
Yellow Green
rgb=#99CC32 TEXTO
Dark
Copper
Green
15
Listas
Una lista permite organizar la totalidad o parte de un documento HTML

estructurndolo de la forma ms clara posible para hacerlo ms
perceptible al lector. Las listas se utilizan para dividir el documento asi
como para efectuar numeraciones de objetos, pero la diferencia con los
procesadores de texto es que no permite la numeracin automtica para
niveles jerrquicos diferentes:
16
HTML define varios tipos de listas:

Listas sin orden, sin numeracin: <UL> , <LI>
Listas ordenadas, con numeracin: <OL> , <LI>
Listas de directorio, similares a las listas sin orden: <DIR> ,
<LI>
Listas de men , similares a las listas sin orden: <MENU> , <LI>
Listas de definicin, tpicamente un glosario: <DL> , <DT> ,
<DD>
Cualquiera de los tipos de listas nombrados puede ser anidado. En el
caso de las listas ordenadas no se consique una numeracin escalonada
al anidar una lista dentro de otra, como se vi en el ejemplo anterior. Las
listas sin orden cambian el smbolo de comienzo al anidarse unas dentro
de otras. Al final de esta pgina se muestran varios ejemplos de listas
anidadas.
Como puede comprobar los primeros cuatro tipos de listas, denominados
listas regulares, hacen uso de la marca <LI>. La cual se explica a
continuacin.
LI
La marca <LI> es un elemento vaco, o sea, no requiere de marca de fin,
y es comn a las denominadas listas regulares. La sintxis general de
estas listas ser:
<marca de comienzo>
<li> Primer elemento de la lista
<li> Segundo elemento de la lista
<li> ...
<marca de cierre>
LISTAS SIN ORDEN

UL
La marca <UL> permite generar listas no ordenadas, cada uno de los
elementos de la lista ir precedido por un smbolo (fijo por defecto) que
puede variar segn el nivel de anidamiento de la lista.
Ejemplo:
Ejemplo de lista no ordenada
Fichero HTML
Fichero de imagen
<H3>Ejemplo
ordenada</H3>
<UL>
de
lista
no
17
<LI>Fichero HTML</LI>
<LI>Fichero de imagen</LI>
Fichero de sonido
<LI>Fichero de sonido</LI>
Fichero de vdeo
<LI>Fichero de vdeo</LI>
Fichero de ejemplo
<LI>Fichero de ejemplo</LI>
</UL>
Los puntos gruesos se pueden cambiar usando el atributo TYPE con tres
valores (el valor por defecto es DISC). Con el valor CIRCLE se ver:
<UL TYPE=CIRCLE>
Primera lnea
<LI>Primera lnea
segunda lnea
<LI>Segunda lnea
</UL>
Tambin puede usarse el valor SQUARE. As:
<UL TYPE=SQUARE>
Primera lnea
<LI>Primera lnea
segunda lnea
<LI>Segunda lnea
</UL>
Listas ordenadas
OL
La marca <OL> se utiliza para una lista ordenada o numerada. Cada
marca </LI> incrementar el nmero que se visualizar delante del
elemento de la lista.
Ejemplo:
Ejemplo de lista ordenada
<H3>Ejemplo de lista ordenada</H3>
Fichero HTML
<OL>
Fichero de imagen
<LI>Fichero HTML</LI>
Fichero de sonido
<LI>Fichero de imagen</LI>
Fichero de vdeo
<LI>Fichero de sonido</LI>
18
<LI>Fichero de vdeo</LI>
Fichero de ejemplo
<LI>Fichero de ejemplo</LI>
</OL>
Las listas ordenadas no slo se pueden ordenar con nmeros. Tambin
se pueden utilizar letras y numeracin romana tanto en maysculas
como minsculas. Para esto se utiliza el atributo TYPE del elemento
<OL> con los siguientes valores:
TYPE=1
(por defecto) para nmeros,
TYPE=A
para letras maysculas,
TYPE=a
para letras minsculas,
TYPE=I
para numeracin romana en maysculas,
TYPE=i
para numeracin romana en minsculas.
Esto es una lista ordenada con letras <OL TYPE=A>
maysculas:
<LI>Primera lnea
Primera lnea
<LI>Segunda lnea
Segunda lnea
<LI>Tercera lnea
Tercera lnea
<LI>Cuarta lnea
Cuarta lnea
</OL>
<OL TYPE=a>
Esto es una lista ordenada con letras minsculas:
<LI>Primera lnea
Primera lnea
<LI>Segunda lnea
Segunda lnea
<LI>Tercera lnea
Tercera lnea
<LI>Cuarta lnea
Cuarta lnea
</OL>
Esto es una lista ordenada con numeracin romana
en maysculas:
Primera lnea
Segunda lnea
Tercera lnea
Cuarta lnea
Esto es una lista ordenada con numeracin romana
en minsculas:
Primera lnea
Segunda lnea
Tercera lnea
Cuarta lnea
<OL TYPE=I>
<LI>Primera lnea
<LI>Segunda lnea
<LI>Tercera lnea
<LI>Cuarta lnea
</OL>
<OL TYPE=i>
<LI>Primera lnea
<LI>Segunda lnea
<LI>Tercera lnea
<LI>Cuarta lnea
</OL>
19
En algunos casos puede interesarnos que la lista no comience por el

nmero 1 (por ejemplo si es una lista que continua en otra pgina). Se
puede conseguir con el atributo START combinado con TYPE.
<OL TYPE=A
Esto es una lista ordenada con letras maysculas y
TART=5>
que comienza por la E:
<LI>Primera lnea
Primera lnea
<LI>Segunda lnea
Segunda lnea
<LI>Tercera lnea
Tercera lnea
<LI>Cuarta lnea
Cuarta lnea
</OL>
El nmero que se pone en el atributo START indica en que nmero o
letra comenzar la lista. La E es la quinta letra.
Listas de directorio
DIR
Las listas de directorio son similares a las listas sin orden. En el Netscape
no se ve diferencia entre una y otra. La nica diferencia es la sintxis del
cdigo donde en vez de utilizar la marca <UL> se utiliza la marca
<DIR>.
La marca <DIR> admite los mismos atributos que la marca <UL>.
Ejemplo:
<H3>Ejemplo de lista directorio</H3>
Ejemplo de lista de directorio
<DIR>
Espaol
<LI>Espaol</LI>
Ingls
<LI>Ingls</LI>
Francs
<LI>Francs</LI>
Alemn
<LI>Alemn</LI>
</DIR>
20
Listas de men
MENU
Las listas de menu son similares a las listas sin orden. En el Netscape no
se ve diferencia entre una y otra. La nica diferencia es la sintxis del
cdigo donde en vez de utilizar la marca <UL> se utiliza la marca
<MENU>.
La marca <MENU> admite los mismos atributos que la marca <UL>.
Ejemplo:
<H3>Ejemplo de lista directorio</H3>
Ejemplo de lista de menu
<MENU>
Opcin 1
<LI>Opcin 1</LI>
Opcin 2
<LI>Opcin 2</LI>
Opcin 3
<LI>Opcin 3</LI>
</MENU>
La estructura de una tabla se define mediante:
una marca de inicio de la tabla (TABLE),
una marca de comienzo de una nueva lnea (TR) y
una marca de comienzo de una celda (TD).
21
Al final de cada uno de estos elementos se deber definir la marca de

final correspondiente.
Esta estructura es bastante simple y muy fcilmente modificable.
Se pueden definir adems textos de cabecera en las celdas (TH) y ttulos
para las tablas (CAPTION).
Una celda puede contener algunos de los siguientes elementos:
texto
listas
otras tablas
imgenes
enlaces de hipertexto
elementos de formulario
La representacin de una tabla es actualmente muy dependiente del
browser utilizado.
TABLE
La marca <TABLE> permite la apertura de una tabla; el fin de tabla se
especifica con </TABLE>.
Se puede indicar alguno de los siguintes atributos:
BORDER: define el grosor del marco exterior (puede ser cero).
CELLPADDING: define el espacio alrededor del texto de una celda.
CELLSPACING: define el espacio entre celdas.
El valor de estos atributos se especifica en pxels. Cuando no se les
asigna ningn valor explcitamente estos atributos tomarn valores
definidos por defecto.
El valor por defecto del atributo BORDER es cero por lo que si ste
atributo no se especifica se obtendr una tabla sin bordes la cual suele
ser muy til para la alineacin de elementos, uno al lado de otro, o uno
debajo de otro. Para que se visualicen los bordes de la tabla bastar
nombrar este atributo asignandole un valor, o no.
Se puede determinar el tamao de la tabla, bien forzandola a ocupar un
cierto porcentaje de la anchura de la ventana del browser o definiendo
un tamao fijo en unidades, mediante los atributos:
WIDTH: define el ancho de la tabla, bien en % o en unidades.
HEIGTH: define el alto de la tabla, bien en % o en unidades.
Ejemplos:
celda 1
celda 3
celda 2
celda 4
<TABLE>
<TR><TD>celda
2</TD></TR>
<TR><TD>celda
4</TD></TR>
</TABLE>
1</TD><TD>celda
3</TD><TD>celda
22
celda 1
celda 2
celda 3
celda 4
celda 1
celda 2
celda 3
celda 4
<TABLE BORDER>
<TR><TD>celda
2</TD></TR>
<TR><TD>celda
4</TD></TR>
</TABLE>
<TABLE
BORDER=5
CELLPADDING=8>
<TR><TD>celda
2</TD></TR>
<TR><TD>celda
4</TD></TR>
</TABLE>
1</TD><TD>celda
3</TD><TD>celda
CELLSPACING=6
1</TD><TD>celda
3</TD><TD>celda
Definiendo el ancho y alto de la

tabla en %
Ancho (WIDTH)
50%
Alto (HEIGHT)
30%
<TABLE BORDER WIDTH=50% HEIGHT=30%>

<CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION>
<TR ALIGN="center">
<TH>Ancho (<I>WIDTH</I>)</TH>
<TD>50%</TD>
<TR ALIGN="center">
<TH>Alto (<I>HEIGHT</I>)</TH>
<TD>30%</TD>
</TABLE>
Definiendo el ancho y alto de la
tabla en unidades.
Ancho (WIDTH)
300
Alto (HEIGHT)
80
<TABLE BORDER WIDTH=300 HEIGHT=80>

<CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION>
<TR ALIGN="center">
<TH>Ancho (<I>WIDTH</I>)</TH>
<TD>300</TD>
<TR ALIGN="center">
<TH>Alto (<I>HEIGHT</I>)</TH>
23
<TD>80</TD>
</TABLE>
TR
La marca <TR> inicia una lnea de la tabla que terminar con </TR>.
Admite los atributos:
VALIGN: permite una alineacin del texto en el sentido vertical de
la celda.Admite los valores: TOP, BOTTOM, MIDDLE
ALIGN: permite una alineacin del texto en el sentido horizontal de la
celda.
Admite los valores: RIGHT, CENTER, LEFT
Estos atributos se aplican sobre toda la fila, salvo cuando un atributo de
<TD> contradice esta alineacin.
TD
La marca <TD> delimita el inicio de una celda. Admite los atributos:
VALIGN: permite una alineacin del texto en el sentido vertical de la
celda.
Admite los valores: TOP, BOTTOM, MIDDLE
ALIGN: permite una alineacin del texto en el sentido horizontal de la
celda.
Admite los valores: RIGHT, CENTER, LEFT
COLSPAN: define una celda con una anchura mltiplo de la columna
bsica.
ROWSPAN: define una celda con una anchura mltiplo de la fila bsica.
NOWRAP: obliga al browser a inscribir todo el texto de la celda en una
sola lnea.
En las tablas el ajuste es automtico, la anchura de una celda depende
del texto ms largo inscrito en una de las celdas de la columna. De
modo predeterminado, si la lnea es demasiado larga, el browser la
cortar en varias lneas, no ser que est presente el atributo NOWRAP.
TH
La marca <TH> es idtica a <TD> pero el texto de las celdas se
considera como texto de cabecera. Este texto se centra
automticamente y se pone en negrita. Admite los mismos parmetros
que la marca <TD> (VALIGN, ALIGN, COLSPAN, ROWSPAN, NOWRAP).
CAPTION
24
Esta marca permite poner un ttulo encima ( atributo ALIGN=TOP) o

debajo (atributo ALIGN=BOTTOM) de la tabla.
Ejemplos:
Titulo Superior (por defecto)
Atributos de alineacin, Align y VAlign
Alineacin
Vertical
Alineacin
Horizontal
Top
Left
Middle
Center
Bottom
Right
<CENTER>
<TABLE BORDER>
<CAPTION>Titulo Superior (por defecto)</CAPTION>
<TR>
<TD></TD>
<TH COLSPAN=3>Atributos de alineacin, Align y VAlign</TH>
<TR>
<TH>Alineacin<BR>Vertical</TH>
<TD VALIGN=top>Top</TD>
<TD VALIGN=middle>Middle</TD>
<TD VALIGN=bottom>Bottom</TD>
<TR>
<TH>Alineacin<BR>Horizontal</TH>
<TD ALIGN=left>Left</TD>
<TD ALIGN=center>Center</TD>
<TD ALIGN=right>Right</TD>
</TABLE>
</CENTER>
Ventana 1
Ventana 2
Ventana 3
Color
Fondo
blanco
gris
amarillo
Color
Texto
azul
Color
Smbolos
rojo
negro
negro
verde
Tabla 2.1.
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN="bottom">Tabla 2.1.</CAPTION>
<TR ALIGN="center">
25
<TD></TD>
<TH>Ventana 1</TH>
<TH>Ventana 2</TH>
<TH>Ventana 3</TH>
<TR ALIGN="center">
<TH>Color<BR>Fondo</TH>
<TD>blanco</TD>
<TD>gris</TD>
<TD>amarillo</TD>
<TR ALIGN="center">
<TH>Color<BR>Texto</TH>
<TD>azul</TD>
<TD ROWSPAN=2> negro </TD>
<TD>negro</TD>
<TR ALIGN="center">
<TH>Color<BR>Smbolos</TH>
<TD>rojo</TD>
<TD>verde</TD>
</TABLE>
</CENTER>
Ejemplo:
NOWRAP
Atributo Aqu hay una lnea muy larga. Para que no sea
cortada utilizamos el atributo NOWRAP.
<TABLE BORDER>
<TR>
<TD>Ejemplo: Atributo NOWRAP</TD>
<TD NOWRAP>Aqu hay una lnea muy larga. Para que no sea cortada
utilizamos el atributo <I>NOWRAP</I>.</TD>
</TABLE>
26
Imgenes I
Contenidos:
Introduccin
Insercin de imgenes <IMG>
Alineacin de imgenes El atributo ALIGN
Extensiones del Netscape para la alineacin de imgenes
Imgenes como fondo de pgina <BODY>
Imgenes como marcas de una lista <IMG> <DL>
Animaciones
Imgenes y enlaces <IMG> <A>
Imgenes mapeadas <IMG> <MAP> <AREA>
Introduccin
Insertar imgenes en un documento permite crear pginas mucho ms
atractivas. Segn el tipo de grfico utilizado se pueden conseguir
efectos realmente sorprendentes.
27
Existen dos formas de mostrar una imagen en una pgina HTML, la

primera es mostrar la imgen en lnea, o sea, la imagen se visualiza
automticamente al cargar la pgina; la segunda es mediante la
activacin de un enlace de hipertexto que provoque la visualizacin de
la imagen.
Existen diversos formatos de imagenes . Los formatos GIF y JPEG son
interpretados directamente por el visualizador. Se puede usar cualquier
otro formato como el MPG (vdeo), pero en este caso el visualizador
llamar a un programa auxiliar, que previamente se habr definido, para
que sea ste el que visualice el fichero. La desventaja de las imgenes
en formatos no tratados por el propio visualizador es que no se ver el
texto junto con la imagen, y por tanto no se podr imprimir la pgina
compuesta.
Para que todos los browsers puedan comprender el formato en el que
est codificado la imagen, se ha hecho una normalizacin con el
estndar GIF (Graphics Interchange Format). Se trata de un formato
comprimido pensado para optimizar el tiempo de telecarga que permite
el tratamiento de imgenes en colores (256 como mximo) o niveles de
gris.
IMG
Este elemento permite incluir una imagen en un documento. Vendr
siempre acompaado por el atributo SRC que indica la direccin del
fichero grfico que contiene la imagen:
<IMG SRC="direccin_URL_del_fichero_grfico">
Ejemplos:
Imagen situada en un fichero local:
<IMG SRC="images/wmelon.gif">
Imagen residente en un servidor:

<IMG SRC="http://www.iconbazaar.com/misc/apple.gif">
Esta ltima opcin de insertar una imagen de un servidor exterior en un
texto no es muy recomendable ya que ralentiza mucho la carga de la
pgina y adems no se asegura que la imagen pueda ser siempre
accedida. Realmente el resultado del ejemplo sera ver directamente la
imagen, no un enlace a sta, pero como se ha dicho anteriormente esto
puede dar problemas al cargar la pgina. Esta opcin, por tanto, se
28
utiliza slo en casos excepcionales de imgenes que son actualizadas

peridicamente (p.e: un mapa metereolgico).
Si el fichero indicado no es encontrado el browser mostrar un smbolo
en lugar de la imagen, indicando el error. Por ejemplo:
<IMG SRC="directorio/imagen.gif">
En los documentos HTML se suelen insertar diversos iconos con
significados implcitos, como es el caso de "pgina en construccin":
Este elemento permite adems los siguientes atributos:
ALT: Define un texto alternativo que sustituir a la imagen en caso de
que el browser no sea capaz de tratar imagenes. Esto es importante
sobretodo cuando la imagen soporta un enlace. Por ejemplo:
<IMG SRC="images/toucan.gif" ALT="Imagen de un TUCAN">
ALIGN: Situa la imagen en la posicin que se le indique respecto a la

lnea de texto en la que est. Este atributo se explica con mayor detalle
en el apartado que viene a continuacin.
El atributo ALIGN
Alinea la imagen, segn la posicin que se le indique, respecto a la lnea

de texto en la que est. Puede tomar los siguientes valores:
TOP: alinea la parte superior de la imagen con la lnea actual.
MIDDLE: alinea el centro de la imagen con la lnea actual.
BOTTOM: alinea la base de la imagen con la lnea actual.
Ejemplos:
Parte superior de la imagen <IMG SRC="images/flor.gif" ALIGN="top">
alineada con el texto
Parte superior de la imagen

Parte central de la imagen <IMG SRC="flor.gif" ALIGN="middle">
Parte central de la imagen

Parte inferior de la imagen <IMG SRC="flor.gif" ALIGN="bottom">
29
Parte inferior de la imagen
Extensiones del Netscape
Estas extensiones no son reconocidas por HTML 2, sin embargo son

bastante utilizadas por muchos autores de pginas HTML.
ALIGN: Adems de los valores ya definidos anteriormente para el
atributo ALIGN , el Netscape permite la utilizacin de dos nuevos
valores. Estos permitirn que el texto fluya alrededor de la imagen con
una regulacin del espacio vertical (atributo VSPACE) y del espacio
horizontal (atributo HSPACE).
WIDTH: Redefine el ancho de la imagen.
HEIGHT: Redefine el alto de la imagen.
BORDER: Dibuja un marco alrededor de la imagen.
VSPACE: Define el margen vertical a dejar entre la imagen y el texto.
HSPACE: Define el margen horizontal a dejar entre la imagen y el texto.
Para poder saltar la imagen y que el texto continue debajo de sta se ha
definido el atributo CLEAR para el elemento de salto de lnea <BR>:
<BR CLEAR>.
A continuacin se mostrarn varios ejemplos para aclarar lo explicado
en este apartado:
Ejemplos:
<IMG SRC="images/sebastia.gif" ALIGN="right" HSPACE=20
VSPACE=5 WIDTH=30 HEIGHT=30>
Este texto ...
Este texto estar situado a la izquierda de dicha imagen puesto que se
ha definido mediante el atributo ALIGN="right" que la imagen estar
situada a la derecha. Los mrgenes definidos tanto vertical (VSPACE=5)
como horizontalmente (HSPACE=20) sern respetados. No se ha
definido un borde para la imagen.
30
<IMG SRC="images/sebastia.gif" ALIGN="left" HSPACE=30

VSPACE=10 WIDTH=50 HEIGHT=50 BORDER=2>
Este texto ...
Esta imagen estar rodeada de un borde color negro del ancho indicado
por BORDER=2. Ahora se quiere que el texto continue pasada la imagen.
Por medio del elemento <BR> con su atributo CLEAR: <BR
CLEAR> este texto continua debajo de la imagen.
Imgenes como fondo de pgina

Mediante el elemento <BODY> y el atributo BACKGROUND se permite
utilizar una imagen residente en el servidor, o en un fichero local, como
fondo de pgina. El valor que deber tomar dicho atributo es la direccin
donde se encuentra el fichero que contiene la imagen. La sintaxis ser:
<BODY BACKGROUND="direccion_del_fichero_grafico">
Ejemplo:
<BODY BACKGROUND="images/blanco51.gif">
Esta sentencia es la utilizada para definir el fondo utilizado en este
mismo documento.
Imgenes como marcas de una lista
Para obtener una lista adornada con algn tipo de icono se podrn
utilizar las listas de definicin de la siguiente forma:
<DL>
<DT><IMG SRC="images/bolaroja.gif"> Lnea de texto
</DL>
Lnea de texto
Lnea de texto
Lnea de texto
Incluso se podrn anidar como en el siguiente ejemplo:
<DL>
<DT><IMG SRC="images/bolaroja.gif">Lnea de texto
<DT><IMG SRC="images/bolaroja.gif">Lnea de texto
<DL>
<DT><IMG SRC="images/bolaverd.gif">Lnea de texto
<DT><IMG SRC="images/bolaverd.gif">Lnea de texto
<DL>
<DT><IMG SRC="images/bolaazul.gif">Lnea de texto
<DT><IMG SRC="images/bolaazul.gif">Lnea de texto
<DL>
<DT><IMG SRC="images/bolaamar.gif">Lnea de texto
<DT><IMG SRC="images/bolaamar.gif">Lnea de texto
31
</DL>
</DL>
</DL>
</DL>
Lnea de texto
Lnea de texto
Lnea de texto
Lnea de texto
Lnea de texto
Lnea de texto
Lnea de texto
Lnea de texto
Animaciones
Una nueva posibilidad de algunos browsers es la posibilidad de
presentar grficos con animacin. Los grficos animados en formato GIF
permiten almacenar secuencias de imagenes en un solo fichero, las
cuales forman animaciones que pueden ser visualizadas directamente
por el browser. No hay que confundir estos grficos con los vdeos en
formato MPG que no son tratados por el browser sino por una
herramienta auxiliar.
La forma de introducir estas animaciones en un documento es la misma
que para una imagen fija, como se muestra en el siguiente ejemplo:
Ejemplo:
<IMG SRC="images/frogani.gif">
Pulsando sobre el botn de Stop del browser la animacin se detendr

en la imagen de la secuencia en la que est.
Los visualizadores que no soportan este efecto representarn solamente
la primera o la ltima de las imgenes de la secuencia. Por esto es
conveniente no comenzar o terminar las secuencias con una imagen
vaca.
32
Imgenes II
Contenidos:
Introduccin
Insercin de imgenes <IMG>
Alineacin de imgenes El atributo ALIGN
Extensiones del Netscape para la alineacin de imgenes
Imgenes como fondo de pgina <BODY>
Imgenes como marcas de una lista <IMG> <DL>
Animaciones
Imgenes y enlaces <IMG> <A>
Imgenes mapeadas <IMG> <MAP> <AREA>
Imgenes y enlaces
Los enlaces hipertexto pueden ser tambin definidos sobre imgenes de
tal forma que al picar con el ratn sobre algn punto de la superficie de
stas, se pase al documento correspondiente. Esto suele ser utilizado
sobre todo para introducir botones de navegacin en las pginas HTML.
Ejemplos:
<A HREF="forms.htm"><IMG SRC="images/boton1.gif"></A>
<A HREF="#inicio"><IMG SRC="images/boton2.gif"></A>
<A HREF="simbolos.htm"><IMG SRC="images/boton3.gif"></A>
Una imagen que acta de hiperenlace se distingue mediante un borde
de color alrededor de sta, como puede observarse en el ejemplo
anterior.
33
Si en un enlace se indica la direccin de una imagen dicha imagen no

ser cargada junto con la pgina sino que ser cargada slo en el caso
de que dicho enlace sea activado.
Ejemplo:
<A HREF="images/new.gif"> Enlace a una imagen </A>
Enlace a una imagen
Imgenes mapeadas
Al utilizar las imgenes como hiperenlaces, se podrn definir distintas
conexiones en funcin del lugar donde se pulse, dentro de la imagen,
obteniendo lo que se denomina imgenes mapeadas.
A continuacin se detallarn dos mtodos para definir una imagen
mapeada. El principio de funcionamiento ser diferente para cada uno
de ellos:
HTML 2: (ISMAP) En este caso el servidor es quien se encarga de
detectar a partir de las coordenadas del punto activado el URL a
conectar.
HTML 3: (USEMAP) Aqu cuando el cliente ha recibido la pgina HTML,
tratar enteramente la deteccin del punto activado y la conexin con el
URL. Adems de la simplificacin de programacin (en un nico fichero),
este segundo caso es mucho ms eficaz porque minimiza los accesos a
la red.
Realizacin de una imagen activable con HTML 2:
Se seguirn una serie de pasos:
Definir la imagen con el tamao deseado. Es conveniente probar dicha
imagen en diferentes resoluciones de pantalla (PC, Mac, terminales X) a
fin de predeterminar con seguridad el tamao ptimo de sta, ya que el
trabajo que viene a continuacin es muy tedioso como para tener que
volver a empezar.
Hacer una lista de coordenadas, zona por zona, de las superficies
activables. Estas zonas activables podrn tomar las formas de:
rectngulo, crculo o polgono.
El sistema se coordenadas de la imagen tendr su origen en la parte
superior izquierda de sta. Habr que crear un fichero en el que cada
lnea definir una forma geomtrica para la zona activable y su URL
asociado. La sintxis ser la siguiente:
forma dir_URL X1,Y1 X2,Y2 ...
El nmero de puntos (expresados en pxels) depender de la forma de la
zona, la cual se indicar mediante una de las siguientes palabras clave:
RECT: rectngulo definido por dos puntos: el extremo superior izquierdo
y el extremo inferior derecho.
CIRCLE: crculo definido por dos puntos: el centro y un punto cualquiera
situado sobre la circunferencia.
34
POLY: polgono definido por un mximo de 100 vectores: se da la

direccin de cada extremo del vector.
Ejemplo:
default /home_page.html
rect http://www.aramis.fr 5,5 21,14
poly http://www.porthos.fr 38,6 50,6 48,18 45,15 40,21 35,24
circle http://www.athos.fr 52,32 45,32
Este fichero se guardar por ejemplo bajo el nombre de ej_mapa.map en
un directorio del servidor cuyo nombre podra ser /map. Dicho fichero no
tiene nada en comn con un fichero HTML. A continuacin se detallar
cmo se va a utilizar para hacer una imagen activable.
La posibilidad de gestionar imgenes activables no se debe a la
funcionalidad intrnseca del servidor Web. Por tanto para poder efectuar
esta operacin hay que ejecutar un programa especial, imagemap. Este
programa se encuentra disponible de modo estndar en la distribucin
del demonio HTTPD proporcionado por NCSA y debe ser instalado por el
administrador en la zona CGI del servidor.
Hay que declarar el fichero ej_mapa.map en un fichero del servidor,
imagemap.conf, situado en la raz del servidor. Este fichero es conocido
por el programa imagemap y contendr lnea por lnea, con un nombre
simblico, la direccin de todos los ficheros que definen las imgenes
activables del servidor. Se edita pues el fichero imagemap.conf y se le
aade una lnea donde se declara nuestro fichero atribuyndole un
nombre simblico y dando su camino de acceso.
Extracto del fichero imagemap.conf:
.....
.....
ej_mapa: /map/ej_map.map
La operacin siguiente consiste en proponer el mapa activable en la
pgina HTML. La sintxis general ser la siguiente:
<A HREF=cgi-bin/imagemap/nombre_simblico>
<IMG SRC="URL_imagen.gif" ISMAP>
</A>
El atributo ISMAP indica al browser que se encuentra ante un mapa
activable y que ser necesario que transmita las coordenadas del punto
activado.
Lo que, aplicado a nuestro ejemplo, nos da:
<A HREF=cgi-bin/imagemap/ej_mapa.map>
<IMG SRC="mmm.gif" ISMAP>
</A>
La ltima operacin consiste en probar la imagen haciendo clic sobre
cada una de las zonas predefinidas, incluyendo la zona predeterminada
para verificar el correcto funcionamiento del conjunto.
Realizacin de una imagen activable con HTML 3:
35
La realizacin de un mapa activable es mucho ms sencilla con este

nivel de HTML, porque todo est descrito en el mismo fichero y ya no se
necesita un programa servidor exterior (cgi-bin).
Actualmente pocos browsers son capaces de utilizar mapas activables
de
este
tipo.
Netscape 2.0 en versin beta permite esta funcionalidad.
Aqu la imagen se define con la marca <IMG> a la que se asocia el
atributo USEMAP. Este atributo permite referenciar un "subprograma
HTML" que describe las zonas activables y sus URL asociados.
La sintxis de llamada ser pues:
<IMG SRC="imagen.gif" USEMAP:"nombre_del_mapa">
El elemento <MAP> define el principio y fin del bloque de definicin de
zonas activables. Estas zonas se describirn mediante el elemento
<AREA>. La sintaxis general de definicin de mapas ser por tanto:
<MAP NAME="nombre_del_mapa">
<AREA SHAPE="figura" HREF="url1" COORD="x0,y0,x1,y1,...">
<AREA SHAPE="figura" HREF="url2" COORD="x00,y00,x11,y11,...">
</MAP>.
Figura puede tomar los valores RECT, POLY o CIRCL. El sistema de
coordenadas estar tambin situado en el extremo superior izquierdo de
la imagen.
Es posible reemplazar el atributo HREF por NOHREF para una zona
neutra de la imagen.
Ejemplo:
<MAP NAME="mapa1">
<AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm">
<AREA
SHAPE="rect"
COORDS="76,1,136,46"
HREF="imagenes.htm">
</MAP>
<IMG SRC="sugeren.gif" USEMAP="#mapa1">
El atributo USEMAP indica qu mapa de coordenadas hay que aplicar a

la imagen. A una misma imagen se le pueden aplicar distintos mapas si
se desea. En el ejemplo mapa1, va precedido del smbolo #. Esto se
debe a que el mapa se encuentra definido en la misma pgina que la
definicin de la imagen. Si el mapa estuviese definido en otro
documento se colocara el nombre del fichero en cuestin antes del
smbolo #, como se hace con el atributo HREF
36
Smbolos
Por qu hay que usar cdigos?
Existen diversos sistemas operativos dentro del mundo de los
ordenadores. Estos sistemas no son otra cosa que unos programas
especiales que se ejecutan inmediatamente despus de encender el
ordenador, y son los que se encargan de darle "vida" a la mquina.
Junto con estos programas, los ordenadores cargan en memoria unas
tablas especiales que coinciden con los caracteres que tiene su teclado y
algunos ms que no estn en el mismo, pero que se pueden escribir en
pantalla por otros medios. Estas tablas, desafortunadamente, no son
siempre las mismas, y varan de un sistema a otro, de una marca de
ordenador a otra, y por supuesto, de un idioma a otro. Por ejemplo, no se
ven igual las letras con acentos desde un PC que desde un MACintosh, o
una terminal UNIX, si se escriben directamente desde el teclado.
Dado que el HTML pretende ser un lenguaje universal, y que una pgina
debe verse como su creador desea, sin importar si se est ante un
ordenador que "habla" en ingls o en espaol, o que tiene tal o cual
sistema operativo, se ha creado una tabla de caracteres "conflictivos"
(en realidad estn todos, pero generalmente slo se usa para caracteres
especiales) que se escriben con un cdigo en lugar de pulsar la tecla que
lo contiene directamente.
Por ejemplo, nuestra denostada en medio mundo "" se escribir:
Ñ o bien Ñ
Esto habr que hacerlo con todos los caracteres que no sean las letras
del alfabeto, los nmeros y unos pocos signos, como el punto, la coma,
el guin y algunos otros. Desde luego hay que codificar todas las letras
acentuadas, ees, cedillas, etc., etc.
A continuacin se muestra una tabla con todos los caracteres, tambin
estn las letras, pero stas slo le sern tiles en caso de necesitar
escribir textos un tanto raros.
Como puede comprobar, la tabla tiene una columna con el carcter
deseado seguida de su cdigo numrico, una descripcin del carcter y
despus un nombre corto (una especie de alias) que para los ms
37
habituales se llegan a memorizar, y para cosas cortas, ayudan. No todos

tienen ese nombre corto, y esos hay que escribirlos con el cdigo
numrico.
Generalmente, se pueden escribir directamente desde teclado todos los
que no tienen alias en la tabla, los que s tienen normalmente darn
problemas en sistemas diferentes al que se ha utilizado para escribir el
documento. Si tiene la seguridad de que lo que escribe en HTML slo va
a ser utilizado como ficheros locales en mquinas similares a la suya, no
ser necesario complicarse la vida; pero si sus pginas van a residir en
un servidor WWW, cualquier tipo de mquina podr acceder a ellas, y su
aspecto no ser el adecuado en algunas.
Existen multitud de editores especiales para escribir HTML, y la mayora
de ellos tienen herramientas para convertir de forma automtica los
caracteres especiales a su correspondiente cdigo. Tambin hay
paquetes de "macros" para hacer lo mismo con procesadores de texto
como Word o Word Perfect.
Caracter Cdigo
Tabla de smbolos
Descripcin
Alias
!
Cerrar exclamacin
--
"
"
Dobles comillas
--
#
Signo de nmero
--
$
Dlar
--
%
Tanto por ciento
--
&
&
Ampersand
--
'
'
Apstrofe
--
(
Cerrar parntesis
--
)
Abrir parntesis
--
*
Asterisco
--
+
Signo ms
--
,
Coma
--
-
Guin
--
.
Punto
--
/
Barra de divisin
--
0-9
0 - 9
Dgitos del al 0-9
--
:
Dos puntos
--
;
Punto y coma
--
<
<
Menor
--
<
<
Menor
<
38
=
Igual
--
>
>
Mayor
--
>
>
Mayor
>
?
Cerrar interrogacin
--
@
Arroba
--
A-Z
A - Z
Letras A-Z
--
[
Cerrar corchete (izquierdo)
--
\
Barra inversa
--
]
Abrir corchete
--
^
Circunflejo
--
_
Subrayado
--
`
Acento agudo
--
a-z
a - z Letras a-z
--
{
Abrir llave
--
|
Barra vertical
--
}
Cerrar llave
--
~
Tilde
--

Espacio sin separacin

¡
Abrir exclamacin
¡
¢
Centavo
¢
£
Libra Esterlina
£
¤
Signo de divisa general
¤
¥
Yen
¥
¦
Barra vertical partida (pipe)
¦
§
Seccin
§
¨
Diresis
¨
©
Copyright
©
ª
Doa
ª
«
Abrir comillas francesas
«
¬
No (smbolo lgico)
¬

Guin dbil

®
Registrado
®
¯
Macrn
¯
°
Grados
°
39
±
Ms-menos
±
²
Dos superndice
²
³
Tres superndice
³
´
Acento agudo
´
µ
Micro
µ
¶
Fin de prrafo
¶
·
Punto medio
·
¸
Cedilla
¸
¹
Uno superndice
¹
º
Gnero masculino
º
»
Cerrar comillas francesas
»
¼
Un cuarto
¼
½
Un medio
½
¾
Tres cuartos
¾
¿
Abrir interrogacin
¿
À
A mayscula, acento grave
À
Á
A mayscula, acento agudo
Á
Â
A mayscula, acento circunflejo
Â
Ã
A mayscula, tilde
Ã
Ä
A mayscula, diresis
Ä
Å
A mayscula, anillo
Å
Æ
AE mayscula
Æ
Ç
C cedilla mayscula
Ç
È
E mayscula, acento grave
È
É
E mayscula, acento agudo
É
Ê
E mayscula, acento circunflejo
Ê
Ë
E mayscula, diresis
Ë
Ì
I mayscula, acento grave
Ì
Í
I mayscula, acento agudo
Í
Î
I mayscula, acento circunflejo
Î
Ï
I mayscula, diresis
Ï
Ð
Eth mayscula
Ð
Ñ
Ee mayscula
Ñ
Ò
O mayscula, acento grave
Ò
40
Ó
O mayscula, acento agudo
Ó
Ô
O mayscula, acento circunflejo
Ô
Õ
O mayscula, tilde
Õ
Ö
O mayscula, diresis
Ö
×
Signo de multiplicacin
×
Ø
O barrada mayscula
Ø
Ù
U mayscula, acento grave
Ù
Ú
U mayscula, acento agudo
Ú
Û
U mayscula, acento circunflejo
Û
Ü
U mayscula, diresis
Ü
Ý
Y mayscula, acento agudo
Ý
Þ
THORN mayscula
THORN
ß
Beta minscula
ß
à
a minscula, acento grave
à
á
a minscula, acento agudo
á
â
a minscula, acento circunflejo
â
ã
a minscula, tilde
ã
ä
a minscula, diresis
ä
å
a minscula, anillo
å
æ
ae mnuscula
æ
ç
c cedilla minscula
ç
è
e minscula, acento grave
è
é
e minscula, acento agudo
é
ê
e minscula, acento circunflejo
ê
ë
e minscula, diresis
ë
ì
i minscula, acento grave
ì
í
i minscula, acento agudo
í
î
i minscula, acento circunflejo
î
ï
i minscula, diresis
ï
ð
eth minscula
ð
ñ
ee minscula
ñ
ò
o minscula, acento grave
ò
ó
o minscula, acento agudo
ó
ô
o minscula, acento circunflejo
ô
41
õ
o minscula, tilde
õ
ö
o minscula, diresis
ö
÷
Signo de divisin
÷
ø
o barrada minscula
ø
ù
u minscula, acento grave
ù
ú
u minscula, acento agudo
ú
û
u minscula, acento circunflejo
û
ü
u minscula, diresis
ü
ý
y minscula, acento agudo
ý
þ
thorn minscula
þ
ÿ
y minscula, diresis
ÿ
42
Hiperenlaces
El siguiente elemento es uno de los ms importantes del HTML, ya que

es el que realmente permite "navegar" por uno o varios documentos,
que pueden residir en cualquier parte, dando, sin embargo, la impresin
de que se trata de un solo documento.
Esto se consigue definiendo enlaces hipertextuales del Web mediante el
elemento <A> y sus atributos: NAME, HREF y TARGET. El lector podr
por tanto explorar el documento picando con el ratn sobre las zonas
activas definidas, denominadas hipertexto. Estas zonas activas pueden
corresponder a un grupo de caracteres, una imagen, o bien una porcin
de imagen. En cualquier caso el principio es el mismo: asociar a la zona
activa la direccin URL del documento que sustituir al visualizado
cuando se pulse con el ratn sobre esa zona. (Ver El protocolo de
direccionamiento de documentos: URL)
Un puntero puede colocarse en cualquier lugar del texto. Puede ser un
elemento de una lista, o texto normal; puede estar enriquecido con
atributos de estilo fsico, lgico o de prrafo. Sin embargo, no es
necesario darle un atributo para hacerlo reconocible como tal: los
enlaces activables se destacan automticamente (color y subrayado),
siempre y cuando el usuario no realice una parametrizacin especial del
browser.
La definicin por defecto del color de los enlaces de un documento
puede ser modificada mediante el elemento <BODY> y los atributos
LINK, ALINK y VLINK.
Para especificar la partida y la llegada de un enlace hipertexto se define:
Ancla de partida: es la zona activa sobre la que el lector pulsar con el
ratn para llamar a una nueva pgina. Este ancla se define mediante el
atributo HREF.
Ancla de llegada: es una zona inactiva que especifica el punto de llegada
de un enlace de hipertexto. Esta es pues una direccin. Este ancla se
define mediante el atributo NAME.
43
A
El elemento <A> se utiliza para definir los enlaces hipertexto de los
documentos HTML. Este elemento nunca se utiliza solo, por tanto
siempre vendr acompaado por, al menos, uno de sus dos atributos
principales:
El atributo HREF que define un ancla de partida.
El atributo NAME que define un ancla de llegada.
Adems permite El atributo TARGET para ordenar la apertura de una
nueva ventana del browser con la pgina indicada por HREF.
A continuacin se detallan cada uno de estos atributos.
El atributo NAME
Este atributo define un punto de llegada en el documento destino
asignndole un nombre o etiqueta:
<A NAME="etiqueta"> Zona no activable </A>
Luego mediante el atributo HREF desde el fichero de partida se indicar
el documento y la posicin dentro de dicho documento a la que se
quiere acceder:
<A HREF="documento#etiqueta"> Zona activable </A>
Hay que tener en cuenta que la etiqueta debe estar compuesta por un
texto sin espacios en blanco, caracteres especiales ni caracteres
codificados. Dicha etiqueta no deber estar repetida dentro del mismo
documento destino.
El atributo HREF
Este atributo define un ancla de partida hacia un enlace externo o
interno, o sea, crea un enlace hacia un nuevo documento propuesto por
dicho servidor o hacia un punto determinado dentro del documento
actual. La sintxis tpica es:
<A HREF="url_de_destino">zona activable con atributos visuales</A>
Ejemplos:
<A HREF="http://ccdis.dis.ulpgc.es/logo.html">
Logotipo del Departamento de Informtica y
Sistemas de la ULPGC
</A>
Logotipo del Departamento de Informtica y Sistemas de la ULPGC
44
Tambin se pueden (o ms bien se deben) usar direcciones relativas:

<A HREF="indice.htm"> Indice </A>
Indice
El valor de los atributos hay que escribirlos EXACTAMENTE como se
deba, respetando las maysculas y minsculas. Si se escribiese el
nombre del protocolo (http://), del servidor (ccdis.dis.ulpgc.es/), o del
fichero (logo.html) con alguna diferencia, la direccin sera errnea y el
documento no sera encontrado.
Si se desea ir directamente a la home page (pgina local) de un
servidor, el URL se compondr nicamente del nombre del servidor.
Como puede comprobar en el ejemplo anterior la direccin URL
comienza con el nombre del protocolo o tipo de servicio. En este caso se
trata de http:// pero hay tambin otros tipos de Servicios de Internet.
El atributo TARGET
Este atributo ordena la apertura de una nueva ventana con el
documento indicado por el atributo HREF.
Ejemplo:
<A HREF="indice.htm" TARGET="ventana2">
Nueva ventana
</A>
Nueva ventana
Si pulsa con el ratn sobre este hiperenlace se visualizar el Indice en
una nueva ventana del browser.
Enlaces a puntos internos a un documento
Como hemos visto hasta ahora el atributo HREF sirve para enlazar con
otro documento que puede estar en un servidor o ser un fichero local.
Dicho documento se presentar siempre desde la primera pgina.
Para acceder a un punto determinado de un documento se debe definir
el ancla de llegada en el documento destino mediante el atributo NAME ,
como se vi anteriormente. Luego se debe indicar la direccin del
documento destino y del punto de comienzo, en el documento de
partida, mediante el atributo HREF. La sintxis es:
En el punto adecuado del documento destino:
<A NAME="etiqueta"> </A>
En el documento de partida:
<A HREF="destino.htm#etiqueta"> Zona activable </A>
De igual manera se puede referenciar un punto determinado dentro del
mismo documento activo:
<A HREF="#etiqueta"> Zona activable </A>
Todo esto es muy til cuando se trabaja con documentos grandes llenos
de secciones.
Ejemplos:
45
<A HREF="#aclaraciones"> Aclaraciones </A>
Aplicacin a notas al pie de pgina

Un ancla puede admitir varios atributos simultneamente. En este
apartado se utilizar la analoga con una nota al pie de pgina en un
texto impreso para estudiar la utilizacin de los atributos HREF y NAME
especificados en el mismo ancla.
Una nota al pie de pgina se suele especificar mediante un superndice,
invitando al lector a desplazar la vista a la parte inferior de la pgina
para leer una explicacin complementaria. Sequidamente habr que
volver al punto donde se encontraba la referencia en cuestin para
coninuar con la lectura.
Una pgina HTML puede ser muy larga, por lo que mirar una anotacin
de este tipo podra ser bastante tedioso, por tanto la implementacin de
una anotacin a pie pgina en una pgina Web se har de la siguiente
forma:
En el texto actual se coloca un ancla activa y pasiva de la forma:
... texto <A HREF="#nota1" NAME="vuelta1"> <sup>1</sup> </A>
... texto 1
Al principio del bloque de texto que compone la nota:
<A HREF="#vuelta1" NAME="nota1">1.</A> Texto de la nota...
1. Texto de la nota...
Pulsando en cada uno de estos enlaces podr comprobar el resultado.
Aclaraciones
El extremo de un enlace puede ser cualquier tipo de documento:
Un fichero HTML Una imagen GIF, JPEG o PostScript, un vdeo Un texto
Definir un enlace a una imagen es distinto que definir una imagen en
lnea ya que sta ltima siempre se visualizar al cargar la pgina,
mientras que el enlace visualizar la imagen tan solo cuando sea
activado.
Si en el documento de destino no existe el punto definido en el
documento de origen, el visualizador presentar en pantalla la ltima
lnea del mismo.
Al definir un enlace es preferible utilizar direcciones relativas. Si se
utilizan direcciones absolutas habr que modificar todas las direcciones
si los ficheros cambian de localizacin.
Si al definir un enlace no se especifica el nombre de un fichero despus
del nombre de la mquina, por defecto el servidor entender que se le
pide la home page (pgina inicial).
Si un servidor no tiene definida pgina inicial, simplemente mostrar
una lista de todos los ficheros y directorios que tenga en el directorio
definido como raz.
46
Si despus de la direccin de la mquina en lugar de un nombre de

fichero se pone el de un directorio, generalmente el servidor mostrar
un simple listado de los ficheros y directorios que ste contenga.
No slo se puede crear un enlace sobre un texto, tambin se puede
hacer sobre una imagen cualquiera. Es decir, despus del enlace y antes
de </A> se puedes poner lo que se quiera.
El arte de escribir buen HTML reside en dar una buena estructura a la
informacin. Siempre que se puedas hay que huir de crear pginas muy
largas. Es preferible crear cuantas hagan falta, con buena estructura y
enlzarlas con cuantos enlaces sean precisos.
Para utilizar direcciones absolutas con ficheros locales se deber
escribir: file:///C|/MIDIRECTORIO/mifichero.htm
Servicios de Internet
HTTP
Este es el protocolo del Web. Se utiliza para referenciar documentos
residentes en servidores Web.
HTTP://nombre_del_servidor/directorio/subdirectorio/fichero.htm
Por ejemplo:
http://ccdis.dis.ulpgc.es/
Esto, al omitir el nombre del fichero, har referencia a la pgina local
(home page) del servidor del Departamento de Informtica y Sistemas
de la ULPGC.
FTP
Ofrece servicios para la trasferencia de ficheros. Permiten proponer la
copia, en el ordenador local, de un fichero residente en el espacio de un
servidor Web.
Se puede proponer el acceso a un nico fichero del servidor o bien
proponer la totalidad de un directorio de servidor Web:
Especificacin de un directorio:
FTP://nombre_del_servidor/directorio/subdirectorio/
Por ejemplo:
ftp://sopa.dis.ulpgc.es/
Especificacin de acceso directo a un fichero:
FTP://nombre_del_servidor/directorio/subdirectorio/fichero
Por ejemplo:
ftp://sopa.dis.ulpgc.es/pub/doc/avisa
Bastar con pulsar sobre este hipertexto para provocar la transferencia del
fichero avisa.
47
NEWS
Las news son foros organizados en grandes mbitos de inters donde cada uno
puede participar en la discusin enviando y consultando artculos.
En un servidor temtico puede ser interesante crear una pgina HTML que
recoja los grupos de news en relacin con los temas del servidor.
Su especificacin es de la forma:
NEWS://nombre_del_grupo_de_news
Por ejemplo:
news://news.ulpgc.es
TELNET
Este URL es utilizado para la conexin entre ordendores. Permite obtener el
lanzamiento de una ventana TELNET que contendr la invitacin de conectarse
a la mquina especificada.
Su especificacin es de la forma:
TELNET://nombre_de_la_maquina
Por ejemplo:
telnet://sopa.dis.ulpgc.es/
GOPHER
Este URL permite una conexin a una sede gopher.
GOPHER://nombre_de_sede
Por ejemplo:
gopher://sopa.dis.ulpgc.es/
MAILTO
Este URL no es soportado por todos los browsers. Cuando se llama, se
proporciona al lector un cuadro de edicin, que le permite escribir correo
electrnico y poner la direccin en un campo especificado indicando su
direccin electrnica. Este correo se enva a la direccin indicada en el URL.
MAILTO:nombre_del_destinatario@sede
Por ejemplo:
mailto:a1989@correo.dis.ulpgc.es
FILE
Para especificar direcciones absolutas de ficheros locales se utilizar la
siguiente sintxis:
file:///C|/directorio/subdirectorio/nombre_del_fichero.htm
Si se trabaja con direcciones relativas bastar con especificar el path a partir
del directorio local. Hacer esto tiene la importante ventaja de no tener que
cambiar las direcciones cuando se produce un movimiento de ficheros.
Por ejemplo:
indice.htm
48
Frames
Los frames (en ingls frame = cuadro, bastidor, marco o panel) es un

elemento implementado por Netscape, que permite dividir la pantalla en
varias reas independientes unas de otras, y por tanto con contenidos
distintos, aunque puedan estar relacionados. Cada una de estas zonas
es capaz de mostrar cdigo HTML, como en las celdas de una tabla. Sin
embargo, no hay que confundir paneles con tablas ya que existe una
gran diferencia; en el caso de una tabla, todas las celdas forman parte
del mismo documento HTML, mientras que en el caso de los frames cada
zona de la pantalla es un documento HTML propio. Se ve pues,
simultneamente, en la misma ventana de un browser, la pgina
correspondiente a varios ficheros.
El concepto de frame elimina una de las limitaciones del Web ya que
hasta ahora, cada nuevo documento destrua el anterior, y obligaba al
usuario a usar demasiado el comando Back de los browsers. Ahora es
posible dedicar ciertas zonas a tareas bien definidas, como por ejemplo
tener en una zona un men que casi nunca ser necesario recargar.
La estructura general de un documento dividido en varios paneles difiere
de la de un documento clsico ya que en stos el cuerpo se inserta en
las marcas <BODY> y </BODY>, mientras que en los paneles, el cuerpo
del documento se inserta entre las marcas <FRAMESET> y
</FRAMESET>;.
El elemento <FRAMESET> permitir precisar la forma de los diferentes
paneles por medio de dos atributos: ROWS y COLS. <FRAME> es la
marca de definicin de los paneles creados con FRAMESET.
La mayora de los visualizadores no soportan los frames. Para que
nuestra pgina con frame no resulte opaca a ellos se utilizar el
elemento <NOFRAMES> que permite ofrecer un texto alternativo en
entorno normal.
Los paneles pueden estar relacionados y tener enlaces de unos a otros
para ello se utiliza el atributo TARGET que indica en qu panel debe
mostrarse el documento asociado a un enlace de hipertexto.
Al final de esta pgina se muestran diversos ejemplos de frames.
49
FRAMESET
Este elemento sustiye al elemento <BODY> y permite dividir una zona
en subzonas, bien verticalmente, bien horizontalmente. Si no hay
ninguna zona todava, las divisiones se aplican a la zona inicial formada
por el conjunto de la ventana del browser. Esta marca posee dos
atributos:
ROWS: Se utiliza para dividir la zona en subzonas horizontales. La
sintaxis es:
ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"
ROWS es una lista de valores enteros separados por comas. El nmero
de elementos de la lista corresponde al nmero de subzonas
horizontales a crear. Cada uno de los valores de la lista puede darse
segn uno de los tres formatos siguientes, donde n es un entero:
n: indica la altura de la subzona en pxels.
n%: indica la altura de la subzona expresada en porcentajes del tamao
de la zona madre.
n*: n es opcional. El carater * indica al browser que debe dar a la zona
todo el espacio an disponible.
COLS: Se utiliza para dividir la zona en subzonas verticales. La sintaxis
es igual que en el atributo ROWS.
ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"
Ejemplo: A continuacin se muestra dos maneras idnticas de dividir
una zona en tres. Las dos subzonas superiores son de tamao idntico y
la ltima es el doble de las anteriores.
<FRAMESET ROWS="25%,25%,50%">...<FRAMESET>
<FRAMESET ROWS="*,*,2*">...<FRAMESET>
FRAME
Es la marca utilizada para caracterizar las subzonas definidas mediante
la marca <FRAMESET>. Esta caracterizacin se realiza mediante los
siguientes atributos:
SCR: Indica el URL del documento que debe mostrarse en esa zona. Si
el atributo no se indica, entonces la zona estar vaca.
SCR="url"
NAME: Se utiliza para nombrar la zona a fin de que pueda convertirse
en el destino de cualquier enlace de hipertexto. La sintaxis del atributo
es:
NAME="nombre_de_la_zona"
MARGINWIDTH: Se utiliza para precisar el nmero de pxels entre los
bordes izquierdo y derecho de la zona y el documento HTML a visualizar,
en definitiva marca el margen izquierdo. La sintaxis es :
50
MARGINWIDTH="n"
MARGINHEIGHT: Se utiliza para precisar el nmero de pixels entre los
bodes superior e inferior de la zona y el documento HTML a visualizar. La
sintaxis es:
MARGINHEIGHT="n"
SCROLLING: Indica si la zona debe poseer una barra de desplazamiento
(SCROLLING="yes"), si no debe contar con ella (SCROLLING="no") o si
esta eleccin se deja en manos del browser (SCROLLING="auto"). La
sintaxis es:
SCROLLING="yes/no/auto"
NORESIZE: Indica al browser que no debe permitir que el usuario
modifique el tamao de la zona. Cuando este atributo no se precisa es
posible deformar una zona desplazando su frontera mediante el ratn.
NOFRAMES
Esta marca indica a todo browser incapaz de gestionar los frames el
texto que debe presentar al usuario en lugar de los paneles. Dicho texto
ir entre las marcas <NOFRAMES> y </NOFRAMES>. En realidad dichos
browsers ignorarn las marcas FRAMESET y NOFRAMES pero
casualmente no el texto comprendido entre stas ltimas. Por el
contrario un browser capaz de gestionar paneles interpretar las marcas
<NOFRAMES> y </NOFRAMES> y sabr que debe ignorar el texto
comprendido entre ellas.
El atributo TARGET
Este nuevo atributo afecta a las marcas que caracterizan los enlaces de
hipertexto, en particular a las marcas <A> y <FORM>. TARGET permite
precisar el nombre de la zona que debe recibir el documento
correspondiente al enlace. Por ejemplo:
<A HREF="/dossier.html" TARGET="zonadossier"> Ver el dossier </A>
El atributo TARGET existe para indicar al browser que, en respuesta a un
clic, debe mostrar el documento dossier.html en el panel cuyo nombre
es "zonadossier". De igual modo, el formulario definido por:
<FORM
ACTION="cgi_bin/test"
TARGET="zonascript"
METHOD="POST">
...
</FORM>
Mostrar sus resultados en el panel cuyo nombre es "zonascript".
El atributo TARGET puede tener tres valores diferentes:
Un valor que corresponde al nombre de un panel existente.El
documento asociado al enlace de hipertexto se muestra entonces en el
panel en cuestin.
Un valor que no corresponde a ninguno de los paneles existentes. El
browser crea entonces una nueva ventana y muestra el documento. Esta
51
nueva ventana se considera como un panel con el atributo TARGET del

origen
de
su
creacin.
TARGET puede tomar uno de los siguientes cuatro valores:
_blank, indica al browser que debe crear una nueva ventana con el fin de
mostrar el documento. La nueva ventana es un panel que no tiene
nombre y no puede ser por tanto el destino de otro enlace de hipertexto.
_self, indica que el documento se cargar en la misma zona donde se
encuentra el enlace de hipertexto. Se trata del valor predeterminado
cuando no se indica el atributo TARGET.
_top, indica al browser que suprima todos los paneles existentes y
visualice el documento de modo normal.
_parent, indica al browser que visualice el documento ocupando toda la
superficie de la zona en la que se ha visualizado el documento que
contiene el enlace. Esta nocin solo tiene sentido cuando los diferentes
niveles de paneles provienen del anidamiento de documentos y no del
anidamiento de marcas <FRAMESET>.
A continuacin se expondrn algunos ejemplos para que queden claros
todos los conceptos aprendidos.
A continuacin se detallan un conjunto de ejemplos que crean frames de
diversos tipos:
1. Sintaxis general
2. Areas verticales. (COLS)
3. Areas horizontales. (ROWS)
4. Areas verticales y horizontales combinadas. (COLS y ROWS)
5. Mrgenes forzados. (MARGINWIDTH y MARGINHEIGHT)
6. Referencias cruzadas
Un frame bsico. Sintaxis general
En general, todas las pginas que contengan un frame debern ser ms
o menos as:
<HTML>
<HEAD><TITLE> Mi titulo ></TITLE></HEAD>
<FRAMESET COLS=*,*>
<NOFRAMES>
<BODY>
Su visualizador no soporta frames. Pulse
<A HREF="indice.htm">aqui</A> para volver.
</BODY>
</NOFRAMES>
<FRAME SRC="doc_a.htm" >
<FRAME SRC="doc_b.htm" >
52
</FRAMESET>
</HTML>
Ejemplo real
Un frame de 3 reas verticales (COLS)
Se vera as:
Y se escribira; as:
<FRAMESET
COLS=30%,20%,50%>
<FRAME SRC="doc_a.htm">
A B C
<FRAME SRC="doc_b.htm">
<FRAME SRC="doc_c.htm">
</FRAMESET>
Ejemplo real
Un frame de 3 reas horizontales (ROWS)
Se vera as:
Y se escribira as:
<FRAMESET
ROWS=25%,25%,50%>
A
B
<FRAME SRC="doc_b.htm">
<FRAME SRC="doc_c.htm">
C
</FRAMESET>
Ejemplo real
Un frame combinado de un rea vertical y dos horizontales.
El frame A, no podr ser redimensionado (NORESIZE).
Se vera as:
Y se escribira as:
B
A
<FRAMESET COLS=20%,*>
C
<FRAME SRC="doc_a.htm"
NORESIZE>
<FRAMESET
ROWS=40%,*>
<FRAME
SRC="doc_b.htm">
<FRAME
SRC="doc_c.htm">
</FRAMESET>
</FRAMESET>
53
Ejemplo real
Un frame con dos reas verticales. Una normal, la otra con mrgenes
forzados para el texto (MARGINWIDTH MARGINHEIGHT)
Se vera as:
Y se escribira as:
<FRAMESET
COLS=50%,50%>
AA
<FRAME SRC="doc_a.htm"
AAAA
AA
MARGINWIDTH=50
MARGINHEIGHT=50>
</FRAMESET>
Ejemplo real
Un frame con referencias cruzadas (NAME TARGET)
Se vera as:
Y se escribira as:
<FRAMESET
COLS=50%,50%>
A
<FRAME
SRC="doc_aa.htm">
<FRAME SRC="doc_bb.htm"
NAME="VENTANA">
</FRAMESET>
Ejemplo real
Esto de los cruces es un poco complicado... fjate en el contenido de
cada pgina que entra en juego. Cuando actives Ejemplo real el fichero
llamado es ej_cruz.htm. Prubalo.
Fichero
Contenido
Accin
<A
HREF="doc_cc.htm"
Pone DOC_CC en el frame derecho
doc_aa.htm TARGET="VENTANA">
<A HREF="doc_cc.htm">
Trae DOC_CC
doc_bb.htm Esto es "VENTANA"
No hace nada
<A
HREF="doc_bb.htm" Pone DOC_BB en el frame derecho
TARGET="VENTANA">
porque se llama "VENTANA"
doc_cc.htm
<A HREF="doc_aa.htm">
Trae DOC_AA
ej_cruz.htm <FRAMESET>
<FRAME SRC="doc_aa.htm">
<FRAME
Pone
DOC_AA
izquierdo.
en
el
frame
SRC="doc_bb.htm" Pone DOC_BB en el frame derecho
54
NAME="VENTANA">
y
da como nombre "VENTANA"
</FRAMESET>
le
55
Formularios
Los formularios generan en la pantalla cuadros de dilogo con el lector

permitiendo as la interaccin con el usuario para consultas de bases de
datos, solicitudes de documentacin, ...
Como en un formulario en papel, se podrn tener zonas en las que se
introducir un texto, casillas de verificacin, listas de seleccin, etc... El
usuario rellenar estas zonas en su formulario las cuales se identifican
con un nombre simblico. Cuando el formulario se enva al programa
que lo va a tratar, ste recibe el identificador de cada zona y el valor
introducido. A dichos programas se les suele denominar scripts, y se han
de ejecutar en un espacio del servidor reservado a este efecto: el CGI o
Common Gateway Interface.
El tratamiento de los datos recibidos en el servidor desde los formularios
requiere conocer la tabla de conversin hexadecimal que utilizan la
mayora de los visualizadores. Dentro de un mismo parmetro las
palabras aparecern, en el destino, separadas por el signo +, y los
parmetros entre s por el smbolo&. Las letras acentuadas y otros
caracteres especiales sern valores hexadecimales precedidos del
smbolo %, como se muestran en la tabla de cdigos hexadecimales del
Netscape para Windows .
Para la creacin de formularios se utilizarn las siguientes marcas, que
permiten generar una interfaz de edicin, sin hacer referencia an a la
programacin de scripts de CGI:
la marca FORM que delimita el comienzo y fin de la definicin del
formulario.
la marca INPUT que permite crear diferentes tipos de entradas: campos
de edicin y diversos tipos de botones;
la marca SELECT que permite crear listas: mens despegables y listas
con barras de desplazamiento;
la marca TEXTAREA que genera una zona de edicin de texto libre.
Atributos comunes
Los siguientes atributos son comunes a las marcas que se definen en

este apartado para generar formularios:
56
El atributo NAME define el nombre que permitir al script identificar el

origen de los datos. Este nombre debe ser nico.
NAME=nombre_de_la_variable_asociada
El atributo VALUE puede ser definido para un campo de:
Texto:
permite
definir
el
contenido
del
campo.
Botn
SUBMIT:
indica
el
texto
a
escribir
en
el
botn.
Botn RADIO, Botn CHECKBOX: valor que se le asocia al botn cuando
ste est pulsado. El valor especificado por NAME identifica el bloque de
botones.
FORM
La marca <FORM> y </FORM> definen un formulario y entre ellas se
situarn todas las marcas que generan los diversos elementos que
componen un formulario. Esta marca debe ir acompaada
obligatoriamente
por
dos
atributos:
El atributo METHOD est dirigido al programador que codifica el script.
Al que puede darse el valor POST o el valor GET que define el modo de
transferencia de los datos hacia el script. El optar por uno u otro
obedece a complejas cuestiones de programacin basadas en la mxima
longitud de registro que puede enviarse; cada uno usa un canal de
salida distinto. El que soporta ms longitud es POST, y ser el que
utilicemos
en
casi
todos
los
ejemplos.
El atributo ACTION define la accin a ejecutar cuando se pulse el botn
de sumisin, indicando el URL del programa (script) encargado de tratar
los datos adquiridos desde el formulario.
<FORM
METHOD=tipo_de_metodo
ACTION=URL_del_script>
<FORM METHOD="post" ACTION=" cgi_bin/inscripcion">
INPUT
La marca <INPUT> servir para definir campos para entrar un texto y
botones que permiten escoger opciones.
Permite varios atributos adems de los ya comentados de modo general:
El atributo SIZE define la longitud de la ventana de texto.
El atributo MAXLENGTH define la mxima longitud de la cadena que se
puede escribir dentro de la ventana.
Ejemplo:
Definir una zona de entrada de texto simple de longitud 10 y longitud
mxima de la cadena 15.
Principio del formulario
Final del formulario
<input name="identidad" size=10 maxlength=15>
57
Como se puede observar en este ejemplo, el nmero mximo de

caracteres puede ser mayor que el tamao de la ventana y viceversa.
El atributo TYPE asociado a la marca INPUT permite la seleccin del
elemento de entrada. Puede tomar los siguientes valores:
TEXT: es la opcin seleccionada por defecto. Define una zona de entrada
de texto simple. El texto definido en VALUE aparecer en dicha zona,
para poder ser completado o modificado por el usuario.
<form>
<input type="text" value="Championes">
</form>
SUBMIT: desencadena el envo del formulario hacia el script; el texto
definido en VALUE se escribir en el botn:
<form>
<input type="submit" value="Salida">
</form>
RESET: permite borrar los datos ya entrados:
<form>
<input
type="reset"
value="Borrar">
</form>
PASSWORD: permite entrar una palabra clave de forma confidencial:
<form>
<input type="password" name "pwd">
</form>
CHEKBOX: crea un bloque de botones que permiten una seleccin
mltiple de opciones:
Principio
del <form>
formulario
<input
type="checkbox"
name="micro"
Macintosh
value="mac">Macintosh
<input
type="checkbox"
name="micro"
value="pc">PC
PC
</form>
RADIO: crea un bloque de botones que permiten una seleccin
exclusiva entre varias opciones
Principio
del <form>
formulario
<input type="radio" name="media" value="cd"
CD-ROM
checked>CD-ROM
<input
type="radio"
name="media"
value="dk">Disquete
Disquete
</form>
HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin
que aparezca nada en la pantalla.
58
<input type="hidden" name=nombre_de_variable

value=valor_de_la_variable>
IMAGE: hace que el visualizador presente una imagen que es sensible al
ratn. Lo que el formato enva al servidor es un registro cuyos campos
son el nombre definido para la imagen seguido de los parmetros .x=n y
.y=m donde n y m son los nmeros de las coordenadas x,y del punto en
el que estaba el ratn en el momento del envo. Para representar la
imagen se utiliza el atributo SRC del elemento IMG. Por ejemplo:
<form method="post" action="http://mecaniza.sestud.uv.es/cgibin/test2-cgi">
<input type=image name="imagen" src="sugeren.gif">
</form>
Una posible respuesta podra ser:
imagen.x=7 & imagen.y=38
Los formularios que utilicen este tipo de recursos pueden prescindir del
tipo SUBMIT, ya que el formulario se cierra con la imagen.
SELECT
La marca <SELECT> permite generar listas de seleccin simple o de
seleccin variable. Se programa con una lista en la que los items se
especifican mediante la marca <OPTION>. La presentacin de la lista
depende del atributo SIZE; si su valor es inferior a 2 o est ausente, la
lista se interpreta como un menu desplegable (pop-list). En caso
contrario la lista se visualiza en una ventana con barra de
desplazamiento. El valor dado entonces al atributo SIZE da entonces el
nmero de lneas visibles en la ventana. La opcin de selecin multiple
se deriva de la presencia del atributo MULTIPLE.
Ejemplos:
Men despegable:
<form>
<select
NAME="sede">
<option>Entrada
indirecta
<option>Entrada
lateral
<option
SELECTED>Entrada
directa
</select>
</form>
Ventana con barra de desplazamiento: ( con opcin de seleccin mltiple
)
<form>
<select
MULTIPLE
NAME="lenguaje"
SIZE="3">
<option
SELECTED>Ada
59
<option>C++
<option>Cliper
<option>Pascal
<option>Fortran
<option>Cobol
</select>
</form>
La longitud de la ventana de seleccin se autoajusta al valor ms largo
de la lista. Se debe de procurar que los contenidos de los campos sean
lo ms cortos posibles; una excesiva longitud implica mayor trfico por
la red, pero se deben contruir las listas de forma clara, y que resulten de
fcil lectura al usuario, lo que puede aumentar la longitud de los valores.
Para solventar este dilema se utiliza el parmetro VALUE asociado al
atributo OPTION, el cual permite enviar un valor diferente al que aparece
en la lista.
Ejemplo:
A continuacin se muestra una lista contenida en una ventana con
barras de desplazamiento.

<form>
<select name="lista" size=3>
<option> Pista 1
<option> Pista 2
<option> Pista 3
<option value="Pista 4"> Pista 4 (para novatos)
<option> Pista 5
<option> Pista 6
</select>
</form>
Si se eligiese la opcin "Pista 4 (para novatos)" la variable lista tomara
el valor Pista 4.
TEXTAREA
La marca <TEXTAREA> permite crear una ventana con barras de

desplazamiento horizontales y verticales en la que se podr escribir
texto. El valor dado a los atributos ROWS (lneas) y COLS (columnas)
delimita el tamao de esta ventana.
Es posible predefinir un texto (entre las marcas <TEXTAREA> y
60
</TEXTAREA>) que el usuario podr reemplazar o completar con su

propio texto.
Ejemplo:
<form>
<textarea
name="comment"
rows=5
cols=40>
Introduzca
aqu
sus
comentarios
</textarea>
</form>
Estas lneas de cdigo muestran la siguiente ventana:

Ejemplo:
A continuacin se muestra un tpico y complejo formulario que contiene cada uno de
los elementos estudiados anteriormente organizados mediante el uso de una tabla.
F.Nac.:
Nombre:
DNI:
Apellidos:
Calle y nmero:
Ciudad:
Cdigo Postal:
Telfono:
Provincia:
Hombre
Estado Civil:
Espaol
Alemn
Mujer
Frances
Idiomas:
Ingls
Comentarios
personales:
Pulse aqu:
61
<FORM ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi"
METHOD=POST>
<CENTER>
<TABLE BORDER>
<TR>
<TD>Nombre:</TD>
<TD>
<INPUT
TYPE="text"
NAME="nombre"
SIZE=18
MAXLENGTH=18> F.Nac.:
<INPUT TYPE="text" NAME="edad" SIZE=8 MAXLENGTH=8> DNI:
<INPUT TYPE="text" NAME="dni" SIZE=8 MAXLENGTH=8></TD>
<TR>
<TD>Apellidos:</TD>
<TD> <INPUT TYPE="text" NAME="apellidos" SIZE=48
MAXLENGTH=48></TD>
<TR>
<TD>Calle y nmero:</TD>
<TD> <INPUT TYPE="text" NAME="domicilio" SIZE=48
MAXLENGTH=48></TD>
<TR>
<TD>Cdigo Postal:</TD>
<TD> <INPUT TYPE="text" NAME="postal" SIZE=5
MAXLENGTH=5>Ciudad:
<INPUT TYPE="text" NAME="localidad" SIZE=36
MAXLENGTH=36></TD>
<TR>
<TD>Provincia: </TD>
<TD> <INPUT TYPE="text" NAME="provincia" SIZE=20
MAXLENGTH=20>
Telfono:
<INPUT TYPE="text" NAME="telefono" SIZE=19
MAXLENGTH=19></TD>
<TR>
<TD>Estado Civil:</TD>
<TD> <SELECT NAME="OPCION">
<OPTION>Soltero
<OPTION>Casado
<OPTION>Divorciado
<OPTION>Otro
</SELECT>
<INPUT TYPE="radio" NAME="sexo" VALUE="H"> Hombre
62
<INPUT TYPE="radio" NAME="sexo" VALUE="M"> Mujer </TD>

<TR>
<TD>Idiomas:</TD>
<TD><INPUT TYPE="checkbox" NAME="idiomas" VALUE="E">
Espaol
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="A"> Alemn
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="F"> Frances
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="I"> Ingls
</TD>
<TR>
<TD>Comentarios<BR> personales:</TD>
<TD><TEXTAREA
NAME="coment"
COLS=48></TEXTAREA></TD>
ROWS=2
<TR>
<TH>Pulse aqu:</TH>
<TD ALIGN=CENTER>
<INPUT TYPE="submit" VALUE="Enviar datos ">
<INPUT TYPE="reset" VALUE="Borrar los datos"></TD>
</TABLE>
</CENTER>
</FORM>
63

Manual Extenxo HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Manual Extenxo HTML

Transféré par

Droits d'auteur :

Formats disponibles

2007

GUIA DETALLADA DE HTML

Elementos del lenguaje HTML

A las instrucciones que forman el lenguaje HTML las denominaremos

SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES

GUIA DETALLADA DE HTML

Estructura de un documento HTML

Los documentos escritos en HTML empezarn por la marca <HTML> y

HEAD, TITLE, META, BASE

SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES

GUIA DETALLADA DE HTML

Es lo que aparece en la esquina superior izquierda cuando se imprime el

SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES

GUIA DETALLADA DE HTML

<TITLE>Estructura mnima de un documento HTML</TITLE>

Separadores de bloques de texto

SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES

GUIA DETALLADA DE HTML

prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2,

Esto dar como resultado:

Texto justificado a la derecha, texto justificado

SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES

GUIA DETALLADA DE HTML

<HR WIDTH=250 SIZE=3>

SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES

GUIA DETALLADA DE HTML

Tekin Tontu <BR>

Esto dar como resultado:

SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES

GUIA DETALLADA DE HTML

Este ltimo ejemplo es un prrafo de texto centrado mediante el

En este apartado se indica cmo definir cabeceras mediante el elemento

GUIA DETALLADA DE HTML

El elemento <Hn> se utiliza fundamentalmente para escribir encabezamientos.

(Ver cdigo fuente)

(Ver cdigo fuente)

<FONT SIZE=4 COLOR=#008000> Texto de color verde y tamao 4.<FONT>

SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES

GUIA DETALLADA DE HTML

<FONT SIZE=+2>Este texto es del tamao 3+2=5.</FONT>

SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES

GUIA DETALLADA DE HTML

Los estilos lgicos estn pensados para caracterizar determinadas

Se pueden anidar distintos estilos obteniendo resultados como estos:

Los colores se identifican mediante el nombre del color en ingls o bien

SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES

GUIA DETALLADA DE HTML

Colores del entorno

Color del texto

Como se coment en la introduccin el color se puede indicar tanto mediante

Colores del entorno

GUIA DETALLADA DE HTML

Medium Aquamarine rgb=#32CD99 TEXTO

Medium Sea Green

Medium Slate Blue

Baker's Chocolate rgb=#5C3317

Medium Violet Red

SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES

GUIA DETALLADA DE HTML

New Midnight Blue

Corn Flower Blue rgb=#42426F

Dark Olive Green rgb=#4F4F2F

Dark Slate Blue

Dark Slate Grey