Ediciones ENI Editorial | líder en informática
Los contenedores de texto
Utilizar correctamente los contenedores de texto
Después de haber visto los contenedores de estructura, vamos a tratar los contenedores de texto. De nuevo, debemos utilizar los contenedores semánticos para insertar tipos de texto concretos en nuestras páginas web.
Observe que todos estos elementos son de tipo block. Esto implica que se muestren en toda la longitud disponible en su contenedor padre, que puede ser el elemento <body> o cualquier otro contenedor de tipo block. Por lo tanto, el contenedor siguiente, sea cual sea, se mostrará en una nueva línea, en un nuevo bloque.
Debe saber también que para estos elementos en bloque los navegadores insertan un espacio antes y después. Puede modificar estos espacios con reglas CSS.
Los atributos de idioma y dirección del texto
En cualquier página web, puede perfectamente especificar el idioma utilizado en un contenedor de texto con el atributo lang. Hemos visto su utilización en el elemento <html> para indicar el idioma utilizado en la totalidad de la página. Pero puede perfectamente hacer una excepción para un contenedor de texto concreto.
No habría ningún problema en tener esta sintaxis en una parte específica de un párrafo en español, donde el idioma es el italiano:
<p>Me ha dicho <span lang="it">Ciao a tutti! Come state?</span>
cuando nos hemos visto.</p> Además del idioma, puede especificar la dirección de escritura con el atributo dir. Este atributo utiliza estos tres valores:
-
ltr: que significa left to right, escritura de izquierda a derecha, como el español o el italiano por ejemplo.
-
rtl: que significa right to left, escritura de derecha a izquierda, como el árabe por ejemplo.
-
auto: en este caso, es el agente de usuario el que detecta la dirección de escritura.
A continuación se muestra un ejemplo con un párrafo en árabe:
<p lang="ar" dir="rtl">صباح الخير جميعا ! كيف حالكم </p> Los títulos
Los elementos de título permiten insertar seis niveles de título jerárquico en las páginas. Los elementos que se deben utilizar son <h1> a <h6>. Estos títulos tienen un fuerte valor semántico. El nivel de título <h1> es el más importante en la página y el nivel <h6> es el menos importante.
El W3C aconseja utilizarlos en orden descendiente: en primer lugar, debe utilizar un título de nivel 1, después un título de nivel 2 y así sucesivamente. Se desaconseja omitir un nivel, como pasar de <h1> a <h3>, omitiendo <h2>.
Observe que perfectamente puede utilizar varias veces el mismo nivel de título en contenedores diferentes. Podemos tener el elemento <section> con un título <h1>, que contiene varios elementos <article>, cada uno con un título <h2>. Por otro lado, en un elemento <aside>, por ejemplo, podemos utilizar otros elementos <h1> y <h2>.
Los títulos <hx> también tienen una gran utilidad para la indexación natural de sus páginas web: SEO (Search Engine Optimization). Por lo tanto, debe pensar en utilizar las palabras susceptibles de ser utilizadas por los internautas durante sus búsquedas en Internet.
Último punto, todos los títulos <hx> se muestran en negrita en los navegadores, con el tamaño...
Los párrafos
El elemento <p> permite insertar el texto actual en los párrafos. Como para todos los escritos, cada párrafo podrá contener una idea, un concepto. En cada párrafo, puede resaltar una o varias palabras con elementos de formato semántico.
A continuación se muestran las propiedades de visualización por defecto de los párrafos:
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
} A continuación se muestra 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> A continuación se muestra la visualización obtenida:
Las citas
Los bloques de cita permiten mostrar un texto extraído de un origen externo. Se utiliza el elemento <blockquote>. El elemento <blockquote> sirve de contenedor a otros elementos que pueden ser de cualquier tipo: título, párrafo, imagen, etc.
A continuación se muestran las propiedades de visualización por defecto de las citas:
blockquote {
display : block ;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
} A continuación se muestra un sencillo ejemplo:
<!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...Las listas
1. Los diferentes tipos de lista
Las listas permiten insertar enumeraciones semánticas en sus páginas web. Tiene tres tipos de listas a su disposición: las listas no ordenadas (conocidas más comúnmente como listas de viñetas), las listas ordenadas (listas numeradas) y las listas de definiciones.
Observe el uso tan extendido de las listas para crear barras de navegación. Es un uso perfectamente validado, porque estas barras son enumeraciones: listas de enlaces.
2. Las listas no ordenadas
Las listas no ordenadas (unordered list en inglés) permiten listar, enumerar los datos que se mostrarán con una viñeta delante de cada elemento de la lista. Se utiliza el elemento <ul> para definir la lista. A continuación, cada elemento, cada ítem de la lista, se ubicará en un elemento <li>.
A continuación se muestran las propiedades de visualización por defecto de las listas no ordenadas:
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
} A continuación se muestra un sencillo ejemplo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<ul>
<li>Manzanas</li> ...Las direcciones
No será raro que necesite insertar direcciones de todo tipo en sus páginas web. Para esto, debe utilizar el elemento <address>, que se dedica a este uso. Puede ubicar en él direcciones postales, de e-mail, etc. En este elemento, puede anidar otros contenedores que quiera.
A continuación se muestran las propiedades de visualización por defecto de las direcciones:
address {
display: block;
font-style: italic;
} A continuación se muestra un sencillo ejemplo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>A continuación se muestra nuestra dirección:</p>
<address>
<p>Agencia Be Web</br>
Calle Tim Berners Lee, nº 11<br>
44000 NANTES</p>
<p>En LinkedIn: <a href="https://linkedin.com/beweb/"> ...El texto preformateado
El texto preformateado, insertado con el elemento <pre>, permite insertar texto, que se formateará con las convenciones tipográficas usuales y no con elementos HTML. Esto quiere decir que los espacios se conservarán, como las marcas de tabulación, y que el texto se mostrará, normalmente, con una fuente de letra con espacio constante, de tipo Courier.
A continuación se muestran las propiedades de visualización por defecto del texto preformateado:
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
} A continuación se muestra un sencillo ejemplo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>A continuación se muestran nuestros datos:</p>
<pre>
Enero Febrero Marzo
123 134 154
...Las líneas horizontales
Este elemento <hr> no contiene texto y solo muestra una línea horizontal que permite separar diferentes partes de un contenido.
A continuación se muestran las propiedades de visualización por defecto de las líneas horizontales:
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
} A continuación se muestra un sencillo ejemplo:
<!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 interdum. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum
sociis natoque penatibus y magnis dis parturient montes, nascetur
ridiculus mus. Duis mollis, es no commodo luctus, nisi erat ...
