Manual Código HTML

Ejercicio para elaborar y diseñar página WEB utilizando en lenguaje HTML

Objetivo:

Aprender a diseñar, elaborar una pagina WEB utilizando el lenguaje HTML.

Aplicación

Con el manual que encuentra a continuación, construya y diseñe una pagina por medio de los códigos de HTML utilizando el programa Bloc de notas, para ir aprendiendo y aplicando los diferentes conceptos y etiquetas.

Proyecto Elaborar una Página Web Educativa durante el periodo académico:

Diseñar y estructurar de un curso sobre un tema de su interés, para adultos de nivel intermedio.
Tenga en cuanta todos los aspectos académicos y pedagógicos pertinentes para programar un curso como:
objetivos de aprendizaje,
competencias a desarrollar, logros
organizacion de temas y contenidos,
cronograma de actividades,
modelo pedagogico y metodologia de enseñanza-aprendizaje,
ejemplos, ejercicios y prácticas de aprendizaje,
evaluacion,
bibligrafía y cibergrafía, etc

Diseño de Páginas Web. Conceptos Generales.

Introducción

Las páginas Web son documentos de hipertexto y multimedia. Son documentos multimedia porque incorporan imágenes, vídeos, animaciones, sonidos, textos de todo tipo, y son documentos de hipertexto, porque incorporan enlaces con otras páginas. Cuando pulsamos sobre un enlace de una página Web, visualizamos la página a la que llama ese enlace, esa página puede estar en el mismo servidor o en otro situado a mucha distancia, este proceso de ir de una página a otra es lo que se denomina navegar por Internet.

Los programas que sirven para visualizar páginas Web son los navegadores de Internet, son gratuitos y actualmente los dos más utilizados son: Microsoft Internet Explorer (vamos por la versión 6.0) y Netscape (también la última versión es la 6.0).

El lenguaje utilizado para crear páginas Web es el HTML, se trata de un lenguaje de etiquetas que define el aspecto de las páginas. Una página Web está compuesta por un archivo de texto plano, con extensión htm o html, escrito en lenguaje HTML, y todos los archivos multimedia relacionados con él.

Para crear páginas Web necesitamos un editor de texto simple como el Bloc de Notas y muchos conocimientos de lenguaje HTML, o muy pocos conocimientos de este lenguaje y aprender el manejo de programas de diseño Web gráficos como FrontPage o Dreamweaver. Estos programas traducen en segundo plano a código HTML todas las actuaciones del usuario.

En esta lección crearemos una página Web muy simple empleando el Bloc de Notas, el objeto es adquirir unos conocimientos básicos de HTML, así como una visión general, de qué es una página Web, cómo se crea y se publica en Internet.

Diseño de una página Web simple

Para crear documentos de hipertexto que puedan visualizarse en la Web, se ha desarrollado el lenguaje HTML (Hyper Text Markup Language). Este lenguaje permite dar indicaciones precisas al navegador de cómo debe presentarse el documento en pantalla.

Documentos HTML

Un documento HTML es un fichero de texto ASCII en el que se incluye, además del texto que se quiere mostrar en pantalla, ciertas directivas o etiquetas que indican, entre otras cosas, el formato del documento y la información relativa a los hiperenlaces.

Las etiquetas se escriben entre los signos '<' y '>' y generalmente se introducen por parejas, indicando el comienzo y el final de una acción. En este caso, la etiqueta final es similar a la inicial pero precedida por una barra '/'. Por ejemplo, la etiqueta <center> delante de un texto y la etiqueta </center> detrás del mismo indican que el texto comprendido entre ellas se mostrará centrado con respecto a la página.

La mayoría de las etiquetas precisan de una de cierre, que delimite el alcance de la acción, si bien se presentan excepciones.

El texto del documento junto a las directivas HTML se puede escribir con cualquier editor ASCII y el nombre del fichero que contenga dicho documento tendrá como extensión los caracteres html o htm.

Estructura de una página Web

Todas las páginas Web tiene la siguiente estructura:

Todo el documento debe estar entre las etiquetas <html> y </html>.

Las etiquetas <head> y </head> determinan la cabecera de la página Web, entre estas dos etiquetas pueden aparecer otras muchas, pero la única fundamental es <title> y </title>, el texto comprendido entre ambas determina el título que la página Web tendrá en el navegador.

Todo lo que queramos presentar en la página Web tendrá que estar situado entre las etiquetas <body> y </body>

Para hacer la primera práctica actuamos como sigue:

Abrimos el Bloc de Notas, escribimos el texto de la imagen anterior y guardamos el archivo en una carpeta con el nombre de leccion1.htm
Abrimos el Navegador de Internet.
Pulsamos sobre la opción Abrir del menú de Archivo, pulsamos sobre el botón de Examinar y seleccionamos el archivo leccion1.htm y pulsamos Aceptar
En el navegador veremos nuestra primera página Web

Podemos apreciar que el título de la página Web se ve en la barra de título, es lo que hemos conseguido con las etiquetas <title> y </title> de la cabecera.

Algunas etiquetas básicas de texto.

Presentamos algunas etiquetas básicas para texto en la siguiente tabla:

Etiqueta de apertura	Etiqueta de cierre	Descripción
<p>	</p>	Todo el texto comprendido entre estas dos etiquetas es un párrafo.
<center>	</center>	Todo el texto comprendido entre estas dos etiquetas aparecerá entrado con respecto a la página.
<h1>	</h1>	El texto comprendido entre estas dos etiquetas es un título de nivel superior.
<h2>	</h2>	El texto comprendido entre estas dos etiquetas es un título de segundo nivel.
<hr>		Presenta una línea de división

Seguimos con la práctica, abrimos el archivo leccion1.htm y escribimos el código de la imagen anterior entre las etiquetas <body> y </body>, el resultado en el navegador es el siguiente:

La etiqueta de imagen

Para incluir una imagen en la página Web se emplea la etiqueta <img src='nombre de la imagen'>, previamente habremos copiado la imagen a la misma carpeta en dónde se encuentra nuestra página Web.

Para incluir una imagen en nuestra página primero tenemos que disponer de ella, en este ejemplo la capturaremos de esta misma página.

situar el puntero del ratón sobre esta imagen , pulsar el botón derecho y tomar la opción guardar imagen como, seleccionar la carpeta en donde hemos guardado la página Web y guardarla con el nombre de cara.gif
Completaremos el código atendiendo a la siguiente imagen.

El resultado es el siguiente:

MANUAL PARA ELABORAR

PAGINAS WEB

El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Funcionan de la siguiente manera:

<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.

Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Por claridad, se usarán en este manual sólamente las mayúsculas

El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>
El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>

Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, principalmente el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido.

<HTML> Indica el comienzo de la pagina.

<HEAD> Comienzo de la cabecera del documento

<TITLE> Título de la página (en la barra superior de la ventana)

</TITLE> Cierre del título

</HEAD> Cierre de la cabecera

<BODY> Comienzo del cuerpo del documento. .

<SUP>XXX</SUP>  Superíndices

<SUB>XXX</SUB>  Subíndice

&NBSP; Permite dejar varios espacios entre palabras

<FONT SIZE=5> XXX </FONT>  Tamaño de la letra

Los tamaños del texto van, de menor a mayor, del 1 al 7. El tamaño normal (o tamaño base) es el 3. Se puede también cambiar relativamente con respecto a este tamaño normal.

<FONT FACE=xxx></FONT>  Tipo de letra

Nota: Quien no tenga instalada esta fuente, no notará nada de particular

Se pueden indicar en el atributo varias fuentes distintas, separadas por una coma. Si falla la primera, entonces el texto adopta la forma de la segunda, y así sucesivamente. Si fallan todas, el texto adopta entonces la fuente por defecto. Ejemplo. <FONT FACE="Impact, Arial"> </FONT>

COLORES PRIMARIOS

ROJO  FF0000

VERDE  00FF00

AZUL 0000FF

OTROS COLORES

BLANCO  FFFFFF

NEGRO  000000

AMARILLO  FFFF00

ETIQUETAS PARA PARRAFO

<BR> Deja una línea en blanco (Enter)

<P>  Deja varios espacios en blanco, pero para esto es necesario combinarlo con la etiqueta <BR>. Ejemplo <BR><P>
<CENTER>XXX</CENTER> CENTRADO

Para colocar títulos se debe utilizar <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.

Nota: Las líneas en blanco y las indentaciones del texto se han puesto para mayor claridad, pero no son necesarias. De hecho, podría estar todo en una sola línea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Véase en el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirían errores.

LISTAS

Listas desordenadas (viñetas)
Listas ordenadas (numeradas)
Listas de definición.

Listas Desordenadas

Sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Su estructura es la siguiente:

ETIQUETAS

RESULTADO

Una cosa
Otra cosa
Otra más
Etc.

listas ordenadas

Sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecerá automáticamente un número correlativo para cada cosa

ETIQUETAS

RESULTADO

<OL>
<LI> Primera cosa
<LI> Segunda cosa
<LI> Tercera cosa
<LI> Etc.
</OL>

Primera cosa

Segunda cosa
Tercera cosa
Etc.

Listas de definición.

Como su nombre indica, son apropiadas para glosarios (o definiciones de términos). Toda la lista debe ir englobada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada renglón de la lista tiene dos partes: 1) el nombre de la cosa a definir, que se consigue con la etiqueta <DT> (definition term) y 2) la definición de dicha cosa, que se consigue con la etiqueta <DD> (definition definition).

ETIQUETAS

RESULTADO

<DL>

<DT> Una cosa a definir

<DD> La definición de esta cosa

<DT> Otra cosa a definir

<DD> La definición de esta otra cosa </DL>

Una cosa a definir

La definición de esta cosa

SEPARADORES HORIZONTALES

<HR>  Línea horizontal

<HR WIDTH=XX ALING=LEFT>  Alineación izquierda

<HR WIDTH=XX ALING=RIGHT>  Alineación Derecha

<HR SIZE=XX>  Más espesor y embutida

<HR NOSHADE> Salida no embutida

COLOR DE FONDO

Se consigue añadiendo el comando BGCOLOR a la etiqueta <BODY> (situada al principio del documento), de la siguiente manera:

FONDOS CON UNA IMAGEN

El fondo de una página puede ser también una imagen, ya sea en formato GIF o JPEG. Esta imagen se repite por toda la página, de una manera análoga al tapiz de Windows. La estructura de la etiqueta es:

o bien:

INSERTAR IMÁGENES

Las imágenes deben estar guardadas en un formato de fichero especial llamado GIF o JPG. El formato GIF almacena las imágenes con un máximo de 256 colores y el formato JPG 16 millones de colores.

Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga).

Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT

Con el comando ALT se introduce una descripción (una palabra o una frase breve) indicativa de la imagen.

ALINEACIÓN DEL TITULO DE LA IMAGEN

TOP  Arriba

MIDDLE  Medio

BOTTOM  Abajo

ALINEACION DE LA IMAGEN

<IMG SRC="IMAGEN.GIF" ALIGN=RIGHT>  Alinea la imagen a la derecha.

<IMG SRC="IMAGEN.GIF" ALIGN=LEFT>  Alinea la imagen a la izquierda

Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se puede emplear la siguiente extensión de la etiqueta <BR>:

DIMENSIÓN DE LA IMAGEN

Puede cambiar el tamaño de la imagen con estos comandos: WIDTH (ancho) y HEIGHT (alto).

Ejemplo: <IMG SRC="isla.gif" WIDTH=120 HEIGHT=94>

Cuando vamos navegando por las páginas del Web parece a veces que todo se detiene completamente. Esto es algo que por desgracia ocurre muy a menudo. Pueden ser muchas las causas: conexiones de la red defectuosas, servidores lentos, etc. Son cosas que en general no nos queda más remedio que soportar. Pero hay una causa que se debe por colocar paginas enormes.

Hay unas cuantas maneras de minimizar el tamaño de los ficheros de imagen:

Reducir el tamaño de la imagen con un programa gráfico. Esto hará que haya menos pixels que almacenar, y por tanto menos kilobytes que cargar.

Reducir el número de colores utilizados en la imagen. Una imagen GIF puede tener un máximo de 256 colores, pero podemos a veces reducir este número. Por ejemplo, se puede conseguir un logo atractivo para encabezar las páginas con sólo dos colores, uno de primer plano y el otro de fondo. Con un programa gráfico adecuado se pueden hacer estas comprobaciones y reducciones.

Simplificar las imágenes. El formato GIF comprime la imagen buscando las secuencias repetidas en los datos y abreviándolas. Esto quiere decir que las zonas grandes de un sólo color se comprimen muy bien, al contrario de las que tienen muchos tonos y graduaciones.

Como referencia, el fichero de una imagen no debe sobrepasar los 100k, mejor aún más pequeño. Tampoco conviene que el tamaño de la imagen en la pantalla sea mayor de 500x400 pixels, para no obligar al usuario a tener que desplazarla con los cursores.

Para que la imagen reducida vuelva a su tamaño normal dando clic en ella debe colocarse la siguiente etiqueta:

TABLAS

La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>. Es decir:

<TABLE>

[resto de las etiquetas]

</TABLE>

Con esto se presentarían los datos tabulados, pero faltaría la característica que hace más atractivas a las tablas, y es que estos datos vayan dentro de unos cajetines formados por un borde. Para esto tenemos que añadir el atributo BORDER a la tiqueta, es decir:

[resto de las etiquetas]

</TABLE>

En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sería:

<TR>

[etiquetas de las distintas celdas de la primera fila]

</TR>

<TR>

[etiquetas de las distintas celdas de la segunda fila]

</TR>

En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <TD> y </TD>, que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila.

Ejemplo:

<TR>

<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD>

</TR>

<TR>

<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD>

</TR>

</TABLE>

Se puede añadir un titular (caption) a la tabla, es decir un texto situado encima de la tabla que indica cuál es su contenido. Se consigue con la etiqueta <CAPTION> y </CAPTION>.

VARIANDO EL ESPESOR DE LOS BORDES

El atributo BORDER (visto más arriba) pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que este borde sea tan grueso como queramos, poniendo:

CELDAS DE CABECERA

Además de las celdas que contienen datos normales, podemos poner, si nos conviene, celdas de cabecera (header), que se distinguen por estar el texto de dichas celdas en negrita y centrado.

Esto se consigue con la etiqueta <TH> y </TH> (en vez de la normal <TD> y </TD>)

POSICIONAMIENTO DEL CONTENIDO DENTRO DE LA CELDA

Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda los siguientes atributos:

<TD ALIGN=CENTER> Al centro </TD>

<TD ALIGN=RIGHT> A la derecha </TD>

<TH ALIGN=LEFT> Cabecera a la izquierda </TH>

El alineamiento por defecto en el sentido vertical es en el medio. También se puede cambiar, añadiendo dentro de la etiqueta de la celda los siguientes atributos:

<TD VALIGN=TOP> Arriba </TD>

<TD VALIGN=BOTTOM> Abajo </TD>

VARIANDO LAS DIMENSIONES DE LA TABLA

El navegador se encarga normalmente de dimensionar el tamaño total de la tabla de acuerdo con el número de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc.

A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totales mayores que las que le corresponden, tanto en anchura como en longitud. Esto se consigue añadiendo dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensión de la pantalla, o a una cifra que equivale al número de pixels.

Ejemplo:

Celdas que abarcan a otras varias

A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue añadiéndo dentro de la etiqueta de la celda los atributos COLSPAN=número para extenderse sobre un número determinado de columnas, o ROWSPAN=número para extenderse verticalmente sobre un número determinado de filas.

Ejemplo:

SEPARACIÓN ENTRE LAS CELDAS DE UNA TABLA

Por defecto, la separación entre las distintas celdas de una tabla es de dos pixels. Pero se puede variar esto con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE.

Por ejemplo, para obtener una separación de 20 pixels entre celdas ponemos:

(Se omite el resto de las etiquetas de la tabla)

SEPARACIÓN ENTRE EL BORDE Y EL CONTENIDO DENTRO DE LAS CELDAS

Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE.

Por ejemplo, para obtener una separación de 20 pixels entre el contenido y los bordes, dentro de cada celda:

(Se omite el resto de las etiquetas de la tabla)

ENLANCES

ESTRUCTURA DE LOS ENLACES

En general, los enlaces tienen la siguiente estructura:

donde xxx es el destino del enlace (Obsérvese las comillas).

yyy es el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado)

ENLACES DENTRO DE LA MISMA PÁGINA

A veces, en el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto desde una posición a otra determinada.

En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la página a donde queremos saltar, se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecerán en la pantalla en color (en forma de hipertexto). Su estructura es, entonces:

Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:

ENLACES CON OTRA PÁGINA NUESTRA

Puede ser que tengamos una sola página. Pero lo más frecuente es que tengamos varias páginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas.

Supongamos que queremos enlazar con la página creada en el ejemplo del capítulo anterior, que la hemos llamado mipag2.html. En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del

fichero:

<A HREF="mipag2.html"> Ejemplo del capítulo 2 </A>

ENLACES CON UNA PÁGINA FUERA DE NUESTRO SISTEMA

Si queremos enlazar con una página que esté fuera de nuestro sistema (es decir, que esté en un servidor distinto al que soporta nuestra página), es necesario conocer su dirección completa, o URL (Uniform Resource Locator).

<A HREF="http://home.netscape.com/"> Página inicial de Netscape </A>

Que daría como resultado: Página inicial de Netscape

ENLACES CON UNA DIRECCIÓN DE EMAIL

En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la dirección de email.

La estructura de la etiqueta es:

<A HREF="mailto: dirección de email"> Texto del enlace </A>

PUBLICACIÓN Y PROMOCIÓN DE UNA PÁGINA

PUBLICACIÓN DE UNA PÁGINA

El propósito que tenemos al confeccionar una página del Web es, por supuesto, el de publicarla y ponerla a disposición de todo el mundo.

No podemos colocarla directamente en la red, pues necesitaríamos disponer para nosotros solos de un servidor, es decir, un ordenador conectado permanentemente con Internet y dotado de un programa específico, lo que supone una gran inversión económica y unos elevados conocimientos técnicos.

La solución es instalarla en un servidor conectado a la WWW (World Wide Web: la telaraña mundial), la red de servidores interconectados entre sí que nos permite acceder a cualquier página en cualquier parte del mundo, y navegar a través de ellas.

Los distintos canales para colocar una página en la red son:

Los servidores de las instituciones oficiales y académicas a sus miembros, para la difusión de información relacionada con esos organismos.

Los proveedores comerciales de acceso a Internet, o ISPs (Internet Service Providers) que ceden frecuentemente a sus usuarios un espacio determinado en sus servidores, para que puedan colocar sus páginas personales, bien sea gratuitamente o por una tarifa determinada.

Las empresas comerciales que, sin ser proveedores de acceso a Internet, se dedican a alquilar espacio para la colocación de páginas, de carácter personal o comercial.

Ciertos servidores que conceden de una manera gratuita espacio para la colocación de páginas personales. Uno de los más populares es Geocities, que concede un espacio de 2 megas. Sus páginas explicativas está en inglés, pero se pueden consultar las instrucciones en castellano en la FAQ de WEB-ES, de Alonso Alvarez.

Puedes encontrar muchos más servidores que conceden páginas gratuitas consultando:

Agenda de Direcciones de HTML, de Manuel Barberán. Detallada lista de servidores gratuitos, algunos de ellos en castellano.

Yahoo! Relación de servidores gratuitos de este conocido motor de búsqueda.

¿CÓMO SE ENVÍAN LAS PÁGINAS AL SERVIDOR?

Una vez de haber confeccionado en nuestro disco duro la página Web, y estando ya lista para ser colocada en el servidor, surge la cuestión de cómo proceder para enviarla.

No se pueden dar aquí unas instrucciones precisas, pues depende de la manera establecida para ello por cada servidor.

Generalmente se hace utilizando un programa de FTP (programa de envío y recepción de ficheros). Pero antes habrá que consultar en las páginas del servidor si existen las instrucciones pertinentes para el envío, o en su defecto realizar la consulta por e-mail o por teléfono.

PROMOCIÓN DE UNA PÁGINA

No basta con colocar nuestra página en la red. Por muy interesante que sea su contenido, y por bien diseñada que esté, para

que los demás puedan acceder a ella tienen que tener conocimiento de su existencia. Es una labor nuestra la de promocionar

la página, es decir, darla a conocer por todos los medios posibles.

Para comenzar, es conveniente incluir la dirección (o URL) de la página en la firma de nuestro programa de email, así como

también en el de lectura de newsgroups, y mejor aún si además se incluye su título, o una frase que indique el contenido de la

página. De esta manera se incita a visitarla al que esté interesado en ese tema.

Pero el paso más eficaz es dar de alta a nuestra página en sitios del Web especializados en almacenar y organizar direcciones.

Estos sitios sirven como bases de datos a donde acude la gente en búsqueda de información sobre dónde encontrar las páginas del Web deseadas. Además, dar de alta una página en los buscadores es totalmente gratuito.

MANUAL PARA ELABORAR PAGINAS WEB
Por: Fanny López Valek
Docente Universitaria de Nuevas Tecnologias de la Información y la Comunicación aplicadas a la Educación

http://fannylopez.spaces.live.com/