LES 3 – WEBPAGINA'S MAKEN MET HTML VOOR DE INHOUD EN MET CSS VOOR DE OPMAAK De webpagina die we in de eerste twee lessen maakten, bestond uit een gedicht van tien woorden. <meta charset=utf-8> <meta name=description content=“Beschrijving van de website”> <meta name=keywords content=”Kernwoorden”> Wonderlijk
oprecht
gedicht

verlicht
sticht

steunt
sterkt -

wonderlijk
oprecht
gedicht

We starten nu een groter project. We gaan een lied dat vijf coupletten telt, gereed maken voor publicatie op Internet. Laten we beginnen met het eerste couplet. Open in Kladblok het model.html bestand

<meta charset=utf-8> <meta name=description content=“een beschrijving van de inhoud van de webpagina”> <meta name=keywords content=”met kernwoorden de inhoud duiden”> Hier de inhoud van de webpagina. Even terzijde: Het lied met vijf coupletten kun je net zo goed een gedicht met vijf verzen noemen. Goed. Je zou het lied of gedicht in één keer in z'n geheel in de body kunnen zetten, dus in .. op de plaats waar nu de regel staat 'Hier de inhoud van de webpagina'. Dat is ook gebruikelijk. Op ons practicum verwerken we echter elk van de vijf verzen tot een webpagina. In deze les doen we het voor het eerste vers. Okay. Aan het werk. De titel van het gedicht luidt: De Ridderkerkse Meezinger. Het eerste vers gaat als volgt: Bolnesserbocht in de Nieuwe Maas Daar stroomt heel wat water door heen Hoe houd je het droog Ja, dat is dan de vraag Door dijken op deltaniveau Dijkhuizen verdwenen, de werf op zijn beurt Geen lasser of klinker die niet heeft getreurd Na tijden vol onzekerheid Wordt toch langs de dijk weer geheid De woningen die er nu staan Zijn torens zo hoog als een kraan Zijn torens zo hoog als een kraan Hiermee vullen we de relevante delen van het geopende model.html-bestand. Dat betreft in de head sectie .. de titel, de beschrijving en de kernwoorden van de webpagina. En in de body sectie .. het vervangen van de regel “Hier de inhoud van de webpagina.' door de tekst van het eerste vers. In het vers passen we het html code element
toe. <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”> Bolnesserbocht in de Nieuwe Maas
Daar stroomt heel wat water door heen
Hoe houd je het droog


Ja, dat is dan de vraag
Door dijken op deltaniveau

Dijkhuizen verdwenen, de werf op zijn beurt
Geen lasser of klinker die niet heeft getreurd
Na tijden vol onzekerheid
Wordt toch langs de dijk weer geheid

De woningen die er nu staan
Zijn torens zo hoog als een kraan
Zijn torens zo hoog als een kraan 'Opslaan als' in map practicum. Als bestand met de nieuwe naam: versbolnesserbocht.html. Het opgeslagen bestand openen in een browser.

We gaan dit resultaat verder ontwikkelen met een tweetal html code elementen. 1. TITEL ... Boven het vers zou een titel als kop niet misstaan. Html gebruikt voor een kop het engelstalige heading, verkort tot h, in zes verschillende uitvoeringen

..

,

..

, ....

..

.

..

is de grootste kop,

..

de kleinste. Voorbeeld. Hieronder gebruiken we

De Ridderkerkse Meezinger

en

Bolnesserbocht in de Nieuwe Maas

. Voor de titel van het vers kiezen we een kleinere kop,

..

, dan voor het hele gedicht van vijf verzen; daar nemen we de grote kop

..

voor.

De grootte in koppen neemt doorgaans af, vanaf de titel van het artikel, via de titel van secties, naar de titels van onderdelen van secties. Zoekmachines interpreteren mee. De grootte van de kop is uiteraard ook een kwestie van stijl, van smaak. Probeer het uit, de combinatie van verschillende kopgrootte in de tekst op een webpagina. 2. ALINEA

..

Tekst placht men in alinea's te verdelen. Html gebruikt daarvoor de p van paragraph, het Engelse woord voor het Nederlandse woord alinea. Bij het begin van een alinea en na het einde van een alinea staat dan respectievelijk

..

. In ons voorbeeld behoort dus voor de eerste versregel 'Bolnesserbocht in de Nieuwe Maas' het code element

. Blijven in ons voorbeeld alle code-elementen
staan, dan komt de

pas achter de allerlaatste versregel 'Zijn torens zo hoog als een kraan'. Ja maar... Tweemaal
achter elkaar:

, maakt een witregel en verdeelt de tekst dus ook in alinea's. Moet je dan

, vervangen door

? Dat verdient inderdaad de voorkeur. Dat gaan we veranderen. Maar let op. In ons voorbeeld moet je de voorafgaande alinea met versregels eerst afsluiten met

. In plaats van

wordt het in dit geval dus

. Als u hieronder naar de indeling van de versregels in 3 alinea's kijkt, wordt dat ineens duidelijk. Elke alinea begonnen met

, moet aan het eind afgesloten worden met

. Daarna kan men met

de volgende alinea beginnen. Past u dergelijke regels toe, dan blijft het 'geschreven' html-bestand ook beter beantwoorden aan het schoolvoorbeeld van een html-pagina, waarin de inhoud gestructureerd door html-code-elementen, gegroepeerd onder elkaar staat. <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”>

De Ridderkerkse Meezinger

Bolnesserbocht in de Nieuwe Maas

Bolnesserbocht in de Nieuwe Maas
Daar stroomt heel wat water door heen
Hoe houd je het droog
Ja, dat is dan de vraag
Door dijken op deltaniveau

Dijkhuizen verdwenen, de werf op zijn beurt
Geen lasser of klinker die niet heeft getreurd
Na tijden vol onzekerheid
Wordt toch langs de dijk weer geheid

De woningen die er nu staan
Zijn torens zo hoog als een kraan
Zijn torens zo hoog als een kraan

We gaan het weer opslaan als vers-bolnesserbocht.html Wordt bij het opslaan gevraagd of bestaande versie van het bestand versbolnesserbocht.html moet worden vervangen, bevestigend op reageren, ja, inderdaad. Opgeslagen bestand geopend in een browser:

Tot slot ontwikkelen we het bovenstaande nóg een stapje verder. Nu met CSS. 3. CSS-AANWIJZINGEN VOOR DE BROWSER De instellingen van de browser zijn standaard afgesteld. Wilt u de browser aanwijzingen

geven op bepaalde punten van de standaard af te wijken, dan kan dat. Bij voorkeur door middel van CSS-aanwijzingen. CSS kent twee werkwijzen: de interne en de externe werkwijze. In deze les passen we de interne werkwijze toe. Doel is een idee te krijgen hoe CSS er uit ziet en hoe het functioneert. De interne werkwijze houdt in dat de CSS-aanwijzigen voor de browser in de html-code-elementen worden gezet in het html-bestand. De CSS interne werkwijze Stel, u wil voor de hele webpagina zoals die in een browser wordt gepresenteerd een andere achtergrond. U hebt op Internet gezocht en kwam op de webkleurenpagina http://www.helderester.nl/kleurentabel.html De kleur met de naam: cornsilk wil u wel eens uitproberen. De hex waarde is #fff8dc. Hex is een verkorting van hexadecimaal. De waarde kun je ook gebruiken. Maar dit terzijde. Het deel van de webpagina dat in het browservenster wordt getoond, staat in het .. gedeelte van een html-pagina. De HTML-CSS-taal is Engels. 'Achtergrond' wordt dan 'background' en cornsilk is al Engels. Uw gewenste achtergrond met de kleur cornsilk wordt in CSS: style=”background:cornsilk;” Dit plaatst u in het html-code-element . Het wordt dus . Kijk nog eens nauwkeurig naar de tekens. Tussen style, background, en cornsilk worden de tekens =, “ “, : en ; gebruikt. Nu wordt een ; of een “ makkelijk over het hoofd gezien dan wel vergeten, of er wordt een = geplaatst waar een : behoort te staan. Anderzijds, oefening baart ook hier de kunde. Meer voorbeelden Wilt u de tekst centreren? CSS reikt u daarvoor aan: text-align: center; U kunt het in erbij zetten. Voor de b van background of na de puntkomma van cornsilk. Ziet u dat het tweede aanhalingsteken meeloopt tot het eind. De “..” omsluiten alle CSSelementen. Wilt u misschien een grotere bovenmarge, van 100px, dan kan dat met margin-top: 100px; De aanduiding px is de weergave van pixel. Pixels, u bekend van het te ver uitvergroten van digitale foto's en de bekende reactie “je kunt de pixels tellen”. Het is ook een bepaalde meeteenheid om bijvoorbeeld breedte, hoogte, onderlinge afstanden weer te geven. Er zijn meer meeteenheden. Nu verder met nog een paar CSS voorbeelden om tekst te veranderen. Het lettertype, de lettergrootte en de regelhoogte veranderen? Bijvoorbeeld het lettertype veranderen in arial, lettergrootte naar 120%, en regelhoogte naar 130%. In CSS style wordt dat respectievelijk weergegeven als: font-family: arial; font-size:120%; line-height: 130%; In het body code element zet u het er weer bij. Het body code element was gegroeid van tot . Met de aanwijzingen voor een andere bovenmarge, lettertype, lettergrootte en regelafstand erbij, wordt het: .

Mooi. U hebt nu ook kennis gemaakt met de wereld van CSS. We zetten de CSS in het vers-bolnesserbocht.html en zien het effect in de browser. De behandelde CSS-aanwijzingen zijn hieronder toegevoegd in de . Voor de duidelijkheid heb ik die CSS-elementen rood gekleurd. Het maakt verder niets uit. Zoals u ziet heb ik in het html-bestand bovendien, in

de kleur gewijzigd, in

en in de eerste en allerlaatste

, een bovenmarge gezet. En verkleinde ik in de allerlaatste

de lettergrootte en veranderde er de kleur. Staan alle CSS-aanwijzingen in het html-bestand, dan het bestand opslaan in de map practicum, als vers-bolnesserbocht.html – wordt bij het opslaan gevraagd de bestaande versie van vers-bolnesserbocht.html vervangen, reageer: ja, vervangen. <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”>

De Ridderkerkse Meezinger

Bolnesserbocht in De Nieuwe Maas

Bolnesserbocht in De Nieuwe Maas
Daar stroomt heel wat water door heen
Hoe houd je het droog
Ja, dat is dan de vraag
Door dijken op deltaniveau

Dijkhuizen verdwenen, de werf op zijn beurt
Geen lasser of klinker die niet heeft getreurd
Na tijden vol onzekerheid
Wordt toch langs de dijk weer geheid

De woningen die er nu staan
Zijn torens zo hoog als een kraan
Zijn torens zo hoog als een kraan

Faas van Rietschoten

De nieuwe versie van bestand vers-bolnesserbocht.html openen in een browser geeft dit beeld:

We zijn flink opgeschoten in deze les. In Les 4 verwerken we de andere vier verzen (of: coupletten) van het gedicht (of: lied) tot webpagina's. In Les 5 maken we de links tussen de webpagina's. En daarmee hebben dan we een functionerende website op de computer staan. Faas van Rietschoten 2014