Mathieu S. and Michael V.
The account used for the slides of @work1
HTML architectuur
@Work 1
What?
HTML architectuur
What?
Met HTML architectuur bedoelen we de organisatie van verschillende HTML documenten in je project.
What?
Je hebt ongelofelijk veel manieren om je eigen CSS te gaan organiseren.
In deze les zal je een pragmatische aanpak zien waarop je kan verder bouwen.
De index.html
HTML architectuur
De index.html
Mijn opdracht
pages
about.html
contact.html
index.html
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="pages/about.html">About</a></li>
<li><a href="pages/contact.html">Contact</a></li>
</ul>De index.html
Mijn opdracht
pages
about.html
contact.html
index.html
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>De index.html
Heel verveldend dat je de HTML-semantiek niet gewoon kunt copy/pasten van 1 HTML bestand naar een ander
Oplossing: De document <base> URL element
Mijn opdracht
pages
about.html
contact.html
index.html
<head>
<base href="">
</head>
<body>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../pages/about.html">About</a></li>
<li><a href="../pages/contact.html">Contact</a></li>
</ul>
</body>
Mijn opdracht
pages
about.html
contact.html
index.html
<head>
<base href="../">
</head>
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="pages/about.html">About</a></li>
<li><a href="pages/contact.html">Contact</a></li>
</ul>
</body>
De index.html
Trucje om te onthouden:
Laat het base element linken naar de root van je project en alle relatieve url's die erachter volgen blijven hetzelfde
<head>
<!-- De base van mijn website is 1 niveau hoger -->
<base href="../">
</head>Mijn opdracht
pages
about.html
contact.html
index.html
<head>
<!-- <base href=""> -->
</head>
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="pages/about.html">About</a></li>
<li><a href="pages/contact.html">Contact</a></li>
</ul>
</body>
Anker links
HTML architectuur
Anker links
Anker links laten toe dat een link je binnen éénzelfde pagina laat scrollen naar een ander onderdeel van de pagina
<body>
<a href="#footer">Link naar onderen</a>
...
<footer id="footer">
...
</footer>
</body>Anker links
Wanneer je het <base> element gebruikt, moet je hier wel mee opletten.
<head>
<base href="../">
</head>
<body>
<a href="foldernaam/bestandsnaam#footer">Link naar onderen</a>
...
<footer id="footer">
...
</footer>
</body>Robots.txt
HTML architectuur
Wat?
- Robots.txt is een tekst bestandje dat je in de root (= hoofdfolder) van je project plaatst
- Wanneer je project online staat (op een server, Github pages, ...) zullen robots (Google, ...) dit bestandje eerst lezen om te kijken of ze verder mogen
Waarom
- Op deze manier kan je ervoor zorgen dat bv. Google een website niet in zijn resultaten toont
- Bv. wanneer je iets maakt dat voor intern gebruik binnen een bedrijf is
- Bv. wanneer je een dev, staging, ... omgeving hebt
Let op
- Dit principe werkt uiteraard enkel indien de robot een brave robot is die jouw instructies volgt.
- Malware robots zullen dit uiteraard niet doen. Gebruik robots.txt daarom dus nooit om bestanden te verbergen, maar vooral voor indexatie voor search pagina's.
Volledige toegang
- Gebruik onderstaande om robots alle toegang te geven (= hetzelfde als geen robots.txt bestand)
User-agent: *
Disallow:Geen toegang
- Gebruik onderstaande om robots alle toegang te ontnemen
User-agent: *
Disallow: /Meer info
- Voor meer info - zoals bv. specifieke pagina's verbergen - zie https://www.robotstxt.org/robotstxt.html
@Work1 - HTML architectuur
By Mathieu S. and Michael V.
@Work1 - HTML architectuur
CSS Architectuur: CSS verdelen over verschillende bestanden & CSS variables.
