Curso Elegante

Creacin de pginas Web
D. Jos Ramn Balsas Almagro
jrbalsas@ujaen.es
D. Juan Ruiz de Miras
demiras@ujaen.es
D. Vctor Manuel Rivas Santos
vrivas@ujaen.es
Departamento de Informtica
Universidad de Jan
Creacin de pginas WEB
1. Introduccin
1.1 Redes de ordenadores
Una red de ordenadores es un

sistema de comunicacin que
conecta ordenadores entre s
Segn su extensin se pueden
clasificar en tres tipos:
Redes de rea Local o LAN
Redes de rea
metropolitana o MAN
RIUJA
Redes de rea amplia o

WAN
RedIris
Curso de Creacin de Pginas Web - Depto. de Informtica
1.2 Rediris
1.3 Qu es Internet?
Internet es una Red de redes de ordenadores

interconectadas entre s
Los equipos que interconectan las redes se denominan
enrutadores, pasarelas (del ingls routers/gateways)
Es una red heterognea
Diferentes tecnologas de transmisin de datos

Diferentes tipos de ordenadores
Diferentes tipos de Sistemas Operativos
Sin embargo, todos los ordenadores utilizan el mismo

Red 4
lenguaje para comunicarse:
Red 2
El Protocolo TCP/IP
R
Red 1
R
R
Red 3
1.4 Acceso a Internet
Conexin para particulares
Adaptador de acceso al medio
RTC, RDSI
ADSL
Cable
LAN conectada a Internet
Modem, tarjeta ethernet, etc..
Sistema Operativo que utilice el protocolo TCP/IP

Software para acceso a servicios
Navegadores
Clientes de correo
Etc.
1.5 Direcciones IP
Todo ordenador conectado a Internet debe tener una direccin IP que

lo identifique unvocamente
Las direcciones IP son asignadas en bloques por organismos
internacionales a diferentes organizaciones y empresas
Cada organizacin distribuye las IP entre los ordenadores que posee
Estructura
Formato de una direccin IP: 150.214.178.11

Las direcciones se organizan en grupos que se asignan a cada red
conectada a Internet
Una mscara de red permite indicar cuales son las direcciones que
pertenecen a la misma red
Tipos de mscaras:
Clase A: 255.0.0.0, aprox 16777216

Clase B: 255.255.0.0, aprox 65535 direcciones IP
Clase C: 255.255.255.0, aprox 256 direcciones IP
Ejemplo:
Red: 150.214.178.0
Mscara: 255.255.255.0
Direcciones de red: 150.214.178.1-150.214.178.254
1.6 Servicios en Internet
Internet presenta una organizacin cliente/servidor
Un Servidor es un ordenador que ofrece algn servicio a otros

equipos de la red
Ejemplos de servicios
WWW
Correo
IRC
El Servidor y el Cliente utilizan un protocolo para transferir la

informacin a travs de Internet
Un Cliente es un ordenador que se conecta a un servidor para
acceder a un servicio
El Cliente debe disponer del software que utilice el protocolo
adecuado para acceder a un servicio concreto
Ejemplos de software cliente
Internet Explorer
Netscape Navigator
Outlook Express
Messenger
1.7 El servicio de nombres de

dominio
Para acceder a un ordenador debemos conocer su direccin IP

El servicio de nombres de dominio (DNS) permite asignar un nombre a
cada direccin IP
Tiene una estructura jerrquica
Dominios de
Dominios de
Dominios de
A cada IP se
primer nivel: com, net, org, es, fr, de

segundo nivel: ujaen.es, ugr.es, ibm.com
tercer o mayor nivel
le asigna un nombre dentro de un dominio concreto
www.ujaen.es 150.214.170.105
batman.ujaen.es 150.214.178.11
Los nombres de dominio son gestionados por organismos nacionales

Cada organizacin tiene su propio servidor/es de nombres de dominio
donde asigna una IP a cada una de sus mquinas
Un ordenador conectado a Internet deber conocer la direccin IP de un
servidor de nombres para que le resuelva los nombres de dominio
1.8 La World Wide Web
10
1.8 La World Wide Web
Ms conocida por WWW o Web

Servicio basado en la transferencia de documentos hipermedia a travs de Internet:
Utiliza el protocolo HTTP (Hypertext Transfer Protocol)

Los contenidos son referenciados por direcciones URL (Universal Resource Locator)
Ejemplo: http://www.ujaen.es/sci/redes/index.html
Estructura de un URL
Pginas de Hipertexto en formato HTML

Imgenes
Sonido
Aplicaciones
etc.
Protocolo:
Nombre de la mquina:
Recurso
http://
www.ujaen.es
/sci/redes/index.html
Un navegador es un programa que permite acceder a recursos en servidores Web,

descargarse documentos utilizando protocolo HTTP y mostrarlos adecuadamente
Habitualmente, los navegadores tambin soportan otros protocolos de Internet
FTP, Correo, News, etc.
11
1.9 Arquitectura del servicio WEB
http://www.ujaen.es/sci/redes/index.html
Solicitud http
1
Cliente
(navegador)
/sci/redes/index.html
6
Respuesta http
Servidor
WEB
Contenido de index.html
Nombre servidor 2
wwwdi.ujaen.es
Servidor
de nombres
(DNS)
Direccin IP
150.214.178.11
Index.html
12
1.10 El protocolo FTP
File Transfer Protocol

Es un protocolo para el envo/descarga de ficheros a
travs de Internet
A grandes rasgos, el protocolo FTP es ms adecuado
que el protocolo HTTP en los siguientes casos:
Transferencia de archivos de tamao elevado

Envo de archivos al servidor (http es utilizado
generalmente para descargas de informacin)
Suele ser el mecanismo utilizado para colocar

archivos en un servidor Web
13
1.10 El protocolo FTP
Requisitos para acceder a un servidor FTP
Cliente FTP
Nombre del servidor
Cuenta de usuario y contrasea
Directorio de trabajo
Clientes FTP
Internet Explorer
WFTP
Acceso desde Internet Explorer
ftp://<usuario>@<servidor_ftp>
El servidor nos solicitar la contrasea
Ejemplo:
ftp://paco@www4.ujaen.es/
Una vez conectados podremos crear directorios y copiar archivos

arrastrando hacia/desde la ventana de conexin
14
1.11 Servicio de pginas Web

personales de la UJA
La Universidad de Jan proporciona alojamiento Web en el

servidor
www4.ujaen.es
El contenido del Web debe ser enviado por ftp

La cuenta de usuario y la contrasea coincide con la cuenta
de correo electrnico
El directorio de trabajo es public_html
El sitio web es accesible mediante la URL
http://www4.ujaen.es/~usuario
El usuario dispone de 10MB de espacio de almacenamiento

Ms informacin
http://www.ujaen.es/sci/redes/web/hospedaje/hospedajepp.html
15
Creacin de Pginas Web
2. HTML
El lenguaje HTML
Una pgina Web es un fichero de texto
Slo es necesario un editor de texto para generarla

Posteriormente el Navegador de pginas web las
interpreta
Nombres de ficheros:
Recomendaciones: minsculas; usar solo letras y nmeros;

sin espacios en blanco (sustituir por guin bajo); no usar ees ni
caracteres acentuados.
Extension .html
Lenguaje de marcas hipertexto
Existen marcas (o etiquetas o tags) que definen

estructura y tipografa
17
2.1 Estructura Bsica
La forma ms bsica de una pgina es:
<HTML>
<HEAD>
<TITLE>El ttulo de mi pgina</TITLE>
</HEAD>
<BODY bgcolor="lightblue">
El cuerpo de mi pgina, lleno de texto, imgenes y etiquetas
</BODY>
</HTML>
Cada etiqueta suele ir cerrada por su antietiqueta

Algunas etiquetas pueden llevar atributos
que modifiquen su comportamiento
18
2.1.1 Formato de prrafo:

<P>...</P>
<HTML>
<HEAD>
<TITLE>Ejemplo de prrafo</TITLE>
</HEAD>
<BODY>
<P>
Este es el primer prrafo de nuestra pgina... qu alineacin tendr por
defecto?
</P>
<P align=right>
Este es un prrafo alineado a la derecha. Puede servir para poner la
fecha.
</P>
</BODY>
19
</HTML>
2.1.2 Formato de cabeceras:

H1, H2, H3, H4, H5, H6
<HTML>
<HEAD>
<TITLE>Ejemplo de Cabeceras</TITLE>
</HEAD>
<BODY>
<H1>Ejemplo de Cabeceras</H1>
<H2>Esta es la cabecera H2</H2>
<H3>Esta es una cabecera H3</H3>
<H2>Esto vuelve a ser una cabecera H2</H2>
<H4>Finalmente, esto es una cabecera H4</H4>
</BODY>
</HTML>
20
2.1.3 Formato de texto: <B>,

<EM>, <U>, <SUB>
<HTML>
<HEAD>
<TITLE>Ejemplo de Formato de
Texto</TITLE>
</HEAD>
<BODY>
<P>
<B>Esta frase</B> comienza
con las primeras palabras en
<B>negrita</B>. Contina con
<I>algunas palabras en
cursiva</I>, que en la mayor
parte de navegadores tambin
<EM>se puede poner
as</EM>.
</P>
<P>
Adicionalmente, <U>se puede
subrayar un texto</U> e
incluso <B><U>mezclar varios
formatos</U></B>, o ponerlo
en <SUB>subndice</SUB>
o.<SUP>superndice</SUP>
</P>
</BODY>
</HTML>
21
2.1.4 Formato de texto:

<FONT>...</FONT>
<HTML>
<HEAD>
<TITLE>Ejemplo de Formato de
Texto con FONT</TITLE>
</HEAD>
<BODY>
<P>
<FONT SIZE=+2
COLOR=blue>Ejemplo de
formato de texto usando
FONT</FONT> (Ntese que NO
produce un salto de lnea).
</P>
<P>
<FONT SIZE=-2>Se pueden
mezclar <FONT
COLOR=#ff0000>varios
font</FONT> uno dentro
de otro.</FONT>.
</P>
</BODY>
</HTML>
22
2.1.5 Salto de lnea:

<BR>, o bien, <BR/>
<HTML>
<HEAD>
<TITLE>Ejemplo de Salto de
Lnea</TITLE>
</HEAD>
<BODY>
<P>
Para provocar un salto de
lnea
no basta con escribir en la
lnea de abajo <BR>
sino que hay que utilizar la
etiqueta BR
</P>
<P>
Se puede observar que esta
etiqueta introduce un salto
ms pequeo que el de la
etiqueta P.
</P>
<hr/>
Tambin podemos utilizar una
lnea para delimitar
secciones
</BODY>
</HTML>
23
2.3 Hiperenlaces
Permiten la navegacin entre distintas

pginas web o dentro de una de ellas
<A href=enlace target=ventana>Texto o

imagen del enlace</A>
<A name=posicion>
....
<A href=#posicion>Texto de enlace</A>
24
2.3.1 Hiperenlaces externos

<HTML>
<HEAD>
<TITLE>Ejemplo de Hiperenlaces a
pginas externas</TITLE>
</HEAD>
<BODY>
<H1>Hiperenlaces a pginas
externas</H1>
<P>
A continuacin le presento algunos
enlaces por si quiere visitarlos:
</P>
<P>
<A HREF=http://www.ujaen.es
>Universidad de Jan</A><BR>
<A HREF=http://www.google.com
><IMG
SRC=logo.gif></A><BR>
<A
HREF=ejemplo_cabeceras.html>
Ejemplo de Cabeceras</A><BR>
<A
HREF=http://www.linux.org>Linu
x!</A><BR>
</P>
</BODY>
</HTML>
25
2.3.2 Hiperenlaces internos

<HTML>
<HEAD>
<TITLE>Ejemplo de Hiperenlaces a
posiciones internas</TITLE>
</HEAD>
<BODY>
<H1>Hiperenlaces a posiciones
internas</H1>
<P>
Primero defino los enlaces:
<A HREF=#1>Pos. 1</A> - <A
HREF=#2>Pos. 2</A> - <A
HREF=#3>Pos. 3</A>
</P>
Ahora las secciones:

<A NAME=1>
<P>
Esta sera la posicin 1!
</P>
<A NAME=2>
<P>
Esta sera la posicin 2!
</P>
</BODY></HTML>
26
2.4 Hojas de Estilo
Permiten definir estilos que se aplican a

prrafos o caracteres de nuestra pgina.
Primero se define el estilo, y despus se usa.
Ejemplo:
<html>
<body>
<style>
p{ color: red;
font-weight: bold}
</style>
<p>
Esto debe salir en rojo y
negrita!
</P>
</body>
</html>
Ms informacin sobre HTML y hojas de estilo en :

http://www.w3c.org
27
2.5 Tratamiento de imgenes
Capturar pantalla con Imp Pant

Abrir un editor de imgenes: Paint,
IrfanView, Photoshop o cualquier otro
Utilizar Editar Pegar
Retocar, seleccionar una parte, etc.
Guardar en formato jpg, gif o png
28
Creacin de Pginas Web
3. Microsoft FrontPage
3.- Microsoft FrontPage
Principales caractersticas de FP
Mismo entorno de trabajo que Microsoft Office

Integrado con las herramientas de Microsoft Office
Integrado con las caractersticas especiales del servidor web de Microsoft
Fcil edicin (WYSIWYG) y mantenimiento de las pginas web, tanto local
como remotamente
Buena relacin potencia/(facilidad de aprendizaje y manejo)
No es de libre distribucin
nica herramienta de diseo web con licencia en nuestra universidad
30
3.1.- Instalacin
Ir a http://www.ujaen.es/sci/invdoc/index.html (Unidad de
Investigacin y Docencia del Servicio Central de Informtica)
Seleccionar FrontPage XP
31
3.1.- Instalacin (cont.)
Pinchar aqu,
instalacin automtica
32
3.1.- Instalacin (cont.)
Ejecucin del programa: pulsar el icono
en el men Inicio
33
3.1.- Instalacin
3.1.1.- Configuracin bsica
Qu navegadores mostrarn nuestra pgina?

Qu servidor web alojar nuestra pgina?
34
3.2.- Creacin de una nueva web

3.2.1.- Importacin de web existente
1.- Dnde se va a alojar la pgina web?:
Carpeta local
URL remota (requiere extensiones servidor de FP)
35

3.2.1.- Importacin de web existente (cont.)
2.- Desde dnde se va a importar la pgina web existente?:
Carpeta local URL remota
Atencin: Derechos de autor!!

36

3.2.1.- Importacin de web existente (cont.)
3.- Importacin
37

3.2.2.- Creacin de una web vaca
Pinchar aqu
Dnde se va a alojar la
pgina?:
Carpeta local
URL remota (requiere
extensiones servidor de FP)
38

3.2.2.- Creacin de una web vaca (cont.)
39
3.3.- El entorno de trabajo
Mens y Barras de herramientas similares a las de Microsoft Office
Explorador de FP:
Opciones de visualizacin
Editor de FP:
Opciones de visualizacin
WYSIWYG
HTML
Navegador
40

3.3.1.- El explorador de FP
Interfaz para la gestin de

los elementos que
constituyen la web
Vista Carpetas
Gestin de los ficheros del

web
estilo explorador de
windows
Mover, borrar, renombrar
ficheros
y carpetas
Arrastrar carpetas o
ficheros externos que se
deseen aadir al web o
utilizar opcin
Archivo->Importar
41

3.3.1.- El explorador de FP (cont.)
Vista Hipervnculos: proporciona una perspectiva visual del sitio web,

organizado en funcin de los enlaces entre las distintas pginas
42

3.3.1.- El explorador de FP (cont.)
Vista Informes: Informacin para la administracin del sitio web
Archivos y archivos no enlazados

Hiperenlaces: correctos, rotos, externos e internos
43

3.3.1.- El editor de FP
Editor HTML WYSIWYG (What You See Is What You Get)

Estilo Microsoft Word
Edicin Normal
edicin tipo procesador de textos
44

3.3.1.- El editor de FP (cont.)
Edicin HTML
edicin HTML estilo editor de textos
45

Edicin Normal + etiquetas
Pulsar Ctrl + } desde la edicin normal
46

Vista previa
Muestra cmo se visualizar la pgina
47
3.4.- Edicin bsica de texto

3.4.1.- Ttulo
Dar ttulo a la pgina
Sobre el editor, botn derecho ratn, opcin "Propiedades de pgina"
48

3.4.2.- Encabezados
Encabezados
FP permite los 6 niveles del estndar HTML
49

3.4.3.- Fuente, tamao, color, negrita, ...
Se establecen a travs del men o de la barra de herramientas (como MS

Word)
Fuente (1)
Tamao (2)
Color (3)
Negrita (4)
Cursiva (5)
4
3
Subrayado (6)
Formato->fuente
4 5 6
50

3.4.4.- Alineacin de texto
Se establecen a travs del men o de la barra de herramientas (como MS

Word)
2
3 1
Texto centrado (1)

1
Alineacin izquierda (2)
Alineacin derecha (3)
Formato->prrafo
2
3
51

3.4.5.- Lnea horizontal
Permite separar de manera lgica el texto de una pgina
52

3.4.5.- Lnea horizontal (cont.)
Para cambiar las propiedades de la lnea, botn derecho sobre ella y elegir
"Propiedades de lnea horizontal"
Ancho y alto
Alineacin
Color
Sombreado
53
3.5.- Publicacin de la web
Servidor que aloja la web (ruta completa)
Identificacin en el servidor
54
3.5.- Publicacin de la web (cont.)
Ficheros de la web local

Ficheros de la web en el servidor
55
3.6.- Listas
Permiten organizar el texto y facilitan la lectura de la pgina

Renumeracin automtica al insertar o eliminar elementos
Tipos de listas:
listas numeradas
vietas
Procedimiento:
Marcar texto (si ya existe)

Pulsar el botn correspondiente
Introducir elemento + INTRO
2 veces INTRO para fin de lista
56
3.6.- Listas (cont.)
Anidamiento de listas:
2 veces sangra dentro del

elemento
57
3.6.- Listas (cont.)
Propiedades de las listas
Pulsar botn derecho sobre la lista o sublista y elegir "Propiedades de lista"
58
3.7.- Tablas
Muy tiles para organizar la informacin dentro de la pgina (borde=0)

Las tablas estn formadas por filas y columnas de celdas que pueden contener
cualquier elemento de informacin (texto, imgenes, listas, tablas, ...)
Insercin y manipulacin similar a MS Word
Nmero inicial de filas y columnas

Alineacin dentro de la pgina web
Ancho de tabla (cuidado con resolucin)
Tamao borde
Relleno y espaciado del borde (segn navegador)
59
3.7.- Tablas (cont.)
Propiedades de la tabla:
Pulsar botn derecho sobre la tabla y elegir "Propiedades de tabla"
60
Propiedades de la celda:
Pulsar botn derecho sobre la celda y elegir "Propiedades de celda"
61
Dividir y combinar celdas
Barra herramientas "Tablas"
62
3.8.- Hiperenlaces
Enlazan unas pginas con otras, creando una "telaraa" (web)

Asignan una URL a un texto o a una imagen
Cuando se pincha sobre el texto o la imagen se carga el destino de la URL
Creacin de un hiperenlace o hipervnculo
Seleccionar el texto o la imagen
63
3.8.- Hiperenlaces (cont.)
Propiedades del hiperenlace: botn derecho sobre el enlace y elegir

"Propiedades de hipervnculo"
64
Marcadores
Determinan posiciones dentro de una pgina

A travs de hiperenlaces se puede saltar a los marcadores
1.- Situar el cursor en el punto a marcar e Insertar el marcador
2.- Vincular el marcador a texto o imagen insertando el hipervnculo como antes
65
Insertar enlace para enviar correo electrnico
Marcar el texto o imagen del enlace e Insertar hipervnculo
66
Insertar hiperenlace a otra pgina nueva de nuestra web
Se crea la nueva pgina y se enlaza

Se aade la nueva pgina al editor (en primer o segundo plano)
67
Quitar un hiperenlace
botn derecho sobre el enlace y elegir "Propiedades de hipervnculo"

Pulsar el botn "Quitar vnculo"
68
3.9.- Insercin de imgenes
Los formatos estndar soportados por los navegadores son GIF y JPEG
Procedimiento
Situar el cursor en el punto en que se quiere insertar

Elegir opcin "Insertar" del men:
Crear una imagen titular de pgina

Imagen suministradas por terceros
Almacenada en nuestro ordenador
Adquirirla desde perifrico
Generar galera de imgenes en nuestra web
Crear un dibujo
Autoformas y wordart de MS Word
Vdeos (avi, ra, ...) (depende de plugins)
69
3.9.- Insercin de imgenes (cont.)
Insertar imagen almacenada en nuestro ordenador
Men: Insertar - Imagen - Desde archivo

Elegir la imagen
Propiedades de la imagen: pestaa "Apariencia"
botn derecho sobre la imagen y elegir "Propiedades de imagen"
Alineacin respecto al texto
Borde de la imagen
Espaciado alrededor de la imagen
Modificar tamao de visualizacin

(cuidado, imagen se carga completa!!)
70
Propiedades de la imagen: pestaa "General"
Cambiar el fichero de la imagen

Imagen a baja resolucin previa
Texto mientras se carga y al poner el ratn
Hiperenlace
71
Almacenamiento de las imgenes
Al grabar la pgina con imgenes aadidas aparecer
Cambiar el nombre
Cambiar la carpeta (dentro del web)
Sobrescribir, dejar existente o no
guardar
Opciones JPG GIF
72

3.9.1.- Color e imagen de fondo
Color e imagen de fondo
botn derecho sobre la pgina y elegir "Propiedades de pgina"
73

3.9.2.- Imgenes en listas
Los puntos de las listas pueden ser cualquier imagen
Ir a propiedades de la lista
74
3.10.- Adicin y eliminacin de

pginas al/del sitio web
Aadir una nueva pgina a la web
Ir a vista exploracin
botn derecho sobre el elemento del que "colgar" la nueva pgina
elegir "nueva..." y despus "pgina" o

elegir "agregar pgina existente"
Dobleclick para editarla
75
3.10.- Adicin y eliminacin de

pginas al/del sitio web
Eliminar una pgina del web
Ir a vista exploracin
botn derecho sobre el elemento que se quiere eliminar
elegir "eliminar"
quitar la pgina de la vista exploracin
eliminar la pgina del web
76
3.10.- Adicin y eliminacin de pginas al/del

sitio web
3.10.1.- Enlazar pginas
Insertar hiperenlace a una pgina de nuestra web
77
3.11 Estructurando una pgina

web
FrontPage dispone de diferentes

utilidades para organizar la informacin
y el formato de un sitio Web
Bordes compartidos
Inclusin de ficheros
Barras de Navegacin
Marcos
Estilos
Temas
Plantillas de pginas y sitios webs
78
3.12 Bordes compartidos
FrontPage permite definir zonas

comunes a todas o algunas
pginas de la Web
Las zonas comunes se pueden
definir en los laterales o en la parte
superior o inferior
El contenido de los bordes es
comn para todas las pginas que
los utilicen
Cada pgina puede seleccionar
qu bordes visualizar
Acceso:
Formato->Bordes Compartidos
Se suelen utilizar para colocar

barras de navegacin
79
Inclusin de ficheros
Es posible colocar el contenido de un fichero html dentro una

pgina Web sin pegar su contenido fsicamente
Ejemplos:
Un pie de pgina comn

Algn contenido que se repite en diversas pginas
A diferencia de los bordes compartidos, los ficheros incluidos se

pueden colocar en cualquier lugar de la pgina
Acceso:
Insertar-> Componentes-> Contenido Incluido -> Pgina

80
Algunos elementos tiles
Fecha de modificacin
Permite mostrar
automticamente en la
pgina la fecha en que se
modific por ltima vez el
documento
Tabla de contenidos
Muestra la estructura del

sitio web en formato
jerrquico (mapa web)
81
3.13 Exploracin de una Web
En la vista de Exploracin podemos

definir el mapa de nuestro sitio Web
El mapa define la estructura jerrquica de
acceso entre pginas
Objetivos
Conocer la estructura del sitio Web

Crear barras de contenidos de forma
automtica
Cambiar rpidamente la estructura de un sitio
web
Los enlaces se crean arrastrando los

ficheros de pginas Web sobre la ventana
de exploracin
82
3.14 Barras de navegacin
Se crean automticamente a
partir de la estructura del Web
Hay que colocarlas en zonas
comunes a todas las pginas:
encabezados, laterales, etc...
Se puede personalizar su estilo
y contenido
Acceso:
Insertar->Componente Web ->

Barras de vnculos
Propiedades para realizar
modificaciones
83
3.15 Marcos
Los marcos dividen una pgina Web en diferentes

secciones que contienen pginas Web
independientes
Son tiles si se desea que exista una zona de la
pgina que debe permanecer esttica mientras nos
desplazamos por el resto.
Ejemplo: barra de navegacin
Tienen algunas desventajas
Existen diferencias a la hora de ser tratadas por navegadores

diferentes
Presentan inconvenientes a la hora de imprimir
Mas difciles de gestionar ya que requieren construir mltiples
pginas: definicin marcos y contenidos de cada marco
84
3.15 Marcos
Utilizaremos el asistente para

crear pginas
Archivo -> Nuevo -> Pgina Web

-> Plantilla de pgina
Seleccionamos el tipo de
divisin preferido
Creamos o seleccionamos una
pgina para cada marco
Para cada marco debemos
establecer las propiedades
que definen su
comportamiento
85
3.15 Propiedades de los Marcos
Identificador para referenciar

el marco
Pgina inicial asociada
Altura y Anchura del marco
en pxeles o en porcentaje
respecto a la ventana del
navegador
Mrgenes para el contenido
Permitir cambiar el tamao
Activacin de barras de
desplazamiento
86
3.15 Acceso a los Marcos
Es posible crear un enlace que al

seleccionarlo muestre el destino en un marco
de la pgina
Al crear el enlace y asociarle la pgina,
seleccionamos la opcin marco de destino
Aqu indicamos el identificador del marco donde se

mostrar la pgina
Identificadores especiales:
_self, para el mismo marco

_top, para el rea total del navegador
_blank, en una nueva ventana del navegador
_parent, en el conjunto de marcos activo
Es posible crear una pgina para

navegadores que no sean capaces de
mostrar los marcos
87
3.16 Hojas de estilo
CSS (Cascading Style Sheets)
Permiten definir estilos de formato asociados al texto de una

pgina Web
Edicin de estilos en FrontPage
Modificacin del estilo de las etiquetas html

Creacin de estilos definidos por el usuario
Vinculacin de una pgina Web a una hoja de estilos externa
Creacin de una pgina de estilos externa

Utilizacin de hojas de estilo predefinidas
Acceso
Formato -> Estilo
88
3.16 Hojas de estilo
Los estilos definidos por el usuario

deben comenzar por un punto.
Pueden afectar a un prrafo completo o

a caracteres individuales
En un estilo es posible modificar:
Ejemplo: .TextoVerde
Fuente: tipo, color, espaciado

Prrafo: alineacin, sangra, espaciado
Borde, sombreado o imagen de fondo
Numeracin y vietas
Ubicacin del texto
Para aplicar un estilo, se marca el texto y

se selecciona el estilo desde la barra de
herramientas
89
3.16 Vinculacin de hojas de estilo
Una hoja de estilos es un

fichero que contiene
definiciones de estilo.
Tienen la extensin .css
Una pgina Web puede hacer
referencia a una pgina de
estilos externa para hacer uso
de los estilos que contiene
Se pueden vincular varias hojas
de estilo a una misma pgina
Acceso:
Formato -> Vnculos de hoja de

estilos
90
3.16 Creacin de hojas de estilo
FrontPage dispone de varias hojas de

estilo que pueden ser utilizadas
Para crear una hoja de estilo externa
se puede partir de una de las
plantillas predeterminadas
Acceso:
Una vez creada la hoja de estilo, se

pueden editar o crear nuevos estilos:
Acceso:
Archivo->Nuevo -> Plantilla de pgina

-> Hojas de estilo
Formato -> Estilo
Ejemplos de hojas de estilo
http://camaleoncss.com
http://csszengarden.com
http://realworldstyle.com
http://glish.com/css/
91
3.17 Temas
Los temas permiten cambiar de forma automtica

el aspecto global de un sitio Web
Acceso: Formato -> Tema
Permiten cambiar colores, grficos y estilos

Se pueden almacenar para posteriores usos
92
3.17 Modificando Temas
Seleccin de Colores
Grficos automatizados (ejem. Barra de navegacin)
Imagen
Fuente
Texto
Combinaciones preestablecidas
Rueda de colores
Color personalizado para cada etiqueta (ejem. <h1>)
Tipos de letra para etiquetas de formato (ejem. <h1>)
Almacenar un Tema
Permite almacenar la configuracin seleccionada con un

identificador
93
3.18 Plantillas
Plantillas de pgina
Permite crear pginas web con

formato/estilo predeterminado para
personalizar con contenidos especficos
Plantillas de sitios web
Permiten crear sitios webs completos con

estructura y formato especfico
Web personal
Web de proyecto
Galera de fotografas
Permiten generar una pgina web a partir

de un conjunto de imgenes
94
3.19 Informes
Contienen informacin sobre

diferentes aspectos del Web que
se est diseando
Nmero de archivos, Imgenes

Archivos no vinculados y vinculados
Pginas lentas
Archivos antiguos y agregados
recientemente
Hipervnculos : no comprobados,
rotos, externos, internos
Errores de componente
Tareas no completadas
Temas no utilizados
Conviene revisar los informes y

subsanar los errores encontrados
antes de publicar la Web
95
3.20 Revisin de enlaces
FrontPage permite comprobar el estado de

todos los enlaces existentes en nuestra Web
Para comprobar los enlaces se utiliza la
opcin:
Un enlace puede estar en 3 estados
Herramientas -> Actualizar Hipervnculos
Correcto, cuando existe el documento

destino
Roto, cuando no existe el documento destino
Desconocido, cuando FrontPage no ha
comprobado la existencia del documento
destino
Cuando se detecta un enlace roto, se puede

modificar haciendo una doble pulsacin
96
3.21 Revisin Ortogrfica
Es necesario asignar un lenguaje a

nuestra Web o a la pgina en
cuestin
Herramientas -> Configuracin del Web

-> Idioma
Herramientas -> Opciones de pgina ->
General
Modos de revisin ortogrfica
Mientras se escribe
Revisin de una pgina Web
Acceso: en opciones de pgina

Acceso: Herramientas -> Ortografa
Revisin del sitio Web

Corregir ms tarde, agregando pginas
con errores como tareas pendientes
97
3.22 Conversin de documentos
Las aplicaciones de Office disponen

de utilidades permiten exportar
contenidos a html
Word
Excel
Archivo->Guardar Como-> Tipo pgina

web
PowerPoint
Archivo->Guardar Como
Es conveniente seleccionar el tipo:
Pgina Web filtrada
Archivo -> Guardar Como

Dispone de un asistente (Publicar)
El cdigo html generado es

confuso y difcil de manipular
98
4. Proteccin de contenidos
Algunas opciones:
Ficheros comprimidos con clave

Directorios protegidos con clave
en servidor web
El servidor web protege con clave

aquellos directorios que tengan
configurada dicha funcionalidad en
un fichero .htaccess
Configuracin: http://www.ujaen.es/sci/redes/web/protegerdir
Contenido del fichero .

Contenido del fichero
htaccess
de claves
AuthType Basic
jrbalsas:ZaQ8Kz8Nz2A3U
AuthName Zona restringida
alumno:R9oyGPbHmSYOg
AuthUserFile
/home/username/ficheroclaves
99
require valid-user

Curso Elegante

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curso Elegante

Încărcat de

Drepturi de autor:

Formate disponibile

Creacin de pginas Web

D. Jos Ramn Balsas Almagro

D. Juan Ruiz de Miras

D. Vctor Manuel Rivas Santos

Creacin de pginas WEB

1.1 Redes de ordenadores

Una red de ordenadores es un

Redes de rea amplia o

Curso de Creacin de Pginas Web - Depto. de Informtica

Internet es una Red de redes de ordenadores

Diferentes tecnologas de transmisin de datos

Sin embargo, todos los ordenadores utilizan el mismo

Curso de Creacin de Pginas Web - Depto. de Informtica

1.4 Acceso a Internet

Conexin para particulares

Adaptador de acceso al medio

Sistema Operativo que utilice el protocolo TCP/IP

Curso de Creacin de Pginas Web - Depto. de Informtica

Todo ordenador conectado a Internet debe tener una direccin IP que

Formato de una direccin IP: 150.214.178.11

Clase A: 255.0.0.0, aprox 16777216

Curso de Creacin de Pginas Web - Depto. de Informtica

1.6 Servicios en Internet

Internet presenta una organizacin cliente/servidor

Un Servidor es un ordenador que ofrece algn servicio a otros

El Servidor y el Cliente utilizan un protocolo para transferir la

Ejemplos de software cliente

Curso de Creacin de Pginas Web - Depto. de Informtica

1.7 El servicio de nombres de

Para acceder a un ordenador debemos conocer su direccin IP

primer nivel: com, net, org, es, fr, de

Los nombres de dominio son gestionados por organismos nacionales

1.8 La World Wide Web

Curso de Creacin de Pginas Web - Depto. de Informtica

1.8 La World Wide Web

Ms conocida por WWW o Web

Utiliza el protocolo HTTP (Hypertext Transfer Protocol)

Pginas de Hipertexto en formato HTML

Un navegador es un programa que permite acceder a recursos en servidores Web,

Habitualmente, los navegadores tambin soportan otros protocolos de Internet

FTP, Correo, News, etc.

Curso de Creacin de Pginas Web - Depto. de Informtica

1.9 Arquitectura del servicio WEB

Curso de Creacin de Pginas Web - Depto. de Informtica

1.10 El protocolo FTP

File Transfer Protocol

Transferencia de archivos de tamao elevado

Suele ser el mecanismo utilizado para colocar

1.10 El protocolo FTP

Requisitos para acceder a un servidor FTP

Acceso desde Internet Explorer

Una vez conectados podremos crear directorios y copiar archivos

1.11 Servicio de pginas Web

La Universidad de Jan proporciona alojamiento Web en el

El contenido del Web debe ser enviado por ftp

El usuario dispone de 10MB de espacio de almacenamiento

Curso de Creacin de Pginas Web - Depto. de Informtica

Creacin de Pginas Web

Una pgina Web es un fichero de texto

Slo es necesario un editor de texto para generarla

Recomendaciones: minsculas; usar solo letras y nmeros;

Lenguaje de marcas hipertexto

Existen marcas (o etiquetas o tags) que definen