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.
