Ander Barbier Ibáñez Indice Introducción Historia Versiones de xhtml Tags de xhtml Secciones de un documento Diferencias con HTML4 Caracteres

Ander Barbier IbáñezAnder Barbier IbáñezXhtmlXhtml - - 11 - -

xhtmlxhtml

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


IntroducciónIntroducció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.


HistoriaHistoria

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


Versiones de xtmlVersiones 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…


Tags de xhtml (1/2)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>


Tags de xtml (2/2)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.


Secciones de un documentoSecciones 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>.


Cabecera de un documetnoCabecera 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 -- [email protected]">

• <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.


Cuerpo de un documentoCuerpo de un documento

El cuerpo contiene el contenido del documento:

• <body>...</body>


Diferencias de xhtml con html4 (1/2)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>


Diferencias de xhtml con html4 (2/2)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>


Caracteres especialesCaracteres 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 @


Formato de textoFormato 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>… . Permite incluir

comentarios que el navegador no visualiza con el documento.


Encabezados y bloques de textoEncabezados 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).


Bloques de elementosBloques 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.


Enlaces (1/3)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.



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.



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>


ListasListas

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.


Elementos multimedia (1/6)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:



<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>



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…”>



• <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>



<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.



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>


Tablas (1/2)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.


Tablas (2/2)Tablas (2/2)

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.


Frames (1/4)Frames (1/4)

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">



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.



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”.



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.


Formularios(1/6)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.



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.



<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.



<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>



<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>



Es importante asociar un literal con cada campo del formulario.

Ejemplo:<label for=“apellidos">Apellidos</label>

<input name=“apellidos” />

Documents

Ander Barbier Ibáñez Indice Introducción Historia Versiones de xhtml Tags de xhtml Secciones de un documento Diferencias con HTML4 Caracteres