Add proper footnotes to tutorial.md

[rdwebdesign]

What does this PR aim to accomplish?:

Add proper footnotes to tutorial.md

---

By submitting this pull request, I confirm the following:

1. I have read and understood the contributors guide, as well as this entire template. I understand which branch to base my commits and Pull Requests against.
2. I have commented my proposed changes within the code and I have tested my changes.
3. I am willing to help maintain this change if there are issues with it later.
4. It is compatible with the EUPL 1.2 license
5. I have squashed any insignificant commits. (git rebase)
6. I have checked that another pull request for this purpose does not exist.
7. I have considered, and confirmed that this submission will be valuable to others.
8. I accept that this submission may not be used, and the pull request closed at the will of the maintainer.
9. I give this submission freely, and claim no ownership to its content.

---

• I have read the above and my PR is ready for review. Check this box to confirm

[netlify]

✅ Deploy Preview for pihole-docs ready!

Name	Link
🔨 Latest commit	106633f
🔍 Latest deploy log	https://app.netlify.com/sites/pihole-docs/deploys/680c7631508ac0000884a9c6
😎 Deploy Preview	https://deploy-preview-1235--pihole-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[yubiuser]

I've thought about exactly this, however, it puts the footnote really at the bottom and not below the table. And it added the ugly back-refs

[rdwebdesign]

I tried to change the footnotes BACKLINK_TEXT option to use a different icon, but it didn't work. I couldn't find the correct format to use for pymdownx.extra extension options. I reverted the failed commit.

[yubiuser]

I played with it and I also could not get it to work. What does work is

  - footnotes:
      SUPERSCRIPT_TEXT: "*"

which improves the situation a bit.
I wonder if it's worth the change.

---

P.S. I noticed the lower part of the content from this site is not included in the site's TOC

[rdwebdesign]

I think using SUPERSCRIPT_TEXT: "*" will create an issue.
Every footnote reference will use just an asterisk (without numbers). There will be no way to differentiate them.
This would work on this page, since all 4 references point to the same note, but if another page has 2 different notes, both will be marked with *.

The default value (SUPERSCRIPT_TEXT: {}) automatically creates numbered references.

Examples:
This line has a footnote¹. It will use 1 as reference.
This other line has the same footnote¹ and one more time¹. This will also point to note 1.
Now this line has a different footnote² and it needs a different reference. It will point to 2. Using just an asterisk will mix both notes.

The only difference here on Github is: each back link shows a small index, but they are just ugly as the mkdocs version.

Footnotes

1. Footnote for the first and second lines. ↩ ↩² ↩³

2. Footnote for the last line. If both notes used asterisks, readers would be confused. ↩