PDF de programación - Seminario - Creación de páginas Web

Seminario

UNIVERSIDAD DE CANTABRIA

Creación de páginas Web

Santander, mayo 2006
Michael González Harbour ([email protected])

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

1

Creación de páginas Web

UNIVERSIDAD DE CANTABRIA

1. Introducción
2. Edición de texto
3. Listas
4. Tablas
5. Imágenes
6. Referencias
7. Lenguaje HTML
8. Publicación

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

2

1. Introducción

UNIVERSIDAD DE CANTABRIA

Un documento Web consta de una o más páginas
• escritas en lenguaje html
• residen en un servidor http

El servidor http:
• Está conectado a Internet
• Bajo demanda, suministra la página al computador que la

solicita

• Le da a la página una dirección única llamada URL
• La visualización se solicita desde un programa llamado

navegador (web browser)

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

3

Introducción (cont.)

UNIVERSIDAD DE CANTABRIA

El lenguaje html permite tener en una página
• texto
• gráficos
• tablas
• formularios
• referencias a otras páginas en ese computador o en otro

No es necesario saber lenguaje html para crear páginas Web
• Existen editores sencillos de usar. Nosotros usaremos

“mozilla composer”

• Algunos procesadores de texto permiten exportar el texto a

lenguaje html

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

4

2. Edición de texto

UNIVERSIDAD DE CANTABRIA

Podemos organizar el texto en párrafos, y darle las siguientes
características:
• Tipo de párrafo:

- normal, encabezamiento, elemento de lista,...

• Tipo de letra (fuente)
• Color
• Estilo: negrita, itálica, subrayado, subíndice, superíndice
• Sangrado (izquierdo y derecho)
• Justificación (izquierda, derecha, centrado)

No debemos utilizar espacios para mover el texto. Usar los
sangrados y la justificación

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

5

Tipos de párrafo

UNIVERSIDAD DE CANTABRIA

El aspecto del texto es distinto en diferentes computadores
• Por eso es preciso elegir bien el tipo de párrafo

Encabezamientos:
• los hay de diversos niveles

Texto formateado:
• se usa para poner texto que aparecerá tal como está escrito,

con espaciado entre caracteres idéntico

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

6

3. Listas

UNIVERSIDAD DE CANTABRIA

Elementos de lista:
• podemos elegir lista de puntos, o lista enumerada
• podemos elegir el formato del punto
• podemos elegir diversos niveles de anidamiento con el

sangrado

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

7

4. Tablas

UNIVERSIDAD DE CANTABRIA

Nos permiten distribuir elementos de la página en filas y
columnas
• texto
• imágenes
• otras tablas

Podemos modificar sus propiedades:
• márgenes
• líneas
• posición (izqda, derecha, centro)
• tamaño
• etc.

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

8

5. Imágenes

UNIVERSIDAD DE CANTABRIA

Es conveniente tenerlas en el mismo directorio que la página

Se admiten los formatos GIF y JPEG

Podemos modificar sus propiedades:
• márgenes
• disposición del texto alrededor
• tamaño (original o modificado)

Podemos usar una imagen como fondo de la página
• usar sólo imágenes que den al texto mucho contraste

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

9

Buscar imágenes

UNIVERSIDAD DE CANTABRIA

Se pueden encontrar imágenes para crear páginas html en un
buscador; por ejemplo:

http://www.google.es

Para guardar en tu disco una foto que veas en la pantalla,
basta hacer “click” sobre ella con el botón derecho, y elegir
“salvar imagen” (“save image as”)

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

10

6. Referencias

UNIVERSIDAD DE CANTABRIA

Desde una página podemos hacer referencias:
• internas, a otro lugar de la misma página
• externas, a otra página en el mismo computador
• externas, a otra página en un computador cualquiera

La referencia puede asociarse a:
• texto
• una imagen

El usuario de la página puede saltar al lugar referido haciendo
“click” en el texto o imagen que tiene la referencia

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

11

Crear referencias

UNIVERSIDAD DE CANTABRIA

Referencias internas:
• Primero debe establecerse el “destino” o “target”, que es el

lugar al que se desea saltar
- se identifica con un nombre (named anchor)

• Luego, crear la referencia e indicar el destino deseado

Referencias externas en el mismo computador
• Se crean indicando el nombre del fichero

Referencias externas en otro computador
• Se crean indicando el URL completo

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

12

URL

UNIVERSIDAD DE CANTABRIA

El URL (Universal Resource Locator) de las páginas web se
forma con:
• protocolo (seguido de ://)
• nombre computador (seguido de /)
• nombre del fichero (incluidos directorios)

Por ejemplo:

http://ctrpc17.ctr.unican.es/marte.html

Protocolo

Nombre computador

Nombre fichero

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

13

7. Lenguaje HTML

UNIVERSIDAD DE CANTABRIA

Es un lenguaje de texto para representar documentos

Utiliza órdenes de comienzo y finalización, que afectan a la
forma en que el texto se muestra:
• inicio : <orden>
• fin: </orden>

La estructura es:

<html>
<head>
<title> titulo </title>...
</head>
<body>... </body>
</html>

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

14

Ejemplo

UNIVERSIDAD DE CANTABRIA

Por ejemplo, este es un documento html con dos párrafos, y
un enlace a la Universidad en el segundo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>uno-solo</title>
</head>
<body>
Este es un documento html de dos p&aacute;rrafos
<p>Este es el segundo, con un
<a href="http://www.unican.es">enlace</a>
a la universidad</body>
</html>

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

15

8. Publicación

UNIVERSIDAD DE CANTABRIA

Para publicar un documento html es preciso copiar todos los
ficheros (páginas html e imágenes) en el directorio adecuado
del servidor http

Esto se suele hacer transfiriendo los ficheros por ftp, que es
el protocolo estándar para transferir ficheros por Internet

Para arrancar el programa ftp, teclear en el intérprete de
órdenes

ftp nombre_computador

y luego dar el nombre de usuario y la palabra clave

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

16

Órdenes más habituales en ftp

UNIVERSIDAD DE CANTABRIA

Acción

cambiar de directorio remoto
cambiar de directorio local

Orden

cd directorio
lcd directorio

mostrar los ficheros del directorio

dir

traer un fichero
llevar un fichero

traer múltiples ficheros
llevar múltiples ficheros

pasar a modo texto
pasar a modo binarioa
terminar la sesión de ftp

a. Modo imprescindible para páginas Web con imágenes

get nombre-fichero
put nombre-fichero
mget nombre-comodín
mput nombre-comodín

ascii
binary

quit

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

17

Ejemplo de sesión ftp para
publicar un documento Web

UNIVERSIDAD DE CANTABRIA

Suponer:

- directorio en el que está el documento: mipagina
- dirección ftp del servidor: aulaserver
- nombre de usuario: nombre
- clave: clave
- directorio del servidor en el que queremos colgar la

página: nombre

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

18

Ejemplo de sesión ftp para
publicar un documento Web

UNIVERSIDAD DE CANTABRIA

puesto012> cd mipagina
puesto012> ftp aulaserver
username: nombre
passwd: clave
ftp> binary
ftp> cd nombre
ftp> mput *
put file xxx.html? y
put file yyy.html? y
...
ftp> dir
ftp> quit

Usa tu nombre de usuario

Para comprobar si ha ido bien

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

19

Para ver el fichero:

UNIVERSIDAD DE CANTABRIA

Escribir la dirección de internet:
http://aulaserver/alumnos/nombre/nom-pagina.html

Se puede comprobar si la transmisión ha sido correcta viendo
el directorio del servidor con “dir”

Observaciones en Windows:
• El intérprete de órdenes se obtiene ejecutando el programa
“Símbolo del Sistema” (menú de programas=>accesorios)

• la orden “mput *”debe ponerse “mput *.*”
• Acordarse de la orden “binary”

Puede encontrarse el Mozilla Suite en :
http://www.mozilla.org/products/mozilla1.x/

GRUPO DE COMPUTADORES Y TIEMPO REAL
DPTO. DE ELECTRÓNICA Y COMPUTADORES

© Michael González Harbour

18/ma/06

20