2do Manual DisenoWEB

INSTITUTO SUPERIOR TECNOLGICO PRIVADO
PROGRAMA DE COMPUTACIN E INFORMTICA

R.D. N 2540-86-ED
Fundamentos
de Diseo Web
II ciclo
Fundamentos de Lenguaje HTML Diseo WEB con Adobe Fireworks

Integracin WEB con Adobe Dreamweaver Validaciones y efectos con Javascript
Diseo Web
II ciclo
Diseo Web - Grupo IDAT

Desarrollo de Edicin a cargo del Programa de Computacin e Informtica
Director Ejecutivo
Coordinador Acadmico
Coordinador Administrativo
Diseo de Cartula
Elaboracin y Diagramacin
:
:
:
:
:
Ing. Rolando Rojas Gallo

Ing. Jos Carlos Garcia La Riva
Sr. Julio Cabrera Calle
Srta. Fiorella Z. Espinoza Villafuerte
Prof. Gonzalo Anchante Hurtado
Los derechos de edicin, distribucin y contenido de este texto son de

exclusividad del GRUPO IDAT.
PRESENTACIN
La presente publicacin es un material de ayuda institucional, en las especialidades de

Computacin, Informtica & Sistemas, Redes & Comunicaciones, Soporte y Seguridad
Informtica e Ingeniera de Software; tiene por finalidad proporcionar los conocimientos
en el Fundamento de Diseo de Pginas WEB, orientado a los estudiantes del segundo
ciclo de estudios.
El Grupo IDAT, lder en la enseanza tecnolgica a nivel superior, promueve la elaboracin
de materiales educativos, en concordancia a las exigencias de las tecnologas de
estos tiempos, que permiten la creacin de nuevas herramientas de aprendizaje con el
objetivo de facilitar el acceso de los estudiantes a la educacin en el marco del desarrollo
tecnolgico de la Informtica y de las Telecomunicaciones.
Este curso permite tener una visin integral sobre el uso correcto del lenguaje HTML
y XHTML. En la primera parte veremos todo lo referente a etiquetas HTML, uso de
propiedades y aplicacin de Estilos. Los Estilo de gran demanda en el diseo de
WEB sites los trabajaremos de forma integral, aplicando del mismo modo, capas y
posicionamiento.
Luego utilizaremos Fireworks para la creacin de productos y piezas grficas aplicadas a
la WEB, realizaremos diseos de propuestas de Web Sites, aprenderemos a diagramar
en WEB y a sectorizar correctamente. Posteriormente veremos DreamWeaver como
integrador WEB donde utilizaremos capas y todas las herramientas y comportamientos
disponibles para un uso til en el diseo WEB. Finalmente aplicaremos cdigo JavaScript
para realzar nuestros diseos y efectos, as como validacin de formularios. Todos estos
trabajos se aplicarn al dise Web.
Esperamos que este material en su primera edicin, sirva de gran ayuda a los estudiantes
Idatinos y contribuya en el proceso de su formacin profesional.
NDICE
Pag.
Fundamentos de Lenguaje HTML
Introduccin a HTML.................................................................................................. 09
Estructura de una pgina WEB.................................................................................. 10
Partes de un documento HTML.................................................................................. 10
Formato en HTML...................................................................................................... 11
Estandarizacin en el XHTML.................................................................................... 14
El elemento raz (HTML)............................................................................................ 16
La cabecera (HEAD).................................................................................................. 16
El cuerpo (BODY)....................................................................................................... 16
Generar hipervnculos................................................................................................ 17
Enlaces internos......................................................................................................... 18
Enlaces HTML con otras pginas del mismo sitio Web............................................. 19
Enlaces remotos . ...................................................................................................... 21
Enlaces a direcciones de correo ............................................................................... 21
Enlaces con archivos ................................................................................................ 22
Diseo de tablas......................................................................................................... 23
Tablas anidadas ........................................................................................................ 29
Maquetar con tablas .................................................................................................. 32
Elementos de formulario............................................................................................ 32
Texto corto.................................................................................................................. 33
Texto oculto ............................................................................................................... 34
Texto largo ................................................................................................................. 35
Estilos y maquetacin Css......................................................................................... 35
Navegadores que lo soportan.................................................................................... 36
Pequeas partes de la pgina . ................................................................................. 37
Estilo definido en una parte de la pgina .................................................................. 37
Estilo definido para toda una pgina ......................................................................... 38
Estilo definido para todo un sitio web ........................................................................ 39
Reglas de importancia en los estilos ......................................................................... 41
Ejercicio aplicado....................................................................................................... 42
Clase en maquetacin y estilos.................................................................................. 43
Ejercicio aplicado....................................................................................................... 44
Pseudoclases............................................................................................................. 45
Propiedades de las capas.......................................................................................... 45
Veamos primero algunas de las ventajas de la maquetacin CSS............................ 47
Diseo Web con FIREWORKS CS5
Objetos vectoriales.....................................................................................................
Imgenes interactivas................................................................................................
Acerca de las imgenes vectoriales y de mapa de bits.............................................
Acerca de las imgenes vectoriales...........................................................................
Acerca de las imgenes de mapa de bits..................................................................
Descripcin del entorno..............................................................................................
El entorno de trabajo de FIREWORKS......................................................................
Escritorio de FIREWORKS.........................................................................................
Cambio de las opciones de herramientas..................................................................
Utilizacin del panel herramientas.............................................................................
Aplicar efecto de destello...........................................................................................
Utilizacin de reglas, guas y cuadrcula....................................................................
Utilizacin de las reglas..............................................................................................
Utilizacin de las guas...............................................................................................
Utilizacin de la cuadrcula.........................................................................................
53
53
54
54
55
55
56
56
57
58
58
59
60
60
61
Pag.
Utilizacin del panel historial para deshacer y repetir varias acciones...................... 61
Seleccin y transformacin de objetos....................................................................... 62
Seleccin de objetos.................................................................................................. 62
Utilizacin de la herramienta puntero......................................................................... 62
Utilizacin de la herramienta subseleccin................................................................ 63
Utilizacin de la herramienta seleccionar detrs........................................................ 63
Modificacin de una seleccin................................................................................... 64
Seleccin de pxeles.................................................................................................. 64
Seleccin de reas de color similar............................................................................ 65
Ajuste de recuadros de seleccin.............................................................................. 65
Suavizado del borde de un recuadro......................................................................... 66
Creacin y desplazamiento de una seleccin de pxeles flotante.............................. 66
Insercin de un nuevo mapa de bits cortando o copiando......................................... 66
Fundido de selecciones de pxeles............................................................................ 67
Retoque de mapas de bits......................................................................................... 67
Desenfoque, perfilado y mancha de pxeles.............................................................. 68
Aclarado y oscurecimiento de pxeles........................................................................ 68
Eliminacin del efecto de ojos rojos en las fotos........................................................ 68
Integracin WEB con Adobe Dreamweaver CS5
Un web site................................................................................................................. 69
Ver el sitio................................................................................................................... 71
Propiedades del documento....................................................................................... 73
El texto: propiedades y formato.................................................................................. 75
Caractersticas del texto............................................................................................. 75
Listas.......................................................................................................................... 76
Caracteres especiales................................................................................................ 76
Estilos CSS. Introduccin .......................................................................................... 77
Crear un estilo personalizado . .................................................................................. 78
Crear un estilo en lnea.............................................................................................. 78
Crear una regla de estilo............................................................................................ 78
Definir o editar un estilo.............................................................................................. 80
Hojas de estilos exportar estilos................................................................................. 81
Vincular una hoja de estilos........................................................................................ 82
Hiperenlaces ............................................................................................................. 83
Tipos de referencia..................................................................................................... 83
Imgenes.................................................................................................................... 85
Insertar una imagen................................................................................................... 85
Propiedades de una imagen...................................................................................... 86
Cambiar el tamao de una imagen............................................................................ 86
Imagen de sustitucin. Rollover................................................................................. 88
Tablas......................................................................................................................... 89
Insertar una tabla....................................................................................................... 89
Formato de tabla........................................................................................................ 91
Capas......................................................................................................................... 92
Insertar una capa....................................................................................................... 92
Comportamientos....................................................................................................... 94
Mostrar-ocultar elementos.......................................................................................... 96
Abrir nueva ventana del navegador........................................................................... 97
Qu son las plantillas?............................................................................................. 98
Establecer regiones editables en una plantilla........................................................... 100
SPRY Y formularios.................................................................................................... 101
Validacin de campos desplegables ......................................................................... 104
Multimedia.................................................................................................................. 105
Pag.
Peliculas en flash....................................................................................................... 105
Vdeos........................................................................................................................ 106
Maquetar una pgina web.......................................................................................... 107
Desbordamiento......................................................................................................... 108
Sitios remotos............................................................................................................. 109
Configurar un Sitio Remoto........................................................................................ 110
El panel archivos........................................................................................................ 112
Sincronizar Sitios........................................................................................................ 113
Validaciones y Efectos con JavaScript
Introduccin a JavaScript........................................................................................... 115
Ejercicio: Ingresar un nmero y visualizar el doble y su mitad................................... 117
Operadores en JavaScript.......................................................................................... 118
Operadores lgicos.................................................................................................... 119
Operadores de comparacin...................................................................................... 119
Sentencias condicionales........................................................................................... 120
Clasificacin de eventos............................................................................................. 122
Validacin en JavaScript............................................................................................ 126
Arreglos en JavaScript............................................................................................... 131
Objeto Select (ListMenu o Combobox/Listbox).......................................................... 134
ObjetoCheckBox y RadioButton................................................................................. 139
Arreglos de controles................................................................................................. 145
ANEXO II: PREGUNTAS MS FRECUENTES (FAQ)............................................... 147
FUNDAMENTOS DE DISEO WEB
Fundamentos de Lenguaje HTML
Introduccin a HTML
HTML es el lenguaje utilizado como base para crear las pginas web. En este
curso se ver como llevar a cabo el contenido del curso en lo que corresponde a
diseo WEB.
HTML es el lenguaje con el que se escriben las pginas web. Las pginas web
pueden ser vistas por el usuario mediante un tipo de aplicacin llamada
navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por
los navegadores para mostrar las pginas webs al usuario, siendo hoy en da la
interface ms extendida en la red.
Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a
nuestro gusto. Adems, y es aqu donde reside su ventaja con respecto a libros
o revistas, el HTML nos permite la introduccin de referencias a otras pginas
por medio de los enlaces hipertexto.
El HTML se cre en un principio con objetivos divulgativos. No se pens que la
web llegara a ser un rea de ocio con carcter multimedia, de modo que, el
HTML se cre sin dar respuesta a todos los posibles usos que se le iba a dar y
a todos los colectivos de gente que lo utilizaran en un futuro. Sin embargo,
pese a esta deficiente planificacin, si que se han ido incorporando
modificaciones con el tiempo, estos son los estndares del HTML. Numerosos
estndares se han presentado ya.
Es recomendable usar el Bloc de notas que viene con windows, u otro editor de
textos sencillo. Hay que tener cuidado con algunos editores ms complejos
como Wordpad o Microsoft Word, pues colocan su propio cdigo especial al
guardar las pginas y HTML es nicamente texto plano, con lo que podremos
tener problemas.
Existen otros tipos de editores especficos para la creacin de pginas web los
cuales ofrecen muchas facilidades que nos permiten aumentar nuestra
productividad. No obstante, es aconsejable en un principio utilizar una
9
10
herramienta lo ms sencilla posible para poder prestar la mxima atencin a

nuestro cdigo y familiarizarnos lo antes posible con l. Siempre tendremos
tiempo ms delante de pasarnos a editores ms verstiles con la consiguiente
ganancia de tiempo.
Estructura de una pgina WEB

Descripcin de la sintaxis con la que se trabaja en el lenguaje HTML.
El HTML es un lenguaje que basa su sintaxis en un elemento de base al que
llamamos etiqueta. La etiqueta presenta frecuentemente dos partes:
Una apertura de forma general <etiqueta>
Un cierre de tipo </ etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que
caracterizan a esta etiqueta. As por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento
HTML escribimos una frase con el siguiente cdigo:
<b>Esto esta en negrita</b>
El resultado Ser:
Esto esta en negrita
Las etiquetas <p> y </p> definen un prrafo. Si en nuestro documento HTML
escribiramos:
<p>Hola, estamos en el prrafo 1</p>
<p>Ahora hemos cambiado de prrafo</p>
El resultado sera:
Hola, estamos en el prrafo 1.
Ahora hemos cambiado de prrafo.
Partes de un documento HTML
SEGUNDO CICLO
Adems de todo esto, un documento HTML ha de estar delimitado por la

etiqueta <html> y </html>. Dentro de este documento, podemos asimismo
distinguir dos partes principales:
10
El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas

de ndole informativo como por ejemplo el titulo de nuestra pgina.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde
colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas
como las que hemos visto.
El resultado es un documento con la siguiente estructura:

<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra pgina pero que son importantes para
catalogarla: Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que ser mostrada por el navegador: Texto e
imgenes
</body>
</html>
Las maysculas o minsculas son indiferentes al escribir etiquetas.

A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin
de maysculas y minsculas. <html>, <HTML> o <HtMl> son la misma etiqueta.
Resulta sin embargo aconsejable acostumbrarse a escribirlas en minscula ya
que otras tecnologas que pueden convivir con nuestro HTML (XML por ejemplo)
no son tan permisivas y nunca viene mal coger buenas costumbres desde el
principio para evitar fallos triviales en un futuro.
Formato en HTML
En los temas anteriores hemos presentado a titulo de ejemplo algunas etiquetas
que permiten dar formato a nuestro texto. En esta parte veremos con ms
detalle y ejemplificaremos algunas de ellas posteriormente.
Formatear un texto pasa por tareas tan evidentes como definir los prrafos,
justificarlos, introducir vietas, numeraciones o bien poner en negrita, itlica...
Hemos visto que para definir los prrafos nos servimos de la etiqueta <p> que
introduce un salto y deja una lnea en blanco antes de continuar con el resto del
documento.
Podemos tambin usar la etiqueta <br>, de la cual no existe su cierre
correspondiente (</br>), para realizar un simple retorno de carro con lo que no
dejamos una lnea en blanco sino que solo cambiamos de lnea.
11
11
12
Negrita
=>
<b>.</b>
Cursiva
=>
<i>..</i>
Subrayado
=>
Encabezado
<u> </u>
=>
<h1>.</h1>
<h2></h2>
<h6>.</h6>
Subindice
=>
<sub>.</sub>
Supindice
=>
<sup>.</sup>
Sangria
=>
<blockquote>.</blockquote>
Fuente
</font>
=>
<font
Lista ordenada
=>
<ol>.</ol>
Lista no ordenada
=>
<ul>.</ul>
Tabla
=>
<table>.</table>
Fila
=>
<tr>.</tr>
Celda
=>
<th></th>
color=valor
size=valor
face=valor>..
<td></td>
Enlaces
Imgenes
=>
=>
<a href>.</a>
<img src=valor />
Salto de linea
=>
Formulario
<form></form>
=>
Controles
=>
<br />
<input><input />
<select></select>
<textarea>.</textarea>
SEGUNDO CICLO
sonido, videos
12
=>
<embed>.</embed>
Los prrafos delimitados por etiquetas <p> pueden ser fcilmente justificados a
la izquierda, centro o derecha especificando dicha justificacin en el interior de
la etiqueta por medio de un atributo align. Un atributo no es ms que un
parmetro incluido en el interior de la etiqueta que ayuda a definir el
funcionamiento de la etiqueta de una forma ms personal. Veremos a lo largo
de este manual cantidad de atributos muy tiles para todo tipo de etiquetas.
As, si desesemos introducir un texto alineado a la izquierda escribiramos:

<p align="left">Texto alineado a la izquierda</p>
Toda alineacin forma

parte de etiquetas de
prrafo.
El resultado seria:
Texto alineado a la izquierda
Para una justificacin al centro:
<p align="center">Texto alineado al centro</p>

que dara:
Texto alineado al centro
Para justificar a la derecha:

<p align="right">Texto alineado a la derecha</p>
cuyo efecto seria:
Texto alineado a la derecha
Como vez, en cada caso el atributo align toma determinados valores que son
escritos entre comillas. En algunas ocasiones necesitamos especificar algunos
atributos para el correcto funcionamiento de la etiqueta. En otros casos, el
propio navegador toma un valor definido por defecto. Para el caso de align, el
valor por defecto es left.
Nota: Los atributos tienen sus valores indicados entre comillas ("), pero
si no los indicamos entre comillas tambin funcionar en la mayora de
los casos. Sin embargo, es aconsejable que pongamos siempre las
comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a
nuestros cdigos y para evitar errores futuros en sistemas ms
quisquillosos.
El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy

comunes, que veremos ms adelante, entre las cuales se introducen texto o
imgenes, suelen hacer uso de este atributo de una forma habitual.
Imaginemos un texto relativamente largo donde todos los prrafos estn
alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro cdigo y
de evitar introducir continuamente el atributo align sobre cada una de nuestras
etiquetas es utilizando la etiqueta <div>.
13
13
14
Esta etiqueta por si sola no sirve para nada. Tiene que estar acompaada del
atributo align y lo que nos permite es alinear cualquier elemento (prrafo o
imagen) de la manera que nosotros deseemos.
As, el cdigo:
<p align="left">Parrafo1</p>
<p align="left"> Parrafo3</p>
<p align="left"> Parrafo2</p>
es equivalente a:
<div align="left">
<p>Parrafo1</p>
<p>Parrafo2</p>
<p>Parrafo3</p>
</div>
Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un
mismo tipo de alineado.
Existen otras etiquetas para definir prrafos especiales, formateados como
ttulos. Son los encabezados o Header en ingls. Como decimos, son etiquetas
que formatean el texto como un titular, para lo cual asignan un tamao mayor de
letra y colocan el texto en negrita.
Hay varios tipos de encabezados, que se diferencian en el tamao de la letra
que utilizan. La etiqueta en concreto es la <h1>, para los encabezados ms
grandes, <h2> para los de segundo nivel y as hasta <h6> que es el
encabezado ms pequeo.
Los encabezados implican tambin una separacin en prrafos, as que todo lo
que escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se
colocar en un prrafo independiente.
Podemos ver cmo se presentan algunos encabezados a continuacin.
<h1>Encabezado de nivel 1</h1>
<h2 align="center">Encabezado de nivel 2</h2>
Estandarizacin en el XHTML
SEGUNDO CICLO
Es un lenguaje de descripcin de pginas web normalizado segn las reglas de

XML.
14
Para crear pginas web utilizando las tecnologas estndar recomendadas por
la W3C (World Wide Web Consortium) es necesario saber estructurar bien el
documento antes de aplicar el formato con CSS para que todo funcione como
corresponde.
XHTML significa eXtensive HyperText Markup Language y es la versin
evolucionada del HTML. Es un lenguaje semntico, lo que quiere decir que no
definimos el aspecto de las cosas, sino lo que significan. Por ejemplo, si

tenemos el ttulo de nuestra pgina, en lugar de decir Lo quiero grande en
letras rojas, le indicamos al navegador que Este es el ttulo principal de la
pgina. Luego podemos controlar el aspecto con las hojas de estilo CSS, pero
no del XHTML.
XHTML es un lenguaje que se basa en etiquetas (tags). Una etiqueta sera algo
como esto:
<etiqueta>Algo aqu dentro</etiqueta>
La etiqueta que sirve para poner el ttulo principal en la pgina es <h1>.
<h1>What is the Matrix?</h1>
Entonces, <h1> marca el inicio de la etiqueta y </h1> se encarga de cerrarla.
Tambin hay etiquetas que funcionan con una sola parte, as:
<etiqueta />
Debes tener en cuenta el espacio en blanco que hay entre el nombre de la
etiqueta y la barra /. Es muy importante para que funcione con los navegadores
viejos.
Existen algunas etiquetas que se pueden modificar mediante atributos (ms
adelante veremos cmo funcionan):
<etiqueta atributo="valor">
Por ltimo debes recordar escribir las etiquetas siempre en minsculas y los
atributos siempre entre comillas.
La primera lnea que debemos tener en un documento XHTML es la que marca
la codificacin.
El formato en el que se guardan los caracteres en el archivo. La codificacin
estndar es la Unicode (utf-8) y soporta caracteres de todas las lenguas:
occidentales, griegos, chinos, rabes, japoneses, coreanos).
Asegrate de que el editor de textos que uses te guarda el archivo en formato
Unicode (normalmente es una opcin a elegir en el cuadro de dilogo de
Guardar como).
Hay que escribir esto:
<?xml version ="1.0" encoding="UTF-8" ?>
La lnea anterior tiene que aparecer al principio de todo el documento, antes
que ninguna otra. Si usas PHP, la etiqueta que marca el inicio del script puede
ser <? , as que los navegadores se hacen un lo. Podemos omitir esa lnea del
principio y declarar la codificacin dentro de la seccin head (ahora veremos
qu es eso). Si elegimos esto ltimo, la lnea a incluir dentro del head sera:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
15
15
16
Escoge la opcin que quieras, pero slo una. Por cierto, por motivos de espacio,
la lnea aparece cortada. No importa, porque el navegador interpreta los saltos
de lnea como si fueran espacios en blanco. En realidad podramos escribir todo
el archivo XHTML en una sola lnea. O cada palabra en una lnea diferente.
El elemento raz (HTML)

El resto de nuestro documento tiene que ir dentro de la etiqueta <html> . Pero
en esa etiqueta debemos indicar una serie de cosas, como que nuestro
documento es XHTML y qu lengua estamos usando. Si escribimos en
castellano, nos quedara as:
<html xmlns="http://www.w3.org/1999/xhtml\"xml:lang="es" lang="es">
Las letras es son el cdigo ISO que representan al idioma "espaol".
La cabecera (HEAD)
La cabecera contiene informacin que no forma parte del contenido de la pgina
en s, como el ttulo, vnculos a hojas de estilos CSS, informacin para robots
de bsqueda, scripts, etc. Por ahora nos quedaremos slo con el ttulo de la
pgina. La cabecera va encerrada entre <head> y </head>, mientras que para el
ttulo usamos la etiqueta <title> . El ttulo de la web aparece en la barra de ttulo
de la ventana del navegador, es el nombre por defecto que aparece si aadimos
a favoritos la pgina, etc.
Quedara as:
<head>
<title>Ttulo de la web</title>
</head>
El sangrado no es obligatorio, pero s que viene muy bien para aclararnos con el
cdigo.
El cuerpo (BODY)
SEGUNDO CICLO
Por ltimo, nos encontramos con el cuerpo, encerrado entre <body> y </body> ,
y que contiene toda la Informacin que de mostrar en el navegador. Quedara
as:
16
<body>
Aqu va el cuerpo de la web
</body>
recopilando todo, nos quedara algo como esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Ttulo de la web</title>
</head>
<body>
Aqu va el contenido
</body>
</html>
Generar hipervnculos
Hasta aqu, hemos podido ver que una pgina web es un archivo HTML en el
que podemos incluir, entre otras cosas, textos formateados a nuestro gusto e
imgenes (las veremos enseguida). Del mismo modo, un sitio web podr ser
considerado como el conjunto de archivos, principalmente pginas HTML e
imgenes, que constituyen el contenido al que el navegante tiene acceso.
Sin embargo, no podramos hablar de navegante o de navegacin si estos
archivos HTML no estuviesen debidamente conectados entre ellos y con el
exterior de nuestro sitio por medio de enlaces hipertexto. En efecto, el atractivo
original del HTLM radica en la posible puesta en relacin de los contenidos de
los archivos introduciendo referencias bajo forma de enlaces que permitan un
acceso rpido a la informacin deseada. De poco servira en la red tener
pginas aisladas a las que la gente no puede acceder y desde las que la gente
no puede saltar a otras.
Un enlace puede ser fcilmente detectado en una pgina. Basta con deslizar el
puntero del ratn sobre las imgenes o el texto y ver como cambia de su forma
original transformndose por regla general en una mano con un dedo sealador.
Adicionalmente, estos enlaces suelen ir, en el caso de los textos, coloreados y
subrayados para que el usuario no tenga dificultad en reconocerlos. Si no
especificamos lo contrario (ya tendremos ocasin de explicar como), estos
17
17
18
enlaces texto estarn subrayados y coloreados en azul. En el caso de las

imgenes que sirvan de enlace, veremos que estn delimitadas por un marco
azul por defecto.
Para colocar un enlace, nos serviremos de las etiquetas <a> y </a>. Dentro de
la etiqueta de apertura deberemos especificar asimismo el destino del enlace.
Este destino ser introducido bajo forma de atributo, el cual lleva por nombre
href.
La sintaxis general de un enlace es por tanto de la forma:
<a href="destino">contenido</a>
Siendo el contenido un texto o una imagen. Es la parte de la pgina que se
colocar activa y donde deberemos pulsar para acceder al enlace.
Por su parte, destino ser una pgina, un correo electrnico o un archivo.
En funcin del destino los enlaces son clsicamente agrupados del siguiente
modo:
Enlaces internos: los que se dirigen a otras partes dentro de la misma

pgina.
Enlaces locales: los que se dirigen a otras pginas del mismo sitio web.
Enlaces remotos: los dirigidos hacia pginas de otros sitios web.
Enlaces con direcciones de correo: para crear un mensaje de correo

dirigido a una direccin.
Enlaces con archivos: para que los usuarios puedan hacer download de
ficheros.
Enlaces internos
Son los enlaces que apuntan a un lugar diferente dentro de la misma pgina.
Este tipo de enlaces son esencialmente utilizados en pginas donde el acceso a
los contenidos puede verse dificultado debido al gran tamao de la misma.
Mediante estos enlaces podemos ofrecer al visitante la posibilidad de acceder
rpidamente al principio o final de la pgina o bien a diferentes prrafos o
secciones.
SEGUNDO CICLO
Para crear un enlace de este tipo es necesario, aparte del enlace de origen
propiamente dicho, un segundo enlace que ser colocado en el destino. Veamos
ms claramente como funcionan estos enlaces con un ejemplo sencillo:
18
Supongamos que queremos crear un enlace que apunte al final de la pgina. Lo

primero ser colocar nuestro enlace origen. Lo pondremos aqu mismo y lo
escribiremos del siguiente modo:
<a href="#abajo">Ir abajo</a>
Como podrs ver, el contenido del enlace es el texto "Ir abajo" y el destino,
abajo, es un punto de la misma pgina que todava no hemos definido. Ojo al
smbolo #; es l quien especifica al navegador que el enlace apunta a una
seccin en particular.
En segundo lugar, hay que generar un enlace en el destino. Este enlace llevara
por nombre abajo para poder distinguirlo de los otros posibles enlaces
realizados dentro de la misma pgina. En este caso, la etiqueta que
escribiremos ser sta:
<a name="abajo"></a>
A decir verdad, estos enlaces, aunque tiles, no son los ms extendidos de
cuantos hay. La tendencia general es la de crear pginas (archivos)
independientes con tamaos ms reducidos enlazados entre ellos por enlaces
locales (los veremos enseguida). De esta forma evitamos el exceso de tiempo
de carga de un archivo y la introduccin de exceso de informacin que pueda
desviar la atencin del usuario.
Una aplicacin corriente de estos enlaces consiste en poner un pequeo ndice
al principio de nuestro documento donde introducimos enlaces origen a las
diferentes secciones. Paralelamente, al final de cada seccin introducimos un
enlace que apunta al ndice de manera que podamos guiar al navegante en la
bsqueda de la informacin til para l.
Enlaces HTML con otras pginas del mismo sitio

Web
Como hemos dicho, un sitio web esta constituido de pginas interconexas. En
puntos anteriores hemos visto como enlazar distintas secciones dentro de una
misma pgina. Nos queda pues estudiar la manera de relacionar los distintos
documentos HTML que componen nuestro sitio web.
Para crear este tipo de enlaces, hemos de crear una etiqueta de la siguiente
forma:
<a href="archivo.html">contenido</a>
Por regla general, para una mejor organizacin, los sitios suelen estar
ordenados por directorios. Estos directorios suelen contener diferentes
secciones de la pgina, imgenes, sonidos...Es por ello que en muchos casos
no nos valdr con especificar el nombre del archivo, sino que tendremos que
especificar adems el directorio en el que nuestro archivo.html esta alojado.
Si haz trabajado con MS-DOS no tendrs ningn problema
para comprender el modo de funcionamiento. Tan solo hay
que tener cuidado en usar la barra "/" en lugar de la
contrabarra "\".
19
19
20
Para aquellos que no saben como mostrar un camino de un archivo, aqu van
una serie de indicaciones que les ayudara a comprender la forma de
expresarlos. No resulta difcil en absoluto y con un poco de prctica lo haras
prcticamente sin pensar.
Hay que situarse mentalmente en el directorio en el que se encuentra la pgina
con el enlace.
Si la pgina destino esta en un directorio incluido dentro del directorio en el que
nos encontramos, hemos de marcar el camino enumerando cada uno de los
directorios por los que pasamos hasta llegar al archivo y separndolos por el
smbolo barra "/". Al final obviamente, escribimos el archivo.
Si la pgina destino se encuentra en un directorio que incluye el de la pgina
con el enlace, hemos de escribir dos puntos y una barra "../" tantas veces como
niveles subamos en la arborescencia hasta dar con el directorio donde esta
emplazado el archivo destino.
Si la pgina se encuentra en otro directorio no incluido ni incluyente del archivo
origen, tendremos que subir como en la regla 3 por medio de ".." hasta
encontrar un directorio que englobe el directorio que contiene a la pgina
destino. A continuacin haremos como en la regla 2. Escribiremos todos los
directorios por los que pasamos hasta llegar al archivo.
Ejemplo:
Para clarificar este punto podemos hacer un ejemplo a

partir de la estructura de directorios de la imagen.
Para
hacer
un
enlace
desde
index.html
<a href="seccion1/pginas/yyy.html">contenido</a>
hacia
yyy.html:
Para
hacer
un
enlace
desde
xxx.html
hacia
<a href="../seccion1/pginas/yyy.html">contenido</a>
yyy.html:
Para
hacer
un
enlace
desde
yyy.html
<a href="../../seccion2/xxx.html">contenido</a>
xxx.html:
hacia
Los enlaces locales pueden a su vez apuntar ya no a la pgina en general sino

ms precisamente a una seccin concreta. Este tipo de enlaces resultan ser un
hbrido de interno y local. La sintaxis es de este tipo:
SEGUNDO CICLO
<a href="archivo.html#seccion">contenido</a>
20
Como para los enlaces internos, en este caso hemos de marcar la seccin con
otro enlace del tipo:
<a name="seccion"></a>
Enlaces remotos
Son los enlaces que se dirigen hacia pginas que se encuentran fuera de
nuestro sitio web, es decir, cualquier otro documento que no forma parte de
nuestro sitio.
Este tipo de enlaces es muy comn y no representa ninguna dificultad.
Simplemente colocamos en el atributo HREF de nuestra etiqueta <A>la URL o
direccin de la pgina con la que queremos enlazar. Ser algo parecido a esto.
<a href="http://www.guiarte.com">ir a guiarte.com</a>
Slo cabe destacar que todos las direcciones web (URLs) empiezan por http://.
Esto indica que el protocolo por el que se accede es HTTP, el utilizado en la
web. No debemos olvidarnos de colocarlas, porque si no los enlaces sern
tratados como enlaces locales a nuestro sitio.
Otra cosa interesante es que no tenemos que enlazar con una pgina web con
el protocolo HTTP necesariamente. Tambin podemos acceder a recursos a
travs de otros protocolos como el FTP. En tal caso, las direcciones de los
recursos no comenzarn por http:// sino por ftp://.
Enlaces a direcciones de correo

Los enlaces a direcciones de correo son aquellos que
nuevo mensaje de correo electrnico dirigido a
determinada. Estos enlaces son muy habituales en las
manera ms rpida de ofrecer al visitante una va
propietario de la pgina.
al pincharlos nos abre un

una direccin de mail
pginas web y resultan la
para el contacto con el
Para colocar un enlace dirigido hacia una direccin de correo colocamos mailto:
en el atributo href del enlace, seguido de la direccin de correo a la que se debe
dirigir el enlace.
<a href="mailto:eugim@idatcomputacion.edu.pe">alumno@idat.edu.pe
</a>
Consejo: Cuando coloques enlaces a direcciones de correo procura
indicar en el contenido del enlace (lo que hay entre <A> y </A>) la
direccin de correo a la que se debe escribir. Esto es porque si un
usuario no tiene configurado un programa de correo en su computador
no podr enviar mensajes, pero por lo menos podr copiar la direccin
de mail y escribir el correo a travs de otro computador o un sistema
web-mail.
Adems de la direccin de correo del destinatario, tambin podemos colocar en
el enlace el asunto del mensaje. Esto se consigue colocando despus de la
21
21
22
direccin de correo un interrogante, la palabra subject, un signo igual (=) y el

asunto en concreto.
<a href="mailto:alumno@idat.edu.pe?subject=contacto a travs de la
pgina">enviar al alumno</a>
Podemos colocar otros atributos del mensaje con una sintaxis parecida. En este
caso indicamos tambin que el correo debe ir con copia a
colabora@desarrolloweb.com.
Nota: El visitante de la pgina necesitar tener configurada una cuenta
de correo electrnico en su sistema para enviar los mensajes.
Lgicamente, si no tiene servicio de correo en el computador no se
podrn enviar los mensajes y este sistema de contacto con el visitante
no funcionar. Tenemos un artculo en desarrolloweb que habla sobre el
contacto con el navegante.
Enlaces con archivos

Este no es un tipo de enlace propiamente dicho, pero lo sealamos aqu porque
son un tipo de enlaces muy habitual y que presenta alguna complicacin para el
usuario novato.
El mecanismo es el mismo que hemos conocido en los enlaces locales y los
enlaces remotos, con la nica particularidad de que en vez de estar dirigidos
hacia una pgina web est dirigido hacia un archivo de otro tipo.
Si queremos enlazar con un archivo mi_fichero.zip que se encuentra en el
mismo directorio que la pgina se escribira un enlace as.
<a href="mi_fichero.zip">Descarga mi_fichero.zip</a>
Si hacemos clic en un enlace de este tipo nuestro navegador descargar el
fichero, haciendo la pregunta tpica de "Qu queremos hacer con el archivo.
Abrirlo o guardarlo en disco".
Podemos ver un ejemplo de enlace a archivo con su consiguiente ventana de
descarga de un archivo.
Consejo: No colocar en Internet archivos ejecutables directamente sino
archivos comprimidos. Por dos razones:
SEGUNDO CICLO
El archivo ocupar menos, con lo que ser ms rpida su transferencia.
22
Al preguntar al usuario lo que desea hacer con el fichero le ofrece la

opcin de abrirlo y guardarlo en disco. Nosotros generalmente
desearemos que el usuario lo guarde en disco y no lo ejecute hasta que
lo tenga en su disco duro. Si se decido a abrirlo en vez de guardarlo
simplemente lo pondr en marcha y cuando lo pare no se quedar

guardado en su sistema. Si los archivos estn comprimidos obligaremos
al usuario a descomprimirlos en su disco duro antes de ponerlos en
marcha, con lo que nos aseguramos que el usuario lo guarde en su
computador antes de ejecutarlo.
Si queremos enlazar hacia otro tipo de archivo como un PDF o un mundo VRML
(Realidad virtual para Internet) lo seguimos haciendo de la misma manera. El
navegador, si reconoce el tipo de archivo, es el responsable de abrirlo utilizando
el conector adecuado para ello. As, si por ejemplo enlazamos con un PDF
pondr el programa Acrobat Reader en funcionamiento para mostrar los
contenidos. Si enlazamos con un mundo VRML pondr en marcha el plug-in que
el usuario tenga instalado para ver los mundos virtuales (Cosmo Player por
ejemplo).
Este sera un ejemplo de enlace a un documento PDF.
<a href="mi_documento.pdf">Descarga el PDF</a>
Diseo de tablas
Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos
alojar distintos contenidos.
En un principio nos podra parecer que las tablas son raramente tiles y que
pueden ser utilizadas principalmente para listar datos como agendas, resultados
y otros datos de una forma organizada. Nada ms lejos de la realidad.
Hoy, gran parte de los diseadores de pginas basan su maquetacin en este
tipo de artilugios. En efecto, una tabla nos permite organizar y distribuir los
espacios de la manera ms optima. Nos puede ayudar a generar texto en
columnas como los peridicos, prefijar los tamaos ocupados por distintas
secciones de la pgina o poner de una manera sencilla un pie de foto a una
imagen.
Puede que en un principio nos resulte un poco complicado trabajar con estas
estructuras pero, si deseamos crear una pgina de calidad, tarde o temprano
tendremos que vrnoslas con ellas y nos daremos cuenta de las posibilidades
nos ofrecen.
Para empezar, nada ms sencillo que por el principio: las tablas son definidas
por las etiquetas <table> y </table>.
Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e
imgenes que darn forma y contenido a la tabla.
Las tablas son descritas por lneas de izquierda a derecha. Cada una de estas
lneas es definida por otra etiqueta y su cierre: <tr> y </tr>
23
23
24
Asimismo, dentro de cada lnea, habr diferentes celdas. Cada una de estas
celdas ser definida por otro par de etiquetas: <td> y </td>. Dentro de estas
etiquetas ser donde coloquemos nuestro contenido.
Aqu hay un ejemplo de estructura de tabla:
<table>
<tr>
<td>Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
</tr>
</table>
El resultado:
Celda 1, linea 1 Celda 2, linea 1

Celda 1, linea 2 Celda 2, linea 2
Nota: Hasta aqu hemos visto todas las etiquetas que necesitamos
conocer para crear tablas. Existen otras etiquetas, pero lo que podemos
conseguir con ellas se puede conseguir tambin usando las que hemos
visto.
SEGUNDO CICLO
Por poner un ejemplo, sealamos la etiqueta <th>, que sirve para crear
una celda cuyo contenido est formateado como un ttulo o cabecera de
la tabla. En la prctica, lo que hace es poner en negrita y centrado el
contenido de esa celda, lo que se puede conseguir aplicando las
correspondientes
etiquetas
dentro
de
la
celda.
As:
<td align="center"><b>contenido de la celda</b></td>.
24
A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud
cuando les incorporamos toda una batera de atributos aplicados sobre cada
tipo de etiquetas que las componen. A lo largo de los siguientes captulos nos
adentraremos en el estudio de estos atributos de manera a proporcionaros los
tiles indispensables para una buena puesta en pgina.
Las celdas son delimitadas por las etiquetas <td> o por las etiquetas <th> (si
queremos texto en negrita y centrado) y constituyen un entorno independiente
del resto del documento. Esto quiere decir que:
Podemos usar prcticamente cualquier tipo de etiqueta dentro de la etiqueta
<td> para, de esta forma, dar forma a su contenido.
Las etiquetas situadas en el interior de la celda no modifican el resto del
documento.
Las etiquetas de fuera de la celda no son tenidas en cuenta por sta.
As pues, podemos especificar el formato de nuestras celdas a partir de
etiquetas introducidas en su interior o mediante atributos colocados dentro de la
etiqueta de celda <td> o bien, en algunos casos, dentro de la etiqueta <tr>, si
deseamos que el atributo sea valido para toda la lnea. La forma ms til y
actual de dar forma a las celdas es a partir de las hojas de estilo en cascada
que
ya
tendris
la
oportunidad
de
abordar
ms
adelante.
Veamos a continuacin algunos atributos tiles para la construccin de nuestras
tablas. Empecemos viendo atributos que nos permiten modificar una celda en
concreto o toda una lnea:
align
Justifica el texto de la celda del mismo modo que si

fuese el de un prrafo.
valign
Podemos elegir si queremos que el texto aparezca

arriba (top), en el centro (middle) o abajo (bottom)
de la celda.
bgcolor
Da color a la celda o lnea elegida.
bordercolor Define el color del borde.
Otros atributos que pueden ser nicamente asignados a una celda y no al

conjunto de celdas de una lnea son:
background
Nos permite colocar un fondo para la celda a partir

de un enlace a una imagen.
height
Define la altura de la celda en pixels o porcentaje.
width
Define la anchura de la celda en pixels o porcentaje.
colspan
Expande una celda horizontalmente.
rowspan
Expande una celda verticalmente.
25
25
26
Nota: El atributo height no funciona en todos los navegadores, adems,

su uso no est muy extendido. Las celdas por lo general tienen el alto
que necesitan para que quepa todo el contenido que se le haya
insertado, es decir, crecen lo suficiente para que quepa lo que hemos
colocado dentro.
El atributo width si que funciona en todos los navegadores y lo tendris
que utilizar constantemente. Si le asignamos un ancho a la celda, el
ancho ser respetado y si dicha celda tiene mucho texto o cualquier
otro contenido, la celda crecer hacia abajo todo lo necesario para que
quepa lo que hemos colocado.
Un matiz al ltimo prrafo. Se trata de que si definimos una celda de un
ancho 100 por ejemplo, y colocamos en la celda un contenido como una
imagen que mida ms de 100 pxeles, la celda crecer en horizontal
todo lo necesario para que la imagen quepa. Si el elemento, aunque
ms ancho, fuera divisible (como un texto) el ancho sera respetado y el
texto crecera hacia abajo o lo que es lo mismo, en altura, como
sealbamos en el anterior prrafo.
Estos ltimos cuatro atributos descritos son de gran utilidad. Concretamente,

height y width nos ayudan a definir las dimensiones de nuestras celdas de una
forma absoluta (en pixels o puntos de pantalla) o de una forma relativa, es decir
por porcentajes referidos al tamao total de la tabla. Podrs leer un articulo
interesante a propsito de estas dos modalidades de diseo en nuestro manual
de usabilidad.
A ttulo de ejemplo:
<td width="80">
Dar una anchura de 80 pixels a la celda. Sin embargo,
SEGUNDO CICLO
<td width="80%">
Dar una anchura a la celda del 80% de la anchura de la tabla.
26
Hay que tener en cuenta que, definidas las dimensiones de las celdas, el
navegador va a hacer lo que buenamente pueda para satisfacer al programador.
Esto quiere decir que puede que en algunas ocasiones el resultado que
obtengamos no sea el esperado. Concretamente, si el texto presenta una
palabra excesivamente larga, puede que la anchura de la celda se vea
aumentada para mantener la palabra en la misma lnea. Por otra parte, si el
texto resulta muy largo, la celda aumentara su altura para poder mostrar todo su
contenido.
Anlogamente, si por ejemplo definimos dos anchuras distintas a celdas de una
misma columna, el navegador no sabr a cual hacer caso. Es por ello que
resulta conveniente tener bien claro desde un principio como es la tabla que
queremos disear. No esta de ms si la prediseamos en papel si la

complejidad es importante. El HTML resulta en general fcil pero las tablas
pueden convertirse en un verdadero quebradero de cabeza si no llegamos a
comprenderlas debidamente.
Los atributos rowspan y colspan son tambin utilizados frecuentemente. Gracias
a ellos es posible expandir celdas fusionando stas con sus vecinas. El valor
que pueden tomar estas etiquetas es numrico. El nmero representa la
cantidad de celdas fusionadas.
As,
<td colspan="2">
Fusionara la celda en cuestin con su vecina derecha.
Esta celda tiene un colspan="2"
Celda normal
Otra celda
Del mismo modo,

<td rowspan="2">
Esta celda tiene rowspan="2", por eso

tiene fusionada la celda de abajo.
Celda Normal
Otra celda normal
Expandir la celda hacia abajo fusionndose con la celda inferior.

El resto de los atributos presentados, se presentan una utilidad y uso bastante
obvios. Los dejamos a su propia investigacin
Adems de los atributos especficos de cada celda o lnea, las tablas pueden
ser adicionalmente formateadas a partir de los atributos que nos ofrece la propia
etiqueta <table>. He aqu aquellos que pueden parecernos en un principio
importantes:
align
Alinea horizontalmente la tabla con respecto a su

entorno.
background
Nos permite colocar un fondo para la tabla a partir

de un enlace a una imagen.
bgcolor
Da color de fondo a la tabla.
border
Define el nmero de pixels del borde principal.
27
27
28
bordercolor
Define el color del borde.
cellpadding
Define, en pixels, el espacio entre los bordes de la

celda y el contenido de la misma.
cellspacing
Define el espacio entre los bordes (en pixels).
height
Define la altura de la tabla en pixels o porcentaje.
width
Define la anchura
porcentaje.
de la tabla en pixels o
Los atributos que definen las dimensiones, height y width,

funcionan de una manera anloga a la de las celdas tal y
como hemos visto en el capitulo anterior. Contrariamente,
el atributo align no nos permite justificar el texto de cada
una de las celdas que componen la tabla, sino ms bien,
justificar la propia tabla con respecto a su entorno.
Vamos a poner tres ejemplos de alineado de tablas, centradas, alineadas a la

derecha y a la izquierda.
Ejemplo de tabla centrada
Esta tabla est centrada

(aling="center"). Solo tiene
una celda.
SEGUNDO CICLO
Este sera un texto cualquiera colocado al

lado de una tabla centrada
28
Ejemplo de tabla alineada a

la derecha
Para
que Esta tabla est alineada a la
se vea el derecha (aling="right"). Solo
efecto
de tiene una celda.
alineado a
la tabla debemos colocar un texto al lado y
el texto rodear la tabla, igual que ocurra
con las imgenes alineadas a un lado.
Ejemplo de tabla alineada a

la izquierda
Esta tabla est alineada a la Para

que
izquierda (aling="left"). Solo se vea el
tiene una celda.
efecto
de
alineado a
la tabla debemos colocar un texto al lado y
el texto rodear la tabla, igual que ocurra
con las imgenes alineadas a un lado.
Los atributos cellpading y cellspacing nos ayudaran a dar a nuestra tabla un

aspecto ms esttico. En un principio puede parecernos un poco confuso su uso
pero un poco de practica ser suficiente para hacerse con ellos.
En la siguiente imagen podemos ver grficamente el significado de estos
atributos.
Puedes comprobar que los atributos definidos para una celda tienen prioridad
con respecto a los definidos para una tabla. Podemos definir, por ejemplo, una
tabla con color de fondo rojo y una de las celdas de color de fondo verde y se
ver toda la tabla de color rojo menos la celda verde. Del mismo modo,
podemos definir un color azul para los bordes de la tabla y hacer que una celda
particular sea mostrada con un borde rojo. (Aunque esto no funcionar en todos
los navegadores debido a que algunos no reconocen el atributo bordercolor.
Tabla de
color rojo de
fondo
El atributo bgcolor de la
tabla est en rojo.
Celda normal
Esta celda est en verde.

tiene el atributo bgcolor
en color verde
Tablas anidadas
Muy til tambin es el uso de tablas anidadas. De la misma forma que podamos
incluir listas dentro de otras listas, las tablas pueden ser incluidas dentro de
otras. As, podemos incluir una tabla dentro de la celda de otra. El modo de
funcionamiento sigue siendo el mismo aunque la situacin puede complicarse si
el nmero de tablas embebidas dentro de otras es elevado.
Consejo: Pginas realizan anidaciones de tablas constantemente para
meter unos elementos de la pgina dentro de otros. Se pueden anidar
tablas sin lmite, sin embargo, en el caso de Netscape 4 hay que tener
29
29
30
cuidado con el nmero de tablas que anidamos, porque a medida que

metemos una tabla dentro de otra y otra dentro de esta y otra ms,
aumentando el grado de anidacin sucesivamente... podemos encontrar
problemas en su visualizacin y puede que la pgina tarde un poco de
tiempo ms en mostrarse en pantalla.
Vamos a ver un cdigo de anidacin de tablas. Veamos primero el resultado y

luego el cdigo, as conseguiremos entenderlo mejor.
Tabla anidada, celda 1 Tabla anidada, celda 2

Celda de la tabla principal
Tabla anidada, celda 3 Tabla anidada, celda 4
Este sera el cdigo:

Hasta aqu la informacin que pretendamos transmitiros sobre las tablas en
HTML. Sera importante ahora realizar algn ejemplo de realizacin de una
tabla un poco compleja. Por ejemplo la siguiente:
Animales en peligro de extincin

Nombre
Cabezas
Previsin
2010
Previsin
2020
Ballena
6000
4000
1500
Oso Pardo
50
SEGUNDO CICLO
30
Lince
10
Tigre
300
210
Solucin ejercicio:
Ejemplo:
Climas de Amrica del Sur

Parte de arriba Venezuela
de Amrica del
Sur.
Pases Colombia
como:
Parte de abajo Argentina

de Amrica del
Sur.
Pases Chile
como:
Ecuador
Uruguay
Per
Paraguay
Climas
martimos
con
Bosque tropical, clima de veranos
secos,
con
sabana, clima martimo con inviernos
secos,
climas
inviernos secos.
frios, clima de estepa, clima
desrtico.
31
31
32
Solucin:
Maquetar con tablas

En HTML tradicional se utilizan las tablas, aparte de mostrar informacin
tabulada como hemos visto en este artculo, para maquetar pginas web. Con
las tablas podemos generar una serie de espacios donde podemos mostrar
contenidos estructurados en columnas y filas, como la maquetacin de una
revista o un portal. La maquetacin por tablas la comentamos en un taller de
HTML. Es muy recomendable su lectura para hacerse una idea del proceso de
creacin de pginas medianamente avanzadas y con informacin bien
estructurada.
SEGUNDO CICLO
Elementos de formulario
32
El HTML nos propone una gran diversidad de alternativas a la hora de crear

nuestros formularios. Estas van desde la clsica caja de texto hasta la lista de
opciones pasando por las cajas de validacin.
Veamos en qu consiste cada una de estas modalidades y como podemos
implementarlas en nuestro formulario.
Texto corto
Las cajas de texto son colocadas por medio de la etiqueta <input>. Dentro de
esta etiqueta hemos de especificar el valor de dos atributos: type y name.
La etiqueta es de la siguiente forma:
<input type="text" name="nombre">
De este modo expresamos nuestro deseo de crear una caja de texto cuyo
contenido ser llamado nombre (por ejemplo). El aspecto de este tipo de cajas
es de sobra conocido, aqu lo podrs ver:
MIRELLA
El nombre del elemento del formulario es de gran importancia para poder

identificarlo en nuestro programa de procesamiento o en el mail recibido. Por
otra parte, es importante indicar el atributo type, ya que, como veremos, existen
otras modalidades de formulario que usan esta misma etiqueta.
El empleo de estas cajas esta fundamentalmente destinado a la toma de datos
breves: palabras o conjuntos de palabras de longitud relativamente corta.
Veremos ms adelante que existe otra forma de tomar textos ms largos a partir
de otra etiqueta.
Adems de estos dos atributos, esenciales para el correcto funcionamiento de
nuestra etiqueta, existen otra serie de atributos que pueden resultarnos de
utilidad pero que no son imprescindibles:
size
Define el tamao de la caja en nmero de caracteres. Si al escribir el usuario
llega al final de la caja, el texto ira desfilando a medida que se escribe haciendo
desaparecer la parte de texto que queda a la izquierda.
maxlength
Indica el tamao mximo del texto que puede ser tomado por el formulario. Es
importante no confundirlo con el atributo size. Mientras el primero define el
tamao aparente de la caja de texto, maxlength indica el tamao mximo real
del texto que se puede escribir. Podemos tener una caja de texto con un tamao
aparente (size) que es menor que el tamao mximo (maxlength). Lo que
ocurrir en este caso es que, al escribir, el texto ira desfilando dentro de la caja
hasta que lleguemos a su tamao mximo definido por maxlength, momento en
el cual nos ser imposible continuar escribiendo.
value
En algunos casos puede resultarnos interesante asignar un valor definido al
campo en cuestin. Esto puede ayudar al usuario a rellenar ms rpidamente el
formulario o darle alguna idea sobre la naturaleza de datos que se requieren.
Este valor inicial del campo puede ser expresado mediante el atributo value.
Veamos su efecto con un ejemplo sencillo:
33
33
34
<input type="text" name="nombre" value="Perico Palotes">

Genera un campo de este tipo:
CLAUDIA
Nota:
estamos
obligados
utilizar
la
etiqueta
<form>
Aunque de lo que se lee en estos captulos sobre formularios se puede

entender bien esto, hemos querido remarcarlo para que quede muy
claro: Cuando queremos utilizar en cualquer situacin elementos de
formulario debemos escribirlos siempre entre las etiquetas <form> y
</form>. De lo contrario, los elementos se vern perfectamente en
Explorer pero no en Netscape.
Dicho de otra forma, en Netscape no se visualizan los elementos de
formulario a no ser que esten colocados entre las correspondientes
etiquetas de inicio y fin de formulario.
Es por ello que para mostrar un campo de texto no vale con poner la
etiqueta <input>, sino que habr que ponerla dentro de un formulario.
As:
<form>
<input
</form>
type="text"
name="nombre"
value="Perico
Palotes">
Veremos posteriormente que este atributo puede resultar relevante en

determinadas situaciones.
Texto oculto
Podemos esconder el texto escrito por medio asteriscos de manera a aportar
una cierta confidencialidad. Este tipo de campos son anlogos a los de texto
con una sola diferencia: remplazamos el atributo type="text" por
type="password":
<input type="password" name="nombre">
SEGUNDO CICLO
En este caso, podrs comprobar que al escribir dentro del campo en lugar de
texto veras asteriscos.
34
Estos campos son ideales para la introduccin de datos confidenciales,

principalmente cdigos de acceso. Se ve en funcionamiento a continuacin.
********
35
Texto largo
Si deseamos poner a la disposicin de usuario un campo de texto donde pueda
escribir cmodamente sobre un espacio compuesto de varias lneas, hemos de
invocar una nueva etiqueta: <textarea> y su cierre correspondiente.
Este tipo de campos son prcticos cuando el contenido a enviar no es un
nombre telfono o cualquier otro dato breve, sino ms bien, un comentario,
opinin, etc.
Dentro de la etiqueta textarea deberemos indicar, como para el caso visto
anteriormente, el atributo name para asociar el contenido a un nombre que ser
asemejado a una variable en los programs de proceso. Adems, podemos
definir las dimensiones del campo a partir de los atributos siguientes:
rows
Define el nmero de lneas del campo de texto.
cols
Define el nmero de columnas del campo de texto.
La etiqueta queda por tanto de esta forma:
<textarea name="comentario" rows="10" cols="40"></textarea>
El resultado es el siguiente:
Asimismo, es posible predefinir el contenido del campo. Para ello, no usaremos

el atributo value sino que escribiremos dentro de la etiqueta el contenido que
deseamos atribuirle. Vemoslo:
<textarea
name="comentario"
comentario....</textarea>
rows="10"
cols="40">Escribe
tu
Estilos y maquetacin Css

El modo de funcionamiento de las CSS consiste en definir, mediante una
sintaxis especial, la forma de presentacin que le aplicaremos a:
Un web entero, de modo que se puede definir la forma de todo el web de una
sola vez.
35
36
Un documento HTML o pgina, se puede definir la forma, en un pequeo

trozo de cdigo en la cabecera, a toda la pgina.
Una porcin del documento, aplicando estilos visibles en un trozo de la
pgina.
Una etiqueta en concreto, llegando incluso a poder definir varios estilos
diferentes para una sola etiqueta. Esto es muy importante ya que ofrece
potencia en nuestra programacin. Podemos definir, por ejemplo, varios tipos
de prrafos: en rojo, en azul, con margenes, sin ellos...
La potencia de la tecnologa salta a la vista. Pero no solo se queda aqu, ya que
adems esta sintaxis CSS permite aplicar al documento formato de modo mucho
ms exacto. Si antes el HTML se nos quedaba corto para maquetar las pginas
y tenamos que utilizar trucos para conseguir nuestros efectos, ahora tenemos
muchas ms herramientas que nos permiten definir esta forma:
Podemos definir la distancia entre lneas del documento.
Se puede aplicar identado a las primeras lneas del prrafo.
Podemos colocar elementos en la pgina con mayor precisin, y sin lugar a
errores.
Y mucho ms, como definir la visibilidad de los elementos, margenes,
subrayados, tachados...
Y seguimos mostrando ventajas, ya que si con el HTML tan slo podamos
definir atributos en las pginas con pxeles y porcentajes, ahora podemos definir
utilizando muchas ms unidades como:
Pixels (px) y porcentaje (%), como antes.
Pulgadas (in)
Puntos (pt)
Centmetros (cm)
Navegadores que lo soportan
SEGUNDO CICLO
Esta tecnologa es relativamente nueva, por lo que no todos los navegadores la

soportan. En concreto, slo los navegadores de Netscape versiones de la 4 en
adelante y de Microsoft a partir de la versin 3 son capaces de comprender los
estilos en sintaxis CSS. Adems cabe destacar que no todos los navegadores
implementan las mismas funciones de hojas de estilos, por ejemplo, Microsoft
Internet Explorer 3 no soporta todo lo relativo a capas.
36
Esto quiere decir que debemos de usar esta tecnologa con cuidado,
ya que muchos usuarios no podrn ver los formatos que apliquemos a
las pginas con CSS. As pues, utilizad las hojas de estilos cuando
estas no vayan a suponer un problema.
Pequeas partes de la pgina

Para definir estilos en secciones reducidas de una pgina se utiliza la etiqueta
<DIV>. Con su atributo style indicamos en sintaxis CSS las caractersticas de
estilos. Lo vemos con un ejemplo, pondremos un prrafo en el que
determinadas palabras las vamos a visualizar en color verde.
<p>
Esto es un prrafo en varias palabras <DIV style="color:green">en
color verde</>. resulta muy fcil.
</p>
Que tiene como resultado:
Esto es un prrafo con varias palabras en color verde. resulta muy fcil.
Estilo definido para una etiqueta.
De este modo podemos hacer que toda una etiqueta muestre un estilo
determinado. Por ejemplo, podemos definir un prrafo entero en color rojo y otro
en color azul. Para ello utilizamos el atributo style, que es admitido por todas las
etiquetas del HTML (siempre y cuando dispongamos de un navegador
compatible con CSS).
<pstyle="color:#990000">
Esto es un prrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un prrafo de color azul.
</p>

Esto es un prrafo de color rojo.
Esto es un prrafo de color azul.
Estilo definido en una parte de la pgina

Con la etiqueta <DIV> podemos definir secciones de una pgina y aplicarle
estilos con el atributo style, es decir, podemos definir estilos de una vez a todo
un bloque de la pgina.
37
37
38
<div style="color:#000099; font-weight:bold">

<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>
Estas etiquetas van en azul y negrita.
Seguimos dentro del DIV, luego permanecen los etilos.
Estilo definido para toda una pgina

Podemos definir, en la cabecera del documento, estilos para que sean aplicados
a toda la pgina. Es una manera muy cmoda de darle forma al documento y
muy potente, ya que estos estilos sern seguidos en toda la pgina y nos
ahorraremos as muchas etiquetas HTML que apliquen forma al documento.
Adems, si deseamos cambiar los estilos de la pgina lo haremos de una sola
vez.
Este ejemplo es ms complicado, puesto que se utiliza la sintaxis CSS de
manera ms avanzada. Pero no te preocupes puesto que con los ejemplos irs
aprendiendo su uso y ms tarde comentaremos la sintaxis en profundidad.
En el ejemplo vemos que se utiliza la etiqueta <STYLE> colocada en la
cabecera de la pgina para definir los distintos estilos del documento.
A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el nombre de la
etiqueta que queremos definir los estilos y entre llaves -{}- colocamos en
sintaxis CSS las caractersticas de estilos.
SEGUNDO CICLO
<html>
<head>
<title>Ejemplo de estilos para toda una página</title>
<STYLE type="text/css">
<!-H1 {text-decoration: underline; text-align:center}
P {font-Family:arial,verdana; color: white; background-color: black}
BODY {color:black;background-color: #cccccc; text-indent:1cm}
// -->
</STYLE>
</head>
38
<body>
<h1>Página con estilos</h1>
Bienvenidos...
<p>Siento que el ejemplo sea tan corto, pero esto es un ejemplo sin más
importancia.</p>
<p> te das cuenta que todos los prrafos estan afectados.</p></body>

</html>
Como se puede apreciar en el cdigo, hemos definido que la etiqueta <H1> se
presentar.
Subrayado
Centrada
Tambin, por ejemplo, hemos definido que el cuerpo entero de la pgina
(etiqueta <BODY>) se le apliquen los estilos siguientes:
Color del texto negro.
Color del fondo grisaceo.
Margen lateral de 1 centmetro.
Caber destacar que si aplicamos estilos a la etiqueta <BODY>, estos sern
heredados por el resto de las etiquetas del documento. Esto es as siempre y
cuando no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo
caso el estilo de la etiqueta ms concreta ser el que mande. Puede verse este
detalle en la etiqueta <P>, que tiene definidos estilos que ya fueron definidos
para <BODY>. Los estilos que se tienen en cuenta son los de la etiqueta <P>,
que es ms concreta.
Por ltimo, ha de apreciarse los comentarios HTML que engloban toda la
declaracin de estilos: . Estos comentarios se
utilizan para que los navegadores antiguos, que no comprenden la sintaxis CSS,
no incluyan ese texto en el cuerpo de la pgina. Si no se pusiera, los
navegadores antiguos (por ejemplo Netscape 3) escribiran ese "feo cdigo" en
la pgina.
Hemos preparado la misma pgina, pero con declaraciones de estilos distintas,
para que comprobis las diferencias en la forma del documento con slo unos
cambios en sus estilos. Puedes verla pinchando aqu.
Estilo definido para todo un sitio web

Una de las caractersticas ms potentes de la programacin con hojas de estilos
consiste en que, de una vez, podemos definir los estilos de todo un sitio web.
Esto se consigue creando un archivo donde tan slo colocamos las
declaraciones de estilos de la pgina y enlazando todas las pginas del sitio con
ese archivo. De este modo, todas las pginas comparten una misma declaracin
de estilos y, por tanto, si la cambiamos, cambiarn todas las pginas. Con las
ventajas aadidas de que se ahorra en lneas de cdigo HTML (lo que reduce el
39
39
40
peso del documento) y se evita la molestia de definir una y otra vez los estilos
con el HTML, tal como se coment anteriormente.
Veamos ahora cmo el proceso para incluir estilos con un fichero externo.
1. Creamos el archivo con la declaracin de estilos
Es un archivo de texto normal, que puede tener cualquier extensin, aunque le
podemos asignar la extensin .css para aclararnos qu tipo de archivo es. El
texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es
decir, sera erroneo incluir cdigo HTML en el: etiquetas y dems. Podemos ver
un ejemplo a continuacin.
P
{
font-size
:
12pt;
font-family : arial,helvetica;
font-weight
:
normal;
}
H1
{
font-size
:
36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align
:
center;
background-color : Teal;
}
TD
{
font-size
:
10pt;
font-family : verdana,arial;
text-align
:
center;
background-color : 666666;
}
BODY
{
background-color : #006600;
font-family
:
arial;
color
:
White;
}
SEGUNDO CICLO
2. Enlazamos la pgina web con la hoja de estilos
40
Para ello, vamos a colocar la etiqueta <LINK> con los atributos.

rel="STYLESHEET" indicando que el enlace es con una hoja de estilos.
type="text/css" porque ela archivo es de texto, en sintaxis CSS.
href="estilos.css" indica el nombre del fichero fuente de los estilos.
Veamos una pgina web entera que enlaza con la declaracin de estilos
anterior:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link
rel="STYLESHEET"
type="text/css"
<title>Página que lee estilos</title>
href="estilos.css">
</head>
<body>
<h1>Página que lee estilos</h1>
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con
la hoja de estilos. Es muy fácil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Esto está dentro de un TD, luego tiene estilo propio, declarado en
el fichero externo</td>
</tr>
<tr>
<td>La segunda fila del TD</td>
</tr>
</table>
</body>
</html>
Reglas de importancia en los estilos

Los estilos se heredan de una etiqueta a otra, como se indic anteriormente.
Por ejemplo, si tenemos declarado en el <BODY> unos estilos, por lo general,
estas declaraciones tambin afectatarn a etiquetas que estn dentro de esta
etiqueta, o lo que es lo mismo, dentro de todo el cuerpo.
En muchas ocasiones ms de una declaracin de estilos afecta a la misma
porcin de la pgina. Siempre se tiene en cuenta la declaracin ms particular.
Pero las declaraciones de estilos se pueden realizar de mltiples modos y con
varias etiquetas, tambin entre estos modos hay una jerarqua de importancia
para resolver conflictos entre varias declaraciones de estilos distintas para una
misma porcin de pgina. Se puede ver a continuacin esta jerarqua, primero
41
41
42
ponemos las formas de declaracin ms generales, y por tanto menos

respetadas en caso de conflicto:
Declaracin de estilos con fichero externo. (Para todo un sitio web)
Declaracin de estilos para toda la pgina. (Con la etiqueta <STYLE> en la
cabecera de la pgina)
Estilos definidos en una parte de la pgina. (Con la etiqueta <DIV>)
Definidos en una etiqueta en concreto. (Utilizando el atributo style en la
etiqueta en cuestin)
Declaracin de estilo para una porcin pequea del documento. (Con la
etiqueta <SPAN>)
Ya vimos cmo incluir estilos en la pgina, de todas las maneras posibles e
hicimos un repaso con la lista anterior. Ahora ests en condiciones de empezar
a usar las hojas de estilo en cascada para mejorar tus pginas y aumentar la
productividad de tu trabajo.
Ejercicio aplicado
<HTML>
<HEAD>
<TITLE> Ejemplo con hoja de estilo externa </TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo.css">
</HEAD>
<BODY BGCOLOR=white>
<H2>Prueba de definicin de estilos en una hoja deestilo externa</H2>
Como puede verse, la apariencia de esta pgina quedacompletamente definida
por los estilos que hemosespecificado en el bloque STYLE en la cabecera del
documento. Los mrgenes son ms amplios de lo habitual,la <B>negrita</B>
tiene un tamao y un color fijos, los Trozos de texto en teletipo como <TT>este
fragmento</TT>tambin tienen definida su fuente, tamao y color,
y vamos a ver cmo quedan las tablas, para finalizarel ejemplo: <P>
<CENTER>
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=2>
SEGUNDO CICLO
<TR><TH>Cabecera 1</TH><TH>Cabecera 2</TH></TR>
42
<TR><TD>Celda (1,1)</TD><TD>Celda (1,2)</TD></TR>

</TABLE>
</CENTER>
</BODY>
</HTML>
ARCHIVO DE ESTILOS: ejemplo.css
/* Definicin de estilos en un archivo aparte */
/* Estilo para el documento */
BODY {font-family:Verdana,sans-serif;font-size:x-small;
margin-left:0.25in; margin-right:0.25in}
/* Estilo para la cabecera de nivel 2 */

H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red}
/* Estilos para otras etiquetas */

B, TD {font-family:Verdana,sans-serif;font-size:x-small;
color:olive}
TH {font-family:Verdana,sans-serif;font-size:x-small;
color:white;background-color:#0080C0}
PRE, TT, CODE {font-family:Courier New,Courier;
font-size:9pt;color:maroon}
Clase en maquetacin y estilos

Es normal querer definir unos estilos globales en hojas externas que
homogeneicen el aspecto de nuestras pginas, y luego, en una pgina concreta
querer variar el estilo en alguna etiqueta concreta. Como ya sabemos, esto
podemos hacerlo definiendo el estilo localmente en esa etiqueta.
Pero tambin puede suceder que esta definicin de un estilo concreto queramos
aplicarla a otra etiqueta. Lo primero que se nos ocurre es copiar esta definicin
del estilo a la otra etiqueta en la que tambin queremos aplicarlo. Sin embargo,
este estilo concreto que queremos aplicar a algunas etiquetas concretas puede
ser definido en un bloque de estilo global o, incluso, en la hoja externa, y
aplicarlo, gracias a un identificador, a las etiquetas concretas en las que
queramos que se aplique dicho estilo. Con este fin se definen las clases.
Una clase es una definicin de un estilo que en principio no est asociado a
alguna etiqueta HTML, pero que podemos asociar, en el documento, a etiquetas
concretas.
43
43
44
Para ello, en primer lugar definimos la clase (en el bloque de estilos o en la hoja
externa) como un estilo ms, de esta forma:
.Nombre_de_la_Clase {propiedad1:valor;...;propiedadN:valor}
Es decir, escribiendo un punto seguido del nombre que le queramos dar a la
clase, y definiendo el estilo como lo definimos para cualquier otra etiqueta:
pares propiedad:valor separados por punto y coma y encerrados entre llaves.
Adems, podremos definir cuantas clases necesitemos.
Ahora, para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos
el parmetro CLASS como sigue:
<etiqueta CLASS="Nombre_de_la_Clase"> ... </etiqueta>
donde Nombre_de_la_Clase es el nombre que le hemos dado a la clase, sin el
punto.
EJERCICIO APLICADO
<HTML>
<HEAD>
<TITLE> Ejemplo de uso de clases </TITLE>
<STYLE TYPE="text/css">
<!-BODY {font-family:Verdana,sans-serif;font-size:x-small}
P,A,B {color:red}
.BAzul {color:blue}
//-->
</STYLE>
</HEAD>
<BODY BGCOLOR=white>
En este ejemplo vamos a ver cmo se aplican las clases. Por ejemplo, <B>esta
negrita</B> utiliza el estilo definido en el bloque, pero <B CLASS="BAzul">esta
otra negrita</B>tiene un color distinto. Y no slo podemos usar la clase para la
negrita. Por ejemplo, <SPAN CLASS="BAzul">este trozode lnea tambin utiliza
la clase para su estilo particular</SPAN>.
SEGUNDO CICLO
</BODY>
44
</HTML>
Pseudoclases
Hay ocasiones en las que HTML da a algunas etiquetas un estilo propio: por
ejemplo, los enlaces aparecen por defecto de otro color y subrayados. Estos
elementos son las pseudoclases. Por ahora, slo estn definidas para la
etiqueta <A>.
La forma de definir un estilo para una pseudoclase es la siguiente:
etiqueta:pseudoclase {propiedad1:valor;...;propiedadN:valor}
y las pseudoclases de que disponemos son:
link Nos dice el estilo de un enlace que no ha sido visitado.
visited Nos dice el estilo de un enlace que ha sido visitado.
active Nos dice el estilo de un enlace que est siendo pulsado.
hover Nos dice el estilo de un enlace sobre el que est pasando el ratn.
Propiedades de las capas

Atributo position
Indica el tipo de posicionamiento de la capa. Puede tener dos valores, relative o
absolute.
- Relative indica que la posicin de la capa es relativa a el lugar donde se
estaba escribiendo en la pgina en el momento de escribir la capa con su
etiqueta
- Absolute indica que la posicin de la capa se calcula con respecto al punto
superior izquierdo de la pgina.
Atributo top
Indica la distancia en vertical donde se colocar la capa. Si el atributo position
es absolute, top indica la distancia del borde superior de la capa con respecto al
borde superior de la pgina. Si el atributo position era relative, top indica la
distancia desde donde se estaba escribiendo en ese momento en la pgina
hasta el borde superior de la capa.
Atributo left
Bsicamente funciona igual que el atributo top, con la diferencia que el atributo
left indica la distancia en horizontal a la que estar situada la capa.
Atributo height
Sirve para indicar el tamao de la capa en vertical, es decir, su altura.
45
45
46
Atributo width
Indica la anchura de la capa
Atributo visibility
Sirve para indicar si la capa se puede ver en la pgina o permanece oculta al
usuario. Este atributo puede tener tres valores.
visible sirve para indicar que la capa se podr ver.
hidden indicar que la capa est oculta.
inherit es el valor por defecto, que quiere decir que hereda la visibilidad
de la capa donde est metida la capa en cuestin. Si la capa no est
metida dentro de ninguna otra se supone que est metida en la capa
documento, que es toda la pgina y que siempre est visible.
Atributo z-index
Sirve para indicar la posicin sobre el eje z que tendrn las distintas capas de la
pgina. Dicho de otra forma, con z-index podemos decir qu capas se vern
encima o debajo de otras, en caso de que estn superpuestas. El atributo zindex toma valores numricos y a mayor z-index, ms arriba se ver la pgina.
Atributo clip
Es un atributo un poco difcil de explicar. En concreto sirve para recortar
determinadas reas de la capa y que no se puedan ver. Una capa que
est visible se puede recortar para que se vea, pero que no se vea algn
trozo de esta. El cliping se indica por medio de 4 valores, con esta
sintaxis.
rect (<top>, <right>, <bottom>, <left>)
SEGUNDO CICLO
Los valores <top>, <right>, <bottom> y <left> indican distancias que se pueden
apreciar en este esquema.
46
Este es un ejemplo de capa que utiliza todos los atributos que hemos visto en
este artculo y alguno ms para aplicar estilo a la capa.
Una introduccin sobre cmo maquetar una pgina utilizando capas, que ilustra
el funcionamiento y la potencia de las CSS con ejemplos.
Vamos a conocer la maquetacin de pginas utilizando Hojas de estilos en
cascada (CSS). Veremos cmo realizar este tipo de maquetacin, junto con
algunas ventajas e inconvenientes. Para muchos ser todava un campo por
explorar. Aunque no vamos a entrar en grandes detalles, vamos a intentar dar a
conocer la maquetacin con CSS para que cubrir la posible laguna por parte del
alumno.
Como se ha podido aprender las hojas de estilo en cascada ayudan a separar el
contenido de la forma, es decir, los elementos que componen una pgina de la
forma con la que se muestran. Adems, CSS ayuda en gran medida a la
definicin de estilos en la pgina, ya que permite ajustar de una manera mucho
ms precisa cualquier aspecto de cualquier elemento de la pgina.
La maquetacin con CSS lleva la utilizacin de las hojas de estilo a su grado
mximo, de manera que cualquier definicin del aspecto de la pgina se realiza
en la declaracin CSS que enlazamos con el documento HTML. Para definir la
situacin de los elementos en la pgina se utilizan las capas, a las que se aplica
un posicionamiento a travs tambin de las hojas de estilo.
Para crear las capas se utilizan etiquetas <DIV>, en las que se introducen los
elementos que queramos que aparezcan en la pgina. Los elementos dentro de
los <DIV> tambin se pueden anidar, para heredar las propiedades y
posicionamiento de las capas padre.
En la maquetacin por capas se definen nicamente etiquetas <DIV> y las
tablas slo se utilizan para mostrar informacin tabulada, es decir, mostrada en
filas y columnas. Cabe sealar que en la maquetacin tradicional se utilizan las
tablas para ajustar la posicin de los elementos en la pgina. Seguro que
muchos de ustedes estn muy familiarizados con el uso de tablas para
maquetar una web, pues se trata de una tcnica bastante sencilla, aunque
bastante poco prctica y que complica un tanto el cdigo de las pginas web
resultantes.
La maquetacin por tablas es una forma de crear webs ms evolucionada y que
mejora en mucho a la maquetacin tradicional, aunque tambin tiene sus
inconvenientes.
Veamos primero algunas de las ventajas de la

maquetacin CSS
La separacin del contenido de la pgina y del estilo o aspecto con el que se
deben mostrar. Tener en cuenta que, cuanto ms separemos estos dos
47
47
48
elementos, ms sencillo ser el mantenimiento de las pginas y el

procesamiento de la informacin. Con ello tambin podremos obtener pginas
ms limpias y claras.
Ahorro en la transferencia. Si todos los estilos y posiciones de los elementos
se introducen en un documento externo, liberaremos el cdigo de la pgina y
ocupar mucho menos. Como la declaracin de estilos se almacena en la cach
del navegador, slo se transfiere en la primera pgina que se visita del sitio, con
lo que la segunda y posteriores pginas que se soliciten se cargarn mucho
ms rpido.
Facilidad para alterar el aspecto de la pgina sin tocar el cdigo HTML. Como
toda la informacin de los estilos y el posicionamiento de las capas se
encuentra en un mismo archivo, si deseamos cambiar cualquier elemento de la
pgina -ya sea su posicin o su aspecto-, slo tenemos que actualizar la hoja de
estilos y los cambios se vern automticamente en todo el web.
Como decimos, tambin hay algunas desventajas:

Compatibilidad con navegadores antiguos. Se necesita que el visitante
disponga de un navegador bastante avanzado. La mayora de los visitantes
disponen de navegadores que soportan caractersticas avanzadas de las CSS,
pero todava hay mucha gente que no ha actualizado sus equipos o que navega
en sistemas de slo texto. Los navegadores que no soportan hojas de estilos,
por lo menos leern el cdigo de la pgina y lo mostrarn sin ningn
posicionamiento. Ello puede resultar fastidioso, pero por lo menos visualizarn
todos los datos de la pgina, aunque descolocados y sin estilo.
Diferencias entre navegadores. Dependiendo del navegador tambin cambian
las etiquetas de estilos soportadas, por lo que las pginas puede que no se
vean exactamente igual en unos clientes que en otros. Tambin, al igual que
ocurre con HTML, hay atributos no estndar o que tienen valores por defecto
diferentes. Cuando se empieza con la maquetacin en CSS, puede resultar un
tema bastante complicado y crearnos bastantes dolores de cabeza, no obstante,
se trata de, poco a poco, ir aprendiendo todos los atributos y los navegadores
donde se visualizan o no.
Dificultad. Sin duda, si estamos acostumbrados al HTML, pasar a CSS resulta
bastante ms complicado y requiere un estudio ms profundo. Sin embargo,
este paso nos brindar un mayor control de los elementos de la pgina y
ampliar nuestras fronteras a la hora de maquetar.
SEGUNDO CICLO
Ejemplo CssZenGarden
48
Existe un sitio muy interesante e ilustrador que nos puede ayudar a conocer
rpidamente la potencia de las CSS y hacernos una idea de lo que puede
significar su uso. Es un sitio donde se muestra un contenido y un diseo
bastante logrado. Adems, dispone de varios enlaces para poder ver el mismo
sitio, con el mismo contenido, pero con distinto aspecto. De ese modo podemos
49
ver cmo se puede llegar a alterar el diseo de una pgina con tan solo cambiar
la hoja de estilos.
La URL del sitio es http://www.csszengarden.com. Es muy interesante que
selecciones otros diseos para ver el cambio radical que puede tener las
pginas web con distintas hojas de estilos.
Aqu puedes ver la tabla de los atributos CSS.
Nombre del
atributo
Posibles valores
Ejemplos
FUENTES - FONT
color
valor RGB o nombre de color
color:
color: red;
#009900;
Sirve para indicar el color del texto. Lo admiten casi todas las etiqetas de HTML. No
todos los nombres de colores son admitidos en el estandar, es aconsejable
entonces utilizar el valor RGB.
font-size
xx-small | x-small | small |

medium | large | x-large | xx- font-size:12pt;
large
font-size: x-large;
Unidades de CSS
Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor
exactitud.
font-family
serif | sans-serif | cursive |

font-family:arial,helvetica;
fantasy
|
monospace
font-family: fantasy;
Todas las fuentes habituales
Con este atributo indicamos la familia de tipografia del texto. Los primeros valores
son genricos, es decir, los exploradores las comprenden y utilizan las fuentes que
el usuario tenga en su sistema.
Tambin se pueden definir con tipografas normales, como ocurra en html. Si el
nombre de una fuente tiene espacios se utilizan comillas para que se entienda bien.
font-weight
normal | bold | bolder | lighter

font-weight:bold;
| 100 | 200 | 300 | 400 | 500 |
font-weight: 200;
600 | 700 | 800 | 900
Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner
negrillas con total libertad. Normal y 400 son el mismo valor, as como bold y 700.
font-style
normal | italic | oblique
font-style:normal;
font-style: italic;
Es el estilo de la fuente, que puede ser normal, itlica u oblcua. El estilo oblique es
similar al italic.
49
50
PRRAFOS - TEXT
line-height
normal y unidades CSS
line-height:
line-height: normal;
12px;
El alto de una lnea,y por tanto, el espaciado entre lneas. Es una de esas
caractersticas que no se podian mofificar utilizando HTML.
text-decoration
none | [ underline || overline text-decoration:

|| line-through ]
text-decoration: underline;
none;
Para establecer la decoracin de un texto, es decir, si est subrayado, sobrerayado

o tachado.
text-align
left | right | center | justify
text-align:
text-align: center;
right;
Sirve para indicar la alineacin del texto. Es interesante destacar que las hojas de
estilo permiten el justificado de texto, aunque recuerda que no tiene por que
funcionar en todos los sistemas.
text-indent
Unidades CSS
text-indent:
text-indent: 2in;
10px;
Un atributo que sirve para hacer sangrado o mrgenes en las pginas. Muy til y
novedosa.
text-transform
capitalize | uppercase
lowercase | none
| text-transform:
text-transform: capitalize;
none;
Nos permite transformar el texto, haciendo que tenga la primera letra en

maysculas de todas las palabrs, todo en maysculas o minsculas.
FONDO - BACKGROUND
Backgroundcolor
Un color, con su nombre o su background-color:

valor RGB
background-color: #000055;
green;
SEGUNDO CICLO
Sirve para indicar el color de fondo de un elemento de la pgina.
50
Backgroundimage
background-image: url(mrmol.gif) ;
El nombre de la imagen con
background-image:
su camino relativo o absoluto
url(http://www.x.com/fondo.gif)
Colocamos con este atributo una imagen de fondo en cualquier elemento de la

pgina, se puede ver una pgina de ejemplo:
51
BOX - CAJA
Margin-left
Unidades CSS
margin-left:
margin-left: 0,5in;
1cm;
Indicamos con este atributo el tamao del margen a la izquierda

Margin-right
Unidades CSS
margin-right:
margin-right: 1in;
5%;
Se utiliza para definir el tamao del margen a la derecha

Margin-top
Unidades CSS
margin-top:
margin-top: 10px;
0px;
Indicamos con este atributo el tamao del margen arriba de la pgina

Margin-bottom
Unidades CSS
margin-bottom:
margin-top: 1px;
0pt;
Con el se indica el tamao del margen en la parte de abajo de la pgina

Padding-left
Unidades CSS
padding-left:
padding-left: 1px;
0.5in;
Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente

y el contenido de este. Es parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
Padding-right
Unidades CSS
padding-right:
padding-right: 1pt;
0.5cm;
Indica el espacio insertado, en este caso por la derecha, entre el borde del
elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de
las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
Padding-top
Unidades CSS
padding-top:
padding-top: 5px;
10pt;
Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el

contenido de este.
Paddingbottom
Unidades CSS
padding-right:
padding-right: 1pt;
0.5cm;
Indica el espacio insertado, en este caso por abajo, entre el borde del elementocontinente y el contenido de este.
Border-color
color RGB y nombre de color
border-color:
border-color: #ffccff;
red;
Para indicar el color del borde del elemento de la pgina al que se lo aplicamos. Se
puede poner colores por separado con los atributos border-top-color, border-rightcolor, border-bottom-color, border-left-color.
51
52
Border-style
none | dotted | solid | double border-style: solid;

| groove | ridge | inset |
border-style: double;
outset
El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no
parece funcionar), solid=solido, double=doble borde, y desde groove hasta outset
son bordes con varios efectos 3D.
border-width
Unidades CSS
border-width:
border-width: 0.5in;
10px;
El tamao del borde del elemento al que lo aplicamos.

Flota
none | left | right
float: right;
Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se

agrupe alrededor de dicho elemento. Igual que el atributo align en imgenes en sus
valores right y left.
SEGUNDO CICLO
clear
52
none | right | left
clear: right;
Diseo Web con FIREWORKS CS5
Objetos vectoriales
En el panel Herramientas de Fireworks hay diferentes secciones que contienen
herramientas de dibujo y edicin de vectores y mapas de bits. En Fireworks, la
herramienta seleccionada determina si el objeto creado es un vector o un mapa
de bits. Por ejemplo, si selecciona la herramienta Pluma en la seccin Vector
del panel Herramientas, cuando empiece a trazar puntos dibujar trazados de
vectores. Elija la herramienta Pincel y al arrastrar el puntero pintar un objeto
de mapa de bits. Elija la herramienta Texto y slo tendr que comenzar a
escribir.
Despus de dibujar objetos vectoriales, de mapa de bits o texto, dispondr de
una gran variedad de herramientas, efectos, comandos y tcnicas para mejorar
y finalizar las imgenes. Y podr crear botnes de navegacin interactivos con
las herramientas del editor de botnes de Fireworks. Las herramientas de
Fireworks tambin sirven para editar imgenes importadas. Puede importar y
editar archivos JPEG, GIF, PNG, PSD y muchos otros formatos de archivo. Tras
importar una imagen grfica, es posible ajustar su color y tono, y tambin
recortarla, retocarla y enmascararla.
Imgenes interactivas
Las divisiones y zonas interactivas son objetos Web que definen reas
interactivas en un grfico Web. Las divisiones cortan la imagen en varias
secciones, a las que es posible aplicar comportamientos de rollover, animacin
y vnculos URL (Uniform Resource Locator). Adems, puede exportar cada
seccin con diferentes parmetros. En la pgina Web, cada divisin se muestra
como la celda de una tabla. Las zonas interactivas permiten asignar vnculos
URL y comportamientos a parte de la imagen o a toda ella. Para ms
informacin, consulte la Ayuda de Fireworks.
53
53
54
Las divisiones y zonas interactivas poseen tiradores de rollover de arrastrar y

colocar que permiten asignar rpidamente imgenes intercambiadas y
comportamientos de rollover directamente al espacio de trabajo. El editor de
botnes y el editor de men emergente son prcticas funciones de Fireworks
que ayudan a crear elementos grficos interactivos especiales para desplazarse
por sitios Web.
Acerca de las imgenes vectoriales y de mapa de

bits
Los sistemas informticos muestran las imgenes en formato de vectores o de
mapa de bits. Entender la diferencia entre los dos formatos ayuda a comprender
el programa, que contiene herramientas vectoriales y de mapa de bits y es
capaz de abrir e importar ambos formatos.
Acerca de las imgenes vectoriales
SEGUNDO CICLO
Los elementos grficos vectoriales representan las imgenes mediante lneas y

curvas, denominadas vectores, que incluyen informacin de color y posicin.
Por ejemplo, la imagen de una hoja puede definirse por medio de un conjunto
de puntos que describen su contorno. El color de la hoja queda determinado por
el color de su contorno (el trazo) y el del rea que encierra este contorno (el
relleno)
54
Cuando se edita una imagen vectorial, se modifican las propiedades de las

lneas y curvas que describen su forma. Las imgenes vectoriales son
independientes de la resolucin, lo que significa que es posible desplazar,
cambiar el tamao, alterar la forma y modificar el color de una imagen vectorial,
as como visualizarla en dispositivos de salida de diferente resolucin, sin que
cambie la calidad de su aspecto.
Acerca de las imgenes de mapa de bits

Las imgenes de mapa de bits estn formadas por puntos, llamados pxeles,
organizados en una cuadrcula. La pantalla del computador es una gran
cuadrcula de pxeles. En la versin de mapa de bits de la hoja, la imagen est
determinada por la posicin y el valor de color de cada pxel de la cuadrcula.
Cada punto tiene asignado un color. Cuando se presentan con la resolucin
adecuada, los puntos encajan entre s como las teselas de un mosaico y forman
la imagen.
Cuando se edita una imagen de mapa de
bits, se modifican los pxeles, no las
lneas y curvas. Las imgenes de mapa
de bits dependen de la resolucin, es
decir, los datos que las definen estn fijos
en una cuadrcula que tiene un tamao
determinado. Cuando se aumenta el
tamao de un elemento grfico de mapa
de bits, los pxeles se redistribuyen en la
cuadrcula, lo que puede dar lugar a que
sus bordes queden desiguales. La
visualizacin de un elemento grfico de
mapa de bits en un dispositivo de salida
con menor resolucin que la propia
imagen tambin puede reducir su calidad.
Descripcin del entorno

El programa Fireworks CS5, software que pertenece a la casa Adobe, sirve para
realizar aplicaciones grficas de todo tipo, que potencien y hagan ms
atractivas nuestras pginas web. Fireworks, a diferencia de otros productos
grficos como Photoshop, tiene la particularidad de trabajar con vectores y
mapas de bit, combinacin que lo hace indicado para realizar diseos web. Esto
se potencia gracias a que trae incorporado un sinnmero de opciones que nos
permiten crear aplicaciones bastantes interesantes, como gifs animados,
banners y mens desplegables, entre otras.
Otra particularidad de este software es el formato en que guarda los archivos.
Se trata del PNG (Portable Network Graphics) que fue creado para reemplazar a
otros formatos grficos y que a diferencia de estos ofrece una variabilidad de
transparencia (Alfa) mucho mayor que el tradicional GIF, entrega mejor control
en los niveles gamma de los grficos y permite una mayor compresin de las
imgenes.
55
55
56
El entorno de trabajo de FIREWORKS

Al abrir un documento en Fireworks por primera vez, Fireworks activa el entorno
de trabajo, en el que se incluye el panel Herramientas, el Inspector de
propiedades, los mens y los dems paneles. El panel Herramientas, situado a
la izquierda de la pantalla, contiene varias secciones de herramientas de
distintos grupos, como mapa de bits, vector y Web. De forma predeterminada, el
Inspector de propiedades aparece en la parte inferior del documento y al
principio muestra las propiedades del mismo. Despus cambia para mostrar las
propiedades de la herramienta o el objeto seleccionados mientras se trabaja con
el documento. Los paneles estn inicialmente acoplados en grupos a lo largo de
la parte derecha de la pantalla. La ventana de documento aparece en el centro
de la aplicacin.
SEGUNDO CICLO
Escritorio de FIREWORKS
56
Cambio de las opciones de herramientas

Cuando se elige una herramienta, el Inspector de propiedades muestra sus
opciones. Algunas opciones permanecen en pantalla mientras se trabaja con
esa herramienta. Con otras herramientas, como las herramientas bsicas de
forma y las herramientas Pluma y Lnea, el Inspector de propiedades muestra
las propiedades de los objetos seleccionados.
Para ver en el Inspector de propiedades las opciones de la herramienta que
est utilizando:
Elija Seleccionar > Anular seleccin para anular la seleccin de todos los
objetos.
Para obtener ms informacin sobre las opciones especficas de las
herramientas, consulte las secciones que presentan a cada una de ellas en
Utilizacin de Fireworks o la Ayuda de Fireworks.
57
57
58
Utilizacin del panel herramientas

El panel Herramientas est organizado en seis
Seleccionar, Mapa de bits, Vector, Web, Colores y Ver.
categoras:
Aplicar efecto de destello

Bien, para empezar, abrimos el Fireworks CS5
Creamos una imagen (File>New) de 500 px. 500 px. y fondo negro.
Ahora, que ya tenemos la imagen
creada, seleccionamos la
herramienta "pincel" con tamao y color que deseen.
SEGUNDO CICLO
Luego de hacer esto, vamos a men filtro>desenfoqu >desenfoque de zoom y

le damos las caractersticas siguientes:
58
calidad = 100
cantidad= 100
Hacemos click en aceptar, y la imagen quedara ms o menos como esta:
Utilizacin de reglas, guas y cuadrcula

Para disponer los objetos con la mayor precisin posible y facilitar el dibujo,
utilice las reglas y las guas. Coloque las guas en el documento y encaje los
objetos en dichas guas, o bien active la cuadrcula de Fireworks y encaje los
objetos en dicha cuadrcula.
Utilizacin
59
59
60
Utilizacin de las reglas

Las reglas ayudan a medir, organizar y planificar la disposicin del trabajo.
Teniendo en cuenta que las imgenes de Fireworks van a utilizarse en la Web,
donde los elementos grficos se miden en pxeles, las reglas de Fireworks
siempre miden en pxeles sea cual sea la unidad de medida empleada al crear
el documento.
Utilizacin de las guas

Las guas son lneas que se arrastran al lienzo del documento a partir de las
reglas. Se utilizan como ayuda de dibujo y facilitan la colocacin y alineacin de
los objetos. Pueden emplearse para marcar partes importantes del documento,
como los mrgenes, el punto central del documento y las reas donde se va a
realizar una tarea de precisin.
Para facilitar la alineacin de los objetos, Fireworks permite ajustar los objetos
en las guas. Puede bloquear las guas para impedir que se muevan por
accidente.
Nota: las guas no se encuentran en ninguna capa ni se exportan
con el documento. Slo son herramientas de diseo. Fireworks
tambin contiene guas de divisin que permiten dividir un
documento para utilizarlo en la Web. Sin embargo, las guas de
imagen normales son distintas de las guas de divisin.
Para crear una gua horizontal o vertical:

1. Haga clic y arrstrela a partir de la regla correspondiente.
2. Site la gua en el lienzo y suelte el botn del ratn.
Nota: para cambiar la gua de lugar, arrstrela de nuevo.
Para mover una gua a una determinada posicin:

1. Haga doble clic en la gua.
SEGUNDO CICLO
2. Introduzca la posicin nueva en el cuadro de dilogo Mover gua y haga clic

en Aceptar.
60
Para mostrar u ocultar guas:

Seleccione Ver > Guas > Mostrar guas.
Utilizacin de la cuadrcula
La cuadrcula de Fireworks es un sistema de lneas horizontales y verticales
superpuesto en el lienzo. La cuadrcula resulta til para colocar los objetos con
precisin. Adems, la cuadrcula puede visualizarse, editarse y cambiar de
tamao y color.
Utilizacin del panel historial para deshacer y

repetir varias acciones
El panel Historial permite ver, modificar y repetir las acciones realizadas para
crear el documento. En este panel se enumeran las ltimas acciones realizadas
en Fireworks hasta el nmero especificado en Pasos de Deshacer en el cuadro
de dilogo Preferencias.
El panel Historial permite realizar lo siguiente:
Deshacer y rehacer rpidamente las acciones ms recientes.
Elegir las ltimas acciones realizadas en el panel Historial y repetirlas.
Copiar comandos seleccionados en el Portapapeles como equivalente a texto
de JavaScript.
Guardar un grupo de acciones recientes como comando personalizado y
seleccionarlo en el men Comando para volver a utilizarlo como un solo
comando.
Para deshacer y rehacer acciones:

1. Seleccione Ventana > Historial para abrir el panel Historial.
2. Suba o baje el marcador de deshacer.
Para repetir acciones:

1. Realice las acciones.
2. Realice una de las siguientes acciones para resaltar en el panel Historial las
acciones que se repetirn:
Para resaltar una accin, haga clic sobre ella.
Para resaltar varias acciones, pulse la tecla Control (Windows) o Comando
(Macintosh) y haga clic sobre ellas.
Pulse la tecla Mays mientras hace clic para resaltar varios comandos
consecutivos.
3. Haga clic en el botn Reproducir de la parte inferior del panel Historial.
61
61
62
Para guardar acciones para su utilizacin posterior:

1. Resalte las acciones que desee guardar en el panel Historial.
2. Haga clic en el botn de almacenamiento de la parte inferior del panel.
3. Introduzca un nombre para el comando y haga clic en Aceptar.
Seleccin y transformacin de objetos

Cuando se trabaja con Fireworks CS5, se manipulan objetos vectoriales y de
mapa de bits, bloques de texto, divisiones, zonas interactivas y reas de
pxeles. Las herramientas de seleccin y transformacin permiten desplazar,
copiar, eliminar, girar, sesgar objetos y cambiar su escala. En documentos con
varios objetos, para organizarlos, stos se pueden apilar, agrupar y alinear.
Seleccin de objetos
Para manipular los objetos del lienzo, primero es preciso seleccionarlos. Esta
regla es vlida para objetos vectoriales, trazados, puntos, bloques de texto,
palabras, letras, divisiones o zonas interactivas, instancias y objetos de mapa
de bits.
Para seleccionar objetos puede utilizar cualquiera de los siguientes mtodos:
SEGUNDO CICLO
El panel Capas muestra cada objeto. Cuando el panel est abierto y las capas
expandidas, basta con hacer clic en cualquier objeto de la lista para
seleccionarlo.
62
Utilizacin de la herramienta puntero

La herramienta Puntero permite seleccionar objetos al hacer clic sobre ellos o al
arrastrar el ratn para crear un rea de seleccin alrededor de todos o de parte
de los objetos.
Utilizacin de la herramienta subseleccin

La herramienta Subseleccin se emplea para seleccionar, desplazar o modificar
puntos de un trazado vectorial o de un objeto que forma parte de un grupo.
Para desplazar o modificar objetos con la herramienta Subseleccin:

1. Seleccione la herramienta Subseleccin.
2. Haga una seleccin. Aparecen los tiradores de seleccin.
3. Siga uno de estos procedimientos:
Para modificar un objeto, arrastre uno de sus puntos o tiradores de
seleccin.
Para desplazar el objeto completo, arrstrelo tirando de cualquier parte
excepto de los tiradores de seleccin o punto.
Utilizacin de la herramienta seleccionar detrs

Cuando se trabaja con imgenes que contienen varios objetos, la herramienta
Seleccionar detrs sirve para seleccionar un objeto oculto detrs de otros.
Para seleccionar un objeto situado detrs de otros:

Haga clic repetidamente con la herramienta Seleccionar detrs sobre los objetos
apilados para recorrerlos de arriba a abajo hasta seleccionar el objeto que
desee.
Nota: Tambin puede seleccionar un objeto difcil de alcanzar si hace clic en el
panel Capas cuando las capas estn expandidas.
63
63
64
Nota: cuando la barra de estado est activa (slo Windows), los

objetos seleccionados tambin se identifican en la barra de estado
situada en la parte inferior de la ventana de documento.
Modificacin de una seleccin

Una vez seleccionado un objeto, es posible aadir objetos a la seleccin y
anular la seleccin de los objetos seleccionados. Basta un solo comando para
seleccionar y anular la seleccin de todo lo que contienen todas las capas del
documento. Tambin puede ocultarse el trazado de seleccin para editar el
objeto seleccionado comprobando a la vez qu aspecto tendr en la Web o al
imprimirlo.
Seleccin de pxeles
SEGUNDO CICLO
Es posible editar los pxeles de todo un lienzo o elegir una de las herramientas
de seleccin para limitar la edicin a un rea determinada de la imagen:
64
Las herramientas de seleccin de pxeles trazan recuadros de seleccin que

definen el rea de pxeles seleccionada. Una vez dibujado el recuadro de
seleccin, es posible desplazarlo, aadirle elementos o basar otra seleccin en
l. Los pxeles del interior de la seleccin pueden editarse, eliminarse y filtrarse
sin afectar a los pxeles externos a la seleccin. Tambin es posible crear una
seleccin de pxeles flotante para editarla, desplazarla, cortarla o copiarla.
Seleccin de reas de color similar

La herramienta Varita mgica permite seleccionar reas de pxeles de color
similar. Para controlar el modo de seleccionar los pxeles se utilizan las
opciones Tolerancia y Borde de la herramienta Varita mgica en el Inspector de
propiedades.
Para seleccionar un rea de pxeles de una gama similar de colores:
1. Seleccione la herramienta Varita mgica.
2. Elija una opcin de borde en el Inspector de propiedades.
3. Para ajustar el nivel de tolerancia, arrastre el deslizador en el Inspector de
propiedades.
Tolerancia significa el rango tonal de colores que se seleccionan al hacer clic en
un pxel con la herramienta Varita mgica. Si introduce el valor 0 y hace clic en
un pxel, slo se seleccionan los pxeles adyacentes que tengan exactamente el
mismo tono. Si se introduce 65, se selecciona una gama ms amplia de tonos.
4. Haga clic en el rea cuyo color desee seleccionar. Alrededor de los pxeles
seleccionados aparece un recuadro.
Ajuste de recuadros de seleccin

Despus de seleccionar pxeles con una herramienta Recuadro o Lazo, es
posible modificar o desplazar el borde del recuadro sin que los pxeles que hay
65
65
66
debajo se vean afectados. Las teclas modificadoras permiten aadir pxeles al

borde del recuadro, o eliminar pxeles de ste, de forma manual. Adems, es
posible expandir o contraer el borde del recuadro conforme a un valor
especificado, seleccionar un rea de pxeles adicional alrededor del recuadro
existente y suavizar el borde del recuadro.
Suavizado del borde de un recuadro

Es posible eliminar los pxeles que sobresalen de los bordes de una seleccin
de pxeles. Esta funcin resulta til cuando aparecen pxeles sobrantes en el
borde de un recuadro o una seleccin de pxeles despus de utilizar la
herramienta Varita mgica.
Creacin y desplazamiento de una seleccin de

pxeles flotante
Cuando se arrastra un recuadro a otra posicin, lo que se desplaza es el
recuadro. Si desea desplazar, modificar, cortar o copiar una seleccin de
pxeles, primero debe convertirla en una seleccin flotante.
Insercin de un nuevo mapa de bits cortando o

copiando
SEGUNDO CICLO
Es posible insertar en la capa actual de un documento un nuevo mapa de bits

basado en una seleccin de pxeles cortando
o copiando los pxeles
seleccionados.
66
Para insertar un nuevo mapa de bits cortando y pegando una seleccin de

pxeles:
1. Seleccione un rea de pxeles con una herramienta de seleccin de pxeles.
2. Seleccione Edicin > Insertar > Mapa de bits mediante Cortar.
En la capa actual se crea un nuevo objeto de mapa de bits a partir de la

seleccin de pxeles, y los pxeles seleccionados se eliminan del objeto de
mapa de bits original. En el panel Capas aparece una miniatura del nuevo
objeto de mapa de bits sobre el objeto del que se ha cortado.
Fundido de selecciones de pxeles

El fundido desenfoca los bordes de una seleccin de pxeles y ayuda a integrar
el rea seleccionada en los pxeles circundantes. Esta funcin es til cuando se
copia una seleccin para pegarla en otro fondo.
Retoque de mapas de bits

Fireworks ofrece una amplia variedad de herramientas para retocar las
imgenes. Permiten modificar el tamao de la imagen, reducir o perfilar su
enfoque o copiar una parte de ella y estamparla en otra rea.
67
67
68
Desenfoque, perfilado y mancha de pxeles

Las herramientas Desenfocar y Perfilar afectan al enfoque de los pxeles. La
herramienta Desenfocar permite dar mayor o menor nitidez a determinadas
partes de una imagen desenfocando selectivamente los elementos, de forma
muy similar a cmo un fotgrafo controla la profundidad del campo.
La herramienta Perfilar es til para reparar problemas en imgenes de
escneres o fotografas desenfocadas. La herramienta Difuminar permite
mezclar colores suavemente, como si creara el reflejo de una imagen.
Aclarado y oscurecimiento de pxeles

Para aclarar y oscurecer las partes de una imagen se utilizan las herramientas
Aclarar y Oscurecer respectivamente. Es igual a la tcnica de aadir o quitar luz
durante el revelado de una fotografa.
Eliminacin del efecto de ojos rojos en las fotos
SEGUNDO CICLO
En algunas fotografas, los ojos aparecen con un matiz rojo poco natural. Para
corregirlo, utilice la herramienta Eliminacin de ojos rojos. Esta herramienta slo
reemplaza las partes rojas de la fotografa con colores grises y negros.
68
Integracin WEB con Adobe

Dreamweaver CS5
A pesar de que las pginas web son cdigo, no todo ha de ser metido a mano,
para facilitarnos sta tarea existen los editores conocidos como
WYSIWYG(What you see is what you get - Lo que ves es lo que consigues),
que nos faciltan la tarea de crear elementos simples pero repetitivos como
pueden ser las tablas, insercin de imgenes, etc. Poco uso stos editores,
aunque son de gran utilidad, sobre todo si no se tiene amplio conocimiento a
nivel de cdigo. En el ranking de stos editores, Dreamweaver CS5 es el que
se lleva el gato al agua, siendo el ms completo. Contiene montones de
posibilidades, simplificando enormemente la tarea, por lo que si llegas a
dominar su manejo, puedes crear webs realmente increbles y ahorrar tiempo,
con el uso de plantillas, etc.
Un web site
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con
un diseo similar o un objetivo comn. Es necesario disear y planificar el sitio
web antes de crear las pginas que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco
local. Los documentos HTML normalmente se crean dentro de dicha carpeta,
mientras que para contener las imgenes, las animaciones, archivos de tipos
especfico, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo
de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo
que se conoce como sitio local.
Despus se podrn copiar los archivos en un servidor web, en el denominado
sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podr
verlo en Internet.
69
69
70
Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local
es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos
en el sitio remoto.
La organizacin de los archivos en un sitio permite administrar y compartir
archivos, mantener los vnculos de forma automtica, utilizar FTP para cargar el
sitio local en el servidor, etc.
La pgina inicial de nuestro sitio debe de tener el nombre
index.htm o index.html, ya que cuando se intenta
acceder a una URL genrica, el servidor devuelve la
pgina con ese nombre.
Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo
menos la carpeta raz, ya es posible definir el nuevo sitio.
Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o
directamente a Nuevo sitio.
Recuerda que a travs del panel Archivos, se puede cambiar a cada uno de los
sitios definidos.
SEGUNDO CICLO
Tambin podemos acceder desde el icono de acceso rpido de la barra de la

aplicacin a la opcin Administrar sitios o Nuevo sitio...
70
Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se

mostrar la misma ventana en la que definir o modificar las caractersticas del
sitio.
Las opciones del sitio se agrupan en diferentes categoras que aparecen en la

parte izquierda.
Para visualizar las caractersticas de una categora basta con seleccionarla de
la lista haciendo clic en ella.
Las dos nicas opciones imprescindibles son las que encontramos en la
categora Sitio, y de momento son las nicas que cambiaremos:
Vamos a ver los datos que hay que editar para la categora Datos locales, que
ser lo nico que empleemos de momento:
Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo
en la lista de sitios.
La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco
duro local. La carpeta puede contener ya archivos o no.
Estas dos caractersticas son las imprescindibles para definir un sitio local. El
resto son opcionales, y de momento no nos interesan.
Las dems opciones en este momento no nos interesan, ya que estamos
definiendo el sitio local, y no es necesario establecer los datos del servidor en el
que estar el sitio remoto.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.
Ver el sitio
El panel Archivos (men Ventana Archivos o tecla F8) es uno de los
paneles ms importantes de Dreamweaver, ya que nos da acceso a los archivo
del sito.
71
71
72
En este caso vemos todos los documentos creados en nuestro sitio buscar.htm,
paraplantilla.htm, platossemana.htm, postresemana.htm y las carpetas
imgenes y varios.
Es posible visualizar un sitio en el panel Archivos o en una ventana. Para
cambiar de una vista a otra hay que pulsar sobre el botn Expandir que aparece
en la parte superior del panel y de la ventana.
Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio
remoto (el del servidor), y poder, por ejemplo, sincronizar los archivos, o
compararlos. Tambin el servidor de pruebas o las bases de datos.
En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio
local (a la derecha) con nuestros archivos.
Dreamweaver guarda la cach de nuestro sitio, cmo se organizan los archivos
y se relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su
carpeta desde Dreamweaver, automticamente actualizar todas las referencias
a ese archivo (enlaces desde otras pginas, origen de la imagen, etc).
En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las
pginas no se mostrarn correctamente: no aparecern imgenes, no
funcionarn enlaces, etc, ya que Dreamweaver simplemente no encontrar la
pgina.
SEGUNDO CICLO
Al modificar algn objeto que es referenciado por algn otro documento, se

muestra una ventana similar a sta, que indica los documentos que hacen
referencia a dicho objeto, y que pueden ser actualizados para que no se
produzcan los problemas antes mencionados.
72
Propiedades del documento

Es conveniente definir sitios homogneos, que todas las pginas de un sitio
sigan un mismo formato, es decir, que tengan el mismo color de fondo, de
fuente, etc.
Puede definirse el formato de cada una de las pginas a travs del cuadro de
dilogo Propiedades de la pgina.
Este cuadro se puede abrir de tres modos diferentes:
Pulsar la combinacin de teclas Ctrl + J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la
pgina.
Hacer clic con el botn derecho del ratn sobre el fondo de la pgina.
Aparecer al final del men contextual la opcin Propiedades de la pgina.
En la categora Apariencia (CSS), como ves en la imagen anterior,

encontramos las propiedades:
Fuente de pgina: es el tipo de letra que le aplicaremos al texto.
Tamao: es el tamao de la fuente que aplicaremos al texto.
Color del texto: es el color de la fuente.
Color del fondo: permite especificar un color de fondo para el documento,
pero dicho color solo se mostrar en el caso de no haber establecido ninguna
imagen de fondo.
Imagen de fondo: permite especificar una imagen de fondo para el
documento. Dicha imagen se muestra en mosaico. Es importante al elegir
una imagen de fondo tener en cuenta que segn los colores de la imagen
ser necesario establecer unos u otros colores para el texto, as como que no
es conveniente tener un gif animado como fondo.
73
73
74
Repetir: permite especificar si queremos que la imagen de fondo se repita o

no. Si no queremos que se repita, seleccionamos la opcin no-repeat. Si
queremos que se repita o dejamos la opcin en blanco o seleccionamos la
opcin repeat. Si queremos que se repita solo en horizontal seleccionamos la
opcin repeat-x y si queremos que se repita en vertical, entonces
seleccionamos repeat-y.
Mrgenes: permiten establecer mrgenes en el documento, es decir, la
distancia entre donde empieza el contenido de la pgina y la ventana del
navegador.
SEGUNDO CICLO
Aqu tienes una tabla de los caracteres ms utilizados con sus Entidades HTML
numrica y de nombre de entidad:
74
Carcter
Entidad con
nombre
Entidad
numrica
Carcter
Entidad con
nombre
Entidad
numrica
á
á
Á
Á
é
é
É
É
í
í
Í
Í
ó
ó
Ó
Ó
ú
ú
Ú
Ú
ü
ü
Ü
Ü
&ntide;
ñ
Ñ
Ñ
¿
¿
α
α
&iexc;
¡
β
β
–
–
©
©
→
→
®
®
←
←
€
€
<
<
<
espacio

>
>
>
&
&
&
El texto: propiedades y formato

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y
a crear estilos CSS, que permiten asignar al texto clases y estilos creados por
nosotros mismos, no predefinidos.
Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del
men Formato, y a travs del inspector de propiedades. Vamos a ver las
posibilidades que se nos ofrecen a travs del inspector de propiedades, que
estn clasificadas en dos categoras HTML y CSS.
Todas estas propiedades generan etiquetas HTML, que tienen un estilo por
defecto en el navegador. Pero al final, podremos personalizarlas con CSS para
que se vean exactamente como queramos.
Formato: Permite seleccionar un formato de prrafo ya definido para HTML,
que puede ser encabezado, prrafo o formato predeterminado. Los
encabezados se utilizan para establecer ttulos dentro de un documento. El
formato predeterminado sirve para que el texto aparezca tal cual ha sido
escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo
se considera uno, pero al establecer el formato predeterminado se respetar
que hayan varios espacios en lugar de solo uno. El texto normal, debera ir
siempre en prrafos, salvo que est en otros elementos, como tablas o listas.
Estilo: El botn B encierra el texto en una etiqueta <strong></strong>, que
por defecto se muestra en negrita. El botn I, lo encierra entre <em></em>,
que por defecto se ve en cursiva.
Estas son las etiquetas de resaltado ms habituales, pero existen otras que
encontramos a travs del men Texto. Por ejemplo, subrayar el texto. Esta
opcin no aparece en el panel de Propiedades ya que de normal no suele
utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto
normal podra hacer que el usuario pensara que se trata de un vnculo. Adems,
emplea etiquetas que estn en desuso.
75
75
76
Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada
o con vietas.
Para que un texto que ya ha sido introducido en el documento se convierta en
una lista, simplemente hay que seleccionarlo y pulsar sobre la opcin de lista
correspondiente, ya sea a travs del inspector de propiedades, o a travs del
men Formato.
La lista con vietas (sin ordenar) se selecciona a travs del botn
,
mientras que la lista numerada (ordenada) se selecciona a travs del botn
.
Caracteres especiales
A veces necesitars introducir caracteres especiales en tus pginas. Debido al
modo editor de Diseo de Dreamweaver esta tarea es muy sencilla utilizando el
teclado, podemos incluir caracteres como , , , , .. de forma rpida. Pero si
quieres poner dos espacios en blanco y los introduces por teclado,
Dreamweaver no los crear, debers introducirlo dos veces utilizando la opcin
que vamos a ver a continuacin. Lo mismo ocurrir con los caracteres que no
tenemos en el teclado.
SEGUNDO CICLO
Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable

de la imagen inferior.
76
Slo coloca el cursor del ratn sobre Caracteres especiales y vers una lista
rpida de los caracteres ms utilizados que no pueden ser introducidos
mediante teclado.
Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la
lista y aparecer en la vista de Diseo.
Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir
una ventana desde donde podrs seleccionar caracteres entre una lista
bastante ms amplia:
Estilos CSS. Introduccin

Los estilos CSS se utilizan para combinar una serie de atributos del texto, como
pueden ser el color o el tamao, de modo que no sea necesario asignar estos
atributos uno a uno cada vez que se desee repetir la asignacin de esos
mismos valores a otras partes del texto.
Tambin permiten, como veremos ms adelante, definir prcticamente cualquier
propiedad de los elementos que contendrn nuestra web.
Podemos definir los estilos para determinadas etiquetas, como encabezados
(<h1>, <h2>...), prrafos (<p>), enlaces (<a>), etc... lo que formatear todas las
apariciones de esta etiqueta en el mbito del estilo.
Tambin podemos crear clases. Algo as como definir un estilo y darle un alias.
El estilo afectar a todos los elementos a los que apliquemos esa clase.
77
77
78
Por otro lado, al crear el estilo, podemos definirlo como un estilo en lnea
(afectar slo al elemento seleccionado) o crear una regla, que puede afectar a
toda la pgina, o a todo el sitio si la guardamos en un archivo CSS.
Un estilo CSS no es ms que un conjunto de reglas de formato que controlan el
aspecto del contenido de una pgina Web. Los estilos CSS aportan gran
flexibilidad y control al aspecto exacto que se busca en una pgina, desde la
posicin precisa de elementos hasta el diseo de fuentes y estilos concretos.
Una de las grandes ventajas de los estilos CSS reside en que cuentan con una
capacidad simple de actualizacin; cuando actualiza un estilo CSS, el formato
de todos los documentos que usan ese estilo se actualiza automticamente.
Crear un estilo personalizado

Con Dreamweaver CS5, las caractersticas que apliquemos a un texto a travs
del Inspector de propiedades CSS crearn automticamente estilos CSS.
Aunque tenemos que decidir a qu elementos afecta.
Crear un estilo en lnea

Por ejemplo, si queremos que un determinado estilo afecte a un nico elemento
y en un caso puntual, podemos crearlo como un estilo en lnea. Esto incrustar
el estilo en la propia etiqueta HTML, por lo que si alguna vez queremos
modificarlo, deberemos de ir al elemento.
En el Inspector de propiedades CSS, en Regla de destino, seleccionamos
<Nuevo estilo en lnea>.
A continuacin, definimos las propiedades del estilo.
SEGUNDO CICLO
Insistimos que esta opcin es la menos flexible y debe empelarse slo en casos
concretos, cuando el estilo no se repita, y no tenga sentido mantenerlo si
borramos esa etiqueta concreta.
78
Crear una regla de estilo

Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, slo a las
que estn contenidas en determinados elementos o una clase.
Para ello, En el Inspector de propiedades CSS, en Regla de destino,

seleccionamos <Nueva regla CSS>.
Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En

cualquier caso nos aparecer la siguiente ventana:
Tipo de selector: el tipo de selector es fundamental, ya que determina a qu

elementos afectar el estilo.
Podemos elegir entre cuatro tipos de selector:
Clase. Es el alias que tomar el estilo, y para que afecte a un elemento,
debemos de aplicarle esa clase.
El nombre de la clase va precedido por un punto, y si no lo ponemos lo har
Dreamweaver.
ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo
identifica de forma nica y concreta. Por tanto, el estilo slo puede afectar a
un elemento en cada pgina, al que tenga ese ID. En el selector, se escribe
precedido por #.
Etiqueta. El estilo afectar a todas las apariciones de la etiqueta HTML
indicada.
Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado
afecta nicamente a los prrafos con la clase resaltado, pero no a los
79
79
80
encabezados con esa clase. Tambin se pueden anidar. Por ejemplo

ul#menu li p afecta slo a los prrafos que estn dentro de un elemento de
una lista con el id menu.
Nombre del selector: esta opcin permite asignar un nombre al selector.
Definir o editar un estilo

Una vez creado, tenemos que definir las propiedades que formarn el estilo.
Para ello, encontramos las opciones bsicas en el Inspector de propiedades
CSS
Observa que la regla que estamos editando es la que aparece en Regla de

destino. Si queremos editar otra regla, hacemos clic en el desplegable y la
seleccionamos, ya que una vez creadas se van aadiendo a la lista.
Si queremos acceder a todas las propiedades, podemos pulsar en el botn
Editar regla. Se abrir la ventana Definicin de regla.
SEGUNDO CICLO
Aqu encontramos todas las propiedades CSS agrupadas por Categoras. Las
veremos ms adelante.
80
Esta ventana es la opcin ms cmoda nada ms crear el estilo, cuando

tenemos que cambiar varias propiedades.
Para pequeos cambios que no podamos hacer desde el Inspector de
propiedades y otras funciones extras, disponemos del panel Estilos CSS.
Podemos acceder a l desde el men Ventanas o pulsando en el botn Panel

CSS.
En la parte superior vemos las propiedades que afectan al elemento, en medio

las reglas aplicadas, y en la parte inferior las propiedades del estilo actual.
Tambin se puede cambiar el nombre del estilo, es mejor que el estilo tenga un
nombre que indique a qu tipo de texto se va a aplicar. Para ello accedemos al
panel Estilos, hacemos clic con el botn derecho sobre el estilo y seleccionamos
la opcin Cambiar nombre... Aparecer un cuadro de dilogo para que
introduzcamos el nuevo nombre como la imagen inferior.
Hojas de estilos exportar estilos

Es frecuente que comencemos creando los estilos en la propia pgina, y
despus al ver que los necesitaremos en otras pginas del sitio, los pasemos a
una hoja de estilo. Dreamweaver nos permite exportar estos estilos fcilmente.
Utilizamos el panel Estilos CSS (Mays + F11). En este caso nos ser ms til
la vista Todo. Agrupados en <style> encontramos los estilos creados en la
pgina.
81
81
82
Seleccionamos las reglas que queramos exportar, y en las propiedades del

panel (el icono de la esquina superior derecha) seleccionamos Mover Reglas
CSS....
Nos aparecer la siguiente ventana:
Encontramos dos opciones para ubicar los estilos:

Hoja de estilos nos permite seleccionar una hoja ya existente. Las reglas se
aadirn a ella.
Una nueva hoja de estilos... crear una hoja nueva para las reglas
exportadas. Deberemos de indicar dnde queremos guardar el archivo,
normalmente en la misma carpeta que las pginas.
Los estilos seleccionados se quitarn de la pgina actual, y se vincular con la
hoja de estilos.
Vincular una hoja de estilos

Si queremos utilizar una hoja de estilos ya existente en nuestra pgina,
debemos vincularla.
SEGUNDO CICLO
Podemos hacerlo desde el men Formato Estilos CSS Adjuntar hoja de

estilos... o desde el panel Estilos CSS. Lo nico que tendremos que hacer es
seleccionar el archivo a vincular. Las hojas de estilo tienen la extensin .css.
82
Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier

archivo del equipo, todos los archivos que utilicemos deben de estar dentro del
sitio.
Hiperenlaces
Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que
son un elemento esencial para cualquier pgina web.
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser
pulsado lleva de una pgina o archivo a otra pgina o archivo.
Es posible asignar un vnculo a un texto, a una imagen, o a parte de una
imagen.
Cuando creemos un enlace, lo que realmente haremos ser crear una etiqueta
<a></a> que es la que en HTML se encarga de definir los enlaces. Esto podrs
observarlo en la barra de estado:
Tipos de referencia
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos.
Estas referencias no se limitan a los enlaces, se comportarn igual cuando
indiquemos la ubicacin de una imagen, de un archivo Flash, de la hoja de
estilo, etc.
Referencia absoluta
Conduce al sitio en el que se encuentra el documento utilizando la ruta
completa del archivo, incluyendo el protocolo http://.
Por ejemplo, http://www.idat.com, o
http://www.misitio.com/seccion2/pgina1.html.
La referencia absoluta es independiente de la ubicacin de la pgina que
contiene el enlace, y ser vlida siempre que no cambie la ubicacin del
archivo enlazado. Es la opcin obligatoria si pretendemos enlazar a archivos
fuera de nuestro sitio (enlaces externos).
Referencia relativa al documento (por defecto)
La ubicacin del archivo enlazado se toma en relacin con la ubicacin del la
pgina. Es decir, partimos de la carpeta en la que se encuentra el
documento.
Si queremos enlazar con una pgina o archivo dentro de la misma carpeta,
no tenemos ms que utilizar su nombre. Por ejemplo, pgina2.htm.
Si est en una subcarpeta de la pgina actual, no tenemos ms que indicar el
nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por
ejemplo imgenes/miimagen.gif.
83
83
84
Si queremos referirnos a carpetas que estn por encima del nivel donde nos
encontramos deberemos utilizar ../
Por ejemplo, imagina que estamos en la siguiente direccin
http://www.misitio.com/pgina/informacin/index.html.
En
esta
pgina
queremos mostrar una imagen que se encuentra en la carpeta
http://www.misitio.com/pgina/secciones/seccion1.html,
cmo
podemos
hacerlo? Fcil. Deberemos llamarla haciendo referencia al nivel superior
(http://www.misito.com/pgina/) para poder ir luego a la carpeta secciones.
El resultado de la ruta sera el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta informacin, subimos
un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el
archivo seccion1.html.
Referencia relativa al sitio
Conduce a un documento situado dentro del mismo sitio que el documento
actual. Tomando como origen la carpeta raz del sitio.
Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra
/.
En el ejemplo anterior si tuvisemos definido como sitio la carpeta
http://www.misitio.com/, un enlace en cualquier pgina del sitio a
http://www.misitio.com/pgina/secciones/seccion1.html se creara como
/pgina/secciones/seccion1.html.
Por tanto, podramos poner ese vnculo en cualquier pgina del sitio y
funcionara independientemente de su ubicacin.
Estos enlaces no funcionarn en el sitio local, a no ser que configuremos un
servidor de pruebas como veremos ms adelante, ya que Windows
interpretar como raz la raz del disco duro.
Marcadores o Puntos de fijacin
Conduce a un punto dentro de un documento, ya sea dentro del actual o de
otro diferente. Para ello, indicamos el nombre del punto de fijacin a
continuacin de la ruta del archivo (relativa o absoluta) separados por una
almohadilla (#).
El formato sera nombre_de_documento.extension#nombre_de_punto.
SEGUNDO CICLO
Si el punto de fijacin est en la propia pgina, basta con indicar nicamente

el punto en el enlace, por ejemplo #apartado2
84
Podemos definir el punto dentro de un documento a travs del men Insertar,

opcin Anclaje con nombre. O podemos utilizar el atributo ID de cualquier
elemento (se puede establecer desde el Inspector de Propiedades HTML). En
cualquier caso, los nombres no deben de estar repetidos en la pgina.
Imgenes
En este tema vamos a ver cmo insertar imgenes en un documento. Tambin
veremos cmo crear algunas imgenes especiales, como es el caso de los
Rollovers y los botnes flash, que ayudan a mejorar la apariencia de nuestras
pginas.
Las imgenes son un aspecto muy importante de la web. Ya sea como
complementos a la informacin o parte del diseo, la hacen mucho ms
atractiva a ojos del visitante. No obstante, no conviene abusar, ya que
aumentarn mucho el tamao final de la web.
Existen una serie de formatos de imagen ms recomendables que otros para ser
introducidos en una pgina web.
Insertar una imagen

Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen.
Despus de esto, ya es posible seleccionar una imagen a travs de la nueva
ventana. Cuando te acostumbres, te ser ms cmodo acceder con la
combinacin de teclas Ctrl + Alt + I.
En Relativa es posible especificar si la imagen ser relativa al documento o a la

carpeta raz del sitio. Es preferible que sea relativa al Documento, ya que si
cambiamos la pgina de carpeta, lo habitual es cambiar tambin sus imgenes.
85
85
86
Lo mismo ocurre cuando se selecciona un documento para crear un vnculo.

La ruta en la que se encuentra la imagen aparecer representada de una u otra
forma en el campo URL de la ventana y en el campo Origen del inspector de
propiedades, dependiendo de si ha sido insertada como relativa a la carpeta
raz del sitio o relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio)
se encuentran la carpeta imgenes y el documento en el que deseamos insertar
la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la
carpeta imgenes.
En el caso de insertar la imagen como relativa al Documento la ruta sera:
imgenes/gestion1.jpg
Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta
sera:
/imgenes/aula_idat.jpg
Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al
documento o a la carpeta raz del sitio.
Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta
apariencia:
Cambiar el tamao de una imagen

Dentro de Dreamweaver puede modificarse el tamao de las imgenes.
SEGUNDO CICLO
Por un lado, podemos cambiar el tamao con el que se ve una imagen, pero
dicho cambio de tamao no se aplica directamente sobre el archivo de
imagen, que conservar el tamao original.
86
Es muy probable que la imagen resultante no sea de buena calidad, en

comparacin de cmo podra quedar modificndola desde un editor externo,
como Fireworks, Photoshop, etc..
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que
representa el icono de Dreamweaver y modificamos su tamao de varias formas
diferentes:
Tamao original
Tamao modificado.
El resultado puede ser ms o menos satisfactorio, dependiendo del navegador

que es el que aplica realmente el reescalado, pero en ocasiones puede resultar
til modificar el tamao de algunas imgenes aunque esto implique perder
calidad.
Existen dos formas de modificar el tamao.

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero
alguno de los recuadros negros que aparecen alrededor de la imagen.
La otra es a travs de inspector de propiedades, cambiando los campos Ancho
o Alto. Estos campos aparecern en el inspector cuando est seleccionada
alguna imagen.
Si estos campos no contienen el tamao original de la imagen, el valor

aparecer resaltado en negrita y aparecer a la derecha una flecha circular que
permite volver al tamao original haciendo clic sobre ella. flecha restablecer
tamao
Como hemos comentado, este cambio de tamao se produce alterando los
atributos de anchura y altura, pero no cambiando el tamao real del archivo, por
lo que el usuario deber descargarse el archivo completo con su tamao
original.
87
87
88
Por ejemplo, si tenemos una fotografa de nuestra cmara de fotos, de un

tamao grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura
(por ejemplo, de 200x150px) esta sera una mala solucin, porque el usuario se
estara descargando el archivo completo, y no una miniatura real que ocupara
mucho menos tamao.
Imagen de sustitucin. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre
ella. Este tipo de imagen suele utilizarse en los mens o en los botnes para
desplazarnos a travs de distintas pginas.
Veamos un ejemplo de rollover.
Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen,
a la opcin Imagen de sustitucin. En la nueva ventana hay que especificar la
imagen original y la de sustitucin.
Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si

se activa, la imagen de sustitucin se carga cuando se carga la pgina, de este
modo se evitan las demoras debidas a la descarga de la imagen cuando llega el
momento de que aparezca.
SEGUNDO CICLO
El Texto alternativo es el texto que aparece al situar el puntero sobre una

imagen, o el que aparecer en lugar de la imagen en el caso de que por algn
motivo sta no pueda ser mostrada en el navegador.
88
El texto alternativo puede asignarse a todas las imgenes, no slo a los

rollovers. Puede hacerse a travs del campo Alt del inspector de propiedades de
la imagen seleccionada.
Tablas
En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras
cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el
tamao del borde.
Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero
gracias a las tablas es posible distribuir el texto en columnas, colocar imgenes
al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran
imposibles de realizar.
La finalidad de las tablas es presentar una serie de datos de forma clara y
organizada, dividindolos en filas y columnas.
Hasta hace poco, y todava hoy es fcil encontrar diseos web basados en
tablas. Esto es debido a la facilidad que nos ofrecen estos elementos para
organizar contenidos y repartir el espacio. No obstante, esta no es una prctica
recomendable, ya que las tablas no fueron pensadas para ello, y si no estn
bien anidadas pueden ocasionar problemas al analizar nuestra web con
herramientas automticas, como los bots que indexan el contenido para los
buscadores. Para maquetar nuestras pginas, lo recomendado es emplear
capas (div) y CSS.
Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y
columnas. A continuacin tienes un ejemplo de tabla.
Insertar una tabla

Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.
En la nueva ventana habr que especificar el nmero de Filas y Columnas que
tendr la tabla, as como el Ancho de la tabla.
El Ancho puede ser definido como Pxeles o como Porcentaje. La diferencia de
uno y otro es que el ancho en Pxeles es siempre el mismo, independientemente
del tamao de la ventana del navegador en la que se visualice la pgina, en
cambio, el ancho en Porcentaje indica el porcentaje de la pgina o del elemento
contenedor) y se ajustar al tamao de la ventana del navegador, esto permite
89
89
90
que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de
pantalla.
Grosor del Borde indica el grosor del borde de la tabla en pxeles, por defecto
se le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrar borde.
Relleno de celda (cellpadding) indica la distancia entre el contenido de las
celdas y los bordes de stas.
SEGUNDO CICLO
Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la

tabla.
90
Tambin se puede establecer si se quiere un encabezado para la tabla, por

ejemplo para indicar el contenido de filas o columnas. Aunque podramos lograr
el mismo diseo con celdas normales y estilos CSS, es recomendable utilizar
encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los

lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de
los mismos a mantener un seguimiento de la informacin de la tabla.
Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo aparecer fuera de
la tabla.
Si tienes el punto de insercin en la tabla y no te aparece esa zona verde
puedes activar su visualizacin seleccionando la opcin Anchos de tablas del
men Tabla o tambin desplegando de la barra de mens, el men Ver
Ayudas visuales Anchos de tabla. De la misma forma se desactiva su
visualizacin.
Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no
tiene un ancho especificado. Si aparecen dos nmeros, el primer nmero
corresponde al ancho especificado en las propiedades de la tabla o columna y
el segundo nmero es el ancho el ancho visual que aparece en la vista de
diseo; por ejemplo en la tabla anterior la primera columna tiene 139 (142), en
las propiedades de la celda tenemos el ancho 139 pxeles pero al contener una
imagen que necesita ms espacio, la columna ocupar realmente 142 pxeles
(ancho visual de la columna tal como aparece en la pantalla).
Formato de tabla
Las propiedades de la tabla se especifican a travs de su inspector de
propiedades. En este caso, se crearn atributos para la tabla. Pero algunos de
estos valores, como el ancho, los podemos especificar mediante CSS.
A travs del inspector de propiedades se pueden

especificaron al insertar la tabla. Al mismo tiempo,
pueden ser el valor Alinear (que permite alinear la
o a la derecha de la pantalla), el borde de la (en
relleno y espaciado de la celda.
91
modificar los valores que se

pueden indicarse otros como
tabla a la izquierda, al centro
Col. borde) o los valores de
91
92
La parte superior del inspector de propiedades nos permite alternar entre las
propiedades HTML, que en este caso sirven para especificar las propiedades
del texto que se insertar dentro de la celda (o celdas) seleccionada, y la
propiedades CSS para definir los estilos.
La parte inferior sirve para especificar valores propios de la celda, como puede
ser el color o imagen de fondo (que es preferible definir con CSS), la alineacin
del contenido en horizontal (Horz.) y vertical (Vert.), especificar su tamao (An.
y Al.) (en Fnd). Si no queremos que el tamao se ajuste al contenido, marcamos
la opcin No aj. y si queremos convertirla en un encabezado, basta con marcar
la opcin Enc.
Capas
Vamos a ver algunas de las caractersticas bsicas sobre las capas, para luego
poder trabajar con ellas y aplicarles algn comportamiento.
Las capas no son ms que unos recuadros, que pueden situarse en cualquier
parte de la pgina (es decir, que tienen una posicin absoluta en la pgina), en
los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y
solaparse entre s, lo que proporciona grandes posibilidades de diseo
Las capas pueden moverse de una posicin a otra
de la ventana pulsando sobre el recuadro blanco, y
sin soltar el ratn, arrastrndola hacia la nueva
posicin.
Tambin pueden ser redimensionadas pulsando
sobre los recuadros negros, y arrastrndolos hasta
conseguir el tamao deseado.
Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes,
animaciones flash, y todos los elementos que puede contener un documento
HTML.
Este icono
sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo
se elimina tambin la capa.
SEGUNDO CICLO
Insertar una capa
92
Las capas pueden insertarse en una pgina a travs del men Insertar, opcin
Objeto de diseo, Div PA (Elemento con Posicin Absoluta).
Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello
hay que seleccionarla primero.
Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando

sobre el icono
correspondiente, pero esto no resulta til cuando existen
muchas capas en un mismo documento, ya que todas las capas tienen asociada
una imagen igual a esta, y no es fcil seleccionar la deseada a la primera.
Cuando existen varias capas en un mismo documento, es preferible
seleccionarlas a travs de la pestaa Elementos PA del panel CSS, que puede
abrirse a travs del men Ventana opcin Elementos PA. Tambin puedes abrir
el panel pulsando F2.
En dicho panel aparecen los nombres de todas las capas que existen en el
documento actual, y para seleccionar una de ellas simplemente hay que pulsar
sobre el nombre en el panel.
Elemento CSS-P es el nombre de la capa. Tambin puede ser cambiado a

travs del panel Elementos PA, haciendo doble clic sobre l.
Izq y Sup indican la distancia en pxeles que hay entre los lmites izquierdo y
superior del documento y la capa.
An y Al indican la anchura y la altura de la capa.
ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin
puede cambiarse a travs del panel Elementos PA. Una capa ser solapada por
aquellas capas cuyo ndice Z sea mayor que el suyo.
Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro
tipos:
Default (visibilidad segn el navegador),
Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se
est mostrando),
Visible (muestra la capa, aunque la pgina no se est viendo) y
93
93
94
Hidden (la capa est oculta).

La visibilidad tambin puede cambiarse a travs del panel Elementos PA,
pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado
indica Hidden.
A travs de Im. fondo y Col puede indicarse una imagen o un color de fondo
para la capa.
Desb. (Desbordamiento) controla cmo aparecen las capas en un navegador
cuando el contenido excede el tamao especificado de la capa.
Visibleindica que el contenido adicional aparece en la capa. La capa se ampla
para darle cabida.
Hidden(oculto) especifica que el contenido adicional no se mostrar en el
navegador.
Scroll(desplazamiento) especifica que el navegador deber aadir barras de
desplazamiento a la capa tanto si se necesitan como si no.
Auto(automtico) hace que el navegador muestre barras de desplazamiento
para la capa cuando sean necesarias (es decir, cuando el contenido de la capa
supere sus lmites).
SEGUNDO CICLO
Comportamientos
94
Los comportamientos son acciones que suceden cuando los usuarios realizan
algn evento sobre un objeto, como puede ser mover el ratn sobre una imagen,
pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc.
Los comportamientos no existen como cdigo HTML, se programan en
JavaScript. Dreamweaver permite insertarlos a travs del panel
95
Comportamientos, por lo que no es necesario escribir ninguna lnea de cdigo

JavaScript para programarlos.
Otros comportamientos que ya has visto son los que se aplican sobre las
imgenes de sustitucin y las barras de navegacin, que ya estn predefinidos,
por lo que no es necesario introducir este conjunto de comportamientos a travs
del panel Comportamientos.
Para validar formularios ya viste algunas caractersticas del panel
Comportamientos. Vamos a recordar las que necesitamos para poder insertar
comportamientos ms tarde.
El panel Comportamientos se puede abrir a travs del men Ventana, opcin
Comportamientos. Tambin pulsando Mays+F3.
En este panel hay que desplegar el botn pulsando sobre l, y en Mostrar
eventos para elegir una versin de la lista de navegadores.
Algunos comportamientos no funcionan para algunos
navegadores, por lo que dependiendo del navegador elegido
aparecern unos u otros comportamientos posibles.
Existen comportamientos que funcionan en Internet Explorer pero no en

Netscape. Debido a que la mayora de usuarios utiliza Internet Explorer, vamos
a seleccionar este navegador. Puedes seleccionar alguna de sus ltimas
versiones: IE 5.5 o IE 6.0.
Una vez elegido un navegador ya no es necesario volver a elegirlo las
siguientes veces que se desee insertar algn comportamiento.
Cuando ya hay
comportamientos.
95
establecido
algn
navegador,
ya
se
pueden
insertar
96
Lo primero que hay que hacer es seleccionar el objeto sobre el que se ha de

aplicar el comportamiento, como puede ser una imagen, un fragmento de texto,
etc.
Al desplegar el botn del panel Comportamientos aparece la opcin Mostrar
eventos para, a travs de la cual se haba elegido el navegador. Tambin
aparece la lista de todas las acciones posibles para el navegador elegido
previamente, de entre las que se puede seleccionar una.
Segn el elemento sobre el que se desee aplicar el comportamiento, se podrn
elegir unas acciones, mientras que otras no.
En este caso la accin Validar formulario no puede seleccionarse porque no
existe ningn formulario en la pgina.
Despus de elegir alguna accin, el comportamiento correspondiente aparece
en el panel Comportamientos. En este caso se han insertado dos
comportamientos.
Como puedes ver, cada comportamiento tiene asociados un evento y una
accin.
Las acciones son las que se han elegido en la lista anterior y el evento indica
cundo se debe de realizar la accin.
Recuerda: Los comportamientos son acciones que suceden cuando
los usuarios realizan algn evento sobre un objeto, como puede ser
mover el ratn sobre una imagen, pulsar sobre un texto, hacer doble
clic sobre un mapa de imagen, etc.
Los comportamientos no existen como cdigo HTML, se programan en
JavaScript.
Dreamweaver
permite
insertarlos
a
travs
del
panel
Comportamientos, por lo que no es necesario escribir ninguna lnea de cdigo
JavaScript para programarlos.
Mostrar-ocultar elementos
SEGUNDO CICLO
Uno de los comportamientos ms habitual e interesante es el de MostrarOcultar elementos. Lo ms comn es emplearlo con capas, que han de haber
sido creadas antes, ero podemos hacerlo con cualquier elemento que tenga un
ID asignado. Lo que hace este comportamiento es alternar entre las
propiedades de visibilidad visible y hidden.
96
Al principio del tema tenamos un ejemplo de este tipo. Vamos a ver qu

eventos y acciones hay que establecer para que se produzca dicho
comportamiento.
Despus de seleccionar la e elemento que producir el evento (en se ejemplo,
la imagen del gatito) hay que seleccionar una accin de la lista, pulsando sobre
el botn . En este caso la accin tiene que ser la de Mostrar-Ocultar elementos.
Abrir nueva ventana del navegador

Este comportamiento, aunque a primera vista creas que no sirva para mucho, te
ayudar a crear enlaces mucho ms personalizados.
Asociaremos este comportamiento normalmente a un enlace, o como mucho a
una imagen o un botn. Pero siempre lo haremos asociado al evento onClick de
estos elementos.
Otra opcin es asociarlo al evento onLoad del body para que cuando se cargue
el documento abra al mismo tiempo una nueva ventana que dirigiremos a la
URL que queramos.
En esencia este comportamiento es un creador de pop-ups o ventanas
emergentes, as que si el usuario dispone de un bloqueador es posible que no
se pueda llevar a cabo la apertura de la nueva ventana. De todas formas, no es
nada recomendable llenar nuestro sitio de estos elementos, salvo si realmente
aportan informacin importante.
Pero veamos qu debemos hacer para poder abrir una ventana de este modo.
Primero seleccionaremos elemento asociado al comportamiento, si lo que
queremos es que se asocie al body de la pgina haremos clic en una rea vaca
del documento.
Luego abre el panel Comportamientos (Mayus + F4) y pulsa el botn aadir
comportamiento para desplegar la lista.
97
97
98
Qu son las plantillas?

Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta
que las pginas deben seguir un formato uniforme.
La mayora de nosotros solemos hacer copias de los documentos ya creados, y
trabajar sobre estas copias, modificando simplemente su contenido. Esta es la
forma ms sencilla de tener pginas con una estructura basada en la estructura
de otras ya creadas previamente.
Las plantillas son una especie de copia de la pgina en la que van a estar
basadas el resto de pginas del sitio web, pero que incluyen la posibilidad de
establecer unas zonas editables y otras zonas que sern fijas, que no podrn
ser modificadas.
No es posible modificar las propiedades de una pgina que est
basada en una plantilla, a excepcin del ttulo. Cuando se desea que
existan pginas con, por ejemplo, diferente color de fondo, es
necesario crear plantillas diferentes con los distintos colores, y basar
las pginas en una u otra plantilla, segn el color de fondo que se
desee para cada una.
Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las

pginas basadas en ella.
Las plantillas son archivos con la extensin DWT que se guardan en el sitio
web, dentro de una carpeta llamada Templates.
Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente.
Una forma de crear una plantilla desde cero es a travs del panel Archivos,
pestaa Activos.
La pestaa Activos se puede abrir a travs del men Ventana, opcin Activos.
Tambin pulsando F11.
Una vez abierto el panel hay que seleccionar el botn
con las plantillas.
SEGUNDO CICLO
Los botnes inferiores del panel Activos

panel Estilos CSS.
98
, para poder trabajar
son similares a los del
99
El nico botn diferente es el primero, que en este caso sirve para actualizar la
lista, el resto permiten crear una nueva plantilla, editar una plantilla
seleccionada en la lista, o eliminarla.
Para crear una nueva plantilla hay que pulsar sobre el botn
(Si este botn
no est activado, pulsa con el botn derecho del ratn y elige Nueva Plantilla).
Cuando se pulsa ese botn aparece un nuevo documento en la lista de
plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre l.
Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn
Paraeliminar una plantilla la seleccionamos de la lista y pulsamos el botn
.
.
Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates,

que se crea automticamente.
Para crear una plantilla a partir de un
archivo existente es necesario abrir dicho
archivo, y despus guardarlo como
plantilla a travs del men Archivo, opcin
Guardar como plantilla.
Cuando se pulsa dicha opcin, aparece
una ventana como la de la derecha.
En ella es necesario especificar el nombre
con el que va a ser guardada la plantilla, a
travs del campo Guardar como, y elegir,
de entre la lista de sitios, el Sitio: en el que
se va a guardar.
99
100
Establecer regiones editables en una plantilla

Todos los elementos de una plantilla estn bloqueados por defecto, no se
pueden modificar.
Es necesario establecer las zonas que s podrn ser editadas en las pginas
que se basen en dicha plantilla.
Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla
es a travs del panel Activos, pulsando dos veces sobre ella, o estando
seleccionada pulsando sobre el botn
como ya hemos visto.
Una vez abierta la plantilla es posible establecer sus propiedades a travs de la

ventana Propiedades de la pgina.
Como recordars, para abrir esta ventana puedes:
Pulsar la combinacin de teclas Ctrl+J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la
pgina.
Pulsar con el botn derecho sobre el documento abierto en Dreamweaver, y
en el men contextual que aparece seleccionar la opcin Propiedades de la
pgina.
Para insertar una regin editable hay que

situar el puntero en el lugar en el que se
desea insertar, y despus dirigirse al
men Insertar, Objetos de plantilla,
opcin Regin editable, o pulsar la
combinacin de teclas Ctrl+Alt+V.
En la nueva ventana hay que establecer
un Nombre para la regin editable.
Dentro de la plantilla no pueden existir dos regiones editables con el mismo
nombre.
SEGUNDO CICLO
Posteriormente puede modificarse el nombre a travs del inspector de

propiedades de la regin editable.
100
La zonas editables aparecen representadas en Dreamweaver como un

recuadro con una etiqueta de color turquesa. En la etiqueta aparece el nombre
de la zona editable.
Dentro del recuadro es posible insertar objetos, que aparecern por defecto en
aquellos documentos que se basen en la plantilla. Estos objetos, al estar dentro
de la zona editable, podrn ser modificados en las pginas.
Todos los objetos que se encuentren fuera de estas zonas editables aparecern
tambin en las pginas, pero no podrn ser modificados.
En este caso, la imagen con el logotipo de aulaclic aparecera en todas las
pginas que se basaran en esta plantilla, mientras que todo lo que insertramos
dentro de la zona editable FormularioCorreoElectronico podra ser modificado.
SPRY Y formularios
Ahora veremos qu puede hacer Dreamweaver por nuestros formularios.
Encontrars las opciones que utilizaremos bajo el men Insertar Spry o en la
barra Insertar, pestaa Spry.
101
101
102
La primera opcin que veremos es la insercin de campos de textos dinmicos

en nuestros formularios. Utilizando la opcin Insertar Spry Campo de texto
de validacin de Spry podremos insertar un campo de texto que valide los
valores que se introducen en l:
Introduce tu nombre:
Se necesita un valor.Formato no vlido.
Cuando insertamos este tipo de controles en nuestros formularios podremos ver

lo siguiente en la vista de Diseo:
El objeto de campo de texto es exactamente igual al que vimos en la unidad de

formularios. Haciendo clic en la etiqueta azul Campo de texto de Spry podrs
ver las opciones de validacin en el panel Propiedades:
En el desplegable Tipo podemos seleccionar el tipo de valor que se va a

introducir. En principio, Spry tiene predefinidos bastantes tipos como telfono,
nmero de seguridad social, tarjetas de crdito, fechas, correos electrnicos,
etc... Solamente ser necesario seleccionarlos y elegir el formato en el
desplegable Formato.
De este modo la validacin ya viene programada automticamente y no es
necesario aadir mucho ms.
SEGUNDO CICLO
En el caso de que queramos aadir una validacin que no exite en el

desplegable Tipo deberemos seleccionar Personalizado. Para validar la
introduccin deberemos,entonces, introducir un patrn contra el que se
comparar y se evaluar si es correcto o no. Para ello escribiremos en el campo
Patrn una secuencia de caracteres que imite el texto que buscamos.
102
Por ejemplo, si queremos que se introduzca un nmero con 5 dgitos

escribiremos 00000. Fcil, verdad?.
En este caso deberemos activar la casilla Aplicar patrn para que Dreamweaver
sepa que tiene que realizar la validacin utilizando el patrn que hemos
indicado.
En cualquier caso podemos escribir en Sugerencia una ayuda para que el
usuario sepa exactamente qu debe escribir. Ten en cuenta que al validar un
campo estamos obligando a que se escriba determinado tipo de datos por o
tanto ser necesario hacerselo saber de alguna forma.
El resto de opciones son muy sencillas. Valor min y Valor mx establecen un
rango de valores al cual debe pertenecer el valor introducido. Con Car min y Car
mx podemos indicar cuantos caracteres minimos y mximos admite la caja de
texto.
Activa la opcin Obligatorio si quieres que el campo no pueda dejarse en
blanco.
Luego encontraremos las opciones de validacin, es decir, cuando queremos
que Spry compare lo que se ha escrito y lo considere correcto o errneo. El
valor Enviar estar siempre marcado por defecto, esto es, cada vez que se
enve el formulario se comprobar que los datos introducidos son correctos.
Aunque tambin es posible aadir dos momentos ms donde se evaluar el
contenido. Desenfocar ejecuta la evaluacin cuando se abandona el cuadro de
texto, y Cambiar se ejecuta cada vez que se escribe cualquier caracter en la
caja.
Puedes marcar cualquiera de estas opciones, pero ten en cuenta que por
ejemplo Cambiar puede resultar un poco engorroso pues mostrar un error cada
vez que escribamos hasta que se alcance el patrn correcto. De todas formas te
recomendamos que pruebes cada una de las opciones y te quedes con la que
ms se ajuste a tus necesidades.
Una vez definido nuestro campo de validacin deberemos configurar los
mensajes de error que se mostrarn. Dependiendo del tipo de control que
utilicemos (como veremos ms adelante) el tipo de error puede ser diferente,
pero su tratamiento es exactamente el mismo.
Veremos cmo tratarlos tomando como ejemplo la validacin de campos de
texto que acabamos de ver.
En el panel Propiedades podrs encontrar el desplegable Estados de vista
previa:
103
103
104
Desde esta opcin puedes pasar a la visualizacin de cada uno de los estados
de error existentes:
En la imagen el primer estado corresponde a la vista precia de Obligatorio, el

segundo a Formato no valido.
En cualquiera de los casos podremos editar el mensaje de error, cambiar su
apariencia mediante estilos desde los paneles Propiedades y CSS e incluso
colocarlos donde mejor nos convenga.
Recuerda que cada uno de los estados es independiente del resto, por lo que
ser necesario que edites cada uno de ellos si quieres que se muestren de un
modo personalizado.
Validacin de campos desplegables

Otra de las opciones que nos proporciona Spry es la validacin de controles
desplegables, para ello deberemos hacer clic en Insertar Spry Seleccin
de validacin de Spry. De este modo aadiremos un control de lista desplegable
tal y como vimos en la unidad de formularios.
La utilidad de esta herramienta es la posibilidad de controlar los valores que se
seleccionan:
Selecciona un elemento:
valor2
Por favor, selecciona una opcin.

El valor2 no puede ser seleccionado.
SEGUNDO CICLO
En este caso las opciones que se presentan al seleccionar el elemento Spry son
las siguientes:
104
En este caso las opciones comunes son los Estados de vista previa y los de
validacin que son iguales a los del campo de texto. Aunque en el caso de las
listas desplegables es aconsejable usar el valor Cambiar para que se evale
cada vez que se selecciona un valor.
Las opciones de validacin tienen mucho que ver en este caso con el contenido
de la lista de valores del desplegable en s:
Observa que si marcamos la opcin de No permitir valores en blanco al

seleccionar el valor2 (en la imagen) se ejecutara el mensaje de error
Obligatorio.
En el caso de No permitir Valor no vlido (-1, aunque puedes modificar el valor
para que tome el que t quieras) al seleccionar -- elige una opcin -- saltara el
error No vlido.
Multimedia
Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo
insertar una animacin Flash, un sonido y un vdeo, que son los ms
empleados.
Peliculas en flash
Las pelculas Flash son animaciones, cuyo archivo tiene la extensin SWF. Es
frecuente verlas en las pginas iniciales de los sitios web, a modo de
presentacin hacia los usuarios, como banners publicitarios, como botnes...
Flash es el elemento multimedia ms empleado en las pginas web.
Estas pelculas pueden crearse mediante el programa Flash tambin de Adobe.
Para poder ser visualizado en el navegador, y necesitan que el usuario tenga
instalado el plug-in de Flash Player. Su instalacin es muy sencilla y
normalmente ya viene con el navegador.
105
105
106
Las pelculas Flash pueden insertarse en una pgina a travs del men
Insertar Media, opcin SWF, o pulsando Ctrl + Alt + F.
Vdeos
En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay
que tener en cuenta que los vdeos suelen ocupar mucho espacio en disco, y
por lo tanto, precisan de mucho tiempo para descargarse.
En este apartado nos referimos a inserta vdeo de un archivo alojado en nuestro
sitio. No a mostrar vdeos de sitios especializados, como youTube.
Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el
MOV.
Para insertar un archivo de vdeo en un documento tienes que dirigirte al men
Insertar, Meda, opcin Plug-in.
SEGUNDO CICLO
Puedes ver el vdeo (si tienes el plugin adecuado) a continuacin:
106
Maquetar una pgina web

La maquetacin es la distribucin de los elementos en nuestra pgina. Piensa
en una pgina web cualquiera. Seguro que distingues algunos elementos
claramente diferenciados, como un encabezado, columnas, y un pie de pgina.
Hace unos aos, la maquetacin de las pginas web se realizaba utilizando
tablas (<table>). Una vez entendido este proceso poda resultar sencillo, aunque
si no se dominaban las tablas, poda convertirse en algo tedioso. El problema de
las tablas es que generaban un pgina muy encorsetada, y el cdigo se volva
complejo de entender. Adems, algunos buscadores encontraban problemas al
analizar la estructura de la pgina.
Actualmente, la maquetacin con tablas ha cado en desuso, y se realiza
utilizando capas (<div>), tambin llamadas divisiones o contenedores. La
colocacin de las capas en la pgina se realiza a travs de CSS. Esto permite,
por ejemplo, que podamos pasar de un diseo con un men lateral a otro con el
men en la parte superior, slo cambiando la hoja de estilos.
En esta unidad veremos las tcnicas de maquetacin ms comunes, aunque hay
que decir que existen diversas formas de conseguir una misma maquetacin.
Como hemos dicho, emplearemos sobre todo etiquetas del tipo (<div>). Para
crear un div alrededor de contenido ya existente desde Dreamweaver,
seleccionamos la parte de la pgina y en el men Insertar, opcin Objeto de
diseo, elegimos Etiqueta Div.
Tamao
Por lo general, la maquetacin se realiza sobre elementos en bloque.
Normalmente divisiones, pero tambin lo podemos hacer con prrafos, listas, o
con el propio body. Por defecto los elementos de bloque ocupan todo el ancho
del elemento que lo contiene, y su alto se ajusta al contenido.
Lados y tamao
107
107
108
Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su
tamao: ancho (width) y alto (height).
Los valores para estas medidas, pueden ser expresados en las medidas
habituales:
Tamaos absolutos, utilizando px, cm, etc...
Tamaos relativos al elemento que lo contiene, utilizando porcentajes (%).
Tamaos relativos a la fuente, utilizando em.
El valor auto es el valor por defecto. Por ejemplo, un prrafo, por defecto,
tienen un ancho del 100% y un alto ajustado al contenido.
En algunos elementos, como los Divs PA, nos permiten cambiar su tamao
desde el Inspector de propiedades. Pero en la mayora, tendremos que hacerlo
desde el cdigo o desde las propiedades CSS de Cuadro y Posicionamiento.
Desbordamiento
Al utilizar un elemento de bloque, como una capa, un prrafo, el body, etc... el
tamao depende del contenido. Pero al definir un tamao fijo nos puede surgir
un problema: qu pasa si el contenido del elemento (texto, imgenes, etc...) no
cabe? Entonces se produce un desbordamiento, que podemos controlar desde
el estilo con la propiedad overflow. Podemos darle estos valores:
visible. Es la opcin por omisin. El contenido sale de elemento, y puede que
se solape con los elementos que haya a continuacin.
hidden. Lo que no quepa en el elemento, queda oculto.
auto. Muestra las barras de desplazamiento en el elemento cuando sea
necesario.
SEGUNDO CICLO
scroll. Siempre muestra las barras de desplazamiento.
108
En el editor de propiedades CSS, encontramos el desbordamiento en la

categora Posicin:
Sitios remotos
Esta unidad est dedicada a los Sitios Remotos, veremos cmo crearlos y cmo
utilizarlos.
Definir un sitio remoto significa establecer una configuracin de modo que
Dreamweaver sea capaz de comunicarse directamente con un servidor en
Internet (por eso se llama remoto) y as poder trabajar a la vez con tus archivos
en el sitio local, es decir, la copia que tienes en tu computador, y en el sitio
remoto, colgados en el servidor, en Internet.
El modo en el que veremos que el programa se comunica con tu servidor ser
FTP, ya que es prcticamente el ms utilizado y muy pocos utilizan otras
alternativas.
Lgicamente, antes de realizar estos pasos, deberemos de haber contratado un
sitio, o habernos registrado en uno gratuito.
109
109
110
Configurar un Sitio Remoto

Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las
opciones y que Dreamweaver se pueda conectar con nuestro servidor.
Para ello deberemos modificar la especificacin que creamos en su da del sitio
con el que estamos trabajando.
As que haz clic en el men Sitio y selecciona Administrar sitios.
Selecciona el sitio con el que quieras establecer comunicacin remota (o crea

uno nuevo para el caso) y pulsa Editar.
Vers que se abre el cuadro de dilogo de Definicin del Sitio.
La categora que buscamos es Servidores, en el listado de la izquierda.
SEGUNDO CICLO
Para configurar un nuevo servidor, pulsa el icono +.
110
Ahora en el desplegable Conectar usando selecciona el mtodo de acceso que

deber utilizar Dreamweaver para conectarse con el servidor. Como ya hemos
dicho nosotros explicaremos la opcin FTP.
El Nombre de servidor es el nombre que le podemos asignar para identificarlo.

Aqu debers rellenar los datos que te facilit el servicio de hosting que
contrataste. Si no recuerdas los datos o has perdido el correo electrnico que
seguramente te enviaron, pdeles de nuevo la informacin.
Los datos que necesitas son los siguientes:

Direccin FTP o host es la direccin a la que se dirigir Dreamweaver para
conectarse a tu servidor ser del tipo ftp.servidor.com o tambin podrs
encontrar algunas que estn formadas en forma de direccin IP (como por
ejemplo, 192.186.1.1)
En Nombre de usuario y Contrasea escribe el nombre de usuario y el
password para poder conectar con el servidor. Marca la casilla Guardar si
quieres que el programa recuerde la contrasea.
Una vez introducidos estos datos puedes pulsar el botn Prueba para ver si
son correctos y Dreamweaver puede crear una conexin con el servidor
remoto.
En el campo Directorio raz podremos establecer una carpeta contenida en
el servidor donde queramos subir las pginas. Por ejemplo, es comn que por
FTP podamos acceder a muchas carpetas del servidor, pero hay una en
concreto en la que hemos de ubicar las pginas. Imagina que dentro de la
estructura de carpetas del servidor remoto tienes una que se llama pgina y
dentro de esta otra que se llame principal. Podramos indicar la ruta
111
111
112
pgina/principal para que los archivos se subiesen directamente a esa

ubicacin.
En el campo URL Web podemos introducir la direccin web de la raz del
sitio, y as probar nuestras pginas dinmicas.
El panel archivos
Desde el panel Archivos seremos capaces de controlar nuestro sitio local y
remoto de forma fcil y rpida.
En este apartado veremos qu pasos debemos seguir para completar unas
cuantas acciones que nos sern bastante tiles.
Su uso es bastante sencillo. Observa los dos desplegables de la parte superior.

El primero te permite seleccionar el sitio con el que estamos trabajando. El
segundo te permite cambiar la vista de ese sitio. Vista remota
SEGUNDO CICLO
Esta ltima opcin es muy til para ver el contenido que se encuentra subido en
Internet. Una vez hayas configurado las opciones del Servidor Remoto podrs
desplegar esta opcin y seleccionar Vista remota, se mostrarn todos los
archivos que en ese momento se encuentran en el servidor.
112
Ahora veremos para qu sirven los botnes:

El botn Conectar conectar te permitir establecer una conexin con el
servidor. De forma predeterminada Dreamweaver se desconecta del servidor
cada 30 minutos.
El botn Actualizar actualiza las listas de las vistas local y remota. As
podrs ver el contenido exacto en cada momento de cada uno de los sitios,
se utiliza sobre todo cuando varias personas tienen acceso al sitio remoto
para cambiar las pginas.
Utiliza el botn Obtener para descargar al servidor local archivos que hayas
seleccionado en el panel Archivos en la vista remota. Estos archivos se
copiarn en tu sitio local, y en caso de ya existir se sobreescribirn.
El botn Colocar acta de forma contraria. Sube los archivos seleccionados
en la vista local al servidor, se copiarn y si existen se sobreescribirn.
Luego los dos siguientes botnes podrn ser utilizados si has activado la
Proteccin del sitio en el cuadro de dilogo de opciones Avanzadas al
configurar el sitio remoto.
Utiliza el botn Proteger para realizar la accin anterior de Obtener pero
protegiendo el archivo que se encuentra en el servidor convirtindolo en slo
lectura. De esta forma si alguien con acceso al servidor intenta modificar el
archivo le ser imposible hasta que lo desprotejas.
Del mismo modo, el botn Desproteger acta del mismo modo que el botn
Colocar pero cuando sube el archivo al servidor lo desprotege para que
pueda ser modificado por otras personas.
Sincronizar Sitios
sta es una de las opciones ms tiles en cuanto a Sitios Remotos.
Esta opcin permite hacer un estudio de los archivos situados en el sitio local y
remoto y establecer el modo en el que se debern copiar, borrar y sobreescribir
los archivos para conseguir un objetivo: al final de la sincronizacin, los
archivos en el sitio remoto y el sitio local deben ser iguales.
Para realizar una sincronizacin haz clic derecho sobre cualquier zona en el
panel Archivos y selecciona la opcin Sincronizar....
113
113
SEGUNDO CICLO
114
114
Validaciones y Efectos con

JavaScript
Introduccin a JavaScript
Javascript es un cdigo interpretado cuya finalidad es darle mayor interactividad
a nuestras pginas Web.
Introducir JavaScript en el cdigo HTML.- Se puede poner el cdigo SCRIPT
en cualquier lugar del documento adems de ponerlo varias veces pero se
recomienda que se haga solo una vez y que se haga entre las cabeceras HEAD:
<head>
<SCRIPT LANGUAGE=LENGUAJE SRC= URL>
</SCRIPT>
</head>
Donde lenguaje viene ser el lenguaje que se usara para el script
(Jscript,Vbscript,etc) y URL es la fuente donde se encuentran las funciones de
los SCRIPTS (por ejemplo <script language=javascript src=fuente.js>)
Nota: JSCRIPT es sensible a las maysculas y minsculas adems
de que cada sentencia acaba con un punto y coma(Por ejemplo no es
lo mismo la variable Cad que CAD o que cad).
Comentarios .- Los comentarios se representa con // para comentar una lnea y
con /* y */ cuando es un bloque de lneas (en vbscript es y en HTML es <! y
)
Ejemplo :
<SCRIPT LANGUAGE=javascript>
<!-function envia(){
115
115
116
//esto es para comentar una lnea

/* esto comenta
un bloque de lneas*/
//se recomienda el comentario de HTML en el SCRIPT si en caso
el navegador no soporta cdigo JavaScript
//
}
</SCRIPT>
Funciones de usuario. Toda la programacin en Jscript esta basada en
funciones para declarar funciones nosotros debemos hacer lo siguiente:
<SCRIPT LANGUAGE=javascript>
function nombre(param1,param2,...){
//cdigo
}
</SCRIPT>
Donde nombre es el nombre de la funcin y param1 es el parmetro que recibe.
No necesariamente se recibe parmetros.
Ejemplo: Haga una funcin que reciba 2 parmetros y retorne la suma de ambos
function suma(n1,n2){
return n1+n2;
}
Como llamar a una funcin en Jscript.- se llama desde algn objeto que este en
la pgina dependiendo en que momento se quiere ver el resultado(Evento)
Ejemplo: <input type=button name=calcular onclick=suma()> aqu se esta
llamando a la funcin suma la hacer clic el ese botn.
Tipos de Datos en Jscript. En JavaScript cuando se declara variables no hace
falta poner el tipo de dato que va a guardar automticamente toma el valor del
dato que guarda
Por ejemplo:
Xvar = 10 //es de tipo entero
SEGUNDO CICLO
Xvar=10 // es de tipo cadena
116
Xvar = true // es de tipo lgico

Xvar = 10.23 // es de tipo real
Para declarar variables en Jscript se pone la palabra reservada var y el nombre
de la variable.
Ejemplo: var cod,nom; // se esta declarando 2 variables llamadas cod y nom.

Conversin de Datos.
parseInt(valor) .- es una funcin que convierte a entero un valor
Ejemplo: a=13 ;a = parseInt(a);//a ser = 13
parseFloat(valor).- es una funcin que convierte un valor a real o flota
Ejemplo: a=12.45; a= parseFloat(a);// a ser = 12.45
isNaN(valor).- Es una funcin que devuelve si una expresin es numrica o no
(true o false)
eval(cadena) .- La funcin eval ejecuta una cadena.
Ejemplo : eval(alert(hola));// noten que el alert esta entre por lo tanto es
una cadena el eval lo ejecuta al final saldr un mensaje donde dice Hola.
Ejercicio: Ingresar un nmero y visualizar el

doble y su mitad
Lo primero que hay que hacer es disear la pgina HTML con un texto donde se
ingrese el numero y dos textos mas para ver el doble y la mitad (Revisar en el
capitulo anterior como crear formularios)
El cdigo script seria el siguiente:
<script language="JavaScript">
//Aqu esta la funcin que calculara el doble y la mitad
function calcular(){
var num;
/*En la variable num se almacena el contenido de la caja de texto txtnum
se pone form1 por queAs se llama el formulario form1.La funcin parseInt
transforma el valor a entero
NOTA:para acceder a cualquier objeto del formulario se pone el nombre
del formulario el nombre del control y su propiedad*/
num = parseInt(form1.txtnum.value);
form1.txtdoble.value = num * 2;
form1.txtmitad.value = num / 2;
}
</script>
Donde txtnum ,txtdoble y txtmitad son los nombres de los textos que se crearon
Para llamar a la funcin creada seria as:
117
117
118
<input name="cmdcalcular" type="button" value="Calcular"

onClick="calcular();">
Se entiende que hay un botn llamado cmdcalcular y cajas de texto llamados
txtdoble y txtmitad.Ahora si queremos que las cajas de texto estn desactivadas
seria de la siguiente manera:
<input name="txtmitad" type="text" id="txtmitad" readonly="true">
Noten la propiedad readonly.
Operadores en JavaScript
Operadores aritmticos.- En todo lenguaje de programacin existen un
conjunto de operadores que permiten realizar operaciones con los datos. Nos
referimos a operaciones aritmticas, comparaciones, operaciones lgicas y
otras operaciones (por ejemplo, concatenacin de cadenas, bsqueda de
patrones, etc.).
SEGUNDO CICLO
En JavaScript existen los siguientes operadores aritmticos:
118
Operador
Descripcin
Asigna el valor del operando de la

izquierda al operando de la derecha
+=
Suma el operando de la izquierda al de

la derecha y asigna el resultado al
operando de la derecha
-=
Resta al operando de la izquierda el de

la derecha y asigna el valor al operando
de la derecha
*=
Multiplica el operando de la derecha por

el de la izquierda y asigna el valor al
/=
Divide el operando de la izquierda por el

de la derecha y asigna el valor al
%=
Divide el operando de la izquierda por el

de la derecha y asigna el valor del resto
de la divisin al operando de la derecha
Operador
Descripcin
++x
Incrementa x en una unidad y devuelve

el valor
x++
Devuelve el valor de x y
incrementado en una unidad
-x
Devuelve x negado
lo
deja
Operadores lgicos
Los operadores lgicos son los operadores del lgebra de Bull o bolanos.
Operador
Descripcin
&&
Y lgico (devuelve verdadero si los dos

operandos son verdaderos, y falso en
caso contrario)
||
O lgico (devuelve verdadero si uno de

los dos operandos o ambos son
verdaderos, y falso en caso contrario)
No lgico (devuelve verdadero si el

operando es falso, y falso si es
verdadero)
Operadores de comparacin
Los operadores de comparacin devuelven siempre verdadero (true) o falso
(false). Este tipo de operadores se utilizan con gran frecuencia en todos los
lenguajes de programacin, para realizar una accin u otra en funcin de que
cierta condicin sea verdadera o falsa.
119
119
120
Operador
Descripcin
==
Devuelve
verdadero
operandos son iguales
si
los
dos
!=
Devuelve
verdadero
si
operadores son distintos
los
dos
>
Devuelve verdadero si el primer

operando es mayor que el segundo
<

operando es menor que el segundo
>=

operando es mayor o igual que el
segundo
<=

operando es menor o igual que el
segundo
Sentencias condicionales
LA SENTENCIA IF.
La sentencia if tiene la forma:
if ( Condicin ){
}else{
}
Ejemplo: tener 2 nmeros y mostrar el mayor
Var num1,num2
If(num1>num2){
alert(num1);
}else{
SEGUNDO CICLO
alert(num2);
120
LA SENTENCIA SWITCH.
Hace que se seleccione un grupo de sentencias entre varias posibles. Su
sintaxis es:
switch ( Expresin ){
case Valor 1: Instruccin o bloque de instrucciones;[break;]
case Valor 2: Instruccin o bloque de instrucciones;[break;]
case Valor 3: Instruccin o bloque de instrucciones;[break;] ...
case Valor N: Instruccin o bloque de instrucciones;[break;]
[default:]Instruccin o bloque de instrucciones;
}
BUCLES (FOR, WHILE)

La sentencia while.
La sentencia while tiene la forma:
while ( Condicin ){
}
do{
}while(condicion);
Ejemplo: Mostrar los pares del 1 al 10

num=0
do{
document.write(num);
num+=2;
}while(num<=10);
num=0
while(num<=10){
document.write(num);
num+=2;
}
121
121
122
LA SENTENCIA FOR.
For(ini;condicion;incremento){
}
Ejemplo: Mostrar los nmeros del 1 al 10
For(i=1;i<=10;i++){
document.write(i);
}
Clasificacin de eventos
Los eventos que vemos a continuacin se encuentran en la versin 1.1 de
JavaScript.
onAbort
Se origina cuando se cancela la carga de una imagen.
onBlur
Se produce al deseleccionar un campo de edicin. Se aplica a la marca INPUT
TYPE="text" y a la marca TEXTAREA. En la versin 1.2 de JavaScript tambin
se aplica a la marca LAYER.
onClick
Se produce cuando se hace clic en un elemento del formulario o un enlace
hipertexto. Se aplica tanto a la marca INPUT TYPE="button,checkbox,radio"
como a la marca .
onChange
Se origina al cambiar en contenido de un campo o seleccin. Se aplica a las
marcas INPUT TYPE="text", SELECT y TEXTAREA.
onError
Se produce cuando se obtiene un error al cargar el documento HTML. Se aplica
sobre las marcas BODY y FRAMESET.
SEGUNDO CICLO
onFocus
122
Se produce cuando se Activa un campo de edicin. Se aplica a la marca INPUT

TYPE="text" y a la marca TEXTAREA. En la versin 1.2 tambin se aplica a la
marca LAYER.
onLoad
Se origina cuando se carga el documento HTML. Se aplica a las marcas BODY
y FRAMESET. En la versin 1.2 tambin se aplica a marca LAYER.
onMouseOut
Se produce cuando alejamos el mouse de un enlace de hipertexto. Se aplica
sobre las marcas A AREA. En JavaScript 1.2 tambin se aplica a la marca
LAYER.
onMouseOver
Se produce cuando desplaza el mouse sobre los enlaces de hipertexto. Se
aplica sobre la marca A y AREA. En la versin 1.2 de JavaScript tambin se
aplica a la marca LAYER.
onReset
Se produce cuando se resetea el formulario. Se aplica sobre la marca FORM.
onSelect
Se produce al seleccionar un campo de edicin. Se aplica sobre las marcas
INPUT TYPE="text" y TEXTAREA.
onSubmit
Se origina al enviar el formulario.Se aplica sobre al marca FORM.
onUnload
Se origina al abandonar el documento HTML. Se aplica sobre las marcas BODY
y FRAMESET. En la versin 1.2 de JavaScript tambin se aplica a la marca
LAYER.
Para la versin 1.2 de JavaScript se ha definido nuevos enventos que veremos
en la siguiente lista.
onDblClick
Se produce cuando se hace doble clic en un formulario o enlace hipertexto. Se
aplica tanto a la marca INPUT TYPE="button,checkbox,radio" como a la marca
onDragDrop
Se produce cuando se vuelca (drop) un objeto sobre la ventana del navegador.
onKeyDown
Se produce cuando se pulsa una tecla.
onKeyPress
Se produce cuando se tiene una tecla pulsada.
onMouseDown
Se origina al pulsar algn botn del mouse.
OnMouseMove
Se origina al mover el cursor.
onMove
123
123
124
Se produce cuando se mueve una ventana o frame.

onResize
Se produce al cambiar el tamao de una ventana o frame.
Ejemplo de gestin de eventos.
El ejemplo siguiente ilustra diferentes eventos mostrando a cada evento
detectado un mensaje informativo al usuario:
<HEAD>
<SCRIPT>
<!-function Muestra(mensaje, evento){
alert(mensaje + "\n" + evento);
}
function Cerrar(){
window.close();
}
//-->
</SCRIPT>
</HEAD>
<a name="arriba"></a>
<BODY
onLoad="Muestra('documento cargado','onLoad');"
onUnload="Muestra('Adios','onUnload');">
<H3 align=center> Gestin de Eventos </H3>

<A href=""
onClick="Muestra('Click sobre un link','onClick');"
onMouseOver="Muestra('Colocado sobre el link','onMouseOver');"
onMouseOut="Muestra('Te alejas del link','onMouseOut');">
Esto es un link</A>
<p>
<A href="#arriba"
onClick="Muestra('Click sobre un link','onClick');" >
SEGUNDO CICLO
Esto es otro link</A>
124
<FORM METHOD=POST ACTION=""

onSumit="Muestra('Enva le formulario','onSumit');"
onReset="Muestra('Restaura valores del formulario','onReset');">
<TABLE>
<TR>
<TD>Pulse sobre este botn
<TD>
<INPUT TYPE="checkbox"
onClick="Muestra('Has pulsado','onClick');">
<TD>Campo de edicin
<TD>
<INPUT TYPE="text" SIZE=14
onFocus="Muestra('Escriba','onFocus');"
onBlur="Muestra('Has escrito','onBlur');"
onChange="Muestra('Has escrito','onChange');">
<TR>
<TD>Selecciones
<TD>
<SELECT Name="Seleccion"
onChange="Muestra('Has elegido','onChange')">
<OPTION VALUE=Option1> Seleccin 1
<OPTION VALUE=Option2 SELECTED> Seleccin 2
<OPTION VALUE=Option3> Seleccin 3
</SELECT>
<TR>
<TD><INPUT TYPE="Reset"
pulsado','onClick')">
value=" Reset " onClick="Muestra('Has
<TD><INPUT TYPE="Submit" value=" Enviar " onClick="Muestra('Has

pulsado','onClick')">
<TR>
<TD><INPUT TYPE="button" value=" Cerrar " onClick="Cerrar()">
</TABLE>
</FORM>
</BODY>
125
125
126
Validacin en JavaScript
Ingresar el cdigo de un alumno, nombre, escoger la carrera, seleccionar la

procedencia y los adicionales.
Al hacer clic en calcular debe de salir la pension (dependera de la carrera), y los
adicionales dependera si los check estan marcados.
<html>
<head>
<title>Pgina 1</title>
</head>
<script language="javascript">
function solonumeros(){
//window.event.keyCode guarda el cdigo
//ascci de la tecla presionada
SEGUNDO CICLO
var tecla=window.event.keyCode;
126
if((tecla>=48&&tecla<=57)||tecla==8){
//si entra a este if quiere decir que se presiono un //numero
}else{
alert("Solo se acepta numeros");

window.event.keyCode=0;
form1.txtcod.focus();
}
//alert muestra un mensaje
}
function sololetras(){
var tecla=window.event.keyCode;
if((tecla>=65&&tecla<=90)||(tecla>=97&&tecla<=122)||tecla==8||tecla==32
){
//si es una letra o barra de retroceso (8) o espacio en blanco (32)
}else{
alert("Solo se acepta letras");
window.event.keyCode=0;
form1.txtnom.focus();
}
}
//Aqu se esta preguntando si el texto txtcod esta vacio
if(form1.txtcod.value==""){
alert("Ingrese cdigo");
form1.txtcod.focus();
return;
}
if(form1.txtnom.value==""){
alert("Ingrese Nombre");
form1.txtnom.focus();
return;
}
if(form1.cbocarrera.value==0){ //Aqu se esta preguntando si el combo tiene el
valor de 0
127
127
128
//si cumple esta condicion quiere decir que se ha escogido la opcionSleccione

carrera
alert("Seleccione una carrera");
form1.cbocarrera.focus();
return;
}
if(form1.optorigen[0].checked==false&&form1.optorigen[1].checked==false){
//Aqu se esta preguntando si los 2 options estan desmarcados para eso la
propiedad es CHECKED y como los //2 tienen el mismo nombre ambos son
OPTORIGEN (optorigen[0], optorigen[1])
alert("Seleccione un origen");
form1.optorigen[0].focus();
return;
}
r=confirm("Desea calculae...?");
//confirm muestra un cuadro de dialogo donde saldra 2 botnes ACEPTAR y
CANCELAR
//si se responde ACEPTAR la funcion devuelve TRUE caso contrario FALSE
if(r==true){
switch(form1.cbocarrera.value){ //Aqu se pregunta por la carrera
case "1":pension=350;break;
}
if(form1.optorigen[0].checked==true){
origen="Extranjero";
}else{
origen="Nacional";
}
if(form1.chkseguro.checked==true){
SEGUNDO CICLO
seguro = pension * 0.03;
128
}else{
seguro = 0;
}
if(form1.chkmatri.checked==true){
matri = pension * 0.02;
}else{
matri = 0;
}
form1.txtpension.value=pension;
form1.txtproce.value =origen;
form1.txtadicional.value=seguro + matri;
form1.txttotal.value=pension + seguro + matri;
}
}
</script>
<body>
<form name="form1" method="post" action="">
<table border="0">
<tr>
<td>cdigo:</td>
<td><input name="txtcod" type="text" id="txtcod" onKeyPress="solonumeros();"
maxlength="4"></td>
</tr>
<tr>
<td>Nombre:</td>
<td><input name="txtnom" type="text" id="txtnom" onKeyPress="sololetras();"
maxlength="30"></td>
</tr>
<tr>
<td>Carrera:</td>
<td>
<select name="cbocarrera" id="cbocarrera">
<option value="0">Seleccione Carrera</option>
<option value="1">Computacion e Informatica</option>
<option value="2">Electronica</option>
<option value="3">Secretariado</option>
129
129
130
</select>
</td>
</tr>
<tr>
<td>Procedencia:</td>
<td>
<input
value="radiobutton">Extranjero
name="optorigen"
type="radio"
<input name="optorigen" type="radio" value="radiobutton">Nacional

</td>
</tr>
<tr>
<td>Adicionales:</td>
<td>
<input
name="chkseguro"
value="checkbox">Seguro 3%
<input
name="chkmatri"
value="checkbox">Matricula 2%
type="checkbox"
type="checkbox"
id="chkseguro"
id="chkmatri"
</td>
</tr>
<tr>
<td>Pension:</td>
<td><input name="txtpension" type="text" id="txtpension" readonly="yes"></td>
</tr>
<tr>
<td>Procedencia:</td>
<td><input name="txtproce" type="text" id="txtproce" readonly="yes"></td>
</tr>
<tr>
SEGUNDO CICLO
<td>Adicionales:</td>
130
<td><input
name="txtadicional"
readonly="yes"></td>
</tr>
<tr>
type="text"
id="txtadicional"
<td>Total:</td>
<td><input name="txttotal" type="text" id="txttotal" readonly="yes"></td>
</tr>
<tr>
<td><input name="cmdnuevo" type="reset" id="cmdnuevo" value="Nuevo"></td>
<td><input name="cmdcalcular" type="button" id="cmdcalcular" value="Calcular"
<input
name="cmdsalir"
type="button"
onClick="window.close();"></td>
id="cmdsalir"
value="Salir"
</tr>
</table>
</form>
</body>
</html>
Arreglos en JavaScript
Para declarar un arreglo en javascript seria de la siguiente manera:
var vector = new Array(5); donde vector es el nombre de la variable y 5 es la
cantidad de elementos que tendra esa variable, empezando desde el indice 0
hasta al 4.
Se puede saber la longitud del vector mediante al propiedad length es decir:
cant = vector.length el resultado seria 5
Ejemplos:
var pais = new Array(3);
pais[0]=peru;
pais[1]=mexico;
pais[2]=italia;
Este mismo ejemplo podria declararse de la siguiente forma:
var pais=new Array(peru,Mxico,italia)
Ejercicio
Tenemos una pgina donde se debe mostrar Informacin sobre Cds disponibles
a vender.
131
131
132
Para eso se debe mostrar el nombre del artista,el pais de origen,el precio del Cd
y la foto del CD(se debe crear arreglos paralelos donde se guardara esa
informacin).
El resultado seria asi:
El codigo seria asi:

<body>
var cd=new Array("Jenifer Lopez","Gloria Trevi","Monica Naranjo","Lorena
Herrera","Maria Conchita Alonso","Patricia Manterola");
var pais=new Array("USA","Mexico","Espaa","Mexico","Venezuela","Mexico");
var precio=new Array(23,24,25,20,27,22);
var imag=new
Array("Jenifer.jpg","Gloria.jpg","Monica.jpg","Lorena.jpg","Maria.jpg","Patricia.jpg
");
/*En la parte superior se ha declarado los 4 vectores paralelos, en cd se guarda
el nombre del Cd, en pais el pais de origen, en precio el precio del cd y en imag
va el nombre de la imagen que queremos insertar*/
SEGUNDO CICLO
document.write("<table border=1>");//Con esto estamos dibujando una tabla
132
document.write("<tr>");//se barre una fila

document.write("<td>Nombre del Cd</td>");
document.write("<td>Pais de Origen</td>");
document.write("<td>Precio</td>");
document.write("<td>Imagen</td>");
document.write("</tr>");//cierra la fila
/*Lo anterior se pudo simplificar en una sola linea
el for empieza de 0 hasta la longitud del vector cd que ser 6 como los otros
vectores son paralelos todos tendran la misma longitud*/
for(i=0;i<cd.length;i++){
document.write("<tr>");//se barre una fila
document.write("<td>" + cd[i] + "</td>");//Muestra los cd almacenados en el
vector
document.write("<td>"+ pais[i] + "</td>");//Muestra los paises almacenados en el
vector
document.write("<td>"+precio[i]+"</td>");//Muestra los precios almacenados en
el vector
document.write("<td><img src=" + imag[i] + " width=50 height=50></td>");
//Muestra la imagen
document.write("</tr>");//cierra la fila
}
/*Si analizamos veremos que se esta sumando cadenas en la parte donde se
agrega la imagen notemos que hay 3 cadenas la primera es "<td><img src=" de
ahi se esta sumando con el valor que tome el vector imag, si la variable que
controla el for esta en 0 ser "jenifer.jpg" y esa es la segunda cadena luego a
esto se le suma una tercera cadena que es " width=50 height=50></td>"
entonces sumemos las 3 cadenas y tenemos "<td><img src=jenifer.jpg width=50
height=50></td>" y asi ser para cada elemento del vector.
si se pone width y height es por la razon que queremos que las imgenes
salgan de ese tamao, de lo contrario saldria del tamao natural de la imagen*/
document.write("</table>");//Cerramos la tabla
</script>
</body>
Nota: Noten que para esta pgina no se ha usado ninguna funcin
debido a que queremos que salga ni bien cargue la pgina ademas
noten que le cdigo script esta dentro del tag BODY ya que si lo
ponenos en HEAD no saldr nada.
133
133
134
Objeto Select (ListMenu o Combobox/Listbox)

Este objeto servira para almacenar datos
Luego se podra seleccionar ya sea desde una lista simple o una lista
desplegable.
Algunas de sus propiedades:

Options. Array que contiene una entrada por cada elemento de la lista de
seleccin
SelectedIndex. Da el ndice de la opcin de la lista seleccionada actualmente
options[n].value.-Indica el valor del elemento n de la lista, tal y como est
especificado en el tag OPTION
options[n].text. Contiene la cadena de texto que representa la opcin n de la
lista
options[n].selected. Indica si la opcin n est actualmente seleccionada
options[n].defaultSelected.-Indica si la opcin n es la seleccionada por defecto.
Ejercicio
Tenemos una pgina donde debe haber un combo(select) y se seleccionara un
departamento al escoger un departamento automticamente en un list se
mostrara los distritos que pertenecen a ese departamento(Use arreglos para
llenar los departamentos y distritos);

<html>
<head>
SEGUNDO CICLO
<title>Ejercicio 1:: prof. Gonzalo Anchante</title>
134
//se declara los vectores fuera de las funciones esto quiere decir que son
variables publicas
var depa = new Array("Lima","Tumbes","Arequipa","Piura");

//Por cada deparatamento se declara un vector que contendra sus distritos
var Lima = new Array("Caete","Lima","Chincha");
var Tumbes = new Array("Pizarro","La cruz","Tumbes","Zorritos");
var Arequipa = new Array("Camana","Mollendo","Arequipa")
var Piura = new Array("Sullana","Mancora");
function cargardepa(){//Esta funcion llenara el combo con los departamentos

form1.cbodepa.length = depa.length;
//al poner form1.cbodepa.length se esta estableciendo cuantos elementos
tendra el combo
for(i=0;i<depa.length;i++){
form1.cbodepa.options[i].value = depa[i];
//Esto llena un elemento y le pone un valor es el valor que tomara ese elemento
form1.cbodepa.options[i].text = depa[i];
//Aqu se pone lo que se quiere mostrar en el combo por cada elemento
}
}
//la funcion cargardepa ser llamado en el body del formulario en el evento
onload
function cargadist(){
/*Esta funcion llenara el list dependiendo de que departamento se escogio se
llamara en el evento change del combo*/
vector =form1.cbodepa.value;
//La variable vector tendra el valor del combo en otras palabras se almacenara
el nombre del Departamento.
long = eval(vector + ".length");
/*Long tendra la longitud del vector con el cual se va a trabajar dependiendo de
lo que se escogio en el combo de departamento es decir imaginmonos que se
escogio Piura en el combo entonces la variable vector tendra como valor
"Piura" y si a eso se le suma ".length" en total tenemos "Piura.length" entonces
tenemos una cadena y si queremos ejecutar esa cadena utilizamos la funcion
eval() y el resultado seria 2 por que el vector Piura tiene 2 elementos*/
form1.lstdist.length = long
for(i=0;i<long;i++){
135
135
136
form1.lstdist.options[i].text = eval(vector + "[i]");

}
form1.lstdist.options[0].selected=true;
//Con esta sentencia se esta diciendo que el primer elemento se marque por
defecto
/*Dentro del for estamos poniendo en cada elemento del listbox los elementos
del vector con el que se esta trabajando por ejemplo si en el combo escogimos
Piura la variable vector tomara el valor de "Piura" y si a eso se le suma "[i]"
tenemos "Piura[i]" y si quiero ejecutar esa cadena utilizo eval imaginemos que i
vale 0 entonces al ejecutar esa cadena el resultado de eval("Piura[i]") seria
"Sullana"*/
}
</script>
</head>
<body onLoad="cargardepa();">
<p>Seleccione Departamento:
<select name="cbodepa" id="cbodepa" onChange="cargadist();">
</select>
</p>
<p>Seleccione Distrito<br>
<select name="lstdist" size="1" multiple id="lstdist" style="height=80">
</select>
</p>
</form>
</body>
</html>
Nota:
SEGUNDO CICLO
Cuando creamos el vector depa pusimos Lima,Piura, etc entonces al crear

los vectores para guardar los distritos debemos ponerles el mismo nombre es
decir var Lima = new Array(), var Piura= new Array(), etc.
136
Por que??? Por esto imagnense que en vez de crear un vector Lima creamos
un vector lima(noten la letra L) pero en el vector depa tenemos un elemento
llamado Lima entonces una vez cargado el combo y si escoges Lima
llamamon a la funcion cargardist donde en una variable se guarda el valor del
elemento esogido en el combo osea en este caso Lima a esto se le suma
137
.length pero si nosotros no tenemos un vector llamado Lima si no lima

entonces nos saldria error.
Ejercicio
Tenemos una pgina donde se debe escoger una o mas carreras de un Listbox
al hacer clic en un botn debe mostrarse un mensaje indicando cuantas carreras
se escogio, las carreras que se escogieron y el total del monto a pagar.
Nota: Para hacer esta pgina se debe llenar el list los nombres de las carreras y
ponerle en la propiedad value el precio de dicha carrera.

<html>
<head>
</head>
long = form1.lstcarrera.length;//Saca la cantidad de elementos que tiene el
listbox
costo=0;//Aqu se guardara el total a pagar por los cursos que se escoja
cursos="";//En esta variable se almacenara los nombres de los cursos que se
escogeran
con=0;//Guarda la cantidad de cursos escogidos
for(i=0;i<long;i++){//Hace el for para barrerse elemento por elemento
if(form1.lstcarrera.options[i].selected){//Pregunta
seleccionado
137
si
el
elemento
ha
sido
138
precio = parseInt(form1.lstcarrera.options[i].value);
//Guarda el valor del elemento del lista en el cual se alamceno el precio del
curso
nombre = form1.lstcarrera.options[i].text;//Guarda el nombre del curso
costo = costo + precio; // Acumula los precios
cursos = cursos + nombre + ","; //Acumula los nombres poniendo una , al final
con++;
}
}
alert("La cantidad de cursos seleccionado son : " + con + "\nLos Cursos
escogidos son : " + cursos + "\nEl Monto a pagar es: " + costo);
//En un alert si se pone \n esto hace que se haga un salto de linea
}
</script>
<body>
<p>Seleccione Carrera a Estudiar: <br>
<select name="lstcarrera" size="1" multiple id="lstcarrera" style="height=200">
<option value="200">Computacion e Informatica</option>
<option value="250">Enfermeria</option>
<option value="240">Electronica</option>
<option value="120">Administracion</option>
<option value="450">Hoteleria</option>
<option value="230">Networking</option>
</select>
</p>
<p>
<input
name="cmdcosto"
SEGUNDO CICLO
</p>
138
</form>
</body>
</html>
type="button"
id="cmdcosto"
value="Costo"
ObjetoCheckBox y RadioButton
Este objeto sirve para escoger entre varias opciones en el caso del radiobutton
solo se podra escoger una de las opciones y en el caso de los check se podra
escoger una o varias opciones
Para cuando trabajemos con radiobutton solo se pueda escoger entre varias
opciones solo una de ellas se les debe poner el mismo nombre
<input type=radio name=optcat>A
<input type=radio name=optcat>B
con esto tendremos dos radios llamados optcat y se diferenciaran por un indice
que empieza de 0.
Lo que se hace es un arreglo de controles.
La propiedad para saber si el elemento ha sido escogido ya sea radio o check
es SELECTED
Por ejemplo
valor = form1.optcat[0].checked
En la variable valor se almacenara TRUE(si esta seleccionado) o FALSE(si no lo
esta) se pone [0] por que es un arreglo de controles si no lo fuera obviaramos
esa parte.
Ejemplo
Se tiene 2 radios y se quiere saber que sexo se escogio.
<input type=radio name=optsexo>Masculino
<input type=radio name=optsexo>Femenino
para saber cual de los 2 se escogio podriamos hacer lo siguiente:
sexo = (form1.optsexo[0].checked?Masculino:Femenino); asi de facil
En la variable sexo se guardara dependiendo de la condicion si optsexo de 0
esta marcado se guarda Masculino de lo contrario se marca Femenino
En el caso de los check no es necesario que sean arreglos ya que se pueden
escoger varios,ningunos o todos Ejem: <input type=checkbox name=check1>
para saber si esta marcado este check solo deberiamos preguntar
if(form1.check1.checked) y nada mas.
Nota: Quizas llegue un momento donde hayan muchas opciones a

escoger por decir imaginemos que tenemos que escoger una
categora de la A a la J y luego queremos saber que categora se
escogio.
139
139
140
Lo que se podria hacer en este caso es utilizar un for

for(i=1;i<form1.optcat.length;i++){
if(form1.optcat[i].checked){
cat = form1.optcat[i].value;
break;
}
}
donde form1.optcat.length viene a ser la cantidad de elementos que tiene el
arreglo de control en este caso 10 dentro del for se pregunta por cada elemento
si esta seleccionado, si lo esta extrae el valor del elemento(lo que se haya
puesto en la propiedad value) por eso es importante en la propiedad value de
cada radio ponerle un valor en este caso le debemos poner la letra que le
corresponde. Al final ponemos un alert(cat) y se mostrara la letra que se
escogio.
Ejercicio
Tenemos una pgina donde se debe ingresar el nombre de un trabajador y
sueldo basico ademas se debe escoger una categora puede ser de la A a la
Jdependiendo de la categora se dara una bonificacin de si es A-100 si es B-90
si es C-80 si es D-70 y asi sucesivamente. Hasta J que es 10 soles.
Tambin se debe escoger los descuentos que se le hara al trabajador Fonavi
(se le descuenta 1% de su sueldo basico), AFP (6%) IPSS (4%). Y por ultimo en
tipo de pago se debe escoger si se va a pagar semanal (monto a pagar seria su
sueldo neto/4),quincenal(el neto /2) o mensual(lo mismo que el neto)
Al hacer clic en el botn calcular debe salir los resultados asi como el neto que
ser la suma del basico + la bonificacin fonavi afp ips.
<html>
<head>
SEGUNDO CICLO
140
var i,basico,afp,ipss,boni;
basico = parseInt(form1.txtbasico.value);//Se guarda el sueldo basico
for(i=0;i<form1.optcat.length;i++){
if(form1.optcat[i].checked){
boni = parseInt(form1.optcat[i].value);
break;
}
}
/*Para sacar la bonificacion que se le da segun su categoria lo que se ha hecho

es crear un arreglo de controles llamdo optcat al primero que se creo en value
se le puso 100 al segundo 90 al tercero 80 y asi sucesivamente hasta el ultimo
que se le puso 10 dentro del for se esta preguntando si ha sido seleccionado
uno de los elementos si lo fue en la variable boni se almacena el valor del
elemento seleccionado es decir la bonificacion que se le da (transformado a
numero con parseInt) como ya se encontro el elemento
seleccionado no tiene sentido seguir con el for por eso se pone break, para
romper el for*/
fonavi =(form1.chkfonavi.checked?basico *0.01:0);
//Si chkfonavi esta marcado saco el 1% a basico y lo guardo en la variable
fonavi si no 0
afp =(form1.chkafp.checked?basico *0.06:0);
ipss =(form1.chkips.checked?basico *0.04:0);
neto = basico + boni - fonavi - afp ipss; //Calculo el neto
form1.txtboni.value = boni; //paso los valores de las variables a las cajas de
textos
form1.txtfonavi.value = fonavi;
form1.txtafp.value = afp;
form1.txtips.value = ipss;
141
141
142
form1.txtneto.value = neto;
//Ahora se debe analizar el tipo de pago para esto no usamos un for por que no
es necesario
if(form1.opttipo[0].checked){
form1.txtmonto.value = neto / 4;
}else{
if(form1.opttipo[1].checked){
form1.txtmonto.value = neto / 2;
}else{
form1.txtmonto.value = neto;
}
}
}
</script>
</head>
<body>
<table width="81%" border="1">
<tr>
<td>Ingrese nombre de Trabajador</td>
<td><input name="txtnom" type="text" id="txtnom"></td>
</tr>
<tr>
<td>Sueldo Basico:</td>
<td><input name="txtbasico" type="text" id="txtbasico"></td>
</tr>
<tr>
<td>Categoria:</td>
<td>A
SEGUNDO CICLO
<input type="radio" name="optcat" value="100">
142
B
C

D
E
F
G
H
I
J
<input type="radio" name="optcat" value="10" checked></td>
</tr>
<tr>
<td>Descuentos:</td>
<td>Fonavi 1%
<input name="chkfonavi" type="checkbox" id="chkfonavi" value="checkbox">
AFP 6%
<input name="chkafp" type="checkbox" id="chkafp" value="checkbox">
IPSS 4%
<input name="chkips" type="checkbox" id="chkips" value="checkbox"></td>
</tr>
<tr>
<td>Tipo de Pago:</td>
<td>Semanal
<input type="radio" name="opttipo">
Quincenal
<input type="radio" name="opttipo">
Mensual
<input type="radio" name="opttipo" checked></td>
143
143
144
</tr>
<tr>
<td>Bonificacion:</td>
<td><input name="txtboni" type="text" id="txtboni"></td>
</tr>
<tr>
<td>Fonavi</td>
<td><input name="txtfonavi" type="text" id="txtfonavi"></td>
</tr>
<tr>
<td>Afp</td>
<td><input name="txtafp" type="text" id="txtafp"></td>
</tr>
<tr>
<td>Ipps</td>
<td><input name="txtips" type="text" id="txtips"></td>
</tr>
<tr>
<td>Monto a pagar</td>
<td><input name="txtmonto" type="text" id="txtmonto"></td>
<tr>
<td>Sueldo Neto:</td>
<td><input name="txtneto" type="text" id="txtneto"></td>
</tr>
</tr>
<tr>
<td align="right">
<input name="cmdnuevo" type="reset" id="cmdnuevo" value="Nuevo">
SEGUNDO CICLO
</td>
144
<td><input name="cmdcalcular" type="button" id="cmdcalcular" value="Calcular"

onclick="calcular();"></td>
</tr>
</table>
<p> </p>
<p> </p>
</form>
</body>
</html>
Arreglos de controles
Ya hemos visto como es un arreglo de controles lo vimos para manejar las
opciones en el ejemplo anterior pero no solo a los radios se les aplica esto
tambin funciona con cualquier objeto por ejemplo se desea crear un arreglo de
controles para un button entonces lo unico que debemos hacer es ponerle el
miso nombre.
Ejemplo:
<input type=button name=cmdbotn value=Uno>
<input type=button name=cmdbotn value=Dos>
<input type=button name=cmdbotn value=Tres>
<input type=button name=cmdbotn value=Cuatro>
Luego queremos mostrar los valores que tiene el botn cmdbotn entonces
deberamos hacer lo siguiente:
for(i=0;i<form1.cmdbotn.length;i++){
alert(form1.cmdbotn[i].value);
}
y con esto saldra 4 mensajes Uno,Dos,Tres y Cuatro
Ejercicio
Tenemos una pgina donde debemos tener 5 botnes y al hacer clic en un
botn Generar se debe poner numeros aleatorios a los botnes(Utilize la
propiedad Value)
145
145
146

<html>
<head>
function generar(){
for(i=0;i<form1.cmdbotn.length;i++){
//Se hace un for hasta la cantidad de elementos que tiene este arreglo de
cmdbotn que es 5
form1.cmdbotn[i].value = parseInt(Math.random()*100);
//Por cada elemento en la propiedad value le pone un numero aleatorio
}
}
</script>
</head>
<body>
<input name="cmdbotn" type="button" id="cmdbotn">
<input name="cmdbotn" type="button" id="cmdbotn"></br>
<input type="button" value="Generar" onClick="generar();">
</form>
</body>
SEGUNDO CICLO
</html>
146
ANEXO II:
PREGUNTAS MS
FRECUENTES (FAQ)
147
147
SEGUNDO CICLO
148
148
Cunto demora registrar un dominio?

Un dominio COM, NET u ORG puede demorar hasta 3 das desde el momento de la
peticin. Sin embargo, la media de tiempo, se sita en 24 horas. Para dominios .PE, el
tiempo de demora se sita entre 12 y 25 das. Los dominios INFO y BIZ quedan
registrados en 6-8 horas.
Puedo hospedar mi dominio con un Proveedor X

y mi hosting con un Proveedor Y?
S, usted posee todos los derechos sobre el dominio registrado, y puede hospedarlo o
modificarlo sin restricciones a travs del panel de control otorgado por el Proveedor
respectivo.
El dominio y el hosting pueden estar alojados en diferentes Servidores, si este es el
caso, se necesitar hacer una REDIRECCION en los DNS del Hosting al Dominio.
Qu diferencia existe entre servidores Linux o

Windows?
La diferencia estriba en los soportes instalados. Linux confiere un alto rendimiento en
programacin con lenguajes Perl y PHP, mientras que Windows aporta la
interactividad con pginas ASP y ODBC. A nivel de servidores, Linux posee mayores
caractersticas para el usuario y se muestra ms estable que Windows.
Cmo publico o actualizo mis pginas web?

Usted accede directamente a su espacio en web asignado en el servidor mediante
FTP autentificado, pudiendo borrar, modificar y publicar sus pginas, as como
ejecutar scripts. FTP es el protocolo de transferencia de ficheros al servidor.
Puedo utilizar bases de datos?

S. La mayora de Proveedores permiten manejar bases de datos MySQL, SQL Server,
MS ACCESS, PostGRE SQL, etc.Esto depender del Servidor y plan escogido.
Cmo recibo y envo correo?

Debe utilizar un cliente de correo POP, como Outlook, Eudora, Pegasus, Netscape
Messenger, etc. La mayora de Proveedores no proporcionan de manera general un
servidor de correo saliente, por lo que deber utilizar el de su ISP. Si esto no fuera
posible, el Proveedor le puede
habilitar el servidor saliente para su
dominio.Adicionalmente, las cuentas de hosting disponen de un WEBMAIL o correo
web.
149
149
150
Puedo instalar un servidor seguro?

S. Si usted tiene un certificado SSL (Secure Socket Layer), la instalacin se har
abonando un pequeo monto. Si todava no posee un certificado SSL, puede adquirirlo
con el Proveedor.
Qu ocurre si gasto ms del espacio asignado?

Si sobrepasa la cantidad de espacio o transferencia mensual asignada a su cuenta de
hosting, tendr que abonar los montos correspondientes al exceso consumido. Los
excesos en espacio en disco y transferencia se evalan al final de cierto periodo
(Generalmente mensual).
Puedo leer mi correo desde cualquier lugar?

S. Adems de poder utilizar un cliente de correo, puede acceder a su correo a travs
del WEBMAIL de su hosting. Una pgina web similar a la de Yahoo o Hotmail donde
podr recibir y enviar correo.
Cules son los pasos que debo seguir para

construir un sitio web?
En s no es nada difcil, ms an con la infinidad de recursos que existen en Internet y
que disponemos gratuitamente, adems de los programas ya conocidos y de entorno
profesional como:
-
Adobe Dreamweaver.
Adobe GoLive.
Adobe Coldfusion.
Adobe Fireworks.
Adobe Photoshop.
Adobe ImageReady.
Microsoft FrontPage.
SEGUNDO CICLO
Lo importante es tener definida claramente la estructura del sitio, an se sigue

utilizando el Diagrama Secuencial o Borrador en papel de todo el sitio, ah es donde
especificamos la diagramacin visual, los requerimientos tcnicos, los elementos que
incluir el sitio, la resolucin de pantalla, etc. Trataremos de seguir los siguientes
procesos que habrn de cumplirse cuando llevemos el trabajo a la mquina:
150
Planeacin y desarrollo de contenido.

Programacin.
Mercadeo y Promocin.
Mantenimiento.
Los complementos como Contadores, Libros de Visitas, Foros, Blogs, etc. Se
descargan de un sinnmero de sitios y la gran mayora son gratuitos.
Por qu es necesario XHTML?, no es HTML lo

suficientemente bueno?
HTML es probablemente el lenguaje de etiquetado de documentos ms exitoso del
mundo. Pero cuando se present XML, se organiz un taller de dos das de duracin
para analizar si era necesaria una nueva versin de HTML basada en XML. La opinin
general del taller fue un rotundo "S": con un HTML basado en XML, otros lenguajes
XML podran incluir porciones de XHTML, y los documentos XHTML podran incluir
porciones de otros lenguajes de etiquetado. Incluso se podra aprovechar el rediseo
para limpiar algunas de las partes ms descuidadas de HTML, y aadir algunas
funcionalidades nuevas y necesarias, tales como mejores formularios.
Cules son las ventajas de usar XHTML en

lugar de HTML?
Si sus documentos son XHTML 1.0 puro (sin incluir otros lenguajes de etiquetado)
entonces las diferencias no sern muy significativas actualmente. Sin embargo, a
medida que proliferan las herramientas XML, como XSLT para la transformacin de
documentos, las ventajas de usar XHTML sern ms visibles. XForms por ejemplo,
permitir editar documentos XHTML (u otros tipos de documentos XML) de forma
sencilla. Las aplicaciones de Web Semntica sern capaces de sacar provecho de los
documentos XHTML.
Si sus documentos son algo ms que XHTML 1.0, por ejemplo si incluyen MathML,
SMIL, o SVG, entonces las ventajas son inmediatas: ese tipo de combinaciones no
son posibles con HTML.
Es posible poner simplemente la declaracin

XML al inicio de los documentos HTML ya
existentes?,
se
pueden
entremezclar
documentos HTML 4.01 y XHTML?
No. HTML no tiene formato XML. Hay que realizar los cambios necesarios para hacer
que el documento sea conforme a XML antes de que se pueda aceptar como XML.
Cul es la manera ms sencilla de convertir

documentos HTML a XHTML?
HTML Tidy ofrece la opcin de transformar cualquier documento HTML en uno
XHTML. Amaya es un navegador/editor que guarda documentos HTML como XHTML.
151
151
152
Por qu los navegadores son tan rigurosos con

el XML y eran ms permisivos con el HTML?
Est hecho a propsito. Los navegadores HTML aceptan cualquier entrada, ya sea
correcta o no, e intentan mostrar algo perceptible con lo que reciben. Dicha correccin
de errores hace que los navegadores sean muy difciles de implementar,
especialmente si se espera que todos los navegadores acten de igual manera. Esto
tambin supone que una enorme cantidad de documentos HTML sean incorrectos, ya
que, al mostrarse correctamente en el navegador, el autor no es consciente de los
errores. Todo ello hace que sea realmente complicado implementar nuevos agentes
de usuario, puesto que los documentos que se supone son HTML, frecuentemente
tienen errores.
Dnde puedo verificar que los documentos usen

el etiquetado correctamente?
El W3C ofrece un servicio de validacin en http://validator.w3.org/. El navegador/editor
Amaya tambin se asegurar de que el etiquetado sea correcto.
Por qu se hace referencia continuamente a los

"agentes de usuario" en lugar de a los
"navegadores"?
Aunque los navegadores son de hecho usuarios importantes de HTML y XHTML, hay
otros programas y sistemas que leen esos documentos. Los motores de bsqueda por
ejemplo, leen documentos pero no son navegadores. Utilizando el trmino "agente de
usuario", intentamos recordar a la gente la diferencia.
Por ejemplo, al hacer una bsqueda en Google frecuentemente veremos en alguno de
los resultados de la bsqueda algo como "Esta pgina Web contiene marcos, pero su
navegador no los soporta", lo que desanima a los usuarios a hacer clic en ese vnculo.
El autor del sitio Web en cuestin no se ha dado cuenta de que no todo son
navegadores, y de que se debe incluir un texto mejor en la seccin <noframes>, para
que de esta forma no se muestren tan carentes de sentido cuando los usuarios hagan
bsquedas en su sitio Web.
SEGUNDO CICLO
Por qu tengo que usar en XHTML eso que

llamas "namespace" (espacio de nombres)?
152
En los primeros tiempos del HTML diferentes grupos y compaas aadieron nuevos
elementos y atributos al HTML. Esto amenazaba con provocar un caos de diferentes
versiones de HTML no interoperables. XML (la X significa eXtensible) permite a
cualquiera utilizar elementos de diferentes lenguajes, pero, para que un navegador u
otro agente de usuario conozca qu elementos pertenecen a qu lenguajes, hay que
indicrselo. Eso es la funcin de las declaraciones de los espacios de nombres.
Por qu est permitido servir documentos

XHTML 1.0 como text/html?
XHTML en un formato XML; esto quiere decir que, estrictamente hablando, debera ser
enviado con un tipo de medio afn a XML (application/xhtml+xml, application/xml, o
text/xml). Sin embargo, XHTML 1.0 fue cuidadosamente diseado para que pudiera
funcionar tal cual incluso en agentes de usuario HTML antiguos. Si se siguen algunas
directrices simples se puede conseguir que muchos documentos XHTML 1.0 funcionen
en navegadores antiguos. No obstante, los navegadores antiguos slo entienden el
tipo de medio text/html, as que es necesario utilizar ese tipo de medio si se les enva
documentos XHTML 1.0. Pero se debe ser consciente de que si enviamos los
documentos XHTML a los navegadores como text/html, stos vern los documentos
como documentos HTML, no XHTML.
Qu navegadores aceptan el tipo de medio

application/xhtml+xml?
Que sepamos, todos los navegadores basados en Mozilla, tales como Mozilla,
Netscape 5 y superiores, Galeon y Firefox, as como Opera, Amaya, Camino, Chimera,
DocZilla, iCab, Safari, y todos los navegadores de telfonos mviles que acepten WAP
2. De hecho, cualquier navegador moderno. La mayora aceptan los documentos
XHTML como application/xml. Vase el test de tipo de medio XHTML para ms
detalles.
Acepta Internet Explorer de Microsoft el tipo de

medio application/xhtml+xml?
No. No obstante, hay un truco que permite servir documentos XHTML 1.0 a Internet
Explorer como application/xml.
Hay que incluir al inicio del documento la siguiente lnea en negrita:
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="copy.xsl"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
donde copy.xsl es un fichero que contiene lo siguiente:
<stylesheet version="1.0"
153
153
154
xmlns="http://www.w3.org/1999/XSL/Transform">
<template match="/">
<copy-of select="."/>
</template>
</stylesheet>
Tngase en cuenta que este fichero debe estar en la misma localizacin que el
documento que lo referencia.
Aunque se est sirviendo el documento como XML, y se analiza cmo XML, el
navegador piensa que ha recibido text/html, y por ello el documento XHTML 1.0 debe
seguir las directrices para servir a navegadores antiguos.
Los documentos XHTML continuarn funcionando en los navegadores que acepten
XHTML 1.0 como application/xml.
CSS tiene un montn de reglas especiales que slo se aplican a HTML, se aplican
tambin a XHTML?
No. Las reglas CSS que se aplican nicamente a HTML, se aplican slo a los
documentos que se sirven como text/html.
Funciona document.write en XHTML?

No. Debido a la manera en que XML se define, no es posible hacer trucos como este,
en el que el etiquetado es generado por scripts al mismo tiempo que el analizador est
analizando el etiquetado.
Todava se pueden conseguir los mismos efectos, pero hay que hacerlo utilizando
DOM para aadir y borrar elementos.
Por qu no est permitido servir documentos

XHTML 1.1 como text/html?
XHTML 1.1 es XML puro, y pensado para ser nicamente XML. No puede ser enviado
a navegadores antiguos con seguridad. Por tanto los documentos XHTML 1.1 deben
ser enviados con un tipo de medio afn a XML, tal como application/xhtml+xml.
SEGUNDO CICLO
Por qu se elimin el atributo "target" (destino)

en XHTML 1.1?
154
No ha sido eliminado. Hay tres versiones de XHTML 1.0: strict (estricta), transitional
(transicional), y frameset (con marcos). Las tres versiones fueron mantenidas a
propsito lo ms semejantes a HTML 4.01 dentro de lo que permite XML. XHTML 1.1
es una versin puesta al da de XHTML 1.0 estricto, y ninguna versin de HTML
estricta ha incluido nunca el atributo target. Las otras dos versiones , transicional y con
marcos, no fueron puestas al da, ya que no haba nada que actualizar. Si se desea
utilizar el atributo target, debe usarse XHTML 1.0 transicional.
Cul es la utilidad de la Modularizacin de

XHTML?
La modularizacin de XHTML no se dirige a los usuarios normales de XHTML, sino a
los diseadores de lenguajes basados en XHTML. Se ha observado que las
compaas y grupos tienen la tendencia a disear sus propias versiones de HTML y
XHTML, y stas a menudo no son interoperables en los niveles bsicos. La
modularizacin XHTML divide XHTML en una serie de mdulos que pueden
seleccionarse individualmente cuando se define un nuevo lenguaje; de esta manera se
garantiza que cualquier lenguaje basado en XHTML que utilice por ejemplo tablas,
utilice la misma definicin de tablas, y no otra versin divergente. La modularizacin
tambin aclara dnde es correcto aadir nuevos elementos y dnde no lo es.
Por qu es XHTML 2 necesario?, no es XHTML

1 lo suficientemente bueno?
HTML y XHTML han realizado un buen servicio, pero hay muchas cosas que pueden
ser mejoradas. Las reas que han recibido una atencin particular incluyen mejoras en
las posibilidades de estructuracin, eliminacin de caractersticas repetidas en XML,
usabilidad, accesibilidad, internacionalizacin, independencia de dispositivo, mejores
formularios y reduccin de la necesidad de scripts.
Se sustituye <img> por <object> en XHTML 2?

No. <img> es sustituida en XHTML2, pero por algo ms completo (aunque se podra
usar <object> si se desease).
Por que XHTML 2 no es compatible con

versiones anteriores?
Lo es, pero de una manera diferente a cmo lo eran versiones anteriores de HTML.
Debido a que versiones anteriores de HTML eran lenguajes de propsito especial, fue
necesario asegurar un nivel de compatibilidad hacia atrs con nuevas versiones, de
manera que los documentos nuevos fueran todava utilizables por los navegadores
antiguos. Por ejemplo, es por ello por lo que el elemento <meta> tiene su contenido en
un atributo en lugar de en el mismo elemento, puesto que de ser as podra haberse
mostrado en navegadores antiguos.
Sin embargo, gracias al XML y las hojas de estilo, esta compatibilidad estricta de
elementos con versiones anteriores ya no es necesaria, debido a que los navegadores
basados en XML, que en el momento de escribir este documento suponen ms del
95% de los navegadores en uso, pueden procesar nuevos lenguajes de etiquetado sin
tener que ser actualizados. Gran parte de XHTML 2 funciona ya en los navegadores
actuales, navegadores que no han sido pre-programados para aceptar XHTML 2. Gran
parte funciona, pero no todo: cuando los formularios y las tablas fueron aadidos a
HTML, la gente tuvo que esperar a que salieran nuevas versiones de los navegadores;
155
155
156
de igual manera, algunas partes de XHTML 2, tales como XForms y XML Events
(eventos XML), todava necesitan nuevos agentes de usuario que entiendan su
funcionalidad.
Cmo puedo insertar el icono en la barra de

direcciones del navegador?
Para hacerlo no sirven ni Javascript ni CGI, sino que sencillamente basta crear un
icono denominado "favicon.ico" e insertarlo en la raz principal de tu sitio. Por raz
entendemos el nivel ms bajo de la jerarqua de carpetas del sitio.
Atencin: el icono "favicon.ico" no debe ser una imagen BMP con extensin cambiada
a .ico, sino un icono creado con un programa apropiado (por ejemplo, el clebre
Microangelo).
Por ltimo, es necesario agregar el sitio en cuestin a favoritos de MsIe. De este
modo, el icono personalizado aparecer tanto en la barra de direcciones como junto a
los ttulos de los favoritos.
Cmo puedo subir otra pgina tras un cierto

nmero de segundos?
Es muy sencillo gracias a la marca META "refresh":
<META HTTP-EQUIV="Refresh" CONTENT="5; url=http://www.htmlpoint.com">
donde CONTENT="5 indica el nmero de segundos que tardar en subir la nueva
pgina; y donde url=http://www.htmlpoint.com" es el URL que subir. Es posible
sustituir archivos del mismo sitio (p. ej., url=pgina.htm").
Como todas las marcas de metainformacin, tambin refresh va entre los elementos
<HEAD> del documento.
Qu tengo que hacer para que mi sitio aparezca

en una buena posicin en los buscadores?
SEGUNDO CICLO
Por ejemplo, la marca de metainformacin "DESCRIPTION" tiene que ser lo ms

coherente posible con los contenidos del sitio. Se trata del nombre que algunos
buscadores (Altavista, por ejemplo) asocian al enlace del sitio y no debe superar los
300 caracteres.
156
Recuerda que intentar engaar a los buscadores utilizando pequeas estratagemas no

slo no compensa, sino que puede resultar incluso contraproducente ya que pones
completamente en juego la visibilidad de tu sitio. No uses el mismo trmino ms de
una vez ni utilices trminos no pertinentes, no incluyas en la pgina HTML texto
escondido del mismo color que el fondo con las palabras clave, no crees pginas con
la marca de metainformacin "Refresh".
1.
2.
3.
evita, en la medida de lo posible, el uso de marcos HTML;

no comiences el documento HTML con una imagen ni una tabla;
presta especial atencin a la portada del sitio;
4.
5.
6.
7.
8.
9.
evita, en lo posible, el uso de pginas ASP (Active Server Pages) o con un

nombre de archivo que comprenda un signo de interrogacin "?";
inscluye las palabras clave del sitio entre las marcas <TITLE></TITLE>, ya que
muchos spider (Altavista in primis) conceden importancia a esto;
usa las marcas <H1><H2> para los ttulos;
crea "doorpage", es decir, pginas de soporte de las principales que contengan
texto y palabras clave referidos con el sitio;
no registres ms de una pgina al da;
registra dominios de primer nivel. Por ejemplo, www.nome.com.
No olvides que en el 90% de los casos los trminos se buscan escribindolos en

minscula. No uses, por tanto, las maysculas.
Si tu sitio se dirige tambin al mercado exterior, escribe los trminos clave en tu lengua
y en ingls o el idioma del pas al que quieres llegar
Cmo puedo hacer que mis visitantes aadan mi

sitio a su navegador como pgina predefinida?
Basta insertar el siguiente cdigo en el punto de la pgina que prefieras y sustituir
"http://www.htmlpoint.com" con el URL completo de tu sitio:
<a
class="chlnk"
style="cursor:hand"
HREFnClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://w
ww.htmlpoint.com');"> Imposta como portada de MsIe </a>
Puedo agregar mi sitio a Favoritos de MsIe de

manera automtica?
Basta incluir el siguiente cdigo en el encabezamiento del documento (entre los
elementos <HEAD></HEAD>):
<script language="JavaScript1.2">
var bookmarkurl="http://www.htmlpoint.com"
var bookmarktitle="HTMLpoint"
function addbookmark(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
</script>
donde debers sustituir "http://www.htmlpoint.com" con el URL de tu sitio, y
"HTMLpoint" con el nombre del sitio que quieres agregar a Favoritos de MsIe.
Por ltimo, en el punto del documento que creas oportuno, introduce el siguiente
cdigo:
157
157
158
<a href="javascript:addbookmark()">
Agrega HTMLpoint a Favoritos de MsIe
</a>
Qu tengo que hacer para insertar msica de

fondo en mi pgina?
Usa este cdigo que funciona con Netscape 3 o sucesivo y MsIe 3 o sucesivo:
<EMBED SRC="musica.mid" LOOP=TRUE AUTOSTART=TRUE HIDDEN=TRUE
MASTERSOUND>
<BGSOUND SRC="musica.mid" LOOP="INFINITE">
Puedo hacer que la imagen de fondo de una

pgina web quede fija a pesar del scroller?
S, si bien slo en el caso de Ms Internet Explorer. Se obtiene gracias a este cdigo:
<BODY background="fondo.gif" bgproperties="fixed">
SEGUNDO CICLO
donde "fondo.gif" es la imagen de fondo del documento y bgproperties impostado en

"fixed" es la propiedad que fija el fondo. Los usuarios Netscape no vern ningn
mensaje de error, sino tan slo una pgina con el clsico fondo que "pasa" junto con el
resto del documento.
158
CARRERAS TECNOLGICAS
CARRERAS UNIVERSITARIAS
Computacin e Informtica.
Ingeniera de Sistemas e
Informtica.
Ingeniera de Software.
Redes & Comunicaciones.
Ingeniera de Redes y
Comunicaciones.
Administracin de Sistemas
Informticos Empresariales.
Ingeniera de Software.
Auditoria & Seguridad

Informtica.
Ingeniera de Seguridad y
Auditoria Informtica.
INSTITUTO SUPERIOR TECNOLGICO PRIVADO
R.M. N 0269-2006 ED
Av. Arequipa 790 - 990 - 1098

Telf.: 315-9636 / 332-7992 / 628-2353
E-mail: informesci@idat.edu.pe
www.idatcomputacion.edu.pe
CAMPUS UNIVERSITARIO UTP

Esquina Av. 28 de julio
con Av. Petit Thouars, Lima - Per
Telfono: 332-9393
E-mail: informes@utp.edu.pe
www.utp.edu.pe

2do Manual DisenoWEB

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

2do Manual DisenoWEB

Diunggah oleh

Hak Cipta:

Format Tersedia

INSTITUTO SUPERIOR TECNOLGICO PRIVADO

PROGRAMA DE COMPUTACIN E INFORMTICA

Fundamentos de Lenguaje HTML Diseo WEB con Adobe Fireworks

Diseo Web - Grupo IDAT

Ing. Rolando Rojas Gallo

Los derechos de edicin, distribucin y contenido de este texto son de

La presente publicacin es un material de ayuda institucional, en las especialidades de

FUNDAMENTOS DE DISEO WEB

Fundamentos de Lenguaje HTML

PROGRAMA DE COMPUTACIN E INFORMTICA

FUNDAMENTOS DE DISEO WEB

herramienta lo ms sencilla posible para poder prestar la mxima atencin a

Estructura de una pgina WEB

Partes de un documento HTML

Adems de todo esto, un documento HTML ha de estar delimitado por la

El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas

FUNDAMENTOS DE DISEO WEB

El resultado es un documento con la siguiente estructura:

Las maysculas o minsculas son indiferentes al escribir etiquetas.

PROGRAMA DE COMPUTACIN E INFORMTICA

FUNDAMENTOS DE DISEO WEB

<img src=valor />

FUNDAMENTOS DE DISEO WEB

As, si desesemos introducir un texto alineado a la izquierda escribiramos:

Toda alineacin forma

<p align="center">Texto alineado al centro</p>

Para justificar a la derecha:

El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy

PROGRAMA DE COMPUTACIN E INFORMTICA

FUNDAMENTOS DE DISEO WEB

Es un lenguaje de descripcin de pginas web normalizado segn las reglas de

FUNDAMENTOS DE DISEO WEB

definimos el aspecto de las cosas, sino lo que significan. Por ejemplo, si

PROGRAMA DE COMPUTACIN E INFORMTICA

FUNDAMENTOS DE DISEO WEB

El elemento raz (HTML)

FUNDAMENTOS DE DISEO WEB

recopilando todo, nos quedara algo como esto:

PROGRAMA DE COMPUTACIN E INFORMTICA

FUNDAMENTOS DE DISEO WEB

enlaces texto estarn subrayados y coloreados en azul. En el caso de las

Enlaces internos: los que se dirigen a otras partes dentro de la misma

Enlaces remotos: los dirigidos hacia pginas de otros sitios web.

Enlaces con direcciones de correo: para crear un mensaje de correo

Supongamos que queremos crear un enlace que apunte al final de la pgina. Lo

FUNDAMENTOS DE DISEO WEB

Enlaces HTML con otras pginas del mismo sitio

PROGRAMA DE COMPUTACIN E INFORMTICA

FUNDAMENTOS DE DISEO WEB

Para clarificar este punto podemos hacer un ejemplo a

Los enlaces locales pueden a su vez apuntar ya no a la pgina en general sino

FUNDAMENTOS DE DISEO WEB

Enlaces a direcciones de correo

al pincharlos nos abre un

PROGRAMA DE COMPUTACIN E INFORMTICA

FUNDAMENTOS DE DISEO WEB

direccin de correo un interrogante, la palabra subject, un signo igual (=) y el

Enlaces con archivos

El archivo ocupar menos, con lo que ser ms rpida su transferencia.

Al preguntar al usuario lo que desea hacer con el fichero le ofrece la

FUNDAMENTOS DE DISEO WEB

simplemente lo pondr en marcha y cuando lo pare no se quedar

PROGRAMA DE COMPUTACIN E INFORMTICA

FUNDAMENTOS DE DISEO WEB