Les 4
Het Include commando in SSI
Het include commando in SSI is de meest gebruikte en handigste functie. Met het include commando kun je stukken tekst en/of code in een .shtml-bestand inlezen vanuit een extern bestand.
Veel websites hebben bijvoorbeeld aan de rechterkant van de pagina een menu staan. Dit menu staat op elke pagina. Je zou dit menu in een extern bestand kunnen zetten en vervolgens via het include commando het menu in de pagina aanroepen. Nu hoef je de hele code voor het menu niet meer op iedere pagina te zetten en als je iets aan het menu wilt veranderen of toevoegen, dan hoef je nu alleen het externe bestand waar het menu in staat maar aan te passen. Dit scheelt je dus een heleboel tijd.
Om een extern bestand aan te roepen in je pagina gebruik je deze code:
<!--#include file="bestandsnaam.txt" -->
Hierboven wordt een .txt bestand gebruikt, maar je kan ook een .htm(l) of ander soort bestand op deze manier laten inladen.
Heb je het bestand dat je wilt includen in een subdirectory staan? Dan wordt de code als volgt:
<!--#include file="subdirectorynaam/bestandsnaam.txt" -->
Heb je het bestand boven je Document Root directory staan (de directory waarin de index-pagina van je site staat), dan moet je gebruik maken van een virtual include. De code hiervoor is:
<!--#include virtual="/directorynaam/bestandsnaam.txt" -->
Nu gaan we een voorbeeld behandelen waarin we een menu in een extern bestand zetten. Daarna gaan we het menu aanroepen in de pagina.
Menu in een extern bestand zetten
Eerst gaan we het externe tekstbestand maken waarin de code voor het menu komt te staan. Open dus een tekstbestand in je HTML editor en zet daarin de code voor het menu op je pagina.
Je kan als voorbeeld deze code gebruiken:
<div style="width: 150px; border: solid 1px black; background-color: #9fc; padding: 3px; margin: 4px 2px 4px 2px;>
<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="pagina1.html">Pagina 1</a> </li>
<li> <a href="pagina2.html">Pagina 2</a> </li>
<li> <a href="pagina3.html">Pagina 3</a> </li>
<li> <a href="pagina4.html">Pagina 4</a> </li>
</ul>
</div>
Goed, dit is de code voor een eenvoudig menu. Sla dit bestand nu op als menu.txt.
Nu moet je alleen nog het .shtml bestand maken waarin je het menu gaat aanroepen door middel van het include commando.
Maak dus gewoon een simpel .shtml-bestand:
<html>
<head>
<title>Testbestand</title>
</head>
<body>
<p>Welkom op deze testpagina. Hieronder zie je het menu.</p>
<!--#include file="menu.txt" -->
<p>Dit is de overige tekst van de pagina.</p>
</body>
</html>
Het menu wordt hier vrij ver bovenaan de pagina geplaatst. Natuurlijk kun je het menu op een compleet andere plaats zetten, dat is zelfs beter met zo'n soort menu. Aan de linker- of rechterkant is vaak de beste optie. Het menu hierboven is dan ook slechts als voorbeeld bedoeld.
Sla dit bestand op als testpagina.shtml. Daarna moet je de beide bestanden
(menu.txt en testpagina.shtml) naar je server uploaden. Type nu het webadres
van het bestand testpagina.shtml in de adresbalk van je browser. Als het goed is zie je nu de
pagina met het menu op je scherm verschijnen.
Het moet er ongeveer uitzien als op deze pagina (link opent in een nieuw venster).
Nu het grote voordeel van SSI: stel nu dat je een link aan je menu wilt toevoegen. Je hoeft nu alleen nog maar het bestand menu.txt te veranderen! Daarna zie je op alle .shtml pagina's het nieuwe menu verschijnen. Dit bespaart je veel tijd als je site uitgroeit naar tientallen of zelfs honderden pagina's. Natuurlijk kun je naast het menu nog andere includes gebruiken, zoals voor de header (bijvoorbeeld een logo van je site) of een voettekst (bijvoorbeeld met copyright informatie).
Einde les 4
In deze les heb je gelezen hoe je met het include commando moet werken. Je weet nu dat dit je veel tijd kan besparen bij het updaten van je pagina's. In de laatste les van deze SSI cursus leer je hoe je met SSI een CGI script kunt laten uitvoeren.
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
