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   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:    Ejemplo  

Mi  PRIMERA  pagina web.

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

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

y   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: Mi página web es un elemento TITLE Texto b Texto en negrita negrita /b es un elemento BOLD

Los elementos pueden contener otros elementos:

Texto con parte en negrita

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:

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:



La primera línea del documento debe  ser la definición del tipo. Cualquier  documento “conforme” debe tener esa  línea.



Documentos HTML comienzan y finalizan con l   i las etiquetas  y ,    h l     /h l   respectivamente

Titulo de la pagina

Es posible usar comentarios con

Contenido de la pagina.

La CABECERA (HEAD) se inserta entre y La sección con el CUERPO (BODY) va entre y



Arquitecturas Distribuidas 09/10

18

Estructura general g y Ejemplo:

Titulo de la pagina Contenido de la pagina.

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: ...,

,

, etc y Elementos TEXTO Æ No provocan un nuevo  párrafo: , , , 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 j p 2

y Su disposición en el documento, así  Su disposición en el documento  así 

Titulo Aqui aparecería el texto que deseemos mostrar en la pagina web no importa que formato tenga aquí, ya que el navegador lo ignora . . .

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 j p 2

Titulo Aqui aparecería el texto que deseemos mostrar en la pagina web no importa que formato tenga aquí, ya que el navegador lo ignora . . .

Arquitecturas Distribuidas 09/10

22

Cambios en la disposición del texto Cambios en la disposición del texto Titulo body

Parrafo con
dos lineas

Cambios en la disposición: ƒ Puede provocarse un salto  d  lí de línea usando la etiqueta    d  l   i   simple 

Parrafo que inclye una   SEPARACION   entre algunas de las palabras.

ƒ Puede crearse un nuevo  parrafo (que comience en una  nueva línea) con 

…

   Este parrafo esta
tabulado en la p primera linea
pero no en las siguientes.

ƒ Pueden forzarse espacios en  blanco con el símbolo de  espacio “sin ruptura” (non‐ breaking space):   



Arquitecturas Distribuidas 09/10

23

Cambios en la disposición del texto Cambios en la disposición del texto Titulo body

Parrafo con
dos lineas

Parrafo que inclye una   SEPARACION   entre algunas de las palabras.

   Este parrafo esta
tabulado en la p primera linea
pero no en las siguientes.

Arquitecturas Distribuidas 09/10

24

S Separación ió de los  d l bloques bl d de texto y Pueden especificarse p

Titulo Primer encabezado p

Texto cualquiera.

Subcabecera

Mas texto.

Segundo encabezado

Mas texto.

encabezados para parrafos y  bloques de texto. y Etiquetas …

producen una cabecera con un  que denota mucha formato q importancia (el formato final  depende del navegador)  y … p producen encabezados de “menor importancia”. y e etcc y … producen los  encabezados de menor nivel.



Arquitecturas Distribuidas 09/10

25

Separación de los bloques de los bloques de texto de texto Titulo Primer encabezado p

Texto cualquiera.

Subcabecera

Mas texto.

Segundo encabezado

Mas texto.

Arquitecturas Distribuidas 09/10

26

Separación de los  de los bloques de texto de texto y Pueden insertarse 

Titulo

separaciones entre  secciones:

Texto cualquiera.

y dibuja una línea en la 

pantalla y fija el  f l

Mas texto.

y

Mas texto. texto

ancho de la pantalla ocupado fija el grosor  j g de la línea de separación



Arquitecturas Distribuidas 09/10

27

Separación de los  bloques de texto Titulo

Texto cualquiera.

Mas texto.

Mas texto texto.

Arquitecturas Distribuidas 09/10

28

Alineación del texto

y Es posible E   ibl elegir l i la  l  

Titulo Encabezado centrado

Texto alineado a la izquierda (por defecto)

Texto centrado

g g Texto a derechas

p

Todo el texto del

conjunto se alinea a

derechas

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 ..



Arquitecturas Distribuidas 09/10

29

Alineación del texto Titulo Encabezado centrado

Texto alineado a la izquierda (por defecto)

Texto centrado

g g Texto a derechas

p

Todo el texto del

conjunto se alinea a

derechas

Arquitecturas Distribuidas 09/10

30

Estilos de texto y ESTILOS DE TEXTO:

Titulo

El texto puede ser señalado usando negrita, cursiva, incluso haciendolo mayor.
Subrayar el texto no esta aconsejado ya que parece un hiperenlace
La tetra de tipo fijo permite distinguir elementos como el codigo: sum = sum + i;

/

y …

para negrita

y …

para cursiva

para subrayados

y …

y …

letra tipo fijo

y …

incrementa el tamaño de  la letra

y …

decrementa el tamaño d l  ñ de la  d  l   letra

y No deben utilizarse: utilizar



hojas de estilo para el formato

Arquitecturas Distribuidas 09/10

31

Estilos de texto Titulo

El texto puede ser señalado usando negrita, cursiva, incluso haciendolo mayor.
Subrayar el texto no esta aconsejado ya que parece un hiperenlace
La tetra de tipo fijo permite distinguir elementos como el codigo: sum = sum + i;

/

Arquitecturas Distribuidas 09/10

32

Estilos de texto ht l Titulo

Los subindices1 y superindice2 pueden insertarse directamente en el texto.

y … indica 

subindice y … indica 

superindice

Para evitar efectos extraños en el
interlineado 1 2
suele reduccirse antes
su tamaño 2.

/p

Arquitecturas Distribuidas 09/10

33

Estilos de texto ht l Titulo

Los subindices1 y superindice2 pueden insertarse directamente en el texto.

Para evitar efectos extraños en el
interlineado 1 2
suele reduccirse antes
su tamaño 2.

/p

Arquitecturas Distribuidas 09/10

34

Agrupaciones de texto

Inserción de texto respetando p saltos de línea:

Titulo

for (i = 0; i < 10; i++) { sum = sum + i; }

Comentario del ultimo teorema de Fermat (siglo XVII): ) 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.

… Útil para insertar código,  por ejemplo. Texto con indentación en  ambos márgenes: … Útil para insertar “citas”,  por ejemplo ejemplo.

Arquitecturas Distribuidas 09/10

35

Agrupaciones de texto Titulo

for (i = 0; i < 10; i++) { sum = sum + i; }

Comentario del ultimo teorema de Fermat (siglo XVII): ) 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.

Arquitecturas Distribuidas 09/10

36

Listas Li

E i Exiten tres tipos i d  li de listas:

Titulo

y Listas ordenadas:

Primer elemento

Segundo elemento

li Este E t debe d b ser el l tercero t

… (cada elemento se precede por una letra o un  número) y

identifica cada elemento

de la lista d  l  li t y Se puede establecer el estilo y el  índice inicial.

y Listas no ordenadas:

• Texto 1
• Texto 2

…

(cada elemento se precede con una señal)

HTML HyperText Markup Language HTTP HyperText Transfer Protocol

y

de la lista de la lista.

y Listas de definición: 

… y y

Arquitecturas Distribuidas 09/10

identifica cada elemento

identifica cada termino identifica su definición 37

Listas Li Titulo

Primer elemento

Segundo elemento

li Este E t debe d b ser el l tercero t

• Texto 1
• Texto 2

HTML HyperText Markup Language HTTP HyperText Transfer Protocol

Arquitecturas Distribuidas 09/10

38

Hiperenlaces y El elemento más importante de 



HTML son los hiperenlaces: Elemento HTML   l  hi l  El “ANCHOR”.

Titulo /

> Universidad Politecnica de Cartagena
p p ETT Telemática

y … /

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 Titulo /

> Universidad Politecnica de Cartagena
p p ETT Telemática

Arquitecturas Distribuidas 09/10

40

Hi Hiperenlaces l y Es también p posible referenciar

> Titulo

[ HTML | HTTP | IP | TCP # / ]

Acronimos: HTML name= HTML >HTML HyperText Markup Language HTTP HyperText Transfer Protocol IP Internet Protocol TCP Transfer Control Protocol

Arquitecturas Distribuidas 09/10

partes del mismo documento con un hiperenlace: y