1 / 28

XHTML

XHTML. Introducción (1). XHTML Reformulación de HTML 4.0 en XML HTML El HyperText Markup Language es el lenguaje de publicación usado por la World Wide Web.

calantha-nicolo
Download Presentation

XHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XHTML XHTML

  2. Introducción (1) • XHTML • Reformulación de HTML 4.0 en XML • HTML • El HyperText Markup Language es el lenguaje de publicación usado por la World Wide Web. • Es una aplicación SGML (Standard Generalized Markup Language), un sistema para definir lenguajes para dar formatos a documentos.

  3. Introducción (2) • Partes de un documento HTML • Una sección de cabecera que contiene el título del documento y otras informaciones sobre éste. • El cuerpo del documento. • Por ser una aplicación SGML incluye una Definición del Tipo de Documento (DTD) • El DTD define la sintaxis de las estructuras de formato y puede incluir definiciones adicionales, tales como referencias a entidades de caracteres (nombres simbólicos o numéricos de caracteres que pueden incluirse en un documento HTML).

  4. Introducción (Ejemplo HTML 4.01) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML LANG="es"> <HEAD> <TITLE>Título del documento</TITLE> </HEAD> <BODY> <H1>Cabecera de documento</H1><!-- Título de sección --> <P ID="inicial">Un párrafo en el cuerpo<BR>del documento.</P> <HR> </BODY> </HTML> DTD Cabecera Cuerpo

  5. Introducción (3) • XML • El eXtensible Markup Language describe una clase de objetos de datos, los documentos XML. • Está diseñado como un subconjunto de SGML. • Grupo de reglas y convenios sintácticos que permiten construir nuevos elementos de marcado. • Más flexible que HTML • Permite describir las partes de un documento independientemente de cómo se mostrará. • Es un lenguaje de descripción de información.

  6. Introducción (4) • XHTML es un vocabulario de XML • Los documentos XHTML se deben adherir a un grupo de reglas más estricto que incluye poner siempre comillas alrededor de los valores de atributos y anidar los elementos correctamente. • XML, y por tanto XHTML también, hace distinción entre mayúsculas y minúsculas. Todos los elementos y atributos de XHTML deben ir en minúsculas.

  7. Introducción (5) • XML, en consecuencia XHTML también, separa la descripción del documento de su presentación. • Ventajas de utilizar XHTML en lugar de HTML • Los documentos XHTML son conformes a XML • Son fácilmente visualizados, editados y validados con herramientas XML estándar. • Soportado por un mayor número de agentes de usuario (sistemas que procesan el documento). • Los scripts pueden utilizar el Modelo del Objeto Documento HTML o XML (DOM).

  8. Introducción (6) • Interacción con otro tipo de documentos XML, por ejemplo, para realizar conversiones a otros tipos de documentos (XSLT).

  9. Introducción (Ejemplo XHTML) <?xmlversion=“1.0” encoding=“UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/html4/strict.dtd”> <htmlxmlns=“http://www.w3.org/1999/xhtml" xml:lang=“es” lang=“es”> <head> <title>Título del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Título de sección --> <p id=“inicial”>Un párrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>

  10. Ejemplo XHTML (XML) <?xmlversion="1.0" encoding=“UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Título del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Título de sección --> <p id=“inicial”>Un párrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>

  11. Ejemplo XHTML (DTD) <?xmlversion=“1.0” encoding=“UTF-8”?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Título del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Título de sección --> <p id=“inicial”>Un párrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>

  12. Ejemplo XHTML (Esp. Nombres) <?xmlversion=“1.0” encoding=“UTF-8”?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="es"> <head> <title>Título del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Título de sección --> <p id=“inicial”>Un párrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>

  13. Ejemplo XHTML (Elementos) <?xmlversion=“1.0” encoding=“UTF-8”?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Título del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Título de sección --> <p id=“inicial”>Un párrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>

  14. Ejemplo XHTML (Elem. vacíos) <?xml version=“1.0” encoding=“ISO-8859-15”?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Título del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Título de sección --> <p id=“inicial”>Un párrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>

  15. Ejemplo XHTML (Atributos y Ent.) <?xml version=“1.0” encoding=“ISO-8859-15”?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Título del documento</title> </head> <body> <h1><img src=“j0335100.gif” width=“85” height=“85” alt=“logo” /> Cabecera de documento</h1> <!-- Título de sección --> <p id=“inicial”>Entrada de texto<br /> <input type=“text” value=“&#8364; &#x20AC; &euro;” readonly=“readonly” /></p> <hr /> </body> </html>

  16. Tipo de elementos del cuerpo (1) • Elementos en bloque y elementos en línea • Se distinguen en los siguientes aspectos • Modelo de contenido • Generalmente, los elementos en bloque pueden contener elementos en línea y a otros elementos en bloque. • Generalmente, los elementos en línea sólo pueden contener datos y a otros elementos en línea. Inherentemente a esta distinción estructural está la idea de que los elementos en bloque crean estructuras "más grandes" que los elementos en línea. Otros aspectos

  17. Tipo de elementos del cuerpo (2) • Formato • Los elementos en bloque tienen por defecto un formato diferente que el de los elementos en línea. Generalmente, los elementos en bloque comienzan en una nueva línea, y los elementos en línea no. • Direccionamiento • Por razones técnicas relacionadas con el algoritmo de texto bidireccional de UNICODE, los elementos en bloque y en línea difieren en el modo de heredar la información de direccionamiento.

  18. XHTML (1) • Documentos bien formados y validados • Declaración XML • Definición del Tipo de Documento (DTD) • Identifica los elementos de un vocabulario • Especifica los atributos de cada elemento • Especifica cómo se usan los elementos • Identifica entidades y la información que tienen o representan • Espacio de nombres

  19. XHTML (2) • Elementos • Representan estructuras o comportamientos deseados en un documento SGML. XHTML incluye elementos que representan párrafos, vínculos de hipertexto, listas, tablas, imágenes, etc. y describen el contenido de un documento. • Los elementos que describen datos tienen una etiqueta de inicio y otra de fin (entre < y >). • Los elementos vacíos deben incluir una barra inclinada (/) antes del final (>).

  20. XHTML (3) • Atributos • Proporcionan información adicional sobre un elemento. • Pueden ser obligatorios u opcionales. • Todos los valores de los atributos deben estar entre comillas. • XML, y por tanto XHTML, no permite la minimización de atributos. • Entidades • Referencias numéricas de caracteres • &#8364; o &#x20AC; • Referencias a entidades de caracteres • &euro;

  21. XHTML (4) • Organización de elementos • Elementos de nivel superior • html, head, body • Elementos de cabecera • link, meta, script, style, title • Elementos en bloque • div, h1 a h6, hr, noscript, p, pre • Elementos en línea • br, a, img, map, area, script, span

  22. XHTML (5) • Listas • dl, dt, dd, ul, ol, li • Tablas • table, caption, tr, th, td • Elementos de frase • abbr, acronym, code, em, strong, var • Formularios • form, button, fieldset, legend, input, label, select, optgroup, option, textarea

  23. XHTML (6) • Atributos principales • Se pueden aplicar a la mayoría de los elementos. • id: permite asignar un identificador a un único elemento • class: permite asignar una clase o un conjunto de clases a un elemento. • title: permite aplicar un título a un elemento específico. • style: permite aplicar un estilo a un elemento específico.

  24. XHTML (7) • Atributos de internacionalización • Se pueden aplicar a la mayoría de los elementos. • lang: especifica un lenguaje que se aplicará a un elemento y a su contenido. El valor del atributo debe especificarse conforme a la RFC 1766 (p.e, es-ES para español). • dir: especifica el sentido del texto de izquierda a derecha (dir="ltr", el valor por defecto) o de derecha a izquierda (dir="rtl").

  25. XHTML (8) • Atributos de teclado • Se pueden aplicar a los elementos a, area y formularios. • acceskey: permite asignar una tecla de acceso rápido a un elemento. • tabindex: permite asignar un orden de tabulación a un elemento.

  26. XHTML (9) • Eventos • Eventos de formulario • onchange: se ejecuta el script cuando el elemento cambia. • onsubmit: se ejecuta el script cuando se envía el formulario. • onreset: se ejecuta el script cuando se limpia el formulario. • onselect: se ejecuta el script cuando se selecciona el elemento. • onblur: se ejecuta el script cuando el elemento pierde el foco. • onfocus: se ejecuta el script cuando el elemento gana el foco.

  27. XHTML (10) • Eventos de ventana • onload: el script se ejecuta cuando se carga un documento. • onunload: el script se ejecuta cuando se descarga un documento. • Eventos de teclado • onkeydown: el script se ejecuta cuando se presiona una tecla. • onkeypress: el script se ejecuta cuando se presiona y libera una tecla. • onkeyup: el script se ejecuta cuando se libera una tecla.

  28. XHTML (11) • Eventos de ratón • onclick: al hacer clic con el ratón. • ondblclick: al hacer doble clic con el ratón. • onmousedown: al presionar el botón del ratón. • onmousemove: cuando se mueve el puntero del ratón. • onmouseout: cuando el puntero del ratón se mueve fuera de un elemento. • onmouseover: cuando el puntero del ratón se mueve sobre un elemento • onmouseup: al liberar el botón del ratón.

More Related