HTML
Anuncio
TEMA L
TEMA 3. Lenguajes estructurados
j t t d
Contenido del Tema 3
I.
II
II.
III.
IV.
V.
HTML
CSS
SGML
XML
DOM
Arquitecturas Distribuidas 09/10
2
I. HTML
1.
Introducción
1.1. Motivación
1.2 SGML
SGML
1.3 Lenguaje HTML: introducción
1 4 Hipertexto y HTML
1.4. Hipertexto y HTML
1.5 Evolución de HTML
2. Lenguaje de Marcado de Hipertexto (HTML)
g j
p
(
)
2.1. Etiquetas y elementos
2.2. Estructura genera
2.3. Disposición del texto Di
i ió d l 2.4. Listas
2 5 Hiperenlaces
2.5. Hiperenlaces
2.6. Imágenes
7
2.7. Tablas
2.8. Limitaciones del HTML 3.2
2.9. HTML 4.0
Motivación
y Los S.D. son heterogéneos: diversidad de dispositivos, aplicaciones, sistemas
aplicaciones
sistemas operativos, lenguajes
operativos lenguajes de programación, etc.
y ¿Cómo expresamos los datos de manera que puedan ser interpretados sin ambigüedad y pérdida de datos por sistemas heterogéneos?
y SGML nos permite conseguir este objetivo
Arquitecturas Distribuidas 09/10
4
SGML (I)
()
y Standard Generalized Markup Language
y La base del mecanismo más popular
L b d l i
á l para conseguir el objetivo anterior
y Lenguaje de marcas (markup)
L
j d (
k )
y Vocabulario que combina datos (contenido) con notación (marcas)
y Proporciona metadatos: “datos sobre los datos”, es decir las marcas proporcionan un contexto a los decir, las marcas proporcionan un contexto a los datos
Arquitecturas Distribuidas 09/10
5
SGML (II)
( )
y Características que lo hacen apropiado para S.D.:
y Marcas descriptivas: anota los datos en términos de su estructura NO de lo que se debe hacer con ellos => Separa los datos de la estructura y por que se debe hacer con ellos > Separa los datos de la estructura y por implicación de su representación
y Proporciona un medio para asociar un documento marcado con un tipo de documento (DTD)
y Document Type Definition (DTD): define el tipo de documento, los marcas usadas, la relación entre ellas y su significado.
y El DTD es la plantilla sobre la cual el contenido marcado puede ser entendido, interpretado y validado: “Manual del lenguaje de marcas”.
dd
d
ld d “
ld ll
d
”
y SGML proporciona una sintaxis para declarar DTDs
y A partir de SGML se definen diversos lenguajes de marcas.
Arquitecturas Distribuidas 09/10
6
Lenguaje HTML: introducción
g j
y Es el lenguaje de publicación de la web.
y Desarrollado originalmente por Tim Berners‐Lee
y Su primer objetivo era proporcionar un medio sencillo de exhibir S i
bj ti i
di ill d hibi y
y
y
y
y
y
y
y
información de manera inteligible para un ser humano.
El software que lo representa se denomina “navegador”
HTML está definido mediante la sintaxis estándar de SGML: separa la estructura de los datos mediante marcas, llamadas elementos. La marca o etiqueta incluye el nombre del elemento entre <>
Existen etiquetas de comienzo y de cierre <X> </X>
Un elemento está compuesto por una etiqueta de comienzo y de cierre que contiene.
Un elemento puede contener datos textuales y atributos.
Los elementos se anidan Un elemento puede contener otros Los elementos se anidan. Un elemento puede contener otros elementos. Estructura en forma de árbol.
HTML no aportó (ya desde un primer momento) toda la generalidad necesaria, y ha sido (y es) objeto de revisiones.
y
y
j
Arquitecturas Distribuidas 09/10
7
Lenguaje HTML
g j
y Ejemplo página web:
<HTML>
<HEAD> <TITLE> Ejemplo </TITLE> </HEAD>
<BODY>
Mi <B> PRIMERA </B> pagina web.
</BODY>
</HTML>
Arquitecturas Distribuidas 09/10
8
Hipertexto y HTML
p
y
y El lenguage de hipertexto con marcas
(HyperText Markup Language, HTML) permite
Markup Language HTML) permite
publicar contenidos estáticos en la web
y El hipertexto
p
se refiere a la propiedad
p p
de las p
páginas
g
para establecer enlaces entre si. y El marcado indica que el texto utiliza símbolos
especiales (etiquetas o tags) que identifican la estructura y el tipo de contenido. Se define mediante
SGML.
y HTML = ESTRUCTURA + DATOS
HTML ESTRUCTURA DATOS
Arquitecturas Distribuidas 09/10
9
Evolución de HTML
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
2 0 (IETF,
(IETF 1994): intentó estandarizar éstas y otras propiedades,
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,, ppero de nuevo
topó 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”.
HTML 5 (W3C, 2004): estándar propuesto, sustituye a los anteriores e introduce
nuevas marcas
Arquitecturas Distribuidas 09/10
10
Lenguaje HTML: evolución
g j
Web estática
Web Dinámica
HTML 1.0, HTML 2.0
HTML 3.2
Arquitecturas Distribuidas 09/10
Arquitecturas p
de aplicación en Web: Web 2.0
HTML 4.0, HTML 5
11
I. HTML
1.
Introducción
1.1. Motivación
1.2 SGML
SGML
1.3 Lenguaje HTML: introducción
1 4 Hipertexto y HTML
1.4. Hipertexto y HTML
1.5. Evolución de HTML
2. Lenguaje de Marcado de Hipertexto (HTML)
2.1. Etiquetas y elementos
2.2. Estructura genera
2.3. Disposición del texto 2.4. Listas
2 5 Hiperenlaces
2.5. Hiperenlaces
2.6. Imágenes
2.7. Tablas
2.8. Limitaciones del HTML 3.2
2.9. HTML 4.0
HTML 3.2
y Estudiaremos en primer lugar HTML 3.2:
y Más sencillo que HTML 4.0
Má ill HTML y Permite crear páginas “decorosas”
y Antes de entrar en HTML 4.0 es mejor comprender bien A
d HTML j d bi las versiones anteriores.
Arquitecturas Distribuidas 09/10
13
Etiquetas y elementos
y HTML especifica un conjunto de etiquetas que
indican como estructurar un documento:
y Etiquetas van entre “< >”:
y
<img src="image.gif"> Indica la presencia de una
imagen
y La mayoría de las etiquetas están apareadas: existe
una etiqueta de inicio y otra de fin: y
<title> y </title> encierran el título de una página.
Arquitecturas Distribuidas 09/10
14
Ei
Etiquetas
y elementos
l
Un elemento HTML es un objeto encerrado entre un par de etiquetas:
<title>Mi página web</title> es un elemento TITLE
<b>Texto
b Texto en negrita
negrita</b>
/b es un elemento BOLD
Los elementos pueden contener otros elementos:
<p> Texto con parte en <b>negrita</b></p>
Es un elemento PARAGRAPH que contiene un elemento con BOLD.
Arquitecturas Distribuidas 09/10
15
Etiquetas y elementos
q
y
y Parámetros de los elementos:
y Los elementos pueden tener diferentes parámetros o L l
t d t
dif
t á t “atributos” asociados. y Su sintaxis es:
<TAG PAR1="VALOR1"
PAR1 VALOR1 PAR2
PAR2="VALOR2"
VALOR2
Arquitecturas Distribuidas 09/10
... >
16
Estr ct ra general
Estructura
y Un documento HTML está formado por:
y DEFINICIÓN DE TIPO DE DOCUMENTO (DTD) con la indicación de qué formato de HTML está siendo utilizado en el resto del documento. y CABECERA (HEAD) que contiene información para el funcionamiento del navegador y de la página web. y
Ejemplo, el título para la ventana del navegador, definiciones de Ej
l l í l l d l d d fi i i
d estilo, código de script, etc. y CUERPO (BODY) con los contenidos reales que se mostrarán en la página web.
y
Ejemplo: texto, enlaces a otras páginas, imágenes, etc.
Arquitecturas Distribuidas 09/10
17
Estructura general
g
y Ejemplo:
<!doctype HTML PUBLIC “-//W3C/DTD
HTML 3.2 Final//EN”>
La primera línea del documento debe ser la definición del tipo. Cualquier documento “conforme” debe tener esa línea.
<html>
<!–- Ejemplo 1 -->
<!-– Esto son comentarios -->
Documentos HTML comienzan y finalizan con
l i
las etiquetas <html> y </html>, h l /h l respectivamente
<head>
<title>Titulo de la pagina</title>
</head>
Es posible usar comentarios con <!-! y -->
<body>
Contenido de la pagina.
</body>
La CABECERA (HEAD) se inserta entre
<head> y </head>
La sección con el CUERPO (BODY) va entre
<body> y </body>
</html>
Arquitecturas Distribuidas 09/10
18
Estructura general
g
y Ejemplo:
<!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>
Arquitecturas Distribuidas 09/10
19
Estructura general:
Jerarquía de los elementos del cuerpo
Jerarquía de los elementos del cuerpo
y Elementos BLOQUE Æ Aquellos que provocan el comienzo de un nuevo párrafo: <H1>...<H6>,
<H1>
<H6> <P>
<P>,
<LI>, etc
y Elementos TEXTO Æ No provocan un nuevo párrafo: <IMG>, <A>, <FONT>, etc.
y BLOQUE formados de otros BLOQUE y TEXTO.
BLOQUE formados de otros BLOQUE y TEXTO
y TEXTO sólo pueden contener otros elementos TEXTO.
TEXTO
y Modelo exacto depende del elemento concreto.
y ¿Cómo se define tal modelo? DTD, más adelante
¿Cómo se define tal modelo? DTD más adelante
Arquitecturas Distribuidas 09/10
20
Disposición del texto
del texto
<!doctype HTML PUBLIC “-//W3C/DTD
HTML 3.2 Final//EN”>
<html>
j p
2
<!–- Ejemplo
y El CUERPO contiene múltiples líneas de texto.
-->
y Su disposición en el documento, así Su disposición en el documento así <head>
<title>Titulo</title>
</head>
<body>
Aqui aparecer&iacute;a el
texto que deseemos mostrar en la
pagina web
no
importa que formato tenga
aqu&iacute;, ya que el
navegador lo ignora
.
.
.
</body>
</html>
Arquitecturas Distribuidas 09/10
como el espaciado son ignorados por el navegador
y Cada secuencia de espacios en p
blanco es interpretada como un solo espacio.
y El navegador automáticamente corta el texto para que encaje en el tamaño de la ventana.
y El texto dentro del documento puede estructurarse del modo más d t t
d l d á conveniente, ya que no afecta a como se representa en el navegador.
21
Disposición del texto
p
<!doctype HTML PUBLIC “-//W3C/DTD
HTML 3.2 Final//EN”>
<html>
j p
2
<!–- Ejemplo
-->
<head>
<title>Titulo</title>
</head>
<body>
Aqui aparecer&iacute;a el
texto que deseemos mostrar en la
pagina web
no
importa que formato tenga
aqu&iacute;, ya que el
navegador lo ignora
.
.
.
</body>
</html>
Arquitecturas Distribuidas 09/10
22
Cambios en la disposición del texto
Cambios en la disposición del texto
<html>
<!–- Ejemplo 3 -->
<head>
<title>Titulo</title>
</head>
body
<body>
<p>
Parrafo con <br>
dos lineas
</p>
Cambios en la disposición:
Puede provocarse un salto d lí
de línea usando la etiqueta d l i
simple <br>
<p>
Parrafo que inclye una
&nbsp; SEPARACION &nbsp; entre
algunas
de las palabras.
</p>
Puede crearse un nuevo parrafo (que comience en una nueva línea) con <p>…</p>
<p>
&nbsp;&nbsp; Este parrafo esta
<br/>
tabulado en la p
primera linea
<br/>
pero no en las siguientes.
</p>
</body>
Pueden forzarse espacios en blanco con el símbolo de espacio “sin ruptura” (non‐
breaking space): &nbsp;
</ht l>
</html>
Arquitecturas Distribuidas 09/10
23
Cambios en la disposición del texto
Cambios en la disposición del texto
<html>
<!–- Ejemplo 3 -->
<head>
<title>Titulo</title>
</head>
body
<body>
<p>
Parrafo con <br>
dos lineas
</p>
<p>
Parrafo que inclye una
&nbsp; SEPARACION &nbsp; entre
algunas
de las palabras.
</p>
<p>
&nbsp;&nbsp; Este parrafo esta
<br/>
tabulado en la p
primera linea
<br/>
pero no en las siguientes.
</p>
</body>
</ht l>
</html>
Arquitecturas Distribuidas 09/10
24
S
Separación
ió de los d l bloques
bl
d
de texto
y Pueden especificarse
p
<html>
<!–- Ejemplo 4 -->
<head>
<title>Titulo</title>
</head>
<body>
<h1> Primer encabezado </h1>
p
<p>
Texto cualquiera.
</p>
<h2> Subcabecera </h2>
<p>
Mas texto.
</p>
<h1> Segundo encabezado </h1>
<p> Mas texto. </p>
</body>
encabezados para parrafos y bloques de texto.
y Etiquetas <h1>…</h1>
producen una cabecera con un que denota mucha
formato q
importancia (el formato final depende del navegador) y <h2>…</h2> p
producen
encabezados de “menor
importancia”.
y e
etcc
y <h6>…</h6> producen los encabezados de menor nivel.
</html>
Arquitecturas Distribuidas 09/10
25
Separación de los bloques
de los bloques de texto
de texto
<html>
<!–- Ejemplo 4 -->
<head>
<title>Titulo</title>
</head>
<body>
<h1> Primer encabezado </h1>
p
<p>
Texto cualquiera.
</p>
<h2> Subcabecera </h2>
<p>
Mas texto.
</p>
<h1> Segundo encabezado </h1>
<p> Mas texto. </p>
</body>
</html>
Arquitecturas Distribuidas 09/10
26
Separación de los de los bloques de texto
de texto
y Pueden insertarse <html>
<!–- Ejemplo 5 -->
<head>
<title>Titulo</title>
</head>
separaciones entre secciones:
<body>
<p> Texto cualquiera. </p>
<hr>
y <hr> dibuja una línea en la pantalla
y <hr width="50%"> fija el f
l
<p> Mas texto. </p>
<hr width="50%">
y
<p> Mas texto.
texto </p>
<hr size="10">
ancho de la pantalla ocupado
<hr size=10 /
/> fija el grosor j
g
de la línea de separación
</body>
</html>
Arquitecturas Distribuidas 09/10
27
Separación de los bloques de texto
<html>
<!–- Ejemplo 5 -->
<head>
<title>Titulo</title>
</head>
<body>
<p> Texto cualquiera. </p>
<hr>
<p> Mas texto. </p>
<hr width="50%">
<p> Mas texto
texto. </p>
<hr size="10">
</body>
</html>
Arquitecturas Distribuidas 09/10
28
Alineación del texto
<html>
<!-- Ejemplo 6 -->
y Es posible
E ibl elegir
l i la l <head>
<title>Titulo</title>
</head>
<body>
<h1 align="center"> Encabezado
centrado</h1>
<p> Texto alineado a la izquierda (por
defecto) </p>
<p align="center"> Texto centrado </p>
<p
p align="right">
g
g
Texto a derechas </p>
p
<div align="right">
<p> Todo el texto del </p>
<p> conjunto se alinea a </p>
<p> derechas </p>
</div>
alineación del texto
(por defecto
alineado
li
d a la l izquierda)
y Atributo “align” de algunos elementos.
elementos
y Un conjunto de elementos puede
alinearse si se agrupa
en un elemento DIV:
y <div> .. </div>
</body>
</html>
Arquitecturas Distribuidas 09/10
29
Alineación del texto
<html>
<!-- Ejemplo 6 -->
<head>
<title>Titulo</title>
</head>
<body>
<h1 align="center"> Encabezado
centrado</h1>
<p> Texto alineado a la izquierda (por
defecto) </p>
<p align="center"> Texto centrado </p>
<p
p align="right">
g
g
Texto a derechas </p>
p
<div align="right">
<p> Todo el texto del </p>
<p> conjunto se alinea a </p>
<p> derechas </p>
</div>
</body>
</html>
Arquitecturas Distribuidas 09/10
30
Estilos de texto
y ESTILOS DE TEXTO:
<html>
<!–- Ejemplo 7 -->
<head>
<title>Titulo</title>
</h d>
</head>
<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>
y <b>… </b>
para negrita
y <i>… </i>
para cursiva
para
subrayados
y <u>… </u>
y <tt>… </tt>
letra tipo fijo
y <big>… </big>
incrementa el tamaño de la letra
y <small>… </small>
decrementa el tamaño
d
l ñ de la d l letra
y No deben utilizarse: utilizar
</html>
hojas de estilo para el formato
Arquitecturas Distribuidas 09/10
31
Estilos de texto
<html>
<!–- Ejemplo 7 -->
<head>
<title>Titulo</title>
</h d>
</head>
<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>
</html>
Arquitecturas Distribuidas 09/10
32
Estilos de texto
<html>
ht l
<!– Ejemplo 8 -->
<head>
<title>Titulo</title>
</head>
<body>
<p>
Los subindices<sub>1</sub>
y superindice<sup>2</sup>
pueden insertarse directamente
en el texto.
</p>
y <sub>… </sub> indica subindice
y <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>
/p
</body>
</html>
Arquitecturas Distribuidas 09/10
33
Estilos de texto
<html>
ht l
<!– Ejemplo 8 -->
<head>
<title>Titulo</title>
</head>
<body>
<p>
Los subindices<sub>1</sub>
y superindice<sup>2</sup>
pueden insertarse directamente
en el texto.
</p>
<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>
/p
</body>
</html>
Arquitecturas Distribuidas 09/10
34
Agrupaciones de texto
<html>
<!–- Ejemplo
j p
9 -->
Inserción de texto respetando
p
saltos de línea:
<head>
<title>Titulo</title>
</head>
<body>
<p>
<tt><pre>
for (i = 0; i < 10; i++) {
sum = sum + i;
}
</pre></tt>
</p>
<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>
<pre>…</pre>
Útil para insertar código, por ejemplo.
Texto con indentación en ambos márgenes:
<blockquote>…</blockq
uote>
Útil para insertar “citas”, por
ejemplo
ejemplo.
</html>
Arquitecturas Distribuidas 09/10
35
Agrupaciones de texto
<html>
<!–- Ejemplo
j p
9 -->
<head>
<title>Titulo</title>
</head>
<body>
<p>
<tt><pre>
for (i = 0; i < 10; i++) {
sum = sum + i;
}
</pre></tt>
</p>
<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>
</html>
Arquitecturas Distribuidas 09/10
36
Listas
Li
<html>
<!-–
Ejemplo 10 -->
<!
>
E i
Exiten
tres tipos
i
d li
de listas:
<head>
<title>Titulo</title>
</head>
y Listas ordenadas:
<body>
<p>
<ol>
<li> Primer elemento
<li> Segundo elemento
<li>
li Este
E t debe
d b ser el
l tercero
t
</ol>
</p>
<ol>…</ol>
<ol>
</ol> (cada elemento
se precede por una letra o un número)
y
<li> identifica cada elemento
de la lista
d
l li t
y Se puede establecer el estilo y el índice inicial.
y Listas no ordenadas:
<ul>
<li> Texto 1
<li> Texto 2
</ul>
<ul>…</ul> (cada elemento
se precede con una señal)
<p>
<dl>
<dt> HTML <dd> HyperText Markup Language
<dt> HTTP <dd> HyperText Transfer Protocol
</dl>
</p>
</body>
y
de la lista
de la lista.
y Listas de definición: <dl>…</dl>
y
y
</html>
Arquitecturas Distribuidas 09/10
<li> identifica cada elemento
<dt> identifica cada termino
<dd> identifica su definición
37
Listas
Li
<html>
<!-–
Ejemplo 10 -->
<!
>
<head>
<title>Titulo</title>
</head>
<body>
<p>
<ol>
<li> Primer elemento
<li> Segundo elemento
<li>
li Este
E t debe
d b ser el
l tercero
t
</ol>
</p>
<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>
</html>
Arquitecturas Distribuidas 09/10
38
Hiperenlaces
y El elemento más importante de <html>
<!-- Ejemplo 11 -->
HTML son los hiperenlaces: Elemento
HTML l hi
l
El
“ANCHOR”.
<head>
<title>Titulo</title>
</head>
/
<body>
<p>
<a href=
href="http://www
http://www.upct.es
upct es">
>
Universidad Politecnica de
Cartagena</a>
<br>
<a href="http://www.teleco.upct.es">
p
p
ETT Telemática</a>
<br>
</p>
</body>
</html>
y <a href="URL">…</a>
/
URL indica el recurso con el que se enlaza este “ancla”
y
y¡¡¡URL RELATIVAS O ABSOLUTAS!!!
y../imagenes/a.gif Indica que la imagen está en el directorio superior al de la URL actual dentro de un subdirectorio
y imagenes/a.gif indica que la imagen está dentro de un subdirectrio que cuelga del actual
yVER EJEMPLOS DE URL
Arquitecturas Distribuidas 09/10
39
Hi
Hiperenlaces
l
<html>
<!-- Ejemplo 11 -->
<head>
<title>Titulo</title>
</head>
/
<body>
<p>
<a href="http://www
href= http://www.upct.es
upct es">
>
Universidad Politecnica de
Cartagena</a>
<br>
<a href="http://www.teleco.upct.es">
p
p
ETT Telemática</a>
<br>
</p>
</body>
</html>
Arquitecturas Distribuidas 09/10
40
Hi
Hiperenlaces
l
y Es también p
posible referenciar
<html>
<!
<!-Ej
Ejemplo
l 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
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>
Arquitecturas Distribuidas 09/10
partes del mismo documento
con un hiperenlace:
y <a name=“parte1">…</a>
donde “parte1” es el identificador de la zona.
y
y <a href="#parte1">…</a>
Salta a la zona “parte1” de este
p
documento.
y
y <a href="URL#parte">…</a>
Salta hasta
l h
l
la zona
d l
de la página
identificada por la URL dada.
y
41
Hiperenlaces
<html>
<!
<!-Ej
Ejemplo
l 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
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>
Arquitecturas Distribuidas 09/10
42
Imágenes
Para incluir una imagen se usa
el elemento IMG:
<html>
<ht
l>
<!-- Ejemplo 13 -->
<head>
<titl >Tit l </titl >
<title>Titulo</title>
</head>
<body>
<di align="center">
<div
li
"
t ">
<img
src="http://www.upct.es/images/logocali
dad.jpg" alt="Universidad Politecnica
de Ca
Cartagena">
tagena">
<p>Prueba de imagen</p>
</div>
</body>
</html>
Arquitecturas Distribuidas 09/10
‐ Por defecto, todos
defecto todos los navegadores soportan .jpg, .gif y png.
‐Para visualizar otros tipos
p
puede ser necesario un plug‐in.
<img src="filename"
alt="texto
alt
texto
alternativo">
La imagen se identifica con su
URL
URL.
y
43
Imágenes
<html>
<ht
l>
<!-- Ejemplo 13 -->
<head>
<titl >Tit l </titl >
<title>Titulo</title>
</head>
<body>
<di align="center">
<div
li
"
t ">
<img
src="http://www.upct.es/images/logocali
dad.jpg" alt="Universidad Politecnica
de Ca
Cartagena">
tagena">
<p>Prueba de imagen</p>
</div>
</body>
</html>
Arquitecturas Distribuidas 09/10
44
Tablas
y Se utilizan
S ili
para presentar de d <html>
<!-- Ejemplo 14 -->
<head>
<title>Titulo</title>
</head>
<body>
<table>
bl
<tr>
<td>foo</td> <td>bar</td>
</tr>
<tr>
<td>biz</td> <td>baz</td>
</tr>
</table>
</body>
</html>
forma ordenada colecciones
complejas de objetos
y Una tabla divide los objetos en “filas” y “columnas”.
y <table>…</table> indica un elemento
tabla
y <tr>…</tr> indica una fila (row)
y <td>…</td> indica un dato de la Arquitecturas Distribuidas 09/10
tabla, es decir, cada una de las
columnas de la tabla.
45
Tablas
<html>
<!-- Ejemplo 14 -->
<head>
<title>Titulo</title>
</head>
<body>
<table>
bl
<tr>
<td>foo</td> <td>bar</td>
</tr>
<tr>
<td>biz</td> <td>baz</td>
</tr>
</table>
</body>
</html>
Arquitecturas Distribuidas 09/10
46
Disposición de la tabla
<html>
<!-- Ejemplo 15 -->
<head>
<title>Titulo</title>
</head>
/
<body>
<table border=1>
<tr align=
align="center">
center >
<td>foo<br>foo</td>
<td valign="top">bar</td>
</tr>
<tr>
<td>bizbiz</td>
<td>booboo</td>
</tr>
</table>
</body>
/
</html>
Arquitecturas Distribuidas 09/10
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 d bi
d “celda”:
<td
<td
<td
<td
align="center">
align="right">
i
i
valign="top">
valign="bottom">
O bien, para cada fila:
<tr align="center">
<tr valign="top">
47
Disposición de la tabla
<html>
<!-- Ejemplo 15 -->
<head>
<title>Titulo</title>
</head>
/
<body>
<table border=1>
<tr align=
align="center">
center >
<td>foo<br>foo</td>
<td valign="top">bar</td>
</tr>
<tr>
<td>bizbiz</td>
<td>booboo</td>
</tr>
</table>
</body>
/
</html>
Arquitecturas Distribuidas 09/10
48
Disposición de la tabla
<html>
<ht
l>
<!-– Ejemplo 16 -->
<head>
<title>Titulo</title>
</head>
<body>
<table width="100%">
<tr>
<td>A la izquierda
<td align="right">a la
derecha</td>
</t >
</tr>
</table>
</body>
</html>
Por defecto, el navegador
defecto el navegador
escoge el tamaño de la tabla para que encajen
todos los elementos.
Sin embargo, puede
Sin embargo
puede
escogerse el tamaño de la tabla en proporción al ancho
h de la página:
d l á i
Arquitecturas Distribuidas 09/10
<table width="60%">
49
Disposición de la tabla
<html>
<ht
l>
<!-– Ejemplo 16 -->
<head>
<title>Titulo</title>
</head>
<body>
<table width="100%">
<tr>
<td>A la izquierda
<td align="right">a la
derecha</td>
</t >
</tr>
</table>
</body>
</html>
Arquitecturas Distribuidas 09/10
50
Otras opciones para tablas
Es posible
p
controlar el espacio
p
entre “celdas” y los márgenes
“ ld ” l á
dentro de ellas:
<html>
<!– Ejemplo 17 -->
<!
>
<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>
t
<td rowspan=2 align="center"> cuatro
</td>
<td colspan=2 align="center"> cinco
</td>
</tr>
<tr>
t
<td> seis </td> <td> siete </td>
</tr>
</table>
</body>
</html>
Arquitecturas Distribuidas 09/10
<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>
rowspan 2>
51
Otras opciones para tablas
<html>
<!– Ejemplo 17 -->
<!
>
<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>
t
<td rowspan=2 align="center"> cuatro
</td>
<td colspan=2 align="center"> cinco
</td>
</tr>
<tr>
t
<td> seis </td> <td> siete </td>
</tr>
</table>
</body>
</html>
Arquitecturas Distribuidas 09/10
52
Li it i
Limitaciones de HTML 3.2
d HTML 3 2
y Contenido y formato están entrelazados
y Dificulta la actualización e inserción de contenidos.
y Dificulta la selección de un formato determinado, y sobre todo, su cambio.
y En ocasiones (ej. portal corporativo) todas las páginas En ocasiones (ej portal corporativo) 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.
y Solución Æ EL FORMATO DEBE DEFINIRSE INDEPENDIENTEMENTE Æ HOJAS DE ESTILO (en el siguiente tema)
Arquitecturas Distribuidas 09/10
53
Limitaciones de HTML 3.2
y Contenido estático.
Contenido estático
y HTML per se sólo permite definir contenidos estáticos. Esto no es conveniente si:
y
y
y
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.
y Solución Æ GENERACIÓN POR PROGRAMA Ó
DE HTML Æ VÍA APLICACIONES EXTERNAS, O BIEN USANDO LENGUAJES DE SCRIPT EN EL SERVIDOR.
Arquitecturas Distribuidas 09/10
54
Li i i
d HTML 3 2
Limitaciones de HTML 3.2
y Formato restrictivo:
y En ocasiones, se requiere un formato mucho más preciso ((representaciones especiales), elegante (publicidad), etc.
p
p
)
g
(p
)
y Por si mismo, HTML no posee la suficiente flexibilidad, y los diseñadores recurrían a técnicas como:
y
y
y
y
Imágenes invisibles para ajustar contenidos.
Imágenes invisibles para ajustar contenidos
Texto dentro de imágenes para fuentes, colores o tamaños especiales.
C t id i
Contenidos insertados en tablas para su ajuste.
t d t bl j t
Etc. y Solución Æ NUEVOS ELEMENTOS Y UTILIZACIÓN EXHAUSTIVA DE HOJAS DE ESTILO CON MÚLTITUD DE Ú
PROPIEDADES Æ HTML 4.0X, CSS1, CSS2.
Arquitecturas Distribuidas 09/10
55
Limitaciones de HTML 3.2
y Falta de interactividad:
F lt d i t
ti id d
y Las páginas deben ser más que simple información:
y Aplicaciones empotradas en WWW para tareas interactivas con los usuarios, y con la ventaja de ser sistemas universales (como web).
y Pequeñas tareas como comprobación de datos, inserción de q
p
,
información (hora, lenguaje, etc), deberían ser posibles, y sin tener que generar carga adicional hacia los servidores.
y SOLUCIÓN Æ LENGUAJES EMPOTRADOS (JAVA), J
(J
)
Y LENGUAJES “LIGEROS” PARA SCRIPT EN LADO DEL CLIENTE: JAVASCRIPT, JSCRIPT, ETC.
y AJAX (Asynchronous JavaScript and XML)
Arquitecturas Distribuidas 09/10
56
HTML 4.0
y Actualización cuantitativa de HTML 3.2
y Con HTML 4.0 se intenta separar el “contenido” de l“
d ”d
la “presentación”, usando un mecanismo generalizado de hojas de estilo.
l d d h
d
l
y Facilidades para discapacitados
y Internacionalización mediante el atributo lang
y Nuevos elementos: <FRAME>, <OBJECT>, etc.
Nuevos elementos: <FRAME> <OBJECT> etc
Arquitecturas Distribuidas 09/10
57
HTML 4.0
y Es posible usar lenguajes de script de modo más flexible y útil
flexible y útil.
y Además, se proporciona un mecanismo consistente para insertar objetos empotrados (como un applet Java).
y Ciertos elementos se declaran en desuso deprecated (todavía pueden usarse, pero no está recomendado): ) CENTER,, FONT
y Otros elementos se declaran obsoletos (ya no pueden usarse): p
) LISTING,, PLAINTEXT,, XMP
Arquitecturas Distribuidas 09/10
58
HTML 4.0
y Los nuevos elementos L l
FRAME y FRAMESET
<html>
<!–- Ejemplo 18 -->
<frameset cols="*,*">
<frame src="ejemplo1.html">
j p
<frame src="ejemplo2.html">
</frameset>
</html>
Arquitecturas Distribuidas 09/10
proporcionan un medio para dividir la pantalla en páginas g
independientes.
y Cada cuadro contiene una página totalmente independiente (con su separador barra de separador, barra de desplazamiento, etc).
59
HTML 4.0
<html>
<!–- Ejemplo 18 -->
<frameset cols="*,*">
<frame src="ejemplo1.html">
<frame src="ejemplo2.html">
</frameset>
</html>
Arquitecturas Distribuidas 09/10
60
HTML 4.0
<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>
Arquitecturas Distribuidas 09/10
y Es posible usar E ibl cuadros anidados, si aparece o no la barra de separación, la barra de scroll, etc.
y El uso de los cuadros es una característica controvertida en HTML.
61
HTML 4.0
<html>
<!-- Ejemplo 19 -->
<frameset
f
t rows="35%,*">
"35% *"
<frameset cols="*,*" frameborder=0 >
<frame src="ejemplo1.html">
<frame src="ejemplo2.html">
</frameset>
/f
t
<frame src="ejemplo3.html">
</frameset>
</ht l>
</html>
Arquitecturas Distribuidas 09/10
62
HTML 4.0
y Mejoras en tablas y formularios.
y Cambios significativos a nivel de parámetros: todos C bi i ifi i i l d á
d aquellos que hacían referencia a la “presentación” se eliminan a favor de las hojas de estilo.
eliminan a favor de las hojas de estilo
y Problema de los cuadros (frames). No es recomendable usarlos
Arquitecturas Distribuidas 09/10
63
HTML 4.0
y Varias versiones adicionales de HTML 4.01 (cada una con su correspondiente DTD):
y Estricto: describe estructuras del HTML, pero no proporciona marcado relacionado con frames.
y En transición: incluye elementos de marcado para formato (como <B> o <FONT>), pero sin elementos ) pero sin elementos relacionados con frames.
y Trabajo con cuadros: como el DTD de transición pero con los elementos relacionados con frames.
Arquitecturas Distribuidas 09/10
64
