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 <ul><li>Esa distinción no está siempre clara: </li></ul><ul><ul><li>HTML también...
Salvando las limitaciones del HTML <ul><li>El HTML es un lenguaje muy sencillo </li></ul><ul><ul><li>Ésa es precisamente u...
Salvando las limitaciones del HTML <ul><li>Ejemplos de estas técnicas son: </li></ul><ul><ul><li>Usar extensiones de HTML ...
Extensiones de HTML propietarias <ul><li>Los vendedores de navegadores comenzaron a crear sus propias etiquetas, para dar ...
Convertir texto en imágenes <ul><li>Haciendo que el texto sea una imagen, el diseñador tiene control total sobre fuentes, ...
Accesibilidad <ul><li>Capacidad de usar la información de una página por parte de personas o programas </li></ul><ul><ul><...
Tiempo de espera <ul><li>Lleva tiempo cargar y dibujar las imágenes en el navegador </li></ul><ul><li>El usuario puede imp...
Colocar texto en tablas <ul><li>Permite controlar la disposición del texto </li></ul><ul><ul><li>Ejemplo: añadir un margen...
Colocar texto en tablas <ul><li>También tiene problemas de accesibilidad </li></ul><ul><ul><li>Por ejemplo, los programas ...
Escribir un programa en vez de usar HTML <ul><li>Ejemplo: applets Java, Flash </li></ul><ul><li>Esto da control total sobr...
Introducción a XHTML
Elementos <ul><li>Un  elemento  normalmente tiene tres partes: </li></ul><ul><ul><li>etiqueta de inicio </li></ul></ul><ul...
Sintaxis de los elementos <ul><li>Todas las etiquetas empiezan por “ < “ y terminan con “ > ” </li></ul><ul><li>Entre ella...
Sintaxis de HTML <ul><li>Son documentos estructurados </li></ul><ul><ul><li>La especificación define qué elementos puede c...
Sintaxis de HTML <ul><li>Los elementos se pueden anidar (cumpliendo las normas de la especificación): </li></ul><ul><li><b...
Permisividad de los navegadores <ul><li>Al final, la corrección de un documento queda al arbitrio de los navegadores </li>...
XML Puesto que afirmamos que XHTML es XML, comentaremos rápidamente algunos conceptos muy básicos de éste, como son la dif...
Documentos <ul><li>“ Un objeto de datos es un documento XML si está  bien formado . Un documento XML bien formado puede, a...
Buena formación <ul><li>Un documento XML está bien formado si cumple las  reglas sintácticas  de la especificación </li></...
Validez <ul><li>Para que un documento XML sea válido debe incluir la declaración  <!DOCTYPE>  al principio, donde viene es...
Estructura de un documento HTML <ul><li><!DOCTYPE html PUBLIC </li></ul><ul><li>“ -//W3C//DTD HTML 4.01 EN//”  </li></ul><...
Declaración de XML <ul><li>En un documento XHTML, habría que añadir también la declaración de XML: </li></ul><ul><ul><li>I...
Versiones de HTML <ul><li>World Wide Web Consortium (W3C): </li></ul><ul><ul><li>Organización encargada de estandarizar la...
Tipos de elementos <ul><li>Los elementos pueden dividirse en tres grupos: </li></ul><ul><ul><li>De nivel de bloque </li></...
Elementos de XHTML A continuación, iremos viendo qué elementos define la especificación XHTML y cómo éstos pueden combinar...
Elemento <title> <ul><li>Va en la cabecera </li></ul><ul><li><head> </li></ul><ul><li><title>AA Funky Software</title> </l...
Elemento <title>. Consejos <ul><li>Hay que darle un nombre significativo </li></ul><ul><ul><li>Aunque mejor si es a la vez...
Elementos de bloque <ul><li>Cuerpo del documento ( body ) </li></ul><ul><li>Títulos ( h1, h2... h6 ) </li></ul><ul><li>Pár...
Elemento <body> <ul><li>Representa el cuerpo, el contenido en sí del documento </li></ul><ul><ul><li>Todo lo que vaya dent...
Elementos de título: <h1>, <h2>… <h6> <ul><li>Permiten dividir el documento en  secciones lógicas </li></ul><ul><ul><li><h...
A propósito de los elementos de título <ul><li>No hay que olvidar que se trata de elementos lógicos: </li></ul><ul><ul><li...
Ejemplo del uso de títulos <ul><li><h1> </li></ul><ul><li>Creación de sitios Web mediante hojas de estilo </li></ul><ul><l...
Párrafos: elemento <p> <ul><li>Se trata también de un elemento lógico </li></ul><ul><li>Permite dividir el documento en  p...
Ejercicio <ul><li>Se trata de probar lo visto hasta la fecha, para lo que crearemos nuestra primera página Web </li></ul><...
Texto preformateado: <pre> <ul><li>Si queremos que la página Web muestre el mismo formato (espacios, tabulaciones y saltos...
Citas de bloque: <blockquote> <ul><li>Permite incluir largas citas textuales en la página (es un elemento de bloque) </li>...
Tipos de listas en HTML <ul><li>Existen tres tipos de listas: </li></ul><ul><ul><li>Ordenadas </li></ul></ul><ul><ul><li>D...
Listas ordenadas <ul><li>Ejemplo: </li></ul><ul><li>Sintaxis: </li></ul><ul><ul><li><ol>  (de “ordered list”) designa a to...
Listas desordenadas <ul><li>Ejemplo: </li></ul><ul><ul><li>Esta misma diapositiva </li></ul></ul><ul><li>Sintaxis: </li></...
Listas de definición <ul><li>Están pensadas para diccionarios, glosarios, etc. </li></ul><ul><li>Ejemplo: </li></ul><ul><u...
Listas de definición <ul><li>Pueden tener más usos que el anterior </li></ul><ul><ul><li>Por ejemplo, una lista con las ca...
Ejercicio <ul><li>Crear una lista como la siguiente: </li></ul>The ingredients:   •  100 g. flour  •   10 g. sugar  •   1 ...
Elementos de línea <ul><li>Elementos lógicos ( em, strong, code... ) </li></ul><ul><li>Elementos físicos ( i, b, tt... ) <...
Elementos lógicos y físicos <ul><li>HTML no es un lenguaje de descripción de página física, como PostScript o los editores...
Elementos físicos <ul><li>Cursiva ( <i> ) </li></ul><ul><li>Negrita ( <b> ) </li></ul><ul><li>Máquina de escribir ( <tt> )...
Elementos lógicos <ul><li>Indican el tipo de contenido que encierran, no cómo debe presentarse </li></ul><ul><li>No tiene ...
Elementos lógicos <ul><li>Importante ( <strong> ) </li></ul><ul><li>Énfasis ( <em> ) </li></ul><ul><li>Código ( <code> ) <...
Entidades de carácter <ul><li>Sintaxis: </li></ul><ul><ul><li>& código ; </li></ul></ul><ul><ul><ul><li>Donde “código” es ...
Algunas entidades de carácter ¡ &iexcl; ¿ &iquest; Ñ &Ntilde; ñ &ntilde; ... Á &Aacute; ... é &eacute; á &aacute; — &mdash...
Enlaces
URL <ul><li>URI:  Uniform Resource Identifier </li></ul><ul><ul><li>URL:  Uniform Resource Locator </li></ul></ul><ul><li>...
Protocolo <ul><li>Un  protocolo  define el modo en que se comunican dos ordenadores para llevar a cabo alguna tarea </li><...
Protocolos más utilizados Permite enviar un correo electrónico mailto Páginas Web http File Transfer Protocol ftp Permite ...
Dirección del sitio <ul><li>Suele ser un nombre simbólico:  nombre de dominio </li></ul><ul><ul><li>www.uniovi.es  especif...
Dirección del sitio <ul><li>También podría ser directamente la dirección IP </li></ul><ul><ul><li>http ://156.35.14.3/ </l...
Directorio <ul><li>Hay que indicar la ruta hasta el fichero deseado </li></ul><ul><li>Como mínimo, debe ir la barra (“/”) ...
Nombre del fichero <ul><li>Depende del SO del servidor Web </li></ul><ul><li>Las páginas Web generalmente tienen como exte...
Nombre del fichero <ul><li>Si no se especifica, el servidor busca un fichero con un nombre determinado en el directorio es...
Puerto <ul><li>Por omisión, una petición HTTP se dirige al puerto 80 </li></ul><ul><ul><li>Por eso casi nunca la especific...
Enlaces en HTML <ul><li>Se indican con la etiqueta  <a> </li></ul><a href=“URL del documento destino” title=“Descripción d...
URL relativos <ul><li>Relativos, frente a los absolutos como  http://www.uniovi.es/ , porque se parte de la ubicación actu...
El enlace “mailto” <ul><li>Permite enviar un correo electrónico con sólo pulsar en un enlace </li></ul><ul><ul><li>Bueno, ...
Ejercicio <ul><li>Crear un documento HTML que contenga varios enlaces, tanto a otras páginas locales (crear para ello un m...
Ejercicio (cont.) <ul><li>Por ejemplo, que tenga una estructura similar a ésta: </li></ul>informática imágenes artículos a...
Ejercicio (cont.) <ul><li>Además, que todas las páginas tengan un  menú principal  con las distintas secciones del sitio <...
Imágenes
Introducción <ul><li>El Web data de 1990, pero se empieza a popularizar a partir de 1993, con la llegada de Mosaic </li></...
Tipos de imágenes <ul><li>Vectoriales </li></ul><ul><ul><li>Se describen matemáticamente como un conjunto de curvas </li><...
Mapas de bits <ul><li>Ejemplo </li></ul><ul><ul><li>Imagen de mapa de bits descomprimida de 640    480 y color de 24 bits...
GIF <ul><li>Compresión sin pérdida </li></ul><ul><li>8 bits (máximo de 256 colores) </li></ul><ul><ul><li>Efecto de tramad...
JPEG <ul><li>Compresión con pérdida </li></ul><ul><li>24 bits de color </li></ul><ul><li>Adecuado para fotografías </li></...
Tiempos de respuesta <ul><li>1 décima de segundo </li></ul><ul><ul><li>El usuario percibe que el sistema está reaccionando...
Imágenes en HTML <ul><li>Se insertan con la etiqueta  <img> </li></ul><img src=“URL” alt=“Texto alternativo” width=“ancho”...
Atributo  alt <ul><li>Proporciona una descripción de la imagen </li></ul><ul><li>Es lo que aparecerá en un navegador de te...
Atributos   height  y  width <ul><li>El propósito principal es reservar espacio en la página para la imagen que se está ca...
Ejercicio <ul><li>Probar a introducir imágenes en un documento </li></ul><ul><ul><li>Poner algunas aparte (por ejemplo, en...
Upcoming SlideShare
Loading in …5
×

Xhtml

909 views
833 views

Published on

un curso de xhtml

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
909
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Xhtml

  1. 1. Introducción a XHTML César F. Acebal Universidad de Oviedo www.cesaracebal.com Curso de CSS avanzado
  2. 2. Separación entre presentación y contenido <ul><li>Esa distinción no está siempre clara: </li></ul><ul><ul><li>HTML también tiene etiquetas de describen la presentación en vez de la estructura </li></ul></ul><ul><ul><li>En el Word podemos trabajar con estilos </li></ul></ul><ul><ul><ul><li>Conjunto de características que se pueden aplicar a una porción de texto </li></ul></ul></ul><ul><ul><ul><ul><li>Por ejemplo, que el estilo Título 1 vaya en Helvética negrita y cursiva, y a 18 puntos </li></ul></ul></ul></ul>
  3. 3. Salvando las limitaciones del HTML <ul><li>El HTML es un lenguaje muy sencillo </li></ul><ul><ul><li>Ésa es precisamente una de las razones del enorme éxito del Web </li></ul></ul><ul><li>Los diseñadores han tratado, desde el principio, de salvar sus limitaciones estilísticas </li></ul><ul><ul><li>Si bien la intención era buena (mejorar la presentación de los documentos), las técnicas usadas solían tener efectos secundarios indeseados </li></ul></ul>
  4. 4. Salvando las limitaciones del HTML <ul><li>Ejemplos de estas técnicas son: </li></ul><ul><ul><li>Usar extensiones de HTML propietarias </li></ul></ul><ul><ul><li>Convertir texto en imágenes </li></ul></ul><ul><ul><li>Meter texto en tablas </li></ul></ul><ul><ul><li>Escribir un programa en vez de usar HTML </li></ul></ul>
  5. 5. Extensiones de HTML propietarias <ul><li>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 </li></ul><ul><li>Llegó un momento en cada nueva versión incorporaba nuevas etiquetas </li></ul><ul><li>Pero estas etiquetas no son universales, sólo funcionan en un navegador determinado </li></ul><ul><li>No tienen sentido en navegadores no visuales (de voz, Braille, etcétera) o en navegadores de texto (Lynx, dispositivos de mano –teléfonos, PDA...–) </li></ul><ul><li>Por el contrario, los elementos de HTML son independientes del dispositivo </li></ul><ul><ul><li>Ejemplo: <em> Destacar esto </em> </li></ul></ul><ul><li>Las hojas de estilo han permitido eliminar todos estos elementos </li></ul><ul><ul><li>Ya no hacen falta elementos como <center> o <font> </li></ul></ul><ul><ul><li>En HTML 4.0 fueron relegadas a una versión de transición </li></ul></ul>
  6. 6. Convertir texto en imágenes <ul><li>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ó) </li></ul><ul><li>Luego, simplemente inserta la imagen en la página donde debiera ir el texto </li></ul><ul><li>Problemas: </li></ul><ul><ul><li>Elimina la accesibilidad de la página </li></ul></ul><ul><ul><li>Requiere tiempo de espera por parte del usuario </li></ul></ul>
  7. 7. Accesibilidad <ul><li>Capacidad de usar la información de una página por parte de personas o programas </li></ul><ul><ul><li>Los robots ( crawlers , spiders ) examinan las páginas Web de Internet para indexarlas en sus sistemas de búsqueda (Google, AltaVista...) </li></ul></ul><ul><ul><ul><li>No pueden leer imágenes </li></ul></ul></ul><ul><ul><li>No todos los usuarios tienen navegadores gráficos </li></ul></ul><ul><ul><li>Aun teniéndolo, puede tenerlo configurado para ver el texto a un tamaño mayor </li></ul></ul><ul><li>La única solución (aparte de CSS) es incluir una descripción textual de la imagen </li></ul>
  8. 8. Tiempo de espera <ul><li>Lleva tiempo cargar y dibujar las imágenes en el navegador </li></ul><ul><li>El usuario puede impacientarse y abandonar la página antes de que ésta termine de cargarse </li></ul>
  9. 9. Colocar texto en tablas <ul><li>Permite controlar la disposición del texto </li></ul><ul><ul><li>Ejemplo: añadir un margen al documento </li></ul></ul><ul><ul><li>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) </li></ul></ul><ul><li>No todos los navegadores admiten tablas </li></ul><ul><ul><li>En ese caso no se verá la página </li></ul></ul><ul><li>Complica la escritura del HTML </li></ul><ul><ul><li>Cuanto más compleja sea la estructura de las tablas, más difícil será escribir y mantener el código </li></ul></ul>
  10. 10. Colocar texto en tablas <ul><li>También tiene problemas de accesibilidad </li></ul><ul><ul><li>Por ejemplo, los programas que tratan de leer las páginas sin mostrarlas visualmente </li></ul></ul><ul><ul><ul><li>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 </li></ul></ul></ul><ul><ul><ul><li>Eso sólo tiene sentido si la información es realmente tabular: listas de precios, ventas... </li></ul></ul></ul><ul><ul><li>Otros navegadores para pantallas pequeñas podrían mostrar sólo una casilla de cada vez </li></ul></ul><ul><li>Usadas con cuidado, a veces pueden ser una buena solución </li></ul><ul><li>No obstante, CSS prácticamente elimina la necesidad de usar tablas para composición </li></ul>
  11. 11. Escribir un programa en vez de usar HTML <ul><li>Ejemplo: applets Java, Flash </li></ul><ul><li>Esto da control total sobre cada píxel de la pantalla (algo que ni siquiera es posible con CSS) </li></ul><ul><li>Tiene muchos de los inconvenientes anteriores </li></ul><ul><li>La gracia de HTML es que el mismo documento puede verse en un montón de dispositivos diferentes </li></ul><ul><li>HTML es un estándar universal de formato de datos para la publicación de información </li></ul>
  12. 12. Introducción a XHTML
  13. 13. Elementos <ul><li>Un elemento normalmente tiene tres partes: </li></ul><ul><ul><li>etiqueta de inicio </li></ul></ul><ul><ul><li>contenido </li></ul></ul><ul><ul><li>etiqueta de fin </li></ul></ul>Nombre atributo <a href=“aficiones.html”>Aficiones</a> Nombre elemento Valor atributo CONTENIDO ATRIBUTO ETIQUETA DE INICIO ETIQUETA DE FIN ELEMENTO
  14. 14. Sintaxis de los elementos <ul><li>Todas las etiquetas empiezan por “ < “ y terminan con “ > ” </li></ul><ul><li>Entre ellas va el nombre del elemento </li></ul><ul><li>Algunos elementos pueden tener atributos </li></ul><ul><ul><li>El valor de los atributos va siempre entrecomillado </li></ul></ul><ul><li>El contenido no tiene por qué ser sólo texto: también puede tener otros elementos </li></ul><ul><li>La etiqueta de fin se llama igual que la de principio con la barra “ / ” ( slash ) </li></ul><ul><li>Hay elementos que no tienen etiqueta de fin ni contenido </li></ul><ul><ul><li><br> </li></ul></ul><ul><ul><li>Nota: en XHTML todos los elementos tienen que cerrarse: </li></ul></ul><ul><ul><ul><li><br></br> </li></ul></ul></ul><ul><ul><ul><li><br /> </li></ul></ul></ul>
  15. 15. Sintaxis de HTML <ul><li>Son documentos estructurados </li></ul><ul><ul><li>La especificación define qué elementos puede contener un documento, cómo se relacionan los elementos entre sí y sus posibles atributos y valores </li></ul></ul><ul><ul><ul><li>Cuál puede ser el contenido de un elemento: </li></ul></ul></ul><ul><ul><ul><ul><li>texto, otros elementos, mezcla de texto y elementos o nada </li></ul></ul></ul></ul><ul><li>En HTML, los nombres de los elementos y de los atributos da igual que vayan en mayúsculas o en minúsculas </li></ul><ul><ul><li>En XHTML –una reformulación de HTML para que cumpla las normas de XML– deben ir en minúsculas </li></ul></ul><ul><li>En XHTML, los valores de los atributos siempre van entrecomillados </li></ul><ul><li>Comentarios: <!-- Esto es un comentario --> </li></ul>
  16. 16. Sintaxis de HTML <ul><li>Los elementos se pueden anidar (cumpliendo las normas de la especificación): </li></ul><ul><li><b><i>Correcto</i></b> </li></ul><ul><ul><li>Pero no pueden cruzarse: </li></ul></ul><ul><ul><li><b><i>Incorrecto</b></i> </li></ul></ul><ul><li>Los navegadores hacen caso omiso de las etiquetas desconocidas (aunque procesan el contenido): </li></ul><ul><li>< pepe >Contenido</ pepe > </li></ul><ul><li>Y lo mismo con los atributos (en este caso obvian también su valor): </li></ul><ul><li><h1 pepe=“hola” >Contenido</h1> </li></ul>
  17. 17. Permisividad de los navegadores <ul><li>Al final, la corrección de un documento queda al arbitrio de los navegadores </li></ul><ul><ul><li>No es como hacer un programa, donde el compilador nos informa de todos los errores </li></ul></ul><ul><ul><li>Lo que para un navegador puede ser válido, para otro puede que no, o que lo interprete de forma completamente distinta </li></ul></ul><ul><ul><li>Tratan de adivinar lo que quiso decir el autor </li></ul></ul><ul><li>Debemos tratar de ajustarnos al estándar </li></ul><ul><li>Se puede comprobar la corrección de una página con los validadores </li></ul><ul><ul><li>Comparan la página con la especificación (la gramática) de HTML: DTD </li></ul></ul><ul><li>Aun así, hay que probar siempre una página con varios navegadores (distintas marcas y versiones, plataformas, etc.) </li></ul>
  18. 18. 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.
  19. 19. Documentos <ul><li>“ 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.” </li></ul>
  20. 20. Buena formación <ul><li>Un documento XML está bien formado si cumple las reglas sintácticas de la especificación </li></ul><ul><li>¡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) </li></ul><ul><li>Ejemplos: </li></ul><ul><ul><li>Que no haya etiquetas sin cerrar </li></ul></ul><ul><ul><li>Que no se entremezclen etiquetas: <a><b></a></b> </li></ul></ul><ul><ul><li>Etcétera </li></ul></ul>
  21. 21. Validez <ul><li>Para que un documento XML sea válido debe incluir la declaración <!DOCTYPE> al principio, donde viene especificada la DTD </li></ul><ul><ul><li>Definición de tipo de documento </li></ul></ul><ul><li>El documento debe adecuarse a la gramática impuesta por dicha DTD </li></ul><ul><li>Si no se incluyera esa declaración, el procesador XML no realizaría la comprobación de validez </li></ul>
  22. 22. Estructura de un documento HTML <ul><li><!DOCTYPE html PUBLIC </li></ul><ul><li>“ -//W3C//DTD HTML 4.01 EN//” </li></ul><ul><li>“ http://www.w3.org/TR/html4/strict.dtd”> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Mi primera página Web</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>¡Hola, mundo! </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  23. 23. Declaración de XML <ul><li>En un documento XHTML, habría que añadir también la declaración de XML: </li></ul><ul><ul><li>ISO-8859-1 es el juego de caracteres europeo </li></ul></ul><ul><ul><ul><li>Por omisión, el tipo de codificación es UTF-8 </li></ul></ul></ul><?xml version=“1.0” encoding=“ISO-8859-1” ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd &quot;> <html> ... </html>
  24. 24. Versiones de HTML <ul><li>World Wide Web Consortium (W3C): </li></ul><ul><ul><li>Organización encargada de estandarizar las tecnologías Web </li></ul></ul><ul><ul><li>www.w3 . org </li></ul></ul><ul><li>Tres variantes de HTML 4.01: </li></ul><ul><ul><li>Strict </li></ul></ul><ul><ul><ul><li>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 </li></ul></ul></ul><ul><ul><li>Transitional </li></ul></ul><ul><ul><ul><li>Mantiene bastantes elementos y atributos de presentación </li></ul></ul></ul><ul><ul><ul><li>Pensada como etapa de transición (desaparecerá del estándar) </li></ul></ul></ul><ul><ul><li>Frameset </li></ul></ul><ul><ul><ul><li>Lo mismo que la de transición pero para documentos con marcos (frames) </li></ul></ul></ul><ul><li>XHTML: lo mismo con pequeños cambios de sintaxis para que los documentos HTML sean también documentos XML </li></ul>
  25. 25. Tipos de elementos <ul><li>Los elementos pueden dividirse en tres grupos: </li></ul><ul><ul><li>De nivel de bloque </li></ul></ul><ul><ul><ul><li>Insertan una línea en blanco antes y después de su contenido </li></ul></ul></ul><ul><ul><ul><li><h1> , <p> ... </li></ul></ul></ul><ul><ul><li>De línea </li></ul></ul><ul><ul><ul><li><strong> , <em> , <a> , <img> ... </li></ul></ul></ul><ul><ul><li>Invisibles </li></ul></ul><ul><ul><ul><li><title> , <link> , <style> </li></ul></ul></ul>
  26. 26. 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).
  27. 27. Elemento <title> <ul><li>Va en la cabecera </li></ul><ul><li><head> </li></ul><ul><li><title>AA Funky Software</title> </li></ul><ul><li></head> </li></ul><ul><li>Es obligatorio </li></ul><ul><li>¿Para qué sirve? </li></ul><ul><ul><li>Es lo que aparece en la barra de título de la ventana del navegador </li></ul></ul><ul><ul><li>También lo que aparece al añadir la página a favoritos </li></ul></ul><ul><ul><li>Es utilizado por los robots de indexación de los buscadores </li></ul></ul>
  28. 28. Elemento <title>. Consejos <ul><li>Hay que darle un nombre significativo </li></ul><ul><ul><li>Aunque mejor si es a la vez conciso </li></ul></ul><ul><li>Puede ser conveniente indicar la estructura en el propio título, como ayuda a la navegación </li></ul><ul><li><title> </li></ul><ul><li> MiEmpresa - ¿Quiénes somos? – Consejo de </li></ul><ul><li>Administración </li></ul><ul><li></title> </li></ul>
  29. 29. Elementos de bloque <ul><li>Cuerpo del documento ( body ) </li></ul><ul><li>Títulos ( h1, h2... h6 ) </li></ul><ul><li>Párrafos ( p ) </li></ul><ul><li>Salto de línea ( br ) </li></ul><ul><li>Barra o separador horizontal ( hr ) </li></ul><ul><li>Preformateado ( pre ) </li></ul><ul><li>Citas de bloque ( blockquote ) </li></ul><ul><li>Listas </li></ul><ul><ul><li>Desordenadas ( ul, li ) </li></ul></ul><ul><ul><li>Ordenadas ( ol, li ) </li></ul></ul><ul><ul><li>De definición ( dl, dt, dd ) </li></ul></ul><ul><li>División ( div ) </li></ul><ul><li>Tablas </li></ul><ul><li>Formularios </li></ul>
  30. 30. Elemento <body> <ul><li>Representa el cuerpo, el contenido en sí del documento </li></ul><ul><ul><li>Todo lo que vaya dentro de él es lo que realmente se muestra en la página Web </li></ul></ul><ul><li>Nota : dentro del elemento <body> no podemos poner texto suelto, directamente, ni elementos de línea, sino sólo elementos de bloque </li></ul>
  31. 31. Elementos de título: <h1>, <h2>… <h6> <ul><li>Permiten dividir el documento en secciones lógicas </li></ul><ul><ul><li><h1> sería el título principal de la página </li></ul></ul><ul><ul><li>Tras él vendrán secciones ( <h2> ), subsecciones ( <h3> )… y así sucesivamente hasta el nivel <h6> </li></ul></ul><ul><li>Normalmente, el navegador aplicará un estilo distinto a cada título </li></ul><ul><ul><li>Más grande, en negrita… </li></ul></ul><ul><li>Sólo pueden contener elementos de línea </li></ul>
  32. 32. A propósito de los elementos de título <ul><li>No hay que olvidar que se trata de elementos lógicos: </li></ul><ul><ul><li>No deben utilizarse pensando en el formato que les a dar el navegador </li></ul></ul><ul><ul><ul><li>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.) </li></ul></ul></ul><ul><ul><li>Deben tener sentido </li></ul></ul><ul><ul><ul><li>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 </li></ul></ul></ul><ul><ul><li>Además, conviene respetar la jerarquía </li></ul></ul><ul><ul><ul><li>Que no aparezca un <h3> , por ejemplo, sin que antes haya un <h2> </li></ul></ul></ul>
  33. 33. Ejemplo del uso de títulos <ul><li><h1> </li></ul><ul><li>Creación de sitios Web mediante hojas de estilo </li></ul><ul><li></h1> </li></ul><ul><li><h2> Introducción al Web y a XHTML </h2> </li></ul><ul><li>... </li></ul><ul><li><h2> XHTML (Continuación) </h2> </li></ul><ul><li>... </li></ul><ul><li><h3> Tablas </h3> </li></ul><ul><li>... </li></ul>
  34. 34. Párrafos: elemento <p> <ul><li>Se trata también de un elemento lógico </li></ul><ul><li>Permite dividir el documento en párrafos </li></ul><ul><li>No puede contener otros elementos de bloque </li></ul><ul><li>No debe usarse para obtener saltos de línea </li></ul><ul><ul><li>Además, no funcionaría ( comprobarlo ) </li></ul></ul><ul><ul><li>La forma de insertar un salto de línea es mediante <br> </li></ul></ul><ul><ul><ul><li>Así sí podemos tener varías líneas de separación </li></ul></ul></ul><ul><ul><ul><ul><li>Pero cuando deseemos más espaciado vertical es mejor acudir a las hojas de estilo que al elemento <br> </li></ul></ul></ul></ul>
  35. 35. Ejercicio <ul><li>Se trata de probar lo visto hasta la fecha, para lo que crearemos nuestra primera página Web </li></ul><ul><li>Recordemos: </li></ul><ul><ul><li>Título ( <title> ) </li></ul></ul><ul><ul><li>Títulos o cabeceras ( <h1> …) </li></ul></ul><ul><ul><li>Párrafos ( <p> ) </li></ul></ul><ul><ul><li>Saltos de línea ( <br> ) </li></ul></ul><ul><ul><ul><li>Aunque en la práctica no abusaremos de este elemento </li></ul></ul></ul><ul><li>¿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? </li></ul>
  36. 36. Texto preformateado: <pre> <ul><li>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> </li></ul><ul><ul><li>Por ejemplo, un poema, una porción de código… </li></ul></ul><ul><ul><li>Se usa muy poco </li></ul></ul><ul><li>Problema: los tabuladores </li></ul><ul><ul><li>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 </li></ul></ul>
  37. 37. Citas de bloque: <blockquote> <ul><li>Permite incluir largas citas textuales en la página (es un elemento de bloque) </li></ul><ul><li>Atributos: </li></ul><ul><ul><li>cite </li></ul></ul><ul><ul><ul><li>Como valor, tiene un URI (normalmente será un URL, es decir, una dirección de otra página Web) </li></ul></ul></ul><ul><ul><ul><li>Es decir, ahí se indicaría la fuente de la que procede la cita </li></ul></ul></ul><ul><li>Normalmente, los navegadores lo visualizan con un ligero sangrado </li></ul><ul><li>¿Tiene algún otro efecto en los navegadores actuales? ¿Se os ocurre algún otro que pudieran tener? </li></ul>
  38. 38. Tipos de listas en HTML <ul><li>Existen tres tipos de listas: </li></ul><ul><ul><li>Ordenadas </li></ul></ul><ul><ul><li>Desordenadas </li></ul></ul><ul><ul><li>De definición </li></ul></ul><ul><li>Las listas se pueden anidar </li></ul><ul><ul><li>Es decir, un elemento de una lista puede ser a su vez otra lista </li></ul></ul><ul><ul><li>No tienen por qué ser del mismo tipo </li></ul></ul><ul><ul><ul><li>Un elemento de una lista desordenada pueden ser, por ejemplo, una serie de puntos representados como una lista ordenada </li></ul></ul></ul>
  39. 39. Listas ordenadas <ul><li>Ejemplo: </li></ul><ul><li>Sintaxis: </li></ul><ul><ul><li><ol> (de “ordered list”) designa a toda la lista </li></ul></ul><ul><ul><li>Cada elemento se indica mediante <li> </li></ul></ul><ul><ul><li>1. Introducción al Web y a XHTML </li></ul></ul><ul><ul><li>2. XHTML (Continuación) </li></ul></ul><ul><ul><li>3. Introducción a las hojas de estilo </li></ul></ul>
  40. 40. Listas desordenadas <ul><li>Ejemplo: </li></ul><ul><ul><li>Esta misma diapositiva </li></ul></ul><ul><li>Sintaxis: </li></ul><ul><ul><li><ul> (de “unordered list”) designa a toda la lista </li></ul></ul><ul><ul><li>Cada elemento se indica mediante <li> </li></ul></ul>
  41. 41. Listas de definición <ul><li>Están pensadas para diccionarios, glosarios, etc. </li></ul><ul><li>Ejemplo: </li></ul><ul><ul><li>Webmail, webmail ( correo electrónico de sitio web,correo basado en web,correo web ) </li></ul></ul><ul><ul><li>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: &quot;email &quot;, &quot;ISP &quot;, &quot;website &quot;. </li></ul></ul><ul><ul><li>Webmaster, webmaster (administrador de Web) </li></ul></ul><ul><ul><li>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: &quot;Web editor, web editor &quot;, &quot;web server &quot;. </li></ul></ul>
  42. 42. Listas de definición <ul><li>Pueden tener más usos que el anterior </li></ul><ul><ul><li>Por ejemplo, una lista con las características de un producto: </li></ul></ul><ul><li>Sintaxis: </li></ul><ul><ul><li><dl> para la lista completa </li></ul></ul><ul><ul><li><dt> el término a definir </li></ul></ul><ul><ul><li><dd> la definición </li></ul></ul><ul><ul><li>Lower cost </li></ul></ul><ul><ul><li>The new version of this product costs significantly less than the previous one! </li></ul></ul><ul><ul><li>Easier to use </li></ul></ul><ul><ul><li>We've changed the product so that it's much easier to use! </li></ul></ul><ul><ul><li>Safe for kids </li></ul></ul><ul><ul><li>You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee). </li></ul></ul>
  43. 43. Ejercicio <ul><li>Crear una lista como la siguiente: </li></ul>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.
  44. 44. Elementos de línea <ul><li>Elementos lógicos ( em, strong, code... ) </li></ul><ul><li>Elementos físicos ( i, b, tt... ) </li></ul><ul><li>Enlaces ( a ) </li></ul><ul><li>Imágenes ( img ) </li></ul><ul><li>span </li></ul>
  45. 45. Elementos lógicos y físicos <ul><li>HTML no es un lenguaje de descripción de página física, como PostScript o los editores WYSIWYG (Word, por ejemplo) </li></ul><ul><li>Éstos definen la presentación del documento </li></ul><ul><ul><li>Negrita ( <b> ), Cursiva ( <i> )... </li></ul></ul><ul><li>HTML define la estructura lógica de un documento, no su aspecto (que queda a la elección del navegador) </li></ul><ul><ul><li><strong>, <em>... </li></ul></ul>
  46. 46. Elementos físicos <ul><li>Cursiva ( <i> ) </li></ul><ul><li>Negrita ( <b> ) </li></ul><ul><li>Máquina de escribir ( <tt> ) </li></ul><ul><li>Más grande ( <big> ) </li></ul><ul><li>Más pequeño ( <small> ) </li></ul><ul><li>Subíndice ( <sub> ) </li></ul><ul><li>Superíndice ( <sup> ) </li></ul>
  47. 47. Elementos lógicos <ul><li>Indican el tipo de contenido que encierran, no cómo debe presentarse </li></ul><ul><li>No tiene sentido una etiqueta de negrita en un navegador de voz o Braille, o en otros tipos de navegadores (PDA, etc.) </li></ul><ul><li>Con las hojas de estilo, tenemos control total sobre cómo deben presentarse los elementos lógicos </li></ul><ul><ul><li>Evitaremos, por tanto, el uso de elementos físicos </li></ul></ul>
  48. 48. Elementos lógicos <ul><li>Importante ( <strong> ) </li></ul><ul><li>Énfasis ( <em> ) </li></ul><ul><li>Código ( <code> ) </li></ul><ul><li>Dirección ( <address> ) </li></ul><ul><li>Abreviatura ( <abbr> ) </li></ul><ul><ul><li><abbr title=“Massachusetts Avenue”>Mass. Ave.</abbr> </li></ul></ul><ul><li>Acrónimo ( <acronym> ) </li></ul><ul><ul><li><acronym title=“HiperText Markup Language”>HTML</acronym> </li></ul></ul><ul><li>Cita ( <cite> y <q> ) </li></ul>
  49. 49. Entidades de carácter <ul><li>Sintaxis: </li></ul><ul><ul><li>& código ; </li></ul></ul><ul><ul><ul><li>Donde “código” es una palabra reservada o un número que indica el carácter a representar </li></ul></ul></ul><ul><li>Permiten poner caracteres especiales en un documento: </li></ul><ul><ul><li>Letras acentuadas, etc. </li></ul></ul><ul><li>Juego de caracteres para el español: </li></ul><ul><ul><li>ISO 8859-1 (Latin-1) </li></ul></ul>
  50. 50. Algunas entidades de carácter ¡ &iexcl; ¿ &iquest; Ñ &Ntilde; ñ &ntilde; ... Á &Aacute; ... é &eacute; á &aacute; — &mdash; - &rdash; € &euro; © &copy; &nbsp; > &gt; < &lt; & &amp; “ &quot;
  51. 51. Enlaces
  52. 52. URL <ul><li>URI: Uniform Resource Identifier </li></ul><ul><ul><li>URL: Uniform Resource Locator </li></ul></ul><ul><li>Un URL es la dirección única de todo documento en el Web </li></ul><ul><ul><li>http://www.eutio.uniovi.es/ </li></ul></ul><ul><li>Estructura básica: </li></ul>protocolo://dirección del sitio[:puerto]/directorio/fichero
  53. 53. Protocolo <ul><li>Un protocolo define el modo en que se comunican dos ordenadores para llevar a cabo alguna tarea </li></ul><ul><li>Protocolo del Web: </li></ul><ul><ul><li>HTTP (HyperText Transfer Protocol) </li></ul></ul><ul><ul><li>Especifica cómo tiene lugar el diálogo entre el navegador y el servidor para conseguir el fichero especificado </li></ul></ul><ul><ul><li>No se ocupa del transporte en sí: TCP </li></ul></ul><ul><li>Cada vez que tecleamos una dirección o pulsamos un enlace el navegador se comunica vía HTTP con el servidor Web indicado </li></ul>
  54. 54. 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
  55. 55. Dirección del sitio <ul><li>Suele ser un nombre simbólico: nombre de dominio </li></ul><ul><ul><li>www.uniovi.es especifica una máquina llamada “www” en el dominio “uniovi.es” </li></ul></ul><ul><ul><li>El nombre de máquina puede ser cualquiera </li></ul></ul><ul><ul><ul><li>“ www” no es más que un convenio para especificar aquellas máquinas que son servidores Web </li></ul></ul></ul><ul><ul><ul><li>como “ftp” suele designar a los servidores de FTP </li></ul></ul></ul><ul><ul><ul><li>incluso aunque muchas veces se trate de la misma máquina </li></ul></ul></ul>
  56. 56. Dirección del sitio <ul><li>También podría ser directamente la dirección IP </li></ul><ul><ul><li>http ://156.35.14.3/ </li></ul></ul><ul><li>Los nombres de dominio no distinguen entre mayúsculas y minúsculas </li></ul><ul><ul><li>http :// www.uniovi.es / </li></ul></ul><ul><ul><li>http ://WWW.UNIOVI.ES/ </li></ul></ul><ul><ul><li>http :// wWw.UniOvi.es / </li></ul></ul>
  57. 57. Directorio <ul><li>Hay que indicar la ruta hasta el fichero deseado </li></ul><ul><li>Como mínimo, debe ir la barra (“/”) </li></ul><ul><ul><li>http://www.uniovi.es / </li></ul></ul><ul><li>Si no la ponemos, la pone el navegador por nosotros </li></ul><ul><ul><li>...pero en los enlaces en HTML sí debe aparecer </li></ul></ul><ul><li>También se puede indicar un subdirectorio: </li></ul><ul><ul><li>http://www.uniovi.es/Vicerrectorados/Postgrado_TitulosPropios/doctorado/ </li></ul></ul><ul><ul><li>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) </li></ul></ul><ul><li>La ruta sí puede diferenciar entre mayúsculas y minúsculas (si el servidor Web es, por ejemplo, una máquina Unix) </li></ul>
  58. 58. Nombre del fichero <ul><li>Depende del SO del servidor Web </li></ul><ul><li>Las páginas Web generalmente tienen como extensión .html o .htm </li></ul><ul><li>Las extensiones son importantes para que el navegador sepa cómo tratar un fichero </li></ul><ul><ul><li>un .html, lo interpreta y lo muestra </li></ul></ul><ul><ul><li>un .jpg, trata de mostrar la imagen </li></ul></ul><ul><ul><li>un .doc, abre el Word si lo tenemos instalado </li></ul></ul><ul><ul><li>etcétera </li></ul></ul>
  59. 59. Nombre del fichero <ul><li>Si no se especifica, el servidor busca un fichero con un nombre determinado en el directorio especificado </li></ul><ul><ul><li>Normalmente, el index.html o el index.htm </li></ul></ul><ul><ul><li>Se puede configurar el el programa que utilicemos como servidor Web (Apache, IIS...) </li></ul></ul>
  60. 60. Puerto <ul><li>Por omisión, una petición HTTP se dirige al puerto 80 </li></ul><ul><ul><li>Por eso casi nunca la especificamos </li></ul></ul><ul><li>Pero se podría configurar el servidor Web para que “escuchase” peticiones en otro puerto </li></ul><ul><li>En ese caso, hay que indicarlo explícitamente: </li></ul><ul><ul><li>http://www.midominio.com :8080 / </li></ul></ul>
  61. 61. Enlaces en HTML <ul><li>Se indican con la etiqueta <a> </li></ul><a href=“URL del documento destino” title=“Descripción del enlace”>Texto del enlace</a>
  62. 62. URL relativos <ul><li>Relativos, frente a los absolutos como http://www.uniovi.es/ , porque se parte de la ubicación actual </li></ul><ul><ul><li>Son enlaces a otras páginas o documentos locales (pertenecientes al propio sitio, no externos) </li></ul></ul><ul><li>Las mismas reglas que en Windows: </li></ul><ul><ul><li>El punto representa el directorio actual: </li></ul></ul><ul><ul><li>“ . /musica/lunitaTucumana.mp3 ” (o “ musica/lunitaTucumana.mp3 ”) </li></ul></ul><ul><ul><li>Y los dos puntos el directorio anterior: “ .. / .. /articulos/usabilidad/ ” </li></ul></ul>
  63. 63. El enlace “mailto” <ul><li>Permite enviar un correo electrónico con sólo pulsar en un enlace </li></ul><ul><ul><li>Bueno, realmente lo que hace es crear un mensaje nuevo con esa dirección en el destinatario </li></ul></ul><ul><ul><ul><li>Es decir, abre el programa de correo electrónico que tenga instalado el usuario </li></ul></ul></ul><ul><li>Ejemplo: </li></ul><ul><ul><li><a href=&quot;mailto:acebal@ieee.org&quot; title=&quot;Feel free to write me&quot;> [email_address] </a> </li></ul></ul>
  64. 64. Ejercicio <ul><li>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 </li></ul><ul><ul><li>¿Cómo representa el navegador los enlaces? </li></ul></ul><ul><ul><li>¿Y cuando ya han sido visitados? </li></ul></ul><ul><ul><li>¿Para qué sirve el atributo title ? </li></ul></ul><ul><li>Probar a crear una pequeña estructura de directorios </li></ul>
  65. 65. Ejercicio (cont.) <ul><li>Por ejemplo, que tenga una estructura similar a ésta: </li></ul>informática imágenes artículos apuntes
  66. 66. Ejercicio (cont.) <ul><li>Además, que todas las páginas tengan un menú principal con las distintas secciones del sitio </li></ul><ul><ul><li>En este caso, serían dos (las del primer nivel) </li></ul></ul><ul><li>Y que cada página muestre la ruta completa de esa página en la jerarquía del sitio </li></ul><ul><ul><li>Por ejemplo: </li></ul></ul><ul><ul><li>inicio -> informática -> apuntes -> introducción al Web y a XHTML </li></ul></ul><ul><li>Poner en la página principal enlaces directos a algunas de las páginas inferiores de la jerarquía </li></ul><ul><ul><li>Tendría sentido hacerlo, por ejemplo, en una sección “Novedades” </li></ul></ul><ul><li>Probar a enlazar otros documentos distintos de HTML (Word, PDF, imágenes, ZIP, etc.) </li></ul>
  67. 67. Imágenes
  68. 68. Introducción <ul><li>El Web data de 1990, pero se empieza a popularizar a partir de 1993, con la llegada de Mosaic </li></ul><ul><li>Píxel: elemento de imagen ( Pic ture El ement) </li></ul><ul><li>Resolución de pantalla: ancho por alto </li></ul><ul><ul><li>640  480, 800  600, 1024  768, 1600  1200... </li></ul></ul><ul><li>Número de colores </li></ul>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
  69. 69. Tipos de imágenes <ul><li>Vectoriales </li></ul><ul><ul><li>Se describen matemáticamente como un conjunto de curvas </li></ul></ul><ul><li>De mapa de bits </li></ul>= CIRCLE(50, red)
  70. 70. Mapas de bits <ul><li>Ejemplo </li></ul><ul><ul><li>Imagen de mapa de bits descomprimida de 640  480 y color de 24 bits </li></ul></ul><ul><ul><ul><li>640  480  24 = 7.372.800 bits = 900 KB </li></ul></ul></ul><ul><ul><ul><li>Con un módem de 56 Kbps  128 s </li></ul></ul></ul><ul><li>¿Qué es lo que se hace entonces? </li></ul><ul><ul><li>Comprimirlas </li></ul></ul><ul><ul><ul><li>Con pérdida </li></ul></ul></ul><ul><ul><ul><li>Sin pérdida </li></ul></ul></ul>
  71. 71. GIF <ul><li>Compresión sin pérdida </li></ul><ul><li>8 bits (máximo de 256 colores) </li></ul><ul><ul><li>Efecto de tramado: al ajustar los colores </li></ul></ul><ul><li>Resulta adecuado para dibujos </li></ul><ul><li>Permite transparencias </li></ul><ul><ul><li>Problema: aliasing (escalado) </li></ul></ul><ul><ul><li>Sólo se puede poner un color como transparente </li></ul></ul>.gif
  72. 72. JPEG <ul><li>Compresión con pérdida </li></ul><ul><li>24 bits de color </li></ul><ul><li>Adecuado para fotografías </li></ul><ul><li>No permite transparencia </li></ul>.jpg, .jpeg
  73. 73. Tiempos de respuesta <ul><li>1 décima de segundo </li></ul><ul><ul><li>El usuario percibe que el sistema está reaccionando instantáneamente </li></ul></ul><ul><li>1 segundo </li></ul><ul><ul><li>Sin demora, aunque se pierde la noción de instantaneidad </li></ul></ul><ul><li>10 segundos </li></ul><ul><ul><li>Límite máximo para que el usuario espere sin hacer otras cosas </li></ul></ul><ul><li>Hay que tener en cuenta estos valores para el tamaño de cada documento </li></ul>
  74. 74. Imágenes en HTML <ul><li>Se insertan con la etiqueta <img> </li></ul><img src=“URL” alt=“Texto alternativo” width=“ancho” height=“alto”/>
  75. 75. Atributo alt <ul><li>Proporciona una descripción de la imagen </li></ul><ul><li>Es lo que aparecerá en un navegador de texto </li></ul><ul><li>O lo que leerá un navegador de voz </li></ul>
  76. 76. Atributos height y width <ul><li>El propósito principal es reservar espacio en la página para la imagen que se está cargando </li></ul><ul><ul><li>Así el navegador puede ir mostrando los elementos de la página en su ubicación final </li></ul></ul><ul><li>No deben usarse para ajustar el tamaño </li></ul><ul><ul><li>Para eso usaremos un programa de diseño gráfico </li></ul></ul><ul><ul><li>Tienen que reflejar el tamaño real de la imagen </li></ul></ul><ul><ul><li>Una excepción a esto son las imágenes planas: </li></ul></ul><ul><ul><ul><li><img src=“pixel_verde.gif” height=“100” widht=“50”> </li></ul></ul></ul>
  77. 77. Ejercicio <ul><li>Probar a introducir imágenes en un documento </li></ul><ul><ul><li>Poner algunas aparte (por ejemplo, en un bloque <div> ellas solas) y otras en medio de un texto </li></ul></ul><ul><ul><li>¿Cómo se visualizan? </li></ul></ul>

×