HTML

pág. 1

EDICIÓN EN HTML

¿QUÉ ES EL HTML?

Una de las primeras preguntas que se hace uno al acercarse a la creación de páginas WEB es qué significa eso de HTML.

Las siglas HTML son las iniciales de la expresión en inglés HyperText Markup Language. Traducido al castellano sería Lenguaje de Etiquetas de Hipertexto.

Se trata de un conjunto de etiquetas que se van intercalando entre el texto de forma que los programas que utilizamos para navegar por la Red sepan qué es lo que tienen que mostrar cuando accedemos a una página y cómo deben presentarlo en la pantalla.

Existe un organismo internacional independiente (World Wide Web Consortium o W3C) que se encarga de ir fijando cuáles son las etiquetas válidas pero, a pesar de ello, la batalla comercial que se ha desarrollado en torno a los navegadores para Internet ha originado situaciones en las que han aparecido etiquetas propietarias de un determinado programa.

El lenguaje HTML surgió con la finalidad de permitir organizar de forma estructurada la información (fundamentalmente textual) para su consulta por la red, pero no tenía intención de preocuparse por el aspecto gráfico de dicha información.

CONCEPTOS DE SERVIDORES Y CLIENTES WEB

SERVIDOR: ordenador que aloja información y ofrece servicios (correo, internet, software, hardware, etc.)

CLIENTE: aplicación u ordenador que consume servicios de un cliente (utiliza sus recursos o recibe información del servidor)

pág. 2

NORMAS DE ESTILO

- ¿Qué queremos comunicar? - Tener las ideas claras - Decoración uniforme - Selección de colores y su interpretación - SENTIDO COMÚN

EL COLOR EN LA WEB

En el mundo del diseño el color es un aspecto de la máxima importancia, es una forma capaz de comunicar empleando muy poco espacio y muy poco tiempo. Estos dos aspectos hacen que sea básico su uso en una página web, donde en no más de diez segundos debemos captar la atención de nuestros visitantes si no queremos que se vaya a otro lugar.

Un uso adecuado del color en una página puede ser clave para su éxito. Todos nos hemos encontrado páginas con este aspecto descuidado, páginas donde a veces el texto era ilegible debido a la combinación de colores. O donde el uso de colores chillones nos ha alterado y enseguida nos hemos ido a otro lugar más agradable.

Aunque no vamos a entrar en tecnicismos si es conveniente conocer alguna terminología que nos permita entender lo que leamos acerca del uso del color o de las características de los colores. Es un glosario breve y claro.

Círculo cromático

También llamado rueda de colores, es un círculo dividido en sectores de diferentes colores que nos permite estudiar las relaciones entre estos. Existen en ella tres colores primarios (rojo, verde y azul) cuyas combinaciones nos permiten obtener todos los demás. En la figura tenemos una rueda de tan solo 12 colores, como sabes en la web dispones de bastantes más colores.

Tono (Hue) Es el estado puro del color, sin blanco o negro agregados. Es lo que define a un color y nos permite por ejemplo diferenciar el verde del rojo. Se refiere al recorrido que hace un tono hacia uno u otro lado del círculo cromático, por lo que el verde amarillento y el verde azulado serán matices diferentes del verde.

pág. 3

Saturación Es una medida de la presencia o ausencia de grises dentro de un color. Puede entenderse como el grado de pureza de un color, así un rojo muy saturado indica un rojo puro, sin mezclas.

La parte superior vemos los colores con la máxima saturación, los más puros. En la zona inferior vemos la mínima saturación, todos los colores tienden al gris

Luminosidad (value)

Es la intensidad (claridad u oscuridad) en el color, y se refiere a la cantidad de luz percibida. Se obtiene del agregado de blanco o negro a un color base. A medida que a un color se le agrega más blanco se intensifica la claridad del mismo por lo que se obtienen valores más altos. Por contra a medida que a un color se le agrega más negro, se intensifica dicha oscuridad y se obtiene un luminosidad más baja.

Arriba los colores más luminosos, prácticamente blancos. Abajo los menos luminosos, muy alto contenido en negro.

Los colores en nuestros monitores se forman mezclando el rojo, verde y azul. En inglés Red, Green, Blue, estas iniciales dan lugar al nombre RGB para definir los diferentes colores. Así un color se describe por la cantidad de cada uno de estos colores primarios, cantidad que va de 0 a 255. Habitualmente esto se expresa en hexadecimal como un código de 6 dígitos (RRGGBB) dos dígitos para cada componente.

Por ejemplo: un color 10A2C0, tiene un componente de rojo igual a 10, de verde igual a A2 y de azul C0. ¿Un lío? Te lo digo en decimal Rojo = 16, Verde = 162, Azul = 192. Por ejemplo el blanco es el FFFFFF (máximo de rojo, verde y azul), mientras que el negro es el 000000, ausencia de todo color.

A la hora de diseñar tu web deberás elegir una serie de colores que deben resultar armónicos, o sea, que vayan bien unos con otros. Debemos elegir un esquema de colores para todas las páginas del sitio. Lo habitual es que basten 4 colores para lograr un buen esquema, si ves que queda un poco sobrio puedes jugar un poco con la luminosidad de los colores elegidos.

pág. 4

Colores complementarios consiste en elegir dos colores opuestos de la rueda cromática

Complementarios cercanos

Se basa en coger un color y dos contiguos a su complementario

Tríadas complementarias Tres colores equidistantes tanto del centro de la rueda, como entre sí, es decir, formando 120º uno del otro.

Contiguos Serie de colores comprendidos entre otros dos. Cuando los colores extremos están muy próximos en el círculo cromático, la gama originada es conocida también con el nombre de colores análogos

Para saber si un juego de colores resulta armónico basta echar un vistazo a la naturaleza, veremos que hay colores que nunca aparecen mezclados y otros que pegan perfectamente.

pág. 5

INTERPRETAR EL COLOR

¿Y qué color usar como base? ¿O para las distintas partes de mi web? Pues eso es cuestión de gustos, pero podemos ayudarte un poco también en esto. Aquí te indicamos las sensaciones que están asociadas a cada color, a veces es una cuestión cultural y otras es psicológica, pero sea como sea funciona.

negro Elegancia, seducción, misterio, fuerza, mal.

blanco Pureza, inocencia, limpieza, ligereza, juventud, suavidad.

rojo: Peligro, alarma, entusiasmo, pasión, entusiasmo, agitación, fuerza, sexo, calor, sangre, violencia, intensidad. Asociado con los sentimientos enérgicos y con la excitación apasionada o erótica, y asociado a la ira, al enfado. Es el único color brillante de verdad y puro en su composición. Puede ser usado para llamar la atención, para incitar una acción o para marcar los elementos más importantes de la página, pero cuando es usado en gran cantidad cansa la vista en exceso.

amarillo Entusiasmo, pasión, fuerza, sexo, precaución, calor, primavera, inocencia, infancia. Es un color optimista y alegre que en muchas culturas simboliza la deidad. Los tonos muy brillantes se usan para indicar peligro, y si es muy suave puede sugerir delicadeza. Un entorno amarillo medio o pálido hace a la gente sentirse cómoda, caliente. Se ha asociado siempre el amarillo a la intelectualidad y al pensamiento claro y hay psicólogos que dicen que este color ayuda a memorizar datos a las personas. Pero hay que tener en cuenta que es el color que fatiga más la vista, porque causa una estimulación excesiva de los ojos, por lo que un entorno amarillo brillante causa irritabilidad.

azul Sinceridad, dignidad, melancolía, tristeza, confianza, masculino, cielo, agua, sensualidad, comodidad. Si es muy pálido puede inspirar frescura e incluso frío. Da sensación de elegancia y frescura, cuando no es muy oscuro. Si es oscuro da sensación de espiritualidad. Es un color que disminuye el apetito, por lo que no es aconsejable su uso para una página sobre recetas de cocina o productos alimenticios. También puede expresar tristeza, pasividad, depresión.

naranja Alegría, juventud, calor, verano. Es vibrante y caliente como la luz del sol o el fuego, exótico como las frutas tropicales, sugiere informalidad en el trato, amistad, y destaca mucho sobre el entorno que le rodea.

rosa Calma, debilidad, delicadez, tranquilidad. Es un color asociado en nuestra cultura con la mujer.

verde Naturaleza, salud, frescura, tranquilidad, crecimiento, abundancia, fertilidad, plantas, bosques. Se dice que es el color más descansado para el ojo y que tiene poder de curación.

púrpura Abundancia, sofisticación, inteligencia, espiritualidad, dignidad. Puede evocar tranquilidad y puede evocar frivolidad y artificialidad. Aunque puede simbolizar la espiritualidad, el misterio, la aristocracia y la pasión, también puede simbolizar el luto, la muerte, la nausea, el orgullo y la pomposidad.

violeta Es el color de la fantasía, del juego, de la impulsividad y de los estados de sueño, aunque puede sugerir pesadillas o locura.

marrón Sugiere edad, cosas viejas, madera, ladrillo.

pág. 6

SELECCIÓN DE COLORES

En la siguiente página web puedes obtener el color que quieras en Hexadecimal, tan solo selecciona el color y su código aparecerá en el recuadro

http://html-color-codes.info/codigos-de-colores-hexadecimales/

Selecciona el color o introduce el código hexadecimal

Código hexadecimal

pág. 7

EL ENTORNO DE TRABAJO DE KOMPOZER

El entorno con el que vamos a trabajar es KompoZer. Está situado en Inicio → Todos los programas →KompoZer.

La distribución de los menús es la siguiente:

1. Barra de Menús. Ofrece acceso a todas las opciones del programa organizadas como en otras aplicaciones de Windows en Archivo, Editar, Ver, Insertar, …

2. Barra de Redacción. Consta de los botones de acceso a las operaciones más frecuentes: Nuevo, Abrir, Guardar, Publicar, etc.

3. Barra de Formato. Contiene las herramientas más útiles para aplicar formato al texto: tipo de fuente, tamaño, color, efecto, justificación, etc. Si se sitúa el ratón sobre cada botón se muestra un mensaje indicando su función.

4. Barra de pestañas. KompoZer permite editar varias páginas usando un sistema de pestañas donde cada documento abierto es accesible al pulsar sobre la pestaña correspondiente. El nombre del archivo aparece acompañado por el icono de un diskete rojo cuando esa página ha sido modificada pero no guardada.

5. Documento. Muestra el contenido del documento HTML actual.

6. Barra de modo de edición. Indica el modo de vista que está activo en el documento actual. Se puede cambiar el modo de visualización pulsando en una de estas pestañas: Normal, Etiquetas HTML, Código fuente y Vista preliminar. Mientras no se indique lo contrario se utilizará el modo de visualización Normal.

7. Barra de estado. Muestra la posición del cursor con respecto a la jerarquía de etiquetas HTML del documento. Se pueden asignar atributos a una etiqueta haciendo clic derecho sobre la etiqueta en la barra de estado y seleccionando la opción deseada.

8. Administrador de sitios. Permite crear y mantener un sitio web.

pág. 8

El aspecto de la versión 0.8b3 es el siguiente:

Recuerda que en el menú Ver puedes activar las diferentes barras de herramientas.

pág. 9

En la pestaña Vista preliminar o Diseño (depende de la versión que trabajes) verás el aspecto, aunque para ver el funcionamiento de los enlaces tienes que pulsar el botón de Navegar.

En la pestaña código fuente, verás el código en HTML que se va originando o bien, que tú escribas.

pág. 10

ACTIVIDAD 1: Sitio Web

Un sitio web (en inglés: website) es un conjunto de páginas html relacionadas entre sí por hiperenlaces, gestionadas por una única entidad o persona, accesibles desde Internet a partir de una dirección URL de su página índice (index) y con una unidad de contenido y de estilo gráfico. Incluye textos, imágenes, archivos de audio, vídeo y enlaces a otros sitios web. Normalmente no se diseña una página web aislada sino más bien un sitio completo donde a partir de una página principal o índice se enlazan el resto de páginas.

La estructura de archivos y carpetas Antes de iniciar el diseño de un sitio web es necesario preparar su estructura de carpetas y archivos. Cuando el número de ficheros es considerable, resulta muy útil ubicarlos en carpetas para facilitar su localización y edición. Existen múltiples posibilidades de organizar el sistema de ficheros.

Con carácter general se proponen un modelo basado en la organización por tipos de archivos. Las páginas HTML se guardarán en el directorio o carpeta principal mientras que los elementos que utilizan (audios, vídeos, hojas de estilo, imágenes, etc.) se situarán en las subcarpetas correspondientes.

Esta organización está especialmente pensada para un sistema de páginas HTML que comparten recursos: imágenes, hojas de estilo, programación javascript, etc.

Las principales carpetas que utiliza son:

1. audios: archivos de audio mp3. 2. css: hojas de estilo css. 3. descargas: archivos zip, exe, etc que se ofrecen para descarga. 4. imágenes: imágenes jpg, gif o png. 5. pdf: documentos pdf. 6. scripts: archivos js con código javascript reutilizable. 7. swfs: archivos con animaciones flash (*.swf). 8. vídeos: ficheros en distintos formatos de vídeo: *.wmv, *.flv 9. textos: ficheros con documentos de tipo texto (.txt, .doc, etc).

pág. 11

Los nombres de carpetas y archivos

Con intención de evitar errores es interesante respetar las siguientes normas cuando se asigna nombre a carpetas o archivos:

1. El nombre asignado estará formado por caracteres alfanuméricos: a-z y 0-9

2. No debe contener caracteres no alfanuméricos, signos de puntuación, espacios en blanco, caracteres acentuados, eñes, etc.

3. Los únicos caracteres no alfanuméricos permitidos son el subrayado _ y el guión –

4. No debe superar los 20 caracteres.

5. Utilizar siempre letras minúsculas, aunque se admitan mayúsculas. Hay servidores que distinguen entre mayúsculas y minúsculas. Esto significa que la página INDEX.html no es la misma que la página index.html.

6. Para las páginas HTML utilizar siempre la extensión: *.html aunque se admita la *.htm

7. Reserva el nombre index.html para la página que deseamos se muestre por defecto cuando el usuario navega hasta la carpeta sin indicar un archivo html concreto.

¿Cómo crear un sitio web con Kompozer? Es práctica habitual disponer de una copia íntegra del sitio web en el equipo local. Ésta se suele guardar en una carpeta del disco duro. Cuando se realizan actualizaciones de su contenido se suben los archivos oportunos utilizando un programa cliente de FTP (File Transfer Protocol).

Para el correcto funcionamiento de todas tus páginas web, vamos a crear una carpeta que se va a llamar CursoLetraNombreApellido1miweb (en adelante miweb) en nuestro ordenador donde guardaremos TODAS las páginas web que vamos a crear. Por ejemplo, 1BACHBIsabelTorres.

A continuación, se detalla el procedimiento para convertir la carpeta miweb en un sitio web local utilizando Kompozer.

1. Abre Kompozer

2. Elige Ver > Mostrar/Ocultar > Administrador de sitios que es el panel lateral o bien pulsa directamente la tecla de función <F9>

3. En el panel Administrador de sitios pulsa en el botón Editar sitios.

pág. 12

4. En el cuadro Configuración de publicación introduce “MiSitio” en el cuadro de texto Nombre de sitio y pulsa el botón Seleccionar directorio para apuntar a la carpeta miweb. Clic en el botón Aceptar.

Si quieres eliminar el sitio, en la anterior ventana viene el botón correspondiente para Eliminar sitio.

5. En el Administrador de sitios ahora se muestra la rama MiSitio. Pulsa sobre el icono “+” para desplegar su contenido. Se muestra una estructura de árbol con las carpetas y archivos que contiene.

6. En la parte superior derecha del Administrador se dispone de botones que permiten:

• Recargar. Permite recargar o actualizar el listado de archivos y carpetas. Es útil cuando se añaden elementos utilizando el explorador de archivos de Windows o bien cuando se crea una página HTML nueva.

pág. 13

• Nueva carpeta. Para crear una nueva carpeta dentro de la carpeta seleccionada en el árbol del Administrador de sitios. 3) Cambiar nombre. Facilita la modificación de nombre del archivo o carpeta seleccionado.

• Eliminar. Elimina el archivo o carpeta seleccionada.

7. Utiliza estos botones para crear las carpetas de la imagen: audios, css, descargas, images, pdf, plantillas, scripts, swf, videos y textos.

8. A continuación vamos a crear una página que haga de índice para nuestro nuevo sitio web. Ve a Archivo > Nuevo. O bien si está la página (sin título) abierta, nos situamos en ella.

9. Vamos a guardar la página, la primera vez te preguntará para que escribas el título de la misma que se visualizará en la barra de título de la página al verla a través del navegador.

10. Pondrás como título Mi página principal y la guardarás en la carpeta miweb con el nombre index.html

11. Ya tienes tu primera página web, que ahora mismo está en blanco, pero que

construiremos más adelante.

pág. 14

ACTIVIDAD 2: Mi Primera Página Web

El propósito de esta actividad es diseñar tu primera página web con Kompozer. El tema elegido es una breve pincelada del poeta Federico García Lorca. En este documento se utilizarán: encabezado, texto, imagen y un enlace a una página externa.

1. Descarga de Internet una imagen de Federico García Lorca y guárdala en la carpeta images de tu sitio web con el nombre lorca.jpg (o la extensión que tenga la imagen).

2. Copia de Wikipedia la información que encuentres de Federico García Lorca y pégala en el bloc de notas. Guarda el archivo en tu carpeta textos con el nombre lorca.txt

INICIAR UN DOCUMENTO NUEVO EN KOMPOZER

3. Abre el archivo lorca.txt con el bloc de notas. Selecciona Edición > Seleccionar todo para seleccionar el texto completo que contiene este archivo y a continuación elige Edición > Copiar para copiarlo al portapapeles de Windows. Cierra la ventana del Bloc de Notas.

4. Abre el programa KompoZer.

5. En la barra de tareas de windows pulsa en el botón correspondiente de Kompozer para maximizar la ventana de este programa.

pág. 15

6. Clic sobre el nuevo documento HTML que estamos editando y en la barra de menús selecciona Editar > Pegar. De esta forma podrás disponer del texto de la página sin necesidad de teclearlo.

7. Antes de continuar conviene guardar el archivo en la carpeta miweb que hemos creado. Para ello pulsa en el botón Guardar o bien elige Archivo > Guardar.

8. En el cuadro de diálogo Título de la página introduce su título y haz clic en el botón Aceptar.

9. Se muestra el cuadro de diálogo Guardar página como donde debes desplegar la lista Guardar en para localizar la carpeta miweb. En la casilla Nombre introduce el nombre del archivo: lorca.

10. Clic en el botón Guardar

11. Título. Selecciona la primera línea de texto: “Federico García Lorca”. En la barra de Formato despliega el cuadro de estilos de párrafo y elige Título 1. Si deseas regresar al estilo normal, marca el texto que desees y selecciona en esta lista: Texto del cuerpo.

pág. 16

Nota: Es muy recomendable utilizar las distintas opciones de formato de esta lista para destacar frases y párrafos.

INSERCIÓN DE IMÁGENES

12. Haz clic debajo del título y pulsa la tecla <enter> para definir el punto donde se insertará la imagen. En la barra de Redacción pulsa en el botón Imagen.

13. Se muestra el cuadro de diálogo Propiedades de imagen. Pulsa en el botón Elegir archivo… para localizar el archivo que contiene la imagen.

14. Despliega la lista Buscar en: para abrir la carpeta miweb\images donde hemos situado anteriormente el archivo lorca.jpg. Clic sobre este archivo y pulsa en el botón Abrir.

15. Al regresar de nuevo al panel Propiedades de imagen conviene introducir el Texto alternativo (Si no se inserta puede dar un error). En este caso teclea "Federico García Lorca". Se trata de un texto descriptivo que contribuye a la accesibilidad de nuestra página y que se mostrará cuando el usuario sitúe el ratón sobre ella.

pág. 17

16. Observa que en la casilla Ubicación de la imagen se indica la ruta relativa para localizar la imagen desde la página actual: images/lorca.jpg. Para terminar clic en el botón Aceptar.

Insertar un hipervínculo

17. Escribe en una nueva línea de tu página web el texto "Más información". A continuación en la barra de Redacción pulsa en el botón Enlace.

18. Selecciona y copia (Ctrl+C) el enlace que aparece bajo este párrafo. Esta URL es un enlace a Google que ya incluye los términos de búsqueda relativos al autor que nos ocupa:

http://www.google.es/search?q=Federico+García+Lorca

19. En el cuadro de diálogo Propiedades del enlace sitúa el cursor en la casilla Ubicación del enlace y pulsa la combinación de teclas Ctrl+V para pegar la URL copiada anteriormente. Para terminar, pulsa en el botón Aceptar.

pág. 18

20. Clic en el botón Guardar.

21. Haz clic el botón para cargar en el navegador el documento que acabamos de salvar y comprobar los resultados.

22. La primera vez que utilices el botón navegar el programa solicitará permiso para lanzar una aplicación externa. Sería conveniente que marcaras la casilla para que recordara esta decisión de forma que no te lo pregunte cada vez que vuelvas a pulsarlo.

23. El resultado será:

Otra forma de ver el resultado es:

24. Minimiza la ventana de Kompozer para situarte en la carpeta miweb. Doble clic sobre el archivo lorca.html creado para ver su aspecto con el navegador web instalado por defecto.

25. Si es necesario abrir el archivo selecciona Archivo > Abrir desde KompoZer.

pág. 19

ELEMENTOS VISUALES

Está claro que los elementos visuales son importantes, pero lo que no debemos perder nunca de vista es la organización de la información, de manera que siempre quede organizada de una forma clara, ordenada y comprensible, incluso si la despojamos de los atributos visuales.

Una vez hecha la salvedad anterior vamos a comenzar un recorrido por los recursos de los que disponemos para modificar el aspecto de un documento html Las primeras operaciones sobre las que podríamos practicar serían las referentes a la modificación del tipo de letra y su tamaño (al que se denomina cuerpo).

Para acceder a los tipos de letra disponemos de las dos posibilidades que se muestran en las imágenes:

• un desplegable en la 2ª barra de formato

• la opción de menú formato tipo de letra que nos da acceso a las fuentes instaladas.

Además del tipo de letra podemos jugar con el cuerpo de las mismas, esto es, su tamaño.

Antes de recurrir a los iconos que aparecen en la barra de formato vamos a tomar en consideración la opción de menú formato tamaño. Cuando accedes a ella verás que hay una serie de tamaños limitada y es importante que lo tengas en cuenta porque los navegadores antiguos pueden tener problemas con especificaciones de tamaño diferentes a la que se consigue seleccionándolos desde aquí.

pág. 20

JUSTIFICACIÓN

La justificación del texto por defecto se hace a la izquierda, aunque podemos también hacerla centrada, a la derecha o justificada a ambos lados.

KompoZer, como los actuales editores gráficos de páginas web, permite que marquemos la alineación justificada a ambos lados, pero es posible que si utilizas algún editor más antiguo no te ofrezca la posibilidad de justificar el texto de forma completa.

Además de la justificación por defecto podemos también justificar el texto a partir del centro o a partir de la derecha. Los botones a usar son los mismos que los de los procesadores de texto:

VIÑETAS Y MARCADORES

En ocasiones nos puede interesar colocar enlaces a otros puntos de una misma página. Antes de crear el hipervínculo, es necesario situar esos puntos mediante marcadores de posición.

Un marcador es un nombre que representa una posición dentro de la página. Suele estar formado por un fragmento de texto y es utilizado como destino de un hipervínculo.

En el ejemplo que nos ocupa se utilizan marcadores e hipervínculos para crear un glosario de términos. Asimismo se utilizan viñetas para crear la lista de hipervínculos.

Una lista con viñetas es una lista de elementos donde no importa el orden y todos se muestran precedidos por un mismo símbolo que recibe el nombre de viñeta.

ACTIVIDAD 3: Enlaces y Marcadores

1. Inicia Kompozer haciendo doble clic en el icono del programa situado en el escritorio.

2. El programa se abrirá sobre un nuevo documento en blanco.

3. Guarda la página web con el título Anclas Arriba y Abajo y llama a tu página anclas.html

4. Pon como título Anclas: Arriba y Abajo. A continuación despliega el cuadro de formatos y elige Título 1.

5. Copia y pega el texto anterior (elementos visuales, justificación y viñetas y marcadores) en tu nueva página web.

pág. 21

VIÑETAS

6. Escribe, bajo el título un pequeño índice con los títulos de los apartados que has copiado (elementos visuales, justificación y viñetas y marcadores).

7. Pulsa y arrastra para seleccionar la lista completa de términos situada debajo del título. A continuación, pulsa en el botón lista numerada de la barra de Formato.

8. Después de cada apartado escribe el texto Arriba y alinéalo a la derecha.

MARCADORES

La estructura que va a tener nuestro documento se recoge de forma gráfica en la siguiente figura:

pág. 22

Ahora vamos a definir los marcadores o anclas, es decir, los puntos de la página a dónde se van a dirigir los enlaces.

En primer lugar vamos a definir un marcador inicial al comienzo de la página, que será el lugar de destino para todos nuestros enlaces “Arriba”.

9. Selecciona el título del documento: “Anclas: Arriba y Abajo” y a continuación pulsa en el botón Enlace interno de la barra de herramientas de Redacción.

10. En el cuadro de diálogo Propiedades del enlace interno se proporciona un nombre por defecto del marcador creado a partir del texto previamente seleccionado. Para simplificarlo escribimos: Inicio y pulsamos en el botón Aceptar. Tras esta operación observarás que el texto seleccionado muestra el icono de un ancla sobre fondo amarillo a su izquierda. Esto indica que es un marcador.

Nota: Si es necesario eliminar un marcador basta con hacer clic sobre el icono del ancla y luego pulsar la tecla Supr.

pág. 23

11. Ahora vamos a crear los demás marcadores, puntos destino de los elementos del índice. Selecciona el texto "Elementos Visuales" que encabeza su definición.

12. A continuación, pulsa en el botón Enlace interno.

13. En el cuadro de diálogo Propiedades del enlace interno se proporciona un nombre por defecto del marcador creado a partir del texto previamente seleccionado. Es importante que definamos como nombre del marcador un nombre sencillo sin espacios ni caracteres especiales. Clic en el botón Aceptar.

14. Repite estos pasos para crear el resto de los marcadores a lo largo del documento: Justificación y Viñetas y Marcadores.

ENLACES INTERNOS

Una vez que hemos terminado la creación de marcadores, vamos a diseñar los enlaces a esos marcadores. Recuerda que los hipervínculos se encontrarán en el índice y en el texto Arriba que aparece al finalizar cada definición.

15. Selecciona el texto "1. Elementos Visuales " ahora en el índice inicial.

pág. 24

16. Clic en el botón Enlace que aparece en la barra de Redacción.

17. En el cuadro de diálogo Propiedades del enlace despliega la lista Ubicación del enlace para seleccionar el enlace interno al marcador creado: #Elementos. Clic en el botón Aceptar.

18. Repite estos pasos para crear un hipervínculo en cada entrada del índice al marcador correspondiente.

19. Haz lo mismo en la palabra "Arriba" situada al final de cada definición para que apunte al marcador #Inicio. De esta forma el usuario final siempre encontrará un lugar donde pulsar para regresar a la parte superior del documento donde se encuentra el índice de términos. Esto evitará que utilice el scroll (desplazamiento vertical utilizando los botones de la ventana).

20. Sitúa el cursor debajo de cada hipervínculo con el texto “Arriba” e inserta una línea horizontal separadora usando Insertar > Línea Horizontal. Al finalizar el documento puedes añadir 2 seguidas para indicar al usuario el fin del mismo.

21. Completada la página vamos a guardarla. Clic en el botón Guardar. Si es la primera vez que se guarda solicitará el título de la página. Introduce como nombre del archivo

anclas.html y guárdala en la carpeta miweb.

22. Si deseas cambiar el título de la página debes seleccionar Formato > Título y propiedades de la página. No olvides guardar los cambios producidos.

23. Para visualizar el aspecto de la página pulsa en el botón Navegar (sólo funciona si tienes configurado en tu equipo Mozilla Firefox como navegador web por defecto). Otra opción es situarte en la carpeta miweb y hacer doble clic en el archivo anclas.html para visualizarlo a través del navegador web.

24. El resultado será:

pág. 25

pág. 26

ACTIVIDAD 4: Listas Numeradas

Una lista numerada es una lista de elementos ordenados. Tiene especial aplicación en la descripción de los pasos de un procedimiento. Cada elemento viene precedido por un signo numérico o letra del alfabeto que permite identificar su posición en la lista.

1. Descarga una imagen similar a la siguiente a tu carpeta images. Llámala magiapalabras.gif (o extensión similar).

2. Abre Kompozer haciendo doble clic sobre el acceso directo a este programa situado en el escritorio.

3. Copia y pega el siguiente texto en tu nueva página web:

Escribe tu cuento

Descripción: Siguiendo los pasos aquí recogidos, publicarás tu propia libro digital para que otros compañeros/as puedan disfrutar con su lectura. Visita esta web: https://www.slideshare.net/tercerciclopueblonuevo/como-escribir-un-cuento-5960140 Actividad: Entra en la portada principal de Educalia. Pulsa sobre Clik, la bombilla mascota de esa web. Elige el castellano como idioma. Selecciona en el botón Actividades. Haz clic sobre La magia de las palabras. Pulsa en Escribir un cuento. Lee atentamente los Ingredientes necesarios para crear tu cuento. Consulta los Utensilios o materiales que necesitas. Clic sobre el botón Preparación: hacer un cuento. Sigue con detalle los pasos que se indican: lluvia de ideas, tema, título, planteamiento, nudo, desenlace, ilustración, etc. Teclea tu nombre, edad, escuela y ciudad. Elige una buena cubierta para tu libro. Recuerda la estantería y número de librería en que se sitúa para localizarlo en próximas entradas. Puedes anotar esta información. Desde el menú inicial de La magia de las palabras puedes entrar a leer los cuentos escritos por otros compañeros/as. Para ello pulsa en el botón Cuentos de niños. Si haces clic en la lupa podrás buscarlos por título, autor, localidad, etc.

4. Selecciona: “Escribe tu cuento”. A continuación, despliega el cuadro de estilos de párrafo y elige Título 1.

pág. 27

5. Selecciona los textos "Descripción" y “Actividad” y pulsa en el botón Negrita de la barra de Formato.

6. Antes de añadir imágenes conviene indicarle a Kompozer donde se guardará esta página. Para ello clic en el botón Guardar, introduce como título: “Escribe tu cuento” y guárdala como escribe.html dentro de la carpeta miweb.

7. Sitúa el cursor entre la descripción y el enlace. A continuación, pulsa en el botón Imagen.

8. En el cuadro de diálogo Propiedades de la imagen haz clic en el botón Elegir archivo… y navega para localizar la imagen magiapalabras.gif dentro de la carpeta miweb/images. Selecciona este archivo y pulsa en Aceptar. Observa que la casilla Ubicación de la imagen se muestra la ruta relativa respecto a la página actual: images/magiapalabras.gif. Esto es así porque está activada la casilla La URL es relativa a la dirección de la página.

9. En Texto alternativo introduce "La magia de las palabras".

10. Haz clic en la pestaña Enlace e introduce la URL: https://www.slideshare.net/tercerciclopueblonuevo/como-escribir-un-cuento-5960140

pág. 28

11. Para terminar pulsa en el botón Aceptar.

12. Para conseguir que el enlace situado en la imagen muestre en una nueva ventana asegúrate de que la imagen está seleccionada y a continuación haz clic derecho en la etiqueta “<a>” que aparece en la esquina inferior izquierda de la barra de estado de KompoZer. La etiqueta HTML “<a>” define el enlace introducido.

13. En el menú que se despliega para la etiqueta "<a>" elige Propiedades avanzadas.

14. En el cuadro Editor avanzado de propiedades, en la pestaña Atributos HTML selecciona en la lista Atributo el elemento target (destino) y en la lista Valor elige _blank (nueva ventana). Pulsa en el botón Aceptar.

15. Selecciona el bloque de texto

https://www.slideshare.net/tercerciclopueblonuevo/como-escribir-un-cuento-5960140

que aparece en la página y pulsa en el botón Enlace.

16. En el cuadro de diálogo Propiedades del enlace introduce el enlace anterior en la casilla Ubicación del enlace si no estuviera. En la sección Destino activa la opción El enlace se abrirá y selecciona "en una nueva ventana". Para terminar pulsa en el botón Aceptar.

17. Selecciona la línea de texto Actividad: y pulsa en el botón Negrita de la barra de Formato.

18. Selecciona todas las instrucciones que aparecen debajo de Actividad.

pág. 29

19. Clic en el botón Lista de viñetas.

20. Para terminar pulsa en el botón Guardar. Para visualizar el aspecto final de la página pulsa en el botón Navegar.

21. El resultado será:

pág. 30

ACTIVIDAD 5: Tablas

Las tablas están formadas por filas (horizontales) y columnas (verticales), y el espacio en que intersectan se denominan celdas.

Se suelen utilizar para darle un aspecto más tabular a las páginas web.

1. Abre KompoZer y guarda la página con el título Demografía de España y con el nombre demografia.html

2. Copia y pega el siguiente texto en tu página:

Demografía de España La densidad de población en España es aproximadamente 88,59 hab/km². Es menor que la mayoría de países de la Unión Europea y su distribución geográfica es muy irregular. La población se concentra en las zonas de costa cantábrica-atlántica-mediterránea y en torno a la región metropolitana de Madrid. En el resto del área geográfica interior se registra el problema de la despoblación siendo más acusada en zonas de Castilla-León y Navarra. Comunidad Autónoma*Pob.(2006)*% (2006) Andalucía*7.975.672*17,84% Cataluña*7.134.697*15,96% Comunidad de Madrid*6.008.183*13,44% Comunidad Valenciana*4.806.908*10,75% Galicia*2.767.524*6,19% Castilla y León*2.523.020*5,64% País Vasco*2.133.684*4,77% Canarias*1.995.833*4,46% Castilla-La Mancha*1.932.261*4,32% Región de Murcia*1.370.306*3,06% Aragón*1.277.471*2,86% Extremadura*1.086.373*2,43% Principado de Asturias*1.076.896*2,41% Islas Baleares*1.001.062*2,24% Comunidad Foral de Navarra*601.874*1,35% Cantabria*568.091*1,27% La Rioja*306.377*0,69% Ceuta*75.861*0,17% Melilla*66.871*0,15%

3. Descarga una imagen de un mapa de España similar a la siguiente y llámala poblacion.jpg (o extensión similar). Guárdala en tu carpeta images.

pág. 31

4. Selecciona el título Demografía de España y elige del cuadro de estilos de párrafo el Titulo 1, ponle el color que quieras a la fuente, cambia el tipo de fuente, cambia el color de fondo y céntralo.

5. Justificar el primer párrafo

INSERTAR IMAGEN

6. Sitúa el cursor después del texto y antes de los datos. A continuación pulsa en el botón Imagen o bien Insertar → Imagen

pág. 32

7. En el cuadro de diálogo Propiedades de la imagen haz clic en el botón Elegir archivo… y navega para localizar la imagen poblacion.jpg dentro de la carpeta miweb/images. Selecciona este archivo y pulsa en Aceptar.

8. Observa que la casilla Ubicación de la imagen se muestra la ruta relativa respecto a la página actual: images/poblacion.jpg. Esto es así porque está activada la casilla La URL es relativa a la dirección de la página.

9. En el cuadro de texto Texto Alternativo escribe: "Demografía española".

10. Escribe en el Titulo emergente Población española (que es lo que se verá cuando sitúes el ratón sobre la imagen) y en Texto alternativo Demografía de España y Aceptar.

11. Hacer doble clic sobre la imagen para volver a acceder a las Propiedades de la imagen. Clic en la pestaña Apariencia y en el cuadro Borde sólido introduce el valor 1 como grosor en píxeles del borde que mostrará la imagen.

pág. 33

12. Pulsa en el botón Aceptar.

13. Centra la imagen en la página.

CREAR UNA TABLA DE DATOS

Existen dos procedimientos alternativos para crear la tabla:

• Insertar una tabla en blanco.

• Convertir el texto existente en una tabla.

Vamos a ver primero un método y luego el otro (que será el que usemos).

Método 1. Insertar una tabla en blanco

Hacer clic justo debajo de la imagen para situar el cursor en este espacio.

Pulsar en el botón Tabla disponible en la barra de herramientas Redacción.

En el cuadro de diálogo Insertar tabla puedes arrastrar el puntero sobre la cuadrícula para definir el número de filas y columnas que tendrá la nueva tabla. Para terminar, haz clic en la última celda de la parrilla creada.

Esta opción sólo permite crear tablas de 6x6 celdas como máximo. Para un ajuste más fino, como es el caso que nos ocupa, pulsa en la pestaña Preciso. Introduce el número de filas: 20 y el número de columnas: 3. En Anchura indica los píxeles exactos de ancho que tendrá la tabla o bien el % que ocupará del ancho total de la ventana. Conviene utilizar una anchura 100 % de la ventana ya que se esta forma la tabla se ajusta automáticamente al espacio disponible en la ventana del navegador.

Para que la tabla no muestre el borde introduce el valor 0 en la casilla Borde.

Clic el botón Aceptar.

pág. 34

De esta forma se crea una tabla en blanco. Normalmente se crea la tabla y luego se va rellenando introduciendo los datos por teclado. Sin embargo, en este caso se podría completar celda a celda mediante Editar > Cortar (Ctrl+X) y Editar > Pegar (Ctrl+V) utilizando el contenido que ya tenemos en el documento.

Teniendo en cuenta que los datos ya tienen un preformato podemos aprovechar para utilizar el procedimiento de convertir el texto en una tabla tal y como se explica en el siguiente apartado.

Si deseas modificar algún parámetro de la tabla inicial haz clic derecho sobre ella, elige Seleccionar Tabla > Tabla y luego pulsa en el botón Tabla de la barra de Redacción. Con esta rutina se muestra el cuadro de diálogo Propiedades de la tabla donde es posible editar alguno de sus parámetros.

Eliminamos la tabla anteriormente insertada, para ello seleccionar la tabla primeramente, Tabla → Seleccionar → Tabla y después Tabla → Eliminar → Tabla

pág. 35

Método 2. Crear tabla a partir de una selección

14. Seleccionar todas las líneas que contienen los datos que van a formar la tabla de datos (a partir de Comunidad Autónoma)

15. En la barra de menús selecciona Tabla → Crear tabla a partir de la selección o simplemente pulsa en el botón Tabla de la barra de Redacción.

16. En el cuadro de diálogo Convertir en tabla marca la opción “Otro carácter” e introduce un asterisco "*". Si te fijas el asterisco es el carácter que separa un dato de otro dentro de la misma línea. A continuación activa la casilla Borrar carácter separador.

17. Pulsa en Aceptar y verás como los datos se organizan en filas y columnas formando la tabla de resultados.

DAR FORMATO A LA TABLA

18. Pulsa y arrastra para seleccionar las celdas de la primera fila. Una vez seleccionadas haz clic derecho sobre ellas y elige la opción Color de fondo de la tabla o celda…

19. En el cuadro de diálogo Color de la tabla o de la celda selecciona un color predefinido cualquiera y pulsa en el botón Aceptar. Observa que esto hará que la fila de encabezado de tabla se muestre con este color de fondo.

pág. 36

20. Mantén la tecla Ctrl pulsada para ir haciendo clic sobre todas las celdas de las filas pares. Una vez seleccionadas repite los pasos anteriores para definir un color gris de fondo. La diferencia de color entre una fila y la siguiente facilitará la lectura de los datos.

21. Para realizar cambios en la tabla completa haz clic con el botón derecho sobre cualquier punto de la tabla y elige Seleccionar tabla → Tabla. Con esta acción se selecciona la tabla completa.

22. A continuación, pulsa en el botón Tabla de la barra de herramientas.

23. En el cuadro de diálogo Propiedades de la Tabla se pueden configurar sus múltiples parámetros. En este caso sitúa un 0 en el cuadro Borde: para evitar que se visualice el borde la tabla.

24. Para terminar, pulsa en el botón Aceptar.

25. No olvides hacer clic en el botón Guardar para conservar el trabajo. Visualiza el resultado en el Navegador.

pág. 37

26. No olvides hacer clic en el botón Guardar para conservar el trabajo.

27. Elige un color de fondo para la página.

28. Accede a la página web del INE (Instituto Nacional de Estadística).

29. Copia el enlace e insértalo en la imagen, para ello, recuerda doble clic en la imagen o bien selecciona la imagen y te vas al botón Imagen de la barra de Redacción. Te sitúas en la ficha Enlace y pegas en enlace copiado y Aceptar.

30. Vuelve a guardar y pulsa en Navegar para ver como que se visualiza en el navegador.

31. La página debe de verse similar a la siguiente:

pág. 38

ACTIVIDAD 6: Formularios

Un formulario es un conjunto de casillas que se pueden añadir a una página y que permite recoger datos que introduce el usuario para luego procesarlos.

En un formulario hay 2 partes básicas:

• El interfaz o página con la estructura de campos, etiquetas y botones que puede ver el usuario.

• El programa o script que procesa esa información.

1. Descárgate de Internet una imagen del logo de Google y guárdala en tu carpeta images con el nombre de logogoogle.jpg

2. Abre una nueva página en KompoZer. 3. Para guardar esta página, elige Archivo > Guardar como. Introduce "Buscador Google"

como título y pulsa en el botón Aceptar. 4. Guarda la página en la carpeta miweb y define como nombre de archivo: google.html.

Pulsa en el botón Guardar. 5. En la página web escribe: "Buscador Google". Selecciona el texto y elige el estilo de

párrafo Título 1. Pulsa <Intro> para saltar a la siguiente línea. Elige también un color para el fondo de la página, para ello debes estar situado en la siguiente línea del título, porque de no ser así, lo que harás será resaltar el título.

6. Selecciona Insertar > Imagen …

pág. 39

7. En el cuadro de diálogo Propiedades de imagen pulsa en el botón Elegir archivo… para localizar y abrir el archivo logogoogle.jpg en la carpeta miweb\images.

8. En título emergente escribe: Google… El buscador, que es lo que se verá cuando te sitúes sobre la imagen con el ratón cuando la página se vea en el navegador.

9. En Texto alternativo introduce "Google". Esto sólo se verá cuando haya problemas y no se vea la imagen cargada. Esto puede ocurrir cuando cambias la imagen de lugar… se intenta localizar en el sitio que le indicaste, pero si no está muestra ese mensaje.

10. Activa la pestaña Enlace e introduce la dirección web: http://www.google.es. De esta forma el usuario podrá situarse en la página de inicio de Google haciendo clic en la imagen.

11. Centra la imagen 12. Pulsa en el botón Aceptar. 13. Tu página debe tener más o menos el siguiente

aspecto:

14. Sitúate debajo de la imagen y selecciona Insertar > Formulario … > Definir formulario …

pág. 40

15. En el cuadro de diálogo Propiedades del formulario introduce los siguientes valores:

• Nombre del formulario: google • URL de la acción: http://www.google.es/search

Es la URL del script o programa que procesará el texto que el usuario ha tecleado en el formulario diseñado. Como puedes comprobar hay scripts que permiten invocarlos desde otros sitios web.

• Método: get. Especifica el método visible (GET) u oculto (POST) que utiliza el formulario para enviar los datos. Se elige uno u otro según lo requiera el programa que va a recibir esta información. En este caso debe ser GET para que funcione.

16. Clic en el botón Aceptar. Observa que el formulario aparece en la página destacado con un marco de borde punteado. Si es necesario reeditar sus propiedades haz clic derecho sobre el formulario y selecciona Propiedades de Formulario…

17. A continuación, vamos a situar los elementos del formulario. Haz clic dentro del formulario para que el cursor se sitúe parpadeando dentro del recuadro del formulario. Teclea "Introduce el texto de búsqueda". Pulsa <Intro> para situarte en la siguiente línea.

18. Elige Insertar > Formulario > Campo de formulario.

19. En el cuadro de diálogo Propiedades del campo del formulario pulsa en el botón Más propiedades. Define las siguientes propiedades:

• Tipo del campo: Texto • Nombre del campo: q • Tamaño del campo: 50

20. Clic en el botón Aceptar.

pág. 41

21. Pulsa la tecla <Intro> para situarse en una nueva línea para insertar los botones del formulario. A continuación, selecciona Insertar > Formulario > Campo de formulario.

22. En el cuadro de diálogo Propiedades del campo del formulario configura los parámetros:

• Tipo del campo: Botón de envío. • Nombre del campo: Enviar. • Valor del campo: Enviar.

23. Clic en el botón Aceptar.

24. Selecciona de nuevo Insertar > Formulario > Campo de formulario. 25. En el cuadro de Propiedades del campo del formulario define los siguientes valores:

• Tipo del campo: Botón de reestablecimiento. • Nombre del campo: Borrar. • Valor del campo: Borrar.

26. Pulsa en el botón Aceptar.

Este es el resultado:

pág. 42

ACTIVIDAD 7: Archivos Comprimidos

En ocasiones puede interesar ofrecer la descarga de un documento o archivo al visitante de una página web. Puede ser el caso de una colección de ficheros organizados en carpetas y subcarpetas, el instalador de un programa, un archivo ejecutable, etc. Para reducir el tamaño de la descarga conviene ofrecerlo empaquetado en un archivo ZIP o RAR.

Veamos los pasos a seguir:

Seleccionamos el o los archivos con el ratón los archivos o la/s carpeta que deseamos comprimir y presionamos el botón derecho del ratón.

En el menú contextual que aparece nos desplazamos hasta WinRAR y seleccionamos alguna de las dos primeras opciones:

Opción 1: Añadir al archivo…

Te lleva a un menú como el siguiente, donde ponemos el nombre del archivo comprimido que se creará en el mismo lugar donde estén los archivos origen. Lo más importante a saber de ese menú es:

1. Tipo de extensión: RAR o ZIP

2. Tipo de compresión: Normal, Máxima, Mínima, ... que nos permitirá comprimir más o menos los archivos

Igualmente, con solo poner el nombre ya podemos aceptar para crear el archivo comprimido con la configuración más usual que contendrá toda la información seleccionada.

Opción 2: Añadir a "NombreDelArchivo.rar"

Esta opción nos creará directamente el archivo comprimido en el mismo lugar donde estén los archivos origen.

Así pues, hemos pasado de tener varios archivos y/o carpetas a tener un solo archivo:

pág. 43

1. Crea dos archivos comprimidos de tu carpeta images y guárdalos en la carpeta descargas como mis-imagenes.rar y mis-imagenes.zip.

2. Crea una nueva página en KompoZer 3. Guarda la página con el título: "Mis Imágenes Comprimidas" y pon de nombre

imagenes.html en la carpeta miweb. 4. Escribe el siguiente contenido en la página web:

CREACIÓN DE ARCHIVOS COMPRIMIDOS Hoy en día es común que nuestros archivos almacenados en nuestra computadora viajen de un lugar a otro, de una computadora a otra, de un correo electrónico a otro, lo que sucede comúnmente con las fotografías que queremos compartir con amigos o familiares… Los archivos comprimidos cumplen una función imprescindible en este aspecto, ya que nos permite disminuir el tamaño de lo que queremos compartir, y además podemos compartir varios archivos en uno, sin necesidad de andarlos pasando por separado… En ocasiones puede interesar ofrecer la descarga de un documento o archivo al visitante de una página web. Puede ser el caso de una colección de ficheros organizados en carpetas y subcarpetas, el instalador de un programa, un archivo ejecutable, etc. Para reducir el tamaño de la descarga conviene ofrecerlo empaquetado en un archivo ZIP o RAR.

5. Selecciona el título inicial: “CREACIÓN DE ARCHIVOS COMPRIMIDOS” y en la lista de Formatos selecciona Título 1.

6. Cambia el tipo de letra del texto que has escrito y el color de fondo.

7. Busca en Google imágenes referentes a archivos comprimidos. Intenta localizar una referente a Winzip y otra a Winrar.

8. Guarda las imágenes con un nombre relacionado a la imagen que se guarda logo-zip.jpg y logo-rar.jpg

pág. 44

9. Ahora vamos a situar el enlace a los archivos ZIP y RAR que has creado.

10. Haz clic al final del documento e inserta las dos imágenes descargadas.

11. Vamos a utilizar las propias imágenes para descargar los archivos.

12. En el cuadro de diálogo Propiedades de la imagen > Enlace selecciona el archivo comprimido. Repite para cada una de las imágenes.

13. Observa que tras esta operación en el cuadro enlace se muestra como ubicación del enlace: "descargas/mis-imagenes.zip" y "descargas/mis-imagenes.rar".

14. Clic en el botón Aceptar para terminar el enlace. Para guardar los cambios pulsa en el botón Guardar.

15. Este es el resultado aproximado:

ACTIVIDAD 8: Documentos PDF

pág. 45

En un sitio web es frecuente poner a disposición de los usuarios documentos en formato PDF para la consulta de información. Ejemplo: los boletines oficiales. Las ventajas que ofrece este tipo de archivo son:

• Se puede abrir con distintas aplicaciones de software gratuito. • Es accesible desde cualquier plataforma: Windows, Linux, Mac, etc. • El documento PDF tiene un tamaño más reducido que el original. • Admite la búsqueda fácil de información entre sus páginas. • Tiene una presentación idéntica e independiente del dispositivo de visualización

(pantalla) y de impresión (impresora). • Permite proteger el contenido del documento frente a terceros.

1. Accede a la siguiente página web: http://thales.cica.es/rd/Recursos/rd99/ed99-0574-02/nutricion_dos.htm

2. Guarda la imagen en la carpeta images con el nombre de nutricion.jpg. 3. Vamos a crear un nuevo documento en LibreOffice Writer. Copia y pega el contenido

de la web anterior.

4. Guarda el documento con el nombre alimentacion.odt 5. Dale formato al texto e inserta la imagen nutrición.jpg con ajuste paralelo y muévela

para que quede a la derecha del texto.

6. A la segunda parte del texto, ponle el siguiente formato:

pág. 46

7. Da un color de fondo a la página. 8. Inserta un encabezado con tu nombre y un pie de página con el número de página. 9. Guarda los cambios. El documento debería verse así:

10. Una vez guardado el documento, selecciona la opción Archivo > Exportar en formato PDF…

11. En el cuadro Exportar selecciona la carpeta miweb\pdf en la lista Guardar en. Teclea alimentacion.pdf en el Nombre del PDF y haz clic en el botón Guardar.

12. Se muestra el cuadro Opciones de PDF donde es posible configurar ciertos parámetros del PDF resultante. En este caso aceptamos las opciones por defecto y pulsamos en el botón Exportar.

13. Si utilizas el explorador de archivos podrás encontrar el archivo alimentacion.pdf dentro de la carpeta miweb\pdf. Si haces doble clic sobre él se abrirá el lector PDF por defecto mostrando su contenido.

pág. 47

14. Ahora vamos a crear la página web. Abre un nuevo documento en KompoZer. 15. Abre el documento alimentacion.odt, selecciona todo el texto. Vamos a quitarle el

formato momentáneamente para que podamos emplear el texto en KompoZer.

16. Pega el texto del documento alimentación sin formato en tu página web. 17. Guarda la página con el título La alimentación de las plantas y de nombre

plantas.html en la carpeta miweb. 18. Cambia el formato de la página web: formato Título1, Título2, cambia el color del

texto, del enlace, del fondo de la página, etc. 19. Inserta la imagen descargada de la planta y ponle texto emergente. 20. Pega en la primera línea, el enlace a la página web de la que hemos obtenido la

información: http://thales.cica.es/rd/Recursos/rd99/ed99-0574-02/nutricion_dos.htm 21. Convierte el texto en enlace haciendo clic en el botón Enlace.

pág. 48

22. Añade como última línea “Ver más información sobre la alimentación de las plantas en PDF – (Pon aquí el tamaño del archivo PDF)”, selecciónala y haz clic en el botón Enlace de la barra de herramientas.

23. En el cuadro Propiedades del enlace pulsa en el botón Elegir archivo…

24. En el cuadro de diálogo Abrir archivo HTML despliega la lista Buscar en para mostrar el contenido de la carpeta miweb\pdf. Despliega la lista Tipo y selecciona Todos los archivos. De esta forma se mostrará el archivo alimentacion.pdf que has creado en apartados anteriores. Clic sobre este archivo y pulsa en Abrir.

25. En el cuadro Propiedades del enlace observa que en Ubicación del enlace aparece la ruta al PDF: pdf/alimentacion.pdf.

26. En el área Destino marca la opción El enlace se abrirá y en la lista elige la opción en una nueva ventana.

27. Guarda los cambios de la página plantas.html mediante Archivo > Guardar.

28. El resultado será:

pág. 49

ACTIVIDAD 9: Presentaciones on-line

Vamos a seleccionar presentaciones desde un sitio web y las vamos a integrar en nuestra página web sin necesidad de descargarla.

1. Abre un nuevo documento en KompoZer.

2. Guarda la página con el título Pasos para escribir un cuento y ponle de nombre de pasos_cuento.html en la carpeta miweb.

3. Escribe un Título en la página web, por ejemplo " Pasos para escribir un cuento", con formato Titulo 1.

4. Visitamos el sitio web Slideshare:

https://es.slideshare.net/tercerciclopueblonuevo/como-escribir-un-cuento-5960140.

5. Nos encontramos con la siguiente presentación:

6. Pulsa sobre el botón compartir

7. Las diapositivas cambian y aparece una

ventana que permite compartir el contenido

de varias formas.

8. Selecciona la opción INSERTAR y copia todo el

contenido

9. En KompoZer, ve a la opción, Insertar →

HTML

10. Pega el contenido

11. Visualiza el resultado como en las actividades

anteriores

pág. 50

ACTIVIDAD 10: Vídeos on-line

Vamos a seleccionar videos desde un sitio web y los vamos a integrar en nuestra página web sin necesidad de descargarlos. 1. Abre un nuevo documento en KompoZer. 2. Guarda la página con el título YouTube y ponle de nombre videos.html en la carpeta

miweb. 3. Escribe un Título en la página web, por ejemplo "Vídeos de YouTube", con formato Titulo

1. 4. En el cuadro Título de la página introduce como título: "Vídeos de YouTube" y pulsa en el

botón Aceptar. 5. Visitamos el sitio web YouTube (http://www.youtube.com). 6. En el buscador introducimos alguna palabra referente al tipo de vídeo que estamos

buscando, por ejemplo: magia y pulsamos en buscar.

7. Pinchamos sobre cualquiera de los vídeos encontrados. Debajo del vídeo pulsamos el

botón <Insertar> para que se nos desplieguen las opciones del vídeo. Seleccionamos todo lo escrito en el cuadro y lo copiamos (Control + C).

8. En tu página web, sitúate debajo del título y a

continuación elige Insertar > HTML 9. En la ventana Insertar HTML haz clic en el cuadro

de texto y a continuación haz clic derecho para seleccionar Pegar. Clic en el botón Insertar.

10. Clic en el botón Aceptar.

pág. 51

11. Pulsa en el botón Guardar y haz clic en el botón Navegar de la barra de herramientas para visualizar el resultado en el navegador.

12. Este es el resultado:

pág. 52

ACTIVIDAD 11: Google Maps

1. Crea un nuevo documento en KompoZer y guárdalo. Debe tener como título Mi

Instituto y llamarse mi_ies.html.

2. Escribe en la página web ESTE ES MI IES, selecciona el texto y dale como formato Título

1.

3. Centra el título y ponlo en negrita y de color azul

4. Pon el fondo de la página de color gris claro

5. Accede, con tu navegador a https://www.google.es/maps

6. Introduce el nombre de tu instituto en el cuadro de búsqueda

pág. 53

7. Selecciona la opción COMPARTIR

8. En la nueva ventana, elige la opción “Insertar un mapa”

9. Selecciona el tamaño apropiado del mapa que quieres insertar (En principio,

seleccionamos la opción Mediano). Pulsa ahora sobre la opción COPIAR HTML, tras lo

que se marca un contenido en HMTL.

pág. 54

10. En el KompoZer ve a Insertar → HTML

11. Pega lo que has copiado del navegador (Ctrl +

V) y pulsa Insertar

12. Pulsa el botón navegar para comprobar el resultado

pág. 55

ACTIVIDAD 12: Índice de contenidos

Vamos a realizar un índice con el que poder movernos por todas las páginas web que hemos creado.

1. Abre la primera página web que creaste (index.html) Archivo > Abrir > index.html 2. Escribe “Mi página principal”, selecciona el texto y elige como formato Título 1, elige

un color de letra, un tipo de letra, color de fondo o resaltado o segundo plano y lo centras.

3. Pulsa la tecla <intro> para situarte en la siguiente línea y pulsa en el botón Viñetas de la barra de herramientas de Formato.

4. Crea una tabla de 10 filas por 2 columnas y que no se vea el borde (0).

5. Escribe en la primera columna los nombres de las actividades anteriormente realizadas

ACTIVIDAD 1: Federico García Lorca ACTIVIDAD 2: Anclas: Arriba y Abajo

pág. 56

ACTIVIDAD 3: Escribe tu cuento ACTIVIDAD 4: Demografía en España ACTIVIDAD 5: Buscador Goooogle ACTIVIDAD 6: Archivos comprimidos ACTIVIDAD 7: Las plantas ACTIVIDAD 8: Pasos para escribir un cuento ACTIVIDAD 9: Vídeo de YouTube ACTIVIDAD 10: Localiza mi IES

6. En la segunda columna, inserta la imagen correspondiente y para aquellas que no hemos descargado ninguna, busca una por Internet.

7. Modifica el tamaño de las imágenes para que más o menos todas tengan el mismo tamaño.

8. Seleccionar la primera columna y pulsar el botón derecho del ratón y escoger Propiedades de Celda de tabla …

pág. 57

9. A continuación, se abre la ventana de Propiedades de la tabla abierta en la pestaña Celdas, ya es solo cuestión de alinear el contenido en la Vertical en Medio y en la Horizontal Centrada, y Aplicar y Aceptar.

10. Finalmente quedaría centrar el texto, pulsando en el botón de Centrar de la Barra de Formato 2, volviendo a seleccionar la primera columna si es que la hubieras deseleccionado. Guarda las modificaciones.

11. Vas a seleccionar las filas impares haciendo clic sobre cada una de las celdas de dichas filas manteniendo pulsada la tecla control. Una vez seleccionadas pulsa el botón derecho del ratón y elige Color de fondo de la tabla o celda… y elige un color para las mismas.

12. Cambia también el color de las celdas de las filas pares, cambia el tipo de texto, color del texto y tamaño del texto introducido en las celdas o que se pueda introducir en el resto de las celdas de la primera columna.

pág. 58

13. Cambia el color de fondo de la página.

Por ahora, más o menos tu página tendría un similar aspecto:

14. A continuación, vamos a crear los enlaces tanto en el texto como en la imagen. Para el caso del texto se abrirá en la misma ventana, pero para el caso de la imagen se abrirá en una ventana nueva. Cada texto e imagen será enlazado a la página que corresponde, y que se hizo en su momento y que recuerdo:

Anclas: Arriba y Abajo → anclas.html Escribe tu cuento → escribe.html Demografía en España → poblacion.html Buscador Goooogle → google.html Archivos comprimidos → imagenes.html Las plantas → plantas.html Imagen en Flickr → pasos_cuento.html Vídeo de YouTube → videos.html Localiza mi IES → mi_ies.html

15. Para ello, recuerda: selecciona el texto, pulsa en el botón Enlace de la barra de Redacción.

16. Pulsar en el botón de la carpeta para elegir la carpeta miweb y elegir el fichero Lorca.html, y Abrir y Aceptar.

pág. 59

17. Para la imagen de Federico García Lorca se hará similar pero indicando que se va a abrir en una nueva ventana dicho enlace.

18. Seleccionas la imagen y doble clic sobre ella, o bien, seleccionas la imagen y pulsas en el botón Enlace. En la ventana Propiedades de la imagen te sitúas en la pestaña Enlace y pulsas en el botón carpeta para elegir la carpeta miweb, localizas el fichero lorca.html y Abrir y Aceptar.

19. Ahora tienes que hacer que se abra en una ventana diferente. Selecciona la imagen y fíjate en la barra de estado, pulsa sobre <a> y con el botón derecho sobre dicha etiqueta elige Propiedades avanzadas.

pág. 60

20. Repite los pasos del 15 a 19 para hacer los siguientes enlaces.

21. Modifica el color de los enlaces utilizados, manteniendo dicho color para el resto de los enlaces que modificaste de color en otras páginas, porque de no ser así la persona que navegue en tu página se puede hacer un lío sobre qué enlaces se han visitado o los que no se han visitado. Esto era en Formato → Fondo y colores de la página

pág. 61

22. Vas a insertar una fila encima de la primera, para ello selecciona la primera fila, pulsa el botón derecho del ratón, Insertar tabla→ Fila superior.

23. Vuelve a seleccionar la primera fila insertada y botón derecho del ratón y elige Unir celdas seleccionadas.

24. Escribe tu nombre, lo centras, le cambias el color y modifícale el tamaño.

pág. 62

Por ahora, más o menos la página debe de verse parecida a la siguiente:

25. Busca en Google gifs animados de flechas

26. Pincha en el enlace y guarda alguna flecha indicativa a volver al menú principal que es nuestra página Index.html. Para ello pulsa el botón derecho sobre la flecha seleccionada y elige Guardar imagen como… y guárdala en la carpeta images, ponle de nombre volver.gif.

pág. 63

27. Abre la página Lorca.html, sitúate a la derecha del título e inserta la imagen guardada.

28. Modifica el título emergente y el texto alternativo.

29. Realizar el enlace en la imagen insertada a la página Index.html

pág. 64

30. Repite los pasos anteriores para el resto de las páginas que has realizado. Guarda todo y comprueba todos los enlaces.