Hoe maak IK mijn web pages
Opgelet: deze pagina is meer voor doe-het-zelvers, die willen weten hoe zaken in elkaar zitten. Ben je op zoek naar een kant-en-klare oplossing, kijk dan eens naar een echte CMS (Content Management Systeem) voor het web, zoals Yoomla of Xoops.
Web pages, hoe maak ik die nu zelf? Lees eerst het stukje over hoe ik de losse web-pagina's maak op mijn web-page. Deze pagina gaat meer over:
- Hoe de pagina's via een startpagina 'index.html' aan elkaar gehangen wordt, en de generatie van de navigatiebalk links
- Het werken met een sjabloon (template) in plaats van frames.
De index
De route op mijn web-page gaat goed voor het maken van losse pagina's, maar hoe maak je hier een samenhangend geheel van? Stel, je hebt een groep HTML files, hoe maak je daar een mooie index voor? Je hebt bijvoorbeeld de files '1.html' tot en met '5.html', en je wilt hierbij een file 'index.html' hebben van waaruit je naar die files kunt klikken. Wel, in HTML (de taal die door het web wordt gebruikt om web pages mee te beschrijven) zou dit er bijvoorbeeld als volgt uit kunnen zien:
<HTML>
<BODY>
<H1>inhoud:</H2>
<UL>
<LI><A HREF = "1.html">1.html</A>
<LI><A HREF = "2.html">2.html</A>
<LI><A HREF = "3.html">3.html</A>
<LI><A HREF = "4.html">4.html</A>
<LI><A HREF = "5.html">5.html</A>
</UL>
</BODY>
</HTML>
Dit is een complete (zij het wat kale) webpagina gezien vanuit HTML (normaal zit er nog het een
en ander extra bij, als bijvoorbeeld de titel van de pagina). De 'tag' <HTML>
geeft aan dat het hier om een HTML file gaat, de tag <BODY> waar de inhoud van
de weer te geven tekst begint, <UL> start een 'Unnumbered List', een
ongenummerde lijst, en elke <LI> is een lijst item.
Uiteraard maak je dit normaal niet met de hand in HTML, maar doe je dit vanuit een geschikte editor voor web pages, zoals Kompozer (zie mijn web page). Maar hier zie je wat dit eigenlijk technisch gezien voor bron heeft, en dat komt in het verdere verhaal van pas.
En nu automatisch
Het is natuurlijk handig wanneer het maken van deze lijst automatisch zou kunnen: een simpel programma dat in de directory kijkt welke files er staan, en dan daaruit zelf de bovenstaande index.html file maakt. Wel, dat kan. Dat kan zelfs op allerlei manieren. Zelf gebruik ik hiervoor de taal 'Perl' (zie elders op mijn web-pages). Ook zijn er voor dit doel al allerlei programma's in omloop, maar ik vind het leuker het zelf te doen.
Een heel simpel Perl script 'index_simple.pl' dat de
bovenstaande file maakt ziet er als volgt uit:
print "<HTML>\n<BODY>\n<UL>\n";
opendir THISDIR, ".";
@filelist = readdir THISDIR;
closedir THISDIR;
foreach $file (sort @filelist)
{
if ($file =~ /htm/)
{ print "<LI><A HREF='$file'>$file</A>\n"; }
}
print "</UL>\n</BODY>\n</HTML>\n";
En dat roep ik dan als volgt aan:
C:\Myweb> perl -w index_simple.pl >index.html
OK, dit script is misschien wat erg simpel, maar laten we eens kijken wat er gebeurt.
- In de eerste regel worden de drie beginregels van '
index.html' afgedrukt. De tekens '\n' staan voor 'newline', oftewel volgende regel. - De daaropvolgende drie regels openen de huidige directory, lezen alle filenamen in deze
directory in het array
@filelist, en sluiten de directory weer. Nu hebben we dus een lijst van alle files, maar dit kunnen ook nog niet-html files zijn (en directories, dat negeer ik even voor het moment). - Vervolgens gaan we voor elk element (
$file) in dit array kijken of de tekst 'html' er in voor komt. Zo ja, dan drukken we de regel af die het volgende element in de lijst voorstelt. Merk op dat$fileautomatisch door Perl vervangen wordt door de huidige file naam. - Uiteindelijk sluiten we de zaak nog even netjes af met de juiste eind-tags.
Klaar!
Maar.....
Helaas, deze aanpak is hier en daar wat erg simpel. Een file als 'html.txt' komt
ook in de lijst terecht. En ook directories komen in de lijst. We moeten de zoek-criteria wat
scherper stellen. Dat kan door de regel met de 'if' wat complexer te maken:
if (($file =~ /\.html$/) && (-f $file) && !($file =~ /^index\.html$/))
Het vergelijkpatroon is nu wat complexer: er moet een punt voor 'html' staan
('\.' is een punt, een kale '.' betekend 'elk willekeurig karakter) en
html moet het laatste in de naam zijn ('$' betekend end-of-line). Daarnaast
('&&' betekend 'en ook') moet de file aan nog wat voorwaarden voldoen: het
moet een 'echte' file zijn en niet een directory (getest door de '-f' operator), en
bovendien mag het niet de file 'index.html' zijn, we willen geen verwijzing naar
zichzelf (^ staat voor het begin van de regel).
Het kan nog mooier: template gebruik
Met bovenstaand programma'tje is een heel simpele index te maken. Maar, in de praktijk wil je op
iedere pagina een goede index hebben (ik tenminste wel, zie de linker kolom bovenaan deze pagina).
Wat ik dus doe is iedere file voorzien van een lijst met referenties naar de andere files. Gaat op
een soortgelijke manier, maar in plaats van de index weg te schrijven naar een aparte
'index.html' voeg je deze index toe aan het begin (of eind, of waar dan ook) van
iedere html file.
De pagina's waar je nu naar zit te kijken zijn op die manier tot stand gekomen. Ik heb een map
('src') met al mijn html files, waarbij in elke file alleen de inhoud (de 'content')
staat. Een perl script loopt over deze files heen, en maakt een tweede map ('rls')
aan, waarbij iedere file uit de bronmap 'src' wordt voorzien van een 'navigatiemenu', dat is de
knoppenbalk links.
Alle gemeenschappelijke zaken (zoals het achtergrondplaatje, de footer op elke pagina, en zo
voort) staan hierbij in een gezamenlijk 'template' (sjabloon), waarin het script
dus de navigatiebalk aanmaakt en de tekst giet. Daarnaast het ik een tekstfile
(index.txt), waarin aangegeven staat hoe de pagina's aan elkaar hangen, en wat de
titels van de pagina's zijn. Heb ik dus iets gewijzigd, hoef ik alleen het script te draaien, en
alle pagina's zijn weer netjes compleet en in dezelfde stijl. Ook houd het script bij welke
pagina's zijn veranderd, zodat alleen die hoeven te worden verstuurd naar de server.
Het effect is hiervan een beetje vergelijkbaar met het gebruik van frames. Op mijn web page staat al waarom ik liever geen echte frames gebruik. In mijn template zijn (met behulp van een tabel-gebaseerde vormgeving) verschillende gebieden gedefinieerd te vergelijken met frames, maar die worden al van tevoren ingevuld in plaats van pas bij de gebruiker.
Je zal begrijpen dat het script hiervoor iets ingewikkelder is dan bovenstaand voorbeeld. Je kan
bijvoorbeeld ook gemarkeerde tekst laten vervangen, zo wordt bijvoorbeeld Hoe maak IK mijn web-pages
vervangen door de eigenlijke titel van de pagina. Maar mocht je interesse hebben: hier is een link
naar het script:
- Link naar mijn (oude versie van mijn) perl script 'gen_idx.pl' (moet de nieuwe versie nog eens wat kuisen)
- Link naar de batch file van waaruit dit script wordt aangeroepen: 'make_pages.bat'
- Link naar de index file : 'index.txt'
- Link naar mijn sjabloon : 'template.html'
Let op: Dit is geen kant-en-klaar product (die zijn er zat op de markt) maar iets om zelf mee te kunnen starten. Kijk er naar en leer er van, maar het in een keer kopiëren en gebruiken zit er niet in..... Veel plezier er mee.
Meer info
Meer uitleg over HTML? Kijk op Handleiding HTML. Wil je je web-page op correctheid laten checken? Kijk dan op HTML-checker.
Meer info: ga terug naar mijn web page.
op mijn site
 | |
| Voorpagina | |
| Moerman | |
| Hobbies | |
| Computers | |
| Vroeger | |
| Veilig | |
| Net(werk) | |
| Linux | |
| Program'ng | |
| Embedded | |
| Web pages | |
| Vervolg | |
| Specials | |
| Paginas | |
| Header | |
| Upload | |
| CGI | |
| CGI 2 | |
| CGI 3 | |
 | |
| SintLijst | |
 | |
| HTC Desire | |
 | |
| Archief | |
| Site Map |
