Opciones de Formato de Texto y Párrafos
¡Hola, Maker! Ya sabemos que los textos en la web se organizan dentro de "cajas", pero no todos los textos tienen la misma importancia. Hoy aprenderás a darle tamaño, estilo y alineación a tus palabras para que tus proyectos e informes técnicos se vean espectaculares.
1. Los Encabezados: La Ley del Más Grande (desde <h1> hasta <h6>)
Imagina que estás leyendo un periódico escolar: hay un título principal gigante, subtítulos medianos y secciones más pequeñas. En HTML controlamos esto con las etiquetas de **Encabezado** (Heading en inglés), que van desde la <h1> hasta la <h6>.
Entre menor sea el número de la etiqueta, ¡más grande y pesado será el texto! <h1> es el rey absoluto del tamaño, mientras que <h6> es el más diminuto.
Visualiza la Jerarquía en Pantalla:
<h1> Título Principal del Proyecto </h1>
<h2> Subtítulo o Sección Principal </h2>
<h3> Sub-sección o Categoría </h3>
<h4> Detalle Menor </h4>
<h5> Nota aclaratoria </h5>
<h6> Texto super pequeño </h6>
💡 Consejo del Mentor: En cada página web que construyas solo debe existir un único <h1> (el nombre principal de la página). Los demás se usan para organizar los subtemas.
2. Herramientas de Estilo para tus Palabras ✏️
Para resaltar códigos de Arduino, variables o datos clave dentro de tus párrafos (<p>), puedes aplicar los siguientes superpoderes directamente a las palabras:
| Etiqueta | Efecto en el Texto | Ejemplo de Código |
|---|---|---|
<strong> |
Negrita (Importante) | <strong>¡Peligro!</strong> |
<em> |
Cursiva o Énfasis (Inclinado) | <em>Sensor activo</em> |
<ins> |
Subrayado | <ins>Nota de clase</ins> |
<del> |
<del>Código viejo</del> |
|
<mark> |
Resaltado con marcador | <mark>Revisar aquí</mark> |
3. ¿Cómo ordenar y alinear tus Párrafos? 📐
Por defecto, el navegador siempre acomoda tus textos hacia la izquierda. En el diseño web moderno del 2026, usamos CSS para cambiar la posición, pero podemos hacerlo de forma rápida directamente en HTML usando el atributo style con la propiedad text-align:
<p style="text-align: center;">Este texto se verá centrado en la pantalla (Ideal para títulos o poemas).</p>
<p style="text-align: right;">Este texto se alineará hacia la derecha de la pantalla.</p>
<p style="text-align: justify;">Este texto se verá justificado (Limpio y alineado en ambos bordes).</p>Reto en el Editor: El Mensaje Secreto
Copia la siguiente línea en tu cuaderno de código y adivina cómo se verá antes de abrirla en el navegador:
<p style="text-align: center;">El <strong>Servomotor Arduino</strong> debe girar exactamente a <mark>90 grados</mark>.</p>
¿Qué palabras saldrán en negrita? ¿Cuál tendrá color de marcador encima? ¿Dónde se ubicará el párrafo? ¡Pruébalo y descúbrelo!