HTML

Introduction

Cette ressource est conçue pour vous aider à exploiter les puissantes fonctionnalités de Quarto afin d’améliorer vos documents HTML.

Vous apprendrez:

  • Les bases du HTML : Commencez par les éléments essentiels pour créer des documents HTML, incluant la table des matières, la numérotation des sections et le style CSS.
  • Formatage avancé : Explorez les options avancées telles que les tabsets, les liens externes et les ressources intégrées pour créer un contenu riche et interactif.
  • Personnalisation du document : Apprenez à inclure des styles CSS, des scripts et d’autres actifs pour personnaliser l’apparence et la fonctionnalité de vos pages HTML.
  • Fonctionnalités interactives : Découvrez comment ajouter des éléments interactifs tels que des lightboxes, du contenu par onglets et des commentaires pour susciter l’intérêt de votre public.
  • Intégration de code : Découvrez comment Quarto intègre le code de langages tels que R et Python, vous permettant d’intégrer des sorties de code directement dans votre HTML.
  • Thèmes et mise en page : Obtenez des indications sur l’application de thèmes et la personnalisation de la mise en page pour rendre vos documents visuellement attrayants et faciles à parcourir.

Ce guide vous permettra d’améliorer votre capacité à créer des documents HTML sophistiqués, des pages web bien organisées qui se distinguent à la fois en termes de fonctionnalité et d’esthétique.



Les Bases

Utiliser le format html pour créer une sortie HTML:

---
title: "Mon document"
format:
  html:
    # Table des matières
1    toc: true
2    toc-depth: 3
3    toc-expand: 1
4    toc-title: Contents
    # Numérotation des sections
5    number-sections: true
6    css: styles.css
---
1
Ajouter une table des matières générée automatiquement.
2
Configurer les niveaux de section dans la table des matières, la valeur par défaut étant 3 (niveaux 1 à 3 inclus).
3
Contrôler le niveau d’expansion de la table des matières. La valeur par défaut est 1, avec une expansion automatique lorsque l’utilisateur fait défiler le texte.
4
Personnaliser le titre utilisé pour la table des matières
5
Numéroter les titres de section dans le document de sortie.
6
Ajouter une feuille de style CSS à votre document.

Onglets

Créez un tabset avec ::: {.panel-tabset} en markdown. Chaque titre à l’intérieur devient un onglet. Exemple:

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

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

## Python

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

:::

Sortie:

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

Groupes d’onglets

Utiliser group pour les ensembles d’onglets ayant les mêmes noms d’onglets pour synchroniser leur sélection à travers le groupe.

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

Contenu de l'onglet

## Python

Contenu de l'onglet
:::

Document autonome

Créer un document HTML entièrement autonome avec des ressources intégrées (images, feuilles de style CSS, JavaScript, Mathajax etc.):

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

Ceci produira un fichier HTML autonome sans dépendances externes.

Liens externes

Les liens externes sont des liens qui ne ciblent pas le site actuel.

Pour personnaliser l’apparence et le comportement des liens externes, utilisez les options suivantes:

format:
  html:
1    link-external-icon: true
2    link-external-newwindow: true
3    link-external-filter: '^(?:http:|https:)\/\/www\.quarto\.org\/custom'
1
true afficher une icône à côté du lien pour indiquer qu’il est externe (par exemple external).
2
true pour ouvrir les liens externes dans une nouvelle fenêtre ou un nouvel onglet du navigateur (au lieu de naviguer dans l’onglet actuel).
3
Une expression régulière qui peut être utilisée pour déterminer si un lien est un lien interne. Par exemple ^(?: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).

Spécifier qu’un lien individuel est externe et doit s’ouvrir dans un nouvel onglet:

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

Commentaires

Activer les commentaires Giscus stockés dans les ‘Discussions’ d’un repo GitHub:

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

Exigences pour le repo:

  • Doit être public.
  • Avoir installé l’application Giscus.
  • Avoir la discussion activée

Voir [Giscus documentation] (https://giscus.app){.external target=’_blank’} for setup and additional options.

Désactivation des commentaires

Désactiver les commentaires pour une page spécifique :

title: "Home Page"
comments: false

Inclure un fichier

Si vous souhaitez inclure dans votre document du contenu supplémentaire provenant d’un autre fichier, vous pouvez utiliser les options include-in-*:

Option pour Inclure Description de l’option
include-in-header Inclure le contenu du fichier à la fin de l’en-tête. Cela peut être utilisé, par exemple, pour inclure des feuilles de style CSS ou JavaScript spéciales dans des documents HTML ou pour injecter des commandes dans le préambule 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). Ceci peut être utilisé pour inclure des barres de navigation ou des bannières dans les documents 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).

Vous pouvez spécifier un seul fichier ou plusieurs fichiers pour chacune de ces options directement, ou utiliser la sous-clé file:. Pour inclure du contenu brut dans l’en-tête YAML, utilisez la sous-clé text. Lorsque l’on utilise text:, add the | character after text: pour indiquer que la valeur est une chaîne de plusieurs lignes. Si vous omettez file: ou text:, Quarto suppose que vous fournissez un fichier.

Exemple:

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

Blocs de code

Cacher le code

Masquer le code exécutable dans les documents avec echo : false dans les options execute:

---
title: Mon document
execute:
  echo: false
jupyter: python3
---

Cette option peut être remplacée par d’autres pour des blocs de code individuels, selon les besoins:

```{r}
#| echo: true

plot(1:10)
```
Note

Les options du bloc de code sont placées dans un commentaire en haut de la page, marqué par #|.

Repliement de Code

Cacher le code par défaut avec code-fold ; Cliquer Code pour voir.

Code 
plot(1:10)

Configurer code-fold : true et personnaliser le texte du résumé (par défaut ‘Code’):

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

Outils de code

Activer un menu Code dans l’en-tête du document avec code-tools: true :

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

Avec les blocs de code pliés, le menu Code offre des options pour afficher/masquer le code et voir la source complète.

outils de code

Annotation du code

Voir annotation de code

Blocs exécutables

Voir comment inclure des blocs de code exécutable.

Pour inclure des blocs de code non exécutables dans la documentation, entourez le langage (par exemple python, r, etc.) d’accolades doubles plutôt que d’accolades simples. Par exemple:

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

Sera affiché dans le document en tant que:

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

Si vous voulez montrer un exemple avec plusieurs blocs de code et d’autres marques, il suffit d’entourer l’ensemble de l’exemple de 4 crochets (par exemple ````) et d’utiliser la syntaxe des deux accolades pour les blocs de code à l’intérieur. Par exemple:

````
---
title : 'Mon document'
---

Un peu de contenu markdown.

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

Quelques contenus markdown supplémentaires.

````

Personnalisation du thème

Voir la documentation de Quarto HTML Themes.

En savoir plus