Ediciones ENI Editorial | líder en informática
Los contenedores para el texto
Objetivos
Después de ver los contenedores de estructura, este capítulo analiza los contenedores para texto. Como se mencionó anteriormente, HTML es un lenguaje semántico, lo que significa que, para mostrar texto en una página, es necesario usar los elementos HTML correctos. Cada elemento HTML está diseñado para colocar un tipo específico de texto en él, con el fin de diseñar páginas que sean válidas, utilizables y comprensibles para todos.
Este capítulo presentará los principales elementos de contenido textual más utilizados habitualmente.
Atributos habituales
1. El atributo de idioma
En cualquier página web, es posible especificar el idioma utilizado con el atributo lang. Este atributo debe colocarse en el elemento <html> para indicar el idioma utilizado en toda la página. Pero es perfectamente factible hacer una excepción para un contenedor de texto específico. Por ejemplo, es posible indicar que, en un párrafo redactado en español, una parte está escrita en italiano. Para ello, se utiliza el elemento <span> con el atributo lang.
En este ejemplo, la página está en español:
<html lang="es"> Y en un párrafo determinado, hay una excepción para indicar que una parte está en italiano:
<p>Me dijo<span lang="it">Ciao a tutti!Come state?</span>cuando nos vimos.</p> 2. El atributo de dirección del texto
Además del idioma, es posible especificar la dirección de escritura con el atributo dir. Este atributo admite tres valores:
-
ltr: que significa left to right, de izquierda a derecha, como en español o italiano, por ejemplo.
-
rtl: que significa right to left, de derecha a izquierda, como en árabe, por ejemplo.
-
auto: en este caso, el propio navegador detecta la dirección de escritura.
He aquí un ejemplo de un párrafo en árabe, con el uso de los atributos lang y dir: <p lang="ar" dir="rtl">صباح...
Los títulos
Los elementos de encabezado permiten insertar seis niveles jerárquicos de título en las páginas. Los elementos que se deben utilizar son <h1> a <h6>. Estos títulos tienen un valor semántico muy elevado. El nivel de título <h1> es el más importante de la página, mientras que el nivel <h6> es el menos relevante.
Se recomienda encarecidamente usarlos en orden descendente: primero use un título de nivel 1, luego un título de nivel 2 y así sucesivamente. No se recomienda omitir un nivel, como pasar de <h1> a <h3> sin utilizar un <h2>.
También se recomienda utilizar un único elemento <h1> por página. Sin embargo, es posible usar varias veces los niveles inferiores de título en diferentes contenedores. Por lo tanto, es posible tener un elemento <main> con un título <h1> que contiene varios elementos <article> cada uno con un título <h2>. Luego, en otro lugar, en un elemento <aside> por ejemplo, es posible volver a usar otros elementos <h2>.
Finalmente, todos los títulos <hx> se muestran en negrita en los navegadores, con el tamaño de letra más grande para el <h1> y el más pequeño para el <h6>.
He aquí un ejemplo simple:
<!doctype html>
<html...Los párrafos
El elemento <p> permite insertar texto común dentro de párrafos. Como en cualquier tipo de redacción, cada párrafo puede contener una idea o concepto. Dentro de cada párrafo, es posible destacar una o varias palabras mediante elementos de formato semántico.
He aquí un ejemplo sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>Morbi leo risus, porta ac consectetur...</p>
<p>Nullam quis risus eget urna mollis ornare...</p>
</body>
</html> Esta es la pantalla obtenida:
Las citas
Los bloques de citas se utilizan para mostrar texto extraído de una fuente externa a la página web. Se utiliza el elemento <blockquote>, que actúa como contenedor de otros elementos que pueden ser de cualquier tipo: título, párrafo, imagen...
He aquí un ejemplo sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<h1>Inceptos Consectetur Tristique Bibendum</h1>
<p>Morbi leo risus, porta ac consectetur...</p>
<blockquote>
<h2>Fusce Mattis Ligula Etiam</h2>
<p>Nullam id dolor id nibh...</p>
<img src="gutenberg.jpg" alt="Gutenberg" />
</blockquote>
<p>Nullam quis risus eget...</p>
</body>
</html> Y esta es la pantalla resultante:
Las listas
1. Los diferentes tipos de lista
Las listas le permiten insertar enumeraciones semánticas en sus páginas web. Hay tres tipos de listas disponibles: listas no ordenadas (más comúnmente conocidas como listas con viñetas), listas ordenadas (listas numeradas) y listas de definiciones.
Es muy habitual usar listas para crear barras de navegación. Este uso es totalmente válido, ya que dichas barras representan una enumeración de enlaces.
2. Las listas no ordenadas
Las listas no ordenadas (unordered list en inglés) permiten listar, enumerar datos que se mostrarán con una viñeta delante de cada elemento de la lista. Para definir la lista, se utiliza el elemento <ul>. Cada uno de los elementos de la lista se introduce dentro de un elemento <li>.
He aquí un ejemplo sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<ul>
<li>Manzanas</li>
<li>Peras</li>
<li>Plátanos</li>
</ul> ...Las direcciones
No es raro necesitar insertar direcciones de todo tipo en una página web. Para ello, hay que usar el elemento <address>, que está dedicado a este propósito. Dentro de él, se pueden incluir todo tipo de direcciones: postales, electrónicas, etc. Es posible anidar otros contenedores dentro del elemento <address> para lograr una presentación más atractiva.
He aquí un ejemplo sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>Estos son nuestros datos de contacto:</p>
<address>
<p>Agencia Webeando</br>
C/ del Electrón, 64<br>
08001 BARCELONA
</p>
<p>En LinkedIn: <a href="https://linkedin.com/agenciawebeando/">Webeando</a>.</p>
</address> ...El texto preformateado
El texto preformateado, insertado con el elemento <pre>, muestra texto que se formateará con convenciones tipográficas comunes, y no con elementos HTML. Esto significa que se conservarán los espacios, como las tabulaciones, y el texto se mostrará por lo común en una fuente monoespaciada, similar a Courier.
He aquí un ejemplo sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>Estos son nuestros datos:</p>
<pre>
Enero Febrero Marzo
123 134 154
245 276 287
190 213 267
</pre>
<p>Donec ullamcorper nulla non metus auctor...Los enlaces
1. La estructura de los enlaces
Por su propia naturaleza, la Web está formada por enlaces de hipertexto: las páginas están enlazadas entre sí mediante estos enlaces. La inserción de un enlace se realiza con el elemento <a> (de anchor en inglés). Este elemento tiene varios atributos:
-
href es esencial: permite indicar la URL de destino.
-
hreflang puede especificar el idioma del recurso enlazado. Los valores pueden ser, por ejemplo, en, it, es...
-
rel se utiliza para indicar el tipo de relación del vínculo que se está estableciendo.
-
target determina en qué contexto se abrirá el enlace dentro del navegador.
Esta es la estructura mínima de un enlace:
<a href="inscripcion.html">Regístrese</a> Estos son los detalles de esta estructura:
-
La etiqueta de apertura <a>.
-
La referencia del enlace, href, que en este caso es una página del mismo sitio, inscripcion.html.
-
El contenido del enlace es Regístrese. Este es el texto en el que los visitantes deberán hacer clic para activar el enlace.
-
La etiqueta de cierre </a>.
2. Los enlaces hacia páginas
Los enlaces insertados pueden apuntar a varios destinos posibles. Pueden dirigir a una página dentro del mismo sitio o a una página externa. En el primer caso, se puede usar una URL relativa; en el segundo, será necesaria una URL absoluta.
Una URL relativa se define en relación con la página que contiene el enlace. Veamos algunos ejemplos:
-
La página de destino está en la misma carpeta que la página que contiene el enlace:
<a href="inscripcion.html">Regístrese</a> -
La página de destino se encuentra en una subcarpeta de la página que contiene el enlace:
<a href="usuarios/inscripcion.html">Regístrese</a> -
La página de destino se encuentra en una carpeta superior a la de la página con el enlace:
<a href=".. /inscripcion.html">Regístrese</a> Una URL absoluta incluye la dirección completa de la página:
<a href="http://www.el-sitio.es/viajes/venecia.html">Venecia</a> 3. Los enlaces internos
En una página web larga, con mucho contenido textual, puede resultar muy útil ofrecer enlaces internos que permitan al visitante desplazarse cómodamente...
Las líneas horizontales
El elemento <hr> no contiene texto, sino que muestra solo una línea horizontal que separa las diferentes partes de un contenido.
He aquí un ejemplo sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<h1>Magna Etiam Parturient Inceptos</h1>
<p>Maecenas faucibus mollis...</p>
<hr>
<p>Sed posuere consectetur est at lobortis...</p>
</body>
</html> Y esta es la pantalla que se obtiene:
