XHTML

 

Formateo semántico básico

Párrafos

Los párrafos sirven para estructurar el contenido. En la web funcionan igual que en la vida real: contienen una o más frases con relación entre sí. Para crear un párrafo, metemos texto entre las etiquetas <p> y </p>. Un ejemplo:

<p>

Etiam et urna. Nulla dictum interdum risus. Cras facilisis euismod  justo. 

Donec vitae velit. Pellentesque tempus. Integer et ante in pede  

egestas porttitor. Suspendisse potenti. Pellentesque habitant morbi.

</p>

Saltos de línea

A veces, dentro de un mismo párrafo necesitamos cambiar de línea. Esto lo conseguimos con la etiqueta

<br />, así:

<p>

Dark Chest of Wonders<br />

Seen trought the eyes<br />

Of the one with pure heart<br />

Once, so long ago.

</p>

Títulos (H1, H2, ... H6)

Los títulos nos sirven para agrupar información. Imaginemos la sección de enlaces de nuestra página. El título principal podría ser Mis Links Favoritos. Luego tendríamos los enlaces clasificados en secciones (cada sección etiquetada con un subtítulo), como Blogs, Descargas y Videojuegos. Incluso en una de estas
secciones podríamos tener varias categorías (marcadas con un sub-subtítulo), como RPGs, Aventura, Acción y Lucha.

Para conseguir esto, tenemos las etiquetas <hx> y </hx>, donde x es un número del 1 al 6. <h1> corresponde al título más importante y debería haber sólo uno por página. Veamos un ejemplo:

<h1>Mis aficiones</h1>
<h2>Los videojuegos</h2>
<p>
Mis videojuegos preferidos son los clásicos plataformas para la
Master System y la Megadrive, como el Sonic, Alex Kidd, Dinamite
Headdy, etc.
</p>
<p>
También me gustan las aventuras gráficas en 2D de toda la vida,
como Goblins 3, Monkey Island, Woodruf, Simon the Sorcerer...
</p>
<h2>Música</h2>
<p>
Me gusta escuchar rock en inglés. Mis grupos favoritos son
Dover, Nightwish, Sonata Arctica, HIM, etc. También escucho
música en castellano, como Mágo de Oz y La Oreja de VanGogh </p>

Los Blockquotes

Los blockquotes sirven para señalar una cita. Los navegadores normalmente los muestran con un indentado, aunque esto se puede cambiar con CSS. Nuestras canciones quedarán mejor así:

<blockquote>
<p>
You think you have it all know:<br />
The wisdom, power, know-how.<br />
Can't even think you're wrong.<br />
This is the way the brain of male is made.
</p>
</blockquote>

Comentarios

Los comentarios son notas que ponemos en el código fuente de una página, pero que no se muestran. Son utiles para indicar qué hacen ciertas partes del código.

Para insertar un comentario, lo escribimos entre <!-- y --> . Ten en cuenta que el comentario tiene que estar
en una sola línea.

<!-- Esto es un comentario -->

Separadores horizontales

Los separadores horizontales (horizontal rules) han caído en desuso, ya que podemos conseguir bordes delimitadores mediante CSS. Pero como el saber no ocupa lugar, nos quedaremos con la etiqueta <hr />:

<h2>Los videojuegos</h2>

<p>Bla bla bla...</p>

<hr />

<h2>Música</h2>

<p>Bla bla bla</p> 

Texto preformateado

Como ya os habréis dado cuenta, al interpretarse el código XHTML se ignoran espacios en blanco consecutivos, tabuladores, saltos de línea etc. Pero muchas veces nos interesa que estas cosas se tengan en cuenta (imagina si quieres insertar código fuente, por ejemplo). Para esto tenemos la etiqueta <pre>:

<pre>
#include <stdio.h>
int main() {
printf("Hola mundo!\n");
return(0);
} </pre>

Código informático

La etiqueta <code> sirve para señalar código informatico. Por ejemplo:

<code>
#include <stdio.h><br />
int main() {<br />
printf("Hola mundo!\n");<br />
return(0);<br />
}<br /> </code>

Énfasis

Para dar énfasis a un texto disponemos de la etiqueta <em> . Si queremos dar un énfasis más fuerte, utilizaremos <strong>. Un ejemplo:

<p>
<em>Far</em> is not the word because I'm never
far <strong>enough</strong>.
</p>

Los navegadores suelen representar <em> con cursiva y <strong> con negrita.

Citas

Si queremos marcar un texto como una cita, utilizaremos <cite> . La diferencia con <blockquote> es que <cite> no crea la cita en un bloque, sino que la integra en el mismo texto. Los navegadores normalmente muestran el texto citado con cursivas.

<p>
Alguien escribío que <cite>la vida es sueño, y los sueños,sueños son</cite>.
</p>

Acrónimos y abreviaturas

Para marcar los acrónimos y abreviaturas usaremos <acronym> y <abbr> , respectivamente. El efecto es el mismo: al pasar el ratón por encima de la palabra, nos aparece un rectángulo de ayuda con su significado.

Estas etiquetas necesitan un atributo para funcionar, y es title . Como valor de ese atributo escribiremos el texto con el significado del acrónimo o de la abreviatura.

<p>
Mi ordenador tiene 512 <abbr title="Megabytes">Mb</abbr> de
memoria <acronym title="Random Access Memory">RAM</acronym>.
</p>

Acerca de las etiquetas de formateo físico

El XHTML ofrece una multidud de etiquetas de formato físico como <b>(negrita) o <i> (cursiva) Sin embargo, es conveniente no hacer uso de ellas. Recuerda que el XHTML sirve para marcar el contenido semánticamente y no físicamente. CSS se encarga de esta parte.

Ejercicios

Ejercicio 1

Utiliza las etiquetas <blockquote> <p> y <br /> para crear un documento XHTML con el siguiente contenido:

El río Guadalquivir
tiene las barbas granates.
Los dos ríos de Granada
uno llanto y otro sangre.

¡Ay, amor,
que se fue por el aire!

Para los barcos de vela,
Sevilla tiene un camino;
por el agua de Granada
sólo reman los suspiros.

Ejercicio 2

En el código XHTML los elementos en blanco (saltos de línea, espacios, tabuladores) se convierten en un único espacio en blanco. Utiliza el espacio insecable (  ) para crear un documento XHTML con el siguiente contenido:

El río Guadalquivir
   tiene las barbas granates.
      Los dos ríos de Granada
         uno llanto y otro sangre.

Ejercicio 3

Crea un documento XHTML con un título principal y 2 secciones con un subtítulo y 2 párrafos cada una.

Ejercicio 4

Utiliza la etiqueta <acronym> para crear un documento XHTML con el siguiente contenido:

ACNUR
ADC
AFDC MPFC

ACNUR: Alto Comisionado de la Naciones Unidas para los Refugiados.
ADC: Asistente de Desarrollo Comunitario.
AFDC: MPFC. Autogestión, Fortalecimiento y Desarrollo de las Comunidades. Este sitio.

Ejercicio 5

Crea un documento XHTML con un título y 2 párrafos, y resalta las palabras importantes con las etiquetas <em> y <strong>

Ejercicio 6

Utiliza las etiquetas <pre> y <code> para crear un documento XHTML con el siguiente código CSS:

p {
font-family: Helvetica, Arial, Geneva, sans-serif;
font-size: 12px;
line-height: 18px;
font-weight: normal;
margin-top: 0px;
margin-bottom: 5px;
}
p em {
font-style: italic;
color: #4D6FC0;
}
p strong {
font-weight :bold;
color: #4D6FC0;
}