xhtml Indice Introducción Historia Versiones de xhtml Tags de xhtml Secciones de un documento Diferencias con HTML4 Caracteres especiales Formato de Texto Enlaces Encabezados y bloques de texto Boques de elementos Listas Elementos Multimedia Tablas Frames Formularios Ander Barbier Ibáñez
Más información en: http://www.w3.org/MarkUp/ Introducción Más información en: http://www.w3.org/MarkUp/ Es un lenguaje etiquetado de definición de documentos o páginas web. xhtml permite describir la estructura y contenido de los documentos. Los documentos XHTML contienen códigos especiales llamados tags, etiquetas, o elementos, que albergan los contenidos del documento. Ander Barbier Ibáñez
En 1992 el W3C creó la primera versión de HTML. Historia En 1992 el W3C creó la primera versión de HTML. En poco tiempo (1994) se creó la versión 3.0 de HTML. En 1996, se presentó la versión HTML 3.2. En 1997 se creó la versión HTML 4, que soporta hojas de estilo y layers, proporcionando mayor dinamismo a las páginas y pretendiendo separar el contenido del formato. En Enero de 2000 el W3C presentó una nueva versión de HTML con una sintaxis más estricta basada en XML: XHTML Ander Barbier Ibáñez
Versiones de xtml XHTML 1.0. Basado en HTML 4, pero cumpliendo con el estándar XML. XHTML 1.0 Strict. Separa totalmente el contenido de su presentación utilizando hojas de estilo css. XHTML 1.0 Transitional. Separa el contenido de la presentación parcialmente, por compatibilidad con navegadores antiguos. XHTML 1.0 Frameset. Se utiliza cuando se usan frames para dividir la ventana en varias partes. XHTML Basic. Es un subconjunto de. XHTML con las etiquetas más importantes. Utilizados para dispositivos que no pueden soportar todas las características de xhtml como teléfonos móviles, PDAs, etc. XHTML 1.1 - Module-based XHTML. Es una evolución del XHTML 1.0 Strict. Permite modular los elementos y atributos, y utilizar elementos de otros lenguajes etiquetados. XHTML 2.0. (Borrador). Proporciona mejoras en accesibilidad, internacionalización, independencia del dipsositivo (PDAs, TV, teléfonos, …), menos scripting, etc… Ander Barbier Ibáñez
Describen cómo debe ser mostrado un documento. Tags de xhtml (1/2) Describen cómo debe ser mostrado un documento. Los tags comienzan por el símbolo de menor “<“, y terminan con el símbolo de mayor ”>”. Ejemplo: <body> Los tags tienen su correspondiente tag de cierre, representados por un “/” después del nombre: Ejemplo: <body>Cuerpo del documento</body> Ander Barbier Ibáñez
El navegador nunca visualiza en pantalla el tag. Tags de xtml (2/2) El navegador nunca visualiza en pantalla el tag. Los tags pueden contener atributos que aportan más información. Ejemplo:<img width=“25” height=“100”> El navegador ignora los retornos de carro, espacios en blanco y tabuladores existentes en el código fuente de un documento HTML. Ander Barbier Ibáñez
Secciones de un documento Todos los documentos deben comenzar indicando el tipo de documento: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> A continuación se indica el inicio del documento con la etiqueta <html>, y debe finalizar con el tag </html>.Entre estos dos tags se deben incluir las siguientes secciones: Cabecera. HEAD. Contiene información descriptiva del documento. Comienza con el tag <head> y termina con el tag </head> Cuerpo del documento. BODY. Contenido del documento. Comienza con el tag <body> y termina con el tag </body>. Ander Barbier Ibáñez
Cabecera de un documetno En la cabecera pueden incluirse los siguientes tags: <title>. Contiene el título del documento: <title> Primer documento XHTML</title> <meta>. Los tags meta contienen información útil para el navegador o el servidor web. Tiene muchos atributos pero los más utilizados son: http-equiv y content, que indican el nombre de una cabecera HTTP y el contenido del tag meta. <meta http-equiv=“content-type" content="text/html"> <meta name="Author" content="ESIDE-Web -- eside-web@eside.deusto.es"> <script>. Permite incrustar scritps (normalmente de javascript), que aportan comportamiento a la página. <style>. Permite incluir hojas de estilo a la página para dar formato al contenido. Ander Barbier Ibáñez
El cuerpo contiene el contenido del documento: Cuerpo de un documento El cuerpo contiene el contenido del documento: <body>...</body> Ander Barbier Ibáñez
Diferencias de xhtml con html4 (1/2) Los documentos XHTML deben estar bien formados. Los elementos y sus atributos deben estar en minúsculas. Los elementos no vacíos deben llevar su tag de cierre. <body>...</body> Los valores de los atributos deben ir entrecomillados. <table rows=“5”>...</table> Ander Barbier Ibáñez
Diferencias de xhtml con html4 (2/2) No se permite minimizar atributos: Permitido: <dl compact=“compact”> No permitido: <dl compact> Los elementos vacíos deben llevar tag de cierre, o que el tag de apertura termine en />: Permitido: <hr/><br/> No permitido: <hr><br> Ander Barbier Ibáñez
Caracteres especiales Para representar los caracteres que tienen un significado propio en XHML se dispone de las siguientes entidades predefinidas: Representa el espacio en blanco & Representa el & < Representa el < > Representa el > ' Representa el ‘ " Representa el “ &[vocal]acute; Representa la vocal acentuada ñ Representa la ñ Cualquier carácter puede ser representado de la siguiente manera: &#CódigoASCII; Ejemplo: @ Representa la @ Ander Barbier Ibáñez
Para dar formato al texto hay que utilizar estilos. Formato de texto Para dar formato al texto hay que utilizar estilos. Aunque los siguientes tags permiten modificar el formato de texto… <strong>...</strong>,<em>...</em>…Se recomienda utilizar estilos para formatear el texto. Sólo se recomienda utilizarlos cuando se quiere que aporten énfasis al contenido. Intentar NO utilizar los tags <b>, <i>… <!--comentarios/-->. Permite incluir comentarios que el navegador no visualiza con el documento. Ander Barbier Ibáñez
Encabezados y bloques de texto Los siguientes tags permiten definir encabezdos y bloques de texto: <h1>...</h1>,...,<h6>...</h6>. Son los tags de cabecera <p>...</p>. Comienzo de párrafo. <br /> Break o salto de línea. (Evitable). Ander Barbier Ibáñez
Bloques de elementos <div>...</div>. Permite agrupar elementos de un documento. También se utiliza para la creación de capas o layers. Deja un salto de línea antes del bloque y otro después. <span>...</span>. Permite agrupar elementos de un documento. También se utiliza para la creación de capas o layers. Ander Barbier Ibáñez
Enlaces (1/3) El hipertexto consiste en enlazar unos documentos con otros mediante enlaces insertados entre el texto. La potencia de XHTML reside en la posibilidad de enlazar desde cualquier documento con otro ubicado en cualquier otro servidor del mundo. Cuando el usuario pulsa en un enlace, el navegadaor descarga y visualiza el documento enlazado. Ander Barbier Ibáñez
El tag anchor permite insertar enlaces en un documento: <a atributos>...</a>. Atributos: href=“referencia”. Especifica el link al cual hace referencia. Ej. <a href="otrodir/pagina.htm“> href=“http://www.eside.deusto.es” href=mailto:dirección@dominio nombre=“nombre”. Es el nombre que se le da al enlace.. target=“ventana”. Se usa en documentos con varias ventanas o frames, para dar el nombre a cada uno de los frames. hreflang=“lenguaje”. Cuando se hace referencia a un documento que está en diferente idioma, se colocan los dos caracteres representativos de la lengua. Ander Barbier Ibáñez
<a name=“ptoenlace”>lugar al que salta el enlace</a> Enlaces (3/3) El tag <a> también permite enlazar con un punto concreto dentro de un documento: <a name=“ptoenlace”>lugar al que salta el enlace</a> <a href=“#ptoenlace”>Enlace al punto de enlace</a> <a href=“fichero.htm#ptoenlace2”>Enlace aotro punto de enlace en otro documento</a> Ander Barbier Ibáñez
En HTML también se pueden crear listas de elementos: <ul>...</ul>. Unordinal Lists. Se utiliza para insertar listas de elementos no numeradas Hay que utilizar el tag <li> para cada elemento de la lista. <li>...</li>. List Item. Inserta un elemento de una lista ya sea numerada o no numerada. <ol>...</ol>. Ordinal Lists. Se utiliza para insertar listas de elementos ordenadas o numeradas. <dl>...</dl>. Definition Lists. Son listas de definición. Alternan un término y su definición. Se utiliza la etiqueta <dl> para indicar la lista y las etiquetas <dt> y <dd> para indicar término y definición. Ander Barbier Ibáñez
Elementos multimedia (1/6) El lenguaje HTML permite insertar elementos multimedia como imágenes, sonidos, vídeos, etc. También es posible insertar objetos o controles creados con cualquier tecnología como applets de Java, películas shockwave de Macromedia, etc. A continuación se presentan los tags que permiten incluir elementos multimedia: Ander Barbier Ibáñez
Elementos multimedia (2/6) <img atributos>. Inserta una imagen en un documento. Atributos: src = “url”. Corresponde a la referencia absoluta o relativa del fichero gráfico. alt=“text”. Texto alternativo que emerge al colocar el ratón sobre la imagen, y el texto que aparece cuando la imagen no es ACCESIBLE por el motivo que fuera. Usemap=“#nombreMapa”. Crea un mapa en la imagen que permite enlazar a diferentes páginas. Para incluir un link en una imagen: <a href="bbs.html"><img src="./esideweb.gif“ alt=“logotipo de ESIDEWEB”></a> Ander Barbier Ibáñez
Elementos multimedia (3/6) HTML permite dividir una imagen en áreas, con links diferentes para cada una de las áreas. Para ello se utilizan los mapas: <map atributos>...</map>. Es utilizado junto con el tag <area> para definir mapas de imágenes. Atributos: name =“nombre”. Nombre del mapa. Id = “identificativo”. Identificativo del mapa. Para asociar un mapa a una imagen hay que utilizar el atributo usemap del tag <img>: <img src="esideweb.gif" usemap="#eside“ alt=“mapa…”> Ander Barbier Ibáñez
Elementos multimedia (4/6) <area atributos>. Representa un área del mapa. Atributos: shape= “valor”. Forma de cada área del mapa. Posibles valores: rect (rectangulo), circle(círculo), poly(polígono). coords=“Coordenadas”. Para un rectángulo (left-x, top-y, right-x, bottom-y), para un círculo (center-x, center-y, radius), para un polígono (x1, y1, x2, y2, ..., xN, yN). Ejemplo: <map id = "colores" name="colores"> <area shape = "rect" coords = "0,0,100,100" href = "azul.htm" alt="zona azul"/> <area shape = "rect" coords = "100,0,200,100" href = "verde.htm" alt="zona azul"/> <area shape = "rect" coords = "0,100,200,190" href = "negro.htm" alt="zona azul"/> <area shape = "rect" coords = "0,190,200,300" href = "rojo.htm" alt="zona azul"/> </map> Ander Barbier Ibáñez
Elementos multimedia (5/6) <object atributos >...</object>. Permite incluir objetos externos como applets de Java, películas de Shockwave, etc. Es una generalización del tag <applet>. Atributos: classid = “URL”. URL completa del archivo que contiene el objeto. codebase = “ruta”. La ruta base de la aplicación. data=“url”. URL relativa a la ruta especificada en el atributo codebase codetype=“content-type”. Tipo de los datos esperados al descargarse el objeto. Ander Barbier Ibáñez
Elementos multimedia (6/6) Cada elemento <object> debe proporcionar un texto alternativo en el contenido del elemento (aquello comprendido entre <object> y </object>). <param atributos>...</param>. Posibilita pasar parámetros a un object. Atributos: name =“Nombre”. Nombre del parámetro. value = “Valor”. Valor pasado al Objeto. Ejemplo: <object codetype="application/java" classid="java:Applet3.class" width="500" height="100"> <param name= "Mensaje" value="Seminario de Programación web"> </object> Ander Barbier Ibáñez
Una tabla es un conjunto de filas y columnas. Tablas (1/2) Una tabla es un conjunto de filas y columnas. Los navegadores no interpretan de la misma forma las tablas, por lo que se recomienda probarlas con varios navegadores. Durante mucho tiempo se han utilizado las tablas como herramienta de maquetación de documentos, pero para maquetar documentos se deben utilizar estilos css, NUNCA TABLAS. Ander Barbier Ibáñez
Los tags para la creación de tablas son: <table atributos >...</table>. Indican el comienzo y final de la tabla. <caption>...</caption>. Se utiliza para dar título a la tabla. <tr>...</tr>. Indican el comienzo y final de una fila. <th>...</th> y <td>..</td>. Indican el comienzo de una celda. <th> y <td> se diferencian en que <th> se utiliza como cabecera de la tabla, en las celdas de la primera fila. Atributos: id=“id”. Identificador del elemento scope=“valor”. Especifica las celdas a las que proporciona información de cabecera. Posibles valores: row, col headers=“Valor”. Proporciona información de cabecera a la celda. Se utiliza para asociar celdas con columnas. colspan=“n”. Número de columnas que abarca la celda. rowspan=“n”. Número de filas que abarca la celda. Ander Barbier Ibáñez
Cada una de estas áreas se denominan frames o marcos. Los navegadores permiten dividir una ventana en varias áreas y cargar un documento HTML en cada área. Cada una de estas áreas se denominan frames o marcos. Para crear frames se debe crear un documento XHTML, que defina la división de frames, y otros tantos documentos html como frames se hayan definido. Los documentos que utilizan frames son “XHTML 1.0 Frameset”, por lo que deben comenzar por la directiva: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Ander Barbier Ibáñez
Los tags para la creación de frames son: Los documentos con frames no llevan <body>, solo <head>y <frameset> Los tags para la creación de frames son: <frameset atributos >...</frameset>. Se utiliza para dividir una ventana del navegador en frames. Atributos: cols = “n1,n2%,...”. Indica tamaño de cada columna en pixels o porcentaje. rows = “n1,n2,...”. Indica tamaño de cada fila. <frame atributos>. Indica la página que se debe cargar en el frame. Atributos: src=“url”. Indica la URL de la página contenida en el frame. name=“Nombre”. Nombre del frame. scrolling=“Valor”. Activa/desactiva las barras de desplazamiento. Valores posibles: Yes, no, auto. noresize. Imposibilita la modificación del tamaño del frame por parte del usuario. Ander Barbier Ibáñez
Frames (3/4) Atributo target de <a>. Al crear un enlace es posible especificar el frame en el que cargar el documento enlazado. Simplemente hay asignar el valor necesario al atributo target del tag <a>. Posibles valores: “_blank”. Hace que el documento aparezca en una nueva ventana. “_parent”. Hace que el documento aparezca en la ventana del frame padre. Lo normal es que el padre sea el documento que contiene el frameset y se cargue el documento en toda la ventana. “_top”. Hace que el documento aparezca en la propia ventana, sin frames. “_self”. Carga el documento en el mismo frame donde se encuentra el tag <a>. “Nombre-Frame”. Carga el documento en el frame cuyo nombre sea “Nombre-Frame”. Ander Barbier Ibáñez
Frames (4/4) Cuando se utilizan frames es fundamental utilizar la etiqueta <noframes hfref=“paginamenu.html”></noframes>, que permitirá una navegación alternativa para aquellas personas para las que los frames no sean accesibles. Ander Barbier Ibáñez
Formularios(1/6) Los formularios permiten al usuario introducir información y enviarla al servidor web. En el servidor web tiene que existir un programa que recoja y procese dicha información. Ese programa puede ser un cgi o una página activa. En un formulario se pueden incluir cuadros de texto, listas desplegables, casillas de verificación, botones de opción, botones, etc. Ander Barbier Ibáñez
Los tags que nos permiten crear formularios son: <form atributos >...</form>. Indica el comienzo de un formulario. Un documento html puede contener varios formularios. Atributos: action=“url”. URL del programa al que se va a enviar la información recogida por el formulario. method =“Valor”. Indica la manera en que se enviaran los datos. Valores posibles: get y post. name =“Nombre”. Identifica al form. enctype=“content-type”. Indica el modo de codificar los datos que se van a enviar. target =“valor”. Indica el frame en el que se va a cargar la página devuelta por servidor web. Ander Barbier Ibáñez
Formularios(3/6) <input atributos >...</input>. Define un campo de entrada sobre el que el usuario puede introducir información. Toma diferentes formas en función del valor de sus atributos. Atributos: name=“Nombre”. Identifica al Input. value =“Valor”. Valor recogido. type =“Tipo”. Tipo del elemento de entrada. Puede tomar los valores: text, password, checkbox, radio, hidden, button, submit, reset e image. checked=“Valor”..Indica si un check está o no seleccionado. size =“n”. Indica el tamaño del text. maxlength =“n”. Número máximo de caracteres que admitirá un text. Ander Barbier Ibáñez
<select name="dias" size=“7” multiple=“multiple”> Formularios(4/6) <select>...</select>. Inserta una lista desplegable. Atributos: name=“Nombre”.Identifca al select. size=“n”.Tamaño en líneas de la lista a mostrar. Multiple=“multiple”. Permite realizar selecciones multiples al usuario. <option>...</option>. Hay que incluir un tag <option> por cada elemento de una lista desplegable . Atributos: value=“Valor”.Valor de la opción. Ejemplo: <select name="dias" size=“7” multiple=“multiple”> <option value="1">Lunes</option> <option value="2">Martes</option> ... </select> Ander Barbier Ibáñez
<textarea name="Observaciones" rows="3" cols="20"> Formularios(5/6) <textarea>...</textarea>. Inserta un cuadro de texto con varias líneas. Atributos: name=“Nombre”. Identifica al textarea value=“Valor”. Contenido del textarea. rows=“n”. Número de líneas visibles simultaneamente. cols=“n”. Número de caracteres por línea visibles simultaneamente. Ejemplo: <textarea name="Observaciones" rows="3" cols="20"> Escriba aquí sus comentarios. </textarea> Ander Barbier Ibáñez
Es importante asociar un literal con cada campo del formulario. Formularios(6/6) Es importante asociar un literal con cada campo del formulario. Ejemplo: <label for=“apellidos">Apellidos</label> <input name=“apellidos” /> Ander Barbier Ibáñez