Está en la página 1de 13

Creación de páginas Web y Tratamiento de imágenes

Una página de Texto Básica

Si ya ha trabajado anteriormente con programas de edición de textos


sencillos, como “Word” o WORPAD, le resultará sumamente sencillo crear su
primera página Web, ya que ambos formatos (papel y Web) se crean de forma
prácticamente idéntica.

Ejercicio

1. Empezamos a escribir

En este primer ejercicio escribirá una convocatoria para una reunión de


profesores. Éste es el texto, con el que trabajará de ahora en más, y al cual
irá dando diversos formatos poco a poco. (Para facilitar el trabajo busque el
archivo textos.txt, donde encontrará los textos con los que trabajaremos).

Colegio Buena Vista


Se convoca a los profesores a una reunión a las 4.00 de la tarde en el aula de
informática para discutir los contenidos de la próxima web del colegio.
Esperamos la colaboración de todos a fin de poner en marcha este proyecto lo
más pronto posible.
Los temas a tratar serán:
- Elaborar contenidos por áreas
- Creación de las páginas web
- Adquisición del dominio "www.buenavista.edu"
Gracias de antemano y un saludo a todos.
Ana García, directora

Abra el Kompozer. Al hacerlo, se abrirá un documento (o página) en blanco,


en esa página escriba (o copie) el texto.
Escriba (o copie) el texto en la página Web.

1
Creación de páginas Web y Tratamiento de imágenes

Para cambiar el formato de este texto utilice la "barra de Formato".


Normalmente, se encuentra debajo de los menús superiores.

También se puede acceder a través del menú Formato > Tipo de letra,
Tamaño, Estilo de texto, Color de texto, Dirección de escritura.

2. Los primeros cambios


En la barra de Formato se encuentran todos los cambios de estilo y formato
que se pueden hacer en una página html.

Seleccione Colegio Buena Vista y pulse el botón de “negrita” . Observará


que se modifica la apariencia del texto seleccionado y ahora se ve en negrita.

Si desea modificar el color del texto, debe pulsar el botón , al hacerlo


aparecerá el selector de color:

2
Creación de páginas Web y Tratamiento de imágenes

Desde el cuadro de diálogo que se despliega es posible seleccionar un color


predefinido o cualquiera de la paleta de colores, así como personalizar su
tono, saturación y brillo. También, se puede seleccionar por su nombre o por
su valor hexadecimal

Aclaración: Las etiquetas Web emplean colores por combinación de ROJO,


VERDE y AZUL. El valor máximo para cada color es 255 (FF en hexadecimal), y
el valor mínimo 0 (0 en hexadecimal). Ej.: un color codificado así #FF0000 es
rojo puro.
Por último, seleccione la fuente que desea usar. Para hacerlo, siga los
siguientes pasos:

1. Seleccione el texto.

2. Despliegue la lista de fuentes desde la barra de formato o desde el


comando Texto > Fuente.

3. Seleccione de la lista la fuente deseada.

Para el Tamaño:
Al seleccionar Menor o Mayor, se puede cambiar el tamaño del texto.

El resultado será el siguiente:

Colegio Buena Vista


3
Creación de páginas Web y Tratamiento de imágenes

Resumiendo, hasta el momento ha utilizado las opciones: estilo (negrita),


tamaño de tipografía, y color. Éstas son las diferentes opciones de
modificación que permite una cadena de texto.

Atención: Tener en cuentas que aunque Komponzer nos permite elegir


cualquier tipografía instalada en la PC, se recomienda utilizar sólo "Times" o
"Arial". Si elije otra tipografía, el usuario que vea esta página deberá tenerla
instalada en su PC, en caso contrario su PC mostrará la tipografía "Times".

3. Dar formato a párrafos


Después de “Colegio Buena Vista” pulse enter, de esta forma quedará
separado del primer párrafo.

Observe que en los párrafos siguientes el texto ocupa el ancho de la pantalla,


es decir, que no existen márgenes de página a la derecha, por tanto el
ancho de los renglones está delimitado por el ancho de la ventana. Si
minimiza el tamaño de la ventana verá como el texto se ajusta
automáticamente al ancho de la ventana.

La alineación es el único aspecto que puede modificarse en los párrafos.


Pueden alinearse a la izquierda, centro, derecha o justificado; pulsando,
respectivamente, los siguientes botones:

Tampoco existe el interlineado entre renglones. El espaciado entre líneas es


siempre el mismo.

Modifique el primer párrafo. Para ello, ubique el cursor justo después de la


frase “las 4.00 de la tarde” y pulse “enter”. Vuelva a hacer lo mismo con la
frase y el párrafo siguiente para hacer renglones más cortos.

Dependiendo del punto en que se hayan cortado las líneas, el resultado, sería
similar a éste:

4
Creación de páginas Web y Tratamiento de imágenes

Se convoca a los profesores a una reunión a las 4.00


de la tarde en el aula de informática para discutir
los contenidos de la próxima web del colegio.
Esperamos la colaboración de todos a fin de poner
en marcha este proyecto lo más pronto posible.

El problema reside en que no es posible distinguir los párrafos. La única


solución sería pulsar "enter" otra vez entre ambos párrafos, para crear un
renglón vacío que sirva de división.

Sin embargo, hay una forma de forzar el interlineado para que los renglones
aparezcan juntos. El sistema es idéntico pero en vez de pulsar "enter", debe
pulsar "mayúsculas + enter.

El resultado, sería éste:

Se convoca a los profesores a una reunión a las 4.00 de la tarde en el aula de


informática para discutir los contenidos de la próxima Web del colegio.
Esperamos la colaboración de todos a fin de poner en marcha este proyecto lo
más pronto posible.

El último tipo de formato de párrafos es la "sangría". Es un efecto similar al


del tabulador, donde todo un párrafo se mueve hacia la derecha o la
izquierda.

Seleccione los dos párrafos y pulse el botón de sangría hacia la derecha.

Si siguiera escribiendo, podría hacerlo sin límite porque tampoco existe el


margen inferior de la página. El único límite es el peso del archivo. Si es muy
grande tardará mucho tiempo en cargar en un navegador y, al ser tan
extenso, será incómodo para leer en pantalla.

5
Creación de páginas Web y Tratamiento de imágenes

4. Listas
Utilizaremos primordialmente dos tipos de listas:

 Listas sin ordenar: También llamadas viñetas.


 Listas ordenadas: También llamadas numeraciones.
 Listas de definición: Se utilizan para introducir un término, seguido de
su definición. Es muy útil en muchos casos, como, por ejemplo, en el

glosario de nuestra Web.

Para crear una lista nueva:

1. Sitúe el cursor en el lugar en el que desea añadir la lista y haga clic en el


botón determinado.

2. Escriba el texto del elemento de la lista y presione enter para crear otro
elemento de la lista.

3. Para terminar la lista, deberá desactivar el icono de la lista en el menú de


Propiedades.

Para crear una lista usando texto existente:

1. Seleccione una serie de párrafos para convertirlos en una lista.

2. Haga clic en el botón específico, y seleccione el tipo de lista deseado: Lista


sin ordenar, Lista ordenada o Lista de definición.

Propiedades de la Lista

6
Creación de páginas Web y Tratamiento de imágenes

Una vez realizada una lista se puede modificar. Si desea modificar una lista
debe situar el cursor dentro de la misma y seleccionar Formato > Lista
>Propiedades de la lista. Aparecerá un menú de dialogo.

 Tipo de lista: Cambia la representación de los elementos de toda la


lista.
 Estilo de numeración: Una vez elegido un tipo de lista es posible
seleccionar su estilo: - si son viñetas: círculos o cuadrados. - si es una
numeración: orden alfabético, numeración romana, etc.
 Comenzar en: en el caso de seleccionar una lista de numeración, es
posible indicarle el número a partir del cual queremos que empiece a
contar.

Como ejemplo, verá cómo crear en forma automática la lista de nuestro


ejemplo, la que contiene los temas a tratar. Seleccione los tres renglones que
la conforman y pulse el botón “listas”.

7
Creación de páginas Web y Tratamiento de imágenes

Los temas a tratar serán:

• - Elaborar contenidos por áreas

• - Creación de las páginas web

• - Adquisición del dominio "www.buenavista.edu"

Borre los guiones colocados inicialmente delante de cada línea, porque ya no


son necesarios.

Si quisiera seguir añadiendo más elementos a la lista, bastaría con pulsar


"enter" al final del último renglón. De este modo el programa sigue colocando
los puntos iniciales.

Para terminar una lista, también puede colocar el cursor al final del último
renglón y pulsar "enter" dos veces seguidas.

5. Líneas horizontales
Otro elemento de estilo típico de las páginas Web son las líneas horizontales,
que se suelen utilizar como separadores entre párrafos o secciones de una
página.

En el texto del ejemplo, ubique el cursor al final de la línea inicial de "Colegio


Buena Vista" y seleccione "Insertar > "Linea horizontal"

Colegio Buena Vista


Automáticamente, la línea se adapta al ancho de la página, pero se pueden
modificar sus atributos.

Por ejemplo, si hace doble clic sobre la línea y cambia el ancho al 50% y la
altura a 6 píxeles.

8
Creación de páginas Web y Tratamiento de imágenes

Estos son algunas variaciones:

Con las "líneas horizontales" terminamos con todos los aspectos relacionados
con la creación de una página de texto básica. Más adelante veremos cómo
utilizar otros formatos ("tablas") para crear páginas que contengan mayor
información y variedad.

6. Guardar el archivo
Al elegir "Archivo" > "Guardar como...", aparecerá una ventana que nos
pedirá:

1) el título de la página
Seleccione el texto para modificar el título que el programa adjudica
automáticamente y escriba “Ejercicio1_(seguido de su apellido)”

9
Creación de páginas Web y Tratamiento de imágenes

Este nombre aparecerá en la barra superior del navegador:

2) Debe darle un nombre al archivo, por ejemplo, ejercicio1, guardándolo


como un archivo htm o html. Es decir, el nombre del documento que hemos
creado será “Ejercicio1_(seguido de su apellido)”

Atención: De ahora en adelante, le solicitamos que, en los nombres de


archivos o carpetas NO utilice:
 acentos.

10
Creación de páginas Web y Tratamiento de imágenes

 espacios en blanco entre palabras.


 caracteres como ñ, ü, etc.
 barras inclinadas "/", ya que se utilizan para definir directorios.
 mayúsculas.

7. Visualizar el archivo
Una vez que haya escrito nuestra primera página, deberá comprobar cómo se
ve en un navegador. También es posible ver una previsualización del
documento sin salir de Komponzer pero, dependiendo de la complejidad de la
página, no siempre mostrará los contenidos igual que un navegador.

Para visualizar un documento en Komponzer pulse "Vista preliminar" en las


solapas de la parte inferior de la ventana.

Para visualizar un documento en un navegador se puede:

• hacer doble clic sobre el archivo


• abrir un navegador y arrastrar el archivo a su interior
• en cualquier navegador elegir "Archivo" >"Abrir...", para localizar el archivo
y abrirlo.

11
Creación de páginas Web y Tratamiento de imágenes

La página terminada se verá así:

9. A modo de curiosidad: la pestaña "Código"


Si pulsa la pestaña "Código fuente" descubrirá (y podrá modificar) el código
HTML, es decir el lenguaje que se utiliza para crear páginas Web.

12
Creación de páginas Web y Tratamiento de imágenes

Toda la información está entre corchetes "< >" que contienen las indicaciones
que los navegadores necesitan para visualizar una página.

Por ejemplo:
<p> marca la división en párrafos.
<strong>Hola</strong>
Iindica la palabra "hola" en negrita <title>Vacaciones</title>

Indica el título "Vacaciones" en la barra superior de la ventana del navegador.

Cada orden de código comienza con "< >" y termina con "</>". Las órdenes de
código que van entre estos corchetes se llaman "tags" o etiquetas. Hay una
larga lista de "tags' que definen todas las posibilidades de html: alineamiento,
tamaños de letra, párrafos, hipervínculos, etc.

13

También podría gustarte