Curso práctico para aprender a crear páginas web
Por Alejandro Valero
Página principal del curso: http://fresno.pntic. mec.es/avaler3/webs
- Editor web Kompozer -
Este curso aborda la enseñanza de Komposer, aplicación gratuita de software libre que se utiliza para la elaboración de páginas web. Está dividido en lecciones que se pueden impartir en el aula, pero también sirve para aprender el empleo de este programa de forma autodidacta. El curso es un calco del que creé en 2004, Páginas web con FrontPage Express, que he actualizado para el nuevo editor Komposer. Antes de comenzar, conviene estar informado de lo que es Internet y de las posibilidades que nos brinda. En la sección de Enlaces de interés se encuentran las direcciones de unas páginas muy útiles donde se puede conseguir información sobre el mundo de Internet.
El curso cuenta con imágenes y ejemplos que ilustran los contenidos, además de actividades que el alumno puede realizar para poner en práctica sus conocimientos y tests de autoevaluación. El objetivo es eminentemente práctico y consiste en la elaboración de una página personal que incluya los elementos más importantes que se pueden crear con Komposer. Aquí se presenta una página web un tanto humorística que se va a ir elaborando poco a poco durante el curso. También se enseñarán nociones del lenguaje HTML, que es la base de toda página web; para ello, al final de algunas lecciones hay una extensión que comenta el código fuente utilizado en cada lección.
Komposer existe para Windows, Linux y Mac, y es una de las mejores herramientas para aprender a elaborar documentos en lenguaje HTML, porque funciona prácticamente como un procesador de textos, es decir, los textos, las imágenes y los demás elementos que se deseen incluir en los documentos se pueden introducir simplemente utilizando el teclado y el ratón, sin que sean necesarios conocimientos previos de programación. Las mismas características tiene la aplicación NVU, en la que se basa Kompozer, Pero NVU ya ha dejado de actualizarse.
Otros programas más profesionales de edición de páginas web son FrontPage y Dreamweaver, aplicaciones muy sofisticadas que cuentan con las últimas técnicas utilizadas en la creación de páginas web. Kompozer comparte con ellas la posibilidad de crear visualmente todos los elementos de la página. Hay otros programas que no comparten esta característica pero que son muy útiles por estar equipados, como FrontPage y Dreamweaver, de las últimas herramientas de creación web y, además, por ser gratuitos. Son, por ejemplo, 1stPage2000, HTMLGATE y HTML-kit, aplicaciones para Windows que se pueden encontrar en muchas páginas de descarga de programas, y Quanta Plus y Bluefish, aplicaciones que se encuentran en todas las distribuciones Linux.
Pero antes de comenzar, veamos la página completa que vamos a diseñar en sus cuatro versiones. Que nadie se asuste: resulta más fácil de lo que parece. Pulsemos los siguientes botones para ver las páginas en ventanas nuevas:
Esta página web está validada por The World Wide
Web Consortium (http://www.w3.org/).
Esta obra está bajo una licencia
de Creative Commons.
© Alejandro Valero Fernández
Curso creado el 7 de octubre de
2008. He puesto este curso bajo una
licencia de Creative Commons. Según esta licencia, este curso
no se puede utilizar para fines comerciales, y puede ser modificado
haciendo referencia al autor y aplicándole la misma licencia.
Para descargar el curso al disco duro del ordenador hay que pulsar el botón de abajo. Es un archivo comprimido de xtensión ZIP que hay que descomprimir. Después, hay que abrir el archivo principal index.html.
También se puede descargar la página del curso en un archivo comprimido ZIP, sin instalador, pulsando el siguiente botón. Después de descomprimir el archivo ZIP, hay que abrir el archivo index.htm.
El programa Komposer se puede
descargar en la siguiente página. Existe para los tres sistemas
operativos más conocidos: Windows, Linux y Mac.
http://www.kompozer.net/download.php
Junto al archivo del programa, también hay que descargar el archivo de la traducción al español. Para instalarlo, se abre el programa y el menú Tools -> Extensions. En la ventana de diálogo que surge, hay que pulsar el botón Install, y se busca en el disco duro el archivo de extensión .xpi de la traducción. En la ventana Software Installation se pulsa el botón Install now, y una vez instalado, se reinicia el programa.
1.1 Comenzar aplicando formatos
1.2 Actividad nº 1: Aplicar formatos a un texto
1.3 Guardar el documento creado
1.4 Adquirir las primeras nociones sobre el lenguaje HTML
2.1 Insertar imágenes en un documento
2.2 Conocer las propiedades de la imagen
2.3 Actividad nº 2: Insertar imágenes
2.4 Conocer la etiqueta de imágenes en HTML
3.1 Aprender a trabajar con tablas
3.2 Propiedades de tabla y de celda
3.3 Modificar la tablaEntonces
3.4 Actividad nº 3: Utilizar las tablas
3.5 Conocer las etiquetas de tablas en HTML
4.1 Crear varios tipos de enlaces:
4.1.1 Con enlaces interno del documento
4.1.2 A otro documento interno
4.1.3 A una página web externa
4.1.4 A una dirección de correo electrónico
4.1.5 A un archivo para descargarlo (download)4.2 Conocer los mapas de enlaces
4.3 Modificar los colores de los enlaces
4.4 Actividad nº 4: Crear los enlaces de la web del monstruo
4.5 Conocer las etiquetas de enlaces en lenguaje HTML
5.1 Crear formularios con todos los tipos de campos:
5.1.1 Propiedades del formulario
5.1.2 Campo de texto
5.1.3 Lista de opciones
5.1.4 Botón radial
5.1.5 Casilla de verificación
5.1.6 Área de texto
5.1.7 Botones de envío y de restablecimiento
5.1.8 Campo oculto
5.1.9 El e-mail recibido5.2 Actividad nº 5: Crear una encuesta con formulario
5.3 Enviar un mensaje con código PHP
5.4 Conocer los campos de formulario en HTML
6.1 Conocer el funcionamiento de los marcos
6.2 Conocer cómo se han creado los marcos de esta página web
6.3 Actividad 6: Diseñar la página del Monstruo con marcos
7.1 Conocer el funcionamiento básico de las hojas de estilo
7.2 Algunos ejemplos de estilos
7.3 Actividad nº 7: Estilos en la página del Monstruo
8.1 Conocer el funcionamiento básico de JavaScript
8.2 Actividad nº 8: Ejemplos de scripts:8.2.1 Ventana de alerta en JavaScript
8.2.2 Menú desplegable
8.2.3 El rollover
9.1 Incluir la declaración del tipo de documento
9.2 Conocer las etiquetas <meta> que informan a los buscadores
9.3 Aprender a transferir los archivos a un servidor
10.1 Tipos de páginas web
10.2 El color
10.3 La navegación
10.4 El contenido
10.5 Imagen y multimedia
10.6 Los navegadores
10.7 La resolución de los monitores
10.8 Los tipos de letras
10.9 Público y medio
Test de páginas web
Test de lenguaje HTML
Test de Internet