CREACIÓN DE PÁGINAS WEB CON KOMPOzER

1. Formatos de texto

Los objetivos de la primera lección son:

1.1. Comenzar aplicando formatos
1.2. Actividad nº 1: Aplicar formatos a un texto
1.3. Guardar el documento creado
1.4. Adquirir las primeras nociones sobre el lenguaje HTML

1.1 Aplicar formatos

Para empezar a utilizar Kompozer, vamos a conocer los distintos formatos que podemos aplicar al texto de un documento. En la segunda sección realizaremos una actividad que consistirá en aplicar estos formatos a un texto.

Los formatos con que se puede transformar el texto de una página web no son tantos como los que tiene un buen procesador de textos, pues el lenguaje HTML carece de elementos avanzados de diseño. Sin embargo, en la lección 7 veremos que las hojas de estilos nos permiten un mayor refinamiento en el formateo y el diseño general de la página. De todas formas, programas como Kompozer poseen las suficientes herramientas para conseguir una buena presentación del texto y un diseño consistente, lo que se puede lograr pulsando en los siguientes botones y menús desplegables de las barras de formato:

Botones de formato

  1. Con el primer menú desplegable podemos dar formato a los párrafos y a los textos de los títulos, que cuentan con seis encabezados predeterminados.
  2. En el menú desplegable donde aparece la Anchura variable, se puede elegir la anchura del texto y el tipo de letra, pero de momento no conviene cambiarlo, o si lo hacemos, lo mejor es elegir aquellos tipos de letra que se encuentran instalados en la mayor parte de los ordenadores de forma predeterminada, que suelen ser los tipos Times New Roman y Arial, entre otros pocos. Este escaso control sobre la tipografía se verá paliado por las hojas de estilos, como ya veremos en la lección 7.
  3. En la barra superior, tenemos ocho botones que corresponden al título que aparece si se coloca encima de ellos el cursor del ratón:
    1. Enfatizar, que es similar a la letra cursiva.
    2. Gran énfasis, que es similar a la letra negrita.
    3. Lista numerada, que sirve para numerar ítems.
    4. Lista de viñetas, que tienen varias formas según se indique en su código.
    5. Sangrar texto, que indenta el texto, es decir, reduce la anchura de la línea del texto.
    6. Desangrar texto, que lo coloca con los mismos márgenes que el resto del texto.
    7. Término y descripción de la definición, que es un tipo de lista que se utiliza para definir términos, colocando en una línea el término definido y en la siguiente, la definicicón.
  4. En la barra inferior hay otros botones de formateo:
    1. Los dos primeros reducen o aumentan en tipo de letra, pero ya hemos dicho que esto es mejor hacerlo con hojas de estilo.
    2. Los tres siguientes botones sirven para hacer la letra negrita o cursiva, y para subrayar texto, aunque esto último no es nada aconsejable, pues se puede confundir con el texto subrayado de los enlaces.
    3. Por último, tenemos los botones de alineación del texto: a la izquierda, centrado, a la derecha y justificado. Éste último es el texto alineado tanto a izquierda como a derecha, igual que en los libros, pero no es aconsejable su uso, porque en la web no existe separación silábica y puede quedar mucho espacio entre palabras, lo que perjudica la lectura.

Para aplicar los formatos de los botones hay que marcar o destacar el texto que queramos cambiar. Para ello, se coloca el puntero del ratón al principio o al final del texto, se aprieta el botón izquierdo del ratón y, sin dejar de pulsarlo, se arrastra el puntero sobre el texto elegido. Al final, se suelta el botón izquierdo del ratón y aparece el texto de color blanco con el fondo negro. Entonces ya se puede aplicar el formato deseado pulsando el botón o el menú correspondiente. También se puede marcar una palabra haciendo un doble clic encima de la palabra, y se puede continuar destacando las palabras siguientes con un clic del ratón a la vez que se aprieta la tecla de mayúsculas. Algunos de estos formatos también funcionan simplemente colocando el puntero del ratón encima de una palabra o de una línea del texto que queremos transformar.

Todos estos formatos y algunos más también se pueden aplicar abriendo el menú Formato de la barra superior de menús. Conviene que practiquemos con ellos para descubrir qué resultados dan en la página.

Mención aparte merece la opción Lista del menú Formato, que utilizaremos cuando queramos formatear una lista de viñetas o numerada, ya que nos permite más posibilidades que los botones que aparecen en la barra de formato. Cuando utilizamos la opción Lista -> Propiedades de lista, aparece una ventana donde podemos elegir varios tipos y estilos de lista. Además podemos elegir el número por el que queremos que empiece la lista. Cuando deseamos hacer una lista que tenga más de un nivel, tenemos que utilizar el botón de Sangrar texto (pulsando dos veces) , y después elegir el tipo de lista para ese nivel. Para volver a la sección anterior, utilizamos el botón de Desangrar texto. Por ejemplo:

Se pueden utilizar dos tipos de listas:

  1. Con viñetas:
    • Del tipo "disk".
      • Del tipo "circle".
        • Del tipo "square"
  2. Numeradas:
    1. Con números romanos.
      1. Con letras

Actividad 1.2. Actividad nº 1: Aplicar formatos a un texto

Monstruo

Es hora ya de presentar a nuestro Monstruo, que nos acompañará durante todo el curso. Este personaje tristón y a la vez divertido ha escrito una breve presentación para su página personal con la que vamos a comenzar a utilizar Kompozer a fondo. La presentación se encuentra en el archivo texto.htm, dentro de la carpeta monstruo, que se instala dentro de la carpeta principal de este curso si se ha utilizado el programa de instalación que se descarga desde la primera página de este curso. Si se trabaja directamente desde Internet, se puede copiar este archivo al disco duro desde el navegador después de abrir dicho archivo en una ventana al pulsar el siguiente botón:

Texto sin formatos

La actividad consiste en aplicar formatos a este texto de forma que quede igual al que se encuentra en el archivo formatos.htm, que se puede ver en una nueva ventana pulsando el siguiente botón:

Texto con formatos

Vamos a empezar utilizando el archivo texto.html. Este texto se ha elaborado de antemano en un editor de textos, ya que es una forma de proceder muy habitual si se tiene en cuenta que en este tipo de programas se puede escribir y corregir el texto con comodidad y eficacia. Por desgracia, Kompozer no tiene correctores de ortografía y de estilo, por lo que resulta recomendable escribir en un procesador de textos el texto que vayamos a incluir en una página web, pero sin incluir ningún tipo de formatos de texto para no ensuciar el código HTML generado cuando abramos el archivo con Kompozer. El texto final elaborado en el procesador de textos lo guardaremos con formato de HTML, con la extensión .html, aunque también podría ser .htm.

Lo primero que vamos a hacer es abrir en Kompozer el archivo texto.html desde el menú Archivo de la barra de menús y la opción Abrir archivo. Este archivo hay que buscarlo en la carpeta monstruo, que se encuentra dentro de la carpeta principal de este curso.

En el texto que aparece en la pantalla hay que aplicar distintos formatos de texto para dejarlo igual que el archivo que hemos visto antes al pulsar el botón de Texto con formatos. En definitiva, lo que hay que hacer es lo siguiente:

  1. Al título del documento hay que aplicarle el Título 1; y al subtítulo, el Título 3. Ambas líneas hay que centrarlas en la página.
  2. La línea tercera va a estar centrada y toda en negrita; además, vamos a insertar un salto de línea (con la teclas Control + ENTER) después de la única coma que hay en ese texto. También pondremos en negrita los nombres de las tres direcciones de páginas web de la sección Enlaces de miedo.
  3. Las líneas quinta y sexta deben constituir una lista con viñetas.
  4. En la línea sexta la palabra aportación tiene que estar en cursiva.
  5. A los tres títulos de las secciones (Profesión, Aficiones y Enlaces de miedo) les aplicamos el Título 2.
  6. En la sección Aficiones, todas las líneas salvo la primera tienen que ir incluidas en una lista numerada.
  7. En la sección enlaces de miedo, hay que formatear los títulos de los enlaces (Halloween.com, etc.) con el formato llamado Término de la definición, y los párrafos explicativos de cada uno de ellos con el formato Descripción de la definición.
  8. La última línea del texto, que indica la autoría de la página web, va a ir centrada.
  9. En cuanto a los colores, vamos a colorear de azul el título de la página, la tercera línea y los títulos de las secciones.

1.3. Guardar el documento creado

Por último, tenemos que guardar la página en el disco duro, pero antes hay que escribir el título interno del documento; de lo contrario, nos lo pedirá el programa antes de guardar el archivo. Para ello abrimos el menú Formato -> Título y propiedades de la página..., y completamos el formulario, del que sólo es obligatorio el título del documento. Este título de la página no será visible en el documento que hemos elaborado, pues es el título que manejará el navegador y que aparecerá en la barra de títulos del navegador, en la barra de tareas del escritorio y en el menú de páginas visitadas del navegador.

Propiedades de la página

En la parte de Información general, el título del documento y la descripción son importantes para identificar el documento y su contenido de forma que los buscadores web puedan indexarlo adecuadamente y los usuarios puedan encontrar lo que buscan. En la sección de Internacionalización, haremos bien en elegir el idioma del documento, Español / España [es-es], pues puede ser de utilidad para quien busque textos en español de la temática de nuestro documento. Y el conjunto de caracteres ya viene especificado, de lo cual hablaremos más adelante.

Una vez hecho esto, guardamos el archivo desde el menú Archivo -> Guardar como... en la carpeta monstruo, que ya está preparada para ello, y lo llamaremos index.html, pues éste es el nombre que habitualmente se da al archivo principal para que lo reconozcan los usuarios, los servidores y los buscadores. No es necesario teclear la extensión .html, porque en este caso ya se encarga el programa de ello, pero conviene añadirlo, pues en otros casos el programa no lo añade automáticamente. También se acepta la extensión .htm, si bien nosotros preferimos la primera.

Es importante que todos los archivos que vayamos elaborando los guardemos en la misma carpeta. En nuestro curso hemos creado una carpeta llamada monstruo, donde el usuario puede guardar sus archivos; en ella hemos copiado un archivo titulado texto.html, que utilizaremos en este curso. Dentro de esta carpeta hemos creado otra llamada imagenes, donde guardamos algunas imágenes que también nos serán útiles. Cuando las páginas web tienen muchos archivos, conviene guardarlos en carpetas distintas dentro de la carpeta principal. 

Hay que tener en cuenta que, para evitar problemas con los distintos tipos de servidores de Internet, es conveniente nombrar las carpetas y los archivos con letras minúsculas y sin tildes ni otros caracteres especiales. Los nombres deben ser cortos y de una palabra; si queremos usar más palabras, las debemos unir con un guión bajo (mi_pagina.htm), o sin él (mipagina.htm), pero nunca separadas (mi pagina.htm).

Es conveniente que de vez en cuando veamos nuestra página en los navegadores Internet Explorer y Mozilla Firefox, que son los más utilizados en la Red, para asegurarnos de que la página se vea bien en ambos navegadores. Para ello, hay que guardar nuestro trabajo regularmente y después abrir los archivos con esos navegadores, teniendo en cuenta que a veces tendremos que pulsar el botón de actualizar documento que hay en los ellos para que el navegador recoja los últimos cambios que hayamos efectuado en nuestras páginas. Ambos navegadores muestran de forma parecida los elementos básicos de HTML, que son los que vamos a utilizar en este curso, y por tanto el problema no es importante en este nivel.

Y ya hemos creado nuestra primera página, aunque en las siguientes lecciones la iremos mejorando y completando.

1.4. Primeras nociones de HTML

El HTML es un lenguaje sencillo que se utiliza para elaborar páginas de Internet. No es el único que se utiliza en la Red, pero todavía sigue siendo fundamental para generar los millones de documentos que pueblan la World Wide Web. Hay otros lenguajes que mejoran las funcionalidades multimedia e interactiva de las páginas web, pero el HTML constituye la base. Se pueden crear páginas de Internet simplemente escribiendo código HTML en un archivo de texto y guardándolo con las extensiones .htm o .html. El navegador que utilicemos se encargará después de traducir ese código para que veamos las páginas en la Red. Por tanto, aplicaciones como Kompozer no son imprescindibles para generar código HTML pero nos facilitan enormemente la tarea. En todo caso, aunque no resulte necesario conocer el lenguaje HTML para crear páginas, siempre conviene familiarizarse con él, sobre todo a la hora de mejorar el diseño de los documentos y perfeccionar sus cualidades interactivas.

La información que del lenguaje HTML se va a ofrecer en esta sección de nuestro curso es básica pero suficiente para comprender los entresijos de este lenguaje. Sus distintas versiones no han modificado su estructura, que sigue siendo compatible con los dos navegadores principales, el Internet Explorer y el Firefox, si bien hay aspectos que ambos navegadores no interpretan del mismo modo. En este curso, la enseñanza del HTML va a ir ligada a las actividades prácticas que se vayan realizando y, por tanto, no pretende ser exhaustiva.

Ahora vamos a ver el código fuente de nuestra página, que ha creado automáticamente Kompozer. Tenemos que abrir el menú Ver de la barra de menús y pulsar en la opción HTML.... Aparecerá una ventana que muestra las tripas de nuestra página.

Lo primero que hay que saber es que HTML (Hypertext Markup Language) es un lenguaje de etiquetas o marcadores, es decir, de órdenes que damos mediante un código escrito en inglés. Las etiquetas básicas de toda página web son las siguientes:

<html>
<head>
<title>Mi página</title>
</head>
<body>
<p>Texto incluido por el usuario</p>
</body>
</html>

La primera etiqueta que hay que escribir en el archivo es <html>, y la última </html> (da igual que sea en mayúsculas o minúsculas), que se diferencian en la barra /, la cual indica el cierre de la etiqueta. Casi todas las etiquetas tienen que cerrarse de esta manera, pero hay algunas que no tienen cierre. La presente etiqueta indica que el archivo es de lenguaje HTML.

La etiqueta <head> abre la cabecera de la página. Esta sección se utiliza, entre otras funciones, para ofrecer información a los buscadores de Internet con las etiquetas <meta>, para introducir lenguajes de scripts, para enlazar archivos de hojas de estilos y para indicar el título de la página mediante la etiqueta <title>. Nada de lo que se escribe aquí aparece en la página que ve el usuario, salvo el título, que aparece en la barra de título del navegador, en la barra de tareas de Windows y en el menú de páginas visitadas.

Todo lo que se va a ver en el documento está incluido en la etiqueta <body>, que es el cuerpo de la página. Aquí hemos escrito la frase "Texto incluido por el usuario", con la etiqueta <p>, que indica que ese texto forma un párrafo.

A continuación vamos a estudiar las etiquetas que ha producido la actividad de esta lección y que el programa ha escrito en el cuerpo del archivo, entre las etiquetas <body> de apertura y de cierre :

  1. Se ha incluido el color de fondo (bgcolor) como atributo de <body>, es decir, dentro de la etiqueta de apertura, que en este caso es el blanco: <body bgcolor="#FFFFFF">.
  2. Al título y al subtítulo se les ha aplicado el encabezado 1 (<h1>) y el 3 (<h3>) respectivamente y ambas líneas se han alineado al centro: align="center". A los títulos de las tres secciones se les ha aplicado el encabezado 2 (<h2>).
  3. El texto normal se encierra dentro de las etiquetas <p> de apertura y de cierre, lo que indica que es un párrafo. En la tercera línea de texto hemos insertado un salto de línea, cuya etiqueta es <br>, que no tiene cierre. La diferencia entre ambas etiquetas es que la primera comienza un párrafo y por tanto deja mayor espacio entre las líneas.
  4. Las viñetas se han aplicado con la etiqueta <ul>, es decir, lista no numerada. Entre esta etiqueta y la de cierre (</ul>), se han introducido las viñetas propiamente dichas con las dos etiquetas <li>. Y en la segunda sección (Aficiones) se ha incluido una lista numerada (<ol>). Los tipos de listas con viñetas se introducen como atributos dentro de la etiqueta <ul> de esta manera: <ul type="disc" start="1">, cuando es un círculo negro; si se trata de un círculo con el interior blanco, entonces el tipo es type="circle", y si es un cuadrado negro, es type="square". El atributo start="1" significa que la numeración debe empezar en 1. En cuanto a las viñetas numeradas (<ol>), los tipos pueden ser: "i" o "I" para numeración romana, minúsculas o mayúsculas respectivamente, o bien "a" o "A", si se quiere que sean letras.
  5. La lista de definición se ha incorporado en la última sección (Enlaces) con las etiquetas <dl>, <dt> y <dd>.
  6. En el texto de la lista con viñetas se ha aplicado la letra cursiva con la etiqueta <em>, que otros programas aplican con la etiqueta <i>.La negrita se ha aplicado con la etiqueta <strong>, aunque otros programas aplican la etiqueta <b>. Hay que destacar que la etiqueta de cierre de la negrita y de la cursiva son anteriores a la etiqueta de cierre de la lista, lo que se denomina anidamiento: <li>Para dejar constancia de mi <em>existencia</em> sobre la Tierra</li>
    Esto ocurre con mucha frecuencia en el lenguaje HTML y puede ser causa de errores cuando se hace manualmente.

Otras etiquetas de formato que no hemos utilizado son las siguientes:


Anterior Arriba Siguiente


Páginas dispersas de Alejandro Valero - http://fresno.pntic.mec.es/avaler3