PDF de programación - Envío de información Servidor -> Cliente HTML - Tecnologías Web

Sistemas de
Información

Tecnologías Web
Envío de información Servidor → Cliente
HTML

Agradecimientos: esta presentación se basa parcialmente en una presentación de Jesus Villamor Lugo de IT/UCIIIM,
basada a su vez en una presentación de Juan José Gil Ríos de Terra.

1

La Web
(World Wide Web)
Fue la “aplicación avasalladora” que introdujo a Internet en la
conciencia pública
Se trata de la aplicación cliente-servidor más extendida en el mundo.

1992: 26 servidores web en el mundo
1995: 100,000 servidores web, 15 millones de usuarios
2003: millones de servidores, ~700 millones de usuarios
Los usuarios ven la red como un inmenso disco virtual

El mundo queda convertido en un gigantesco documento

hipervinculado

Características técnicas de la Web

⌧ Utiliza visualizadores Web gráficos (navegadores)
⌧ Se monta sobre la RPC de HTTP (puerto 80)
⌧ La navegación se efectúa por hipertexto (en lenguaje HTML)

• Hipertexto es el mecanismo de software que enlaza documentos con otros

documentos afines en la misma máquina o a lo largo de las redes

⌧ La convención de nombramiento por URL (Uniform Resource Locator)

2

La URL
(Uniform Resource Locator)



Ofrece un esquema de nombramiento de propósito

general
para la especificación de recursos de Internet
con el uso de una cadena de caracteres ASCII imprimibles
Se compone de 4 partes
1.
2.
3.
4.

el esquema de Protocolo (http, ftp, gopher, file)
el nombre del Dominio (ej: www.it.uc3m.es)
el número de Puerto (80, por defecto)
la vía de Acceso a un Recurso de Destino



http ://www.dirección.com :7800 /ruta/subdir/archivo.txt

3

El Modelo Cliente Servidor en la Web

HTML

Visualizador
Web

HTML

Visualizador
Web

HTTP

PC

MAC

HTTP

TCP/IP

de Internet

HTTP

Cliente

Middleware

Documentos
HTML

Servidor Web

Servidor

Envío de información Servidor → Cliente en la Web

⌧el cliente solicita un recurso (archivo) vía un URL destino
⌧el navegador envía una solicitud de HTTP al servidor
⌧el servidor procesa la solicitud y devuelve la respuesta en HTML
⌧el navegador interpreta los comandos de HTML y exhibe el

contenido de la página solicitada

4

HTML
Concepto

HTML (HyperText Markup Language)

No es un lenguaje de programación: más bien es un conjunto de etiquetas

y atributos entendidos por los navegadores de Internet

Puede usar cualquier juego de caracteres:

antes, por defecto, Latin 1 (¡no ASCII como creían muchos!)
HTML 4, por defecto Unicode; se recomienda especificarlo siempre

Editores HTML

Facilitan la escritura (la mayoría son WYSIWYG)
No siempre son perfectos

quizá necesitemos modificar etiquetas o corregir disfunciones
incluso si queremos utilizar uno, necesitaremos saber qué es lo que genera

Navegadores o visualizadores

Interpretan el formato HTML

configurables por el usuario (tamaño de fuentes, sonido, imágenes,...)
se le suele añadir plug-ins que posibilitan capacidades multimedia

5

HTML
Historia
SGML (ISO ’86)
HTML (CERN ’89), HTML+ (CERN ’93)
HTML 2.0 (IETF jul. ’94): un éxito

se añade tablas, internacionalización, descarga de ficheros (nov.

’94)

W3C (dic. ’94) une a los vendedores
se inaugura un grupo de trabajo de HTML

HTML 3.0 (W3C mar. ’95): murió sin ser aprobado
HTML 3.2 (W3C ene. ’97): un éxito (¡pero un caos!)
HTML 4.0 (W3C dic. ’97)

Transformación de HTML en XML: XHTML (ene ’00)

HTML 4.01 (W3C dic. 99): última versión

6

Documentos HTML
Proceso de Desarrollo



Fichero .html



Publicar

Fichero
.html
(Accesible)

<URL>

1.

2.

3.


navegador

Escribir el/los fichero(s)
<nombre del fichero>.html
Con cualquier editor de texto.
(Existen editores especializados como
FrontPage o Composer que ofrecen
un entorno WYSIWYG. Un editor más
profesional es el Macromedia
DreamWeaver)
Publicar el/los fichero(s) y ponerlo(s) en
un árbol de directorios accesible por tu
proveedor de internet
(Los editores especializados suelen tener
una opción de menú bajo Archivo)
Que el cliente Internet (o uno mismo)
pueda acceder a la página mediante
un navegador a través de un URL*.

http://... si remota, o
file://.. si local

•
•

Servidor

Cliente

7

HTML básico
Creación de un documento mínimo
<html>

Cabecera

Estructura de la página
entre <html> y </html>
dos partes: cabecera y cuerpo
estrictamente, debe empezar por la

declaración del DOCTYPE (SGML)

<head>
<title>Documento
html mínimo </title>
</head>
<body>
</body>

</html>

Guárdelo como MiPrimer.html y
visualícelo

Las etiquetas (tags)

Cuerpo

palabras reservadas delimitadas por

los caracteres “<” y “>”

determinan lo que se hará sobre el

texto que encierran
suelen ser duales:
<etiqueta>texto</etiqueta>
texto, p.e. <br>

existen etiquetas que no encierran

pueden tener atributos o propiedades

8

 Cursiva (italic / emphasis)

HTML básico
Formato de texto (I)
Negrita (bold / strong)
<b>...</b>
<strong>...</strong>
<i>...</i>
<em>...</em>
<font size=*>...</font>
<font color="#RRGGBB">...</font>
<br>
<!-- *** -->
<center>...</center>

Tamaño de la fuente (font size)

Color de la fuente (font color)

Salto de línea (line break)

Comentarios (comments)

Centrado (center)

En general, obsoleto: utiliza CCS

Ejercicio: acceda al editor y escriba
(http://www.it.uc3m.es/vlc/editor/):

<html>
<head>
<title>Formato de texto(I)</title>
</head>
<body>
<!—Pruebas de formato de texto-->
Texto sencillo<br>
<b>Texto en negrita</b><br>
<strong>Texto en negrita </strong><br>
<i>Texto en cursiva</i><br>
<em>Texto en cursiva</em><br>
<b><i>Texto en negrita y
cursiva</i></b><br>

<font size=“5”>texto</font>
<font color="#0000FF">en azul</font>
</body>
</html>

9

HTML básico
Formato de texto (II)

Cita (quote)

<blockquote>...</blockquote>

Texto Preformateado (preformat)

<pre>...</pre>

Subrayado (underline)

<u>...</u>

Parpadeo (blink)

<blink>...</blink>
Subíndice (subindex)

_...

Superíndice (superindex)

^...

En general, obsoleto: utiliza CCS

Ejercicio: acceda al editor y escriba
(http://www.it.uc3m.es/vlc/editor/):

<html>
<head>
<title>Formato de texto (II)</title>
</head>
<body>
Este es un texto normal SIN blockquote<br>
<blockquote> Este es un texto normal CON
blockquote</blockquote><br>
<pre> Este texto
esta
preformateado</pre><br>
<s>Texto subrayado</s><br>
_SUBINDICENormal
^SUPERINDICE<br>
</body>
</html>

10

HTML básico
Encabezados y listas

Ejercicio: acceda al editor y escriba:

Encabezados (headings)
<hn>...</hn> , n=1..6

Lista no ordenada (unordered list)

<ul>...</ul>

Lista ordenada (ordered list)

<ol>...</ol>

Elemento de la lista (list item)

<li>...</li>

Párrafo (paragraph)

<p>...</p>

Alineamiento (align) (∗)
<p align=left>...</p>
<p align=center>...</p>
<p align=right>...</p>

(∗) Obsoleto: utiliza CCS

<html>
<head>
<title>Encabezados y listas</title>
</head>
<body>
<h1>Listas</h1>
<h2>Listas NO ordenadas</h2>
<ul>
<li>Tubérculos</li>
<li>Hortalizas</li>
</ul>
<h2>Listas ordenadas</h2>
<ol>

<li>Tubérculos</li>
<li>Hortalizas</li>

</ol>
<h1>Parrafos</h1>
<p align=left>Parrafo a la izquierda</p>
<p align=center>Parrafo centrado</p>
<p align=right>Parrafo a la derecha</p>
</body>
</html>

11

HTML básico
Codificación ASCII de caracteres no ASCII

Ejercicio: acceda al editor y trate
de reproducir:

12

¿Cuáles son?

acentos: á è î ó û ....
caracteres “extraños”: ñ ¿ !
diéresis: ä ë ï ö ü

Acentos agudos: &letraacute;

p.e. &aacute; → á

p.e. &agrave; → à

Acentos graves: &letragrave;
Acentos circunflejos: &letracirc;
p.e. &acirc; → â
Dieresis: &letrauml;

p.e. &auml; → ä
Otros caracteres:

&quot; (“), &amp; (&), &lt; (<),
&gt; (>), &iexcl; (!), &reg; (®)
&ntilde; (ñ)

HTML básico
Enlaces

Constituyen la principal característica del formato HTML

gran parte de la potencia de HTML estriba en los enlaces
se pueden enlazar a partir de textos y/o imágenes

ej. el nombre de una organización que enlaza con su página Web
ej. un logotipo que enlaza a una organización

el navegador suele destacar los enlaces con color y/o subrayados

el cursor del ratón se suele cambiar cuando está encima
en la línea de estado del navegador (abajo) suele aparecer la dirección

Direcciones absolutas vs direcciones relativas

direcciones absolutas: <a href=“http://www.usa.org/ny.html”>NYC</a>
direcciones relativas: <a href=“../ny.html”>NYC</a>
conveniencia de usar direcciones relativas

más fácil de mover un grupo de documentos HTML a otro lugar

no es necesario cambiar la localización del servidor

hay que escribir menos

13

HTML básico
Etiquetas de enlace

<a href=“url”>Texto</a> donde url tiene la forma:

fichero.html
fichero.html#marca
directorios/fichero.html
dominio/directorios/..
tipo_servicio://dominio/directorios/..

<a href=“fichero.html”>Texto</a>

la página se encuentra en el mismo directorioque la que contiene la

referencia

<a href=“http://www.uc3m.es/”>Texto</a>

la página se encuentra en el primer nivel del servidor www.uc3m.es

<a href=“ht