L'encapçalament superior d'una pàgina de DevSite ha de ser un <h1>
. El cos de la pàgina no ha de contenir un altre <h1>
per evitar confondre els navegadors no visuals. L'eina nbgenerate
converteix el contingut i les plantilles HTML i Markdown de DevSite en quaderns Jupyter compatibles amb Colab.
Mides
Títol 1
Títol 2
Títol 3
Títol 4
Títol 5
Títol 6
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Reducció
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Taula de continguts
A DevSite, <h2>
i <h3>
s'afegeixen automàticament a la taula de continguts (TdC) "en aquesta pàgina".
Amaga els encapçalaments de la TdC
Per evitar que s'afegeixi un encapçalament (com ara "Encapçalament 2" i "Encapçalament 3" a la secció anterior, que no apareixen a la TdC), apliqueu class="hide-from-toc"
.
Títol 2
Títol 3
HTML
<h2 class="hide-from-toc">Heading 2</h2>
<h3 class="hide-from-toc">Heading 3</h3>
Reducció
## Heading 2 {:.hide-from-toc}
### Heading 3 {:.hide-from-toc}
Personalitza el text de l'encapçalament a la TdC
Si voleu que el text de la TdC difereixi de l'encapçalament real (com aquesta secció!), establiu un atribut data-text
a l'encapçalament:
Títol 2
HTML
<h2 data-text="Custom text for the ToC">Heading 2</h2>
Reducció
## Heading 2 {: data-text='Custom text for the ToC'}
Incloeu els encapçalaments dins de les taules de la TdC
També podeu posar un <h2>
o <h3>
dins de la capçalera d'una taula ( <th>
) per forçar la taula a la TdC. Dins de la capçalera d'una taula, <h2>
i <h3>
tenen un estil de text normal, de manera que els lectors no ho podran dir.
Enllaços de clic per copiar
A les pàgines de documentació (no a les pàgines "d'amplada completa", com la majoria de pàgines de destinació), els encapçalaments diferents de <h1>
també tenen un botó per copiar l'enllaç, que només apareix quan passeu el cursor per sobre de l'encapçalament.
Per desactivar aquest botó per a un encapçalament específic, apliqueu class="no-link"
a l'encapçalament.
Títol 4
Títol 5
HTML
<h4 class="no-link">Heading 4</h4>
<h5 class="no-link">Heading 5</h5>
Reducció
## Heading 4 {:.no-link}
### Heading 5 {:.no-link}
Per forçar el botó d'enllaç a aparèixer en un encapçalament que d'altra manera no el tindria (per exemple, un <h1>
o qualsevol encapçalament d'una pàgina d'ample complet), afegiu class="add-link"
a l'encapçalament.
Títol 1
HTML
<h1 class="add-link">Heading 1</h1>
Reducció
# Heading 1 {:.add-link}
Encapçalaments numerats
Per prefixar els encapçalaments <h2>
amb números seqüencials per designar seccions amb contingut complex com a passos diferents en un procés de diversos passos, afegiu una classe numerada a cada encapçalament.
Primer encapçalament numerat
Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.
Segon encapçalament numerat
Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.
Tercer encapçalament numerat
Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.
HTML
<h2 class="numbered">First numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h2 class="numbered">Second numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h2 class="numbered">Third numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Reducció
## First numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
## Second numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
## Third numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Subtítols numerats
Per prefixar els encapçalaments <h3>
que segueixen els encapçalaments <h2>
amb números seqüencials, afegiu una classe numerada a cada encapçalament <h3>
.
HTML
<h2 class="numbered">Numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Reducció
## Numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Encapçalament numerat
Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.
Subtítol numerat
Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.
Subtítol numerat
Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.
Subtítol numerat
Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.