páginas web con openoffice - iesitaba.com · 6.1. introducción al lenguaje html html es el...

Diego González Álvarez

I.E.S. “Itaba” de Teba Año académico 2004 - 2005

81

Páginas web con OpenOffice

6.1. Introducción al lenguaje HTML

HTML es el lenguaje utilizado por las páginas WEB. Es un lenguaje de marcas o códigos, gracias a los cuales el navegador muestra o construye la página Web. Es un fichero de texto donde los distintos elementos y secciones se marcan con unos códigos especiales entre los símbolos <>. Normalmente cada marca comienza con la secuencia <marca parámetros> y finaliza con la secuencia </marca>. Si conocemos las distintas marcas y su estructura dentro del documento se pueden construir documentos HTML utilizando cualquier editor de texto plano, editando texto y salvando con la extensión .html o .htm. El manejo del código HTML puede ser complejo y cuesta bastante trabajo obtener resultados sin un aprendizaje bastante largo. Existen programas que ayudan a la construcción de páginas Web tanto en Windows como en Linux tal vez el mejor editor de páginas Web del mercado sea el “DreamWeaver” para Windows pero es un programa difícil de manejar. Nosotros vamos a utilizar el editor de páginas Web que incluye la “suite” OpenOffice. El manejo y aspecto de este programa es prácticamente idéntico a OpenOffice Writer. A simple vista sólo se diferencia en algunos elementos de la barra de herramientas, como se puede observar en las siguientes figuras:



82

El editor de páginas HTML u Ooffice es casi igual que Writer (procesador de textos) varía el icono que indica el

tipo de archivo procesador de textos: y editor HTML:

Es conveniente desde el principio observar el icono en la parte superior izquierda de la ventana OpenOffice para determinar que programa se esta ejecutando.

6.2. Estructura de una página web Cuando se genera un documento con un procesador de texto como Word u Writer generamos un paquete de x folios(muchos) que posteriormente imprimimos; por ejemplo, una programación. Esta programación puede tener algún diagrama e incluso imágenes. Estos apuntes son un documento Oowriter con imágenes y un índice. Las imágenes están incrustadas dentro del documento y en un único fichero o archivo se almacena todo. Una “Página Web”, que es lo que se construye con el lenguaje HTML, es, valga la redundancia, una página o más bien una pantalla y no un documento impreso. Dicho de otra forma, los documentos HTML tienen que ser de pequeño tamaño, como mucho deben ocupar dos o tres pantallas de tal forma que el lector no debe aburrirse al leerlos en el ordenador. Ahora tenemos que pensar que pasamos de construir un único documento a un conjunto de páginas o documentos HTML interrelacionados en una estructura. Por ejemplo, tenemos una programación compuesta de una Introducción, ocho capítulos o temas de contenidos y unos criterios de evaluación. Tenemos nuestro fichero de texto en formato .doc y queremos construir una página HTML para introducir la programación en la Web del instituto. El primer paso es generar una página Web con el índice que apunta o enlaza a los diez elementos de nuestra programación (introducción, ocho temas y criterios generales de evaluación) y luego dividir nuestra programación en diez páginas Web troceando el fichero .doc original. De nuestro único documento .doc hemos sacado once documentos HTML que tenemos que entrelazar manualmente. Como se puede observar en la siguiente figura:

El índice enlaza a todos los elementos y cada uno de estos se enlaza a los situados a izquierda y derecha dentro de su mismo nivel. Estas estructuras crecen y se complican formando el entramado de Internet. Además de la necesidad de partir un documento de gran tamaño en otros de menor tamaño, los documentos HTML incluyen otra dificultad y es que, mientras los procesadores de texto incrustan las imágenes dentro del documento, los documentos HTML vinculan o enlazan las imágenes siendo necesario establecer enlaces a cada una de ellas y adjuntar al documento .htm los ficheros de imágenes de nuestra página Web. Otro elemento a la hora de crear una Página Web es el uso de los colores y fondos para aumentar el atractivo de nuestras páginas. En teoría todas las páginas Web de nuestra programación deberían tener el mismo aspecto en color, fondo, tamaño y tipos de letras, etc. 6.3. Estructura de una página web

Uno de los problemas que se le presenta al usuario Windows cuando trabaja dentro de Internet es la nomenclatura de los ficheros y donde estos se almacenan. Windows flexibiliza el sistema de nombres de ficheros y el almacenaje de estos a un nivel en que sólo Windows los maneja, el usuario no sabe realmente como se llama el fichero ni donde lo ha guardado. Llegando a ocultar la extensión o tipo de este, elemento fundamental para que Windows reconozca el tipo de fichero. La relajación en estos temas es tal que, una vez creada la página Web a estilo windows, se cuelga en el servidor con un resultado que puede ser caótico y catastrófico. No vale el dicho: “En el ordenador de mi casa funciona”, o funciona en cualquier sitio o mi página esta mal diseñada y peor construida.

Normas para el nombre de los ficheros:



83

Los ficheros tienen que utilizar una nomenclatura semejante al antiguo Ms-Dos donde se definía un nombre y una extensión o tipo separados por punto.

No se admiten espacios en blanco dentro del nombre de los ficheros, ni caracteres especiales raros como ñ, vocales tildadas, puntos, comas, etc... únicamente se aconseja utilizar el guión y guión bajo.

Es preciso utilizar el punto como separador entre nombre y extensión del fichero. Se distingue entre mayúsculas y minúsculas por lo que se recomienda usar únicamente

minúsculas en los nombres de los ficheros. Aunque la extensión del nombre de un fichero o carpeta puede llegar a 256 caracteres (incluida

extensión), es aconsejable que tenga menos de treinta y dos caracteres. Otro elemento a considerar a la hora de construir una página Web es el uso de carpetas y directorios para organizar los ficheros que la forman. Como se ha visto en el apartado anterior el número de ficheros que conforma una página Web se dispara cuando se comienza a usar imágenes, lo que hace necesario utilizar carpetas para gestionar el documento. Lo ideal es utilizar una única carpeta donde se introducen todo los ficheros pero cuando el número de estos comienza a crecer es conveniente utilizar sub-carpetas para gestionar estos. Tal vez, en el ejemplo de la programación, anterior se puede utilizar una única carpeta para todos los documentos HTML, pero si comenzamos a desarrollar temario sería conveniente como mínimo un sub-carpeta por tema.

6.4. Obtener un documento HTML desde internet

Tanto Mozilla como Internet Explorer, en sus distintas versiones, nos permiten almacenar la página Web que estamos visualizando en nuestro disco duro o carpeta de trabajo. Es un proceso tan simple como situarnos en una área sin enlaces pulsar el botón derecho del ratón y seleccionar la opción “Guardar como”:

Una vez guardada la imagen en la carpeta de trabajo /home/usuario (donde usuario es el usuario activo) aparecen dos ficheros uno que corresponde con la página HTML y otro con una carpeta precedida por el sufijo “files_” que contiene las imágenes y otros elementos de la página que acabamos de guardar. Muchos tutoriales y apuntes de los que nos encontramos en Internet en formato HTML presentan un índice que enlaza a los distintos contenidos. Si yo me “Guardo como…” el índice, únicamente almaceno este y no los enlaces o contenidos a los que este apunta. Para bajarme un sitio Web completo existen herramientas específicas y un poco más complejas que el navegador como por ejemplo: Httrack.



84

6.5. Convertir un fichero OppenOffice a HTML

Una de las técnicas más simples de obtener ficheros HTML es convertir nuestros documentos Word u Oowriter en HTML. Podemos intentarlo tanto con Word como con Oowriter pero sólo funciona correctamente con Oowriter (OpenOffice). Como ejemplo, podemos convertir el fichero Oowriter de este capítulo a HTML:

Abrimos el fichero como un fichero Oowriter normal. Por ejemplo, desde “Archivo-Abrir”

Una vez abierto el fichero escogemos la opción “Archivo-Guardar como..” eligiendo el tipo de archivo “Documento HTML (OpenOffice.org Writer) (.html;htm)”, como se puede observar:

No nos olvidemos de seleccionar previamente la carpeta en la que queremos guardar el documento. Incluso se aconseja crear una carpeta nueva para almacenar el documento HTML, porque como se puede ver en la siguiente figura almacena en la misma carpeta el documento HTML “capitulo1.html” y una colección de imágenes con unos nombres con el siguiente formato: “capitulo1_html_código.jpg”, así:



85

Mediante este proceso tan simple hemos convertido de .doc o .sxw a HTML. En el proceso de conversión se han perdido algunos formatos (párrafos, negrita, etc...) y los nombres originales de las imágenes, pero al abrir el fichero con Mozilla los resultados son bastante buenos. El proceso de traspasar una gran cantidad de apuntes puede ser tan simple como:

Crear una carpeta para toda la página. Ir troceando el documento por capítulos, crear una subcarpeta por capitulo donde

exporto/convierto a HTML los trozos. Crear un índice en la carpeta inicial que enlace todas las partes.

6.6. Construir mi primera página web

El primer paso es crear una carpeta o directorio donde almacenar nuestra página Web, comenzaremos con la siguiente página de prueba:



86

Antes de comenzar a trabajar creamos una subcarpeta para las imágenes, dentro de la carpeta que acabamos de construir, y las copiamos en ella. Las imágenes se encuentran en los ficheros: “logoja2.gif”, “teba1.jpg” y “tic.jpg”.

Comenzamos el verdadero trabajo de creación de la página Web desde OpenOffice accediendo a la siguiente opción del menú para crear un documento HTML en blanco:

Hemos seleccionado la opción “Nuevo-Documento HTML” y tras esta operación el editor nos mostrará una página en blanco. Antes de seguir, salvamos el documento con el nombre index desde la opción “Archivo-Guardar como...”.

Sobre el documento HTML “index.html” comenzamos creando la tabla que tiene una fila y tres columnas, la tabla se insertar desde la opción del menú principal “Insertar-Tabla”:

Una vez insertada la tabla, pasamos a insertar las imágenes, primero comenzamos con el logotipo de la Junta de Andalucía, nos situamos en la primera Celda y accedemos a la opción del menú “Insertar-Imagen”, se busca el directorio de trabajo, se selecciona la imagen y se pulsa el botón “Abrir” para insertar la imagen en el documento HTML.



87

Insertamos la imagen de centro TIC a la derecha, ajustamos el tamaño de la tabla, escribimos el texto y lo centramos hasta obtener:

A continuación insertamos la imagen de la iglesia y rellenamos el texto de la página como si se tratase de un documento de texto normal.

Por último, cambiaremos el color de fondo de la página desde la opción del menú “Formato-Página” accediendo a la pestaña fondo:



88

No nos olvidemos de guardar correctamente el documento HTML “index.html” para que se almacenen correctamente los cambios. Hay que tener presente siempre el directorio en el que se almacena, que debe ser la carpeta que hemos propuesto al principio.

6.7. Enlaces a otros documentos y páginas web

Supongamos que quiero enlazar en mi página un Documento “.pdf”. Como por ejemplo el documento “curso_guadalinex.pdf”. El primer elemento a tener en cuenta es que el nombre del fichero cumpla las normas vistas anteriormente, véase que sólo utiliza minúsculas, el guión bajo como separador y su extensión está bien puesta. Si nuestro fichero no cumple estas normas, es necesario cambiarle el nombre para que cumpla dichas normas. Copiamos el fichero en la carpeta de trabajo donde está nuestra página Web, donde hemos almacenado “index.html” y las imágenes.

Para insertar el enlace, antes de la imagen de la iglesia, tecleamos la siguiente leyenda que nos va a servir de enlace a nuestro fichero:”Curso Guadalinex”, seleccionamos el texto y accedemos a la siguiente ventana con la opción del menú “Insertar-Hiperenlace” donde: escogemos el Icono “Documento” de la parte izquierda de la ventana y buscamos nuestro fichero “.pdf “.

En la ruta aparecerá el lugar donde tengo almacenado el documento que será el mismo donde esté la página. Otra opción interesante es “Marco” que nos permite abrir el documento en:

opción en blanco: abre el documento en la misma ventana de mozilla. _blank: abre otra ventana de mozilla. _parent: abre en la ventana anterior, se usa con marcos. _self: abre el documento en la misma ventana. _top: abre en la ventana superior.

En este caso se fijaría a “_blank”, pero normalmente se deja a blanco. Es conveniente modificar el texto, donde colocamos la leyenda que nos interesa por ejemplo: “Manual de Guadalinex” quedando:



89

Antes de cerrar la ventana es preciso darle al botón “Aplicar” para que se establezca el enlace. Para enlazar a una determinada dirección de Internet, por ejemplo un enlace a 100mejores. El proceso es semejante, escribir un texto, por ejemplo “Enlace a 100mejores aquí.” seleccionar el trozo de enlace en este caso la palabra “aquí.” y acceder a la ventana de enlaces con “Insertar-Hiperenlace”

Hay que seleccionar en la parte izquierda de la ventana el Icono Internet, escoger “Internet” en el Radio-Botón superior, escribir la dirección en “Destino” y escribir un texto relacionado con la dirección a la que enlazamos.

6.8. Construcción de una página web compleja En el capitulo anterior hemos construido un único documento HTML que contenía un enlace a un documento “.pdf”, tres imágenes. En total un conjunto de 5 ficheros, (1 HTML, 3 imágenes, 1 pdf). Cuando las páginas Web se complican el número de ficheros aumenta y su gestión puede ser compleja. Para facilitar esta tarea podemos colocar los distintos documentos HTML en subcarpetas diferentes. El documento inicial o índice en la carpeta



90

raíz y los documentos a los que enlaza en subcarpetas. Esta estructura puede tener varios niveles de anidación. El único problema es que el esqueleto definido no se puede modificar porque se perderían la estructura y los enlaces establecidos.

Como ejemplo, vamos a construir una página compuesta por cuatro documentos HTML: un índice que apunta a los demás, la página construida en el apartado 7, la página obtenida de la la dirección de Internet “www.aula21.net“ y un documento HTML construido desde el documento Informacionalprofesorado.doc”. El primer paso es construir la estructura de carpetas que contengan nuestra nueva página Web:

Los nombres de las carpetas pueden ser correlativos o relacionados con el documento que almacenan, pero siempre deben seguir las reglas de nomenclatura vistas anteriormente. Una vez creadas las carpetas podemos comenzar la construcción de la página Web Completa, las páginas Web se tienen que construir como las piezas de ingeniería, primero las partes contenidas en “aula21”, “capitulo7” e “informacion” y después el índice(index.htm) en “ejemplo2”. El problema para establecer un hiperenlace es que, los documentos que se van a enlazar, tienen que estar creados. Comenzaremos construyendo la página relacionada con aula21, accedemos con el navegador a la dirección “www.aula21.net/tallerwq/index2.htm“ nos situamos dentro de la página en un área despejada del centro y con el botón derecho del ratón “Guardar como”, lugar la carpeta aula21 recién creada y nombre “index.html”:

La página “capitulo7” está construida, pero no nos vale porque está fuera del árbol de directorios que acabamos de construir, lo único que hay que hacer es copiar el contenido de la carpeta “ejemplo1” a la carpeta “capitulo7”, repitiendo la estructura y los ficheros.

http://www.aula21.net

http://www.aula21.net/tallerwq/index2.htm



91

El nombre del documento HTML lo cambiamos a “index.html”, no hay problema por tener el mismo nombre del ejemplo “aula21” porque se encuentran en carpetas distintas. Incluso es mejor llamarlos al documento de inicio de cada carpeta con el mismo nombre para poder reconocerlo en un futuro, sobre todo en los casos en los que tenemos más de un documento HTML en la misma carpeta. Pasamos a exportar el documento “Informacionalprofesorado.doc” a formato HTML para ello abrimos el documento y con la opción del menú: “Archivo-Guardar como...”, llegamos a la siguiente ventana:

Es preciso buscar la carpeta “informacion” que estaría a blanco y el nombre como se ha establecido “index.html” presenta como se puede observar en el cuadro selección de la parte inferior centro “Ampliación automática del nombre del archivo” (le pone automáticamente .html).

Una vez llegado a este punto podemos construir el documento “index.html” alojado en la carpeta “ejemplo2” este documento es el índice maestro de nuestro “Sitio Web”. Se construirá un documento semejante a:

Se crea el fichero HTML en blanco(nuevo) El primer paso con nuestro documento antes de hacer nada es salvarlo en la carpeta ejercicio2

con el nombre “index.html” Pasamos a fijarle el fondo desde la opción del menú “Formato-Página” pestaña “Fondo”



92

Comenzamos a construir nuestra tabla insertando dos veces la imagen. Pero esta vez eliminamos los bordes de la tabla para que no se vean

Insertamos las imágenes e introducimos el texto Sólo faltan realizar los enlaces a los distintos elementos, marcamos por ejemplo “Enlace a

aula21.net”, escogemos la opción “Insertar-Hiperenlace” y ajustamos el enlace, según esta figura:

Es preciso escoger la opción documento y enlazar al “index.html” de la carpeta “aula21” seleccionar el Icono documento en la parte izquierda y no nos olvidemos de pulsar el botón “Aplicar” antes del botón “Cerrar”. Realizando los enlaces a las tres páginas que hemos construido anteriormente finalizamos la construcción de nuestra primera página Web compleja.

6.9. Marcas de texto(anclas)

Las marcas son unos elementos que nos permiten Hiperenlaces dentro del mismo documento. Se utilizan en documentos que son muy largos, como por ejemplo el generado en la carpeta “introduccion” del apartado anterior. Estas marcas nos sirven para generar un índice a los distintos apartado de nuestro documento. Para comenzar abrimos el documento y escribimos (se pueden copiar) los títulos de los distintos apartados:



93

El primer paso es fijar las marcas para ello nos desplazamos al primer titulo “Distribución de los alumnos” y nos situamos con el cursor delante de “D”. En este punto accedemos a la opción del menú “Insertar-Marca de texto”:

Escribimos el nombre de la marca relacionada con el titulo y botón aceptar. Repetimos el proceso para los cinco títulos que vamos a gestionar. Hay que moverse con el cursor al inicio de cada texto. Introducimos marcas hasta que llegamos a la siguiente ventana de marcas:

En este punto hemos creados los puntos a los que enlazamos desde el índice inicial, ahora hay que enlazar los apartados del índice a las marcas que hemos establecido dentro de nuestro documento. Seleccionamos el primer titulo: “Distribución de los alumnos” y nos disponemos a insertar un hiperenlace, desde la opción del menú “Insertar-Hiperenlace”. Hasta que completamos la siguiente figura:



94

El primer paso es pulsar el siguiente Icono: que nos muestra la ventana de Marcas de “Destino en el Documento” dentro de esta ventana desplegamos la opción “Marcas de texto” donde nos aparecen las marcas que acabamos de construir y seleccionamos la marca distribución que es la asociada a “Distribución de los alumnos”. Pulsamos botón “Aplicar” y cerramos la ventana de Hiperenlaces. Para finalizar, repetimos el proceso para los otros cuatro elementos de nuestro índice. En este apartado se ha modificado la estructura de un documento HTML interno, estos documentos se pueden modificar incluso añadir nuevos teniendo en cuenta que:

No se les puede cambiar el nombre. No se pueden sacar los ficheros de la carpeta inicial de trabajo.

6.10. Más enlaces entre documentos

Hasta ahora los documentos de mi Sitio Web están enlazados en una estructura de tipo Padre-Hijo. Es decir el índice principal o padre accede a los hijos. Desde un hijo no se puede subir de forma directa al padre ni al siguiente hermano dentro de la estructura. El objetivo es insertar al final de cada uno de los documentos almacenados en las carpetas “aula21”, “capitulo7” e “informacion” la siguiente estructura:

Anterior índice Siguiente

Es preciso comenzar con una de nuestras páginas por ejemplo la de la carpeta “informacion”, abrimos con OpenOffice el documento “index.html” de “informacion” que contiene información TIC aportada al claustro y nos situamos al final, borramos el pie e introducimos una tabla con una fila y tres columnas:

Anterior Índice Siguiente

Ahora seleccionamos “índice” y establecemos el HiperEnlace a “index.html” de la carpeta “ejemplo2” configurando la siguiente ventana en Hiperenlace:



95

Una vez configurada esta ventana podemos fijar anterior a “index.html” de “aula21” y siguiente a “index.html” de la carpeta “informacion”. El mismo proceso se puede hacer en “index.html” de “capitulo7”. Si intentamos crear esta estructura en “index.html” de “aula21” se produce un error porque el editor HTML no maneja marcos, es preciso acceder a los documentos HTML del directorio asociado y realizar las modificaciones en su interior.

6.11. Enlaces a otros documentos y páginas web Como hemos podido apreciar más que una página Web normalmente se construyen “Sitios Web”, como un conjunto más o menos complejo de ficheros de diferentes tipos. Para ordenar un poco este numero conjunto de ficheros se utilizan carpetas que nos permite dividir nuestro proyecto en subproyectos más simples. Es aconsejable arrancar cada sub-proyecto dentro de su carpeta con un documento “index.html”, de tal forma que siempre sabemos cual es el documento de inicio. Un Sitio Web no es más que una carpeta principal en la que vamos incluyendo las distintas sub-carpetas. Se pueden construir subcarpetas que contengan elementos comunes a todos los sub-proyectos como una sub-carpeta de imágenes en la carpeta inicial. Este sistema funciona correctamente siempre que no tengamos elementos fuera del ámbito de la carpeta principal, no cambiemos el nombre de las sub-carpetas y ficheros y los enlaces sean relativos. Un enlace es relativo cuando se dice los pasos o camino a seguir desde el fichero actual al fichero que enlazamos, es un enlace absoluto cuando se determina el camino completo en el árbol de directorios de nuestro ordenador. Los enlaces relativos son más difíciles de manejar por el usuario novel pero siguen funcionando cuando movemos nuestro sitio de un lugar a otro, copiamos a otro dispositivo o publicamos en Internet. Los enlaces absolutos sólo funcionan en nuestro ordenador. El editor HTML de OpenOffice únicamente usa enlaces relativos por lo que nuestras páginas están listas para publicarse en Internet, moverse, etc. La carga de enlaces relativos a imágenes y documentos se configura en OpenOffice desde la opción del menú principal “Herramientas-Opciones”



96

En “Guardar URLs relativamente” donde se encuentra seleccionados los cuadros “En el Sistema de archivos” y “En Internet”

páginas web con openoffice - iesitaba.com · 6.1. introducción al lenguaje html html es el...

Documents