¿Cómo encuadrar un texto en HTML?

1. INTRODUCCIÓN

Hoy vamos a aprender cómo encuadrar un texto en HTML. Aunque el mundo del blog es cada vez más accesible a un usuario sin conocimiento de lenguajes informáticos, controlar algunas nociones básicas de HTML nos puede sacar de un aprieto e incluso abrir el abanico de posibilidades  de nuestro portal web. A continuación veremos cómo encuadrar o bordear un texto con diferentes grosores de línea y colores y con diferentes formatos: abierto o ajustado al texto. Espero que os resulte interesante.

 

2. ENCUADRAR TEXTOS EN HTML

 

2.1. Recuadro simple abierto (no ajustado al texto)

Para crear un recuadro abierto, hay que insertar el siguiente código:

<p style="border: ridge #0f0fef 1px;">Introduce el texto que quieres encuadrar</p>

• Ejemplo:

Bordeado simple

 

2.2. Recuadro simple ajustado al texto

Si quieres ajustar el recuadro al texto, utiliza el código:

<span style="border-image: initial; border: 1px solid blue;">Introduce el texto que quieres encuadrar</span>

• Ejemplo:

Recuadro ajustado al texto

3. ¿CÓMO PERSONALIZAR EL BORDEADO? Cambio de color y grosor de la línea

Es muy sencillo, en los dos códigos anteriores he coloreado algunas cosas en rojo (para cambiar el color) y otras en azul (para cambiar el grosor de la línea).

 

3.1. Cambiar el grosor de la línea

Si deseas que el grosor de la línea sea más gruesa, debes cambiar el número coloreado en azul de las etiquetas anteriores (1px) por uno mayor, por ejemplo (2px). De esta manera, el grosor será el doble.

 

3.2. Cambiar el color del bordeado

En el primer caso, para cambiar el color hay que sustituir: #0f0fef (que es un tipo de azul) por el color que queramos (mirar columna CÓDIGO):

En el segundo caso, hay que cambiar "blue" (azul en inglés), por el color que queramos (mirar columna NOMBRE en la tabla anterior).