Xhtml

Introducción a XHTML César F. Acebal Universidad de Oviedo www.cesaracebal.com Curso de CSS avanzado

Separación entre presentación y contenido Esa distinción no está siempre clara: HTML también tiene etiquetas de describen la presentación en vez de la estructura En el Word podemos trabajar con estilos Conjunto de características que se pueden aplicar a una porción de texto Por ejemplo, que el estilo Título 1 vaya en Helvética negrita y cursiva, y a 18 puntos

Salvando las limitaciones del HTML El HTML es un lenguaje muy sencillo Ésa es precisamente una de las razones del enorme éxito del Web Los diseñadores han tratado, desde el principio, de salvar sus limitaciones estilísticas Si bien la intención era buena (mejorar la presentación de los documentos), las técnicas usadas solían tener efectos secundarios indeseados

Salvando las limitaciones del HTML Ejemplos de estas técnicas son: Usar extensiones de HTML propietarias Convertir texto en imágenes Meter texto en tablas Escribir un programa en vez de usar HTML

Extensiones de HTML propietarias Los vendedores de navegadores comenzaron a crear sus propias etiquetas, para dar más control a los autores sobre la apariencia de una página Web Llegó un momento en cada nueva versión incorporaba nuevas etiquetas Pero estas etiquetas no son universales, sólo funcionan en un navegador determinado No tienen sentido en navegadores no visuales (de voz, Braille, etcétera) o en navegadores de texto (Lynx, dispositivos de mano –teléfonos, PDA...–) Por el contrario, los elementos de HTML son independientes del dispositivo Ejemplo: <em> Destacar esto </em> Las hojas de estilo han permitido eliminar todos estos elementos Ya no hacen falta elementos como <center> o <font> En HTML 4.0 fueron relegadas a una versión de transición

Convertir texto en imágenes Haciendo que el texto sea una imagen, el diseñador tiene control total sobre fuentes, espaciado, colores... (el texto se verá tal cual el lo creó) Luego, simplemente inserta la imagen en la página donde debiera ir el texto Problemas: Elimina la accesibilidad de la página Requiere tiempo de espera por parte del usuario

Accesibilidad Capacidad de usar la información de una página por parte de personas o programas Los robots ( crawlers , spiders ) examinan las páginas Web de Internet para indexarlas en sus sistemas de búsqueda (Google, AltaVista...) No pueden leer imágenes No todos los usuarios tienen navegadores gráficos Aun teniéndolo, puede tenerlo configurado para ver el texto a un tamaño mayor La única solución (aparte de CSS) es incluir una descripción textual de la imagen

Tiempo de espera Lleva tiempo cargar y dibujar las imágenes en el navegador El usuario puede impacientarse y abandonar la página antes de que ésta termine de cargarse

Colocar texto en tablas Permite controlar la disposición del texto Ejemplo: añadir un margen al documento Es común que todo el contenido de una página vaya dentro de una tabla (y que ésta tenga, a su vez, muchas más tablas dentro) No todos los navegadores admiten tablas En ese caso no se verá la página Complica la escritura del HTML Cuanto más compleja sea la estructura de las tablas, más difícil será escribir y mantener el código

Colocar texto en tablas También tiene problemas de accesibilidad Por ejemplo, los programas que tratan de leer las páginas sin mostrarlas visualmente Un navegador de voz podría indicar al usuario que entra en una tabla, y emitir un sonido cada vez que entra en una casilla Eso sólo tiene sentido si la información es realmente tabular: listas de precios, ventas... Otros navegadores para pantallas pequeñas podrían mostrar sólo una casilla de cada vez Usadas con cuidado, a veces pueden ser una buena solución No obstante, CSS prácticamente elimina la necesidad de usar tablas para composición

Escribir un programa en vez de usar HTML Ejemplo: applets Java, Flash Esto da control total sobre cada píxel de la pantalla (algo que ni siquiera es posible con CSS) Tiene muchos de los inconvenientes anteriores La gracia de HTML es que el mismo documento puede verse en un montón de dispositivos diferentes HTML es un estándar universal de formato de datos para la publicación de información

Elementos Un elemento normalmente tiene tres partes: etiqueta de inicio contenido etiqueta de fin Nombre atributo <a href=“aficiones.html”>Aficiones</a> Nombre elemento Valor atributo CONTENIDO ATRIBUTO ETIQUETA DE INICIO ETIQUETA DE FIN ELEMENTO

Sintaxis de los elementos Todas las etiquetas empiezan por “ < “ y terminan con “ > ” Entre ellas va el nombre del elemento Algunos elementos pueden tener atributos El valor de los atributos va siempre entrecomillado El contenido no tiene por qué ser sólo texto: también puede tener otros elementos La etiqueta de fin se llama igual que la de principio con la barra “ / ” ( slash ) Hay elementos que no tienen etiqueta de fin ni contenido <br> Nota: en XHTML todos los elementos tienen que cerrarse: <br></br> <br />

Sintaxis de HTML Son documentos estructurados La especificación define qué elementos puede contener un documento, cómo se relacionan los elementos entre sí y sus posibles atributos y valores Cuál puede ser el contenido de un elemento: texto, otros elementos, mezcla de texto y elementos o nada En HTML, los nombres de los elementos y de los atributos da igual que vayan en mayúsculas o en minúsculas En XHTML –una reformulación de HTML para que cumpla las normas de XML– deben ir en minúsculas En XHTML, los valores de los atributos siempre van entrecomillados Comentarios:

Sintaxis de HTML Los elementos se pueden anidar (cumpliendo las normas de la especificación): <b><i>Correcto</i></b> Pero no pueden cruzarse: <b><i>Incorrecto</b></i> Los navegadores hacen caso omiso de las etiquetas desconocidas (aunque procesan el contenido): < pepe >Contenido</ pepe > Y lo mismo con los atributos (en este caso obvian también su valor): <h1 pepe=“hola” >Contenido</h1>

Permisividad de los navegadores Al final, la corrección de un documento queda al arbitrio de los navegadores No es como hacer un programa, donde el compilador nos informa de todos los errores Lo que para un navegador puede ser válido, para otro puede que no, o que lo interprete de forma completamente distinta Tratan de adivinar lo que quiso decir el autor Debemos tratar de ajustarnos al estándar Se puede comprobar la corrección de una página con los validadores Comparan la página con la especificación (la gramática) de HTML: DTD Aun así, hay que probar siempre una página con varios navegadores (distintas marcas y versiones, plataformas, etc.)

XML Puesto que afirmamos que XHTML es XML, comentaremos rápidamente algunos conceptos muy básicos de éste, como son la diferencia que hace entre buena formación y validez de los documentos.

Documentos “ Un objeto de datos es un documento XML si está bien formado . Un documento XML bien formado puede, además, ser válido , si cumple otras restricciones.”

Buena formación Un documento XML está bien formado si cumple las reglas sintácticas de la especificación ¡Ojo!, nótese que hablamos de reglas sintácticas, no de gramática (XML no tiene una gramática definida, ésta se la definimos nosotros mediante los DTD) Ejemplos: Que no haya etiquetas sin cerrar Que no se entremezclen etiquetas: <a><b></a></b> Etcétera

Validez Para que un documento XML sea válido debe incluir la declaración <!DOCTYPE> al principio, donde viene especificada la DTD Definición de tipo de documento El documento debe adecuarse a la gramática impuesta por dicha DTD Si no se incluyera esa declaración, el procesador XML no realizaría la comprobación de validez

Estructura de un documento HTML <!DOCTYPE html PUBLIC “ -//W3C//DTD HTML 4.01 EN//” “ http://www.w3.org/TR/html4/strict.dtd”> <html> <head> <title>Mi primera página Web</title> </head> <body> ¡Hola, mundo! </body> </html>

Declaración de XML En un documento XHTML, habría que añadir también la declaración de XML: ISO-8859-1 es el juego de caracteres europeo Por omisión, el tipo de codificación es UTF-8 <?xml version=“1.0” encoding=“ISO-8859-1” ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd "> <html> ... </html>

Versiones de HTML World Wide Web Consortium (W3C): Organización encargada de estandarizar las tecnologías Web www.w3 . org Tres variantes de HTML 4.01: Strict Eliminó todos los elementos y atributos que tenían que ver con la presentación y no con la estructura  todo eso se hará ahora con hojas de estilo Transitional Mantiene bastantes elementos y atributos de presentación Pensada como etapa de transición (desaparecerá del estándar) Frameset Lo mismo que la de transición pero para documentos con marcos (frames) XHTML: lo mismo con pequeños cambios de sintaxis para que los documentos HTML sean también documentos XML

Tipos de elementos Los elementos pueden dividirse en tres grupos: De nivel de bloque Insertan una línea en blanco antes y después de su contenido <h1> , <p> ... De línea <strong> , <em> , <a> , <img> ... Invisibles <title> , <link> , <style>

Elementos de XHTML A continuación, iremos viendo qué elementos define la especificación XHTML y cómo éstos pueden combinarse (son las reglas a las que deberemos ajustarnos para crear el contenido de nuestras páginas Web).

Elemento <title> Va en la cabecera <head> <title>AA Funky Software</title> </head> Es obligatorio ¿Para qué sirve? Es lo que aparece en la barra de título de la ventana del navegador También lo que aparece al añadir la página a favoritos Es utilizado por los robots de indexación de los buscadores

Elemento <title>. Consejos Hay que darle un nombre significativo Aunque mejor si es a la vez conciso Puede ser conveniente indicar la estructura en el propio título, como ayuda a la navegación <title> MiEmpresa - ¿Quiénes somos? – Consejo de Administración </title>

Elementos de bloque Cuerpo del documento ( body ) Títulos ( h1, h2... h6 ) Párrafos ( p ) Salto de línea ( br ) Barra o separador horizontal ( hr ) Preformateado ( pre ) Citas de bloque ( blockquote ) Listas Desordenadas ( ul, li ) Ordenadas ( ol, li ) De definición ( dl, dt, dd ) División ( div ) Tablas Formularios

Elemento <body> Representa el cuerpo, el contenido en sí del documento Todo lo que vaya dentro de él es lo que realmente se muestra en la página Web Nota : dentro del elemento <body> no podemos poner texto suelto, directamente, ni elementos de línea, sino sólo elementos de bloque

Elementos de título: <h1>, <h2>… <h6> Permiten dividir el documento en secciones lógicas <h1> sería el título principal de la página Tras él vendrán secciones ( <h2> ), subsecciones ( <h3> )… y así sucesivamente hasta el nivel <h6> Normalmente, el navegador aplicará un estilo distinto a cada título Más grande, en negrita… Sólo pueden contener elementos de línea

A propósito de los elementos de título No hay que olvidar que se trata de elementos lógicos: No deben utilizarse pensando en el formato que les a dar el navegador Además, éste puede variar de unos a otros (y eso sin tener en cuenta los navegadores no gráficos: de texto, lectores de pantalla, etc.) Deben tener sentido Que <h1> sea realmente el título de la página, que <h2> sean las secciones en las que tiene sentido dividir la página, y así sucesivamente Además, conviene respetar la jerarquía Que no aparezca un <h3> , por ejemplo, sin que antes haya un <h2>

Ejemplo del uso de títulos <h1> Creación de sitios Web mediante hojas de estilo </h1> <h2> Introducción al Web y a XHTML </h2> ... <h2> XHTML (Continuación) </h2> ... <h3> Tablas </h3> ...

Párrafos: elemento <p> Se trata también de un elemento lógico Permite dividir el documento en párrafos No puede contener otros elementos de bloque No debe usarse para obtener saltos de línea Además, no funcionaría ( comprobarlo ) La forma de insertar un salto de línea es mediante <br> Así sí podemos tener varías líneas de separación Pero cuando deseemos más espaciado vertical es mejor acudir a las hojas de estilo que al elemento <br>

Ejercicio Se trata de probar lo visto hasta la fecha, para lo que crearemos nuestra primera página Web Recordemos: Título ( <title> ) Títulos o cabeceras ( <h1> …) Párrafos ( <p> ) Saltos de línea ( <br> ) Aunque en la práctica no abusaremos de este elemento ¿Qué ocurre con los espacios en blanco, tabuladores y saltos de línea que escribimos directamente en nuestro código HTML? ¿Cómo se visualizan? ¿A qué crees que se debe esto?

Texto preformateado: <pre> Si queremos que la página Web muestre el mismo formato (espacios, tabulaciones y saltos de línea) que el código HTML, encerramos ese texto en un elemento <pre> Por ejemplo, un poema, una porción de código… Se usa muy poco Problema: los tabuladores Se desaconseja su uso en el texto preformateado, porque el número de espacios a que se corresponden puede no coincidir en el navegador y el editor empleado

Citas de bloque: <blockquote> Permite incluir largas citas textuales en la página (es un elemento de bloque) Atributos: cite Como valor, tiene un URI (normalmente será un URL, es decir, una dirección de otra página Web) Es decir, ahí se indicaría la fuente de la que procede la cita Normalmente, los navegadores lo visualizan con un ligero sangrado ¿Tiene algún otro efecto en los navegadores actuales? ¿Se os ocurre algún otro que pudieran tener?

Tipos de listas en HTML Existen tres tipos de listas: Ordenadas Desordenadas De definición Las listas se pueden anidar Es decir, un elemento de una lista puede ser a su vez otra lista No tienen por qué ser del mismo tipo Un elemento de una lista desordenada pueden ser, por ejemplo, una serie de puntos representados como una lista ordenada

Listas ordenadas Ejemplo: Sintaxis: <ol> (de “ordered list”) designa a toda la lista Cada elemento se indica mediante <li> 1. Introducción al Web y a XHTML 2. XHTML (Continuación) 3. Introducción a las hojas de estilo

Listas desordenadas Ejemplo: Esta misma diapositiva Sintaxis: <ul> (de “unordered list”) designa a toda la lista Cada elemento se indica mediante <li>

Listas de definición Están pensadas para diccionarios, glosarios, etc. Ejemplo: Webmail, webmail ( correo electrónico de sitio web,correo basado en web,correo web ) Servicio que permite gestionar el correo electrónico desde un sitio web. Es de gran utilidad para personas que tienen que desplazarse con frecuencia y lo ofrecen habitualmente los proveedores de acceso a Internet. Ver también: "email ", "ISP ", "website ". Webmaster, webmaster (administrador de Web) Persona que se encarga de la gestión y mantenimiento de un servidor web, fundamentalmente desde el punto de vista técnico; no hay que confundirlo con el editor de web (webeditor). Ver también: "Web editor, web editor ", "web server ".

Listas de definición Pueden tener más usos que el anterior Por ejemplo, una lista con las características de un producto: Sintaxis: <dl> para la lista completa <dt> el término a definir <dd> la definición Lower cost The new version of this product costs significantly less than the previous one! Easier to use We've changed the product so that it's much easier to use! Safe for kids You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).

Ejercicio Crear una lista como la siguiente: The ingredients: • 100 g. flour • 10 g. sugar • 1 cup water • 2 eggs • salt, pepper The procedure: 1. Mix dry ingredients thoroughly. 2. Pour in wet ingredients. 3. Mix for 10 minutes. 4. Bake for one hour at 300 degrees. Notes: The recipe may be improved by adding raisins.

Elementos de línea Elementos lógicos ( em, strong, code... ) Elementos físicos ( i, b, tt... ) Enlaces ( a ) Imágenes ( img ) span

Elementos lógicos y físicos HTML no es un lenguaje de descripción de página física, como PostScript o los editores WYSIWYG (Word, por ejemplo) Éstos definen la presentación del documento Negrita ( <b> ), Cursiva ( <i> )... HTML define la estructura lógica de un documento, no su aspecto (que queda a la elección del navegador) <strong>, <em>...

Elementos físicos Cursiva ( <i> ) Negrita ( <b> ) Máquina de escribir ( <tt> ) Más grande ( <big> ) Más pequeño ( <small> ) Subíndice ( <sub> ) Superíndice ( <sup> )

Elementos lógicos Indican el tipo de contenido que encierran, no cómo debe presentarse No tiene sentido una etiqueta de negrita en un navegador de voz o Braille, o en otros tipos de navegadores (PDA, etc.) Con las hojas de estilo, tenemos control total sobre cómo deben presentarse los elementos lógicos Evitaremos, por tanto, el uso de elementos físicos

Elementos lógicos Importante ( <strong> ) Énfasis ( <em> ) Código ( <code> ) Dirección ( <address> ) Abreviatura ( <abbr> ) <abbr title=“Massachusetts Avenue”>Mass. Ave.</abbr> Acrónimo ( <acronym> ) <acronym title=“HiperText Markup Language”>HTML</acronym> Cita ( <cite> y <q> )

Entidades de carácter Sintaxis: & código ; Donde “código” es una palabra reservada o un número que indica el carácter a representar Permiten poner caracteres especiales en un documento: Letras acentuadas, etc. Juego de caracteres para el español: ISO 8859-1 (Latin-1)

Algunas entidades de carácter ¡ ¡ ¿ ¿ Ñ Ñ ñ ñ ... Á Á ... é é á á — — - &rdash; € € © ©   > > < < & & “ "

URL URI: Uniform Resource Identifier URL: Uniform Resource Locator Un URL es la dirección única de todo documento en el Web http://www.eutio.uniovi.es/ Estructura básica: protocolo://dirección del sitio[:puerto]/directorio/fichero

Protocolo Un protocolo define el modo en que se comunican dos ordenadores para llevar a cabo alguna tarea Protocolo del Web: HTTP (HyperText Transfer Protocol) Especifica cómo tiene lugar el diálogo entre el navegador y el servidor para conseguir el fichero especificado No se ocupa del transporte en sí: TCP Cada vez que tecleamos una dirección o pulsamos un enlace el navegador se comunica vía HTTP con el servidor Web indicado

Protocolos más utilizados Permite enviar un correo electrónico mailto Páginas Web http File Transfer Protocol ftp Permite acceder a un fichero en el sistema de ficheros local file

Dirección del sitio Suele ser un nombre simbólico: nombre de dominio www.uniovi.es especifica una máquina llamada “www” en el dominio “uniovi.es” El nombre de máquina puede ser cualquiera “ www” no es más que un convenio para especificar aquellas máquinas que son servidores Web como “ftp” suele designar a los servidores de FTP incluso aunque muchas veces se trate de la misma máquina

Dirección del sitio También podría ser directamente la dirección IP http ://156.35.14.3/ Los nombres de dominio no distinguen entre mayúsculas y minúsculas http :// www.uniovi.es / http ://WWW.UNIOVI.ES/ http :// wWw.UniOvi.es /

Directorio Hay que indicar la ruta hasta el fichero deseado Como mínimo, debe ir la barra (“/”) http://www.uniovi.es / Si no la ponemos, la pone el navegador por nosotros ...pero en los enlaces en HTML sí debe aparecer También se puede indicar un subdirectorio: http://www.uniovi.es/Vicerrectorados/Postgrado_TitulosPropios/doctorado/ Siempre se usa la barra “/”, no “\” (incluso aunque el servidor Web sea una máquina Windows: está definido por el estándar URI, no depende del SO) La ruta sí puede diferenciar entre mayúsculas y minúsculas (si el servidor Web es, por ejemplo, una máquina Unix)

Nombre del fichero Depende del SO del servidor Web Las páginas Web generalmente tienen como extensión .html o .htm Las extensiones son importantes para que el navegador sepa cómo tratar un fichero un .html, lo interpreta y lo muestra un .jpg, trata de mostrar la imagen un .doc, abre el Word si lo tenemos instalado etcétera

Nombre del fichero Si no se especifica, el servidor busca un fichero con un nombre determinado en el directorio especificado Normalmente, el index.html o el index.htm Se puede configurar el el programa que utilicemos como servidor Web (Apache, IIS...)

Puerto Por omisión, una petición HTTP se dirige al puerto 80 Por eso casi nunca la especificamos Pero se podría configurar el servidor Web para que “escuchase” peticiones en otro puerto En ese caso, hay que indicarlo explícitamente: http://www.midominio.com :8080 /

Enlaces en HTML Se indican con la etiqueta <a> <a href=“URL del documento destino” title=“Descripción del enlace”>Texto del enlace</a>

URL relativos Relativos, frente a los absolutos como http://www.uniovi.es/ , porque se parte de la ubicación actual Son enlaces a otras páginas o documentos locales (pertenecientes al propio sitio, no externos) Las mismas reglas que en Windows: El punto representa el directorio actual: “ . /musica/lunitaTucumana.mp3 ” (o “ musica/lunitaTucumana.mp3 ”) Y los dos puntos el directorio anterior: “ .. / .. /articulos/usabilidad/ ”

El enlace “mailto” Permite enviar un correo electrónico con sólo pulsar en un enlace Bueno, realmente lo que hace es crear un mensaje nuevo con esa dirección en el destinatario Es decir, abre el programa de correo electrónico que tenga instalado el usuario Ejemplo: <a href="mailto:acebal@ieee.org" title="Feel free to write me"> [email_address] </a>

Ejercicio Crear un documento HTML que contenga varios enlaces, tanto a otras páginas locales (crear para ello un mini-sitio Web con unas pocas páginas) como a sitios externos ¿Cómo representa el navegador los enlaces? ¿Y cuando ya han sido visitados? ¿Para qué sirve el atributo title ? Probar a crear una pequeña estructura de directorios

Ejercicio (cont.) Por ejemplo, que tenga una estructura similar a ésta: informática imágenes artículos apuntes

Ejercicio (cont.) Además, que todas las páginas tengan un menú principal con las distintas secciones del sitio En este caso, serían dos (las del primer nivel) Y que cada página muestre la ruta completa de esa página en la jerarquía del sitio Por ejemplo: inicio -> informática -> apuntes -> introducción al Web y a XHTML Poner en la página principal enlaces directos a algunas de las páginas inferiores de la jerarquía Tendría sentido hacerlo, por ejemplo, en una sección “Novedades” Probar a enlazar otros documentos distintos de HTML (Word, PDF, imágenes, ZIP, etc.)

Introducción El Web data de 1990, pero se empieza a popularizar a partir de 1993, con la llegada de Mosaic Píxel: elemento de imagen ( Pic ture El ement) Resolución de pantalla: ancho por alto 640  480, 800  600, 1024  768, 1600  1200... Número de colores 2 24 = 16 M. de colores 24 bits por píxel Color verdadero 2 16 = 65535 colores 16 bits por píxel Alta resolución 2 8 = 256 colores 8 bits por píxel SVGA 2 4 = 16 colores 4 bits por píxel VGA

Tipos de imágenes Vectoriales Se describen matemáticamente como un conjunto de curvas De mapa de bits = CIRCLE(50, red)

Mapas de bits Ejemplo Imagen de mapa de bits descomprimida de 640  480 y color de 24 bits 640  480  24 = 7.372.800 bits = 900 KB Con un módem de 56 Kbps  128 s ¿Qué es lo que se hace entonces? Comprimirlas Con pérdida Sin pérdida

GIF Compresión sin pérdida 8 bits (máximo de 256 colores) Efecto de tramado: al ajustar los colores Resulta adecuado para dibujos Permite transparencias Problema: aliasing (escalado) Sólo se puede poner un color como transparente .gif

JPEG Compresión con pérdida 24 bits de color Adecuado para fotografías No permite transparencia .jpg, .jpeg

Tiempos de respuesta 1 décima de segundo El usuario percibe que el sistema está reaccionando instantáneamente 1 segundo Sin demora, aunque se pierde la noción de instantaneidad 10 segundos Límite máximo para que el usuario espere sin hacer otras cosas Hay que tener en cuenta estos valores para el tamaño de cada documento

Imágenes en HTML Se insertan con la etiqueta <img> <img src=“URL” alt=“Texto alternativo” width=“ancho” height=“alto”/>

Atributo alt Proporciona una descripción de la imagen Es lo que aparecerá en un navegador de texto O lo que leerá un navegador de voz

Atributos height y width El propósito principal es reservar espacio en la página para la imagen que se está cargando Así el navegador puede ir mostrando los elementos de la página en su ubicación final No deben usarse para ajustar el tamaño Para eso usaremos un programa de diseño gráfico Tienen que reflejar el tamaño real de la imagen Una excepción a esto son las imágenes planas: <img src=“pixel_verde.gif” height=“100” widht=“50”>

Ejercicio Probar a introducir imágenes en un documento Poner algunas aparte (por ejemplo, en un bloque <div> ellas solas) y otras en medio de un texto ¿Cómo se visualizan?

Xhtml

Más contenido relacionado

La actualidad más candente (20)

Destacado (8)

Similar a Xhtml (20)

Último (20)

Xhtml