Diseño Web Contenido

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

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

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

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.

Aprende a realizar tareas de la vida real. Los conceptos se presentan e ilustran con ejemplos de muchas situaciones de la vida real. de forma que entienda lo que aprenderá. Con cada curso se ofrecen archivos de ejemplo. lo que le ayuda a captar la información más importante y a preparar las habilidades de aprendizaje. En todo el texto de la lección encontrará información adicional que le permite profundizar más en un tema. Cada tutorial incluye numerosas ilustraciones que le guían por el proceso de aprendizaje. Importante. Notas. Cada lección empieza con unos objetivos de aprendizaje en viñetas. aprende algo más que simplemente las características del software. La mayoría de las lecciones terminan con 4 ó 5 ejercicios prácticos de dificultad creciente. Los tutoriales paso a paso son el eje central de cada lección. los títulos de las lecciones y las situaciones de ejemplo elegidas para los archivos de prácticas. El enfoque basado en tareas está imbricado en toda la serie. incluyendo la organización de lecciones dentro de cada unidad. y desafían al alumno a entender y aplicar lo aprendido. de forma que pueda aumentar su productividad inmediatamente utilizando la tecnología. Los objetivos de aprendizaje se tratan de manera coherente y constituyen la estructura de las lecciones. Al estudiar con un enfoque basado en tareas. Este enfoque le permite ver rápidamente la importancia del aprendizaje. así como comentarios acerca de lo que está aprendiendo. Los tutoriales prácticos construyen de forma experta sus conocimientos paso a paso. Las notas especiales ofrecen precauciones o instrucciones especiales. Características especiales ■ Objetivos de aprendizaje. métodos abreviados y posibles problemas. Cada objetivo especifica una tarea determinada que podrá realizar cuando complete la lección. la tecnología se explica claramente y los ejercicios prácticos le permiten empezar a aplicar inmediatamente lo que sabe. Sugerencias. ■ ■ ■ ■ . Establecen claramente los objetivos de enseñanza para cada lección. Tutoriales paso a paso. En toda la lección se incluyen sugerencias útiles y formas alternativas de realizar las tareas que le ofrecen información adicional. Los pasos numerados contienen instrucciones detalladas paso a paso que le ayudan a aprender. Las lecciones se basan en tareas que puede encontrar en el mundo laboral cotidiano.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 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. los archivos gráficos y los archivos HTML necesarios para crear un sitio Web atractivo. Ejercicio corto. 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. Apéndices. 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. al pedirle que explique cómo realizar ciertas tareas. Resumen de conceptos. Archivos de prácticas. Muchos de estos ejercicios se basan unos en otros para ofrecer un conjunto creciente de desafíos que ponen a prueba sus conocimientos. Conceptos básicos de diseño Web incluye todos los ingredientes para crear varios sitios Web con FrontPage: los archivos de texto. Por ejemplo. En cada lección se explica cuándo y cómo utilizar los archivos de prácticas para esa lección. Esta evaluación al final de la lección va más allá de una simple recapitulación de lo aprendido. Estas notas al margen de algunos de los cursos ofrecen definiciones de términos técnicos.6 ■ Barras laterales. ¡Pruébelo! Estas barras laterales especiales de algunos cursos ofrecen minitutoriales rápidos para comprobar sus conocimientos. Los objetivos para el examen de especialista en Microsoft Office de cada curso se enumeran en un apéndice al final del libro. Las barras laterales de algunos de los cursos contienen temas parentéticos. como momentos interesantes en la historia de la informática. 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. Jerga. 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. Estos ejercicios incluidos al final de cada lección le permiten practicar la aplicación de lo aprendido a proyectos del mundo real. ■ ■ ■ ■ ■ ■ ■ 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. Los ejercicios cortos incluidos al final de cada lección evalúan lo que ha aprendido y cómo podría aplicarlo. información adicional o explicaciones más extensas.

bajo la carpeta Unlimited Potential de la unidad C: . y sus series de libros Step by Step y Faster Smarter. Los instructores. Su instructor le explicará cómo ir a los archivos del curso que va a realizar. IntelliMouse u otro dispositivo señalador compatible. Al menos 58 MB de espacio disponible en disco (después de instalar Microsoft Office XP). Dependiendo del curso concreto que vaya a realizar. los archivos se almacenarán en la carpeta Practice de cada curso. 128 MB de RAM como mínimo. . Los archivos de cada curso se encuentran en las carpetas del curso correspondiente.7 El instructor instalará todos los archivos de prácticas en la unidad de disco duro de cada equipo. 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. especialistas de diseño educativo. Un monitor con resolución Super VGA (800 x 600) o superior con 256 colores. Una unidad de CD-ROM. ■ ■ ■ ■ ■ ■ ■ Un equipo personal que ejecute Microsoft Office XP con un procesador Pentium a 133 megahercios (MHz) o superior. 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. además de 8 MB de RAM adicionales para cada programa de Office que se ejecute simultáneamente. Sistema operativo Windows XP. 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. Un mouse (ratón). se recomienda un monitor de 15 pulgadas como mínimo.

Los libros de Microsoft Press pueden adquirirse en librerías y distribuidores de todo el mundo. Visite nuestro sitio Web en www.microsoft. 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. Para obtener más información acerca de las ediciones internacionales. publicado por Microsoft Press.com/mspress para obtener más información acerca de estos libros y los autores que los crearon.8 Parte del material de este curso se ha adaptado de Faster Smarter Web Page Creation. 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. Existe una versión más completa de este material en las ediciones impresas originales de estos libros.

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

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

Las preguntas de Ejercicio corto. . con respuestas breves.11 Error: Reference source not found 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 conocimientos de una forma nueva. le plantean preguntas sobre los conceptos expuestos en la lección.

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

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

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

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

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

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

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

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

Figura 1-5.com/afs) (en inglés). Un archivo de texto HTML y dos archivos gráficos se combinan para crear la página principal de Arizona Film Society (www.20 Figura 1-4. 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. .creationguide.

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

sino en servidores. Esta enumeración de componentes es un buen comienzo. páginas Web. otras áreas de la misma página u otros recursos de Internet. Antes de que nos adentremos demasiado hondo en los entresijos de la transferencia de páginas Web. Podemos asegurarle que las páginas Web no se almacenan en los equipos personales.22 Figura 1-6. De su cabeza al Web (y de vuelta otra vez) En este punto de la lección. Los hipervínculos llevan a quien está viendo la página Web a otras páginas Web. exploradores. todos los componentes están sobre la mesa: Internet. La afirmación anterior no es verdad. 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. el Web. . hipervínculos y sitios Web. vamos a desenmascarar un mito sorprendentemente popular: las personas que ven sus páginas Web tienen acceso a su equipo de escritorio.

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

Ya no se encogerá cuando oiga expresiones como HTML y nombre de dominio. Con estos recursos. 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. Aunque el diseño de páginas Web es un proceso creativo. los colores. hemos sacado algunas conclusiones básicas acerca del texto. cuando todo esté dicho y hecho. Por lo tanto. o que al menos las ojee. le recomendamos encarecidamente que lea las lecciones 2 a 5 antes de sumergirse en las lecciones 6 a 8. nos gustaría informarle de lo que va a encontrar en las siguientes lecciones. y además de en idear el diseño de la página. está preparado para seguir avanzando en el diseño y la implementación de páginas Web. programas útiles y planeamiento de páginas Web. si la utiliza bien. Para finalizar. sus futuros trabajos de diseño Web serán más fructíferos. los gráficos. ingenieros y especialistas de la información han realizado. vamos repasando unos cuantos principios básicos que ayudarán a hacer el proceso de creación de páginas Web más sencillo. los gráficos y los colores que se usan en el Web y que hemos probado en la práctica. 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. En el curso de este libro. incluidas cuestiones relacionadas con el texto. Encontrará las siguientes lecciones repletas de información importante relativa a la creación de páginas Web. 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. Por lo tanto. con independencia de la forma en que desmigaje este libro y emprenda su trabajo en el Web. Tiene que emplear al menos algo de tiempo en pensar en el contenido.24 Con esto concluye nuestro repaso de conceptos básicos. tanto el texto como los gráficos. Con todo. como se describe en las siguientes páginas de este libro. cuando complete estas lecciones. recuerde repasar la lección 8. no es una magia negra desprovista de estructura. Pero antes de terminar esta lección. 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). Avanzando a un ritmo regular Como podría sospechar. . En este momento. las lecciones 2 a 5 tratan de la información que debería conocer acerca del diseño de páginas Web. habrá dominado los fundamentos de la creación de páginas Web de diversas formas.

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

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

Como promedio. En otras palabras.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. Por lo tanto. 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. la mayor parte de los visitantes de una página Web determinan en 10 segundos si contiene la información que desean o necesitan. Los expertos de ahora debaten sobre si la velocidad de lectura en línea ha aumentado debido a la mejora en los monitores. tenga este concepto al frente de sus procesos mentales. En los primeros estudios sobre esta materia. Sin reparar en los porcentajes exactos. en comparación con la lectura en papel. al uso del color o a la familiaridad cada vez más generalizada con este tipo de textos. describimos diversos métodos que puede emplear para mejorar la facilidad con que se pueden ojear sus páginas Web. en la cantidad de tiempo que emplea leyendo 75 palabras en línea. En esta lección. . la mayor parte siguen viéndola menos de 30 segundos. 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. Básicamente. probablemente se irá a otra página (o a otro sitio). ya que sus ideas principales son más fáciles de identificar. Si una página Web no atrae a un usuario con rapidez (en los siguientes 10 segundos. Si parece que satisface sus necesidades. siempre que cree contenido para una página Web. según la mayoría de estudios de uso. un usuario ojea una página Web para encontrar un elemento de interés que le anime a hacer clic en un vínculo o a copiar el contenido y leerlo con más detenimiento. al tiempo que aumentan sus posibilidades de clasificarse antes en los motores de búsqueda. La creación de páginas que se pueden ojear con facilidad también incrementa la credibilidad de la página Web. la mayoría de expertos coincide en que la velocidad de lectura de las personas se reduce significativamente cuando leen texto en línea. podría leer 100 si estuvieran en un libro. incluso aunque se está produciendo una mejora en muchos casos.

28 Para ilustrar el concepto de ojear. 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. Figura 2-1. mientras que la figura 2-2 sigue el consejo comentado en esta lección. compare las figuras 2-1 y 2-2. 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. . A continuación se explica el porqué y se ofrecen indicaciones que puede tener en cuenta al crear su propio texto en línea. 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.

vamos a echar un breve vistazo a las funciones fundamentales que desempeña el texto en una página Web.29 Figura 2-2. con lo que los lectores pueden encontrar la información que precisan más fácilmente. A continuación. 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. discutiremos los detalles relativos a la forma y eficacia del texto en línea. . Una presentación efectiva del texto de una página Web hace posible que se ojee con más rapidez.

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

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

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

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

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

Algunas personas desactivan la presentación de gráficos para acelerar la exploración. contenido. ■ 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. logotipos. Puntos clave ■ Los usuarios ojean las páginas Web en lugar de leerlas linealmente. ■ Use fuentes admitidas en la mayor parte de las plataformas y que sean fáciles de leer. . nos gustaría sugerir que se divierta con el contenido de su página Web. formatos. ■ Incluya los datos importantes (como la información de contacto. Arial Narrow. ■ Evite la letra pequeñita.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. Piense lo que desea decir con exactitud y escriba entonces su mensaje tan clara y enérgicamente como sea posible. opciones de exploración. Courier New. estará bien encaminado. las fuentes más compatibles con los equipos Apple Macintosh y los basados en Windows son Arial. elementos gráficos de texto. hipervínculos. etcétera) como texto. Comic Sans. deje que los usuarios definan el tamaño de texto con la configuración predeterminada de su explorador. ■ 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. menús. 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. Una vez que comience a escribir frases concisas y directas. Actualmente. incluso si la información aparece en forma de gráfico en algún otro lugar de la página. lo que significa que pierden la información gráfica de la página. Times New Roman y Verdana. ■ Asegúrese de que los fondos no interfieren con la legibilidad del texto. ■ Los títulos. ■ El texto de una página Web atrae la atención de los usuarios antes que los gráficos. el nombre de su compañía. 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. El Web le concede la libertad de comunicar la información de manera rápida y creativa en formas nuevas. creaciones de WordArt. si duda.

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

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

los puntos se combinan para crear una imagen. cuadrados ni píxeles. introducido por el pintor francés Georges Seurat (1859–1891).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. los gráficos en línea requieren que considere las limitaciones del color y el formato y tamaño de los archivos. En cierto modo. 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. paletas y colores Jerga: un píxel es un cuadrado de una red de cientos de cuadrados que se colorea individualmente para crear una imagen. dividen las imágenes en cuadrados coloreados. El Puntillismo. intervienen varios factores específicos de este medio. cada gráfico en línea consta de una serie de pequeños cuadrados coloreados que se entremezclan para formar una imagen. los gráficos en línea simulan una técnica de pintura denominada Puntillismo. es el arte de crear imágenes a base de puntos (o pequeños trazos del pincel). además de posibles cuestiones relacionadas con la transparencia. cuando se crean y utilizan imágenes en el Web. Esta figura podría ser cualquier gráfico que se muestre en su pantalla. Por lo tanto. Como sabe. en lugar en puntos pintados. el gráfico parece similar a muchas otras imágenes en línea (o impresas. Los equipos informáticos muestran las imágenes con una técnica similar al Puntillismo. 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. Píxeles. recopilación y creación de gráficos Web. en este caso) y no hay signos obvios de puntos. tenga en cuenta que realmente necesita leerla para asegurarse de entender unos cuantos conceptos clave relativos a los gráficos Web. . A medida que se aleja de la pintura. A través del Puntillismo. la descarga y la animación. Cuando mira de cerca una pintura puntillista. Por ejemplo. Antes que nada. puede ver cada punto. Seurat dividía cada imagen del lienzo en pequeños puntos de colores. denominados píxeles. eche un vistazo a las cerezas de la figura 3-1. tipos de archivo y tamaño de archivo). éstos parecen bastante similares a los impresos pero. En concreto. Como puede ver. Cuando tome conciencia de los tres factores principales (colores. excepto en que. Comencemos examinando el modo en que los gráficos muestran el color.

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

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

Algunos gráficos Web (en concreto los guardados con el formato de archivo GIF. en el gráfico de las cerezas se usan 8 colores mientras que en el de las guindillas se utilizan 128. Una paleta GIF puede contener hasta 256 colores pero algunas imágenes usan menos.41 Jerga: una paleta contiene el conjunto de colores usados en un gráfico. según se describe en la sección siguiente) usan una colección limitada de colores. Una paleta es. 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). podemos hablar un poco sobre paletas. si examina la figura 3-3. Por ejemplo. simplemente. La paleta del gráfico de las cerezas contiene 8 colores y la de las guindillas contiene 128. 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. la tabla de colores usados en un gráfico. Figura 3-3. Ahora que conoce los píxeles. .

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

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

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 Internet rápida, por ejemplo un módem por cable, probablemente no verá los efectos del entrelazado.

■ Gráficos GIF entrelazados Normalmente, una imagen GIF aparece en la pantalla fila por fila, de arriba a bajo, como si se desplegara una persiana. Si lo desea, como diseñador de la página Web puede cambiar la forma en que un gráfico GIF se descarga en 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

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 gráfico GIF coincide con el de la página Web, por ejemplo en una imagen con un fondo blanco con una página Web también con el fondo blanco, se consigue automáticamente la ilusión de transparencia.

Al crear un GIF transparente, básicamente se especifica un color único en la imagen para que actúe como el color transparente. Por ejemplo, podría colorear el fondo de una imagen en rosa fuerte y asignar a continuación este color como color transparente de la imagen; pero debe asegurarse de que el rosa fuerte no aparezca en ningún otro lugar en ella o creará puntos transparentes que no desea. Cuando un explorador encuentra el color transparente, no 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

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 referencia al modelo de puntos aleatorio que resulta cuando los colores se intentan igualar mezclando otros similares disponibles en una paleta limitada.

Como sabe, todos los sistemas informáticos no se crean igual. Muchas personas tardan bastante en seguir el vertiginoso ritmo que experimenta el desarrollo de hardware en el sector informático. Por lo tanto, cuando diseñe páginas Web, debería tener en mente que no todas las personas podrán tener acceso a sus páginas si éstas requieren el hardware de pantalla más fantástico y novedoso. 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

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
Jerga: JPEG (Joint Photographic Experts Group) es un formato de archivo gráfico usado para mostrar imágenes de calidad fotográfica y otras imágenes en color en Internet. El formato de archivo JPEG puede admitir millones de colores.

Además de los gráficos GIF, sus páginas Web probablemente incluyan imágenes JPEG. El formato de archivo de imagen JPEG fue creado por Joint Photographic Experts Group y adoptó su nombre. Este formato de imagen admite millones de colores y pueden utilizarlo los exploradores casi de forma universal. (Técnicamente hablando, las imágenes JPEG admiten colores de 24 bits, por lo que también se conocen como imágenes a todo color o de color verdadero.) Dado que los archivos JPEG pueden contener millones de colores, con frecuencia muestran imágenes fotográficas en línea. 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 se muestra en un sistema que sólo admite color de 8 bits (256 colores), el explorador reduce los colores de la imagen para usar los de la paleta Web y se produce cierta interpolación.

■ Progresivo Cuando guarda una imagen como archivo JPEG progresivo, la imagen aparece primero de forma borrosa y, después, se enfoca a medida que se descargan los datos de la misma (igual que los archivos GIF entrelazados). Con las rápidas velocidades de conexión a Internet, el procesamiento progresivo podría no ser evidente para los usuarios enseguida; en cambio, 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.

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

después. decidió hacer cumplir la patente para dicho algoritmo. el formato de archivo PNG se ideó porque Unisys. 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). quizás tampoco deba usar archivos PNG en sus páginas Web. El tercer y último tipo de gráfico que trataremos en esta lección es el formato de archivo PNG. siga estos pasos: 1 2 3 Abra la imagen JPEG en Photoshop. el fabricante del algoritmo de compresión de GIF. Al igual que los archivos GIF. haga clic en OK (Aceptar) y. lo que significa que los proveedores de software tenían que pagar para usarlo. Inicialmente. respectivamente). 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. 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. 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. Por lo tanto. pero sólo los exploradores más recientes permiten usarlos. que significa gráfico portátil de red. se cargan con rapidez y admiten la transparencia. PNG son las siglas en inglés de Portable Network Graphics. los archivos PNG son pequeños. Desde la perspectiva de un desarrollador.49 4 Especifique una opción de codificación (Standard o Progressive. Los archivos PNG se transmiten más rápido que los GIF. estándar o progresiva. 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. Especifique un nombre de archivo y haga clic en Save (Guardar). Para configurar las opciones de JPEG en Photoshop. Se abre el cuadro de diálogo JPEG Options (Opciones de JPEG). es igual de fácil de usar y se reconoce en casi todos los exploradores (con independencia de la versión). . Elija Save (Guardar) en el menú File (Archivo). Gráficos PNG Jerga: PNG (Portable Network Graphics) es un formato de archivo gráfico diseñado para reemplazar a las imágenes GIF en Internet. Por ello. 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. haga clic en Save (Guardar). Pero en realidad no necesita conocer los detalles del debate entre PNG y GIF. seleccione una opción de compresión.

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

Figura 3-9. Una vez creadas algunas imágenes con varios tamaños.jpg de la carpeta Lesson03. a continuación. Use la imagen Use the apples. 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. Guarde la imagen JPEG y. correspondiente a este curso. Cambiar el amaño de las imágenes por el real en Paint Shop Pro ayuda a reducir el tiempo de descarga. véalas de forma local en la ventana del explorador. en el disco duro. abra una imagen JPEG en un editor de gráficos y cambie la configuración de ancho o alto de la misma.jpg para una imagen cuyo tamaño se haya cambiado a 400 píxeles de ancho). cambiando el nombre de cada versión por otro único y significativo (como apples400a.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. ¡Pruébelo! Para experimentar con el cambio de tamaño de las imágenes. repita el proceso varias veces con diversas medidas. es decir. .

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

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

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

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

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. podría intentar conseguir una cámara de 1 megapíxel como mínimo. Si piensa practicar la fotografía en condiciones verdaderamente extremas. 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. la cámaras digitales y los monitores. ¿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. recuerde que las cámaras digitales son. pero si desea poder usarlas en línea y en copias impresas. examine algunos de los modelos “impermeables”. independientemente de cómo y cuándo obtenga los gráficos para las páginas Web.56 Jerga: un megapíxel hace referencia a un millón de píxeles y es un término usado en relación a la resolución de dispositivos gráficos. Para finalizar. si puede elegir. ■ Formato de los archivos Por último. 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. • Características Las características de una cámara digital son numerosas pero. compruebe que elige una cámara que resista una tormenta. compruebe que disponga tanto de automáticas como manuales. como último consejo de esta lección. PCs de mano. si compra la cámara sólo con el fin de obtener imágenes para el Web. . Probablemente desee usar las opciones automáticas al principio para llegar a dominar la fotografía digital. Además. preferiblemente de 2 ó 3 megapíxeles. Si va a tomar imágenes en toda clase de circunstancias y condiciones. Además. básicamente. Después. Finalmente. puede empezar a experimentar con las configuraciones manuales. si es usted principiante. puede apañarse con una de 1 megapíxel o menos. cuando se encuentre cómodo usando la cámara. 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. recuerde optimizar las imágenes y guardarlas como archivos GIF y JPEG. como los escáneres.

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

podrá:  Saber lo que va a necesitar para mostrar páginas Web en línea. 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. Debe estar conectado a Internet o tener acceso a una conexión a la gran red si desea demostrar su presencia en línea. almacena archivos de páginas Web y responde a las solicitudes de los usuarios para ver las páginas Web almacenadas. puede copiar los archivos de las páginas Web desde un equipo a un servidor que esté conectado a Internet. probablemente más. Sugerencia Si usa su equipo para explorar el Web. nuestro interés recae en la serie de programas que puede usar para crear. 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.58 LECCIÓN 4 Acopio de utensilios Una vez completada esta lección. Para comenzar. . una impresora y una cámara (digital o estándar). Cuando cree páginas Web. vivirá en el anonimato virtual si no puede conectarse a Internet y transferir sus archivos a un servidor. al menos deberá tener un par de herramientas de creación de páginas Web. acceso a un escáner.  Elegir software para crear. puede crear. Conexión a Internet y espacio en un servidor No importa lo asombrosa que sea su página Web. modificar y publicar páginas Web con diversas aplicaciones y herramientas software. Con una conexión a Internet de acceso telefónico estándar.  Buscar espacio para un sitio Web en un servidor en Internet. Como le mostramos en las siguientes lecciones. posiblemente.  Probar las páginas Web en varios exploradores. En esta lección. y encontramos que las armas que preferimos se mezclan y coinciden con frecuencia. modificar y tratar páginas Web. 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. 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. conocer sus opciones le ayudará a crear el entorno de trabajo que mejor se adapte a sus necesidades y estilo personal. puede tener la certeza de que dispone de una conexión a Internet. modificar y tratar las páginas Web. Igualmente.

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

com (en inglés). que técnicamente no es tal.100best-free-web-space. puede crear una página Acerca de mí en eBay (un sitio de subastas en línea que se encuentra en www. 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). Al explorar Internet. debe volver a visitar la cláusula acerca del “espacio gratuito en el servidor” de su contrato con el ISP. revise el sitio Web 100 Best Free Web Services en www. qué bien!” y pasó al siguiente detalle. O bien. se le recompensará con un montón de sitios que le permiten alojar sus páginas. si es uno de los participantes registrados en el sitio. es el que obtiene de su ISP. En este sitio se proporcionan exámenes y clasificaciones de sitios. es probable que no supiera lo que eso significaba así que simplemente pensó: “¡Oh. 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. puede encontrar que algunos sitios Web ofrecen espacio gratuito a los miembros registrados. no podemos etiquetar exactamente el espacio en los servidores del ISP como gratuito. es más bien un espacio disponible con prepago.com). otra forma gratuita de conseguir un espacio en el Web es crear páginas específicas de un sitio. Cuando se suscribió a su ISP actual (suponiendo que tenga alguno). ¡Pruébelo! Para buscar espacio gratuito en el Web. lo que lo convierte en un gran recurso para localizar y examinar servicios de alojamiento de sitios Web (o hosts). Por ejemplo.ebay.60 De forma similar al uso de los grupos y comunidades en línea. escriba free Web space (o espacio gratuito en el Web) en cualquier motor de búsqueda. En ese momento. Ahora que está pensando en crear una página Web. Y otro tipo de espacio en el Web en línea “gratuito”.es. 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!”. . 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.

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

com. 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. Elegir y registrar un nombre de dominio Web es sencillo. Puede encontrar numerosos servicios de alojamiento en línea. 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. incluida una lista mensual de los 25 mejores. se le informará si está disponible.html (en inglés). Independientemente de cómo lleve a cabo la búsqueda de espacio para su sitio Web. si dispone de Extensiones de servidor de Microsoft FrontPage (si utiliza características de FrontPage) y la confiabilidad. puede visitar www. no deje que determinen su decisión. la configuración de la red. se establece un contrato de pago (normalmente.com/resources (en inglés) para buscar vínculos a los servicios de alojamiento Web y registradores de nombres de dominio. una vez que tiene acceso a un sitio de registro legítimo.com/resources. como hemos mencionado hace un momento. en inglés. podrá elegir un nombre (como creationguide. queremos decir un precio cercano a lo que cuesta una buena comida o un poco más.62 Cuando esté listo para obtener su propio nombre de dominio. examine unos cuantos sitios de registro para revisar sus listas de precios y directivas (o visite www. visite www. Mientras visita el sitio de InterNIC. visite http://hostindex. como son las cuotas. si no completó este paso durante el proceso de registro de su dominio (según se describe en la sección precedente). recuerde comprobar algunas cuestiones clave. Para finalizar. Como promedio.internic. Búsqueda de espacio para un dominio Si no utiliza su propio servidor. por lo general puede escribir el nombre de dominio propuesto en un cuadro de texto. Para ver una lista oficial de registradores de nombres de dominio. es decir.creationguide. registrarlo a su nombre a cambio de una cuota nominal anual. ver si está disponible y. A menos que las tarifas le parezcan monstruosas. Cuando haya encontrado un sitio que le guste. Muchos sitios de alojamiento también ofrecen servicios de registro de nombres (como explicamos en la sección siguiente). y le dirigiremos a un par de nuestros servicios de alojamiento Web favoritos).com (en inglés). 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). 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. si lo está. Si es así. aunque podemos decirle ahora mismo que ya lo tiene algún otro). .net/alpha. Por nominal. 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. un extenso sitio dedicado a proporcionar información acerca de numerosos aspectos de los servicios de alojamiento Web. Entonces. mejor aún.creationguide. Afortunadamente.

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

Sin embargo. puede configurar entre 5 y 20 cuentas de correo electrónico con un único contrato de alojamiento Web. En esta lección. gracias a la popularidad en auge del Web. Otras características que podría investigar incluyen el costo de agregar espacio al sitio.com o jc@creationguide.com). al final le dejamos a usted la responsabilidad de elegir los paquetes de software con los que se sienta más cómodo.64 ■ Extras Es posible que desee comprobar qué “extras” ofrece cada compañía para atraer clientes. echaremos un vistazo a las aplicaciones de software que puede usar en su sistema para crear. modificar y publicar páginas Web. Herramientas de creación de páginas Web En esta sección. si visitan su sitio más personas de lo previsto. Para simplificar nuestro enfoque de esta lección. el costo de aumentar la cuota de tráfico. Ahora que ha estudiado su nombre de dominio. damos una idea general de los tipos de herramientas que podría necesitar para crear páginas Web. Por ejemplo. muchos servicios de alojamiento Web proporcionan cuentas de correo electrónico que puede usar con su nombre de dominio (como mm@creationguide. y si se dispone de servicios complementarios. 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. y sus elementos. como la adición de grupos de charla y características de búsqueda. Como podría imaginar. En la sección siguiente. 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 . Generalmente. si éste crece demasiado como para caber en su espacio asignado originalmente. enumeramos algunas que encontramos de utilidad y le señalamos el camino para hallar otras que se adapten mejor a sus necesidades. muchos proveedores de software se han puesto manos a la obra para producir programas de creación de páginas Web. si se admite el uso de Extensiones de servidor de FrontPage (si utiliza FrontPage) y de la transmisión de multimedia. 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.

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

Por ejemplo. la codificación a mano puede mantener el código ordenado y fácil de leer. Muchos diseñadores Web acuden al Bloc de notas cuando codifican a mano documentos HTML. Por ejemplo.66 Figura 4-1. Además. . 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. si desea actualizar la fecha de copyright de su sitio. 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. algunos editores WYSIWIG crean código “confuso”. La respuesta varía pero. en su mayor parte. con independencia de cómo se creara inicialmente. ■ 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. puede que desee utilizar dos saltos de línea en blanco pero un editor WYSIWYG podría insertar un marcador de párrafo. Puede que se pregunte por qué los diseñadores Web optarían por codificar manualmente las páginas Web. y su alineación se puede configurar según las preferencias del diseñador.

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. Necesitará tener acceso a otros recursos si desea conocer de verdad HTML. 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.barebones. En la lección 6. 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. buscar.com/products/bbedit. pueden codificar mal las páginas. . el tamaño importa y cuanto más pequeño mejor. aprender HTML es un requisito primordial para crear páginas en un procesador de texto.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. a veces. En estos casos.) Sin embargo. También puede encontrar páginas y páginas de información en línea.html) (en inglés) Este editor HTML de Bare Bones Software es popular entre los desarrolladores Web de Macintosh. Y recuerde: en el Web. edición en ventanas divididas. transformar y tratar texto. (No se preocupe: puede hacerlo. ■ Precisión Otro hábito de los editores HTML avanzados es que. puede limpiar al código extra y reducir el tamaño de los archivos HTML. ■ HomeSite (www. 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. 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. esa lección sólo es una introducción. (Hemos hecho una lista de algunas referencias de HTML al final de la lección 6. Puede descargar una versión de prueba de 30 días para examinar el producto. Si sabe cómo crear y modificar código HTML estándar.) 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. incluye características de inspección de etiquetas HTML. puesto que los editores HTML sólo están diseñados por personas. 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. Por supuesto. Al igual que otros editores HTML. Si le interesa aprender HTML o tener cerca una referencia de este lenguaje. hemos proporcionado una breve descripción de algunos de los más usados en este momento: ■ BBEdit (www. BBEdit permite modificar. encontrará una generosa colección de libros sobre dicho tema ocupando las estanterías de las librerías de su ciudad. Además. mapas de imágenes y algunas otras funcionalidades.macromedia. Por ejemplo. Como ayuda para ilustrar la variedad. usan etiquetas HTML que no todos los exploradores admiten. en ocasiones.

Aunque esta aplicación está diseñada para usuarios algo avanzados. . si desea deshacer varias acciones. sirve como otra versión reforzada del Bloc de notas. A continuación.ultraedit. ■ UltraEdit (www. típico de muchos procesadores de texto.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.textpad. ■ NoteTab (www. La figura 4-2 muestra un documento HTML en WordPad. Un inconveniente. no podrá usar el Bloc de notas.com) (en inglés) Este programa. de Fookes Software. mientras trabaja puede ver un menú de etiquetas HTML junto con las fichas de los documentos. Una vez descargada e instalada la aplicación. queremos decir). ■ TextPad (www. TextPad permite deshacer varias acciones. En TextPad. puede insertar código HTML haciendo doble clic en los elementos de menús y. selecciona Programas y Accesorios. 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. y después hace clic en WordPad. sin embargo: si trabaja en un documento muy largo. 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. puede mostrar utilidades HTML en el lateral izquierdo del panel de la ventana en la barra de clips. Este programa ofrece más características de procesamiento de textos que el Bloc de notas y admite documentos más largos. creado por Helios Software Solutions. tendrá que restaurar la información manualmente. puede abrir WordPad si hace clic en Inicio. En los documentos más largos. Este programa incluye varias características que pueden simplificar la codificación a mano de páginas Web. es el Bloc de notas con esteroides (fortalecido. es que el programa gratuito de prueba sólo permite deshacer una operación. cerrar la ventana Help para activar el programa. Si utiliza Windows.com) (en inglés) El procesador de textos NoteTab. Tenga cuidado. debe hacer clic en About UltraEdit (Acerca de UltraEdit) en el menú Help (Ayuda) y. incluye características que podrían venirle bien. Por ejemplo. tendrá que usar WordPad (que se describe más adelante en esta lista). ■ WordPad Este programa es un paso más allá del Bloc de notas. como los programadores. por ejemplo. Por ejemplo. después.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. lo que resulta práctico cuando se juega con HTML.notetab.

Word crea automáticamente el código fuente HTML. sólo aconsejamos una aplicación de esta categoría: Microsoft Word versión 2002. Podríamos llamar a los procesadores de texto de grado medio “aplicaciones WYSIWYG ligeras” porque ofrecen características de procesador de texto junto con una serie limitada de capacidades avanzadas de los editores HTML. Al igual que 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. . permiten guardar los documentos como páginas Web.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. como Microsoft Excel y Microsoft PowerPoint. En la figura 4-3 se ilustra un documento HTML en las vistas Diseño Web y Código fuente HTML. Dado que la mayor parte de las aplicaciones son procesadores de texto o editores HTML completos. Se abre un documento del Bloc de notas que muestra una versión de texto del código HTML de la página. Cuando guarda un documento de Word como página Web. Procesadores de texto y editores HTML de grado medio El siguiente escalafón en los editores HTML empieza a entrar en el territorio de WYSIWYG. ¡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). otros programas de Office XP (versión 2002).

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

si nos pregunta. 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. Explore la página principal de Sausage Software y encontrará otras herramientas útiles de creación de páginas Web.html) (en inglés) Nota Además de HotDog Professional. 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. Dreamweaver probablemente sea el editor Web más popular (aunque el más difícil de aprender) entre los profesionales de diseño. también se incluye con el conjunto de programas Microsoft Office 2000 XP Developer ■ NetObjects Fusion MX (www.com/spain/Office/frontpage/default.microsoft. . un cambio rápido en el Bloc de notas nos será más útil. por diversas razones. como es el hecho de que mantiene el código escrito a mano. pero otras veces. Después de todo. denominado HotDog PageWiz. al cambiar el tamaño de las tablas). y un editor HTML para niños mayores de seis años.71 ■ Microsoft FrontPage 2002 (www. denominado HotDog Junior. Además.asp). Por otro lado. Sausage Software ofrece un editor HTML WYSIWYG para principiantes. Como hemos mencionado anteriormente. 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. es popular entre los usuarios empresariales. es más rápido usar una aplicación WYSIWYG avanzada (en especial. Nota Tenga en cuenta que el entorno de creación de una página Web no es fijo. se hará una idea de cómo crear páginas Web en FrontPage en la lección 7.netobjects. En ocasiones. Entre las aplicaciones anteriores.com/products/html/nfmx.

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

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

Java. En el panel de Galería de imágenes. Las tres . Las animaciones pueden llegar a resultar molestas. Nuestro fin es lograr que consiga crear y utilizar páginas Web. busque un elemento de la galería y haga doble clic en alguna imagen que muestre una estrella dorada. Aunque nos fascinan tanto estos temas como las técnicas de diseño de páginas Web básicas. Programas de animación de gráficos GIF. Si tiene ganas de adquirir algunas mañas adicionales para la elaboración de sus páginas. 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. 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. después. haga clic en Galería de imágenes. debería insertar los componentes animados con moderación. nos guardaremos los caprichos para otro curso.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. lo que quitaría mérito a su página en lugar de aportarle encanto. Para insertar un GIF animado: 1 2 Abra Word (u otra aplicación de Office). elija Imagen y. la creación de estos elementos no es uno de los objetivos de estas lecciones. abra el menú Archivo y haga clic en Vista previa de páginas Web. Por lo tanto. Además. le sugerimos que empiece por aprender a crear GIF animados. etcétera. 3 Si sigue nuestra sugerencia anterior. Además. mapas de imágenes y pancartas. de mapas de imágenes. Flash. puede crear archivos de audio y vídeo para usarlos en el Web. Para ver una animación en acción. muestre el menú Insertar. 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. 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.

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

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

■ Como consecuencia de las diferencias en la fuente y el espaciado.77 En la figura 4-5. . 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. ■ El tamaño de fuente predeterminado es más pequeño en PCs que en equipos Macintosh tanto en Internet Explorer como en Navigator. encima del final de la página Web aparecen cantidades variables de información. tanto en los equipos Macintosh como en los basados en PC. Al ver la misma página Web en varios exploradores. puede ver las anomalías siguientes: ■ Las viñetas predeterminadas de Netscape Navigator son mayores. 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. ■ El espacio de los márgenes (o desplazamiento) alrededor de los perímetros de la página varía en cada explorador. lo que puede afectar al modo en que se muestra y se ajusta el texto. que las de Internet Explorer. ■ El ancho de las ventanas de los exploradores difiere. se demuestran las pequeñas anomalías que surgen en las páginas cuando se ven en línea. Figura 4-5.

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. Para la mayor parte de los diseñadores.info.mozilla. conjuntamente. En el Web existen varios exploradores. sería mejor que se asegurara de si ve bien en él. Puede ser aconsejable descargar otros exploradores para ver cómo se muestran sus páginas en ellos.org) (en inglés). Sin embargo.isc.com) (en inglés). 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. pero puede ver que sigue habiendo ligeras diferencias que escapan del control del diseñador. Si sabe que los visitantes de su sitio van a usar el explorador Opera. .org/current) (en inglés). siempre debe considerar su audiencia. ■ 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).aol. con asegurarse de que las páginas se muestran de modo correcto en los más importantes (Internet Explorer y Navigator) es suficiente. 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.com/download). Obtener una vista previa de las páginas Web simplemente implica mostrar los archivos HTML en la ventana del explorador de forma local. (en inglés). ■ Lynx es un explorador de texto (lynx.78 Diseñamos la página Arts Camps for Kids para que funcionara bien tanto en Internet Explorer como en Navigator. estos dos exploradores suman más del 90 por ciento de todos los exploradores que tienen acceso a Internet. Puede que desee o no comprobar que sus páginas se muestran como deben en todos ellos. si es posible. Desde luego. así que el proceso es rápido y sencillo. Para contribuir a aumentar sus conocimientos. ■ Opera es una pequeña aplicación que exhibe un tiempo de descarga extremadamente bajo (www.opera. pero el público general puede usar el explorador también (www.

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

En las lecciones 6 a 8. Conoce todos los elementos que tiene que considerar.  Crear un a plano técnico de un sitio Web. pararse a pensar un poco antes de actuar puede ahorrarle más de un dolor de cabeza. si alguna vez se impresiona ante las tareas de definir los objetivos de un sitio Web. diseñar un marco de trabajo o crear sus propias páginas Web. tendrá que dirigir sus propias sesiones de planeamiento. identificar su audiencia. tendrá que dedicar también algo de tiempo a planearlo. En las lecciones 1 a 5. podrá:  Definir los objetivos de un sitio Web. resumimos el proceso de planeamiento que hemos completado antes de crear la página real. Finalmente. Por lo tanto. 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. . Como probablemente habrá oído a lo largo de su vida. hemos cubierto numerosos conceptos básicos del diseño Web. vamos a guiarle en el proceso de planeamiento de un sitio Web. En cada sitio Web que le presentamos en estas lecciones. diseñamos esta lección para ofrecer una idea general de cada fase de planeamiento sucintamente y con un formato que facilite la referencia. Si va a personalizar alguno de los sitios Web que hemos incluido como ejemplos.  Analizar la audiencia. En las lecciones 6 a 8 incluimos asimismo una breve sección acerca del planeamiento.  Diseñar una página principal y prepararse para crear un sitio.80 LECCIÓN 5 Plan de ataque Una vez completada esta lección. Ahora que le desbordan los conocimientos acerca del Web. Esperamos que vea esta lección como un puente entre la teoría y la práctica en relación al Web. retome este curso y vuelva a esta lección para ayudarle a poner en marcha sus procesos de pensamiento. 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. en las lecciones 6 a 8. obtenidos en las lecciones 1 a 4. 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. 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). una vez haya asimilado todos los conocimientos de este curso (y tenemos toda la confianza en que lo hará). En el futuro. ahora es simplemente cuestión de consolidar la información en algunos puntos y listas de comprobación que debe revisar.

en inglés. En las secciones siguientes.com/cshoppe) (en inglés). de esta tienda (www.81 Como apoyo para ilustrar el proceso de planeamiento.creationguide. Tiene que considerar claramente la finalidad del sitio y sus objetivos. primero debe abordar el proyecto desde una perspectiva más amplia. 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. En la figura 5-1 se muestra la versión final de la página Web. En concreto. Figura 5-1. 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. 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? . vamos a observar la evolución del sitio Web de Curiosity Shoppe.

82 Para el sitio de Curiosity Shoppe. 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. ■ ¿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. tendrá que considerar quién va a visitar sus páginas Web. En primer lugar. Como ayuda para analizar los destinatarios de su sitio. haga que sus páginas sean pequeñas y el diseño bastante sencillo. Tiene la idea. ¿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. Sus objetivos inmediatos eran informar a la gente acerca de la tienda. las respuestas a las cuestiones precedentes eran bastante sencillas. 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. Por ejemplo. Considere la posibilidad de entrevistarles o realizar una encuesta a las personas que vayan a ver sus páginas. 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. y una gama completa de productos en línea debía estar disponible en los siguientes 12 meses desde dicha fecha. Por ejemplo. ¿Diseña un sitio para jóvenes? Los colores brillantes funcionan bien. La mejor forma de llegar a conocerlos es hablar con ellos. debe pensar en los destinatarios o público pretendido. proporcionar un medio de contacto y anunciar sus productos y ubicación. si es posible. llame a sus familiares y averigüe lo que les gustaría ver en él. cuando sea necesario. ¿Son usuarios Web típicos que usan conexiones de acceso telefónico? Si es así. Es muy probable que sus objetivos y su escala de tiempo sean menos complejos que los de Curiosity Shoppe. En otras palabras. considere la forma en que los usuarios se conectarán a la página. responda a las cuestiones siguientes: ■ ¿Quiénes conforman el núcleo del publico previsto? Su respuesta podría incluir categorías como clientes. Por último. si está creando un sitio para la familia. la característica de venta debía ser totalmente funcional 6 meses después de poner en el Web la página principal. publicarlo en el Web durante un mes y agregar actualizaciones ocasionalmente. miembros de una familia. Debe tener al menos cierta percepción de las personas que desea que visiten su espacio Web. 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. Además. . puede que lo que pretenda sea simplemente crear un currículum. miembros de un club y muchos más. alumnos. empresarios. Llegar a conocer al público Cuando haya definido los objetivos de su sitio. almas gemelas.

un sitio de David Bowie podría tener una audiencia internacional. 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. que se correspondería con un sitio Web con un enfoque nacional o internacional. Sin embargo. 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. . Por ejemplo. ■ ¿Dónde se encuentra su público principal? Tendrá que determinar si las personas visitan su sitio mientras están en el trabajo. en el barrio o en cualquier otro lugar. se cansarán de esperar a que los elementos grandes se descarguen. mientras que un sitio de vigilancia de bloques de pisos probablemente se destinaría al barrio. la ubicación puede entrar en el juego si está diseñando un sitio regional en lugar de uno nacional. que se correspondería con un sitio Web orientado a una localidad. Por ejemplo. tendrá más probabilidad de hacerse una idea acertada de los tipos de conexiones que usarán en el acceso al sitio.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. en comparación con la sección local. guarde los diseños y esquemas de exploración vanguardistas para un público más avanzado. dispondrá de más libertad para incluir clips de vídeo y numerosos gráficos con un riesgo mínimo de perder a alguno. Además. en la sala de estar de su casa. 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. en la universidad. en la oficina. exploradores casuales del Web o campeones del ciberespacio. Esta especificación tiene una estrecha relación con la cuestión precedente: si sabe dónde se encuentra la audiencia clave. si dedica el sitio a usuarios novatos. en un cibercafé. comprensiblemente. aunque los más experimentados pueden comprender con frecuencia “lo que está ocurriendo” en sitios complejos o con un diseño exclusivo. Conocer el grado de pericia de los usuarios es fundamental porque. 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. Por ejemplo. por lo general los principiantes requieren algo más de orientación. debería hacer un esfuerzo por identificar de forma clara y coherente su estructura con elementos sencillos de exploración. ■ ¿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. incluidos los tipos de elementos que incorporará.

. Finalmente. Así sabrá mejor cómo anunciar y hacer propaganda de su sitio. Sugerencia Después de haber entrevistado. Además. 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. a través de vínculos de una página “primaria”. 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. en directorios en línea. el argot y los coloquialismos) de forma acertada. Por ejemplo. los parámetros de edad ayudan a elegir las palabras (particularmente. la información de edad permite crear metáforas significativas. 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. como resultado de una consulta en un motor de búsqueda. encuestado y hablado con la gente. 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. Esta cuestión se deriva del sentido común: tanto si le gusta como si no. escuchado sus comentarios. Asimismo. etcétera.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. ■ ¿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. los detalles de la edad pueden ayudar a determinar los tipos de información que se incluirá en las páginas Web. si está creando un sitio para jóvenes. Por ejemplo. gracias a anuncios comerciales pagados en TV o radio. en directorios Web impresos o libretas de teléfonos. 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.

. como son: ■ ■ ■ ■ ■ ■ ■ Alfabéticamente Cronológicamente Gráficamente Jerárquicamente Numéricamente Aleatoriamente (no se recomienda. básicamente el sitio está formado en su totalidad por archivos. Si es posible. así que su organización debe incluir la sistematización de los mismos. estará preparado para diseñar el marco del sitio Web. 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. puede ayudarle a organizar el sitio en conjunto de una manera lógica. Un sitio jerárquico presenta una página principal que contiene un texto pegadizo de introducción a sus páginas principales. 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). 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. La organización del contenido. Por ejemplo. el primer paso que siempre debe dar es recopilar el contenido antes de llevar a cabo el diseño. que tendrá tiempo de implementar más adelante pero sobre las que puede meditar ahora. 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). o al menos de sus conceptos principales. pero ahí está) Por temas La mayor parte de los sitios se organizan de forma jerárquica. puede organizar el sitio de diversas maneras. debe averiguar la mejor forma de presentar la información. Después de todo.85 Esquematización de los planos técnicos del sitio Una vez establecidos sus objetivos y definido su público.

Este directorio suele almacenarse dentro del principal. Puede proporcionar cualquier nombre para este directorio cuando diseñe sus páginas en el equipo local. un sitio Web consta de varias páginas Web (que a su vez están formadas por diversos archivos). que se muestra en la figura 5-2: ■ Directorio principal Contiene archivos HTML y un directorio de imágenes. Al cargar las páginas en un servicio de alojamiento de sitios Web (host). (En las lecciones 6 y 7. 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. Figura 5-2. un sitio Web normal está formado por la siguiente estructura simple. ■ Directorio de imágenes Contiene los archivos de imágenes GIF y JPEG (o JPG) que se usan en las páginas Web. 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. Asimismo.86 Mantenga controlados los archivos Como ya sabe. . Los directorios y archivos del sitio Web se almacenan de forma local antes de copiarlos a un servidor conectado a Internet. las páginas Web suelen constar de algunos archivos que se combinan para crear la apariencia de una sola página. 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. explicamos cómo hemos organizado los archivos de cada sitio.

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

y una letra escrita en mayúsculas al azar puede perder a más de un visitante. Asimismo. Una imagen p_ es una verdadera imagen (p.88 ■ Use un carácter de subrayado (_) para indicar un espacio Algunos servidores antiguos no reconocen los espacios. tendrá que designar los archivos de imágenes. debe entender que la organización desempeña un papel importante en el planeamiento de un sitio 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. Por lo tanto. son básicamente las páginas Web y gráficos de los sitios Web). lo que nos ayuda a identificarlos y encontrarlos con rapidez cuando los necesitamos. sino que las páginas HTML hacen referencia a estos archivos cada vez que necesitan mostrarlos. Por ejemplo. ■ Use todas las letras en minúsculas De nuevo. . de nuevo. Por ejemplo. Asignación de nombre para las imágenes Además de asignar nombre a los archivos HTML. los usuarios no tienen acceso a los archivos de imágenes directamente. t_contactos especifica que la imagen es la barra de título usada en la página Contactos. piense en la “facilidad de uso” para los visitantes del sitio Web. Los nombres de archivo con todas las letras en minúsculas son fáciles de escribir y de recordar. así que debe usar guiones bajos para indicar los espacios en blanco. p_máscara indica que el archivo es la imagen de una máscara. En concreto. En los nombres de archivo de las direcciones URL se distinguen mayúsculas y minúsculas. Por lo general. 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). Y una imagen t_ hace referencia a una barra de título. tiene una cierta libertad de acción en lo que respecta a la denominación de las imágenes. Debe ordenar sus pensamientos y empezar a considerar cómo sistematizar los archivos (que. en inglés). Una imagen b_ es un botón. b_ o t_. Por ejemplo. b_productos indica que la imagen es la barra de exploración del botón Productos. de picture. En este momento. 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. anteponemos el nombre de las imágenes con p_.

la identidad de su empresa. 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. El esquema de la página de Curiosity Shoppe muestra los nombres de archivo usados dentro del sitio inicial. si es apropiado. podría agregar notas como “La página contact. Por ejemplo.89 Cuando haya solventado dichas cuestiones. debe preparar un esquema de la estructura del sitio. o mientras tanto. Aborde cada una de las tareas y cuestiones enumeradas. La figura 5-3 muestra uno de los esquemas iniciales de Curiosity Shoppe. 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. En otras palabras. y averigüe cómo puede hacer que su sitio sea único. en el esquema de la figura 5-3. 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. ■ Compruebe que el sitio especifica quién es usted y. Figura 5-3. .html contiene un vínculo de correo electrónico y un mapa que muestra la ubicación de la tienda”. 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.

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

¡Pruébelo! Rápidamente. piense en tres sitios que haya visitado hace poco. cuando se esbozan la página principal y las subpáginas. ■ Determine formas que le permitan crear una apariencia o tema uniforme en todo el sitio. debe tener una idea muy concisa de lo que la página principal debe incluir: el logotipo. 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 ejemplo. etcétera. Sobre todo. 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. debe haberse preocupado por la faceta práctica del diseño de páginas. sus jugos creativos consiguen hacerse paso mientras su sinapsis organizativa descansa y rejuvenece. o un salón de chat. sabe lo que le gusta cuando explora el Web. la barra de título y vínculos a las páginas más importantes del sitio. ■ Incluya al menos un elemento que invite a los usuarios a volver. En este momento. No olvide incluir un logotipo y usar vínculos de exploración coherentes en cada página. les sugerimos el tema del mapa del tesoro y el logotipo N-S-E-W “C”. por determinar la estructura de la asignación de nombres de archivo. optimice su tema y obtenga de los usuarios la respuesta “emocional” apropiada. el análisis de su público. entre otros elementos. En esta fase de diseño. puede limpiar la pizarra y empezar a diseñar su página principal y sus subpáginas. 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. por ejemplo. Por lo tanto. por ejemplo. 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). .91 ■ Analice la información y haga que la más importante sea la más obvia y accesible. ¿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. un componente que se actualice diaria o semanalmente. Ahora analice por qué y la forma en que esos tres sitios le han causado impresión. En este momento. la determinación de las limitaciones de hardware.

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

como un escudo familiar o un código de departamento . 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. 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. (Somos tan astutos como para eso. los colores. Si omite algunos a propósito. asegúrese de saber el porqué. de hecho.) 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. la lista está ordenada alfabéticamente para evitar que ninguno prevalezca sobre los demás.93 Figura 5-5. la disposición. las fuentes u otros elementos ■ Hay un logotipo u otro gráfico identificativo. Tenga en cuenta que no se clasifica la importancia de los elementos por el orden.

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. debe reunir los elementos enumerados en la siguiente lista de comprobación. falta un componente final del planeamiento: reunir las herramientas y utensilios que necesita. 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. Por suerte. En esta fase también debe asegurarse de que todo el texto está bien escrito y corregido. podemos describir el proceso de un modo bastante sucinto. 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.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. así que debe planearlo apropiadamente. su página principal no debe serlo. evite sobrecargarla. Acopio de utensilios y preparación Después de haber especificado sus objetivos. 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. antes de crear su página Web. 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). 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. organizado su sitio y diseñado la composición de su página principal. Básicamente. conocido a su audiencia. Como puede ver. aunque esta fase suele ser la más larga. Por todos los medios. .

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

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

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

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

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

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

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

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

que se anidan dentro de las etiquetas de identificación de documento (<HTML>). muestran la frase sabor a mantequilla en cursiva (<I></I>) y dan formato a la palabra palomitas en negrita (<B></B>). podría verla con formato en un explorador. En este ejemplo. En los documentos HTML. La regla podría parecer un poco confusa. las etiquetas HTML de apertura y de cierre no se deben cruzar. Esta disposición resultaría en un texto en negrita dentro de un párrafo dentro de un documento HTML. el anidamiento no tiene nada que ver con ramitas y plumas sino con el orden en que aparecen las etiquetas HTML. 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. 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 la frase de las palomitas. . 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>). 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>). La frase también ilustra un concepto interesante denominado anidamiento. Si la pregunta se incluye en un documento HTML. Básicamente. como se muestra aquí. veamos un ejemplo de texto que usa pares de etiquetas HTML. Éste es un modelo correcto: <HTML> <P> <B> </B> </P> </HTML> En este ejemplo. de modo que veamos un ejemplo. 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. las etiquetas de negrita (<B>) se anidan dentro de las de párrafo (<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.103 Para mejorar la ilustración.

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

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

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

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

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. Como ilustración. 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.html). debería guardar religiosamente sus páginas Web y verlas a menudo en un explorador durante el proceso de desarrollo. puede almacenar todos sus documentos HTML en la carpeta principal y colocar los gráficos en la carpeta de imágenes. 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. Tendrá el archivo HTML de la página principal (que a veces se denomina index. Debe mantener los archivos y carpetas del sitio Web organizados de una forma sencilla aunque lógica. que muestra los documentos HTML y las imágenes necesarios para crear el sitio del proyecto de esta lección. .108 Tratamiento de documentos HTML y gráficos Web Cuando crea páginas Web. index. tiene que idear un esquema organizativo para no volverse loco después. antes de empezar la fase de creación. A continuación.html. vea la figura 6-5. 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. Mantener organizados los archivos es un imperativo cuando se agregan gráficos y se crean hipervínculos. cree una subcarpeta para las imágenes. suele trabajar con varios archivos. dentro de la carpeta principal.htm o índice. Figura 6-5. Además de observar una minuciosa organización. Además. Le recomendamos que cree una carpeta para contener todos los archivos HTML usados en el sitio Web y que.

Al crear las páginas Web. en especial si realiza la codificación HTML a mano. Ello simplemente conlleva mirar el documento HTML en uno o dos exploradores. ■ Abra el explorador (por ejemplo. 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. . 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. 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. 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. puede apreciar el formato que se da al contenido con HTML y puede solucionar los problemas de presentación en un primer momento. ■ Abra el explorador. puede guardar los archivos y verlos más a menudo de lo que sugerimos. la frase “No podemos creer que hayamos perdido todos los datos” no es inusual. en especial si se toma un descanso mientras los está creando.109 Guardar y ver los documentos HTML “¡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. frente a tener que examinar el texto y la versión del código HTML del documento en un procesador de textos. Con frecuencia.) Además de guardar a menudo sus archivos. Internet Explorer) y escriba la ubicación del archivo HTML. Para obtener una vista previa de una página Web en un explorador. Al realizar este ejercicio. de modo que le recomendamos guardar sin reservas su trabajo frecuentemente. Sin embargo. guardar. Según nuestra propia experiencia. debe guardarlas y obtener una vista previa de las mismas sin reparos. debe obtener una vista previa de las páginas Web que cree varias veces a lo largo del proceso de creación. le sugerimos algunos puntos concretos en los que debería guardar el sitio Web del proyecto y verlo en un explorador. guardar!” debería ser una de sus máximas cuando trabaje con un equipo informático.

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

durante el proceso de diseño. 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. . 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. El dibujo muestra la composición básica del diseño de la página principal del sitio de música.111 Figura 6-7. Después. 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.

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

.gif para abrir un mensaje de correo electrónico con una dirección predeterminada cuando deseen enviar un mensaje a Chris Soll.113 ■ bg. ■ sendnote. t_background. que muestra la palabra Antecedentes y se coloca al principio de la página que ofrece información acerca de Chris Soll. No usará el archivo picture.gif Especifica el gráfico de fondo. ■ t_xxx Especifica que la imagen es un gráfico de pancarta para la barra de título. que se utiliza en la parte inferior de las páginas del sitio. Cuando cree sus propias páginas Web y gráficos Web. La imagen picture. pero podría tener unas cuantas versiones del mismo.gif Identifica el gráfico como una imagen de pie de página en movimiento. de modo que sólo se requiere un archivo bg. ■ footer.gif. ■ p_xxx Especifica que el gráfico es una imagen. Figura 6-9. 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. 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. Se usa el mismo gráfico de fondo en todo el sitio de música.gif Identifica el gráfico como el icono de “enviar mensaje de correo electrónico”.gif Identifica el gráfico del logotipo. ■ logo. En el sitio de música sólo hay una fotografía.gif es el gráfico de la pancarta de la barra de título de la página Antecedentes. en especial. probablemente preferirá idear su propio esquema de denominación. Por ejemplo. que se encuentra en la página principal. Posteriormente. si utilizara una versión más pequeña o modificada en las subpáginas. 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. como se ilustra en la figura 6-9. En todo el sitio de música se usa el mismo gráfico de logotipo. vinculará este icono en el sitio de música de manera que los usuarios puedan hacer clic en el gráfico sendnote.gif es un gráfico marcador de posición usado en la plantilla que se explica más adelante en la lección.gif en el sitio de música.

con la excepción de la etiqueta <!DOCTYPE.> <HTML></HTML> <HEAD></HEAD> <TITLE></TITLE> <BODY></BODY> Observe que. tendrá que crear un documento HTML que contenga las etiquetas estándar que aparecen en todos los documentos HTML. . según se describe en el procedimiento siguiente. Cuando haya escrito las etiquetas HTML estándar en un documento de texto. Figura 6-10. anteriormente en esta lección): ■ ■ ■ ■ ■ <!DOCTYPE. Para empezar el proceso de creación. Este documento contiene las etiquetas HTML estándar con algo de texto incluido entre las etiquetas <TITLE>.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. Las etiquetas estándar son las siguientes (vea la tabla 6-1. 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..... tendrá que guardar el documento de texto como documento HTML. las etiquetas estándar vienen en parejas.>.

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

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

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

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 su documento HTML no se muestran en la vista previa en el explorador, haga clic en el botón Actualizar para actualizar la vista.

3

Guarde su documento HTML, abra el explorador y vea el archivo index.html en la ventana del explorador. (No tiene que cerrar el documento de texto, pero debe asegurarse de que ha guardado los cambios más recientes.) El archivo index.html debe mostrar la 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

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:\music\index.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 (*.*). 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

2

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 a la figura 6-12 mientras trabaja en todo el proceso de creación de la tabla.

■ CELLSPACING especifica la cantidad de espacio (en píxeles) entre celdas. En el sitio de música, no necesitamos especificar ningún espacio entre las celdas, de forma que establecimos a "0" el valor del atributo.

120

3 4

Escriba <TR> para comenzar con la primera fila de la tabla. 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.) Presione Entrar dos veces, presione la tecla Tab y escriba </TD> para marcar el final de la primera celda en la primera fila. Presione Entrar dos veces, presione la tecla Tab y escriba <TD VALIGN="top"> para crear la segunda celda de la primera fila. Presione Entrar dos veces, presione la tecla Tab y escriba </TD> para marcar el final de la segunda celda en la primera fila. Presione Entrar y escriba </TR> para completar la primera fila de la tabla. 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). 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. Cuando haya especificado la tercera fila de la tabla, presione Entrar y escriba </TABLE> para completar sus etiquetas.

5 6 7 8 9

10

11

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

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. 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. Guarde su documento HTML. El código HTML debería ser similar al de la figura 6-12.

2

3

Ahora que tiene una tabla, puede incluir contenido en ella. Lo primero que debe hacer es insertar el logotipo en la esquina superior izquierda.

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

idealmente. Con la excepción del atributo SRC. debe hacerlo en el programa de edición de imágenes y no mediante los atributos WIDTH y HEIGHT del documento HTML. presione Entrar. haga clic después de la etiqueta <TD VALIGN="top" WIDTH="170">. si cambia el tamaño de la imagen (por ejemplo.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.123 2 En la primera celda de la primera fila. Su código se puede escribir como se muestra en las figuras de referencia de HTML del proyecto incluidas en esta lección. que señala a la imagen del logotipo: <IMG SRC="images/logo. De forma predeterminada. Nuestros ejemplos de texto tenían que acortarse para caber en el diseño de las páginas del curso. ■ BORDER especifica el grosor del borde alrededor de la imagen. por lo que no necesitará hacerlo en el documento HTML para que coincida con los ejemplos del texto. los diseñadores cambian el valor predeterminado estableciendo el atributo BORDER como "0". 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. 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. ■ WIDTH y HEIGHT especifican el ancho y alto de la imagen. se muestra un borde de 1 píxel alrededor de los gráficos que se han configurado como hipervínculos. . Tenga en cuenta que. Por lo general. 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. presione Tab y escriba la siguiente etiqueta HTML. si la amplía o la reduce). ■ ALT permite proporcionar texto descriptivo que aparece cuando el cursor se coloca sobre el área de la imagen.

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

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

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

se muestra la versión negra del botón Página principal y cuando visita otra página del sitio.gif" ALT="Página principal" WIDTH="170" HEIGHT="24" BORDER="0"></A> 4 Escriba <BR><BR> para agregar dos líneas vacías. de modo que sabe cómo usar la etiqueta <IMG>. dicho botón se presenta en color rojo oscuro. Ya ha incluido el logotipo y el gráfico de la pancarta. Colocará la barra de exploración en la primera columna de la segunda fila de la tabla. 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. presione Entrar y presione Tab. por lo que debe tomar nota de los nombres de archivo proporcionados en las etiquetas de delimitación.) 3 Presione Entrar. 2 En los siguientes pasos.html. necesita agregar siete botones. con lo que se mostrará en el lateral izquierdo de la página. En total. Después de la segunda etiqueta <TR>. Por ejemplo. Ahora puede introducir el vínculo y el gráfico del siguiente botón. No ha creado las subpáginas aún. Los nombres de archivo de las subpáginas tendrán que coincidir con los de las referencias de los delimitadores. 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. presione Entrar. (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. 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. Además. presione Tab y escriba lo siguiente: <A HREF="index. . siga estos pasos: 1 Si es necesario. con lo que ya le resultan conocidas las etiquetas de delimitación <A></A>.html"><IMG SRC="images/b_home2. siempre que un usuario visita la página principal. 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. haga clic en la primera etiqueta <TD VALIGN="top">. Comenzará agregando la versión de la página actual del botón Página principal. ha vinculado el logotipo.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. abra el procesador de texto y el archivo index.

128 Sugerencia Puede escribir varias veces el código HTML con varias referencias de archivos HREF.gif" ALT="Concursos" WIDTH="170" HEIGHT="24" BORDER="0"></A><BR><BR> 8 Presione Entrar. puede reemplazar las referencias de archivo HREF. presione Tab y escriba: <A HREF="recitals. 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.html"><IMG SRC="images/b_contact. 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 Chris.html"><IMG SRC="images/b_performances. nombres de archivo SRC e información ALT. como se muestra en la figura 6-16. presione Tab y escriba: <A HREF="competitions.gif" ALT="Recitales" WIDTH="170" HEIGHT="24" BORDER="0"></A><BR><BR> 7 Presione Entrar. presione Tab y escriba: <A HREF="contact.html"><IMG SRC="images/b_competitions. y pegarlo en la celda de la tabla seis veces. presione Tab y escriba: <A HREF="performances. .gif" ALT="Antecedentes" WIDTH="170" HEIGHT="24" BORDER="0"></A><BR><BR> 10 Presione Entrar.html"><IMG SRC="images/b_recitals.gif" ALT="Actuaciones" WIDTH="170" HEIGHT="24" BORDER="0"></A><BR><BR> 9 Presione Entrar. presione Tab y escriba: <A HREF="background. o puede copiar el código que escribió en los pasos 3 y 4.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.html"><IMG SRC="images/b_background. A continuación. los nombres de archivo SRC y las definiciones de texto ALT en cada entrada.

html. 12 Inserte el icono Envíenos una nota y escriba el texto siguiente para cerrar la referencia de delimitación: <IMG SRC="images/sendnote. presione Tab y escriba <A HREF="mailto:mm@creationguide. . Su código HTML debería ser similar al mostrado en la figura 6-16. como se explica a continuación. Figura 6-16.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.129 Cuando crea un vínculo de correo electrónico. 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. El código HTML de la barra de exploración se inserta en una celda de la tabla.gif" ALT="Correo electrónico para Chris" WIDTH="170" HEIGHT="77" BORDER="0"></A> 13 Guarde el archivo index.com"> pero reemplace mm@creationguide. usa un formato de HREF especial en la etiqueta de delimitación.

html en el explorador. 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. .130 14 Abra el archivo index. Inserción de la información del pie de página Si necesita más ayuda. A continuación. como se muestra en la figura 6-17. vínculos de texto que se corresponden con los vínculos de la barra de exploración y texto de copyright. 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. Haga clic en el logotipo y en el botón Página principal para comprobar que la página principal se vuelve a mostrar.) Pase con el cursor sobre cada botón para comprobar que el texto ALT es correcto en cada caso. vea la figura 6-18 cuando inserte la información del pie de página del sitio Web. tiene que agregar la información del pie de página. El pie de página del sitio de música incluye un gráfico de pie de página. 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. se producirá un error porque aún no ha creado esas páginas. información de la dirección y el número de teléfono. Su página principal debe incluir ahora una barra de exploración en la parte izquierda. (Al hacer clic en cualquier otro botón de la barra de exploración. Figura 6-17.

Puesto que va a incluir otra información debajo del gráfico del pie de página.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. debe seguir un procedimiento similar al de creación de vínculos gráficos. La etiqueta </P> de cierre es opcional pero.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. debe centrar el párrafo que contiene los vínculos de texto. como se muestra en los pasos siguientes. De forma predeterminada. 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. 5 Presione Entrar dos veces. 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. escriba <P ALIGN="CENTER"> para indicar el inicio de un párrafo y especificar que su contenido se alinee al centro. presione Tab y. abra el procesador de texto y el archivo index. después. 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). inserte la etiqueta de imagen con los atributos siguientes: 3 <IMG SRC="images/footer. podrá seguir explorando su sitio. . Para agregar vínculos de texto. se clarifica el código. Especifique la información de la imagen del pie de página. presione Entrar.html. si algún usuario tiene los gráficos desactivados. Después. los párrafos se alinean a la izquierda. Ahora. inserta un salto de página y muestra el número de teléfono debajo de la dirección en la línea siguiente. 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. de esa forma. haga clic después de la segunda etiqueta <TD VALIGN="top">. Primero. Al agregar la etiqueta <BR>. insertará un segundo párrafo que centre la información de la dirección y el número de teléfono. En la tercera fila de la tabla. si se agrega. La diferencia entre ambas tareas es que debe encerrar el texto entre vínculos de delimitación en lugar de en una etiqueta IMG. para ello. Vamos a empezar a crear el elemento de pie de página insertando el gráfico de pie de página: 1 2 Si es necesario.

presione Tab y escriba: <A HREF="competitions. Elegimos dar formato a los vínculos de texto del modo descrito para que trabajar con la información resultara más fácil. El símbolo es opcional pero se usa bastante.html">Lecciones</A> | 9 Presione Entrar. presione Tab y escriba: <A HREF="recitals. Observe también la barra vertical (|). presione Tab y escriba lo siguiente: <A HREF="index.html">Página principal</A> | En el vínculo anterior.html">Antecedentes</A> | 13 Presione Entrar. Recuerde reemplazar mm@creationguide. presione Tab y escriba <P ALIGN="CENTER">. 14 Presione Entrar. presione Tab y escriba: .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.html">Concursos<A> | 11 Presione Entrar. 8 Presione Entrar.html">Actuaciones</A> | 12 Presione Entrar. 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. se visualizará el archivo index. Si los usuarios hacen clic en las palabras Página principal.html. las palabras Página principal se mostrarán como hipertexto en la página Web. presione Tab y escriba: <A HREF="lessons. este vínculo de texto usa el componente mailto: en el atributo HREF.132 6 7 Presione Entrar dos veces. Presione Entrar. Ahora está preparado para agregar el resto de los vínculos de texto. Por lo tanto. presione Tab y escriba: <A HREF="performances.com con su dirección de correo electrónico en el paso siguiente. presione Tab y escriba: <A HREF="contact. Los exploradores mostrarán los vínculos en una fila independientemente del espacio que agregue en el documento HTML. presione Tab y escriba: <A HREF="background.html">Recitales</A> | 10 Presione Entrar. Este símbolo se escribe entre cada vínculo de texto para facilitar su diferenciació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. los símbolos de marca registrada y otros.133 <A HREF="mailto:mm@creationguide. en las páginas Web. El componente final del pie de página es la información de copyright.html en el explorador. presione Tab y escriba </P>. presione Entrar. la información de pie de página se agrega a la última celda de la tabla. Su código HTML debería ser similar al mostrado en la figura 6-18. presione Tab y escriba: <P ALIGN="CENTER">&copy 2002 Chris Soll.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. En esta sección. Figura 6-18. Abra el archivo index. como los acentos. 16 Presione Entrar dos veces. 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.html.com">Correo electrónico para Chris</A> 15 Para completar el párrafo del vínculo de texto. El pie de página del archivo index. Todos los derechos reservados</P> 17 18 Guarde el archivo index. En el sitio de música.

html competitions.html (en cuyo proceso de creación se encuentra inmerso) lessons. En concreto.html contact.html del sitio de música.html performances. según se describe en la sección siguiente. ya haya adivinado que necesitamos crear algunas páginas para vincularlas a la barra de exploración y a los vínculos de texto.html background.html . Copiar el marco de trabajo de la página principal para las subpáginas Probablemente. puede utilizar el archivo index. Puede que se haya cuenta de que ha diseñado todo lo que aparece en la página principal excepto el contenido básico.134 Figura 6-19. en el sitio de música se llama a las páginas siguientes: ■ ■ ■ ■ ■ ■ ■ index. 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.html recitals. 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 para crear rápidamente las páginas básicas en las subpáginas.

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

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
El uso de una página de base rellenada para crear las subpáginas es un procedimiento rápido y favorece la coherencia en el sitio.

Guarde el archivo lessons.html.

En este momento ha completado el documento básico para la página Lecciones. ¡No ha sido tan difícil! Para comprobar la página, haga doble clic en lessons.html con el objeto de ver la página en un explorador. Si todo parece correcto (como se muestra en la figura 6-22), ya puede continuar. El siguiente paso es repetir el breve proceso de personalización en los documentos del resto de las subpáginas.

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 11 Guarde el archivo recitals.html. 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 13 Guarde el archivo competitions.html. 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

■ 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 15 Guarde el archivo performances.html. 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 16 Guarde el archivo background.html. 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

17 18

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

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

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

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

144 4 Presione Entrar dos veces.Vincent Vanngo</I></P> Presione Entrar. que se asocia con la cita especificada en el paso 3. se inserta un nombre en cursiva. presione Tab y escriba </BLOCKQUOTE></BLOCKQUOTE> para finalizar la configuración e formato de cita. 5 Presione Entrar dos veces. Se agregan citas a las páginas Web para desplazar el texto.</I></P> 6 7 8 Presione Entrar dos veces. 9 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. 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. Guarde el archivo index. alineado a la derecha. Presione Entrar dos veces. . presione Tab y escriba: <P ALIGN="RIGHT"><I>. Figura 6-27. presione Tab y escriba lo siguiente: <P ALIGN="RIGHT"><I>. presione Tab y escriba </FONT> para finalizar el formato de color de fuente rojo oscuro.Moe Zart</I></P> De esta forma.html. Es una verdadera maestra.

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

en la segunda celda de la segunda fila de la tabla. primero agregará un pequeño fragmento de texto que introduce la lista sin numerar y. Figura 6-29. si es necesario. Este tipo de lista aparece como lista con viñetas en una página Web. Cada elemento de estas listas se identifica mediante el par de etiquetas <LI></LI>. haga clic al final de </BLOCKQUOTE>. De forma predeterminada. En esta sección. como se muestra en la figura 6-29. creará la lista (que incluye vínculos a las páginas apropiadas): 1 Abra el archivo index.</P> . después. 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).html en un procesador de texto. presione Entrar dos veces.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. 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. las listas sin numerar se muestran con viñetas. después. presione Tab y.

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

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

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

Por lo tanto. Por el contrario. En la figura 6-31 se ilustra una página Web que usa el sitio Web de música sin gráficos. . deseamos que tenga una plantilla HTML útil que pueda personalizar con facilidad. gráficos de pancartas ni botones. No es necesario que disponga de ninguna imagen de fondo. 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. En este momento.150 Nota Puede que haya observado que sólo hemos proporcionado contenido para la página principal. Figura 6-31. 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. vamos a contarle un pequeño secreto. Puede crear un sitio Web basado en texto que use el sitio de música como plantilla. Puede crear un sitio Web con la plantilla del sitio de música incluso si no tiene ningún gráfico. 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-32 se muestra la página de la plantilla y en la figura 6-33 se ilustra parte de su código fuente.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. en la ventana de código fuente. Ahora. haga clic en el menú Ver y. Si prefiere no incluir ningún gráfico en la página. puede modificar su versión local de la plantilla si reemplaza el texto marcador de posición con su contenido personalizado. haga clic en el menú Archivo. en Código fuente para mostrar el código fuente de la plantilla. Figura 6-32. después. basta con que elimine la etiqueta <IMG> de su documento HTML. Puede modificar la plantilla basada en texto para crear una página personalizada. Si desea agilizar el proceso cuando utilice una plantilla para crear una página personalizada. haga clic en Guardar como y guarde el código fuente en el equipo. A continuación. .

Sugerencia En la 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. Los comentarios no se muestran en la página Web. puede ver entradas de código HTML que comienzan con un signo de admiración y dos guiones: <!-.logo -->.) .152 Figura 6-33. Los comentarios se han agregado a la plantilla de ejemplo para ayudarle a identificar los componentes HTML cuando personalice el código fuente. 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. Estos tipos de entradas se denominan comentarios. si no usa ninguna imagen de fondo. (No tiene que colorear igual todas las celdas de la tabla. Finalmente. se usan como notas que permiten a los desarrolladores etiquetar fragmentos del documento HTML. Puede obtener una apariencia bastante creativa si aplica un color al fondo y colorea las celdas de la tabla selectivamente con otro color diferente.

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

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

■ 39 archivos de ejercicios. es probable que prefiera usar lo último en sistemas para entretenimiento doméstico: es decir. con seguridad. 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. .  Utilizar FrontPage para crear una página principal.  Diseñar subpáginas a partir de una plantilla estándar. estéreo Dolby y componentes de sonido envolvente. 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. Cuando ve las noticias en la televisión. pero.htm y 37 archivos gráficos que usará en el sitio Web que cree con FrontPage.doc. con cable digital. Para crear las páginas Web descritas en esta lección.155 LECCIÓN 7 Creación de sitios Web con FrontPage Una vez completada esta lección. la silla y el control remoto”. necesitará los siguientes “utensilios”: ■ Una copia de Microsoft FrontPage (preferiblemente la versión 2002). entre los confortables pliegues de un enorme sofá de piel. pueden marcar una gran diferencia en ocasiones. Lo mismo se puede decir de los editores HTML. insertar tablas y agregar botones de exploración y pies de página. el único “equipamiento” que necesita es el aparato y un lugar donde sentarse. que se pueden encontrar en la subcarpeta Lesson07 de la carpeta Practice. podrá:  Usar FrontPage para automatizar la creación de páginas Web. thankyou.  Crear mapas de imágenes y formularios para conseguir que un sitio sea más interactivo. En esta lección. 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. mientras que FrontPage proporciona la solución al estilo del “sistema de lujo para el entretenimiento doméstico” en el desarrollo de sitios Web. El Bloc de notas (un procesador de texto básico) puede semejarse a la forma de crear páginas Web “con el televisión. en el disco duro. Reconozcamos que estos “extras” no son estrictamente necesarios. vamos a ocuparnos de los “extras”. Estos archivos son mars.  Definir hojas de estilo en cascada (CSS) para dar formato a las páginas Web.

gif titlebar.gif bigdip5. .gif titlebar-home.gif t_contact.doc y thankyou.gif bigdip4. de modo que optamos por crear un sitio Web para un club de astronomía.gif bigdip2.gif b_links2.gif b_skyguide. (Por comodidad.gif b_aboutus2. Terminamos incorporando en él muchas de las funcionalidades que habíamos planeado originalmente para el sitio de béisbol.gif t_aboutus.gif b_contact.gif b_meetings.) Copie los archivos mars.gif bullet_star.gif b_links.gif corner_top_right.gif b_gallery2. nos referiremos al disco duro como unidad C:\ en toda la lección. 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. siga estos pasos: 1 Cree una carpeta denominada “sky” en el disco duro.gif b_meetings2. Por desgracia.gif corner_top_left.jpg saturn. Por ejemplo.gif t_links. 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.gif t_gallery.gif t_meetings.gif bigdip3.gif bigdip1.gif mars.gif logo.htm de la subcarpeta Lesson07 de la carpeta Practice a la carpeta C:\sky que ha creado en el paso anterior. no pudimos sobornar lo suficiente a nuestros amigos para que posaran para la imagen del equipo.jpg neptune.gif b_contact2.gif corner_botm_left. pretendíamos crear una página para un equipo de béisbol ficticio. 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.gif b_skyguide2.gif bg.jpg solarsystem. en el disco duro): b_aboutus.gif b_gallery.gif corner_botm_right. comience a pensar formas de variarlas para crear sitios Web personalizados.gif 2 3 Planeamiento del sitio Web con FrontPage Cuando planeamos inicialmente el sitio del proyecto de esta lección.gif t_skyguide. Esperamos que a medida que experimente con las técnicas que presentamos en este proyecto.156 Para empezar a realizar las actividades de esta lección.

Y.157 Tras determinar que el sitio de un club de astronomía se adaptaría a nuestros propósitos. 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. Figura 7-3. Dado que FrontPage ofrece tantas opciones. . La figura 7-3 contiene un dibujo de la Osa mayor que sugerimos para la página principal. que se usa para hacer que la página principal destaque de las subpáginas. decidimos que debería constar de una página principal personalizada vinculada a subpáginas con un formato estándar. La figura 7-4 muestra el dibujo de la composición estándar de la subpágina. 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. la figura 7-5 ilustra el esquema del sitio del club de astronomía. eche un vistazo a las figuras 7-3 a 7-5. El uso de una página principal diferente es una técnica de diseño común en los sitios Web. Para ver nuestro proceso de planeamiento. finalmente.

.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.

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

abra el menú Archivo. 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. y. En la sección Nuevo. lo que significa que está preparado para la acción. . Pero. debe asegurarse de que ha copiado los archivos mars.htm). que se encuentra en la carpeta Practice. escriba C:\sky o haga clic en Examinar y vaya a C:\sky. En la barra de vistas en el lateral izquierdo de la ventana de FrontPage. haga clic en el icono Informes. Después de un breve proceso en el que FrontPage agrega Extensiones de servidor de FrontPage a la carpeta Web (C:\sky). siga estos pasos: FrontPage hace referencia a los sitios Web como Webs. a continuación. Además.doc y thankyou. 2 3 4 5 Nota Aunque es conveniente tener preparadas de antemano todas las imágenes que piense usar en su sitio Web. si se muestra alguno.htm almacenados en C:\sky. Aparece el resumen de un sitio. 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. seleccione Nuevo y haga clic en Página o Web. Ahora está listo para crear una subpágina estándar que puede usar como plantilla en el sitio Web del club de astronomía. 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). Haga clic en el cuadro de texto Especifique la ubicación del nuevo sitio Web. Para ello. Este informe se presenta porque tiene gráficos almacenados en la carpeta C:\sky\images y los archivos mars. verá que la barra de título de FrontPage cambia a Microsoft FrontPage -C:\sky. en el disco duro.160 Creación de un nuevo Web Como hemos mencionado en la sección anterior. haga clic en la opción Sitio Web vacío y se abrirá el cuadro de diálogo Plantillas de sitio Web. Si el panel Página o Web no aparece. 1 Compruebe que ha creado una carpeta denominada C:\sky\images en la que haya colocado las imágenes que copió de la subcarpeta Lesson07. 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:\sky\pagina_nueva_1. no es necesario.htm de la carpeta Lesson07 y los ha almacenado en C:\sky. Abra FrontPage y cierre el documento en blanco. resalte el texto existente.doc y thankyou. haga clic en Aceptar.

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. Si siguió los pasos de la sección anterior. como se ilustra en la figura 7-6. Puede especificar el texto del título en el cuadro de diálogo Propiedades de página. haga clic en Examinar. Figura 7-6. compruebe que en FrontPage aparece un área de trabajo en blanco. Se abre el cuadro de diálogo Propiedades de página. haga clic en la flecha de lista desplegable Vistas en la barra de herramientas del cuadro de diálogo y seleccione Vista previa. escriba Club de la astronomía. 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. configurará las propiedades de página de la subpágina. En primer lugar. 2 Para ver una vista en miniatura de una imagen seleccionada en el cuadro de diálogo Seleccionar imagen de fondo. Configuración de las propiedades de página Para empezar. debe ver la página.161 Creación de la composición de la subpágina En esta sección. 3 Haga clic en la ficha Fondo. . En el cuadro de texto Título. en la ficha General. 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 doble clic en la carpeta images en C:\sky y. Se abre el cuadro de diálogo Fuente.gif en el cuadro de diálogo Seleccionar imagen de fondo. Después.162 4 En el cuadro de diálogo Seleccionar imagen de fondo. seleccione Normal. Haga clic en Abrir para seleccionar la imagen de fondo y vuelva al cuadro de diálogo Propiedades de página. en el cuadro de texto Estilo de fuente.gif. después. Para asignar una imagen de fondo a la página Web. 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. haga clic en el botón Estilo de conversión. haga clic en la flecha de lista desplegable Fondo y haga clic en el cuadro de color negro. 6 Continuando en la ficha Fondo. Haga clic en el cuadro desplegable Color. 7 8 . haga clic en bg. haga clic en la casilla de verificación Habilitar efectos de conversión de hipervínculos y. 5 Figura 7-7. En el área Fuente. conserve la selección (Fuente predeterminada) y. seleccione bg. en la ficha Fondo. después. a continuación. haga clic en la flecha de lista desplegable Texto y en el cuadro de color negro. como se ilustra en la figura 7-7. haga clic en el cuadrado de color rojo (éste es el color predeterminado) y haga clic en Aceptar.

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

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. por ejemplo. 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. a continuación. si los hipervínculos “que visita” un usuario se configuran con el color negro. escriba subpágina y. El cuadro de diálogo Establecer título de página se configura para modificar el texto del título de una página. 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.164 Incluso aunque en el proyecto se usen los colores predeterminados para los hipervínculos. 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. Para guardar el archivo actual. algunos exploradores podrían insertar colores personalizados para los hipervínculos que pueden no funcionar bien en su sitio. Guardar su trabajo Antes de ir más lejos. A continuación. haga clic en Aceptar. 3 En el cuadro Nombre de archivo. En el cuadro de diálogo Guardar como. Podrá usar la misma configuración básica en todas las subpáginas. haga clic en Guardar. haga clic en Guardar. siga estos pasos: 1 2 En el menú Archivo. como se muestra en la figura 7-9. Figura 7-9. . los vínculos desaparecerán en el fondo negro cuando los usuarios hagan clic en ellos. debe guardar su trabajo.

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

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. el logotipo se vincula a la página principal (futura) y ambos gráficos se insertan y se alinean a la izquierda. 7 En FrontPage. 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. En el código fuente. Sólo para asegurarnos. efecto que no es el que se persigue en este sitio Web. lo que significa que ya puede agregar las etiquetas <NOBR></NOBR>. En la sección General.166 En este punto. Antes de agregar las etiquetas <NOBR></NOBR>. la barra de título podría ajustarse en la línea siguiente en algunos exploradores. haga clic en la opción de vista HTML. haga clic antes de la etiqueta de cierre de párrafo (</p>) y escriba </NOBR>. de forma predeterminada. escriba <NOBR>. haga clic en Cambiar el formato con las reglas siguientes. haga clic en Opciones de página y muestre la ficha Código fuente HTML. active la casilla de verificación Permitir saltos de línea dentro de etiquetas en la sección Formato y haga clic en Aceptar. 10 . 8 9 Haga clic en Herramientas. 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. El código fuente HTML se muestra en la ventana del área de trabajo de FrontPage. haga clic después de la etiqueta de apertura de párrafo (<p>). vamos a facilitar el trabajo en FrontPage haciendo que ajuste el texto del código. En la mayor parte de los exploradores. 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. si los usuarios cambian el tamaño de la ventana de su explorador por uno muy pequeño. Ahora podrá ver el código HTML sin tener que desplazarse a la izquierda y a la derecha demasiado.

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

arrastre para seleccionar dos filas y cinco columnas de cuadros en la ventana emergente y. Como puede ver. (En otras palabras. En efecto.) Cuando cree sus propias tablas. no deje que la cantidad de pasos le abrume. FrontPage crea las tablas con un borde de 1 píxel. después. probablemente tenga que experimentar con algunas configuraciones antes de conseguir que le gusten. los bordes de la tabla están configurados para mostrarse con 1 píxel de ancho. aunque podría parecer que esta sección incluye muchos pasos. que es exactamente lo que nosotros hacemos también. de modo que el proceso no es demasiado complejo.168 Inserción de una tabla En esta sección. 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. Además. 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. cambiará la configuración de los bordes con el valor cero (0) para ocultar las líneas. De forma predeterminada. 2 Figura 7-12. cuando rellene la tabla. En la barra de herramientas estándar. éstos son bastante repetitivos. los bordes se muestran cuando inserta por primera vez una tabla. Después. suelte el botón para insertar la tabla en la página. haga clic en el botón Insertar tabla. Para crear su tabla en este proyecto. . 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. En la figura 7-12 se ilustra el proceso de creación de la tabla.

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

En el menú contextual. la opción Especificar ancho como 15 píxeles. 7 8 9 10 11 12 13 . seleccione Propiedades de celda. seleccione Propiedades de celda. especifique Blanco como Color de fondo y haga clic en Aceptar. 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. Seleccione Propiedades de celda.) Haga clic con el botón secundario del mouse en la celda de la fila 1. la opción Especificar ancho como 15 píxeles. columna 4. configure la opción Especificar alto como 15 píxeles y haga clic en Aceptar. configure la opción Especificar alto como 15 píxeles. Haga clic con el botón secundario del mouse en la celda de la fila 2. Alineación vertical como Inferior. la opción Alineación vertical como Superior. En el menú contextual. la opción Especificar ancho como 1 píxel. active la casilla de verificación Especificar alto. columna 3. Haga clic con el botón secundario del mouse en la fila 2. la celda no cambiará de tamaño hasta que también le dé formato debajo). active la casilla de verificación Especificar alto. Haga clic con el botón secundario del mouse en la celda de la fila 1. configure la opción Alineación horizontal como Centrar. configure la opción Especificar alto como 15 píxeles y haga clic en Aceptar. la opción Alineación vertical como Inferior. la opción Alineación vertical como Superior. columna 2. Seleccione Propiedades de celda. configure la opción Alineación horizontal como Izquierda. especifique Color de fondo como Blanco y haga clic en Aceptar. configure Alineación horizontal como Izquierda. columna 3. Haga clic con el botón secundario del mouse en la celda de la fila 1. haga clic en la casilla de verificación Especificar alto. columna 2. columna 1. Configure la opción Alineación horizontal como Izquierda. Haga clic con el botón secundario del mouse en la celda de la fila 2. configure la opción Alineación horizontal como Izquierda.170 6 ¡No olvide guardar con frecuencia su trabajo! Haga clic en Aceptar para activar la configuración. la opción Alineación vertical como Inferior. En el cuadro de diálogo Propiedades de celda. seleccione Propiedades de celda. En el menú contextual. Especificar ancho como 130 píxeles. Alineación vertical como Superior. seleccione Propiedades de celda. 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. En el menú contextual. (Ahora la segunda columna de la tabla debe tener 1 píxel de ancho. Configure la opción Alineación horizontal como Izquierda.

la opción Alineación vertical como Inferior. configure la opción Especificar alto como 15 píxeles. En el menú contextual. la opción Alineación vertical como Superior. seleccione Propiedades de celda. 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: . configure la opción Alineación horizontal como Derecha.171 14 Haga clic con el botón secundario del mouse en la celda de la fila 2. 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. configure la opción Alineación horizontal como Derecha. columna 5. En el menú contextual. 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. especifique Blanco como Color de fondo y haga clic en Aceptar. la opción Alineación vertical como Inferior. seleccione Propiedades de celda. Haga clic con el botón secundario del mouse en la celda de la fila 2. seleccione Propiedades de celda. la opción Especificar alto como 15 píxeles. desactive la casilla de verificación Especificar ancho. columna 4. 15 16 Figura 7-14. la opción Especificar ancho como 15 píxeles. active la casilla de verificación Especificar alto. la opción Especificar ancho como 15 píxeles. Haga clic con el botón secundario del mouse en la celda de la fila 1. configure la opción Alineación horizontal como Izquierda. En el menú contextual. especifique Blanco como Color de fondo y haga clic en Aceptar. columna 5.

haga clic en Propiedades de imagen.gif en la carpeta C:\sky\images y haga clic en Insertar.gif recién insertada. Sugerencia Para hacerse una idea de cómo quedan los gráficos en la esquina.gif en la carpeta C:\sky\images.172 17 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. columna 3. Haga clic en la celda de la fila 1. Haga clic con el botón secundario del mouse en la imagen corner_botm_left. Haga clic en Insertar imagen desde archivo y haga doble clic en la imagen corner_botm_right.gif en la carpeta C:\sky\images. seleccione Inferior en la lista desplegable Alineación y haga clic en Aceptar. Seleccione la imagen corner_top_left. si es necesario. columna 5. Haga clic en Insertar imagen desde archivo en la barra de herramientas estándar y haga doble clic en la imagen corner_botm_left. En el menú Insertar. Haga clic con el botón secundario del mouse en la imagen corner_botm_right. seleccione Imagen y elija Desde el archivo. 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. haga clic en la ficha Apariencia.gif recién insertada. columna 3. En el menú contextual. haga clic en la ficha Apariencia. el cursor aparecerá a la derecha de la celda). si es necesario. Haga clic en Insertar imagen desde archivo en la barra de herramientas estándar y haga doble clic en la imagen corner_top_right. Haga clic en la celda de la fila 2. 18 Haga clic en la celda de la fila 2. haga clic en Propiedades de imagen. 19 20 21 22 . seleccione Inferior en la lista desplegable Alineación y haga clic en Aceptar.gif en la carpeta C:\sky\images. 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. En el menú contextual.

En primer lugar. a medida que haga clic en los efectos. su tabla debería mostrarse como en la figura 7-15. Figura 7-15. En este punto. columna 1. En el menú Insertar. puede empezar a rellenar sus celdas. . la descripción cambia) y haga clic en Finalizar. que va a usar en este proyecto: 1 2 Haga clic en la celda de la fila 1. hay que agregar algunos botones de exploración a la primera columna. seleccione Efectos dinámicos en la sección Tipo de componente. FrontPage ofrece algunos botones con efectos especiales bonitos. seleccione Componente Web. Los gráficos pequeños agregados a las celdas de la tabla crean la apariencia de que las esquinas son redondeadas.173 23 Haga clic en Guardar en la barra de herramientas. 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. Adición de botones de exploración Ahora que la tabla está creada.

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

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

Microsoft podría ofrecer una revisión para corregir esto pero.htm"> </applet><p> . Haga clic en HTML en la parte inferior de la ventana para mostrar el código HTML de su página. FrontPage 2002 tropieza con un pequeño fallo técnico cuando se insertan los botones activables. Si elige obtener una vista previa de sus páginas Web en el explorador durante el resto de este ejercicio.class" codebase=". observe que la quinta línea indica que se aplica al botón Página principal: <applet code="fphover. o haga clic en el botón Vista previa en el explorador. 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). elija el explorador que desee usar y haga clic en Vista previa. de modo que debe ver siete de estos pares en HTML./" 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. seleccione Vista previa en el explorador en el menú Archivo. 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. Con el tiempo. Por ejemplo. a continuación le indicamos cómo. 12 El código de cada botón activable aparece entre un par de etiquetas <applet> </applet>. 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. en el menú archivo. por ahora. dispone de dos opciones para evitar este problema: ■ Para obtener una vista previa de sus imágenes en el explorador. Si prefiere retocar el código HTML un poco para evitar que se abra el explorador en la lección. básicamente. cada vez que le sugiramos que puede ver su página Web.176 Como puede ver en la figura 7-17. omita la siguiente sección y elija Vista previa en el explorador. ■ Modifique el código de cada botón activable para corregir el problema. en la barra de herramientas estándar. a continuación puede ver todo el código del subprograma de un botón. siga adelante.

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

Haga clic en el botón Centrar de la barra de herramientas Formato para centrar el texto. Presione Entrar y haga clic en Guardar en la barra de herramientas estándar. Para tener acceso a Knowledge Base. debería incluir información de copyright para proteger su creación.microsoft. Escriba (incluyendo los caracteres de barra vertical) Página principal | Acerca de nosotros | Contactar | Reuniones | Mapa del cielo | Galería de fotos | Vínculos Seleccione la línea o el texto que ha escrito. 2 3 4 5 6 7 . muestre la lista desplegable en la barra de herramientas Formato y elija Comic Sans (o Comic Sans MS). muestre la lista desplegable Tamaño de fuente en la barra de herramientas Formato.aspx?LN=ES en el explorador y haga clic en el vínculo Buscar en Knowledge Base.com/default.178 Sugerencia Si encuentra problemas mientras trabaja en FrontPage (o en cualquier otra aplicación de Microsoft). 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. Si desea agregar información al final de la página en el sitio Web del club de astronomía. Como explicamos anteriormente en este curso. 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. Asimismo. Presione Entrar. visite http:/ support. un recurso fantástico al que puede acudir es Microsoft Knowledge Base en línea. presione Entrar y escriba ¿Tiene cuestiones o comentarios acerca del sitio Web? Envíe un mensaje de correo electrónico al administrador del Web. elija 1 (8 pt) y. escriba Copyright [el año actual] – [su nombre o el nombre de su organización]. siga estos pasos: 1 En la vista Normal. haga clic en el área a continuación de la tabla. Haga clic al final de la línea de texto. 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. después.

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

En el cuadro de diálogo Insertar hipervínculo. 12 Figura 7-20. en el menú Archivo. 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. guarde su trabajo. escriba Club de la astronomía en el cuadro de texto Asunto (vea la figura 7-20). haga clic en el botón Dirección de correo electrónico en la sección Vincular a. después. según se ilustra en la figura 7-20. Puede crear hipervínculos que abran automáticamente un formulario de mensaje con una dirección predeterminada. para que la vista previa de la página Web de la subpágina se vea correctamente). La parte inferior de la plantilla de la subpágina debería ser similar a la de la figura 7-21.180 11 Seleccione el texto Envíe un mensaje de correo electrónico al administrador del Web. Observe igualmente que la fecha de copyright y el nombre de la organización dependerán de la información que suministre. . 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. 13 Especifique su dirección de correo electrónico en el cuadro de texto Dirección de correo electrónico. haga clic en Aceptar y.

Uso del diseño de la subpágina para crear páginas Web Ahora va a usar el archivo subpágina. Ahora tiene una plantilla de subpáginas preparada para utilizarla. 14 Cierre el archivo subpágina.htm con el fin de crear un par de subpáginas para el sitio Web del club de astronomía.htm gallery.htm skyguide.181 Figura 7-21. El sitio requiere seis subpáginas principales: ■ ■ ■ ■ ■ ■ aboutus.htm meetings.htm links.htm . 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.htm contact.htm.

Decidimos enseñarle cómo completar mars. haga clic en Guardar como para abrir el cuadro de diálogo Guardar como. 3 Sugerencia Puede cambiar el texto del título de una página Web en cualquier momento. . ■ contact.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.htm y contact. 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. skyguide.htm. completará las páginas contact.htm y skyguide.htm). Agregó texto para los títulos de cada página a medida que las ha ido creando en la sección anterior.htm en FrontPage. estará totalmente preparado para experimentar y completar el resto de las páginas usted mismo. además de una subpágina (mars. esta página tiene vínculos a la página Mapa del cielo (skyguide. y compruebe que en el cuadro de texto Guardar en parece la carpeta C:\sky. Aunque no explicamos paso a paso cómo crear todas las subpáginas. Para usarla. como se explica a continuación: 1 2 Abra el archivo C:\sky\subpágina. haga clic en el botón Cambiar título. Preparación para crear subpáginas La preparación para crear subpáginas es sencilla. simplemente tiene que guardar copias del archivo subpágina. haga clic en Propiedades.htm) de la página skyguide. si lo desea. Asimismo.htm con nombres diferentes y algo de texto. ■ skyguide. ahora que ha adquirido conocimientos prácticos sólidos al crear la plantilla subpágina.htm.htm. en el menú Archivo. las imágenes que copió en la carpeta C:\sky\images 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. cambie el texto de Título y haga clic en Aceptar. En el menú Archivo. En la sección Título de página.htm.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. Para ello.htm Proporciona una introducción rápida al modo de crear un formulario en FrontPage. por ejemplo: ■ mars.182 En esta sección. Después de crear las tres subpáginas descritas en este proyecto.htm Enseña cómo crear un mapa de imágenes en FrontPage.

htm). escriba aboutus.htm meetings. No altere los nombres de archivo en este momento. .htm Texto del título de la página Club de la astronomía: Contactar Club de la astronomía: Reuniones Club de la astronomía: Mapa del cielo Club de la astronomía: Galería de fotos 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.htm y haga clic en Guardar. Sin cerrar el documento actual (que en este momento es aboutus. 6 7 Cierre FrontPage. Observe que la ficha de la página Web cambia (debajo de las barras de herramientas) para reflejar el nuevo nombre del documento actual. la subpágina Acerca de nosotros debe guardarse con el nombre aboutus. Cuando haya comprobado la lista de archivos que ha creado.htm links.htm mars. Por ejemplo. cierre la carpeta C:\sky.htm skyguide.183 4 En el cuadro de texto Nombre de archivo. 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: 5 Guardar como nombre de archivo contact. abra la carpeta C:\sky y compruebe que contiene un archivo para cada página Web de su sitio Web.htm.htm gallery.

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

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

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

haga clic en Formato y en Numeración. seleccione li en la lista Estilos y haga clic en Modificar. Haga clic en Aceptar tres veces para cerrar los cuadros de diálogo abiertos. va a reemplazar las viñetas negras normales en la lista con viñetas por otras personalizadas. muestre el contenido de la carpeta C:\sky\images en el cuadro de diálogo Seleccionar imagen y haga doble clic en bullet_star. como se ilustra en la figura 7-24.gif para completar el cuadro de diálogo Viñetas y numeración. La lista con viñetas de su página debería mostrar imágenes de estrellas en la vista Normal.187 5 En el cuadro de diálogo Fuente. haga clic en Examinar. haga clic en 12 pt en el cuadro de lista Tamaño. haga clic en la flecha de lista desplegable Color. 6 7 8 9 10 Figura 7-24. 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.html y asegúrese de que se ve en la vista Normal como preparación para la sección siguiente. En este momento. El estilo recién definido muestra en azul los encabezados de tipo 3 y en forma de estrellas las viñetas de la lista. . 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). En el cuadro de diálogo Modificar estilo. Guarde el archivo mars. haga clic en Etiquetas HTML en el cuadro Lista. y el código fuente debe incluir ahora estilos incrustados. Haga clic en Estilo en el menú Formato. En el cuadro de diálogo Viñetas y numeración.

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

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

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

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

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

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

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

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

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

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

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

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

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

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. 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. elija Propiedades de campo de formulario. elija Propiedades de campo de formulario.201 15 Haga clic con el botón secundario del mouse en la tercera casilla de verificación. especifique 7 en el cuadro de texto Orden de tabulación y haga clic en Aceptar. especifique 9 en el cuadro de texto Orden de tabulación y haga clic en Aceptar. elija Propiedades de campo de formulario. Haga clic con el botón secundario del mouse en el botón Enviar. escriba SitioWebEncontrado en el cuadro de texto Nombre. escriba 10 en el cuadro de texto Orden de tabulación y haga clic en Aceptar. especifique Enviar en el cuadro de texto Nombre. Haga clic antes de la etiqueta Nombre: en la parte superior del formulario y presione Mayús+Entrar. especifique Borrar formulario en el cuadro de texto Valor/Etiqueta. Haga clic con el botón secundario del mouse en el botón Restablecer. especifique 40 en el cuadro de texto Ancho en caracteres. A continuación. 16 17 18 19 20 . especifique Amigo en el cuadro de texto Valor. especifique Restablecer en el cuadro de texto Nombre. para que el formulario funcione correctamente. escriba Comentarios en el cuadro de texto Nombre. Haga clic con el botón secundario del mouse en el cuadro de texto con desplazamiento. guarde su trabajo sin obtener una vista previa del formulario (recuerde que. debe publicarlo en el Web antes de obtener una vista previa del mismo). elija Propiedades de campo de formulario.

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. además de permitir que los exploradores diferencien los elementos. 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.202 Denominación de los campos Generalmente. Puede configurar el formulario para que muestre el nombre de cada campo junto con los datos enviados. recibiría un mensaje de correo electrónico con la información enviada. Los nombres de los campos ayudan a identificar la información una vez enviada. Esta configuración le ayudará a ver rápidamente qué información se envió en respuesta a la entrada de cada campo del formulario. . debe suministrar un nombre para cada campo del formulario.

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

siga estos pasos: 1 Abra FrontPage. haga clic en el botón Cambiar título. después. especifique index. en la ficha Fondo y en el cuadro Texto en la sección Colores. especifique Sitio Web oficial del Club de la astronomía en el cuadro de diálogo Establecer el título de la página.gif y presione Entrar. Configuración del marco de trabajo de la página principal Para empezar. 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).204 Creación de una página principal en FrontPage Por último. haga clic sucesivamente en Propiedades de página. Coloque el cursor antes del vínculo Página principal en la barra de exploración de texto. Haga clic en Insertar imagen desde archivo. Por muy desafiante que parezca. aunque no menos importante. haga clic en Aceptar. Haga clic con el botón secundario del mouse en un área en blanco de la página. sin embargo. elija Guardar como en el menú Archivo. 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). puede crear la página principal. haga clic con el botón secundario del mouse en los elementos seleccionados y haga clic en Cortar. (¡Y esperamos que lo haga!) Asimismo. vamos a empezar por definir el marco de trabajo de la página principal. si es necesario. 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. elija Blanco y haga clic en Aceptar. abra el archivo C:\sky\subpágina. haga doble clic en titlebarhome. Presione Entrar y. 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. De todas maneras. muestre el contenido de la carpeta C:\sky\images.htm en el cuadro de texto Nombre de archivo y haga clic en Guardar. 2 3 4 5 .htm. 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.

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

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

htm. haga clic en la celda 1. Figura 7-37. presione Mayús+Entrar e inserte el gráfico b_skyguide. En la figura 7-37 se muestra la imagen antes de dividirla. Nota HTML dinámico (DHTML.gif. presione Mayús+Entrar.gif. inserte el gráfico bigdip2. 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. Haga clic en la celda 4 e inserte el gráfico bigdip3. 2 3 4 . por ejemplo.gif.gif. 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. La imagen de la Osa mayor que se ve aquí se dividió en fragmentos para este proyecto. inserte el gráfico b_meetings. 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. Haga clic en la celda 3. presione Mayús+Entrar.gif (un gráfico transparente que le ayudará a alinear el resto de los gráficos).gif.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. 1 En el archivo index. inserte el gráfico b_contact. Haga clic en la celda 2 e inserte el archivo b_aboutus. muestre el contenido de la carpeta C:\sky\images y haga doble clic en bigdip1.gif. puede mostrar un gráfico o información adicional en respuesta al movimiento del mouse. haga clic en Insertar imagen desde archivo en la barra de herramientas estándar. 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).

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

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

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

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

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

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.213 LECCIÓN 8 Introducción de las páginas Web en el mundo real Una vez completada esta lección. los nombres de dominio y los ISP. revisamos con detalle el espacio en los servidores.  Revisar las páginas Web antes de transferirlas a Internet. Si prefiere avanzar. Cuando cree páginas Web. ■ Espacio en un servidor. Si necesita un recordatorio en profundidad de estos temas. 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). Debe adquirir un nombre de dominio y registrarlo con un servicio de alojamiento de sitios Web.) ■ Una dirección Web. de modo que puede manifestar su presencia en el Web. 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. por lo tanto no vamos a volver sobre esas cuestiones aquí.) ■ Una aplicación de software que permita transferir los archivos desde su equipo a un servidor. .  Usar Mis sitios de red de Microsoft para mantener su sitio Web. podrá:  Transferir sus archivos a Internet. consulte la lección 4. ha creado páginas Web. denominados y organizados correctamente. no sólo como ejercicio intelectual. 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.  Elegir un método para exponer sus páginas Web. En la lección 4. finalmente estará preparado para mostrarlas en línea. Con probabilidad. 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. (Explicaremos este requisito más adelante en esta lección. así que continuaremos con esa suposición. (Puede pagar una cuota mensual a un servicio de alojamiento de sitios Web a cambio de espacio en un servidor.

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

usamos un programa denominado CuteFTP para PCs que se basan en Microsoft Windows y Fetch para equipos Macintosh. su ISP le proporcione una aplicación FTP con su paquete de inicio. . 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. Si es así. En general. póngase en contacto con su proveedor u hojee la documentación del ISP para encontrar las instrucciones específicas de la aplicación. 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. shareware y software comercial. Figura 8-1. Con CuteFTP. las aplicaciones FTP estándar proporcionan uno de los métodos más sencillos para cargar archivos en Internet. En apariencia. probablemente. que es una interfaz de aplicación FTP bastante típica. puede arrastrar los archivos desde su equipo a un directorio de su servidor. La figura 8-1 muestra la interfaz de CuteFTP. no lo debemos de pensar sólo nosotros porque hay trillones de aplicaciones FTP disponibles en forma de software gratuito. Principalmente.215 Aplicaciones FTP En nuestra opinión. Sugerencia Debería poder adquirir un buen programa FTP por un precio muy razonable.

Advertencia Cuidado: si usa un programa shareware y transcurre el tiempo asignado para la prueba.com.creationguide. en CuteFTP. Por suerte. 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. Si sucede esto. Por ejemplo. Algunos proveedores permiten especificar el nombre de usuario sin la parte @dominio. . el nombre de usuario de un sitio FTP es el mismo que su dirección de correo electrónico. basta con que seleccione y arrastre los archivos o carpetas del panel de la izquierda al de la derecha. Para cargar los archivos de sus páginas Web. Incluso aunque cada aplicación FTP tiene una interfaz personalizada para reunir la información de las cuentas. corre el riesgo de perder la información de configuración de sus conexiones FTP. ■ 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. El único propósito de la etiqueta del sitio es ayudarle a recordar qué cuenta FTP se corresponde con cada servidor. 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. una vez que configure inicialmente una conexión.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. la dirección de host del sitio Creation Guide es ftp.com y. la mayoría de las aplicaciones FTP conserva los datos de conexión “archivados” para utilizarlos en el futuro. Generalmente. Denomine sus conexiones de forma lógica. Por ejemplo. 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 ejemplo admin@creationguide. en el ejemplo anterior sólo se necesitaría indicar admin. 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.com. en este caso. ■ Dirección de host FTP La dirección de su espacio en el servidor. ■ Nombre de usuario del sitio FTP El nombre de usuario que utiliza para tener acceso a su espacio en el servidor.

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

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

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 permite crear accesos directos en el escritorio a archivos y carpetas que se encuentran en Internet o en un servidor de una intranet.

Microsoft proporciona otro método para cargar y administrar los archivos y carpetas de un sitio Web: usar Mis sitios de red para crear y administrar sitios que contienen carpetas y archivos Web. Mis sitios de red se incluyó por primera vez en Microsoft Office 2000 y se sigue incluyendo en Office 2002 (antes de 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

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

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.

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

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

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. En los pasos siguientes. Puede usar el cuadro de diálogo Guardar como para crear un sitio de red. en Guardar como. haga clic en Archivo y. 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.224 Creación de un sitio de red desde Word Para crear una carpeta Web mientras trabaja en Word. Figura 8-5. 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. Aparece el cuadro de diálogo Guardar como. le mostramos cómo crear un sitio de red con el cuadro de diálogo Guardar como. . después. 1 2 En Word.

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

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

Si se convierte en un diseñador Web “serio” y tiene su propio espacio en el Web. 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). . 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. En concreto. se agregó por primera vez a Windows en la versión OSR2. no está todo perdido. posiblemente. el Asistente para publicación en Web puede constituir un medio viable cuando llegue el momento de almacenar y compartir archivos así como. El Asistente para publicación en Web está disponible en la mayor parte de las versiones de Windows. Por lo tanto. Puede copiar los archivos en un servidor Web igualmente de otras formas.5 de Windows 95. como FrontPage Exploradores. no hay ningún motivo para mostrarle las páginas que puede ver en su equipo. complete los pasos siguientes: 1 2 Abra Mi PC y seleccione un archivo o carpeta que desee publicar en su espacio Web. 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.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. 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. Para tener acceso al asistente. como MSN o Xdrive. 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. Puesto que el proceso se sigue con los formularios del asistente. La mejor forma de entender cómo funciona el Asistente para publicación en Web es seguir el proceso. publicar su primer sitio Web en MSN. De nuevo. En la sección Tareas de archivo y carpeta. 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. rápidamente ansiará poder usar la mayor flexibilidad (y simplicidad) que ofrecen las aplicaciones FTP y la herramienta de sitios de red. esta herramienta no es la ideal para publicar páginas Web (a menos que esté trabajando en un sitio de un grupo de MSN).

Cuando seleccione publicar una carpeta.228 Para iniciar el asistente. 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. el proceso debe llevarse a cabo sin problemas y la información recién agregada se mostrará en el explorador de forma predeterminada. prosiga a través de cada página y proporcione la información apropiada. como se muestra en la figura 8-8. tendrá que hacer clic en Finalizar para cargar sus archivos. Cuando haya completado todos los formularios del asistente. 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. A continuación. Si tiene la información correcta. . haga clic en el botón Siguiente.

Si va a comprar un servicio de alojamiento. Cuando coloque archivos en una carpeta personal de MSN. algunos ISP ofrecen formularios que puede usar para cargar los archivos desde su equipo al servidor. Las ventanas principales de las características de los ISP y de los editores HTML son que las herramientas suelen ser fácilmente accesibles. Nuestro servicio de alojamiento proporciona varias características de calidad. 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. estas herramientas son variaciones o híbridos de aplicaciones FTP. 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. la característica de sitios de red y el Asistente para publicación en Web. De hecho.NET Passport le ayuda a crear una cuando publica un archivo o carpeta en MSN. Características de editores HTML e interfaces de ISP Otros recursos para transferir archivos son las interfaces de los ISP y los editores HTML. 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. . Después de publicar un archivo o carpeta. En esencia. Si no tiene una cuenta de Passport.NET Passport. por ejemplo. Por ejemplo. 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. si piensa usar una interfaz de transferencia de archivos de un ISP. sólo podrá tener acceso a ellos con su cuenta de . estadísticas de registro (como el seguimiento del número de visitas a una página y la cantidad de visitantes) y mucho espacio.229 ¡Pruébelo! Seleccione un archivo o carpeta que desee cargar en el Web. el host de Creation Guide proporciona un formulario. por lo que no lo usamos nunca para administrar los archivos del sitio. 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. investigue los servicios de administración de archivos que ofrece. el Asistente de . Asimismo. se agrega un vínculo al recurso en la ventana Mis sitios de red. En nuestra opinión. A continuación. pero nos ha parecido complejo.

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

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

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

véalas siempre en línea para comprobar si contienen errores o vínculos erróneos. ■ Cuando haya cargado páginas Web. el Asistente para publicación en Web. 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. sitios de red y carpetas Web. editores HTML y exploradores. 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. como Internet Explorer. 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. tómese tiempo para examinar su sitio. ■ 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. formularios en línea de ISP. La última tarea posterior a la fase de creación que abarcamos en esta lección es comunicar que su sitio Web existe. Haga clic en todas partes. ■ Puede transferir archivos y carpetas mediante aplicaciones FTP. deje que los demás sepan que su sitio está activo. ¡y comience el intercambio de información en línea! . ■ Si su servidor admite sitios de red. pruebe cada elemento interactivo y emplee su ojo crítico. ■ Para publicitar su sitio Web. regístrese en motores de búsqueda. ■ Finalmente. ■ Al cargar archivos Web en un servidor. incluyendo los parámetros exactos de denominación y organizativos de los archivos y carpetas del equipo local. Puntos clave ■ Puede usar aplicaciones FTP para copiar archivos desde su equipo a un servidor. mediante el boca a boca y a través de otros canales de comunicación típicos. conserve la estructura de archivos y carpetas de su sitio Web.233 Básicamente.

Sign up to vote on this title
UsefulNot useful