7.5.10

Estructurar un texto


Para estructurar un texto el procedimiento más sencillo consiste en separalo por párrafos. Además, HTML permite incluir títulos que delimitan cada una de las secciones.


Párrafos

Una de las etiquetas más utilizadas de HTML es la etiqueta <p>, que permite definir los párrafos que forman el texto de una página. Para delimitar el texto de un párrafo, se encierra ese texto con la etiqueta <p>, como muestra el siguiente ejemplo:

<p>Este es el texto que forma el primer párrafo de una entrada de blogger. Los párrafos pueden ocupar varias líneas y el navegador se encarga de ajustar su longitud al tamaño de la ventana.</p>

<p>El segundo párrafo de la misma entrada también se define encerrando su texto con la etiqueta p. El navegador también se encarga de separar automáticamente cada párrafo.</p>

<p>El tercer párrafo y todos los demás se definen igualmente, recordando que este procedimiento se utiliza cuando se redacta el texto en Edición HTML.</p>

El ejemplo anterior se visualiza de la siguiente manera en cualquier navegador:

Este es el texto que forma el primer párrafo de una entrada de blogger. Los párrafos pueden ocupar varias líneas y el navegador se encarga de ajustar su longitud al tamaño de la ventana.

El segundo párrafo de la misma entrada también se define encerrando su texto con la etiqueta p. El navegador también se encarga de separar automáticamente cada párrafo.

El tercer párrafo y todos los demás se definen igualmente, recordando que este procedimiento se utiliza cuando se redacta el texto en Edición HTML.



Definición formal de la etiqueta <p>

<p> Párrafos
Atributos comunes básicos, ¡18n y eventos
Atributos específicos -
Tipo de elemento Bloque
Descripción Delimita el contenido de un párrafo de texto

Los párrafos creados con HTML son elementos de bloque, por lo que siempre ocupan toda la anchura de la ventana del navegador.


Secciones

Según las necesidades se pueden crear entradas, mediante Edición HTML, con una estructura más compleja que las que se pueden crear solamente con párrafos. Es el caso de las entradas (posts) divididas en diferentes secciones jerárquicas.

Los títulos de sección se utilizan para delimitar el comienzo de cada sección de la entrada. HTML permite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una entrada puede definir cualquier número de secciones, sólo puede incluir seis niveles jerárquicos.

Las etiquetas que definen los títulos de sección son <h1>, <h2>, <h3>, <h4>, <h5>, y <h6>. La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares. La importancia del resto de etiquetas es descendente, de forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes de la página.



Definición formal de la etiqueta <h1>

<h1> Sección o título de nivel 1
Atributos comunes básicos, ¡18n y eventos
Atributos específicos -
Tipo de elemento Bloque
Descripción Define los títulos de las secciones de mayor importancia de la página

Al igual que la etiqueta <p>, las etiquetas de título de sección son elementos de bloque y no tienen atributos específicos. Así las etiquetas <h1>, ..., <h6;> definen títulos de sección, no secciones completas. Por este motivo, no es necesario encerrar los contenidos de una sección con su etiqueta correspondiente. Solamente se deben encerrar con las etiquetas <h1>, ..., <h6> los títulos de cada sección.

El siguiente ejemplo muestra el uso de las etiquetas de título de sección:

<h1>Título</h1>

<p>Párrafo de introducción...</p>

<h3>Primera sub-sección</h3>

<p>Párrafo de contenido...</p>

<h3>Otra subsección</h3>

<p>Más párrafos de contenido...</p>

Los navegadores mostrarán el anterior ejemplo así:

Título

Párrafo de introducción...

Primera sub-sección

Párrafo de contenido...

Otra subsección

Más párrafos de contenido...

Los navegadores asignan de forma automática el tamaño del título de cada sección en función de su importancia. Así, los títulos de sección <h1> se muestran con el tamaño de letra más grande, ya que son el nivel jerárquico superior, mientras que los títulos de sección <h6> se visualizan con un tamaño de letra muy pequeño, adecuado para el nivel jerárquico de menor importancia.

En el caso de Blogger el aspecto de algunos títulos de sección se aplican por defecto, dependiendo de la estructura de la plantilla. Por ejemplo en la plantilla Mínima, el tamaño por defecto con el que los navegadores muestran los títulos que se quieren mostrar en las entradas, es el siguiente:

Título de nivel 1

TÍTULO DE NIVEL 2

Título de nivel 3

Título de nivel 4

Título de nivel 5

Título de nivel 6

Como se puede observar el título de nivel 2 no corresponde al tamaño lógico en el nivel descendente, además las letras son mayúsculas. En el título de nivel 3 el color es el mismo de los títulos de las entradas del blog.


Solución

  • Identificando en la plantilla las líneas de código que están asignando el tamaño y el color, que no son los que se quieren aplicar con las etiquetas <h1>, ..., <h6>, y hacer las modificaciones correspondientes en Diseño >> Fuentes y colores.


  • Si lo anterior no es posible se reemplazan las etiquetas del nivel afectado, que en este caso son <h2> y <h3>, por otras, así:
<strong><span style="font-size:170%;">Título de nivel 2</span></strong>

<strong><h3><font color="#ffffff">Título de nivel 3</font></h3></strong>

Que se verán así:

Título de nivel 2

Título de nivel 3

Explicación

  • La etiqueta <strong> está resaltando el título.


  • La etiqueta <span style="font-size:170%;"> aumenta el tamaño de los caracteres del título, tomando como base el 100%, que es el tamaño por defecto de la fuente.


  • La etiqueta <font color="#ffffff"> está asignando un color al título.
Evidentemente, el aspecto que los navegadores aplican por defecto a los títulos de sección se puede modificar utilizando las hojas de estilos de CSS.
Índice Formatear
Formato de párrafos HTML
Estructurar un texto
Marcado básico de texto
Texto preformateado
Espacios en blanco y saltos de línea
Marcado avanzado de texto
Marcado genérico de texto
Codificación de caracteres

0 comentarios :

▼▲ Ocultar / Mostrar comentarios

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.