Você está na página 1de 74

MANUAL DE CERACIN DE PGINAS WEB CON EL PROGRAMA KOMPOZER

Informtica Mster Colegio Internacional Nuevo Centro Curso 2011-2012

1. LENGUAJES UTILIZADOS PARA DISEO Y PROGRAMACIN DE PGINAS WEB 1.1 Extensiones de archivos creados 1.2 Otros programas utilizados

1.1 EXTENSIONES DE ARCHIVOS CREADOS El lenguaje ms comn para la creacin de pginas web es el HTML. Este lenguaje se escribe con etiquetas en forma de cdigo. La creacin del archivo puede hacerse de dos formas distintas: a) escribiendo directamente el cdigo, lo que permite hacer gran cantidad de cosas pero exige un conocimiento profundo del lenguaje, o b) utilizando programas especficos que, mediante iconos permiten hacer tareas como insertar texto, imgenes, hacer hipervnculos, maquetar, etc. De estos programas, los ms conocidos son:

FrontPage.lnk Frontpage, de Microsoft

Dreamweaver, de Macromedia

Dreamweaver MX 2004.lnk

En ambos casos se nos generar un archivo con extensin .htm o .html. Aunque ambos programas se pueden utilizar para la elaboracin de pginas web, Dreamweaver es mucho ms completo y verstil que Frontpage. Estos programas son de pago y exigen un ordenador potente para poder usarse fcilmente. Para la realizacin de este curso, se ha elegido un programa gratuito, y muy completo que permite realizar pginas de forma sencilla. Vamos a utilizar el programa KompoZer y todas las explicaciones irn orientadas a este programa.

En cualquier caso, las tareas que se solicitan se pueden realizar con cualquier programa de diseo web, por lo que si el estudiante est acostumbrado a usar otro programa, puede usarlo para la realizacin de las pginas.

1.2. OTROS PROGRAMAS UTILIZADOS Existen muchos programas que nos permiten gestionar el cdigo HTML mediante WYSIWYG es decir, que nos permiten realizar algo en cdigo HTML, sin necesidad de teclear el cdigo, que ser lo que realmente se ver. Entre los programas ms comunes est Frontpage y Dreamweaver. Frontpage es un editor de pginas web de la empresa Microsoft, formando parte del paquete Office que ya ha quedado algo obsoleto. Dreamweaver es un editor de pginas web creado por Macromedia, que actualmente ha sido absorbida por Adobe. Es el editor de web ms utilizado con diferencia. Se completa con programas como Flash, fireworks o Freehand. Sus versiones ms conocidas han sido la MX 2004, la versin 8 y actualmente la CS3. KompoZer es un editor gratuito muy usado y muy indicado para la iniciacin en la creacin de pginas web por su sencillez de uso. Otros programas de uso complementarios para pginas web: Flash, Photoshop, Hot Potatoes, etc. Caractersticas generales de cada uno de ellos. Complementariamente a Dreamweaver se pueden utilizar otros tipos de software que permite mejorar el aspecto y las utilizaciones de una pgina web. Entre ellos destacamos los siguientes: a) Flash: es un programa de Macromedia que permite hacer botones, animaciones, etc. Con Flash se crean archivos modificables con extensin .fla y archivos no modificables, que son los que ofrecen la animacin y que tienen extensin .swf. Para poder ver la accin que tienen estos archivos es necesario tener instalado, al menos, el plug-in de Flash. Tambin se pueden crear archivos .exe que se ejecutan sin la necesidad del plug-in. En cualquiera de estos casos, el archivo .swf o el archivo .exe se insertan en una pgina html.

Flash MX 2004.lnk

b) Photoshop o cualquier otro programa de edicin de imgenes que nos permite editar imgenes para poder modificarlas, pasarlas a formatos web segn nuestras necesidades y obtener as archivos para web, con extensiones .gif .jpg.

c) Hot Potatoes, que nos permite crear cuestionarios, sopas de letras, crucigramas y otro tipo de actividades, en cdigo HTML que podemos rellenarlos e, incluso, corregirlos automticamente.

Hot Potatoes 6.lnk

2.DIRECCIN DE URL 2.1 Concepto 2.2 Caracteres que no deben utilizarse 2.3 Estructura de una direccin web.

2.1 CONCEPTO La URL son las siglas de Uniform Resource Locutor, es decir, Localizador Uniforme de Recursos, que son el conjunto de caracteres que colocamos en la barra del navegador cuando queremos entrar en una pgina web. Como ejemplos de URL podemos encontrar: http://es.wikipedia.org/wiki/Wikipedia:Portada http://www.terra.es/, http://www.gruposantander.es/ o http://www.isftic.mec.es/. Podemos optar por dos formas de colocar la URL en el navegador, son las siguientes: a) escribiendo con el teclado toda la direccin en la barra de navegacin. En este caso deberemos tener cuidado de introducir correctamente todos los caracteres para que se pueda cargar la pgina web. b) utilizando Favoritos, es decir, aquellas URL que utilicemos frecuentemente, las guardaremos en Favoritos para pinchar directamente en ellas y no tener que teclearlas cada vez que queramos visitar su pgina web

2.2 CARACTERES QUE NO DEBEN UTILIZARSE


Cuando guardemos nuestras carpetas, subcarpetas y archivos deberemos tener mucho cuidado de algunos caracteres ya que pueden dar problemas a la hora de cargar la pgina web. Estos caracteres son los siguientes: - Smbolos raros como: , @, /, %, el punto(.), la coma (,), etc. - Letras maysculas - Espacios en blanco, en su caso podemos utilizar el guin bajo (_) - Tildes En cambio, si pueden utilizarse nmeros

no utilizar

El no uso de estos caracteres es muy importante ya que, si los usamos, se nos pueden producir errores que sern muy difciles de localizar a la hora de que el navegador cargue la pgina. 2.3 ESTRUCTURA DE UNA DIRECCIN WEB La estructura de una URL es la siguiente: primero se nombra el servidor que incluye a la pgina que estamos buscando, despus viene la estructura de carpetas y subcarpetas donde se encuentra la pgina que buscamos y, por ltimo, el nombre del archivo que buscamos, con la extensin .htm o .html. A continuacin vemos un ejemplo de esto:

http://w3.cnice.mec.es/recursos/bachillerato/tecnologia/manual/index.html

Servidor

Carpeta: recursos

Carpeta: bachillerato

Carpeta: tecnologia

Carpeta: manual

Archivo: index.htm

Esta URL estar en el servidor del ISFTIC (Ministerio de Educacin) y dentro de l en la carpeta recursos y dentro de esta en la subcarpeta bachillerato, y dentro de esta en la subcarpeta tecnologa, y dentro de esta en la subcarpeta manual y dentro de esta llamamos al archivo index.htm. Esta es la forma de llamar a un archivo. Esto deberemos tenerlo en cuenta cuando elijamos la estructura de carpetas, subcarpetas y archivos de nuestra web. Se aconseja nombrar index.htm al archivo que queremos que sea la pgina principal o portada de nuestra web, ya que este es el nombre que los navegadores cargarn por defecto. 3. INTRODUCCIN A LOS PROGRAMAS DE DISEO WEB

Este curso ha sido diseado para familiarizar al alumno con las bases fundamentales del diseo web. Antiguamente las pginas Web se diseaban mediante programacin, pero en la actualidad se han creado una serie de programas para disear pginas de manera ms fcil, apareciendo automticamente la programacin de una pgina. Esto ha evitado la dura tarea de los programadores y se ha facilitado el trabajo en esta materia. En este curso vamos a aprender a crear pginas Web utilizando el programa KompoZer para su orientacin, pero como hemos indicado hay otros programas que se podran usar. Algunos de estos programas que podemos utilizar para disear pginas Web son Dreamweaver, Frontpage, GoLive, Namo Web Editor, etc

4. INTRODUCCIN A LOS COMPONENTES DE UNA PGINA WEB HTML, es un lenguaje diseado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estndar de las pginas web.

El HTML puede ser editado con cualquier procesador de texto aunque existen programas de edicin de cdigo HTML. Estos programas se los conoce como WYSIWYG, es decir, las siglas del ingls, lo que tu ves es lo que tu obtienes, esto es, que lo que tu vas viendo al hacer un archivo es lo que realmente vas a obtener.

El cdigo HTML est formado por etiquetas, que son instrucciones con una seal de inicio y otra de finalizacin. Todas las etiquetas de inicio se caracterizan porque van entre signos de menor que y mayor que (<>) y las de finalizacin llevan adems la barra del signo de divisin (</>).

Para ver el cdigo fuente de una pgina web en Internet Explorer solo tenemos que ir a Ver/Cdigo fuente y se abrir una ventana con el cdigo HTML de esa pgina.

Si queremos ver el cdigo fuente de una pgina web que estemos diseando con KompoZer deberemos pulsan en la parte inferior izquierda de la pantalla en el apartado: Cdigo fuente. Tal y como se muestra en la siguiente imagen:

Un ejemplo de cdigo de una pgina HTML en blanco es el siguiente:

Donde podemos ver las siguientes etiquetas - <html> como inicio de documento HTML y </html> como fin de ese mismo archivo - <title> marca el inicio del ttulo y </title> su final - <head> marca el encabezamiento de la pgina y su final viene indicado por </head> - <body> el inicio del cuerpo del archivo y </body> como el fin

Otras etiquetas son:

- <p>: prrafo nuevo - <BR>: salto de lnea forzado - <TABLE>: comienzo de una tabla (las filas se identifican con <TR> y las celdas dentro de las filas con <TD>)
- <A>:

indica la existencia de un hipervnculo o enlace, dentro o fuera la pgina web. Debe

definirse el parmetro de pasada por medio del atributo href (ejemplo: <a
href="http://www.google.com">Google</a> - <IMG>:

se representa como Google)

indica la existencia de una imagen para mostrarse en el navegador Color del texto, representado por un cdigo hexadecimal. - <b>: Texto

- <font color="#rrggbb">:

en negrita

- <i>: - <u>:

Texto en cursiva Texto subrayado

Si en un momento dado nos interesa podemos colocar el archivo en formato cdigo y realizar las modificaciones que deseemos en las etiquetas, que se vern reflejadas en el formato diseo.

De esta forma podremos realizar algunas actuaciones o modificaciones que de otra manera se hacen muy difciles de realizar.

No obstante, la manipulacin del cdigo o la incorporacin de elementos mediante cdigo requieren un manejo muy fluido del lenguaje HTML.

5. EL PROGRAMA KOMPOZER

5.1 PASOS PARA DESCARGARNOS EL PROGRAMA DE KOMPOZER. Vamos a proceder a descargarnos el programa de KompoZer que es totalmente gratuito.
Lo primero que tenemos que hacer es conectarnos a Internet e introducir en la barra de navegacin la siguiente direccin www.magister.es/ch el enlace est disponible en

la parte inferior de la web

- Se nos abrir una ventana nueva como la que aparece a continuacin:

- Pulsar en el botn Empezar la descarga del programa y una vez descargado comenzar la instalacin (tambin se puede elegir la opcin guardar, descargarlo en el

escritorio y posteriormente ejecutarlo dndole doble clic) - Nos aparecer una nueva ventana en donde nos introduce en el programa

- Pulsar en el botn continuar con la instalacin.

que es siguiente, para pasar de pantalla y

- Nos aparecer una nueva ventana en donde tendremos que seleccionar que aceptamos los trminos (seleccionar I accept the agreement)

Pulsar en el botn que es siguiente, para pasar de pantalla y continuar con la instalacin. - Nos aparecer una ventana informndonos de donde se va a guardar el programa, es automtico pero si quieres guardarla en otra parte tendrs que pulsar en el botn de que sera en espaol examinar, y elegir en donde quieres guardarlo.

- Pulsar en el botn continuar con la instalacin.

que es siguiente, para pasar de pantalla y

- En esta nueva ventana que nos aparece nos informa del nombre que queremos darle al programa, es automtico y se recomienda dejar el que aparece.

- Pulsar en el botn continuar con la instalacin

que es siguiente, para pasar de pantalla y

- En esta nueva ventana no vamos a seleccionar nada, ya que queremos que nos aparezca el programa tal cual aparece.

- Pulsar en el botn continuar con la instalacin

que es siguiente, para pasar de pantalla y

- Nos aparecer la ltima pantalla para poder iniciar su instalacin.

- Pulsar en el botn de

para iniciar el proceso de instalacin.

- Una vez finalizado este proceso nos aparecer la siguiente ventana.

- Pulsar en el botn de

para cerrar el programa.

El programa se ha instalado correctamente pero en ingls, vamos a cambiarlo a espaol para que nos resulte ms fcil. Para ello vamos a seguir los siguientes pasos: - Descargar el paquete de Idioma Espaol del enlace que figura en la parte inferior de la web: www.magister.es/ch - Descrguelo en el escritorio ya que lo necesitar en los siguientes pasos. - Dirgete a Tools -> Extensions (Herramientas -> Extensiones si quieres actualizar la traduccin). - Pulsa el botn Install (Instalar). - Localiza el XPI descargado en tu disco duro y seleccinalo. - Lee el mensaje del cuadro de dilogo de instalacin de software y, una vez termine la cuenta atrs, pulsa el botn Install now. - Una vez instalado, reinicia Nvu/KompoZer para que los cambios de idioma tengan efecto.

6. PGINAS EN KOMPOZER 6.1 CMO TRABAJAR EN UNA PGINA EN KOMPOZER Cuando abrimos el programa de KompoZer, nos aparecer esta ventana:

En la pgina podremos introducir toda clases de objetos, texto... de forma muy parecida a como lo haramos en un documento de word.

En las barras de herramientas, que se muestran a continuacin, podemos encontrar los iconos de las funciones ms habituales:

Tambin disponemos de la Barra de Mens

.. en donde si pulsamos encima con el botn izquierdo del ratn, nos aparecern submens con distintas opciones que podemos utilizar en el programa.

En la parte inferior de la ventana, nos aparecern unas etiquetas.

esto nos permite tener distintas vistas de la pgina que estemos creando. - En Normal nos aparecer tal y como lo estemos creando - En Etiquetas HTML nos aparecern todos los objetos como en la vista Normal pero con etiquetas que identifican a los cdigos. - En Cdigo Fuente no aparecern los objetos, sino el cdigo necesario para crearlos. - En Vista preliminar nos permitir ver como queda antes de publicarlo y verlo en el Internet Explorer u otro programa de visualizacin. Es recomendable guardar frecuentemente la pgina, ya que el programa nos permite ver la pgina tal y como se vera en el explorador, si la pgina no esta guardada previamente no nos permitir ver la pgina. Es imprescindible que cuando escribamos el nombre de la pgina o creemos directorios, se redacten sin acentos, sin , ni espacios y sin maysculas, ya que ser ms fcil trabajar con las pginas.

Bien pagina_ejemplo1.htm

MAL Pgina_ejemplo1. htm

7. GUARDAR PGINAS EN KOMPOZER 7.1 Guardar una pgina nueva 7.2 Guardar una pgina existente 7.3 Ejemplo guiado paso a paso

7.1 GUARDAR UNA PGINA NUEVA Cuando vamos a crear una nueva pgina, habr que indicarle donde guardarla para que posteriormente podamos abrirla o actualizarla y verla como quedara en el explorador. - Pulsar en el Men Archivo - Seleccionar la opcin queremos guardar la nueva pgina para indicarle donde

- Nos aparecer una ventana en donde tendremos que seleccionar la ruta en donde queremos guardarla y el nombre por el cual la identificaremos a la pgina - Pulsar el botn de dentro de nuestra carpeta. y ya estara guardada la nueva pgina

7.2 GUARDAR UNA PGINA EXISTENTE Cuando abrimos una pgina que ya exista con anterioridad y realizamos modificaciones, a la hora de guardarla ya no tendremos que indicarle ni donde ni con que nombre. Los pasos a seguir seran estos: - Pulsar en el Men Archivo - Pulsar en el Men Abrir para abrir la pgina que tenemos guardada - Selecciona dentro la pgina que quieres abrir - Pulsar el botn de Abrir para abrir la pgina en pantalla. - Haces las modificaciones que quieras - Ahora vamos a guardar las modificaciones en este documento, para ello tienes que pulsar en el Men Archivo - Seleccionar la opcin Guardar, se guardar automticamente sin tener que escribir nada, ya que hemos guardado las modificaciones que hemos realizado sin cambiar ni el nombre ni el sitio en donde est guardada la pgina.

7.3 EJEMPLO GUIADO PASO A PASO Vamos a continuacin a crear unas pginas y carpetas para saber manejar paso a paso un poquito de kompoZer. - Pulsar en el Men Archivo - Seleccionar la opcin queremos guardar la nueva pgina - Nos aparecer la siguiente ventana: para indicarle donde

- En Guardar en tendremos que seleccionar la ruta en donde queremos guardarla, que en nuestro caso ser C:/ curso_web - En Nombre se tendr que escribir el nombre de la pgina que queremos guardarla. Por ejemplo escribir pagina_prueba1 - Pulsar el botn de dentro de nuestra carpeta. y ya estara guardada la nueva pgina

Guardar una pgina existente Cuando abrimos una pgina que ya exista con anterioridad y realizamos modificaciones, a la hora de guardarla ya no tendremos que indicarle ni donde ni con que nombre. Vamos a realizar un ejemplo para comprobar estos pasos:

- Pulsar en el Men Archivo - Pulsar en el Men Abrir para abrir la pgina que tenemos guardada - Selecciona dentro de tu carpeta que se encuentra en C:/ curso_web la pgina con el nombre de pagina_prueba1. - Pulsar el botn de Abrir para abrir la pgina en pantalla. - Escribe el siguiente texto en la pgina que acabamos de abrir: VAMOS A GUARDAR UN DOCUMENTO GUARDADO CON ANTERIORIDAD. - Ahora vamos a guardar las modificaciones en este documento, para ello tienes que pulsar en el Men Archivo - Seleccionar la opcin Guardar, se guardar automticamente sin tener que escribir nada, ya que hemos guardado las modificaciones que hemos realizado sin cambiar ni el nombre ni el sitio en donde est guardada la pgina. 8. VISTA PREVIA EN EL EXPLORADOR. 8.1 Vista previa

8.1 VISTA PREVIA Kompozer nos permite mediante la opcin visualizar vista en el explorador ver como nos quedara la pgina creada en Internet y como funcionan sus comandos una vez insertados, antes de colgarlos en Internet.

Para ello tendrs que seguir los siguientes pasos: - Teniendo abierta una pgina, la que estemos diseando, pulsar en el Men Archivo y seleccionar guardar si la pgina ya est guardada con anterioridad o guardar como si no tiene nombre ni ruta (estos puntos estn explicados detalladamente en el punto 15.1 y 15.2.) - Una vez guarda seleccionamos la opcin la pagina, pulsamos en el Men Archivo y

Tambin podremos acceder a esta opcin pulsando la tecla de funcin F5 - Nos aparecer la siguiente ventana:

La pgina aparecer tal y como quedar una vez colgada en Internet.

9. DESCARGA DE ARCHIVOS 9.1 Como descargarnos las imgenes necesarias para los ejemplos y actividades

9.1 COMO DESCARGARNOS LAS IMGENES NECESARIAS PARA LOS EJEMPLOS Y ACTIVIDADES En las actividades y en los ejemplos prcticos se requieren una serie de imgenes para su realizacin. Se puede usar cualquier imagen, siempre que su tamao no exceda los 100kbytes (se pueden usar mayores, pero la pgina tardara mucho en cargarse o abrirse) La recomendacin es descargarlas en nuestro equipo de la siguiente manera: - Tendremos que entrar en un buscador por ejemplo google.com. Escribir la siguiente URL: http://www.google.es/ - Nos aparecer la siguiente ventana:

- haga Clic sobre

- Aadir un palabra o frase correspondiente a la imagen que queremos buscar, por ejemplo:

- Pulsar en el botn

para activar la bsqueda.

- Nos aparecer una ventana, con todas las imgenes que aparezcan con este nombre:

- Seleccionar la imagen que queramos escoger, por ejemplo

- Clic sobre la imagen con el botn derecho del ratn, y se despliega el men contextual.

- Seleccionar siguiente ventana

la

opcin

nos

aparecer

la

- En Guardar en: tendremos que seleccionar la ruta en donde queramos guardarla. En nuestro caso C:/curso_web/ - En Nombre escribir el nombre por el cual vamos a identificar a la imagen. En nuestro caso lobo o lobo1 (recomendamos nombres simples y cortos)

MUY IMPORTANTE: Los nombres de las imgenes deben de cumplir las siguientes normas: Cuando guardemos nuestras imgenes, carpetas, subcarpetas y archivos deberemos tener mucho cuidado de algunos caracteres ya que pueden dar problemas a la hora de cargar la pgina web. Estos caracteres son los siguientes: - Smbolos raros como: , @, /, %, el punto(.), la coma (,), etc. - Letras maysculas - Espacios en blanco, en su caso podemos utilizar el guin bajo (_) - Tildes

no utilizar

- Pulsar el botn

para que se quede guardada la imagen.

De esta manera podremos localizar todas las imgenes que necesitemos en las actividades y los ejemplos prcticos. 10. ELEMENTOS DE TEXTO EN UNA PGINA WEB 10.1 Escribir texto 10.2 Estructura de una pgina 10.3 Modificar texto 10.3.1. Tipo de fuente 10.3.2. Tamao 10.3.3. Color 10.3.4. Estilo 10.4 Alineacin del texto 10.5 Vietas y numeracin 10.6 Sangra 10.7 Ejemplo guiado paso a paso 10.8 Autoevaluacin

10.1 ESCRIBIR TEXTO KompoZer nos permite introducir texto y modificarlo a nuestro gusto. Para ello tendremos que seguir los siguientes pasos: Nos fijamos en donde est el cursor de texto y escribiremos lo que queramos. Hay que tener en cuenta en donde se escribe el texto, esto lo

explicaremos en el apartado siguiente.

10.3 MODIFICAR TEXTO En este apartado vamos a ver como podemos modificar los formatos del texto para mejorar su presentacin. 10.3.1. Tipos de fuente. Para cambiar las fuentes vamos a explicar dos formas posibles que poder realizar esos cambios. Forma 1: - Seleccionar el texto que queremos modificar - Pulsar en el Men - Seleccionar la opcin

- Se despliega un submen con todos los estilo de fuentes en donde podremos elegir la que se quiera solo pulsando encima de la fuente elegida.

Forma 2: - Seleccionar el texto al cual vamos a cambiar el tipo de fuente. - Ir a la barra de herramientas derecha disponibles. - Pulsar en la flecha que nos aparece en la parte de la y se despliega un submen con todos los tipos de fuente

Nota aclaratoria: Se puede cambiar el tipo de fuente antes o despus de escribir el texto, la nica diferencia es que si tenemos el texto escrito tendremos que proceder a seleccionar previamente antes de cambiar el tipo de fuente.

10.3.2 Tamao Para cambiar el Tamao del texto, tendremos que pulsar en el Men Formato y seleccionar la opcin y se despliega un submen con los distintos tamaos que nos permite aplicar.

Tambin podemos acceder mediante los iconos texto aumentar texto.

disminuir

10.3.3 Color Para cambiar el color de la fuente, slo hay que seleccionar el texto y pulsar la opcin color . Se puede ver que hay dos colores, uno se refiere al texto (el ms a la izquierda y arriba) y otro al fondo (el ms abajo y a la derecha) O desde el Men Formato, y seleccionar la opcin Color del texto. Cuando pulsas encima del a opcin color se despliega un submen con gran variedad de colores. Slo tienes que hacer clic encima del que necesites y se aplicar en el texto seleccionado.

10.3.4 Estilo Esta opcin nos permite aadir estilos a la fuente que tengamos seleccionada, hay que tener en cuenta que algunos tipos de fuente son incompatibles con estas opciones, por ejemplo el tipo Monotype Cursiva, no nos permite aadir cursiva porque esta fuente es cursiva.

- Para acceder a estos estilos podemos acceder desde el Men Formato, y seleccionar la opcin varias opciones. . - Se despliega un submen en donde podremos seleccionar

- A continuacin vamos a explicar estas opciones: : nos permite aadir un grosor mayor al texto independientemente del color que tenga sta. Negrita texto seleccionado. Cursiva debajo del texto seleccionado. Subrayado nos permite poner en cursiva el

nos permite aadir subrayado

nos permite tachar algn texto, por ejemplo en los ejercicios de ingls o lenguaje, que se dice que la opcin correcta no sera esa. Tachado otro texto. Superndice , nos permite poner el texto por encima de

otro texto. Subndice

, nos permite poner el texto por debajo de

Tambin podemos acceder a algunas de estos estilos desde la barra de herramientas.

Negrita Cursiva

Subrayado

10.4 ALINEACIN DEL TEXTO KompoZer nos permite elegir la alineacin del texto segn nuestra necesidad. Para acceder a esta opcin tenemos que seguir los siguientes pasos: - Pulsar en el Men

- Se despliega un submen alineaciones que detallo a continuacin

en

donde

podremos

elegir

varias

- Alineacin Izquierda o el icono de la barra de herramientas permite alinear el texto a la izquierda.

nos

- Alineacin a la derecha o el icono de la barra de herramientas : nos permite alinear el texto a la derecha. - Alineacin centrada o el icono de la barra de herramientas nos permite alinear el texto desde el centro haca los extremos. - Alineacin justificada o el icono de la barra de herramientas nos permite alinear el texto tanto a la derecha como a la izquierda. : :

10.5 VIETAS Y NUMERACIN El programa nos permite aadir tambin, distintos tipos de vietas, numeracin - Si queremos aadir una vieta o numeracin para que el texto nos aparezca en niveles distintos, tendremos que pulsar en las opciones: Numeracin Vietas iconos, nos aparecer

Cuando pulsamos en uno de estos dos directamente la opcin de nmeros o smbolo

Si queremos seleccionar algn modelo distinto, tendremos que pulsar sobre Men Formato y seleccionar la opcin Lista.

- Sita el cursor debajo de lo que tenemos escrito sita el cursor. - Selecciona la opcin predeterminada por defecto. Vietas y nos aparecer la vieta

la

- Vamos a cambiar la vieta. Pulsar en el Men Formato y seleccionar opcin Lista. Dentro del submen que aparece pulsar en . - Nos aparecer la siguiente ventana:

- En esta ventana nos permite elegir entre un nmero limitado de estilos. Seleccionar la opcin circunferencia - Pulsar el botn

10.6 SANGRA Si queremos aumentar la sangra del texto, podremos realizarlo desde las opciones Sangrar texto y desangrar texto . Estas opciones nos permiten aadir espacios en blanco en las primeras lneas y en el resto del prrafo no. Con todas las modificaciones que hemos realizado con el texto escrito, nos debera de quedar el resultado final de la siguiente manera.

10.7 EJEMPLO GUIADO PASO A PASO


- Lo primero que vamos a hacer es crear una pgina nueva para poder ir

introduciendo texto, y guardarla con el nombre de pagina_ejemplo1

(tenga en cuenta que en realidad la pgina se guardar pagina_ejemplo1.html donde .html es la extensin de la pgina)

como

- Primero se debe abrir el programa KompoZer, luego ir al men archivo

(en la parte superior izquierda) y en el desplegable seleccionar nuevo. Se abrir una ventana en la que se debe seleccionar un documento vaco y dar al botn crear.
- Generalmente se abre una pantalla que te pregunta el ttulo que va ha

tener la pgina. Introducirs el texto: es una pgina de ejemplo y presionas ENTER


- Se despliega la ventana para guardar el archivo,

- Escribir pagina_prueba1 y seleccionar el directorio curso_web como

destino.
- Ahora

vamos a escribir el siguiente texto: ENCABEZADO DE LA PGINA, pulsar la tecla Enter y escribir RESTO DEL TEXTO EN PRRAFO
- Selecciona el texto ENCABEZADO DE LA PGINA -

Para modificar todos los formatos tendremos que acceder al Men y tendremos que ir seleccionar las distintas opciones que aparecen.

- Ahora

vamos a cambiar los formatos del texto, que sirven para predeterminar si queremos encabezados, prrafos,etc. Selecciona el texto para que ser el ENCABEZADO DE LA PGINA, para ello tenemos que pulsar en el Men Formato y seleccionar la opcin y nos aparecer un submen en donde podremos seleccionar el estilo que tendr nuestra letra, si es encabezado, prrafo, ttulo 1,

en nuestro caso vamos a seleccionar

- Seleccionar ahora, RESTO DEL TEXTO EN PRRAFO e introducirnos en el Men Formato, seleccionar la opcin Prrafo y dentro del submen que nos aparece seleccionar la opcin .

- Ahora vamos a cambiar las fuentes del texto.

- Selecciona el texto ENCABEZADO DE LA PGINAy pulsar sobre el Men Formato y seleccionar la opcin . Se despliega un submen en donde podremos seleccionar todas las fuentes de las cuales disponemos.

- Seleccionar la letra Monotype Cursiva (en caso de no disponer de esta letra, elegir otra cualquiera) Ahora vamos a cambiar la fuente del resto del texto accediendo a travs de la barra de herramientas: - Selecciona el siguiente texto, RESTO DEL TEXTO EN PRRAFO - Pulsa en la opcin . - Selecciona pulsando en la fecha fuentes de las que disponemos. para que nos aparezca todas las de la barra de herramientas

- Seleccionar la fuente Verdana (en caso de no disponer de esta letra elegir otra distinta) - Para cambiar el Tamao del texto, tendremos que pulsar en el Men Formato y seleccionar la opcin y se despliega un submen con los distintos tamaos que nos permite aplicar.

Tambin podemos acceder mediante los iconos aumentar texto.

disminuir texto

- Selecciona el encabezado, y adele el tamao extragrande - Selecciona el texto que va en prrafo y adele el tamao grande. - Para cambiar el color de la fuente, slo hay que seleccionar el texto y pulsar la opcin color .

O desde el Men Formato, y seleccionar la opcin Color del texto. Cuando pulsas encima del a opcin color se despliega un submen con gran variedad de colores. Slo tienes que hacer clic encima del que necesites y se aplicar en el texto seleccionado.

- Seleccionar el texto de encabezado y aplicar un color azul - Seleccionar el texto que va en prrafo y aplicar un color rojo. - Existen dos opciones que nos permiten modificar el texto de manera distinta a las explicadas anteriormente. - La opcin Negrita , nos permite aadir un grosor mayor al texto independientemente del color que tenga sta. - La opcin Cursiva seleccionado. - La opcin Subrayar texto seleccionado. , nos permite poner en cursiva el texto

, nos permite aadir subrayado debajo del

Tambin podemos acceder a dichas opciones desde el Men Formato, y se despliega el siguiente submen.

- Selecciona el texto de encabezado y aadir negrita y cursiva sobre l.

- Tambin nos permite modificar la alineacin del texto en la pgina. Para ello tendremos que seleccionar uno de las opciones que aparece en propiedades. Alineacin a la izquierda Alineacin a la derecha Alineacin centrada los extremos. Alineacin justificada como a la izquierda. : nos permite alinear el texto a la izquierda. : nos permite alinear el texto a la derecha.

: nos permite alinear el texto desde el centro haca : nos permite alinear el texto tanto a la derecha

Tambin podemos acceder a estas opciones desde el Men Formato, seleccionar opciones. y se despliega un submen con las siguientes

- Selecciona el texto, todo, y adele texto centrado.

- El programa nos permite aadir tambin, distintos tipos de vietas, numeracin - Si queremos aadir una vieta o numeracin para que el texto nos aparezca en niveles distintos, tendremos que pulsar en las opciones: Numeracin Vietas

Cuando pulsamos en uno de estos dos iconos, nos aparecer directamente la opcin de nmeros o smbolo Si queremos seleccionar algn modelo distinto, tendremos que pulsar sobre Men Formato y seleccionar la opcin Lista.

- Sita el cursor debajo de lo que tenemos escrito sita el cursor.

- Selecciona la opcin Vietas predeterminada por defecto.

y nos aparecer

la vieta

- Vamos a cambiar la vieta. Pulsar en el Men Formato y seleccionar la opcin Lista. Dentro del submen que aparece pulsar en . - Nos aparecer la siguiente ventana:

- En esta ventana nos permite elegir entre un nmero limitado de estilos. Seleccionar la opcin circunferencia - Pulsar el botn

- Escribir el siguiente texto: - Si queremos aumentar la sangra del texto, podremos realizarlo desde las opciones Sangrar texto y desangrar texto . Estas opciones nos permite aadir espacios en blanco en las primeras lneas y en el resto del prrafo no. Con todas las modificaciones que hemos realizado con el texto escrito, nos debera de quedar el resultado final de la siguiente manera (aproximadamente)

11. IMGENES 11.1 Insertar imgenes 11.2 Insertar texto alternativo a una imagen 11.3 Cambiar texto alternativo 11.4 Modificar tamao 11.5 Ejemplo guiado paso a paso

11.1 INSERTAR IMGENES Para que las imgenes siempre aparezcan sin ningn problema en la pgina, tienen que estar en la misma carpeta (directorio) que la pgina. Si no has descargado todava ninguna imagen, recomendamos seguir los pasos indicados en el apartado imgenes para buscar imgenes en google y descargarlas en el directorio creado para el curso: curso_web. Es conveniente disponer e al menos 3 imgenes correctamente guardadas para hacer el siguiente apartado.

Para insertar imgenes tenemos que - Pulsar en el Men Insertar

- Y seleccionar la opcin Imagen o tambin pulsando en el icono de la barra de herramientas - Se nos abrir una nueva ventana con distintas fichas, - Ficha Ubicacin:

- En Ubicacin de la imagen, tendremos que pulsar en la carpeta para indicarle la ruta en donde se encuentra las imgenes. - En La URL es relativa a la direccin de la pgina: tenemos que tener activada est opcin para que nos aparezca en pantalla la imagen. - En Texto emergente, se tendr que introducir un texto para que cuando arrastremos el puntero del ratn sobre la imagen nos aparecer este texto. - En Texto alternativo se podr introducir un texto. En caso de no haber puesto un texto emergente nos aparecera ningn texto. - Si no queremos que se vea el texto alternativo, activar la casilla Pulsar el botn los cambios. para verificar que queremos realizar

11.2 INSERTAR TEXTO ALTERNATIVO A UNA IMAGEN Dentro de la misma pantalla que hemos visto en el apartado anterior, podemos encontrar el texto alternativo. Si queremos insertar un texto alternativo a una imagen una vez que ya est insertada la imagen, tendremos que seguir los siguientes pasos: - Seleccionamos alternativo la imagen en donde vamos a insertar el texto

- Pinchar en el Men Formato y seleccionar la opcin Propiedades de una imagen

- Nos aparecer una nueva ventana igual que la explicada en el apartado anterior.

- Tendremos que poner el texto que queramos que aparezca cuando pasemos el cursor por la imagen

- En caso de no querer que aparezca el texto alternativo pulsaremos en la siguiente opcin.

- Una vez seleccionado una de las dos opciones pulsar el botn

11.3 CAMBIAR TEXTO ALTERNATIVO En caso de querer cambiar el texto alternativo que tenemos, seguiremos estos pasos: - Pulsar doble clic sobre la imagen, o pulsar en el Men Formato y seleccionar la opcin Propiedades de la imagen. - Nos aparecer el mismo cuadro que hemos explicado anteriormente. - Realizar los cambios que queramos realizar - Pulsar realizado. el botn para verificar los cambios que hemos

11.4 MODIFICAR TAMAO Se puede modificar el tamao de la imagen de dos maneras distintas. Primera manera: La manera ms fcil y rpida de modificarla es - Seleccionar la imagen - Situar el puntero del ratn en una esquina o arista, y el cursor se convierte en una flecha de doble punta. - Manteniendo pulsado el ratn arrastrar hasta que tenga el tamao deseado. Segunda manera: Pulsar doble clic sobre la imagen, o pulsar en el Men Formato y seleccionar la opcin Propiedades de la imagen. - Pulsar sobre la ficha Dimensiones - Nos aparecer una ventana con las dimensiones actuales de la imagen, que podemos modificar a nuestro gusto.
Podemos aadir el ancho y alto de la imagen a nuestro gusto. Cuando modificamos la altura se modificar automticamente la anchura, y viceversa.

- Si queremos modificar los cambios que hayamos realizado y que nos quede como el tamao real, slo tendremos que pulsar en la opcin . - Una vez modificado el tamao de la imagen pulsar el botn para verificar los cambios.

11.5 EJEMPLO GUIADO PASO A PASO Para realizar este ejemplo se deben tener varias imgenes en el directorio curso_web, el mismo donde debe estar guardada la pgina web. En el ejemplo se va a usar C:\curso_web Lo primero que vamos a hacer es abrir la pgina que tenemos guardado con el nombre de pagina_ejemplo1 para poder insertar imgenes y trabajar con ellas. Insertar Imgenes Para insertar imgenes tenemos que - Pulsar en el Men Insertar

- Y seleccionar la opcin Imagen o tambin pulsando en el icono de la barra de herramientas - Se nos abrir una nueva ventana con distintas fichas, - Ficha Ubicacin:

- En Ubicacin de la imagen, tendremos que pulsar en la carpeta para indicarle la ruta en donde se encuentra las imgenes. En nuestro caso tendremos que seleccionar C:\curso_web\ - En La URL es relativa a la direccin de la pgina: tenemos que tener activada est opcin para que nos aparezca en pantalla la imagen. - En Texto emergente, se tendr que introducir LOBO para que cuando arrastremos el puntero del ratn sobre la imagen nos aparecer este texto. - En Texto alternativo se podr introducir LOBO DE LA NOCHE. En caso de no haber puesto un texto emergente nos aparecera este texto. - Si no queremos que se vea el texto alternativo, activar la casilla - Pulsar el botn para verificar que queremos realizar los cambios. Nos quedar de la siguiente manera:

12. HIPERVNCULOS Y ENLACES 12.1 Hipervnculo absoluto 12.2 Ejemplo guiado paso a paso 12.3 Hipervnculo relativo 12.4 Ejemplo guiado paso a paso 12.5 hipervnculo anclado de texto 12.6 Ejemplo guiado paso a paso 12.7 Hipervnculo anclado con imgenes o flechas UP 12.8 Ejemplo guiado paso a paso 12.9 Hipervnculo anclado con correo electrnico 12.10 Ejemplo guiado paso a paso

12.1

HIPERVNCULO ABSOLUTO

Este hipervnculo nos permite crear un enlace desde nuestra pgina a cualquiera que se encuentre en la red. Tendr que empezar por http://www Para ello vamos a realizar los siguientes pasos: - Escribimos el texto que ser nuestro hipervnculo - Seleccionar el texto que acabamos de escribir - Pulsar en el Men Insertar y seleccionar la opcin pulsar el icono de la barra de herramientas - Nos aparecer la siguiente ventana o bien

- En Ubicacin de enlace escribimos el enlace que al pulsar sobre l nos abrir la pgina correspondiente. - Pulsar el botn para verificar los cambios realizados.

- Guardar la pgina y pulsar la tecla de funcin F5 para ver como quedara realmente nuestra pgina.

12.2

EJEMPLO GUIADO PASO A PASO

Vamos a realizar los siguientes pasos para practicar lo que acabamos de aprender. - Abrir una nueva pgina que vamos a guardar en nuestra carpeta que se encuentra en esta ruta: C:\curso_web, y vamos a guardar la pgina con el nombre de pagina_ejemplo2. - Vamos a escribir el texto Hipervnculo Absoluto - Seleccionar el texto que acabamos de escribir - Pulsar en el Men Insertar y seleccionar la opcin pulsar el icono de la barra de herramientas - Nos aparecer la siguiente ventana o bien

- En Ubicacin de enlace vamos a escribir http://www.google.es - Pulsar el botn para verificar los cambios realizados.

- Guardar la pgina y pulsar la tecla de funcin F5 para ver como quedara realmente nuestra pgina. - Clic sobre el enlace que acabamos de escribir, y se nos tendr que abrir el buscador de google.

12.3

HIPERVNCULO RELATIVO

Nos permite enlazar nuestra pgina con otra que tenemos creada dentro de nuestra carpeta o web. - Escribimos el texto correspondiente a nuestro enlace. - Selecciona el texto que acabamos de escribir - Pulsar en el Men Insertar y seleccionar la opcin pulsar el icono de la barra de herramientas - Nos aparecer esta ventana: o bien

- Pulsamos en la carpeta que aparece en la parte izquierda seleccionar la pgina con la que queremos enlazar.

, para

- Se rellena con el nombre de la pgina que queremos que se abra cuando pulsemos sobre l. - Pulsar el botn para verificar los cambios realizados.

- Guardar la pgina y pulsar la tecla de funcin F5 para ver como quedara realmente nuestra pgina. - Cuando pulsamos sobre el enlace que acabamos de crear, nos debera aparecer la pgina que tenamos creada con anterioridad.

12.4

EJEMPLO GUIADO PASO A PASO

Vamos a realizar un ejemplo para practicar lo que hemos aprendido en el apartado anterior. - Debajo de lo que hemos escrito, escribir Hipervnculo Relativo - Selecciona el texto que acabamos de escribir

- Pulsar en el Men Insertar y seleccionar la opcin pulsar el icono de la barra de herramientas - Nos aparecer esta ventana:

o bien

- Pulsamos en la carpeta que aparece en la parte izquierda , para seleccionar la pgina que tenemos guardada con el nombre de pagina_ejemplo1.html, que est guardada en C:\ curso_web - Se rellena con el nombre de la pgina que queremos que se abra cuando pulsemos sobre l. - Pulsar el botn para verificar los cambios realizados.

- Guardar la pgina y pulsar la tecla de funcin F5 para ver como quedara realmente nuestra pgina. - Cuando pulsamos sobre el enlace que acabamos de crear, nos debera aparecer la pgina que tenamos creada con anterioridad.

12.5

HIPERVNCULO ANCLADO DE TEXTO

Son los enlaces que nos permiten movernos por diferentes zonas de nuestra pgina. - Escribimos el texto que nos va a servir para movernos por la pgina - Clic sobre la opcin de Enlace Interno barra de herramientas. que se encuentra en la

otra manera de acceder a esta opcin es mediante la barra de mens.

- Clic sobre el Men Insertar

- Y seleccionar la opcin Enlace Interno

- Nos aparecer una nueva ventana para aadir el texto para identificar el nombre del enlace - Pulsar el botn - Nos aparecer el ancla para verificar el nombre y el enlace. delante del texto.

- Situar el cursor haca donde queremos que nos aparezca el texto. - Escribir el texto identificando lo que va a hacer el enlace - Seleccionar el texto que acabamos de escribir y pulsar el botn derecho sobre l. - Nos aparecer el Men Contextual

- Pulsar la opcin Crear enlace y nos aparecer la siguiente ventana.

- Escribir el texto con el smbolo almohadilla delante de l: el smbolo almohadilla (#) es para confirmar que es un enlace anclado, y el nombre que escribimos a continuacin, tiene que ser el mismo que hemos puesto en el texto alternativo del anclaje, ya que lo que queremos se identifica con este texto - Guarda la pgina con los cambios y pulsar la tecla de funcin F5

12.6

EJEMPLO GUIADO PASO A PASO

- En la misma pgina en la que estamos, sita el cursor delante del texto hipervnculo Absoluto. - Clic sobre la opcin de Enlace Interno barra de herramientas. que se encuentra en la

otra manera de acceder a esta opcin es mediante la barra de mens. - Clic sobre el Men Insertar

- Y seleccionar la opcin Enlace Interno

- Nos aparecer una nueva ventana para aadir el texto para identificar el nombre del enlace, escribir: SUBIR

- Pulsar el botn - Nos aparecer el ancla

para verificar el nombre y el enlace. delante del texto.

- Bajar con las barras de desplazamiento hasta que desaparezca el texto de la pantalla (puede que sea necesario dar a ENTER para crear ms lneas), y hacer clic para situar el curso de texto en esta zona. - Escribir el texto SUBIR - Seleccionar el texto que acabamos de escribir y pulsar el botn derecho sobre l. - Nos aparecer el Men Contextual

- Pulsar la opcin Crear enlace y nos aparecer la siguiente ventana.

- Escribir el siguiente texto #SUBIR: el smbolo almohadilla (#) es para confirmar que es un enlace anclado, y el nombre que escribimos a continuacin, tiene que ser el mismo que hemos puesto en el texto alternativo del anclaje, ya que lo que queremos que nos haga es que al pulsar en el enlace subir, nos suba directamente a donde est el ancla, al principio de la pgina.

- Guarda la pgina con los cambios y pulsar la tecla de funcin F5 - Clic sobre el enlace Subir y nos tendr que subir automticamente al inicio de la pgina, en donde habamos insertado el enlace anclado. 12.7 HIPERVNCULO ANCLADO CON IMGENES O FLECHAS UP

Se utiliza de la misma manera que el explicado anteriormente, slo que utilizaremos una imagen para que nos permita movernos por las pginas.

FLECHAS UP son imgenes de flechas, que hacen ms visual la indicacin de subir o bajar, que si se hiciese con el texto. Vamos a explicar los pasos que tendremos que seguir para su realizacin. - Situar el cursor de texto en donde queramos insertar el enlace. - Vamos a insertar el anclaje, para ello, clic sobre la opcin de Enlace Interno que se encuentra en la barra de herramientas

- Nos aparecer una nueva ventana para aadir el texto para identificar el nombre del enlace

- Bajar con la fecha de desplazamiento hasta el final de la pgina, que no se vea el contenido de la pgina. - Ahora vamos a insertar la imagen. - Clic sobre el Men Insertar

- Y seleccionar la opcin Imagen o bien pulsando en el icono de la barra de herramientas - Nos aparecer una ventana en donde tendremos que pulsar en la carpeta que aparece a la derecha de la ficha ubicacin para seleccionar la imagen que necesitamos.

- Seleccionar la imagen que nos aparecer y pulsando sobre ella nos trasladar a la parte de la hoja que hemos seleccionado con anterioridad - Pulsar en el botn - Nos aparecer una ventana para introducir el Texto Alternativo. Escribir el texto en caso de querer que aparezca. - Pulsar en el botn - Selecciona la imagen que acabamos de insertar y pulsa en botn derecho del ratn sobre la imagen para acceder al Men contextual. - Seleccionar la opcin

- Nos aparecer una nueva ventana en donde tendremos que escribir: el texto para que cuando pulsemos sobre la flecha vaya automticamente a donde hemos insertado anteriormente el anclaje, dentro de la Ficha enlace

- Guardar todos los cambios y pulsar la tecla de funcin F5.

12.8

EJEMPLO GUIADO PASO A PASO

Se utiliza de la misma manera que el explicado anteriormente, slo que utilizaremos una imagen para que nos permita movernos por las pginas. Para realizarlo debers descargarte una imagen con una flecha, para hacerlo puedes usar el buscador de google tal y como se ha indicado en apartados anteriores. Otra opcin es usar cualquier imagen y que al pulsarla se vaya a arriba. Vamos a realizar un ejemplo en donde aplicaremos este nuevo concepto. Abrir la pgina pagina_ejemplo1. Situar el cursor despus del texto escrito en el encabezado. Vamos a insertar el anclaje, para ello, clic sobre la opcin de que se encuentra en la barra de herramientas

Enlace Interno

Nos aparecer una nueva ventana para aadir el texto para identificar el nombre del enlace, escribir: SUBIR

Bajar con la fecha de desplazamiento hasta el final de la pgina, que no se vea el contenido de la pgina. Ahora vamos a insertar la imagen. Clic sobre el Men Insertar

Y seleccionar la opcin Imagen o bien pulsando en el icono de la

barra de herramientas Nos aparecer una ventana en donde tendremos que pulsar en la carpeta que aparece a la derecha de la ficha ubicacin para seleccionar la imagen que necesitamos.

En la ventana que nos aparece a continuacin tendremos que abrir la carpeta que tenemos descargada del servidor denominada imgenes_ ejemplo.

Seleccionar de la imagen flecha_subir o la imagen que vayas a usar (que se debera encontrar en C:\ curso_web\) Pulsar en el botn

Nos aparecer una ventana para introducir el Texto Alternativo. Escribir Flecha Arriba

Pulsar en el botn

Selecciona la imagen que acabamos de insertar y pulsa en botn derecho del ratn sobre la imagen para acceder al Men contextual. Seleccionar la opcin

Nos aparecer una nueva ventana en donde tendremos que escribir: #SUBIR para que cuando pulsemos sobre la flecha nos suba automticamente a donde hemos insertado anteriormente el anclaje, dentro de la Ficha enlace

Guardar todos los cambios y pulsar la tecla de funcin F5.

Clic sobre la fecha y vers como se desplaza la pgina hasta donde est visible el anclaje (el ancla no sale en esta vista, pero si el lugar donde est insertado)

12.9

HIPERVNCULO ANCLADO CON CORREO ELECTRNICO

Se utiliza igual que los anteriores enlaces, slo con la diferencia que tendremos que seleccionar la opcin para que identifique que es un correo electrnico. La manera de proceder con este enlace es exactamente igual que los anteriores. Vamos a realizar los pasos: - Situamos el cursor de texto en donde queramos insertar el enlace - Pulsar en el icono Enlace - Nos aparecer la siguiente ventana:

- Vamos a escribir en Texto de enlace - En Ubicacin del enlace escribir el e-mail de la persona. - Activar la casilla el programa reconozca es un correo electrnico. - Pulsar en el botn - Guardar la pgina y pulsar la tecla de funcin F5 para que

12.10 EJEMPLO GUIADO PASO A PASO Se utiliza igual que los anteriores enlaces, slo con la diferencia que tendremos que seleccionar la opcin para que identifique que es un correo electrnico. La manera de proceder con este enlace es exactamente igual que los anteriores. Vamos a realizar un ejemplo: - Abrir la pgina con el nombre pagina_ejemplo1 que se encuentra en C:\curso_web - Debajo de lo que tenemos escrito y pulsar en el icono Enlace - Nos aparecer la siguiente ventana:

- Vamos a escribir en Texto de enlace E-mail - En Ubicacin del enlace escribir: ejemplo@hotmail.com. - Activar la casilla el programa reconozca es un correo electrnico. - Pulsar en el botn - Guardar la pgina y pulsar la tecla de funcin F5 para que

13. ROLL OVER 13.1 Roll Over de texto 13.2 Ejemplo guiado paso a paso

13.1 ROLL OVER DE TEXTO El Roll over nos permite que al pasar por encima de un texto, ste cambie de aspecto Vamos a realizar los pasos a seguir: - Escribir un texto - Seleccionar el texto que acabamos de escribir - Pulsar el botn derecho del ratn para acceder al Men contextual

- Seleccionar la opcin - Nos aparecer la siguiente ventana nueva.

- En Texto del enlace aparecer automticamente el texto ya que lo tenamos seleccionado con anterioridad. - En ubicacin del enlace tendremos que escribir la URL la cual queremos que se abra automticamente cuando pulsemos sobre el texto. - Pulsar en el botn - Teniendo seleccionado el texto, clic en el Men Formato y seleccionar la opcin - Se abrir la siguiente pantalla:

- Vamos a modificar el vnculo con distintos colores y fuentes, tendremos que seleccionar el texto cuando est normal, cuando es un enlace, cuando es un enlace activo y cuando ha sido visitado, pinchando en los cuadrados con colores que tenemos al lado. - Si queremos que nos aparezca una imagen de fondo, tendremos que pulsar en la carpeta queremos insertar. - Pulsar el botn y especificar la ruta en donde est la imagen que para verificar que queremos los cambios.

- Guardar la pgina y pulsar la tecla F5

13.2 EJEMPLO GUIADO PASO A PASO

Vamos a realizar un ejemplo guiado para que sea ms fcil su creacin y explicacin. - Vamos a abrir, lo primero, la pgina en donde vamos a crear el roll over. sta va a ser pagina_ejemplo1. - Situarnos por debajo de la imagen del Lobo. - Escribir el siguiente texto ROLL OVER DE TEXTO - Seleccionar el texto que acabamos de escribir - Pulsar el botn derecho del ratn para acceder al Men contextual

- Seleccionar la opcin - Nos aparecer la siguiente ventana nueva.

- En Texto del enlace aparecer automticamente ROLL OVER DE TEXTO ya que lo tenamos seleccionado con anterioridad. - En ubicacin del enlace tendremos que escribir la URL la cual queremos que se abra automticamente cuando pulsemos sobre el texto. Escribir: http://www.terra.es - Pulsar en el botn - Teniendo seleccionado el texto de ROLL OVER DE TEXTO, clic en el Men Formato y seleccionar la opcin - Se abrir la siguiente pantalla:

- Vamos a modificar el vnculo con distintos colores y fuentes: - En Texto normal vamos a seleccionar un color Azul en - En Color del vnculo Seleccionar un color Rojo, tendris que pulsar . Es el color que queremos para nuestro vnculo.

- En Color de sustitucin elegir el color amarillo ya que cuando pasemos el cursor por encima de l se pondr amarillo. - En Vnculos visitados elegir un color verde manzana, para que cuando hagamos clic sobre el enlace queremos que nos cambie de color. - En Vnculo activo, elegir un color Rosa ya que cuando pulsemos este enlace, mientras se abre la ventana correspondiente, nos cambiar de color. - Si queremos que nos aparezca una imagen de fondo, tendremos que pulsar en la carpeta queremos insertar. - Pulsar el botn y especificar la ruta en donde est la imagen que para verificar que queremos los cambios.

- Guardar la pgina y pulsar la tecla F5 - Clic sobre el Roll Over de texto para ver los cambios realizados.

14. PROPIEDADES DE PGINA 14.1 Color de fondo 14.2 Color del texto 14.3 Ejemplo guiado paso a paso

14.1 COLOR DE FONDO KompoZer nos permite introducir color en el fondo y hasta una imagen para realizar una creacin ms creativa. Para ello vamos a seguir los siguientes pasos:

- Abrir la pgina en donde queremos modificar el fondo - Pulsar en el Men y seleccionar la opcin

Nos aparecer la siguiente ventana:

En

tenemos la opcin de

, si pulsamos en el

cuadro que aparece en su lnea , se desplegar una paleta de colores en donde podremos elegir el color que queremos para nuestro fondo.

La opcin imagen de fondo nos permite elegir una imagen para el fondo de pantalla, tendremos que pulsar en la carpeta que nos aparece en la parte de la derecha y se abrir una nueva ventana. Elegir la imagen que queremos utilizar como fondo y pulsar el botn de

14.2 COLOR DEL TEXTO Nos permite cambiar el texto segn el destino que tenga, es decir, si el texto es normal llevar un color, si es un enlace otro, y en caso de este ltimo podrs elegir si es un enlace visitado, activo.

Para ellos seguimos los siguientes pasos: - Abrir la pgina en donde queremos modificar el fondo - Pulsar en el Men y seleccionar la opcin

Nos aparecer la siguiente ventana

- En la opcin -

nos aparecen dos opciones:

, no nos permite usar colores diferentes segn la necesidad, pondr los que tenga el programa predeterminados. , nos permite elegir el color de la fuente segn nuestra necesidad, para ello nos fijamos en los apartados siguientes:

- Podemos seleccionar en las subcategoras que aparecen los distintos colores segn la utilizacin del texto, si es un enlace, etc slo tendremos que pulsar en (en la parte de la derecha nos aparecer el color que hemos elegido como muestra.

Una vez que hemos elegido los colores que queremos pulsar en el botn de

14.3 EJEMPLO GUIADO PASO A PASO Vamos a realizar una ejemplo guiado para repasar estas nuevas opciones.

- Lo primero que vamos a hacer es abrir la pgina que tenemos guarda en nuestra carpeta con el nombre de pagina_ejemplo1.

- Pulsar en el Men

y seleccionar la opcin

- Nos aparecer la siguiente ventana

- Vamos a modificar los colores para que quede de la siguiente manera, tendrs que pulsar en los cuadros al lado de las opciones para cambiar el color. - Texto normal de color negro - Texto de enlace de color azul - Texto enlace activo de color rojo - Texto enlace visitado de color verde - Fondo blanco

- Ahora vamos a insertar una imagen de fondo. Para ellos tendrs que pulsar en la carpeta que aparece al lado de

- Se nos abrir una nueva ventana en donde tendremos que elegir la imagen que quieras de la carpeta C:\curso_web (o donde hayas guardado la pgina)

- Pulsar en el botn de , y veremos en la parte superior de la ventana la imagen aplicada como vista previa. - Pulsar en el botn de para ver como queda en nuestra pgina.

15. LAS TABLAS 15.1 Insertar tablas 15.2 Modificar el tamao de la tabla 15.3 Ejemplo guiado paso a paso

15.1 INSERTAR TABLAS Para insertar tablas tendremos que seguir los siguientes pasos:

- Elegir donde queremos insertar la tabla - Clic sobre el Men , seleccionar la opcin y elegir

- Se nos abrir la siguiente ventana con varias fichas. - En la Ficha Rpido, se podr elegir la cantidad de columnas y filas que necesitemos, slo tendremos que pulsar en el primer cuadro con el botn izquierdo del ratn y mantenindolo pulsado arrastrar hasta que tenga la cantidad de filas y columnas que queramos.

- En la Ficha Preciso, podremos realizar la misma operacin que en la anterior ficha, pero aadiendo de forma ms precisa la cantidad de filas y columnas, as como la anchura de la tabla y los bordes de la misma.

- En la Ficha Celda podremos aadir la alineacin de las filas y columnas individualmente, as como si queremos ajustar el texto a las celdas o no, y el espacio entre celdas as como su relleno.

- Pulsar el botn

para verificar los cambios

- Nos quedar de la siguiente manera:

Para escribir dentro slo tendremos que hacer clic encima y escribir.

Las tablas nos permiten tener una manera fcil de poder hacer una maquetacin, ya que nos permite crear tablas dentro de tablas, crear enlaces, hipervnculos

15.2 MODIFICAR EL TAMAO DE LA TABLA

Si queremos modificar el tamao de la tabla slo tendremos que situar el puntero del ratn en una de las aristas, y cuando la flecha se convierte en una flecha de doble punta, manteniendo pulsado el botn izquierdo del ratn, arrastrar hasta que tenga el tamao deseado.

15.3 EJEMPLO GUIADO PASO A PASO - Clic sobre el Men , seleccionar la opcin y elegir

- Se nos abrir la siguiente ventana con varias fichas. - En la Ficha Rpido, se podr elegir la cantidad de columnas y filas que necesitemos, slo tendremos que pulsar en el primer cuadro con el botn izquierdo del ratn y mantenindolo pulsado arrastrar hasta que tenga la cantidad de filas y columnas que queramos.

En nuestro caso selecciona 2 filas y 2 columnas, como aparece en el modelo anterior. - En la Ficha Preciso, podremos realizar la misma operacin que en la anterior ficha, pero aadiendo de forma ms precisa la cantidad de filas y columnas, as como la anchura de la tabla y los bordes de la misma.

vamos a escribir filas (2), columnas (2), anchura (100%) para que se ajunte a la pgina, y bordes (2). - En la Ficha Celda podremos aadir la alineacin de las filas y columnas individualmente, as como si queremos ajustar el texto a las celdas o no, y el espacio entre celdas as como su relleno.

vamos a poner alineacin centrada tanto horizontal como vertical, pulsar ajustar en ajustar texto, en espacio entre celdas (2) y el relleno de las celdas (2) - Pulsar el botn para verificar los cambios

- Nos quedar de la siguiente manera:

- Para escribir dentro slo tendremos que hacer clic encima y escribir. Rellenar con los siguientes datos.

Las tablas nos permiten tener una manera fcil de poder hacer una maquetacin, ya que nos permite crear tablas dentro de tablas, crear enlaces, hipervnculos 16. SUBIR LA PGINA Web AL SERVIDOR 16.1 SUBIR LOS FICHEROS AL SERVIDOR/INTERNET Una vez realizada una o varias pginas webs, para que estas sean accesibles desde Internet por cualquier persona, es necesario subirlas al servidor (subirlas a Internet). Las pginas webs son ficheros iguales que los subidos en la prctica de subida de ficheros va FTP (core_ftp) por lo que se deber seguir nuevamente todos los pasos, pero en lugar de subir los ficheros del ejemplo anterior, esta vez se deben subir la pgina o pginas creadas, as como las imgenes que se usen en estas pginas. Los pasos bsicos sern: - Abrir el programa FTP, en nuestro caso core_ftp - Conectarse al servidor siguiendo los pasos del tema 8.8. - Entrar en el directorio personal, por ejemplo web0000, si no se hubiese creado, habra que crearlo. - Seleccionar los documentos (pginas webs, imgenes, ) que se vayan a subir a Internet/servidor y subirlos. - Comprobar que se accede correctamente a ellos desde Internet.

16.2 EJEMPLO GUIADO PASO A PASO

PRIMERO DEBEMOS CONECTARNOS AL ESPACIO Web o SERVIDOR: - Primero abrimos el programa Core_FTP - Tendremos que pulsar en el Men Sites

- Seleccionar en el submen que se despliega la opcin

- Se abrir la siguiente pantalla en donde tendremos que introducir los datos correspondientes, que recibimos en el email de activacin de la cuenta para poder acceder a nuestro sitio web.

Los datos correspondientes son: Site name: podemos introducir cualquier nombre Host/IP/URL: FTP Hostname Usuario: FTP Username Contrasea: FTP Password
FTP Hostname, FTP Username y FTP Password son los datos que recibimos en el email de activacin de la cuenta en el servicio de hosting 000webhost.com. Todos los pasos puede revisar en el capitulo 8.8 del manual.

- Pulsar el botn

para conectarnos al servidor.

- Nos aparecer en la parte de la derecha todos los archivos que estn a nuestra disposicin del servidor.

Una vez que estamos conectados con el servidor podemos trabajar para subir y bajar ficheros.

SUBIR LAS WEBS E IMGENES AL DIRECTORIO PERSONAL Vamos a detallar paso a paso todo lo que tendris que realizar para poder subir los ficheros que necesitis para realizar la actividad perteneciente a la tarea 2 y que posteriormente se tendr que enviar al tutor para su revisin y comprobacin de que esta actividad ha sido realizada. - Lo primero que tenemos que hacer es seleccionar la carpeta en nuestro ordenador en donde tenemos los archivos que vamos a subir. En nuestro caso sera, la unidad de disco duro o local (C:), doble clic sobre curso_Web. - Despus de este paso en la parte izquierda te debe quedar algo parecido a esto:

Ahora es necesario subir los ficheros de imgenes y pginas webs al directorio personal en el servidor que se llama con nuestro nombre de usuario y que habremos creado en la tarea de FTP. Si no existiese habra que crear en la parte derecha el directorio con el nombre de usuario correspondiente. - Como ya tendremos creado nuestro directorio (en la carpeta public_html), tenemos que buscarnos dentro del listado de la parte derecha, dentro de los directorios del servidor y pulsar doble clic encima para abrirlo. - Una vez que est abierto, vamos a proceder a subir los ficheros y las imgenes igual que se hizo con el fichero ftp.htm. - Seleccionar dentro de nuestra carpeta C:\curso_web\ los ficheros que se van a subir, en nuestro caso sern los siguientes: - flechaarriba.jpg - flechabajar.jpg - lobo1.jpg

- lobo2.jpg - lobo3.jpg - tarea2.html

- Una vez tenemos seleccionados los documentos y estamos en la parte derecha en nuestro directorio del servidor donde vamos a subir el fichero, pulsar la flecha Upload para suvir al servidor el fichero. - Nos quedar de la siguiente manera.

Ahora debemos comprobar que realmente se ha subido bien y que podemos verlo desde Internet. Para ello tenemos que abrir una ventana de Internet (por ejemplo el Internet Explorer) e introducir la URL o direccin en la que tericamente se encuentra el fichero que hemos subido.

Para comprobarlo, vamos a poner un ejemplo de lo que habra que hacer si disponemos de los siguientes ficheros:

EJEMPLO: Supongamos que el nombre de subdominio (para este ejemplo) que hemos creado sigiendo los pasos de capitulo 8.8 es: www.webdepedrogarcia.webege.com Nuestro usuario (para este ejemplo) es web0000 Los ficheros a subir son (para este ejemplo): tarea2.html

lobo1.jpg lobo2.jpg lobo3.jpg

Entonces deberamos poner lo siguiente en el navegador o explorador de Internet:

www.webdepedrogarcia.webege.com/web0000/tarea2.html
o tambin podramos poner:

http://www.webdepedrogarcia.webege.com/web0000/tare a2.html

Recuerda que en lugar de web0000 debes poner el nombre del directorio que hayas creado. Y en lugar de tarea2.html debes poner el nombre de la Web que hayas creado. Esa direccin o URL ser la que debers probar y una vez comprobado que funciona, indicrsela al tutor para superar la tarea 2.

Si no funcionase, seguramente se haya escrito algo mal o no se han subido correctamente los ficheros, recomendamos que se inicien los pasos desde cero para asegurar que se ha hecho todo correctamente.