Estilos de documentos HTML

Contenidos generados en el Programa Integración de Tecnologías a la Docencia<h1></h1>

  • David Herney Bernal García - Programa Integración de Tecnologías a la Docencia
  • Leonardo Pérez Marulanda - Programa Integración de Tecnologías a la Docencia

El Programa Integración de Tecnologías a la Docencia en la construcción de su Banco de Objetos para el Aprendizaje (BOA), identificó la necesidad de generar plantillas con diferentes maquetaciones y combinación de colores para ofrecer a los usuarios variedad en las opciones de visualización de los contenidos. Por tal motivo, se decidió crear un estándar de diferentes etiquetas html y clases de estilo CSS[1] para estructurar los documentos html generados por el personal del Programa en su labor diaria de capacitar a los usuarios en la utilización efectiva de las tecnologías de la información y la comunicación en los procesos de docencia y aprendizaje. Este documento tiene como finalidad dar a conocer el modo de uso de tales etiquetas html y clases definidas e indicar la forma en la que se debe estructurar el contenido.


Consideraciones generales <h2></h2>

  • Los nombres de los autores del documento se deben encapsular en un <div></div> que contenga la clase pit_bloque_autores, se deben listar mediante una lista no ordenada y la información referida será el nombre completo y programa o dependencia a la que pertenecen, ambos datos en la misma línea separados por un guión.
  • Todo el cuerpo del documento debe ir en un <div></div> marcado con la clase pit_body para poder tener control de márgenes y otros atributos, al igual que cada párrafo debe encapsularse en una etiqueta de texto <p></p>.
  • Para la jerarquía de los títulos se utilizarán las etiquetas <h1></h1> para el título del documento, <h2></h2> para los subtítulos, <h3></h3> en los títulos de tercer nivel y <h4></h4> para los títulos de último nivel.
  • En los contenidos generados para publicarse en la web con frecuencia se necesita la inserción de imágenes, fotografías, tablas y distintos objetos multimedia, los cuales se presentan generalmente entre párrafos y con un alineación especial. Para insertar este tipo de objetos y asignarles apropiadamente un estilo determinado, se hará uso de la etiqueta <div></div> a la que se le asigna la clase pit_anexo_interno.
  • Para insertar términos textuales, tales como nombres, extranjerismos, entre otros, se utilizará la etiqueta html <strong></strong> encargada de darle formato a estas expresiones. Asimismo, cuando se hace necesario resaltar algunas líneas o términos de los textos, se hará uso de la etiqueta <em></em>>.

Imágenes y gráficos

Las imágenes y gráficos se deben utilizar para describir, aclarar o ejemplificar lo que dice el texto, contribuyendo así a que el lector tenga una lectura simple y cómoda. Se deben ubicar al final del texto relacionado y nunca antes de hacerse mención de la misma.

Imágenes <h3></h3>

Las imágenes y sus pie de imagen deben estar encapsulados en una etiqueta <div></div> con las clases pit_anexo_interno y pit_bloque_imagen. La imagen se inserta con la etiqueta html <img /> haciendo uso de las propiedades de título y texto alternativo e identificándola, además, con la clase pit_imagen. Para el pie de imagen se utiliza un <div></div> con la clase pit_pie_anexo_interno en el que se hace uso de la etiqueta <span></span> para asignarle al identificador de la imágen la clase pit_etiqueta.

Colombia
Imagen 1. Imagen Escudo de Colombia

Para una mejor comprensión del uso de las etiquetas y clases al momento de insertar una imagen, se mostrará el código html empleado para Imagen 1.


<div class="pit_anexo_interno pit_bloque_imagen">
    <img src="http://aprendeenlinea.udea.edu.co/lms/moodle/theme/standard/pix/degradados/izq.jpg" class="pit_imagen" title="cabezote plataforma Aprende en Línea" alt="Plataforma Aprende en línea" />
    <div class="pit_pie_anexo_interno"><span class="pit_etiqueta">Imagen 1.</span> Imagen del cabezote de la plataforma Aprende en Línea</div>
</div>
    

Durante el desarrollo de contenidos, habrá ocasiones en las que será necesario insertar imágenes que van en línea con el texto, generalmente son imágenes pequeñas y las llamaremos íconos. Para su manejo se definió la clase pit_icono, la cual se asigna utilizando un <span></span> que contiene la etiqueta <img /> mediante la cual se inserta la imagen. Ejemplos de íconos son las imágenes utilizadas en moodle, por ejemplo, el de adicionar un archivo es Adicionar archivo y el de ayuda es Ayuda, insertados como se muestra a continuación:


<span class="pit_icono"><img src="http://iempvirtual.udem.edu.co/theme/bootstrapbase/pix/fp/help.png"/></span>

Gráficos

Gráfico de Muestra
Gráfico 1. Ejemplo de un gráfico

Para insertar gráficos se utilizan las mismas etiquetas html empleadas para las imágenes, con la diferencia de que hay un cambio en las clases: los gráficos y sus pie de gráfico se deben encapsular en una etiqueta <div></div> con las clases pit_anexo_interno y pit_bloque_grafico. Igualmente, se utiliza la etiqueta html <img /> con las propiedades de título y texto alternativo e identificándola además con la clase pit_grafico. En el pie de gráfico se utiliza un <div></div> con la clase pit_pie_anexo_interno en el que se hace uso de la etiqueta <span></span> para asignarle al identificador del gráfico la clase pit_etiqueta.

Tablas

En el desarrollo de contenidos web, las tablas son de gran utilidad tanto para presentar datos numéricos como para organizar y disponer la información textual y visual de una u otra manera determinada. En los contenidos generados en el Programa Integración de Tecnologías a la Docencia, las tablas que contienen datos deben separarse del texto desarrollado y encapsularse en una etiqueta <div></div> en la que se asignan las clases pit_anexo_interno y pit_bloque_tabla. Las diferentes etiquetas html utilizadas en una tabla son las definidas por el mismo lenguaje, así:

  • <table></table> para definir la tabla, en esta se debe asignar la clase pit_tabla_datos y definir las propiedades de título y texto alternativo.
  • <thead></thead> para definir el encabezado de la tabla.
  • <th></th> para definir cada una de las celdas de encabezado, esta etiqueta le da una fuente diferente al contenido de la celda con respecto al de las celdas del cuerpo de la tabla.
  • <tfoot></tfoot> para definir las filas que irán siempre al final de la tabla sin importar la cantidad de filas agregadas al cuerpo.
  • <tbody></tbody> para definir el cuerpo de la tabla.
  • <tr></tr> define una fila de la tabla.
  • <td></td> define una celda de la fila, por tanto debe estar encapsulada por la etiqueta <tr></tr>.

El pie de tabla se pone después de cerrar la etiqueta html de la tabla en un <div></div> con la clase pit_pie_anexo_interno en el que se hace uso de la etiqueta <span></span> para asignarle al identificador de la tabla la clase pit_etiqueta.

Se han definido, además, dos clases CSS para poder dar a las celdas un formato determinado cuando estas contengan datos muy específicos; tales clases son pit_celda_numero para las celdas que contienen datos numéricos y pit_celda_total para las celdas que contengan cifras totales. Estas clases deben asignarse a nivel de celda en la etiqueta <td></td>. Si se quiere asignar al contenido de una celda alguna clase diferente a las mencionadas, se utiliza un <span></span> que encapsule el contenido y no se hace a través de la etiqueta <td></td> que define la celda.


Encabezados de la tablaFila al final de la tabla definida con la etiqueta <tfoot></tfoot>
columna 1 Uno 1
Dos 2
Tres 3
Veinte 20
Total 26
Tabla 1. Ejemplo de una tabla

El código html utilizado para insertar la Tabla 1 es el siguiente:


<div class="pit_anexo_interno pit_bloque_tabla">
    <table width="300" cellpadding="0" class="pit_tabla_datos" title="Tabla ejemplo" alt="Tabla ejemplo" />
        <thead>
            <th colspan="4">Encabezados de la tabla</th>
        </thead>
        <tfoot>
            <td colspan="4">Fila al final de la tabla definida con la etiqueta <strong>&lt;tfoot&gt;&lt;/tfoot&gt;</strong></td>
        </tfoot>
        <tbody>
            <tr>
                <th rowspan="4">columna 1</th>
                <td>Uno</td>
                <td class="pit_celda_numero">1</td>
            </tr> 
            <tr>
                <td>Dos</td> 
                <td class="pit_celda_numero">2</td> 
            </tr>
            <tr>
                <td>Tres</td> 
                <td class="pit_celda_numero">3</td> 
            </tr>
            <tr>
                <td>Veinte</td> 
                <td class="pit_celda_numero">20</td> 
            </tr>
            <tr>
                <td colspan="2"><em>Total<em></td>
                <td class="pit_celda_total">26</td>
            </tr>
        </tbody>
    </table>
<div class="pit_pie_anexo_interno"><span class="pit_etiqueta">Tabla 1.</span> Ejemplo de una tabla</div>
</div>
    

Listas

Las listas se utilizan para presentar información de manera ordenada y cómoda al lector. Antes de cada lista, debe desarrollarse en el texto una introducción en la que se contextualice sobre la información que se va a presentar.

Como ejemplo de una lista ordenada, se enumerarán los temas tratados en esta guía, en los cuales se utilizó la etiqueta <h2></h2> para marcarlos como título de segundo nivel:

  1. Consideraciones generales
  2. Imágenes y gráficos
  3. Tablas
  4. Listas
  5. Citas o referencias bibliográficas
  6. Notas al pie de página
  7. Definiciones
  8. Notas
  9. Otras clases a tener en cuenta

El código html empleado para la edición de lista es:

<ol>
    <li>Consideraciones generales</li>
    <li>Imágenes y gráficos</li>
    <li>Tablas</li>
    <li>Listas</li>
    <li>Citas o referencias bibliográficas</li>
    <li>Notas al pie de página</li>
    <li>Definiciones</li>
    <li>Notas</li>
    <li>Otras clases a tener en cuenta</li>
</ol> 

Para insertar listas, se utilizan las etiquetas <ol></ol> para definir una lista ordenada y <ul></ul> para definir una lista no ordenada, en ambos tipos de lista se utiliza la etiqueta <li></li> para insertar cada ítem.

Citas o referencias bibliográficas

En el desarrollo de documentos para publicación, se da con frecuencia la necesidad de insertar citas o referencias bibliográficas. En el Programa Integración de Tecnologías a la Docencia, para el desarrollo de contenidos, se han adoptado las etiquetas que el lenguaje html tiene definidas para este fin. Se hará uso de la etiqueta <q></q> cuando el texto citado tenga menos de 40 palabras, este tipo de cita se pone en línea con el texto del párrafo que se está desarrollando. Cuando la cita tiene 40 palabras o más debe ir aparte del párrafo y encapsulada mediante la etiqueta <blockquote></blockquote>.

Un ejemplo de cita corta es la definición de cita que se presenta en el documento Citas Bibliográficas enviado a monografías.com por Rossana Silva: Citar es dar crédito de la autoría de las ideas y hallazgos que pertenecen a otros. La cita de trabajos previos y relacionados con el propio contribuye a clarificar lo original y novedoso del aporte personal (Silva, 2006). Para dar un ejemplo de una cita de más de 40 palabras vamos a mencionar el concepto de átomo dado por Demócrito:

Los átomos son los cuerpos más pequeños posibles y carecen de cualidades; en cambio, el vacío es cierto lugar en el que todos estos cuerpos, durante toda la eternidad, se mueven arriba y abajo, o se entrelazan de algún modo entre sí, o chocan y se repelen los unos a los otros, diferenciándose y asemejándose de nuevo en esas combinaciones para formar, de este modo, todos los […] compuestos sólidos y nuestros propios cuerpos, así como sus diversos dos y sensaciones (Demócrito).

El Programa de Integración de Tecnologías a la Docencia presentará las citas dentro del texto del contenido, utilizando el apellido del autor o la página web y la fecha de publicación, o en caso de desconocimiento, la fecha de la consulta. Siempre se le dará prioridad al nombre del autor y no al de la página web, ésta se utilizará cuando se desconozca el primero.

Se usarán 2 diferentes formas de citar dentro de un texto:

1. Mencionando el autor o la fuente bibliográfica dentro del texto, junto a la citación y el año de publicación o consulta, esto último entre paréntesis. Un ejemplo claro lo podemos encontrar en el documento de la Universidad de Piura sobre el Sistema Harvard-APA de citas y referencias bibliográficas (Universidad de Piura, 2012):

Williams (1995) sostuvo que al comprar los desórdenes de la personalidad se debe tener en cuenta la edad del paciente.

2. Haciendo la citación textual y poniendo al final entre paréntesis el autor o página web, seguido del año. Por ejemplo:

Al comprar los desórdenes de la personalidad se debe tener en cuanta la edad del paciente (William, 1995).

Cuando un autor o página web tiene más de una publicación en el mismo año, se acompaña el año de la publicación con una letra minúscula. Por ejemplo:

En dos estudios recientes (Harding, 1986a; 1986b) se sugirió que...

Para hacer una citación de varios autores, se escribe el apellido del primer autor más la locución latina et ál y el año de publicación o citación. Utilizamos como ejemplo el caso presentado en la el texto de monografias.com (Silva, 2006):

El programa de evaluación de la reforma universitaria en Brasil significó... (Belloni et ál, 1984).

Las referencias bibliográficas al final del documento se harán de acuerdo a las normas establecidas por ICONTEC (1998)

A lo largo de este documento se presentan varias citaciones de referencias. Estas citaciones llevan un ancla en el nombre del autor y el año que los lleva a las referencias en la parte baja del texto, e igualmente, en el desarrollo de las referencias, hay anclas que llevan a las citaciones dentro del texto. En el desarrollo el nombre de la obra va entre la etiqueta html <em></em>. Veamos un ejemplo con una referencia utilizada en este documento, donde se ven los códigos html para generar la llamada y para el bloque que contiene el desarrollo de la referencia.

  • Generando la llamada:
    <q>Citar es dar crédito [...] del aporte personal.</q><a class="pit_ancla" name="referencia_1" href="#referencia_1a">(Silva, 2006)</a>.
  • Bloque que contiene el desarrollo de las referencias:
    <div class="pit_referencias">
    <ul>
    <li>(<a class="pit_ancla" name="referencia_1a" href="#referencia_1">Silva, 2006</a>). Silva, Susana. <em>Citas bibliográficas</em> [En línea]. <a href="http://www.monografias.com/trabajos38/citas-bibliograficas/citas-bibliograficas.shtml" target="_blank" class="pit_enlace">http://www.monografias.com/trabajos38/citas-bibliograficas/citas-bibliograficas.shtml</a> [Citado en 31 de Mayo de 2011]</li>
    .
    .
    .
    </ul>
    </div>
        

Notas al pie de página

En el documento de la Escuela de Ciencias Humanas de la Universidad del Rosario (2002) se indica que:

Las notas de pie de página constituyen la manera más común de incluir anotaciones al texto. Incluyen información adicional que pueda ser de interés para el lector y que no se pueda insertar de manera fluida en el texto corriente; [...] información que no pertenece a la línea general del argumento pero que puede complementarlo, contrastarlo o mejorar el entendimiento.

En los contenidos generados en el Programa Integración de Tecnologías a la Docencia, las notas al pie de página serán numeradas de manera consecutiva de inicio a fin del documento y se hará uso de anclas para generar un enlace que lleve al lector desde la llamada hasta el desarrollo de la nota al pie y viceversa.

Los textos de las notas al pie de página deben estar dentro de una etiqueta <div></div> a la que se le asigna la clase pit_nota_al_pie. Dichos textos y sus numerales se deben introducir como párrafo utilizando la etiqueta <p></p> con el fin de asignar el ancla que enlaza la respectiva llamada únicamente sobre el número de la nota. La estructura de la nota debe comenzar con el número que la identifica seguido de un punto, posteriomente un espacio y después, el desarrollo del texto que debe finalizar con un punto.

En este mismo documento podemos ver un ejemplo del uso de una nota al pie para la sigla CSS, la cual se hizo para darle al lector información adicional sobre esta misma. En el manual de estilos del programa se indica que cuando se usan palabras o frases en otros idiomas, éstas se deben distinguir del texto en español. Esto pasa con con la frase Cascading Style Sheets, que va entre la etiqueta html <em></em>. El siguiente es el código html utilizado para generar la llamada y el código utilizado para insertar el bloque que contiene el desarrollo de la nota al pie presente al final del documento:

  • Generando la llamada:
    <q>...estándar de diferentes etiquetas html y clases de estilo CSS<a class="pit_ancla" name="nota_pie_1" href="#nota_pie_1a"><sup>[1]</sup></a>
  • Bloque que contiene el desarrollo de las notas al pie:
    <div class="pit_nota_al_pie">
    <hr/>
    <p><a class="pit_ancla" name="nota_pie_1a" href="#nota_pie_1">1</a>. Siglas en inglés de <em>Cascading Style Sheets</em> (Hojas de Estilo en Cascada)</p>
    .
    .
    .
    <hr/>
    </div>
        

Documentos electrónicos

Responsabilidad principal (autor). Título (de la información o del documento). [Tipo de medio o soporte físico]. <URL>. [Citado en día de mes de año]

Ejemplo: Organización de las Naciones Unidas-ONU. Internet, el instrumento esencial de la diplomacia del siglo XXI [en línea].<http://www.un.org/spanish/Depts/dpi/seminario/pdf/basesdedatos.pdf> [citado en 13 de julio de 2010]

Los tipos de medio o soporte fìsico pueden ser: en línea, CD-ROM, disco, etc; asimismo, puede especificarse el tipo de publicación, por ej., boletín informativo en línea, base de datos en CD-ROM, etc. Notemos también que la dirección de referencia tiene enlace a la página web.

Libros y folletos

Apellido, nombre del autor o institucional. Título. Subtítulo. Responsabilidad subordinada (opcional). Número de la edición, excepto la primera. Lugar de publicación, nombre del editor, año de publicación. Paginación número de los volúmenes y tomos (si se tratan de obras con más de un volumen, se debe indicar el número del volumen sin mencionar la paginación).ISBN (opcional)

Ejemplo: Cohen, David. El desarrollo de la imaginación: los mundos privados de la infancia. Barcelona: Ediciones Paidos, 1993. 120p. (Biblioteca cognición y desarrollo humano; no. 26) ISBN 847-50-9854-1

Si son más de tres autores, solo debe colocarse uno o dos de ellos, seguidos de la expresión latina et ál.

Según esta norma, el uso de las mayúsculas queda sujeto al uso en cada de idioma; por esta razón, utilizaremos mayúscula inicial en los nombres de los autores, excepto cuando se trate de acrónimos o abreviaturas, como en el caso de ICONTEC.

Definiciones

Las definiciones generalmente son sentencias cortas en las que se declaran las propiedades que identifican completamente lo que se está definiendo, como dice en Wikipedia, una definición es una proposición que trata de exponer de manera unívoca y con precisión la comprensión de un concepto o término (Wikipedia, 2011a).

El lenguaje html brinda la posibilidad de diferenciar las definiciones del resto del contenido de un documento haciendo uso de las listas de definiciones. Para insertarlas se utilizan las etiquetas <dl></dl> para crear la lista de definición, <dt></dt> para crear el ítem a definir y <dd></dd> para describir la definición del ítem. Como ejemplo se listarán las definiciones de longitud, masa y tiempo tomadas de Wikipedia:

Longitud
La longitud es la distancia que se encuentra entre dos puntos. La longitud de un objeto es la distancia entre sus extremos, su extensión lineal medida de principio a fin. En el lenguaje común se acostumbra diferenciar altura (cuando se refiere a una longitud vertical), y anchura (cuando se habla de una longitud horizontal). En física y en ingeniería, la palabra longitud es sinónimo de "distancia", y se acostumbra a utilizar el símbolo l o L para representarla (Wikipedia, 2011b)
Masa
La masa, en física, es la cantidad de materia de un cuerpo. Es una propiedad intrínseca de los cuerpos que determina la medida de la masa inercial y de la masa gravitacional. La unidad utilizada para medir la masa en el Sistema Internacional de Unidades es el kilogramo (kg). Es una cantidad escalar y no debe confundirse con el peso, que es una cantidad vectorial que representa una fuerza (Wikipedia, 2011c).
Tiempo
El tiempo es la magnitud física con la que medimos la duración o separación de acontecimientos sujetos a cambio, de los sistemas sujetos a observación, esto es, el período que transcurre entre el do del sistema cuando éste aparentaba un do X y el instante en el que X registra una variación perceptible para un observador (o aparato de medida). Es la magnitud que permite ordenar los sucesos en secuencias, bleciendo un pasado, un presente y un futuro, y da lugar al principio de causalidad, uno de los axiomas del método científico. El tiempo ha sido frecuentemente concebido como un flujo sucesivo de situaciones atomizadas (Wikipedia, 2011d).

El código html utilizado para insertar esta lista de definiciones se muestra a continuación:

<dl>
<dt>Longitud</dt>
<dd><blockquote>La longitud es la distancia [...] para representarla.<a name="nota_pie_3" href="#nota_pie_3a">Wikipedia, 2011b</a></blockquote></dd>
<dt>Masa</dt>
<dd><blockquote>La masa, en física, es la cantidad [...] una fuerza.<a name="nota_pie_4" href="#nota_pie_4a">Wikipedia, 2011c</a></blockquote></dd>
<dt>Tiempo</dt>
<dd><blockquote>El tiempo es la magnitud física [...] situaciones atomizadas.<a name="nota_pie_5" href="#nota_pie_5a">Wikipedia, 2011d</a></blockquote></dd>
</dl>

Presentación de código fuente

La presentación de código fuente en los contenidos generados en el Pograma Integración de Tecnologías a la Docencia se hará aparte del texto como un anexo, para esto se debe encapsular el código a mostrar en un <div></div> en el que se asigna la clase pit_codigo_anexo, también se hace uso de las etiquetas html <pre></pre> para mantener los saltos de línea y tabulaciones y <code></code> para darle el formato de código. La estructura del código html para mostrar código fuente sería así:


     <div class="pit_codigo_anexo">
        <pre><code>
        .
        .
        .        
            código fuente a mostrar
        .
        .
        .
        </code></pre>
    </div>
    }

Notas

Nota 1. Las notas son textos cortos que se utilizan generalmente con el fin de realizar aclaraciones o comentarios que pueden brindar información adicional al lector, se insertan con una etiqueta <p></p> mediante la cual se les asigna la clase pit_nota, la numeración o nombre de la nota debe identificarse con una etiqueta <span></span> a la que se le asigna la clase pit_etiqueta, utilizada también para la numeración de tablas, imágenes y gráficos.

Existen otras notas que se conocen como "textos especiales" y son los siguientes:

Se utiliza la clase box_connection y es para los Párrafos de acoplamiento.

Nota

Se utiliza la clase box_stressed y es para los Párrafos de énfasis.

Nota

Se utiliza la clase box_examples y es para los Párrafos de ejemplo.

Otras clases a tener en cuenta

  • Para identificar los enlaces, se utilizará la clase pit_enlace y para las anclas, se utilizará la clase pit_ancla.
  • Las fórmulas y ecuaciones se deben tratar mediante la clase pit_ecuacion, si van en línea con el texto se deben encapsular en un <span></span> y si van aparte del texto deben estar dentro de un <div></div> en el que se asigna también la clase pit_bloque_ecuacion.
    A+B=C
  • Siempre que se utilice la palabra Moodle se le debe asignar la clase pit_moodle para darle un trato especial debido a la importancia que tiene en el Programa Integración de Tecnologías a la Docencia.
  • Para la presentación de bibliografías y cibergrafías se hará uso de las clases pit_referencias.

Referencias


1. Siglas en inglés de Cascading Style Sheets (Hojas de Estilo en Cascada)


Last modified: lunes, 27 agosto 2018, 3:53 PM