PDF de programación - Creación de páginas WEB

Creación de páginas Web

D. José Ramón Balsas Almagro

D. Juan Ruiz de Miras

[email protected]

[email protected]

D. Víctor Manuel Rivas Santos

[email protected]

Departamento de Informática

Universidad de Jaén

Creación de páginas WEB

1. Introducción

1.1 Redes de ordenadores

 Una red de ordenadores es un

sistema de comunicación que
conecta ordenadores entre sí

 Según su extensión 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 Creación de Páginas Web - Depto. de Informática

3

1.2 Rediris

Curso de Creación de Páginas Web - Depto. de Informática

4

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 inglés routers/gateways)

 Es una red heterogénea

 Diferentes tecnologías de transmisión de datos
 Diferentes tipos de ordenadores
 Diferentes tipos de Sistemas Operativos

 Sin embargo, todos los ordenadores utilizan el mismo

“lenguaje” para comunicarse:
 El Protocolo TCP/IP

R

Red 2

R

Red 4

R

Red 1

R

Red 3

Curso de Creación de Páginas Web - Depto. de Informática

5

1.4 Acceso a Internet

 Conexión para particulares

 RTC, RDSI
 ADSL
 Cable
 LAN conectada a Internet

 Adaptador de acceso al medio
 Modem, tarjeta ethernet, etc..

 Sistema Operativo que utilice el protocolo TCP/IP
 Software para acceso a servicios

 Navegadores
 Clientes de correo
 Etc.

Curso de Creación de Páginas Web - Depto. de Informática

6

1.5 Direcciones IP

 Todo ordenador conectado a Internet debe tener una dirección IP que

lo identifique unívocamente

 Las direcciones IP son asignadas en bloques por organismos

internacionales a diferentes organizaciones y empresas

 Cada organización distribuye las IP entre los ordenadores que posee
 Estructura

 Formato de una dirección IP: 150.214.178.11
 Las direcciones se organizan en grupos que se asignan a cada red

 Una máscara de red permite indicar cuales son las direcciones que

conectada a Internet

pertenecen a la misma red

 Tipos de máscaras:

 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
 Máscara: 255.255.255.0
 Direcciones de red: 150.214.178.1-150.214.178.254

Curso de Creación de Páginas Web - Depto. de Informática

7

1.6 Servicios en Internet

 Internet presenta una organización cliente/servidor

 Un Servidor es un ordenador que ofrece algún servicio a otros

equipos de la red

 Ejemplos de servicios

 WWW
 Correo
 IRC

 El Servidor y el Cliente utilizan un protocolo para transferir la

información a través 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

Curso de Creación de Páginas Web - Depto. de Informática

8

1.7 El servicio de nombres de
dominio

 Para acceder a un ordenador debemos conocer su dirección IP
 El servicio de nombres de dominio (DNS) permite asignar un nombre a

cada dirección IP

 Tiene una estructura jerárquica

 Dominios de primer nivel: com, net, org, es, fr, de
 Dominios de segundo nivel: ujaen.es, ugr.es, ibm.com
 Dominios de tercer o mayor nivel
 A cada IP se 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 organización tiene su propio servidor/es de nombres de dominio

donde asigna una IP a cada una de sus máquinas

 Un ordenador conectado a Internet deberá conocer la dirección IP de un

servidor de nombres para que le resuelva los nombres de dominio

Curso de Creación de Páginas Web - Depto. de Informática

9

1.8 La World Wide Web

Curso de Creación de Páginas Web - Depto. de Informática

10

1.8 La World Wide Web

 Más conocida por WWW o Web
 Servicio basado en la transferencia de documentos hipermedia a través de Internet:

 Páginas de Hipertexto en formato HTML



Imágenes

 Sonido
 Aplicaciones
 etc.

 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

 Protocolo:
 Nombre de la máquina:
 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 también soportan otros protocolos de Internet

 FTP, Correo, News, etc.

Curso de Creación de Páginas Web - Depto. de Informática

11

1.9 Arquitectura del servicio WEB

 http://www.ujaen.es/sci/redes/index.html

4

Solicitud http

1

Cliente

(navegador)

/sci/redes/index.html

6

Respuesta http

Servidor

WEB

Nombre servidor
wwwdi.ujaen.es

2

Servidor
de nombres

(DNS)

3

Contenido de index.html
Dirección IP
150.214.178.11

5

Index.html

Curso de Creación de Páginas Web - Depto. de Informática

12

1.10 El protocolo FTP

 File Transfer Protocol
 Es un protocolo para el envío/descarga de ficheros a

través de Internet

 A grandes rasgos, el protocolo FTP es más adecuado

que el protocolo HTTP en los siguientes casos:
 Transferencia de archivos de tamaño elevado
 Envío de archivos al servidor (http es utilizado
generalmente para descargas de información)

 Suele ser el mecanismo utilizado para colocar

archivos en un servidor Web

Curso de Creación de Páginas Web - Depto. de Informática

13

1.10 El protocolo FTP

 Requisitos para acceder a un servidor FTP

 Una vez conectados podremos crear directorios y copiar archivos

arrastrando hacia/desde la ventana de conexión

Curso de Creación de Páginas Web - Depto. de Informática

14

 Cliente FTP
 Nombre del servidor
 Cuenta de usuario y contraseña
 Directorio de trabajo

 Clientes FTP

 Internet Explorer
 WFTP

 Acceso desde Internet Explorer
 ftp://<usuario>@<servidor_ftp>
 El servidor nos solicitará la contraseña
 Ejemplo:

ftp://[email protected]/
 ftp://[email protected]/

1.11 Servicio de páginas Web
personales de la UJA

 La Universidad de Jaén proporciona alojamiento Web en el

servidor

www4.ujaen.es
www4.ujaen.es

 El contenido del Web debe ser enviado por ftp
 La cuenta de usuario y la contraseña coincide con la cuenta

de correo electrónico

 El directorio de trabajo es public_html
public_html
 El sitio web es accesible mediante la URL

http://www4.ujaen.es/~usuario
http://www4.ujaen.es/~usuario

 El usuario dispone de 10MB de espacio de almacenamiento
 Más información

http://www.ujaen.es/sci/redes/web/hospedaje/hospedajepp.html

Curso de Creación de Páginas Web - Depto. de Informática

15

Creación de Páginas Web

2. HTML

El lenguaje HTML

 Una página Web es un fichero de texto

 Sólo es necesario un editor de texto para generarla
 Posteriormente el Navegador de páginas web las

interpreta

 Nombres de ficheros:

 Recomendaciones: minúsculas; usar solo letras y números;

sin espacios en blanco (sustituir por guión bajo); no usar eñes ni
caracteres acentuados.

 Extension .html

 Lenguaje de marcas hipertexto

 Existen marcas (o etiquetas o tags) que definen

estructura y tipografía

Curso de Creación de Páginas Web - Depto. de Informática

17

2.1 Estructura Básica

 La forma más básica de una página es:
<HTML>
<HEAD>
<TITLE>El título de mi página</TITLE>
</HEAD>
<BODY bgcolor="lightblue">

El cuerpo de mi página, lleno de texto, imágenes y etiquetas

</BODY>
</HTML>
 Cada etiqueta suele ir “cerrada” por su “anti-

etiqueta”

 Algunas etiquetas pueden llevar atributos

que modifiquen su comportamiento

Curso de Creación de Páginas Web - Depto. de Informática

18

2.1.1 Formato de párrafo:
<P>...</P>

<HTML>
<HEAD>
<TITLE>Ejemplo de párrafo</TITLE>
</HEAD>
<BODY>
<P>
Este es el primer párrafo de nuestra página... ¿qué alineación tendrá por

defecto?

</P>
<P align=”right”>

Este es un párrafo alineado a la derecha. Puede servir para poner la

fecha.

</P>
</BODY>
</HTML>

Curso de Creación de Páginas Web - Depto. de Informática

19

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>

Curso de Creación de Páginas Web - Depto. de Informática

20

2.1.3 Formato de texto: <B>,
<EM>, <U>, <SUB>
<P>
Adicionalmente, <U>se puede

subrayar un texto</U> e
incluso <B><U>mezclar varios
formatos</U></B>, o ponerlo
en <SUB>subíndice</SUB>
o.<SUP>superíndice</SUP>

</P>
</BODY>
</HTML>

<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>. Continúa con
<I>algunas palabras en
cursiva</I>, que en la mayor
parte de navegadores también
<EM>se puede poner
así</EM>.

</P>

Curso de Creación de Páginas Web - Depto. de Informática

21

2.1.4 Formato de texto:
<FONT>...</FONT>

<HTML>
<HEAD>
<TITLE>Ejemplo de Formato de

Texto con FONT</TITLE>

<P>

</HEAD>
<BODY>
<P>
<FONT SIZE=”+2”

COLOR=”blue”>Ejemplo de
formato de texto usando
FONT</FONT> (Nótese que NO
produce un salto de línea).

</P>

<FONT SIZE=”-2”>Se pueden

mezclar <FONT
COLOR=”#ff0000”>varios
font</FONT> uno dentro
de otro.</FONT>.

</P>
</BODY>
</HTML>

Curso de Creación de Páginas Web - Depto. de Informática