Lenguaje HTML

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin
UNIVERSIDAD TECNOLGICA NACIONAL

Facultad Regional Crdoba
Secretaria de Extensin Universitaria
rea Tecnolgica de Educacin Virtual
Coordinador General de Educacin Virtual: Magster Leandro D. Torres
Curso:
Desarrollo y Diseo de Pginas Web EV 3070
Mdulo:
Lenguaje HTML
Tutor:
Ing. Ricardo Martn Espeche
Ing. Ricardo M. Espeche
Datos del Autor

Nombre: Ricardo Martn Espeche
Ttulo Universitario: Ing.
Aeronutico de Crdoba.
en
Sistemas
otorgado
por
Instituto
Universitario
Antecedentes profesionales:
Administrador del DEPARTAMENTO DE DESARROLLO WEB, a cargo del desarrollo y
administracin del sitio Web del Instituto Universitario Aeronutico
Administrador de Servidores Web.
Instalador de redes de computadoras.
Programador de aplicaciones para Internet.
Desarrollador de aplicaciones relacionales con Visual Basic.
Antecedentes acadmicos:
Profesor de cursos de Visual Basic 6 en el Instituto Adminnet.
Profesor de cursos de Sitios Web-ASP-SQL en el Instituto Adminnet.
Carta al Alumno
Estimado alumno
Bienvenido al mundo de Internet. Usted est por comenzar el
estudio de uno de los lenguajes de programacin ms difundidos en todo el mundo.
La creacin de pginas Web est a la orden del da. Se venden
libros, se venden programas para hacer pginas Web todos los das... Incluso el
conocimiento de saber disear estas pginas, es un requisito muy considerable en
muchos currculos. La demanda sobre informacin tcnica de Internet aumenta, sobre
todo en el mbito de la Web.
Gracias a este curso, aprender todos los secretos de la Web y
adquirir slidos conocimientos sobre la creacin de pginas Web, diseo grfico y
manejo de las ltimas tecnologas...
Deseo que este material de estudio pueda satisfacer sus
expectativas, para lograr un buen aprendizaje del tema propuesto, confiando en que
nuestra relacin sea lo suficientemente fluida para salvar cualquier duda problema
que pueda presentarse.
Esperando su consulta por cualquier tema en que pueda serle til,
lo saludo cordialmente.
Ing. Ricardo Martn Espeche Hidalgo
INDICE
UNIDAD 1: EL HTML COMO LENGUAJE DE PROGRAMACIN
1.1 Introduccin al curso
1.1.1- Qu es Internet?
1.1.2- Qu es HTML?
1.1.3- Versiones del HTML
1.1.4- Un modelo no-lineal
1.1.5- Estndares
1.2 Antes de empezar
1.2.1- Etiquetas
1.2.2- Atributos
1.2.3- Valores
1.2.4- Estructura HTML
1.2.5- Simetra
1.3 Manejo de caracteres
1.3.1- Caracteres extendidos en HTML
1.3.2- Juego de caracteres
1.3.3- Caracteres de control
1.3.4- Maysculas, espacios y comillas
1.4 Formato bsico
1.4.1- Formato del prrafo
1.4.2- Cabeceras
1.4.3- Cambiando el tipo de letra
1.4.4- Formato de frase
1.4.5- Otros elementos
1.5 Enlaces
1.5.1- La etiqueta Anchor
1.5.2- Las URLs
1.5.3- Anclas
1.5.4- Enlaces absolutos
1.5.5- Enlaces relativos
1.5.6- Enlaces con imgenes
1.6 Listas
1.6.1- Listas desordenadas
1.6.2- Listas ordenadas
1.6.3- Listas de definiciones
1.6.4- Otros tipos de listas
1.7 Imgenes
1.7.1- Alineacin respecto al texto
1.7.2- Acerca del tamao de las imgenes
1.7.3- Optimizar los grficos
1.8 Formato del texto
1.8.1- Tamaos del texto
1.8.2- Cambio de color
1.8.3- Tipo de letra
1.9 Estructura del documento
1.9.1- La cabecera
1.9.2- El cuerpo
1.10 Formularios
1.10.1- Cajas de texto
1.11
1.12
1.13
1.14
1.15
1.16
1.17
1.18
1.19
1.10.2- Opciones
1.10.3- Botones del formulario
Controles avanzados para formularios
1.11.1- Botones
1.11.2- Etiquetas
1.11.3- Agrupacin de elementos
1.11.4- Controles deshabilitados y de solo lectura
1.11.5- Dirigir el foco hacia un elemento
Mapas
1.12.1- Mapas gestionados por el cliente
1.12.2- Cmo usar un mapa
Tablas
1.13.1- Definir las filas
1.13.2- Definir las celdas
1.13.3- Ttulo de la tabla
Marcos
1.14.1- Etiqueta <FRAMESET>
1.14.2- Etiqueta <FRAME>
1.14.3- Acceso a otros marcos
Hojas de estilo
1.15.1- Clases
1.15.2- Etiquetas <SPAN> y <DIV>
Atributos de CSS
1.16.1- Propiedades de bloque
1.16.2- Propiedades del tipo de letra
1.16.3- Propiedades de formato del texto
1.16.4- Propiedades de color y fondo
1.16.5- Propiedades de clasificacin
Lenguajes de script
1.17.1- Javascript
1.17.2- Programa Applet
1.17.3- La etiqueta <NOSCRIPT>
Capas
1.18.1- Definicin
1.18.2- Propiedades
Sonido
1.19.1- Sonido activado por el usuario
1.19.2- Sonido de fondo
1.1 INTRODUCCIN
A medida que la popularidad de Internet crece y las intranets se van incorporando en
las empresas de todo el mundo, cada vez ms fanticos de Internet se van interesando
en crear sus propias pginas Web.
Disear una pgina Web es bastante fcil si contamos con editores grficos que nos
permite realizar pginas con diseo profesional y con una buena interaccin con el
usuario. Pero una vez que desarrollamos una pgina sabemos cmo se estructura la
misma a nivel de cdigo fuente? Si nos ponemos a pensar, diramos: para que nos
sirve saber del cdigo, si el programa de diseo lo crea el mismo. Bueno, no siempre
necesitaremos ir al cdigo fuente y modificarlo, pero es de gran ayuda saber lo que
estamos haciendo y cmo se hace, ya que los programas, aunque son muy eficientes a
la hora de disear una pgina, no poseen gran flexibilidad cuando trabajamos con
diseos muy elaborados.
1.1.1- Qu es Internet?
Ciertamente en nuestros das somos testigos de una revolucin en las comunicaciones;
un evento tan importante que est cambiando nuestras costumbres en la forma de
comunicarnos, as como est derrumbando las barreras que antes nos imponan las
distancias. Veamos unos ejemplos:
En la biblioteca de alguna universidad, un alumno revisa los catlogos de la

biblioteca del congreso norteamericano para poder desarrollar su investigacin.
Un grupo de investigadores dispersos por el mundo llevan a cabo una tarea

conjunta, mantenindose en permanente contacto a travs del correo
electrnico.
Reuniones virtuales de ejecutivos, ahorran una enorme cantidad de tiempo y

dinero.
Desde la pantalla de su computador, un agente de bolsa puede tener

informacin actualizada de los movimientos de las otras bolsas en el mundo.
Estos ejemplos, y muchos ms tienen un factor en comn: Internet, esta red de

computadores de alcance mundial, le afectar, tarde o temprano, si es que ya no lo
hizo.
Internet es un conjunto de servicios distribuidos alrededor del mundo, al que
pueden accederse desde cualquier computador conectado a la red. Las conexiones
pueden ir desde econmicas lneas telefnicas y mdems, hasta muy costosas
tecnologas de comunicacin que enlazan grandes empresas y universidades.
Los ms populares servicios que Internet nos ofrece son el correo electrnico y el
World Wide Web (tambin conocido simplemente como "el Web"). El correo electrnico
es el equivalente de una casilla postal comn, donde usted recibe su correspondencia y
a la vez puede despachar sus cartas hacia todo el mundo. El Web es el equivalente a
una oficina de una empresa, donde puede poner a disposicin pblica productos,
servicios, reas de soporte al cliente, y en general cualquier informacin de la
empresa. La informacin que las empresas y personas ponen a disposicin pblica a
travs del Web, est en un lenguaje especialmente diseado para esto, llamado
universalmente HTML (HyperText Markup Languaje). El mismo est siendo adoptado
como el estndar universal para la creacin y distribucin de informacin no slo en
ambientes pblicos, sino tambin en los entornos privados al interior de las compaas
y las corporaciones.
1.1.2- Qu es HTML?
Para publicar informacin y distribuirla globalmente, se necesita un lenguaje entendido
universalmente, una especie de lengua franca de publicacin que todas las
computadoras puedan comprender potencialmente. El lenguaje de publicacin usado
por la World Wide Web es el HTML (acrnimo de HyperText Markup Language,
Lenguaje para el Formato de Documentos de Hipertexto).
El HTML da a los autores las herramientas para:
Publicar documentos en lnea con encabezados, textos, tablas, listas, fotos, etc.
Obtener informacin en lnea a travs de vnculos de hipertexto, haciendo clic

con el botn de un ratn.
Disear formularios para realizar transacciones con servicios remotos, para

buscar informacin, hacer reservas, pedir productos, etc.
Incluir hojas de clculo, video clips, sonidos, y otras aplicaciones directamente

en sus documentos.
1.1.3- Versiones del HTML

HTML 2.0: Cuando se produjo la explosin de Internet el estndar de HTML que
circulaba era el 2.0 (establecido en noviembre del 95), de modo que cualquier
navegador que encontremos ser capaz de interpretarlo. Prcticamente todo lo que
veamos en los prximos seis captulos est contemplado por este estndar.
HTML 3.0 y 3.2: Aunque la versin 2.0 cumpla bien el objetivo para el que se cre,
careca de herramientas para tener un control mnimamente complejo de los
documentos. No se consider necesario que lo tuviera, ya que por aquel entonces
Internet era un fenmeno ms bien circunscrito a la actividad acadmica y el contenido
primaba sobre el diseo. Debido a ello, Netscape (lder del mercado de navegadores
por aquel entonces) empez a incluir etiquetas nuevas no incluidas en ningn
estndar. Por estos problemas, el IETF (el comit que suele decidir todos los
estndares dentro de Internet) comenz a elaborar el borrador del HTML 3.0, que
result ser demasiado grande para la poca, lo que dificult su aceptacin en el
mercado. Esto llev a una serie de compaas (entre ellas Netscape, Microsoft, IBM,
Sun, etc...) a crear un nuevo comit llamado W3C, que es el que actualmente elabora
las nuevas versiones del HTML. Su primer trabajo consisti en crear el borrador del
HTML 3.2, que inclua muchas de las mejoras que los principales navegadores
(Netscape y Explorer) haban introducido en Internet, como son las tablas, los applets,
etc Este borrador fue aprobado en enero de 1997 e inmediatamente el W3C se puso
a trabajar en la elaboracin del siguiente estndar: el 4.0.
HTML 4.0: En julio de 1997 se presenta el borrador de este estndar. Por fin se
estandarizan los marcos (frames), las hojas de estilo y los scripts (entre otras cosas).
El 17 de diciembre de 1997 dicho borrador fue finalmente aprobado.
1.1.4- Un modelo no-lineal

Deberas haber odo que los entornos de hipertexto e hipermedia en el Web son
considerados como no-lineales. Lo que esto pretende explicar es que en vez de ofrecer
la informacin en una lnea, de estilo pgina tras pgina, la estructura del Web permite
a los visitantes de los sitios saltar de una informacin a otra enlazada y a otros sitios
relacionados.
Esto tambin significa que los codificadores de HTML necesitan tener algn sentido del
entorno y como crear una arquitectura efectiva dentro de este marco de trabajo. Dado
que la mayora de la gente est mentalizada en conceptos lineales y estn
acostumbrados a leer en una sola direccin, una pgina a la vez, la repentina y salvaje
Web puede llegar a ser excitante e irresistible. Esto hace que la arquitectura de las
pginas Web sea tan interesante para los navegantes.
En muchos casos, esto significa ofrecer una estructura linear, pgina por pgina,
dentro de los sitios Web, o crear sitios basados en estructuras jerrquicas que resulten
familiares. Esto controla el entorno y da a la gente una sensacin de seguridad de que
el hipertexto y el hipermedia no son lugares no-lineales repletos de saltos, y el usuario
final estar mucho menos confundido.
Una sencilla forma de hacerse una idea de este complejo concepto, no es ms que
fijarse en la ltima pgina Web que hayas visto y que tuviera varios enlaces,
navegacin y banners de publicidad.
A donde vas? Hars clic en el banner inmediatamente? Si lo haces, saldrs del sitio,
y perders todo el contenido que ests visualizando.
Lees todo el material primero y despus escoges un enlace del men de navegacin?
Si haces esto, cul escogeras? Posiblemente decidirs atacar el sitio a modo lineal,
primero leyendo el contenido, movindote desde el link situado ms arriba o ms a la
izquierda, y seguir adelante. O, posiblemente, te aventures en hacer un clic aleatorio
en un enlace de navegacin.
De cualquier forma, estas opciones te muestran claramente cmo el Web es un
entorno lleno de posibilidades... y confusin!
1.1.5- Estndares
Los estndares son reglas formales que deben pasar un examen riguroso por un
comit. En caso del HTML, dicho comit se refiere al World Wide Web Consortium
(W3C). Este grupo, es el cuerpo gubernamental de expertos acadmicos, profesionales
e industriales que estudian, comentan, y finalmente determinan lo que debe ser
publicado como un estndar.
Los estndares son importantes, son las guas con las cuales los navegadores as como
codificadores de HTML deberan estar trabajando. De todas formas, hay una mala
interpretacin con el HTML, donde algunos estndares no podran mantener los
cambios, as que se han excedido con ellos. Esto significa que las codificaciones,
usando el HTML para hacer diseos en todas las plataformas y todos los navegadores,
deberan de trabajar alrededor de un estndar que les asegurara y usara mtodos
convencionales para crear sitios Web efectivos.
Una convencin es simplemente una forma comn de hacer una tarea en particular. A
diferencia de un estndar, el cual formaliza la forma en que el grupo de la comunidad
responde a la informacin dentro del estndar, una convencin es el reflejo de las
prcticas de esa comunicad.
La flexibilidad es aqu lo que cuenta. Debers compaginar el conocimiento de las
convenciones de igual manera que el conocimiento de los estndares.
La organizacin que puede ayudar a darte flexibilidad es la World Wide Web
Consortium. Este consorcio fue formado el 14 de diciembre de 1994. Es una
organizacin independiente e internacional. La tarea del consorcio es tratar la
estandarizacin del HTML, as como varios protocolos y lenguajes relacionados con el
Web, incluyendo HTTP, URL, FTP, Gopher, WAIS, NNTP, SGML y SGL.
Un desarrollo interesante de este tipo de evolucin y las reglas formalizadas del comit
es que mientras la W3C ha sido el lder creciente en ofrecer sistemas de informacin
de Internet, la Web ha sido, tal como describimos antes, la popularidad del formato.
Algunos temas del consorcio han sido dejados de lado para centrarse ms en las
necesidades de satisfacer a los entusiastas del Web y animar a los desarrolladores para
una mayor flexibilidad. Algunos de los cambios propuestos incluyen mejores en los
protocolos. El HTTP: el mtodo de obtencin del HTML, est siendo tratado para
importantes cambios. Los nuevos cambios propuestos hablan de tecnologas que
mejorarn el diseo y funcionalidad de los sitios Web.
En principio cualquier navegador debera ser capaz de interpretar el HTML 4.0, pero
por si necesitas saber por alguna razn el estndar al que pertenece una etiqueta o
parmetro en particular, se incluir a lo largo de este curso uno de los siguientes
indicadores:
Introducido con la versin 3.2 del HTML
Introducido con la versin 4.0 del HTML
Etiqueta o parmetro no estndar soportado slo por el Netscape
Etiqueta o parmetro no estndar soportado slo por el Explorer
10
1.2 ANTES DE EMPEZAR

Para fomentar una slida compresin del HTML, miraremos la estructura del lenguaje
propiamente dicho. El funcionamiento de la sintaxis del HTML es anlogo a la sintaxis
de la gramtica espaola, pero, por supuesto, mucho ms sencillo.
El HTML es en realidad un lenguaje muy lgico. Ciertamente, hay excepciones a las
reglas, y modificaciones o interpretaciones de algunas de stas. De todas formas, una
vez que asimiles la estructura bsica, empezars a notar que el HTML es simplemente
un conjunto de piezas lgicas que hacen de l un lenguaje muy cmodo de usar.
Mientras que la evolucin es un estado natural del HTML, los cambios normalmente no
afectan a las reglas bsicas. Mientras que varios elementos de este lenguaje se hacen
obsoletos y otros nuevos son aadidos, la sintaxis, o la estructura correcta, raramente
sufren cambios.
Para comprender el concepto de sintaxis, piense en una frase, esta tiene un sujeto y
un verbo. Los adjetivos y los adverbios se aaden para aportar cualidades y
comportamiento, haciendo la frase ms comprensiva. El HTML es, en el fondo,
parecido a una simple frase. De hecho, los componentes del HTML siguen el mismo
concepto de sujeto, verbo y adjetivos/adverbios.
1.2.1- Etiquetas
Lo primero que hay que saber es el funcionamiento de los documentos HTML, que
significa Hyper Text Markup Language. Son lneas de texto modificadas con unas
marcas, llamadas etiquetas o tags.
Las etiquetas que encierran el texto son la de apertura <xxx> y la de cierre </xxx>.
Fjate cmo no hay espacios entre los signos de mayor y menor, y el lugar y la
orientacin de la barra diagonal en la etiqueta de cierre. Hay etiquetas que requieren
la de cierre (como <A> y </A>, otras que pueden tener etiqueta de cierre o no (como
<P>, que no siempre requiere </P>) y otras que no llevan nunca etiqueta de cierre
(como <IMG>, la cual jams lleva </IMG>). Para saber cundo se quiere etiqueta de
cierre, necesitars conocer todas y cada una de ellas, lo irs aprendiendo con la
experiencia.
1.2.2- Atributos
Los atributos modifican las acciones de las etiquetas. Muchas etiquetas pueden
permanecer solas, mientras que otras necesitan un atributo para darles funcionalidad.
Por ejemplo, <HTML> nunca lleva atributos, mientras que <BODY> puede llevarlos o no
(por ejemplo, <BODY BGCOLOR...>).
Ten en cuenta que los atributos siempre van en la etiqueta de apertura, nunca en la de
cierre. Es absurdo poner algo del estilo de </BODY BGCOLOR...>.
1.2.3- Valores
Definen el atributo al que se lo hemos aplicado. El valor puede ser una palabra (por
ejemplo <P ALIGN="center">...</P>) o un nmero de pixels o porcentaje (como en
<TABLE WIDTH="40%" HEIGHT="500">...</TABLE>). A veces un nmero no define un
11
nmero de pixels concreto, por ejemplo, al cambiar el tamao de las fuentes (<FONT
SIZE="5">...</FONT>) el nmero es simplemente orientativo, no tiene ninguna
relacin con el tamao final, y a veces puede ser en formato hexadecimal (16
nmeros, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F...), como en <FONT
COLOR="#FF0000">...</FONT>. Podrs conocer el funcionamiento de estos nmeros
ms adelante, cuando expliquemos los atributos que los requieren.
1.2.4- Estructura HTML
En el siguiente ejemplo podrs observar el cdigo de una pgina HTML simple:
<HTML>
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Mi Primera pagina</H1></CENTER>
<HR>
<P>Esta es mi primera pagina (chispas). Por el
momento no se que tendra, pero dentro de poco
pondre aqui muchas cosas interesantes.
</BODY>
</HTML>
Mirando el cdigo podrs haber visto un par de ejemplos que ya explicar ms
adelante. Pero como lo primero que debemos indicar es que el texto que estamos
componiendo es un documento HTML, lo indicamos as:
<HTML> ... </HTML>
Un documento HTML tiene una estructura que lo separa en dos partes: cuerpo y
cabecera. La parte contenida entre las etiquetas <HEAD> y </HEAD> o cabecera, que es
donde se introduce el ttulo de la pgina (dentro de <TITLE> y </TITLE>, que se
mostrar en la barra de ttulo de la ventana del explorador), las etiquetas <META> (que
nos servirn principalmente para dar de alta nuestra pgina en los buscadores de una
forma eficiente), los Scripts (para dar un funcionamiento dinmico a la pgina) y las
Hojas de estilo (un mtodo avanzado de formateado).:
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
En este ejemplo slo incluimos el ttulo de la pgina. Es lo que veremos como ttulo de
la ventana en los navegadores que lo permitan y como se conocer nuestra pgina en
algunos buscadores y en la agenda de direcciones (bookmarks) de los usuarios.
Ahora vamos a indicar el contenido que se encuentra entre las etiquetas <BODY> y
</BODY> o cuerpo, que es donde se introducen los dems elementos que se ven en
pantalla, como texto, imgenes, tablas, enlaces, formularios..., as como el color del
fondo o de los diferentes tipos de texto. Lo primero ser indicar que estamos en el
cuerpo del documento:
12
<BODY> ... </BODY>

Luego pondremos el ttulo algo recalcado:
<CENTER><H1> ... </H1></CENTER>
Con esto colocaremos el texto centrado (<CENTER>) y en formato <H1> (cabecera 1)
que nos asegura que aumentar el tamao del tipo de letra lo suficiente como para
que se vea bastante resaltado. Luego separamos ese ttulo que le hemos puesto a la
pgina del texto por medio de una lnea horizontal:
<HR>
La lnea horizontal carece de etiqueta de cierre. Esto es normal en etiquetas que no
varan los atributos de un texto, sino que insertan un elemento. Por ejemplo, para
indicarle que queremos separar el texto de la lnea horizontal con un espacio vertical
correspondiente a un prrafo nuevo le decimos:
<P>Esta es mi primera pagina (chispas). Por el momento no s que tendr,
pero dentro de poco pondr aqu muchas cosas interesantes.
No se asuste al leer el cdigo, porque ms adelante explicaremos todas las etiquetas
de un documento HTML. Lo que pretendo hacer con este ejemplo es definir la
estructura de un documento HTML. Entonces, siempre recuerde la siguiente
estructura:
<HTML>
<HEAD>
..
</HEAD>
<BODY>
..
</BODY>
</HTML>
1.2.5- Simetra
Poner las etiquetas en el orden correcto nos permitir una edicin del documento ms
rpida y efectiva
Por ejemplo: <I><B>Hola</B></I> y <I><B>Hola</B></I> dara el mismo resultado,
pero es ms recomendable usar lo segundo: puedes apreciar una simetra horizontal.
<I><B>Hola</B></I>
13
1.3 MANEJO DE CARACTERES

Habrs observado en el ejemplo anterior, que en los textos de los mismos no hay
acentos, ni ees, ni smbolos de abrir interrogacin o exclamacin. Esto es debido a los
distintos juegos de caracteres que manejan los ordenadores.
Las mquinas manejan la informacin en formato binario (es decir, en unos y ceros).
Estos, a su vez, forman nmeros, los cuales se traducen en letras. Cmo? Mediante
tablas. Podemos asignar el valor 64 a la letra a, el 65 a la b, etc
El problema est en que cada ordenador es de un fabricante distinto y puede adoptar
una tabla diferente al resto. Para evitarlo existen diversos estndares y el ms
extendido es el ASCII. De hecho, actualmente todos los ordenadores tienen la misma
tabla ASCII para los primeros 127 caracteres. Pero esa tabla no contiene vocales con
acento, ni ees, ni smbolos de abrir interrogacin o exclamacin... Esto nos pasa por
dejar que los norteamericanos sean quienes construyan las computadoras.
El HTML 2.0 eligi como tabla estndar la ISO-Latin-1, que comparte con la ASCII los
127 caracteres e incluye unos cuantos ms hasta el nmero 255.
1.3.1- Caracteres extendidos en HTML
La manera de incluir los caracteres extendidos (cuyo nmero est ms all del 127)
consiste en encerrar el cdigo entre los caracteres &# y ;. As pues, lo siguiente:
½
nos debera dar un medio (). Tambin existe una serie de sinnimos para poder
recordar con ms facilidad estos caracteres. As, por ejemplo, ½ tambin se
puede escribir como ½. Vamos a ver algunos de estos cdigos, los ms tiles a
la hora de escribir en espaol:
Cdigo
Resultado
á, Á, é,

É,...
, , , , , , , , y
¿
¡
º
ª
™
o
©
®

(espacio en blanco que no puede ser usado para

saltar de lnea)
14
1.3.2- Juego de caracteres

Este apartado puedes saltearlo si quieres, basta que sepas que todos los visores de
pginas Web actuales soportan todos los caracteres grficos de la especificacin ISO
8859-1, que permiten escribir textos en la mayora de los pases occidentales. Si tienes
que insertar en tu pgina Web algn carcter fuera de lo normal, lee este apartado.
Se han definido dos formas de representar caracteres especiales usando solamente el
cdigo ASCII de 7 bits. Estos caracteres pueden ser representados por un cdigo
numrico o una entidad cuando deseemos que aparezcan en el documento "tal cual".
A continuacin estn las principales entidades:
Carcter Cdigo
Entidad
Carcter Cdigo
Entidad
Carcter Cdigo
Entidad
Carcter Cdigo
Entidad
!
--
"
"
--
#
--
$
--
%
--
&
&
--
'
'
--
(
--
)
--
*
--
+
--
,
--
-
--
.
--
/
--
:
--
;
--
<
<
--
=
--
>
>
--
?
--
@
--
[
--
\
--
]
--
^
--
_
--
`
--
{ --
| --
} --
~ --
&
nbsp
¡ iexcl
¢ cent
£ pound
¤ curren
¥ yen
¦ brvbar
§ Sect
¨ uml
(c)
© copy
ª ordf
« laquo
¬ not
shy
(r)
® reg
¯ macr
° deg
± plusm
² sup2
³ sup3
´ acute
µ micro
¶ para
· middot
¸ cedil
¹ sup1
º ordm
» raquo
1/4
¼ frac14
1/2
½ frac12
3/4
¾ frac34
¿ iquest
À Agrave
Á Aacute
Â Acirc
Ã Atilde
Ä Auml
Å Aring
Æ AEling
Ç Ccedil
È Egrave
É Eacute
Ê Ecirc
Ë Euml
Ì Igrave
Í Iacute
Î Icirc
Ï Iuml
Ð Eth
Ñ Ntilde
Ò Ograve
Ó Oacute
Ô Ocirc
Õ Otilde
Ö Ouml
× times
Ø Oslash
Ù Ugrave
Ú Uacute
Û Ucirc
Ü Uuml
Ý Yacute
Þ Thorn
ß szlig
à agrave
á aacute
â acirc
ã atilde
ä auml
å aring
æ aeling
ç ccedil
è egrave
é eacute
ê ecirc
ë euml
ì igrave
í iacute
î icirc
ï iuml
ð eth
ñ ntilde
ò ograve
ó oacute
ô ocirc
õ otilde
ö ouml
÷ divide
ø oslash
ù ugrave
ú uacute
û ucirc
ü uuml
ý yacute
þ thorn
ÿ yuml
15
1.3.3- Caracteres de control

En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas,
establecer parmetros, etc... Para poder emplearlos sin riesgo deberamos escribir los
siguientes cdigos:
Cdigo Resultado
<
<
>
>
& &
" "
Si se quiere poner el carcter < en el texto deberan usar < (ASCII decimal 60)
para evitar la posible confusin con el comienzo de una etiqueta (delimitador de
apertura de etiqueta inicial). Anlogamente, se debera usar > (ASCII decimal 62)
en el texto en lugar de > para evitar problemas con agentes de usuario antiguos que
lo interpretan incorrectamente como el final de una etiqueta (delimitador de cierre de
una etiqueta) cuando aparece dentro de valores de atributos entrecomillados.
Se debe usar & (ASCII decimal 38) en lugar de & para evitar la confusin con el
comienzo de una referencia de caracteres (delimitador de apertura de una referencia a
entidades). Se debera usar tambin & en valores de atributos, ya que las
referencias de caracteres estn permitidas dentro de valores de atributos CDATA.
Algunas veces se usa la referencia a entidades de caracteres " para codificar las
comillas dobles ("), ya que este carcter puede utilizarse para delimitar los valores de
los atributos.
1.3.4- Maysculas, espacios y comillas
La forma correcta de poner una etiqueta es la siguiente:
<IMG SRC="hola.gif">
La utilizacin de maysculas y minsculas es indiferente en la etiqueta y el atributo (no
as en el valor, no siempre puede cambiarse indistintamente). Recomendamos ponerlo
como en el ejemplo, etiqueta y atributo en maysculas y el valor en minscula.
Fjate en las comillas. Se recomienda ponerlas siempre, aunque si el valor contiene
slo un simple nmero o una simple palabra no suele ser necesario. Por ejemplo,
width=200 y width="200" dara el mismo resultado, pero se recomienda poner siempre
las comillas (ALT=Aqu pone hola est mal, hay que poner ALT="Aqu pone hola").
El uso de los espacios de esta manera < IMG SRC = " hola.gif " > o de esta otra
<IMGSRC="hola.gif"> es totalmente incorrecto. El nico espacio debe estar situado
entre etiqueta/atributo y atributo_con_valor/atributo_con_valor. Por ejemplo:
<IMG SRC="hola.gif" ALT="hola">
16
Si queremos poner espacios en el texto normal y corriente, deberemos usar el carcter

especial . Por ejemplo:
Esta es mi pgina WEB
y
Esta
es mi pgina WEB
se veran de la siguiente forma:

Si queremos poner lo segundo, con cuatro espacios en blanco entre medio habr que
poner:
Y, para finalizar:
este es un texto <B>en negrita</B>
y
este es un texto<B> en negrita</B>
dara un resultado idntico, aunque se recomienda usar lo primero.
17
1.4 FORMATO BASICO

Se pueden establecer varias categoras dentro de las etiquetas usadas para brindarle
formato el texto. Nosotros las dividiremos entre aquellas que sirven para cambiar
prrafos enteros y las que son capaces de formatear lneas de caracteres dentro del
prrafo.
1.4.1- Formato del prrafo
Estas son las etiquetas ms importantes (excluyendo algunas que veremos ms
adelante):
Etiqueta
Utilidad
<P>
Sirve para delimitar un prrafo. Inserta

Soy un prrafo
una lnea en blanco antes del texto.
<CENTER> ...
</CENTER>
Permite centrar
prrafo.
<PRE WIDTH=x>
... </PRE>
Representa el texto encerrado en ella

con un tipo de letra de paso fijo. Obliga
a visualizar el texto tal y como ha sido
escrito,
respetando
tabulaciones,
espacios, retornos de carro, etc... Muy Estoy en paso fijo
til a la hora de representar cdigo
fuente. El parmetro WIDTH especifica
el nmero mximo de caracteres en
una lnea.
<DIV ALIGN=x>
... </DIV>
Resultado
todo
el
texto
del Yo soy normal

Yo estoy centrado
Yo estoy a la izquierda
Permite justificar el texto del prrafo a
Yo al centro
la izquierda (ALIGN=LEFT), derecha
Y yo a la derecha
(RIGHT), al centro (CENTER) o a Yo soy el ms cheto,
porque estoy en todos los
ambos mrgenes (JUSTIFY
)
lados.
<ADDRESS> ...
</ADDRESS>
Daniel Rodrguez Herrera

Para escribir direcciones (de esas
C/Ecuador 9, 1B
donde vive la gente, no electrnicas).
28220 Majadahonda
<BLOCKQUOTE>
...
</BLOCKQUOTE>
Para citar un texto ajeno. Se suele

implementar dejando mrgenes tanto a
izquierda como a derecha, razn por la
que se usa habitualmente.
Me gustara
reencarnarme en
las yemas de los
dedos de Warren
Beatty (Woody
Allen)
Las etiquetas de prrafo <P> nos servirn para iniciar un nuevo prrafo de texto. No
necesita la etiqueta </P> al final si no estn alineados de ninguna manera. Los
prrafos pueden alinearse. En este caso s que necesitan su correspondiente etiqueta
de cierre </P>. Son las siguientes:
18
<P ALIGN="LEFT"> Para alinear el texto con el margen izquierdo:

Este prrafo est alineado a la izquierda
<P ALIGN="CENTER"> Para centrar el texto:
Este prrafo est centrado.
<P ALIGN="RIGHT"> Para alinear el texto con el margen derecho:
Este prrafo est alineado a la derecha
<P ALIGN="JUSTIFY">
Para alinear el texto a los dos mrgenes. Es ignorado por
muchos navegadores, pero algunos no, como el Explorer 4.0.
Eso es un ejemplo el alineamiento justificado. Si se observa este breve
prrafo con exploradores como el Microsoft Internet Explorer 4.0 podrs
observar que los dos extremos, izquierdo y derecho, estn alineados.
Recuerda que para poder apreciar este efecto en los prrafos de texto,
necesitas escribir ms de 2 lneas.
Si se quiere hacer un salto de lnea o retorno de carro, habr que usar la etiqueta
<BR>. Por ejemplo:
<P>Esto<BR>es un prrafo
Se vera as:
Esto
es un prrafo
Dos <BR> equivalen a un <P>. Estos dos ejemplos retornan el mismo resultado:
1) <P>Esto es un prrafo
<P>Esto es otro
2) <P>Esto es un prrafo<BR><BR>
Esto es otro
Tambin puede usarse la etiqueta <NOBR>...</NOBR>. Es para no permitir el salto de
lnea, es decir, para hacer lneas muy largas en pginas en las que haya que usar la
barra de desplazamiento horizontal.
1.4.2- Cabeceras
Sirven para poner ttulos en nuestras pginas. Van entre las etiquetas <Hx> y </Hx>,
donde x en un nmero del 1 al 6. El 1 es la fuente de mayor tamao y 6 la de menor.
El que corresponde al tamao estndar del texto es 3. Estos nmeros no tienen nada
que ver con el nmero de pxeles ni con los nmeros de la etiqueta <FONT> que
veremos posteriormente.
19
La siguiente tabla, muestra los diferentes tipos de etiquetas con su respectivo

resultado:
Etiqueta
Resultado
<H1> ... </H1>
Cabecera de nivel 1
<H2> ... </H2>
Cabecera de nivel 2
<H3> ... </H3>
Cabecera de nivel 3
<H4> ... </H4>
Cabecera de nivel 4
<H5> ... </H5>
Cabecera de nivel 5
<H6> ... </H6>
Cabecera de nivel 6
Estas etiquetas se pueden definir como de formato de prrafo pero por su importancia
he preferido tratarlas aparte. No resulta recomendable utilizarlas para aumentar o
disminuir el tamao del tipo de letra, ya que cada navegador los muestra de manera
diferente. Se usan para dividir correctamente en secciones nuestra pgina, tal y como
se hace en un documento de texto normal.
1.4.3- Cambiando el tipo de letra
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo
de letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de
un prrafo.
Etiqueta
Utilidad
<B> ... </B>
Pone el
negrita.
<I> ... </I>
Representa
en cursiva.
<U> ... </U>
Para subrayar algo.
Como
soy
importante
subrayado
<S> ... </S>
Para tachar.
A m, en cambio,
nadie me quiere
<TT> ... </TT>
Permite representar
el texto en un tipo de No soy variable
letra de paso fijo.
Resultado
texto
el
en
texto
Soy un texto
negro como el
carbn
Estoy ladeado
muy
estoy
20
<SUP> ... </SUP>
Letra superndice.
E=mc2
<SUB> ... </SUB>
Letra subndice.
ai,j=bi,j+1
<BIG> ... </BIG>
Incrementa el tamao
Soy GRANDE
del tipo de letra.
<SMALL> ... </SMALL>
Disminuye el tamao
del tipo de letra.
Cre ver un lindo gatito
Hace parpadear el
texto. Resulta algo Molesto?
irritante.
<BLINK> ... </BLINK>
Para resaltar partes

de
texto
con
mrgenes a ambos
lados.
<BLOCKQUOTE> ... </BLOCKQUOTE>
Estoy en el
medio
1.4.4- Formato de frase

En estos elementos indicas el tipo de informacin que encierran las etiquetas, pero no
como se representan:
Etiqueta
Utilidad
<CITE> ... </CITE>
Contiene una cita o una

Esta frase no es ma
referencia a otras fuentes.
<CODE> ... </CODE>
Designa un fragmento de int x=0;

cdigo de computadora.
<STRONG> ... </STRONG>
Indica un
fuerte.
<EM> ... </EM>
Indica
(emphasis).
<KBD> ... </KBD>
Indica texto que debe ser El usuario debe teclear

introducido por el usuario. Multivac es el mejor.
<VAR> ... </VAR>
Indica que el texto es una

La variable x, definida
variable o un argumento
anteriormente...
de un programa.
<SAMP> ... </SAMP>
Para representar una serie

de
caracteres Estoy en un literal
literalmente.
<ABBR> ... </ABBR>
Resultado
nfasis
Indica
una
abreviada.
ms
Hay cosas importantes.
nfasis Hay que poner nfasis en

algunas cosas.
forma
La WWW usa el protocolo http
EM y STRONG se usan para indicar nfasis. Los dems elementos de frase tienen
significados particulares en documentos tcnicos.
Estos elementos no son muy utilizados, ya que no permiten tener un control exacto de
la manera en que la pgina se representar finalmente.
21

Por ltimo, debemos estudiar algunas cosas que no son texto y que podemos
incorporar a nuestra pgina.
Etiqueta
Utilidad
Resultado
<HR>
Inserta una barra horizontal.
<BR>
Salto de lnea.
Hay un antes y un
despus de saltar a otra lnea

Comentarios.
Esto se escribe y
La instruccin <HR> muestra una lnea horizontal de tamao determinable. Utilizada sin
ningn parmetro mostrara una lnea horizontal que ocupara todo el ancho de la
pgina. Tiene los siguientes parmetros opcionales:
align = "posicin". Alinea la lnea a la izquierda (left), a la derecha (right) o la
centra (center).
noshade. No muestra sombra, evitando el efecto en tres dimensiones.
size = "nmero". Indica el grosor de la lnea en pxels.
width = "nmero(%)". Si el nmero contiene el smbolo % indica el ancho de la
lnea en tanto por ciento en funcin del ancho de ventana del visor. Tambin se puede
especificar un nmero sin poner el smbolo de porcentaje, entonces indicara el ancho
de la lnea en pxels.
<HR align = "center" size="20" width="50%">
El elemento BR rompe (finaliza) forzosamente la lnea actual de texto.
El principal objetivo de los comentarios es escribir lneas de HTML que no se vean en la
pantalla, entre las etiquetas . Puede ser muy til para organizar
internamente pginas escritas en su totalidad con HTML o, como veremos ms
adelante, sirve para ocultar cdigo no soportado por versiones antiguas de
navegadores, como programas JavaScript y VBScript, hojas de estilo... En este caso,
sera con . Veamos los dos casos:
Comentario de una lnea:
Comentario de varias lneas:

<!-Aqu va el script
// -->
22
1.5 ENLACES
Las siglas HTML significan HyperText Markup Language, lo que para nosotros quiere
decir que es un lenguaje para hipertexto. Existen mltiples formatos de hipertexto (por
ejemplo, los ficheros de ayuda de Windows) y lo que tienen en comn es que todos
poseen enlaces.
Un enlace es una zona de texto o grficos que si son seleccionados nos trasladan a
otro documento de hipertexto o a otra posicin dentro del documento actual. Siendo
HTML el lenguaje de Internet, la diferencia que posee con respecto a otros tipos de
hipertexto es que ese otro documento puede estar fsicamente en la otra punta del
planeta. Son los enlaces lo que hacen de la telaraa o World Wide Web lo que es.
Los enlaces son la esencia del Web. Sin ellos, el concepto se vera reducido a una
publicacin de documentos de texto en Internet. Los enlaces te llevan ms all del
trabajo encasillado de un nico documento, para trabajar en varios documentos
relacionados.
1.5.1- La etiqueta Anchor
Un vnculo tiene dos extremos (llamados en ingls anchors, anclas) y una direccin. El
vnculo comienza en el "ancla de origen" (origen del vnculo) y apunta al "ancla
destino" (destino del vnculo), que puede ser cualquier recurso de la Web (p.ej., una
imagen, un video clip, un archivo de sonido, un programa, un documento HTML, un
elemento dentro de un documento HTML, etc.).
Para incorporar un enlace hay que utilizar esta etiqueta. Todo lo que encerremos entre
<A> y </A>, ya sea texto o imgenes, ser considerado como enlace y sufrir dos
modificaciones:
1. Se visualizar de manera distinta en el navegador. El texto aparecer
subrayado y de un color distinto al habitual, y las imgenes estarn rodeadas
por un borde del mismo color que el del texto del enlace.
2. Al pulsar sobre el enlace, seremos enviados al documento que apuntaba el
enlace.
Para que el enlace sirva para algo debemos especificarle una direccin. Lo haremos de
la siguiente manera:
Para continuar haga clic <A HREF="direccion">aqui</A>.
La direccin estar en formato URL (Uniform Resource Locator) y lo contiene el
atributo HREF.
CUIDADO
Puedes poner enlaces a otros sitios WEBs siempre que conozcas la direccin correcta. La inmensa
mayora de gente agradecer que les pongas enlaces. De todas formas, hay algunos sitios que quieren
saber quines les enlazan y porqu. En caso de duda, pide permiso antes de hacer el enlace.
23
Un mtodo para ayudar en la navegacin de una misma pgina es hacer enlaces

dentro de ella. Esta tcnica hace que los navegantes accedan de una manera ms
rpida a la informacin, sin duda muchos lo apreciarn. Consiste en hacer clic en algn
texto o imagen y desplazarse a otra parte dentro de la misma pgina.
Para ello debemos marcar en nuestra pgina las diferentes secciones en las que se
divide, insertando para ello los llamados Marcadores. Lo haremos con el parmetro
name:
<A name="seccin1"></A>
Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La seccin se
llamar seccin1. Para hacer un enlace que salte al marcador de esta seccin dentro
de nuestra pgina lo haramos de la siguiente forma:
<A href="#seccin1">Primera Parte</A>
CUIDADO
Mientras que el uso de marcadores es muy recomendable y a veces imprescindible para organizar el
contenido dentro de una pgina, es importante mantener la longitud de las pginas en un tamao
razonable. Seguramente habrs visto pginas en Internet que se desplazan varias pantallas hacia abajo,
en ese caso, la solucin no es poner marcadores, sino fragmentar la pgina larga en pginas ms cortas.
Procura que tus pginas no excedan de los 30 kb de tamao. Esto har felices a tus navegantes.
Tambin un enlace puede hacerse a cualquier tipo de archivo. Hemos visto cmo hacer
enlaces a pginas Web o secciones dentro de una pgina Web, pero podramos hacer
un enlace a un grupo de noticias:
<A href="news://news.actualidad.es/">Noticias de actualidad</A>
Una forma muy conveniente de que los navegantes contacten contigo es ofreciendo un
enlace a tu direccin de e-mail. Puede hacerse con la etiqueta anchor y una referencia
conocida como naukti.
<A href="mailto:nombre@ext">Envame tus sugerencias</A>
Tambin es posible decidir el "asunto" del mensaje, de forma que nos manden siempre
mensajes con el mismo asunto (puede ser muy til si se reciben muchos e-mails al da,
por ejemplo:
<A HREF="mailto: manuel@duiops.net?subject=Pruebas de HTML">Mensaje de
prueba</A>
TRUCO
Hay otras formas de conseguir que los navegantes contacten contigo a travs de la pgina. Los
formularios es una forma muy popular de hacer esto. Para ms informacin acerca de ellos, mira el captulo
"Formularios" y el captulo "Scripting y preprocesamiento CGI".
24
Los archivos independientes son un amplio campo de posibilidades de enlace. Si se

dispone de Microsoft Internet Explorer 4.0 y superiores, se pueden hacer enlaces a
otros archivos, como .ccr del Comic Chat, .cdf o Canales Activos... e incluso otros
documentos como .doc, .xls... de forma que el navegador transforma su interfaz en la
de Microsoft Word, Excel, etc...
La sntesis la podes ver en <A href="archivo.doc">Archivo.doc</A>.

Con el siguiente ejemplo puedes permitir a tus visitantes que descarguen archivos a su
ordenador pues el navegador intentar ejecutar el archivo y, si no puede hacerlo,
como sera el caso de un archivo comprimido, preguntar al visitante si desea grabarlo
en su ordenador.
Pulsa <A href="archivo.zip">aqu</A> para descargar este archivo.
Si estamos usando frames (llamados tambin marcos), debemos tener en cuenta en
que ventana queremos que se muestre la nueva pgina enlazada. Por defecto se
mostrar en la ventana donde se encuentre el enlace. Para poder escoger otra ventana
debe aadirse un nuevo parmetro a la instruccin <A> ... </A>. Este parmetro se
llama target y puede tener los siguientes valores:
target="nombre_ventana" Muestra el enlace destino en la ventana cuyo nombre se
indica.
target="_blank" Abre una nueva ventana del explorador y muestra el enlace destino
en ella. (Si usamos Netscape esto provoca que tengamos funcionando dos copias del
programa).
target="_self" Se muestra el enlace destino en la misma ventana activa.
target="_parent" El enlace destino se muestra en el <FRAMESET> definido
anteriormente al actual. Si no hay ninguno se muestra a pantalla completa
suprimiendo todas las subventanas de la pantalla.
target="_top" Suprime todas las subventanas de la pantalla y muestra el enlace
destino a pantalla completa.
Ms adelante veremos cmo se estructura una pgina divida por marcos.
1.5.2- Las URLs
Una URL nos indica tanto una direccin de Internet como el servicio que esperamos
nos ofrezca el servidor al que corresponde la direccin. Tiene el siguiente formato:
servicio://mquina:puerto/ruta/fichero@usuario
donde el servicio podr ser uno de los siguientes:
http
Es el servicio invocado para transmitir pginas web y el que usaremos

normalmente en los enlaces.
https
25
Es una innovacin sobre el anterior, que nos permite acceder a servidores

(generalmente comerciales) que nos ofrecen el uso de tcnicas de encriptacin
para proteger los datos que intercambiemos con l de terceras personas.
ftp
mailto
news
telnet
Permite trasmitir archivos desde servidores de ftp annimo. Si no le pedimos un

archivo sino un directorio, en general el navegador se encargar de mostrarnos
el contenido del mismo para que podamos escogerlo cmodamente pero
accederemos de modo solo lectura. Utilizando la @ con el nombre de usuario y
su contrasea podremos acceder a servidores privados, permitindonos escribir
informacin (segn los permisos concedidos).
Para poder mandar un mensaje. Por ejemplo, la URL
mailto:multivac@idecnet.com me mandara un mensaje a m.
Para poder acceder a foros de discusin (mal traducidos a veces como grupos
de noticias). Se indica el servidor y el grupo. Por ejemplo
news://news.ibernet.es/es.comp.demos nos conectara con el foro
es.comp.demos en el servidor nacional de Telefnica.
No es implementado generalmente por los navegadores, que suelen invocar un
programa externo. Nos permite conectarnos con otros ordenadores y entrar en
ellos como si nuestro ordenador fuese una terminal del mismo.
La direccin de la mquina puede ser, o bien una serie de cuatro nmeros entre 0 y
255 (123.3.5.65) o bien algo ms fcil de recordar como es una serie de palabras
separadas por puntos (www.programacion.net). El puerto generalmente no se indica,
ya que el servicio predetermina uno que es el 80.
La ruta es una serie de directorios separados por el smbolo /, que es el utilizado en
UNIX (el sistema operativo ms extendido en los servidores de Internet).
Existe otro formato de URL. Cuando queremos acceder a un archivo situado en la
misma mquina que la pgina Web que estamos creando, para eso podemos utilizar
este formato:
ruta_relativa/archivo
En la ruta relativa podremos utilizar los dos puntos (..) para acceder al directorio padre
o comenzar con la barra diagonal (/) para acceder a una ruta absoluta dentro de
nuestro ordenador, como veremos en el siguiente punto.
1.5.3- Enlaces Absolutos
Al escribir la URL completa, se refiere a un enlace absoluto. Esto significa que se utiliza
la ruta completa del enlace destino, no slo una parte de l. Debe incluir la palabra
inicial http:// seguida del nombre del dominio. Si no especificamos ningn nombre de
archivo, nos llevar a la pgina inicial por defecto del sitio Web.
http://www.yahoo.com/
26
Los enlaces absolutos son importantes cuando se enlazan Webs que no son de nuestra
propiedad, en otras palabras, sitios que estn hospedados en otros servidores. Por
ejemplo, si se quiere poner un enlace al Web de AMD, sera:
Ir al <A HREF="http://www.amd.com">AMD</A>
Este enlace lleva a la pgina de inicio por defecto de AMD. En cambio, si hay una
pgina especfica dentro del sitio Web a la que queremos acceder, se puede agregar el
nombre del archivo de dicha pgina:
Mira los <A HREF="http://www.amd.com/products/products.html">productos
</A> de AMD
Este enlace te lleva a una pgina concreta de un sitio Web ms grande.
CUIDADO
Los navegadores de ltimas versiones permiten eliminar el http:// y simplemente escribir
www.amd.com para acceder a un sitio, pero esto no significa que puedes saltar el cdigo http:// de una
direccin URL absoluta. Si se olvida, no hars un enlace efectivo.
1.5.5- Enlaces relativos

Imagina a varias personas dentro de distintas habitaciones en una casa y t ests
dentro de ella. Si queres decir dnde est cada una de ellas, no hace falta decir el
domicilio completo con la habitacin, basta el nombre de esta ltima.
Los enlaces relativos nos permiten enlazar pginas situadas en un mismo servidor.
Estos archivos pueden estar en el mismo directorio o cada uno de ellos en un directorio
distinto.
Si ests pensando enlazar una pgina con otra dentro de un sitio Web y ambas residen
en un mismo directorio, debes especificar en HREF solamente el nombre del archivo:
Pulsa <A HREF="intro.htm">aqu</A> para ir la introduccin del curso de
HTML
Las cosas se complican un poco cuando quieres enlazar un documento en otro
directorio dentro del mismo servidor. Vamos a suponer que tenemos en nuestro
directorio principal un directorio llamado ejemplos donde tenemos situado un archivo
llamado ej1.htm. Entonces debemos especificar el directorio hijo, ms la / (barra),
ms el nombre del archivo:
Pulsa <A HREF="ejemplos/ej1.htm">aqu</A> para ver un ejemplo
El navegador buscar el archivo ej1.htm dentro del directorio ejemplos.
Imagina lo contrario, que nos encontramos en el directorio ejemplos y que quieres
poner un enlace a una pgina situada en el directorio principal. Hay que escribir dos
puntos seguidos .. por cada directorio que querramos subir.
27
Pulsa <A HREF="../index.htm">aqu</A> para volver a la pgina principal

Ambos tipos pueden combinarse. Ahora imagina que estamos en el directorio
ejemplos, y que queremos enlazar una pgina llamada prueba1.htm situada en un
directorio llamado pruebas situado al mismo nivel de ejemplos, es decir, subdirectorio
del directorio principal. El cdigo para enlazarlo sera:
Pulsa <a HREF="../pruebas/prueba1.htm">aqu</A> para ver el primer
ejemplo
Recuerde el siguiente grfico:
../
Directorio/
1.5.6- Enlaces con imgenes

Todos los ejemplos de enlace hasta aqu han sido mediante texto. En otras palabras, lo
que est "activo" es el texto. Pero esto no es slo as, tal como comentamos antes,
puede enlazarse cualquier tipo de objeto, particularmente las imgenes.
Tambin es muy fcil de hacer. Todo lo que necesitamos es colocar la etiqueta de la
imagen dentro del contexto de la etiqueta anchor, y la imagen se har "enlace", es
decir, que al hacer clic sobre ella saltar al archivo que le hayas asignado, enlace
absoluto o relativo. Por ejemplo:
<A href="intro.htm"><IMG src="bander.gif"><A>

Te dars cuenta de que hay un borde alrededor de la imagen, indicando que est
enlazada. Esto es casi siempre poco esttico, para quitarlo o modificar su grosor
tendrs que aadir el atributo BORDER dentro de la etiqueta IMG. (Mira el punto
"Trabajando con imgenes"). Para eliminarlo el valor de BORDER debe ser 0.
Aqu tienes el cdigo modificado:
<A href="intro.htm"><IMG src="bander.gif" border="0"><A>

Como ves, el borde ha desaparecido.
28
29
1.6 LISTAS
HTML ofrece varios mecanismos para especificar listas de informacin. Todas las listas
deben contener uno o ms objetos de lista. Las listas pueden contener:
Informacin no ordenada.
Informacin ordenada.
Definiciones.
Todos los tipos siguen el siguiente formato:

<tipo_lista>
<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>
tipo_lista puede ser una de las siguientes: UL, DL y OL.
1.6.1- Listas desordenadas
La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada
elemento de la lista ir normalmente precedido por un crculo. Por ejemplo,
<UL>
<LI>Primer elemento
</UL>
se ver como
Primer elemento
Segundo elemento
La etiqueta <UL> admite estos parmetros:

Parmetro
Utilidad
Resultado
COMPACT
TYPE="disc",
"circle",
"square"
Indica al navegador que debe representar la

lista de la manera ms compacta posible.
Indica al navegador el dibujo que preceder

a cada elemento de la lista. Para mayor
flexibilidad
se
admite
tambin
como
parmetro de <LI>.
Primer
elemento
Segundo
elemento
Tipo disc
Tipo circle
Tipo
square
Tambin son listas desordenadas aquellas que utilizan las etiquetas <DIR> y <MENU>.
En principio tenan como propsito representar una lista estilo directorio
30
(multicolumna) o tipo men (una sola columna). En la prctica los navegadores lo han
implementado como sinnimos de <UL>, por lo que no los estudiaremos aqu.
1.6.2- Listas ordenadas
La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a
mayor. Normalmente cada elemento de la lista ir precedido por su nmero en el
orden. Por ejemplo,
<OL>
<LI>Primer elemento
</OL>
se ver como
1. Primer elemento
2. Segundo elemento
La etiqueta <OL> admite estos parmetros:
Parmetro
COMPACT
TYPE="1", "a",
"A", "i", "I"
START="num"
Utilidad
Indica al navegador que debe representar la
lista de la manera ms compacta posible.
Indica al navegador el tipo de numeracin

que preceder a cada elemento de la lista.
Para mayor flexibilidad se admite tambin
como parmetro de <LI>.
Indica al navegador el nmero por el que se

empezar a contar los elementos de la lista.
Resultado
1. Primer
elemento
2. Segundo
elemento
1.
b.
C.
iv.
V.
Tipo 1
Tipo a
Tipo A
Tipo i
Tipo I
3. Primer
elemento
4. Segundo
elemento
1. Primer
elemento
VALUE="num"
Atributo de <LI>, acta como START pero a

partir de un elemento predeterminado.
4. Segundo
elemento
5. Tercer
elemento
31
1.6.3- Listas de definiciones

Este es el nico tipo de lista que no utiliza la etiqueta <LI>. Al tener como objetivo
presentar una lista de definiciones, de modo que tiene que representar de manera
distinta el objeto definido y la definicin. Esto se hace por medio de las etiquetas <DT>
y <DD>:
<DL>
<DT>Primer elemento<DD>Es un elemento muy bonito.
<DT>Segundo elemento<DD>Este, en cambio, es peor.
</DL>
se ver como
Primer elemento
Es un elemento muy bonito.
Segundo elemento
Este, en cambio, es peor.
La etiqueta <DL> slo admite como parmetro el ya conocido COMPACT, que tiene el
mismo comportamiento que los otros dos tipos de lista anteriores.
1.6.4- Otros tipos de listas
Existen dos tipos de listas menos comunes. Las listas de Men o Directorio, las que se
comportan igual que las listas sin numerar. La lista de Men utiliza la etiqueta <MENU>
... </MENU> y los elementos se anteceden de <LI>, el resultado es una lista sin
numerar ms "compacta" es decir, con menos espacio interlineal entre los elementos.
La lista de Directorio utiliza la etiqueta <DIR> ... </DIR> y los elementos se
anteceden de <LI>, los elementos tienen un lmite de 20 caracteres.
32
1.7 IMGENES
Para incluir grficos e imgenes en nuestras pginas utilizaremos la etiqueta
<IMG>
de esta manera:
<IMG SRC="fichero_grafico" ALT="descripcion">
El parmetro SRC especifica el nombre del fichero que contiene el grfico. Los
formatos estndar en la red son el GIF y el JPG. Las ltimas versiones de Netscape y
Explorer aceptan tambin el formato PNG.
El parmetro ALT especifica el texto que se mostrar en lugar del grfico en aquellos
navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de
que el usuario los haya desactivado. Algunos navegadores lo muestran cuando
pasamos el ratn por encima de la imagen. Es por eso que, aunque algunos usuarios
no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estndar HTML 4.0
obliga a hacerlo.
Existen dos atributos que, aunque opcionales, conviene indicar siempre: la altura y el
amcho del grfico en pixels. De este modo, el navegador puede mostrar un recuadro
del tamao de la imagen mientras la va leyendo de la red y as poder mostrar el resto
de la pgina correctamente mientras tanto.
<IMG SRC=graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH="88" HEIGHT="31">
Se ve as:
La instruccin <IMG> tiene varios parmetros:

src="imagen". Indica el nombre del archivo grfico a mostrar. Se puede utilizar
direcciones relativas o absolutas.
alt="texto". Mostrar el texto indicado al pasar el mouse sobre la imagen. Se lo
utiliza en el caso de que el navegador utilizado para ver la pgina no sea capaz de
visualizar la imagen.
lowscr="imagen". Muestra una segunda imagen "superpuesta" sobre la primera una
vez cargada la pgina. Este parmetro no es reconocido por la totalidad de los
navegadores, as que en la mayora de los casos ser ignorado mostrndose slo la
primera imagen. Netscape muestra la imagen indicada por lowscr en primer lugar, y
posteriormente la indicada por src. Si las imgenes son iguales pero tienen distinta
resolucin se conseguir un efecto tipo "Fade". Si las imgenes son de distinto tamao
la imagen indicada en src se redimensionar al tamao indicado por la imagen
referenciada en lowscr.
align="valor". Indica cmo se alinear verticalmente el texto que se encuentra en
los lados de la imagen. Los valores son: top alinea el texto con la parte superior de
la imagen, middle con la parte central y bottom con la parte inferior.
33
border="nmero". Indica el tamao del borde de la imagen. A toda imagen se le

asigna un borde que ser visible cuando la imagen forma parte de un enlace.
height="nmero o %". Indica el alto de la imagen en pxels o porcentaje. Se usa para
variar el tamao de la imagen original.
width ="nmero o %". Indica el ancho de la imagen en pxels o porcentaje. Se usa
para variar el tamao de la imagen original.
hspace="nmero". Indica el nmero de espacios horizontales, en puntos, que
separarn la imagen del texto que la siga y la anteceda.
vspace ="nmero". Indica el nmero de puntos verticales que separarn la imagen del
texto que se encuentra por encima y por debajo de la misma.
ismap/usemap. Indica que la imagen es un MAPA. Veremos estos parmetros en el
siguiente apartado.
1.7.1- Alineacin respecto al texto
Para poder modelar conjuntamente texto y grficos, el HTML proporciona, por medio
del parmetro ALIGN, las siguientes maneras de alinear una imagen respecto del texto
que la acompaa:
Valor de ALIGN Utilidad
Resultado
TOP
Coloca el punto ms alto de la imagen

coincidiendo con lo ms alto de la
lnea de texto actual.
Este es el texto
MIDDLE
Alinea el punto medio (en altura) de

la imagen con la base del texto.
Este es el texto
BOTTOM(Por
defecto)
Alinea el punto ms bajo de la imagen

con la base del texto.
Este es el texto
LEFT
Coloca la imagen a la izquierda del

texto.
Este es el
texto
RIGHT
Coloca la imagen a la derecha del Este es el

texto.
texto
Hay que aclarar que la base del texto es la lnea donde descansan casi todas las letras
del alfabeto excepto algunas como la p, la g o la j.
1.7.2- Acerca del tamao de las imgenes
El tamao de los archivos grficos en una pgina Web debe ser pequeo para
optimizar el tiempo de descarga de la pgina. Si ustedes abren la imagen en algn
editor como PhotoShop o el Microsoft Opto Editor, debern elegir ver la imagen al
100% para saber cual es el tamao real de la imagen que se ver en la pgina. Con
esto lograrn un mayor control de la misma.
Otro punto importante es que nunca es conveniente insertar una imagen grande y
luego achicarla mediante los manejadores de la misma (los pequeos cuadraditos que
aparecen en los bordes para cambiar el tamao), ya que si hacemos esto, se achica la
imagen que se ve en pantalla pero no el tamao del archivo.
34
Para cambiar el tamao abran la imagen en el editor y modifiquen el zoom hasta el

tamao deseado. Una vez hecho esto, fjense el valor que eligieron de zoom. En
PhotoShop vayan a Image/Image size, en los cuadros de la unidad, seleccionen
Percent y fjense que est tildada la casilla Constrain Proportions. A continuacin tipeen
en cualquiera de los cuadros de Height o Width (pero solo en uno) el valor del zoom,
con lo cual la imagen se reducir al tamao deseado. Para ver los resultados,
seleccionen zoom 100% y guarden la imagen, con el mismo nombre o con otro para
saber que es un archivo diferente al editado. Si usan el Microsoft PhotoEditor el
proceso es similar, deben ir a Imagen/Cambiar tamao y fijarse que NO est tildada la
casilla Permitir distorsin una vez hecho esto, varen el porcentaje de Alto o Ancho.
Todos los programas editores de imgenes son similares, yo no los obligo a usar
predeterminadamente uno, eso queda en criterio del diseador.
1.7.3- Optimizar los grficos
Una imagen puede valer ms que mil palabras, pero vale 10 segundos de tiempo de
descarga? Hgase esta pregunta antes de aadir una imagen al sitio Web. Los grficos
Web de hoy en da son casi todos archivos .jpg o .gif. La eleccin del tipo de archivo
influir mucho en el tamao del grfico.
El formato de archivo JPEG funciona mejor con un nmero elevado de colores en
grficos de calidad fotogrfica. Puede comprimir de manera considerable los archivos
.jpg sin que se produzca una degradacin importante de la calidad. Sin embargo, la
compresin de las imgenes JPEG s produce prdidas. Esto quiere decir que algunos
datos de la imagen se pierden durante la compresin, de manera que la calidad de la
imagen empeora a niveles de compresin elevados. Las siguientes figuras muestran
una fotografa original no comprimida, tomada del contenido de Microsoft PhotoDraw,
as como versiones comprimidas de la fotografa, con el tamao de archivo y el tiempo
de descarga a una velocidad de conexin de 28,8 Kbps.
Foto original (200 x 161 pxeles) 10 KB, 12 segundos
Al 20% de compresin 8 KB, 5 segundos
Al 70% de compresin 6 KB, 2 segundos.
35
Al 90% de compresin 3 KB, 1 segundo.
Como puede ver, a una compresin del 20%, el archivo se reduce a menos de la mitad
del original y el tiempo de descarga tambin es menos de la mitad. Con una
compresin del 70%, sigue sin haber una degradacin considerable de la imagen y el
tiempo de descarga se reduce en gran medida. A una compresin del 90%, las bandas
de color son visibles y, aunque el archivo ocupa la mitad que uno comprimido al 70%,
el tiempo de descarga es slo 1 segundo menos. La compresin al 90% no presenta
ninguna ventaja.
El formato de archivo GIF funciona mejor con grficos que contienen un nmero
limitado de colores y constan de lneas o texto. Los archivos en formato GIF suelen
descargarse rpidamente, ya que normalmente contienen 256 colores, el mismo
nmero de colores que muestran muchos equipos. Si convierte una imagen de formato
JPEG a formato GIF, perder la informacin de color.
En el formato GIF, los colores se guardan en filas horizontales. Las reas que
contienen colores slidos se comprimen a la proporcin mxima. Los colores
organizados horizontalmente producen archivos ms pequeos y descargas ms
rpidas. Por ejemplo, un archivo que contiene dos listas de colores horizontales ocupa
menos de la mitad de un archivo que contiene dos listas de colores verticales.
Las siguientes figuras muestran el mismo grfico de una bandera en orientacin
horizontal y vertical.
Tamao de archivo - 6 KB.
Tamao de archivo - 9 KB.
Cuando guarde un grfico en un formato GIF en la mayora de los programas de

grficos, tiene la opcin de guardar el archivo como entrelazado. El entrelazado es una
tcnica que muestra un archivo en porciones horizontales, de manera similar a una
36
persiana veneciana. La ventaja de utilizar el entrelazado es que una imagen aparece

rpidamente, aunque con baja resolucin y, a continuacin, se convierte en una
imagen completa. Los archivos entrelazados son de mayor tamao que los archivos no
entrelazados.
Muchos programas de grficos proporcionan la opcin de comprimir archivos .gif
mediante compresin LZW. A diferencia de la compresin de archivos .jpg, en la
compresin de archivos .gif no se producen prdidas. Esto quiere decir que los datos
no se pierden durante la compresin, de manera que la imagen no se deteriora.
Cuando optimice un grfico, tenga en cuenta las siguientes sugerencias:
Realice siempre una copia del original antes de llevar a cabo ninguna accin.
No comprima nunca un archivo que ya se haya comprimido. Por ejemplo, si
desea comprimir una imagen de 100 KB a 20 KB, obtendr mejores resultados
comprimiendo directamente de 100 KB a 20 KB que comprimiendo primero de
100 KB a 50 KB y, a continuacin, a 20 KB.
Si desea utilizar un grfico de gran tamao, plantese la creacin de una
miniatura que lleve mediante un enlace, al grfico del tamao completo.
Utilice slo tantos colores como puedan ver los usuarios. Si los equipos de los
usuarios pueden mostrar slo color de 8 bits, no utilice ms de 256 colores.
37
1.8 FORMATO DEL TEXTO

Lo ideal cuando trabajamos con texto es poder cambiarle el tamao para adecuarlo
con el diseo general del sitio, cambiarle los colores y la fuente de la misma. Todo esto
puedes hacerlo gracias a la etiqueta <FONT>.
1.8.1- Tamaos del texto
El parmetro utilizado para indicar el tamao es SIZE. Puede utilizarse para indicar
tamaos absolutos:
SIZE=1
SIZE=2 SIZE=3
SIZE=4 SIZE=5
SIZE=6 SIZE=7
El tamao por defecto es 3. Tambin se puede utilizar los modificadores + y - para

indicar un incremento (o decremento) relativo del tamao del tipo de letra. As, por
ejemplo, si indicamos que queremos un tamao de -2 estaremos pidiendo al
navegador que nos muestre el tipo de letra dos veces ms pequeo.
<FONT SIZE=2>Tamao 2<FONT SIZE="+3">Tamao 5</FONT></FONT>
1.8.2- Cambio de color
Para hacerlo vamos a utilizar el parmetro COLOR. La manera de especificarle el color
es comn a todas las etiquetas HTML: o bien indicando el nombre, si es un color
normal, o bien especificando el porcentaje de rojo, verde y azul (cdigo RGB) del
mismo. Los colores reconocidos por su nombre y su cdigo RGB son los siguientes:
Black = "#000000" (Negro)
Green = "#008000" (Verde)
Silver = "#C0C0C0" (Plateado)
Lime = "#00FF00" (Verde lima)
Gray = "#808080" (Gris)
Olive = "#808000" (Verde oliva)
White = "#FFFFFF" (Blanco)
Yellow = "#FFFF00" (Amarillo)
Maroon = "#800000" (Marrn)
Navy = "#000080" (Azul marino)
Red = "#FF0000" (Rojo)
Blue = "#0000FF" (Azul)
Purple = "#800080" (Prpura)
Teal = "#008080" (Azul verdoso)
Fuchsia = "#FF00FF" (Fucsia)
Aqua = "#00FFFF" (Celeste)
<FONT color="red">Estoy en rojo</FONT>
38
El modo de indicar el color RGB es el siguiente:

<FONT
<FONT
<FONT
<FONT
<FONT
<FONT
<FONT
<FONT
<FONT
COLOR="#FF0000">D</FONT>
COLOR="#EF0000">E</FONT>
COLOR="#DF0000">G</FONT>
COLOR="#CF0000">R</FONT>
COLOR="#BF0000">A</FONT>
COLOR="#AF0000">D</FONT>
COLOR="#9F0000">A</FONT>
COLOR="#8F0000">D</FONT>
COLOR="#7F0000">O</FONT>
Lo que nos mostrara lo siguiente: DEGRADADO

La primera componente en hexadecimal es el rojo, la segunda el verde y la tercera el
azul (Red Green Blue, RGB).
Aunque los colores pueden aadir cantidades significativas de informacin a los
documentos y hacerlos ms legibles, considere las siguientes pautas cuando incluya
color en sus documentos:
El uso de elementos y atributos HTML para especificar colores est

desaprobado. Se aconseja utilizar hojas de estilo en su lugar.
No utilice combinaciones de colores que puedan causar problemas a personas
con dificultades para distinguir colores.
Si usa una imagen de fondo o establece un color de fondo, asegrese de que
establece tambin los colores de los distintos textos.
Los colores especificados con los elementos BODY y FONT y con bgcolor en las
tablas tienen apariencias diferentes en plataformas diferentes (p.ej., estaciones
de trabajo, Macs, Windows, y paneles LCD frente a CRTs), por lo que no debera
basar un efecto especfico completamente en ellos. En el futuro, el soporte del
modelo de color junto con los perfiles de color ICC debera mitigar este
problema.
Cuando sea posible, adopte las convenciones comunes para evitar confusiones.
1.8.3- Tipo de letra

Por ltimo, podemos especificar el nombre del tipo de letra que queremos utilizar
gracias al parmetro FACE. Como en principio no tenemos manera de saber que tipo
de letra tiene instalado el ordenador del usuario que est viendo nuestras pginas,
podemos indicar ms de uno separado por comas. Si el navegador no encuentra
ninguno seguir utilizando el que tiene por defecto:
<FONT FACE="Helvetica,Arial,Times">No s como voy a salir exactamente
</FONT>
De todos modos es recomendable no utilizar con fe ciega este atributo en Internet, ya
que impide que todos puedan ver nuestras pginas como nosotros queramos. El
Internet, siempre que nos lo permitan Microsoft y Netscape, debe ser lo ms estndar
posible.
39
1.9 ESTRUCTURA DEL DOCUMENTO

La estructura de un documento HTML se puede resumir as:
tipo de documento
<HTML>
<HEAD>
<TITLE>titulo de la pgina</TITLE>
cosas que afectan a la pgina pero no a su contenido
</HEAD>
<BODY parmetros>
contenido de la pgina
</BODY>
</HTML>
En el tipo de documento deberemos especificar a que estndar del HTML responde
nuestra pgina entre una de las siguientes opciones:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Cumple el estndar HTML 2.0.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">
Cumple el estndar HTML 4.0 y no contiene adems elementos desaconsejable.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">
Es una definicin de marcos que cumple el estndar HTML 4.0.
El HTML 4.0 considera desaconsejable aquellos elementos que, an siendo soportados,
han sido sustituidos por otros ms potentes y, por ello, es posible que sean eliminados
del estndar HTML en el futuro.
1.9.1- La cabecera
Suele ser el lugar ms indicado para colocar aquellos elementos de la pgina que no
alteren el contenido de la misma, aunque si la forma de presentarlo y su
comportamiento. Es por eso que es el lugar ms recomendable para colocar los scripts
y las hojas de estilo, como veremos ms adelante.
Adems del ttulo de la pgina, uno de los elementos que se pueden incluir aqu es el
META (Metadatos). Entre otras cosas, sirven para indicar propiedades de la pgina
como pueda ser el nombre de su autor. Por ejemplo,
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]">
40
nos indicara la herramienta con que hemos creado la pgina (en este caso la versin
4.03 en espaol para Windows 95 del Composer de Netscape). Estas son las
propiedades ms comunes:
Propiedad
Utilidad
AUTHOR
Autor de la pgina.
GENERATOR
Herramienta utilizada para hacer la pgina.
CLASSIFICATION
Palabras que permite clasificar la pgina dentro de un buscador

jerrquico (como Yahoo).
KEYWORDS
Palabras clave por las que encontrarn la pgina en los buscadores.
DESCRIPTION
Descripcin del contenido de la pgina.
Un uso comn de META es especificar palabras claves que pueden usar los motores de
bsqueda para mejorar la calidad de los resultados de una bsqueda. Cuando se
proporcionen varios elementos META con informacin para varios idiomas, los motores
de bsqueda pueden utilizar el atributo LANG como filtro para mostrar los resultados
de la bsqueda usando las preferencias de idioma del usuario. Por ejemplo,

<META name="keywords" lang="en-us" content="vacation, Greece, sunshine">

<META name="keywords" lang="en" content="holiday, Greece, sunshine">

<META name="keywords" lang="es" content="vacaciones, Grecia, sol">
Hay tambin otro elemento interesante que podremos incluir en nuestras cabeceras.
Cuando especificamos una URL relativa en un enlace, en principio es para acceder a
una pgina situada en nuestro mismo servidor. Sin embargo, si especificamos:
<BASE HREF="http://www.hornet.org/music">
Ahora todas nuestras URLs relativas se referirn al directorio /music dentro del
servidor http://www.hornet.org.
1.9.2- El cuerpo
Obviamente no voy a explicar lo que va dentro del cuerpo (prcticamente todo este
captulo intenta hacerlo) sino los parmetros que admite la etiqueta <BODY>:
BACKGROUND
Permite definir un grfico de fondo para la pgina.
BGCOLOR
Permite definir el color de fondo de la pgina.
BGPROPERTIES
TEXT
Cuando es igual a FIXED el grfico definido como fondo de la

pgina permanecer inmvil aunque utilicemos las barras de
desplazamiento.
Cambia el color del texto.
41
LINK
Cambia el color de un enlace no visitado (por defecto azul).
VLINK
Cambia el color de un enlace ya visitado (por defecto

prpura).
ALINK
Cambia el color que toma un enlace mientras lo estamos

pulsando (por defecto rojo).
TOPMARGIN
y Especifican el nmero de pixels que dejar de margen entre el

borde de la ventana y el contenido de la pgina. Se suelen
utilizar para dejarlos a cero.
MARGINWIDTH
LEFTMARGIN
MARGINHEIGHT
Ms o menos equivalentes a los anteriores, pero stos

funcionan en Netscape.
<BODY bgcolor="white" text="black" link="red" alink="fuchsia"

vlink="maroon">
No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista
alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones
el usuario ha podido cambiarlos en las opciones de su navegador y estarn ya a su
gusto.
42
1.10 FORMULARIOS
Una de las mayores ventajas de la Web es que resulta tremendamente interactiva. Los
usuarios de una pgina pueden escribirle al autor de la misma para comentarle
cualquier cosa. Sin embargo, si deseamos que nos digan slo unas cosas concretas
(responder a alguna pregunta, seleccionar entre varias opciones, etc...) deberemos
utilizar formularios. Por ejemplo,
<FORM ACTION="" METHOD=POST>
Nombre:<BR><INPUT NAME="nombre" TYPE=TEXT SIZE=32>
<BR>Cuantos son dos y dos?<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">3<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien">4<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">5<BR>
<INPUT TYPE="Submit" VALUE="Comprobar">
</FORM>
se ver as:
Nombre:
Cuantos son dos y dos?
3
4
5
Comprobar
Hay dos formas de realizar y/o recibir los formularios: mediante un programa CGI del
servidor o generado por el navegador. Qu son ambas cosas? El programa CGI es uno
que se almacena en el servidor; mediante el formulario enviaremos la informacin al
programa CGI y ste generar el mensaje e-mail que nos llegar. La otra manera es
mediante el navegador, el cual es quien genera el correo.
La mejor es la primera, ya que la segunda tiene una incompatibilidad mucho mayor.
Slo soportan esta ltima el Netscape Navigator 2.0 o superior y el Microsoft Internet
4.0 o superior. Para hacer esta necesitamos la informacin del propietario del CGI para
poder hacer el encabezado del formulario. En este tema explicaremos la segunda
forma, ms genrica.
Todos los elementos de un formulario deben estar encerrados entre <FORM> y </FORM>.
Como parmetros cabe destacar tres. ACTION define el URL que deber gestionar el
formulario. Puede ser una direccin de correo (precedida del inevitable mailto, en
cuyo caso deberemos aadir el parmetro ENCTYPE="text/plain" para que lo que
recibamos resulte legible. Por otro lado, tenemos el parmetro METHOD que define la
manera en que se mandar el formulario. Es recomendable utilizar POST. En el caso de
que estemos mandando el formulario a nuestra direccin de correo electrnico es
obligado usarlo.
43
El atributo METHOD puede tener dos valores:
get: Con el mtodo HTTP "get", el conjunto de datos del formulario se agrega
al URI especificado por el atributo ACTION (con un signo de interrogacin ("?")
como separador) y este nuevo URI se enva al agente procesador.
post: Con el mtodo HTTP "post", el conjunto de datos del formulario se incluye
en el cuerpo del formulario y se enva al agente procesador.
El mtodo "get" debera usarse cuando el formulario es idempotente (es decir, cuando
no tiene efectos secundarios). Muchas bsquedas en bases de datos no tienen efectos
secundarios visibles y constituyen aplicaciones ideales del mtodo "get". Si el servicio
asociado con el procesamiento de un formulario causa efectos secundario (por
ejemplo, si el formulario modifica una base de datos o la subscripcin a un servicio),
debera usarse el mtodo "post".
NOTA
El mtodo "get" restringe los valores del conjunto de datos del formulario a caracteres ASCII. Slo el
mtodo "post" (con enctype="multipart/form-data") cubre el conjunto de caracteres [ISO10646]
completo.
Ahora vamos a ver uno a uno todos los elementos que podemos incluir en un
formulario. Veremos que todos ellos tienen algo en comn. Como el resultado de
cualquier formulario es una lista de variables y valores asignados a las mismas, todos
ellos tendrn un atributo en comn: el nombre de su variable (NAME).
1.10.1- Cajas de texto
Existen tres maneras de conseguir que el usuario introduzca texto en nuestro
formulario. Las dos primeras se obtienen por medio de la etiqueta <INPUT> y se
configuran mediante el atributo TYPE:
<INPUT TYPE=TEXT>
<INPUT TYPE=PASSWORD>
***
El primero nos dibujar una caja donde escribir un texto (de una sola lnea). El
segundo es equivalente, pero no veremos lo que tecleemos en l, solo veremos un *
(asterisco) como carcter. Estos son los atributos para modificarlos:
Parmetro
Utilidad
SIZE
Tamao de la caja de texto (en caracteres).
MAXLENGTH
Nmero mximo de caracteres que puede introducir el usuario.
VALUE
Texto por defecto que contendr la caja.
WRAP
Justifica el texto automticamente en el interior de la caja. El

valor (phisical) enva las lneas de texto separadas en lneas
fsicas. El valor (virtual) enva todo el texto seguido.
44
Por otro lado, puede que necesitemos que el usuario pueda introducir ms de una
lnea. En ese caso se utilizar la siguiente etiqueta:
Por defecto
<TEXTAREA>
Por defecto
</TEXTAREA>
Lo que incluyamos entre las dos etiquetas ser lo que se muestre por defecto dentro
de la caja. Admite estos parmetros:
Parmetro Utilidad
ROWS
Filas que ocupar la caja de texto.
COLS
Columnas que ocupar la caja de texto.
1.10.2- Opciones
Si lo que deseamos es que el usuario decida entre varias opciones podremos hacerlo
de dos modos. El primero es el que vimos en el ejemplo inicial, poniendo el valor
RADIO en el atributo TYPE:
3<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR> 3

4<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien"><BR> 4
5<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR>
5
Para asociar varios botones de radio a una misma variable le tenemos que poner a
todos ellos el mismo nombre (NAME). Aparte de esto acepta los siguientes parmetros:
Parmetro Utilidad
VALUE
Este es el valor que se le asignar a la opcin.
CHECKED
Si lo indicamos en una de las opciones esta ser la que est activada por
defecto.
Pero tambin tenemos una posibilidad que ocupa bastante menos espacio en la
pgina: las listas desplegables. Para emplearlas debemos utilizar dos etiquetas,
<SELECT> y <OPTION>:
<SELECT NAME="Navegador">
<OPTION>Netscape
<OPTION>Explorer
<OPTION>Opera
Netscape
45
<OPTION>Lynx
<OPTION>Otros
</SELECT>
Los parmetros que admite SELECT son las siguientes:
Parmetro Utilidad
SIZE
El nmero de opciones que podremos ver. Si es mayor que 1 veremos una

lista de seleccin y, sino, veremos una lista desplegable.
MULTIPLE Si lo indicamos podremos elegir ms de una opcin.

Y los de OPTION son estos:
Parmetro Utilidad
VALUE
Este es el valor que asignar a la opcin de la lista.
SELECTED
Si lo indicamos en una de las opciones esta ser la seleccionada por

defecto.
1.10.3- Botones del formulario

Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para
restablecer los objetos a todos los valores iniciales.
<INPUT TYPE="SUBMIT" VALUE="Enviar consulta">
Enviar consulta
<INPUT TYPE="RESET" VALUE="Restablecer">
Restablecer
Podemos cambiar el texto que el navegador pone por defecto en esos botones
utilizando el parmetro VALUE.
Puede que necesitemos que el usuario sencillamente nos confirme o niegue algo. Lo
podremos conseguir por medio de controles de confirmacin:
<INPUT NAME="PC" TYPE=CHECKBOX>Manejo de PC

<INPUT NAME="Internet" TYPE=CHECKBOX CHECKED>Internet
<INPUT NAME="Multime" TYPE=CHECKBOX>Multimedia
Manejo de PC
Internet
Multimedia
Si queremos que el control est activado por defecto le aadiremos el parmetro

CHECKED. Cuando los datos sean enviados, el formulario asignar a la variable NAME el
valor on u off.
46
Por ltimo, existe la posibilidad de que necesitemos que, en el formulario, tengamos

alguna variable con un valor previamente asignado. Por ejemplo, si tenemos una ficha
que posee varios pasos, y cada paso contiene un formulario para completar, podemos
almacenar una variable fija (constante) dentro de cada formulario para distinguir de
cual se trata:
<INPUT TYPE=HIDDEN NAME="Formulario" VALUE="Datos personales">
Este objeto no es visible para el usuario. De este modo puedo saber de qu formulario
me estn enviando los datos.
47
1.11 CONTROLES AVANZADOS PARA FORMULARIOS

El estndar HTML 4.0 ha trado varias mejoras a los formularios, que acercan los
mismos a las caractersticas que tienen en lenguajes como Java o Visual Basic.
Desafortunadamente, el Netscape 4, lanzado al mercado antes de la aprobacin del
HTML 4.0, no implementa ninguna de estas mejoras, por lo que los ejemplos de este
apartado slo sern contemplados correctamente por los usuarios de Explorer 4 y 5 y
los del nuevo Netscape 6.
1.11.1- Botones
Una de las cosas que ms han mejorado son los botones. Ahora disponen de una
etiqueta propia, de modo que se pueda encerrar con ella todo tipo de elementos HTML,
como grficos o, incluso, tablas enteras.
Como no poda ser de otra manera, la etiqueta en cuestin se llama BUTTON:
<BUTTON TYPE="button">
<table border="1">
<tr><BR/>
<th>Soy una</th><BR/>
<th>tabla</th>
Soy una tabla
</tr>
que est en un botn
<tr>
<td>que est</td>
<td>en un botn</td>
</tr>
</table>
</BUTTON>
Los parmetros de dicha etiqueta son los normales, TYPE, que podrn tomar los
valores SUBMIT (por defecto), RESET y BUTTON, NAME y VALUE.
Por otro lado, ahora podemos declarar un grfico como un elemento ms de entrada,
como un nuevo tipo dentro del elemento INPUT:
<INPUT TYPE="image" SRC="www.pepe.com/boton.gif" alt="Elije

navegador">
Este elemento se comportar de mismo modo que un botn de tipo SUBMIT, pero
aadir como informacin en el formulario las coordenadas x e y donde el usuario lo
puls. Esto no se puede hacer con el botn de tipo RESET (botn que limpia todos los
objetos del formulario).
48
1.11.2- Etiquetas
Hasta hora, el texto que acompaaba a los campos de entrada no estaba asociado a
los mismos de ninguna manera. As, por ejemplo, si pulsbamos en el texto que
acompaaba a un control de confirmacin, no suceda nada. Ahora, en cambio, si
utilizamos la etiqueta LABEL, el control cambiar de estado (slo disponible en
Netscape 5):
<LABEL>
<INPUT NAME="Trabajo" TYPE=CHECKBOX>
Estoy en relacin de dependencia
</LABEL>
Estoy en relacin de dependencia
Lo bueno que tiene es que se puede usar sin peligro, ya que no afectar a los usuarios
de navegadores antiguos.
1.11.3- Agrupacin de elementos
Hasta ahora, no disponamos de ninguna manera de agrupar visualmente varios
controles. Gracias al agrupamiento de controles es ms fcil para los usuarios entender
su propsito y al mismo tiempo se facilita la navegacin con agentes de usuario
visuales y la navegacin por voz para agentes de usuario basados en voz. El uso
correcto de este elemento hace los documentos ms accesibles.
Ahora, si encerramos una parte de un formulario dentro de la etiqueta FIELDSET se
mostrar un rectngulo alrededor de los mismos (en forma de marco). Si adems, le
indicamos un ttulo por medio de la etiqueta LEGEND nuestros formularios quedarn
hechos un verdadero primor:
<FIELDSET>
<LEGEND>Mi hermoso formulario</LEGEND><BR>
<LABEL>
Mi hermoso formulario
Mi texto:
Mi texto:
<INPUT TYPE="text">
</LABEL>
</FIELDSET>
LEGEND admite como parmetro ALIGN, que indicar en qu lugar se coloca el ttulo.
Por defecto es TOP (arriba), pudiendo estar tambin abajo (BOTTOM), a la izquierda
(LEFT) o a la derecha (RIGHT).
1.11.4- Controles deshabilitados y de solo lectura
Todos los controles de un formulario se pueden desactivar, impidiendo as al usuario
que los utilice. Se seguirn mostrando en pantalla, aunque con un aspecto distinto
para indicar su triste estado. Para ello slo tenemos que indicarle el parmetro
DISABLED:
49
<LABEL DISABLED>Texto:
<INPUT TYPE=TEXT DISABLED> Texto:
</LABEL>
Esto, en principio, no parece de demasiada utilidad. Para qu queremos tener
controles desactivados? Para eso no los ponemos, no? Lo bueno que tiene es que el
estado de activacin de un control es accesible desde JavaScript. Eso nos permitir
activar o desactivar una parte de nuestro formulario dependiendo de lo que el usuario
haya introducido previamente en otros controles del mismo.
Cuando deseamos que el control sea de solo lectura, el atributo readonly especfica si
el control puede ser modificado por el usuario.
Cuando est establecido, el atributo readonly tiene los siguientes efectos sobre un
elemento:
El foco puede dirigirse hacia elementos de slo lectura, pero stos no pueden
ser modificados por el usuario.
Los elementos de slo lectura estn incluidos en la navegacin con tabulador.
Los elementos de slo lectura pueden tener xito.
Los siguientes elementos soportan el atributo readonly: INPUT y TEXTAREA.

NOTA
La nica manera de modificar dinmicamente el valor del atributo readonly es mediante un script.
1.11.5- Dirigir el foco hacia un elemento

En un documento HTML, el usuario debe dirigir el foco hacia un elemento para que ste
se active y realice sus funciones. Por ejemplo, los usuarios deben activar un vnculo
especificado con el elemento <A> para seguir el vnculo especificado. Anlogamente,
los usuarios deben dirigir el foco hacia un TEXTAREA para poder introducir texto en su
interior.
Hay varias maneras de dirigir el foco hacia un elemento:
Designar el elemento con un dispositivo apuntador (el puntero del mouse).

Navegar de un elemento a otro con el teclado. El autor del documento puede
definir un orden de tabulacin que especifique el orden en que se dirige el foco
hacia los elementos si el usuario navega por el documento usando el teclado
(usando la tecla TAB). Una vez seleccionado, el elemento puede activarse con
alguna otra secuencia de teclas.
Seleccionar un elemento por medio de una tecla de acceso (a veces llamada
"acelerador de teclado").
50
tabindex es el que define el orden en que el foco se dirige hacia los elementos cuando
se navega por medio del teclado. El orden de tabulacin puede incluir diferentes
elementos anidados.
Los agentes de usuario deberan navegar por los elementos a los que puede dirigirse el
foco de acuerdo con las siguientes reglas:
1. Navegar en primer lugar por aquellos elementos que soporten el atributo
tabindex y tengan asignado para ste un valor positivo. La navegacin se
produce desde el elemento con menor valor de tabindex hasta el elemento con
el valor ms alto. Los valores no necesitan ser secuenciales ni deben comenzar
por un valor en particular. Si hay elementos que tengan valores idnticos de
tabindex debera navegarse por ellos segn el orden en que aparezcan en el
flujo de caracteres.
2. A continuacin se navega por aquellos elementos que no soporten el atributo
tabindex o por los que soportndolo tengan asignado para l un valor "0". Se
navega por estos elementos segn el orden en que aparezcan en el flujo de
caracteres.
3. Los elementos que estn deshabilitados no participan en el orden de tabulacin.
Este valor debe ser un nmero entre 0 y 32767. Los agentes de usuario no deberan
tener en cuenta los ceros a la izquierda.
<A tabindex="10" href="http://www.w3.org/">sitio web del W3C.</A>
<BUTTON type="button" name="obtener-base-de-datos" tabindex="1"
onclick="obtener-base-de-datos">
Obtener la base de datos actual.
</BUTTON>
accesskey le asigna una tecla a un elemento, cuando se presiona dicha tecla el foco se
dirige hacia el elemento. La accin que tiene lugar cuando el foco se dirige hacia un
elemento depende del elemento. Por ejemplo, cuando un usuario activa un vnculo
definido por el elemento <A>, el agente de usuario (dispositivo que interpreta los
documentos HTML) normalmente sigue el vnculo. Cuando un usuario activa un
radiobotn, el agente de usuario cambia el valor del radiobotn. Cuando el usuario
activa un campo de texto, ste permite la entrada de texto, etc.
<LABEL for="nombre-usuario" accesskey="U">
User Name
</LABEL>
<INPUT type="text" name="usuario" id="nombre-usuario">
La invocacin de teclas de acceso depende del sistema subyacente. Por ejemplo, en
mquinas que ejecuten MS Windows, normalmente hay que pulsar la tecla "alt"
adems de la tecla de acceso. En sistemas Apple, normalmente hay que pulsar la tecla
"cmd" adems de la tecla de acceso.
La representacin de teclas de acceso depende del agente de usuario. Recomendamos
a los diseadores que incluyan la tecla de acceso en el texto del rtulo o dondequiera
51
que se aplique la tecla de acceso. Los agentes de usuario deberan representar las
teclas de acceso de tal modo que se enfatice su papel y se distinga de otros caracteres
(p.ej., subrayndola).
52
1.12 MAPAS
Hemos visto que podemos hacer enlaces de texto y de grficos. Pero tambin existe
otra posibilidad: que dentro de una sola imagen podamos acceder a varios enlaces. Se
hace declarando zonas dentro de la imagen (rectngulos, crculos, etc...), siendo cada
una de ellas un enlace distinto. Tradicionalmente, siempre han existido dos maneras
de hacerlo:
Mapas gestionados por el cliente (el navegador).

Mapas gestionados por el servidor.
Los segundos fueron los primeros en desarrollarse y estaban incluidos dentro del
estndar HTML 2.0. Sin embargo, nunca hubo una manera comn de gestionar esos
mapas. Debido a ello, Netscape elabor un sistema propio que fue incluido en el
estndar 3.2: los mapas gestionados por el navegador.
1.12.1- Mapas gestionados por el cliente
Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen.
Vamos primero a declarar nuestro mapa:
<MAP NAME="mi_mapa">
<AREA SHAPE=... COORDS=... ALT="Enlace a..">
...
</MAP>
Dentro de la etiqueta MAP slo definiremos el nombre del mapa (algo imprescindible,
por otra parte). Es dentro de cada elemento AREA donde podremos definir cosas ms
interesantes:
Parmetro Utilidad
SHAPE
Define la forma de la zona, que podr ser rectangular, circular o poligonal.
COORDS
Coordenadas (separadas por comas) que definen la zona. El nmero y

significado de esas coordenadas depender de la zona.
HREF
URL a donde ir el usuario si pulsa sobre esa zona.
NOHREF
Especifica que esa zona no tiene asignado enlace alguno.
ALT
Texto que se presentar en lugar de la imagen en navegadores no grficos

para acceder al enlace.
Como vemos, para declarar correctamente una zona necesitamos conocer cmo se
definen exactamente las formas y coordenadas:
FORMAS
SHAPE
COORDS
Rectangular
RECT
"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y

(x2,y2) la inferior derecha.
Circular
CIRC
"x,y,radio" siendo (x,y) el centro del crculo y radio su... eehh..

cmo lo dira yo? Su radio?.
Polgono
irregular
Toda
imagen
POLY
53
"x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una

esquina del polgono. La ltima pareja de coordenadas se unir
a la primera para cerrar el polgono.
la DEFAULT
No se indican.
1.12.2- Cmo usar un mapa

Ahora que hemos definido un mapa, slo queda asignarlo a una imagen. Esto se hace
del siguiente modo:
<IMG SRC=... USEMAP="#mi_mapa">
Siempre tenemos que aadir al comienzo del nombre de nuestro mapa una almohadilla
(#). Vamos a ver un ejemplo:
<MAP NAME="navegadores">
<AREA SHAPE=RECT COORDS="0,0,24,31"
HREF="http://www.netscape.com" ALT="Netscape">
<AREA SHAPE=RECT COORDS="26,0,53,31"
HREF="http://www.microsoft.com" ALT="Microsoft">
<AREA SHAPE=DEFAULT NOHREF ALT="Nada">
</MAP>
<IMG SRC="nav.gif" WIDTH=53 HEIGHT=31 BORDER=0 USEMAP="#navegadores">
Se ve as:
Hay que tener en cuenta que, cuando dos zonas se solapan, la que est declarada
primero es la que tiene preferencia. Por eso declaramos al final una zona que no
conduce a ningn URL por si el usuario pulsa con el ratn donde no debe.
54
1.13 TABLAS
Las tablas son posiblemente la manera ms clara de organizar la informacin. Tambin
es el modo ms adecuado de modelar el texto y grficos de una manera algo ms
controlada que con los parmetros ALIGN.
Las tablas se definen de la siguiente manera. Primero, las caractersticas de la tabla
(TABLE), luego las de cada fila (TR) y dentro de sta, cada celda (TD). As pues, una
tabla con 2 filas y 3 columnas se declarar as:
<TABLE>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
<TD>1,3</TD>
1,1 1,2 1,3
</TR>
<TR>
2,1 2,2 2,3
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
</TABLE>
Como se puede observar, la tabla no tiene mucho aspecto de tabla. Quedara mejor
con unos bordes, no? Puede que tampoco le fuera mal otorgarle mayor espacio entre
celdas o mayor ancho. Estas son las cosas que podremos cambiar con los atributos que
posee una tabla:
BORDER
Especifica el grosor del borde que se dibujar alrededor de las celdas.

Por defecto es cero, lo que significa que no dibujar borde alguno.
CELLSPACING Define el nmero de pxels que separarn las celdas.

CELLPADDING
Especifica el nmero de pxels que habr entre el borde de una celda y

su contenido.
WIDTH
Especifica la anchura de la tabla. Puede estar tanto en pxels como en

porcentaje de la anchura total disponible para l (pondremos "100%" si
queremos que ocupe todo el ancho de la ventana del navegador).
ALIGN
Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
Si ahora, por ejemplo definimos la tabla anterior como <TABLE BORDER=1 WIDTH="50%"
ALIGN=CENTER> veremos lo siguiente:
1,1
1,2
1,3
2,1
2,2
2,3
55
1.13.1- Definir las filas

Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se
define con una etiqueta TR, que tiene los siguientes atributos:
ALIGN
Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT),

derecha (RIGHT) o centro (CENTER).
VALIGN
Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo

(BOTTOM) o centro (MIDDLE).
1.13.2- Definir las celdas

Por ltimo, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas etiquetas
son equivalentes, pero la ltima se utiliza para encabezados, de modo que todo lo que
se escriba dentro de esta celda por defecto estar en negrita y centrado. Estos son los
atributos de ambas:
ALIGN
Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha

(RIGHT) o centro (CENTER).
VALIGN
Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o

centro (MIDDLE).
WIDTH
Especifica la ancho de la celda. Tambin se puede especificar tanto en pixels

como en porcentaje, teniendo en cuenta que, en este ltimo caso, ser un
porcentaje respecto al ancho total de la tabla (no de la ventana del
navegador).
NOWRAP
Impide que, en el interior de la celda, se rompa la lnea en un espacio.
COLSPAN Especifica el nmero de celdas de la fila situadas a la derecha de la actual

que se unen a sta (incluyendo la celda en que se declara este parmetro).
Es por defecto uno. Si se pone igual a cero, se unirn todas las celdas que
queden a la derecha.
ROWSPAN Especifica el nmero de celdas de la columna situadas debajo de la actual que
se unen a sta.
Posiblemente los dos ltimos parmetros no puedan quedar claros sin ejemplos. De
hecho, an entendiendo perfectamente su funcin es habitual que confundamos a uno
con otro. Pero bueno, vamos a ver una tabla de 3x3 con una celda que se une a una
de la derecha y otra que se une a otra de debajo:
56
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>1,1 y 1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
1,1 y 1,2
1,3
<TD ROWSPAN=2>2,1 y 3,1</TD>
<TD>2,2</TD>
2,2 2,3
2,1 y 3,1
<TD>2,3</TD>
3,2 3,3
</TR>
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
Como vemos, cuando declaramos una celda con ROWSPAN o COLSPAN, no deberemos
declarar las celdas "absorbidas" o la creacin de la tabla se nos complicar de horrible
manera.
1.13.3- Ttulo de la tabla
Por ltimo, veremos como definir un ttulo para la tabla. Esto se hace por medio de la
etiqueta CAPTION. Para ver cmo funciona, vamos a incluirlo en la declaracin de la
tabla anterior:
<TABLE BORDER=1>
Ejemplo de tablas
<CAPTION>
1,3
Ejemplo de tablas 1,1 y 1,2
</CAPTION>
2,2 2,3
...
2,1 y 3,1
3,2 3,3
</TABLE>
Esta etiqueta admite slo un parmetro: ALIGN, que es por defecto TOP, ubicando el
texto en la parte superior de la tabla. Si lo definimos como BOTTOM el ttulo se colocar
al final de la tabla en lugar del comienzo.
57
1.14 MARCOS
Un marco (FRAME) es una ventana independiente (subventana) dentro de la ventana
general del navegador, que tendr sus bordes y sus propias barras de desplazamiento.
As cada pgina se dividir en la prctica en varias pginas independientes.
Para crearlos necesitaremos un documento HTML especfico, que llamaremos
documento de definicin de marcos. En l especificaremos el tamao y posicin de
cada marco y el documento HTML que contendr. Un ejemplo de este tipo de
documento sera:
<HTML>
<HEAD>
<TITLE>Mi primera pgina con marcos</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAME NAME="principal" SRC="introduccion.html">
<NOFRAMES>
<P>Lo siento, pero slo podrs ver esta pgina
si tu navegador tiene la capacidad de visualizar
marcos.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
Explicaremos detalladamente este ejemplo antes de investigar ms a fondo cada una
de las etiquetas. Vemos que la cabecera de la pgina es similar a un documento
normal, pero el habitual BODY es sustituido por un FRAMESET. En cada FRAMESET se
divide la ventana actual (sea la general o un marco) en varias ventanas definidas o por
el parmetro COLS o por ROWS. En ste, separado por comas, se define el nmero de
marcos y el tamao de cada uno.
Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos
ponindoles un nombre y especificando qu archivo HTML (puede ser ASP, PHP, y
otros) le corresponde mediante la etiqueta <FRAME>. Por ltimo, especificamos lo que
ver el usuario en el supuesto (cada vez ms raro) de que su navegador no soporte
FRAMES dentro de la etiqueta <NOFRAMES>. Ahora veremos todos estos elementos en
mayor detalle.
1.14.1- Etiqueta <FRAMESET>
Segn el estndar, esta etiqueta slo debera contener el nmero y tamao de cada
marco, pero las extensiones de Netscape y Explorer al estndar obligan a estudiar un
par de parmetros ms.
En general, los navegadores dibujan un borde de separacin entre los marcos. Si
desea eliminarlo puede hacerlo de dos maneras: en las etiquetas <FRAME> de cada una
de los marcos contiguos al borde a eliminar o incluyendo el parmetro FRAMEBORDER=0
en el <FRAMESET>.
58
Cuando se elimina ese borde, podrs ver cmo el navegador deja an un espacio entre
los marcos. Este se hace aadiendo los parmetros FRAMESPACING=0 BORDER=0.
Vamos a examinar por ltimo los parmetros COLS y ROWS. Deberemos asignarles una
lista de tamaos separada por comas. Se admiten los siguientes formatos de tamao:
Con porcentajes: Al igual que con las tablas, podemos definir el tamao de un
marco como un porcentaje del espacio total disponible.
Absolutos: Si le asignamos un nmero a secas, el marco correspondiente
tendr el tamao especificado en pxels.
Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos
indicando que queremos todo el espacio sobrante para ese marco. Podemos
poner este smbolo en varios marcos, que se repartirn el espacio
equitativamente como buenos hermanos. Si queremos que uno tenga ms
deberemos ponerle al asterisco un nmero delante. As, un marco con un
espacio de 3* ser tres veces ms grande que su compaero, que tiene un
asterisco slo.
Por ejemplo, el siguiente cdigo es una muestra de cmo combinar los tres mtodos:
<FRAMESET COLS="10%,*,200,2*">
Supongamos que el ancho total de la ventana son 640 pxels. El primer marco ocupar
el 10%, es decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para los
otros dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos
aproximadamente 158 pixels para este ltimo y 316 para el cuarto marco.
Hay que tener cuidado cuando usamos valores absolutos en la definicin de marcos;
debemos asegurarnos de tener al menos un marco con un tamao relativo si queremos
estar seguro del aspecto final de la pgina.
Por ltimo, nos queda indicar que las etiquetas <FRAMESET> se pueden anidar,
poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal
que quedar de la siguiente manera:
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAMESET ROWS="*,80">
<FRAME NAME="principal" SRC="introduccion.html">
<FRAME NAME="ejemplos" SRC="ejemplo.html">
</FRAMESET>
</FRAMESET>
1.14.2- Etiqueta <FRAME>
Esta etiqueta define tan slo las caractersticas de un marco determinado, no de un
conjunto de ellos. Estos son los parmetros que admite:
NAME
Asigna un nombre a un marco para que despus podamos referirnos a

l.
SRC
Indica la direccin del documento HTML que ocupar el marco.
59
SCROLLING
Decide si se colocan o no barras de desplazamiento al marco para que

podamos movernos por su contenido. Su valor es por defecto AUTO,
que deja al navegador la decisin. Las otras opciones que tenemos son
YES y NO.
NORESIZE
Si lo especificamos el usuario no podr cambiar de tamao el marco.
FRAMEBORDER
Al igual que su homnimo en la etiqueta <FRAMESET>, si lo igualamos

a cero se eliminar el borde con todos los marcos contiguos que tengan
tambin este valor a cero.
MARGINWIDTH
Permite cambiar los mrgenes horizontales dentro de un marco. Se

representa en pxels.
MARGINHEIGHT Igual al anterior pero con mrgenes verticales.

1.14.3- Acceso a otros marcos
Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva
pgina a la que queremos acceder la veremos encerrada en ese mismo marco. Es
posible que deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que nos
sirve de ndice y otro donde mostramos los contenidos sera deseable que los enlaces
del marco ndice se abrieran en el otro marco. Esto es posible hacerlo gracias al
parmetro TARGET.
Este parmetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos
primeras sirve para indicar el marco en el que abriremos ese enlace en particular y en
el ltimo modificaremos el marco en el que por defecto se nos muestran todos los
enlaces.
Pero para que un parmetro funcione, es habitual que le asignemos un valor, y TARGET
no es una excepcin. Para indicarle el marco que deseamos le asignaremos el nombre
del mismo. As, en los ejemplos anteriores, si en el marco llamado indice tenemos un
enlace que queremos se abra en el marco principal pondremos:
<A HREF="pagina.html" TARGET="principal">
Tambin existen cuatro nombres reservados que podremos utilizar en el parmetro
TARGET:
_top
_blank
Elimina todos los marcos existentes y muestra la nueva pgina en la ventana

original sin marcos.
Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
_self
Muestra la nueva pgina en el marco donde est declarado el enlace.

_parent
Muestra la nueva pgina en el <FRAMESET> que contiene al marco donde se
declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, un
enlace situado en el marco ejemplo cuyo parmetro TARGET fuese igual a
_parent eliminara la separacin entre los marcos ejemplo y principal y
mostrara en ese nuevo marco la nueva pgina.
60
1.15 HOJAS DE ESTILO

Las hojas de estilo representan un avance importante para los diseadores de pginas
Web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus
pginas. En los entornos cientficos en que la Web fue concebida, la gente estaba ms
preocupada por el contenido de sus pginas que por su presentacin. A medida que la
Web era descubierta por un espectro mayor de personas de distintas procedencias, las
limitaciones del HTML se convirtieron en fuente de continua frustracin, y los autores
se vieron forzados a superar las limitaciones estilsticas del HTML. Aunque las
intenciones han sido buenas (mejorar la presentacin de las pginas Web), las tcnicas
para conseguirlo han tenido efectos secundarios negativos. Entre estas tcnicas, que
dan buenos resultados para algunas personas (algunas veces, no siempre) y para otras
no, se incluyen:
La utilizacin de extensiones propietarias del HTML

Conversin del texto en imgenes
Utilizacin de imgenes para controlar el espacio en blanco
La utilizacin de tablas para la organizacin de las pginas
Escribir programas en lugar de usar HTML
Estas tcnicas incrementan considerablemente la complejidad de las pginas Web,

ofrecen una flexibilidad limitada, sufren de problemas de interoperabilidad y crean
dificultades para las personas con discapacidades.
Las hojas de estilo resuelven estos problemas al mismo tiempo que reemplazan el
limitado rango de mecanismos de presentacin del HTML. Con las hojas de estilo es
ms fcil especificar la cantidad de espacio entre lneas, el sangrado de las lneas, los
colores a utilizar para el texto y el fondo, el tamao y estilo de las fuentes, y otros
muchos detalles. Miremos el siguiente ejemplo:
<STYLE TYPE="text/css">
P {color: green; margin-left: 30;}
</STYLE>
Nos detendremos en todos los elementos. Para empezar, la etiqueta HTML con la que
englobaremos las hojas de estilo ser <STYLE>, que slo podr estar situada en la
cabecera de la pgina (dentro de las etiquetas <HEAD>). Su parmetro TYPE indica la
sintaxis que utilizaremos para definirlas. En el caso de las hojas en cascada deber ser
text/css.
Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos primero la
etiqueta que deseamos personalizar. Ser <P>. Despus, entre parntesis, pondremos
una lista de las cosas que queremos modificar. En nuestro caso son dos, el color (en el
formato habitual) y el margen, que se define en pxels. Hay que destacar que, aunque
muchas veces los navegadores tengan una cierta manga ancha, la sintaxis CSS
(Cascading Style Sheet) es sensible a la diferencia entre maysculas y minsculas.
Conviene tener cuidado!!!.
61
El HTML 4.0 permite declarar fuera de la pgina las hojas de estilo, llevando de este
modo al extremo su filosofa de separar estructura y contenido. Si colocamos nuestras
hojas de estilo en un archivo llamado estilos.css (solo las hojas, no la etiqueta
<STYLE>, o sea, el contenido de la etiqueta), podemos vincular la misma con el
documento HTML mediante la etiqueta <LINK>:
<LINK href="especial.css" rel="stylesheet" type="text/css">
HTML 4 soporta las siguientes caractersticas de hojas de estilo:
Colocacin flexible de la informacin de estilo
Al colocar las hojas de estilo en archivos separados es ms fcil reutilizarlas.
Algunas veces es til incluir instrucciones de representacin dentro del
documento al que se aplican, ya sea agrupada al comienzo del documento, o en
atributos de los elementos a lo largo del cuerpo del documento. Para facilitar la
gestin de estilos a nivel de sitio, esta especificacin describe cmo utilizar los
encabezados HTTP para especificar qu hojas de estilo se aplican a un
documento.
Independencia de lenguajes de hojas de estilo especficos
Esta especificacin no liga el HTML con ningn lenguaje de hojas de estilo en
particular. Esto permite que se puedan usar otros lenguajes diferentes, desde
los lenguajes ms simples vlidos para la mayora de los usuarios, hasta los
ms complejos, tiles para una minora de usuarios con necesidades muy
especializadas. Todos los ejemplos que se incluyen en lo que sigue se sirven del
lenguaje CSS (Hojas de Estilo en Cascada, Cascading Style Sheets, [CSS1]),
pero tambin son posibles otros lenguajes.
Cascada
Se llama as a la capacidad que proporcionan algunos lenguajes de hojas de
estilo tales como CSS que permiten que las informaciones de estilo
provenientes de varias fuentes puedan combinarse. stas podran ser, por
ejemplo, las guas de estilo de una empresa, los estilos comunes a un grupo de
documentos, y los estilos especficos de un documento en particular. Al
almacenarse independientemente, las hojas de estilo pueden reutilizarse, lo
cual simplifica las tareas de diseo y hace ms efectiva la utilizacin de la
memoria cach de la red. La cascada define una secuencia ordenada de hojas
de estilo en la que las reglas de las ltimas hojas tienen una prioridad mayor
que las de las primeras. No todos los lenguajes de hojas de estilo soportan la
cascada.
Dependencias de los medios
HTML permite a los autores especificar sus documentos de una manera
independiente del medio, permitiendo a los usuarios acceder a las pginas Web
usando una amplia gama de dispositivos y medios, por Ej: pantallas grficas
para ordenadores bajo Windows, Macintosh OS y X11, dispositivos para
aparatos de televisin, telfonos adaptados y dispositivos porttiles PDA,
navegadores basados en voz, y dispositivos tctiles Braille.
Las hojas de estilo, por el contrario, se aplican a medios o grupos de medios
especficos. Una hoja de estilo diseada para una pantalla puede ser aplicable
para una salida impresa, pero es de poca utilidad para los navegadores basados
62
en voz. Esta especificacin le permite definir categoras generales de medios a

los que es aplicable y a su vez evitar la descarga de hojas de estilo que no sean
apropiadas. Los lenguajes de hojas de estilo pueden incluir caractersticas para
describir dependencias del medio dentro de una misma hoja de estilo.
Estilos alternativos
Los diseadores pueden querer ofrecer a los lectores varias maneras diferentes
de ver un documento. Por ejemplo, una hoja de estilo para representar
documentos compactos con fuentes pequeas, o una que especifique fuentes
ms grandes para una lectura ms fcil. Esto permite a los autores especificar
una hoja de estilo preferente as como hojas alternativas que se dirijan a
medios o usuarios especficos. Los agentes de usuario deberan dar a los
usuarios la oportunidad de seleccionar una de las hojas de estilo alternativas o
incluso de desactivarlas completamente.
Consideraciones de rendimiento
Algunas personas han expresado su preocupacin acerca de los posibles
problemas de rendimiento relacionados con las hojas de estilo. Por ejemplo, la
obtencin de una hoja de estilo externa puede retrasar la presentacin del
documento al usuario. Algo parecido sucede si la cabecera del documento
contiene un conjunto muy grande de reglas de estilo.
La propuesta actual resuelve estos problemas, pues permite a los autores
incluir instrucciones de representacin dentro de cada elemento HTML. As, la
informacin de representacin siempre estar disponible en el momento en que
el agente de usuario quiera representar cada elemento.
En muchas oportunidades los diseadores sacarn partido de una hoja de estilo
comn a un grupo de documentos. En este caso, la distribucin de reglas de
estilo a lo largo del documento conducir a un rendimiento peor que si se usara
una hoja de estilo vinculada, ya que para la mayora de los documentos la
misma estar almacenada en la cach local. La disponibilidad pblica de hojas
de estilo de calidad potenciar este efecto.
1.15.1- Clases
Hasta ahora habamos definido estilos para una etiqueta determinada. Pero tambin
podemos hacerlo para una clase determinada. Esto que significa? Que si, por ejemplo,
definimos la hoja de estilo de la clase verde de la siguiente manera:
P.verde {color: green; margin-left: 30px;}
slo estarn verdes y con un margen izquierdo de 30 pixels aquellos prrafos definidos
con <P CLASS="verde">. As de sencillo.
Ampliando un poco ms las posibilidades de las clases, se pueden realizar excepciones.
Supongamos que tenemos unos prrafos que queremos que tengan unos mrgenes
determinados y color verde, y deseamos que uno slo de esos prrafos, con los
mismos mrgenes, sea azul. Podramos definir dos clases distintas, pero hay un
mtodo mejor: usar el parmetro ID. Por ejemplo:
all.verde {color: green; margin-left: 10px;}
63
#ej1 {color: blue;}

Ahora todos los prrafos de clase verde seran, obviamente, verdes y con un margen
de 10 pxels. Sin embargo el prrafo definido por <P CLASS="verde" ID="ej1"> ser
azul:
Este prrafo es muy verde.

Y este tambin...
Sin embargo, este no, fjate que curioso.
Para resumir observen el siguiente ejemplo:
La siguiente declaracin STYLE pone un borde alrededor de todos los elementos H1 del
documento y los centra en la pgina.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
Para especificar que esta informacin de estilo slo debera aplicarse a los elementos
H1 de una clase especfica, la modificamos como sigue:
<HEAD>
H1.miclase {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miclase"> Este H1 est afectado por nuestro estilo </H1>
<H1> Este no est afectado por nuestro estilo </H1>
</BODY>
Finalmente, para limitar el alcance de la informacin de estilo a una sola aparicin de
H1, establecemos el atributo id:
<HEAD>
#miid {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miclase"> Este H1 no est afectado </H1>
<H1 id="miid"> Este H1 est afectado por el estilo </H1>
<H1> Este H1 no est afectado </H1>
</BODY>
64
1.15.2- Etiquetas <SPAN> y <DIV>

Puede que, a veces, no queremos modificar el comportamiento de un elemento sino
crear un estilo que acte slo y sea completamente creado de la nada. Una etiqueta
nueva y propia. Entonces, qu hacemos? Utilizar las etiqueta <SPAN> y <DIV>.
Los elementos DIV y SPAN, ofrecen un mecanismo genrico para aadir estructura a
los documentos. Estos elementos especifican si su contenido es en lnea (SPAN) o en
bloque (DIV) pero no imponen ningn otro estilo de presentacin al contenido. As, los
autores pueden usar estos elementos junto con hojas de estilo, para adaptar el HTML a
sus propios gustos y necesidades.
El mtodo es simple. Definimos una clase rojo que simplemente modifique el color
(que ser rojo). Ahora, si queremos que una seccin de texto est en rojo lo
encerraremos entre las etiquetas <SPAN CLASS="rojo"> y </SPAN> o entre <DIV
CLASS="rojo"> y </DIV>. La diferencia entre ambas es que, mientras SPAN realmente
no hace nada por s misma, DIV convierte a todo lo que encierra en un bloque aparte
(poniendo un salto de lnea tanto al comienzo como al final). Veremos en el siguiente
apartado que a las etiquetas que se comportan como bloques (<P>, <H1>, las que
dijimos modifican un prrafo entero) se les pueden definir atributos propios desde las
hojas de estilo. Por ejemplo, si definimos las siguientes hojas:
all.titulo {
margin-top: -24px;
color: blue;
font-size: 20px;
}
all.sombra {
margin-top: 2px;
margin-left: 2px;
color: black;
font-size: 20px;
}
cuyos atributos explicaremos en la referencia de las hojas de estilo, y ponemos el
siguiente cdigo HTML:
<DIV ALIGN="CENTER" CLASS="sombra">El maravilloso curso de HTML</DIV>
<DIV ALIGN="CENTER" CLASS="titulo">El maravilloso curso de HTML</DIV>
obtendremos este bello efecto:
El maravilloso curso de HTML

En el siguiente apartado tendr una gua de referencia con todos o casi todos los
atributos que se pueden modificar con CSS.
65
1.16 ATRIBUTOS DE CSS

En este punto veremos todas o casi todas las propiedades que se pueden alterar por
medio de las hojas de estilo. Hay que indicar que algunos de ellos no los soporta el
Explorer y en cambio otros no los entiende el Netscape. As que es recomendable
probarlos en ambos exploradores antes de incorporarlos a nuestras pginas.
1.16.1- Propiedades de bloque
Vamos a empezar con las propiedades de bloque, que definen parte del diseo como
los mrgenes o la colocacin de bloques de contenido HTML:
Propiedad
Descripcin
margin-top, margin-right,
Distancia
mnima
entre
un
margin-bottom, margin-left,
bloque y los dems elementos.
margin: top right bottom left Tanto margin como margins() se
utilizan para cambiar todos estos
atributos a la vez.
Posibles valores
tamao,
porcentaje o
auto. Por defecto
es cero.
padding-top, padding-right,
padding-bottom, paddingleft,padding: top right
bottom left
tamao,
Distancia entre el borde y el porcentaje o
contenido de un bloque.
auto. Por defecto
es cero.
Border-top-width, borderright-width, border-bottomwidth, border-left-width,

border-width: top right
bottom left
Anchura del borde de un bloque. numrico
Estilo del borde de un bloque.
none, solid o
3D, por defecto
ninguno (none).
border-color
Color del borde de un bloque.
cualquier color
width, height
tamao,
Tamao de un bloque. Su mayor
porcentaje o
utilidad est en su aplicacin a
auto, automtico
un elemento grfico.
por defecto.
Flota
left, right o
Justificacin del contenido de un
none, por defecto
bloque.
ninguna.
clear
Permiso para que otro elemento left, right,

se pueda colocar a su izquierda both o none, por
o derecha.
defecto ninguno.
border-style
1.16.2- Propiedades del tipo de letra

Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver, que
son las siguientes:
Propiedad
Descripcin
fontfamily
Tipo de letra (que puede

lista de tipos, ya sean genricos o no,
ser genrico) que vamos a
separados por comas.
usar.
Posibles valores
font-size
xx-small, x-small, small, medium, large, xlarge, xx-large, tamao relativo o tamao
absoluto. Por defecto medium.
Tamao del tipo de letra.

fontweight
fontstyle
66
normal, bold, bolder, lighter o 100-900

Grosor del tipo de letra
(donde 900 es la negrita ms gruesa). Por
(negrita).
defecto normal.
Estilo del
(cursiva).
tipo
de letra
normal, italic, italic small-caps,

oblique, oblique small-caps o small-caps.
Por defecto normal.
Cabe recordar que los tipos genricos son serif, sans-serif, cursive, fantasy y
monospace. Cada uno de estos tipos ser equivalente a alguno que pueda tener
instalado el ordenador del usuario. As, por ejemplo, en una PC con Windows si
encuentra instalado serif puede equivaler a Times New Roman y el monospace a
Courier.
1.16.3- Propiedades de formato del texto
Nuestro siguiente objetivo va a ser usar las propiedades de formato del texto, que
cualquier procesador de textos nos permite utilizar.
Propiedad
Descripcin
line-height Interlineado.
textdecoration
verticalalign
Posibles valores
nmero o porcentaje.
none, underline (subrayado), overline (como

Efectos variados sobre subrayado, pero por encima), line-through
el texto.
(tachado) o blink (parpadeante); por defecto
ninguno.
Posicin
texto.
vertical
baseline (normal), sub (subndice), super

del (superndice), top, text-top, middle, bottom,
text-bottom o un porcentaje. Por defecto
baseline
texttransform
capitalize (pone la primera letra en

Transforma el texto a
maysculas), uppercase (convierte todo a
maysculas
o
maysculas), lowecase (a minsculas) o none,
minsculas.
por defecto no hace nada.
text-align
Justificacin del texto. left, right, center o justify
text-indent Tabulacin con que

aparece la primera tamao o porcentaje, por defecto cero (0).
lnea del texto.
67
1.16.4- Propiedades de color y fondo

Tambin es posible cambiar los colores y el grfico de fondo de un elemento.
Propiedad
Descripcin
Posibles valores
color
Color del texto.
un color (en el formato habitual).
background Modifica tanto el grfico el color ruta del archivo que contiene la imagen
de fondo.
o un color.
Hay que decir que, en la sintaxis en cascada, las direcciones se expresan del siguiente
modo:
background: url(fondobonito.gif);
1.16.5- Propiedades de clasificacin
Hasta ahora habamos distinguido a la hora de ver las propiedades de un elemento, en
si estos eran tratados como bloques o no. Pero el hecho de usar bloques o no... no es
acaso otra propiedad? Estas y otras formas de clasificar los elementos se pueden
cambiar usando las siguientes propiedades:
Propiedad Descripcin
Posibles valores
display
Decide si un elemento es interior

inline, block, list y none (que
(como <I>), un bloque (<P>) o un
'apaga' el elemento)
elemento de una lista (<LI>).
liststyle
disc, circle, square, decimal,

Estilo de un elemento de una lista,
lower-roman, upper-roman, lowerpudiendo incluir un grfico al
alpha, upper-alpha, none o la
comienzo del mismo.
direccin de un grfico
whitespace
Decide como se manejan los

espacios, si de manera normal o
normal y pre
como sucede dentro de la etiqueta
<PRE>.
68
1.17 LENGUAJES DE SCRIPT

Un lenguaje de script es un pequeo lenguaje de programacin cuyo cdigo se inserta
dentro del documento HTML. Este cdigo se ejecuta en el navegador del usuario al
cargar la pgina, o cuando sucede algo especial como puede ser el pulsar sobre un
enlace.
Estos lenguajes permiten variar dinmicamente el contenido del documento, modificar
el comportamiento normal del navegador, validar formularios, realizar pequeos trucos
visuales, etc... Sin embargo, conviene recordar que se ejecutan en el navegador del
usuario y no en la mquina donde estn alojadas, por lo que no podrn realizar cosas
como manejar bases de datos. Esto hace que los contadores (por ejemplo) se deban
realizar de otra manera, utilizando programas CGI.
El primer lenguaje de script que vi la luz fue el JavaScript de Netscape. Nacido con la
versin 2.0 de este navegador y basado en la sintaxis de Java, su utilidad y el casi
absoluto monopolio que entonces ejerca Netscape en el mercado de navegadores
permitieron que se popularizara y extendiera su uso.
El mximo rival del Netscape Navigator, el Internet Explorer de Microsoft, comenz a
soportar este lenguaje en su versin 3.0. Fue tambin entonces cuando introdujo el
nico rival serio que el JavaScript ha tenido en el mercado de los lenguajes de script:
el VBScript. Basado en el lenguaje BASIC, no ha tenido excesiva difusin en Internet
debido a la previa implantacin del JavaScript y a que son de parecida funcionalidad,
pero s es utilizado dentro de Intranets basadas en el Explorer y dentro de otras
aplicaciones de Microsoft, como IIS, Access, Word, etc...
1.17.1- Javascript
Como este curso est orientado al desarrollo de sitios Web, ms adelante abordaremos
el lenguaje VBScript en el diseo de las pginas ASP. Pero ahora, interesa realizar una
pequea introduccin al Javascript que ms adelante abordaremos por completo.
Realizaremos nuestro primer "programa" en JavaScript. Para ello haremos surgir una
ventana que nos muestre el famoso mensaje "hola, mundo". As podremos ver los
elementos principales del lenguaje. El siguiente cdigo es una pgina Web completa
con un botn que, al pulsarlo, muestra el mensaje.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
69
</FORM>
</BODY>
</HTML>
Ahora veremos, paso por paso, qu significa cada uno de los elementos extraos que
tiene la pgina anterior:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
Dentro de estos elementos ser donde se puedan escribir funciones en JavaScript.
Podes poner cuantos quieras a lo largo del documento y en el lugar que ms te guste.
Si un navegador no entiende la etiqueta <SCRIPT> escribir lo que hay en el contenido
de este elemento, as que lo encerramos entre comentarios () por si
las moscas.
function HolaMundo()
{
alert("Hola, mundo!");
}
Esta es nuestra primera funcin en JavaScript. En el cdigo de la misma vemos una
llamada al mtodo alert (que pertenece al objeto window) que es la que se encarga
de mostrar el mensaje en pantalla. Por un fallo del Netscape no se pueden poner las
etiquetas HTML de caracteres especiales en una funcin: no los reconoce. As que
pondremos directamente "" arriesgndonos a que salga de otra manera en
ordenadores con un juego de caracteres distinto al nuestro.
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
</FORM>
Dentro del elemento que usamos para mostrar un botn vemos una cosa nueva: el
evento onClick. Cuando el usuario pulsa el botn, el evento onClick se dispara y
ejecuta el cdigo que tenga entre comillas, en este caso la llamada a la funcin
HolaMundo(), que tendremos que haber definido con anterioridad.
Este ejemplo muestra una pequea parte de las funcionalidades del JavaScript. De
hecho, su utilidad es ms bien escasa, pero no te preocupes, porque ms adelante
veremos con ms profundidad este tema.
1.17.2- Programa Applet
La instruccin <APPLET> .. </APPLET> indica la ejecucin de un programa (applet)
externo escrito en lenguaje JAVA. Los applets son muy variados y cada uno de ellos
realiza una tarea distinta. Hay applets para hacer que el texto se mueva dentro de la
hoja, se contraiga y expanda, etc.... Esta instruccin tiene los siguientes parmetros:
codebase ="url": Direccin donde se encuentra el applet Java. Si se encuentra en el
mismo lugar que la pagina Web este parmetro no es necesario.
code ="programa": Indica el nombre del programa (applet) a ejecutar.
70
width = "nmero": Indica el ancho en puntos en el que el programa realizar su

funcin.
height ="nmero": Indica el alto en puntos en el que el programa realizar su
funcin.
Dentro de la instruccin <APPLET> se incluye la instruccin <PARAM> que enva al
programa Java los parmetros necesarios para su funcionamiento. Esta instruccin
suele tener como mnimo los parmetros:
name ="campo": Nombre de la variable a enviar.
value = "valor": Valor de la variable a enviar.
Veamos un ejemplo en el que ejecuta un programa Java:
<APPLET codebase="http://www.ucm.es/java" code="Laufschrift.class"
width="350" height="25" >
<PARAM name ="bg.color" value = "0,255,0">
<PARAM name = "message" value = "**Bienvenido a mi pagina WEB - Manual de
HTML**">
</APPLET>
1.17.3- La etiqueta <NOSCRIPT>
El elemento NOSCRIPT permite a los autores proporcionar contenido alternativo
cuando un script no es ejecutado. El contenido de un elemento NOSCRIPT slo debera
ser representado por un agente de usuario capaz de reconocer scripts en los casos
siguientes:
El agente de usuario est configurado para no evaluar scripts.

El agente de usuario no soporta un lenguaje de scripts invocado por un
elemento SCRIPT anterior en el documento.
Los agentes de usuario que no soporten scripts del lado del cliente deben representar
los contenidos de este elemento.
En el siguiente ejemplo, un agente de usuario que ejecute el SCRIPT incluir en el
documento algunos datos creados dinmicamente. Si el agente de usuario no soporta
scripts, el usuario an podr obtener los datos por medio de un vnculo.
<SCRIPT type="text/tcl">
...scripts para insertar datos...
</SCRIPT>
<NOSCRIPT>
<P>Acceder a los <A href="http://algunsitio.com/datos">datos.</A>
</NOSCRIPT>
71
1.18 CAPAS
Las capas pueden definirse como pginas que se pueden incrustar dentro de otras. Los
atributos de una capa (posicin, visibilidad, etc.), como los de cualquier otro elemento
HTML, pueden definirse dentro de una hoja de estilo. Su contenido, en cambio,
siempre deber ser especificado dentro de la parte principal de la pgina. Como se
puede ver, de nuevo estamos siguiendo la filosofa de separar el contenido y la forma
de representarlo.
En realidad, el nombre de capas no es nada oficial: es un invento de Netscape. La
denominacin oficial podra traducirse como "contenido HTML posicionable
dinmicamente". Tampoco se las puede considerar dentro de ningn estndar HTML
sino de los estndares CSS, pero son la base de lo que se ha dado en llamar HTML
dinmico.
Sin duda, lo ms importante de las capas es la posibilidad que presentan de ser
movidas y modificadas desde un lenguaje de script. Desgraciadamente, las
implementaciones de Netscape y Explorer son incompatibles entre s, por lo que
resulta complicado escribir el cdigo para que funcione en ambas plataformas.
1.18.1- Definicin
La nica manera comn de definir capas en Explorer y Netscape (versiones 4 y
superiores cuando las haya) es mediante hojas de estilo en sintaxis CSS, por lo que
ser la que usemos de aqu en adelante.
La definicin de una capa, sigue la misma estructura, que la que usbamos para
decidir las caractersticas de una etiqueta con el parmetro ID:
#micapa {position:absolute; top:100px; left:20px;}
</STYLE>
Esto colocara a la capa que hemos denominado micapa a 20 pxels de la izquierda de
la pgina y a 100 del comienzo de la misma. Muy bien, pero... donde escribimos lo
que queremos que contenga la capa? Utilizaremos para ello la etiqueta <SPAN>:
<DIV ID="micapa">
<H1>El ttulo de la capa</H1>
<P>Aqu es donde ira el texto.
...
</DIV>
Las capas que hemos definido hasta ahora se colocan en una posicin determinada de
la pgina. Pero existe otro tipo de capas llamadas flotantes cuya colocacin depende,
en cambio, de la posicin dentro del cdigo fuente de la pgina donde las hayamos
colocado. Se definen as:
#flotante {position: relative; left:20px; top:100px;}
</STYLE>
72
1.18.2- Propiedades
Existen varias propiedades de las capas que podemos modificar, como son la posicin,
la visibilidad, el orden en que se ponen en pantalla, etc... Son estos:
Propiedad
Descripcin
left y top
Sitan la esquina superior izquierda distancia en pixels, por

de la capa respecto a la esquina defecto cero (0).
superior izquierda de la capa donde
est metida. Hay que tener en
cuenta que el documento completo
tambin se considera una capa.
width y height
Determinan el ancho y altura de la un tamao en pixels.

capa.
clip
Nos permite definir el rea que se un rea.

podr ver dentro de la capa. Por
ejemplo, clip:rect(20px
30px
40px 10px); recortar la capa
creando un cuadro visible cuya
esquina superior izquierda est a 10
pixels por la izquierda y 20 por
arriba de la de la capa y cuyo
tamao sera de 30-10 de ancho y
40-20 de alto.
z-index
Las capas con un mayor z-index se

colocarn ms arriba (se dibujarn
al final, encima de las otras). Debe
ser un valor positivo y nico: dos
capas no pueden tener el mismo zindex.
visibility
Especifican si la capa debe verse o visible,

hidden
estar oculta.
(oculta)
o
inherit
(hereda la visibilidad de
la capa padre). En
aquellas
capas
que
simplemente
estn
dentro de la pgina
principal, este valor es
equivalente a visible.
background-image
Grfico de fondo de la capa.
una direccin.
backgroundcolor
(Explorer)
Color de fondo de la capa.
un color.
y
layer-backgroundcolor (Netscape)
Posibles valores
nmero positivo, por

defecto
las
capas
definidas en el cdigo
HTML ms tarde estn
ms arriba.
73
1.19 SONIDO
Tanto Netscape como Explorer incorporan desde hace tiempo la capacidad de
reproducir sonido. El nico problema es que los archivos suelen ser grandes y, siendo
algo innecesario y superfluo, poca gente incluye melodas en sus pginas.
Los formatos que seguramente pueden reproducir los navegadores, son los archivos
WAV y MID. Para poder reproducir otros necesitarn el plug-in o aadido necesario,
como puede ser el Real Audio para los archivos RA o el ModPlug para los MOD y otros.
1.19.1- Sonido activado por el usuario
La manera ms sencilla de incluir sonidos es dejando al usuario la decisin de
escucharlos o no. Para hacerlo incluiremos el sonido en el parmetro HREF de un
enlace, como si fuera una pgina HTML:
<A HREF="hola.wav">Si pulsas te saludo<A>
1.19.2- Sonido de fondo
El sonido de fondo ya es ms complicado, ya que Netscape y Explorer ofrecen
soluciones propietarias, distintas e incompatibles de hacer sonar un archivo de fondo.
En Explorer, desde la versin 2.0, se pueden incluir fondos sonoros utilizando la
etiqueta BGSOUND:
<BGSOUND SRC="musica.mid">
El parmetro SRC indicar el archivo a reproducir. Esta etiqueta admite tambin otro
parmetro, LOOP, que indica el nmero de veces consecutivas que sonar el archivo. Si
se indica LOOP="infinite", el archivo se reproducir indefinidamente, mientras
estemos en la pgina.
Netscape utiliza su etiqueta <EMBED>. Tericamente, esta etiqueta debera servir para
unir objetos de varios tipos a la pgina Web, pero en la prctica slo se utiliza para
esto. Esta etiqueta tiene los siguientes parmetros:
Parmetro
Utilidad
SRC
Contiene el nombre de archivo de sonido a reproducir
WIDTH y HEIGHT
En Netscape aparece un pequeo reproductor, estos parmetros

especifican su tamao.
AUTOSTART="true" Arranca automticamente la reproduccin.

LOOP="true"
Reproduce ininterrumpidamente el archivo hasta que salimos de la

pgina.
HIDDEN="true"
Oculta el reproductor.
74
Sin embargo, y debido a algunos bugs (errores del software, que pueden ocasionar el
mal funcionamiento del mismo), si queremos reproducir infinitamente un archivo con
el reproductor oculto, deberemos incluir todos los parmetros, an WIDTH y HEIGHT.
Adems, si el usuario tiene algn plug-in de un tercero, en lugar del que viene con
Netscape, es posible que deje de funcionar correctamente.
Dado que ambas etiquetas son incompatibles entre s, basta con incluir las dos... o,
mejor dicho, bastaba. Ahora el Explorer es capaz de interpretar <EMBED>, pero no
exactamente de la misma manera, lo que provoca que aparezca una ventana aparte
con el reproductor. En definitiva, la mejor manera de mostrar una msica de fondo es
usando un pequeo script que averige en qu navegador se encuentra y discrimine la
porcin de cdigo.
75
Actividades de autoevaluacin
1.- Qu son los estndares?
2.- Qu relacin existe entre etiqueta, atributo y valor?
3.- Cuales son las principales partes en la que se divide un documento HTML y que es
lo que contienen cada una de ellas?
4.- Qu son los ANCHORS y cul es la funcin de cada uno de los atributos del
mismo?
5.- Direcciones absolutas y relativas. En que contexto se utilizan?
6.- Qu son los metadatos? Clasificacin.
7.- Enumere y explique brevemente cual es la funcin de cada uno de los elementos
que puede contener un formulario para la entrada y salida de datos.
8.- Escriba el cdigo para representar la siguiente tabla (tenga en cuenta la alineacin
del contenido de cada una de las celdas y el tamao de ellas):
2
1
3
5
9.- Para que sirven las hojas de estilo?

a) Realice una hoja de estilo que configure:
Nombre de la fuente: Verdana Arial (en ese orden)
Tamao de la letra: 8
Color de la letra: Negro
Efectos: Italic y Bold
b) Especifique como se vincula la hoja de estilo desarrollada anteriormente desde
un documento HTML.
10.- Definicin de CAPA y explique brevemente la funcin de las siguientes
propiedades:
- Left
- Height
- z-index
- clip
76
Claves de respuesta
1.- Los estndares son las guas con las cuales los navegadores as como codificadores
de HTML deberan estar trabajando. Esto asegura que el cdigo fuente desarrollado en
una pgina, funcione de igual manera en todos los exploradores disponibles en el
mercado. Crea un estndar para el lenguaje HTML.
2.- Las etiquetas son funciones que interpreta el lenguaje HTML para darle formato a
una pgina. Estas acciones se llevan a cabo por los atributos propios de una etiqueta,
que a su vez, son configurados por valores que pueden ser palabras o nmeros
expresados en pxel o porcentajes.
3.- Un documento HTML se divide en dos partes principales: la cabecera y el cuerpo.
En la cabecera es donde se introduce el ttulo de la pgina, los metadatos (que nos
servirn principalmente para dar de alta nuestra pgina en los buscadores de una
forma eficiente), los Scripts (para dar un funcionamiento dinmico a la pgina) y las
Hojas de estilo (un mtodo avanzado de formateado).
En el cuerpo se indica el contenido visual de la pgina, que puede ser el texto,
imgenes, formularios, video, animaciones, etc. Este contenido es el que visualiza el
usuario final en su explorador.
4.- Una etiqueta ANCHOR representa un enlace de una zona de texto o grficos que si
son seleccionados nos trasladan a otro documento de hipertexto o a otra posicin
dentro del documento actual.
Los principales atributos de esta etiqueta son los siguientes:
- href: define la direccin destino donde nos queremos dirigir. Esta direccin puede ser
una URL, una direccin de mail, un archivo a descargar o una seccin que se encuentra
dentro de la misma pgina.
- name: si queremos movernos a una seccin determinada en la misma pgina, este
atributo define el nombre de la seccin, para despus invocarla mediante el atributo
href.
- target: determina el marco (frames) o ventana donde se abrir la direccin
especificada en el atributo href.
5.- Una direccin absoluta utiliza la ruta completa del enlace destino, no slo una parte
de l, sino, que debe incluir la palabra inicial http:// seguida del nombre del dominio.
Este tipo de enlace se utiliza cuando queremos dirigirnos a otro sitio hospedado en otro
servidor.
En cambio los enlaces relativos nos permiten enlazar pginas situadas en un mismo
servidor. Estos archivos pueden estar en el mismo directorio o cada uno de ellos en un
directorio distinto.
6.- Los metadatos sirven para indicar propiedades de la pgina.
Uno de los usos ms comunes de estos, es especificar palabras claves que pueden usar
los motores de bsqueda para mejorar la calidad de los resultados de una bsqueda,
cmo tambin se utilizan para sellar una pgina con los datos del autor y la versin del
programa de desarrollo utilizado.
Se clasifican en lo siguiente:
AUTHOR
Autor de la pgina.
GENERATOR
Herramienta utilizada para hacer la pgina.
77
CLASSIFICATION Palabras que permite clasificar la pgina dentro de un buscador

jerrquico (como Yahoo).
KEYWORDS
Palabras clave por las que encontrarn la pgina en los buscadores.
DESCRIPTION
Descripcin del contenido de la pgina.
7.Etiqueta: INPUT
Atributo type:
Text: caja de texto visible para el usuario, de entrada y salida de texto. D
Hidden: caja de texto invisible usada para almacenar valores.
Password: se lo utiliza cuando queremos ingresar una contrasea o palabra
secreta que no queremos que sea visualizado por pantalla para que otro usuario
lo lea.
Submit: botn de confirmacin de datos de un formulario.
Reset: Le devuelve a todos los objetos del formulario el valor especificado en el
atributo value de cada uno de ellos.
Button: es un botn comn para fines determinados.
Checkbox: es una cajita que puede ser tildada devolvindonos un valor true o
false por el nombre del objeto.
Button: Conjunto de opciones que pueden ser seleccionadas mediante un botn
circular.
Etiqueta: TEXTAREA
Es una caja de texto que tiene la particularidad de ingresar el texto en muchas lneas
horizontales, desplazndose por el mismo mediante una barra.
Etiqueta: SELECT
Lista desplegables o de varias filas, que permite almacenar varias opciones pero
ocupando menor espacio en la pgina.
8.<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="450" height="187"
id="AutoNumber1">
<tr>
<td width="136" height="104" rowspan="2" colspan="2"
valign="middle">
<p align="left">1</td>
<td width="308" height="51" colspan="2" valign="middle">
<p align="center">2</td>
</tr>
<tr>
<td width="308" height="52" colspan="2" valign="bottom">3</td>
</tr>
<tr>
<td width="65" height="79" rowspan="2" valign="bottom">
<p align="right">4</td>
<td width="68" height="79" rowspan="2" valign="top">
<p align="left">5</td>
<td width="153" height="79" rowspan="2" valign="top">
78
<td width="154" height="40" valign="top">
<p align="right">7</td>
</tr>
<tr>
<td width="154" height="36" valign="bottom">
</tr>
</table>
9.- Sirven para darles un mayor rango de posibilidades para mejorar la apariencia de
las pginas. Es ms fcil especificar la cantidad de espacio entre lneas, el sangrado de
las lneas, los colores a utilizar para el texto y el fondo, el tamao y estilo de las
fuentes, y otros muchos detalles. Permite tambin separar la estructura de la pgina
del contenido de la misma.
a)
P {
font-family: Verdana, Arial;
font-size: 8pt;
color: #000000;
font-style: italic;
font-weight: bold;
}
b) solo se debe ingresar el cdigo anterior dentro de la etiqueta HEAD con la siguiente
estructura:
P {
font-family: Verdana, Arial;
font-size: 8pt;
color: #000000;
font-style: italic;
font-weight: bold;
}
</STYLE>
y despus, se invoca automticamente al declarar cualquier etiqueta P (prrafo) dentro
del cuerpo de la pgina.
10.- Las capas pueden definirse como pginas que se pueden incrustar dentro de
otras. Lo ms importante de las mismas es la posibilidad que presentan de ser
movidas y modificadas desde un lenguaje de script.
left
Sitan a la izquierda de la capa respecto a la posicin

izquierda de la capa donde est situada. Hay que
tener en cuenta que el documento completo tambin
se considera una capa.
height
Determinan la altura de la capa.
clip
Nos permite definir el rea que se podr ver dentro de

la capa. Por ejemplo, clip:rect(20px 30px 40px
10px); recortar la capa creando un cuadro visible
cuya esquina superior izquierda est a 10 pixels por la

izquierda y 20 por arriba de la de la capa y cuyo
tamao sera de 30-10 de ancho y 40-20 de alto.
z-index
Las capas con un mayor z-index se colocarn ms

arriba (se dibujarn al final, encima de las otras).
Debe ser un valor positivo y nico: dos capas no
pueden tener el mismo z-index.
79

Lenguaje HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lenguaje HTML

Uploaded by

Copyright:

Available Formats

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

UNIVERSIDAD TECNOLGICA NACIONAL

Secretaria de Extensin Universitaria

rea Tecnolgica de Educacin Virtual

Coordinador General de Educacin Virtual: Magster Leandro D. Torres

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

Datos del Autor

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

Ing. Ricardo Martn Espeche Hidalgo

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

En la biblioteca de alguna universidad, un alumno revisa los catlogos de la

Un grupo de investigadores dispersos por el mundo llevan a cabo una tarea

Reuniones virtuales de ejecutivos, ahorran una enorme cantidad de tiempo y

Desde la pantalla de su computador, un agente de bolsa puede tener

Estos ejemplos, y muchos ms tienen un factor en comn: Internet, esta red de

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

Obtener informacin en lnea a travs de vnculos de hipertexto, haciendo clic

Disear formularios para realizar transacciones con servicios remotos, para

Incluir hojas de clculo, video clips, sonidos, y otras aplicaciones directamente

1.1.3- Versiones del HTML

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

1.1.4- Un modelo no-lineal

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

1.2 ANTES DE EMPEZAR

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

<BODY> ... </BODY>

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

1.3 MANEJO DE CARACTERES

&aacute;, &Aacute;, &eacute;,

(espacio en blanco que no puede ser usado para

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

1.3.2- Juego de caracteres

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

1.3.3- Caracteres de control

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

Si queremos poner espacios en el texto normal y corriente, deberemos usar el carcter

se veran de la siguiente forma:

Ing. Ricardo M. Espeche

Desarrollo y programacin de Pginas Web El HTML como lenguaje de programacin

1.4 FORMATO BASICO

Sirve para delimitar un prrafo. Inserta

Representa el texto encerrado en ella

del Yo soy normal

Daniel Rodrguez Herrera

Para citar un texto ajeno. Se suele

Ing. Ricardo M. Espeche

á, Á, é,