HTML

Introducción

Este recurso está diseñado para ayudarte a aprovechar las potentes características de Quarto para mejorar tus documentos HTML.

Aprenderá:

  • Conceptos básicos de HTML: Iniciarse en la creación de documentos HTML, incluyendo tablas de contenido, numeración de secciones y estilos CSS.
  • Formato avanzado: Explore opciones avanzadas como tabsets, enlaces externos y recursos incrustados para crear contenidos ricos e interactivos.
  • Personalización de documentos: Aprende a incluir estilos CSS, scripts y otros activos para personalizar la apariencia y funcionalidad de tus páginas HTML.
  • Funciones interactivas: Descubra cómo añadir elementos interactivos como lightboxes, contenido con pestañas y comentarios para atraer a su audiencia.
  • Integración de código: Vea cómo Quarto integra código de lenguajes como R y Python, lo que le permite incrustar salidas de código en vivo directamente en su HTML.
  • Temas y diseño: Obtenga información sobre la aplicación de temas y la personalización del diseño para que sus documentos sean visualmente atractivos y fáciles de navegar.

Esta guía mejorará su capacidad para crear documentos HTML sofisticados, páginas web bien organizadas que destaquen tanto por su funcionalidad como por su estética.



Conceptos básicos

Utilice el formato html para crear una salida HTML:

---
title: "Mi documento"
format:
  html:
    # Tabla de contenidos
1    toc: true
2    toc-depth: 3
3    toc-expand: 1
4    toc-title: Contents
    # Numeración de secciones
5    number-sections: true
6    css: styles.css
---
1
Añadir una tabla de contenidos autogenerada.
2
Establecer niveles de sección en la TOC, por defecto 3 (niveles 1 a 3 incluidos).
3
Controlar el nivel de expansión de la TOC. El valor predeterminado es 1 con expansión automática a medida que el usuario se desplaza.
4
Personalizar el título utilizado para la tabla de contenidos
5
Numerar los encabezados de sección en el documento de salida.
6
Añadir una hoja de estilos CSS al documento.

Tabsets

Crea un tabset con ::: {.panel-tabset} en markdown. Cada encabezado dentro se convierte en una pestaña. Ejemplo:

::: {.panel-tabset}
## R

``` {.r}
get_sum <- function(a, b) {
  a + b
}
```

## Python

``` {.python}
def get_sum(a, b):
  return a + b
```

:::

Salida:

get_sum <- function(a, b) {
  a + b
}
def get_sum(a, b):
  return a + b

Grupos de pestañas

Utilice group para conjuntos de pestañas con los mismos nombres de pestaña para sincronizar su selección en todo el grupo.

::: {.panel-tabset group="language"}
## R

Contenido de la pestaña

## Python

Contenido de la pestaña
:::

Documento autónomo

Crear un documento HTML totalmente autónomo con recursos incrustados (imágenes, hojas de estilo CSS, JavaScript, Mathajax, etc.):

format:
  html:
    embed-resources: true
    self-contained-math: true

Esto producirá un archivo HTML independiente sin dependencias externas.

Enlaces externos

Los enlaces externos son enlaces que no se dirigen al sitio actual.

Para personalizar la apariencia y el comportamiento de los enlaces externos, utilice las siguientes opciones:

format:
  html:
1    link-external-icon: true
2    link-external-newwindow: true
3    link-external-filter: '^(?:http:|https:)\/\/www\.quarto\.org\/custom'
1
true mostrar un icono junto al enlace para indicar que es externo (por ejemplo, externo).
2
true abrir enlaces externos en una nueva ventana o pestaña del navegador (en lugar de navegar por la pestaña actual).
3
Una expresión regular que puede utilizarse para determinar si un enlace es un enlace interno. Por ejemplo ^(?:http:|https:)\/\/www\.quarto\.org\/custom will treat links that start with http://www.quarto.org as internal links (and others will be considered external).

Especificar que un enlace individual es externo y debe abrirse en una nueva pestaña:

[ejemplo](https://example.com){.external target='_blank'}

Comentarios

Habilitar Giscus comentarios almacenados en las ‘Discusiones’ de un repositorio de GitHub:

comments:
  giscus: 
    repo: quarto-dev/quarto-docs

Requisitos para el repositorio:

  • Debe ser público.
  • Tener instalada la aplicación Giscus.
  • Tener activada la discusión

Véase Documentación de Giscus for setup and additional options.

Desactivar comentarios

Desactivar comentarios para una página específica :

title: "Home Page"
comments: false

Incluir un archivo

Si desea incluir contenido adicional en su documento desde otro archivo, puede utilizar las opciones include-in-*:

Opción para Incluir Descripción
include-in-header Incluir contenido de archivo al final de la cabecera. Puede utilizarse, por ejemplo, para incluir CSS o JavaScript especiales en documentos HTML o para inyectar comandos en el preámbulo de LaTeX.
include-before-body Include contents of file at the beginning of the document body (e.g. after the <body> tag in HTML, or the \begin{document} command in LaTeX). Puede utilizarse para incluir barras de navegación o banners en documentos HTML.
include-after-body Include contents of file at the end of the document body (before the </body> tag in HTML, or the \end{document} command in LaTeX).

Puedes especificar un único archivo o múltiples archivos para cada una de estas opciones directamente, o utilizar la subclave file:. Para incluir contenido crudo en el encabezado YAML, use la subclave text. Al utilizar text:, add the | character after text: para indicar que el valor es una cadena de varias líneas. Si omite file: o text:, Quarto asume que está proporcionando un archivo.

Ejemplo:

format:
  html:
    include-in-header:
      - text: |
          <script src="https://examples.org/demo.js"></script>
      - file: analytics.html
      - comments.html
    include-before-body: header.html

Bloques de código

Ocultar código

Ocultar el código ejecutable en los documentos con echo: false en las opciones execute:

---
title: Mi documento
execute:
  echo: false
jupyter: python3
---

Anule esta opción para bloques de código individuales según sea necesario:

```{r}
#| echo: true

plot(1:10)
```
Nota

Las opciones del bloque de código van en un comentario en la parte superior, marcado con #|.

Código de plegado

Oculte el código por defecto con code-fold; Haga clic en Code para verlo.

Código 
plot(1:10)

Establezca code-fold: true y personalice el texto del resumen (por defecto es Code):

format:
  html:
    code-fold: true
    code-summary: "Show the code"

Herramientas de código

Activar un menú Código en la cabecera del documento con code-tools: true :

format:
  html:
    code-fold: true
    code-tools: true

Con los bloques de código plegados, el menú Código ofrece opciones para mostrar/ocultar el código y ver el código fuente completo.

herramientas de código

Anotación de código

Véase anotación de código

Bloques ejecutables

Véase cómo incluir bloques de código ejecutables.

Para incluir bloques de código no ejecutables en la documentación, encierre el lenguaje (por ejemplo, python, r, etc.) entre llaves dobles en lugar de una sola. Por ejemplo:

```{{python}}
1 + 1
```

Saldrá en el documento como:

```{python}
1 + 1
```

Si desea mostrar un ejemplo con múltiples bloques de código y otras marcas, simplemente encierre todo el ejemplo entre 4 comillas (por ejemplo, ````) y utilice la sintaxis de dos llaves para los bloques de código dentro del ejemplo. Por ejemplo:

````
---
title: 'Mi documento
---

Algunos contenidos markdown.

```{{python}}
1 + 1
```

Contenido adicional de markdown.

````

Personalización del tema

Véase la documentación Quarto HTML Themes.

Imagen Lightbox

Haga clic en una imagen para verla ampliada:

Aplicar Lightbox a imágenes específicas:

![Una imagen encantadora](mv-1.jpg){.lightbox}

Agrupar imágenes en una ‘galería’:

![Una imagen encantadora](mv-1.jpg){group="my-gallery"}

![Otra imagen encantadora](mv-2.jpg){group="my-gallery"}

![La última imagen encantadora](mv-3.jpg){group="my-gallery"}

Usar lightbox con celdas computacionales:

---
lightbox: auto
---

```{r}
#| label: fig-basic
#| fig-cap: Simple demo R plot 
plot(1:10, rnorm(10))
```

Leer más