LES 4 WERKEN EN ERVARING OPDOEN. NOG VIER WEBPAGINA'S MAKEN. In Les 3 hebben we het eerste vers van De Ridderkerkse Meezinger, getiteld: 'Bolnesserbocht in De Nieuwe Maas', verwerkt tot een webpagina, en het als bestand met de naam: vers-bolnesserbocht.html, opgeslagen in de map practicum De Ridderkerkse Meezinger bestaat uit vijf verzen. 1. Bolnesserbocht in De Nieuwe Maas, 2. Drierivierenpunt Ridderkerk (te Slikkerveer), 3. Het nieuwe centrum van Ridderkerk, 4. Moeder en zoon (over Rijsoord), en 5. Wassenaar aan de Waal (over Oostendam). We gaan het bestand vers-bolnesserbocht.html als model gebruiken voor de verwerking van de andere vier verzen tot webpagina's. We openen uit de map practicum het bestand vers-bolnesserbocht.html in kladblok. <!DOCTYPE html> <html lang=nl> <head> <title>bolnesserbocht in de Nieuwe Maas. Couplet van de Ridderkerkse Meezinger. </title> <meta charset=utf-8>
<meta name=description content= Bolnesserbocht in de Nieuwe Maas bezongen in het eerste couplet van de Ridderkerkse Meezinger > <meta name=keywords content= Bolnes, De Nieuwe Maas, Ridderkerk, Meezinger > </head> <body style="background: cornsilk; text-align: center; margin-top: 100px; font-family: arial; font-size:120%; line-height:130%;"> <h1 style="color: gray;">de Ridderkerkse Meezinger</h1> <h3 style="margin-top: 55px;">Bolnesserbocht in De Nieuwe Maas</h3> <p style="margin-top: 30px;"> Bolnesserbocht in De Nieuwe Maas<br> Daar stroomt heel wat water door heen<br> Hoe houd je het droog<br> Ja, dat is dan de vraag<br> Door dijken op deltaniveau Dijkhuizen verdwenen, de werf op zijn beurt<br> Geen lasser of klinker die niet heeft getreurd<br> Na tijden vol onzekerheid<br> Wordt toch langs de dijk weer geheid De woningen die er nu staan<br> Zijn torens zo hoog als een kraan<br> Zijn torens zo hoog als een kraan <p style="font-size: 75%; color: #404040; margin-top: 30px;">Faas van Rietschoten </body> </html> Opmerking: In het kladblok valt de rode kleur weg. Maar we weten nu wel wat het style element inhoudt. We gaan het bestand vers-bolnesserbocht.html nog vier keer opslaan in de map practicum. Maar steeds met een andere naam. Met onderstaande namen... vers-drierivierenpunt.html vers-nieuwcentrum.html vers-moederenzoon.html vers-wassenaarwaal.html Goed. We openen het bestand met de naam vers-drierivierenpunt.html in kladblok en gaan dit bestand met gegevens vullen van het vers 'Drierivierenpunt Ridderkerk'. Let op 1! Zowel in de sectie van <head>..</head> als van <body>..</body>. Let op 2! Kleur achtergrond veranderen we in elk vers, nu van cornsilk in lightcyan. DE TEKST VAN HET TWEEDE VERS 'HET DRIERIVIERENPUNT RIDDERKERK': Het drierivierenpunt Ridderkerk de Noord, de Lek, de Nieuwe Maas Daar moet u voor
naar de wijk Slikkerveer Dat is u op school geleerd De Lek komt uit Maurik, uit Dordrecht de Noord Dan samen op weg als nieuwe Maas, dat bekoort En wilt u het zelf gadeslaan Dan moet u de dijk overgaan Komt allemaal naar Slikkerveer Er vaart ook een ponmt heen en weer Er vaart ook een pont heen en weer HET BESTAND vers-drierivierenpunt.html WORDT DOOR HET INVULLEN: <!DOCTYPE html> <html lang=nl> <head> <title>drierivierenpunt Ridderkerk. Te Slikkerveer. Couplet 2 van de Ridderkerkse Meezinger. </title> <meta charset=utf-8> <meta name=description content= Drierivierenpunt Ridderkerk bezongen in het tweede couplet van de Ridderkerkse Meezinger > <meta name=keywords content= Drierivierenpunt Ridderkerk, De Noord, De Lek, De Nieuwe Maas, Ridderkerk, Meezinger > </head> <body style="background:lightcyan; text-align: center; margin-top: 100px; font-family: arial; font-size:120%; line-height:130%;"> <h1 style="color: gray;">de Ridderkerkse Meezinger</h1> <h3 style="margin-top: 55px;">Drierivierenpunt Ridderkerk</h3> <p style="margin-top: 30px;"> Het drierivierenpunt Ridderkerk <br> de Noord, de Lek, de Nieuwe Maas<br> Daar moet u voor <br> naar de wijk Slikkerveer<br> Dat is u op school geleerd De Lek komt uit Maurik, uit Dordrecht de Noord<br> Dan samen op weg als Nieuwe Maas, dat bekoort<br> En wilt u het zelf gadeslaan<br> Dan moet u de dijk overgaan Komt allemaal naar Slikkerveer<br> Er vaart ook een pont heen en weer<br> Er vaart ook een pont heen en weer <p style="font-size: 75%; color: #404040; margin-top: 30px;">Faas van Rietschoten </body> </html>
Dit aldus gewijzigde bestand vers-drierivierenpunt.html opslaan met dezelfde naam vers-drierivierenpunt.html want het moet de eerdere versie vervangen. Daarna openen in een browser. Ziedaar: Nu openen we het bestand met de naam vers-nieuwcentrum.html in kladblok en gaan dit bestand met gegevens vullen van het derde vers 'Op het nieuwe centrum'. Let op 1! Zowel in de sectie van <head>..</head> als van <body>..</body>. Let op 2! Kleur achtergrond, background, veranderen we in elk vers, nu in white. DE TEKST VAN HET DERDE VERS 'OP HET NIEUWE CENTRUM': Het nieuwe centrum van Ridderkerk. Daar word je haast sprakeloos van. Modern klassiek, ja, zo wordt het genoemd. De bouw was meteen al beroemd
Financiers werkten over. Adviseurs waren druk. Geen alternatieven. Het kon niet meer stuk. Na jaren van centrumgetob, kan men zijn geluk nu niet op. Drink allen op 't goede gebruik. Van 't centrum en trek er op uit. Van 't centrum en trek er op uit. HET BESTAND vers-nieuwcentrum.html WORDT DAN: <!DOCTYPE html> <html lang=nl> <head> <title>op het nieuwe centrum van Ridderkerk. Couplet 3 van de Ridderkerkse Meezinger. </title> <meta charset=utf-8> <meta name=description content= Het nieuwe centrum van Ridderkerk bezongen in het derde couplet van de Ridderkerkse Meezinger > <meta name=keywords content= Ridderkerk-Centrum, Nieuwbouw, Ridderkerk, Meezinger > </head> <body style="background: white; text-align: center; margin-top: 100px; font-family: arial; font-size:120%; line-height:130%;"> <h1 style="color: gray;">de Ridderkerkse Meezinger</h1> <h3 style="margin-top: 55px;">Op het nieuwe centrum van Ridderkerk</h3> <p style="margin-top: 30px;"> Het nieuwe centrum van Ridderkerk.<br> Daar word je haast sprakeloos van.<br> Modern klassiek, ja, zo wordt het genoemd.<br> De bouw was meteen al beroemd Financiers werkten over. Adviseurs waren druk.<br> Geen alternatieven. Het kon niet meer stuk.<br> Na jaren van centrumgetob,<br> kan men zijn geluk nu niet op. Drink allen op 't goede gebruik.<br> Van 't centrum en trek er op uit.<br> Van 't centrum en trek er op uit. <p style="font-size: 75%; color: #404040; margin-top: 30px;">Faas van Rietschoten </body> </html>
Dit aldus gewijzigde bestand vers-nieuwcentrum.html opslaan met dezelfde naam vers-nieuwcentrum.html want het moet de eerdere versie vervangen. Daarna openen in een browser. Ziedaar: We openen het bestand met de naam vers-moederenzoon.html in het kladblok en gaan dit bestand met gegevens vullen van het vierde vers 'Moeder en zoon (Over Rijsoord)'. Let op 1! Zowel in de sectie van <head>..</head> als van <body>..</body>. Let op 2! Kleur achtergrond, veranderen we in elk vers, nu in een grijstint zonder naam, maar wel met een hexadecimale code: #eeeeee DE TEKST VAN HET VIERDE VERS 'MOEDER EN ZOON (OVER RIJSOORD)': Ma! Strevelshoek, dat is geen Rijsoord. En Wevershoek al evenmin. Hetzelfde geldt voor het Zwaantje, het Zweth, de Kromme, de Schaapherderweg.
Want het echte Rijsoord ligt over de brug. Bij tolhuis en molen, op dat kleine stuk. Daar komt ruzie van, houd je mond. Zulke dingen bazuin je niet rond. Maar Ma! Het staat wel in het werk: Vijfhonderd jaar oud Ridderkerk. Vijfhonderd jaar oud Ridderkerk. HET BESTAND vers-moederenzoon.html WORDT ALDUS: <!DOCTYPE html> <html lang=nl> <head> <title>moeder en zoon over Rijsoord. Couplet 4 van de Ridderkerkse Meezinger. </title> <meta charset=utf-8> <meta name=description content= Oud en minder oud Rijsoord bezongen in het vierde couplet van de Ridderkerkse Meezinger > <meta name=keywords content= Rijsoord, Ridderkerk, Meezinger > </head> <body style="background: #eeeeee; text-align: center; margin-top: 100px; font-family: arial; font-size:120%; line-height:130%;"> <h1 style="color: gray;">de Ridderkerkse Meezinger</h1> <h3 style="margin-top: 55px;">Moeder en zoon over Rijsoord</h3> <p style="margin-top: 30px;"> Ma! Strevelshoek, dat is geen Rijsoord.<br> En Wevershoek al evenmin.<br> Hetzelfde geldt voor het Zwaantje, het Zweth,<br> de Kromme, de Schaapherderweg. Want het echte Rijsoord ligt over de brug.<br> Bij tolhuis en molen, op dat kleine stuk. <br> Daar komt ruzie van, houd je mond.<br> Zulke dingen bazuin je niet rond. Maar Ma! Het staat wel in het werk:<br> Vijfhonderd jaar oud Ridderkerk.<br> Vijfhonderd jaar oud Ridderkerk. <p style="font-size: 75%; color: #404040; margin-top: 30px;">Faas van Rietschoten </body> </html> Dit aldus gewijzigde bestand vers-moederenzoon.html opslaan met dezelfde naam vers-moederenzoon.html want het moet de eerdere versie vervangen. Daarna openen
in een browser. Ziedaar: Tenslotte openen we het bestand met de naam vers-wassenaarwaal.html in het kladblok en gaan dit bestand met gegevens vullen van het vers 'Wassenaar aan de Waal'. Let op 1! Zowel in de sectie van <head>..</head> als van <body>..</body>. Let op 2! Kleur achtergrond veranderen we in elk vers, nu iets blauws met de naam: lightsteelblue1, echter noteren we het in de hexadecimale code: #cae1ff DE TEKST VAN HET VIJFDE VERS 'WASSENAAR AAN DE WAAL': De Pruimendijk ging vroeg met pensioen. De dijk had geen kind aan de Waal. Die afgedamd van getijden ontdaan. Als stil binnenwater bleef staan. De Waal werd gezuiverd. Verwijderd de prut. De oevers veranderen in een bouwput. Het Wassenaar komt er nu aan. En Oostendam wordt heel voornaam.
Gevraagd werd ook om een beleid. Voor Oostendam als eigen wijk. Voor Oostendam als eigen wijk. HET BESTAND vers-wassenaarwaal.html WORDT DAN: <!DOCTYPE html> <html lang=nl> <head> <title>wassenaar aan de Waal. Over Oostendam. Couplet 5 van de Ridderkerkse Meezinger. </title> <meta charset=utf-8> <meta name=description content= Oostendam als 'Wassenaar aan de Waal' bezongen in het vijfde couplet van de Ridderkerkse Meezinger > <meta name=keywords content= Oostendam, De Waal, Ridderkerk, Meezinger > </head> <body style="background: #cae1ff; text-align: center; margin-top: 100px; font-family: arial; font-size:120%; line-height:130%;"> <h1 style="color: gray;">de Ridderkerkse Meezinger</h1> <h3 style="margin-top: 55px;">'Wassenaar aan de Waal'</h3> <p style="margin-top: 30px;"> De Pruimendijk ging vroeg met pensioen.<br> De dijk had geen kind aan de Waal.<br> Die afgedamd van getijden ontdaan.<br> Als stil binnenwater bleef staan. De Waal werd gezuiverd. Verwijderd de prut.<br> De oevers veranderen in een bouwput.<br> Het Wassenaar komt er nu aan.<br> En Oostendam wordt heel voornaam. Gevraagd werd ook om een beleid.<br> Voor Oostendam als eigen wijk.<br> Voor Oostendam als eigen wijk. <p style="font-size: 75%; color: #404040; margin-top: 30px;">Faas van Rietschoten </body> </html> Dit aldus gewijzigde bestand vers-wassenaarwaal.html opslaan met dezelfde naam vers-wassenaarwaal.html want het moet de eerdere versie vervangen. Daarna openen in een browser. Ziedaar:
Dat was doorwerken. U raakt zo wel wat meer vertrouwd met het websitewerk. In Les 5 gaan we de vijf webpagina's aan elkaar koppelen door middel van een menu met links. Faas van Rietschoten 2014