09. HTML básico para Informes

Este documento será especialmente útil para todos aquellos que no conozcáis HTML, en ningún caso pretende ser una guía exhaustiva del potencial de HTML, sino simplemente una guía rápida de los aspectos fundamentales que se necesitan conocer para poder organizar los controles en los documentos analíticos.

El documento contiene una brevísima introducción a HTML, aspectos fundamentales de HTML en Atlas SBI y una explicación de utilidades HTML en Atlas SBI.

Atlas SBI - HTML del documento analítico

Si queréis encontrar más información sobre HTML podéis hacerlo en cualquiera de los links siguientes:

HTML Básico
HTML viene del acrónimo inglés "HyperText Markup Language" (lenguaje de marcado de hipertexto) y como su nombre indica no es un lenguaje de programación sino un lenguaje de "etiquetado" de texto que permite a los navegadores aplicar un formato o una estructura.

La forma de marcar el texto o el elemento en cuestión es mediante etiquetas. La etiqueta es una palabra clave que siempre va entre los símbolos "<>" y consta de una apertura "<>" y de un cierre </>. Así pues, si queremos indicar que un texto ocupa el espacio de un párrafo, utilizaremos la etiqueta para iniciar el párrafo y para indicar donde acaba el párrafo.

El cuerpo básico de un documento HTML es

<html>
    <head></head>
    <body></body>
</html>

y las principales etiquetas que debemos conocer son:

html: Indica el inicio y fin del documento.
head: Indica el inicio de la cabecera, dentro de esta etiqueta se escribirá el código que identifica el documento.
body: Contiene la información que verá el usuario
form: define la parte del documento que actua como formulario (contiene campos que el usuario puede cumplimentar y enviar)
table: Indica el inicio y fin de una tabla
tr: Etiqueta que define una fila de la tabla
td: Etiqueta contenida en la etiqueta tr que define una columna de una tabla
b: Negritas
i: Cursivas
p: Párrafo
br: Salto de línea
img: Inserta una imagen
a: Inserta un hiper-enlace a otro documento o a otra parte del mismo documento.

Es importante remarcar que podemos anidar etiquetas (unas dentro de otras), pero nunca cruzarlas (que las últimas acaben después que las primeras), es decir, es correcto escribir hola pero no lo es hola pues la negrita se cierra antes que la cursiva.

Opcionalmente, las etiquetas pueden llevar parámetros que permiten personalizar o mejorar el formato del elemento en cuestión. Los parámentros van incluidos dentro de clausula de apertura de la etiqueta, por ejemplo en "<td style ='vertical-align:middle' align='center' >" el parámetro style indica que el control se alinee a la parte superior de la celda y el parámetro align que lo haga en el centro de la misma.

Por último, indicar que el navegador no tendrá en cuenta los espacios o tabuladores que indiquemos, es decir, el poner las etiquetas escaladas y ordenadas es meramente un tema de organización y claridad del documento para el diseñador.

HTML en Atlas SBI
Atlas SBI requiere utilizar HTML para la organización y consecuentemente podremos escribir código HTML en:

Documentos Analíticos
Control Panel (tanto en el panel como en el título)
Control Pestañas

Aunque también podremos utilizarlo en el propio control (pestaña HTML) para configurar algun aspecto puntual (num de píxeles, un contenedor (etiqueta div) especial, e incluso en las celdas de los controles tipo grid para dar formato.
La estructura básica de un Documento Analítico es

<html>
    <head></head>
    <body>
        <form>
             $[Control:SeguimientoProyecto]$
        </form>
    </body>
</html>

De manera que los controles han de estar siempre dentro del las etiquetas de formulario. Y una estructura habitual con una tabla inicial para el panel de selectores con una única fila y una columna, y una segunda tabla con una fila y tres columnas sería:

<html>
    <head>
    </head>
    <body>
        <form>
            <table cellpadding='0' cellspacing='0'>
                <tr>
                    <td>
                        $[Control:Selector]$
                    </td>
                </tr>
            </table>
           <table>
                <tr>
                    <td>
                        $[Control:MKT_01_07]$
                    </td>
                    <td style ='vertical-align:middle' align='center'  >
                        $[Control:MKT_01_08]$
                    </td>
                    <td>
                        $[Control:MKT01_09]$
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Cabe destacar que en la primera tabla se han añadido parámetros para eliminar los espacios que hay entre el marco de las celdas y el contenido de las mismas (<table cellpadding='0' cellspacing='0'>), y en la segunda columna de la segunda tabla se indica que el contenido de la misma se alinee verticalmente por arriba (style ='vertical-align:middle') y horizontalmente por el centro (style ='vertical-align:middle').

Ayuda en el diseño HTML
Atlas SBI incorpora dos utilidades básicas que nos van a ahorrar tiempo en la creación de documentos.

La primera es la creación de plantillas de HTML que pueden ser utilizadas como base para la creación de documentos analíticos (Menú Proyecto > Entorno > Plantillas HTML).

Atlas SBI - Utilidades HTML

La segunda es un validador (Menú Proyecto > Proyecto > Validar) que analizará todo el código HTML de nuestro proyecto y nos indicará los errores que hayamos podido cometer para garantizar que se muestra correctamente en los navegadores.

Atlas SBI - Resultados de la validación