Unidad 1.3. XHTML para el diseño web
Con esta unidad, el alumno comprenderá la importancia que tiene la utilización de estándares a la hora de crear sitios web y conocerá los elementos más importantes del lenguaje XHTML.
Es una unidad muy práctica, en la que elaboraremos documentos en XHTML, usando el editor Kompozer, y aprenderemos a subir los ficheros de los ejercicios al servidor del máster con el cliente FTP FileZilla.
A la hora de crear nuestra página web deberemos tener presente las siguientes premisas:
- El sitio debe poder verse con cualquier navegador.
- Lo más importante de un sitio web son los contenidos.
- El código XHTML y CSS deben ser válidos y estar bien formados.
La utilización de estándares es necesaria porque garantizan:
- La consistencia y la perdurabilidad del sitio web.
- Su interoperabilidad.
- El uso de XHTML junto a CSS permite separar la estructura de los contenidos de la presentación visual de éstos, pudiendo crear diferentes estilos de visualización sin tener que multiplicar las versiones de las páginas.
- Hará más visible y accesible nuestro sitio.
- Podremos crear un sitio web modular, formado por diferentes piezas que ubicaremos en las páginas, a las que podremos dar un formato de forma individual para formar un todo.
Qué es XHTML
Es un lenguaje de marcado, que se limita a describir la estructura lógica del contenido del documento, dejando la apariencia visual en manos de las hojas de estilo (CSS). Por tanto, se centra en la semántica, no en el aspecto de los elementos.
Herramientas de edición
El lenguaje XHTML se basa en el código ASCII o ANSI (texto plano), y no contempla una interfaz específica para su tratamiento, sino que cualquier procesador de texto puede servir como base para la creación de páginas web, archivando siempre los documentos bajo la extensión *.html o *.html y formato texto plano.
Así, podemos realizar nuestras páginas desde dos formas diferentes: a través de un bloc de notas (en el que necesitamos tener un gran conocimiento del lenguaje XHTML); o a través de programas que nos facilitan esta tarea, como los denominados editores multifunción de páginas web (ej: Nvu), muy fáciles de manejar, que insertan automáticamente las etiquetas y nos permiten visualizar nuestra página a medida que la vayamos construyendo (WYSIWYG).
Elementos de XHTML
Podemos encontrar tres tipos diferentes:
| Elementos XHTML | Definición |
Elementos dobles |
Están formados por etiquetas de inicio y de final, las cuales están delimitadas por los símbolos "<" y ">". La etiqueta final se diferencia de la inicial en que tiene una barra "/"antes del nombre de la misma. Ej: <etiqueta> texto </etiqueta> |
| Elementos simples |
No precisan de la etiqueta doble final. Al ser elementos simples se cierran de una forma específica: <etiqueta+espacio+barra> Ej: <img/>, <br/> y <hr/> |
Elementos con argumentos |
La mayoría de los elementos de las etiquetas XHTML pueden tener argumentos o atributos, que sirven para modificar el comportamiento o añadir propiedades a las etiquetas. Estos atributos han de ir siempre entrecomillados con comillas dobles. Ej: <etiqueta atributo="valor"> |
Reglas importantes en XHTML:
- Incluir siempre la declaración del tipo de documento (DTD) al inicio de las páginas.
- Escribir todas las etiquetas y atributos en minúsculas.
- Cerrar todas las etiquetas del lenguaje.
- Anidar correctamente las relaciones jerárquicas entre etiquetas.
- Los valores de los atributos tienen que ir entrecomillados.
- Los atributos de una etiqueta siempre han de cumplir con la clave atributo="valor".
- Tener presente que XHTML está pensado para estructurar contenidos y determinar su significado, no para conseguir un formato visual (esto quedará en manos de las hojas de estilo).
Estructura de un documento
Un documento XHTML estándar tendrá los siguientes elementos:
- La declaración XML, en la que se indica la versión de XML y la codificación de caracteres que el documento va a utilizar.
- La declaración de tipo de documento (DTD), que define de forma estructurada todos los elementos, atributos y las relaciones que se establecen entre ellos.
- El elemento raíz, que utilizará las etiquetas <html> y </html>, para identificar el contenido del fichero de XHTML que se publicará en un entorno web y el idioma que utilizaremos.
- La cabecera del documento, que delimitada por las etiquetas <head> y </head>, contiene información sobre la página que no será visualizada en el contenido de la página. En la cabecera podremos encontrar la siguiente información y etiquetas:
| Etiquetas | Definición |
| <title> título </title> | Título de la página |
| Metainformación, <meta> | Proporcionan una información adicional sobre el documento, como el autor, descripción de contenidos o palabras clave que serán ponderadas en primera instancia por los motores de búsqueda. |
| Elementos de scripting, <script> | Son piezas de código de lenguajes de programación que se tienen que incluir al inicio de la página para poder posteriormente activar las diferentes funciones que incluyan. |
| Elementos de complemento, <link> | Permite enlazar otros archivos alternativos o complementarios al documento, como los ficheros de las hojas de estilo. |
| Elemento de estilo, <style> | Define reglas de estilo embebidas para dar formato al documento |
Formato y apariencia del documento
- Formato del cuerpo
Las etiquetas <body> y </body> permiten definir unas propiedades de estilo que afecten a toda la página, como el color de fondo o el color del texto, pero lo mejor es que esto lo hagamos desde una hoja de estilo CSS.
- Definición de separadores y bloques de texto
Utilizaremos las siguientes etiquetas:
| Etiqueta | Significado |
| <br /> | Salto o cambio de línea |
| <p>...</p> | Salto de párrafo |
| <blockquote>...</blockquote> | Tabulación y sangrado de citas |
| <div...</div> | Define bloque o secciónes de una página |
| <pre>...</pre> | Indica que el contenido está preformateado |
| <hr /> | separar contenidos de forma gráfica con una línea |
| <!comentario> | Sirven para comentar partes del código y especificar indicaciones |
- Etiquetas de formato
Con las siguientes etiquetas y atributos modificaremos las características que afectan los contenidos de las páginas, y definiremos los diferentes estilos que pueden afectar al texto.
|
Etiquetas de Formato |
Encabezamientos o títulos | <hn> y </hn> | Incluyen encabezamientos en los documentos para agrupar información |
|
Estilos de caracteres |
<em>...</em> | Texto en cursiva | |
| <strong>...</strong> | Texto en negrilla | ||
| <tt>...</tt> | Texto de teletipo o ancho fijo | ||
| <kbd>...</kbd> | Indica que el texto que encierra debe ser tecleado por el usuario | ||
| <code>...</code> | Designa un fragmento de código de programación | ||
| <address>...</address> | Información de contacto con el autor del contenido. | ||
| <cite>...</cite> | El contenido es una cita | ||
| <acronym>...</acronym> | El contenido es un acrónimo | ||
| <del>...</del> | Indica las diferencias entre versiones de contenidos | ||
| <sup>...</sup> | Indica el superíndice | ||
| <sub>...</sub> | Indica el subíndice | ||
| <u>...</u> | Subrayas el contenido. Está en desuso |
Definición de listas
Podemos usar listas para organizar la información. Estas pueden ser de tres clases:
| Tipo | Etiquetas |
Ejemplos |
|
Listas no numeradas |
<ul> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul> |
|
|
Listas numeradas u ordenadas |
<ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol> |
1. Primer elemento 2. Segundo elemento 3. Tercer elemento |
| Listas de definición |
<dl> <dt>Elemento</dt> <dd>Definición del elemento</dd> </dl> |
Elemento Definición del elemento |
Creación de hipervínculos
Utilizaremos los hiperenlaces o links mediante la etiqueta <a> y sus siguientes atributos:
| href ="url donde queremos ir" |
El enlace nos lleva a otra página o recurso. Ej: <a href=”https://www.upf.edu/”>UPF</a> |
title="descripción" |
Aporta metainformación al enlace, ya que puede incluir una descripción del sitio web a donde iremos. Ej: <a href=”https://www.upf.edu/” title="Acceso a la web de la universidad">UPF</a>. |
id="referente" |
Define enlaces internos dentro de una misma página. La clave es el uso de la almohadilla "#" seguida del nombre del ancla o identificador: Ejemplo: <a href="pagina.html#ejemplo" title="información">Parte del documento donde queremos ir</a> <a name="ejemplo" /> Lugar donde saltará el enlace anteriormente definido |
Insertar imágenes
Podremos visualizar una imagen en nuestro sitio web desde dos formas diferentes: directamente cuando se carga la página, o mediante un enlace que la inserte.
La etiqueta designada para incluir las imágenes es <img>, que va asociada al atributo src="..", con el que determinamos el camino donde tenemos la imagen a incluir, con la ruta donde está la imagen almacenada, más el nombre de la imagen.
Esta etiqueta admite también otros atributos:
| Atributos | Descripción |
| alt="descripción de la imagen | Define un texto alternativo a la imagen, que la sustituirá en caso de error |
| title="información" | Aporta metainformación a la imagen |
| width="n", | Define la anchura de la imagen |
| height="n" | Define la altura de la imagen |
Creación de tablas
Las etiquetas que estructuran las tablas son las siguientes:
| Etiqueta | Definición |
| <table> | Marca el inicio de la tabla |
| <tr> | Marca el inicio de una fila |
| <td> | Marca el inicio de una celda |
| <caption> | Sirve para poner títulos a las tablas o definir títulos de cabeceras específicos para las columnas que se definen con la etiqueta <th> |
Elaboración de formularios
La etiqueta para definir formularios es <form>, dentro de la cual se incluirán los diferentes campos de entrada del formulario (input, select, textarea) y se cerrará la definición del formulario mediante la etiqueta </form>.
| Etiquetas | Atributos |
| <form></form> | method: define el método y está dirigido al programador que codifica |
| action: define el URI de un programa encargado de tratar los datos adquiridos desde el formulario | |
| Name y/o id: define el nombre que permitirá al script del programa identificar el origen de los datos |
Otras etiquetas que veremos en la unidad, relacionadas con los formularios, serán las relativas a:
- Los campos de entrada
- Etiquetas de controles
- Etiquetas para agrupar elementos
Si quieres conocer más información de la unidad no te pierdas el debate y los ejercicio:
Bibliografía:
David Maniega. Artículo 1.3. XHTML para el diseño web [en linea]. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Documentación Digital & Máster en Buscadores. Barcelona: Área de Ciencias de la Documentación. Departamento de Comunicación. Universidad Pompeu Fabra. https://www.documentaciondigital.org
