Curso Básico de XHTML. III

ESTRUCTURACIÓN DEL TEXTO

XHTML no reconoce más de un espacio en blanco separando cualquier elemento o texto, es decir, los saltos de línea, tabulaciones y demás separadores son convertidos a un único espacio en blanco. Dicho de otra manera, el navegador los ignora.

Otro punto importante es que no debemos (aunque podemos) escribir directamente caracteres especiales tales como comillas, eñes, acentos o símbolos. Para evitar problemas se deben introducir las secuencias de escape propias de XHTML.

Veamos a continuación algunas de las más comunes.

Sustituir < por &lt;
 Sustituir > por &gt;
 Sustituir & por &amp;
 Sustituir " por &quot;
 Sustituir á por &aacute;
 Sustituir é por &eacute;
 Sustituir í por &iacute;
 Sustituir ó por &oacute;
 Sustituir ú por &uacute;
 Sustituir ñ por &ntilde;
 Sustituir Á por &Aacute;
 Sustituir É por &Eacute;
 Sustituir Ú por &Uacute;
 Sustituir Í por &Iacute;
 Sustituir Ó por &Oacute;
 Sustituir Ñ por &Ntilde;

Veamos un ejemplo:

<p>Esto está mal escrito</p>

<p>Esto est&aacute; bien escrito</p>

Párrafos y saltos de línea

Como para XHTML todo el texto es continuo, necesitamos algún mecanismo para indicar el principio y final de un párrafo. La etiqueta <p></p> es la encargada de separar párrafos de texto.

Otra etiqueta muy asociada a la anterior es <br />. Esta etiqueta sólo tiene marca inicial y se usa para cambiar de línea.

Veamos con un ejemplo la diferencia entre ambas:

<p>Al olmo viejo, hendido por el rayo <br />
y en su mitad podrido, <br />
con las lluvias de abril y el sol de mayo <br />
algunas hojas verdes le han salido.<br />
Antonio Machado</p>

Cabeceras y separadores

Ahora que sabemos cómo introducir texto y cómo establecer los correspondientes párrafos, vamos a ver cómo poner títulos en el documento.

Las cabeceras se emplean para dividir los documentos en secciones o más concretamente, para marcar los títulos de estas secciones. La etiqueta que define la cabecera es <hn> y </hn>, donde n varía de 1 a 6. El valor de 1 se correspondería con una letra muy grande y el de 6 con una muy pequeña.

Esto significa que h1 será la etiqueta del título de mayor importancia, h2 representaría un subtítulo con letra más pequeña y así sucesivamente hasta la etiqueta h6.

Los elementos de encabezado deben guardar un orden lógico y no debemos saltar ninguno de los niveles.

La utilización de esta etiqueta genera automáticamente un salto de línea similar al conseguido con la utilización de la etiqueta <p>.

Es importante mantener una estructuración adecuada del documento, ya que más adelante, mediante la utilización de las hojas de estilo, podemos asignar estilos concretos a títulos determinados.

Si agrupamos la información mediante el uso de títulos, diferentes secciones de una página podrían disponer de subtítulos o incluso subcategorías dentro de una misma sección.

Así pues, como norma general, usaremos los párrafos para estructurar el contenido, los saltos de línea para forzar saltos dentro de un párrafo y los títulos para agrupar y ordenar la información.

Visualmente podemos obtener el mismo resultado en un texto mediante el empleo de párrafos definidos con <p> o con saltos de línea usando la etiqueta <br />, no obstante, recuerde que un documento XHTML utiliza un lenguaje semántico, es decir que lo importante para que esté bien estructurado es el significado de las etiquetas que utilizamos y no el efecto estético que generan.

Veamos un ejemplo de su utilización:

<h1>CSS. Hojas de estilo para webmasters</h1>
<h2>Capítulo 1</h2>
<p>Las hojas de estilo, permiten controlar totalmente el...</p>

Para poder separar partes del documento, la etiqueta <hr /> dibuja una barra horizontal que divide la pantalla. El atributo size permite especificar el grosor de la barra, mientras que width determina la longitud o el porcentaje relativo con respecto al ancho de la página. La alineación de la barra se ajusta con el atributo align con los valores left, right o center.

<hr align="center" size="10" width="50" />

Todos los atributos de la etiqueta <hr /> han sido desaprobados en DTD Strict, para poder utilizarlos el documento deberá ser Transitional. Recuerde que sí está permitido en DTD strict usar la etiqueta sin atributos tal y como puede verse en el listado 1-2.

Veamos a continuación un código de ejemplo que utiliza de manera variada las etiquetas descritas en este apartado:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo Cabeceras y Separadores</title>
</head>
<body>
<!-- Contenido del documento -->
<h1>Cabecera de primer nivel</h1>
<h2>Cabecera de segundo nivel</h2>
<h3>Cabecera de tercer nivel</h3>
<hr />
<h4>Cabecera de cuarto nivel</h4>
<h5>Cabecera de quinto nivel</h5>
<h6>Cabecera de sexto nivel</h6>
</body>
</html>

Énfasis

Para facilitar la estructura visual de un documento, destacamos algunas partes del mismo con respecto al resto. Como símil podemos pensar en la opción negrita de nuestro procesador de textos, para destacar una palabra de nuestro documento, pero con una diferencia: recordemos que XHTML es un lenguaje semántico, es decir, indicamos al navegador qué parte del documento enfatizamos o destacamos, pudiendo después, mediante hojas de estilo, definir el aspecto de ese énfasis.

Así pues, para dar énfasis a un texto disponemos de la etiqueta <em></em>, que suele representarse en cursiva en los navegadores y para aplicar más énfasis <strong> </strong> representado como negrita.

Veamos un ejemplo:

<p>Soy un texto normal que <em>ahora quiero destacar, </em><br />
pero si me enfado, <strong>resalto much&iacute;simo m&aacute;s</strong> </p>
Soy un texto normal que ahora quiero destacar, pero si me enfado, resalto muchísimo más

 

También podemos utilizar las etiqueta <cite></cite> para poner una cita en un fragmento de texto. La representación será en cursiva de igual forma que la etiqueta <em>.

 

Preformatos y espacios en blanco

Como recordará el lector, al principio del tema se decía que XHTML ignora los espacios en blanco consecutivos, tabuladores, etc. Por lo tanto, para poder mostrar los espacios y tabulaciones del código fuente de un programa, deberemos utilizar la etiqueta <pre></pre>.

Para incluir espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el texto &nbsp; (es importante incluir el símbolo & al principio y el símbolo ; al final). Cada &nbsp; equivale únicamente a un espacio en blanco, por lo que se deben escribir tantas secuencias como espacios en blanco se deseen dejar.

<pre>
Private Sub Text1_KeyPress(KeyAscii As Integer)
If KeyAscii = 13 Then
KeyAscii = 0
SendKeys "{tab}"
ElseIf KeyAscii <> 8 Then
If Not IsNumeric(Chr(KeyAscii)) Then
Beep
KeyAscii = 0
End If
End If
End Sub
</pre>

Citas

XHTML dispone tres etiquetas para poder definir citas: <blockquote>, <q> y <cite>.

La etiqueta blockquote se utiliza para mostrar las citas de párrafos largos. Generalmente los navegadores lo presentan como un sangrado. Las etiquetas que definen la cita son <blockquote> y </blockquote>.

Veamos un ejemplo:

<blockquote>
<p>
Ej&eacute;rcito de hormigas en hilera <br />
va trepando por &eacute;l, y en sus entra&ntilde;as <br />
urden sus telas grises las ara&ntilde;as. </p>
</blockquote>

Para escribir citas cortas en una línea de un párrafo, utilizaremos la etiqueta <q></q>. El texto introducido dentro de las etiquetas se mostrará entrecomillado en la mayoría de los navegadores.

<p>Yo soy un texto normal, <q>dijo Carlos</q></p>

Para definir una cita refiriéndose al autor de la misma, utilizaremos la etiqueta <cite></cite>.

<p>El libro de XHTML, JavaScript y CSS. <cite>Editorial Ra-Ma</cite></p>

Otros estilos de texto

Se muestran a continuación otras etiquetas para definir estilos de texto que cumplen con la DTD Strict:

  • <b></b> se utiliza para mostrar un bloque de texto en negrita.
  • <strong></strong> marca contenido al que se le quiere dar más fuerza o importancia que el resto. Normalmente se representa por los navegadores en negrita.
  • <i> </i> para poner texto en cursiva.
  • <tt></tt> el texto tendrá un tamaño menor y los caracteres serán similares a los de una máquina de escribir (teletipo).
  • <big></big> texto grande, el mayor tamaño de fuente.
  • <small></small>texto pequeño, el menor tamaño de fuente.
  • <sup></sup> superíndice.
  • <sub></sub> subíndice.
  • <address></address> emplearemos esta etiqueta para mostrar un bloque de texto en cursiva. Se utiliza generalmente para marcar una dirección o firma.
  • <code></code> se utiliza para representar una etiqueta xhtml o código de programa.

Acrónimos y abreviaturas

Para definir en un documento el significado de un acrónimo o de una abreviatura, utilizaremos las etiquetas <acronym> </acronym> y <abbr></abbr> respectivamente. Al pasar el ratón por encima de ellas, aparecerá el significado del mismo.

El valor del acrónimo o de la abreviatura hay que indicarlo mediante el atributo title. Veamos un ejemplo:

<p>El lenguaje <acronym title="eXtensible Hyper Text Markup Language">XHTML
</acronym> es uno de los temas de este libro.</p>

Veamos a continuación un ejemplo de aplicación de los estilos estudiados con anterioridad:

<!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»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=iso-8859-1″ />
<title>Ejemplo de tratamiento del texto</title>
</head><body>
<h3>Cita:</h3>
<p>Cita <em>blockquote</em> de la <a href=»http://es.wikipedia.org/wiki/Or%C3%B3s_Bajo» title=»Orós Bajo»> Wikipedia</a>:</p>
<blockquote>
<p>
<strong>Or&oacute;s Bajo (en aragon&eacute;s Or&oacute;s Baxo)</strong> es una poblaci&oacute;n de la orilla izquierda del R&iacute;o G&aacute;llego
perteneciente al municipio de <i>Biescas</i>, comarca del <em>Alto G&aacute;llego</em>, Espa&ntilde;a. Se encuentra a 62 km de Huesca y a 14 km de <b>Sabi&ntilde;&aacute;nigo</b>.
</p>
</blockquote>
<h3>Abreviatura:</h3>
<p>Extracto de texto de Wikipedia <cite>es.wikipedia.org</cite></p>
<p><abbr title=»Juan Carlos Orós»>JCO</abbr></p>
<h3>Acronimo:</h3>
<p>Esto es el final de un ejemplo <acronym title=»Sobre El Tratamiento Del Texto»>SETDT</acronym></p>
</body></html>

Resultado:

Cita:

Cita blockquote de la Wikipedia:

Orós Bajo (en aragonés Orós Baxo) es una población de la orilla izquierda del Río Gállego
perteneciente al municipio de Biescas, comarca del Alto Gállego, España. Se encuentra a 62 km de Huesca y a 14 km de Sabiñánigo.

Abreviatura:

Extracto de texto de Wikipedia es.wikipedia.org

JCO

Acronimo:

Esto es el final de un ejemplo SETDT

 

Extracto de mi libro «Guía XHTML, JavaScript y CSS. Ed. Ra-Ma. © 2011

XHTML

One thought on “Curso Básico de XHTML. III”

  1. Primero felicitarlo y después agradecerle todo lo que he estado aprendiendo gracias a su maravilloso libro Diseño de páginas Web con XHTML, Javascript y CSS 3a edición. Tengo algunas dudas que quisiera compartir con ud. y estoy seguro que nos será de mucha ayuda ya que soy músico y estoy preparando cursos virtuales de música. Según veo ud también es músico, por favor escríbame para ponernos en contacto

    Cordial saludo

    FABERMANA
    Profesor asociado
    Universidad Pedagógica Nacional
    Bogotá Colombia

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada.