PDF de programación - 1.3 Mi primera página

Páginas web ::: Mi primera página
Diseño de materiales multimedia. Web 2.0

23



1.3 Mi primera página



Páginas web ::: Mi primera página
Diseño de materiales multimedia. Web 2.0

24



1.3 Mi primera página

El propósito de este actividad es diseñar tu primera página con Kompozer. El tema elegido es
una breve pincelada del poeta Federico García Lorca. En este documento se utilizarán:
encabezado, texto, imagen y un enlace a una página externa.


1.3.1 Organización en carpetas


1. Vamos crear una carpeta de nombre miweb.


Si utilizas Windows se propone crear esta carpeta en el raíz de tu disco duro
utilizando el explorador de archivos.


Selecciona Inicio > Mi PC y haz doble clic en la unidad Disco local C: para abrirla.
Clic derecho sobre un espacio del explorador y elige Nuevo > Carpeta. Introduce el



nombre de la nueva carpeta: “miweb”. Doble para situarte dentro de esta carpeta.



miweb.


Repite el paso anterior para crear una subcarpeta con el nombre images dentro de

Si utilizas Ubuntu Linux se propone crear esta carpeta dentro de la carpeta personal
del usuario.



el

la



1.1 Desde el escritorio elige Lugares > Carpeta
personal. Se abre el explorador de archivos
mostrando
carpeta
/home/<usuario>/

contenido

de

1.2 Clic derecho sobre un espacio del explorador y
elige Crear una carpeta. Introduce el nombre de
la nueva carpeta: “miweb”. Doble para situarte
dentro de esta carpeta.

1.3 Repite el paso anterior para crear una subcarpeta

con el nombre images dentro de miweb.



Páginas web ::: Mi primera página
Diseño de materiales multimedia. Web 2.0

25


2 Extrae a la carpeta miweb el contenido del archivo comprimido que se adjunta:
lorca.zip. Como resultado de la extracción encontrarás dos archivos: una imagen
(lorca.gif) y un archivo de texto (lorca.txt).



6



3 Arrastra el icono de la imagen para soltarlo dentro de la subcarpeta images. De esta
forma este archivo se mueve para situarse dentro ella. En lo sucesivo la carpeta images
contendrá todas las imágenes que se integren en las páginas web creadas.


1.3.2 Iniciar un documento nuevo en Kompozer

4

Inicia el programa Kompozer haciendo doble clic sobre el correspondiente icono situado
en el escritorio.



5 Minimiza esta ventana y utiliza el explorador de archivos para abrir (doble clic) el archivo

de texto lorca.txt. Se abrirá el Bloc de Notas mostrando su contenido.



Selecciona 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 de
Windows. Cierra la ventana del Bloc de Notas



Páginas web ::: Mi primera página
Diseño de materiales multimedia. Web 2.0



26



7 En la barra de tareas de windows pulsa en el botón correspondiente de Kompozer para

maximizar la ventana de este programa.

8 Clic sobre el nuevo documento HTML que estamos editando y 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.

9 Antes de continuar conviene guardar el archivo en la carpeta miweb que hemos creado.

Para ello pulsa en el botón Guardar o bien elige Archivo > Guardar.


10 En el cuadro de diálogo Título de la página introduce su título y haz clic en el botón



Aceptar.



11 Se muestra el cuadro de diálogo Guardar página como donde debes desplegar la lista
Guardar en para localizar la carpeta miweb. En la casilla Nombre introduce el nombre
del archivo: lorca.



Páginas web ::: Mi primera página
Diseño de materiales multimedia. Web 2.0



27


12 Clic en el botón Guardar
13 Título. Pulsa y arrastra para seleccionar la primera línea de texto: “Federico García
Lorca”. En la barra de Formato despliega el cuadro de estilos de párrafo y elige Título 1.
Si deseas regresar al estilo normal, marca el texto que desees y selecciona en esta lista:
Texto del cuerpo.



Nota:
Es muy recomendable utilizar las distintas opciones de formato de esta lista para
destacar frases y párrafos.


1.3.3 Insertar una imagen

14 Clic debajo del título anterior y pulsa la tecla <enter> para definir el punto donde se

insertará la imagen. En la barra de Redacción pulsa en el botón Imagen.


15 Se muestra el cuadro de diálogo Propiedades de imagen. Pulsa en el botón Elegir archivo

… para localizar el archivo que contiene la imagen.



Páginas web ::: Mi primera página
Diseño de materiales multimedia. Web 2.0

28



17 Al regresar de nuevo al panel Propiedades de imagen conviene introducir el Texto
alternativo. En este caso teclea “Federico García Lorca”. 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.



16 Despliega la lista Buscar en: para abrir la carpeta miweb\images donde hemos situado

anteriormente el archivo lorca.jpg. Clic sobre este archivo y pulsa en el botón Abrir.



Páginas web ::: Mi primera página
Diseño de materiales multimedia. Web 2.0



29


18 Observa que en la casilla Ubicación de la imagen se indica la ruta relativa para localizar
la imagen desde la página actual: “images/lorca.jpg”. Para terminar clic en el botón
Aceptar.



1.3.4 Insertar un hipervínculo

19 Pincha y arrastra sobre el enlace que aparece en la última línea del documento. A
continuación elige Editar > Cortar. Esta URL se ha copiado al portapapeles de Windows y
se ha eliminado de la ubicación actual. Como habrás podido comprobar es una enlace a
Google que ya incluye los términos de búsqueda relativos al autor que nos ocupa:
http://www.google.es/search?q=Federico+García+Lorca

20 Pulsa y arrastra para seleccionar el texto “Más información” situado al final del

documento. A continuación en la barra de Redacción pulsa en el botón Enlace.



21 En el cuadro de diálogo Propiedades del enlace sitúa el cursor en la casilla Ubicación del
enlace y pulsa la combinación de teclas <Ctrl>+<V> para pegar la URL copiada
anteriormente. Para terminar pulsa en el botón Aceptar.



Páginas web ::: Mi primera página
Diseño de materiales multimedia. Web 2.0



30



1.3.5 Guardar un documento web



22 Clic en el botón Guardar
23 Minimiza la ventana de Kompozer para situarte en la carpeta miweb. Doble clic sobre el
archivo lorca.html creado para ver su aspecto con el navegador web instalado por
defecto. Otra opción es pulsar en el botón Navegar que se muestra en la barra de
Redacción de Kompozer. No obstante esta opción sólo funciona si tienes configurado en
tu equipo Mozilla Firefox como navegador por defecto.

24 No olvides eliminar el archivo lorca.txt una vez que has terminado.
25 Si es necesario abrir el archivo selecciona Archivo > Abrir.