CIBERPUNK

Este CD ha sido editado gracias a Piensa Solutions la empresa a tu medida para Registrar tu dominio o Alojar tu Web

XHTML Básico en una hora

Introducción y objetivos

El XHTML es una redefinición de HTML (el clásico lenguaje de edición de documentos para la web) sobre XML, el lenguaje en el que se definen todos los lenguajes de etiquetas

Esto tiene varias ventajas sobre versiones anteriores de HTML:

Toda la información de nuestras páginas XHTML será inmediatamente legible y expandible por cualquier sistema que utilice el estándar XML (desde Microsoft a Oracle, pasando por los programas más comunes)
En un nivel más avanzado que el de este microcurso, podrás crear tus propias etiquetas y estructuras y complementar con ellas las definidas en XHTML.

¿Por qué crear nuevas etiquetas? ¿No es suficiente con estas?. En general si, desde luego al nivel normal de alguien que quiera publicar en la web algo como ciberpunk basta y sobra... Sin embargo, la web del futuro se está organizando ya hoy y lo está haciendo sintácticamente. Eso quiere decir básicamente dos cosas:

A partir de ahora no colocaremos las etiquetas pensando en el aspecto gráfico que generen sino en la estructura y significado del texto
Todo lo referente a aspecto gráfico lo trataremos en función de la estructura y de forma separada al código de la página en una CSS

Prólogo de documento y apertura del HTML

Empecemos: estamos frente a una hoja en blanco de nuestro bloc de notas. ¿Qué hacer?. Aquí no puede existir el síndrome de la página en blanco :).Escribiremos:

<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

¿Qué hemos hecho? Hemos declarado que se trata de un documento XML (primera línea de código), que está escrito en XHTML estricto (segunda línea). Hasta aquí hemos cubierto el prólogo.

Por último hemos abierto la raíz HTML, avisando eso sí, que el lenguaje natural en el que están redactados los contenidos es el español (es).

Zona HEAD

Ahora ya nos meteremos de lleno en el código de la página. Empezaremos por darle la información invisible al navegador.

<head>
Abrimos la etiqueta head

<title>Título de página</title>
Le damos un título a la página (que aparecerá en la barrita superior del navegador y si incluímos la página luego en favoritos, será el nombre que le de.

<link rel="stylesheet" href="http://www.ciberpunk.com/estilos.css" type="text/css" />
Ligamos la página a una hoja de estilos (en este caso a una de las que usa ciberpunk)

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Decimos al navegador que utilice el juego de caracteres necesario para que pueda verse bien cualquier página en español (con sus acentos, sus eñes y eso...)

<meta name="HandheldFriendly" content="true" /> <meta name="PalmComputingPlatform" content="true" />
Decimos a cualquier robot (ya sea de un buscador o de un analizador sintáctico) o a los navegadores de ODBs que nuestra página está optimizada para ellos. Esto lo podemos hacer con total tranquilidad ya que las etiquetas que vamos a estudiar de XHTML estricto son comunes a XHTML Básico, la versión que el W3C ha propuesto para dispositivos móviles.

<link rel="SHORTCUT ICON" href="http://www.ciberpunk.com/favicon.ico" />
Mostramos al navegador la ruta al icono de favoritos que sugerir a los navegadores de PC que incorporan este tipo de elementos gráficos junto a la URL

</head>
Cerramos el área de Head

El cuerpo de la página

Ahora nos meteremos con el contenido de la página. El área del documento que lo contiene se llama body y lo abrimos con la etiqueta:
<body>

Ordenando la página semánticamente

A la hora de abordar el contenido de la página hemos de pensar semánticamente, es decir, etiquetaremos el texto en función de su significado dentro de la página. Lo primero es tener claro cómo se estructura lógicamente para dividirlo en bloques. Estos bloques a su vez se ordenarán jerárquicamente, de un modo similar al índice de un libro. Cada bloque a su vez se ordenará en párrafos.

A cada bloque le daremos un título, que etiquetaremos como cabecera. XHTML permite hasta 6 niveles de cabeceras. En esta página, por ejemplo, el título tiene nivel 1, la frase El cuerpo de la página tiene nivel dos y la frase Ordenando la página sintácticamente tiene nivel tres.

Para señalarlo, estas frases las marcamos en el código con las etiquetas:
<h1>Aquí va el texto de la cabecera</h1>
h1 corresponde al nivel uno (más importante), y podemos seguir hasta seis niveles.

Para separar y marcar los párrafos utilizaremos en cambio:
<p>Texto del párrafo</p>
Y si el párrafo entero corresponde a una laaaaaaaarga cita:
<blockquote><p>Párrafo de cita</p></blockquote>

Bloques lógicos que implican varios párrafos

A veces (algunas veces, no habitualmente), nos encontraremos con unidades lógicas dentro de una página que serán superiores al párrafo, que podrán implicar, a lo mejor a más de una cabecera. ¿Cómo lo hacemos?. Pues con la etiqueta <div> para abrir y con </div> para cerrar el bloque de bloques. Normalmente no tendremos por qué usar esta etiqueta (en todo ciberpunk.com por ejemplo no se usa). Sólo tiene sentido cuando en una misma página tratemos informaciones completamente distintas... y generalmente solucionaremos eso dividiendo la información en varias páginas. Puede sin embargo (caso típico de un FAQ que ocurra lo contrario y en una sóla página tengamos la información que normalmente correspondería a varias. En ese caso el uso de <div> estará plenamente justificado.

Marcando elementos dentro de los párrafos

Para marcar el texto de cada párrafo (y entre otras cosas, convertirlo en hipertexto) existen una serie de etiquetas que pasamos a definir:

<br />: Salto de línea dentro del mismo párrafo
<em></em>: Enfatiza el texto que queda entre la primera y la segunda etiqueta
<cite></cite>: Etiqueta una cita
<acronym title="Ordenador de Bolsillo">ODB</acronym>: En el ejemplo etiquetaría el término ODB de forma que cuando alguien pusiera encima el ratón aparecería la explicación del acrónimo que figura entre comillas en el atributo title
<abbr title="Presidente">Pte.</abbr>: Con la misma sintaxis que el anterior, etiquetaría la abreviatura Pte. de forma que cuando alguien pusiera encima el ratón aparecería la explicación de la abreviatura que figura entre comillas en el atributo title, en este caso Presidente
<dfn>Casa de campo</dfn>: Marca el texto (que se supone que está en un párrafo más amplio) como objeto de una definición (no debemos confundirlo con las listas de definiciones y glosarios)
<code></code>: Señala que el texto etiquetado es en realidad código de programación o edición de cualquier tipo. Esta etiqueta no nos salva de convertir los símbolos como > a sus equivalentes en código (en este ejemplo >) para que el navegador sepa que tiene que representarlos en pantalla y no interpretarlos como parte del código.[Si usamos un programa de edición como NoteTab encontraremos una opción que realiza la conversión automáticamente, por lo que resulta más fácil de lo que parece]
<adrress>Glorieta de Bilbao 7- Madrid</adrress>: Señala que el texto etiquetado es una dirección
<span lang="EN" xml:lang="EN">To be or not to be</span>: Marca el texto To be or not to be señalándo que está en una lengua distinta a la del resto del contenido, en este caso inglés (EN). La lista completa de códigos de idiomas corresponde a una norma internacional que puede encontrarse en http://www.oasis-open.org/cover/iso639a.html
<a href="http://www.ciberpunk.com">Nuestra página</a>: Marca el texto Nuestra página con un enlace a http://www.ciberpunk.com, de modo que cuando alguien pulse sobre el texto, el navegador irá a la página enlazada.
<a href="#x">Ir al epígrafe dos</a>: Hiperenlaza el texto Ir al epígrafe dos con una parte de la misma página (en la que está el hiperenlace) a la que previamente hemos marcado como "x"
<a name="x" id="x">Epígrafe dos</a>: Marca el texto Epígrafe dos con el ancla o nombre "x", permitiendo que luego se le pueda enlazar desde el mismo documento
<img src="http://www.ciberpunk.com/graficos/ciberpunk.png" alt="logo de ciberpunk" />: Esta etiqueta que junto a <br /> es la única que no requiere otra etiqueta de cierre, coloca una imagen en el texto. En este caso la imagen logo.png que está en un subdirectorio de Ciberpunk.com. Si no encontrara el gráfico, o el navegador no pudiera leerlo, colocaría como alternativa el texto: logo de ciberpunk.

Listas y definiciones

Hemos dejado aparte un tipo de elemento estructural que es distinto del párrafo y la cabecera, las listas (de números o guiones) y los listados de definiciones (como la anterior)

<ul></ul>: Abre y cierra una lista de puntos
<ol></ol>: Abre y cierra una lista ordenada
<li></li>: Abre y cierra un elemento de lista (ordenada o no)
<dl></dl>: Lista de definiciones
<dt></dt>: Término a definir
<dd></dd>: Definición del término anterior en la lista

Cierre del documento

No debemos olvidarnos, cuando cerremos el documento de colocar las etiquetas de cierre del cuerpo y del código: </body> </html>

Validación y depuración del código

El Validador

Y por último, con nuestra paginita ya volcada en el servidor nos vamos a el programa validador de código del W3C a comprobar si está correcta y bien formada.

Rara vez una página sale a la primera (o a la segunda o la tercera), y localizar los errores es el primer paso para corregirlos. El validador será a partir de ahora nuestro tutor personal para perfeccionar nuestro estilo de edición.

¿Algún problema?

¿Algún problema con el validador?. ¡¡Pero si en el navegador se ve bien!!. No tiene nada que ver. El validador del W3C comprueba las exigencias de las especificaciones de XHTML, puede que el navegador a pesar de ello interprete el código como queremos, pero no por ello estará correctamente escrito. Para que lo esté tiene que cumplir las especificaciones de XML es decir, ser código válido y bien formado. ¿Cúales son éstas?. Veamos:

Tiene que haber un prólogo y un elemento raíz. Es decir, hemos de especificar versión etc y una vez hecho esto todo el XHTML tiene que estar incluído entre las etiquetas <html> y </html>
Todos las etiquetas tienen que estar correctamente anidadas, es decir, si una etiqueta se abre antes que otra (la contiene), tiene que cerrarse después de que se cierre aquella a la que contiene. Por ejemplo ésto es correcto: <blockquote> <p>ejemplo</p> </blockquote> mientras que <blockquote> <p>ejemplo</blockquote> </p> es incorrecto
Todos las etiquetas han de tener la forma correcta. Es decir:
- Todas las etiquetas se abren con <[etiqueta]> y terminar con </[etiqueta]>
- Todas se escriben con minúscula
- Las llamadas vacías, es decir que la misma etiqueta se abre y cierra, como la de salto de página, tendrán el formato <[etiqueta] />, es decir, dejarán un espacio en blanco antes de la barrita y el signo de cierre de etiqueta.
- Si las etiquetas tienen atributos o modificadores, éstos van separados por espacios, seguidos por un signo igual y los valores entrecomillados (sin espacios en blanco entre el igual y las comillas). Por ejemplo <a href="http://www.ciberpunk.com">.

Y ahora ¿cómo lo pongo bonito?

... Pues trabajando las hojas de estilo, lo que será objeto de la parte final de éste microcurso...

Ciberpunk.org: desde 2002 haciendo más libre la red

CD realizado con software libre en XHTML 1.0 Estricto con CSS.
Cumple los estándares de accesibilidad AA.