4. Modificadores de texto y etiquetas en línea

Las etiquetas en lineal se emplean como modificador de texto para así darle otro aspecto, podríamos destacar como las mas habituales, las negritas, cursivas o subrayados. Estas etiquetas llevan apertura y cierra delimitando el texto que queremos modificar, además de poder anidarse una dentro de otra infinitamente para conseguir otros resultados.

Las etiquetas en línea no ocasionan ningún tipo saltos de línea, a excepción de los elementos en bloque que están delimitados automáticamente por saltos de línea.

Realmente la mayoría de estas etiquetas pueden ser ya reemplazadas con código CSS, pero la verdad es que en ocasiones en mas cómodo o rápida usarlas.

Texto en negrita

Para convertir textos en negrita podemos dos etiquetas para realizar la misma función:

<b>Un texto en negrita</b>
<strong>Otro texto en negrita</strong>

Resultado:

Un texto en negrita

Otro texto en negrita

Texto en cursiva

Para modificar un texto y transformarlo en cursiva, podemos usar estas dos etiquetas:

<i>Un texto en cursiva</i>
<em>Otro texto en cursiva</em>

Resultado:

Un texto en negrita

Otro texto en negrita

Subrayados

En los subrayados además, podemos encontrar etiquetas para tachar un texto.

<u>Un texto subrayado</u>
<ins>Otro texto subrayado</ins>

<s>Un texto tachado</s>
<del>Otro texto tachado</del>
<strike>Otro texto tachado</strike>

Resultado:

Un texto subrayado

Otro texto subrayado

 

Un texto tachado

Otro texto tachado

Otro texto tachado

Centrar contenido

Aunque la siguiente etiqueta se trata de un elemento de bloque que ocupará todo el ancho, es interesante conocerla como un modificador de texto, se emplea para centrar el contenido en la pagina web.

<center>Frase de texto centrada.</center>

Resultado:

Frase de texto centrada.

División o bloques de división

Lo etiqueta «div» no hace modificaciones en el texto, se utiliza para crear bloques de contenido y organizarlos dentro de la página, aplicando estilos CSS tendremos un control total de los elementos «div«.

Imaginemos que tenemos 3 párrafos de texto y nos interesa colocar cada párrafo en una columna, para ello hacemos uso del atributo «align«:

<div align="left"><p>Primer párrafo de texto<p></div>
<div align="center"><p>Segundo párrafo de texto<p></div>
<div align="right"><p>Tercer párrafo de texto<p></div>

Resultado:

Primer párrafo de texto

Segundo párrafo de texto

Tercer párrafo de texto

Cita

Usado ampliamente en la redacción de contenido para citar textos de otro sitio dentro de nuestro contenido.

Con la etiquete «blockquote» definimos una sección la cual cita contenido de otro sitio web. Como podemos ver en el ejemplo, empleamos el atributo «cite«, y le asignamos como valor, la dirección de la página donde se encuentra el texto original.

<blockquote cite="http://example.com">Texto citado</blockquote>

Ejemplo:

Texto citado

Otras etiquetas

Existen una seria de etiquetas especiales dentro del lenguaje HTML empleadas para realizar ciertas tareas especificas, aquí veremos algunas de las de mayor importancia a la hora de redactar contenido o crear nuestra página web.

Comentarios en HTML

Muchas veces necesitaremos crear anotaciones o comentarios en partes de nuestro código fuente, HTML dispone de una etiqueta especial para esto. Esta etiqueta sólo podrá verse cuando se accede a ver el código fuente, nunca será mostrada en la página como parte de su contenido.

En cualquier parte de nuestro codigo fuente podemos agregar un comentario de la sieguiente manera:

<!-- Esto es un comentario -->

El navegador ignorará todo contenido que esté entre las etiqueta «<!–» y «–>«, con lo que para poder verlas, debemos acceder a ver el código fuente de la pagina desde el navegador.

Espaciados

En ocasiones necesitamos dejar mas de un espacio en blanco entre palabras o elementos HTML, por lo que para realizar esta tarea, haremos uso de otra etiqueta especial para forzar al navegador a mostrar un espacio en blanco.

&nbsp;

Debemos insertar la etiqueta especial completa, tantas veces como espacios necesitemos, un ejemplo sería:

<p>Hola &nbsp;&nbsp;&nbsp; Mundo!</p>

Hola     Mundo!

Salto de línea

En las situaciones en las que necesitamos una línea en blanco o un salto de línea en nuestro texto, podemos utilizar dos opciones para hacerlo.

Si nos interesa dejar una o varias líneas en blanco haremos uso de la siguiente etiqueta, date cuenta que esta etiqueta no lleva apertura y cierre, es única tal como se muestra en el ejemplo:

 <br />

También podemos hacer uso de la etiqueta de párrafo combinándola con el espacio en blanco, con lo que generamos un nuevo salto de línea. Ejemplo para tres saltos de línea:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Línea de separación

La etiqueta especial para líneas de separación, nos permite crear una línea horizontal del ancho del contenido, esta viene bien para separar visualmente zonas entre nuestro contenido.

<hr />

Podemos personalizar la apariencia de la línea, haciendo uso de alguno de los siguientes atributos:

  • align (left, center, right), alinea la línea en la página ya sea a la izquierda, centro o derecha.
  • size (numero de pixel), establece la altura de la línea.
  • width (porcentaje, pixeles), ancho de la línea que ocupará la página, también podemos especificar su valor en pixel
  • noshade, sin asignarle valor alguno, el mero hecho de estar desactiva el sombreado de la línea.

Ejemplo de una línea que su ancho es del 50% del tamaño del párrafo, con un grosor de 5 pixel, sin sombra y alineada al centro:

<hr align="center" size="5" width="50%" noshade/>

Resultado:


Caracteres especiales

Al escribir en HTML existen una serie de caracteres que no podemos escribir directamente, ya que si no el navegador lo interpreta como código, además tampoco podemos escribir más de un espacio entre palabras e incluso puede que en ocasiones algunos caracteres no se vean correctamente.

Para los signos de «<>» o «&» además de los espacios en blanco, tendremos que emplear entidades HTML, ya que no se pueden escribir directamente en nuestro código.

Para solucionar este inconveniente debemos emplear las llamadas entidades HTML, cada entidad representará un carácter. También existen entidades HTML para representar caracteres propios de un idioma, cómo sería el caso de la ”Ñ” o las tildes, si utilizamos un editor, estas normalmente serán reemplazadas automáticamente, pero nunca está de más conocer su existencia.

Aquí tienes una lista de las mas habituales:

&lt;<Menor que.
&gt;>Mayor que.
&amp;&Ampersand.
&quot;«Dobles comillas.
&nbsp; Espacio en blanco.
&apos;Apóstrofo.
&ntilde;ñLetra ñ minúscula.
&Ntilde;ÑLetra Ñ mayúscula.
&aacute;áLetra a con tilde minúscula.
&Aacute;ÁLetra A con tilde mayúscula.
&eacute;éLetra e con tilde minúscula.
&Eacute;ÉLetra E con tilde mayúscula.
&iacute;íLetra i con tilde minúscula.
&Iacute;ÍLetra I con tilde mayúscula.
&oacute;óLetra o con tilde minúscula.
&Oacute;ÓLetra O con tilde mayúscula.
&uacute;úLetra u con tilde minúscula.
&Uacute;ÚLetra U con tilde mayúscula.
&euro;Signo de Euro.
&copy;©Signo de Copyright.

En este ejemplo podemos ver la letra Ñ en minúscula y mayúscula, nota la diferencia en el carácter después del «&«

<p>Tengo un coche peque&ntilde;o</p>
<p>TENGO UN COCHE PEQUE&Ntilde;O</p>

Resultado:

Tengo un coche pequeño

TENGO UN COCHE PEQUEÑO