Profesor Frink

Seguimos haciendo una primera aproximación de los elementos que podemos encontrar en una pagina web, En el artículo anterior terminamos de ver los denominados marcadores de párrafo y en este artículo empezaremos aproximándonos a los llamados elementos de línea o también marcadores para carácter, Se trata del nivel más en detalle de marcador que podemos utilizar en HTML ya que puede llegar a ser a nivel de un único carácter individual.

A partir de este articulo lo que intentaremos hacer es ver lo básico del formateo dentro de una línea, En la imagen podemos apreciar las etiquetas que podríamos utilizar para lograr los diferentes tipos de formateo dentro de una línea.

Terminamos esta aproximación a las que podemos denominar etiquetas de formateo de bloques viendo la etiqueta <div>, Las divisiones que son un formateo de bloque de alto nivel, Usualmente reservados para grupos de párrafos relacionados entre si, Paginas enteras,  aunque a veces también podamos usarlos para un único párrafo.

Esta etiqueta nos provee con una solución simple para poder formatear secciones largas de un documento, por ejemplo imagine que necesita una sección particular de un documento rodeada por un borde, Primero puede definir un estilo apropiado con la etiqueta <style> y dentro definiendo los atributos del borde con sus características que vemos dentro de las llaves en la imagen y luego aplicando la etiqueta <div> precedida de “class” (ya que como vimos anteriormente esto es una clase) antes de que comience el párrafo con la etiqueta <p> y cerrando luego la etiqueta </div>, Antes de la etiqueta de cierre del párrafo elegido.

Podemos ver efectivamente en el ejemplo que tenemos 2 párrafos, Uno con las características por defecto del navegador y otro que va aparecer rodeado por un borde del estilo aplicado.

Otra de estas etiquetas bloque utilizadas para los párrafos es la denominada de texto pre formateado; <pre>, Porque puede ser que en ocasiones queramos manejar un formato de texto en el documento que se mantenga exactamente el mismo que ya esta presente en ese texto particular que queremos añadir dentro de un documento HTML.

En general se va tratar de texto que vamos a introducir a un documento normalmente mediante sistema de copiar y pegar y lo que queremos es que se mantenga ese mismo formateado, Literalmente lo que logra es que no se utilice las características propias de HTML sino mantener las ya presentes en el propio archivo que pegamos como podemos apreciar en las imágenes del ejemplo.

Cuarto elemento que veremos para aplicar a bloques son las listas, En HTML se especifican 3 tipos diferentes de listas que son: Listas ordenadas (<ol>), Listas no ordenadas (ul) y a las listas con definición. Tanto la lista ordenada como la desordenada toman un elemento para los ítems para los elementos <li>, Mientras que la lista definida toma los ítems de <dt> y <dd>, Una para el ítem de la definición y otra para la propia definición  como podemos ver en el ejemplo de las imágenes.

Debido a que existen una gran cantidad de personalizaciones para cada uno de estos tipos de listas podemos crear muchos sub estilos de cada uno de los tipos, por ejemplo podríamos hacer que una lista ordenada en vez de aparecer ordenada por números aparezca ordenada por letras entre otros.

En anteriores versiones de HTML se podía en la propia etiqueta de las listas especificar distintas opciones de este tipo, Pero en la actualidad el estricto HTML y XHTML obligan que las opciones de la lista deban estar todas contenidas dentro de estilos.

El segundo de los marcadores para párrafos que veremos serán las cabeceras que como podemos ver en la imagen en la última versión de HTML admite hasta 6 niveles que van marcados desde <h1> hasta <h6> y cada tipo tiene ya unos atributos especificados en cuanto al tamaño, usualmente utiliza letra negrita y una serie de características que diferencian unas cabeceras de otras, En la imagen podemos ver los distintos tipos de las cabeceras así como el texto plano que aparecen en los párrafos, se trata desde luego de los niveles predefinidos por tanto hay que tener en cuenta que podemos personalizar una cabecera con algún estilo previamente creado como atributos de centrado color entre otros.

El tercero de los marcadores para párrafos que veremos será la etiqueta <blockquote> la cual es usada para delimitar que es usada para delimitar bloques de texto acotado, en otras palabras lo que hace la etiqueta es sangrar el párrafo para destacarlo u diferenciarlo respecto del resto del documento, En la imagen la primera frase que aparece corrida a la izquierda esta antes de utilizar la etiqueta y luego aparece el resto con sangrado a la derecha.