Pagin As Web

Centro de Bachillerato Tecnolgico
industrial y de servicios No. 12

Gua Didctica para el aprendizaje del
Submodulo Elaboracin de Pginas Web
del Modulo II Creacin de Productos
Multimedia a travs de Software de Diseo

Martn Alejandro Guerra Hernndez

Jiquilpan, Michoacn

Agosto, 2010

Presentacin

La Educacin Media Superior (EMS) en Mxico enfrenta desafos que podrn ser atendidos
slo si este nivel educativo se desarrolla con una identidad definida que permita a sus
distintos actores avanzar ordenadamente hacia objetivos concretos.

El contexto socioeconmico y cultural mundial comporta cambios muy importantes que
tambin se expresan en nuestro pas; la educacin no puede ser ajena a estos fenmenos y
debe considerarlos para poder cumplir su funcin social. Se ha encomendado a la educacin
que los individuos y los grupos tengan una participacin exitosa en la sociedad del
conocimiento; que contribuyan a la resolucin de problemas y al mejoramiento en las
condiciones de vida desde la perspectiva del desarrollo sustentable; que estn en
condiciones de aprender a lo largo de la vida; que cuenten con los elementos para responder
a las demandas del mundo del trabajo y de la sociedad; que tengan y demuestren
conocimientos y competencias conforme a estndares nacionales e internacionales y que
esto les permita transitar ms libremente en la esfera de los estudios y del empleo, valorar la
multiculturalidad y convivir en la democracia.

La gua didctica desarrollada en este documento se origina debido a lo complejo que es el
desarrollar y administrar sitios web, con este material didctico se pretende orientar y facilitar
el aprendizaje del educando en el submodulo: Elaborar pginas web correspondientes al
Modulo II Creacin de productos multimedia a travs de software de diseo, de la
especialidad de Informtica del CBTis No. 12.

El documento se ha estructurado en cuatro apartados: el primero contiene una breve
introduccin a internet, el segundo apartado contiene una gua de aprendizaje del lenguaje
HTML; el tercer apartado se plantea el uso de un editor de pginas web: Dreamweaver CS3
y el ltimo apartado comprende la administracin de un sitio web.

ndice
I. INTRODUCCIN A INTERNET ............................................................................ 1
II. LENGUAJE HTML ................................................................................................ 5
II.1 Estructura bsica de un documento web ........................................................ 5
II.2 Creacin de una pgina web .......................................................................... 6
II.3 Visualizacin del documento web ................................................................... 7
II.4 Edicin de un documento web ........................................................................ 8
II.5 Saltos de lnea y de prrafo ............................................................................ 9
II.6 Cabeceras de ttulo ....................................................................................... 10
II.7 Formato y alineacin de texto ....................................................................... 11
II.8 Control de fuentes ........................................................................................ 14
II.9 Seleccin de un tipo de fuente...................................................................... 16
II.10 Caracteres especiales .................................................................................. 17
II.11 Efectos en el Texto ....................................................................................... 19
II.12 Texto en movimiento .................................................................................... 20
II.13 Diseo de Listas ........................................................................................... 22
II.14 Creacin de Vnculos (Enlaces o Hipervnculos) .......................................... 26
II.15 Insercin de Imgenes ................................................................................. 30
II.16 Fondos con Color Uniforme .......................................................................... 34
II.17 Colores del texto y de los enlaces ................................................................ 36
II.18 Diseo de tablas ........................................................................................... 39
II.19 Multimedia: Audio y Video ............................................................................ 48
II.20 Documentos con Frames .............................................................................. 52
III. ADOBE DREAMWEAVER CS3.......................................................................... 57
III.1 Instalacin..................................................................................................... 57
III.2 Espacio de trabajo ........................................................................................ 66
III.3 Creacin y edicin de archivos ..................................................................... 70
III.4 Insercin de texto ......................................................................................... 78
III.5 Insercin de caracteres especiales ............................................................... 79
III.6 Creacin de listas ordenadas y sin ordenar .................................................. 79
III.7 Bsqueda y sustitucin de texto ................................................................... 81
III.8 Revisin y correccin ortogrfica .................................................................. 83
III.9 Importacin de documentos de Microsoft Office ........................................... 84
III.10 Aplicacin de formato a texto........................................................................ 85
III.11 Utilizacin del inspector de propiedades para dar formato a texto ............... 86
III.12 Aplicacin de formato a prrafos .................................................................. 87
III.13 Cambio del color del texto ............................................................................ 87
III.14 Alineacin de texto ....................................................................................... 88
III.15 Utilizacin de reglas horizontales ................................................................. 89
III.16 Adicin de una nueva combinacin a la lista de fuentes .............................. 90
III.17 Insercin de fechas ....................................................................................... 90
III.18 Adicin y modificacin de imgenes ............................................................. 91
III.19 Insercin de contenido de Flash ................................................................... 97
III.20 Adicin de sonido ....................................................................................... 102
III.21 Insercin de objetos multimedia ................................................................. 104
III.22 Presentacin de contenido en tablas .......................................................... 106
III.23 Establecimiento de vnculos y navegacin ................................................. 119
III.24 Obtencin de vista previa de pginas ......................................................... 125
IV. ADMINISTRACIN Y HOSPEDAJE DEL SITIO WEB ..................................... 126
IV.1 Cmo elegir un alojamiento ........................................................................ 126
IV.2 Elegir alojamiento gratuito .......................................................................... 127
IV.3 Dominios ..................................................................................................... 131
IV.4 Registro en buscadores .............................................................................. 134
IV.5 Contacto con el navegante ......................................................................... 135
IV.6 Posicionamiento en los buscadores de internet.......................................... 136
IV.7 Registro y hospedaje en tripod ................................................................... 139
V. FUENTES DE CONSULTA ............................................................................... 150

Introduccin a Internet .
by: magh 1
I I. . I In nt t r ro od du uc cc ci i n n a a I In nt t e er rn ne et t
Internet es una red de computadoras conectados en toda la extensin del Globo Terrqueo
que ofrece diversos servicios a sus usuarios como pueden ser el correo electrnico, el chat o
la web. Todos los servicios que ofrece Internet son llevados a cabo por miles de
computadoras que estn permanentemente encendidos y conectados a Internet, esperando
que los usuarios les soliciten los servicios y sirvindolos una vez que son solicitados. Como
decimos, hay servidores para todo, los hay que ofrecen correo electrnico, otros hacen
posible nuestras conversaciones por chat, otros la transferencia de archivos o la visita a las
pginas web y as hasta completar la lista de servicios de Internet.
Tambin existe otro tipo de servidores que son los que se encargan de proveer de acceso a
Internet a nuestras computadoras, son los proveedores de acceso, los servidores a los que
nos conectamos con nuestros mdems (prodigy, megacable, tvrey, etc.). Cuando hacemos la
llamada con el mdem a los servidores que proveen el acceso entramos a formar parte de
Internet y mientras mantengamos la conexin podremos acceder a todos los servidores
repartidos por todo el mundo y solicitarles sus servicios.
En el momento que pedimos un servicio de Internet nos convertimos en clientes del servidor
que lo ofrece. Para solicitar uno de estos servicios es necesario contar con un programa
especial que suele ser distinto para cada servicio de Internet. Por ejemplo, para acceder al
correo electrnico utilizamos Outlook, para acceder a la web utilizamos un navegador:
Mozilla Firefox, Netscape, Internet Explorer, etc. o para entrar en el chat utilizamos un
programa como: ICQ, MIRc, Pigdin, etc. Todos estos programas que nos dan acceso a los
servicios de Internet se denominan clientes, como se puede ver, para ser el cliente de un
servidor de Internet necesitamos un programa cliente del servicio al que intentamos acceder.

La web es un servicio de Internet
Toda esta introduccin sirva para que nos demos cuenta que Internet es un conjunto de
servicios y el web, que es lo que tratamos de analizar, no es ms que uno de ellos.
Probablemente sea el ms popular en estos momentos y a veces parezca que Internet se
limita al web, como en los anuncios de prensa, donde casi siempre nos venden portales o
productos de la web como si ellos fueran lo nico que se puede hacer en Internet. La web es
entonces un servicio ms que consiste en un inmenso conjunto de pginas conectadas unas
a otras por un sistema de enlaces.
El sistema con el que est construido el web se llama hipertexto y es un entrelazado de
pginas conectadas con enlaces. Los sistemas de hipertexto se utilizan en otros contextos,
como la ayuda del Windows y son muy fciles de utilizar y de encontrar lo que buscamos
rpidamente. La web no solo se limita a presentar textos y enlaces, sino que tambin puede
ofrecernos imgenes, videos, sonido y todo tipo de presentaciones, llegando a ser el servicio
ms rico en medios que tiene Internet. Por esta razn, para referirnos al sistema que
implementa el web (hipertexto), se ha acuado un nuevo trmino que es hipermedia,
haciendo referencia a que el web permite contenidos multimedia.
Multimedia, hace referencia a muchos medios, solamente quiere decir que se estn
utilizando muchos medios para presentar informacin como son el vdeo, el audio o realidad
virtual.

by: magh 2
Cmo es una web por dentro
Una pgina web la vemos en nuestro navegador, o cliente web, y parece una sola entidad,
pero no es as, est compuesta por multitud de diferentes archivos, como son las imgenes,
los posibles vdeos y lo ms importante, el cdigo fuente que dice donde colocar cada texto,
cada imagen o cada video y la forma que tendrn estos al ser colocados en la pgina. No es
problema que las webs estn compuestas por tantos elementos, ya que rpidamente
veremos que su organizacin es fcil y que no se nos van a perder o escapar ninguno.
Como hemos podido imaginar y a modo de resumen, para publicar en Internet necesitaremos
construir unos documentos hipertexto, o hipermedia, con sus correspondientes archivos de
imagen o video y colocarlos en unas computadoras que son servidores de pginas web. Pero
esto es algo que vamos a tratar de explicar poco a poco en los siguientes captulos.
Aunque signifique adelantarse a los acontecimientos, es interesante sealar que con una
simple accin podemos ver el cdigo fuente de de las pginas, es decir, cmo estn hechas
por dentro. Para ello en Internet Explorer se ha de pulsar sobre el men de Ver >Cdigo
fuente y en Netscape se ha de seleccionar Ver >Origen de la pgina.

Qu necesitas para empezar
Para ponernos a disear pginas web nos hace falta realmente poco material. En la mayora
de los equipos que se instalan con Windows o Linux, se encuentran todos los materiales
necesarios para empezar sin necesidad de obtener nuevos programas. En concreto, los
materiales necesarios son un editor de textos, con el que programaremos nuestras pginas y
un navegador web: Internet Explorer, Mozilla Firefox, Netscape, etc.

Construir las pginas
Por fin empezamos a trabajar en la pgina y vamos a ver algunos consejos tiles para
hacerlo bien. Es el momento en el que nos ponemos manos a la obra de una forma ms
dedicada y tenemos que trabajar ms duramente. El programar o disear las pginas podr
gustar ms o menos que otras acciones como planearlas o promocionarlas ms tarde, pero
no cabe duda que es el momento ms excitante porque nuestros sueos y nuestras ideas
empiezan a concretarse en los resultados que esperbamos conseguir. Si hemos proyectado
un sitio compuesto por un gran nmero de pginas lo ms habitual es empezar diseando
una pgina con el marco del sitio, que luego vamos a repetir a modo de plantilla en todas las
pginas. Pero esto son tcnicas que aprenderemos con el tiempo. Para ahorrarnos errores
cuando hacemos las pginas podemos seguir una serie de consejos tiles.
No utilizar espacios en los nombres de los archivos de las pginas o las imgenes.
Tampoco utilizar caracteres raros como la o los acentos.
Tener cuidado con las maysculas y las minsculas en los nombres de los archivos que
tratamos. Si las utilizamos equivocadamente la pgina podr funcionar en nuestro equipo,
pero al subirla al servidor Linux o Unix podra ser que no funcionase.
Enterarse de cmo funciona el documento por defecto, que se cargara al inicio en nuestro
sitio (home.html, default.html, index.html, home.php, etc.)
Trabajar siempre con una extensin del archivo HTML especfica. No mezclar en un
mismo proyecto pginas con extensin .html y .htm.
by: magh 3
Imgenes y otros recursos
Como se ha podido ver anteriormente, el diseo de una pgina web implica la creacin de un
archivo en cdigo HTML, pero no es lo nico que debemos crear. En la mayora de los casos
tambin desearemos incluir imgenes y para ello ser necesario crear los correspondientes
archivos grficos.
El proceso para incluir una imagen en una pgina empieza por la creacin de la imagen con
un programa de diseo grfico o mediante su digitalizacin con un escner. Ser necesario
que conozcamos alguno de los programas de diseo grfico que existen en el mercado.
Entre los que destacan: Photoshop, Corel Draw o Fireworks.
Los tipos de archivos grficos que soporta Internet, entres los que destacan: J PG, GIF, PNG.
Tienen caractersticas distintas y por tanto usos distintos.
Una vez tenemos los archivos grficos los ponemos en el mismo directorio que los archivos
HTML o en un subdirectorio de este y en el cdigo de la pgina HTML pondremos una
etiqueta especial para incluir la imagen o la insertaremos l con editor web.

Alojar las pginas
Como hemos dicho, cualquier servicio que se quiere ofrecer en Internet tiene que brindarlo
un servidor, que es una computadora que se encuentra encendido las 24 horas del da y
conectado a Internet tambin permanentemente. En el caso de una pgina web, existen unos
servidores que son los encargados de mandarla cuando se la solicita, son los servidores
web. Nuestras pginas tienen que estar alojadas en un servidor web para que puedan estar
accesibles desde Internet.
Lo que tendremos que hacer entonces es buscar un lugar para alojar la pgina que est
acorde con nuestras necesidades, por suerte en muchos de los casos el alojamiento lo
podremos conseguir de manera gratuita.

Subir los archivos al servidor
Es una de las tareas que parecen ms difciles cuando te pones a construir las pginas. Igual
que cualquier cosa en este mundo, cuando lo has hecho unas cuantas veces el problema se
desvanece.
Bsicamente lo que tenemos que hacer es tomar todos los archivos que componen nuestro
sitio web, incluidas imgenes, animaciones, etc. y subirlas a nuestro servidor web. Para ello
primero es tarea imprescindible el identificar dnde estn todos los archivos de nuestro web.
Si hemos escrito la pgina con cdigo HTML seguramente sabremos perfectamente donde
estn nuestros archivos, pero si la pgina la hemos hecho con un editor web como
Dreamweaver, Frontpage es probable que estn un poco ms difciles de identificar.
Dependiendo del alojamiento que tengamos, la manera de subir los archivos cambiar.
Existen, de todos modos, dos maneras de subir los archivos al servidor, ya sea por FTP o a
travs de una interfaz web (parecido al administrador de archivos de Windows).

by: magh 4
Documento por defecto
Es importante conocer este concepto, incluso antes de ponerse a disear la pgina. El
documento por defecto es el archivo que enva el servidor cuando el cliente no especifica que
archivo es el que solicita. Esto se puede ver muy fcilmente con un ejemplo.
Cuando escribimos la direccin se enva el documento por defecto del directorio manuales.
http://www.desarrolloweb.com/ no estamos especificando ningn nombre de archivo en
concreto, entonces el servidor web donde est alojado este sitio web le devolver el
documento por defecto del directorio raz del dominio. Cada directorio puede tener un
documento por defecto, por ejemplo, cuando escribimos www.desarrolloweb.com/manuales
se enva el documento por defecto del directorio manuales.
Cada servidor web puede ests configurado de una manera distinta para el documento por
defecto, es decir, en cada servidor web el documento por defecto puede ser distinto. Lo ms
habitual es que se llame index.html, en desarrolloweb es as y en muchos alojadores
gratuitos tambin lo es, pero en otros casos puede variar el documento por defecto y ser lo
que los administradores de cada servidor decidan. Otros nombres para el documento por
defecto podran ser: default.html, index.html, home.html, default.php, los ms comunes.

Promocin de las pginas
Con el diseo y la publicacin del sitio web en el servidor no se termina el trabajo. Una de las
tareas ms importantes para el xito de la web es promocionarla adecuadamente, de manera
que su direccin figure en el mayor nmero de sitios.
Las acciones que se pueden realizar para promocionar una pgina son muchas y variadas,
como hacer que figure su direccin en nuestros correos electrnicos o intercambiar banners,
pero la ms importante es el registro en los buscadores. Estas tareas de promocin no son
nada complicadas y cualquiera puede realizarlas sin ningn problema, pero conseguir que
nuestra web se encuentre situada entre los primeros resultados de la bsqueda reviste ms
dificultad.

Actualizar las pginas
El ltimo "truco" para que nuestra pgina sea muy visitada y que los visitantes entren una y
otra vez se trata de mantenerla siempre bien actualizada. Hay algunas webs que se prestan
ms que otras a tener los contenidos actualizados, como son las pginas donde se pueden
ver contenidos de actualidad, pero en general todas las pginas pueden mantener secciones
con contenidos actualizables. Este es un aspecto muy importante, pues si el navegante se
percata de que los contenidos se renuevan constantemente volver con el tiempo unas
cuantas veces. Para dar una imagen de web actualizada se pueden utilizar imgenes o
textos que resalten donde ponga "nuevo" o "new". Tambin ser adecuado poner un rea en
un sitio visible donde se enumeren las novedades del sitio.
Por lo general habr que volver siempre sobre este punto para ver qu hay de nuevo y dnde
se puede renovar el contenido del web. No es bueno tener un enlace que no lleva a ningn
sitio, igual que no es bueno tener una direccin de correo que no existe ya. Si no
mantenemos nuestro sitio actualizado el visitante entrar una vez a la pgina pero no lo
volver a hacer nunca, con lo que habremos perdido una oportunidad de hacernos con un
cliente o un visitante asiduo.
HTML .
by: magh 5
I II I. . L Le en ng gu ua aj j e e H HT TM ML L

HTML, es acrnimo de HyperText Markup Language, lenguaje de marcas de hipertexto. En
informtica, formato estndar de los documentos que circulan en la World Wide Web
(WWW); se utiliza desde 1989. Los documentos HTML contienen dos tipos de informacin: la
que se muestra en la pantalla (texto, imgenes, videos, etc.) y los cdigos (tags o etiquetas),
que indican cmo se debe mostrar esa informacin. Para crear un documento HTML, basta
con disponer de un editor de texto: Wordpad, Bloc de Notas, Edit de MS-DOS, teclear el
cdigo y las etiquetas que sean necesarias. Tambin se pueden utilizar editores especficos
para diseo de pginas web que insertan automticamente las etiquetas correspondientes al
formato del texto que se escriba o a las imgenes que se inserten; por ejemplo: Microsoft
FrontPage, DreamWeaver, Web Easy Professional, Namo WebEditor, Coffee Cup Editor, etc.

I II I. .1 1 E Es st t r ru uc ct t u ur ra a b b s si i c ca a d de e u un n d do oc cu um me en nt t o o w we eb b
El principio esencial del lenguaje HTML es el uso de las etiquetas (tags). Funcionan de la
siguiente manera:
<nombre_etiqueta> Este es el inicio de una etiqueta.
</nombre_etiqueta> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en maysculas o minsculas, indiferentemente. Un
documento HTML en s est dividido en dos zonas principales:
* El encabezamiento, comprendido entre las etiquetas <HEAD>y </HEAD>
* El cuerpo, comprendido entre las etiquetas <BODY>y </BODY>
Dentro del encabezamiento hay informacin del documento, que no se ve en la pantalla
principal del navegador(Internet Explorer, NetScape Navigator, Mozilla FireFox) que es
utilizado para visualizar el documento HTML, principalmente la informacin encontrada en el
encabezamiento es el ttulo del documento, comprendido entre las etiquetas <TITLE> y
</TITLE>. El ttulo debe ser breve y descriptivo de su contenido, pues ser lo que vean los
dems cuando aadan nuestra pgina a su bookmark (favoritos o marcadores).
Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal (texto,
imgenes, video, etc.) Por tanto, la estructura de un documento HTML queda de esta forma:
<HTML>
<HEAD>
[Etiquetas del encabezado de la pgina: autor, descripcin, ttulo]
</HEAD>
<BODY>
[Aqu van las etiquetas o contenido a visualizar en la pgina]
</BODY>
</HTML>

HTML .
by: magh 6

De tal manera que:
La etiqueta principal es <html> y debe terminar con su etiqueta de cierre </html>.
El encabezado, que contiene informacin de: autor, descripcin, ttulo de la pgina, etc. se
escribe entre las etiquetas <head> y </head>.
Y el contenido de la pgina, entre <body> y </body>
Comentarios
Para insertar comentarios dentro de un documento HTML utilizaremos la etiqueta especial:

Los comentarios son tiles para identificar el documento, pudiendo indicar al comienzo del
documento su titulo, autor y la fecha en el que fue realizado, esto se hace antes de la
etiqueta <HTML>. Los comentarios no se muestran en el documento HTML y el nico modo
de verlo es viendo el cdigo HTML fuente del documento.

I II I. .2 2 C Cr re ea ac ci i n n d de e u un na a p p g gi i n na a w we eb b
Haga clic en el men Inicio/Programas/Accesorios/Bloc de notas.

Ejemplo 1: Disear una pgina web que muestre un saludo en la ventana del navegador.
Adems debe mostrar como titulo de la pagina: Iniciando como Desarrollador Web.
Guardaremos nuestro documento con el nombre de: ejemplo1.htm
<html>
<head>
<title> Iniciando como Desarrollador Web </title>
</head>
<body>
Saludos, este es mi primer documento web.
</body>
<html>

Etiqueta html, inicia el
documento web.
Etiqueta head, inicia los
encabezados del documento
web.
Etiqueta title, muestra el titulo
del documento web.
Etiqueta body, muestra el
contenido del documento web.

HTML .
by: magh 7

Despus de teclear el cdigo en el
bloc de notas, debe hacer clic en el
men Archivo / Guardar como. Del
cuadro de dialogo que aparece,
teclee en el cuadro Nombre:
ej empl o1.ht m,
Seleccione la lista desplegable de
Tipo: Todos l os archivos, por
ltimo haga clic en el botn Aceptar.
Listo ha creado su primer documento
web. Cierre el bloc de notas.

NOTA: Se recomienda que el nombre del documento o pagina web: Utilizar letras minsculas
y que NO lleve espacios entre palabras, caracteres especiales o . Ejemplo de
nombres incorrectos: niez, estudiante del CBTis, proyecto* final, etc.

I II I. .3 3 V Vi i s su ua al l i i z za ac ci i n n d de el l d do oc cu um me en nt t o o w we eb b
Para ver el contenido de su pgina web, debe ingresar a MiPC o al Explorador de windows,
posteriormente buscar la Carpeta en donde guardo su pgina web, despus haga doble clic
sobre el nombre de la pagina web creada y vera en pantalla el Navegador con el contenido
de su pgina web, en el ejemplo anterior solo visualizar en la barra de titulo del navegador:
Iniciando como Desarrollador Web y dentro de la ventana el texto: Saludos, este es mi primer
documento web.

El resultado del cdigo anterior se muestra en el navegador Internet Explorer:

Titulo de la pagina con la
etiqueta title.

Contenido que inserto
con la etiqueta body.

HTML .
by: magh 8
I II I. .4 4 E Ed di i c ci i n n d de e u un n d do oc cu um me en nt t o o w we eb b
Para modificar el contenido del documento o pagina web, tiene dos alternativas:

1) Ingresar al Bloc de Notas,
despus Archivo / Abrir.
Del cuadro de dialogo que aparece,
seleccione la lista desplegable de
Tipo: Todos l os archivos,
seleccione la carpeta en donde
guardo su documento,
posteriormente haga clic en el
nombre del documento y clic en el
botn Abrir.

En la ventana visualizar el cdigo de la pagina web, haga las modificaciones necesarias y
por ultimo haga clic en el men Archivo / Guardar.

Abra su documento web (sin cerrar el bloc de notas), observe que se muestran los cambios
realizados en el navegador: Internet Explorer, Mozilla Firefox, etc. Si desea continuar
modificando su documento web, haga las modificaciones necesarias y por ultimo haga clic en
el men Archivo / Guardar. Sin cerrar el Bloc de notas, puede ver la actualizacin de su
pgina, haga clic en el botn Actualizar (Internet Explorer) o botn Recargar (Mozilla Firefox).

2) Puede utilizar un editor web como: Microsoft FrontPage, DreamWeaver, Web Easy
Professional, Namo WebEditor, Coffee Cup Editor, etc. Ingrese al editor de su preferencia,
despus abra el documento web, realice los cambios que necesite, por ultimo guarde su
documento con los cambios, cierre el editor y visualice la pgina web con los cambios
realizados.

HTML .
by: magh 9
I II I. .5 5 S Sa al l t t o os s d de e l l n ne ea a y y d de e p p r rr ra af f o o
Cuando un navegador Web muestra pginas HTML, no le pone atencin a los fines de lnea
o a la cantidad de espacio entre palabras. Esto quiere decir, que al escribir el texto que ser
mostrado en el navegador, no es cmo en un procesador de texto normal, que controla saltos
de lnea, espaciado y alineacin.
Para controlar el texto, en el caso de los saltos de lnea y prrafos, se deben utilizar las
siguientes etiquetas: <BR> y <P>. Estas etiquetas no necesitan ser cerradas, salvo <P>, que
en ocasiones se cierra.
La etiqueta <BR>provoca el salto de lnea y <P>produce el efecto de un prrafo. Estas
etiquetas son muy utilizadas en todas las pginas Web.
Ejemplo 2: Disear una pgina web que contenga texto con algunos saltos de lnea y
prrafo. Adems debe mostrar como titulo de la pagina: Iniciando con Saltos. Guardar el
documento con el nombre de: saltolinea2.htm
<HTML>
<HEAD><TITLE> Iniciando con Saltos </TITLE></HEAD>
<BODY>
Si, se desea crear saltos de lnea, cmo <BR>en este ejemplo
es necesario utilizar las etiquetas BR y P, <BR> las cuales
son de gran utilidad.<BR><P>
Si observas en donde se estn especificando <BR>
los saltos de lnea y prrafos <BR>en el cdigo fuente,
se muestran al ejecutar este programa <BR><P>
Fin del documento web.
</BODY>
</HTML>
etiqueta title.

Contenido que inserto con la
etiqueta body.
Utilizo la etiqueta BR, para
saltar de lnea.
La etiqueta P, le permiti salto
de prrafo.

HTML .
by: magh 10
PRACTICA 1: Disear una pgina web que contenga los datos de una agenda, incluya los
datos de 3 personas: Nombre, direccin y telfono. Para cada dato debe aplicar salto de
lnea, por cada persona aplique salto de prrafo. Adems debe mostrar como titulo de la
pagina: Agenda.

I II I. .6 6 C Ca ab be ec ce er ra as s d de e t t t t u ul l o o
En un documento HTML es posible definir seis tipos distintos de cabeceras que sern
normalmente el ttulo del documento y los distintos subapartados que lo forman.
Las etiquetas que definen las cabeceras sern <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. El
texto indicado entre las etiquetas de inicio y de fin ser el afectado por las cabeceras:
Lo normal es utilizar las cabeceras de forma consecutiva y descendente, es decir,
comenzaremos el documento con la cabecera <H1>que definir el titulo, luego para los
apartados principales utilizaremos la cabecera <H2>, para subapartados <H3>, etc.
Ejemplo 3: Disear una pgina web que contenga texto simulando titulo, subtitulo y resto
de documento. Adems debe mostrar como titulo de la pagina: Iniciando Ttulos y
subttulos. Guardar el documento con el nombre de: titulo_subtitulo3.htm
<HTML>
<HEAD><TITLE> Iniciando con Titulos y Subtitulos
</TITLE></HEAD>
<BODY>
<h1> Texto como Titulo </h1>
<h2> Texto como subtitulo </h2>
<h3> Descripcin del contenido </h3>
</BODY>
</HTML>
El resultado del cdigo anterior se
muestra en el navegador Mozilla:
etiqueta title.
etiqueta body.
La etiqueta H1, para indicar lnea
de titulo.
La etiqueta H2, permite indicar
lnea de subtitulo.
La etiqueta H3, para indicar
lneas de texto.

HTML .
by: magh 11
PRACTICA 2: Disear una pgina web que contenga ciudades tursticas del mundo.
Incluya el nombre del continente, pas y ciudad, considere 3 continentes diferentes. Para el
dato de continente use ttulo, el dato de pas use subtitulo y el dato ciudad use otro. Adems
debe mostrar como titulo de la pagina: Ciudades Tursticas.

I II I. .7 7 F Fo or rm ma at t o o y y a al l i i n ne ea ac ci i n n d de e t t e ex xt t o o
Hacer, una pgina Web puede ser tan fcil como escribir un texto y agregar algunas
etiquetas HTML estndar al principio y al final, pero; para mejorar la apariencia del texto en
las pginas Web, se requiere saber controlar el texto, por medio las siguientes etiquetas.

Enfatiza el texto con negritas y cursivas.
Cundo se crea una pgina Web, hay partes del texto, que son importantes por lo que se
deben resaltar (enfatizar), es decir mostrarlas en negr i t a o cursiva o ambas.
Para enfatizar las palabras en una pgina Web utilice las siguientes etiquetas.
Etiquetas Descripcin
<I>...</I> Texto en cursiva
<B>...</B> Texto en negrita
<U></U> Texto subrayado
<Strike></Strike> Texto tachado
<Blink> </Blink> Texto parpadeante

Ejemplo 4: Disear una pgina web que contenga texto con formato de negrita y cursiva.
Adems debe mostrar como titulo de la pagina: Texto Cursiva-Negrita-Subrayado. Guardar
el documento con el nombre de: texto_cursivo4.htm
<HTML>
<HEAD>
<TITLE> Texto Cursiva Negrita - Subrayado
</TITLE>
</HEAD>
<BODY>
<h1> <b> <i> Titulo en Negrita-Cursiva <i> </b> </h1>
<h2> <b> Subtitulo en Negrita </b> </h2>
<h3> <i> Descripcin del contenido en Cursiva </i> </h3>
<h4> <i> <U> Texto Cursivo-Subrayado </U> </h4>
<h5> <b> <Strike> Texto Negrita-Tachado </Strike></b> </h5>
</BODY>
</HTML>

HTML .
by: magh 12
El resultado del cdigo anterior se muestra en el navegador Mozilla Firefox:

Titulo de la pagina con la etiqueta
title.

etiqueta body.
La etiqueta H1, b, i, para indicar
titulo, negrita y cursiva.
La etiqueta H2, b, permite indicar
subtitulo en negrita.
La etiqueta H3, i, para indicar texto
en cursiva.
La etiqueta H4, i, u, indica texto en
cursiva y subrayado.

Alineacin del texto
Para establecer la alineacin a un prrafo, puede utilizar la etiqueta <P>, junto con su
atributo Align ="...", el cual tiene tres valores: Left, Right y Center.
Cuando se desea establecer la alineacin de ms de un prrafo, as como de otros
elementos contenidos en la pgina; tales como: encabezados, imgenes y lneas de texto; al
mismo tiempo, puede utilizar la etiqueta <DIV>...</DIV>y su atributo Align ="...", el cual tiene
tres valores: Left (Izquierda), Right (Derecha) y Center (Centro).
Ejemplo 5: Disear una pgina web que contenga un titulo con alineacin centrada,
posteriormente un prrafo sin formato, otro prrafo al centro formato negrita y por ultimo un
prrafo con alineacin derecha en formato cursiva. No olvide el titulo de la pagina: Texto con
alineacin. Guardar el documento con el nombre de: texto_formato5.htm
<HTML>
<HEAD><TITLE>Texto con alineacion </TITLE></HEAD>
<BODY>
<P>
Este prrafo se muestra sin formato, sin alineacin. <BR>
Observe los siguientes ejemplos: <BR>
<P Align ="Center"> <B>
Este prrafo se muestra con formato negrita. <BR>
Y se encuentra alineado al centro de la pgina. </B>
<P Align ="Right"> <I>
Este prrafo se encuentra alineado al margen derecho <BR>
de la pgina Web. <BR> Y con formato cursivo. <BR> </I>
</P>
Fin de la pgina.
</BODY>
</HTML>
HTML .
by: magh 13

title.
Contenido del documento etiqueta
body.

La etiqueta P, align=center, B, se
aplica al prrafo la alineacin
centrada y negrita.

La etiqueta P, align=right, i, se aplica
al prrafo, alineacin derecha y texto
en cursiva.

PRACTICA 3: Disear una pgina web que muestre en un prrafo datos referentes a sus
estudios de primaria y otro prrafo datos de la secundaria. El primer prrafo alinearlo
centrado en negrita y el segundo con alineacin derecha en cursiva. Adems debe mostrar
como titulo de la pagina: Datos Escolares.

Existen otras etiquetas HTML, para aadir formatos especiales al texto. En la siguiente tabla
se muestran las etiquetas que pueden ser utilizadas para aadir formato al texto.

Etiquetas Descripcin
<SMALL>...</SMALL> El texto es ligeramente menor que lo normal
<BIG>...</BIG> El texto es ligeramente ms grande que lo normal
<SUP>...</SUP> El texto se muestra como
Superndice
<SUB>...</SUB> El texto se muestra como
Subndice

Ejemplo 6: Disear una pgina web que contenga un titulo con alineacin centrada,
posteriormente un prrafo con formato pequeo, otro prrafo con formato grande, en otro
prrafo escriba las siguientes expresiones: H
2
O,X
5
+Y
2
. No olvide el titulo de la pagina: Texto
sub-superindice. Guardar el documento con el nombre de: texto_formato6.htm

<HTML>
<HEAD>
<TITLE>Texto sub-supeindice</TITLE>
</HEAD>
<BODY>
<H1 ALIGN ="Center"> FORMATO DEL TEXTO</H1>
<H2 ALIGN ="Center"> SUB-SUPERINDICE</H2>
<BR><P>
Esta parrafo se muestra <BR> sin formato alguno.
HTML .
by: magh 14
Observe los siguientes ejemplos: <BR><BR>
<P>
<SMALL>Este es un texto pequeo</SMALL><BR>
<BIG> Este es un texto grande</BIG><BR>
Texto con superindice:
X <SUP> 5 </SUP> +Y <SUP> 2 </SUP><BR>
Texto usando subindice: H <SUB> 2 </SUB> O <BR><P>
</BODY>
</HTML>


title.

body.

La etiqueta H1, lnea de titulo.
Etiqueta H2, lnea de subtitulo
La etiqueta P, BR, se aplica al
prrafo y un salto de prrafo.
La etiqueta SMALL, texto en
tamao pequeo.
La etiqueta BIG, texto en tamao
un poco ms grande.
La etiqueta SUP, SUB, texto de
forma superndice y subndice.

PRACTICA 5: Disear una pgina web que contenga una expresin algebraica. Incluya lo
siguiente: Factorizar la expresin: 8a
2
+(c-d)
2
y x
9
+(m
3
1)
3
, la primer expresin en
tamao fuente grande y la segunda expresin en tamao fuente pequeo. Adems debe
mostrar como titulo de la pagina: Factorizacin de Binomios.

I II I. .8 8 C Co on nt t r ro ol l d de e f f u ue en nt t e es s
La apariencia de una pgina Web, no slo depende de los encabezados, los nfasis y la
alineacin; tambin es muy importante, controlar la apariencia de las fuentes y caracteres
especiales, esto es, controlando el tipo de fuente, tamao y color, que son propiedades que
se aplican al texto, para dar una mejor presentacin a las pginas.
HTML .
by: magh 15
Tamao y color de las fuentes.
Para establecer el tipo de fuente que se desea utilizar, el tamao y color, al texto de una
pgina Web, utilice la siguiente etiqueta con sus atributos y definiciones.

Etiqueta Atributo Descripcin
<FONT>...</FONT> Controla la apariencia del texto que encierra.
FACE ="..." Nombre de la fuente a utilizar. Puede usar nombres
mltiples de fuentes separndose por comas y la primera
que se encuentre en la lista ser la que se utilice.
SIZE ="..." El tamao de la fuente de 1 a 7. El predeterminado es 3.
Tambin se puede especificar como un valor relativo al
tamao actual, por ejemplo, +2.
COLOR ="..." Cambia el color al texto.

Para establecer un color especifico para la fuente, puede definir en el atributo COLOR,
cualquiera de los colores que se muestran en la siguiente tabla.

Colores Estndar
Black (negro) Blue (azul) Gray (gris)
White (blanco) Yellow (amarillo) Lime (lima)
Red (rojo) Aqua (can) Maroon (marrn)
Green (verde) Fuschia (fucsia) Purple (prpura)
Navy (azul marino) Olive (verde oliva) Silver (color plata)
Real (azul verdoso)

Ejemplo 8: Disear una pgina web que contenga una lnea de texto en color verde de
tamao 6, posteriormente un prrafo con texto color azul tamao 4. No olvide el titulo de la
pagina: Texto con Color. Guardar el documento con el nombre de: texto_color8.htm

<HTML>
<HEAD> <TITLE>Texto con Color </TITLE></HEAD>
<BODY>
<FONT SIZE="6" COLOR="Green">Linea de texto de color verde y
tamao 6 <BR> </FONT> <BR><P>
<FONT SIZE="4" COLOR="Blue"> Este prrafo se mostrar con la
fuente <BR>actual del navegador, con un tamao 4 <BR>y en color
azul </FONT><BR>
<P>Fin de la pgina.
</BODY>
</HTML>

HTML .
by: magh 16

title.
body.
La etiqueta Font, controla las
propiedades de texto.

La etiqueta Size, Color, establece el
tamao y color del texto que escriba.

PRACTICA 6: Disear una pgina web que contenga los colores del arco iris. El nombre
de cada color mostrarlo con el color de fuente correspondiente, iniciando con tamao de
fuente 7 hasta 1. Adems debe mostrar como titulo de la pagina: Colores del Arco Iris.

I II I. .9 9 S Se el l e ec cc ci i n n d de e u un n t t i i p po o d de e f f u ue en nt t e e
El atributo FACE, permite especificar la fuente exacta que se debe utilizar para mostrar el
texto. Las fuentes que se definan en este atributo, deben encontrarse en el sistema del
usuario (instaladas), de no hallarse, se aplicar la fuente estndar (Times New Roman) o la
configurada en el navegador.

Tambin puede especificarse una fuente de segunda opcin, para cuando no se tenga
instalada la fuente de primera opcin. Lo nico que se debe hacer es separar los nombres de
las fuentes con una coma en l atributo FACE.

Ejemplo 9: Disear una pagina web que contenga como titulo de la pagina: Tipo de
Fuentes, centrado, tipos de fuente: Courier, color Aqua, despus dibujar una lnea color
negra. Con un prrafo centrado, tipo de fuente: Century, tamao 4, color azul. Incluir otro
prrafo alineado a la derecha, tipo de fuente: ComicSans o Arial, tamao 3, color verde. Por
ltimo una lnea con tipo de fuente: Georgia o Arial, tamao 2, color rojo. Guardar el
documento con el nombre de: tipo_fuente9.htm
<HTML>
<HEAD><TITLE>Tipo de Fuentes </TITLE></HEAD>
<BODY>
<H1 ALIGN ="Center"> <FONT FACE="Courier" COLOR= "Aqua">
Tipos de Fuente
</H1>
<HR COLOR="Black">
<P ALIGN ="Center">
<FONT FACE ="Century" SIZE="4" COLOR= "Blue">
El prrafo se muestra centrado, <BR> con tipo de fuente Century,
HTML .
by: magh 17
<BR> de color azul, <BR> tamao 2.
</FONT> <BR>
<P ALIGN ="Right">
<FONT FACE ="Comic Sans MS, Arial" SIZE="3" COLOR = "Green">
Este prrafo se muestra a la derecha, <BR> con tipo d fuente
Comic Sans, <BR> en caso de no encontrar la fuente, <BR>
entonces se aplicar la 2da opcin <BR>que es la fuente Arial.
</FONT><BR>
<P>
<FONT FACE="Georgia, Arial Black" SIZE="2" COLOR="Red">
Fin de la pgina.
</FONT>
</BODY>
</HTML>


Titulo de la pgina etiqueta title.
Contenido del documento
etiqueta body.
Etiqueta Allign, establece
alineacin del texto.
La etiqueta Font, controla las
propiedades de texto.
La etiqueta Face, Size, Color,
establece el tipo de fuente,
tamao y color del texto.
Etiqueta P, aplica al prrafo.
Etiqueta BR, salto de lnea.

PRACTICA 7: Disear una pgina web que contenga la definicin de: software, hardware
y firmware. La primer definicin aplique para la fuente: Comic Sans, tamao: 6, color: rojo,
alineacin: derecha. La segunda definicin aplique para la fuente: Century, tamao: 5, color:
azul, alineacin: centrada. La tercer definicin aplique para la fuente: Calibri, tamao: 4,
color: amarillo, alineacin: izquierda. Adems debe mostrar el titulo de la pagina: Conceptos
Actuales.

I II I. .1 10 0 C Ca ar ra ac ct t e er re es s e es sp pe ec ci i a al l e es s
Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas
se forman como un comando escrito entre los smbolos "<" y ">". Por tanto, si se quisieran
escribir estos caracteres como parte normal del texto, dara esto lugar a una ambigedad, ya
HTML .
by: magh 18
que el programa navegador podra interpretarlos como el comienzo o final de una etiqueta,
en vez de un carcter ms del texto.

Para resolver este problema, existen unos cdigos para poder escribir estos caracteres y
otros relacionados con las etiquetas.

Carcter Cdigo Descripcin Carcter Cdigo Descripcin
< < Signo de menor que á Letra
> > Signo de mayor que é Letra
& & Signo ampersand í Letra
" Comillas ó Letra
ñ Letra ú Letra
Ñ Letra Á Letra
ü Letra É Letra
Ü Letra Í Letra
¿ Signo Ó Letra
¡ Signo Ú Letra
¢ Signo de centavos ¼ Cuarto Fraccin
© Derechos reservados ½ Medio fraccin
® Marca registrada ¾ Tres cuartos
° Grados centgrados $ $ Signo de dlar
&#183 Punto a media lnea

Ejemplo 10: Disear una pgina web que contenga como titulo de la pagina: Titulo con
smbolo menor-mayor. Posteriormente una lnea de texto con el smbolo , en la siguiente
lnea incluir el smbolo de grados centgrados. Otra lnea que contenga suma de fracciones
+ = , una lnea con Nombres propios con acentos y por ultimo una lnea que muestre
el signo de centavos () y de dlares($). Guardar el documento con el nombre de:
texto_especial10.htm

<HTML>
<HEAD><TITLE> < Titulo simbolo menor-mayor > </TITLE></HEAD>
<BODY>
Linea de texto con derechos reservados © <BR>
La temperatura ambiente es de: 28 ° <BR>
Al sumar ¼ + ½ = ¾ <BR>
Nombre con acentos: María Hernández <BR>
Edemetrio le pagan a &#162 10 el segundo, <BR>
por tanto al da gana $ 48.
</BODY>
</HTML>

HTML .
by: magh 19

PRACTICA 8: Disear una pgina web que las marcas de varias empresas: Microsoft ,
Intel , adems incluya el siguiente texto: Microsoft obtuvo ganancias de ms que Intel en
el primer trimestre del ao. Adems debe mostrar como titulo de la pagina: Empresas.

I II I. .1 11 1 E Ef f e ec ct t o os s e en n e el l T Te ex xt t o o
Hay un elemento que permite rodear un texto con un marco, y opcionalmente ponerle una
etiqueta. Se trata del elemento: <FIELDSET>. Recuerda que si no tienes la versin adecuada
de navegador, en los siguientes ejemplos slo vers el texto, pero no los enmarcados.
<FIELDSET>..
</FIELDSET>
Permite enmarcar un texto o una imagen.
<LEGEND>..
</LEGEND>
Permite agregar una leyenda al texto enmarcado, simulando un
titulo.
ALIGN=.. La posicin de la etiqueta: LEFT (por defecto), RIGHT o CENTER

Ejemplo 11: Disear una pgina web que contenga como titulo de la pgina: Texto en
recuadro. Posteriormente realizar el recuadro con: Texto dentro de un marco. Por ltimo
mostrar una imagen con el texto: imagen y texto dentro del recuadro. Debe guardar el
documento con el nombre de: efecto_texto11.htm

<HTML>
<HEAD><TITLE>Texto en Recuadro</TITLE></HEAD>
<BODY>
<FIELDSET> <LEGEND> Titulo</LEGEND> Texto dentro de un marco
</FIELDSET>
<BR> <BR> <BR> <BR> <BR>
<FIELDSET> <LEGEND> Imagen</LEGEND>
Imagen y Texto
</FIELDSET>
</BODY>
</HTML>
El s mbolo &#169,
muestra el Copyright.

El s mbolo °
muestra el grado
centigrado.

Los simbolos ¼
½ ¾
muestran , , .

El smbolo &a, muestra la
letra a con acento
HTML .
by: magh 20

PRACTICA 9: Disear una pgina web que contenga mascotas del mundo acutico.
Incluya el nombre de las tres mascotas dentro de recuadros separados. Adems debe
mostrar como titulo de la pagina: Mascotas Acuticas.

I II I. .1 12 2 T Te ex xt to o e en n m mo ov vi i m mi i e en nt t o o
El elemento <MARQUEE> </MARQUEE>sirve para hacer que el contenido de un bloque
se desplace horizontalmente a lo ancho del mismo. Adems de texto el bloque puede
contener tambin imgenes.

<MARQUEE>
</MARQUEE>
Permite dar el efecto de texto en movimiento.
DIRECTION
=..
Establece en que direccin se mueve el contenido del bloque en la
pantalla. Tiene dos valores: LEFT (por defecto) y RIGHT.
BEHAVIOR
=..
Determina cmo se mueve el contenido del bloque en la
pantalla. Puede tener tres valores:
SCROLL har que el contenido del bloque aparezca por un
extremo, desaparezca por el contrario y vuelva aparacer por
donde comenz.
SLIDE (por defecto) hace que el contenido del bloque se
deslice hacia el lado indicado por direction y se detenga al
llegar al lado opuesto. Solamente volver a moverse si la
pgina es cargada de nuevo.
ALTERNATE El contenido del bloque se mover alternativamente
en una direccin y otra, comenzando por la indicada por direction

La etiqueta FIELDSET y
LEGEND, muestran el titulo
del recuadro.

HTML .
by: magh 21
LOOP=n N es un nmero que indica las veces que el movimiento
programado se realizar. El valor INFINITE (por defecto)
producir un bucle infinito.
scrolldelay=n N indica el tiempo de espera en milisegundos que se debe aplicar
entre cada redibujado del bloque, es decir, la velocidad del
movimiento.
scrollamount=n N indica el nmero de pixels que se deben tomar entre cada
redibujado del bloque. Por defecto, tomar el bloque entero. Este
parmetro debe utilizarse con cuidado, puede ser contradictorio con
el anterior SCROLLDELAY.
ALIGN=.. Indica la posicin de la etiqueta: LEFT (por defecto), RIGHT y
CENTER
BGCOLOR
=rrggbb
Indica el color de fondo del bloque

Ejemplo 12: Disear una pgina web que contenga como titulo de la pgina: Texto en
recuadro. Posteriormente realizar el recuadro con el Titulo y dentro del un texto. Por ltimo
mostrar una imagen y texto en un recuadro. Debe guardar el documento con el nombre de:
texto_movimiento12.htm

<HTML>
<HEAD><TITLE>Texto en Movimiento
</TITLE></HEAD>
<BODY BGCOLOR="BLUE">
<MARQUEE BGColor="YELLOW" >
Texto en Movimiento
</MARQUEE>
<BR> <BR> <BR>
<MARQUEE BGColor="RED" >
<IMG SRC="aguilas.jpg"> Imagen y Texto en Movimiento
</MARQUEE>
<P Align="Center">
<FONT COLOR="red">
<BR> <BR> <BR>
La etiqueta Marquee, define el objeto en movimiento <BR>
BgColor, define el color de fondo del bloque en movimiento<BR>
</FONT>
</BODY>
</HTML>

HTML .
by: magh 22

PRACTICA 10: Disear una pgina web que contenga los datos personales: nombre,
direccin, telfono y correo electrnico, los cuatro datos con tipo de fuente y color diferente
adems de agregar movimiento con direcciones opuestas (derecha-izquierda). El titulo de la
pagina: Datos en Movimiento.

I II I. .1 13 3 D Di i s se e o o d de e L Li i s st ta as s
Cuando se presenta informacin en papel, probablemente incluye listas de pasos numeradas
o con vietas; adems de listas sangradas para organizar la informacin, como trminos y
sus respectivas definiciones o el lineamiento de un plan de negocios. Puesto que las listas
son tan comunes, HTML proporciona etiquetas que automticamente sangran el texto y
agregan, nmeros o vietas delante de cada elemento de la lista.

Hay tres tipos de listas HTML, las cuales son:
Listas ordenadas: son listas que tienen nmeros o letras frente a cada elemento.
Listas no ordenadas: son listas con un smbolo especial de vieta delante de cada
elemento.
Lista de definiciones: son listas sin ningn nmero o smbolo delante de cada elemento.

En la siguiente tabla se muestran las etiquetas utilizadas para crear las listas, que sern
utilizadas en las pginas Web.

La etiqueta MARQUEE,
permite mostrar texto en
movimiento.

HTML .
by: magh 23
<OL>...</OL> Lista ordenada
<LH>...</LH> Encabezado de la lista ordenada.
<LI> Elemento de la lista ordenada.
TYPE ="..." Tipo de numeracin que se utiliza para etiquetar la lista. Los
valores posibles son: A, a, I, i, 1.
START ="..." El valor con el cual comienza la lista.

<UL>...</UL> Lista no ordenada
<LH>...</LH> Encabezado de la lista no ordenada.
<LI> Elemento de la lista no ordenada.
TYPE ="..." El smbolo de vieta especifico que se utiliza para marcar los
elementos de la lista. Los valores posibles son: Disc, Circle
y Square.

<LI>...</LI> Un elemento de lista que debe utilizarse con <OL>o <UL>.
TYPE ="..." Tipo de numeracin que se utiliza para etiquetar la lista. Los
valores posibles son: A, a, I, i, 1.
VALUE ="..." El valor numrico que debe tener este elemento (afecta a
este elemento y a todos los que le siguen en la lista <OL>).

<DL>...</DL> Una lista de definicin.
<LH>...</LH> Encabezado de la lista definida.
<LI> Elemento de la lista definida.
<DT> Un trmino de definicin, como parte de una lista de
definicin.
<DD> La definicin correspondiente a un trmino de definicin,
como parte de una lista de definicin.

Ejemplo 13: Disear una pgina web que contenga como ttulo Lista de los Continentes,
adems de mostrar la lista de los nombres de los continentes con numeracin ordinal,
numeracin romana y con letras. Debe guardar el documento con el nombre de:
lista_ordenada13.htm

<HTML>
<HEAD><TITLE> "Lista de los Continentes" </TITLE></HEAD>
<BODY>
<h1 ALIGN="Center">Continentes</h1> <HR>
<OL type=1>
<LH>En forma numeracion ordinal:</LH>
<LI>Europa
<LI>Asia
<LI>frica
<LI>Amrica
<LI>Oceana
</OL>
<HR>
<OL type=I>
HTML .
by: magh 24
<LH>En forma de numeracion romana:</LH>
<LI>Europa
<LI>Asia
<LI>frica
<LI>Amrica
<LI>Oceana
</OL>
<HR>
<OL type=A>
<LH>En forma de numeracin de letras:</LH>
<LI>Europa
<LI>Asia
<LI>frica
<LI>Amrica
<LI>Oceana
</OL>
</BODY>
</HTML>

HTML .
by: magh 25
PRACTICA 11: Disear una pgina web que contenga una lista ordenada de los lenguajes
de programacin orientado a la web. Adems debe mostrar como titulo de la pagina:
Lenguajes de Programacin Orientados a la Web.

Ejemplo 14: Disear una pgina web que contenga como titulo Lista definida por usuario
debe mostrar una lnea centrada, color amarillo, que contenga la clasificacin del software,
despus el concepto con la propiedad de color azul con el elemento que lo defina, por ltimo
el concepto con la propiedad de color verde con el elemento que lo defina. Debe guardar el
documento con el nombre de: lista_definida14.htm

<HTML>
<HEAD> <TITLE> Lista Definida por usuario</TITLE>
</HEAD>
<BODY>
<h1 align="Center"> <Font Color="Red">
La clasificacin principal del software,<BR>
con la finalidad de usar listas definidas. </Font>
</h1>
<HR>
<DL>
<DT> <Font Color="Blue"> <B> Software de sistema </B> </Font>
<DD> Se le considera a todos los sistemas operativos<BR>
que controlan los trabajos de la computadora.
<DT> <Font Color="Green"> <I> Software de aplicacion </I> </Font>
<DD> Se considera a todas las aplicaciones que dirige <BR>
las distintas tareas para las que se utilizan las computadoras.
</DL>
</BODY>
</HTML>

PRACTICA 12: Disear una pgina web que contenga como titulo Lista definida por
usuario, que contenga la clasificacin de los dispositivos de hardware, despus la definicin.
La etiqueta DL define una
lista.

La etiqueta DT, agrega uan
elemento a la lista.

La etiqueta DD, agrega el
texto al elemento de la lista.

HTML .
by: magh 26

I II I. .1 14 4 C Cr re ea ac ci i n n d de e V V n nc cu ul l o os s ( (E En nl l a ac ce es s o o H Hi i p pe er rv v n nc cu ul l o os s) )

La caracterstica que ms ha influido en el espectacular xito del Web ha sido, aparte la de
su carcter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el
mundo por medio de enlaces hipertexto. En general, los enlaces tienen la siguiente
estructura: <A HREF="XX">YY </A>

Donde XX es el destino del enlace (Obsrvese las comillas). YY es el texto indicativo en la
pantalla del enlace (con un color especial y generalmente subrayado)

Tipos de enlaces
1. Enlaces dentro de la misma pgina
2. Enlaces con otra pgina nuestra o con una pgina del web de otro usuario o servidor
3. Enlaces con una direccin de e-mail

<A>...</A> Con el atributo HREF, se crea un vnculo hacia otro documento
o ancla; con el atributo NAME; se crea un ancla hacia la cual
puede establecerse un vnculo.
HREF ="..." La direccin de un documento o punto de ancla al cual se
apunta.
NAME ="..." El nombre de este punto ancla en el documento.

Ejemplos:
Los enlaces con documentos externos al actual. Se indicar una URL que definir el
documento al que se accede si se sigue el enlace. La forma de indicarlo ser:

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

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

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

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

En este caso aparecer la imagen con el borde resaltado para indicar que es un hiperenlace.
Es importante indicar el nombre completo de la maquina a la que se accede, es decir el
nombre y el dominio. Si se indica www, las maquinas de la red local si podrn localizarlo,
pero para maquinas externas la referencia podra ser a otra maquina

HTML .
by: magh 27
URL absolutas y relativas

Para definir la URL podemos utilizar direcciones absolutas o relativas.

Por direcciones absolutas entenderemos la URL completa, es decir:
http://maquina.dominio/camino/archivo.html.

En el caso de las relativas todo lo que no pongamos de la URL se tomar de la URL del
documento que contiene el hiperenlace, por ejemplo si no indicamos el servidor, se
considerar el actual y si solo indicamos un archivo html se considerar que se encuentra en
el servidor y directorio del documento que lo referencia.

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

Puede comenzar de alguna de las siguientes formas:
Por una barra /, que indica que el camino del archivo se especifica desde el directorio raiz del
servidor.

Por dos puntos y una barra ../, significa subir en la estructura del directorio. Se considerar a
partir del directorio anterior. Por un nombre de archivo o directorio, considerndose este a
partir del directorio actual.

Vincular a un lugar especfico en la misma pgina

Los vnculos especficos en la misma pgina, son creados con la misma etiqueta <A>, pero
utilizando su atributo NAME. Este atributo funciona como una etiqueta que permite bifurcar a
un lugar en especfico dentro de la pgina, o en otra.

Ejemplo 15: Disear una pgina web que contenga como titulo Vnculos en pgina, debe
mostrar crear el ancla arrb, despus una lnea que indique vnculos en la misma pgina,
despus dos lneas que haga referencia a la mitad y al final del documento web, un prrafo
con fuente Comic, color verde, varios saltos de lnea, otro prrafo con formato predefinido,
crear el ancla mitad, varios saltos de lnea, otro prrafo con formato predefinido, crear el
ancla fin y el enlace inicio de pagina. Guarde la pgina como: vinculo_misma_web15.htm

<HTML>
<HEAD><TITLE>Vinculos en Pagina</TITLE></HEAD>
<BODY>
<A Name ="Arrb"></A>
<H1 Align ="Center">Vinculos en la<BR>misma pagina</H1><HR>
<A Href ="#Mitad">A la mitad de la pgina</A><BR><P>
<A Href ="#Fin">Fin de la pgina</A><BR><P>
<FONT FACE ="Comic Sans, Arial" SIZE="3" COLOR = "Green">
Por lo regular este tipo de vnculos se crean, <BR>
cuando existe la necesidad de que el usuario<BR>
se desplace a un punto en especifico,<BR>
HTML .
by: magh 28
pero en la misma pgina;<BR>
es decir, al inicio, a la mitad, al final <BR>
u otro lugar en especifico.<BR><P>
Observe como funciona esta pgina.
</FONT> <BR> <P> <BR> <BR> <BR>
<PRE>
Si la pagina se cargara
en el navegador,
se vera de la
siguiente manera:
</PRE>
Estas en el punto medio de la pgina
<A Name ="Mitad"></A>
<BR> <BR> <br> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<PRE>
Este contenido de la pagina
se cargara al final de la ventana.
Si no aprecias el efecto agrega mas saltos de linea.
</PRE>
Fin de la pgina<BR><P>
<A Name ="Fin"></A>
<A Href ="#Arrb">Inicio de pgina</A>
</BODY>
</HTML>

La etiqueta A Name, define el
ancla dentro de un mismo
documento.

La etiqueta A Href ="#, define el
vinculo dentro del mismo
documento.
HTML .
by: magh 29
PRACTICA 13: Disear una pgina web que contenga un reportaje o investigacin de
tema de su inters (deporte, espectculo, moda, etc.), el contenido debe estar organizado en
tres secciones, para que el usuario pueda navegar por la pgina a travs de vnculos, es
decir vnculos: arriba, centro y abajo. Muestre el titulo de la pagina: Reportaje.

Crear vnculos con otra pgina Web.
Cuando se crean este tipo de vnculos, por lo regular son a una direccin especfica en la
Web, como es el caso de algn sitio Web; por ejemplo: buscadores, correo electrnico, etc.

Cuando desea conectar su pgina con otra que se encuentre en la Web, slo tiene que
escribir la direccin (URL), en el atributo HREF y para que este vnculo funcione, debe estar
colgado a la Internet. En caso de no estar conectado, no podr anclarse al sitio Web.

Ejemplo 16: Disear una pgina web que contenga como titulo Vnculos web, debe
mostrar una lnea centrada, color azul, que contenga Vnculos a otros sitios web, despus
una lnea de color gris, fuente: Comic Sans o Arial, tamao 3 indicando el texto a
continuacin se muestran cinco vnculos, por ltimo centra los prrafos siguientes haciendo
referencia a los 5 sitios en donde se puede enlazar. Debe guardar el documento con el
nombre de: vinculo_web16.htm

<HTML>
<HEAD><TITLE>Vnculos Web</TITLE></HEAD>
<BODY>
<H1 Align ="Center" Color="Blue"> Vinculos a Otros <BR>
Sitios Web </H1>
<FONT FACE ="Comic Sans, Arial" SIZE="3" COLOR = "Gray">
A continuacin, se muestran cinco <B>vnculos</B> <BR>
que lo llevarn a los siguientes sitios:</FONT><BR><P>
<Div align="Center">
<A Href ="http://www.hotmail.com"> Correo Electronico de MSN
</A><BR><P>
<A Href ="http://www.google.com.mx"> Buscador Google</A> <BR>
<P>
<A Href ="http://www.tvazteca.com">TV Azteca</A><BR><P>
<A Href ="http://e-magh.com.mx"> Pagina Personal </A> <BR> <P>
<A Href ="http://www.sep.gob.mx">SEP</A>
</Div>
</BODY>
</HTML>

HTML .
by: magh 30

PRACTICA 14: Disear una pgina web que muestre enlaces a distintos blogs personales
como: myspace, hi5, facebook, metroflog, twitter. Debe mostrar como titulo de la pagina:
Redes Sociales.

PRACTICA 15: Crear dos pginas web que contenga informacin del lugar en donde
naci. Debe enlazarlas una con otra, es decir al ser presionado la palabra1 avance a la
pgina 2, al ser presionada la palabra2 retroceda a la pagina 1. Debe mostrar como titulo de
la paginas: Palabras con Enlaces.

I II I. .1 15 5 I In ns se er rc ci i n n d de e I Im m g ge en ne es s
Una de las caractersticas principales del lenguaje html y de la www es la introduccin de
elementos multimedia. En un documento html se puede incluir cualquier imagen en alguno de
los siguientes formatos grficos: GIF, J PEG BMP

El formato GIF es ms recomendado para iconos, grfico y el formato J PEG es ms til para
imgenes reales como paisajes, personas.

Se recomienda, primero transferir o copiar el archivo de imagen al mismo directorio en que
se encuentra el archivo de texto HTML. Inserte la etiqueta HTML en el punto del texto donde
desea que aparezca la imagen, adems de incluir el nombre del archivo de imagen.
La etiqueta encargada de mostrar imgenes en HTML es IMG y tiene el siguiente formato:
<IMG SRC="URL de la Imagen" TITLE="Texto alternativo a la imagen" ALIGN ="...">

La etiqueta A Href, define un
vnculo a un sitio web.

La etiqueta NAME, permite definir el
texto que contiene el vnculo.
HTML .
by: magh 31
<IMG> Inserta una imagen en la lnea del documento.
SRC ="..." nico atributo obligatorio, indica la direccin o nombre de archivo
de la imagen.
TITLE ="..." Indicar un texto alternativo a mostrar si no fue posible mostrar la
imagen.
ALIGN ="..." Determina la alineacin de la imagen dada. Si vale Left o Right, la
imagen se alinea a la columna izquierda o derecha y todo el texto
siguiente fluye al lado de la imagen.
Los valores: Top, Middle, Bottom, AbsMi ddle, o AbsBottom,
determinan la alineacin vertical de la imagen con otros elementos
de la misma lnea.
WIDTH=xx Indica el ancho al que se mostrar la imagen, escalndola a este
tamao. Tambin se expresar en pixeles o en tanto por ciento
HEIGHT=xx Determina el alto de la imagen a mostrar, se especifica en puntos
de la pantalla (pixeles) o en tanto por ciento sobre el tamao del
documento. En caso de que la imagen sea mayor o menor se
escalar a este tamao

Ejemplo 17: Disear una pgina web que contenga como titulo Imgenes, debe mostrar
una lnea de texto centrada, color rojo, que contenga Esta pgina contiene imgenes,
despus una lnea de color rojo, enseguida un texto de fuente: Comic o Arial, tamao: 3,
color: azul y junto a este una imagen, en el siguiente prrafo mostrar primero la imagen y
junto a esta un texto de fuente: Century o Arial, tamao: 2, color: verde. Debe guardar el
documento con el nombre de: imagen17.htm

<HTML>
<HEAD>
<TITLE>Imagenes</TITLE>
</HEAD>
<BODY>
<H1 Align ="Center" Color="Red">Esta pagina contiene imagenes:
<BR></H1> <HR Color="Yellow">
<FONT FACE ="Comic Sans, Arial" SIZE="3" COLOR = "Blue">
Primero se muestra el Texto y en la misma linea muestra la imagen
<IMG SRC="aguilas.jpg" TITLE="Club America">
</FONT> <BR> <P>
<FONT FACE ="Century, Arial" SIZE="2" COLOR = "Green">
<IMG SRC="aguilas.jpg" TITLE="Club America">
Primero se muestra la Imagen y en la misma linea muestra el texto
</FONT> <BR> <P>
</BODY>
</HTML>

HTML .
by: magh 32

Ejemplo 18: Disear una pgina web que contenga como titulo Imagen Combinada, debe
mostrar una lnea de texto centrada, color rojo, que contenga Esta pgina contiene
imgenes, despus una lnea de color rojo, enseguida un texto de fuente: Comic o Arial,
tamao: 3, color: azul, alineado a la mitad respecto a la imagen tomada del subdirectorio
imgenes, en la siguiente lnea mostrar primero la imagen tomada del subdirectorio modelos
y junto a esta un texto de fuente: Century o Arial, tamao: 2, color: verde, centrado respecto
a la imagen. Debe guardar el documento con el nombre de: subimagen18.htm

<HTML>
<HEAD> <TITLE>Imagen Combinada </TITLE> </HEAD>
<BODY>
<H1 Color="Red" Align="Center">La pagina tiene imgenes y texto:
<BR> </H1> <HR Color="Red">
<FONT FACE ="Comic Sans, Arial" SIZE="3" COLOR = "Blue">
Primero se muestra el Texto y en la siguiente linea se muestra la
imagen tomada del directorio imagen. Alineado el texto a la mitad
de la imagen
<IMG SRC="imagen/firefox.jpg" TITLE="Browser" ALIGN="Middle">
</FONT> <BR> <P>
<FONT FACE ="Century, Arial" SIZE="2" COLOR = "Green">
<IMG SRC="imagen/logo.jpg" TITLE="Plantel" ALIGN="Middle">
Primero se muestra la imagen tomada del directorio modelos <BR>
y enseguida se muestra el texto. Alineado a la mitad de la imagen
</FONT> <BR> <P>
</BODY>
</HTML>

La etiqueta IMG SRC,
define la imagen a mostrar.

La etiqueta TITLE, muestra
un texto cuando el usuario
posiciona el puntero
encima de la imagen.
HTML .
by: magh 33

Ejemplo 19: Disear una pgina web que contenga como titulo Distintas Imgenes, debe
mostrar una lnea de texto centrada, que contenga La pagina tiene imgenes con distinto
tamao, despus una lnea de color verde, enseguida un texto con una imagen de tamao
normal, en el siguiente prrafo texto con una imagen aumentando el tamao de la misma con
loa atributos: width, height. Por ltimo un texto y una imagen con la referencia o el vnculo
al Correo de Hotmail. Debe guardar el documento con el nombre de: imagen_gde19.htm

<HTML>
<HEAD> <TITLE> Distintas Imagenes </TITLE> </HEAD>
<BODY>
<H1 Align="Center">La pagina tiene imagenes con distinto tamao
<BR></H1>
<HR Color="Green">
Se muestra la imagen de tamao normal
<IMG SRC="cbtis12.jpg"> <BR> <P>
Se muestra la imagen mas grande, utilizando:WIDTH,HEIGHT
<IMG SRC="cbtis12.jpg" WIDTH=200, HEIGHT=200> <BR> <P>
Si desea que la imagen sirva como vinculo a la pgina del Hotmail:
<A HREF="http://www.hotmail.com"><IMG SRC="cbtis12.jpg"> </A>
</BODY>
</HTML>


La etiqueta ALIGN,
determina la alineacin de
la imagen.
HTML .
by: magh 34

PRACTICA 16: Disear una pgina web que contenga como titulo Mi Personalidad. Debe
contener una serie de imgenes que definan su personalidad, adems de realizar una
pequea descripcin del significado de la imagen.

PRACTICA 17: Crear tres pginas web con una foto cada una. Debe enlazarlas una con
otra, es decir al ser presionada la foto1 avance a la pgina 2, al ser presionada la foto2
avance a la pgina 3, al ser presionada la foto3 retroceda a la pagina 1. Debe mostrar como
titulo de la paginas: Fotos con Enlaces.

I II I. .1 16 6 F Fo on nd do os s c co on n C Co ol l o or r U Un ni i f f o or rm me e
Se consigue aadiendo el comando BGCOLOR a la etiqueta <BODY>, de la siguiente
manera: <BODY BGCOLOR="#rrggbb">
rr Es un nmero indicativo de la cantidad de color rojo
gg Es un nmero indicativo de la cantidad de color verde
bb Es un nmero indicativo de la cantidad de color azul

Estos nmeros estn en numeracin hexadecimal. Esta numeracin se caracteriza por tener
16 dgitos. Estos dgitos son: 0 1 2 3 4 5 6 7 8 9 A B C D E F.

Las etiquetas WIDTH,
HEIGHT determinan ancho
y alto de la imagen.

La etiqueta A HREF,
especifica un vnculo a un
sitio web.
HTML .
by: magh 35
Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el FF. As, por ejemplo,
el color rojo es el #FF0000, porque tiene el mximo de rojo y cero de los otro dos colores.
Los colores primarios: Otros colores son:
#FF0000 Rojo #FFFFFF Blanco
#00FF00 Verde #000000 Negro
#0000FF Azul #FFFF00 Amarillo

Ejemplo 20: Disear una pgina web que contenga como titulo Color de Fondo, debe
mostrar una lnea de texto centrada, que contenga el texto Color de Fondo Amarillo, lnea de
separacin color rojo. Un prrafo de color azul. Despus un texto con un vinculo, en otro
prrafo texto con imagen y por ltimo texto e imagen con vinculo a yahoo. Debe guardar el
documento con el nombre de: color_fondo20.htm

<HTML>
<HEAD><TITLE>Color de Fondo</TITLE></HEAD>
<BODY BGCOLOR="#FFFF00">
<H1 Align="Center"> Color de Fondo Amarillo <BR> </H1>
<HR Color="Red">
<FONT COLOR="blue">
Se muestra una linea de texto en color azul
</FONT> <BR> <BR> <BR> <BR> <BR>
<FONT COLOR="blue">
Se muestra una linea de texto <BR>
<A Href="http:/mx.yahoo.com" TITLE="Yahoo">CON VINCULO </A>
Se muestra una imagen
<IMG SRC="cbtis12.jpg"> <BR> <BR> <BR>
Se muestra una imagen con vinculo
<A Href="http:/www.cbtis12.edu.mx"> <IMG SRC="cbtis12.jpg">
</BODY>
</HTML>

La etiqueta BODY BGCOLOR, establece
el color de fondo de la pgina web.

La etiqueta IMG SRC, define la
imagen a mostrar.

La etiqueta A HREF, especifica un
vnculo a un sitio web.

HTML .
by: magh 36
PRACTICA 18: Disear una pgina web que contenga como titulo Fondo, debe mostrar
una imagen y texto en color de su eleccin, incluya un color de fondo que haga contraste con
su texto e imagen.

I II I. .1 17 7 C Co ol l o or re es s d de el l t t e ex xt t o o y y d de e l l o os s e en nl l a ac ce es s
Si no se variasen los colores habituales del texto y de los enlaces (negro y azul,
respectivamente), podra ocurrir que su lectura contra un fondo oscuro se dificultara o
incluso imposible, si el fondo fuese precisamente negro o azul. Para evitar esto, se pueden
escoger los colores del texto y de los enlaces, aadiendo a la etiqueta Body lo siguiente:

<BODY>
.
</BODY>
Representa algunos atributos que son de definicin global para
todo el documento, estos definirn los colores y el fondo del
documento web.
background
="url"
Definir la imagen que se utilizar de fondo del documento HTML,
la URL definida ser el camino a una imagen. Esta se muestra
detrs (al fondo) del texto y las imgenes del documento HTML.
Si la imagen no rellena todo el fondo del documento, esta ser
reproducida tantas veces como sea necesario.
TEXT ="..." Cambia el color de la totalidad del texto de la pgina
LINK ="..." Especifica el Color de los enlaces
VLINK ="..." Especifica el color de los enlaces visitados
ALINK="..." Especifica el color de los enlaces activos (el que adquieren en el
momento de ser pulsados)

Los cdigos de los colores son los mismos que se han visto con anterioridad. La etiqueta,
con todas sus posibilidades, sera:

<BODY BACKGROUND="URL" BGCOLOR=#rrggbb TEXT=#rrggbb
LINK=#rrggbb VLINK=#rrggbb ALINK="#rrggbb">

Ejemplo 21: Disear una pgina web que contenga como titulo Imagen de Fondo, debe
mostrar una lnea de texto centrada, que contenga Uso de Imagen como fondo, lnea de
separacin color rojo. Una lnea de texto color verde. Despus un texto color blanco y por
ultimo una lnea de texto. Guarde el documento con el nombre de: body_atributos21.htm

<HTML>
<HEAD> <TITLE> Imagen de Fondo </TITLE> </HEAD>
<! Background, toma la imagen del subdirectorio: imagen>
<! TEXT, agrega color al texto de la pagina que no tiene color asignado>
<BODY BACKGROUND="imagen/oso.jpg" TEXT="Yellow">
<H1 Align="Center">Imagen como Fondo de la Pagina
<BR></H1> <HR Color="Red">
<FONT COLOR="Blue"> <B>
HTML .
by: magh 37
Se muestra una linea de texto en color azul </B>
<FONT COLOR="White">
Se muestra una linea de texto en color blanco <BR>
Otra linea de texto con el color especificado <BR>
en el atrbuto Text del Body
</BODY>
</HTML>

La etiqueta BODY BACKGROUND,
establece una imagen de fondo
de la pgina web.

La etiqueta TEXT, en caso de
que no tenga asignado un color
especfico, toma el color que de
en esta etiqueta.

HTML .
by: magh 38
Ejemplo 22: Disear una pgina web que contenga como titulo Atributos del Body, debe
mostrar una lnea de texto centrada, que contenga Atributos del Body, lnea de separacin
color rojo. Una lnea de texto con una palabra que tenga un link. Despus un texto que tenga
link hacia un direccin de correo electrnico. Debe guardar el documento con el nombre de:
body_atributos22.htm
<HTML>
<HEAD>
<TITLE>Atributos del Body</TITLE>
</HEAD>
<! BGColor, especificamos color de fondo "AZUL">
<! TEXT, especifica color de todo el texto de la pagina "AMARILLO">
<! LINK, especifica el color que tomara cualquier texto con link "ROJ O">
<! VLINK, especifica el color que tomara cualquier link visitado "VERDE">
<! ALINK, especifica el color que tomara el ultimo link visitado "BLANCO">
<BODY BGColor="Navy" TEXT="Yellow"
LINK="Red" VLINK="Green" ALINK="White">
<H1 Align="Center">Atributos del Body
<BR></H1>
<HR Color="Red"><P><FONT COLOR="Black" SIZE="5">
Se muestra una linea de texto en color negro con
<A Href="http://www.hotmail.com">enlace </a>de color rojo
</FONT></P>
<BR>Cuando se haga clic sobre es link,
<br>cambiara al color especificado (blanco) es el ultimo link visitado
<BR>y por ultimo cambiara al color especificado (verde)
<BR><BR>
Texto que permite al usuario indicar
<A HREF="MAILTO:maghtin@yahoo.com.mx">contacto </A>.
Cualquier duda o comentario.
<BR><BR>
Otra linea de texto con el color especificado <BR>
en el atributo Text del Body
</BODY>
</HTML>

HTML .
by: magh 39

PRACTICA 19: Disear una pgina web que contenga como titulo Atributos del
Documento. Una lnea de texto con una palabra que tenga un link hacia un sitio web de su
preferencia, otra lnea de texto que tenga link hacia su direccin de correo electrnico; ambos
links agregue la propiedad de color verde y cuando sea visitado que cambie a blanco.

I II I. .1 18 8 D Di i s se e o o d de e t t a ab bl l a as s
Permite la representacin de datos por filas y columnas, en forma tabular. La definicin es
muy flexible indicando solo los elementos que forman cada fila y columna, calculndose de
forma automtica el tamao que deben tener las celdas. En una tabla podemos introducir
cualquier elemento del lenguaje html como: imagenes, enlaces, texto, listas, cabeceras, etc.
<TABLE>
</TABLE>
Es la etiqueta que permite definir una tabla.
border=n Permite definir una tabla con un borde, el grosor es de n pxeles.
cellspacing=n Indica el espacio que debe existir entre las distintas celdas de la
La etiqueta BGColor, especifica el
color de fondo de la pgina.
La etiqueta TEXT, especifica color de
todo el texto en caso de que no
tenga asignado un color.
La etiqueta LINK, especifica el color
que tomara cualquier texto con link.
La etiqueta VLINK, especifica el color
que tomara cualquier link visitado.
La etiqueta ALINK, especifica el color
que tomara el ltimo link visitado.

HTML .
by: magh 40
tabla. Por defecto ser 2. Si se indica 0 no habr ningn espacio
entre las celdas

cellpadding=n
Es la cantidad de espacio entre el borde de la celda y el contenido
de esta, por defecto es 1. Si se indica 0 las celdas aparecern sin
separacin.

width=valor o
porcentaje%:
Ser el ancho de la tabla, se puede indicar como valor absoluto o
como porcentaje del ancho del documento. En el primer caso se
definir en puntos y en el segundo en funcin del tamao del
documento. Se recomienda utilizar tamaos de tabla en porcentaje
del documento, ya que de esta forma la tabla queda
perfectamente ajustada al documento.

height=valor
o
porcentaje%
Definir el alto de la tabla, a igual que WIDTH, se puede indicar en
valor absoluto o en porcentaje. En este caso es ms recomendado
en valor absoluto ya que el alto es ms difcil que pueda coincidir
con la ventana.
rowspan Indicar el nmero de filas que ocupar est celda en la misma
fila. Es decir, permite combina celdas en una fila.
colspan Indicar el nmero de columnas que ocupar la celda actual,
obtendremos una celda que ocupa varias columnas. Combina
celdas en una columna
<caption>
..
</caption>
Especifica el titulo de la tabla, este se mostrar resaltado en la
parte superior externa de la tabla. Se mostrar centrado
horizontalmente.
align=top o
Bottom
Con el atributo ALIGN indicaremos si el titulo debe aparecer arriba
(TOP) o abajo (BOTTOM) de la tabla.
<TR>
</TR>
Permite formar cada fila de la tabla. Hay que repetirla tantas veces
como filas queremos que tenga la tabla.
align=left o
center o right
Indica la alineacin del elemento dentro de la celda, en este caso
afectar a todos los valores situados en la fila actual, tambin se
podr indicar individualmente en los elementos TD. Puede tomar
uno de los siguientes valores: LEFT: Alineacin a la izquierda de
la celda. RIGHT: Alineacin a la derecha de la celda. CENTER:
Indicar centrado.
valign=top
middle
bottom
Indicar la alineacin vertical del dato dentro de la celda. Se podr
especificar donde se colocarn los datos dentro de la celda.
Afectarn a toda la fila. Los valores que puede tomar son:
TOP: Parte superior de la celda. MIDDLE: Centrado verticalmente
dentro de la celda. BOTTOM: En la parte baja de la celda.
bgcolor=
rrggbb
Indicar el color de fondo que tendrn todas las celdas de la fila de
la tabla. El formato para definir los colores es el mismo que se usa
BODY.
<TD>..
</TD>
Permite formar las distintas celdas que contendr cada fila de la
tabla. Hay que repetirlas tantas veces como celdas queramos que
tenga la fila.
<TH>..
</TH>
Es utilizada para colocar encabezamientos en negrita sobre las
columnas

HTML .
by: magh 41
Ejemplo 23: Disear una pgina web que contenga como titulo Tabla Simple sin Borde,
debe mostrar una lnea de texto centrada, que contenga Uso de Tabla Sin Borde, lnea de
separacin color rojo. Un prrafo que explique las etiquetas de la tabla. Por ltimo se define
la tabla, se agrega una fila con 3 elementos, adems se agrega una 2da. fila con 3 elementos
Debe guardar el documento con el nombre de: tabla_sinborde23.htm

<HTML>
<HEAD> <TITLE>Tabla Simple sin Borde</TITLE> </HEAD>
<BODY>
<H1 Align="Center"> Tablas sin Borde
<BR></H1>
<HR Color="Red">
Con la etiqueta Table especificamos el inicio de una tabla:<BR>
La etiqueta TR,especifica la FILA. <BR>
La etiqueta TD,especifica cada elemento de la fila. <BR> <BR>
<TABLE Border>
<TR>
<TD>Elemento1 Fila1 <TD> Elemento2 Fila1 <TD> Elemento3 Fila1
<TR>
<TD>Elemento1 Fila2 <TD> Elemento2 Fila2 <TD> Elemento3 Fila2
</TABLE>
</BODY>
</HTML>

La etiqueta TABLE, define una
tabla.

La etiqueta Border, establece el
grosor del borde de la tabla.

La etiqueta TR, define una fila.

La etiqueta TD, define una
celda en la fila.
HTML .
by: magh 42
Ejemplo 24: Disear una pgina web que contenga como titulo Tabla Combinada, debe
mostrar una lnea de texto centrada, que contenga Tabla con Celdas Combinadas, lnea de
separacin. Un prrafo que explique las etiquetas de la tabla. Se define la tabla, se agrega
una fila con 1 elemento vaco y otro elemento que combinada 4 celdas de la fila, adems se
agrega una 2da. fila con 1 elemento que combina 2 celdas de la 1er. columna adems se
agregan 4 elementos de Texto a la misma fila, por ltimo se agrega una fila con 4 elementos
numricos. Debe guardar el documento con el nombre de: tabla_combinada24.htm

<HTML>
<HEAD> <TITLE>Tabla Combinada</TITLE>
</HEAD>
<BODY>
<H1 Align="Center">Tablas con Celdas Combinadas </H1> <HR>
La etiqueta TR, especifica la FILA. <BR>
La etiqueta TH ColSpan, permite combinar 4 celdas en la fila <BR>
La etiqueta TD, especifica cada elemento de la fila. <BR>
La etiqueta TH RowSpan, permite combinar 2 celdas en la columna
<BR> <BR> <BR>
<TABLE BORDER>
<TR>
<TD><TH COLSPAN=4>Grupos
<TR>
<TH rowspan=2 valign=bottom>alumnos<td> H <td> J <td> K <td> M
<TR>
<TD> 42 <TD> 42 <TD> 43 <TD> 43
</TABLE>
</BODY>
</HTML>

La etiqueta TABLE, define una
tabla.

La etiqueta Border, establece el
grosor del borde de la tabla.

La etiqueta TR, define una fila.

La etiqueta TH, establece el
encabezado de columna.

La propiedad ColSpan, indica el
nmero de columnas que ocupar la
celda actual (celda combinada).

celda en la fila.
HTML .
by: magh 43
Ejemplo 25: Disear una pgina web que contenga como titulo Tabla Azul Combinada,
debe mostrar una lnea de texto centrada, que contenga Tabla con Borde Color y Combinada
lnea de separacin color rojo. Un prrafo que explique las etiquetas de la tabla. Se define la
tabla, se agrega una fila con 2 elementos combinando 2 celdas de la fila, se agregan 3 filas
con 4 elementos cada fila. Guarde el documento con el nombre tablaColor_combina25.htm

<HTML>
<HEAD>
<TITLE>Tabla Azul Combinada </TITLE>
</HEAD>
<BODY>
<H1 Align="Center"> Tablas con Borde, Color y Celdas Combinadas
Border, especifica el ancho de borde de la tabla <BR>
BGColor, especifica el Color de Fondo de la tabla <BR>
Caption, muestra el titulo en la parte superior de la tabla <BR>
La etiqueta TH ColSpan,especifica combinar 2 celdas en la fila <BR>
La etiqueta TR,nuevamente especifica la FILA. <BR>
La etiqueta TD,incluye los elementos en las celdas en la fila <BR> <BR>
<TABLE BORDER=5 BgColor="Blue">
<Caption>Titulo Externo de Tabla </Caption>
<TR>
<TH COLSPAN=2>Futbol</TH><TH COLSPAN=2>Basketball</TH>
</TR>
<TR>
<td>america</td><th>morelia</td><td>chicago</td><td>lakers</td>
</TR>
<TR>
<td>atlas</td><td>monterrey</td><td>miami</td><td>snantonio</td>
</TR>
<TR>
<td>santos</td><td>pachuca</td><td>boston</td><td>nyork</td>
</TR>
</TABLE>
</BODY>
</HTML>

HTML .
by: magh 44

Ejemplo 26: Disear una pgina web que contenga como titulo Alineacin de Contenido,
debe mostrar una lnea de texto centrada, que contenga Alineacin de Contenido de los
Elementos, lnea de separacin color rojo. Un prrafo que explique las etiquetas de la tabla.
Se define la tabla con borde grosor 10 y centrada, se agrega una fila con 3 elementos como
titulo de columnas, se agregan dos filas ms con 3 celdas cada fila y se agrega el contenido.
Guarde el documento con el nombre tabla_alineacion26.htm

<HTML>
<HEAD>
<TITLE>Alineacion de Contentido</TITLE>
</HEAD>
<BODY>
<H2 Align="Center">Alineacion del Contenido de los Elementos<BR>
de las Celdas en las Tablas
<BR></H2>
<HR Color="Red">
La etiqueta TABLE, define
una tabla.

La etiqueta Border,
establece el grosor del
borde de la tabla.

La etiqueta Bicolor, define el
color de fondo de la tabla.

La etiqueta TR, define una
fila.


La propiedad ColSpan, indica el
nmero de columnas que ocupar
la celda actual (celda combinada).

celda en la fila.
HTML .
by: magh 45
Align, alinea toda la tabla al centro del documento.<BR>
La etiqueta TH,especifica el Titulo de las Columnas de la Tabla <BR>
Align, alinea el contenido de la celda: centro, derecha o izquierda <BR>
La etiqueta TD,especifica cada elemento de la fila. <BR> <BR>
<TABLE BORDER=10 Align="Center">
<TR>
<TH ALIGN=CENTER>C o n t i n e n t e
<TH ALIGN=CENTER>P a i s<TH ALIGN=CENTER>E s t a d o
<TR>
<TD ALIGN=LEFT>America <TD ALIGN=CENTER> Mexico <TD
ALIGN=RIGHT>Michoacan
<TR>
<TD ALIGN=RIGHT>Asia <TD ALIGN=CENTER> J apon
<TD ALIGN=RIGHT>J alisco
</TABLE>
</BODY>
</HTML>

una tabla.

La etiqueta Border,
borde de la tabla.

fila.


celda en la fila.
HTML .
by: magh 46
Ejemplo 27: Disear una pagina web que contenga como titulo Colores en la Celda, debe
mostrar una lnea de texto centrada, que contenga Uso de los Colores en cada Celda, una
lnea de separacin color rojo. Un prrafo que explique las etiquetas de la tabla.

Se define la tabla con borde grosor 5 y centrada, se agrega una fila con 3 elementos como
titulo de columnas con color de fondo de fila amarillo, despus se agrega una fila con color
de fondo azul agregando los elementos a cada celda y definiendo el color de la fuente. Por
ltimo se agrega una fila definiendo el color a cada, agregando los elementos a cada celda.
Guarde el documento con el nombre tabla_ColorCelda27.htm

<HTML>
<HEAD>
<TITLE>Colores en la Celda</TITLE>
</HEAD>
<!BgColor, especifica el color de fondo del documento>
<BODY BGcolor="Cyan">
<H2 Align="Center">Colores en Cada Celda<BR>
de la Tabla
<BR></H2>
<HR Color="Red">
<!Especificamos el Color de fuente azul.Establecemos Negrita>
<FONT Color="Blue"> <B>
La etiqueta TR,especifica la FILA.
BgColor establece color de fondo de la fila<BR>
La etiqueta TH,especifica el titulo de las columnas en la tabla <BR>
La etiqueta TR,especifica otra FILA. <BR>
La etiqueta TD,especifica cada elemento de la fila. <BR>
Font,especifica el color de fuente del contenido de la celda <BR> <BR>
</B> </FONT>
<TABLE BORDER=5 Align="Center">
<TR BGCOLOR=YELLOW>
<TH> Nombre <TH> Telefono <TH> Correo
<TR BGCOLOR=BLUE>
<TD> <FONT COLOR="WHITE"> Ana
<TD> <FONT COLOR="WHITE"> 533-33-33
<TD> <FONT COLOR="WHITE"> anny@yahoo.com.mx
</FONT>
<TR>
<TD BGCOLOR=GREEN>Betty
<TD BGCOLOR=WHITE> 533-33-33
<TD BGCOLOR=RED> betts@yahoo.com.mx
</TABLE>
</BODY>
</HTML>

HTML .
by: magh 47

PRACTICA 20: Disear una pgina web que contenga como titulo Agenda Azul, inserte
una Tabla con Borde y el fondo Color de su preferencia. Con la siguiente informacin:
Nombre, correo electrnico y pgina preferida. Estos dos ltimos datos deben contener el
vinculo correspondiente, ya sea a su correo y sitio web. Al menos de 5 personas

PRACTICA 21: Disear una pgina web que contenga de titulo directorio turstico, inserte
una tabla con la siguiente informacin: ciudad, contacto y una imagen.
La primer columna alineacin: centrada, fuente: arial, negrita, color: azul
La segunda columna alineacin derecha, fuente: comic sans, cursiva y enlace al email.
La tercer columna alineacin: centrada, incluya un enlace a la ciudad que se trate, en caso
de ser necesario ajuste la imagen a un tamao considerable.
Al menos de 6 ciudades.

una tabla.

La etiqueta Border,
borde de la tabla.

fila.

La propiedad Bgcolor,
establece el color de la
celda.


celda en la fila.
HTML .
by: magh 48
I II I. .1 19 9 M Mu ul l t t i i m me ed di i a a: : A Au ud di i o o y y V Vi i d de eo o
Como se ha explicado hasta ahora las posibilidades multimedia del lenguaje HTML se limita
a insertar imgenes dentro de un texto, mostrar un fondo en el documento y modificar los
colores que presentarn los distintos textos. Con las instrucciones bsicas de HTML que
hemos visto hasta ahora esto es lo mximo que se puede conseguir, la posibilidad de
mostrar vdeo o sonido en un documento HTML est limitada a la capacidad y a la
configuracin del navegador.

La forma bsica de incluir un archivo de un formato no reconocido por el navegador es
incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el navegador
llame a una aplicacin externa que trate este tipo de archivos. El navegador tendr definida
una lista aplicaciones que trabajarn con los formatos ms comunes de archivos de vdeo,
audio o imgenes. Para reproducir sonido, se utiliza la etiqueta con sus atributos:

<BGSOUND ..> Permite incluir msica de fondo en una pagina web. Se
incluye dentro de las etiquetas <HEAD></HEAD>
SRC=" Se indicar el archivo de audio que se debe reproducir. El
archivo podr ser de formato .wav, .au o midi
LOOP=n o
INFINITE
Indica cuantas veces se ejecutar la pieza musical, podr
indicarse un nmero o INFINITE que indicar de forma
indefinida.
VOLUME=n El volumen que se escuchar en el sonido (mnimo -10,000 y
mximo 0).

Los formato de vdeo ms habituales son: AVI y los MPEG. El que se puedan ver o no,
depender de que el formato utilizado sea compatible con nuestro reproductor multimedia.
Siempre que se incluyan archivos de vdeo, es buena idea acompaarlo de los "codecs"
necesarios para el reproductor. Los "codecs" son unos controladores que se instalan en tu
mquina y permiten que tu reproductor multimedia pueda decodificar correctamente los
distintos formatos de vdeo que existen, y que son muchos.

<IMG
DYNSRC...>
Permite la reproduccin de video en una pagina web.
DYNSRC="..." Indica la URL del archivo que se mostrar. El archivo podr
ser de formato .avi
LOOP=n o
INFINITE
Indica el nmero de veces que se mostrar el vdeo.
CONTROLS=
CONSOLE o
SMALLCONS
OLE
Indicar si se mostrarn los botones de control, que
permitirn para, volver a reproducir, rebobinar. Puede tomar
los valores de: CONSOLE (por defecto) o SMALLCONSOLE
START=
FILEOPEN
MOUSEOVER
Indica si la secuencia de vdeo empezar al abrir el archivo
(FILEOPEN) o cuando pase el cursor del ratn encima
(MOUSEOVER).
ALIGN= Sus valores top, bottom, center, left, right, middle y texttop
HEIGHT y HEIGHT (alto) y WIDTH (ancho) no pueden omitirse, ya que
HTML .
by: magh 49
WIDTH. sus valores por defecto no permiten ver ninguna imagen
real. Los tamaos Standard: 90x120, 120x160, 180x240,
240x320, 300x400

Ejemplo 28: Disear una pgina web que contenga como ttulo Msica de Fondo, que
reproduzca de forma automtica una meloda, establezca el color de fondo de la ventana
AzulAqua, mostrar un texto como encabezado y por ultimo un prrafo describiendo cada
etiqueta del cdigo. Guarde el documento con el nombre sonido_fondo28.htm

<HTML>
<HEAD>
<TITLE>Musica de Fondo</TITLE>
<BGSOUND SRC="cambio.mid">
<EMBED SRC="cambio.mid" WIDTH=2 HEIGHT=0 AUTOSTART="TRUE">
</HEAD>
<BODY BGcolor="Aquamarine">
<H1 Align="Center">Deleita tu oido con musica de fondo <BR>
<P Align="Center">
<FONT COLOR=BLUE>
bgsound src,especifica el sonido a reproducir automaticamente IE<br>
embed src,especifica el sonido a reproducir automaticamente NetScape
Se recomienda que el archivo de sonido se encuentre en el mismo
directorio<BR> <BR>
que la pagina. Caso contrario
NO olvides direccionar al
directorio adecuado.
</FONT>
</P>
</BODY>
</HTML>

La etiqueta BGSound Scr, permite
incluir msica de fondo en una
pgina web.

La etiqueta EMBED SRC, se
utiliza para insertar la ruta de los
archivos de sonido.

El atributo AUTOSTART, indica si el
archivo se reproducir
automticamente al cargarse la
pgina, toma los valores true o false.

HTML .
by: magh 50
Ejemplo 29: Disear una pgina web que contenga como titulo Msica Activada por
Usuario, el fondo de la ventana AzulAqua, mostrar un texto como encabezado, despus un
prrafo describiendo cada etiqueta del cdigo, por ltimo el link a la meloda. Debe guardar el
documento con el nombre: sonido_xUsuario29.htm

<HTML>
<HEAD> <TITLE>Musica Activada por el Usuario</TITLE> </HEAD>
<!BgColor, especifica el color de fondo del documento>
<BODY BGcolor="Aquamarine">
<H1 Align="Center">Deleita tu oido en el Momento <BR> que lo
Decidas<BR> <BR>
</H1> <HR Color="Red">
<P Align="Center">
<FONT COLOR=Red>
Cuando el usuario decida escuchar el sonido, <BR>
debe hacer clic en el enlace cancion <BR> <BR>
A Href,especifica la ubicacion del sonido a reproducir <BR> <BR>
O puedes utilizar una imagen que sirva de link. <BR>
Alt,permite mostrar un texto alternativo cuando el usuario,<BR>
pasa el puntero del raton encima de la imagen <BR> <BR>
Escucha esta <A HREF="cambio.mid"> cancion</A> <BR> <BR>
<A HREF="cambio.mid"><IMG SRC="sound1.gif"
Alt="Escucha Vientos de Cambio"></A>
</FONT>
</P>
</BODY>
</HTML>

La etiqueta BGcolor, establece el
color de fondo en la pgina web.

La etiqueta A HREF, establece
la referencia a un archivo de
audio.

HTML .
by: magh 51
Ejemplo 30: Disear una pgina web que contenga como titulo Video, el fondo de la
ventana Azul, mostrar un texto como encabezado, despus un prrafo describiendo cada
etiqueta del cdigo, por ultimo incluir el video para reproduccin automtica. Debe guardar el
documento con el nombre video30.htm

<HTML>
<HEAD>
<TITLE>Video</TITLE>
</HEAD>
<BODY BGcolor="Blue">
<H1 Align="Center">Observa el video en pantalla<BR>
<BR></H1>
<HR Color="Red">
<P Align="Center">
<FONT COLOR=Yellow> <B>
DYNSRC,especifica el video a reproducir de forma automatica en IE
<BR> <BR>
WIDTH,especifica la anchura en que se mostrara la reproduccion del
video <BR>
HEIGHT,especifica la altura en que se mostrara la reproduccion del
video <BR>
En caso de omitirse ambos valores.Toma el ancho-alto original del
video.<BR><BR>
Loop,numero de veces que se mostrara el video<BR> <BR>
Start,indica que la secuencia de vdeo empezar al abrir el documento
web<BR> <BR>
EMBED SRC,especifica el sonido a reproducir de forma automatica en
NetScape<BR> <BR>
Se recomienda que el archivo de video se encuentre en el mismo <BR>
directorio que la pagina. <BR>
Caso contrario NO olvides direccionar al directorio adecuado.
</b> </FONT> </P>
<IMG DYNSRC=" Waka-waka.avi" WIDTH=400 HEIGHT=400
LOOP=INFINITE START=FILEOPEN>
<EMBED SRC=" Waka-waka.avi"
WIDTH=200 HEIGHT=200 >
</BODY>
</HTML>

HTML .
by: magh 52

PRACTICA 22: Disear una pgina web que contenga un tema de sus inters y con
msica de fondo que tenga relacin con el contenido investigado.

PRACTICA 23: Disear una pgina web que contenga un tema de sus inters y con un
video que tenga relacin con el contenido investigado.

I II I. .2 20 0 D Do oc cu um me en nt t o os s c co on n F Fr ra am me es s
Con las frames es posible dividir la ventana del navegador en varias subregiones (frames),
permitiendo mostrar una URL distinta en cada una de ellas. En cada frame se nos permite:
Mostar su propia URL, diferenciada del resto de las frames de la pantalla, de esta forma
un hiperenlace puede tener como destino un documento y la frame en el que se
mostrar.
Tendrn asociado un nombre, que las distinguirn del resto de las frames de la pantalla y
permitir usarlo en los hiperenlaces.
La etiqueta IMG DYNSRC,
permite la reproduccin del
video especificado.

La etiqueta HEIGHT y WIDTH
establecen el ancho y alto del
video.

La etiqueta LOOP, indica el
nmero de veces que se
mostrar el vdeo.

La etiqueta Stara, indica que la
secuencia de vdeo comience al
abrir el archivo.

HTML .
by: magh 53
En el caso que se cambie el tamao de la ventana, se podr determinar si la frame se
ajusta a este tamao o mantiene su tamao intacto.
Esto permite crear nuevos tipos de documentos, en los que por ejemplo se mantendr una
regin esttica (lista de enlaces, barra de botones, formulario) y otra zona dinmica en la que
se mostrar el resultado. De esta forma una de las principales utilidades de las frames es la
creacin de pginas con un ndice o una cabecera esttica, consiguiendo as una mejora de
la navegacin al poder acceder al ndice de una manera ms rpida y efectiva.
El uso de las frames es til para cierto tipo de documentos, pero puede llegar a dificultar la
navegacin, dentro de un documento con frames no tendr utilidad los botones de
documento previo (back) ni documento siguiente (forward), ya que ambos nos trasladarn
fuera del documento con frames. Para ver el documento previo en una de las frames
debemos utilizar el botn derecho del ratn sobre ella y seleccionar la opcin volver en el
frame (Back in Frame). Esto hace que cuando se utilicen frames haya que cuidar la correcta
transicin entre documentos.

<FRAMESET...
/FRAMESET>
Permite dividir la pantalla en diferentes zonas, o ventanas,
que pueden actuar independientemente unas de otras, como
si se trataran de pginas diferentes, pues incluso cada una
de ellas pueden tener sus propias barras deslizadoras.
ROWS=xx,yy Se definir separado por comas el tamao de cada una de
las frames. De esta forma se dividir la pantalla de forma
horizontal, segn cada una de las filas definidas. El tamao
de la frame, puede expresarse de las siguientes formas:
* En valor absoluto, que indicar el tamao en puntos de la
pantalla. Los frames ocuparn la totalidad del espacio de la
ventana del navegador
* En tanto por ciento sobre el tamao de la ventana, en este
caso si los porcentajes suman un valor distinto del 100%,
se ajustar para que coincida con el tamao de la ventana.
* De forma relativa con el smbolo * que indica el tamao
restante de la ventana. Si se indica una frame como 2* y
otra como *, la primera ocupar dos tercios del espacio
restante y la segunda un tercio del espacio restante.
COLS=xx,yy Toma los mismos valores que ROWS, pero en este caso
para las columnas, se definirn las frames de forma vertical.
NAME Asigna un nombre a un marco para que despus podamos
referirnos a l.
SRC Indica la direccin del documento HTML que ocupar el
marco.
SCROLLING Decide si se colocan o no barras de desplazamiento al
marco para que podamos movernos por su contenido. Su
valor es por defecto
AUTO Deja al navegador la decisin. Las otras opciones que
tenemos son YES y NO.
NORESIZE Si lo especificamos el usuario no podr cambiar de tamao
el marco.
HTML .
by: magh 54

FRAMEBORDER
Al igual que su homnimo en la etiqueta <FRAMESET>, si lo
igualamos a cero se eliminar el borde con todos los marcos
contiguos que tengan tambin este valor a cero.

MARGINWIDTH
Permite cambiar los mrgenes horizontales dentro de un
marco. Se representa en pixels.

MARGINHEIGHT
Igual al anterior pero con mrgenes verticales.
TARGET

target=_blank

target=_self

target=_parent

target=_top

Indicar la frame de destino de la operacin. Normalmente,
en pginas sin frames, cuando se segua un hiperenlaces
este se mostraba en la ventana del navegador sustituyendo
el documento actual, con las frames se puede especificar
que frame ser la de destino, no siendo necesario que sea la
frame del documento actual.
Indica que se muestre en una nueva ventana vaca, para
seguir el enlace se lanza otra ventana distinta del
navegador.
Se mostrar en la misma ventana o frame que lo referencia,
se puede usar para modificar el valor dado por BASE.
Se muestra en la frame o estructura de frames que llam al
documento actual.
Indica que se muestre en la ventana completa, eliminando la
estructura de frames que tenga la ventana.

Un documento con frames se define de manera diferente a un documento normal, siendo la
estructura del documento distinta, en este caso no se define la etiqueta BODY. Su estructura
es la siguiente:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<FRAMESET>
Definicin de las frames que forman el documento y de los archivos que
incluye cada una.
</FRAMESET>
</HTML>

Definiremos las frames que formarn el documento, su sintaxis es similar a la de las tablas,
permitiendo definir muy distintos tipos de frames. Su formato es el siguiente:
<FRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnas>
<FRAME SRC=URL_1 NAME="Nombre de la frame1">
<FRAME SRC=URL_2 NAME="Nombre de la frame1">
. . .
<FRAME SRC=URL_N NAME="Nombre de la frameN">
</FRAMESET>
Ejemplo 31: Disear una pgina web que contenga como titulo Pagina Dividida
Horizontalmente. Debe contener 3 frames horizontales con los valores 20%, 50% y 30%.
Debe guardar el documento con el nombre frame31.htm
HTML .
by: magh 55

<HTML>
<TITLE>
Pagina Dividida Horizontalmente
</TITLE>
<FRAMESET ROWS="20%,50%,30%">
<FRAME NAME="frame1">
</FRAMESET>
</HTML>

Ejemplo 32: Disear una pgina web que contenga como titulo Noticias a la Carta. Debe
contener 2 frames verticales con los valores 10% y 90%. El frame de la izquierda inserte una
lista de vnculos a peridicos nacionales y extranjero. Cuando se presione el hipervnculo de
peridico nacional actualizar el frame de la derecha con la pgina principal del peridico,
cuando se trate de peridico extranjero debe mostrar en una ventana diferente. Debe guardar
el documento con el nombre frame32.htm
<HTML>
<TITLE> Noticias a la Carta </TITLE>
<FRAMESET COLS="10%,90%">
<FRAME SRC="noticias.htm" NAME="indice">
<FRAME NAME="destino">
</FRAMESET>
</HTML>

Observe que el documento web que contiene los frames, hace referencia a una pgina
llamada noticias.htm , el cdigo se muestra continuacin:
<HTML>
<BODY>
<A HREF="http://www.milenio.com/" target="destino"> Milenio </A> <BR>
<A HREF="http://www.elfinanciero.com.mx/" target="destino"> Financiero </A> <BR>
<A HREF="http://www.cronica.com.mx/" target="destino"> La Cronica </A>
<A HREF="http://www.eluniversal.com.mx/" target="destino">El Universal </A> <BR>
<A HREF="http://www.abc.es/" target="_blank"> EL ABC </A> <BR> <BR>
<A HREF="http://www.avisador.com.uy/" target="_ blank">El Avisador </A> <BR>
<A HREF="http://www.nytimes.com/" target="_blank"> TheNewYork Times </A>
</BODY>
</HTML>
HTML .
by: magh 56

PRACTICA 24:

PRACTICA 25:

Adobe Dreamweaver CS3 .
by: magh 57
I II II I. . A Ad do ob be e D Dr re ea am mw we ea av ve er r C CS S3 3
I II II I. .1 1 I In ns st t a al l a ac ci i n n

Inserte el DVD de instalacin de la
Suite Adobe CS3. Caso contrario
puede descargarlo de:
http://www.adobe.com/es/downloads/

Despus de insertar el DVD,
espere unos segundos a que
inicie la instalacin.
Observe el men de instalacin
en donde puede instalar:
Photoshop, Flash, Dreamweaver,
Fireworks, Illustrator, Alter Effects
Para continuar con la instalacin
haga clic en el botn Dw.
by: magh 58

Posteriormente aparecen las
especificaciones y caractersticas
de Dreamweaver, haga clic en el
icono Dw, para continuar la
instalacin.

Este proceso tarda
algunos minutos, as que
tmelo con paciencia.
Despus aparece la licencia, para
continuar con la instalacin haga
en el botn Aceptar.
by: magh 59

En caso de que tenga particiones
o varias unidades de disco duro,
le pregunta en donde desea
instalar el paquete, seleccione la
unidad y despus haga clic en el
botn Siguiente.

En la siguiente ventana le indica
los componentes a instalar, haga
clic en el botn Instalar.
Espere unos minutos para que el
proceso de instalacin se lleve a
cabo de forma adecuada.
by: magh 60

Al terminar la instalacin, aparece
la ventana indicndole un
resumen de los componentes
instalados, despus haga clic en
el botn Finalizar.

En la siguiente ventana le indica
que teclee el Nmero de serie
del software (debe usar un
Generador de Serial).
El KeyGen se encuentra en el
DVD, para ello haga clic en el
icono de la llave de Dw.
by: magh 61

Al ejecutar el KeyGen, aparece la
ventana ZWT, haga clic en el
bton Generate Serial.

Observe el nmero que se genero,
seleccione y copie el Nmero de
serie.
El serial generado con el
KeyGen, debe pegarlo en el
nmero de serie de la
ventana de Dreamweaver,
despus haga clic en el
botn Siguiente.
by: magh 62

En la siguiente ventana le pide
Activar, haga clic en Otras
opciones de activacin.

De las alternativas de activacin,
haga clic en la opcin A travs de
telfono, despus haga clic en el
botn Aceptar.
En esta ventana le pide
que teclee el nmero de
activacin.
by: magh 63

Observe que aparece el Numero
de serie que tecleo y se genera
otro numero de activacin
(seleccinelo y cpielo).

El nmero de activacin que copio,
ahora pguelo abajo del botn
Generate Serial, haga clic en el
botn Activate, seleccione ese
nmero para utilizarse para la
activacin.
El nmero de activacin generado
debe teclearlo. Por ltimo haga
clic en el botn Activar.
by: magh 64

En esta ventana le indica que ha
finalizado la activacin de su
producto, haga clic en el botn
Hecho.

Esta ventana le pide que registre
su programa (producto), haga clic
en el botn No registrarse.
Para finalizar su instalacin, le
pide que indique los tipos de
archivos que desea editar con su
programa Dreamweaver. Se
recomienda dejar las opciones y
por ltimo haga clic en el botn
Aceptar.
by: magh 65

Cuando finaliza la instalacin de
forma correcta, aparece el logo
del producto.
Listo ha finalizado satisfactoriamente la instalacin de su producto.
by: magh 66
I II II I. .2 2 E Es sp pa ac ci i o o d de e t t r ra ab ba aj j o o
El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los
objetos. Adems, coloca muchas de las operaciones ms frecuentes en barras de
herramientas para que pueda realizar cambios en los documentos rpidamente.
En Windows, Dreamweaver proporciona un diseo integrado en una nica ventana. En el
espacio de trabajo integrado, todas las ventanas y paneles estn integrados en una nica
ventana de la aplicacin de mayor tamao.
H

E F G

A. Barra Insertar B. Barra de herramientas Documento C. Ventana de documento D. Grupos
de paneles E. Selector de etiquetas F. Inspector de propiedades G. Panel Archivos. H. Barra
de ttulo. I. Barra de mens
Barra de ttulo Contiene el nombre del programa (Adobe Dreamweaver CS3) y
seguidamente el nombre del documento que aparecer en el explorador y entre parntesis,
su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los
botones para minimizar, maximizar/restaurar y cerrar.

H I
by: magh 67
Barra de mens Contiene las operaciones de Dreamweaver, agrupadas en mens
desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas
con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las
operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o
indispensable hacerlas desde los paneles.

Barra de herramientas Documento
La barra de herramientas Documento contiene botones que permiten alternar entre diferentes
vistas del documento rpidamente: vista Cdigo, vista Diseo y una vista dividida que
muestra las vistas Cdigo y Diseo.
La barra de herramientas contiene tambin algunos comandos y opciones relativos a la
visualizacin del documento y a su transferencia entre los sitios local y remoto.
A B C D E F G H I J K

A. Mostrar vista de cdigo B. Mostrar vistas de cdigo y diseo C. Mostrar vista de diseo D.
Ttulo del documento E. Administracin de archivos F. Vista previa/Depurar en explorador G.
Actualizar vista de diseo H. Ver opciones I. Ayudas visuales J. Validar formato K.
Comprobar compatibilidad con navegadores
En la barra de herramientas Documento, aparecen las siguientes opciones:
Mostrar vista de cdigo Slo muestra la vista Cdigo en la ventana de documento.
Mostrar vistas de cdigo y diseo Divide la ventana de documento entre las vistas Cdigo
y Diseo. Cuando seleccione esta vista combinada, se encontrar disponible la opcin Vista
de diseo encima del men Ver.
Mostrar vista de diseo Slo muestra la vista Diseo en la ventana de documento.
Nota: Si trabaja con XML, JavaScript, CSS u otros tipos de archivos basados en cdigo, no
podr ver los archivos en la vista Diseo y los botones Diseo y Dividir aparecern
atenuados.
Ttulo del documento Permite introducir un ttulo para el documento, que aparecer en la
barra de ttulo del navegador. Si el documento ya tiene ttulo, ste aparecer en dicho
campo.
Admi nistracin de archivos Muestra el men emergente Administracin de archivos.
Vista previa/Depurar en explorador Le permite obtener una vista previa o depurar el
documento en un navegador. Seleccione un navegador en el men emergente.
Actualizar vista de diseo Actualiza la vista Diseo tras realizar cambios en la vista Cdigo.
Los cambios realizados en la vista Cdigo no aparecern de forma automtica en la vista
Diseo hasta que se efecten determinadas acciones, como guardar el archivo o hacer clic
en este botn.
by: magh 68
Nota: La actualizacin tambin actualiza funciones de cdigo que dependen del DOM
(modelo de objeto de documento), como la capacidad para seleccionar las etiquetas inicial y
final de un bloque de cdigo.
Ver opciones Permite definir las opciones de las vistas Cdigo y Diseo, y establecer qu
vista va a aparecer en la parte superior de la ventana. Las opciones del men corresponden
a la vista actual: la vista Diseo, la vista Cdigo o ambas.
Ayudas visuales Permite utilizar distintas ayudas visuales para el diseo de las pginas.
Validar formato Permite validar el documento actual o una etiqueta seleccionada.
Comprobar compatibilidad con navegadores Le permite comprobar si el CSS es
compatible con diferentes navegadores.
Barra de estado, nos indica en cada momento en qu etiqueta HTML nos encontramos (en
la imagen al encontrarnos en un documento en blanco estamos directamente sobre la
etiqueta <body>). Tambin nos es posible alternar entre los modos de seleccin, mano (para
arrastrar la pgina), o zoom. En cualquier momento puedes seleccionar el zoom preferido
desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre
viene al 100%).
A B C D E F G

A. Selector de etiquetas B. Herramienta Seleccionar C. HerramientaMano D. Herramienta
Zoom E. Establecer nivel de aumento F. Men emergente Tamao de ventana G. Tamao
del documento y tiempo de descarga estimado
Selector de etiquetas Muestra la jerarqua de etiquetas que rodea a la seleccin actual.
Haga clic en cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su
contenido. Haga clic en <body>para seleccionar todo el cuerpo del documento. Para definir
los atributos class o id para una etiqueta en el selector de etiquetas, haga clic con el botn de
derecho del ratn (Windows) o mantenga presionada la tecla Control y elija una clase o un ID
del men contextual.
Herramienta Seleccionar Activa y desactiva la herramienta Mano.
Herramienta Mano Permite hacer clic en el documento y arrastrarlo por la ventana de
documento.
Herramienta Zoom y men emergente Establecer nivel de aumento Permiten establecer
un nivel de aumento para el documento.
Men emergente Tamao de ventana (Slo visible en la vista Diseo.) Permite cambiar el
tamao de la ventana de documento a dimensiones predeterminadas o personalizadas.
Tamao del documento y tiempo de descarga Muestra la estimacin del tamao del
documento y del tiempo de descarga de la pgina, incluidos todos los archivos dependientes,
como imgenes y otros archivos multimedia.
Descripcin general del inspector de propiedades
El inspector de propiedades permite examinar y editar las propiedades ms comunes del
elemento de pgina seleccionado actualmente, como texto o un objeto insertado. El
by: magh 69
contenido del inspector de propiedades es distinto en funcin del elemento seleccionado. Por
ejemplo, si selecciona una imagen de la pgina, el inspector de propiedades cambiar para
mostrar las propiedades de la imagen (por ejemplo, la ruta de archivo de la imagen, el ancho
y el alto de la imagen, el borde que rodea la imagen en caso de que lo haya, etc.).

El inspector de propiedades se encuentra en el borde inferior del espacio de trabajo de forma
predeterminada, pero puede colocarlo en el borde superior del espacio de trabajo o
convertirlo en un panel flotante del espacio de trabajo.

Introduccin a la barra Insertar
La barra Insertar contiene botones para crear e insertar objetos, como tablas, elementos PA
e imgenes. Al pasar el puntero sobre un botn, aparece una descripcin de la herramienta
con el nombre del botn.
Los botones estn organizados en varias categoras entre las que puede cambiar haciendo
clic en las fichas situadas en la parte superior de la barra Insertar. Si el documento actual
contiene cdigo de servidor, documentos ASP o CFML, aparecen tambin otras categoras.
Cuando se inicia Dreamweaver, se abre la ltima categora con la que ha trabajado.

Algunas categoras tienen botones con mens emergentes. Al seleccionar una opcin de un
men emergente, dicha opcin se convierte en la accin predeterminada del botn. Por
ejemplo, si selecciona Marcador de posicin de imagen en el men emergente del botn
Imagen, la siguiente vez que haga clic en el botn Imagen, Dreamweaver insertar un
marcador de posicin de imagen. Siempre que seleccione una nueva opcin del men
emergente cambiar la accin predeterminada del botn.
La barra Insertar est organizada en las categoras siguientes:
Categora Comn Permite crear e insertar los objetos que se utilizan con ms frecuencia,
como las imgenes y las tablas.
Categora Diseo Permite insertar tablas, etiquetas div, marcos y widgets de Spry. Tambin
puede elegir dos vistas para tablas: Estndar (valor predeterminado) y Tablas expandidas.
Categora Formularios Contiene botones que permiten crear formularios e insertar
elementos de formulario, incluidos widgets de validacin de Spry.
Categora Datos Permite insertar objetos de datos de Spry y otros elementos dinmicos,
como juegos de registros, regiones repetidas y grabar formularios de insercin y
actualizacin.
by: magh 70
Categora Spry Contiene botones para crear pginas de Spry, incluidos objetos de datos y
widgets de Spry.
Categora Texto Permite insertar diversas etiquetas de formato de texto y listas, como b, em,
p, h1 y ul.
Categora Favoritos Permite agrupar y organizar los botones de la barra Insertar que utiliza
con ms frecuencia en un lugar comn.
Categoras de cdigo de servidor Slo estn disponibles para las pginas que emplean un
lenguaje de servidor determinado, como ASP, ASP.NET, CFML Basic, CFML Flow, CFML
Advanced, J SP y PHP. Cada una de estas categoras contiene objetos de cdigo de servidor
que pueden insertarse en la vista Cdigo.

I II II I. .3 3 C Cr re ea ac ci i n n y y e ed di i c ci i n n d de e a ar rc ch hi i v vo os s
Creacin de documentos de Dreamweaver
Dreamweaver ofrece un entorno flexible para trabajar con varios documentos Web. Adems
de documentos HTML, es posible crear y abrir una gran variedad de documentos basados en
texto, incluidos archivos ColdFusion Markup Language (CFML), ASP, J avaScript y hojas de
estilos en cascada (CSS). Tambin admite archivos de cdigo fuente, como Visual Basic,
.NET, C#y J ava.
Dreamweaver proporciona varias opciones para crear un documento nuevo. Puede crear
cualquiera de los tipos de documento siguientes:
Un nuevo documento o plantilla en blanco
Un documento basado en uno de los diseos de pgina predefinidos que vienen con
Dreamweaver, incluidos ms de 30 diseos de pgina basados en CSS
Un documento basado en una de las plantillas existentes

Creacin de una pgina en blanco
Puede crear una pgina que contenga un diseo CSS prediseado o bien crear una
completamente en blanco y realizar su propio diseo.
1 Seleccione Archivo >Nuevo o presiona las teclas Ctrl +N.
2 En la categora Pgina en blanco
del cuadro de dilogo Nuevo
documento, seleccione el tipo de
pgina que desea crear en la
columna Tipo de pgina. Por
ejemplo, seleccione HTML para
crear una pgina HTML,
ColdFusion para crear una pgina
ColdFusion, etc.
3 Si desea que su nueva pgina
contenga un diseo CSS,
seleccione un diseo CSS
by: magh 71
prediseado en la columna Diseo; de lo contrario, seleccione Ninguno.
En funcin de su seleccin, aparece una vista previa y una descripcin del diseo
seleccionado en el lado derecho del cuadro de dilogo.
Los diseos CSS predefinidos ofrecen los siguientes tipos de columnas:
Fija El ancho de colu mna se especifica en pxeles. La columna no cambia de tamao en
funcin del tamao del navegador o de la configuracin del texto del visitante del sitio.
Elstica El ancho de columna se especifica en una unidad de medida (ems) relacionada
con el tamao del texto. El diseo se adapta si el visitante del sitio cambia la configuracin
del texto, pero no en funcin del tamao de la ventana del navegador.
Flotante El ancho de columna se especifica como porcentaje del tamao del navegador
del visitante. El diseo se adapta si el visitante del sitio amplia o reduce el navegador, pero
no en funcin de la configuracin del texto.
Hbrida Las columnas son una combinacin de las tres opciones anteriores. Por ejemplo,
en el diseo de dos columnas hbridas, la barra lateral derecha tiene una columna principal
flotante que se ajusta al tamao del navegador y una columna elstica a la derecha que se
ajusta al tamao de la configuracin del texto del visitante del sitio.
4 Seleccione un tipo de documento del men emergente DocType. En la mayora de los
casos, puede utilizar la seleccin predeterminada XHTML 1.0 de transicin.
Si selecciona una de las definiciones de tipo de documento XHTML en el men DocType
(DTD), las pginas nuevas sern compatibles con XHTML. Por ejemplo, puede hacer que
un documentoHTML sea compatible con XHTML seleccionando XHTML 1.0 de transicin
o XHTML 1.0 estricto del men. El lenguaje XHTML (Lenguaje de formato de hipertexto
ampliable, Extensible HypertextMarkup Language) es un replanteamiento del lenguaje
HTML como aplicacin XML. En general, la utilizacin de XHTML permite aprovechar las
ventajas del lenguaje XML, garantizando al mismo tiempo la compatibilidad anterior y
futura de los documentos Web.
5 Si ha seleccionado un diseo CSS en la columna Diseo, seleccione una ubicacin para el
cdigo CSS del diseo en el men emergente Diseo CSS en.
Aadir a Head Aade cdigo CSS para el diseo al encabezado de la pgina que se va a
crear.
Crear nuevo archivo Aade cdigo CSS para el diseo a un nuevo archivo CSS externo
y la nueva hoja de estilos a la pgina que se va a crear.
Vincular a archi vo existente Permite especificar un archivo CSS existente que ya
contiene reglas CSS necesarias para el diseo. Para ello, haga clic en el icono Adjuntar
hoja de estilos situado encima del panel Adjuntar archivo CSS y seleccione una hoja de
estilos CSS. Esta opcin es especialmente til cuando desea utilizar el mismo diseo CSS
(cuyas reglas CSS se encuentran en un nico archivo) en varios documentos.
6 (Opcional) Tambin puede adjuntar hojas de estilos CSS a la nueva pgina
(independientes del diseo CSS) al crearla.
Para ello, haga clic en el icono Adjuntar hoja de estilos situado encima del panel Adjuntar
archivo CSS y seleccione una hoja de estilos CSS.
by: magh 72
7 Haga clic en Preferencias si desea establecer las preferencias predeterminadas del
documento, como el tipo de documento, la codificacin y la extensin del archivo.
8 Haga clic en Obtener ms contenido si desea abrir Dreamweaver Exchange y descargar
ms contenido de diseo de pginas.
9 Haga clic en el botn Crear.
10 Guarde el nuevo documento (Archivo >Guardar).
11 En el cuadro de dilogo que aparece a continuacin, vaya hasta la carpeta en la que
desea guardar el archivo.
Es recomendable guardar el archivo en un sitio de Dreamweaver.
12 En el cuadro Nombre de archivo, introduzca un nombre para el archivo.
Evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas.
Asimismo, no comience los nombres de los archivos con nmeros. En concreto, no utilice
caracteres especiales (como , o ) ni signos de puntuacin (como dos puntos, barras
inclinadas o puntos) en los nombres de archivos que desee colocar en un servidor remoto;
muchos servidores cambian estos caracteres durante la carga, lo que provoca que se
rompan los vnculos existentes con los archivos.

Creacin de una plantilla en blanco
Puede utilizar el cuadro de dilogo Nuevo documento para crear plantillas de Dreamweaver.
De forma predeterminada, las plantillas se guardan en la carpeta Templates del sitio.
1 Seleccione Archivo >Nuevo o
presione las teclas Ctrl +N.
2 En el cuadro de dilogo Nuevo
documento, seleccione la
categora Plantilla en blanco.
3 Seleccione el tipo de pgina que
desea crear en la columna Tipo
de pgina. Por ejemplo,
seleccione Plantilla HTML para
crear una plantilla HTML,
Plantilla de ColdFusion para
crear una plantilla de
ColdFusion, etc.
4 Si desea que su nueva pgina contenga un diseo CSS, seleccione un diseo CSS
predefinido en la columna Diseo; de lo contrario, seleccione Ninguno. En funcin de su
seleccin, aparece una vista previa y una descripcin del diseo seleccionado en el lado
derecho del cuadro de dilogo.
Los diseos CSS predefinidos ofrecen los siguientes tipos de columnas:
Fija El ancho de columna se especifica en pxeles. La columna no cambia de tamao en
funcin del tamao del navegador o de la configuracin del texto del visitante del sitio.
by: magh 73
Elstica El ancho de columna se especifica en una unidad de medida (ems) relacionada
con el tamao del texto. El diseo se adapta si el visitante del sitio cambia la configuracin
del texto, pero no en funcin del tamao de la ventana del navegador.
Flotante El ancho de columna se especifica como porcentaje del tamao del navegador
del visitante. El diseo se adapta si el visitante del sitio amplia o reduce el navegador, pero
no en funcin de la configuracin del texto.
Hbrida Las columnas son una combinacin de las tres opciones anteriores. Por ejemplo,
en el diseo de dos columnas hbridas, la barra lateral derecha tiene una columna principal
que se ajusta al tamao del navegador y una columna elstica a la derecha que se ajusta
al tamao de la configuracin del texto del visitante del sitio.
5 Seleccione un tipo de documento del men emergente DocType. En la mayora de los
casos, utilizar la seleccin predeterminada, XHTML 1.0 de transicin.
Si selecciona una de las definiciones de tipo de documento XHTML en el men DocType
(DTD), las pginas nuevas sern compatibles con XHTML. Por ejemplo, puede hacer que
un documentoHTML sea compatible con XHTML seleccionando.
XHTML 1.0 de transicin o XHTML 1.0 estricto del men. El lenguaje XHTML (Lenguaje de
formato de hipertexto ampliable, Extensible HypertextMarkup Language) es un
replanteamiento del lenguaje HTML como aplicacin XML. En general, la utilizacin de
XHTML permite aprovechar las ventajas del lenguaje XML, garantizando al mismo tiempo
la compatibilidad anterior y futura de los documentos Web.
6 Si ha seleccionado un diseo CSS en la columna Diseo, seleccione una ubicacin para el
cdigo CSS del diseo en el men emergente Diseo CSS en.
Aadir a Head Aade cdigo CSS para el diseo al encabezado de la pgina que se va a
crear.
Crear nuevo archi vo Aade cdigo CSS para el diseo a una nueva hoja de estilos CSS
externa y asocia la nueva hoja de estilos a la pgina que se va a crear.
Vincular a archi vo existente Permite especificar un archivo CSS existente que ya
contiene reglas CSS necesarias para el diseo. Para ello, haga clic en el icono Adjuntar
hoja de estilos situado encima del panel Adjuntar archivo CSS y seleccione una hoja de
estilos CSS. Esta opcin es especialmente til cuando desea utilizar el mismo diseo CSS
(cuyas reglas CSS se encuentran en un nico archivo) en varios documentos.
7 (Opcional) Tambin puede adjuntar hojas de estilos CSS a la nueva pgina
(independientes del diseo CSS) al crearla.
Para ello, haga clic en el icono Adjuntar hoja de estilos situado encima del panel Adjuntar
archivo CSS y seleccione una hoja de estilos CSS.
by: magh 74
11 Guarde el nuevo documento (Archivo >Guardar). Si an no ha aadido regiones editables
a la plantilla, aparece un cuadro de dilogo que le indica que no hay regiones editables en
el documento. Haga clic en Aceptar para cerrar el cuadro de dilogo.
12 En el cuadro de dilogo Guardar como plantilla, seleccione un sitio para guardar la
plantilla y aada una descripcin para la misma en el cuadro Descripcin.
13 En el cuadro Nombre de archivo, introduzca un nombre para la nueva plantilla. No es
necesario que aada una extensin de archivo al nombre de la plantilla. Al hacer clic en
Guardar, se aade la extensin .dwt a la nueva plantilla y se guarda en la carpeta
Templates del sitio.

Creacin de un documento basado en una plantilla
1 Seleccione Archivo >Nuevo o presione las teclas Ctrl +N.
documento, seleccione la categora
Pgina de plantilla.
3 En la columna Sitio, seleccione el
sitio de Dreamweaver que contiene
la plantilla que desea utilizar; a
continuacin, seleccione una
plantilla de la lista de la derecha.
4 Desactive Actualizar pgina
cuando cambie la plantilla si no
desea actualizar esta pgina
cuando realice cambios en la
plantilla en la que se basa.
7 Haga clic en Crear y guarde el documento (Archivo >Guardar).

Creacin de una pgina basada en un archivo de muestra de Dreamweaver
Dreamweaver se suministra con distintos archivos de elementos de diseo y diseos de
pgina profesionales. Puede utilizar estos archivos de muestra como punto de partida para el
diseo de las pginas de sus sitios. Cuando crea un documento basado en un archivo de
muestra, Dreamweaver crea una copia del archivo.
Puede obtener una vista previa de un archivo de muestra y leer una descripcin breve de los
elementos de diseo de un documento en el cuadro de dilogo Nuevo documento. En el caso
by: magh 75
de las hojas de estilos CSS, puede copiar hojas de estilos predefinidas y, a continuacin,
aplicarlas a los documentos.
Nota: Si crea un documento a partir de un conjunto de marcos predefinido, slo se copiar la
estructura del conjunto de marcos, no el contenido. Asimismo, deber guardar cada archivo
de marco por separado.
1 Seleccione Archivo >Nuevo o presione las teclas Ctrl +N.
documento, seleccione la categora
Pgina de muestra.
3 En la columna Carpeta
demuestra, seleccione Hojas de
estilos, Conjunto de marcos o
Pginas de inicio y, a continuacin,
seleccione un archivo de muestra
en la lista de la derecha.
El documento nuevo se abrir en
la ventana de documento (vista
Diseo). Si ha seleccionado
Hojas de estilos CSS, la hoja de estilos se abre en la vista Cdigo.
5 Guarde el archivo (Archivo >Guardar).
6 Si aparece el cuadro de dilogo Copiar archivos dependientes, defina las opciones y haga
clic en Copiar para copiar los activos en la carpeta seleccionada.
Puede elegir su propia ubicacin para los archivos dependientes o utilizar la ubicacin
predeterminada de carpeta que genera Dreamweaver (basada en el nombre original del
archivo de muestra).

Cmo abrir y editar documentos existentes
Puede abrir una pgina Web existente o un documento basado en texto, aunque no se hayan
creado en Dreamweaver, y editarlos en la vista Diseo o la vista Cdigo.
Si el documento que abre es un archivo de Microsoft Word guardado como HTML, puede
utilizar el comando Limpiar HTML de Word para eliminar las etiquetas de formato sobrantes
que Word inserta en los archivos HTML.
Para limpiar HTML o XHTML no generados por Microsoft Word, utilice el comando Limpiar
HTML.
Tambin puede abrir archivos de texto no HTML, como archivos J avaScript, archivos XML,
hojas de estilos CSS o archivos de texto guardados con procesadores de texto o editores de
texto.
1 Seleccione Archivo >Abrir o presione las teclas Ctrl +O.
Tambin puede utilizar el panel Archivos para abrir los archivos.
by: magh 76
2 Localice y seleccione el
documento que desea abrir.
Nota: Si todava no lo ha hecho, es
recomendable organizar los
archivos que va a abrir y editar en
un sitio de Dreamweaver, en lugar
de abrirlos desde otra ubicacin.
3 Haga clic en Abrir.
El documento se abrir en la
ventana de documento. Los
archivos J avaScript, archivos de
texto y las hojas de estilos CSS se
abren de forma predeterminada en
la vista Cdigo. Puede actualizar el
documento mientras trabaja con Dreamweaver y luego guardar los cambios en el archivo.

Limpieza de archivos HTML de Microsoft Word
Puede abrir documentos guardados con Microsoft Word como archivos HTML y, a
continuacin, utilizar el comando Limpiar HTML de Word para eliminar los cdigos HTML
sobrantes o innecesarios generados por Word. El comando Limpiar HTML de Word se
encuentra disponible para documentos guardados como archivos HTML por Word 97 o
superior.
El cdigo que Dreamweaver elimina lo utiliza Word principalmente para aplicar formato y
mostrar documentos en Word, por lo que no es necesario para ver el archivo HTML.
Conserve una copia del archivo original de Word (.doc) como copia de seguridad, ya que es
posible que no pueda volver a abrir el documento HTML en Word una vez aplicada la funcin
Limpiar HTML de Word.
Para limpiar HTML o XHTML no generados por Microsoft Word, utilice el comando Limpiar
HTML.
1 Guarde el documento de Microsoft Word como archivo HTML.
Nota: En Windows, cierre el archivo en Word para evitar problemas al compartir el archivo.
2 Abra el archivo HTML en Dreamweaver.
Para visualizar el cdigo HTML
generado por Word, cambie a la
vista Cdigo: Ver>Cdigo

by: magh 77
3 Seleccione Comandos >Limpiar
HTML de Word.
Nota: Si Dreamweaver no logra
determinar qu versin de Word se
utiliz para guardar el archivo,
seleccione la versin correcta en el
men emergente.

4 Seleccione (o anule la seleccin de) las
opciones de limpieza. Las preferencias
que introduzca se guardarn como
configuracin de limpieza predeterminada.
Dreamweaver aplica la configuracin de
limpieza al documento HTML y se abre un
registro en el que se reflejan los cambios
(a menos que desactive dicha opcin del
cuadro de dilogo).
Quitar todo el formato especfico de
Word Elimina todos los cdigos HTML
especficos de Microsoft Word, incluidos
los cdigos XML de las etiquetas HTML,
los metadatos y las etiquetas de vnculos
personalizados de Word situados en la
seccin del encabezado del documento,
el formato XML de Word, las etiquetas
condicionales y su correspondiente contenido y los prrafos y mrgenes vacos de los
estilos. Puede seleccionar cada una de estas opciones individualmente utilizando la ficha
Detalladas.
Limpiar CSS Elimina todos los cdigos CSS especficos de Word, incluidos los estilos
CSS en lnea cuando el estilo padre tiene las mismas propiedades de estilo, los atributos
de estilo que comiencen por mso, las declaraciones de estilos ajenos a CSS, los
atributos de estilo CSS de las tablas y todas las definiciones de estilo no utilizadas de la
seccin del encabezado.
Esta opcin se puede personalizar ms en la ficha Detalladas.
Limpiar etiquetas <font> Elimina las etiquetas HTML y convierte el texto normal
predeterminado a HTML de tamao 2.
Reparar etiquetas mal anidadas Elimina las etiquetas de formato de fuentes insertadas
por Word fuera de las etiquetas de prrafo y encabezado (nivel de bloque).
by: magh 78
Definir color de fondo Permite introducir un valor hexadecimal para establecer el color de
fondo del documento. Si no define ningn color de fondo, la pgina HTML de Word tendr
un fondo gris. El valor hexadecimal predeterminado es blanco.
Aplicar formato de origen Aplica al documento las opciones de formato de origen que
especifique en las preferencias de Formato HTML y en SourceFormat.txt.
Mostrar registro al terminar Muestra un cuadro de alerta con detalles acerca de los
cambios realizados en el documento inmediatamente despus de concluir la limpieza.
5 Haga clic en Aceptar o en la ficha Detalladas si desea seguir personalizando las opciones
Quitar todo el formato especfico de Word y Limpiar CSS y luego haga clic en Aceptar.

I II II I. .4 4 I In ns se er rc ci i n n d de e t t e ex xt t o o
Dreamweaver permite aadir texto a pginas Web escribiendo el texto directamente en una
pgina, copiando y pegando texto de otro documento o arrastrando texto de otra aplicacin.
Tambin puede importar texto o establecer un vnculo con otros tipos de documentos, como
archivos de texto ASCII, archivos en formato de texto enriquecido y documentos de Microsoft
Office.
Adicin de texto a un documento
Para aadir texto a un documento de Dreamweaver puede escribir texto directamente en la
ventana de documento o puede cortar y pegar texto. Tambin puede importar texto de otros
documentos.
Al pegar texto en un documento de Dreamweaver, puede utilizar el comando Pegar o Pegado
especial. El comando Pegado especial le permite especificar el formato del texto pegado de
diversas formas. Por ejemplo, si desea pegar texto de un documento con formato de
Microsoft Word en un documento de Dreamweaver pero desea eliminar todo el formato de
manera que pueda aplicar su propia hoja de estilos CSS al texto pegado, puede seleccionar
el texto en Word, copiarlo al portapapeles y utilizar el comando Pegado especial para
seleccionar la opcin que le permite pegar slo texto.
Al utilizar el comando Pegar para pegar texto de otras aplicaciones, puede establecer las
preferencias de pegado como opciones predeterminadas.
Nota: Las teclas Ctrl + V pegan slo texto (sin formato).
Aada texto al documento siguiendo uno de estos procedimientos:
Escriba texto directamente en la ventana de documento.
Copie texto de otra aplicacin,
cambie a Dreamweaver, coloque el
punto de insercin en la vista
Diseo de la ventana de
documento y seleccione Edicin >
Pegar o Edicin >Pegado especial.
Al seleccionar Edicin > Pegado
especial o presione las teclas Ctrl +
Mayus +V, puede elegir diversas
opciones de formato al pegar.
by: magh 79
I II II I. .5 5 I In ns se er rc ci i n n d de e c ca ar ra ac ct t e er re es s e es sp pe ec ci i a al l e es s
Algunos caracteres especiales se representan en HTML mediante un nombre o un nmero,
denominado entidad. HTML incluye nombres de entidad para caracteres como el smbolo de
copyright (©), el signo ampersand (&) y el smbolo de marca comercial registrada
(®). Cada entidad tiene un nombre (como —) y un equivalente numrico (como ).
HTML utiliza parntesis angulares <> en el cdigo, pero quiz necesite expresar los
caracteres especiales mayor que y menor que sin que Dreamweaver los interprete como
cdigo. En este caso, utilice > para mayor que (>) y < para menor que (<).
Desgraciadamente, muchos navegadores (especialmente los navegadores antiguos y los que
no son Netscape Navigator ni Internet Explorer) no muestran correctamente muchas de las
entidades con nombre.
1 En la ventana de documento, site el punto de insercin en el lugar donde desea insertar
un carcter especial.
2 Siga uno de estos procedimientos:
Seleccione el nombre del carcter en el submen Insertar>HTML>Caracteres especiales.
En la categora Texto de la barra
Insertar, haga clic en el botn Caracteres
y seleccione el carcter en el submen.
Existen otros muchos caracteres
especiales disponibles; para seleccionar
uno de ellos, seleccione Insertar>HTML>
Caracteres especiales > Otro o haga clic
en el botn Caracteres en la categora
Texto de la barra Insertar y seleccione la
opcin Otros caracteres. Seleccione un
carcter en el cuadro de dilogo Insertar
otro carcter y haga clic en Aceptar.

I II II I. .6 6 C Cr re ea ac ci i n n d de e l l i i s st t a as s o or rd de en na ad da as s y y s si i n n o or rd de en na ar r
Puede crear listas ordenadas (numeradas), listas sin ordenar (con vietas) y listas de
definicin a partir de texto existente o de texto nuevo que escriba en la ventana de
documento.
Las listas de definicin no utilizan caracteres iniciales como puntos de vieta o nmeros y
suelen utilizarse en glosarios o descripciones. Adems, las listas se pueden anidar. Una lista
anidada es aqulla que contiene otras listas. Por ejemplo, en algunos casos puede resultar
conveniente anidar una lista ordenada o con vietas en otra numerada u ordenada.
Utilice el cuadro de dilogo Propiedades de lista para configurar el aspecto de toda una lista
o de sus elementos por separado. Puede establecer el estilo de nmero, restablecer la
numeracin o configurar las opciones de las vietas de los distintos elementos o de toda la
lista.
by: magh 80
Creacin de una lista nueva
1 En el documento de Dreamweaver, coloque el punto de insercin en el lugar en el que
desea aadir la lista y siga uno de estos procedimientos:
Haga clic en el botn Lista
ordenada o Lista sin
ordenar del inspector de
propiedades

Seleccione Texto >Lista y elija el tipo de lista
deseado: Lista sin ordenar (con vietas), Lista
ordenada (numerada) o Lista de definicin.

El carcter inicial del elemento especificado de la lista aparecer en la ventana de
documento.
2 Escriba el texto del elemento de la lista y presione Intro para crear otro elemento de la lista.
3 Para terminar la lista, presione dos veces Intro.

Creacin de una lista usando texto existente
1 Seleccione una serie de prrafos para convertirlos en una lista.
2 Haga clic en el botn Lista sin ordenar o Lista ordenada del inspector de propiedades, o
seleccione Texto >Lista y seleccione el tipo de lista deseado: Lista sin ordenar, Lista
ordenada o Lista de definicin.

Creacin de una lista anidada
1 Seleccione los elementos de lista que desea anidar.
2 Haga clic en el botn Sangra del inspector de propiedades o elija Texto >Sangra.
Dreamweaver aplicar sangra al texto y crear una lista distinta con los atributos HTML
de la lista original.
3 Aplique un nuevo estilo o tipo de lista al texto sangrado siguiendo el procedimiento
detallado.

by: magh 81
Configuracin de las propiedades de toda una lista
1 En la ventana de documento, cree al menos un elemento de lista: El nuevo estilo se
aplicar automticamente a todos los elementos que vaya aadiendo a la lista.
2 Coloque el punto de insercin
sobre el texto del elemento de
lista y seleccione Texto >Lista >
Propiedades para abrir el cuadro
de dilogo Propiedades de lista.

3 Configure las opciones que desea definir para la lista:
Tipo de lista Especifica las propiedades de lista, mientras que Elemento de lista
especifica un elemento de la lista. Utilice el men emergente para seleccionar una lista
con nmeros, con vietas, de directorio o de men. Dependiendo del tipo de lista que
seleccione, aparecern determinadas opciones en el cuadro de dilogo.
Estilo Determina el estilo de los nmeros o las vietas empleados para una lista
numerada o con vietas. Todos los elementos de la lista tendrn este estilo a menos que
especifique un estilo nuevo para determinados elementos.
Iniciar recuento Establece el valor del primer elemento en una lista numerada.
4 Haga clic en Aceptar para definir las opciones.

I II II I. .7 7 B B s sq qu ue ed da a y y s su us st t i i t t u uc ci i n n d de e t te ex xt to o
Puede utilizar el comando Buscar y reemplazar para buscar texto as como etiquetas HTML y
atributos en un documento o en un conjunto de documentos. El panel de bsqueda, que se
encuentra el grupo de paneles Resultados, muestra los resultados de la bsqueda con la
opcin Buscar todos.
Nota: Para buscar archivos en un sitio, utilice diferentes comandos: Localizar en sitio local y
Localizar en sitio remoto.

Bsqueda y sustitucin de texto
1 Abra el documento en el que se
debe realizar la bsqueda o
seleccione los documentos o
una carpeta del panel Archivos.
2 Seleccione Edicin > Buscar y
reemplazar.

by: magh 82
3 Utilice la opcin Buscar en para especificar los archivos en los que desea buscar:
Texto seleccionado Limita la bsqueda al texto que est seleccionado en el documento
activo.
Documento actual Limita la bsqueda al documento activo.
Abrir documentos Busca en todos los documentos que estn abiertos.
Carpeta Limita la bsqueda a una carpeta especfica. Despus de seleccionar Carpeta,
haga clic en el icono de carpeta para
localizar y seleccionar la carpeta que desea buscar.
Archi vos seleccionados en el sitio Limita la bsqueda a los archivos y las carpetas
seleccionados actualmente en el panel Archivos.
Sitio local actual completo Ampla la bsqueda a todos los documentosHTML, los
archivos de biblioteca y los documentos de texto del sitio actual.
4 Utilice el men emergente Buscar para especificar el tipo de bsqueda que desea realizar:
Cdigo fuente Permite buscar cadenas de texto especficas en el cdigo HTML. Puede
buscar etiquetas especficas mediante esta opcin; sin embargo, la bsqueda Etiqueta
especfica permite realizar una bsqueda ms flexible de las etiquetas.
Texto Permite buscar cadenas de texto especficas en el texto del documento. La
bsqueda de texto omite el cdigo HTML que interrumpe la cadena. Por ejemplo, si busca
el perro negro, puede encontrar el perro negro y el perro <i>negro</i>.
Texto (avanzado) Permite buscar cadenas de texto especficas que se encuentran dentro
o fuera de una o varias etiquetas.
Por ejemplo, en un documento que contiene el cdigo HTML siguiente, si busca intenta,
especifica No est en etiqueta y la etiqueta i, slo encontrar la segunda aparicin de la
palabra intenta: J uan <i>intenta</i> hacer su trabajo a tiempo, pero no siempre lo
consigue. Y mira que lo intenta. .
Etiqueta especfica Busca etiquetas, atributos y valores de atributos especficos, como
todas las etiquetas td con valign definido como top.
Nota: Al presionar Control+Intro oMays+Intro, se aadirn saltos de lnea en los campos
de bsqueda de texto, lo que le permite buscar un carcter de retorno.
Al llevar a cabo esta bsqueda, desactive la opcin Omitir espacio en blanco si no est
utilizando expresiones regulares. Este mtodo busca un carcter de retorno en particular,
no la aparicin de un salto de lnea. Por ejemplo, no busca etiquetas <br> ni <p>. Los
caracteres de retorno aparecen como espacios en la vista Diseo, no como saltos de
lnea.
5 Utilice las opciones siguientes para ampliar o limitar la bsqueda:
Coincidir maysculas y mi nsculas Limita la bsqueda al texto que coincide
exactamente con el uso de maysculas y minsculas del texto buscado. Por ejemplo, si
busca aguas azules, no encontrar Aguas Azules.
Omitir espacio en blanco Considera todos los espacios en blanco como un solo espacio
a efectos de bsqueda. Por ejemplo, si esta opcin est seleccionada, este texto
coincidir con este texto y con este texto, pero no con este texto.
by: magh 83
Esta opcin no est disponible cuando est activada la opcin Utilizar expresin regular;
en este caso es necesario escribir explcitamente la expresin regular para omitir el
espacio en blanco. Observe que las etiquetas <p>y <br>no se consideran espacios en
blanco.
Palabra completa Limita la bsqueda al texto que coincida con una o varias palabras
completas.
Nota: Utilizar esta opcin equivale a realizar una bsqueda de expresiones regulares en
forma de cadena de texto que empiecen y acaben con \b, la expresin normal de lmite de
palabra.
Utilizar expresin regular Considera algunos caracteres y cadenas cortas (por ejemplo,
?, *, \w y \b) de la cadena de bsqueda como operadores de expresiones regulares. Por
ejemplo, si busca el perro l\w*\b puede encontrar el perro ladrador y el perro lanudo.
Nota: Si est trabajando en la vista Cdigo, realiza cambios en el documento e intenta
buscar y reemplazar elementos que no son cdigo, aparecer un cuadro de dilogo
informndole de que Dreamweaver est sincronizando las dos vistas antes de realizar la
bsqueda.
6 Para buscar sin reemplazar, haga clic en Buscar siguiente o Buscar todos:
Buscar siguiente Se desplaza hasta la siguiente aparicin del texto o de las etiquetas de
la bsqueda del documento actual y la selecciona. Si la etiqueta no aparece ms veces en
el documento actual, Dreamweaver contina con el documento siguiente, en el caso de
que realice la bsqueda en ms de un documento.
Buscar todos Abre el panel de bsqueda del grupo de paneles Resultados. Si realiza una
bsqueda en un solo documento, la opcin Buscar todos muestra todas las apariciones del
texto o de las etiquetas de la bsqueda, con el contexto en el que se encuentran. Si realiza
una bsqueda en un directorio o sitio, Buscar todos muestra una lista de los documentos
que contienen la etiqueta.
7 Para reemplazar el texto o las etiquetas encontrados, haga clic en Reemplazar y
Reemplazar todos.
8 Cuando acabe, haga clic en Cerrar.

I II II I. .8 8 R Re ev vi i s si i n n y y c co or rr re ec cc ci i n n o or rt t o og gr r f f i i c ca a
Utilice el comando Ortografa del men Texto para revisar la ortografa del documento actual.
El comando Ortografa no tiene en cuenta las etiquetas HTML ni los valores de atributo.
De forma predeterminada, el corrector ortogrfico utiliza el diccionario de ingls de Estados
Unidos. Para cambiar el diccionario, seleccione Edicin > Preferencias > General, a
continuacin, seleccione el diccionario que desea utilizar en el men emergente Diccionario
ortogrfico. Se pueden descargar diccionarios de otros idiomas desde el Centro de soporte
de Dreamweaver en http://www.adobe.com/go/dreamweaver_support_es
1 Seleccione Texto >Ortografa o presione Mays+F7.
Cuando Dreamweaver encuentra una palabra que no reconoce, aparece el cuadro de
dilogo Ortografa.
by: magh 84
2 Seleccione la opcin adecuada teniendo en
cuenta las discrepancias mostradas.
Aadir a personal Incorpora la palabra no
reconocida al diccionario personal.
Omitir Ignora esta aparicin de la palabra no
reconocida.
Omitir todo Ignora todas las apariciones de la
palabra no reconocida.

Cambiar Sustituye esta aparicin de la palabra no reconocida por el texto que usted escriba
en el cuadro Cambiar a o por la seleccin de la lista Sugerencias.
Cambiar todas Reemplaza de la misma manera todas las apariciones de la palabra no
reconocida.

I II II I. .9 9 I Im mp po or rt t a ac ci i n n d de e d do oc cu um me en nt t o os s d de e M Mi i c cr ro os so of ft t O Of f f f i i c ce e
Puede insertar contenido de un documento de Microsoft Word o Excel a una pgina Web
nueva o existente. Al importar un documento de Word o Excel, Dreamweaver recibe el HTML
convertido y lo inserta en la pgina Web. El tamao de archivo, una vez que Dreamweaver
recibe el HTML convertido, debe ser inferior a 300 KB. En lugar de importar todo el contenido
de un archivo, tambin es posible pegar fragmentos del documento y conservar el formato
Nota: Si utiliza Office 97, no podr importar el contenido de un documento de Word o Excel.
1 Abra la pgina Web en la que desea insertar el documento de Word o Excel.
2 En la vista Diseo, siga uno de estos procedimientos para seleccionar el archivo:
Arrastre el archivo desde su ubicacin actual a la pgina en la que desea que aparezca el
contenido.
Seleccione Archivo > Importar > Documento de Word, o bien Archivo > Importar >
Documento de Excel.
3 En el cuadro de dilogo Insertar
documento, vaya al archivo que
desea aadir, seleccione las
opciones de formato adecuadas en
el men emergente Formato en la
parte inferior del cuadro de dilogo
y luego haga clic en Abrir.
Slo texto Inserta texto sin
formato. Si el texto original tiene
formato, se eliminar todo el
formato.
Texto con estructura Inserta texto
que conserva su estructura pero no
el formato bsico. Por ejemplo,
by: magh 85
puede pegar texto y conservar la estructura de los prrafos, listas y tablas sin conservar
negritas, cursivas u otras caractersticas de formato.
Texto con estructura y formato bsico Inserta texto con formato HTML estructurado y
simple (por ejemplo, prrafos y tablas, as como texto formateado con la etiqueta b, i, u,
strong, em, hr, abbr o acronym).
Texto con estructura y formato completo Inserta texto que conserva toda la estructura, el
formato HTML y los estilos CSS.
Limpiar espaciado de prrafo de Word
Elimina espacios adicionales entre prrafos al
pegar el texto si seleccion la opcin
Texto con estructura o Formato bsico.
El contenido del documento de Word o Excel
aparecer en la pgina.
NOTA: En caso de que el documento a
importar contenga imgenes, aparece el
siguiente cuadro de dialogo:

I II II I. .1 10 0 A Ap pl l i i c ca ac ci i n n d de e f f o or rm ma at t o o a a t t e ex xt t o o
La aplicacin de formato a texto en Dreamweaver es similar a la utilizacin de un programa
estndar de tratamiento de texto. Puede establecer estilos de formato predeterminados
(Prrafo, Encabezado 1, Encabezado 2, etc.) para un bloque de texto, cambiar la fuente, el
tamao, el color y la alineacin del texto seleccionado o aplicar estilos de texto, como negrita,
cursiva, monoespacio y subrayado.
De forma predeterminada, Dreamweaver aplica formato a texto mediante hojas de estilos en
cascada (CSS). Los estilos CSS ofrecen a los diseadores y desarrolladores Web un mayor
control sobre el diseo de la pgina Web, a la vez que les permite utilizar funciones
mejoradas que optimizan la accesibilidad y reducen el tamao de archivo. Puesto que el
formato y la alineacin se aplican mediante los comandos de formato de Dreamweaver, las
reglas CSS estn incrustadas en el documento actual. Esto le permite reutilizar fcilmente los
estilos existentes, as como asignar nombre a los estilos que cree. CSS se est convirtiendo
en el mtodo preferido para aplicar formato a texto y presentar pginas Web.
Si lo prefiere, puede optar por utilizar etiquetas de formato HTML para aplicar formato y
alinear el texto de las pginas Web.
Para utilizar etiquetas HTML en lugar de CSS, debe cambiar las preferencias de formato de
texto predeterminadas de Dreamweaver.
La utilizacin de CSS es una forma de controlar el estilo de una pgina Web sin que se vea
afectada su estructura. Al separar los elementos visuales de diseo (fuentes, colores,
mrgenes, etc.) de la estructura lgica de una pgina Web, CSS permite a los diseadores
Web tener un control visual y tipogrfico de la pgina Web sin que ello repercuta
negativamente en la integridad del contenido. Adems, al definir el diseo tipogrfico y el
diseo de la pgina a partir de un solo bloque de cdigo, sin tener que recurrir a mapas de
imagen, etiquetas font, tablas y GIF espaciadores, se pueden llevar a cabo descargas ms
by: magh 86
rpidamente, mejorar el mantenimiento del sitioWeb y establecer un punto central desde el
que se pueden controlar los atributos de diseo de varias pginas Web.
Los estilos CSS definen el formato del texto de una determinada clase o redefinen el formato
de una etiqueta HTML especfica (como h1, h2, p o li).
Puede almacenar los estilos CSS que cree directamente en el documento (la configuracin
predeterminada al aplicar formato al texto empleando el inspector de propiedades) o, si
desea tener mayor control y flexibilidad, en una hoja de estilos externa. Si adjunta una hoja
de estilos externa a varias pginas Web, todas las pginas reflejarn automticamente los
cambios realizados en la hoja. Para acceder a todas las reglas de estilos CSS de una pgina,
utilice el panel Estilos CSS (Ventana >Estilos CSS).
Nota: Puede combinar formato CSS y HTML 3.2 en la misma pgina. La aplicacin de
formato se realiza de forma jerrquica: el formato HTML 3.2 tiene prioridad sobre el formato
aplicado mediante hojas de estilo CSS externas y el estilo CSS incrustado en un documento
tiene prioridad sobre el estilo CSS externo.

I II II I. .1 11 1 U Ut t i i l l i i z za ac ci i n n d de el l i i n ns sp pe ec ct to or r d de e p pr ro op pi i e ed da ad de es s p pa ar ra a d da ar r f f o or rm ma at t o o a a t t e ex xt t o o
El inspector de propiedades de texto permite aplicar formato al texto seleccionado
actualmente. Puede cambiar el formato estableciendo propiedades nuevas. El estilo se aplica
inmediatamente al documento.

Puesto que el inspector de propiedades se utiliza para aplicar formato al texto, Dreamweaver
realiza un seguimiento de las propiedades de formato que el usuario asigna a todos los
elementos del texto y asigna una etiqueta a cada uno de ellos mediante una convencin de
asignacin de nombres: Style1, Style2, Style3, Stylen. Si asigna los mismos atributos de
formato a dos o ms elementos del texto, Dreamweaver asigna una etiqueta a los elementos
que tengan el mismo ttulo; de este modo, se eliminan los nombres de estilo redundantes. La
etiqueta que Dreamweaver aplica a un cuerpo de texto determinado se puede aplicar
posteriormente mediante el men emergente Estilo, lo que permite crear una biblioteca de
estilos dentro de una pgina y aplicar esos mismos estilos simplemente seleccionando el
elemento de texto en la pgina y seleccionando un estilo en el men Estilos. Puede cambiar
el nombre de los estilos por texto con ms significado, como Encabezado1, Encabezado2,
Cuerpo y Cuerpo Tabla.
El men emergente Estilo del inspector de propiedades muestra ambos nombres de estilos
en la pgina, adems de una vista previa de las propiedades del estilo. Las propiedades
mostradas en la vista previa son la familia de fuentes, el tamao y el grosor de la fuente, el
color del texto y el color de fondo.
by: magh 87
Cuando utiliza el inspector de propiedades para aplicar el estilo en negrita o cursiva,
Dreamweaver aplica automticamente las etiquetas <strong>o <em>, respectivamente. Si
disea pginas para navegadores de la versin 3.0 o anterior, debe cambiar esta preferencia
en la categora General del cuadro de dilogo Preferencias (Edicin >Preferencias).
Para ver un tutorial sobre la aplicacin de formato al texto con el inspector de propiedades,
consulte http://www.adobe.com/go/vid0147_es

I II II I. .1 12 2 A Ap pl l i i c ca ac ci i n n d de e f f o or rm ma at t o o a a p p r rr ra af f o os s
Dreamweaver admite todas las normas Web que se utilizan para
aplicar formato a pginas y objetos.
Utilice el men Formato del inspector de propiedades o el
submen Texto >Formato de prrafo para aplicar las etiquetas
estndar de prrafo y encabezado.
1 Site el punto de insercin en el prrafo o seleccione parte del
texto del prrafo.
2 En el submen Texto > Formato de prrafo o en el men
emergente Formato del inspector de propiedades, elija una opcin:
Elija un formato de prrafo (por ejemplo, Encabezado 1, Encabezado 2, Texto con formato
predeterminado, etc.). La etiqueta HTML asociada con el estilo seleccionado (por ejemplo, h1
para Encabezado 1, h2 para Encabezado 2, pre para Formato predeterminado, etc.) se
aplicar a todo el prrafo.
Seleccione Ninguno para quitar un formato de prrafo.
Cuando aplica una etiqueta de encabezado, se aade automticamente la siguiente lnea de
texto como un prrafo sencillo. Para cambiar esta configuracin, seleccione Edicin >
Preferencias; a continuacin, en la categora General, en la seccin Opciones de edicin,
compruebe que la casilla Cambiar a prrafo sencillo tras el encabezado no est activada.

I II II I. .1 13 3 C Ca am mb bi i o o d de el l c co ol l o or r d de el l t t e ex xt t o o
Puede cambiar el color predeterminado de todo el texto de una pgina o bien el color del
texto seleccionado en la pgina.
Definicin de colores de texto predeterminados para una pgina
Seleccione Modificar >
Propiedades de la pgina >Aspecto
o Vnculos y, a continuacin,
seleccione colores para las opciones
Color del texto, Color de los
vnculos, Vnculos visitados y
Vnculos activos.
Nota: El color del vnculo activo es el
que adopta el vnculo cuando se
hace clic en l.
by: magh 88
Cambio del color del texto seleccionado
Seleccione el texto y siga uno de estos procedimientos:
Seleccione un color haciendo clic en el cuadro de color del inspector de propiedades.
Seleccione Texto > Color,
seleccione un color del selector de
colores del sistema y haga clic en
Aceptar.
Escriba el nombre del color o un
nmero hexadecimal directamente
en el campo del inspector de
propiedades.
Restablecimiento del color predeterminado del texto
1 En el inspector de propiedades, haga clic en el cuadro de color para abrir la paleta de
colores seguros para la Web.
2 Haga clic en el botn Tachado (el
botn cuadrado blanco y atravesado
por una lnea roja que se encuentra
en la esquina superior derecha).

I II II I. .1 14 4 A Al l i i n ne ea ac ci i n n d de e t t e ex xt to o
Puede alinear texto en la pgina utilizando el inspector de propiedades o el submen Texto >
Alinear. Asimismo, puede centrar cualquier elemento en una pgina usando el comando
Texto >Alinear >Centro.
Alineacin de texto en una pgina
1 Seleccione el texto que desea alinear o,
simplemente, inserte el puntero al principio del
texto.
2 Haga clic en una opcin de alineacin
(Izquierda, Derecha o Centro) en el inspector
de propiedades, o seleccione Texto >Alinear y
seleccione un comando.

Cmo centrar elementos en la pgina
1 Seleccione el elemento que desea centrar
(imagen, plug-in, tabla u otro elemento).
2 Seleccione Texto >Alinear >Centro.
Nota: Se pueden alinear y centrar bloques
completos de texto, pero no partes de un
encabezado o de un prrafo.
by: magh 89
Aplicacin de sangra al texto
El comando Sangra aplica la etiqueta HTML blockquote al prrafo de texto, y aplica sangra
a ambos lados de la pgina.
1 Site el punto de insercin en el prrafo al que desea aplicar
sangra.
2 Haga clic en el botn Sangra o Anular sangra del inspector de
propiedades, seleccione Texto > Sangra o Anular sangra, o
seleccione Lista >Sangra o Anular sangra en el men contextual.
Nota: Puede aplicar varias sangras a un prrafo, cada vez que seleccione este comando.

I II II I. .1 15 5 U Ut t i i l l i i z za ac ci i n n d de e r re eg gl l a as s h ho or ri i z zo on nt t a al l e es s
Las reglas horizontales (lneas) son tiles para organizar la informacin. Puede separar
visualmente el texto y los objetos de una pgina con una o ms reglas.
Creacin de una regla horizontal
1 En la ventana de documento, site el punto de
insercin en el lugar donde desea insertar una
regla horizontal.
2 Seleccione Insertar >HTML >Regla horizontal.

Modificacin de una regla horizontal
1 En la ventana de documento, seleccione la regla horizontal.
2 Seleccione Ventana >Propiedades para abrir el inspector de propiedades y modificar las
propiedades que desee:

An (Ancho) y Al (Alto) Especifican el ancho y el alto de la regla en pxeles o como
porcentaje del tamao de la pgina.
Alinear Especifica la alineacin de la regla (Predet., Izquierda, Centro o Derecha). Esta
configuracin slo es aplicable si el ancho de la regla es inferior al ancho de la ventana del
navegador.
Sombreado Especifica si la regla debe trazarse con sombreado. Desactive esta opcin para
trazar la regla con un color slido.

by: magh 90
I II II I. .1 16 6 A Ad di i c ci i n n d de e u un na a n nu ue ev va a c co om mb bi i n na ac ci i n n a a l l a a l l i i s st t a a d de e f f u ue en nt t e es s
1 Seleccione Texto > Fuente > Editar lista de
fuentes.
2 Seleccione una fuente de la lista de Fuentes
disponibles y haga clic en el botn <<para aadir
la fuente a la lista de Fuentes elegidas.
3 Repita el paso 2 con cada fuente de la
combinacin.

Para aadir una fuente que no est instalada en el sistema, escriba el nombre de la fuente en
el campo de texto situado bajo la lista Fuentes disponibles y haga clic en el botn <<para
aadirla a la combinacin. Aadir una fuente que no est instalada en el sistema resulta til,
por ejemplo, para especificar una fuente slo para Windows cuando desarrolla pginas con
Macintosh.
4 Cuando termine de seleccionar fuentes especficas, seleccione una familia genrica de
fuentes en el men Fuentes disponibles y haga clic en el botn <<para pasar la familia
genrica de fuentes a la lista Fuentes elegidas.
Las familias genricas de fuentes son: cursiva, fantasa, monoespacio, sans-serif y serif. Si
ninguna de las fuentes de la lista Fuentes elegidas est disponible en el sistema del usuario,
el texto aparecer en la fuente predeterminada asociada con la familia genrica de fuentes.
Por ejemplo, la fuente monoespacio predeterminada en la mayora de los sistemas es
Courier.

I II II I. .1 17 7 I In ns se er rc ci i n n d de e f f e ec ch ha as s
Dreamweaver proporciona un objeto Fecha que permite insertar la fecha actual con el
formato que prefiera (con o sin la hora) y ofrece la posibilidad de actualizarla cada vez que
guarde el archivo.
Nota: Las fechas y horas que aparecen en el cuadro de dilogo Insertar fecha no son las
actuales y tampoco reflejan las que ver el usuario cuando visite el sitio. Slo son ejemplos
de la forma en que se puede presentar esta informacin.
1 En la ventana de documento, site el punto de insercin en el lugar donde desea insertarla.
Seleccione Insertar >Fecha.
En la categora Comn de la barra Insertar, haga clic en el icono Fecha.
3 En el cuadro de dilogo que aparece, seleccione el
formato de da de la semana, fecha y hora.
4 Si desea que la fecha insertada se actualice cada
vez que guarde el documento, seleccione Actualizar
automticamente al guardar. Si desea que la fecha se
convierta en texto normal cuando se inserte y no se
actualice automticamente, desactive esa opcin.
by: magh 91
5 Haga clic en Aceptar para insertar la fecha.

I II II I. .1 18 8 A Ad di i c ci i n n y y m mo od di i f f i i c ca ac ci i n n d de e i i m m g ge en ne es s
Imgenes
Existen muy diversos formatos de archivo grfico, aunque para pginas Web generalmente
se utilizan tres formatos de archivo grfico: GIF, J PEG y PNG. GIF y J PEG son los formatos
de archivo que cuentan con mayor compatibilidad y pueden verse en la mayora de los
navegadores.
Los archivos PNG son los ms adecuados para casi cualquier tipo de grfico Web debido a
su flexibilidad y su tamao de archivo reducido; no obstante, la visualizacin de imgenes
PNG slo es parcialmente compatible con los navegadores Microsoft Internet Explorer (4.0 y
posteriores) y Netscape Navigator (4.04 y posteriores). Por lo tanto, a no ser que est
diseando para un tipo de usuario concreto que utilice un navegador compatible con el
formato PNG, deber utilizar archivos GIF o J PEG para poder llegar a ms usuarios.
Insercin de una imagen
Al insertar una imagen en un documento de Dreamweaver, se genera una referencia al
archivo de imagen en el cdigo HTML. Para asegurarse de que esta referencia es correcta,
el archivo de imagen deber estar en el sitio actual. Si no lo est, Dreamweaver le
preguntar si desea copiar el archivo en el sitio.
Asimismo, las imgenes se pueden insertar de forma dinmica. Las imgenes dinmicas son
aquellas que cambian con frecuencia. Por ejemplo, en los sistemas de rotacin de rtulos
publicitarios es necesario seleccionar de forma aleatoria un nico rtulo de una lista de
posibles rtulos y, despus, mostrar dinmicamente la imagen del rtulo seleccionado
cuando se solicite una pgina.
Tras insertar una imagen, puede definir atributos de accesibilidad de etiqueta de imagen que
los lectores de pantalla pueden leer para usuarios ciegos. Estos atributos se pueden editar
en el cdigo HTML.
Para ver un tutorial sobre la creacin de vnculos, vea http://www.adobe.com/go/vid0148_es
1 Coloque el punto de insercin en el lugar de la ventana de documento en el que desea que
aparezca la imagen y, a continuacin, siga uno de estos procedimientos:
En la categora Comn de la barra Insertar, haga clic en el icono Imagen .
En la categora Comn de la barra Insertar, haga clic en el men Imgenes y seleccione el
icono Imagen. Con el icono Imagen visible en la barra Insertar, puede arrastrar el icono a la
ventana del documento (o a la ventana de visualizacin de cdigo, si est trabajando en el
cdigo).
Seleccione Insertar >Imagen.
Arrastre una imagen desde el panel Activos (Ventana >Activos) hasta la posicin deseada
de la ventana de documento.
A continuacin, siga con el paso 3.
Arrastre una imagen desde el panel Archivos hasta la posicin deseada de la ventana de
documento. A continuacin, siga con el paso 3.
by: magh 92
Arrastre una imagen desde el escritorio hasta la posicin deseada de la ventana de
documento. A continuacin, siga con el paso 3.
2 En el cuadro de dilogo que aparece,
siga uno de estos procedimientos:
Seleccione Sistema de archivos para
elegir un archivo de imagen.
Seleccione Fuente de datos para elegir
un origen de imagen dinmica.
Haga clic en el botn Sitios y
servidores para elegir un archivo de
imagen en una carpeta remota de uno
de los sitios de Dreamweaver.
3 Busque y seleccione el origen de
imagen o contenido que desee insertar.

Si est trabajando en un documento que no est guardado, Dreamweaver genera una
referencia con la estructura file:// para el archivo de imagen. Al guardar el documento en
cualquier lugar del sitio, Dreamweaver convierte la referencia en una ruta relativa al
documento.
Nota: Al insertar imgenes, se puede utilizar una ruta absoluta a una imagen que se
encuentra en un servidor remoto (es decir, una imagen que no est en el disco duro local)..
4 Haga clic en Aceptar. Aparece el cuadro Atributos de accesibilidad de la etiqueta de
imagen si se ha activado el cuadro de dilogo en Preferencias (Edicin >Preferencias).
5 Introduzca los valores en los cuadros de texto Texto alternativo y Descripcin larga y haga
clic en Aceptar.
En el cuadro de dilogo Texto
alternativo, escriba un nombre para la
imagen o una breve descripcin. El lector
de pantalla lee la informacin introducida
en dicho cuadro. Debe limitar la entrada a
alrededor de 50 caracteres.
En el cuadro Descripcin larga, escriba la
ubicacin de un archivo que aparezca cuando el usuario haga clic en la imagen o en el icono
de carpeta para desplazarse hasta el archivo. Este cuadro de texto proporciona un vnculo a
un archivo con el que est relacionado u ofrece ms informacin acerca de la imagen.
Nota: Puede completar uno o ambos cuadros de texto, en funcin de sus necesidades. El
lector de pantalla lee el atributo Texto alternativo de la imagen. O presione Cancelar, la
imagen aparece en el documento, pero no se le asocia etiquetas o atributos de accesibilidad.
6 En el inspector de propiedades (Ventana >Propiedades), establezca las propiedades de la
imagen.

by: magh 93
Definicin de propiedades de imagen
El inspector de propiedades de imagen permite establecer las propiedades de una imagen. Si
no ve todas las propiedades de imagen, haga clic en la flecha de ampliacin situada en la
esquina inferior derecha.

1 Seleccione Ventana >Propiedades para ver el inspector de propiedades para una imagen
seleccionada.
2 En el cuadro de texto situado bajo la imagen en miniatura, introduzca un nombre de modo
que pueda hacer referencia a la imagen cuando utilice un comportamiento de Dreamweaver
(como Intercambiar imagen) o cuando utilice un lenguaje de creacin de scripts como
J avaScript o VBScript.
3 Defina cualquiera de las opciones de imagen.
An (Ancho) y Al (Alto) El ancho y el alto de la imagen en pxeles. Dreamweaver actualiza
automticamente estos cuadros de texto con las dimensiones originales de la imagen al
insertar una imagen en una pgina.
Si establece valores de An (Ancho) y Al (Alto) que no se corresponden con el ancho y el alto
reales de la imagen, es posible que sta no se muestre correctamente en el navegador. Para
restaurar los valores originales, haga clic en las etiquetas de los cuadros de texto An (Ancho)
y Al (Alto), o bien haga clic en el botn de restablecimiento del tamao de la imagen situado
a la derecha de los cuadros de texto An y Al al introducir un valor nuevo.
Nota: Puede cambiar estos valores para establecer la escala del tamao de visualizacin de
esta instancia de imagen, aunque no por ello se reducir el tiempo de descarga, ya que el
navegador descarga todos los datos de la imagen antes de asignarle una escala. Si desea
reducir el tiempo de descarga y conseguir que todas las instancias de una imagen tengan el
mismo tamao, utilice una aplicacin de edicin de imgenes.
Origen Especfica el archivo de origen para la imagen. Haga clic en el icono de carpeta para
localizar el archivo de origen o escriba la ruta correspondiente.
Vnculo Especifica un hipervnculo para la imagen. Arrastre el icono de sealizacin hasta un
archivo del panel Archivos, haga clic en el icono de carpeta para buscar y seleccionar un
documento del sitio o escriba el URL.
Alinear Alinea una imagen y texto en la misma lnea.
Alt Especifica el texto alternativo que aparecer en lugar de la imagen en los navegadores
que slo admiten texto o en aqullos configurados para descargar las imgenes
manualmente. Para usuarios con deficiencias visuales que usan sintetizadores de voz con
navegadores que slo admiten texto, el texto se reproduce en voz alta. En algunos
navegadores, este texto tambin aparece al situar el puntero sobre la imagen.
Mapa y Herramientas de zona interactiva Permiten asignar una etiqueta y crear un mapa
de imagen en el lado del cliente.
by: magh 94
Espacio V y Espacio H Aaden espacio, en pxeles, a los lados de la imagen. Espacio V
aade espacio en la parte superior e inferior de una imagen. Espacio H aade espacio a la
izquierda y la derecha de una imagen.
Destino Especifica el marco o la ventana donde se cargar la pgina vinculada. (Esta opcin
no est disponible cuando la imagen no est vinculada a otro archivo.) En la lista Destino
figuran los nombres de todos los marcos del conjunto de marcos actual. Tambin puede
seleccionar estos nombres de destino reservados:
_blank carga el archivo vinculado en una ventana de navegador nueva y sin nombre.
_parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana del
marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el
archivo vinculado se cargar en la ventana completa del navegador.
_self carga el archivo vinculado en el mismo marco o ventana que el vnculo. Este destino
es el predeterminado, por lo que normalmente no es preciso especificarlo.
_top carga el archivo vinculado en la ventana completa del navegador, quitando as todos
los marcos.
Orig. (Origen base) Especifica la imagen que debe cargarse antes que la imagen principal.
Muchos diseadores utilizan una versin de 2 bpc (blanco y negro) de la imagen principal
porque se carga ms rpidamente y ofrece a los visitantes una idea de lo que van a ver.
Borde El ancho en pxeles del borde de la imagen. La configuracin predeterminada es sin
borde.
Edicin Inicia el editor de imgenes que ha especificado
en las preferencias de editores externos y abre la imagen
seleccionada.
Optimizar Abre el cuadro de dilogo Optimizacin .
Recorte Recorta el tamao de una imagen, con lo que se eliminan las reas no deseadas de
la imagen seleccionada .
Volver a muestrear Muestrea de nuevo una imagen cuyo tamao se ha cambiado, lo que
mejora su calidad en su nuevo tamao y forma.
Brillo y contraste Ajusta el brillo y el contraste de una
imagen , aparece el cuadro de dialogo:

Perfilar Ajusta la intensidad de una imagen .
Restablecer tamao Restaura los valores de An (Ancho) y Al (Alto) para devolver el tamao
original a la imagen. Este botn aparece a la derecha de los cuadros de texto An (Ancho) y Al
(Alto) cuando se ajustan los valores de la imagen seleccionada.
Alineacin de una imagen
Puede alinear una imagen con el texto, con otra imagen, con un plug-in o con otros
elementos de la misma lnea. Adems puede alinear horizontalmente una imagen.
by: magh 95
1 Seleccione la imagen en la vista de diseo.
2 Establezca los atributos de alineacin de la imagen
en el inspector de propiedades con el men emergente
Alinear.
Puede establecer la alineacin con relacin a otros
elementos del mismo prrafo o de la misma lnea.
Nota: HTML no ofrece ningn mtodo para ajustar texto alrededor del contorno de una
imagen, como ocurre con algunos procesadores de textos.
Las opciones de alineacin son las siguientes:
Predeterminado Especifica una alineacin con la lnea de base. (El valor predeterminado
puede variar en funcin del navegador del visitante del sitio.)
Lnea de base e Inferior Alinean la lnea de base del texto (u otro elemento del mismo
prrafo) con la parte inferior del objeto seleccionado.
Superior Alinea la parte superior de una imagen con la parte superior del elemento ms alto
(imagen o texto) de la lnea actual.
Medio Alinea la parte central de la imagen con la lnea de base de la lnea actual.
Texto superior Alinea la parte superior de la imagen con la parte superior del carcter ms
alto de la lnea de texto.
Medio absoluta Alinea la parte central de la imagen con la parte central del texto de la lnea
actual.
Inferior absoluta Alinea la parte inferior de la imagen con la parte inferior de la lnea de texto
(incluidos los trazos descendentes, como en el caso de la letra g).
Izquierda Sita la imagen seleccionada en el margen izquierdo, ajustando a la derecha el
texto que la rodea. Si hay texto alineado a la izquierda delante del objeto, los objetos
alineados a la izquierda suelen pasar a una nueva lnea.
Derecha Sita la imagen en el margen derecho, ajustando a la izquierda el texto que la
rodea. Si hay texto alineado a la derecha delante del objeto, los objetos alineados a la
derecha suelen pasar a una nueva lnea.
Cmo redimensionar un elemento visualmente
1 Seleccione el elemento (por ejemplo, una imagen o un archivo SWF) en la ventana de
documento.
Aparecen manejadores de cambio de tamao en los lados inferior y derecho del elemento y
en la esquina inferior derecha.
Si no aparecen, haga clic en cualquier punto fuera del elemento cuyo tamao desea cambiar
y vuelva a seleccionarlo o haga clic en la etiqueta correspondiente del selector de etiquetas
para seleccionar el elemento.
2 Cambie el tamao del elemento siguiendo uno de estos procedimientos:
Para ajustar el ancho del elemento, arrastre el manejador de seleccin del lado derecho.
Para ajustar el alto del elemento, arrastre el manejador de seleccin de la parte inferior.
by: magh 96
Para ajustar al mismo tiempo el ancho y el alto del elemento, arrastre el manejador de
seleccin de la esquina.
Para conservar las proporciones del elemento (su relacin ancho/alto) al ajustar sus
dimensiones, arrastre el manejador de seleccin de la esquina mientras presiona la tecla
Mays.
Si desea ajustar el ancho y el alto de un elemento a un tamao especfico (por ejemplo, 1
por 1 pxel), utilice el inspector de propiedades para introducir un valor numrico. Puede
cambiar visualmente el tamao de los elementos hasta un mnimo de 8 por 8 pxeles.
3 Para restaurar las dimensiones originales de un elemento, elimine los valores de los
cuadros An (Ancho) y Al (Alto) o haga clic en el botn Restablecer tamao en el inspector de
propiedades de imagen.

Recuperacin del tamao original de una imagen
Haga clic en el botn Restablecer tamao del
inspector de propiedades de imagen .

Recorte de una imagen
Dreamweaver permite recortar imgenes de archivos de mapa de bits.
Nota: Cuando se recorta una imagen, se cambia el archivo de imagen de origen en el disco.
1 Abra la pgina que contiene la imagen que desea recortar, seleccione la imagen y siga uno
de estos procedimientos:
Haga clic en el icono Herramienta Recorte del inspector de propiedades de imagen .
Seleccione Modificar >Imagen >Recorte.
Aparecern manejadores de recorte alrededor de la imagen seleccionada.
2 Ajuste los manejadores de recorte de modo que el recuadro de lmite rodee el rea de la
imagen de mapa de bits que desea mantener.
3 Haga doble clic en el recuadro de lmite o presione Intro para recortar la seleccin.
4 Un cuadro de dilogo le informa de que el archivo de imagen que est cortando cambiar
en el disco. Haga clic en Aceptar. Los pxeles del mapa de bits seleccionado que se
encuentren fuera del recuadro de lmite, se eliminarn, pero el resto de los objetos de la
imagen permanecern.
5 Muestre una vista previa de la imagen para comprobar que la imagen ha quedado como
esperaba. Si no es as, seleccione Edicin >Deshacer Recortar para volver a la imagen
original.
Nota: Puede deshacer el efecto del comando de recorte.
Aj uste del brillo y el contraste de una imagen
Brillo/Contraste modifica el contraste o el brillo de los pxeles de la imagen. Esto afecta a los
resaltados, sombras y medios tonos de la imagen. Normalmente, la funcin Brillo/Contraste
se utiliza para corregir imgenes que son demasiado oscuras o demasiado claras.
by: magh 97
1 Abra la pgina que contiene la imagen que desea ajustar, seleccione la imagen y siga uno
Haga clic en el botn Brillo/Contraste en el inspector de propiedades de imagen .
Seleccione Modificar >Imagen >Brillo/Contraste.
2 Arrastre los controles deslizantes de Brillo y Contraste
para ajustar los valores. Los valores pueden estar
comprendidos entre -100 y 100.
3 Haga clic en Aceptar.

Cmo perfilar una imagen
El perfilado aumenta el contraste de los pxeles situados alrededor de los bordes de los
objetos para aumentar la definicin o nitidez de la imagen.
1 Abra la pgina que contiene la imagen que desea perfilar, seleccione la imagen y siga uno
Haga clic en el botn Perfilar del inspector de propiedades de imagen.
Seleccione Modificar >Imagen >Perfilar.
2 Para especificar el grado de perfilado que
Dreamweaver aplicar a la imagen, puede arrastrar el
control deslizante o bien introducir un valor entre el 0 y el
10 en el cuadro de texto. Mientras ajusta la nitidez de la
imagen mediante el cuadro de dilogo Nitidez, puede
obtener una vista previa del cambio en la imagen.
3 Haga clic en Aceptar cuando est satisfecho con la imagen.
4 Guarde los cambios; para ello, seleccione Archivo >Guardar, o recupere la imagen original
seleccionando Edicin >Deshacer perfilar.
Nota: Slo puede deshacer el efecto del comando de perfilado (y con ello volver al archivo
de imagen original) antes de guardar la pgina que contiene la imagen. Una vez que haya
guardado la pgina, los cambios realizados en la imagen quedarn guardados de forma
permanente.

I II II I. .1 19 9 I In ns se er rc ci i n n d de e c co on nt t e en ni i d do o d de e F Fl l a as sh h
Tipos de archivos de Flash
Dreamweaver viene con objetos Flash que pueden utilizarse con independencia de que
tenga o no Flash instalado en su equipo. Antes de utilizar los comandos Flash que estn
disponibles en Dreamweaver, los tipos de archivos Flash ms utilizados se encuentran:
Archi vos (.fla) de Flash Archivos de origen de cualquier proyecto, que se crean en el
programa Flash. Este tipo de archivo slo se puede abrir en Flash (no en Dreamweaver ni en
los navegadores). Puede abrir el archivo Flash en Flash y, a continuacin, exportarlo a SWF
o SWT para utilizarlo en los navegadores.
by: magh 98
Archi vos SWF de Flash (.swf) Versin comprimida del archivo Flash (.fla) optimizada para
la Web. Este archivo se puede reproducir en navegadores y ver en Dreamweaver, pero no se
puede editar en Flash. ste es el tipo de archivo que se crea utilizando el botn Flash y
objetos de texto Flash.
Archi vos de plantilla Flash (.swt) Estos archivos permiten modificar y reemplazar
informacin de un archivo SWF de Flash. Se utilizan en el objeto de botn Flash, que permite
modificar la plantilla con texto o vnculos propios, para crear un SWF personalizado e
insertarlo en el documento. En Dreamweaver, estos archivos de plantilla se encuentran en
las carpetas Dreamweaver/Configuration/Flash Objects/Flash Buttons y Flash Text.
Elementos Flash (.swc) Archivos Flash SWF que permiten crear aplicaciones de Internet
completas mediante su incorporacin en una pgina Web. Los elementos Flash tienen
parmetros personalizables que pueden modificarse para realizar diferentes funciones de la
aplicacin.
Formato de archivo Flash Video (.flv) Archivo de vdeo que contiene datos codificados de
audio y vdeo para enviarlos a travs de FlashPlayer. Por ejemplo, si tuviera un archivo de
vdeo de QuickTime o Windows Media, debera utilizar un codificador (como Flash8 Video
Encoder o Sorensen Squeeze) para convertir el archivo de vdeo en un archivo FLV. Para
ms informacin, visite Centro de desarrolladores http://www.adobe.com/go/flv_devcenter_es

Insercin de un archi vo SWF (contenido de Flash)
1 En la vista Diseo de la ventana de documento, site el punto de insercin en el lugar
donde desea insertar el contenido y luego siga uno de estos procedimientos.
En la categora Comn de la barra
Insertar, seleccione Media y haga clic en
el icono Texto .
Seleccione Insertar >Media >Flash.
seleccione un archivo Flash (.swf).
En la ventana de documento aparecer
un marcador de posicin de Flash (al
contrario que en el caso de los objetos
de botn y texto Flash).
Vista previa de contenido de Flash en la ventana de documento
1 En la ventana de documento, haga clic en el marcador de
posicin de Flash para seleccionar el contenido de Flash del que
desea obtener una vista previa.
2 En el inspector de propiedades, haga clic en el botn
Reproducir. Haga clic en Detener para poner fin a la vista previa.
Tambin puede obtener una vista previa del contenido de Flash en un navegador
presionando F12. Para obtener una vista previa de todo el contenido de Flash en una pgina,
presione Control+Alt+Mays+P. Al hacerlo, todos los objetos Flash y archivos SWF estn
configurados para Reproducir.
by: magh 99
Configuracin de propiedades de pelculas Flash y Shockwave
Para asegurar los mejores resultados tanto en Internet Explorer como en Netscape
Navigator, Dreamweaver inserta las pelculas Flash y Shockwave mediante las etiquetas
object y embed. (Microsoft define la etiqueta object para los controles ActiveX y Netscape
Navigator establece la etiqueta embed para los plug-ins.) Para ver las propiedades siguientes
en el inspector de propiedades, seleccione un archivo Flash SWF o una pelcula Shockwave.
Seleccione un archivo FlashSWF o una pelcula Shockwave y establezca las opciones en
el inspector de propiedades (para ver todas las propiedades del archivo Flash SWF, haga clic
en la flecha de ampliacin situada en la esquina inferior derecha del inspector de
propiedades.)

Nombre Especifica un nombre para identificar una pelcula en los scripts. Introduzca un
nombre en el cuadro de texto sin ttulo que aparece a la izquierda del inspector de
propiedades.
An (Ancho) y Al (Alto) Especifican el ancho y el alto de la pelcula en pxeles.
Archi vo Especifica la ruta del archivo Flash o Shockwave. Haga clic en el icono de carpeta
para indicar un archivo o escriba la ruta correspondiente.
Origen Especifica la ruta del archivo de documento Flash (FLA) origen si estn instalados en
el equipo Dreamweaver y Flash. Para editar un archivo Flash (SWF), deber editar el
documento origen de la pelcula.
Editar Inicie Flash para actualizar un archivo FLA (un archivo creado en la herramienta de
edicin de Flash). Esta opcin estar desactivada si no tiene cargado Flash en el equipo.
Restablecer tamao Restaura el tamao original de la pelcula seleccionada.
Bucle Hace que la pelcula se reproduzca continuamente; cuando no est seleccionada, la
pelcula se reproduce una vez y se detiene.
Rep. autom. (Reproduccin automtica) Reproduce automticamente la pelcula al cargar
la pgina.
Espacio V y Espacio H Especifican el nmero de pxeles de espacio en blanco que habr
por encima, por debajo y a ambos lados de la pelcula.
Calidad Controla el antialias durante la reproduccin de la pelcula. Los valores altos brindan
una mayor calidad a la pelcula, pero requieren un procesador ms rpido para reproducirse
correctamente en la pantalla. El valor Baja da prioridad a la velocidad sobre el aspecto,
mientras que el valor Alta antepone el aspecto a la velocidad. Baja automtica da prioridad a
la velocidad, pero mejora el aspecto siempre que resulte posible. Alta automtica da prioridad
a las dos cualidades, aunque, si es necesario, sacrifica el aspecto en pos de la velocidad.
Escala Determina cmo se ajusta la pelcula a las dimensiones establecidas por los cuadros
de texto de ancho y alto. La configuracin predeterminada hace que la pelcula se
reproduzca entera.
by: magh 100
Sin borde Ajusta la pelcula a las dimensiones establecidas para que no aparezcan bordes y
se mantenga la relacin de aspecto original.
Aj uste exacto Ajusta la escala de la pelcula a las dimensiones establecidas sin tener en
cuenta la relacin de aspecto.
Alinear Determina cmo se alinear la pelcula en la pgina.
Fnd Especifica un color de fondo para la zona de la pelcula. Este color tambin aparecer
cuando la pelcula no se est reproduciendo (mientras se carga y despus de haberse
reproducido).
Parmetros Abre un cuadro de dilogo para introducir parmetros adicionales que se
transferirn a la pelcula. La pelcula deber estar diseada para recibir estos parmetros
adicionales.
Creacin e insercin de un botn Flash
Puede crear e insertar botones Flash en los documentos mientras trabaja en la vista Diseo
o en la vista Cdigo. Si tiene Flash instalado, no es necesario hacer esto; el objeto de botn
Flash es un botn actualizable basado en una plantilla de Flash.
Nota: Deber guardar el documento antes de insertar un objeto de texto o de botn Flash.
1 En la ventana de documento, coloque el punto de insercin en el lugar en el que desea
insertar el botn Flash.
2 Para abrir el cuadro de dilogo Insertar botn Flash, siga uno de estos
procedimientos:
En la categora Comn de la barra Insertar, seleccione Media y haga clic en
el icono Botn Flash .
Seleccione Insertar >Media >Botn Flash.

3 Seleccione las opciones deseadas del cuadro de dilogo Insertar botn Flash y haga clic
en Aplicar o Aceptar para insertar el botn Flash en la ventana de documento.

El cuadro de dialogo Insertar botn, elija de la
lista Estilo, observe en el cuadro Muestra los
colores y formas, en el cuadro Texto del botn
escriba el contenido del botn, en el cuadro
Fuente elija la fuente deseada, en el cuadro
vinculo establezca el enlace (opcional), en
caso de que establezca un vinculo el cuadro
destino permite que al abrir ese enlace se
muestre el contenido en la misma ventana,
otra ventana en blanco.
Despus de establecer las propiedades, haga
clic en el botn Aceptar. Aparece otro cuadro
de dialogo que le pregunta sobre los atributos
de accesibilidad de flash, haga clic en el botn
Aceptar.
by: magh 101
Modificacin de un objeto de botn Flash
Puede modificar las propiedades y el contenido del objeto de botn Flash.
El inspector de propiedades muestra las
propiedades del botn Flash. Puede utilizar el
inspector de propiedades para especificar los
atributos HTML fsicos del botn, como su ancho,
alto y color de fondo. (Haga clic en la flecha de
ampliacin, situada en la esquina inferior derecha,
para ver ms propiedades.)
Para modificar otras propiedades de contenido de un botn Flash, como el texto y el color del
botn, as como el URL que abre el navegador cuando se hace clic en el botn, utilice el
cuadro de dilogo Insertar botn Flash.

Modificacin del contenido de un objeto Flash
1 Para realizar cambios en el contenido, muestre el cuadro de dilogo Insertar botn Flash
siguiendo uno de estos procedimientos:
Haga doble clic en el objeto de botn Flash.
Haga clic en Editar en el inspector de propiedades.
Haga clic con el botn derecho del ratn y elija Editar en el men contextual.
2 Seleccione un estilo de botn de la lista Estilo.
Puede ver un ejemplo del botn en el cuadro de texto Muestra. Haga clic en esta muestra
para ver cmo funciona en el navegador.
3 Opcional: en el cuadro Texto de botn, escriba el texto que desee mostrar.
4 En el men Fuente, seleccione la fuente del texto del botn.
Si la fuente predeterminada de un botn no est disponible en el sistema, seleccione otra
fuente en el men. El cuadro de texto Muestra no refleja la fuente, pero puede hacer clic en
Aplicar para insertar el botn en la pgina y obtener una vista previa.
5 En el cuadro Tamao, introduzca un valor numrico para el tamao de la fuente.
6 Opcional: en el cuadro de texto Vnculo, introduzca un vnculo absoluto o relativo al
documento para el botn.
ste es el URL que el navegador abrir cuando el visitante haga clic en el botn.
7 Opcional: en el cuadro Destino, especifique la ubicacin en la que se abrir el documento
vinculado. Puede seleccionar una opcin demarco o ventana en el men emergente. Los
nombres de fotograma slo aparecen en la lista si el objeto Flash se edita mientras se
encuentra en un conjunto de fotogramas.
8 Opcional: en el cuadro Color de fondo, establezca un color de fondo para el archivo SWF
de Flash. Utilice el selector de color o escriba un valor hexadecimal para la Web.
9 En el cuadro Guardar como, introduzca un nombre de archivo para guardar el nuevo
archivo SWF.
by: magh 102
10 Haga clic en Obtener ms estilos para pasar al sitio Adobe Exchange y descargar ms
estilos de botn.
11 Haga clic en Aplicar o Aceptar para insertar el botn Flash en la ventana de documento.

I II II I. .2 20 0 A Ad di i c ci i n n d de e s so on ni i d do o
Formatos de archivo de audio
Si lo desea, puede aadir sonido a una pgina Web. Existen distintos tipos de archivos de
sonido, como .wav, .midi y .mp3 entre otros. Los factores que hay que tener en cuenta antes
de optar por un formato y un mtodo para aadir sonido son: su finalidad, el tipo de usuarios
a los que est destinado, el tamao de archivo, la calidad de sonido y las diferencias en los
navegadores.
Nota:Cada navegador trata los archivos de sonido de una formamuy distinta. Si lo desea,
puede aadir un archivo de sonido a un archivo Flash SWF y luego incrustar el archivo SWF
para mejorar la coherencia.
La siguiente lista describe los formatos de archivo de audio ms comunes junto con algunas
de sus ventajas y desventajas en relacin con el diseo Web.
El formato .midi o .mid (Interfaz digital para instrumentos musicales, Musical
Instrument Digital Interface) Este formato es para msica instrumental. Los archivos MIDI
son compatibles con numerosos navegadores y no precisan ningn plug-in.
Aunque su calidad de sonido es muy alta, sta puede variar en funcin de la tarjeta de sonido
del visitante. Un archivo MIDI pequeo puede contener un clip de sonido de larga duracin.
Los archivos MIDI no se pueden grabar y deben sintetizarse en un ordenador con hardware y
software especiales.
Los archivos de formato .wav (Extensin de forma de onda, Waveform Extension)
Estos archivos ofrecen una buena calidad de sonido, son compatibles con numerosos
navegadores y no requieren ningn plug-in. Puede grabar sus propios archivos
WAV desde un CD, una cinta, a travs de un micrfono, etc. Sin embargo, el gran tamao de
archivo limita considerablemente la duracin de los clips de sonido que se pueden utilizar en
las pginas Web.
El formato .aif (Formato de archivo de intercambio de audio, Audio Interchange File
Format o AIFF), El formato AIFF, al igual que el formato WAV, ofrece buena calidad de
sonido, se puede reproducir en la mayora de los navegadores y no requiere plug-in.
Tambin se pueden grabar archivos AIFF desde un CD, una cinta, a travs de un micrfono,
etc. Sin embargo, el gran tamao de archivo limita considerablemente la duracin de los clips
de sonido que se pueden utilizar en las pginas Web.
El formato .mp3 (Audio del Grupo de Expertos en Imgenes en Movimiento, Motion
Picture Experts Group Audio o MPEGAudi o
Nivel-3) Un formato comprimido que reduce considerablemente el tamao de los archivos de
sonido. La calidad de sonido es excelente: si se graba y comprime correctamente un archivo
MP3, su calidad es equiparable a la de un CD. La tecnologa MP3 permite reproducir el
archivo en flujo de modo que el visitante no tenga que esperar a que se descargue todo el
archivo para escucharlo. Sin embargo, el tamao del archivo es superior al de un archivo
Real Audio, por lo que una cancin entera puede tardar bastante en descargarse en una
by: magh 103
conexin de mdem de acceso telefnico (lnea telefnica) tpica. Para reproducir archivos
MP3, los visitantes debern descargar e instalar una aplicacin auxiliar o un plug-in como
QuickTime, Windows Media Player o RealPlayer.
El formato .ra, .ram, .rpm o Real Audio Este formato tiene un alto grado de compresin con
tamaos de archivo ms pequeos que MP3. Descarga archivos de canciones completas en
un perodo de tiempo razonable. Dado que los archivos se pueden reproducir en flujo desde
un servidorWeb normal, los visitantes pueden comenzar a escuchar el sonido antes de que el
archivo se haya descargado por completo. Los visitantes debern descargar e instalar la
aplicacin auxiliar o plug-in RealPlayer para reproducir estos archivos.
.qt, .qtm, .mov o QuickTime Es un formato de audio y de vdeo desarrollado por Apple
Computer. QuickTime est incluido con los sistemas operativos Apple Macintosh, y lo utilizan
la mayora de las aplicaciones de Macintosh que emplean audio, vdeo o animacin. Los PC
tambin pueden reproducir archivos en formato QuickTime, pero requieren un controlador de
QuickTime especial. QuickTime admite la mayora de los formatos de codificacin, como
Cinepak, J PEG y MPEG.
Nota: Adems de los formatos ms comunes enumerados anteriormente, existen muchos
otros formatos de archivo de audio y vdeo que pueden utilizarse en la Web. Si encuentra un
formato de archivo multimedia que no conoce, localice al creador del formato para obtener
informacin sobre cul es la mejor manera de utilizarlo e implementarlo.

Incrustacin de un archi vo de sonido
Al incrustar audio se incorpora el sonido directamente en la pgina, pero el sonido slo se
reproduce si los visitantes del sitio disponen del plug-in adecuado para el archivo de sonido
elegido. Puede incrustar archivos si desea utilizar msica de fondo o si quiere controlar el
volumen, el aspecto del reproductor en la pgina o los fragmentos de inicio y final del archivo
de sonido.
Al incorporar archivos de sonido en pginas Web, medite detenidamente cul ser su uso en
el sitio Web y cmo utilizarn los visitantes del sitio estos recursos multimedia. Proporcione
siempre un control para desactivar o activar la reproduccin de sonido, por si los visitantes no
desean escuchar el contenido de audio.
1 En la vista Diseo, site el punto de insercin en el lugar en el que desea colocar el archivo
y luego siga uno de estos procedimientos:
En la categora Comn de la barra Insertar, haga clic en el botn Media y
seleccione el icono Plugin del men desplegable.
Seleccione Insertar >Media >Plug-in.

by: magh 104
2 En el inspector de propiedades, haga clic en el icono de carpeta junto al cuadro de texto
Vnculo para acceder al archivo de audio o escriba la ruta y el nombre del archivo en el
cuadro de texto Vnculo.
3 Especifique el ancho y el alto introduciendo los valores en los cuadros de texto
correspondientes o cambiando el tamao del marcador de posicin del plug-in en la ventana
de documento.
Estos valores determinan con qu tamao se muestran los controles de audio en el
navegador.

I II II I. .2 21 1 I In ns se er rc ci i n n d de e o ob bj j e et to os s m mu ul l t t i i m me ed di i a a
Puede insertar archivos SWF u objetos de Flash, pelculas QuickTime o Shockwave, applets
de J ava, controles ActiveX y otros objetos de audio o vdeo en un documento de
Dreamweaver. Si ha insertado atributos de accesibilidad con un objeto multimedia, puede
establecer los atributos de accesibilidad y editar dichos valores en el cdigo HTML.
1 Site el punto de insercin en la ventana de documento en la que desea insertar el objeto.
2 Inserte el objeto siguiendo uno de estos procedimientos:
En la categora Comn de la barra Insertar, haga clic en el botn Media y
seleccione el icono para el tipo de objeto que desea insertar.
Seleccione el objeto adecuado en el submen Insertar >Media.
Si el objeto que desea insertar no es un objeto Flash, Shockwave, Applet
o ActiveX, seleccione Plugin en el submen Insertar >Media.
Aparecer un cuadro de dilogo que le permitir seleccionar un archivo
origen y especificar diversos parmetros para el objeto multimedia.
Para evitar que aparezcan estos cuadros de dilogo, seleccione Edicin >
Preferencias > General y desactive la opcin Mostrar dilogo al insertar
objetos. Para anular las preferencias de presentacin de cuadros de
dilogo, mantenga presionada la tecla Control mientras inserta el objeto.
Por ejemplo, para insertar un marcador de posicin para una pelcula Shockwave sin
especificar el archivo, mantenga presionada la tecla Control u Opcin y haga clic en el botn
Shockwave en el men emergente Media de la categora Comn de la barra Insertar, o bien
seleccione Insertar > Media > Shockwave.
3 Seleccione las opciones deseadas en el
cuadro de dilogo Seleccionar archivo o
Insertar Flash y haga clic en Aceptar.
Nota: Aparece el cuadro de dilogo Atributos
de accesibilidad si ha elegido mostrar los
atributos al insertar medios en el cuadro de
dilogo Edicin > Preferencias.
4 Establezca los atributos de accesibilidad.
Nota: Tambin puede editar atributos de
objetos multimedia seleccionando el objeto y
editando el cdigo HTML en la vista Cdigo o
by: magh 105
haciendo clic con el botn derecho del ratn o manteniendo pulsada la tecla Ctrl y, a
continuacin, seleccionando Editar cdigo de etiqueta.
Ttulo Introduzca un ttulo para el objeto multimedia.
Clave de acceso Introduzca un equivalente para teclado (una letra) en el cuadro de texto
para seleccionar el objeto multimedia en el navegador. Esto permite al visitante del sitio
utilizar la tecla Control (Windows) con la clave de acceso para acceder al objeto. Por
ejemplo, si introduce B como Clave de acceso, utilice Control +B para seleccionar el objeto
en el navegador.
ndice de fichas Introduzca un nmero para el orden de tabulacin del objeto de formulario.
Configurar el orden de tabulacin resulta til cuando existen otros vnculos y objetos de
formulario en la pgina y es preciso que el usuario se desplace a travs de ellos en un orden
especfico. Si establece el orden de tabulacin de un objeto, asegrese de definir el orden de
tabulacin de todos ellos.
5 Haga clic en Aceptar para insertar el objeto multimedia.
Nota: Si pulsa Cancelar, en el documento aparece un marcador de posicin de objeto
multimedia pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad.
Utilice el inspector de propiedades para especificar un archivo de origen o para establecer las
dimensiones y otros parmetros y atributos de cada objeto. Puede editar los atributos de
accesibilidad de un objeto.

Insercin de pelculas Shockwave
Puede utilizar Dreamweaver para insertar pelculas Shockwave en los documentos. Adobe
Shockwave, el estndar para multimedia interactivo en la Web, es un formato comprimido
que permite la descarga rpida de los archivos multimedia creados en Macromedia
Directorde Adobe y su reproduccin en los navegadores de uso ms frecuente.
1 En la ventana de documento, coloque el punto de insercin en el lugar en el que desea
insertar una pelcula Shockwave y siga uno de estos procedimientos:
En la categora Comn de la barra Insertar, haga clic en el botn Media y seleccione el
icono Plugin del men desplegable.
Seleccione Insertar >Media >Shockwave.
seleccione un archivo de pelcula.
3 En el inspector de propiedades, introduzca el
ancho y el alto de la pelcula en los cuadros An y
Al.

by: magh 106
Adicin de vdeo (formatos distintos de Flash)
Puede aadir vdeo a su pgina Web de distintas formas y empleando diferentes formatos. El
vdeo puede descargarse al usuario o reproducirse en flujo (streaming) mientras se descarga.
1 Coloque el videoclip en la carpeta del sitio. Estos videoclips suelen tener el formato de
archivo AVI o MPEG.
2 Establezca un vnculo con el videoclip o incrstelo en la pgina.
Para establecer un vnculo con el videoclip, introduzca un texto para el vnculo, como
Descargar videoclip, seleccione el texto y haga clic en el icono de carpeta del inspector de
propiedades. Localice la ubicacin del archivo de vdeo y seleccinelo.
Nota: El usuario debe descargarse una aplicacin auxiliar (un plug-in) para ver los formatos
de flujo ms habituales, como por ejemplo Real Media, QuickTime o Windows Media.

I II II I. .2 22 2 P Pr re es se en nt t a ac ci i n n d de e c co on nt t e en ni i d do o e en n t t a ab bl l a as s
Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer
el diseo de texto y grficos en una pgina HTML. Una tabla consta de una o varias filas,
cada una de las cuales consta, a su vez, de una o ms celdas. Aunque las columnas no
suelen especificarse explcitamente en el cdigo HTML, Dreamweaver permite manipular
tanto columnas como filas y celdas.
Dreamweaver ofrece dos mtodos de visualizacin y manipulacin de tablas: el modo
estndar, en el que las tablas se presentan en forma de cuadrcula de filas y columnas, y el
modo de diseo, que permite dibujar, cambiar el tamao y mover cuadros en la pgina
mientras se siguen utilizando tablas para la estructura subyacente.
Dreamweaver muestra el ancho de la tabla y de cada columna cuando se selecciona una
tabla o cuando el punto de insercin est en ella. J unto a los anchos se encuentran flechas
para el men de encabezado de la tabla y los mens de encabezado de las columnas. Utilice
los mens para acceder rpidamente a comandos relacionados con tablas. Puede activar o
desactivar los anchos y los mens.
Si no ve el ancho de una columna o de una tabla, esta tabla o columna no tiene un ancho
especificado en el cdigo HTML. Si aparecen dos nmeros, el ancho visual que aparece en
la vista de diseo no coincide con el ancho especificado en el cdigo HTML. Esto puede
ocurrir al cambiar el tamao de una tabla arrastrando la esquina inferior derecha o al aadir
contenido a la celda cuyo ancho es superior al establecido.
Por ejemplo, si establece un ancho de columna en 200 pxeles y aade contenido que se
ajusta al ancho de 250 pxeles, se mostrarn dos nmeros para dicha columna: 200 (ancho
especificado en el cdigo) y (250) entre parntesis (ancho visual de la columna).

Prioridad de formato de tabla en HTML
A la hora de dar formato a tablas en la vista Diseo, puede definir propiedades que se
apliquen a toda la tabla o a filas, columnas o celdas seleccionadas de la misma. Al definir el
valor de una propiedad como, por ejemplo, el color de fondo o la alineacin, para toda la
by: magh 107
tabla y otro valor para celdas individuales, el formato de celda tiene prioridad sobre el formato
de fila, que a su vez tiene prioridad sobre el formato de tabla.
El orden de prioridad en el formato de tabla es el siguiente:
1 Celdas 2 Filas 3 Tabla
Por ejemplo, si establece un color de fondo azul para una sola celda y, a continuacin,
establece el color de fondo de toda la tabla como amarillo, la celda azul no cambiar a
amarillo, ya que el formato de celda tiene prioridad sobre el formato de tabla.
Nota: Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de
la etiqueta td correspondientes a cada celda de la columna.
Divisin y combinacin de celdas de tabla
Podr combinar cualquier nmero de celdas contiguas, siempre que toda la seleccin sea
una lnea o un rectngulo de celdas, para obtener una sola celda que se extienda a lo largo
de varias columnas o filas. Una celda puede dividirse en las filas o columnas que sea
necesario, aunque haya sido combinada anteriormente. Dreamweaver reestructura
automticamente la tabla (aadiendo los atributos colspan o rowspan que sean necesarios)
para crear el diseo especificado.
En el siguiente ejemplo, las celdas en la
mitad de las dos primeras filas se han
combinado en una nica celda que ocupa
dos filas.

Insercin de una tabla y adicin de contenido
Utilice la barra o el men Insertar para crear una tabla. A continuacin, aada texto e
imgenes a las celdas de una tabla tal como lo hara fuera de una tabla.
1 En la vista Diseo de la ventana de documento, site el punto de insercin donde desee
que aparezca la tabla.
Seleccione Insertar >Tabla.
En la categora Comn de la barra Insertar,
haga clic en Tabla
2 Establezca los atributos del cuadro de
dilogo Tabla y haga clic en Aceptar para
crear la tabla.
Filas Determina el nmero de filas de la tabla.
Columnas Determina el nmero de columnas
de la tabla.
Ancho de tabla Especifica el ancho de la
tabla en pxeles o como porcentaje del ancho
de la ventana del navegador.
Grosor del borde Especifica el ancho en
pxeles de los bordes de la tabla.

by: magh 108
Espacio entre celdas Determina el nmero de pxeles entre celdas de tabla contiguas.
Si no se especifican los valores de grosor del borde o espaciado y relleno de celda, la
mayora de los navegadores mostrar el grosor del borde y el relleno de celda configurado
en 1 y el del espaciado de celda configurado en 2. Para garantizar que los navegadores
muestran la tabla sin borde, relleno ni espaciado, establezca Relleno celda y Espacio celdas
con el valor 0.
Relleno de celda Especfica el nmero de pxeles entre el borde y el contenido de una celda.
Ninguno No permite encabezados de columna o de fila para la tabla.
Izquierda Convierte la primera columna de la tabla en una columna para encabezados. Esto
le permite introducir un encabezado para cada fila de la tabla.
Superior Convierte la primera fila de la tabla en una fila para encabezados, lo que le permite
introducir un encabezado para cada columna de la tabla.
Ambos Le permite introducir encabezados de columna y de fila en la tabla.
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.
Texto Proporciona un ttulo de tabla que aparece fuera de la misma.
Alinear texto Especifica el lugar en el que el texto de la tabla aparecer en relacin con la
tabla.
Resumen Ofrece una descripcin de la tabla. Los lectores de pantalla leen el texto del
resumen pero dicho texto no aparece en el navegador del usuario.

Importacin y exportacin de datos de tabla
Puede importar datos de tabla creados con otra aplicacin (por ejemplo, Microsoft Excel) y
guardados en un formato de texto delimitado (con elementos separados por tabuladores,
comas, dos puntos o puntos y comas) a Dreamweaver y aplicarles formato de tabla.
Tambin puede exportar los datos de tabla desde Dreamweaver a un archivo de texto, con el
contenido de las celdas contiguas separado por un delimitador. Se pueden utilizar comas,
dos puntos, puntos y comas o espacios como delimitadores. No se pueden exportar partes
de una tabla, por lo que es necesario exportar la tabla entera en todos los casos.
Si slo le interesan algunos datos de una tabla, copie las celdas que contienen dichos datos
y pguelas fuera de la tabla para crear una nueva tabla y despus exporte la nueva tabla.

Importacin de datos de tabla
Seleccione Archivo >Importar >Datos
de tabla.
Seleccione Insertar >Objetos de tabla
>Importar datos de tabla.
2 Especifique las opciones de los datos de tabla y haga clic en Aceptar.
by: magh 109
Archi vo de datos Nombre del archivo que desea importar. Haga clic en el botn Examinar
para seleccionar un archivo.
Delimitador Delimitador utilizado en el archivo que est importando.
Si selecciona Otro, aparecer un cuadro de texto a la derecha del men emergente.
Introduzca el delimitador utilizado en su archivo.
Nota: Especifique el delimitador utilizado cuando se guard el archivo de datos. De lo
contrario, el archivo no se importar correctamente y su datos no tendrn el formato correcto
Ancho de tabla Ancho de la tabla.
Seleccione Ajustar a los datos para que todas las columnas tengan el ancho suficiente para
contener la cadena de texto ms larga en la columna.
Seleccione Establecer para especificar un ancho fijo de la tabla en pxeles o como
porcentaje del ancho de la ventana del navegador.
Borde Especfica el ancho en pxeles de los bordes de la tabla.
Relleno de celda Determina el nmero de pxeles entre el contenido de una celda y los
lmites de la misma.
Espacio entre celdas Nmero de pxeles entre celdas de tabla contiguas.
Si no se especifican los valores de borde, espaciado y relleno de celda, la mayora de los
navegadores mostrar la tabla con bordes-relleno de celda en 1 y el espaciado de celda en 2
Formatear primera fila Determina el formato aplicado a la primera fila de la tabla, en caso
de que exista alguno. Seleccione una de las cuatro opciones de formato posibles: Sin
formato, Negrita, Cursiva o Negrita cursiva.

Exportacin de una tabla
1 Site el punto de insercin en cualquier celda de la tabla.
2 Seleccione Archivo >Exportar >Tabla.
3 Especifique las opciones siguientes:
Delimitador Especifica el carcter delimitador
que debe utilizarse para separar los elementos
en el archivo exportado.

Saltos de lnea Especifica el sistema
operativo en el que se abrir el archivo
exportado: Windows, Macintosh o UNIX.
4 Haga clic en Exportar.
5 Introduzca un nombre para el archivo y
haga clic en Guardar.

by: magh 110
Seleccin de elementos de una tabla
Puede seleccionar toda una tabla, fila o columna al mismo tiempo. Tambin puede
seleccionar una o varias celdas individuales.
Cuando se desplaza el puntero sobre una tabla, fila, columna o celda, Dreamweaver resalta
todas las celdas de esa seleccin para que sepa qu celdas se seleccionarn. Esto puede
resultar til si utiliza tablas sin bordes, celdas que ocupan varias columnas o filas, o bien
tablas anidadas. Puede cambiar el color de resaltado en las preferencias.
Si coloca el puntero encima del borde de una tabla, mantenga presionada la tecla Control y
toda la estructura de la tabla, es decir las celdas de la misma, quedarn resaltadas. Esto
puede resultar til si utiliza tablas anidadas y desea ver la estructura de una de las tablas.
Seleccin de una tabla entera
Siga uno de estos procedimientos:
Haga clic en la esquina superior izquierda de la tabla, en cualquier punto del borde derecho
o inferior de la tabla o en el borde de una fila o de una columna.
Nota: Cuando pueda seleccionar la tabla, el puntero se convertir en el icono de cuadrcula
de tabla (a menos que haga clic en el borde de una fila o columna).
Haga clic en una celda de la tabla y, a continuacin, seleccione la etiqueta <tabla>en el
selector de etiquetas situado en la esquina inferior izquierda de la ventana de documento.
Haga clic en una celda de la tabla y, a continuacin, seleccione Modificar > Tabla >
Seleccionar tabla.
Haga clic en una celda de la tabla, despus en el men del encabezado de tabla y, a
continuacin, seleccione Seleccionar tabla. Aparecern manejadores de seleccin en los
bordes inferior y derecho de la tabla
Seleccin de una o varias filas y columnas
1 Site el puntero en el borde izquierdo de una fila o en el borde superior de una columna.
2 Cuando el puntero se convierta en una flecha de seleccin, haga clic para seleccionar una
fila o columna, o arrastre para seleccionar varias filas o columnas.

Seleccin de una sola columna
1 Haga clic en la columna.
2 Haga clic en el men de encabezado de columna y seleccione Seleccionar columna

by: magh 111
Seleccin de una sola celda
Haga clic en la celda y, a continuacin, seleccione la etiqueta <td> en el selector de
etiquetas situado en la esquina inferior izquierda de la ventana de documento.
Presione la tecla Control y haga clic en la celda.
Haga clic en la celda y seleccione Edicin >Seleccionar todo.
Para seleccionar toda una tabla, vuelva a seleccionar Edicin > Seleccionar todo cuando una
celda est seleccionada.

Seleccin de una lnea o un bloque rectangular de celdas
Arrastre de una celda a otra.
Haga clic en una celda, presione Control y haga clic en la misma celda para seleccionarla y,
a continuacin, presione Mays y haga clic en otra celda.
Todas las celdas de la regin lineal o rectangular definida por las dos celdas quedarn
seleccionadas.

Establecimiento de las propiedades de una tabla
Puede utilizar el inspector de propiedades para editar tablas.
1 Seleccione una tabla.
2 En el inspector de propiedades
(Ventana >Propiedades), haga clic en la
flecha de ampliacin situada en la
esquina inferior derecha y cambie las
propiedades como estime oportuno.
Id de tabla Especifica un ID para la tabla.
Filas y Cols Nmero de filas y columnas que tendr la tabla.
An (Ancho) y Al (Alto) Especifica el ancho de la tabla en pxeles o como porcentaje del
ancho de la ventana del navegador.
Nota: Normalmente no es preciso especificar el alto de una tabla.
Borde Especifica el ancho en pxeles de los bordes de la tabla.
Si no se especifican los valores de borde o espaciado y relleno de celda, la mayora de los
navegadores mostrar la tabla con los bordes y el relleno de celda configurado en 1 y el
espaciado de celda configurado en 2. Para garantizar que los navegadores muestran la tabla
sin relleno ni espaciado, establezca Borde con el valor 0 y Relleno celda y Espacio celdas
by: magh 112
con el valor 0. Para ver los lmites de las celdas y la tabla cuando el borde es 0, seleccione
Ver > Ayudas visuales > Bordes de tabla.
Rell. celda Determina el nmero de pxeles entre el contenido de una celda y los lmites de
la misma.
Esp. celda Nmero de pxeles entre celdas de tabla contiguas.
Alinear Determina dnde aparecer la tabla en relacin con otros elementos del mismo
prrafo, como por ejemplo texto o imgenes.
Izquierda alinea la tabla a la izquierda de los dems elementos (por lo que el texto del mismo
prrafo se ajusta alrededor de la tabla a la derecha); Derecha alinea la tabla a la derecha de
los dems elementos (con el texto ajustado alrededor a la izquierda); y Centro centra la tabla
(con el texto encima y/o debajo de la tabla). Predeterminado indica que el navegador debe
utilizar su alineacin predeterminada. Si la alineacin est establecida como Predeterminado,
no se muestra otro contenido junto a la tabla. Para mostrar una tabla junto a otro contenido,
utilice la alineacin Izquierda o Derecha.
Borrar ancho de columna y Borrar alto de fila eliminan todos los valores especificados para
el ancho de columna y alto de fila de la tabla.
Convertir ancho de tabla a pxeles y Convertir altos de tabla a pxeles establecen el ancho
o el alto de todas las columnas de la tabla en su ancho actual en pxeles (tambin establecen
el ancho de toda la tabla en su ancho actual en pxeles).
Convertir ancho de tabla a porcentaje y Convertir altos de tabla a porcentaje establecen el
ancho o el alto de todas las columnas de la tabla en su ancho actual expresado como
porcentaje del ancho de la ventana de documento (tambin establecen el ancho de toda la
tabla en su ancho actual como porcentaje del ancho de la ventana de documento).
Color de fondo Color de fondo de la tabla.
Color de borde Color de los bordes de la tabla.
Im. fondo Imagen de fondo de la tabla.
Si ha introducido un valor en un cuadro de texto, presione el tabulador o la tecla Intro para
aplicar el valor.

Configuracin de las propiedades de celdas, filas o columnas
Puede utilizar el inspector de etiquetas para editar celdas y filas de una tabla.
1 Seleccione la columna o fila.
2 En el inspector de propiedades (Ventana > Propiedades), establezca las siguientes
opciones:

by: magh 113
Horiz Especfica la alineacin horizontal del contenido de una celda, fila o columna. Puede
alinear el contenido a la izquierda, a la derecha o al centro de la celda, o bien especificar que
se utilice la alineacin predeterminada del navegador (generalmente a la izquierda para
celdas normales y al centro para celdas de encabezado).
Vert Especifica la alineacin vertical del contenido de una celda, fila o columna. Puede
alinear el contenido con la parte superior, media, inferior o con la lnea de base de la celda, o
especificar que se utilice la alineacin predeterminada del navegador (generalmente al
medio).
An (Ancho) y Al (Alto) Ancho y alto de las celdas seleccionadas en pxeles o
comoporcentaje del ancho o alto total de la tabla.
Para especificar un porcentaje, introduzca el smbolo de porcentaje (%) tras el valor. Para
que el navegador determine el ancho o alto apropiado en funcin del contenido de la celda, y
el ancho y alto del resto de las columnas y filas, deje el campo en blanco (el valor
predeterminado).
De forma predeterminada, un navegador selecciona el alto de fila y el ancho de columna de
manera que pueda contener la imagen ms ancha o la lnea ms larga en una columna. Por
esta razn, algunas veces el ancho de una columna resulta mucho ms grande que el de
otras columnas de la tabla cuando se le aade contenido.
Nota: Puede especificar el alto como porcentaje del alto total de la tabla, aunque quizs la
fila no se muestre en los navegadores con el porcentaje de alto especificado.
Fnd (campo de texto superior) Nombre de archivo de la imagen de fondo de una celda,
columna o fila. Haga clic en el icono de carpeta para seleccionar una imagen, o utilice el
icono de sealizacin de archivo para seleccionar un archivo de imagen.
Fnd (muestra de color y campo de texto inferiores) Color de fondo de una celda, columna o
fila seleccionado con el selector de color.
Borde Color del borde de las celdas.
Combinar celdas Combina las celdas, filas o columnas seleccionadas para crear una sola
celda. Slo pueden combinarse celdas que constituyan una bloque rectangular o lineal.
Dividir celda Divide una celda para crear dos o ms celdas. Slo puede dividirse una celda
cada vez, por lo que este botn estar desactivado al seleccionar ms de una celda.
No aj. Impide el ajuste de lnea, mantenindose todo el texto de una celda en una sola lnea.
Cuando la opcin No aj. Est activada, las celdas se adaptarn para incluir todos los datos a
medida que se introducen o pegan en una celda.
(Habitualmente, las celdas se expanden horizontalmente para incluir la palabra ms larga o
la imagen ms grande en la celda y, a continuacin, se expanden verticalmente cuando es
necesario adaptarse a otros contenidos.)
Encabezado Aplica a la celda seleccionada el formato de celdas de encabezado de tabla.
De forma predeterminada, el contenido de las celdas de encabezado de la tabla aparecer
en negrita y centrado.
El alto y el ancho pueden especificarse en pxeles o porcentajes y puede convertirse de una
unidad a otra.
by: magh 114
la etiqueta td correspondientes a cada celda de la columna. Sin embargo, al establecer
algunas de las propiedades de una fila, Dreamweaver modifica los atributos de la etiqueta tr
en lugar de los atributos de cada etiqueta td de la fila. Al aplicar el mismo formato a todas las
celdas de una fila mediante la etiqueta tr se obtiene un cdigo HTML ms claro y conciso.
3 Presione el tabulador o la tecla Intro para aplicar el valor.

Aplicacin de formato a tablas y celdas
Puede cambiar el aspecto de una tabla configurando las propiedades de la misma y de sus
celdas o aplicndole un diseo predefinido. Antes de definir las propiedades de la tabla y de
las celdas, tenga en cuenta el orden de prioridad para la aplicacin de formato es ste:
celdas, filas y tablas.
Para aplicar formato al texto de una celda de tabla, utilice los mismos procedimientos que
utilizara para aplicar formato al texto fuera de una tabla.
Cambio del formato de una tabla, fila, celda o columna
1 Seleccione una tabla, celda, fila o columna.
2 En el inspector de propiedades (Ventana > Propiedades), haga clic en la flecha de
ampliacin situada en la esquina inferior derecha y cambie las propiedades como estime
oportuno.
3 Cambie las propiedades segn convenga.
Para ms informacin sobre las opciones, haga clic en el icono Ayuda del inspector de
propiedades.
la etiqueta td correspondientes a cada celda de la columna. Sin embargo, al establecer
algunas de las propiedades de una fila, Dreamweaver modifica los atributos de la etiqueta tr
en lugar de los atributos de cada etiqueta td de la fila. Al aplicar el mismo formato a todas las
celdas de una fila mediante la etiqueta tr se obtiene un cdigo HTML ms claro y conciso.

Cambio del tamao de tablas, columnas y filas
Cambio del tamao de una tabla
Seleccione la tabla.
Para cambiar el tamao horizontal de la tabla, arrastre el manejador de seleccin de la
derecha.
Para cambiar el tamao vertical de la tabla, arrastre el manejador de seleccin de la parte
inferior.
Para cambiar ambos, arrastre el manejador de seleccin de la esquina inferior derecha.
Cambio del ancho de una columna y mantenimiento del ancho general de la tabla
Arrastre el borde derecho de la columna que desee cambiar.

by: magh 115
El ancho de la columna contigua tambin vara; en
consecuencia, cambia el tamao de las dos columnas.
Se mostrar cmo se ajustan las columnas, pero el
ancho general de la tabla no variar.
Nota: En las tablas con ancho basados en porcentajes
(no pxeles), si arrastra el borde derecho de la columna
que se encuentra ms a la derecha, variar todo el
ancho de la tabla y las columnas se harn ms anchas
o estrechas proporcionalmente.

Cambio del ancho de una columna y mantenimiento del tamao de las dems
Mantenga pulsada la tecla Mays mientras
arrastra el borde de la columna.
Cambiar el ancho de una columna. Las ayudas
visuales le mostrarn cmo se ajustan las columnas.
El ancho total de la tabla cambia para dar cabida a la
columna que ha cambiado de tamao.

Cambio del alto de una fila visualmente
Arrastre el borde inferior de la fila.
Igualacin de los anchos de columna del cdigo con los anchos de columna visuales
1 Haga clic en una celda.
2 Haga clic en el men del encabezado de tabla y, a
continuacin, seleccione Igualar todos los anchos.
Dreamweaver restablece el ancho especificado en el
cdigo para que coincida con el ancho visual.

Eliminacin de los anchos y altos especificados de una tabla
1 Seleccione la tabla.
Seleccione Modificar >Tabla >Borrar ancho de celda o Modificar >Tabla >Borrar alto de
celda.
En el inspector de propiedades (Ventana >Propiedades), haga clic en el botn Borrar alto
de fila o en el botn Borrar ancho de columna .
Haga clic en el men del encabezado de tabla y, a
continuacin, seleccione Borrar todos los altos o
Borrar todos los anchos.

by: magh 116
Eliminacin del ancho establecido de una columna
Haga clic en la columna, haga clic en el men del encabezado de columna y seleccione
Borrar ancho de columna.

Activacin o desactivacin de los anchos y los mens de tablas y columnas
1 Seleccione Ver >Ayudas visuales >Anchos de tabla.
2 Haga clic con el botn derecho del ratn en la tabla, y seleccione Tabla >Anchos de tabla.

Adicin y eliminacin de filas y columnas
Para aadir o eliminar filas y columnas, utilice Modificar >Tabla o el men de encabezado de
columna. Si presiona la tecla Tab en la ltima celda de una tabla se aadir automticamente
otra fila a la tabla.

Adicin de una sola fila o columna
Haga clic en una celda y siga uno de estos procedimientos:
Seleccione Modificar >Tabla >Insertar fila o bien Modificar >Tabla >Insertar columna.
Aparecer una fila encima del punto de insercin o una columna a la izquierda del punto de
insercin.
Haga clic en el men del encabezado de columna
y, a continuacin, seleccione Insertar columna
izquierda o Insertar columna derecha.

Adicin de varias filas o columnas
1 Haga clic en una celda.
2 Seleccione Modificar >Tabla >Insertar filas
o columnas, complete el cuadro de dilogo y
haga clic en Aceptar.
Insertar Indica si deben insertarse filas o
columnas.
Nmero de filas o Nmero de columnas El nmero de filas o columnas que deben
insertarse.
Dnde Especifica si las nuevas filas o columnas deben aparecer antes o despus de la fila o
columna de la celda seleccionada.

Eliminacin de una fila o columna
by: magh 117
Haga clic en una celda dentro de la fila o de la columna que desea eliminar y, a
continuacin, seleccione Modificar >Tabla
>Eliminar fila o Modificar >Tabla >Eliminar columna.
Seleccione una fila o columna completa y, a continuacin, seleccione Edicin >Borrar o
presione Supr.

Adicin o eliminacin de filas o columnas utilizando el inspector de propiedades
1 Seleccione la tabla.
2 En el inspector de propiedades
(Ventana > Propiedades), siga uno de
estos procedimientos:
Para aadir o eliminar filas, aumente o reduzca el valor de Filas.
Para aadir o eliminar columnas, aumente o reduzca el valor de Cols.
Nota: Dreamweaver no advertir de que las filas o las columnas que desea eliminar
contienen datos.

Divisin y combinacin de celdas
Utilice el inspector de propiedades o los comandos del submen Modificar >Tabla para
dividir o combinar celdas.
Como alternativa a la divisin y combinacin de celdas, Dreamweaver incluye tambin
herramientas que permiten aumentar o disminuir el nmero de filas o columnas que ocupa
una celda.
Combinacin de dos o ms celdas en una tabla
1 Seleccione las celdas en una lnea contigua y en forma
de un rectngulo.
En la siguiente ilustracin, la seleccin es un rectngulo de
celdas, por lo que stas se pueden combinar.
Seleccione Modificar >Tabla >Combinar celdas.
En el inspector de propiedades ampliado (Ventana >
Propiedades), haga clic en Combinar celdas.
Nota: Si no se muestra el men, haga clic en la flecha de la esquina inferior derecha del
inspector de propiedades para ver todas las opciones.
El contenido de las celdas individuales se sita en la celda combinada resultante. Las
propiedades de la primera celda seleccionada se aplicarn a la celda combinada.

by: magh 118
Divisin de una celda
1 Haga clic en la celda y siga uno de estos procedimientos:
Seleccione Modificar >Tabla >Dividir celda.
En el inspector de propiedades ampliado (Ventana >
Propiedades), haga clic en Dividir celda.
Nota: Si no se muestra el men, haga clic en la flecha de la esquina inferior derecha del
inspector de propiedades para ver todas las opciones.
2 En el cuadro de dilogo Dividir celda,
especifique cmo desea dividir la celda:
Dividir celda en Especifica si la celda debe
dividirse en filas o en columnas.
Nmero de filas/Nmero de columnas
Especifica el nmero de filas o de columnas
en que debe dividirse la celda.

Aumento o disminucin del nmero de filas o columnas que ocupa una celda
Seleccione Modificar > Tabla > Aumentar tamao de fila, o bien Modificar > Tabla >
Aumentar tamao de columna.
Seleccione Modificar >Tabla >Reducir tamao de fila, o bien Modificar >Tabla >Reducir
tamao de columna.

Copia, pegado y eliminacin de celdas
Puede copiar, pegar o eliminar una o varias celdas de una tabla al mismo tiempo,
conservando el formato de las celdas.
Las celdas se pueden pegar en el punto de insercin o en el lugar de una seleccin en una
tabla existente. Para pegar varias celdas de una tabla, el contenido del Portapapeles debe
ser compatible con la estructura de la tabla o la seleccin de la tabla en la que se van a
pegar las celdas.
Corte o copia de celdas de una tabla
1 Seleccione una o varias celdas en una lnea contigua y en forma de un rectngulo.
En la siguiente ilustracin, la seleccin es un rectngulo de celdas, por lo que stas se
pueden cortar o copiar.

by: magh 119
I II II I. .2 23 3 E Es st t a ab bl l e ec ci i m mi i e en nt t o o d de e v v n nc cu ul l o os s y y n na av ve eg ga ac ci i n n
Tras configurar un sitio, puede vincular las pginas entre s. Puede crear vnculos HTML,
mens de salto, barras de navegacin y mapas de imagen.
Acerca de los vnculos
Una vez que haya creado pginas HTML y haya configurado un sitio de Dreamweaver para
almacenar los documentos, deber establecer conexiones entre sus documentos y otros
documentos.
Dreamweaver ofrece varios mtodos para crear vnculos con documentos, imgenes,
archivos multimedia o software transferible. Puede establecer vnculos con cualquier texto o
imagen de cualquier lugar del documento, incluidos el texto y las imgenes situados en un
encabezado, lista, tabla, elemento con posicin absoluta o marco.
Los vnculos se pueden crear y administrar de varias formas distintas. Algunos diseadores
de sitios Web prefieren crear vnculos con pginas o archivos que todava no existen cuando
estn trabajando, mientras que otros prefieren crear primero todos los archivos y las pginas
y aadir los vnculos ms tarde. Otra forma de administrar vnculos consiste en crear pginas
marcadoras de posicin en las que aadir y comprobar los vnculos antes de completar todas
las pginas del sitio.
Ubicacin y rutas de documentos
A la hora de crear vnculos resulta fundamental conocer la ruta de archivo entre el
documento desde el que establece el vnculo y el documento con el que lo establece.
Cada pgina Web tiene una direccin exclusiva, denominada URL (Localizador Uniforme de
Recursos, Uniform Resource Locator). Sin embargo, cuando se crea un vnculo local (un
vnculo de un documento con otro documento del mismo sitio), no suele ser necesario
especificar el URL completo del documento de destino. En este caso se especifica una ruta
relativa desde el documento actual o desde la carpeta raz del sitio.
Existen tres tipos de rutas de vnculos:
Rutas absolutas (como http://www.adobe.com/support/dreamweaver/contents.html).
Rutas relativas al documento (como dreamweaver/contents.html).
Rutas relativas a la raz del sitio (como /support/dreamweaver/contents.html).
Rutas absolutas
Las rutas absolutas proporcionan el URL completo del documento vinculado, incluido el
protocolo que se debe usar (generalmente, http:// para pginas Web), por ejemplo,
http://www.adobe.com/support/dreamweaver/contents.html.
Para vincular un documento situado en otro servidor, es preciso emplear una ruta absoluta.
Tambin puede utilizar rutas absolutas para vnculos locales (con documentos del mismo
sitio), pero se desaconseja utilizar este sistema, ya que, si mueve el sitio a otro dominio, se
rompern todos los vnculos de las rutas absolutas locales. El uso de rutas relativas para
vnculos locales tambin ofrece una mayor flexibilidad si necesita mover archivos dentro del
sitio.
Nota: Al insertar imgenes (no vnculos), puede utilizar una ruta absoluta a una imagen que
se encuentra en un servidor remoto (es decir, que no est disponible en la unidad de disco
duro local).
by: magh 120
Rutas relativas al documento
Las rutas relativas al documento suelen ser las ms adecuadas para vnculos locales en la
mayora de los sitios Web. Resultan particularmente tiles cuando el documento actual y el
documento con el que se establece el vnculo se encuentran en la misma carpeta y es
probable que vayan a permanecer juntos. Tambin puede utilizar una ruta relativa al
documento para establecer un vnculo con un documento de otra carpeta, pero especificando
la ruta a travs de la jerarqua de carpetas desde el documento actual hasta el vinculado.
En una ruta relativa al documento se omite la parte de la ruta absoluta que coincide en los
documentos actual y vinculado y se indica nicamente la parte de la ruta que difiere.
Por ejemplo, supongamos que tiene un sitio con la siguiente estructura:
Para establecer un vnculo desde contents.html hasta hours.html
(ambos situados en la misma carpeta), utilice la ruta relativa
hours.html.
Para establecer un vnculo con tips.html (en la subcarpeta
resources), utilice la ruta relativa resources/tips.html. Con cada
barra diagonal (/), bajar un nivel en la jerarqua de carpetas.
Para establecer un vnculo con index.html (en la carpeta padre, un
nivel por encima de contents.html), utilice la ruta relativa
../index.html. Con cada barra diagonal (../), subir un nivel en la
jerarqua de carpetas.
Para establecer un vnculo con catalog.html (en una subcarpeta
distinta de la carpeta padre), utilice la ruta relativa
../products/catalog.html. Aqu, ../ sube a la carpeta padre, mientras
que products/ baja a la subcarpeta products.
No es necesario actualizar las rutas relativas al documento entre
archivos que se mueven como un grupo (por ejemplo, al mover una
carpeta completa, de forma que todos los archivos de esa carpeta
conserven las mismas rutas relativas entre s).
Sin embargo, cuando se mueve un archivo individual que contiene vnculos relativos al
documento o un archivo individual que es el destino de un archivo relativo al documento, no
necesitar actualizar esos vnculos. (Si mueve o cambia el nombre de los archivos utilizando
el panel Archivos, Dreamweaver actualizar automticamente todos los vnculos relevantes.)

Vinculacin de archivos y documentos
Antes de crear un vnculo, deber saber cmo funcionan las rutas absolutas, las relativas al
documento y las relativas a la raz del sitio. Puede crear varios tipos de vnculos en un
documento:
Un vnculo con otro documento o archivo, como un archivo grfico, de pelcula, PDF o de
sonido.
Un vnculo de anclaje con nombre, que salta a un emplazamiento especfico dentro de un
documento.
by: magh 121
Un vnculo de correo electrnico, que crea un mensaje de correo electrnico en blanco con
la direccin del destinatario ya rellenada.
Vnculos nulos y de script, que permiten adjuntar comportamientos a un objeto o crear un
vnculo que ejecuta cdigo J avaScript.
Puede utilizar el inspector de propiedades y el icono de sealizacin de archivos para crear
vnculos desde una imagen, un objeto o texto hasta otro documento o archivo.
Dreamweaver crea los vnculos con otras pginas del sitio empleando rutas relativas a
documentos. Tambin puede indicar a Dreamweaver que cree vnculos nuevos utilizando
rutas relativas a la raz del sitio.

Establecimiento de vnculos con documentos mediante el inspector de propiedades
Puede utilizar el icono de carpeta o el cuadro Vnculo del inspector de propiedades para
crear vnculos desde una imagen, un objeto o texto hasta otro documento o archivo.
1 Seleccione texto o una imagen en la vista Diseo de la ventana de documento.
2 Abra el inspector de propiedades (Ventana >
Propiedades) y siga uno de estos procedimientos:
Haga clic en el icono de carpeta situado a la derecha
del cuadro Vnculo para localizar y seleccionar un
archivo.
La ruta del documento vinculado aparecer en
el cuadro URL. Utilice el men emergente
Relativa a del cuadro de dilogo Seleccionar
archivo HTML para indicar si la ruta es relativa
al documento o a la raz del sitio y, a
continuacin, haga clic en Seleccionar. El tipo
de ruta que seleccione slo afectar al vnculo
actual. (Puede cambiar la configuracin
predeterminada del cuadro Relativa a para el
sitio.)
Escriba la ruta y el nombre de archivo del
documento en el cuadro Vnculo.

Para establecer un vnculo con un
documento del sitio, introduzca una ruta
relativa al documento o relativa a la raz del
sitio. Para establecer un vnculo con un
documento externo al sitio, introduzca una
ruta absoluta que incluya el protocolo (por
ejemplo, http://). Puede utilizar este mtodo
para introducir un vnculo para un archivo
que an no se ha creado.
by: magh 122
3 En el men emergente Dest., seleccione una ubicacin para abrir el documento:
_blank carga el documento vinculado en una nueva ventana sin nombre del navegador.
_parent carga el documento vinculado en el marco padre o en la ventana padre del marco
que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el documento
vinculado se cargar en la ventana completa del navegador.
_self carga el documento vinculado en el mismo marco o la misma ventana que el vnculo.
Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo.
_top carga el documento vinculado en la ventana completa del navegador, eliminando de
esta forma todos los marcos.
Si va a establecer todos los vnculos de la pgina al mismo destino, puede especificar este
destino una vez seleccionando Insertar > HTML > Etiquetas Head > Base y seleccionando la
informacin de destino.

Adicin de un vnculo mediante el comando Hipervnculo
El comando Hipervnculo permite crear un vnculo de texto hasta una imagen, un objeto u
otro documento o archivo.
1 Site el punto de insercin en el documento donde desea que aparezca el vnculo.
2 Siga uno de estos procedimientos para mostrar el cuadro de dilogo Insertar hipervnculo:
Seleccione Insertar >Hipervnculo.
En la categora Comn de la barra Insertar, haga clic en el botn Hipervnculo
3 Introduzca el texto del vnculo y, tras el
vnculo, el nombre del archivo de destino
del vnculo (o haga clic en el icono de
carpeta para localizar y seleccionar el
archivo).
4 En el men emergente Destino,
seleccione la ventana en la que deber
abrirse el archivo o escriba su nombre.

En la lista emergente figuran los nombres de todos los marcos a los que ha asignado
nombres en el documento actual. Si especifica un marco que no existe, la pgina vinculada
se abrir en una ventana nueva con el nombre que haya especificado.
Tambin puede seleccionar estos nombres de destino reservados:
_blank carga el archivo vinculado en una ventana de navegador nueva y sin nombre.
_parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana del
marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el
archivo vinculado se cargar en la ventana completa del navegador.
_self carga el archivo vinculado en el mismo marco o ventana que el vnculo. Este destino
es el predeterminado, por lo que normalmente no es preciso especificarlo.
by: magh 123
_top carga el archivo vinculado en la ventana completa del navegador, quitando as todos
los marcos.
5 En el cuadro ndice de fichas, introduzca un nmero para el orden de fichas.
6 En el cuadro Ttulo, escriba un ttulo de pgina para el vnculo.
7 En el cuadro Clave de acceso, introduzca un equivalente de teclado (una letra) para
seleccionar el vnculo en el navegador.
8 Por ltimo haga clic en Aceptar.

Establecimiento de vnculos con una parte especfica de un documento
Puede utilizar el inspector de propiedades para establecer un vnculo con una determinada
seccin de un documento creando en primer lugar anclajes con nombre. Los anclajes con
nombre permiten establecer marcadores en un documento, que a menudo se colocan en un
tema especfico o en la parte superior del documento. Despus podr crear vnculos con
esos anclajes con nombre que llevarn rpidamente al visitante a la posicin especificada.
Para crear un vnculo con un anclaje con nombre, siga este procedimiento de dos pasos. En
primer lugar, cree un anclaje con nombre. A continuacin, cree un vnculo con dicho anclaje.
Nota: No puede colocar un anclaje con nombre en un elemento con posicin absoluta.
Creacin de un anclaje con nombre
1 En la vista Diseo de la ventana de documento, coloque el anclaje en el lugar donde desea
insertar el anclaje con nombre.
Seleccione Insertar >Anclaje con nombre.
Presione Control+Alt+A.
En la categora Comn de la barra Insertar, haga clic en el botn Anclaje con nombre.
3 En el cuadro Nombre de anclaje, escriba un nombre para el anclaje y haga clic en Aceptar.
(El nombre del anclaje no puede contener espacios).
El marcador del anclaje aparecer en el punto de insercin.
Nota: Si no aparece el marcador del anclaje Ver > Ayudas visuales > Elementos invisibles.

Establecimiento de un vnculo con un ancl aje con nombre
1 En la vista Diseo de la ventana de documento, seleccione texto o una imagen para crear
un vnculo a partir de ellos.
2 En el cuadro Vnculo del inspector de propiedades, introduzca un signo de nmero (#) y el
nombre del anclaje. Por ejemplo, para establecer un vnculo con un anclaje denominado top
en el archivo actual, escriba #top. Para establecer un vnculo con un anclaje denominado
"superior" en un archivo distinto de la misma carpeta, escriba
nombrearchi vo.html#superior
Nota: Los nombres de anclaje distinguen entre maysculas y minsculas.
by: magh 124
Establecimiento de un vnculo con un anclaje con nombre mediante el mtodo de
sealizacin de archivo
1 Abra el documento que contiene el anclaje con nombre.
Nota: Si no ve el anclaje, seleccione Ver > Ayudas visuales > Elementos invisibles para
poder verlo.
2 En la vista Diseo de la ventana de documento, seleccione texto o una imagen para crear
un vnculo a partir de ellos. (Si es otro documento abierto, deber cambiar a l.)
Haga clic en el icono de sealizacin de archivos (icono de mira telescpica) situado a la
derecha del cuadro de texto Vnculo del inspector de propiedades y arrstrelo hasta el
anclaje con el que desea establecer el vnculo: un anclaje en el mismo documento o un
anclaje en otro documento abierto.
En la ventana de documento, presione la tecla Mays mientras arrastra el texto o la imagen
seleccionada hasta el anclaje con el que desea establecer el vnculo: un anclaje en el mismo
documento o un anclaje en otro documento abierto.

Creacin de un vnculo de correo electrnico
Cuando el usuario hace clic en un vnculo de correo electrnico se abre una nueva ventana
de mensaje en blanco (utilizando el programa de correo asociado al navegador del usuario).
En la ventana de mensaje de correo electrnico, el cuadro Para se actualiza
automticamente con la direccin especificada en el vnculo del mensaje de correo
electrnico.

Insertar vnculo de correo electrnico
1 En la vista Diseo de la ventana de documento, coloque el punto de insercin donde desea
que aparezca el vnculo de correo electrnico o seleccione el texto o la imagen que desea
que aparezca como vnculo de correo electrnico.
2 Siga uno de estos procedimientos para insertar el vnculo:
Seleccione Insertar >Vnculo de correo electrnico.
En la categora Comn de la barra Insertar, haga clic en el botn
Vnculo de correo electrnico.
3 En el cuadro Texto, escriba o edite el
texto del correo electrnico.
4 En el cuadro Correo electrnico,
escriba la direccin de correo electrnico
y haga clic en Aceptar.

by: magh 125
Creacin de un vnculo de correo electrnico mediante el inspector de propiedades
1 Seleccione texto o una imagen en la vista Diseo de la ventana de documento.
2 En el cuadro Vnculo del inspector de
propiedades, escriba mailto: seguido de
una direccin de correo electrnico.
No escriba ESPACIOS entre los dos puntos y la direccin de correo electrnico.

I II II I. .2 24 4 O Ob bt t e en nc ci i n n d de e v vi i s st t a a p pr re ev vi i a a d de e p p g gi i n na as s
La vista Diseo de le da una idea de cul ser el aspecto de la pgina en laWeb, pero no
muestra las pginas exactamente como lo hacen los navegadores. La funcin Vista previa en
el navegador le permite ver el aspecto de las pginas en navegadores concretos conforme
vaya creando el diseo.
Vista previa en un navegador
Siempre que lo desee, puede obtener la vista previa de una pgina en un navegador; no es
necesario cargarla primero en un servidor Web. Al obtener una vista previa de una pgina,
debern funcionar todas las funciones relacionadas con el navegador, como los
comportamientos J avaScript, los vnculos absolutos y relativos al documento, los controles
ActiveXy los plug-ins de Netscape Navigator, siempre que haya instalado los plug-ins o los
controles ActiveX necesarios en los navegadores.
Antes de obtener una vista previa de un documento, gurdelo; si no lo hace, el navegador no
mostrar los cambios ms recientes.
1 Siga uno de estos procedimientos para obtener una vista previa de la pgina:
Seleccione Archivo >Vista previa en el navegador y
elija uno de los navegadores que aparecen en la lista o
haga clic en el botn Vista previa de la barra de
Herramientas y de la lista desplegable elija el Navegador
que prefiera.
Nota: Si no aparece ningn navegador en la lista, seleccione Edicin > Preferencias, y, a
continuacin, seleccione la categora Vista previa en el navegador a la izquierda para
seleccionar un navegador.
Presione F12 para mostrar el documento actual en el navegador principal.
Presione Control+F12 para mostrar el documento actual en el navegador secundario.
2 Haga clic en los vnculos y el contenido de prueba de la pgina.
Si utiliza Internet Explorer en un equipo con Windows XP y Service Pack 2 instalado, es
posible que el navegador muestre un mensaje para informar sobre la restriccin de
visualizacin del contenido activo. Para solucionar este problema puede incluir cdigo Mark
of the Web en el archivo.
3 Cierre la pgina del navegador al finalizar la prueba.

Administracin y hospedaje del sitio web .
by: magh 126
I IV V. . A Ad dm mi i n ni i s st t r ra ac ci i n n y y h ho os sp pe ed da aj j e e d de el l s si i t t i i o o w we eb b

I IV V. .1 1 C C m mo o e el l e eg gi i r r u un n a al l o oj j a am mi i e en nt t o o
Para publicar una pgina en Internet debemos colocarla en un servidor. Los servidores son
ordenadores conectados permanentemente a la Red que envan las pginas cuando los
exploradores la piden.
Antes de nada vamos a diferenciar entre dos formas de alojar una web, en un servidor
gratuito o en un servidor de pago. Los servidores de pago suelen tener mayores prestaciones
y recursos disponibles que los gratuitos. En este manual vamos a tratar de orientar a las
personas que tienen que contratar un servicio de pago, ms indicado para negocios y
pginas que pretendamos que sean populares.

Definir los recursos
Para encontrar un alojamiento para nuestra pgina primero nos tenemos que plantear los
objetivos que queremos cumplir y los recursos que necesitaremos. Segn sea el proyecto
que vamos a publicar necesitaremos ms o menos personalidad propia o determinados
recursos como acceso a bases de datos, estadsticas, etc.
El primer paso podra ser decidir si vamos a necesitar un dominio propio para nuestro
proyecto. Un dominio propio le dar ms personalidad al sitio, se asociar mejor con el
nombre de la empresa, a la vez que se hace ms accesible la pgina. Con el reducido precio
que tienen actualmente los dominios sera muy indicado adquirir uno para nuestra pgina. En
muchos casos al contratar un espacio para alojar la web nos va a ofrecer directamente
nuestro propio dominio, si no es as, lo podemos solicitar expresamente.
Lo ms habitual es que en el proveedor donde alojemos la pgina se encargue tambin del
registro del dominio, sin prcticamente otro coste adicional que las tasas del NIC, 30$
aproximadamente.
Aparte del dominio existen otros recursos podemos necesitar, como: Programacin en
lenguajes especficos, acceso a bases de datos, administracin de las DNS
Deberemos definir los recursos a utilizar y buscar un proveedor que los acepte todos. Si
ests proyectando una pgina sencilla, probablemente no te preocupar el nmero de
recursos avanzados que posea tu servidor, pero siempre ser interesante evaluar otros
recursos ms bsicos como: El nmero de direcciones de correo que te van a proporcionar,
estadsticas, los CGIs que tenga instalados, como contadores, envo de formularios por
correo electrnico, etc.

Velocidad
Es una pena que no exista un mtodo realmente fiable para controlar uno de los aspectos
que ms preocupa a todos los que buscamos un alojamiento. Para conocer la calidad el
servicio que nos va a ofrecer el proveedor deberamos preguntarles a ellos sobre sus lneas y
la capacidad que tienen de transferencia con Internet. Pero no solo eso sino tambin
preguntarles por la saturacin que tienen sus lneas. Pueden ser muy potentes pero estar
super-utilizadas. Como los proveedores no van a revelar estos detalles tal como a nosotros
by: magh 127
nos gustara, lo ms probable es que solo nos quede la posibilidad de probar la velocidad por
la prctica. Si navegamos por el sitio de la empresa que estamos evaluando y comprobamos
la cantidad de informacin (Kb) que recibimos por segundo podremos saber cmo va de
rpido la pgina.
Otro factor que tambin condiciona la velocidad es la cercana del servidor. Ten en cuenta
que si ests en Mxico, un servidor situado en tu pas ser ms rpido para ti, en la misma
condicin de lneas, que uno que est en Espaa o Argentina. Cuanto ms lejos tenga que
viajar la informacin, tarda ms. Pero un detalle, si un usuario de Colombia visita una pgina
que est en un servidor espaol, para l tu servidor ser ms lento que uno de su pas.

Transferencia
Otro aspecto que tenemos que evaluar a la hora de contratar un espacio para nuestra web es
la cantidad de megas de transferencia mensual que el proveedor permite realizar desde
nuestro dominio hacia fuera. Es decir, las pginas web que manda el servidor tienen un peso
en Kbytes y el proveedor los va contando, cuando pasamos el lmite que le han asignando al
dominio nos cobran el exceso segn un precio.
As pues, a la hora de contratar un dominio merece la pena enterarse sobre este aspecto y
evaluar tambin las condiciones que nos ofrecen. Si encontramos un servidor que ofrece
transferencia ilimitada no nos tiene que decir tampoco mucho de l, el control de la
transferencia les permite ajustar su servicio a unos niveles de calidad superiores. Adems,
en la mayora de los casos no nos tendr que preocupar el superar las tasas de transferencia
pues las megas que transfiere una web normal nunca superar los niveles propuestos, a no
ser que se trate de un portal o una pgina muy visitada.

Precio
El ltimo factor a considerar, y el ms fcil de comparar, es el precio. Lo importante es
comparar la calidad del servicio y el precio del mismo. Seguro que podrs realizar esta
comparacin sabiendo los datos que has de evaluar.

I IV V. .2 2 E El l e eg gi i r r a al l o oj j a am mi i e en nt t o o g gr ra at t u ui i t t o o
Publicar una pgina web es el objetivo de la mayora de las personas que visitan
desarrolloweb.com. Para conseguirlo lo ms imprescindible es tener un servidor donde
colocarlas, accesible desde Internet, aparte de construir las propias pginas.
Dependiendo de cul sean nuestras intenciones y deseos para el futuro de nuestra pgina
deberemos elegir un proveedor gratuito o uno de pago, Ser recomendable optar por uno de
pago, en un proveedor seleccionado, si tratamos de hacer una web de una empresa o una
que pretenda ser muy visitada, una web que ofrezca unos servicios y prestaciones ms
elevados tanto al administrador como a los visitantes.
Si por el contrario, deseamos publicar un trabajo con menores prestaciones, o simplemente
no queremos gastar dinero en el hosting, ser indicado optar por un servicio de alojamiento
gratuito. Por suerte, existe una gran variedad de sitios que ofrecen a sus visitantes la
oportunidad de publicar sus pginas personales o de empresa de manera gratuita y muchas
de estas opciones tienen muy buena calidad.
by: magh 128
Donde elegir un espacio
En un principio, el mejor espacio para publicar una web que podemos elegir puede ser el
proporcionado por nuestro proveedor de acceso a Internet. Muchas veces nuestro proveedor,
a la vez que ofrece la conexin a Internet, tambin ofrece un espacio para publicar, por el
mismo precio que el acceso. Esta opcin tiene sus ventajas:
Suelen estar libres de publicidad
En muchos casos, existen menos limitaciones por el tipo de contenidos
Casi siempre tienen buena velocidad.
El nico inconveniente a destacar (aparte de los problemas puntuales que tenga cada
proveedor de acceso) es que abandonemos algn da el proveedor y nos retiren las pginas
publicadas, pero esto se puede evitar teniendo un servicio de redireccin que nos d una
URL (direccin de web) para toda la vida, que redireccione a la pgina que est activa en ese
momento.
En el caso de que nuestro proveedor no ofrezca servicio de publicacin de webs o no nos
guste el servicio que ofrece, tenemos la opcin de publicar las pginas en alguna web que
ofrezca espacio gratuito. Este tipo de servicio es muy popular, existen muchas ofertas en
Internet, algunas de ellas mejores de las proporcionadas por los proveedores de acceso,
incluso por los proveedores de alojamiento.

A. Recursos permitidos
Existen muchos sitios donde publicar una pgina, se diferencian fcilmente por los recursos
que ponen a nuestra disposicin para construirla. Cuando hablamos de recursos nos
referimos a la cantidad de herramientas y programas que nos dejan utilizar en nuestra web.
Ejemplos de recursos son: estadsticas, contadores, direcciones web cortas, mail gratuito,
CGI, bases de datos... Los recursos se hacen necesarios cuando construimos una web
avanzada, con secciones dinmicas como un buscador, un portal, o en general, una pgina
que se alimenta de cualquier base de datos o programa para mostrar su contenido.
En la gama de recursos que ofrecen estos sitios gratuitos es muy variada. Algunos sitios casi
no ofrecen ningn recurso, simplemente podemos publicar la pgina, y en otros sitios ofrecen
ms servicios que en algunos proveedores de alojamiento de pago.
Al final del reportaje podremos ver una comparativa sobre la cantidad de recursos ofrecida
por algunos sitios proveedores de espacio gratuito para publicar webs.

B. Velocidad del servidor
Para elegir un servicio suficientemente veloz tenemos la oportunidad de probar la rapidez
con que bajan las pginas de alguna web que est alojada en ese servidor. Es decir,
visitamos una web de Geocities.com y vemos lo rpido que llega, una web de Galeon.com y
vemos la rapidez, comparando nosotros mismos. En un ltimo caso podemos registrarnos
nosotros mismos y probar la velocidad del espacio con nuestros propios contenidos. No pasa
nada por registrarse en un sitio, probar cmo funciona y si no nos gusta simplemente nos
vamos a otro, es gratis.
Un dato a considerar es que, dependiendo de dnde est situado fsicamente el servidor que
alojar nuestras pginas, la velocidad ser distinta para nosotros. Es decir, un mexicano ve
by: magh 129
ms rpido un servidor de Mxico, pero un europeo navegar con ms velocidad si el
servidor est en Europa. Esto, se lleva al lmite cuando es nuestro proveedor de acceso el
que nos ofrece el espacio, en este caso, seremos los que naveguen ms rpido por esa web,
por estar tan prximos los dos sitios, tu acceso a Internet y el servidor de tu pgina.

C. Publicidad insertada en las pginas
Tambin se pueden clasificar los sitios para publicar en Internet por la publicidad que
insertan. Los sitios de espacio gratuito suelen subvencionarse mediante la insercin de
anuncios en las pginas de los usuarios del servicio. Los tipos de publicidad que podemos
encontrar son los siguientes:
Publicidad en un frame inferior. Es tal vez la ms agresiva de las publicidades que
pueden hacer, pues el banner permanece siempre visible en la pgina y es un poco
feo para las pginas.
Publicidad dentro de la pgina, utilizando el banner superior. Es el mtodo de
insercin de banners ms habitual. Como desventaja tiene que el banner se exhibe en
la propia pgina, modificando nuestra web.
Publicidad en una ventana aparte. Esta publicidad aparece en una ventanita aparte
del explorador. Como ventaja est que no utiliza el espacio de nuestra pgina. Como
desventaja contamos que estas ventanas son muy molestas para muchos usuarios.
Publicidad en la propia pgina, en un grafiquito flotando en la propia pgina. Es
muy interesante, pues ocupa muy poco espacio comparado con otros mecanismos y
no molesta en exceso.
Sin publicidad, sin duda el mejor de los casos. Lo que no nos asegura que el sitio no
ponga publicidad algn da y deje de ser tan interesante. Actualmente, muy pocos
sitios ofrecen espacio gratuito sin colocar algn tipo de publicidad.
Hay muchos tipos de publicidad insertada habitualmente, como se puede ver. Eso no quita
que algunos sitios empiecen a utilizar varios sistemas a la vez.
Los ejemplos de sitios que estamos evaluando tienen la siguiente forma de insertar la
publicidad en las pginas de los usuarios:
Galeon: En el momento de escribir este reportaje no colocaban banners en las pginas
alojadas en su servidor. Sin embargo, actualmente si colocan publicidad en una capa que
acompaa tu navegacin y permanece siempre visible.
Metropoli 2000: Colocan un banner en la parte de arriba de la pgina. Es una opcin
interesante, porque reparten los ingresos por publicidad con el dueo de la pgina.
Iespana: Los banners de este sitio se colocan en un frame en la parte inferior de la pgina.
Pero con un simple aviso podemos pasar cambiar esto para que la publicidad salga en una
ventana aparte.
Freeservers: Colocan un banner en la parte superior de la pgina, con enlaces a otras
partes de Freeservers. Adems, tambin colocan publicidad en ventanas aparte. Todos estos
males se pueden eliminar si el usuario paga una cuota mensual. Segn nos ha informado,
tambin se puede configurar para que aparezcan flotando arriba, en la izquierda, derecha,
abajo, etc.
by: magh 130
D. Por manera de colgar los archivos
Existen diferentes maneras de subir los archivos. Por ejemplo, los podemos subir con FTP o
por medio de una pgina donde existe un formulario y donde podemos seleccionar los
archivos que deseamos subir. En la descripcin de caractersticas del alojamiento suelen
indicar acceso por FTP cuando esta permitido realizar este tipo de actualizaciones.
Para los principiantes ser ms cmodo subir las pginas por medio de un formulario de una
web, pero para las personas experimentadas, a la larga, les ser ms sencillo y tendr
menos trabajo el realizar las actualizaciones del sitio va FTP.
Como ventaja de subir archivos con un formulario tenemos que no ser necesario disponer
de un programa de FTP ni tampoco saber utilizarlo. Como ventaja del FTP destacamos la
rapidez de subida de archivos, ya que podemos seleccionar varios archivos de una sola vez
y no tenemos que esperar a que se cargue la pgina web para que tengamos acceso al
formulario, subir un directorio en una sola accin y otra mejora importante, que consiste en
que podremos utilizar el programa con el que diseamos las pginas web (tipo Dreamweaver
o Homesite) para acceder al servidor y actualizar los contenidos automticamente.
Nuestro consejo es aprender a utilizar FTP, si es que deseamos trabajar de manera ms
profesional y ahorrar tiempo a la larga. Comparativa y conclusin.

by: magh 131
*Transferencia: Es la cantidad de informacin que recibes y mandas cada mes el servidor
cuando le piden tu pgina. Empiezan a haber servicios gratuitos que limitan la transferencia
porque al fin y al cabo es lo que cuesta dinero del hecho de ofrecer espacio gratuito y poco a
poco se cierra el grifo de la Internet gratuita. Tener cuidado con este detalle, porque puede
que el alojador gratuito elegido pueda ser intil debido a que tenga mucho xito tu web y
tenga limitado el trfico.

Los Sitios que ofrecen mayores recursos para hacer una pgina web son Iespana.es y
Metropoli2000.net, con la principal diferencia de que
En Metropoli2000 slo aceptan webs con contenidos de calidad, sin despreciar al diseo. Es
decir, necesitas tener una web en Internet previamente publicada y estos te dicen si es de
suficiente calidad para poder publicarla en su servidor. Sin embargo, ellos te remuneran por
los ingresos de publicidad, aunque actualmente parece ser que el mercado les ha hecho
desistir de esta posibilidad. Para colmo de males, la publicidad cada vez es ms abusiva y
puede llegar a ser bastante tedioso el visitar una pgina en este servidor.
Iespana es bastante verstil, por permitir todo tipo de contenidos, incluso comerciales o de
adultos. Adems nos permiten programar en PHP 4 con base de datos MySQL (pagando), lo
que hace muy interesante para aquellos desarrolladores que deseen programar aplicaciones
de servidor. La velocidad del servicio, por lo menos con nuestra conexin a Internet, no es
del todo agradable.
Galen, su publicidad, aunque cada vez es ms abusiva. Actualmente saltan ventanas
secundarias por todas partes y encima los cuadros flotantes son cada vez ms grandes.
Freeservers no nos funcion del todo bien, sobretodo en el registro, que tuvimos que
intentarlo durante un par de das en un total de 5 ocasiones antes de conseguir ver la hoja
final de registro. De todos modos, hemos recibido buenas crticas de este servidor.

Direcciones de espacio gratuito
Iespana:
Metropoli 2000:
http://www.iespana.es
Freeservers:
http://www.metropoli2000.net
Geocities:
http://www.freeservers.com
Galen:
http://www.geocities.com
Tripod:
http://www.galeon.com
http://www.multimania.es

I IV V. .3 3 D Do om mi i n ni i o os s
Un dominio es una forma sencilla de identificar un ordenador en Internet de manera nica, a
partir del cual se encontrarn las pginas pertenecientes a la institucin que lo posee.
Los dominios tienen un nombre y una terminacin que indica su actividad o procedencia
territorial. Por ejemplo, yahoo.com: yahoo es el nombre y .com expresa el mbito de esa
pgina, comercial en este caso.
by: magh 132
Escoger bien el nombre del dominio es fundamental, si este tiene gancho podremos ser
fcilmente recordados e identificados en Internet. A veces no es tan sencillo realizar una
buena eleccin del nombre del dominio pues puede que los que nos gusten ya hayan sido
registrados por otras personas.
En muchos casos, el registro de los dominios ha sido realizado como un autntico pillaje,
solicitando los usuarios de Internet miles de nombres con el nico objetivo de poseer ese
dominio con gancho, pensando en futuras compensaciones, y sin presentar ninguna
informacin en sus pginas web. Los nombres de las empresas importantes son los que ms
han sufrido este pillaje, que ha obligado a las empresas a comprar los dominios "raptados"
por un precio astronmico a sus dueos.

Tipos de dominio
En Internet existen varios tipos de terminaciones de dominios o, mejor dicho, dominios de
primer nivel. Estos son los.com, .org, .es, etc. Como decamos, los dominios de primer nivel
indican el mbito al que pertenecen, hay principalmente dos grupos, genricos y territoriales.
Dominios genericos
Son dominios que se otorgan a nivel internacional, para empresas y personas de todo el
mundo. Los vamos a enumerar aqu, indicando el tipo de institucin al que van dirigidos.
.com Para empresas o en general para cualquier web que tenga carcter comercial. En un
principio, quera decir que ese dominio que se trataba de una compaa estadounidense,
pero en la prctica cualquiera ha tenido acceso a estos dominios que se han hecho muy
populares y los preferidos para cualquier tipo de fin.
.net Indica una red en Internet, la de un proveedor de servicios por ejemplo. Una opcin que
a la larga tambin se ha convertido en vlida para cualquier tipo de propsito.
.org Destinado para organizaciones, asociaciones, fundaciones y dems entidades muchas
veces con fines benficos o si nimo de lucro.
.gov Es para las pginas del gobierno de los Estados Unidos.
.edu Reservado para las instituciones relativas a la educacin.
.mil Se utiliza para instituciones militares de los estados unidos.
.int Que pertenece a la Unin Internacional de Telecomunicaciones, y en el que se pueden
encontrar organismos que se hayan creado con acuerdos internacionales, como las
Naciones Unidas.
.biz Este dominio es abierto (en el sentido que no hacen falta requisitos especficos previos
para el registro, del tipo .com, .net y .org) y el de significado ms genrico, por lo que es el
que recibir, probablemente, un volumen de registros mayor. Es la abreviacin anglosajona,
en pronunciacin figurada de business.
.info Este dominio es tambin abierto (sin requisitos especficos para registrar) pero el
significado parece, a priori, un poco menos genrico que .biz o .com. De todas formas, ser
tambin un dominio de gran volumen de registros, seguramente por encima del milln de
nombres ya en el primer ao.
.name Este dominio es (bastante) abierto, pero para un uso especfico, de carcter personal.
Est reservado a los individuos, que podrn reservar su nombre con la estructura
by: magh 133
MiNombre.MiApellido.name, ej: (pedro.garcia.name). El tercer nivel, correspondiente al
nombre de pila, es exclusivo del titular, pero el segundo nivel, correspondiente a los
apellidos, es compartido con todos los que ostenten dicho apellido.
En este caso, Pedro no podra impedir el registro de miguel.garcia.name, por ejemplo. Son
14 millones de nombres en 5 aos los previstos por Global Name Registry.
.pro Este dominio es para un uso especfico reservado a profesionales de determinadas
categoras, agrupados en subdominios: inicialmente sern .med.pro (mdicos), .law.pro
(abogados) y .cpa.pro (auditores; cpa significa chartered public accountant). En el tercer nivel
estar el nombre del profesional en cuestin que deber acreditar su pertenencia al colegio u
organizacin profesional correspondiente.
.coop Este dominio est reservado a las cooperativas. Un dominio claramente restringido en
sus polticas de registro (hace falta demostrar la cualidad de cooperativa a travs las
organizaciones locales correspondientes). El nombre de dominio debe ser necesariamente el
de la cooperativa. Este dominio tendr un periodo de lanzamiento/test de seis meses, con
procesos an ms restringidos, por lo que no va a tener un gran volumen de entradas en el
primer momento.
.aero Este dominio, tambin de uso restringido, es para la industria de los servicios areos:
compaas areas; compaas aeronuticas; aeropuertos y servicios areos. El volumen
esperado por el registro es de entre 100.000 y 300.000 nombres en cuatro aos.
.museum Este dominio es de uso restringido para la comunidad de museos. La posibilidad
de registrar en el segundo nivel (mnac.museum) o en el tercero (mnac.bcn.museum o
mnac.sp.museum) segn clasificaciones geogrficas todava est por definir definitivamente.
Los promotores esperan unos 50.000 nombres en este dominio.

Dominios territoriales
Tambin existen dominios de primer nivel que indican el territorio de origen de la pgina.
Estos dominios solo se le otorgan a empresas o personas de los pases relacionados con el
dominio.
Como ejemplos de dominios territoriales podemos sealar .es para Espaa, .fr para Francia,
.mx para Mxico. El registro de los dominios territoriales es regulado en base a unas normas
especficas para cada pas. Los encargados de crear estas normas para el registro son los
distintos delegados del NIC de cada pas. De este modo, el ES-NIC (www.nic.es) es el
encargado en Espaa, mientras que MX-NIC (www.nic.mk) es el de Mxico, o AR-NIC
(www.nic.ar) el de Argentina.
Espaa, por ejemplo, las normas para el registro de un dominio .es son bastante restrictivas,
y no todo el mundo puede registrarlos. En concreto para acceder a estos debemos ser una
empresa y nuestro nombre debe de ser igual al del dominio que queremos registrar, o muy
parecido. Tambin es posible el registro si se posee una marca registrada en Espaa con
ese nombre, siempre llevado a cabo por una empresa y no por una persona fsica.
Para consultar los requisitos para el registro de dominios en otros pases podemos visitar las
pginas de sus NIC correspondientes, donde siempre estar todo bien explicado y con la
informacin ms actualizada.
by: magh 134
Hay un organismo llamado NIC que es el que se encarga de regular el registro de los
dominios a nivel mundial. Se encarga de indicar para que se utilice cada dominio, quien est
autorizado a registrarlo, y quien puede ser el registrador. Esta entidad delega en otras para
desempear todo el trabajo de organizacin que conlleva la administracin de los dominios,
sobretodo en los distintos pases, como ms adelante se ver.

Para registrar un dominio
Anteriormente, el registro de dominios slo lo poda realizar una empresa llamada Network
Solutions, que mantuvo el monopolio hasta el verano de 1999. Actualmente se encuentra
liberalizado este mercado y existen muchas ms empresas registradoras de dominios. De
todos modos, a travs de estas empresas operan muchos ms intermediarios y encontrar un
registrador cercano a nosotros puede ser muy sencillo.
Slo los dominios del tipo .com .net y .org (y ahora tambin los .info .biz y .edu) se
encuentran al alcance de cualquier persona. Para registrarlos podemos acceder a las
pginas de las empresas que estn capacitadas para ello. En DesarrolloWeb.com podemos
ayudaros tambin en esta tarea.
En nuestro servicio de alojamiento puedes solicitar un dominio y registrarlo para cuanto
tiempo desees. Adems, en la parte de la derecha puedes ver un formulario donde escribir y
buscar el dominio que deseas. Posteriormente, si es que tu dominio est libre, podrs
registrarlo a travs de nuestras pginas. En estas pginas debemos realizar una bsqueda
para saber si se encuentra disponible el dominio que deseamos. Una vez hemos
comprobado que no pertenece ya a ninguna persona podemos pasar a su registro, que se
realiza a travs de unos formularios online en esas mismas pginas.
Si vamos a colocar unas pginas web en el dominio y vamos a contratar los servicios de
hosting en algn proveedor, puede ser aconsejable que este sea el encargado de la labor de
registro. Lo har a travs de una de esas empresas capacitadas para ello (sealadas arriba)
y, generalmente, sin un coste adicional, o en el caso de haberlo, no ser muy elevado.
(probablemente el mismo precio que tenga trasladar ese dominio a sus servidores)
Hay unos costes relacionados al registro de los dominios, costes que no se pueden evitar y
que no se los queda el proveedor, sino que son destinados al NIC. Para los dominios .com,
.net y .org, el coste del registro es de 35 dlares. Esta tasa permite mantener el dominio
durante 1 ao. Posteriormente hay que pagar 35 dlares por ao para seguir manteniendo el
nombre.

I IV V. .4 4 R Re eg gi i s st t r ro o e en n b bu us sc ca ad do or re es s
Una vez tienes realizada tu web el objetivo es que sea visitada. Existen muchas maneras de
conseguir esto, una de las ms fciles e inmediatas es el registro en buscadores.
Para conseguir que tu web sea incluida en un buscador debes rellenar un formulario con los
datos de la web que deseas registrar. Cada buscador tiene un formulario especfico y a
menudo el proceso de registro es diferente.
Para encontrar el formulario lo ms fcil es que entres en la pgina principal del buscador y
busques un enlace que ponga Aadir pgina, Add URL, nueva direccin, o algo parecido.
by: magh 135
Ese enlace te llevara al formulario de registro o, en su defecto, a la pgina donde explica
cmo has de registrarte en ese buscador en concreto.
Aun as, existen unos procedimientos bsicos de registro que suelen ser repetirse en los
buscadores:
Para los ndices, los buscadores que tienen categoras y podemos encontrar pginas
clasificadas dependiendo de su temtica. Se suele navegar a la categora en la que se
desea incluir el web. All se busca el botn "aadir pgina"(o algo parecido) y se
encuentra el formulario para el registro. ndices son Yahoo! o Terra
Para los motores de bsqueda, que son los buscadores que no tienen porque
mantener un ndice y que tienen robots que constantemente recorren Internet en
busca de nuevas pginas para incluirlas en el buscador. Estos buscadores suelen
tener un formulario accesible desde la pgina inicial, con el enlace correspondiente.
No hay que navegar las categoras para acceder al formulario. Motores de bsqueda
tpicos son Altavista o Sol.es.

Salta a la vista que registrarte en varios buscadores puede ser una tarea un poco costosa y
otra tanta pesada, pues tienes que ir buscador a buscador introduciendo una y otra vez los
mismos datos.
Afortunadamente existen herramientas multiregistro. Estas herramientas nos permiten
registrar nuestra pgina en distintos buscadores introduciendo una sola vez los datos de la
pgina web. Existen tambin dos tipos de herramientas multiregistro:
Aplicaciones windows, como cualquier otro programa, pero que su objetivo es registrar
en buscadores. Este tipo de herramientas suelen tener que comprarse, puedes
encontrarlas shareware en www.tucows.com por ejemplo, pero suelen estar limitadas
en su uso.
Herramientas online, estas nos permiten desde Internet, y por lo general gratuitamente,
registrarnos en varios buscadores. No suelen ser tan potentes como las anteriores,
pero si ms tiles y accesibles por ser gratuitas. En el buscador de
desarrolloweb.com, en la seccin de promocin puedes encontrar alguna de estas
herramientas. Nosotros estamos preparando una herramienta multiregistro online, que
ya se encuentra operativa y creciendo en el nmero de buscadores contemplados.
En desarrolloweb.com disponemos de una seccin dedicada a la promocin de pginas web.
Amplia en muchsimo la informacin recogida en este informe y recoge unas herramientas
para facilitarte la labor de que tu web sea ms visitada.

I IV V. .5 5 C Co on nt t a ac ct t o o c co on n e el l n na av ve eg ga an nt t e e
Bien sabido es que una de las tareas ms importantes y laboriosas del ciclo de vida de una
pgina web es su mantenimiento, para conservar la web, su trfico y su importancia con el
tiempo. Pero mantener una web no es slo publicar nuevos contenidos y actualizar los
anteriores, entre estas tareas se encuentra una que es fundamental: proporcionar
mecanismos para que los visitantes se puedan poner en contacto contigo, y, por supuesto,
contestar a cada uno de los mensajes que recibes.
by: magh 136
Existen muchas formas de comunicarnos con el navegante, vamos a ver los mecanismos
que estn ms a nuestro alcance para que a ninguna de nuestras webs les falte la posibilidad
de comunicarse con sus visitantes.
Hemos ordenado los siguientes puntos por orden de facilidad en su uso, as los primeros son
ms asequibles y los siguientes ms difciles de conseguir, aunque a menudo mejores.

Correo electrnico
Lo que nunca debe faltar en una pgina, por su sencillez y utilidad, porque es la forma ms
adecuada en muchos casos... Siempre tenemos que incluir una direccin de correo,
fcilmente localizable, para que los visitantes puedan comunicarse. Es facilsimo hacer un
enlace con una direccin de correo: Se ha de poner un enlace convencional, pero su atributo
HREF va direccionado a una direccin de correo con la palabra mailto:.
<A HREF="mailto:eugim@desarrolloweb.com">Escrbeme</A>Quedara as:
I IV V. .6 6 P Po os si i c ci i o on na am mi i e en nt t o o e en n l l o os s b bu us sc ca ad do or re es s d de e i i n nt te er rn ne et t
Escrbeme
Poner un enlace a una direccin de correo en un editor de HTML, para los que trabajis con
herramientas de edicin, tambin es parecido a como lo hacis para los enlaces normales,
pero con esas diferencias.

Libro de visitas
Ahora veremos algn mecanismo adicional para comunicarse con el cliente, pero en estos
casos no se trata tanto de una comunicacin entre ellos y tu, sino ms es una forma de
comunicacin te todos para todos.
En el caso del libro de visitas est bien claro, es una herramienta donde los visitantes pueden
dejar los mensajes que deseen para que estos queden reflejados en la web y as, no slo los
leas tu, sino que tambin los pueden leer todos los demsa usuarios de tus pginas. Esto le
da agilidad a la pgina, dinamismo y hace que los visitantes se sientan integrados en el
proyecto, colaboren y vuelvan para ver sus "huellas". Las ventajas son muchas.
En la mayora de los casos no dispondremos de la tecnologa ni conocimientos para
implementar esta tecnologa, pero existen en el mercado varios libros de visitas
personalizables e integrables dentro de webs sencillas, es decir, tu no tienes que hacer nada,
ellos te proporcionan todos los recursos y explicaciones para montar un libro de visitas en tu
web. Aqu puedes ver varios enlaces a estos sitios:
Melody Soft: http://www.melodysoft.com/
Cambia.net: http://libros.cambia.net

Todas las empresas con cierta entidad, hoy en da disponen de un sitio web, pero muchas de
ellas se plantean si esta presencia en la Red ha sido una inversin o un mero gasto de
representacin.
Para que nuestra presencia en Internet sea rentable es necesaria la promocin de nuestro
sitio, y una de las herramientas ms rentables para dar a conocer nuestro site y generar
visitas son los buscadores.
by: magh 137
Aparecer en los principales buscadores internacionales, nacionales y en los especficos de
nuestro sector es principal, pero no lo es menos aparecer en un lugar destacado segn
ciertas palabras clave que definan nuestro negocio en la mente de nuestras audiencias.
Puesto la mayora de los internautas se conforman con los primeros resultados
proporcionados por su buscador favorito.
Y para aparecer en un lugar destacado en estas tiles herramientas de bsqueda debemos
conocer su funcionamiento interno. Los buscadores se dividen en dos grandes grupos: los
ndices y los motores de bsqueda.
Los ndices dividen la informacin en un rbol temtico de categoras y subcategoras. Aqu
el ejemplo paradigmtico sera Yahoo!, que nos presenta una serie de grandes categoras
temticas entre las que encontramos la subcategora "Economa y Negocios", dentro de ella
"Empresas", y esta a su vez contiene entre otras "productos y servicios para empresas" y as
sucesivamente hasta ir acotando la amplitud de la categora de sitios web, ya que no se nos
permitir proponer la inclusin de nuestro sitio web en una categora demasiado amplia. En
los ndices lo esencial es encontrar la rama ideal de este rbol temtico en la cual ubicar
nuestro sitio web, y digo nuestro sitio, puesto que en los ndices slo es posible incluir una
pgina (normalmente la principal) a su directorio, aunque a menudo es posible incluirlo en
dos o tres categoras. Para encontrar esta categora ideal en la cual debera estar nuestro
web, la estrategia a seguir es puramente marketing; ponerse en la piel de nuestro pblico y
pensar en qu categora nos buscar. Para ello, podemos ayudarnos de un estudio de
mercado, y como no, del sentido comn y de la observacin de en qu categora se
encuentran ubicados nuestros principales competidores. Pero cuidado, quiz ellos no lo
hayan echo tan bien y no se encuentren en la categora ideal. Lgicamente dependiendo de
la amplitud de nuestros productos o servicios, ser ms obvio o ms difcil hallar esta
categora ideal. No obstante tras nuestra peticin de alta existe un proceso de revisin
humano e incluso podemos proponer una nueva categora si no nos encontramos
debidamente definidos por ninguna de las existentes.
Y sobre este proceso de revisin humana es sobre el que quiero hablar a continuacin,
puesto que es este el segundo factor que ms diferencia a los ndices de Internet de los
motores de bsqueda. Cuando proponemos el alta de nuestro sitio en el ndice de turno, se
nos pide toda una serie de datos, como: Ttulo de la pgina, URL, Definicin, Ubicacin
geogrfica, persona de contacto y correo electrnico... Y finalmente nuestro site es revisado
por un surfer (un especialista en catalogar recursos) del ndice que considera si nuestro site
cumple con los estndares de calidad requeridos y si est bien clasificado en la categora
elegida por nosotros.
Vemos que esto es lo nico que conoce el ndice de nuestro sitio web; los datos
suministrados en el formulario de peticin de alta en el buscador. Por lo que debemos ser
extremadamente cuidadosos en la definicin que enviamos de nuestro site.
El caso de los motores de bsqueda es bien distinto. Podemos tomar como ejemplo a
Google, y veremos que la nica informacin que proporcionamos a un motor es la direccin
URL (por ejemplo: www.miempresa.com) y quiz una direccin de correo electrnico. El resto
del proceso se realiza de forma automtica, ya que nuestra peticin de alta en el buscador
entrar en la cola de trabajo de un programa de software llamado spider (araa) que visitar
la pgina que hemos dado de alta y a partir de ella todas las que se encuentren enlazadas y
as sucesivamente. Simultneamente nuestras pginas sern indexadas utilizando complejos
algoritmos, para ser devueltas como resultado cuando un internauta utilizando el buscador,
by: magh 138
introduzca un trmino que se encuentre en alguna de ellas y haga una peticin de extraccin
de informacin de su ingente base de datos. Vemos de esta forma que nuestro web puede
aparecer en algn motor de bsqueda por la simple razn de que otra pgina de un tercero
que est incluida en el buscador enlaza a ella en Internet.
As, en los motores de bsqueda, para obtener una notable posicin, lo esencial es el cdigo
de nuestras pginas, algo que era verdaderamente indiferente en el caso de los ndices.
Tericamente con slo dar de alta nuestra pgina principal el buscador indexar todas las
pginas que cuelgan de ella, pero habitualmente nos encontraremos con problemas
derivados de la ventaja que se concede a las altas de pago frente a las gratuitas; el primero
es el tiempo a esperar para que nuestro sitio sea introducido en la base de datos del motor
de bsqueda, que puede variar entre varias semanas a varios meses segn el motor en
cuestin. E incluso a menudo, tras este dilatado periodo de tiempo, no seremos indexados en
sus bases de datos. Y esto, en los motores que an admiten el alta gratuita.
Como recomendacin, si nuestro tiempo y energas son limitadas deberemos optar por el alta
de pago en algunos buscadores. Si conocemos las interacciones entre los distintos
buscadores de Internet, descubriremos que la inclusin en alguno de ellos puede suponer la
sucesiva inclusin en otros que a menudo son ms "duros" con las admisiones.
Una vez que conseguimos que nuestro web aparezca en los buscadores, nuestro trabajo no
habr hecho ms que empezar, ya que lo realmente valioso es aparecer en los primeros
lugares por aquellas palabras clave que nuestros pblicos utilizan para buscar nuestra
categora de productos, y esta s que es una verdadera guerra, puesto que en esa lucha
estamos frente a nuestros principales competidores, que tambin batallarn por mejorar la
posicin de sus pginas frente a las nuestras y las de otros competidores. Desde luego, que
la complejidad depender de la popularidad de las palabras clave por las que queramos
aparecer de forma destacada en el buscador.
Realmente cada buscador valora de distinta forma el cdigo de nuestras pginas para
ubicarla en una u otra posicin de su ranking, as por ejemplo Google valora especialmente
cuantas y que tipo de pginas apuntan hacia las nuestras, aplicando una lgica bastante
humana, segn la cual si muchos y especialmente importantes hablan de uno, es que uno es
importante. Otros motores como AltaVista valoran los Meta Tags (unas lneas de cdigo que
informan al motor acerca del contenido de nuestras pginas), etc.
En general, los buscadores se fijan en la frecuencia o densidad y ubicacin con la que
aparecen ciertos trminos en nuestras pginas, para ubicarlas en un lugar superior de sus
resultados frente a otras pginas, en las cuales la frecuencia y ubicacin de este trmino que
el navegante ha introducido en la caja de bsqueda del motor aparece.
As, una palabra que est presente en nuestra misma direccin de Internet
(www.palabra.com) indica un elevado nivel de coincidencia si es el trmino buscado por el
internauta. Despus es especialmente valorada esta palabra, en el ttulo del documento, en
el primer prrafo ms que en el segundo... Si est en mayscula es ms valorado, al igual
que si est en negrita... Si aparece dos veces en una frase ms que si aparece una, etc.
A estas alturas, seguro que a ms de un lector se le ha pasado por la cabeza, la idea de
llenar de trminos clave la pgina para que aparezca en las primeras posiciones del
buscador, pero lamentablemente esto ya est contemplado por estas herramientas que si
encuentran demasiadas palabras repetidas o un texto de tamao muy pequeo o con el
by: magh 139
mismo color que el fondo, etc, penalizarn nuestras pginas o incluso las eliminarn de la
base de datos por tratarse de tcnicas de spam (tcnicas de promocin ilcitas)

I IV V. .7 7 R Re eg gi i s st t r ro o y y h ho os sp pe ed da aj j e e e en n t t r ri i p po od d
Uno de los hosting gratuitos ms sencillos de registrarse y administrar el sitio web se
encuentra tripod, su direccin es: http://www.multimania.es/, al ingresar a esta pgina
aparece la ventana:

Navegue por la pgina
y vea los servicios y
herramientas que le
ofrece.
En el cuadro Chosse a
username, escriba el
nombre que desee dar
a su sitio web.
Choose a password,
teclee la contrasea
para administrar los
archivos de su sitio
web.
by: magh 140

Introduzca los datos
que se le piden:
Nombre de usuario,
correo, pregunta para
recordar y la respuesta.

Por ltimo haga clic en
el botn Continuar.

Nota: Cuando sucede
algn error, se marcara
en rosa. En este caso
fue la contrasea.
Complete la informacin:
fecha de nacimiento, sexo.

No olvide hacer clic en la
casilla Acepto los
trminos.

En el cuadro Type the two
words, escriba las
palabras que aparecen.

Por ltimo haga clic en el
botn Registrar.

by: magh 141

Aparece la ventana de
confirmacin, en donde
se enviar a su correo
ciertas indicaciones
para concluir el registro
de su hosting.

El aviso de confirmacin
puede tardar unos
minutos incluso algunas
horas.

Al recibir el correo de
activacin de su cuenta
de Multimania, abra el
mensaje y despus haga
clic en link que se le
enva.
by: magh 142

En link que recibi en
su correo, aparece la
ventana de
confirmacin, en donde
le pide que introduzca
el nombre de su sitio e
introduzca la
contrasea del FTP.

Teclee el nmero que
aparece en el cuadro,
por ultimo haga clic en
el botn Siguiente.
Para iniciar a subir sus
archivos al sitio creado,
introduzca el nombre del
sitio y despus la
contrasea, por ltimo
haga clic en el botn
Iniciar sesin.

Nota: Despus de
completar los datos de
registro, le dan la
bienvenida su registro se
realizado
satisfactoriamente.
by: magh 143

Despus de introducir
el nombre del sitio y su
contrasea. Aparece la
ventana de bienvenida,
observe que aparece el
nombre de su sitio.

Adems del nombre
del usuario.
archivos, haga clic en el
botn Crear tu web.
by: magh 144

Observe que se
encuentra dentro de su
sitio.

archivos, haga clic el
link Abrir FTP Web.
En cada recuadro, le
permite subir un archivo,
hasta un mximo de 8
archivos a la vez.

Tenga en cuenta que
todos los archivos que
subir en este momento,
es dentro del directorio
raz de su sitio web.
by: magh 145

En cada recuadro
puede agregar un
archivo, para ello haga
clic en el botn
Examinar.

Del cuadro de dialogo
Carga de archivos,
seleccione el archivo
que desea subir.
Repita esta operacin
para cada archivo que
desee subir.
Observe que cada
recuadro tiene un archivo
(son los que subir a su
sitio).

Cuando termine de
agregar los archivos,
Subir, esta proceso
puede tardar unos
minutos, por que se
transfieren los archivos
de su computadora al
servidor en donde se
encuentra su hosting.

by: magh 146

Despus de unos
minutos, observe que
se transfirieron sus
archivos al hosting.

Si desea crear una
carpeta dentro de su
sitio, haga clic en el
icono de Nuevo.
Al hacer clic en el botn
de Nuevo, aparece el
cuadro de dialogo que le
pide teclear el nombre del
directorio, escrbalo y
Aceptar.
by: magh 147

Observe que
se crea una
carpeta con
el nombre
que tecleo.
Ahora ya se encuentra
dentro de la carpeta
creada.

Seleeccione los archivos
que desea subir y
ubicarlos dentro de la
carpeta creada.

Cuando termine de
seleccionar sus archivos,
Subir, para transferir los
archivos de su
computadora al servidor
de su hosting.
Para ingresar
a la carpeta
creada, haga
doble clic
sobre el ella.
Observe que
los archivos
se enviaron
de forma
correcta.
by: magh 148

Seleccione el resto de los
archivos que desea subir.

Cuando termine de
seleccionar sus archivos,
Subir.
Observe que los
archivos se
enviaron de forma
correcta.
Una vez que ha terminado de subir la totalidad de los archivos de su pgina web.

Es momento de
probar, si ha
subido de forma
adecuada sus
archivos.

Regrese al
directorio raz y
haga clic en el
icono de Visualizar

by: magh 149

Se abre la ventana
mostrando el contenido
de su pgina web.

Navegue por ella y vea si
el contenido corresponde
o no.

Felicidades!,
Ha desarrollado la
habilidad y los
conocimientos necesarios
para elaborar pginas
web, adems de la
administracin del sitio.

Enhorabuena
Fuentes de consulta .
by: magh 150
V V. . F Fu ue en nt t e es s d de e c co on ns su ul l t t a a

http://www.aulaclic.es/html/index.htm
http://www.desarrolloweb.com/manuales/21/
http://www.webtaller.com/manual-html/manual_html.php
http://sestud.uv.es/manual.esp/
http://www.programacion.com/html/tutorial/curso/
http://www.ivia.es/htmlref/
http://www.pangea.org/pacoc/manuales/manual1.htm
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/
http://www.htmlya.com.ar/
http://www.adobe.com/es/products/
http://www.aulaclic.es/dreamweavercs3/index.htm
http://www.intercambiosvirtuales.org/libros-manuales/manual-oficial-adobe-
dreamweaver
http://www.tutorialmanual.net/video-tutorial-de-adobe-dreamweaver-cs3.html
http://www.lynda.com/home/DisplayCourse.aspx?lpk2=410
http://www.multimania.es/

Pagin As Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Pagin As Web

Cargado por

Copyright:

Formatos disponibles

Centro de Bachillerato Tecnolgico

industrial y de servicios No. 12

También podría gustarte