Arquitecturas Distribuidas Contenido del tema II

Contenido del tema II
Arquitecturas Distribuidas
HTML
II.
SGML
III. CSS
I.
TEMA 2. Lenguajes y técnicas para
la representación de la información
Curso 2006/2007
Arquitecturas Distribuidas
2
1
I. HTML
2.3.1. Disposición del texto
2.3.2. Listas
2.3.3. Hiperenlaces
2.3.4. Imágenes
2.3.5. Tablas
2.4. Limitaciones del HTML 3.2
2.5. HTML 4.0
1. Introducción
1.1. Hipertexto y HTML
1.2. ¿Cómo crear páginas HTML?
1.3. Versiones de HTML
2. Lenguaje de Marcado de Hipertexto (HTML)
2.1. Etiquetas y elementos
2.2. Estructura general
2.3. HTML 3.2
2
z
Hipertexto y HTML
Hipertexto y HTML
El lenguage de hipertexto con marcas (HTML) es
el lenguaje para especificar contenidos estáticos
en las páginas web
HTML es un estándar en evolución (se desarrolla a medida que nuevas
tecnologías y herramientas están disponibles).
• HTML 1 (Berners-Lee, 1989): muy básico, integración limitada de multimedia en
1993, Moscaic añadió muchas características nuevas (por ejemplo, imágenes
integradas).
• HTML 2.0 (IETF, 1994): intentó estandarizar éstas y otras propiedades, pero más
tarde, entre 1994-96, Netscape y IE añadieron muchas nuevas (y divergentes)
funcionalidades.
ƒ HTML 3.2 (W3C, 1996): trato de unificar HTML en un único estándar, pero de nuevo
topo con características imprevistas, como applets Java y flujos de video.
ƒ HTML 4.0 (W3C, 1997): estándar actual, se diseñó para adelantarse a futuros
desarrollos del web, no solo para crear otro estándar post-industrial.
ƒ XHTML 1.0 (W3C, 2000): versión de HTML 4.01 modificada para ser compatible con
XML Æ Cambio de “forma”, pero no de “fondo”.
– El hipertexto se refiere a la propiedad de las páginas
para establecer enlaces entre si.
– El marcado indica que el texto puede ser formateado
utilizando símbolos especiales (etiquetas o tags) que
identifican la estructura y el tipo de contenido.
z
HTML = FORMATO + DATOS
Curso 2006/2007
Arquitecturas Distribuidas
5
Curso 2006/2007
Arquitecturas Distribuidas
6
3
¿Cómo crear páginas HTML?
z
Versiones de HTML
Existen muchas herramientas de “alto nivel”:
z Estudiaremos
– Microsoft FrontPage, Mozilla Composer, Macromedia
DreamWeaver, etc.
– Muchas aplicaciones poseen opción para “grabar como
HTML”, como el MS Word.
z
Mediante editores convencionales de texto:
ƒ
ƒ
ƒ
ƒ
en primer lugar HTML 3.2:
– Más sencillo que HTML 4.0
– Permite crear páginas “decorosas”
– Antes de entrar en HTML 4.0 es mejor
comprender bien las versiones anteriores.
Control a bajo nivel.
Obtención de código de otras páginas.
Páginas dinámicas: inserción de scripts.
Optimización del código.
ƒ Æ ANALOGÍA: Ensamblador ⇔ Lenguaje C
Curso 2006/2007
Arquitecturas Distribuidas
7
Curso 2006/2007
Arquitecturas Distribuidas
8
4
Etiquetas y elementos
z
Etiquetas y elementos
HTML especifica un conjunto de etiquetas que
indican como estructurar un documento:
Un elemento HTML es un objeto encerrado entre un par de
etiquetas:
<title>Mi página web</title> es un elemento TITLE
– Etiquetas van entre “< >”:
z
<b>Texto en negrita</b> es un elemento BOLD
<img src="image.gif"> Indica la presencia de una
imagen
En algunos casos, los elementos pueden contener otros
elementos:
– La mayoría de las etiquetas están apareadas: existe una
<p> Texto con parte en <b>negrita</b></p>
Es un elemento PARAGRAPH que contiene un elemento con BOLD.
etiqueta de inicio y otra de fin:
z
<title> y </title> encierran el título de una página.
Curso 2006/2007
Arquitecturas Distribuidas
9
Curso 2006/2007
Arquitecturas Distribuidas
10
5
Etiquetas y elementos
z Parámetros
Estructura general
z
de los elementos:
– Los elementos pueden tener diferentes
– DEFINICIÓN DE TIPO DE DOCUMENTO (DTD)
parámetros o “atributos” asociados.
– Su sintaxis es:
<TAG PAR1="VALOR1" PAR2="VALOR2"
Un documento HTML está formado por:
con la indicación de qué formato de HTML está siendo
utilizado en el resto del documento.
– CABECERA (HEAD) que contiene información para el
funcionamiento del navegador y de la página web.
... >
z
Ejemplo, el título para la ventana del navegador, definiciones de
estilo, código de script, etc.
– CUERPO (BODY) con los contenidos reales que se
mostrarán en la página web.
z
Curso 2006/2007
Arquitecturas Distribuidas
11
Ejemplo: texto, enlaces a otras páginas, imágenes, etc.
Curso 2006/2007
Arquitecturas Distribuidas
12
6
Estructura general
z Ejemplo:
<!doctype HTML PUBLIC “-//W3C/DTD
HTML 3.2 Final//EN”>
Estructura general
La primera línea del documento debe ser
la definición del tipo. Cualquier
documento “conforme” debe tener esa
línea.
z Ejemplo:
<!doctype HTML PUBLIC “-//W3C/DTD
HTML 3.2 Final//EN”>
<html>
<!–- Ejemplo 1 -->
<!-– Esto son comentarios -->
Documentos HTML comienzan y finalizan con
las etiquetas <html> y </html>,
respectivamente
<html>
<!–- Ejemplo 1 -->
<!-– Esto son comentarios -->
<head>
<title>Titulo de la pagina</title>
</head>
Es posible usar comentarios con <!-- y -->
<head>
<title>Titulo de la pagina</title>
</head>
<body>
Contenido de la pagina.
</body>
</html>
Curso 2006/2007
La CABECERA (HEAD) se inserta entre
<head> y </head>
La sección con el CUERPO (BODY) va entre
<body> y </body>
Arquitecturas Distribuidas
13
<body>
Contenido de la pagina.
</body>
</html>
Curso 2006/2007
Arquitecturas Distribuidas
14
7
Estructura general:
Jerarquía de los elementos del cuerpo
z
z
z
z
z
Disposición del texto
Elementos BLOQUE Æ Aquellos que provocan el
comienzo de un nuevo párrafo: <H1>...<H6>, <P>,
<LI>, etc
Elementos TEXTO Æ No provocan un nuevo
párrafo: <IMG>, <A>, <FONT>, etc.
BLOQUE formados de otros BLOQUE y TEXTO.
TEXTO sólo pueden contener otros elementos
TEXTO.
Modelo exacto depende del elemento concreto.
– ¿Cómo se define tal modelo?
Curso 2006/2007
Arquitecturas Distribuidas
<!doctype HTML PUBLIC “-//W3C/DTD
HTML 3.2 Final//EN”>
<html>
<!–- Ejemplo 2
15
– Su disposición en el documento, así
<body>
Aqui aparecería el
texto que deseemos mostrar en la
pagina web
no
importa que formato tenga
aquí, ya que el
navegador lo ignora
.
.
.
</body>
Curso 2006/2007
El CUERPO contiene
múltiples líneas de texto.
-->
<head>
<title>Titulo</title>
</head>
</html>
z
como el espaciado son ignorados por el
navegador
– Cada secuencia de espacios en blanco
es interpretada como un solo espacio.
– El navegador automáticamente corta el
texto para que encaje en el tamaño de
la ventana.
– El texto dentro del documento puede
estructurarse del modo más
conveniente, ya que no afecta a como
se representa en el navegador.
Arquitecturas Distribuidas
16
8
Cambios en la
disposición del texto
Disposición del texto
<html>
<!–- Ejemplo 3 -->
<!doctype HTML PUBLIC “-//W3C/DTD
HTML 3.2 Final//EN”>
<html>
<!–- Ejemplo 2
Cambios en la disposición:
<head>
<title>Titulo</title>
</head>
-->
ƒ Puede provocarse un salto de
línea usando la etiqueta simple
<body>
<p>
Parrafo con <br>
dos lineas
</p>
<head>
<title>Titulo</title>
</head>
<body>
Aqui aparecería el
texto que deseemos mostrar en la
pagina web
no
importa que formato tenga
aquí, ya que el
navegador lo ignora
.
.
.
</body>
</html>
<br>
<p>
Parrafo que inclye una
  SEPARACION   entre
algunas
de las palabras.
</p>
ƒ Puede crearse un nuevo
parrafo (que comience en una
nueva línea) con <p>…</p>
<p>
   Este parrafo esta
<br/>
tabulado en la primera linea
<br/>
pero no en las siguientes.
</p>
</body>
ƒ Pueden forzarse espacios en
blanco con el símbolo de
espacio “sin ruptura” (nonbreaking space):  
</html>
Curso 2006/2007
Arquitecturas Distribuidas
17
Curso 2006/2007
Arquitecturas Distribuidas
18
9
Cambios en la
disposición del texto
Separación de los
bloques de texto
<html>
<!–- Ejemplo 3 -->
<html>
<!–- Ejemplo 4 -->
<head>
<title>Titulo</title>
</head>
<head>
<title>Titulo</title>
</head>
<body>
<p>
Parrafo con <br>
dos lineas
</p>
<body>
<h1> Primer encabezado </h1>
<p>
Texto cualquiera.
</p>
<p>
Parrafo que inclye una
  SEPARACION   entre
algunas
de las palabras.
</p>
<h2> Subcabecera </h2>
<p>
Mas texto.
</p>
<p>
   Este parrafo esta
<br/>
tabulado en la primera linea
<br/>
pero no en las siguientes.
</p>
</body>
<h1> Segundo encabezado </h1>
<p> Mas texto. </p>
</body>
</html>
</html>
Curso 2006/2007
Arquitecturas Distribuidas
19
Curso 2006/2007
z
Pueden especificarse
encabezados para parrafos y
bloques de texto.
– Etiquetas <h1>…</h1>
producen
una cabecera con un formato que
donota mucha importancia (el
formato final depende del
navegador)
– <h2>…</h2> producen encabezados
de “menor importancia”.
– etc
– <h6>…</h6> producen los
encabezados de menor nivel.
Arquitecturas Distribuidas
20
10
Separación de los
bloques de texto
Separación de los
bloques de texto
<html>
<!–- Ejemplo 4 -->
<html>
<!–- Ejemplo 5 -->
<head>
<title>Titulo</title>
</head>
<head>
<title>Titulo</title>
</head>
<body>
<h1> Primer encabezado </h1>
<p>
Texto cualquiera.
</p>
<body>
<p> Texto cualquiera. </p>
z
Pueden insertarse
separaciones entre secciones:
–
<hr>
<p> Mas texto. </p>
<hr width="50%">
<h2> Subcabecera </h2>
<p>
Mas texto.
</p>
<p> Mas texto. </p>
dibuja una línea en la
pantalla
<hr width="50%"> fija el
ancho de la pantalla ocupado
<hr size=10 /> fija el grosor
de la línea de separación
– <hr>
–
<hr size="10">
</body>
<h1> Segundo encabezado </h1>
<p> Mas texto. </p>
</body>
</html>
</html>
Curso 2006/2007
Arquitecturas Distribuidas
21
Curso 2006/2007
Arquitecturas Distribuidas
22
11
Separación de los
bloques de texto
Alineación del texto
<html>
<!-- Ejemplo 6 -->
<html>
<!–- Ejemplo 5 -->
<head>
<title>Titulo</title>
</head>
<head>
<title>Titulo</title>
</head>
<body>
<h1 align="center"> Encabezado
centrado</h1>
<body>
<p> Texto cualquiera. </p>
<hr>
<p> Texto alineado a la izquierda (por
defecto) </p>
<p> Mas texto. </p>
<p align="center"> Texto centrado </p>
<hr width="50%">
<p align="right"> Texto a derechas </p>
<p> Mas texto. </p>
<div align="right">
<p> Todo el texto del </p>
<p> conjunto se alinea a </p>
<p> derechas </p>
</div>
<hr size="10">
</body>
</html>
z Es posible elegir la
alineación del texto
(por defecto alineado
a la izquierda)
– Atributo “align” de
algunos elementos.
z Un conjunto de
elementos puede
alinearse si se agrupa
en un elemento DIV:
– <div> .. </div>
</body>
</html>
Curso 2006/2007
Arquitecturas Distribuidas
23
Curso 2006/2007
Arquitecturas Distribuidas
24
12
Alineación del texto
Estilos de texto
<html>
<!-- Ejemplo 6 -->
<html>
<!–- Ejemplo 7 -->
<head>
<title>Titulo</title>
</head>
<head>
<title>Titulo</title>
</head>
<body>
<h1 align="center"> Encabezado
centrado</h1>
z ESTILOS DE TEXTO:
<body>
<p>
El texto puede ser señalado usando
<b>negrita</b>, <i>cursiva</i>, incluso
<big>haciendolo mayor</big>. <br>
<u>Subrayar</u> el texto no esta
aconsejado ya que parece un hiperenlace
<br>
La tetra de tipo fijo permite
distinguir elementos como el codigo:
<small><tt>sum = sum + i;</tt></small>
</p>
</body>
<p> Texto alineado a la izquierda (por
defecto) </p>
<p align="center"> Texto centrado </p>
<p align="right"> Texto a derechas </p>
<div align="right">
<p> Todo el texto del </p>
<p> conjunto se alinea a </p>
<p> derechas </p>
</div>
</body>
</html>
</html>
– <b>… </b>
para negrita
– <i>… </i>
para cursiva
– <u>… </u>
para
subrayados
– <tt>… </tt>
letra tipo fijo
– <big>… </big>
incrementa el tamaño
de la letra
– <small>… </small>
decrementa el tamaño de la letra
Curso 2006/2007
Arquitecturas Distribuidas
25
Curso 2006/2007
Arquitecturas Distribuidas
26
13
Estilos de texto
Estilos de texto
<html>
<!–- Ejemplo 7 -->
<html>
<!– Ejemplo 8 -->
<head>
<title>Titulo</title>
</head>
– <sub>… </sub>
<head>
<title>Titulo</title>
</head>
<body>
<p>
Los subindices<sub>1</sub>
y superindice<sup>2</sup>
pueden insertarse directamente
en el texto.
</p>
<body>
<p>
El texto puede ser señalado usando
<b>negrita</b>, <i>cursiva</i>, incluso
<big>haciendolo mayor</big>. <br>
<u>Subrayar</u> el texto no esta
aconsejado ya que parece un hiperenlace
<br>
La tetra de tipo fijo permite
distinguir elementos como el codigo:
<small><tt>sum = sum + i;</tt></small>
</p>
</body>
indica
subindice
– <sup>… </sup>
indica
superindice
<p> Para evitar efectos extraños en
el <br>
interlineado <sup>1</sup>
<sub>2</sub> <br>
suele reduccirse antes <br>
su tamaño
<small><sup>2</sup></small>.
</p>
</body>
</html>
Curso 2006/2007
</html>
Arquitecturas Distribuidas
27
Curso 2006/2007
Arquitecturas Distribuidas
28
14
Estilos de texto
Agrupaciones de texto
<html>
<!–- Ejemplo 9 -->
<html>
<!– Ejemplo 8 -->
Inserción de texto respetando
saltos de línea:
<head>
<title>Titulo</title>
</head>
<head>
<title>Titulo</title>
</head>
<pre>…</pre>
<body>
<p>
<tt><pre>
for (i = 0; i < 10; i++) {
sum = sum + i;
}
</pre></tt>
</p>
<body>
<p>
Los subindices<sub>1</sub>
y superindice<sup>2</sup>
pueden insertarse directamente
en el texto.
</p>
Útil para insertar código, por
ejemplo.
<p>
Comentario del ultimo teorema de Fermat (siglo
XVII):
<blockquote>
Es imposible dividir un cubo en suma de otros dos o
un bicuadrado en otros dos bicuadrados, en general
una potencia cualquiera superior a dos en dos
potencias del mismo grado; he descubierto una
demostración maravillosa pero en este margen es
demasiado estrecho para contenerla.
</blockquote>
</p>
</body>
<p> Para evitar efectos extraños en
el <br>
interlineado <sup>1</sup>
<sub>2</sub> <br>
suele reduccirse antes <br>
su tamaño
<small><sup>2</sup></small>.
</p>
</body>
</html>
Texto con indentación en
ambos márgenes:
<blockquote>…</blockq
uote>
Útil para insertar “citas”, por
ejemplo.
</html>
Curso 2006/2007
Arquitecturas Distribuidas
29
Curso 2006/2007
Arquitecturas Distribuidas
30
15
Agrupaciones de texto
Listas
<html>
<!–- Ejemplo 9 -->
<html>
<!-– Ejemplo 10 -->
<head>
<title>Titulo</title>
</head>
Exiten tres tipos de listas:
<head>
<title>Titulo</title>
</head>
<body>
<p>
<tt><pre>
for (i = 0; i < 10; i++) {
sum = sum + i;
}
</pre></tt>
</p>
– Listas ordenadas:
<ol>…</ol> (cada elemento
se precede por una letra o un
número)
<body>
<p>
<ol>
<li> Primer elemento
<li> Segundo elemento
<li> Este debe ser el tercero
</ol>
</p>
<li> identifica cada elemento de
la lista
z Se puede establecer el estilo y el
índice inicial.
z
<p>
Comentario del ultimo teorema de Fermat (siglo
XVII):
<blockquote>
Es imposible dividir un cubo en suma de otros dos o
un bicuadrado en otros dos bicuadrados, en general
una potencia cualquiera superior a dos en dos
potencias del mismo grado; he descubierto una
demostración maravillosa pero en este margen es
demasiado estrecho para contenerla.
</blockquote>
</p>
</body>
<p>
<dl>
<dt> HTML <dd> HyperText Markup Language
<dt> HTTP <dd> HyperText Transfer Protocol
</dl>
</p>
</body>
</html>
</html>
Curso 2006/2007
Arquitecturas Distribuidas
<ul>
<li> Texto 1
<li> Texto 2
</ul>
31
Curso 2006/2007
– Listas no ordenadas:
<ul>…</ul> (cada elemento
se precede con una señal)
z
<li> identifica cada elemento de
la lista.
– Listas de definición:
<dl>…</dl>
z
z
Arquitecturas Distribuidas
<dt> identifica cada termino
<dd> identifica su definición
32
16
Listas
Hiperenlaces
<html>
<!-– Ejemplo 10 -->
z El elemento más importante
de HTML son los hiperenlaces:
Elemento “ANCHOR”.
<html>
<!-- Ejemplo 11 -->
<head>
<title>Titulo</title>
</head>
<head>
<title>Titulo</title>
</head>
<body>
<p>
<ol>
<li> Primer elemento
<li> Segundo elemento
<li> Este debe ser el tercero
</ol>
</p>
– <a href="URL">…</a>
<body>
<p>
<a href="http://www.upct.es">
Universidad Politecnica de
Cartagena</a>
<br>
<a href="http://www.teleco.upct.es">
ETT Telemática</a>
<br>
</p>
</body>
<ul>
<li> Texto 1
<li> Texto 2
</ul>
<p>
<dl>
<dt> HTML <dd> HyperText Markup Language
<dt> HTTP <dd> HyperText Transfer Protocol
</dl>
</p>
</body>
URL indica la página con la que se
enlaza esta “ancla”
z
Si se accede vía protocolo HTTP debe
comenzar con “http://”
z
Sino, el navegador supone que se
accede usando el “site” del que se
descargó la página.
z
</html>
</html>
Curso 2006/2007
Arquitecturas Distribuidas
33
Curso 2006/2007
Arquitecturas Distribuidas
34
17
Hiperenlaces
Hiperenlaces
<head>
<title>Titulo</title>
</head>
<head>
<title>Titulo</title>
</head>
<body>
<p align="center">
[ <a href="#HTML">HTML</a> |
<a href="#HTTP">HTTP</a> |
<a href="#IP">IP</a> |
<a href="#TCP">TCP</a> ]
</p>
<p>
Acronimos:
<dl>
<a name="HTML"></a><dt>HTML
<dd>HyperText Markup Language
<a name="HTTP"></a><dt>HTTP
<dd>HyperText Transfer Protocol
<a name="IP"></a><dt>IP
<dd>Internet Protocol
<a name="TCP"></a><dt>TCP
<dd>Transfer Control Protocol
</p>
</body>
</html>
<body>
<p>
<a href="http://www.upct.es">
Universidad Politecnica de
Cartagena</a>
<br>
<a href="http://www.teleco.upct.es">
ETT Telemática</a>
<br>
</p>
</body>
</html>
Curso 2006/2007
z Es también posible referenciar
partes del mismo documento con
un hiperenlace:
<html>
<!-- Ejemplo 12 -->
<html>
<!-- Ejemplo 11 -->
Arquitecturas Distribuidas
35
Curso 2006/2007
– <a name=“parte1">…</a>
donde “parte1” es el identificador de la
zona.
z
– <a href="#parte1">…</a>
z
Salta a la zona “parte1” de este documento.
– <a href="URL#parte">…</a>
Salta hasta la zona de la página identificada
por la URL dada.
z
Arquitecturas Distribuidas
36
18
Hiperenlaces
Imágenes
<html>
<!-- Ejemplo 12 -->
<head>
<title>Titulo</title>
</head>
<body>
<p align="center">
[ <a href="#HTML">HTML</a> |
<a href="#HTTP">HTTP</a> |
<a href="#IP">IP</a> |
<a href="#TCP">TCP</a> ]
</p>
<p>
Acronimos:
<dl>
<a name="HTML"></a><dt>HTML
<dd>HyperText Markup Language
<a name="HTTP"></a><dt>HTTP
<dd>HyperText Transfer Protocol
<a name="IP"></a><dt>IP
<dd>Internet Protocol
<a name="TCP"></a><dt>TCP
<dd>Transfer Control Protocol
</p>
</body>
</html>
Curso 2006/2007
Para incluir una imagen se usa el
elemento IMG:
<html>
<!-- Ejemplo 13 -->
<head>
<title>Titulo</title>
</head>
Arquitecturas Distribuidas
<body>
<div align="center">
<img
src="http://www.upct.es/images/logocali
dad.jpg" alt="Universidad Politecnica
de Cartagena">
<p>Prueba de imagen</p>
</div>
</body>
</html>
- Por defecto, todos los
navegadores soportan .jpg y
.gif.
-Para visualizar otros tipos
puede ser necesario un plugin.
<img src="filename"
alt="texto
alternativo">
La imagen se identifica con su
URL.
z
37
Curso 2006/2007
Arquitecturas Distribuidas
38
19
Imágenes
Tablas
<html>
<!-- Ejemplo 13 -->
<html>
<!-- Ejemplo 14 -->
<head>
<title>Titulo</title>
</head>
<head>
<title>Titulo</title>
</head>
<body>
<div align="center">
<img
src="http://www.upct.es/images/logocali
dad.jpg" alt="Universidad Politecnica
de Cartagena">
<p>Prueba de imagen</p>
</div>
</body>
</html>
Curso 2006/2007
Arquitecturas Distribuidas
<body>
<table>
<tr>
<td>foo</td> <td>bar</td>
</tr>
<tr>
<td>biz</td> <td>baz</td>
</tr>
</table>
</body>
</html>
39
Curso 2006/2007
z
Se utilizan para presentar de
forma ordenada colecciones
complejas de objetos
– Una tabla divide los objetos en
“filas” y “columnas”.
– Por defecto, el alineado de las
columnas es a la derecha (si bien,
puede cambiarse)
<table>…</table> indica un elemento
tabla
<tr>…</tr> indica una fila (row)
<td>…</td> indica un dato de la tabla,
es decir, cada una de las columnas de la
tabla.
Arquitecturas Distribuidas
40
20
Tablas
Disposición de la tabla
<html>
<!-- Ejemplo 15 -->
<html>
<!-- Ejemplo 14 -->
<head>
<title>Titulo</title>
</head>
<head>
<title>Titulo</title>
</head>
<body>
<table border=1>
<tr align="center">
<td>foo<br>foo</td>
<td valign="top">bar</td>
</tr>
<tr>
<td>bizbiz</td>
<td>booboo</td>
</tr>
</table>
</body>
</html>
<body>
<table>
<tr>
<td>foo</td> <td>bar</td>
</tr>
<tr>
<td>biz</td> <td>baz</td>
</tr>
</table>
</body>
</html>
Curso 2006/2007
Arquitecturas Distribuidas
41
Curso 2006/2007
Usando el atributo BORDER puede
indicarse que aparezca un borde:
<table border=1>
Si se incrementa el número el borde se
hará más grueso
El formato horizontal y vertical
puede cambiarse para cada “celda”:
<td
<td
<td
<td
align="center">
align="right">
valign="top">
valign="bottom">
O bien, para cada fila:
<tr align="center">
<tr valign="top">
Arquitecturas Distribuidas
42
21
Disposición de la tabla
Disposición de la tabla
<html>
<!-- Ejemplo 15 -->
<head>
<title>Titulo</title>
</head>
<head>
<title>Titulo</title>
</head>
<body>
<table border=1>
<tr align="center">
<td>foo<br>foo</td>
<td valign="top">bar</td>
</tr>
<tr>
<td>bizbiz</td>
<td>booboo</td>
</tr>
</table>
</body>
</html>
Curso 2006/2007
Por defecto, el navegador
escoge el tamaño de la tabla
para que encajen todos los
elementos.
<html>
<!-– Ejemplo 16 -->
<body>
<table width="100%">
<tr>
<td>A la izquierda
<td align="right">a la
derecha</td>
</tr>
</table>
</body>
</html>
Arquitecturas Distribuidas
43
Curso 2006/2007
Sin embargo, puede
escogerse el tamaño de la
tabla en proporción al ancho
de la página:
<table width="60%">
Arquitecturas Distribuidas
44
22
Disposición de la tabla
Otras opciones para tablas
<html>
<!– Ejemplo 17 -->
<html>
<!-– Ejemplo 16 -->
<head>
<title>Titulo</title>
</head>
<head>
<title>Titulo</title>
</head>
<body>
<table border=1
cellspacing=4 cellpadding=8>
<tr> <th>CABECERA1</th>
<th>CABECERA2</th>
<th>CABECERA3</th>
</tr>
<tr>
<td>uno</td> <td>dos</td> <td>tres</td>
</tr>
<tr>
<td rowspan=2 align="center"> cuatro
</td>
<td colspan=2 align="center"> cinco
</td>
</tr>
<tr>
<td> seis </td> <td> siete </td>
</tr>
</table>
</body>
</html>
<body>
<table width="100%">
<tr>
<td>A la izquierda
<td align="right">a la
derecha</td>
</tr>
</table>
</body>
</html>
Curso 2006/2007
Es posible controlar el espacio
entre “celdas” y los márgenes
dentro de ellas:
Arquitecturas Distribuidas
45
Curso 2006/2007
<table cellspacing=5>
<table cellpadding=5>
Añadir cabeceras:
<th> es parecido a <td> pero muestra
el contenido centrado y en negrita
Datos que ocupan más de una
columna:
<td colspan=2>
O más de una fila:
<td rowspan=2>
Arquitecturas Distribuidas
46
23
Otras opciones para tablas
Limitaciones de HTML 3.2
<html>
<!– Ejemplo 17 -->
z
<head>
<title>Titulo</title>
</head>
– Dificulta la actualización e inserción de contenidos.
– Dificulta la selección de un formato determinado, y
<body>
<table border=1
cellspacing=4 cellpadding=8>
<tr> <th>CABECERA1</th>
<th>CABECERA2</th>
<th>CABECERA3</th>
</tr>
<tr>
<td>uno</td> <td>dos</td> <td>tres</td>
</tr>
<tr>
<td rowspan=2 align="center"> cuatro
</td>
<td colspan=2 align="center"> cinco
</td>
</tr>
<tr>
<td> seis </td> <td> siete </td>
</tr>
</table>
</body>
</html>
Curso 2006/2007
Arquitecturas Distribuidas
Contenido y formato están entrelazados
sobre todo, su cambio.
– En ocasiones (ej. páginas empresas) todas las páginas
deben adoptar un mismo formato: con HTML 3.2 esto
resulta tedioso y obliga a la modificación de todas las
páginas.
z
47
Solución Æ EL FORMATO DEBE DEFINIRSE
INDEPENDIENTEMENTE Æ HOJAS DE
ESTILO
Curso 2006/2007
Arquitecturas Distribuidas
48
24
Limitaciones de HTML 3.2
z
Limitaciones de HTML 3.2
Contenido estático.
– HTML per se sólo permite definir contenidos estáticos.
Esto no es conveniente si:
z
z
z
z
Solución Æ INSERCIÓN POR PROGRAMA DE
HTML Æ VÍA APLICACIONES EXTERNAS, O
BIEN USANDO LENGUAJES DE SCRIPT EN
EL SERVIDOR.
Arquitecturas Distribuidas
Formato restrictivo:
– En ocasiones, se requiere un formato mucho más
preciso (representaciones especiales), elegante
(publicidad), etc.
– Por si mismo, HTML no posee la suficiente
flexibilidad, y los diseñadores recurrían a técnicas
como:
La página sufre modificaciones frecuentes (ej: www con
valores bursátiles).
Se desea realizar páginas personalizadas (ej: publicidad
asociada al cliente que visita la página)
Etc.
Curso 2006/2007
z
49
z
z
z
z
Imágenes invisibles para ajustar contenidos.
Texto dentro de imágenes para fuentes, colores o tamaños
especiales.
Contenidos insertados en tablas para su ajuste.
Etc.
Curso 2006/2007
Arquitecturas Distribuidas
50
25
Limitaciones de HTML 3.2
Limitaciones de HTML 3.2
Æ NUEVOS ELEMENTOS Y
UTILIZACIÓN EXHAUSTIVA DE
HOJAS DE ESTILO CON MÚLTITUD DE
PROPIEDADES Æ HTML 4.0X, CSS1,
CSS2.
z Solución
z Faltan
funcionalidades desde el punto de
vista del usuario:
– Puesto que el protocolo HTTP es “sin estado”,
no era posible realizar aplicaciones tipo “carrito
de la compra”, y muchas otras, que requerían
información de qué había realizado el cliente.
z
Curso 2006/2007
Arquitecturas Distribuidas
51
SOLUCIÓN Æ EXTENSIÓN DE HTTP Y
NAVEGADORES Æ COOKIES.
Curso 2006/2007
Arquitecturas Distribuidas
52
26
Limitaciones de HTML 3.2
HTML 4.0
– Las páginas deben ser más que simple información:
z
z
z
Aplicaciones empotradas en WWW para tareas interactivas
con los usuarios, y con la ventaja de ser sistemas universales
(como web).
Pequeñas tareas como comprobación de datos, inserción de
información (hora, lenguaje, etc), deberían ser posibles, y sin
tener que generar carga adicional hacia los servidores.
z
z
– SOLUCIÓN Æ LENGUAJES EMPOTRADOS
(JAVA), Y LENGUAJES “LIGEROS” PARA SCRIPT
EN LADO DEL CLIENTE: JAVASCRIPT, JSCRIPT,
ETC.
Curso 2006/2007
Arquitecturas Distribuidas
53
z
z
Actualización cuantitativa de HTML 3.2
Con HTML 4.0 se intenta separar el “contenido”
de la “presentación”, usando un mecanismo
generalizado de hojas de estilo.
Facilidades para discapacitados
Internacionalización mediante el atributo lang
Nuevos elementos: <FRAME>, <OBJECT>, etc.
Curso 2006/2007
Arquitecturas Distribuidas
54
27
HTML 4.0
z
z
z
z
HTML 4.0
Curso 2006/2007
Arquitecturas Distribuidas
z
<html>
<!–- Ejemplo 18 -->
Es posible usar lenguajes de script de modo más
flexible y útil.
Además, se proporciona un mecanismo
consistente para insertar objetos empotrados
(como un applet Java).
Ciertos elementos se declaran en desuso
deprecated (todavía pueden usarse, pero no está
recomendado): CENTER, FONT
Otros elementos se declaran obsoletos (ya no
pueden usarse): LISTING, PLAINTEXT, XMP
<frameset cols="*,*">
<frame src="ejemplo1.html">
<frame src="ejemplo2.html">
</frameset>
</html>
z
55
Curso 2006/2007
Los nuevos elementos
FRAME y FRAMESET
proporcionan un medio
para dividir la pantalla
en páginas
independientes.
Cada cuadro contiene
una página totalmente
independiente (con su
separador, barra de
desplazamiento, etc).
Arquitecturas Distribuidas
56
28
HTML 4.0
HTML 4.0
<html>
<!–- Ejemplo 18 -->
<frameset cols="*,*">
<frame src="ejemplo1.html">
<frame src="ejemplo2.html">
</frameset>
<frameset rows="35%,*">
<frameset cols="*,*" frameborder=0 >
<frame src="ejemplo1.html">
<frame src="ejemplo2.html">
</frameset>
<frame src="ejemplo3.html">
</frameset>
</html>
</html>
Curso 2006/2007
z
<html>
<!-- Ejemplo 19 -->
Arquitecturas Distribuidas
57
Curso 2006/2007
z
Es posible usar cuadros
anidados, si aparece o
no la barra de
separación, la barra de
scroll, etc.
El uso de los cuadros
es una característica
controvertida en
HTML.
Arquitecturas Distribuidas
58
29
HTML 4.0
HTML 4.0
z Mejoras
en tablas y formularios.
z Cambios significativos a nivel de
parámetros: todos aquellos que hacían
referencia a la “presentación” se eliminan a
favor de las hojas de estilo.
<html>
<!-- Ejemplo 19 -->
<frameset rows="35%,*">
<frameset cols="*,*" frameborder=0 >
<frame src="ejemplo1.html">
<frame src="ejemplo2.html">
</frameset>
<frame src="ejemplo3.html">
</frameset>
</html>
Curso 2006/2007
Arquitecturas Distribuidas
59
Curso 2006/2007
Arquitecturas Distribuidas
60
30
HTML 4.0
z Varias
versiones adicionales de HTML
4.01(cada una con su correspondiente
DTD):
I. SGML
– Estricto: describe estructuras del HTML, pero no
proporciona marcado relacionado con cuadros.
– En transición: incluye elementos de marcado para
formato (como <B> o <FONT>), pero sin elementos
relacionados con cuadros.
– Trabajo con cuadros: como el DTD de transición pero
con los elementos relacionados con cuadros.
Curso 2006/2007
Arquitecturas Distribuidas
1. HTML como “aplicación SGML”
2. Resumen sintaxis SGML
61
31
HTML como aplicación SGML
HTML como aplicación SGML
z Hasta ahora:
– Sabemos como definir etiquetas y atributos.
– Poseemos un concepto general de la estructura
z
– ¿Cómo identificar qué elementos pueden estar
presentes dentro de otros?
– ¿Cómo conocer la sintaxis correcta de los atributos?
– ¿Un elemento debe usar etiquetado simple o doble?
de una página.
– Conocemos ciertos elementos de HTML y la
base general de su jerarquía (BLOQUE vs
TEXTO).
– Observamos la potencialidad de HTML para
transmitir información hiper-enlazada.
Curso 2006/2007
Arquitecturas Distribuidas
Pero, a nivel sintáctico:
z
z
63
Definición por extensión Æ IMPOSIBLE!
HTML debe definirse formalmente, de modo que
en su estándar podamos encontrar rápidas
respuestas a dichas preguntas. Para definir HTML
se utiliza un meta-lenguaje para lenguajes de
marcación: SGML.
Curso 2006/2007
Arquitecturas Distribuidas
64
32
HTML como aplicación SGML
z
z
z
HTML como aplicación SGML
z
Simple Generalized Markup Language (SGML)
SGML es anterior a HTML, y se ha usado para
definir otros lenguajes de marcación.
La definición de lenguajes de marcación permite:
z
– Saber si un documento es “conforme” a la declaración
– Reglas permitidas
del lenguaje al que pertenece.
– Procesado automático por una aplicación.
Curso 2006/2007
Arquitecturas Distribuidas
Cada lenguaje definido con SGML se dice que es
una “aplicación SGML”. Æ HTML es una
aplicación SGML.
A cada aplicación SGML le corresponde un
Document Type Definition (DTD) del lenguaje:
– Reglas requeridas
– Distinción entre marcas y texto del documento
65
Curso 2006/2007
Arquitecturas Distribuidas
66
33
Resumen sintaxis SGML
HTML como aplicación SGML
<!doctype HTML PUBLIC “-//W3C/DTD
HTML 3.2 Final//EN”>
<html>
<!–- Ejemplo 1 -->
<!-– Esto son comentarios -->
<head>
<title>Titulo de la pagina</title>
</head>
<body>
Contenido de la pagina.
</body>
</html>
Curso 2006/2007
Arquitecturas Distribuidas
Indicación de la
aplicación
SGML utilizada.
Documento
debe ser
conforme a ese
lenguaje.
67
<!DOCTYPE nombre [reglas]>
<!ELEMENT nombre_etiqueta
marcación
(contenido)>
marcación: “-” (obligatoria) “o” (opcional)
contenido: #PCDATA y otros elementos
– Cardinal (“?”, “*”, “+”)
– Ordenación (“,”, “|”, “&”)
<!ATTLIST nombre_etiqueta
(nombre_atributo tipo valor_por_defecto
<!ENTITY
Curso 2006/2007
%
\n)+>
nombre “estructura”>
Arquitecturas Distribuidas
68
34
Referencias y bibliografía
z
Referencias y bibliografía
z
Tutoriales de HTML en la Web (¡¡hay
cientos!!)
–
–
En inglés:
z
–
Especificaciones formales HTML:
z
http://www.w3schools.com/html
–
En castellano:
z
z
Curso 2006/2007
Disponibles desde la Web de la asignatura:
www.webestilo.com/html
www.programacion.net/html Æ Varios cursos: HTML
4.0, XHTML 1.0, Javascript, ...
Arquitecturas Distribuidas
69
–
http://ait.upct.es/asignaturas/ad/manuales
“Especificación de Referencia para el HTML 3.2”,
Recomendación del W3C, 14-ene-1997
“Especificación HTML 4.01(HTML 4.01
Specification)”, Recomendación del W3C, 24 de
diciembre de 1999
Curso 2006/2007
Arquitecturas Distribuidas
70
35
Referencias y bibliografía
z
Tutoriales de SGML en la Web
–
En inglés:
z
z
Curso 2006/2007
http://ait.upct.es/asignaturas/ad/manuales/SGML/Gentle
-Introduction-To-SGML.html, “A gentle introduction to
SGML”.
http://www.w3.org/TR/REC-html40/intro/sgmltut.html
Æ Tutorial del W3C.
Arquitecturas Distribuidas
71
36