3

¿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):

Tabla 1. Colores básicos en HTML (Nombre y 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).

 

Saber es práctico

Doctor en educación. Curioso sobre todo. Llevo más de 14 años compartiendo cualquier tipo de información que creo que puede resultar útil a otras personas. Intento hacerlo de la forma más breve, sencilla y fiable posible; contrastando la información con las principales fuentes de autoridad en cada campo (salvo cuando el contenido no las requiere). Podéis contactarme en los comentarios. Leo todas vuestras dudas y suelo contestar la mayoría diariamente.

ENTRADAS RELACIONADAS:

 

3 comentarios

  1. yo quiero colocar todo el recuedro de color azul  completoy el texto resaltalo en otro color me puedes indicar como realizar eso muchas gracias                       
    Recuadro ajustado al texto

 

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.