Formato de textos

Texto sin formato. Caracteres especiales.

      Cuando queremos escribir un texto sin ningún formato basta con escribirlo directamente. En este caso el texto aparecerá tal cual, pero tendremos problemas para escribir ciertos caracteres especiales, como las vocales acentuadas o con diéresis, la letra ñ, los signos <, >, " y & (que tienen significado especial dentro del código) y, también, si queremos poner más de un espacio en blanco seguido (aunque en el código fuente se pongan varios espacios seguidos en blanco, al visualizar el documento únicamente saldrá un espacio).

      Los códigos de las vocales acentuadas se forman comenzando con el signo especial & seguido de la vocal, que se puede poner en mayúscula o minúscula, seguido de la palabra acute (aguda) y terminando con el signo ; de la siguiente manera:

&aacute; para la á      &Aacute; para la Á
&eacute; para la é      &Eacute; para la É
&iacute; para la í      &Iacute; para la Í
&oacute; para la ó      &Oacute; para la Ó
&uacute; para la ú      &Uacute; para la Ú

      Otros códigos útiles son:

&ntilde; para la ñ      &Ntilde; para la Ñ
&uuml; para la ü      &Uuml; para la Ü
&#191; para la ¿      &#161; para la ¡
&lt; para < menor que (less than)
&gt; para > mayor que (greater than)
&amp; para & (ampersand)
&quot; para " dobles comillas (duoble quotation)
&nbsp; para dejar un espacio en blanco

      Aunque podamos escribir el código poniendo directamente los acentos es probable que en otros navegadores no aparezcan. El juego completo de caracteres de HTML se puede buscar en la red.

      Si necesitamos incluir varios espacios seguidos no podremos hacerlo con la barra espaciadora. En vez de ello tenemos que usar el código especial &nbsp; tantas veces como espacios necesitemos.


Cabeceras y apariencia.

      Se puede dar formato al texto de manera sencilla utiliazando cabeceras, que se escriben entre las etiquetas <h1> y </h1> para el tamaño mayor, <h2> y </h2> para un tamaño un poco más pequeño, y así hasta <h6> y </h6> para el tamaño menor. Estas cabeceras se pueden centrar utilizando <center></center> de la siguiente manera:

<h4><center>Texto cabecera 4 que queremos centrado </center></h4>

      Se verá así:

Texto cabecera 4 que queremos centrado

      Este efecto se puede realizar, también, con un modificador de la etiqueta de cabecera. Los modificadores de las etiquetas se escriben después del nombre de la etiqueta, dentro de los paréntesis angulosos de esta manera:

<h4 align="center">Texto cabecera 4 que hemos centrado modificando la etiqueta</h4>

      Se verá así:

Texto cabecera 4 que hemos centrado modificando la etiqueta

      El modificador align puede tomar diferentes valores, como son "center", "left", "right" o "justify", según queramos que el texto quede centrado, a la izquierda, a la derecha o ajustado entre ambos lados, respectivamente.

      También podemos resaltar parte del texto marcándolo en negrita (bold) utilizando la etiqueta <b></b>, o poniéndolo en cursiva (italic) con la etiqueta <i></i>.

      Otras etiquetas que podemos utilizar para dar formato a un texto son:

Etiqueta Efecto
<pre></pre> Respeta el texto tal y como se escribió: con indexaciones, espacios, etc
<tt></tt> El texto tiene apariencia de los caracteres de una máquina de escribir.
<blockquote></blockquote> Se utiliza para destacar una cita textual.
<sup></sup> Escribe un superíndice
<sub></sub> Escribe un subíndice

Separaciones y párrafos.

      Para separar unas partes del texto de otras se suele utilizar la línea horizontal que se indica con la etiqueta <hr>, que no precisa etiqueta de cierre, aunque se puede poner para mayor claridad del código: <hr></hr>

      La línea de separación horizontal se puede modificar en anchura y grosor utilizando los siguientes modificadores:

Modificador Efecto
<hr width="x%"> Anchura de la línea en % respecto a la anchura de la ventana
<hr width=x> Anchura de la línera en pixeles
<hr size=x> Grosor de la línea en pixeles
<hr align="center"> Línea centrada. También puede ponerse aling="left" o "right"
<hr noshade> Línea sin efecto de sombreado

      Para separar un párrafo de otro dejando una línea en blanco se utiliza la etiqueta <p></p>, escribiendo entre ambas etiquetas el párrafo en cuestión.

      Para separar texto sin incluir líneas en blanco entre medias se utiliza la etiqueta <br> (break) en el mismo punto donde se desea romper el texto. La etiqueta <br> tampoco tiene etiqueta de cierre.

      Si necesitamos incluir varias líneas en blanco en un documento deberemos escribir la etiqueta <br> tantas veces como líneas necesitemos.


Ejemplo práctico.

Copia el siguiente código y guardaló con el nombre prueba2formatos.htm:

<html>
<head> <title>Prueba 2 - Formatos HTML</title> </head>

<body> <!-- Recuerda que las cabeceras se indican con la etiqueta h y en numero su importancia --> <h1><center>Formatos en un documento HTML</center></h1> <!-- Aqui te indicamos otra forma de centrar un texto --> <h2 align="center"><b>Segunda prueba del curso HTML</b></h2> <!-- Insertamos una linea horizontal de separacion --> <hr> <!-- esta etiqueta no necesita cierre, aunque si quieres lo puedes poner --> <p>Por fin podemos escribir palabras con acento ortogr&aacute;fico, como: p&aacute;gina, ac&eacute;mila, alegor&iacute;a, cami&oacute;n o esdr&uacute;jula...</p> <p>Incluso podemos acentuar las may&uacute;sculas como en &Aacute;lvaro o &Uacute;beda...</p> <p>Tambi&eacute;n podremos escribir correctamente cig&uuml;e&ntilde;a (con nuestra querid&iacute;sima letra &ntilde;), incluso en may&uacute;sculas: CIG&Uuml;E&Ntilde;A.</p> <p>O mostrar duda... &iquest;C&oacute;mo? o indignaci&oacute;n... &iexcl;Ni hablar! con nuestras interrogaciones y exclamaciones de apertura.</p> <p>Podremos dejar todos los espacios en blanco que queramos&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e incluso &quot;entrecomillar&quot; o comparar: 3&lt;5 &oacute; x&gt;2</p> <hr width="500" size="10" color="#CC6600"> <!-- diferentes modificadores de hr --> Adem&aacute;s podremos escribir expresiones matem&aacute;ticas como (a+b)<sup>3</sup> = a<sup>3</sup> + 3a<sup>2</sup>b + 3ab<sup>2</sup> + b<sup>3</sup> <br> <!-- este es el retorno de carro --> O f&oacute;rmulas qu&iacute;micas como H<sub>2</sub>SO<sub>4</sub> </body> </html>

El resultado que deberías obtener con este código es este.