Este documento proporciona instrucciones paso a paso para crear una primera página web simple utilizando el editor Kompozer. Incluye cómo crear la estructura de carpetas, iniciar un nuevo documento HTML, pegar texto de otro archivo, agregar formato al texto como títulos y subíndices, e insertar y alinear una imagen. El objetivo es crear una página web básica con texto y una imagen para practicar el uso de Kompozer.
1. Práctica 1: Primera Web con Kompozer
Las imágenes, animaciones, sonidos, etc. que se introducen en una página Web no se quedan
incrustadas en ella como ocurría en Writer o Impress. El motivo es que todos estos recursos
ralentizan la apertura de la página Web, que será más lenta cuanta más memoria requiera su uso, y
esto puede causar que el usuario se aburra y se vaya a otra página.
Por esto una página Web consta de un texto (que se carga fácil y rápidamente) con una serie de
enlaces o vínculos que indican el camino donde están guardados los recursos multimedia (que se
cargan más lentamente).
En este documento se utilizarán: encabezado, texto e imagen.
1er paso: Crear las carpetas que se van a necesitar.
Una simple letra mal puesta, al escribir la dirección dónde está un guardado un recurso, hará que
este recurso no se pueda visualizar. Por eso es importante, antes de empezar a diseñar nuestra
página, crear la estructura de carpetas que se van a necesitar.
1.- Crea una carpeta con el nombre de “materialesweb” para guardar todos los materiales que se
hay que descargar del blog “http://www.lascosasquemeinteresan.wordopress.com”.
2.- Crea otra carpeta con el nombre: “miweb”.
3.- Dentro de la carpeta “miweb” crea una subcarpeta con el nombre: “imagenes”.
4.-.Descarga en la carpeta “materialesweb” los archivos correspondientes a esta practica:
“disoluciones.doc” y “submarinista.jpg”.
5.- Mueve el archivo “submarinista.jpg” a la subcarpeta “imagenes”.
En lo sucesivo la carpeta “imagenes” contendrá todas las imágenes que se integren en las páginas
Web que se van a crear.
Es recomendable que, tanto los nombres de carpetas como los de archivos, se escriban en minúscula
y que no contengan acentos ni símbolos.
2º paso: Iniciar un documento nuevo en Kompozer.
1.- Inicia el programa Kompozer.
Aplicaciones >> Internet >> Kompozer
Por defecto se empieza a trabajar en el modo de edición normal o de diseño.
2.- Cambia a modo de edición “Código fuente”.
Elige la solapa correspondiente en la parte
inferior de la página.
Observa que, aunque aún no has escrito nada, Kompozer ya ha introducido una serie de etiquetas
en el documento en blanco. Entre ellas las ya conocidas: <html>, <head>, <body> y <title>.
2. También aparece una primera línea: <!DOCTYPE html PUBLIC ="-//W3C//DTD HTML
4.0//EN">.
Siguiendo las indicaciones del W3C (consorcio internacional que se ocupa de normalizar el uso del
HTML) DOCTYPE debe ser el primer elemento que abra un documento. Esto quiere decir que debe
preceder a <HTML>.
Se trata de una marca que no necesita cierre y cuya función es facilitar información al servidor Web
que aloja la página. Esta línea proporciona los siguientes datos:
• HTML PUBLIC: el documento es público.
• DTD HTML 4.0: la versión de HTML soportada es la 4.0
• EN: el idioma del documento es el inglés
El uso de DOCTYPE no es obligatorio y puede omitirse. Seguramente su uso ayuda al servidor
Web a interpretar correctamente el documento, pero su ausencia no condiciona la correcta
visualización.
3.- Cambia al modo normal o de diseño.
Antes de continuar, conviene guardar la página Web, aún en blanco, en la carpeta “miweb”. Esto
se hace para evitar problemas con el itinerario a la hora de insertar la imagen.
Lo normal, es que el camino para buscar la carpeta donde está guardada la imagen, que se va a
insertar después, empiece en la carpeta donde esté guardado el archivo HTML, en este caso, el
archivo “descompresion.html”.
4.- Pulsa en el botón “Guardar” o bien elige Menú Archivo >> Guardar.
Aparece un cuadro de diálogo que pide el
título de la página.
5.- Escribe: “La descompresion” y haz clic
en el botón “Aceptar”.
6.- Se muestra el cuadro de diálogo
“Guardar página como”.
7.- Depliega la lista “Guardar en” para localizar la carpeta “miweb”.
8.- En la casilla “Nombre” introduce el nombre del archivo: “descompresion.html”.
9.- Clic en el botón “Guardar”.
10.- Minimiza esta ventana y utiliza el explorador de archivos para abrir (doble clic) el archivo de
texto “disoluciones.doc” (en carpeta “materialesweb”). Se abrirá el procesador de texto.
11- Usa 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. Cierra la ventana del
procesador.
3. Si no funcionaran estas opciones siempre usar “Ctrl.+C” y “Ctrol+V” para copiar y pegar.
12.- Maximiza la ventana de Kompozer y haz clic sobre la ventana del nuevo documento HTML
que estás editando.
13.- 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.
3er paso: Dar formato al texto.
Hay dos formas de modificar las características de un texto:
a) Utilizando los iconos de la barra de Formato (o las opciones del Menú Formato)
Los iconos son similares a los ya vistos en Writer pero con algunas diferencias:
• La lista de fuentes se encuentra en el desplegable que pone: “Anchura variable”.
• El icono siguiente permite definir el color del texto.
• No se define el tamaño de letra con un número sino utilizando los iconos
“Aumenta el tamaño de la letra” o “Reduce el tamaño de la letra”
b) Utilizando el cuadro de estilos. Estos estilos pueden ser: Texto del cuerpo (viene seleccionado
por defecto), Encabezados o títulos (hay varios disponibles) y Párrafos.
Más adelante se verá como modificar la hoja de estilos.
14.- Título. Selecciona la primera
línea de texto: “Las disoluciones y el
submarinismo a grandes
profundidades”.
15.- En la barra de Formato
despliega el cuadro de estilos de
párrafo y elige Título 1.
16.- Si deseas regresar al estilo
normal, marca el texto que desees y
selecciona en esta lista: Texto del
cuerpo.
17.- Pon el título de color rojo.
En el texto, hay una serie de fórmulas que están mal escritas: O2, N2, CO2. El número 2 que
aparece en todas ellas debe tener el formato de subíndice.
18.- Busca las fórmulas en el texto, selecciona el número y aplica:
Menú Formato >> Estilo de texto >> Subíndice
4. Algunas etiquetas html
La fuente: con el atributo face de la etiqueta <Font>.
Alineación:
• Izquierda: <p align="left"></p>
• Centro: <p align="center"></p>
• Derecha: <p align="right"></p>
• Justificar: <p align="justify"></p>
Tamaño: <small> y <big>.
4º paso: Insertar una imagen.
Antes de incluir imágenes en nuestra página hay que tener en cuenta lo siguiente:
• Su utilidad, si es realmente necesaria o no.
• Tamaño: el tamaño del archivo de imagen depende de las dimensiones de la imagen y del
número de colores que la forman. El objetivo es lograr que la página se cargue lo más
rápidamente posible.
• Formato: para colores puros con no más de 256 colores y gráficos muy simples usaremos el
formato GIF o PNG. Para imágenes con más de 256 colores usaremos el formato JPG o
PNG24.
• Resolución: conviene usar las imágenes con su tamaño real, evitando que sea el navegador el
encargado de reducirlas. Si necesitamos mostrar un numero elevado de imágenes, lo mejor es
usar una versión muy reducida de las mismas (thumbnails o miniaturas) a modo de índice y
enlazar con páginas individuales donde se muestre cada imagen por separado a mayor
resolución.
• Al diseñar la estructura del sitio conviene utilizar una carpeta para guardar las imágenes.
Una vez que se ha insertado una imagen en la página, podremos editar sus propiedades y
personalizar su diseño, como la altura, anchura, espaciado y alineación del texto.
19.-Clic en el sitio donde queramos que aparezca la imagen.
20.- Menú Insertar >> Imagen o el botón Imagen.
Se muestra el cuadro de diálogo Propiedades de imagen.
21.- Pulsa en el botón “Elegir archivo…” para
localizar el archivo que contiene la imagen:
“submarinista.jpg”.
22.- Al regresar de nuevo al panel
“Propiedades de imagen” conviene introducir
el “Texto alternativo”.
5. 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.
23.- En este caso teclea “submarinista”.
24.- Observa que en la casilla “Ubicación de
la imagen” se indica la ruta relativa para
localizar la imagen desde la página actual:
“imagenes/submarinista.jpg”.
Es muy importante que esta dirección esté
correctamente indicada.
25.- Para terminar clic en el botón “Aceptar.”
26.- Guarda la página Web.
6.- Ver el resultado
27.- Minimiza la ventana de Kompozer para situarte en la carpeta “miweb”.
28.- Doble clic sobre el archivo “descompresion.html” creado, para ver su aspecto con el
navegador Web instalado por defecto.
Etiqueta <IMG> Determina la localización de una imagen. No tiene cierre.
Atributos de la etiqueta <IMG>:
• src ="...": Ruta origen para localizar el archivo de la imagen. (source/fuente).
• alt="...": Texto alternativo que aparece en lugar de la imagen si el navegador no puede mostrar
la imagen. Tambien es mostrado al colocarnos sobre la imagen en un letrero amarillo.
• width="...": Establece el ancho de la imagen.
• height="...": Establece el alto de la imagen.
• border="...": Muestra un marco con el número de pixeles deseado.
• align="...": Alinea la imagen respecto al texto.