Às vezes é conveniente representar dados em uma estrutura de árbore como
a produzida pelo programa tree. O programa tree
cria uma saída de árvore de diretórios como esta:
✔ /var/www/html/Repos/Freak-Spot/freak-theme [master|✔] $ tree
.
├── static
│ ├── css
│ │ └── style.css
│ ├── genericons
│ │ ├── COPYING.txt
│ │ ├── genericons.css
│ │ ├── Genericons.eot
│ │ ├── Genericons.svg
│ │ ├── Genericons.ttf
│ │ ├── Genericons.woff
│ │ ├── LICENSE.txt
│ │ └── README.md
│ ├── images
│ │ ├── creativecommons_public-domain_80x15.png
│ │ ├── gnu-head-mini.png
│ │ └── questioncopyright-favicon.png
│ └── js
│ ├── functions.js
│ └── jquery-3.1.1.js
└── templates
├── archives.html
├── article.html
├── article_info.html
├── author.html
├── authors.html
├── base.html
├── category.html
├── index.html
├── page.html
├── pagination.html
├── period_archives.html
├── tag.html
├── taglist.html
└── tags.html
6 directories, 28 files
Para representar a instrução tal como aparece num terminal utilizei as
etiquetas HTML <samp> e <pre> (<pre><samp>saído do
tree</samp></pre>). Mas e se eu quiser incluir uma ligação ou utilizar
outros elementos HTML, ou CSS? Então teremos de usar CSS para mostrar
o aspecto de ramos.