construcción de sitios web

Transcripción

1 MANUAL PARA LA UTILIZANDO N ETSCAPE C OMPOSER 4.X MANUAL DE ESTUDIANTES

2 ITrain es una colección de materiales de capacitación en el uso de Internet para capacitadores y estudiantes. Los materiales ofrecen un acercamiento interactivo, que involucra a los estudiantes en el proceso de aprendizaje y apoya a los instructores en la planificación y personalización de los cursos. Los manuales del programa ITrain contienen materiales tanto para autodidactas como para tutores. Los materiales han sido desarrollados por ITrain Collective, un grupo multicultural de capacitadores en Internet con experiencias de trabajo alrededor del mundo. El objetivo ha sido producir un grupo balanceado de manuales de capacitación, que sirva tanto para usuarios nuevos de la Internet como de nivel intermedio, al igual que para instructores nuevos y experimentados. Acceso es una organización no gubernamental de desarrollo, con sede en Costa Rica y programas activos en Centroamérica. Ofrecemos asistencia técnica, capacitación y apoyo para el desarrollo institucional a organizaciones locales, nacionales e internacionales que comparten nuestro compromiso con un desarrollo equitativo, participativo y sostenible. Acceso ofrece asistencia en planificación institucional y programática, desarrollo de juntas directivas, usos básicos y estratégicos de la Internet, diseño y desarrollo de presencias institucionales en el World Wide Web, diseño de estrategias de comunicación y en otras áreas afines. 1999, ITrain Group Publicación de: ITrain Group unganisha.idrc.ca/itrain Fundación Acceso Edición a cargo de: Nora Galeano, Fundación Acceso Textos: Lilliana Sancho Edición gráfica: Fernando Francia 2 MANUAL DE ESTUDIANTES

3 CONTENIDO Presentación 5 1. Introducción a la construcción de sitios Web Qué es el World Wide Web? El modelo Cliente/Servidor Páginas web El lenguaje HTML Sitios Web El URL (Uniform Resource Locator o Localizador Uniforme de Recursos) Los programas para hacer páginas y navegar por la web Programas editores de páginas Web Programas navegadores de la Web Uso de editores de texto y hojas electrónicas para hacer páginas Web El paquete Netscape como instrumento generador y visualizador de páginas Web Funcionamiento general del Netscape Composer Construcción de una página con Netscape Composer Escribiendo texto Guardando la página Viendo la página con el navegador Edición de texto La primera página Cómo alinear el texto? Cómo cambiar el tipo de letra? Cómo cambiar el tamaño de la letra? Cómo cambiar el estilo de la letra? Cómo cambiar el color de la letra? Cómo agregar viñetas y listas numeradas? Cómo cambiar el estilo de las viñetas y de la numeración? Cómo establecer títulos y encabezados? Inclusión de elementos gráficos Insertando líneas de división Insertando una imagen Algunas opciones del Netscape Composer al incorporar imágenes en páginas Web Modificación de la imagen Colocar la imagen como fondo Alineamiento de las imágenes con respecto al texto Cambio del tamaño de la imagen Hacer un marco alrededor de la imagen Despliegue de imágenes Creación de enlaces para la navegación Qué es un enlace? Cómo establecer un enlace? Cómo eliminar un enlace? Cómo establecer enlaces dentro de una misma página? 40 3 MANUAL DE ESTUDIANTES

4 7. Elaboración de tablas Qué es una tabla? Cómo insertar una tabla con Netscape Composer? Cómo agregar una fila, una columna o una sola celda? Cómo borrar una fila, una columna, una sola celda o la tabla completa? Cómo cambiar la apariencia de una tabla? Impresión con Netscape Composer Visualización previa de la página Imprimiendo la página Planificación de un sitio Web Introducción Pasos para la planificación y producción de un sitio Web Definir el objetivo del sitio Identificar la o las diferentes audiencias o poblaciones meta Definir el contenido y la estructura del sitio Estilo gráfico de presentación Construir las páginas y el sitio Probar y evaluar el sitio Registrar un dominio para ubicar el sitio Instalar el sitio Web en el servidor Medir el impacto del sitio Actualizar continuamente el sitio 59 Evaluación para uso de las personas participantes 60 4 MANUAL DE ESTUDIANTES

5 PRESENTACIÓN Este manual se ha elaborado con el propósito de facilitar la construcción de sitios Web, utilizando como herramienta Netscape Composer 4.x. Forma parte de una serie de materiales de capacitación en Internet desarrollados para el ITrain Group, con el soporte financiero del Centro Internacional de Investigación en Desarrollo (International Development Research Centre, IDRC). Es un manual básico y se puede obtener en forma gratuita de la dirección Se espera que este material sea utilizado por capacitadores(as) de herramientas de Internet así como por usuarios(as) de los países en desarrollo. Para su facilidad de uso ha sido organizado en nueve secciones. 1. Introducción a la construcción de sitios Web 2. Los programas para hacer páginas y navegar por la web 3. Construcción de una página con Netscape Composer 4. Edición de texto 5. Inclusión de elementos gráficos 6. Creación de enlaces para la navegación 7. Elaboración de tablas 8. Impresión con Netscape Composer 9. Planificación de un sitio Web Evaluación para uso de las personas participantes Este material se distribuye bajo la licencia OpenContent descrita en la dirección: 5 MANUAL DE ESTUDIANTES

6 CAPÍTULO 1 Introducción a la CONTENIDO 1.1 Qué es la World Wide Web? 1.2 El modelo cliente/servidor 1.3 Páginas web 1.4 El lenguaje HTML 1.5 Sitios web 1.6 El URL (Uniform Resource Locator o Localizador Uniforme de Recursos) 1.1 Qué es la World Wide Web? La World Wide Web (WWW) se puede entender como una gran colección de documentos o archivos, llamados páginas, almacenadas en computadoras alrededor del mundo, en la red Internet. Al tener acceso a la Internet, se tiene acceso a toda esa información y, con sólo hacer click, se puede navegar a través de una gran cantidad de información, saltando de página en página de la Web. 1.2 El modelo Cliente/Servidor Para comprender el funcionamiento de la Web es necesario entender la relación básica entre clientes y servidores que se lleva a cabo en ella. Un servidor es una computadora, conectada a la Internet las 24 horas del día, que contiene y distribuye información. Un cliente es un programa en su computadora que solicita, procesa y despliega esa información. En la Web, los servidores almacenan y facilitan páginas Web y los clientes despliegan las páginas en su computadora. Cliente Solicita Responde a solicitud Figura 1.4 Modelo Cliente-Servidor Servidor De esta manera, cuando en la Web usted hace click sobre un botón o sobre un texto para, por ejemplo, ver la información de una universidad de su interés, su computadora tiene el papel de un cliente que le solicita al servidor Web de la universidad que le transfiera la información que ha publicado en la Web. Una vez que la comunicación haya sido establecida, por medio de las conexiones que ofrece la Internet, el servidor Web de la universidad envía una copia de sus páginas a su computadora para que ésta las despliegue. 6 MANUAL DE ESTUDIANTES

7 Para ampliar este concepto tomemos como ejemplo el funcionamiento de la televisión. Bajo esta perspectiva, cuál sería el servidor y cuál el cliente? Como ya se habrá imaginado, los canales de televisión son los servidores y su televisor es el cliente. Los canales siempre tienen su señal de transmisión disponible y cuando usted selecciona el canal, éste se conecta y envía la imagen a su aparato de televisión. Además, muchas personas pueden estar viendo el mismo canal a la vez. Sin embargo, existen diferencias entre el servidor Web y la televisión como, por ejemplo, que en la Web la persona usuaria puede, entre otras cosas, interactuar y publicar directamente información en los servidores y que si se desconecta de la Internet, la página que tiene en pantalla no se apagará. Cabe mencionar, con este último ejemplo, que el canal envía la misma señal a todos los televisores, pero la forma en que se vea el programa de televisión depende de su televisor. Asimismo, los servidores Web envían las páginas a su computadora, pero la forma y la calidad de despliegue depende de su computadora y de los programas que usted utilice. Figura 1.1 Página de entrada al Web de la empresa Netscape 7 MANUAL DE ESTUDIANTES

8 Figura 1.2 Ejemplo de hipertexto Los tigres son felinos que requieren grandes extensiones de terreno para su subsistencia. Son mamíferos carnívoros. Se denomina felino a...los gatos, tigres, leones y leopardos... Formas de alimentación: - Carnívoros - Herbívoros El león Es un carnívoro conocido como el rey de la selva... Su pariente el tigre Páginas Web Las páginas de la Web son archivos de hipertexto. Estos archivos contienen texto destacado o subrayado que asocia información de diferentes páginas de la Web. O sea que estos archivos, o páginas Web, están vinculados a través de enlaces, llamados de hipertexto, como en una red. Esto permite navegar de una página a otra, de manera tal que la lectura de un documento no debe hacerse, necesariamente, en forma secuencial (ver la figura 1.2). El concepto de hipertexto se amplía al de hiperdocumento cuando, además de texto, las páginas contienen otros recursos audiovisuales, como son imágenes, sonido o vídeo. El propósito de este tipo de organización es ofrecer flexibilidad de acceso a las páginas, para que cada persona pueda realizar la lectura de acuerdo con sus intereses. Esta organización es, precisamente, la que posibilita enlazar información de diferente índole para formar la gran telaraña mundial que es hoy la Web. Las páginas en la Web están escritas en un lenguaje denominado HTML (Hypertext Markup Language), el cual se describe a continuación. 8 MANUAL DE ESTUDIANTES

9 Figura 1.3 Ejemplo de página Web Figura 1.4 Ejemplo del contenido de un archivo HTML <HTML> <HEAD> <TITLE>Mi primera página</title> </HEAD> <BODY> <p> <CENTER><FONT SIZE=+1>Esta es mi primera página!</font> </CENTER> <DIV ALIGN=right>Vilma Picapiedra.</DIV> </BODY> </HTML> 1.4 El lenguaje HTML HTML es un lenguaje de programación que sirve para crear hiperdocumentos publicables en la Web, o sea, páginas Web, con enlaces activos a recursos de información alrededor del mundo. Este lenguaje consiste en un conjunto de normas utilizadas para dar formato a un documento. El HTML le dice a cada programa navegador ( Browser ) qué es cada elemento de la página, para que él pueda interpretarlo en un formato apropiado. En la figura 1.3 se puede observar, a manera de ejemplo, una página Web sencilla y luego en la figura 1.4 el archivo HTML correspondiente. Como puede observar, el texto está formado por etiquetas encerradas entre paréntesis triangulados ( < > ), los cuales indican el formato del texto. Toda página inicia con la etiqueta <HTML> y termina con la etiqueta </HTML>. Las etiquetas <HEAD> y </HEAD> encierran encabezados de información de la página, como por ejemplo su título. Las etiquetas <BODY> y </BODY> encierran el contenido de la página, el cual podrá ser visualizado con un navegador. <CENTER> y </CENTER> indican que el texto que aparece en la línea va a aparecer centrado en la página. á es el código HTML para acentuar vocales, en este caso la a. <FONT SIZE=+1> y </FONT> indican características del tamaño del texto. <DIV ALIGN=right> indica que el texto quedará alineado a la derecha. <P> indica salto de párrafo. 9 MANUAL DE ESTUDIANTES

10 Además de éstas, HTML incluye, entre otras, etiquetas para: Colocar numeración y viñetas Insertar tablas Insertar elementos gráficos Indicar el tipo y tamaño de la letra Colocar casillas para ingreso de texto Hacer enlaces entre páginas, etc. Cuando la World Wide Web se inició, quienes querían hacer páginas Web debían conocer las instrucciones HTML y escribirlas directamente en un archivo de texto. Sin embargo, en la actualidad existen editores de páginas Web, cuyo funcionamiento se asemeja al de los procesadores de palabras. Es decir, las personas que hoy desarrollan páginas Web, no requieren escribir directamente el código HTML, pues el editor genera automáticamente el código correspondiente. En este momento, existen en el mercado muchos editores para páginas Web, inclusive algunos procesadores de palabras ya incluyen el formato html entre las opciones para guardar los documentos. Este manual describe el funcionamiento del editor Netscape Composer, el cual ha sido seleccionado debido, principalmente, a su simplicidad de uso y a que puede ser obtenido, gratuitamente, en la Web ( 1.5 Sitios Web Se denomina sitio Web al conjunto de páginas Web organizadas bajo temas u objetivos comunes y ubicadas, físicamente, en un mismo dominio o servidor Web. Para que un sitio Web pueda ser accesible en la Internet, debe estar almacenado en un servidor Web. 10 MANUAL DE ESTUDIANTES

11 1.6 El URL (Uniform Resource Locator o Localizador Uniforme de Recursos) Cada sitio o página Web tiene una dirección única que lo identifica para que pueda ser localizado dentro de la gran red Internet. A esta dirección se le conoce como Localizador Uniforme de Recursos (Uniform Resource Locator o URL). Se puede localizar cualquier página Web conociendo su URL. Observe en la figura 1.1 la dirección que aparece en la parte superior de la pantalla. Éste es el URL del sitio Web de la empresa Netscape. Con el siguiente ejemplo analizaremos cómo está compuesta una dirección URL: Los diferentes elementos que componen el URL son: http: es el protocolo de comunicación estándar que se usa en Internet para transferir y leer las páginas Web o archivos de hipertexto entre computadoras. Significa HyperText Transfer Protocol. es el nombre del servidor o computadora donde está almacenado el archivo. unganisha: en el ejemplo anterior, es el nombre del directorio bajo el cual está almacenado el archivo en el servidor. index.html: es el nombre del archivo en sí. Note que el documento tiene extensión html, pues es un archivo de hipertexto. 11 MANUAL DE ESTUDIANTES

12 CAPÍTULO 2 Los programas para hacer páginas y navegar por la Web CONTENIDO 2.1 Programas editores de páginas Web 2.2 Programas navegadores de la Web 2.3 Uso de editores de texto y hojas electrónicas para hacer páginas Web 2.4 El paquete Netscape como instrumento generador y visualizador de páginas Web 2.5 Funcionamiento general del Netscape Composer 2.1 Programas editores de páginas Web Como se mencionó en el capítulo 1, las páginas de un sitio Web se programan con un lenguaje denominado HTML y, cuando la Web inició, era necesario para quienes quisieran construir páginas, conocer a cabalidad las instrucciones y las etiquetas propias de este lenguaje. Así las personas que programaban las páginas utilizaban un editor de texto para escribir las instrucciones y guardaban el archivo con la extensión html, pero no podían ver cómo luciría la página sino hasta después de que la abrieran con un programa navegador ( browser ). Posteriormente, salieron al mercado programas editores de páginas Web, los cuales, mediante una interfaz gráfica (botones, barras de herramientas y menúes) facilitan la construcción de páginas. Entonces, quienes las hacen no requieren conocer con detalle el lenguaje HTML. Los programas editores de páginas Web presentan un funcionamiento similar al de los procesadores de palabras y los programas de dibujo actuales, ya que, entre otras cosas, permiten escribir texto y editarlo, incorporar gráficos y tablas, etc., mostrando, con bastante precisión, la forma en que lucirá la página en la Web. Entre los programas editores actualmente más conocidos se encuentran el Microsoft FrontPage y el Netscape Composer. Este último es presentado al final de este capítulo y estudiado con detalle a lo largo de este manual. 12 MANUAL DE ESTUDIANTES

13 2.2 Programas Navegadores de la Web Como se mencionó en el capítulo 1, un programa navegador o browser es la interfaz que tiene la persona usuaria para recorrer la Web. El navegador interactúa con un servidor Web, mediante una relación cliente/servidor; así cuando usted hace click sobre un elemento de una página Web, el navegador solicita al servidor que le envíe los documentos específicos para desplegarlos en la pantalla de su computadora. Algunos de los programas navegadores más comunes son: Internet Explorer (de Microsoft), Netscape Communicator (de Netscape) y MOSAIC (de NCSA). Estos programas leen los documentos que están escritos en HTML. 2.3 Uso de editores de texto y hojas electrónicas para hacer páginas Web Actualmente muchos programas, como procesadores de palabras, hojas electrónicas y programas para hacer presentaciones, como Microsoft Word, Microsoft Excel y Power Point, incorporan entre sus funciones la posibilidad de hacer enlaces entre páginas y guardar archivos en formato html. Tanto Word 97, Excel 97 como Power Point 97 incluyen la opción Guardar como HTML... o Save as HTML... dentro del menú Archivo o File. Por ejemplo, usando Word 97, usted puede escribir el texto de sus páginas, incorporar tablas y enlaces a otras páginas y luego guardar el archivo con formato html. Aunque estos programas no son especializados para crear páginas Web, son útiles para este propósito, principalmente cuando la información que queremos publicar en la Web ya está escrita con alguno de estos instrumentos. De esta manera, se puede, simplemente, guardar el archivo ya existente en formato html y no tener que volver a digitar la información. 13 MANUAL DE ESTUDIANTES

14 2.4 El paquete Netscape como instrumento generador y visualizador de páginas Web El editor Netscape Composer está incluido dentro del paquete Netscape Communicator. Las principales herramientas que el Netscape Communicator contiene actualmente son: Netscape Composer Sirve para editar y generar páginas Web. Netscape Navigator Sirve para navegar por la Web. Netscape Messenger Mailbox Sirve para administrar el correo electrónico. Algunas versiones del paquete Netscape incluyen también los siguientes programas: Netscape Collabra Discussion Groups Permite organizar y distribuir correspondencia de sus propios grupos de discusión en Internet. Netscape Calendar Ofrece un calendario para administración de agendas. Netscape Netcaster Es una herramienta que permite que su computadora quede conectada a ciertos canales en el Web. Un canal es en realidad un servidor Web al cual usted se puede suscribir para recibir información en forma automática. 14 MANUAL DE ESTUDIANTES

15 2.5 Funcionamiento general del Netscape Composer Para iniciar la ejecución del Netscape Composer: 1) Vaya al menú Start o Inicio de Windows, 2) Luego al menú Programs o Programas y 3) Luego al menú Netscape Communicator 4) Una vez allí, seleccione Netscape Composer Figura 2.1 El ambiente de trabajo del Netscape Composer Habiendo efectuado el paso anterior, aparecerá la siguiente ventana: Area de trabajo Barra de formato Barra de composición Menú principal Note en la figura que la ventana del Composer contiene: Una barra de menú principal con las opciones File, Edit, View, Insert, Fromat, Tools, Communicator y Help. Algunos de estos menúes (como File) presentan opciones estándar en la mayoría de los programas. Una barra de composión, de acceso rápido, la cual contiene comandos predefinidos que también aparecen en los menúes. Una barra de formato, de acceso rápido, para definir aspectos relacionados con la apariencia del texto. A lo largo de este manual se irán utilizando y explicando cada una de las opciones para su mejor comprensión. 15 MANUAL DE ESTUDIANTES

16 CAPÍTULO 3 Construcción de una página con Netscape Composer CONTENIDO 3.1 Escribiendo texto 3.2 Guardando la página 3.3 Viendo la página con el navegador Figura 3.1 La primera página vista con el Navegador 3.1 Escribiendo texto Escribiremos un texto sencillo con el fin de construir una página también sencilla, con lo cual usted obtenga una noción del funcionamiento del Netscape Composer. La página que usted va a crear es similar a la que se ve en la figura 3.1. a) Una vez en Netscape Composer, escriba el siguiente texto: Esta es mi primera página! b) Centre en la página el texto que escribió, para ello posicione el cursor sobre el texto, abra el menú Format, seleccione la opción Align y una vez allí seleccione la opción Center. c) Presione la tecla de entrada, Enter, para cambiar de línea. d) Escriba su nombre e) Alinee su nombre a la derecha así: seleccione, con el menú Format, la opción Align y una vez allí seleccione la opción Right. En este momento usted ya ha creado su primera página Web, 16 MANUAL DE ESTUDIANTES

17 Ahora debe guardarla en el disco para luego poder verla desde el navegador (Navigator). 3.2 Guardando la página Es importante recordar la importancia de mantener los archivos organizados en directorios o carpetas para su mejor localización y manejo; por lo tanto se recomienda crear un directorio en el cual usted almacene sus páginas junto con los recursos audiovisuales que éstas utilicen (archivos de gráficos, sonidos, animaciones y vídeos). Para guardar la página que acaba de crear haga lo siguiente: a) Seleccione la opción Save As del menú File. Aparecerá entonces una ventana similar a la que se muestra a continuación: En este caso, el directorio donde se guardarán las páginas se llama: EjemplosHTML. Figura 3.2 Ventana para Guardar el archivo b) Escriba en el espacio File name: el nombre con que almacenará la página en el disco (por ejemplo: primera). Note que en el campo Save in: aparece el directorio en el cual quedará grabado el documento. Los iconos que aparecen en la parte superior derecha son estándares en Windows para cambiar de directorio, crear una nueva carpeta, etc. Note además que el documento debe quedar almacenado con tipo HTML Files. 17 MANUAL DE ESTUDIANTES

18 c) Aparecerá luego una ventana en la cual debe ingresar el título con que se desplegará la página en Internet, por ejemplo: Mi Primera Página, como se muestra a continuación: Figura 3.3 Ventana para indicar el Título de la página d) En este punto su página ya estará almacenada. En la próxima sección veremos cómo acceder a su página desde el navegador. 3.3 Viendo la página con el navegador PASO 1: Entrando al Netscape Navigator En la sección anterior usted creó y guardó su primera página, ahora activaremos el Netscape Navigator para que pueda visualizar la página desde el navegador. Desde el Netscape Composer, el navegador se puede activar de varias maneras: a) Accionando la opción Navigator del menú Communicator, o b) Seleccionando el botón Preview de la barra de composición, o c) Activándolo desde Windows, accionando los menúes: Start, Programs, Netscape Communicator y finalmente Netscape Navigator. 18 MANUAL DE ESTUDIANTES

19 PASO2: Abriendo un documento Este paso se realiza si usted no se sabe de memoria la ubicación del documento. a) Seleccione del menú File la opción Open Page, con lo cual se desplegará una ventana para buscar la ubicación del hiperdocumento, como se muestra a continuación: Figura 3.4 Ventana para seleccionar una página b) Seleccione la opción Choose File para buscar el archivo que desea desplegar. Aparecerá entonces la ventana que se muestra en la figura 3.5. Puede ahora utilizar los botones de Windows para ubicar el hiperdocumento. Así, de acuerdo con el paso 4 de la sección anterior, nuestra página, con nombre primera, había quedado almacenada en el directorio EjemplosHTML del disco C: (es decir, con ruta c:\ EjemplosHTML\primera.html). Figura 3.5 Ventana para abrir una página 19 MANUAL DE ESTUDIANTES

20 Presione la opción Open de la ventana para indicarle al navegador la ubicación de la página. c) Aparecerá nuevamente la ventana del punto a), pero ahora con la localización del hiperdocumento, de la siguiente manera: Figura 3.6 Ventana con la página seleccionada d) Ahora puede presionar el botón Open, con lo cual su página será finalmente desplegada en el navegador como se muestra en la figura 3.7. Observe que la dirección tiene el prefijo file:///, lo cual indica que la página proviene de un archivo. Si la página estuviera en un servidor disponible en Internet, el prefijo sería Una vez con la página desplegada, usted puede regresar al Netscape Composer desde el menú Communicator del navegador. La página anterior es muy sencilla, en las siguientes secciones veremos cómo insertar, en una página Web, diferentes estilos de texto, agregar gráficos, enlaces, tablas, etc. Figura 3.7 Página cargada en el navegador 20 MANUAL DE ESTUDIANTES

21 CAPÍTULO 4 Edición de texto CONTENIDO 4.1 La primera página 4.2 Cómo alinear el texto? 4.3 Cómo cambiar el tipo de letra? 4.4 Cómo cambiar el tamaño de la letra? 4.5 Cómo cambiar el estilo de la letra? 4.6 Cómo cambiar el color de la letra? 4.7 Cómo agregar viñetas y listas numeradas? 4.8 Cómo cambiar el estilo de las viñetas y de la numeración? 4.9 Cómo establecer títulos y encabezados? 4.1 La primera página La página que se muestra en la figura 4.1 servirá de base para trabajar a lo largo de este capítulo en la edición del texto. Figura 4.1 Página de ejercicio 21 MANUAL DE ESTUDIANTES

22 Iniciaremos con un ejercicio para escribir el texto contenido en la página. Ejercicio #1: Escribiendo el texto sin formato Construya una página con el siguiente texto, sin preocuparse aún por el formato. Luego guarde la página con un nombre significativo (por ejemplo conferencia1.html): Congreso de Investigaciones en Salud Lugar: Gran Hotel Internacional Mi Ciudad, Mi País Fecha: 22 de noviembre del 2001 Temas Generales: Salud de la mujer Salud de las personas de tercera edad Atención a poblaciones marginales La medicina natural y la salud Presentación de Ponencias: Las ponencias deberán ser presentadas de acuerdo con el formato establecido por la Comisión Organizadora. Las ponencias deben ser recibidas por la Comisión a más tardar el 31 de julio del Contactos: Para obtener mayor información puede comunicarse con Eldoctor Pérez, a la dirección electrónica congreso@yahoo.com 22 MANUAL DE ESTUDIANTES

23 Ejercicio #2: Alineación del texto Con base en el texto que digitó al inicio del capítulo: a) Seleccione el siguiente fragmento del texto y céntrelo en la página: Congreso de Investigaciones en Salud Lugar: Gran Hotel Internacional Mi Ciudad, Mi País Fecha: 22 de noviembre del Cómo alinear el texto? a) Seleccione el texto que desea alinear. b) Seleccione el menú Format. c) Seleccione la opción Align. d) Se abrirá un menú como se muestra en la figura 4.2. e) Seleccione: Left para alinear el texto a la izquierda de la página Center para centrar el texto en la página Right para alinear el texto a la derecha de la página. b) Seleccione el siguiente fragmento del texto y céntrelo en la página: Para obtener mayor información puede comunicarse con Eldoctor Pérez, a la dirección electrónica congreso@yahoo.com Figura 4.2 Menú para alinear el texto PISTA Una forma rápida de alinear el texto es usando la barra de formato, así: a) Seleccione el texto que desea alinear b) Escoja el tipo de alineamiento seleccionando primero el icono de más a la derecha de la barra de formato, como se muestra en la siguiente figura, y luego seleccionando el icono correspondiente a la alineación a la izquierda, al centro o a la derecha: 23 MANUAL DE ESTUDIANTES Alineamiento

24 4.3 Cómo cambiar el tipo de letra? a) Seleccione el texto al cual desea modificar el tipo de letra b) Seleccione el menú Format c) Seleccione la opción Font. Se abrirá un menú como se muestra en la siguiente figura. Observe que se listan todos los tipos de letra que dispone su computadora. Ejercicio #3: Cambiando el tipo de letra Seleccione las palabras: Fecha y Lugar y cámbieles el tipo de letra. Figura 4.3 Menú para seleccionar el tipo de letra PISTA Usando la barra de formato a) Seleccione el texto al cual desea modificar el tipo de letra b) Seleccione de la barra de formato que se muestra a continuación, la opción del tipo de letra. Aparecerá entonces una lista de letras, de la cual puede seleccionar la que desee. Tipo de letra 24 MANUAL DE ESTUDIANTES

25 4.4 Cómo cambiar el tamaño de la letra? a) Seleccione el texto al cual desea modificar el tamaño de letra b) Seleccione el menú Format, c) Seleccione la opción Size. Se abrirá un menú como se muestra en la siguiente figura: Ejercicio #4: Cambiando el tamaño de letra Seleccione el texto Congreso de Investigaciones en Salud y cámbiele el tamaño de letra a 18 puntos. Figura 4.4 Menú para seleccionar el tamaño de letra PISTA a) Seleccione el texto al cual desea modificar el tamaño de letra b) Seleccione de la barra de formato, que se muestra a continuación, la opción del tamaño de letra. Aparecerá entonces una lista de tamaños, de la cual puede seleccionar el que desee. Tamaño de letra 25 MANUAL DE ESTUDIANTES

26 4.5 Cómo cambiar el estilo de la letra? Ejercicio #5: a) Seleccione el texto al cual desea modificar el estilo de letra b) Seleccione el menú Format c) Seleccione la opción Style. Se abrirá un menú como se muestra en la siguiente figura: Cambiando el estilo de letra a) Ponga en letra negrita cada uno de los siguientes textos: Congreso de Investigaciones en Salud Fecha Lugar c) Ponga en letra itálica los siguientes textos: d) Note que las posibles opciones son: Figura 4.5 Menú para seleccionar el estilo de letra Gran Hotel Internacional Mi Ciudad, Mi País 22 de noviembre del 2001 Bold Italic Underline Strikethrough Superscript Subscript Blinking Nonbreaking Letra negrita Letra cursiva Subrayado Tachado Super índice Subíndice Letra intermitente Sin fin de línea, el renglón es de tamaño infinito PISTA La barra de formato se puede utilizar para cambiar rápidamente el estilo de un texto, si el estilo deseado es negrita, cursiva o subrayado, tal como se ilustran las opciones de la siguiente figura: Negrita Cursiva Subrayada 26 MANUAL DE ESTUDIANTES

27 Ejercicio #6: Cambiando el color de letra Seleccione el fragmento de texto que desee y cámbiele de color con alguno de los métodos anteriores. 4.6 Cómo cambiar el color de la letra? a) Seleccione el texto al cual desea modificar el color de la letra. b) Seleccione el menú Format. c) Seleccione la opción Color... Se abrirá un menú con la paleta de colores, de la cual podrá escoger el color que desee. PISTA Use la barra de formato que se muestra a continuación para cambiar el color de la letra: Color de la letra 4.7 Cómo agregar viñetas y listas numeradas? Si ya escribió el texto: a) Seleccione el segmento de texto al que desea ponerle numeración o viñetas b) Seleccione el menú Format. c) Seleccione la opción List. Se abrirá un menú con las opciones posibles, tal y como se muestra en la figura 4.6. Una vez seleccionada la opción, el texto quedará modificado. Si aún no ha escrito el texto y desea que la lista se vaya construyendo conforme escribe, entonces: a) Coloque el cursor al inicio del párrafo donde va a escribir el texto. b) Seleccione el menú Format. c) Seleccione la opción List. d) Se abrirá un menú con las opciones posibles, tal y como se muestra en la figura MANUAL DE ESTUDIANTES

28 Ejercicio #7: Agregando viñetas Agregue viñetas al siguiente texto que escribió al inicio del capítulo (o escríbalo si aún no lo ha hecho): Salud de la mujer Salud de las personas de tercera edad Atención a poblaciones marginales Avances en cardiología e) Una vez seleccionada la opción, aparecerá la primera viñeta o el primer número. Luego, conforme usted termine el párrafo y presione la tecla de entrada (<Enter>), el Composer irá colocando las siguientes viñetas automáticamente. Figura 4.6 Menú para seleccionar viñetas Note que las posibles opciones son las siguientes: None Elimina las viñetas y/o la numeración Bulleted Coloca viñetas ( ) Numbered Coloca números Description Separa la lista con una marca de párrafo, pero no coloca una viñeta visible Directory Coloca viñetas ( ) Menu Coloca viñetas ( ) Para cambiar el tipo de viñeta o número refiérase a la sección siguiente. PISTA a) Se puede poner numeración y viñetas al texto ya existente o iniciar un párrafo con nueva numeración y/o viñetas. Si el texto ya está escrito simplemente debe seleccionarlo y luego presionar la opción de viñetas o de numeración de la barra de formato. b) También puede seleccionar primero la opción de numeración o la de viñetas de la barra de formato, con lo cual Netscape Composer coloca la primera viñeta o el primer número, y luego al terminar la línea y presionar la tecla de entrada (<Enter>), aparecerá automáticamente la siguiente viñeta o número. Viñetas Numeración 28 MANUAL DE ESTUDIANTES

29 4.8 Cómo cambiar el estilo de las viñetas y de la numeración? Nota: Para cambiar el estilo de las viñetas o de la numeración de una lista de ítems, debe existir al menos un ítem en la lista. a) Coloque el cursor en un ítem de la lista. b) Seleccione la opción Character Properties del menú Format. Dependiendo del estilo (Style) de la lista que puede ser Numbered List o Bullet (Unnumbered) List aparecerán las opciones para hacer una lista numerada o una lista con viñetas. Las figuras 4.7 y 4.8 muestran las posibles opciones de numeración y viñetas que permite Netscape Composer. Ejercicio #8: Cambiando el estilo de las viñetas Figura 4.7 Cambio de estilo de numeración. a) Seleccione el siguiente fragmento de texto, que escribió al inicio del capítulo (o escríbalo ahora si no lo hizo antes): Las ponencias deberán ser presentadas de acuerdo con el formato establecido por la Comisión Organizadora. Las ponencias deben ser recibidas por la Comisión a más tardar el 31 de julio del Figura 4.8 Cambio de estilo de viñetas. b) Póngales un estilo de viñeta diferente al que usted haya utilizado anteriormente. 29 MANUAL DE ESTUDIANTES

30 Ejercicio #9 Poniendo encabezados Ponga los títulos Temas generales, Presentación de Ponencias, y Contactos como encabezados de tipo 2 (Heading 2). 4.9 Cómo establecer títulos y encabezados? a) Si el texto ya está escrito, seleccione el texto al que quiere dar formato de título. b) Luego seleccione la opción Heading del menú Format (ver figura 4.9). c) Elija el tipo de encabezado (1 es el título mayor y 6 es el título menor). d) Nota: Si prefiere indicar el tipo de encabezado antes de escribir el texto, seleccione directamente la opción Heading del menú Format (ver figura 4.9), seguido del tipo de encabezado (1 es el título mayor y 6 es el título menor). El cursor cambiará de tamaño de acuerdo con el tipo de encabezado seleccionado y usted podrá empezar a escribir el texto. Netscape Composer provee estilos de texto predefinidos para escribir títulos o encabezados que destaquen en las páginas. Observe los títulos que aparecen en la hoja de la figura 4.10 que se muestra en la siguiente página. El encabezado Catálogo de Libros (por área) se hizo con el estilo denominado Heading 1 y los encabezados Artes y Humanidades, Computación e Informática y Educación con el estilo denominado Heading 2. El Netscape Composer tiene seis tipos de encabezados predefinidos, que son útiles para que usted no tenga que definir el estilo de cada título y subtítulo dentro de la página. Realice el ejercicio 9 para hacer encabezados. Figura 4.9 Selección del encabezado 30 MANUAL DE ESTUDIANTES

31 Figura 4.10 Ejemplo de diferentes encabezados PISTA a) Utilice la barra de formato para cambiar el estilo de encabezado (ver figura 4.11). Si el texto ya está escrito, selecciónelo, luego seleccione la opción de estilo de la barra y el tipo de encabezado que aparece en la lista (Heading 1 es el título mayor y Heading 6 es el título menor). b) Si prefiere indicar el tipo de encabezado antes de escribir el texto, seleccione directamente la opción de estilo de la barra de formato. El cursor cambiará de tamaño de acuerdo con el tipo de encabezado seleccionado y usted podrá empezar a escribir el texto. Figura 4.11 Selección de encabezado desde la barra de formato 31 MANUAL DE ESTUDIANTES

32 CAPÍTULO 5 Inclusión de elementos gráficos CONTENIDO 5.1 Insertando líneas de división 5.2 Insertando una imagen 5.3 Algunas opciones del Netscape Composer al incorporar imágenes en páginas Web Modificación de la imagen Colocar la imagen como fondo Alineamiento de las imágenes con respecto al texto Cambio del tamaño de la imagen Hacer un marco alrededor de la imagen Despliegue de imágenes 5.1 Insertando líneas de división a) Seleccione el menú Insert. b) Seleccione la opción Horizontal Line, tal y como se muestra en la siguiente figura: Figura 5.1 Menú para insertar líneas de división Ejercicio #1: Insertando dos líneas de división Use conferencia1.html, página que se ha construido a lo largo de este manual, e inserte dos líneas de división, una antes del texto Lugar y otra después de fecha, tal y como se muestra en la figura 5.2. Figura 5.2 Una página con líneas de división 32 MANUAL DE ESTUDIANTES

33 Ejercicio #2: Insertando una imagen en la página del ejercicio a) Utilice la página conferencia1.html e inserte cualquier imagen que usted tenga almacenada en su disco duro. b) Reduzca el tamaño de la imagen que insertó de tal manera que sea apenas una ilustración al lado del título Congreso de Investigaciones en Salud. 5.2 Insertando una imagen La imagen que usted va a insertar, debe estar almacenada en algún directorio de su disco duro o servidor. Netscape Composer permite insertar imágenes que están almacenadas en los formatos: gif, jpg y jpeg. a) Seleccione la opción Image... del menú Insert o seleccione el icono de Image de la barra de Composición. Aparecerá entonces lo que se muestra en la figura 5.3. b) Coloque el nombre del archivo que contiene la imagen en el espacio titulado Image location - Enter a remote URL or local file. Si desconoce el nombre o la ubicación del archivo, puede buscarlo seleccionando la opción Choose File... Al seleccionar esta opción, aparecerá una ventana (ver figura 5.4) estándar de Windows que le permitirá buscar el archivo a insertar. Como se mencionó anteriormente las imágenes deben estar almacenadas en su computadora o en su servidor para poder insertarlas. Las imágenes se pueden obtener de diferentes lugares. Ubicación y nombre del archivo que contiene la imagen Alineamiento de la imagen con respecto al texto Coloca la imagen como fondo Dimensión de la imgaen Espacio alrededor de la imagen Figura 5.3 Ventana para selección de la imagen 33 MANUAL DE ESTUDIANTES

34 Figura 5.4 Ventana para seleccionar la imagen a insertar Se pueden usar imágenes que vengan con Windows o con algún programa de dibujo instalado en su computadora, También se pueden bajar imágenes de Internet. Algunas palabras comunes para buscar, en Yahoo ( o Altavista ( sitios que contengan imágenes son: clipart, bitmaps, graphics, background, icons y art. Se pueden también utilizar fotografías o cualquier tipo de imagen que se pueda digitalizar. 5.3 Algunas opciones del Netscape Composer al incorporar imágenes en páginas Web Modificación de la imagen: Si desea realizar algún cambio a la imagen, puede hacerlo seleccionando la opción Edit Image Colocar la imagen como fondo: Si usted desea que la imagen aparezca como el fondo de la página, entonces marque el botón correspondiente a Use as background Alineamiento de las imágenes con respecto al texto: Los botones que aparecen en el área denominada Text aligment and wrapping around images tienen el propósito de ubicar la imagen con respecto al texto que está a su alrededor. La imagen puede ser colocada a la izquierda de la página y el texto a su derecha, en la parte superior, en el medio o en la parte inferior. También la imagen puede ser colocada a la izquierda o a la derecha, con texto alrededor Cambio del tamaño de la imagen: Usted puede cambiar el tamaño de la imagen cambiando los valores de la altura (Height) y el ancho (Width) de la imagen que aparecen en el área denominada Dimensions de la figura 5.3. Para reestablecer el tamaño original simplemente presione el botón denominado Original Size. La opción Constrain provoca que el cambio de tamaño se lleve a cabo en forma proporcionada Hacer un marco alrededor de la imagen: En el área denominada Space around image se establece un marco alrededor de la imagen, para que no quede demasiado pegada al 34 MANUAL DE ESTUDIANTES

35 texto. Si se desea que el marco se vea, entonces se indica una cantidad de pixeles diferente de cero en el área denominada Solid border Despliegue de imágenes Las imágenes muy grandes requieren mucho tiempo para ser cargadas. Netscape Composer incluye la opción Alt. Text / LowRes... para que aparezca algún texto mientras la imagen es cargada o aparezca una imagen de menor resolución (calidad) mientras la imagen definitiva es cargada. La ventana que aparece al seleccionar esta opción es la siguiente: Figura 5.5 Propiedades de una imagen alterna En el área Alternate text usted puede escribir el texto que desea que aparezca mientras la imagen se está cargando. En el área Low resolution image puede colocar la ubicación y el nombre del archivo de baja resolución que usted desea que aparezca mientras se carga la imagen definitiva; también puede seleccionar esa imagen de baja resolución por medio de la opción Choose File.... Esta facilidad sirve para agregar dinamismo en el momento del despliegue a páginas que contienen imágenes muy grandes, pues ayuda a disminuir el tiempo de espera cuando las páginas están siendo transferidas. 35 MANUAL DE ESTUDIANTES

36 CAPÍTULO 6 Creación de enlaces para la navegación CONTENIDO 6.1 Qué es un enlace? 6.2 Cómo establecer un enlace? 6.3 Cómo eliminar un enlace? 6.4 Cómo establecer enlaces dentro de una misma página? 6.1 Qué es un enlace? Un enlace es una relación que se establece de una página fuente a otra destino. Al hacer click sobre el enlace de la página fuente, se activa la página destino. A los elementos de la pantalla que contienen los enlaces se les conoce como palabras calientes o imágenes calientes. Esta es una de las formas más comunes de navegación entre páginas de la Web. Para establecer un enlace se requieren al menos dos páginas Web. Como ejemplo utilizaremos la página Web que se desarrolló a partir del capítulo 4 de este manual para convocar a una conferencia internacional que vemos a continuación. Suponga que vamos a enlazar esta página con una página en la Figura 6.1 Página fuente para establecer un enlace 36 MANUAL DE ESTUDIANTES

37 Figura 6.2 Página destino del enlace cual se explica el formato del documento para la presentación de la ponencia. Para hacerlo breve, construya una página con la información que se muestra en la figura 6.2 y guárdela con el nombre conferencia2.html. Luego estableceremos el enlace desde la página de la figura 6.1 para que, cuando se haga click sobre la palabra formato que aparece en la sección Presentación de Ponencias, se active la página de la figura 6.2. Figura 6.3 Enlace entre las páginas 37 MANUAL DE ESTUDIANTES

38 Ejercicio #1: Insertando otro enlace Seleccione la palabra Congreso de la página conferencia2.html y establezca un enlace hacia conferencia1.html. 6.2 Cómo establecer un enlace? Tal y como se mencionó anteriormente, para establecer un enlace se requieren dos páginas. En esta sección deseamos establecer un enlace entre la página de la figura 6.1 y la de la figura 6.2, de la siguiente manera: a) Abra la página fuente (por ejemplo la de la figura 6.1, que se llama conferencia1.html). b) Seleccione el texto que usted desea que sea el enlace. Para este ejemplo, seleccione la palabra formato de la página de la figura 6.1. c) Seleccione la opción Link del menú Insert o seleccione el icono Link de la barra de composición. Aparecerá la siguiente ventana: Figura 6.4 Ventana para manejo de enlaces d) Escriba el nombre del archivo que contiene la página destino (la de la figura 6.1) o selecciónelo del disco duro con la opción Choose File... e) Presione el botón OK y ya estará establecido el enlace. f) Guarde la página. Para probar que el enlace funciona, abra la página fuente con Netscape Navigator y haga click sobre la palabra formato establecida como enlace. Deberá activarse la página destino. 6.3 Cómo eliminar un enlace? 38 MANUAL DE ESTUDIANTES

39 Ejercicio #2: Eliminando un enlace entre páginas Elimine el enlace que hizo en el ejercicio de la sección anterior; es decir, elimine el enlace que estableció entre la palabra Congreso de conferencia2.html y conferencia1.html. a) Abra la página donde fue establecido el enlace (por ejemplo, la página de la figura 6.1 que tiene un enlace en la palabra formato ). b) Seleccione el texto establecido como enlace (la palabra formato ). c) Seleccione la opción Link del menú Insert o seleccione el icono Link de la barra de composición. Aparecerá la ventana que se muesta en la figura 6.5. d) Presione el botón Remove Link y luego el botón OK para que el enlace quede eliminado. e) Guarde la página. 6.4 Cómo establecer enlaces dentro de una Figura 6.5 Ventana para eliminar un enlace 39 MANUAL DE ESTUDIANTES

40 misma página? Enlazar secciones dentro de una misma página es útil para presentar la información de páginas muy grandes; por ejemplo, para hacer documentos en los que al inicio de la página aparece la tabla de contenido y, al hacer click sobre cada título, el control se traslada a la sección correspondiente. Un ejemplo de ello se muestra en la figura 6.6. En Netscape Composer las secciones se enlazan colocando marcas denominadas enlaces internos o anclas al inicio de las secciones a las que se quiere llegar (secciones destino ). Así, para el ejemplo de la página de la figura 6.6, se deberán colocar tres anclas: una al inicio de la sección Temas generales:, otra al inicio de la sección Presentación de Ponencias: y otra al inicio de la sección Contactos:. Luego, se colocan los enlaces para navegar a cada una de esas secciones. Para este ejemplo se deben establecer tres enlaces: uno en el título 1. Temas generales, otro en 2. Presentación de Ponencias y el último en 3. Contactos. Para agregar anclas y construir una página como la de la figura 6.6 haga lo siguiente: a) Abra la página conferencia1.html que ha estado desarrollando a lo largo de este manual. b) Coloque las anclas de la siguiente manera: Figura 6.6 Ejemplo de enlaces ( targets ) dentro de un mismo documento. 40 MANUAL DE ESTUDIANTES

41 Figura 6.7 Ventana para nombrar un target. b.1) Coloque el cursor al inicio de la sección Temas generales: b.2) Seleccione la opción Target... del menú Insert. Aparecerá la ventana que se ve en la figura 6.7. b.3) En esta ventana debe digitar un nombre que identificará al ancla. Es recomendable escoger un nombre relacionado con los tópicos de la sección que se está anclando. Coloque, por ejemplo, el nombre Temas y luego presione el botón OK. b.4) Aparecerá un icono que identifica al ancla contiguo al título Temas generales:, de la siguiente manera: b.5) Para la sección Presentación de Ponencias coloque un ancla con nombre Presentación y para la sección Contactos coloque un ancla con su mismo nombre. Aparecerán en cada caso los iconos que indican la presencia de un ancla. c) Agregue el siguiente texto para establecer los enlaces, tal y como se muestra en la figura 6.6: Ejercicio #3: Insertando elaces locales Construya enlaces locales dentro de la página conferencia2.html. Contenido de esta página 1. Temas generales 2. Presentación de Ponencias 3. Contactos d) Establezca los enlaces de la siguiente manera: d.1) Seleccione el título 1. Temas generales del área de contenido de la página. d.2) Seleccione la opción Link... del menú Insert para establecer el enlace. Aparecerá entonces la ventana que se ve en la figura 6.8. Note que muestra la lista de anclas que usted estableció en el 41 MANUAL DE ESTUDIANTES

42 Figura 6.8 Ventana para seleccionar anclas. punto b). d.3) Seleccione el nombre del ancla Temas con lo cual se establecerá un enlace entre el título 1. Temas generales de la sección de contenido con la sección Temas generales:. El título 1. Temas generales cambiará de color para indicar que es un enlace. d.4) Repita este mismo paso para establecer los enlaces de los títulos 2. Presentación de Ponencias y Contactos con sus respectivas secciones dentro de la página. e) Guarde la página y active el Netscape Navigator para probar las anclas de la página. 42 MANUAL DE ESTUDIANTES

43 CAPÍTULO 7 Elaboración de tablas CONTENIDO 7.1 Qué es una tabla? 7.2 Cómo insertar una tabla con Netscape Composer? 7.3 Cómo agregar una fila, una columna o una sola celda? 7.4 Cómo borrar una fila, una columna, una sola celda o la tabla completa? 7.5 Cómo cambiar la apariencia de una tabla? 7.1 Qué es una tabla? Una tabla sirve para mostrar información organizada por filas y columnas. Un horario, un menú, una lista de productos con su cantidad y su precio, y un presupuesto para todos los meses del año, son ejemplos de información que podría ser colocada en tablas. A cada espacio donde converge una fila con una columna se le llama celda, Veamos a continuación un ejemplo de una tabla que registra las ventas de algunos productos durante los dos semestres del año. Aquí el número 475 está ubicado en la celda correspondiente a la fila 4 y la columna 2: FILA 1 FILA 2 FILA 3 FILA 4 COLUMNA 1 COLUMNA 2 COLUMNA 3 Producto De enero a julio De agosto a diciembre Borradores Cuadernos Lápices Cómo insertar una tabla con Netscape Composer? En esta sección se utilizará como base la página conferencia2.html desarrollada en el capítulo anterior, la cual se muestra en la siguiente página (figura 7.1). Se desea modificar el contenido de esta página para que luzca como en la figura MANUAL DE ESTUDIANTES