Unidad 2. Avanzado: Texto y caracteres especiales


Cuando escribimos texto, hemos de tener en cuenta ciertas consideraciones.

Por ejemplo, quién va a ver la página. No todos los idiomas tienen los mismos caracteres. Por ejemplo, no todos los idiomas tienen las letras acentuadas, y la letra ñ es exclusiva del español. Esto puede producir que estos caracteres no se vean correctamente, dependiendo del navegador y la región.

Una forma de solucionar esto, es indicar en la página web que codificación utilizamos. Por ejemplo, podemos hacerlo añadiendo la siguiente etiqueta a nuestra página:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

La etiqueta informa de que es una página de texto/HTML, y que utiliza el juego de carácteres iso-8859-i. Como esta etiqueta da información sobre la página, la incluiremos en el <head>.

Pero existen otros caracteres especiales que no podemos mostrar en la página. Por ejemplo, si queremos escribir 1<2, el navegador interpretará < como una apertura de etiqueta. Por ello, todos los caracteres se pueden representar como un código con el formato &codigo;. Por ejemplo, si conocemos el código ASCII de un carácter, podemos escribirlo en el código fuente como &#num;. Así, la letra ñ, cuyo código ASCII es 241, se podría escribir &#241;. Los caracteres más utilizados, tienen también un código html propio, como vemos en la siguiente tabla:

Carácter Representación
< &lt;
> &gt;
á &aacute;
Á &Aacute;
é &eacute;
É &Eacute;
í &iacute;
Í &Iacute;
ó &oacute;
Ó &Oacute;
ú &uacute;
Ú &Uacute;
ñ &ntilde;
Ñ &Ntilde;
Espacio &nbsp;
Carácter Representación
&euro;
ç &ccedil;
Ç &Ccedil;
ü &uuml;
Ü &Uuml;
& &amp;
¿ &iquest;
¡ &iexcl;
" &quot;
· &middot;
º &ordm;
ª &ordf;
¬ &not;
© &copy;
® &reg;

Utilizar estos códigos nos asegura que no haya ningún problema al visualizar nuestra página.

Así, si escribimos en el código fuente &quot;&iquest;Ser&aacute; Mar&iacute;a?&quot; podremos leer "¿Será María?".

Otra de las peculiaridades del texto, como ya hemos visto, es que varios espacios en blanco se mostrarán como uno solo. Por ejemplo, si en el código fuente escribimos hola     mundo se verá hola mundo. Si queremos poner varios espacios seguidos, utilizaremos el código html para el espacio, &nbsp;.

El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios saltos de línea pulsando Intro, estos no se verán. Para crear un salto de línea dentro de un párrafo, utilizamos la etiqueta <br />.

Si queremos que los saltos de línea y espacios se muestren igual que en el código fuente, podemos utilizar la etiqueta <pre></pre> en vez del párrafo. Aunque de esta forma no podremos utilizar otro tipo de formatos.

Otra cosa que se muestra en el código pero no en el navegador son los comentarios. Podemos escribir un comentario con el siguiente formato <!-- contenido del comentario -->. En el comentario podemos poner texto y etiquetas, que el navegador ignorará.

Puedes ver todo esto en el siguiente ejemplo:

<html>
<head>
 <title>Texto</title>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
 <p>Caracteres especiales:</p>
 <p>El &ntilde;and&uacute; y la cig&uuml;e&ntilde;a.<br />
	   3 &gt; 2, y 2 &lt; 4<p>
 <p>Aqu&iacute;    hay    5    espacios [     ]</p>
 <p>Aqu&iacute; s&iacute; que hay 5 espacios [&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]</p>
 <p>Este p&aacute;rrafo
  tiene saltos
   en el c&oacute;digo fuente</p>
<p>Aqu&iacute;<br />y aqu&iacute;<br />hay saltos</p>
<pre>En la etiqueta  pre 
si aparecen
saltos y es   pa    ci   os</pre>
<p>En el &uacute;ltimo p&aacute;rrafo<!--el comentario solo  
             se ve en el c&oacute;digo--> hay un comentario.</p>
</body>
</html>

Pruébalo, cambiando lo que quieras:

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .

Inicio





Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.