Tema 2: XHTML_1.

Introduccin

Curso 2017-2018
Sesin 2

1
Contenidos
1. Introduccin
1. Qu es HTML?
2. Breve historia
3. HTML y CSS
4. HTML y XHTML
2. Caractersticas bsicas
1. Ventajas de XHTML
2. Gramtica XTHML: etiquetas, atributos,
elementos, referencia a caracteres, comentarios
3. Estructura bsica. El primer documento
 1.1Qu es HTML?

El estndar W3C lo define como:

"un lenguaje reconocido universalmente y que
permite publicar informacin de forma global".
El significado de sus siglas es: HyperText Markup
Language
Lenguaje. Para crear documentos.
Marcas. Los documentos estn formados por texto enriquecido
con etiquetas que un programa navegador es capaz de interpretar.
Hipertexto. En el que es posible definir zonas sensibles en los
documentos que permiten acceder a otros documentos.

3
1.2.Historia HTML
Ampliacin.
1980: Tim Berners-Lee, propuso un nuevo sistema de "hipertexto"
para compartir documentos. Tras finalizarlo, lo present a una
convocatoria organizada para desarrollar un sistema de "hipertexto"
para Internet.Y junto a Robert Cailliau, la ganan, llamndolo
WorldWideWeb (W3).
1991: El primer documento formal con la descripcin de HTML,
HTML Tags
1993: Primera propuesta oficial para convertir HTML en un estndar
por parte del organismo IETF (Internet Engineering Task Force )
1995: el organismo IETF organiza un grupo de trabajo de HTML y
consigue publicar, en septiembre, el primer estndar oficial HTML
2.0.
1996: los estndares de HTML los publica otro organismo de
estandarizacin llamado W3C (http://www.w3.org/) (World Wide Web
Consortium).

4
 1.2.Historia HTML
1997: W3C publica HTML 3.2. Esta revisin incorpora los applets de
Java y texto que fluye alrededor de las imgenes.
1998: HTML 4.0. Aparece CSS, inclusin de scripts en las pginas web,
mejora de la accesibilidad de las pginas diseadas, tablas complejas y
mejoras en los formularios.
1999: HTML 4.01
A partir de ese momento W3C se centra el desarrollo del estndar
XHTML. una versin avanzada de HTML y basada en XML.
2000: XHTML 1.0
2004, Apple, Mozilla y Opera organizan en una nueva asociacin llamada
WHATWG (Web Hypertext Application Technology Working Group),
que se centra en el futuro estndar HTML 5, cuyo primer borrador
oficial en 2008.
2007 el W3C y WHATWG se unen
2008, se publica el primer borrador de HTML5
2014, se publica la recomendacin (estndar) HTML5
2016(15 de sept) se propone HTML 5.1 5
 Fases de un estndar W3C
Ampliacin.
Editors drafts representa la visin actual de los editores de la
especificacin.
Working Drafts son los hitos iniciales de los avances en los Grupos de
Trabajo.
Last Call Working Drafts, es la seal de que el Grupo de Trabajo ha
determinado que cumple con la especificacin de sus necesidades y todos
los problemas conocidos se han resuelto. Es el momento en que se le pide
opinin y comentarios a la comunidad en general.
Candidate Recommendations realiza una llamada a los fabricantes para que
realicen implementaciones, donde se les invita a poner en prctica el pliego
de condiciones, enviar sus comentarios y aplicar la batera de pruebas que
ha creado el Grupo de Trabajo.
Proposed Recommendations, indica que el Grupo de Trabajo ha reunido la
experiencia de ejecucin suficiente, y activa la revisin final por miembros
del W3C
W3C Recommendations son los estndares Web estables y completos.
Estos documentos son actualizados en raras ocasiones, a travs del
proceso de Edited Recommendation, como son las erratas localizadas por
los Grupos de Trabajo.
 1.3.HTML y XHTML

SGML - Standard Generalized Markup Language

HTML XML

XHTML XSL MathML ...

7
1.4. HTML, diseo y programacin

Contenidos

Texto Diseo
+
Imgenes +
Tipos de letras
Colores
Mrgenes Programacin

+
Javascript

8
 1.4. HTML y CSS

Incluir en una misma pgina HTML los

contenidos, el diseo y la programacin
complican su mantenimiento, por lo que es
conveniente separarlos.
Estructura Presentacin
XHTML CSS

9
2. Caractersticas bsicas (HTML/XHTML)
XHTML Sintaxis ms estricta
Si las pginas web se sirven al navegador como
application/xhtml+xml, el navegador debe rechazar
las pginas invlidas, pero si se sirven al navegador como
text/html, los navegadores intentan mostrar el
documento aunque contenga errores
Aunque los navegadores a menudo consiguen mostrar
documentos invlidos, se aconseja validar y corregir los
documentos para asegurar que los navegadores puedan
mostrarlos correctamente
2. Caractersticas bsicas (HTML/XHTML)
XHTML HTML
un nico elemento raz de todo Obligatorio No tiene porque
el documento, el elemento
<html>.
Elementos bien anidados (no se Si Si
pueden cruzar las etiquetas).
Toda etiqueta se abre y se cierra Si Si
con el mismo nombre
un atributo slo puede aparecer SI Si
una vez en cada etiqueta de
apertura o en cada etiqueta vaca
 2. Caractersticas bsicas (HTML/XHTML)
XHTML HTML
los nombres de elementos y atributos deben Si No tiene porque
escribirse en minsculas
la etiqueta de apertura de los elementos vacos Si No pueden tener
debe acabar en " />" o debe haber una etiqueta etiqueta de cierre
de cierre.
los atributos deben tener siempre valor (en el SI Pueden no tener
caso de atributos booleanos, el valor debe ser el valor asignado
propio nombre del atributo o una cadena vaca).
los valores de los atributos deben escribirse Si no es necesario si
entre comillas (dobles o simples). no hay espacios
en blanco
los espacios en blanco iniciales y finales en los Si Si
valores de los atributos no se tienen en cuenta.
Varios espacios en blanco seguidos se cuentan
como 1 slo
el valor de un atributo id no se puede repetir en Si Si
un documento
Durante el curso, aunque creemos
el documento como HTML 5, nos
atendremos a las normas ms
restrictivas del XHTML
2.1.Ventajas XHTML

Mayor vida de los documentos.

Mayor compatibilidad con los exploradores.
Mejor legibilidad del cdigo.
Mayor accesibilidad.
Mayor portabilidad hacia otros soportes.

14
 2.2.Gramtica del lenguaje XHTML

Al crear un documento XHTML,

utilizaremos:
Etiquetas
Atributos

Elementos

Referencias a caracteres

Comentarios

15
 2.2.1.Etiquetas

Sirven para organizar el contenido del

documento.
Se introducen mediante los signos < y >
Pueden ser:
De apertura <etiqueta>
De cierre </etiqueta>
De contenido vaco <etiqueta />

16
 2.2.2.Atributos

Son propiedades que llevan asociadas las

etiquetas
Se introducen en la etiqueta de apertura
antes del signo >, mediante pares
propiedad=valor
Por ejemplo:
<a href=www.iesabastos.org>Instituto de Abastos</a>

17
 2.2.3.Elementos

Un elemento es mucho ms que una

etiqueta, ya que est formado por:
Una etiqueta de apertura.
Cero o ms atributos.

Texto encerrado por la etiqueta.

Una etiqueta de cierre.

18
<a href=www.iesabastos.org > Instituto de Abastos </a>

atributo texto

Etiqueta apertura Etiqueta

cierre

Elemento

19
2.2.3.1Tipos de elementos
Los elementos de bloque siempre
empiezan en una nueva lnea y
ocupan todo el espacio disponible
hasta el final de la lnea, aunque sus
contenidos no lleguen hasta el final
de la lnea.
Los elementos en lnea slo ocupan
el espacio necesario para mostrar sus
contenidos.
http://librosweb.es/libro/xhtml/capitulo_2/elementos_html.html

DE BLOQUE DE LNEA
Pueden de bloque Texto
contener de lnea de lnea

20
 2.2.4.Referencias a caracteres

Son nombres numricos o simblicos de

caracteres que pueden incluirse en un documento
XHTML.
Comienzan con el signo & y terminan con un
punto y coma ;.
Representan caracteres especiales u otros que no
pueden introducirse directamente.
Por ejemplo:
&nbsp; espacio en blanco
&lt; signo <

21
2.2.5.Comentarios

Los comentarios son ignorados por el

navegador y no se visualizan.

<! -- comentario en una lnea -->

<! -- primera lnea del comentario,
segunda lnea del mismo comentario -- >

22
2.2.6.Reglas de escritura XHTML
Diferencias con HTML (Resumen)
Estructura del documento
XHTML DOCTYPE obligatorio
Atributo xmlns en <html> obligatorio
<html>,<head>,<title> y <body> obligatorios
Elementos
Anidados correctamente
SIEMPRE se cierran
Etiquetas en minsculas
Atributos
Nombre en minsculas
Siempre entrecomillados
Minimizacin prohibida
 3.Estructura de un documento
XHTML/HTML

Declaracin DOCTYPE
Etiqueta <html>
Etiqueta <head>
Etiqueta <title>

Etiqueta <meta />

Etiqueta <body>

24
Documento XHTML mnimo

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=es lang=es>
<head>
<title> mi pgina</title>
<meta http-equiv=Content-type content=text/html; charset=iso-8859-15 />
</head>
<body>
</body>
</html>

Imprescindible
Imprescindible en XHTML pero invlido en HTML5
Opcional
25
Declaracin DOCTYPE
Define el tipo de documento XHTML
Tipos: http://librosweb.es/libro/xhtml/capitulo_10/doctype.html
Modo estricto
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0
Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd>
Modo transicional
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0
Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd>
Modo frameset
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0
Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd>
Busca cmo sera la declaracin en HTML5
26
Etiqueta <html>..</html>

Constituye el elemento raz del documento

<html xmlns=http://www.w3.org/1999/xhtml xml:lang=es lang=es>

<head> ... </head>

Idioma utilizado por el documento
<body> ... </body>
Por compatibilidad con los
Obligatorio antiguos navegadores
</html>

En XHTML es OBLIGATORIO indicar el espacio de nombre

En HTML5 es INCORRECTO indicar el espacio de nombre 27
Etiqueta <head> ..</head>

Es la cabecera del documento

Contiene informacin relativa al
documento. Esta informacin no se muestra
Ttulo del documento <title> ... </title>
Enlaces a recursos <link />
Llamadas a hojas de estilo CSS
Funciones JavaScript, PHP...
Etiquetas meta <meta atributos />

28
Ejemplo <head>
Cabecera tpica
 Etiqueta <title>..</title>

De uso obligatorio
Da ttulo a la pgina web
Se visualiza en la esquina superior izquierda
del explorador(o como ttulo de la pestaa)
Utilizado por el algoritmo de indexacin de
Google (incluir palabras clave)

30
Etiqueta <meta />

Ejemplos de uso:
Sustituir el documento actual por otro en un
n de segundos
Incluir elementos informativos: autor, fecha de
expiracin del documento, programa con el
que se disea la pgina
Atributos: http-equiv o name, indican el
nombre de la informacin a incluir
El valor se indica en el atributo content

31
Etiquetas <meta>
<meta name>
Se usan principalmente para optimizar el
resultado de los motores de bsqueda
La informacin que manejan no se presenta en
pantalla
<meta http-equiv>
Se utilizan para dar instrucciones a los
navegadores.
Tienen influencia sobre lo que aparece en pantalla
 Ejemplos de <meta />
Redireccin de la pgina
<meta http-equiv=refresh content=10;URL=//otro_sitio.html />
Ejs.: https://desarrolloweb.com/articulos/recargar-redirigir-html-
meta.html
informa del juego de caracteres empleado en la
pgina.
<meta http-equiv=Content-Type content=text/html; charset=UTF-8 />
En HTML5 tambin se puede poner: <meta charset="UTF-8">
indica que la pgina se ha realizado con Amaya
<meta name="generator" content="Amaya, see http://www.w3.org/Amaya/"/>

33
 Etiqueta <body> .. </body>

Contiene el cuerpo del documento

No posee atributos
Etiquetas necesarias:
<address>, <blockquote>,<div>, <dl>,
<fieldset>, <form>, <h1>, <h2>, <h3>,
<h4>, <h5>, <h6>, <hr />, <ol>, <noscript>,
<p>, <pre>, <script>, <table>, <ul>, ...

36
Etiquetas XHTML/HTML5
XHTML: Elemento eliminado HTML5: Usado en su lugar
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> CSS, <s>, or <del>
<tt> CSS
Validacin de Archivos XHTML
La validacin es el proceso que asegura que un documento
escrito en un determinado lenguaje (por ejemplo XHTML)
cumple con las normas y restricciones de ese lenguaje. Las
normas y restricciones de los documentos escritos en
XML (y en sus lenguajes derivados, como XHTML) se
definen en el DTD o Document Type Definition ("Definicin
del Tipo de Documento").
Validadores:
https://validator.w3.org/ (en ingls)

38
Actividades
Crea y valida un ejemplo de documento mnimo:
de un XHTML estricto
de un HTML5
Busca en internet una tabla de referencias a
caracteres en html para tenerla a mano
qu diferencias hay entre una declaracin de tipo y
otro? cmo se declara el tipo de documento en
HTML5?
Crea 2 documentos XHTML con el siguiente texto
en el elemento body:
Documento1
Documento2
De modo que al abrir el primero se redireccione al
segundo en 10 segundos