internet y diseño de páginas web -...

Taller de Matemáticas

Internety

Diseño de páginas web

Por José Vicente Manga

Curso: Taller de Matemáticas - Septiembre 2003

2

INTRODUCCIÓN

Los presentes apuntes se centran en la práctica del acceso y la utilización de Internet y deldiseño de páginas web. Otras consideraciones teóricas o históricas sobre el inicio de Internet odel lenguaje HTML, o sobre la programación detallada de las páginas web, puede encontrarse enInternet en multitud de sitios web, entre los que señalo algunos a continuación:

• Este sitio web es muy recomendable por sucontenido variado y de calidad. Podemos encontrar aquí manuales sobre redes,programación y diseño de páginas web, entre otros.( www.htmlweb.net )

• Esta dirección lleva a un manual sobre el lenguaje HTML interactivo bastante asequible.(www.geocities.com/SiliconValley/2915/man000.htm)

• Está dirección corresponde a un Tutorial de HTML alojado en un servidor de laUniversidad de Murcia. ( www.um.es/~psibm/tutorial/ )

• Otro manual interactivo de HTML. ( www.ivia.es/htmlref/htmlref.html )

A continuación, también aparecen algunas direcciones en las que podemos encontrarrecursos gráficos útiles para la creación de páginas web:

• Taller de HTML - Además de un manual sobre HTML podemos encontrar multitudde recursos para la creación de páginas web.(www2.uca.es/taller-html/taller-html.html)

• Ciudad GIF - Imágenes en formato .gif(www.geocities.com/CapitolHill/Congress/7305)

• Aquí encontraremos algunas imágenes animadas en formato .gif(www.geocities.com/Yosemite/Geyser/1149)

• Más imágenes animadas en formato .gif (www.gifmania.com)

• MundoGif - Más de lo mismo.(www.geocities.com/SiliconValley/Peaks/2159/MUNDO-GIF.htm)


3

Internet

Curso: Taller de Matemáticas - Septiembre 2003Internet

4José Vicente Manga

INTERNET

1.- Cómo conectarse a Internet.

Actualmente podemos conectarnos a Internet a través de la línea telefónica básica (RTC),o bien, a través de una línea telefónica de banda ancha (DSL o cable). La diferencia fundamentalentre uno y otro tipo de línea está en la velocidad a la que los datos son transmitidos entre nuestroordenador e Internet, que siempre es menor cuando utilizamos la línea telefónica básica.

Otro inconveniente de la línea telefónica básica es que, durante la conexión a Internet, lalínea telefónica permanecerá ocupada, por lo que no podremos recibir llamadas telefónicas en esosmomentos. Con las líneas de banda ancha esto no ocurre.

Aunque, aparentemente, la mejor solución es contratar una línea telefónica de bandaancha, debemos tener en cuenta otros factores como el número de horas mensuales que utilizamosInternet y la franja horaria en la que nos conectamos. En muchas ocasiones es aconsejable utilizarla línea telefónica básica porque resulta mucho más económica. Un ejemplo de este caso seríautilizar Internet durante 10 horas al mes, a partir de las 18 horas a diario o a cualquier hora losfines de semana, disponiendo del “Bono Cuidad” de Telefónica, lo que supondría un gastomensual aproximado de 4,20€ + IVA, mientras que si utilizáramos una línea de banda ancha noscostaría alrededor de 40€ + IVA. Por supuesto que cuantas más horas nos conectemos a Internety haciéndolo entre las 8 y las 18 horas de Lunes a Viernes, más nos interesará una línea de bandaancha.

1.a.- Conexión a través de una línea telefónica básica (RTC).

Nuestro ordenador debe tener un modem instaladoen su interior, o bien, conectaremos un modem externo aun puerto serie.

El modem es el aparato que permite que nuestroordenador se comunique con otros ordenadores enInternet. Para que el modem funcione correctamente debeestar instalado en nuestro ordenador el software que leacompaña y es necesario conectarle a una toma de la líneatelefónica.

Al abrir debemos ver la carpeta . En caso contrario, seránecesario instalar el servicio de acceso telefónico a redes del sistema operativo. Para ello,accedemos al panel de control, dentro de él a “Agregar y quitar programas” y después a la ficha“Instalación de Windows”. Seleccionamos “Comunicaciones” y pulsamos el botón “Detalles”.Marcamos la casilla que se encuentra a la izquierda de “Acceso telefónico a redes” y aceptamoshasta quedar de nuevo en el panel de control.

Comprobamos ahora, abriendo el icono en el panel de control, que está instalado

el protocolo TCP/IP. En caso contrario, pulsamos el botón , seleccionamos

y pulsamos .



A continuación elegimos en la lista de fabricantes y seleccionamos en la listade protocolos de red. Pulsamos “Aceptar” y comienza la instalación del protocolo seleccionado.Durante este proceso es posible que sea necesario introducir el CD del sistema operativo y alfinalizar la instalación será preciso reiniciar el ordenador.

Ahora ya podemos crear nuestra conexión de acceso telefónico a Internet. Para ello,dentro de la carpeta , en Mi PC, abrimos el asistente para

. En la primera página escribimos el nombre que servirá para quepodamos identificar nuestra conexión de accesotelefónico a redes en el ordenador, yseleccionamos el modem que deberá utilizarse.Pasamos a la página siguiente e introducimos elnúmero de teléfono de acceso al nodo decomunicaciones de la compañía telefónica quenos permita realizar la conexión a Internet. Parael MECD es el número 901929200. Pulsamos elbotón “Siguiente” y a continuación “Finalizar”.

Para terminar de configurar nuestraconexión de acceso telefónico a redes, situamosel puntero del ratón sobre el icono que acabamosde crear y, pulsando el botón derecho, elegimos“Propiedades”. En la página que aparecepulsamos en “Tipo de servidor” y en la nuevapágina dejamos marcada, solamente, la casilla delTCP/IP y pulsamos el botón “ConfiguraciónTCP/IP”.

La nueva página debe configurarse como aparece en lailustración de abajo para conectarnos a Internet a través delCNICE.

El número deteléfono del nodo deacceso, los datos delDNS, el nombre deu s u a r i o y l acon t raseña sonfacilitados por lacompañía con la quecon t r a t emos e lservicio de acceso aInternet o, en el caso de los docentes de este país, porel CNICE. En este último caso, podemos utilizar,además de las DNS principal y secundaria que semuestran a la izquierda, las siguientes: DNS principal:195.53.123.44 y DNS secundaria: 193.144.238.1

Por último pulsamos “Aceptar” hasta volver a la carpeta de Acceso telefónico a redes.



Ahora hacemos doble clic en el iconode nuestra conexión a Internet ,introducimos el nombre de usuario y lacontraseña y pulsamos en “Conectar”. Trasunos segundos, en los que nuestro ordenadornegocia las condiciones de conexión con elservidor al que se conecta, se establece laconexión a Internet.

Mientras la conexión a Internet estáabierta se muestra un icono con dos pequeñosordenadores en la parte derecha de la barra detareas de Windows. Pinchando en este iconopodemos desconectarnos de Internet.

Para hacer más cómoda la conexión a Internet, podemos crear un icono de acceso directoa nuestra conexión de acceso telefónico. Para ello, con el puntero del ratón sobre el icono denuestra conexión, pulsamos el botón derecho y seleccionamos “Crear acceso directo”. Elordenador nos mostrará la siguiente advertencia:

Pulsamos en “Si” y ya tenemos nuestro icono deacceso telefónico en el escritorio.

1.b.- Conexión mediante una línea de banda ancha.

Existen distintas formas de conectarse en función de que se utilice una línea ADSL, un kitADSL (conexión ADSL sobre una línea telefónica básica) o una conexión telefónica por cable(Retecal). En cualquier caso, es siempre recomendable que un técnico de la compañía con la quecontratemos la línea, nos instale la línea y los circuitos necesarios en el ordenador, y configure elmodem o el router (aparato similar al modem que se usa para conectar el ordenador a una líneaADSL) adecuadamente.

2.- Navegación por Internet.

Si disponemos de una conexión que utiliza la línea telefónica básica, hemos de conectarnosa Internet antes de poder navegar. En una conexión de banda ancha sólo necesitamos abrir alnavegador de Internet, pues al arrancar el ordenador ya quedamos conectados a la red.

Veremos aquí como utilizar Internet Explorer (el navegador de Internet de Microsoft),dado que está en todos los ordenadores, si bien existen muchos otros navegadores de Internet.

Arranque del navegador de Internet.

El icono con una la letra e azul pone en marcha el navegador y, cuando le abrimos por primeravez, nos muestra una página web de Microsoft relativa al propio navegador.

La página de inicio.

La página de inicio es la que se muestra cada vez que se pone en marcha el navegador deInternet.

Para cambiar la página web que se mostrará por defecto al abrir el explorador, debemosacceder a las “Opciones de Internet” que encontramos en el menú “Herramientas”, y en elrecuadro “Dirección” de la ficha “General”, escribimos la dirección de Internet que deseamos quese muestre cada vez que se inicie el explorador. Podemos, también, pulsar el botón “Usar páginaen blanco” para que no muestre ninguna página web al iniciarse, o bien, pulsar el botón “Usaractual” para que la dirección de la páginaweb que esté visualizándose en esemomento, pase al recuadro “Dirección” ysea la página de inicio de ahí en adelante.

Visitar una página web.

Basta con escribir la dirección de la página web que deseamos visitar en la barra dedirecciones y pulsar <Intro> para queel navegador muestre su contenido.

Los hiperenlaces.

Cuando visualizamos una página web podemos acceder a nuevas páginas u otrainformación a través de los hipervínculos o hiperenlaces. Un hipervínculo es una palabra o unaimagen asociada a una página web, de forma que, haciendo clic sobre ella, el navegador muestrala página asociada. De esta forma (utilizando los hipervínculos) podemos movernos de una páginaweb a otra sin necesidad de escribir su dirección en la barra de direcciones.

Cuando situamos el puntero del ratón sobre un hipervínculo, cambia su forma de flechapor una mano, lo que nos indica que, si hacemos clic sobre él, nos mostrará otra página web.

Actualizar la página.

A veces, al cargarse una página en nuestro navegador, algunos elementos no se muestran.En ese momento podemos pulsar sobre el botón “Actualizar” para que se recargue la página y,probablemente, los elementos que no se habían cargado en un primer momento se cargarán ahoray serán mostrados por el navegador.

Imprimir la página que estamos visualizando.

Basta con pulsar el icono “Imprimir”, de la barra de herramientas del navegador, para quese envíe la página a la impresora. También podemos situar el puntero del ratón sobre algún lugarinactivo de la página que vemos y, pulsando el botón derecho del ratón, elegir “Imprimir”. Casisiempre (sobre todo si la página que deseamos imprimir está formada por varios marcos)aparecerá una ventana de diálogo de impresión, en la que podremos hacer algunos ajustes antesde que la página sea enviada a la impresora.



Los favoritos.

Los favoritos son las direcciones de Internet que nos interesa recordar. Con el fin defacilitar la posterior conexión a esas páginas, el navegador dispone de una carpeta llamada“Favoritos” a la que accedemos pulsando sobre el botón correspondiente de la barra deherramientas. Para añadir la dirección de la página web que estamos visualizando basta con pulsarel botón derecho del ratón, elegir “Agregar a Favoritos” y confirmar los datos de la página.

El historial.

Cuando navegamos por Internet, toda la información (texto e imágenes) que vemos en lasdistintas páginas web queda almacenada en nuestro ordenador de forma permanente. En las“Opciones de Internet” podemos configurar durante cuanto tiempo queremos que esos archivospermanezcan en nuestro ordenador.

Si pulsamos el botón “Historial” aparece una lista de enlaces a las páginas visitadas(durante los últimos 20 días, por defecto), de manera que podremos volver a ellas con solo hacerclic en el enlace correspondiente.

Ver las páginas web sin estar conectado a Internet.

Una forma de ahorrar tiempo de conexión a Internet, y con ello ahorrar dinero si nosconectamos mediante la línea telefónica básica y un modem, consiste en visualizar las páginas webque nos interesan sin analizar en ese momento la información que contienen, pasando rápidamentede una a otra en cuanto termina la carga de todos los elementos de cada una.

Posteriormente, sin conectarnos a Internet, abrimos el navegador y seleccionamos“Trabajar sin conexión” en el menú “Archivo”, hacemos clic en “Historial” y visualizamos laspáginas analizando la información durante todo el tiempo que necesitemos.

Mientras trabajamos sin conexión a Internet, los hiperenlaces asociados a páginas que nofueron cargadas previamente no funcionan, dando lugar su activación a un mensaje de advertenciay la posibilidad de conectarnos a Internet en ese momento o continuar trabajando sin conexión.

2.a.- Búsqueda de información en Internet.

En Internet existe mucha información en diferentes formatos y la mayor parte no tieneutilidad, o bien, sería discutible su uso, por lo que se hace imprescindible buscar la informaciónque nos pueda interesar, filtrándola del resto de la información.

Disponemos en Internet de páginas web que nos facilitan la búsqueda. Son páginas de

acceso a índices ( , ) o a buscadores ( , , ).

Los índices son grandes bases de datos que contienen informaciones sobre páginas web,organizadas en categorías, a las que accedemos mediante un índice hipertextual, eligiendo primerola categoría, después una subcategoría (a veces nos encontramos varios niveles categorizados)y al final accedemos a una lista de páginas web relacionadas con el tema que hayamos elegido.Este sistema de búsqueda es adecuado cuando no tenemos una idea clara de la información quebuscamos, es decir, cuando buscamos cualquier recurso relacionado con un determinado tema.



Las páginas de acceso a los índices suelen disponer también de la posibilidad de buscardeterminadas palabras dentro de la base de datos, para localizar rápidamente las páginas en lasque aparezcan dichas palabras.

Los buscadores son grandes ordenadores dedicados exclusivamente a recopilarinformación, de forma automática, de las páginas web disponibles en Internet, almacenarla en susbases de datos y permitirnos realizar búsquedas dentro de ellas. Generalmente, las bases de datosde estos buscadores contienen más información y está más actualizada que en el caso de losíndices. Cuando buscamos algo muy concreto son, sin duda, la mejor opción. Actualmente, unode los mejores buscadores es (www.google.com).

Para realizar una búsqueda con Google o con otros buscadores similares, basta conescribir en el campo de búsqueda la palabra (o palabras separadas por espacios) que deseamosbuscar en las páginas web. El buscador nos devolverá una lista de páginas clasificada por las quemuestren mayor coincidencia con el criterio de búsqueda (que contengan todas las palabrasbuscadas) y, a continuación, las páginas que coincidan con alguna de las palabras que formenparte de ese criterio.

Si deseamos localizar algo como “matemáticas en educación secundaria” lo escribiremosasí, es decir entrecomillado, y el buscador lo interpretará como si se tratara de una sola palabra.También podemos combinar un entrecomillado con otras palabras, separando con un espacio elentrecomillado y la otra palabra que deseamos buscar.

Siempre es recomendable utilizar un criterio de búsqueda lo más estricto posible y, si nose producen resultados, eliminar alguna palabra del criterio de búsqueda y buscar de nuevo, puesde otra forma, obtendremos una lista de resultados demasiado grande. Además, después de lasprimeras dos o tres páginas de resultados, no suelen encontrarse páginas útiles.

Los buscadores más actualizados admiten acentos, pero otros no, por lo que será buenointentar la búsqueda introduciendo las palabras acentuadas y, si no se obtiene el resultadoesperado, probar a continuación sin acentuar.

2.b.- Extracción de los recursos encontrados para usarlos de forma local.

Una vez localizada la información en Internet, en el caso de querer copiar esa informaciónpara usarla de forma local (en ordenadores sin conexión a Internet), por ejemplo paraconfeccionar apuntes o para realizar alguna composición multimedia para el aula, procederemosasí:

Si es texto:

• Seleccionamos el texto que nos interese mediante el puntero del ratón.

• Pulsamos el botón derecho del ratón con el cursor sobre el texto seleccionado yelegimos “copiar” en el menú contextual.

• Abrimos Word o cualquier otro procesador de textos y pegamos el texto en una páginaen blanco o en el documento que nos interese.



Si es una imagen (1):

• Situamos el puntero del ratón sobre la imagen y pulsamos el botón derecho del ratón.

• Elegimos “copiar” en el menú contextual.

• Abrimos Word o cualquier otro procesador de textos que admita imágenes o bien, unprograma de tratamiento de gráficos y pegamos la imagen en él.

Si es una imagen (2):

• Situamos el puntero del ratón sobre la imagen y pulsamos el botón derecho del ratón.

• Elegimos “Guardar la imagen como” en el menú contextual.

• Seleccionamos el destino, damos nombre a la imagen y pulsamos Guardar.

Si es un archivo que no se abre en Internet (descargar un archivo):

• Pulsamos sobre el enlace de hipertexto que conduce al archivo.

• Seleccionamos el destino del archivo en nuestro ordenador y pulsamos Guardar.

Si es un archivo que se abre desde Internet (.doc, .pdf,....) porque tenemos instalado ennuestro ordenador el programa con el que fue creado, pero, en vez de abrirlo, solo queremosguardarlo en el disco duro:

• Situamos el puntero del ratón sobre el enlace de hipertexto que conduce al archivo.

• Pulsamos el botón derecho del ratón y elegimos “Guardar destino como”

• Seleccionamos el destino del archivo en nuestro disco duro y pulsamos Guardar.

Si es un programa Java que se ejecuta dentro de una página web (para usuarios avanzados):

En el menú del navegador Internet Explorer elegimos Ver - Código fuente. Buscamosdentro del código el nombre del archivo Java (.class). Desde el Explorador de Windows abrimosla carpeta “Archivos temporales de Internet” de nuestro sistema y buscamos en ella el archivoJava del que ya sabemos el nombre. Una vez localizado lo copiamos a otra carpeta (si tiene unnúmero entre corchetes en el nombre debemos borrarlo y dejar el nombre sin número nicorchetes).

A continuación creamos una página web en la que deberá aparecer la o las líneas decódigo que ponen en marcha el programa Java y que copiaremos del código fuente de la páginaen la que hemos localizado el recurso Java. Guardamos nuestra página web en la misma carpetadonde está el programa Java y al abrir nuestra página con el navegador de Internet se pondrá enmarcha el programa Java.

En ocasiones el programa Java principal necesita llamar a otros programas para poderfuncionar correctamente. En ese caso, cuando intentemos poner en marcha nuestra página webcon el programa Java, debemos fijarnos en los mensajes de error que se muestren, pues ellos nosdirán los nombres de los archivos complementarios que deberemos buscar en la carpeta “Archivostemporales de internet” y copiar a la carpeta donde tenemos nuestra página web para que todofuncione correctamente.



3.- El correo electrónico.

Descripción del correo electrónico.

El correo electrónico, llamado también habitualmente e-mail, es la aplicación más

extendida en Internet. Permite al usuario enviar y recibir mensajes escritos a otros usuarios de lared situados en cualquier lugar del mundo, siempre que dispongan de una dirección de correoelectrónica (e-mail address).

Una característica importante del correo electrónico es, que no es necesario que el

destinatario de un mensaje esté frente a la pantalla en el momento en que otro usuario se lo envía.Y tampoco es necesario que su ordenador esté conectado a la red o que esté encendido. Losmensajes que le llegan se almacenan en el ordenador servidor de correo en el que el destinatarioestá dado de alta. Después, cuando éste se conecta con su servidor utilizando su programa decorreo electrónico, los mensajes se descargan en el ordenador del destinatario y, generalmente,se borran del servidor.

El correo electrónico se está convirtiendo en un importante medio de comunicación

porque, además de ser rápido y económico, ofrece muchas posibilidades: permite intercambiarinformación, comunicar ideas, debatir temas, compartir ficheros, editar y revisar documentos, etc.

Dirección electrónica.

Para hacer uso del correo electrónico es necesario contar con una dirección electrónica(o dirección e-mail). La dirección de correo electrónico proporciona toda la información necesariapara que pueda enviarse un mensaje hasta cualquier parte del mundo.

Aunque las direcciones de correo electrónico pueden parecer a primera vista algo extrañasy a veces incomprensibles, hay una lógica en su construcción que es importante conocer paraaprender a descifrarlas. Las direcciones e-mail se componen siempre de tres partes:

Identificador del usuario

el signo @

Dominio o dirección del servidor del usuario (donde tiene abierta su cuenta)

Ejemplo:

Una dirección e-mail de un usuario del servidor de correo de Terra tiene la forma:

[email protected]

Las direcciones de correo electrónico se construyen jerárquicamente. Así, la direcciónanterior puede descifrarse del siguiente modo:

identificador Login del usuario (nombre de usuario)

@ Este signo que aparece en toda dirección e-mail se sitúa entre el nombre del usuario y eldominio o la dirección del servidor donde está dado de alta

terra Indica el dominio de Terra.es Dominio de España

El CNICE facilita, gratuitamente, direcciones de correo electrónico a todos los profesoresque lo soliciten, además de espacio para alojar páginas web.



Al ser dado de alta en Internet a través del CNICE, el administrador del sistema enviaráal usuario, además de un Identificador de usuario (login) y una password o palabra clave(contraseña) para que pueda acceder a la red, una dirección de correo electrónico que le permitautilizar esa aplicación. Actualmente, para conectarse a Internet a través del CNICE, debeutilizarse como nombre de usuario profesorado@mecd-cnice ó profesorado@mec_pntic y comocontraseña docente.

No debe confundirse la dirección de correo electrónico con el identificador de usuario(login) ni con la password. La dirección de correo, como la dirección postal, es pública, el usuariose la da a otros usuarios para que puedan enviarle mensajes. La password, sin embargo, esconfidencial y no debe darse a nadie.

Netiquette

Como toda forma de comunicación, también Internet tiene su código de buena conductao de buen uso. Es lo que se llama Netiquette. Existe en la red una gran documentación, fácil deconseguir, sobre este tema. A modo de ejemplo, se citan a continuación algunas de las normasmás destacadas:

No escribir en letras mayúsculas. Las letras mayúsculas en la Red se traducen como gritoso como opiniones fuertes. Por tanto, las mayúsculas se reservan sólo para enfatizar una palabrao una frase, aunque también puede hacerse escribiendo la frase o la palabra entre asteriscos, *talque así*.

No dejar nunca en blanco el título (Asunto) de un mensaje. Además es conveniente queel título resuma el contenido del mensaje.

No escribir nada en la pantalla que no diríamos a alguien cara a cara.

Cuando se responde a un mensaje previo, incluir la cita o el párrafo al que se replica, peroNO incluir entero el mensaje original al que se responde. Hay que tomarse la molestia de borrar,cortar y pegar de manera que sólo permanezcan las partes relevantes del original.

Smileys

El lenguaje escrito tiene la limitación, y más aún cuando se escribe con prisas, de que nosiempre es fácil transmitir certeramente dobles sentidos, frases ingeniosas o comentarioshumorísticos ya que el interlocutor ni ve nuestros gestos ni escucha nuestro tono de voz. Y estosin contar con que en ocasiones nos dirigimos a personas que no conocemos, con las que estamospoco familiarizados o, sencillamente, que tienen un marco cultural diferente que les impideentender nuestro particular sentido del humor.

Los smileys (representaciones gráficas de gestos) se utilizan en Internet precisamente paraintentar salvar de alguna manera esta pequeña barrera que impone el lenguaje escrito.

Cuando no se está seguro de que un comentario hecho con un cierto propósito va a serbien entendido, puede incluirse un gesto ("smiley") que refuerce el sentido que quiere darse.Aunque existen muchos más, se ofrece a continuación un listado de los smileys más comunes:

:-) Sonrisa genérica :"-( Llorando :-@ GritandoI-O Bostezo, aburrimiento :-# Censurado, secreto :-( Triste

:-\ Indecisión :-C Increíble :-O Sorpresa

%-} Comentario tonto ;-) Complicidad >- Soy mujer:-|| Disgustado :- Soy varón :-X Besos

:-e No estoy de acuerdo



3.a.- Configurando el correo electrónico.

Existen, básicamente, dos formas de usar el correo electrónico: desde un programa clientede correo electrónico (POP) y desde una página web que nos permita acceder a nuestro servidorde correo electrónico (web mail).

Algunos servidores de correo permiten el acceso a las cuentas de correo de sus usuariosde cualquiera de las dos formas citadas (CNICE, Terra, Yahoo...), pero otros solo permitenacceder mediante un cliente de correo electrónico (Jazzfree, ...) y otros, como Hotmail, soloofrecen el servicio web mail.

Configurar un cliente de correo electrónico (POP).

Hay en el mercado muchos programas creados para gestionar el correo electrónico,Outlook Express, Eudora, Netscape Messenguer, Pegasus, etc.

Todos ellos permiten enviar y recibir mensajes de correo electrónico a través de Internet,si bien nos centraremos en Outlook Express por ser el programa que se suministra con Windowsy, por lo tanto, está disponible en todos los ordenadores.

Para poder configurar una cuenta de correo electrónico en uno de estos programas, esnecesario disponer de los siguientes datos:

• Dirección de correo electrónico, por ejemplo: [email protected]

• Nombre de cuenta, por ejemplo: marialuz

• Servidor de correo entrante (POP3), por ejemplo: mimosa.pntic.mec.es

• Servidor de correo saliente (SMTP), por ejemplo: hermes.pntic.mec.es

• Contraseña

Estos datos deben ser suministrados por la empresa u organismo que nos da el serviciode correo electrónico. En el caso del MECD, puede solicitarse una cuenta de correo personal através de la dirección de Internet del Centro Nacional de Información y Comunicación Educativa,www.cnice.mecd.es y dentro de ella, en Servicios para usuarios.

Veamos como configurar el programa cliente de correo Outlook Express. En el escritorio,y en “Programas” del menú “Inicio”, podemos localizar el icono que nos permitirá poneren marcha el programa. Cuando se arranca por primera vez, se activa automáticamente el asistentepara configuración de cuentas de correoelectrónico, y debemos configurar, al menos, unacuenta de correo electrónico para que elprograma continúe funcionando. Este asistentenos guía como se muestra a continuación:

En esta primera página del asistente nospide que introduzcamos el nombre que deseamosque se muestre como nombre del remitente denuestros mensajes. Este nombre será el que veanlos destinatarios de nuestros mensajes de correoelectrónico.

Una vez introducido el nombre, pulsamosel botón “Siguiente”.



En la nueva páginaintroducimos nuestra dirección decorreo electrónico, teniendocuidado escribirla correctamente yde no dejar espacios en blanco enningún sitio. Si nuestra dirección decorreo electrónico tiene alguna letramayúscula, debemos escribirlamayúscula, y el resto en minúscula.

A continuación pulsamos elbotón “Siguiente”.

Ahora introducimos losdatos de los servidores de correoentrante y saliente.

El recuadro con unaflechita, en el que aparece escritoPOP3, no debe modificarse.

Para continuar pulsamos elbotón “Siguiente”.

En esta página introducimosel nombre de cuenta, que no debeconfundirse con la dirección decorreo electrónico.

En caso de querer quenuestra contraseña de correoelectrónico quede almacenada conlos datos de nuestra cuenta decorreo, lo que evitará quetengamos que escribirla cada vezque comprobemos si tenemosmensajes de correo en el servidor,marcaremos la casilla “Recordarcontraseña” y escribiremos la

contraseña en el campo correspondiente.

Pulsamos “Siguiente” y en la última página pulsamos “Finalizar”. Ya tenemosconfigurada la cuenta de correo electrónico.



En función de la versión de Outlook Express, el asistente nos pedirá también los datosrelativos a la conexión de internet que debe utilizar para conectarse con el servidor de correo. Enese caso se debe elegir la forma de conexión que utilice el ordenador donde estamos trabajando(a través de un módem, a través de una red de área local o conectarse manualmente).

Si, posteriormente, queremos añadir una dirección de correo electrónico, debemos ir a“Cuentas” en el menú “Herramientas”, y allí, pulsamos en la pestaña “Correo”, para ver lascuentas de correo electrónico que ya están configuradas, y pulsamos en “Agregar” - “Correo”para poner en marcha el asistente descrito anteriormente.

En ocasiones necesitaremos modificar los datos de alguna cuenta de correo yaconfigurada. Para hacerlo, en la ventana “Cuentas de Internet” que se muestra un poco másarriba, seleccionamos la cuenta de correo que vamos a modificar y pulsamos el botón“Propiedades”. Aparecerá un cuadro de diálogo con varias solapas y a través de ellaslocalizaremos todos los datos de configuración de la cuenta de correo y algunos datos más queno es recomendable modificar.

Configuración de una cuenta de correo web (web mail).

Para utilizar una cuenta de correo web solo necesitamos conectarnos, mediante unnavegador de Internet, a la página web que nos permita el acceso a nuestra cuenta de correo,escribir allí nuestro nombre de usuario y nuestra contraseña y pulsar el botón para entrar ennuestra cuenta de correo. Esos dos datos son suministrados por la empresa u organismo que dael servicio de correo electrónico, en el momento de darnos de alta en el mismo.

El funcionamiento del correo web se basa en el hipertexto, ya que utiliza una página webcomo medio de administración de la cuenta.

3.b.- Enviar correo electrónico.

Para escribir un mensaje de correo electrónico pulsamos el botón “Crear correo” en labarra de herramientas y se abrirá la ventana en la que podremos hacerlo. Esta ventana tiene unaspecto similar al mostrado a continuación y, en el mismo gráfico se explica como utilizar lasprincipales funciones.

Cuando el mensaje deba ser enviado a varios destinatarios, escribiremos las direccionesde correo en el campo “Para:” separadas por un punto y coma (;). En el caso de que hayamos



introducido en la libreta de direcciones aquellas que necesitamos habitualmente, en lugar deescribirlas en el campo “Para:”, pulsamos sobre la libreta que aparece dibujada al lado del nombrede ese campo y seleccionamos la dirección o direcciones de correo a las que va dirigido elmensaje.

En este caso podemos elegirque las direcciones vayan a parar alcampo “Para:”, al campo “CC:” oal campo “CCO:”. La diferenciaentre los campos “Para:” y “CC:”no es apreciable, pues el destinatariodel mensaje verá las direcciones detodos los destinatarios del mensaje,mientras que las direcciones incluidasen el campo “CCO:” no seránmostradas a ningún destinatario.

Todas estas operacionespueden realizarse sin conexión aInternet. Solo en el momento deenviar el mensaje es necesario estarconectado.

Cuando utilizamos el correo web, el procedimiento para crear un mensaje de correo yenviarlo es similar, si bien algunos botones pueden no denominarse exactamente como se handescrito aquí. Para poder realizar cualquier operación con el correo web necesitamos estarconectados a Internet.



3.c.- Recibir correo electrónico.

Antes de enviar o recibir mensajes con Outlook Express debemos habernos conectado aInternet. Esto no es necesario cuando creamos un mensaje o cuando leemos los mensajesrecibidos.

La forma más rápida y sencilla de recibir correo electrónico consiste en pulsar el botón“Enviar y recibir” en la barra de herramientas de Outlook Express. El resultado es que, si haymensajes pendientes de enviar, serán enviados en ese momento y, a continuación, los mensajesque hayan llegado a nuestro servidor de correo serán descargados en nuestro ordenador,almacenándose en la “Bandeja de entrada” de Outlook Express.

Una vez recibidos los mensajes, podemos abrirlos desde la “Bandeja de entrada” y leersu contenido. Para ello, en función de cómo esté configurada la visualización de Outlook Express,bastará con seleccionar un mensaje para ver su contenido en la ventana inferior de la pantalla o,por el contrario, habrá que hacer doble clic sobre el mensaje para poder abrirlo. Es recomendabletener desactivada la ventana de “Vista Previa” de los mensajes, pues algunos virus contenidosen mansajes de correo, pueden activarse con solo seleccionar el encabezado del mensaje.

Cuando utilizamos el correo web, con solo acceder a la bandeja de entrada ya veremos lalista de mensajes que hemos recibido, pues, en este caso, la bandeja de entrada se encuentra ennuestro servidor de correo y cuando llegan los mensajes de correo van a parar a ella directamente.

Mientras estamos viendo la “Bandeja de entrada” en el correo web, puede llegar algúnmensaje nuevo a nuestro servidor, pero no será mostrado hasta que no salgamos de la Bandejade entrada y entremos de nuevo o, en su caso, pulsemos el botón “Actualizar” (“Obtener” enalgunos casos).

4.- Los foros de discusión.

Los foros de discusión son servicios de Internet que algunos portales ponen a nuestradisposición, y consisten en un espacio donde poner mensajes (como si fuera un tablón deanuncios) que cualquiera puede leer y a los que cualquiera puede responder. Las respuestas a losmensajes son nuevos mensajes que se publican en el espacio del foro, de manera que pasan a estardisponibles para su lectura por cualquier usuario. Los mensajes de respuesta suelen aparecervinculados al mensaje al que responden, pudiendo crearse así, una cadena de mensajes que, porejemplo, intentan dar solución a un problema.

Algunos de estos foros disponen de moderador, es decir, que los mensajes enviados al foroson leídos primero por el moderador, quien decide si el contenido del mensaje es de interés parael foro o no y, en consecuencia, lo publica en el foro o no.

Casi todos los foros en Internet se centran en un tema concreto, pudiendo encontrarseforos de matemáticas, de nuevas tecnologías, de libros, etc.

En la mayoría de los portales de Internet podemos encontrar un enlace a los foros de quedispone. Basta con pulsar sobre él para acceder a la lista de foros que se hayan creado en eseportal.

Será necesario registrarse en ese portal para poder participar en los foros, aunque no sueleser necesario el registro cuando solo queremos leer los mensajes publicados en los foros. Elregistro consiste en introducir una dirección de correo electrónico, que será a la que se dirijan losmensajes que se publiquen como respuesta a un mensaje nuestro, además de publicarse en el foro,y una contraseña.



5.- Las news.

Existen en Internet servidores de News que son ordenadores dedicados a mantener forosde discusión accesibles a través de programas clientes de correo electrónico.

Las news son foros de discusión a los que se accede mediante un programa de correoelectrónico en el que se deben configurar las cuentas de news que deseemos utilizar.

En Outlook Express se configuran las cuentas de news de forma similar a las de correoelectrónico, es decir, en “Cuentas” del menú “Herramientas”. Aquí pulsamos la solapa“Noticias” para ver las cuentas de news que tenemos configuradas, y pulsamos en “Agregar” -“Noticias” para configurar una nueva cuenta de news. Los pasos siguientes son similares a losnecesarios para agregar una cuenta de correo, debiendo introducir un nombre que nos identificaráen los foros, la dirección de correo a la que llegarán los mensajes de los usuarios que respondana nuestros mensajes y la dirección del servidor de news (el servidor de news del MECD esnews.pntic.mec.es).

Cuando agregamos una cuenta de news, ésta se añade al árbol decarpetas de Outlook Express y para acceder al servidor asociado a esacuenta solo debemos seleccionarla en dicho árbol.

A continuación se nos preguntará si deseamos conectarnos alservidor de noticias para ver los grupos de noticias existentes ysuscribirnos a alguno de ellos. Para acceder a cualquiera de los grupos denoticias existentes en el servidor conectado debemos suscribirnos. Paraello basta marcar los grupos que nos interesan en la lista de grupos y, porcada selección, pulsar el botón “Suscribir”. Éstos se añadirán comosubcarpetas en el árbol de carpetas de Outlook Express y seleccionandocualquiera de ellos veremos los encabezados de los mensajes publicadosen él.

Pulsando sobre cada encabezado vemos el contenido del mensaje en la ventana inferiorde la pantalla y cuando al lado del encabezado aparece un signo + nos indica que hay mensajesde respuesta para el encabezado que vemos, que serán mostrados al pulsar sobre el signo +.



Utilizando los botones de la barra de “Herramientas” podemos “Exponer” un mensajeen el foro, “Responder al autor” del mensaje que estamos viendo, “Responder al grupo” paraque todos los usuarios del foro vean nuestra respuesta al mensaje que vemos o “Reenviar” elmensaje a un destinatario de correo.

Algunos servidores de news requieren estar dados de alta en ese servicio, por lo que seránecesario indicar un nombre de cuenta y una contraseña para poder conectarnos al servidor denews. En ese caso debemos configurar esos datos desde la opción “Cuentas” del menú“Herramientas”.

Seleccionamos la cuenta de news que necesite los datos citados anteriormente y pulsamosel botón “Propiedades”. En la ficha “Conexión” introducimos el nombre de cuenta y lacontraseña, pulsamos “Aceptar” y cerramos el cuadro de diálogo de “Cuentas”. Ahora yapodemos conectarnos al servidor de noticias.

5.a.- News de matemáticas.

Algunos servidores de news en los que podemos encontrar grupos de matemáticas ymuchos otros son:

• news.pntic.mec.es

• news.terra.es (requiere ser usuario de una cuenta de correo de Terra o Teleline)

• news.ya.com



Diseño de Páginas Web

Curso: Taller de Matemáticas - Septiembre 2003Diseño de páginas web


DISEÑO DE PÁGINAS WEB

1.- Estructura básica de una página web.

Una página web, en su versión más elemental, es un archivo de texto que contiene elcódigo necesario para que un navegador de Internet sea capaz de mostrar la información de ciertaforma.

Ese código es HTML (Hiper Text Markup Language) o lenguaje de marcas hipertextualesy se basa en la utilización de etiquetas o tags, que indican al navegador de Internet lo que debehacer con la información a la que se refieran.

Las etiquetas HTML pueden ser de dos tipos: con etiqueta de finalización o sin ella. Esdecir, podemos encontrarnos con etiquetas como <img> que podrá contener varios atributos, peroque toda la información relativa a ella está contenida en la propia etiqueta, y podemosencontrarnos con etiquetas como Este texto se mostrará en negrilla. En esteúltimo caso la etiqueta indica que el texto que sigue debe aparecer en negrilla y se mostraráasí todo el texto hasta que el navegador encuentre la etiqueta de cierre . La estructura de unaetiqueta con principio y fin es siempre la misma: se inicia con el nombre de la etiqueta entre lossímbolos < y > y finaliza con la misma cadena de caracteres, excepto por la barra que se anteponeal nombre de la etiqueta.

El código contenido en el archivo de una página web debe mantener una estructura básica,que divide el código en dos partes: cabecera (head) y cuerpo (body). A continuación se muestraun ejemplo:

<html><head>Esta es la cabecera</head><body>Este es el cuerpo</body></html>

El contenido de la cabecera no se muestra en el navegador. Las etiquetas de la cabeceracontienen información que indica al navegador cómo tiene que tratar al documento, además deltítulo de la página que se mostrará en la barra de título del navegador al visualizar la página.

El código colocado en el cuerpo se interpreta para visualizar correctamente la información,es decir, es lo que se muestra en el navegador con el formato adecuado.

Todo documento web debe comenzar con la etiqueta <html> y finalizar con la etiqueta</html>, que indican al navegador, respectivamente, el comienzo y el final del código HTML.

Escribir el código de una página web en un editor de texto puede resultar laborioso,aunque no resulta demasiado complicado, por lo que, actualmente, se utilizan programas editoresde páginas web, que permiten manejar la información de la página que estamos creando de formaparecida a como lo haríamos al crear un documento en un procesador de textos, pudiendocombinar texto, imágenes, tablas, etc.

Nosotros aprenderemos a crear páginas web utilizando Microsoft FrontPage, el editor depáginas web de Microsoft.



2.- Organización previa de la información.

Las archivos que contienen el código HTML de una página web solo contienen el código,y sin embargo, cuando visualizamos una página web, vemos imágenes fijas o en movimiento, aveces escuchamos música o determinados sonidos, etc. Esto es así porque el código de la páginaweb indica al navegador de Internet que debe abrir determinados archivos gráficos o multimediay presentarlos en determinado lugar y de determinada forma. Todos esos archivos (fotos, dibujos,vídeos, música, ...) Deben acompañar al archivo que contiene el código HTML.

Por otro lado, si colocamos en una misma carpeta todos los archivos que formen parte denuestra página web, corremos el riesgo de liarnos si el contenido de nuestra página crecesuficientemente. Así que será siempre recomendable organizar los archivos denuestra página web de forma que en la carpeta principal sólo se encuentren losarchivos que contienen el código HTML y en subcarpetas el resto de losarchivos.

3.- El editor de páginas web Microsoft FrontPage.

Microsoft FrontPage es un completo entorno de creación y publicación de páginas webque, por si mismo, es capaz de crear la estructura completa de carpetas para alojar separadamentelos distintos archivos y, sobre ella, nos permite crear las páginas web a nuestra medida ypublicarlas posteriormente en Internet, haciendo que, sobre todo, el mantenimiento y laactualización de un sitio web sea una tarea sencilla.

Sin embargo, en nuestro caso y dada la extensión y complejidad del programa, noslimitaremos a utilizar el Editor de FrontPage, que es la parte que nos ayuda a crear nuestrosarchivos de código HTML de la manera más fácil: como si se tratara de un procesador de texto.

En “Programas” de menú “Inicio” encontraremos el icono para abrir el Explorador de

FrontPage , que una vez abierto se mostrará aproximadamente así:

Ahora podemos lanzar el Editor de FrontPage pinchando el icono y, una vez abiertoel Editor ya podemos cerrar en Explorador, pues no le utilizaremos.

También podemos crear un icono de acceso directo al Editor de FrontPage. Para ello, enla carpeta “C:\Archivos de programa\Microsoft FrontPage\bin” localizaremos el archivo

y pulsando el botón derecho del ratón sobre él, elegiremos “Enviar a” y “Escritorio(Crear acceso directo)”. De esta forma no necesitaremos abrir el Explorador de FrontPage paraabrir el Editor.

El aspecto del Editor de FrontPage es el siguiente:

Enseguida nos damos cuenta del parecido con Word o con otros procesadores de texto.No obstante hay algunas diferencias. De entrada, en la parte inferior, tenemos tres solapas“Normal”, “HTML” y “Vista previa” que nos permiten editar la página web como si de unprocesador de texto se tratara, ver el código HTML generado en función del contenido de lapágina y, por último, ver la página como se mostraría en un navegador de Internet.

Aunque, aparentemente, la página web está en blanco, el editor ya ha generado las líneasde código HTML que definen la estructura general de la página. Podemos ver este códigopulsando la solapa “HTML” de la parte inferior.

Vemos que en la cabecera hay una linea de título <title>Página nueva 1</title> ydos líneas más con etiquetas <meta> y que, en este caso, definen el contenido del documento, eljuego de caracteres que deberá utilizar el navegador para representar correctamente lainformación de la página y el editor de páginas web utilizado para crear la página.



4.- Creando la página web con el editor.

Estando situados en la solapa “Normal”, podemos escribir tel texto que deseemosdirectamente, haciendo que se ajuste a la izquierda, al centro o a la derecha, utilizando los botonesdisponibles en la barra de formato. También podemos elegir un estilo determinado para ese texto,el tipo de letra, el tamaño, el color, ..., mediante los demás botones de esa barra.

Sin embargo, es preferible siempre, hacer una maquetación de la página mediante tablas,con las líneas que delimitan las celdas ocultas, dividiendo el espacio de la página en zonas quededicaremos a contener distintos elementos. A continuación se muestra una posible maquetaciónmediante una tabla con las líneas ocultas.

Y el resultado que produciría en un navegador se ve más abajo.

4.a.- Definiendo las propiedades de la página.

A través del menú “Archivo” o pulsando el botón derecho del ratón sobre el espacio detrabajo y eligiendo “Propiedades de página” accedemos al cuadro de diálogo donde podemosdefinir fácilmente el título de la página, el sonido que se escuchará al visualizarse la página, loscolores por defecto de los elementos principales de la página, etc.

Ficha General

Sustituyendo el título por defecto por un nuevo texto, cambiaremos el título de la página.Recordemos que este texto se mostrará en la barra de título del navegador de Internet.

En cuanto al sonido de fondo que se reproducirá en el navegador al visualizarse la página,podemos indicar aquí el nombre del archivo de sonido (mid ó .mp3) deseado, indicando tambiénsu ubicación con relación a la carpeta donde se guardará el archivo con el código HTML, y si sereproducirá indefinidamente o un número de veces específico.

En el ejemplo de la derecha, el archivode sonido “xfiles.mid” estaría almacenado enla carpeta “sonidos” dentro de la carpeta en laque se guardará el archivo HTML. A estaforma de indicar la localización de un archivo se le denomina direccionamiento relativo, y es lamejor forma de referirse a los archivos en una página web.

Veamos como ha quedado el código HTML tras modificar el título y el sonido de fondo:

Vemos una nueva etiqueta: <bgsound> que permite definir el archivo de sonido que sepondrá en marcha al visualizar la página. El atributo “loop” determina el número de veces que sereproducirá el archivo; el valor “-1” en este atributo provoca la reproducción infinita.

Ficha Fondo

Desde esta fichapodemos definir siqueremos que una imagense muestre como fondo dela página, o en su lugar,definimos un color defondo. Si elegimos unaimagen, ésta aparecerá apartir de la esquinasuperior izquierda del áreade visualización delnavegador y se repetiráhacia la derecha y hacia abajo hasta llenar toda el área.

También podemos definir el color por defecto del texto y de los enlaces de hipertexto,aunque, posteriormente desde la pantalla de edición, podemos asignar un nuevo color a cualquiertexto o enlace.

Por último, cuando disponemos de una página web ya creada y deseamos crear una nuevapágina en la que el fondo y los textos se muestren con las mismas características de la primera,podemos especificar el archivo HTML de esa página para que el editor le use como plantilla ytome de ella los valores de los parámetros del fondo y los textos. En este caso no podremosdefinir de forma manual los colores de los textos y el fondo por defecto.

Ficha Márgenes

Aquí podremos introducir el número de puntos que deseamos que se muestren, entre loslímites izquierdo y superior del área de visualización y el contenido de la página. Generalmente,no es necesario utilizar márgenes en una página web.

Ficha Personalizado

Desde ella podemos introducir etiquetas <meta> y otras variables de forma más intuitivaque escribiéndolas directamente en código HTML. No obstante, para utilizar las etiquetas <meta>adecuadamente, es necesario consultar documentación exhaustiva sobre ellas, que podemoslocalizar en Internet. De cualquier modo, estas etiquetas no son imprescindibles ni suponen unamerma en la funcionalidad de la página, excepto las que coloca por defecto el editor.

Ficha Idioma

En ella podemos elegir el juego de caracteres que utilizará el navegador para mostrarnuestra página. Estos valores se establecen por defecto en los adecuados a nuestro idioma.

4.b.- Maquetando la página con tablas.

En el menú “Tabla” o desde el botón , podemos crear la tabla. En un primer momentopodemos crear una tabla que se aproxime a nuestras necesidades y, posteriormente, combinarceldas o dividirlas para obtener las divisiones de la tabla que necesitamos. Para combinar celdas,seleccionamos las celdas que deseamos combinar y, en el menú “Tabla” o pulsando el botónderecho del ratón sobre ellas, eligiendo “Combinar celdas”.

Para obtener una tabla como la que veíamos al comenzar el punto 4, podemos dibujarla

desde el botón eligiendo dos filas y dos columnas arrastrando el punterosobre la ventana de celdas que se despliega bajo el icono anterior.Posteriormente, seleccionamos las dos celdas superiores y, pulsando sobre ellasel botón derecho del ratón, elegimos “Combinar celdas”.

La creación de esta tabla ha dadocomo resultado el código HTML queaparece a la derecha:

Vemos la nueva etiqueta <table>en la que se define el borde y la anchura dela tabla, la etiqueta <tr> que define unanueva fila, y la etiqueta <td> que defineuna columna, dentro de la fila creadapreviamente, es decir una celda. El texto corresponde a un espacio en blanco codificadosegún el lenguaje HTML, que es el contenido actual de las celdas de la tabla. En la celda definidaen la primera línea de la tabla, además de la anchura, aparece el atributo colspan que hace que esacelda ocupe el espacio de horizontal, en este caso, de dos columnas.

Lo siguiente que debemos hacer es modificar las propiedades de la tabla y establecer eltamaño, la posición horizontal, y las líneas de la tabla (bordes). Para ello, pulsamos el botónderecho del ratón sobre la tabla y elegimos “Propiedades de tabla”.

Una combinación normal sería la que se muestra a continuación:

Como podemos observar en el cuadro de diálogo anterior, podemos definir la anchura yla altura de la tabla en píxeles o en porcentaje. El porcentaje se refiere al área de visualización enla ventana del navegador, mientras que los píxeles (puntos) se refieren a puntos de la pantalla,cuyo número y tamaño dependerá de la resolución de pantalla del ordenador donde se visualicela página. La resolución más habitual es de 800x600 puntos, por lo que, si deseamos que lainformación se muestre correctamente en la mayoría de los ordenadores, o bien introducimos unporcentaje o bien un número de puntos menor de 760 (se ha descontado lo que ocuparían losbordes de la ventana y la barra de desplazamiento vertical). La altura de la tabla no es necesariodefinirla, pues se alarga automáticamente en función del contenido, aún cuando hayamos definidoese parámetro, siendo el valor introducido, el mínimo valor de altura.

También podemos elegir colores para los bordes de la tabla, si fueran visibles, y unaimagen de fondo que se comportará igual que la usada como fondo de página, pero dentro de latabla. Estos últimos atributos no son reconocidos por todos los navegadores, por lo que no esrecomendable usarlos.

Ahora nos toca editar las propiedades de cada celda de la tabla, para establecer lasmedidas, la alineación del texto por defecto, y otros atributos. Para ello nos situamos sobre lacelda que deseamos modificar y, pulsando el botón derecho del ratón elegimos “Propiedades decelda”. Si queremos modificar las propiedades de un conjunto de celdas, primero seleccionamoslas celdas que nos interese modificar y, con el puntero sobre ellas, procedemos como se hadescrito antes.

En nuestro caso, modificaremos las propiedades de cada celda por separado para dar unaanchura del 100% a la celda de encabezado, del 25% a la de menú y del 75% a la del contenido.

El resultado de estos ajustes en el código HTML se muestra a continuación:

Vemos ahora el borde (border), el espaciado entre celdas (cellspacing) y el relleno deceldas (cellpadding) puestos a cero, y las nuevas anchuras en las celdas.

Las etiquetas y delimitan los párrafos de texto, que en este caso solo contienenun espacio en blanco, y han sido introducidos para que algunas celdas de la tabla aumenten sualtura y podamos ver mejor el resultado de nuestras acciones, como en la imagen siguiente.

Por supuesto, podemos modificar los colores del fondo de cada celda para dar un aspectomás atractivo, sin embargo no conviene abusar de ellos, pues pueden entorpecer la lectura de lostextos y no todos los navegadores les reconocen. En caso de usarlos, se recomiendan colores muyclaros o blanco para el área de contenido, pudiendo ser más oscuros o fuertes los utilizados enlas áreas de encabezado y menús.

A la derecha tenemos un ejemplo de nuestrapágina con distintos colores en las celdas de la tabla.Ahora solo resta introducir el contenido de cadacelda de la tabla para terminar de crear nuestrapágina web.

Para terminar, también podemos escribir o modificar el código HTML que se muestra enla solapa “HTML” del editor, como si de un editor de texto se tratara. A veces resulta máspráctico y rápido modificar algunos valores en el código HTML de este modo.



4.c.- Introduciendo y manipulando textos.

A la hora de introducir textos y manipularlos en el editor, procederemos como encualquier procesador de textos, siendo posible elegir el tipo de letra, su color, su estilo y sutamaño. Únicamente cabría señalar que en las páginas web el texto puede separarse mediantesaltos de línea o mediante párrafos, y la separación en ambos casos es automática y siempre lamisma.

A partir de aquí vamos a ir viendo cómo hacer las cosas sobre el ejemplo de una páginaweb, donde se muestre el programa del curso que estamos desarrollando, pero de formainteractiva.

Crearemos el archivo principal de nuestra página web de modo que sea como el índice detoda la página. En nuestro ejemplo, empezaremos por introducir el título del curso en la celda deencabezado. Cómo habíamos elegido un color azul marino para la celda, elegiremos el colorblanco para el texto y le asignaremos el estilo de Encabezado 3 (H3).

Primero escribimos el texto en la celda de encabezado y,a continuación, seleccionamos ese texto y elegimos el colorblanco para él, a través del botón de la barra de herramientas.Se recomienda utilizar los colores que se muestran en la primeraventana, pues son los que, con seguridad, se mostrarán en todoslos ordenadores, ya que solo se necesita una profundidad de colorde 256 colores para representarlos. Por supuesto, podemos elegircualquier otro color pulsando el botón “Definir colorespersonalizados” que aparece en la ventana de selección decolores.

Ahora, manteniendo el textoseleccionado, elegimos el estilo “Encabezado3" en la casilla de selección de estilos de labarra de herramientas.

También podemos elegir un tipo de letra distinto; el tipo Verdana esmás fácilmente visible en la pantalla. Si hubiéramos decidido que todos lostextos, o su mayoría, se mostrarían con ese tipo de letra, deberíamos haberlodefinido en las propiedades de la página y ya no sería necesario definirlo enadelante. Para elegir el tipo de letra utilizamos la casilla que está al lado dela casilla de estilos en la barra de herramientas .

El resultado de lo que acabamos de hacer, sobre el código HTML semuestra a continuación:

Escribamos ahora los textos que nos servirán como enlaces de hipertexto, dentro de lacelda de menú. En nuestro ejemplo, serán las cabeceras de los apartados del programa del curso.Si escribimos el texto de cada apartado en un párrafo distinto puede quedar más claro que si loescribimos introduciendo un salto de línea entre el texto de un apartado y el siguiente. Lo haremosen párrafos separados.

Si queremos el texto en líneas contiguas, en vez de separado en párrafos, al final de cadatexto elegimos en el menú “Insertar”, “Salto de Página” y en el cuadro de diálogo que resulta,pulsamos “Aceptar”.

Situemos el cursor sobre la celda de menú y comencemos a escribir el texto que identificacada apartado, pulsando <Intro> al final de cada uno. No nos preocupemos de si ocupan más deuna línea, de momento. Seleccionamos todo el texto que hará de menú interactivo y elegimos paraél, un tipo de letra “Arial” de igual forma que hicimos con el encabezado de la página y, además,“negrilla” pulsando el botón correspondiente en la barra de herramientas. De esta forma el textoresaltará más.

Abajo vemos el código HTML resultante de la introducción de estos últimos textos.

Por ahora nuestra página web debe tener el aspecto que vemos en la imagen siguiente:

4.d.- Insertando imágenes y otros elementos multimedia.

Desde el menú “Insertar” podemos incluir en nuestra página web, además de imágenes,otros muchos elementos, muchos de ellos activos, pero que, desgraciadamente, no todos losnavegadores de Internet reconocen.

Son especialmente interesantes el vídeo, las marquesinas, las líneas horizontales y loselementos de formulario.



Insertar una imagen

Son válidos para su incorporación a las páginas web, los formatos de imagen .gif, .jpg y.png, aunque sólo el formato .gif permite hacer transparente un color que, si coincide con el defondo de la imagen, en vez de mostrarse ese fondo, se mostrará en su lugar el fondo de la página.

El formato GIF es recomendable para imágenes de dibujos o gráficos creados conprogramas como hojas de cálculo, etc. y el JPG es preferible en el caso de las fotografías, debidoa que soporta más colores y al tipo de compresión que utiliza.

Conviene tener almacenados los archivos de imagen en una subcarpeta dedicada a ellas,antes de insertar las imágenes en la página web. De este modo, el editor introducirá la direcciónrelativa, por defecto, al archivo de imagen cuando se inserte en la página.

Situamos el cursor en el lugar donde queramos insertar la imagen. En el menú “Insertar”seleccionamos “Imagen” y buscamos el archivo que vamos a insertar mediante el cuadro dediálogo que aparece.

Editar las propiedades de la imagen

Una vez insertada la imagen en la página, es recomendable editar sus propiedades yrealizar algunos ajustes. Más abajo se muestra el cuadro que nos encontramos.

En la ficha “General” vemos elorigen de la imagen que mostrará unadirección relativa a la misma.

El tipo de imagen indica si es gif ojpg, y si no lo es, como en este caso,podemos seleccionar uno de los dos tipos yFrontPage convierte el archivo a eseformato.

En la parte de “Representacionesalternativas” podemos elegir un archivo dela misma imagen pero de baja resolución,que se mostrará al cargar la página en elnavegador, mientras se carga el archivo conla máxima resolución, que por ser de mayortamaño, tardará más. El “Texto” que

escribamos se mostrará en lugar de la imagen de baja resolución, mientras se carga el archivo y,posteriormente, al dejar quieto el puntero del ratón sobre la imagen .

El apartado de “Hipervínculo” permite crear un enlace entre la imagen y otro documentoweb. Esto lo veremos más adelante, cuando tratemos los hiperenlaces.

En la ficha “Apariencia” podemos ajustar las dimensiones de la imagen, el espacio deseparación alrededor de la imagen, la alineación y, si queremos que se muestre un bordealrededor, podremos ajustar su grosor (Cero = sin borde).

Una vez insertada la imagen, podemos arrastrarla con el ratón para cambiarla de posición,o modificar su tamaño arrastrando las marcas que aparecen alrededor de la imagen cuando estáseleccionada.

Insertemos las imágenes que sirven de portada al programa del curso en la celda decontenido y editamos sus propiedades para que no se muestre ningún texto alternativo.

Ya fuera de las propiedades de imagen,pero con el cursor en la celda en la que están lasimágenes, pulsamos el botón de centrar en labarra de herramientas, para que se sitúen ambasimágenes en el centro de la celda.

Aquí tenemos el código HTMLresultante de insertar las imágenes como hemosdescrito y, a la derecha, el aspecto actual denuestra página web.

4.e.- Creando enlaces de hipertexto.

La verdadera potencia de la web está en los enlaces. A través de ellos podemos navegarentre multitud de documentos web, estén éstos alojados en el mismo ordenador o no, con sólohacer clic en el enlace correspondiente.

La etiqueta <a> permite definir los enlaces, pero no vamos a preocuparnos de ella, puesel editor que utilizamos nos permite crear los enlaces en dos pasos:

1. Seleccionamos el texto o la imagen que servirá de enlace.

2. Pulsamos el botón en la barra de herramientas e introducimos la dirección, absolutao relativa según el caso, que conduce al documento con el que deseamos enlazar ypulsamos “Aceptar”

Mientras creamos nuestra página web, es recomendable que hayamos decidido el nombreque vamos a dar a los archivos .htm que contendrán el código de la página, para poder definir losenlaces correctamente.

Creando un enlace a otro documento

En el cuadro de diálogo que semuestra para crear el enlace, podemosdefinir, además, si el nuevo documento sevisualizará en la misma ventana que eldocumento actual o en otra diferente.Veamos las posibilidades másinteresantes.

En el recuadro blanco encabezadocon “Nombre” y “Título” se muestran losdocumentos abiertos en FrontPage, demanera que, con solo seleccionar el quenos interese, se estable el enlace a él, pero

podemos escribir directamente en el recuadro “Dirección URL” la dirección, absoluta o relativa,al documento.

No es imprescindible dejar delante de la dirección la cabecera del protocolo de hipertexto“http://”, sino que es preferible borrarla y escribir la dirección, sea del tipo que sea, sin ella. Entodo caso, si la dirección que introducimos es relativa, debe escribirse sin esa cabecera.

El código HTML resultante de la creación de un hipervínculo tendrá esta estructura:

Las etiquetas y sólo hacen que el testo que sirve de enlace (Responsable)aparezca en negrilla y con letra tipo Arial. El archivo del documento al que lleva el enlace esresp.htm y su localización debe ser la misma que para el documento de partida, pues estádireccionado relativamente.

El recuadro “Marco de destino” permite elegir entre que el nuevo documento se visualiceen la misma ventana del documento de partida, o bien en otra ventana o marco. Esta funcióncorresponde al atributo target de la etiqueta <a>.

Para introducir un valor en este recuadro pulsamos sobre el botón que tiene a su lado. Estodespliega un cuadro de diálogo donde podemos escoger el destino para la visualización del nuevodocumento.

Creando un enlace a un lugar del mismo documento.

El recuadro “Marcador” permite crear un enlace a una parte del mismo documentoestamos visualizando. Pensemos en una página web en la que se muestra la programación dematemáticas para 3º de la E.S.O. Sería una página muy larga que precisaría del uso de la barra dedesplazamiento vertical para poder ir recorriéndola. No obstante, podemos colocar un índice alprincipio de la página y crear enlaces hipertextuales entre cada elemento del índice y el lugar dela página donde aparece ese elemento o apartado de la programación.

Para poder realizar eso, es necesario definir un marcador al principio de cada apartado y,posteriormente, crear los enlaces entre cada elemento del índice y los respectivos marcadores quehemos creado.

El procedimiento para crear un marcador es sencillo: seleccionamos el texto que secomportará como marcador y en el menú “Edición” elegimos “Marcador”; damos un nombreidentificativo al marcador que estamos creando o bien dejamos como nombre el texto quehabíamos seleccionado y pulsamos “Aceptar”.

El siguiente código define el texto “Apartado 1" como marcador, con el nombreidentificativo “Marcador1”:

Ahora ya podemos crear un enlace desde otro texto a ese marcador. Para ello,seleccionamos el texto que vamos a enlazar, pulsamos el botón y, desplegando el recuadro“Marcador” en cuadro de diálogo de creación de hipervínculos, elegimos el marcador con el quedeseamos crear el enlace. Al final pulsamos “Aceptar”.

Cuando el enlace se hace a un marcador, el aspecto del código cambia un poco:

Creando un enlace a una dirección de correo electrónico



También es posible crear un enlace que, al activarse, abre el programa de correo quetengamos instalado en nuestro ordenador, preparado para enviar un mensaje a la dirección decorreo que hayamos definido.

En este caso, tras seleccionar el texto que hará de enlace y pulsar el botón , pulsamos

el botón e introducimos la dirección de correo electrónico en el recuadro que apareceseguidamente. Pulsamos “Aceptar” y ya está.

El código resultante tendrá un aspecto similar al siguiente:

Creemos los enlaces de nuestra web de ejemplo, de forma que cada párrafo de texto dela celda de menú conduzca a un nuevo documento, que contendrá la información correspondienteal apartado al que deseamos acceder.

Posteriormente, guardaremos el archivo con el nombre “index.html” y, con la opción“Guardar como” guardaremos de nuevo el archivo con distinto nombre, tantas veces comoenlaces hayamos creado en el menú, y dando como nombre, en cada caso, el nombre queindicamos en cada enlace (objetivo.htm, metodo.htm, conten.htm, lugar.htm, destina.htm,plazas.htm, plazo.htm, acredita.htm, horario.htm y resp.htm). Es recomendable que los nombresde estos archivos no contengan más de 8 caracteres además de “.htm” para evitar conflictos conalgunos navegadores y servidores de páginas web.

De esta forma, sólo tendremos que abrir cada nuevo documento, borrar las imágenes dela celda de contenido e introducir allí la información para cada apartado. Esto nos simplifica eltrabajo y ayuda a dar consistencia a la página, pues siempre se mostrará la informaciónmanteniendo la estructura general. Pero antes, introduzcamos dos nuevos enlaces: uno a nuestradirección de correo y otro a un documento web que contendrá un formulario desde el quepodremos inscribirnos en el curso.

Quizá nos queda un detalle, y es que, en todos los documentos de nuestra web exceptoen el primero, deberíamos colocar un enlace al documento principal. En nuestro caso podemoshacerlo sobre el texto del encabezado de la página.

Ahora ya vemos el texto de losenlaces subrayado y éste sería elaspecto de la página de entrada. Si nosparece que el color de los enlacescontrasta poco con el fondo, podemosmodificarlo en las propiedades de lapágina ó bien, seleccionar todos losenlaces y elegir un color para el texto,que tendrá preferencia sobre el colordefinido por defecto en laspropiedades de la página.

4.f.- Creando listas.

En las páginas web podemos presentar textos en dos tipos de listas: numeradas y nonumeradas. Las etiquetas HTML que se ocupan de esto son <ol> para las listas numeradas y <ul>para las no numeradas.

La forma más cómoda de proceder a crear estas listas de texto consiste en escribir el textoen párrafos separados, después seleccionar todo el testo escrito y, por último, pulsar el botóncorrespondiente en la barra de herramientas.

También podemos hacerlo pulsando el botón correspondiente, en la barra de herramientas,antes de comenzar a escribir, e ir escribiendo normalmente, pulsando <Intro> al final de cadaelemento de la lista.

Los dos botones de la derecha, de los mostrados arriba, permiten desplazar el textoseleccionado a un nivel inferior, o superior, al nivel en que se encuentre, dentro de la jerarquía delos elementos de la lista.

Ahora vemos dos ejemplos de estas listas sobre nuestra página de ejemplo, con los“Objetivos” numerados, y las “Plazas y criterios de selección” sin numerar y con dos niveles enla lista. Más abajo aparece el código HTML correspondiente a ambos casos.

4.g.- Diseñando formularios.

Los formularios son una de las herramientas de que disponen las páginas web para hacerlasinteractivas, ya que permiten recopilar información de los visitantes de nuestra página yenviárnosla a la dirección de correo que indiquemos, o bien procesar la información y dar unarespuesta automática.

Aquí veremos cómo crear un formulario sencillo, para recabar los datos de un posibleasistente al curso “Taller de Matemáticas”, con el fin de inscribirle en él. Los datos recogidos eneste formulario se enviarán por correo electrónico y, para que funcione, el ordenador en que sevisualice debe tener instalado un programa de correo y dada de alta una cuenta en él.

A través de FrontPage es sencillo. Comenzaremos por situar el cursor en el lugar de lapágina en que deseemos crear el formulario , e “Insertar” un “Campo de formulario” del tipo“Cuadro de texto de un línea”. Esto hará que aparezca un recuadro con línea de trazo (quedelimita el espacio del formulario) y en su interior un cuadro de texto y dos botones: Enviar yRestablecer.

Estos botones afectan a todo el formulario,mientras que el cuadro de texto es un campo del formulario. El botón “Enviar” recoge lainformación contenida en todos los campos del formulario y la envía a la dirección que hayamosprogramado. El botón “Restablecer” vacía el contenido de todos los campos del formulario, esdecir, pone el formulario a cero. Más adelante veremos cómo ajustar cada elemento.

De momento, vamos a ir componiendo el formulario, insertando todos los campos en loslugares que nos interese, siempre dentro del recuadro con línea de trazo, y acompañándoles deun texto descriptivo. Cada elemento de formulario es tratado por el editor como una carácter más,por lo que el cursor de edición puede moverse entre los elementos y podemos separarlosintroduciendo saltos de línea o de párrafo entre ellos.

Llevemos el cursor entre el cuadro detexto y el botón “Enviar” e insertemos un saltode párrafo (pulsando <Intro>). Obtendremosalgo parecido a esto:

Ahora llevemos el cursor a la izquierda del cuadro de texto y escribamos “Nombre: , yobtendremos algo como esto:

Lo siguiente será llevar el cursor a laderecha del cuadro de texto, introducir unnuevo salto de párrafo y escribir, ahora,“Apellidos”. Seguidamente insertamos unnuevo cuadro de texto.

Repetiremos los pasos anteriores parair introduciendo todos los campos necesarioscon sus textos descriptivos. Al final podríaquedar algo así:

Ajustemos las propiedades de cadauno de los campos. Para ello, con el punterodel ratón sobre uno de los campos, pulsamosel botón derecho y elegimos “Propiedades decampo de formulario”.

En el campo “Nombre”podemos poner cualquier texto que nossirva de referencia para identificar lainformación que contendrá. No esrecomendable utilizar acentos.

En el campo “Valor inicial” nohace falta escribir nada, excepto quenos interese que un campo tenga uncontenido por defecto, que nuestros visitantes podrán cambiar a voluntad.

“Ancho de caracteres” nos permite definir la longitud del campo, indicando el número decaracteres que podrán visualizarse en él.

“Orden de tabulación” establece el orden que seguirá el cursor a través de los campos delformulario cuando, al introducir los datos, avancemos de un campo a otro pulsando <Intro> o eltabulador.

Si definimos el campo como “de contraseña”, cuando introduzcamos el texto en él, loscaracteres serán sustituidos por asteriscos.

Hasta aquí el formulario es normal y será reconocido por la mayoría de los navegadores.Pero, además, FrontPage nos permite afinar más cada campo a través del botón “Validar”, aunqueen este caso, puede que en algunos casos, nuestro formulario no funcione correctamente enalgunos navegadores.

Para terminar, ajustemos laspropiedades del formulario. Punterodel ratón sobre el formulario, botónderecho, y “Propiedades delformulario”.

Dejamos los recuadros comose ven a la derecha: sólo contieneninformación, el de la dirección decorreo a la que se enviarán los datosdel formulario y el nombre de éste.

Sin embargo, cuandorecibamos la información quizá nosepamos a que curso se refiere laficha de inscripción, pues no hemoscreado ningún campo que contenga esa información. Pues bien, como todas las fichas deinscripción provenientes de este formulario serán para el curso Taller de Matemáticas, crearemosun campo oculto que contenga el título del curso. Los campos ocultos pueden contenerinformación como cualquier otro campoy se envían con los demás, pero no semuestran en la página.

Para insertar un campo oculto, enel cuadro de diálogo anterior, pulsamosel botón “Avanzadas” y en el nuevocuadro, pulsamos “Agregar”.



Ahora introducimos el nombre del campooculto y su contenido. Al finalizar, pulsamos“Aceptar” hasta salir de los cuadros depropiedades.

Cuando hayamos ajustado laspropiedades de todos los campos y delformulario, éste aparecería más o menos, así:

Y el aspecto del código HTML generado con ese formulario sería como sigue:

Hemos de tener en cuenta que en HTML, no importa que el código esté escrito en una ovarias líneas, ya que los espacios en blanco no son tenidos en cuenta, salvo que sea un texto entredos etiquetas HTML y, aunque, en ese caso, haya varios espacios consecutivos, sólo se visualizaráuno. Además, FrontPage no genera el código exactamente así, sino que utiliza otro procedimientopara enviar los datos, propio de FrontPage, que deberemos modificar para que mantenga laestructura del que aparece listado aquí.



5.- Alojando nuestra página web en Internet.

Para que podamos poner nuestra página web a disposición de cualquier persona enInternet, necesitamos disponer de un espacio en un servidor de páginas web. Para los docentesde éste país, el CNICE facilita dicho espacio.

Al solicitar una cuenta de usuario al CNICE, pondrán a nuestra disposición una cuenta decorreo electrónico y un espacio, en los servidores de páginas web del CNICE, para que podamosalojar en él nuestras páginas web personales.

Para acceder a ese espacio web necesitamos un programa cliente de FTP (Protocolo deTransferencia de Ficheros), que nos permitirá copiar los archivos de nuestra página en el servidor,creando allí las carpetas necesarias para contenerlos.

El archivo que correspondería a la página de portada de nuestra web, debe llamarse“index.html” obligatoriamente, pues el navegador de Internet busca, por defecto, ese archivo enla dirección de Internet que vayamos a visualizar. En algunos servidores de páginas web, en lugarde “index.html” se debe nombrar “home.html”.

Existen muchos programas de FTP disponibles en Internet (WS-FTP, Cute FTP, etc.) quepodemos descargarnos de forma gratuita en alguna de sus versiones. Uno de los más intuitivosy fáciles de utilizar es WS-FTP LE, que es gratuito en esa versión (Edición Limitada) pero quees dispone de todas las funciones que podemos necesitar. El programa está en inglés, lo que nosupone una dificultad, debido a lo intuitivo que es.

Descarga de WS-FTP LE

En la dirección www.ftpplanet.com/download.htm podemos descargarnos este programa.Será necesario que introduzcamos una dirección de correo electrónico y hemos de pasar por doso tres pantallas antes de comenzar la descarga.

Instalación de WS-FTP LE

Para instalar WS-FPT LE basta con hacer doble clic sobre el archivo que hemosdescargado de Internet y seguir las instrucciones del programa de instalación. De cualquier modo,aún no fijándonos en las instrucciones, basta con aceptar o responder que si en cada pantalla querequiera pulsar algo, para que el programa se instale correctamente.

Una vez instalado, podremos arrancarle desde “Programas” en el menú “Inicio”.

Configuración de una cuenta FTP en WS-FTP

Al arrancar el programa se nos muestra laventana de “Propiedades de sesión” que vemos ala derecha. En ella, pulsamos el botón “New” paravaciar los cuadros de texto e introducimos losdatos de nuestra cuenta FTP.

En el campo “Profile Name” escribimos untexto que nos permita identificar la sesión queestamos creando.



En “Host Name/Address” escribimos la dirección de nuestro servidor FTP.

“User ID” es el campo que debe contener nuestro nombre de usuario, y en “Password”introducimos nuestra contraseña de acceso. Si no queremos introducir la contraseña cada vez queiniciemos una conexión con nuestro servidor FTP, marcaremos, también, la casilla “Save Pwd”.

Introducidos todos esos datos pulsamos el botón “Aplicar” y ya tenemos nuestros datosde acceso configurados. Ahora falta conectarnos. Basta con pulsar “Aceptar” en esta ventana paraque, si nuestro ordenador está conectado a Internet, se establezca la conexión con nuestroservidor FTP. A partir de aquí ya podemos transferir y manipular archivos y carpetas en nuestroespacio web.

Transferir archivos con WS-FTP

Una vez conectados vemos una ventana similar a la que muestra debajo. En la parteizquierda encontramos un explorador de archivos actúa sobre nuestro ordenador, mientras queel explorador de archivos de la parte derecha nos permite manipular los archivos en el servidorFTP.

Antes de comenzar a transferir los archivos de nuestra página web al servidor debemoscolocarnos dentro de la carpeta “public_html”, en el explorador de la derecha, pues es en esacarpeta, y solo en ella, donde debemos alojar nuestros archivos. Hagamos doble clic sobre ella.

Ahora transferiremos los archivos y carpetas al servidor, seleccionandolos en el exploradorde la izquierda y pulsando el botón con una flecha que señala a la derecha en el centro de laventana. Tras un breve espacio de tiempo, durante el que se mostrará en el campo de informesde la parte inferior de la ventana el desarrollo de la operación, serán copiados los archivos ycarpetas seleccionados al servidor FTP.



Posteriormente, podremos utilizar el resto de los botones de que disponen ambosexploradores, para manipular, básicamente, los archivos y carpetas en uno y otro ordenador, queaparecen descritos a continuación. Los botones que aparecen con el texto en gris, se activan alseleccionar algún archivo.

Cambiar de carpeta o directorio.

Crear carpeta o directorio.

Ver el contenido del archivo seleccionado, en una ventana de texto.

Abrir o ejecutar el archivo seleccionado.

Renombrar el archivo seleccionado.

Borrar el o los archivos o carpetas seleccionados.

Actualizar.

Mostrar el listado de archivos de la carpeta actual.



ÍNDICE

INTERNET

1.- Cómo conectarse a Internet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.a.- Conexión a través de una línea telefónica básica. . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.b.- Conexión mediante una línea de banda ancha. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.- Navegación por Internet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.a.- Búsqueda de información en Internet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.b.- Extracción de los recursos encontrados para usarlos de forma local. . . . . . . . . . . . 9

3.- El correo electrónico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.a.- Configurando el correo electrónico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.b.- Enviar correo electrónico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3.c.- Recibir correo electrónico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4.- Los foros de discusión. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

5.- Las news. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

5.a.- News de matemáticas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

DISEÑO DE PÁGINAS WEB

1.- Estructura básica de una página web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

2.- Organización de la información. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.- El editor de páginas web Microsoft FrontPage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

4.- Creando la página web con el editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

4.a.- Definiendo las propiedades de la página. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

4.b.- Maquetando la página con tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

4.c.- Introduciendo y manipulando textos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

4.d.- Insertando imágenes y otros elementos multimedia. . . . . . . . . . . . . . . . . . . . . . . . 30

4.e.- Creando enlaces de hipertexto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4.f.- Creando listas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

4.g.- Diseñando formularios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

5.- Alojando nuestra página web en Internet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

internet y diseño de páginas web -...

Documents