HTML

El lenguaje de marcado HTML es el lenguaje que marca la estructura del contenido que se visualiza en una página web.

Como usuarios de R, es importante conocer algunos de sus fundamentos, especialmente si vamos a realizar visualizaciones interactivas o web scraping.

Guía rápida.

El contenido en HTML se estructura alrededor de los tags de HTML, las cuales son etiquetas que envuelven al contenido para darle ciertas propiedades.

  • Estos tags se abren con el signo <> y se cierran con el signo </>.

Sintaxis:

<tag_html propiedad1 = 'propiedad'>Contenido dentro de una página</tag_htlm>

HTML en el contexto de R.

En el contexto de realizar visualizaciones con R, los tags más comunes son aquellos que modifican el texto que se presenta en leyendas, tooltips, ventanas o pop-ups.

Igualmente, el saber código HTML ayuda a mejorar la estética de los documentos generados en R Markdown. Recordemos que muchos de los símbolos utilizados en RMarkdown (como los asteriscos para marcar negritas o los guiones bajos para las cursivas) son maneras abreviadas de escribir código HTML, y que si escribimos nuestro contenido en Markdown utilizando solamente HTML lo va a mostrar también.

A pesar de ser de gran ayuda, si se desea ahondar más en el estudio del diseño de páginas web es recomendable tomar un curso en forma de HTML, CSS (estilos y estética) y Javascript (interactividad, animaciones), los cuales también se pueden utilizar en conjunto con R y RStudio para generar visualizaciones de datos más poderosas.

Igualmente, muchas librerías de R poseen herramientas para desarrollar visualizaciones sin tener que usar directamente estos lenguajes mencionados, y vale la pena revisarlas también.

Tags HTML más comunes trabajando con R.

Los tags más comunes cuando usamos R son los siguientes:

  • <h1>, h2, h3, h4, h5, h6: Sirven para añadir y especificar títulos (y subtítulos) de la página. Revisar.

  • <p>: Sirve para agregar un párrafo. Revisar.

  • <br>: Sirve para agregar un quiebre al párrafo y continuar con el contenido en la línea siguiente.

Por ejemplo, el siguiente código:

Soy un párrafo<br>y yo soy otro

Arrojará el siguiente contenido:

Soy un párrafo
y yo soy otro

Esto es importante cuando queremos marcar el final de una linea y deseamos escribir en la linea siguiente.

Nota: A diferencia de los demás tags, este no requiere de un cierre, por lo que escribir </br> incurre en un error.

  • <b>: Texto en negritas.

Por ejemplo, si escribimos Hola, somos unas letras <b>negritas</b>, el navegador mostrará lo siguiente:

Hola, somos unas letras negritas

Lo que hace el tag <b> entonces, es marcar en negritas el texto que se encuentra envuelto dentro de estos tags.

Al tag <b> se le puede incluir la propiedad style, la cual, al pasarle como argumento código CSS, podemos controlar propiedades de las negritas, como, por ejemplo, el color:

Este código:

Hola, somos unas letras <b style = 'color:red;'>negritas</b>

Nos generará el siguiente texto en el navegador

Hola, somos unas letras negritas

Este tag es muy utilizado al hacer pop-ups o etiquetas, generalmente para remarcar las partes constantes de una etiqueta. Por ejemplo:

<b style = 'color:green;'>Municipio: </b> Ahuacatlán <br> <b style = 'color:green;'>Estado: </b> Nayarit <br> <b style = 'color:green;'>IDH: </b> 0.5 <br>

Nos generará la siguiente etiqueta:

Municipio: Ahuacatlán
Estado: Nayarit
IDH: 0.5

  • <ul>: Listas no ordenadas o bullets. Revisar.

  • <ol>: Listas ordenadas o numeradas. Revisar.

  • <strong>: Pone el texto en negrita. Funciona igual que <b>.

  • <img>: Añade imágenes.

Por ejemplo, el siguiente código:

<img src = 'https://www.r-project.org/Rlogo.png' width = 200px>

Añade la imágen del lenguaje R. Notese el uso de la propiedad src para declarar el enlace a la fuente o ubicación de la imagen, y de la propiedad width para definir el ancho de la imagen.

  • <a href = ''>: Sirve para agregar enlaces.

Por ejemplo, el siguiente código:

Te invito a visitar el siguiente <a href = 'https://pokeapi.co/'>enlace</a>

Nos generará el siguiente texto:

Te invito a visitar el siguiente enlace

Donde la palabra enlace mandará al usuario a la página indicada.

  • <style>: Es el tag para agregar estilos sobre los elementos de las páginas HTML. Dentro del tag se incluye código CSS para poder modificar la apariencia del contenido.

  • Ejemplo: Estilo para modificar la apariencia de los párrafos:

<style> p { font-size:20px; font-family:Poppins; } </style>

En este código, en lenguaje CSS, los párrafos van a tener ahora un tamaño de letra de 20 pixeles y el tipo de letra Poppins.

  • <body>: Para agregar contenido a la página.

Este tag no se utiliza mucho en visualizaciones, pero es importante conocerlo porque este define el punto a partir del cual de programa la estructura del contenido de una página.

  • <div>: Ayuda con la división dentro del contenido.

Este tag no se utiliza mucho en visualizaciones, aunque si se utiliza más al momento de programar aplicaciones web (en librerías como shiny, por ejemplo, para declarar el inicio de secciones de contenido).

  • <iframe>: Nos ayuda a incrustar otras páginas dentro de nuestra página web.

También nos sirve para incrustar videos de youtube o tweets provenientes de Twitter.

Para ver ejemplos de su aplicación, puede checar este enlace.

Ejemplo

<iframe width="600" height = "420" src="https://lnppmicrositio.shinyapps.io/FederalismoEnCovid"> </iframe>

  • Resultado:

Otro ejemplo, ahora para agregar una ventana con video en página web, sería el siguiente:

<iframe width="600" height = "420" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe>

  • Resultado: