HTML en CSS leren: Een menu

Een menu voor meerdere pagina's

Eén lange pagina is niet genoeg meer. Hilde wil een pagina voor de honden, een voor de katten en een over adopteren, en een menu bovenaan zodat niemand verdwaalt.

Een site is een map met pagina's

Elke pagina is een eigen HTML-bestand. index.html is de startpagina: die opent als je naar het adres van de site gaat. Daarnaast komen honden.html, katten.html en adopteren.html.

Het menu is een lijst met links in een <nav>. Een lijst, omdat het een reeks gelijke dingen is: een voorleesprogramma zegt meteen hoeveel keuzes er zijn.

Het menu staat op elke pagina, zodat je vanaf elke pagina overal komt. Dat de punten hier naast elkaar staan, zonder bolletjes, komt van de CSS van het asiel. Hoe dat werkt, leer je in de module over flexbox.

index.html

1<header>2  <h1>Het Warme Mandje</h1>3  <nav>4    <ul>5      <li><a href="index.html">Home</a></li>6      <li><a href="honden.html">Honden</a></li>7      <li><a href="katten.html">Katten</a></li>8      <li><a href="adopteren.html">Adopteren</a></li>9    </ul>10  </nav>11</header>12<main>13  <h2>Welkom</h2>14  <p>Elk dier verdient een warm mandje.</p>15</main>

asiel.example

Mappen en paden

Een grote site zet pagina's in mappen, zoals een map dieren met een pagina per dier. Een relatief pad vertrekt altijd vanuit de map van de pagina waar je bent.

katten.html staat in dezelfde map. dieren/minou.html gaat een map dieper, de map dieren in. En ../index.html gaat een map hoger: .. betekent "de map erboven".

Dit is de pagina dieren/minou.html. Een link naar index.html brengt je hier niet naar de startpagina: de browser zoekt dan dieren/index.html.

index.html

1<main>2  <h1>Minou</h1>3  <p>Speelse kat van 2 jaar, dol op kartonnen dozen.</p>4  <p><a href="../katten.html">Alle katten</a> · <a href="../index.html">Terug naar home</a></p>5</main>

asiel.example

Probeer het zelf

Zet onder de naam een menu met vier links: Home naar index.html, Honden naar honden.html, Katten naar katten.html en Adopteren naar adopteren.html.

1<header>2  <h1>Het Warme Mandje</h1>3</header>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.kaart {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.kaart h3 {51  margin: 4px 0;52}53.kader {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.ras {59  color: #b5541c;60}61.dicht {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Een site is een map met pagina's

Elke pagina is een eigen HTML-bestand. index.html is de startpagina: die opent als je naar het adres van de site gaat. Daarnaast komen honden.html, katten.html en adopteren.html.

Het menu is een lijst met links in een <nav>. Een lijst, omdat het een reeks gelijke dingen is: een voorleesprogramma zegt meteen hoeveel keuzes er zijn.

index.html

1<header>2  <h1>Het Warme Mandje</h1>3  <nav>4    <ul>5      <li><a href="index.html">Home</a></li>6      <li><a href="honden.html">Honden</a></li>7      <li><a href="katten.html">Katten</a></li>8      <li><a href="adopteren.html">Adopteren</a></li>9    </ul>10  </nav>11</header>12<main>13  <h2>Welkom</h2>14  <p>Elk dier verdient een warm mandje.</p>15</main>

asiel.example

Mappen en paden

Een grote site zet pagina's in mappen, zoals een map dieren met een pagina per dier. Een relatief pad vertrekt altijd vanuit de map van de pagina waar je bent.

katten.html staat in dezelfde map. dieren/minou.html gaat een map dieper, de map dieren in. En ../index.html gaat een map hoger: .. betekent "de map erboven".

Dit is de pagina dieren/minou.html. Een link naar index.html brengt je hier niet naar de startpagina: de browser zoekt dan dieren/index.html.

index.html

1<main>2  <h1>Minou</h1>3  <p>Speelse kat van 2 jaar, dol op kartonnen dozen.</p>4  <p><a href="../katten.html">Alle katten</a> · <a href="../index.html">Terug naar home</a></p>5</main>

asiel.example

Probeer het zelf

Zet onder de naam een menu met vier links: Home naar index.html, Honden naar honden.html, Katten naar katten.html en Adopteren naar adopteren.html.

1<header>2  <h1>Het Warme Mandje</h1>3</header>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.kaart {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.kaart h3 {51  margin: 4px 0;52}53.kader {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.ras {59  color: #b5541c;60}61.dicht {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example