DISEO DE PGINAS WEB

Antonio Prez Sanz

HERRAMIENTAS:
1. Microsoft Word

2. Netscape

3. Front page

4. Editores profesionales

MICROSOFT WORD

El procesador de texto Micosoft Word tiene una opcin que nos permite crear pginas HTML de forma
directa.

Pasos:

1. Crear un documento de texto en M.W.

2. Guardarlo como HTML. Men Archivo, opcin Guardar como HTML

Una vez guardado como HTML podemos trabajar con el editor HTML, que incorpora las herramientas
propias de un hipertexto:

1
 Estas herramientas nos van a permitir insertar los elementos caractersticos de una pgina web: colores
e imagen de fondo, maracadors, enlaces internos y externos, enlaces a pginas de internet, grficos,
enlaces a correo electrnico...

TRABAJO PRCTICO:
Crear una pgina similar a sta.

Elementos fundamentales:

Fondo

Ttulo

Texto

Lneas

Tablas

Grficos

Enlaces

Enlace a correo

Color del fondo

Se aconseja dar un color que facilite la lectura. Para ello en el men Formato seleccionamos la opcin
Fondo. Se nos abre una ventana como sta

2
Seleccionamos un color y aceptamos. Si elegimos Efectos de relleno tendremos fondos con grficos.
Quedan ms lcidos pero dificultan la lectura.

Ttulo y texto
Se seleccionan sus caractersticas con la opcin Fuente de Formato

3
 Lneas:

Se insertan con el botn Lnea horizontal de la barra de formato

Tablas
1 ESO 3 ESO
CONTENIDOS
2 ESO 4 ESO

Se insertan con el botn Tablas de la barra estndar.

En la ventana que se abre se seleccionan el nmero de filas, columnas y caractersticas de la tabla,

como se hace en trabajando con el el procesador de textos.

4
Grficos

Se insertan con la opcin Imagen del men Insertar. La imagen la tenemos diseada previamente y
guardada en la carpeta de trabajo del lugar en el que estamos trabajando. Si la traemos de otro sitio del
disco duro y luego queremos pasar nuestra pgina a un disquete o a un servidor el navegador no la
encontrar en el lugar especificado y nos dar un mensaje de error y no aparecer.

Enlaces

Constituyen la diferencia sustancial entre un texto y un hipertexto. Nos permiten saltar a otro lugar de la
pgina, a otra pgina propia, a una pgina de Internet o a una aplicacin o programa.

Para crear un enlace es preciso marcar un texto o una imagen. Una vez marcado
se pulsa el botn de Insertar hipervnculo de la barra standar

Se nos abre una nueva ventana en cuya parte superior tenemos que incluir la direccin de internet o la
direccin local en la que se encuantra el fichero al que queremos llegar.

Por ejemplo este es un enlace a la pgina local sevillaweb.html

5
 Los enlaces tambin pueden dirigirse a una regin concreta de la propia pgina o de otra pgina. Para
conseguirlo se utiliza la segunda ventana, la de ubicacin dentro del archivo. Esto exige que previamente
se haya definido un marcador en la misma.

MARCADOR

Se inserta marcando un punto o un texto de la pgina y activando en el men Insertar, la opcin

Marcador.

Hay que asignarle un nombre, que habitualmente coincide con el texto seleccionado.

A partir de aqu se pueden crear enlaces que vayan directamente a esta regin de la pgina.

Se utilizan cuando la pgina es muy extensa y no aparece entera en pantalla, para evitar las bsquedas
con la barra de ascensor.

Enlaces a correo
Se puede crear un enlace que nos abra el programa de correo electrnico y nos dirija un mensaje a una
direccin determinada

Para ello se opera como para crear un enlace norma, pero en lugar de una direccin se teclea:
mailto:nombre@direccion

6
Para practicar

Intenta crear una pgina similar a esta:

7
 Educacin Matemtica e Internet.
Una introduccin para profesores
Creacin de pginas web
Antonio Prez Sanz

Correo: aperez4@platea.pntic.mec.es

Pgina web: http://platea.pntic.mec.es/~aperez4

Vdeo y Matemticas Fibonacci Pginas web

Gimnasia mental
Si quieres pasar un rato entretenido, intenta iluminar todas las casillas del tablero.
Al pulsar sobre una casilla cambian de estado las que estn en contacto mediante un lado con ella.
Suerte