Saltar al contenido principal

El diseño del texto

El párrafo​

La etiqueta <p> - es un contenedor universal para agrupar pequeños elementos de frase, separarlos unos de otros y estilizarlos. De forma predeterminada, un párrafo es un elemento de bloque, lo que significa que comienza con una nueva línea y tiene sangrías verticales que se pueden cambiar en CSS.

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eligendi, a
  eaque, esse itaque porro non exercitationem odio earum quos perferendis!
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, totam velit
  asperiores non temporibus ut nisi minima?
</p>

A menudo es necesario rellenar la etiqueta con texto en blanco cuando el texto que se publicará en el sitio aún no está representado. Para hacer esto se usa el marcador de posición especial (Lorem Ipsum).

Es útil

En el editor VSCode, en un documento HTML, se puede marcar el código lorem10, y luego pulsar la tecla Tab. Esto va a crear una matriz de texto de 10 palabras. En lugar de 10 se puede poner cualquier número.

Los títulos​

El grupo de etiquetas <h1>...<h6> - especifica los encabezados de texto de las secciones semánticas de diferentes niveles que indican la importancia de la sección de contenido que se encuentra después de ellas. Es una herramienta de estructuración de contenido de texto.

La etiqueta <h1> se usa con mayor frecuencia solo una vez, como el título principal de la página. El resto de los encabezados pueden ser usados tantas veces como desee, pero siempre hay que aplicarlos correctamente, siguiendo la jerarquía.

Es útil

Los motores de búsqueda prestan especial atención a los encabezados, por lo que el uso correcto de este grupo de etiquetas es esencial. No defina el nivel de título por el tamaño del texto en el diseño. No todos los textos grandes son títulos. El título es la parte que encabeza la sección del contenido por su significado

Las listas​

Las listas permiten organizar colecciones y presentarlas de una manera visual y conveniente para el usuario. La lista es un contenedor cuyos hijos solo pueden ser elementos de lista, etiquetas<li>.

La etiqueta <ol> - crea una lista numerada (ordenada), es decir, cada elemento de la lista está numerado. El navegador numera los elementos en orden automáticamente y si elimina uno o más elementos de dicha lista, los demás números se recalcularán automáticamente. La numeración de los elementos puede ser controlada mediante atributos de lista especiales.

Se usa para enumerar acciones en un orden específico, como una receta.

<h1>Cómo hacer té</h1>
<p>¡Instrucciones paso a paso para Dummies, solo repite y tendrás éxito!</p>

<ol>
  <li>Hervir el agua</li>
  <li>Verter el té en una taza</li>
  <li>Verter en la taza agua hirviendo</li>
  <li>Esperar 10 minutos,luego se puede beber</li>
</ol>

La etiqueta <ul> - crea una lista con viñetas (desordenada), cada elemento comienza con un pequeño carácter (marcador). Con la ayuda de CSS, el marcador puede ser quitado o reemplazado.

Se utiliza para enumerar un conjunto en orden aleatorio, como una lista de centros turísticos.

<h1>Mejores centros turísticos</h1>
<p>Este año, los expertos recomiendan visitar los lugares siguientes.</p>

<ul>
  <li>Túnez</li>
  <li>Turquía</li>
  <li>Grecia</li>
  <li>Egipto</li>
</ul>
Atención

De acuerdo con la especificación en las etiquetas <ul> y <ol> se puede invertir solo los elementos de la lista - las etiquetas <li>. Al mismo tiempo, dentro de las etiquetas <li>, se pueden anidar otras etiquetas arbitrarias. :::

Listas anidadas​

Hacer una lista multinivel es fácil: Ponemos otra lista en el elemento de la lista. Esto se aplica a menudo para crear los menús multinivel.

<ul>
  <li>
    Computadoras y componentes
    <ul>
      <li>Procesadores</li>
      <li>Monitores</li>
      <li>Tarjetas gráficas</li>
    </ul>
  </li>
  <li>
    Electrodomésticos
    <ul>
      <li>Neveras</li>
      <li>Televisores</li>
      <li>Lavadoras</li>
    </ul>
  </li>
  <li>
    Productos del hogar
    <ul>
      <li>Sillones</li>
      <li>Colchones</li>
      <li>Chimeneas eléctricas</li>
    </ul>
  </li>
</ul>

El enlace​

La etiqueta <a> - sirve para crear enlaces, texto, al hacer clic y ir a otra página, descargar un archivo, etc. El texto del enlace se muestra en el navegador con un subrayado, el color de la fuente es azul, el diseño se cambia al pasar el cursor del ratón sobre el enlace.

La dirección del enlace se especifica en el atributo obligatorio href="dirección". La dirección es URL, que puede indicar la página, documento o cualquier recurso.

<a href="https://google.com">Enlace a la página principal Google</a>

Los atributos target y rel​

De forma predeterminada, el enlace se abre en la pestaña del navegador actual. El atributo target="valor" define en qué pestaña se debe abrir el documento al que se dirige el enlace. Con el valor _blank la página se abre en una nueva pestaña del navegador.

El atributo rel complementa el atributo href con información sobre la relación entre el documento actual y el asociado y se utiliza junto contarget="_blank".

<!-- El enlace a un recurso externo se abrirá en la pestaña actual -->
<a href="https://www.facebook.com/">Facebook</a>

<!-- El enlace a un recurso externo se abrirá en una nueva pestaña -->
<a href="https://www.facebook.com/" target="_blank" rel="noreferrer noopener">
  Facebook
</a>

El atributo download​

Si se especifica la ruta del archivo en el enlace href el navegador intentará abrirlo en la pestaña actual si sabe cómo manejar este tipo de archivos. Por lo general, esto es lo que sucede con las imágenes y los archivos PDF.

El atributo download="nombre de archivo" indica al navegador que el recurso especificado no debe abrirse, sino descargarse en el momento en que el usuario haga clic en el enlace. El valor del atributo especifica el nombre del archivo que se va a cargar, es decir, puede cambiar el nombre durante la carga. El atributo se puede usar sin especificar un valor, luego se usará el nombre del archivo original.

<!-- Enlace de descarga -->
<a href="/vía/a/cv.pdf" download>Descargar curriculum vitae</a>

Los valores especiales href​

Los enlaces tienen la capacidad no solo de ir a otras páginas y descargar archivos, sino también de hacer llamadas a teléfonos, enviar mensajes o llamar a Skype

<!-- Enlace al número de teléfono -->
<a href="tel:+14251234563">+1 (425) 123-45-63</a>

<!-- Enlace a la dirección de correo electrónico  -->
<a href="mailto:example@mail.ru">example@mail.ru</a>

Enlace ancla​

El enlace de anclaje se utiliza para crear una navegación por la página actual. Por ejemplo, para saltar rápidamente a alguna sección (como en estos materiales). Al hacer clic en dicho enlace, el navegador deslizará la página hasta el ancla sin reiniciarla.

Para crear un ancla, debe agregar la etiqueta a la que queremos deslizar la página, el atributo id es un identificador único. Y el atributo hrefde la referencia establece un valor que comienza con el caracter # después del cual se especifica el identificador del elemento.

El botón​

Un elemento interactivo que se anima con JavaScript. Por ejemplo, un botón para abrir y cerrar una ventana emergente, cambiar el menú móvil o enviar un formulario. Debe especificar explícitamente el atributo type. Su valor predeterminado es submit, pero la mayoría de las veces necesita el valor button.Sí, un botón tipo " botón", es su particularidad.

<button type="button">Abrir ventana modal</button>

Es importante no confundir el enlace y el botón. Si al hacer clic en un elemento de la interfaz se produce una transición a alguna dirección, es decir, hay href, pues es el enlace. Si al hacer clic ocurre algo sin recargar o redirigir la página, entonces está garantizado el botón.

:::

El atributo lang​

Si la página tiene texto en diferentes idiomas, para que sea más accesible para las tecnologías de asistencia, puede especificar el atributo lang no solo para todo el documento, sino también para las etiquetas individuales.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Instrucciones de uso de las empanadas" />
    <title>¡Las empanadas son ricas!</title>
  </head>
  <body>
    <p>Instrucciones de uso</p>
    <p lang="en">Operating instructions</p>
    <p lang="fr">Manuel d'utilisation</p>
  </body>
</html>
Atención

Es una oportunidad, una recomendación, no es un requisito obligatorio. El diseño, teniendo en cuenta el soporte de las tecnologías de asistencia, se realiza solo a petición del cliente.