XHTML

XHTML
eXtensible HyperText Markup

Language
Contenido
1. Introducción al HTML 8. Formularios
2. Etiquetas, atributos y elemen 9. Estructura
tos 10. Metainformación
3. Texto 11. Accesibilidad y validación
4. Listas 12. Referencia rápida
5. Enlaces y navegación anidad
a
6. Imágenes y objetos
7. Tablas
1. Introducción al HTML
1. Introducción al html
¿Qué es el HTML? XHTML
HTML es un lenguaje de marcas usado para la elaboración de

documentos html.
El lenguaje HTML1 es un estándar reconocido mundialmente y
cuyas normas vienen dadas por el W3C2. Este organismo
produce recomendaciones para la World Wide Web, lo que hace
que una misma página web sea visualizada de forma similar en
diferentes navegadores y sistemas operativos.
1. HyperText Markup Language

2. World Wide Web Consortium
¿Y el XHTML? XHTML
XHTML es una redefinición de HTML 4.

En general, la sintaxis XHTML1 es más estricta que en HTML,
puesto que existen restricciones en la forma de escribir código:
 HTML: <IMG>, <ol start=3>, <br>
 XHTML: <img>, <ol start=“3”>, <br />
Escribir todo en minúsculas, usar comillas en los valores de los

atributos y cerrar cada una de las instrucciones, son algunos
ejemplos de restricción en XHTML.
1. eXtensible HyperText Markup Language
XHTML, CSS y JavaScript XHTML
En un principio, con HTML se definía el contenido y la apariencia o
presentación de un documento html, una práctica que complicaba en gran
medida su desarrollo y mantenimiento. Actualmente, con XHTML se
determina el contenido y con CSS1 se define la presentación.
Es posible definir también la funcionalidad de un documento mediante el

uso de tecnologías como JavaScript2.
1. Cascading Style Sheets. Lenguaje de reglas en cascada para aplicar estilos .
2. JavaScript. Lenguaje de programación que permite crear contenido nuevo y dinámico.
2. Etiquetas, atributos y elementos
Etiquetas y atributos XHTML
El lenguaje de marcado se construye en forma de etiquetas

encerradas entre los signos mayor que “>” y menor que “<“:
<etiqueta_apertura> . . . </etiqueta_cierre>
La mayoría de las etiquetas contienen otras propiedades o
atributos que definen su presentación y comportamiento. Estos
atributos se declaran dentro de la etiqueta de apertura:
<etiqueta_apertura atributo1=“valor” atributo2=“valor”>
Aunque cada etiqueta define sus propios atributos, existen algunos comunes que se dividen en cuatro grupos según su funcionalidad: básicos, de
internacionalización, de eventos y de foco.
Elementos XHTML
HTML define el término elemento para referirse a la estructura

general de una línea de código:
<etiqueta atributo1=“valor” atributo2=“valor”> contenido </etiqueta>
El lenguaje HTML clasifica a todos los elementos en dos grupos:
elementos en línea y elementos en bloque.
Los elementos en bloque empiezan en una nueva línea y ocupan todo
el espacio disponible hasta el final de esta; los elementos en línea sólo
ocupan el espacio necesario para mostrar sus contenidos.
Etiquetas estructurales XHTML
 <html> - Indica el comienzo y el final de un documento html.
 <head> - Cabecera, define la información necesaria para configurar la
página web como el título, el tipo de codificación de caracteres y los
archivos externos requeridos por el documento.
 <body> - Cuerpo, delimita el contenido de la página como textos,
listas, imágenes, etc.
2. Etiquetas, atributos y
Estructura de un documento html elementos
XHTML
<html>
<head>
<title>Título del documento</title>

</head>
<body>

</body>
</html>
HTML permite incluir comentarios dentro de su código para añadir información que no se debe mostrar por pantalla: <!– Esto es un comentario -->. Los
comentarios pueden ocupar tantas líneas como sea necesario pero no anidarse, es decir, no es posible incluir un comentario dentro de otro.
3. Texto
3. Texto
Estructurar y marcar texto XHTML
HTML define etiquetas para transformar un texto simple en un

texto estructurado y marcado.
El proceso de estructurar un texto consiste en indicar las
diferentes secciones que lo componen (títulos y párrafos); el
proceso posterior consiste en marcar los elementos relevantes
dentro del texto (definiciones, abreviaturas, citas, etc.).
3. Texto
Estructuración de Párrafos XHTML
La etiqueta <p> define un texto de párrafo:

<body>
<p>Primer texto de párrafo</p>
<p>Segundo texto de párrafo</p>
</body>
3. Texto
Estructuración de Títulos XHTML
Las etiquetas <h1> . . . <h6> definen títulos de sección:

<body>
<h1>Título de nivel 1</h1>
</body>
<h1> define el título de mayor importancia, mientras que <h6> define el de menor importancia. Un documento html debe incluir solo un elemento <h1>.
3. Texto
Marcado básico de Texto XHTML
La etiqueta <em> realza la relevancia del texto que encierra (se

muestra en cursiva). La etiqueta <strong> realza el texto con la
máxima importancia (se muestra en negrita):
<body>
<p>El lenguaje HTML permite marcar algunos segmentos de
texto como <em>relevantes</em> y otros segmentos
como <strong>los más importantes</strong>. </p>
</body>
3. Texto
La etiqueta <ins> marca la inserción de un nuevo contenido (se

muestra subrayado). La etiqueta <del> marca la eliminación de
un contenido (se muestra tachado):
<body>
<p>El lenguaje HTML (lenguaje de <del>marcado de
hipertexto</del> <ins>marcas hipertextuales</ins>) es un
lenguaje que se escribe en su totalidad con elementos. </p>
</body>
Atributos para <ins> y <del>: cite=“url” – URL de la página que contiene información sobre el motivo de la modificación; datetime=“fecha” – fecha en la que se
realizó el cambio (aaaammdd).
3. Texto
La etiqueta <blockquote> marca el contenido de una cita de una

fuente externa. La etiqueta <cite> marca el autor de la cita:
<body>
<cite>Mahatma Gandhi</cite>:
<blockquote>Vive como si fueras a morir mañana y aprende
como si fueras a vivir para siempre.</blockquote>

</body>
Atributos para <blockquote>: cite=“url” – URL de la página que contiene la cita textual referenciada.
3. Texto
Marcado avanzado de Texto XHTML
La etiqueta <abbr> proporciona al usuario la definición de todas

las palabras para las que se considere apropiado:
<body>
<p>El lenguaje HTML es estandarizado por el <abbr
title=“World
Wide Web Consortium”>W3C</abbr>.</p>
</body>
Atributos para <abbr>: title = “texto“– significado completo de la abreviatura.

3. Texto
La etiqueta <dfn> indica el significado completo del término:

<body>
<p>Con estos síntomas, podría tratarse de un caso de <dfn title=
“Imagen o sensación subjetiva, propia de un sentido determinada
por otra sensación que afecta a un sentido diferente”>sinestesia
</dfn>.</p>
</body>
Atributos para <dfn>: title = “texto“– significado completo del término.

3. Texto
HTML incluye las etiquetas genéricas <div> y <span> para

marcar cualquier otro elemento que no puede marcarse con las
etiquetas anteriores:
<body>
<div>Contenido en bloque</div>
<span>Contenido en línea</span>
</body>
Es habitual utilizar las etiquetas <div> y <span> junto con los atributos id y class para modificar su presentación con CSS.
3. Texto
Nuevas líneas
XHTML
La etiqueta <br> se utiliza para insertar una nueva línea. Al ser

una etiqueta vacía, es decir, que no encierra texto alguno, debe
incluir el carácter de cierre en la etiqueta de apertura <br />:
<body>
<p>Este párrafo <br />contiene<br /> saltos de línea.</p>
</body>
3. Texto
Espacios en blanco
XHTML
Para incluir espacios en blanco adicionales se debe sustituir cada

nuevo espacio en blanco por el texto
<body>
<p>Este párrafo contiene espacios

en blanco.</p>
</body>
3. Texto
Texto pre formateado
XHTML
La etiqueta <pre> muestra el texto tal y como se ha escrito, respetando las
nuevas líneas y los espacios en blanco:
<body>
<pre>
La etiqueta “pre” respeta los espacios en blanco
y muestra el texto tal y como
está escrito.
</pre>
</body>
3. Texto
Texto de código fuente
XHTML
La etiqueta <code> por su parte, muestra código fuente de

cualquier lenguaje de programación:
<body>
<p>La etiqueta <code>code</code> es similar a la etiqueta
<code>pre</code>, sobre todo en el formato del texto.</p>
</body>
3. Texto
Codificación de caracteres
XHTML
Existen caracteres que se utilizan habitualmente en los textos que

no se pueden incluir directamente en las páginas web como los
que utiliza HTML.
La solución consiste en sustituir los caracteres por expresiones
llamadas entidades HTML: < <, > >, & &, " “,
espacio en blanco y ' ‘.
De igual manera se sustituye cada carácter de idioma por su entidad correspondiente: ñ ñ, Ñ N, á á, é é, í í, ó ó,
ú ú, Á Á, É É, Í Í, Ó Ó, Ú Ú y € €.
4. Listas
4. Listas
Listas
XHTML
Las listas son conjuntos de elementos estructurados y sirven para

dar mayor significado a los textos, como en un menú de
navegación, por ejemplo. HTML define tres tipos de listas:
 No ordenada: muestra elementos sin un orden determinado.
 Ordenada: muestra los elementos siguiendo un orden.
 De definición: muestra términos y definiciones.
4. Listas
Listas no ordenadas
XHTML
La etiqueta <ul> define la lista y la etiqueta <li> define los

elementos que conforman la lista:
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
Es posible modificar el aspecto con el que se muestran los elementos de la lista mediante estilos CSS.
4. Listas
Listas ordenadas
XHTML
La etiqueta <ol> define la lista y la etiqueta <li> define cada uno de

sus elementos:
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
También es posible modificar el tipo de numeración de la lista mediante estilos CSS.
4. Listas
Listas de definición
XHTML
La etiqueta <dl> define la lista y las etiquetas <dt> y <dd> definen el
término y la descripción de cada elemento respectivamente:
<body>
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado de hipertexto</dd>
<dt>CSS</dt>
<dd>Lenguaje de hojas de estilos en cascada</dd>
<dt>JavaScript</dt>
<dd>Lenguaje de programación interpretado</dd>
</dl>
</body>
Los navegadores formatean las listas de definición tabulando la definición y alineando a la izquierda los términos.
5. Enlaces y navegación anidada
5. Enlaces y navegación
URL sencilla anidada
XHTML
Una URL1 es una dirección única que poseen todos los elementos en
Internet para su localización. Un ejemplo de URL sencilla sería:
http://www.librosweb.es/xhtml/capitulo4.html
 Protocolo (http://): mecanismo que debe utilizar el navegador para
acceder a ese recurso.
 Servidor (www.librosweb.es): computadora que almacena la página
que se desea acceder.
 Ruta (/xhtml/capitulo4.html): camino a seguir para localizar el recurso
específico a consultar.
1. Uniform Resource Locator
URL compleja anidada
XHTML
Existen URL complejas formadas por más partes:
http://www.librosweb.es/xhtml/capitulo4.html/?page=5#42
 Consulta (?page=5): información adicional necesaria para
que el servidor localice correctamente el recurso requerido.
 Sección (#42): posiciona automáticamente al navegador en
una sección de la página web.
Si una URL requiere de caracteres reservados y/o especiales, estos se sustituyen por combinaciones de caracteres seguros: / (%2F), : (%3A), = (%3D), “ (%22), ‘
(%60), espacio en blanco (%20), ? (%3F), @ (%40), & (%26), \ (%5C), ~ (%7E) y | (%7C).
URL relativas y absolutas anidada
XHTML
Las URL absolutas incluyen todas las partes de la URL
(protocolo, servidor y ruta) por lo que no se necesita más
información para obtener el recurso enlazado:
http://www.servidor.com/ruta1/ruta2/pagina1.html
Las URL relativas se construyen a partir de las URL absolutas y
prescinden de la parte del protocolo, del servidor e incluso de la
ruta del recurso enlazado:
ruta1/ruta2/pagina1.html
Si el destino del enlace se encuentra en un nivel superior, se antecede la ruta del recurso con dos puntos y una barra: .. / ruta3.
Enlaces anidada
XHTML
Los enlaces en HTML se crean mediante la etiqueta <a>. Enlaces a
un sitio web, a un recurso y a una dirección de correo electrónico,
son de los más utilizados en una página web:
<body>
<a href=“http://www.google.com”>Google</a>
<a type=“text/pdf” href=“documentos/informe.pdf”>Descargar
informe completo [PDF]</a>
<a href=“mailto:usuario@direccion.com”>Enviar correo</a>
</body>
Atributos para <a>: href=“url” – URL del recurso a enlazar; name=”texto” – nombra el enlace para que pueda accederse desde otros: type=“tipo de contenido” –
tipo de contenido que se enlaza.
Otros tipos de enlaces anidada
XHTML
HTML define las etiquetas <script> y <link> para enlazar recursos
que se deben cargar y aplicarse automáticamente a la página web,
por ejemplo, un programa de JavaScript o una hoja de estilos CSS:
<head>
<script type=“text/javascript” src=“js/inicializar.js”></script>
<link rel=“stylesheet” type=“text/css” href=“css/comun.css” />
</head>
Atributos para <script>: src=“url” – URL del archivo que contiene el código; type=“tipo” – tipo de código que se incluye (normalmente “text/javascript”;
defer=“defer” – el código no modifica el contenido de la página; charset=“tipo” – codificación del código enlazado. Atributos para <link>: charset, href, hreflang,
type, rel y rev – todos con el mismo significado como en la etiqueta <a>, media=“tipo” – medio para el que debe aplicarse la relación (screen, print, handheld).
Navegación anidada anidada
XHTML
La etiqueta HTML <iframe> representa un contexto de
navegación anidada, el cual permite incorporar otra página o
documento html en la página actual:
<body>
<iframe src=“otraPagina.html” width=“300”
height=“240”></iframe>
</body>
Atributos para <iframe>: src=“url” – URL de la página a incorporar; height=“unidad de medida” y width=“unidad de medida” – indican la altura y la anchura
del marco respectivamente; name=“nombre” – nombre del marco para ser referido por links o javascript; frameborder=“0 o 1” – existencia del borde del marco.
Imágenes
XHTML
Las imágenes son elementos que permiten complementar la

información textual de una página web. Una imagen se incluye
mediante la etiqueta <img>:
<body>
<img src=“imagen.jpg” alt=“descripción de la imagen” />
</body>
Atributos para <img>: src=“url” – URL de la imagen; alt=“texto” – descripción corta de la imagen; longdesc=“url” – URL que contiene una descripción más
detallada de la imagen; name=“texto” – nombre del elemento imagen; height=“unidad de medida” y width=“unidad de medida” – indican la altura y la anchura
de la imagen respectivamente; usemap=“#url” - URL de un mapa de imagen asociado a un elemento.
Mapas de imagen
XHTML
Un mapa de imagen permite definir diferentes zonas

seleccionables dentro de una imagen. Cada zona apunta a una
URL diferente.
Las zonas que se pueden definir en una imagen se crean
mediante rectángulos, círculos y polígonos. Para crear un mapa
de imagen, se inserta en primer lugar la imagen original y,
posteriormente, se definen las zonas del mapa.
Mapas de imagen
XHTML
La etiqueta <map> define mapas de imagen. La etiqueta <area> define las
distintas áreas que forman un mapa de imagen:
<img src=“imagen.gif” usemap=“#mapa_zonas” />
<map name=“mapa_zonas”>
<area shape=“rect” coords=“20,25,84,113” href=“rectangulo.html” />
<area shape=“polygon” coords=“90,25,162,25,162,96”
href=“triangulo.html” />
<area shape=“circle” coords=“130,114,29” href=“circulo.html” />
<area shape=“default” nohref=“nohref” />
</map>
Atributos para <map>: name=“texto” – nombre único para el mapa definido. Atributos para <area>: nohref=“nohref” – para las áreas no seleccionables;
shape=“default | rect | circle | poly” – tipo de área definida; coords=“lista de números” – coordenadas del área separadas por coma.
Objetos
XHTML
Además de las imágenes, HTML permite incluir en las páginas

web otros elementos mucho más complejos, como applets de
Java y videos.
La etiqueta <object> incluye en las páginas cualquier tipo de
contenido complejo:
<object data=“planetaTierra.mpeg” type=“application/mpeg” />
Atributos para <object>: data=“url” – URL de los datos que utiliza el objeto; type=“tipo” – tipo de contenido de los datos; height=“unidad de medida” y
width=“unidad de medida” – altura y la anchura respectivamente con la que se debe mostrar el objeto.
7. Tablas
7. Tablas
Tablas
XHTML
Las tablas constituyen una herramienta eficaz para presentar

distintos contenidos de forma organizada.
Las tablas más sencillas de HTML se definen con tres etiquetas:
<table> para crear la tabla, <tr> para crear cada fila y <td> para
crear una celda. La etiqueta <th> define también una celda, pero
en este caso, una celda de cabecera de fila o de columna.
7. Tablas
Tabla básica
XHTML
<h2>Curso de diseño web</h2> <tr>
<table> <td>CSS</td>
<tr> <td>18</td>
<th>Lenguaje</th> <td>10:00 – 12:00</td>
<th>Sesiones</th> </tr>
<th>Horario</th> <tr>
</tr> <td>JavaScript</td>
<tr> <td>20</td>
<td>HTML</td> <td>12:00 – 14:00</td>
<td>16</td> </tr>
<td>08:00 – 10:00</td> </table>
</tr>
7. Tablas
Tablas avanzadas
XHTML
Las partes que componen las tablas complejas se definen

mediante las etiquetas: <thead> define la cabecera de la tabla,
<tbody> define cada sección de datos y <tfoot> define el pie de
la tabla.
HTML incluye también la etiqueta <caption> para establecer el
título de una tabla.
7. Tablas
Tabla avanzada
XHTML
<table> <tr>
<caption>Curso de diseño web</caption> <td>CSS</td>
<thead> <td>18</td>
<tr> <td>10:00 – 12:00</td>
<th colspan=“3”>Módulos</th> </tr>
</tr> <tr>
<tr> <td>JavaScript</td>
<th scope=“col”>Lenguaje</th> <td>20</td>
<th scope=“col”>Sesiones</th> <td>12:00 – 14:00</td>
<th scope=“col”>Horario</th> </tr>
</tr> </tbody>
</thead> <tfoot>
<tbody> <tr>
<tr> <th colspan=“3”>Cupo limitado</th>
<td>HTML</td> </tr>
<td>16</td> </tfoot>
<td>08:00 – 10:00</td> </table>
</tr>
8. Formularios
8. Formularios
Formularios
XHTML
Los formularios son conjuntos de controles que permiten al usuario

introducir datos y enviarlos al servidor web para su procesamiento.
Utilizando solamente las etiquetas <form> e <input>, es posible crear
formularios sencillos:
<form action=“registra_usuario.php” method=“post”>
Nombre:
<input type=“text” name=“nombre” value=“” /><br />
<input type=“submit” value=“Enviar” />
</form>
Atributo para <form>: action=“url” – URL que se encarga de procesar los datos del formulario; method=“post o get” – método HTTP empleado al enviar el
formulario; enctype=“application/x-www-form-urlencoded o multipart/form-data” – tipo de codificación empleada al enviar el formulario al servidor;
accept=“tipo” – lista de los archivos aceptados por el servidor; otros: accept-charset, onsubmit, onreset.
8. Formularios
Elementos de formulario
XHTML
La etiqueta <input> define diferentes tipos de elementos de

formulario mediante el atributo type:
 Text y Password. Cuadro de texto y de contraseña
 Checkbox y Radiobutton. Casilla de verificación y botón de
opción
 Submit y Reset. Botón de envío y de reseteo de formulario
 File. Archivos adjuntos
 Hidden. Campos ocultos
AtributosImage y Button. – nombreBotón de imagen y genérico

 para <input>: name=“texto” del control; value=“texto” – valor del control; size=“medida” – tamaño del control; maxlength=“número” –
número máximo de caracteres para text y password; checked=“checked” – opción preseleccionada en checkbox y radiobutton; disabled=“disabled” – control
deshabilitado; readonly=“readonly” – solo lectura; src=“url” – URL de la imagen para el botón de formulario; alt=“texto” – descripción del control.
8. Formularios
Cuadro de texto y de contraseña
XHTML
 Text. Se trata de un cuadro de texto vacío en el que el usuario puede
escribir cualquier texto:
Nombre: <br />
<input type=“text” name=“nombre” value=”” />
 Password. La diferencia entre este control y el cuadro de texto es
que el texto que el usuario escribe no se ve en pantalla:
Contraseña: <br />
<input type=“password” name=“contraseña” value=“” />
8. Formularios
Casilla de verificación y botón de opción
XHTML
 Checkbox. Son controles que permiten al usuario seleccionar y deseleccionar
opciones individualmente:
Puestos de trabajo:<br />
<input type=“checkbox” name=“directivo” value=“directivo”
/>Directivo<br />
<input type=“checkbox” name=“tecnico” value=“tecnico” />Técnico<br />
<input type=“checkbox” name=“empleado” value=“empleado” />Empleado
 Radiobutton. Estos controles son mutuamente excluyentes:
Sexo: <br />
<input type=“radio” name=“sexo” value=“mujer” checked=“checked”
/>Mujer
<input type=“radio” name=“sexo” value=“hombre” />Hombre
8. Formularios
Botón de envío y de reseteo
XHTML
 Submit. La función de este botón es enviar al servidor los
datos introducidos por el usuario:
<input type=“submit” name=“enviar” value=“Enviar datos” />
 Reset. Se trata de un botón que borra todos los datos
introducidos por el usuario y devuelve el formulario a su
estado original:
<input type=“reset” name=“borrar” value=“Borrar datos” />
Archivos adjuntos y campos 8. Formularios
ocultos XHTML
 File. Los formularios también permiten adjuntar archivos
para subirlos al servidor:
Archivo adjunto:<br />
<input type=“file” name=“adjunto” />
 Hidden. Estos elementos se emplean para añadir información
oculta en el formulario:
<input type=“hidden” name=“url_previa” value=“articulo/
primero.html” />
En el caso de envío de archivos es obligatorio añadir el atributo enctype en la etiqueta <form>.
8. Formularios
Botón de imagen y genérico
XHTML
 Image. El aspecto de los botones de formulario se puede
personalizar, incluso es posible utilizar una imagen como
botón:
<input type=“image” name=“enviar” src=“enviar.png” />
 Button. Algunos formularios complejos necesitan botones más
avanzados. Por ese motivo, el estándar HTML/XHTML define
un botón de tipo genérico:
<input type=“button” name=“guardar” value=“Guardar” />
8. Formularios
Formulario básico
XHTML
<h2>Formulario de registro</h2> “mujer” checked=“checked” />Mujer
<form action=“registra_usuario.php” method= <input type=“radio” name=“sexo” value=
“post”> “hombre” />Hombre<br />
Nombre:<br /> Fotografía:<br />
<input type=“text” name=“nombre” <input type=“file” name=“fotografia” /><br
value=“” />
/><br /> <input type=“checkbox”
Correo:<br /> name=“condiciones”
<input type=“text” name=“correo” value=“” value=“condiciones” />Acepto condiciones
/> de
<br /> uso<br />
Contraseña:<br /> <input type=“submit” name=“enviar”
<input type=“password” value=
name=“contraseña” “Enviar datos” />
value=“” /><br /> <input type=“reset” name=“borrar” value=
Sexo:<br /> “Borrar datos” />
8. Formularios
Formularios avanzados
XHTML
HTML define algunos elementos adicionales para mejorar la

estructura de los formularios. La etiqueta <fieldset> agrupa
campos del formulario y la etiqueta <legend> asigna un nombre a
cada grupo.
El lenguaje HTML incluye además la etiqueta <label>, que se
utiliza para establecer un título para cada campo del formulario:
<label for=“nombre”>Nombre</label><br />
<input type=“text” id=“nombre” name=“nombre” value=“” />
Atributos para <label>: for=“id de elemento” – id del campo del formulario para el que este elemento es su título; otros – accesskey, onfocus y onblur.
8. Formularios
Formulario avanzado
XHTML
<h2>Formulario de acceso</h2> <fieldset>
<form action=“acceso_usuario.php” method= <legend>Datos de conexión</legend>
“post”> Usuario<br />
<fieldset> <input type=“radio” name=“usuario”
<legend>Datos personales</legend> value=“administrador” />Administrador
<label <input type=“radio” name=“usuario”
for=“nombre”>Nombre</label><br /> value=
<input type=“text” id=“nombre” name= “invitado” />Invitado<br />
“nombre” value=“” /><br /> <label
<label for=“contraseña”>Contraseña</label>
for=“correo”>Correo</label><br /> <br />
<input type=“text” id=“correo” name= <input type=“password” id=“contraseña”
“correo” value=“” /><br /> name=“contraseña” value=“” />
</fieldset> </fieldset>
</form>
8. Formularios
Área de texto
XHTML
Algunas aplicaciones web utilizan otros elementos de formulario

que no se pueden crear con <input>. HTML dispone para ello de
áreas de texto y listas desplegables.
La etiqueta <textarea> permite introducir una gran cantidad de
texto:
<label for=“descripcion”>Descripción del producto</label><br/>
<textarea id=“descripcion” name=“descripcion” cols=“40”
rows=“5”> </textarea>
Atributos para <textarea>: cols=“número” – número de caracteres que se podrán escribir como máximo en cada fila; rows=“número” – filas de texto que serán
visibles; otros - name, disabled, readonly, onselect, onchange, onfocus y onblur.
8. Formularios
Lista desplegable
XHTML
La etiqueta <select> define tres tipos de lista desplegable,

mismas que pueden definirse mediante los atributos size y
múltiple.
La etiqueta <option> define cada elemento de la lista.
Atributos para <select>: size=”número” – número de filas que se muestran en la lista; multiple=“multiple” – selecciona más de un elemento; otros – name,
disabled, onchange, onfocus y onblur. Atributos para <option>: selected=“selected” – elemento seleccionado por defecto; value=“texto” – valor que se envía al
servidor; otros - disabled y selected.
8. Formularios
Listas desplegables
XHTML
<label for=“so”>Sistema Windows</option>
operativo</label><br /> <option value=“mac”>Mac</option>
<select id=“so” name=“so”> <option value=“linux”>Linux</option>
<option value=“” selected=“selected”> </select><br />
selecciona</option>
<option <label for=“so3”>Sistema
value=“windows”>Windows</option> operativo</label><br />
<option value=“mac”>Mac</option> <select id=“so3” name=“so3” size=“5”
<option value=“linux”>Linux</option> multiple=“multiple”>
</select><br /> <option value=“windows”
selected=“selected”>
<label for=“so2”>Sistema Windows</option>
operativo</label><br /> <option value=“mac”>Mac</option>
<select id=“so2” name=“so2”> <option value=“linux”>Linux</option>
<option value=“windows” </select>
8. Formularios
Grupo de opciones de lista
XHTML
Por otra parte, la etiqueta <optgroup> permite agrupar opciones

relacionadas dentro de una lista desplegable:
<optgroup label=“Sistemas operativos”>
<option value=“windows” selected=“selected”>Windows</option>
<option value=“mac”>Mac</option>
<option value=“linux”>Linux</option>
</optgroup>
Atributos para <optgroup>: label=“texto” - título de la agrupación de opciones de lista; otros - disabled y selected.
9. Estructura
9. Estructura
Estructuras complejas
XHTML
Es posible crear cualquier página web combinando las etiquetas

XHTML, sin embargo, no es posible el diseño de una estructura
compleja. Para crear páginas con diseños avanzados es
imprescindible emplear CSS.
No obstante, las hojas de estilos necesitan la ayuda de HTML
para agrupar los elementos de la página en diferentes zonas o
divisiones en función de su finalidad. HTML cuenta con la
etiqueta <div> para realizar esta tarea.
9. Estructura
Divisiones de una página web
XHTML
 Contenedor: suele encerrar la mayor parte de los contenidos
de la página y se emplea para definir las características de
esta: anchura, bordes, alineación, etc.
 Cabecera: incluye todos los elementos invariantes de la parte
superior de la página (logotipo, imagen o banner, cuadro de
búsqueda, etc.)
 Menú: se emplea para agrupar todos los elementos del menú
de navegación.
9. Estructura
Divisiones de una página web
XHTML
 Contenido: engloba el contenido principal del sitio (la zona
de noticias, la zona de artículos, la zona de productos, etc.)
 Lateral: se emplea para agrupar los elementos de las
columnas laterales y secundarias de la página.
 Pie: incluye todos los elementos invariantes de la parte
inferior de la página (aviso de copyright, política de
privacidad, términos de uso, etc.)
9. Estructura
Estructura con divisiones
XHTML
<div id=“contenedor”> <div id=“lateral”>

<div id=“cabecera”> ...
... </div>
</div> <div id=“pie”>
<div id=“menu”> ...
... </div>
</div> </div>
<div id=“contenido”>
...
</div>
10. Metainformación
Metadatos
XHTML
Los metadatos son datos adicionales de la propia página como su

descripción, codificación de caracteres utilizada y palabras clave
por mencionar algunos ejemplos. La metainformación se incluye
en la cabecera, es decir, dentro de la etiqueta <head>.
La etiqueta empleada para la definición de los metadatos es
<meta>. Los metadatos habituales utilizan solamente los
atributos name y content para definir el nombre y el valor del
metadato respectivamente.
Metainformación habitual
XHTML

<meta name=“author” content=“Autor” />

<meta http-equiv=“Content-Type” content=“text/html” charset=“utf-8” />

<meta name=“keywords" content=“diseño, web, html” />

<meta name=“description" content=“Diseño web, usabilidad y
accesibilidad” />
Metainformación habitual
XHTML

<meta name=“robots” content=“index, follow” />

<meta name=“generator” content=“WordPress 2.8” />

<meta name=“copyright” content=“librosweb.es” />
11. Accesibilidad y validación
Requisitos mínimos de accesibilidad
XHTML
 Generales: el documento debe poder leerse aún cuando no se utilicen hojas de
estilos; proporcionar un texto alternativo para todas las imágenes, objetos y
otros elementos no textuales; y escribir el contenido con un lenguaje sencillo
y claro.
 Tablas: utilizar cabeceras de fila y de columna; si la tabla tiene varios niveles
de cabeceras, utilizar las agrupaciones disponibles.
 Applets y scripts: asegurar que la página también se pueda utilizar cuando no
se ejecutan applets y scripts; si no es posible, proporcionar alternativas que
sean accesibles.
 Audio y video: incluir una descripción textual del contenido multimedia para
los contenidos basados en vídeo o animaciones.
Si no es posible cumplir con los anteriores requisitos, se debe proporcionar una página alternativa con la mayor cantidad posible de contenidos.
Normas y restricciones
XHTML
La validación es el proceso que asegura que un documento escrito en un
determinado lenguaje cumple con las normas y restricciones de ese lenguaje.
Estos principios y limitaciones se definen en el DTD1.
El proceso de validación no es obligatorio pero sí recomendable. Este proceso
consiste en probar página a página si su código HTML pasa la prueba de
validación. Los validadores son las herramientas que se utilizan para validar
cada página.
Algunos editores de páginas web incluyen sus propios validadores y el
organismo W3C2 ha creado una herramienta gratuita para la validación de las
páginas.
1. Document Type Definition
2. World Wide Web Consortium
Validador del W3C
XHTML
La herramienta del W3C (http://validator.w3.org) presenta las

opciones siguientes:
 Validate by URI: permite escribir la URL de la página que se
quiere validar.
 Validate by File Upload: permite subir el archivo HTML
correspondiente a la página que se quiere validar.
 Validate by Direct Input: permite validar código HTML de
forma directa.
12. Referencia rápida
Referencia rápida XHTML
 <a>  <dfn>  <iframe>
 <abbr>  <div>  <img />
 <área />  <dl>  <Input>
 <blockquote>  <dt>  <ins>
 <body>  <em>  <label>
 <br />  <fieldset>  <legend>
 <cite>  <form>  <li>
 <code>  <h1>  <link />
 <dd>  <head>  <map>
 <del>  <html>  <object />
Referencia rápida XHTML
 <ol>  <tcaption>
 <optgroup>  <td>
 <p>  <textarea>
 <pre>  <tfoot>
 <script>  <th>
 <select>  <thead>
 <span>  <title>
 <strong>  <tr>
 <tabla>  <ul>
 <tbody>
Fuente:
Introducción a XHTML
https://uniwebsidad.com/libros/xhtm
l

XHTML

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

XHTML

Cargado por

Copyright:

Formatos disponibles

XHTML

eXtensible HyperText Markup

HTML es un lenguaje de marcas usado para la elaboración de

1. HyperText Markup Language

XHTML es una redefinición de HTML 4.

Escribir todo en minúsculas, usar comillas en los valores de los

Es posible definir también la funcionalidad de un documento mediante el

El lenguaje de marcado se construye en forma de etiquetas

HTML define el término elemento para referirse a la estructura

HTML define etiquetas para transformar un texto simple en un

La etiqueta <p> define un texto de párrafo:

Las etiquetas <h1> . . . <h6> definen títulos de sección:

La etiqueta <em> realza la relevancia del texto que encierra (se

La etiqueta <ins> marca la inserción de un nuevo contenido (se

La etiqueta <blockquote> marca el contenido de una cita de una

como si fueras a vivir para siempre.</blockquote>

La etiqueta <abbr> proporciona al usuario la definición de todas

Atributos para <abbr>: title = “texto“– significado completo de la abreviatura.

La etiqueta <dfn> indica el significado completo del término:

Atributos para <dfn>: title = “texto“– significado completo del término.

HTML incluye las etiquetas genéricas <div> y <span> para

La etiqueta <br> se utiliza para insertar una nueva línea. Al ser

Para incluir espacios en blanco adicionales se debe sustituir cada

La etiqueta <code> por su parte, muestra código fuente de

Existen caracteres que se utilizan habitualmente en los textos que

Las listas son conjuntos de elementos estructurados y sirven para

La etiqueta <ul> define la lista y la etiqueta <li> define los

La etiqueta <ol> define la lista y la etiqueta <li> define cada uno de

Las imágenes son elementos que permiten complementar la

Un mapa de imagen permite definir diferentes zonas

Además de las imágenes, HTML permite incluir en las páginas

Las tablas constituyen una herramienta eficaz para presentar

Las partes que componen las tablas complejas se definen

Los formularios son conjuntos de controles que permiten al usuario

La etiqueta <input> define diferentes tipos de elementos de

AtributosImage y Button. – nombreBotón de imagen y genérico

HTML define algunos elementos adicionales para mejorar la

Algunas aplicaciones web utilizan otros elementos de formulario

La etiqueta <select> define tres tipos de lista desplegable,

Por otra parte, la etiqueta <optgroup> permite agrupar opciones

Es posible crear cualquier página web combinando las etiquetas

<div id=“contenedor”> <div id=“lateral”>

Los metadatos son datos adicionales de la propia página como su

La herramienta del W3C (http://validator.w3.org) presenta las

También podría gustarte