INSTITUTO TECNOLÓGICO SUPERIOR

" CENTRAL TÉCNICO "

NOMBRE: ISAAC FARINANGO 

TEMA: MENU

CURSO: 4TO "D2"

LICENCIADO : ING. JULIO CALVOPIÑA HERRERA

AÑO ELECTIVO:  2014-2015

SUBRAYAR EN HTML

FORMATOS DE TEXTO EN HTML: NEGRITA, CURSIVA, TACHADO, SUBRAYADO, SUPERÍNDICE, SUBÍNDICE.

Vamos a ver una serie de etiquetas y atributos básicos para la creación de páginas webs. No entraremos a describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente indicaremos las que han sido más utilizadas en el pasado, aunque algunas se consideren deprecated (no recomendadas).

Las primeras etiquetas que veremos son las que se usaban en el pasado para dar formato al texto. Para ello tenemos una serie de etiquetas que escribimos en HTML envolviendo la palabra o el texto y que transforman ese texto en el formato que nosotros le hayamos querido dar. Algunas de estas etiquetas están no recomendadas (deprecated) por lo que no debemos emplearlas. Otras etiquetas han adquirido un nuevo significado en las últimas versiones de HTML, pero no vamos a entrar a definir este nuevo significado. Debido a su amplia difusión en el pasado conviene conocer los que fueron usos tradicionales de estas etiquetas, a medida que avances en el conocimiento de HTML podrás comprobar cómo para algunas etiquetas se consideran hoy día nuevos significados.

ETIQUETA	USO	OBSERVACIONES
<b>…</b>	Poner texto en negrita	Puede ser sustituido por CSS.
<strong>…</strong>	Poner texto en negrita	Puede ser sustituido por CSS.
<i>…</i>	Poner texto en cursiva	Puede ser sustituido por CSS.
<em>…</em>	Poner texto en cursiva	Puede ser sustituido por CSS.
<u>…</u>	Poner texto subrayado	Deprecated. Sustituir por CSS.
<small>…</small>	Poner texto más pequeño	Puede ser sustituido por CSS.
<big>…</big>	Poner texto más grande	Puede ser sustituido por CSS.
<sub>…</sub>	Poner texto subíndice	Puede ser sustituido por CSS.
<sup>…</sup>	Poner texto superíndice	Puede ser sustituido por CSS.
<strike>…</strike>	Poner texto como tachado	Deprecated. Sustituir por CSS.
<s>…</s>	Poner texto como tachado	Deprecated. Sustituir por CSS.
<del>…</del>	Poner texto como tachado	Puede ser sustituido por CSS.

Como verás, algunas de las etiquetas que vamos a explicar están obsoletas (deprecated en inglés). Estas etiquetas en principio no deben de ser usadas porque dejarán de existir en las nuevas versiones a partir de HTML 5 y los navegadores es posible que dejen de reconocerlas en un futuro. Los motivos para incluirlas en este curso son:

- Son etiquetas que han sido muy populares en el pasado y te puedes encontrar muchas páginas webs que hacen uso de ellas.

- Son etiquetas reconocidas por prácticamente todos los navegadores actuales.

- Son una buena forma de introducirnos en los lenguajes propios de desarrollos webs desde el punto de vista didáctico. Una vez se entiendan estos conceptos, es más fácil abordar aspectos más avanzados como las hojas de estilo CSS.

Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que queramos transformar en su interior. Por ejemplo:

<b>Este texto aparecerá escrito en negrita</b>.  Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en negrita y en cursiva escribiríamos esto: <b><i>Este texto aparecerá escrito en negrita y en cursiva</i></b>.

Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden, de la más interior a la más exterior.

Veamos las etiquetas que hemos citado en la tabla anterior.

NEGRITA

Existen dos etiquetas que hacen que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es en principio indiferente (aunque pueda atribuírseles un significado diferente a cada una de ellas no vamos a prestarle atención a esto ahora). La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo de código y lo que veríamos en pantalla:

Esta palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong>

Esta palabra la vamos a poner en negrita y esta otra también

Normalmente se preferirá usar técnicas CSS en lugar de esta etiqueta, pero es una etiqueta que debemos conocer.

CURSIVA

Para escribir un texto en cursiva se ha utilizado mucho en el pasado la etiqueta <i> (que por supuesto debes cerrarla con la etiqueta </i>). También se ha utilizado la etiqueta <em>. Como en el caso de la negrita, aunque podrían atribuírseles distintos significados no vamos a prestarle atención a esta cuestión ahora. Aquí presentamos un ejemplo:

Esta palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em>

Esta palabra la vamos a poner en cursiva y esta otra también

SUBRAYADO U (DEPRECATED)

Para que la palabra o el texto quedara subrayado se usó en el pasado el rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta </u>. Así se subrayaría una frase:

<u>Así subrayaríamos una frase importante</u>

Así subrayaríamos una frase importante

Está etiqueta está obsoleta (deprecated), lo que significa que ya no se recomienda su uso. Para lograr el resultado deseado se deben usar hojas de estilo CSS como veremos más adelante.

PALABRAS MÁS GRANDES O MÁS PEQUEÑAS

Puede que en una frase queramos destacar un palabra por medio de una variación de tamaño sin necesidad de utilizar los encabezados (los encabezados son etiquetas especiales que explicaremos más adelante). La variación de tamaño se podía conseguir gracias a las etiquetas <big> y <small>. Sus propios nombres en inglés nos indican cuáles eran sus funciones: <big> agrandará el texto y <small> lo disminuirá. No recomendamos su uso ya que las nuevas versiones de HTML no van a admitir esta etiqueta. La modificación del tamaño del texto se debe hacer a través de técnicas CSS.

Cada vez que se escribe una etiqueta big, se hace el texto un punto más grande. Estas etiquetas también se podían combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos. Un ejemplo sería el siguiente:

Esta palabra se va a escribir <small>pequeñita</small>, esta se va a escribir <big>más grande</big> y ésta <big><big>más grande aún</big></big>.

Esta palabra se va a escribir pequeñita, esta se va a escribir más grande y ésta más grande aún.

SUPERÍNDICES Y SUBÍNDICES

Mediante HTML también podemos escribir expresiones con símbolos matemáticos. Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta <sub> te servirá para escribir un subíndice y <sup> será la etiqueta para un superíndice. Así nos queda un ejemplo como el siguiente:

Gracias a estas etiquetas podemos escribir cualquier expresión con símbolos matemáticos como esta: H<sub>2</sub>O o números elevados a potencias 7<sup>3</sup>.

Gracias a estas etiquetas podemos escribir cualquier expresión con símbolos matemáticos como esta: H₂O o números elevados a potencias 7³.

Los subíndices y superíndices con estas etiquetas pueden ser sustituidos por técnicas de CSS, pero muchas personas prefieren usar estas etiquetas.

TEXTO TACHADO

Existen tres etiquetas que se han venido usando para conseguir que un texto quede tachado. Hablamos de las etiquetas <strike>, <s> y <del>. Todas ellas ofrecen el mismo resultado. Aquí presentamos una muestra:

Puedo proceder a tachar una palabra <strike>así</strike>, <s>así</s> o <del>así</del>

Puedo proceder a tachar una palabra así, así o así

La etiqueta strike está deprecated, lo que significa que ya no se recomienda su uso. La etiqueta s también fue deprecated, aunque a partir de HTML 5 se ha redefinido su significado. Para lograr el tachado de un texto se recomienda usar técnicas CSS (hojas de estilo) como veremos más adelante.

EJERCICIO

En el siguiente código hay elementos que en las versiones más recientes de HTML se consideran deprecated o not supported. Escribe el código en un editor de textos como el bloc de notas o Notepad++, guárdalo con un nombre como ejemplo.html y visualízalo en tu navegador.

Responde a las siguientes preguntas:

¿Qué etiquetas de las empleadas sería recomendable no utilizar y reemplazar mediante uso de técnicas CSS?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ejemplo 01 del curso HTML - aprenderaprogramar.com</title> </head> <body text="green"> <pre> Ejemplo básico: uso de etiquetas de formato y atributos básicos para la etiqueta body. <strong>negrita</strong> <em>Cursiva</em> <del>Subrayado</del> <big>Grande</big> <small>pequeño</small> Esto es un<sub>subíndice</sub> Y esto un<sup>superíndice</sup> </pre> </body> </html>

Ejemplo de resultado que se puede obtener en algunos navegadores. Ten en cuenta que al usarse atributos deprecated la respuesta de diferentes navegadores puede no ser la misma.

PARRAFOS

1. Párrafos en HTML

Ha llegado el momento de aprender a introducir un texto en una página web, pero antes es necesario comprender cómo será interpretado este texto. Cuando un navegador lee el código HTML de una página y lo interpreta para mostrar la página, todos los espaciados múltiples, tabulados o saltos de línea que se haya incluido en los textos serán interpretados como un único espacio. Esta característica suele sorprender (e incluso molestar) al principio, pero es innegable que esta forma de actuar es necesaria y concuerda con el carácter descriptivo de HTML.

La mejor manera de habituarse es probar, para ello proponemos los siguientes ejemplos de código que serán mostrados de la misma forma por el navegador aunque algunos contengan saltos de línea, otros tabulados entre las palabras, etc.

<h1>El conductor del coche le pregunto si se encontraba mal</h1> <h1> El conductor del coche le preguntó si se encontraba mal </h1> <h1> El conductor del coche le pregunto si se encontraba mal </h1>

En estos ejemplos podemos observar diversos saltos de línea y separaciones en el texto, sin embargo el navegador mostrará un solo espacio entre las palabras y producirá saltos de línea donde sea necesario en función del tamaño de la ventana. Las figuras 2.1 y 2.2 son ejemplos de cómo muestra el Explorer los códigos anteriores para diferentes tamaños de ventana.

Figura 2.1. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo usando la etiqueta <hr> para crear una línea horizontal.

Figura 2.2. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemos como se puede cambiar el grosor de una línea con el atributo 'size'

Conocida esta característica es momento de adentrarse en las distintas etiquetas que permiten tener un mayor control sobre el texto de nuestras páginas.

1.1. Saltos de línea

En ocasiones puede ser conveniente introducir un punto y aparte cuando estamos escribiendo un texto. En HTML para hacer esto puede usarse la etiqueta <br>. Cuando el navegador se encuentra con esta etiqueta provoca un salto de línea y sigue mostrando el contenido de la página. Veamos un ejemplo:

Estaba internándose en lo desconocido. <br> Durante todo el trayecto hasta Woodfield no dejó de pensar en los aspectos económicos, con el temor de estar cometiendo...

En este texto podemos observar cómo tras el primer punto era necesario un cambio de línea, por lo que hemos usado <br>.

1.2. Cómo se insertan párrafos

Un párrafo es un conjunto de frases sobre un mismo asunto. En HTML para demarcar un párrafo se usa la etiqueta p, situándose la instrucción de inicio <p> al comienzo del párrafo y la instrucción de fin </p> tras la última frase. Entre ellas pueden insertarse tantos saltos de línea como se deseen así como muchos otros elementos HTML. A continuación se muestra un ejemplo:

<p> Estaba internándose en lo desconocido. </p> <p> Durante todo el trayecto hasta Woodfield no dejó de pensar en los aspectos económicos, con el temor de estar cometiendo... </p>

Otra opción hubiera sido crear un único párrafo e insertar un salto de línea tras la primera frase:

<p> Estaba internándose en lo desconocido. <br> Durante todo el trayecto hasta Woodfield no dejó de pensar en los aspectos económicos, con el temor de estar cometiendo... </p>

En la figura 2.3 se puede observar la diferencia entre los dos ejemplos en Explorer. Puede observarse que en general los navegadores dejan un espacio vertical antes y después de cada párrafo, algo que no ocurre con los saltos de línea.

Figura 2.3. Ejemplo de un párrafo con un salto de línea y la división del mismo texto en dos párrafos.

	Uso incorrecto de la etiqueta p
	La etiqueta p es usada en muchas páginas de forma incorrecta. El error consiste en emplearla simplemente para introducir un espacio (vertical) entre líneas. La forma adecuada es introducir las instrucciones de inicio y fin para marcar el comienzo y el fin de un párrafo.

	Espacio entre líneas
	Para introducir un espacio vertical entre líneas debe usarse la etiqueta <br>. Si se ponen varias seguidas no se mostrará más espacio, pero esto puede solucionarse insertando entre las etiquetas la cadena " ". Por ejemplo para insertar tres líneas en blanco puede usarse: <br> &nbsp; <br> &nbsp; <br> &nbsp;

El atributo 'align' en la etiqueta <p> permite especificar la alineación del párrafo. Puede tener tres valores: "center", "left" y "right", para obtener un párrafo centrado, alineado a la izquierda o alineado a la derecha respectivamente. En la figura 2.4 se muestra el párrafo del código anterior con los tres tipos de alineación.

Figura 2.4. Con el atributo 'align' se pueden crear párrafos alineados a la derecha, centrados o alineados a la izquierda.

1.3. Líneas horizontales para separar párrafos

Si lo que se necesita es separar dos secciones diferentes de una página, ya sea texto o no, puede emplearse una nueva etiqueta: <hr>. Su nombre proviene del inglés Horizontal Rule (línea horizontal). Esta etiqueta está formada por una única instrucción y provoca que el navegador inserte una línea horizontal como la mostrada en la figura 2.3 que separaba los dos párrafos que se estaban comparando. Existen cuatro atributos que permiten modificar su apariencia. Estos son:

• 
  

  'align':

  Permite cambiar la alineación de la línea. Puede tomar tres valores:"left", "center" y "right" para conseguir alineación a la izquierda, centro y derecha respectivamente.

• 
  

  'noshade':

  'noshade', que en inglés significa sin sombra, existe porque algunos navegadores gráficos como Navigator o Explorer muestran las líneas horizontales con un efecto tridimensional con sombra. Al incluir este atributo se elimina este efecto de manera que el navegador sólo mostrará una línea horizontal negra.

• 
  

  'size':

  Con este atributo se puede controlar el grosor de la línea. Como valor de este atributo se debe especificar el valor deseado en pixeles (puntos de pantalla).

• 
  

  'width':

  Este atributo permite especificar el ancho de la línea. El valor puede ser dado de una manera absoluta, especificando el ancho en pixeles (por ejemplo width=100) o de manera relativa respecto al ancho de la ventana del navegador usando porcentajes (por ejemplo width="90%"). Es más que recomendable usar este último sistema de manera que obtengamos un resultado apropiado independientemente del tamaño que cada usuario quiera dar a la ventana de su navegador.

Estos atributos pueden ser usados conjuntamente para combinar sus efectos. En la figura 2.5 podemos ver el efecto de cada uno por separado en Explorer junto con los valores empleados en cada caso.

Figura 2.5. Con los nuevos atributos de la etiqueta <hr> podemos controlar el ancho, grosor alineamiento y sombra de la línea horizontal.

1.4. La etiqueta <blockquote>... </blockquote>

Otra etiqueta relacionada con el formato de párrafos en HTML es <blockquote>, que consta de una instrucción de inicio y una de fin y que indica que el párrafo que encierra es un texto parafraseado. Al usar esta etiqueta el navegador mostrará el texto en u nuevo párrafo con márgenes a la izquierda y a la derecha. En la figura 2.6 puede verse un uso típico de esta etiqueta.

	No abusar de las líneas horizontales
	Es conveniente no usar mucho las líneas horizontales, limitándolas al comienzo y fin de la página. La razón de esto es que las líneas en medio de la página dificultan la lectura de esta. Si se desea separar secciones un espacio vertical del tamaño adecuado es más efectivo.

Figura 2.6. La etiqueta <blockquote> es usada para insertar bloques de texto que citan a otro autor. Los navegadores suelen introducir un sangrado en este texto.

Que se corresponde con el código:

Mi poema favorito es aquel de Federico García Lorca que reza: <blockquote> Mi corazón, como una sierpe<br> se ha desprendido de su piel,<br> y aquí la miro entre mis dedos<br> llena de heridas y de miel<br> </blockquote>

1.5. La etiqueta <address>... </address>

Muy relacionada con la anterior, es la etiqueta <address>, que en inglés significa dirección. Esta etiqueta está compuesta, igualmente, por dos instrucciones y se usa para incluir información sobre el autor de una página WEB o elementos relacionados. Puede encontrarse un ejemplo de su uso en las coletillas existentes al final de muchas páginas en las que se incluye información variada para el usuario como puede ser, además del autor, la fecha de la última modificación, la fecha actual, la URL de la página, etc. como se muestra en la figura 2.7.

Figura 2.7. En esta página se observa como al final de la página se han incluido datos de los autores y de la página. Para ello se ha usado la etiqueta <address>.

1.6. La etiqueta <center>... </center>

Acabamos de ver una serie de etiquetas que permiten cambiar de línea, crear distintos tipos de párrafos o insertar líneas que les separen. También hemos visto que alguna de las etiquetas utilizadas tienen el atributo 'align' que permite indicar el alineamiento.
En ocasiones puede ser muy útil indicar que algún texto, imagen o algún otro elemento de la página debía ser centrado. Sin embargo no todas las etiquetas tienen el atributo 'align'. La solución es emplear una nueva etiqueta: center. Ésta está compuesta por una instrucción de inicio y una de fin de manera que todo lo que quedaba entre ellas, fuese lo que fuese, estuviese centrado. Por ejemplo en el ejemplo del verso de Lorca podemos centrarlo escribiendo:

Mi poema favorito es aquel de Federico García Lorca que reza: <center> <blockquote> Mi corazón, como una sierpe <br> se ha desprendido de su piel,<br> y aquí la miro entre mis dedos<br> llena de heridas y de miel <br> </blockquote> </center>

Y el resultado obtenido hubiese sido el de la figura 2.8

Figura 2.8. Con la etiqueta <center> es posible centrar cualquier elemento de nuestra página como por ejemplo el verso de Lorca de la figura 2.6.

ENCABEZADOS

ENCABEZADOS

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo, categoría, etc. Pues bien, para escribir encabezados disponemos de las etiquetas <h>.

Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño.

A continuación mostramos un código ejemplo de los seis diferentes encabezados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ejemplo del uso de encabezados - aprenderaprogramar.com</title> </head> <body> <h1>Texto muy grande</h1> <h2>Texto grande</h2> <h3>Texto algo más grande de lo normal</h3> <h4>Texto normal</h4> <h5>Texto pequeño</h5> <h6>Texto muy pequeño</h6> </body> </html>

Podemos ver el resultado obtenido en la siguiente imagen.

Como podemos observar en el ejemplo anterior, cada encabezado está separado del anterior y del siguiente por un salto de línea sin que nosotros en el código hayamos escrito nada ya que los encabezados generan por sí solos un salto de línea.

Ten en cuenta que en una página podrías poner un texto de tamaño grande indicándolo de otra manera, por ejemplo modificando el tamaño de fuente sin usar encabezado. ¿Por qué usar entonces encabezados? Los encabezados le dan relevancia especial al texto, y de hecho los buscadores como google, yahoo o bing cuando encuentran una etiqueta <h1> le dan más relevancia que a un texto del mismo tamaño que no sea un encabezado. Por tanto es conveniente usar las etiquetas <h1>, <h2>, etc. para obtener un mejor posicionamiento de nuestras páginas web en los buscadores. Es decir, usar h1 no sólo supone agrandar el tamaño de la letra, también supone indicar que el texto incluido entre esas etiquetas tiene una importancia superior al resto de texto y esto es valorado por los buscadores. Por supuesto, de nada servirá que intentes incluir todo el texto de tu página web dentro de etiquetas h porque los buscadores no son tontos: detectarán ese “truco” e incluso te penalizarán haciendo que no aparezca tu página web en las búsquedas. Por tanto los encabezados deben usarse con moderación y equilibrio.

PÁRRAFOS Y APLICAR ESTILOS A PÁRRAFOS

Para indicarle al navegador que queremos poner un texto en un párrafo, debemos escribirlo entre las etiquetas <p> y su cierre </p>, quedando el texto separado por un margen en blanco por encima y por abajo.

Un atributo muy usado en el pasado (hoy deprecated) fue align, que servía para establecer la alineación del texto dentro del párrafo.

ATRIBUTO	USO	OBSERVACIONES
align	Especifica la alineación del texto dentro del párrafo. left --> Alineación del texto a la izquierda right --> Alineación del texto a la derecha center --> Alineación del texto centrada justify --> Alineación del texto justificada	Atributo obsoleto (deprecated) en su uso en la forma <palign=”center”>Texto<p>. En lugar de esta sintaxis, usar CSS como se muestra a continuación. Ejemplo de uso correcto empleando técnica CSS: <p style="text-align: center;">Texto centrado</p>

Como comprobarás, hemos introducido el uso de estilos. Aunque en este curso no vamos a hablar de CSS más que superficialmente, conviene que te vayas familiarizando con esta técnica. Un estilo sirve para “moldear” la presentación de algo (un párrafo, un contenedor). En nuestro caso, estamos diciendo que el estilo a aplicar al párrafo incluye el alineado del texto (atributo text-align) al centro (center). Un estilo se puede aplicar de distintas maneras. Una forma de hacerlo es escribiendo en línea (a continuación de la etiqueta) con la sintaxis style = “característica a aplicar nº1 ; característica a aplicar nº2; característica a aplicar nº…;”.

Por ejemplo: <p style = “text-align: center; font-size: 12px; color:blue;”> Este texto estará centrado, tendrá un tamaño de fuente de 12 pixeles y color azul cuando se vea en el navegador</p>

Como vemos para definir un estilo escribimos style = “un nombre de atributo, dos puntos, el valor del atributo y terminación en punto y coma. Otros atributos se pueden especificar de la misma manera (tantos como queramos) hasta terminar con un punto y coma y las comillas de cierre”.

Iremos introduciendo cuestiones básicas relacionadas con estilos poco a poco y a medida que las vayamos necesitando. Cuando termines este curso te recomendamos seguir el curso CSS desde cero de aprenderaprogramar.com, pues CSS es una técnica imprescindible hoy día para desarrollos web.

EJEMPLO

Escribe este código en un editor de textos como bloc de notas o Notepad++. Guárdalo como archivo con extensión html y a continuación visualízalo en tu navegador comprobando que obtienes el resultado esperado.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ejemplo del uso de párrafos - aprenderaprogramar.com</title> </head> <body> <p style="text-align: center;">Este texto se alineará al centro</p> <p style="text-align: right;">Este texto se alineará a la derecha</p> <p style="text-align: left;">Este texto se alineará a la izquierda</p> </body> </html>

El texto dentro de una etiqueta pre normalmente se muestra con un tipo de fuente especial (Courier o similar) de ancho fijo, lo que le da un aspecto de “texto escrito con máquina de escribir”.

LA ETIQUETA <PRE>

La etiqueta <pre> se denomina de “texto preformateado” y sirve para que el navegador interprete el texto escrito tal y como está, respetando los saltos de línea, espacios, etc. indicados.

Escribe este código, guárdalo como archivo HTML y comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title> </head> <body> Escribo esta línea así Dejo dos líneas de separación y escribo tres más. </body> </html>

Sin poner ninguna etiqueta, el navegador respondería así:

En ausencia de la etiqueta <pre> el navegador no toma en consideración que en el código fuente existan saltos de línea, espacios, etc. en el texto. En cambio utilizando la etiqueta <pre> y cerrándola con su correspondiente etiqueta el navegador sí respetará los saltos de línea, espacios, tabuladores.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title> </head> <body> <pre> Escribo esta línea así Dejo dos líneas de separación y escribo tres más. </pre> </body> </html>

Como podremos observar al comprobar los resultados, con esta etiqueta se muestra el texto tal y como lo hayamos escrito respetando saltos de línea, espacios, tabuladores, etc.

La etiqueta <pre> interesa usarla en determinadas ocasiones, pero es poco frecuente hacer uso de ella. ¿Por qué? Porque normalmente se puede dar el formato adecuado a los textos usando técnicas CSS, que resultan más fáciles y cómodas de usar. No obstante, es una etiqueta que debemos conocer.

EJERCICIO

Crea una página web que conste de lo siguiente: un encabezado h1 que ponga “Las fotos de mi viaje”. A continuación un párrafo explicando un viaje. A continuación un encabezado h2 que indique “Fotos de la primera parte del viaje” y a continuación 2 fotos. Seguidamente un encabezado h2 que indique “Fotos de la segunda parte del viaje” y a continuación 2 fotos. Finalmente usando las etiquetas pre haz que aparezca este texto en la parte inferior usando espacios y tabuladores:

Los viajes …son libertad … son amistad … son crecimiento personal ¡No desaproveches una oportunidad!