Este documento presenta un curso sobre diseño web que consta de 8 lecciones. Cada lección cubre un tema diferente relacionado con el diseño web, como páginas principales, creación de texto y arte para la web, herramientas de diseño web, y HTML básico. El documento también describe los objetivos del curso, cómo está organizado, los requisitos técnicos necesarios y los archivos de práctica incluidos para que los estudiantes apliquen lo que aprenden.

1. Diseño Web -
Contenido
Introducción 2
Lección 1 Páginas principales sin misterios 12
Lección 2 Creación y forma del texto
para el Web 26
Lección 3 Creación y utilización de arte
en el Web 37
Lección 4 Acopio de utensilios 58
Lección 5 Plan de ataque 80
Lección 6 HTML básico sin misterios 96
Lección 7 Creación de sitios Web
con FrontPage 155
Lección 8 Introducción de las páginas Web
en el mundo real 213

2. 2
Introducción
Ahora más que nunca, los adultos tienen que reinventarse a sí mismos en
muchas ocasiones para estar al día de los grandes cambios que se producen
en el mundo del siglo XXI.
Microsoft® Unlimited Potential (UP) es un programa global centrado en
mejorar el aprendizaje de jóvenes y adultos al proporcionar conocimientos
tecnológicos a través de centros comunitarios de aprendizaje tecnológico
(CTLC). Microsoft cree que fomentando la enseñanza de conocimientos
técnicos podemos ayudar a crear oportunidades sociales y económicas que
ayuden a cambiar las vidas de las personas y a transformar las comunidades.
Al participar en los cursos UP, los alumnos se centrarán en los conocimientos
técnicos que necesitan para utilizar diversas aplicaciones. Todos los cursos UP
enseñan conocimientos tecnológicos de manera práctica que resaltan las
aplicaciones reales de la tecnología, desde informática básica y alfabetización
informática hasta fotografía digital, diseño de páginas Web o software de
productividad.
Los cursos UP están pensados para su uso dentro de la comunidad y en
centros de enseñanza de tecnología, ya sea en el contexto de un aula o para
autoaprendizaje. En el caso de los cursos relacionados con información
introductoria y tecnologías de comunicaciones (alfabetización informática,
Internet, World Wide Web, medios digitales y aplicaciones de productividad),
no se supone experiencia previa con la tecnología o el software.
A quién va dirigido este programa
Todos los cursos del programa Microsoft UP están diseñados para motivar a
los jóvenes y adultos que desean aprender nuevas tecnologías o aumentar
sus conocimientos tecnológicos actuales, ya sea por razones personales o
profesionales. Los cursos tienen en cuenta el hecho de que los adultos suelen
llegar a las experiencias de aprendizaje con una amplia variedad de
experiencias previas, expectativas y conocimientos:
■ Los alumnos comunitarios desean emplear su tiempo y su dinero
sabiamente. Este programa se ha diseñado para prever,
comprender y centrarse en la necesidad de estos alumnos
de una instrucción eficiente y efectiva.
■ Una instrucción bien diseñada tiene en cuenta los conocimientos
previos de los alumnos comunitarios y aporta nuevos
conocimientos. Este programa da cabida a una amplia variedad
de conocimientos y habilidades ya existentes. Cada curso tiene en
cuenta tareas y niveles de conocimientos comunes.

3. 3
■ Los alumnos comunitarios van a aprender y esperan que se les
trate como personas independientes, únicas y capaces. Este
programa puede utilizarse en un aula o como herramienta para
el autoaprendizaje a su propio ritmo.
■ Los alumnos comunitarios, orientados a la acción, esperan que lo
aprendido sea aplicable directamente a sus responsabilidades
profesionales, así como a sus fines personales. Este programa
contiene muchos ejemplos prácticos del mundo real y aplicaciones
diseñadas para atraer a una amplia gama de alumnos adultos.
Por encima de todo, cada curso UP está diseñado para enseñar conocimientos
de tecnología pero siempre teniendo presente el uso de la tecnología para
mejorar las oportunidades individuales, la productividad, la preparación para
el trabajo y la calidad de vida.
Ofertas y objetivos de los cursos
El programa UP cumple los estándares educativos de Microsoft e
internacionales. Como tal, el programa de estudios ofrece los siguientes cursos
introductorios sobre equipos, software y tecnología digital:
■ Conceptos básicos de informática
Este curso ofrece a los alumnos una base sólida de los conceptos
básicos de la informática y los fundamentos de hardware, software,
sistemas operativos, Internet, etc.
■ Conceptos básicos de medios digitales
Este curso enseña a los alumnos cómo empezar con los medios
digitales, incluyendo fotografía digital, audio y vídeo digital.
■ Conceptos básicos de Internet y del World Wide Web
Este curso enseña cómo explorar el Web, utilizar motores de
búsqueda, trabajar con correo electrónico y crear páginas Web.
■ Conceptos básicos de diseño Web
Este curso explica todo el proceso de diseño de páginas Web,
desde los fundamentos de HTML hasta las estrategias para
diseñar y crear un sitio Web completo.
■ Conceptos básicos de procesamiento de textos
Este curso se centra en cómo utilizar un procesador de textos para
escribir y revisar diversos documentos personales y comerciales,
desde cartas y memorandos sencillos hasta documentos complejos
que contienen gráficos y tablas.

4. 4
■ Conceptos básicos de presentaciones
Este curso trata todo lo necesario para crear presentaciones
electrónicas convincentes, desde la creación de presentaciones
con diapositivas básicas hasta cómo agregar gráficos, vídeo y
audio para conseguir presentaciones multimedia completas.
■ Conceptos básicos de bases de datos
Este curso presenta los fundamentos del uso de una base de datos
relacional para crear tablas, formularios e informes.
■ Conceptos básicos de hojas de cálculo
Este curso enseña a los alumnos los conceptos básicos de las
hojas de cálculo incluyendo la creación de hojas de cálculo, la
modificación de datos, la creación de diagramas y gráficos, y la
publicación de una hoja de cálculo en el Web.
Cada curso utiliza tareas y proyectos para desarrollar competencias en cuanto
a la tecnología de información básica y las aplicaciones de productividad de
sobremesa mediante el tratamiento de los temas siguientes:
■ Conceptos básicos de la tecnología de la información
■ Uso del equipo y administración de archivos
■ Procesamiento de textos
■ Hojas de cálculo
■ Bases de datos
■ Presentaciones
■ Alfabetización sobre Internet, World Wide Web y correo electrónico
Entre las áreas temáticas principales se incluyen las siguientes:
■ Fundamentos de la informática (hardware, software, sistema
operativo)
■ Principales aplicaciones de software (aplicaciones de productividad)
■ Internet, World Wide Web y correo electrónico
El programa UP ofrece materiales para los alumnos y para los instructores que
son flexibles, confiables, económicos y orientados a los resultados. De acuerdo
con el contrato de copyright, los instructores pueden duplicar y personalizar
todos los materiales y archivos para mejorar el proceso de aprendizaje.

5. 5
Cómo está organizado el curso
Cada curso del programa Microsoft UP empieza con los conceptos básicos y
pasa rápidamente hacia conocimientos y técnicas intermedios. Los tutoriales
prácticos construyen de forma experta sus conocimientos paso a paso. Al
estudiar con un enfoque basado en tareas, aprende algo más que simplemente
las características del software. Aprende a realizar tareas de la vida real, de
forma que pueda aumentar su productividad inmediatamente utilizando la
tecnología.
Cada lección empieza con unos objetivos de aprendizaje en viñetas. Cada
objetivo especifica una tarea determinada que podrá realizar cuando complete
la lección.
Los tutoriales paso a paso son el eje central de cada lección. Las lecciones
se basan en tareas que puede encontrar en el mundo laboral cotidiano. Este
enfoque le permite ver rápidamente la importancia del aprendizaje. El enfoque
basado en tareas está imbricado en toda la serie, incluyendo la organización de
lecciones dentro de cada unidad, los títulos de las lecciones y las situaciones de
ejemplo elegidas para los archivos de prácticas. Los conceptos se presentan e
ilustran con ejemplos de muchas situaciones de la vida real, la tecnología se
explica claramente y los ejercicios prácticos le permiten empezar a aplicar
inmediatamente lo que sabe. La mayoría de las lecciones terminan con 4 ó 5
ejercicios prácticos de dificultad creciente, y desafían al alumno a entender y
aplicar lo aprendido.
Características especiales
■ Objetivos de aprendizaje. Establecen claramente los objetivos
de enseñanza para cada lección, de forma que entienda lo que
aprenderá. Los objetivos de aprendizaje se tratan de manera
coherente y constituyen la estructura de las lecciones, lo que le
ayuda a captar la información más importante y a preparar las
habilidades de aprendizaje.
■ Tutoriales paso a paso. Los pasos numerados contienen
instrucciones detalladas paso a paso que le ayudan a aprender.
Cada tutorial incluye numerosas ilustraciones que le guían por el
proceso de aprendizaje. Con cada curso se ofrecen archivos de
ejemplo.
■ Sugerencias. En toda la lección se incluyen sugerencias útiles
y formas alternativas de realizar las tareas que le ofrecen
información adicional, métodos abreviados y posibles problemas,
así como comentarios acerca de lo que está aprendiendo.
■ Notas. En todo el texto de la lección encontrará información
adicional que le permite profundizar más en un tema.
■ Importante. Las notas especiales ofrecen precauciones o
instrucciones especiales.

6. 6
■ Barras laterales. Las barras laterales de algunos de los cursos
contienen temas parentéticos, información adicional o
explicaciones más extensas, como momentos interesantes en la
historia de la informática, los entresijos de la ley del copyright o lo
que tiene que saber acerca de los “colores seguros” que hay que
utilizar en una página Web.
■ Jerga. Estas notas al margen de algunos de los cursos ofrecen
definiciones de términos técnicos.
■ ¡Pruébelo! Estas barras laterales especiales de algunos cursos
ofrecen minitutoriales rápidos para comprobar sus conocimientos.
■ Archivos de prácticas. Unos documentos de ejemplo le ayudan a
completar los ejercicios presentados al final de las lecciones de
varios cursos. Las lecciones basadas en proyectos empiezan con
una lista de todos los archivos que necesitará para completar el
proyecto.
■ Puntos clave o Resumen de la lección. Los resúmenes de lo
que ha aprendido en una lección sirven como recordatorio de los
puntos clave y le indican lo que debe hacer a continuación.
■ Ejercicio corto. Los ejercicios cortos incluidos al final de cada
lección evalúan lo que ha aprendido y cómo podría aplicarlo.
Esta evaluación al final de la lección va más allá de una simple
recapitulación de lo aprendido, al pedirle que explique cómo
realizar ciertas tareas.
■ Resumen de conceptos. Estos ejercicios incluidos al final de
cada lección le permiten practicar la aplicación de lo aprendido a
proyectos del mundo real. Muchos de estos ejercicios se basan
unos en otros para ofrecer un conjunto creciente de desafíos que
ponen a prueba sus conocimientos.
■ Apéndices. Los objetivos para el examen de especialista en
Microsoft Office de cada curso se enumeran en un apéndice
al final del libro.
Archivos de prácticas
En varios de estos cursos se incluyen documentos de ejemplo y otros archivos
para acelerar el aprendizaje y ofrecer ejemplos “terminados” que puede
comparar con su propio trabajo. En cada lección se explica cuándo y cómo
utilizar los archivos de prácticas para esa lección. Muchas de las lecciones se
basan en situaciones de la vida real para que pueda aplicar fácilmente los
conocimientos aprendidos a su propia situación.
Por ejemplo, Conceptos básicos de diseño Web incluye todos los ingredientes
para crear varios sitios Web con FrontPage: los archivos de texto, los archivos
gráficos y los archivos HTML necesarios para crear un sitio Web atractivo.

7. 7
Puede elegir entre trabajar con estos archivos como parte de la instrucción en el
aula en los centros comunitarios de tecnología y aprendizaje o bien puede
utilizarlos para aprender por su cuenta.
El instructor instalará todos los archivos de prácticas en la unidad de disco duro
de cada equipo. Dependiendo del curso concreto que vaya a realizar, los
archivos se almacenarán en la carpeta Practice de cada curso. Los archivos de
cada curso se encuentran en las carpetas del curso correspondiente, bajo la
carpeta Unlimited Potential de la unidad C: . Su instructor le explicará cómo ir
a los archivos del curso que va a realizar.
Requisitos del sistema
Todos los equipos del aula o del centro comunitario de aprendizaje deben
cumplir las condiciones mínimas siguientes para ejecutar Microsoft Office XP
y permitir a los alumnos el trabajo con los archivos de prácticas empleados en
muchas de las lecciones.
■ Un equipo personal que ejecute Microsoft Office XP con un
procesador Pentium a 133 megahercios (MHz) o superior.
■ Sistema operativo Windows XP.
■ 128 MB de RAM como mínimo, además de 8 MB de RAM adicionales
para cada programa de Office que se ejecute simultáneamente.
■ Al menos 58 MB de espacio disponible en disco (después de instalar
Microsoft Office XP).
■ Una unidad de CD-ROM.
■ Un monitor con resolución Super VGA (800 x 600) o superior con
256 colores; se recomienda un monitor de 15 pulgadas como mínimo.
■ Un mouse (ratón), IntelliMouse u otro dispositivo señalador
compatible.

8. 8
Acerca del equipo de autores
Gran parte del material de estos cursos se basa en los puntos fuertes del
enfoque ya probado que Microsoft desarrolló y refinó para sus series Step by
Step Courseware, y sus series de libros Step by Step y Faster Smarter. Los
instructores, especialistas de diseño educativo, autores y expertos en tecnología
que aportaron el contenido de estos libros y cursos poseen unos extensos
conocimientos en tecnología y gran experiencia didáctica.
Parte del material de este curso se ha adaptado de Faster Smarter Web Page
Creation, publicado por Microsoft Press. Existe una versión más completa de
este material en las ediciones impresas originales de estos libros. Animamos a
los instructores y alumnos a que consulten estos libros cuando deseen ampliar
sus conocimientos de las tecnologías de información e informática. Edición
original de Faster Smarter Web Page Creation by Mary Millhollon. Los libros
de Microsoft Press pueden adquirirse en librerías y distribuidores de todo el
mundo. Para obtener más información acerca de las ediciones internacionales,
póngase en contacto con su librería local o póngase en contacto con Microsoft
Press International directamente en el número de fax (425) 936-7329. Visite
nuestro sitio Web en www.microsoft.com/mspress para obtener más
información acerca de estos libros y los autores que los crearon.

9. 9
Convenciones utilizadas en este curso
Este curso utiliza fuentes, símbolos y convenciones de títulos especiales para
resaltar la información importante o para llamar su atención sobre pasos
especiales. Para obtener más información acerca de las características
disponibles en cada lección, consulte la sección “Características especiales”
de esta Introducción.
Convención Significado
Texto en cursiva Este formato indica un término clave
utilizado por primera vez, como
banda ancha o World Wide Web.
Texto en negrita Este formato indica el texto que usted
debe escribir.
O bien
Indica un término clave que se emplea
por primera vez.
Fuente Sans-serif Este formato se utiliza para resaltar
texto que forma parte de los pasos de
los tutoriales.
nota
Las notas ofrecen información
adicional que le permite profundizar
en un tema.
sugerencia
Ofrecen sugerencias útiles y formas
alternativas de realizar tareas.
importante
Las notas especiales ofrecen
precauciones o instrucciones
especiales.
Puede buscar y descargar
Las notas al margen recuadradas
software antivirus en Internet. ofrecen información adicional y
comentarios sobre el texto.

10. 10
Características de las lecciones
Los objetivos de la lección
establecen claramente los
objetivos de enseñanza para
cada lección, de forma que
entienda lo que aprenderá.
Cada tema
empieza con
información
que explica
conceptos y
técnicas.
Las notas Los pasos numerados
al margen ofrecen instrucciones
incluyen detalladas para realizar
sugerencias e una tarea.
información
adicional.
Las notas
importantes
contienen
instrucciones
especiales.
Las sugerencias ofrecen
consejos útiles, métodos
abreviados y formas alternativas
de realizar una tarea.
Los términos importantes
se muestran en negrita y
se definen la primera vez
que se utilizan.
Las ilustraciones ofrecen
información visual mientras
que estudia la lección.

11. 11
Resumen de la lección
trata problemas
restantes de la
administración de
archivos para terminar
la lección.
Los ejercicios
de Resumen
de conceptos
le desafían a
que aplique
lo que ha
aprendido
y le obligan
a aplicar los
conocimiento
s de una Las preguntas de
forma nueva. Ejercicio corto, con
respuestas breves, le
plantean preguntas
sobre los conceptos
expuestos en la
lección.

12. 12
LECCIÓN 1
Páginas principales
sin misterios
Una vez completada esta lección, podrá:
 Explicar la diferencia entre Internet y el World Wide Web.
 Comprender la anatomía de una página Web típica.
 Crear una página HTML sencilla y verla en un explorador.
Es muy probable que le resulte bastante conocida la no tan modernísima
Jerga: Internet es el invención denominada Internet. Y lo que es más, estamos dispuestos a apostar
hardware que se interconecta que, si está contemplando la idea de hacerse notar en el Web, sabe cómo usar
para crear una red mundial en cierto modo un equipo informático. También suponemos que ha explorado
enorme.
el Web, puede usar aplicaciones básicas (por ejemplo, paquetes de
procesamiento de texto) y puede hacer clic en un mouse (ratón). Por suerte, su
conocimiento básico de informática es todo lo que precisa para poder crear
páginas Web. Eso junto con estas lecciones, ¡por supuesto!
Su primer cometido en el camino para llegar a convertirse en desarrollador de
páginas Web supone comenzar a partir de lo que ya sabe. Por ejemplo, además
de unas capacidades informáticas moderadas, debe tener una idea de cómo se
relacionan entre sí Internet, el Web y las páginas Web. Por lo tanto, en aras de
nuestro objetivo de mantener la claridad y simplicidad, reduciremos la marcha
en esta lección y describiremos brevemente los elementos principales de la
mayor red del mundo: Internet, el Web y las páginas Web. Cuando hayamos
conseguido quitarnos de en medio una serie de conceptos básicos, pasaremos el
resto de las lecciones hablando acerca del planeamiento y la creación de
páginas Web.
Internet: simplemente un montón
de hardware
Para simplificar, Internet, o la gran red, es hardware: muchísimos dispositivos
Jerga: los enrutadores
son componentes de de hardware interconectados para crear una red enorme en todo en mundo.
retransmisión entre redes. El hardware de Internet abarca todos los componentes que una persona puede
tocar físicamente, como son equipos, enrutadores, cables, líneas de teléfono,
circuitos de datos de alta velocidad y otros dispositivos físicos de red.

13. 13
Por ahora, eso es en realidad todo lo que precisa saber acerca de Internet: es
hardware. No hay necesidad de agasajarle con una larga diatriba acerca de
cómo la paranoia de la guerra fría del gobierno de Estados Unidos incitó el
desarrollo de una red informática descentralizada. Si siente curiosidad por la
historia de Internet, puede encontrar información en línea y en las bibliotecas o
librerías de su barrio. (Además, vea la sección de recursos en
www.creationguide.com/resources, (en inglés), para consultar algunos vínculos
útiles.) Ahora que hemos identificado con claridad que Internet es el hardware,
vamos a dar el siguiente paso lógico. Como todo el hardware informático
(piense en su equipo portátil o de escritorio), Internet necesita software o, de lo
contrario, sus componentes de hardware simplemente estarían ahí acumulando
polvo (en su mayor parte), de forma globalizada. Entre en el World Wide Web.
El Web: software para el hardware
El World Wide Web (también conocido como WWW o, simplemente, “el
Jerga: el Web consta
de software que permite Web”) es un poco más esotérico que Internet. Esto es así porque consta de
compartir la información software (como son programas, documentos y archivos) que permite a la
de Internet. información viajar a través del hardware de Internet. Como ayuda para ilustrar
la función del Web en relación a Internet, a continuación relatamos una breve
historia que contamos por primera vez hace algunos años al explicar la función
del Web a neófitos en Internet:
Hace mucho tiempo (cuando los insectos y los arácnidos podían hablar),
había una araña de intelecto inusualmente brillante llamada Tim. Tras
ver a las hormigas trabajar todo el día, Tim se reunió con la hormiga jefe
por entonces, Bill. Las hormigas, como es habitual, demostraban una
increíble destreza acumulando y almacenando comida, pero Tim pensó
que las arañas podían asociarse con ellas con el fin de hacer la vida más
fácil para ambas. Tim se dirigió a Bill con este plan, quien vio cierta
lógica en él. De hecho, sugirió que incorporaran a otras criaturas en el
equipo también. Pronto, Tim y Bill reclutaron a los saltamontes, a las
moscas y a las lombrices para que se asociaran en la empresa de
conseguir comida. Las criaturas pensaron que aquélla era una idea
espléndida, así que se reunieron y crearon un elaborado laberinto de
hormigueros, telas de araña, madrigueras y túneles para servirles de
ayuda en la empresa. El sistema ya estaba implantado y parecía perfecto.
Era el momento de empezar a trabajar. Pero, con gran decepción para las
criaturas, surgió el caos. Incluso aunque todos los caminos y conexiones
estaban ahí, las moscas lo pasaban muy mal explorando los túneles, los
saltamontes tenían dificultad para permanecer en los hilos, las lombrices
eran simplemente demasiado pesadas para andar sobre las telas de araña
y, por supuesto, las expectativas de las hormigas eran mucho mayores
que las del resto de los grupos. Lo que las criaturas tenían era una red.
Lo que precisaban era algo o alguien que pudiera atravesar todos los
medios de la red de una forma segura. Necesitaban una criatura
universal.

14. 14
Esta corta historia proporciona una buena analogía de la relación entre Internet
Jerga: los servidores son
equipos vinculados en red y el Web. Como comentamos anteriormente en esta lección, Internet es la
de alta capacidad que infraestructura para transmitir información: una infraestructura formada por
almacenan archivos y equipos, enrutadores, cables, líneas de teléfono, circuitos de datos de alta
responden a las solicitudes
de los usuarios que
velocidad y bases de información denominadas servidores (a modo de
pretenden ver y tener acceso hormigueros, telas de araña y túneles). Por desgracia, al igual que las telas
a ellos. Un protocolo es un de araña no pueden soportar el peso de las lombrices, no todos los equipos
conjunto de reglas que
informáticos pueden admitir todos los formatos de archivo. Incluir cada uno de
describe cómo se deben
transmitir los datos. los métodos disponibles (o protocolos) para comprender los diversos formatos
El Web usa el Protocolo de de documentos de todos los equipos sería poco práctico. Así, la comunidad de
transferencia de hipertexto Internet ideó su propia criatura universal, conocida más comúnmente como el
(HTTP) para transmitir
documentos de Lenguaje World Wide Web.
de marcado de hipertexto
(HTML).
En sus inicios, Tim Berners-Lee concibió y desarrolló el Web en el laboratorio
CERN de Suiza para la comunidad de físicos de altas energías. (Por cierto,
aunque se considera que el intelecto de Tim es extremadamente avanzado,
¡no es una araña!) El Web atrajo rápidamente mucha atención y se extendió
más allá del ámbito de la física. Al igual que con la historia de Internet, puede
encontrar montones de información acerca de la historia del Web en línea
y en numerosos libros de informática.
Para nuestros propósitos, sólo necesita saber que Internet es el hardware y
el Web es el software. Bastante sencillo. Ahora, estamos listos para pasar al
siguiente nivel: los archivos que el software del Web admite en el hardware
de Internet.
Páginas Web: unos cuantos archivos
en la gran red
Ahora nos encontramos cara a cara con el meollo del asunto: las páginas Web.
Básicamente, una vez que se destripa todo el pomposo balbuceo tecnológico,
las páginas Web son archivos. Para ser más concretos, las páginas Web son
archivos HTML. No tiene que poner en blanco los ojos ante la visión de
“HTML”; en la lección 6, desvelamos sus misterios. En este momento, todo
lo que necesita saber es que las páginas Web son simplemente archivos que el
Web admite, igual que los archivos de documentos (.doc) son los archivos que
admite Microsoft Word.
Puesto que las páginas Web son archivos, no tiene que llevar su imaginación
demasiado lejos para darse cuenta de que crear una página Web es,
simplemente, el acto de crear un tipo específico de archivo en un equipo.
Documentos de Word, hojas de cálculo, bases de datos, páginas Web: todos son
tipos de archivos. Claramente, puede ver que las páginas Web no son entidades
misteriosas. No pueden abrumarle. Son archivos informáticos y ya ha trabajado
con ellos en numerosas ocasiones.

15. 15
Así que no deje que le intimiden. Por supuesto, esto no es lo mismo que afirmar
que las páginas Web no tengan algunas idiosincrasias que las diferencien de
Jerga: un sitio Web es una otros archivos. Por ejemplo, siempre incorporan varios archivos e
colección de páginas Web
relacionadas, que suelen
hipervínculos, y se suelen reunir en grupos llamados sitios Web.
incluir una página principal
y subpáginas. La naturaleza “multiarchivo” de las páginas Web
Hemos dicho que las páginas Web son simplemente archivos y lo reafirmamos.
Pero debemos aportar un poco más de claridad en relación a los tipos de
archivos a los que nos referimos. Mientras lee el siguiente par de párrafos,
podría pensar que estamos proporcionando demasiada información en este
punto, pero en realidad no es así. Debería tener al menos una idea (no
necesariamente un conocimiento consolidado, aún) de los componentes e
interacciones de las páginas Web antes de avanzar demasiado. Hecha la
rectificación, sigamos con la información.
Jerga: un documento de En primer lugar, en el nivel más básico, cada página Web es un documento de
texto es un archivo que texto. Un documento de texto es un archivo que contiene palabras, letras y
contiene palabras, letras y
números sin ningún formato.
números sin ningún formato. Por ejemplo, al abrir el Bloc de notas o WordPad
en Microsoft Windows (haga clic en Inicio, seleccione Programas o Todos los
programas, haga clic en Accesorios y, después, seleccione Bloc de notas o
WordPad) y escribir su nombre, una frase pegadiza, varias letras, algunos
números o cualquier cosa, en realidad está creando un documento de texto (no
una página Web, cuidado, simplemente un documento de texto). La figura 1-1
muestra un ejemplo sencillo de documento de texto abierto en el Bloc de notas.
Figura 1-1.
Un documento de texto contiene solo eso: ¡texto!

16. 16
Para convertir el documento de texto en una posible página Web, basta con
agregar comandos HTML específicos, según se muestra en la figura 1-2.
Figura 1-2.
Este documento de texto contiene comandos HTML básicos junto con algo de
texto y una línea de texto en el cuerpo de la página.
Páginas Web y exploradores
Para ver páginas Web, se usa un explorador (como Microsoft Internet Explorer).
En la mayor parte de los casos, en el equipo local (donde está trabajando) hay
una aplicación de este tipo. Puede eliminar, instalar, actualizar y personalizar el
explorador igual que elimina, instala, actualiza y personaliza otras aplicaciones
de software (incluidos los programas de Microsoft Office, como Word y
Microsoft Excel). Ocasionalmente, surge una ligera confusión en relación al lugar
finaliza Internet y dónde comienza el equipo. La clarificación se vislumbra
fácilmente: cuando vea una página Web en el explorador, las barras de
herramientas, las barras de menú y demás elementos alrededor de una página
Web son parte del explorador, que reside en el equipo; el contenido que se
muestra dentro de la ventana principal del explorador refleja el contenido de
Internet.
Una vez agregados los comandos HTML, guarda el documento de texto con la
extensión .html o .htm en lugar de las extensiones .txt o .doc. (No se preocupe
por los detalles ahora.) Entonces, puede abrir el documento en un programa
explorador, como Internet Explorer.

17. 17
La figura 1-3 muestra la forma en que el documento de texto con los comandos
HTML mostrado en la figura 1-2 aparece en un explorador. Observe que en la
figura 1-3 sólo aparece el texto del cuerpo y el de la barra de título, y no los
comandos HTML. Ello se debe a que éstos simplemente proporcionan
instrucciones a los exploradores en relación a cómo mostrar la información y no
a qué se debe mostrar.
Figura 1-3.
Puede ver en un explorador un documento de texto básico con comandos
configurado correctamente.
No se preocupe si esta explicación de HTML parece un poco vaga en este
momento. Le guiaremos en el proceso de creación de un sitio Web con HTML
en el Bloc de notas o en WordPad posteriormente, en la lección 6. Verá entonces
que HTML resulta bastante nítido si avanza paso a paso. (Y, si desea algo más de
inspiración, en otras lecciones averiguará que puede crear páginas Web sin saber
nada de HTML.) En este momento, lo que necesita principalmente es reconocer
la premisa básica: las páginas Web son documentos de texto.
Podría haber notado que aquí parece surgir una paradoja porque hemos
afirmado categóricamente que las páginas Web son documentos de texto. Y,
si lo son ¿por qué está el Web desbordado de gráficos? Por suerte, en el Web
puede usar los documentos de texto HTML junto con tipos concretos de
archivos de gráficos. Más concretamente, el Web admite los archivos de
gráficos con las extensiones .gif, .jpeg y .png, pero vamos a ahorrarnos la
explicación de los formatos de archivos gráficos para la lección 3.
Aquí tiene un adelanto. Para mostrar un gráfico en una página Web, un
documento HTML (de texto) incluye comandos que indican al explorador
dónde encontrar un gráfico en particular y cómo mostrarlo en la página
(incluyendo la posición, el tamaño y demás). Por lo tanto, queda desvelada la
naturaleza “multiarchivo” de las páginas Web. Generalmente, cuando mira una
página Web en línea, está viendo unos cuantos archivos: un archivo HTML
(de texto) y algunos archivos gráficos.

18. 18
¡Pruébelo!
Puede ver por sí mismo cómo funciona HTML. En primer lugar, asegúrese de
que Windows está configurado para mostrar extensiones de archivo:
1 Abra el Panel de control (en Windows XP, elija Panel de control
en el menú Inicio; en versiones anteriores de Windows, haga clic
en Inicio, seleccione Configuración y, después, haga clic en Panel
de control).
2 En el Panel de control, haga doble clic en Opciones de carpeta y,
después, haga clic en la ficha Ver.
3 Desactive la casilla de verificación Ocultar las extensiones de
archivo para tipos de archivo conocidos y, después, haga clic
en Aceptar.
Una vez configurado Windows para mostrar las extensiones de archivo,
escriba en un documento del Bloc de notas el texto HTML que se muestra en
la figura 1-2. Seleccione Documento de texto en el cuadro Tipo, para guardar
el documento del Bloc de notas en el escritorio (así, podrá eliminarlo con
facilidad posteriormente) como archivo de texto (.txt), y cierre el Bloc de notas.
A continuación, muestre el escritorio, haga clic con el botón secundario del
mouse en el archivo recién creado y seleccione Cambiar nombre. Reemplace la
extensión .txt por .html. Cuando en el sistema Windows se muestra un cuadro
de mensaje en el que se pregunta si realmente desea cambiar el tipo de archivo
(y se le advierte de sus potenciales “peligros”), haga clic en Sí; no está
causando ningún estrago en este caso.
Ahora, ya puede ver el documento en el explorador. Para ello, puede:
■ Hacer doble clic en el archivo HTML recién creado.
■ Abrir el explorador y arrastrar el icono del archivo HTML a la
ventana del explorador.
■ Abrir el explorador y escribir la ruta de acceso del archivo HTML en
la barra de direcciones.
Tenga en cuenta que, cuando cambie un archivo TXT por un tipo de archivo
HTML, tendrá que abrir el documento desde dentro del Bloc de notas si desea
modificar el texto.
Para ilustrar el concepto de “multiarchivo”, eche un vistazo a la versión pasada
de la página principal de Arizona Film Society en la figura 1-4. Como puede
ver, consta de tres archivos: un documento HTML (index.html) y dos archivos
de gráficos (afs_title.gif y 4members.jpg). La figura 1-5 representa una vista de
carpeta de Windows de los archivos usados para crear la página principal
ilustrada en la figura 1-4. (Observe que la carpeta de Windows contiene los
mismos archivos de gráficos y HTML.)

19. 19
Nota
Como probablemente sabrá, una de las principales atracciones del Web
es su naturaleza dinámica. Muchas páginas Web se actualizan y modifican
con frecuencia. Para complementar nuestra explicación, hemos congelado
una copia de una de las páginas principales antiguas de Arizona Film
Society en el sitio www.creationguide.com/afs (en inglés). Para ver el
flujo de páginas Web en acción, visite la página Web actual en el sitio
www.azfilmsociety.com y observe que se ha modificado. (De hecho, ha
sufrido varias modificaciones desde que congelamos la página principal
de ejemplo para esta lección.)
Un poco más de HTML
El texto y los comandos HTML usados para crear una página Web se conocen
en conjunto como su código fuente. (El código fuente hace referencia al texto y
a los comandos HTML usados para crear una página Web.) La mayor parte de
los exploradores permiten mostrarlo. Por ejemplo, para mostrar código fuente
con Internet Explorer, debe elegir Código fuente en el menú Ver, como se
muestra a continuación:

20. 20
Figura 1-4.
Un archivo de texto HTML y dos archivos gráficos se combinan para crear
la página principal de Arizona Film Society (www.creationguide.com/afs)
(en inglés).
Figura 1-5.
La vista de las carpetas de la página principal de Arizona Film Society
muestra que se combinan tres archivos para mostrar la página en línea.

21. 21
Cuando haya examinado las figuras 1-4 y 1-5, estará preparado para asimilar
otro concepto “básico”. Fundamentalmente, debe concluir esta explicación con
la información siguiente: Cuando observa una página Web en un explorador de
Internet, normalmente está viendo varios archivos que se combinan para crear
una única página.
Habiendo puesto a buen recaudo la idea de que una página Web consta de
varios archivos, ahora debe considerar de forma consciente que una página
Web no sólo es un tipo de comunicado, como un panfleto de los que le dejan en
el parabrisas. Por el contrario, una página Web siempre usa hipervínculos para
vincularse a otras.
Hipervínculos y sitios Web
Tal como afirmamos al principio de esta lección, suponemos que si desea crear
una página Web es porque ha explorado el Web. Por lo tanto, es muy probable
Jerga: los hipervínculos
que haya hecho clic en numerosos hipervínculos. Como seguramente sabrá, los
son texto o gráficos donde hipervínculos son texto o gráficos donde puede hacer clic y que permiten tener
se puede hacer clic para acceso a recursos de Internet y páginas Web adicionales. En un lenguaje más
tener acceso a recursos
técnico, los hipervínculos son elementos que se incluyen en documentos
adicionales en Internet, como
otra ubicación en la página HTML y que señalan a otras páginas Web o documentos de Internet (de forma
Web actual, otra página Web similar a cómo los comandos HTML señalan a los archivos de gráficos) o a
u otro archivo que descargar. otras áreas de la misma página. En la figura 1-6 se ilustra el modo en que un
par de hipervínculos de la página principal de Arizona Film Society señalan a
otras páginas Web. Al hacer clic en un hipervínculo, se muestra otra área de la
página actual o de otra página Web, que puede ser cualquiera de Internet (y no
sólo una que usted haya creado), ubicada en cualquier parte del mundo.
Como desarrollador de páginas Web, el uso de hipervínculos lleva de forma
natural hacia la utilización de varias páginas Web. En general, normalmente
preferirá no colocar toda su información en una única página principal grande y
larga. En su lugar, es probable que desee crear una serie de páginas Web más
pequeñas que se relacionen y vinculen entre sí. Esta colección de páginas Web
relacionadas conforma un sitio Web.

22. 22
Figura 1-6.
Los hipervínculos llevan a quien está viendo la página Web a otras páginas
Web, otras áreas de la misma página u otros recursos de Internet.
De su cabeza al Web
(y de vuelta otra vez)
En este punto de la lección, todos los componentes están sobre la mesa:
Internet, el Web, exploradores, páginas Web, hipervínculos y sitios Web. Esta
enumeración de componentes es un buen comienzo, pero nos enfrentamos al
pequeño detalle de cómo un archivo de texto y unos archivos gráficos que ha
creado en su equipo se convierten en una página Web en Internet. Antes de
que nos adentremos demasiado hondo en los entresijos de la transferencia de
páginas Web, vamos a desenmascarar un mito sorprendentemente popular: las
personas que ven sus páginas Web tienen acceso a su equipo de escritorio. La
afirmación anterior no es verdad. Podemos asegurarle que las páginas Web no
se almacenan en los equipos personales, sino en servidores.

23. 23
La naturaleza cliente-servidor del Web
Los servidores son, simplemente, equipos extremadamente eficientes que
almacenan los archivos de Internet y ejecutan software especial diseñado para
responder a las solicitudes de los clientes. Por supuesto, ahora hemos
introducido el término cliente. Vamos a detener esta aproximación indirecta y
nos dedicaremos un momento a explicar esta jerga.
Básicamente, los archivos Web se transmiten usando lo que se conoce como
modelo cliente-servidor. En el modelo cliente-servidor, un sistema (el servidor)
conectado a una red atiende la solicitud de otro sistema (el cliente). En lo que
respecta al diseño Web, un cliente es un nombre imaginativo para un
explorador (como Internet Explorer) que se ejecuta en el equipo de un usuario y
un servidor es la combinación de un equipo muy eficaz que almacena las
páginas Web y el software que responde a las solicitudes para mostrar estas
páginas Web almacenadas en él. Por lo tanto, cuando tiene acceso a una página
Web, tiene lugar el proceso siguiente:
Jerga: URL son las siglas de
1 Conecta su equipo a Internet y abre el explorador. A continuación,
Uniform Resource Locator. especifica una dirección Web (URL) en la barra de direcciones y
Una dirección URL hace presiona Entrar, o hace clic en un hipervínculo de la página de
referencia a una dirección inicio del explorador.
de Internet que indica al
explorador Web donde mirar 2 El cliente (su explorador) envía la dirección URL escrita o la
en Internet para encontrar
dirección URL asociada con un hipervínculo a través de las líneas
una página Web específica.
de teléfono, los cables o, quizás, los enrutadores a su proveedor
de servicios Internet (ISP, Internet Service Provider). El ISP es la
compañía a la que paga para que le proporcione acceso a Internet.
3 El ISP envía entonces su solicitud de dirección URL en Internet a
través de más cables, enrutadores y otros circuitos de datos de
alta velocidad al sistema (el servidor) que mantiene la página Web
solicitada.
4 El servidor envía la información de la página Web a través de
Internet al ISP y, finalmente, éste la reenvía a su equipo.
Tenga en cuenta que esta
Desde la perspectiva de un desarrollador de páginas Web, una vez creada una,
lección presenta una debe copiar sus archivos al servidor que la alojará, de forma similar a como se
explicación simplificada copia un archivo del disco duro a un disquete, excepto por una diferencia: los
(aunque precisa) del proceso
de recuperación básico de
archivos de la página Web se copian a través de los hilos de Internet, como se
páginas Web. describe posteriormente en este libro, en la lección 8. Mediante las aplicaciones
actuales del Protocolo de transferencia de archivos (FTP, File Transfer
Protocol), las carpetas Web (y Mis sitios de red) o los asistentes para
publicación en Web, el proceso de copia de los archivos de páginas Web a un
servidor puede ser tan sencillo como arrastrarlos desde su carpeta local a una
carpeta del servidor que esté usando para alojar su sitio Web. Por lo tanto,
cuando otras personas ven su página Web publicada, están teniendo acceso al
servidor que almacena las copias de los archivos y no a su equipo.

24. 24
Con esto concluye nuestro repaso de conceptos básicos. En este momento, está
preparado para seguir avanzando en el diseño y la implementación de páginas
Web, como se describe en las siguientes páginas de este libro. Pero antes de
terminar esta lección, nos gustaría informarle de lo que va a encontrar en las
siguientes lecciones.
Avanzando a un ritmo regular
Como podría sospechar, una gran parte del trabajo de creación de una página
Web la constituye el planeamiento de la misma (y del sitio Web) antes de
sentarse ante su equipo. Tiene que emplear al menos algo de tiempo en pensar en
el contenido, tanto el texto como los gráficos, y además de en idear el diseño de
la página. Aunque el diseño de páginas Web es un proceso creativo, no es una
magia negra desprovista de estructura. En el curso de este libro, vamos repasando
unos cuantos principios básicos que ayudarán a hacer el proceso de creación de
páginas Web más sencillo. Nuestra pericia se deriva no sólo de nuestros propios
años de experiencia en la red sino también de los numerosos estudios de
utilización que muchos otros diseñadores, ingenieros y especialistas de la
información han realizado. Con estos recursos, hemos sacado algunas
conclusiones básicas acerca del texto, los gráficos y los colores que se usan en el
Web y que hemos probado en la práctica. Por lo tanto, las lecciones 2 a 5 tratan
de la información que debería conocer acerca del diseño de páginas Web,
incluidas cuestiones relacionadas con el texto, los gráficos, los colores,
programas útiles y planeamiento de páginas Web. Encontrará las siguientes
lecciones repletas de información importante relativa a la creación de páginas
Web; si la utiliza bien, sus futuros trabajos de diseño Web serán más fructíferos.
Por lo tanto, le recomendamos encarecidamente que lea las lecciones 2 a 5 antes
de sumergirse en las lecciones 6 a 8, o que al menos las ojee.
Para finalizar, con independencia de la forma en que desmigaje este libro y
emprenda su trabajo en el Web, cuando todo esté dicho y hecho, recuerde
repasar la lección 8. La lección 8 describe cómo “pasar al mundo real” sus
páginas Web (si utiliza algún método de publicación de páginas Web que no
sea MSN u otro servicio de alojamiento gratuito).
Con todo, cuando complete estas lecciones, habrá dominado los fundamentos
de la creación de páginas Web de diversas formas. Ya no se encogerá cuando
oiga expresiones como HTML y nombre de dominio, y sus conocimientos le
servirán como una sólida base que podrá utilizar para crear una amplia variedad
de páginas Web más avanzadas.

25. 25
Puntos clave
■ Internet es el hardware.
■ El Web es el software (que incluye programas y documentos).
■ Los exploradores son aplicaciones que permiten ver páginas Web.
■ Las páginas Web más básicas constan de varios archivos: un
archivo HTML (de texto) y archivos gráficos.
■ Un sitio Web es un grupo de páginas Web relacionadas.
■ Los hipervínculos proporcionan acceso a otras páginas Web, otras
áreas de la misma página u otros recursos de Internet.
■ Internet usa el modelo cliente-servidor, en el que un servidor
responde a las solicitudes de información de los clientes.
■ Los usuarios de Internet tienen acceso a las páginas Web que se
almacenan en servidores.
■ Si puede utilizar un equipo, ¡puede crear una página Web!

26. 26
LECCIÓN 2
Creación y forma del
texto para el Web
Una vez completada esta lección, podrá:
 Describir lo que hace que una página Web sea “fácilmente ojeable”.
 Identificar los elementos de texto claves de una página Web.
 Crear texto para el Web que sea claro, conciso y legible.
 Elegir varias técnicas para usar la tipografía como un elemento
de diseño.
Cuando las personas contemplan la creación de páginas Web, normalmente
piensan en el diseño primero; es decir, en cómo se verá la página en lugar de lo
que debería decir. Y eso es comprensible y también deseable. De hecho, una
parte de este libro está dedicado al diseño de páginas Web. Pero, en el corazón de
cada página Web, se encuentra el contenido. Después de todo, la mayor parte de
la gente crea páginas Web porque tiene un mensaje que desea compartir, incluso
si simplemente proclama: “¡Mirad lo que he estado haciendo últimamente!”.
Para ser un éxito, una página Web debe proporcionar información que capte
rápidamente la atención de quien la observa o, de lo contrario, no siga
mirándola más de un par de segundos y probablemente no vuelva al sitio donde
se encuentra. Por lo tanto, debería empezar por pensar en el contenido de su
página Web antes de llegar demasiado lejos en su diseño.
Si sigue leyendo este texto, estará en camino de conseguir que el contenido de
sus páginas Web tenga una estructura y corrección admirables al final de la
lección. Pero, incluso si no llega tan lejos en la creación de contenido para un
sitio Web en particular, podrá identificar y crear buenos textos para el Web en
general. Además, sabrá cómo puede sacar el máximo provecho del texto de las
páginas Web que cree en el futuro. Con estos conocimientos en mente, podrá
combinar el contenido y el diseño con facilidad cuando empiece a crear sus
páginas Web.
Ahora, volvamos al tema que nos ocupa: el texto en línea. Razonablemente,
podría estar pensando que es bastante capaz de usar las palabras, así que en
realidad no necesita leer acerca de los textos de páginas Web. Pero tenga la
seguridad de que, incluso si su ocupación es la de escritor, puede aprovechar
las sugerencias de esta lección. Aunque un buen texto en línea tiene mucho
en común con uno impreso de similar calidad, también se diferencia de éste en
diversas formas. Verá, a medida que avance en esta lección, que la creación
de texto efectivo en línea implica el dominio y combinación de las artes de la
claridad, la mercadotecnia, el atractivo visual, las limitaciones de la tecnología
y un ápice de la psicología del lector.

27. 27
Aproximación de los lectores a las
páginas en línea
El primer concepto que necesita abordar es que los lectores responden a las
páginas Web de forma diferente a como reaccionan ante las páginas impresas.
En los primeros estudios sobre esta materia, los entendidos en el Web
encontraron que en leer un bloque de texto en línea se tardaba aproximadamente
un 25 por ciento más que en leer el mismo texto en una página impresa. En otras
palabras, en la cantidad de tiempo que emplea leyendo 75 palabras en línea,
podría leer 100 si estuvieran en un libro. Los expertos de ahora debaten sobre si
la velocidad de lectura en línea ha aumentado debido a la mejora en los
monitores, al uso del color o a la familiaridad cada vez más generalizada con este
tipo de textos. Sin reparar en los porcentajes exactos, la mayoría de expertos
coincide en que la velocidad de lectura de las personas se reduce
significativamente cuando leen texto en línea, en comparación con la lectura en
papel, incluso aunque se está produciendo una mejora en muchos casos. Una de
las formas de adaptación desarrolladas para conseguir superar la lentitud de la
lectura de texto en línea es que ahora las personas suelen ojear el texto en lugar
de leer cada palabra que se muestra en el monitor.
Como promedio, la mayor Básicamente, un usuario ojea una página Web para encontrar un elemento de
parte de los visitantes de una interés que le anime a hacer clic en un vínculo o a copiar el contenido y leerlo
página Web determinan en con más detenimiento. Si una página Web no atrae a un usuario con rapidez (en
10 segundos si contiene la
información que desean o
los siguientes 10 segundos, según la mayoría de estudios de uso, probablemente
necesitan. Si parece que se irá a otra página (o a otro sitio). La creación de páginas que se pueden ojear
satisface sus necesidades, la con facilidad también incrementa la credibilidad de la página Web, al tiempo
mayor parte siguen viéndola
que aumentan sus posibilidades de clasificarse antes en los motores de
menos de 30 segundos.
búsqueda, ya que sus ideas principales son más fáciles de identificar. Por lo
tanto, siempre que cree contenido para una página Web, tenga este concepto al
frente de sus procesos mentales. En esta lección, describimos diversos métodos
que puede emplear para mejorar la facilidad con que se pueden ojear sus
páginas Web.

28. 28
Para ilustrar el concepto de ojear, compare las figuras 2-1 y 2-2. La figura 2-1
muestra una página Web que no observa las prácticas recomendadas para la
creación de buen texto en línea, mientras que la figura 2-2 sigue el consejo
comentado en esta lección. Observe la mayor rapidez con la que puede
identificar los puntos principales del texto en la figura 2-2 en relación a la
figura 2-1. A continuación se explica el porqué y se ofrecen indicaciones que
puede tener en cuenta al crear su propio texto en línea.
Figura 2-1.
Una presentación ineficaz de texto en un página Web puede desviar la atención
de los lectores antes de que lean una palabra del contenido.

29. 29
Figura 2-2.
Una presentación efectiva del texto de una página Web hace posible que se
ojee con más rapidez, con lo que los lectores pueden encontrar la información
que precisan más fácilmente.
Ahora que hemos expuesto un caso para hacerle pensar en su texto y reconocer
cómo se aproximan los clientes a las páginas Web, vamos a echar un breve
vistazo a las funciones fundamentales que desempeña el texto en una página
Web. A continuación, discutiremos los detalles relativos a la forma y eficacia
del texto en línea.

30. 30
Elementos de texto de una página Web
La mayor parte de las páginas Web usan diversos componentes de texto, según
se ilustra en la figura 2-3. Como puede observar en la figura, además de en
muchas páginas Web, en ellas aparecen los elementos de texto descritos en las
subsecciones siguientes.
Figura 2-3.
Las páginas Web efectivas contienen diversos elementos de texto comunes.

31. 31
Barra de título
Cuando crea una página Web, crea el texto que aparece en la barra de título de
la ventana de un explorador. La clave para el título es que sea conciso, claro y
útil. Tenga en cuenta que, al abrir una página Web, el texto del título de la
misma también aparece en la barra de tareas de Microsoft Windows. La barra
de tareas simplifica el trabajo de un usuario cuando pasa de una ventana abierta
a otra. Por lo tanto, aunque puede incluir texto inteligente o ingenioso si lo
desea, en general debe inclinarse en cambio hacia el uso de texto útil y claro.
Observe los textos de las barras de título poco convincente y útil,
respectivamente, que se muestran en las figuras 2-1 y 2-2.
Sugerencia
Para aumentar la claridad (especialmente en los botones de la barra de
tareas), omita los artículos iniciales (el, un, una) en el texto de la barra
de título de una página Web. El uso de títulos conocidos y descriptivos
contribuye a que las páginas destaquen en el área de trabajo de los
usuarios además de en los resultados de los motores de búsqueda que
organizan las páginas Web por el título.
Contenido
El contenido de una página Web hace referencia a su sustancia: la razón por la
que la gente visita el sitio. Como se describe en las secciones siguientes, el
contenido de una página Web debe ser claro, breve, fácil de ojear, informativo,
oportuno y gramaticalmente correcto (además de tener otras cualidades). Tenga
en cuenta que no importa lo bonito que sea un sitio Web, la característica más
atractiva de Internet es el texto. Después de todo, además de visitar los sitios
Web, unos cuantos cientos de millones de personas confían regularmente en el
texto en línea para enviar mensajes de correo electrónico, charlar con
mensajería instantánea y exponer sus opiniones en grupos de discusión.
Sugerencia
Una forma de obtener el contenido de sus páginas Web es aprovecharse
de los proveedores de contenido Web. Algunas agencias nuevas, centros
de multimedia, grupos de intereses especiales, empresas privadas y otros
especialistas de la información ofrecen contenido Web a los sitios Web de
forma regular, generalmente a cambio de unos honorarios. Para buscar
un proveedor de contenido, visite el motor de búsqueda que prefiera
(a nosotros nos gusta www.google.es) y busque proveedores de contenido
Web.

32. 32
Hipervínculos
Observe que usamos Los hipervínculos proporcionan forma y claridad a un grupo de páginas Web
las palabras vínculo e (o a una página Web larga) al vincular la página principal, y las auxiliares, a
hipervínculo indistintamente. áreas que contienen información específica relacionada. En otras palabras, los
hipervínculos le ayudan a organizar su información y permiten que los demás
tengan acceso a ella con rapidez y facilidad. Los hipervínculos de texto deben
ser claros y coherentes, además de estar colocados de forma apropiada, como se
explica posteriormente en esta lección.
Logotipos, texto gráfico y WordArt
Jerga: texto gráfico es un Puede usar logotipos, texto gráfico y WordArt para aportar una apariencia
término general que hace profesional a sus páginas Web. Como se explica en la lección 3, puede usar
referencia al texto que se
usa para crear elementos
texto gráfico para conferir una apariencia y funcionamiento coherentes a un
gráficos en las páginas Web, grupo de páginas Web relacionadas. Hacer que todos los componentes de un
por ejemplo, botones, sitio Web aparezcan interrelacionados indica claramente a los usuarios que
pancartas o títulos
estilizados. WordArt es una siguen dentro del territorio de su sitio Web incluso aunque hagan clic de una
característica de Microsoft página a otra. Además, los logotipos, el texto gráfico y WordArt se usan con
Word que permite crear
gráficos basados en texto
frecuencia para proporcionar un vínculo gráfico afín a la página principal de un
estilizado, como sitio. Puede que haya descubierto mientras explora el Web que, por lo general,
encabezados y logotipos. puede hacer clic en el logotipo de una compañía para volver a la página
Por ejemplo, en las figuras
2-1 y 2-2, hemos creado el principal del sitio. (Si aún no ha descubierto este secreto, debería probarlo
logotipo “Ant! Online” con la durante su próxima sesión en el Web.) Siempre que sea posible, aproveche esta
característica WordArt de
Word y, en la figura 2-3, práctica y vincule su logotipo con la página principal en todo el sitio Web.
el texto gráfico “Sign Up
Today!” es un elemento Opciones de exploración con texto
de WordArt.
Muchos diseñadores Web optan por dar formato a los elementos de exploración
(botones) y a la barra de menús sólo como gráficos (en la figura 2-3, los
botones del área superior izquierda actúan esencialmente como barra de
exploración de la página principal). El uso de elementos gráficos de
exploración es acertado, pero le recomendamos que también muestre sus
hipervínculos de exploración como texto simple conjuntamente con sus
elementos gráficos. Si el diseño de su página Web usa una barra de menús o
botones gráficos, puede evitar desbaratarlo si muestra hipervínculos de texto
en la parte interior de la pantalla. Ofrecer una alternativa a los vínculos basados
en gráficos resulta útil porque algunas personas desactivan las capacidades
gráficas del explorador para acelerar la descarga de páginas Web. Si no
proporciona componentes de exploración basados en texto, algunos usuarios
podrían no descubrir cómo llegar a las páginas secundarias de su sitio.
Sugerencia
Como sugerencia suplementaria, la adición de vínculos de exploración
basados en texto al final de las páginas Web ayuda a los usuarios a ir a
otras páginas del mismo sitio Web sin tener que desplazarse al principio de

33. 33
la página actual para tener acceso a los vínculos principales de
exploración.

34. 34
Información de fecha o de última modificación
Generalmente, debe incluir un elemento de fecha en sus páginas Web. La fecha
puede ser tan sosa como una pequeña línea de texto situada cerca de la parte
inferior de la página. Sin embargo, si actualizar el contenido con regularidad es
uno de los atractivos principales de su página, puede ser aconsejable que la fecha
sea mucho más aparente y colocarla más alto, cerca del área superior izquierda,
más “selecta”. Por otro lado, si no piensa actualizar su sitio asiduamente, puede
optar por no publicar la fecha en que se modificó por última vez. (Con franqueza,
no recomendamos que prevea no actualizar su sitio pero, en ciertas
circunstancias, podría apañárselas con una página estática o dos.)
Información de copyright
Usted posee el copyright de todo el texto y los gráficos originales que crea. Por
lo tanto, para proteger su propiedad, debería agregar un aviso de copyright en
sus páginas Web. Tenga en cuenta que si usa software que sea gratuito (por
ejemplo, gráficos sin copyright que haya descargado de otro sitio Web) en la
página Web, es gratuito para todos los demás y pueden usarlo también.
Para crear © en Microsoft Cuando agrega texto de copyright, la información puede ser tan sencilla como
Word, presione Ctrl+Alt+C. © Copyright 2002 Su nombre o El nombre de su compañía. Todos los derechos
reservados. Además, la información de copyright se debe colocar cerca del
final de la página y en un tamaño de fuente que sea evidentemente menor que
el del texto del cuerpo de la página Web.
Ahora que hemos aludido a los elementos básicos de texto de las páginas Web,
ya puede dar forma al contenido y redactarlo.
Consideración del texto como
elemento de diseño
Como sabe, el texto de una página Web informa además de aportar su presencia
al diseño de conjunto de la misma. (Vea la figura 2-3.) Debe empezar a meditar
sobre las cuestiones básicas del diseño de texto mientras lo recopila. Por lo
tanto, a medida que cree su contenido y lea la lección 3, tenga en cuenta las
siguientes cuestiones relacionadas con el diseño:
■ Cree títulos y encabezados gráficos para agregar un efecto
artístico.
■ Muestre citas y barras laterales para aligerar las páginas con
mucho texto.
■ Agregue WordArt, logotipos, texto gráfico y pancartas para
proporcionar una apariencia y funcionamiento coherentes en
todo el sitio.
■ Use iconos de fácil compresión en lugar de palabras, similares a
los iconos “nuevo” y “lo último” que salpican el Web.

35. 35
■ Aplique juiciosamente el color u otro formato tipográfico (como la
negrita o la cursiva) para atraer la atención hacia las palabras y
conceptos importantes.
■ Use letras capitales o iniciales altas (las primeras letras de mayor
tamaño en un párrafo) para indicar el principio de una sección.
■ Asegúrese de que los fondos no interfieren con la legibilidad
del texto.
■ Incluya los datos importantes (como la información de contacto,
el nombre de su compañía, etcétera) como texto, incluso si la
información aparece en forma de gráfico en algún otro lugar de la
página. Algunas personas desactivan la presentación de gráficos
para acelerar la exploración, lo que significa que pierden la
información gráfica de la página.
■ Evite la letra pequeñita; si duda, deje que los usuarios definan el
tamaño de texto con la configuración predeterminada de su
explorador.
■ Use fuentes admitidas en la mayor parte de las plataformas y que
sean fáciles de leer. Actualmente, las fuentes más compatibles con
los equipos Apple Macintosh y los basados en Windows son Arial,
Arial Narrow, Comic Sans, Courier New, Times New Roman y
Verdana.
Finalmente, como sugerencia de despedida sobre el texto después de todo lo
dicho en esta lección en relación a lo que debe y no debe hacerse, nos gustaría
sugerir que se divierta con el contenido de su página Web. El Web le concede
la libertad de comunicar la información de manera rápida y creativa en formas
nuevas. Piense lo que desea decir con exactitud y escriba entonces su mensaje
tan clara y enérgicamente como sea posible. Una vez que comience a escribir
frases concisas y directas, estará bien encaminado.
Puntos clave
■ Los usuarios ojean las páginas Web en lugar de leerlas
linealmente.
■ Los títulos, contenido, hipervínculos, logotipos, creaciones de
WordArt, elementos gráficos de texto, formatos, menús, opciones
de exploración, fechas de modificación de la página e información de
copyright representan los usos típicos del texto de una página Web.
■ El texto de una página Web atrae la atención de los usuarios antes
que los gráficos.
■ La información de las páginas Web debe imitar aproximadamente
la tradicional pirámide invertida de la metodología de redacción
de noticias.

36. 36
■ Busque ideas para clarificar los puntos principales, encabezados y
vínculos de su página Web.
■ Escriba frases precisas y directas, y párrafos estructuralmente
correctos y concisos.
■ Haga que los encabezados e hipervínculos sean claros y
descriptivos.
■ Use listas con viñetas y una jerarquía de encabezados para ayudar
a los lectores a identificar con rapidez los puntos clave.
■ Incluya la información importante en forma de texto para que
puedan verla los usuarios que optan por no descargar los gráficos
del Web.
■ Corrija, corrija y vuelva a corregir la ortografía (y no olvide imprimir
y leer el texto en voz alta).
■ Compruebe la gramática.
■ Empiece a pensar en los elementos de diseño del texto, incluyendo
el formato tipográfico, el color y los elementos de texto gráfico.
■ Y, lo más importante de todo, una vez que tenga en cuenta las
posibilidades y limitaciones de la redacción para el Web, deje que
la experiencia de escribir sea un proceso creativo y agradable.

37. 37
LECCIÓN 3
Creación y utilización
de arte en el Web
Una vez completada esta lección, podrá:
 Comprender los fundamentos de los gráficos Web.
 Ver y tratar gráficos Web en un programa de gráficos.
 Describir los diferentes tipos de formatos de archivos gráficos.
 Elegir colores “simplificados” para el Web.
 Recortar una imagen gráfica.
En esta lección, simplificamos el tema de los gráficos Web. En un mundo
perfecto, dedicaríamos páginas y páginas a los matices del uso de gráficos en el
Web (principalmente porque nos gustan), pero entonces nunca llegaría al resto
de las lecciones. Tampoco deseamos que se sienta abrumado cuando tenga la
oportunidad de usar gráficos Web. Como tal vez haya descubierto, puede
encontrar fácilmente una superabundancia de información acerca de gráficos
avanzados si mira en Internet o en cualquier librería. Afortunadamente, puede
usar gráficos Web de forma eficaz sin tener que sumergirse en la teoría gamma
y la rasterización. Por lo tanto, hemos optado por adoptar la solución práctica
de presentar lo que juzgamos que es la información más significativa y
fundamental acerca de los gráficos para páginas Web. Piense en esta lección
como su curso de iniciación personal en el arte Web. Cuando llegue a la
sección “Puntos clave”, al final de la lección, tendrá mucho en qué pensar, unos
cuantos trucos debajo de la manga, una o dos ocurrencias que decir en una
fiesta y varios lugares a los que acudir cuando tenga que buscar, adquirir, crear
y preparar arte para el Web.
Los archivos de ejercicios de esta lección se pueden encontrar en la subcarpeta
Lesson03 de la carpeta Web Design FundamentalsPractice, que se encuentra
en el disco duro. Los archivos usados en esta lección son: apples.jpg,
cherries_photo.jpg, cherries.gif, firebreath.gif, palette216.gif,
fruit_standard.jpg, fruit_compressed72.jpg, fruit_progressive.jpg y
fruit_progressive_compressed72,jpg.

38. 38
Mecánica de los gráficos Web
Antes de que empiece a ojear esta lección para examinar las imágenes y
desenterrar las direcciones de nuestros ejemplos en línea, tenga en cuenta que
realmente necesita leerla para asegurarse de entender unos cuantos conceptos
clave relativos a los gráficos Web. Como sabe, éstos parecen bastante similares
a los impresos pero, cuando se crean y utilizan imágenes en el Web, intervienen
varios factores específicos de este medio. En concreto, los gráficos en línea
requieren que considere las limitaciones del color y el formato y tamaño de los
archivos, además de posibles cuestiones relacionadas con la transparencia, la
descarga y la animación. Cuando tome conciencia de los tres factores
principales (colores, tipos de archivo y tamaño de archivo), podrá empezar a
usar gráficos en sus páginas Web y tener un punto de partida que le permita
iniciar un estudio más pormenorizado de los mismos. Por lo tanto, el plan de
ataque general es colocar algunos conceptos básicos de los gráficos Web en una
esquina craneana o dos antes de abrir su mente a las perspectivas más creativas
(y divertidas) de la utilización, recopilación y creación de gráficos Web.
Comencemos examinando el modo en que los gráficos muestran el color.
Píxeles, paletas y colores
Jerga: un píxel es un Antes que nada, cada gráfico en línea consta de una serie de pequeños
cuadrado de una red de cuadrados coloreados que se entremezclan para formar una imagen. En cierto
cientos de cuadrados que modo, los gráficos en línea simulan una técnica de pintura denominada
se colorea individualmente
para crear una imagen.
Puntillismo. El Puntillismo, introducido por el pintor francés Georges Seurat
(1859–1891), es el arte de crear imágenes a base de puntos (o pequeños trazos
del pincel). A través del Puntillismo, Seurat dividía cada imagen del lienzo en
pequeños puntos de colores. Cuando mira de cerca una pintura puntillista,
puede ver cada punto. A medida que se aleja de la pintura, los puntos se
combinan para crear una imagen. Los equipos informáticos muestran las
imágenes con una técnica similar al Puntillismo, excepto en que, en lugar en
puntos pintados, dividen las imágenes en cuadrados coloreados, denominados
píxeles. Por ejemplo, eche un vistazo a las cerezas de la figura 3-1. Esta figura
podría ser cualquier gráfico que se muestre en su pantalla. Como puede ver, el
gráfico parece similar a muchas otras imágenes en línea (o impresas, en este
caso) y no hay signos obvios de puntos, cuadrados ni píxeles.

39. 39
Figura 3-1.
Una par de cerezas se presentan como gráfico típico.
Ahora vamos a mirar el gráfico un poco más de cerca. En la carpeta de archivos
de ejercicios de Lesson03 de este curso, busque el archivo cherries_photo.jpg y
ábralo en una aplicación de edición de gráficos como Jasc Paint Shop Pro, Adobe
Photoshop o Microsoft Paint. Si a continuación amplía drásticamente la imagen,
podrá ver los tamaños reales (píxeles) que la conforman, según se muestra en la
figura 3-2. Si amplía las cerezas en el monitor, verá que los colores y formas de
la imagen varían de un píxel a otro, o de un cuadrado a otro.
Sugerencia
Si no tiene una aplicación de edición de gráficos en el sistema o si desea
probar una “completita” de uso generalizado, visite el sitio www.jasc.com
(en inglés) y descargue una versión gratuita de prueba de Paint Shop Pro.
Hablaremos más acerca de las aplicaciones de edición de gráficos más
adelante en esta lección.

40. 40
Figura 3-2.
Cuando amplía una imagen en línea, puede ver sus píxeles.
¡Pruébelo!
Con el archivo cherries_photo.jpg abierto en el programa de gráficos, amplíe la
imagen con la opción Zoom o Magnifying Glass (Ampliar) del programa. Para
ilustrar mejor el funcionamiento de los píxeles, decremente gradualmente la
vista de la imagen (o “aleje” la vista) hasta un tamaño más visible, según se
muestra aquí:
Si lo hace lentamente, puede ver cómo se mezclan los píxeles para crear una
imagen nítida.

41. 41
Jerga: una paleta contiene el Ahora que conoce los píxeles, podemos hablar un poco sobre paletas. Una paleta
conjunto de colores usados es, simplemente, la tabla de colores usados en un gráfico. Algunos gráficos Web
en un gráfico. (en concreto los guardados con el formato de archivo GIF, según se describe en
la sección siguiente) usan una colección limitada de colores. Puede asignar una
paleta a una imagen o puede dejar que el programa de gráficos genere una
automáticamente a medida que crea y edita la imagen. Una paleta GIF puede
contener hasta 256 colores pero algunas imágenes usan menos. Por ejemplo, si
examina la figura 3-3, en el gráfico de las cerezas se usan 8 colores mientras que
en el de las guindillas se utilizan 128. Observe el tamaño de las imágenes: el
gráfico de las cerezas tiene 3 KB (es muy pequeño) y el de las guindillas tiene
7 KB (casi tan pequeño como el gráfico GIF de las cerezas).
Figura 3-3.
La paleta del gráfico de las cerezas contiene 8 colores y la de las guindillas
contiene 128.

42. 42
Jerga: en algunas Generalmente, la mayor parte de las aplicaciones gráficas permiten ver los
aplicaciones de gráficos Web colores incluidos en la paleta de un gráfico GIF. Además, puede reducir el
y documentación, también se tamaño de una imagen GIF si reduce o limita el número de colores de su paleta.
hace referencia a una paleta
como una tabla de consulta
Y, como probablemente sabrá, cuanto menor es el tamaño de los archivos, más
de colores (CLUT, Color rápida es su descarga en el Web.
Look-up Table ) o,
simplemente, como
una tabla de colores.
¡Pruébelo!
En la carpeta de archivos de ejercicios Lesson03 de este curso, busque el
archivo cherries.gif o firebreath.gif y ábralo en una aplicación de edición de
gráficos, como Jasc Paint Shop Pro, Adobe Photoshop o Microsoft Paint.
Para mostrar la paleta de la imagen en Paint Shop Pro, seleccione Edit Palette
(Editar paleta) en el menú Colors (Colores). En Photoshop, seleccione Mode
(Modo) en el menú Image (Imagen) y, después, seleccione Color Table (Tabla
de colores). (Sabemos que cada paquete gráfico tiene sus propias opciones de
menú; proporcionamos los dos comandos anteriores para darle una idea del tipo
de comando que debería buscar en la aplicación de gráficos.)
Como hemos mencionado, las paletas entran en escena cuando usamos
imágenes GIF. Nos damos cuenta de que no hemos definido lo que son las
imágenes GIF aún, ni ningún otro formato de imagen que se admita en el Web.
Sin embargo, ahora que ya ha tanteado la naturaleza de los píxeles y las paletas,
avanzaremos y explicaremos los formatos de archivos de gráficos que puede
usar en el Web. Hablaremos más acerca de las paletas cuando expliquemos las
imágenes GIF más adelante en esta lección.
Formatos de archivos gráficos
Como puede que recuerde, en la lección 1 afirmamos que cada gráfico de
una página Web se almacena como archivo independiente. Para refrescar la
memoria, vuelva de nuevo a la figura 1-4 de la lección 1. Observe los nombres
de los dos archivos de imágenes.
El nombre del archivo de la figura de la barra de título termina con la
extensión .gif (afs_title.gif) y el de la otra figura termina con .jpg
(4members.jpg). Las extensiones de archivos gráficos se basan en los mismos
principios que el resto de formatos de archivo. Por ejemplo, si ve un archivo
en el escritorio denominado lista_regalos_vacaciones.doc, sabe por la extensión
.doc que probablemente se trate de un documento de Microsoft Word y deseará
abrirlo en Word (especialmente, si sospecha que usted es una de las personas
que aparecen en la lista de regalos). De forma similar, si ve un archivo en el
escritorio denominado facturas.xls, sabe que .xls indica que se trata de un
documento de Microsoft Excel, con lo que podría abrirlo en Excel (aunque
puede que desee evitar los archivos que se llamen facturas). En relación a los
gráficos Web, las páginas Web pueden incluir imágenes gráficas que usen las
extensiones de archivo .gif o .jpeg (o .jpg) porque los exploradores Web más
populares pueden mostrar los archivos GIF y JPEG.

43. 43
Gráficos GIF
Los gráficos GIF constituyen el tipo de imagen que se admite en más sitios del
Jerga: GIF (Graphics
Web, lo que significa que casi todos los exploradores (los viejos, los nuevos y
Interchange Format) es un
formato de archivo gráfico los de en medio) pueden mostrarlos. GIF son las siglas en inglés de Graphics
usado para crear imágenes Interchange Format (Formato de intercambio de gráficos) CompuServe creó
y utilizarlas en Internet. este formato en la década de los ochenta como un medio eficaz de transmitir
Las imágenes GIF pueden
contener hasta 256 colores. imágenes a través de las redes de datos. La principal ventaja del formato GIF es
que las imágenes GIF suelen ser pequeñas, lo que significa que se descargan y
se muestran rápidamente.
Como se ha mencionado anteriormente en esta lección, las imágenes GIF usan
y admiten paletas de hasta 256 colores (lo que los convierte en gráficos de
8 bits). Puesto que admiten un número limitado de colores, debe usarlos para
áreas de colores básicos, logotipos, líneas, iconos, ilustraciones de dibujos
animados, botones, reglas horizontales, viñetas, fondos y otros elementos
gráficos que requieran pocos colores. La figura 3-4 muestra algunos ejemplos
de usos típicos de imágenes GIF.
Figura 3-4.
Las líneas, reglas horizontales, botones, viñetas y texto gráfico son algunos
usos típicos de los archivos GIF.

44. 44
Además de adaptarse a una paleta y ser pequeños y eficaces, los gráficos GIF
permiten realizar tres efectos especiales: el entrelazado, la transparencia y la
animación.
Si utiliza una conexión a
■ Gráficos GIF entrelazados Normalmente, una imagen GIF
Internet rápida, por ejemplo aparece en la pantalla fila por fila, de arriba a bajo, como si se
un módem por cable, desplegara una persiana. Si lo desea, como diseñador de la página
probablemente no verá los Web puede cambiar la forma en que un gráfico GIF se descarga en
efectos del entrelazado.
el monitor si lo guarda como archivo GIF entrelazado. Un gráfico
GIF entrelazado se muestra en la pantalla del usuario borroso o
dentado al principio y, después, se va definiendo gradualmente. La
figura 3-5 muestra un archivo GIF entrelazado en medio de la
descarga. La figura de la izquierda muestra la imagen antes de
descargarse completamente y la de la derecha cuando se ha
descargado del todo.
Figura 3-5.
En conexiones de Internet más lentas, puede ver cómo un archivo GIF
entrelazado se muestra borroso antes de completarse su descarga.
El uso de archivos GIF entrelazados es conveniente cuando se desea transmitir
la idea principal de una imagen a los lectores mientras esperan a que finalice
la descarga. Su desventaja es que tienen un tamaño ligeramente mayor que las
imágenes GIF convencionales (no entrelazadas). Por lo tanto, en los botones,
iconos y gráficos pequeños, es mejor utilizar el formato GIF convencional.
■ Gráficos GIF transparentes Estos archivos (gráficos GIF que
usan el formato GIF89a) permiten diseñar iconos, logotipos y otros
elementos que parecen estar recortados y, por lo tanto, posibilitan
que el fondo de la página Web se vea a través de ciertas zonas de
la imagen. Por ejemplo, como puede ver a la derecha de la figura
3-6, el fondo se muestra a través del GIF transparente para crear la
ilusión de una imagen no rectangular.

45. 45
Figura 3-6.
Al comparar una imagen GIF estándar con una imagen GIF transparente se
aprecia cómo permite la transparencia que el color de fondo de una página
Web (o trama) se vea.
Si el color de fondo de un Al crear un GIF transparente, básicamente se especifica un color
gráfico GIF coincide con el único en la imagen para que actúe como el color transparente. Por
de la página Web, por ejemplo, podría colorear el fondo de una imagen en rosa fuerte y
ejemplo en una imagen con
un fondo blanco con una
asignar a continuación este color como color transparente de la
página Web también con el imagen; pero debe asegurarse de que el rosa fuerte no aparezca
fondo blanco, se consigue en ningún otro lugar en ella o creará puntos transparentes que no
automáticamente la ilusión
desea. Cuando un explorador encuentra el color transparente, no
de transparencia.
muestra ninguna información del gráfico en el área que tenga ese
color, lo que permite ver el fondo de la página Web.
■ Gráficos GIF animados El último “truco” de los GIF tiene que ver
con la animación. Mediante herramientas de animación GIF y
programas de edición de gráficos, puede crear capas de GIF y
guardarlas en una “pila” para crear animaciones sencillas. Cuando
un explorador muestra las imágenes GIF apiladas, presenta cada
una detrás de la otra. Esta técnica es similar al modo en que
antiguamente se veía una película pasando tarjetas, que era
popular mucho antes de que la mayor parte de nosotros
existiéramos. Los iconos en movimiento, los botones giratorios y
algunos anuncios en pancartas son los principales ejemplos de GIF
animados. La figura 3-7 ilustra la teoría que subyace tras los GIF
animados. Como verá posteriormente en esta lección, puede
descargar gráficos GIF animados y herramientas de animación de
GIF en el Web.

46. 46
Figura 3-7.
Se puede mostrar una serie de imágenes GIF en sucesión para crear
animaciones.
Sugerencia
Las imágenes prediseñadas de Microsoft Office XP incluyen gráficos GIF
animados y transparentes que puede usar en sus páginas Web. Para
identificar que una imagen prediseñada es un GIF animado, busque una
estrella dorada en la esquina inferior derecha de la imagen en miniatura, en
la Galería multimedia. Para identificar que una imagen prediseñada es un
fondo transparente, busque elementos que parezcan estar “recortados” en
la Galería multimedia. Puede probar la transparencia de una imagen si
inserta la página en un documento de Word que tenga un fondo en color.
Colores “simplificados” para el Web
Jerga: interpolación hace
Como sabe, todos los sistemas informáticos no se crean igual. Muchas personas
referencia al modelo de tardan bastante en seguir el vertiginoso ritmo que experimenta el desarrollo de
puntos aleatorio que resulta hardware en el sector informático. Por lo tanto, cuando diseñe páginas Web,
cuando los colores se
intentan igualar mezclando
debería tener en mente que no todas las personas podrán tener acceso a sus
otros similares disponibles páginas si éstas requieren el hardware de pantalla más fantástico y novedoso.
en una paleta limitada. De hecho, aproximadamente el 10 por ciento de todos los usuarios que
exploran el Web se limitan a ver las páginas Web en 256 colores (aunque
muchos de los sistemas nuevos muestran millones de colores, así que el
problema del diseño en 256 colores probablemente pronto será una
consideración del pasado). Por lo tanto, durante el próximo par de años, cuando
diseñe páginas Web y cree imágenes GIF, podría plantearse utilizar únicamente
colores que los monitores de 256 colores puedan mostrar sin dificultad.
Los colores universales se conocen como simplificados para el Web o
simplificados para los exploradores. Si una página Web usa colores que no
sean los simplificados para el Web, los sistemas que sólo admitan 256 colores
recurrirán a interpolar aquéllos que no sean estándar.

47. 47
Para evitar la interpolación, limítese a usar los 216 colores simplificados para el
Web. (Los otros 40 que faltan hasta 256 se reservan para ser utilizados por el
sistema informático.) Si desea ver la paleta de colores simplificados para el
Web, abra el archivo palette216.gif en un programa de gráficos. Este archivo se
encuentra en la carpeta Lesson03 de este curso, en el disco duro. Para ver los
colores en formato de gráfico, visite el sitio www.creationguide.com/colorchart
(en inglés). Los programas de edición de gráficos suelen proporcionar una
paleta simplificada para el Web que puede cargar cuando trabaje con
imágenes GIF.
Gráficos JPEG
Además de los gráficos GIF, sus páginas Web probablemente incluyan
Jerga: JPEG (Joint
Photographic Experts Group)
imágenes JPEG. El formato de archivo de imagen JPEG fue creado por Joint
es un formato de archivo Photographic Experts Group y adoptó su nombre. Este formato de imagen
gráfico usado para mostrar admite millones de colores y pueden utilizarlo los exploradores casi de forma
imágenes de calidad
fotográfica y otras imágenes
universal. (Técnicamente hablando, las imágenes JPEG admiten colores de 24
en color en Internet. El bits, por lo que también se conocen como imágenes a todo color o de color
formato de archivo JPEG verdadero.) Dado que los archivos JPEG pueden contener millones de colores,
puede admitir millones de con frecuencia muestran imágenes fotográficas en línea.
colores.
Al trabajar con gráficos JPEG para sus páginas Web, puede especificar si desea
guardarlos como JPEG estándar o progresivo:
■ Estándar Cuando guarda una imagen como archivo JPEG
estándar, se carga línea por línea desde el principio de la pantalla
hacia abajo, del mismo modo que se descargan los GIF de manera
predeterminada.
Cuando una imagen JPEG
■ Progresivo Cuando guarda una imagen como archivo JPEG
se muestra en un sistema progresivo, la imagen aparece primero de forma borrosa y,
que sólo admite color de 8 después, se enfoca a medida que se descargan los datos de la
bits (256 colores), el misma (igual que los archivos GIF entrelazados). Con las rápidas
explorador reduce los colores
de la imagen para usar los de velocidades de conexión a Internet, el procesamiento progresivo
la paleta Web y se produce podría no ser evidente para los usuarios enseguida; en cambio,
cierta interpolación. tras un momento, la imagen parecerá “emerger” en la página.
Según nuestra experiencia, los archivos JPEG progresivos parecen
crear archivos más pequeños y se descargan ligeramente más
rápido que los archivos JPEG estándar.
Otro parámetro de configuración del formato JPEG que puede usar para su
provecho es la compresión. La compresión es un proceso que reduce el tamaño
del archivo de una imagen deshaciéndose de parte de la información del color.
La compresión de JPEG se denomina esquema de compresión con pérdida
porque, una vez comprimida una imagen, la información eliminada se pierde.
Por suerte, si tiene cuidado, las personas que vean la imagen en línea no podrán
percibir con facilidad la pérdida de información.

48. 48
Sugerencia
Al incrementar la compresión de una imagen JPEG, guarde siempre
primero una copia de la imagen original. Después, use el comando Guardar
como cada vez que vuelva a comprimir el archivo para crear otro nuevo.
Una vez comprimida una imagen con el esquema de compresión de JPEG,
la información que se quita se pierde.
Tenga en cuenta que cuanto más comprima una imagen, más pequeño se
volverá el tamaño del archivo de la imagen, pero la imagen resultante no será
tan nítida como otra menos comprimida. Por lo tanto, debe experimentar con
varias configuraciones de compresión al configurar imágenes JPEG en las
páginas Web.
En este punto, los conceptos de archivos JPEG progresivos y comprimidos no
le deben preocupar, pero aún no hemos explicado cómo configurar estas
opciones en una imagen JPEG. Afortunadamente, la mayor parte de los
programas de edición de imágenes hacen que la especificación de parámetros
en los archivos JPEG sea bastante sencilla. Para tener acceso a las opciones de
configuración de un archivo JPEG en Paint Shop Pro, siga estos pasos:
1 Abra la imagen JPEG en Paint Shop Pro. (Puede practicar con
cualquiera de las imágenes fruit.jpg provided para este curso que
se encuentran en la carpeta Lesson03 del disco duro.)
2 Elija Save As (Guardar como) en el menú File (Archivo) para
mostrar el cuadro de diálogo Save As (Guardar como).
3 Especifique un nombre de archivo nuevo y, después, haga clic en
Options (Opciones) para tener acceso al cuadro de diálogo Save
Options (Guardar opciones), que se muestra en la figura 3-8.
Figura 3-8.
El cuadro de diálogo Save Options (Guardar opciones) permite configurar las
opciones de compresión y procesamiento de JPEG en Paint Shop Pro.

49. 49
4 Especifique una opción de codificación (Standard o Progressive,
estándar o progresiva, respectivamente), seleccione una opción de
compresión, haga clic en OK (Aceptar) y, después, haga clic en
Save (Guardar).
Para configurar las opciones de JPEG en Photoshop, siga estos pasos:
1 Abra la imagen JPEG en Photoshop.
2 Elija Save (Guardar) en el menú File (Archivo).
3 Especifique un nombre de archivo y haga clic en Save (Guardar).
Se abre el cuadro de diálogo JPEG Options (Opciones de JPEG).
Mueva el control deslizante Quality (Calidad) para especificar las
opciones de compresión en el cuadro de diálogo JPEG Options
(Opciones de JPEG) y haga clic en OK (Aceptar).
Gráficos PNG
El tercer y último tipo de gráfico que trataremos en esta lección es el formato
Jerga: PNG (Portable
Network Graphics) es un de archivo PNG. PNG son las siglas en inglés de Portable Network Graphics,
formato de archivo gráfico que significa gráfico portátil de red. Al igual que los archivos GIF, los archivos
diseñado para reemplazar
a las imágenes GIF
PNG son pequeños, se cargan con rapidez y admiten la transparencia. Los
en Internet. archivos PNG se transmiten más rápido que los GIF, pero sólo los exploradores
más recientes permiten usarlos.
Inicialmente, el formato de archivo PNG se ideó porque Unisys, el fabricante
del algoritmo de compresión de GIF, decidió hacer cumplir la patente para
dicho algoritmo, lo que significa que los proveedores de software tenían que
pagar para usarlo. Pero en realidad no necesita conocer los detalles del debate
entre PNG y GIF. Simplemente tiene que saber que la mayor parte de los
exploradores nuevos (incluidos Microsoft Internet Explorer 5 y las versiones
posteriores) pueden mostrar las imágenes PNG, pero casi ningún diseñador
Web las usa en deferencia a los usuarios que exploran el Web con exploradores
anteriores o menos avanzados tecnológicamente. Por ello, quizás tampoco deba
usar archivos PNG en sus páginas Web.
Nota
Internet Explorer para Microsoft Windows comenzó a incorporar algunas
imágenes PNG en 1997 y a proporcionar compatibilidad con este formato
en las versiones para Macintosh de Internet Explorer en 2000. Por lo tanto,
el formato de archivo PNG está empezando lentamente a implantarse a
medida que los desarrolladores observan el porcentaje de usuarios que
tienen acceso a los exploradores más actualizados o más avanzados
desde el punto de vista tecnológico. Desde la perspectiva de un
desarrollador, no hay ninguna razón en este momento para arriesgarse a
perder visitantes usando el formato de archivo PNG cuando el formato GIF
está disponible, es igual de fácil de usar y se reconoce en casi todos los
exploradores (con independencia de la versión).

50. 50
Cuestiones de tamaño
La última consideración “técnica” importante que abarcamos en esta lección es
el tamaño del archivo, que está directamente relacionado con la velocidad de la
descarga. Como aficionado a explorar el Web, probablemente se haya
encontrado a sí mismo tamborileando con el dedo sobre el mouse (ratón) con
impaciencia mientras espera a ver las páginas que tardan más de 10 segundos
en mostrarse o, lo que es más probable aún, haciendo clic en algún otro lugar
antes de que la página lenta llegue a verse completa alguna vez. Como
diseñador Web, necesita contener ese sentimiento de impaciencia. Cuando
diseñe páginas Web y utilice arte Web, siempre debe tener un ojo en el diseño y
el otro en la perspectiva del usuario. (¡Eso suena casi doloroso!)
Al emplear arte Web, puede sacar provecho de ciertas técnicas que le ayudarán
a conseguir que el tamaño de los archivos sea manejable. Ya hemos tratado
algunos temas clave en esta lección que pueden ayudar a reducir el tamaño de
los archivos y acelerar el tiempo de descarga, como son:
■ Evitar la interpolación en imágenes GIF con colores simplificados
para el Web siempre que sea posible, especialmente en áreas
grandes de colores básicos. (Piense un poco: antes de leer esta
lección, esa frase no habría tenido ningún sentido para usted.)
■ Configurar las imágenes JPEG para que se procesen de forma
progresiva.
■ Comprimir las imágenes JPEG para reducir el tamaño de
los archivos.
Además de usar las tres técnicas anteriores en relación a los archivos gráficos,
puede controlar la velocidad de las descargas si cambia el tamaño de las
imágenes, las recorta y usa imágenes en miniatura. En las secciones siguientes
describimos brevemente cada técnica. Tenga en cuenta que la mecánica real
que subyace tras la realización de ciertas tareas varía en función de las
herramientas de edición gráfica.
Cambio de tamaño de los gráficos
Una de las mejores formas de ahorrar tiempo de descarga es cambiar
Normalmente, deberá
asegurarse de que el botón
físicamente el tamaño de las imágenes en un editor de gráficos. Observe
de opción Mantener relación que hablamos de cambiar el tamaño de la imagen y no simplemente su
de aspecto (o el equivalente visualización. Al acercar o alejar una imagen, se cambia la visualización de la
del programa de gráficos
que utilice) está activado al
misma pero ello no repercute en el tamaño ni en las dimensiones reales del
cambiar el tamaño de los archivo. Intente que el tamaño de las imágenes se aproxime al que desee
gráficos o, de lo contrario, utilizar para mostrarlas en la página Web. La figura 3-9 muestra el cuadro de
podría distorsionar las
diálogo Resize (Cambiar tamaño) que se usa en Paint Shop Pro para cambiar el
imágenes.
tamaño de una imagen. Para tener acceso al cuadro de diálogo Resize (Cambiar
tamaño), abra la imagen y seleccione Resize en el menú Image (Imagen).

51. 51
Tenga en cuenta que las imágenes más pequeñas tienen un tamaño de archivo
menor, con lo que tardan menos en descargarse.
Figura 3-9.
Cambiar el amaño de las imágenes por el real en Paint Shop Pro ayuda a
reducir el tiempo de descarga.
¡Pruébelo!
Para experimentar con el cambio de tamaño de las imágenes, abra una imagen
JPEG en un editor de gráficos y cambie la configuración de ancho o alto de la
misma. Use la imagen Use the apples.jpg de la carpeta Lesson03, en el disco
duro, correspondiente a este curso. Guarde la imagen JPEG y, a continuación,
repita el proceso varias veces con diversas medidas, cambiando el nombre de
cada versión por otro único y significativo (como apples400a.jpg para una
imagen cuyo tamaño se haya cambiado a 400 píxeles de ancho). Una vez
creadas algunas imágenes con varios tamaños, véalas de forma local en la
ventana del explorador, es decir, explore las figuras mediante la barra de
herramientas de dirección del explorador o arrastre los iconos del nombre
de archivo de las imágenes JPEG hasta la ventana del mismo.

52. 52
Truco rápido: el tamaño de las
imágenes debe ser justo el adecuado
Cuando empiece a diseñar páginas Web por primera vez, quizás no sepa qué
tamaño deben tener las imágenes. Como ayuda para cambiar el tamaño de un
gráfico por el que desee que tenga en la página Web, puede usar un programa
de edición Web, como Microsoft FrontPage.
Con el objeto de determinar el tamaño óptimo de un gráfico Web, siga estos
pasos:
1 Inserte el gráfico en una página Web en blanco en FrontPage, por
ejemplo, y arrastre los controladores de selección de la imagen
para cambiar su tamaño.
2 Cuando la imagen tenga el tamaño que desee, muestre sus
propiedades (en FrontPage, haga clic con el botón secundario del
mouse en el gráfico y seleccione Picture Properties (Propiedades
de imagen) en el menú emergente), observe los parámetros de
ancho y alto de la imagen, y anótelos.
3 Vuelva a abrir la imagen en el programa de edición de gráficos y
cambie el tamaño del gráfico especificando los números que copió
en FrontPage (o en el programa de edición Web que haya usado)
en el cuadro de diálogo correspondiente. Por ejemplo, en Paint
Shop Pro, para abrir el cuadro de diálogo Resize (Cambiar
tamaño), debe elegir Resize en el menú Image (Imagen) y, en MS
Paint, el cuadro de diálogo Attributes (Atributos) se abre al elegir
Attributes en el menú Image (Imagen).
Recorte de las imágenes
Además de cambiar el tamaño de una imagen, puede recortarla para reducir su
Jerga: recortar una imagen
es eliminar una parte de la
tamaño. Al recortar una imagen, elimina la parte de la misma que no desea usar.
misma, por ejemplo, las El recorte se usa con frecuencia para quitar las partes no deseadas o innecesarias
porciones innecesarias de una fotografía. Por ejemplo, podría recortar la imagen apples.jpg de la figura
de un gráfico.
3-9 para mostrar un primer plano de la manzana verde situada en medio de las
rojas en el escurridor. En la figura 3-10 se muestran líneas de recorte (los guiones
que rodean a la porción de la imagen que desea conservar) en la imagen
apples.jpg, que tiene un tamaño de 50 KB, y el resultado de recortar la imagen
apples.jpg. La versión recortada tiene 6 KB, únicamente.

53. 53
Figura 3-10.
Las marcas de recorte indican la porción de una imagen que se va a usar como
gráfico Web. La imagen recortada sólo contiene la información limitada por
las marcas de recorte.
¡Pruébelo!
Para recortar una imagen, siga estos pasos:
1 Abra una imagen en un editor de gráficos.
2 Haga clic en la herramienta de selección (que suele tener forma de
rectángulo o cuadrado con guiones en la barra de herramientas de
la aplicación).
3 Haga clic en la imagen y arrástrela para trazar el contorno del área
de la imagen que desee conservar. (Si se equivoca, presione la
tecla Esc y vuelva a intentarlo.)
4 Cuando tenga un área seleccionada, elija Crop To Selection
(Recortar la selección), en Paint Shop Pro, o Crop (Recortar), en
Photoshop, en el menú Image (Imagen) o seleccione un comando
similar en su programa de edición de gráficos.

54. 54
Uso de vistas en miniatura
Cuando domine las artes que le permiten cambiar el tamaño de las imágenes
Jerga: una vista en miniatura
es una versión o una parte y recortarlas, estará en disposición de usar vistas en miniatura. Una vista en
más pequeña de un gráfico. miniatura es una imagen pequeña que está vinculada a una mayor. (La imagen
Con frecuencia, en las mayor suele ser la misma que la vista en miniatura aunque, en su momento,
páginas Web, los gráficos
en miniatura tienen
vimos algunos usos creativos de las miniaturas.) Si utiliza vistas en miniatura
hipervínculos a las versiones en una página, sus visitantes podrán optar por ver la imagen pequeña y
de mayor tamaño de los apañarse con ella, o hacer clic en la vista en miniatura para ver la imagen
mismos. mayor. En otras palabras, al utilizar vistas en miniatura, les ofrece la opción
de descargar las imágenes grandes si están dispuestos a soportar tiempos de
descarga más prolongados.
El truco para usar vistas en miniatura es crear dos gráficos con nombres
diferentes. Normalmente, debe usar la misma imagen para ambos gráficos y
hacer que una sea pequeña, y el tiempo que se tarda en descargarla es menor,
mientras que la otra es más grande (aunque lo mejor optimizada que se pueda,
por supuesto) y su tiempo de descarga es más largo. A continuación, se muestra
la imagen pequeña en la página Web y se vincula a la mayor. La figura 3-11
exhibe dos vistas en miniatura. La de la izquierda muestra toda la imagen
vinculada y la de la derecha una porción recortada del gráfico vinculado. La
figura 3-11 también presenta el gráfico mayor que está vinculado a las vistas en
miniatura. Al hacer clic en alguna de las vistas en miniatura mostradas en la
figura 3-11, puede abrir una ventana que presente una vista de la imagen
apples.jpg.
Figura 3-11.
Ambas vistas en miniatura de las manzanas se vinculan a una versión de la
imagen apples.jpg cuyo tamaño puede modificarse.

55. 55
Uso de fotografías
Probablemente, en su casa tendrá, como mínimo, una caja llena de recursos de
arte Web de primera clase: las fotografías. Puede usar tanto las nuevas como las
antiguas con el fin de aportar arte a sus páginas Web. El truco es conseguir que
la imagen impresa se convierta en información que pueda entender un equipo
informático. Para ello, puede usar alguna de las opciones siguientes:
■ Escáneres Básicamente, un escáner toma una imagen de la
fotografía y guarda información de la misma en forma de archivo
en un equipo. Una vez digitalizada la imagen, puede tratar el
archivo de igual modo que otros archivos gráficos. Puede usar
cualquier escáner plano del mercado para crear gráficos Web. No
necesita conseguir la mejor máquina. Nosotros utilizamos
escáneres con un precio moderado para digitalizar la mayor parte
de nuestras imágenes. Si no dispone de un escáner y no piensa
comprar ninguno, puede pagar para que le digitalicen sus
imágenes. Por ejemplo, muchos centros de fotocopias también
digitalizan las imágenes por un módico precio.
■ Servicios de revelado de películas y fotografía en línea La
próxima vez que deje un carrete para que lo revelen, compruebe
los servicios adicionales que le ofrecen. Muchos servicios de
revelado de películas además de revelarlas pueden copiarlas en
CD, exponer las imágenes en el Web, enviarlas a través de correo
electrónico, crear impresiones de calidad a partir de imágenes
digitales y proporcionar otros numerosos servicios de
procesamiento digital.
■ Cámaras digitales Una tercera opción para obtener imágenes
fotográficas es usar una cámara digital. Las cámaras digitales
permiten tomar una fotografía e, instantáneamente, enviar la
imagen a un equipo. Si está pensando en comprar una cámara
digital, a continuación se enumeran algunas cuestiones que
debería considerar:
Costo Sepa cuál es su presupuesto antes de comprar: la
mayor parte de la gente no necesita la mejor cámara digital
de la gama para hacer su trabajo. Pero, una vez dicho
esto, no acepte el modelo del “año pasado” sólo por
ahorrar algo de dinero. Los fabricantes están respondiendo
a la creciente demanda de cámaras digitales; por lo tanto,
están produciendo más cámaras, con lo que se reduce el
costo por unidad, y mejorando sus características. En
consecuencia, comprar una cámara nueva en una tienda
especializada con frecuencia puede dar mejor resultado
que adquirir un modelo anterior en un almacén de saldos.

56. 56
Jerga: un megapíxel hace
Características Las características de una cámara digital
referencia a un millón de son numerosas pero, si es usted principiante, compruebe
píxeles y es un término que disponga tanto de automáticas como manuales.
usado en relación a la Probablemente desee usar las opciones automáticas al
resolución de dispositivos
gráficos, como los
principio para llegar a dominar la fotografía digital.
escáneres, la cámaras Después, cuando se encuentre cómodo usando la cámara,
digitales y los monitores. puede empezar a experimentar con las configuraciones
manuales. Además, si compra la cámara sólo con el fin de
obtener imágenes para el Web, puede apañarse con una
de 1 megapíxel o menos, pero si desea poder usarlas en
línea y en copias impresas, podría intentar conseguir una
cámara de 1 megapíxel como mínimo, preferiblemente de
2 ó 3 megapíxeles, si puede elegir. Las cámaras con más
megapíxeles crean mejores imágenes y le permiten
imprimir fotografías de calidad a mayor tamaño que el de
una instantánea estándar.
Finalmente, recuerde que las cámaras digitales son,
básicamente, PCs de mano. Si va a tomar imágenes en
toda clase de circunstancias y condiciones, compruebe
que elige una cámara que resista una tormenta. Si piensa
practicar la fotografía en condiciones verdaderamente
extremas, examine algunos de los modelos
“impermeables”.
■ Formato de los archivos Por último, una cuestión importante que
debe considerar cuando compra una cámara es determinar lo fácil
que va a resultarle sacar las fotografías de ella y pasarlas a un
equipo. ¿Va a necesitar cables? ¿Puede usar puertos infrarrojos?
¿Almacena la cámara las imágenes en un CD? Compruebe que
sabe cómo transfiere la cámara las imágenes y que le satisface el
método antes de comprarla.
Para finalizar, como último consejo de esta lección, independientemente de
cómo y cuándo obtenga los gráficos para las páginas Web, recuerde optimizar
las imágenes y guardarlas como archivos GIF y JPEG. Asegúrese de que el
tamaño de los archivos de las imágenes es lo más pequeño posible sin
comprometer la calidad. Además, almacene las imágenes en una ubicación
central en el disco duro y no olvide dar a cada gráfico un nombre único y
significativo.

57. 57
Puntos clave
■ Los gráficos en línea están compuestos de píxeles.
■ La mayor parte de los exploradores admiten imágenes GIF y
JPEG.
■ Las imágenes GIF son pequeñas, sólo pueden usar una paleta de
256 colores y se descargan rápidamente.
■ Los archivos GIF pueden ser entrelazados, transparentes o
animados.
■ Las imágenes JPEG pueden contener millones de colores y se
suelen usar para mostrar fotografías.
■ De forma predeterminada, los archivos GIF y JPEG se muestran
línea por línea de arriba abajo, pero esto se puede cambiar si se
crean imágenes GIF entrelazadas o archivos JPEG progresivos.
■ El esquema de compresión de JPEG permite reducir el tamaño de
las imágenes JPEG, pero la compresión se realiza “con pérdida”,
por lo que debe efectuarla con cuidado (recuerde, cuanto más
comprima una imagen, menor calidad tendrá).
■ Cambie el tamaño de los gráficos en un programa de edición para
que sea lo más pequeño posible.
■ Recortar las imágenes reduce el tamaño de los archivos.
■ Considere usar vistas en miniatura para vincularlas a gráficos en
línea más grandes.
■ Los elementos gráficos de las páginas Web incluyen fotografías,
ilustraciones, botones, logotipos, iconos, viñetas, reglas
horizontales, texto gráfico y fondos.
■ Puede adquirir gráficos Web en colecciones de imágenes
prediseñadas de CD-ROM, software gratuito en línea, proveedores
de gráficos en línea y diseñadores gráficos.
■ Puede crear imágenes personalizadas con diversos programas de
software y digitalizando dibujos realizados a mano.
■ Las fotografías se pueden convertir en archivos de imagen en
servicios de revelado y a través de escáneres y cámaras digitales.

58. 58
LECCIÓN 4
Acopio de utensilios
Una vez completada esta lección, podrá:
 Saber lo que va a necesitar para mostrar páginas Web en línea.
 Buscar espacio para un sitio Web en un servidor en Internet.
 Elegir software para crear, modificar y tratar las páginas Web.
 Probar las páginas Web en varios exploradores.
Cuando cree páginas Web, al menos deberá tener un par de herramientas de
creación de páginas Web, probablemente más. Le advertimos de que no
hablamos de hardware: tenemos la certeza de que se ha dado cuenta de la
importancia de disponer de un equipo informático además de, posiblemente,
acceso a un escáner, una impresora y una cámara (digital o estándar). En esta
lección, nuestro interés recae en la serie de programas que puede usar para
crear, modificar y tratar páginas Web. Como le mostramos en las siguientes
lecciones, puede crear, modificar y publicar páginas Web con diversas
aplicaciones y herramientas software, y encontramos que las armas que
preferimos se mezclan y coinciden con frecuencia. Igualmente, conocer sus
opciones le ayudará a crear el entorno de trabajo que mejor se adapte a sus
necesidades y estilo personal.
Para comenzar, echemos un vistazo a dos de las “herramientas ” más básicas
que necesitará en su proceso de creación Web: una conexión a Internet y
espacio en un servidor.
Conexión a Internet y espacio en
un servidor
No importa lo asombrosa que sea su página Web, vivirá en el anonimato
virtual si no puede conectarse a Internet y transferir sus archivos a un servidor.
Recuerde de la lección 1 que un servidor es un equipo muy eficaz que se
conecta a las líneas de datos de la red troncal de Internet, almacena archivos de
páginas Web y responde a las solicitudes de los usuarios para ver las páginas
Web almacenadas. Debe estar conectado a Internet o tener acceso a una
conexión a la gran red si desea demostrar su presencia en línea. Es verdad que
puede crear muchas páginas Web sin una conexión a Internet pero fallará en el
intento cuando llegue el momento de publicarlas en línea.
Sugerencia
Si usa su equipo para explorar el Web, puede tener la certeza de que
dispone de una conexión a Internet. Con una conexión a Internet de acceso
telefónico estándar, puede copiar los archivos de las páginas Web desde
un equipo a un servidor que esté conectado a Internet.

59. 59
Además de disponer de conexión a Internet como requisito básico, puede que
deba adquirir algo de espacio en un servidor para sus archivos Web. Decimos
puede porque en numerosas ocasiones el espacio se ofrece gratuitamente o se
proporciona junto con otros servicios de pago. Por ejemplo, su proveedor de
servicios Internet (ISP, Internet Service Provider) podría darle 30 MB, por
ejemplo, de espacio gratuito en el servidor además de su conexión a Internet.
La noción de espacio gratuito atrapa a muchos por sorpresa, pero existe y es una
práctica en aumento en la red. No es de extrañar, sin embargo, que encuentre
beneficios en comprar espacio en un servidor además de usar el gratuito.
Espacio gratuito en línea
Es cierto. Puede crear y mostrar un sitio Web en este momento gratis, es decir,
sin pagar dinero. Todo lo que necesita es emplear un poco de tiempo y esfuerzo
creativo. No requiere ningún software adicional ni cuentas de Internet de pago,
sólo precisa su texto y unas cuantas imágenes, si desea incluirlas. Desde luego,
se enfrenta a un par de limitaciones de poca importancia si sigue este camino
(por ejemplo, al uso de una dirección Web larga y, posiblemente, a ciertas
restricciones en las opciones del diseño de la página), pero, dependiendo de
cuál sea su objetivo último, estas limitaciones podrían no afectarle demasiado.
Así que considérese informado: hay espacio gratuito en el Web. Como
mencionamos anteriormente, nos hemos encontrado con más de una persona
que se quedó sinceramente impresionada al descubrir este hecho.
Jerga: un grupo o
La forma más habitual de convertirse en el orgulloso propietario de una página
comunidad en línea es un
área virtual en el Web donde Web gratuita es acudir a un grupo o comunidad en línea. Una de las ventajas de
las personas con intereses esto, además del factor de gratuidad, es que la mayor parte de los grupos y
similares reúnen y comparten comunidades en línea permiten la creación de páginas Web proporcionando
información.
para ello plantillas o asistentes que puede usar.
La mayor parte de las
Entre los numerosos grupos y comunidades gratuitos, rápidamente nos vienen a
compañías que patrocinan la mente tres bastante populares:
los grupos y comunidades en
línea obtienen sus ganancias ■ Grupos Web de MSN
a través de los anuncios, de (http://groups.msn.com/home.msnw?pgmarket=es-es)
la venta de actualizaciones y
características, y de servicios ■ Tripod de Lycos (http://www.tripod.lycos.es)
complementarios.
■ Yahoo! GeoCities (http://es.geocities.yahoo.com/)
Las desventajas principales de los grupos y comunidades en línea son que su
dirección Web suele ser bastante larga, generalmente se dispone de una
cantidad limitada de espacio en el servidor, las opciones de diseño de páginas
resultan, con frecuencia, algo restringidas o dirigidas, puede tener que tolerar
anuncios emergentes cada vez que visite su página y, si no desea usar las
plantillas de un grupo o comunidad, la personalización de la página puede
resultar difícil en ocasiones.

60. 60
De forma similar al uso de los grupos y comunidades en línea, otra forma
gratuita de conseguir un espacio en el Web es crear páginas específicas de un
sitio. Al explorar Internet, puede encontrar que algunos sitios Web ofrecen
espacio gratuito a los miembros registrados. Por ejemplo, puede crear una
página Acerca de mí en eBay (un sitio de subastas en línea que se encuentra
en www.es.ebay.com), si es uno de los participantes registrados en el sitio. El
propósito de las páginas Acerca de mí de este sitio es presentar a los usuarios
de eBay al resto de personas que lo visitan.
Y otro tipo de espacio en el Web en línea “gratuito”, que técnicamente no es
tal, es el que obtiene de su ISP. Puesto que lo más probable es que firme un
cheque para su ISP de forma regular (o al menos compruebe que se le ha
cargado el pago en su cuenta), no podemos etiquetar exactamente el espacio
en los servidores del ISP como gratuito; es más bien un espacio disponible con
prepago. Cuando se suscribió a su ISP actual (suponiendo que tenga alguno),
probablemente le informó con voz excitada o con una frase que terminaba en
un signo de admiración que conseguía “¡X megabytes de espacio gratuito en el
servidor!”. En ese momento, es probable que no supiera lo que eso significaba
así que simplemente pensó: “¡Oh, qué bien!” y pasó al siguiente detalle. Ahora
que está pensando en crear una página Web, debe volver a visitar la cláusula
acerca del “espacio gratuito en el servidor” de su contrato con el ISP. Los más
probable es que encuentre que tiene en alguna parte entre 10 MB y 50 MB de
espacio a su disposición en un servidor.
¡Pruébelo!
Para buscar espacio gratuito en el Web, escriba free Web space (o espacio
gratuito en el Web) en cualquier motor de búsqueda; se le recompensará con un
montón de sitios que le permiten alojar sus páginas. O bien, revise el sitio Web
100 Best Free Web Services en www.100best-free-web-space.com (en inglés).
En este sitio se proporcionan exámenes y clasificaciones de sitios, lo que lo
convierte en un gran recurso para localizar y examinar servicios de alojamiento
de sitios Web (o hosts).

61. 61
La ventaja de usar el espacio en los servidores de su ISP es que ya está pagando
por él, así que también podría emplearlo. El inconveniente es que
probablemente tendrá que convivir con una voluminosa dirección Web, similar
a las de las comunidades y grupos en línea. Por ejemplo, un par de nuestros ISP
(tenemos varios) conceden espacio “gratuito” en sus servidores, pero los
formatos de las direcciones Web son www.dominio.com/~nombredeusuario/
nombredearchivo.html y members.dominio.net/ nombredeusuario/
nombredearchivo.html. Para la mayoría de las personas, estos formatos son un
poco largos y no resultan fáciles de recordar. Otra virtud de usar el espacio de
los servidores de los ISP con respecto al de los de los grupos y comunidades en
línea es que, generalmente, se tiene mayor libertad en relación a la forma en
que se crean y muestran las páginas (lo que podría ser un inconveniente si
prefiere trabajar con las plantillas preconfiguradas que parecen ser una práctica
estándar en numerosos sitios de comunidades en línea).
Con todo, la cuestión principal en relación a los sitios gratuitos en línea es que
el espacio en el Web está a su disposición de forma instantánea. Y, siempre que
no tenga inconveniente en usar una dirección Web larguísima para su página
principal, sufrir ciertas limitaciones de diseño y, posiblemente, que aparezcan
anuncios emergentes, entonces el espacio gratuito es una estupenda forma de
iniciarse en el Web.
Adquisición de espacio en un servidor
En contraposición al uso de espacio gratuito en el Web, puede desembolsar
algo de dinero para que una página Web use la dirección Web que prefiera
siempre que alguien no haya llegado antes. Si toma este camino, debe recordar
las dos consideraciones siguientes: necesita elegir y registrar el nombre de una
dirección Web (como creationguide.com) y suscribirse a un proveedor que
aloje (o almacene) sus páginas Web, a menos que vaya a poner en
funcionamiento su propio servidor, pero ese tema es mejor dejarlo para libros
más avanzados. Echemos un vistazo al modo de registrar una dirección Web y
obtener un servicio de alojamiento.
Registro de una dirección Web
Antes de seguir, vamos a concretar cierto vocabulario sencillo. Para ser más
precisos, en lugar de dirección Web, realmente deberíamos decir nombre de
dominio. Someramente (mucho), un nombre de dominio es una dirección Web.
Como tal vez sepa, todas las direcciones Web son en realidad grupos de
números, denominados números de Protocolo Internet (IP, Internet Protocol),
que actúan como direcciones de Internet. Siendo un humano, probablemente
también sabrá que, para la mayor parte de la gente, recordar un nombre con
sentido es mucho más fácil que recordar una serie de números divididos por
puntos. Por ello, el Sistema de nombres de dominio (DNS, Domain Name
System) vio la luz. En esencia, DNS simplemente asigna nombres de texto
(como creationguide.com) a las direcciones de Internet con números (como
207.155.248.5). Por lo tanto, para que parezca que sabe lo que hace, debería
usar el término nombre de dominio en lugar de dirección Web.

62. 62
Cuando esté listo para obtener su propio nombre de dominio, podrá elegir un
nombre (como creationguide.com, aunque podemos decirle ahora mismo que
ya lo tiene algún otro), ver si está disponible y, si lo está, registrarlo a su
nombre a cambio de una cuota nominal anual. Por nominal, queremos decir un
precio cercano a lo que cuesta una buena comida o un poco más.
Elegir y registrar un nombre de dominio Web es sencillo, una vez que tiene
acceso a un sitio de registro legítimo. Afortunadamente, InterNIC (que se
encuentra bajo el paraguas del Departamento de comercio de Estados Unidos)
aloja una página Web que enumera todos los sitios Web de registro de nombres
de dominio aceptables. Muchos sitios de alojamiento también ofrecen servicios
de registro de nombres (como explicamos en la sección siguiente). Para ver una
lista oficial de registradores de nombres de dominio, visite
www.internic.net/alpha.html (en inglés).
Mientras visita el sitio de InterNIC, examine unos cuantos sitios
de registro para revisar sus listas de precios y directivas (o visite
www.creationguide.com/resources, en inglés, y le dirigiremos a un par de
nuestros servicios de alojamiento Web favoritos). Cuando haya encontrado un
sitio que le guste, por lo general puede escribir el nombre de dominio propuesto
en un cuadro de texto. Entonces, se le informará si está disponible. Si es así, se
establece un contrato de pago (normalmente, mediante tarjeta de crédito) y el
sitio registra su dominio en InterNIC. El siguiente paso es buscar un ISP que
aloje su nombre de dominio y sus páginas Web.
Búsqueda de espacio para un dominio
Si no utiliza su propio servidor, que es lo que hace la mayor parte de la gente,
el próximo paso es buscar un ISP u otro servicio de alojamiento dispuesto a
proporcionar un lugar para su nombre de dominio, es decir, si no completó este
paso durante el proceso de registro de su dominio (según se describe en la
sección precedente). Puede encontrar numerosos servicios de alojamiento en
línea; escriba Web hosting (la forma inglesa de denominar al servicio de
alojamiento de sitios Web) en cualquier motor de búsqueda y puede pasar un
día de campo investigando a los diversos proveedores. O, mejor aún, visite
http://hostindex.com (en inglés), un extenso sitio dedicado a proporcionar
información acerca de numerosos aspectos de los servicios de alojamiento
Web, incluida una lista mensual de los 25 mejores. Para finalizar, como hemos
mencionado hace un momento, puede visitar
www.creationguide.com/resources (en inglés) para buscar vínculos a los
servicios de alojamiento Web y registradores de nombres de dominio.
Independientemente de cómo lleve a cabo la búsqueda de espacio para su sitio
Web, recuerde comprobar algunas cuestiones clave, como son las cuotas, la
configuración de la red, si dispone de Extensiones de servidor de Microsoft
FrontPage (si utiliza características de FrontPage) y la confiabilidad. Como
promedio, los servicios básicos de alojamiento Web cobran una cuota mensual
nominal además de otra cuota única de configuración (consulte el sitio Web de
cada servicio de alojamiento para conocer los precios específicos). A menos
que las tarifas le parezcan monstruosas, no deje que determinen su decisión.

63. 63
Antes de firmar ningún contrato con un servicio de alojamiento de sitios Web,
averigüe todos los aspectos relacionados con lo siguiente:
■ Ancho de banda Muchas compañías de servicios de
alojamientoWeb se conectan a Internet mediante líneas T1 y T3; si
no llegan a esto, bien podría elegir otra compañía. Básicamente,
una línea T1 puede transportar hasta 1,5 megabits de datos por
segundo mientras que una línea T3 puede transportar 45 megabits
por segundo. Por lo tanto, una conexión T3 proporciona mucho
más ancho de banda y permite una mayor velocidad. Además de
las conexiones a Internet, debe comprobar cuántos clientes se
alojan en cada equipo. Si un servicio de alojamiento sobrecarga
sus equipos, el rendimiento se verá afectado a pesar de las líneas
de conexión de alta velocidad.
■ Espacio Cuando se suscribe a los servicios de alojamiento Web, los
ISP y las compañías de alojamiento le asignan una cierta cantidad
de espacio en un servidor (de igual modo que su equipo tiene una
cierta cantidad de espacio de disco que puede usar para almacenar
archivos). La mayoría de los ISP y servicios de alojamiento ofrecen
más espacio en sus servidores de lo que necesitará (al menos
inicialmente). Sin embargo, debe conseguir 10 MB como mínimo.
Muchos hosts proporcionan a partir de 25 MB.
■ Soporte técnico Éste es un elemento importante en la elección
de una compañía de alojamiento de sitios Web. Si tiene problemas,
deseará acudir a alguien que pueda ayudarle. La consideración
más básica sobre el soporte técnico que debe tener en cuenta es
el número de horas al día que el personal de este servicio está
disponible. Muchos sitios lo ofrecen de forma ininterrumpida, así
que busque esta característica cuando esté eliminando posibles
compañías. Un soporte técnico continuado es importante porque
es muy probable que actualice sus páginas durante las horas que
tenga libres, así que en ese momento es cuando seguramente más
ayuda necesite. Además, compruebe si el sitio indica lo que cobra
por cada incidencia de soporte. Finalmente, mire si puede
identificar con facilidad el modo en que la compañía ofrece el
servicio, incluyendo los números de teléfono (mire si hay números
gratuitos), números de fax, direcciones de correo electrónico,
informes en línea, listas de preguntas más frecuentes y una
dirección de correo disponible.

64. 64
■ Extras Es posible que desee comprobar qué “extras” ofrece
cada compañía para atraer clientes. Por ejemplo, muchos
servicios de alojamiento Web proporcionan cuentas de correo
electrónico que puede usar con su nombre de dominio (como
mm@creationguide.com o jc@creationguide.com). Generalmente,
puede configurar entre 5 y 20 cuentas de correo electrónico con
un único contrato de alojamiento Web. Otras características que
podría investigar incluyen el costo de agregar espacio al sitio, si
éste crece demasiado como para caber en su espacio asignado
originalmente; el costo de aumentar la cuota de tráfico, si visitan
su sitio más personas de lo previsto; si se admite el uso de
Extensiones de servidor de FrontPage (si utiliza FrontPage)
y de la transmisión de multimedia; y si se dispone de servicios
complementarios, como la adición de grupos de charla y
características de búsqueda.
Ahora que ha estudiado su nombre de dominio, los servicios de alojamiento y
las opciones básicas de espacio Web, podemos quedarnos más cerca de casa y
hablar sobre las aplicaciones de escritorio. En la sección siguiente, echaremos
un vistazo a las aplicaciones de software que puede usar en su sistema para
crear, modificar y publicar páginas Web, y sus elementos.
Herramientas de creación de
páginas Web
En esta sección, damos una idea general de los tipos de herramientas que podría
necesitar para crear páginas Web, enumeramos algunas que encontramos de
utilidad y le señalamos el camino para hallar otras que se adapten mejor a sus
necesidades. Como podría imaginar, gracias a la popularidad en auge del Web,
muchos proveedores de software se han puesto manos a la obra para producir
programas de creación de páginas Web. En esta lección, presentamos
numerosas herramientas (pero de ningún modo nos acercamos a todas las
utilidades disponibles) y en las lecciones siguientes mostramos cómo usar
algunas de ellas para crear sitios Web completos. Sin embargo, al final le
dejamos a usted la responsabilidad de elegir los paquetes de software con los
que se sienta más cómodo.
Para simplificar nuestro enfoque de esta lección, hemos dividido las
herramientas de desarrollo de páginas Web básicas en las tres categorías
principales siguientes:
■ Procesadores de texto y editores HTML
■ Aplicaciones de gráficos
■ Utilidades FTP

65. 65
Procesadores de texto y editores HTML
Sobre todo, cuando cree páginas Web, empleará la mayor cantidad de tiempo
utilizando un procesador de texto o un editor HTML. Los editores se usan para
crear archivos HTML que contienen instrucciones destinadas a los
exploradores Web y proporcionan el contenido de las páginas Web. Puede
trabajar con un editor básico, en el que especifica el código HTML de forma
manual, o con uno más avanzado del tipo WYSIWYG (siglas correspondientes
a What You See Is What You Get, en inglés, que traducido es algo así como “lo
que ve es lo que consigue”), que crea código HTML de forma automática
mientras usted escribe el texto, inserta las imágenes y arrastra los elementos en
una vista de diseño de páginas Web. Finalmente, y como cabía esperar, algunas
aplicaciones ponen un pie en ambos campos al calificarse como editores
básicos mejorados pero no tanto como las aplicaciones de edición WYSIWYG
(damos un repaso rápido a los tres tipos de editores en las siguientes páginas).
Sugerencia
Puede descargar muchas de las aplicaciones (o versiones de
demostración) mencionadas en esta lección en sitios de shareware como
www.tucows.com, www.shareware.com o www.download.com (los tres en
inglés). La máxima del shareware podría ser “pruébelo antes de
comprarlo”. Cuando descarga un programa de shareware, lo prueba
durante un tiempo de forma gratuita. Si le gusta, envía a su creador la
cuota que le solicita. Por desgracia, en ocasiones es más una estrategia
mercantil que otra cosa.
Procesadores de texto y editores HTML básicos
Si utiliza un procesador de texto básico, debe escribir todos los comandos
HTML y el texto de la página Web en un documento vacío. El más básico de
los procesadores de texto de este tipo es la aplicación Bloc de notas, que se
incluye con el sistema operativo Microsoft Windows. En la figura 4-1 se
muestra el Bloc de notas con algo de texto HTML.

66. 66
Figura 4-1.
Muchos diseñadores Web acuden al Bloc de notas cuando codifican a mano
documentos HTML.
Puede que se pregunte por qué los diseñadores Web optarían por codificar
manualmente las páginas Web. La respuesta varía pero, en su mayor parte, lo
hacen por alguna de las razones siguiente:
■ Control La codificación a mano permite usar los códigos que se
desea en lugar de los que inserta un editor WYSIWYG. Por
ejemplo, puede que desee utilizar dos saltos de línea en blanco
pero un editor WYSIWYG podría insertar un marcador de párrafo.
Además, algunos editores WYSIWIG crean código “confuso”; la
codificación a mano puede mantener el código ordenado y fácil de
leer, y su alineación se puede configurar según las preferencias del
diseñador.
■ Correcciones rápidas Saber cómo crear y modificar manualmente
código HTML permite a los diseñadores Web hacer cambios en
una página Web con rapidez, con independencia de cómo se
creara inicialmente. Por ejemplo, si desea actualizar la fecha de
copyright de su sitio, puede realizar y guardar el cambio en un
procesador de texto en menos tiempo del que se tardaría
simplemente en abrir la página en un editor WYSIWYG.

67. 67
■ Limpieza del código Muchos editores HTML avanzados (como se
explica más adelante en esta lección) agregan código adicional a los
documentos. Si sabe cómo crear y modificar código HTML estándar,
puede limpiar al código extra y reducir el tamaño de los archivos
HTML. Y recuerde: en el Web, el tamaño importa y cuanto más
pequeño mejor. Además, puesto que los editores HTML sólo están
diseñados por personas, a veces, pueden codificar mal las páginas.
En estos casos, puede ahorrarse mucho tiempo e irritaciones si
cambia el código HTML directamente en lugar de seguir la pista a la
opción del cuadro de diálogo apropiado del editor HTML.
■ Precisión Otro hábito de los editores HTML avanzados es que, en
ocasiones, usan etiquetas HTML que no todos los exploradores
admiten. Puede usar procesadores de texto para modificar el
código HTML de modo que se ajuste a las capacidades de la
mayor parte de los exploradores.
Por supuesto, aprender HTML es un requisito primordial para crear páginas en
un procesador de texto. En la lección 6, le guiamos en la utilización de HTML
con el fin de crear una página Web para que se haga una idea del formato
HTML. (No se preocupe: puede hacerlo.) Sin embargo, esa lección sólo es una
introducción. Necesitará tener acceso a otros recursos si desea conocer de
verdad HTML. Si le interesa aprender HTML o tener cerca una referencia de
este lenguaje, encontrará una generosa colección de libros sobre dicho tema
ocupando las estanterías de las librerías de su ciudad. También puede encontrar
páginas y páginas de información en línea. (Hemos hecho una lista de algunas
referencias de HTML al final de la lección 6.)
Los procesadores de texto pueden variar desde los que apenas le echan una
mano a los que vienen totalmente equipados con características personalizadas
específicas de HTML. Como ayuda para ilustrar la variedad, hemos
proporcionado una breve descripción de algunos de los más usados en
este momento:
■ BBEdit (www.barebones.com/products/bbedit.html) (en inglés)
Este editor HTML de Bare Bones Software es popular entre los
desarrolladores Web de Macintosh. BBEdit permite modificar,
buscar, transformar y tratar texto. Al igual que otros editores HTML,
ofrece una serie de características con diversos fines además de
otras desarrolladas específicamente para satisfacer las
necesidades de los creadores de código HTML.
■ HomeSite (www.macromedia.com/software/homesite) (en inglés)
Macromedia HomeSite es una herramienta de diseño de código
HTML muy usada entre diversos desarrolladores profesionales de
sitios Web. Este editor de texto incluye características específicas
de HTML que sirven de ayuda en la creación de páginas HTML
efectivas y claras. Por ejemplo, incluye características de inspección
de etiquetas HTML, edición en ventanas divididas, mapas de
imágenes y algunas otras funcionalidades. Puede descargar una
versión de prueba de 30 días para examinar el producto.

68. 68
■ Bloc de notas Este programa viene con el sistema operativo
Microsoft Windows y sus funcionalidades son casi tan limitadas
como cuando se usa como procesador de texto. Tenga cuidado,
sin embargo: si trabaja en un documento muy largo, no podrá usar
el Bloc de notas. En los documentos más largos, tendrá que usar
WordPad (que se describe más adelante en esta lista).
■ NoteTab (www.notetab.com) (en inglés) El procesador de textos
NoteTab, de Fookes Software, es el Bloc de notas con esteroides
(fortalecido, queremos decir). Este programa incluye varias
características que pueden simplificar la codificación a mano de
páginas Web. Por ejemplo, puede mostrar utilidades HTML en el
lateral izquierdo del panel de la ventana en la barra de clips. A
continuación, puede insertar código HTML haciendo doble clic en
los elementos de menús y, por ejemplo, puede hacer clic en el
elemento de menú Nueva página Web para insertar la estructura
básica del código para todo un documento HTML. Un
inconveniente, típico de muchos procesadores de texto, es que el
programa gratuito de prueba sólo permite deshacer una operación;
si desea deshacer varias acciones, tendrá que restaurar la
información manualmente.
■ TextPad (www.textpad.com) (en inglés) Este programa, creado por
Helios Software Solutions, sirve como otra versión reforzada del
Bloc de notas. En TextPad, mientras trabaja puede ver un menú de
etiquetas HTML junto con las fichas de los documentos. TextPad
permite deshacer varias acciones, lo que resulta práctico cuando
se juega con HTML.
■ UltraEdit (www.ultraedit.com) (en inglés) IDM Computer Solutions
proporciona este programa como paquete de edición de texto que
se puede usar durante un período de prueba de 45 días. Una vez
descargada e instalada la aplicación, debe hacer clic en About
UltraEdit (Acerca de UltraEdit) en el menú Help (Ayuda) y,
después, cerrar la ventana Help para activar el programa. Aunque
esta aplicación está diseñada para usuarios algo avanzados, como
los programadores, incluye características que podrían venirle
bien. Por ejemplo, puede mostrar vistas previas de las páginas en
el explorador con facilidad y usar el diccionario que le acompaña
para corregir la ortografía de los documentos.
■ WordPad Este programa es un paso más allá del Bloc de notas.
Si utiliza Windows, puede abrir WordPad si hace clic en Inicio,
selecciona Programas y Accesorios, y después hace clic en
WordPad. Este programa ofrece más características de
procesamiento de textos que el Bloc de notas y admite documentos
más largos. La figura 4-2 muestra un documento HTML en
WordPad.

69. 69
Figura 4-2.
WordPad sirve como un buen procesador de texto cuando el documento en el
que se trabaja es demasiado largo para que el Bloc de notas pueda tratarlo.
¡Pruébelo!
Muestre la página Web que prefiera en un explorador y haga clic en Source
(Código fuente) o View Source (Ver código fuente) en el menú View (Ver). Se
abre un documento del Bloc de notas que muestra una versión de texto del
código HTML de la página.
Al igual que Word versión Procesadores de texto y editores HTML de grado medio
2002, otros programas de
Office XP (versión 2002),
El siguiente escalafón en los editores HTML empieza a entrar en el territorio
como Microsoft Excel y de WYSIWYG. Podríamos llamar a los procesadores de texto de grado medio
Microsoft PowerPoint, “aplicaciones WYSIWYG ligeras” porque ofrecen características de procesador
permiten guardar los
documentos como
de texto junto con una serie limitada de capacidades avanzadas de los editores
páginas Web. HTML. Dado que la mayor parte de las aplicaciones son procesadores de texto
o editores HTML completos, sólo aconsejamos una aplicación de esta
categoría: Microsoft Word versión 2002.
Word 2002 permite usar una interfaz de procesamiento de texto conocida para
crear documentos HTML a través del comando Guardar como. Cuando guarda
un documento de Word como página Web, Word crea automáticamente el
código fuente HTML. En la figura 4-3 se ilustra un documento HTML en las
vistas Diseño Web y Código fuente HTML.

70. 70
Figura 4-3.
Word 2002 ofrece una vista Diseño Web y otra vista Código fuente HTML.
Editores HTML avanzados
El tercer grupo de editores HTML incluye las aplicaciones avanzadas que
permiten crear y modificar páginas Web mediante interfaces gráficas. En la
mayor parte de los editores avanzados, puede ver y modificar el código fuente
HTML directamente además de trabajar en la interfaz WYSIWYG. Asimismo,
la mayoría de los editores avanzados ofrecen una característica de presentación
de vista previa que permite ver cómo aparecerá una página Web en línea antes
de verla en el explorador. Las características específicas para el Web se suelen
incorporar también en los editores HTML avanzados. (Sabemos que esto
último suena un poco impreciso, pero al crear una página Web en FrontPage,
en la lección 7, le introduciremos en el uso de algunas herramientas específicas
para el Web de modo que podrá saber a lo que nos referimos.) Los editores
HTML avanzados más utilizados están muy bien documentados en línea así
que, en lugar de desperdiciar espacio en estas páginas resumiendo las
estadísticas en línea, hemos proporcionado varias direcciones URL para los
sitios Web donde se ofrecen las aplicaciones que aparecen en nuestra breve
lista. Aunque hay otros editores disponibles, estos seis son algunos de los
programas más populares. (Revise la dirección del sitio Web de cada producto
para poder comparar más fácilmente las características y precios.)
■ Adobe GoLive (www.adobe.es/products/golive/main.html)
■ CoffeeCup HTML Editor (coffeecup.com/editor) (en inglés)
■ HotDog Professional (http://www.sausage.com/hotdog-
professional.html) (en inglés)
■ UltraEdit (www.ultraedit.com) (en inglés); este editor puede estar
disponible en su versión localizada
■ Macromedia Dreamweaver
(www.macromedia.com/es/software/dreamweaver)

71. 71
■ Microsoft FrontPage 2002
(www.microsoft.com/spain/Office/frontpage/default.asp); también
se incluye con el conjunto de programas Microsoft Office 2000 XP
Developer
■ NetObjects Fusion MX
(www.netobjects.com/products/html/nfmx.html) (en inglés)
Nota
Además de HotDog Professional, Sausage Software ofrece un editor HTML
WYSIWYG para principiantes, denominado HotDog PageWiz, y un editor
HTML para niños mayores de seis años, denominado HotDog Junior.
Explore la página principal de Sausage Software y encontrará otras
herramientas útiles de creación de páginas Web. Después de todo, si
nos pregunta, cualquier compañía llamada Sausage Software (Software
Salchicha) que ofrezca editores HTML que se llamen HotDog (Perrito
caliente) merece un poco de atención adicional.
Entre las aplicaciones anteriores, Dreamweaver probablemente sea el editor
Web más popular (aunque el más difícil de aprender) entre los profesionales
de diseño, por diversas razones, como es el hecho de que mantiene el código
escrito a mano, permite a los usuarios obtener una vista previa de las páginas
en varios exploradores y realiza comprobaciones automáticas de los posibles
conflictos que existan entre ellos. Por otro lado, FrontPage (que se ilustra en
la figura 4-4) es el editor HTML avanzado más sencillo de aprender para los
principiantes y proporciona código HTML bastante limpio. Además, es popular
entre los usuarios empresariales. Como hemos mencionado anteriormente, se
hará una idea de cómo crear páginas Web en FrontPage en la lección 7.
Nota
Tenga en cuenta que el entorno de creación de una página Web no es fijo.
En ocasiones, es más rápido usar una aplicación WYSIWYG avanzada (en
especial, al cambiar el tamaño de las tablas), pero otras veces, un cambio
rápido en el Bloc de notas nos será más útil.

72. 72
Figura 4-4.
Microsoft FrontPage es un programa avanzado de desarrollo Web muy
utilizado, que resulta bastante fácil de aprender.
Aplicaciones de gráficos
Cuando se trata de desarrollar una página Web, las aplicaciones de gráficos
ocupan un segundo meritoso lugar detrás de los muy importantes editores
HTML o procesadores de texto. Después de todo, la mayor parte de las páginas
usa gráficos y tendrá que crear o retocar los que incluya en las suyas. Por lo
tanto, necesitará tener un paquete de gráficos instalado en su sistema.
Nuestros programas favoritos (o al menos los que parece que usamos con más
frecuencia) son Jasc Paint Shop Pro y Adobe Photoshop; ambos aparecen en la
lista de aplicaciones de gráficos con la que está a punto de toparse a
continuación del párrafo siguiente.

73. 73
Con independencia del paquete de gráficos que utilice, las cinco habilidades
más importantes que tiene que adquirir al usar un programa de gráficos son
recortar, cortar, cambiar el tamaño, cambiar el color y guardar los archivos en
otro formato diferente. Por tanto, revise los archivos de ayuda de su aplicación
para pulir su técnica. Ahora, aquí tiene cinco programas de gráficos conocidos
junto con sus direcciones Web (le recomendamos que visite los sitios Web
enumerados con el fin de conseguir los detalles y precios de los productos):
■ Fireworks (www.macromedia.com/es/software/fireworks) Esta
aplicación es fácil de usar y especialmente cómoda cuanto se
necesita crear botones y otros gráficos básicos para un sitio Web.
Macromedia desarrolló Fireworks específicamente para la creación
de gráficos Web.
■ LView Pro (www.lview.com/index1024.htm) (en inglés) Este
programa de gráficos shareware es muy conocido. Incluye varias
características típicas de gráficos además de utilidades de páginas
Web, por ejemplo, una herramienta para crear páginas de galerías
de fotografías en línea.
■ Paint Microsoft Paint es un programa de gráficos que se incluye
con Windows. Se trata de un paquete de gráficos con menos
funciones en comparación con otros pero resulta una herramienta
gráfica práctica cuando se está en un apuro o se desea hacer
rápidamente algunos ajustes poco importantes.
■ Paint Shop Pro (www.jasc.com/products/paintshoppro) (en inglés)
Este programa de gráficos tiene muchas características y un precio
razonable, y lo utilizan muchos diseñadores. Visite el sitio Web de
Jasc y descargue un programa de demostración gratuito.
■ Photoshop (www.adobe.es/products/photoshop/main.html)
Probablemente sea el programa de edición de imágenes más
importante. Puede resultarle un poco difícil de utilizar cuando
empiece a aprenderlo pero una vez que domine los comandos,
le gustará mucho la flexibilidad de la aplicación. Con frecuencia,
imitamos los sitios donde se usa Photoshop antes de crear páginas
Web reales en un editor HTML. Su principal desventaja es que es
bastante caro para los diseñadores casuales.
Jerga: los gráficos basados
Además de las aplicaciones de gráficos anteriores, también puede usar
en vectores son imágenes programas de ilustraciones para crear gráficos basados en vectores. En un
hechas con líneas y formas gráfico basado en un vector, puede mover, cambiar el tamaño y manipular
en lugar de con píxeles y
de cualquier otro modo los elementos de una imagen, por ejemplo, puede
sombras.
girar una forma completa. Los programas de ilustraciones basadas en vectores
que suelen resultar prácticos al crear páginas Web son Adobe Illustrator
(www.adobe.es/products/illustrator/main.html), Macromedia Freehand
(www.macromedia.com/es/software/freehand) y CorelDraw
(www.es.corel.com).

74. 74
¡Pruébelo!
Si desea incluir un GIF animado en una página Web pero no le entusiasma la
idea de comenzar desde el principio, se alegrará de oír que el CD-ROM de
multimedia de Office XP contiene varias animaciones pequeñas que puede usar
en las páginas Web. Para insertar un GIF animado:
1 Abra Word (u otra aplicación de Office), muestre el menú Insertar,
elija Imagen y, después, haga clic en Galería de imágenes.
2 En el panel de Galería de imágenes, busque un elemento de la
galería y haga doble clic en alguna imagen que muestre una
estrella dorada.
3 Para ver una animación en acción, abra el menú Archivo y haga
clic en Vista previa de páginas Web.
Si sigue nuestra sugerencia anterior, debería insertar los componentes animados
con moderación. Las animaciones pueden llegar a resultar molestas, lo que
quitaría mérito a su página en lugar de aportarle encanto.
Programas de animación de gráficos
GIF, de mapas de imágenes, de
creación de pancartas y mucho más
Las páginas Web incorporan todo tipo de baratijas, incluidos elementos
desarrollados con tecnologías muy sonoras como Páginas Active Server, Java,
Flash, etcétera. Además, puede crear archivos de audio y vídeo para usarlos en
el Web. Aunque nos fascinan tanto estos temas como las técnicas de diseño de
páginas Web básicas, la creación de estos elementos no es uno de los objetivos
de estas lecciones. Nuestro fin es lograr que consiga crear y utilizar páginas
Web. Por lo tanto, nos guardaremos los caprichos para otro curso. Si tiene
ganas de adquirir algunas mañas adicionales para la elaboración de sus páginas,
le sugerimos que empiece por aprender a crear GIF animados, mapas de
imágenes y pancartas. A continuación se enumeran algunos sitios que puede
encontrar de utilidad:
■ l
Tenga en cuenta que puede encontrar un buen número de programas de
creación de archivos GIF animados, de pancartas y de mapas de imágenes
en línea. Además, algunos de los programas de gráficos que mencionamos
anteriormente en esta lección (como Fireworks y Paint Shop Pro) tienen
integradas características de mapas de imágenes e imágenes GIF animadas.

75. 75
Las tres aplicaciones anteriores se enumeran simplemente como ejemplos que
pueden ayudarle a comenzar su búsqueda.
Utilidades FTP
En último lugar, puede que necesite alguna de esas misteriosas utilidades FTP.
En realidad, las utilidades FTP no son en absoluto misteriosas, pero siempre
que hacemos mención a las siglas “FTP” ante personas que nunca las habían
oído antes, el color parece huir de su cara. Básicamente, las utilidades FTP son
programas que permiten copiar archivos enteros de un equipo a otro a través de
Internet. Por ejemplo, siempre que completamos una lección, copiamos con
FTP sus gráficos en Microsoft Press, en la ciudad de Redmond (en Washington,
Estados Unidos), incluso aunque estemos en el (demasiado) soleado Arizona y
en el (demasiado) lluvioso Oregon.
Sugerencia
Es posible que no necesite usar un programa FTP si va a crear una página
Web en un grupo o comunidad en línea. Asimismo, si usa el Asistente para
la publicación en Web de Microsoft, Mis sitios de red o una utilidad de
publicación de un editor HTML avanzado con el fin de cargar las páginas,
no tendrá que usar un programa FTP en principio. Sin embargo, finalmente
podría desear usarlo para eliminar, copiar y administrar de cualquier otra
forma los archivos en línea. En la lección 8, le ponemos al corriente de los
detalles de la administración de archivos en línea, porque sentirse cómodo
usando una aplicación FTP puede resultarle práctico.
Puede encontrar numerosos programas FTP en línea, muchos de los cuales son
aplicaciones shareware. Los programas FTP más usados son, entre otros:
■ BulletProof FTP (www.bpftp.com) (en inglés) Esta aplicación
proporciona una intuitiva interfaz con la funcionalidad de “arrastrar
y colocar”, al igual que otros de los programas FTP más usados.

76. 76
■ CoffeeCup Direct FTP (www.coffeecup.com/software) (en inglés)
Este programa sirve como aplicación FTP que también permite la
edición de páginas HTML en línea. En la página de descargas del
sitio, encontrará que CoffeeCup Software también proporciona
aplicaciones de mapas de imágenes, creación de botones y
creación de GIF animados, entre otros productos.
■ CuteFTP (www.globalscape.com/cuteftp) (en inglés) Esta popular
aplicación FTP de fácil uso lleva mucho tiempo utilizándose y es
nuestra favorita para PC. Con CuteFTP, puede arrastrar y colocar
los archivos para transferirlos desde su equipo a otro equipo
remoto y viceversa. Entre otras aplicaciones, GlobalSCAPE
también ofrece un editor HTML (CuteHTML) y una aplicación de
mapas de imágenes (CuteMAP).
■ Fetch (www.fetchsoftworks.com) (en inglés) Recientemente,
Fetch se ha actualizado con la versión 4.0.2 (antes, ¡llevaba sin
actualizarse desde 1997!). El diseño de Fetch está enfocado a
hacer que el acceso a los sitios FTP sea lo más sencillo posible.
Está disponible gratuitamente para instituciones educativas y
organizaciones sin ánimo de lucro; los demás deben pagar la
cuota de shareware.
Ahora que conoce vagamente lo que hacen los programas FTP y que puede
descargarlos del Web, no se preocupe demasiado por ellos. En este momento,
con que sepa que existen es suficiente: si no puede esperar, puede descargar
una aplicación FTP y podrá cargar sus páginas en cuanto las cree, pero no
tiene que hacerlo ahora. Le ayudaremos con los programas FTP y con la
administración de los archivos en la lección 8. Pero antes, deseamos ocuparnos
de cosas más divertidas en el resto de las lecciones.
Un poco acerca de exploradores
Estaríamos completamente perdidos si concluyéramos esta lección sin
Dos procesadores (o incluso
dos versiones de un ocuparnos de la herramienta de aplicación de software más obvia de todas:
explorador) no procesan el un explorador. Necesita tener un explorador (o varios) instalado para poder
código HTML exactamente obtener una vista previa de sus páginas antes de publicarlas en línea. Recuerde
del mismo modo; por lo tanto,
al diseñar páginas Web,
que los exploradores son las aplicaciones que interpretan las páginas HTML.
véalas en tantos Por desgracia, no todos lo hacen exactamente de la misma forma. En
exploradores como sea consecuencia, una página que diseñe y vea en Microsoft Internet Explorer
posible antes de publicar
el sitio.
podría mostrarse muy fácilmente como un revoltijo espantoso en otro
explorador. Incluso las páginas bien diseñadas parecen algo diferentes en
distintos exploradores. Para ver una ilustración de este fenómeno, observe las
diversas capturas de pantalla de la figura 4-5.

77. 77
En la figura 4-5, puede ver las anomalías siguientes:
■ Las viñetas predeterminadas de Netscape Navigator son mayores,
tanto en los equipos Macintosh como en los basados en PC, que
las de Internet Explorer.
■ El espacio de los márgenes (o desplazamiento) alrededor de los
perímetros de la página varía en cada explorador. Observe que las
ventanas del explorador Internet Explorer dejan más espacio de
margen alrededor del gráfico de la parte superior izquierda que las
ventanas del explorador Navigator.
Figura 4-5.
Al ver la misma página Web en varios exploradores, se demuestran las
pequeñas anomalías que surgen en las páginas cuando se ven en línea.
■ El tamaño de fuente predeterminado es más pequeño en PCs que
en equipos Macintosh tanto en Internet Explorer como en
Navigator, lo que puede afectar al modo en que se muestra y se
ajusta el texto.
■ Como consecuencia de las diferencias en la fuente y el espaciado,
encima del final de la página Web aparecen cantidades variables
de información.
■ El ancho de las ventanas de los exploradores difiere. Observe
cómo abarca el gráfico de la barra de título toda la ventana en un
par de casos y cómo aparece con un espacio en blanco adicional
en los demás.

78. 78
Diseñamos la página Arts Camps for Kids para que funcionara bien tanto en
Internet Explorer como en Navigator, pero puede ver que sigue habiendo
ligeras diferencias que escapan del control del diseñador.
En el Web existen varios exploradores. Puede que desee o no comprobar que
sus páginas se muestran como deben en todos ellos. Para la mayor parte de los
diseñadores, con asegurarse de que las páginas se muestran de modo correcto
en los más importantes (Internet Explorer y Navigator) es suficiente;
conjuntamente, estos dos exploradores suman más del 90 por ciento de todos
los exploradores que tienen acceso a Internet. Desde luego, siempre debe
considerar su audiencia. Si sabe que los visitantes de su sitio van a usar el
explorador Opera, sería mejor que se asegurara de si ve bien en él. Para
contribuir a aumentar sus conocimientos, a continuación incluimos una lista
breve de otros exploradores que puede encontrar al acecho en el Web:
■ America Online usa una versión adaptada de Internet Explorer
(webmaster.info.aol.com) (en inglés).
■ Lynx es un explorador de texto (lynx.isc.org/current) (en inglés).
■ Mozilla es un explorador Web diseñado para quienes desean crear
productos y paquetes basados en Mozilla (una gran parte del
explorador Netscape Communicator se basa en el código de
Mozilla), pero el público general puede usar el explorador también
(www.mozilla.org) (en inglés).
■ Opera es una pequeña aplicación que exhibe un tiempo de
descarga extremadamente bajo (www.opera.com/download),
(en inglés).
Puede ser aconsejable descargar otros exploradores para ver cómo se muestran
sus páginas en ellos. Obtener una vista previa de las páginas Web simplemente
implica mostrar los archivos HTML en la ventana del explorador de forma
local, así que el proceso es rápido y sencillo. Sin embargo, lo más importante es
que se asegure de tener acceso al menos a una versión (para PC o Macintosh)
de Internet Explorer y de Navigator de modo que pueda realizar pruebas y ver
cómo quedan las páginas. No se preocupe: en los siguientes capítulos le
recordaremos algunas veces más la importancia de ver las páginas Web en
varios exploradores y en varias versiones de cada explorador, si es posible.

79. 79
Puntos clave
■ Necesita una conexión a Internet y espacio en un servidor para
mostrar una página Web en línea.
■ Averiguará que hay espacio gratuito disponible en línea en el Web,
particularmente en los grupos y comunidades en línea.
■ Puede adquirir un nombre de dominio y comprar espacio en un
servidor para controlar por completo su sitio Web y dirección Web.
■ Puede utilizar procesadores de texto para crear páginas Web.
■ Los editores HTML abarcan desde programas que sólo usan texto
a interfaces WYSIWYG.
■ Las aplicaciones de gráficos permiten crear gráficos Web,
modificar imágenes y crear maquetas de las futuras páginas Web.
■ Puede encontrar programas de animaciones de gráficos GIF, sitios
de creación de pancartas y utilidades de mapas de imágenes
(además de montones de programas de software gratuito y
shareware).
■ Las utilidades FTP permiten copiar archivos de un equipo a otro
equipo remoto.
■ No todos los exploradores están diseñados igual: pueden mostrar
la misma página Web de diversas formas.
■ Siempre debe ver sus páginas Web en Internet Explorer y en
Netscape Navigator (como mínimo) antes de publicarlas en línea.

80. 80
LECCIÓN 5
Plan de ataque
Una vez completada esta lección, podrá:
 Definir los objetivos de un sitio Web.
 Analizar la audiencia.
 Crear un a plano técnico de un sitio Web.
 Diseñar una página principal y prepararse para crear un sitio.
Ahora que le desbordan los conocimientos acerca del Web, obtenidos en las
lecciones 1 a 4, vamos a guiarle en el proceso de planeamiento de un sitio Web.
Conoce todos los elementos que tiene que considerar; ahora es simplemente
cuestión de consolidar la información en algunos puntos y listas de
comprobación que debe revisar. Como probablemente habrá oído a lo largo
de su vida, pararse a pensar un poco antes de actuar puede ahorrarle más de un
dolor de cabeza. No es de extrañar que esta filosofía siga siendo válida también
en el desarrollo para el Web: un poco de preparación y previsión adelantan
mucho camino en la consecución del éxito.
Esperamos que vea esta lección como un puente entre la teoría y la práctica en
relación al Web. En las lecciones 1 a 5, hemos cubierto numerosos conceptos
básicos del diseño Web; en las lecciones 6 a 8, tendrá la oportunidad de aplicar
lo que ha aprendido a los ejercicios prácticos y proyectos en los que creará la
estructura general de tres sitios Web (uno en cada lección).
En las lecciones 6 a 8, puede volver a crear las páginas Web exactamente
como describimos o bien usar las páginas Web de ejemplo como plantillas para
personalizar las suyas propias. En cada sitio Web que le presentamos en estas
lecciones, resumimos el proceso de planeamiento que hemos completado antes
de crear la página real. En las lecciones 6 a 8 incluimos asimismo una breve
sección acerca del planeamiento, así que sabrá cómo ha evolucionado cada
página durante la fase del planeamiento del sitio y por dónde va en el desarrollo
práctico del proyecto. Si va a personalizar alguno de los sitios Web que hemos
incluido como ejemplos, tendrá que dedicar también algo de tiempo a planearlo.
Finalmente, una vez haya asimilado todos los conocimientos de este curso (y
tenemos toda la confianza en que lo hará), tendrá que dirigir sus propias sesiones
de planeamiento. Por lo tanto, diseñamos esta lección para ofrecer una idea
general de cada fase de planeamiento sucintamente y con un formato que facilite
la referencia. En el futuro, si alguna vez se impresiona ante las tareas de definir
los objetivos de un sitio Web, identificar su audiencia, diseñar un marco de
trabajo o crear sus propias páginas Web, retome este curso y vuelva a esta lección
para ayudarle a poner en marcha sus procesos de pensamiento.

81. 81
Como apoyo para ilustrar el proceso de planeamiento, vamos a observar la
evolución del sitio Web de Curiosity Shoppe. En la figura 5-1 se muestra la
versión final de la página Web, en inglés, de esta tienda
(www.creationguide.com/cshoppe) (en inglés). En las secciones siguientes,
tratamos algunas de las cuestiones que consideramos al planear el sitio Web de
Curiosity Shoppe y explicamos el efecto que tuvieron nuestras decisiones en el
diseño final.
Figura 5-1.
La página principal de Curiosity Shoppe presenta un escaparate de un sitio
Web para una tienda de artículos coleccionables.
Definición de los objetivos
Antes de crear una página Web o un sitio Web, primero debe abordar el
proyecto desde una perspectiva más amplia. Tiene que considerar claramente la
finalidad del sitio y sus objetivos. En concreto, debe responder a las preguntas
siguientes:
■ ¿Por qué deseo una página o un sitio Web?
■ ¿Cuáles son mis metas inmediatas para el sitio Web?
■ ¿Cuáles son mis metas a largo plazo para el sitio?
■ ¿Cuál es mi escala de tiempo?

82. 82
Para el sitio de Curiosity Shoppe, las respuestas a las cuestiones precedentes
eran bastante sencillas. En primer lugar, los propietarios de Curiosity Shoppe
deseaban hacer que su tienda estuviera fácilmente accesible a más clientes a
través de su presencia en línea. Sus objetivos inmediatos eran informar a la
gente acerca de la tienda, proporcionar un medio de contacto y anunciar sus
productos y ubicación. Sus planes a largo plazo son ofrecer toda su gama de
productos para vender en línea y actualizar la página principal diariamente con
una oferta especial. Por último, la escala de tiempo de los propietarios del sitio
se puede resumir como sigue: él sitio estático en línea (a disposición de los
visitantes) debía estar preparado 2 meses después del comienzo de la página
principal; la característica de venta debía ser totalmente funcional 6 meses
después de poner en el Web la página principal; y una gama completa de
productos en línea debía estar disponible en los siguientes 12 meses desde
dicha fecha.
Es muy probable que sus objetivos y su escala de tiempo sean menos complejos
que los de Curiosity Shoppe. Por ejemplo, puede que lo que pretenda sea
simplemente crear un currículum, publicarlo en el Web durante un mes y
agregar actualizaciones ocasionalmente, cuando sea necesario.
Llegar a conocer al público
Cuando haya definido los objetivos de su sitio, tendrá que considerar quién va a
visitar sus páginas Web. En otras palabras, debe pensar en los destinatarios o
público pretendido. Debe tener al menos cierta percepción de las personas que
desea que visiten su espacio Web. Necesita abordar este paso del planeamiento
en el proceso porque muchas decisiones referentes al diseño y contenido se
basan en quiénes constituyen su público.
La mejor forma de llegar a conocerlos es hablar con ellos, si es posible.
Considere la posibilidad de entrevistarles o realizar una encuesta a las personas
que vayan a ver sus páginas. Por ejemplo, si está creando un sitio para la
familia, llame a sus familiares y averigüe lo que les gustaría ver en él. Además,
considere la forma en que los usuarios se conectarán a la página. ¿Son usuarios
Web típicos que usan conexiones de acceso telefónico? Si es así, haga que sus
páginas sean pequeñas y el diseño bastante sencillo. ¿Está diseñando un sitio
para jugadores en línea? Entonces saque provecho de las conexiones de alta
velocidad y las tecnologías más punteras. ¿Diseña un sitio para jóvenes? Los
colores brillantes funcionan bien. Tiene la idea. Como ayuda para analizar los
destinatarios de su sitio, responda a las cuestiones siguientes:
■ ¿Quiénes conforman el núcleo del publico previsto? Su
respuesta podría incluir categorías como clientes, alumnos,
empresarios, miembros de una familia, almas gemelas, miembros
de un club y muchos más.
■ ¿Qué desean descubrir en el sitio? Esta cuestión difiere de
preguntarse qué desea usted contarles: aquí es donde en realidad
debe escuchar a los probables usuarios del sitio para poder
diseñarlo en consecuencia.

83. 83
■ ¿Qué grado de experiencia con el Web tienen los destinatarios
del sitio Web? Tendrá que averiguar si la mayor parte de los
usuarios serán principiantes, exploradores casuales del Web o
campeones del ciberespacio. Conocer el grado de pericia de los
usuarios es fundamental porque, aunque los más experimentados
pueden comprender con frecuencia “lo que está ocurriendo” en
sitios complejos o con un diseño exclusivo, por lo general los
principiantes requieren algo más de orientación. Por ejemplo, si
dedica el sitio a usuarios novatos, debería hacer un esfuerzo por
identificar de forma clara y coherente su estructura con elementos
sencillos de exploración; guarde los diseños y esquemas de
exploración vanguardistas para un público más avanzado.
■ ¿Qué tipos de conexiones a Internet y capacidades de ancho
de banda tendrán los usuarios? Conocer si los destinatarios se
conectan a través de un simple módem, una red corporativa interna
(conocida como una intranet) o una conexión de alta velocidad
como una Línea de suscriptor digital (DSL, Digital Subscriber Line)
marcará la diferencia en el modo en que tendrá que diseñar el sitio
Web, incluidos los tipos de elementos que incorporará. Por
ejemplo, si tiene la seguridad de que los usuarios que vean su
página van a obtener acceso al sitio Web a través de conexiones
de alta velocidad, dispondrá de más libertad para incluir clips de
vídeo y numerosos gráficos con un riesgo mínimo de perder a
alguno. Sin embargo, si incluye vídeo y muchos gráficos en un sitio
Web al que tienen accesos usuarios con conexiones de acceso
telefónico, se arriesgará a perderlos antes de que puedan ver el
sitio por completo porque, comprensiblemente, se cansarán de
esperar a que los elementos grandes se descarguen.
■ ¿Dónde se encuentra su público principal? Tendrá que
determinar si las personas visitan su sitio mientras están en el
trabajo, en la universidad, en la oficina, en la sala de estar de
su casa, en un cibercafé, en el barrio o en cualquier otro lugar.
Esta especificación tiene una estrecha relación con la cuestión
precedente: si sabe dónde se encuentra la audiencia clave, tendrá
más probabilidad de hacerse una idea acertada de los tipos de
conexiones que usarán en el acceso al sitio. Además, la ubicación
puede entrar en el juego si está diseñando un sitio regional en
lugar de uno nacional. Por ejemplo, un sitio de David Bowie podría
tener una audiencia internacional, mientras que un sitio de
vigilancia de bloques de pisos probablemente se destinaría al
barrio. Esta diferenciación es similar a las variaciones de la
información que se encuentra en una sección de primera plana de
un periódico, que se correspondería con un sitio Web con un
enfoque nacional o internacional, en comparación con la sección
local, que se correspondería con un sitio Web orientado a una
localidad.

84. 84
■ ¿Cuál es el grupo de edad típico entre los destinatarios?
Tendrá interés en asegurarse de que su sitio atrae al grupo de
edad al que está destinado. Esta cuestión se deriva del sentido
común: tanto si le gusta como si no, puede hacer algunas
suposiciones generalizadas (aunque cautelosas) relativamente
poco importantes en función de la edad del público y estas
suposiciones pueden ayudarle en el proceso de creación de la
página Web. Conocer la edad típica de los destinatarios del sitio
(donde “típica” es la palabra clave) ayuda a tomar decisiones de
diseño apropiadas. Por ejemplo, los fondos en rosa Barbie para los
preadolescentes no quedan bien en sitios de deportes que estén
destinados a hombres de entre 18 y 40 años. Asimismo, los
parámetros de edad ayudan a elegir las palabras (particularmente,
el argot y los coloquialismos) de forma acertada. Además, la
información de edad permite crear metáforas significativas.
Finalmente, los detalles de la edad pueden ayudar a determinar
los tipos de información que se incluirá en las páginas Web.
Por ejemplo, si está creando un sitio para jóvenes, no ofrecerá
información de pólizas de seguros a todo riesgo pero podría
considerar seriamente la posibilidad de incluir un juego de
trivialidades sobre Harry Potter.
■ ¿Cómo encontrarán los usuarios el sitio? Deseará saber si los
visitantes de su sitio tienen noticias de él a través del boca a boca,
en directorios en línea, en directorios Web impresos o libretas de
teléfonos, a través de vínculos de una página “primaria”, como
resultado de una consulta en un motor de búsqueda, gracias a
anuncios comerciales pagados en TV o radio, etcétera. Así sabrá
mejor cómo anunciar y hacer propaganda de su sitio.
Sugerencia
Después de haber entrevistado, encuestado y hablado con la gente;
escuchado sus comentarios; y resumido su información, recuerde visualizar
específicamente a una persona real en lugar de un perfil genérico mientras
crea el sitio Web y diseña sus páginas.

85. 85
Esquematización de los planos
técnicos del sitio
Una vez establecidos sus objetivos y definido su público, estará preparado para
diseñar el marco del sitio Web. Si es posible, el primer paso que siempre debe
dar es recopilar el contenido antes de llevar a cabo el diseño. La organización
del contenido, o al menos de sus conceptos principales, puede ayudarle a
organizar el sitio en conjunto de una manera lógica.
Cuando haya reunido las principales clases de información que desea incluir
en el sitio (el texto y los gráficos no tienen que estar pulidos en este momento),
debe averiguar la mejor forma de presentar la información. Por ejemplo, puede
organizar el sitio de diversas maneras, como son:
■ Alfabéticamente
■ Cronológicamente
■ Gráficamente
■ Jerárquicamente
■ Numéricamente
■ Aleatoriamente (no se recomienda, pero ahí está)
■ Por temas
La mayor parte de los sitios se organizan de forma jerárquica. Un sitio
jerárquico presenta una página principal que contiene un texto pegadizo
de introducción a sus páginas principales. Esta estructura la utilizan los
diseñadores y la aprecian en gran medida los usuarios (que en su mayoría
sólo desean usar las páginas Web y no comprender cómo se organizan).
Otro aspecto crítico (aunque ciertamente menos excitante) de la organización
del sitio tiene que ver con la asignación de nombre a los archivos. Después de
todo, básicamente el sitio está formado en su totalidad por archivos, así que su
organización debe incluir la sistematización de los mismos. Antes de que
lleguemos a la lista de comprobación del planeamiento de los sitios, vamos
a echar un vistazo a algunas de las costumbres existentes en relación a la
denominación de los archivos, que tendrá tiempo de implementar más
adelante pero sobre las que puede meditar ahora.

86. 86
Mantenga controlados los archivos
Como ya sabe, las páginas Web suelen constar de algunos archivos que se
combinan para crear la apariencia de una sola página. Asimismo, un sitio Web
consta de varias páginas Web (que a su vez están formadas por diversos
archivos). Debido a esta naturaleza multiarchivo de las páginas y sitios Web, va
a tener que seguir un plan para asignar nombre a los archivos de su sitio Web y
organizarlos. (En las lecciones 6 y 7, explicamos cómo hemos organizado los
archivos de cada sitio, así que tendrá muchas oportunidades de hacerse con la
idea de cómo se denominan y organizan los archivos antes de finalizar este
curso.) En su mayor parte, un sitio Web normal está formado por la siguiente
estructura simple, que se muestra en la figura 5-2:
■ Directorio principal Contiene archivos HTML y un directorio de
imágenes. Puede proporcionar cualquier nombre para este
directorio cuando diseñe sus páginas en el equipo local. Al cargar
las páginas en un servicio de alojamiento de sitios Web (host),
probablemente colocará el contenido de la carpeta del directorio
principal en una carpeta en línea denominada “Web” y copiará toda
la carpeta de imágenes (la carpeta y todo su contenido) en ella.
■ Directorio de imágenes Contiene los archivos de imágenes GIF y
JPEG (o JPG) que se usan en las páginas Web. Este directorio
suele almacenarse dentro del principal.
Figura 5-2.
Los directorios y archivos del sitio Web se almacenan de forma local antes de
copiarlos a un servidor conectado a Internet.

87. 87
Observe en la figura 5-2 que el directorio principal contiene en este momento
cuatro archivos HTML: contact.html, history.html, index.html y products.html,
uno para cada una de las páginas principales del sitio Web. Tenga en cuenta
que el nombre de un archivo HTML es el que aparece en la dirección URL de
la página Web. Por ejemplo, para visitar la página de productos de Curiosity
Shoppe, especificaría www.creationguide.com/cshoppe/products.html (en
inglés). Como puede ver, la dirección URL anterior consta del nombre de
dominio (www.creationguide.com) (en inglés), el nombre del directorio o
carpeta (cshoppe) y un nombre de archivo (products.html).
En la mayoría de páginas principales y en muchas subpáginas, puede haber
notado que no tiene que especificar un nombre de archivo. Por ejemplo,
cuando visita la página principal de Microsoft, simplemente escribe el nombre
de dominio de Microsoft, www.microsoft.com/spain/, o, si visita la página
Creation Guide Resources, escribe www.creationguide.com/resources
(en inglés). Si no se indica ningún nombre de archivo HTML después de un
nombre de dominio o directorio (carpeta), muchos servidores mostrarán un
archivo con un nombre concreto de forma predeterminada, como indice.html,
que varía en función de los servidores. Pregunte en el servicio de alojamiento
Web qué nombre debe usar para su página principal (o haga algunas pruebas
con nombres de archivo en línea para ver cuál funciona de forma
predeterminada); 9 de cada 10 veces, la página principal se llama index.html
y es la apuesta más segura si duda.
Compruebe que todos los
Dado que los nombres de archivo HTML aparecerán dentro de la dirección
nombres de archivo HTML URL de la página Web, debe seguir una reglas sencillas para facilitarle la vida
tienen la extensión .htm o tanto a usted, como a los usuarios:
.html, y que los nombres de
archivo de imagen tienen la ■ Haga que los nombres de archivo sean breve, sencillos y
extensión .gif, .jpeg o .jpg. significativos Es posible que los usuarios deseen tener acceso a
una página Web directamente, así que haga que la dirección URL
les resulte fácil de escribir y recordar. Por ejemplo, use un archivo
denominado “productos.html” en lugar de “p1-2002m.html”.
■ Evite el uso de símbolos y signos de puntuación Muchas
personas encuentran que escribir símbolos y añadir signos de
puntuación ralentiza su escritura considerablemente y disminuye
de forma drástica la precisión en la redacción. Además, los
símbolos y los signos de puntuación pueden crear nuevos caminos
para la confusión. Por ejemplo, si la página se llama www.creation-
guide.com, los usuarios podrían olvidar fácilmente el guión y
escribir www.creationguide.com (¡con lo que se perderían su
página y visitarían la nuestra por error!).

88. 88
■ Use un carácter de subrayado (_) para indicar un espacio
Algunos servidores antiguos no reconocen los espacios, así que
debe usar guiones bajos para indicar los espacios en blanco.
Asimismo, se produce el mismo problema con los espacios que
con los símbolos y signos de puntuación: los espacios se olvidan
con facilidad y dejan hueco para los errores (en gran cantidad).
■ Use todas las letras en minúsculas De nuevo, piense en la
“facilidad de uso” para los visitantes del sitio Web. En los nombres
de archivo de las direcciones URL se distinguen mayúsculas y
minúsculas, y una letra escrita en mayúsculas al azar puede perder
a más de un visitante. Los nombres de archivo con todas las letras
en minúsculas son fáciles de escribir y de recordar.
Asignación de nombre para
las imágenes
Además de asignar nombre a los archivos HTML, tendrá que designar los
archivos de imágenes. Por lo general, los usuarios no tienen acceso a los
archivos de imágenes directamente, sino que las páginas HTML hacen
referencia a estos archivos cada vez que necesitan mostrarlos. Por lo tanto,
tiene una cierta libertad de acción en lo que respecta a la denominación de las
imágenes. Un truco práctico que utilizamos para denominar las imágenes es
identificar su finalidad con un prefijo sencillo incorporado al nombre de los
archivos, lo que nos ayuda a identificarlos y encontrarlos con rapidez cuando
los necesitamos. En concreto, anteponemos el nombre de las imágenes con p_,
b_ o t_. Una imagen p_ es una verdadera imagen (p, de picture, en inglés).
Por ejemplo, p_máscara indica que el archivo es la imagen de una máscara.
Una imagen b_ es un botón. Por ejemplo, b_productos indica que la imagen es
la barra de exploración del botón Productos. Y una imagen t_ hace referencia a
una barra de título. Por ejemplo, t_contactos especifica que la imagen es la
barra de título usada en la página Contactos.
En este momento, debe entender que la organización desempeña un papel
importante en el planeamiento de un sitio Web. Debe ordenar sus pensamientos
y empezar a considerar cómo sistematizar los archivos (que, de nuevo, son
básicamente las páginas Web y gráficos de los sitios Web). Puede hacer más
eficaz la fase de organización del sitio si realiza las tareas y resuelve las
cuestiones que se presentan en la siguiente lista de comprobación del
planeamiento de un sitio.

89. 89
Cuando haya solventado dichas cuestiones, o mientras tanto, debe preparar un
esquema de la estructura del sitio. En otras palabras, debe ilustrar las relaciones
entre las páginas del sitio y la información con el fin de garantizar que ha
creado un diseño claro del mismo que incluya todos los datos en un formato
fácilmente accesible. La figura 5-3 muestra uno de los esquemas iniciales de
Curiosity Shoppe. Puede crear esquemas incluso más detallados que el
mostrado en la figura 5-3 si incluye una descripción breve de lo que va a
aparecer en cada página. Por ejemplo, en el esquema de la figura 5-3, podría
agregar notas como “La página contact.html contiene un vínculo de correo
electrónico y un mapa que muestra la ubicación de la tienda”.
Figura 5-3.
El esquema de la página de Curiosity Shoppe muestra los nombres de archivo
usados dentro del sitio inicial.
Lista de comprobación del planeamiento
de un sitio
Los elementos de esta lista de comprobación definen las tareas básicas que
debe realizar mientras planea un sitio Web. Aborde cada una de las tareas y
cuestiones enumeradas, y esboce las relaciones de la información del sitio a
medida que realiza su plan:
■ Visite sitios similares para ver lo que le gusta y lo que no, y
averigüe cómo puede hacer que su sitio sea único.
■ Compruebe que el sitio especifica quién es usted y, si es
apropiado, la identidad de su empresa.

90. 90
■ Elija colores que evoquen una emoción apropiada para el sitio.
Compruebe que el esquema de colores presenta un claro contraste
para facilitar la lectura, analice si los colores contribuyen a
conseguir los objetivos del sitio e intente usar colores de la paleta
simplificada para el Web de 216 colores. Como repaso rápido de lo
que son los colores simplificados para el Web, consulte la lección
3. Para ver la paleta de colores simplificada para el Web, abra el
archivo palette216.gif en un programa de gráficos. Este archivo se
encuentra en la carpeta Lesson03 de este curso, en el disco duro.
Compruebe que el punto principal de su sitio se identifica de forma
visible al principio y que no se halla sepultado tras una o dos
páginas, ni falta; además, asegúrese de que cada página indica
claramente su propósito. No desea que los usuarios visiten su
página principal o busquen su sitio a través de una puerta trasera y
se pregunten lo que se supone que deben hacer entonces, tras
encontrar dicho sitio Web.
■ Clasifique su sitio en su propio esquema mental para no perder su
enfoque. Con miras en el diseño, etiquete el sitio como comercial,
informativo, educativo, de entretenimiento, de navegación, para la
comunidad, artístico, personal o de algún otro tipo.
■ Diseñe el sitio para reflejar el modo en que es más probable que
los usuarios exploren sus páginas. Puede hacerse una idea de lo
que desean durante la fase de análisis del público destinatario.
Compruebe que incluye temas “paraguas” (temas importantes, no
nimiedades) en la página principal y que proporciona vínculos más
específicos en cada subpágina. Por ejemplo, incluya un vínculo
Contactos en la página principal y vínculos a los departamentos de
la página Contactos.
■ Asegúrese de que el sitio ofrece a quienes lo ven unas cuantas
formas de ponerse en contacto con usted: la dirección física, la
dirección de correo electrónico, el número de teléfono, una paloma
mensajera, etcétera.
■ Denomine sus archivos de forma apropiada, como se ha explicado
anteriormente en esta lección.
■ Cree nombres de botones fáciles de comprender que reflejen con
claridad la estructura del sitio. Los botones crípticos pueden
parecer imponentes pero tienden a confundir a los lectores, en
especial cuando su esotérica creación no viene acompaña por
ningún texto explicativo.
■ Divida el contenido en unidades lógicas. No divida una página en
dos sólo porque parezca que es demasiado larga. Por otro lado, si
ve una división lógica en una página larga, divídala (pero
asegúrese de que no pierde la página recién creada al sepultar su
vínculo en el sitio).

91. 91
■ Analice la información y haga que la más importante sea la más
obvia y accesible.
■ Determine formas que le permitan crear una apariencia o tema
uniforme en todo el sitio. No olvide incluir un logotipo y usar
vínculos de exploración coherentes en cada página. Tenga en
cuenta que los aspectos de diseño más concretos en relación a la
apariencia y el tema del sitio se examinan con más profundidad en
la siguiente fase del planeamiento, cuando se esbozan la página
principal y las subpáginas.
■ Incluya al menos un elemento que invite a los usuarios a volver,
por ejemplo, un componente que se actualice diaria o
semanalmente, o un salón de chat.
¡Pruébelo!
Rápidamente, piense en tres sitios que haya visitado hace poco. Ahora analice
por qué y la forma en que esos tres sitios le han causado impresión. ¿Hay
algún elemento que pueda adoptar y modificar para su sitio? ¿Eran fáciles
de explorar? ¿Alguno de los elementos que no le gustó destaca en su mente?
Use su experiencia personal en su beneficio. Después de todo, sabe lo que le
gusta cuando explora el Web.
Sentando las bases de su página
principal
Una vez se haya depositado el polvo suficiente en el esquema de planeamiento
del sitio (con lo que lo habrá meditado también de forma suficiente), puede
limpiar la pizarra y empezar a diseñar su página principal y sus subpáginas.
En este momento, debe tener una idea muy concisa de lo que la página
principal debe incluir: el logotipo, la barra de título y vínculos a las páginas
más importantes del sitio, entre otros elementos. Sobre todo, debe haberse
preocupado por la faceta práctica del diseño de páginas, por ejemplo, por
determinar la estructura de la asignación de nombres de archivo, el análisis de
su público, la determinación de las limitaciones de hardware, etcétera. En este
momento, sus jugos creativos consiguen hacerse paso mientras su sinapsis
organizativa descansa y rejuvenece. En esta fase de diseño, debe centrar su
atención en el modo en que puede presentar con creatividad todos los
componentes necesarios de la página principal de manera que refleje los
objetivos del sitio, optimice su tema y obtenga de los usuarios la respuesta
“emocional” apropiada. Por ejemplo, los propietarios de la tienda Curiosity
Shoppe deseaban comunicar el sentimiento de que el almacén vende tesoros
que se han descubierto por todo el mundo. Por lo tanto, les sugerimos el tema
del mapa del tesoro y el logotipo N-S-E-W “C”.

92. 92
Cuando haya empezado a pensar en formas creativas de presentar sus ideas,
comience a dibujar diseños y pensamientos. Empezará a ver lo que funciona
mejor y las propias ideas harán que surjan otras hasta llegar a un diseño que
funcione. La figura 5-4 muestra un esbozo de la página principal de Curiosity
Shoppe. Dado que diseñamos la página principal para crear una impresión
única, su esquema es notablemente diferente del correspondiente a las
subpáginas del sitio. Por lo tanto, también dibujamos la página de productos
para ilustrar cómo se mostrarían la barra de título y los vínculos de exploración
en las subpáginas, como se muestra en la figura 5-5. Al dibujar la página
principal, remítase a la lista de comprobación del planeamiento de una,
posteriormente en esta lección, para comprobar que ha tenido en cuenta todos
sus principios.
Figura 5-4.
El dibujo de la página principal de Curiosity Shoppe contiene su información
básica.

93. 93
Figura 5-5.
El dibujo de la página de productos de Curiosity Shoppe muestra cómo difieren
significativamente las subpáginas del sitio Web de la página principal.
Lista de comprobación del planeamiento de una
página principal
Debe comprobar que su página principal incluye los elementos enumerados en
la lista. Si omite algunos a propósito, asegúrese de saber el porqué. Tenga en
cuenta que no se clasifica la importancia de los elementos por el orden; de
hecho, la lista está ordenada alfabéticamente para evitar que ninguno
prevalezca sobre los demás. (Somos tan astutos como para eso.) Compruebe
que de una forma u otra aborda todos los elementos siguientes en relación al
diseño de su página principal:
■ La fecha de creación o revisión
■ Los vínculos de exploración o los botones se identifican fácilmente
y se muestran de forma coherente
■ El icono de la página principal o el logotipo se puede usar en todo
el sitio
■ La información importante se muestra claramente
■ El título es informativo
■ El tema o efecto emocional intencionado se crea mediante las
palabras, los colores, la disposición, las fuentes u otros elementos
■ Hay un logotipo u otro gráfico identificativo, como un escudo
familiar o un código de departamento

94. 94
■ La página de inicio ” engancha” para captar el interés del visitante
(las páginas principales por lo general varían al menos ligeramente
de las subpáginas)
■ Se ha buscado una solución que agiliza la descarga (es cierto, las
imágenes gigantescas quedan realmente mal como fondo y en
realidad no necesita mostrar 90 imágenes en la página principal)
■ El propósito del sitio está claro y los visitantes saben lo que deben
hacer después (aparte de hacer clic en el botón Atrás)
■ El texto largo se divide en párrafos con encabezados secundarios
(si es necesario)
■ Los vínculos de texto se muestran en la parte inferior de la pantalla
■ La esquina superior izquierda se dedica a un uso adecuado,
preferiblemente a mostrar su logotipo
■ Muestra su identidad o la de su organización
Sugerencia
Incluso aunque la lista de comprobación del planeamiento de una página
principal parezca larga, su página principal no debe serlo. Por todos los
medios, evite sobrecargarla. Es mejor agregar un par de vínculos al menú
de exploración en lugar de llenar de información cada esquina (y más allá)
de la pantalla de los usuarios.
Acopio de utensilios y preparación
Después de haber especificado sus objetivos, conocido a su audiencia,
organizado su sitio y diseñado la composición de su página principal, falta un
componente final del planeamiento: reunir las herramientas y utensilios que
necesita. En esta fase también debe asegurarse de que todo el texto está bien
escrito y corregido, los gráficos tienen un tamaño apropiado (que posiblemente
tenga que retocar un poquito cuando el proceso de diseño real de la página
comience), las imágenes están digitalizadas de algún modo (con un escáner o
de otra forma) y dispone de las herramientas para organizar todos los elementos
en las páginas Web. Como puede ver, lo que tiene que hacer en esta etapa es
muy concreto y sencillo, pero llevarlo todo a cabo suele llevar una significativa
cantidad de tiempo, así que debe planearlo apropiadamente. Por suerte, aunque
esta fase suele ser la más larga, podemos describir el proceso de un modo
bastante sucinto. Básicamente, antes de crear su página Web, debe reunir los
elementos enumerados en la siguiente lista de comprobación.

95. 95
Nota
No intentamos desanimarle al afirmar que esta fase de aprovisionamiento
en el juego del Web puede llevar mucho tiempo. Simplemente debe saber
que la recopilación, creación y modificación del texto y los gráficos casi
siempre parece tardar algo más de lo previsto; al menos esa ha sido
nuestra experiencia y no sólo porque tendemos de forma inherente a
divertirnos creando, modificando y jugando con ellos. Por suerte, no tiene
que preocuparse por la clase de demoras que puede sufrir durante el
“acopio de utensilios”. Recuerde que nuestro objetivo en este curso es la
creación de páginas Web de una forma más rápida e inteligente. Con tal
fin, en las lecciones 6 y 7, hemos enumerado los elementos necesarios
para crear las páginas Web de la lección. No tema: las etapas de caza y
recolección incluidas en las lecciones 6 y 7 son breves e indoloras.
Lista de comprobación de utensilios
Antes de empezar a crear páginas Web, debe tener los elementos siguientes a
mano y poder disponer de ellos fácilmente, o al menos haber finalizado una
gran parte de este proceso:
■ El texto: corregido, revisado ortográficamente y releído
■ Las fotografías, gráficos e ilustraciones (incluyendo los botones, las
barras de título y un logotipo de gran calidad)
■ Dibujos de las páginas y plantillas
Recuerde: si decide adquirir ■ Un editor HTML, un procesador de texto o una herramienta de
un nombre de dominio, debe creación de páginas Web
ser breve, sencillo y tener
relación con el propósito ■ Un programa de gráficos
de su sitio Web.
■ Un nombre de dominio (ya sea comprado o asignado)
■ Espacio en un servidor
Ahora que ha concluido la explicación de las fases de teoría y planeamiento,
está listo para mancharse las manos y enfrentarse a la segunda mitad de este
curso. Así que, remánguese: ¡el momento de crear ha llegado!
Puntos clave
■ Defina los objetivos del sitio Web.
■ Conozca a su público.
■ Defina la jerarquía, flujo organizativo y apariencia global del
sitio Web.
■ Dibuje la página principal y las subpáginas.
■ Reúna las herramientas y utensilios necesarios.
■ ¡Prepárese para crear páginas Web y pasarlas al mundo real!

96. 96
LECCIÓN 6
HTML básico sin
misterios
Una vez completada esta lección, podrá:
 Entender los fundamentos de la codificación HTML.
 Usar etiquetas HTML.
 Planear un sitio HTML.
 Crear una tabla con HTML.
 Ensamblar una página principal y sus subpáginas con HTML.
¿Puede recordar el intenso y premeditado esfuerzo que le llevó aprender los
sonidos y formas del alfabeto? Al final, tras mucha práctica, lo consiguió.
Después de aprender las letras, lentamente comenzó a entender cómo
combinarlas en palabras, combinar las palabras en frases, las frases en párrafos
y así sucesivamente. En este momento, es probable que leer le parezca algo
natural. Y lo más seguro es que lea el periódico y explore el Web sin pensar
demasiado en cada sonido y forma de las letras. Eso se debe a que, con los
años, ha desarrollado los conceptos básicos que son las letras y las palabras
hasta llegar a demostrar una capacidad aparentemente innata para leer.
Aprender a crear documentos HTML desde cero, con etiquetas y sabiendo
cómo funciona HTML, es bastante parecido a aprender a leer. El proceso puede
precisar algo de paciencia y mucha práctica al principio, pero si se toma el
tiempo necesario para estudiar HTML ahora, al final podrá usarlo para crear
páginas Web de una forma casi tan natural como puede leer.
Acopio de los “utensilios” para
el proyecto
Para crear las páginas Web descritas en esta lección, necesitará los siguientes
“utensilios”:
■ Un procesador básico de texto, como el Bloc de notas de Microsoft
o WordPad (aplicaciones que se incluyen con Microsoft Windows)
o TextEdit (que viene con Macintosh OS X).
■ Un explorador.
■ 27 archivos de ejercicios, que se pueden encontrar en la subcarpeta
Lesson06 de la carpeta Web Design FundamentalsPractice, en el
disco duro. Estos archivos se usan para crear las páginas Web de
esta lección, que se enumeran en la página siguiente.

97. 97
b_background.gif b_lessons2.gif picture.gif
b_background2.gif b_performances.gif sendnote.gif
b_competitions.gif b_performances2.gif t_background.gif
b_competitions2.gif b_recitals.gif t_competitions.gif
b_contact.gif b_recitals2.gif t_contact.gif
b_contact2.gif bg.gif t_home.gif
b_home.gif footer.gif t_lessons.gif
b_home2.gif logo.gif t_performances.gif
b_lessons.gif p_chris.jpg t_recitals.gif
Si desea saber los pasos detallados necesarios para configurar los archivos de
ejercicios, consulte la sección “Poner en su lugar las carpetas y los gráficos”,
más adelante en esta lección.
¿Por qué HTML?
En las lecciones 1 a 5 introdujimos de forma breve el Lenguaje de marcado de
hipertexto (HTML, Hypertext Markup Language). Esencialmente, explicamos
que los documentos de una página Web se construyen incluyendo comandos
HTML (también conocidos como etiquetas HTML) dentro del cuerpo de un
documento de texto básico. Aunque otras tecnologías, como el Lenguaje de
marcado extensible (XML, Extensible Markup Language) y Hoja de estilos
en cascada (CSS, Cascading Style Sheet), están empezando a tener una
repercusión significativa en el desarrollo de páginas Web, HTML constituye la
base de la mayor parte de las páginas Web en este momento y, si va a crearlas,
necesita conocer este lenguaje.
Ahora bien, entendemos que podría no sentirse muy dispuesto a crear una
página Web desde cero usando únicamente un documento en blanco y una
tecnología que le suena vagamente familiar, denominada HTML. Pero, lo crea
o no, está preparado, de modo que inténtelo. Hacemos que use HTML en el
primer proyecto con páginas Web de este curso porque se dará cuenta de que
conocer sus fundamentos le resultará extremadamente práctico cuando cree
páginas Web en el futuro, no importa cuándo. Por lo tanto, vamos a tomar una
aproximación de bautismo de fuego en esta lección, lo que significa que va a
escribir sus propios documentos HTML en breve.
En ciertas formas, podría encontrar que el proyecto de esta lección es el más
importante de esta mitad del curso. Si va a crear páginas Web, tendrá mucho
ganado si domina algunos conceptos y comandos HTML básicos. Algún día,
cuando tenga mucha más soltura con la creación de páginas Web, conocer al
menos un poco de HTML le permitirá modificar y retocar páginas para
adaptarlas a sus preferencias, incluso si han sido generadas por un editor
HTML. Además, saber HTML implica que podrá quitar todos los comandos
HTML innecesarios (y, en ocasiones, propiedad de otro) que muchos editores
HTML tienden a agregar en los documentos de páginas Web. Al quitar los
códigos innecesarios, puede hacer que sus documentos HTML sean más
pequeños, lo que a su vez significa que las páginas se cargarán antes.

98. 98
Finalmente, a medida que adquiera más habilidad en el uso de comandos
HTML, podría encontrar que puede hacer cambios con más rapidez y precisión
si agrega, elimina o modifica el código HTML en lugar de modificar una
página Web en un editor HTML.
Ahora estamos listos para empezar. El primer cometido en este empeño, antes
de comenzar a crear un sitio Web, es revisar brevemente (muy brevemente) la
teoría básica de HTML. Por cierto, cuando decimos teoría, nos referimos a
información clara y útil, y no a retórica compleja. Considere la explicación
teórica siguiente como si extendiera una manta antes de iniciar una merienda en
el campo; también podría sentirse algo desanimado ante los bichos con los que
se encontrará.
De modo que ha oído algo acerca
de CSS
Hojas de estilo en cascada (o CSS) es una tecnología que permite definir el
formato de una página de un sitio Web en un único lugar, ya sea en un
documento independiente o en un área especial dentro de un documento de una
página Web. Según el criterio de muchos diseñadores y desarrolladores del
Web, todo el mundo debería usar CSS lo antes posible. Pero la realidad de la
situación es que el Web está lejos de ser completamente compatible con CSS y
muchos sitios Web no incorporan hojas de estilo. Por suerte, el Web sigue
admitiendo las técnicas de formato más antiguas junto con los nuevos
comandos CSS.
En lo que le incumbe, el objetivo de esta lección es enseñarle HTML; por lo
tanto, hemos decidido omitir la explicación de cómo utilizar hojas de estilo en
esta lección. Cuando aprenda HTML, podrá continuar y aprender CSS con
tranquilidad (¡quién sabe, puede que escriba un libro acerca de CSS como
ayuda en su camino!). Para ayudar a estimular su apetito cognitivo de CSS, le
mostramos cómo modificar las hojas de estilo generadas automáticamente en el
proyecto de la lección 7.
En relación a CSS, podría oír que algunas de las etiquetas y atributos HTML
que le mostramos en esta lección están desaprobadas, como la etiqueta
<FONT>. Un elemento desaprobado se puede usar (y se usa) en el Web,
simplemente está destinado a eliminarse a la larga. Puede ver una lista de
las etiquetas HTML junto con anotaciones referentes a cuáles se clasifican
como desaprobadas (deprecated) en www.w3.org/ TR/1999/REC-html401-
19991224/index/elements.html (en inglés).

99. 99
Finalmente, debido a los diversos niveles de compatibilidad con CSS y HTML
que hay en el Web actualmente, puede ayudar a los exploradores a interpretar
sus páginas Web si especifica si cumplen estrictamente los estándares más
recientes, si son de transición (incluyen elementos HTML desaprobados) o si
tienen marcos (incluyen elementos HTML desaprobados y marcos dentro del
sitio Web). Para ello, debe incluir una versión particular de la etiqueta HTML
<!DOCTYPE...> en las páginas Web, según se describe aquí además de en
los pasos del proyecto, en esta lección:
■ Si su página Web cumple los estándares CSS y HTML 4.01,
inserte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
■ Si su página Web cumple los estándares HTML 4.01 e incluye
elementos y atributos HTML desaprobados (muchos de los cuales
conciernen a la presentación visual), inserte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
■ Si la página Web es compatible con HTML 4.01 e incluye
elementos y atributos HTML desaprobados, además de tramas,
inserte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Puesto que el proyecto de esta lección incluye elementos HTML desaprobados
pero no tramas, sus documentos usarán la segunda instrucción de la lista
anterior, la que indica que el código es de transición. Le mostraremos cómo
agregar esta instrucción en un documento HTML en los pasos del proyecto,
más adelante en esta lección.
Fundamentos de HTML
Básicamente, los comandos HTML sirven como instrucciones que le indican
a un explorador cómo mostrar el contenido de una página Web. En otras
palabras, los comandos HTML proporcionan información de formato que
controla la presentación del texto y los gráficos de la página Web. Tenga en
mente el propósito de los comandos HTML. Verá más adelante cómo se
entretejen alrededor del contenido de la página Web en un documento HTML,
pero, en esencia, un documento HTML contiene dos tipos de información:
■ La información del contenido, incluido el texto y punteros a
los gráficos
■ Comandos HTML, que se usan para indicar cómo se muestra
el contenido

100. 100
En esta lección, le mostramos cómo especificar los comandos HTML y el
contenido de la página en un documento de texto para crear páginas Web.
Además, vinculará las páginas que cree de modo que se combinen para crear
un sitio Web. Para llevar a cabo esta hazaña, necesitará un procesador de texto,
como los mencionados en la lección 4, por ejemplo el Bloc de notas o WordPad
(si utiliza Windows), o Text Edit (si usa Mac OS X, o SimpleText si emplea
Mac 9x o un sistema operativo anterior). En la figura 6-2 se ilustra cómo se
muestran los documentos completamente codificados en HTML en TextEdit,
WordPad y el Bloc de notas, respectivamente. Cuando empiece el proyecto de
esta lección, comenzará con una página en blanco. Para abrir el Bloc de notas,
haga clic en Inicio, seleccione Programas, Accesorios y, después, haga clic en
Bloc de notas. Para abrir WordPad, haga clic en Inicio, seleccione Programas,
Accesorios y, después, haga clic en WordPad. Para abrir TextEdit, haga doble
clic en el icono TextEdit en el disco duro.
Nota
No se alarme ante la aparentemente incomprensible conglomeración de
comandos HTML mostrados en la figura 6-2. HTML puede parecer
complejo, pero en realidad sólo consta de combinaciones de letras,
números y símbolos con algo de organización. Como es obvio, conocerá
las letras, números y símbolos, así que tenga por seguro que aprender a
usar los comandos HTML se incluirá igualmente entre sus habilidades.
Como hemos mencionado antes, las etiquetas HTML cuidan del formato de las
páginas. Por el contrario, el contenido es la información que se muestra en la
página (texto, gráficos, encabezados, etcétera). En otras palabras, HTML se
ocupa de la forma en que se presenta la información (negrita, cursiva,
alienación a la izquierda y demás) y el contenido especifica lo que se muestra.
Saber cómo incorporar las etiquetas apropiadas en todo el contenido de una
página Web es la clave para crear una en un procesador de texto. Por lo tanto,
vamos a explicar cómo se usan las etiquetas HTML.

101. 101
Figura 6-2.
Visualización de un documento HTML en TextEdit, WordPad y el Bloc
de notas.
Uso de etiquetas HTML
En esta sección, introducimos las reglas básicas de HTML junto con algunas
etiquetas comunes. Tenga en cuenta que no definimos cada etiqueta HTML
existente; hay un buen número de ellas y en muchos libros dedicados a HTML
se ofrecen extensas listas de comandos. (Si desea averiguar más acerca de
HTML de lo que abarcamos aquí, revise algunas de nuestras referencias de
HTML favoritas, que enumeramos en la sección “Recursos adicionales”, casi al
final de esta lección.) Nuestra filosofía es que si aprende las reglas básicas de la
utilización de etiquetas HTML, podrá usar cualesquiera de las que descubra en
línea o en los libros sobre HTML.
Comenzaremos nuestra explicación de las etiquetas HTML con una regla
sencilla: las etiquetas HTML constan de comandos que aparecen dentro de
paréntesis angulares (<>).

102. 102
Jerga: el código fuente hace
Por ejemplo, una de la primeras etiquetas en el código fuente de una página
referencia al contenido del Web suele ser <HTML>. Esta etiqueta le indica a un explorador, sin ningún
documento HTML que crea género de duda, que el documento de texto es un documento HTML.
una página Web. La mayor El explorador sabe que cualquier texto dentro de los paréntesis angulares (<>)
parte de los exploradores
permiten ver el código fuente
es un comando HTML que debe procesar y que todo el texto que esté fuera es
de una página Web. Por contenido que hay que mostrar.
ejemplo, para mostrar el
código fuente de una página
Aquí tiene la segunda regla que debe recordar: en las etiquetas HTML no se
Web en Microsoft Internet distinguen mayúsculas y minúsculas.
Explorer, muestre una página
Web, haga clic en el menú
Esta regla no es nada del otro mundo, pero es conveniente conocerla. Significa
Ver y, después, en Código que a los exploradores no les importa que el texto situado entre los paréntesis
fuente. angulares esté en mayúsculas o en minúsculas. Por lo tanto, <B> y <b> son,
esencialmente, la misma etiqueta (que, a propósito, indica al explorador que
muestre en negrita el texto que le sigue). De igual modo, <HTML>, <html>,
<HtMl> y cualquier otra combinación de letras mayúsculas y minúsculas
representa la misma etiqueta.
A continuación, vea la regla número tres: las etiquetas HTML casi siempre
vienen en pares.
Puesto que la mayoría de las etiquetas HTML se usan principalmente para
formato, suelen venir de dos en dos: una etiqueta de inicio y otra de fin
(a las que también se hace referencia como etiquetas de apertura y de cierre,
respectivamente). Este emparejamiento permite indicar a los exploradores dónde
debe comenzar un atributo de formato en particular (como la negrita) y dónde
debe terminar. Acuérdese de cuando va al cine con algunos amigos y dos de ellos
se adelantan para guardar los sitios mientras el resto del grupo va a por palomitas.
Las dos personas que guardan los asientos se sientan separados en cada uno de
los extremos que marcan el inicio y el final de la hilera que ocuparán sus amigos.
Si fueran etiquetas HTML, le dirían al explorador que todos los asientos situados
entre ellos deberían tener el mismo formato que el de sus asientos.
Las etiquetas de inicio y de fin tienen un propósito muy específico, en concreto,
una etiqueta de inicio indica cuándo debe iniciarse una acción y una de fin
cuándo se debe terminar. (Como ve, esto no es la ciencia de la física cuántica.)
Aunque las etiquetas de inicio y de fin parecen muy similares, presentan una
pequeña diferencia, aunque esencial. Las etiquetas de fin se diferencian de las
de inicio por la inclusión de un carácter de barra diagonal (/) justo después del
paréntesis izquierdo, como aquí: </HTML>. El último elemento de los
documentos HTML suele ser el comando </HTML>, que indica el final de la
presentación de la página Web. Volviendo de nuevo al ejemplo del cine,
digamos que uno de sus amigos, los que guardan los sitios, se sienta en un
asiento lateral y el otro en la mitad de la fila. El que está en la mitad de la fila
lleva una camisa roja. De repente, un recién llegado pregunta al que se sienta en
el pasillo si los asientos están ocupados. Éste contestaría algo así como:
“Sí, todos los asientos que hay hasta donde está aquella persona con la camisa
roja están ocupados.”. Esta es la función de una etiqueta de inicio. La persona
que lleva la camisa roja actuaría entonces como etiqueta de fin. Por ejemplo,
una etiqueta <B> le dice al explorador: “Pon en negrita todo el texto desde aquí
hasta la etiqueta </B>”.

103. 103
Para mejorar la ilustración, veamos un ejemplo de texto que usa pares de
etiquetas HTML. En la instrucción siguiente se incluyen etiquetas HTML de
inicio y de fin que dan formato a la frase como un párrafo ( <P></P>),
muestran la frase sabor a mantequilla en cursiva (<I></I>) y dan formato a
la palabra palomitas en negrita (<B></B>), como se muestra en la figura 6-3:
<P>¿Desea las <B>palomitas</B> con
<I>sabor a mantequilla</I> o las prefiere normales?</P>
Figura 6-3.
Si la pregunta se incluye en un documento HTML, podría verla con formato en
un explorador, como se muestra aquí.
La frase también ilustra un concepto interesante denominado anidamiento.
En los documentos HTML, el anidamiento no tiene nada que ver con ramitas
y plumas sino con el orden en que aparecen las etiquetas HTML. En la frase
de las palomitas, el conjunto de etiquetas de cursiva (<I></I>) y el de
negrita (<B></B>) se anidan dentro de las etiquetas de párrafo (<P></P>).
Ésta es una regla clave que debe seguir al anidar etiquetas HTML: las etiquetas
HTML anidadas se ceben cerrar en orden inverso en el que se han abierto.
La regla podría parecer un poco confusa, de modo que veamos un ejemplo.
Básicamente, las etiquetas HTML de apertura y de cierre no se deben cruzar.
Éste es un modelo correcto:
<HTML> <P> <B> </B> </P> </HTML>
En este ejemplo, las etiquetas de negrita (<B>) se anidan dentro de las de párrafo
(<P>), que se anidan dentro de las etiquetas de identificación de documento
(<HTML>). Esta disposición resultaría en un texto en negrita dentro de un párrafo
dentro de un documento HTML. La siguiente también funcionaría:
<HTML> <P> <I> </I> <B> </B> </P> </HTML>
Observe que en este ejemplo de anidamiento se usa el mismo modelo que en la
frase de las palomitas. En este ejemplo, el par de etiquetas de cursiva y el de
negrita no se anidan uno dentro del otro pero ambos están anidados dentro del
par de etiquetas de párrafo.

104. 104
Ahora vamos a aligerar la explicación un poco y nos fijaremos en una regla
más concisa: de forma predeterminada, los documentos HTML muestran un
único espacio entre los elementos de texto.
Parece que huelga mencionar esta regla, pero los problemas de espaciado son
una gran preocupación en el Web por diversas razones (principalmente, porque
los diseñadores tienen que ocuparse del contenido que cambia de tamaño y de
ubicación, problemas que no se dan en los documentos impresos). En un
documento HTML, al agregar cualquier número de espacios dentro del código
mediante la barra espaciadora, la tecla Tabulador o la tecla Entrar, sólo se
consigue agregar un espacio. Por lo tanto, podría incrustar los cuatro
fragmentos de código siguientes en un documento HTML:
<P><I>Instrucción musical</I>
<P><I>Instrucción musical</I>
<P><I> Instrucción musical </I>
<P><I>
Instrucción musical
</I>
y el texto aparecerá en cualquier caso como se muestra en la figura 6-4.
Figura 6-4.
El texto se muestra con un único espacio entre palabras, incluso cuando se
agrega espacio adicional entre las palabras del documento HTML.
Ahora está preparado para la siguiente regla, que añade algo de picante a
las etiquetas HTML: algunas etiquetas HTML de apertura pueden contener
propiedades (también conocidas como atributos), que refinan las instrucciones
de una etiqueta HTML.
En otras palabras, con frecuencia, puede personalizar las instrucciones relativas
a un comando de formato HTML. Por ejemplo, puede agregar un atributo
COLOR al comando <FONT> para cambiar el color del texto que se muestra,
como se indica a continuación:
Dicen que el <FONT COLOR="green">césped</FONT> es más verde.
Si insertara la frase anterior en un documento HTML, en el texto se mostraría
la palabra césped en verde.

105. 105
Finalmente, aquí tiene la última regla de esta sección: existen numerosas
variaciones en relación al anidamiento HTML, a las propiedades y al uso
de conjuntos de etiquetas.
Como con todas las reglas, descubrirá que, aunque la mayor parte de HTML es
predecible, la tecnología es tan coherente como las reglas de ortografía, lo que
significa que, con frecuencia, encontrará excepciones a las reglas. Por ejemplo,
si desea agregar un salto de línea en HTML, debe especificar <BR>. No hay
ninguna etiqueta de cierre para un salto de línea: o lo inserta o no. De la misma
forma, para insertar una regla horizontal, se utiliza la etiqueta <HR>; de nuevo,
no se requiere una etiqueta de cierre.
No se preocupe si esto le causa una ligera confusión. Empezará a tener una idea
más clara de HTML a medida que trabaje en el proyecto del sitio Web de esta
lección. No hay nada como la experiencia práctica para aprender. Le
introduciremos en otras etiquetas HTML y conceptos adicionales en el proyecto
según vayamos avanzando. Como ayuda, puede ser aconsejable que tenga a
mano la tabla 6-1 mientras trabaja.
Tabla 6-1. Etiquetas HTML usadas en el proyecto HTML
Etiquetas Función
<A HREF="xxx.xxx">< /A> Marca el punto delimitador de un
hipervínculo, en el que se puede hacer
clic. El atributo HREF señala la
información que se debe mostrar al
hacer clic en el contenido del
delimitador. El contenido del
delimitador se especifica entre las
etiquetas de delimitación (<A></A>)
y uede incluir texto e imágenes.
<B></B> Indica que se muestre en negrita el
texto incluido entre las etiquetas <B>
y </B>.
<BLOCKQUOTE> Desplaza un párrafo del texto normal del
</BLOCKQUOTE> cuerpo, por lo general, con una sangría a
la izquierda del párrafo y márgenes a la
derecha.
<BODY></BODY> Marca el inicio y el final del contenido
que se puede mostrar de la página Web.
<BR> Inserta un salto de línea. La etiqueta
<BR> no tiene una etiqueta de cierre y
se suele usar de forma consecutiva para
crear un espacio en blanco en una
página Web.

106. 106
(continúa)
Etiquetas Función
<CENTER></CENTER> Centra la información delimitada en la
página o dentro de la celda de una tabla.
<!DOCTYPE...> Especifica la definición de tipo de
documento (DTD, Document Type
Definition) de la página Web; por
ejemplo, si la página usa codificación
HTML estricta y CSS, codificación
HTML de transición (incluidas etiquetas
HTML desaprobadas) o tramas.
<FONT></FONT> Permite especificar el color de la fuente,
su tipo y su tamaño.
<H1></H1> Especifica el texto de encabezado. Los
tamaños de encabezado abarcan desde
H1 hasta H6, donde H1 es el mayor.
<HEAD></HEAD> Proporciona un área en la que puede
mostrar el título de la página Web,
incluir información para el motor de
búsqueda e información avanzada de
formato, incrustar código CSS o
vincular a una hoja de estilos, y escribir
secuencias de comandos. Aparte del
texto incluido entre las etiquetas
<TITLE></TITLE> incrustadas, la
mayor parte de la información no se
muestra directamente a los usuarios.
<HTML></HTML> Delinea el inicio y el final de un
documento HTML.
<I></I> Indica que el texto que aparece entre las
etiquetas <I> e </I> se ponga en
cursiva.
<IMG SRC="xxx.xxx"> Muestra una imagen en una página Web.
El atributo SRC señala a la imagen
particular que se debe mostrar.
<LI></LI> Identifica un elemento de una lista sin
numerar (con viñetas) <UL> o de una
lista ordenada (numerada) <OL>.
<OL></OL> Especifica una lista ordenada
(numerada).

107. 107
(continúa)
Etiquetas Función
<P></P> Indica el principio y el final de un
párrafo. De forma predeterminada, los
párrafos se muestran alineados a la
izquierda. La etiqueta </P> de cierre
es opcional. En otras palabras, puede
insertar simplemente la etiqueta <P> al
comienzo de cada párrafo nuevo para
dar formato al contenido HTML sin
escribir </P> al final de cada párrafo.
Hemos incluido la etiqueta </P> de
cierre en esta lección para clarificar la
explicación. Los exploradores suelen
insertar una línea en blanco (más un
pequeño espacio adicional) antes de
iniciar un párrafo.
<TABLE></TABLE> Indica el principio y el final de
una tabla.
<TD></TD> Define el inicio y el final de una celda
en una tabla. Las etiquetas <TD> se
anidan dentro de otras etiquetas <TR>.
<TITLE></TITLE> Permite insertar el texto de la página
Web que se debería mostrar en la barra
de título del explorador.
<TR></TR> Indica una fila de una tabla. Las
etiquetas <TR> se anidan dentro
de un par de etiquetas <TABLE>.
<UL></UL> Especifica una lista sin numerar
(con viñetas).
Sólo como última nota de esta sección, deseamos hacer una pequeña
rectificación. Aunque estamos seguros de que puede crear un documento
HTML a partir de cero, tenga en cuenta que esta lección sólo sirve de
introducción a la creación de páginas Web en HTML. Lamentablemente,
abarcar todos los comandos HTML disponibles en una sola lección es poco
realista, pero en ésta puede encontrar sugerencias que le resultarán de utilidad
en la codificación y algunas indicaciones de buenas referencias de HTML, en la
sección “Recursos adicionales”, casi al final de la lección. Si crea el sitio Web
descrito en el proyecto de esta lección, dominará los conceptos básicos de la
codificación HTML, además de disponer de una plantilla que puede
personalizar para crear páginas Web únicas. (Incluso le indicamos cómo usar el
sitio como plantilla más adelante en esta lección.)

108. 108
Tratamiento de documentos HTML y gráficos Web
Cuando crea páginas Web, suele trabajar con varios archivos. Tendrá el archivo
HTML de la página principal (que a veces se denomina index.html, index.htm
o índice.html), un archivo gráfico de cada elemento gráfico de la página y otros
archivos HTML adicionales para las páginas vinculadas. Por lo tanto, antes de
empezar la fase de creación, tiene que idear un esquema organizativo para no
volverse loco después. Le recomendamos que cree una carpeta para contener
todos los archivos HTML usados en el sitio Web y que, dentro de la carpeta
principal, cree una subcarpeta para las imágenes. A continuación, puede
almacenar todos sus documentos HTML en la carpeta principal y colocar los
gráficos en la carpeta de imágenes. Como ilustración, vea la figura 6-5, que
muestra los documentos HTML y las imágenes necesarios para crear el sitio
del proyecto de esta lección.
Mantener organizados los archivos es un imperativo cuando se agregan gráficos
y se crean hipervínculos, porque debe incluir instrucciones en el documento
HTML en relación a dónde debe buscar el explorador un gráfico o página
vinculada en particular. Además, la organización puede simplificar en gran
medida el proceso de carga de archivos cuando esté en disposición de “pasarlos
al mundo real” y los transfiera desde su PC local a un servidor Web. Lo mejor
que puede hacer es crear una carpeta que pueda usar constantemente en el
proceso de creación del sitio Web y en las páginas Web.
Además de observar una minuciosa organización, debería guardar
religiosamente sus páginas Web y verlas a menudo en un explorador
durante el proceso de desarrollo.
Figura 6-5.
Debe mantener los archivos y carpetas del sitio Web organizados de una forma
sencilla aunque lógica.

109. 109
Guardar y ver los documentos HTML
“¡Guardar, guardar, guardar!” Al crear las páginas Web, en especial si realiza la codificación HTML a mano,
debería ser una de sus debe guardarlas y obtener una vista previa de las mismas sin reparos. Según
máximas cuando trabaje nuestra propia experiencia, la frase “No podemos creer que hayamos perdido
con un equipo informático.
todos los datos” no es inusual, de modo que le recomendamos guardar sin
reservas su trabajo frecuentemente, lo que también puede aplicarse en cualquier
situación en la que trabaje con un archivo en un equipo informático (Si en los
monitores creciera el césped, nuestro mouse desgastaría el camino en diagonal
hacia el botón Guardar, por no mencionar nuestra voluntaria contribución a la
leve erosión de las teclas Ctrl y G que se produce al presionarlas con tanta
frecuencia.)
Además de guardar a menudo sus archivos, debe obtener una vista previa de
las páginas Web que cree varias veces a lo largo del proceso de creación. Ello
simplemente conlleva mirar el documento HTML en uno o dos exploradores,
frente a tener que examinar el texto y la versión del código HTML del
documento en un procesador de textos. Al realizar este ejercicio, puede apreciar
el formato que se da al contenido con HTML y puede solucionar los problemas
de presentación en un primer momento. Con frecuencia, alteraremos la
composición de un sitio porque lo que parece acertado sobre el papel no se
transpone bien en una página en línea.
Para obtener una vista previa de una página Web en un explorador, siga alguno
de estos procedimientos una vez creado un archivo HTML:
■ Muestre el contenido de la carpeta que contenga el documento
HTML y haga doble clic en el icono del documento HTML.
■ Abra el explorador (por ejemplo, Internet Explorer) y escriba la
ubicación del archivo HTML.
■ Abra el explorador, abra la carpeta que contenga el documento
HTML y arrastre el icono del archivo HTML de su carpeta a la
ventana o a la barra de direcciones del explorador.
Nota
En la sección siguiente, le sugerimos algunos puntos concretos en los que
debería guardar el sitio Web del proyecto y verlo en un explorador. Sin
embargo, puede guardar los archivos y verlos más a menudo de lo que
sugerimos, en especial si se toma un descanso mientras los está creando.

110. 110
Ya hemos cubierto una buena parte de teoría; ahora llega la hora de las brujas.
Si ha leído las páginas anteriores, está en disposición de abordar el proyecto de
creación de páginas Web HTML. Debería tener un conocimiento práctico de las
etiquetas HTML básicas, ser consciente de que debe guardar sus documentos
HTML e imágenes en las carpetas designadas y reconocer la importancia de
guardar las páginas Web y de verlas con frecuencia a lo largo del proceso de
creación. Nos satisface que haya llegado a este punto, de modo que vamos a
poner en marcha el proyecto.
Planeamiento del sitio HTML
Como proyecto HTML, decidimos crear una página Web para Chris Soll,
músico profesional e instructora de música. El primero paso del planeamiento
implicaba reunirse con Chris y averiguar el tipo de información que deseaba
incluir en su sitio Web. En nuestra consulta inicial, encontramos que tenía
varios temas profesionales y otros específicos de los alumnos que le gustaría
incorporar. Según esta información, intentamos inicialmente diseñar una barra
de exploración con dos niveles pero el diseño empezó a resultar demasiado
confuso. Determinamos que podíamos crear un sitio más limpio si
especificábamos botones con nombre y proporcionábamos una sección de
información general del sitio en la página principal. El diseño final resultó en
una composición clara y flexible.
Cuando cree el sitio Web de Chris Soll (al que pronto comenzamos a hacer
referencia como “el sitio de música” durante nuestras consultas, debido a la
abrumadora presencia en el estudio de un piano de cola, una colección de
flautas y montones de partituras musicales y libros de música), puede usar su
documento HTML como plantilla para crear sitios Web similares que tengan
una apariencia y funcionamiento completamente diferentes. No se preocupe,
describimos cómo usar el código del sitio de música como plantilla más
adelante en esta lección. En la figura 6-6 se ilustra el esquema que propusimos
para ilustrar las páginas que deseábamos incluir en el sitio. La figura 6-7
muestra el esbozo final de la página principal del sitio de música.
Figura 6-6.
La estructura del sitio permite el acceso a cada una de sus páginas desde
cualquier ubicación.

111. 111
Figura 6-7.
El dibujo muestra la composición básica del diseño de la página principal del
sitio de música.
Nota
Observe en la figura 6-7 que inicialmente pensamos insertar la información
de dirección debajo de los vínculos de texto en la parte inferior de la
página. Después, durante el proceso de diseño, nos dimos cuenta de que
colocar la dirección encima de los vínculos tenía más sentido. Los vínculos
ya aparecían en la barra de exploración a la izquierda, de modo que
preferimos presentar la información de la dirección “nueva” y más
importante antes de repetir la información de los vínculos de texto.

112. 112
Poner en su lugar las carpetas y los
gráficos
Como mencionamos anteriormente en esta lección, su primer cometido es crear
una carpeta para los archivos Web y organizar sus gráficos. A continuación le
indicamos el proceso que le sugerimos que siga (aunque puede cambiar la
ubicación de las carpetas y el nombre según sus preferencias):
1 Cree una carpeta en la unidad C: y asígnele el nombre music.
2 Abra la carpeta music y cree una subcarpeta denominada images.
3 Busque la carpeta Lesson06 en la carpeta Web Design
FundamentalsPractice del disco duro.
4 Copie todos los archivos de la carpeta Lesson06 a la subcarpeta
images que creó en el paso 2.
Cuando finalice esta lección
A medida que copie los archivos de la carpeta Lesson06 a la subcarpeta images,
y termine de experimentar observe el esquema de denominación que hemos usado para etiquetar las
con el sitio Web de música, imágenes:
puede eliminar la carpeta
C:music, si lo desea. ■ b_xxx Especifica que la imagen es un botón. Un gráfico b_ al que
se anexa el número 2 (por ejemplo, b_background2.gif) indica una
segunda versión del botón que se muestra siempre con la página
asociada. (Verá lo que significa esto posteriormente.)
Por lo tanto, b_background.gif es el botón Antecedentes (la
traducción de background en este caso) y b_background2.gif es la
versión de la “página actual” del botón Antecedentes, como se
ilustra en la figura 6-8.
Figura 6-8.
Cada botón del sitio de música consta de un botón normal y de una
versión para la página actual del mismo.

113. 113
■ bg.gif Especifica el gráfico de fondo. Se usa el mismo gráfico de
fondo en todo el sitio de música, de modo que sólo se requiere un
archivo bg.gif.
■ footer.gif Identifica el gráfico como una imagen de pie de página
en movimiento, que se utiliza en la parte inferior de las páginas del
sitio.
■ logo.gif Identifica el gráfico del logotipo. En todo el sitio de música
se usa el mismo gráfico de logotipo, pero podría tener unas
cuantas versiones del mismo, en especial, si utilizara una versión
más pequeña o modificada en las subpáginas.
La imagen picture.gif es un
■ p_xxx Especifica que el gráfico es una imagen. En el sitio de
gráfico marcador de posición música sólo hay una fotografía, que se encuentra en la página
usado en la plantilla que se principal.
explica más adelante en la
lección. No usará el archivo ■ sendnote.gif Identifica el gráfico como el icono de “enviar mensaje
picture.gif en el sitio de de correo electrónico”. Posteriormente, vinculará este icono en el
música.
sitio de música de manera que los usuarios puedan hacer clic en el
gráfico sendnote.gif para abrir un mensaje de correo electrónico
con una dirección predeterminada cuando deseen enviar un
mensaje a Chris Soll.
■ t_xxx Especifica que la imagen es un gráfico de pancarta para la
barra de título. Por ejemplo, t_background.gif es el gráfico de la
pancarta de la barra de título de la página Antecedentes, que
muestra la palabra Antecedentes y se coloca al principio de la
página que ofrece información acerca de Chris Soll, como se ilustra
en la figura 6-9.
Figura 6-9.
Un archivo gráfico se usa para crear la pancarta de una barra de título
en cada página en el sitio de música.
Cuando cree sus propias páginas Web y gráficos Web, probablemente preferirá
idear su propio esquema de denominación. Le hemos mostrado el método que
usamos nosotros para denominar nuestros gráficos con el fin de proporcionarle
una idea de lo útil que puede resultar tener un sistema de nomenclatura.
Apreciará la ventaja de disponer de un esquema de denominación de gráficos
bien planeado a medida que empiece a insertar código HTML en breve.

114. 114
Preparación del archivo de la página
principal
Cuando tenga las carpetas y archivos gráficos en su lugar, estará en disposición
de crear la página principal del sitio. Para empezar el proceso de creación,
tendrá que crear un documento HTML que contenga las etiquetas estándar que
aparecen en todos los documentos HTML. Las etiquetas estándar son las
siguientes (vea la tabla 6-1, anteriormente en esta lección):
■ <!DOCTYPE...>
■ <HTML></HTML>
■ <HEAD></HEAD>
■ <TITLE></TITLE>
■ <BODY></BODY>
Observe que, con la excepción de la etiqueta <!DOCTYPE...>, las etiquetas
estándar vienen en parejas. En la figura 6-10 se demuestra la forma apropiada de
anidar los pares de etiquetas HTML estándar en un documento HTML y cómo
insertar el texto del título. Cuando haya escrito las etiquetas HTML estándar en
un documento de texto, tendrá que guardar el documento de texto como
documento HTML, según se describe en el procedimiento siguiente.
Figura 6-10.
Este documento contiene las etiquetas HTML estándar con algo de texto
incluido entre las etiquetas <TITLE>.

115. 115
Nota
Recuerde que en HTML no se distinguen mayúsculas y minúsculas, de
modo que puede escribir <HTML>, <html>, <HtMl> o cualquier otra
combinación de letras en mayúsculas o minúsculas, y la etiqueta será
correcta. En esta lección, usamos siempre letras en mayúsculas para las
etiquetas HTML con el objeto de reconocerlas más fácilmente.
Para comenzar a crear la página principal del sitio de música y guardarla en
forma de archivo HTML, siga estos pasos:
1 Abra el Bloc de notas, WordPad o TextEdit. En todo el proyecto
usamos el Bloc de notas.
2 Haga clic en un nuevo documento en blanco y escriba la siguiente
definición de tipo de documento (que indica que contiene etiquetas
desaprobadas):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
3 Presione Entrar dos veces.
4 Escriba <HTML> y presione Entrar dos veces.
5 Escriba <HEAD> y presione Entrar.
6 Escriba <TITLE>Instrucción musical de Chris
Soll</TITLE> y presione Entrar.
7 Escriba </HEAD> y presione Entrar dos veces.
8 Escriba <BODY>, presione Entrar varias veces (para dejar algo de
espacio cuando especifique la información del contenido de la
página Web), escriba </BODY> y presione Entrar dos veces.
Nota
El texto del contenido, que se muestra entre las etiquetas HTML y fuera, se
presenta de la misma forma, con mayúsculas o minúsculas, que si se
especificara en el documento de texto. Por lo tanto, si escribe chris soll en
lugar de Chris Soll en el paso 4, el nombre de Chris aparecerá en letras
minúsculas en la página Web. Además, recuerde que no tiene que
preocuparse de si pone demasiados espacios (incluidas líneas en blanco)
entre el texto del contenido y las etiquetas HTML. Cuando un explorador
presente el documento, pasará por alto los espacios adicionales.

116. 116
9 Escriba </HTML> para completar la configuración de las etiquetas
HTML estándar.
Ahora puede nombrar y guardar el archivo en la carpeta C:music.
10 En el menú Archivo, haga clic en Guardar.
11 En el cuadro de diálogo Guardar como, en el cuadro Nombre
de archivo escriba index.html y compruebe que en la lista
desplegable Guardar como está seleccionada la opción
Documentos de texto. (Si es necesario, haga clic en la flecha
para seleccionar la opción Documentos de texto.)
12 Use la lista desplegable Guardar en y vaya a la carpeta C:music
del equipo.
13 Haga clic en Guardar y cierre el Bloc de notas.
El archivo debería mostrarse ahora como index.html en la carpeta C:music y el
icono debería indicar que es un documento HTML. En este punto, ya puede ver
su archivo en el explorador. Para ver el archivo HTML recién creado, haga
doble clic en index.html. Se debe abrir en su explorador Web. Observe que el
único contenido es el texto del título de la página Web, que se presenta en la
barra de título del explorador.
Ahora que el título de la página Web y las etiquetas HTML están en su lugar,
vamos a agregar los colores predeterminados de los vínculos y de la imagen
de fondo.
Especificación de los colores del
fondo y de los vínculos
Puede incluir atributos en la etiqueta <BODY> para agregar los colores de
fondo, las imágenes de fondo, los colores predeterminados de los vínculos y
otras características, según se describe en los pasos siguientes:
1 Abra el Bloc de notas, WordPad o TextEdit, y después abra el
archivo C:musicindex.html en el procesador de texto. Si no ve el
archivo index.html en el cuadro de diálogo Abrir, asegúrese de que
en el cuadro de lista Tipo de archivo aparece Todos los archivos
(*.*). Si usa Mac OS X, TextEdit muestra automáticamente los
documentos HTML como páginas Web, de forma predeterminada.
Para abrir y mostrar el código HTML en lugar de la página Web,
active la casilla de verificación Ignore Rich Text Commands (Pasar
por alto comandos de texto) en el cuadro de diálogo Open File
(Abrir archivo); observe que puede seleccionar esta opción también
en el cuadro de diálogo Preferences (Preferencias) del programa,
si no desea activar la casilla de verificación cada vez que se
necesite.

117. 117
Sugerencia
Debe abrir el archivo HTML mediante el comando Open (Abrir) del
procesador de texto, arrastrando el icono del documento en la ventana de
dicho programa o haciendo clic con el botón secundario del mouse (ratón)
en el archivo HTML y eligiendo Bloc de notas en el menú Abrir con. Si hace
doble clic en un archivo HTML en la vista de carpetas, mostrará el
documento HTML en el explorador Web.
2 En la etiqueta <BODY>, haga clic después de la Y y antes de >,
presione la barra espaciadora y vuelva a especificar los siguientes
atributos y valores, incluidas las comillas:
BGCOLOR="#ffffff" BACKGROUND="images/bg.gif"
LINK="blue" VLINK="purple" ALINK="red"
Los atributos <BODY> que ha agregado se definen como sigue:
■ BGCOLOR define un color de fondo. Aunque en el sitio de música
se usa un gráfico para el fondo, definimos un fondo blanco para
quienes vean el sitio con las imágenes desactivadas. En la paleta
mostrada en el archivo palette216.gif, que se encuentra en la
carpeta Lesson03 de este curso, puede ver que #ffffff es un
número hexadecimal que indica el color blanco.
Jerga: poner en mosaico
■ BACKGROUND permite especificar un archivo gráfico para usarlo
significa repetir una imagen como imagen de fondo. Recuerde que los exploradores colocan
en toda el área de una en mosaico las imágenes de fondo para rellenar la ventana del
ventana hasta que se llene explorador. En la página del sitio de música se usa el archivo bg.gif,
con la imagen repetida.
que se almacena en la subcarpeta images de la carpeta music,
como imagen de fondo. Dado que tanto el documento index.html
como la carpeta images residen en la carpeta music, no tiene que
indicar la dirección completa de la imagen. Si la imagen estuviera
guardada en otro sitio, es decir, no dentro de una subcarpeta de la
carpeta que contiene al documento index.html, tendría que
especificar la dirección completa para indicar dónde se encuentra.
■ LINK permite especificar el color en el que se muestran los
hipervínculos de texto que no se han visitado.
■ VLINK permite especificar el color en el que se muestran los
hipervínculos de texto que se han visitado. En otras palabras, una
vez que un usuario visite la página Contactos, cualquier vínculo
que señale a esta página aparecerá en el color correspondiente a
los vínculos visitados (púrpura, en este caso).
■ ALINK permite indicar el color en el que se muestran los vínculos
mientras el usuario hace clic en ellos. Mostrar los vínculos en un
color diferente mientras los usuarios hacen clic en ellos les indica
claramente que están activando un hipervínculo.

118. 118
Su código HTML debería ser ahora como el de la figura 6-11.
Figura 6-11.
Dentro de la etiqueta <BODY> se pueden agregar algunos atributos de
formato. (El código recién añadido se resalta en color naranja.)
Sugerencia
Siempre que escriba código HTML, compruebe que ha incluido todos
los paréntesis angulares (<>) y las comillas ("") en él además de que los
comandos HTML están escritos correctamente. Si faltan elementos o los
comandos están mal escritos, la página Web puede mostrarse de forma
inapropiada o no mostrarse. Hemos incluido capturas de pantalla del
código que está creando en esta lección para que pueda comprobar
fácilmente su trabajo.
Si los cambios que haga en
3 Guarde su documento HTML, abra el explorador y vea el archivo
su documento HTML no se index.html en la ventana del explorador. (No tiene que cerrar el
muestran en la vista previa documento de texto, pero debe asegurarse de que ha guardado los
en el explorador, haga clic cambios más recientes.) El archivo index.html debe mostrar la
en el botón Actualizar para
actualizar la vista. imagen de fondo en la ventana del explorador.
Ahora que ha definido las etiquetas HTML estándar, la imagen de fondo
predeterminada y los colores de los vínculos, el siguiente paso es comenzar a
dar formato al área <BODY> de la página Web.
Creación de una tabla
En esta sección, explicamos cómo crear una tabla que contendrá todos los
elementos de la página Web. Controlarlos es un poco dificultoso debido a la
naturaleza variable de los exploradores y sus ventanas, por lo que muchos sitios
se diseñan con tablas que tienen bordes ocultos para ayudar a componer las
páginas Web. A la larga, el formato y alineación de las páginas Web se llevará
a cabo mediante hojas de estilo, pero por ahora miles y miles de páginas Web
se basan en tablas para controlar la presentación de sus elementos. Por
supuesto, no todas las páginas Web usan una tabla pero encontrará que son
una herramienta muy útil.

119. 119
Básicamente, las tablas usan tres etiquetas:
■ <TABLE></TABLE> señala el inicio y el final de una tabla.
■ <TR></TR> indica una fila de la tabla. Las etiquetas <TR> se
anidan dentro de un par de etiquetas <TABLE>.
■ <TD></TD> define el inicio y el final de una celda en una tabla.
Las etiquetas <TD> se anidan dentro de un par de etiquetas
<TR>.
En el sitio de música, creará una tabla de dos columnas y tres filas:
1 Si es necesario, abra el Bloc de notas, WordPad o TextEdit, y
después abra el archivo C:musicindex.html desde el procesador
de texto. Si no ve el archivo index.html, recuerde comprobar que
en el cuadro de lista Tipo de archivo aparece Todos los archivos
(*.*).
2 En el archivo index.html, haga clic debajo de la etiqueta de
apertura <BODY> (la etiqueta <BODY> debe contener ahora los
atributos que agregó en la sección anterior), escriba <TABLE
BORDER="1" WIDTH="100%" CELLPADDING="5"
CELLSPACING="0"> y presione Entrar. Observe las comillas
alrededor de los valores de los atributos. Compruebe que
incluye comillas de apertura y de cierre en todo el fragmento.
A continuación puede ver el propósito de cada uno de los atributos
incluidos en la etiqueta <TABLE>:
■ BORDER define el ancho de la tabla en píxeles. Por ahora,
estamos mostrando un borde de 1 píxel para ver la tabla mientras
realiza el diseño. Una vez que se complete el diseño de la página,
cambiará BORDER="1" por BORDER="0" para ocultar los
bordes de la tabla en la página Web.
■ WIDTH define el ancho exacto de la tabla en píxeles o especifica
el porcentaje de la ventana del explorador que ocupará la tabla.
Nosotros usamos una tabla para dar formato a toda la página, así
que su tamaño es del cien por cien del espacio de la ventana del
explorador.
■ CELLPADDING crea un espacio (medido en píxeles) entre el
contenido de la celda y el borde de la tabla. Después de probar
algunos parámetros de espacio, encontramos que al añadir un
valor de CELLPADDING igual "5" se conseguía el mejor efecto.
Este tipo de opción ejemplifica lo que supone probar la
configuración, guardar y obtener una vista previa de la página
HTML durante el proceso de creación.
Como ayuda, puede remitirse
■ CELLSPACING especifica la cantidad de espacio (en píxeles)
a la figura 6-12 mientras entre celdas. En el sitio de música, no necesitamos especificar
trabaja en todo el proceso ningún espacio entre las celdas, de forma que establecimos a
de creación de la tabla. "0" el valor del atributo.

120. 120
3 Escriba <TR> para comenzar con la primera fila de la tabla.
4 Presione Entrar, presione la tecla Tab para facilitar la lectura del
código y escriba <TD VALIGN="top"> para empezar con la
primera celda de la primera fila. El atributo VALIGN="top" indica
que desea alinear el contenido de la celda en la parte superior de
la misma (de forma predeterminada, se alinea el medio). Puede
alinear el contenido de la celda con los valores top, middle,
bottom o baseline. Además, de forma predeterminada, el
contenido de la celda se alinea a la izquierda. (Más adelante
mostramos cómo cambiar la alineación predeterminada y
centramos el contenido dentro de una celda.)
5 Presione Entrar dos veces, presione la tecla Tab y escriba </TD>
para marcar el final de la primera celda en la primera fila.
6 Presione Entrar dos veces, presione la tecla Tab y escriba <TD
VALIGN="top"> para crear la segunda celda de la primera fila.
7 Presione Entrar dos veces, presione la tecla Tab y escriba </TD>
para marcar el final de la segunda celda en la primera fila.
8 Presione Entrar y escriba </TR> para completar la primera fila de
la tabla.
9 Presione Entrar y repita los pasos 3 a 8 para crear la segunda fila
de la tabla (o copie y pegue todo el código desde la etiqueta <TR>
hasta la etiqueta </TR> para crear una segunda fila, según se
describe en la sugerencia).
10 Presione Entrar después de crear la segunda fila de la tabla y, a
continuación, vuelva a escribir los comandos de los pasos 3 a 8 o
copie y peque el código de la fila para crear una tercera.
11 Cuando haya especificado la tercera fila de la tabla, presione
Entrar y escriba </TABLE> para completar sus etiquetas.
Sugerencia
Si prefiere no volver a escribir los comandos de la fila de la tabla cuando
cree la segunda y tercera filas, haga clic antes del comando <TR> de la
primera fila y arrastre para seleccionar todo el texto hasta el comando de
cierre </TR>, incluido. A continuación, presione Ctrl+C para copiar el
código seleccionado. Haga clic después del comando </TR>, presione
Entrar y presione Ctrl+V para pegar el código HTML copiado en su
documento de texto. Vuelva a presionar Ctrl+V para crear la tercera
fila de la tabla.

121. 121
Finalmente, agregará un atributo WIDTH a las dos etiquetas de celda (<TD>)
de la primera fila de la tabla. Puede asignar el ancho de la columna como un
porcentaje (por ejemplo, a la columna izquierda se le puede asignar el 50 por
ciento de la ventana del explorador) o puede insertar una medida exacta en
píxeles. De forma predeterminada, si no incluye el atributo WIDTH en las
celdas de la tabla, el tamaño de las columnas de la tabla se calcula en función
del tamaño del contenido de la celda y de la ventana del explorador. Tiene que
agregar el atributo WIDTH sólo a una celda de una columna (y si tiene medidas
que entren en conflicto en las celdas de la misma columna, el explorador
usará la opción mayor de forma predeterminada). Para mantener nuestra
configuración ordenada, agregaremos el atributo WIDTH a las celdas de la
primera columna:
Nota
Si no define el ancho de las columnas de la tabla mediante el atributo
WIDTH de las etiquetas <TD>, los exploradores calculan automáticamente
su tamaño en función del elemento más ancho de cada una y del tamaño
de la ventana del explorador.
1 En la primera celda de la primera fila, haga clic después de
"top", presione la barra espaciadora y escriba WIDTH="170"
para establecer el ancho de la columna a 170 píxeles.
2 En la segunda celda de la primera fila, haga clic después de "top",
presione la barra espaciadora y escriba WIDTH="*". El asterisco
en lugar de un número de píxeles indica que el explorador debe
permitir que la segunda columna tenga el ancho necesario para que
ocupe el ancho restante de la tabla. Puesto que el formato de esta
tabla indica que su tamaño es del 100 por cien de la ventana del
explorador, el asterisco indica al explorador que expanda la segunda
columna para llenar el resto del área de su ventana.
3 Guarde su documento HTML. El código HTML debería ser similar
al de la figura 6-12.
Ahora que tiene una tabla, puede incluir contenido en ella. Lo primero que debe
hacer es insertar el logotipo en la esquina superior izquierda.

122. 122
Figura 6-12.
El código de la tabla crea la estructura para el contenido de la página Web.
(El código añadido de la tabla se muestra en color naranja.)
Inserción y vinculación del logotipo
Estamos creando el diseño de una página estándar, de modo que optamos por
insertar el logotipo en la esquina superior izquierda (la más selecta). Pensamos
usar la página principal como plantilla para todas las subpáginas, así que vamos
a vincular el logotipo a la página principal. De esa forma, cuando use la página
principal como plantilla, todas las subpáginas incluirán automáticamente un
logotipo que se vincule a la página principal index.htm del sitio.
Al insertar un logotipo, básicamente está insertando una imagen. Para insertar
una imagen en un documento HTML, se utiliza la etiqueta <IMG> con el
atributo SRC, que señala a un gráfico en particular. Por ejemplo, para
especificar el logotipo del sitio de música, escribiría <IMG
SRC="images/logo.gif">. De igual modo, al insertar el logotipo y
darle formato como hipervínculo, se utilizan los mismos códigos HTML que al
vincular cualquier gráfico. Por lo tanto, debe poner atención a los pasos
siguientes: se descubrirá utilizando bastante estos comandos. En primer lugar,
vamos a insertar el gráfico del logotipo (vincularemos el gráfico en breve):
1 Si es necesario, abra el procesador de texto y el archivo
index.html.

123. 123
2 En la primera celda de la primera fila, haga clic después de la
etiqueta <TD VALIGN="top" WIDTH="170">, presione Entrar,
presione Tab y escriba la siguiente etiqueta HTML, que señala a la
imagen del logotipo:
<IMG SRC="images/logo.gif" ALT="Instrucción
musical de Chris" WIDTH="170" HEIGHT="68"
BORDER="0">
Sugerencia
Agregar espacios y saltos de línea en el código HTML no afectará a la
apariencia de la página Web, por lo que no necesitará hacerlo en el
documento HTML para que coincida con los ejemplos del texto. Nuestros
ejemplos de texto tenían que acortarse para caber en el diseño de las
páginas del curso. Su código se puede escribir como se muestra en las
figuras de referencia de HTML del proyecto incluidas en esta lección.
Con la excepción del atributo SRC, los atributos de la etiqueta <IMG> usados
en el sitio de música son opcionales (aunque muy útiles) y se definen de la
forma siguiente:
■ SRC especifica el nombre de archivo de la imagen (el origen de la
imagen) que se tiene que mostrar.
■ ALT permite proporcionar texto descriptivo que aparece cuando el
cursor se coloca sobre el área de la imagen.
■ WIDTH y HEIGHT especifican el ancho y alto de la imagen.
Debería indicar el tamaño de las imágenes porque de ese modo
los exploradores pueden mostrar la composición de la página Web
con más facilidad y rapidez. Tenga en cuenta que, si cambia el
tamaño de la imagen (por ejemplo, si la amplía o la reduce), debe
hacerlo en el programa de edición de imágenes y no mediante los
atributos WIDTH y HEIGHT del documento HTML; idealmente,
preferirá que las imágenes tengan un tamaño lo más cercano
posible al que se utilizará para mostrarlas en las páginas Web.
■ BORDER especifica el grosor del borde alrededor de la imagen.
De forma predeterminada, se muestra un borde de 1 píxel
alrededor de los gráficos que se han configurado como
hipervínculos. Por lo general, los diseñadores cambian el valor
predeterminado estableciendo el atributo BORDER como "0".

124. 124
Jerga: un delimitador es el A continuación, dará formato a la imagen logo.gif para que actúe como
componente de texto o hipervínculo a la página principal. Básicamente, la creación de un hipervínculo
gráfico en el que se puede conlleva marcar un texto o gráfico como delimitador mediante el par de
hacer clic en un hipervínculo
o un área de destino
etiquetas <A></A> alrededor del texto o la imagen que desea que actúe
especificada dentro de un como hipervínculo y, a continuación, se especifica al explorador lo que debería
documento. El texto del mostrarse cuando se haga clic en elemento delimitador. Para hacer que el
delimitador se rodea con el
par de etiquetas
logotipo sea un hipervínculo, siga estos pasos:
<A></A> 1 Haga clic antes de la etiqueta <IMG...> y escriba
en los documentos HTML.
<A HREF="index.html"> para especificar que cuando los
usuarios hagan clic en el logotipo, se les dirigirá a la página
principal. (Como se ha mencionado anteriormente, esta
información de vinculación resultará práctica cuando copie la
página principal para crear subpáginas.)
2 Haga clic después del paréntesis angular de cierre > de la etiqueta
<IMG...> y escriba </A> para especificar el final del contenido
del delimitador.
Sugerencia
Si usa el Bloc de notas y el código supera el filo de la ventana, abra el
menú Formato y elija Ajusta de línea. Cuando se activa Ajuste de línea, el
Bloc de notas ajusta automáticamente el texto y lo muestra todo en la
ventana actual.
3 Guarde el archivo index.html. Su código HTML debería ser similar
al mostrado en la figura 6-13.
Figura 6-13.
El código que ha agregado ahora inserta un logotipo y vincula su imagen
a la página principal.

125. 125
Inserción del gráfico de la pancarta
de la página principal
Una vez insertado el logotipo, insertar el gráfico de la pancarta de la página
principal le resultará muy sencillo. Este paso conlleva insertar una imagen en la
segunda celda de la primera fila de la tabla. No tendrá que vincular este gráfico,
de modo que el procedimiento es bastante fácil. La única peculiaridad que
presenta la inserción del gráfico de la pancarta es que tendrá que centrarlo
dentro de la celda de la tabla, para lo que habrá que anidar la etiqueta <IMG>
dentro del par de etiquetas <CENTER></CENTER>. Para insertar un gráfico
de pancarta en la página principal, siga estos pasos:
1 Si es necesario, abra el procesador de texto y el archivo
index.html.
2 En la segunda celda de la primera fila, haga clic después de la
etiqueta <TD VALIGN="top" WIDTH="*">, presione Entrar,
presione Tab y escriba lo siguiente:
<CENTER><IMG SRC="images/t_home.gif"
ALT="Instrucción musical de Chris Soll"
WIDTH="415" HEIGHT="62" BORDER="0"
ALIGN="middle"></CENTER>
3 Guarde el archivo index.html. Su código HTML debería ser similar
al de la figura 6-14.
Figura 6-14.
El código de la imagen de pancarta especifica a los exploradores qué
imagen se debería mostrar como pancarta en la página Web index.html.

126. 126
4 Abra el archivo index.html en el explorador. (Si el archivo index.html
ya está abierto en el explorador, haga clic en el botón Actualizar para
actualizar la vista.) El explorador debería mostrar su versión del
archivo index.html como se muestra en la figura 6-15. En ella,
observe que los bordes de la tabla de la primera fila se ven alrededor
de los gráficos insertados. Mantenga el cursor sobre el logotipo o
gráfico de la pancarta para mostrar el texto ALT de la imagen.
Sugerencia
Debe guardar el documento HTML para poder ver los cambios del mismo en
la ventana de un explorador. Si los cambios más recientes no se muestran
en el explorador, compruebe que ha guardado su documento HTML. Si sigue
sin verlos, haga clic en el botón Actualizar del explorador para asegurarse de
que está viendo la versión más actualizada de su página.
Figura 6-15.
En este punto, el archivo index.html se ve en un explorador con el
logotipo vinculado y el gráfico de pancarta de la página principal,
que se colocan en su posición mediante una tabla.
En la sección siguiente, comprobará cómo crear una barra de exploración que
puede usar en todo el sitio de música.

127. 127
Adición de vínculos de exploración
La creación de una barra de exploración para el sitio de música implica insertar
gráficos de botones y vincular cada gráfico a una página Web. Ya ha incluido
el logotipo y el gráfico de la pancarta, de modo que sabe cómo usar la etiqueta
<IMG>. Además, ha vinculado el logotipo, con lo que ya le resultan conocidas
las etiquetas de delimitación <A></A>. La única parte ligeramente delicada
del uso de botones de exploración en el sitio de música es que cada página
muestra un botón personalizado para la página actual. Por ejemplo, siempre que
un usuario visita la página principal, se muestra la versión negra del botón
Página principal y cuando visita otra página del sitio, dicho botón se presenta
en color rojo oscuro. Esta configuración se clarificará a medida que avance en
esta lección. Para crear una barra de exploración en la página principal, siga
estos pasos:
1 Si es necesario, abra el procesador de texto y el archivo
index.html. Colocará la barra de exploración en la primera columna
de la segunda fila de la tabla, con lo que se mostrará en el lateral
izquierdo de la página.
2 Después de la segunda etiqueta <TR>, haga clic en la primera
etiqueta <TD VALIGN="top">, presione Entrar, presione Tab y
escriba <BR> para insertar una línea en blanco entre el gráfico de
logotipo y la siguiente barra de exploración.
En los siguientes pasos, incrustará la etiqueta de imagen de cada botón dentro de
una etiqueta de delimitación que vincule el botón a una página Web denominada
de forma apropiada. No ha creado las subpáginas aún, por lo que debe tomar nota
de los nombres de archivo proporcionados en las etiquetas de delimitación.
Los nombres de archivo de las subpáginas tendrán que coincidir con los de las
referencias de los delimitadores. En total, necesita agregar siete botones.
Comenzará agregando la versión de la página actual del botón Página principal.
(Recuerde que descargó dos versiones de cada botón: la versión de la página
actual de un botón tiene un “2” al final del nombre de archivo del botón.)
3 Presione Entrar, presione Tab y escriba lo siguiente:
<A HREF="index.html"><IMG
SRC="images/b_home2.gif" ALT="Página
principal" WIDTH="170" HEIGHT="24"
BORDER="0"></A>
4 Escriba <BR><BR> para agregar dos líneas vacías, presione
Entrar y presione Tab.
Ahora puede introducir el vínculo y el gráfico del siguiente botón.

128. 128
Sugerencia
Puede escribir varias veces el código HTML con varias referencias de
archivos HREF, nombres de archivo SRC e información ALT, o puede
copiar el código que escribió en los pasos 3 y 4, y pegarlo en la celda de la
tabla seis veces. A continuación, puede reemplazar las referencias de
archivo HREF, los nombres de archivo SRC y las definiciones de texto ALT
en cada entrada, como se muestra en la figura 6-16.
5 Escriba lo siguiente:
<A HREF="lessons.html"><IMG
SRC="images/b_lessons.gif" ALT="Lecciones"
WIDTH="170" HEIGHT="24"
BORDER="0"></A><BR><BR>
6 Presione Entrar, presione Tab y escriba:
<A HREF="recitals.html"><IMG
SRC="images/b_recitals.gif" ALT="Recitales"
WIDTH="170" HEIGHT="24"
BORDER="0"></A><BR><BR>
7 Presione Entrar, presione Tab y escriba:
<A HREF="competitions.html"><IMG
SRC="images/b_competitions.gif"
ALT="Concursos" WIDTH="170" HEIGHT="24"
BORDER="0"></A><BR><BR>
8 Presione Entrar, presione Tab y escriba:
<A HREF="performances.html"><IMG
SRC="images/b_performances.gif"
ALT="Actuaciones" WIDTH="170" HEIGHT="24"
BORDER="0"></A><BR><BR>
9 Presione Entrar, presione Tab y escriba:
<A HREF="background.html"><IMG
SRC="images/b_background.gif"
ALT="Antecedentes" WIDTH="170" HEIGHT="24"
BORDER="0"></A><BR><BR>
10 Presione Entrar, presione Tab y escriba:
<A HREF="contact.html"><IMG
SRC="images/b_contact.gif" ALT="Contacto"
WIDTH="170" HEIGHT="24"
BORDER="0"></A><BR><BR><BR><BR>
Observe que hay cuatro etiquetas <BR> al final del paso 10.
Las líneas adicionales se incluyen porque también deseamos
insertar el icono Envíenos una nota para ofrecer a los usuarios
una forma sencilla de enviar mensajes de correo electrónico a

129. 129
Chris. Cuando crea un vínculo de correo electrónico, usa un
formato de HREF especial en la etiqueta de delimitación, como
se explica a continuación.
11 Presione Entrar un par de veces para separar el código HTML de
Envíenos una nota del código HTML de la barra de exploración principal,
presione Tab y escriba
<A HREF="mailto:mm@creationguide.com">
pero reemplace mm@creationguide.com con su propia
dirección de correo electrónico para que los usuarios puedan abrir
un mensaje de correo electrónico en blanco con su dirección
cuando hagan clic en el icono Envíenos una nota.
12 Inserte el icono Envíenos una nota y escriba el texto siguiente para
cerrar la referencia de delimitación:
<IMG SRC="images/sendnote.gif" ALT="Correo
electrónico para Chris" WIDTH="170"
HEIGHT="77" BORDER="0"></A>
13 Guarde el archivo index.html. Su código HTML debería ser similar
al mostrado en la figura 6-16.
Figura 6-16.
El código HTML de la barra de exploración se inserta en una celda de
la tabla.

130. 130
14 Abra el archivo index.html en el explorador. Su página principal
debe incluir ahora una barra de exploración en la parte izquierda,
como se muestra en la figura 6-17. Observe que el botón Página
principal se muestra de forma diferente a los otros botones para
indicar a los usuarios que están viendo la página principal. Haga
clic en el logotipo y en el botón Página principal para comprobar
que la página principal se vuelve a mostrar. (Al hacer clic en
cualquier otro botón de la barra de exploración, se producirá un
error porque aún no ha creado esas páginas.) Pase con el cursor
sobre cada botón para comprobar que el texto ALT es correcto en
cada caso. Haga clic en el icono Envíenos una nota para
asegurarse de que se abre un mensaje de correo electrónico en
blanco y se le envía.
Figura 6-17.
Puede probar parte de su código HTML si hace clic en el botón Página
principal y en la imagen Envíenos una nota en la barra de exploración.
Inserción de la información del pie de
página
A continuación, tiene que agregar la información del pie de página. El pie de
Si necesita más ayuda, vea
la figura 6-18 cuando inserte página del sitio de música incluye un gráfico de pie de página, información de
la información del pie de la dirección y el número de teléfono, vínculos de texto que se corresponden con
página del sitio Web. los vínculos de la barra de exploración y texto de copyright.

131. 131
El proceso de inserción de un gráfico de pie de página es similar al de inserción
del gráfico de encabezado descrito anteriormente en esta lección. La diferencia
principal en el área del pie de página es que va a colocar el gráfico
correspondiente en la segunda celda de la tercera fila y va a insertar cierta
información adicional en la celda junto con el gráfico (según se describe en la
sección siguiente). Puesto que va a incluir otra información debajo del gráfico
del pie de página, anidará el gráfico dentro de las etiquetas de párrafo
(<P></P>) para asegurarse de que se va a incluir ese espacio sobre el gráfico.
Vamos a empezar a crear el elemento de pie de página insertando el gráfico de
pie de página:
1 Si es necesario, abra el procesador de texto y el archivo
index.html.
2 En la tercera fila de la tabla, haga clic después de la segunda
etiqueta <TD VALIGN="top">, presione Entrar, presione Tab y,
después, escriba <P ALIGN="CENTER"> para indicar el inicio
de un párrafo y especificar que su contenido se alinee al centro.
De forma predeterminada, los párrafos se alinean a la izquierda.
3 Especifique la información de la imagen del pie de página; para
ello, inserte la etiqueta de imagen con los atributos siguientes:
<IMG SRC="images/footer.gif" ALT="Instrucción
musical de Chris Soll" WIDTH="415"
HEIGHT="62" BORDER="0" ALIGN="middle">
4 Escriba </P> para indicar el final de la sección de párrafo.
La etiqueta </P> de cierre es opcional pero, si se agrega,
se clarifica el código.
Después, insertará un segundo párrafo que centre la información de la dirección
y el número de teléfono.
5 Presione Entrar dos veces, presione Tab y escriba:
Observe la etiqueta <BR> en el código HTML anterior entre el
texto de la dirección y el número de teléfono. Al agregar la etiqueta
<BR>, inserta un salto de página y muestra el número de teléfono
debajo de la dirección en la línea siguiente.
Ahora, agregará varios vínculos de texto en el área del pie de
página que corresponde a los botones de la barra de exploración;
de esa forma, si algún usuario tiene los gráficos desactivados,
podrá seguir explorando su sitio. Para agregar vínculos de texto,
debe seguir un procedimiento similar al de creación de vínculos
gráficos. La diferencia entre ambas tareas es que debe encerrar el
texto entre vínculos de delimitación en lugar de en una etiqueta
IMG, como se muestra en los pasos siguientes. Primero, debe
centrar el párrafo que contiene los vínculos de texto.

132. 132
6 Presione Entrar dos veces, presione Tab y escriba
<P ALIGN="CENTER">.
7 Presione Entrar, presione Tab y escriba lo siguiente:
<A HREF="index.html">Página principal</A> |
En el vínculo anterior, las palabras Página principal se mostrarán
como hipertexto en la página Web. Si los usuarios hacen clic en las
palabras Página principal, se visualizará el archivo index.html.
Observe también la barra vertical (|). Este símbolo se escribe entre
cada vínculo de texto para facilitar su diferenciación. El símbolo es
opcional pero se usa bastante. Ahora está preparado para agregar
el resto de los vínculos de texto.
Sugerencia
No tiene que presionar Entrar y Tab entre cada una de las entradas de
vínculos de texto en los pasos 8 a 14. Los exploradores mostrarán los
vínculos en una fila independientemente del espacio que agregue en el
documento HTML. Elegimos dar formato a los vínculos de texto del modo
descrito para que trabajar con la información resultara más fácil.
8 Presione Entrar, presione Tab y escriba:
<A HREF="lessons.html">Lecciones</A> |
9 Presione Entrar, presione Tab y escriba:
<A HREF="recitals.html">Recitales</A> |
10 Presione Entrar, presione Tab y escriba:
<A HREF="competitions.html">Concursos<A> |
11 Presione Entrar, presione Tab y escriba:
<A HREF="performances.html">Actuaciones</A> |
12 Presione Entrar, presione Tab y escriba:
<A HREF="background.html">Antecedentes</A> |
13 Presione Entrar, presione Tab y escriba:
<A HREF="contact.html">Información de
contacto</A> |
La entrada final del vínculo de texto es el equivalente de texto del icono
Envíenos una nota que insertó anteriormente. Por lo tanto, este vínculo de
texto usa el componente mailto: en el atributo HREF. Recuerde reemplazar
mm@creationguide.com con su dirección de correo electrónico en el
paso siguiente.
14 Presione Entrar, presione Tab y escriba:

133. 133
<A HREF="mailto:mm@creationguide.com">Correo
electrónico para Chris</A>
15 Para completar el párrafo del vínculo de texto, presione Entrar,
presione Tab y escriba </P>.
El componente final del pie de página es la información de copyright. En esta
sección, crea un párrafo centrado y especifica la información de copyright. Una
peculiaridad interesante aquí es que puede usar una referencia de una entidad
de carácter especial para crear un símbolo de copyright.
Sugerencia
Una referencia de entidad de carácter es una combinación especial de
teclas que incluye el símbolo Y comercial (&) y que le permite mostrar
caracteres que no son estándar, como los acentos, los símbolos de
marca registrada y otros, en las páginas Web.
16 Presione Entrar dos veces, presione Tab y escriba:
<P ALIGN="CENTER">&copy 2002 Chris Soll.
Todos los derechos reservados</P>
17 Guarde el archivo index.html. Su código HTML debería ser similar
al mostrado en la figura 6-18.
18 Abra el archivo index.html en el explorador. El pie de página del
archivo index.html debería tener una apariencia semejante a la
información de pie de página en la página mostrada en la figura 6-
19.
Figura 6-18.
En el sitio de música, la información de pie de página se agrega a la
última celda de la tabla.

134. 134
Figura 6-19.
Puede ver la forma en que un explorador interpreta el código HTML de
pie de página si obtiene una vista previa de la página index.html del sitio
de música.
Puede que se haya cuenta de que ha diseñado todo lo que aparece en la página
principal excepto el contenido básico. Le encantará oír que hay una razón.
Ahora que tiene creada la estructura básica de la página principal y dado que
piensa imitar dicha estructura en las subpáginas, puede utilizar el archivo
index.html para crear rápidamente las páginas básicas en las subpáginas,
según se describe en la sección siguiente.
Copiar el marco de trabajo de la
página principal para las subpáginas
Probablemente, ya haya adivinado que necesitamos crear algunas páginas para
vincularlas a la barra de exploración y a los vínculos de texto. En concreto, en
el sitio de música se llama a las páginas siguientes:
■ index.html (en cuyo proceso de creación se encuentra inmerso)
■ lessons.html
■ recitals.html
■ competitions.html
■ performances.html
■ background.html
■ contact.html

135. 135
En esta sección, va a crear las seis páginas HTML adicionales que conforman
el sitio de música. Podría copiar todo el código de index.html, pegarlo en un
documento de texto en blanco y a continuación guardar el documento en forma
de archivo HTML, pero somos demasiado perezosos para eso. A continuación
explicamos cómo nos las arreglamos para crear la mayor parte del código de las
subpáginas:
1 Abra la carpeta C:music.
2 Haga clic con el botón secundario del mouse en el archivo
index.html y haga clic en Copiar, en el menú contextual.
3 Haga clic con el botón secundario del mouse en la carpeta y haga
clic en Pegar.
4 Repita cinco veces el paso 3 (de modo que tenga seis copias del
archivo index.html). Su carpeta music debería ser similar a la
mostrada en la figura 6-20.
5 Haga clic con el botón secundario del mouse en la primera copia
de index.html, haga clic en Cambiar nombre en el menú contextual,
escriba lessons.html y presione Entrar. Compruebe que cambia
el nombre de los archivos copiados con precisión y con todas las
letras en minúsculas; si cambia los nombres de los archivos en
este momento, los vínculos que haya creado en su código HTML
no funcionarán.
Figura 6-20.
Al copiar el archivo index.html seis veces se crean plantillas para sus seis
subpáginas.
6 Con el procedimiento descrito en el paso 5, cambie el nombre de
los archivos recitals.html, competitions.html, performances.html,
background.html y contact.html.
7 Abra el procesador de texto, abra el archivo lessons.html y,
después, realice los seis cambios siguientes, que se resaltan en
color en la figura 6-21:

136. 136
En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y
escriba: Lecciones.
■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0".
■ En la segunda celda de la primera fila de la tabla, cambie
t_home.gif por t_lessons.gif.
También en la segunda celda de la primera fila de la tabla, reemplace el texto
ALT="Instrucción musical de Chris Soll" por el texto
ALT="Lecciones".
■ En el código HTML de la barra de exploración, cambie el texto del
botón Página principal b_home2.gif por b_home.gif.
■ Asimismo, en el código HTML de la barra de exploración,
cambie el texto del botón Lecciones b_lessons.gif por
b_lessons2.gif.
Figura 6-21.
Para usar una copia de index.html como subpágina, tiene que modificar
ligeramente el código HTML y adaptar cada página.
8 Guarde el archivo lessons.html.
El uso de una página de En este momento ha completado el documento básico para la página Lecciones.
base rellenada para crear ¡No ha sido tan difícil! Para comprobar la página, haga doble clic en
las subpáginas es un lessons.html con el objeto de ver la página en un explorador. Si todo parece
procedimiento rápido y
favorece la coherencia
correcto (como se muestra en la figura 6-22), ya puede continuar. El siguiente
en el sitio. paso es repetir el breve proceso de personalización en los documentos del resto
de las subpáginas.

137. 137
9 Abra el archivo recitals.html en el procesador de texto y haga los
cambios siguientes:
En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y
escriba: Recitales.
■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0".
■ En la segunda celda de la primera fila de la tabla, cambie
t_home.gif por t_recitals.gif.
■ También en la segunda celda de la primera fila de la tabla,
reemplace el texto ALT="Instrucción musical de
Chris Soll" por el texto ALT="Recitales".
■ En el código HTML de la barra de exploración, cambie el texto del
botón Página principal b_home2.gif por b_home.gif.
■ Asimismo, en el código HTML de la barra de exploración,
cambie el texto del botón Recitales b_recitals.gif por
b_recitals2.gif.
10 Guarde el archivo recitals.html.
11 Abra el archivo competitions.html en el procesador de texto y haga
los cambios siguientes:
En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y
escriba: Concursos.
■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0".
En la segunda celda de la primera fila de la tabla, cambie t_home.gif por
t_competitions.gif.
■ También en la segunda celda de la primera fila de la tabla,
reemplace el texto ALT="Instrucción musical de
Chris Soll" por el texto ALT="Concursos".
■ En el código HTML de la barra de exploración, cambie el texto del
botón Página principal b_home2.gif por b_home.gif.
■ Asimismo, en el código HTML de la barra de exploración,
cambie el texto del botón Concursos b_competitions.gif
por b_competitions2.gif.
12 Guarde el archivo competitions.html.
13 Abra el archivo performances.html en el procesador de texto y
haga los cambios siguientes:
En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y
escriba: Actuaciones.
■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0".
■ En la segunda celda de la primera fila de la tabla, cambie
t_home.gif por t_performances.gif.

138. 138
■ También en la segunda celda de la primera fila de la tabla,
reemplace el texto ALT="Instrucción musical de
Chris Soll" por el texto ALT="Actuaciones".
En el código HTML de la barra de exploración, cambie el texto del botón
Página principal b_home2.gif por b_home.gif.
■ Asimismo, en el código HTML de la barra de exploración,
cambie el texto del botón Actuaciones b_performances.gif
por b_performances2.gif.
14 Guarde el archivo performances.html.
15 Abra el archivo background.html en el procesador de texto y haga
los cambios siguientes:
En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y
escriba: Antecedentes.
■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0".
■ En la segunda celda de la primera fila de la tabla, cambie
t_home.gif por t_background.gif.
■ También en la segunda celda de la primera fila de la tabla,
reemplace el texto ALT="Instrucción musical de
Chris Soll" por el texto ALT="Antecedentes".
■ En el código HTML de la barra de exploración, cambie el texto del
botón Página principal b_home2.gif por b_home.gif.
■ Asimismo, en el código HTML de la barra de exploración,
cambie el texto del botón Antecedentes b_background.gif
por b_background2.gif.
15 Guarde el archivo background.html.
16 Abra el archivo contact.html en el procesador de texto y haga los
cambios siguientes:
En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y
escriba: Contacto.
■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0".
■ En la segunda celda de la primera fila de la tabla, cambie
t_home.gif por t_contact.gif.
■ También en la segunda celda de la primera fila de la tabla,
reemplace el texto ALT="Instrucción musical de
Chris Soll" por el texto ALT="Contacto".
■ En el código HTML de la barra de exploración, cambie el texto del
botón Página principal b_home2.gif por b_home.gif.
■ Asimismo, en el código HTML de la barra de exploración,
cambie el texto del botón Contacto b_contact.gif por
b_contact2.gif.

139. 139
17 Guarde el archivo contact.html.
18 Abra el archivo index.html en el explorador. Haga clic en cada
botón de la barra de exploración para comprobar su trabajo.
Cuando haga clic en un botón, debe mostrarse una página de
base; cada subpágina tiene que incluir el texto de la barra de título
de la página actual, un gráfico de pancarta del título personalizado
y un botón de barra de exploración (en negro) de la página actual
que se corresponda con la página mostrada. Además, en las
subpáginas no deben mostrarse las líneas del borde de la tabla (ya
que cambió el atributo BORDER en la etiqueta <TABLE> por "0"
en cada subpágina). En la figura 6-22 se ilustra cómo se
debe mostrar la página Lecciones en la ventana del explorador.
Figura 6-22.
Cada subpágina muestra ahora una pancarta de título personalizado y
un botón negro “activo”.
¡Enhorabuena! Ha creado la estructura de todo el sitio de música. Ahora
insertaremos algo de contenido en la página principal.
Inserción de texto en el cuerpo de la
página principal
En esta sección, va a insertar un fragmento de texto en el cuerpo de la página
principal del sitio de música. Este paso se reduce en realidad a practicar con el
formato de texto. El contenido básico de la página principal consta de un par de
encabezados, texto en un párrafo, citas coloreadas y una lista sin numerar
vinculada. Por lo tanto, como puede imaginar, discutiremos cómo crear estos
tipos de elementos en las páginas siguientes.

140. 140
Creación de encabezados
En el código HTML, puede definir seis niveles de encabezados mediante los
pares de etiquetas <H1></H1>, <H2></H2> y sucesivamente hasta
<H6></H6>, donde el tamaño del encabezado 1 es el mayor y el 6 el menor.
La figura 6-23 ilustra un ejemplo de los diversos tamaños de los encabezados.
Figura 6-23.
Los encabezados HTML estándar tienen seis tamaños predeterminados.
El sitio de música utiliza una etiqueta de encabezado en la página principal, que
da formato al mensaje de bienvenida al principio de la página:
1 Abra el procesador de texto y el archivo C:musicindex.html.
2 En la segunda fila y la segunda celda de la tabla (la celda siguiente
a la información de la barra de exploración), haga clic después de
<TD VALIGN="top">, presione Entrar y presione la tecla Tab.
En primer lugar, definirá el estilo de fuente para el texto del cuerpo de la celda:
3 Escriba lo siguiente:
<FONT FACE="verdana, arial, sans-serif">
Observe en el paso 3 los tres nombres de fuente del atributo
FACE. Dado que no sabe qué fuentes van a tener instaladas los
usuarios en su sistema, debe proporcionar un plan de repuesto
cuando defina los estilos de fuente. En el paso 3, si el equipo de un
usuario tiene instalada la fuente Verdana, el explorador mostrará el
texto del cuerpo siguiente en este estilo de fuente. Si Verdana no
está instalada en el equipo del usuario, el explorador buscará la
familia de la fuente Arial. Si ni Verdana ni Arial están instaladas en
el sistema del usuario, el explorador mostrará el texto del cuerpo
en un estilo Sans Serif. Si las fuentes enumeradas en la etiqueta
de fuente no se encuentran en el equipo del usuario, el explorador
mostrará el texto en su estilo de fuente predeterminado.

141. 141
A continuación, agregará un salto de línea y un encabezado de bienvenida en la
página principal del sitio de música.
4 Presione Entrar, presione Tab, escriba <BR> para agregar un salto
de línea, presione Entrar, presione Tab y escriba la información de
encabezado siguiente con el tamaño 3:
<H3>Bienvenidos al recurso en línea de Chris
Soll, donde se proporciona información de sus
actuaciones e instrucción musical.</H3>
5 Guarde el archivo index.html. Su código debería ser similar al de la
figura 6-24.
Figura 6-24.
El código agregado especifica un estilo de fuente e inserta un encabezado
de tamaño 3.
Adición de un párrafo de texto
Después del encabezado de bienvenida que creó en la sección anterior, agregará
texto al cuerpo. Las etiquetas <P></P> son las básicas que usará al
especificar texto en un párrafo, que es lo que va a hacer a continuación.
1 Haga clic después de la etiqueta </H3> que creó en la sección
previa, presione Entrar, presione Tab y escriba <P>¡Conozcan
a Chris!</P>.

142. 142
2 Presione Entrar, presione Tab y escriba lo siguiente:
<P>En su calidad de profesora de música
con gran experiencia y reconocimiento
internacional, enseña piano y flauta a
músicos en ciernes, aficionados y
profesionales.</P>
3 Presione Entrar, presione Tab y escriba lo siguiente:
<P>Para complementar su considerado programa
instructivo, realiza actuaciones regularmente
en todo el mundo y, cada año, organiza
recitales y concursos en los que participan
sus alumnos.</P>
4 Finalmente, presione Entrar, presione Tab y escriba lo siguiente:
<P>Sus testimonios resumen las bondades del
éxito de la enseñanza de Chris:</P>
5 Guarde el archivo index.html.
Su código HTML debería ser similar al de la figura 6-25. Además, si obtiene
una vista previa del archivo index.html en el explorador, la página principal
debería parecerse a la de la figura 6-26. Su página está configurada casi por
completo; sólo falta agregar una cita o dos, lo que constituye el tema de la
sección siguiente.
Figura 6-25.
Este código muestra el texto del párrafo que se agrega a la página principal
del sitio de música.

143. 143
Figura 6-26.
En este punto, en la página principal debería mostrarse el texto de los
encabezados y del párrafo.
Formato de las citas y color del texto
Puede dar formato al texto como una cita para desplazarlo del texto que lo
rodea. Generalmente, los exploradores interpretan las parejas de etiquetas
<BLOCKQUOTE></BLOCKQUOTE> aplicando sangría a los márgenes
izquierdo y derecho del texto incluido en ellas. Si realmente desea aplicar
sangría al párrafo, puede anidar un comando de cita dentro de otro,
como en este ejemplo: <BLOCKQUOTE><BLOCKQUOTE>
</BLOCKQUOTE></BLOCKQUOTE>.
En esta sección, creará citas con el texto en color rojo oscuro:
1 Abra el archivo index.html en un procesador de texto, si es
necesario, haga clic después de Chris:</P> en la segunda celda
de la segunda fila de la tabla, presione Entrar dos veces y presione
la tecla Tab.
2 Escriba <BLOCKQUOTE><BLOCKQUOTE> para crear una cita
anidada dentro de otra.
3 Presione Entrar, presione Tab y escriba lo siguiente:
<FONT COLOR="maroon"><P><I>Chris es, con
mucho, la mejor profesora de música que he
tenido. Me enseñó más de lo que podría haber
aprendido en toda una vida con Viktor
McTonedeaf, el profesor de Royal
Music.</I></P>
Observe que el atributo COLOR de la etiqueta FONT se usa para
modificar el color del texto del párrafo.

144. 144
4 Presione Entrar dos veces, presione Tab y escriba lo siguiente:
<P ALIGN="RIGHT"><I>- Moe Zart</I></P>
De esta forma, se inserta un nombre en cursiva, alineado a la
derecha, que se asocia con la cita especificada en el paso 3.
5 Presione Entrar dos veces, presione Tab y escriba lo siguiente:
<P><I>Chris Soll es la mejor profesora que
tuve antes de que "un incidente" terminara mi
carrera musical. Es una verdadera
maestra.</I></P>
6 Presione Entrar dos veces, presione Tab y escriba:
<P ALIGN="RIGHT"><I>- Vincent Vanngo</I></P>
7 Presione Entrar, presione Tab y escriba </FONT> para finalizar el
formato de color de fuente rojo oscuro.
8 Presione Entrar dos veces, presione Tab y escriba
</BLOCKQUOTE></BLOCKQUOTE> para finalizar la
configuración e formato de cita.
9 Guarde el archivo index.html.
El texto de la cita debería aparecer en su documento HTML como se ilustra en
la figura 6-27. La figura 6-28 muestra el texto de la cita cuando se ve en un
explorador.
Figura 6-27.
Se agregan citas a las páginas Web para desplazar el texto.

145. 145
Figura 6-28.
Para mostrar las citas, Internet Explorer aplica sangría al texto en los
márgenes izquierdo y derecho.

146. 146
Creación de una lista sin numerar vinculada
El tipo final del texto que creará para la página principal del sitio de música es
una lista sin numerar. Este tipo de lista aparece como lista con viñetas en una
página Web, como se muestra en la figura 6-29.
Figura 6-29.
De forma predeterminada, las listas sin numerar se muestran con viñetas.
Nota
Puede usar los comandos HTML <OL></OL> para crear listas numeradas
(ordenadas) o los comandos <UL></UL> para crear listas sin numerar
(con viñetas). Cada elemento de estas listas se identifica mediante el par
de etiquetas <LI></LI>.
En esta sección, primero agregará un pequeño fragmento de texto que introduce
la lista sin numerar y, después, creará la lista (que incluye vínculos a las
páginas apropiadas):
1 Abra el archivo index.html en un procesador de texto, si es
necesario, haga clic al final de </BLOCKQUOTE>, en la segunda
celda de la segunda fila de la tabla, presione Entrar dos veces,
presione Tab y, después, escriba el párrafo siguiente:
<P>Solicite recibir sus lecciones hoy y únase a
la élite de pianistas y flautistas que estudian
con una de las mejores profesoras de Norte
América.</P>

147. 147
2 Presione Entrar dos veces, presione Tab y escriba lo siguiente:
<P><B>Información general del sitio</B></P>
En el paso 3, insertará la etiqueta <UL> para comenzar la lista
sin numerar.
3 Presione Entrar dos veces, presione Tab y escriba <UL>.
En los pasos 4 a 9, para crear los elementos de la lista, incluirá cada elemento
dentro del par de etiquetas <LI></LI>. Asimismo, dará formato a la primera
palabra de cada entrada de la lista como hipervínculo a otra página del sitio.
4 Presione Entrar, presione Tab y escriba lo siguiente:
<LI><A HREF="lessons.html">Lecciones</A>
Información sobre cómo recibir instrucción
musical de Chris, incluyendo disponibilidad y
cuotas.</LI>
5 Presione Entrar, presione Tab y escriba lo siguiente:
<LI><A HREF="recitals.html">Recitales</A>
Programas, alumnos que participan y títulos de
las piezas representadas en los recitales de los
alumnos.</LI>
6 Presione Entrar, presione Tab y escriba lo siguiente:
<LI><A HREF="competitions.html">Concursos</A>
Fechas, cuotas, normas, programas e información
de la ceremonia de entrega de premios de los
próximos concursos de alumnos.</LI>
7 Presione Entrar, presione Tab y escriba lo siguiente:
<LI><A HREF="performances.html">Actuaciones</A>
Calendario de las actuaciones personales de Chris
Soll, que incluye fechas, ubicación, piezas e
información de las entradas.</LI>
8 Presione Entrar, presione Tab y escriba lo siguiente:
<LI><A HREF="background.html">Antecedentes</A>
Formación, actuaciones y experiencia
docente.</LI>
9 Presione Entrar, presione Tab y escriba lo siguiente:
<LI><A HREF="contact.html">Contacto</A>
Direcciones de correo electrónico, direcciones
físicas, números de teléfono y vínculos de mapas
que pueden ayudarle cuando solicite recibir las
lecciones y desee asistir a las actuaciones o
ponerse en contacto con Chris.</LI>
10 Presione Entrar, presione Tab y escriba </UL> para terminar la
lista sin numerar.
11 Presione Entrar, presione Tab y escriba </FONT> para completar el
texto del cuerpo y finalizar la especificación de la familia de la fuente.

148. 148
12 Guarde el archivo index.html.
El código de la lista sin numerar debería ser similar al mostrado en la
figura 6-30 (y su página index.html se debería parecer a la mostrada
anteriormente en la figura 6-29).
Figura 6-30.
El código HTML resaltado incluye texto de los párrafos y una lista sin
numerar, con hipervínculos.
Por último, aunque no por ello con menor importancia, insertará una fotografía
vinculada en el área del cuerpo de la página principal del sitio de música.
Inserción y vinculación de una
imagen
En este momento, ya debería estar habituado a insertar y vincular gráficos.
(¡Ha adquirido mucha práctica hace un momento mientras creaba la barra
de exploración!) En esta página, preferimos mostrar la imagen debajo del
encabezado de tamaño 3 en la parte derecha de la página. Además, puesto que
la fotografía es una imagen de Chris, la vinculamos a la página Antecedentes.
Para insertar una imagen vinculada dentro del texto del cuerpo de su página,
siga estos pasos:
1 Abra el archivo index.html en un procesador de texto, si es
necesario, haga clic después de la etiqueta </H3> en la segunda
celda de la segunda fila de la tabla, presione Entrar dos veces y
presione la tecla Tab.

149. 149
2 Escriba la información de imagen y el vínculo siguientes:
<A HREF="background.html"><IMG
SRC="images/p_chris.jpg" ALT="pic: Chris
Soll" WIDTH="170" HEIGHT="250" BORDER="0"
HSPACE="25" VSPACE="10" ALIGN="right"></A>
En este paso, puede ver algunos atributos añadidos a la etiqueta
<IMG>, que se definen como sigue:
■ HSPACE le permite especificar espacio adicional (en píxeles) entre
la imagen y el texto en los laterales izquierdo y derecho de la
misma.
■ VSPACE permite especificar espacio adicional (en píxeles) entre la
imagen y el texto por encima y por debajo de la imagen.
■ ALIGN indica que se alinee la imagen en la página y el texto se
ajuste en consecuencia. En este ejemplo, la imagen se alinea en el
lateral derecho de la página.
3 Guarde el archivo index.html.
Finalizando la página principal
Por último, debe quitar los bordes de la tabla en la página principal para poder
anunciar que su proyecto está terminado. Además, debe comprobar los vínculos
y ver todas las páginas con el fin de asegurarse de que el código HTML que ha
escrito es correcto. Primero, vamos a deshacernos de los bordes en la página
principal:
1 Abra el archivo index.html en un procesador de texto.
2 En la etiqueta <TABLE>, cambie el atributo BORDER de "1"
a "0".
3 Guarde el archivo index.html.
Ahora vamos a hacer clic en los vínculos, gráficos, texto ALT y otros elementos
de la página, y los comprobaremos. Por ejemplo, tiene que asegurarse de que en
ninguna de las páginas aparecen dos botones negros.
4 Abra el explorador, muestre index.html (o, si el documento ya está
abierto en el explorador, haga clic en Actualizar) y, después, haga
clic en cada vínculo (incluidas las imágenes vinculadas, el logotipo,
el icono Envíenos una nota y los vínculos de texto) para comprobar
que funcionan apropiadamente y que las páginas se muestran de
forma correcta. Si algún vínculo no responde como se espera, abra
el documento HTML correspondiente en el procesador de texto y
compruebe el código HTML minuciosamente. Revise los gráficos
de los botones y las pancartas para asegurarse de que ha incluido
los apropiados en cada página.

150. 150
Nota
Puede que haya observado que sólo hemos proporcionado contenido para
la página principal. En este momento, pensamos que está suficientemente
preparado como para especificar el contenido del resto de las páginas si
desea obtener más práctica en el uso de HTML.
Uso del marco de trabajo del sitio de
música como plantilla
Después de todo el duro trabajo que le supuesto crear el sitio de música,
deseamos que tenga una plantilla HTML útil que pueda personalizar con
facilidad. Por lo tanto, vamos a contarle un pequeño secreto. Puede crear un
sitio Web con la plantilla del sitio de música incluso si no tiene ningún gráfico.
No es necesario que disponga de ninguna imagen de fondo, gráficos de
pancartas ni botones. Por el contrario, puede crear un sitio Web con los
vínculos de texto y los fondos en color si reemplaza los elementos de contenido
en las páginas Web del sitio de música. En la figura 6-31 se ilustra una página
Web que usa el sitio Web de música sin gráficos.
Figura 6-31.
Puede crear un sitio Web basado en texto que use el sitio de música como
plantilla.

151. 151
Sugerencia
Los gráficos pequeños de la página de ejemplo de la figura 6-35 son
imágenes prediseñadas que se descargan y se pegan conjuntamente para
crear una imagen sencilla. Si prefiere no incluir ningún gráfico en la página,
basta con que elimine la etiqueta <IMG> de su documento HTML.
En la figura 6-32 se muestra la página de la plantilla y en la figura 6-33 se
ilustra parte de su código fuente. Si desea agilizar el proceso cuando utilice una
plantilla para crear una página personalizada, haga clic en el menú Ver y,
después, en Código fuente para mostrar el código fuente de la plantilla. A
continuación, en la ventana de código fuente, haga clic en el menú Archivo,
haga clic en Guardar como y guarde el código fuente en el equipo. Ahora,
puede modificar su versión local de la plantilla si reemplaza el texto marcador
de posición con su contenido personalizado.
Figura 6-32.
Puede modificar la plantilla basada en texto para crear una página
personalizada.

152. 152
Figura 6-33.
Puede copiar el código fuente de la plantilla para tener un buen punto de
partida para el código de su página personalizada.
Sugerencia
En la figura 6-33, puede ver entradas de código HTML que comienzan
con un signo de admiración y dos guiones: <!-- logo -->. Estos tipos
de entradas se denominan comentarios. Los comentarios no se muestran
en la página Web; se usan como notas que permiten a los desarrolladores
etiquetar fragmentos del documento HTML. Los comentarios se han
agregado a la plantilla de ejemplo para ayudarle a identificar los
componentes HTML cuando personalice el código fuente.
Finalmente, observe en la figura 6-33 que el atributo BGCOLOR de la etiqueta
<BODY> se ha cambiado de blanco (#ffffff) a púrpura (#ccccff) y que
la primera etiqueta <TD> de cada fila de la tabla contiene un atributo
BGCOLOR configurado como dorado (#ffcc00). Puede usar el atributo
BGCOLOR para colorear el fondo de la página además de las celdas de la tabla,
si no usa ninguna imagen de fondo. Puede obtener una apariencia bastante
creativa si aplica un color al fondo y colorea las celdas de la tabla
selectivamente con otro color diferente. (No tiene que colorear igual todas las
celdas de la tabla.)

153. 153
Recursos adicionales
Como hemos mencionado, abundan las páginas Web y los libros de HTML.
A continuación indicamos algunos de nuestros recursos de HTML favoritos:
■ Castro, Elizabeth. HTML for the World Wide Web. 4ª edición ed.
Berkeley, CA: Peachpit Press, 2000. (ISBN: 0-201-35493-4)
Este libro muestra visualmente cómo usar la mayor parte de los
comandos HTML. Las explicaciones son breves pero útiles cuando
se usan conjuntamente con las referencias visuales.
■ Morrison, Michael. Faster Smarter HTML & XML. Redmond, WA:
Microsoft Press, 2002. (ISBN: 0-7356-1861-5) Este libro se destina
a los usuarios interesados pero inexpertos que deseen desarrollar
páginas Web con HTML. Una característica agradable de este libro
es que ofrece varias oportunidades de aprender de forma práctica.
■ Página de recursos de Creation Guide
(www.creationguide.com/resources, en inglés) que se actualiza
continuamente para incluir los recursos relacionados con el
desarrollo Web más actuales.
■ El sitio Web del World Wide Web Consortium (www.w3.org, en
inglés) es el sitio principal en línea para la mayor parte de las
especificaciones de HTML más recientes. En el momento de
redactar este documento, HTML 4.01 es la especificación
aceptada. Use los vínculos Table of Contents, Elements y
Attributes (Tabla de contenido, Elementos y Atributos,
respectivamente)
en la página para buscar los comandos HTML y su descripción.
Puede encontrar una lista muy útil de elementos HTML en
www.w3.org/TR/1999/REC-html401-19991224/index/elements.html
(en inglés).
■ Web Developer’s Virtual Library (www.wdvl.com, en inglés)
proporciona recursos, código de ejemplo y tutoriales para
desarrolladores Web.
■ webmonkey (http//hotwired.lycos.com/webmokey/, en inglés)
proporciona numerosos recursos para desarrolladores en línea.

154. 154
Puntos clave
■ Los comandos HTML sirven como instrucciones que indican a un
explorador cómo mostrar el contenido de una página Web.
■ Los comandos HTML aparecen entre marcas < >, que suelen
venir en pares, y en ellos no se distinguen mayúsculas y
minúsculas.
■ Las etiquetas HTML de apertura suelen contener atributos que
permiten refinar sus instrucciones.
■ Las etiquetas estándar para los documentos HTML son las
siguientes:
■ <!DOCTYPE...>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
■ Si es posible, almacene todos los documentos y gráficos de un sitio
Web dentro de la misma carpeta principal. Cree una carpeta de
imágenes para los gráficos del sitio Web dentro de la carpeta
principal.
■ Para hacerle la vida más fácil, idee un sistema de denominación de
gráficos que le ayude a diferenciar los diversos tipos de imágenes,
como los botones, pancartas, fotografías, etcétera.
■ Cuando cree páginas Web, guarde los documentos HTML y véalas
en un explorador con frecuencia.
■ Compruebe siempre que ha incluido todos los paréntesis angulares
(<>) y comillas ("") en el código. Si faltan elementos o los
comandos HTML están mal escritos, la página puede mostrarse de
forma inapropiada o no mostrarse en ningún explorador.

155. 155
LECCIÓN 7
Creación de sitios Web
con FrontPage
Una vez completada esta lección, podrá:
 Usar FrontPage para automatizar la creación de páginas Web.
 Diseñar subpáginas a partir de una plantilla estándar, insertar tablas y
agregar botones de exploración y pies de página.
 Definir hojas de estilo en cascada (CSS) para dar formato a las
páginas Web.
 Crear mapas de imágenes y formularios para conseguir que un sitio
sea más interactivo.
 Utilizar FrontPage para crear una página principal.
Cuando ve las noticias en la televisión, el único “equipamiento” que necesita es
el aparato y un lugar donde sentarse. Pero ¿ y cuando alquila un vídeo o solicita
una película de pago por visión que está repleta de estupendos efectos especiales
y tiene una banda sonora imponente? En lugar de acudir a la televisión de
13 pulgadas de andar por casa, es probable que prefiera usar lo último en
sistemas para entretenimiento doméstico: es decir, el exclusivo sistema que se
puede controlar fácilmente mediante un único control remoto y que tiene una
televisión de pantalla grande ultra nítida, con cable digital, estéreo Dolby y
componentes de sonido envolvente, todo mezclado en las sombras y colocado
estratégicamente para lograr una visualización óptica y una sensación acústica de
lo más placenteros, entre los confortables pliegues de un enorme sofá de piel.
Reconozcamos que estos “extras” no son estrictamente necesarios, pero, con
seguridad, pueden marcar una gran diferencia en ocasiones. Lo mismo se puede
decir de los editores HTML. El Bloc de notas (un procesador de texto básico)
puede semejarse a la forma de crear páginas Web “con el televisión, la silla y el
control remoto”, mientras que FrontPage proporciona la solución al estilo del
“sistema de lujo para el entretenimiento doméstico” en el desarrollo de sitios
Web. En esta lección, vamos a ocuparnos de los “extras”.
Para crear las páginas Web descritas en esta lección, necesitará los siguientes
“utensilios”:
■ Una copia de Microsoft FrontPage (preferiblemente la versión 2002).
■ 39 archivos de ejercicios, que se pueden encontrar en la
subcarpeta Lesson07 de la carpeta Practice, en el disco duro.
Estos archivos son mars.doc, thankyou.htm y 37 archivos gráficos
que usará en el sitio Web que cree con FrontPage.

156. 156
Para empezar a realizar las actividades de esta lección, siga estos pasos:
1 Cree una carpeta denominada “sky” en el disco duro.
(Por comodidad, nos referiremos al disco duro como unidad C:
en toda la lección.)
2 Copie los archivos mars.doc y thankyou.htm de la subcarpeta
Lesson07 de la carpeta Practice a la carpeta C:sky que ha creado
en el paso anterior.
3 Cree una carpeta images en C:sky y copie en ella los siguientes
archivos gráficos (que se encuentran en la subcarpeta Lesson07 de
la carpeta Practice, en el disco duro):
b_aboutus.gif bg.gif mars.jpg
b_aboutus2.gif bigdip1.gif neptune.jpg
b_contact.gif bigdip2.gif saturn.jpg
b_contact2.gif bigdip3.gif solarsystem.gif
b_gallery.gif bigdip4.gif t_aboutus.gif
b_gallery2.gif bigdip5.gif t_contact.gif
b_links.gif bullet_star.gif t_gallery.gif
b_links2.gif corner_botm_left.gif t_links.gif
b_meetings.gif corner_botm_right.gif t_meetings.gif
b_meetings2.gif corner_top_left.gif t_skyguide.gif
b_skyguide.gif corner_top_right.gif titlebar-home.gif
b_skyguide2.gif logo.gif titlebar.gif
Planeamiento del sitio Web con
FrontPage
Cuando planeamos inicialmente el sitio del proyecto de esta lección,
pretendíamos crear una página para un equipo de béisbol ficticio. Por
desgracia, no pudimos sobornar lo suficiente a nuestros amigos para que
posaran para la imagen del equipo, de modo que optamos por crear un sitio
Web para un club de astronomía. Terminamos incorporando en él muchas de
las funcionalidades que habíamos planeado originalmente para el sitio de
béisbol. Por ejemplo, en lugar de hacer un mapa de imágenes de una fotografía
del equipo en la que se podía hacer clic en la cabeza de cada persona para tener
acceso a una página personal o de estadísticas, usamos un mapa de imágenes
del sistema solar en la que se puede hacer clic en cada planeta para ver una
página de información acerca de él. Esperamos que a medida que experimente
con las técnicas que presentamos en este proyecto, comience a pensar formas
de variarlas para crear sitios Web personalizados.

157. 157
Tras determinar que el sitio de un club de astronomía se adaptaría a
nuestros propósitos, decidimos que debería constar de una página principal
personalizada vinculada a subpáginas con un formato estándar. El uso de una
página principal diferente es una técnica de diseño común en los sitios Web,
que se usa para hacer que la página principal destaque de las subpáginas.
Dado que FrontPage ofrece tantas opciones, creímos que mostrar una página
principal distinta sería una buena práctica de diseño y también nos permitiría
enseñarle algunas características adicionales de FrontPage. Para ver nuestro
proceso de planeamiento, eche un vistazo a las figuras 7-3 a 7-5. La figura 7-3
contiene un dibujo de la Osa mayor que sugerimos para la página principal.
La figura 7-4 muestra el dibujo de la composición estándar de la subpágina. Y,
finalmente, la figura 7-5 ilustra el esquema del sitio del club de astronomía.
Figura 7-3.
Esquema de la página principal del club de astronomía que muestra la Osa
mayor y contiene vínculos a las subpáginas principales del sitio.

158. 158
Figura 7-4.
Dibujo de una subpágina típica del club de astronomía que ilustra que las
subpáginas se estructurarán de forma diferente a la página principal.

159. 159
Figura 7-5.
El esquema del sitio Web del club de astronomía clarifica su jerarquía.
Debido a la relativa complejidad de la página principal, va a crearla en último
lugar. En este proyecto, para comenzar el proceso de diseño, consolidará la
composición estándar del sitio para las subpáginas creando un documento
subpágina.htm que puede usar como plantilla al crear las páginas del sitio.
Pero, en primer lugar y antes de comenzar a crear páginas Web, debe indicarle
a FrontPage que desea crear un nuevo “Web”.

160. 160
Creación de un nuevo Web
Como hemos mencionado en la sección anterior, el primer paso para diseñar un
sitio Web es indicar su intención de crear páginas Web en FrontPage mediante
la creación de un nuevo Web. Para ello, siga estos pasos:
FrontPage hace referencia a
1 Compruebe que ha creado una carpeta denominada C:skyimages
los sitios Web como Webs. en la que haya colocado las imágenes que copió de la subcarpeta
Lesson07, que se encuentra en la carpeta Practice, en el disco duro.
Además, debe asegurarse de que ha copiado los archivos mars.doc
y thankyou.htm de la carpeta Lesson07 y los ha almacenado en
C:sky.
2 Abra FrontPage y cierre el documento en blanco, si se
muestra alguno.
3 Si el panel Página o Web no aparece, abra el menú Archivo,
seleccione Nuevo y haga clic en Página o Web.
4 En la sección Nuevo, haga clic en la opción Sitio Web vacío y se
abrirá el cuadro de diálogo Plantillas de sitio Web. Haga clic en el
cuadro de texto Especifique la ubicación del nuevo sitio Web,
resalte el texto existente, escriba C:sky o haga clic en Examinar y
vaya a C:sky, y, a continuación, haga clic en Aceptar. Después de
un breve proceso en el que FrontPage agrega Extensiones de
servidor de FrontPage a la carpeta Web (C:sky), verá que la barra
de título de FrontPage cambia a Microsoft FrontPage -C:sky, lo
que significa que está preparado para la acción.
5 En la barra de vistas en el lateral izquierdo de la ventana de
FrontPage, haga clic en el icono Informes. Aparece el resumen de
un sitio. Este informe se presenta porque tiene gráficos
almacenados en la carpeta C:skyimages y los archivos mars.doc
y thankyou.htm almacenados en C:sky.
Nota
Aunque es conveniente tener preparadas de antemano todas las imágenes
que piense usar en su sitio Web, no es necesario. Pero, puesto que los
gráficos del club de la astronomía están ya disponibles (y dado que este
curso trata de la creación de páginas Web y no de gráficos Web), puede
simplificar la creación del Web en este proyecto (o de cualquier otro con
respecto a esa cuestión) si organiza los gráficos del sitio antes de empezar a
crearlo.
6 Haga clic en el icono Página de la barra de vistas y en el botón
Crear una página normal nueva en la barra de herramientas
estándar para abrir una página en blanco (observe que el texto de
la barra de título de FrontPage cambia a Microsoft FrontPage -
C:skypagina_nueva_1.htm).
Ahora está listo para crear una subpágina estándar que puede usar como
plantilla en el sitio Web del club de astronomía.

161. 161
Creación de la composición de la
subpágina
En esta sección, creará la composición de una subpágina estándar que podrá
copiar y usar con el fin de crear páginas de base para cada subpágina del sitio.
En primer lugar, configurará las propiedades de página de la subpágina.
Configuración de las propiedades de página
Para empezar, compruebe que en FrontPage aparece un área de trabajo en blanco.
Si siguió los pasos de la sección anterior, debe ver la página. A continuación se
enumeran los pasos necesarios para crear una subpágina básica:
1 Haga clic con el botón secundario del mouse (ratón) en la página y
seleccione Propiedades de página. Se abre el cuadro de diálogo
Propiedades de página.
2 En el cuadro de texto Título, en la ficha General, escriba Club de
la astronomía, como se ilustra en la figura 7-6.
Para ver una vista en
miniatura de una imagen
seleccionada en el cuadro
de diálogo Seleccionar
imagen de fondo, haga clic
en la flecha de lista
desplegable Vistas en la
barra de herramientas del
cuadro de diálogo y
seleccione Vista previa.
Figura 7-6.
Puede especificar el texto del título en el cuadro de diálogo Propiedades
de página.
3 Haga clic en la ficha Fondo, active la casilla de verificación Imagen
de fondo para especificar que desea que la página use una imagen
de fondo y, después, haga clic en Examinar.

162. 162
4 En el cuadro de diálogo Seleccionar imagen de fondo, haga doble
clic en la carpeta images en C:sky y, después, haga clic en bg.gif,
como se ilustra en la figura 7-7.
5 Haga clic en Abrir para seleccionar la imagen de fondo y vuelva al
cuadro de diálogo Propiedades de página.
Figura 7-7.
Para asignar una imagen de fondo a la página Web, seleccione bg.gif
en el cuadro de diálogo Seleccionar imagen de fondo.
6 Continuando en la ficha Fondo, haga clic en la casilla de
verificación Habilitar efectos de conversión de hipervínculos y,
después, haga clic en el botón Estilo de conversión. Se abre el
cuadro de diálogo Fuente. En el área Fuente, conserve la selección
(Fuente predeterminada) y, en el cuadro de texto Estilo de fuente,
seleccione Normal.
7 Haga clic en el cuadro desplegable Color, haga clic en el
cuadrado de color rojo (éste es el color predeterminado) y haga clic
en Aceptar. Esta opción especifica que los vínculos de texto se
muestren en rojo siempre que el cursor del mouse del usuario pase
sobre el vínculo de texto.
8 Después, en la ficha Fondo, haga clic en la flecha de lista
desplegable Fondo y haga clic en el cuadro de color negro, a
continuación, haga clic en la flecha de lista desplegable Texto y en
el cuadro de color negro.

163. 163
Nota
El paso 8 no contiene un error: debe establecer el color tanto del fondo
como del texto en negro. En este proyecto, la mayor parte del texto que
escriba se mostrará en las celdas de una tabla blanca, de modo que, para
ahorrar tiempo posteriormente, debería configurar el color del texto
predeterminado en negro incluso aunque el fondo también tenga
configurado este color.
Jerga: un hipervínculo activo 9 Haga clic en la flecha de lista desplegable Hipervínculo y en el
hace referencia a un cuadro de color azul; haga clic en la flecha de lista desplegable
hipervínculo en el que se ha
Hipervínculo visitado y en el cuadro de color púrpura; a
hecho clic. Si establece en
rojo la propiedad de color continuación, haga clic en la flecha de lista desplegable
para los hipervínculos activos, Hipervínculo activo y haga clic en el cuadro de color rojo. La
un hipervínculo se mostrará ficha Fondo debería ser similar ahora a la de la figura 7-8.
en rojo mientras el usuario
haga clic en el vínculo.
Figura 7-8.
La ficha Fondo rellena muestra los colores predeterminados que
seleccionó para la página Web actual.

164. 164
Incluso aunque en el proyecto se usen los colores predeterminados
para los hipervínculos, debería hacer clic en los cuadros de color
de cada componente para reemplazar la configuración de color
“automática” de cada elemento. Si no reemplaza los colores
automáticos con los especificados, algunos exploradores podrían
insertar colores personalizados para los hipervínculos que pueden
no funcionar bien en su sitio; por ejemplo, si los hipervínculos “que
visita” un usuario se configuran con el color negro, los vínculos
desaparecerán en el fondo negro cuando los usuarios hagan clic
en ellos.
10 Haga clic en Aceptar para implementar la configuración de
Propiedades de página y cerrar el cuadro de diálogo Propiedades
de página.
Guardar su trabajo
Antes de ir más lejos, debe guardar su trabajo. Podrá usar la misma configuración
básica en todas las subpáginas, así que guardará la página que está creando en
este momento como plantilla genérica que puede copiar para crear todas las
subpáginas del sitio. Para guardar el archivo actual, siga estos pasos:
1 En el menú Archivo, haga clic en Guardar.
2 En el cuadro de diálogo Guardar como, haga clic en el botón
Cambiar título (que se encuentra en la parte inferior derecha del
cuadro de diálogo) para abrir el cuadro de diálogo Establecer título
de la página y cambie el texto por Club de la astronomía: página
genérica, como se muestra en la figura 7-9. A continuación, haga
clic en Aceptar.
Figura 7-9.
El cuadro de diálogo Establecer título de página se configura para
modificar el texto del título de una página.
3 En el cuadro Nombre de archivo, escriba subpágina y, a
continuación, haga clic en Guardar.

165. 165
Adición del logotipo y el gráfico de la pancarta
de título
En esta sección, continuará configurando la plantilla de las subpáginas; para
ello, insertará el logotipo del club de astronomía y el gráfico de la pancarta de
título, que aparecen en la parte superior de cada página:
1 En el documento C:skysubpágina.htm (que debe estar abierto en
FrontPage si continúa con el proyecto a partir de la sección
anterior), haga clic en el menú Insertar, seleccione Imagen y,
después, elija Desde el archivo.
Sugerencia
Si cerró el documento subpágina.htm, puede volver a abrirlo si abre
FrontPage, hace clic en el icono Abrir (o hace clic en Abrir en el menú
Archivo), va a C:sky en el cuadro de diálogo Abrir y hace doble clic en
subpágina.htm.
2 En el cuadro de diálogo Imagen, muestre el contenido de la
carpeta de imágenes en C:skyimages, seleccione el archivo
logo.gif y haga clic en Insertar (o, simplemente, haga doble clic en
el archivo logo.gif). El logotipo (que es Saturno junto con algunas
lunas) aparece en la página.
3 En la barra de herramientas estándar, haga clic en el botón Insertar
imagen desde archivo y haga doble clic en el archivo titlebar.gif. La
imagen de la barra de título se inserta junto al logotipo.
4 Haga clic con el botón secundario del mouse en la imagen logo.gif
(la imagen de Saturno), seleccione Propiedades de imagen, haga
clic en la ficha General, haga clic en el cuadro Texto de la sección
Representaciones alternativas, escriba Logotipo del Club de la
astronomía y haga clic en Aceptar.
5 Haga clic con el botón secundario del mouse en la imagen
titlebar.gif, seleccione Propiedades de imagen, haga clic en la
ficha General, haga clic en el cuadro Texto de la sección
Representaciones alternativas, escriba Club de la astronomía y
haga clic en Aceptar.
6 Vuelva a hacer clic con el botón secundario del mouse en la
imagen del logotipo, seleccione Hipervínculo, escriba index.htm en
el cuadro de texto Dirección y haga clic en Aceptar.

166. 166
En este punto, el logotipo se vincula a la página principal (futura) y ambos
gráficos se insertan y se alinean a la izquierda, de forma predeterminada.
En la mayor parte de los exploradores, la alineación a la izquierda ayudará a
mantener los gráficos juntos pero puesto que las dos imágenes ocupan la parte
superior de la página, la barra de título podría ajustarse en la línea siguiente en
algunos exploradores, si los usuarios cambian el tamaño de la ventana de su
explorador por uno muy pequeño, en cuyo caso el logotipo se mostraría en la
línea superior y la barra de título se desplazaría a la izquierda debajo del gráfico
del logotipo en la línea siguiente, efecto que no es el que se persigue en este
sitio Web. Sólo para asegurarnos, puede agregar las etiquetas HTML que
impiden realizar un salto de línea (<NOBR></NOBR>) al código fuente de la
página con el fin de especificar que los dos gráficos se deben mantener juntos
independientemente del tamaño de la ventana del explorador.
7 En FrontPage, haga clic en la opción de vista HTML. El código
fuente HTML se muestra en la ventana del área de trabajo de
FrontPage.
Antes de agregar las etiquetas <NOBR></NOBR>, vamos a facilitar el trabajo
en FrontPage haciendo que ajuste el texto del código.
8 Haga clic en Herramientas, haga clic en Opciones de página y
muestre la ficha Código fuente HTML.
9 En la sección General, haga clic en Cambiar el formato con las reglas
siguientes, active la casilla de verificación Permitir saltos de línea
dentro de etiquetas en la sección Formato y haga clic en Aceptar.
Ahora podrá ver el código HTML sin tener que desplazarse a la
izquierda y a la derecha demasiado, lo que significa que ya puede
agregar las etiquetas <NOBR></NOBR>.
10 En el código fuente, haga clic después de la etiqueta de apertura de
párrafo (<p>), escriba <NOBR>, haga clic antes de la etiqueta de
cierre de párrafo (</p>) y escriba </NOBR>. La figura 7-10 muestra
las etiquetas HTML recién agregadas (en color naranja) que
garantizarán que los gráficos se muestren siempre uno junto al otro.

167. 167
Figura 7-10.
Al agregar las etiquetas <NOBR> y </NOBR> al código fuente de
una página, se asegura de que un salto de línea no separe elementos
particulares.
11 Haga clic en Guardar (el código en mayúsculas cambiará
automáticamente y se pondrá en minúsculas) y, después, haga clic
en la ficha vista Normal para volver a mostrar la representación
gráfica de subpágina.htm en su área de trabajo. La página debería
ser similar a la de la figura 7-11.
Figura 7-11.
En este punto, el archivo subpágina.htm incluye imágenes de fondo,
del logotipo y de la barra de título.

168. 168
Inserción de una tabla
En esta sección, creará la tabla de base que se usa para contener el texto del
cuerpo de cada subpágina en el sitio Web del club de astronomía. Tómese su
tiempo en los pasos siguientes: es más fácil configurar la tabla correctamente la
primera vez que intentar buscar una configuración errónea. Además, aunque
podría parecer que esta sección incluye muchos pasos, éstos son bastante
repetitivos, de modo que el proceso no es demasiado complejo. (En otras
palabras, no deje que la cantidad de pasos le abrume.) Cuando cree sus propias
tablas, probablemente tenga que experimentar con algunas configuraciones
antes de conseguir que le gusten, que es exactamente lo que nosotros hacemos
también. Para crear su tabla en este proyecto, siga estos pasos:
1 Presione la tecla de flecha abajo una vez para colocar el cursor
debajo del gráfico y presione Mayús+Entrar para colocar el cursor
donde desee insertar la tabla.
2 En la barra de herramientas estándar, haga clic en el botón Insertar
tabla, arrastre para seleccionar dos filas y cinco columnas de
cuadros en la ventana emergente y, después, suelte el botón para
insertar la tabla en la página. En la figura 7-12 se ilustra el proceso
de creación de la tabla. Como puede ver, los bordes se muestran
cuando inserta por primera vez una tabla. En efecto, los bordes de
la tabla están configurados para mostrarse con 1 píxel de ancho.
Después, cuando rellene la tabla, cambiará la configuración de los
bordes con el valor cero (0) para ocultar las líneas.
Figura 7-12.
De forma predeterminada, FrontPage crea las tablas con un borde de
1 píxel.

169. 169
3 Haga clic con el botón secundario del mouse en alguna parte de la
tabla, elija Propiedades de tabla, compruebe que Margen de celdas
desde el borde al texto está configurado como 0, Espaciado entre
celdas está configurado como 0, Especificar ancho está
configurado como 100 por cien, la opción Tamaño en Bordes está
configurado como 1 y haga clic en Aceptar.
4 Haga clic con el botón secundario del mouse en la fila 1, columna 1.
En el menú contextual, seleccione Propiedades de celda.
5 En el cuadro de diálogo Propiedades de celda, configure la opción
Alineación horizontal como Centrar, la opción Alineación vertical
como Superior, compruebe que la casilla de verificación Especificar
ancho está activada, escriba 130 en el cuadro de texto Especificar
ancho y seleccione la opción En píxeles, como se muestra en la
figura 7-13.
Figura 7-13.
El cuadro de diálogo Propiedades de celda se usa para configurar una
celda de una tabla.

170. 170
6 Haga clic en Aceptar para activar la configuración.
¡No olvide guardar con
7 Haga clic con el botón secundario del mouse en la fila 2, columna
frecuencia su trabajo! 1. En el menú contextual, seleccione Propiedades de celda.
8 En el cuadro de diálogo Propiedades de celda, configure la opción
Alineación horizontal como Centrar, Alineación vertical como
Inferior, Especificar ancho como 130 píxeles, active la casilla de
verificación Especificar alto, configure la opción Especificar alto
como 15 píxeles y haga clic en Aceptar.
9 Haga clic con el botón secundario del mouse en la celda de la fila
1, columna 2. Seleccione Propiedades de celda. Configure la
opción Alineación horizontal como Izquierda, la opción Alineación
vertical como Superior, la opción Especificar ancho como 1 píxel y
haga clic en Aceptar (no se preocupe si no ve un cambio en la
tabla en este momento, la celda no cambiará de tamaño hasta que
también le dé formato debajo).
10 Haga clic con el botón secundario del mouse en la celda de la fila
2, columna 2. Seleccione Propiedades de celda. Configure la
opción Alineación horizontal como Izquierda, la opción Alineación
vertical como Inferior, la opción Especificar ancho como 1 píxel,
active la casilla de verificación Especificar alto, configure la opción
Especificar alto como 15 píxeles y haga clic en Aceptar. (Ahora la
segunda columna de la tabla debe tener 1 píxel de ancho.)
11 Haga clic con el botón secundario del mouse en la celda de la fila
1, columna 3. En el menú contextual, seleccione Propiedades de
celda, configure la opción Alineación horizontal como Izquierda, la
opción Alineación vertical como Superior, la opción Especificar
ancho como 15 píxeles, especifique Color de fondo como Blanco y
haga clic en Aceptar.
12 Haga clic con el botón secundario del mouse en la celda de la fila 2,
columna 3. En el menú contextual, seleccione Propiedades de celda,
configure la opción Alineación horizontal como Izquierda, la opción
Alineación vertical como Inferior, la opción Especificar ancho como
15 píxeles, haga clic en la casilla de verificación Especificar alto,
configure la opción Especificar alto como 15 píxeles, especifique
Blanco como Color de fondo y haga clic en Aceptar.
13 Haga clic con el botón secundario del mouse en la celda de la fila 1,
columna 4. En el menú contextual, seleccione Propiedades de celda,
configure Alineación horizontal como Izquierda, Alineación vertical
como Superior, desactive la casilla de verificación Especificar ancho
(no establezca ningún ancho para esta columna porque tendrá que
cambiar el tamaño de forma que quepa en la ventana del explorador
de cada usuario), especifique Blanco como Color de fondo y haga
clic en Aceptar.

171. 171
14 Haga clic con el botón secundario del mouse en la celda de la fila 2,
columna 4. En el menú contextual, seleccione Propiedades de celda,
configure la opción Alineación horizontal como Izquierda, la opción
Alineación vertical como Inferior, desactive la casilla de verificación
Especificar ancho, active la casilla de verificación Especificar alto,
configure la opción Especificar alto como 15 píxeles, especifique
Blanco como Color de fondo y haga clic en Aceptar.
15 Haga clic con el botón secundario del mouse en la celda de la fila
1, columna 5. En el menú contextual, seleccione Propiedades de
celda, configure la opción Alineación horizontal como Derecha, la
opción Alineación vertical como Superior, la opción Especificar
ancho como 15 píxeles, especifique Blanco como Color de fondo y
haga clic en Aceptar.
16 Haga clic con el botón secundario del mouse en la celda de la fila
2, columna 5. En el menú contextual, seleccione Propiedades de
celda, configure la opción Alineación horizontal como Derecha, la
opción Alineación vertical como Inferior, la opción Especificar
ancho como 15 píxeles, la opción Especificar alto como 15 píxeles,
especifique Blanco como Color de fondo y haga clic en Aceptar. La
tabla ahora debería ser similar a la mostrada en la figura 7-14.
Figura 7-14.
Puede modificar la composición interna de una tabla si ajusta las
propiedades de las celdas.
Observe en la figura 7-14 que el grupo de celdas de la derecha de
la tabla se presenta como un área rectangular de color blanco.
Ahora va a agregar gráficos pequeños a las celdas de la esquina
del área de color blanco para crear la ilusión de que la tabla tiene
esquinas redondeadas:

172. 172
17 Haga clic en la celda de la fila 1, columna 3. En el menú Insertar,
seleccione Imagen y elija Desde el archivo. Seleccione la imagen
corner_top_left.gif en la carpeta C:skyimages y haga clic en Insertar.
Sugerencia
Para hacerse una idea de cómo quedan los gráficos en la esquina, vea los
gráficos curvos pequeños en un programa de pintura u obtenga una vista
previa de la imagen en el cuadro de diálogo Insertar imagen. Puede imaginar
fácilmente el modo en que la curva pequeña puede crear la ilusión de una
esquina redondeada cuando se inserta en la celda de una tabla.
18 Haga clic en la celda de la fila 2, columna 3. Haga clic en Insertar
imagen desde archivo en la barra de herramientas estándar y haga
doble clic en la imagen corner_botm_left.gif en la carpeta
C:skyimages.
19 Haga clic con el botón secundario del mouse en la imagen
corner_botm_left.gif recién insertada. En el menú contextual, haga
clic en Propiedades de imagen, haga clic en la ficha Apariencia, si
es necesario, seleccione Inferior en la lista desplegable Alineación
y haga clic en Aceptar.
20 Haga clic en la celda de la fila 1, columna 5 (dado que dio formato
a la celda para alinear la información a la derecha, el cursor
aparecerá a la derecha de la celda). Haga clic en Insertar imagen
desde archivo en la barra de herramientas estándar y haga doble
clic en la imagen corner_top_right.gif en la carpeta C:skyimages.
21 Haga clic en la celda de la fila 2, columna 5. Haga clic en Insertar
imagen desde archivo y haga doble clic en la imagen
corner_botm_right.gif en la carpeta C:skyimages.
22 Haga clic con el botón secundario del mouse en la imagen
corner_botm_right.gif recién insertada. En el menú contextual,
haga clic en Propiedades de imagen, haga clic en la ficha
Apariencia, si es necesario, seleccione Inferior en la lista
desplegable Alineación y haga clic en Aceptar.

173. 173
23 Haga clic en Guardar en la barra de herramientas. En este punto,
su tabla debería mostrarse como en la figura 7-15.
Figura 7-15.
Los gráficos pequeños agregados a las celdas de la tabla crean la
apariencia de que las esquinas son redondeadas.
Adición de botones de exploración
Ahora que la tabla está creada, puede empezar a rellenar sus celdas. En primer
lugar, hay que agregar algunos botones de exploración a la primera columna.
FrontPage ofrece algunos botones con efectos especiales bonitos, que va a usar
en este proyecto:
1 Haga clic en la celda de la fila 1, columna 1.
2 En el menú Insertar, seleccione Componente Web, seleccione
Efectos dinámicos en la sección Tipo de componente, elija Botón
activable en la sección Elegir un efecto (observe que la descripción
del componente se muestra a continuación de los cuadros de lista
en el cuadro de diálogo Insertar componente Web; a medida que
haga clic en los efectos, la descripción cambia) y haga clic en
Finalizar.

174. 174
3 Configure el cuadro de diálogo Propiedades de botón activable,
como se muestra en la figura 7-16, con las opciones siguientes:
Opción Valor
Texto de botón Página principal
Vincular a index.htm
Color del botón Azul marino
Efecto Brillo
Ancho 120
Color de fondo Automático
Color de efecto Azul
Alto 24
Figura 7-16.
FrontPage permite crear botones activables si configura el cuadro de
diálogo Propiedades de botón activable.
4 Haga clic en Aceptar.
5 Presione Entrar. En la barra de herramientas estándar, haga clic en
Componente Web, compruebe que las opciones Efectos dinámicos
y Botón activable están seleccionadas, y haga clic en Finalizar.
Escriba Acerca de nosotros en el cuadro de texto Texto de botón,
escriba aboutus.htm en el cuadro de texto Vincular a, especifique
el resto de las opciones según se indica en el paso 3 y haga clic en
Aceptar.
6 Presione Entrar. Haga clic en Componente Web, compruebe
que las opciones Efectos dinámicos y Botón activable están
seleccionadas y haga clic en Finalizar. Escriba Contactar en el
cuadro de texto Texto de botón, escriba contact.htm en el cuadro
de texto Vincular a, especifique el resto de las opciones según se
indica en el paso 3 (que es la predeterminada) y haga clic en
Aceptar.

175. 175
7 Presione Entrar. Haga clic en Componente Web, compruebe
que las opciones Efectos dinámicos y Botón activable están
seleccionadas y haga clic en Finalizar. Escriba Reuniones en el
cuadro de texto Texto de botón, escriba meetings.htm en el
cuadro de texto Vincular a, especifique el resto de las opciones
según se indica en el paso 3 y, después, haga clic en Aceptar.
8 Presione Entrar. En el menú Insertar, haga clic en Componente
Web, compruebe que las opciones Efectos dinámicos y Botón
activable están seleccionadas, y haga clic en Finalizar. Escriba
Mapa del cielo en el cuadro de texto Texto de botón, escriba
skyguide.htm en el cuadro de texto Vincular a, especifique el resto
de las opciones según se indica en el paso 3 y, después, haga clic
en Aceptar.
9 Presione Entrar. Haga clic en Componente Web, compruebe
que las opciones Efectos dinámicos y Botón activable están
seleccionadas y haga clic en Finalizar. Escriba Galería de fotos
en el cuadro de texto Texto de botón, escriba gallery.htm en el
cuadro de texto Vincular a, especifique el resto de las opciones
según se indica en el paso 3 y haga clic en Aceptar.
10 Presione Entrar. Haga clic en Componente Web, compruebe que las
opciones Efectos dinámicos y Botón activable están seleccionadas y
haga clic en Finalizar. Escriba Vínculos de astronomía en el cuadro
de texto Texto de botón, escriba links.htm en el cuadro de texto
Vincular a, especifique el resto de las opciones según se indica en el
paso 3 y, después, haga clic en Aceptar.
11 Haga clic en Guardar. La subpágina debería verse en las vistas
Normal y Vista previa como se ilustra en la figura 7-17.
Figura 7-17.
La tabla y los botones de exploración se ven en la vista Normal pero todavía
no en Vista previa.

176. 176
Como puede ver en la figura 7-17, FrontPage 2002 tropieza con un pequeño
fallo técnico cuando se insertan los botones activables; básicamente, no puede
obtener una vista previa de ellos en la pantalla Vista previa de forma
automática (observe las imágenes de vínculo erróneo en la pantalla de Vista
previa que se ven en la figura 7-17). Con el tiempo, Microsoft podría ofrecer
una revisión para corregir esto pero, por ahora, dispone de dos opciones para
evitar este problema:
■ Para obtener una vista previa de sus imágenes en el explorador,
seleccione Vista previa en el explorador en el menú Archivo, elija el
explorador que desee usar y haga clic en Vista previa.
■ Modifique el código de cada botón activable para corregir el
problema.
Si elige obtener una vista previa de sus páginas Web en el explorador
durante el resto de este ejercicio, siga adelante, omita la siguiente
sección y elija Vista previa en el explorador, en el menú archivo, o
haga clic en el botón Vista previa en el explorador, en la barra de
herramientas estándar, cada vez que le sugiramos que puede ver su
página Web. Si prefiere retocar el código HTML un poco para evitar
que se abra el explorador en la lección, a continuación le indicamos
cómo. Los pasos son fáciles de seguir y constituyen un primer
ejemplo que ilustra cómo conocer un poco de código HTML puede
servir de ayuda cuando se trabaja con editores HTML.
12 Haga clic en HTML en la parte inferior de la ventana para mostrar
el código HTML de su página.
El código de cada botón activable aparece entre un par de etiquetas
<applet> </applet>, de modo que debe ver siete de estos pares en
HTML. Puede indicar a qué botón se aplica un subprograma si observa el
atributo value del parámetro que define el texto del botón. Por ejemplo, a
continuación puede ver todo el código del subprograma de un botón; observe
que la quinta línea indica que se aplica al botón Página principal:
<applet code="fphover.class" codebase="./" width="120"
height="24">
<param name="color" value="#000080">
<param name="hovercolor" value="#0000FF">
<param name="textcolor" value="#FFFFFF">
<param name="text" value="Página principal">
<param name="effect" value="glow">
<param name="url" valuetype="ref" value="index.htm">
</applet><p>

177. 177
El problema en este código de botón activable radica en el atributo
codebase="./" de la primera línea de cada etiqueta <applet>.
Este atributo le indica a FrontPage que busque el archivo
fphover.class en un subdirectorio. En realidad, FrontPage
almacena este archivo de clases en la misma carpeta que su
página Web, con lo que no es necesario que los exploradores lo
busquen en un subdirectorio. Aunque esta explicación podría sonar
un poco obtusa, la solución es simple: sólo debe eliminar
codebase="./" de cada etiqueta <applet> (vea la figura 7-18,
donde hemos resaltado algunas de las apariciones del atributo
codebase="./"), como se describe a continuación.
13 En la primera etiqueta <applet>, seleccione codebase="./"
como se muestra en la figura 7-18 y presione la tecla Retroceso (o
haga clic con el botón secundario del mouse y elija Eliminar).
14 Repita el paso 13 en el código del subprograma de cada botón
(recuerde: tiene siete botones, por lo que debería eliminar
codebase="./" siete veces).
15 Guarde su archivo y haga clic en Vista previa en la parte inferior de
la ventana de FrontPage. Cuando haya guardado los cambios del
código, los botones activables se deberían ver en el modo Vista
previa tal como se esperaba.
Figura 7-18.
Si desea obtener una vista previa de los botones activables en el modo
Vista previa de FrontPage, tiene que retocar ligeramente el código de
cada botón.

178. 178
Sugerencia
Si encuentra problemas mientras trabaja en FrontPage (o en cualquier otra
aplicación de Microsoft), un recurso fantástico al que puede acudir es
Microsoft Knowledge Base en línea. Para tener acceso a Knowledge Base,
visite http:/ support.microsoft.com/default.aspx?LN=ES en el explorador y
haga clic en el vínculo Buscar en Knowledge Base.
Adición de la información del pie de página debajo
de la tabla
Los componentes finales que va a agregar a la plantilla de la subpágina antes de
empezar a crear páginas de sitios reales son los elementos de la parte inferior de
la página: una barra de exploración de texto e información de copyright. Como
explicamos anteriormente en este curso, las páginas Web deben incluir vínculos
de exploración de texto para los usuarios que desactivan los gráficos o tienen
acceso al Web con exploradores que no los admiten. Asimismo, debería incluir
información de copyright para proteger su creación. Si desea agregar
información al final de la página en el sitio Web del club de astronomía, siga
estos pasos:
1 En la vista Normal, haga clic en el área a continuación de la tabla,
haga clic en la flecha de lista desplegable en el botón Color de
fuente de la barra de herramientas Formato y haga clic en el
cuadro del color blanco.
2 Escriba (incluyendo los caracteres de barra vertical) Página principal
| Acerca de nosotros | Contactar | Reuniones | Mapa del cielo |
Galería de fotos | Vínculos
3 Seleccione la línea o el texto que ha escrito, muestre la lista
desplegable en la barra de herramientas Formato y elija Comic
Sans (o Comic Sans MS).
4 Haga clic en el botón Centrar de la barra de herramientas Formato
para centrar el texto.
5 Haga clic al final de la línea de texto, presione Entrar y escriba
¿Tiene cuestiones o comentarios acerca del sitio Web? Envíe
un mensaje de correo electrónico al administrador del Web.
6 Presione Entrar, muestre la lista desplegable Tamaño de fuente en
la barra de herramientas Formato, elija 1 (8 pt) y, después, escriba
Copyright [el año actual] – [su nombre o el nombre de su
organización].
7 Presione Entrar y haga clic en Guardar en la barra de herramientas
estándar.

179. 179
También puede presionar Ahora puede vincular el texto de la barra de exploración y agregar un
Alt+Ctrl+K para abrir el vínculo Enviar correo a al texto Envíe un mensaje de correo electrónico al
cuadro de diálogo Insertar administrador del Web:
hipervínculo.
8 Seleccione Página principal en la barra de exploración de texto,
haga clic con el botón secundario del mouse en el texto
seleccionado y haga clic en Hipervínculo.
9 En el cuadro de diálogo Insertar hipervínculo, compruebe que en la
lista desplegable Buscar en aparece sky, haga clic en el cuadro de
texto Dirección, escriba index.htm (asegúrese de eliminar http:// si
aparece), como se muestra en la figura 7-19, y haga clic en
Aceptar o presione Entrar.
Si desea agregar información
de pantalla a sus
hipervínculos, haga clic en el
botón Información de pantalla
en el cuadro de diálogo
Insertar hipervínculo.
Figura 7-19.
El cuadro de diálogo Insertar hipervínculo permite configurar fácilmente
hipervínculos en FrontPage.
10 Repita los pasos 8 y 9 con los parámetros siguientes:
Seleccione y haga clic Especifique en el
con el botón secundario cuadro de texto
del mouse Dirección
Acerca de nosotros aboutus.htm
Contactar contact.htm
Reuniones meetings.htm
Mapa del cielo skyguide.htm
Galería de fotos gallery.htm
Vínculos links.htm

180. 180
11 Seleccione el texto Envíe un mensaje de correo electrónico al
administrador del Web, haga clic con el botón secundario del
mouse en el texto seleccionado y haga clic en Hipervínculo para
abrir el cuadro de diálogo Insertar hipervínculo.
12 En el cuadro de diálogo Insertar hipervínculo, haga clic en el botón
Dirección de correo electrónico en la sección Vincular a, según se
ilustra en la figura 7-20.
Figura 7-20.
Puede crear hipervínculos que abran automáticamente un formulario de
mensaje con una dirección predeterminada.
13 Especifique su dirección de correo electrónico en el cuadro de texto
Dirección de correo electrónico, escriba Club de la astronomía en el
cuadro de texto Asunto (vea la figura 7-20), haga clic en Aceptar y,
después, guarde su trabajo. La parte inferior de la plantilla de la
subpágina debería ser similar a la de la figura 7-21, que se muestra
en la pantalla Vista previa (recuerde: si no modificó el código del
subprograma del botón activable, tendrá que elegir Vista previa en el
explorador, en el menú Archivo, para que la vista previa de la página
Web de la subpágina se vea correctamente). Observe igualmente
que la fecha de copyright y el nombre de la organización
dependerán de la información que suministre.

181. 181
Figura 7-21.
La información del pie de página de la subpágina proporciona a los
visitantes vínculos de texto, acceso al administrador del Web e
información de copyright.
14 Cierre el archivo subpágina.htm.
Ahora tiene una plantilla de subpáginas preparada para utilizarla.
Uso del diseño de la subpágina para
crear páginas Web
Ahora va a usar el archivo subpágina.htm con el fin de crear un par de
subpáginas para el sitio Web del club de astronomía. El sitio requiere seis
subpáginas principales:
■ aboutus.htm
■ contact.htm
■ meetings.htm
■ skyguide.htm
■ gallery.htm
■ links.htm

182. 182
En esta sección, completará las páginas contact.htm y skyguide.htm, además de
una subpágina (mars.htm) de la página skyguide.htm. Aunque no explicamos
paso a paso cómo crear todas las subpáginas, las imágenes que copió en la
carpeta C:skyimages desde la subcarpeta Lesson07 de la carpeta Practice
incluyen gráficos de barra de título de modo que puede completar todas las
subpáginas solo, si lo desea. Decidimos enseñarle cómo completar mars.htm,
skyguide.htm y contact.htm porque en el procedimiento de creación de cada
una de estas páginas se incluye información de cómo agregar una funcionalidad
concreta a las páginas Web, por ejemplo:
■ mars.htm Muestra cómo usar la característica de vistas en
miniatura en FrontPage además de copiar texto de un documento
de Word y modificar las hojas de estilo en cascada. Asimismo, esta
página tiene vínculos a la página Mapa del cielo (skyguide.htm).
■ skyguide.htm Enseña cómo crear un mapa de imágenes en
FrontPage.
■ contact.htm Proporciona una introducción rápida al modo de crear
un formulario en FrontPage.
Después de crear las tres subpáginas descritas en este proyecto, estará
totalmente preparado para experimentar y completar el resto de las páginas
usted mismo.
Preparación para crear subpáginas
La preparación para crear subpáginas es sencilla, ahora que ha adquirido
conocimientos prácticos sólidos al crear la plantilla subpágina.htm. Para usarla,
simplemente tiene que guardar copias del archivo subpágina.htm con nombres
diferentes y algo de texto, como se explica a continuación:
1 Abra el archivo C:skysubpágina.htm en FrontPage.
2 En el menú Archivo, haga clic en Guardar como para abrir el
cuadro de diálogo Guardar como, y compruebe que en el cuadro
de texto Guardar en parece la carpeta C:sky.
3 En la sección Título de página, haga clic en el botón Cambiar título,
escriba Club de la astronomía: acerca de nosotros en el cuadro
de diálogo Establecer el título de la página y haga clic en Aceptar.
Sugerencia
Puede cambiar el texto del título de una página Web en cualquier
momento. Para ello, en el menú Archivo, haga clic en Propiedades, cambie
el texto de Título y haga clic en Aceptar. Agregó texto para los títulos de
cada página a medida que las ha ido creando en la sección anterior.

183. 183
4 En el cuadro de texto Nombre de archivo, escriba aboutus.htm y
haga clic en Guardar. Observe que la ficha de la página Web
cambia (debajo de las barras de herramientas) para reflejar el
nuevo nombre del documento actual.
5 Sin cerrar el documento actual (que en este momento es
aboutus.htm), repita los pasos 2 a 4 utilizando los nombres de archivo
y el texto del título que se indican en la tabla de la página siguiente:
Guardar como nombre Texto del título de
de archivo la página
contact.htm Club de la astronomía:
Contactar
meetings.htm Club de la astronomía:
Reuniones
skyguide.htm Club de la astronomía:
Mapa del cielo
gallery.htm Club de la astronomía:
Galería de fotos
links.htm
mars.htm
Sugerencia
Tiene que denominar a las subpáginas de la misma forma en que hizo
referencia a ellas cuando vinculó los botones de exploración y vínculos de
hipertexto. Por ejemplo, la subpágina Acerca de nosotros debe guardarse con
el nombre aboutus.htm. No altere los nombres de archivo en este momento.
6 Cierre FrontPage, abra la carpeta C:sky y compruebe que
contiene un archivo para cada página Web de su sitio Web.
7 Cuando haya comprobado la lista de archivos que ha creado,
cierre la carpeta C:sky.

184. 184
Adición de texto y de un gráfico para la barra
de título
Una vez creados archivos nuevos basados en el archivo subpágina.htm, puede
abrir los documentos nuevos en FrontPage y personalizar su contenido. La
primera subpágina que va a crear es de información acerca del planeta Marte.
En esta sección, va a agregar texto y un gráfico para la barra de título.
1 Abra FrontPage, haga clic en el botón Abrir en la barra de
herramientas, muestre el contenido de la carpeta C:sky en el
cuadro de diálogo Abrir y haga doble clic en el archivo mars.htm.
2 Haga clic a la derecha del gráfico de la barra de título, presione
Mayús+Entrar, haga clic en Insertar imagen desde archivo en la
barra de herramientas estándar, muestre el contenido de
C:skyimages y haga doble clic en t_skyguide.gif. La página
mars.htm es una subpágina de Mapa del cielo, de modo que
debería mostrar la barra de subtítulo Mapa del cielo.
3 Con el cursor colocado todavía al final del gráfico del mapa del
cielo, presione la tecla Eliminar dos veces para acercar la tabla
a la imagen t_skyguide.gif.
4 Haga clic con el botón secundario del mouse en la imagen
t_skyguide.gif, seleccione Propiedades de imagen, haga clic
en la ficha General, escriba Mapa del cielo en el cuadro de texto
Representaciones alternativas y haga clic en Aceptar.
Ahora agregará un fragmento de texto a la tabla de la página Web.
5 Abra C:sky y haga doble clic en mars.doc (no en mars.htm) para
abrir el documento de Word.
6 Organice el escritorio de modo que pueda ver una parte del texto
del documento de Word además de mars.htm en FrontPage, como
en la disposición mostrada a la izquierda en la figura 7-22.
7 Haga clic dentro del documento de Word y presione Ctrl+E para
seleccionar todo el contenido.
Sugerencia
Puede escribir el texto directamente en la tabla (como verá posteriormente
en este proyecto), pero proporcionamos texto para esta página para que no
tenga que volver a escribir la información. También puede copiar y pegar la
información en FrontPage o puede usar el comando Archivo del menú
Insertar para importar texto de otro archivo.

185. 185
8 Arrastre el texto seleccionado en el documento de Word hasta la
parte grande en blanco de la tabla de mars.htm (que, técnicamente,
es la cuarta celda de la primera fila de la tabla). El texto debería
rellenar la celda, como se muestra a la derecha en la figura 7-22.
Figura 7-22.
En este proyecto, puede arrastrar el texto de un documento de Word a su
página Web. Puesto que no especificó limitaciones de ancho o de alto en
la celda, ésta se expande para que quepa el texto copiado.
9 Guarde su página Web y cierre el documento de Word.
Modificación de la configuración de hojas de estilo
en cascada (CSS)
Jerga: una hoja de estilo en Como ayuda para dar formato al contenido de sus páginas Web, puede crear
cascada contiene código que hojas de estilo en cascada (CSS, Cascading Style Sheets) externas o incrustadas
define la apariencia y formato desde FrontPage. Una hoja de estilo externa implica que el código de formato
de una página Web o un
grupo de páginas Web.
se coloca en un documento independiente al que se vincula la página Web,
mientras que una hoja de estilo incrustada coloca el código de formato dentro
del código fuente de la página Web actual.
Cuando se usan opciones de hojas de estilo, se define el estilo para un elemento
particular de la página, por ejemplo, un encabezado 3 o el elemento de una
lista con viñetas, y los exploradores (y FrontPage) aplicarán automáticamente
la configuración de estilo cada vez que aparezca el elemento. Por ejemplo,
si desea que todos los encabezados de tipo 3 se muestren en azul, sólo tiene que
modificar la configuración de estilo del elemento h3. Cuando guarde la
configuración modificada, todos los encabezados de tipo 3 aparecerán en azul.

186. 186
En esta sección, usará FrontPage para definir una hoja de estilo incrustada y
personalizar los estilos. Por lo tanto, los estilos que defina en la página
mars.htm sólo se aplicarán a dicha página. Para definir estilos incrustados en
FrontPage, siga estos pasos:
1 Compruebe que el archivo mars.htm se muestra en la vista Normal
en FrontPage y haga clic en Estilo, en el menú Formato.
2 En el cuadro de diálogo Estilo, haga clic en la flecha de lista
desplegable Lista y elija Etiquetas HTML. En la lista Estilos se
muestra una lista de las etiquetas HTML.
En primer lugar, va a especificar que se muestren en azul todos los
elementos de encabezado de tipo 3 y con un tamaño de 12 puntos.
3 En la lista Estilos, elija h3, según se ilustra en la figura 7-23.
Figura 7-23.
Puede definir estilos HTML si selecciona el estilo al que desea dar
formato en la lista de etiquetas HTML del cuadro de diálogo Estilo.
4 Haga clic en Modificar, haga clic en Formato en el cuadro de texto
Modificar estilo y haga clic en Fuente.

187. 187
5 En el cuadro de diálogo Fuente, haga clic en 12 pt en el cuadro
de lista Tamaño, haga clic en la flecha de lista desplegable Color,
haga clic en el cuadrado de color azul y haga clic en Aceptar tres
veces para cerrar los cuadros de diálogo abiertos.
Tanto el encabezado Descripción: como el encabezado Datos
del planeta: deberían aparecer ahora en azul y con un tamaño de
12 puntos. En este momento, va a reemplazar las viñetas negras
normales en la lista con viñetas por otras personalizadas.
6 Haga clic en Estilo en el menú Formato, haga clic en Etiquetas
HTML en el cuadro Lista, seleccione li en la lista Estilos y haga clic
en Modificar.
7 En el cuadro de diálogo Modificar estilo, haga clic en Formato y en
Numeración.
8 En el cuadro de diálogo Viñetas y numeración, haga clic en
Examinar, muestre el contenido de la carpeta C:skyimages en el
cuadro de diálogo Seleccionar imagen y haga doble clic en
bullet_star.gif para completar el cuadro de diálogo Viñetas y
numeración.
9 Haga clic en Aceptar tres veces para cerrar los cuadros de diálogo
abiertos. La lista con viñetas de su página debería mostrar imágenes
de estrellas en la vista Normal, como se ilustra en la figura 7-24, y el
código fuente debe incluir ahora estilos incrustados, según se ilustra
en la figura 7-25 (el color naranja se utiliza para resaltar la
información de formato que agregó en los pasos anteriores).
10 Guarde el archivo mars.html y asegúrese de que se ve en la vista
Normal como preparación para la sección siguiente.
Figura 7-24.
El estilo recién definido muestra en azul los encabezados de tipo 3 y en
forma de estrellas las viñetas de la lista.

188. 188
Figura 7-25.
FrontPage genera automáticamente la información de los estilos
incrustados.
Inserción de una imagen en miniatura
Ahora que ha importado y dado formato al texto de su página Web de Marte, está
en disposición de agregar una imagen. En esta sección, insertará una imagen en
miniatura de Marte, lo que significa que los visitantes de la página podrán hacer
clic en una imagen pequeña para ver una versión mayor de la misma. Al
suministrar una imagen en miniatura, acelera la descarga de la página y
proporciona a sus visitantes la opción de descargar una versión mayor si lo
desean. Para insertar una imagen en miniatura en FrontPage, siga estos pasos:
1 En FrontPage, haga clic a la derecha de Nuestro sistema solar:
Marte (la línea superior del texto insertado), haga clic en Insertar
imagen desde archivo en la barra de herramientas estándar y haga
doble clic en la imagen mars.jpg en la carpeta C:skyimages. Una
imagen muy grande de Marte toma su vista en FrontPage.
2 Haga clic en Marte y, a continuación, muestre la barra de
herramientas Imágenes (si no aparece automáticamente,
seleccione Barras de herramientas en el menú Ver y, después, elija
Imágenes). En la figura 7-26 se muestra la imagen de Marte junto
con la barra de herramientas Imágenes.

189. 189
Figura 7-26.
Puede crear una vista en miniatura de Marte directamente en FrontPage.
3 Con la imagen de Marte todavía seleccionada, haga clic en el
botón Vista en miniatura automática, en la barra de herramientas
Imágenes (el tercer botón desde la izquierda). Se crea una versión
de Marte de 100 por 100 píxeles a partir de la versión mayor del
archivo mars.jpg. El gráfico más pequeño se denomina
automáticamente mars_small.jpg.
4 Haga clic con el botón secundario del mouse en la imagen de
Marte, elija Propiedades de imagen, seleccione la ficha Apariencia,
si es necesario, y configure las propiedades como sigue:
Opción Valor
Alineación Derecha
Grosor del borde 0
Espaciado horizontal 15
Espaciado vertical 10
Sugerencia
Si desea que la vista en miniatura se muestre mayor de 100 por 100
píxeles, puede activar la casilla de verificación Especificar tamaño, en el
cuadro de diálogo Propiedades de imagen, y cambiar el tamaño de la
imagen en miniatura.

190. 190
5 Haga clic en Aceptar y en el texto para cancelar la selección del
gráfico.
6 Haga clic con el botón secundario del mouse en alguna parte
de la tabla y elija Propiedades. Se abre el cuadro de diálogo
Propiedades de tabla.
Para probar el vínculo de la
7 En la sección Bordes, escriba 0 en el cuadro de texto Tamaño y,
vista en miniatura, haga clic después, haga clic en Aceptar.º
en la ficha Vista previa y,
después, haga clic en la 8 Haga clic en Guardar, haga clic en Cambiar carpeta en el cuadro
imagen en miniatura de de diálogo Guardar archivos incrustados, haga doble clic en la
Marte. Haga clic en la ficha carpeta images, haga clic en Aceptar dos veces y, por último haga
Vista normal para volver a
la vista de trabajo.
clic en la ficha Vista previa (o elija Vista previa en el explorador, en
el menú Archivo). La página mars.htm debería ser similar ahora a
la de la figura 7-27 y el gráfico pequeño se vincula
automáticamente a mars.jpg.
Figura 7-27.
Si hace clic en el gráfico en miniatura mientras obtiene una vista previa
de la página, debe aparecer una imagen en grande de Marte.
9 Cierre el archivo mars.htm.
Nota
Los archivos de imágenes del proyecto proporcionados para esta lección
incluyen neptune.jpg y saturn.jpg, que son imágenes de Neptuno y de
Saturno (respectivamente), y puede usarlas si desea seguir practicando y
crear páginas informativas de otros planetas.
¡Enhorabuena! Ha completado su primera página del sitio Web del club de
astronomía. No hay ninguna razón para que se detenga ahora; en la sección
siguiente, aprenderá a agregar un mapa de imágenes.

191. 191
Creación de un mapa de imágenes
En esta sección, creará un mapa de imágenes en la subpágina principal del Mapa
del cielo. Va a crear el mapa de imágenes a partir de una imagen del sistema
solar. Dará formato a la imagen del sistema solar para que, cuando los usuarios
hagan clic en el gráfico de Marte, se muestre la página mars.htm que creó en la
sección anterior. Para lograrlo (es más fácil de lo que parece), siga estos pasos:
1 Abra FrontPage, haga clic en el icono Carpetas de la barra de
vistas y haga doble clic en el archivo skyguide.htm.
2 Haga clic a la derecha del gráfico de la barra de título, presione
Mayús+Entrar, haga clic en Insertar imagen desde archivo en la
barra de herramientas estándar y haga doble clic en t_skyguide.gif.
3 Con el cursor colocado todavía al final del gráfico del mapa del
cielo, presione la tecla Eliminar dos veces para acercar la tabla
a la imagen t_skyguide.gif.
4 Haga clic con el botón secundario del mouse en la imagen
t_skyguide.gif, seleccione Propiedades de imagen, haga clic
en la ficha General, escriba Mapa del cielo en el cuadro de texto
Representaciones alternativas y haga clic en Aceptar.
Ahora agregará un fragmento de texto a la tabla de la página Web.
5 Haga clic en la celda de la tabla grande situada a la derecha del
botón Página principal y escriba Tema de este mes: nuestro
sistema solar.
6 Seleccione el texto, haga clic en el icono Centrar en la barra de
herramientas Formato y seleccione Comic Sans (o Comic Sans
MS) en la lista desplegable Fuente.
7 Haga clic a continuación de la palabra solar y presione
Mayús+Entrar dos veces.
8 Escriba Haga clic en un planeta para ir a la página de
información del mismo. Nota: en este momento sólo hay
información de Marte.
9 Haga clic en el área en blanco entre los dos componentes de texto
que agregó en los pasos 5 y 8.
10 En la barra de herramientas estándar, haga clic en Insertar imagen
desde archivo, vaya a la carpeta C:skyimages si es necesario y
haga doble clic en solarsystem.gif.

192. 192
11 Haga clic con el botón secundario del mouse en cualquier parte de la
tabla, elija Propiedades de tabla, establezca el Tamaño de borde a 0
en el cuadro de diálogo Propiedades de tabla y haga clic en Aceptar.
12 Haga clic en Guardar en la barra de herramientas. A continuación,
obtenga una vista previa de su página Web. Debe parecerse a la
de la figura 7-28.
Figura 7-28.
Utilizará la imagen del sistema solar para crear un mapa de imágenes.
13 Vuelva a la vista Normal en FrontPage.
Jerga: una zona activa es un
14 Haga clic en la imagen del sistema solar. La barra de herramientas
área en la que puede hacer Imágenes se debe abrir automáticamente. Observe las
clic en una imagen que está herramientas Zona activa rectangular, Zona activa circular y Zona
vinculada a otra página Web activa en forma de polígono que se encuentran en el extremo
o a otra área de la página
actual.
derecho de la barra de herramientas Imágenes.

193. 193
15 Haga clic en la herramienta Zona activa en forma de polígono y,
después, haga clic en varios puntos alrededor de Marte y de la
etiqueta Marte del gráfico del sistema solar para crear un polígono,
como se muestra en la figura 7-29. Cuando complete el polígono,
el cuadro de diálogo Insertar hipervínculo se abrirá
automáticamente. Si es necesario, haga clic en Archivo o
página Web existente en la sección Vincular a:
Figura 7-29.
Las herramientas de zona activa de la barra de herramientas Imágenes
permiten dibujar áreas donde se puede hacer clic en los gráficos.
16 En el cuadro de diálogo Insertar hipervínculo, haga doble clic en
mars.htm (no en mars.doc) en la lista de archivos de la carpeta
C:sky.
Si crea una línea que no
17 Cree formas alrededor del resto de los planetas, si lo desea, que
desea usar, haga clic con el señalen a futuras páginas, como mercury.htm, venus.htm, earth.htm,
botón secundario del mouse jupiter.htm, saturn.htm, uranus.htm, neptune.htm y pluto.htm.
para quitar las líneas
existentes y vuelva a 18 Guarde el archivo skyguide.htm, obtenga una vista previa de la
empezar. página en Vista previa, mueva el cursor sobre Marte (observe que
el cursor cambia para mostrar una mano) y haga clic en Marte para
ver si el vínculo funciona.
19 Haga clic en la ficha vista Normal, cierre el archivo skyguide.htm y
cierre FrontPage.
Va por buen camino para crear el sitio Web del club de astronomía. La subpágina
final que va a crear es un formulario dentro de la página contact.htm.

194. 194
Creación de formularios
Cuando use Formularios en En este momento, debe estar habituado a agregar elementos y a configurar
un sitio Web, su servidor opciones en FrontPage. Como mencionamos al principio de la lección, el truco
debe admitir Extensiones de es saber dónde buscar las herramientas y menús de configuración. En esta
servidor de FrontPage y debe
publicar el formulario con la
sección, creará un formulario en línea. Un formulario en línea permite a los
herramienta de publicación usuarios especificar información en cuadros de texto. Después, cuando los
de FrontPage. usuarios hagan clic en el botón Enviar del formulario, los resultados se
enviarán a la dirección de correo que haya especificado.
Advertencia
No muestre el formulario en la pantalla Vista previa antes de publicarlo en el
Web. Si lo hace, FrontPage 2002 agrega código que impide que la página se
publique correctamente. Cuando cree un formulario, debe publicarlo en el
Web y obtener después una vista previa del mismo en FrontPage o en un
explorador.
Preparación de la página Contactos
El primer paso para crear un formulario en la página Contactos es agregar una
barra de título e insertar texto en el título, para preparar la página, según se
describe en los pasos siguientes:
1 Abra FrontPage, haga clic en Carpeta en la barra de vistas y haga
doble clic en el archivo contact.htm.
2 Haga clic a la derecha de la barra de título, presione Mayús+Entrar,
haga clic en Insertar imagen desde archivo, muestre el contenido
de la carpeta C:skyimages y haga doble clic en t_contact.gif.
3 Con el cursor colocado todavía al final del gráfico de Información
de contacto, presione la tecla Eliminar dos veces para acercar más
la tabla a la imagen t_contact.gif.
4 Haga clic con el botón secundario del mouse en la imagen
t_contact.gif, seleccione Propiedades de imagen, haga clic en la
ficha General, escriba Página de contacto en el cuadro de texto
Representaciones alternativas y haga clic en Aceptar.

195. 195
Inserción de un área de formulario y adición de etiquetas
Ahora que la página Contactos está lista para la acción, puede crear un
formulario en línea. En primer lugar, insertará el cuadro de formulario estándar
y, después, las etiquetas para los cuadros de texto, los botones de opción y los
cuadros de selección del formulario:
1 Haga clic en la celda de la tabla grande a la derecha del botón
Página principal, seleccione Formulario en el menú Insertar y elija
Formulario. Aparece un área resaltada dentro de la tabla que
contiene los botones Enviar y Restablecer, según se muestra en la
figura 7-30 de la página siguiente.
Figura 7-30.
El primer paso para crear un formulario es insertar un componente
formulario, que incluye automáticamente los botones Enviar y Restablecer.
2 Con el cursor colocado a la izquierda del botón Enviar, escriba
Nombre: y presione Mayús+Entrar.
3 Escriba Dirección de correo electrónico: y presione Entrar.
4 Escriba ¿Es ya miembro del club? y presione Entrar.
5 Escriba Si es así, ¿con qué frecuencia asiste a nuestras
reuniones mensuales? y presione Entrar.
6 Escriba Permítanos saber cómo encontró nuestro sitio Web
(seleccione todo lo que corresponda):, presione Mayús+Entrar,
escriba Asistí a una reunión, presione Mayús+Entrar, escriba Lo
encontré en un motor de búsqueda, presione Mayús+Entrar,
escriba Un amigo me informó y, después, presione Entrar.

196. 196
7 Escriba Especifique sus comentarios o cuestiones aquí:,
presione Mayús+Entrar y, después, presione Entrar. El formulario
debería tener una apariencia similar al de la figura 7-31.
Figura 7-31.
El formulario que se está creando sólo muestra el texto y botones básicos.
Creación de los campos del formulario
Ahora puede especificar los campos del formulario, las áreas en las que los
visitantes seleccionan o especifican texto para que puedan enviar información.
Daremos formato a los
1 Haga clic a continuación de Nombre:, presione la barra
campos del formulario en un espaciadora, seleccione Formulario en el menú Insertar y elija
momento, de modo que no Cuadro de texto.
se preocupe si los campos
no tienen la apariencia 2 Haga clic a continuación de Dirección de correo electrónico:,
correcta ahora. presione la barra espaciadora, seleccione Formulario en el menú
Insertar y elija Cuadro de texto.
3 Haga clic a continuación de ¿Es ya miembro del club?, seleccione
Formulario en el menú Insertar, elija Botón de opción, escriba Sí,
presione la barra espaciadora, seleccione Formulario en el menú
Insertar, elija Botón de opción y, después, escriba No.
4 Haga clic a continuación de Si asiste a nuestras reuniones, ¿con
qué frecuencia lo hace?, presione la barra espaciadora, seleccione
Formato en el menú Insertar y elija Cuadro desplegable.

197. 197
5 Haga clic antes de Asistí a una reunión, seleccione Formulario en
el menú Insertar, elija Casilla de verificación y presione la barra
espaciadora.
6 Haga clic antes de Lo encontré en un motor de búsqueda,
seleccione Formulario en el menú Insertar, elija Casilla de
verificación y presione la barra espaciadora.
7 Haga clic antes de Un amigo me informó, seleccione Formulario en
el menú Insertar, elija Casilla de verificación y presione la barra
espaciadora.
8 Haga clic debajo de Especifique sus comentarios o cuestiones aquí,
seleccione Formulario en el menú Insertar y elija Área de texto.
9 Haga clic en Guardar. El formulario ahora debería ser similar al
mostrado en la figura 7-32.
Figura 7-32.
El formulario debería incluir ahora etiquetas y campos de formulario sin
formato.

198. 198
Configuración de las propiedades de los campos de
formulario
Ya tiene la mayor parte del formulario creado. El siguiente paso es configurar
las propiedades de cada campo del formulario y especificar sus propiedades en
conjunto. De modo que esté preparado para hacer clic: está a punto de
configurar algunas propiedades del formulario.
1 Haga clic con el botón secundario del mouse en el campo situado
junto a Nombre y seleccione Propiedades de campo de formulario.
2 En el campo Nombre del cuadro de diálogo Propiedades de cuadro
de texto, escriba Nombre, configure el valor de Ancho en caracteres
como 25 (según se muestra en la figura 7-33), escriba 1 en el cuadro
de texto Orden de tabulación y, después, haga clic en Aceptar.
Figura 7-33.
Para establecer las propiedades de un cuadro de texto, se usa el cuadro
de diálogo Propiedades de cuadro de texto.
El campo de formulario
3 Haga clic con el botón secundario del mouse en el campo situado
Orden de tabulación junto a Dirección de correo electrónico, seleccione Propiedades de
especifica el orden en que campo de formulario, escriba Correo_electrónico, configure el
el cursor se moverá en un valor de Ancho en caracteres como 30, especifique 2 en el cuadro
formulario si un usuario
presiona la tecla Tab para de texto Orden de tabulación y, después, haga clic en Aceptar.
moverse de un campo a otro.

199. 199
4 Haga clic con el botón secundario del mouse en el botón Sí, elija
Propiedades de campo de formulario, escriba Miembro en el
cuadro de texto Nombre de grupo, escriba Sí en el cuadro de
texto Valor, compruebe que en la sección Estado inicial está
seleccionada la opción Seleccionado, escriba 3 en el cuadro de
texto Orden de tabulación y haga clic en Aceptar.
5 Haga clic con el botón secundario del mouse en el botón No, elija
Propiedades de campo de formulario, escriba Miembro en el
cuadro de texto Nombre de grupo, escriba No en el cuadro de texto
Valor, compruebe que en la sección Estado inicial está
seleccionada la opción No seleccionado y haga clic en Aceptar.
Nota
Tenga en cuenta que no tiene que establecer un orden de tabulación para
las opciones Sí y No. Dado que las opciones son miembros del mismo
grupo, los usuarios pueden moverse en el grupo si presionan la tecla Tab.
A continuación, pueden seleccionar una opción con las teclas de dirección.
Cuando esté preparado para pasar a la sección siguiente del formulario,
puede presionar la tecla Tab.
6 Haga clic con el botón secundario del mouse en el cuadro de lista
desplegable Si es así, ¿con qué frecuencia asiste a nuestras
reuniones? y elija Propiedades de campo de formulario. Se abre el
cuadro de diálogo Propiedades de cuadro desplegable.
7 Escriba Asistencia en el cuadro de texto Nombre, especifique 4
en el cuadro de texto Orden de tabulación y, después, haga clic en
Agregar. Se abre el cuadro de diálogo Agregar opción.
8 En el cuadro de diálogo Agregar opción, especifique A todas las
reuniones, elija la opción Seleccionada en la sección Estado inicial
y haga clic en Aceptar.
9 Haga clic en Agregar, escriba Cada dos meses y haga clic
en Aceptar.
10 Haga clic en Agregar, escriba Varias veces al año y haga clic
en Aceptar.

200. 200
11 Haga clic en Agregar, escriba Nunca y haga clic en Aceptar.
Debería aparecer un cuadro de diálogo Propiedades de cuadro
desplegable similar al de la figura 7-34.
Figura 7-34.
El cuadro de diálogo Propiedades de cuadro desplegable muestra todas
las opciones y la opción que se seleccionará de forma predeterminada.
12 Haga clic en Aceptar.
13 Haga clic con el botón secundario del mouse en la primera casilla
de verificación, elija Propiedades de campo de formulario, escriba
SitioWebEncontrado en el cuadro de texto Nombre, especifique
Asistí a una reunión en el cuadro de texto Valor, especifique 5 en
el cuadro de texto Orden de tabulación y haga clic en Aceptar.
14 Haga clic con el botón secundario del mouse en la segunda casilla
de verificación, elija Propiedades de campo de formulario, escriba
SitioWebEncontrado en el cuadro de texto Nombre, especifique
Motor de búsqueda en el cuadro de texto Valor, especifique 6 en
el cuadro de texto Orden de tabulación y haga clic en Aceptar.

201. 201
15 Haga clic con el botón secundario del mouse en la tercera casilla
de verificación, elija Propiedades de campo de formulario, escriba
SitioWebEncontrado en el cuadro de texto Nombre, especifique
Amigo en el cuadro de texto Valor, especifique 7 en el cuadro de
texto Orden de tabulación y haga clic en Aceptar.
16 Haga clic con el botón secundario del mouse en el cuadro de texto
con desplazamiento, elija Propiedades de campo de formulario,
escriba Comentarios en el cuadro de texto Nombre, especifique
40 en el cuadro de texto Ancho en caracteres, especifique 8 en el
cuadro de texto Orden de tabulación, escriba 3 en el cuadro de
texto Número de líneas y haga clic en Aceptar.
17 Haga clic con el botón secundario del mouse en el botón Enviar,
elija Propiedades de campo de formulario, especifique Enviar en el
cuadro de texto Nombre, especifique 9 en el cuadro de texto Orden
de tabulación y haga clic en Aceptar.
18 Haga clic con el botón secundario del mouse en el botón
Restablecer, elija Propiedades de campo de formulario, especifique
Restablecer en el cuadro de texto Nombre, especifique Borrar
formulario en el cuadro de texto Valor/Etiqueta, escriba 10 en el
cuadro de texto Orden de tabulación y haga clic en Aceptar.
19 Haga clic en la flecha Atrás una vez y presione la barra
espaciadora para insertar un espacio entre los botones Enviar
y Borrar formulario.
20 Haga clic antes de la etiqueta Nombre: en la parte superior del
formulario y presione Mayús+Entrar. A continuación, guarde su
trabajo sin obtener una vista previa del formulario (recuerde que,
para que el formulario funcione correctamente, debe publicarlo en
el Web antes de obtener una vista previa del mismo).

202. 202
Denominación de los campos
Generalmente, debe suministrar un nombre para cada campo del formulario.
Los nombres de los campos ayudan a identificar la información una vez
enviada, además de permitir que los exploradores diferencien los elementos.
Puede configurar el formulario para que muestre el nombre de cada campo
junto con los datos enviados. Esta configuración le ayudará a ver rápidamente
qué información se envió en respuesta a la entrada de cada campo del
formulario. Por ejemplo, a continuación se ilustra cómo podrían verse un
formulario rellenado en línea y la página de confirmación:
Después, recibiría un mensaje de correo electrónico con la información
enviada, similar al siguiente:
Las imágenes que se presentan aquí muestran la forma en que el formulario que
está creando en este proyecto se va a mostrar cuando publique el formulario de
contacto en un servidor Web.

203. 203
Completar la página Contactos
Para completar la página Contactos, tiene que ocultar los bordes de la tabla y
establecer las propiedades del formulario.
1 Haga clic con el botón secundario del mouse en cualquier parte de
la tabla, elija Propiedades de tabla, especifique 0 en el cuadro de
texto Tamaño, en el área Bordes, y haga clic en Aceptar.
2 Haga clic con el botón secundario del mouse en el formulario y
elija Propiedades de formulario. Se abre el cuadro de diálogo
Propiedades de formulario.
3 En el cuadro de diálogo Propiedades de formulario, compruebe
que esté seleccionada la opción Enviar a, especifique su propia
dirección de correo electrónico en el cuadro de texto Dirección de
correo electrónico y Formulario de contacto del Club de la
astronomía en el cuadro de texto Nombre de formulario.
4 En el cuadro de diálogo Propiedades de formulario, haga clic en
Opciones, haga clic en la ficha Resultados por correo electrónico,
compruebe que la casilla de verificación Incluir nombres de campo
está activada y especifique Información de contacto del Club de
la astronomía en el cuadro de texto Línea de asunto. Al seleccionar
la opción Incluir nombres de campo, se especifica que los nombres
de campo deben acompañar a la información enviada y el texto de la
línea de asunto aparecerá en los mensajes de correo electrónico
que reciba cuando los usuarios hagan clic en el botón Enviar.
5 Haga clic en la ficha Página de confirmación, escriba
thankyou.htm en el cuadro de texto Dirección URL de la página
de confirmación, haga clic en Aceptar dos veces y, después, haga
clic en No.
6 Guarde y cierre el archivo contact.htm, y cierre FrontPage.
Para ver una versión Hasta aquí ha llegado en la experimentación con las subpáginas para este
publicada de la página proyecto. Ha trabajado en unas cuantas características de FrontPage que
de contactos, visite debería poder usar cuando cree su propio sitio Web. Pero antes de terminar con
www.creationguide.com/
sky/contact.htm (en inglés).
este proyecto, tenemos que crear la página principal del club de astronomía.

204. 204
Creación de una página principal en
FrontPage
Por último, aunque no menos importante, puede crear la página principal. Crear
esta página podría parecer un poco difícil y estamos dispuestos a admitir que
probablemente sea el procedimiento más adelantado que hemos descrito en este
curso. Por muy desafiante que parezca, sin embargo, deseamos darle una idea
de dónde puede ir a partir de aquí si le hemos inspirado para que continúe
diseñando sitios Web. (¡Y esperamos que lo haga!) Asimismo, pensamos que
podría resultarle interesante ver cómo se utilizan en ocasiones las tablas y los
gráficos para crear diseños avanzados de páginas. De todas maneras, vamos a
empezar por definir el marco de trabajo de la página principal.
Configuración del marco de trabajo de la página
principal
Para empezar, siga estos pasos:
1 Abra FrontPage, abra el archivo C:skysubpágina.htm, elija
Guardar como en el menú Archivo, haga clic en el botón Cambiar
título, especifique Sitio Web oficial del Club de la astronomía en
el cuadro de diálogo Establecer el título de la página, haga clic en
Aceptar, especifique index.htm en el cuadro de texto Nombre de
archivo y haga clic en Guardar.
2 Haga clic con el botón secundario del mouse en un área en blanco
de la página, haga clic sucesivamente en Propiedades de página,
en la ficha Fondo y en el cuadro Texto en la sección Colores, elija
Blanco y haga clic en Aceptar.
3 Coloque el cursor antes del vínculo Página principal en la barra de
exploración de texto, arrastre para seleccionar todo lo que haya
encima de la barra de exploración de texto (incluida la barra de
título y el gráfico del logotipo), haga clic con el botón secundario
del mouse en los elementos seleccionados y haga clic en Cortar.
4 Presione Entrar y, después, presione el botón de flecha de
dirección arriba (o haga clic en el espacio por encima de la barra
de exploración de texto).
5 Haga clic en Insertar imagen desde archivo, muestre el contenido
de la carpeta C:skyimages, si es necesario, haga doble clic en
titlebar-home.gif y presione Entrar.

205. 205
6 Haga clic en Componente Web en la barra de herramientas
estándar, elija Efectos dinámicos y haga doble clic en Marquesina.
Se abre el cuadro de diálogo Propiedades de marquesina.
7 En el cuadro de diálogo Propiedades de marquesina, escriba
Nuestra próxima reunión es el 21 de febrero. Reserve su plaza
hoy. En el cuadro de texto Texto. Éste es el mensaje que se
desplazará en la página.
8 Elija la opción Deslizar en la sección Comportamiento, desactive la
casilla de verificación Continuamente en la sección Repetir y escriba
1 en el cuadro de texto Repetir, como se muestra en la figura 7-35.
Figura 7-35.
Entre otras propiedades, puede especificar si el texto de la marquesina se
desplaza continuamente o sólo un número predeterminado de veces.
9 Haga clic sucesivamente en el botón Estilo, en Formato y en
Fuente, elija Comic Sans (o Comic Sans MS) en el cuadro de lista
de fuente, elija Blanco en el cuadro Color y haga clic en Aceptar
tres veces para cerrar todos los cuadros de diálogo abiertos.

206. 206
10 Presione la tecla de flecha derecha para cancelar la selección del
componente de marquesina, presione Entrar, haga clic en el botón
Tabla en la barra de herramientas y cree una tabla de una fila y
cinco columnas. La página index.htm debe parecerse a la
mostrada en la figura 7-36.
Figura 7-36.
La página principal del club de astronomía se basa en una tabla
personalizada.
11 Haga clic con el botón secundario del mouse en la tabla, elija
Propiedades de tabla, haga clic en la lista desplegable Alineación,
seleccione Centrar, compruebe que la casilla de verificación
Especificar ancho está activada, especifique 580 en el cuadro de
texto Especificar ancho, elija la opción En píxeles, compruebe que
las opciones Espacio desde el borde al centro y Espaciado de
celdas se configuran como 0 y haga clic en Aceptar.
12 Seleccione las cinco celdas de la tabla, haga clic en el botón
secundario del mouse en las celdas seleccionadas, elija
Propiedades de celda, configure Alineación vertical como Superior
y haga clic en Aceptar.
13 Haga clic con el botón secundario del mouse en el gráfico titlebar-
home.gif, elija Propiedades de imagen, haga clic en la ficha
General, escriba Bienvenidos al sitio Web del Club de la
astronomía en el cuadro de texto Representaciones alternativas y
haga clic en Aceptar.
14 Haga clic en Guardar.

207. 207
Ensamblado del gráfico principal
Ahora va a insertar los fragmentos de una imagen que se ha cortado para que
quepa en la tabla. En la figura 7-37 se muestra la imagen antes de dividirla. La
razón por la que dividimos la imagen en gráficos independientes es que
deseábamos usar HTML dinámico (DHTML) para crear un efecto de conversión
siempre que los usuarios coloquen el cursor sobre un área con un hipervínculo.
Si no hubiéramos deseado enseñar el efecto de conversión (y demostrar cómo
puede dividir y volver a unir las imágenes cuando sea necesario), podríamos
haber creado un mapa de imágenes similar al del sistema solar que creó en la
página Mapa del cielo anteriormente en esta lección.
Figura 7-37.
La imagen de la Osa mayor que se ve aquí se dividió en fragmentos para este
proyecto.
Nota
HTML dinámico (DHTML, Dynamic HTML) es una tecnología que
proporciona páginas Web con la capacidad de realizar cambios y
actualizaciones en respuesta a las acciones de un usuario, por ejemplo,
puede mostrar un gráfico o información adicional en respuesta al
movimiento del mouse.
1 En el archivo index.htm, haga clic en la celda 1, haga clic en
Insertar imagen desde archivo en la barra de herramientas
estándar, muestre el contenido de la carpeta C:skyimages y haga
doble clic en bigdip1.gif.
2 Haga clic en la celda 2 e inserte el archivo b_aboutus.gif.
3 Haga clic en la celda 3, inserte el gráfico bigdip2.gif (un gráfico
transparente que le ayudará a alinear el resto de los gráficos),
presione Mayús+Entrar, inserte el gráfico b_contact.gif, presione
Mayús+Entrar, inserte el gráfico b_meetings.gif, presione
Mayús+Entrar e inserte el gráfico b_skyguide.gif.
4 Haga clic en la celda 4 e inserte el gráfico bigdip3.gif.

208. 208
5 Haga clic en la celda 5 e inserte bigdip4.gif (otra imagen
transparente), presione Mayús+Entrar, inserte b_gallery.gif,
presione Mayús+Entrar, inserte bigdip5.gif, presione Mayús+Entrar
e inserte b_links.gif. La página index.htm debe aparecer como en
la figura 7-38.
Figura 7-38.
Cuando haya modelado los fragmentos de la imagen de la Osa mayor,
podrá vincularlos en las subpáginas.
Creación de vínculos dentro del gráfico principal
El siguiente paso es vincular cada imagen que contenga un nombre de botón en
el gráfico de la Osa mayor a la subpágina apropiada:
1 Haga clic con el botón secundario del mouse en el texto Acerca de
nosotros, elija Hipervínculo, compruebe que la carpeta sky aparece
en el cuadro de texto Buscar en, escriba aboutus.htm en el cuadro
de texto Dirección (o seleccione el archivo aboutus.htm en la lista
de archivos) y haga clic en Aceptar.
Para acelerar el proceso de
2 Vincule el resto de los gráficos como se indica a continuación:
creación de hipervínculos,
puede hacer doble clic en los Gráfico Vincular a
nombres de archivo en la lista
de archivos del cuadro de
Contactar contact.htm
diálogo Insertar hipervínculo, Reuniones meetings.htm
en lugar de escribir cada
nombre de archivo en el
Mapa del cielo skyguide.htm
cuadro de texto Dirección. Galería de fotos gallery.htm
Vínculos de links.htm
astronomía
3 Haga clic en Guardar.

209. 209
Adición de HTML dinámico al gráfico principal
A continuación, agregará el efecto de conversión a cada área con un
hipervínculo en la tabla mediante la barra de herramientas DHTML de
FrontPage:
1 Seleccione el botón Acerca de nosotros y elija Efectos de HTML
dinámico en el menú Formato. Aparece la barra de herramientas
Efectos DHTML. Va a configurar la barra de herramientas para que
se muestre como se ve en la figura 7-39.
Figura 7-39.
La barra de herramientas Efectos DHTML le ayuda a aplicar efectos
dinámicos a las páginas Web.
2 En la lista desplegable en, elija Pasar el mouse.
3 En la lista desplegable Aplicar, elija Intercambiar imágenes, haga
clic en la lista desplegable Elegir configuración, seleccione Elegir
imagen y haga doble clic en b_aboutus2.gif en la carpeta
C:skyimages.
4 Repita los pasos 1 a 3 para cada área vinculada, con el fin de
vincular los gráficos secundarios de la forma siguiente:
Vínculo Archivo de imagen
Contactar b_contact2.gif
Reuniones b_meetings2.gif
Mapa del cielo b_skyguide2.gif
Galería de fotos b_gallery2.gif
Vínculos de astronomía b_links2.gif
5 Cierre la barra de herramientas Efectos DHTML.
6 Haga clic con el botón secundario del mouse en la tabla, elija
Propiedades de tabla, especifique 0 en el cuadro de texto Tamaño,
en la sección Bordes, haga clic en Aplicar y haga clic en Aceptar.
7 Haga clic en Guardar y, después, vea cómo queda su trabajo en la
vista previa.
8 Haga clic en la ficha vista Normal para volver al área de trabajo.

210. 210
Toques finales de la página principal
Finalmente, para completar la página principal, insertará un contador y la fecha
en que se modificó por última vez. Para insertar un contador, siga estos pasos:
Los elementos de contador
1 En index.htm, haga clic después del hipervínculo Vínculos en la
no se mostrarán hasta que barra de exploración de texto, presione Entrar, seleccione
publique el Web de Componente Web en el menú Insertar y elija Contador de visitas a la
FrontPage. página en la lista Tipo de componente. Haga clic en Finalizar y
aparecerá el cuadro de diálogo Propiedades de contador de visitas a
la página.
2 En la lista Estilo de contador, seleccione el estilo de número digital
verde (el último estilo de la lista), a continuación active la casilla de
verificación Número fijo de dígitos, acepte la configuración
predeterminada de 5 dígitos y haga clic en Aceptar.
3 Presione Entrar, elija Fecha y hora en el menú Insertar y haga clic
en Aceptar, en el cuadro de diálogo Fecha y hora. La fecha se
actualizará automáticamente siempre que modifique la página.
4 Guarde el archivo index.htm y, después, haga clic en Vista previa.
Su página debería ser similar a la mostrada en la figura 7-40.
Cuando publique su sitio Web de sky, la página principal mostrará
el contador el lugar del texto marcador de posición.
Figura 7-40.
El archivo index.htm completo se muestra aquí en el modo Vista previa.

211. 211
Ha completado la página principal y la mayor parte de las subpáginas del sitio
Web del club de astronomía. ¡Ha hecho un fantástico trabajo! Ahora debería
entender algunas de las capacidades más fabulosas de FrontPage. Esperamos
que este recién adquirido conocimiento le sirva de ayuda para diseñar y crear
sus propios sitios Web.
Para ver una versión “en En lo que respecta al sitio del club de la astronomía, el único paso que falta es
acción” del sitio Web del publicar el Web de C:sky mediante la característica Publicar de FrontPage.
club de astronomía creado Asegúrese de leer la sección siguiente antes de cargar el sitio Web del club de
en este proyecto, visite
www.creationguide.com/sky/c
astronomía en el espacio del servidor.
Unas palabras acerca de la publicación
ontact.htm (en inglés).
Cuando crea Webs en FrontPage, es conveniente cargar las páginas con la
característica Publicar Web de FrontPage, en especial si ha insertado elementos
que se basen en Extensiones de servidor de FrontPage (como formularios y
contadores). Para publicar su sitio, seleccione la opción Publicar Web en el menú
Archivo. Ya debería tener solucionadas las cuestiones referentes al espacio del
servidor y a su dirección. Asimismo, debe haber comprobado que el servicio de
alojamiento de sitios Web admite Extensiones de servidor de FrontPage. Para
obtener más información acerca de cómo publicar Webs de FrontPage y usar
Extensiones de servidor de FrontPage, póngase en contacto con su proveedor de
servicios Internet (ISP) y remítase a los archivos de ayuda de FrontPage.
Recursos adicionales
A continuación enumeramos un par de referencias sobre FrontPage que hemos
encontrado de utilidad:
■ Buyens, Jim. Microsoft FrontPage Version 2002 Inside Out.
Redmond, WA: Microsoft Press, 2001. Este libro es un recurso
con una completa documentación de FrontPage.
■ www.microsoft.com/spain/Office/frontpage/default.asp es el recurso
en línea definitivo acerca de FrontPage.

212. 212
Puntos clave
■ FrontPage es un programa de edición HTML muy completo.
■ Puede usar FrontPage para crear fácilmente páginas Web
avanzadas como efectos de conversión en botones, mapas de
imágenes, vistas en miniatura, formularios, contadores y otros
componentes de páginas Web.
■ La interfaz de FrontPage permite mostrar las páginas Web en la
vista Normal (de trabajo), en la vista HTML y en el modo Vista
previa.
■ Aprender FrontPage le abre las puertas de la utilización de otros
editores HTML avanzados porque ejemplifica los tipos de
capacidades que éstos pueden proporcionar.
■ Antes de crear páginas Web con FrontPage, debe asegurarse de
que el servicio de alojamiento de sitios Web admita Extensiones de
servidor de FrontPage. (Actualmente, la mayor parte de los
servidores admiten las extensiones en cierto grado.)
■ Antes de empezar a crear páginas Web en FrontPage, debería
configurar un Web, lo que proporciona un formato especial a la
carpeta seleccionada.
■ Puede simplificar el proceso de creación de un sitio Web si crea
una plantilla estándar que puede guardar como subpáginas.
■ La clave para crear Webs en FrontPage es conservar sus archivos
organizados, saber dónde buscar las herramientas y opciones de
menús de FrontPage, y experimentar con diversas opciones.
■ Para lograr los mejores resultados, cargue los archivos de
FrontPage con la característica Publicar Web.

213. 213
LECCIÓN 8
Introducción de las
páginas Web en el
mundo real
Una vez completada esta lección, podrá:
 Transferir sus archivos a Internet.
 Elegir un método para exponer sus páginas Web.
 Usar Mis sitios de red de Microsoft para mantener su sitio Web.
 Revisar las páginas Web antes de transferirlas a Internet.
Cuando cree páginas Web, finalmente estará preparado para mostrarlas en
línea. De esto trata esta lección: del paso de las páginas desde el escritorio
“sólo para sus ojos” de su PC al espacio de “los ojos de todo el mundo” en
Internet. Con probabilidad, ha creado páginas Web, de modo que puede
manifestar su presencia en el Web, no sólo como ejercicio intelectual, así que
continuaremos con esa suposición.
La clave para “pasar al mundo real” sus páginas y colocarlas en el Web es
copiar los documentos HTML y los archivos de imagen en un servidor. En la
lección 4, revisamos con detalle el espacio en los servidores, los nombres de
dominio y los ISP, por lo tanto no vamos a volver sobre esas cuestiones aquí.
Si necesita un recordatorio en profundidad de estos temas, consulte la lección 4.
Si prefiere avanzar, a continuación se enumeran las cuestiones que deberá tener
en cuenta para poder pasar las páginas Web al mundo real:
■ Archivos HTML y de imagen, denominados y organizados
correctamente.
■ Espacio en un servidor. (Puede pagar una cuota mensual a un
servicio de alojamiento de sitios Web a cambio de espacio en un
servidor, puede usar un espacio gratuito o puede utilizar el espacio
que su ISP le proporciona en sus servidores como parte de su
cuenta de conexión a Internet.)
■ Una aplicación de software que permita transferir los archivos
desde su equipo a un servidor. (Explicaremos este requisito más
adelante en esta lección.)
■ Una dirección Web. Debe adquirir un nombre de dominio y registrarlo
con un servicio de alojamiento de sitios Web, configurar una dirección
Web en un servidor gratuito u obtener una dirección Web de su ISP
(el espacio en los servidores de los ISP se suele basar en el nombre
de dominio del ISP seguido de su nombre de usuario).

214. 214
En este punto del curso, la lista anterior no debería sonarle demasiado
desalentadora. Asimismo, en un momento describimos con exactitud qué
aplicaciones de transferencia de archivos puede usar y cómo puede copiarlos en
un servidor. Por tanto, incluso si tiene algunas cuestiones acerca de los
requisitos anteriores, tenga paciencia: nos ocuparemos de cada uno en breve.
Además de transferir sus archivos a un servidor, tiene un par de tareas
adicionales a las que prestar atención. En concreto, tendrá que comprobar las
páginas Web cuando transfiera sus archivos a un servidor además de hacer
saber a los demás que su sitio puede verse.
Estas tres tareas posteriores a la fase de creación (transferencia de archivos,
comprobación de las páginas Web en “el mundo real” y comunicación de tal
hecho) son los puntos principales a los que aludimos en esta lección. Si tiene a
mano todos sus archivos, una conexión a Internet y algo de espacio en un
servidor, su sitio puede estar disponible en línea al finalizar esta lección.
Transferencia de los archivos a
Internet
Si tiene los archivos de imagen y HTML además de espacio en un servidor y
Jerga: el término carga hace
referencia al proceso de copia
una conexión a Internet, significa que ya está preparado para exponer sus
de archivos desde su equipo a páginas Web. Puede transferir los archivos a través de Internet de varias
un servidor. La descarga se formas. A continuación enumeramos algunos de los métodos de que dispone
refiere a la copia de archivos
para transferir archivos:
de un servidor a su equipo,
como cuando descargó los ■ Programas FTP
gráficos del sitio Web Creation
Guide para completar los ■ Carpetas Web y Mis sitios de red
proyectos de las lecciones 6
■ Asistentes para publicación en Web
y 7 de este curso).
■ Interfaces de ISP y editores HTML
■ Exploradores
En realidad no hay que darle más vueltas: va a tener que usar algún método
para exponer sus páginas. Después de todo, una de las transacciones más
comunes que los diseñadores Web tienen con un servidor es cargar
documentos HTML, imágenes y archivos multimedia. Por lo tanto, siga
leyendo. El proceso de carga es bastante sencillo siempre que tenga en mente
su objetivo principal, que es pasar los archivos de su equipo a un servidor de
una manera organizada.
Siempre que carga archivos de su escritorio a Internet, utiliza FTP. El truco para
Jerga: FTP es un protocolo
cliente-servidor que permite transferir archivos con FTP es usar una aplicación o interfaz que esté diseñada
usar un equipo para transferir específicamente para servir como agente FTP. Aunque ese “truco” no parece
archivos entre equipos en muy agudo, afirmar lo obvio también merece el espacio necesario para clarificar
Internet.
lo que significa usar FTP. Hemos visto que las personas ponen los ojos en blanco
tan pronto como pronunciamos esas tres misteriosas letras: F-T-P. Por suerte, al
igual que con otras tecnologías de creación de páginas Web, el uso de FTP para
cargar archivos de páginas Web no es en absoluto amedrentador una vez que se
haya puesto al día en unos cuantos conceptos básicos.

215. 215
Aplicaciones FTP
En nuestra opinión, las aplicaciones FTP estándar proporcionan uno de los
métodos más sencillos para cargar archivos en Internet. En apariencia, no lo
debemos de pensar sólo nosotros porque hay trillones de aplicaciones FTP
disponibles en forma de software gratuito, shareware y software comercial.
Principalmente, usamos un programa denominado CuteFTP para PCs que se
basan en Microsoft Windows y Fetch para equipos Macintosh. Pero puede
encontrar otras muchas aplicaciones FTP en línea (que se pueden descargar y
también comprar) y en tiendas de software informático.
Sugerencia
Debería poder adquirir un buen programa FTP por un precio muy razonable.
En general, comprar una aplicación FTP significa que dispondrá de una
mayor funcionalidad en comparación con las utilidades de shareware y de
software gratuito más limitadas. Tenga en cuenta que, probablemente, su
ISP le proporcione una aplicación FTP con su paquete de inicio. Si es así,
póngase en contacto con su proveedor u hojee la documentación del ISP
para encontrar las instrucciones específicas de la aplicación.
La figura 8-1 muestra la interfaz de CuteFTP, que es una interfaz de aplicación
FTP bastante típica.
Figura 8-1.
Con CuteFTP, puede arrastrar los archivos desde su equipo a un directorio
de su servidor.

216. 216
El atractivo de las aplicaciones FTP más recientes es que puede arrastrar y
colocar los archivos que desee cargar de una venta a otra. Por ejemplo, en
CuteFTP, puede mostrar una carpeta local en el panel de la izquierda (en la
figura 8-1 se muestra la carpeta music creada en el proyecto de la lección 6) y
el espacio del servidor en el panel de la derecha. Para cargar los archivos de sus
páginas Web, basta con que seleccione y arrastre los archivos o carpetas del
panel de la izquierda al de la derecha.
Hemos escuchado decir a muchos usuarios que la parte más intimidante de la
utilización de una aplicación FTP es configurar la conexión inicial. Por suerte,
una vez que configure inicialmente una conexión, la mayoría de las aplicaciones
FTP conserva los datos de conexión “archivados” para utilizarlos en el futuro.
Advertencia
Cuidado: si usa un programa shareware y transcurre el tiempo asignado
para la prueba, corre el riesgo de perder la información de configuración de
sus conexiones FTP. Si sucede esto, tiene dos opciones: puede comprar
una copia con licencia del programa de shareware o (en algunos casos)
puede retrasar temporalmente el reloj del sistema de modo que pueda abrir
la aplicación de shareware y recuperar la información de su configuración.
Incluso aunque cada aplicación FTP tiene una interfaz personalizada para
reunir la información de las cuentas, tendrá que proporcionar ciertos datos
básicos para establecer una conexión FTP con un servidor con independencia
de la aplicación que use:
■ Etiqueta del sitio FTP Nombre que proporciona para la cuenta
FTP que está creando. El único propósito de la etiqueta del sitio
es ayudarle a recordar qué cuenta FTP se corresponde con cada
servidor. Denomine sus conexiones de forma lógica.
■ Dirección de host FTP La dirección de su espacio en el servidor.
Por ejemplo, la dirección de host del sitio Creation Guide es
ftp.creationguide.com.
■ Nombre de usuario del sitio FTP El nombre de usuario que utiliza
para tener acceso a su espacio en el servidor. Generalmente, el
nombre de usuario de un sitio FTP es el mismo que su dirección
de correo electrónico, por ejemplo admin@creationguide.com.
Algunos proveedores permiten especificar el nombre de usuario sin
la parte @dominio.com y, en este caso, en el ejemplo anterior sólo
se necesitaría indicar admin.
■ Contraseña del sitio FTP Una contraseña asociada con su nombre
de usuario que le permite tener acceso a su espacio en el servidor.

217. 217
¡Pruébelo!
Visite www.tucows.com (en inglés) o www.download.com (en inglés) para
encontrar listas de programas FTP disponibles. Descargue e instale el programa
FTP que prefiera y, después, ponga la aplicación a prueba. Siempre puede
desinstalar el programa FTP que haya descargado y probar otro si el que elija
no se adapta a su estilo de trabajo. Si encuentra un programa shareware que le
guste, no olvide registrarlo.
En numerosos formularios de conexión FTP, también se le preguntará si desea
transferir la información en ASCII, en formato binario o con detección
automática. La forma predeterminada suele ser la detección automática (o alguna
variación de ese término) y le recomendamos que la conserve siempre que sea
posible.
Nota
Podría ser aconsejable que anote su contraseña y la guarde en algún lugar
seguro (que no sea su equipo). Cuando la especifique en las aplicaciones
FTP y en la mayor parte de los asistentes para publicación en Web, en su
lugar se muestran puntos.
Para crear una conexión FTP, debe insertar la información apropiada en los
campos respectivos (en CuteFTP, en el cuadro de diálogo Configuración del
sitio para el nuevo sitio) y, para finalizar la configuración, haga clic en Aceptar,
en Finalizar o en Conectar (según la aplicación). Cuando configure una
conexión FTP al espacio del servidor, puede conectarse a Internet, activar la
conexión FTP y cargar las páginas. (Llame a su ISP o visite sus páginas de
ayuda si tiene algún problema al conectarse.)
Nota
Los archivos HTML se deben transferir en modo ASCII, de texto o DOS.
Todos los archivos, incluidos las imágenes, los sonidos y los vídeos, se
deben transferir en modo binario. Comprobar que la opción Automático,
Detección automática, Todos los archivos o Datos sin formato está
seleccionada en las opciones de su aplicación FTP generalmente
significa que la aplicación puede diferenciar entre los tipos de archivo
comunes, de forma que no tendrá que preocuparse de especificar si se
trata de imágenes o archivos HTML. De forma predeterminada, CuteFTP
(y casi todas las demás aplicaciones FTP) se configura para detectar
automáticamente los tipos de archivo comunes.

218. 218
En este punto, nos gustaría mencionar un par de reglas que debe seguir
religiosamente al copiar los archivos de sus páginas Web a un servidor.
No puede copiar los archivos y las carpetas de cualquier modo: tendrá que
seguir el proceso de forma ordenada o, de lo contrario, se arriesga a crear
vínculos erróneos y sobrescribir por error archivos que tengan el mismo
nombre. (Por ejemplo, la mayor parte de las subcarpetas contienen un archivo
denominado index.html; si no carga los archivos en las carpetas adecuadas,
podría reemplazar un archivo index.html inadvertidamente con otro del mismo
nombre que no tenga nada que ver.) Aquí tiene el punto clave que debe
recordar cuando cargue sus páginas Web: conserve la estructura de carpetas
y archivos de sus páginas Web.
En otras palabras, si su página Web consta de un documento índice.html y de
una carpeta denominada imágenes, asegúrese de cargar el archivo índice.html
y copiar después la carpeta imágenes o volver a crearla en el espacio en el
servidor y copiar los gráficos almacenados en su carpeta imágenes local a la
carpeta imágenes en línea. Como hemos mencionado, conservar la estructura de
su sitio es crucial para evitar que los vínculos sean erróneos en las páginas.
Éste es otro punto extremadamente importante: denomine a las carpetas en línea
exactamente con los mismos nombres que sus carpetas locales. No cambie el
nombre de ninguna carpeta o archive cuando las cargue, en especial, no cambie el
nombre de ninguna carpeta que contenga imágenes de páginas Web. (Por cierto, la
creación accidental de una carpeta denominada imagen si se debe llamar imágenes
constituye un cambio de nombre; asimismo, alterar las mayúsculas y minúsculas,
y quitar espacios dentro de los nombres de archivos o carpetas también se califica
como una práctica inaceptable de cambio de nombre.) El motivo para conservar
la estructura de denominación existente es sencilla: su documento HTML
probablemente contenga comandos HTML que indican a los exploradores
dónde buscar los gráficos. Las instrucciones de imágenes (contenidas dentro de
la etiqueta <IMG>, si trabajó en el proyecto HTML de la lección 6) señalan
específicamente a las imágenes almacenadas en una carpeta con un nombre
concreto. Si cambia el nombre de una carpeta sin cambiar los comandos HTML,
los exploradores no sabrán dónde buscar los gráficos de la página Web y no se
mostrarán en ella. De nuevo, el momento de cargar las carpetas y los archivos de
las páginas Web no es el apropiado para cambiarles el nombre. De hecho, lo
opuesto sí que es cierto: cuando cargue los archivos de una página Web en un
servidor, debe replicar su configuración de la forma más exacta posible.

219. 219
Cuando haya copiado correctamente los archivos de sus páginas Web en
un servidor, termine su conexión FTP, abra el explorador y especifique la
dirección URL de la página Web en la barra de direcciones del explorador.
La dirección URL de la página Web es similar a la dirección FTP que
mencionamos anteriormente, excepto en que aparece www en lugar de
ftp (por ejemplo, la dirección FTP para el sitio Creation Guide es
ftp.creationguide.com mientras que la dirección Web es
www.creationguide.com). Si ha cargado un documento HTML index.htm
o index.html en el directorio raíz del dominio, debería poder tener acceso
a su nueva página principal especificando su dirección URL en la barra de
direcciones del explorador sin tener que escribir un nombre de archivo.
Por ejemplo, puede escribir simplemente www.creationguide.com en lugar
de www.creationguide.com/index.html para ver la página principal de
Creation Guide.
Como puede ver, la mayor parte de las aplicaciones FTP sirven para el único
propósito de proporcionar un medio de transferir y tratar (cambiar el nombre,
eliminar, mover, etcétera) archivos a través de una red. Si está buscando otras
opciones de transferencia de archivos o una solución más automatizada,
encontrará que numerosas aplicaciones tienen integradas funciones FTP,
como va a descubrir en la sección siguiente.
Sugerencia
Los ISP suelen indicarle dónde debe almacenar los archivos de sus
páginas Web dentro de su espacio en un servidor. En nuestro espacio en
un servidor para el sitio Creation Guide, copiamos toda nuestra información
en una carpeta generada por el ISP denominada web. Consulte a su ISP si
debe trabajar dentro de parámetros similares. Algunos ISP simplemente le
proporcionan la carpeta de nivel superior que puede usar para almacenar
los archivos de sus páginas Web.
Carpetas Web y Mis sitios de red
Jerga: Mis sitios de red
Microsoft proporciona otro método para cargar y administrar los archivos y
permite crear accesos carpetas de un sitio Web: usar Mis sitios de red para crear y administrar sitios
directos en el escritorio a que contienen carpetas y archivos Web. Mis sitios de red se incluyó por primera
archivos y carpetas que se
encuentran en Internet o en
vez en Microsoft Office 2000 y se sigue incluyendo en Office 2002 (antes de
un servidor de una intranet. Office 2000, la característica se conocía estrictamente como Carpetas Web y era
un poco más engorrosa que Mis sitios de red). Con Mis sitios de red, podrá usar
la conocida interfaz de Windows para realizar las tareas de administración de
archivos y carpetas necesarias para crear y mantener un sitio Web.

220. 220
Advertencia
Para poder configurar un vínculo a su espacio Web en Mis sitios de red,
debe comprobar que el servidor Web admite sitios de red. La característica
sitios de red requiere el protocolo Web Extender Client (WEC) y
extensiones de Microsoft FrontPage, o el protocolo WebDAV y Servicios
de Internet Information Server (IIS). Llame a su servicio de alojamiento de
sitios Web o consulte las páginas de preguntas más frecuentes en línea del
mismo para comprobar si su espacio Web está preparado para aprovechar
la tecnología de sitios de red.
Sugerencia
Puede que tenga que activar las extensiones de FrontPage en el servicio
de alojamiento para crear un sitio de red. Aunque esta tarea puede parecer
algo desalentadora, probablemente sea cuestión de unos pocos clics del
mouse (ratón) (en función de si su servicio de alojamiento admite el sitio
Web). Para averiguar cómo usar Extensiones de servidor de FrontPage en
el servicio de alojamiento, realice una búsqueda rápida en la sección de
soporte técnico del mismo o llame a su número de soporte técnico.
Básicamente, cuando usa la característica de sitios de red, puede crear accesos
directos a las ubicaciones de red que contienen las carpetas almacenadas en su
espacio Web. Después de crear un vínculo a un sitio de red, puede tratar el
contenido de las carpetas Web almacenadas en su espacio Web (generalmente,
éste es el espacio que adquiere en el servidor de su servicio de alojamiento)
igual que trata los archivos y carpetas locales. La diferencia radica en que los
cambios efectuados en los archivos de una carpeta Web se realizan en los
archivos en línea cuando se guardan los cambios. En resumen, un sitio de red
sirve como acceso directo a las carpetas Web (y al contenido de las mismas)
en su espacio en el servidor.
Puede tener acceso a los sitios de red y a las carpetas Web de dos formas.
En concreto, puede:
■ Mostrar sus sitios de red directamente, haciendo doble clic en Mis
sitios de red, en el escritorio, o eligiendo Mis sitios de red en el
menú Inicio, lo que permite crear nuevos sitios de red y abrir los
vínculos existentes.
■ Crear un sitio de red nuevo o vincularlo a un sitio de red existente
desde dentro de una aplicación de Office, como en Microsoft Word.
Cuando configura un sitio de red o lo vincula, puede guardar los
archivos y carpetas directamente en el sitio de red desde dentro de
la aplicación.

221. 221
Nota
En vistas diferentes a Mis sitios de red, Windows también proporciona
las opciones Publicar esta carpeta en Web o Publicar este archivo en
Web (dependiendo del tipo de elemento que esté seleccionado en ese
momento), según se describe más adelante en esta sección. Cuando
selecciona una carpeta o un archivo, y hace clic en alguna de las opciones
anteriores, Windows le permite copiar la carpeta o el archivo en un
espacio de almacenamiento Web, como MSN o Xdrive Plus. Esta
característica sirve a los usuarios que desean compartir, transferir y
almacenar documentos codificados en un lenguaje distinto a HMTL en
el Web además de páginas Web e imágenes.
Como hemos mencionado, puede ver sus sitios de red si abre Mis sitios de red,
según se ilustra en la figura 8-2. Observe que Mis sitios de red incluye un
vínculo denominado Agregar un sitio de red en la sección Tareas de red, en el
lateral izquierdo de la ventana. (¡Probablemente pueda adivinar el propósito de
esta pequeña joya!)
Figura 8-2.
Puede tener acceso a sitios de red y carpetas Web y configurarlos desde la
ventana Mis sitios de red.
Cuando abra una carpeta de sitio de red y examine su contenido, verá una lista
de las carpetas y archivos en línea junto con sus direcciones Web asociadas
(direcciones URL), según se ilustra en la figura 8-3. Dentro de la carpeta Web,
puede mover, copiar, cambiar el nombre y eliminar carpetas y archivos además
de ver sus propiedades. También puede arrastrar los archivos entre servidores
Web (si tiene varios sitios Web) y entre un servidor Web y el disco duro u otro
dispositivo de almacenamiento (como un disquete). En otras palabras, las
carpetas Web hacen que la administración de los archivos del sitio Web sea
tan sencilla como la administración de los archivos locales.

222. 222
Figura 8-3.
Ver el contenido de una carpeta Web es similar a ver el contenido de las
carpetas del escritorio.
Ahora vamos a echar un vistazo rápido a dos métodos que puede utilizar para
crear sitios de red en el sistema. En ambos casos, necesitará la información
siguiente:
■ La información de dominio, que es la dirección Internet de su
sitio Web (por ejemplo, www.creationguide.com).
■ El nombre de usuario y la contraseña para tener acceso a su
espacio en el servidor
Creación de un sitio de red mediante Mis sitios de red
Para crear un sitio de red con Mis sitios de red, siga estos pasos:
1 En el escritorio de Microsoft Windows XP, haga doble clic en Mis
sitios de red o haga clic en Mis sitios de red en el menú Inicio, y
haga clic en el vínculo Agregar un sitio de red en la sección Tareas
de red.
2 En el Asistente para agregar sitio de red, haga clic en Siguiente.
El Asistente para agregar sitio de red tiene acceso a Internet y,
después, proporciona una opción para configurar un sitio de red en
MSN o en otra ubicación de red. En la mayor parte de los casos,
configurará un sitio de red en otra ubicación diferente al sitio Web
de MSN.
3 Seleccione la opción Elija otra ubicación de red y haga clic
en Siguiente.
4 En el cuadro de texto Dirección de red o Internet, escriba la
dirección de Internet de su ubicación de red (por ejemplo,
www.creationguide.com).
5 Haga clic en Siguiente. Si su espacio Web requiere que escriba
un nombre de usuario y la contraseña, verá un cuadro de diálogo
donde se solicite esta información, como se muestra en la
figura 8-4.

223. 223
Figura 8-4.
En la mayoría de los casos, tendrá que especificar su nombre de usuario
y la contraseña al crear un sitio de red.
6 Escriba su nombre de usuario y contraseña, y haga clic en Aceptar.
7 Escriba un nombre para el sitio de red en el cuadro de texto
Escriba un nombre para este sitio de red (por ejemplo, Creation
Guide). El nombre que especifique aquí se muestra en la ventana
Mis sitios de red, de modo que sea amable consigo mismo y elija
un nombre que siga teniendo sentido más adelante.
8 Haga clic en Siguiente y, después, en Finalizar para completar el
proceso.
Ahora debería ver un vínculo de sitio de red en su carpeta Mis sitios de red.
Puede hacer doble clic en el icono de sitio de red para tener acceso al espacio
Web del sitio de red. Si tiene problemas al configurar la conexión, compruebe
que el servidor Web tiene la configuración apropiada para controlar los sitios
de red (como se menciona anteriormente en esta lección).
Ahora que ha creado la carpeta Web, puede transferir los archivos a su sitio
Web arrastrándolos a su carpeta Web en su sitio de red recién creado o
guardándolos directamente desde cualquier programa de Office 2000 o de
una versión posterior. Descubrirá que puede usar sitios de red para modificar
y mantener sus páginas Web en diversas formas. Por ejemplo, podrá abrir un
sitio de red y hacer clic con el botón secundario del mouse en los nombres de
archivo y carpetas para cambiarles el nombre, seleccionar y eliminar archivos
y carpetas, reemplazar archivos y carpetas con información actualizada, y
modificar de alguna otra forma los documentos de páginas Web y directorios.

224. 224
Creación de un sitio de red desde Word
Para crear una carpeta Web mientras trabaja en Word, puede hacer clic en
Agregar sitio de red en el panel de tareas de Nuevo documento (haga clic en
Nuevo en el menú Archivo) o puede crear un sitio de red con el cuadro de
diálogo Guardar como. En los pasos siguientes, le mostramos cómo crear un
sitio de red con el cuadro de diálogo Guardar como, pero los pasos para crear
un sitio de red desde el elemento Agregar sitio de red en el panel de tareas
Nuevo documento son muy similares.
1 En Word, haga clic en Archivo y, después, en Guardar como.
Aparece el cuadro de diálogo Guardar como.
2 En el cuadro de diálogo Guardar como, haga clic en el icono Mis
sitios de red en el panel Guardar en para mostrar el contenido de la
ventana Mis sitios de red, como se ilustra en la figura 8-5.
Figura 8-5.
Puede usar el cuadro de diálogo Guardar como para crear un sitio
de red.

225. 225
3 En el cuadro de diálogo Guardar como, haga doble clic en el icono
Agregar sitios de red (mostrado en la figura 8-5). El Asistente para
agregar sitio de red se abre, según se muestra en la figura 8-6.
Figura 8-6.
Tiene la opción de crear un vínculo a un sitio de red o crear una carpeta
nueva en un sitio de red.
Cuando haya creado un 4 Elija la opción Crear acceso directo a un elemento de Sitio de red
acceso directo a una existente, si desea crear un vínculo a su espacio Web, y haga clic en
ubicación de red, (según se
describe en el paso 5),
Siguiente.
podrá tener acceso al sitio 5 En el cuadro de texto Ubicación, especifique la dirección de su sitio
de red en el cuadro de
diálogo Guardar como y a Web (por ejemplo, www.creationguide.com) y, en el cuadro de texto
la ventana Mis sitios de red Nombre de acceso directo, escriba un nombre para la conexión,
si hace doble clic en el icono como se ilustra en la imagen 8-7, y haga clic en Finalizar.
de la ubicación.

226. 226
Figura 8-7.
En este procedimiento, escribe la dirección de Internet del sitio de red y
el nombre del acceso directo en un cuadro de diálogo.
6 Escriba su nombre de usuario y contraseña, y haga clic en Aceptar.
El contenido del sitio de red se muestra en el cuadro de diálogo
Guardar como.
Ahora, puede guardar su documento de Word en una carpeta Web
del sitio de red (y, de ese modo, cargar su página Web) en la
misma forma que guarda otros documentos de Word.
Tendrá que establecer una
7 En el cuadro de lista desplegable Guardar como tipo, especifique
conexión a Internet para Página Web o Página Web, filtrada, especifique el nombre del
poder guardar un documento documento en el cuadro de texto Nombre de archivo, haga clic en
Web en un sitio de red. el botón Cambiar título si desea especificar el texto del título de la
página Web, haga clic en la carpeta Web en la que desee exponer
el documento HTML y haga clic en Guardar.
Después de guardar un documento HTML en una carpeta Web de un sitio de
red, puede ver la página en línea si especifica la dirección de la página Web
en la barra de direcciones del explorador.

227. 227
Otras opciones aparte de FTP
Aunque no desee instalar un programa FTP en su equipo o configurar Mis
sitios de red y Carpetas Web, no está todo perdido. Puede copiar los archivos
en un servidor Web igualmente de otras formas. En concreto, puede usar las
funciones FTP integradas en alguno de los siguientes tipos de aplicaciones:
■ Asistentes para publicación en Web, como el Asistente para
publicación en Web incluido con Windows
■ Los servicios en línea de los ISP y editores HTML, como FrontPage
■ Exploradores, como Microsoft Internet Explorer
Asistentes para publicación en Web
El Asistente para publicación en Web ofrecido en Windows XP sirve
principalmente para permitir el almacenamiento de los archivos y proporcionar
funciones para usar los archivos de forma compartida. Por lo tanto, esta
herramienta no es la ideal para publicar páginas Web (a menos que esté trabajando
en un sitio de un grupo de MSN). Pero puede cargar y almacenar fácilmente los
documentos Web y otros archivos (incluidas las imágenes) mediante el Asistente
para publicación en Web en Windows. Es posible que desee usar esta
característica mientras crea documentos como medio de almacenamiento de
reserva o para compartir con otros los documentos en los que trabaja.
El Asistente para publicación en Web funciona de la misma forma que otros
asistentes: proporciona una serie de cuadros de diálogo que se deben completar
para cargar una carpeta o archivo o un proveedor de servicios en línea, como
MSN o Xdrive. Si se convierte en un diseñador Web “serio” y tiene su propio
espacio en el Web, rápidamente ansiará poder usar la mayor flexibilidad (y
simplicidad) que ofrecen las aplicaciones FTP y la herramienta de sitios de red.
De nuevo, el Asistente para publicación en Web puede constituir un medio
viable cuando llegue el momento de almacenar y compartir archivos así como,
posiblemente, publicar su primer sitio Web en MSN.
El Asistente para publicación La mejor forma de entender cómo funciona el Asistente para publicación en
en Web está disponible en la Web es seguir el proceso. Puesto que el proceso se sigue con los formularios
mayor parte de las versiones del asistente, no hay ningún motivo para mostrarle las páginas que puede ver en
de Windows; se agregó por
primera vez a Windows en
su equipo. Para tener acceso al asistente, complete los pasos siguientes:
la versión OSR2.5 de 1 Abra Mi PC y seleccione un archivo o carpeta que desee publicar
Windows 95.
en su espacio Web.
2 En la sección Tareas de archivo y carpeta, haga clic en Publicar
esta carpeta en Web (si ha seleccionado una carpeta) o en
Publicar este archivo en Web (si ha seleccionado un archivo).

228. 228
Para iniciar el asistente, haga clic en el botón Siguiente. A continuación,
prosiga a través de cada página y proporcione la información apropiada.
Cuando seleccione publicar una carpeta, el asistente presenta un cuadro de
diálogo en el que puede elegir los archivos que desee publicar activando o
desactivando las casillas de verificación, como se muestra en la figura 8-8.
Cuando haya completado todos los formularios del asistente, tendrá que hacer
clic en Finalizar para cargar sus archivos. Si tiene la información correcta, el
proceso debe llevarse a cabo sin problemas y la información recién agregada se
mostrará en el explorador de forma predeterminada.
Figura 8-8.
El Asistente para publicación en Web proporciona la oportunidad de elegir los
archivos que desee cargar dentro de una carpeta seleccionada.

229. 229
¡Pruébelo!
Seleccione un archivo o carpeta que desee cargar en el Web. A continuación,
siga el proceso del Asistente para publicación en Web para practicar la carga de
un archivo o carpeta en una carpeta personal de MSN.
Cuando coloque archivos en una carpeta personal de MSN, sólo podrá tener
acceso a ellos con su cuenta de .NET Passport. Si no tiene una cuenta de
Passport, el Asistente de .NET Passport le ayuda a crear una cuando publica un
archivo o carpeta en MSN. Después de publicar un archivo o carpeta, se agrega
un vínculo al recurso en la ventana Mis sitios de red. Asimismo, puede tener
acceso a los archivos y carpetas desde cualquier explorador Web de cualquier
equipo y puede agregar y eliminar archivos de su carpeta en línea (para tener
acceso al contenido de la carpeta, haga doble clic en el vínculo en la ventana
Mis sitios de red) de la misma forma que agrega y elimina los archivos y
carpetas locales.
Características de editores HTML e interfaces de ISP
Otros recursos para transferir archivos son las interfaces de los ISP y los
editores HTML. En esencia, estas herramientas son variaciones o híbridos
de aplicaciones FTP, la característica de sitios de red y el Asistente para
publicación en Web. Las ventanas principales de las características de los
ISP y de los editores HTML son que las herramientas suelen ser fácilmente
accesibles. Por ejemplo, algunos ISP ofrecen formularios que puede usar para
cargar los archivos desde su equipo al servidor. De hecho, el host de Creation
Guide proporciona un formulario, pero nos ha parecido complejo, por lo que
no lo usamos nunca para administrar los archivos del sitio. Si va a comprar un
servicio de alojamiento, investigue los servicios de administración de archivos
que ofrece. Nuestro servicio de alojamiento proporciona varias características
de calidad, por ejemplo, estadísticas de registro (como el seguimiento del
número de visitas a una página y la cantidad de visitantes) y mucho espacio,
de modo que pasamos por alto la característica algo insuficiente del
administrador de archivos porque sabíamos que podíamos conseguir unas
cuantas páginas a través de una aplicación FTP con bastante rapidez. En
nuestra opinión, si piensa usar una interfaz de transferencia de archivos de un
ISP, compruebe que la herramienta en línea sea al menos tan intuitiva como
una aplicación FTP o como el Asistente para publicación en Web.

230. 230
Igual que los formularios FTP en línea de un ISP, varios editores HTML,
incluido FrontPage, ofrecen características de carga de archivos automática
(como se explica en la lección 7). El uso de un editor HTML para cargar
archivos puede ser extremadamente útil. Lo principal es que debe conocer
exactamente los archivos que se cargan y dónde. Además, debe saber cuándo
reemplaza los archivos en línea existentes (lo que siempre es aconsejable
independientemente de cómo cargue los archivos); de lo contrario, es posible
que no pueda volver a usar una página anterior si decide que no desea
conservar las modificaciones más recientes. Como ilustración, si usa Internet
Explorer y tiene instalado FrontPage, puede visitar su sitio Web y hacer clic en
el botón Edición, en la barra de herramientas de Internet Explorer, para abrir
una versión local de su página Web en FrontPage. A continuación, puede hacer
modificaciones en la página y hacer clic en Guardar para guardar y cargar la
página modificada directamente en el servidor. Cuando haga esto, si no cambia
el nombre de la página recién modificada, la página existente se reemplaza con
la actualizada. Por lo tanto, generalmente reservamos esta característica para
correcciones sencillas, por ejemplo, en errores tipográficos o en la actualización
de fechas. Cuando modifique y guarde una página con la característica de
acceso en línea de FrontPage, sobrescribirá su documento HTML existente.
Debe tener esto en cuenta.
Sugerencia
Debe usar el comando Publicar Web de FrontPage para cargar inicialmente
las páginas Web que creó en esta utilidad. El uso de la herramienta de
publicación de FrontPage garantiza que las características de FrontPage
que se basan en Extensiones de servidor de FrontPage se implementen
correctamente. Incluso si no ha agregado ninguna capacidad avanzada a
sus páginas Web de FrontPage, le recomendamos encarecidamente que
use el comando Publicar Web para cargar su sitio Web, al menos la
primera vez.
Para aprender a usar los formularios de los ISP o las características de carga
de un editor HTML, remítase a los archivos de ayuda de la aplicación o a la
documentación publicada. Hay demasiadas variaciones entre los sistemas como
para proporcionar una descripción adecuada de cada procedimiento en esta
lección.

231. 231
Exploradores como clientes FTP
Para tener acceso a la Por último, puede usar exploradores como clientes FTP (dependiendo de la
característica de carga de configuración de su servidor Web). La mayor parte de las personas saben que
archivos de AOL, use la pueden descargar archivos desde la ventana de un explorador pero pocas conocen
palabra clave “myplace” o
“myftpspace”. Si va a crear
que también pueden cargar archivos y carpetas en algunos exploradores, incluido
una página en AOL, la Internet Explorer. Tenga en cuenta que su servicio de alojamiento debe admitir
dirección URL de su página esta característica; nos hemos encontrado que algunos sitios se ocupan de las
Web será members.aol.com/
cargas de los exploradores mejor que otros. Si su servicio de alojamiento
screenname/nombredearchivo
. funciona bien con esta característica, el método es sencillo: debe usar la barra
de direcciones para mostrar el contenido de la carpeta de su servidor y, después,
arrastrar los archivos desde las carpetas locales a las del servidor que se muestran
en la ventana del explorador. Asimismo, puede hacer clic con el botón secundario
del mouse en los archivos y carpetas en línea para tener acceso a un menú
contextual que le permita cambiar el nombre, mover y eliminar los archivos
en línea. Para mostrar sus carpetas en línea, debe especificar la información
siguiente en la barra de direcciones de Internet Explorer:
ftp://nombredeusuario:contraseña@ftp.dominio.com.
Por ejemplo, una entrada podría tener la apariencia siguiente:
ftp:// mmail:cafe2@ftp.microsoft.com o
ftp://mmail:cafe2@miembros.nombreISP.com.
Cuando aparezca el espacio en el servidor, abra la carpeta que contenga los
archivos de sus páginas Web y arrastre los archivos y carpetas a la ventana del
explorador para copiar los componentes de la página Web. En la figura 8-9 se
muestra el acceso FTP a una carpeta Web. Puede cargar, eliminar y cambiar el
nombre de los archivos Web dentro de Internet Explorer.
Figura 8-9.
Dependiendo de la configuración del servidor Web, en ocasiones puede usar
Internet Explorer para transferir y administrar archivos Web.

232. 232
En esta lección, introducimos varias herramientas que puede usar para transferir
los archivos locales de sus páginas Web a un servidor. Pruebe algunas opciones y
vea cuáles funcionan mejor en su caso. Puesto que existen numerosas variaciones
dentro de cada categoría, estaríamos emprendiendo una tarea poco realista si
intentáramos describir cada aspecto de todos los medios existentes para transferir
archivos a Internet. Lo mejor que puede hacer es elegir qué estilo de carga desea
intentar y probarlo a continuación. Si se le plantean dudas, visite los archivos de
ayuda de la aplicación o la documentación impresa (o envíenos un mensaje por
correo electrónico, si está realmente atascado). Si no le gusta algún proceso,
pruebe con otro. Confiamos en que, si recopila la información apropiada para la
conexión y la especifica correctamente, podrá conectarse a su espacio Web y
conseguir que sus páginas aparezcan en línea.
Revisión de su trabajo
Cuando haya cargado las páginas Web, lo primero que debe hacer es
explorarlas y comprobar la presentación de su sitio Web. Como explicamos en
las lecciones 6 y 7, debe obtener una vista previa de sus páginas Web en todo el
proceso de creación y aquí se considera la fase de carga del mismo. Por tanto,
compruebe sus páginas en “el mundo real”. Si ha tenido cuidado, no debería
encontrarse demasiadas sorpresas cuando ponga sus páginas en Internet. No
obstante, antes de empezar a llamar a sus amigos y dirigir a la gente a su sitio
Web (a menos que les pida que lo revisen), debe ver las páginas Web. Cuando
muestre la página principal, compruebe los detalles siguientes:
■ Compruebe que todas las imágenes se presentan de forma
adecuada. No desea que aparezca ningún marcador de imagen
errónea en su página.
■ Haga clic en sus vínculos para comprobar que funcionan, incluidos
los botones de la barra de exploración, los gráficos de los logotipos
vinculados, los vínculos de texto y los mapas de imágenes, si
aparecen en su página.
■ Compruebe si la página y sus elementos caben dentro de la
ventana estándar del explorador. Recuerde que los usuarios
consideran muy molesto tener que desplazarse a la izquierda y
la derecha para ver una página Web.
■ Complete y envíese un formulario de prueba a usted mismo si se
usan formularios en su sitio.
■ Lea el título de cada página y la barra de título para comprobar su
precisión.
■ Compruebe que el texto y los vínculos de texto son fáciles de leer
en comparación con los fondos de las páginas Web.

233. 233
Básicamente, tómese tiempo para examinar su sitio. Haga clic en todas partes,
pruebe cada elemento interactivo y emplee su ojo crítico. Es mejor tomarse un
poco más de tiempo comprobando su trabajo después de cargar una página que
un visitante le envíe un mensaje para decirle que su sitio Web es poco útil
porque no se ve bien o no responde como debía.
La última tarea posterior a la fase de creación que abarcamos en esta lección
es comunicar que su sitio Web existe. La forma más común de empezar a
publicitar un sitio es comprobar que los motores y directorios de búsqueda
ya pueden reconocer su página Web.
Puntos clave
■ Puede usar aplicaciones FTP para copiar archivos desde su equipo
a un servidor.
■ Puede transferir archivos y carpetas mediante aplicaciones FTP,
sitios de red y carpetas Web, el Asistente para publicación en Web,
formularios en línea de ISP, editores HTML y exploradores, como
Internet Explorer.
■ Si su servidor admite sitios de red, puede usar la característica
Mis sitios de red para cargar y tratar con facilidad sus archivos y
carpetas de su sitio Web del mismo modo que administra las
carpetas locales.
■ Al cargar archivos Web en un servidor, conserve la estructura de
archivos y carpetas de su sitio Web, incluyendo los parámetros
exactos de denominación y organizativos de los archivos y
carpetas del equipo local.
■ Cuando haya cargado páginas Web, véalas siempre en línea
para comprobar si contienen errores o vínculos erróneos.
■ Para publicitar su sitio Web, regístrese en motores de búsqueda.
■ Considere agregar etiquetas META a sus documentos HTML para
controlar en cierta medida la forma en que los motores de
búsqueda clasifican el sitio.
■ Finalmente, deje que los demás sepan que su sitio está activo,
mediante el boca a boca y a través de otros canales de
comunicación típicos, ¡y comience el intercambio de información
en línea!