Curso de html. Etiquetas code y pre de html.
El elemento <code>, sirve como su nombre indica para presentar palabras o párrafos del contenido de nuestra página como si fuese código en la ventana principal del navegador, con la fuente por defecto que tiene este, que normalmente suele ser una fuente monospace. Hay que tener en cuenta varias cosas antes.
Vamos a poner ejemplos y así se entenderá mejor como actua esta etiqueta. Tenemos un primer ejemplo de un párrafo etiquetado con el elemento p y en su interior hemos incluido un elemento code, etiquetando una parte de ese párrafo, de esta manera:
<p> Hola compañeros, se que estais deseando <code>terminar el curso</code> y empezar a poner en práctica lo aprendido. No os preocupeis ya queda poco. Dentro de nada<code>hareis páginas web</code> como churros.</p>
El navegador mostraría lo anterior así:
Hola compañeros, se que estais deseando
1 | terminar el curso |
y empezar a poner en práctica lo aprendido. No os preocupeis ya queda poco. Dentro de nada
1 | hareis páginas web |
como churros.
Si os fijais, las palabras etiquetadas con <code>, se presenta como si fuese código. Con un tamaño de letra más pequeño y otro tipo de fuente. Por gustos personales he sustituido la fuente monospace por defecto del navegador por otro tipo de fuente llamada Andale mono.
Ya hemos comprobado que <code> funciona muy bien intercalandose en una linea de texto, no aplica saltos de linea, pero que ocurriría si quisiesemos presentar uno o varios párrafos enteros. Veámoslo, con este ejemplo, en el que tenemos dos párrafos englobados o etiquetados con el elemento code:
<code>
<p> Ejemplo del uso de la etiqueta code</p>
<p>No obtendremos el resultado buscado</p>
</code>
El navegador lo presentaría así:
1 | Ejemplo del uso de la etiqueta <strong>code</strong> |
1 | No obtendremos el resultado buscado |
El hecho de que aparezca en negrita la palabra code, es solo en mi presentación para resaltarlo un poco, el navegador lo mostraría igual al resto de caracteres, es decir, sin negrita.
Vamos a explicar que ha sucedido en este caso:
Como podemos apreciar el elemento code no ha actuado como queriamos.En primer lugar el tipo de fuente sigue siendo la misma, no ha cambiado y las etiquetas de párrafos que queriamos presentar han desaparecido. Esto tiene su explicación lógica:
Hay una serie de caracteres especiales que se utilizan cuando queremos incluir en nuestras páginas símbolos como los de las etiquetas , acentos en las palabras, etc, para que la codificación y posterior validación de la página sea correcta y que el navegador presente estos símbolos tal cual los escribimos y no los confunda con etiquetas de código u otra parte de código. A su vez esto se hace para que nuestras páginas puedan ser vistas correctamente en cualquier parte geográfica del mundo, con independencia del juego de caracteres que usen otros paises. hay programas muy buenos que te codifican todo automáticamente, sin necesidad de estar escribiendo estos bichos raros uno a uno.
Actualizado: 04/10/2014
Html5 nos permite escribir acentos, eñes y algunos simbolos más sin tener que escribir su codificación en Asci. Esta es una muy buena noticia, ya que nos ahorra una cantidad enorme de tiempo, en la elaboración de una página web.
Por ejemplo en el caso que nos ocupa, para que cualquier etiqueta se visualice en el navegador y este no lo tome como código, debemos poner estos caracteres:
< en vez de <
y
> en vez de >
En el caso de la etiqueta de párrafo quedaría así:
<p> su etiqueta de abertura y </p>» su etiqueta de cierre.
Ahora añadiremos estos caracteres especiales al ejemplo anterior, quedando así nuestro código:
<code>
<p> Ejemplo del uso de la etiqueta code. </p>
<p>No obtendremos el resultado buscado </p>
</code>
veamos que dice el navegador ahora:
1 | <p> Ejemplo del uso de la etiqueta <strong>code.</strong> </p> |
1 | <p> No obtendremos el resultado buscado </p> |
Parece que ahora si cambió la fuente y podemos visualizar las etiquetas de párrafos también, sin embargo hay un ligero inconveniente, al interpretar las etiquetas de párrafos «p» como simple texto <p> (<p>) a mostrar en forma de código, también eliminamos el formato que queriamos dar a esta presentación, entonces el navegador lo que hace es mostrarlo todo en la misma linea hasta llenar la pantalla.
Y ¿Como podemos solucionar esto?, muy fácil, solo tenemos que anteponer la etiqueta <pre> antes y despues de la etiqueta <code>, de esta manera:
<pre>
<code>
<p> Ejemplo del uso de la etiqueta code. </p>
<p>No obtendremos el resultado buscado </p>
</code>
</pre>
Y el navegador mostraria:
1 2 | <p> Ejemplo del uso de la etiqueta <strong>code. </strong></p> <p> No obtendremos el resultado buscado </p> |
La etiqueta <pre> puede utilizarse en otros ámbitos, no necesariamente esta supeditada a trabajar con la etiqueta <code>.
Ha sido ota sección intensa, las siguientes secciones son bastante mas llevaderas que esta, pero la etiqueta code es una etiqueta muy utilizada en html, por eso merecía la pena explicarla bién, aunque sin profundizar demasiado.