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 ,[object Object],[object Object],[object Object],[object Object],[object Object]

Salvando las limitaciones del HTML ,[object Object],[object Object],[object Object],[object Object]

Salvando las limitaciones del HTML ,[object Object],[object Object],[object Object],[object Object],[object Object]

Extensiones de HTML propietarias ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Convertir texto en imágenes ,[object Object],[object Object],[object Object],[object Object],[object Object]

Accesibilidad ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tiempo de espera ,[object Object],[object Object]

Colocar texto en tablas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Escribir un programa en vez de usar HTML ,[object Object],[object Object],[object Object],[object Object],[object Object]

Elementos ,[object Object],[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Sintaxis de HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Permisividad de los navegadores ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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.

Buena formación ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Validez ,[object Object],[object Object],[object Object],[object Object]

Estructura de un documento HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Declaración de XML ,[object Object],[object Object],[object Object],<?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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tipos de elementos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Elemento <title>. Consejos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Elementos de bloque ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Elemento <body> ,[object Object],[object Object],[object Object]

Elementos de título: <h1>, <h2>… <h6> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

A propósito de los elementos de título ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ejemplo del uso de títulos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Párrafos: elemento <p> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ejercicio ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Texto preformateado: <pre> ,[object Object],[object Object],[object Object],[object Object],[object Object]

Citas de bloque: <blockquote> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tipos de listas en HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Listas ordenadas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Listas desordenadas ,[object Object],[object Object],[object Object],[object Object],[object Object]

Listas de definición ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Listas de definición ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ejercicio ,[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object]

Elementos lógicos y físicos ,[object Object],[object Object],[object Object],[object Object],[object Object]

Elementos físicos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Elementos lógicos ,[object Object],[object Object],[object Object],[object Object]

Elementos lógicos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Entidades de carácter ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

URL ,[object Object],[object Object],[object Object],[object Object],[object Object],protocolo://dirección del sitio[:puerto]/directorio/fichero

Protocolo ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Directorio ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Nombre del fichero ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Nombre del fichero ,[object Object],[object Object],[object Object]

Puerto ,[object Object],[object Object],[object Object],[object Object],[object Object]

Enlaces en HTML ,[object Object],<a href=“URL del documento destino” title=“Descripción del enlace”>Texto del enlace</a>

URL relativos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

El enlace “mailto” ,[object Object],[object Object],[object Object],[object Object],[object Object]

Ejercicio ,[object Object],[object Object],[object Object],[object Object],[object Object]

Ejercicio (cont.) ,[object Object],informática imágenes artículos apuntes

Ejercicio (cont.) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Introducción ,[object Object],[object Object],[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],= CIRCLE(50, red)

Mapas de bits ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

GIF ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],.gif

JPEG ,[object Object],[object Object],[object Object],[object Object],.jpg, .jpeg

Tiempos de respuesta ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Imágenes en HTML ,[object Object],<img src=“URL” alt=“Texto alternativo” width=“ancho” height=“alto”/>

Atributo alt ,[object Object],[object Object],[object Object]

Atributos height y width ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ejercicio ,[object Object],[object Object],[object Object]

Xhtml

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie Xhtml

Ähnlich wie Xhtml (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Xhtml