HTML - Formato

Mateo G. -

Formato de Texto

Texto en Negrita

En HTML, puedes hacer que el texto esté en negrita usando la etiqueta <b> o <strong>. La etiqueta <b> se usa para llamar la atención sobre el texto sin darle importancia adicional, mientras que la etiqueta <strong> indica que el texto es importante o urgente.

Consejo: Texto en Negrita

<p>Este es <b>texto en negrita</b> usando la etiqueta b.</p>
<p>Este es <strong>texto en negrita</strong> usando la etiqueta strong.</p>

Texto en Cursiva

Para poner el texto en cursiva, puedes usar la etiqueta <i> o <em>. La etiqueta <i> se usa para indicar un tono o cualidad diferente del texto, como un término técnico o una frase en otro idioma. La etiqueta <em> se usa para enfatizar el texto.

Consejo: Texto en Cursiva

<p>Este es <i>texto en cursiva</i> usando la etiqueta i.</p>
<p>Este es <em>texto en cursiva</em> usando la etiqueta em.</p>

Texto Subrayado

Para subrayar texto, usa la etiqueta <u>.

Consejo: Texto Subrayado

<p>Este es <u>texto subrayado</u> usando la etiqueta u.</p>

Texto Tachado

Para crear texto tachado, puedes usar la etiqueta <s> o <del>. La etiqueta <s> indica texto que ya no es correcto o relevante, mientras que la etiqueta <del> representa texto que ha sido eliminado.

Consejo: Texto Tachado

<p>Este es <s>texto tachado</s> usando la etiqueta s.</p>
<p>Este es <del>texto tachado</del> usando la etiqueta del.</p>

Subíndice y Superíndice

Para texto en subíndice, usa la etiqueta <sub>. Para texto en superíndice, usa la etiqueta <sup>.

Consejo: Subíndice y Superíndice

<p>Este es <sub>texto en subíndice</sub> usando la etiqueta sub.</p>
<p>Este es <sup>texto en superíndice</sup> usando la etiqueta sup.</p>

Texto Resaltado

Para resaltar texto, usa la etiqueta <mark>. Esto es útil para marcar palabras clave o frases importantes.

Consejo: Texto Resaltado

<p>Este es <mark>texto resaltado</mark> usando la etiqueta mark.</p>

Texto Pequeño

Para hacer el texto más pequeño, usa la etiqueta <small>. Esta etiqueta se usa para comentarios al margen, letra pequeña o avisos legales.

Consejo: Texto Pequeño

<p>Este es <small>texto pequeño</small> usando la etiqueta small.</p>

Alineación de texto

En HTML, puedes alinear texto usando el atributo align. Este atributo se puede agregar a varias etiquetas, como <p>, <h1> a <h6>, <div>, y otras. El atributo align acepta tres valores: "left", "center" y "right".

Para alinear el texto a la izquierda, usa align="left". Esta es la alineación predeterminada para la mayoría de los elementos.

Consejo: Texto alineado a la izquierda

<p align="left">Este texto está alineado a la izquierda.</p>

Para centrar el texto, usa align="center". Esto mostrará el texto en el medio del elemento contenedor.

Consejo: Encabezado centrado

<h2 align="center">Este encabezado está centrado.</h2>

Para alinear el texto a la derecha, usa align="right". Esto mostrará el texto en el lado derecho del elemento contenedor.

Consejo: Texto alineado a la derecha

<div align="right">Este texto está alineado a la derecha.</div>

Es importante tener en cuenta que, aunque el atributo align todavía es compatible con HTML5, se recomienda usar CSS para la alineación de texto y otros propósitos de estilo. CSS ofrece más flexibilidad y control sobre el diseño y la apariencia de tu página web.

Formato de fuente

Tamaño de fuente

En HTML, puedes cambiar el tamaño de la fuente usando el atributo size dentro de la etiqueta <font>. El atributo size acepta valores del 1 al 7, siendo 1 el más pequeño y 7 el más grande. El tamaño predeterminado es 3.

Consejo: Código HTML para tamaño de fuente

<p>Este es un texto de <font size="1">tamaño 1</font>.</p>
<p>Este es un texto de <font size="3">tamaño 3</font>.</p>
<p>Este es un texto de <font size="7">tamaño 7</font>.</p>

Sin embargo, es importante tener en cuenta que la etiqueta <font> está obsoleta en HTML5 y debe evitarse. En su lugar, usa CSS para controlar los tamaños de fuente para mayor flexibilidad y mejores prácticas de diseño.

Consejo: Estilos CSS para tamaño de fuente

<p style="font-size: 12px;">Este texto tiene un tamaño de fuente de 12 píxeles.</p>
<p style="font-size: 1.2em;">Este texto tiene un tamaño de fuente de 1.2em.</p>

Color de fuente

Para cambiar el color del texto en HTML, puedes usar el atributo color dentro de la etiqueta <font>. El atributo color acepta nombres de colores, valores hexadecimales o valores RGB.

Consejo: Código HTML para color de fuente

<p>Este es un texto <font color="red">rojo</font>.</p>
<p>Este es un texto <font color="#0000FF">azul</font>.</p>
<p>Este es un texto <font color="rgb(0, 128, 0)">verde</font>.</p>

Al igual que con el tamaño de fuente, la etiqueta <font> está obsoleta, y se recomienda usar CSS para controlar los colores de fuente.

Consejo: Estilos CSS para color de fuente

<p style="color: red;">Este texto es rojo.</p>
<p style="color: #0000FF;">Este texto es azul.</p>
<p style="color: rgb(0, 128, 0);">Este texto es verde.</p>

Tipo de fuente

Para especificar el tipo de fuente o familia en HTML, puedes usar el atributo face dentro de la etiqueta <font>. El atributo face acepta el nombre de la fuente que deseas usar.

Consejo: Código HTML para tipo de fuente

<p>Este es un texto en <font face="Arial">Arial</font>.</p>
<p>Este es un texto en <font face="Verdana">Verdana</font>.</p>
<p>Este es un texto en <font face="Courier New">Courier New</font>.</p>

Una vez más, la etiqueta <font> está obsoleta, y es mejor usar CSS para establecer los tipos de fuente.

Consejo: Estilos CSS para tipo de fuente

<p style="font-family: Arial;">Este texto usa la fuente Arial.</p>
<p style="font-family: Verdana;">Este texto usa la fuente Verdana.</p>
<p style="font-family: 'Courier New';">Este texto usa la fuente Courier New.</p>

Al usar CSS, puedes especificar múltiples tipos de fuente en la propiedad font-family, separados por comas. Esto permite al navegador usar la primera fuente disponible de la lista.

Texto preformateado

En HTML, puedes mostrar texto preformateado usando la etiqueta <pre>. La etiqueta <pre> mantiene los espacios, saltos de línea y otros formatos dentro de su contenido. Esto es útil cuando quieres mostrar texto exactamente como está escrito, como fragmentos de código, arte ASCII o poesía.

Consejo: Uso de la etiqueta <pre>

<pre>
  Esto es un ejemplo
    de texto preformateado.
  Mantiene     espacios,
         saltos de línea,
    y otros formatos.
</pre>

En el ejemplo anterior, el texto dentro de la etiqueta <pre> se mostrará con su formato original, incluyendo múltiples espacios y saltos de línea.

Por defecto, el texto dentro de la etiqueta <pre> se muestra usando una fuente monoespaciada, lo que le da un aspecto similar al código o texto plano. El texto también tiene un ancho fijo, lo que significa que no cambia según el tamaño de la ventana del navegador.

Es importante tener en cuenta que, como la etiqueta <pre> mantiene el formato, cualquier etiqueta HTML dentro de su contenido se mostrará como texto plano en lugar de ser interpretada como HTML. Si deseas incluir etiquetas HTML dentro del texto preformateado, debes usar entidades HTML para representar los caracteres especiales, como &lt; para < y &gt; para >.

Consejo: Entidades HTML en texto preformateado

<pre>
  &lt;p&gt;Este es un ejemplo de texto preformateado con entidades HTML.&lt;/p&gt;
</pre>

En el ejemplo anterior, las etiquetas HTML <p> y </p> se muestran como texto plano al usar sus entidades HTML correspondientes.

El uso de la etiqueta <pre> es una manera simple de mostrar texto preformateado manteniendo su formato original, lo que la convierte en una herramienta útil para presentar fragmentos de código, arte ASCII o cualquier otro contenido que dependa de espacios y saltos de línea específicos.

Formato de código

En HTML, puedes formatear código usando la etiqueta <code> para código en línea y una combinación de las etiquetas <pre> y <code> para bloques de código.

Para mostrar código en línea, envuelve el fragmento de código con la etiqueta <code>. Esta etiqueta se usa para representar una parte de código de computadora dentro de una oración o párrafo.

Consejo: Ejemplo de código en línea

Para crear un nuevo párrafo en HTML, usa la etiqueta <p>.

En el ejemplo anterior, la etiqueta <p> está envuelta con etiquetas <code> para mostrarla como código en línea. Observa que los caracteres < y > son reemplazados por sus entidades HTML (&lt; y &gt;) para evitar que sean interpretados como HTML.

Para bloques de código o múltiples líneas de código, usa la etiqueta <pre> con la etiqueta <code>. La etiqueta <pre> mantiene el formato, mientras que la etiqueta <code> dentro de ella indica que el contenido es código.

Consejo: Ejemplo de bloque de código

<pre><code>
  function greet(name) {
    console.log("Hello, " + name + "!");
  }

  greet("John");
</code></pre>

Usar la etiqueta <code> para código en línea y las etiquetas <pre> y <code> juntas para bloques de código ayuda a separar el código del texto regular, haciendo que tu documento HTML sea más fácil de leer. También te permite dar estilo al código de manera diferente usando CSS si lo deseas.

Al mostrar código en HTML, es importante usar entidades HTML para caracteres especiales como <, >, y & para evitar que sean interpretados como HTML. También puedes considerar usar una biblioteca o resaltador de sintaxis para formatear y dar estilo automáticamente a tus bloques de código para una mejor presentación.

Citas en bloque

En HTML, puedes crear citas en bloque usando la etiqueta <blockquote>. Las citas en bloque se utilizan para indicar que el texto incluido es una cita extendida de otra fuente. Los navegadores generalmente muestran las citas en bloque con márgenes sangrados en ambos lados para separarlas del contenido circundante.

Consejo: Crear una cita en bloque

<blockquote>
  "La única forma de hacer un gran trabajo es amar lo que haces." - Steve Jobs
</blockquote>

En el ejemplo anterior, el texto citado está encerrado dentro de la etiqueta <blockquote>, que lo mostrará con márgenes sangrados.

También puedes incluir la fuente de la cita usando el atributo cite dentro de la etiqueta <blockquote>. El atributo cite debe contener una URL que apunte a la fuente de la cita.

Consejo: Cita en bloque con atributo cite

<blockquote cite="https://www.example.com/quotes">
  "La innovación distingue a un líder de un seguidor." - Steve Jobs
</blockquote>

Para estilizar aún más las citas en bloque, puedes usar CSS. Algunas opciones comunes de estilo incluyen cambiar el estilo de fuente, tamaño o color, ajustar la sangría o agregar un color de fondo o borde.

Consejo: Estilizar citas en bloque con CSS

<style>
  blockquote {
    font-style: italic;
    font-size: 1.2em;
    color: #333;
    margin-left: 30px;
    padding: 10px;
    border-left: 5px solid #ccc;
    background-color: #f9f9f9;
  }
</style>

<blockquote>
  "El diseño no es solo cómo se ve y cómo se siente. El diseño es cómo funciona." - Steve Jobs
</blockquote>

El uso de citas en bloque con el formato y el estilo adecuados puede ayudarte a presentar citas de manera clara y atractiva dentro de tus documentos HTML. Proporcionan una forma de indicar citas extendidas y se pueden personalizar para que coincidan con el diseño de tu sitio web.