XHTML XHTML XHTML y CSS
Introducción (1) XHTML HTML Reformulación de HTML 4.0 en XML 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.
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). En clase saltar esta transparencia y comentarlo directamente sobre la transparencia siguiente. XHTML y CSS
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
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.
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.
Introducción (5) Ventajas de utilizar XHTML en lugar de HTML 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). En clase comentar rápidamente. XHTML y CSS
Introducción (6) Interacción con otro tipo de documentos XML, por ejemplo, para realizar conversiones a otros tipos de documentos (XSLT).
Introducción (Ejemplo XHTML) <?xml version=“1.0” encoding=“UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html xmlns=“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>
Ejemplo XHTML (XML) <?xml version="1.0" encoding=“UTF-8"?> <!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>
Ejemplo XHTML (DTD) <?xml version=“1.0” encoding=“UTF-8”?> <!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>
Ejemplo XHTML (Esp. Nombres) <?xml version=“1.0” encoding=“UTF-8”?> <!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>
Ejemplo XHTML (Elementos) <?xml version=“1.0” encoding=“UTF-8”?> <!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>
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>
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=“€ € €” readonly=“readonly” /></p> <hr /> </body> </html>
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
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.
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 El espacio de nombres es un enlace a un recurso, habitualmente una DTD, que proporciona más información acerca de un grupo de elementos de marcado. XHTML y CSS
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 (>).
XHTML (3) Atributos Entidades 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 € o € Referencias a entidades de caracteres € Una entidad XML es una unidad de almacenamiento virtual que puede guardar todo tipo de información: archivos multimedia, bits de texto usados frecuentemente e incluso fragmentos de información descrita mediante marcación. Sin embargo, los navegadores más antiguos (e incluso algunos procesadores XHTML) no saben que hacer con las entidades XML. Por esta razón, habitualmente las entidades en documentos XHTML sólo se utilizan para identificar caracteres especiales o no ASCII (como el símbolo del copyright): Entidades carácter: empiezan con un & y terminan por un ; (& < > ©) Entidades numéricas: empiezan con &# y terminan con un ; XHTML y CSS
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
XHTML (5) Listas Tablas Elementos de frase Formularios 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
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.
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").
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.
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.
XHTML (10) Eventos de ventana Eventos de teclado 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.
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.