Taller Diseño de una web docente con software libre: ficheros html. Nivel Introductorio. TRABAJANDO CON KOMPOZER Rosa Mª Bernal Galindo rosabg@um.es José Miguel Zamarro Minguell jmz@um.es Universidad de Murcia
QUÉ SIGNIFICA? 1
Html (HyperText Markup Language) Html es un lenguaje que permite describir hipertexto, es decir, contenido estructurado en forma de texto con imágenes y con enlaces que se dirigen a otros documentos y que además incorpora multimedia (vídeo, sonido, gráficos ).
Difícil? 2
Sencillo? 4 3 5
A la hora de crear una página web, hay que planificar qué queremos. 6 No podemos comenzar a crear una web docente sin tener las cosas claras!
RECOMENDACIONES - Nuestra web tiene que ser fácil para navegar, es decir, que puedas ir de una página a otra sin perderte. - Evita páginas excesivamente largas. - Utilizar colores que dañen al visitante. - Evita utilizar imágenes que no tengan licencia de uso por parte de sus dueños.
En esta sesión vamos a aprender a: - Crear el fichero principal de una página web (index). - Conocer la apariencia del editor html. - Introducir texto y añadir formato al mismo. - Crear un segundo fichero html. - Insertar imágenes. - Insertar enlaces. - Subir ficheros html a SUMA o a la página web personal (Proyecto Webs)
Una página web tiene que tener una organización y estructura de carpetas donde se irán guardando paulatinamente nuevos archivos. Resulta muy útil, sobre todo cuando vamos a insertar muchos documentos. Así que antes de comenzar a utilizar Kompozer procederemos a crear una carpeta en nuestra memoria externa denominada html y dentro ésta se crearán tres carpetas denominadas:
Esta es la apariencia de Kompozer:
1. INSERTA UN TÍTULO TULO Y PROPIEDADES PARA LA PÁGINA QUE HAS CREADO: Menú: Formato Título y propiedades de la página
1. INSERTA UN TÍTULO TULO Y PROPIEDADES PARA LA PÁGINA QUE HAS CREADO: 1. Un título: tulo: Taller elaboración de webs docentes. 2. Autor/a: Nombre y apellidos. 3. Descripción: Taller sobre el editor html Kompozer para profesorado de la Universidad de Murcia.
1. INSERTA UN TÍTULO TULO Y PROPIEDADES PARA LA PÁGINA QUE HAS CREADO: Si nos fijamos en la parte superior observaremos que aparece el título que le habíamos dado anteriormente.
En la parte inferior del editor podremos ver que hay varias pestañas. Éstas serán los diferentes tipos de vistas que podemos utilizar para trabajar, si pinchamos en código fuente observaremos dónde se ha insertado la información que habíamos escrito sobre el autor y la descripción de nuestra página html.
Este es el código fuente que existe de momento de mi página html:
Un fichero html siempre comienza por <html> y termina en </html> Qu Qué estructura tiene un fichero html? <html html> <head> Encabezamiento: mostrará el título, la descripción del fichero html, el autor y la información adicional que queremos insertar </head> <body> Cuerpo: aparecerá los contenidos de mi página web: texto, imagen, video, audio </body> </html html>
2. GUARDAR EL FICHERO HTML: A continuación hay que guardar los cambios y le darle un nombre a nuestro fichero html: index Cualquier página web está formada por varios ficheros html y el principal se denomina index.
3. INSERTAR FORMATO Y ESTILO.
3. INSERTAR FORMATO Y ESTILO. Vamos a personalizar los colores:
3. INSERTAR FORMATO Y ESTILO. Se puede cambiar el tamaño del texto, añadir negrita, cursiva y subrayado, también puede alinearse el texto. Para cambiar el tamaño del texto Negrita, Cursiva, Subrayado Alineación del texto Para cambiar el color del fondo de la página. Para cambiar el color del texto
3. INSERTAR FORMATO Y ESTILO. Ahora practica: 1. Escribe el siguiente texto: Instituto de Ciencias de la Educación. 2. Cambia el color de la fuente. 3. Inserta negrita al texto. 4. Añade cursiva y subrayado a este texto. 5. Cambia el color del fondo de la página. 6. Centra el texto con alineación n central y después s utiliza la alineación n a la derecha.
3. INSERTAR IMÁGENES.
3. INSERTAR IMÁGENES. Aparecerá la siguiente ventana: Texto emergente: Será el texto que aparezca al situar el cursor del ratón sobre la imagen. Buscaremos la imagen escudo.png que tenemos en nuestra carpeta imagenes. El texto alternativo sirve por un lado, en el caso de que falle nuestra imagen y por otro lado, facilita información porque cuando situamos el puntero del ratón sobre la imagen aparece el nombre que le hemos dado.
3. INSERTAR IMÁGENES.
4. PREVISUALIZAR EL FICHERO INDEX EN EL NAVEGADOR. 1. Requisito imprescindible: guardar 2. Seleccionar en navegar.
5. CREA UNA SEGUNDA PÁGINA HTML. Inserta un segundo fichero html denominado html2 y escribe Esta es mi segunda página. 1 Cuidado: No debemos poner acentos ni dejar espacios en blanco en los documentos que de una página web. 2
5. ENLACES Enlace a una dirección web: Universidad de Murcia
5. ENLACES Enlace a un documento. Texto se convertirá en un enlace a un documento pdf. Aparecerá la misma ventana y tendremos que pinchar en el icono carpeta para buscar donde tenemos el fichero pdf denominado documento.pdf
5. ENLACES Cuidado: Está predeterminado en el programa que solo aparezcan los archivos html así que tendremos que desplegar y pinchar en todos los archivos.
6. SUBIR CONTENIDOS A SUMA
6. SUBIR CONTENIDOS A SUMA
6. SUBIR CONTENIDOS A SUMA
6. SUBIR CONTENIDOS A SUMA Subir directorio Nuevo directorio Nuevo Copiar archivo Eliminar Renombrar Cortar Pegar Abrir/ Descargar Editar Comprimir Para profundizar: Descomprimir http://www.um.es/atica/gat/tdm/cursosuma/dia_5/index_5.htm# Vídeo explicativo: http://www.um.es/atica/gat/tdm/cursosuma/dia_5/subircont.htm
6. SUBIR CONTENIDOS A SUMA Imagen del taller de Suma para profesores
6. SUBIR CONTENIDOS A SUMA Imagen del taller de Suma para profesores
7. SUBIR CONTENIDOS A TRAVÉS DE SÓCRATES EN MI ESPACIO WEB. http://www.um.es/atica/webs/index.php
7. SUBIR CONTENIDOS A TRAVÉS DE SÓCRATES EN MI ESPACIO WEB. http://www.um.es/atica/socrates/manual.php
7. SUBIR CONTENIDOS A TRAVÉS DE SÓCRATES EN MI ESPACIO WEB. http://www.um.es/atica/socrates/windows.php
7. SUBIR CONTENIDOS A TRAVÉS DE SÓCRATES EN MI ESPACIO WEB.
7. SUBIR CONTENIDOS A TRAVÉS DE SÓCRATES EN MI ESPACIO WEB.
7. SUBIR CONTENIDOS A TRAVÉS DE SÓCRATES EN MI ESPACIO WEB.
7. SUBIR CONTENIDOS A TRAVÉS DE SÓCRATES EN MI ESPACIO WEB.
Las imágenes utilizadas en esta presentación son capturas y otras imágenes tienen licencia Creative Commons y han sido extraídas de Flickr: 1. http://www.flickr.com/photos/f-l-e-x/3096005116/ 2. http://www.flickr.com/photos/puck90/2356415451/ 3.http://www.flickr.com/photos/51035608580@N01/214854623 4. http://www.flickr.com/photos/joshlewis/2161626058/ 5. http://www.flickr.com/photos/puck90/1802449668/ 6. http://www.flickr.com/photos/19738873@n00/365268693
8. RECURSOS Imágenes: http://flickrcc.bluemountains.net/ Templates: http://www.openwebdesign.org/browse.php http://www.templateworld.com/free_templates.html http://www.oswd.org/ http://www.opensourcetemplates.org/ http://www.templatesbox.com/templates.htm http://www.templateworld.com/free_templates.html http://templates.arcsin.se/ http://www.freecsstemplates.org/ http://www.ziddu.com/download.php?uid=abkdnjemblgbnoknzkqhkzsryauemjaq4 Iconos: http://www.iconfinder.net/ http://www.iconlet.com http://mouserunner.com/spheres_colocons1_free_icons.html http://turbomilk.com/freeicons/ http://www.iconbuffet.com
En esta sesión se han explicado algunas pautas básicas para crear una página web. Imprescindible practicar!
Taller Elaboración de una web docente con software libre: ficheros html. Nivel Introductorio. TRABAJANDO CON KOMPOZER Rosa Mª Bernal Galindo rosabg@um.es José Miguel Zamarro Minguell jmz@um.es Universidad de Murcia